/* About-only composition. Shared homepage files remain unchanged. */
.about-page{font-size:17px;line-height:1.65}.about-page .ap-section{padding:64px 0}.about-page .ap-pale{background:#f2f8fb}.about-page .ap-label{font-size:13px;font-weight:600;letter-spacing:.15em;display:block;margin-bottom:22px}.about-page h1{font-size:clamp(40px,4.4vw,76px);max-width:1200px;line-height:1.06}.about-page h2{font-size:clamp(30px,3vw,50px);margin-bottom:24px}.about-page h3{font-size:20px;font-weight:600;line-height:1.35;margin-bottom:12px}.about-page p+p{margin-top:18px}.about-page .ap-hero{padding:82px 0 76px}.about-page .ap-lead{max-width:880px;font-size:21px;margin:26px 0 28px}.about-page .button{font-size:12px;letter-spacing:.015em;padding:12px 24px;min-height:48px;background:#085979}.about-page .ap-profile{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:72px}.about-page .ap-role{font-weight:600;margin-top:-12px;margin-bottom:26px}.about-page .ap-facts{border-left:1px solid #b8cbd7;padding-left:50px;align-self:center;display:grid;gap:42px}.about-page .ap-facts strong{display:block;font:400 56px/1.15 var(--serif);color:var(--ink)}.about-page .ap-facts small{font-size:29px}.about-page .ap-facts span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;max-width:260px;margin-top:10px}.about-page .ap-cards{display:grid;gap:32px;margin-top:32px}.about-page .ap-three{grid-template-columns:repeat(3,minmax(0,1fr))}.about-page .ap-four{grid-template-columns:repeat(4,minmax(0,1fr))}.about-page .ap-cards article{border-top:1px solid #819caf;padding-top:22px}.about-page .ap-cards p{font-size:16px}.about-page .ap-education p{max-width:1100px}.about-page .ap-workflow{list-style:none;padding:0;margin:34px 0 0}.about-page .ap-workflow li{display:grid;grid-template-columns:64px minmax(180px,.8fr) minmax(0,1.6fr);gap:28px;padding:27px 0;border-bottom:1px solid #b8cbd7}.about-page .ap-number{font:400 43px/1 var(--serif);color:var(--ink)}.about-page .ap-workflow h3{margin:0}.about-page .ap-communication{margin-top:30px;max-width:1050px}.about-page .ap-cta{background:#073452;text-align:center;color:#fff}.about-page .ap-cta h2{color:#fff}.about-page .ap-cta p{max-width:780px;margin:0 auto 24px}.about-page .ap-cta .button{background:#fff;color:#173a5e;margin-bottom:22px}.about-page .ap-cta p:last-child{font-size:14px;margin-bottom:0}
@media(max-width:900px){.about-page .ap-profile{gap:35px;grid-template-columns:1.5fr 1fr}.about-page .ap-facts{padding-left:25px}.about-page .ap-four{grid-template-columns:repeat(2,minmax(0,1fr))}.about-page .ap-workflow li{grid-template-columns:50px 1fr}.about-page .ap-workflow li>div{grid-column:2}}
@media(max-width:600px){.about-page .ap-section{padding:40px 0}.about-page .ap-hero{padding:48px 0}.about-page .ap-profile,.about-page .ap-three,.about-page .ap-four{grid-template-columns:1fr}.about-page .ap-facts{border-left:0;border-top:1px solid #b8cbd7;padding:26px 0 0;grid-template-columns:1fr 1fr;gap:18px}.about-page .ap-facts strong{font-size:38px}.about-page .ap-facts small{font-size:19px}.about-page .ap-lead{font-size:18px}.about-page .ap-workflow li{gap:15px}.about-page .ap-cards{gap:25px}}

/* Stage 3: reuse homepage header geometry and permanent dark state. */
.about-page{padding-top:var(--header-height)}
.about-page #header{font-size:16px;line-height:1.45}

/* Stage 4: footer inherits the homepage typography, not About content headings. */
.about-page footer{font-size:16px;line-height:1.45}
.about-page footer h3{font-size:14px;font-weight:600;line-height:1.45;margin:0 0 9px}

/* Stage 5: approved skyline asset behind the About CTA only. */
.about-page .ap-cta{background-color:#073452;background-image:linear-gradient(rgba(7,52,82,.4),rgba(7,52,82,.4)),url('assets/consultation-skyline.png');background-repeat:no-repeat;background-position:center bottom;background-size:cover}

/* About intro typography matches homepage section heading and intro sizes. */
.about-page .ap-hero h1{font-size:clamp(32px,3.05vw,60px)}
.about-page .ap-hero .ap-lead{font-size:clamp(16px,1.18vw,23px)}
@media(max-width:1100px){.about-page .ap-hero h1{font-size:38px}}
@media(max-width:760px){.about-page .ap-hero h1{font-size:35px}.about-page .ap-hero .ap-lead{font-size:17px}}

/* Reduce only the gap between experience and working principles. */
.about-page #experience{padding-bottom:32px}
.about-page #working-principles{padding-top:32px}
@media(max-width:600px){.about-page #experience{padding-bottom:20px}.about-page #working-principles{padding-top:20px}}

/* Compact CTA: same container edges and 320px button width as the header. */
.about-page .ap-cta{padding:32px 0;text-align:left}
.about-page .ap-cta-row{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:center;gap:48px}
.about-page .ap-cta-copy h2{margin-bottom:14px}
.about-page .ap-cta .ap-cta-copy p{max-width:none;margin:0;font-size:17px}
.about-page .ap-cta-action{text-align:center}
.about-page .ap-cta-action .button{width:320px;max-width:100%;height:48px;margin:0 0 12px}
.about-page .ap-cta .ap-cta-action p{margin:0;font-size:14px}
@media(max-width:900px){.about-page .ap-cta-row{grid-template-columns:1fr;gap:24px}.about-page .ap-cta-action{justify-self:start;max-width:100%}}
@media(max-width:600px){.about-page .ap-cta{padding:28px 0}}

/* Approved compact About: profile, expertise, You / We process, existing CTA. */
.about-page .ap-intro h1{font-size:clamp(32px,3.05vw,60px);line-height:1.12;margin-bottom:28px}
.about-page .ap-profile{grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);align-items:start;gap:64px}
.about-page .ap-photo-placeholder{width:100%;aspect-ratio:4/5;max-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #819caf;background:#e7eff4;color:#173a5e;text-align:center;padding:24px}
.about-page .ap-photo-placeholder span{font-size:14px;letter-spacing:.15em;font-weight:600}
.about-page .ap-photo-placeholder p{font-size:16px;margin:12px 0 0;color:#506779}
.about-page #experience{padding-bottom:64px}
.about-page .ap-workflow li{grid-template-columns:minmax(200px,.95fr) minmax(0,1fr) minmax(0,1fr);gap:36px;padding:20px 0;align-items:center}
.about-page .ap-step-heading{display:flex;gap:20px;align-items:center}
.about-page .ap-number{flex-shrink:0}
.about-page .ap-party h4{font:600 16px/1.4 var(--sans);color:#173a5e;margin:0 0 10px}
.about-page .ap-party p{font-size:16px;margin:0}
@media(max-width:1000px){.about-page .ap-profile{gap:36px;grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr)}.about-page .ap-workflow li{grid-template-columns:1fr 1fr;gap:22px 32px}.about-page .ap-workflow li>.ap-step-heading{grid-column:1/-1}.about-page .ap-workflow li>.ap-party{grid-column:auto}}
@media(max-width:700px){.about-page .ap-profile{grid-template-columns:1fr}.about-page .ap-photo-placeholder{max-width:380px;justify-self:center}.about-page .ap-workflow li{grid-template-columns:1fr;gap:20px}.about-page .ap-workflow li>.ap-party{grid-column:1}.about-page .ap-workflow li>.ap-step-heading{grid-column:1}.about-page #experience{padding-bottom:40px}}

/* Alternating light section backgrounds; facade retained on the right. */
.about-page .ap-intro,.about-page #how-we-work{background-color:#edf4f8}
.about-page #experience{background-color:#fff;background-image:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 40%,rgba(255,255,255,.58) 68%,rgba(255,255,255,.10) 100%),url('assets/expertise-facade.png');background-size:cover;background-position:center right;background-repeat:no-repeat}
.about-page .ap-communication-section{background:#fff;padding:36px 0}
.about-page .ap-communication-section .ap-communication{margin-top:0}
@media(max-width:700px){.about-page #experience{background-image:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.68)),url('assets/expertise-facade.png')}.about-page .ap-communication-section{padding:28px 0}}

/* End the process background at the final step divider. */
.about-page #how-we-work{padding-bottom:0}

/* No separator on the transition to Communication; preserve row height. */
.about-page #how-we-work .ap-workflow li:last-child{border-bottom-color:transparent}

/* Communication: original text measure, softer image aligned with content. */
.about-page #communication{background-color:#fff;background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),url('assets/communication-room.png');background-repeat:no-repeat;background-position:right min(0px,calc(5.65vw - var(--communication-window-shift,150px))) center;background-size:auto 100%}
.about-page #communication .ap-communication{max-width:1050px}
@media(max-width:1300px) and (min-width:701px){.about-page #communication .ap-communication{max-width:calc(100% - 220px)}}
@media(max-width:700px){.about-page #communication{background-image:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.97) 65%,rgba(255,255,255,.90) 100%),url('assets/communication-room.png');background-position:right center}.about-page #communication .ap-communication{max-width:100%}}
/* Current-page underline uses the existing navigation decoration. */
.about-page #navigation a[aria-current="page"]:after{right:0;transition:none}

/* Compact biography with an upper-right portrait and text flowing beneath it. */
.about-page .ap-section.ap-intro{padding:30px 0}
.about-page .ap-intro{font-size:17.5px;line-height:1.5}
.about-page .ap-intro h1{font-size:42px;line-height:1.12;margin-bottom:13px}
.about-page .ap-intro .ap-role{margin:0 0 13px}
.about-page .ap-intro p+p{margin-top:13px}
@media(min-width:701px){
 .about-page .ap-intro .ap-profile{display:flow-root}
 .about-page .ap-intro .ap-profile>div{display:block}
 .about-page .ap-intro .ap-photo-placeholder{float:right;width:26%;max-width:360px;height:auto;aspect-ratio:1122/1402;max-height:none;margin:0 0 13px 32px}
}
@media(max-width:700px){
 .about-page .ap-intro .ap-profile>div{order:0}
 .about-page .ap-intro .ap-photo-placeholder{order:1}
}

/* Match the approved heading size and homepage section rhythm. */
.about-page #experience h2,.about-page #how-we-work h2,.about-page #consultation h2{font-size:42px}
.about-page #experience{padding:30px 0 34px}
.about-page #how-we-work{padding-top:27px}
.about-page #communication{padding:30px 0}
.about-page #our-expertise,.about-page #how-we-work-together{scroll-margin-top:24px}
@media(max-width:700px){
 .about-page .ap-intro .ap-profile{gap:20px}
 .about-page .ap-intro .ap-profile-heading{order:0}
 .about-page .ap-intro .ap-biography{order:1}
 .about-page .ap-intro .ap-photo-placeholder{order:2}
}

/* Requested About spacing and role treatments. */
.about-page .ap-section.ap-intro{padding-top:18px}
.about-page .ap-intro h1{margin-bottom:1px}
/* Anchor clearance is measured from the fixed header. */
.about-page #our-expertise,.about-page #how-we-work-together{scroll-margin-top:0}
@media(min-width:1001px){
 .about-page #how-we-work .ap-workflow{margin-top:10px}
 .about-page #how-we-work .ap-workflow li{padding-top:13px;padding-bottom:13px}
 .about-page #how-we-work .ap-party h4{margin-bottom:3px}
}
.about-page .ap-biography strong{font-weight:600}
.about-page .ap-photo-placeholder.ap-portrait{position:relative;padding:0;border:0;overflow:hidden;outline:1px solid #cfdbe6;outline-offset:-1px}
.about-page .ap-portrait img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
@media(min-width:701px) and (max-width:1100px){
 .about-page .ap-photo-placeholder.ap-portrait{background:transparent;outline:0}
 .about-page .ap-portrait img{height:auto;object-fit:contain;outline:1px solid #cfdbe6;outline-offset:-1px}
}
@media print{
 .about-page .ap-photo-placeholder.ap-portrait{max-width:130pt!important;padding:0!important;margin-left:auto!important;margin-right:auto!important}
 .about-page .ap-portrait img{position:static;object-fit:contain}
}
/* One continuous role tint, with wider text columns on desktop. */
@media(min-width:1001px){
 .about-page #how-we-work .ap-workflow{
  --process-title-width:calc((100% - 72px)*.3220338983 - 35px);
  --process-role-width:calc((100% - 72px - var(--process-title-width))/2);
  background:linear-gradient(to right,transparent calc(100% - var(--process-role-width) - 18px),#dfeaf2 0);
 }
 .about-page #how-we-work .ap-workflow li{grid-template-columns:var(--process-title-width) minmax(0,1fr) minmax(0,1fr);padding-top:3px;padding-bottom:3px}
 .about-page #how-we-work .ap-party p{line-height:1.4}
 .about-page #how-we-work .ap-party h4{margin-bottom:5px}
 .about-page #how-we-work .ap-step-heading h3{font-weight:600}
}

/* Bottom spacing refinements preserve the process column geometry. */
.about-page #how-we-work{padding-bottom:15px}

.about-page #experience{padding-bottom:24px}

/* Fade across the 36px You/We gap and 60px beyond the divider ends. */
@media(min-width:1001px){
 .about-page #how-we-work{overflow:hidden}
 .about-page #how-we-work .ap-workflow{position:relative;isolation:isolate;background:none}
 .about-page #how-we-work .ap-workflow::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:0;bottom:-15px;left:calc(100% - var(--process-role-width) - 36px);right:-60px;background:linear-gradient(to right,#edf4f8 0,#dfeaf2 36px,#dfeaf2 calc(100% - 60px),#edf4f8 100%)}
}

/* Keep the original portrait ratio and reserve its height before image loading. */
@media screen and (min-width:701px){
 .about-page .ap-intro .ap-portrait img{position:static;width:100%;height:auto;object-fit:contain}
}
/* Reveal the laptop only at the narrow phone layout; retain the existing overlay. */
@media screen and (max-width:700px){
 .about-page #communication{background-position:30% center}
}