/* ==========================================================================
   MULTIIS — base.css
   The foundation every page is built on: fonts, design tokens, the reset,
   layout primitives, the type scale, buttons, form controls and alerts.

   Nothing in this file knows about a specific page or section. Anything that
   does — the header, the footer, the homepage blocks, the booking flow — lives
   in site.css, which loads after this one. The single-class utilities
   (.mb-0, .mt-2, .hide) sit at the very foot of site.css: they are overrides,
   so they have to come after everything they override.

   Load order matters: base.css first, then site.css. Swapping them, or hoisting
   the utilities up here, changes the rendering.

   ── The tokens ────────────────────────────────────────────────────────────
   Colour     --ink, --navy-900/800/700/600/100   navy scale, dark to light
              --red, --red-700, --red-100         the accent, from the logo
              --accent                            light steel blue, dark surfaces only
              --paper, --paper-2, --paper-3       warm page grounds
              --line, --line-dark                 hairlines on light / dark
              --muted, --muted-dark               secondary text on light / dark
   Type       --display  DM Sans       headings, buttons, figures
              --body     DM Sans       running text
              --mono     IBM Plex Mono data only: PIN codes, dockets, amounts,
                                       timestamps, and small uppercase labels
   Space      --gut  page gutter   --max  content width   --sec  section rhythm
   Shape      --radius, --shadow

   DM Sans is geometric with a large x-height and takes tight tracking well, so
   the display sizes below run at -0.02em/-0.03em. Re-tune those if the display
   face is ever changed — a humanist face will fall apart at this tracking.
   ========================================================================== */

/* --- 0. Fonts ------------------------------------------------------------
   Self-hosted rather than pulled from Google Fonts: one less third party, no
   render-blocking cross-origin request, and the site keeps working on networks
   where fonts.googleapis.com is slow or blocked. Latin subset only.

   DM Sans carries everything that used to be split between Poppins (display)
   and Inter (body). It is a geometric sans with a double-storey "a" and a
   single-storey "g", and unlike Poppins it takes tight tracking, which is what
   the large headings below rely on. Three weights only — 400, 500, 700 — so the
   whole type system costs ~43 KB.

   IBM Plex Mono stays for data: PIN codes, docket numbers, amounts, timestamps
   and the small uppercase labels. It is what makes the waybill motif read.

   Files came from the @fontsource packages; to add a weight, drop the matching
   woff2 into assets/fonts/ and add a block here.
   -------------------------------------------------------------------------- */

@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-sans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/dm-sans-500.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/dm-sans-700.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); }

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Brand — navy carries every dark surface and all body text. There is no
     black anywhere in the palette: --ink is a navy, not a near-black. */
  --ink:        #0B1B33;
  --navy-900:   #0B1B33;
  --navy-800:   #12294C;
  --navy-700:   #1A3868;
  --navy-600:   #2359A8;
  --navy-100:   #DDE6F5;
  --accent:     #7FB0EA;
  --red:        #CE1126;
  --red-700:    #A50E1F;
  --red-100:    #FBE4E7;

  /* Neutrals — cool and near-white, not the old warm paper. */
  --paper:      #FFFFFF;
  --paper-2:    #F3F5F8;
  --paper-3:    #E7EBF1;
  --line:       #E1E6ED;
  --line-dark:  rgba(255,255,255,.14);
  --muted:      #5C6879;
  --muted-dark: #9BAAC4;

  /* Type */
  --display: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Space */
  --gut: clamp(1.25rem, 4vw, 3rem);
  --max: 1240px;
  --sec: clamp(3.5rem, 8vw, 7rem);

  /* Shape — softened from the old 3px so cards and buttons read modern.
     --radius-lg is for photography and large panels. */
  --radius:    10px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(11,27,51,.05), 0 14px 38px -14px rgba(11,27,51,.20);
}

/* --- 2. Reset ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.06; letter-spacing: -0.025em; margin: 0; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--red); color: #fff; padding: .7rem 1.1rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* --- 3. Layout ---------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.sec  { padding-block: var(--sec); }
.sec--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.dark { background: var(--navy-900); color: #F1F4F9; }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.tint { background: var(--paper-2); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
@media (min-width: 800px) {
  .g-2 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(3, 1fr); }
  .g-4 { grid-template-columns: repeat(4, 1fr); }
  .g-side { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
  .g-side-r { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
}

/* --- 4. Type ------------------------------------------------------------ */

.eyebrow {
  font-family: var(--mono);
  font-size: .705rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--red); flex: none;
}
.dark .eyebrow { color: var(--accent); }
.dark .eyebrow::before { background: var(--accent); }

/* The display sizes run large and tight, as in the reference layout. DM Sans
   holds together at -0.03em; do not carry these values to another face. */
.h-xl { font-size: clamp(2.7rem, 6vw, 4.4rem); letter-spacing: -0.032em; }
.h-lg { font-size: clamp(2.25rem, 5vw, 3.8rem); letter-spacing: -0.03em; }
.h-md { font-size: clamp(1.7rem, 3.1vw, 2.55rem); letter-spacing: -0.024em; }
.h-sm { font-size: 1.22rem; letter-spacing: -0.018em; }

.lede { font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--muted); max-width: 60ch; line-height: 1.62; }
.dark .lede { color: var(--muted-dark); }
.small { font-size: .875rem; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dark .muted { color: var(--muted-dark); }
.mw-60 { max-width: 60ch; }
.mw-46 { max-width: 46ch; }

.sec-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sec-head--split { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 900px) { .sec-head--split { grid-template-columns: minmax(0,1fr) minmax(0,26rem); } }

/* --- 5. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .88rem 1.5rem;
  font-family: var(--display); font-weight: 500; font-size: .95rem; letter-spacing: -0.012em;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; background: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn .ico { transition: transform .2s ease; }
.btn:hover .ico { transform: translateX(3px); }
.btn--red    { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-700); }
.btn--navy  { background: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-700); }
.btn--ghost  { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: rgba(8,17,31,.04); }
.dark .btn--ghost, .foot .btn--ghost { border-color: var(--line-dark); color: #fff; }
.dark .btn--ghost:hover, .foot .btn--ghost:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); }
.btn--wide { width: 100%; justify-content: center; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 500; font-family: var(--display); font-size: .93rem; letter-spacing: -0.012em;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  color: var(--red);
}
.link-arrow .ico { transition: transform .2s ease; }
.link-arrow:hover .ico { transform: translateX(4px); }
.dark .link-arrow { color: var(--accent); }

/* --- 9. Forms ----------------------------------------------------------- */

.field { display: block; margin-bottom: .9rem; }
.field > span,
.lbl {
  display: block;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .38rem;
}
.input, .select, .textarea {
  width: 100%; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .9rem;
  font-size: .97rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: #C3CBD6; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(29,78,155,.14);
}
.input::placeholder, .textarea::placeholder { color: #98A0AC; }
.textarea { min-height: 110px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%235F6B64' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.2rem;
}
.input.mono { font-family: var(--mono); letter-spacing: .06em; }

.row { display: grid; gap: .75rem; }
.row-2 { grid-template-columns: 1fr 1fr; }
.row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) { .row-2 { grid-template-columns: 1fr; } }

.hint { font-size: .78rem; color: var(--muted); margin-top: .35rem; }

.check {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.check:hover { border-color: #C3CBD6; }
.check input { margin-top: .28rem; accent-color: var(--navy-600); flex: none; }
.check b { display: block; font-size: .92rem; font-weight: 600; }
.check span { font-size: .78rem; color: var(--muted); }
.check:has(input:checked) { border-color: var(--navy-600); background: #F1F5FB; }

/* --- 10. Alerts --------------------------------------------------------- */

.alert {
  border-left: 3px solid var(--red); background: var(--red-100);
  padding: .85rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 1.25rem;
  font-size: .92rem;
}
.alert ul li { margin: .15rem 0; }
.alert--ok { border-color: var(--navy-600); background: #E8EFF9; }
.alert--warn { border-color: #C98A16; background: #FBF2DF; }