@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/outfit-400.woff2") format("woff2");
}
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/outfit-500.woff2") format("woff2");
}
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/outfit-600.woff2") format("woff2");
}
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/outfit-700.woff2") format("woff2");
}

:root {
  --bg: #141210;
  --ink: #e6e2d8;
  --muted: #8a847a;
  --emerald: #d4923a;
  --cyan: #e8b05a;
  --line: rgba(230, 226, 216, .14);
  --line-hot: rgba(212, 146, 58, .48);
  --smoke: rgba(20, 18, 16, .78);
  --smoke-soft: rgba(30, 26, 22, .62);
  --font: Outfit, "Segoe UI", sans-serif;
  --mono: Outfit, "Segoe UI", sans-serif;
  --film-contrast: .78;
}

.loader {
  background: radial-gradient(circle at 50% 45%, #2a2218, #141210 55%);
}
.loader__fill {
  background: linear-gradient(90deg, #d4923a, #e8b05a);
}
.loader__text, .micro, .kicker {
  color: #d4923a;
}

.journey__title .grad,
.journey__h2 .grad {
  color: #d4923a;
}

.metro-chip {
  display: inline-block;
  margin: 0 0 .55rem;
  padding: .28rem .55rem;
  border: 1px solid rgba(212, 146, 58, .35);
  border-radius: 2px;
  color: #e6e2d8;
  font: 500 .68rem/1.2 Outfit, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.film-caption {
  margin: .35rem 0 0;
  color: #8a847a;
  font-size: .78rem;
}

.job-lead {
  display: grid;
  gap: .85rem;
}
.job-extra {
  display: grid;
  gap: .55rem;
  opacity: .88;
}
.job-extra .mosaic-card {
  padding: .75rem .85rem;
}
.job-extra h3 {
  font-size: .92rem;
}

.tile-media {
  margin: .15rem;
  border-radius: 12px;
  overflow: hidden;
}
.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story-frame p {
  color: #c4bfb4;
  font-size: .86rem;
  line-height: 1.5;
  max-width: 52ch;
}
.story-frame p + p { margin-top: .55rem; }

.quiet-line {
  margin-top: .35rem;
  color: #8a847a;
  font-size: .78rem;
}

.interior {
  min-height: 100dvh;
  overflow: auto;
  background: #141210;
  color: #e6e2d8;
  font-family: Outfit, "Segoe UI", sans-serif;
}
.interior .wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 5rem 1.2rem 3rem;
}
.interior a { color: #d4923a; }
.interior nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 2rem;
}
.interior h1 { font-size: 2rem; letter-spacing: -.03em; margin: 0 0 .6rem; }
.interior p { color: #c4bfb4; line-height: 1.55; }
.interior .job-list {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: .7rem;
  margin: 1.2rem 0;
}
.interior .job-list article {
  border: 1px solid rgba(230,226,216,.12);
  padding: .85rem;
  border-radius: 2px;
}
.interior .job-list article:first-child { grid-column: 1 / -1; }
.interior .job-list .small { opacity: .8; }

/* ---------- mosaic: square photos, mixed sizes ---------- */
#journey .info-mosaic.mosaic--okc {
  display: grid;
  gap: .65rem;
  align-self: stretch;
  min-height: 0;
  height: 100%;
}
#journey .mosaic--okc > .mosaic-card {
  min-height: 0;
  overflow: hidden;
  padding: .85rem .9rem;
  align-content: center !important;
}
#journey .mosaic--okc > .mosaic-card--media {
  display: grid !important;
  grid-template-rows: auto auto;
  gap: .55rem;
  padding: .55rem;
  align-content: start !important;
}
#journey .mosaic--okc .tile-media {
  position: relative !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
}
#journey .mosaic--okc .tile-media img {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none !important;
}
#journey .mosaic--okc .tile-copy h2,
#journey .mosaic--okc .tile-copy h3,
#journey .mosaic--okc h3 {
  font-size: .95rem;
  margin: 0 0 .25rem;
}
#journey .mosaic--okc .tile-copy p,
#journey .mosaic--okc > .mosaic-card > p {
  margin: 0;
  font-size: .74rem;
  line-height: 1.4;
  color: #c4bfb4;
}

@media (min-width: 861px) {
  .mosaic--hook {
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
    align-content: center;
  }
  .mosaic--hook > .mosaic-card {
    width: min(100%, 22rem);
  }
  .mosaic--blast {
    grid-template-columns: 1.15fr .85fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "img mobile"
      "img seams"
      "steel seams";
  }
  .mosaic--blast > .tile-lg { grid-area: img; }
  .mosaic--blast > .tile-sm:nth-of-type(2) { grid-area: mobile; }
  .mosaic--blast > .tile-md { grid-area: seams; }
  .mosaic--blast > .tile-sm:nth-of-type(4) { grid-area: steel; }
  .mosaic--how {
    grid-template-columns: 1.2fr .8fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "img tuned"
      "img foot";
  }
  .mosaic--how > .tile-lg { grid-area: img; }
  .mosaic--how > .tile-md { grid-area: tuned; }
  .mosaic--how > .tile-sm { grid-area: foot; }
  .mosaic--jobs {
    grid-template-columns: 1.15fr .85fr .85fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "rust mill mill"
      "paint graffiti wood";
  }
  .mosaic--jobs > .tile-lg { grid-area: rust; }
  .mosaic--jobs > .tile-md { grid-area: mill; }
  .mosaic--jobs > .tile-wide { grid-area: paint; }
  .mosaic--jobs > .tile-sq:nth-of-type(4) { grid-area: graffiti; }
  .mosaic--jobs > .tile-sq:nth-of-type(5) { grid-area: wood; }
}

@media (max-width: 860px) {
  /* Compact glass over film. Do not fill the viewport. */
  #journey .glance-stack {
    display: none !important;
  }
  #journey .journey__layout,
  #journey .journey__layout--booking {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - var(--nav-h) - 1.4rem) !important;
    max-height: none !important;
    gap: 0 !important;
    align-content: stretch !important;
  }
  #journey .journey__section {
    padding: calc(var(--nav-h) + .45rem) .7rem 0 !important;
    overflow: hidden;
    align-content: start !important;
  }
  #journey .story-frame {
    align-self: start;
    padding: .7rem .75rem !important;
    gap: .32rem !important;
    border-radius: 14px !important;
  }
  #journey .film-caption,
  #journey .story-frame > p + p,
  #journey .story-frame .quiet-line {
    display: none !important;
  }
  #journey .journey__lede {
    font-size: .78rem !important;
    line-height: 1.35 !important;
    max-width: none !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  #journey .journey__title {
    font-size: clamp(1.35rem, 6.8vw, 1.85rem) !important;
    line-height: 1.05 !important;
  }
  #journey .journey__h2 {
    font-size: clamp(1.15rem, 5.8vw, 1.45rem) !important;
  }
  #journey .metro-chip {
    margin: 0 0 .3rem !important;
    font-size: .62rem !important;
  }
  #journey .journey__actions { margin-top: .25rem !important; }

  #journey .info-mosaic.mosaic--okc {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: .4rem !important;
    align-content: end;
    align-self: end;
    margin-bottom: 4.6rem;
  }
  .mosaic--hook,
  .mosaic--blast,
  .mosaic--how,
  .mosaic--jobs {
    height: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
  }

  /* Photo stops: one proof plate + one argument card. */
  #journey .mosaic--okc > .mosaic-card {
    display: none !important;
  }
  #journey .mosaic--hook > .mosaic-card--feature,
  #journey .mosaic--blast > .tile-lg,
  #journey .mosaic--how > .tile-lg {
    display: grid !important;
    grid-template-columns: 4.6rem minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: .55rem !important;
    padding: .4rem .45rem !important;
    height: auto !important;
    min-height: 0 !important;
    grid-area: auto !important;
  }
  #journey .mosaic--blast > .tile-md,
  #journey .mosaic--how > .tile-md {
    display: block !important;
    padding: .55rem .65rem !important;
    height: auto !important;
    min-height: 0 !important;
    grid-area: auto !important;
  }
  #journey .mosaic--blast > .tile-md > p,
  #journey .mosaic--how > .tile-md > p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .68rem !important;
    line-height: 1.3 !important;
    color: #c4bfb4;
  }
  #journey .mosaic--okc .tile-media {
    display: block !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    aspect-ratio: 1 / 1 !important;
    width: 4.6rem !important;
    height: 4.6rem !important;
    max-height: 4.6rem !important;
    min-height: 4.6rem !important;
    margin: 0 !important;
  }
  #journey .mosaic--okc .tile-copy {
    grid-row: 1 !important;
    grid-column: 2 !important;
    min-width: 0;
  }
  #journey .mosaic--okc .tile-copy h2,
  #journey .mosaic--okc .tile-copy h3,
  #journey .mosaic--okc h3 {
    font-size: .82rem !important;
    margin: 0 0 .15rem !important;
    color: #e6e2d8;
  }
  #journey .mosaic--okc img[src*="job-wrench"] {
    object-position: 40% 36% !important;
  }

  /* Jobs rust now has a real photo: compact plate + copy, same as other phone media. */
  #journey .mosaic--jobs > .tile-lg.mosaic-card--media {
    display: grid !important;
    grid-template-columns: 4.6rem minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: .55rem !important;
    padding: .4rem .45rem !important;
  }
  #journey .mosaic--jobs .tile-copy p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: .15rem 0 0 !important;
    font-size: .68rem !important;
    line-height: 1.3 !important;
    color: #c4bfb4;
  }

  /* Jobs: three titles + two-line outcomes. Extras stay desktop. */
  #journey .mosaic--jobs > .tile-lg,
  #journey .mosaic--jobs > .tile-md,
  #journey .mosaic--jobs > .tile-wide {
    display: block !important;
    padding: .5rem .65rem !important;
    height: auto !important;
    min-height: 0 !important;
    grid-area: auto !important;
  }
  #journey .mosaic--jobs > .mosaic-card > p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: .15rem 0 0 !important;
    font-size: .68rem !important;
    line-height: 1.3 !important;
    color: #c4bfb4;
  }
  #journey .mosaic--jobs .quiet-line,
  #journey .mosaic--jobs > .tile-sq {
    display: none !important;
  }

  #journey .booking-host { display: none !important; }
  #journey .journey__layout--booking .booking-cta-card {
    display: grid !important;
    align-self: end;
    margin-bottom: 4.6rem;
    padding: .7rem .75rem !important;
    gap: .28rem !important;
  }
  #journey .booking-cta-card > p { font-size: .74rem !important; }
  #journey .journey__layout--booking .journey__actions .booking-launch {
    display: none !important;
  }
}

@media (max-width: 860px) {
  .interior .job-list {
    grid-template-columns: 1fr;
  }
  .interior .job-list article:first-child { grid-column: auto; }
}

/* ---------- quality pass v6 (2026-08-16) ---------- */
/* Hero gradient line: site amber, not the shell's teal */
#journey .journey__title .grad,
#journey .journey__h2 .grad {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #d4923a !important;
  color: #d4923a !important;
}
@media (min-width: 861px) {
  /* text cards hug their copy; photos absorb the stretch as taller crops */
  #journey .mosaic--okc > .mosaic-card:not(.mosaic-card--media) {
    align-self: start;
  }
  #journey .mosaic--blast > .tile-lg,
  #journey .mosaic--how > .tile-lg {
    align-self: stretch;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  #journey .mosaic--blast > .tile-lg .tile-media,
  #journey .mosaic--how > .tile-lg .tile-media {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  #journey .mosaic--hook { align-content: center; }
  #journey .mosaic--blast, #journey .mosaic--how {
    grid-template-rows: auto auto auto;
    align-content: center;
  }
  #journey .mosaic--jobs {
    grid-template-rows: auto auto;
    align-content: center;
  }
}

#journey .mosaic--okc img[src*="job-wrench"] {
  object-position: 40% 36%;
}

.fallback__h1 {
  margin: 0 0 .6rem;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -.03em;
  line-height: 1.05;
  color: #e6e2d8;
}