/* Include borders in both markers' dimensions; preserve the static dot's drawn size. */
.timeline-wrap{--timeline-marker-size:16px;--timeline-marker-top:5px}
.timeline-wrap .timeline-step::after,.timeline-wrap .timeline-runner{
 box-sizing:border-box;
 width:var(--timeline-marker-size);
 height:var(--timeline-marker-size);
 border:2px solid var(--mid);
 outline:1px solid var(--mid);
 border-radius:50%;
 box-shadow:none;
}
.timeline-wrap .timeline-step::after{top:var(--timeline-marker-top)}
.motion-enabled .timeline-wrap.timeline-ready .timeline-step::after{animation:none}
.timeline-wrap .timeline::before,.timeline-wrap .timeline-step:last-child::before{top:calc(var(--timeline-marker-top) + var(--timeline-marker-size)/2)}
@media(max-width:800px){.timeline-wrap{--timeline-marker-top:3px}}

/* Give body-copy emphasis more height while preserving heading treatments. */
.prose mark{line-height:1.35;padding:.1em .08em}

/* Reuse the header's stacked wordmark as the footer home link. */
.footer-wordmark{display:inline-block;justify-self:start;align-self:start}

/* More breathing room beneath the Why me opening title. */
.why-opening .copy-block>.prose{margin-top:64px}
@media(max-width:800px){.why-opening .copy-block>.prose{margin-top:48px}}

/* Introduce applications as examples of the wider range. */
.applications-intro-copy{max-width:900px;margin-top:28px}


/* Lower the objective graphic slightly; the grid grows to retain space below. */
@media(min-width:801px){#objective .objective-art{margin-top:20px}}

/* Final details: consistent paragraph-to-link space and centred partnership copy. */
#objective .prose>.text-link,#adam .prose>.text-link{margin-top:34px;display:table}
.partnership-interlude .prose{text-align:center}
.partnership-interlude .prose p{text-wrap:balance}

/* Frame the selected speaking portrait around Adam rather than its empty right side. */
#adam.edge-portrait>.portrait img{object-position:24% 35%}
@media(max-width:800px){#adam.edge-portrait>.portrait img{object-position:22% 28%}}

/* Let the corridor extend behind the copy; begin the fade clear of Adam's shoulder. */
@media(min-width:801px){
 #experience.experience-feather>.portrait{width:70%;background:var(--grey);overflow:hidden}
 #experience.experience-feather>.portrait img{position:relative;left:-120px}
 #experience.experience-feather>.portrait::after{background:linear-gradient(90deg,transparent calc(100% - 250px),rgba(243,244,242,.85) calc(100% - 205px),var(--grey) calc(100% - 120px))}
}

/* Keep the tablet and pointing hands within the selected onboarding crop. */
#application-3 .application-photo img{object-position:30% center}

/* Join the portrait directly to the green section above, without a pale seam. */
#experience.experience-feather{border-top:0}

/* Reserve the working camera detail for the right side and give the copy a quiet area. */
.capability-photo{
 position:relative;isolation:isolate;text-align:left;
 background-image:linear-gradient(90deg,rgba(13,41,32,.98) 0%,rgba(13,41,32,.94) 36%,rgba(13,41,32,.68) 49%,rgba(13,41,32,.08) 69%,rgba(13,41,32,.15) 100%),url("assets/crew-background.webp");
 background-position:center 46%;padding-top:88px;padding-bottom:88px;
}
.capability-photo .copy-block{width:47%;max-width:600px;margin:0}
.capability-photo h2{font-size:clamp(38px,3.3vw,48px)}
.capability-photo .prose{margin-left:0;margin-right:0}
.capability-photo .context-links{justify-content:flex-start}
@media(max-width:800px){
 .capability-photo{background-image:none;padding-top:286px;padding-bottom:75px}
 .capability-photo::before{content:'';position:absolute;inset:0 0 auto;height:226px;z-index:-1;background:linear-gradient(rgba(13,41,32,.08),rgba(13,41,32,.2)),url("assets/crew-background.webp") center 46%/cover no-repeat}
 .capability-photo .copy-block{width:100%;max-width:none}
 .capability-photo h2{font-size:37px}
}
/* Carrying study: the action shares the button row's headroom, on a raised floor. */
.page-home .hero{padding-top:60px;padding-bottom:46px}
.page-home .hero-bottom{display:block;margin-top:38px}
.page-home .hero-copy .actions{margin-top:22px}
.page-home .hero-moment{position:absolute;z-index:1;left:var(--gutter);right:var(--gutter);bottom:0;width:auto;margin:0;pointer-events:none}
.page-home .hero-moment picture,.page-home .hero-moment img{display:block;width:100%;height:auto}
.page-home .hero-story{display:block;width:100%;height:auto;overflow:visible}
.page-home .hero-story-compact{display:none}
.hero-replay{font:600 11px/1.5 Manrope,Arial,sans-serif;border:0;padding:9px 8px;min-height:40px;color:var(--deep);background:transparent;cursor:pointer;white-space:nowrap}
.hero-replay[hidden]{display:none}.hero-replay:disabled{opacity:.45;cursor:default}
.hero-replay:focus-visible{outline:2px solid var(--mid);outline-offset:2px}
/* Restore the grid’s original contrast beneath the illustration. */
.page-home .hero .drafting-surface{opacity:1}
@media(min-width:801px) and (max-height:740px){.page-home .hero{padding-top:52px;padding-bottom:40px}.page-home .hero-bottom{margin-top:34px}}
@media(max-width:800px){.page-home .hero{padding-top:52px;padding-bottom:0}.page-home .hero-bottom{margin-top:32px}.page-home .hero-copy .actions{margin-top:24px}.page-home .hero-moment{position:relative;left:auto;right:auto;width:100%;max-width:360px;margin:28px 0 0}.page-home .hero-story-wide{display:none}.page-home .hero-story-compact{display:block}}
@media(max-width:800px) and (max-height:700px){.page-home .hero{padding-top:32px}.page-home .hero-bottom{margin-top:20px}.page-home .hero-copy .actions{margin-top:22px}.page-home .hero-moment{margin-top:20px}}
@media(max-width:600px){.page-home .review-bar-note{display:none}.page-home .review-bar>a{margin-right:auto}.hero-replay{font-size:10px;padding:8px 3px}}

/* Smaller outer Objective labels; keep the central question's emphasis. */
.objective-art[data-graphic-study="a"] .choice-detail{font-size:17px}
.objective-art[data-graphic-study="a"] .label-keyword{font-size:20px}
@media(max-width:800px){.objective-art[data-graphic-study="a"] .choice-detail{font-size:20px}.objective-art[data-graphic-study="a"] .label-keyword{font-size:22px}}
@media(max-width:360px){.objective-art[data-graphic-study="a"] .choice-detail{font-size:22px}.objective-art[data-graphic-study="a"] .label-keyword{font-size:23px}}

/* Small social logos retain a generous focus/tap target. */
.social-link{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:36px;min-height:44px;color:var(--deep);text-decoration:none}
.social-link svg{display:block;width:20px;height:20px}
.social-link:hover{color:var(--mid);background:var(--grey)}
.site-header{gap:24px}
.footer-contact{grid-column:1/-1;justify-self:end;display:flex;align-items:center;gap:10px}
.site-footer .footer-contact .email{margin:0;grid-column:auto;justify-self:auto;min-width:0}
@media(min-width:801px) and (max-width:1050px){.site-header{gap:14px}.desktop-nav{gap:14px}}
@media(max-width:800px){.site-header{gap:8px}.header-linkedin{width:32px}.footer-contact{margin-top:25px;justify-content:flex-start;justify-self:start;width:fit-content;max-width:100%;gap:8px}}

/* Who opening: review three stills in the eventual animation's own space. */
.page-who-i-help #opening>.copy-block>.prose{max-width:calc(60% - 40px)}
.who-hero-story{position:absolute;right:var(--gutter);bottom:65px;width:38%;max-width:480px;margin:0;z-index:1;pointer-events:none}
.who-hero-story img{display:block;width:100%;height:auto}
.who-hero-story img[hidden]{display:none}
.who-story-controls{display:flex;gap:4px;align-items:center}
.who-story-controls button{font:600 11px/1.5 Manrope,Arial,sans-serif;padding:8px 10px;min-height:36px;background:transparent;color:var(--deep);border:1px solid transparent;cursor:pointer;white-space:nowrap}
.who-story-controls button[aria-pressed="true"]{background:var(--lime);border-color:var(--mid)}
.who-story-controls button:focus-visible{outline:2px solid var(--mid);outline-offset:2px}
@media(max-width:800px){
 .page-who-i-help #opening{padding-bottom:40px}
 .page-who-i-help #opening>.copy-block>.prose{max-width:700px}
 .who-hero-story{position:relative;right:auto;bottom:auto;width:100%;max-width:440px;margin:28px 0 0 auto}
 .page-who-i-help .review-bar{flex-wrap:wrap;gap:4px 10px}
 .page-who-i-help .review-bar>a{margin-right:0}
 .page-who-i-help .review-bar-note{display:none}
 .who-story-controls{margin-left:auto;gap:0}
 .who-story-controls button{font-size:10px;padding:7px 8px}
 .page-who-i-help .review-bar .motion-toggle{margin-left:auto}
}
.who-animated svg{display:block;width:100%;height:auto;overflow:visible}
@media(max-width:800px){.page-who-i-help .review-bar .who-replay{margin-left:auto}.page-who-i-help .review-bar .motion-toggle{margin-left:0}}
