/* Slick Worldwide Removals and Storage: site styles. "The Blue Board" (decision D-20261004-3).
   Ocean blue and white. One family, Archivo (self-hosted, variable weight and width), in five
   voices: HEADLINE (800 at 82% width, sentence case), BOARD (700 at 72% width, caps, for names),
   LABEL (600 caps, functional captions only), BUTTON (700 caps) and KICKER (600 sentence case
   above a headline). Italic belongs only to the brand: the wordmark, the plate line and the
   footer line. Square corners, hairlines not boxes, no shadows, no gradient fills, no pills.

   Tokens, and what each one means:
   --ocean       #E6007E  brand blue: hero field, wordmark, mark, primary buttons, links, service
                          numbers, live lights on light surfaces, sea and air arcs, AU ports.
                          Never as text or marks on navy or ink.
   --ocean-deep  #B8005F  hover and pressed state of ocean; the cyanotype ink of the photo plate.
   --ink         #1A1020  headings and strong text on white; footer; tooltips; hot arc. Replaces black.
   --navy        #2A0A1E  dark plates: the departures board, .section-dark, .cta, .svc-sec-dark.
   --signal      #FFF200  sky. Only on navy, ink or ocean-deep (as a mark only on ocean): live
                          lights on dark, active tab, live lane, footer CTA, invalid-field fill.
   --foam        #FFF0F7  plate band, row hover, map background while tiles load.
   --mist        #F3CFE2  hairlines on white and foam.      --line-2  #E9B3D0  secondary hairline.
   --line-3      #B9789B  control boundary on white (3.18:1, WCAG 1.4.11): home quote form.
   --body        #3A2533  body copy.                        --muted   #6B4A5E  captions, labels.
   --on-ocean    #FFE3F1  secondary text on the ocean hero.
   --on-navy     #EBD3E0  secondary text on navy and ink.   --on-navy-2 #D2B3C5 labels on navy.
   --haze        #8A6A7D  'other' vessels on the chart.     --attrib  #6B5462  map attribution.
   The old names stay as aliases so every page recolours at once: --red is ocean, --red-dark is
   ocean-deep, --red-tint is foam, --yellow is signal, --black is ink. */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-wdth-italic.woff2") format("woff2-variations"), url("/assets/fonts/archivo-latin-wdth-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }

:root {
  --ocean: #E6007E;
  --ocean-deep: #B8005F;
  --ink: #1A1020;
  --navy: #2A0A1E;
  --signal: #FFF200;
  --foam: #FFF0F7;
  --mist: #F3CFE2;
  --line-2: #E9B3D0;
  --line-3: #B9789B;
  --body: #3A2533;
  --muted: #6B4A5E;
  --on-ocean: #FFE3F1;
  --on-navy: #EBD3E0;
  --on-navy-2: #D2B3C5;
  --haze: #8A6A7D;
  --attrib: #6B5462;
  --paper: #FFFFFF;
  /* the graduated neatline of a chart: ink and white 32px blocks (the two maps only) */
  --scale-x: repeating-linear-gradient(90deg, var(--ink) 0 32px, #fff 32px 64px);
  --scale-y: repeating-linear-gradient(180deg, var(--ink) 0 32px, #fff 32px 64px);

  /* aliases: the old names, so every page recolours at once */
  --red: var(--ocean);
  --red-dark: var(--ocean-deep);
  --red-tint: var(--foam);
  --yellow: var(--signal);
  --black: var(--ink);
  --ink-2: #2A1530;
  --ink-3: #3A1D40;
  --line: var(--mist);
  --hair: var(--mist);
  --hair-dark: #4A2338;
  --bg: #fff;
  --bg-alt: var(--foam);
  --white: #fff;

  --wrap: 1180px;
  --radius: 0;
  --radius-lg: 0;
  --shadow: none;
  --shadow-lg: none;

  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 106.25%; }   /* 1rem = 17px, so the label sizes mean what the spec assumed */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* HEADLINE: upright 800 at 82% width, sentence case. (The font shorthand resets font-stretch,
   so every rule below that uses it sets font-stretch after it.) */
h1, h2 { margin: 0 0 .5em; color: var(--ink); font-style: normal; font-weight: 800; font-stretch: 82%; text-transform: none; letter-spacing: -.025em; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 4vw, 3.5rem); line-height: .94; }
h2 { font-size: clamp(2.2rem, 3.9vw, 3.3rem); }
h3 { margin: 0 0 .5em; color: var(--ink); font-size: 1.2rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
/* body copy is never italic; italic belongs only to the brand */
em, i, cite, address { font-style: normal; }
.label { font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ocean); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ocean-deep); text-decoration-thickness: 2px; }
.section-dark a:not([class]), .svc-sec-dark a:not([class]), .cta a:not([class]), .notice-bar a:not([class]) { color: #fff; }
.section-dark a:not([class]):hover, .svc-sec-dark a:not([class]):hover, .cta a:not([class]):hover { color: var(--signal); }

img, svg { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; border-radius: 0; }
[id] { scroll-margin-top: 88px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; }

.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;
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--ink); padding: 12px 18px; font-weight: 700; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- buttons ---------- */

/* BUTTON: square, upright caps. Ocean on white or foam; white on navy; sky on ink. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 2px solid var(--ocean); border-radius: 0; background: var(--ocean); color: #fff; font: 700 .82rem/1 var(--font); font-stretch: 100%; font-style: normal; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .12s, color .12s, border-color .12s; }
.btn:hover { background: var(--ocean-deep); border-color: var(--ocean-deep); color: #fff; }
.btn:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
.btn:active { transform: none; }
.btn-primary { background: var(--ocean); color: #fff; border-color: var(--ocean); }
.btn-primary:hover { background: var(--ocean-deep); border-color: var(--ocean-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-yellow { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.btn-yellow:hover { background: #fff; border-color: #fff; color: var(--ink); }
/* on the navy plates */
.section-dark .btn-primary, .cta .btn-primary, .svc-sec-dark .btn-primary { background: #fff; color: var(--ocean); border-color: #fff; }
.section-dark .btn-primary:hover, .cta .btn-primary:hover, .svc-sec-dark .btn-primary:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.section-dark .btn-ghost, .cta .btn-ghost, .svc-sec-dark .btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.section-dark .btn-ghost:hover, .cta .btn-ghost:hover, .svc-sec-dark .btn-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
.section-dark .btn:focus-visible, .cta .btn:focus-visible, .svc-sec-dark .btn:focus-visible { outline-color: var(--signal); }
.btn-lg { min-height: 56px; padding: 0 24px; font-size: .9rem; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: .78rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ---------- header: white, one hairline under it, the ocean mark ---------- */

.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-top: 0; border-bottom: 1px solid var(--mist); box-shadow: none; }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 80px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand-mark { width: auto; height: 44px; flex: none; }
.brand-logo { display: block; width: auto; height: 56px; flex: none; }   /* the full logo, laid out wide: horse, wordmark, tagline in the logo's own lettering */
/* BRAND, the only italic: "Slick Worldwide" over "Removals and Storage" */
.brand-text { display: grid; font: italic 800 1.18rem/1 var(--font); letter-spacing: -.01em; text-transform: uppercase; color: var(--ocean); }
.brand-thin { display: block; margin: 3px 0 0; font: italic 700 .72rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ocean); white-space: nowrap; }
.brand:focus-visible { outline-color: var(--ocean); }
@media (max-width: 1240px) and (min-width: 1025px) { .brand-logo { height: 46px; } }
@media (max-width: 600px) { .header-inner { min-height: 68px; } .brand-logo { height: 44px; } }
@media (max-width: 400px) { .brand-logo { height: 40px; } .header-inner { min-height: 64px; } .brand { min-height: 44px; } .brand-text { font-size: 1rem; } .brand-thin { font-size: .66rem; } .brand-mark { height: 38px; } }

.primary-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
/* nav links in a small caps voice; the phone number and the button keep their own */
.primary-nav a, .nav-dd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 12px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 600 .72rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; text-decoration: none; cursor: pointer; }
.primary-nav a:hover, .nav-dd-btn:hover, .nav-dd-btn[aria-expanded="true"] { background: transparent; color: var(--ocean); }
.primary-nav a:focus-visible, .nav-dd-btn:focus-visible { outline-color: var(--ocean); }
.primary-nav .nav-phone { font: 700 .95rem/1 var(--font); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.primary-nav .btn { margin-left: 8px; min-height: 44px; padding: 0 18px; background: var(--ocean); color: #fff; border-color: var(--ocean); font: 700 .78rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.primary-nav .btn:hover { background: var(--ocean-deep); border-color: var(--ocean-deep); color: #fff; }
@media (min-width: 1025px) and (max-width: 1120px) { .primary-nav .nav-phone { display: none; } }   /* keeps the header on one row; the number is in the sticky bar and footer */

.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; background: #fff; border: 2px solid var(--ink); border-radius: 0; cursor: pointer; }
.nav-toggle:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 20px; height: 2px; background: var(--ink);
  margin: 0 auto; position: relative; transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .primary-nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--mist); max-height: 0; overflow: hidden; transition: max-height .22s ease; }
  .primary-nav.is-open { max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0 24px 24px; }
  .primary-nav > ul > li { border-top: 1px solid var(--mist); }
  .primary-nav > ul > li:first-child { border-top: 0; }
  .primary-nav a, .nav-dd-btn { width: 100%; min-height: 52px; justify-content: space-between; padding: 0; font: 700 1.05rem/1.1 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); }
  .primary-nav .nav-phone { font: 700 1.25rem/1 var(--font); letter-spacing: 0; text-transform: none; }
  .primary-nav .btn { margin: 16px 0 0; width: 100%; min-height: 52px; justify-content: center; font: 700 .82rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
  .header-inner { position: relative; }
}

/* ---------- hero ---------- */

.hero { background: var(--white); padding: clamp(40px, 6vw, 76px) 0 clamp(48px, 7vw, 88px); }

.hero h1 { color: var(--ink); max-width: 15ch; }
.hero .lede { font-size: clamp(1.05rem, 1.5vw, 1.22rem); max-width: 46ch; color: var(--body); }

/* KICKER: a plain sentence above a headline (the tracked caps eyebrow with a square was a template tell) */
.eyebrow { display: block; margin: 0 0 16px; font: 600 1rem/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--ocean); }
.eyebrow::before { display: none; }
.section-dark .eyebrow, .cta .eyebrow, .svc-sec-dark .eyebrow { color: var(--on-navy); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 28px; }

.hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid currentColor; }
.hero-points li { padding: 10px 0; border-bottom: 1px solid var(--mist); font-size: .98rem; color: var(--body); }

.mini-quote { display: grid; gap: 14px; }

@media (max-width: 940px) {

  .hero h1 { max-width: none; }
}

/* ---------- form fields ---------- */

.field { display: grid; gap: 6px; }
.field label { font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.req { color: var(--ink); }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea { font: 700 1.05rem/1.35 var(--font); color: var(--ink); width: 100%; padding: 12px 14px; background: #fff; border: 2px solid var(--ink); border-radius: 0; box-shadow: none; transition: none; }
textarea { resize: vertical; min-height: 100px; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--ocean); outline-offset: 2px; border-color: var(--ink); box-shadow: none; }
::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
/* brand ocean for native radios and checkboxes (the .field-check and .qf-consent rules below still win) */
input[type="radio"], input[type="checkbox"] { accent-color: var(--ocean); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--ink); background: var(--signal); color: var(--ink); }
input[aria-invalid="true"]::placeholder, textarea[aria-invalid="true"]::placeholder { color: var(--body); }   /* muted is 3.72:1 on signal; body is 6.01:1 */

.field-check { grid-template-columns: auto 1fr; align-items: start; gap: 11px; }
.field-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ocean); }
.field-check label { font-weight: 400; font-size: .92rem; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--body); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- stat strip ---------- */

.strip { background: var(--black); color: var(--white); }

/* ---------- sections ---------- */

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-alt { background: #fff; }
.section-dark { background: var(--navy); color: var(--on-navy); }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .section-sub { color: var(--on-navy-2); }
/* every section opens on a 2px rule in the section's ink, drawn on the content edge, not across the wrap's padding */
.section > .wrap { border-top: 0; padding-top: 30px; background: linear-gradient(var(--ink), var(--ink)) center top / calc(100% - 48px) 2px no-repeat; }
.section-dark > .wrap { background-image: linear-gradient(#fff, #fff); }

.section-head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 44px); }
.section-sub { color: var(--muted); font-size: 1rem; }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: none; }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--body); font-size: .97rem; margin: 0; }
.card-dark { background: var(--ink-2); border-color: rgba(255,255,255,.14); }
.card-dark:hover { border-color: var(--signal); transform: translateY(-2px); box-shadow: none; }
.card-dark p { color: var(--on-navy); }

/* fleet */
.fleet { margin-top: clamp(36px, 5vw, 56px); }

/* coverage chips */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  background: var(--white); border: 1px solid var(--line-2); border-radius: 0;
  padding: 9px 18px; font-size: .93rem; font-weight: 500; color: var(--ink);
}

/* steps */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.steps li { position: relative; padding-top: 24px; border-top: 2px solid var(--line); }
.steps li:first-child { border-top-color: var(--red); }

.steps h3 { margin-bottom: .4em; }
.steps p { color: var(--body); font-size: .96rem; }
@media (max-width: 940px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .steps { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- quote ---------- */

.quote-wrap {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.quote-contact { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.quote-contact li { display: grid; gap: 3px; font-size: 1rem; }
.quote-contact span {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 800; color: var(--muted);
}
.quote-contact a { font-weight: 700; }

.quote-form {
  display: grid; gap: 18px; position: relative;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px); box-shadow: none;
}
.quote-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .quote-form .row { grid-template-columns: 1fr; } }
@media (max-width: 940px) { .quote-wrap { grid-template-columns: 1fr; } }

.form-status { margin: 0; font: 700 .95rem/1.4 var(--font); }
.form-status.is-error { display: inline-block; padding: 10px 14px; background: var(--yellow); color: var(--ink); }
.form-status.is-ok { color: var(--ink); }
.form-note { font-size: .9rem; color: var(--muted); margin: 0; }

.form-done { text-align: center; padding: 20px 0; }
.form-done h3 { font-size: 1.5rem; }
.form-done p { color: var(--body); }

/* ---------- faq ---------- */

.faq { display: grid; gap: 0; max-width: 860px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 0; }
.faq summary {
  cursor: pointer; padding: 22px 0; font-weight: 700; font-size: 1.06rem; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red);
  transform: rotate(45deg) translateY(-3px); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 0 22px; margin: 0; color: var(--body); font-size: .99rem; max-width: 70ch; }

/* ---------- cta ---------- */

.cta { background: var(--navy); color: #fff; padding: clamp(44px, 6vw, 72px) 0; }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cta h2 { color: #fff; margin-bottom: .25em; }
.cta p { color: var(--on-navy); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- simple pages ---------- */

.page { padding: clamp(48px, 7vw, 84px) 0; }
.page-body { max-width: 72ch; }
.page-body h2 { font-size: 1.4rem; margin-top: 2em; }
.page-body ul { padding-left: 1.2em; }
.page-body li { margin-bottom: .5em; }
.page-body .updated { color: var(--muted); font-size: .9rem; }

.error-page { text-align: center; padding: clamp(64px, 12vw, 150px) 0; }
.error-page .code {
  font-size: clamp(3.5rem, 13vw, 7rem); font-weight: 800; color: var(--red);
  line-height: 1; letter-spacing: -.05em;
}


.fleet + .fleet, .fleet-lede + .fleet-list { margin-top: 22px; }

/* ============ notice bar ============ */

.notice-bar {
  background: var(--navy); color: var(--on-navy);
  padding: 11px 24px; font-size: .9rem; line-height: 1.45; text-align: center;
}
.notice-bar a { color: #fff; font-weight: 700; }
.notice-bar a:hover { color: var(--signal); }
.notice-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 0;
  background: var(--signal); margin-right: 8px; vertical-align: middle;
  animation: live-blink 1.6s steps(1) infinite;
}

/* ---- app hero ---- */

.app-hero {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--white) 100%);
  padding: clamp(40px, 6vw, 76px) 0 clamp(48px, 7vw, 88px);
  overflow: hidden;
}
.app-hero-inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.app-hero h1 { max-width: 12ch; }
.app-hero .lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 46ch; color: var(--body); }

.phone-stack { position: relative; display: flex; justify-content: center; padding: 20px 0; }
.phone-lead { position: relative; z-index: 2; }
.phone-back {
  position: absolute; left: 50%; top: 0; z-index: 1;
  transform: translateX(-88%) rotate(-7deg) scale(.9);
  transform-origin: bottom center; opacity: .96;
}
@media (max-width: 1080px) { .phone-back { display: none; } }
@media (max-width: 940px) {
  .app-hero-inner { grid-template-columns: 1fr; }
  .app-hero h1 { max-width: none; }
}

/* ---- alternating feature rows ---- */

.feat {
  display: grid; grid-template-columns: 1fr minmax(0, 300px); gap: clamp(28px, 5vw, 72px);
  align-items: center; padding: clamp(32px, 5vw, 56px) 0;
  border-top: 1px solid var(--line);
}
.feat:first-of-type { border-top: 0; padding-top: 0; }
.feat-flip .feat-copy { order: 2; }
.feat-flip .feat-phone { order: 1; }
.feat-copy { max-width: 52ch; }
.feat-num { display: block; margin-bottom: 12px; font: 800 1rem/1 var(--font); font-variant-numeric: tabular-nums; color: var(--muted); }

.feat-copy h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.03em; margin-bottom: .5em; }
.feat-copy p { color: var(--body); font-size: 1.02rem; }
.feat-phone { display: flex; justify-content: center; }
@media (max-width: 860px) {
  .feat, .feat-flip { grid-template-columns: 1fr; }
  .feat-flip .feat-copy, .feat-flip .feat-phone { order: 0; }
}

.opt { font-weight: 400; color: var(--muted); }

/* Feature-row phones are decorative; a shorter screen keeps the copy from
   floating in a tall column of whitespace. */
.feat .phone { width: 250px; }
.feat .phone-screen { min-height: 440px; }
.feat .ps-map { min-height: 210px; }

/* ============ iPhone render ============ */

.phone { width: 274px; max-width: 100%; perspective: 1400px; }
.phone-frame {
  position: relative;
  background: linear-gradient(150deg, var(--hair-dark) 0%, var(--ink-2) 22%, var(--ink) 50%, var(--ink-3) 78%, var(--ink-2) 100%);
  border-radius: 0; padding: 11px;
  box-shadow: none;
}
/* side buttons */
.phone-frame::before, .phone-frame::after {
  content: ""; position: absolute; width: 3px; border-radius: 0;
  background: linear-gradient(180deg, var(--hair-dark), var(--ink-2));
}
.phone-frame::before { left: -3px; top: 118px; height: 34px;
  box-shadow: none; }
.phone-frame::after { right: -3px; top: 140px; height: 62px; }

.phone-screen {
  position: relative; background: var(--white); border-radius: 0; overflow: hidden;
  min-height: 552px; display: flex; flex-direction: column;
}
/* dynamic island */
.phone-screen::before {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 25px; background: var(--ink); border-radius: 0; z-index: 6;
}
.phone-glare {
  position: absolute; inset: 11px; border-radius: 0; pointer-events: none; z-index: 7;
  background: linear-gradient(128deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 26%,
              rgba(255,255,255,0) 46%);
}

/* status bar */
.ps-status {
  position: relative; z-index: 5; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 22px 4px; font-size: .74rem; font-weight: 700; color: var(--ink);
}
.ps-time { letter-spacing: -.01em; padding-left: 4px; }
.ps-sys { display: inline-flex; align-items: center; gap: 5px; }
.ps-ico { height: 10px; width: auto; fill: currentColor; color: var(--ink); }
.ps-status.on-dark, .ps-status.on-dark .ps-ico { color: #fff; }

.ps-home {
  flex: none; width: 116px; height: 5px; border-radius: 0;
  background: var(--line-2); margin: 6px auto 8px; z-index: 5; position: relative;
}
.ps-home.on-dark { background: rgba(255,255,255,.5); }

/* ---- screen furniture ---- */

.ps-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ps-head {
  padding: 12px 18px 10px; font-size: 1.12rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.025em;
}
.ps-head-row { display: flex; align-items: center; gap: 9px; font-size: .95rem; padding-top: 8px; }
.ps-label {
  padding: 10px 18px 6px; font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.ps-field {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 8px; padding: 12px 13px; font-size: .84rem; color: var(--ink);
  background: var(--bg-alt); border-radius: 0;
}
.ps-tier {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 14px 7px; padding: 11px 13px; border-radius: 0; border: 1px solid var(--line);
}
.ps-tier.is-on { border: 2px solid var(--ink); padding: 10px 12px; }
.ps-tier b { font-size: .85rem; color: var(--ink); }
.ps-tier i { font-style: normal; font-size: .74rem; color: var(--muted); }
.ps-tier em {
  font-style: normal; margin-left: auto; font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--red); color: #fff; padding: 3px 7px; border-radius: 0;
}
.ps-cta {
  margin: auto 14px 6px; padding: 13px; text-align: center;
  background: var(--ink); color: var(--white); border-radius: 0;
  font-size: .86rem; font-weight: 700;
}

.ps-map { flex: 1; min-height: 210px; position: relative; }
.ps-map svg { display: block; width: 100%; height: 100%; }

.ps-sheet {
  background: var(--white); border-radius: 0; padding: 15px 16px 6px;
  margin-top: -20px; position: relative; z-index: 4;
  box-shadow: none;
}
.ps-grab {
  width: 34px; height: 4px; border-radius: 0; background: var(--line-2);
  margin: -6px auto 12px;
}
.ps-eta { margin-bottom: 12px; }
.ps-eta strong { display: block; font-size: 1.02rem; color: var(--ink); letter-spacing: -.02em; }
.ps-eta span { font-size: .76rem; color: var(--muted); }

.ps-rider { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.ps-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--white);
  display: grid; place-items: center; font-size: .7rem; font-weight: 800;
}
.ps-avatar-sm { width: 26px; height: 26px; font-size: .66rem; }
.ps-rider-meta { display: grid; gap: 1px; flex: 1; }
.ps-rider-meta b { font-size: .83rem; color: var(--ink); }
.ps-rider-meta i { font-style: normal; font-size: .7rem; color: var(--muted); }
.ps-chip {
  font-size: .68rem; font-weight: 700; color: var(--ink);
  background: var(--bg-alt); padding: 4px 8px; border-radius: 0;
}
.ps-btns { display: flex; gap: 8px; }
.ps-btn { flex: 1; text-align: center; padding: 10px; border-radius: 0; font-size: .78rem; font-weight: 700; }
.ps-btn-light { background: var(--bg-alt); color: var(--ink); }
.ps-btn-dark { background: var(--ink); color: var(--white); }
.ps-btn-yellow { background: var(--signal); color: var(--ink); }

.ps-chat { flex: 1; display: grid; gap: 8px; padding: 10px 14px; align-content: start; background: var(--bg-alt); }
.ps-msg { max-width: 84%; padding: 9px 12px; border-radius: 0; font-size: .76rem; line-height: 1.4; }
.ps-them { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.ps-me { background: var(--ink); color: var(--white); justify-self: end; border-bottom-right-radius: 5px; }
.ps-dots { display: flex; gap: 4px; width: max-content; }
.ps-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.3s infinite; }
.ps-dots i:nth-child(2) { animation-delay: .2s; }
.ps-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.ps-chatbar {
  margin: 10px 14px 6px; padding: 11px 14px; border-radius: 0;
  background: var(--bg-alt); color: var(--muted); font-size: .76rem;
}

.ps-offer { flex: 1; display: flex; flex-direction: column; background: var(--navy); padding-top: 6px; }
.ps-offer-top { text-align: center; padding: 10px 16px 4px; }
.ps-offer-top b {
  display: block; font-size: 2.1rem; font-weight: 800; color: #fff; letter-spacing: -.04em;
}
.ps-offer-top span { font-size: .74rem; color: var(--on-navy-2); }
.ps-ring {
  width: 52px; height: 52px; margin: 8px auto 4px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18); border-top-color: var(--signal);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .85rem;
  animation: spin 3s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ps-legs { margin: 10px 14px 0; display: grid; gap: 8px; }
.ps-leg {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,.06); border-radius: 0; padding: 11px 12px;
}
.ps-leg b { font-size: .8rem; color: #fff; display: block; }
.ps-leg i { font-style: normal; font-size: .7rem; color: var(--on-navy-2); }
.ps-leg .dot { margin-top: 5px; }
.dot-pick { background: #fff; }
.dot-drop { background: var(--red); }
.ps-offer-btns { margin: auto 14px 6px; display: grid; gap: 8px; }

.ps-earn { flex: 1; padding: 6px 16px 0; }
.ps-earn-big {
  font-size: 2.3rem; font-weight: 800; color: var(--ink); letter-spacing: -.04em; line-height: 1.1;
}
.ps-earn-sub { font-size: .74rem; color: var(--muted); margin-bottom: 14px; }
.ps-bars { display: flex; align-items: flex-end; gap: 7px; height: 92px; margin-bottom: 6px; }
.ps-bars i { flex: 1; background: var(--line); border-radius: 0; }
.ps-bars i.on { background: var(--red); }
.ps-days { display: flex; gap: 7px; font-size: .66rem; color: var(--muted); margin-bottom: 14px; }
.ps-days span { flex: 1; text-align: center; }
.ps-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-stat { background: var(--bg-alt); border-radius: 0; padding: 11px 12px; }
.ps-stat b { display: block; font-size: 1.05rem; color: var(--ink); letter-spacing: -.02em; }
.ps-stat span { font-size: .66rem; color: var(--muted); }

.ps-nav-top {
  background: var(--red); color: #fff; padding: 12px 16px 14px; display: flex; gap: 12px; align-items: center;
}
.ps-nav-arrow { font-size: 1.6rem; line-height: 1; }
.ps-nav-top b { display: block; font-size: 1.05rem; letter-spacing: -.02em; }
.ps-nav-top span { font-size: .72rem; }
.ps-nav-top b + span { color: var(--on-ocean); }   /* 4.90:1 on ocean; nested opacity took it to 3.97:1 */

/* three app screenshots side by side */
.app-shots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
}
.app-shots figure { margin: 0; display: grid; justify-items: center; gap: 22px; }
.app-shots figcaption { text-align: center; max-width: 34ch; color: var(--body); font-size: .95rem; }
.app-shots figcaption strong {
  display: block; color: var(--ink); font-size: 1.08rem; font-weight: 700;
  letter-spacing: -.02em; margin-bottom: .35em;
}
.shots-note { margin-top: 32px; font-size: .84rem; color: var(--muted); text-align: center; }
@media (max-width: 900px) {
  .app-shots { grid-template-columns: 1fr; gap: 40px; }
}

/* requirements */
.req-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 56px);
}
.req-list li {
  display: grid; gap: 4px; padding: 20px 0 20px 34px;
  border-bottom: 1px solid var(--line); position: relative;
}
.req-list li::before {
  content: ""; position: absolute; left: 0; top: 25px;
  width: 15px; height: 9px; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red);
  transform: rotate(-45deg);
}
.req-list strong { color: var(--ink); font-size: 1.05rem; }
.req-list span { color: var(--body); font-size: .95rem; }
@media (max-width: 780px) { .req-list { grid-template-columns: 1fr; } }

.section-dark .steps li { border-top-color: rgba(255,255,255,.18); }
.section-dark .steps li:first-child { border-top-color: var(--signal); }
.section-dark .steps p { color: var(--on-navy); }

/* A dark app screen needs dark device chrome behind the status bar and
   home indicator, or white bands frame the content. */
.phone-screen.is-dark { background: var(--navy); }

/* ---- footer: ink, white type, the sky button ---- */
.fx-footer { background: var(--ink); color: var(--on-navy); padding: clamp(48px, 6vw, 72px) 0 0; }
.fx-footer a { color: var(--on-navy); text-decoration: none; }
.fx-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fx-footer :focus-visible { outline-color: var(--signal); }
/* who we are on the left, how to reach us on the right; the rule under it sits on the content edge */
.fx-footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px 48px; flex-wrap: wrap; border-top: 0; border-bottom: 0; padding: 0 24px 36px; margin-bottom: 36px; background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)) center bottom / calc(100% - 48px) 1px no-repeat; }
.fx-footer-brand { max-width: 46ch; }
.fx-footer-brand .brand { margin-right: 0; }
.fx-footer-brand .brand:hover { text-decoration: none; }
.fx-footer .brand-mark { filter: brightness(0) invert(1); }   /* the ocean mark, rendered white */
.fx-footer .brand-logo { height: 64px; }
.fx-footer-brand .brand + .fx-footer-blurb { margin-top: 20px; }
.fx-footer .brand-text, .fx-footer .brand-thin { color: #fff; }
.fx-footer-line { display: block; margin: 20px 0 10px; font: italic 800 clamp(1.8rem, 3vw, 2.6rem)/.95 var(--font); font-stretch: 82%; letter-spacing: -.015em; text-transform: none; color: var(--signal); }
.fx-footer-blurb { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--on-navy); max-width: 44ch; }
.fx-footer-contact { display: grid; gap: 0; justify-items: start; font-size: .93rem; }
.fx-footer a.fx-footer-phone { color: #fff; font: 800 1.6rem/1 var(--font); font-stretch: 85%; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; }
.fx-footer-contact span { color: var(--on-navy-2); }
.fx-footer a.fx-footer-cta { margin-top: 10px; min-height: 48px; background: var(--signal); color: var(--ink); border-color: var(--signal); text-decoration: none; }
.fx-footer a.fx-footer-cta:hover { background: #fff; border-color: #fff; color: var(--ink); text-decoration: none; }
/* link columns: a label on a rule, hairline rows */
.fx-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-bottom: 36px; }
.fx-label { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.35); font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-2); font-style: normal; }
.fx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: .93rem; }
.fx-footer ul li { border-bottom: 1px solid rgba(255,255,255,.12); }
.fx-footer ul a { display: block; padding: 10px 0; }
/* legal line, its rule on the content edge */
.fx-footer-base { display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap; border-top: 0; background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) center top / calc(100% - 48px) 1px no-repeat; padding: 18px 24px 28px; font-size: .85rem; color: var(--on-navy-2); }
.fx-footer-base p { margin: 0; }
.fx-footer-legal { display: flex; gap: 18px; }
.fx-footer .fx-footer-legal a { color: var(--on-navy-2); }
.fx-footer .fx-footer-legal a:hover { color: #fff; }
/* 44px tap targets for the footer phone, email and legal links */
.fx-footer-legal a, .fx-footer-contact a:not(.fx-footer-cta) { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 800px) {
  .fx-footer-top { flex-direction: column; gap: 24px; }
  .fx-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}
@media (max-width: 520px) {
  .fx-footer a.fx-footer-phone { font-size: 1.35rem; }
  .fx-footer-grid { gap: 24px 16px; }
  .fx-footer ul { font-size: .9rem; }
  .fx-footer-base { justify-content: flex-start; }
}

/* =============== phone-width fixes for the freight home =============== */

/* Hero: below 760px the scene sits above the text instead of behind it, so
   the headline never collides with a container in the artwork. */
@media (max-width: 760px) {
  .fx-hero-photo { display: block; min-height: 0; }
  .fx-hero-img { position: relative; display: block; height: 46vh; min-height: 260px; max-height: 380px; object-position: center 70%; }
  .fx-hero-photo::after {
    inset: auto 0 0 0; height: auto; top: 0;
    background: linear-gradient(0deg, var(--navy) 0%, var(--navy) 52%, rgba(42,10,30,.2) 68%, rgba(42,10,30,0) 100%);
  }
  .fx-hero-photo-inner { margin-top: -90px; padding-top: 0; padding-bottom: 40px; }
  .fx-h1 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .fx-hero-photo .fx-hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Transit table: three columns fit a phone; the sailing frequency does not. */
@media (max-width: 560px) {
  .fx-transit th, .fx-transit td { padding: 10px 12px; }
  .fx-transit th:nth-child(4), .fx-transit td:nth-child(4) { display: none; }
  .fx-transit td:first-child { white-space: normal; }
  .fx-transit table { font-size: .86rem; }
}

/* Statement band: shorter measure and lighter weight read better on phones. */
@media (max-width: 560px) {
  .fx-statement-text { font-size: 1.25rem; font-weight: 600; }
  .fx-band .fx-facts div { grid-template-columns: 82px 1fr; }
}

/* =====================================================================
   Cinematic home: three pinned full-screen scenes rendered in WebGL,
   then the essentials. Text is kept to a line or two per scene.
   ===================================================================== */

.cine-body { background: #fff; }

.cine-book {
  background: var(--white); border-radius: 0; padding: 22px 22px 18px;
  box-shadow: none;
  display: grid; gap: 14px; position: relative; z-index: 2;
}
.cine-book-title { font: 700 1.1rem/1.2 var(--font); letter-spacing: 0; margin: 0; color: var(--ink); }

.cine-book select { background: var(--bg-alt); border-color: transparent; }
.cine-book .btn-block { margin-top: 4px; }
.cine-book-note { margin: 4px 0 0; font-size: .8rem; color: var(--muted); text-align: center; }
.cine-book-note a { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .cine-book { padding: 18px 16px 14px; }
}

/* section titles take the HEADLINE voice */
.cine-sec-title { font: 800 clamp(2.2rem, 3.9vw, 3.3rem)/.98 var(--font); font-stretch: 82%; font-style: normal; letter-spacing: -.025em; text-transform: none; text-wrap: balance; margin: 0 0 28px; color: var(--ink); }
.svc-sec-dark .cine-sec-title, .section-dark .cine-sec-title { color: #fff; }

/* phones: the hero stack is taller than the old one-liner, so anchor it below
   the fixed header instead of centring it */
@media (max-width: 900px) {
  .cine-text.cine-text-hero { top: 0; transform: none; padding-top: 96px; }
}

.cine-book-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cine-book-login { font-size: .84rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.cine-book-login:hover { color: var(--ink); text-decoration: underline; }

/* segmented mode switch */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; padding: 4px; border: 0; background: var(--bg-alt); border-radius: 0; }
.seg-opt { position: relative; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt span {
  display: block; text-align: center; padding: 10px 4px; font-size: .88rem; font-weight: 600;
  color: var(--muted); border-radius: 0; transition: background .15s ease, color .15s ease;
}
.seg-opt input:checked + span { background: var(--white); color: var(--ink); box-shadow: none; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--ocean); outline-offset: 1px; }

/* labelled fields: focus is an ink bar along the bottom and an ocean label, never a flip to a dark fill */
.fld { position: relative; display: grid; gap: 2px; min-height: 64px; padding: 10px 14px 12px; background: #fff; border: 2px solid var(--ink); border-radius: 0; box-shadow: none; transition: none; cursor: text; }
.fld-label { font: 600 .66rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fld input, .fld select, .fld textarea { padding: 0; border: 0; background: transparent; font-size: 1.15rem; font-weight: 700; line-height: 1.35; color: var(--ink); border-radius: 0; box-shadow: none; width: 100%; }
.fld input::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; box-shadow: none; border: 0; }
.fld:focus-within { background: #fff; box-shadow: inset 0 -4px 0 var(--ink); }
.fld:focus-within .fld-label { color: var(--ocean); }
.fld:focus-within input, .fld:focus-within select, .fld:focus-within textarea { color: var(--ink); caret-color: var(--ocean); background: transparent; }
.fld-select { cursor: pointer; }
.fld-select select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; }
.fld-chev { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--ink); pointer-events: none; }
.fld:has([aria-invalid="true"]) { background: var(--signal); }
.fld:has([aria-invalid="true"]) .fld-label, .fld:has([aria-invalid="true"]) input { color: var(--ink); }

/* pickup / drop-off */
.route { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.route-fields { display: grid; gap: 8px; }

/* button with arrow */
.cine-book-go { gap: 16px; justify-content: space-between; min-height: 56px; padding: 0 20px; border-radius: 0; font: 700 .9rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.cine-book-go svg { width: 18px; height: 18px; transition: none; }
.cine-book-go:hover { background: var(--ocean-deep); border-color: var(--ocean-deep); color: #fff; }

@media (max-width: 900px) {
  .seg-opt span { font-size: .82rem; padding: 9px 2px; }
  .cine-book { padding: 18px 16px 14px; }
}

/* =============== lane board =============== */

.lanes { background: #fff; padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--hair); }

.lanes-sub { margin: 0; color: var(--muted); font-size: 1.02rem; max-width: 52ch; }
.lanes-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-alt); border-radius: 0; }
.lanes-tab {
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); background: transparent;
  border: 0; border-radius: 0; padding: 9px 16px; cursor: pointer; transition: background .15s, color .15s;
}
.lanes-tab.is-on { background: #fff; color: var(--ink); box-shadow: none; }
.lanes-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.lane-cols {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .9fr) minmax(0, 2fr) minmax(0, 1fr) 118px; gap: 24px; align-items: end;
  margin: 0 -12px 4px; padding: 24px 12px 10px; background: var(--bg-alt); border-radius: 0;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.lane-cols-tl {
  position: relative; display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; padding-bottom: 10px;
  background:
    linear-gradient(90deg, var(--line-2), var(--line-2)) 0 100% / 1px 7px no-repeat,
    linear-gradient(90deg, var(--line-2), var(--line-2)) 33.333% 100% / 1px 7px no-repeat,
    linear-gradient(90deg, var(--line-2), var(--line-2)) 66.666% 100% / 1px 7px no-repeat,
    linear-gradient(90deg, var(--line-2), var(--line-2)) 100% 100% / 1px 7px no-repeat,
    linear-gradient(0deg, var(--line-2), var(--line-2)) 0 100% / 100% 1px no-repeat;
}
.lane-cols-tl i { font-style: normal; transform: translateX(-50%); }
.lane-cols-tl i:first-child { transform: none; }
.lane-cols-tl i:last-child { transform: none; white-space: nowrap; }
.lane-cols-tl::before { content: "Transit, port to port"; position: absolute; left: 0; top: -1.6em; font-size: .66rem; letter-spacing: .1em; color: var(--line-2); }
.lanemap { margin-bottom: 18px; }
.lane-list { list-style: none; margin: 0; padding: 0; }
.lane {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .9fr) minmax(0, 2fr) minmax(0, 1fr) 118px;
  gap: 24px; align-items: center; padding: 20px 12px; margin: 0 -12px; border-bottom: 1px solid var(--hair);
  border-radius: 0; transition: background .18s;
}
.lane:hover { background: var(--bg-alt); }
.lane[hidden] { display: none; }
.lane-route { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lane-port { display: grid; gap: 2px; min-width: 0; }
.lane-port b { font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-port small { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.lane-arrow { color: var(--red); font-size: 1.1rem; transition: transform .18s; }
.lane:hover .lane-arrow { transform: translateX(3px); }
.lane-mode { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--body); white-space: nowrap; }
.lane-mode svg { width: 30px; height: 30px; padding: 6px; border-radius: 0; background: var(--bg-alt); color: var(--ink); flex: none; box-sizing: border-box; }
.lane:hover .lane-mode svg { background: #fff; }
/* shared 0 to 30 day timeline */
.lane-tl {
  position: relative; height: 38px; min-width: 0;
  background:
    linear-gradient(90deg, var(--line-2), var(--line-2)) 0 0 / 1px 100% no-repeat,
    linear-gradient(90deg, var(--line-2), var(--line-2)) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, var(--line-2), var(--line-2)) 66.666% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, var(--line-2), var(--line-2)) 100% 0 / 1px 100% no-repeat,
    linear-gradient(0deg, var(--mist), var(--mist)) 0 50% / 100% 4px no-repeat;
}
.lane-tl-range {
  position: absolute; top: 50%; height: 12px; transform: translateY(-50%); border-radius: 0; background: var(--ink);
  min-width: 12px; box-shadow: none; transform-origin: left center;
}
.lane-tl-range b {
  position: absolute; left: 0; bottom: 15px; white-space: nowrap;
  font-size: .92rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.lane-tl-range b i { font-style: normal; font-weight: 500; font-size: .74rem; color: var(--muted); margin-left: 4px; }
.lane[data-kind="air"] .lane-tl-range { background: var(--red); }
.lane[data-kind="domestic"] .lane-tl-range { background: var(--muted); }
.lane-dep { display: grid; gap: 2px; min-width: 0; }
.lane-dep b { font-size: .92rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.lane-dep small { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.lane-dep small[hidden] { display: none; }
/* live movement on a lane, from AIS */
.lane-live { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: -8px; font-size: .8rem; color: var(--body); min-width: 0; }
.lane-live[hidden] { display: none; }
.lane-live > span { min-width: 0; }
.lane-live i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: live-pulse 1.8s ease-out infinite; }
.lane-live b { font-weight: 700; color: var(--ink); }
.lanes-live { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; font-size: .9rem; color: var(--body); }
.lanes-live[hidden] { display: none; }
.lanes-live i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: live-pulse 1.8s ease-out infinite; }
.lanes-live b { font-weight: 700; color: var(--ink); }

.lanes-tab i { font-style: normal; font-weight: 600; color: var(--muted); margin-left: 2px; font-variant-numeric: tabular-nums; }
.lanes-tab.is-on i { color: var(--muted); }
.lane-go { font-size: .92rem; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; padding: 11px 14px; border: 1.5px solid var(--ink); border-radius: 0; text-align: center; transition: background .15s, color .15s, border-color .15s; }
.lane-go:hover, .lane:hover .lane-go { background: var(--ink); color: #fff; }
.lane-go span { display: inline-block; transition: transform .15s; }
.lane-go:hover span { transform: translateX(3px); }
.lanes-foot { margin: 22px 0 0; color: var(--muted); font-size: .95rem; }
.lanes-foot a { color: var(--ink); font-weight: 600; }

@media (max-width: 960px) {
  .lane-cols { display: none; }
  .lane { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "route go" "mode dep" "tl tl"; row-gap: 12px; column-gap: 16px; margin: 0; padding: 18px 0; border-radius: 0; }
  .lane:hover { background: transparent; }
  .lane-route { grid-area: route; } .lane-mode { grid-area: mode; } .lane-tl { grid-area: tl; } .lane-dep { grid-area: dep; justify-self: end; text-align: right; } .lane-go { grid-area: go; align-self: start; }
  .lane-tl { height: 40px; margin-top: 4px; }
  .lane:hover .lane-go { background: transparent; color: var(--ink); }
}
@media (max-width: 600px) {
  .lane-port b { font-size: .98rem; white-space: normal; }
  .lane-go { padding: 9px 12px; font-size: .86rem; }
  .lanes-tabs { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .lanes-tab { padding: 9px 4px; text-align: center; font-size: .84rem; }

  .lanes-tab i { display: none; }
}

.qf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.qf-foot { display: grid; gap: 18px; padding: 6px 4px 0; }
.qf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--body); cursor: pointer; }
.qf-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.qf-consent input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 0; }
.qf-submit { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.qf-submit .btn { padding: 16px 26px; }
.qf-note { margin: 0; font-size: .92rem; color: var(--muted); }
.qf-note a { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .qf-grid { grid-template-columns: 1fr; } }

/* =============== photography over the scenes =============== */
.cine-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .8s ease;
  transform: scale(calc(1.06 + var(--p, 0) * .08)) translateY(calc(var(--p, 0) * -4%));
  will-change: transform;
}
.has-photo .cine-photo { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .cine-photo { transform: none; transition: none; } }

/* ---- ground: full-bleed photographs (the home block makes this one a cyanotype) ---- */
.ground { display: grid; grid-template-columns: 1fr 1fr; background: var(--ocean-deep); }
.ground-cell { position: relative; margin: 0; min-height: clamp(360px, 48vw, 640px); overflow: hidden; background: var(--ocean-deep); }
.ground-cell .cine-photo { position: absolute; opacity: 0; transform: none; transition: opacity .8s ease, transform 6s ease; }
.ground-cell.has-photo .cine-photo { opacity: 1; }
.ground-cell:hover .cine-photo { transform: scale(1.04); }
.ground-cell figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 4vw, 48px);
  background: #fff; color: var(--ink); display: grid; gap: 6px;
}
.ground-cell figcaption span { font-size: .95rem; font-weight: 600; color: var(--ocean); }
.ground-cell figcaption b { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 700; font-stretch: 72%; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; }
.ground-cell.no-photo { background: var(--ocean-deep); }
@media (max-width: 760px) { .ground { grid-template-columns: 1fr; } .ground-cell { min-height: 64vw; } }

/* =============== hero: booking + live water (the home block below lays it out) =============== */
.hero2 { background: var(--ocean); color: #fff; padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.hero2 h1 { color: #fff; }
.hero2-sub { color: var(--on-ocean); }
.hero2 .hero-book { box-shadow: none; }
.hero2-right { min-width: 0; }

/* =============== live AIS: a readout, a light chart in its neatline, a key strip, a side panel ===============
   Global, so /sea-freight (on navy) reads the same as the home hero (on ocean). */
.sea { display: block; min-width: 0; }
.sea-bar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; padding: 0 0 12px; margin-bottom: 16px; border-bottom: 2px solid currentColor; }
.sea-live { order: 1; display: inline-flex; align-items: center; gap: 8px; font: 600 .7rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.sea-live i { width: 10px; height: 10px; background: var(--signal); animation: live-blink 1.6s steps(1) infinite; }
@keyframes live-blink { 50% { opacity: .25; } }
.sea-stamp { order: 2; margin-left: auto; font-size: .8rem; color: var(--on-navy-2); opacity: 1; }
.sea-stats { order: 3; flex: 1 0 100%; font: 700 1.05rem/1.2 var(--font); }
.sea-stats b { font-weight: 800; font-stretch: 80%; font-size: 2.2rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; margin-right: 8px; }
.sea-mix { display: block; margin-top: 4px; font: 400 .95rem/1.4 var(--font); color: var(--on-navy); opacity: 1; }
.sea-mix em { font-style: normal; font-weight: 800; color: #fff; }

/* the chart: Esri Light Gray in a graduated neatline of ink and white 32px blocks, 5px deep
   between 1px ink lines. Only here and on the lane map. Foam shows while tiles load or fail. */
.sea-map-wrap { position: relative; overflow: hidden; border: 1px solid var(--ink); border-radius: 0; padding: 5px; box-shadow: none; color: var(--ink);
  background: var(--scale-x) left top / 100% 5px no-repeat, var(--scale-x) left bottom / 100% 5px no-repeat, var(--scale-y) left top / 5px 100% no-repeat, var(--scale-y) right top / 5px 100% no-repeat, var(--foam); }
.sea-map { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; outline: 1px solid var(--ink); background: var(--foam); }
/* on the navy band (/sea-freight) the outer keyline is white, as on the home board's lane map */
.svc-sec-dark .sea-map-wrap { border-color: #fff; }
.sea-ring { fill: none; stroke: rgba(26,16,32,.28); stroke-width: 1; stroke-dasharray: 2 6; }
.sea-port circle:nth-child(1) { fill: var(--ink); }
.sea-port circle:nth-child(2) { fill: none; stroke: rgba(26,16,32,.45); stroke-width: 2; }
/* chart units, not screen pixels: the coast view is about 730 units across, so 18 reads at about 11px in the hero and 8px on a phone */
.sea-port text { fill: var(--ink); font: 700 18px/1 var(--font); font-stretch: 85%; letter-spacing: 0; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.sea-attrib { position: absolute; right: 11px; bottom: 11px; margin: 0; padding: 2px 6px; background: rgba(255,255,255,.85); font-size: .66rem; line-height: 1.3; color: var(--attrib); }
.sea-attrib a { color: var(--attrib); }

/* key strip: hangs off the bottom of the neatline */
.sea-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 12px 14px; list-style: none; background: #fff; border: 1px solid var(--ink); border-top: 0; font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: 1; }
.sea-legend li { display: flex; align-items: center; gap: 6px; }
.sea-legend li::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--haze); }
.sea-legend li[data-k="in"]::before { background: var(--ocean); }
.sea-legend li[data-k="cargo"]::before { background: var(--ink); }
.sea-legend li[data-k="tanker"]::before { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (max-width: 480px) { .sea-legend { display: grid; grid-template-columns: 1fr 1fr; } }   /* never 'Other' alone on a line */

/* ships: inbound ocean, cargo ink, tanker hollow, other haze. A white keyline erodes a 4px glyph on the
   light chart, so each glyph is outlined in its own colour and scaled up (CSS only; main.js untouched) */
.sea-ship { cursor: pointer; }
.sea-ship path, .sea-ship circle { stroke-width: 2; stroke-linejoin: round; transition: fill .2s; }
.sea-ship.k-in path, .sea-ship.k-in circle { fill: var(--ocean); stroke: var(--ocean); }
.sea-ship.k-cargo path, .sea-ship.k-cargo circle { fill: var(--ink); stroke: var(--ink); }
.sea-ship.k-tanker path, .sea-ship.k-tanker circle { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.sea-ship.k-other path, .sea-ship.k-other circle { fill: var(--haze); stroke: var(--haze); }
/* after the k-* rules on purpose: '.sea-ship.k-in circle' (0,2,1) used to outrank '.sea-ship .sea-hit'
   (0,2,0) and paint every 16px hit circle, so ships rendered as blobs */
.sea-ship circle.sea-hit { fill: transparent; stroke: none; }
.sea-ship circle.sea-pin-ring { fill: none; stroke: var(--ocean); stroke-width: 2.5; vector-effect: non-scaling-stroke; }   /* the ship picked from the list */
/* the glyph grows about its own centre; the hit circle and the course vector keep their size */
.sea-ship > path { transform: scale(1.6); transform-box: fill-box; transform-origin: center; }
.sea-ship > circle:not(.sea-hit) { transform: scale(2.2); transform-box: fill-box; transform-origin: center; }
.sea-ship.is-stale { opacity: .45; }
/* hover and pin: re-declared after the outlines so a pinned ship still stands out */
.sea-ship:hover > path, .sea-ship:hover > circle:first-child, .sea-ship.is-pin > path, .sea-ship.is-pin > circle:first-child { stroke: var(--ink); stroke-width: 4; }
.sea-ship.k-cargo:hover > path, .sea-ship.k-cargo:hover > circle:first-child, .sea-ship.k-cargo.is-pin > path, .sea-ship.k-cargo.is-pin > circle:first-child { stroke: var(--ocean); }
.sea-vec { stroke: rgba(26,16,32,.25); stroke-linecap: round; }
.sea-tip { position: absolute; z-index: 3; pointer-events: none; max-width: 250px; background: var(--ink); border: 0; border-radius: 0; padding: 10px 12px; font-size: .78rem; line-height: 1.4; color: #fff; }
.sea-tip[hidden] { display: none; }
.sea-tip b { display: block; font: 700 .82rem/1.1 var(--font); font-stretch: 78%; letter-spacing: .02em; text-transform: uppercase; }
.sea-tip em { display: block; margin-top: 2px; font: 600 .68rem/1.2 var(--font); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.sea-tip span { display: block; margin-top: 4px; color: var(--on-navy); }
.sea-back { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 0; background: var(--ink); color: #fff; font: 700 .7rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.sea-back:hover { background: var(--ocean); }
.sea-back:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
.sea-back[hidden] { display: none; }
.sea-map-wrap.is-zoomed .sea-map { animation: sea-in .35s ease-out; }
@keyframes sea-in { from { opacity: .4; } to { opacity: 1; } }

/* side panel: nearest ships over a rule, then the three ports with their coordinates */
.sea-side { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 28px; margin-top: 20px; }
.sea-h { margin: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.5); font: 600 .68rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-2); opacity: 1; }
.sea-list { list-style: none; margin: 0; padding: 0; }
.sea-list:empty { display: none; }
/* no feed: hide the 'Nearest inbound' heading with its empty list, so it never sits over the port rows */
.sea-side > div:has(> .sea-list:empty) { display: none; }
.sea-list li { border-bottom: 1px solid rgba(255,255,255,.28); min-width: 0; }
.sea-list button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; width: 100%; min-height: 44px; padding: 9px 0; cursor: pointer; }
.sea-list button:hover b { text-decoration: underline 1px; text-underline-offset: 4px; }
.sea-list li.is-on b { text-decoration: underline 2px var(--signal); text-underline-offset: 4px; }
.sea-list button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sea-list b { font: 700 1rem/1.05 var(--font); font-stretch: 78%; letter-spacing: .01em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sea-list span { font-size: .82rem; color: var(--on-navy); font-variant-numeric: tabular-nums lining-nums; opacity: 1; }
.sea-ports { list-style: none; margin: 0; padding: 0; border-top: 1px solid #fff; }
.sea-ports li { border-bottom: 1px solid rgba(255,255,255,.28); }
.sea-ports button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name count" "coord count"; column-gap: 12px; row-gap: 3px; align-items: center; width: 100%; min-height: 56px; padding: 10px 0; cursor: pointer; color: inherit; }
.sea-ports b { grid-area: name; font: 700 1.05rem/1.05 var(--font); font-stretch: 78%; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.sea-coord { grid-area: coord; font: 600 .68rem/1.2 var(--font); letter-spacing: .04em; font-variant-numeric: tabular-nums lining-nums; color: var(--on-navy-2); }
.sea-ports span { grid-area: count; align-self: center; font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--on-navy); opacity: 1; }
.sea-ports em { font-style: normal; font-weight: 800; color: #fff; }
.sea-ports button:hover b { text-decoration: underline 1px; text-underline-offset: 4px; }
.sea-ports li.is-on b, .sea-ports li.is-on button:hover b { color: #fff; text-decoration: underline 2px var(--signal); text-underline-offset: 4px; }
.sea-ports button:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
@media (max-width: 760px) {
  .sea-side { grid-template-columns: 1fr; gap: 16px; }
  .sea-list li:last-child { border-bottom: 0; }   /* no double rule over the ports' white top rule */
}
@media (prefers-reduced-motion: reduce) { .sea-live i { animation: none; } }

/* =============== item picker in the quote form =============== */
.pick { display: grid; gap: 14px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.tile {
  font: inherit; display: grid; justify-items: center; gap: 8px; padding: 16px 8px 12px; cursor: pointer;
  background: var(--bg-alt); border: 1.5px solid transparent; border-radius: 0; color: var(--ink); transition: background .15s, border-color .15s, transform .15s;
}
.tile svg { width: 32px; height: 32px; color: var(--body); }
.tile span { font-size: .84rem; font-weight: 600; text-align: center; line-height: 1.2; }
.tile:hover { background: var(--foam); transform: translateY(-1px); }
.tile.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tile.is-on svg { color: #fff; }
.tile.is-on::after { content: "\2713"; position: absolute; }
.tile { position: relative; }
.tile.is-on::after { top: 8px; right: 10px; font-size: .8rem; font-weight: 700; color: var(--red); background: #fff; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "name qty size remove" "custom custom custom custom";
  align-items: center; gap: 10px 16px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 0; background: #fff;
}
.item-name { grid-area: name; font-weight: 700; }
.item-qty { grid-area: qty; display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 0; overflow: hidden; }
.qty-btn { font: inherit; font-size: 1.1rem; width: 36px; height: 36px; background: transparent; border: 0; cursor: pointer; color: var(--ink); }
.qty-btn:hover { background: var(--bg-alt); }
.qty-val { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.item-size { grid-area: size; display: inline-flex; gap: 4px; background: var(--bg-alt); border-radius: 0; padding: 3px; }
.size-btn { font: inherit; display: grid; justify-items: center; gap: 0; min-width: 44px; padding: 4px 8px; background: transparent; border: 0; border-radius: 0; cursor: pointer; color: var(--muted); font-weight: 700; font-size: .9rem; line-height: 1.1; }
.size-btn small { font-size: .66rem; font-weight: 600; letter-spacing: .02em; }
.size-btn.is-on { background: #fff; color: var(--ink); box-shadow: none; }
.item-custom { grid-area: custom; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.item-custom[hidden] { display: none; }
.item-custom input { width: 100%; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 0; font: inherit; font-size: .9rem; }
.item-remove { grid-area: remove; font: inherit; font-size: 1.3rem; line-height: 1; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.item-remove:hover { background: var(--bg-alt); color: var(--ink); }
.items-total { margin: 0; font-size: .95rem; color: var(--body); display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.items-total[hidden] { display: none; }
.items-total b { color: var(--ink); }
.items-total span { color: var(--muted); font-size: .84rem; }
@media (max-width: 600px) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tile { padding: 12px 6px 10px; } .tile svg { width: 26px; height: 26px; } .tile span { font-size: .76rem; }
  .item { grid-template-columns: 1fr auto; grid-template-areas: "name remove" "qty size" "custom custom"; }
  .item-size { justify-self: end; }
  .item-custom { grid-template-columns: repeat(2, 1fr); }
}

/* =============== services: cards + service pages =============== */
.svc-home { background: #fff; padding: clamp(56px, 8vw, 104px) 0; }
.svc-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.svc-home-head .cine-sec-title { margin: 0; }
.svc-home-head p { margin: 0; color: var(--muted); font-size: 1.02rem; }
/* the numbered services index (rows, not tiles) is defined once in the home block below and used on every page */
.svc-grid { display: block; }

.svc-body { background: #fff; }

.svc-sec { padding: clamp(56px, 8vw, 104px) 0; }
.svc-sec-alt { background: #fff; }
/* two white sections in a row (plain and -alt are both white): the second keeps its rule line but drops its top padding, so the gap is not doubled */
.svc-sec:not(.svc-sec-dark) + .svc-sec:not(.svc-sec-dark) { padding-top: 0; }
.svc-sec > .wrap { border-top: 0; padding-top: 30px; background: linear-gradient(var(--ink), var(--ink)) center top / calc(100% - 48px) 2px no-repeat; }
.svc-sec-dark > .wrap { background-image: linear-gradient(#fff, #fff); }
.svc-sec .cine-sec-title { margin: 0 0 24px; }
.svc-inc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.svc-inc li { display: grid; gap: 6px; padding: 22px; border: 1.5px solid var(--line); border-radius: 0; }
.svc-inc b { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.svc-inc span { color: var(--body); line-height: 1.5; font-size: .96rem; }
.svc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.svc-steps li { display: grid; gap: 8px; align-content: start; padding: 24px; background: #fff; border-radius: 0; border: 1.5px solid var(--line); }
.svc-step-n { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .9rem; margin-bottom: 6px; }
.svc-steps b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.svc-steps li > span:last-child { color: var(--body); line-height: 1.5; font-size: .96rem; }
.svc-faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.svc-faq details:last-child { border-bottom: 1px solid var(--line); }
.svc-faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after { content: "+"; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--muted); }
.svc-faq details[open] summary::after { content: "\2013"; }
.svc-faq p { margin: 0 0 18px; color: var(--body); line-height: 1.6; max-width: 62ch; }
@media (max-width: 900px) {

  .svc-inc, .svc-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .svc-facts, .svc-inc, .svc-steps { grid-template-columns: 1fr; } }

/* =============== /book wizard =============== */
/* Shared with the /drive form: the question line and the segmented cells, as they were. */
.site-q { margin: 6px 0 0; font-weight: 700; font-size: .98rem; }
.site-q small { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; margin-top: 2px; }
.site-opts { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--line); border-radius: 0; overflow: hidden; }
.site-opt { display: flex; align-items: center; gap: 10px; padding: 14px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; font-size: .95rem; margin: -1px 0 0 -1px; }
.site-opt input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--line-2); border-radius: 50%; margin: 0; flex: none; display: grid; place-items: center; }
.site-opt input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s; }
.site-opt input:checked { background: var(--ink); border-color: var(--ink); } .site-opt input:checked::after { transform: scale(1); }
.site-opt:has(input:checked) { background: var(--bg-alt); font-weight: 700; }
.site-opts-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .site-opts { grid-template-columns: 1fr 1fr; } }

/* The booking page on the Blue Board, scoped to body.book-body so no other page moves.
   White and ruled, not boxed: each part opens on a 2px ink rule on the content edge and its rows
   are mist hairlines. Choices are segmented cells with line-3 edges (3:1 on white), the checked
   cell an ocean block with white text. Square corners, no shadows, no lifts, no icons. */
body.book-body { background: #fff; }
body.book-body .book { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(56px, 8vw, 96px); }

/* step bar: four columns under a 2px ink rule; the figure, then the step name as a LABEL; the
   current step is ink with a 3px ocean underline sitting on the mist bottom rule */
body.book-body .bk-bar { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 clamp(28px, 4vw, 44px); padding: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--mist); }
body.book-body .bk-bar li { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0 0 -1px; padding: 14px 12px 11px 0; border-bottom: 3px solid transparent; color: var(--muted); font: 600 .68rem/1.2 var(--font); font-stretch: 100%; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
body.book-body .bk-bar b { font: 700 1.05rem/1 var(--font); font-stretch: 80%; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
body.book-body .bk-bar li.is-done { color: var(--ink); }
body.book-body .bk-bar li.is-on { color: var(--ink); border-bottom-color: var(--ocean); }

body.book-body .bk-step { display: none; }
body.book-body .bk-step.is-on { display: block; }
body.book-body .bk-head { margin: 0 0 clamp(24px, 3vw, 32px); text-align: left; }
body.book-body .bk-head h1, body.book-body .bk-head h2 { margin: 0 0 10px; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; font-stretch: 82%; letter-spacing: -.025em; line-height: .98; text-transform: none; }
body.book-body .bk-head p { margin: 0; max-width: 56ch; color: var(--body); }

/* openers: the kind of move, each address, each branch of step 2, the date block and the details */
body.book-body .site, body.book-body .branch, body.book-body .when, body.book-body .qf-step { margin: 0; padding: 20px 0 0; background: transparent; border: 0; border-top: 2px solid var(--ink); border-radius: 0; box-shadow: none; }
body.book-body .site { display: grid; gap: 20px; align-content: start; min-width: 0; }
body.book-body .bk-svc { margin: 0 0 clamp(36px, 4vw, 48px); }
body.book-body .site-label { margin: 0; font: 700 1.4rem/1.05 var(--font); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
/* pickup | drop-off, a mist hairline down the middle of the gutter */
body.book-body .sites { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; background: linear-gradient(var(--mist), var(--mist)) 50% 0 / 1px 100% no-repeat; }

/* the address: a 56px box with a muted edge (6.18:1), as on the home form */
body.book-body .site-addr { display: block; position: relative; }
body.book-body .site-addr input { display: block; width: 100%; height: 56px; margin: 0; padding: 0 14px; background: #fff; border: 1px solid var(--muted); border-radius: 0; box-shadow: none; font: 700 1.1rem/1.3 var(--font); font-stretch: 100%; letter-spacing: 0; color: var(--ink); }
body.book-body .site-addr input::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
body.book-body .site-addr input:hover { border-color: var(--ink); }
body.book-body .site-addr input:focus { outline: 3px solid var(--ocean); outline-offset: 2px; border-color: var(--ink); }
body.book-body .site-addr input[aria-invalid="true"] { background: var(--signal); border-color: var(--ink); }
body.book-body .site-addr .sug { left: 0; }
body.book-body .site-map { position: relative; aspect-ratio: 19 / 9; overflow: hidden; background: var(--foam); border-radius: 0; }
body.book-body .site-map-svg { display: block; width: 100%; height: 100%; }
body.book-body .site-map-note { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 16px; text-align: center; font-size: .9rem; color: var(--muted); }
/* a long address is cut with an ellipsis inside the map, never pushed past it */
body.book-body .site-map-found { position: absolute; left: 0; bottom: 0; max-width: 100%; padding: 6px 10px; background: #fff; border-radius: 0; font: 600 .8rem/1.3 var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* questions: a fieldset per group, the legend in ink over its cells */
body.book-body .site-group { min-width: 0; margin: 0; padding: 0; border: 0; }
body.book-body .site-q { display: block; margin: 0; padding: 0; font: 700 1rem/1.3 var(--font); font-stretch: 100%; color: var(--ink); }
body.book-body legend.site-q { float: left; width: 100%; margin: 0 0 10px; }
body.book-body .site-q small { display: block; margin-top: 2px; font-weight: 400; font-size: .9rem; color: var(--muted); }

/* segmented cells: line-3 edges, the native radio stretched over the cell and hidden, 48px tall */
body.book-body .site-opts, body.book-body .chips { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line-3); border-left: 1px solid var(--line-3); border-radius: 0; overflow: visible; }
body.book-body .site-opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a short last row is filled by its last cell, so the edges close square */
body.book-body .site-opts:not(.site-opts-2) .site-opt:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
body.book-body .site-opts:not(.site-opts-2) .site-opt:last-child:nth-child(3n+2) { grid-column: span 2; }
body.book-body .site-opt, body.book-body .chip { position: relative; display: flex; margin: 0; padding: 0; background: transparent; border: 0; border-right: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); cursor: pointer; font-weight: 400; }
body.book-body .site-opt input, body.book-body .chip input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; opacity: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }
body.book-body .site-opt input::after { content: none; }
body.book-body .site-opt span, body.book-body .chip span { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 10px; background: #fff; border: 0; border-radius: 0; font: 700 .78rem/1.15 var(--font); font-stretch: 85%; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--ink); }
body.book-body .site-opt:hover input:not(:checked) + span, body.book-body .chip:hover input:not(:checked) + span { background: var(--foam); }
body.book-body .site-opt:has(input:checked) { background: transparent; font-weight: 400; }
body.book-body .site-opt input:checked + span, body.book-body .chip input:checked + span { background: var(--ocean); color: #fff; }
body.book-body .site-opt input:focus-visible + span, body.book-body .chip input:focus-visible + span { outline: 3px solid var(--ocean); outline-offset: -6px; }
body.book-body .site-opt input:focus-visible:checked + span, body.book-body .chip input:focus-visible:checked + span { outline-color: #fff; }
@media (forced-colors: active) {
  body.book-body .site-opt span, body.book-body .chip span { outline: 1px solid CanvasText; outline-offset: -1px; }
  body.book-body .site-opt input:checked + span, body.book-body .chip input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

body.book-body .site-notes { display: grid; gap: 10px; margin: 0; }
body.book-body .site-notes > span { font-weight: 700; color: var(--ink); }
body.book-body .site-notes textarea { display: block; width: 100%; min-height: 96px; margin: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--muted); border-radius: 0; font: 400 1rem/1.5 var(--font); color: var(--ink); resize: vertical; }
body.book-body .site-notes textarea::placeholder { color: var(--muted); opacity: 1; }
body.book-body .site-notes textarea:focus { outline: 3px solid var(--ocean); outline-offset: 2px; border-color: var(--ink); }

/* Back and Continue: Back in the BUTTON voice at the left, Continue at the right */
body.book-body .bk-nav { display: flex; align-items: center; gap: 24px; margin: 32px 0 0; }
body.book-body .bk-nav .btn { margin-left: auto; }
body.book-body .link { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font: 700 .78rem/1 var(--font); font-stretch: 100%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
body.book-body .link:hover { color: var(--ocean); text-decoration-thickness: 2px; }
body.book-body .link:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }

/* step 2: two numbered hairline rows, a foam wash on hover */
body.book-body .choose { display: block; max-width: none; margin: 0; border-top: 2px solid var(--ink); }
body.book-body .choose[hidden] { display: none; }
body.book-body .choice { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 20px; row-gap: 6px; align-items: center; justify-items: start; width: 100%; margin: 0; padding: 24px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--mist); border-radius: 0; box-shadow: none; transform: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: background-color .12s; }
body.book-body .choice:hover { background: var(--foam); transform: none; }
body.book-body .choice:focus-visible { outline: 3px solid var(--ocean); outline-offset: -3px; }
body.book-body .choice-n { grid-row: 1 / 3; align-self: start; padding-top: .2em; font: 700 1.05rem/1.05 var(--font); font-stretch: 80%; font-variant-numeric: tabular-nums lining-nums; color: var(--ocean); }
body.book-body .choice b { grid-column: 2; font: 700 1.6rem/1.05 var(--font); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
body.book-body .choice > span:not(.choice-n) { grid-column: 2; max-width: 56ch; color: var(--body); }
body.book-body .choice em { grid-column: 3; grid-row: 1 / 3; display: inline-flex; align-items: center; min-height: 48px; margin: 0; padding: 0 20px; background: #fff; border: 2px solid var(--ocean); color: var(--ocean); font: 700 .82rem/1 var(--font); font-stretch: 100%; font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
/* outlined, so Continue stays the one solid button; it fills when its row is hovered or focused */
body.book-body .choice:hover em, body.book-body .choice:focus-visible em { background: var(--ocean); border-color: var(--ocean); color: #fff; }

body.book-body .branch[hidden] { display: none; }
body.book-body .branch-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin: 0 0 16px; }
body.book-body .branch-head b { font: 700 1.4rem/1.05 var(--font); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }

/* list your items: search, then a hairline row per room and per item */
body.book-body .room-search { display: flex; align-items: center; min-height: 48px; margin: 0 0 16px; padding: 0 14px; background: #fff; border: 1px solid var(--muted); border-radius: 0; }
body.book-body .room-search:focus-within { outline: 3px solid var(--ocean); outline-offset: 2px; border-color: var(--ink); }
body.book-body .room-search input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0; background: transparent; border: 0; font: 400 1rem/1.4 var(--font); color: var(--ink); }
body.book-body .room-search input::placeholder { color: var(--muted); opacity: 1; }
body.book-body .room-search input:focus { outline: none; }
body.book-body .rooms { border-top: 1px solid var(--mist); }
body.book-body .room { border-bottom: 1px solid var(--mist); }
body.book-body .room[hidden] { display: none; }
body.book-body .room summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 0; cursor: pointer; }
body.book-body .room summary::-webkit-details-marker { display: none; }
body.book-body .room summary:focus-visible { outline: 3px solid var(--ocean); outline-offset: -3px; }
body.book-body .room summary b { flex: 1 1 auto; min-width: 0; font: 700 1.15rem/1.05 var(--font); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
body.book-body .room-count { min-width: 30px; padding: 4px 8px; text-align: center; font: 700 .95rem/1.1 var(--font); font-stretch: 80%; font-variant-numeric: tabular-nums lining-nums; color: var(--muted); background: transparent; }
body.book-body .room.has-items .room-count { background: var(--ocean); color: #fff; }
body.book-body .room summary::after { content: "Open"; min-width: 3.4em; margin: 0; text-align: right; font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transform: none; transition: none; }
body.book-body .room[open] summary::after { content: "Close"; transform: none; }
body.book-body .room-items { list-style: none; margin: 0; padding: 0 0 12px; }
body.book-body .ri { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 6px 0; border-top: 1px solid var(--mist); }
body.book-body .ri[hidden] { display: none; }
body.book-body .ri-name { min-width: 0; color: var(--body); }
body.book-body .ri.is-on .ri-name { font-weight: 700; color: var(--ink); }
body.book-body .ri-m3 { font-size: .84rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
body.book-body .ri-qty { display: inline-flex; align-items: center; gap: 0; }
body.book-body .ri-qty .qty-btn { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line-3); border-radius: 0; font: 700 1.2rem/1 var(--font); color: var(--ink); cursor: pointer; }
body.book-body .ri-qty .qty-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
body.book-body .ri-qty .qty-btn:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
body.book-body .ri-qty output { min-width: 40px; text-align: center; font: 700 1.05rem/1 var(--font); font-stretch: 80%; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
body.book-body .ri-custom-name, body.book-body .ri-custom-m3 { height: 44px; min-width: 0; margin: 0; padding: 0 10px; background: #fff; border: 1px solid var(--muted); border-radius: 0; font: 400 1rem/1.3 var(--font); color: var(--ink); }
body.book-body .ri-custom-m3 { width: 72px; text-align: right; }
body.book-body .ri-custom-name:focus, body.book-body .ri-custom-m3:focus { outline: 3px solid var(--ocean); outline-offset: 2px; border-color: var(--ink); }
body.book-body .room-add { margin: 4px 0 16px; }
body.book-body .items-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 24px 0 0; padding: 14px 0 0; border-top: 2px solid var(--ink); }
body.book-body .items-total span { font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
body.book-body .items-total b { font: 800 2rem/1 var(--font); font-stretch: 80%; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
body.book-body .items-note { max-width: 60ch; margin: 12px 0 0; padding: 0; background: transparent; border-radius: 0; font-size: .92rem; color: var(--body); }

/* the starter dialog: a white sheet that opens on a 2px ink rule, hairline rows */
body.book-body .starter { width: min(520px, calc(100% - 32px)); padding: 24px; background: #fff; border: 0; border-top: 2px solid var(--ink); border-radius: 0; box-shadow: none; color: var(--ink); }
body.book-body .starter::backdrop { background: rgba(26,16,32, .5); }
body.book-body .starter h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 5vw, 2rem); }
body.book-body .starter p { margin: 0 0 14px; color: var(--body); }
body.book-body .starter .starter-where { font-weight: 700; color: var(--ink); }
body.book-body .starter-rows { display: grid; gap: 0; margin: 0 0 14px; border-top: 1px solid var(--mist); }
body.book-body .starter-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--mist); border-radius: 0; font-weight: 700; color: var(--ink); }
body.book-body .starter-tip { font-size: .9rem; }
body.book-body .starter-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

/* I know my volume */
body.book-body .vol { display: grid; gap: 16px; max-width: 640px; }
body.book-body .vol-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 700; color: var(--ink); }
body.book-body .vol-in { display: inline-flex; align-items: stretch; background: #fff; border: 1px solid var(--muted); border-radius: 0; overflow: visible; }
body.book-body .vol-in:focus-within { outline: 3px solid var(--ocean); outline-offset: 2px; border-color: var(--ink); }
body.book-body .vol-in input { width: 120px; height: 54px; padding: 0 12px; background: transparent; border: 0; font: 800 1.5rem/1 var(--font); font-stretch: 80%; font-variant-numeric: tabular-nums lining-nums; text-align: right; color: var(--ink); }
body.book-body .vol-in input:focus { outline: none; }
body.book-body .vol-in b { display: grid; place-items: center; padding: 0 14px; background: transparent; border-left: 1px solid var(--mist); font: 600 .9rem/1 var(--font); color: var(--ink); }
body.book-body .vol-row small { display: block; width: 100%; font-weight: 400; color: var(--muted); }
body.book-body .vol-reserve { margin: 0; color: var(--body); }
body.book-body .vol-reserve b { font: 800 1.25rem/1 var(--font); font-stretch: 80%; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
body.book-body .vol details { padding: 0; border-top: 1px solid var(--mist); }
body.book-body .vol details:last-child { border-bottom: 1px solid var(--mist); }
body.book-body .vol summary { display: flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--ink); cursor: pointer; }
body.book-body .vol summary:focus-visible { outline: 3px solid var(--ocean); outline-offset: -3px; }
body.book-body .vol details p { margin: 0 0 12px; color: var(--body); line-height: 1.5; }

/* step 3: calendar with square days, flexibility and assembly cells, photos */
body.book-body .when { display: grid; gap: 16px; max-width: 760px; }
body.book-body .cal { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: start; gap: 12px; }
body.book-body .cal-nav { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line-3); border-radius: 0; font: 400 1.5rem/1 var(--font); color: var(--ink); cursor: pointer; }
body.book-body .cal-nav:hover:not(:disabled) { background: var(--foam); }
body.book-body .cal-nav:disabled { opacity: .4; cursor: default; }
body.book-body .cal-nav:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
body.book-body .cal-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; min-width: 0; }
body.book-body .cal-m h3 { display: flex; align-items: center; min-height: 44px; margin: 0 0 6px; padding: 0; border-bottom: 1px solid var(--mist); text-align: left; font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
body.book-body .cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
body.book-body .cal-d { margin: 0 0 4px; padding: 6px 0; border-bottom: 1px solid var(--mist); font: 600 .68rem/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
body.book-body .cal-day { aspect-ratio: 1; width: 100%; min-width: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; font: 700 .95rem/1 var(--font); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); cursor: pointer; }
body.book-body .cal-day:hover:not(:disabled) { background: var(--foam); }
body.book-body .cal-day:disabled { font-weight: 400; color: var(--muted); text-decoration: line-through; cursor: default; }
body.book-body .cal-day.is-today { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.book-body .cal-day.is-sel { background: var(--ink); color: var(--signal); }
body.book-body .cal-day:focus-visible { outline: 3px solid var(--ocean); outline-offset: -3px; }
body.book-body .cal-day.is-sel:focus-visible { outline-color: #fff; }
body.book-body .cal-today { margin: 0; text-align: left; font-size: .92rem; color: var(--muted); }
body.book-body .cal-today a { font-weight: 700; color: var(--ink); white-space: nowrap; }
body.book-body .drop { position: relative; display: grid; justify-items: start; gap: 4px; padding: 20px; background: #fff; border: 1px solid var(--line-3); border-radius: 0; text-align: left; color: var(--body); cursor: pointer; }
body.book-body .drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
body.book-body .drop b { font: 700 .82rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ocean); }
body.book-body .drop:hover { background: var(--foam); }
body.book-body .drop:focus-within { outline: 3px solid var(--ocean); outline-offset: 2px; }
body.book-body .drop.is-over { background: var(--foam); border-color: var(--ocean); }
body.book-body .drop-list { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
body.book-body .drop-list li { display: flex; align-items: center; gap: 12px; padding: 2px 0; border: 0; border-bottom: 1px solid var(--mist); border-radius: 0; }
body.book-body .drop-list svg { display: none; }
body.book-body .drop-list span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; color: var(--ink); }
body.book-body .drop-list .item-remove { width: 44px; height: 44px; border-radius: 0; color: var(--ink); }
body.book-body .drop-list .item-remove:hover { background: var(--foam); }
body.book-body .drop-list .item-remove:focus-visible { outline: 3px solid var(--ocean); outline-offset: -3px; }

/* step 4: the job summary (main.js writes it), then the details */
body.book-body .bk-summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin: 0 0 32px; padding: 0; background: transparent; border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--mist); border-radius: 0; overflow: visible; }
body.book-body .job-route { position: relative; display: block; min-width: 0; padding: 20px 28px 20px 0; border-right: 1px solid var(--mist); }
body.book-body .job-rail { display: none; }
body.book-body .job-stops { display: grid; gap: 18px; min-width: 0; padding-right: 64px; }
body.book-body .job-stop { display: grid; gap: 4px; min-width: 0; }
body.book-body .job-stop span, body.book-body .job-m span { font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* addresses wrap inside their column, however long */
body.book-body .job-stop b, body.book-body .job-m b { font: 700 1.05rem/1.3 var(--font); letter-spacing: 0; color: var(--ink); overflow-wrap: anywhere; }
body.book-body .job-stop small, body.book-body .job-m small { font-size: .88rem; color: var(--muted); }
body.book-body .job-edit { position: absolute; top: 10px; right: 28px; }
body.book-body .job-meta { display: grid; min-width: 0; }
body.book-body .job-m { position: relative; display: grid; gap: 4px; min-width: 0; padding: 16px 64px 16px 28px; border-bottom: 1px solid var(--mist); }
body.book-body .job-m:last-child { border-bottom: 0; }
body.book-body .job-m .job-edit { top: 6px; right: 0; }
body.book-body .qf-step { padding-top: 24px; }
body.book-body .promise { display: block; margin: 20px 0 0; padding: 14px 0 0; background: transparent; border-top: 1px solid var(--mist); border-radius: 0; }
body.book-body .promise b { display: block; margin: 0 0 4px; font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
body.book-body .promise span { font-size: .92rem; line-height: 1.5; color: var(--body); }
body.book-body .qf-foot { padding: 24px 0 0; }
body.book-body .qf-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
body.book-body .bk-complex { margin: 48px 0 0; padding: 16px 0 0; border-top: 1px solid var(--mist); text-align: left; color: var(--body); }
body.book-body .bk-complex a { font-weight: 700; color: var(--ink); white-space: nowrap; }

@media (max-width: 900px) {
  body.book-body .sites { grid-template-columns: minmax(0, 1fr); row-gap: 48px; background: none; }
}
@media (max-width: 760px) {
  body.book-body .bk-summary { grid-template-columns: minmax(0, 1fr); }
  body.book-body .job-route { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--mist); }
  body.book-body .job-edit { right: 0; }
  body.book-body .job-m { padding-left: 0; }
}
@media (max-width: 600px) {
  /* step bar: the current step takes the room it needs; the others show their figure only */
  body.book-body .bk-bar { display: flex; }
  body.book-body .bk-bar li { flex: 0 0 52px; padding-right: 0; }
  body.book-body .bk-bar li.is-on { flex: 1 1 auto; }
  body.book-body .bk-bar li:not(.is-on) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* two cells a row; an odd last cell spans both */
  body.book-body .site-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.book-body .site-opts .site-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.book-body .choice { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 20px 8px; }
  body.book-body .choice b { font-size: 1.3rem; }
  body.book-body .choice em { grid-column: 2; grid-row: 3; margin-top: 10px; }
  body.book-body .ri { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  body.book-body .ri:not(.ri-custom) .ri-m3 { display: none; }
  body.book-body .ri-custom .ri-custom-name { grid-column: 1 / -1; width: 100%; }
  /* one month across the full width, its name centred between the two arrows */
  body.book-body #cal-prev, body.book-body #cal-next { position: relative; z-index: 1; grid-row: 1; }
  body.book-body #cal-prev { grid-column: 1; }
  body.book-body #cal-next { grid-column: 3; }
  body.book-body .cal-months { grid-column: 1 / -1; grid-row: 1; grid-template-columns: minmax(0, 1fr); }
  body.book-body .cal-m h3 { justify-content: center; }
  body.book-body .cal-m:last-child { display: none; }
}

/* =============== nav: services dropdown =============== */
.nav-dd { position: relative; }
.nav-dd-btn svg { width: 10px; height: 10px; transition: transform .15s; }
.nav-dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* a white panel under an ocean rule: hairline rows, foam on hover, no icons */
.primary-nav .nav-menu { position: absolute; top: 100%; left: 0; min-width: 320px; margin: 0; padding: 0; list-style: none; background: #fff; color: var(--ink); border: 1px solid var(--mist); border-top: 2px solid var(--ocean); border-radius: 0; box-shadow: none; display: none; z-index: 60; }
.primary-nav .nav-dd.is-open .nav-menu { display: grid; gap: 0; }
.primary-nav .nav-dd.is-open .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.primary-nav .nav-menu-wide { min-width: 640px; grid-template-columns: 1fr 1fr; }
.primary-nav .nav-menu-wide li:nth-child(odd) a { border-right: 1px solid var(--mist); }
.primary-nav .nav-dd:nth-child(3) .nav-menu-wide { left: auto; right: 0; }
.nav-menu li a { display: grid; gap: 3px; padding: 14px 18px; border-radius: 0; border-bottom: 1px solid var(--mist); color: var(--ink); text-transform: none; letter-spacing: 0; white-space: normal; font: 400 .95rem/1.3 var(--font); }
.nav-menu li:last-child a { border-bottom: 0; }
.nav-menu li a:hover, .nav-menu li a:focus-visible { background: var(--foam); color: var(--ink); }
.nav-menu li a:focus-visible { outline: 3px solid var(--ocean); outline-offset: -3px; }
.nav-menu li a:hover b, .nav-menu li a:focus-visible b { color: var(--ocean); }
.nav-menu svg { display: none; }
.nav-menu b { display: block; font: 700 .95rem/1.05 var(--font); font-stretch: 75%; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.nav-menu small { display: block; font: 400 .8rem/1.3 var(--font); color: var(--muted); }
@media (max-width: 1024px) {
  .primary-nav .nav-menu { position: static; border: 0; background: transparent; padding: 0 0 8px 16px; min-width: 0; }
  .primary-nav .nav-menu-wide { grid-template-columns: 1fr; }
  .primary-nav .nav-menu-wide li:nth-child(odd) a { border-right: 0; }
  .nav-menu li a { min-height: 44px; align-content: center; padding: 10px 0; border: 0; }
  .nav-menu li a:hover, .nav-menu li a:focus-visible { background: transparent; color: var(--ocean); }
  .nav-menu b { font: 400 .95rem/1.3 var(--font); text-transform: none; font-style: normal; letter-spacing: 0; }
  .nav-menu small { display: none; }
  .nav-dd-btn svg { display: none; }
}

/* =============== service pages: split hero, action bar, modes, facts =============== */
.crumbs { background: var(--foam); border-bottom: 1px solid var(--mist); }
.crumbs ol { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--muted); }
.crumbs a { color: var(--ink); text-decoration: none; }
.crumbs a:hover { color: var(--ocean); text-decoration: underline; text-underline-offset: 4px; }
.crumbs li[aria-current] { color: var(--ink); }
.sh { background: #fff; padding: clamp(28px, 4vw, 48px) 0 0; }
.sh-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sh h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); letter-spacing: -.025em; line-height: .94; margin: 0 0 18px; overflow-wrap: anywhere; }
/* the action bar below pulls up 40px over the hero; keep the copy's CTA clear of it */
.sh-copy { min-width: 0; padding-bottom: 56px; }
.sh-lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--body); max-width: 40ch; margin: 0 0 26px; line-height: 1.5; font-weight: 500; }
.sh-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sh-call { color: var(--ink); font-weight: 700; text-decoration: none; }
.sh-call:hover { color: var(--red); }
.sh-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden; background: var(--ocean-deep); }
.sh-photo .cine-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: none; transition: opacity .6s; }
.sh-photo.has-photo .cine-photo { opacity: 1; }
.sh-bar { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 12px; align-items: stretch; margin-top: -40px; position: relative; z-index: 2; padding: 16px; background: var(--navy); border-radius: 0; box-shadow: none; }
.sh-act { display: grid; justify-items: center; gap: 8px; padding: 16px 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 0; color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; white-space: nowrap; transition: background .15s, border-color .15s; }
.sh-act svg { width: 22px; height: 22px; }
.sh-act:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }   /* beats the global a:hover ocean-deep, which vanishes on navy */
.sh-track { display: flex; align-items: center; gap: 8px; align-self: center; justify-self: end; width: min(100%, 420px); background: #fff; border-radius: 0; padding: 6px 6px 6px 18px; }
.sh-track input { flex: 1; min-width: 0; font: inherit; border: 0; background: transparent; }
.sh-track input:focus { outline: none; }
.sh-track:focus-within { outline: 3px solid var(--signal); outline-offset: 2px; }   /* the box sits on the navy bar */
.sh-track .btn { border-radius: 0; padding: 10px 22px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mode { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px; border: 1.5px solid var(--line); border-radius: 0; background: #fff; }
.mode-tag { justify-self: start; font-size: .7rem; font-weight: 800; letter-spacing: .14em; color: var(--red); background: var(--red-tint); border-radius: 0; padding: 6px 10px; }
.mode h3 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.mode p { margin: 0; color: var(--body); line-height: 1.5; }
.mode ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.mode li { position: relative; padding-left: 22px; color: var(--ink); font-size: .95rem; }
.mode li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.mode-go { margin-top: 10px; justify-self: start; font-weight: 700; color: var(--ink); text-decoration: none; }
.mode-go i { font-style: normal; display: inline-block; transition: transform .15s; }
.mode-go:hover i { transform: translateX(4px); }
.svc-sec-dark { background: var(--navy); color: #fff; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.facts li { display: grid; gap: 6px; padding: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 0; background: var(--ink-2); }
.facts svg { width: 28px; height: 28px; color: var(--signal); margin-bottom: 4px; }
.facts b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.facts span { color: var(--on-navy-2); font-size: .92rem; line-height: 1.45; }
.svc-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.svc-aside { background: var(--ocean); color: #fff; border-radius: 0; padding: 28px; display: grid; gap: 12px; position: sticky; top: 96px; }
.svc-aside-line { margin: 0; font-size: 1.6rem; font-weight: 800; font-stretch: 82%; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
.svc-aside p { margin: 0; color: rgba(255,255,255,.88); }
.svc-aside .svc-aside-line { color: #fff; }
.svc-aside .btn-primary { background: #fff; color: var(--ocean); border-color: #fff; justify-self: start; margin-top: 6px; }
.svc-aside .btn-primary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.svc-aside .btn:focus-visible { outline-color: #fff; }
.svc-body .svc-steps li { background: var(--bg-alt); border-color: transparent; }
.svc-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-sec-alt .svc-steps li { background: #fff; }
@media (max-width: 1000px) { .svc-steps-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .svc-steps-4 { grid-template-columns: 1fr; } }

/* =============== port conditions and the embedded live map =============== */
.svc-sec-dark .cine-sec-title { color: #fff; }
.pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.pc-head .cine-sec-title { margin: 0; }
.pc-stamp { font-size: .82rem; color: var(--on-navy-2); }
/* Port board: three hairline columns, a status light, four big tabular numbers. No cards, no pills. */
.pc-board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid rgba(255,255,255,.14); }
.pc-board li { padding: 22px 28px 26px 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 18px; }
.pc-board li + li { border-left: 1px solid rgba(255,255,255,.12); padding-left: 28px; }
.pc-board b { font: 700 1.6rem/1.05 var(--font); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.pc-status { font: 600 .7rem/1.2 var(--font); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-2); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pc-status::before { content: ""; width: 10px; height: 10px; background: rgba(255,255,255,.3); }
.pc-status.is-clear { color: var(--on-navy); } .pc-status.is-clear::before { background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.pc-status.is-some { color: var(--signal); } .pc-status.is-some::before { background: var(--signal); }
.pc-status.is-busy { color: #fff; } .pc-status.is-busy::before { background: #fff; }
.pc-board dl { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pc-board dt { font: 600 .66rem/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-2); margin-bottom: 6px; white-space: nowrap; }
.pc-board dd { margin: 0; font-size: 1.9rem; font-weight: 800; font-stretch: 80%; letter-spacing: -.02em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums lining-nums; }
.pc-board dd.is-hot { color: var(--signal); }
.pc-note { margin: 22px 0 0; font-size: .92rem; color: var(--on-navy-2); max-width: 60ch; }
.pc-note a { color: #fff; }
@media (max-width: 900px) {
  .pc-board { grid-template-columns: 1fr; border-top: 0; }
  .pc-board li { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.12); }
  .pc-board li + li { border-left: 0; padding-left: 0; }
  .pc-board dd { font-size: 1.6rem; }
}
.sea-embed { display: block; max-width: 760px; margin: 36px auto 0; color: #fff; }

/* =============== find a ship (app page) =============== */
.vs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.vs input { flex: 1 1 320px; font: inherit; font-size: 1.05rem; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); }
.vs input:focus { outline: none; border-color: var(--ink); box-shadow: none; }
.vs-count { font-size: .88rem; color: var(--muted); }
.vs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.vs-hit { display: grid; gap: 4px; padding: 16px 18px; background: #fff; border: 1.5px solid var(--line); border-left-width: 5px; border-radius: 0; }
.vs-hit.k-in { border-left-color: var(--ocean); } .vs-hit.k-cargo { border-left-color: var(--ink); } .vs-hit.k-tanker { border-left: 5px double var(--ink); } .vs-hit.k-other { border-left-color: var(--haze); }
.vs-hit b { font-size: 1.05rem; font-weight: 700; font-stretch: 78%; letter-spacing: .02em; color: var(--ink); }
.vs-hit em { font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.vs-hit span { color: var(--body); font-size: .92rem; line-height: 1.5; }
.vs-hit a { justify-self: start; font-size: .88rem; font-weight: 700; color: var(--ink); margin-top: 4px; }
.vs-none { padding: 16px 18px; background: #fff; border: 1.5px dashed var(--line); border-radius: 0; color: var(--body); font-size: .95rem; }

/* =============== sticky call to action on phones and tablets (the header folds at 1024px) =============== */
.sticky-cta { display: none; }
@media (max-width: 1024px) {
  .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 0; align-items: stretch; padding: 0 0 env(safe-area-inset-bottom); background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--mist); transform: translateY(110%); transition: transform .25s ease; }
  .sticky-cta.is-on { transform: none; }
  /* an ink block, not ocean: ocean would vanish over the ocean hero */
  .sticky-cta .btn { flex: 1; min-height: 56px; border: 0; border-radius: 0; background: var(--ink); color: #fff; font: 700 .82rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
  .sticky-cta .btn:hover { background: var(--ocean); color: #fff; }
  .sticky-cta .btn:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
  .sticky-cta-call { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 20px; border: 0; border-left: 1px solid var(--mist); border-radius: 0; color: var(--ink); font: 700 .82rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
  .sticky-cta-call:hover { color: var(--ocean); }
  .sticky-cta-call:focus-visible { outline: 3px solid var(--ocean); outline-offset: -4px; }
  .sticky-cta-call svg { width: 16px; height: 16px; }
  body.has-sticky { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }   /* 56px bar plus its 1px top rule */
  @media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }
}
/* =============== client portal (login) =============== */
.portal { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.portal-col { display: grid; gap: 20px; }
.portal .mode { gap: 14px; }
.portal .mode h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.025em; }
.portal .mode form { display: grid; gap: 14px; }
.portal .mode .field { gap: 6px; }
.portal .mode ul li b { color: var(--ink); }
.portal .mode .field input { font: inherit; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); }
.portal .mode .field input:not([type="checkbox"]):focus { outline: none; border-color: var(--ink); box-shadow: none; }
.portal .mode .field input[type="checkbox"]:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
.portal .mode .field input[aria-invalid="true"] { background: var(--signal); border-color: var(--ink); color: var(--ink); }
.portal .form-status:empty { display: none; }
.portal-track { display: flex; gap: 8px; }
.portal-track input { flex: 1; min-width: 0; font: inherit; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 0; }
.portal-track input:focus { outline: none; border-color: var(--ink); box-shadow: none; }
.portal-out { margin: 0; padding: 14px 16px; background: var(--bg-alt); border-radius: 0; color: var(--body); font-size: .95rem; line-height: 1.5; }
.portal-out[hidden] { display: none; }
.portal-out a { color: var(--ink); font-weight: 700; }
.portal-note { margin: 0; font-size: .88rem; color: var(--muted); }
@media (max-width: 900px) { .portal { grid-template-columns: 1fr; } }

/* Turnstile sits above the submit button */
.cf-turnstile { margin: 6px 0 2px; min-height: 0; }
.cf-turnstile:empty { display: none; }
@media (max-width: 900px) {
  .sh-inner { grid-template-columns: 1fr; }
  .sh-copy { padding-bottom: 0; }
  .sh-lead { max-width: 52ch; }
  .sh-copy > .sh-lead:last-child { margin-bottom: 32px; }   /* p:last-child would zero it and sit the lead on the next opener */
  .sh-photo { aspect-ratio: 16 / 9; max-height: 440px; }
  /* comfortable tap targets for inline links on touch screens */
  .crumbs ol { flex-wrap: wrap; row-gap: 2px; }
  .crumbs a, .sh-call, .mode-go { display: inline-block; padding: 8px 0; }   /* footer list links keep their 10px rows (45px) */
  .fx-footer-grid li { margin: 0; }
  .sh-bar { grid-template-columns: 1fr 1fr 1fr; margin-top: 20px; }
  .sh-track { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
  .modes, .svc-two { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .svc-aside { position: static; }
}
@media (max-width: 560px) { .sh-bar { grid-template-columns: 1fr; } .sh-act { grid-template-columns: auto 1fr; justify-items: start; text-align: left; padding: 12px 16px; } .facts { grid-template-columns: 1fr; } }

/* booking band (login, drive): foam, an ink opener on the content edge, the ocean button */
.cta-book { background: var(--foam); border-top: 0; padding: clamp(48px, 7vw, 88px) 0; }
.cta-book-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 0; padding-top: 30px; background: linear-gradient(var(--ink), var(--ink)) center top / calc(100% - 48px) 2px no-repeat; }
.cta-book .cine-sec-title { margin: 0 0 8px; color: var(--ink); }
.cta-book p { margin: 0; color: var(--body); max-width: 48ch; }
.cta-book .cine-book-go { width: auto; min-width: 260px; margin-top: 0; }

/* =============== lane map: Esri Light Gray in the same neatline as the AIS chart =============== */
.lanemap { position: relative; aspect-ratio: 21 / 9; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--ink); border-radius: 0; padding: 5px; box-shadow: none; color: var(--ink);
  background: var(--scale-x) left top / 100% 5px no-repeat, var(--scale-x) left bottom / 100% 5px no-repeat, var(--scale-y) left top / 5px 100% no-repeat, var(--scale-y) right top / 5px 100% no-repeat, var(--foam); }
.lanemap-svg { width: 100%; height: 100%; display: block; outline: 1px solid var(--ink); }
/* arcs are solid (dashed arcs are banned): sea ocean, air a lighter ocean, domestic muted */
.lm-line { fill: none; stroke: var(--ocean); stroke-width: 1.5; stroke-linecap: butt; stroke-dasharray: none; transition: opacity .2s, stroke-width .2s; }
.lm-glow { fill: none; stroke: transparent; stroke-width: 8; stroke-linecap: round; }   /* paints nothing; a wide hover target */
.lm-mover { fill: var(--ocean); stroke: #fff; stroke-width: .8; }
.lm-arc[data-kind="air"] .lm-line { stroke: var(--ocean); stroke-width: 1; stroke-dasharray: none; opacity: .75; }
.lm-arc[data-kind="air"] .lm-glow { stroke: transparent; }
.lm-arc[data-kind="air"] .lm-mover { fill: var(--ocean); }
.lm-arc[data-kind="domestic"] .lm-line { stroke: var(--muted); stroke-width: 1; }
.lm-arc[data-kind="domestic"] .lm-mover { fill: var(--muted); }
.lm-arc.is-hot .lm-line { stroke: var(--ink); stroke-width: 2.5; opacity: 1; }
.lm-arc.is-hot .lm-mover { fill: var(--ink); }
.has-hot .lm-arc:not(.is-hot) { opacity: .25; }
.lm-arc.is-off { opacity: .12; } .lm-arc.is-off .lm-mover { display: none; }
.lm-port circle { fill: #fff; stroke: var(--ink); stroke-width: 1.2; }
.lm-port.is-au circle { fill: var(--ocean); stroke: #fff; stroke-width: 1; }
.lm-port text { fill: var(--ink); font: 700 7px/1 var(--font); font-stretch: 80%; letter-spacing: .02em; text-transform: uppercase; paint-order: stroke; stroke: #fff; stroke-width: 2.5px; }
.lm-port.is-au text { font-weight: 800; }
/* 761 to 1100px the svg is scaled below 1:1, so 7px labels render near 5.6px; size only, so font-stretch holds.
   8.5px, not 9.5px: at 9.5px Shenzhen and Hong Kong touch at 768 and 900 */
@media (min-width: 761px) and (max-width: 1100px) { .lm-port text { font-size: 8.5px; } }
.lane.is-hot { background: var(--bg-alt); }
/* live ports: a sonar ring (its r and opacity are animated in the SVG; static under reduced motion) */
.lm-halo { fill: none; stroke: var(--ocean); stroke-width: 2.2; pointer-events: none; }
.lm-live-t { fill: var(--ocean); font: 700 5.6px/1 var(--font); font-stretch: 80%; letter-spacing: .03em; text-transform: uppercase; paint-order: stroke; stroke: #fff; stroke-width: 2px; }
/* on the home board the counts are read from #lanes-live in readable type; the rings alone say 'live' */
.home .lm-live-t { display: none; }
@media (max-width: 760px) { .lanemap { aspect-ratio: 1 / 1; } .lm-port:not(.is-au) text { display: none; } .lane-live { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .lane-live i, .lanes-live i { animation: none; } .sea-map-wrap.is-zoomed .sea-map { animation: none; } .lm-mover { display: none; } }

/* =====================================================================
   HOME PAGE: THE BLUE BOARD
   Scoped to body.home and appended last so it wins. Rhythm, top to bottom:
   white header, ocean hero, white services, foam plate, ocean-deep cyanotype,
   navy board, white ask, ink footer. Square corners, hairlines not boxes,
   no shadows (the two inset bars are highlights), no pills, no icons outside the quote form.
   ===================================================================== */

/* ---- hero: a head row (headline | sub), a rule, then the form beside the instrument panel ---- */
.home .hero2 { background: var(--ocean); color: #fff; padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.home .hero2-inner { display: block; }
.home .hero2-head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(32px, 5vw, 72px); align-items: end; padding-bottom: clamp(28px, 3.5vw, 44px); margin-bottom: clamp(28px, 3.5vw, 44px); border-bottom: 1px solid rgba(255,255,255,.4); }
.home .hero2-eyebrow { grid-column: 1 / -1; margin: 0 0 20px; font: 700 clamp(1.15rem, 1.6vw, 1.45rem)/1.25 var(--font); letter-spacing: 0; text-transform: none; color: #fff; }   /* the business in one line: removals in and out of Australia */
.home .hero2 h1 { margin: 0; max-width: none; font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: .94; color: #fff; }
.home .hero2-creds { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 28px 0 0; padding: 0; list-style: none; font: 700 .8rem/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.home .hero2-creds li { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 600px) { .home .hero2-creds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 24px; font-size: .72rem; letter-spacing: .06em; } }
.home .hero2-creds li::before { content: ""; flex: none; width: 12px; height: 7px; margin-top: -3px; border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(-45deg); }   /* a tick */
.home .hero2-sub { margin: 0; max-width: 32ch; font-size: 1.1rem; line-height: 1.5; color: var(--on-ocean); }
@media (min-width: 961px) {
  .home .hero2-inner { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); grid-template-areas: "head head" "form live"; column-gap: 56px; align-items: start; }
  .home .hero2-head { grid-area: head; }
  .home .hero2-left { grid-area: form; }
  .home .hero2-right { grid-area: live; }
}
@media (min-width: 961px) and (max-width: 1200px) { .home .hero2-inner { column-gap: 40px; } }
@media (max-width: 960px) {
  /* one rule only: the form's 2px white top rule separates the head from the form */
  .home .hero2-head { grid-template-columns: minmax(0, 1fr); border-bottom: 0; padding-bottom: 0; margin-bottom: 32px; }
  .home .hero2-sub { margin-top: 16px; }
  .home .hero2-right { margin-top: 48px; }
}
@media (max-width: 760px) {
  .home .hero2 { padding: 40px 0 48px; }
  .home .hero2 h1 { font-size: clamp(2.6rem, 13.5vw, 3.4rem); }   /* three lines at 390: "One price up / front, before / you book." */
  .home .hero2-sub { font-size: 1rem; }
}

/* the form is a board, not a card: a white-ruled strip on the ocean field, one white panel, an ink bar.
   Owner's format (D-20261004-4): head with an outlined 'Log in'; four modes, a line icon over each
   label; pickup and drop-off stacked on a route line with a swap; 'Ready' as a segmented grid; a
   full-width bar; a shield before the note. The icons are 24px-grid line icons in currentColor, here only. */
.home .cine-book, .home .hero2 .hero-book { display: block; margin: 0; padding: 16px 0 0; background: transparent; border: 0; border-top: 2px solid #fff; border-radius: 0; box-shadow: none; }
/* from 961px both columns hang from the one head rule: no second rule over the form */
@media (min-width: 961px) { .home .cine-book, .home .hero2 .hero-book { border-top: 0; padding-top: 0; } }
.home .mq-ico { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 3; }
/* one 1.75px line at every icon size (vector-effect does not inherit, so it targets the shapes) */
.home .mq-ico * { vector-effect: non-scaling-stroke; }
.home .cine-book-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 0; }
.home .cine-book-title { margin: 0; font: 700 1.4rem/1.15 var(--font); letter-spacing: 0; text-transform: none; color: #fff; }
.home .cine-book-login { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border: 2px solid #fff; font: 700 .78rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; }
.home .cine-book-login .mq-ico { width: 18px; height: 18px; }
.home .cine-book-login:hover { background: #fff; color: var(--ocean); text-decoration: none; }
.home .cine-book-login:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* service strip: four cells in one 2px white box, a line icon over each label; the checked one is a white block */
.home .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; background: transparent; border: 2px solid #fff; border-radius: 0; }
.home .seg-opt span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 68px; padding: 10px 4px 9px; border-left: 2px solid #fff; border-radius: 0; font: 700 .72rem/1.1 var(--font); font-stretch: 85%; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: #fff; box-shadow: none; transition: none; }
.home .seg-opt .mq-ico { width: 22px; height: 22px; }
/* the fourth mode reads "International": give it the room it needs so no label meets its cell edge */
.home .seg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
.home .seg-opt span { letter-spacing: .02em; }
.home .seg-opt:first-child span { border-left: 0; }
.home .seg-opt:hover input:not(:checked) + span { background: var(--ocean-deep); }
.home .seg-opt input:checked + span { background: #fff; color: var(--ocean); box-shadow: none; }
.home .seg-opt input:focus-visible + span { outline: 3px solid #fff; outline-offset: -6px; }
.home .seg-opt input:focus-visible:checked + span { outline-color: var(--ink); }
@media (max-width: 420px) { .home .seg-opt span { font-size: .7rem; font-stretch: 80%; letter-spacing: .02em; padding: 10px 2px 9px; } }

/* the white panel: route, then Ready; mist hairlines divide it; inputs are muted hairlines, swap and Ready line-3 (both 3:1 or more on white) */
.home .mq-panel { background: #fff; border-bottom: 1px solid var(--mist); }
.home .mq-label { display: block; padding: 0; font: 600 .66rem/14px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* route: pickup over drop-off on a route line (origin ring, dotted run, ocean pin); the swap sits on the divider.
   Metrics are fixed so the rail lands on the box centres and the swap clears both boxes: label 14, gap 6, box 48. */
.home .mq-route { position: relative; padding: 14px 16px 16px 48px; }
.home .mq-fld { display: grid; gap: 6px; cursor: text; }
.home .mq-from { padding-bottom: 28px; }
.home .mq-to { margin-right: -16px; padding: 8px 16px 0 0; border-top: 1px solid var(--mist); }
.home .cine-book .mq-fld input { display: block; width: 100%; height: 48px; margin: 0; padding: 0 14px; background: #fff; border: 1px solid var(--muted); border-radius: 0; box-shadow: none; font: 700 1.15rem/1.35 var(--font); color: var(--ink); }
.home .cine-book .mq-fld input::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
.home .cine-book .mq-fld input:hover { border-color: var(--ink); }
.home .cine-book .mq-fld input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 -4px 0 var(--ink); caret-color: var(--ocean); }
.home .mq-fld:focus-within .mq-label { color: var(--ocean); }
.home .cine-book .mq-fld input[aria-invalid="true"] { background: var(--signal); border-color: var(--ink); }
.home .mq-swap { position: absolute; top: 88px; right: 16px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line-3); border-radius: 0; color: var(--ink); cursor: pointer; }
.home .mq-swap:hover { background: var(--foam); border-color: var(--ink); }
.home .mq-swap:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
.home .mq-rail { position: absolute; top: 14px; bottom: 16px; left: 16px; width: 20px; pointer-events: none; }
.home .mq-rail::before { content: ""; position: absolute; top: 54px; bottom: 38px; left: 9px; border-left: 2px dotted var(--muted); }
.home .mq-dot { position: absolute; top: 38px; left: 4px; width: 12px; height: 12px; color: var(--ink); }
.home .mq-pin { position: absolute; top: 139px; left: 0; width: 20px; height: 20px; color: var(--ocean); }
.home .mq-pin * { vector-effect: non-scaling-stroke; } /* a true 2px, like the origin ring */

/* Ready: one segmented grid, hairlines between the cells; the checked cell is an ocean block */
.home .mq-when { min-width: 0; margin: 0; padding: 12px 16px 16px; border: 0; border-top: 1px solid var(--mist); }
.home .mq-when legend { float: left; width: 100%; margin: 0 0 8px; }
.home .mq-opts { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-3); border: 1px solid var(--line-3); }
.home .mq-opt { position: relative; display: block; cursor: pointer; }
.home .mq-opt input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.home .mq-opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 8px; background: #fff; font: 700 .72rem/1.15 var(--font); font-stretch: 85%; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--ink); }
.home .mq-opt:hover input:not(:checked) + span { background: var(--foam); }
.home .mq-opt input:checked + span { background: var(--ocean); color: #fff; }
.home .mq-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -6px; }
.home .mq-opt input:focus-visible:checked + span { outline-color: #fff; }
@media (min-width: 700px) and (max-width: 960px) { .home .mq-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* forced colours (Windows High Contrast) drop backgrounds: give every Ready cell an edge and paint the checked mode and Ready cells in system Highlight */
@media (forced-colors: active) {
  .home .mq-opt span { outline: 1px solid CanvasText; outline-offset: -1px; }
  .home .mq-opt input:checked + span, .home .seg-opt input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .home .mq-opt input:focus-visible + span { outline: 3px solid CanvasText; outline-offset: -6px; }
  .home .mq-opt input:focus-visible:checked + span, .home .seg-opt input:focus-visible:checked + span { outline-color: HighlightText; }
}

/* submit: a full-width ink bar under the panel, white on hover (the panel's mist hairline keeps them apart) */
.home .hero2 .cine-book-go { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 0; min-height: 56px; padding: 0 14px; background: var(--ink); color: #fff; border: 2px solid var(--ink); border-radius: 0; font: 700 .9rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.home .hero2 .cine-book-go svg { width: 20px; height: 20px; margin-right: -4px; transition: none; } /* the arrow's ink, not its 20px box, meets the panel's right edge */
.home .hero2 .cine-book-go:hover { background: #fff; color: var(--ink); border-color: #fff; }
.home .hero2 .cine-book-go:focus-visible { outline: 3px solid #fff; outline-offset: -7px; }
.home .hero2 .cine-book-go:hover:focus-visible { outline-color: var(--ink); }
.home .cine-book-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: .8rem; line-height: 1.4; color: var(--on-ocean); text-align: left; }
.home .cine-book-note .mq-ico { width: 16px; height: 16px; margin-top: 1px; }
/* a quiet pointer to same-day delivery under the form */
.home .cine-book-alt { margin: 10px 0 0 24px; font-size: .8rem; line-height: 1.4; color: var(--on-ocean); }
.home .cine-book-alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.home .cine-book-alt a:hover { text-decoration-thickness: 2px; }
.home .cine-book-alt a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* beside the form: how a move works, four numbered steps on the ocean field */
.home .hero-how { color: #fff; }
.home .hero-how-title { margin: 0 0 14px; font: 700 1.4rem/1.15 var(--font); letter-spacing: 0; text-transform: none; color: #fff; }
.home .hero-how-list { margin: 0; padding: 0; list-style: none; counter-reset: how; border-top: 2px solid #fff; }
.home .hero-how-list li { counter-increment: how; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.4); }
.home .hero-how-list li::before { content: counter(how, decimal-leading-zero); grid-row: 1 / span 2; font: 700 1.6rem/1 var(--font); color: #fff; }
.home .hero-how-list b { font: 700 1.05rem/1.25 var(--font); color: #fff; }
.home .hero-how-list span { font-size: .95rem; line-height: 1.5; color: var(--on-ocean); max-width: 56ch; }
.home .hero-how-call { margin: 18px 0 0; font-size: .95rem; line-height: 1.5; color: var(--on-ocean); }
.home .hero-how-call a { color: #fff; font-weight: 700; white-space: nowrap; }
.home .hero-how-call a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- the instrument panel: readout, chart, key strip, readout column ---- */
.home .hero2 .sea-bar { border-bottom: 2px solid #fff; padding-bottom: 12px; margin-bottom: 16px; }
.home .hero2 .sea-live { color: #fff; }
.home .hero2 .sea-stamp { font-size: .8rem; color: var(--on-ocean); }
.home .hero2 .sea-stats { color: #fff; }
.home .hero2 .sea-stats b { font-size: 2.6rem; }
.home .hero2 .sea-mix { color: var(--on-ocean); }
.home .hero2 .sea-mix em { color: #fff; }
.home .hero2 .sea-h { color: var(--on-ocean); border-bottom-color: rgba(255,255,255,.5); }
.home .hero2 .sea-list span, .home .hero2 .sea-ports span { color: var(--on-ocean); }
.home .hero2 .sea-coord { color: var(--on-ocean); }
.home .hero2 .sea-ports button:focus-visible { outline-color: #fff; }
/* from 961px the chart (at most 440px) and the readout column sit side by side, so the panel is
   never much taller than the form beside it; the port rows stack name, coordinates, count */
@media (min-width: 961px) {
  .home .hero2 .sea { display: grid; grid-template-columns: minmax(0, 440px) minmax(200px, 1fr); grid-template-areas: "bar bar" "map side" "key side"; column-gap: 24px; align-content: start; }
  .home .hero2 .sea-bar { grid-area: bar; }
  .home .hero2 .sea-live { min-height: 44px; }   /* same 44px row as 'Where is it going? / Log in', so the two heads share a centre line */
  .home .hero2 .sea-map-wrap { grid-area: map; }
  .home .hero2 .sea-legend { grid-area: key; align-self: start; }
  .home .hero2 .sea-side { grid-area: side; display: block; margin-top: 0; }
  .home .hero2 .sea-ports button { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "coord" "count"; }
  .home .hero2 .sea-ports span { align-self: start; }
}
@media (min-width: 961px) and (max-width: 1200px) { .home .hero2-inner { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
@media (max-width: 960px) { .home .hero2 .sea-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; margin-top: 20px; } }
@media (max-width: 760px) {
  .home .hero2 .sea-side { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* no feed: the ports take the whole readout */
.home .hero2 .sea-side:has(.sea-list:empty) { grid-template-columns: minmax(0, 1fr); }

/* no lone last words in the home paragraphs */
.home .hero2-sub, .home .svc-home-head p, .home .plate-text, .home .cta-book p { text-wrap: pretty; }
/* 961 to 1200px the key strip is a deliberate 2 x 2, not three items and an orphan */
@media (min-width: 961px) and (max-width: 1200px) { .home .hero2 .sea-legend { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 24px; } }

/* ---- services index (white) ---- */
.home .svc-home { background: #fff; padding: clamp(64px, 8vw, 104px) 0; }
.home .svc-home-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 32px; margin-bottom: 28px; }
.home .svc-home-head .cine-sec-title { margin: 0; color: var(--ink); }
.home .svc-home-head p { margin: 0; max-width: 36ch; font-size: 1.05rem; color: var(--muted); text-align: left; }
/* the numbered services index (rows, not tiles), used on every page */
.svc-cols, .svc { display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.6fr) 140px 96px; column-gap: 20px; align-items: center; }
.svc-cols { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--mist); padding: 12px 0 8px; font: 600 .66rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.svc-index { list-style: none; margin: 0; padding: 0; }
/* no side bleed: the hairlines sit on the content edge; the hover wash reaches the gutter by box-shadow */
.svc { position: static; min-height: 0; padding: 22px 0; margin: 0; background: transparent; border: 0; border-bottom: 1px solid var(--mist); border-radius: 0; color: var(--ink); text-decoration: none; box-shadow: none; transform: none; transition: background-color .12s, box-shadow .12s; }
.svc-n { font: 700 1.05rem/1 var(--font); font-stretch: 80%; font-variant-numeric: tabular-nums lining-nums; color: var(--ocean); }
.svc b { font: 700 1.6rem/1.05 var(--font); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); transition: color .12s; }
/* 761 to 1024px: WAREHOUSING at 1.6rem overruns its 1.1fr column into the description */
@media (min-width: 761px) and (max-width: 1024px) { .svc b { font-size: 1.3rem; } }
.svc span { max-width: none; }
.svc-desc { font-size: 1rem; line-height: 1.45; color: var(--body); }
.svc-run { font: 600 .68rem/1.2 var(--font); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.svc-go { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font: 700 .74rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ocean); }
.svc-arrow { position: relative; width: 28px; height: 1px; background: currentColor; flex: none; color: inherit; transition: width .15s; }
.svc-arrow::after { content: ""; position: absolute; right: 1px; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.svc:hover, .svc:focus-visible { background: var(--foam); box-shadow: -24px 0 0 var(--foam), 24px 0 0 var(--foam); color: var(--ink); }
.svc:hover b, .svc:focus-visible b { color: var(--ocean); }
.svc:hover .svc-arrow, .svc:focus-visible .svc-arrow { width: 44px; }
.svc:focus-visible { outline: 3px solid var(--ocean); outline-offset: -3px; }
@media (max-width: 760px) {
  .home .svc-home-head { grid-template-columns: minmax(0, 1fr); }
  .svc-cols { display: none; }
  .svc-index { border-top: 2px solid var(--ink); }
  .svc { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "n name go" "n covers covers" "n run run"; row-gap: 6px; padding: 18px 0; margin: 0; }
  .svc-n { grid-area: n; align-self: start; } .svc b { grid-area: name; font-size: 1.15rem; } .svc-desc { grid-area: covers; } .svc-run { grid-area: run; } .svc-go { grid-area: go; align-self: start; justify-self: end; }
  /* the compact rows on service pages (icon, name, covers, arrow) reflow the same way */
  .svc-grid-compact .svc { grid-template-areas: "n name go" "n covers covers"; }
  .svc-grid-compact .svc > svg { grid-area: n; align-self: start; width: 28px; }
  .svc-grid-compact .svc > span { grid-area: covers; }
  .svc-grid-compact .svc > i { grid-area: go; align-self: start; }
}

/* ---- tagline plate (foam): the line, and the landed-rate stack that adds up to one number ---- */
.home .plate { background: var(--foam); color: var(--ink); padding: clamp(64px, 8vw, 112px) 0; }
.home .plate-inner { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); align-items: start; }
.home .plate-inner::before { content: ""; display: block; grid-column: 1 / -1; height: 2px; background: var(--ink); margin-bottom: clamp(32px, 4vw, 48px); }
.home .plate-mark { display: block; width: auto; height: 152px; filter: none; }
.home .plate-line { grid-area: line; margin: 0 0 32px; max-width: none; font: italic 800 clamp(3rem, 7vw, 6.2rem)/.9 var(--font); font-stretch: 82%; letter-spacing: -.03em; text-transform: none; color: var(--ocean); }
.home .plate-logo { display: block; width: clamp(260px, 34vw, 440px); height: auto; }
.home .plate-text { grid-area: text; margin: 0; max-width: 44ch; font-size: 1rem; line-height: 1.55; color: var(--body); }
.home .plate-btn { grid-area: btn; justify-self: start; align-self: start; display: inline-flex; align-items: center; margin-top: 24px; min-height: 56px; padding: 0 24px; background: var(--ocean); color: #fff; border: 2px solid var(--ocean); border-radius: 0; font: 700 .82rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.home .plate-btn:hover { background: var(--ocean-deep); border-color: var(--ocean-deep); color: #fff; }
.home .plate-btn:focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; }
.home .plate-sum-wrap { grid-area: sum; align-self: center; }
.home .plate-sum-label { margin: 0 0 10px; font: 700 .72rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.home .plate-sum { margin: 0; border-top: 2px solid var(--ink); }
/* each line opens to say what it covers: native details/summary, no script */
.home .plate-sum details { border-bottom: 1px solid var(--mist); }
.home .plate-sum summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 0; cursor: pointer; list-style: none; font: 600 1.05rem/1.3 var(--font); color: var(--ink); }
.home .plate-sum summary::-webkit-details-marker { display: none; }
.home .plate-sum summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--ocean); border-bottom: 2px solid var(--ocean); transform: translateY(-3px) rotate(45deg); transition: transform .15s; }
.home .plate-sum details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.home .plate-sum summary:hover { color: var(--ocean); }
.home .plate-sum summary:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
.home .plate-sum details p { margin: 0 0 16px; max-width: 46ch; font-size: .98rem; line-height: 1.55; color: var(--body); }
.home .plate-sum-total { margin: 0; padding: 16px 18px; background: var(--ocean); color: #fff; font: 700 1rem/1.3 var(--font); letter-spacing: .02em; text-wrap: balance; }
@media (min-width: 961px) {
  .home .plate-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "line sum" "text sum" "btn sum"; grid-template-rows: auto auto 1fr; column-gap: clamp(28px, 4vw, 56px); }
}
@media (max-width: 960px) {
  .home .plate-inner { grid-template-columns: minmax(0, 1fr); }
  .home .plate { padding: 44px 0 52px; }
  .home .plate-inner::before { margin-bottom: 28px; }
  .home .plate-line { margin-bottom: 20px; }
  .home .plate-logo { width: min(100%, 260px); }
  .home .plate-sum-wrap { margin: 28px 0; }
  .home .plate-btn { display: flex; width: 100%; justify-content: center; margin-top: 0; }
}

/* ---- photo plate: a cyanotype. Shadows print ocean-deep, highlights print white. ---- */
.home .ground { display: block; background: var(--ocean-deep); }
.home .ground-cell { position: relative; isolation: isolate; margin: 0; min-height: clamp(320px, 38vw, 520px); background: var(--ocean-deep); overflow: hidden; }
.home .ground-cell .cine-photo { filter: grayscale(1) contrast(1.25) brightness(1.05); mix-blend-mode: screen; transform: none; transition: opacity .6s ease; }
.home .ground-cell.has-photo .cine-photo { opacity: 1; }
.home .ground-cell:hover .cine-photo { transform: none; }
.home .ground-cell.no-photo { background: var(--ocean-deep); }
/* the caption is a white slip aligned to the text column */
.home .ground-cell figcaption { position: absolute; left: max(24px, calc((100% - 1180px) / 2 + 24px)); right: auto; bottom: 0; z-index: 2; max-width: 620px; padding: 24px 28px 26px; background: #fff; color: var(--ink); display: grid; gap: 8px; }
.home .ground-cell figcaption span { font: 600 .95rem/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--ocean); }
.home .ground-cell figcaption b { font: 700 clamp(1.6rem, 2.8vw, 2.6rem)/1.02 var(--font); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.home .ground-link { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; font: 700 .74rem/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ocean); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.home .ground-link:hover { color: var(--ocean-deep); }
.home .ground-link:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
/* phones: the full 72vw cyanotype, then the caption below it (an overlaid caption hid the subject) */
@media (max-width: 760px) {
  .home .ground-cell { min-height: 0; }
  .home .ground-cell .cine-photo { position: relative; height: 72vw; }
  .home .ground-cell figcaption { position: relative; left: auto; right: auto; bottom: auto; max-width: none; padding: 20px 24px; }
}

/* ---- THE DEPARTURES BOARD: a navy station board ---- */
.home .lanes { background: var(--navy); color: var(--on-navy); border-top: 0; padding: clamp(64px, 8vw, 104px) 0; }
.home .lanes > .wrap::before { content: ""; display: block; height: 2px; background: #fff; margin-bottom: clamp(28px, 3.5vw, 40px); }
.home .board-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; margin: 0; padding: 0; border-top: 0; }
.home .board-eyebrow { margin: 0 0 12px; font: 600 1rem/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--on-navy-2); }
.home .lanes .cine-sec-title { margin: 0 0 12px; color: #fff; }
.home .lanes-sub { margin: 0; max-width: 52ch; font-size: 1rem; color: var(--on-navy); }
.home .lanes-live { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); font-size: .9rem; line-height: 1.4; color: var(--on-navy); }
.home .lanes-live[hidden] { display: none; }
.home .lanes-live i { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 0; background: var(--signal); animation: live-blink 1.6s steps(1) infinite; }
.home .lanes-live b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums lining-nums; }

/* the route plan, in its neatline (white keyline on the navy board) */
.home .lanemap { aspect-ratio: auto; margin: 28px 0 10px; border-color: #fff; }
.home .lanemap-svg { height: auto; aspect-ratio: 12 / 5; }
.home .lanemap-svg image { opacity: 1; }
.home .board-plan { margin: 0; text-align: right; font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-2); }
@media (max-width: 760px) { .home .lanemap { aspect-ratio: auto; } .home .lanemap-svg { aspect-ratio: 1 / 1; } }

/* filter control */
.home .lanes-tabs { display: flex; gap: 0; margin: 32px 0 0; padding: 0; background: transparent; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.home .lanes-tab { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 14px 20px 12px; margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; font: 700 .76rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--on-navy-2); transition: none; }
.home .lanes-tab i { display: inline; margin: 0; font: 700 1rem/1 var(--font); font-stretch: 80%; font-style: normal; font-variant-numeric: tabular-nums lining-nums; color: var(--on-navy-2); }
.home .lanes-tab:hover { color: #fff; }
.home .lanes-tab.is-on { color: #fff; background: transparent; box-shadow: inset 0 -3px 0 var(--signal); }
.home .lanes-tab.is-on i { color: var(--signal); }
.home .lanes-tab:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
@media (max-width: 600px) {
  .home .lanes-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .home .lanes-tab { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; font-size: .7rem; letter-spacing: .06em; }
  .home .lanes-tab i { display: block; font-size: 1.1rem; }
}

/* column grid and captions */
.home .lane-cols, .home .lane { display: grid; grid-template-columns: 44px minmax(0, 2.4fr) 96px minmax(0, 1.7fr) minmax(0, 1fr) 112px; column-gap: 20px; align-items: center; margin: 0; background: transparent; border-radius: 0; }
.home .lane-cols { padding: 14px 0 10px; border-bottom: 1px solid rgba(255,255,255,.4); font: 600 .66rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-2); }
.home .lane-cols-tl { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 6px; padding: 0; background: none; }
.home .lane-cols-tl::before { content: none; }
.home .lane-ticks { position: relative; display: block; height: 1.2em; font-weight: 700; font-stretch: 75%; letter-spacing: .04em; font-variant-numeric: tabular-nums lining-nums; }
.home .lane-ticks i { position: absolute; top: 0; font-style: normal; transform: translateX(-50%); white-space: nowrap; }
.home .lane-ticks i:nth-child(1) { left: 0; transform: none; }
.home .lane-ticks i:nth-child(2) { left: 33.333%; }
.home .lane-ticks i:nth-child(3) { left: 66.666%; }
.home .lane-ticks i:nth-child(4) { left: 100%; transform: translateX(-100%); }

/* row anatomy */
.home .lane-list { list-style: none; margin: 0; padding: 0; }
.home .lane { padding: 20px 0; row-gap: 0; border-bottom: 1px solid rgba(255,255,255,.16); transition: background-color .12s, box-shadow .12s; }
.home .lane[hidden] { display: none; }
.home .lane:hover, .home .lane.is-hot { background: rgba(255,255,255,.05); box-shadow: inset 3px 0 0 var(--signal); }
.home .lane:hover .lane-n, .home .lane.is-hot .lane-n { color: var(--signal); }
.home .lane-n { padding-left: 12px; font: 700 1.05rem/1 var(--font); font-stretch: 80%; font-variant-numeric: tabular-nums lining-nums; color: var(--on-navy-2); }
.home .lane-route { display: grid; grid-template-columns: minmax(0, auto) 28px minmax(0, auto); grid-template-rows: auto auto; justify-content: start; align-items: center; column-gap: 12px; row-gap: 3px; min-width: 0; }
.home .lane-port { display: contents; }
.home .lane-port:first-child b { grid-area: 1 / 1; } .home .lane-port:first-child small { grid-area: 2 / 1; }
.home .lane-arrow { grid-area: 1 / 2; }
.home .lane-port:last-child b { grid-area: 1 / 3; } .home .lane-port:last-child small { grid-area: 2 / 3; }
.home .lane-port b { min-width: 0; font: 700 1.4rem/1.05 var(--font); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .lane-port small { font: 600 .66rem/1.2 var(--font); letter-spacing: .14em; color: var(--on-navy-2); font-variant-numeric: tabular-nums lining-nums; }
.home .lane-arrow { position: relative; width: 28px; height: 1px; background: #fff; font-size: 0; color: transparent; transition: none; transform: none; }
.home .lane-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
.home .lane:hover .lane-arrow { transform: none; }
.home .lane-mode { display: block; font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy); white-space: nowrap; }
.home .lane-tl { position: relative; display: grid; gap: 8px; height: auto; min-width: 0; background: none; margin: 0; }
.home .lane-days { display: block; font: 700 2.2rem/1 var(--font); font-stretch: 75%; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; color: #fff; white-space: nowrap; }
.home .lane-days i, .home .lane-days small { font: 600 .66rem/1 var(--font); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-2); vertical-align: 7px; }
.home .lane-days i { margin: 0 6px; }
.home .lane-days small { margin-left: 8px; }
.home .lane-gantt { position: relative; display: block; height: 10px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.3)) 0 0 / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.3)) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.3)) 66.666% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.3)) 100% 0 / 1px 100% no-repeat,
    linear-gradient(0deg, rgba(255,255,255,.3), rgba(255,255,255,.3)) 0 100% / 100% 1px no-repeat; }
.home .lane-tl-range { position: absolute; top: auto; bottom: 0; height: 3px; min-width: 3px; transform: none; border-radius: 0; box-shadow: none; background: #fff; }
.home .lane[data-kind="air"] .lane-tl-range, .home .lane[data-kind="domestic"] .lane-tl-range { background: #fff; }
/* a lane with ships on it right now */
.home .lane:has(.lane-live:not([hidden])) .lane-days { color: var(--signal); }
.home .lane:has(.lane-live:not([hidden])) .lane-tl-range { background: var(--signal); }
.home .lane-dep { display: grid; gap: 4px; min-width: 0; }
.home .lane-dep b { font: 700 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.home .lane-dep small { font-size: .78rem; color: var(--on-navy-2); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.home .lane-dep small[hidden] { display: none; }
.home .lane-go { display: grid; place-items: center; min-height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.6); border-radius: 0; background: transparent; color: #fff; text-decoration: none; font: 700 .74rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: background-color .12s, color .12s, border-color .12s; }
.home .lane:hover .lane-go { background: transparent; color: #fff; }
.home .lane-go:hover, .home .lane-go:focus-visible, .home .lane:hover .lane-go:hover, .home .lane:hover .lane-go:focus-visible { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.home .lane-go:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.home .lane-live { grid-column: 2 / -1; display: flex; align-items: center; gap: 10px; margin: 4px 0 0; min-width: 0; font-size: .82rem; color: var(--on-navy); }
.home .lane-live[hidden] { display: none; }
.home .lane-live i { flex: none; width: 8px; height: 8px; border-radius: 0; background: var(--signal); animation: live-blink 1.6s steps(1) infinite; }
.home .lane-live b { color: #fff; font-weight: 800; }
.home .lane-live > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home .lanes-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 32px 0 0; padding: 20px 0 0; border-top: 2px solid #fff; color: #fff; font-size: 1rem; }
.home .lanes-foot p { margin: 0; font: 700 1.15rem/1.2 var(--font); font-stretch: 75%; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.home .lanes-foot-go { min-width: 200px; padding: 0 20px; }

@media (min-width: 961px) and (max-width: 1200px) { .home .lane-port b { font-size: 1.25rem; white-space: normal; } }
/* 761 to 960px: two rows per lane (route and transit, then mode, departs and button) */
@media (max-width: 960px) {
  .home .board-head { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .home .lane-cols { display: none; }
  .home .lane-list { border-top: 1px solid rgba(255,255,255,.4); }
  .home .lane { grid-template-columns: 40px minmax(0, 1fr) auto 112px; grid-template-areas: "n route tl tl" "n mode dep go"; grid-auto-rows: auto; row-gap: 14px; column-gap: 20px; padding: 18px 0; }
  .home .lane-n { grid-area: n; align-self: start; padding-left: 10px; }
  .home .lane-route { grid-area: route; }
  .home .lane-port b { white-space: normal; }
  .home .lane-tl { grid-area: tl; justify-self: end; }
  .home .lane-dep { grid-area: dep; justify-self: end; text-align: right; }
  .home .lane-mode { grid-area: mode; align-self: center; }
  .home .lane-go { grid-area: go; }
  .home .lane-live { grid-column: 2 / -1; margin-top: 0; }
  .home .lane-gantt { display: none; }
  .home .lane-days { font-size: 1.8rem; }
  .home .lanes-foot { flex-direction: column; align-items: stretch; }
  .home .lanes-foot-go { min-width: 0; width: 100%; }
}
/* 760px and below: the three-line phone stack */
@media (max-width: 760px) {
  .home .lane { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "n route route" "n tl dep" "n mode go"; row-gap: 12px; column-gap: 14px; }
  .home .lane-tl { justify-self: start; }
  .home .lane-go { justify-self: end; min-width: 104px; }
  .home .lane-days { font-size: 1.6rem; }
}
@media (max-width: 600px) {
  .home .lane-port b { font-size: 1.1rem; white-space: normal; }
  .home .lane-route { column-gap: 10px; grid-template-columns: minmax(0, auto) 18px minmax(0, auto); }
  .home .lane-arrow { width: 18px; }
  .home .lane-live > span { white-space: normal; }
}

/* ---- closing band (white paper) ---- */
.home .cta-book { background: #fff; padding: clamp(64px, 8vw, 112px) 0; border-top: 0; }
.home .cta-book-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 72px); align-items: end; border-top: 0; padding-top: 0; background: none; }
.home .cta-book-inner::before { content: ""; display: block; grid-column: 1 / -1; height: 2px; background: var(--ink); margin-bottom: clamp(32px, 4vw, 48px); }
/* DISPLAY */
.home .cta-book .cine-sec-title { margin: 0 0 20px; max-width: 8ch; font-size: clamp(3rem, 7vw, 6.2rem); line-height: .9; letter-spacing: -.03em; text-wrap: balance; color: var(--ocean); }
.home .cta-book p { margin: 0; max-width: 44ch; font-size: 1.05rem; line-height: 1.55; color: var(--body); }
.home .cta-act { display: grid; gap: 20px; justify-items: start; }
.home .cta-book .cine-book-go { width: auto; min-width: 260px; margin-top: 0; min-height: 56px; background: var(--ocean); border-color: var(--ocean); color: #fff; }
.home .cta-book .cine-book-go:hover { background: var(--ocean-deep); border-color: var(--ocean-deep); color: #fff; }
.home .cta-book .cine-book-go:focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; }
.home .cta-call { display: grid; gap: 4px; min-height: 56px; color: var(--ink); text-decoration: none; }
.home .cta-call small { font: 600 .68rem/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.home .cta-call small:last-child { display: block; margin-top: 10px; }   /* clear of the phone's 2px underline */
.home .cta-call b { font: 800 2rem/1 var(--font); font-stretch: 85%; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); text-decoration: underline; text-decoration-color: var(--ocean); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.home .cta-call:hover { color: var(--ink); }
.home .cta-call:hover b { text-decoration-color: var(--ink); }
.home .cta-call:focus-visible { outline: 3px solid var(--ocean); outline-offset: 4px; }
@media (max-width: 860px) { .home .cta-book-inner { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } .home .cta-act { justify-items: stretch; } .home .cta-book .cine-book-go { width: 100%; min-width: 0; } }

/* reduced motion: after the .home live-square rules above, to win on source order */
@media (prefers-reduced-motion: reduce) { .home .lane-live i, .home .lanes-live i, .home .sea-live i { animation: none; } .home .lm-mover { display: none; } }

/* ---- address suggestions under the pickup and drop-off fields (main.js placesBox) ---- */
.has-sug { position: relative; }
.sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; display: block; max-height: 340px; overflow-y: auto; background: #fff; border: 2px solid var(--ink); border-radius: 0; box-shadow: none; text-align: left; }
.sug[hidden] { display: none; }
.sug-opt { display: block; min-height: 44px; padding: 12px 14px; border-top: 1px solid var(--mist); font: 500 1rem/1.35 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.sug-opt:first-child { border-top: 0; }
.sug-opt:hover, .sug-opt[aria-selected="true"] { background: var(--foam); }
.sug-opt[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--ocean); }
.sug-foot { display: block; padding: 6px 14px 8px; border-top: 1px solid var(--mist); font: 400 .72rem/1.2 var(--font); color: var(--muted); text-align: right; }
@media (forced-colors: active) { .sug-opt[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; } }

/* ---- resources page (body.small-pg res-pg): download rows; scoped so the small-pg hairline list rule does not reach them ---- */
body.res-pg .page-body { max-width: none; }
body.res-pg .page-body .res-list { list-style: none; margin: 16px 0 0; padding: 0; }
body.res-pg .page-body .res { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; margin: 0; padding: 24px 0; border-top: 0; border-bottom: 1px solid var(--mist); }
body.res-pg .res h3 { margin: 0 0 8px; font: 700 1.25rem/1.25 var(--font); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
body.res-pg .res p { margin: 0 0 6px; }
body.res-pg .res-meta { font-size: .85rem; color: var(--muted); }
/* "On this page": one ruled row, the caption in the LABEL voice, each link a whole 44px target */
body.res-pg .res-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: 24px 0 20px; border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); }
body.res-pg .res-jump-h { color: var(--muted); }
body.res-pg .res-jump a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; text-decoration: none; }
body.res-pg .res-jump a:hover { text-decoration: underline 2px; }
body.res-pg .res-note { font-size: .95rem; color: var(--muted); }
body.res-pg .page-body p, body.res-pg .check-list li { text-wrap: pretty; }
body.res-pg .res-btn { min-height: 48px; padding: 0 24px; }
@media (max-width: 600px) { body.res-pg .page-body .res { grid-template-columns: minmax(0, 1fr); } body.res-pg .res-btn { justify-self: start; } }

/* ---- website assistant (main.js): a launcher bottom right and a square panel in the Blue Board look ---- */
.chat-open { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; background: var(--ink); color: #fff; border: 2px solid var(--ink); border-radius: 0; font: 700 .82rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.chat-open svg { width: 20px; height: 20px; }
.chat-open:hover { background: var(--ocean); border-color: var(--ocean); }
.chat-open:focus-visible { outline: 3px solid var(--ocean); outline-offset: 3px; }
.chat-panel { position: fixed; right: 20px; bottom: 84px; z-index: 61; display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); background: #fff; border: 2px solid var(--ink); border-radius: 0; box-shadow: none; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; background: var(--ink); color: #fff; }
.chat-head b { font: 700 1rem/1.2 var(--font); }
.chat-x { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -6px -8px 0; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.chat-x:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--foam); }
.chat-msg { max-width: 88%; padding: 10px 12px; font: 400 .95rem/1.45 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--mist); }
.chat-msg a { color: var(--ocean); font-weight: 600; }
.chat-user { align-self: flex-end; background: var(--ocean); border-color: var(--ocean); color: #fff; }
.chat-wait { color: var(--muted); letter-spacing: .2em; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 0; background: var(--foam); }
.chat-chips[hidden] { display: none; }
.chat-chips button { all: unset; box-sizing: border-box; min-height: 40px; padding: 8px 12px; border: 1px solid var(--ocean); background: #fff; color: var(--ocean); font: 600 .85rem/1.2 var(--font); cursor: pointer; }
.chat-chips button:hover { background: var(--ocean); color: #fff; }
.chat-chips button:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
.chat-form { display: flex; gap: 0; border-top: 2px solid var(--ink); }
.chat-form input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 0; border-radius: 0; font: 400 1rem/1 var(--font); color: var(--ink); background: #fff; }
.chat-form input:focus { outline: 3px solid var(--ocean); outline-offset: -3px; }
.chat-form button { min-width: 84px; border: 0; border-radius: 0; background: var(--ocean); color: #fff; font: 700 .8rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.chat-form button:hover { background: var(--ocean-deep); }
.chat-note { margin: 0; padding: 8px 14px 10px; font-size: .74rem; line-height: 1.35; color: var(--muted); background: #fff; }
@media (max-width: 1024px) {
  .chat-open { bottom: 76px; right: 12px; width: 48px; min-height: 48px; padding: 0; justify-content: center; }   /* an icon only, clear of the sticky Get a quote / Call bar */
  .chat-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chat-panel { right: 8px; left: 8px; width: auto; bottom: 8px; height: min(560px, calc(100vh - 16px)); }
  body.chat-on .chat-open { display: none; }
}

/* ---- about page (Toll-style: statement hero, figures band, image and text rows, values, service cards) ---- */
.ab-hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.ab-hero-inner { position: relative; z-index: 2; padding: clamp(72px, 10vw, 140px) 24px clamp(64px, 8vw, 112px); }
.ab-kicker { margin: 0 0 16px; font: 700 .8rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.ab-hero h1 { margin: 0; max-width: 18ch; color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1; }
.ab-hero-photo { position: absolute; inset: 0; margin: 0; z-index: 1; }
.ab-hero-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.ab-hero-photo.no-photo { display: none; }
.ab-stats { background: var(--ocean); color: #fff; padding: clamp(40px, 5vw, 64px) 0; }
.ab-label { margin: 0 0 24px; font: 700 .8rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--on-ocean); }
.ab-figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.ab-figs li { display: grid; align-content: start; gap: 8px; padding-top: 16px; border-top: 2px solid rgba(255,255,255,.5); }
.ab-figs b { font: 800 clamp(2.6rem, 5vw, 4rem)/1 var(--font); color: #fff; letter-spacing: -.02em; }
.ab-figs span { color: var(--on-ocean); line-height: 1.45; }
.ab-figs .ab-fig-word { font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 1.25; }
.ab-figs li { min-width: 0; }
.ab-row { padding: clamp(56px, 7vw, 96px) 0 0; }
.ab-row-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 72px); align-items: center; }
.ab-row-flip .ab-photo { order: 2; }
.ab-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--foam); }
.ab-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-photo.no-photo { background: linear-gradient(135deg, var(--ocean), var(--navy)); }
.ab-copy h2 { margin: 0 0 16px; font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.ab-copy p { margin: 0 0 14px; font-size: 1.08rem; line-height: 1.6; color: var(--body); max-width: 56ch; }
.ab-brand { padding: clamp(56px, 7vw, 96px) 0 0; }
.ab-brand .wrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 72px); align-items: center; }
.ab-logo { width: 100%; height: auto; }
.ab-values { margin-top: clamp(56px, 7vw, 96px); padding: clamp(56px, 7vw, 88px) 0; background: var(--foam); }
.ab-values h2, .ab-solutions h2 { margin: 0 0 28px; font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.ab-value-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.ab-value-list li { display: grid; align-content: start; gap: 8px; padding: 22px 22px 22px 0; }
.ab-value-list li + li { padding-left: 22px; border-left: 1px solid var(--mist); }
.ab-value-list b { font: 700 1.15rem/1.25 var(--font); color: var(--ocean); }
.ab-value-list span { color: var(--body); line-height: 1.55; }
.ab-solutions { padding: clamp(56px, 7vw, 96px) 0; }
.ab-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-card { position: relative; display: grid; align-content: start; gap: 8px; min-height: 140px; padding: 24px 56px 24px 24px; background: #fff; border: 1px solid var(--mist); border-top: 3px solid var(--ocean); text-decoration: none; color: var(--ink); }
.ab-card b { font: 700 1.2rem/1.2 var(--font); }
.ab-card span { color: var(--body); line-height: 1.5; }
.ab-card i { position: absolute; right: 22px; bottom: 20px; font-style: normal; font-size: 1.3rem; color: var(--ocean); transition: transform .15s; }
.ab-card:hover { background: var(--foam); }
.ab-card:hover i { transform: translateX(4px); }
.ab-card:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
.ab-cta { background: var(--ocean); color: #fff; padding: clamp(36px, 5vw, 56px) 0; }
.ab-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.ab-cta h2 { margin: 0; color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
.ab-cta-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ab-cta .btn-primary { background: #fff; color: var(--ocean); border-color: #fff; min-height: 52px; padding: 0 24px; }
.ab-cta .btn-primary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.ab-call, .ab-call:hover { color: #fff; font-weight: 700; }
@media (max-width: 960px) {
  .ab-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-value-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-value-list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ab-row-inner, .ab-brand .wrap { grid-template-columns: minmax(0, 1fr); }
  .ab-row-flip .ab-photo { order: 0; }
  .ab-logo { max-width: 240px; }
  .ab-value-list, .ab-cards { grid-template-columns: minmax(0, 1fr); }
  .ab-value-list li, .ab-value-list li + li { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--mist); }
}

/* ---- Google reviews band on the home page (main.js fills it from /api/reviews) ---- */
.reviews { padding: clamp(56px, 7vw, 96px) 0; background: #fff; border-top: 1px solid var(--mist); }
.reviews[hidden] { display: none; }
.reviews-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: 28px; }
.reviews-head .cine-sec-title { margin: 0; }
.rv-stars { color: #E7A400; letter-spacing: .08em; font-size: 1.05rem; }
.reviews-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.rv { display: grid; align-content: start; gap: 10px; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--mist); }
.rv + .rv { padding-left: 24px; border-left: 1px solid var(--mist); }
.rv:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.rv-src { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ocean); line-height: 1.6; }
.rv-who b { color: var(--ink); font-weight: 600; }
.rv p { margin: 0; color: var(--ink); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rv-who { font-size: .85rem; color: var(--muted); }
.rv-who a { color: var(--ink); font-weight: 600; }
.reviews-src { margin: 16px 0 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 860px) { .reviews-list { grid-template-columns: minmax(0, 1fr); } .rv, .rv + .rv { padding: 20px 0; border-left: 0; } }

/* ---- resources: moving checklist ---- */
body.res-pg .res-h2 { margin: clamp(48px, 6vw, 72px) 0 8px; padding-top: 24px; border-top: 2px solid var(--ink); font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
body.res-pg .check-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; margin-top: 20px; }
body.res-pg .check-group-wide { grid-column: 1 / -1; }
body.res-pg .check-group h3 { margin: 20px 0 10px; font: 700 1.05rem/1.3 var(--font); color: var(--ocean); }
body.res-pg .page-body .check-list { list-style: none; margin: 0; padding: 0; }
body.res-pg .page-body .check-list li { position: relative; margin: 0; padding: 8px 0 8px 32px; border-top: 0; border-bottom: 1px solid var(--mist); line-height: 1.5; }
body.res-pg .check-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 16px; height: 16px; border: 2px solid var(--ocean); }
body.res-pg .check-list a { padding: 3px 0; }   /* inline padding: a 24px tap height without moving the line */
@media (max-width: 760px) { body.res-pg .check-groups { grid-template-columns: minmax(0, 1fr); } }
@media print { .site-header, .fx-footer, .chat-open, .chat-panel, .sticky-cta { display: none !important; } body.has-sticky { padding-bottom: 0; } .check-list li { break-inside: avoid; } body.res-pg .check-group { break-inside: avoid; } }

/* =============== service template (Blue Board): scoped to body.svc-tpl so the other service pages keep their rules until they move over =============== */
body.svc-tpl .sh { background: var(--ocean); color: #fff; padding: clamp(40px, 5vw, 64px) 0 0; }
body.svc-tpl .sh-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; border-top: 1px solid rgba(255,255,255,.4); padding-top: clamp(32px, 4vw, 48px); }
body.svc-tpl .sh-copy { padding-bottom: 0; }
body.svc-tpl .sh-eyebrow { margin: 0 0 14px; font: 600 1rem/1.3 var(--font); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums lining-nums; color: var(--on-ocean); }
body.svc-tpl .sh h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; font-stretch: 82%; font-style: normal; line-height: .94; text-transform: none; color: #fff; text-wrap: balance; }
body.svc-tpl .sh-lead { color: var(--on-ocean); }
body.svc-tpl .sh .btn-primary { background: #fff; color: var(--ocean); border-color: #fff; }
body.svc-tpl .sh .btn-primary:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); }
body.svc-tpl .sh .btn:focus-visible, body.svc-tpl .sh-call:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body.svc-tpl .sh-call { color: #fff; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
body.svc-tpl .sh-call:hover { color: var(--signal); }
/* cyanotype: the section.ground recipe (grayscale, screen on ocean-deep) */
body.svc-tpl .sh-photo { isolation: isolate; background: var(--ocean-deep); }
body.svc-tpl .sh-photo .cine-photo { filter: grayscale(1) contrast(1.25) brightness(1.05); mix-blend-mode: screen; }
/* a hero with no photo (the industries index): one column, no empty ocean beside the copy */
body.svc-tpl .sh-inner-solo { grid-template-columns: minmax(0, 1fr); }
/* ruled strip: a caption, not a card */
body.svc-tpl .sh-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; margin: clamp(32px, 4vw, 48px) 0 0; padding: 18px 0 20px; position: static; background: transparent; border-top: 2px solid #fff; box-shadow: none; color: #fff; }
body.svc-tpl .sh-bar-label { font: 600 .72rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
body.svc-tpl .sh-bar-line { margin: 0; color: var(--on-ocean); line-height: 1.4; }
body.svc-tpl .sh-bar-link { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
body.svc-tpl .sh-bar-link:hover { color: var(--signal); }
body.svc-tpl .sh-bar-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* hairline columns */
body.svc-tpl .modes { gap: 0; }
body.svc-tpl .mode { display: block; padding: 0 28px 0 0; border: 0; background: transparent; }
body.svc-tpl .mode + .mode { border-left: 1px solid var(--mist); padding: 0 0 0 28px; }
body.svc-tpl .mode h2 { margin: 0 0 12px; font: 700 clamp(1.6rem, 2.6vw, 2.2rem)/1.05 var(--font); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
body.svc-tpl .mode p { margin: 0; max-width: 44ch; color: var(--body); line-height: 1.5; }
/* a mode's list: plain hairline rows, no dots; its link reads like the index's Price link */
body.svc-tpl .mode ul { display: block; margin: 20px 0 0; max-width: 44ch; }
body.svc-tpl .mode li { padding: 9px 0; border-top: 1px solid var(--mist); color: var(--ink); font-size: .95rem; line-height: 1.45; }
body.svc-tpl .mode li:last-child { border-bottom: 1px solid var(--mist); }
body.svc-tpl .mode li::before { content: none; }
body.svc-tpl .mode-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; padding: 0; font: 700 .74rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ocean); }
body.svc-tpl .mode-go:hover .svc-arrow, body.svc-tpl .mode-go:focus-visible .svc-arrow { width: 44px; }
body.svc-tpl .mode-go:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
/* more than two modes run two per row: each row starts on the content edge, a hairline between rows */
body.svc-tpl .mode:nth-child(2n+1) { border-left: 0; padding: 0 28px 0 0; }
body.svc-tpl .mode:nth-child(n+3) { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--mist); }
/* figures board on navy */
body.svc-tpl .facts { gap: 0; }
body.svc-tpl .facts li { display: block; padding: 22px 28px 26px 0; border: 0; background: transparent; }
body.svc-tpl .facts li + li { border-left: 1px solid rgba(255,255,255,.12); padding-left: 28px; }
/* boards longer than three: each row of three starts on the content edge, and a hairline separates the rows */
body.svc-tpl .facts li:nth-child(3n+1) { border-left: 0; padding-left: 0; }
body.svc-tpl .facts li:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.12); }
body.svc-tpl .facts b { display: block; margin: 0 0 12px; font: 700 1.6rem/1.05 var(--font); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
body.svc-tpl .facts span { display: block; color: var(--on-navy); font-size: 1rem; line-height: 1.5; max-width: 36ch; }
/* steps: rows */
body.svc-tpl .svc-steps { display: block; }
body.svc-tpl .svc-steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; row-gap: 6px; align-items: baseline; padding: 20px 0; background: transparent; border: 0; border-bottom: 1px solid var(--mist); }
body.svc-tpl .svc-step-n { grid-column: 1; grid-row: 1 / span 2; width: auto; height: auto; border-radius: 0; background: transparent; display: block; margin: 0; font: 700 1.05rem/1 var(--font); font-stretch: 80%; font-variant-numeric: tabular-nums lining-nums; color: var(--ocean); }
body.svc-tpl .svc-steps b { grid-column: 2; font: 700 1.6rem/1.05 var(--font); font-stretch: 72%; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
body.svc-tpl .svc-steps li > span:last-child { grid-column: 2; }
/* what is covered: the same rows, numbered by a counter */
body.svc-tpl .svc-inc { display: block; counter-reset: inc; }
body.svc-tpl .svc-inc li { counter-increment: inc; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; row-gap: 6px; align-items: baseline; padding: 20px 0; background: transparent; border: 0; border-bottom: 1px solid var(--mist); }
body.svc-tpl .svc-inc li::before { content: counter(inc, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; font: 700 1.05rem/1 var(--font); font-stretch: 80%; font-variant-numeric: tabular-nums lining-nums; color: var(--ocean); }
body.svc-tpl .svc-inc b { grid-column: 2; font: 700 1.6rem/1.05 var(--font); font-stretch: 72%; font-style: normal; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
body.svc-tpl .svc-inc span { grid-column: 2; color: var(--body); }
/* FAQ rows */
body.svc-tpl .svc-faq details { border-top: 1px solid var(--mist); padding: 0; }
body.svc-tpl .svc-faq details:last-child { border-bottom: 1px solid var(--mist); }
body.svc-tpl .svc-faq summary { align-items: center; padding: 18px 0; font-weight: 700; font-size: 1.05rem; color: var(--ink); min-height: 44px; }
body.svc-tpl .svc-faq summary::after { content: ""; flex: none; box-sizing: border-box; width: 12px; height: 12px; border: 2px solid var(--ink); background: transparent; font-size: 0; }
body.svc-tpl .svc-faq details[open] summary::after { content: ""; background: var(--ink); }
body.svc-tpl .svc-faq summary:focus-visible { outline: 3px solid var(--ocean); outline-offset: 2px; }
/* aside */
body.svc-tpl .svc-aside p { color: var(--on-ocean); }
body.svc-tpl .svc-aside .svc-aside-line { color: #fff; font-style: normal; text-transform: none; text-wrap: balance; }
body.svc-tpl .svc-aside .btn-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
/* other removals */
.svc-sec .svc-cols { border-top: 0; }
/* live AIS on /sea-freight: on the content edge, the chart beside the port rows (the home hero's
   layout), not a centred 760px block. */
body.svc-tpl #live .sea-embed { max-width: none; margin: 40px 0 0; }
@media (min-width: 961px) {
  body.svc-tpl #live .sea-embed { display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 1fr); grid-template-areas: "bar bar" "map side" "key side"; column-gap: 48px; align-items: start; }
  body.svc-tpl #live .sea-bar { grid-area: bar; }
  body.svc-tpl #live .sea-map-wrap { grid-area: map; }
  body.svc-tpl #live .sea-legend { grid-area: key; }
  body.svc-tpl #live .sea-side { grid-area: side; display: block; margin-top: 0; }
  body.svc-tpl #live .sea-side > div + .sea-ports { margin-top: 24px; }
  body.svc-tpl #live .sea-side > div:has(> .sea-list:empty) + .sea-ports { margin-top: 0; }
}
@media (max-width: 760px) {
  /* chart units: 26 reads at about 12px on a 340px chart, where 18 was about 8px */
  body.svc-tpl #live .sea-port text { font-size: 26px; }
}
@media (max-width: 900px) {
  body.svc-tpl .sh-inner { grid-template-columns: 1fr; }
  body.svc-tpl .mode, body.svc-tpl .mode:nth-child(2n+1) { padding-right: 0; }
  body.svc-tpl .mode + .mode { border-left: 0; border-top: 1px solid var(--mist); padding: 28px 0 0; margin-top: 28px; }
  body.svc-tpl .facts { grid-template-columns: 1fr; }
  body.svc-tpl .facts li, body.svc-tpl .facts li + li { padding: 20px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 760px) {
  body.svc-tpl .sh-bar { grid-template-columns: 1fr; }
  body.svc-tpl .svc-steps li, body.svc-tpl .svc-inc li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  body.svc-tpl .svc-steps b, body.svc-tpl .svc-inc b { font-size: 1.3rem; }
}

/* =============== small pages (404, thanks, thanks-rider, privacy): the /terms pattern, scoped to body.small-pg =============== */
/* action row: a primary and a ghost button side by side, stacked full width on phones */
body.small-pg .small-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
/* a phone number or an address never breaks across lines */
body.small-pg main a[href^="tel:"], body.small-pg main a[href^="mailto:"] { white-space: nowrap; }
/* lists are hairline rows, not round bullets */
body.small-pg .page-body ul { list-style: none; margin: 0 0 1em; padding: 0; }
body.small-pg .page-body li { margin: 0; padding: 10px 0; border-top: 1px solid var(--mist); }
body.small-pg .page-body li:last-child { border-bottom: 1px solid var(--mist); }
/* 404: left on the content edge like every other page, then the services index */
body.small-pg .error-page { text-align: left; padding: clamp(48px, 7vw, 84px) 0; }
body.small-pg .small-copy { max-width: 72ch; }
body.small-pg .small-index { margin-top: clamp(56px, 7vw, 88px); }
body.small-pg .small-index-h { margin: 0 0 20px; font-size: 1.4rem; }
@media (max-width: 560px) {
  body.small-pg .small-acts { flex-direction: column; }
  body.small-pg .small-acts .btn { width: 100%; }
}

/* =============== client portal (login) on the service template, scoped to body.portal-pg =============== */
/* no portal strip under this hero, so the hero closes on its own padding */
body.portal-pg .sh { padding-bottom: clamp(40px, 5vw, 64px); }
body.portal-pg .sh-copy > .sh-lead:last-child { margin-bottom: 0; }
/* two columns, no boxes: each opens on a 2px ink rule on its content edge, one mist rule between them */
body.portal-pg .portal-sec { background: #fff; padding: clamp(56px, 8vw, 104px) 0; }
body.portal-pg .portal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
body.portal-pg .portal-col { display: block; padding: 0 clamp(28px, 4vw, 56px) 0 0; }
body.portal-pg .portal-col + .portal-col { padding: 0 0 0 clamp(28px, 4vw, 56px); border-left: 1px solid var(--mist); }
body.portal-pg .portal-col::before { content: ""; display: block; height: 2px; margin: 0 0 28px; background: var(--ink); }
body.portal-pg .portal-col h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
body.portal-pg .portal-col > p { max-width: 44ch; color: var(--body); }
body.portal-pg .portal-form { display: grid; gap: 16px; margin: 24px 0 0; }
body.portal-pg .portal-form .cf-turnstile { margin: 0; }
body.portal-pg .portal-note { margin: 20px 0 0; }
body.portal-pg .form-done { text-align: left; }
/* contact rows: hairlines, no dots */
body.portal-pg .portal-contact { list-style: none; margin: 24px 0 0; padding: 0; }
body.portal-pg .portal-contact li { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--mist); color: var(--body); }
body.portal-pg .portal-contact li:last-child { border-bottom: 1px solid var(--mist); }
body.portal-pg .portal-contact b { color: var(--ink); }
body.portal-pg .portal-contact a { font-weight: 700; white-space: nowrap; }
body.portal-pg .portal-contact a { display: inline-block; justify-self: start; padding: 9px 0; margin: -9px 0; }   /* 44px tap box the width of the link, row height unchanged */
body.portal-pg .portal-contact a[href^="tel:"] { font-weight: 800; font-stretch: 85%; font-variant-numeric: tabular-nums lining-nums; }   /* phone figure, as on home */
/* consent row: the whole label row is a 44px target, and an unticked submit fills the row with signal like other invalid fields */
body.portal-pg .field-check { position: relative; align-items: center; padding: 0 10px; margin: 0; }   /* fill on the column edges, box 10px in */
body.portal-pg .field-check input { position: relative; z-index: 1; margin: 0; }   /* above the overlay, so a click on the box toggles it once */
body.portal-pg .field-check label { display: flex; align-items: center; min-height: 44px; }
body.portal-pg .field-check label::before { content: ""; position: absolute; inset: 0; }   /* the whole 44px row is the label's tap area */
body.portal-pg .field-check label a { position: relative; z-index: 1; }   /* Privacy still opens /privacy */
body.portal-pg .field-check:has(input[aria-invalid="true"]) { background: var(--signal); }
body.portal-pg .field-check:has(input[aria-invalid="true"]) label, body.portal-pg .field-check:has(input[aria-invalid="true"]) label a { color: var(--ink); }
@media (max-width: 900px) {
  body.portal-pg .portal { grid-template-columns: minmax(0, 1fr); }
  body.portal-pg .portal-col, body.portal-pg .portal-col + .portal-col { padding: 0; border-left: 0; }
  body.portal-pg .portal-col + .portal-col { margin-top: 56px; }
}
@media (max-width: 560px) {
  body.portal-pg .cta-book .cine-book-go { width: 100%; min-width: 0; }
}

/* =============== careers (/drive) on the service template, scoped to body.drive-pg =============== */
/* no portal strip under this hero, so the hero closes on its own padding */
body.drive-pg .sh { padding-bottom: clamp(40px, 5vw, 64px); }
/* registration: copy left, form right from 941px (.quote-wrap), no card around the form */
body.drive-pg .quote-copy > p { max-width: 44ch; color: var(--body); }
body.drive-pg .quote-form { gap: 20px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.drive-pg .quote-form .row { gap: 20px; }
/* from 941px the copy column stays beside the form as it scrolls; phones unchanged */
@media (min-width: 941px) { body.drive-pg .quote-copy { position: sticky; top: 104px; align-self: start; } }
/* text boxes and selects: the global field (2px ink edge, ocean focus ring, signal when invalid), one height, as /login's email box */
body.drive-pg .quote-form input[type="text"], body.drive-pg .quote-form input[type="email"], body.drive-pg .quote-form input[type="tel"], body.drive-pg .quote-form select { min-height: 52px; }
/* inline links in running text: a 44px tap height without moving the lines */
body.drive-pg .quote-copy > p a, body.drive-pg .field-check label a { padding: 14px 0; }
/* contact rows: hairlines, a label column and its value, as /login's .portal-contact */
body.drive-pg .quote-contact { display: block; margin: 24px 0 0; }
body.drive-pg .quote-contact li { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--mist); color: var(--body); }
body.drive-pg .quote-contact li:last-child { border-bottom: 1px solid var(--mist); }
body.drive-pg .quote-contact b { color: var(--ink); }
body.drive-pg .quote-contact span { font: 400 1rem/1.5 var(--font); font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--body); }   /* a value, not the old caps caption */
body.drive-pg main a[href^="tel:"], body.drive-pg main a[href^="mailto:"] { white-space: nowrap; }
body.drive-pg .quote-contact a { display: inline-block; justify-self: start; padding: 9px 0; margin: -9px 0; font-weight: 700; }   /* 44px tap box, row height unchanged */
body.drive-pg .quote-contact a[href^="tel:"] { font-weight: 800; font-stretch: 85%; font-variant-numeric: tabular-nums lining-nums; }   /* phone figure, as on home */
/* the role question and its four cells: the body.book-body .site-opt pattern, 2 x 2 at every width */
body.drive-pg .field[role="radiogroup"] { gap: 10px; }
body.drive-pg .site-q { margin: 0; font: 700 1rem/1.3 var(--font); font-stretch: 100%; color: var(--ink); }
body.drive-pg .site-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line-3); border-left: 1px solid var(--line-3); border-radius: 0; overflow: visible; }
body.drive-pg .site-opt { position: relative; display: flex; margin: 0; padding: 0; gap: 0; background: transparent; border: 0; border-right: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); cursor: pointer; font-weight: 400; }
body.drive-pg .site-opt input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; opacity: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }
body.drive-pg .site-opt input::after { content: none; }
body.drive-pg .site-opt span { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 10px; background: #fff; font: 700 .78rem/1.15 var(--font); font-stretch: 85%; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--ink); }
body.drive-pg .site-opt:hover input:not(:checked) + span { background: var(--foam); }
body.drive-pg .site-opt:has(input:checked) { background: transparent; font-weight: 400; }
body.drive-pg .site-opt input:checked + span { background: var(--ocean); color: #fff; }
body.drive-pg .site-opt input:focus-visible + span { outline: 3px solid var(--ocean); outline-offset: -6px; }
body.drive-pg .site-opt input:focus-visible:checked + span { outline-color: #fff; }
/* an empty role on submit fills the four cells with signal, like any other invalid field, until one is picked */
body.drive-pg .field[role="radiogroup"]:has(input[aria-invalid="true"]):not(:has(input:checked)) .site-opt span { background: var(--signal); }
@media (forced-colors: active) {
  body.drive-pg .site-opt span { outline: 1px solid CanvasText; outline-offset: -1px; }
  body.drive-pg .site-opt input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
/* consent row: the whole label row is a 44px target, and an unticked submit fills the row with signal, as body.portal-pg */
body.drive-pg .field-check { position: relative; align-items: center; padding: 0 10px; margin: 0; }
body.drive-pg .field-check input { position: relative; z-index: 1; margin: 0; }
body.drive-pg .field-check label { display: flex; align-items: center; min-height: 44px; }
body.drive-pg .field-check label::before { content: ""; position: absolute; inset: 0; }
body.drive-pg .field-check label a { position: relative; z-index: 1; }   /* Privacy still opens /privacy */
body.drive-pg .field-check:has(input[aria-invalid="true"]) { background: var(--signal); }
body.drive-pg .field-check:has(input[aria-invalid="true"]) label, body.drive-pg .field-check:has(input[aria-invalid="true"]) label a { color: var(--ink); }
/* Turnstile bare at the form's width; the submit a 56px ocean bar; the status line in ink */
body.drive-pg .quote-form .cf-turnstile { margin: 0; width: 100%; }
body.drive-pg #rider-submit { width: 100%; min-height: 56px; }
body.drive-pg .form-status, body.drive-pg .form-status.is-error, body.drive-pg .form-status.is-ok { display: block; padding: 0; background: transparent; color: var(--ink); }
body.drive-pg .form-status:empty { display: none; }
/* after sending: the message replaces the form, on the content edge */
body.drive-pg .form-done { text-align: left; padding: 0; }
body.drive-pg .form-done h3 { margin: 0 0 12px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; font-stretch: 82%; letter-spacing: -.025em; line-height: .98; color: var(--ink); }
/* closing band: white, not foam; the FAQ above already gives the space */
body.drive-pg .cta-book { background: #fff; padding-top: 0; }
body.drive-pg .cta-book .cine-book-go { min-height: 56px; }
@media (max-width: 560px) {
  body.drive-pg .cta-book .cine-book-go { width: 100%; min-width: 0; }
}

/* footer: payment line with the Wise mark (official flag from wise.design, in Wise bright green) */
.fx-pay { margin: 0; }
.fx-wise { white-space: nowrap; }
.fx-wise svg { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; fill: #9FE870; }
.fx-wise b { color: #fff; font-weight: 700; }

/* ==== Highlighter pink and yellow (owner, 25 Oct 2026) ====
   The whole site runs on two highlighters over near-black ink and white:
   --ocean (the brand token, kept by name) is now pink #E6007E: hero bands, links, brand marks (white on it 4.5:1)
   --hl-pink   #FF3EA5  bright highlighter pink: hovers on dark bands
   --hl-yellow #FFF200  highlighter yellow: every primary button (ink text) and the mark.hl stroke; also --signal
   Never put white text on yellow or on bright pink. */
:root { --hl-pink: #FF3EA5; --hl-yellow: #FFF200; --hl-soft: #FFF7B3; --signal: var(--hl-yellow); }

.btn-primary, .cine-book-go,
.home .hero2 .cine-book-go, .home .cta-book .cine-book-go,
.section-dark .btn-primary, .cta .btn-primary, .svc-sec-dark .btn-primary,
.svc-aside .btn-primary, .ab-cta .btn-primary, body.svc-tpl .sh .btn-primary,
.primary-nav .btn, .primary-nav .btn:visited { background: var(--hl-yellow); border-color: var(--hl-yellow); color: var(--ink); }
.btn-primary:hover, .cine-book-go:hover,
.home .cta-book .cine-book-go:hover, .primary-nav .btn:hover,
.svc-aside .btn-primary:hover, .ab-cta .btn-primary:hover, body.svc-tpl .svc-aside .btn-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.section-dark .btn-primary:hover, .cta .btn-primary:hover, .svc-sec-dark .btn-primary:hover,
body.svc-tpl .sh .btn-primary:hover, .home .hero2 .cine-book-go:hover { background: var(--hl-pink); border-color: var(--hl-pink); color: var(--ink); }
.primary-nav .btn { border-color: var(--ink); }
.home .plate-btn { background: var(--hl-yellow); border-color: var(--hl-yellow); color: var(--ink); }
.home .plate-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 1024px) {
  .primary-nav .btn { color: var(--ink); }
  .sticky-cta .btn { background: var(--hl-yellow); color: var(--ink); }
  .sticky-cta .btn:hover { background: var(--ink); color: #fff; }
}

/* home "What we move": two groups, removals first; a yellow highlighter sweeps under the name on hover */
.home .svc-group { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin: 0; padding: 18px 0 14px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--mist); font: 800 clamp(1.3rem, 2.2vw, 1.7rem)/1.1 var(--font); font-stretch: 82%; letter-spacing: -.01em; color: var(--ink); }
.home .svc-group span { font: 600 .72rem/1.3 var(--font); font-stretch: 100%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.home .svc-group-2 { margin-top: clamp(40px, 5vw, 64px); }
.home .svc-index { border-top: 0; }
.home .svc b { justify-self: start; padding: 0 .08em; margin-left: -.08em; background: linear-gradient(var(--hl-yellow), var(--hl-yellow)) no-repeat 0 88% / 0% 42%; transition: background-size .25s ease, color .12s; }
.home .svc:hover b, .home .svc:focus-visible b { background-size: 100% 42%; color: var(--ink); }
.home .svc:hover .svc-go, .home .svc:focus-visible .svc-go { color: var(--ink); }
.home .svc-index-main .svc { padding: 26px 0; }
.home .svc-index-main .svc b { font-size: clamp(1.4rem, 2.2vw, 1.72rem); }
.home .svc-index-compact .svc { padding: 14px 0; }
.home .svc-index-compact .svc b { font-size: 1.15rem; }
.home .svc-index-compact .svc-desc { font-size: .95rem; }
.home .svc-index-compact .svc-n { font-size: .9rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .home .svc b { transition: none; } }
@media (max-width: 760px) { .home .svc-index-main .svc { padding: 20px 0; } .home .svc-index-main .svc b { font-size: 1.3rem; } }

/* the highlighter mark: a yellow stroke behind a few key words, as if marked by hand */
mark.hl { background: linear-gradient(transparent 10%, var(--hl-yellow) 10% 92%, transparent 92%); color: var(--ink); padding: 0 .1em; margin: 0 -.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .fld:has([aria-invalid="true"]) { background: var(--hl-soft); }
::selection { background: var(--hl-yellow); color: var(--ink); }