.about-page { --about-paper:#f0f0f0; --about-heading:80px; --about-body:20px; --about-script:60px; letter-spacing:0 }
.about-main { overflow:clip }
.about-main section { position:relative }
.about-main h1,.about-main h2 { font-size:var(--about-heading); line-height:1.35; font-weight:400 }
.about-main h3 { font-weight:400 }
.about-dark { position:relative; background:var(--navy) }
.about-dark .page-grid { z-index:0 }
.about-dark .page-grid i { opacity:.3 }
.about-dark section { z-index:1 }
.about-body { font:300 var(--about-body)/2 var(--sans) }
.about-body p+p { margin-top:40px }
.about-script { color:var(--gold); font:400 var(--about-script)/1.25 var(--script); font-synthesis:none; text-transform:none }
.gold { color:var(--gold) }
.about-opening { position:relative; height:95.833333vw }
.about-hero { height:39.0625vw; min-height:400px; display:flex; justify-content:center; align-items:flex-start; padding-top:23.4375vw }
.about-hero h1 { position:relative; z-index:2; text-align:center }
.story-curve { position:absolute; top:27.34375vw; left:40.625%; width:13.489583%; height:auto; pointer-events:none }
.story-drawing-mask { transform-origin:top; transform:scaleY(var(--story-draw,1)) }
.about-story { position:absolute !important; inset:0; pointer-events:none }
.about-watermark { position:absolute; display:block; font:400 450px/1 var(--script); font-synthesis:none; pointer-events:none; white-space:nowrap; color:rgba(242,243,246,.11) }
.story-watermark { top:33.854167vw; left:-2% }
.story-heading { position:absolute; top:49.479167vw; left:10%; width:44% }
.story-heading .about-script { margin-top:4px }
.story-body { position:absolute; top:49.895833vw; left:62%; width:32% }
.about-road { height:40.625vw; text-align:center; padding-top:1.5625vw }
.about-road h2 { font-size:100px; line-height:1.35 }
.road-flourish { position:absolute; top:13.541667vw; left:40.625%; width:29%; height:90px }
.road-curve { display:block; width:100%; overflow:visible }
.road-curve path { fill:none; stroke:white; stroke-width:20; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:var(--road-draw,0) }
.road-roundel { position:absolute; right:-16px; top:35px; width:40px; height:40px }
.road-body { position:absolute; top:18.072917vw; left:10%; width:80% }
.about-belief { height:35.9375vw; text-align:center; padding-top:9.375vw }
.about-wordmark { width:65.625%; height:auto; margin:0 auto }
.belief-copy { margin-top:3.645833vw; color:var(--gold); font:400 30px/1.65 var(--serif); text-transform:uppercase }
.about-founder { height:99.21875vw }
.founder-watermark { top:1.5625vw; left:-2.6% }
.alice-heading { position:absolute; left:8.854167%; top:19.53125vw }
.alice-heading .about-script { margin-top:0 }
.alice-body { position:absolute; left:8.854167%; width:44.270833%; top:31.770833vw }
.alice-portrait { position:absolute; left:63.229167%; right:auto; top:31.770833vw; width:27.083333%; height:37.8125vw; overflow:hidden }
.alice-portrait img { width:100%; height:100%; object-fit:cover; object-position:center top }
.about-door { width:100%; height:61.458333vw; overflow:hidden }
.about-door img { width:100%; height:100%; object-fit:cover }
.about-light { background:var(--about-paper); color:var(--navy) }
.about-company { height:52.083333vw; padding:8.333333vw 4% 0; text-align:center }
.company-copy { margin:3.125vw auto 0; font:400 30px/1.65 var(--serif); text-transform:uppercase }
.company-script { margin-top:3.125vw }
.company-collage { height:91.173184vw }
.collage-caption { position:absolute; top:41.34375vw; left:38.28125%; font-size:40px; white-space:nowrap }
.collage-image { position:absolute; padding:14px; background:rgba(255,255,255,.3) }
.collage-image img { width:100%; height:100%; object-fit:cover }
.collage-people { top:6.592179vw; left:6.927374%; width:25.625%; height:18.324022vw }
.collage-people img { object-position:center 53% }
.collage-places { top:11.731844vw; left:71.354167%; width:17.988827%; height:27.374302vw }
.collage-experiences { top:37.541899vw; left:12.708333%; width:16.648045%; height:22.011173vw }
.collage-relationships { top:55.195531vw; left:51.197917%; width:34.636872%; height:27.486034vw }
.collage-relationships img { object-position:center 55% }
.collage-label { position:absolute; margin:0; font:400 80px/1.35 var(--serif); text-transform:uppercase; white-space:nowrap }
.people-label { top:27.125vw; left:25% }
.places-label { top:32.75vw; left:54.427083% }
.experiences-label { top:60.09375vw; left:23.177083% }
.relationships-label { top:48.895833vw; left:42.5% }
.about-wayfinders { height:71.354167vw }
.about-light .about-watermark { color:rgba(185,155,80,.2) }
.wayfinder-watermark { top:1.302083vw; left:-3% }
.wayfinders-heading { position:absolute; top:24.21875vw; left:10.416667%; width:54% }
.wayfinders-heading .about-script { font-size:40px }
.wayfinders-body { position:absolute; top:36.458333vw; left:10.989583%; width:33.333333% }
.wayfinder-image { position:absolute; overflow:hidden }
.wayfinder-image img { width:100%; height:100%; object-fit:cover }
.wayfinder-image-left { left:65.625%; top:28.125vw; width:16.770833%; height:35.052083vw }
.wayfinder-image-left img { object-position:48% center }
.wayfinder-image-right { left:82.8125%; top:13.385417vw; width:17.1875%; height:45.625vw }
.wayfinder-image-right img { object-position:60% center }
.wayfinder-image::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,var(--about-paper) 0%,rgba(240,240,240,.94) 16%,rgba(240,240,240,0) 70%); opacity:var(--image-wash,0) }
.wayfinder-drawing { position:absolute; top:51.5625vw; left:54.427083%; width:18.229167%; height:auto; z-index:2 }
.about-partners { min-height:130.572917vw; padding-top:18.489583vw; padding-bottom:10.416667vw }
.partners-watermark { top:0; left:-2.6% }
.partners-heading { margin-left:10.15625%; position:relative }
.partners-heading .about-script { font-size:40px }
.partners-body { margin:5.46875vw 0 0 10.3125%; width:43.75%; color:#7d7d7d }
.brand-wall { margin:8.75vw 8.645833% 0 10.104167%; display:grid; gap:24px }
.brand-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px }
.brand-tile { position:relative; aspect-ratio:292/185; min-width:0; overflow:hidden; background:#222 }
.brand-tile>img { width:100%; height:100%; object-fit:cover }
.brand-tile>img:first-child { filter:brightness(.75) }
.brand-tile>.partner-logo { position:absolute; inset:0; object-fit:fill }
.partner-details { margin:9.375vw 8.5% 0 10.364583%; font:300 20px/2 var(--sans) }
.partner-summary { color:var(--gold) }
.partner-detail-columns { display:grid; grid-template-columns:1fr 1fr; gap:5.729167vw; margin-top:2.34375vw }
.partner-category { margin-bottom:2.083333vw }
.partner-category h3 { font:400 20px/2 var(--serif); text-transform:uppercase }
.partner-category p { color:#8a8a8a }
.about-line { display:block; overflow:hidden; padding-bottom:.18em; margin-bottom:-.18em }
.about-line>span { display:block }
.about-motion-ready [data-about-reveal] { opacity:0; transform:translate3d(0,80px,0) }
.about-motion-ready .about-line>span { opacity:0; transform:translate3d(0,110%,0) }
@media(min-width:901px) and (max-width:1600px) {
  .about-page { --about-heading:60px; --about-body:16px; --about-script:45px }
  .about-body p+p { margin-top:28px }
  .about-watermark { font-size:338px }
  .about-road h2 { font-size:76px }
  .belief-copy,.company-copy { font-size:23px }
  .collage-label { font-size:60px }
  .collage-caption,.wayfinders-heading .about-script,.partners-heading .about-script { font-size:30px }
  .collage-image { padding:10px }
  .brand-wall,.brand-row { gap:18px }
  .partner-details,.partner-category h3 { font-size:16px }
  .road-roundel { width:30px; height:30px; top:28px; right:-12px }
}
@media(min-width:901px) and (max-width:1200px) {
  .about-page { --about-heading:44px; --about-body:14px; --about-script:34px }
  .about-body { line-height:1.8 }
  .about-body p+p { margin-top:20px }
  .about-watermark { font-size:253px }
  .about-road h2 { font-size:56px }
  .belief-copy,.company-copy { font-size:17px }
  .collage-label { font-size:44px }
  .collage-caption,.wayfinders-heading .about-script,.partners-heading .about-script { font-size:23px }
  .partner-details,.partner-category h3 { font-size:14px }
}
@media(max-width:900px) {
  .about-page { --about-heading:36px; --about-body:17px; --about-script:30px }
  .about-main h1 { font-size:48px }
  .about-main h2 { line-height:1.3 }
  .about-body { line-height:1.85 }
  .about-body p+p { margin-top:28px }
  .about-opening { height:auto }
  .about-hero { height:72svh; min-height:420px; padding-top:29svh }
  .story-curve { top:36svh; left:auto; right:4%; width:22%; }
  .about-story { position:relative !important; padding:70px 7% 80px }
  .about-watermark { font-size:200px; max-width:100% }
  .story-watermark { top:-70px; left:-12px }
  .story-heading,.story-body { position:relative; inset:auto; width:auto }
  .story-heading { margin-bottom:46px }
  .story-body { margin-left:14% }
  .about-road { height:auto; padding:70px 7% 90px }
  .about-road h2 { font-size:40px }
  .road-flourish { position:relative; inset:auto; width:58%; height:60px; margin:0 0 12px 35% }
  .road-roundel { top:18px; right:-4px; width:26px; height:26px }
  .road-body { position:relative; inset:auto; width:100% }
  .road-body br { display:none }
  .about-belief { height:auto; padding:90px 7% 120px }
  .about-wordmark { width:100% }
  .belief-copy { font-size:19px; margin-top:35px; line-height:1.75 }
  .about-founder { height:auto; padding:100px 7% 100px }
  .founder-watermark { top:-35px; left:-8px }
  .alice-heading,.alice-body { position:relative; inset:auto; width:auto }
  .alice-body { margin-top:42px }
  .alice-portrait { position:relative; inset:auto; width:68%; height:auto; aspect-ratio:706/985; margin:60px -8.14% 0 auto }
  .about-door { height:80vw }
  .about-company { height:auto; padding:90px 6% 50px }
  .company-copy { margin-top:36px; font-size:18px; line-height:1.8 }
  .company-script { margin-top:30px }
  .company-collage { height:1080px; margin-top:30px }
  .collage-caption { top:510px; left:0; width:100%; text-align:center; font-size:26px; white-space:normal }
  .collage-image { padding:6px }
  .collage-people { top:30px; left:5%; width:48%; height:175px }
  .collage-places { top:260px; left:67%; width:29%; height:240px }
  .collage-experiences { top:550px; left:6%; width:34%; height:235px }
  .collage-relationships { top:805px; left:39%; width:57%; height:230px }
  .collage-label { font-size:28px; white-space:normal }
  .people-label { top:217px; left:16% }
  .places-label { top:352px; left:32% }
  .experiences-label { top:790px; left:6%; font-size:22px }
  .relationships-label { top:740px; left:42%; font-size:20px }
  .about-wayfinders { height:auto; padding:125px 7% 55px }
  .wayfinder-watermark { top:0; left:-20px; font-size:160px }
  .wayfinders-heading,.wayfinders-body { position:relative; inset:auto; width:auto }
  .wayfinders-heading .about-script { font-size:28px }
  .wayfinders-body { margin-top:40px; width:87% }
  .wayfinder-image { position:relative }
  .wayfinder-image-left { inset:auto; width:40%; height:340px; margin:165px 0 0 29% }
  .wayfinder-image-right { inset:auto; width:37%; height:405px; margin:-470px -8.14% 0 auto }
  .wayfinder-drawing { top:auto; bottom:80px; left:16%; width:36% }
  .about-partners { min-height:0; padding:190px 7% 90px }
  .partners-watermark { top:55px; left:-15px; font-size:175px }
  .partners-heading { margin:0 }
  .partners-heading .about-script { font-size:28px }
  .partners-body { margin:40px 0 0; width:auto }
  .brand-wall { margin:55px 0 0; gap:15px }
  .brand-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .brand-tile:last-child { grid-column:1/-1; width:calc(50% - 6px); justify-self:center }
  .partner-details { margin:55px 0 0; font-size:17px }
  .partner-detail-columns { grid-template-columns:1fr; gap:0; margin-top:35px }
  .partner-category { margin-bottom:30px }
  .partner-category h3 { font-size:18px }
}
@media(prefers-reduced-motion:reduce) {
  .about-motion-ready [data-about-reveal],.about-motion-ready .about-line>span { opacity:1 !important; transform:none !important }
  .story-drawing-mask { transform:none }
  .road-curve path { stroke-dashoffset:0 }
  .wayfinder-image::after { opacity:0 }
}
