/* ==========================================================================
   Kenya Skys Credit Ltd — Design System
   Brand colours sampled directly from the 2026 logo (deep green, gold, cream).
   ========================================================================== */

:root {
  /* --- Brand palette, sampled from the 2026 logo and brand cover ---------- */
  --brand-green: #184131;       /* seal lettering — the primary brand colour */
  --brand-green-dark: #123528;
  --brand-green-deep: #0B2419;
  --brand-gold: #C5B36B;        /* seal ring / chart block — decorative accent */
  --brand-gold-hover: #B09C52;
  --brand-gold-deep: #7A6A2E;   /* darkened gold, safe as text on light bgs */
  --brand-cream: #FFFBDE;       /* seal centre — pale section background */
  --brand-sand: #EFE4BD;

  /* --- Role tokens -------------------------------------------------------
     The role names predate the rebrand and are kept so every existing rule
     rethemes from this one block. Read them by role, not by name:
     "sky" and "gold" = the marked gold, "royal" = the marked green. The two
     marked brand colours are the only hues in the palette; the rest are
     neutrals derived from them. */
  --sky: var(--brand-gold);        /* accent — backgrounds, icons, dots ONLY */
  --sky-dark: var(--brand-gold-deep);
  --sky-tint: var(--brand-cream);  /* pale section background */
  --sky-tint-2: var(--brand-sand);
  --royal: var(--brand-green);     /* headings, text-safe, CTAs */
  --royal-dark: var(--brand-green-dark);
  --royal-deep: var(--brand-green-deep);
  --ink: #1E2A24;           /* body text, warm near-black green */
  --ink-soft: #4A5A52;
  --white: #FFFFFF;
  --gold: var(--brand-gold);       /* highlights — kept on the marked gold */
  --border: #E6DCBB;
  --shadow: 0 10px 30px rgba(11, 36, 25, 0.10);
  --shadow-lg: 0 20px 50px rgba(11, 36, 25, 0.16);
  --radius: 16px;
  --radius-sm: 10px;
  --container: 1180px;
  --header-h: 96px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.ic svg, .dot svg, .wa-float svg { width: 1em; height: 1em; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', 'Inter', sans-serif;
  color: var(--royal-deep);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: var(--royal); text-decoration: none; }
img { max-width: 100%; display: block; }
ul { padding: 0; margin: 0; list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky-dark);
  background: var(--sky-tint);
  border: 1px solid var(--sky-tint-2);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sky);
}

.section { padding: 88px 0; }
.section--tint { background: var(--sky-tint); }
.section--royal {
  background: linear-gradient(135deg, var(--royal-deep), var(--royal) 70%);
  color: var(--white);
}
.section--royal h2, .section--royal h3 { color: var(--white); }
.section--royal p { color: rgba(255,255,255,.82); }
.section-head { max-width: 680px; margin: 0 0 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--royal); color: var(--white); box-shadow: 0 12px 24px rgba(24,65,49,.28); }
.btn--primary:hover { background: var(--royal-dark); box-shadow: 0 16px 30px rgba(24,65,49,.36); transform: translateY(-2px); }
.btn--sky { background: var(--sky); color: var(--royal-deep); box-shadow: 0 12px 24px rgba(197,179,107,.32); }
.btn--sky:hover { background: var(--brand-gold-hover); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--royal); border-color: var(--royal); }
.btn--ghost:hover { background: var(--royal); color: var(--white); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
.btn--ghost-light:hover { background: var(--white); color: var(--royal); border-color: var(--white); }
.btn--block { width: 100%; justify-content: center; }

/* ===================== Header / Nav ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: flex; align-items: center; gap: 12px; font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--royal-deep); font-size: 1.08rem; }
.brand img { height: 80px; width: 80px; }
.brand small { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: .7rem; color: var(--sky-dark); letter-spacing: .04em; }

/* The brand block must never squeeze the nav — it keeps its natural width, and
   the nav takes whatever is left and tightens itself to fit (see the clamp on
   the links below). */
.nav-links { display: flex; align-items: center; gap: clamp(2px, .4vw, 4px); min-width: 0; }
.nav-links a {
  /* Padding and type scale down on narrower desktops so the seven top-level
     items stay on one line without ever wrapping. The max is 13px rather than
     the old 16px because the container caps at 1180px — past that the viewport
     keeps growing but the space available to the nav does not. Adding an eighth
     item is the point at which this needs revisiting. */
  padding: 10px clamp(9px, 1.15vw, 13px);
  font-size: clamp(.85rem, .92vw, .95rem);
  white-space: nowrap;
  border-radius: 999px;
  font-weight: 600;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover, .nav-links a.active { background: var(--sky-tint); color: var(--royal); }
.nav-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--white);
  position: relative;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--royal-deep);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle::before { top: 15px; }
.nav-toggle span { top: 21px; }
.nav-toggle::after { top: 27px; }
.nav-toggle.is-open::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open::after { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle.is-open span { opacity: 0; }

/* ===================== Hero ===================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--royal-deep) 0%, var(--royal) 55%, var(--sky-dark) 100%);
  color: var(--white);
  padding: 56px 0;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 981px) {
  .hero { min-height: min(calc(100vh - var(--header-h)), 760px); display: flex; align-items: center; }
}
.hero-copy .eyebrow { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: var(--white); }
.hero-copy .eyebrow::before { background: var(--sky); }
.hero h1 { color: var(--white); letter-spacing: -0.02em; }
.hero-copy p.lead { color: rgba(255,255,255,.78); font-size: 1.12rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-stats { display: flex; gap: 32px; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); flex-wrap: wrap; }
.hero-stats div strong { display: block; font-family: 'Poppins', sans-serif; font-size: 1.6rem; color: var(--white); letter-spacing: -0.01em; }
.hero-stats div span { font-size: .82rem; color: rgba(255,255,255,.6); }

/* Editorial photo card — one real, well-framed photo with calculated depth
   (soft directional shadow, single restrained accent glow, subtle inset
   highlight) and one clean glass proof-chip. No gimmicky tilt-stack. */
.hero-media { display: flex; justify-content: center; }
.hero-visual { position: relative; width: 100%; max-width: 460px; margin: 20px 0 56px; }
.visual-glow {
  position: absolute;
  inset: -10% -10% -10% 20%;
  background: radial-gradient(circle at 50% 40%, rgba(197,179,107,.32), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}
.visual-frame {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(5,18,12,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.visual-frame img { width: 100%; display: block; }
.visual-chip {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: -30px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(11,36,25,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 16px 32px rgba(5,18,12,.35);
  max-width: calc(100% - 48px);
}
.visual-chip .ic {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(197,179,107,.2);
  border: 1px solid rgba(197,179,107,.4);
  color: var(--sky);
  display: grid; place-items: center;
  font-size: 1rem;
}
.visual-chip strong { display: block; font-family: 'Poppins', sans-serif; font-size: .95rem; color: var(--white); text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.visual-chip span { font-size: .76rem; color: rgba(255,255,255,.72); }
@media (max-width: 640px) {
  .visual-chip { left: 16px; bottom: -24px; padding: 12px 16px; }
}

/* Curved section transitions instead of hard colour seams */
.wave-divider { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 2; pointer-events: none; }
.wave-divider svg { width: 100%; height: 46px; display: block; }

/* Page hero (inner pages, no photo, shorter) */
.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--royal-deep), var(--royal) 80%);
  color: var(--white);
  padding: 64px 0 92px;
  text-align: center;
}
.page-hero h1 { color: var(--white); margin-bottom: 12px; }
.page-hero p { color: rgba(255,255,255,.82); max-width: 60ch; margin: 0 auto; }
.page-hero .eyebrow { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: var(--white); }
.page-hero .eyebrow::before { background: var(--sky); }

/* ===================== Trust strip ===================== */
.trust-strip { background: var(--royal-deep); position: relative; }
.trust-strip::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-grid > * { min-width: 0; }
.trust-item { display: flex; align-items: center; gap: 14px; padding: 32px 26px; border-left: 1px solid rgba(255,255,255,.1); }
.trust-item:first-child { border-left: none; }
.trust-item .ic {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 11px;
  background: rgba(197,179,107,.14);
  border: 1px solid rgba(197,179,107,.35);
  color: var(--sky);
  display: grid; place-items: center;
  font-size: 1.05rem;
}
.trust-item strong { display: block; color: var(--white); font-size: .92rem; font-weight: 700; letter-spacing: -0.01em; }
.trust-item span { display: block; color: rgba(255,255,255,.55); font-size: .78rem; margin-top: 2px; }
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2n+1) { border-left: none; }
  .trust-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 560px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { border-left: none !important; border-top: 1px solid rgba(255,255,255,.1); }
  .trust-item:first-child { border-top: none; }
}

/* ===================== Grids & Cards ===================== */
.grid { display: grid; gap: 28px; }
/* Grid items default to min-width:auto, so text content can force a track
   wider than its 1fr share and overflow the row on narrow screens. */
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: flex-start; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card .ic {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--sky-tint);
  color: var(--royal);
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
}
.card h3 { margin-bottom: 8px; }
.card p { margin-bottom: 0; font-size: .95rem; }

/* Always centred, with enough space above that it reads as the section's own
   call to action rather than something hanging off the last card. */
.sectors-cta { text-align: center; margin-top: 72px; }
@media (max-width: 760px) { .sectors-cta { margin-top: 52px; } }

/* Flip cards — front photo, back reveals how that sector is actually financed.
   Hover flips on desktop; a tap toggles .is-flipped via JS for touch devices,
   since there's no hover state to discover there. */
.sector-flip { position: relative; perspective: 1600px; }
.sector-flip-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  transition: transform .7s cubic-bezier(.4, .15, .2, 1);
  transform-style: preserve-3d;
}
.sector-flip:hover .sector-flip-inner,
.sector-flip.is-flipped .sector-flip-inner {
  transform: rotateY(180deg);
}
.sector-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.sector-face--front img { width: 100%; height: 100%; object-fit: cover; }
.sector-face--front .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,36,25,.92) 0%, rgba(11,36,25,.15) 55%, rgba(11,36,25,0) 75%);
  display: flex; align-items: flex-end;
  padding: 22px;
}
.sector-face--front h3 { color: var(--white); font-size: 1.08rem; margin: 0; }
.sector-face--front span { color: var(--sky); display: block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.sector-face--back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, var(--royal-deep), var(--royal) 85%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
}
.sector-face--back .ic {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 12px;
  background: rgba(197,179,107,.18);
  border: 1px solid rgba(197,179,107,.4);
  color: var(--sky);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.sector-face--back h3 { color: var(--white); font-size: 1.05rem; margin-bottom: 10px; }
.sector-face--back p { color: rgba(255,255,255,.82); font-size: .89rem; margin: 0; line-height: 1.55; }

@keyframes flipHintPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197,179,107,.55); }
  50% { box-shadow: 0 0 0 7px rgba(197,179,107,0); }
}
.sector-flip-badge {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(11,36,25,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.35);
  color: var(--white);
  display: grid; place-items: center;
  pointer-events: none;
  animation: flipHintPulse 2.4s ease-in-out infinite;
}
.sector-flip-badge svg { width: 15px; height: 15px; }
.sector-flip:hover .sector-flip-badge,
.sector-flip.is-flipped .sector-flip-badge { opacity: 0; }

/* Values */
.value-tile { text-align: center; padding: 26px 16px; }
.value-tile .ic {
  margin: 0 auto 16px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky-dark), var(--royal));
  display: grid; place-items: center;
  color: var(--white);
  font-size: 1.5rem;
}
.value-tile h3 { font-size: 1.02rem; }

/* Two-col content block */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }
.split.reverse .split-media { order: 2; }

/* Timeline (About story) */
.timeline { display: grid; gap: 22px; margin-top: 8px; }
.timeline--intro { margin-top: 60px; max-width: 760px; }
.timeline-item { display: flex; gap: 18px; }
.timeline-item .yr {
  flex-shrink: 0;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--royal);
  color: var(--white);
  display: grid; place-items: center;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  font-size: .95rem;
}
.timeline-item p { margin: 0; }
.timeline-item strong { color: var(--royal-deep); display: block; margin-bottom: 2px; }

/* Management team */
.staff-card {
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
  /* Column flex so the info block absorbs the extra height when the grid row
     stretches cards to match the tallest one — otherwise short roles like
     "Marketing" leave a ragged gap under the text. */
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.staff-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* Fixed photo height (not aspect-ratio) so every portrait crops to the exact
   same box no matter the source image's dimensions. Retuned per breakpoint
   because the card width swings from 262px (4-col) to 452px (2-col); one
   global height would squash the wide cards into a landscape band. */
.staff-avatar {
  width: 100%;
  height: 330px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 0;
  background: linear-gradient(135deg, var(--sky-tint), var(--sky-tint-2));
  display: grid; place-items: center;
  /* Safety net: nothing may ever spill out of the photo box onto the name. */
  overflow: hidden;
  min-height: 0;
  color: var(--royal);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
}
/* place-items:center (needed to centre the placeholder initials) stops the
   photo from stretching, so a tall source like the CEO's 1023x1537 portrait
   sized itself from its own aspect ratio — 391px inside a 330px box — and ran
   over the name. Photo cards get plain block layout so height:100% resolves
   against the fixed box instead. */
.staff-avatar.has-photo { display: block; }
.staff-avatar.has-photo img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 980px) { .staff-avatar { height: 460px; } }
@media (max-width: 760px) { .staff-avatar { height: 350px; } }
@media (max-width: 520px) { .staff-avatar { height: 250px; } }
@media (max-width: 480px) { .staff-avatar { height: 450px; } }
.staff-info {
  padding: 16px 16px 20px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Without this, flex items stretch full-width and the .soon pill loses its
     rounded hug-the-text shape. */
  align-items: center;
}
.staff-card h3 { font-size: 1rem; margin-bottom: 4px; }
.staff-card .role-tag { color: var(--sky-dark); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.staff-card .soon { display: inline-block; margin-top: 10px; font-size: .74rem; color: var(--ink-soft); background: var(--sky-tint); padding: 3px 10px; border-radius: 999px; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--royal-deep), var(--royal));
  border-radius: 28px;
  padding: 56px;
  text-align: center;
  color: var(--white);
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: var(--white); margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 60ch; margin: 0 auto 28px; }
.cta-band .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ===================== Footer ===================== */
.site-footer { background: var(--royal-deep); color: rgba(255,255,255,.78); padding: 72px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-grid > * { min-width: 0; }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.footer-brand img { height: 72px; width: 72px; }
.footer-brand span { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--white); font-size: 1.05rem; }
.footer-col h4 { color: var(--white); font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,.72); font-size: .92rem; }
.footer-col a:hover { color: var(--sky); }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 14px; font-size: .92rem; align-items: flex-start; }
.footer-contact .ic { color: var(--sky); flex-shrink: 0; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: .82rem; flex-wrap: wrap; gap: 10px; }
.footer-bottom a { color: rgba(255,255,255,.6); }

/* ===================== Forms ===================== */
.form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow); }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; color: var(--royal-deep); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  font-family: inherit;
  font-size: .96rem;
  color: var(--ink);
  background: #FFFDF2;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(197,179,107,.14);
}
.field textarea { resize: vertical; min-height: 130px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; }
.form-note { font-size: .82rem; color: var(--ink-soft); margin-top: 8px; }
.form-status { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: .92rem; font-weight: 600; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: #E5F8EE; color: #146C43; border: 1px solid #BEE9CF; }
.form-status.err { background: #FDECEC; color: #B02A2A; border: 1px solid #F5C6C6; }

/* ===================== Contact page extras ===================== */
.contact-info-list { display: grid; gap: 20px; margin-bottom: 32px; }
.contact-info-item h3 { margin-bottom: 2px; }
.section-subhead { margin-bottom: 24px; }
.footer-tagline { max-width: 32ch; font-size: .9rem; }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-info-item .ic {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 14px; background: var(--sky-tint);
  color: var(--royal);
  display: grid; place-items: center; font-size: 1.3rem;
}
.map-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.map-frame iframe { width: 100%; height: 320px; border: 0; display: block; }

.office-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); margin: 20px 0; }
.office-photo img { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.office-photo figcaption { padding: 12px 18px; font-size: .88rem; color: var(--ink-soft); background: var(--white); }

/* ===================== WhatsApp float button ===================== */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px rgba(37,211,102,.42);
  font-size: 1.7rem;
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.08); }

/* ===================== Scroll reveal =====================
   Hidden state only applies once JS has confirmed it's running (html.js,
   set synchronously in <head><meta charset="utf-8">) and will animate elements back in via
   IntersectionObserver. If JS is slow, blocked, or disabled, content is
   simply visible by default — it never depends on JS to be readable. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ===================== Utilities ===================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.badge-num { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--royal); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 420px; margin: 0 auto; }
  .hero-badge { left: 10px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.reverse .split-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Nav switches to the hamburger menu well before general content reflows —
   "Products & Services" and the CTA button need real room to stay on one
   line, so this breaks earlier than the 760px content breakpoint below.
   Raised from 960px to 1080px when "News Room" made this a seven-item nav:
   below this width the links can no longer tighten enough (see the clamp on
   .nav-links a) to sit on one line beside the brand and the CTA button.
   Measured, not guessed — at 1081px the row needs ~1005px of the 1033px
   available; at 1041px it overflows. */
@media (max-width: 1080px) {
  .nav-links, .nav-cta .btn--ghost { display: none; }
  .nav-toggle { display: block; }
  .nav-links.is-open {
    display: flex;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 16px 24px 24px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    gap: 4px;
  }
  .nav-links.is-open a { width: 100%; }
}

@media (max-width: 760px) {
  .section { padding: 60px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr 1fr; }
  .grid--6 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .cta-band { padding: 40px 24px; }
  .hero-stats { gap: 22px; }
}

@media (max-width: 520px) {
  .grid--2 { grid-template-columns: 1fr; }
  .grid--3, .grid--4, .grid--6 { grid-template-columns: 1fr 1fr; }
  .hero-actions .btn, .btn--block-mobile { width: 100%; justify-content: center; }
}

/* On very small phones even a 2-column grid leaves too little room for
   sector-flip back-face copy and card text, so drop to a single column. */
@media (max-width: 480px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Card sets whose final row is partly empty (sector cards, empowerment
   programmes) must keep that row centred rather than flush left.

   This was previously `*:last-child:nth-child(odd) { grid-column: 2 }`, which
   only worked for the exact counts in use (7 and 5) and broke as soon as cards
   were added — with 9 cards the rule still fired and kicked the last card onto
   a row of its own, and with 8 it did nothing at all.

   Flex wrapping with justify-content:center centres whatever is left over for
   ANY number of cards, so programmes can be added or removed freely. The basis
   reproduces the grid's column counts exactly: grid--3 is 3/2/1 across 980 and
   480; grid--2 is 2/1 across 520. */
.grid.cards-center-last {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.cards-center-last > * {
  flex: 0 1 var(--card-basis);
  max-width: var(--card-basis);
}
.grid--3.cards-center-last { --card-basis: calc((100% - 56px) / 3); }
.grid--2.cards-center-last { --card-basis: calc((100% - 28px) / 2); }
@media (max-width: 980px) {
  .grid--3.cards-center-last { --card-basis: calc((100% - 28px) / 2); }
}
@media (max-width: 520px) {
  .grid--2.cards-center-last { --card-basis: 100%; }
}
@media (max-width: 480px) {
  .grid--3.cards-center-last { --card-basis: 100%; }
}

.card .badge-num { display: block; font-size: 1.6rem; margin-bottom: 10px; }

/* Core Products (services page) is a fixed 3-card grid — a clean single row
   of 3 on desktop needs no centering, but at the 2-column tablet/phone
   breakpoint the 3rd card would otherwise sit alone, flush left. */
@media (max-width: 760px) and (min-width: 481px) {
  .core-products-grid > *:last-child:nth-child(odd) {
    grid-column: 2;
  }
}

/* Checklist — used for "Our Approach" outcomes, deliberately a plain list of
   rows rather than a boxed card grid so it doesn't read as a copy of the
   icon-card grid used for Core Focus / programmes right above and below it. */
.check-list { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 4px 0 4px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}
.check-item:last-child { border-bottom: none; }
.check-item .ic {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sky-tint);
  color: var(--royal);
  display: grid; place-items: center;
}
.check-item .ic svg { width: 16px; height: 16px; }
.check-item p { margin: 0; padding-top: 4px; }

/* Story timeline — connect the year badges with a through-line and give the
   open-ended "Today" entry a distinct look so the journey reads as a line,
   not just a stack of identical circles. */
.timeline--intro { position: relative; }
.timeline--intro::before {
  content: '';
  position: absolute;
  top: 37px; bottom: 37px; left: 37px;
  width: 2px;
  background: var(--border);
}
.timeline-item .yr {
  position: relative;
  box-shadow: 0 0 0 4px var(--white);
}
.timeline-item:last-child .yr {
  background: linear-gradient(135deg, var(--sky-dark), var(--royal));
  box-shadow: 0 0 0 4px var(--white), 0 0 0 8px rgba(197,179,107,.18);
}


/* ==========================================================================
   News Room
   Vertical (9:16) field videos shot on phones, so the cards are built around a
   portrait frame rather than the 16:9 the rest of the web assumes. Cards are
   laid out with flex + justify-content:center on a FIXED basis (not 1fr
   columns) so the grid stays visually identical whether there are 2 videos or
   20 — adding a story never restretches the existing cards, and a partly
   filled last row stays centred. Same principle as .cards-center-last above.
   ========================================================================== */
.news-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
/* The card is an <article> so the headings and copy stay real document
   structure; the focusable control is the .news-play button inside it. The
   whole card is still clickable for mouse/touch (delegated in newsroom.js),
   and :focus-within lifts the card when that button is keyboard-focused. */
.news-card {
  flex: 0 1 320px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.news-card:hover,
.news-card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.news-media {
  position: relative;
  aspect-ratio: 9 / 16;
  background: linear-gradient(135deg, var(--sky-tint), var(--sky-tint-2));
  overflow: hidden;
}
.news-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.news-card:hover .news-media img { transform: scale(1.05); }
/* Scrim keeps the duration chip legible over any frame. */
.news-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,36,25,0) 55%, rgba(11,36,25,.6) 100%);
  z-index: 1;
}
.news-play {
  position: absolute; inset: 0; margin: auto;
  width: 66px; height: 66px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  display: grid; place-items: center;
  background: rgba(255,255,255,.94);
  color: var(--royal);
  box-shadow: 0 12px 30px rgba(5,18,12,.45);
  transition: transform .25s ease, background .25s ease;
}
/* Optical centring — a play triangle reads left-heavy inside a circle. */
.news-play svg { width: 26px; height: 26px; margin-left: 3px; }
.news-card:hover .news-play,
.news-play:focus-visible { transform: scale(1.1); background: var(--white); }
.news-play:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.news-duration {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(11,36,25,.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--white);
  font-size: .74rem; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.news-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.news-tag {
  color: var(--sky-dark);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 10px;
}
.news-body h3 { font-size: 1.05rem; margin-bottom: 8px; }
.news-body p { font-size: .9rem; margin-bottom: 16px; }
/* margin-top:auto pins the date to the bottom so cards of differing copy
   length still line their footers up across a row. */
.news-date {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--ink-soft);
}
.news-date svg { width: 15px; height: 15px; color: var(--sky-dark); flex-shrink: 0; }

/* ---------- Lightbox player ----------
   Above .wa-float (z-index 200), which would otherwise float over the video. */
.news-lightbox {
  position: fixed; inset: 0;
  z-index: 400;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(7,22,15,.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.news-lightbox.is-open { display: grid; }
.news-lightbox-inner {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  animation: news-pop .28s ease;
}
@keyframes news-pop {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.news-lightbox video {
  width: 100%;
  /* Leave headroom for the caption so a tall 9:16 clip never overflows. */
  max-height: calc(100vh - 150px);
  border-radius: 18px;
  background: #000;
  display: block;
  box-shadow: 0 30px 60px rgba(5,18,12,.55);
}
.news-lightbox-caption {
  margin: 16px 0 0;
  text-align: center;
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.4;
}
.news-lightbox-meta {
  display: block;
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: .8rem;
  color: rgba(255,255,255,.62);
}
/* Fixed to the viewport, not the dialog, so it is always reachable on a
   short phone screen where the video fills the height. */
.news-close {
  position: fixed; top: 18px; right: 18px;
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--white);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease;
}
.news-close:hover { background: rgba(255,255,255,.26); transform: rotate(90deg); }
.news-close:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.news-close svg { width: 20px; height: 20px; }

/* Stop the page behind the lightbox from scrolling on touch devices. */
body.news-lightbox-open { overflow: hidden; }

@media (max-width: 400px) {
  .news-grid { gap: 24px; }
  .news-card { flex-basis: 100%; max-width: 100%; }
  .news-close { top: 10px; right: 10px; width: 40px; height: 40px; }
}