/* ════════════════════════════════════════════════════════════════════════
   SHIP247 · MARKETING LAYER
   ────────────────────────────────────────────────────────────────────────
   Component layer for the server-rendered public pages: /, /services,
   /chartering, /contact.

   Why this file exists
   ────────────────────
   Those pages were built with layout in inline style="" attributes. Inline
   styles cannot be reached by a media query, so the only way to make them
   respond was attribute selectors keyed to the exact style string —
   [style*="1.2fr 260px"] and friends — which live in the brand CSS and
   break the moment the markup is edited. One of them already matched
   nothing. Layout belongs in classes; this is that layer.

   Depends on ship247-option-c.css for tokens. Loads after it.
   Scoped entirely to .mk-* so the dashboards cannot be affected.

   Breakpoints:  480 · 768 · 1024 · 1280
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Fluid page gutter — 20px on a phone, 48px on a desktop, no jumps. */
  --mk-gutter: clamp(20px, 4vw, 48px);
  --mk-max: 1440px;

  /* Vertical rhythm. Sections breathe more as the viewport grows. */
  --mk-section-y: clamp(48px, 7vw, 88px);
  --mk-section-y-lg: clamp(64px, 9vw, 112px);

  /* Type scale — fluid, so there is no separate mobile scale to maintain. */
  --mk-display: clamp(40px, 9vw, 104px);
  --mk-display-sm: clamp(30px, 5.4vw, 60px);
  --mk-h2: clamp(24px, 3.4vw, 40px);
  --mk-h3: clamp(19px, 2.2vw, 24px);
  --mk-lead: clamp(16px, 1.6vw, 18px);
  --mk-body: clamp(15px, 1.4vw, 16px);
  --mk-label: clamp(11px, 1.1vw, 12px);
  --mk-meta: clamp(10px, 1vw, 11px);

  --mk-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

.mk {
  background: var(--black);
  color: var(--bone);
  font-family: var(--sans);
  /* Nothing in this layer may cause a sideways scroll. */
  overflow-x: hidden;
}
.mk *,
.mk *::before,
.mk *::after { box-sizing: border-box; }

.mk img { max-width: 100%; height: auto; }

/* Skip link — first focusable element on every page. */
.mk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 14px 20px; background: var(--accent); color: var(--offwhite);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; text-decoration: none;
}
.mk-skip:focus { left: 0; }

/* One visible focus treatment for the whole marketing surface. */
.mk :focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.mk-shell { padding-inline: var(--mk-gutter); }
.mk-section { padding-block: var(--mk-section-y); }
.mk-section--lg { padding-block: var(--mk-section-y-lg); }
.mk-section--rule { border-bottom: 1px solid var(--rule); }
.mk-measure { max-width: 68ch; }

/* ── Type ─────────────────────────────────────────────────────────────── */

.mk-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: var(--mk-label); font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent-text);
}
.mk-eyebrow::before {
  content: ""; width: 30px; height: 1px; background: var(--accent); flex: none;
}
.mk-eyebrow--center { justify-content: center; }
.mk-eyebrow--center::after {
  content: ""; width: 30px; height: 1px; background: var(--accent); flex: none;
}

.mk-label {
  font-family: var(--mono); font-size: var(--mk-label); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent-text);
}
.mk-meta {
  font-family: var(--mono); font-size: var(--mk-meta);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fog);
}

.mk-display {
  font-family: var(--mono); font-weight: 800;
  font-size: var(--mk-display); line-height: 0.94; letter-spacing: -0.04em;
  text-transform: uppercase; color: var(--bone);
  margin: 0; text-wrap: balance;
}
.mk-h2 {
  font-family: var(--mono); font-weight: 800;
  font-size: var(--mk-h2); line-height: 1.02; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--bone);
  margin: 0; text-wrap: balance;
}
.mk-h3 {
  font-family: var(--mono); font-weight: 700;
  font-size: var(--mk-h3); line-height: 1.15; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--bone);
  margin: 0; text-wrap: balance;
}
.mk-lead {
  font-size: var(--mk-lead); line-height: 1.7; color: var(--smoke);
  margin: 0; max-width: 62ch;
}
.mk-body {
  font-size: var(--mk-body); line-height: 1.7; color: var(--smoke);
  margin: 0; max-width: 60ch;
}

/* Section heading with the rule that runs to the edge. */
.mk-sectionhead {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.mk-sectionhead::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* Glow wash used behind hero blocks. Decorative only. */
.mk-glow { position: relative; overflow: hidden; isolation: isolate; }
.mk-glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 58% 62% at 18% 62%, rgba(139,24,24,0.14), transparent 62%);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; border-radius: 0; cursor: pointer;
  border: 1px solid var(--rule); background: transparent; color: var(--bone);
  transition: background 160ms var(--mk-ease), border-color 160ms var(--mk-ease),
              color 160ms var(--mk-ease), transform 160ms var(--mk-ease);
}
.mk-btn:hover { border-color: var(--smoke); transform: translateY(-1px); }
.mk-btn:active { transform: translateY(0); }

.mk-btn--primary {
  background: var(--accent); border-color: var(--accent); color: var(--offwhite);
}
.mk-btn--primary:hover { background: var(--hivis-dk); border-color: var(--hivis-dk); }

.mk-btn--sm { min-height: 40px; padding: 0 18px; font-size: 11px; letter-spacing: 0.2em; }
.mk-btn--block { width: 100%; }

/* ── Nav ──────────────────────────────────────────────────────────────── */

.mk-nav {
  position: relative;
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  padding: 16px var(--mk-gutter);
  background: var(--black); border-bottom: 1px solid var(--rule);
}
.mk-nav__brand { text-decoration: none; flex: none; }

.mk-nav__links {
  display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.mk-nav__link {
  padding: 6px 0; text-decoration: none; color: var(--text-dim);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 160ms var(--mk-ease), border-color 160ms var(--mk-ease);
}
.mk-nav__link:hover { color: var(--bone); border-bottom-color: var(--rule); }
.mk-nav__link[aria-current="page"] { color: var(--bone); border-bottom-color: var(--accent); }

.mk-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mk-nav__user {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--smoke); white-space: nowrap;
}

/* Mobile disclosure. CSS-only — a checkbox drives it, so navigation does not
   depend on JavaScript loading or succeeding. */
.mk-nav__toggle { position: absolute; opacity: 0; pointer-events: none; }
.mk-nav__burger {
  display: none; margin-left: auto;
  width: 48px; height: 48px; flex: none;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule); background: transparent; cursor: pointer;
}
.mk-nav__burger span {
  position: relative; display: block; width: 18px; height: 1.5px;
  background: var(--bone);
  transition: background 160ms var(--mk-ease);
}
.mk-nav__burger span::before,
.mk-nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px;
  background: var(--bone);
  transition: transform 220ms var(--mk-ease), top 220ms var(--mk-ease);
}
.mk-nav__burger span::before { top: -6px; }
.mk-nav__burger span::after { top: 6px; }

.mk-nav__toggle:checked ~ .mk-nav__burger span { background: transparent; }
.mk-nav__toggle:checked ~ .mk-nav__burger span::before { top: 0; transform: rotate(45deg); }
.mk-nav__toggle:checked ~ .mk-nav__burger span::after  { top: 0; transform: rotate(-45deg); }
.mk-nav__toggle:focus-visible ~ .mk-nav__burger { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.mk-hero {
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(560px, 84vh, 820px);
  background: var(--black); border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.mk-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  filter: grayscale(1) contrast(1.15) brightness(0.5);
}
.mk-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.68) 40%, rgba(0,0,0,0.9) 100%);
}
.mk-hero__body {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 24px; text-align: center;
  padding: clamp(48px, 8vw, 88px) var(--mk-gutter) clamp(24px, 4vw, 40px);
}
.mk-hero__foot { position: relative; z-index: 2; }

/* ── Bands and splits ─────────────────────────────────────────────────── */

/* A figure + explanation band. Stacks below 860px. */
.mk-band {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.mk-band__fig { display: flex; align-items: baseline; gap: 18px; }
.mk-band__num {
  font-family: var(--mono); font-weight: 800;
  font-size: clamp(44px, 6.4vw, 88px); line-height: 1; letter-spacing: -0.04em;
  color: var(--bone);
}
.mk-band__cap {
  font-family: var(--mono); font-size: var(--mk-meta); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--smoke);
  line-height: 1.5;
}
.mk-band__text {
  font-size: var(--mk-lead); line-height: 1.7; color: var(--smoke);
  max-width: 62ch; padding-left: clamp(24px, 4vw, 56px);
  border-left: 1px solid var(--rule);
}

/* Generic 2-up split that collapses cleanly. */
.mk-split { display: grid; grid-template-columns: 1fr 1fr; }
.mk-split > * + * { border-left: 1px solid var(--rule); }
.mk-split--form { grid-template-columns: 1fr 1.15fr; }

/* Auto-fit card grid with even columns — the previous auto-fit minmax
   produced unequal tracks, which is what made "LAND FREIGHT" wrap while its
   neighbours did not. */
.mk-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.mk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mk-grid__cell {
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 40px);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Service rows (home) ──────────────────────────────────────────────── */

.mk-svc { display: grid; grid-template-columns: 0.9fr 1.1fr; border-bottom: 1px solid var(--rule); }
.mk-svc__visual {
  position: relative; overflow: hidden; min-height: clamp(320px, 40vw, 460px);
  background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
  border-right: 1px solid var(--rule);
}
.mk-svc--flip .mk-svc__visual { order: 2; border-right: 0; border-left: 1px solid var(--rule); }
.mk-svc--flip .mk-svc__content { order: 1; }

.mk-svc__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(0.7);
}
.mk-svc__photo + .mk-svc__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
}

/* Type panel used where we have no photograph of our own. The mode word and
   the numeral are one centred lockup rather than a numeral in the corner and
   a hole where a statistic used to sit. */
.mk-svc__panel { position: absolute; inset: 0; display: grid; place-items: center; }
.mk-svc__panel::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 62% 42%, rgba(139,24,24,0.14), transparent 58%);
}
.mk-svc__panel::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 100%);
}
.mk-svc--flip .mk-svc__panel::before {
  background: radial-gradient(ellipse at 38% 42%, rgba(139,24,24,0.14), transparent 58%);
}
.mk-svc__lockup { position: relative; text-align: center; padding: 24px; }
.mk-svc__numeral {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(88px, 13vw, 190px); line-height: 0.8; letter-spacing: -0.04em;
  color: rgba(229, 226, 217, 0.22);
}
.mk-svc__word {
  display: block; margin-top: -0.06em;
  font-family: var(--mono); font-weight: 800;
  font-size: clamp(38px, 6.4vw, 92px); line-height: 1; letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(229,226,217,0.34);
  user-select: none;
}
.mk-svc__ports {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px clamp(16px, 2vw, 22px);
  background: rgba(0,0,0,0.9); border-top: 1px solid var(--accent);
  font-family: var(--mono); font-size: var(--mk-meta);
  letter-spacing: 0.2em; text-transform: uppercase;
}
.mk-svc__content {
  display: flex; flex-direction: column; justify-content: center;
  gap: 20px; padding: clamp(36px, 5vw, 64px) var(--mk-gutter);
  background: var(--black);
}
.mk-svc__stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 48px); }
.mk-svc__stat-v {
  font-family: var(--mono); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1; letter-spacing: -0.02em; color: var(--bone); margin-bottom: 8px;
}

/* ── Ticker ───────────────────────────────────────────────────────────── */

.mk-ticker {
  display: flex; align-items: center; gap: clamp(24px, 3vw, 48px);
  padding: 14px var(--mk-gutter);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Fade the right edge so it reads as scrollable rather than cut off. */
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
}
.mk-ticker::-webkit-scrollbar { display: none; }
.mk-ticker__lane { color: var(--text-dim); text-decoration: none; flex: none; }
.mk-ticker__lane:hover { color: var(--bone); }

/* ── Forms ────────────────────────────────────────────────────────────── */

.mk-field { display: flex; flex-direction: column; }
.mk-field + .mk-field, .mk-row + .mk-field, .mk-field + .mk-row, .mk-row + .mk-row { margin-top: 22px; }

.mk-flabel {
  margin-bottom: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--smoke);
}
.mk-req { color: var(--accent-text); }

.mk-input, .mk-select, .mk-textarea {
  width: 100%; min-height: 48px; padding: 13px 14px;
  background: var(--black); border: 1px solid var(--rule); border-radius: 0;
  color: var(--bone); font-family: var(--sans); font-size: 16px;
  color-scheme: dark;
  transition: border-color 160ms var(--mk-ease), box-shadow 160ms var(--mk-ease);
}
.mk-input::placeholder, .mk-textarea::placeholder { color: var(--fog); }
.mk-input:focus, .mk-select:focus, .mk-textarea:focus {
  outline: 0; border-color: var(--accent-text);
  box-shadow: 0 0 0 1px var(--accent-text);
}
.mk-input[aria-invalid="true"], .mk-textarea[aria-invalid="true"] { border-color: #C05A5A; }
.mk-textarea { min-height: 120px; resize: vertical; }

.mk-row { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }

.mk-err { margin: 7px 0 0; font-size: 13px; color: #C05A5A; }

.mk-note {
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  padding: 22px 24px;
}
.mk-note--ok { background: rgba(139,24,24,0.07); }
.mk-note--err { border-color: #C05A5A; border-left-color: #C05A5A; }

/* Sticky companion column beside a form — turns dead width into help. */
.mk-aside { padding: clamp(36px, 5vw, 72px) var(--mk-gutter); }
.mk-aside__inner { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 32px; }
.mk-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.mk-steps li {
  counter-increment: s; position: relative;
  padding: 0 0 22px 44px;
  font-size: var(--mk-body); line-height: 1.6; color: var(--smoke);
}
.mk-steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--accent-text);
}
.mk-steps li::after {
  content: ""; position: absolute; left: 13px; top: 20px; bottom: 4px; width: 1px;
  background: var(--rule);
}
.mk-steps li:last-child { padding-bottom: 0; }
.mk-steps li:last-child::after { display: none; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.mk-footer { background: var(--black); border-top: 1px solid var(--rule); }
.mk-footer__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(40px, 5vw, 56px) var(--mk-gutter) clamp(28px, 3vw, 40px);
}
.mk-footer__links { display: flex; flex-direction: column; gap: 12px; }
.mk-footer__links a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim); text-decoration: none;
  transition: color 160ms var(--mk-ease);
}
.mk-footer__links a:hover { color: var(--bone); }
.mk-footer__contact {
  font-style: normal; display: flex; flex-direction: column; gap: 12px;
  font-size: var(--mk-body); line-height: 1.6; color: var(--smoke);
}
.mk-footer__contact a { color: var(--bone); text-decoration: none; }
.mk-footer__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mk-footer__bar {
  border-top: 1px solid var(--rule);
  padding: 18px var(--mk-gutter);
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--smoke);
}
.mk-footer__bar a { color: var(--smoke); text-decoration: none; }
.mk-footer__bar a:hover { color: var(--bone); }
.mk-footer__legal { display: flex; gap: 24px; }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .mk-svc { grid-template-columns: 1fr 1fr; }
  .mk-grid { grid-template-columns: repeat(2, 1fr); }
  .mk-footer__top { grid-template-columns: 1fr 1fr; }
  .mk-footer__brand { grid-column: 1 / -1; }
}

/* Nav collapses to the disclosure before the links can crowd the brand. */
@media (max-width: 940px) {
  .mk-nav { flex-wrap: wrap; row-gap: 0; }
  .mk-nav__burger { display: inline-flex; }

  .mk-nav__links,
  .mk-nav__actions {
    display: none;
    flex-basis: 100%; width: 100%;
  }
  .mk-nav__toggle:checked ~ .mk-nav__links,
  .mk-nav__toggle:checked ~ .mk-nav__actions { display: flex; }

  .mk-nav__links {
    flex-direction: column; align-items: stretch; gap: 0;
    margin-top: 16px; border-top: 1px solid var(--rule);
  }
  .mk-nav__link {
    padding: 16px 2px; font-size: 13px;
    border-bottom: 1px solid var(--rule);
  }
  .mk-nav__link[aria-current="page"] {
    border-bottom-color: var(--rule);
    box-shadow: inset 3px 0 0 var(--accent);
    padding-left: 14px;
  }
  .mk-nav__actions {
    margin-left: 0; margin-top: 18px; padding-bottom: 8px;
    flex-wrap: wrap; gap: 10px;
  }
  .mk-nav__actions .mk-btn { flex: 1 1 auto; }
}

@media (max-width: 860px) {
  .mk-band { grid-template-columns: 1fr; gap: 24px; }
  .mk-band__text { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--rule); }

  .mk-split, .mk-split--form { grid-template-columns: 1fr; }
  .mk-split > * + * { border-left: 0; border-top: 1px solid var(--rule); }

  .mk-aside__inner { position: static; }
}

@media (max-width: 768px) {
  .mk-grid, .mk-grid--2 { grid-template-columns: 1fr; }
  .mk-grid__cell { border-right: 0; }

  /* Service rows stack, visual first so the page still has rhythm. */
  .mk-svc { grid-template-columns: 1fr; }
  .mk-svc__visual { border-right: 0; border-bottom: 1px solid var(--rule); min-height: 300px; }
  .mk-svc--flip .mk-svc__visual { order: 0; border-left: 0; }
  .mk-svc--flip .mk-svc__content { order: 0; }

  .mk-row { grid-template-columns: 1fr; }

  .mk-hero { min-height: 0; }
  .mk-hero__body { gap: 18px; }

  .mk-footer__top { grid-template-columns: 1fr; }
  .mk-footer__bar { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 480px) {
  .mk-btn { width: 100%; }
  .mk-svc__ports { flex-direction: column; gap: 6px; }
  .mk-footer__legal { gap: 18px; }
}

/* ── Motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mk *, .mk *::before, .mk *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print ────────────────────────────────────────────────────────────── */

@media print {
  .mk-nav, .mk-ticker, .mk-hero__bg, .mk-hero__scrim { display: none !important; }
  .mk { background: #fff; color: #000; }
}

/* ════════════════════════════════════════════════════════════════════════
   QUOTE WIDGET (.oc-*)
   ────────────────────────────────────────────────────────────────────────
   Previously laid out with inline grid templates, which is why the only way
   to make it respond was [style*="1.2fr 260px"] in the brand CSS. The ids
   and the .oc-mode-tab class are load-bearing for the widget script and
   must not be renamed.
   ════════════════════════════════════════════════════════════════════════ */

.oc-form {
  position: relative; z-index: 2; width: 100%;
  max-width: 1360px; margin: 0 auto;
  padding: 0 var(--mk-gutter) 24px;
}
.oc-box {
  background: rgba(0,0,0,0.88);
  border: 1px solid var(--rule);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.95);
}

/* Mode tabs — 4-up, then 2x2 on a phone rather than overflowing sideways. */
.oc-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.oc-mode-tab {
  padding: 20px 12px; min-height: 56px;
  background: transparent; color: var(--text-dim);
  border: 0; border-right: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer;
  transition: color 160ms var(--mk-ease), background 160ms var(--mk-ease);
}
.oc-mode-tab:last-child { border-right: 0; }
.oc-mode-tab span { opacity: 0.5; margin-right: 10px; }
.oc-mode-tab:hover { color: var(--bone); }
.oc-mode-tab.is-active { background: var(--accent); color: var(--offwhite); }

.oc-lane {
  display: grid; grid-template-columns: 1fr 64px 1fr;
  border-bottom: 1px solid var(--rule);
}
.oc-swap {
  display: flex; align-items: center; justify-content: center;
  border-inline: 1px solid var(--rule);
  color: var(--accent-text); font-family: var(--mono); font-size: 20px;
}

.oc-cargo { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr 260px; }

.oc-cell { position: relative; padding: 16px clamp(16px, 2vw, 28px); border-right: 1px solid var(--rule); }
.oc-cargo .oc-cell:last-of-type { border-right: 1px solid var(--rule); }
.oc-lane .oc-cell { border-right: 0; padding-block: 18px; }

.oc-lbl {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--smoke);
}
.oc-big {
  width: 100%; background: transparent; border: 0; outline: 0;
  font-family: var(--sans); font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 500; letter-spacing: 0.02em; color: var(--bone);
  color-scheme: dark; -moz-appearance: textfield;
}
.oc-big::placeholder { color: var(--fog); }
.oc-big:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.oc-sel {
  appearance: none; cursor: pointer; padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, #8B1818 50%),
                    linear-gradient(135deg, #8B1818 50%, transparent 50%);
  background-position: right 4px top 14px, right 0 top 14px;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.oc-sel option { background: var(--iron); color: var(--bone); }

.oc-go {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 18px 20px;
  background: var(--accent); color: var(--offwhite); border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  transition: background 160ms var(--mk-ease);
}
.oc-go:hover { background: var(--hivis-dk); }

.oc-drop {
  display: none; position: absolute; left: 16px; right: 16px; top: calc(100% - 6px);
  z-index: 50; max-height: 280px; overflow-y: auto;
  background: #0A0A0A; border: 1px solid var(--rule);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.9);
}

.oc-strip {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 12px clamp(16px, 2vw, 24px); border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-dim);
}
.oc-dot {
  display: inline-block; width: 6px; height: 6px; margin-right: 8px;
  background: var(--accent); border-radius: 50%;
}
.oc-strip .oc-dot { animation: pulse 2s infinite; }
@media (prefers-reduced-motion: reduce) { .oc-strip .oc-dot { animation: none; } }

.oc-marks {
  position: relative; z-index: 2;
  width: 100%; max-width: 1360px; margin: 0 auto;
  padding: 4px var(--mk-gutter) 32px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--mk-meta);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--smoke);
}

@media (max-width: 1024px) {
  .oc-cargo { grid-template-columns: 1fr 1fr; }
  .oc-cargo .oc-cell:nth-of-type(2n) { border-right: 0; }
  .oc-cargo .oc-cell { border-bottom: 1px solid var(--rule); }
  .oc-go { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .oc-tabs { grid-template-columns: repeat(2, 1fr); }
  .oc-mode-tab:nth-child(2n) { border-right: 0; }
  .oc-mode-tab:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }

  /* Origin over destination, with the swap glyph as the divider. */
  .oc-lane { grid-template-columns: 1fr; }
  .oc-lane .oc-cell { border-bottom: 1px solid var(--rule); }
  .oc-lane .oc-cell:last-child { border-bottom: 0; }
  .oc-swap { display: none; }

  .oc-marks { justify-content: flex-start; gap: 10px 20px; }
}

@media (max-width: 480px) {
  .oc-cargo { grid-template-columns: 1fr; }
  .oc-cargo .oc-cell { border-right: 0; }
  .oc-strip { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Homepage services intro collapses rather than squeezing the pull quote. */
@media (max-width: 768px) {
  .mk-intro { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   OVERFLOW GUARDS
   ────────────────────────────────────────────────────────────────────────
   Grid and flex children default to min-width:auto, which resolves to
   min-content. A <select> takes its min-content width from its widest
   option ("20 Dry Standard"), so the Unit cell was forcing its track wider
   than the phone viewport and dragging the whole widget with it. Same class
   of bug for long unbroken strings in the cards.
   ════════════════════════════════════════════════════════════════════════ */

.mk-grid__cell,
.mk-svc__content,
.mk-svc__visual,
.mk-band,
.mk-band__fig,
.mk-band__text,
.mk-field,
.mk-row > *,
.mk-split > *,
.mk-footer__top > *,
.oc-cell,
.oc-lane > *,
.oc-cargo > * { min-width: 0; }

/* A select must never be wider than the cell it sits in. */
.oc-sel, .mk-select { max-width: 100%; text-overflow: ellipsis; }

/* Long words and URLs wrap instead of pushing the layout sideways. */
.mk-body, .mk-lead, .mk-band__text, .mk-footer__contact { overflow-wrap: anywhere; }

/* `.mk img` (0,1,1) was beating `.mk-hero__bg` (0,1,0) and forcing
   height:auto on an absolutely-positioned cover image. */
.mk img.mk-hero__bg,
.mk img.mk-svc__photo { height: 100%; }

/* Belt and braces: clip at the root as well as the body, so a future
   regression degrades to "slightly clipped" rather than "page scrolls
   sideways and the nav is unreachable". */
html:has(body.mk) { overflow-x: clip; }