/* Bariki Pharmacy: public website.
   Brand tokens match the app and back office (bariki-app/public/css/base.css). */

:root {
  --g: #00a251;
  --g-mid: #009149;
  --g-dark: #00713a;
  --g-deep: #00522a;
  --g-soft: #e8f6ee;
  --g-line: #bfe6cf;
  --g-accent: #00713a;   /* green text on a light or soft surface */

  --ink: #0e1d15;
  --ink-2: #44544b;
  --ink-3: #75857c;
  --line: #e3eae6;
  --bg: #ffffff;
  --bg-2: #f3f6f4;
  --card: #ffffff;

  --amber: #d97706;
  --amber-soft: #fef3c7;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(8, 30, 20, .06), 0 8px 28px rgba(8, 30, 20, .07);
  --shadow-lg: 0 2px 4px rgba(8, 30, 20, .06), 0 18px 50px rgba(8, 30, 20, .12);
  --maxw: 1160px;
  --header-h: 70px;
  --cycle: 2800ms;      /* how long each app screen is shown; the script reads this too */
  --gutter: 20px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eaf2ed;
    --ink-2: #b6c5bd;
    --ink-3: #8b9d94;
    --line: #22332a;
    --bg: #0b1410;
    --bg-2: #101c16;
    --card: #12201a;
    --g-soft: #102b1d;
    --g-line: #1d4a32;
    --g-accent: #46c98a;   /* readable against the dark surfaces */
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 50px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto matters: every image carries width/height attributes (so the layout reserves
   space and nothing jumps as they load), and without it the intrinsic height is kept while
   the width shrinks, which stretched the hero phone to 1798px tall. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.35rem); letter-spacing: -.028em; }
h3 { font-size: 1.1rem; }
p { margin: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--g-accent);
  background: var(--g-soft); border: 1px solid var(--g-line);
  padding: 6px 13px; border-radius: 999px;
}
.lede { color: var(--ink-2); font-size: clamp(1rem, 1.6vw, 1.14rem); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 13px; border: 1.5px solid transparent;
  font: inherit; font-weight: 700; font-size: .96rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:active { transform: scale(.975); }
.btn-primary { background: var(--g); color: #fff; box-shadow: 0 6px 18px rgba(0, 162, 81, .28); }
.btn-primary:hover { background: var(--g-mid); box-shadow: 0 10px 26px rgba(0, 162, 81, .34); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--g); color: var(--g-accent); background: var(--g-soft); }
.btn-light { background: #fff; color: var(--g-deep); }
.btn-light:hover { background: #f1faf5; }
.btn-outline-light { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .2); }
.btn-lg { padding: 16px 28px; font-size: 1.02rem; border-radius: 15px; }
:where(a, button, input, select, summary).btn:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--g); outline-offset: 2px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.stuck { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(8, 30, 20, .05); }
.nav { display: flex; align-items: center; gap: 10px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-inline-end: auto; flex: none; }
.brand img { width: 40px; height: 40px; border-radius: 11px; background: #fff; object-fit: contain; padding: 2px; border: 1px solid var(--line); }
.brand b { display: block; font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.brand span { display: block; font-size: .73rem; color: var(--ink-3); font-weight: 600; white-space: nowrap; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .93rem;
  padding: 9px 10px; border-radius: 10px; white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.nav-links a:hover { color: var(--g-accent); background: var(--g-soft); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
/* The header is the one place where button padding has to earn its keep: six links plus a
   language switch and two buttons overflowed a 1280px window and clipped "Create account". */
.nav-actions .btn { padding: 11px 16px; font-size: .92rem; }

.langsw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
.langsw button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 5px 11px; font: inherit; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  color: var(--ink-3);
}
.langsw button.on { background: var(--card); color: var(--g-accent); box-shadow: 0 1px 3px rgba(8, 30, 20, .16); }

.menu-btn { display: none; background: none; border: 1.5px solid var(--line); border-radius: 11px; padding: 9px; cursor: pointer; color: var(--ink); }
/* Only for the mobile sheet: on the desktop bar, Sign in is a button in .nav-actions. */
.nav-signin { display: none; }

@media (max-width: 1200px) {
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px var(--gutter) 20px;
    box-shadow: var(--shadow); display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 14px; font-size: 1rem; }
  .menu-btn { display: inline-flex; }
  /* Sign in leaves the bar to save room, so it has to appear in the sheet instead --
     otherwise an existing customer has no way in from the header. */
  .nav-actions .btn-ghost { display: none; }
  .nav-links a.nav-signin { display: block; color: var(--g-accent); font-weight: 700;
    margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
}

/* A phone cannot hold the wordmark, the language switch, a call to action and the menu
   button on one line: the bar overflowed by ~100px. The logo alone carries the brand. */
/* 360px phones are still common. The 20px gutter left the header 2px wider than the
   viewport there; 16px is the usual phone gutter anyway. */
@media (max-width: 400px) { :root { --gutter: 16px; } }

/* 320px (an old iPhone SE) is the narrowest viewport worth supporting. Everything in the
   bar gives up a few pixels rather than any single control being dropped -- the logo, the
   language switch and the call to action all still fit. */
@media (max-width: 360px) {
  :root { --gutter: 12px; }
  .nav { gap: 4px; }
  .brand img { width: 32px; height: 32px; }
  .nav-actions { gap: 4px; }
  .nav-actions .btn { padding: 9px 9px; font-size: .78rem; }
  .langsw { padding: 2px; }
  .langsw button { padding: 8px 6px; font-size: .68rem; }
  .menu-btn { padding: 6px; }
}

@media (max-width: 560px) {
  .brand > span { display: none; }
  /* Two buttons a few pixels apart in width read as a mistake; full width is deliberate. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .langsw button { padding: 9px 9px; }
  .nav-actions .btn { padding: 10px 13px; font-size: .88rem; }
  .langsw button { padding: 5px 9px; }
}

/* ---------- hero ---------- */
/* The hero is a <section>, so it would otherwise take the generic section padding on top of
   its own and sit roughly twice as tall as intended. Its spacing lives on .hero .wrap. */
.hero { position: relative; padding-block: 0; background: linear-gradient(150deg, var(--g) 0%, var(--g-mid) 42%, var(--g-deep) 100%); color: #fff; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 720px 460px at 82% 12%, rgba(255, 255, 255, .16), transparent 62%);
}
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: center; padding-block: clamp(56px, 8vw, 96px); }
.hero .eyebrow { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); }
.hero h1 { margin-block: 20px 16px; color: #fff; }
.hero p.lede { color: rgba(255, 255, 255, .92); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 24px; font-size: .86rem; color: rgba(255, 255, 255, .85); }

.hero-art { position: relative; display: grid; place-items: center; }
/* A soft halo so the handset sits in light instead of floating on flat green. */
.hero-art::before {
  content: ""; position: absolute; inset: -8% -6%; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 62%);
}
/* Bezel top and bottom rather than a uniform 9px ring: with an even border the screenshot
   read as a picture with rounded corners, not a device. The extra top bezel also gives the
   earpiece somewhere to sit without covering the app's own header. */
.phone {
  position: relative;
  /* Sized against the text column beside it: the bezel and shadow give the device presence,
     so it does not need the extra width that was leaving the hero 100px taller. */
  width: min(300px, 76vw);
  padding: 22px 10px 18px;
  border-radius: 46px;
  background: linear-gradient(155deg, #264034 0%, #0e1a15 52%, #0b1410 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 0 1px rgba(255, 255, 255, .09),
    0 36px 74px rgba(0, 0, 0, .46),
    0 8px 20px rgba(0, 0, 0, .28);
}
.phone::after {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .22);
}
/* The three screens are stacked and cross-faded, so the hero shows what the app actually
   does rather than one still. Without the script the first one simply stays put. */
.phone-screen {
  position: relative; aspect-ratio: 540 / 1064;
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  background: #0b1410;
}
.phone-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: translateY(22px) scale(1.03);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}
.phone-screen img.on { opacity: 1; transform: none; }

/* Dots below the handset: without them the screens change with nothing to say they will,
   and a visitor glancing at the hero cannot tell there is more than one. */
.phone-dots { display: flex; gap: 7px; justify-content: center; margin-top: 22px; }
.phone-dots i {
  position: relative; overflow: hidden;
  width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .34);
  transition: width .4s ease, background-color .4s ease;
}
.phone-dots i.on { width: 30px; background: rgba(255, 255, 255, .34); }
.phone-dots i.on::after {
  content: ""; position: absolute; inset: 0; width: 0;
  background: #fff; border-radius: 99px;
  animation: dot-fill var(--cycle) linear forwards;
}
@keyframes dot-fill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .phone-dots { display: none; } }

/* Motion is opt-out: anyone who asks for less gets the handset exactly as it was, still. */
@media (prefers-reduced-motion: no-preference) {
  /* forwards, not both: with `both` the 0%-opacity start state also applies before the
     animation runs, so anything that stopped it running would leave the hero image
     invisible. This way the handset's own styles are the fallback. */
  .phone { animation: phone-in .9s cubic-bezier(.2, .7, .3, 1) forwards, phone-float 5s ease-in-out .9s infinite; }
  @keyframes phone-in {
    from { opacity: 0; transform: translateY(34px) scale(.95); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes phone-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-18px); }
  }
}

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero p.lede { margin-inline: auto; }
  .hero-cta, .hero-note { justify-content: center; }
}

/* ---------- trust strip ---------- */
.strip { background: var(--bg-2); border-block: 1px solid var(--line); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 26px; }
.stat b { display: block; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; color: var(--g-accent); font-variant-numeric: tabular-nums; }
.stat span { font-size: .87rem; color: var(--ink-2); }
@media (max-width: 720px) { .strip .wrap { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; } }

/* ---------- generic section ---------- */
section { padding-block: clamp(56px, 8vw, 92px); }
/* A jump from the navigation has to clear the sticky header. On a phone the section's
   own padding (56px) is shorter than the header (70px), so the heading landed tucked
   underneath it -- fine on desktop, quietly broken on the devices most visitors use. */
section[id], #main { scroll-margin-top: calc(var(--header-h) + 12px); }
.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head h2 { margin-block: 16px 14px; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 18px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .g3, .g4 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--g-line); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: .94rem; }
.card .ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--g-soft); color: var(--g-accent); margin-bottom: 16px; border: 1px solid var(--g-line);
}
.card .ico svg { width: 22px; height: 22px; }

/* category cards */
/* Eight categories, each naming what is actually on the shelf. A tint per category keeps
   them distinguishable at a glance without eight different card styles. */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--tint) 35%, var(--line)); }
.cat .ico {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px;
  border-radius: 12px; color: var(--tint); background: color-mix(in srgb, var(--tint) 12%, transparent);
}
.cat h3 { font-size: 1rem; margin-bottom: 6px; }
.cat p { color: var(--ink-3); font-size: .88rem; line-height: 1.5; }

.supply-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.supply-foot p { color: var(--ink-2); font-size: .95rem; margin-right: auto; }

@media (max-width: 1040px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cats { grid-template-columns: 1fr; } .supply-foot .btn { width: 100%; } }

/* steps */
.steps { counter-reset: step; display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 26px 22px 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--g); color: #fff; font-weight: 800; font-size: .95rem; margin-bottom: 15px;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 7px; }
.step p { color: var(--ink-2); font-size: .93rem; }

/* ---------- app section ---------- */
.app-band { background: var(--bg-2); border-block: 1px solid var(--line); }
.app-band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 900px) { .app-band .wrap { grid-template-columns: 1fr; gap: 36px; } }
.shots { display: flex; gap: 16px; justify-content: center; }
.shots img {
  width: min(210px, 42vw); border-radius: 20px; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); background: var(--card);
}
.shots img:nth-child(2) { transform: translateY(22px); }
@media (max-width: 480px) { .shots img:nth-child(2) { display: none; } }
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.badge-store {
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
  background: #0e1d15; color: #fff; border-radius: 13px; padding: 11px 19px;
  transition: transform .14s ease, opacity .18s ease;
}
.badge-store:active { transform: scale(.97); }
.badge-store:hover { opacity: .88; }
.badge-store small { display: block; font-size: .68rem; opacity: .75; line-height: 1.2; }
.badge-store b { display: block; font-size: .96rem; line-height: 1.25; }
.badge-store.soon { background: var(--bg); color: var(--ink-3); border: 1px dashed var(--line); }

/* ---------- account / CTA ---------- */
.cta-band { background: linear-gradient(140deg, var(--g-dark), var(--g-deep)); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .9); }
.cta-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
@media (max-width: 900px) { .cta-inner { grid-template-columns: 1fr; gap: 30px; } }
.checklist { display: grid; gap: 11px; margin-top: 22px; padding: 0; list-style: none; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: .95rem; color: rgba(255, 255, 255, .93); }
.checklist svg { flex: none; width: 21px; height: 21px; margin-top: 1px; }

.panel {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius); padding: 26px; backdrop-filter: blur(6px);
}
.panel h3 { color: #fff; margin-bottom: 6px; }
.panel p { font-size: .9rem; margin-bottom: 18px; }
.panel .btn { width: 100%; }
.panel .or { text-align: center; font-size: .82rem; color: rgba(255, 255, 255, .7); margin-block: 12px; }

/* ---------- branches ---------- */
.branch { display: flex; gap: 14px; align-items: flex-start; }
.branch .pin { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--g-soft); color: var(--g-accent); border: 1px solid var(--g-line); }
.branch b { display: block; font-size: .99rem; }
.branch span { font-size: .88rem; color: var(--ink-3); }

/* ---------- footer ---------- */
.site-footer { background: var(--g-deep); color: rgba(255, 255, 255, .8); padding-block: 54px 30px; }
.site-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 30px; }
@media (max-width: 1100px) { .foot-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .92rem; }
/* Bare footer links are only as tall as their text (17px). On touch they need a bigger
   target than that, so each one carries its own padding on small screens. */
@media (max-width: 860px) {
  .foot-grid ul { gap: 2px; }
  .foot-grid ul a { display: inline-block; padding-block: 9px; }
}
.foot-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.foot-brand img { width: 42px; height: 42px; border-radius: 12px; background: #fff; padding: 2px; object-fit: contain; }
.foot-brand b { color: #fff; font-size: 1.05rem; }
.foot-bottom {
  margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .17);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .85rem;
}

/* Reveal on scroll, only once the script is running. Gating on .js means that if the module
   fails to load, or a reader has JavaScript off, the four "how it works" steps are plain
   visible text instead of four invisible boxes. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--g); color: #fff;
  padding: 12px 18px; border-radius: 0 0 12px 0; z-index: 100; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- about, services, partners ---------- */
.about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; }
/* The company's own photograph of a counter, so the page shows a Bariki pharmacy rather
   than only describing one. */
.band-photo {
  width: 100%; margin-bottom: 28px; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  object-fit: cover; aspect-ratio: 21 / 7;
}
/* Two-up band, for mission and vision sitting level with each other. */
.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .g2 { grid-template-columns: 1fr; } }
.about-band { margin-top: 30px; }

/* Leadership: a card each, with the person's initials, rather than three bullet points. */
.people-title { margin: 38px 0 16px; font-size: 1.05rem; }
.person { display: flex; gap: 14px; align-items: center; }
.person .ini {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem;
  background: var(--g-soft); color: var(--g-accent); border: 1px solid var(--g-line);
}
.person b { display: block; font-size: .99rem; }
.person span { display: block; font-size: .88rem; color: var(--ink-3); }

.about-photo { width: 100%; border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 16 / 10; }
.about-grid > div > p { color: var(--ink-2); }
@media (max-width: 940px) { .about-grid { grid-template-columns: 1fr; gap: 26px; } }

.quote { margin: 22px 0 0; padding: 18px 20px; border-left: 3px solid var(--g); background: var(--bg-2);
  border-radius: 0 var(--r) var(--r) 0; }
.quote p { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.quote cite { display: block; margin-top: 8px; font-style: normal; font-size: .88rem; color: var(--ink-3); }

.people-title { margin: 26px 0 10px; font-size: 1rem; }
.people { list-style: none; display: grid; gap: 8px; }
.people li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: .95rem; }
.people li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--g); }

/* A logo wall of wordmarks and roundels: a fixed tile height is what makes marks of very
   different shapes sit on one line together, so each logo is contained inside its tile. */
.partners { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.partners li {
  display: grid; place-items: center; height: 96px; padding: 14px 18px;
  /* White whatever the theme: these are dark-ink wordmarks on a white ground, and the dark
     card colour would swallow them. */
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
}
/* A definite box, not `width: auto`. An unloaded lazy image with auto width collapses to
   0x0, never intersects the viewport, and so is never fetched -- the logos stayed blank
   forever. Sizing the box first lets the browser reserve it and then load them. */
.partners img { width: 100%; height: 54px; object-fit: contain; }
@media (max-width: 940px) { .partners { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .partners { grid-template-columns: repeat(2, 1fr); } .partners li { height: 84px; } .partners img { height: 46px; } }

/* ---------- legal pages ---------- */
/* Long text needs a narrower measure than the marketing sections: past ~72 characters a line
   is tiring to read, and these are pages people actually have to get through. */
.legal { padding-block: clamp(32px, 5vw, 56px); }
.legal .wrap { max-width: 860px; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 8px; }
.legal h2 { font-size: 1.2rem; margin-top: 38px; margin-bottom: 10px; }
.legal h3 { font-size: 1rem; margin-top: 22px; margin-bottom: 8px; color: var(--ink-2); }
.legal p, .legal li { color: var(--ink-2); line-height: 1.7; max-width: 72ch; }
.legal p { margin-bottom: 14px; }
.legal .lede { font-size: 1.06rem; color: var(--ink); margin-bottom: 26px; }
.legal ul { margin: 0 0 16px 20px; display: grid; gap: 8px; }
.legal li { padding-left: 4px; }
.legal a { color: var(--g-accent); font-weight: 600; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0 20px; }

.crumbs { font-size: .86rem; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { color: var(--ink-3); font-weight: 600; }
.updated { font-size: .88rem; color: var(--ink-3); margin-bottom: 24px; }

/* The Kiswahili summary sits above the English text: the binding version is English, but a
   reader should not have to work through it to learn what the page is for. */
.sw-note {
  background: var(--g-soft); border: 1px solid var(--g-line); border-radius: var(--r);
  padding: 16px 18px; margin-bottom: 30px; font-size: .95rem; color: var(--ink-2); line-height: 1.65;
}
.sw-note b { color: var(--ink); }

/* Anything the company still has to supply. Loud on purpose: nobody should publish these pages
   with a placeholder left in them. */
.todo {
  background: var(--amber-soft, #fef3c7); color: #92400e; font-weight: 700;
  padding: 1px 6px; border-radius: 6px; font-size: .92em;
}
.todo-block {
  border-left: 3px solid #d97706; background: color-mix(in srgb, #d97706 8%, transparent);
  padding: 12px 14px; border-radius: 0 10px 10px 0;
}
.legal-foot, .legal-links { font-size: .88rem; color: var(--ink-3); }
.legal-links { margin-top: 14px; }
.legal-links a[aria-current="page"] { color: var(--ink); }