/* About-only mapping to Halo's October 2026 design-system roles.
   The shared fluid root and the authored Figma artwork remain unchanged.
   Desktop hero, editorial letters and full-bleed collage are contextual variants. */
body.team-story {
  --story-paper: #f5f5f7;
  --story-ink: #02021e;
  --story-blue: #1964d1;
  --story-action: #3719ca;
  --story-secondary: rgb(2 2 30 / 60%);
  --story-divider: rgb(255 255 255 / 30%);
  --story-radius: .75rem;
  --story-section: 5rem;
  --story-heading-gap: 4rem;
  --story-type-section: 3.5rem;
  --story-section-weight: 600;
  --story-body: 1rem;
  --story-label: 1.375rem;
  --story-number: 3.75rem;
  --story-ease: cubic-bezier(.215,.61,.355,1);
}

/* Letters use ordinary reading/selection, without the inherited drag hand. */
body.team-story .leadership-rail__viewport { cursor: auto; }

/* Keep the shared header's compact geometry. The prototype's generic .button
   minimum (3.5rem / 3rem) otherwise defeats its authored 2.5rem / 1.5rem height.
   Header buttons retain their own sizing in the design-system button contract. */
body.team-story .site-header .header .button.mod--header {
  min-height: 0;
  transform: translate(0);
}
@media (max-width: 991px) {
  /* Also override revision.css's fixed-header desktop-only measurements. */
  body.team-story .site-header .header .button.mod--header {
    padding-left: 1rem;
    font-size: .75rem;
  }
}
@media (max-width: 479px) {
  body.team-story .site-header .header .button.mod--header {
    height: 1.5rem;
    padding: .2rem .75rem;
    font-size: .5rem;
  }
}

body.team-story .hero.concept-hero h1#hero-title { line-height: 1.1; letter-spacing: -.03em; }
/* The first fold belongs to the halo, heading and clients. Keep that contract
   independent of the rem-sized artwork: wide/tall screens must not reveal the
   next section. Share surplus stage height equally above/below the whole scene
   so the rim keeps its authored relationship to the heading. */
body.team-story .hero.concept-hero {
  --story-stage-height: calc(41.75 * var(--story-scene-unit));
  --story-copy-top: calc(18.75 * var(--story-scene-unit));
  min-height: 100svh;
}
body.team-story .concept-stage {
  flex: 1 0 auto;
  height: var(--story-stage-height);
  min-height: var(--story-stage-height);
  overflow: clip;
}
body.team-story .story-halo {
  top: calc(50% - var(--story-stage-height) / 2 + var(--story-halo-top));
}
body.team-story .concept-copy {
  top: calc(50% - var(--story-stage-height) / 2 + var(--story-copy-top));
}
body.team-story .hero.concept-hero #clients { flex: none; min-height: 0; }
/* Each section owns its end colors. Content growth on mobile must not move
   white body copy into the light end of a page-height percentage gradient. */
body.team-story .story-opening-gradient { background: var(--story-ink); }
body.team-story .hero.concept-hero { background: linear-gradient(180deg,var(--story-ink) 55%,#092553); }
body.team-story #working-principles { background: linear-gradient(180deg,#092553,var(--story-blue)) !important; }
body.team-story #approach { background: linear-gradient(180deg,var(--story-blue),var(--story-paper)) !important; }
body.team-story .story-proof-gradient { background: var(--story-ink); }
body.team-story #love-letters { background: linear-gradient(180deg,var(--story-ink),var(--story-blue)); }
body.team-story #numbers { background: var(--story-blue); }
body.team-story .site-cta { background: linear-gradient(180deg,var(--story-blue),var(--story-paper) 35%); }
body.team-story #clients .success__label { font-size: var(--story-label); color: rgb(255 255 255 / 60%); }
body.team-story #clients .success-line { background: var(--story-divider); }
body.team-story .principles-intro { line-height: 1.2; letter-spacing: -.02em; }
body.team-story .principle-row { padding-block: 3rem; border-color: var(--story-divider); }
body.team-story .principle-copy p { font-size: var(--story-body); color: #fff; }
body.team-story .leadership-rail .leadership-letter:nth-child(n) { border-radius: var(--story-radius); }
body.team-story .leadership-letter h2 { letter-spacing: -.02em; }
body.team-story .letter-body p { color: rgb(2 2 30 / 70%); }
body.team-story .letter-signature .letter-author > .letter-author__role { color: var(--story-secondary); }
body.team-story #work .cards { gap: 1.5rem; }
body.team-story #work .case-art { border-radius: var(--story-radius); }
body.team-story #work .case-meta > p { color: var(--story-secondary); }
body.team-story #recognition h2 {
  font-size: var(--story-type-section);
  font-weight: var(--story-section-weight);
  line-height: 1.1;
  letter-spacing: -.013em;
  margin-bottom: var(--story-heading-gap);
}
body.team-story #recognition .award { border-radius: var(--story-radius); }
body.team-story #numbers .success__card-title { font-size: var(--story-number); line-height: 1.2; letter-spacing: -.02em; }
body.team-story #numbers .success__card-text { font-size: var(--story-body); line-height: 1.6; }
body.team-story #numbers .success__label { font-size: var(--story-label); }
body.team-story #contact .new-discuss__text { color: rgb(2 2 30 / 70%); }
body.team-story a:focus-visible,
body.team-story button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (max-width: 991px) {
  body.team-story {
    --story-radius: 8px;
    --story-section: 3.5rem;
    --story-heading-gap: 3.5rem;
    --story-type-section: 2.5rem;
    --story-body: .875rem;
    --story-label: 1.125rem;
    --story-number: 3rem;
  }
  body.team-story .hero.concept-hero {
    --story-scene-unit: 1rem;
    --story-halo-size: 34rem;
    --story-halo-top: 7rem;
    --story-stage-height: 31rem;
    --story-copy-top: 14.5rem;
  }
  body.team-story .story-eyebrow { margin-bottom: 1.5rem; }
  body.team-story .hero.concept-hero h1#hero-title { font-size: 2.875rem; }
  body.team-story .hero.concept-hero #clients { padding-bottom: 2.5rem !important; }
  body.team-story #clients .trusted__img { height: 1.5rem; }
  body.team-story #working-principles { padding-top: 3.5rem; }
  body.team-story .principles-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  body.team-story .principles-aside { padding: 0 0 0 7rem; min-height: 5rem; display: flex; flex-direction: column; justify-content: center; }
  body.team-story .principles-atom-frame { position: absolute; left: 0; top: 0; width: 5rem; height: 4.375rem; margin: 0; }
  body.team-story .principles-atom { width: 10rem; left: -2.5rem; top: -1.875rem; }
  body.team-story .principles-aside p,
  body.team-story .principles-aside > span { font-size: var(--story-body); }
  body.team-story .principles-intro { font-size: 1.75rem; margin-bottom: 4rem; }
  body.team-story .principle-row { grid-template-columns: minmax(0,1fr) 6.5rem; gap: 2rem; padding-block: 2.5rem; }
  body.team-story .principle-copy h3 { font-size: 2.5rem; margin-bottom: 1rem; }
  body.team-story .principle-copy p { max-width: 30rem; }
  body.team-story .principle-line-art { width: 6.5rem; }
  body.team-story #approach { padding-block: 3.5rem 4rem; }
  body.team-story .leadership-rail__panel { padding-block: 0; }
  body.team-story .leadership-rail__track { gap: 1.5rem; padding-block: 1rem; align-items: stretch; }
  body.team-story .leadership-rail__viewport { scroll-snap-type: x proximity; }
  body.team-story .leadership-rail .leadership-letter:nth-child(n) {
    flex-basis: 32rem; width: 32rem; max-width: calc(100vw - 2 * var(--rail-gutter));
    padding: 2.5rem; display: flex; flex-direction: column; transform: none;
  }
  body.team-story .leadership-letter h2 { font-size: 1.5rem; line-height: 1.2; margin-bottom: .75rem; }
  body.team-story .letter-body p { font-size: .875rem; line-height: 1.6; }
  body.team-story .letter-signature { gap: 1rem; margin-top: 1.5rem; }
  body.team-story .letter-signature > .letter-avatar { width: 3.5rem; height: 3.5rem; flex-basis: 3.5rem; }
  body.team-story .letter-signature .letter-author__name b { font-size: .875rem; line-height: 1.4; }
  body.team-story .letter-signature .letter-author > .letter-author__role { font-size: .75rem; line-height: 1.6; }
  body.team-story .letter-linkedin { width: .875rem; height: .875rem; }
  body.team-story .letter-linkedin::after { inset: -.5rem; }
  body.team-story #work.section { padding-bottom: 7rem; }
  body.team-story #work .cards { gap: 1.5rem; }
  body.team-story #recognition.section { padding-top: 7rem; padding-bottom: 3.5rem; }
  body.team-story #love-letters { padding-top: 3.5rem; padding-bottom: 2rem; }
  body.team-story #numbers { padding-top: 2rem !important; padding-bottom: 3.5rem !important; }
  body.team-story .site-cta .button.is-simple { height: 2.5rem; min-height: 2.5rem; padding-inline: 1.25rem; font-size: .75rem; }
}

@media (max-width: 767px) {
  body.team-story {
    --story-section: 2.5rem;
    --story-heading-gap: 2.5rem;
    --story-type-section: 1.5rem;
    --story-section-weight: 500;
    --story-body: .75rem;
    --story-label: .9375rem;
    --story-number: 2.125rem;
  }
  body.team-story .hero.concept-hero {
    --story-halo-size: 23rem;
    --story-halo-top: 6.5rem;
    --story-stage-height: 25rem;
    --story-copy-top: 10.5rem;
  }
  body.team-story .story-halo { max-width: none; width: var(--story-halo-size); }
  body.team-story .story-eyebrow { margin-bottom: 1.25rem; height: 1rem; }
  body.team-story .story-eyebrow img { height: .75rem; }
  body.team-story .story-eyebrow__wordmark { width: 5.25rem; }
  body.team-story .story-eyebrow__colon { width: .1265625rem; }
  body.team-story .hero.concept-hero h1#hero-title { font-size: 1.875rem; max-width: 19rem; margin-inline: auto; text-wrap: balance; }
  body.team-story #hero-title > span,
  body.team-story #hero-title > span:first-child { display: inline; white-space: normal; }
  body.team-story .hero.concept-hero #clients { padding-bottom: 2rem !important; }
  body.team-story #clients .columns.mod--success-title { gap: .75rem; margin-bottom: 1.5rem; }
  body.team-story #clients .success-line__wrap { min-width: 0; }
  body.team-story #clients .success__label { flex: none; }
  body.team-story #clients .trusted__img { height: 1.25rem; }
  body.team-story #working-principles { padding-top: 2.5rem; }
  body.team-story .principles-layout { gap: 2rem; }
  body.team-story .principles-aside { padding-left: 5rem; min-height: 4rem; }
  body.team-story .principles-atom-frame { width: 4rem; height: 3.5rem; }
  body.team-story .principles-atom { width: 8rem; left: -2rem; top: -1.5rem; }
  body.team-story .principles-intro { font-size: 1.125rem; line-height: 1.4; margin-bottom: 2.5rem; }
  /* On phones, each outline introduces a full-width editorial text block. */
  body.team-story .principle-row { grid-template-columns: minmax(0,1fr); gap: 24px; padding-block: 2rem; align-items: start; }
  body.team-story .principle-copy { grid-column: 1; grid-row: 2; min-width: 0; }
  body.team-story .principle-copy h3 { font-size: 1.75rem; line-height: 1; margin-bottom: .75rem; }
  body.team-story .principle-copy p { max-width: none; line-height: 1.6; }
  body.team-story .principle-line-art { grid-column: 1; grid-row: 1; width: 3.5rem; }
  body.team-story #approach { padding-block: 2.5rem 3.5rem; }
  body.team-story .leadership-rail__track { gap: 1rem; padding-block: .5rem; }
  body.team-story .leadership-rail .leadership-letter:nth-child(n) { flex-basis: calc(100vw - 3rem); width: calc(100vw - 3rem); padding: 1.5rem; }
  body.team-story .leadership-letter h2 { font-size: 1.125rem; }
  body.team-story .letter-body p { font-size: .75rem; }
  body.team-story .letter-signature { gap: .75rem; margin-top: 1.25rem; }
  body.team-story .letter-signature > .letter-avatar { width: 3rem; height: 3rem; flex-basis: 3rem; }
  body.team-story .letter-signature .letter-author__name b { font-size: .875rem; }
  body.team-story .letter-signature .letter-author > .letter-author__role { font-size: .75rem; }
  body.team-story .story-heading-emblem { width: 5rem; height: 5rem; margin-bottom: 1.5rem; }
  body.team-story #work.section { padding-bottom: 5rem; }
  body.team-story #work .cards { row-gap: 2.5rem; }
  body.team-story #work .case-title { font-size: 1.125rem; letter-spacing: -.02em; }
  body.team-story #work .case-meta > p { font-size: var(--story-body); }
  body.team-story #work .case-tag { font-size: .75rem; }
  body.team-story #recognition.section { padding-top: 5rem; padding-bottom: 2.5rem; }
  body.team-story #recognition .awards-grid { gap: .75rem; }
  body.team-story #love-letters { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  body.team-story #love-letters .lovelatters__block { border-radius: 8px; }
  body.team-story #numbers { padding-block: 2.5rem !important; }
  body.team-story #numbers .columns.mod--success { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; padding-bottom: 2rem; }
  body.team-story #numbers .columns__col.mod--success { width: auto; padding: 0; }
  body.team-story #numbers .success__card-text { max-width: 7rem; margin-inline: auto; }
  body.team-story #contact .new-discuss__text { color: var(--story-secondary); }
}

/* The shared 480px root becomes 12px. Keep normal copy at its 1rem role in
   landscape instead of shrinking .75rem to 9px; no global-root override. */
@media (min-width: 480px) and (max-width: 767px) {
  body.team-story { --story-body: 1rem; --story-label: 1.125rem; --story-type-section: 2rem; }
  body.team-story .hero.concept-hero { --story-halo-size: 34rem; --story-halo-top: 7rem; --story-stage-height: 30rem; --story-copy-top: 14rem; }
  body.team-story .hero.concept-hero h1#hero-title { font-size: 2.5rem; max-width: 30rem; }
  body.team-story .principles-intro { font-size: 1.5rem; }
  body.team-story .principle-copy h3 { font-size: 2.25rem; }
  body.team-story .leadership-rail .leadership-letter:nth-child(n) { width: 32rem; flex-basis: 32rem; padding: 2rem; }
  body.team-story .letter-body p { font-size: 1rem; }
  body.team-story .leadership-letter h2 { font-size: 1.5rem; }
  body.team-story .letter-signature .letter-author__name b { font-size: 1rem; }
  body.team-story .letter-signature .letter-author > .letter-author__role { font-size: .875rem; }
  body.team-story #work .case-meta > p { font-size: 1rem; }
  body.team-story #work .case-tag { font-size: .875rem; }
  body.team-story #recognition .award p { font-size: 1rem; }
}

/* Living variant: bounded mobile component roles prevent the shared fluid root
   from turning supporting awards into oversized cards on narrow phones. */
@media (max-width: 767px) {
  body.team-story #recognition {
    --award-unit: clamp(16px, 2.5vw, 19px);
  }
  body.team-story #recognition .awards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--award-unit) * .75);
  }
  body.team-story #recognition .award:nth-child(n) {
    min-height: calc(var(--award-unit) * 9.25);
    padding: var(--award-unit) calc(var(--award-unit) * .75);
    gap: calc(var(--award-unit) * .75);
  }
  body.team-story #recognition .award-mark {
    height: calc(var(--award-unit) * 2.25);
    width: 100%;
  }
  body.team-story #recognition .award:nth-child(n) .award-mark img {
    height: calc(var(--award-unit) * 2);
    max-width: calc(var(--award-unit) * 3.75);
  }
  body.team-story #recognition .award:nth-child(1) .award-mark img,
  body.team-story #recognition .award:nth-child(2) .award-mark img,
  body.team-story #recognition .award:nth-child(7) .award-mark img {
    height: calc(var(--award-unit) * 1.5);
  }
  body.team-story #recognition .award:nth-child(3) .award-mark img {
    height: calc(var(--award-unit) * 1.75);
  }
  body.team-story #recognition .award p {
    font-size: calc(var(--award-unit) * .875);
    line-height: 1.4;
  }
  body.team-story #recognition .award p br { display: none; }
}

/* Compact laptop/tablet role: the shared root drops below 12px just above
   991px, so supporting copy needs an explicit accessible lower bound. */
@media (min-width: 768px) and (max-width: 1279px) {
  body.team-story #teams .team-story__body { font-size: max(14px, var(--story-body)); }
  body.team-story #teams .team-story__label,
  body.team-story #teams .team-story__outcome { font-size: max(13px, .875rem); }
  body.team-story #recognition .award p { font-size: max(14px, .875rem); }
  body.team-story #recognition .award:nth-child(n) {
    min-height: max(148px, 10rem);
    padding: max(16px, 1.25rem) max(12px, .75rem);
    gap: max(12px, 1rem);
  }
}