/* FlottaFuvar – the Drive and Fleet "Menetrend" world as a public page:
   dark signage panel around the offer, cool timetable sheet for the content,
   Barlow for reading and Barlow Condensed for plates, signal colours only
   where they mean something (blue pickup, amber wait, green drop-off). */

@font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Barlow-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Barlow-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Barlow-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/BarlowCondensed-Bold.woff2') format('woff2'); }

:root {
  --panel-900: #0c1820;
  --panel-800: #122530;
  --panel-700: #1b3543;
  --panel-600: #23495d;
  --panel-ink: #e8edf0;
  --panel-dim: #a9bcc7;
  --sheet-000: #ffffff;
  --sheet-050: #f2f5f6;
  --sheet-100: #e6ebee;
  --rule: #cbd5da;
  --rule-firm: #9fb0b9;
  --ink-900: #0c1820;
  --ink-600: #4a5f6b;
  --signal-amber: #8a5300;
  --signal-green: #15704c;
  --signal-blue: #1a5c96;
  --signal-blue-deep: #134a79;
  --signal-blue-lit: #6fb0e8;   /* blue that holds 4.5:1 on the dark panel */
  --signal-amber-lit: #e0a646;
  --signal-green-lit: #5cc69a;
  --tint-amber: #f6e3c2;
  --tint-green: #d4ebdf;
  --tint-blue: #d9e6f2;

  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --condensed: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --section-y: clamp(56px, 8vw, 112px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--ink-900); background: var(--sheet-050); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
/* One authored arrow, 1.5px stroke, sized to the text it sits in. */
.i { display: inline-block; width: 1.25em; height: 0.65em; vertical-align: 0.1em; flex: 0 0 auto; }
a { color: var(--signal-blue); text-underline-offset: 3px; }
::selection { background: var(--signal-blue); color: #fff; }
:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 3px; }
.panel :focus-visible { outline-color: var(--signal-blue-lit); }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; background: #fff; color: var(--ink-900); font-weight: 600; }
.skip:focus { top: 12px; }

/* ── Plates and buttons ─────────────────────────────────────────────────── */
.plate {
  display: inline-block; padding: 2px 8px; margin-right: 8px; vertical-align: 3px;
  font-family: var(--condensed); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.plate-blue { color: var(--signal-blue); background: var(--tint-blue); }
.plate-amber { color: var(--signal-amber); background: var(--tint-amber); }
.plate-green { color: var(--signal-green); background: var(--tint-green); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  font: 600 17px/1 var(--sans); text-decoration: none; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.16, 1, 0.3, 1), border-color 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary { background: var(--signal-blue); color: #fff; border-color: var(--signal-blue); }
.btn-primary:hover { background: var(--signal-blue-deep); border-color: var(--signal-blue-deep); }
.btn-ghost { color: var(--panel-ink); border-color: var(--panel-600); background: transparent; }
.btn-ghost:hover { background: var(--panel-800); border-color: var(--panel-dim); }

.ph { font-family: var(--condensed); font-weight: 700; letter-spacing: 0.03em; color: var(--signal-amber); background: var(--tint-amber); padding: 0 6px; }
.panel .ph { color: var(--panel-900); background: var(--signal-amber-lit); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.panel { background: var(--panel-900); color: var(--panel-ink); }
.top { border-bottom: 1px solid var(--panel-700); }
.top-row { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand-name { font-family: var(--condensed); font-weight: 700; font-size: 22px; letter-spacing: 0.05em; text-transform: uppercase; }
.top-nav { display: flex; gap: 4px; margin-left: auto; }
.top-nav a { padding: 10px 12px; color: var(--panel-dim); text-decoration: none; font-weight: 600; font-size: 16px; }
.top-nav a:hover { color: #fff; }
.login { min-height: 42px; font-size: 16px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 7vw, 104px) 0 clamp(56px, 8vw, 120px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero h1 { font-size: clamp(38px, 5.4vw, 72px); font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.lead { margin-top: 22px; max-width: 58ch; font-size: clamp(18px, 1.5vw, 21px); color: var(--panel-ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 18px; color: var(--panel-dim); font-size: 16px; }

/* The signage board: A and B terminals on one rail, the usual routes as rows. */
.board { margin: 0; background: var(--panel-800); border: 1px solid var(--panel-700); }
.board-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--panel-700);
  font-family: var(--condensed); font-weight: 700; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--panel-ink); }
.board-tag { color: var(--panel-dim); }
.board-route { display: flex; align-items: flex-start; padding: 22px 18px 10px; }
.term { position: relative; display: grid; place-items: center; width: 44px; height: 44px; font: 700 24px/1 var(--condensed); color: #fff; flex: 0 0 auto; }
.end { position: relative; flex: 0 0 auto; }
.end small { position: absolute; top: 50px; font: 700 13px/1 var(--condensed); letter-spacing: 0.05em; text-transform: uppercase; color: var(--panel-dim); white-space: nowrap; }
.end-a small { left: 0; }
.end-b small { right: 0; }
.term-a { background: var(--signal-blue); }
.term-b { background: var(--signal-green); }
.rail { flex: 1 1 auto; height: 0; border-top: 4px dashed var(--panel-ink); margin: 20px 6px 0; }
.board-rows { list-style: none; margin: 0; padding: 24px 18px 16px; }
.board-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--panel-700); font-size: 17px; }
.board-rows li:last-child { border-bottom: 0; }
.board-rows .from { color: var(--signal-blue-lit); font-weight: 600; }
.board-rows .to { color: var(--signal-green-lit); font-weight: 600; }
.board-rows .arrow { color: var(--panel-dim); display: inline-flex; align-self: center; }
.board-rows .wait { font-family: var(--condensed); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--panel-900); background: var(--signal-amber-lit); padding: 1px 6px; margin: 0 4px; }

/* ── Sections on the sheet ──────────────────────────────────────────────── */
.sheet { padding: var(--section-y) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; }
.section-head p { margin-top: 14px; font-size: 19px; color: var(--ink-600); max-width: 62ch; }

/* The route spine: a firm ink rail, square stop markers, A and B terminals. */
.route-section { background: var(--sheet-000); border-bottom: 1px solid var(--rule); }
.route { list-style: none; margin: 0; padding: 0; position: relative; max-width: 900px; }
.route::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 4px; background: var(--ink-900); }
.stop { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); padding-bottom: clamp(32px, 4vw, 48px); }
.stop:last-child { padding-bottom: 0; }
.marker { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; background: var(--sheet-000); border: 3px solid var(--ink-900);
  font: 700 20px/1 var(--condensed); color: var(--ink-900); }
.stop-a .marker { background: var(--signal-blue); border-color: var(--signal-blue); color: #fff; }
.stop-b .marker { background: var(--signal-green); border-color: var(--signal-green); color: #fff; }
.stop-body { padding-top: 2px; }
.stop-body .plate { margin: 0 0 8px; vertical-align: baseline; }
.stop-body h3 { font-size: clamp(21px, 2vw, 26px); font-weight: 700; }
.stop-body p { margin-top: 10px; max-width: 64ch; color: var(--ink-600); font-size: 18px; }

/* Signature: with JS the rail is drawn stop by stop as the reader reaches it. */
.route.animate .stop::after { content: ''; position: absolute; left: 21px; top: 46px; bottom: 0; width: 4px; background: var(--signal-blue); transform: scaleY(0); transform-origin: top;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.route.animate .stop:last-child::after { display: none; }
.route.animate .stop.reached::after { transform: scaleY(1); }
.route.animate .stop .marker { transition: background-color 300ms ease-out, color 300ms ease-out; }
.route.animate .stop:not(.stop-a):not(.stop-b).reached .marker { background: var(--ink-900); color: #fff; }

/* Typical jobs: stop boards with their route written like a timetable row. */
.cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink-900); }
.case { padding: 26px 28px 30px 0; border-bottom: 1px solid var(--rule-firm); }
.case:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--rule); }
.case h3 { font-size: 22px; font-weight: 700; }
.case-route { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 12px; font-family: var(--condensed); font-weight: 700; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-600); }
.case-route span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-900); }
/* Stop boards: the route's ends carry the A (blue) and B (green) terminal squares. */
.case-route span::before { content: ''; width: 10px; height: 10px; background: var(--ink-900); }
.case-route span:first-child::before { background: var(--signal-blue); }
.case-route span:last-child::before { background: var(--signal-green); }
.case-route span.w::before { background: var(--signal-amber); }
.case-route span:only-child::before { background: var(--ink-600); }
.case-route .i { color: var(--ink-600); }
.case p:last-child { color: var(--ink-600); }

/* Benefits: a definition list, heading beside it on wide screens. */
.benefits-section { background: var(--sheet-000); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.benefits-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.benefits-grid .section-head { margin-bottom: 0; position: sticky; top: 32px; }
.benefits { margin: 0; }
.benefits > div { padding: 22px 0; border-top: 1px solid var(--rule); }
.benefits > div:first-child { border-top: 2px solid var(--ink-900); }
.benefits dt { font-size: 21px; font-weight: 700; }
.benefits dd { margin: 6px 0 0; color: var(--ink-600); max-width: 60ch; }

.faq { max-width: 860px; border-top: 2px solid var(--ink-900); }
.faq details { border-bottom: 1px solid var(--rule-firm); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-size: 19px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 16px; height: 2px; background: var(--signal-blue); }
.faq summary::after { transform: rotate(90deg); transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 0 22px; max-width: 70ch; color: var(--ink-600); }

/* ── Contact: back on the panel, the request built as a form ────────────── */
.contact { padding: var(--section-y) 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact h2 { font-size: clamp(32px, 3.6vw, 50px); color: #fff; }
.contact-copy > p { margin-top: 16px; color: var(--panel-ink); font-size: 18px; max-width: 52ch; }
.contacts { margin: 32px 0 0; border-top: 1px solid var(--panel-700); }
.contacts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--panel-700); }
.contacts dt { font-family: var(--condensed); font-weight: 700; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--panel-dim); padding-top: 2px; }
.contacts dd { margin: 0; }
.contacts a { color: var(--signal-blue-lit); font-weight: 600; }

.request { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: clamp(20px, 3vw, 32px); background: var(--sheet-000); color: var(--ink-900); border: 1px solid var(--rule-firm); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.span2 { grid-column: 1 / -1; }
.field > label, .freq legend { font-family: var(--condensed); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-600); }
.request input:not([type="radio"]), .request textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; font: 500 17px/1.3 var(--sans); color: var(--ink-900);
  background: var(--sheet-000); border: 1px solid var(--rule-firm); border-radius: 2px;
}
.request textarea { resize: vertical; min-height: 92px; }
.request input::placeholder, .request textarea::placeholder { color: #5d707b; }
.request input:focus-visible, .request textarea:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 0; border-color: var(--signal-blue); }
.freq { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.freq legend { margin-bottom: 8px; padding: 0; }
.freq label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; min-height: 32px; cursor: pointer; }
.freq input { width: 18px; height: 18px; accent-color: var(--signal-blue); }
.request-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.small { font-size: 15px; color: var(--ink-600); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot { background: var(--panel-900); color: var(--panel-dim); border-top: 1px solid var(--panel-700); padding: 40px 0 48px; font-size: 16px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 32px; align-items: start; }
.foot .brand-name { color: #fff; margin-bottom: 6px; }
.company { margin: 0; }
.company > div { display: flex; gap: 10px; padding: 3px 0; }
.company dt { min-width: 90px; }
.company dd { margin: 0; }
.foot nav { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.foot a { color: var(--panel-ink); font-weight: 600; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (min-width: 1800px) {
  :root { --max: 1440px; }
  body { font-size: 18px; }
}
@media (max-width: 1080px) {
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .case:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--rule); }
}
@media (max-width: 900px) {
  .top-nav { display: none; }
  .login { margin-left: auto; }
  .hero-grid, .benefits-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .benefits-grid .section-head { position: static; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .top-row { min-height: 60px; gap: 12px; }
  .brand-name { font-size: 19px; }
  .login { min-height: 40px; padding: 0 14px; font-size: 15px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .board-rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .board-rows .arrow { display: none; }
  .hero-actions .btn-ghost { display: none; }
  .route::before, .route.animate .stop::after { left: 17px; }
  .stop { grid-template-columns: 38px minmax(0, 1fr); gap: 16px; }
  .marker { width: 38px; height: 38px; font-size: 17px; }
  .route.animate .stop::after { top: 38px; }
  .stop-body { padding-top: 3px; }
  .stop-body p { font-size: 16px; }
  .plate { font-size: 13px; }
  .cases { grid-template-columns: minmax(0, 1fr); }
  .case, .case:nth-child(2n), .case:not(:nth-child(3n + 1)) { padding: 22px 0 24px; border-left: 0; }
  .request { grid-template-columns: minmax(0, 1fr); }
  .request-actions .btn { flex: 1 1 100%; }
  .contacts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .route.animate .stop::after, .route.animate .stop .marker { transition: none; }
}

/* ── Request form: status, honeypot, thank-you ──────────────────────────── */
.req { color: var(--signal-amber); }
.hint-line { margin-top: -6px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.request { position: relative; }
.form-status:empty { display: none; }
.form-status { font-weight: 600; color: var(--ink-900); }
.thanks { display: none; padding: clamp(20px, 3vw, 32px); background: var(--sheet-000); color: var(--ink-900); border: 1px solid var(--rule-firm); }
.thanks:target, .thanks.shown { display: block; }
.thanks h3 { font-size: 24px; }
.thanks p { margin-top: 8px; color: var(--ink-600); }
.thanks:focus { outline: none; }