/* ==========================================================================
   Akọ AI — akoai.uk
   Foundation stylesheet. Design tokens and base styles only.
   Components (nav, hero, cards, footer) are to be built on top of this.

   PRINCIPLE: zero third-party requests. No Google Fonts, no CDN libraries,
   no trackers. Faster, nothing external to break, and no visitor IP is sent
   to a third party — which matters for a company selling data discipline.
   ========================================================================== */

:root {
  /* Brand palette — sampled from the official brand background.
     Do not invent new brand colours; extend from these. */
  --navy-900:  #001543;   /* deepest — footers, hero base            */
  --navy-800:  #021C56;
  --navy-700:  #062B71;
  --blue-600:  #1048A1;   /* sampled from the brand glow             */
  --blue-500:  #1C6FD6;   /* links, buttons                          */
  --cyan-400:  #22B5F0;   /* accent, from the chevron mark           */

  /* Neutrals — body text and surfaces on light backgrounds */
  --ink:       #10151F;
  --ink-muted: #51607A;
  --line:      #DDE3EC;
  --surface:   #F4F7FA;
  --white:     #FFFFFF;

  /* Type — system stack, so nothing is fetched from another server */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --measure: 68ch;        /* max line length for readable prose      */
  --wrap:    1120px;      /* page container                          */
  --gutter:  clamp(1rem, 4vw, 2.5rem);
  --radius:  10px;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-500); }

/* --- type ----------------------------------------------------------------- */
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem); font-weight: 600; }
p  { margin: 0 0 1.1em; max-width: var(--measure); }
.lead { font-size: 1.2em; color: var(--ink-muted); }

/* --- layout --------------------------------------------------------------- */
.wrap    { width: 100%; max-width: var(--wrap); margin-inline: auto;
           padding-inline: var(--gutter); }
section  { padding-block: clamp(3rem, 7vw, 6rem); }
.section-dark { background: var(--navy-900); color: var(--white); }
.section-dark .lead { color: #AFC0DC; }
.section-tint { background: var(--surface); }

/* --- accessibility -------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--cyan-400); outline-offset: 2px; }
.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy-900); color: var(--white);
  padding: 0.75rem 1rem; z-index: 100;
}
.skip-link:focus { left: var(--gutter); top: 0.5rem; }

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

/* --- shared header -------------------------------------------------------- */
.site-header {
  background: var(--navy-900);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.brand img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; }
.nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 0.65rem;
  border-radius: 5px;
}
.nav a:hover, .nav a:focus-visible { background: rgba(255, 255, 255, 0.13); }

/* --- hero and page headings ---------------------------------------------- */
.hero, .page-hero {
  color: var(--white);
  background-color: var(--navy-900);
  background-image: linear-gradient(90deg, rgba(0, 21, 67, 0.96), rgba(0, 21, 67, 0.73)), url("../img/hero-bg.jpg");
  background-size: cover;
  background-position: center;
}
.hero { padding-block: clamp(5rem, 11vw, 9rem); }
.page-hero { padding-block: clamp(4rem, 8vw, 6rem); }
.hero-inner { max-width: var(--wrap); }
.hero h1 { max-width: 19ch; }
.page-hero h1 { max-width: 22ch; }
.hero-copy {
  max-width: 60ch;
  color: var(--white);
  font-size: clamp(1.05rem, 0.96rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  margin-bottom: 1.6rem;
}
.eyebrow {
  color: var(--blue-600);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.35;
  margin-bottom: 0.9rem;
  text-transform: uppercase;
}
.hero .eyebrow, .page-hero .eyebrow, .section-dark .eyebrow { color: var(--cyan-400); }

/* --- calls to action ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  max-width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1.2rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
.btn-primary { color: var(--white); background: var(--blue-500); }
.btn-primary:hover { background: var(--blue-600); }
.btn-light { color: var(--navy-900); background: var(--white); }
.btn-light:hover { background: var(--surface); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.text-link { color: var(--white); font-weight: 700; text-underline-offset: 0.2em; }

/* --- content -------------------------------------------------------------- */
.split { display: grid; gap: 1.5rem 4rem; }
.split > * { min-width: 0; }
.split h2 { max-width: 18ch; }
.prose p:last-child { margin-bottom: 0; }
.section-intro { color: var(--ink-muted); margin-bottom: 2rem; }
.card-grid { display: grid; gap: 1rem; }
.card {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card-number { display: block; color: var(--blue-600); font-weight: 800; font-size: 0.85rem; margin-bottom: 1.2rem; }
.card p { color: var(--ink-muted); font-size: 0.95rem; margin-bottom: 0; }
.steps { display: grid; gap: 1.5rem; margin: 2rem 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: 1rem; min-width: 0; }
.step-number {
  display: grid;
  place-items: center;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--white);
  background: var(--navy-700);
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
}
.steps h3 { margin-top: 0.25rem; }
.steps p { color: var(--ink-muted); margin-bottom: 0; }
.note { max-width: 65ch; padding: 1rem 1.25rem; border-left: 4px solid var(--blue-500); background: var(--white); margin-bottom: 0; }
.fact-list { display: grid; gap: 0.75rem; padding: 0; margin: 1.75rem 0 0; list-style: none; }
.fact-list li { padding: 0.8rem 1rem; background: var(--white); border: 1px solid var(--line); border-radius: 6px; font-weight: 600; }
.cta-inner { display: grid; align-items: center; gap: 1.5rem 3rem; }
.cta-inner h2 { max-width: 22ch; }
.cta-inner p:last-child { color: var(--white); margin-bottom: 0; }
.cta-inner .btn { justify-self: start; }
.contact-grid { display: grid; gap: 3rem; }
.contact-email { font-size: clamp(1.15rem, 1rem + 1vw, 1.65rem); font-weight: 700; overflow-wrap: anywhere; text-underline-offset: 0.2em; }
.contact-panel { padding: clamp(1.4rem, 4vw, 2.25rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.contact-panel h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.75rem); }
.check-list { padding-left: 1.25rem; margin: 1.25rem 0; }
.check-list li { margin-bottom: 0.65rem; padding-left: 0.25rem; }
.check-list li::marker { color: var(--blue-600); }
.contact-panel p:last-child { margin-bottom: 0; }
.privacy-copy { max-width: 76ch; }
.privacy-copy h2 { margin-top: 1.6em; }
.privacy-copy h2:first-child { margin-top: 0; }
.privacy-copy ul { padding-left: 1.5rem; }
.privacy-copy li { margin-bottom: 0.5rem; }
.error-hero { min-height: 55vh; display: flex; align-items: center; }

/* --- shared footer -------------------------------------------------------- */
.site-footer { color: var(--white); background: var(--navy-900); padding-block: 3rem 1.25rem; }
.footer-inner { display: grid; gap: 1.5rem; }
.footer-brand { color: var(--white); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.45rem; }
.site-footer p { color: var(--white); font-size: 0.9rem; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; }
.footer-links a { color: var(--white); font-size: 0.9rem; text-underline-offset: 0.2em; }
.footer-bottom { padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.2); color: var(--white); font-size: 0.8rem; }

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: 1fr auto; }
}
@media (min-width: 800px) {
  .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .steps li { display: block; }
  .step-number { margin-bottom: 1rem; }
  .cta-inner { grid-template-columns: 1fr auto; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .fact-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* --- animated pipeline diagram -------------------------------------------
   Base state is VISIBLE. Animation enhances; it never reveals. If animation
   is disabled or fails, the full diagram still reads.                      */
.pipeline { margin: 1.75rem 0 0; max-width: 640px; }
.pipeline svg {
  display: block; width: 100%; height: auto;
  aspect-ratio: 560 / 150;          /* guarantees height even if auto fails */
  overflow: visible;
}
.pl-frame { fill: #FFFFFF; stroke: #B9C6DA; stroke-width: 1.8; }
.pl-body  { fill: none; stroke: #43506B; stroke-width: 2.2; stroke-linecap: round; }
.pl-box   { fill: none; stroke: var(--blue-500); stroke-width: 1.8; stroke-dasharray: 5 4; }
.pl-kp circle { fill: var(--cyan-400); }
.pl-track { fill: none; stroke: var(--cyan-400); stroke-width: 2.2; stroke-linecap: round; }
.pl-bar   { stroke: var(--blue-600); stroke-width: 7; stroke-linecap: round; }
.pl-tick  { fill: none; stroke: #0E9F6E; stroke-width: 2.8;
            stroke-linecap: round; stroke-linejoin: round; }
.pl-flow  { stroke: #B9C6DA; stroke-width: 2; stroke-dasharray: 6 5; }
.pl-scan  { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .pl-scan  { animation: plScan 7s ease-in-out infinite; }
  .pl-flow  { animation: plMarch 1.4s linear infinite; }
  .pl-box, .pl-kp circle { animation: plPulse 7s ease-in-out infinite; animation-delay: 2.2s; }
  .pl-bar.b1 { animation: plPulse 7s ease-in-out infinite; animation-delay: 4.1s; }
  .pl-bar.b2 { animation: plPulse 7s ease-in-out infinite; animation-delay: 4.3s; }
  .pl-bar.b3 { animation: plPulse 7s ease-in-out infinite; animation-delay: 4.5s; }
  .pl-track { stroke-dasharray: 44; animation: plDraw44 7s ease-in-out infinite; animation-delay: 2.9s; }
  .pl-tick  { stroke-dasharray: 40; animation: plDraw40 7s ease-in-out infinite; animation-delay: 4.8s; }
}
@keyframes plScan   { 0%,6% { transform: translateY(0); opacity: 0 }
                      10% { opacity: .9 } 26% { transform: translateY(78px); opacity: .9 }
                      32%,100% { opacity: 0 } }
@keyframes plPulse  { 0%,10% { opacity: .25 } 30%,100% { opacity: 1 } }
@keyframes plDraw44 { 0%,8% { stroke-dashoffset: 44 } 34%,100% { stroke-dashoffset: 0 } }
@keyframes plDraw40 { 0%,8% { stroke-dashoffset: 40 } 34%,100% { stroke-dashoffset: 0 } }
@keyframes plMarch  { to { stroke-dashoffset: -22 } }

.pipeline-labels {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 640px; margin-top: 0.4rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted); text-align: center;
}

/* --- footage commitments -------------------------------------------------
   The three "we do not" promises. Used on the privacy page and, in the same
   full wording, in the assurance section of the home page. The icon is sized
   well above the text and the row is top-aligned: this is the claim a
   customer cares most about, so it is a block to look at, not a bullet.   */
.commitments { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.commitments li {
  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem;
}
.commitment-icon {
  flex: 0 0 auto; width: 3.15em; height: 3.15em;
  position: relative; top: -0.15em; color: var(--blue-500);
}
.commitment-icon svg { width: 100%; height: 100%; display: block; stroke-width: 1.3; }
.commitment-icon .strike { stroke: var(--blue-500); stroke-width: 2; }

/* The home page section is full-bleed; 55px icons beside a 100ch line would
   look stranded, so hold the measure in. */
.assurance-commitments { max-width: 68ch; }

/* Phones: a 3.15em icon plus a comfortable measure does not fit side by
   side, so stack the icon above its sentence. */
@media (max-width: 30rem) {
  .commitments li { flex-direction: column; gap: 0.5rem; }
  .commitment-icon { width: 2.6em; height: 2.6em; top: 0; }
}

.assurance-note { margin-top: 0.9rem; color: var(--ink-muted); font-size: 0.95rem; }