.about-page { background: var(--color-primary); color: #000; }

.about-hero { position: relative; min-height: min(780px, calc(100vh - 72px)); overflow: hidden; background: #000; }
.about-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-hero-overlay { position: relative; z-index: 1; min-height: inherit; text-align: center; padding: 0 max(2rem, 8vw); color: #fff; background: linear-gradient(to bottom, transparent 42%, rgba(0,0,0,.16) 65%, rgba(0,0,0,.94) 100%); }
.about-hero-heading { position: absolute; top: 51%; left: max(2rem, 8vw); right: max(2rem, 8vw); transform: translateY(-50%); }
.about-hero-copy { position: absolute; left: max(2rem, 8vw); right: max(2rem, 8vw); bottom: 2.25rem; }
.about-hero h1, .about-section h2 { font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 900; font-style: italic; line-height: .95; letter-spacing: -.045em; }
.about-hero h1 { margin-bottom: 1rem; color: #fff; text-shadow: 0 3px 16px rgba(0,0,0,.7); }
.about-hero-overlay p { max-width: 1080px; font-size: 1rem; line-height: 1.55; margin: .35rem auto; }
.about-kicker { font-weight: 700 !important; margin-bottom: 0 !important; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); }

.about-section { padding: 4rem max(2rem, calc((100vw - 1344px) / 2)); border-bottom: 1px dashed rgba(0,0,0,.45); }
.about-copy { max-width: 1120px; margin: 0 auto 2.5rem; text-align: center; }
.about-section h2 { text-align: center; margin: 0 0 2rem; }
.about-section p { font-size: 1rem; line-height: 1.6; max-width: 1060px; margin: 0 auto 1rem; }
.about-stats { display: flex; justify-content: center; gap: clamp(2rem, 7vw, 7rem); margin: 2rem 0 2.5rem; }
.about-stats strong { font-size: clamp(2rem, 4.2vw, 4rem); line-height: .9; font-weight: 900; }
.about-stats span { display: block; font-size: .95rem; font-weight: 600; margin-top: .7rem; }

.about-gallery { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(380px, 1fr); gap: 1.5rem; overflow-x: auto; padding: .25rem 0 1rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.about-gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2rem; scroll-snap-align: start; }

.about-work { background: #000; color: #fff; }
.about-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; max-width: 1344px; margin: 0 auto; }
.about-methods article { min-height: 270px; padding: 2rem; border-radius: 2rem; background: rgba(255,255,255,.15); }
.about-methods h3 { font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 900; font-style: italic; line-height: 1; margin-bottom: 1.5rem; }
.about-methods article p { font-size: .95rem; line-height: 1.5; }
.about-why { text-align: center; padding-block: 4.5rem; }
.about-contact { margin: 3rem max(2rem, calc((100vw - 1280px) / 2)) 4rem; padding: 2rem; text-align: center; color: #fff; background: #000; border-radius: 1.5rem; }
.about-contact h2 { font-size: 1.6rem; font-weight: 900; font-style: italic; margin-bottom: .6rem; }
.about-contact p { margin-bottom: .45rem; }
.about-contact a { color: #fff; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .about-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-methods article { min-height: 230px; }
}

@media (max-width: 640px) {
  .about-hero { min-height: 760px; }
  .about-hero-overlay { padding: 0 1.25rem; }
  .about-hero-heading { top: 43%; left: 1.25rem; right: 1.25rem; }
  .about-hero-copy { left: 1.25rem; right: 1.25rem; bottom: 1.5rem; }
  .about-hero-overlay p, .about-section p { font-size: .92rem; }
  .about-section { padding: 3rem 1rem; }
  .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; align-items: start; }
  .about-stats strong { font-size: 1.8rem; }
  .about-stats span { font-size: .72rem; line-height: 1.2; }
  .about-gallery { grid-auto-columns: 86vw; gap: 1rem; }
  .about-gallery img { height: auto; border-radius: 1.5rem; }
  .about-methods { grid-template-columns: 1fr; gap: 1rem; }
  .about-methods article { min-height: 0; padding: 1.5rem; border-radius: 1.5rem; }
  .about-contact { margin: 2rem 1rem 3rem; padding: 1.5rem 1rem; }
}