/* Solution 02 shares the home's brand tokens and progressive motion layer. */
.social-hero { position: relative; isolation: isolate; background: var(--night); color: var(--paper); }
.social-hero__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.social-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(11 11 11 / .82), rgb(11 11 11 / .25) 75%), linear-gradient(0deg, rgb(11 11 11 / .85), transparent 65%); }
.social-hero__inner { padding: 36px var(--gutter) 46px; min-height: clamp(590px, 78svh, 850px); display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.social-hero__meta { display: flex; justify-content: space-between; gap: 24px; color: var(--muted-light); }
.social-hero h1 { font-size: clamp(64px, 8.7vw, 155px); line-height: .98; letter-spacing: -.055em; font-weight: 800; font-stretch: 112%; text-transform: uppercase; }
.social-hero h1 em { font-style: italic; font-weight: 600; color: var(--green); }
.social-hero__bottom { display: flex; justify-content: space-between; align-items: end; gap: 24px; border-top: 1px solid rgb(255 255 255 / .3); padding-top: 28px; }
.social-hero__bottom p { max-width: 37ch; font-size: clamp(18px, 1.8vw, 27px); line-height: 1.3; letter-spacing: -.02em; }
.social-hero__bottom .btn { flex: none; }
.social-statement { font-size: clamp(42px, 5.3vw, 88px); line-height: 1.03; letter-spacing: -.05em; font-stretch: 112%; font-weight: 800; text-wrap: balance; }
.social-statement span { color: #07863e; }
.social-intro__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; gap: clamp(40px, 7vw, 120px); }
.social-intro__body { max-width: 490px; }
.social-intro__body p { font-size: 17px; line-height: 1.6; color: var(--text-soft); text-wrap: pretty; }
.social-intro__body .social-lead { font-size: clamp(23px, 2.1vw, 32px); color: var(--ink); line-height: 1.3; letter-spacing: -.025em; margin-bottom: 24px; }
.social-text-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; padding-bottom: 8px; border-bottom: 1px solid currentColor; font-size: 15px; line-height: 1.4; font-weight: 700; }
.social-text-link .arrow { flex-shrink: 0; }
.social-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(64px, 8vw, 120px); border-block: 1px solid var(--ink); }
.social-principles span { font-family: var(--font-mono); text-transform: uppercase; font-size: 11px; padding: 22px; }
.social-principles span:first-child { padding-left: 0; }
.social-principles span + span { border-left: 1px solid var(--ink); }
.social-formats .display { font-size: clamp(42px, 6.2vw, 110px); max-width: 1300px; }
.social-formats__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; border-top: 1px solid #555; border-left: 1px solid #555; }
.social-format { padding: clamp(24px, 2.8vw, 48px); border-right: 1px solid #555; border-bottom: 1px solid #555; display: flex; flex-direction: column; align-items: start; min-width: 0; }
.social-format__index { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--green); }
.social-format h3 { font-size: clamp(28px, 3vw, 49px); letter-spacing: -.04em; line-height: 1.04; font-weight: 600; margin-top: 40px; }
.social-format p { font-size: 16px; line-height: 1.5; max-width: 33ch; margin-top: 22px; }
.social-format--featured { grid-row: span 2; background: var(--green); color: var(--ink); }
.social-format--featured .social-format__index { color: var(--ink); }
.social-format--featured h3 { font-weight: 800; }
.social-format__words { padding-top: 70px; margin-top: auto; display: flex; flex-direction: column; font-size: clamp(42px, 4.8vw, 80px); font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.social-format__words span:nth-child(2) { font-weight: 400; font-style: italic; }
.social-direction__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(48px, 9vw, 150px); }
.social-direction__intro { display: grid; grid-template-columns: 1fr; gap: 48px; }
.social-direction__photo { width: 220px; max-width: 65%; }
.social-direction__photo img { display: block; width: 100%; height: auto; filter: grayscale(1); }
.social-direction__photo figcaption { font-family: var(--font-mono); font-size: 10px; line-height: 1.5; text-transform: uppercase; margin-top: 12px; }
.social-direction__list { border-top: 1px solid var(--ink); align-self: start; }
.social-direction__list article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 20px; padding: 35px 0; border-bottom: 1px solid var(--ink); }
.social-direction__list article > span { font: 11px var(--font-mono); padding-top: 6px; }
.social-direction__list h3 { font-size: clamp(26px, 2.6vw, 42px); line-height: 1.08; letter-spacing: -.035em; }
.social-direction__list p { margin-top: 16px; max-width: 40ch; font-size: 17px; line-height: 1.5; color: var(--text-soft); }
.social-faq { background: var(--paper-row); }
.social-faq__layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(48px, 7vw, 120px); }
.social-close { background: var(--green); padding: clamp(72px, 9vw, 140px) var(--gutter); }
.social-close__content { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.social-close h2 { font-size: clamp(48px, 6.8vw, 114px); line-height: 1; letter-spacing: -.055em; font-weight: 800; }
.social-close h2 em { font-weight: 500; }
.social-close .btn { flex-shrink: 0; }
.social-close :focus-visible { outline-color: var(--ink); }
@media (max-width: 940px) {
  .social-hero__inner { min-height: 610px; }
  .social-hero h1 { font-size: clamp(60px, 9.8vw, 92px); }
  .social-intro__grid, .social-direction__layout, .social-faq__layout { grid-template-columns: 1fr; gap: 44px; }
  .social-intro__body { max-width: 620px; }
  .social-formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-format--featured { grid-column: 1 / -1; grid-row: auto; }
  .social-format--featured p { max-width: 50ch; }
  .social-format__words { flex-direction: row; flex-wrap: wrap; gap: .15em; padding-top: 40px; }
  .social-direction__intro { grid-template-columns: minmax(0, 1fr) 180px; align-items: end; gap: 30px; }
  .social-direction__photo { width: 100%; max-width: 100%; }
  .social-close__content { flex-direction: column; align-items: start; }
}
@media (max-width: 640px) {
  .social-hero__inner { min-height: 590px; padding-top: 30px; padding-bottom: 32px; gap: 55px; }
  .social-hero__image { object-position: 68% center; }
  .social-hero__meta span + span, :is(.social-intro, .social-formats, .social-direction, .social-faq, .social-close) .rule span + span { display: none; }
  .social-hero h1 { font-size: clamp(36px, 10.4vw, 66px); font-stretch: 100%; }
  .social-hero__bottom { flex-direction: column; align-items: start; gap: 26px; }
  .social-hero__bottom p { font-size: 19px; }
  .social-hero__bottom p br { display: none; }
  .social-hero .btn, .social-close .btn { font-size: 14px; padding: 16px 20px; }
  .social-statement { font-size: clamp(36px, 9.5vw, 60px); }
  .social-principles { grid-template-columns: 1fr; }
  .social-principles span { padding: 17px 0; }
  .social-principles span + span { border-left: 0; border-top: 1px solid var(--ink); }
  .social-formats__grid { grid-template-columns: 1fr; }
  .social-format { padding: 28px 24px; }
  .social-format h3 { font-size: 36px; margin-top: 32px; }
  .social-format__words { flex-direction: column; font-size: 58px; }
  .social-direction__intro { grid-template-columns: 1fr; }
  .social-direction__photo { width: 180px; }
  .social-direction__list article { gap: 12px; }
  .social-direction__list .social-text-link { font-size: 14px; }
  .social-faq .faq__item p { padding-right: 0; }
  .social-close h2 { font-size: clamp(39px, 9.5vw, 62px); }
}
@media (max-width: 400px) {
  .social-hero h1 { font-size: clamp(32px, 10.4vw, 42px); }
  .social-format__words { font-size: clamp(38px, 12vw, 48px); }
}