/* map.tundra.site (TundRA Map, was arelmap.com) — the public site, built from the Claude Design handoff
   "Apple-style ARELMap website" (Rob 2026-10-29). Section markup keeps the
   design's own inline styles and loads the RLR design-system tokens and base
   (ds/, as the design did); this file carries the design-system pieces the
   pages used (button, fields, certification strip) and the reduced-motion /
   small-screen fallbacks. */
:root { --navy-900: #070E1A; --navy: #0E1A2F; --red: #B60B29; --red-900: #7A0619; --line: #D7DCE3; --muted: #4A5768; }
/* the design pages' own page styles (their <helmet>) */
html { scroll-behavior: smooth; background: var(--navy-900); }
body { margin: 0; background: var(--navy-900); }
a { color: #DB8594; text-decoration: none; }
a:hover { color: #FFFFFF; }
.navlink:hover { color: #FFFFFF !important; }
nav [style*="overflow-x:auto"] { scrollbar-width: none; }
nav [style*="overflow-x:auto"]::-webkit-scrollbar { display: none; }

/* contact page link colours (the design sets these per page) */
.page-contact a { color: var(--red); }
.page-contact a:hover { color: var(--red-900); }
.page-contact nav a, .page-contact footer a { color: #B4BBC5; }
.page-contact footer a { color: #DB8594; }
.page-contact aside a { color: #0E1A2F; }

/* ── Button (RLR design system) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border-radius: 3px; cursor: pointer;
  border: 1px solid transparent; background: var(--red); color: #FFFFFF;
  transition: background-color 150ms cubic-bezier(.4,0,.2,1), color 150ms cubic-bezier(.4,0,.2,1), border-color 150ms cubic-bezier(.4,0,.2,1), transform 80ms cubic-bezier(.4,0,.2,1); }
.btn:hover { background: var(--red-900); color: #FFFFFF; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 7px 14px; font-size: 13px; flex: none; }
.btn-md { padding: 11px 22px; font-size: 15px; }
.btn-lg { padding: 15px 30px; font-size: 17px; gap: 12px; }
.btn-inverse { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.18); }
.btn-inverse:hover { background: rgba(255,255,255,.14); }
.btn-ghost { background: transparent; color: var(--navy); border-color: #B4BBC5; }
.btn-ghost:hover { background: #F5F7F9; color: var(--navy); }
.page-contact a.btn { color: #FFFFFF; }

/* ── CertificationStrip ── */
.certs { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.certs img { width: auto; object-fit: contain; display: block; }
.certs-inverse img { background: #FFFFFF; padding: 6px; border-radius: 2px; }

/* ── Input / Select / Textarea ── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font: 600 13px/1.35 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea { box-sizing: border-box; width: 100%; padding: 11px 14px; font: 400 17px/1.5 var(--font-body);
  color: var(--navy); background: #FFFFFF; border: 1px solid var(--line); border-radius: 3px; outline: none;
  transition: border-color 150ms cubic-bezier(.4,0,.2,1), box-shadow 150ms cubic-bezier(.4,0,.2,1); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E1A2F' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(182,11,41,.12); }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--red); }
.field .hint, .field .err { font: 400 13px/1.35 var(--font-body); color: var(--muted); }
.field .err { color: var(--red); }

/* ── no motion, or a small screen: unpin the split sections, show final states ── */
.static [data-pin] { height: auto !important; }
.static [data-pin] > div { position: relative !important; height: auto !important; padding-top: 96px !important; padding-bottom: 96px !important; }
.static [data-el="stepItems"] { min-height: 0 !important; display: flex; flex-direction: column; gap: 56px; }
.static [data-el="stepItems"] > div { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.static [data-el="fieldFeats"] > div { opacity: 1 !important; }
.static [data-el="hint"] { display: none; }
.reduce [data-el="hero"], .reduce [data-el="wordsSec"], .reduce [data-el="desk"], .reduce [data-el="wipe"] { height: auto !important; }
.reduce [data-el="hero"] > div { position: relative !important; height: auto !important; min-height: 100vh; overflow: visible !important; padding-bottom: 80px; }
.reduce [data-el="heroText"] { position: relative !important; top: auto !important; padding-top: 13vh !important; }
.reduce [data-el="heroImg"] { position: relative !important; left: auto !important; top: auto !important; transform: none !important; margin: 48px auto 0; }
.reduce [data-el="wordsSec"] > div, .reduce [data-el="desk"] > div, .reduce [data-el="wipe"] > div { position: relative !important; height: auto !important; padding-top: 120px !important; padding-bottom: 120px !important; }
.reduce [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }