/**
 * Testflight homepage — Figma 261:475 (desktop; hero wire 830×580), 213:779 (mobile ≤640, 343 artboard).
 * 641px+: 1200px layout scales with zoom (no reflow).
 * zoom: supported in Chromium/Safari; Firefox 126+.
 */

.tf-home {
  --home-design-width: 1200px;
  --home-mobile-design-width: 343px;
  --home-mobile-gutter: 16px;
  --home-max: 1200px;
  --home-border: 1px solid rgb(255 255 255 / 0.4);
  --home-panel-bg: rgb(0 0 0 / 0.2);
  --home-radius-cta: 3px;
  --home-hero-visual: 700px;
  /* Main_Homepage_Video.mp4 is 830×580; no extra zoom */
  --home-hero-video-zoom: 1;

  padding-top: 0;
  padding-bottom: 64px;
}

.tf-home__scale-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  overflow-x: clip;
}

.tf-home__shell {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 641px) {
  .tf-home__shell {
    width: var(--home-design-width);
    max-width: var(--home-design-width);
    flex-shrink: 0;
    zoom: min(1, calc((100vw - 32px) / var(--home-design-width)));
  }
}

/* Nav — one step below former 24px (type-body-l) for desktop density */
.tf-home__nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(12px, 3vw, 48px);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  font-size: clamp(12px, 1.85vw, var(--type-body-m));
  line-height: 40px;
  color: var(--color-white);
}

.tf-home__nav a {
  flex-shrink: 0;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.tf-home__nav a:hover {
  color: var(--color-orange);
}

/* Hero grid */
.tf-home__hero {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.tf-home__hero-col {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.tf-home__panel {
  box-sizing: border-box;
  background: var(--home-panel-bg);
  border: var(--home-border);
  overflow: hidden;
}

.tf-home__panel--brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  text-align: center;
}

.tf-home__brand-mark {
  width: clamp(48px, 12vw, 76px);
  aspect-ratio: 1;
  flex-shrink: 0;
}

.tf-home__brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tf-home__brand-wordmark {
  width: min(208px, 80%);
  height: auto;
}

.tf-home__brand-wordmark img {
  width: 100%;
  height: auto;
  display: block;
}

/* Tagline ~11px → 14px (type-body-xs), whole px */
.tf-home__brand-tagline {
  margin: 0;
  max-width: 232px;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  font-size: var(--type-body-xs);
  line-height: 1.5;
  color: var(--color-text-default);
}

.tf-home__panel--headline {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  min-height: 200px;
}

/* Display headline — fixed px so zoom scales it uniformly (desktop) */
.tf-home__hero-title {
  margin: 0;
  font-family: var(--font-family-headline);
  font-weight: var(--font-weight-headline);
  font-size: 132px;
  line-height: 124px;
  letter-spacing: 0;
  color: var(--color-text-default);
  text-transform: uppercase;
  max-width: 464px;
}

.tf-home__hero-visual {
  flex: 0 1 var(--home-hero-visual);
  width: var(--home-hero-visual);
  max-width: 100%;
  aspect-ratio: 1;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--home-border);
}

.tf-home__hero-wire {
  flex: 1;
  position: relative;
  min-height: 0;
}

.tf-home__hero-wire img {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 72%;
  max-width: 397px;
  height: auto;
}

.tf-home__hero-actions {
  display: flex;
  gap: 16px;
  align-items: stretch;
  padding: 16px 48px 48px;
  flex-shrink: 0;
}

.tf-home__hero-actions .tf-btn.tf-btn--accent {
  flex: 1 1 0;
  min-height: 64px;
  padding: 16px 20px;
  font-size: 16px;
  border-radius: var(--home-radius-cta);
}

.tf-home__hero-actions .tf-home__btn-icon img {
  width: 18px;
  height: 18px;
}

/* Mobile-only: wireframe + CTAs under logo (Figma 169:637 BODY / 173:2627) */
.tf-home__panel--hero-load {
  display: none;
}

/* Feature bands — 50/50 grid: plane media + copy stay side by side; images scale to column */
.tf-home__band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  column-gap: 32px;
  row-gap: 32px;
  padding: 64px;
  background: var(--home-panel-bg);
  border: var(--home-border);
}

/* Flush to shell edge on alternating bands (Figma alignment) */
.tf-home__band--flush-left {
  padding-left: 0;
}

.tf-home__band--flush-right {
  padding-right: 0;
}

.tf-home__band-media {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tf-home__band-media--wing {
  position: relative;
}

.tf-home__figure {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: min(52vh, 440px);
  min-height: 200px;
}

.tf-home__band-media--case .tf-home__figure {
  max-height: min(56vh, 520px);
  min-height: 0;
}

.tf-home__figure img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(52vh, 440px);
  object-fit: contain;
  object-position: center;
}

.tf-home__figure--contain img,
.tf-home__figure--contain .tf-home__img-pos {
  object-fit: contain;
  object-position: center;
}

/* Plane render — scales with column; caption below art */
.tf-home__figure--render {
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 40px;
}

.tf-home__figure--render .tf-home__img-pos {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
  max-width: 520px;
  max-height: min(48vh, 380px);
  margin: 0 auto;
  flex-shrink: 0;
}

.tf-home__band-caption {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--type-body-xs);
  line-height: var(--type-body-leading);
  color: var(--color-text-default);
  white-space: nowrap;
}

.tf-home__band-caption strong,
.tf-home__band-caption .tf-home__accent-inline {
  color: var(--color-text-accent);
  font-weight: var(--font-weight-body);
}

/* Side render — fit column, keep crop feel without breaking grid */
.tf-home__figure--side {
  overflow: hidden;
}

.tf-home__figure--side img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(52vh, 440px);
  object-fit: contain;
  object-position: center center;
  margin: 0;
}

/* Landing illustration — flipped */
.tf-home__figure--landing {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tf-home__figure--landing .tf-home__landing-inner {
  transform: scaleY(-1) rotate(180deg);
  width: 100%;
  height: 100%;
  position: relative;
}

.tf-home__figure--landing img {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(52vh, 440px);
  left: auto;
  top: auto;
  object-fit: contain;
}

/* Wing section */
.tf-home__wing-grid {
  position: relative;
  width: 100%;
  min-height: 240px;
  max-height: min(52vh, 440px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tf-home__wing-grid img.tf-home__wing-photo {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(48vh, 400px);
  object-fit: contain;
}

.tf-home__twist {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(40px, 8%, 60px);
  height: auto;
  max-height: 96px;
}

.tf-home__twist--l {
  left: 4%;
}

.tf-home__twist--r {
  right: 4%;
}

.tf-home__twist--r img {
  transform: scaleX(-1);
}

.tf-home__twist img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Case sketch — caption below art (not overlaid); no arrow */
.tf-home__figure--case {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: visible;
}

.tf-home__figure--case .tf-home__case-img {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(50vh, 420px);
  object-fit: contain;
  margin: 0 auto;
  display: block;
  flex-shrink: 0;
}

.tf-home__case-cap {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  margin: 16px 0 0;
  max-width: 90%;
  text-align: center;
  font-family: var(--font-family-body);
  font-size: var(--type-body-xs);
  line-height: var(--type-body-leading);
  color: var(--color-text-default);
}

.tf-home__band-copy {
  min-width: 0;
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-self: center;
}

.tf-home__band-copy--end {
  align-items: flex-end;
  text-align: right;
  justify-self: end;
  margin-left: auto;
}

/* Band titles — headline-xl (hero keeps separate display scale) */
.tf-home__band-title {
  margin: 0;
  font-family: var(--font-family-headline);
  font-weight: var(--font-weight-headline);
  font-size: var(--type-headline-xl);
  line-height: calc(var(--type-headline-xl) * var(--type-headline-leading));
  color: var(--color-text-default);
  text-transform: uppercase;
}

/* Orange subheads: Space Grotesk 500, 32px = type-body-xxl scale */
.tf-home__band-kicker {
  margin: 0;
  font-family: var(--font-family-headline);
  font-weight: 500;
  font-size: var(--type-body-xxl);
  line-height: 48px;
  color: var(--color-text-accent);
}

.tf-home__band-body {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  font-size: var(--type-body-s);
  line-height: var(--type-body-leading);
  color: var(--color-text-default);
}

.tf-home__band.tf-home__band--gap48 {
  gap: 48px;
}

/* Team */
.tf-home__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 32px;
}

.tf-home__team-art {
  width: 100%;
  max-width: 1200px;
  height: 375px;
  overflow: hidden;
  position: relative;
  margin-bottom: -24px;
}

.tf-home__team-art .tf-home__team-art__toggle {
  position: absolute;
  left: 50%;
  top: -32px;
  transform: translateX(-50%) rotate(1deg);
  width: 1208px;
  max-width: none;
  height: auto;
  max-height: 120%;
}

.tf-home__team-art .tf-home__team-art__toggle img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 120%;
}

.tf-home__team-btn {
  margin-bottom: -24px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 32px;
  border: 0;
  background: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--type-body-s);
  line-height: var(--type-body-leading);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  box-sizing: border-box;
}

.tf-home__team-btn:hover {
  filter: brightness(1.08);
}

.tf-home__team-btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* Footer social */
.tf-home__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-top: 16px;
}

.tf-home__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tf-home__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 85px;
  box-sizing: border-box;
  aspect-ratio: 1;
  border: 1px solid var(--color-white);
  border-radius: 43px;
  background: var(--color-black);
  transition: background 0.15s ease;
}

.tf-home__social a:hover {
  background: rgb(255 255 255 / 0.08);
}

.tf-home__social img {
  display: block;
  width: auto;
  height: auto;
  max-width: 48px;
  max-height: 32px;
  min-width: 0;
  object-fit: contain;
  object-position: center;
}

.tf-home__legal {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--type-body-s);
  line-height: var(--type-body-leading);
  text-align: center;
  color: var(--color-text-default);
}

.tf-home__legal p {
  margin: 0;
}

/* Figma home-mobie 169:637 — https://www.figma.com/design/QM2RQ8ZAKLbaoQlmm7zd9X/Speedfest-Orange-Team?node-id=169-637 */
@media (max-width: 640px) {
  .tf-home__scale-root {
    overflow-x: clip;
  }

  .tf-home {
    padding-top: 0;
    padding-bottom: 48px;
  }

  .tf-home__shell {
    width: var(--home-mobile-design-width);
    max-width: var(--home-mobile-design-width);
    flex-shrink: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    gap: 8px;
    zoom: calc(
      (100vw - 2 * var(--home-mobile-gutter)) / var(--home-mobile-design-width)
    );
  }

  /* Nav — right-aligned group, 16px between links (home-mobie) */
  .tf-home__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 0 4px;
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--color-white);
  }

  .tf-home__nav a {
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
  }

  .tf-home__nav a:hover {
    color: var(--color-orange);
  }

  .tf-home__hero {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 9px;
    min-height: 0;
    align-items: stretch;
  }

  .tf-home__hero-col {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    gap: 9px;
  }

  .tf-home__hero-visual {
    display: none;
  }

  .tf-home__panel--hero-load {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    overflow: clip;
    min-height: 343px;
    box-sizing: border-box;
  }

  .tf-home__hero-load-wire {
    position: relative;
    flex: 1 1 0;
    min-height: 200px;
    width: 100%;
  }

  .tf-home__hero-load-wire img {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 57%;
    max-width: 196px;
    height: auto;
  }

  .tf-home__hero-load-actions {
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 9px;
    padding: 0 23px 22px;
    margin-top: auto;
  }

  .tf-home__panel--brand {
    padding: 22px;
    gap: 4px;
  }

  .tf-home__brand-mark {
    width: 40px;
    height: 46px;
  }

  .tf-home__brand-wordmark {
    width: 145px;
  }

  .tf-home__brand-tagline {
    font-size: 8px;
    line-height: 1.35;
    max-width: 158px;
  }

  .tf-home__panel--headline {
    padding: 22px;
    min-height: 0;
    flex: 0 0 auto;
    align-items: center;
    text-align: center;
  }

  .tf-home__hero-title {
    font-size: 92px;
    line-height: 87px;
    max-width: none;
    width: 100%;
    text-align: center;
  }

  .tf-home__band--controlled-landings {
    display: none;
  }

  .tf-home__band {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 343px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px;
    gap: 17px;
    grid-template-columns: none;
    row-gap: 0;
    column-gap: 0;
  }

  .tf-home__band--flush-left,
  .tf-home__band--flush-right {
    padding: 24px;
  }

  .tf-home__band--media-right .tf-home__band-media {
    order: -1;
  }

  .tf-home__band.tf-home__band--gap48 {
    gap: 17px;
  }

  .tf-home__band-media {
    width: 100%;
    max-width: 320px;
    flex-shrink: 0;
  }

  .tf-home__band-copy,
  .tf-home__band-copy--end {
    align-items: center;
    text-align: center;
    justify-self: stretch;
    margin-left: 0;
    max-width: 295px;
    width: 100%;
    gap: 17px;
  }

  .tf-home__band-title {
    font-size: 43px;
    line-height: 38px;
  }

  .tf-home__band-kicker {
    font-size: 17px;
    line-height: 25px;
  }

  .tf-home__band-body {
    font-size: 11px;
    line-height: 1.5;
  }

  .tf-home__band-media--tall {
    height: 180px;
  }

  .tf-home__band-media--mid {
    height: 133px;
  }

  .tf-home__band-media--wing {
    min-height: 192px;
    height: 192px;
  }

  .tf-home__band-media--case {
    height: auto;
    min-height: 0;
  }

  .tf-home__band-media--case .tf-home__figure {
    min-height: 0;
    max-height: none;
  }

  .tf-home__band--carrying-case {
    row-gap: 28px;
  }

  .tf-home__figure {
    max-height: none;
    min-height: 0;
    width: 100%;
  }

  .tf-home__figure img,
  .tf-home__wing-grid img.tf-home__wing-photo {
    max-height: none;
  }

  /* Plane render: wide asset — contain inside band height; avoid cover + fixed box (was cropping) */
  .tf-home__figure--render {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 36px;
    box-sizing: border-box;
    height: 180px;
    max-height: 180px;
    min-height: 180px;
  }

  .tf-home__figure--render .tf-home__img-pos {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(180px - 40px);
    object-fit: contain;
    object-position: center;
    margin: 0;
    flex-shrink: 0;
  }

  .tf-home__band-caption {
    bottom: 38px;
    font-size: 8px;
    line-height: 14px;
  }

  .tf-home__figure--side {
    position: relative;
    height: 133px;
  }

  .tf-home__figure--side img {
    position: absolute;
    left: calc(50% + 13px);
    top: calc(50% + 12px);
    transform: translate(-50%, -50%);
    width: 292px;
    max-width: none;
    height: 127px;
    object-fit: cover;
    margin: 0;
  }

  .tf-home__wing-grid {
    min-height: 192px;
    max-height: 192px;
  }

  .tf-home__wing-grid img.tf-home__wing-photo {
    max-height: 166px;
  }

  .tf-home__twist {
    width: 32px;
    max-height: 50px;
  }

  .tf-home__figure--case {
    height: auto;
    min-height: 0;
  }

  .tf-home__figure--case .tf-home__case-img {
    max-height: 200px;
    width: 92%;
  }

  .tf-home__case-cap {
    font-size: 8px;
    line-height: 14px;
    margin-top: 12px;
  }

  .tf-home__team {
    width: 100%;
    max-width: 343px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 16px;
  }

  .tf-home__team-art {
    height: 107px;
    margin-bottom: -16px;
  }

  .tf-home__team-art .tf-home__team-art__toggle {
    position: relative;
    left: 50%;
    top: -10px;
    transform: translateX(-50%) rotate(1deg);
    width: 351px;
    max-width: none;
    max-height: 132px;
    aspect-ratio: 1334 / 505;
    height: auto;
  }

  .tf-home__team-btn {
    min-height: 30px;
    padding: 17px;
    font-size: var(--type-body-xs);
    line-height: var(--type-body-leading);
    margin-bottom: -16px;
  }

  .tf-home__footer {
    width: 100%;
    max-width: 343px;
    margin-left: auto;
    margin-right: auto;
    gap: 15px;
    padding-top: 8px;
  }

  .tf-home__social {
    gap: 26px;
  }

  .tf-home__social a {
    width: 45px;
    height: 45px;
    aspect-ratio: 1;
    border-radius: 23px;
  }

  .tf-home__social img {
    max-width: 24px;
    max-height: 19px;
    min-width: 0;
  }

  .tf-home__legal {
    font-size: var(--type-body-xs);
  }
}

/* ========== Home v2 (261:475 / 213:779) ========== */

/* Viewport-height spacer: must NOT sit inside .tf-home__shell (zoom shrinks padding-top vs fixed header) */
.tf-home__header-spacer {
  flex-shrink: 0;
  width: 100%;
  height: calc(max(12px, env(safe-area-inset-top, 0px)) + 12px + 40px + 1px);
  pointer-events: none;
}

.tf-home__shell--home-v2 {
  gap: 72px;
  box-sizing: border-box;
}

.tf-home__header-v2 {
  width: 100%;
  flex-shrink: 0;
}

/*
 * Fixed top bar (not sticky): sticky was inside a tall <header> with the hero, so the bar
 * scrolled away once that header left the viewport. Fixed keeps nav visible for the whole page.
 * Placed outside .tf-home__shell so desktop `zoom` on the shell does not break fixed/sticky.
 */
/*
 * Same outer width as .tf-home__shell (min(1200px, 100vw - 32px)) so nav + border align with the hero column.
 * Horizontal padding matches shell’s 16px design inset at that width (scales with narrow viewports like zoom).
 */
.tf-home__header-bar {
  position: fixed;
  top: 0;
  left: 50%;
  right: auto;
  z-index: 100;
  box-sizing: border-box;
  width: min(var(--home-max), calc(100vw - 32px));
  max-width: 100%;
  transform: translateX(-50%);
  padding: max(12px, env(safe-area-inset-top, 0px)) 0 12px;
  background-color: var(--color-canvas);
  border-bottom: 1px solid transparent;
  transition: border-color 0.22s ease;
}

.tf-home__header-bar[data-scrolled] {
  border-bottom-color: rgb(255 255 255 / 0.12);
}

.tf-home__header-bar-inner {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding-left: calc(min(var(--home-max), calc(100vw - 32px)) * 16 / 1200);
  padding-right: calc(min(var(--home-max), calc(100vw - 32px)) * 16 / 1200);
}

.tf-home__header-logo {
  flex: 0 0 auto;
  display: block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  line-height: 0;
  text-decoration: none;
  pointer-events: none;
  transition:
    max-width 0.28s ease,
    opacity 0.22s ease;
}

.tf-home__header-bar[data-scrolled] .tf-home__header-logo {
  max-width: 40px;
  opacity: 1;
  pointer-events: auto;
}

.tf-home__header-bar[data-scrolled] .tf-home__header-logo:hover {
  opacity: 0.85;
}

.tf-home__header-bar[data-scrolled] .tf-home__header-logo:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tf-home__header-bar,
  .tf-home__header-logo {
    transition: none;
  }
}

.tf-home__header-logo-img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: center;
}

.tf-home__nav--v2 {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
  gap: 48px;
  font-size: var(--type-body-m);
  line-height: 40px;
}

.tf-home__nav-link--gallery {
  display: inline;
}

.tf-home__nav-label--mobile {
  display: none;
}

.tf-home__hero-v2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}

.tf-home__hero-v2-col--left {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.tf-home__panel--rule-skies {
  flex: 1 1 auto;
  min-height: 200px;
}

.tf-home__hero-v2-col--wire {
  flex: 0 0 830px;
  width: 830px;
  max-width: 100%;
  aspect-ratio: 830 / 580;
  height: auto;
  min-height: 0;
  position: relative;
  box-sizing: border-box;
  background: var(--home-panel-bg);
  border: var(--home-border);
  overflow: hidden;
}

@media (min-width: 641px) {
  /* One row = video height (580px): logo + headline stack matches 830×580 wire */
  .tf-home__hero-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 830px);
    grid-template-rows: 580px;
    align-items: stretch;
    flex-direction: unset;
    flex-wrap: unset;
  }

  .tf-home__hero-v2-col--left {
    flex: unset;
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }

  .tf-home__hero-v2-col--wire {
    flex: unset;
    width: 100%;
    max-width: 830px;
    height: 100%;
    aspect-ratio: auto;
    justify-self: end;
  }

  .tf-home__hero-v2-col--left .tf-home__panel--brand {
    flex-shrink: 0;
  }

  .tf-home__hero-v2-col--left .tf-home__panel--rule-skies {
    flex: 1 1 0;
    min-height: 0;
  }

  .tf-home__hero-v2-col--left .tf-home__panel--headline.tf-home__panel--rule-skies {
    flex: 1 1 0;
    min-height: 0;
  }

  /* ~3 lines in remaining space below logo panel; avoids clipping on narrow column */
  .tf-home__hero-v2-col--left .tf-home__hero-title {
    font-size: 86px;
    line-height: 82px;
    max-width: none;
  }
}

.tf-home__hero-v2-col--wire .tf-home__hero-wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Main_Homepage_Video.mp4 — 830×580 */
.tf-home__hero-v2-col--wire .tf-home__hero-wire-video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(var(--home-hero-video-zoom));
  transform-origin: center center;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--color-black);
}

.tf-home__hero-v2-col--wire .tf-home__hero-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto;
}

.tf-home__main-v2 {
  display: flex;
  flex-direction: column;
  gap: 72px;
  width: 100%;
}

.tf-home__slice {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.tf-home__slice-head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--color-white);
}

.tf-home__slice-title {
  margin: 0;
  font-family: var(--font-family-headline);
  font-weight: var(--font-weight-headline);
  font-size: var(--type-headline-xl);
  line-height: var(--type-headline-leading);
  text-transform: uppercase;
  color: var(--color-white);
}

.tf-home__slice-lede {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  font-size: var(--type-body-xl);
  line-height: var(--type-body-leading);
  color: var(--color-white);
}

.tf-home__quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.tf-home__quad-card {
  box-sizing: border-box;
  border: 1.203px solid rgb(255 255 255 / 0.4);
  padding: 46px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: rgb(0 0 0 / 0.2);
  min-width: 0;
}

.tf-home__quad-fig {
  margin: 0;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-black);
}

.tf-home__quad-fig .tf-lightbox--media {
  position: relative;
  min-height: 0;
}

.tf-home__quad-fig img,
.tf-home__quad-fig video,
.tf-home__quad-fig .tf-lightbox--media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tf-home__quad-fig video,
.tf-home__quad-fig .tf-lightbox--media video {
  background: var(--color-black);
}

.tf-home__quad-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.tf-home__quad-kicker {
  margin: 0;
  font-family: var(--font-family-headline);
  font-weight: 500;
  font-size: var(--type-headline-s);
  line-height: var(--type-headline-leading);
  color: var(--color-orange);
}

.tf-home__quad-text {
  font-family: var(--font-family-body);
  font-size: var(--type-body-s);
  line-height: var(--type-body-leading);
  color: var(--color-white);
}

.tf-home__quad-text p {
  margin: 0 0 16px;
}

.tf-home__quad-text p:last-child {
  margin-bottom: 0;
}

.tf-home__quad-text--single {
  margin: 0;
}

.tf-home__row-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 46px;
  border: 1.203px solid rgb(255 255 255 / 0.4);
  background: rgb(0 0 0 / 0.2);
}

.tf-home__row-card-media {
  margin: 0;
  flex: 0 0 auto;
  width: 360px;
  max-width: 45%;
  border-radius: 16px;
  overflow: hidden;
}

.tf-home__row-card-media > .tf-lightbox {
  height: auto;
}

.tf-home__row-card-media .tf-lightbox img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.tf-home__row-card-media--twist .tf-lightbox img,
.tf-home__row-card-media--twist video,
.tf-home__row-card-media--twist .tf-lightbox--media video {
  max-height: 220px;
  width: 100%;
  object-fit: contain;
  background: var(--color-black);
}

.tf-home__row-card-media--twist video,
.tf-home__row-card-media--twist .tf-lightbox--media video {
  display: block;
}

.tf-home__row-card-copy {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-family-body);
  font-size: var(--type-body-s);
  line-height: var(--type-body-leading);
  color: var(--color-white);
}

.tf-home__row-card-copy p {
  margin: 0 0 16px;
}

.tf-home__row-card-copy p:last-child {
  margin-bottom: 0;
}

.tf-home__row-card-copy--stack p {
  line-height: 1.33;
}

.tf-home__hatch-visual {
  position: relative;
  flex: 0 0 auto;
  width: 360px;
  max-width: 45%;
  aspect-ratio: 720 / 498;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-black);
}

.tf-home__hatch-visual .tf-lightbox {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.tf-home__hatch-hero {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tf-home__wide-shot {
  margin: 0;
  width: 100%;
  padding: 46px;
  border: 1.203px solid rgb(255 255 255 / 0.4);
  box-sizing: border-box;
}

.tf-home__wide-shot > .tf-lightbox {
  height: auto;
}

.tf-home__wide-shot .tf-lightbox img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

.tf-home__team--v2 {
  align-items: center;
}

.tf-home__team--v2 .tf-home__team-art {
  height: auto;
  max-height: 400px;
  width: 100%;
  max-width: 1172px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tf-home__team--v2 .tf-home__team-art .tf-home__team-art__toggle {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  max-height: 400px;
  aspect-ratio: 1334 / 505;
  padding: 0;
  outline: none;
}

.tf-home__team--v2 .tf-home__team-art .tf-home__team-art__toggle:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 4px;
}

.tf-home__team--v2 .tf-home__team-art .tf-home__team-art__toggle .tf-home__team-art__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
}

.tf-home__team--v2 .tf-home__team-art .tf-home__team-art__img--photo {
  z-index: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.tf-home__team--v2 .tf-home__team-art .tf-home__team-art__img--wire {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.tf-home__team-art:hover .tf-home__team-art__img--photo,
.tf-home__team-art:focus-within .tf-home__team-art__img--photo {
  opacity: 1;
}

.tf-home__team-art:hover .tf-home__team-art__img--wire,
.tf-home__team-art:focus-within .tf-home__team-art__img--wire {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tf-home__team--v2 .tf-home__team-art .tf-home__team-art__img--photo,
  .tf-home__team--v2 .tf-home__team-art .tf-home__team-art__img--wire {
    transition: none;
  }
}

@media (max-width: 640px) {
  .tf-home__shell--home-v2 {
    gap: 40px;
  }

  /* Top bar: full width; logo at screen left, nav at screen right (see base bar centering override) */
  .tf-home__header-bar {
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-right: max(var(--home-mobile-gutter), env(safe-area-inset-right, 0px));
    padding-bottom: 10px;
    padding-left: max(var(--home-mobile-gutter), env(safe-area-inset-left, 0px));
    border-bottom-color: rgb(255 255 255 / 0.12);
  }

  .tf-home__header-bar-inner {
    container-type: inline-size;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .tf-home__header-bar .tf-home__header-logo,
  .tf-home__header-bar[data-scrolled] .tf-home__header-logo {
    flex: 0 0 auto;
    max-width: 32px;
    opacity: 1;
    pointer-events: auto;
  }

  .tf-home__header-logo-img {
    width: 32px;
    height: 32px;
  }

  .tf-home__header-spacer {
    height: calc(max(10px, env(safe-area-inset-top, 0px)) + 10px + 40px + 1px);
  }

  .tf-home__nav--v2 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    /* Fluid type: scales with header row width (fallback: viewport) */
    font-size: clamp(11px, 2.85vw, 15px);
    line-height: 1.25;
    justify-content: flex-end;
    width: auto;
    max-width: none;
    padding: 0;
  }

  @supports (font-size: 1cqi) {
    .tf-home__nav--v2 {
      font-size: clamp(11px, 4.25cqi, 15px);
    }
  }

  .tf-home__nav-label--desktop {
    display: none;
  }

  .tf-home__nav-label--mobile {
    display: inline;
  }

  .tf-home__nav--v2 > a {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .tf-home__hero-v2 {
    flex-direction: column;
    align-items: stretch;
  }

  .tf-home__hero-v2-col--wire {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: unset;
    overflow: visible;
  }

  /* Stack CTAs under the video (not overlaid); full-width, shorter buttons */
  .tf-home__hero-v2-col--wire .tf-home__hero-wire {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-rows: auto auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .tf-home__hero-v2-col--wire .tf-home__hero-wire-video {
    grid-row: 1;
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 830 / 580;
    transform: none;
    object-fit: contain;
    object-position: center;
  }

  .tf-home__hero-v2-col--wire .tf-home__hero-actions {
    grid-row: 2;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 0 0;
    pointer-events: auto;
  }

  .tf-home__hero-v2-col--wire .tf-home__hero-actions .tf-btn.tf-btn--accent {
    flex: 0 0 auto;
    width: 100%;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 15px;
    white-space: normal;
  }

  .tf-home__slice-head {
    gap: 16px;
  }

  .tf-home__slice-title {
    font-size: var(--type-headline-m);
    line-height: var(--type-headline-leading);
    text-align: center;
  }

  .tf-home__slice-lede {
    font-size: var(--type-body-s);
    text-align: center;
  }

  .tf-home__quad {
    grid-template-columns: 1fr;
  }

  .tf-home__quad-card {
    padding: 24px;
    gap: 16px;
  }

  .tf-home__quad-body {
    gap: 17px;
  }

  .tf-home__quad-kicker {
    font-size: var(--type-headline-s);
    line-height: var(--type-headline-leading);
    text-align: center;
  }

  .tf-home__quad-text {
    font-size: var(--type-body-s);
    line-height: var(--type-body-leading);
    text-align: center;
  }

  .tf-home__quad-text p {
    margin-bottom: 8px;
  }

  .tf-home__row-card {
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    align-items: center;
  }

  .tf-home__row-card-media,
  .tf-home__hatch-visual {
    width: 100%;
    max-width: 100%;
  }

  .tf-home__row-card-copy {
    font-size: var(--type-body-s);
    line-height: var(--type-body-leading);
    text-align: center;
    max-width: 295px;
  }

  .tf-home__row-card-copy--stack {
    text-align: center;
  }

  .tf-home__hatch-visual {
    aspect-ratio: 720 / 498;
    min-height: 0;
  }

  .tf-home__wide-shot {
    padding: 24px;
  }

  .tf-home__team--v2 {
    max-width: 343px;
    margin-left: auto;
    margin-right: auto;
  }

  .tf-home__team--v2 .tf-home__team-art {
    max-height: 132px;
  }

  .tf-home__team--v2 .tf-home__team-art .tf-home__team-art__toggle {
    max-height: 132px;
  }
}