/* ROUTE (route.html) — on top of case.css (the ElectroGlide layout: cs-*). Its own blocks are rt-*:
   research (lead, interview, journey, needs, design opportunity) · design (storyboard, sketches, the mark) · functions with
   images · interface. Accent = ROUTE's green (its logo glow); site.css tokens --bg --ink --ink-2 --line --tile --display. */
.rt{--rt-acc:#0e9b6c;--rt-acc-soft:rgba(14,155,108,.10);--rt-card:#f5f5f7;--rt-img:#e4e5e7}
[data-theme="dark"] .rt{--rt-acc:#3fd69f;--rt-acc-soft:rgba(63,214,159,.12);--rt-card:#151517;--rt-img:#1d1d1f}

.rt-sec{max-width:1100px;margin:0 auto;padding:clamp(30px,5vw,56px) 22px}
.rt-sec > .cs-h{margin-top:0}
.rt-kicker{display:block;text-align:center;margin:0 0 6px;font:600 12px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--rt-acc)}
.rt-lead{max-width:760px;margin:0 auto clamp(28px,4vw,44px);text-align:center;font-size:clamp(17px,1.9vw,20px);line-height:1.7;color:var(--ink-2)}

/* the interview: photo + quote */
.rt-voice{margin:0 auto clamp(36px,5vw,60px);max-width:980px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,48px);align-items:center}
.rt-voice img{width:100%;height:auto;border-radius:22px;box-shadow:var(--cs-shadow)}
.rt-voice__q{margin:0 0 18px;font:600 clamp(22px,2.7vw,31px)/1.32 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.rt-voice__who{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.rt-voice__who b{display:block;font-size:16px;color:var(--ink)}
.rt-voice__tag{display:inline-block;margin:0 0 14px;padding:4px 11px;border-radius:999px;background:var(--rt-acc-soft);color:var(--rt-acc);font:600 12px/1.5 var(--display);letter-spacing:.02em}

/* the journey through the terminal and what gets in the way */
.rt-steps{list-style:none;margin:0 auto 22px;padding:0;max-width:820px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}
.rt-steps::before{content:"";position:absolute;left:24px;right:24px;top:50%;height:1.5px;background:linear-gradient(90deg,var(--line),var(--rt-acc),var(--line));transform:translateY(-50%)}
.rt-steps li{position:relative;padding:7px 16px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font:600 13.5px/1.2 var(--display);color:var(--ink);white-space:nowrap}
.rt-steps li:last-child{border-color:var(--rt-acc);color:var(--rt-acc)}
.rt-pains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 clamp(36px,5vw,56px)}
.rt-pain{padding:20px 20px 22px;border-radius:20px;background:var(--rt-card)}
.rt-pain b{display:block;margin-bottom:12px;font:700 13px/1 var(--display);color:var(--rt-acc);letter-spacing:.04em}
.rt-pain h3{margin:0 0 6px;font-size:17px;line-height:1.3;font-weight:650;letter-spacing:-.01em}
.rt-pain p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* what exists today */
.rt-note{max-width:820px;margin:0 auto clamp(36px,5vw,56px);padding:18px 22px;border-radius:18px;border:1px dashed var(--line);display:flex;gap:16px;align-items:baseline}
.rt-note b{flex:none;font:600 12px/1.6 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.rt-note p{margin:0;font-size:16px;line-height:1.65}

/* three needs → what ROUTE does about each */
.rt-needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 clamp(36px,5vw,56px)}
.rt-need{padding:22px 22px 24px;border-radius:22px;background:var(--rt-card);display:flex;flex-direction:column}
.rt-need__n{font:700 34px/1 var(--display);letter-spacing:-.03em;color:var(--rt-acc);margin-bottom:14px}
.rt-need h3{margin:0 0 16px;min-height:2.7em;font-size:18px;line-height:1.35;font-weight:650;letter-spacing:-.01em}   /* two lines, so the three lists line up */
.rt-need ul{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px}
.rt-need li{padding:5px 11px;border-radius:999px;background:var(--bg);font-size:13px;line-height:1.4;color:var(--ink)}
.rt-need ul::before{content:"ROUTE";flex-basis:100%;margin-bottom:2px;font:600 11px/1.4 var(--display);letter-spacing:.12em;color:var(--ink-2)}

/* the design opportunity */
.rt-hmw{max-width:860px;margin:0 auto;text-align:center;padding:clamp(26px,4vw,40px) clamp(20px,4vw,48px);border-radius:26px;
  background:radial-gradient(120% 140% at 50% 0%,var(--rt-acc-soft),transparent 70%),var(--rt-card)}
.rt-hmw span{display:block;margin-bottom:10px;font:600 12px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--rt-acc)}
.rt-hmw p{margin:0;font:600 clamp(21px,2.6vw,29px)/1.35 var(--display);letter-spacing:-.02em;text-wrap:balance}

/* figures: the image whole, the caption centred under it */
.rt-fig{margin:0 auto clamp(40px,6vw,72px);max-width:1000px}
.rt-fig img{display:block;width:100%;height:auto;border-radius:22px;background:var(--rt-img)}
.rt-fig.is-shadow img{box-shadow:var(--cs-shadow)}
.rt-fig.is-paper img{background:#fff;border:1px solid var(--line)}
[data-theme="dark"] .rt-fig.is-paper img{border-color:transparent}
.rt-fig figcaption{max-width:560px;margin:18px auto 0;text-align:center}
.rt-fig h3{margin:0 0 6px;font-size:clamp(20px,2.3vw,24px);line-height:1.35;font-weight:700;letter-spacing:-.02em}
.rt-fig p{margin:0;font-size:clamp(15.5px,1.7vw,17.5px);line-height:1.65;color:var(--ink-2)}

/* the mark */
.rt-brand{max-width:900px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,48px);align-items:center}
.rt-brand img{width:100%;height:auto;border-radius:22px}
.rt-brand h3{margin:0 0 10px;font-size:clamp(20px,2.3vw,24px);font-weight:700;letter-spacing:-.02em}
.rt-brand p{margin:0 0 14px;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.rt-keys{display:flex;flex-wrap:wrap;gap:8px}
.rt-keys span{padding:5px 13px;border-radius:999px;border:1px solid var(--cs-pill-line);background:var(--cs-pill);font:500 13px/1.5 var(--display)}

/* functions: one image each (natural shape), caption under it */
.rt-fns{max-width:1100px;margin:0 auto;padding:clamp(20px,3vw,30px) 22px clamp(20px,3vw,40px)}
.rt-fn{margin:0;padding:clamp(22px,4.4vw,46px) 0;display:flex;flex-direction:column;align-items:center}
.rt-fn img{display:block;width:100%;max-width:880px;height:auto;border-radius:22px;background:var(--rt-img);box-shadow:var(--cs-shadow)}
.rt-fn figcaption{max-width:540px;margin-top:19px;text-align:center}
.rt-fn h3{margin:0 0 8px;font-size:clamp(22px,2.6vw,26.6px);font-weight:700;letter-spacing:-.02em;line-height:1.45}
.rt-fn p{margin:0;font-size:clamp(16px,1.75vw,17.9px);line-height:1.65;color:var(--ink-2)}

/* interface: the screens, then the app beside a line of text */
.rt-split{max-width:900px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(22px,4vw,48px);align-items:center}
.rt-split img{width:100%;height:auto;border-radius:22px;background:var(--rt-img)}
.rt-split h3{margin:0 0 10px;font-size:clamp(20px,2.3vw,24px);font-weight:700;letter-spacing:-.02em}
.rt-split p{margin:0;font-size:16.5px;line-height:1.7;color:var(--ink-2)}

/* facts under About */
.rt-facts{display:flex;flex-wrap:wrap;gap:8px 26px;margin:6px 0 0;padding:16px 0 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink-2)}
.rt-facts b{display:block;font:600 11.5px/1.6 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.cs-badge.is-plain{cursor:default}
.cs-badge.is-plain:hover{transform:none;box-shadow:none}

@media (max-width:900px){
  .rt-pains{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rt-needs{grid-template-columns:1fr}
  .rt-need h3{min-height:0}
}
@media (max-width:640px){
  .rt-sec,.rt-fns{padding-left:16px;padding-right:16px}
  .rt-voice,.rt-brand,.rt-split{grid-template-columns:1fr}
  .rt-voice img{max-width:420px;margin:0 auto}
  .rt-steps{gap:6px}
  .rt-steps li{padding:6px 10px;font-size:12px}
  .rt-pains{grid-template-columns:1fr;gap:10px}
  .rt-note{flex-direction:column;gap:4px}
  .rt-fig img,.rt-fn img,.rt-voice img,.rt-brand img,.rt-split img{border-radius:16px}
  .rt-split img{max-width:360px;margin:0 auto}
}
/* 10/15: the Red Dot Design Concept 2026 award as a chip in the hero, marked with a red dot */
.cs-chips span.is-award{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500}
.cs-chips span.is-award img{width:17px;height:17px;flex:none;display:block}
/* the Awards block: the Red Dot sphere (from Figma, "Award logo · reddot" 3524:32) + the award in the site type */
.rt-award{display:inline-flex;align-items:center;gap:16px;margin:2px auto 22px;text-align:left}
.rt-award img{width:68px;height:68px;flex:none;display:block}
.rt-award b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.rt-award span{display:block;margin-top:4px;font-size:15px;color:var(--ink-2)}
@media(max-width:640px){.rt-award img{width:56px;height:56px}.rt-award b{font-size:21px}}
/* 10/16: the award is shown as the Red Dot logo (case.css .cs-logos); the chip and the sphere + text lockup are gone */
.rt .cs-awards p{font-size:15px}