/* Cohen Lawyers - homepage template */
:root { --teal-dim: rgba(38, 59, 54, 0.65); --ink-90: rgba(0, 0, 0, 0.92); }
body { font-weight: 400; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img { height: auto; }
.skip-link { font-family: var(--font-ui); }
.nav__brand { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: 0.01em; display: flex; align-items: center; gap: 12px; }
.nav__links { list-style: none; }
.nav__link { text-transform: none; transition: opacity var(--d-fast) var(--ease-out); }
.nav__cta { letter-spacing: -0.01em; text-transform: none; }
.nav__cta:hover { border-color: var(--white); mix-blend-mode: normal; }
.nav-drawer { mix-blend-mode: normal; }
.chapter { position: relative; min-height: 100vh; display: flex; overflow: hidden; }
.hero { align-items: center; justify-content: center; background: var(--black); color: var(--white); text-align: center; }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media-fallback { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 35%, rgba(255,255,255,0.10) 0%, transparent 50%), radial-gradient(ellipse 60% 80% at 30% 80%, rgba(38,59,54,0.30) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 80% 70%, rgba(255,255,255,0.04) 0%, transparent 60%), linear-gradient(180deg, #000 0%, #0a0a0a 40%, #1a1a18 70%, #050505 100%); display: none !important; }
.hero__media-fallback::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(90deg, transparent 0, transparent 49.5%, rgba(255,255,255,0.04) 49.5%, rgba(255,255,255,0.04) 50.5%, transparent 50.5%), linear-gradient(90deg, transparent 0, transparent 24.5%, rgba(255,255,255,0.02) 24.5%, rgba(255,255,255,0.02) 25.5%, transparent 25.5%), linear-gradient(90deg, transparent 0, transparent 74.5%, rgba(255,255,255,0.02) 74.5%, rgba(255,255,255,0.02) 75.5%, transparent 75.5%); }
.hero__media-fallback::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%); }
.hero__vignette { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.55) 100%); }
.hero__content { position: relative; z-index: 2; padding: 32px; max-width: 1400px; width: 100%; }
.hero__eyebrow { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; font-weight: 400; color: var(--paper-60); margin-bottom: 56px; opacity: 0; animation: fadeUp var(--d-slow) var(--ease-cinematic) 200ms forwards; font-style: normal; }
.hero__eyebrow::before, .hero__eyebrow::after { content: ''; display: inline-block; width: 36px; height: 1px; background: var(--paper-40); vertical-align: middle; margin: 0 18px; }
.hero__headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.025em; color: var(--white); white-space: nowrap; }
.hero__headline em { font-style: normal !important; font-weight: 700 !important; color: inherit; font-family: var(--font-ui) !important; }
.hero__headline .word { display: inline-block; opacity: 0; transform: translateY(40px); animation: reveal 1100ms var(--ease-cinematic) forwards; }
.hero__headline .word:nth-child(1) { animation-delay: 120ms; }
.hero__headline .word:nth-child(2) { animation-delay: 240ms; }
.hero__headline .word:nth-child(3) { animation-delay: 360ms; }
.hero__headline .word:nth-child(4) { animation-delay: 480ms; }
.hero__headline .word, .hero__sub, .hero__actions, .hero__scroll-cue { animation-play-state: paused; }
body.intro-ready .hero__headline .word, body.intro-ready .hero__sub, body.intro-ready .hero__actions, body.intro-ready .hero__scroll-cue { animation-play-state: running; }
.hero__sub { font-family: var(--font-ui); font-style: normal; font-weight: 300; font-size: clamp(11px, 0.85vw, 13px); color: var(--paper-60); margin-top: 40px; max-width: 400px; margin-inline: auto; letter-spacing: 0.02em; line-height: 1.5; opacity: 0; animation: fadeUp var(--d-slow) var(--ease-cinematic) 720ms forwards; }
.hero__actions { margin-top: 56px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp var(--d-slow) var(--ease-cinematic) 920ms forwards; }
.btn { font-family: var(--font-ui); text-transform: none; }
.btn--ghost-light { background: transparent; color: var(--white); border-color: var(--paper-40); }
.btn--ghost-light:hover { border-color: var(--white); }
.btn--black { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--black:hover { background: transparent; color: var(--black); }
.btn--ghost-dark { background: transparent; color: var(--black); border-color: var(--ink-40); }
.btn--ghost-dark:hover { border-color: var(--black); }
.hero__scroll-cue { position: absolute; bottom: 40px; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--paper-60); opacity: 0; transform: translateY(12px); animation: fadeUp var(--d-slow) var(--ease-cinematic) 1120ms forwards; }
.hero__scroll-cue__line { display: block; position: relative; width: 26px; height: 44px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--paper-60); background: transparent; }
.hero__scroll-cue__line::before { content: ''; position: absolute; left: 50%; top: 9px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--white); animation: scrollWheel 1.6s var(--ease-cinematic) infinite; }
.chapter__no { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase; font-weight: 400; display: flex; align-items: center; gap: 16px; color: currentColor; opacity: 0.55; font-style: normal; }
.chapter__no::before { content: ''; display: inline-block; width: 36px; height: 1px; background: currentColor; opacity: 0.6; }
.reveal-word { display: inline-block; opacity: 0; transform: translateY(50%); transition: opacity 900ms var(--ease-cinematic), transform 900ms var(--ease-cinematic); }
.reveal-word.is-in { opacity: 1; transform: translateY(0); }
.positioning { align-items: center; justify-content: center; background: var(--white); text-align: center; padding: 120px 32px; overflow: hidden; position: relative; }
.positioning__inner { max-width: 1400px; }
.positioning__no { margin: 0 auto 80px; justify-content: center; }
.positioning__statement { font-family: var(--font-display); font-weight: 400; font-size: clamp(42px, 7vw, 132px); line-height: 1.04; letter-spacing: -0.022em; color: var(--black); max-width: 1300px; }
.positioning__statement em { font-style: italic; color: var(--teal); }
.positioning__caption { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(15px, 1.4vw, 19px); color: var(--ink-60); margin-top: 56px; max-width: 580px; margin-inline: auto; line-height: 1.6; }
.practice { align-items: flex-end; color: var(--white); overflow: hidden; background: var(--black); position: sticky; top: 0; height: 100vh; min-height: unset !important; border-radius: 24px 24px 0 0; }
.practice__media { position: absolute; inset: 0; z-index: 0; }
.practice__media-fallback { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 18s linear; transform: scale(1.08); display: none !important; }
.practice.is-in .practice__media-fallback { transform: scale(1); }
.practice__vignette { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 0%, transparent 35%, rgba(0,0,0,0.45) 62%, rgba(0,0,0,0.85) 100%); }
.practice__content { position: relative; z-index: 2; padding: 0 48px clamp(120px, 16vh, 200px) 48px; max-width: 1500px; width: 100%; display: flex !important; grid-template-columns: 1fr auto; align-items: center; gap: 24px; flex-direction: column !important; text-align: center; padding-left: 48px; padding-right: 48px; margin-inline: auto; }
.practice__left { display: flex; flex-direction: column; gap: 20px; max-width: 640px; align-items: center; text-align: center; }
.practice__no { color: var(--paper-60); display: flex !important; justify-content: center; font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase; opacity: 0.6; font-style: normal; }
.practice__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.practice__title em { font-style: normal; font-family: var(--font-ui); font-weight: 700; }
.practice__desc { font-family: var(--font-display); font-style: italic; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; color: var(--paper-60); max-width: 540px; margin-top: 12px; margin-inline: auto; }
.practice__right { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.practice__link { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--paper-40); transition: border-color var(--d-fast) var(--ease-out); }
.practice__link:hover { border-color: var(--white); }
.practice--business .practice__media-fallback { background: radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(38,59,54,0.25) 0%, transparent 60%), linear-gradient(135deg, #0a0a0a 0%, #1c1c1a 50%, #050505 100%); }
.practice--family .practice__media-fallback { background: radial-gradient(ellipse at 30% 60%, rgba(38,59,54,0.45) 0%, transparent 55%), radial-gradient(ellipse at 70% 30%, rgba(255,255,255,0.05) 0%, transparent 50%), linear-gradient(180deg, #0a0c0b 0%, #1a221f 60%, #060807 100%); }
.practice--property .practice__media-fallback { background: radial-gradient(ellipse at 50% 25%, rgba(255,255,255,0.08) 0%, transparent 45%), radial-gradient(ellipse at 20% 80%, rgba(0,0,0,0.6) 0%, transparent 60%), linear-gradient(160deg, #131311 0%, #1f1e1c 40%, #080807 100%); }
.practice--litigation .practice__media-fallback { background: radial-gradient(ellipse at 70% 40%, rgba(38,59,54,0.35) 0%, transparent 55%), radial-gradient(ellipse at 30% 80%, rgba(255,255,255,0.04) 0%, transparent 50%), linear-gradient(225deg, #0a0a0a 0%, #18211f 50%, #000 100%); }
.practice--estates .practice__media-fallback { background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 45%), radial-gradient(ellipse at 80% 20%, rgba(38,59,54,0.20) 0%, transparent 60%), linear-gradient(180deg, #0c0c0b 0%, #1a1a17 50%, #050505 100%); }
.practice--education .practice__media-fallback { background: radial-gradient(ellipse at 35% 70%, rgba(38,59,54,0.30) 0%, transparent 55%), radial-gradient(ellipse at 80% 30%, rgba(255,255,255,0.06) 0%, transparent 50%), linear-gradient(135deg, #050505 0%, #1c1f1e 50%, #0a0a0a 100%); }
.practice--franchise .practice__media-fallback { background: radial-gradient(ellipse at 60% 30%, rgba(38,59,54,0.28) 0%, transparent 55%), radial-gradient(ellipse at 25% 70%, rgba(255,255,255,0.05) 0%, transparent 50%), linear-gradient(200deg, #080808 0%, #181d1b 50%, #050505 100%); }
.approach { align-items: center; justify-content: center; background: var(--white); text-align: center; padding: 140px 32px; overflow: hidden; position: relative; }
.approach__rule { width: 1px; height: 88px; background: var(--black); margin: 0 auto 56px; transform-origin: top; transform: scaleY(0); transition: transform 1400ms var(--ease-cinematic) 200ms; }
.approach.is-in .approach__rule { transform: scaleY(1); }
.approach__statement { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 5.5vw, 96px); line-height: 1.12; letter-spacing: -0.018em; color: var(--black); max-width: 1200px; margin-inline: auto; }
.approach__statement em { font-style: italic; color: var(--teal); }
.approach__signoff { font-family: var(--font-display); font-style: italic; font-size: clamp(16px, 1.5vw, 22px); color: var(--ink-60); margin-top: 64px; max-width: 560px; margin-inline: auto; line-height: 1.55; }
.heritage { background: var(--black); color: var(--white); display: grid; grid-template-columns: 1fr 1fr; }
.heritage__visual { position: relative; min-height: 100vh; overflow: hidden; background: radial-gradient(ellipse at 40% 50%, rgba(38,59,54,0.30) 0%, transparent 60%), radial-gradient(ellipse at 70% 30%, rgba(255,255,255,0.04) 0%, transparent 50%), linear-gradient(180deg, #0a0a08 0%, #1a1a18 50%, #050505 100%); }
.heritage__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, transparent 80%, var(--black) 100%); pointer-events: none; z-index: 1; }
.heritage__content { padding: 120px 80px; display: flex; flex-direction: column; justify-content: center; gap: 48px; }
.heritage__no { color: var(--paper-60); }
.heritage__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 6.5vw, 112px); line-height: 1.0; letter-spacing: -0.022em; }
.heritage__title em { font-style: italic; }
.heritage__body { font-family: var(--font-display); font-style: italic; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.6; color: var(--paper-60); max-width: 520px; }
.heritage__stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; padding-top: 40px; border-top: 1px solid var(--paper-20); }
.heritage__stat-value { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--white); }
.heritage__stat-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--paper-60); margin-top: 12px; }
.testimonial { align-items: center; justify-content: center; background: var(--black); color: var(--white); text-align: center; padding: 120px 32px; overflow: hidden; position: relative; }
.testimonial__inner { max-width: 1100px; }
.testimonial__no { color: var(--paper-60); margin: 0 auto 64px; justify-content: center; }
.testimonial__quote { font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: clamp(15px, 1.8vw, 24px); line-height: 1.25; letter-spacing: -0.012em; color: var(--white); }
.testimonial__attribution { margin-top: 56px; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--paper-60); }
.testimonial__attribution::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--paper-40); vertical-align: middle; margin-right: 14px; }
.closing { position: relative; align-items: center; justify-content: center; background: var(--black); color: var(--white); text-align: center; padding: 140px 32px; overflow: hidden; }
.closing__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 40%, rgba(38,59,54,0.4) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(255,255,255,0.04) 0%, transparent 50%), linear-gradient(180deg, #050505 0%, #0d0f0e 50%, #000 100%); overflow: hidden; }
.closing__inner { position: relative; z-index: 1; max-width: 1100px; }
.closing__no { color: var(--paper-60); margin: 0 auto 64px; justify-content: center; }
.closing__headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(50px, 9vw, 168px); line-height: 0.96; letter-spacing: -0.025em; color: var(--white); }
.closing__headline em { font-style: italic; }
.closing__body { font-family: var(--font-display); font-style: italic; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; color: var(--paper-60); margin-top: 48px; max-width: 580px; margin-inline: auto; }
.closing__actions { margin-top: 64px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.closing__contact { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--paper-20); display: flex; gap: 56px; justify-content: center; flex-wrap: wrap; font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.16em; color: var(--paper-60); text-transform: uppercase; }
.closing__contact a { color: var(--white); }
.footer__brand { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -0.005em; }
.footer__tagline-headline { font-family: var(--font-ui); font-style: normal; }
.footer__tagline { font-family: var(--font-ui); font-style: normal; }
.footer__heading { font-family: var(--font-ui); }
.footer__list a { font-family: var(--font-ui); }
.footer__legal { font-family: var(--font-ui); }
.progress { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 14px; color: var(--white); transition: color 220ms var(--ease-out); }
.progress__dot { width: 18px; height: 18px; background: currentColor; -webkit-mask: url('../assets/logos/Cohen-Lawyers_Secondary_Black.svg') center / contain no-repeat; mask: url('../assets/logos/Cohen-Lawyers_Secondary_Black.svg') center / contain no-repeat; opacity: 0.45; transition: opacity var(--d-mid) var(--ease-out), transform var(--d-mid) var(--ease-out), background-color 220ms var(--ease-out); cursor: pointer; }
.progress__dot.is-active { opacity: 1; transform: scale(1.35); }
.practice-index { position: fixed; left: 28px; top: 50%; transform: translateY(-50%); z-index: 85; display: flex; flex-direction: column; gap: 14px; max-width: 180px; padding: 0; font-family: var(--font-ui); font-size: 11px; letter-spacing: -0.01em; text-transform: none; font-weight: 400; color: var(--white); transition: color 220ms var(--ease-out), opacity 300ms var(--ease-out); }
.practice-index__heading { font-family: var(--font-ui); font-size: 14px; letter-spacing: -0.01em; text-transform: none; font-weight: 700; margin: 0 0 18px 0; }
.practice-index__item { display: block; opacity: 0.28; line-height: 1.4; text-decoration: none; color: inherit; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); font-family: var(--font-ui); font-weight: 400; font-style: normal; }
.practice-index__item em { font-family: var(--font-ui); font-style: normal; font-weight: 400; letter-spacing: 0.22em; }
.practice-index__item:hover { opacity: 0.7; }
.practice-index__item.is-active { opacity: 1; transform: translateX(4px); }
.practice-index--light { color: var(--black); }
.subhero { background: var(--black); color: var(--white); padding: clamp(32px, 5vh, 56px) 32px; text-align: center; }
.subhero__inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.subhero__chips { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.subhero__eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.22em; color: var(--paper-60); margin: 0; position: relative; padding-bottom: 16px; }
.subhero__eyebrow::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 1px; background: rgba(255,255,255,0.18); }
.subhero__lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.18; letter-spacing: -0.01em; color: var(--white); margin: 0; }
.subhero__lead em { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.subhero__sep { opacity: 0.55; margin: 0 8px; font-style: normal; }
.inplace { align-items: center; justify-content: center; background: var(--black); color: var(--white); text-align: center; padding: 140px 32px; overflow: hidden; position: relative; }
.inplace__media { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.inplace__media-img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: 0.92; }
.inplace__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.32) 100%), linear-gradient(180deg, rgba(0,0,0,0.28) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.34) 100%); }
.inplace__inner { position: relative; z-index: 2; max-width: 1400px; width: 100%; }
.inplace__no { margin: 0 auto 80px; justify-content: center; color: var(--paper-60); }
.inplace__headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5.5vw, 84px); line-height: 1.08; letter-spacing: -0.02em; color: var(--white); margin: 0; max-width: 1200px; margin-left: auto; margin-right: auto; }
.inplace__headline em { font-style: italic; }
.inplace__locations { margin: 64px 0 0 0; display: inline-flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.inplace__chip { display: inline-flex; align-items: center; padding: 14px 28px; border: 1px solid var(--white); border-radius: 4px; background: var(--white); color: var(--black); text-decoration: none; font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); }
.inplace__chip:hover { background: transparent; color: var(--white); transform: translateY(-2px); }
.inplace__chip-sep { margin: 0 10px; opacity: 0.45; }
.team { position: relative; background: var(--black); color: var(--white); overflow: hidden; padding: 0; align-items: stretch; min-height: 38vw; max-height: 68vh; }
.team__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.team__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.team__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.65) 100%), radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.35) 100%); z-index: 1; }
.team__inner { position: relative; z-index: 3; max-width: 1400px; width: 100%; margin: 0 auto; padding: 40px 32px 64px; text-align: center; pointer-events: none; }
.team__no { margin: 0 auto 40px; justify-content: center; color: var(--paper-60); }
.team__headline { margin: 0 0 28px 0; }
.team__cutouts-new { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.team__cutout-btn { position: absolute; inset: 0; background: none; border: none; padding: 0; margin: 0; cursor: pointer; pointer-events: auto; }
.team__cutout-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: brightness(0.72) drop-shadow(0 0 0 transparent); transition: filter 320ms var(--ease-out), transform 320ms var(--ease-out); will-change: filter, transform; pointer-events: none; }
.team__cutout-btn.is-pixel-hover img, .team__cutout-btn:focus-visible img { filter: brightness(1.0) drop-shadow(0 0 8px rgba(255,255,255,0.55)) drop-shadow(0 0 28px rgba(255,255,255,0.22)); }
.team__name-label { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(10,10,10,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.15); color: var(--white); padding: 10px 22px; border-radius: 3px; font-family: var(--font-ui); font-size: 12px; font-weight: 300; letter-spacing: 0.01em; pointer-events: none; opacity: 0; transition: opacity 180ms var(--ease-out); text-align: center; white-space: nowrap; }
.team__name-label.is-visible { opacity: 1; }
.team__name-label strong { display: block; font-weight: 700; font-size: 13px; margin-bottom: 2px; letter-spacing: -0.01em; }
.team-card.is-highlighted { animation: cardHighlight 1.8s ease-out forwards; }
.team-carousel { background: #F9F8F6; padding: 40px 0; position: relative; }
.team-carousel::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 120px; background: linear-gradient(to right, transparent, #F9F8F6 80%); pointer-events: none; z-index: 2; }
.team-carousel::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: max(48px, calc((100vw - 1440px) / 2 + 48px)); background: linear-gradient(to right, #F9F8F6 0, #F9F8F6 72%, rgba(249,248,246,0.95) 76%, rgba(249,248,246,0.85) 80%, rgba(249,248,246,0.7) 84%, rgba(249,248,246,0.52) 88%, rgba(249,248,246,0.34) 91%, rgba(249,248,246,0.18) 94%, rgba(249,248,246,0.07) 97%, transparent 100%); pointer-events: none; z-index: 2; }
.team-carousel__header { max-width: 1440px; margin: 0 auto 32px; padding: 0 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; position: relative; z-index: 3; }
.team-carousel__eyebrow { font-size: 10px; font-weight: 400; letter-spacing: 0.38em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 20px; display: inline-flex; align-items: center; gap: 8px; }
.team-carousel__h2 { font-family: var(--font-ui); font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.02em; line-height: 1.2; color: var(--black); }
.team-carousel__view-all { font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--black); white-space: nowrap; padding-bottom: 3px; border-bottom: 1px solid var(--black); flex-shrink: 0; transition: opacity 200ms; }
.team-carousel__nav { display: flex; gap: 8px; flex-shrink: 0; }
.team-nav-btn { width: 40px; height: 40px; border: 1px solid rgba(0,0,0,0.2); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--black); transition: background 200ms var(--ease-out), border-color 200ms, color 200ms; }
.team-nav-btn:hover { background: var(--black); color: #fff; border-color: var(--black); }
.team-nav-btn svg { width: 16px; height: 16px; pointer-events: none; }
.team-grid { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 0 48px 16px max(48px, calc((100vw - 1440px) / 2 + 48px)); scroll-padding-left: max(48px, calc((100vw - 1440px) / 2 + 48px)); gap: 2px; list-style: none; scrollbar-width: none; }
.team-grid::-webkit-scrollbar { display: none; }
.team-card { background: var(--white); overflow: hidden; flex: 0 0 auto; width: clamp(220px, 20vw, 300px); scroll-snap-align: start; transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms var(--ease-out); position: relative; cursor: pointer; }
.team-card.is-expanded { width: clamp(380px, 34vw, 500px); box-shadow: 0 0 0 2px var(--black), 0 20px 60px -20px rgba(0,0,0,0.25); }
.team-card__photo-wrap { aspect-ratio: 3/2; overflow: hidden; }
.team-card__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform 400ms var(--ease-cinematic); }
.team-card:hover .team-card__photo { transform: scale(1.02); }
.team-card__photo--placeholder { display: flex; align-items: center; justify-content: center; background: #ECEAE3; filter: none; }
.team-card__photo--placeholder svg { width: 44%; height: auto; fill: rgba(38, 59, 54, 0.35); }
.team-card__body { padding: 24px; }
.team-card__role-tag { display: inline-block; font-size: 10px; font-weight: 400; letter-spacing: 0.38em; text-transform: uppercase; color: var(--ink-40); border: 1px solid rgba(0,0,0,0.12); padding: 4px 10px; margin-bottom: 14px; }
.team-card__name { font-family: var(--font-ui); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--black); margin-bottom: 4px; }
.team-card__title { font-family: var(--font-ui); font-weight: 300; font-size: clamp(12px, 0.9vw, 14px); line-height: 1.7; color: var(--ink-60); margin-bottom: 12px; }
.team-card__bio { font-family: var(--font-ui); font-weight: 300; font-size: clamp(10px, 0.75vw, 11px); line-height: 1.5; color: var(--ink-60); margin-bottom: 12px; }
.team-card__link { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(0,0,0,0.2); padding-bottom: 2px; transition: border-color var(--d-fast) var(--ease-out), gap var(--d-fast) var(--ease-cinematic); }
.team-card__link:hover { border-color: var(--black); gap: 10px; }
.team-card__link::after { content: ''; position: absolute; inset: 0; }
.recap { background: var(--black); color: var(--white); padding: clamp(72px, 12vh, 128px) 32px; }
.recap__inner { max-width: 1400px; margin: 0 auto; }
.recap__no { margin: 0 auto 40px; justify-content: center; color: var(--paper-60); }
.recap__headline { font-family: var(--font-display); font-weight: 400; color: var(--white); text-align: center; margin: 0 0 64px 0; }
.recap__headline em { font-style: italic; }
.recap__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.10); }
.recap__item { background: var(--black); }
.recap__link { display: flex; flex-direction: column; gap: 8px; padding: 32px 28px; color: inherit; text-decoration: none; transition: background var(--d-fast) var(--ease-out); min-height: 120px; justify-content: center; }
.recap__link:hover { background: rgba(255,255,255,0.04); }
.recap__title { font-family: var(--font-ui); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--white); }
.recap__title em { font-family: var(--font-ui); font-style: normal; font-weight: 700; }
.recap__desc { font-family: var(--font-ui); font-size: 13px; font-weight: 300; line-height: 1.55; letter-spacing: -0.01em; color: var(--paper-60); }
.recap__item--cta .recap__link { gap: 12px; background: rgba(255,255,255,0.025); }
.recap__item--cta .recap__link:hover { background: rgba(255,255,255,0.06); }
.recap__cta-eyebrow { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.38em; text-transform: uppercase; color: var(--paper-60); font-weight: 400; }
.recap__cta-title { font-family: var(--font-ui); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; color: var(--white); display: flex; align-items: baseline; gap: 10px; }
.recap__cta-title em { font-family: var(--font-ui); font-style: normal; font-weight: 700; }
.recap__cta-arrow { font-family: var(--font-ui); font-weight: 400; transition: transform 320ms var(--ease-out); }
.recap__item--cta .recap__link:hover .recap__cta-arrow { transform: translateX(8px); }
.recap__item--tagline { background: var(--black); }
.recap__item--tagline .recap__tagline { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 32px 28px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.3; color: var(--paper-60); text-align: center; }
.hero__sub, .positioning__caption, .practice__desc, .approach__signoff, .heritage__body, .closing__body { font-family: var(--font-ui); font-weight: 300; letter-spacing: 0; font-style: normal; font-size: clamp(12px, 0.9vw, 14px); line-height: 1.7; }
.hero__headline-mark { display: block; width: min(1100px, 86vw); height: auto; }
.positioning__statement, .inplace__headline, .approach__statement, .team__headline, .heritage__title, .testimonial__quote, .closing__headline, .recap__headline { font-size: clamp(30px, 4vw, 56px); line-height: 1.12; }
.chapter__no, .hero__eyebrow { display: none !important; }
#chapter-3 { position: relative; background: var(--black); }
.practice--business { z-index: 10; }
.practice--family { z-index: 11; }
.practice--property { z-index: 12; }
.practice--litigation { z-index: 13; }
.practice--education { z-index: 14; }
.practice--estates { z-index: 15; }
.practice--franchise { z-index: 16; }
.practice .reveal-up { transition-delay: 0ms !important; transition-duration: 300ms !important; }
.practice__no::before { display: none; }
.nav__logo-img { display: block; transition: filter 220ms var(--ease-out); }
.closing__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: brightness(0.65); }
.hero__media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: brightness(0.72); transform: scale(1.04); transition: transform 8000ms var(--ease-cinematic); will-change: transform; }
.hero__media-img.is-loaded { transform: scale(1); }
.heritage__visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 90%; filter: brightness(0.72); }
.practice__media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.95); }
.practice--family .practice__media-img { object-position: center 55%; }
.practice--property .practice__media-img { object-position: center 60%; }
.practice--litigation .practice__media-img { object-position: center 15%; }
.practice--estates .practice__media-img { object-position: center 75%; }
.practice--education .practice__media-img { object-position: center 80%; }
.secondary-mark { position: absolute; pointer-events: none; user-select: none; display: none; z-index: 0; }
.positioning .secondary-mark { bottom: 0; left: -35%; width: clamp(900px, 85vw, 1200px); opacity: 0.055; }
.approach .secondary-mark { bottom: 8%; right: -15%; width: clamp(500px, 45vw, 680px); opacity: 0.07; transform: scaleX(-1); }
.testimonial .secondary-mark { bottom: -15%; left: -35%; width: clamp(900px, 85vw, 1200px); opacity: 0.08; filter: invert(1); }
.progress--light { color: var(--black); }
.nav__logo-lawyers-txt { font-family: var(--font-ui); font-weight: 300; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; border-left: 1px solid currentColor; padding-left: 12px; opacity: 0.65; padding-top: 2px; }
.csplash { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #263B36; will-change: transform,opacity; }
.csplash__logo { width: min(46vw,440px); height: auto; overflow: visible; }
.csplash-ltr { opacity: 0; transform: translateY(15px); transform-box: fill-box; transform-origin: center; }
#csplash-mark { opacity: 0; transform-box: view-box; transform-origin: 1345.6px 597.4px; transform: translate(-397.6px,-57.4px) scale(9) rotate(-90deg); }
/* ── SPLASH TIMELINE — slowed to a brand reveal ──
   Every duration and delay scaled 1.65x from the original 3.1s cut, so the
   rhythm and overlaps are unchanged and it simply breathes: the mark turns
   and settles, the wordmark letters arrive under it, the whole lockup holds,
   then the panel lifts away. Total 4.6s, and it runs once per session
   (sessionStorage), so it is not paid on every page view.
     mark      200 -> 1930ms
     letters  1900 -> 3020ms  (first letter lands just before the mark settles)
     hold     3020 -> 3800ms
     exit     3800 -> 4560ms  (hero entrance starts the moment this begins)
   The build-up (mark + letters) is the tuned 1.65x scale and is left alone.
   The ending is shortened in both of its parts: the static hold after the last
   letter is 780ms rather than the scaled 1020ms, and the lift is 760ms rather
   than 1060ms. The hold matters most - with this easing the lift is visually
   finished in ~350ms and the rest of its duration is an invisible tail, so
   stillness in the hold is what actually reads as a slow ending.
   The JS safety timeout in index.html must stay above 4560ms. */
body.csplash-play #csplash-mark { animation: csplashMark 1730ms cubic-bezier(0.16,1,0.3,1) 200ms forwards; }
body.csplash-play .csplash-ltr { animation: csplashLtr 660ms cubic-bezier(0.16,1,0.3,1) forwards; }
body.csplash-play .csplash-ltr.c { animation-delay: 1900ms; }
body.csplash-play .csplash-ltr.o { animation-delay: 2015ms; }
body.csplash-play .csplash-ltr.h { animation-delay: 2130ms; }
body.csplash-play .csplash-ltr.e { animation-delay: 2245ms; }
body.csplash-play .csplash-ltr.n { animation-delay: 2360ms; }
body.csplash-play .csplash { animation: csplashExit 760ms cubic-bezier(0.16,1,0.3,1) 3800ms forwards; }
.csplash.is-done { display: none; }

@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scrollWheel {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(22px); }
}

@media (max-width: 880px) {
  .heritage { grid-template-columns: 1fr; }
  .heritage__visual { min-height: 60vh; }
  .heritage__content { padding: 80px 32px; }
  .progress { display: none; }
  .team { padding: 0; min-height: unset; max-height: unset; aspect-ratio: 16 / 9; }
  .team__inner { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 24px 36px; margin: 0; }
  .team__cutouts-new { display: none; }
  .team__name-label { display: none; }
  .team-carousel__header { padding: 0 24px; }
  .team-grid { padding: 0 24px 16px; }
  .team-card { width: clamp(200px, 55vw, 260px); }
  .practice__content { grid-template-columns: 1fr; gap: 24px; padding: 0 24px 56px; padding-left: 24px; padding-right: 24px; }
  .practice__right { align-items: center !important; }
  .heritage__stats { grid-template-columns: 1fr; gap: 28px; }
  .hero__headline { white-space: normal; line-height: 1.08; }
  .practice__title { white-space: normal; }
  .positioning { padding: 72px 24px; }
  .approach { padding: 72px 24px; }
  .inplace { padding: 80px 24px; }
  .testimonial { padding: 72px 24px; }
  .closing { padding: 80px 24px; }
  .approach__rule { height: 48px; margin-bottom: 36px; }
  .closing__contact { gap: 20px; }
  .practice { height: 65vh; }
  .practice--family .practice__media-img { object-position: center 28%; }
}

@media (max-width: 1080px) {
  .practice-index { display: none; }
}

@media (max-width: 640px) {
  .subhero { padding: 28px 24px; }
  .subhero__inner { gap: 16px; }
  .team-carousel { padding: 40px 0; }
  .team-carousel__header { padding: 0 24px; margin-bottom: 24px; flex-wrap: wrap; align-items: flex-start; }
  .team-grid { padding: 0 24px 16px; }
  .team-card { width: clamp(180px, 72vw, 240px); }
  .team-carousel__nav { display: none; }
}

@keyframes cardHighlight {
  0% { outline: 2px solid transparent; }
  20% { outline: 2px solid var(--black); outline-offset: 0px; }
  100% { outline: 2px solid transparent; outline-offset: 4px; }
}

@media (max-width: 1200px) {
  .team-carousel__header { padding: 0 32px; }
  .team-grid { padding: 0 32px 16px; }
}

@media (max-width: 1180px) {
  .recap__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .recap__grid { grid-template-columns: 1fr; }
  .recap { padding: 56px 24px; }
  .recap__headline { margin-bottom: 40px; }
  .practice { height: 50vh; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media-img { transition: none; transform: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal-up, .reveal-word, .hero__headline .word, .hero__eyebrow, .hero__sub, .hero__actions, .hero__scroll-cue { opacity: 1 !important; transform: none !important; }
  .approach__rule { transform: scaleY(1) !important; }
  .practice__media-fallback { transform: scale(1) !important; }
}

@media (max-width: 480px) {
  .testimonial { padding: 56px 24px; }
}

@media (max-height: 520px) {
  .practice__media-img { object-position: center 30% !important; }
  .closing__bg-img { object-position: center 30% !important; }
}

@media (max-width:900px) {
  .csplash__logo { width: min(60vw,440px); }
}

@media (max-width:640px) {
  .csplash__logo { width: 82vw; }
}

@keyframes csplashMark {
  0% { opacity: 0; transform: translate(-397.6px,-57.4px) scale(9) rotate(-90deg); }
  14% { opacity: 1; transform: translate(-397.6px,-57.4px) scale(9) rotate(-90deg); }
  56% { opacity: 1; transform: translate(-397.6px,-57.4px) scale(9) rotate(0deg); }
  67% { opacity: 1; transform: translate(-397.6px,-57.4px) scale(9) rotate(0deg); }
  100% { opacity: 1; transform: translate(0,0) scale(1) rotate(0deg); }
}

@keyframes csplashLtr {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes csplashExit {
  0% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0); }
  100% { opacity: 0; transform: translateY(-3%) scale(1.04); clip-path: inset(0 0 100% 0); }
}

@media (prefers-reduced-motion:reduce) {
  .csplash { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   R5_v2 TYPOGRAPHY RESTORE - realigns homepage section fonts with the
   locked Rollout 3 treatment (v4 typography overrides, Josh feedback
   2026-05-18 rev 2): Poppins Bold headings, Playfair Display Regular
   for the callout words, upright everywhere - no italics.
   Font family / weight / style / letter-spacing only. Sizes untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* All editorial section headings (hero excluded) -> Poppins Bold, no italic */
.positioning__statement,
.practice__title,
.approach__statement,
.heritage__title,
.testimonial__quote,
.closing__headline,
.inplace__headline,
.team__headline,
.recap__headline,
.subhero__lead {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-style: normal !important;
}

/* Callout words (em) inside headings -> Playfair Regular, UPRIGHT */
.positioning__statement em,
.practice__title em,
.approach__statement em,
.heritage__title em,
.testimonial__quote em,
.closing__headline em,
.inplace__headline em,
.team__headline em,
.recap__headline em,
.subhero__lead em,
.recap__title em {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal !important;
  color: inherit;
}

/* Practice section em -> stays Poppins Bold (no Playfair callout here) */
.practice__title em {
  font-family: var(--font-ui);
  font-weight: 700;
  font-style: normal;
}

/* Practice eyebrow "Practice" label -> re-shown for the practice sections only.
   The global .chapter__no hide sits AFTER the .practice__no rule in this build,
   so with equal specificity the hide was winning. Re-asserted here as R3 does. */
.practice__no {
  display: flex !important;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  opacity: 0.6;
  font-style: normal;
}
.practice__no::before { display: none; }



.team-card { display: flex; flex-direction: column; }
.team-card__body { flex: 1; }

/* ── TEAM CARD ROW ALIGNMENT ──
   The new copy gives some people a dual role ("Director | Principal Solicitor")
   and a longer discipline line, so the role pill and the discipline wrap to a
   different number of lines on each card. Everything below them then starts at a
   different height and the row stops reading as a row.

   The floor goes on the ROW, not on the element. The card body becomes a grid
   whose pill and discipline tracks carry a minmax() floor, so a short pill keeps
   its natural height and its border still hugs its text - a min-height on the
   pill itself stretched it into a full-width box. The bio track takes 1fr and
   absorbs the slack, which lands the CTA on the card foot right across the row.
   minmax(_, auto) rather than a fixed height so an unusually long line can still
   grow instead of being clipped by the card's overflow:hidden. */
.team-card__body { display: grid; flex: 1;
  grid-template-rows:
    minmax(42px, auto)   /* role pill  - one or two lines */
    auto                 /* name       - always one line */
    minmax(72px, auto)   /* discipline - one to three lines */
    1fr                  /* bio        - absorbs the slack */
    auto;                /* CTA        - sits on the foot */
  align-items: start; }
.team-card__role-tag { display: inline-block; justify-self: start; min-height: 0; }
.team-card__title { min-height: 0; }
.team-card__link { justify-self: start; align-self: end; margin-top: 0; }

@media (max-width: 1300px) {
  .team-card__body { grid-template-rows: minmax(58px,auto) auto minmax(96px,auto) 1fr auto; }
}
@media (max-width: 1024px) {
  /* two columns - the cards are wide again, so far less wrapping */
  .team-card__body { grid-template-rows: minmax(42px,auto) auto minmax(48px,auto) 1fr auto; }
}
@media (max-width: 640px) {
  .team-card__body { grid-template-rows: minmax(34px,auto) auto auto 1fr auto; }
}

/* On the grid pages subgrid makes it exact at every width: the cards in a row
   share one set of tracks, so the floors above stop mattering there and no card
   carries dead space. The 2px row-gap moves onto the card as a border so the
   hairline seam between rows survives - with subgrid a row-gap would otherwise
   be inserted between all six tracks and split each card apart. */
@supports (grid-template-rows: subgrid) {
  .team__grid { row-gap: 0; }
  .team__grid .team-card { display: grid; grid-template-rows: subgrid; grid-row: span 6;
    border-bottom: 2px solid var(--neutral-bg, #F9F8F6); }
  .team__grid .team-card__body { grid-template-rows: subgrid; grid-row: span 5; }
}

/* ── HOMEPAGE STRIP ──
   The strip is a horizontal scroller, so its cards cannot share tracks the way
   the index pages do: making the track a grid would put the photos on one
   shared row, and expanding a card (.is-expanded goes to 500px) would then
   stretch every other card's photo with it. So the strip keeps per-card floors.

   Two people carry a dual role - "Director | Principal Solicitor" and
   "Associate Solicitor | People & Culture Manager" - and at 0.38em the second
   one runs to three lines in a 300px card, which would force a three-line floor
   and open a 31px gap under everyone else's single-line pill. Easing the
   tracking to 0.30em brings the longest role back to two lines, so the floor is
   two lines and the dead space stays at 15px. */
.team-grid .team-card__role-tag { letter-spacing: 0.30em; }
.team-grid .team-card__body { grid-template-rows:
    minmax(54px, auto)   /* role pill  - two lines at the longest */
    auto                 /* name */
    minmax(84px, auto)   /* discipline - three lines at the longest */
    1fr                  /* bio */
    auto; }              /* CTA */
@media (max-width: 1024px) {
  .team-grid .team-card__body { grid-template-rows: minmax(54px,auto) auto minmax(84px,auto) 1fr auto; }
}
@media (max-width: 640px) {
  /* On a phone the strip shows about one card at a time, so a cross-card offset
     is barely perceptible - whereas at a 240px card width the longest role runs
     to three lines, and a floor tall enough for it would leave 31px of dead
     space under every single-line pill. The strip runs natural here; only the
     CTA stays pinned. The index pages keep exact alignment on mobile because
     subgrid handles their two-column layout for free. */
  .team-grid .team-card__body { grid-template-rows: auto auto auto 1fr auto; }
}