/* About inherits the home / services paper, ink, field, gutter and ease tokens.
   No separate brand palette, navigation bar, display logo or card treatment. */
html{scrollbar-gutter:stable;scroll-behavior:smooth}
.about-page{--body-ink:#454541;overflow-x:clip}
.about-page img{display:block;width:100%;height:auto;filter:grayscale(1)}
.about-page button{font:inherit;color:inherit;cursor:pointer}
.about-page button[hidden]{display:none}
.about-page a:focus-visible,.about-page button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.skip-link{position:fixed;left:var(--pad);top:10px;z-index:50;padding:12px;background:var(--paper);border:1px solid var(--ink);transform:translateY(-180%)}
.skip-link:focus{transform:none}
.section-label{font-size:.875rem;font-weight:500;line-height:1.4;margin:0;color:var(--body-ink)}
.section-space{padding:clamp(56px,6vw,112px) var(--pad)}
.display-heading{font-size:clamp(2.5rem,5.4vw,6rem);font-weight:900;line-height:.94;letter-spacing:-.035em;margin:0}
.section-heading{display:grid;grid-template-columns:1fr 3fr;gap:var(--pad);margin-bottom:clamp(36px,4vw,72px)}
.section-description{font-size:clamp(1.1875rem,1.5vw,1.75rem);line-height:1.5;color:var(--body-ink);max-width:45ch;margin:24px 0 0}
.text-link{display:inline-block;font-size:clamp(1.125rem,1.2vw,1.375rem);font-weight:600;border-bottom:1px solid var(--ink);padding:5px 0;transition:opacity .3s var(--ease)}
.text-link:hover{opacity:.55}
/* A link inside running copy. .text-link is a standalone CTA — inline-block
   with its own size and padding — so using it mid-sentence pushes the line
   apart and breaks awkwardly. This one just takes the surrounding type. */
.inline-link{font-weight:600;border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease),opacity .3s var(--ease)}
.inline-link:hover{border-bottom-color:var(--ink);opacity:.7}
/* .text-link is sized for body copy. Inside a display heading it has to take
   the heading's own size, weight and tracking — otherwise it renders at body
   size while inheriting the heading's tight negative letter-spacing, which
   reads as squashed. `display:inline` lets it wrap with the rest of the line
   instead of forcing a long address to overflow on narrow screens. */
.statement .text-link{display:inline;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;line-height:inherit;padding:0;
  border-bottom-width:.06em;word-break:break-word}

/* Same full-viewport, type-led opening as Services, with two straight frames. */
.about-hero{position:relative;min-height:100svh;display:grid;place-items:center;padding:90px var(--pad) 100px;overflow:hidden}
.page-marker{position:absolute;right:var(--pad);top:calc(var(--pad) * .55);margin:0;font-size:clamp(30px,4.2vw,74px);font-weight:900;letter-spacing:-.035em;line-height:.82}
.hero-statement{position:relative;z-index:2;text-align:center;width:64%;padding-top:20px}
.hero-statement h1{margin:0;font-size:clamp(3.75rem,8.6vw,9.375rem);font-weight:900;line-height:.86;letter-spacing:-.045em}
.hero-line{display:block;overflow:hidden;padding:.08em 0;margin:-.035em 0}
.hero-line>span{display:inline-block}
.hero-note{font-size:clamp(1rem,1.25vw,1.375rem);line-height:1.4;margin:30px 0 0;color:var(--body-ink)}
.hero-frame{position:absolute;width:clamp(130px,17vw,330px);aspect-ratio:3/4;overflow:hidden;background:var(--field);transform:translateY(var(--frame-shift,0px))}
.hero-frame img{height:100%;object-fit:cover;transform:scale(1.025)}
.hero-frame--one{left:3%;top:15%}
.hero-frame--one img{object-position:center 27%}
.hero-frame--two{right:3%;bottom:15%}
.hero-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:22px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:14px;font-size:.875rem}
.hero-foot>span{color:var(--body-ink)}
.hero-foot>a{justify-self:center;border-bottom:1px solid var(--line);padding:7px 0}
.motion-toggle{justify-self:end;background:none;border:0;border-bottom:1px solid var(--line);padding:7px 0;font-size:.875rem}

.studio-intro{display:grid;grid-template-columns:1fr 3fr;gap:var(--pad);border-top:1px solid var(--line)}
.statement{font-size:clamp(2rem,4.1vw,4.875rem);font-weight:500;line-height:1.05;letter-spacing:-.035em;margin:0}
.statement span{color:var(--body-ink)}
.intro-columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);margin-top:40px}
.intro-columns p{font-size:clamp(1.1875rem,1.5vw,1.75rem);line-height:1.5;color:var(--body-ink);margin:0;max-width:44ch}

/* Image/story split echoes the project deck; no tinted biography card. */
.person-section{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);padding:var(--pad);border-top:1px solid var(--line)}
.person-portrait{min-width:0}
.person-portrait>img{max-height:980px;object-fit:contain;background:var(--field)}
.person-portrait figcaption,.notebook-grid figcaption{display:flex;justify-content:space-between;gap:14px;font-size:.875rem;line-height:1.4;margin-top:12px}
.person-portrait figcaption span:last-child,.notebook-grid figcaption span:last-child{color:var(--body-ink)}
.person-copy{padding:12px clamp(0px,2vw,38px);display:flex;flex-direction:column;justify-content:space-between;gap:44px}
.person-heading .section-label{margin-bottom:24px}
.person-heading h2{font-size:clamp(1.65rem,3.35vw,4.75rem);font-weight:900;line-height:.94;letter-spacing:-.04em;margin:0}
.person-story{max-width:51ch;padding-bottom:36px}
.person-story h3{font-size:clamp(1.875rem,2.8vw,3.625rem);line-height:1.08;font-weight:700;letter-spacing:-.025em;margin:0 0 28px}
.person-story p{font-size:clamp(1.1875rem,1.5vw,1.75rem);line-height:1.5;color:var(--body-ink);margin:0 0 1em}
.person-story .text-link{margin-top:12px}

.principle-list{border-top:1px solid var(--line)}
.principle-list article{display:grid;grid-template-columns:1fr 1.4fr 1.6fr;gap:var(--pad);padding:clamp(26px,3vw,54px) 0;border-bottom:1px solid var(--line)}
.index{font-size:.875rem;line-height:1.5;font-variant-numeric:tabular-nums;color:var(--body-ink)}
.principle-list h3{font-size:clamp(1.75rem,3vw,3.375rem);font-weight:700;line-height:1;letter-spacing:-.03em;margin:0}
.principle-list p{font-size:clamp(1.1875rem,1.5vw,1.75rem);line-height:1.5;color:var(--body-ink);margin:0;max-width:45ch}
.notebook-section{border-top:1px solid var(--line)}
.notebook-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--pad);align-items:start}
.notebook-grid figure:nth-child(2){margin-top:12vw}
.image-frame{overflow:hidden;background:var(--field)}
.image-frame img{transition:transform 1s var(--ease)}
.image-frame:hover img{transform:scale(1.025)}
.notebook-grid figure>p{font-size:clamp(1.1875rem,1.5vw,1.75rem);line-height:1.5;color:var(--body-ink);max-width:43ch;margin:20px 0 0}
.connection-section{min-height:75svh;padding:clamp(70px,9vw,160px) var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.connection-section h2{font-size:clamp(3.25rem,9vw,10rem);line-height:.9;font-weight:900;letter-spacing:-.045em;margin:44px 0 30px}
.connection-section h2 span{color:var(--body-ink)}
.connection-note{font-size:clamp(1.1875rem,1.5vw,1.75rem);line-height:1.5;color:var(--body-ink);margin:0}
.offer-list a{display:grid;grid-template-columns:44px minmax(0,1fr) auto 36px;gap:var(--pad);align-items:center;border-top:1px solid var(--line);padding:26px 0;transition:background-color .35s var(--ease),color .35s var(--ease),padding .35s var(--ease)}
.offer-list a:last-child{border-bottom:1px solid var(--line)}
.offer-list h3{font-size:clamp(1.5rem,3.4vw,3.625rem);font-weight:900;letter-spacing:-.03em;line-height:.98;margin:0}
.offer-purpose{font-size:1rem;color:var(--body-ink)}
.offer-list a>span:last-child{font-size:1.75rem;text-align:right}
.offer-list a:hover,.offer-list a:focus-visible{background:var(--ink);color:var(--paper);padding-left:var(--pad);padding-right:var(--pad)}
.offer-list a:hover .index,.offer-list a:hover .offer-purpose,.offer-list a:focus-visible .index,.offer-list a:focus-visible .offer-purpose{color:inherit}
.studio-details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pad);padding:0 var(--pad) clamp(56px,6vw,112px)}
.studio-details .section-label{display:block;margin-bottom:14px}
.studio-details p,.studio-details a{font-size:clamp(1rem,1.3vw,1.5rem);line-height:1.4;margin:0;overflow-wrap:anywhere}
.about-contact{text-align:center;border-top:1px solid var(--line);padding:clamp(72px,9vw,170px) var(--pad)}
.about-contact h2{font-size:clamp(3.5rem,8.5vw,9.375rem);font-weight:900;line-height:.9;letter-spacing:-.04em;margin:35px 0 28px}
.about-contact>p:not(.section-label){font-size:clamp(1.1875rem,1.5vw,1.75rem);line-height:1.5;color:var(--body-ink);margin:0 0 24px}
.about-footer{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pad);border-top:1px solid var(--line);padding:30px var(--pad) 48px;font-size:1rem}
.about-footer>div{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}
.about-footer .section-label{margin-bottom:8px}
.about-footer a{overflow-wrap:anywhere;max-width:100%}
.about-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.about-footer>div>span:last-child:not(.section-label){color:var(--body-ink);font-size:.875rem}

/* Finite entrances and scroll response, using the site's shared easing. */
.motion-enabled .hero-line>span{animation:about-type-in 1s var(--ease) both}
.motion-enabled .hero-line:nth-child(2)>span{animation-delay:.12s}
.motion-enabled .hero-line:nth-child(3)>span{animation-delay:.24s}
.motion-enabled .hero-frame img{animation:about-image-in 1.3s var(--ease) both}
.motion-enabled .hero-frame--two img{animation-delay:.16s}
.motion-enabled [data-reveal]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.motion-enabled .awaiting-reveal{opacity:0;transform:translateY(22px)}
.motion-paused *{animation:none!important;transition:none!important}
.motion-paused .hero-frame{transform:none}
@keyframes about-type-in{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes about-image-in{from{clip-path:inset(100% 0 0);transform:scale(1.12)}to{clip-path:inset(0);transform:scale(1.025)}}
@media(max-width:1000px){
  .person-copy{padding:8px 0;gap:30px}.person-story{padding-bottom:12px}
  .offer-purpose{display:none}.offer-list a{grid-template-columns:32px minmax(0,1fr) 28px}
  .principle-list article{grid-template-columns:44px 1fr 1.2fr}
  .studio-details{grid-template-columns:1fr 1fr;row-gap:30px}
}
@media(max-width:760px){
  .about-hero{min-height:max(760px,100svh);padding:calc(clamp(104px,27vw,180px) * 1.25 + 82px) var(--pad) calc(clamp(104px,27vw,180px) * 1.25 + 100px)}
  .hero-statement{width:100%;padding:0}.hero-statement h1{font-size:clamp(3.25rem,12.5vw,6rem)}
  .hero-frame{width:clamp(104px,27vw,180px);aspect-ratio:4/5}
  .hero-frame--one{left:var(--pad);top:54px}.hero-frame--two{right:var(--pad);bottom:70px}
  .hero-note{font-size:1rem;margin-top:24px}
  .hero-foot{grid-template-columns:1fr 1fr;bottom:18px;font-size:.875rem}
  .hero-foot>span{display:none}.hero-foot>a{justify-self:start}
  .studio-intro,.section-heading{grid-template-columns:1fr;gap:24px}
  .intro-columns{gap:24px;margin-top:28px}
  .person-section{grid-template-columns:1fr;gap:36px;padding-bottom:56px}
  .person-portrait{width:min(100%,440px)}.person-heading h2{font-size:clamp(1.625rem,6.7vw,3.25rem)}
  .person-copy{gap:32px}.person-story{max-width:52ch}
  .principle-list article{grid-template-columns:30px 1fr;gap:18px 12px}
  .principle-list p{grid-column:2}
  .notebook-grid{grid-template-columns:1fr;gap:40px}.notebook-grid figure:nth-child(2){margin-top:0}
  .connection-section{min-height:60svh}.connection-section h2{font-size:clamp(2.75rem,10.8vw,5.5rem)}
  .offer-list a{padding:23px 0;gap:12px}.offer-list h3{font-size:clamp(1.375rem,4.5vw,2.125rem)}
  .about-footer{grid-template-columns:1fr 1fr;row-gap:32px}.about-footer>div:last-child{grid-column:1/-1}
  .about-contact br{display:none}
}
@media(max-width:480px){
  .intro-columns{grid-template-columns:1fr}
  .person-portrait figcaption{flex-direction:column;gap:3px}
  .studio-details{grid-template-columns:1fr}
  .notebook-grid figcaption{font-size:.8125rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.hero-frame{transform:none!important}
  .awaiting-reveal{opacity:1!important;transform:none!important}
  .motion-enabled .hero-line>span,.motion-enabled .hero-frame img{animation:none!important}
}