/* ==========================================================================
   Elken Africa — inner page components
   Built from the same tokens as the homepage. Each block maps to one
   Elementor widget or template part.
   ========================================================================== */

/* sec-pagehero ------------------------------------------------------------ */
.sec-pagehero { background: var(--ek-ground-light); padding-block: 96px 104px; }
.sec-pagehero__inner { display: grid; grid-template-columns: 561px 762px; align-items: end; }
.sec-pagehero .ek-h1 { color: var(--ek-blue); }
.sec-pagehero__lead { padding-bottom: 8px; }
.ek-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--ek-24); font-size: 14px; color: #5C646A; }
.ek-breadcrumb a { color: #5C646A; }
.ek-breadcrumb a:hover { color: var(--ek-aqua); }
.ek-breadcrumb span[aria-hidden] { opacity: .5; }
@media (max-width: 1439px) { .sec-pagehero__inner { grid-template-columns: 44% 1fr; column-gap: var(--ek-56); } }
@media (max-width: 1023px) {
  .sec-pagehero { padding-block: 56px 64px; }
  .sec-pagehero__inner { grid-template-columns: 1fr; row-gap: var(--ek-24); align-items: start; }
  .sec-pagehero__lead { padding-bottom: 0; }
}

/* Media and copy band, alternating ---------------------------------------- */
.ek-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.ek-split__media { min-height: 460px; background-size: cover; background-position: center; }
.ek-split__body { display: flex; flex-direction: column; justify-content: center; gap: var(--ek-16); padding: 96px 96px 96px 120px; }
.ek-split--flip .ek-split__media { order: 2; }
/* The stat panel is the second child, so flipping it means pulling it first —
   the mirror of what --flip does to a media panel. Stacked it stays first, which
   puts the photograph on top exactly as .ek-split__media does. */
.ek-split--flip .ek-split__stat { order: -1; }
.ek-split--flip .ek-split__body { padding: 96px 120px 96px 96px; }
.ek-split--tint { background: var(--ek-grey-light); }
/* A heavier ground than --tint, for a copy half that has to hold its own beside
   a full-bleed photograph. --ek-panel-cool is the cool panel fill already used
   elsewhere on the site, and being light is what gives it contrast against a
   dark, navy-scrimmed picture — a dark copy half would merge with it. */
.ek-split--panel { background: var(--ek-panel-cool); }
.ek-split--dark { background: var(--ek-blue); color: var(--ek-white); }
.ek-split--dark .ek-h2, .ek-split--dark .ek-h3 { color: var(--ek-white); }
.ek-split--dark .ek-lead, .ek-split--dark .ek-text { color: var(--ek-grey-light); }
@media (max-width: 1023px) {
  .ek-split { grid-template-columns: 1fr; }
  .ek-split__media { min-height: 260px; order: 0 !important; }
  .ek-split__body, .ek-split--flip .ek-split__body { padding: 48px var(--ek-page-pad); }
}

/* Section separator ---------------------------------------------------------
   Two stacked full-bleed sections on different subjects. --ek-76 off the
   spacing scale is clearly a break without opening a hole; --ek-section-pad
   (130) is the rhythm INSIDE a section and reads as emptiness between two.
   A utility rather than a modifier, because it has been wanted on an .ek-split
   (Community) and on a plain <section> (Global Strength) already. */
.ek-sec-sep { margin-top: var(--ek-76); }
@media (max-width: 1199px) { .ek-sec-sep { margin-top: var(--ek-56); } }
@media (max-width:  767px) { .ek-sec-sep { margin-top: var(--ek-40); } }

/* Quote -------------------------------------------------------------------- */
.ek-quote { border-left: 3px solid var(--ek-pink); padding-left: var(--ek-32); }
.ek-quote p { font-size: 23px; line-height: 1.45; font-weight: 500; color: var(--ek-blue); }
.ek-quote cite { display: block; margin-top: var(--ek-16); font-size: 15px; font-style: normal; color: #5C646A; }
@media (max-width: 767px) { .ek-quote { padding-left: var(--ek-16); } .ek-quote p { font-size: 19px; } }

/* Numbered / labelled panel grid ------------------------------------------ */
.ek-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ek-8); }
.ek-panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ek-panel { background: var(--ek-white); border-top: 3px solid var(--ek-aqua); padding: 32px 34px 36px; display: flex; flex-direction: column; gap: var(--ek-12); }
.ek-panel__title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ek-blue); }
@media (max-width: 1023px) { .ek-panels, .ek-panels--3 { grid-template-columns: 1fr; } }

/* Link cards --------------------------------------------------------------- */
.ek-linkcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ek-8); }
.ek-linkcard { background: var(--ek-grey-light); padding: 32px 30px 34px; display: flex; flex-direction: column; gap: var(--ek-12); transition: background-color var(--ek-fast) var(--ek-ease); }
.ek-linkcard:hover { background: var(--ek-white); }
.ek-linkcard__title { font-size: 18px; font-weight: 700; color: var(--ek-blue); }
.ek-linkcard .ek-link { margin-top: auto; padding-top: var(--ek-16); font-size: 15px; }
@media (max-width: 1199px) { .ek-linkcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ek-linkcards { grid-template-columns: 1fr; } }

/* Category listing: a lead product, then a grid ----------------------------
   The ranges hold 1, 4, 3 and 1 products, so no single repeating unit works
   for all of them. The flagship gets a feature band, everything else sits in
   a card grid — a range of one is then a finished band rather than one lonely
   row, and a range of four does not become four near-identical bands. Both
   blocks are generic: nothing here knows which product it is showing. */

.ek-lead-prod {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: var(--ek-76);
  background: var(--ek-white); padding: 64px 72px;
}
.ek-lead-prod__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ek-16); }
.ek-lead-prod__eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ek-aqua);
}
.ek-lead-prod__name { margin: 0; font-size: var(--ek-h2); font-weight: 700; line-height: 1.2; color: var(--ek-blue); }
.ek-lead-prod__desc { font-size: var(--ek-lead-size, 16px); line-height: 1.65; color: var(--ek-body-ink); max-width: 46ch; }
.ek-lead-prod__price { font-size: 33px; font-weight: 700; line-height: 1.1; color: var(--ek-charcoal); }
.ek-lead-prod__note { font-size: 13px; color: #6B7278; margin-top: -8px; }
.ek-lead-prod__cta { margin-top: var(--ek-12); }
.ek-lead-prod__panel {
  /* A fixed height, not a minimum: a tall portrait pack shot would otherwise
     stretch the whole band to its own proportions. */
  background: var(--ek-grey-light); height: 460px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* --pd-shot-scale comes from shotscale.py: each cut-out is trimmed to the
   product, so without it a 350-tablet jar fills the panel exactly as much as
   a whole-house water filter. Default 1 leaves an unknown image unchanged. */
.ek-lead-prod__panel img { max-width: calc(82% * var(--pd-shot-scale, 1));
  max-height: calc(90% * var(--pd-shot-scale, 1)); object-fit: contain; transition: transform .35s var(--ek-ease); }
.ek-lead-prod:hover .ek-lead-prod__panel img { transform: scale(1.04); }
/* One stretched link, so the whole band is clickable without nesting anchors. */
.ek-lead-prod__cta::after { content: ""; position: absolute; inset: 0; }
.ek-lead-prod:hover .ek-lead-prod__name { color: var(--ek-aqua); }
@media (max-width: 1199px) {
  .ek-lead-prod { grid-template-columns: 1fr; gap: var(--ek-40); padding: 40px; }
  .ek-lead-prod__panel { height: 360px; order: -1; }
}
@media (max-width: 767px) {
  .ek-lead-prod { padding: 24px; }
  .ek-lead-prod__panel { height: 280px; }
  .ek-lead-prod__desc { max-width: none; }
}

.ek-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ek-8); }
.ek-pcard {
  position: relative; background: var(--ek-white); display: flex; flex-direction: column;
}
.ek-pcard__panel {
  background: var(--ek-grey-light); height: 260px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ek-pcard__panel img { max-width: calc(78% * var(--pd-shot-scale, 1));
  max-height: calc(84% * var(--pd-shot-scale, 1)); object-fit: contain; transition: transform .35s var(--ek-ease); }
.ek-pcard:hover .ek-pcard__panel img { transform: scale(1.05); }
.ek-pcard__body { padding: 28px 30px 32px; display: flex; flex-direction: column; gap: var(--ek-8); flex-grow: 1; }
.ek-pcard__name { margin: 0; font-size: var(--ek-h4); font-weight: 700; line-height: 1.3; color: var(--ek-blue); }
.ek-pcard__desc { font-size: 15px; line-height: 1.55; color: var(--ek-body-ink); }
.ek-pcard__price { margin-top: auto; padding-top: var(--ek-16); font-size: 23px; font-weight: 700; color: var(--ek-charcoal); }
.ek-pcard__price--soon { font-size: 13px; font-weight: 600; color: #6B7278; text-transform: uppercase; letter-spacing: .08em; }
.ek-pcard__cta { padding-top: 12px; font-size: 15px; }
.ek-pcard__cta::after { content: ""; position: absolute; inset: 0; }
.ek-pcard:hover .ek-pcard__name, .ek-pcard:hover .ek-pcard__cta { color: var(--ek-aqua); }
.ek-pcard:hover .ek-pcard__cta svg { transform: translateX(4px); }
/* A product awaiting Nigeria keeps its place but does not compete. */
.ek-pcard--soon .ek-pcard__panel img { opacity: .72; }
@media (max-width: 1199px) { .ek-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .ek-pgrid { grid-template-columns: 1fr; }
  .ek-pcard__panel { height: 220px; }
  .ek-pcard__body { padding: 20px 20px 24px; } }

/* A group heading inside a category listing. */
.ek-lead-prod + .ek-pgroup, .ek-pgroup + .ek-pgroup { margin-top: var(--ek-76); }
.ek-pgroup__title { margin: 0 0 var(--ek-24); font-size: var(--ek-h3); font-weight: 700; color: var(--ek-charcoal); }


/* Accordion — maps to the Elementor Toggle widget ------------------------- */
.ek-accordion { border-top: 1px solid var(--ek-grey-mid); }
.ek-accordion details { border-bottom: 1px solid var(--ek-grey-mid); }
.ek-accordion summary {
  list-style: none; cursor: pointer; padding: 26px 56px 26px 0; position: relative;
  font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--ek-blue);
}
.ek-accordion summary::-webkit-details-marker { display: none; }
.ek-accordion summary::after {
  content: ""; position: absolute; right: 16px; top: 32px;
  width: 10px; height: 10px; border-right: 2px solid var(--ek-aqua); border-bottom: 2px solid var(--ek-aqua);
  transform: rotate(45deg); transition: transform var(--ek-fast) var(--ek-ease);
}
.ek-accordion details[open] summary::after { transform: rotate(-135deg); top: 36px; }
.ek-accordion summary:hover { color: var(--ek-aqua); }
.ek-accordion__body { padding: 0 56px 28px 0; }
.ek-accordion__body p + p { margin-top: var(--ek-12); }
@media (max-width: 767px) {
  .ek-accordion summary { font-size: 16px; padding: 20px 44px 20px 0; }
  .ek-accordion summary::after { top: 26px; right: 10px; }
  .ek-accordion details[open] summary::after { top: 30px; }
  .ek-accordion__body { padding: 0 24px 22px 0; }
}

/* Simple data table -------------------------------------------------------- */
.ek-table { width: 100%; border-collapse: collapse; }
.ek-table th, .ek-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--ek-grey-mid); font-size: 15px; line-height: 1.5; }
.ek-table th { font-weight: 700; color: var(--ek-blue); width: 220px; }
.ek-table tr:first-child th, .ek-table tr:first-child td { border-top: 1px solid var(--ek-grey-mid); }
.ek-tablewrap { overflow-x: auto; }
@media (max-width: 767px) { .ek-table th { width: 120px; } .ek-table th, .ek-table td { padding: 14px 12px; font-size: 14px; } }

/* Timeline ---------------------------------------------------------------- */
.ek-eras { display: flex; gap: var(--ek-8); flex-wrap: wrap; margin-bottom: var(--ek-40); }
.ek-era {
  padding: 14px 24px; background: var(--ek-white); border: 1px solid var(--ek-grey-mid);
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ek-blue); cursor: pointer;
  transition: background-color var(--ek-fast) var(--ek-ease), color var(--ek-fast) var(--ek-ease);
}
.ek-era[aria-selected="true"] { background: var(--ek-blue); border-color: var(--ek-blue); color: var(--ek-white); }
.ek-era:hover { border-color: var(--ek-blue); }
.ek-erapane[hidden] { display: none; }
.ek-erapane__lead { margin-bottom: var(--ek-32); }
.ek-year { display: grid; grid-template-columns: 140px 1fr; gap: var(--ek-40); padding: 24px 0; border-top: 1px solid var(--ek-grey-mid); }
.ek-year__no { font-size: 23px; font-weight: 700; color: var(--ek-aqua); }
@media (max-width: 767px) {
  .ek-eras { gap: 6px; }
  .ek-era { padding: 12px 16px; font-size: 14px; }
  .ek-year { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .ek-year__no { font-size: 19px; }
}

/* People ------------------------------------------------------------------ */
.ek-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ek-40) var(--ek-8); }
.ek-person { display: grid; grid-template-columns: 240px 1fr; gap: var(--ek-32); align-items: start; }
.ek-person__photo { background: var(--ek-grey-light); aspect-ratio: 3 / 4; overflow: hidden; }
.ek-person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-person__name { font-size: 23px; font-weight: 700; line-height: 1.25; color: var(--ek-blue); }
.ek-person__role { font-size: 15px; font-weight: 600; color: var(--ek-aqua); margin-top: 6px; }
.ek-person__bio { margin-top: var(--ek-16); }
.ek-people--single { grid-template-columns: 1fr; }
.ek-people--single .ek-person { grid-template-columns: 300px 1fr; }
@media (max-width: 1199px) { .ek-people { grid-template-columns: 1fr; } }
@media (max-width: 599px) {
  .ek-person, .ek-people--single .ek-person { grid-template-columns: 1fr; gap: var(--ek-16); }
  .ek-person__photo { max-width: 240px; }
}

/* Steps -------------------------------------------------------------------- */
.ek-steps { counter-reset: step; display: flex; flex-direction: column; }
.ek-step { counter-increment: step; display: grid; grid-template-columns: 88px 1fr; gap: var(--ek-32); padding: 28px 0; border-top: 1px solid var(--ek-grey-mid); }
.ek-step::before { content: counter(step, decimal-leading-zero); font-size: 23px; font-weight: 700; color: var(--ek-aqua); }
@media (max-width: 767px) { .ek-step { grid-template-columns: 56px 1fr; gap: var(--ek-16); padding: 22px 0; } }

/* Location cards ----------------------------------------------------------- */
.ek-loccards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ek-8); }
.ek-loccard { background: var(--ek-white); border-top: 3px solid var(--ek-aqua); padding: 32px 34px 36px; display: flex; flex-direction: column; gap: var(--ek-12); }
.ek-loccard--head { border-top-color: var(--ek-pink); grid-column: 1 / -1; }
.ek-loccard__name { font-size: 23px; font-weight: 700; line-height: 1.25; color: var(--ek-blue); }
.ek-loccard__meta { font-size: 15px; line-height: 1.6; color: var(--ek-body-ink); }
.ek-loccard__meta strong { color: var(--ek-charcoal); }
.ek-loccard__actions { display: flex; gap: var(--ek-8); flex-wrap: wrap; margin-top: var(--ek-8); }
@media (max-width: 1023px) { .ek-loccards { grid-template-columns: 1fr; } }

/* Form --------------------------------------------------------------------- */
.ek-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ek-24); }
.ek-field { display: flex; flex-direction: column; gap: var(--ek-8); }
.ek-field--wide { grid-column: 1 / -1; }
.ek-field label { font-size: 15px; font-weight: 600; color: var(--ek-charcoal); }
.ek-field input, .ek-field select, .ek-field textarea {
  font-family: inherit; font-size: 16px; line-height: 1.5; color: var(--ek-charcoal);
  padding: 14px 16px; background: var(--ek-white);
  border: 1px solid var(--ek-grey-out); min-height: 52px;
}
.ek-field textarea { min-height: 140px; resize: vertical; }
/* `outline: none` used to sit here. base.css gives the whole site a
   :focus-visible ring, and a form is the last place to throw it away — a
   1px border change is not a focus indicator for anyone tabbing through.
   The aqua border is the mouse-and-touch nicety; the ring is the real one. */
.ek-field input:focus, .ek-field select:focus, .ek-field textarea:focus { border-color: var(--ek-aqua); }
.ek-field input:focus-visible, .ek-field select:focus-visible, .ek-field textarea:focus-visible {
  outline: 2px solid var(--ek-aqua); outline-offset: 2px; }

/* Invalid field, and the message under it. Written by Forms() in elken.js. */
.ek-field.is-invalid input, .ek-field.is-invalid select, .ek-field.is-invalid textarea {
  border-color: var(--ek-error); background: var(--ek-error-tint); }
.ek-field__error { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ek-error); }

/* The honeypot. Hidden by clipping rather than display:none, because some bots
   skip fields they can tell are hidden; aria-hidden and tabindex="-1" keep it
   away from screen readers and the tab order.
   Clip, NOT `left: -9999px` — an off-screen box is still a box, and on a page
   this wide it is one `position: static` ancestor away from adding 9999px of
   horizontal scroll. The clip pattern occupies 1px and cannot. */
.ek-hp {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Submission status. Never green unless something was actually delivered —
   while the form has no endpoint it uses the neutral pending tone. */
.ek-form__status {
  grid-column: 1 / -1; padding: 14px 16px; font-size: 15px; line-height: 1.5;
  border-left: 3px solid var(--ek-aqua); background: var(--ek-grey-light);
  color: var(--ek-charcoal); }
.ek-form__status--error   { border-left-color: var(--ek-error); background: var(--ek-error-tint); color: var(--ek-error); }
.ek-form__status--pending { border-left-color: var(--ek-aqua); }
.ek-form__status--sent    { border-left-color: #2E7D4F; }
.ek-form__actions { grid-column: 1 / -1; display: flex; gap: var(--ek-16); flex-wrap: wrap; }
.ek-form__note { grid-column: 1 / -1; font-size: 14px; color: #5C646A; }
@media (max-width: 767px) { .ek-form { grid-template-columns: 1fr; } }

/* Placeholder marker — content the client still has to supply -------------- */
.ek-todo {
  display: inline-block; padding: 1px 8px; background: #FFF3D6;
  border: 1px dashed #D9A300; color: #7A5C00;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}

/* The product row carries its own link, stretched over the whole row. */

/* ==========================================================================
   Who We Are pages — sections taken from the Figma "Who We Are" frames
   ========================================================================== */

/* Banner hero (Figma: "Who We Are - About Us", hero 1920x922) -------------- */
.sec-banner { position: relative; min-height: clamp(560px, 48vw, 922px); display: flex; align-items: center; overflow: hidden; }
.sec-banner__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sec-banner__veil { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,17,42,.90) 0%, rgba(14,17,42,.68) 44%, rgba(14,17,42,.32) 100%); }
/* Gradient variant. Same geometry as the photographic banner — only the plate
   behind it changes. The ground and the two 1598px glow ellipses are the ones
   in Figma "01 - Foundations", so this stays inside the one design language.  */
/* Copy-space photography: the subject is framed right and the left of the shot
   is deliberately near-empty. Keyed on its own modifier, not on the banner's
   height — Leadership is a full-height banner shot exactly this way. The full-frame veil above is
   built for a photograph with the subject under the copy, and over one of these
   it flattens the empty half to navy and dulls the subject. This one holds just
   enough on the left for white type and then lets go.
   Measured against the brightest of the four (Beauty, mean left sRGB .94):
   .62 gives 5.6:1 for the standfirst; the other three land above 8:1. */
/* Copy-space photography: the subject is framed right and the left of the shot
   is deliberately near-empty. Keyed on its own modifier, not on the banner's
   height — Leadership is a full-height banner shot exactly this way. The full-frame veil above is
   built for a photograph with the subject *under* the copy; over one of these it
   flattens the empty half to navy and drains the subject. This one holds a wide,
   even plateau across the copy column and then lets go completely.

   The plateau width matters more than its opacity. At 1600 the copy box ends at
   x=526; a stop at 32% (x=512) meant the last centimetre of every line was
   already fading and the measured contrast was 3.06:1. Running the plateau to
   44% fixed it at the same opacity. Measured with the copy hidden, worst case
   across all four banners at 1600 / 1024 / 390 is 6.2:1 — Beauty sets it, being
   the brightest (mean left sRGB .94). */
/* Copy-space photography: the subject is framed right and the left of the shot
   is deliberately near-empty. Keyed on its own modifier, not on the banner's
   height — Leadership is a full-height banner shot exactly this way. The full-frame veil above is
   built for a photograph with the subject *under* the copy; over one of these it
   flattens the empty half and drains the subject. This one holds a wide, even
   plateau across the copy column and then lets go completely.

   THE SCRIM IS NEUTRAL, NOT NAVY, AND THAT IS DELIBERATE. It was Deep Vital
   Blue's near-black `#0E112A` (hue 234, sat .67) and Elken BC saw it at once:
   over a warm daylight interior it read lilac. The measurement backs him up —
   the Vitamins photograph's left is hue 31 at sat .09, and 234 is close enough
   to its complement that the mix passes through magenta. Composited, the left
   landed at hue 273 with green as the lowest channel, which is the signature of
   purple. `--ek-scrim-rgb` composites at saturation .01–.04 on all four
   banners, so it darkens the photograph without tinting it.

   The plateau's width matters more than its opacity. At 1600 the copy box ends
   at x=526; a fade starting at 32% (x=512) left the last centimetre of every
   line already lightening and measured 3.06:1. Running the plateau to 34% and
   easing the falloff over eight stops fixed both the contrast and a visible
   Mach band where a three-stop ramp used to start.

   Verified by rendering each banner twice, once with the copy set to
   `visibility: hidden`, and reading the ground from the copy-free frame — a
   white-text region measured with the text still in it returns ~1.5:1 every
   time, because the text is its own brightest pixel. */
.sec-banner--copyspace .sec-banner__veil {
  background: linear-gradient(90deg,
    rgba(var(--ek-scrim-rgb), .70)   0%,
    rgba(var(--ek-scrim-rgb), .67)  34%,
    rgba(var(--ek-scrim-rgb), .60)  48%,
    rgba(var(--ek-scrim-rgb), .44)  57%,
    rgba(var(--ek-scrim-rgb), .26)  66%,
    rgba(var(--ek-scrim-rgb), .12)  76%,
    rgba(var(--ek-scrim-rgb), .04)  87%,
    rgba(var(--ek-scrim-rgb), 0)   100%);
}
@media (max-width: 1199px) {
  .sec-banner--copyspace .sec-banner__veil {
    background: linear-gradient(90deg,
      rgba(var(--ek-scrim-rgb), .76)  0%, rgba(var(--ek-scrim-rgb), .72) 52%,
      rgba(var(--ek-scrim-rgb), .58) 66%, rgba(var(--ek-scrim-rgb), .32) 80%,
      rgba(var(--ek-scrim-rgb), .14) 92%, rgba(var(--ek-scrim-rgb), .06) 100%);
  }
}
@media (max-width: 767px) {
  /* `cover` at this aspect crops a 3.3:1 photograph to a narrow strip, so aim it
     at the subject and scrim the whole frame — the copy now sits over all of it
     rather than beside it. */
  .sec-banner--copyspace .sec-banner__bg { background-position: 74% center; }
  .sec-banner--copyspace .sec-banner__veil {
    background: linear-gradient(180deg, rgba(var(--ek-scrim-rgb), .80) 0%, rgba(var(--ek-scrim-rgb), .68) 100%);
  }
}
/* A banner that carries an overlaid, transparent header needs its own ground
   under the navigation. The copy-space veil is deliberately near-clear at the
   right of the frame, which is exactly where the nav links sit — over the
   distributor photograph's daylight windows they measured unreadable. ::after,
   not ::before, so it paints above .sec-banner__bg and .sec-banner__veil; the
   copy is lifted to z-index 1 so it stays above this in turn. */
.sec-banner--overlayhead::after { content: ""; position: absolute; inset: 0 0 auto 0;
  height: 190px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--ek-scrim-rgb), .62) 0%,
    rgba(var(--ek-scrim-rgb), .34) 44%, rgba(var(--ek-scrim-rgb), 0) 100%); }
@media (max-width: 1199px) { .sec-banner--overlayhead::after { display: none; } }
/* A photograph that fills the whole frame, with the copy over it. The default
   full-frame veil is a flat navy sheet at .90 falling to .32, which buries the
   picture — and over the Elken Campus shot, whose sky is a strong cyan-blue,
   the navy read as a purple cast. This one does three things separately:
   a soft brand-navy hue held to the left, behind the title only; a neutral
   darkening ramp (--ek-scrim-rgb) that carries the contrast without tinting;
   and a top band so the overlaid header keeps its ground. */
.sec-banner--titlewash .sec-banner__veil {
  background:
    /* Top band: the overlaid header's links sit at 2-6% of the banner height, and over
       this photograph's bright sky they measured 3.4:1 at .50. */
    linear-gradient(180deg, rgba(var(--ek-scrim-rgb), .62) 0%,
      rgba(var(--ek-scrim-rgb), .18) 22%, rgba(var(--ek-scrim-rgb), 0) 44%),
    linear-gradient(96deg, rgba(12,17,52,.50) 0%, rgba(12,17,52,.30) 30%, rgba(12,17,52,0) 56%),
    /* The neutral ramp has to still be carrying weight at 46%, because that is where the
       longest headline ends. At .46 there the pink accent line sat on the campus facade
       at 2.3:1 — the white line above it measured fine, which is why this was missed the
       first time. Measure the accent, not the headline. */
    linear-gradient(96deg, rgba(var(--ek-scrim-rgb), .80) 0%, rgba(var(--ek-scrim-rgb), .76) 26%,
      rgba(var(--ek-scrim-rgb), .66) 44%, rgba(var(--ek-scrim-rgb), .38) 58%,
      rgba(var(--ek-scrim-rgb), .18) 74%, rgba(var(--ek-scrim-rgb), .12) 100%); }
@media (max-width: 767px) {
  .sec-banner--titlewash .sec-banner__veil {
    background: linear-gradient(180deg, rgba(var(--ek-scrim-rgb), .74) 0%, rgba(var(--ek-scrim-rgb), .62) 100%); }
}

.sec-banner--gradient { background: var(--ek-blue); }
.sec-banner__glow { position: absolute; inset: 0; overflow: hidden; }
.sec-banner__glow::before, .sec-banner__glow::after {
  content: ""; position: absolute; width: 1598px; height: 1598px; border-radius: 50%;
}
.sec-banner__glow::before {
  left: -420px; top: -900px;
  background: radial-gradient(circle, rgba(42,167,207,.42) 0%, rgba(42,167,207,0) 62%);
}
.sec-banner__glow::after {
  right: -520px; bottom: -1010px;
  background: radial-gradient(circle, rgba(242,135,183,.40) 0%, rgba(181,122,153,.14) 42%, rgba(242,135,183,0) 66%);
}
@media (max-width: 1023px) {
  .sec-banner__glow::before { left: -600px; top: -1080px; }
  .sec-banner__glow::after { right: -700px; bottom: -1120px; }
}
/* Content container, not the navigation container. Figma puts the banner H1 at
   x=258 (the 1408 content column) while only the breadcrumb sits at x=153, and
   the home page puts every section on 1408 — so a banner on 1605 left the hero
   copy 98px further out than everything under it. */
/* Leadership: the portraits stand in the banner itself. They are bottom-aligned
   and the section's own edge crops them, so the group reads as a line of people
   the frame happens to cut rather than four pictures pasted on a gradient. */
.sec-banner--team .sec-banner__copy { padding-block: 96px; }
.sec-banner__team { position: absolute; right: -2%; bottom: 0; width: 62%; height: 100%; pointer-events: none; }
.sec-banner__team img { position: absolute; bottom: 0; width: auto; max-width: none; display: block; }
/* a quiet pool of light so the group sits in the scene rather than on it */
.sec-banner__spot { position: absolute; left: 4%; bottom: -34%; width: 92%; padding-top: 92%;
  border-radius: 50%; background: radial-gradient(circle, rgba(133,158,179,.30) 0%, rgba(133,158,179,0) 62%); }
/* and the ground they stand on, so nobody is cut off by a hard line */
.sec-banner__foot { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 5;
  background: linear-gradient(180deg, rgba(14,17,42,0) 0%, rgba(14,17,42,.22) 55%, rgba(14,17,42,.5) 100%); }
/* Stays absolute at every width — putting it in flow makes it a flex item of
   the banner and shoves the copy sideways. Below the desktop breakpoint the
   group becomes a band under the copy and the copy reserves room for it. */
@media (max-width: 1199px) {
  .sec-banner--team .sec-banner__copy { padding-block: 88px 0; }
  .sec-banner--team .sec-banner__inner { padding-bottom: 236px; }
  .sec-banner__team { right: 0; width: 100%; height: 250px; }
  .sec-banner__spot { bottom: -50%; }
}
@media (max-width: 767px) {
  .sec-banner--team .sec-banner__inner { padding-bottom: 196px; }
  .sec-banner__team { height: 205px; }
  /* three across is the most that reads at phone width */
  .sec-banner__team img:first-of-type { display: none; }
  .sec-banner__team img:nth-of-type(2) { left: 2%; }
  .sec-banner__team img:nth-of-type(3) { left: 26%; }
  .sec-banner__team img:nth-of-type(4) { left: 54%; }
}

.sec-banner__inner { position: relative; z-index: 1; width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); margin-inline: auto; }
.sec-banner__crumb { position: absolute; top: 79px; left: 0; }
.sec-banner__crumb .ek-breadcrumb { margin: 0; color: rgba(255,255,255,.6); font-size: 13px; }
.sec-banner__crumb .ek-breadcrumb a { color: rgba(255,255,255,.6); }
.sec-banner__crumb .ek-breadcrumb a:hover { color: var(--ek-white); }
.sec-banner__copy { max-width: 633px; padding-block: 120px; }
.sec-banner .ek-h1 { color: var(--ek-white); }
.sec-banner .ek-h1 .t-accent { color: var(--ek-pink); }
.sec-banner__sub { margin-top: 18px; max-width: 430px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.86); }
.sec-banner__actions { display: flex; align-items: center; gap: var(--ek-16); margin-top: 32px; flex-wrap: wrap; }
.sec-banner__actions .ek-link { margin-right: 12px; }
@media (max-width: 1199px) {
  .sec-banner { min-height: 0; }
  .sec-banner__crumb { top: 26px; }
  .sec-banner__copy { padding-block: 100px 72px; }
  .sec-banner__veil { background: linear-gradient(180deg, rgba(14,17,42,.78) 0%, rgba(14,17,42,.86) 100%); }
}

/* Core strengths strip (Figma: "Sec - Our Core Strenghts", 1920x334) ------- */
.sec-strengths { background: linear-gradient(180deg, #E8EBEE 0%, #DADFE4 100%); padding-block: 59px 62px; }
.sec-strengths__title { font-size: var(--ek-h3); font-weight: 700; line-height: 1.25; color: var(--ek-charcoal); margin: 0; }
.sec-strengths__row { display: flex; align-items: flex-start; margin-top: 42px; }
.ek-strength { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ek-strength + .ek-strength::before {
  content: ""; position: absolute; left: 0; top: 26px; width: 1px; height: 23px; background: rgba(37,41,44,.22);
}
.ek-strength svg { color: var(--ek-blue); }
.ek-strength span { font-size: 16px; font-weight: 700; color: var(--ek-charcoal); }
@media (max-width: 1023px) {
  .sec-strengths { padding-block: 40px; }
  .sec-strengths__row { flex-wrap: wrap; gap: var(--ek-32) 0; margin-top: var(--ek-24); }
  .ek-strength { flex: 0 0 50%; }
  .ek-strength:nth-child(odd)::before { display: none; }
}

/* Journey zig-zag (Figma: the three alternating bands under "Our Journey") - */
.ek-zig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ek-zig__media { min-height: 314px; background-size: cover; background-position: center; }
.ek-zig__body {
  background: var(--ek-white); display: flex; gap: 48px; align-items: flex-start;
  padding: 100px 90px 100px 102px; margin-left: clamp(0px, 8vw, 153px);
}
.ek-zig--flip .ek-zig__body { order: 2; margin-left: 0; margin-right: clamp(0px, 8vw, 153px); padding-left: 79px; }
.ek-zig--tint .ek-zig__body { background: #EFF1F2; }
.ek-zig__media--panel { background: var(--ek-blue); display: flex; align-items: center; justify-content: center; padding: 40px; }
.ek-zig__media--panel p { max-width: 360px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.86); text-align: center; }
.ek-zig__year { flex: 0 0 150px; font-size: var(--ek-h2); font-weight: 700; line-height: 1.2; color: var(--ek-pink); }
.ek-zig__title { font-size: var(--ek-h3); font-weight: 700; line-height: 1.25; color: var(--ek-charcoal); }
.ek-zig__copy { margin-top: 14px; max-width: 340px; font-size: 14px; line-height: 1.6; color: var(--ek-body-ink); }
@media (max-width: 1023px) {
  .ek-zig { grid-template-columns: 1fr; }
  .ek-zig__media, .ek-zig--flip .ek-zig__media { order: -1; min-height: 220px; }
  .ek-zig--flip .ek-zig__body { order: 2; }
  .ek-zig__body, .ek-zig--flip .ek-zig__body {
    margin: 0; padding: 40px var(--ek-page-pad); flex-direction: column; gap: 8px;
  }
  .ek-zig__year { flex: none; }
  .ek-zig__copy { max-width: none; }
}

/* Recognition band (Figma: "Sec - Recognition", four 398x208 cards) --------- */
.sec-recog__title { text-align: center; margin: 0; }
.ek-recog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 96px; }
.ek-recog__card { background: #EFF1F2; min-height: 208px; padding: 52px 40px 44px 60px; display: flex; flex-direction: column; gap: 12px; }
.ek-recog__key { font-size: var(--ek-h2); font-weight: 700; line-height: 1.2; color: var(--ek-charcoal); }
.ek-recog__label { font-size: 14px; line-height: 1.6; color: var(--ek-body-ink); }
a.ek-recog__card { transition: background-color var(--ek-fast) var(--ek-ease); }
a.ek-recog__card:hover { background: var(--ek-white); }
a.ek-recog__card .ek-link { margin-top: auto; font-size: 15px; }
@media (max-width: 1199px) { .ek-recog { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--ek-40); }
  .ek-recog__card { min-height: 0; padding: 32px 28px; } }
@media (max-width: 599px) { .ek-recog { grid-template-columns: 1fr; } }

/* Leadership (Figma: "Who We Are - Leadership Management", 3:302) ----------
   Geometry read off the Figma frame:
   - the opening row is full bleed, 689 tall, copy 434 wide at x=258, the
     photograph occupying the right 1126 (58.65%)
   - the leader bands are 1624 wide, inset 153 each side, split into two 812
     halves, 695 tall, and they STACK WITH NO GAP between them
   - the portrait is a transparent cut-out sitting flush to the bottom of its
     panel at about 89% of the band height
   - copy is top-aligned 100px down, on a 599 measure
   - the copy panel alternates light and dark down the page, and the sides
     swap with it. That alternation is the page's rhythm, not decoration.     */

.sec-leaders { background: #F3F5F7; }

.ek-lead-open { position: relative; background: #E9EBED; min-height: 689px; display: flex; align-items: center; }
.ek-lead-open__media { position: absolute; right: 0; top: 0; bottom: 0; width: 58.65%; background-size: cover; background-position: center top; }
.ek-lead-open__inner { position: relative; width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); margin-inline: auto; }
.ek-lead-open__copy { max-width: 434px; padding-block: 100px; }

.ek-leaders { padding-top: 149px; }
.ek-leader {
  width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 695px;
}
.ek-leader__panel { position: relative; overflow: hidden; background: #E4E7EA; }
.ek-leader__panel::before {
  content: ""; position: absolute; left: -60%; top: -50%; width: 220%; height: 200%;
  background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 60%);
}
/* Transparent cut-out. No background of its own — the panel behind it is the
   background, which is the whole point of the asset being a cut-out.
   Absolutely positioned on purpose. In flow, the portrait's intrinsic height
   became the grid row's minimum and stretched every band from 695 to 858,
   because `height: 89%` had nothing definite to resolve against yet. Out of
   flow it contributes no intrinsic height, so the band is 695 as drawn and the
   portrait then measures 89% of that. */
.ek-leader__panel img {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  display: block; height: 89%; width: auto; max-width: 92%; object-fit: contain;
}

/* A portrait supplied as a studio JPEG with its own grey backdrop shows here as
   a rectangle pasted onto a lighter panel — the panel's #E4E7EA and its white
   glow ARE the background, which only works for a transparent cut-out. The
   answer is the asset, not CSS: the Country Manager's photograph was reshot as
   a cut-out and an `.ek-leader--photo` variant that rebuilt the backdrop in
   gradients was deleted. Any new portrait dropped in here must be a cut-out. */
/* Figma pads a 812 column 100/113; the band now sits on the 1408 content
   container like every other section, so the pads scale with it. */
.ek-leader__copy { display: flex; flex-direction: column; padding: 100px 96px 80px 88px; background: var(--ek-white); }
.ek-leader--flip .ek-leader__copy { order: -1; }
.ek-leader--navy .ek-leader__copy { background: var(--ek-blue); }
.ek-leader--charcoal .ek-leader__copy { background: var(--ek-charcoal); }
.ek-leader--navy .ek-leader__name, .ek-leader--charcoal .ek-leader__name { color: var(--ek-white); }
.ek-leader--navy .ek-leader__role, .ek-leader--charcoal .ek-leader__role { color: var(--ek-pink); }
.ek-leader--navy .ek-leader__bio,  .ek-leader--charcoal .ek-leader__bio  { color: rgba(255,255,255,.82); }
.ek-leader--navy .ek-quote p, .ek-leader--charcoal .ek-quote p { color: var(--ek-white); }
.ek-leader--navy .ek-quote cite, .ek-leader--charcoal .ek-quote cite { color: rgba(255,255,255,.6); }

.ek-leader__name { font-size: var(--ek-h2); font-weight: 700; line-height: 1.2; color: var(--ek-blue); }
.ek-leader__role { margin-top: 6px; font-size: var(--ek-h4); font-weight: 600; color: var(--ek-aqua); }
.ek-leader__bio { margin-top: 22px; font-size: 15px; line-height: 1.7; color: var(--ek-body-ink); }
.ek-leader__bio + .ek-leader__bio { margin-top: 14px; }

@media (max-width: 1439px) { .ek-leader__copy { padding: 72px 56px 64px; } }
@media (max-width: 1023px) {
  .ek-lead-open { display: block; min-height: 0; }
  .ek-lead-open__media { position: relative; width: 100%; height: 320px; }
  .ek-lead-open__copy { max-width: none; padding-block: 48px; }
  .ek-leaders { padding-top: 0; }
  .ek-leader { grid-template-columns: 1fr; min-height: 0; width: 100%; }
  .ek-leader__panel { min-height: 380px; }
  .ek-leader__panel img { height: auto; width: auto; max-height: 380px; max-width: 70%; }
  .ek-leader__copy, .ek-leader--flip .ek-leader__copy { order: 2; padding: 40px var(--ek-page-pad) 56px; }
}

/* Our Journey (Figma: "Achievement Milestones", 4:748) --------------------- */

/* Award panels, three across with arrows and dots (Figma Awards-Panel) */
.sec-awards { position: relative; background: var(--ek-ground-light); padding-block: 150px 130px; overflow: hidden; }
.sec-awards::before { content: ""; position: absolute; left: -46%; top: -18%; width: 1598px; height: 1598px;
  border-radius: 50%; background: radial-gradient(circle, rgba(42,167,207,.14) 0%, rgba(42,167,207,0) 62%); }
.sec-awards__inner { position: relative; width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); margin-inline: auto; }
.ek-awardrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* 440 clears the tallest card at the tightest desktop width (424 at 1024), so
   paging the carousel never changes the row height and never moves the page. */
.ek-award { display: flex; flex-direction: column; min-height: 440px; }
.ek-award[hidden] { display: none; }
.ek-award__top { background: #E4E9EE; padding: 44px 42px; }
.ek-award__year { font-size: 52px; font-weight: 700; line-height: 1.1; color: var(--ek-blue); }
.ek-award__body { background: var(--ek-blue); color: var(--ek-white); padding: 40px 42px 46px; flex-grow: 1; display: flex; flex-direction: column; gap: 14px; }
.ek-award__title { font-size: var(--ek-h3); font-weight: 700; line-height: 1.25; }
.ek-award__detail { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.82); }
.sec-awards__nav { display: flex; align-items: center; justify-content: center; gap: var(--ek-16); margin-top: 44px; }
.ek-round {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--ek-blue);
  background: transparent; color: var(--ek-blue); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--ek-fast) var(--ek-ease), color var(--ek-fast) var(--ek-ease);
}
.ek-round:hover { background: var(--ek-blue); color: var(--ek-white); }
/* The system says no drop shadows, and that still holds for panels and cards.
   These controls are the deliberate exception: they float over a light ground
   and need to read as pressable. */
.ek-round--soft { border-color: rgba(133,158,179,.34); background: var(--ek-white);
  color: #6D7A85; box-shadow: 0 6px 16px rgba(31,45,74,.10), 0 1px 2px rgba(31,45,74,.06); }
.ek-round--soft:hover { background: var(--ek-blue); border-color: var(--ek-blue); color: var(--ek-white);
  box-shadow: 0 8px 20px rgba(32,34,89,.24); }
.ek-round--soft[disabled] { opacity: 1; color: #C3CCD4; border-color: rgba(133,158,179,.2);
  box-shadow: 0 3px 10px rgba(31,45,74,.06); }
.ek-round--soft[disabled]:hover { background: var(--ek-white); color: #C3CCD4; }
.ek-round[disabled] { opacity: .3; cursor: default; }
.ek-round[disabled]:hover { background: transparent; color: var(--ek-blue); }
@media (max-width: 1023px) {
  .sec-awards { padding-block: var(--ek-section-pad); }
  /* One card at a time, all six sharing the same grid cell. The row then keeps
     the height of the tallest card whichever one is showing. */
  .ek-awardrow { grid-template-columns: 1fr; }
  .ek-award { grid-area: 1 / 1; min-height: 0; }
  .ek-award[hidden] { display: flex; visibility: hidden; }
}


/* Contact (Figma: "Contact", 1:840) ---------------------------------------
   Short hero with a ribbon · flag half / head-office half · a grid of offices
   each headed by a round badge. */
.sec-banner--short { min-height: clamp(420px, 30vw, 560px); }
.ct-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.ct-head { display: grid; grid-template-columns: 46fr 54fr; background: var(--ek-grey-light); }
/* The holding colour behind the photograph. It was Nigeria green while the panel
   held a flag; the panel now holds the head office building, so it is the
   building's own sunlit stone rather than a green flash before the image paints. */
.ct-head__flag { position: relative; overflow: hidden; min-height: 520px; background: #C9CDD2; }
.ct-flag { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; }
.ct-head__panel { display: flex; align-items: center; padding: 96px 0; }
/* The panel's copy lines up with the content container, so the head office
   block sits on the same left edge as every section below it. */
.ct-head__inner { width: min(636px, 100% - (var(--ek-page-pad) * 2)); margin-left: 84px; }
.ct-head__country { font-size: var(--ek-h2); font-weight: 700; line-height: 1.2; color: var(--ek-blue); }
.ct-head__label { margin-top: 18px; font-size: 15px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ek-aqua); }
.ct-head__addr { margin-top: 12px; font-size: var(--ek-h3); font-weight: 500; line-height: 1.35; color: var(--ek-charcoal); }
.ct-head__rows { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 24px; margin: 32px 0 0; }
.ct-head__rows dt { font-size: 14px; color: #6D7A85; }
.ct-head__rows dd { margin: 0; font-size: 15px; color: var(--ek-body-ink); }
.ct-head__rows a { color: var(--ek-aqua); font-weight: 600; }
.ct-head__rows a:hover { color: var(--ek-aqua-hover); text-decoration: underline; }
.ct-head__actions { display: flex; flex-wrap: wrap; gap: var(--ek-16); margin-top: 40px; }

.ct-offices { background: var(--ek-white); }
.ct-officegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 76px; }
.ct-office { background: var(--ek-grey-light); padding: 44px 40px 40px; display: flex; flex-direction: column;
  transition: background-color var(--ek-fast) var(--ek-ease); }
.ct-office:hover { background: #E7EBEF; }
.ct-office__badge { width: 44px; height: 44px; border-radius: 50%; background: var(--ek-blue); color: var(--ek-white);
  display: flex; align-items: center; justify-content: center; }
.ct-office__area { margin: 24px 0 0; font-size: 15px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ek-blue); }
.ct-office__name { margin-top: 8px; font-size: var(--ek-h3); font-weight: 700; line-height: 1.25; color: var(--ek-charcoal); }
.ct-office__addr { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ek-body-ink); }
.ct-office__person { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--ek-charcoal); }
.ct-office__tel { margin-top: 4px; font-size: 15px; }
.ct-office__tel a { color: var(--ek-aqua); font-weight: 600; }
.ct-office__tel a:hover { color: var(--ek-aqua-hover); text-decoration: underline; }
.ct-office__when { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 6px 16px; margin: 20px 0 0;
  padding-top: 20px; border-top: 1px solid var(--ek-grey-mid); }
.ct-office__when dt { font-size: 13px; color: #6D7A85; }
.ct-office__when dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ek-body-ink); }
.ct-office__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 28px; }
/* The sixth cell. Five Expressions leave a hole in a three-up grid, and the
   coverage line is exactly the thing a reader in the sixth position needs. */
.ct-office--anywhere { background: var(--ek-blue); }
.ct-office--anywhere:hover { background: var(--ek-blue-hover); }
.ct-office--anywhere .ct-office__badge { background: var(--ek-aqua); }
.ct-office--anywhere .ct-office__area { color: var(--ek-pink); }
.ct-office--anywhere .ct-office__name { color: var(--ek-white); }
.ct-office--anywhere .ct-office__addr { color: rgba(255,255,255,.82); }

.ct-message { background: var(--ek-ground-light); }
.ct-message__grid { display: grid; grid-template-columns: 470px minmax(0, 1fr); gap: 100px; align-items: start; }
.ct-message__copy .ek-h2 { margin-top: 14px; }
.ct-message__copy .ek-lead { margin-top: 22px; }

@media (max-width: 1199px) {
  .ct-head { grid-template-columns: 1fr; }
  .ct-head__flag { min-height: 260px; }
  .ct-head__panel { padding: 56px 0; }
  .ct-head__inner { margin-inline: auto; width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); }
  .ct-officegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--ek-40); }
  .ct-message__grid { grid-template-columns: 1fr; gap: var(--ek-40); }
}
@media (max-width: 767px) {
  .ct-officegrid { grid-template-columns: 1fr; }
  .ct-office { padding: 32px 24px; }
  .ct-head__rows { grid-template-columns: 1fr; gap: 2px; }
  .ct-head__rows dd + dt { margin-top: 12px; }
  .ct-coverage { padding: 22px 20px; }
}

/* Year scrubber (Figma: "Achievement Milestones", 4:748) --------------------
   A rail of years sitting on one continuous line, a round control at each end,
   and a plate below whose notch points at the year you are reading. The plate
   is what carries the shading — it is drawn as a clipped shape so the notch and
   the shadow are the same silhouette. */
.sec-scrub { position: relative; overflow: hidden; padding-top: 130px;
  background: linear-gradient(158deg, #FBFCFD 0%, #F4F7FA 44%, #EAEEF4 100%); }
.sec-scrub > .ek-container { position: relative; z-index: 1; }
/* the pearlescent lift behind the rail, from the Foundations glow masks */
.sec-scrub__glow { position: absolute; inset: 0; pointer-events: none; }
.sec-scrub__glow::before, .sec-scrub__glow::after {
  content: ""; position: absolute; width: 1598px; height: 1598px; border-radius: 50%;
}
.sec-scrub__glow::before { left: 50%; top: -150%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 58%); }
.sec-scrub__glow::after { right: -30%; top: -60%;
  background: radial-gradient(circle, rgba(42,167,207,.09) 0%, rgba(42,167,207,0) 60%); }
.sec-scrub__title { text-align: center; margin: 0 0 92px; color: var(--ek-charcoal); }

.ek-scrub { position: relative; padding-inline: 62px; }
/* One static line under the whole rail. It does not live on the rail itself,
   because the rail translates when you page through the years. */
.ek-scrub__line { position: absolute; left: 0; right: 0; top: var(--ek-scrub-line, 70px);
  height: 2px; border-radius: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(133,158,179,.18) 0%, rgba(133,158,179,.5) 8%,
    rgba(133,158,179,.5) 92%, rgba(133,158,179,.18) 100%); }
.ek-scrub__viewport { overflow: hidden; }
.ek-scrub__rail { position: relative; display: flex; transition: transform .4s var(--ek-ease); }
.ek-year-btn {
  position: relative; flex: 0 0 165px; height: 104px; background: none; border: 0; cursor: pointer;
  font-family: inherit; padding: 0; display: block;
}
.ek-year-btn span { display: block; font-size: var(--ek-h2); font-weight: 700; line-height: 1.2;
  color: #A7B0B9; transition: color var(--ek-fast) var(--ek-ease); }
.ek-year-btn::after {
  content: ""; position: absolute; left: 50%; top: var(--ek-scrub-line, 70px);
  width: 9px; height: 9px; border-radius: 50%; background: #C3CCD4;
  transform: translate(-50%, -50%); transition: all var(--ek-fast) var(--ek-ease);
}
.ek-year-btn:hover span { color: var(--ek-charcoal); }
.ek-year-btn[aria-selected="true"] span { color: var(--ek-charcoal); }
.ek-year-btn[aria-selected="true"]::after { width: 16px; height: 16px; background: var(--ek-aqua);
  box-shadow: 0 0 0 6px rgba(42,167,207,.14); }

.ek-scrub__arrow { position: absolute; top: var(--ek-scrub-line, 70px); transform: translateY(-50%); }
.ek-scrub__arrow--prev { left: 0; }
.ek-scrub__arrow--next { right: 0; }

/* The plate. clip-path cuts the notch; the filter then casts a shadow that
   follows that cut, which is what gives the fold its depth. */
.ek-scrub__stage { position: relative; margin-top: 44px; padding-block: 126px 150px; }
.ek-scrub__plate {
  --notch: 50%;
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,.88) 30%, rgba(252,253,254,.42) 62%, rgba(250,252,253,0) 96%);
  clip-path: polygon(
    0 22px,
    calc(var(--notch) - 46px) 22px,
    var(--notch) 68px,
    calc(var(--notch) + 46px) 22px,
    100% 22px, 100% 100%, 0 100%);
  filter: drop-shadow(0 -14px 28px rgba(31,45,74,.13));
}
.ek-scrub__stage > .ek-container { position: relative; z-index: 1; }
/* Every year is laid into the same grid cell, so the detail area is always as
   tall as the longest year and the page height never changes when you page
   through. Hiding with display:none instead made the document grow and shrink
   under the reader, which reads as the whole page jumping. */
.ek-scrub__detail { display: grid; }
.ek-scrub__panel { grid-area: 1 / 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ek-40) 90px;
  max-width: 1120px; margin-inline: auto; width: 100%;
  transition: opacity .28s var(--ek-ease); }
.ek-scrub__panel[hidden] { display: grid; visibility: hidden; opacity: 0; }
.ek-scrub__list { margin: 0; padding-left: 18px; list-style: none; }
.ek-scrub__list li { position: relative; font-size: 15px; line-height: 1.7; color: var(--ek-body-ink); }
.ek-scrub__list li + li { margin-top: 12px; }
.ek-scrub__list li::before { content: ""; position: absolute; left: -18px; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ek-steel); }
@media (max-width: 1023px) {
  .sec-scrub { padding-top: var(--ek-section-pad); }
  .sec-scrub__title { margin-bottom: var(--ek-40); }
  .ek-scrub { padding-inline: 54px; }
  .ek-year-btn { flex: 0 0 140px; height: 88px; }
  .ek-year-btn span { font-size: 22px; }
  .ek-scrub { --ek-scrub-line: 58px; }
  .ek-scrub__stage { margin-top: 24px; padding-block: 76px var(--ek-section-pad); }
  .ek-scrub__panel { grid-template-columns: 1fr; gap: var(--ek-16); }
}



/* Become a Distributor ------------------------------------------------------
   The brand promise is the page's subject, so it is set once at hero scale in
   outline and never repeated at that size. */
.sec-banner--pledge { min-height: clamp(560px, 44vw, 800px); }
.bd-pledge { position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  margin: 0; text-align: right; font-size: clamp(48px, 6.6vw, 118px); font-weight: 700;
  line-height: 1.02; letter-spacing: -2px; color: transparent;
  -webkit-text-stroke: 1px rgba(159,224,245,.34); pointer-events: none; }
@supports not (-webkit-text-stroke: 1px red) { .bd-pledge { color: rgba(159,224,245,.16); } }

.bd-honest { background: var(--ek-ground-light); }
/* Become a Distributor lost its dark "How you earn" band on 26 Aug 2026, and
   with it the page's only heavy block — five white cards on a pale ground with
   nothing to sit against. The promises section takes that job: same charcoal
   ground the band used, cards lifted off it rather than filled white. */
.bd-honest--dark { background: var(--ek-charcoal); }
.bd-honest--dark .ek-eyebrow { color: var(--ek-aqua); }
.bd-honest--dark .ek-h2 { color: var(--ek-white); }
.bd-honest--dark .ek-lead { color: rgba(255,255,255,.78); }
.bd-honest--dark .bd-promise-item { background: rgba(255,255,255,.055); }
.bd-honest--dark .bd-promise-item__no { color: rgba(255,255,255,.30); }
.bd-honest--dark .bd-promise-item__title { color: var(--ek-white); }
.bd-honest--dark .bd-promise-item__body { color: rgba(255,255,255,.70); }
.bd-honest--dark .bd-honest__foot { color: rgba(255,255,255,.78); }
.bd-promises { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 76px; }
.bd-promise-item { background: var(--ek-white); border-top: 3px solid var(--ek-aqua); padding: 34px 30px 38px; }
.bd-promise-item__no { display: block; font-size: 33px; font-weight: 700; line-height: 1; color: var(--ek-grey-out); }
.bd-promise-item__title { margin: 18px 0 0; font-size: var(--ek-h4); font-weight: 700; line-height: 1.3; color: var(--ek-blue); }
.bd-promise-item__body { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--ek-body-ink); }
.bd-honest__foot { margin-top: 48px; max-width: 762px; margin-left: auto; font-size: var(--ek-lead);
  line-height: var(--ek-lead-lh); color: var(--ek-body-ink); }

/* The one full-bleed dark moment on the page, and it carries the only claim
   about money that can honestly be made. */
.bd-earn { background: var(--ek-charcoal); padding-block: 118px; }
.bd-earn .ek-eyebrow { color: var(--ek-aqua); }
.bd-earn__line { margin-top: 20px; max-width: 1100px; font-size: clamp(26px, 2.6vw, 46px); font-weight: 700;
  line-height: 1.22; letter-spacing: -.5px; color: var(--ek-white); }
.bd-earn__note { margin-top: 28px; max-width: 720px; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.72); }

.bd-start { background: var(--ek-white); }
.bd-steps { list-style: none; margin: 76px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px; }
.bd-step { position: relative; padding-top: 54px; }
/* the rule that runs between the numbers */
.bd-step::before { content: ""; position: absolute; left: 0; right: -34px; top: 19px; height: 2px; background: var(--ek-grey-mid); }
.bd-step:last-child::before { display: none; }
.bd-step__dot { position: relative; z-index: 1; position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%; background: var(--ek-blue); color: var(--ek-white);
  display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.bd-step__title { margin: 0; font-size: var(--ek-h4); font-weight: 700; line-height: 1.3; color: var(--ek-blue); }
.bd-step__body { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--ek-body-ink); }

@media (max-width: 1199px) {
  .bd-pledge { display: none; }
  .bd-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--ek-40); }
  .bd-honest__foot { margin-left: 0; }
  .bd-earn { padding-block: var(--ek-section-pad); }
  .bd-steps { grid-template-columns: 1fr; gap: 0; margin-top: var(--ek-40); }
  .bd-step { padding: 0 0 32px 64px; }
  .bd-step::before { left: 19px; right: auto; top: 40px; bottom: -8px; width: 2px; height: auto; }
  .bd-step:last-child::before { display: none; }
  .bd-step:last-child { padding-bottom: 0; }
}
@media (max-width: 599px) { .bd-promises { grid-template-columns: 1fr; } }

/* FAQ (Figma legal page, 4:663) -------------------------------------------
   Category buttons down the left, the matching questions on the right, the
   active category filled Deep Vital Blue. */
.sec-faq { background: var(--ek-ground-light); }
.faq-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; }
.faq-side { position: sticky; top: 96px; }
.faq-nav { display: flex; flex-direction: column; gap: 8px; }
.faq-help { margin-top: 40px; padding: 32px 34px 34px; background: var(--ek-white); border-top: 3px solid var(--ek-aqua); }
.faq-help__title { font-size: var(--ek-h4); font-weight: 700; color: var(--ek-blue); }
.faq-help__body { margin: 12px 0 22px; font-size: 15px; line-height: 1.7; color: var(--ek-body-ink); }
.faq-help__body a { color: var(--ek-aqua); font-weight: 600; }
.faq-help__body a:hover { text-decoration: underline; }
.faq-cat {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer; font-family: inherit;
  background: var(--ek-panel-cool); color: var(--ek-charcoal);
  padding: 30px 34px; font-size: var(--ek-h4); font-weight: 700; line-height: 1.35;
  transition: background-color var(--ek-fast) var(--ek-ease), color var(--ek-fast) var(--ek-ease);
}
.faq-cat:hover { background: #DFE4E9; }
.faq-cat[aria-selected="true"] { background: var(--ek-blue); color: var(--ek-white); }
.faq-cat[aria-selected="true"]:hover { background: var(--ek-blue); }

.faq-body { max-width: 860px; }
.faq-panel[hidden] { display: none; }
/* Switching category changes the panel height. Easing the wrapper between the
   two heights keeps the document from changing length in a single frame,
   which is what made the scroll position snap. */
.faq-body--anim { overflow: hidden; transition: height var(--ek-slow) var(--ek-ease); }
.faq-panel { transition: opacity .34s var(--ek-ease), transform .34s var(--ek-ease); }
.faq-panel.is-entering { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
  .faq-body--anim { transition: none; }
  .faq-panel, .faq-panel.is-entering { transition: none; opacity: 1; transform: none; }
}
.faq-panel__title { margin: 0 0 8px; color: var(--ek-charcoal); }
.faq-item { padding-top: 40px; }
.faq-item__q { margin: 0; font-size: var(--ek-h3); font-weight: 700; line-height: 1.3; color: var(--ek-blue); }
.faq-item__a { margin-top: 14px; font-size: var(--ek-text); line-height: 1.75; color: var(--ek-body-ink); }
.faq-item__a a { color: var(--ek-aqua); font-weight: 600; }
.faq-item__a a:hover { text-decoration: underline; }

@media (max-width: 1199px) {
  .faq-layout { grid-template-columns: 1fr; gap: var(--ek-32); }
  .faq-side { position: static; }
  .faq-help { margin-top: var(--ek-24); }
  .faq-cat { padding: 20px 24px; font-size: 16px; }
  .faq-body { max-width: none; }
  .faq-item { padding-top: var(--ek-32); }
}

/* Community (Figma: "Who We Are - Community Social Responsibility", 4:1061) */
/* Header band with the twin radial glows, no statistics under it. */
.sec-glowhead { position: relative; overflow: hidden; background: var(--ek-ground-light); padding-block: 130px; }
.sec-glowhead::before, .sec-glowhead::after { content: ""; position: absolute; width: 1598px; height: 1598px; border-radius: 50%; pointer-events: none; }
.sec-glowhead::before { background: radial-gradient(circle, rgba(242,135,183,.16) 0%, rgba(242,135,183,0) 62%); left: -40%; top: -160%; }
.sec-glowhead::after  { background: radial-gradient(circle, rgba(42,167,207,.16) 0%, rgba(42,167,207,0) 62%); right: -34%; top: -120%; }
.sec-glowhead > .ek-container { position: relative; }
@media (max-width: 1199px) { .sec-glowhead { padding-block: var(--ek-section-pad); } }

/* Two features side by side, each card overlapping its photograph */
.ek-overlaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ek-overlap__media { height: 633px; background-size: cover; background-position: center; }
.ek-overlaps__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); margin: -70px auto 0; gap: 0; position: relative; }
.ek-overlap__card { background: var(--ek-white); padding: 60px 50px 70px; }
.ek-overlap__card:nth-child(2) { background: var(--ek-grey-light); }
.ek-overlap__title { font-size: var(--ek-h2); font-weight: 700; line-height: 1.2; color: var(--ek-blue); }
.ek-overlap__body { margin-top: 22px; font-size: 15px; line-height: 1.7; color: var(--ek-body-ink); }
.ek-overlap__body p + p { margin-top: 14px; }
@media (max-width: 1023px) {
  .ek-overlaps { grid-template-columns: 1fr; }
  .ek-overlap__media { height: 260px; }
  .ek-overlaps__cards { grid-template-columns: 1fr; margin-top: 0; width: 100%; }
  .ek-overlap__card { padding: 40px var(--ek-page-pad) 48px; }
}

/* A statistic panel. It stood in for a photograph while there was none; the
   --photo modifier puts the real one behind it. */
.ek-split__stat { background: var(--ek-blue); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 60px 40px; min-height: 460px; }
.ek-split__stat b { font-size: 60px; font-weight: 700; line-height: 1.1; color: var(--ek-white); }
.ek-split__stat > span { font-size: var(--ek-h3); font-weight: 500; color: var(--ek-grey-light); max-width: 340px; }
/* The photograph sits under the figure, not beside it. The copy is centred on
   both axes, so the scrim is a radial anchored on the middle — deepest exactly
   where the type is, easing off toward the corners so the hall, the donor beds
   and the yellow Elken shirts still read. One background shorthand: the gradient
   layer paints over the image, and both sit behind the text with no pseudo
   element and no stacking context to manage. Brand navy, so it stays the same
   panel it was rather than becoming a photo block. */
.ek-split__stat--photo {
  background:
    /* Brand navy, held lightly and only where the type is. */
    radial-gradient(ellipse 84% 70% at 50% 50%,
      rgba(32,34,89,.55) 0%, rgba(32,34,89,.44) 45%,
      rgba(32,34,89,.22) 78%, rgba(32,34,89,.10) 100%),
    /* The neutral ramp underneath does the contrast work. Splitting the two is
       what keeps the yellow Elken shirts yellow — a single navy sheet heavy
       enough to carry the type turned this warm interior purple, the same
       complementary-hue problem the campus banner had. */
    radial-gradient(ellipse 84% 70% at 50% 50%,
      rgba(var(--ek-scrim-rgb),.62) 0%, rgba(var(--ek-scrim-rgb),.54) 45%,
      rgba(var(--ek-scrim-rgb),.34) 78%, rgba(var(--ek-scrim-rgb),.22) 100%),
    url("../img/cm-blood-hd.jpg") center / cover no-repeat;
}
@media (max-width: 1023px) { .ek-split__stat { min-height: 240px; padding: 40px 24px; } .ek-split__stat b { font-size: 44px; } }

/* Mobile: one whole year at a time, never a clipped neighbour. */
@media (max-width: 767px) {
  .ek-scrub { gap: var(--ek-12); }
  .ek-year-btn { flex: 0 0 100%; }
}

/* ==========================================================================
   Global Strength
   No Figma frame exists for this page, so the composition is designed here —
   but only from parts the system already owns: the dark full-bleed band, the
   graduated blue statistic panels, the radial glow, the asymmetric two-up from
   the home page, and the overlapping card from Community.
   The page's job is weight and reach, so it opens dark and stays heavier than
   About, which opens light and stays editorial.
   ========================================================================== */

/* Hero: a dark band carrying a network diagram rather than a photograph.
   Nothing else on the site opens this way, which is the point.             */
.gs-hero { position: relative; overflow: hidden; background: #12163A;
  background-image:
    radial-gradient(1200px 900px at 78% 44%, rgba(42,167,207,.30) 0%, rgba(42,167,207,0) 62%),
    radial-gradient(900px 700px at 8% 78%, rgba(242,135,183,.20) 0%, rgba(242,135,183,0) 60%),
    linear-gradient(160deg, #191E4C 0%, #10142F 55%, #0A0D22 100%);
}
/* The globe covers the whole hero and the section's own edges do the cropping,
   so it reads as a planet the frame happens to cut rather than a picture in a
   box. The SVG viewBox is 1920 wide and "slice" scales it to cover, so at
   desktop widths one viewBox unit is one viewport pixel across — which is what
   lets the market labels be hand-placed and the left third stay clear. */
.gs-hero__media { position: absolute; inset: 0; }
/* Scrim over the globe's left flank so the headline always has a dark ground.
   ::after so it paints above the media; the copy sits above both on z-index 1. */
.gs-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(8,13,32,.88) 0%, rgba(8,13,32,.56) 13%, rgba(8,13,32,.20) 24%, rgba(8,13,32,0) 34%); }
.gs-map { display: block; width: 100%; height: 100%; }

.gs-hero__inner { position: relative; z-index: 1;
  width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2));
  margin-inline: auto; display: grid; align-items: center;
  padding-block: 150px 110px; min-height: min(92vh, 900px); }
.gs-hero__crumb { position: absolute; top: 82px; left: 0; }
.gs-hero__crumb .ek-breadcrumb { margin: 0; color: rgba(255,255,255,.55); font-size: 13px; }
.gs-hero__crumb .ek-breadcrumb a { color: rgba(255,255,255,.55); }
.gs-hero__crumb .ek-breadcrumb a:hover { color: var(--ek-white); }
/* Colour only. The size, weight and case stay on the shared .ek-eyebrow so the
   page speaks the same type language as the home page and About Us. */
.gs-hero .ek-eyebrow { color: var(--ek-aqua); }
.gs-hero .ek-h1 { margin-top: 18px; max-width: 580px; color: var(--ek-white); }
.gs-hero .ek-h1 .t-accent { color: var(--ek-pink); }
.gs-hero__sub { margin-top: 24px; max-width: 420px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.80); }
.gs-hero__pair { display: flex; gap: 48px; margin-top: 44px; }
.gs-hero__pair b { display: block; font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--ek-white); }
.gs-hero__pair span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.66); max-width: 220px; }
.gs-map__label { font-size: 22px; font-weight: 700; }
.gs-map__label--hub { font-size: 26px; }
.gs-map__sub { font-size: 19px; font-weight: 400; }

/* Below the desktop breakpoint the viewBox no longer maps 1:1 to pixels, the
   hand-placed labels fall under about 12px, and covering would crop the globe
   sideways and lose either Nigeria or Malaysia. So the graphic drops back into
   the flow at its natural aspect and the markets are named in plain text. */
.gs-map__key { display: none; }
@media (max-width: 1199px) {
  .gs-hero { display: flex; flex-direction: column; }
  .gs-hero__inner { order: 1; gap: 40px; padding-block: 120px 56px; min-height: 0; }
  .gs-hero__media { order: 2; position: static; padding-bottom: 56px; }
  .gs-map { height: clamp(280px, 34vw, 460px); }
  .gs-map__pins { display: none; }
  .gs-hero__crumb { top: 26px; }
  .gs-hero .ek-h1, .gs-hero__sub { max-width: none; }
  .gs-map__key { display: block; width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2));
    margin: 18px auto 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); }
}
@media (max-width: 767px) { .gs-hero__pair { gap: 32px; } .gs-hero__pair b { font-size: 30px; } }

/* The scale band: graduated blues, full bleed, straight after the hero so the
   page opens with one continuous heavy block. */
.gs-scale { background: var(--ek-blue); }
/* No gap. The 2px of --ek-blue showing between tiles read as a heavy dark rule
   rather than a hairline, so the six figures are butted together and separated
   by their own shades instead. That only works while no two neighbouring tiles
   carry the same shade, which is why the colour cycle is restated when the grid
   drops to two columns and one — see below. */
.gs-scale__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.gs-figure { padding: 62px 55px 66px; display: flex; flex-direction: column; gap: 8px; }
.gs-figure:nth-child(1), .gs-figure:nth-child(5) { background: var(--ek-stat-1); }
.gs-figure:nth-child(2), .gs-figure:nth-child(6) { background: var(--ek-stat-2); }
.gs-figure:nth-child(3), .gs-figure:nth-child(4) { background: var(--ek-stat-3); }
.gs-figure b { font-size: 52px; font-weight: 700; line-height: 1.1; color: var(--ek-white); }
.gs-figure span { font-size: 17px; font-weight: 500; line-height: 1.4; color: rgba(255,255,255,.78); }
@media (max-width: 1023px) { .gs-scale__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-figure { padding: 36px 28px 40px; } .gs-figure b { font-size: 38px; }
  /* The three-column order runs 1 2 3 / 3 1 2, a shifted row that keeps every
     neighbour different. Reflowed to two columns that puts tiles 3 and 4 side by
     side, both on shade 3, and they merge into one block. A plain 1 2 3 1 2 3
     cycle has no adjacent repeat in either two columns or one, so it covers both
     stacked layouts. */
  .gs-figure:nth-child(4) { background: var(--ek-stat-1); }
  .gs-figure:nth-child(5) { background: var(--ek-stat-2); }
  .gs-figure:nth-child(6) { background: var(--ek-stat-3); } }
@media (max-width: 599px) { .gs-scale__grid { grid-template-columns: 1fr; } }

/* Asymmetric two-up, the composition the home page uses for its R&D band. */
.gs-band { display: grid; }
.gs-band--a { grid-template-columns: 523fr 437fr 960fr; }
.gs-band--b { grid-template-columns: 960fr 960fr; }
.gs-band__media { min-height: 500px; background-size: cover; background-position: center; }
.gs-band__panel { background: var(--ek-grey-light); display: flex; flex-direction: column;
  justify-content: center; gap: 14px; padding: 78px 48px; }
.gs-band__panel--wide { padding: 78px 100px 78px 84px; }
.gs-band__title { font-size: var(--ek-h2); font-weight: 700; line-height: 1.2; color: var(--ek-blue); }
.gs-band__copy { font-size: 15px; line-height: 1.7; color: var(--ek-body-ink); max-width: 583px; }
@media (max-width: 1023px) {
  .gs-band--a, .gs-band--b { grid-template-columns: 1fr; }
  .gs-band__media { min-height: 240px; }
  .gs-band__panel, .gs-band__panel--wide { padding: 44px var(--ek-page-pad); }
}

/* One large full-bleed photograph with a single card overlapping it. */
.gs-campus__media { height: 700px; background-size: cover; background-position: center; }
.gs-campus__card { width: min(760px, 100% - (var(--ek-page-pad) * 2)); margin: -140px auto 0;
  position: relative; background: var(--ek-white); padding: 66px 70px 72px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1023px) { .gs-campus__media { height: 300px; } .gs-campus__card { margin-top: 0; width: 100%; padding: 44px var(--ek-page-pad); } }

/* The laboratory statement: one number carrying the whole section. */
.gs-lab { background: var(--ek-charcoal); position: relative; overflow: hidden; isolation: isolate; }

/* The laboratory photograph is environment, not exhibit. It is anchored to the section's
   top-right corner and dissolved with a radial mask whose centre sits on that corner, so
   it is fully present where it bleeds off the page and gone by the time it reaches the
   copy column and the foot of the ISO 17025 mark. The image itself was graded down into
   the charcoal range before export, which is why it reads as depth in the dark ground
   rather than as a bright rectangle laid over it. Two knobs to turn: --gs-lab-photo-w
   for how far across it reaches, --gs-lab-photo-o for how present it is. */
.gs-lab__photo { position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none;
  width: var(--gs-lab-photo-w, 50%); height: 100%;
  opacity: var(--gs-lab-photo-o, .95); overflow: hidden; }
.gs-lab__photo img { width: 100%; height: 100%; object-fit: cover;
  object-position: var(--gs-lab-photo-pos, 88% 48%); display: block; }
/* Four scrims of the section's own charcoal, stacked. Because the ground behind the
   photograph is that exact colour, painting it back at full alpha erases the image
   completely, which is what dissolves the edges: the diagonal carries the bottom-left
   away, and the three edge passes stop the layer ever reading as a rectangle. The
   top-right corner is the only place all four are at zero, so that is where the
   laboratory stays sharp. */
.gs-lab__photo::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(37,41,44,.6) 0%, rgba(37,41,44,0) 20%),
    linear-gradient(to top, var(--ek-charcoal) 0%, rgba(37,41,44,.82) 14%, rgba(37,41,44,0) 44%),
    linear-gradient(to right, var(--ek-charcoal) 0%, rgba(37,41,44,.86) 14%, rgba(37,41,44,0) 46%),
    linear-gradient(216deg, rgba(37,41,44,0) 14%, rgba(37,41,44,.32) 34%,
      rgba(37,41,44,.63) 53%, rgba(37,41,44,.9) 78%, var(--ek-charcoal) 100%); }
.gs-lab__inner { position: relative; z-index: 1;
  width: min(var(--ek-content-max), 100% - (var(--ek-page-pad) * 2)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 100px; align-items: center; padding-block: 150px; }
.gs-lab__mark { font-size: clamp(64px, 9vw, 150px); font-weight: 700; line-height: .95;
  letter-spacing: -4px; color: var(--ek-aqua); }
.gs-lab__mark small { display: block; margin-top: 20px; font-size: 17px; font-weight: 500;
  letter-spacing: 0; color: rgba(255,255,255,.7); }
.gs-lab__copy p { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.82); }
.gs-lab__copy p + p { margin-top: 16px; }
.gs-lab__copy h2 { color: var(--ek-white); margin-bottom: 20px; }
@media (max-width: 1023px) { .gs-lab__inner { grid-template-columns: 1fr; gap: 40px; padding-block: var(--ek-section-pad); }
  /* Stacked, the copy runs the full width and there is no empty right-hand column left
     to give the photograph. It retreats to a corner wash: the top-right two-fifths of the
     section, at well under half strength, so it still carries depth behind the heading
     without ever getting under a line of body text. */
  .gs-lab__photo { width: 72%; height: 46%; opacity: .42; }
  .gs-lab__photo img { object-position: 78% 40%; }
  .gs-lab__photo::after { background:
    linear-gradient(to bottom, rgba(37,41,44,.55) 0%, rgba(37,41,44,0) 26%),
    linear-gradient(to top, var(--ek-charcoal) 0%, rgba(37,41,44,.85) 18%, rgba(37,41,44,0) 62%),
    linear-gradient(to right, var(--ek-charcoal) 0%, rgba(37,41,44,.9) 16%, rgba(37,41,44,0) 58%),
    linear-gradient(212deg, rgba(37,41,44,0) 10%, rgba(37,41,44,.45) 40%,
      rgba(37,41,44,.85) 68%, var(--ek-charcoal) 92%); } }

/* Markets, set quietly after the heavy sections. */
.gs-markets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 76px; }
.gs-market { background: var(--ek-white); padding: 30px 32px 34px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.gs-market b { font-size: 17px; font-weight: 700; color: var(--ek-charcoal); }
.gs-market span { font-size: 15px; color: #6B7278; }
.gs-market--here { background: var(--ek-blue); }
.gs-market--here b { color: var(--ek-white); }
.gs-market--here span { color: var(--ek-pink); }
@media (max-width: 1199px) { .gs-markets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .gs-markets { grid-template-columns: 1fr; } }
/* Nigeria closes the markets grid, so the row finishes rather than leaving a hole. */
/* Nigeria takes the whole final row. It used to span two of four columns,
   which sat flush at the end of a row when the list was eleven. At thirteen the
   twelve Asian branches fill three rows exactly and Nigeria starts a fresh one,
   so a two-column span left two empty cells beside it. Full width also reads
   better: the newest market, on its own line. */
.gs-market--here { grid-column: 1 / -1; }
@media (max-width: 599px) { .gs-market--here { grid-column: span 1; } }


/* Banner variant for the Abuja head office photograph (About Us) -----------
   The building sits centre-right in the frame with the neighbouring compound
   filling the left. At 1200 and above the plate is scaled to 110% and anchored
   left, which walks the building clear of the 633px copy column and makes it
   the larger object in the frame while keeping the whole facade, the sign and
   the entrance inside the crop. Below 1200 the copy sits over the picture
   rather than beside it, so the crop is aimed at the building instead.
   The wash is the titlewash ramp with a faster falloff: it holds the same
   weight under the headline and the pink accent line, then releases at the
   facade rather than carrying a .12 haze to the right edge. Measured with the
   copy hidden, worst case at 1600 / 1440 / 1280 / 1024 is 3.46:1 on the pink
   accent line (AA large) and 7.4:1 on the standfirst. */
@media (min-width: 1200px) {
  .sec-banner--officewash .sec-banner__bg { background-size: 110% auto; background-position: left center; }
}
@media (max-width: 1199px) {
  .sec-banner--officewash .sec-banner__bg { background-position: 55% center; }
}
.sec-banner--officewash .sec-banner__veil {
  background:
    /* Top band, as titlewash: the overlaid header sits over this photograph's bright sky. */
    linear-gradient(180deg, rgba(var(--ek-scrim-rgb), .62) 0%,
      rgba(var(--ek-scrim-rgb), .18) 22%, rgba(var(--ek-scrim-rgb), 0) 44%),
    /* A soft brand-navy hue behind the title only, gone before the facade. */
    linear-gradient(96deg, rgba(12,17,52,.46) 0%, rgba(12,17,52,.26) 30%, rgba(12,17,52,0) 52%),
    /* The neutral ramp that carries the contrast without tinting the photograph. */
    linear-gradient(96deg, rgba(var(--ek-scrim-rgb), .82) 0%, rgba(var(--ek-scrim-rgb), .79) 26%,
      rgba(var(--ek-scrim-rgb), .73) 42%, rgba(var(--ek-scrim-rgb), .56) 52%,
      rgba(var(--ek-scrim-rgb), .30) 62%, rgba(var(--ek-scrim-rgb), .12) 73%,
      rgba(var(--ek-scrim-rgb), .04) 85%, rgba(var(--ek-scrim-rgb), 0) 100%); }
@media (max-width: 767px) {
  .sec-banner--officewash .sec-banner__veil {
    background: linear-gradient(180deg, rgba(var(--ek-scrim-rgb), .74) 0%, rgba(var(--ek-scrim-rgb), .62) 100%); }
}