/* ==========================================================================
   about.css — About page template (page-about.php).
   Figma: node 1025:29377, 1728 wide. Section heights 925 / 1168 / 920 / 778 /
   1354 / 778. Gutter standardised on --gutter (70) like the home page.
   ========================================================================== */

:root {
	--about-lilac: #D9C8FF;
	--about-lime:  #D3E66A;
	--about-red:   #FF2D55;
}

/* ---------- Header over the purple hero ---------- */
.page-template-page-about .logo--light { display: none; }
.page-template-page-about .site-header:not(.is-fixed) .logo--default { display: none; }
.page-template-page-about .site-header:not(.is-fixed) .logo--light { display: inline-flex; }
.page-template-page-about .site-header:not(.is-fixed) .logo__text { color: #fff; }
.page-template-page-about .site-header:not(.is-fixed) .logo__text b { color: #fff; }
.page-template-page-about .site-header:not(.is-fixed) .social__link { border-color: #fff; color: #fff; }
.page-template-page-about .site-header:not(.is-fixed) .social__link:hover { background: #fff; color: var(--c-brand); }
.page-template-page-about .site-header:not(.is-fixed) .nav-toggle { background: #fff; color: var(--c-brand); }

/* ---------- Shared bits ---------- */
.about-spark { display: block; width: 100%; height: 100%; }
.sec-head--right { justify-content: flex-end; }
.sec-head--right .sec-head__main { flex: 0 1 auto; text-align: right; }
.sec-head--right .sec-rule { margin-left: auto; transform-origin: right; }

/* ---------- 1. Hero (h925) ---------- */
.about-hero {
	position: relative; overflow: hidden; color: #fff; background: var(--c-brand);
	padding: calc(var(--header-top) + var(--header-h) + clamp(1.5rem, 3vw, 3.25rem)) 0 clamp(6rem, 9vw, 10rem);
	min-height: clamp(560px, 53.5vw, 925px);
	display: flex; align-items: center;
}
/* Centred stack: the cut-out sits on the purple with no card, and the headline
   rides up over its lower edge. */
.about-hero__inner {
	position: relative; width: 100%;
	display: flex; flex-direction: column; align-items: center; text-align: center;
}
.about-hero__visual { position: relative; width: clamp(260px, 50vw, 880px); }
.about-hero__cut { margin: 0; }
.about-hero__cut img { display: block; width: 100%; height: auto; }
.about-hero__cut .wz-ph {
	aspect-ratio: 1600 / 791; min-height: 0; border-radius: 24px;
	background: rgba(255, 255, 255, .14); color: #fff; font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 500;
}
.about-hero__copy { position: relative; z-index: 2; max-width: 900px; margin-top: calc(-1 * clamp(1rem, 3.4vw, 60px)); }
/* The headline crosses the photo, whose lower third is mid-tone with patches of near-white
   clothing — the soft shadow keeps white type readable wherever it lands. */
.about-hero__title { font-size: clamp(2.75rem, 4.8vw, 5.25rem); font-weight: 500; line-height: 1.04; letter-spacing: -.02em; text-shadow: 0 3px 22px rgba(30, 14, 78, .42); }
.about-hero__intro { margin: clamp(1rem, 1.9vw, 2rem) auto 0; max-width: 56ch; font-size: var(--fs-body-l); line-height: 1.58; }

.about-hero__spark { position: absolute; color: var(--c-brand); pointer-events: none; }
.about-hero__spark .about-spark path { stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; }
.about-hero__spark--left { right: calc(100% + clamp(.5rem, 2.6vw, 46px)); bottom: clamp(1rem, 7vw, 124px); width: clamp(48px, 6vw, 104px); height: clamp(58px, 7.3vw, 126px); }
.about-hero__spark--right { left: calc(100% + clamp(.5rem, 2.2vw, 38px)); top: clamp(1rem, 5vw, 86px); width: clamp(34px, 3.9vw, 68px); height: clamp(42px, 4.8vw, 83px); }
.about-hero__spark .about-spark { animation: about-twinkle 3.2s ease-in-out infinite; }
.about-hero__spark--right .about-spark { animation-delay: 1.1s; }
@keyframes about-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.82) rotate(12deg); opacity: .78; } }

/* The white arc along the base: a half-ellipse the full width of the section. */
.about-hero__curve {
	position: absolute; left: -2%; right: -2%; bottom: -1px; height: clamp(40px, 5.5vw, 95px);
	background: var(--c-surface); border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none;
}

/* ---------- 2. Vision + Mission (h1168) ---------- */
.about-vm { padding: clamp(4rem, 7.75vw, 134px) 0 clamp(3rem, 4.75vw, 82px); }
.about-vm .sec-head { margin-bottom: clamp(1.5rem, 2.7vw, 46px); }
.about-vm .sec-head--right { margin-top: clamp(1.5rem, 2.7vw, 47px); margin-bottom: 0; }
.about-vm__title { font-size: var(--fs-h3); font-weight: 500; line-height: 1.22; }

.about-vm__bubbles { position: relative; aspect-ratio: 1601 / 673; }
.about-vm__shapes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.about-vm__shape { stroke: var(--c-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.about-vm__shape--purple { fill: var(--c-brand); filter: drop-shadow(5px 6px 0 var(--c-ink)); }
.about-vm__shape--outline { fill: var(--c-surface); }

.about-vm__vision, .about-vm__mission { position: absolute; margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(.95rem, 1.5vw, 1.625rem); line-height: 1.6; }
.about-vm__vision { left: 5.1%; top: 40%; width: 36%; color: #fff; }
.about-vm__vision p { padding-left: 1.2em; }
.about-vm__mission { right: 4.9%; top: 22%; width: 28%; text-align: right; color: var(--c-ink); }
.about-vm__quote { display: block; font-family: var(--f-display); font-weight: 700; font-size: 2.2em; line-height: .6; }
.about-vm__quote--open { position: absolute; left: 0; top: .15em; }
.about-vm__quote--close { margin-top: .5em; color: var(--c-brand); }

/* ---------- 3. Why trust us — face-down cards (h920) ---------- */
.about-trust { padding: clamp(4rem, 9.8vw, 170px) 0 clamp(4rem, 9.4vw, 163px); }
.about-trust .sec-head { margin-bottom: clamp(3rem, 5.9vw, 102px); }
.about-trust .sec-title { font-size: var(--fs-h3); max-width: 12ch; line-height: 1.22; }
.about-trust .sec-rule { width: clamp(220px, 34.6vw, 598px); }
.about-trust .sec-lead { flex-basis: 699px; font-size: var(--fs-body-l); font-weight: 400; line-height: 1.33; }

.flip-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1rem, 3.6vw, 62px); }
.flip { position: relative; aspect-ratio: 261 / 336; perspective: 1400px; outline: none; cursor: pointer; }
.flip__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .85s var(--ease-out); }
.flip:hover .flip__inner, .flip:focus-visible .flip__inner, .flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face {
	position: absolute; inset: 0; border-radius: 14px; background: var(--c-white);
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	box-shadow: 0 18px 40px -22px rgba(20, 20, 20, .35);
}
.flip__front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26% 12% 12%; }
.flip:focus-visible .flip__front { outline: 2px solid var(--c-brand); outline-offset: 4px; }

/* Card back: a playing-card border of squares, a fine lattice fill, the mark on a white tile. */
.flip__pattern {
	position: absolute; inset: 9%; border-radius: 4px;
	border: 12px solid transparent;
	border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2236%22%20height=%2236%22%20viewBox=%220%200%2036%2036%22%3E%3Cg%20fill=%22%237458D7%22%3E%3Crect%20x=%222%22%20y=%222%22%20width=%227%22%20height=%227%22/%3E%3Crect%20x=%2214%22%20y=%222%22%20width=%227%22%20height=%227%22/%3E%3Crect%20x=%2226%22%20y=%222%22%20width=%227%22%20height=%227%22/%3E%3Crect%20x=%222%22%20y=%2214%22%20width=%227%22%20height=%227%22/%3E%3Crect%20x=%2226%22%20y=%2214%22%20width=%227%22%20height=%227%22/%3E%3Crect%20x=%222%22%20y=%2226%22%20width=%227%22%20height=%227%22/%3E%3Crect%20x=%2214%22%20y=%2226%22%20width=%227%22%20height=%227%22/%3E%3Crect%20x=%2226%22%20y=%2226%22%20width=%227%22%20height=%227%22/%3E%3C/g%3E%3C/svg%3E") 12 round;
	background:
		repeating-linear-gradient(45deg, rgba(116, 88, 215, .32) 0 1px, transparent 1px 6px),
		repeating-linear-gradient(-45deg, rgba(116, 88, 215, .32) 0 1px, transparent 1px 6px),
		var(--c-white);
	background-clip: padding-box;
	display: grid; place-items: center;
}
.flip__pattern::before { content: ""; position: absolute; inset: 2px; border: 1.5px solid var(--c-brand); pointer-events: none; }
.flip__mark { display: grid; place-items: center; width: 28%; aspect-ratio: 74 / 88; background: var(--c-white); color: var(--c-brand); border: 1.5px solid var(--c-brand); }
.flip__mark-svg, .flip__mark-img { width: 70%; height: auto; object-fit: contain; }

.flip__icon { display: grid; place-items: center; width: 54px; height: 54px; color: var(--c-ink); }
.flip__icon .icon { width: 2.6rem; height: 2.6rem; stroke-width: 1.3; }
.flip__title { margin-top: 1.25rem; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.75rem); line-height: 1.15; }
.flip__text { margin-top: .9rem; font-size: .95rem; line-height: 1.4; color: #4a4a4a; }

/* ---------- 4. Checklist (h778) ---------- */
.about-check { padding: clamp(3rem, 5.9vw, 102px) 0; }
.about-check__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 37.5vw, 648px); gap: clamp(2rem, 6vw, 110px); align-items: start; }
.about-check__copy { padding-top: clamp(1rem, 3.9vw, 68px); }
.about-check__copy .sec-head { margin-bottom: clamp(1.5rem, 4.1vw, 70px); }
.about-check__title { font-size: var(--fs-h3); max-width: 12ch; line-height: 1.22; }
.about-check__copy .sec-rule { width: clamp(220px, 34.6vw, 598px); }
.about-check__text { max-width: 503px; font-size: var(--fs-body-l); line-height: 1.5; }

.about-check__card {
	background: var(--c-white); border-radius: 24px; padding: clamp(1.25rem, 2.9vw, 50px) 0 clamp(1.5rem, 3.5vw, 60px);
	box-shadow: 0 30px 70px -40px rgba(20, 20, 20, .35), 0 2px 0 rgba(0, 0, 0, .04);
}
.check-list { list-style: none; margin: 0; padding: 0; }
.check-row {
	display: grid; grid-template-columns: 56px minmax(0, 1fr) 67px; align-items: center; column-gap: clamp(1rem, 2vw, 34px);
	padding: clamp(1rem, 1.56vw, 27px) clamp(1.25rem, 2.9vw, 50px) clamp(1rem, 1.56vw, 27px) clamp(1.25rem, 2.8vw, 48px);
}
.check-row__emoji { font-size: clamp(1.6rem, 2vw, 2.2rem); line-height: 1; text-align: center; }
.check-row__label { position: relative; font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.75rem); line-height: 1.3; }
.check-row + .check-row .check-row__label::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * clamp(1rem, 1.56vw, 27px)); max-width: 349px; height: 1px; background: var(--c-line); }

.toggle {
	position: relative; display: block; width: 67px; height: 40px; border-radius: 999px; background: #D9D9D9;
	border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; outline: none;
	transition: background-color .35s ease, box-shadow var(--dur-fast) ease;
}
.toggle:hover { box-shadow: 0 0 0 4px rgba(116, 88, 215, .15); }
.toggle:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c-brand); }
.toggle__knob {
	position: absolute; top: 5px; left: 5px; width: 30px; height: 30px; border-radius: 50%; background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
	transition: transform .45s var(--ease-bounce);
}
.check-row.is-on .toggle { background: var(--c-brand); }
.check-row.is-on .toggle__knob { transform: translateX(27px); }
.check-row { transition-delay: calc(var(--i, 0) * 140ms); }
.check-row .toggle, .check-row .toggle__knob { transition-delay: calc(var(--i, 0) * 140ms); }

/* ---------- 5. Team (h1354) ---------- */
.about-team { padding: clamp(4rem, 8.4vw, 145px) 0 clamp(3rem, 5.3vw, 92px); overflow-x: clip; }
.about-team .sec-head { margin-bottom: clamp(2.5rem, 6.1vw, 106px); }
.about-team__title { font-size: var(--fs-h3); line-height: 1.25; }
.about-team .sec-rule { width: clamp(200px, 21.4vw, 370px); }

.team-row {
	list-style: none; margin: 0; padding: 0 0 1.5rem;
	display: flex; gap: clamp(1.25rem, 3.6vw, 62px);
	overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab;
	margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter);
}
.team-row::-webkit-scrollbar { display: none; }
.team-row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.team-card {
	flex: 0 0 clamp(300px, 31.9vw, 551px); scroll-snap-align: start;
	background: var(--c-white); border: 1.5px solid var(--c-ink); border-radius: clamp(24px, 2.3vw, 40px);
	padding: clamp(14px, 1.3vw, 22px) clamp(24px, 2.6vw, 45px) clamp(18px, 1.7vw, 29px) clamp(24px, 2.3vw, 40px);
	box-shadow: 0 24px 50px -36px rgba(20, 20, 20, .4);
	transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
}
.team-card:hover { transform: translateY(-6px); box-shadow: 0 36px 60px -36px rgba(20, 20, 20, .45); }
.team-card__photo { margin: 0 0 0 clamp(0px, .3vw, 5px); aspect-ratio: 1; border-radius: clamp(16px, 1.4vw, 24px); overflow: hidden; background: var(--c-tint); }
.team-card__photo img, .team-card__photo .wz-ph { width: 100%; height: 100%; object-fit: cover; }

.team-card__panel {
	position: relative; margin-top: clamp(1.25rem, 2.1vw, 36px);
	border: 2px solid #000; border-radius: clamp(16px, 1.4vw, 24px); background: var(--panel, var(--about-lilac));
	padding: clamp(1.5rem, 2.6vw, 45px) clamp(1rem, 1.45vw, 25px) clamp(1rem, 1.45vw, 25px);
	box-shadow: 6px 6px 0 #000;
}
.team-card--lilac  { --panel: var(--about-lilac); }
.team-card--pink   { --panel: var(--c-pink); }
.team-card--red    { --panel: var(--about-red); }
.team-card--yellow { --panel: var(--c-yellow); }
.team-card--green  { --panel: var(--c-green); }
.team-card--blue   { --panel: var(--c-blue); }
.team-card__name { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1.85vw, 2rem); line-height: 1.2; color: var(--c-ink); }
.team-card__role { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.9rem, 3.15vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; margin-top: .1em; }
.team-card__bio { margin-top: clamp(.75rem, 1.2vw, 20px); font-size: var(--fs-body-l); line-height: 1.35; }
.team-card__btn {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	margin-top: clamp(1rem, 1.6vw, 28px); min-height: clamp(56px, 4.4vw, 76px); padding: 0 .9rem 0 clamp(1.25rem, 2.3vw, 40px);
	border: 2px solid #000; border-radius: 999px; background: var(--c-white); color: var(--c-ink);
	font-family: var(--f-display); font-weight: 500; font-size: clamp(1.1rem, 1.4vw, 1.5rem);
	transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.team-card__btn-arrow { display: grid; place-items: center; width: clamp(38px, 2.8vw, 48px); height: clamp(38px, 2.8vw, 48px); border: 2px solid #000; border-radius: 50%; transition: transform var(--dur-fast) var(--ease-out); }
.team-card__btn-arrow .icon { width: 1.1rem; height: 1.1rem; }
a.team-card__btn:hover { background: var(--c-ink); color: #fff; }
a.team-card__btn:hover .team-card__btn-arrow { border-color: #fff; transform: rotate(45deg); }

/* ---------- 6. Closing CTA (h778) ---------- */
.about-cta { padding: clamp(3rem, 6vw, 105px) 0 clamp(3rem, 6vw, 104px); overflow-x: clip; }
.about-cta__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 25.2vw, 435px); gap: clamp(2rem, 5vw, 80px); align-items: center; padding-right: clamp(0px, 9vw, 155px); }
.about-cta__copy { position: relative; padding-left: clamp(0px, 2.6vw, 45px); }
.about-cta__tag {
	display: block; width: fit-content; padding: clamp(.6rem, 1.6vw, 28px) clamp(1.5rem, 3.2vw, 56px);
	border-radius: clamp(18px, 1.6vw, 28px); background: var(--tag, var(--about-lilac)); color: var(--c-ink);
	font-family: var(--f-display); font-weight: 500; font-size: var(--fs-hero); line-height: 1.1; letter-spacing: -.01em;
	box-shadow: 0 10px 0 -4px rgba(0, 0, 0, .08);
	transform-origin: left center;
}
.about-cta__tag--1 { --tag: var(--about-lilac); rotate: -7deg; margin-left: clamp(1rem, 2.1vw, 36px); }
.about-cta__tag--2 { --tag: var(--c-pink); rotate: -3deg; margin-top: clamp(.5rem, 1.2vw, 20px); }
.about-cta__row { display: flex; align-items: center; gap: clamp(1rem, 2.3vw, 40px); margin-top: clamp(.25rem, .9vw, 16px); margin-left: clamp(.75rem, 1.2vw, 21px); }
.about-cta__tag--3 { --tag: var(--about-lime); rotate: -5deg; }
.about-cta__tag.reveal.is-in { transform: none; }
.about-cta__btn {
	display: grid; place-items: center; width: clamp(72px, 5.7vw, 98px); height: clamp(48px, 3.7vw, 64px);
	border: 2px solid var(--c-ink); border-radius: 999px; background: var(--c-white); color: var(--c-brand);
	box-shadow: 0 5px 0 rgba(0, 0, 0, .18); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.about-cta__btn .icon { width: 1.75rem; height: 1.75rem; stroke-width: 2.2; }
.about-cta__btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.about-cta__scribble { position: absolute; left: clamp(300px, 43vw, 737px); bottom: clamp(-10px, -1.5vw, -26px); width: clamp(70px, 7.3vw, 126px); height: auto; color: var(--c-ink); }

.about-cta__phones { position: relative; aspect-ratio: 435 / 569; }
.about-cta__phone { position: absolute; margin: 0; width: 58.6%; aspect-ratio: 255 / 516; border-radius: clamp(24px, 2.3vw, 40px); overflow: hidden; background: var(--c-tint); box-shadow: 0 30px 60px -30px rgba(20, 10, 60, .5); }
.about-cta__phone img, .about-cta__phone .wz-ph { width: 100%; height: 100%; object-fit: cover; }
.about-cta__phone--back { left: 0; top: 0; }
.about-cta__phone--front { left: 41.4%; top: 9.3%; }
.about-cta__spark { position: absolute; right: clamp(-20px, -1.5vw, -26px); top: clamp(-60px, -4.6vw, -80px); width: clamp(90px, 13vw, 225px); height: clamp(90px, 13vw, 225px); color: var(--c-ink); pointer-events: none; }
.about-cta__spark .about-spark path { fill: none; stroke: currentColor; stroke-width: .9; stroke-linejoin: round; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.about-hero { min-height: 0; padding-bottom: clamp(7rem, 16vw, 9rem); }
	.about-hero__visual { width: min(100%, 560px); }
	.about-trust .sec-lead { flex-basis: auto; text-align: left; }
	.flip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.about-check__grid { grid-template-columns: 1fr; }
	.about-check__copy { padding-top: 0; }
	.about-check__card { max-width: 648px; }
	.about-cta__inner { grid-template-columns: 1fr; padding-right: 0; }
	.about-cta__phones { max-width: 435px; }
	.about-cta__scribble { display: none; }
}
@media (max-width: 900px) {
	/* The speech bubbles become two stacked cards. */
	.about-vm__bubbles { aspect-ratio: auto; display: grid; gap: 1.25rem; }
	.about-vm__shapes { display: none; }
	.about-vm__vision, .about-vm__mission { position: static; width: auto; padding: 1.75rem 1.5rem; border: 2px solid var(--c-ink); border-radius: 20px; font-size: 1.125rem; }
	.about-vm__vision { background: var(--c-brand); box-shadow: 5px 6px 0 var(--c-ink); position: relative; left: auto; top: auto; }
	.about-vm__vision p { padding-left: 1.4em; }
	.about-vm__quote--open { left: 1.5rem; top: 1.6rem; }
	.about-vm__mission { text-align: left; }
	.about-vm .sec-head--right { justify-content: flex-start; }
	.about-vm .sec-head--right .sec-head__main { text-align: left; }
	.about-vm .sec-head--right .sec-rule { margin-left: 0; transform-origin: left; }
}
@media (max-width: 640px) {
	.about-hero__spark { display: none; }   /* no room beside the cut-out; they would clip */
	.flip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.check-row { grid-template-columns: 40px minmax(0, 1fr) 56px; }
	.toggle { width: 56px; height: 34px; }
	.toggle__knob { width: 24px; height: 24px; }
	.check-row.is-on .toggle__knob { transform: translateX(22px); }
	.team-card { flex-basis: 84vw; }
	.about-cta__tag--1, .about-cta__tag--2, .about-cta__tag--3 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
}
@media (hover: none) {
	/* No hover on touch: a tap flips (JS toggles .is-flipped). */
	.flip:hover .flip__inner { transform: none; }
	.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
	.flip__inner, .toggle, .toggle__knob, .team-card { transition: none; }
	.about-hero__spark .about-spark { animation: none; }
}