/* ============================================
   BIG BOSS — personal brand site
   Design system: dispatch board / job ticket
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=EB+Garamond:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --ink: #F4EEE1;
  --ink-2: #ECE3D0;
  --panel: #E4D9C2;
  --line: #D4C4A4;
  --paper: #3B2A1F;
  --paper-dim: #6B5D4C;
  --amber: #A6763A;
  --amber-dim: #C9A876;
  --rust: #7A4B32;
  --steel: #8A7B63;
  --ok: #4B5D3F;
  --heading: #2A1B12;

  --font-display: 'Playfair Display', serif;
  --font-body: 'EB Garamond', serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 2px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Diagonal hazard texture used sparingly as a structural device */
.hazard-strip {
  height: 6px;
  width: 100%;
  background: repeating-linear-gradient(
    135deg,
    var(--amber),
    var(--amber) 10px,
    var(--ink) 10px,
    var(--ink) 20px
  );
}

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Nav ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 238, 225, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 16px 32px;
  max-width: 1180px;
  margin: 0 auto;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  color: var(--paper);
}

.brand-mark-3d {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: block;
  perspective: 240px;
}

.brand-ring-outer3d,
.brand-ring-inner3d {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-style: preserve-3d;
}

.brand-ring-outer3d {
  border: 1px solid #C9A876;
  animation: ring-swing-outer 12s linear infinite;
}

.brand-ring-outer3d::before,
.brand-ring-outer3d::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background: #A6763A;
  transform: rotate(45deg);
}
.brand-ring-outer3d::before { top: -2.5px; }
.brand-ring-outer3d::after { bottom: -2.5px; }

.brand-ring-inner3d {
  inset: 4px;
  border: 0.75px solid #A6763A;
  animation: ring-swing-inner 8s linear infinite;
}

.brand-text3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  color: #2A1B12;
  pointer-events: none;
}

@keyframes ring-swing-outer {
  0%    { transform: rotateY(0deg);    z-index: 3; }
  24.9% { transform: rotateY(89.5deg); z-index: 3; }
  25%   { transform: rotateY(90deg);   z-index: 1; }
  50%   { transform: rotateY(180deg);  z-index: 1; }
  74.9% { transform: rotateY(269.5deg); z-index: 1; }
  75%   { transform: rotateY(270deg);  z-index: 3; }
  100%  { transform: rotateY(360deg);  z-index: 3; }
}

@keyframes ring-swing-inner {
  0%    { transform: rotateY(0deg);    z-index: 1; }
  24.9% { transform: rotateY(-89.5deg); z-index: 1; }
  25%   { transform: rotateY(-90deg);  z-index: 3; }
  50%   { transform: rotateY(-180deg); z-index: 3; }
  74.9% { transform: rotateY(-269.5deg); z-index: 3; }
  75%   { transform: rotateY(-270deg); z-index: 1; }
  100%  { transform: rotateY(-360deg); z-index: 1; }
}

.brand .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink);
  background: var(--amber);
  padding: 3px 6px;
  border-radius: var(--radius);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-links a {
  padding: 7px 12px;
  color: var(--heading);
  font-weight: 600;
  border: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--amber);
  border-color: var(--line);
}

@media (max-width: 640px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 20px;
  }
  .brand {
    font-size: 15px;
    white-space: normal;
  }
  .brand-mark-3d {
    width: 36px;
    height: 36px;
  }
  .nav-links {
    width: 100%;
    justify-content: flex-start;
    font-size: 11px;
  }
  .nav-links a {
    padding: 6px 9px;
  }
  .lang-toggle {
    margin-left: 0;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding: 90px 0 60px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--amber);
  display: inline-block;
  animation: blink 1.6s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

h1.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--heading);
  text-transform: uppercase;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  margin: 0 0 28px;
  letter-spacing: -0.01em;
  max-width: 14ch;
}

h1.hero-title em {
  font-style: normal;
  color: var(--amber);
}

.hero-sub {
  font-size: 19px;
  color: var(--paper-dim);
  max-width: 56ch;
  margin: 0 0 36px;
}

/* ---------- Ecosystem strip (ventures.html hero) ---------- */
.ecosystem-strip {
  display: flex;
  align-items: center;
  max-width: 620px;
  margin-bottom: 14px;
}

.ecosystem-node {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--amber-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(59, 42, 31, 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ecosystem-node:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px rgba(59, 42, 31, 0.22);
}

.ecosystem-node img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.ecosystem-line {
  flex: 1;
  height: 1px;
  min-width: 16px;
  margin: 0 4px;
  background-image: repeating-linear-gradient(to right, var(--amber-dim) 0, var(--amber-dim) 5px, transparent 5px, transparent 10px);
}

.ecosystem-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--steel);
  max-width: 52ch;
  margin: 0 0 8px;
}

@media (max-width: 640px) {
  .ecosystem-strip { flex-wrap: wrap; gap: 12px; }
  .ecosystem-line { display: none; }
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 24px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.btn-primary {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
  font-weight: 600;
}

.btn-primary:hover {
  background: #b8874a;
}

.btn-ghost {
  color: var(--paper);
  background: var(--panel);
  border-color: var(--paper-dim);
  font-weight: 500;
}

.btn-ghost:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--ink-2);
}

.video-wrap-portrait {
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

@media (min-width: 641px) {
  .video-wrap-portrait { max-width: 380px; }
}

@media (min-width: 921px) {
  .video-wrap-portrait { max-width: 480px; }
}

.video-wrap-portrait video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Section scaffolding ---------- */
section {
  padding: 72px 0;
  border-bottom: 1px solid var(--line);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

h2.section-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 6px 0 0;
  font-weight: 700;
  color: var(--heading);
}

/* ---------- Ventures ledger (signature element) ---------- */
.ledger {
  border: 1px solid var(--line);
}

.ledger-row {
  display: grid;
  grid-template-columns: 90px 1fr 200px 140px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 22px 24px;
  gap: 20px;
  transition: background 0.15s ease;
}

.ledger-row:last-child { border-bottom: none; }

.ledger-row.head {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel);
  padding-top: 14px;
  padding-bottom: 14px;
  background: var(--ink-2);
}

.ledger-row:not(.head):hover {
  background: var(--panel);
}

.ticket-no {
  font-family: var(--font-mono);
  color: var(--amber-dim);
  font-size: 13px;
}

.ledger-main .venture-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--heading);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 4px;
}

.ledger-main .venture-desc {
  color: var(--paper-dim);
  font-size: 14px;
  margin: 0 0 8px;
}

.learn-more {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--amber);
  border-bottom: 1px solid var(--amber-dim);
  padding-bottom: 1px;
}

.learn-more:hover {
  color: var(--rust);
  border-color: var(--rust);
}

.card .learn-more {
  display: inline-block;
  margin-top: 18px;
}

.ledger-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.venture-logo {
  width: 44px;
  height: 44px;
  min-height: 0;
  flex-shrink: 0;
  border-radius: 4px;
}

.venture-logo img {
  object-fit: contain;
  padding: 4px;
}

.venture-logo .media-slot-label {
  font-size: 7px;
  padding: 3px;
  line-height: 1.2;
}

.venture-logo .media-slot-icon {
  font-size: 12px;
  margin-bottom: 1px;
}

.venture-category {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--paper-dim);
  text-transform: uppercase;
}

.status {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border-radius: var(--radius);
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status.live { color: var(--ok); border: 1px solid var(--ok); }
.status.live::before { background: var(--ok); }
.status.build { color: var(--amber); border: 1px solid var(--amber-dim); }
.status.build::before { background: var(--amber); }

@media (max-width: 720px) {
  .ledger-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ledger-row.head { display: none; }
  .ticket-no { order: -1; }
}

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
}

.stat {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}

.stat:last-child { border-right: none; }

.stat .num {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--amber);
}

.stat .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--steel);
  letter-spacing: 0.06em;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
}

/* ---------- Generic content blocks ---------- */
.prose {
  max-width: 68ch;
  color: var(--paper-dim);
  font-size: 17px;
}

.prose p { margin: 0 0 20px; }
.prose strong { color: var(--paper); }

.two-col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
}

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.tag-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--line);
  padding: 6px 12px;
  background: var(--panel);
  color: var(--paper);
}

/* ---------- Cards (Work page) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.card {
  background: var(--ink);
  padding: 32px;
}

.card .card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.card-top-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.card-logo {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.card .venture-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--heading);
  font-size: 22px;
  text-transform: uppercase;
  margin: 0;
}

.card .prose { font-size: 15px; }

.card .tag-list { margin-top: 20px; }

@media (max-width: 860px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact-panel {
  border: 1px solid var(--line);
  padding: 48px;
  background: var(--ink-2);
}

.field {
  margin-bottom: 22px;
}

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin-bottom: 8px;
}

.field input,
.field textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--paper);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  border-radius: var(--radius);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--amber);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-info .item .k {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--steel);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.contact-info .item .v {
  font-size: 17px;
}

.contact-info .item .v a:hover { color: var(--amber); }

/* ---------- Footer ---------- */
footer {
  padding: 40px 0;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lang-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--heading);
  background: transparent;
  border: 1px solid var(--amber-dim);
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  margin-left: 12px;
}

.lang-toggle:hover {
  background: var(--amber);
  color: var(--ink);
}

.footer-sig {
  text-align: center;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-sig a {
  color: var(--amber);
  border-bottom: 1px solid var(--amber-dim);
}

.footer-sig a:hover {
  color: var(--rust);
}

.venture-brand-logo {
  width: 132px;
  height: 132px;
  padding: 14px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.venture-brand-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---------- Media slots (photos you add yourself) ---------- */
.media-slot {
  position: relative;
  border: 1px dashed var(--line);
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

/* Recent Work gallery tiles: a fixed 180px height cropped a lot of every
   photo, especially once the grid drops to 1 column on mobile (very wide,
   short box). An aspect-ratio scales with the tile's actual width instead,
   so far more of each photo stays visible at any screen size. */
.card-grid .media-slot {
  min-height: 0;
  aspect-ratio: 4 / 3;
}

/* Roofing gallery: several photos are portrait/phone shots inside 4:3 tiles,
   so anchor each crop on the part that matters (house, roof, crew). */
.card-grid .media-slot img[src*="roofing-1.jpg"] { object-position: 50% 62%; }
.card-grid .media-slot img[src*="roofing-2.jpg"] { object-position: 50% 68%; }
.card-grid .media-slot img[src*="roofing-3.jpg"] { object-position: 70% 50%; }
.card-grid .media-slot img[src*="roofing-4.jpg"] { object-position: 50% 62%; }
.card-grid .media-slot img[src*="roofing-6.jpg"] { object-position: 50% 62%; }
.card-grid .media-slot img[src*="roofing-7.jpg"] { object-position: 50% 62%; }
.card-grid .media-slot img[src*="roofing-11.jpg"] { object-position: 62% 50%; }

.media-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-slot-label {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel);
  text-align: center;
  padding: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.media-slot.media-empty img { display: none; }
.media-slot.media-empty .media-slot-label { display: block; }

/* On the live deployed site, missing media should just be absent — no
   dev-only "add photo here" instructions for real visitors. The .is-live
   class is added by an inline script in <head> whenever the page isn't
   running on localhost, so this only ever hides on the real domain. */
html.is-live .media-slot.media-empty { display: none; }

.media-slot-icon {
  font-size: 20px;
  display: block;
  margin-bottom: 8px;
  color: var(--amber-dim);
}

/* ---------- Video embeds (videos you add yourself) ---------- */
.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
}

.video-wrap.video-empty .video-placeholder { display: flex; }

/* Same rule as media-slot above: hide the "add your video" dev prompt
   entirely once the site is live, instead of showing it to real visitors. */
html.is-live .video-wrap.video-empty { display: none; }

.play-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--amber);
}

.video-placeholder p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--steel);
}

.video-placeholder code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--amber-dim);
}

/* focus visibility */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ============================================
   HERO — cinematic (homepage only)
   ============================================ */
.hero-cinematic {
  padding: 64px 0 80px;
  overflow: hidden;
  position: relative;
}

.hero-bg-word {
  position: absolute;
  top: -0.12em;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(90px, 16vw, 240px);
  letter-spacing: 0.02em;
  color: var(--heading);
  opacity: 0.05;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.hero-cinematic-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
}

.hero-copy { max-width: 46ch; }

.hero-title--cinematic {
  max-width: 17ch;
  font-size: clamp(38px, 4.6vw, 64px);
}


.hero-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 32px;
  padding-left: 18px;
  border-left: 2px solid var(--amber-dim);
}

.hero-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--heading);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hero-role {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--paper-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-scrollcue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel);
}

.hero-scrollcue:hover { color: var(--amber); }

.hero-scrollcue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  animation: scrollcue-bounce 1.8s ease-in-out infinite;
}

@keyframes scrollcue-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(5px); opacity: 0.4; }
}

/* ---------- Centerpiece stage ---------- */
.hero-stage {
  position: relative;
  height: 380px;
  perspective: 1200px;
}

.hero-centerpiece {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 329px;
  height: 439px;
  margin: -220px 0 0 -165px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateX(var(--tiltX, 0deg));
  transition: transform 0.2s ease;
}

.centerpiece-fh-photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 24px rgba(59, 42, 31, 0.3));
}

/* ---------- Venture story modal (opened by tapping an orbit card) ---------- */
.venture-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.venture-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.venture-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 27, 18, 0.6);
}

.venture-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--ink);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  transform: scale(0.94) translateY(10px);
  transition: transform 0.25s ease;
}

.venture-modal.is-open .venture-modal-panel {
  transform: scale(1) translateY(0);
}

.venture-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(244, 238, 225, 0.92);
  border: 1px solid var(--line);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--heading);
}

.venture-modal-close:hover { background: var(--ink); }

.venture-modal-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--panel);
}

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

.venture-modal-body { padding: 24px 28px 28px; }

.venture-modal-no {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber);
  margin-bottom: 8px;
}

.venture-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--heading);
  margin: 0 0 12px;
}

.venture-modal-story {
  color: var(--paper-dim);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.venture-modal-metric {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber);
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .venture-modal { padding: 0; align-items: flex-end; }
  .venture-modal-panel { max-width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
}

/* ---------- Continuous elliptical orbit: cards ride a visible gold ring, dipping in front of the FH logo, endlessly ---------- */
.hero-stage {
  --orbit-x: 210px;
  --orbit-ring-y: 22.1px;
  --orbit-y-0: 36.49px;
  --orbit-y-8: 30.77px;
  --orbit-y-25: 24.07px;
  --orbit-y-35: 14.26px;
  --orbit-y-50: 6.04px;
  --orbit-z-near: 90px;
  --orbit-z-far: -140px;
  --orbit-rotate: 28deg;
  --orbit-duration: 8s;
  --orbit-ring-h: 150px;
}

/* --orbit-ring-y and --orbit-y-dip are both measured from the FH artwork's
   own base line (see fh-monogram.png) so the ring and the cards' lowest
   point of travel land on the exact same horizontal line as the letters' feet. */
.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--orbit-x) * 2.6);
  height: var(--orbit-ring-h);
  transform: translate(-50%, -50%) translateY(var(--orbit-ring-y));
  border-radius: 50%;
  border: 1px solid rgba(198, 160, 105, 0.45);
  box-shadow: 0 0 24px rgba(198, 160, 105, 0.16), inset 0 0 20px rgba(198, 160, 105, 0.1);
  pointer-events: none;
  z-index: 0;
}

.orbit-ring-glint {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 186, 0.95), rgba(255, 233, 186, 0));
  box-shadow: 0 0 10px 3px rgba(255, 215, 150, 0.5);
  animation: orbit-ring-glint-move var(--orbit-duration) linear infinite;
}

.orbit-ring-glint.is-second {
  animation-delay: calc(var(--orbit-duration) * 0.625);
}

.orbit-ring-star {
  position: absolute;
  width: 3px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #C9A876;
  box-shadow: 0 0 4px 1px rgba(198, 160, 105, 0.65);
  animation: orbit-star-twinkle 3.6s ease-in-out infinite;
}

@keyframes orbit-star-twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.95; }
}

.orbit-ring-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(122, 92, 56, 0.55);
  white-space: nowrap;
  pointer-events: none;
}

@keyframes orbit-ring-glint-move {
  0%    { transform: translate3d(calc(var(--orbit-x) * 1.3), 0, 0); }
  12.5% { transform: translate3d(calc(var(--orbit-x) * 0.919), calc(var(--orbit-ring-h) * 0.354), 0); }
  25%   { transform: translate3d(0, calc(var(--orbit-ring-h) * 0.5), 0); }
  37.5% { transform: translate3d(calc(var(--orbit-x) * -0.919), calc(var(--orbit-ring-h) * 0.354), 0); }
  50%   { transform: translate3d(calc(var(--orbit-x) * -1.3), 0, 0); }
  62.5% { transform: translate3d(calc(var(--orbit-x) * -0.919), calc(var(--orbit-ring-h) * -0.354), 0); }
  75%   { transform: translate3d(0, calc(var(--orbit-ring-h) * -0.5), 0); }
  87.5% { transform: translate3d(calc(var(--orbit-x) * 0.919), calc(var(--orbit-ring-h) * -0.354), 0); }
  100%  { transform: translate3d(calc(var(--orbit-x) * 1.3), 0, 0); }
}

.orbit-fixed-slot {
  position: absolute;
  top: 50%;
  left: 50%;
}

.orbit-card2 {
  display: block;
  width: 148px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  animation-name: venture-orbit;
  animation-duration: var(--orbit-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.orbit-fixed-left .orbit-card2 {
  transform: translate(-50%, -50%) translate3d(calc(var(--orbit-x) * -0.6), 0, 0);
  animation-delay: 0s;
}

.orbit-fixed-right .orbit-card2 {
  transform: translate(-50%, -50%) translate3d(calc(var(--orbit-x) * 0.6), 0, 0);
  animation-delay: calc(var(--orbit-duration) * 0.625);
}

.orbit-card2:hover,
.orbit-card2:focus-visible {
  animation-play-state: paused;
}

/* Each stop's vertical offset (--orbit-y-N) is solved from the ring's own
   ellipse equation — y = ry * sqrt(1 - (x/rx)^2) — at that stop's x position,
   minus half the card's height at that stop's scale, so the card's bottom
   edge rides the ring's front arc exactly, the whole way across, not just
   at dead center. See the "sitting on top of the ring" note below. */
@keyframes venture-orbit {
  0% {
    transform: translate(-50%, -50%) translate3d(calc(var(--orbit-x) * 1.05), var(--orbit-y-0), var(--orbit-z-far)) rotateY(calc(var(--orbit-rotate) * -1.15)) scale(0.38);
    opacity: 0;
    filter: blur(4px);
    z-index: 1;
  }
  8% {
    transform: translate(-50%, -50%) translate3d(var(--orbit-x), var(--orbit-y-8), calc(var(--orbit-z-far) * 0.6)) rotateY(calc(var(--orbit-rotate) * -1)) scale(0.5);
    opacity: 0.3;
    filter: blur(3px);
    z-index: 1;
  }
  21.9% { z-index: 1; }
  22% { z-index: 5; }
  25% {
    transform: translate(-50%, -50%) translate3d(calc(var(--orbit-x) * 0.7), var(--orbit-y-25), calc(var(--orbit-z-near) * 0.25)) rotateY(calc(var(--orbit-rotate) * -0.6)) scale(0.78);
    opacity: 0.82;
    filter: blur(1.1px);
    z-index: 5;
  }
  35% {
    transform: translate(-50%, -50%) translate3d(calc(var(--orbit-x) * 0.35), var(--orbit-y-35), calc(var(--orbit-z-near) * 0.85)) rotateY(calc(var(--orbit-rotate) * -0.15)) scale(1.02);
    opacity: 0.99;
    filter: blur(0.15px);
    z-index: 5;
  }
  50% {
    transform: translate(-50%, -50%) translate3d(0, var(--orbit-y-50), var(--orbit-z-near)) rotateY(0deg) scale(1.16);
    opacity: 1;
    filter: blur(0);
    z-index: 5;
  }
  65% {
    transform: translate(-50%, -50%) translate3d(calc(var(--orbit-x) * -0.35), var(--orbit-y-35), calc(var(--orbit-z-near) * 0.85)) rotateY(calc(var(--orbit-rotate) * 0.15)) scale(1.02);
    opacity: 0.99;
    filter: blur(0.15px);
    z-index: 5;
  }
  75% {
    transform: translate(-50%, -50%) translate3d(calc(var(--orbit-x) * -0.7), var(--orbit-y-25), calc(var(--orbit-z-near) * 0.25)) rotateY(calc(var(--orbit-rotate) * 0.6)) scale(0.78);
    opacity: 0.82;
    filter: blur(1.1px);
    z-index: 5;
  }
  77.9% { z-index: 5; }
  78% { z-index: 1; }
  92% {
    transform: translate(-50%, -50%) translate3d(calc(var(--orbit-x) * -1), var(--orbit-y-8), calc(var(--orbit-z-far) * 0.6)) rotateY(var(--orbit-rotate)) scale(0.5);
    opacity: 0.3;
    filter: blur(3px);
    z-index: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate3d(calc(var(--orbit-x) * -1.05), var(--orbit-y-0), var(--orbit-z-far)) rotateY(calc(var(--orbit-rotate) * 1.15)) scale(0.38);
    opacity: 0;
    filter: blur(4px);
    z-index: 1;
  }
}

.orbit-card-inner {
  display: block;
  background: rgba(244, 238, 225, 0.94);
  border: 1px solid var(--amber-dim);
  border-radius: 14px;
  padding: 16px 12px 13px;
  text-align: center;
  box-shadow: 0 14px 28px rgba(59, 42, 31, 0.18);
}

.orbit-card2:hover .orbit-card-inner,
.orbit-card2:focus-visible .orbit-card-inner {
  border-color: var(--amber);
  box-shadow: 0 22px 40px rgba(59, 42, 31, 0.3);
}

.orbit-card-inner img {
  display: block;
  width: 100%;
  height: 54px;
  object-fit: contain;
  margin-bottom: 9px;
}

.orbit-card-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--heading);
  font-weight: 600;
}

.orbit-card-tagline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 30px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 11px;
  line-height: 1.35;
  color: var(--paper-dim);
  margin-top: 5px;
}

@media (max-width: 920px) {
  .hero-cinematic-grid { grid-template-columns: 1fr; }
  .hero-stage {
    height: 270px;
    margin-top: 20px;
    --orbit-x: 150px;
    --orbit-ring-y: 13.5px;
    --orbit-y-0: 23.32px;
    --orbit-y-8: 18.89px;
    --orbit-y-25: 13.44px;
    --orbit-y-35: 5.78px;
    --orbit-y-50: -0.52px;
    --orbit-z-near: 60px;
    --orbit-z-far: -100px;
    --orbit-rotate: 24deg;
    --orbit-ring-h: 110px;
  }
  .hero-centerpiece { width: 231px; height: 308px; margin: -154px 0 0 -116px; }
  .orbit-card2 { width: 104px; }
  .orbit-card-inner { padding: 10px 8px 9px; border-radius: 12px; }
  .orbit-card-inner img { height: 38px; margin-bottom: 6px; }
  .orbit-card-label { font-size: 9px; min-height: 24px; }
  .orbit-card-tagline { font-size: 9.5px; margin-top: 4px; height: 26px; }
  .orbit-ring-label { font-size: 6.8px; }
  .hero-bg-word { font-size: clamp(70px, 22vw, 140px); }
}

@media (max-width: 480px) {
  .hero-stage {
    height: 210px;
    --orbit-x: 95px;
    --orbit-ring-y: 17.3px;
    --orbit-y-0: 24.26px;
    --orbit-y-8: 21.66px;
    --orbit-y-25: 18.71px;
    --orbit-y-35: 14.29px;
    --orbit-y-50: 10.54px;
    --orbit-z-near: 40px;
    --orbit-z-far: -70px;
    --orbit-rotate: 20deg;
    --orbit-ring-h: 70px;
  }
  .hero-centerpiece { width: 178px; height: 237px; margin: -119px 0 0 -89px; }
  .orbit-card2 { width: 80px; }
  .orbit-card-inner { padding: 8px 6px 7px; }
  .orbit-card-inner img { height: 28px; margin-bottom: 5px; }
  .orbit-card-label { font-size: 8.3px; min-height: 22px; }
  .orbit-card-tagline { display: none; }
  .orbit-ring-label { display: none; }
  .orbit-ring-star { width: 2.5px; height: 2.5px; }
}

/* ============================================
   JOURNEY — chapter grid
   ============================================ */
.journey-section { padding-top: 56px; }

.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 24px;
  margin-top: 8px;
}

/* ---------- Symmetric card: photo bg + light text panel + gallery cluster ---------- */
.jcard {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  aspect-ratio: 5 / 4;
  min-height: 260px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.2s ease;
}

.jcard:hover {
  box-shadow: 0 18px 34px rgba(59, 42, 31, 0.16);
}

.jcard.in-view {
  opacity: 1;
  transform: translateY(0);
}

.jcard-bg.media-slot {
  position: absolute;
  inset: 0;
  border: none;
  border-radius: 0;
  min-height: 0;
  align-items: flex-end;
  justify-content: flex-end;
}

.jcard-bg.media-slot .media-slot-label {
  max-width: 38%;
  padding: 10px 12px;
  font-size: 9px;
  text-align: right;
}

.jcard-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 64%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* extra right padding keeps the text inside the part of the scrim that is
     still opaque enough to read, instead of running out onto the bare photo */
  padding: 22px 16% 22px 20px;
  /* Soft see-through scrim: cream where the text sits, fading out fast so
     the photo shows. A light blur behind it calms busy photo detail. */
  background: linear-gradient(to right,
    rgba(228, 217, 194, 0.94) 0%,
    rgba(228, 217, 194, 0.84) 44%,
    rgba(228, 217, 194, 0.42) 78%,
    rgba(228, 217, 194, 0) 100%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
}

/* Photos whose important part is on the right (product screenshots and the
   composed SV Network / DocMarket covers): keep that side in view. */
.jcard-bg img[src*="sv-hero"],
.jcard-bg img[src*="docmarket-journey"],
.jcard-bg img[src*="beemotion-journey"] {
  object-position: 100% 50%;
}

/* Mower photo: slide the subject to the right, away from the text. */
.jcard-bg img[src*="landscaping-journey"] {
  object-position: 0% 50%;
}

.jcard-panel .jcard-no,
.jcard-panel .jcard-title,
.jcard-panel .jcard-tagline {
  text-shadow: 0 0 10px rgba(228, 217, 194, 0.95), 0 0 3px rgba(228, 217, 194, 0.9);
}

.jcard-no {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: #7A5220;
  margin-bottom: 8px;
}

.jcard-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--heading);
  font-size: 18px;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0 0 6px;
}

.jcard-tagline {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #3E2F22;
  margin: 0 0 16px;
}

.btn-sm {
  padding: 9px 16px;
  font-size: 12px;
  align-self: flex-start;
}

.jcard-gallery {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.jcard-gallery img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--ink);
  box-shadow: 0 6px 14px rgba(59, 42, 31, 0.25);
  display: block;
}

.journey-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--heading);
  text-align: center;
  max-width: 44ch;
  margin: 56px auto 0;
}

@media (max-width: 920px) {
  .journey-grid { grid-template-columns: repeat(2, 1fr); }
  .jcard-panel { width: 70%; }
}

@media (max-width: 640px) {
  .journey-grid { grid-template-columns: 1fr; }
  .jcard { aspect-ratio: 4 / 3; }
  /* narrower text column so lines end before the picture starts */
  .jcard-panel { width: 76%; padding-right: 26%; }
}

/* ---------- Watch section (relocated homepage video) ---------- */
.watch-section .video-wrap-portrait { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .journey-card { opacity: 1; transform: none; }
}


/* BeeMotion poster gallery: the designed posts are portrait (4:5), so the
   tiles are too — nothing gets cropped, and text in the art stays readable. */
.card-grid.poster-grid .media-slot { aspect-ratio: 4 / 5; }

/* BeeMotion's home card sits on a flat cream/yellow background, so its text
   doesn't need the blur that calms busy photos — skipping it keeps the laptop
   dashboard sharp all the way across. */
.jcard:has(img[src*="beemotion-journey"]) .jcard-panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* BeeMotion landing hero: on phones show the whole wide image instead of cropping it */
@media (max-width: 700px){ .bm-hero-slot{ min-height: 0 !important; } }

/* ---------- Demo ambient b-roll (replaces the personal intro video) ----------
   A neutral, premium, non-identifiable motion loop in the brand palette. Fills
   the same 9/16 portrait frame. Autoplays silently and loops via CSS; pauses
   under prefers-reduced-motion. No faces, no personal or sensitive content. */
.video-wrap-portrait .broll {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  background: radial-gradient(130% 100% at 50% 0%, #F4EEE1 0%, #E9DEC6 55%, #DFD0B0 100%);
  overflow: hidden;
}
.video-wrap-portrait .broll .broll-glow {
  position: absolute;
  inset: -25%;
  background: radial-gradient(36% 28% at 32% 34%, rgba(166, 118, 58, 0.55), rgba(166, 118, 58, 0) 70%);
  filter: blur(4px);
  animation: broll-drift 17s ease-in-out infinite alternate;
}
.video-wrap-portrait .broll .broll-sweep {
  position: absolute;
  top: -30%;
  left: -70%;
  width: 55%;
  height: 160%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 251, 240, 0.55) 50%, transparent 100%);
  transform: rotate(9deg);
  animation: broll-sweep 11s ease-in-out infinite;
}
.video-wrap-portrait .broll .broll-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.75rem;
  letter-spacing: 0.1em;
  color: #2A1B12;
  opacity: 0.1;
  animation: broll-breathe 7.5s ease-in-out infinite;
}
@keyframes broll-drift {
  from { transform: translate(-9%, -5%) scale(1); }
  to   { transform: translate(11%, 7%) scale(1.16); }
}
@keyframes broll-sweep {
  0%   { transform: translateX(0) rotate(9deg); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateX(360%) rotate(9deg); opacity: 0; }
}
@keyframes broll-breathe {
  0%, 100% { opacity: 0.09; transform: scale(1); }
  50%      { opacity: 0.15; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .video-wrap-portrait .broll .broll-glow,
  .video-wrap-portrait .broll .broll-sweep,
  .video-wrap-portrait .broll .broll-mark { animation: none; }
}

/* Demo mirror: defensively constrain the (hidden) promo modal so it can never
   exceed the viewport width on narrow phones — avoids a tiny horizontal overflow
   at 375px. The modal is not shown (its script was removed for isolation). */
.venture-modal,
.venture-modal-backdrop {
  /* Never shown in the static mirror (its open/close script was removed), so
     remove it from layout entirely — prevents a fixed 100vw element from
     overflowing by the scrollbar width at 375px. */
  display: none !important;
}

/* Demo mirror: defensively prevent the journey cards from bleeding ~4px past the
   viewport at very narrow widths (375px). max-width caps the card/media, and
   overflow-x:clip contains any residual sub-pixel bleed within the section
   without creating a scroll container. Visible design unchanged. */
.jcard,
.jcard-bg,
.media-slot,
.jcard-bg img {
  max-width: 100%;
}
.journey-section {
  overflow-x: clip;
}