/* ==========================================================================
   Freedom Machine: site styles
   1. Tokens
   2. Base
   3. Layout helpers
   4. Components (brand, labels, headings)
   5. Sections (hero → footer, in page order)
   6. Responsive
   ========================================================================== */

/* 1. Tokens
   ========================================================================== */
:root {
  --ink: #11120f;
  --cream: #f4f1e8;
  --paper: #f2f0e8;
  --white: #ffffff;
  --black: #111111;
  --acid: #e8ff3d;
  --orange: #ff5b35;
  --blue: #5066ff;
  --muted: #777777;
  --muted-soft: #c7c7c2;

  --font-sans: "Inter", Arial, sans-serif;

  --shell-max: 1500px;
  --shell-pad: 36px;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shade-bottom: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, transparent 55%);
}

/* 2. Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 3. Layout helpers
   ========================================================================== */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}

.section {
  padding: 130px 0;
}

/* Photo with a dark gradient for legible overlaid text */
.shaded {
  position: relative;
  overflow: hidden;
}

.shaded::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shade-bottom);
  pointer-events: none;
}

.shaded > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-copy {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 2;
  color: var(--white);
}

/* 4. Components
   ========================================================================== */

/* Brand mark */
.brand {
  display: inline-flex;
  text-decoration: none;
}

/* matches the footer lockup: 330.2 design px of the 1733-wide layout */
.brand__logo {
  display: block;
  width: min(19.05vw, 381px);
  height: auto;
}

/* Small uppercase labels */
.kicker,
.eyebrow {
  margin-top: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.kicker {
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: 1.6px;
}

.eyebrow {
  margin-bottom: 22px;
  font-size: 12px;
  letter-spacing: 1.4px;
}

/* Headings */
.mega {
  margin: 0;
  font-size: clamp(72px, 10.2vw, 160px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.075em;
}

.section-title {
  margin: 0;
  font-size: clamp(54px, 7.2vw, 108px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.section-title--spaced {
  margin-bottom: 55px;
}

/* 5. Sections
   ========================================================================== */

/* Navigation ------------------------------------------------------------- */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  padding: 38px 6.5% 0;
  color: var(--white);
}

/* Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  height: min(900px, 100vh);
  min-height: 760px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.31) 0%, rgba(0, 0, 0, 0.11) 50%, rgba(0, 0, 0, 0.06)),
    url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.16), transparent 45%);
}

.hero__content {
  position: absolute;
  left: 6.5%;
  bottom: 8%;
  z-index: 2;
  max-width: 1050px;
}

.hero__lede {
  max-width: 530px;
  margin: 30px 0;
  font-size: 20px;
  line-height: 1.45;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* App Store / Google Play badges (364x108 @3x artwork, shown at 48px tall) */
.store-badge {
  display: inline-flex;
  transition: opacity 0.2s, transform 0.2s;
}

.store-badge:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.store-badge__img {
  height: 48px;
  width: auto;
}

/* The badge artwork is dark grey for light backgrounds; render it white on dark ones */
.store-badge--light .store-badge__img {
  filter: brightness(0) invert(1);
}

/* Intro ------------------------------------------------------------------ */
.intro {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
  align-items: start;
}

.intro__copy {
  max-width: 680px;
  margin: 10px 0 0;
  font-size: 24px;
  line-height: 1.35;
}

.intro__copy + .intro__copy {
  margin-top: 24px;
}

.intro__app {
  width: 100%;
  max-width: 880px;
  height: auto;
  aspect-ratio: 880 / 728;
  object-fit: contain;
  margin-top: 48px;
}

/* Discover ---------------------------------------------------------------
   A 1600x786 composition that scales with the page. Everything on the
   right-hand stage is placed with the design's own pixel coordinates:
     --x / --y  top-left corner in the 1600x786 design
     --w / --h  size in design pixels
     --r        rotation
   The stage starts at design x = 600 and is 1000 x 786 design pixels.
   --------------------------------------------------------------------- */
.discover {
  --discover-bg: #0f0f0f;
  --discover-cream: #f2eee3;
  --discover-orange: #fa560d;

  overflow: hidden;
  /* past 1920px the frame centres; keep the dark and cream sides going */
  background: linear-gradient(90deg, var(--discover-bg) 50%, var(--discover-cream) 50%);
  color: var(--white);
}

.discover__frame {
  /* 1 design pixel of the full 1600-wide layout */
  --fpx: 0.0625cqw;

  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 1600 / 786;
  background: var(--discover-bg);
  container-type: inline-size;
}

/* Left column text */
.discover__text {
  position: absolute;
  top: 0;
  left: calc(32 * var(--fpx));
  width: calc(560 * var(--fpx));
  padding-top: calc(110.3 * var(--fpx));
}

.discover__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f0f0f0;
}

.discover__title {
  margin: calc(22.65 * var(--fpx)) 0 0;
  font-size: calc(115.2 * var(--fpx));
  font-weight: 800;
  line-height: calc(100.8 * var(--fpx));
  letter-spacing: -0.075em;
  color: #fafafa;
}

.discover__lede {
  max-width: calc(545 * var(--fpx));
  margin: calc(23.75 * var(--fpx)) 0 0;
  font-size: min(20px, 1.389vw); /* 20px from 1440 wide, scales with the layout below that */
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #d4d4d4;
}

/* Right-hand stage */
.discover__stage {
  /* 1 design pixel on the stage */
  --px: 0.1cqw;

  position: absolute;
  top: 0;
  left: 37.5%;
  width: 62.5%;
  height: 100%;
  container-type: inline-size;
}

.discover__stage > * {
  position: absolute;
  left: calc((var(--x, 600) - 600) / 10 * 1%);
  top: calc(var(--y, 0) / 7.86 * 1%);
  width: calc(var(--w, 1000) / 10 * 1%);
  height: calc(var(--h, 786) / 7.86 * 1%);
  margin: 0;
  transform: rotate(var(--r, 0deg));
}

.discover__map {
  background: url("../img/discover/topo-map.png") center / cover no-repeat;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%);
}

.discover__wedge {
  background: var(--discover-cream);
  /* design points: (1575,0) (1600,0) (1600,786) (1378.5,786) */
  clip-path: polygon(97.5% 0, 100% 0, 100% 100%, 77.85% 100%);
}

/* Route, trails and pins */
.discover__route {
  overflow: visible;
}

.discover__trails path {
  fill: none;
  stroke: rgba(236, 236, 236, 0.55);
  stroke-width: 1.8;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
}

.discover__line-glow,
.discover__line,
.discover__line-core,
.discover__line-tail {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.discover__line-glow {
  stroke: rgba(255, 98, 20, 0.28);
  stroke-width: 10;
}

.discover__line {
  stroke: #ff6418;
  stroke-width: 6;
}

.discover__line-core {
  stroke: #ff9a52;
  stroke-width: 1.8;
  opacity: 0.55;
}

.discover__line-tail {
  stroke: #f47a3c;
  stroke-width: 2;
}

.discover__stops circle {
  fill: #ffc08f;
}

.discover__stop-light {
  fill: #ffffff;
  stroke: #f47a3c;
  stroke-width: 1.6;
}

.discover__pin {
  fill: var(--discover-orange);
}

/* Photos */
.discover__photo {
  object-fit: cover;
  border-radius: calc(8 * var(--px));
  box-shadow: 0 calc(10 * var(--px)) calc(26 * var(--px)) rgba(0, 0, 0, 0.35);
}

.discover__photo--top   { --x: 1035;   --y: 37;     --w: 171;   --h: 136.5; }
.discover__photo--left  { --x: 744;    --y: 349;    --w: 272.5; --h: 172;   border-radius: calc(9 * var(--px)); }
.discover__photo--right { --x: 1267.5; --y: 281.35; --w: 184;   --h: 149.5; --r: -2.8deg; border-radius: calc(9 * var(--px)); }

/* Cards */
.dcard {
  display: block;
  border-radius: calc(12 * var(--px));
  color: #151515;
  text-decoration: none;
  box-shadow: 0 calc(12 * var(--px)) calc(28 * var(--px)) rgba(0, 0, 0, 0.35);
  transition: filter 0.2s;
}

.dcard:hover {
  filter: brightness(1.04);
}

.dcard > * {
  position: absolute;
  margin: 0;
}

.dcard__icon {
  /* every card uses the same app icon badge: same size, same colours */
  left: calc(var(--text-x) * var(--px));
  top: calc(20 * var(--px));
  display: grid;
  place-items: center;
  width: calc(36 * var(--px));
  height: calc(36 * var(--px));
  border-radius: 50%;
  background: #ffffff;
  color: #1d1d1f;
}

.dcard__icon svg {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Title and text sit on baselines measured from the design */
.dcard__title,
.dcard__text {
  left: calc(var(--text-x) * var(--px));
  line-height: 1;
  white-space: nowrap;
}

.dcard__title {
  top: calc((var(--title-base) - 19 * 0.864) * var(--px));
  font-size: calc(19 * var(--px));
  font-weight: 700;
}

.dcard__text {
  top: calc((var(--text-base) - 12.5 * 0.864) * var(--px));
  font-size: calc(12.5 * var(--px));
  color: var(--text-color, #454341);
}

.dcard__arrow {
  right: calc(var(--arrow-right) * var(--px));
  top: calc((var(--arrow-y) - 7) * var(--px));
  width: calc(17 * var(--px));
  height: calc(14 * var(--px));
  fill: none;
  stroke: var(--arrow-color, currentColor);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dcard--places {
  --x: 688; --y: 257.5; --w: 237; --h: 129;
  --text-x: 20.5; --title-base: 81; --text-base: 101.5;
  --arrow-right: 19; --arrow-y: 100.5;
  border-radius: calc(11 * var(--px));
  background: var(--discover-cream);
}

.dcard--people {
  --x: 1226.05; --y: 111.95; --w: 244.5; --h: 131; --r: -3.4deg;
  --text-x: 23; --title-base: 79.7; --text-base: 95.8;
  --arrow-right: 20; --arrow-y: 100.7;
  --text-color: #2a2a24;
  border-radius: calc(13 * var(--px));
  background: #e8ff3d;
}

.dcard--events {
  --x: 1111.5; --y: 317.65; --w: 196; --h: 133.3; --r: 4.55deg;
  --text-x: 22.3; --title-base: 85.9; --text-base: 104.8;
  --arrow-right: 21; --arrow-y: 103.5;
  --text-color: #1d1410;
  --arrow-color: rgba(0, 0, 0, 0.4);
  border-radius: calc(13 * var(--px));
  background: #fb6934;
}

.dcard--routes {
  --x: 932; --y: 520.5; --w: 241; --h: 136.5;
  --text-x: 20.5; --title-base: 85; --text-base: 103;
  --arrow-right: 19.5; --arrow-y: 104.5;
  --text-color: #d2d2d2;
  background: #252525;
  color: #f5f5f5;
}

/* Small uppercase labels (top = first baseline minus its offset in the line box) */
.dlabel {
  height: auto;
  padding: 0;
  list-style: none;
  font-size: calc(10.5 * var(--px));
  font-weight: 500;
  line-height: calc(16 * var(--px));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dlabel--start { --x: 884.5;  --y: 39.2;  --w: 120; line-height: calc(17 * var(--px)); color: #e2e2e2; }
.dlabel--trail { --x: 682.5;  --y: 703.7; --w: 160; color: #e2e2e2; }
.dlabel--end   { --x: 1469;   --y: 669.7; --w: 120; letter-spacing: 0.08em; color: #77736a; }
.dlabel--list  { --x: 1486.5; --y: 420.7; --w: 110; line-height: calc(18 * var(--px)); letter-spacing: 0.13em; color: #9b968b; }

/* short rule under two of the labels */
.dlabel--trail::after,
.dlabel--list::after {
  content: "";
  display: block;
  width: calc(38 * var(--px));
  height: calc(2 * var(--px));
  margin-top: calc(12.3 * var(--px));
  background: currentColor;
}

.dlabel--list::after {
  width: calc(37 * var(--px));
  margin-top: calc(9.3 * var(--px));
  background: #6f6b63;
}

.dlabel .is-strong { color: #2f2d29; }
.dlabel .is-mid    { color: #5e5a53; }

/* People (social strip) -------------------------------------------------- */
.social-strip {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 10px;
  height: 650px;
}

.tile {
  background: #dddddd;
}

.tile > img {
  transition: transform 0.8s;
}

.tile:hover > img {
  transform: scale(1.025);
}

.tile .overlay-copy {
  max-width: 85%;
}

.tile h3 {
  margin: 5px 0;
  font-size: 31px;
  letter-spacing: -1.5px;
}

.tile p {
  margin: 0;
  font-size: 13px;
  opacity: 0.85;
}

/* Adventures -------------------------------------------------------------
   Two panels: a dark composition on the left, acid-yellow copy on the right.
   Everything on the stage is placed with the design's own pixel coordinates:
     --x / --y  top-left corner in the 1732x908 design (stage starts at x = 0)
     --w / --h  size in design pixels
     --r        rotation
   Card contents use coordinates measured inside each (rotated) card.
   --------------------------------------------------------------------- */
.adv {
  --adv-dark: #131513;
  --adv-acid: #e8ff3d;
  --adv-card: #f5efe8;
  --adv-orange: #fe7211;
  --adv-ink: #111111;

  overflow: hidden;
  background: linear-gradient(90deg, var(--adv-dark) 50%, var(--adv-acid) 50%);
}

.adv__frame {
  --fpx: 0.0577cqw; /* one design pixel of the 1732-wide layout */

  position: relative;
  max-width: 2000px;
  margin: 0 auto;
  aspect-ratio: 1732 / 908;
  background: var(--adv-dark);
  container-type: inline-size;
}

/* Left composition ------------------------------------------------------ */
.adv__stage {
  --px: 0.0954cqw; /* one design pixel on the 1048-wide stage */

  position: absolute;
  inset: 0 48% 0 0;
  container-type: inline-size;
}

.adv__stage > * {
  position: absolute;
  left: calc(var(--x, 0) / 10.48 * 1%);
  top: calc(var(--y, 0) / 9.08 * 1%);
  width: calc(var(--w, 1048) / 10.48 * 1%);
  height: calc(var(--h, 908) / 9.08 * 1%);
  margin: 0;
  transform: rotate(var(--r, 0deg));
}

.adv__arcs {
  overflow: visible;
}

.adv__arcs path {
  fill: none;
  stroke: var(--adv-acid);
  stroke-width: 2;
}

/* Small uppercase labels */
.advlabel {
  height: auto;
  font-size: calc(15 * var(--px));
  font-weight: 500;
  line-height: calc(21 * var(--px));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #74736e;
}

.advlabel::after {
  content: "";
  display: block;
  width: calc(34 * var(--px));
  height: calc(2 * var(--px));
  margin-top: calc(11 * var(--px));
  background: currentColor;
}

.advlabel--outside { --x: 48;  --y: 41;  --w: 200; }
.advlabel--roads   { --x: 914; --y: 51;  --w: 130; }
.advlabel--plan    { --x: 530; --y: 768; --w: 130; }

/* Cards ----------------------------------------------------------------- */
.advcard {
  border-radius: calc(26 * var(--px));
  background: var(--adv-card);
  color: var(--adv-ink);
  box-shadow: 0 calc(26 * var(--px)) calc(60 * var(--px)) rgba(0, 0, 0, 0.45);
}

.advcard > * {
  position: absolute;
  margin: 0;
  white-space: nowrap;
}

/* text is positioned on the baselines measured from the design */
.advcard__kicker,
.advcard__day,
.advcard__time,
.advcard__foot,
.advcard__from,
.advcard__to,
.advcard__miles,
.advcard__note,
.advcard__going {
  left: calc(var(--tx) * var(--px));
  top: calc((var(--ty) - var(--fs) * 0.864) * var(--px));
  font-size: calc(var(--fs) * var(--px));
  line-height: 1;
}

.advcard__kicker {
  --fs: 18;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.advcard__day,
.advcard__time,
.advcard__going,
.advcard__from,
.advcard__to {
  font-weight: 800;
  letter-spacing: -0.035em;
}

.advcard__foot {
  --fs: 18;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: calc(24 * var(--px));
  text-transform: uppercase;
  color: #6f6d68;
}

.advcard__rule {
  left: calc(var(--rx) * var(--px));
  top: calc(var(--ry) * var(--px));
  width: calc(var(--rw) * var(--px));
  height: calc(1.5 * var(--px));
  background: #cfc9c0;
  transform: rotate(var(--rr, 0deg));
  transform-origin: left center;
}

/* round buttons in the corner of a card */
.advcard__go {
  left: calc((var(--bx) - 30.5) * var(--px));
  top: calc((var(--by) - 30.5) * var(--px));
  display: grid;
  place-items: center;
  width: calc(61 * var(--px));
  height: calc(61 * var(--px));
  border-radius: 50%;
  background: var(--adv-ink);
}

.advcard__go svg {
  width: calc(28 * var(--px));
  height: calc(28 * var(--px));
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* When card */
.advcard--when {
  --x: 93; --y: 128; --w: 330; --h: 288; --r: -12.4deg;
}

.advcard--when .advcard__kicker { --tx: 31; --ty: 37.5; --fs: 17; }
.advcard--when .advcard__day    { --tx: 31; --ty: 109; --fs: 89; text-transform: uppercase; transform: scaleX(0.72); transform-origin: left bottom; }
.advcard--when .advcard__time   { --tx: 37; --ty: 195; --fs: 103; color: var(--adv-orange); transform: scaleX(0.765); transform-origin: left bottom; }
.advcard--when .advcard__foot   { --tx: 34; --ty: 252.5; --fs: 18; }
.advcard--when .advcard__rule   { --rx: 34; --ry: 220; --rw: 256; }

/* Route card */
.advcard--route {
  --x: 458.5; --y: 143.3; --w: 508.5; --h: 310.2; --r: 7.25deg;
}

.advcard--route .advcard__kicker { --tx: 36; --ty: 44; --fs: 13.8; }
.advcard--route .advcard__from   { --tx: 39; --ty: 102.5; --fs: 43.8; }
.advcard--route .advcard__to     { --tx: 39; --ty: 145; --fs: 43.8; display: flex; align-items: center; gap: calc(13 * var(--px)); }
.advcard--route .advcard__miles  { --tx: 42; --ty: 195; --fs: 27.5; font-weight: 500; color: #7c7a74; letter-spacing: 0.08em; text-transform: uppercase; }
.advcard--route .advcard__miles b { font-weight: 800; color: var(--adv-ink); letter-spacing: -0.02em; }
.advcard--route .advcard__note   { --tx: 42; --ty: 246; --fs: 19; line-height: calc(24 * var(--px)); color: #46443f; }
.advcard--route .advcard__rule   { --rx: 42; --ry: 214; --rw: 373; }

.advcard__to-arrow {
  width: calc(44 * var(--px));
  height: calc(30 * var(--px));
  fill: none;
  stroke: var(--adv-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.advcard__disc {
  left: calc((var(--dx) - 65) * var(--px));
  top: calc((var(--dy) - 65) * var(--px));
  width: calc(130 * var(--px));
  height: calc(130 * var(--px));
  border-radius: 50%;
  background: var(--adv-acid);
  --dx: 412; --dy: 103;
}

.advcard__disc svg { width: 100%; height: 100%; }

.advcard--route .advcard__go { --bx: 449.5; --by: 253; }

/* People card */
.advcard--people {
  --x: 621.1; --y: 489; --w: 355.6; --h: 284.2; --r: -4.21deg;
}

.advcard--people .advcard__kicker { --tx: 30; --ty: 37; --fs: 13.8; }
.advcard--people .advcard__going  { --tx: 29; --ty: 84; --fs: 38.5; text-transform: uppercase; }
.advcard--people .advcard__rule   { --rx: 30; --ry: 190; --rw: 301; }
.advcard--people .advcard__foot   { --tx: 31; --ty: 222; --fs: 17; letter-spacing: 0.14em; line-height: calc(22 * var(--px)); color: #35332f; }
.advcard--people .advcard__go     { --bx: 304.9; --by: 235.6; width: calc(55 * var(--px)); height: calc(55 * var(--px)); left: calc((var(--bx) - 27.5) * var(--px)); top: calc((var(--by) - 27.5) * var(--px)); }

.advfaces {
  position: absolute;
  inset: 0;
}

.advfaces img,
.advfaces__more {
  position: absolute;
  max-width: none;
  width: calc(58 * var(--px));
  height: calc(58 * var(--px));
  border-radius: 50%;
  object-fit: cover;
}

.advfaces img:nth-child(1) { left: calc(29 * var(--px)); top: calc(108 * var(--px)); z-index: 2; }
.advfaces img:nth-child(2) { left: calc(64 * var(--px)); top: calc(108 * var(--px)); z-index: 3; }
.advfaces img:nth-child(3) { left: calc(99 * var(--px)); top: calc(108 * var(--px)); z-index: 4; }
.advfaces img:nth-child(4) { left: calc(134 * var(--px)); top: calc(108 * var(--px)); z-index: 5; }
.advfaces img:nth-child(5) { left: calc(169 * var(--px)); top: calc(108 * var(--px)); z-index: 6; }
.advfaces img:nth-child(6) { left: calc(204 * var(--px)); top: calc(108 * var(--px)); z-index: 7; }

.advfaces__more {
  left: calc(258 * var(--px));
  top: calc(108 * var(--px));
  z-index: 1;
  display: grid;
  place-items: center;
  background: #d9d3ca;
  font-size: calc(20 * var(--px));
  font-weight: 600;
  color: #3a3833;
}

/* Machines welcome ------------------------------------------------------ */
.advmachines {
  --x: 86; --y: 447.5; --w: 503; --h: 198; --r: -2.7deg;

  border: calc(1.5 * var(--px)) solid rgba(255, 255, 255, 0.13);
  border-radius: calc(26 * var(--px));
  color: #ffffff;
}

.advmachines > * {
  position: absolute;
  margin: 0;
}

.advmachines__title {
  left: calc(38.6 * var(--px));
  top: calc((39.4 - 18 * 0.864) * var(--px));
  font-size: calc(18 * var(--px));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e7e5df;
}

/* the item only carries the coordinates; ring and label place themselves */
.advmachines__item {
  display: contents;
}

/* one line, evenly spaced */
.advmachines__item--car   { --cx: 92.2;  --cy: 100; }
.advmachines__item--moto  { --cx: 244.7; --cy: 100; }
.advmachines__item--cycle { --cx: 397.1; --cy: 100; }

.advmachines__ring {
  position: absolute;
  left: calc((var(--cx) - 61) * var(--px));
  top: calc((var(--cy) - 61) * var(--px));
  display: grid;
  place-items: center;
  width: calc(122 * var(--px));
  height: calc(122 * var(--px));
  border: calc(1.5 * var(--px)) solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.advmachines__ring svg {
  /* app interest icons: 24-unit viewBox, stroke 2 as drawn */
  width: calc(52 * var(--px));
  height: calc(52 * var(--px));
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the car artwork sits a little higher in its box than the two bikes */
.advmachines__item--car   svg { transform: translateY(4%); }
.advmachines__item--moto  svg { transform: none; }
.advmachines__item--cycle svg { transform: none; }

.advmachines__label {
  /* all three labels share one baseline, centred under their circle */
  position: absolute;
  left: calc(var(--cx) * var(--px));
  top: calc(174 * var(--px));
  transform: translateX(-50%);
  font-size: calc(16 * var(--px));
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #efedE7;
}

/* Go slab --------------------------------------------------------------- */
.advgo {
  --x: -116.2; --y: 708; --w: 470; --h: 159; --r: 11.54deg;

  display: block;
  border-radius: calc(20 * var(--px));
  background: var(--adv-orange);
  color: var(--adv-ink);
  text-decoration: none;
}

.advgo__text {
  position: absolute;
  left: calc(105 * var(--px));
  top: calc((132 - 145 * 0.864) * var(--px));
  font-size: calc(145 * var(--px));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.advgo__arrow {
  position: absolute;
  left: calc(343 * var(--px));
  top: calc(42 * var(--px));
  width: calc(99 * var(--px));
  height: calc(74 * var(--px));
  fill: none;
  stroke: var(--adv-ink);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Right copy ------------------------------------------------------------ */
.adv__copy {
  position: absolute;
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
  /* text starts the same distance down as the other sections (152 px, as in Machines) */
  padding: calc(152 * var(--fpx)) calc(52 * var(--fpx)) 0 calc(42 * var(--fpx));
  background: var(--adv-acid);
  color: var(--adv-ink);
}

.adv__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.adv__title {
  margin: calc(28 * var(--fpx)) 0 0;
  font-size: calc(124.78 * var(--fpx));
  font-weight: 800;
  line-height: calc(117.2 * var(--fpx));
  letter-spacing: -0.045em;
}

.adv__lede {
  max-width: calc(555 * var(--fpx));
  margin: calc(42 * var(--fpx)) 0 0;
  font-size: min(20px, 1.389vw); /* 20px from 1440 wide, scales with the layout below that */
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Routes ------------------------------------------------------------------
   Map composition with floating cards and a phone, laid out on the pixel
   coordinates of the 1905x825 design: --x / --y are an element's top-left
   corner and --px is one design pixel.  The media query at the end reflows
   it into a stack for phones.
   ---------------------------------------------------------------------- */
.route {
  --route-bg: #f6f1e9;
  --route-ink: #15140f;
  --route-orange: #f2571f;

  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 90px;
  background: var(--route-bg);
  color: var(--route-ink);
}

.route__frame {
  --px: 0.052493cqw; /* one design pixel of the 1905-wide layout */

  position: relative;
  max-width: 2200px;
  margin: 0 auto;
  aspect-ratio: 1905 / 825;
  container-type: inline-size;
}

.route__frame > * {
  position: absolute;
  margin: 0;
  left: calc(var(--x, 0) * var(--px));
  top: calc(var(--y, 0) * var(--px));
}

/* Left copy ------------------------------------------------------------- */
.route__eyebrow {
  --x: 88; --y: 159;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.route__title {
  --x: 84; --y: 194;

  font-size: calc(137.16 * var(--px));
  font-weight: 800;
  line-height: calc(132 * var(--px));
  letter-spacing: -0.045em;
}

.route__lede {
  --x: 88; --y: 634;

  /* matches the Adventures, Discover and Machines ledes (23.8 px of the 1732 layout) */
  width: calc(560 * var(--px));
  font-size: min(20px, 1.389vw); /* 20px from 1440 wide, scales with the layout below that */
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Map ------------------------------------------------------------------- */
.route__map {
  --x: 1008; --y: 64;

  width: calc(829 * var(--px));
  height: calc(536 * var(--px));
  overflow: hidden;
  border-radius: calc(20 * var(--px));
}

.route__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* bites the step out of the map's bottom-right corner */
.route__notch {
  --x: 1737; --y: 521;

  width: calc(130 * var(--px));
  height: calc(110 * var(--px));
  border-top-left-radius: calc(20 * var(--px));
  background: var(--route-bg);
}

/* Route type panel ------------------------------------------------------ */
.route__types {
  --x: 1560; --y: 94;

  width: calc(251 * var(--px));
  padding: calc(19.2 * var(--px)) calc(20 * var(--px)) calc(17.9 * var(--px)) calc(28 * var(--px));
  border-radius: calc(15 * var(--px));
  background: #0e0e0e;
  color: #ffffff;
}

.route__types-title {
  margin: 0;
  font-size: calc(20.6 * var(--px));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.route__types ul {
  margin: calc(6.8 * var(--px)) 0 0;
  padding: 0;
  list-style: none;
}

.route__types li {
  display: flex;
  align-items: center;
  height: calc(42.5 * var(--px));
  font-size: calc(17 * var(--px));
  letter-spacing: -0.005em;
}

.route__types-icon {
  width: calc(21 * var(--px));
  height: calc(21 * var(--px));
  margin-right: calc(20 * var(--px));
  fill: none;
  stroke: #8d8d8d;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route__types .is-on .route__types-icon {
  stroke: var(--route-orange);
}

.route__radio {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  margin-left: auto;
  border: calc(1.6 * var(--px)) solid #55554f;
  border-radius: 50%;
}

.route__types .is-on .route__radio {
  border: calc(6 * var(--px)) solid var(--route-orange);
  background: #ffffff;
}

/* Stop cards ------------------------------------------------------------ */
.route__card {
  padding: calc(6 * var(--px));
  border-radius: calc(15 * var(--px));
  background: #fbf8f2;
  box-shadow: 0 calc(16 * var(--px)) calc(34 * var(--px)) rgba(28, 24, 16, 0.22);
}

.route__card--scenic { --x: 732; --y: 40; width: calc(274 * var(--px)); height: calc(228 * var(--px)); }
.route__card--food   { --x: 1063; --y: 434; width: calc(338 * var(--px)); height: calc(249 * var(--px)); }

.route__card-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(10 * var(--px));
}

.route__card > :not(.route__card-photo) {
  position: absolute;
}

.route__pin {
  left: calc(20 * var(--px));
  width: calc(18 * var(--px));
  height: calc(26 * var(--px));
  fill: var(--route-orange);
}

.route__card--scenic .route__pin { top: calc(184 * var(--px)); }
.route__card--food   .route__pin { top: calc(205 * var(--px)); }

.route__card-kind {
  margin: 0;
  left: calc(57 * var(--px));
  font-size: calc(19.3 * var(--px));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.route__card-name {
  margin: 0;
  left: calc(57 * var(--px));
  font-size: calc(16.5 * var(--px));
  line-height: 1;
  letter-spacing: -0.01em;
  color: #6d6a63;
}

.route__card--scenic .route__card-kind { top: calc(180.3 * var(--px)); }
.route__card--scenic .route__card-name { top: calc(200.7 * var(--px)); }
.route__card--food   .route__card-kind { top: calc(201.3 * var(--px)); }
.route__card--food   .route__card-name { top: calc(221.7 * var(--px)); }

.route__chev {
  width: calc(9 * var(--px));
  height: calc(15 * var(--px));
  fill: none;
  stroke: #b3afa6;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route__card--scenic .route__chev { left: calc(245 * var(--px)); top: calc(190 * var(--px)); }
.route__card--food   .route__chev { left: calc(302 * var(--px)); top: calc(211 * var(--px)); }

/* Phone ----------------------------------------------------------------- */
.route__phone {
  --x: 735; --y: 327;

  width: calc(258 * var(--px));
  height: auto;
  transform: rotate(-6.9deg);
  transform-origin: top left;
  border-radius: calc(38 * var(--px));
  box-shadow: 0 calc(26 * var(--px)) calc(52 * var(--px)) rgba(28, 24, 16, 0.3);
}

/* Marginalia ------------------------------------------------------------ */
.route__script {
  --x: 1452; --y: 634;

  width: calc(226 * var(--px));
  height: auto;
}

.route__tag {
  --x: 1775; --y: 578;

  width: calc(72 * var(--px));
  text-align: center;
  color: #a9a49a;
}

.route__arrow {
  width: calc(38 * var(--px));
  height: calc(38 * var(--px));
  margin-bottom: calc(22 * var(--px));
  fill: none;
  stroke: var(--route-orange);
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.route__tag ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(13 * var(--px));
  font-weight: 600;
  line-height: calc(18.5 * var(--px));
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.route__tag > span {
  display: block;
  width: calc(30 * var(--px));
  height: calc(1.6 * var(--px));
  margin: calc(12 * var(--px)) auto 0;
  background: #b8b3a8;
}

/* Routes: phones --------------------------------------------------------- */
@media (max-width: 850px) {
  .route__frame {
    --px: 1px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    aspect-ratio: auto;
    padding: 84px 20px 90px;
    container-type: normal;
  }

  .route__frame > * {
    position: static;
    left: auto;
    top: auto;
  }

  .route {
    padding-top: 0;
    padding-bottom: 0;
  }

  .route__eyebrow {
    order: 1;
    font-size: 12px;
    letter-spacing: 0.22em;
  }

  .route__title {
    order: 2;
    margin-top: 18px;
    font-size: 54px;
    line-height: 0.9;
  }

  .route__lede {
    order: 3;
    width: auto;
    margin-top: 24px;
    font-size: 17px;
    line-height: 26px;
  }

  .route__phone {
    order: 4;
    align-self: center;
    width: 232px;
    margin-top: 44px;
    transform: none;
    border-radius: 34px;
  }

  /* the map art is built around the cards that sit on it, so on phones the
     phone screenshot carries the route instead */
  .route__map {
    display: none;
  }

  .route__card {
    position: relative;
    order: 6;
    width: 100%;
    height: auto;
    margin-top: 16px;
    padding-bottom: 68px;
  }

  .route__card--food { order: 7; }

  .route__card > :not(.route__card-photo) {
    position: absolute;
  }

  .route__card .route__pin  { left: 18px; top: auto; bottom: 22px; width: 18px; height: 26px; }
  .route__card .route__card-kind { left: 52px; top: auto; bottom: 40px; font-size: 18px; }
  .route__card .route__card-name { left: 52px; top: auto; bottom: 20px; font-size: 15px; }
  .route__card .route__chev { left: auto; right: 18px; top: auto; bottom: 27px; width: 9px; height: 15px; }

  .route__types {
    order: 8;
    width: 100%;
    max-width: 320px;
    margin-top: 28px;
    padding: 20px 20px 18px 24px;
    border-radius: 15px;
  }

  .route__types-title { font-size: 18px; }
  .route__types ul { margin-top: 8px; }
  .route__types li { height: 40px; font-size: 16px; }
  .route__types-icon { width: 20px; height: 20px; margin-right: 18px; }
  .route__radio { width: 19px; height: 19px; border-width: 1.6px; }
  .route__types .is-on .route__radio { border-width: 6px; }

  .route__script {
    order: 9;
    align-self: center;
    width: 200px;
    margin-top: 40px;
  }

  .route__notch,
  .route__tag {
    display: none;
  }
}

/* Hangouts --------------------------------------------------------------- */
.hangouts {
  padding: 140px 0;
  background: var(--black);
  color: var(--white);
}

.hangouts__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 55px;
}

.hangouts__text {
  max-width: 420px;
  font-size: 20px;
  line-height: 1.5;
}

.places {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
}

.place {
  --shade-bottom: linear-gradient(0deg, rgba(0, 0, 0, 0.67), transparent 60%);
  height: 580px;
}

.place small {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.place h3 {
  margin: 7px 0;
  font-size: 30px;
}

/* Statement -------------------------------------------------------------- */
.statement {
  padding: 150px 0;
  background: #ff5c15;
  color: var(--white);
  text-align: center;
}

.statement__accent {
  color: #252525;
}

.statement__text {
  max-width: 570px;
  margin: 35px auto 0;
  font-size: 20px;
  line-height: 1.5;
}

/* Your machines ----------------------------------------------------------
   Three tilted profile cards over oversized ghost words, copy on the right.
   Everything is placed with the pixel coordinates of the 1733x907 design:
     --x / --y  top-left corner, --w / --h  size, --r  rotation.
   Card contents use coordinates measured inside each (straightened) card.
   --------------------------------------------------------------------- */
.ride {
  --ride-bg: #f2f1e9;
  --ride-ghost: #dbd7ce;
  --ride-ink: #15140f;

  overflow: hidden;
  padding-bottom: 60px;
  background: var(--ride-bg);
  color: var(--ride-ink);
}

.ride__frame {
  --px: 0.0577cqw; /* one design pixel */

  position: relative;
  overflow: hidden;
  max-width: 2000px;
  margin: 0 auto;
  aspect-ratio: 1733 / 907;
  container-type: inline-size;
}

.ride__stage {
  position: absolute;
  inset: 0;
  container-type: inline-size;
}

.ride__stage > *,
.ride__copy {
  position: absolute;
  left: calc(var(--x, 0) / 17.33 * 1%);
  top: calc(var(--y, 0) / 9.07 * 1%);
  margin: 0;
  transform: rotate(var(--r, 0deg));
}

/* Ghost words ----------------------------------------------------------- */
.ghost {
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ride-ghost);
}

/* the design sets these in a condensed face; Inter is squeezed to the same width */
.ghost {
  font-size: calc(287 * var(--px));
  transform: scaleX(0.72);
  transform-origin: left bottom;
}

.ghost--car   { --x: -6;  --y: -39; }
.ghost--bike  { --x: 8;   --y: 499; }
.ghost--cycle { --x: 658; --y: 638; }

/* Profile cards --------------------------------------------------------- */
.rcard {
  width: calc(var(--w) / 17.33 * 1%);
  height: calc(var(--h) / 9.07 * 1%);
  border-radius: calc(26 * var(--px));
  background: var(--card-bg);
  color: var(--card-ink);
  box-shadow: 0 calc(24 * var(--px)) calc(60 * var(--px)) rgba(20, 18, 12, 0.18);
}

.rcard > * {
  position: absolute;
  margin: 0;
}

.rcard__avatar {
  left: calc((var(--ax) - var(--ad) / 2) * var(--px));
  top: calc((var(--ay) - var(--ad) / 2) * var(--px));
  width: calc(var(--ad) * var(--px));
  height: calc(var(--ad) * var(--px));
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}

.rcard__name,
.rcard__meta {
  left: calc(var(--tx) * var(--px));
  line-height: 1;
  white-space: nowrap;
}

.rcard__name {
  top: calc((var(--name-base) - var(--name-fs) * 0.864) * var(--px));
  font-size: calc(var(--name-fs) * var(--px));
  font-weight: 800;
  letter-spacing: -0.02em;
}

.rcard__meta {
  top: calc((var(--meta-base) - 16 * 0.864) * var(--px));
  font-size: calc(16 * var(--px));
  color: var(--card-meta);
}

/* the three-dot menu, drawn as vector circles so it stays sharp */
.rcard__dots {
  left: calc(var(--dots-x) * var(--px));
  top: calc((var(--dots-y) - 4) * var(--px));
  width: calc(28 * var(--px));
  height: calc(8 * var(--px));
  fill: currentColor;
}

.rcard__photo {
  left: calc(var(--px-x) * var(--px));
  top: calc(var(--px-y) * var(--px));
  width: calc(var(--px-w) * var(--px));
  height: calc(var(--px-h) * var(--px));
  max-width: none;
  border-radius: calc(14 * var(--px));
  object-fit: cover;
}

.rcard__tags {
  left: calc(var(--tags-x) * var(--px));
  top: calc(var(--tags-y) * var(--px));
  display: flex;
  gap: calc(10 * var(--px));
  padding: 0;
  list-style: none;
}

.rcard__tags li {
  padding: calc(10 * var(--px)) calc(13 * var(--px));
  border-radius: 999px;
  background: var(--tag-bg);
  font-size: calc(15 * var(--px));
  line-height: 1;
  white-space: nowrap;
}

.rcard--james {
  --x: 52; --y: 128; --w: 400; --h: 420; --r: -6.7deg;
  --card-bg: #f8f6f1; --card-ink: #15140f; --card-meta: #4a4843; --tag-bg: #eceae3;
  --ax: 49; --ay: 78; --ad: 62;
  --tx: 100; --name-base: 76; --name-fs: 23; --meta-base: 98;
  --dots-x: 366; --dots-y: 66;
  --px-x: 11; --px-y: 116; --px-w: 384; --px-h: 229;
  --tags-x: 12; --tags-y: 368;
  z-index: 3;
}

.rcard--sophie {
  --x: 470; --y: 148; --w: 399; --h: 366; --r: 7.9deg;
  --card-bg: #f57530; --card-ink: #17120d; --card-meta: #2c1d12; --tag-bg: #fd7029;
  --ax: 58; --ay: 48; --ad: 68;
  --tx: 111; --name-base: 47; --name-fs: 27; --meta-base: 74;
  --dots-x: 351; --dots-y: 36;
  --px-x: 22; --px-y: 87; --px-w: 358; --px-h: 218;
  --tags-x: 50; --tags-y: 314;
  z-index: 1;
}

.rcard--tom {
  --x: 331; --y: 514; --w: 410; --h: 321; --r: 8.6deg;
  --card-bg: #1c1c19; --card-ink: #f5f5f2; --card-meta: #c9c7c1; --tag-bg: #2e2e2a;
  --ax: 54; --ay: 68; --ad: 56;
  --tx: 107; --name-base: 57; --name-fs: 22; --meta-base: 76;
  --dots-x: 364; --dots-y: 40;
  --px-x: 17; --px-y: 97; --px-w: 383; --px-h: 148;
  --tags-x: 24; --tags-y: 262;
  z-index: 2;
}

/* Copy ------------------------------------------------------------------ */
.ride__copy {
  --x: 1059; --y: 152;

  width: calc(620 / 17.33 * 1%);
}

.ride__copy > * {
  margin: 0;
}

.ride__eyebrow {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ride__title {
  margin-top: calc(29 * var(--px));
  font-size: calc(124.78 * var(--px));
  font-weight: 800;
  line-height: calc(117.2 * var(--px));
  letter-spacing: -0.045em;
}

.ride__lede {
  margin-top: calc(40 * var(--px));
  font-size: min(20px, 1.389vw); /* 20px from 1440 wide, scales with the layout below that */
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Final CTA -------------------------------------------------------------- */
/* the hero owns the largest type on the page; this heading sits with the
   other section headings (~7.37vw, matching Discover, Adventures, Machines) */
.final .mega {
  font-size: clamp(54px, 7.2vw, 108px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.final {
  display: flex;
  align-items: flex-end;
  min-height: 760px;
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.67), transparent 65%),
    url("https://images.unsplash.com/photo-1511994298241-608e28f14fde?auto=format&fit=crop&w=2200&q=88");
  background-size: cover;
  background-position: center;
  color: var(--white);
}

.final__inner {
  width: 100%;
  padding: 0 6% 7%;
}

.final__text {
  max-width: 520px;
  font-size: 20px;
  line-height: 1.5;
}

/* Footer ------------------------------------------------------------------
   Full-bleed dark composition laid out on the pixel coordinates of the
   1733x908 design: --x / --y place an element's box, --px is one design
   pixel.  The media query at the end of the sheet reflows it for phones.
   ---------------------------------------------------------------------- */
.foot {
  --foot-bg: #0c0d0c;

  overflow: hidden;
  background: var(--foot-bg);
  color: var(--white);
}

.foot__frame {
  --px: 0.0577cqw; /* one design pixel of the 1733-wide layout */
  --shift: 110;    /* breathing room above the composition */

  position: relative;
  max-width: 2000px;
  margin: 0 auto;
  aspect-ratio: 1733 / 1078;
  container-type: inline-size;
}

.foot__frame > *,
.foot__cols > *,
.foot__brand > * {
  position: absolute;
  margin: 0;
  left: calc(var(--x, 0) * var(--px));
  top: calc(var(--y, 0) * var(--px));
}

/* everything laid out on the frame drops by --shift; nested boxes don't */
.foot__frame > *,
.foot__cols > * {
  top: calc((var(--y, 0) + var(--shift)) * var(--px));
}

/* F-mark photo ----------------------------------------------------------
   Two slanted bands of the Freedom Machine mark, clipped out of one photo
   so the landscape runs continuously across both.  Swap the image only. */
.foot__fmark {
  --x: 1160; --y: 0;

  width: calc(573 * var(--px));
  height: calc(495 * var(--px));
}

.foot__fmark span {
  position: absolute;
  inset: 0;
  background: url("../img/footer-fmark.jpg") 0 0 / 100% 100% no-repeat;
}

.foot__fmark-a {
  clip-path: polygon(
    37.24% 0%, 100% 0%, 100% 23.43%, 57.87% 23.43%,
    20.03% 78.38%, 13.44% 78.38%, 1.22% 60.40%, 1.22% 52.32%);
}

.foot__fmark-b {
  clip-path: polygon(
    60.82% 36.36%, 91.45% 36.36%, 79.16% 54.14%, 65.36% 54.14%,
    34.50% 98.79%, 17.68% 98.79%);
}

/* Handwritten mark ------------------------------------------------------ */
.foot__script {
  --x: 1021.4; --y: 215.6;

  width: calc(151.5 * var(--px));
  height: auto;
  opacity: 0.45;
}

/* Headline -------------------------------------------------------------- */
.foot__eyebrow {
  --x: 90; --y: 122.8;

  font-size: calc(19.3 * var(--px));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.foot__title {
  --x: 88; --y: 165;

  font-size: calc(124.78 * var(--px));
  font-weight: 800;
  line-height: calc(92.8 * var(--px));
  letter-spacing: -0.045em;
}

/* Word list ------------------------------------------------------------- */
.foot__words {
  --x: 1551; --y: 308.9;

  padding: 0;
  list-style: none;
  font-size: calc(16.2 * var(--px));
  font-weight: 500;
  line-height: calc(24 * var(--px));
  letter-spacing: 0.072em;
  text-transform: uppercase;
  color: #eaeae7;
}

.foot__words-rule {
  --x: 1551; --y: 468.6;

  width: calc(37 * var(--px));
  height: calc(3 * var(--px));
  background: #dcdcdc;
}

/* Brand ----------------------------------------------------------------- */
.foot__brand {
  --x: 88.3; --y: 597.7;

  width: calc(330.2 * var(--px));
  height: calc(116.1 * var(--px));
}

.foot__lockup {
  --x: 0; --y: 0;

  width: 100%;
  height: auto;
}

/* Link columns ---------------------------------------------------------- */
.foot__cols {
  display: contents;
}

.foot__col--support { --x: 635; --y: 595; }
.foot__col--company { --x: 878; --y: 595; }
.foot__col--app     { --x: 1080; --y: 595; }
.foot__col--loop    { --x: 1355; --y: 593; }

.foot__label {
  margin: 0;
  font-size: calc(15.1 * var(--px));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  white-space: nowrap;
}

.foot__links {
  margin: calc(15.8 * var(--px)) 0 0;
  padding: 0;
  list-style: none;
  font-size: calc(18.4 * var(--px));
  line-height: calc(33.5 * var(--px));
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.foot__links a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.2s ease;
}

.foot__links a:hover,
.foot__links a:focus-visible {
  color: var(--white);
}

/* Store badges ---------------------------------------------------------- */
.foot__badge {
  display: block;
  width: calc(179 * var(--px));
  margin-top: calc(12.9 * var(--px));
}

.foot__badge:first-of-type {
  margin-top: calc(15 * var(--px));
}

.foot__badge img {
  display: block;
  width: 100%;
  height: auto;
  /* the badge artwork is dark grey for light backgrounds; flip it to white */
  filter: brightness(0) invert(1);
}

/* Newsletter ------------------------------------------------------------ */
.foot__loop-text {
  margin: calc(14.4 * var(--px)) 0 0;
  font-size: calc(17.2 * var(--px));
  line-height: 1;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.foot__signup {
  display: flex;
  align-items: center;
  width: calc(293 * var(--px));
  height: calc(50 * var(--px));
  margin-top: calc(21 * var(--px));
  padding: 0 calc(12 * var(--px)) 0 calc(18 * var(--px));
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: calc(9 * var(--px));
}

.foot__signup input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: calc(17.5 * var(--px));
  letter-spacing: -0.005em;
  color: var(--white);
}

.foot__signup input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.foot__signup input:focus {
  outline: none;
}

.foot__signup button {
  display: grid;
  place-items: center;
  width: calc(34 * var(--px));
  height: calc(34 * var(--px));
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
}

.foot__signup svg {
  width: calc(27 * var(--px));
  height: calc(27 * var(--px));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Social ---------------------------------------------------------------- */
.foot__social {
  display: flex;
  gap: calc(26.9 * var(--px));
  margin: calc(21 * var(--px)) 0 0 calc(-0.7 * var(--px));
}

.foot__social a {
  display: block;
  color: var(--white);
}

.foot__social svg {
  display: block;
  width: calc(37.5 * var(--px));
  height: calc(37.5 * var(--px));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
}

.foot__social .dot {
  fill: currentColor;
  stroke: none;
}



/* Bottom bar ------------------------------------------------------------ */
.foot__copy {
  --y: 888.6;

  font-size: calc(16.6 * var(--px));
  line-height: 1;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.88);
}

.foot__copy { --x: 87; }



/* Screen-reader only ----------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Footer: phones --------------------------------------------------------- */
@media (max-width: 850px) {
  .foot__frame {
    --px: 1px;

    aspect-ratio: auto;
    padding-top: 30px;
    padding: 0 20px 46px;
    container-type: normal;
  }

  .foot__frame > *,
  .foot__cols > *,
  .foot__brand > * {
    position: static;
    left: auto;
    top: auto;
    right: auto;
  }

  .foot__fmark {
    position: relative;
    width: calc(100% + 40px);
    height: auto;
    margin: 0 -20px 30px;
    aspect-ratio: 573 / 495;
  }

  .foot__script {
    width: 96px;
    margin: 0 0 20px auto;
  }

  .foot__eyebrow {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .foot__title {
    margin-top: 16px;
    font-size: 54px;
    line-height: 0.88;
  }

  .foot__words {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin-top: 28px;
    font-size: 12px;
    line-height: 1.1;
  }

  .foot__words-rule {
    display: block;
    margin-top: 18px;
  }

  .foot__brand {
    width: auto;
    height: auto;
    margin-top: 58px;
    text-align: center;
  }

  .foot__lockup {
    width: 228px;
    margin: 0 auto;
  }

  .foot__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 38px 18px;
    margin-top: 48px;
  }

  .foot__cols > * {
    min-width: 0;
  }

  .foot__col--loop {
    grid-column: 1 / -1;
  }

  .foot__label {
    font-size: 11px;
  }

  .foot__links {
    margin-top: 14px;
    font-size: 16px;
    line-height: 2;
    white-space: normal;
  }

  .foot__badge,
  .foot__badge:first-of-type {
    width: 152px;
    margin-top: 12px;
  }

  .foot__loop-text {
    margin-top: 13px;
    font-size: 15px;
    white-space: normal;
  }

  .foot__signup {
    width: 100%;
    max-width: 320px;
    height: 48px;
    margin-top: 16px;
    padding: 0 10px 0 15px;
    border-radius: 9px;
  }

  .foot__signup input {
    font-size: 16px;
  }

  .foot__signup svg {
    width: 22px;
    height: 22px;
  }

  .foot__social {
    gap: 20px;
    margin: 18px 0 0;
  }

  .foot__social svg {
    width: 30px;
    height: 30px;
  }

  .foot__copy {
    margin-top: 50px;
    font-size: 14px;
  }

}

/* Scroll reveal (driven by assets/js/main.js) --------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* 6. Responsive
   ========================================================================== */
@media (max-width: 850px) {
  :root {
    --shell-pad: 20px;
  }

  .section {
    padding: 85px 0;
  }

  .mega {
    font-size: 70px;
  }

  /* Nav */
  .nav {
    height: auto;
    padding: 26px 20px 0;
  }

  .brand__logo {
    width: 228px;
  }

  /* Hero */
  .hero__content {
    left: 20px;
    right: 20px;
    bottom: 48px;
  }

  .hero .mega {
    font-size: 72px;
  }

  .final .mega {
    font-size: 54px;
  }

  /* Stacked grids */
  .intro {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .social-strip {
    grid-template-columns: 1fr;
    height: auto;
  }

  .tile {
    height: 430px;
  }

  /* Adventures: composition above, copy below */
  .adv {
    background: var(--adv-dark);
  }

  .adv__frame {
    aspect-ratio: auto;
  }

  .adv__stage {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1048 / 908;
  }

  .adv__copy {
    --fpx: 1px;

    position: static;
    width: auto;
    height: auto;
    padding: 56px 20px 64px;
  }

  .adv__title { font-size: 54px; line-height: 0.95; }
  .adv__lede  { max-width: none; font-size: 17px; line-height: 1.5; }

  .hangouts__head {
    display: block;
  }

  .places {
    grid-template-columns: 1fr;
  }

  .place {
    height: 480px;
  }

  .statement {
    padding: 100px 20px;
  }

  .final {
    min-height: 680px;
  }

  /* Discover: text above, composition below */
  .discover {
    background: var(--discover-bg);
  }

  .discover__frame {
    --fpx: 1px;

    aspect-ratio: auto;
    padding-bottom: 12px;
  }

  .discover__text {
    position: static;
    width: auto;
    padding: 85px 20px 36px;
  }

  .discover__eyebrow { font-size: 12px; }
  .discover__title   { margin-top: 18px; font-size: 54px; line-height: 0.9; }
  .discover__lede    { max-width: none; margin-top: 22px; font-size: 18px; line-height: 1.45; }

  .discover__stage {
    position: relative;
    left: -10%;
    width: 125%;
    height: auto;
    aspect-ratio: 1000 / 786;
  }

  .dlabel--list,
  .dlabel--end {
    display: none;
  }

  /* Your machines: cards above, copy below */
  .ride__frame {
    aspect-ratio: auto;
    padding-bottom: 48px;
  }

  .ride__stage {
    /* show the cards, not the empty right-hand half */
    position: relative;
    inset: auto;
    left: -4%;
    width: 175%;
    aspect-ratio: 1733 / 907;
  }

  .ride__copy {
    --px: 1px;

    position: static;
    width: auto;
    padding: 0 20px;
    transform: none;
  }

  .ride__eyebrow { font-size: 12px; }
  .ride__title   { font-size: 54px; line-height: 0.95; }
  .ride__lede    { font-size: 17px; line-height: 1.5; margin-top: 20px; }
}

/* Mobile polish ----------------------------------------------------------
   Phones keep the desktop order and emphasis: headline, supporting copy,
   then the composition, rebuilt so nothing overlaps or shrinks to specks. */
@media (max-width: 850px) {
  /* the hero line holds its two-line shape on the narrowest phones */
  .hero .mega {
    font-size: min(72px, calc((100vw - 40px) / 4.9));
  }

  /* Community: the intro copy reads as a lede, below the heading */
  .intro {
    gap: 28px;
  }

  .intro__copy {
    font-size: 19px;
    line-height: 1.45;
  }

  /* Routing: phone, then the two stops side by side, then route type */
  .route__frame {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    align-items: start;
  }

  .route__frame > * {
    grid-column: 1 / -1;
  }

  .route__phone,
  .route__script {
    justify-self: center;
  }

  .route__card {
    grid-column: auto;
    margin-top: 28px;
    padding: 6px 6px 16px;
    container-type: inline-size;
  }

  .route__card-photo {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .route__card .route__card-kind,
  .route__card .route__card-name {
    position: static;
    margin: 0 20px 0 34px;
  }

  .route__card .route__card-kind { margin-top: 14px; font-size: 16px; }
  .route__card .route__card-name { margin-top: 5px; font-size: 13px; line-height: 1.3; }

  .route__card .route__pin {
    left: 10px;
    top: calc((100cqw - 12px) * 0.75 + 18px);
    bottom: auto;
    width: 15px;
    height: 22px;
  }

  .route__card .route__chev {
    right: 10px;
    top: calc((100cqw - 12px) * 0.75 + 22px);
    bottom: auto;
    width: 8px;
    height: 13px;
  }

  .route__types {
    justify-self: stretch;
    max-width: none;
  }

  /* Hangouts: portrait crops that fit a phone screen */
  .hangouts {
    padding: 90px 0;
  }

  .hangouts__head {
    margin-bottom: 36px;
  }

  .hangouts__text {
    margin: 22px 0 0;
    font-size: 17px;
  }

  .place {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 560px;
  }

  /* Your machines: the three members cascade down the screen instead of
     piling up, at a size where their names and tags can be read.
     The stage shows a 560 design px wide window of the composition. */
  .ride__stage {
    left: max(0px, calc((100% - 448px) / 2));
    width: min(calc(100% * 1733 / 560), 1386px); /* capped at 0.8px per design px on tablets */
    aspect-ratio: 1733 / 1330;
  }

  .ride__stage > * {
    top: calc(var(--y, 0) * var(--px));
  }

  .rcard {
    height: calc(var(--h) * var(--px));
  }

  .ghost { font-size: calc(200 * var(--px)); }

  .ghost--car    { --x: -6;  --y: 10; }
  .ghost--bike   { --x: 190; --y: 440; }
  .ghost--cycle  { --x: -6;  --y: 880; }

  .rcard--james  { --x: 36;  --y: 70; }
  .rcard--sophie { --x: 124; --y: 550; }
  .rcard--tom    { --x: 28;  --y: 975; }

  .ride__copy { padding-top: 28px; }
}

/* Top menu --------------------------------------------------------------- */
.menu {
  display: flex;
  gap: clamp(18px, 2.2vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: #ff5c15;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.menu a:hover::after,
.menu a:focus-visible::after,
.menu a[aria-current="page"]::after {
  transform: scaleX(1);
}

.menu-toggle {
  display: none;
}

/* About page: the nav sits on cream, so the menu is ink */
.about-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
}

@media (max-width: 1100px) {
  .menu-toggle {
    position: relative;
    z-index: 12;
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .menu-toggle span {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: currentColor;
    transition: transform 0.25s ease, top 0.25s ease;
  }

  .menu-toggle span:first-child { top: 17px; }
  .menu-toggle span:last-child  { top: 25px; }

  .is-open > .menu-toggle span:first-child { top: 21px; transform: rotate(45deg); }
  .is-open > .menu-toggle span:last-child  { top: 21px; transform: rotate(-45deg); }

  .menu {
    position: absolute;
    top: calc(100% + 14px);
    right: 6.5%;
    z-index: 11;
    display: none;
    flex-direction: column;
    gap: 20px;
    min-width: 220px;
    padding: 26px 28px;
    border-radius: 18px;
    background: #111111;
    color: var(--white);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  }

  .is-open > .menu { display: flex; }

  .menu a { font-size: 13px; }
}

@media (max-width: 850px) {
  .menu { right: 20px; left: 20px; }
}

/* over photo headers, a soft shadow keeps the menu legible */
@media (min-width: 1101px) {
  .nav .menu a { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }
}

/* Find your tribe on phones: clear space above the footer (7% of a phone
   width was only ~27px) */
@media (max-width: 850px) {
  .final__inner { padding: 0 20px 90px; }
}

/* Footer on phones: a dark gap between the section above and the F-mark
   (the earlier padding-top was being cancelled by the padding shorthand) */
@media (max-width: 850px) {
  .foot__frame { padding-top: 70px; }
}