/* Dedicated composition for the brand page /a-propos/. */
.ww-about { overflow: clip; background: var(--ww-color-white); }
.ww-about__section { padding-block: var(--ww-section-ample); }
.ww-about h2 { max-width: 18ch; margin-bottom: var(--ww-space-6); }
.ww-about h3 { margin-bottom: var(--ww-space-4); }
.ww-about p { margin-bottom: var(--ww-space-5); }
.ww-about__section-heading { max-width: 45rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.ww-about__section-heading--reading { max-width: 48rem; }
.ww-about__hero { position: relative; padding: clamp(3.25rem, 6vw, 5.75rem) 0; background: var(--ww-color-cream-2); }
.ww-about__hero-grid { display: grid; align-items: center; gap: 1.5rem clamp(2.5rem, 6vw, 6rem); grid-template-areas: "intro photo" "followup photo"; grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr); }
.ww-about__hero-intro { grid-area: intro; align-self: end; max-width: 41rem; padding-top: calc(var(--ww-space-10) + var(--ww-space-1)); }
.ww-about__hero-intro .ww-breadcrumb--structural { position: absolute; top: var(--ww-space-8); left: max(calc(var(--ww-container-gutter) / 2), calc((100% - var(--ww-width-wide)) / 2)); width: min(calc(100% - var(--ww-container-gutter)), var(--ww-width-wide)); margin: 0; }
.ww-about__hero-intro h1 { margin-bottom: var(--ww-space-6); }
.ww-about__hero-intro p, .ww-about__hero-followup p { font-size: clamp(1.06rem, 1.35vw, 1.22rem); }
.ww-about__hero-photo { grid-area: photo; width: min(100%, 29rem); margin: 0 auto; overflow: hidden; border-radius: var(--ww-radius-lg); background: var(--ww-color-ink); aspect-ratio: 4 / 5; }
.ww-about__hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ww-about__hero-followup { grid-area: followup; align-self: start; max-width: 41rem; }
.ww-about__text-link, .ww-about__institutional a, .ww-about__closing a { display: inline-flex; gap: .4em; align-items: baseline; font-weight: 800; }
.ww-about__story { background: var(--ww-color-white); }
.ww-about__story-opening { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; grid-template-columns: minmax(0, .95fr) minmax(18rem, .82fr); }
.ww-about__story-copy { max-width: 39rem; }
.ww-about__story-photo { min-height: 28rem; margin: clamp(1rem, 3vw, 3rem) 0 0; overflow: hidden; border-radius: var(--ww-radius-lg); background: var(--ww-color-cream); }
.ww-about__story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 53% center; }
.ww-about__story-reading { width: min(100%, var(--ww-width-reading)); margin: clamp(3.5rem, 7vw, 6.5rem) auto 0; }
.ww-about__story-reading h3 { margin-top: 0; }
.ww-about__transition { background: var(--ww-color-ink); color: var(--ww-color-white); }
.ww-about__transition h3, .ww-about__transition p, .ww-about__closing h2, .ww-about__closing h3 { color: inherit; }
.ww-about__transition-copy { max-width: var(--ww-width-reading); }
.ww-about__timeline { position: relative; display: grid; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: clamp(2rem, 4vw, 3rem) 0 0; border-top: 1px solid rgb(255 255 255 / .32); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); list-style: none; }
.ww-about__timeline li { display: grid; gap: var(--ww-space-3); }
.ww-about__timeline strong { color: var(--ww-color-coral-soft); font-family: var(--ww-font-display); font-size: clamp(1.7rem, 3vw, 2.55rem); line-height: 1; }
.ww-about__timeline span { max-width: 22ch; font-size: .94rem; line-height: 1.55; }
.ww-about__method { background: var(--ww-color-cream); }
.ww-about__method-synthesis { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); color: var(--ww-color-coral-deep); font-family: var(--ww-font-display); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 600; text-transform: uppercase; }
.ww-about__method-synthesis b { color: var(--ww-color-coral); font-family: var(--ww-font-body); font-weight: 400; }
.ww-about__team { background: var(--ww-color-cream-2); }
.ww-about__portrait-gallery { display: grid; max-width: 65rem; margin: 0 auto clamp(2.75rem, 5vw, 4.5rem); padding: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.55rem, 1.5vw, 1.25rem); list-style: none; }
.ww-about__portrait-gallery li { position: relative; padding: clamp(.2rem, .55vw, .36rem); border: 1px solid rgb(42 35 32 / .1); border-radius: calc(var(--ww-radius-md) + .1rem); background: var(--ww-color-white); box-shadow: .38rem .38rem 0 var(--ww-color-cream), 0 .65rem 1.35rem rgb(42 35 32 / .1); }
.ww-about__portrait-gallery li::before { position: absolute; z-index: 1; inset: clamp(.1rem, .28vw, .18rem); border: 1px solid rgb(42 35 32 / .09); border-radius: calc(var(--ww-radius-md) - .05rem); content: ""; pointer-events: none; }
.ww-about__portrait-gallery img { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: calc(var(--ww-radius-md) - .12rem); background: var(--ww-color-cream); object-fit: cover; object-position: center top; }
.ww-about__portrait-gallery span { position: absolute; z-index: 2; right: clamp(.35rem, .7vw, .55rem); bottom: clamp(.35rem, .7vw, .55rem); padding: .3rem .55rem; border-radius: 999px; background: rgb(255 255 255 / .9); box-shadow: 0 1px 0 rgb(42 35 32 / .1); color: var(--ww-color-ink); font-family: var(--ww-font-display); font-size: clamp(.72rem, 1vw, .86rem); font-weight: 600; letter-spacing: .02em; line-height: 1; }
.ww-about__team-photo { width: min(100%, 62rem); margin: 0 auto clamp(2.25rem, 5vw, 4rem); }
.ww-about__team-photo--after-profiles { margin-top: clamp(2.25rem, 5vw, 4rem); }
.ww-about__team-photo img { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--ww-radius-lg); background: var(--ww-color-cream); object-fit: cover; object-position: center; }
.ww-about__team-photo figcaption { margin-top: .625rem; color: var(--ww-color-ink-soft); font-size: .84rem; line-height: 1.45; }
.ww-about__profiles { display: grid; gap: clamp(2rem, 4vw, 4rem) clamp(2rem, 6vw, 6rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ww-about__profiles article { padding-top: var(--ww-space-5); border-top: 1px solid var(--ww-color-border); }
.ww-about__profiles p { font-size: .98rem; }

.ww-about__team-closing { width: min(100%, var(--ww-width-reading)); margin: clamp(3rem, 6vw, 5rem) auto 0; font-family: var(--ww-font-display); font-size: clamp(1.35rem, 2.5vw, 1.8rem); line-height: 1.3; }
.ww-about__proofs { background: var(--ww-color-white); }
.ww-about__proof-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.ww-about__proof-grid article { padding: clamp(1.75rem, 3.5vw, 3rem); border-radius: var(--ww-radius-lg); }
.ww-about__proof-number { background: var(--ww-color-cream); }
.ww-about__proof-number h3::before { display: block; margin-bottom: .25rem; color: var(--ww-color-coral-dark); content: "3 000+"; font-family: var(--ww-font-display); font-size: clamp(4.5rem, 9vw, 8rem); line-height: .8; letter-spacing: -.06em; white-space: nowrap; }
.ww-about__proof-trustpilot { background: var(--ww-color-ink); color: var(--ww-color-white); }
.ww-about__proof-trustpilot img, .ww-about__closing img { width: 8.75rem; margin-bottom: var(--ww-space-8); }
.ww-about__proof-trustpilot h3 { color: var(--ww-color-white); }
.ww-about__trustpilot-rating { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: baseline; margin-bottom: var(--ww-space-5); }
.ww-about__trustpilot-rating strong { color: var(--ww-color-coral-soft); font-family: var(--ww-font-display); font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; }
.ww-about__trustpilot-rating span { color: rgb(255 255 255 / .78); font-size: .9rem; font-weight: 800; }
.ww-about__proof-trustpilot a, .ww-about__closing a { color: var(--ww-color-white); font-weight: 800; }
.ww-about__proof-trustpilot a:hover, .ww-about__proof-trustpilot a:focus-visible, .ww-about__closing a:hover, .ww-about__closing a:focus-visible { color: var(--ww-color-coral-soft); }
.ww-about__proof-book { display: grid; align-items: center; background: var(--ww-color-cream-2); grid-column: 1 / -1; grid-template-columns: minmax(10.625rem, 13.75rem) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); }
.ww-about__proof-book > img { width: min(100%, 13.75rem); margin: auto; }
.ww-about__institutional { width: min(100%, var(--ww-width-reading)); margin: clamp(4rem, 8vw, 7rem) auto 0; }
.ww-about__institutional-links { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: var(--ww-space-8); }
.ww-about__closing { background: var(--ww-color-ink); color: var(--ww-color-white); }
.ww-about__closing-grid { display: grid; gap: clamp(2rem, 6vw, 5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ww-about__closing-grid article { min-height: 14rem; padding-top: var(--ww-space-6); border-top: 1px solid rgb(255 255 255 / .32); }
.ww-about__closing a { text-decoration: none; }
.ww-about__closing-link-label { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
@media (prefers-reduced-motion: no-preference) {
	html.has-about-motion .ww-about__timeline { border-top-color: transparent; }
	html.has-about-motion .ww-about__timeline:not(.is-revealed) li { opacity: 0; transform: translateY(14px); }
	html.has-about-motion .ww-about__timeline::before { position: absolute; top: -1px; right: 0; left: 0; height: 1px; background: rgb(255 255 255 / .32); content: ""; transform: scaleX(0); transform-origin: left; }
	html.has-about-motion .ww-about__timeline.is-revealed::before { animation: ww-about-timeline-line 760ms cubic-bezier(.22, 1, .36, 1) forwards; }
	html.has-about-motion .ww-about__timeline.is-revealed li { animation: ww-about-timeline-item 580ms cubic-bezier(.22, 1, .36, 1) both; }
	html.has-about-motion .ww-about__timeline.is-revealed li:nth-child(1) { animation-delay: 180ms; }
	html.has-about-motion .ww-about__timeline.is-revealed li:nth-child(2) { animation-delay: 300ms; }
	html.has-about-motion .ww-about__timeline.is-revealed li:nth-child(3) { animation-delay: 420ms; }
	html.has-about-motion .ww-about__timeline.is-revealed li:nth-child(4) { animation-delay: 540ms; }
}
@keyframes ww-about-timeline-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ww-about-timeline-item { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 60rem) {
	.ww-about__hero-grid { grid-template-areas: "intro" "photo" "followup"; grid-template-columns: minmax(0, 1fr); gap: var(--ww-space-6); }
	.ww-about__hero-photo { width: min(100%, 23rem); margin-inline: 0; }
	.ww-about__story-opening { grid-template-columns: minmax(0, 1fr); }
	.ww-about__story-photo { min-height: 24rem; margin-top: 0; }
	.ww-about__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ww-about__proof-grid { grid-template-columns: minmax(0, 1fr); }
	.ww-about__proof-book { grid-column: auto; }
}
@media (max-width: 48rem) {
	.ww-about__portrait-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 37rem) {
	.ww-about__section { padding-block: var(--ww-section-standard); }
	.ww-about__hero { padding-block: var(--ww-section-standard); }
	.ww-about__hero-photo { width: min(100%, 18rem); }
	.ww-about__story-photo { min-height: 20rem; }
	.ww-about__timeline { margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.ww-about__timeline li { grid-template-columns: 6.75rem minmax(0, 1fr); align-items: baseline; }
	.ww-about__timeline span { max-width: none; }
	.ww-about__method-synthesis { display: grid; grid-template-columns: 1fr; gap: .3rem; }
	.ww-about__method-synthesis b { display: none; }
	.ww-about__profiles, .ww-about__closing-grid { grid-template-columns: minmax(0, 1fr); }
	.ww-about__portrait-gallery { gap: .65rem; }
	.ww-about__proof-book { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; }
	.ww-about__proof-book > img { width: 7.5rem; }
	.ww-about__proof-book p { font-size: .95rem; }
}
@media (max-width: 30rem) {
	.ww-about__portrait-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}