/* About Us page. Builds on home.css (tokens, header, footer, type, split grid, scroll reveal, heritage pattern). */

/* Hero: the greyscale brand KV full-bleed, one animated A on it (hero-lines.css / hero-lines.js), the page title like the home page title */
.ahero{position:relative;isolation:isolate;min-height:clamp(480px,78svh,820px);display:flex;align-items:flex-end;color:var(--ivory);background:#2b2b2b;overflow:hidden}
.ahero__media{position:absolute;inset:0;z-index:-3}
.ahero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform-origin:50% 100%} /* anchored bottom centre: the same geometry as the A layers (xMidYMax slice) */
.ahero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,20,20,.45) 0,rgba(20,20,20,0) 24%),linear-gradient(0deg,rgba(20,20,20,.35) 0,rgba(20,20,20,0) 40%)} /* light shade: the greyscale brand KV is dark already */
.ahero__in{padding-bottom:clamp(40px,7vw,96px)}
.ahero__title{font-family:var(--f-display);font-weight:300;font-size:clamp(56px,8.6vw,124px);line-height:1;letter-spacing:.02em;text-transform:uppercase;max-width:6em;text-shadow:0 2px 28px rgba(20,14,10,.45)}
@media (min-width:1456px){.ahero__title{font-size:calc(var(--wrap)*.0912)}}

/* 01: the approach, set as a statement */
.aintro{padding:var(--section) 0}
.aintro .split__body{grid-column:2;padding-top:0} /* the number sits on top of the statement, as it does above every other section's heading */
.aintro .statement{margin-top:14px}
.statement{font-family:var(--f-display);font-weight:300;font-size:clamp(25px,2.5vw,38px);line-height:1.32;letter-spacing:.005em;color:var(--ink);max-width:28em;text-wrap:pretty}

/* 02-04: copy from the Brand Guidelines 2026, in the site's own patterns (split label + body, statement type, brand fields) */
/* 02: AMIS means friends. Statement-type lede and text beside the number and title; the arch photograph below */
.ameans{padding:var(--section) 0}
.ameans__text{margin-top:clamp(24px,2.6vw,36px);max-width:62ch}
.ameans__text p{font-size:17px;line-height:1.7;color:var(--ink-70)}
.ameans__text p+p{margin-top:16px}
.ameans__text .ameans__close{color:var(--ink);font-weight:500}
.ameans__media{margin-top:clamp(48px,6vw,96px)}
.ameans__media img{display:block;width:100%;height:auto;aspect-ratio:1920/936;object-fit:cover}
/* 03: vision and mission on the brand brown, the two statements side by side */
.avm{background:var(--brown);color:var(--ivory);padding:var(--section) 0}
.avm .h-display{color:var(--ivory)}
.avm__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,96px);row-gap:48px}
.avm__name{font-family:var(--f-body);font-weight:400;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin:0;padding-top:clamp(20px,2vw,28px);border-top:1px solid rgba(239,168,101,.45)}
.avm__text{font-family:var(--f-display);font-weight:300;font-size:clamp(22px,2vw,30px);line-height:1.35;margin-top:clamp(16px,1.6vw,22px);color:var(--ivory)}
/* 04: values, four columns, each under a fine bronze line */
.avalues{padding:var(--section) 0}
.avalues__grid{list-style:none;padding:0;margin-block:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,56px)}
.avalues__item::before{content:"";display:block;width:1px;height:clamp(40px,4vw,56px);background:var(--bronze);margin-bottom:clamp(20px,2vw,28px)}
.avalues__name{font-family:var(--f-display);font-weight:400;font-size:clamp(20px,1.6vw,24px);line-height:1.2;letter-spacing:.03em;text-transform:uppercase;margin:0}
.avalues__item p{margin-top:14px;font-size:16px;line-height:1.7;color:var(--ink-70);max-width:32ch}

/* 05: founder. The cut-out portrait (seated at his desk, _IAN0949fin) in front of a panel of the brand concrete (the home hero
   material, toned AMIS Brown); the panel matches the photo's width, so the desk ends meet its edges, and his head rises above it.
   The portrait is sized by the text: top level with the "02" label, desk on the section's bottom edge, same padding above and below. */
.founder{--fpad:var(--section);background:var(--sand);padding:var(--fpad) 0 0;overflow:hidden}
.founder__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,96px);align-items:start}
.founder__visual{position:relative;margin:0;align-self:stretch;min-height:440px}
.founder__frame{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;container-type:size}
.founder__fig{position:relative;width:min(100cqw,93.68cqh);aspect-ratio:800/854} /* the photo at the largest size that fits the column and the text's height */
.founder__fig::before{content:"";position:absolute;left:0;right:0;bottom:0;top:22%;background:#392921 url("../img/kv-texture-portrait.webp") center/cover no-repeat;background-blend-mode:luminosity} /* the concrete panel; his head rises above it */
.founder__fig img{position:relative;display:block;width:100%;height:auto}
.founder__copy{padding-bottom:var(--fpad)}
.founder__copy .h-display{margin-top:14px}
.founder__name{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,2.4vw,36px);line-height:1.12;letter-spacing:.02em;text-transform:uppercase;margin:clamp(28px,3vw,44px) 0 0}
.founder__role{margin-top:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.founder__copy .lede{margin-top:clamp(22px,2.4vw,32px)}
.founder__bio{margin-top:20px;max-width:62ch;font-size:17px;line-height:1.7;color:var(--ink-70)}

/* 06: leadership, on the brown heritage-pattern field used for the home gallery */
.team.gallery{padding:var(--section) 0}
.team__grid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);padding:0}
.team__member img{width:100%;aspect-ratio:2/3;object-fit:cover;background:var(--ink)}
.team__name{font-family:var(--f-display);font-weight:400;font-size:clamp(18px,1.5vw,22px);line-height:1.2;letter-spacing:.03em;text-transform:uppercase;margin:18px 0 0;color:var(--ivory)}
.team__role{margin-top:8px;font-size:12px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* Entrance: the photograph settles, the title rises */
@keyframes about-settle{from{transform:scale(1.06)}}
@keyframes about-rise{from{opacity:0;transform:translateY(28px)}}
@media (prefers-reduced-motion:no-preference){
	.ahero__media img{animation:about-settle 2s var(--ease-out,cubic-bezier(.16,1,.3,1)) backwards}
	.ahero__title{animation:about-rise 1.1s cubic-bezier(.16,1,.3,1) .25s backwards}
}

@media (max-width:1100px){
	.team__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
	.team__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:36px}
}

/* Line spacing, same rhythm as the FDJ page: reading text 1.7, small caps labels 1.5 */
.amis-about .lede,.amis-about .founder__bio{line-height:1.7}
.amis-about .founder__role,.amis-about .team__role{line-height:1.5}
@media (max-width:899px){
	.aintro .split__body{grid-column:auto}
	.ameans__media img{aspect-ratio:1200/975}
	.avm__pair{grid-template-columns:1fr}
}
/* Founder: side by side from 1200 px; below that the text column gets too tall for the photo, so the photo stands under the text */
@media (max-width:1199px){
	.founder__grid{grid-template-columns:1fr;row-gap:36px}
	.founder__copy{order:1;padding-bottom:0}
	.founder__visual{order:2;width:min(100%,460px);justify-self:center;min-height:0;align-self:auto}
	.founder__frame{position:relative;inset:auto;display:block;container-type:normal}
	.founder__fig{width:100%}
}
@media (max-width:1100px){
	.avalues__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(40px,6vw,56px)}
}
@media (max-width:599px){
	.avalues__grid{grid-template-columns:1fr}
}