/* Screenshot-matched About/Team layout, scoped to RoofCaster's Team page. */
.team-page { --team-dark: var(--dark-bg); height: 100vh; overflow-y: auto; overflow-x: hidden; background: #fff; color: var(--text-primary); scroll-behavior: smooth; }
.team-page *, .team-page *::before, .team-page *::after { box-sizing: border-box; }
.team-page main .container { max-width: 1040px; padding-inline: 20px; }
.team-page h1, .team-page h2 { white-space: pre-line; }
.team-page main p { font-size: 1rem; line-height: var(--body-line-height); }
.team-page h2 { font-size: 3rem; line-height: 1.08; margin: 0 0 42px; }
.team-journey-rail:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.team-section { padding-block: 88px; }

/* A full-width photographic hero with left-aligned copy. */
.team-hero { position: relative; isolation: isolate; min-height: min(900px, calc(100vh - var(--header-height))); background: var(--team-dark); color: #fff; }
.team-panel-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -1; }
.team-hero .team-panel-image { object-position: 68% center; }
.team-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, #022110e8 0%, #022110b8 37%, #03201422 78%), linear-gradient(0deg, #02160b55, transparent 60%); }
.team-hero-copy { position: relative; z-index: 1; padding-top: clamp(190px, 27vh, 250px); padding-bottom: 90px; }
.team-page .team-eyebrow { color: #e4f0e8; font-size: 1.4rem; font-weight: 600; margin: 0 0 30px; }
.team-hero h1 { color: #fff; font-size: var(--font-size-hero); line-height: 1.06; max-width: 700px; margin-bottom: 42px; }
.team-page .team-hero-description { max-width: 620px; color: #fff; font-size: 1.05rem; margin-bottom: 42px; }

/* Reuse Home's WhyCard in a single row on desktop. */
.team-page main .team-pillars { max-width: var(--container); }
.team-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding-block: 34px; }
.team-pillars > .aos-init { display: flex; min-width: 0; }
.team-pillars .why-card { height: 100%; padding: 1.25rem; gap: .75rem; }
.team-pillars .card-content { min-width: 0; padding: 0; }
.team-pillars .why-card .card-content p { line-height: normal; }
.team-pillars .why-icon svg { width: 24px; height: 24px; }

/* A cinematic globe background, with the same text/image balance as the reference. */
.team-mission { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 660px; background: var(--team-dark); color: #fff; }
.team-mission .team-panel-image { object-position: center; }
.team-mission::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, #03170df2, #03170d99 32%, transparent 65%); }
.team-panel-content { position: relative; z-index: 1; }
.team-panel-content > div { max-width: 500px; }
.team-mission h2 { color: #fff; }
.team-mission p { color: #fff; max-width: 500px; margin: 0 0 24px; }
.team-page .team-lead { font-weight: 600; }

/* Simple two-column timeline: rules and bullet points, without illustrated cards. */
.team-journey { min-height: 650px; background: #fff; }
.team-journey h2 { text-align: center; margin-bottom: 116px; white-space: normal; }
.team-journey-body { position: relative; }
.team-journey-rail { position: relative; display: flex; gap: 48px; padding: 0 0 14px; margin: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.team-chapter { flex: 0 0 calc((100% - 48px) / 2); scroll-snap-align: start; border-top: 2px solid #cbd3cd; padding-top: 18px; }
.team-chapter h3 { font-size: 1.7rem; line-height: 1.2; margin-bottom: 20px; }
.team-chapter ul { list-style: disc; padding-left: 24px; margin: 0; color: var(--text-muted); font-size: 1.22rem; line-height: 1.45; }
.team-chapter ul li { margin-bottom: 6px; }
.team-journey-controls button { position: absolute; top: 45%; width: 32px; height: 44px; border: 0; padding: 0; display: grid; place-items: center; background: transparent; color: #3f5948; cursor: pointer; }
.team-journey-previous { left: -44px; }
.team-journey-next { right: -44px; }
.team-journey-controls button:disabled { opacity: 0; cursor: default; pointer-events: none; }
.team-journey-controls .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.static-export .team-journey-controls { display: none; }
.static-export .team-journey-rail { scrollbar-width: thin; }

/* Dark culture panel, portrait image on the right. */
.team-culture { background: var(--team-dark); color: #fff; padding-block: 64px; }
.team-culture-grid { display: grid; grid-template-columns: minmax(0, 1fr) 432px; gap: 72px; align-items: center; }
.team-culture h2 { color: #fff; max-width: 490px; }
.team-culture p { max-width: 500px; color: #fff; margin: 0 0 48px; }
.team-culture-image { position: relative; margin: 0; height: 575px; border-radius: 20px; overflow: hidden; }
.team-culture-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-culture-image figcaption { position: absolute; bottom: 12px; left: 16px; right: 16px; font-size: .66rem; color: #fff; text-shadow: 0 1px 4px #000; }

/* Alternating spacious leadership rows: first image left, second image right. */
.team-leadership { padding: 88px 0 64px; background: #fff; }
.team-leadership-intro { text-align: center; margin-bottom: 65px; }
.team-leadership-intro p { color: var(--text-muted); max-width: 720px; margin: 0 auto; }
.team-leadership-intro h2 { margin-bottom: 24px; }
.team-person { display: grid; grid-template-columns: 432px minmax(0, 1fr); gap: 72px; align-items: center; margin-block: 0 96px; }
.team-founder-portrait, .team-coo-portrait { position: relative; height: 575px; border-radius: 20px; overflow: hidden; }
.team-founder-portrait { background: #e2e9e5; }
.team-founder-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.team-person-copy h3 { font-size: 3rem; line-height: 1.1; margin-bottom: 42px; }
.team-person-copy > p { font-size: 1.05rem; color: var(--text-primary); line-height: 1.48; margin: 0 0 22px; }
.team-person-copy > .team-person-role { color: var(--text-muted); font-size: 1.5rem; line-height: 1.2; margin-bottom: 24px; font-weight: 500; }
.team-linkedin { display: inline-flex; gap: 10px; align-items: center; color: var(--accent-green); font-size: .95rem; font-weight: 700; text-decoration: none; margin-top: 8px; padding-block: 8px; }
.team-linkedin:hover { text-decoration: underline; text-underline-offset: 5px; }
.team-coo { grid-template-columns: minmax(0, 1fr) 432px; }
.team-coo-portrait { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: #edf3ee; color: #86a491; }
.team-coo > .team-person-copy { grid-column: 1; grid-row: 1; }
.team-coo-portrait > span { font-size: .9rem; letter-spacing: .15em; }
.team-person:last-child { margin-bottom: 0; }

/* Full-width architecture background; left-aligned governance copy. */
.team-responsibility { position: relative; isolation: isolate; min-height: 700px; display: flex; align-items: center; background: #e7f5ec; }
.team-responsibility .team-panel-content h2 { max-width: 500px; }
.team-responsibility .team-panel-content > p { max-width: 500px; margin: 0 0 26px; }
.team-policy-links { display: flex; flex-wrap: wrap; gap: 20px; max-width: 500px; }
.team-policy-links a { color: var(--accent-green); font-size: .9rem; font-weight: 700; text-underline-offset: 4px; }
.team-illustration-label { position: absolute; bottom: 16px; right: 20px; font-size: .66rem; color: #fff; text-shadow: 0 1px 4px #000; }

/* Four marks and captions, matching the recognition band's proportions. */
.team-values { min-height: 440px; padding-block: 80px 90px; background: #fff; }
.team-values h2 { font-size: 1rem; line-height: 1.4; text-align: center; color: var(--text-muted); margin-bottom: 60px; }
.team-values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; text-align: center; }
.team-value-symbol { display: grid; place-items: center; height: 64px; color: var(--accent-green); margin-bottom: 22px; }
.team-value-symbol svg { width: 54px; height: 54px; stroke-width: 1.4; }
.team-values-grid h3 { font-size: .96rem; line-height: 1.4; margin-bottom: 8px; }
.team-values-grid p { font-size: .8rem; line-height: 1.45; color: #69786f; margin: 0; }

@media (max-width: 1150px) {
  .team-journey-previous { left: -20px; }
  .team-journey-next { right: -20px; }
  .team-journey-body { margin-inline: 20px; }
}
@media (max-width: 1023px) {
  .team-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .team-culture-grid, .team-person { grid-template-columns: minmax(0, 1fr) 38%; gap: 40px; }
  .team-person { grid-template-columns: 38% minmax(0, 1fr); }
  .team-coo { grid-template-columns: minmax(0, 1fr) 38%; }
  .team-culture-image, .team-founder-portrait, .team-coo-portrait { height: 500px; }
  .team-page h2, .team-person-copy h3 { font-size: 2.55rem; }
  .team-panel-content > div, .team-responsibility .team-panel-content > p, .team-responsibility .team-panel-content h2 { max-width: 48%; }
  .team-mission h2, .team-mission p { max-width: none; }
}
@media (max-width: 640px) {
  .team-page main .container { padding-inline: 22px; }
  .team-section { padding-block: 56px; }
  .team-page h2 { font-size: 2.1rem; }
  .team-hero { min-height: 740px; min-height: max(740px, calc(100svh - var(--header-height))); }
  .team-hero .team-panel-image { object-position: 70% center; }
  .team-hero::before { background: linear-gradient(90deg, #022110de, #02211055), linear-gradient(0deg, #022110aa, transparent); }
  .team-hero-copy { padding-top: 185px; padding-bottom: 80px; }
  .team-page .team-eyebrow { font-size: 1.2rem; margin-bottom: 28px; }
  .team-hero h1 { font-size: 2.65rem; max-width: 340px; margin-bottom: 30px; }
  .team-page .team-hero-description { max-width: 350px; font-size: .98rem; margin-bottom: 32px; }
  .team-pillars { grid-template-columns: 1fr; padding-block: 24px; }
  .team-mission { min-height: 680px; align-items: flex-start; padding-top: 72px; }
  .team-mission .team-panel-image { object-position: 58% center; }
  .team-mission::before { background: linear-gradient(180deg, #03170df0 0%, #03170daa 45%, #03170d33); }
  .team-panel-content > div, .team-responsibility .team-panel-content > p, .team-responsibility .team-panel-content h2 { max-width: none; }
  .team-mission h2 { max-width: 340px; }
  .team-mission p { font-size: .96rem; }
  .team-journey { min-height: 600px; }
  .team-journey h2 { margin-bottom: 70px; font-size: 2rem; }
  .team-journey-rail { gap: 24px; }
  .team-chapter { flex-basis: 100%; }
  .team-chapter h3 { font-size: 1.5rem; }
  .team-chapter ul { font-size: 1.08rem; }
  .team-journey-body { margin-inline: 12px; }
  .team-journey-previous { left: -26px; }
  .team-journey-next { right: -26px; }
  .team-culture { padding-block: 56px; }
  .team-culture-grid, .team-person, .team-coo { grid-template-columns: 1fr; gap: 36px; }
  .team-culture p { margin-bottom: 32px; }
  .team-culture-image { height: auto; aspect-ratio: 3 / 4; }
  .team-leadership { padding-block: 64px; }
  .team-leadership-intro { margin-bottom: 48px; }
  .team-leadership-intro p { font-size: .96rem; }
  .team-person { margin-bottom: 72px; }
  .team-founder-portrait, .team-coo-portrait { height: auto; aspect-ratio: 3 / 4; }
  .team-person-copy h3 { font-size: 2.5rem; margin-bottom: 30px; }
  .team-person-copy > .team-person-role { font-size: 1.3rem; }
  .team-person-copy > p { font-size: .97rem; }
  .team-coo-portrait { grid-column: 1; grid-row: 1; }
  .team-coo > .team-person-copy { grid-column: 1; grid-row: 2; }
  .team-responsibility { min-height: 720px; align-items: flex-start; padding-top: 72px; }
  .team-responsibility .team-panel-image { object-position: 65% center; }
  .team-responsibility::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #e7f5ecf2 0%, #e7f5ece6 40%, #e7f5ec44 75%); }
  .team-responsibility h2 { max-width: 330px; }
  .team-values { padding-block: 64px; }
  .team-values h2 { font-size: 1rem; }
  .team-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 24px; }
  .team-values-grid p { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .team-page { scroll-behavior: auto; }
}