/* ==========================================================================
   About (Figma frame 1:9) – design coordinates: 1rem = 10px at 1728px
   Hero is shared (main.css).
   ========================================================================== */

/* ---------- 02 Our story ---------- */
.ab-intro { position: relative; height: 95rem; overflow: hidden;
	background: radial-gradient(60.48rem 57rem at 13.824rem 76rem, rgba(110, 194, 227, .2), transparent),
		radial-gradient(60.48rem 57rem at 146.88rem 23.75rem, rgba(249, 112, 20, .18), transparent), #fff; }
.ab-intro__copy { position: absolute; left: var(--gutter); top: 13.1rem; width: 66rem; z-index: 2; }
.ab-intro__copy .eyebrow { margin-bottom: 2rem; }
.ab-intro__title { width: 66rem; font-size: 5.6rem; line-height: 6.4rem; letter-spacing: -.03em; color: var(--text-strong); }
.ab-intro__title .is-accent { color: #f97014; }
/* Each word sits in a mask so it can rise in (about.js) */
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.word > span { display: inline-block; }
.ab-intro__text { width: 60rem; margin-top: 3.2rem; font-size: max(1.9rem, 16px); line-height: 3.2rem; color: var(--text-strong); opacity: .8; }
.ab-founders { display: flex; gap: 3.2rem; margin-top: 4.8rem; }
.ab-founder { display: flex; align-items: center; gap: 1.4rem; }
.ab-founder__avatar { display: grid; place-items: center; width: 5.6rem; height: 5.6rem; flex: none; border-radius: 50%; border: 2px solid var(--orange); background: var(--canvas); color: #fff; font-family: var(--f-head); font-weight: 600; font-size: max(2rem, 15px); line-height: 2.6rem; letter-spacing: -.01em; transition: background .5s, transform .7s var(--ease-out); }
.ab-founder:hover .ab-founder__avatar { background: var(--orange); transform: rotate(-8deg) scale(1.06); }
.ab-founder__copy { display: flex; flex-direction: column; gap: .2rem; color: var(--text-strong); white-space: nowrap; }
.ab-founder__copy strong { font-family: var(--f-head); font-weight: 600; font-size: max(2rem, 16px); line-height: 2.6rem; letter-spacing: -.01em; }
.ab-founder__copy small { font-size: var(--t-small); line-height: 2rem; opacity: .6; }
.ab-intro__copy .btn-row { margin-top: 4rem; }

.ab-intro__visual { position: absolute; left: 85.4rem; top: 14rem; width: 72rem; height: 66rem; }
/* Large image – cut top-left (55 × 48) and bottom-right (56 × 56) */
.ab-intro__img { position: absolute; left: 12rem; top: 0; width: 56rem; height: 60rem; overflow: hidden;
	clip-path: polygon(5.5rem 0, 100% 0, 100% calc(100% - 5.6rem), calc(100% - 5.6rem) 100%, 0 100%, 0 4.8rem); }
.ab-intro__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.ab-intro__visual:hover .ab-intro__img img { transform: scale(1.05); }
.ab-intro__small { position: absolute; left: 0; top: 46rem; width: 24rem; height: 20rem; z-index: 2; box-shadow: 0 2.4rem 4.8rem rgba(5, 20, 51, .28); will-change: transform; }
.ab-intro__small img { width: 100%; height: 100%; object-fit: cover; }
.ab-intro__card { position: absolute; left: 38.7rem; top: 4rem; z-index: 2; display: flex; flex-direction: column; gap: .6rem; padding: 2.2rem 2.4rem; border: 1px solid #fff; border-radius: 1.6rem; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2rem 4rem rgba(5, 20, 51, .12); white-space: nowrap; will-change: transform; }
.ab-intro__card-text { font-family: var(--f-head); font-weight: 600; font-size: max(2rem, 15px); line-height: 2.6rem; letter-spacing: -.01em; color: var(--text-strong); }

/* ---------- 03 Stats over image ---------- */
.ab-stats { position: relative; padding: 13.85rem 0 13.85rem 23.4rem; overflow: hidden; isolation: isolate; color: var(--text-strong); }
.ab-stats__bg { position: absolute; inset: -8% 0; z-index: -2; }
.ab-stats__bg img { width: 100%; height: 100%; object-fit: cover; }
.ab-stats__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 20, 42, .55), rgba(6, 20, 42, .1)); }
.ab-stats__card { width: 76rem; padding: 4rem 6.4rem 4.8rem; background: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ab-stat { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 2.8rem 0; border-bottom: 1px solid rgba(0, 0, 0, .1); font-family: var(--f-head); font-weight: 600; white-space: nowrap; }
.ab-stat::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); }
.ab-stat:hover::after { transform: scaleX(1); }
.ab-stat dt { font-size: max(2.6rem, 18px); line-height: 3.2rem; letter-spacing: -.015em; opacity: .55; transition: opacity .4s, transform .6s var(--ease-out); }
.ab-stat:hover dt { opacity: 1; transform: translateX(.8rem); }
.ab-stat dd { margin: 0; font-size: 7.6rem; line-height: 8rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: color .4s; }
.ab-stat:hover dd { color: var(--orange); }
.ab-stats__text { width: 52rem; margin-top: 2.8rem; font-size: var(--t-body-lg); line-height: 2.8rem; }

/* ---------- 04 Team ---------- */
.ab-team { padding: 14rem 0 15rem; color: #fff;
	background: radial-gradient(51.84rem 52.3rem at 17.28rem 94.14rem, rgba(110, 194, 227, .08), transparent),
		radial-gradient(77.76rem 52.3rem at 86.4rem 0, rgba(249, 112, 20, .12), transparent), var(--canvas); }
.ab-team .eyebrow { margin-bottom: 1.2rem; }
.ab-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; margin-top: 7.2rem; }
.team-card__photo { position: relative; height: 36rem; overflow: hidden; isolation: isolate;
	clip-path: polygon(4.44rem 0, 100% 0, 100% 100%, 0 100%, 0 3.6rem);
	background: linear-gradient(131deg, #142b4d 0%, #0a1f3b 71%); }
.team-card--accent .team-card__photo { background: linear-gradient(131deg, rgba(249, 112, 20, .9) 0%, #0a1f3b 71%); }
/* Hover: a brighter gradient fades in over the base one */
.team-card__photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(131deg, rgba(249, 112, 20, .55) 0%, rgba(10, 31, 59, 0) 60%); opacity: 0; transition: opacity .7s var(--ease-out); }
.team-card:hover .team-card__photo::before { opacity: 1; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.team-card:hover .team-card__photo img { transform: scale(1.08); }
.team-card__initials { position: absolute; left: 0; right: 0; top: 12.7rem; text-align: center; font-family: var(--f-head); font-weight: 600; font-size: 9.6rem; line-height: 10.6rem; letter-spacing: -.03em; opacity: .25; transition: opacity .6s, transform .9s var(--ease-out); }
.team-card:hover .team-card__initials { opacity: .45; transform: scale(1.08); }
.team-card__soon { position: absolute; left: 0; right: 0; top: 32rem; text-align: center; font-size: var(--t-caption); line-height: 1.6rem; opacity: .6; }
.team-card__role { margin-top: 2.8rem; }
.team-card__name { margin-top: .6rem; font-size: max(2.6rem, 19px); line-height: 3.2rem; letter-spacing: -.015em; transition: color .4s; }
.team-card:hover .team-card__name { color: var(--orange); }
.team-card__text { width: 30.7rem; max-width: 100%; margin-top: .8rem; font-size: var(--t-body); line-height: 2.4rem; color: var(--text-muted-inv); }

/* ---------- 05 Values ---------- */
.ab-values { padding: 14rem 0 15rem; color: #fff; background: radial-gradient(60.48rem 57rem at 155.52rem 47.5rem, rgba(249, 112, 20, .1), transparent), var(--canvas); }
.ab-values__list { margin-top: 4rem; }
.value-row { position: relative; display: grid; grid-template-columns: 12rem 62rem 52rem 1fr; align-items: center; height: 15rem; isolation: isolate; }
/* Bottom rule – turns orange from the left on hover */
.value-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--orange) 50%, var(--line-inv) 50%) 100% 0 / 200% 100% no-repeat; transition: background-position .8s var(--ease-out); }
.value-row:hover::after { background-position: 0 0; }
/* Orange wash that sweeps in on hover (the “Proven” state in Figma) */
.value-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(249, 112, 20, .18), rgba(249, 112, 20, 0)); clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--ease-io); }
.value-row:hover::before { clip-path: inset(0 0 0 0); }
.value-row__n { font-family: var(--f-head); font-weight: 600; font-size: max(2.6rem, 18px); line-height: 3.2rem; letter-spacing: -.015em; color: var(--orange); transition: transform .6s var(--ease-out); }
.value-row:hover .value-row__n { transform: translateX(2.4rem); }
.value-row__title { font-size: 7.2rem; line-height: 7.9rem; letter-spacing: -.03em; opacity: .85; white-space: nowrap; transition: opacity .4s, transform .8s var(--ease-out); }
.value-row:hover .value-row__title { opacity: 1; }
.value-row__text { width: 52rem; font-size: var(--t-body-lg); line-height: 2.8rem; color: var(--text-muted-inv); transition: color .4s; }
.value-row:hover .value-row__text { color: #fff; }
.value-row__arrow { justify-self: end; width: 2.4rem; height: 2.4rem; margin-right: .7rem; transition: transform .6s var(--ease-out); }
.value-row__arrow svg { width: 100%; height: 100%; overflow: visible; }
.value-row__arrow path { transition: stroke .4s, stroke-opacity .4s; }
.value-row:hover .value-row__arrow { transform: translate(.4rem, -.4rem); }
.value-row:hover .value-row__arrow path { stroke: var(--orange); stroke-opacity: 1; }

/* ---------- 06 Made in Britain ---------- */
.ab-britain { position: relative; height: 77.5rem; overflow: hidden; color: #fff;
	background: radial-gradient(69.12rem 69.75rem at 146.88rem 38.75rem, rgba(110, 194, 227, .1), transparent),
		radial-gradient(69.12rem 69.75rem at 25.92rem 38.75rem, rgba(249, 112, 20, .3), transparent), var(--canvas); }
.ab-britain__media { position: absolute; left: 85.8rem; top: 15rem; width: 76rem; height: 47.5rem; }
.ab-britain__img { width: 100%; height: 100%; overflow: hidden; }
.ab-britain__img img { width: 100%; height: 100%; object-fit: cover; }
.ab-britain__copy { position: absolute; left: var(--gutter); top: 20.45rem; width: 70rem; z-index: 2; }
.ab-britain__logo { width: 36rem; height: 9rem; }
.ab-britain__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.ab-britain__title { margin-top: 4rem; font-size: 6rem; line-height: 6.6rem; letter-spacing: -.03em; }
.ab-britain__text { width: 56rem; margin-top: 2rem; font-size: var(--t-body-lg); line-height: 2.8rem; color: var(--text-muted-inv); }
.ab-britain__glass { position: absolute; left: 79.8rem; top: 35.5rem; z-index: 3; width: 52rem; padding: 4rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); transition: border-color .5s, background .5s; }
.ab-britain__glass:hover { border-color: rgba(249, 112, 21, .45); background: rgba(255, 255, 255, .11); }
.ab-britain__list { display: flex; flex-direction: column; gap: 1.8rem; }
.ab-britain__list li { display: flex; align-items: center; gap: 1.4rem; font-family: var(--f-head); font-weight: 600; font-size: max(2rem, 16px); line-height: 2.6rem; letter-spacing: -.01em; transition: transform .6s var(--ease-out); }
.ab-britain__list li:hover { transform: translateX(.8rem); }
/* Tick is 18 × 13 in Figma; the svg includes its stroke overflow */
.ab-britain__tick { display: block; width: 1.8rem; height: 1.3rem; flex: none; }
.ab-britain__tick svg { width: 2.016rem; height: 1.618rem; max-width: none; margin: -.1rem 0 0 -.1rem; overflow: visible; }

/* ==========================================================================
   About – mobile
   ========================================================================== */
@media (max-width: 1023px) {
	.ab-intro { height: auto; padding: 8rem 2rem 6rem; }
	.ab-intro__copy, .ab-intro__visual { position: relative; left: auto; top: auto; width: auto; }
	.ab-intro__title { width: auto; font-size: clamp(32px, 8.4vw, 48px); line-height: 1.15; }
	.ab-intro__text { width: auto; font-size: 17px; line-height: 1.65; }
	.ab-founders { flex-direction: column; gap: 1.6rem; }
	.ab-intro__visual { height: auto; aspect-ratio: 720 / 660; margin-top: 5.6rem; }
	.ab-intro__img { left: 16.7%; width: 77.8%; height: 90.9%; }
	.ab-intro__small { top: 69.7%; width: 33.3%; height: 30.3%; }
	.ab-intro__card { left: auto; right: 0; top: 6%; padding: 1.4rem 1.6rem; white-space: normal; max-width: 70%; }
	.ab-intro__card-text { font-size: 14px; line-height: 1.35; }
	.ab-intro__card-text br { display: none; }

	.ab-stats { padding: 8rem 2rem; }
	.ab-stats__card { width: 100%; padding: 2.4rem 2.4rem 3.2rem; }
	.ab-stat { padding: 2rem 0; gap: 1.6rem; white-space: normal; }
	.ab-stat dt { font-size: 16px; line-height: 1.3; }
	.ab-stat dd { font-size: clamp(36px, 10vw, 52px); line-height: 1.1; }
	.ab-stats__text { width: auto; }

	.ab-team { padding: 8rem 0; }
	.ab-team__grid { grid-template-columns: 1fr 1fr; gap: 3.2rem 1.6rem; margin-top: 4rem; }
	.team-card__photo { height: auto; aspect-ratio: 317 / 360; clip-path: polygon(3.2rem 0, 100% 0, 100% 100%, 0 100%, 0 2.6rem); }
	.team-card__initials { top: 50%; transform: translateY(-60%); font-size: 56px; line-height: 1; }
	.team-card:hover .team-card__initials { transform: translateY(-60%) scale(1.08); }
	.team-card__soon { top: auto; bottom: 1.6rem; }
	.team-card__role { margin-top: 1.8rem; }
	.team-card__name { font-size: 19px; line-height: 1.25; }
	.team-card__text { width: auto; font-size: 14px; }

	.ab-values { padding: 8rem 0; }
	.ab-values__list { margin-top: 2.4rem; }
	.value-row { grid-template-columns: 4.8rem 1fr auto; grid-template-areas: "n t a" ". p p"; height: auto; padding: 2.8rem 0; row-gap: 1rem; }
	.value-row__n { grid-area: n; font-size: 18px; }
	.value-row__title { grid-area: t; font-size: clamp(36px, 10vw, 52px); line-height: 1.1; }
	.value-row__text { grid-area: p; width: auto; font-size: 15px; line-height: 1.6; }
	.value-row__arrow { grid-area: a; }
	.value-row:hover .value-row__n { transform: none; }

	.ab-britain { height: auto; padding: 8rem 2rem; display: flex; flex-direction: column; gap: 4rem; }
	.ab-britain__media, .ab-britain__copy, .ab-britain__glass { position: relative; left: auto; top: auto; width: auto; }
	.ab-britain__media { order: 2; width: 100%; height: auto; aspect-ratio: 760 / 475; }
	.ab-britain__glass { order: 3; margin-top: -10rem; margin-left: 2rem; padding: 2.8rem 2.4rem; }
	.ab-britain__logo { width: 24rem; height: 6rem; }
	.ab-britain__title { margin-top: 2.8rem; font-size: clamp(34px, 8.6vw, 52px); line-height: 1.1; }
	.ab-britain__text { width: auto; }
	.ab-britain__list li { font-size: 16px; }
}