/*
Theme Name: OpexIT.Services
Theme URI: https://opexit.services
Author: OpexIT.Services Platform Engineering
Description: The OpexIT.Services website (Home, Sovereignty, About, Contact, Compare Costs, Kenya). Built to the Interim GTM Visual Guidelines v1.1 and the Website Content & Build Handoff workbook. Classic theme, no plugins, no third-party requests.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
License: Proprietary
Text Domain: opexit
*/

/* Tokens: the approved palette only (Visual Guidelines v1.1 s04). No new colours, no gradients. */
:root {
  --dark-teal: #0A4D69;   /* accent on light: links, buttons, rules */
  --off-white: #F7F8FA;   /* default page ground */
  --white: #FFFFFF;
  --slate: #253139;
  --teal: #49BFB4;        /* accent on dark only */
  --teal-mid: #90D5CA;
  --ink: #0E1117;         /* all text on light; the one dark ground */
  --charcoal: #2C2C31;
  --grey: #7E8390;        /* hairlines; captions at 18px+ only */
  --light: #CED4DA;       /* borders */
  --pink-dark: #781E3C;
  --wrap: 1180px;
}

@font-face { font-family: 'Lato'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/lato-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/lato-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/lato-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/lato-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/lato-latin-900-normal.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 16px/24px Lato, Arial, sans-serif; color: var(--ink); background: var(--off-white); }
img, svg { max-width: 100%; }
a { color: var(--dark-teal); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .city.live:focus-visible { outline: 3px solid var(--dark-teal); outline-offset: 2px; }
.dark a:focus-visible, .dark button:focus-visible { outline-color: var(--teal); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 50; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
section { padding: 88px 0; }
h1, h2, h3, p { margin-top: 0; }
p { margin-bottom: 16px; }

/* Type scale (v1.1 s05) */
.display, h1.display { font: 700 clamp(36px, 5vw, 64px)/1.12 Lato, Arial, sans-serif; margin-bottom: 32px; }
.h4 { font: 700 clamp(28px, 3.2vw, 36px)/1.3 Lato, Arial, sans-serif; margin-bottom: 20px; }
.h5 { font: 700 24px/32px Lato, Arial, sans-serif; margin-bottom: 8px; }
.lead-dark { font: 300 clamp(20px, 2.2vw, 26px)/1.4 Lato, Arial, sans-serif; max-width: 46ch; }
.eyebrow { font: 700 12px/16px Lato, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; }
.eyebrow.dark-teal { color: var(--dark-teal); }
.statement { font: 700 clamp(22px, 2.6vw, 32px)/1.28 Lato, Arial, sans-serif; margin-bottom: 20px; }
.statement.wide { max-width: 28ch; margin-top: 48px; }
.teal { color: var(--teal); }
.teal-dark { color: var(--dark-teal); }
.muted-strong { font-weight: 700; }
.muted-on-dark, .footnote { color: var(--teal-mid); font-size: 16px; }
.footnote { font-size: 14px; margin-top: 12px; }
.aegis-word { font: 900 28px/1 Lato, Arial, sans-serif; letter-spacing: .07em; margin: 0 0 16px; }
.aegis-word.small { font-size: 18px; color: var(--ink); }

/* Buttons */
.btn { display: inline-block; font: 700 16px/1 Lato, Arial, sans-serif; padding: 16px 24px; border-radius: 4px; text-decoration: none; border: 2px solid transparent; cursor: pointer; margin: 0 12px 12px 0; }
.btn-primary { background: var(--dark-teal); color: var(--white); border-color: var(--dark-teal); }
.btn-ghost-dark { background: transparent; color: var(--dark-teal); border-color: var(--dark-teal); }
.btn-ghost { background: transparent; color: var(--off-white); border-color: var(--off-white); }
.dark .btn-primary { background: var(--teal); color: var(--ink); border-color: var(--teal); }
.btn:hover { filter: brightness(1.08); }
.cta-row { margin-top: 32px; }

/* Header */
.site-header { background: var(--off-white); border-bottom: 1px solid var(--light); position: relative; z-index: 20; }
.site-header .bar { display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: block; margin-right: auto; }
.logo img { display: block; height: auto; width: 168px; }
.primary ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.primary a { font: 700 16px/24px Lato, Arial, sans-serif; color: var(--ink); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.primary a:hover, .primary a[aria-current] { border-bottom-color: var(--dark-teal); }
.market { position: relative; font-size: 14px; }
.market summary { cursor: pointer; list-style: none; color: var(--charcoal); padding: 8px 12px; border: 1px solid var(--light); border-radius: 4px; }
.market summary::-webkit-details-marker { display: none; }
.market summary::after { content: ' \25BE'; }
.market ul { position: absolute; right: 0; top: calc(100% + 4px); background: var(--white); border: 1px solid var(--light); border-radius: 4px; list-style: none; margin: 0; padding: 4px 0; min-width: 120px; }
.market li a { display: block; padding: 8px 16px; color: var(--ink); text-decoration: none; }
.market li a:hover { background: var(--off-white); }
.to-global { font-size: 14px; color: var(--charcoal); text-decoration: none; padding: 8px 12px; border: 1px solid var(--light); border-radius: 4px; }
@media (max-width: 760px) {
  .site-header .bar { flex-wrap: wrap; gap: 8px 16px; }
  .primary { order: 3; width: 100%; }
  .primary ul { gap: 20px; flex-wrap: wrap; }
}

/* Dark sections */
.dark { background: var(--ink); color: var(--off-white); }
.dark .lead-dark { color: var(--off-white); }
.dark a { color: var(--teal); }
.hero { position: relative; overflow: hidden; padding: 0; min-height: 620px; display: flex; align-items: flex-start; }
/* The wave runs across the lower part of the hero so headline, body and CTAs keep a clear text-safe area above it (v1.1 s08). */
/* The stage owns the size: the Spline runtime writes its own inline width/height on the canvas, which would override a size set on the canvas itself. */
.hero-stage { position: absolute; left: 0; right: 0; top: 32%; height: 100%; } /* full-size scene, shifted down so its wave sits under the copy; the hero clips the rest */
.hero-canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s; }
.page-home .hero { min-height: 820px; }
.page-home .hero-grid { padding-bottom: 300px; }
.hero-canvas.ready { opacity: 1; }
.hero-grid { position: relative; z-index: 2; width: 100%; padding-top: 72px; padding-bottom: 88px; pointer-events: none; }
.hero-copy { max-width: 560px; pointer-events: auto; }
.hero h1 { font: 700 clamp(40px, 5.4vw, 64px)/1.1 Lato, Arial, sans-serif; margin-bottom: 16px; }
.hero .lead { font: 300 clamp(20px, 2.2vw, 26px)/1.4 Lato, Arial, sans-serif; margin-bottom: 8px; }
.product-line { font: italic 400 24px/32px Lato, Arial, sans-serif; color: var(--teal); margin-bottom: 24px; }
.hero-body { font-size: 17px; max-width: 52ch; }
.proof-line, .proof-point { font-weight: 700; }
.proof-point { color: var(--teal); }
.eyebrow-aegis { margin: 0 0 16px; }
.eyebrow-aegis .aegis-word { font-size: 28px; }
.in-kenya { font: 700 12px/16px Lato, Arial, sans-serif; letter-spacing: .16em; color: var(--teal); margin-left: 12px; }
.kenya-hero .flow { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: 56%; z-index: 1; }
.kenya-hero .flow svg { width: 100%; height: auto; display: block; }
@media (max-width: 899px) { .kenya-hero .flow { display: none; } .hero { min-height: 0; } }

/* Problem */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 72px; align-items: start; }
.split.narrow { grid-template-columns: 7fr 5fr; }
@media (max-width: 860px) { .split, .split.narrow { grid-template-columns: 1fr; } section { padding: 64px 0; } }
.problem .split { margin-bottom: 32px; }
.problem .display { max-width: 18ch; }
.prose p, .prose-solo { max-width: 52ch; }
.outcomes { margin: 56px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 72px; }
.outcomes > div { margin: 0; }
.outcomes dt { font: 700 12px/16px Lato, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dark-teal); margin-bottom: 8px; }
.outcomes dd { margin: 0; font: 300 clamp(20px, 2vw, 24px)/1.4 Lato, Arial, sans-serif; max-width: 30ch; }
@media (max-width: 760px) { .outcomes { grid-template-columns: 1fr; } }
.close-line { font: 700 clamp(26px, 3vw, 36px)/1.25 Lato, Arial, sans-serif; margin: 64px 0 0; color: var(--dark-teal); }

/* Capabilities */
.aegis-band { background: var(--white); }
.band-head { max-width: 760px; margin-bottom: 40px; }
.capabilities { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 2px solid var(--dark-teal); }
.capabilities li { display: grid; grid-template-columns: 24px minmax(180px, 280px) 1fr; gap: 0 20px; align-items: baseline; padding: 20px 0; }
.capabilities li + li { border-top: 1px solid var(--light); }
.capabilities h3 { font: 900 15px/24px Lato, Arial, sans-serif; letter-spacing: .07em; margin: 0; }
.capabilities p { margin: 0; max-width: 56ch; }
.cap-icon { align-self: center; width: 24px; height: 24px; }
@media (max-width: 760px) { .capabilities li { grid-template-columns: 24px 1fr; } .capabilities p { grid-column: 1 / -1; } }
.aegis-band .split.narrow { margin-top: 24px; }

/* Sovereignty dark band */
.sov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 80px; align-items: start; }
@media (max-width: 860px) { .sov-grid { grid-template-columns: 1fr; } }
.sov .h4 { max-width: 20ch; }
.proof { list-style: none; margin: 0; padding: 0; }
.proof li { font: 700 17px/1.4 Lato, Arial, sans-serif; letter-spacing: .06em; padding: 22px 0 22px 28px; border-top: 1px solid var(--charcoal); position: relative; }
.proof li:last-child { border-bottom: 1px solid var(--charcoal); }
.proof li::before { content: ''; position: absolute; left: 0; top: 30px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* Markets */
.map-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: center; margin-top: 24px; }
@media (max-width: 860px) { .map-wrap { grid-template-columns: 1fr; } }
.map-world { width: 100%; height: auto; display: block; }
.mk-land { fill: var(--light); }
.mk-hl { fill: var(--dark-teal); cursor: pointer; stroke: var(--off-white); stroke-width: .6; }
.mk-hl:hover, .mk-hl.on { fill: var(--teal); }
.country-list { list-style: none; margin: 0 0 24px; padding: 0; }
.country-list button { font: 700 20px/1.2 Lato, Arial, sans-serif; background: none; border: 0; border-bottom: 1px solid var(--light); width: 100%; text-align: left; padding: 14px 0; cursor: pointer; color: var(--ink); }
.country-list button[aria-pressed="true"] { color: var(--dark-teal); border-bottom: 2px solid var(--dark-teal); }
.country-name { font: 700 28px/1.2 Lato, Arial, sans-serif; margin-bottom: 12px; }

/* OpexIT.Services / final CTA */
.outcome-sec { background: var(--white); }
.stack-statements .statement { margin-bottom: 12px; }
.final-cta .display { max-width: 20ch; }
.final-cta { padding-bottom: 104px; }

/* Page heroes (light) */
.page-hero { padding-top: 72px; }
.page-hero .display { max-width: 20ch; }
.three-q { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 56px; counter-reset: q; }
.three-q li { counter-increment: q; }
.three-q li::before { content: '0' counter(q); display: block; font: 300 56px/1 Lato, Arial, sans-serif; color: var(--dark-teal); margin-bottom: 12px; }
.three-q h2 { font: 900 15px/1.35 Lato, Arial, sans-serif; letter-spacing: .07em; margin-bottom: 8px; }
@media (max-width: 860px) { .three-q { grid-template-columns: 1fr; } }
.local-data { background: var(--white); }
.reach-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; margin: 32px 0 8px; }
@media (max-width: 860px) { .reach-grid { grid-template-columns: 1fr; } }
.triangle { width: 100%; height: auto; font-family: Lato, Arial, sans-serif; }
.mechanisms { list-style: none; margin: 0; padding: 0; }
.mechanisms li { padding: 20px 0; border-top: 1px solid var(--charcoal); }
.mechanisms h3 { font: 900 15px/1.3 Lato, Arial, sans-serif; letter-spacing: .07em; color: var(--teal); margin-bottom: 6px; }
.mechanisms p { margin-bottom: 0; }
.principles { list-style: none; margin: 40px 0 24px; padding: 0; display: grid; gap: 28px; max-width: 760px; counter-reset: p; }
.principles li { counter-increment: p; padding-left: 64px; position: relative; }
.principles li::before { content: '0' counter(p); position: absolute; left: 0; top: -4px; font: 300 40px/1 Lato, Arial, sans-serif; color: var(--dark-teal); }
.principles h3 { font: 900 15px/1.35 Lato, Arial, sans-serif; letter-spacing: .07em; margin-bottom: 6px; }
.closing .display { max-width: 18ch; color: var(--dark-teal); margin: 0; }
.deps { background: var(--white); }
.kenya-context { background: var(--white); }
.callout { border-left: 4px solid var(--dark-teal); background: var(--off-white); padding: 20px 24px; font: 700 20px/1.4 Lato, Arial, sans-serif; margin: 24px 0 0; }

/* Price */
.price .split { align-items: center; }
.price-fig { margin: 8px 0 0; line-height: 1; }
.price-amount { font: 700 clamp(56px, 8vw, 96px)/1 Lato, Arial, sans-serif; color: var(--dark-teal); }
.price-unit { display: block; font: 300 24px/1.2 Lato, Arial, sans-serif; margin-top: 6px; }
.price-term { font: 700 24px/32px Lato, Arial, sans-serif; margin-top: 12px; }

/* Partners / Kenya map */
.partners { background: var(--white); }
.instruction { font-weight: 700; margin-top: 24px; }
.partner-map { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: start; margin-top: 16px; }
@media (max-width: 860px) { .partner-map { grid-template-columns: 1fr; } }
.map-kenya { width: 100%; height: auto; display: block; max-height: 640px; }
.mk-ke { fill: var(--off-white); stroke: var(--dark-teal); stroke-width: 2; }
.city circle { fill: var(--light); stroke: var(--grey); stroke-width: 2; }
.city text { font: 700 24px Lato, Arial, sans-serif; fill: var(--charcoal); }
.city.live { cursor: pointer; }
.city.live circle { fill: var(--dark-teal); stroke: var(--dark-teal); }
.city.on circle { fill: var(--teal); stroke: var(--dark-teal); }
.pm-title { font: 700 24px/32px Lato, Arial, sans-serif; }
.pm-empty { color: var(--charcoal); }
.pm-partner { padding: 14px 0; border-top: 1px solid var(--light); }
.pm-partner p { margin: 0; }
.pm-name { font-weight: 700; }
.moving { background: var(--off-white); }

/* About / contact */
.about-sov .statement { margin-bottom: 16px; }
.cta-solo { align-self: center; }
.routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 72px; margin-top: 48px; }
.route { padding: 28px 0; border-top: 1px solid var(--light); }
.route.pink .h5 { color: var(--pink-dark); }
@media (max-width: 760px) { .routes { grid-template-columns: 1fr; } }
.mail { font-weight: 700; }
.enquiry { background: var(--white); }
.narrow-form { max-width: 760px; margin-left: auto; margin-right: auto; }
.enquiry-form label { display: block; font-weight: 700; margin-bottom: 6px; }
.enquiry-form .req { font-weight: 400; font-size: 12px; color: var(--charcoal); margin-left: 6px; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { width: 100%; font: 400 16px/24px Lato, Arial, sans-serif; padding: 12px 14px; border: 1px solid var(--grey); border-radius: 4px; background: var(--white); color: var(--ink); }
.enquiry-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 640px) { .enquiry-form .two { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-notice { padding: 14px 16px; border-radius: 4px; border: 1px solid; font-weight: 700; }
.form-notice.ok { color: #0A4D69; border-color: var(--dark-teal); background: var(--off-white); }
.form-notice.err { color: #781E3C; border-color: #781E3C; background: var(--off-white); }

/* Compare costs */
.calc { padding-top: 24px; }
.calc-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
@media (max-width: 960px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-setup input { width: 160px; font: 700 20px Lato, Arial, sans-serif; padding: 10px 14px; border: 1px solid var(--grey); border-radius: 4px; }
.calc-setup label { font-weight: 700; display: block; margin-bottom: 6px; }
.calc-rule { color: var(--charcoal); margin-bottom: 4px; }
.cost-rows { margin: 24px 0 16px; }
.cost-row { border: 0; border-top: 1px solid var(--light); padding: 14px 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.cost-row legend { float: left; width: 100%; font-weight: 700; padding: 0; margin-bottom: 8px; }
.cost-row .sr { font-size: 0; display: block; flex: 1 1 180px; }
.cost-row .sr:nth-of-type(2) { flex: 0 0 130px; }
.cost-row .sr:nth-of-type(3) { flex: 0 0 160px; }
.cost-row input[type=text], .cost-row input[type=number], .cost-row select { width: 100%; font: 400 16px/24px Lato, Arial, sans-serif; padding: 9px 10px; border: 1px solid var(--grey); border-radius: 4px; background: var(--white); }
.c-not { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.c-del { font: 700 14px Lato, Arial, sans-serif; background: none; border: 0; color: var(--dark-teal); text-decoration: underline; cursor: pointer; }
.calc-out { position: sticky; top: 16px; background: var(--white); padding: 28px; border-radius: 4px; border: 1px solid var(--light); }
@media (max-width: 960px) { .calc-out { position: static; } }
.result { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.result th, .result td { padding: 12px 6px; text-align: right; border-top: 1px solid var(--light); font-variant-numeric: tabular-nums; }
.result thead th { border-top: 0; font: 700 12px/16px Lato, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.result tbody th { text-align: left; font: 900 12px/16px Lato, Arial, sans-serif; letter-spacing: .07em; }
.result .diff td, .result .diff th { color: var(--dark-teal); font-weight: 700; }
.muted-note { color: var(--charcoal); font-size: 14px; }
.calc-actions { margin-top: 16px; }
.missing { background: var(--white); }
.missing-h { font: 700 12px/16px Lato, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dark-teal); }
.missing-list { margin: 0; padding-left: 20px; }
.missing-list .none { list-style: none; margin-left: -20px; color: var(--charcoal); }

/* Footer */
.site-footer { background: var(--white); border-top: 1px solid var(--light); padding: 56px 0 40px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(140px, 220px)); gap: 32px 64px; margin-bottom: 40px; }
@media (max-width: 640px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
.site-footer h2 { font: 700 12px/16px Lato, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dark-teal); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--ink); text-decoration: none; font-size: 14px; }
.site-footer a:hover { text-decoration: underline; }
.legal-line { font-size: 12px; line-height: 16px; color: var(--charcoal); margin: 0; }

@media (max-width: 899px) { .page-home .hero { min-height: 0; } .page-home .hero-grid { padding-bottom: 72px; } }

.calc-grid > *, .split > *, .sov-grid > *, .map-wrap > * { min-width: 0; }
@media (max-width: 640px) {
  .cost-row .sr, .cost-row .sr:nth-of-type(2), .cost-row .sr:nth-of-type(3) { flex: 1 1 100%; }
  .calc-out { padding: 20px 16px; }
  .result th, .result td { padding: 10px 3px; font-size: 14px; }
}

.legal h2 { margin-top: 32px; }
.legal ul { padding-left: 20px; max-width: 62ch; }
.legal p { max-width: 68ch; }
.legal code { font-size: 14px; background: var(--white); padding: 1px 5px; border-radius: 3px; }