/* About biography follows the site’s Neue Haas type system. */
.about-hero_heading{width:100%;max-width:950px;margin-inline:auto;text-align:left}
.about-hero_heading .about-name{margin:0;font-family:var(--font-display);font-size:clamp(40px,6.5vw,84px);font-weight:700;line-height:1;letter-spacing:-.035em;word-spacing:.13em;overflow-wrap:normal;white-space:nowrap;text-align:left;text-transform:uppercase}
.about_hero-image-wrap{width:100%;max-width:950px;margin:52px auto 0;grid-template-columns:minmax(0,1fr) auto}
.about_hero-location{grid-column:2;grid-row:1;justify-self:end}
.about_hero-image{width:auto;max-width:100%;height:50vh;min-height:0;max-height:50vh;aspect-ratio:507/760;grid-column:1;grid-row:1;justify-self:start}
@media(max-width:767px){.about_hero-image-wrap{grid-template-columns:1fr;margin-top:32px}}
.about_hero-image .about-image{display:block;width:100%;height:100%;object-fit:contain}
.about_hero-intro{width:100%;align-items:flex-start;text-align:left;gap:0}
.about_hero-intro .about-lead{max-width:950px;margin:0;color:#e6e6e6;font:400 clamp(20px,2.2vw,28px)/1.38 "neue-haas-grotesk-text",Arial,sans-serif;letter-spacing:-.015em;text-wrap:pretty}
.about_hero-intro .site-outline-button{align-self:flex-start!important;margin-top:48px}
.about-story{padding:clamp(72px,9vw,144px) 0 0}
.about-story .container{max-width:950px}
.about-story-grid{border-top:1px solid rgba(230,230,230,.3);padding-top:30px}
.about-story-content h2{margin:0 0 34px;font:600 clamp(32px,4.3vw,58px)/1.05 var(--font-display);letter-spacing:-.02em;word-spacing:.08em;text-transform:uppercase}
.about-story-content p{max-width:950px;margin:0;color:#e6e6e6;font:400 clamp(18px,1.8vw,22px)/1.5 "neue-haas-grotesk-text",Arial,sans-serif;letter-spacing:-.015em;text-wrap:pretty}
@media(max-width:767px){.about-story{padding:80px 0 0}.about-story-grid{padding-top:24px}.about-story-content h2{margin-bottom:28px}.about_hero-intro .site-outline-button{margin-top:36px}}

.about-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:56px}
.about-photo-grid figure{margin:0;overflow:hidden;background:#141414;aspect-ratio:3/2}
.about-photo-grid figure:last-child:nth-child(odd){grid-column:1/-1}
.about-photo-grid img{display:block;width:100%;height:100%;object-fit:cover}
.about-work-link{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:54px;margin-top:28px;padding:14px 18px;border:1px solid rgba(230,230,230,.65);border-radius:4px;color:#e6e6e6;text-decoration:none;font:500 16px/1.1 "neue-haas-grotesk-text",Arial,sans-serif;text-transform:uppercase;letter-spacing:.01em;transition:background .2s,border-color .2s}
.about-work-link:hover{background:#242424;border-color:#e6e6e6}
.about-work-link:focus-visible{outline:2px solid #e6e6e6;outline-offset:3px}
.about_hero-intro .site-outline-button span[aria-hidden="true"],.about-work-link span[aria-hidden="true"]{display:flex;align-items:center;justify-content:center;flex:none;width:29px;height:18px}
@media(max-width:767px){.about-photo-grid{grid-template-columns:1fr;gap:10px;margin-top:44px}.about-photo-grid figure{aspect-ratio:3/2}.about-work-link{width:100%}}

/* Service cards (Gabriel 11/04): thinner, black on the left fading into the service's photo on the right; no Photo · Video tag. */
.about-services .experience-item{position:relative;overflow:hidden;isolation:isolate;gap:22px;padding:22px 20px 18px;background:#000}
.about-services .experience-item.svc-photo::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--svc-img) calc(var(--svc-lx,40) / (100 - var(--svc-wx,60)) * 100%) var(--svc-y,50%)/calc(var(--svc-wx,60) * 1%) auto no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 45%,rgba(0,0,0,.35) 53%,rgba(0,0,0,.75) 61%,#000 70%);mask-image:linear-gradient(90deg,transparent 45%,rgba(0,0,0,.35) 53%,rgba(0,0,0,.75) 61%,#000 70%)}
/* focal point of each photo sits at ~78% of the card width (Gabriel 11/04); every photo starts under the solid black, so the shared gradient gives the same cutoff on every card */
.about-services .experience-item.svc-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#000 0%,#000 36%,rgba(0,0,0,.82) 47%,rgba(0,0,0,.58) 59%,rgba(0,0,0,.34) 72%,rgba(0,0,0,.15) 86%,rgba(0,0,0,.05) 100%),
             linear-gradient(0deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 45%)}
.about-services .experience-item .soft-text{color:rgba(230,230,230,.62)}

/* text sizes match the home page (18px body) */
html body .about_hero-intro .about-lead,html body .about-story .about-story-content p{font-size:18px!important;line-height:1.36!important}
/* Gabriel 11/04: descriptions stop before the photo side; photos smaller (zoomed out) and pushed right */
.about-services .experience-position .soft-text{max-width:64%}
/* no number / + row (Gabriel 11/04): keep the cards tall enough for the photos, text centred */
.about-services .experience-item{min-height:128px;justify-content:center;padding-top:24px;padding-bottom:24px}

/* Type follows the home page (Gabriel 11/04): h2s 32px/1.08 sentence case, body 18px, card titles caps like the home cards
   (16px 500, +.01em), card lines 16px regular, small labels 14px 500 caps. No 300 weights. */
html body .about-story .about-story-content h2{text-transform:none;line-height:1.08}
.about-services .h1-look{line-height:1.08}
html body .about-services .experience-item .body-text-2{font:500 16px/1.15 "neue-haas-grotesk-text",Arial,sans-serif;letter-spacing:.01em;text-transform:uppercase}
html body .about-services .experience-item .soft-text{font:400 16px/1.4 "neue-haas-grotesk-text",Arial,sans-serif;letter-spacing:normal}
.about_hero-location,.about_hero-location *{font-weight:500!important;font-size:14px!important;letter-spacing:.01em;text-transform:uppercase}
html body .about-services .experience-item .body-text-2{max-width:64%}
/* text closer to the card edge so it balances the photo (Gabriel 11/05): 20 -> 14px */
html body .about-services .experience-item{padding-left:14px!important;padding-right:14px!important}