/* ==========================================================================
   Page: About Us
   Figma: About EN D1920 (4161:40089) — exact node values. Hero white ·
   approach #F3F4F6 (navy/teal 36px cards, ice #A8D9FF, trust-5 #EDF9FF) ·
   team white · security timeline · vs section mint-tint · join navy card.
   RTL: logical; timeline alternation flips automatically.
   ========================================================================== */

/* ---- Hero ---- */
.mada-about-hero { background-color: var(--color-white); padding-block: var(--pad-banner-block) var(--pad-banner-block); }
.mada-about-hero__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-13);
	align-items: center;
}
.mada-about-hero__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.mada-about-hero__text h1 {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-banner);                    /* 60 */
	line-height: var(--lh-banner);                  /* 72 */
	color: var(--color-black);
}
.mada-about-hero__line { display: block; }
.mada-about-hero__hl { color: var(--color-primary); } /* AR: highlighted mid-sentence phrase */
.mada-about-hero__text p { margin: 0; font-size: var(--fs-md); line-height: 24px; color: var(--color-neutral-600); max-inline-size: 52ch; }
.mada-about-hero__chips { display: flex; gap: var(--space-4); padding-block-start: var(--space-4); }
.mada-about-hero__chip {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-5);
	border-radius: var(--radius-xl);             /* 12 */
	background-color: var(--glass-highlight-dark);
	border: var(--border-width-thin) solid var(--glass-border-brand);
	box-shadow: 0 10px 40px -10px rgba(0, 178, 175, 0.15);
}
.mada-about-hero__chip strong { font-weight: var(--fw-bold); font-size: var(--fs-4xl); line-height: var(--lh-2xl); color: #006B69; }
.mada-about-hero__chip em { font-style: normal; font-weight: var(--fw-semibold); font-size: var(--fs-lg); line-height: var(--lh-md); color: var(--color-neutral-500); }

.mada-about-hero__visual { flex: 1 1 0; min-inline-size: 0; position: relative; inline-size: 100%; }
.mada-about-hero__visual img { inline-size: 100%; border-radius: var(--radius-3xl); display: block; }
/* Licence card removed — hidden in the latest Figma (4161:40114). */

/* ---- Approach ---- */
.mada-approach { background-color: var(--color-neutral-100); padding-block: var(--pad-section-top) var(--pad-section-bottom); }
.mada-approach__inner { max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--grid-margin); display: flex; flex-direction: column; gap: var(--space-11); }
.mada-approach__head { text-align: center; }
.mada-approach__head h2 { margin: 0 0 var(--space-4); font-weight: var(--fw-bold); font-size: var(--fs-section); line-height: var(--lh-section); color: #071214; }
.mada-approach__head p { margin: 0; font-size: var(--fs-md); line-height: 24px; color: var(--color-neutral-600); }

.mada-approach__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.mada-approach__card {
	border-radius: var(--radius-3xl);
	/* S35: "on mobile and tablet the font sizes and card sizes should be
	   smaller" — 32 below the desktop band, 40 from 1025 up. */
	padding: var(--space-9);                     /* 32 */
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: flex-start;
	/* Grid items default to min-width:auto, so a long heading pushed these
	   past their fr track and overflowed the row at 640-1024. */
	min-inline-size: 0;
}

@media (min-width: 1025px) {
	.mada-approach__card { padding: var(--space-11); }   /* 40 */
}
.mada-approach__card h3 { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-4xl); line-height: 40px; }
.mada-approach__card p { margin: 0; font-size: var(--fs-sm); line-height: 20px; }
.mada-approach__card--navy { background-color: var(--color-vault-navy); color: rgba(245,245,246,0.8); }
.mada-approach__card--navy h3 { color: var(--color-white); }
.mada-approach__card--teal { background-color: var(--color-primary); color: rgba(245,245,246,0.85); }
.mada-approach__card--teal h3 { color: var(--color-white); }
.mada-approach__card--center { align-items: center; text-align: center; justify-content: center; }
.mada-approach__card--ice { background-color: var(--color-ice-credit-dark); color: var(--color-neutral-800); } /* #A8D9FF */
.mada-approach__card--ice h3 { color: var(--color-black); }
.mada-approach__card--light { background-color: var(--color-trust-5); color: var(--color-neutral-700); } /* #EDF9FF */
.mada-approach__card--light h3 { color: var(--color-secondary); } /* #006EAD */

/* ---- Team ---- */
.mada-team { background-color: var(--color-white); padding-block: var(--pad-section-top) var(--pad-section-bottom); }
/* Round-3 (About, Section 2) — measured on 4407:15896 (1400 frame,
   Leadership Section 1272 wide):
     header block 116 → cards start y=180        gap 64  (was 40)
     Heading 2 72 → subtitle y=88                gap 16  (was 12)
     subtitle box 28 → Paragraph/Large 18/28     (was 16/24) */
.mada-team__inner { max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--grid-margin); display: flex; flex-direction: column; gap: var(--space-15); }
.mada-team__inner h2 { margin: 0 0 var(--space-5); font-weight: var(--fw-bold); font-size: var(--fs-section); line-height: var(--lh-section); color: var(--color-black); }
.mada-team__inner h2 span { color: var(--color-primary); }
.mada-team__inner header p { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-md); color: var(--color-neutral-600); }
.mada-team__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.mada-team__card { margin: 0; }
/* Card image frame — "Majdi Jarrar's photo is zoomed in unlike the others",
   raised in round 3 and again in round 4. Both rounds were chasing an
   aspect-ratio, and the design does not have one.

   Measured across every About frame in the file, the IMAGE frame is
   width-fluid / height-FIXED per band, so its ratio differs in every frame:

     Mobile  320 / 639        228 x 330   0.691
     Tablet  640              276 x 283   0.975
             699 / 700        306 x 283   1.081
             1024             468 x 283   1.654
     Desktop 1025             436 x 498   0.877
             1399             624 x 498   1.252
             1400             300 x 498   0.602
             1920             366 x 498   0.735   (4161:40275)

   Those frame sizes CANNOT be copied, and this is the trap both rounds fell
   into. In Figma each frame holds a WIDE original — the inner rects are
   891x498, 490x608, 906x506 — so a 468x283 landscape frame still shows a full
   torso; it is only trimming the sides. Every photo Mada has actually
   supplied is already cropped tight: team-1..3 are 496x498 (0.996) and the
   CTO's is 732x996 (0.735). Putting a pre-cropped photo in a 1.654 frame
   throws away 40% of its HEIGHT and leaves a head with no body — worse than
   the bug being fixed.

   So the frame is one ratio at every width, 366 / 498 (0.735) — the desktop
   card from 4161:40275, which is also exactly the CTO's asset ratio:
     - his photo renders with NO crop, i.e. the source Mada sent;
     - the three squares lose 13% off each side, symmetric and centred, which
       keeps their subjects whole;
     - every head lands at the same fraction of its frame (22-27%, against
       22% vs 40% before) — the "unlike the others" complaint.
   Round 3 had pinned this to 496/498, which was right while all four were
   squares; round 4 Mada replaced the CTO's with a real portrait (the UPLOADED
   team-4-v2.jpg is 732x996 — not the 732x735 square still sitting in
   assets/images/about/) and the square frame chopped 26% off its bottom.

   The cost is that tablet cards are taller than the design draws them. That
   is a content limit, not a layout one: it resolves the day Mada supplies the
   wide originals their own Figma uses. See the blockers table. */
.mada-team__card img {
	inline-size: 100%;
	aspect-ratio: 366 / 498;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--radius-2xl);
	display: block;
}
/* Caption geometry from the same frame: Content sits 16 below the image and
   its Heading is inset 20 inline / 8 top → 24 from the image; name → role
   gap 16 (title box 28, date at y=44).  Type: Heading/XSmall Bold 20/28 and
   Label/XSmall SemiBold 12/16 Neutral/500. */
.mada-team__card figcaption { padding-block-start: var(--space-7); padding-inline: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.mada-team__card strong { font-weight: var(--fw-bold); font-size: var(--fs-xl); line-height: var(--lh-md); color: var(--color-black); }
.mada-team__card em { font-style: normal; font-weight: var(--fw-semibold); font-size: var(--fs-xs); line-height: var(--lh-2xs); color: var(--color-neutral-500); }

/* ---- Security + timeline ---- */
.mada-secure { background-color: var(--color-white); padding-block: var(--pad-section-top) var(--pad-section-bottom); }
.mada-secure__inner { max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--grid-margin); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.mada-secure__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: var(--color-mint-10);
	color: var(--color-mint-70);
	border-radius: var(--radius-full);
	padding: var(--space-2) var(--space-5);
	font-size: var(--fs-xs);
	line-height: 16px;
	font-weight: var(--fw-medium);
}
.mada-secure__chip i { inline-size: 8px; block-size: 8px; border-radius: 50%; background-color: var(--color-primary); }
.mada-secure__inner h2 { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-section); line-height: var(--lh-section); color: var(--color-black); }
.mada-secure__sub { margin: 0; font-size: var(--fs-md); line-height: 24px; color: var(--color-neutral-600); max-inline-size: 84ch; }

.mada-timeline {
	list-style: none;
	margin: var(--space-11) 0 0;
	padding: 0;
	position: relative;
	inline-size: 100%;
	max-inline-size: 980px;
	display: flex;
	flex-direction: column;
	gap: var(--space-9);
}
.mada-timeline::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 24px;
	inline-size: 2px;
	background-color: var(--color-mint-25);
}
.mada-timeline__item { position: relative; display: flex; gap: var(--space-6); align-items: flex-start; text-align: start; }
.mada-timeline__node {
	flex: 0 0 auto;
	inline-size: 50px; block-size: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #FFFFFF;
	border: 2px solid var(--color-primary);
	color: var(--color-mint-70);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	position: relative;
	z-index: 1;
}
.mada-timeline__item.is-now .mada-timeline__node { background-color: var(--color-mint-30); color: var(--color-white); }
.mada-timeline__card {
	background-color: var(--color-trust-10);     /* ice card */
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-7);
	max-inline-size: 520px;
}
.mada-timeline__card strong { display: block; font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: 24px; color: var(--color-black); margin-block-end: var(--space-1); }
.mada-timeline__card p { margin: 0; font-size: var(--fs-sm); line-height: 20px; color: var(--color-neutral-600); }

/* ---- VS ---- */
.mada-vs { background-color: #EAF7F7; padding-block: var(--pad-section-top) var(--pad-section-bottom); }
.mada-vs__inner { max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--grid-margin); display: flex; flex-direction: column; gap: var(--space-11); align-items: center; }
.mada-vs__inner h2 { margin: 0; text-align: center; font-weight: var(--fw-bold); font-size: var(--fs-section); line-height: var(--lh-section); color: var(--color-neutral-900); }
.mada-vs__row { display: flex; flex-direction: column; gap: var(--space-7); inline-size: 100%; max-inline-size: 980px; }
.mada-vs__card { border-radius: var(--radius-3xl); padding: var(--space-9); flex: 1 1 0; }
.mada-vs__card--mada { background-color: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-lg); }
/* Figma 4161:40353: 97×40 navy logomark, 48px of air down to the list.
   Brand mark — never mirrored in RTL (AR frame draws it identically). */
.mada-vs__logo { display: flex; margin-block-end: var(--space-13); }
.mada-vs__logo img { block-size: 40px; inline-size: auto; }
.mada-vs__card--trad { background-color: var(--color-white); border: var(--border-width-thin) solid var(--color-neutral-200); }
.mada-vs__card--trad h3 { margin: 0 0 var(--space-6); font-weight: var(--fw-semibold); font-size: var(--fs-3xl); line-height: 1.3; color: var(--color-neutral-400); }
.mada-vs__card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.mada-vs__card li { display: flex; gap: var(--space-4); align-items: flex-start; }
.mada-vs__card li span strong { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-xl); line-height: 28px; }
.mada-vs__card--mada li span em { font-style: normal; font-size: var(--fs-sm); line-height: 20px; color: rgba(245,245,246,0.85); }
.mada-vs__card--trad li span strong { color: var(--color-black); }
.mada-vs__card--trad li span em { font-style: normal; font-size: var(--fs-sm); line-height: 20px; color: var(--color-neutral-600); }
.mada-vs__x { color: var(--color-error); font-weight: var(--fw-bold); }

/* ---- Join ---- */
.mada-join { background-color: var(--color-white); padding-block: var(--pad-section-last-top) var(--pad-section-last-bottom); }
.mada-join__inner { max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--grid-margin); }
.mada-join__card {
	position: relative;
	overflow: hidden;
	background-color: var(--color-vault-navy);
	border-radius: var(--radius-3xl);
	padding: var(--space-17);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-5);
}
.mada-join__glow {
	position: absolute;
	inset-inline-end: -10%;
	inset-block-end: -60%;
	inline-size: 60%;
	block-size: 120%;
	background-color: rgba(0, 178, 175, 0.35);
	filter: blur(140px);
	border-radius: 50%;
	pointer-events: none;
}
.mada-join__card h2 { position: relative; margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-section); line-height: var(--lh-section); color: var(--color-white); }
/* MADA-2866 — the description carried an invented `max-inline-size: 80ch`
   (~712px), which wrapped it early and left the card half empty. Figma gives it
   the SAME width as the heading, i.e. the card's full content box, at every
   frame: 1920 -> 1376, 1400 -> 1112, 1399 -> 1111, 1025 -> 737, 1024 -> 880,
   700 -> 556, 699 -> 555, 640 -> 496. So: no cap. */
.mada-join__card p { position: relative; margin: 0; font-size: var(--fs-md); line-height: 24px; color: rgba(245,245,246,0.8); }
.mada-join__card .mada-btn-sq { position: relative; margin-block-start: var(--space-4); }

/* ---- Responsive ---- */
@media (max-width: 639px) {
	.mada-about-hero__text h1 { font-size: var(--fs-banner); line-height: var(--lh-banner); }
	.mada-approach__head h2, .mada-team__inner h2, .mada-vs__inner h2 { font-size: var(--fs-section); line-height: var(--lh-section); }
	.mada-join__card { padding: var(--space-9); }
}
@media (min-width: 640px) and (max-width: 1151px) {
	/* 2×2 band (Figma Tablet-1029 + Desktop-1399): flatter image crop. */
	.mada-team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1152px) {
	/* 4 leadership cards across — latest Figma (4161:40275: 4×366×498). */
	.mada-team__grid { grid-template-columns: repeat(4, 1fr); }
}
/* Client feedback p41: the 2×2 arrangement applies from TABLET (640) up —
   it was single-column until 1024. */
@media (min-width: 640px) {
	/* Approach cards run 2-per-row from tablet up (Figma Tablet-1026:
	   555+373 / 464+464 within the 960 container). */
	.mada-approach__grid { grid-template-columns: 58fr 42fr; }
	.mada-approach__grid .mada-approach__card--ice { grid-column: 1; grid-row: 2; grid-column: auto; }
	.mada-approach__grid { grid-template-areas: "navy teal" "ice light"; }
	.mada-approach__card--navy { grid-area: navy; }
	.mada-approach__card--teal { grid-area: teal; }
	.mada-approach__card--ice { grid-area: ice; }
	.mada-approach__card--light { grid-area: light; }
}
/* Client feedback p39: the hero stays two-column (image beside the text)
   from 1025 up — it was stacking with a full-width image at 1025–1199. */
@media (min-width: 1025px) {
	.mada-about-hero__inner { flex-direction: row; gap: var(--space-17); }
}
/* S37 (About section 4): "the breakpoint at which the cards shift should be
   699px, not 1199px" — the two comparison cards go side-by-side from 699 up.
   699 sits below the 1025 scale gate, so it is a literal viewport value and is
   NOT pre-multiplied like the breakpoints inside the scaled band. */
@media (min-width: 699px) {
	.mada-vs__row { flex-direction: row; align-items: stretch; }
}

@media (min-width: 1025px) {
	/* Timeline: centered line, alternating cards */
	.mada-timeline::before { inset-inline-start: 50%; margin-inline-start: -1px; }
	.mada-timeline__item { inline-size: 50%; }
	.mada-timeline__item--end { align-self: flex-end; margin-inline-start: -25px; }
	.mada-timeline__item--start { align-self: flex-start; flex-direction: row-reverse; justify-content: flex-start; margin-inline-end: -25px; inline-size: calc(50% + 25px); }
	.mada-timeline__item--end { inline-size: calc(50% + 25px); }
}

/* Client feedback p42: on mobile the approach cards and the leadership
   portraits are swipeable snap rows (dots injected by navigation.js). */
@media (max-width: 639px) {
	.mada-approach__grid,
	.mada-team__grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-padding-inline: var(--grid-margin);
	}
	.mada-approach__grid::-webkit-scrollbar,
	.mada-team__grid::-webkit-scrollbar { display: none; }
	.mada-approach__card { flex: 0 0 80%; scroll-snap-align: start; }
	.mada-team__card { flex: 0 0 70%; scroll-snap-align: start; }
}

/* S35: "on mobile and tablet layouts, the font sizes and card sizes should be
   smaller." Padding steps down on .mada-approach__card above; the card heading
   was still the desktop size across every band. */
@media (max-width: 1024px) {
	.mada-approach__card h3 { font-size: var(--fs-3xl); line-height: 32px; }
	.mada-approach__card p { font-size: var(--fs-sm); line-height: 20px; }
}

/* "Join now" with no LinkedIn URL saved yet: keeps the button's look but is
   not interactive, so no dead anchor ships. Becomes a real link once the URL
   is entered at Site Links. */
.mada-btn-sq--unset { cursor: default; opacity: 0.65; }