/* GoCargo — page styles.
   Roles only. No colour literal, no magic geometry. See docs-gocargo/02-design-tokens.md.
   Load order: gocargo-tokens.css, then aeroinis-design-system.css, then this.

   GoCargo does NOT draw its own header or footer. The site header (.ai-banner) and
   the site footer are shared with every other page on aeroinis.com and stay exactly
   as they are — an earlier version of this file replaced them and broke the
   continuity between /go and the rest of the site.

   GoCargo does not draw an account door of its own either. An earlier version of
   this file added a balance pill that said "Sign in", which meant the site had two
   sign-in screens: this one and account.html. One account, one door — the cargo
   balance and shipment history live inside account.html with everything else. */

/* --------------------------------------------------------------- page ground

   White, not cream. The charter side is cream — that is the Aeroinis signature and
   it stays there. A quote tool is a working surface: fields, numbers and rows read
   sharper on true white, and the navy quote card only looks like the main element of
   the page when the ground behind it is the brightest thing available. */

.gc-page { background: var(--gc-bg-surface); color: var(--gc-text); }
.gc-shell { max-width: var(--gc-shell); margin-inline: auto; padding-inline: var(--gc-gutter); }

.gc-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Two actions and only two: gold converts, navy proceeds. Everything else is ghost. */
.gc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gc-space-2);
  min-height: var(--gc-field-height);
  padding: 0 var(--gc-space-8);
  border: 0;
  border-radius: var(--gc-radius-pill);
  font-family: var(--gc-font-ui);
  font-weight: var(--gc-weight-bold);
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gc-dur-fast) var(--gc-ease), color var(--gc-dur-fast) var(--gc-ease);
}
.gc-btn--gold { background: var(--gc-action); color: var(--gc-action-ink); }
.gc-btn--gold:hover { background: var(--gc-action-hover); }
.gc-btn--gold:active { background: var(--gc-action-active); }
.gc-btn--navy { background: var(--gc-action-2); color: var(--gc-action-2-ink); }
.gc-btn--navy:hover { background: var(--gc-action-2-hover); }
.gc-btn--navy:active { background: var(--gc-action-2-active); }
.gc-btn--ghost {
  background: transparent;
  color: var(--gc-action-ghost-ink);
  box-shadow: inset 0 0 0 1px var(--gc-action-ghost-line);
}
.gc-btn[disabled] { background: var(--gc-action-disabled); color: var(--gc-action-disabled-ink); cursor: not-allowed; }

/* --gc-focus-ring is a box-shadow value — `0 0 0 3px rgba(...)`. Handed to
   `outline`, which takes width/style/color, the whole declaration is invalid
   and the browser drops it: every focusable control on this page had NO
   visible focus at all, keyboard and switch users included. The token is
   right, the property was wrong.

   Both are set now, and deliberately. The shadow is the gold ring the design
   asks for; the outline underneath is transparent so it is invisible in
   normal rendering, and forced-colours mode — which discards box-shadow and
   repaints outlines in the user's own colour — still has something to draw. */
.gc-page :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: var(--gc-focus-ring);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* ------------------------------------------------------------- the hero band

   The shared site header is a floating translucent pill, positioned 14px from the
   top and built to sit over a dark hero — that is how every other page on
   aeroinis.com looks. On a white ground it reads as a smudge, so GoCargo keeps the
   same dark hero the rest of the site has. It is the ONLY dark area on the page;
   everything below it is white.

   --gc-bg-cinema rather than --gc-bg-inverse because this band must stay dark in
   both themes: the header pill above it carries light text either way. */

.gc-band {
  background: var(--gc-bg-cinema);
  color: var(--gc-text-on-dark);
  padding-top: calc(var(--gc-header-height) + var(--gc-space-10));
  padding-bottom: var(--gc-space-10);
}

/* A band with a photograph behind it.
 *
 *   <section class="gc-band gc-band--photo">
 *     <img class="gc-band-img" src="img/guide-distance-hero.webp" alt=""
 *          width="2400" height="900" fetchpriority="high" decoding="async">
 *     <div class="gc-shell"> … </div>
 *   </section>
 *
 * The image is decorative: the headline next to it already says what the page is,
 * so it carries an empty alt and adds nothing for a screen reader to read twice.
 *
 * Two scrims, not one. A single flat overlay dark enough for the headline kills
 * the photograph; a gradient dark on the reading side and light on the subject
 * side keeps both. On a phone the text runs the full width, so the gradient turns
 * vertical and the whole lower half is covered instead. The band keeps its solid
 * --gc-bg-cinema underneath, so a photograph that fails to load costs nothing. */
.gc-band--photo { position: relative; isolation: isolate; overflow: hidden; }
.gc-band--photo > .gc-shell { position: relative; z-index: 1; }
.gc-band-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  /* The image is darkened at the source, the way the jet hero already does it,
     rather than trusted to be dark. This bounds the worst case: the brightest
     pixel a photograph can contain arrives at 199 rather than 255, so even the
     thinnest part of the scrim keeps the header legible whatever picture is
     dropped in. This number and --gc-scrim-soft were solved together against a
     pure-white worst case: 13.0:1 for --gc-text-on-dark under the full scrim,
     4.6:1 under the thin one. Change either and re-measure both. */
  filter: brightness(.78) saturate(.94);
}
.gc-band--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--gc-scrim) 0%,
    var(--gc-scrim) 52%,
    var(--gc-scrim-soft) 80%,
    transparent 100%);
}
/* The full-strength part of the scrim reaches 52% of the band. Type is held
   inside it rather than allowed to run out into the thin part, because a lede at
   the normal measure would cross into the photograph on a wide screen and its
   contrast would then depend on which picture happened to be behind it. */
.gc-band--photo .gc-band-h,
.gc-band--photo .gcg-lede { max-width: 34ch; }

@media (max-width: 899px) {
  .gc-band-img { object-position: 62% 45%; }
  /* On a phone the type runs the full width and starts just below the header, so
     the gradient turns vertical and reaches full strength by 22% — measured, not
     guessed: at 46% the lede came out at 2.5:1. */
  .gc-band--photo::after {
    background: linear-gradient(
      to bottom,
      var(--gc-scrim-soft) 0%,
      var(--gc-scrim) 22%,
      var(--gc-scrim) 100%);
  }
  .gc-band--photo .gc-band-h,
  .gc-band--photo .gcg-lede { max-width: none; }
}
.gc-band-h { margin: var(--gc-space-3) 0 var(--gc-space-8); max-width: 20ch; color: var(--gc-text-on-dark); }
.gc-band-h em { font-style: italic; color: var(--gc-text-on-dark-muted); }
.gc-label--on-dark { color: var(--gc-text-gold-on-dark); }

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

.gcq { max-width: 100%; }

.gcq-tabs { display: flex; gap: var(--gc-space-1); overflow-x: auto; scrollbar-width: none; }
.gcq-tabs::-webkit-scrollbar { display: none; }
.gcq-tab {
  flex: 0 0 auto;
  padding: var(--gc-space-3) var(--gc-space-6);
  border: 0;
  border-radius: var(--gc-radius-sm) var(--gc-radius-sm) 0 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--gc-line-on-dark);
  color: var(--gc-text-on-dark);
  font-family: var(--gc-font-ui);
  font-weight: var(--gc-weight-bold);
  font-size: var(--gc-t-body-sm);
  cursor: pointer;
}
.gcq-tab.is-on { background: var(--gc-bg-surface); box-shadow: none; color: var(--gc-text-strong); }

.gcq-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--gc-space-3);
  padding: var(--gc-space-5);
  border-radius: 0 var(--gc-radius-lg) var(--gc-radius-lg) var(--gc-radius-lg);
  background: var(--gc-bg-surface);
}

.gcq-f { display: flex; flex-direction: column; gap: var(--gc-space-2); flex: 1 1 140px; min-width: 0; }
/* ── the route sides, Parcel2Go-shaped ──
   The country is the label line — "From: Türkiye" with a caret — and the
   box beneath is the postcode, wearing the country's flag. Two fields,
   one column per side. */
.gcq-f--side { flex: 0 0 176px; min-width: 0; display: grid; gap: var(--gc-space-2); }
.gcq-side { display: inline-flex; align-items: baseline; gap: var(--gc-space-1); border: 0; background: none; padding: 0;
  font-family: var(--gc-font-ui); font-size: var(--gc-t-caption); color: var(--gc-text-muted); cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; }
.gcq-side b { color: var(--gc-text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.gcq-side:hover b { color: var(--gc-action-ink); }
.gcq-caret { font-style: normal; color: var(--gc-text-muted); }
.gcq-postwrap { position: relative; display: block; }
.gcq-flag { position: absolute; left: var(--gc-space-2); top: 50%; transform: translateY(-50%); pointer-events: none;
  font-family: var(--gc-font-mono); font-style: normal; font-weight: var(--gc-weight-bold); font-size: var(--gc-t-label);
  letter-spacing: .06em; color: var(--gc-text-muted); background: var(--gc-bg-sunken);
  padding: var(--gc-space-1) var(--gc-space-1); border-radius: var(--gc-radius-sm); }
.gcq-f--side .gcq-postwrap input { width: 100%; min-width: 0; padding-left: calc(var(--gc-space-2) + 34px); }

/* The country panel borrows the Atlas suggestion look wholesale; the
   keyboard highlight is drawn on the row rather than focused into it,
   and the search box on top is where the keys live. */
.gcq-origin { width: min(280px, calc(100vw - 32px)); }
.gcq-origin .ai-airport-row.is-cursor { background: var(--gc-bg-sunken); box-shadow: inset 2px 0 0 var(--gc-action); }
.gcq-origin__q { width: 100%; border: 0; border-bottom: 1px solid var(--gc-line); background: transparent;
  padding: var(--gc-space-2) var(--gc-space-2) var(--gc-space-3); font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm);
  color: var(--gc-text); outline: none; margin-bottom: var(--gc-space-2); }
.gcq-origin__q:focus { border-bottom-color: var(--gc-line-focus); }
.gcq-origin__list { max-height: 264px; overflow: auto; }
/* the place line: proof the screen knows the network it quotes */
.gcq-place { display: block; font-family: var(--gc-font-ui); font-style: normal; font-size: var(--gc-t-caption);
  font-weight: var(--gc-weight-bold); color: var(--gc-ok-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcq-f--to { flex: 1 1 180px; }
.gcq-f--sm { flex: 0 1 120px; }
.gcq-f--xs { flex: 0 1 84px; }

.gcq-lab {
  font-family: var(--gc-font-label);
  font-weight: var(--gc-weight-label);
  font-size: var(--gc-t-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
  color: var(--gc-text-muted);
}

.gcq-f input,
.gcq-f select {
  width: 100%;
  height: var(--gc-field-height);
  padding-inline: var(--gc-space-3);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-bg-data);
  color: var(--gc-text);
  font-family: var(--gc-font-ui);
  font-size: 1rem;
}
.gcq-f input:focus, .gcq-f select:focus { border-color: var(--gc-line-focus); }
.gcq-fixed {
  display: flex;
  align-items: center;
  height: var(--gc-field-height);
  padding-inline: var(--gc-space-4);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-bg-sunken);
  color: var(--gc-text);
  font-family: var(--gc-font-ui);
  white-space: nowrap;
}
.gcq-go { flex: 0 0 auto; }

/* ------ results ------ */

.gcq-results:has(.gcq-out:empty) { display: none; }
.gcq-results { padding-block: var(--gc-space-12); }
.gcq-hint, .gcq-note { color: var(--gc-text-muted); font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); }
.gcq-desi {
  display: inline-block;
  padding: var(--gc-space-2) var(--gc-space-4);
  border-radius: var(--gc-radius-pill);
  background: var(--gc-bg-data);
  color: var(--gc-text);
  font-family: var(--gc-font-ui);
  font-size: var(--gc-t-body-sm);
}

.gcq-list { margin: var(--gc-space-6) 0 0; padding: 0; list-style: none; }
.gcq-res {
  display: flex;
  align-items: center;
  gap: var(--gc-space-4);
  padding: var(--gc-space-5) var(--gc-space-6);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  background: var(--gc-bg-surface);
  transition: box-shadow var(--gc-dur) var(--gc-ease), border-color var(--gc-dur) var(--gc-ease);
}
.gcq-res + .gcq-res { margin-top: var(--gc-space-3); }
.gcq-res:hover { border-color: var(--gc-line-strong); box-shadow: var(--gc-shadow-sm); }
.gcq-res-s { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-family: var(--gc-font-ui); font-weight: var(--gc-weight-bold); color: var(--gc-text-strong); }
.gcq-res-d { flex: 0 0 auto; color: var(--gc-text-muted); font-size: var(--gc-t-body-sm); }
.gcq-res-p {
  flex: 0 0 auto;
  min-width: 8.5rem;
  text-align: end;
  font-family: var(--gc-font-ui);
  font-weight: var(--gc-weight-bold);
  font-size: var(--gc-t-h4);
  color: var(--gc-text-strong);
}
.gcq-res-p i {
  display: block;
  font-style: normal;
  font-family: var(--gc-font-label);
  font-size: var(--gc-t-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
  color: var(--gc-text-muted);
}

/* Status is never colour alone — every one of these carries its icon. */
.gcq-ok, .gcq-warn-h { display: flex; align-items: center; gap: var(--gc-space-2); font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); }
.gcq-ok { margin: var(--gc-space-4) 0 0; color: var(--gc-ok); }
.gcq-warn-h { color: var(--gc-warn); font-weight: var(--gc-weight-bold); }
.gcq-ok svg, .gcq-warn-h svg { width: var(--gc-space-4); height: var(--gc-space-4); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.gcq-warn {
  margin: var(--gc-space-4) 0 0;
  padding: var(--gc-space-4) var(--gc-space-5);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  background: var(--gc-bg-signal-soft);
}
.gcq-warn ul { margin: var(--gc-space-2) 0 0; padding-inline-start: var(--gc-space-5); color: var(--gc-text); font-size: var(--gc-t-body-sm); }

.gcq-acts { display: flex; flex-wrap: wrap; gap: var(--gc-space-3); margin-top: var(--gc-space-6); }
/* The indicative notice is not fine print. It qualifies every number above
   it, so it gets a rule down its side to separate it from the ordinary
   footnotes — enough to be read, not enough to shout. */
.gcq-note--flag { margin-top: var(--gc-space-4); padding-inline-start: var(--gc-space-4);
  border-inline-start: 3px solid var(--gc-line-focus); color: var(--gc-text); }

.gcq-excl { margin-top: var(--gc-space-5); color: var(--gc-text-muted); font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); }
.gcq-excl summary { cursor: pointer; }
.gcq-excl ul { margin: var(--gc-space-2) 0 0; padding-inline-start: var(--gc-space-5); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 767px) {
  .gcq-res { flex-wrap: wrap; gap: var(--gc-space-2); }
  .gcq-res-s { flex: 1 1 100%; }
  .gcq-res-p { min-width: 0; margin-inline-start: auto; }
}

/* 375px is the width that decides whether this product works at all: eight
   controls, stacked, with the three dimensions kept three-up so the row still
   reads as one measurement rather than three unrelated numbers. */
@media (max-width: 599px) {
  .gcq-bar { border-radius: var(--gc-radius-lg); }
  .gcq-f, .gcq-f--to, .gcq-f--sm, .gcq-f--side { flex: 1 1 100%; }
  .gcq-f--xs { flex: 1 1 calc(33.333% - var(--gc-space-3)); }
  .gcq-f--half { flex: 1 1 calc(50% - var(--gc-space-3)); }
  .gcq-go { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-btn, .gcq-res { transition-duration: 0ms; }
}

/* The site header is fixed, so scrolling the answer to the top of the viewport
   would slide its first line underneath it. */
.gcq-results { scroll-margin-top: calc(var(--gc-header-height) + var(--gc-space-6)); }

/* ------------------------------------------------- the live chargeable weight

   Measured on the real page: the result renders in a section 500 px below the
   fold, so pressing the one button the product exists for looked like it did
   nothing at all. This line sits inside the dark band, under the strip, and
   changes as the visitor types — the moment the tool stops looking like a form
   and starts looking like arithmetic. */

.gcq-live {
  min-height: var(--gc-space-6);
  margin: var(--gc-space-4) 0 0;
  font-family: var(--gc-font-ui);
  font-size: var(--gc-t-body);
  line-height: 1.5;
  color: var(--gc-text-gold-on-dark);
}
.gcq-live b { color: var(--gc-text-on-dark); font-weight: var(--gc-weight-bold); }
.gcq-live span { color: var(--gc-text-on-dark-muted); }

/* --------------------------------------------------------- choosing a service

   Six near-identical names against six numbers is a list, not a comparison.
   The cheapest and the fastest are marked because they are different rows often
   enough to matter, and because a results screen that does not help someone
   choose has only moved the decision, not made it easier. */

.gcq-res--best { border-color: var(--gc-line-focus); }
.gcq-mark {
  display: inline-block;
  margin-inline-start: var(--gc-space-3);
  padding: 2px var(--gc-space-3);
  border-radius: var(--gc-radius-pill);
  background: var(--gc-bg-sunken);
  color: var(--gc-text);
  font-style: normal;
  font-family: var(--gc-font-label);
  font-size: var(--gc-t-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
  vertical-align: middle;
}
.gcq-mark--cheap { background: var(--gc-action); color: var(--gc-text-on-gold); }

/* ------------------------------------------------------------- the page body

   /go was a hero band and a footer: main measured 505 px and the footer 479.
   A visitor who did not immediately type a size had nothing to read, nothing to
   trust and nowhere to go. These blocks are facts the site already held — how a
   shipment moves, what the price is and is not, and where the arithmetic is
   published. */

.gcp { padding-block: var(--gc-space-16) var(--gc-space-20); }
.gcp-h { margin: 0 0 var(--gc-space-4); font-family: var(--gc-font-display); font-weight: var(--gc-weight-display); font-size: var(--gc-t-h3); line-height: 1.25; color: var(--gc-text-strong); }

.gcp-steps ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--gc-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gcp;
}
.gcp-steps li { counter-increment: gcp; padding-top: var(--gc-space-5); border-top: 2px solid var(--gc-action); }
.gcp-steps li::before {
  content: counter(gcp);
  display: block;
  margin-bottom: var(--gc-space-2);
  font-family: var(--gc-font-display);
  font-size: var(--gc-t-h4);
  color: var(--gc-text-gold);
}
.gcp-steps b { display: block; font-family: var(--gc-font-ui); font-weight: var(--gc-weight-bold); font-size: var(--gc-t-lead); color: var(--gc-text-strong); }
.gcp-steps span { display: block; margin-top: var(--gc-space-2); font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); line-height: 1.6; color: var(--gc-text-muted); }

.gcp-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--gc-space-6);
  margin-top: var(--gc-space-16);
}
.gcp-card { padding: var(--gc-space-8); border: 1px solid var(--gc-line); border-radius: var(--gc-radius-lg); background: var(--gc-bg-raised); }
.gcp-card :is(p, li) { font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); line-height: 1.62; color: var(--gc-text); }
.gcp-card p { margin: 0 0 var(--gc-space-4); }
.gcp-card p:last-child { margin-bottom: 0; }
.gcp-card ul { margin: 0 0 var(--gc-space-4); padding-inline-start: var(--gc-space-5); }
.gcp-card li { margin-bottom: var(--gc-space-2); }
.gcp-note { color: var(--gc-text-muted) !important; }

.gcp-links { margin-top: var(--gc-space-16); padding-top: var(--gc-space-8); border-top: 1px solid var(--gc-line); }
.gcp-links p { margin: 0; font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); color: var(--gc-text-muted); }
.gcp-row { display: flex; flex-wrap: wrap; gap: var(--gc-space-3) var(--gc-space-8); margin-top: var(--gc-space-5) !important; }
.gcp-row a { font-weight: var(--gc-weight-bold); color: var(--gc-text-link); text-decoration: none; }
.gcp-row a:hover { color: var(--gc-text-link-hover); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   T1 · Service landing — the twelve blocks, in the order 01-information-
   architecture.md fixes them. Blocks may be removed, never reordered.

   Block 5 is the proof strip: "real reviews or nothing". We have no real
   reviews, so it is nothing. There is no markup for it and there will be
   none until there is something true to put in it.
   ══════════════════════════════════════════════════════════════════════ */

/* 2 · Value claim — one centred line, and only one. The temptation is to make
   it three; three claims is a brochure and nobody reads a brochure. */
.gcv { padding-block: var(--gc-space-16); text-align: center; }
.gcv p {
  max-width: 30ch;
  margin: 0 auto;
  font-family: var(--gc-font-display);
  font-weight: var(--gc-weight-display);
  font-size: var(--gc-t-h2);
  line-height: 1.25;
  color: var(--gc-text-strong);
}
.gcv em { font-style: italic; color: var(--gc-text-gold); }

/* 3 · Intro and the sticky contents. Below 992px the card stops being sticky
   and becomes a collapsed accordion above the text — a table of contents
   pinned to the side of a phone is just a column of wasted width. */
.gci { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--gc-space-12); padding-bottom: var(--gc-space-16); }
.gci-body :is(p, li) { font-family: var(--gc-font-ui); font-size: var(--gc-t-lead); line-height: 1.62; color: var(--gc-text); }
.gci-body p { margin: 0 0 var(--gc-space-5); max-width: var(--gc-measure); }
.gci-body p:last-child { margin-bottom: 0; }

.gc-toc { position: sticky; top: calc(var(--gc-header-height) + var(--gc-space-6)); align-self: start; padding: var(--gc-space-6); border: 1px solid var(--gc-line); border-radius: var(--gc-radius); }
.gc-toc > b {
  display: block;
  padding-bottom: var(--gc-space-3);
  border-bottom: 1px solid var(--gc-line);
  font-family: var(--gc-font-label);
  font-weight: var(--gc-weight-label);
  font-size: var(--gc-t-label);
  letter-spacing: var(--gc-tracking-label);
  text-transform: uppercase;
  color: var(--gc-text-muted);
}
.gc-toc a {
  display: block;
  padding: var(--gc-space-3) 0 var(--gc-space-3) var(--gc-space-4);
  border-inline-start: 2px solid var(--gc-line);
  font-family: var(--gc-font-ui);
  font-size: var(--gc-t-body-sm);
  line-height: 1.4;
  color: var(--gc-text-muted);
  text-decoration: none;
}
.gc-toc a:hover { color: var(--gc-text); }
.gc-toc a.is-on { border-inline-start-color: var(--gc-action-2); color: var(--gc-text-strong); font-weight: var(--gc-weight-bold); }

/* 4 · The benefit band. Four columns, always four — the shape is the point,
   and a fifth reason is a reason nobody reads. */
.gcbb { background: var(--gc-bg-inverse); color: var(--gc-text-on-inverse); padding-block: var(--gc-space-16); }
.gcbb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: var(--gc-space-10); text-align: center; }
.gcbb svg { width: var(--gc-space-8); height: var(--gc-space-8); margin: 0 auto var(--gc-space-4); fill: none; stroke: var(--gc-text-gold-on-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gcbb b { display: block; font-family: var(--gc-font-ui); font-weight: var(--gc-weight-bold); font-size: var(--gc-t-body); line-height: 1.4; color: var(--gc-text-on-inverse); }
.gcbb span { display: block; margin-top: var(--gc-space-2); font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); line-height: 1.55; color: var(--gc-text-on-inverse-muted); }

/* 7 · Alternating media rows — one per objection. The picture side flips per
   row on desktop; on a phone it is always above the text, whichever side it
   was, because a reader should not have to hunt for the illustration. */
.gcm { padding-bottom: var(--gc-space-16); }
.gcm-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--gc-space-10); align-items: center; margin-top: var(--gc-space-12); }
.gcm-row:first-of-type { margin-top: var(--gc-space-8); }
.gcm-row img { display: block; width: 100%; height: auto; border-radius: var(--gc-radius); }
.gcm-row figure { margin: 0; }
.gcm-row--flip .gcm-txt { order: -1; }
.gcm-txt h2 { margin: 0 0 var(--gc-space-4); font-family: var(--gc-font-display); font-weight: var(--gc-weight-display); font-size: var(--gc-t-h3); line-height: 1.25; color: var(--gc-text-strong); }
.gcm-txt p { margin: 0 0 var(--gc-space-4); max-width: var(--gc-measure); font-family: var(--gc-font-ui); font-size: var(--gc-t-body); line-height: 1.62; color: var(--gc-text); }
.gcm-txt a { font-family: var(--gc-font-ui); font-weight: var(--gc-weight-bold); color: var(--gc-text-link); text-decoration: none; }
.gcm-txt a:hover { color: var(--gc-text-link-hover); text-decoration: underline; }

/* 9 · The trust aside. Not a testimonial — a set of facts anyone can check
   against a registry. */
.gct { padding: var(--gc-space-10); border-inline-start: 3px solid var(--gc-action); background: var(--gc-bg-raised); border-radius: 0 var(--gc-radius) var(--gc-radius) 0; }
.gct p { margin: 0 0 var(--gc-space-4); max-width: var(--gc-measure); font-family: var(--gc-font-ui); font-size: var(--gc-t-body); line-height: 1.62; color: var(--gc-text); }
.gct p:last-child { margin-bottom: 0; }
.gct b { color: var(--gc-text-strong); }

/* 10 · FAQ. Native <details>, all collapsed on load. */
.gcf { padding-block: var(--gc-space-16); }
.gcf-list { max-width: var(--gc-measure); margin-top: var(--gc-space-8); border-top: 1px solid var(--gc-line); }
.gcf-q { border-bottom: 1px solid var(--gc-line); }
.gcf-q > summary { display: flex; gap: var(--gc-space-4); align-items: baseline; padding: var(--gc-space-5) 0; cursor: pointer; list-style: none; font-family: var(--gc-font-ui); font-weight: var(--gc-weight-bold); font-size: var(--gc-t-body); line-height: 1.45; color: var(--gc-text-strong); }
.gcf-q > summary::-webkit-details-marker { display: none; }
.gcf-q > summary::after { content: '+'; margin-inline-start: auto; font-family: var(--gc-font-mono); color: var(--gc-text-muted); }
.gcf-q[open] > summary::after { content: '\2212'; }
.gcf-q > summary:focus-visible { outline: 2px solid var(--gc-line-focus); outline-offset: 3px; }
.gcf-a { padding-bottom: var(--gc-space-6); }
.gcf-a :is(p, li) { font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); line-height: 1.62; color: var(--gc-text); }
.gcf-a p { margin: 0 0 var(--gc-space-3); }
.gcf-a ul { margin: 0; padding-inline-start: var(--gc-space-5); }
.gcf-a a { color: var(--gc-text-link); }

/* 11 · CTA band. One line, one button. */
.gcc { background: var(--gc-bg-accent-soft); padding-block: var(--gc-space-16); text-align: center; }
.gcc h2 { margin: 0 0 var(--gc-space-5); font-family: var(--gc-font-display); font-weight: var(--gc-weight-display); font-size: var(--gc-t-h2); line-height: 1.25; color: var(--gc-text-strong); }
.gcc p { max-width: var(--gc-measure); margin: 0 auto var(--gc-space-8); font-family: var(--gc-font-ui); font-size: var(--gc-t-body); line-height: 1.6; color: var(--gc-text); }

@media (max-width: 991px) {
  .gci { grid-template-columns: minmax(0, 1fr); gap: var(--gc-space-8); }
  .gc-toc { position: static; order: -1; }
}
@media (max-width: 767px) {
  .gcm-row--flip .gcm-txt { order: 0; }
  .gcv p { font-size: var(--gc-t-h3); }
}

/* A surcharge that also sets a floor under the chargeable weight. The fee is
   the small half of it — 48 kg of freight instead of six is the other half,
   and it used to be invisible. */
.gcq-floor { display: block; margin-top: var(--gc-space-2); font-family: var(--gc-font-ui); font-size: var(--gc-t-body-sm); color: var(--gc-warn-ink); }
.gcq-floor b { font-weight: var(--gc-weight-bold); }
.gcq-floornote { margin: var(--gc-space-4) 0 0; font-family: var(--gc-font-ui); font-size: var(--gc-t-caption); line-height: 1.55; color: var(--gc-text-muted); }

/* Measured at 375px in a real browser: the forward links — "Work it out
   yourself", "More about the company", the three reference links — came out 19
   to 24 px tall. WCAG 2.5.8 asks for 24, and a 19 px target under a thumb is a
   link that gets missed rather than followed.

   Scoped to links that are the whole of their paragraph, so padding cannot
   collide with the line above in running prose. */
:is(.gcm-txt, .gct, .gcf-a, .gcp-card) p > a:only-child,
.gcp-row a {
  display: inline-block;
  padding-block: var(--gc-space-2);
}

/* ══════════════════════════════════════════════════════════════════════
   COLOUR AND RHYTHM

   Measured before touching anything: seven of the page's ten sections had
   no background at all. The page ran near-black, white, white, navy,
   white, white, white, white, cream — which is why it read as flat no
   matter how good the content was. A long page needs a beat.

   Six grounds, all of them existing role tokens, none of them semantic:
   the status palette is not borrowed for decoration, because a green
   section is a claim and a warm one is not.

     cinema   the hero band
     cream    the value claim, how it works
     surface  the intro, the media rows, the trust aside
     inverse  the benefit band
     data     the questions
     accent   the closing call
   ══════════════════════════════════════════════════════════════════════ */

.gc-tint { padding-block: var(--gc-space-4); }
.gc-tint--cream { background: var(--gc-bg-page); }
.gc-tint--cool  { background: var(--gc-bg-data); }
.gc-tint--none  { background: var(--gc-bg-surface); }

/* Section spacing lives on the tint wrapper now, so the colour runs the full
   width of the window while the words stay inside the shell. */
.gc-tint .gcv,
.gc-tint .gcp,
.gc-tint .gcf { padding-block: var(--gc-space-12); }

/* ---------------------------------------------------------- the step numbers
   They were a small gold numeral above a rule. A number is the one thing on
   this page that earns being large and round: it is the only block the
   information architecture allows to be numbered at all. */
.gcp-steps li { position: relative; padding-top: var(--gc-space-4); border-top: 0; }
.gcp-steps li::before {
  content: counter(gcp);
  display: grid;
  place-items: center;
  width: var(--gc-space-10);
  height: var(--gc-space-10);
  margin-bottom: var(--gc-space-4);
  border-radius: var(--gc-radius-circle);
  background: var(--gc-action);
  color: var(--gc-text-on-gold);
  font-family: var(--gc-font-display);
  font-weight: var(--gc-weight-display);
  font-size: var(--gc-t-h4);
  line-height: 1;
}

/* ------------------------------------------------------ the two price cards
   One cool, one warm: what the price is, and what it is not. The pair reads
   as a pair the moment they stop being the same grey. */
.gcp-two .gcp-card:first-child { background: var(--gc-bg-data); border-color: var(--gc-line-data); }
.gcp-two .gcp-card:last-child  { background: var(--gc-bg-accent-soft); border-color: var(--gc-action-soft); }

/* -------------------------------------------------- the media row's colour
   An offset block behind the photograph. The oldest trick in print layout and
   still the cheapest way to put colour on a page without inventing a palette:
   the picture gains a shadow that is a shape rather than a blur. */
.gcm-row figure { position: relative; }
.gcm-row figure::before {
  content: '';
  position: absolute;
  inset: var(--gc-space-6) calc(var(--gc-space-6) * -1) calc(var(--gc-space-6) * -1) var(--gc-space-6);
  border-radius: var(--gc-radius);
  background: var(--gc-bg-accent-soft);
  z-index: -1;
}
.gcm-row--flip figure::before {
  inset: var(--gc-space-6) var(--gc-space-6) calc(var(--gc-space-6) * -1) calc(var(--gc-space-6) * -1);
  background: var(--gc-bg-data);
}
.gcm-row figure { isolation: isolate; }
.gcm-row img { position: relative; z-index: 1; }

/* ------------------------------------------------------- the cheapest row
   A gold outline was doing the whole job. A tinted ground says it from across
   the room, which is the distance a price comparison is read from. */
.gcq-res--best { background: var(--gc-bg-accent-soft); }

/* ------------------------------------------------------ the benefit band
   Gold rules over each column: four short strokes that give the band a
   structure the eye can count, instead of four paragraphs floating on navy. */
.gcbb-grid > div { padding-top: var(--gc-space-6); border-top: 2px solid var(--gc-action); }

/* The tab rail sat as four ghost outlines on black. The selected one is the
   card it belongs to, so it takes the card's ground and stops looking like a
   button that happens to be lighter. */
.gcq-tab.is-on { box-shadow: none; }

@media (max-width: 767px) {
  .gcm-row figure::before,
  .gcm-row--flip figure::before { inset: var(--gc-space-4) calc(var(--gc-space-4) * -1) calc(var(--gc-space-4) * -1) var(--gc-space-4); }
}

/* ------------------------------------------------ filling two dead corners
   Both found by looking rather than by measuring: the intro left a hole under
   the prose because the contents card is taller than two paragraphs, and the
   questions used the left half of a full-width section. */

.gci-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gc-space-8);
  margin: var(--gc-space-8) 0 0;
  padding: var(--gc-space-6) 0 0;
  border-top: 1px solid var(--gc-line);
  list-style: none;
}
.gci-facts b {
  display: block;
  font-family: var(--gc-font-display);
  font-weight: var(--gc-weight-display);
  font-size: var(--gc-t-h2);
  line-height: 1;
  color: var(--gc-text-gold);
}
.gci-facts span {
  display: block;
  margin-top: var(--gc-space-2);
  max-width: 18ch;
  font-family: var(--gc-font-ui);
  font-size: var(--gc-t-body-sm);
  line-height: 1.45;
  color: var(--gc-text-muted);
}

/* The heading sits beside the questions rather than above them: it fills the
   width, and a reader scrolling the list keeps the question it answers in
   view. */
.gcf { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--gc-space-12); align-items: start; }
.gcf-head { position: sticky; top: calc(var(--gc-header-height) + var(--gc-space-6)); }
.gcf-head .gcp-h { margin: 0; }
.gcf-list { max-width: none; margin-top: 0; }

@media (max-width: 991px) {
  .gcf { grid-template-columns: minmax(0, 1fr); gap: var(--gc-space-6); }
  .gcf-head { position: static; }
}

/* ══════════════════════════════════════════════════════════════════════
   MORE COLOUR — second pass

   The grounds gave the page a beat. These give the components inside them
   somewhere for the eye to land. Still role tokens only, still nothing
   borrowed from the status palette.
   ══════════════════════════════════════════════════════════════════════ */

/* The hero was a flat black slab. Navy falling to near-black gives it depth
   without a photograph, and keeps working the day one is dropped behind it —
   the image sits above this, so the gradient simply stops being visible. */
.gc-band { background: linear-gradient(160deg, var(--gc-bg-inverse) 0%, var(--gc-bg-cinema) 62%); }
.gc-band--photo { background: var(--gc-bg-cinema); }

/* The quote card is the one thing on the page that has to be found in the first
   second. A gold edge along its top does that with three pixels, and ties the
   card to the button inside it. */
.gcq-bar { border-top: 3px solid var(--gc-action); }
.gcq-tab.is-on { border-top: 3px solid var(--gc-action); padding-top: calc(var(--gc-space-3) - 3px); }

/* Cheapest is gold, fastest is cool: two answers to two different questions,
   and the pair reads at a glance instead of one marked row and one unmarked. */
.gcq-res--fast { background: var(--gc-bg-data); }
.gcq-mark--fast { background: var(--gc-info); color: var(--gc-action-2-ink); }

/* The benefit icons sat as thin gold strokes on navy and read as nothing from a
   distance. A disc gives each one a body. */
.gcbb-grid > div { padding-top: var(--gc-space-6); border-top: 2px solid var(--gc-action); }
.gcbb svg {
  box-sizing: content-box;
  width: var(--gc-space-6);
  height: var(--gc-space-6);
  padding: var(--gc-space-4);
  border: 1px solid var(--gc-bg-on-inverse-line);
  border-radius: var(--gc-radius-circle);
  background: var(--gc-bg-on-inverse-soft);
}

/* The value claim is one sentence in a wide cream band. A soft gold wash behind
   it stops that band reading as a gap between two sections. */
.gc-tint--cream:first-of-type {
  background:
    radial-gradient(60% 120% at 50% 0%, var(--gc-bg-accent-soft) 0%, transparent 70%),
    var(--gc-bg-page);
}

/* Where two light grounds meet, a hairline keeps the change deliberate rather
   than looking like a rendering artefact. */
.gc-tint + .gc-tint,
.gc-tint--none + .gc-tint,
.gc-tint + .gc-tint--none { border-top: 1px solid var(--gc-line); }

/* The button carries a figure, not just a verb. An anchor before any
   commitment: "Get quote · Documents from €21.50" says an answer is coming and
   roughly how big it is. Computed from the tariff, so it cannot go stale. */
.gcq-go i { font-style: normal; font-weight: var(--gc-weight-body); opacity: .85; }
@media (max-width: 991px) { .gcq-go i { display: none; } }

/* Incoterms 2020, said once. A quote silent on who pays the duty is ambiguous,
   and a paragraph saying so is not the same as the term everyone in freight
   already knows. */
.gcq-incoterm {
  margin: var(--gc-space-5) 0 0;
  padding: var(--gc-space-4) var(--gc-space-5);
  border-inline-start: 3px solid var(--gc-action-2);
  background: var(--gc-bg-data);
  font-family: var(--gc-font-ui);
  font-size: var(--gc-t-body-sm);
  line-height: 1.55;
  color: var(--gc-text);
}
.gcq-incoterm b { color: var(--gc-text-strong); }

/* ------------------------------------------------------- touch and phones

   Three fixes, all measured on a 390×844 phone rather than a narrow window:
   a desktop pointer lands where it is aimed, a finger does not.

   The country trigger is the first control on the route and was a bare line
   of text — comfortably under the 44px minimum a thumb needs. The panel it
   opens was a fixed 280px, which is wider than the gap it has to sit in on a
   375px screen, so it pushed the page sideways. And its search box was 15px:
   iOS zooms the whole page in whenever a field under 16px takes focus, which
   throws away the layout the moment somebody starts to type.

   pointer:coarse, not a width — a narrow window on a laptop still has a
   mouse and should keep the tighter line. */
@media (pointer: coarse) {
  .gcq-side { min-height: 44px; align-items: center; }
  .gcq-origin__q { font-size: 16px; }
}

/* touch-type:start — generated by tools/touch-type.mjs, do not edit by hand */
/* iOS zooms the page when a focused control's text is under 16px and does not
   zoom back. max(16px, 1em) raises only what is below the floor: a control
   designed larger keeps its size, and nothing has to be listed by name — which
   matters, because the worst offenders inherit their size rather than being
   given one. Checkboxes and radios are left alone; they have no text. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: max(16px, 1em) !important; }
}
/* touch-type:end */