
@font-face{font-family:'Outfit';font-style:normal;font-display:swap;font-weight:600;src:url('/fonts/marketing/outfit-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/marketing/inter-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url('/fonts/marketing/ibm-plex-mono-400.woff2') format('woff2')}
:root{--brand-font-heading:'Outfit',Arial,sans-serif;--brand-font-body:'Inter',Arial,sans-serif;--brand-font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace}
html{overflow-y:auto;scroll-behavior:smooth}
body{margin:0;background:#f5f3ec;font-family:var(--brand-font-body)}
.nativeflow-brand{font-family:var(--brand-font-heading);letter-spacing:0}

.field-route {
  --brand-font-heading: 'Inter', Arial, sans-serif;
  --field-canopy: #0b2018;
  --field-deep: #14382b;
  --field-eucalypt: #426a55;
  --field-sage: #aec4b2;
  --field-sage-soft: #c8d8ca;
  --field-ochre: #d99b47;
  --field-paper: #f5f3ec;
  --field-warm: #eae8df;
  --field-white: #fffefa;
  --field-ink: #173c2e;
  --field-muted: #52675c;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--field-paper);
  color: var(--field-ink);
  font-family: var(--brand-font-body);
}

.field-route *, .field-route *::before, .field-route *::after { box-sizing: border-box; }
.field-route :where(h1, h2, h3, p) { margin-top: 0; }
.field-route :where(h1, h2, h3) { font-family: var(--brand-font-heading); }

.field-route__skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 11px 15px;
  border-radius: 8px;
  background: var(--field-ochre);
  color: var(--field-deep);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.field-route__skip:focus { transform: translateY(0); }

.field-container { width: min(100%, 1320px); margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }

.field-route-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  color: var(--field-eucalypt);
  font-family: var(--brand-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .075em;
  line-height: 1.5;
  text-transform: uppercase;
}
.field-route-kicker::before { content: ''; width: 24px; height: 2px; flex: 0 0 auto; background: var(--field-ochre); }
.field-route-kicker--light { color: rgba(248, 247, 240, .82); }

.field-route-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid var(--field-deep);
  border-radius: 999px;
  background: var(--field-deep);
  color: var(--field-paper);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.field-route-button:hover { transform: translateY(-2px); background: #1b4a39; border-color: #1b4a39; }
.field-route-button:focus-visible { outline: 3px solid var(--field-ochre); outline-offset: 3px; }
.field-route-button--paper { border-color: var(--field-paper); background: var(--field-paper); color: var(--field-deep); }
.field-route-button--paper:hover { border-color: #fff; background: #fff; color: var(--field-deep); }
.field-route-button--outline { border-color: rgba(248, 247, 240, .52); background: transparent; color: var(--field-paper); }
.field-route-button--outline:hover { border-color: var(--field-paper); background: rgba(248, 247, 240, .1); }

.field-route-hero {
  position: relative;
  min-height: 600px;
  padding-top: 76px;
  background:
    radial-gradient(circle at 85% 20%, rgba(174, 196, 178, .18), transparent 34%),
    var(--field-canopy);
  color: var(--field-paper);
}
.field-route-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .62fr);
  gap: clamp(48px, 8vw, 116px);
  align-items: center;
  width: min(100%, 1320px);
  min-height: 524px;
  margin: 0 auto;
  padding: clamp(78px, 9vw, 124px) clamp(20px, 5vw, 64px) clamp(66px, 8vw, 100px);
}
.field-route-hero h1 {
  max-width: 14ch;
  margin: 0 0 24px;
  color: var(--field-paper);
  font-size: clamp(48px, 6vw, 78px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.02;
  text-wrap: balance;
}
.field-route-hero__lead { max-width: 62ch; margin: 0; color: rgba(248, 247, 240, .72); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.68; }

.field-route-section { padding: clamp(76px, 9vw, 124px) 0; background: var(--field-paper); color: var(--field-ink); }
.field-route-section--white { background: var(--field-white); }
.field-route-section--warm { background: var(--field-warm); }
.field-route-section--dark { background: var(--field-deep); color: var(--field-paper); }
.field-route-section__inner { width: min(100%, 1320px); margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }
.field-route-section__head {
  display: grid;
  grid-template-columns: minmax(160px, .36fr) minmax(0, 1fr);
  gap: clamp(36px, 8vw, 124px);
  margin-bottom: clamp(42px, 6vw, 70px);
}
.field-route-section__head h2,
.field-route-cta h2 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.04;
  text-wrap: balance;
}
.field-route-section__head p:not(.field-route-kicker) { max-width: 66ch; margin: 20px 0 0; color: var(--field-muted); font-size: 16px; line-height: 1.72; }
.field-route-section--dark .field-route-section__head p:not(.field-route-kicker) { color: rgba(248, 247, 240, .68); }

.field-route-cta {
  padding: clamp(78px, 10vw, 124px) 20px;
  background:
    radial-gradient(circle at 82% 20%, rgba(174, 196, 178, .15), transparent 30%),
    var(--field-canopy);
  color: var(--field-paper);
  text-align: center;
}
.field-route-cta .field-route-kicker { justify-content: center; color: rgba(248, 247, 240, .78); }
.field-route-cta h2 { margin-inline: auto; }
.field-route-cta > p:not(.field-route-kicker) { max-width: 58ch; margin: 21px auto 29px; color: rgba(248, 247, 240, .74); font-size: 16px; line-height: 1.7; }
.field-route-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.field-route-cta small { display: block; margin-top: 17px; color: rgba(248, 247, 240, .72); font-size: 14px; }

.field-detail {
  border: 1px solid rgba(23, 60, 46, .14);
  border-radius: 14px;
  background: var(--field-white);
}
.field-detail summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
.field-detail summary::-webkit-details-marker { display: none; }
.field-detail summary:focus-visible { outline: 3px solid var(--field-ochre); outline-offset: 3px; border-radius: 12px; }
.field-detail summary::after { content: '+'; color: var(--field-eucalypt); font-family: var(--brand-font-mono); font-size: 20px; font-weight: 400; }
.field-detail[open] summary::after { content: '−'; }

@media (max-width: 820px) {
  .field-route-hero { padding-top: 70px; }
  .field-route-hero__inner, .field-route-section__head { grid-template-columns: 1fr; }
  .field-route-hero__inner { min-height: 510px; gap: 42px; padding-top: 66px; }
}

@media (max-width: 620px) {
  .field-route-section { padding-block: 64px; }
  .field-route-hero__inner { min-height: 500px; padding-top: 58px; padding-bottom: 62px; }
  .field-route-hero h1 { font-size: clamp(42px, 12vw, 56px); }
  .field-route-cta__actions { display: grid; }
  .field-route-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .field-route *, .field-route *::before, .field-route *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .field-route-button:hover { transform: none; }
}
