/* ========================================================================
   theme.css - Editorial design system for Source Grid
   Borrows the layout, typography, spacing and motion of the reference
   template, recoloured to the Source Grid olive-green brand.

   Component classes (.btn, .card, .hero, etc.) are scoped under .theme-grid
   so they never clash with the Bootstrap that the rest of the site relies on.
   Only the font stack and a few footer/brand touches are applied globally.
   ======================================================================== */

/* ---------- Brand fonts (local) ----------
   Every brand face is served from this origin - no font host is contacted at
   runtime. See implementation/TYPOGRAPHY_AND_ASSET_HOSTING_POLICY.md.

   Paths are relative to this file (/css/theme.css), not root-absolute, so they
   still resolve if public/ is ever served from a different document root.

   The ?v= token is a manual cache buster: .htaccess caches font files for a
   year, and ASSET_VERSION only busts this stylesheet, not the fonts it pulls.
   Bump it here whenever a font FILE is replaced. */
@font-face {
  font-family: "Parkinsans";
  src: url("../assets/fonts/Parkinsans-Light.woff2?v=1") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Parkinsans";
  src: url("../assets/fonts/Parkinsans-Regular.woff2?v=1") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Parkinsans";
  src: url("../assets/fonts/Parkinsans-Medium.woff2?v=1") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Parkinsans";
  src: url("../assets/fonts/Parkinsans-SemiBold.woff2?v=1") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Parkinsans";
  src: url("../assets/fonts/Parkinsans-Bold.woff2?v=1") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Parkinsans";
  src: url("../assets/fonts/Parkinsans-ExtraBold.woff2?v=1") format("woff2");
  font-weight: 800;
  font-display: swap;
}
/* Aboreto and Sauber ship as woff2 (lossless repack of the original ttf/otf -
   same glyphs, same metrics, ~57% smaller). The original file stays listed as a
   fallback; a browser downloads only the first format it supports. */
@font-face {
  font-family: "Aboreto";
  src: url("../assets/fonts/Aboreto-Regular.woff2?v=1") format("woff2"),
       url("../assets/fonts/Aboreto-Regular.ttf?v=1") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sauber";
  src: url("../assets/fonts/Sauber-Regular.woff2?v=1") format("woff2"),
       url("../assets/fonts/Sauber-Regular.otf?v=1") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* ---------- Design tokens (olive-green brand) ---------- */
:root {
  /* Accents - olive green replaces the template's orange */
  --tg-accent: #636b2f;
  --tg-accent-deep: #7a8439;
  --tg-accent-bright: #8bc34a;

  /* Institutional olive tones - replace the template's deep greens */
  --tg-olive: #636b2f;
  --tg-olive-mid: #565d29;
  --tg-olive-deep: #3f4420;

  /* Soft section washes */
  --tg-olive-soft: #eef0e1;
  --tg-cream: #faf9f1;

  /* Neutrals */
  --tg-ink: #1f2412;
  --tg-gray-100: #f7f8f3;
  --tg-gray-200: #eef0ea;
  --tg-gray-300: #e3e5db;
  --tg-gray-600: #5b6051;

  /* Type - both faces are self-hosted above, so no font host is contacted at
     runtime. To add a face, self-host it and declare an @font-face above; never
     add a CDN link, which the CSP in SecurityHeaders.php will block. */
  --tg-font-body: "Parkinsans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --tg-font-display: "Aboreto", "Sauber", Georgia, serif;

  /* Shape and motion */
  --tg-radius: 16px;
  --tg-radius-sm: 10px;
  --tg-radius-lg: 28px;
  --tg-shadow-sm: 0 1px 2px rgba(31, 36, 18, 0.06), 0 1px 3px rgba(31, 36, 18, 0.1);
  --tg-shadow-md: 0 10px 24px rgba(31, 36, 18, 0.09);
  --tg-shadow-lg: 0 24px 60px rgba(63, 68, 32, 0.2);
  --tg-transition: 0.25s ease;
}

/* ---------- Scroll reveal animation ----------
   Only hide elements once reveal.js has flagged the document as ready, so a
   failed/blocked script can never leave content invisible. Honour reduced
   motion by skipping the transform entirely. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Global font stack (low-risk swap, applies site-wide) ---------- */
body {
  font-family: var(--tg-font-body);
}

/* Order-flow pages (confirmation / update / success / invalid) keep their own
   self-contained styles but pick up the display serif on their main headings so
   they read as part of the same family. */
#booking-confirmation-page h1,
#booking-update-page h1,
#booking-update-success-page h1,
#booking-update-invalid-page h1,
#local-order-confirmation-page h1,
#local-order-update-page h1,
#local-order-update-success-page h1,
#local-order-update-invalid-page h1 {
  font-family: var(--tg-font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Editorial serif for footer column headings keeps the shell cohesive */
.footer-box h3 {
  font-family: var(--tg-font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Stack the Privacy and Terms buttons with breathing room between them */
.footer-box .sub_btn + .sub_btn {
  margin-top: 0.75rem;
}

/* ========================================================================
   Scoped design system - everything below only affects redesigned pages
   that carry the .theme-grid class on <body>.
   ======================================================================== */

.theme-grid {
  color: var(--tg-ink);
  background-color: #fff;
}

.theme-grid h1,
.theme-grid h2,
.theme-grid h3,
.theme-grid h4 {
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Layout primitives */
.theme-grid .container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.theme-grid .section {
  padding-block: 5rem;
}

.theme-grid .section.center {
  text-align: center;
}

.theme-grid .section-flush-bottom {
  padding-bottom: 0;
}

.theme-grid .section-title.is-compact {
  font-size: 1.6rem;
}

.theme-grid .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tg-olive-mid);
}

/* Centers a block (e.g. .lead with a max-width) inside a centered section head */
.theme-grid .center-x {
  margin-inline: auto;
}

/* Centers the text within an element (pairs with center-x for a fully centered block) */
.theme-grid .text-center {
  text-align: center;
}

.theme-grid .section-title {
  font-family: var(--tg-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.theme-grid .lead {
  font-size: 1.125rem;
  color: var(--tg-gray-600);
  max-width: 48ch;
}

.theme-grid .section-head {
  max-width: 760px;
  margin-bottom: 3rem;
}
.theme-grid .section-head.center {
  margin-inline: auto;
  text-align: center;
}
.theme-grid .section-head .eyebrow {
  margin-bottom: 1rem;
}
.theme-grid .section-head .section-title {
  margin-bottom: 1rem;
}
.theme-grid .section-head.between {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: none;
}

/* Buttons */
.theme-grid .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--tg-transition), background-color var(--tg-transition),
    box-shadow var(--tg-transition), color var(--tg-transition);
}
.theme-grid .btn:hover {
  transform: translateY(-2px);
}
.theme-grid .btn-primary {
  background-color: var(--tg-accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(99, 107, 47, 0.32);
}
.theme-grid .btn-primary:hover {
  background-color: var(--tg-accent-deep);
  color: #fff;
}
.theme-grid .btn-dark {
  background-color: var(--tg-olive-deep);
  color: #fff;
}
.theme-grid .btn-dark:hover {
  background-color: var(--tg-olive-mid);
}
.theme-grid .btn-ghost {
  background-color: transparent;
  color: var(--tg-ink);
  border: 1px solid var(--tg-gray-300);
}
.theme-grid .btn-ghost:hover {
  border-color: var(--tg-accent);
  color: var(--tg-olive-mid);
}
.theme-grid .btn-ghost-light {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-color: transparent;
}
.theme-grid .btn-ghost-light:hover {
  border-color: #fff;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}
.theme-grid .btn-sm {
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
}

/* Cards and grids */
.theme-grid .card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
.theme-grid .card {
  background-color: #fff;
  border: 1px solid var(--tg-gray-300);
  border-radius: var(--tg-radius);
  padding: 1.75rem;
  transition: transform var(--tg-transition), box-shadow var(--tg-transition),
    border-color var(--tg-transition);
}
.theme-grid .card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.65rem;
}
.theme-grid .card p {
  color: var(--tg-gray-600);
  font-size: 0.95rem;
}
.theme-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tg-shadow-md);
  border-color: transparent;
}
.theme-grid .card-soft {
  background-color: var(--tg-olive-soft);
  border-color: transparent;
}
.theme-grid .card-feature h3 {
  color: var(--tg-olive-mid);
}

/* Hero */
.theme-grid .hero {
  background:
    radial-gradient(120% 120% at 100% 0%, var(--tg-olive-soft) 0%, transparent 45%),
    linear-gradient(180deg, var(--tg-cream) 0%, #fff 60%);
  padding-block: 3.5rem 4.5rem;
}
.theme-grid .hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.theme-grid .hero-title {
  font-family: var(--tg-font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: 0.005em;
  margin: 1.25rem 0 1.5rem;
}

/* Center the home hero title only, so the wrapped "to" line reads as balanced.
   Scoped to the home page so the about hero is unaffected. */
#home-page .hero-title {
  text-align: center;
}
.theme-grid .hero-title-accent {
  display: block;
  color: var(--tg-olive-mid);
}
.theme-grid .hero-lead {
  margin-bottom: 2rem;
}
.theme-grid .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.theme-grid .hero-media {
  position: relative;
}
.theme-grid .hero-media img {
  width: 100%;
  height: auto;
  border-radius: var(--tg-radius-lg);
  box-shadow: var(--tg-shadow-lg);
  object-fit: cover;
}
.theme-grid .hero-chip {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--tg-olive-deep);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  box-shadow: var(--tg-shadow-sm);
}

/* Inner-page hero */
.theme-grid .page-hero {
  background:
    radial-gradient(120% 120% at 100% 0%, var(--tg-olive-soft) 0%, transparent 50%),
    linear-gradient(180deg, var(--tg-cream) 0%, #fff 70%);
  padding-block: 3rem 3.5rem;
}
.theme-grid .page-hero .eyebrow {
  margin-bottom: 1rem;
}
.theme-grid .page-hero .section-title {
  margin-bottom: 1rem;
  max-width: 20ch;
}
.theme-grid .page-hero .lead {
  max-width: 56ch;
}
.theme-grid .page-hero .hero-actions {
  margin-top: 1.5rem;
}

/* Feature rows */
.theme-grid .feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3.5rem;
}
.theme-grid .feature-media img {
  width: 100%;
  border-radius: var(--tg-radius-lg);
  box-shadow: var(--tg-shadow-md);
  object-fit: cover;
}
.theme-grid .feature-list {
  display: grid;
  gap: 1.75rem;
}
.theme-grid .feature-item {
  background-color: var(--tg-gray-100);
  padding: 2rem;
  border-radius: var(--tg-radius);
}
.theme-grid .feature-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tg-olive-mid);
}

/* How It Works steps: give the "Step 0X" label breathing room above its heading */
#how-it-works-page .feature-tag {
  display: block;
  margin-bottom: 0.5rem;
}

/* Home "Why Kenya" feature heading: trim the inherited 3rem gap (from index.css
   .section-title) so the paragraph sits closer below the heading. */
#home-page .feature-copy .section-title {
  margin-bottom: 0.75rem;
}
.theme-grid .feature-item h3 {
  font-size: 1.3rem;
  margin: 0.35rem 0 0.5rem;
}
.theme-grid .feature-item p {
  color: var(--tg-gray-600);
}
.theme-grid .feature-row.reverse .feature-media {
  order: -1;
}

/* Check list */
.theme-grid .check-list {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
}
.theme-grid .check-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--tg-gray-600);
}
.theme-grid .check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: var(--tg-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.7rem;
}

/* Dark olive band (mission / model) */
.theme-grid .band-dark {
  background-color: var(--tg-olive-deep);
  color: #fff;
}
.theme-grid .band-dark .section-title {
  color: #fff;
}
.theme-grid .band-dark .lead {
  color: rgba(255, 255, 255, 0.78);
}
.theme-grid .band-dark .eyebrow {
  color: var(--tg-accent-bright);
}
.theme-grid .band-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.theme-grid .logic-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--tg-radius-sm);
}
.theme-grid .logic-arrow {
  color: var(--tg-accent-bright);
  font-weight: 700;
}

/* Stats and pull quotes */
.theme-grid .pull-quote {
  font-family: var(--tg-font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--tg-olive-deep);
  max-width: 30ch;
  margin: 0 0 3rem;
  background-color: var(--tg-olive-soft);
  padding: 2rem 2.25rem;
  border-radius: var(--tg-radius);
}
.theme-grid .stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.theme-grid .stat {
  background-color: #fff;
  border-radius: var(--tg-radius);
  padding: 1.75rem;
  text-align: center;
  box-shadow: var(--tg-shadow-sm);
}
.theme-grid .stat-number,
.theme-grid .stat-plus {
  font-family: var(--tg-font-display);
  font-size: 2.75rem;
  color: var(--tg-olive-mid);
  line-height: 1;
}
.theme-grid .stat p {
  margin-top: 0.75rem;
  color: var(--tg-gray-600);
  font-size: 0.9rem;
}

/* Tinted section backgrounds */
.theme-grid .section-soft {
  background-color: var(--tg-gray-100);
}

/* Pills */
.theme-grid .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.theme-grid .pill {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background-color: #fff;
  border: 1px solid var(--tg-gray-300);
  color: var(--tg-gray-600);
}
.theme-grid .pill-active {
  background-color: var(--tg-olive-deep);
  border-color: var(--tg-olive-deep);
  color: #fff;
}

/* Status tags */
.theme-grid .status-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.theme-grid .status-live {
  background-color: var(--tg-olive-soft);
  color: var(--tg-olive-mid);
}

/* Article / journal cards */
.theme-grid .card-article {
  padding: 0;
  overflow: hidden;
}
.theme-grid .article-media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.theme-grid .article-body {
  padding: 1.5rem;
}
.theme-grid .article-meta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tg-olive-mid);
}
.theme-grid .article-body h3 {
  margin: 0.5rem 0 0.75rem;
  font-size: 1.05rem;
  line-height: 1.3;
}
.theme-grid .text-link {
  font-weight: 600;
  color: var(--tg-accent-deep);
}
.theme-grid .text-link:hover {
  color: var(--tg-olive-deep);
}

/* ---------- Journal article (single post) ----------
   The card styles above are for the /blog listing. These rules are for the
   long-form body of an individual article, where the priority is a readable
   measure and clear heading hierarchy rather than a compact card. */

/* Byline strip under the article hero: date - read time - author */
.theme-grid .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tg-gray-600);
}
.theme-grid .post-meta-sep {
  color: var(--tg-gray-300);
}
.theme-grid .post-back {
  display: inline-block;
  margin-bottom: 1.25rem;
}

/* Article lead image. The source photography ranges from 1:1 to 16:9, and an
   uncropped square at full container width fills the whole viewport before a
   single word is read - so crop everything to a consistent banner instead.
   `.media-frame img` already supplies width/height 100% and object-fit: cover. */
.theme-grid .post-lead-media {
  max-width: 900px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 3rem;
}

/* Key takeaways panel. Sits alongside .post-prose in the markup, not inside it,
   so it needs to match the prose measure itself. */
.theme-grid .post-summary {
  max-width: 72ch;
  margin-inline: auto;
  background-color: var(--tg-olive-soft);
  border-radius: var(--tg-radius);
  padding: 1.75rem;
  margin-bottom: 3rem;
}
.theme-grid .post-summary h2 {
  font-family: var(--tg-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tg-olive-mid);
  margin: 0;
}
.theme-grid .post-summary .check-list {
  margin-bottom: 0;
}
.theme-grid .post-summary .check-list li {
  color: var(--tg-ink);
}

/* Long-form body copy - constrained measure, centred in the container */
.theme-grid .post-prose {
  max-width: 72ch;
  margin-inline: auto;
  color: var(--tg-gray-600);
  font-size: 1.02rem;
  line-height: 1.75;
}
.theme-grid .post-prose > *:first-child {
  margin-top: 0;
}
.theme-grid .post-prose > *:last-child {
  margin-bottom: 0;
}
.theme-grid .post-prose p {
  margin: 0 0 1.35rem;
}
.theme-grid .post-prose h2 {
  font-family: var(--tg-font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--tg-ink);
  margin: 3rem 0 1rem;
}
.theme-grid .post-prose h3 {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tg-ink);
  margin: 2.25rem 0 0.75rem;
}
.theme-grid .post-prose ul,
.theme-grid .post-prose ol {
  margin: 0 0 1.35rem;
  padding-left: 1.35rem;
}
.theme-grid .post-prose li {
  margin-bottom: 0.6rem;
}
.theme-grid .post-prose li::marker {
  color: var(--tg-accent);
}
.theme-grid .post-prose strong {
  color: var(--tg-ink);
  font-weight: 600;
}
.theme-grid .post-prose a {
  font-weight: 600;
  color: var(--tg-accent-deep);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.theme-grid .post-prose a:hover {
  color: var(--tg-olive-deep);
}
.theme-grid .post-prose .pull-quote {
  max-width: none;
  margin: 2.5rem 0;
}

/* Data tables inside an article - scroll inside their own box on narrow screens */
.theme-grid .post-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.75rem;
  border: 1px solid var(--tg-gray-300);
  border-radius: var(--tg-radius-sm);
}
.theme-grid .post-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.theme-grid .post-table th,
.theme-grid .post-table td {
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tg-gray-300);
}
.theme-grid .post-table thead th {
  background-color: var(--tg-gray-100);
  color: var(--tg-ink);
  font-weight: 600;
  white-space: nowrap;
}
.theme-grid .post-table tbody tr:last-child th,
.theme-grid .post-table tbody tr:last-child td {
  border-bottom: 0;
}
.theme-grid .post-table tbody th {
  font-weight: 600;
  color: var(--tg-ink);
}

/* Sources and further reading */
.theme-grid .post-sources {
  max-width: 72ch;
  margin-inline: auto;
  padding-left: 1.35rem;
  color: var(--tg-gray-600);
  font-size: 0.92rem;
  line-height: 1.6;
}
.theme-grid .post-sources li {
  margin-bottom: 0.85rem;
}
.theme-grid .post-sources li::marker {
  color: var(--tg-accent);
}
.theme-grid .post-sources a {
  font-weight: 600;
  color: var(--tg-accent-deep);
}
.theme-grid .post-sources a:hover {
  color: var(--tg-olive-deep);
}

/* Accordion */
.theme-grid .accordion {
  display: grid;
  gap: 0.85rem;
}
.theme-grid .accordion-item {
  border: 1px solid var(--tg-gray-300);
  border-radius: var(--tg-radius-sm);
  overflow: hidden;
  background-color: #fff;
}
.theme-grid .accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.15rem 1.35rem;
  font-weight: 600;
  text-align: left;
}
.theme-grid .accordion-icon {
  font-size: 1.5rem;
  color: var(--tg-olive-mid);
  transition: transform var(--tg-transition);
  line-height: 1;
}
.theme-grid .accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
}
.theme-grid .accordion-panel {
  padding: 0 1.35rem 1.35rem;
  color: var(--tg-gray-600);
}
.theme-grid .accordion-panel[hidden] {
  display: none;
}

/* CTA band */
.theme-grid .cta-band {
  background: linear-gradient(135deg, var(--tg-olive-deep), var(--tg-olive-mid));
  color: #fff;
}
.theme-grid .cta-band-inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-block: 4rem;
  align-items: center;
  text-align: center;
}
.theme-grid .cta-band-title {
  font-family: var(--tg-font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.theme-grid .cta-band-copy p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
  margin-inline: auto;
}
.theme-grid .cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* Contact form (restyled inquiry form on the contact page) */
.theme-grid .form-card-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.theme-grid .form-card-header .lead {
  margin-inline: auto;
}
.theme-grid .contact-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.theme-grid .contact-form {
  display: grid;
  gap: 1rem;
  background-color: #fff;
  border: 1px solid var(--tg-gray-300);
  border-radius: var(--tg-radius);
  padding: 1.75rem;
  box-shadow: var(--tg-shadow-sm);
}
.theme-grid .field {
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.theme-grid .field-row {
  display: grid;
  gap: 1rem;
}
.theme-grid .field input,
.theme-grid .field select,
.theme-grid .field textarea {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--tg-gray-300);
  border-radius: var(--tg-radius-sm);
  background-color: #fff;
  transition: border-color var(--tg-transition), box-shadow var(--tg-transition);
}
.theme-grid .field input:focus,
.theme-grid .field select:focus,
.theme-grid .field textarea:focus {
  outline: none;
  border-color: var(--tg-accent);
  box-shadow: 0 0 0 3px rgba(99, 107, 47, 0.15);
}

/* Centered card variant */
.theme-grid .card.center {
  text-align: center;
}

/* Logo card (partners) */
.theme-grid .logo-card {
  text-align: center;
}
.theme-grid .logo-card .logo-box {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.theme-grid .logo-card .logo-box img {
  max-height: 70px;
  width: auto;
  object-fit: contain;
}
.theme-grid .logo-card h4 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.theme-grid .logo-card p {
  color: var(--tg-gray-600);
  font-size: 0.9rem;
}

/* Generic media helpers */
.theme-grid .media-frame {
  width: 100%;
  border-radius: var(--tg-radius-lg);
  overflow: hidden;
  box-shadow: var(--tg-shadow-md);
}
.theme-grid .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .theme-grid .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .theme-grid .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .theme-grid .stat-row { grid-template-columns: repeat(3, 1fr); }
  .theme-grid .field-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .theme-grid .section-head.between {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  /* Slightly larger body copy for long-form articles once there is room */
  .theme-grid .post-prose { font-size: 1.08rem; }
  .theme-grid .post-summary { padding: 2rem 2.25rem; }
}

@media (min-width: 1024px) {
  .theme-grid .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }
  .theme-grid .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .theme-grid .card-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .theme-grid .feature-row { grid-template-columns: 1.1fr 0.9fr; }
  .theme-grid .band-inner { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .theme-grid .contact-inner { grid-template-columns: 0.9fr 1.1fr; }
}

/* ---------- Single-column alignment (phones and tablets) ---------- */
/* Centre hero, page-hero, section, card and feature content wherever the layout
   is still a single stacked column.

   The upper bound is 1023.98px because that is where the layouts these rules
   govern actually change: `.hero-inner` and `.feature-row` only become
   two-column at `min-width: 1024px` (see the block above). Capping this query
   any lower leaves a dead band in which the layout is still stacked but the
   copy is flush left - with `.lead { max-width: 48ch }` that strands ~300px of
   empty space to the right and reads as broken.

   Desktop (>= 1024px) is deliberately untouched: there the second column fills
   that space and left-aligned copy is correct. These rules only affect
   left/centre alignment, never the stacking order. */
@media (max-width: 1023.98px) {
  /* Home & about hero: centre the text column, lead paragraph and CTA buttons */
  .theme-grid .hero-copy {
    text-align: center;
  }
  .theme-grid .hero-lead,
  .theme-grid .hero-copy .lead {
    margin-inline: auto;
  }
  .theme-grid .hero-actions {
    justify-content: center;
  }
  /* Re-centre the badge chip horizontally over the hero image */
  .theme-grid .hero-chip {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
  }

  /* Inner-page heroes (products, contact, blog, booking, services, catalogue) */
  .theme-grid .page-hero .container {
    text-align: center;
  }
  .theme-grid .page-hero .section-title,
  .theme-grid .page-hero .lead {
    margin-inline: auto;
  }

  /* Section heads centre for consistency */
  .theme-grid .section-head {
    margin-inline: auto;
    text-align: center;
  }

  /* Cards: centre numbered cards, expertise cards, article & department cards */
  .theme-grid .card {
    text-align: center;
  }

  /* Exception: icon + text rows. The icon is pinned to the flex start, so
     centring the text beside it leaves the two visibly out of line. Keep the
     text left-aligned - same treatment as .check-list below. */
  .theme-grid .contact-item {
    text-align: left;
  }

  /* Feature rows ("Why Kenya" etc.): centre the copy, but keep the bullet list
     readable by centring it as a left-aligned block rather than ragged text */
  .theme-grid .feature-copy {
    text-align: center;
  }
  /* `.lead` carries `max-width: 48ch`, so `text-align: center` on the parent
     centres the TEXT inside a box that is itself still anchored to the left
     edge - the box needs centring too. `.hero-copy .lead` and `.page-hero .lead`
     above already do this; feature rows were missed, which left the four
     "How it works" step paragraphs sitting left of centre between roughly
     500px and 1023px. Below that the paragraph fills the column, and at 1024px
     the two-column layout makes left alignment correct again. */
  .theme-grid .feature-copy .lead {
    margin-inline: auto;
  }
  .theme-grid .feature-copy .check-list {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }

  /* The product-icon row is display:flex, so text-align on the parent cannot
     centre it - it needs justify-content. `.theme-grid .product-icons` (0,0,2,0)
     outranks the bare `.product-icons` (0,0,1,0) in pages/index.css, which loads
     after this file, so specificity wins without !important. */
  .theme-grid .product-icons {
    justify-content: center;
  }

  /* Dark band: centre copy and the logic-flow row */
  .theme-grid .band-inner {
    text-align: center;
  }
  .theme-grid .logic-row {
    justify-content: center;
  }

  /* Pill rows centre */
  .theme-grid .pill-row {
    justify-content: center;
  }

  /* Journal article hero: `.page-hero .container` above centres the text, so the
     byline row (a flex row, unaffected by text-align) needs centring too. The
     article body itself is deliberately left out - long-form prose stays
     left-aligned at every width because centred body copy is unreadable. */
  .theme-grid .post-meta {
    justify-content: center;
  }
}

/* ---------- Stack action rows vertically on narrow phones ---------- */
/* When two buttons can no longer sit comfortably side by side, stack them one
   on top of the other and keep them centred and easy to tap. */
@media (max-width: 575.98px) {
  .theme-grid .hero-actions,
  .theme-grid .cta-band-actions {
    flex-direction: column;
    align-items: center;
  }
  .theme-grid .hero-actions .btn,
  .theme-grid .cta-band-actions .btn {
    width: 100%;
    max-width: 320px;
  }
}