:root {
  --ink: #0b1f3a;
  --ink-soft: #28415d;
  --paper: #eef0ec;
  --paper-deep: #d8ded8;
  --sky: #a8c7d9;
  --signal: #b5371b;
  --line: rgba(11, 31, 58, 0.19);
  --serif: "Brygada 1918", Georgia, serif;
  --sans: "Onest", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.45; }
::selection { background: var(--signal); color: #fff; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; top: -4rem; left: 1rem; padding: .7rem 1rem; background: #fff; color: var(--ink); font-weight: 700; }
.skip-link:focus { top: 1rem; }
.page-shell { overflow: hidden; }
.site-header { position:absolute; z-index:10; width:100%; min-height:84px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:0 4.5vw; background:linear-gradient(180deg,rgba(5,18,34,.72),transparent); color:white; }
.brand { display:inline-flex; align-items:center; width:fit-content; color:inherit; text-decoration:none; }
.site-header .brand { position:relative; isolation:isolate; }
.site-header .brand::before { content:""; position:absolute; z-index:-1; width:8.5rem; height:5.2rem; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(221,174,77,.28) 0%,rgba(221,174,77,.11) 42%,transparent 74%); pointer-events:none; }
.brand img { display:block; width:auto; height:58px; object-fit:contain; filter:brightness(1.32) saturate(.9); }
nav { display: flex; gap: 1.8rem; }
nav a, .header-action, .site-footer a { color: inherit; text-decoration: none; font-size: .79rem; font-weight: 600; }
nav a { color: rgba(255,255,255,.82); }
nav a:hover, .text-link:hover, .site-footer a:hover { text-decoration: underline; text-underline-offset: .28em; }
.header-action { justify-self: end; color: #fff; display: inline-flex; gap: .5rem; align-items: center; }
.header-action span { color: var(--signal); font-size: 1.1rem; }
.menu-toggle { display: none; }

.hero { position:relative; min-height:min(800px,92svh); display:flex; align-items:end; overflow:hidden; background:var(--ink); isolation:isolate; }
.hero::before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(5,18,34,.94) 0%,rgba(5,18,34,.78) 34%,rgba(5,18,34,.3) 62%,rgba(5,18,34,.16) 100%); }
.hero-copy { position:relative; z-index:3; display:flex; flex-direction:column; justify-content:flex-end; width:min(730px,61vw); min-height:min(800px,92svh); padding:9.5rem 7vw 6vw; color:#fff; }
.selector-label { margin: 0; font-size: .79rem; font-weight: 600; color: var(--ink-soft); }
.pulse, .pin-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--signal); display: inline-block; box-shadow: 0 0 0 5px rgba(244,91,43,.16); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
h1 { max-width:10.8ch; margin:0 0 1.35rem; font-size:clamp(3.35rem,5.7vw,6.1rem); line-height:.92; color:#fff; }
h1 em { font-style:italic; color:#ffb19c; }
.hero-intro { max-width:48ch; color:rgba(255,255,255,.82); font-size:1.04rem; overflow-wrap:anywhere; }
.route-selector { margin-top: 3rem; }
.mobile-route-status { display:none; }
.selector-label { margin-bottom:.8rem; color:rgba(255,255,255,.82); }
.route-options { display: flex; flex-wrap: wrap; gap: .55rem; max-width: 35rem; }
.route-option { border:1px solid rgba(255,255,255,.46); border-radius:0; padding:.68rem .82rem; color:#fff; background:rgba(5,18,34,.15); font-family:inherit; font-weight:600; cursor:pointer; transition:.25s ease; }
.route-option:hover { border-color:#fff; background:rgba(255,255,255,.1); }
.route-option.is-active { border-color:#fff; background:#fff; color:var(--ink); }
.hero-actions { display: flex; align-items: center; gap: 1.35rem; margin-top: 2.2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .9rem; border: 0; padding: 1rem 1.25rem; text-decoration: none; font-family: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background:#fff; color:var(--ink); }
.button-light { width: fit-content; background: #fff; color: var(--ink); }
.text-link { color:#fff; font-size:.86rem; font-weight:700; text-decoration:none; }
.hero-visual { position:absolute; z-index:0; inset:0; background:var(--ink); }
.hero-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,18,34,.25),transparent 40%); pointer-events:none; }
.hero-visual img, .process-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-note { position:absolute; z-index:2; right:3vw; bottom:1.2rem; max-width:18rem; color:rgba(255,255,255,.78); font-size:.65rem; letter-spacing:.03em; text-align:right; }
.route-pin { position:absolute; z-index:3; top:28%; right:10%; left:auto; display:flex; gap:.75rem; align-items:start; color:#fff; }
.pin-dot { margin-top: .3rem; background: var(--signal); }
.pin-label, .route-card span { display: block; font-size: .75rem; letter-spacing: .11em; font-weight: 700; }
.route-pin strong { display: block; margin-top: .15rem; font-family: var(--serif); font-size: 1.42rem; font-weight: 500; }
.route-card { position:absolute; z-index:3; right:3vw; bottom:4rem; width:min(22rem,72%); padding:1.35rem 1.5rem; background:rgba(5,18,34,.86); border-top:2px solid #ffb19c; color:#fff; }
.route-card span { color: var(--sky); }
.route-card p { margin: .6rem 0 0; font-size: .92rem; }

.statement, .routes, .process, .field-note, .planning { padding: clamp(5.5rem, 10vw, 10rem) 7vw; }
.statement { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem, 10vw, 11rem); background: var(--sky); }
h2 { margin-bottom: 0; font-size: clamp(2.8rem, 5.1vw, 5.7rem); line-height: .92; }
.statement-copy { align-self: end; max-width: 38rem; }
.statement-copy > p { font-size: clamp(1.18rem, 1.8vw, 1.55rem); line-height: 1.3; }
.principles { margin-top: 3rem; border-top: 1px solid var(--line); }
.principles div { display: flex; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.principles span { color: var(--signal); font-size: .74rem; font-variant-numeric: tabular-nums; }

.routes { background: var(--paper); }
.section-topline { display: grid; grid-template-columns: 1.1fr .65fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.section-topline > p { max-width: 35ch; margin: 0; color: var(--ink-soft); font-size: 1.03rem; }
.route-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.route-tile { position: relative; min-height: 32rem; overflow: hidden; color: #fff; text-decoration: none; background: var(--ink); }
.route-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.route-tile::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,31,58,.04), rgba(11,31,58,.82)); }
.route-tile:hover img { transform: scale(1.06); }
.route-tile div { position:absolute; z-index:1; left:1.2rem; right:1.2rem; bottom:1.2rem; }
.route-tile span, .route-tile em { display:block; font-size:.69rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-style:normal; }
.route-tile strong { display:block; margin:.45rem 0 1.5rem; font-family:var(--serif); font-size:1.75rem; line-height:1; font-weight:500; }
.route-tile em { color:#fff; letter-spacing:0; text-transform:none; }

.process { display:grid; grid-template-columns: minmax(20rem,.8fr) 1.2fr; gap: clamp(3rem, 8vw, 9rem); background:var(--ink); color:#fff; }
.process-visual { position:relative; min-height:43rem; overflow:hidden; }
.process-visual img { filter: saturate(.72) contrast(1.08); }
.process-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(11,31,58,.75),transparent 65%); }
.process-visual span { position:absolute; z-index:1; bottom:1.3rem; left:1.3rem; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.process-copy { max-width:40rem; align-self:center; }
.process h2 { color:#fff; }
.process ol { list-style:none; margin:3rem 0 0; padding:0; }
.process li { display:grid; grid-template-columns:3rem 1fr; gap:1rem; padding:1.2rem 0; border-top:1px solid rgba(255,255,255,.22); }
.process li > span { color:var(--signal); font-size:.75rem; font-weight:700; font-variant-numeric:tabular-nums; }
.process h3 { margin:0 0 .35rem; font-family:var(--serif); font-size:1.5rem; font-weight:500; }
.process li p { max-width:38ch; margin:0; color:rgba(255,255,255,.7); }

.field-note { padding-top:clamp(4.5rem,7vw,7rem); padding-bottom:clamp(4.5rem,7vw,7rem); background:#d9a74f; color:#0b1f3a; }
.note-grid { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(18rem,.78fr); gap:clamp(3rem,9vw,10rem); align-items:end; }
.field-note h2 { max-width:14ch; margin:0; font-size:clamp(2.8rem,4.1vw,4.9rem); line-height:.94; }
.note-copy { padding-bottom:.4rem; }
.note-copy p { max-width:34ch; margin:0 0 1.75rem; color:#1f3550; font-size:1.14rem; line-height:1.42; }
.note-link { color:#0b1f3a; font-size:.9rem; font-weight:700; text-decoration:none; }
.note-link:hover { text-decoration:underline; text-underline-offset:.3em; }

.planning { display:grid; grid-template-columns:1fr .95fr; gap:8vw; background:#17304e; color:#fff; }
.planning h2 { color:#fff; }
.planning-intro > p:last-child { max-width:28ch; margin-top:2rem; color:rgba(255,255,255,.7); }
.route-form { display:grid; gap:1.15rem; align-self:center; }
.route-form label { display:grid; gap:.48rem; font-size:.78rem; font-weight:700; letter-spacing:.02em; }
input, select { width:100%; border:0; border-bottom:1px solid rgba(255,255,255,.45); border-radius:0; padding:.8rem 0; color:#fff; background:transparent; font:inherit; }
select { color:#fff; }
option { color:var(--ink); }
input:focus, select:focus { outline:0; border-color:#fff; }
.field-error { min-height:1.1rem; color:#ffd0c3; font-size:.75rem; font-weight:500; letter-spacing:0; }
.form-message { min-height:1.3rem; margin:0; color:#cfe5f1; font-weight:600; }

.site-footer { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2rem 4.5vw; background:#09182c; color:#fff; }
.site-footer .brand img { height:42px; filter:none; }
.site-footer p { margin:0; color:rgba(255,255,255,.62); font-size:.78rem; }
.site-footer > a:last-child { color:#fff; }

@media (max-width: 900px) {
  .site-header { grid-template-columns:1fr auto; min-height:72px; padding:0 5vw; }
  .menu-toggle { display:block; border:0; background:transparent; color:#fff; font:inherit; font-size:.78rem; font-weight:700; }
  nav { display:none; grid-column:1/-1; grid-row:2; padding:0 0 1rem; flex-direction:column; gap:.7rem; }
  nav.is-open { display:flex; }
  .header-action { display:none; }
  .hero { min-height:48rem; }
  .hero::before { background:linear-gradient(90deg,rgba(5,18,34,.91),rgba(5,18,34,.54) 72%,rgba(5,18,34,.28)); }
  .hero-copy { width:min(680px,86vw); min-height:48rem; padding:8rem 7vw 5rem; }
  .statement, .section-topline, .process, .note-grid, .planning { grid-template-columns:1fr; }
  .statement, .process, .planning { gap:3rem; }
  .route-grid { grid-template-columns:repeat(2,1fr); }
  .route-tile { min-height:24rem; }
  .process-visual { min-height:27rem; }
  .note-grid { gap:1.5rem; }
}
@media (max-width: 560px) {
  .site-header { min-height:64px; }
  .hero { min-height:44rem; }
  .hero-copy, .statement, .routes, .process, .field-note, .planning { padding-left:5vw; padding-right:5vw; }
  .hero-copy { width:100%; min-height:44rem; padding:7.4rem 5vw 3.5rem; }
  .hero-intro { max-width:31ch; font-size:.98rem; line-height:1.36; }
  h1 { max-width:11.2ch; font-size:clamp(3rem,12vw,3.9rem); }
  h2 { font-size:clamp(2.6rem,13vw,4rem); }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-visual img { object-position:64% center; }
  .route-pin, .route-card, .photo-note { display:none; }
  .mobile-route-status { display:block; margin:1rem 0 0; color:#ffcf94; font-size:.88rem; font-weight:700; }
  .route-card { right:1rem; bottom:2.9rem; }
  .route-grid { grid-template-columns:1fr; }
  .route-tile { min-height:26rem; }
  .statement, .routes, .process, .field-note, .planning { padding-top:4.5rem; padding-bottom:4.5rem; }
  .section-topline { gap:1.5rem; margin-bottom:2.5rem; }
  .process-visual { min-height:21rem; }
  .site-footer { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .7s both; }
  .hero-copy > :nth-child(2) { animation-delay:.07s; }
  .hero-copy > :nth-child(3) { animation-delay:.14s; }
  .hero-copy > :nth-child(4) { animation-delay:.21s; }
  .hero-copy > :nth-child(5) { animation-delay:.28s; }
}
@keyframes rise { from { opacity:0; transform:translateY(14px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }

/* Shared header scale: make the brand and route-planning actions readable at a glance. */
.site-header { min-height:96px; }
.site-header .brand::before { width:10.2rem; height:6.3rem; }
.site-header .brand img { height:72px; }
.site-header nav a,
.site-header .header-action { font-size:.94rem; font-weight:650; }
@media (max-width:900px) { .site-header { min-height:80px; } }
@media (max-width:560px) { .site-header { min-height:72px; } .site-header .brand img { height:56px; } }