/* Institutional content from the approved 2026 portfolio, slides 14 and 17. */
.about-story { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); scroll-margin-top: var(--header-height); }
.about-story__image { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-story__inner { width: 100%; min-height: clamp(720px, 56.25vw, 1080px); margin-inline: auto; padding: clamp(44px, 4vw, 76px) 6%; }
.about-story__copy { width: 34%; max-width: 420px; }
@media (min-width: 901px) {
  .about-story__inner { display: flex; align-items: center; padding-left: 12%; padding-right: 0; }
  .about-story::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--paper), rgb(248 248 255 / .94) 34%, transparent 53%); }
  .about-story__image { z-index: -2; transform: translateX(6%); }
}
.about-story__chevrons { display: block; margin-bottom: 16px; color: var(--pink); font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: -7px; }
.about-story h2 { margin: 0; color: var(--blue); font-family: var(--font-display); font-size: clamp(34px, 3.2vw, 48px); font-weight: 700; line-height: .98; text-transform: uppercase; }
.about-story h2 > span { display: block; margin-bottom: 4px; color: var(--pink); font-size: clamp(56px, 5.7vw, 84px); white-space: nowrap; }
.about-story__pillars { display: grid; gap: 28px; margin-top: 42px; }
.about-story__pillar { display: grid; grid-template-columns: 42px 1fr; align-items: start; gap: 18px; }
.about-story__pillar > img { width: 42px; height: 58px; object-fit: contain; }
.about-story__eyebrow { margin: 0 0 3px; color: var(--pink); font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: 3px; line-height: 1; text-transform: uppercase; }
.about-story h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 29px; line-height: 1; text-transform: uppercase; }
.about-story__description { margin: 0; font-size: 15px; line-height: 1.5; }
.about-verticals { padding: 70px 32px 90px; color: var(--white); background: var(--blue); }
.about-verticals__inner { width: min(1160px, 100%); margin-inline: auto; }
.about-verticals__eyebrow { margin: 0 0 28px; font-size: 11px; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; }
.about-verticals h2 { margin: 0; font-family: var(--font-display); font-size: clamp(48px, 5vw, 72px); font-weight: 300; line-height: 1.1; text-transform: uppercase; }
.about-verticals__group { width: 290px; height: auto; margin: 54px auto 42px; }
.about-verticals__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 38px; padding-top: 42px; border-top: 4px solid var(--pink); }
.about-verticals__item { position: relative; min-width: 0; }
.about-verticals__item::before { content: ''; position: absolute; top: -54px; left: 20px; height: 25px; width: 1px; background: var(--pink); }
.about-verticals__brand { display: flex; flex-direction: column; align-items: center; width: min(100%, 220px); height: 106px; margin: 0 auto 22px; }
.about-verticals__brand img { display: block; width: 100%; max-height: 98px; object-fit: contain; object-position: top; }
.about-verticals__suffix { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 19px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.about-verticals__suffix--creative { letter-spacing: 7px; padding-left: 7px; }
.about-verticals__suffix--tech { align-self: flex-end; margin-top: 0; font-size: 29px; }
.about-verticals__item > p { position: relative; margin: 0; padding-left: 28px; font-size: 15px; line-height: 1.5; }
.about-verticals__item > p::before { content: '❯'; position: absolute; top: -5px; left: 0; color: var(--pink); font-size: 27px; }
@media (min-width: 901px) and (max-width: 1150px) {
  .about-story__inner { min-height: 760px; padding-left: 8%; padding-right: 4%; }
  .about-story__copy { width: 40%; }
  .about-story__image { object-position: 42% center; transform: translateX(3%); }
  .about-story__pillar { grid-template-columns: 32px 1fr; gap: 12px; }
  .about-story__pillar > img { width: 32px; }
  .about-verticals__grid { gap: 24px; }
}
@media (max-width: 900px) {
  .about-story { display: flex; flex-direction: column; }
  .about-story__image { position: static; z-index: auto; order: 1; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
  .about-story__inner { min-height: 0; padding: 42px 28px; }
  .about-story__copy { width: 100%; max-width: 620px; margin-inline: auto; }
  .about-story h2 { max-width: 440px; font-size: 42px; }
  .about-story h2 > span { font-size: 68px; }
  .about-story__pillars { grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
  .about-story__pillar { grid-template-columns: 32px 1fr; gap: 12px; }
  .about-story__pillar > img { width: 32px; }
  .about-verticals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; }
  .about-verticals__item:nth-child(n+3)::before { display: none; }
}
@media (max-width: 540px) {
  .about-story__inner { padding: 38px 24px; }
  .about-story h2 { max-width: 340px; font-size: 37px; }
  .about-story h2 > span { font-size: clamp(52px, 15vw, 68px); }
  .about-story__pillars { grid-template-columns: 1fr; }
  .about-story__image { aspect-ratio: 1.2; object-position: 68% center; }
  .about-verticals { padding: 48px 24px 58px; }
  .about-verticals__group { width: 240px; max-width: 100%; margin-block: 36px; }
  .about-verticals__grid { grid-template-columns: 1fr; gap: 38px; padding-top: 32px; }
  .about-verticals__item::before { display: none; }
  .about-verticals__item { max-width: 320px; margin-inline: auto; width: 100%; }
  .about-verticals__item + .about-verticals__item { border-top: 1px solid rgb(255 255 255 / .2); padding-top: 32px; }
  .about-verticals__brand { margin-bottom: 16px; }
}