/* Devnest Solutions, "Editorial" concept: Swiss-style monochrome, serif display type, hairline rules, one signal-orange accent.
   Layout uses flexbox with wrapping throughout (no CSS grid). */
:root {
  --paper: #f6f4ef;
  --paper-2: #ebe8df;
  --ink: #0e0e0e;
  --ink-2: #1c1c1c;
  --accent: #d93a10;
  --accent-d: #b52e0b;
  --accent-text: #b52e0b;
  --accent-bright: #ff5a2e;
  --text: #1d1d1b;
  --muted: #6a675f;
  --rule: #0e0e0e;
  --hair: #cfcbbf;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --label: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.7; color: var(--text); background: var(--paper); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }
main { flex: 1 0 auto; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--accent); }
a:hover { color: var(--accent-text); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 500; line-height: 1.04; margin: 0 0 0.55em; letter-spacing: -0.025em; color: var(--ink); }
h1 { font-size: clamp(2.6rem, 6.8vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: 1.4rem; letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

.skip-link { position: absolute; left: 12px; top: -70px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 18px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }

/* Sections divided by hairline rules */
.section { padding: clamp(68px, 9vw, 124px) 0; position: relative; border-top: 1px solid var(--rule); }
.section--sand { background: var(--paper-2); }
.section--strip { background: var(--paper); padding: clamp(36px, 5vw, 60px) 0; }
.section--dark, .site-footer, .marquee, .route-card--direct { --accent-text: var(--accent-bright); }
.section--dark { background: var(--ink); color: #e9e6dd; overflow: hidden; border-top-color: var(--ink); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a:not(.btn) { color: #fff; text-decoration-color: var(--accent); }
.section-head { max-width: 780px; margin-bottom: 52px; }

/* Eyebrow: small caps with a leading rule */
.eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font-family: var(--label); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.eyebrow::before { content: ""; width: 44px; height: 2px; background: var(--accent); }
.eyebrow--dark { color: var(--ink); }
.section--dark .eyebrow { color: #fff; }
.hero--center .eyebrow { justify-content: center; }

.accent { color: var(--accent-text); font-style: italic; }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.65; max-width: 680px; color: var(--muted); }
.section--dark .lead { color: #bdb9ad; }
.lead-dark { font-size: 1.2rem; color: var(--muted); }
.meta { color: var(--muted); margin: 0; font-family: var(--label); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.note { margin-top: 32px; color: var(--muted); }

/* Two-column flex split that stacks when space runs out */
.split { display: flex; flex-wrap: wrap; gap: 44px 80px; align-items: flex-start; }
.split-main { flex: 1 1 420px; }
.split-side { flex: 1 1 340px; }
.split-main > :last-child, .split-side > :last-child { margin-bottom: 0; }