@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Hanken+Grotesk:wght@300..800&display=swap');

/* ============================================================
   TYPE SCALE UPLIFT — larger, more confident sizing so the site
   reads premium (not dense/AI-generated). Raises body + secondary
   + small text and relaxes line-height. Desktop first, mobile below.
   ============================================================ */
:root {
  --text-body-size: 18px;         --text-body-lh: 1.62;
  --text-body-strong-size: 18px;  --text-body-strong-lh: 1.62;
  --text-body-tight-size: 18px;   --text-body-tight-lh: 1.4;
  --text-subtitle-size: 22px;     --text-subtitle-lh: 1.45;
  --text-link-sm-size: 16px;      --text-link-sm-lh: 1.45;
  --text-eyebrow-size: 15px;
  --text-meta-size: 15px;         --text-meta-lh: 1.45;
  --text-micro-caps-size: 12px;
  --text-button-size: 16px;       --text-button-lh: 1.4;
  --text-heading-sm-size: 26px;   --text-heading-sm-lh: 1.15;
}
/* Tablet: ease the scale down slightly */
@media (max-width: 900px) {
  :root {
    --text-body-size: 17px;
    --text-body-strong-size: 17px;
    --text-body-tight-size: 17px;
    --text-subtitle-size: 20px;
  }
}
/* Small phones: keep body comfortably readable, never tiny */
@media (max-width: 480px) {
  :root {
    --text-body-size: 16.5px;      --text-body-lh: 1.6;
    --text-body-strong-size: 16.5px;
    --text-body-tight-size: 16.5px;
    --text-subtitle-size: 18px;    --text-subtitle-lh: 1.45;
    --text-link-sm-size: 15px;
    --text-meta-size: 14px;
    --text-eyebrow-size: 13px;
  }
}

/* ---------- Subtle square-grid texture on plain-color reading bands ----------
   Echoes the final-CTA grid, tuned for light surfaces: faint navy hairlines +
   a soft cyan corner glow. Only targets sections with a plain canvas background. */
section[style*="background: var(--color-canvas-warm)"],
section[style*="background: var(--color-canvas)"],
section[style*="background:var(--color-canvas-warm)"],
section[style*="background:var(--color-canvas)"] {
  position: relative;
  background-image:
    radial-gradient(closest-side at 92% 8%, rgba(63,208,224,0.10), rgba(63,208,224,0) 70%),
    repeating-linear-gradient(0deg, rgba(10,31,77,0.045) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(10,31,77,0.045) 0 1px, transparent 1px 48px) !important;
  background-size: cover, auto, auto !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat, repeat, repeat !important;
}

/* ---------- Premium hero motion: slow Ken Burns drift on the photo ---------- */
.ld-hero { position: relative !important; overflow: hidden !important; isolation: isolate !important; }
.ld-hero > .ld-hero-bg {
  position: absolute !important;
  inset: -2% !important;
  background-size: cover !important;
  background-position: center;
  z-index: -1 !important;
  pointer-events: none !important;
  animation: ld-kenburns 22s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
  will-change: transform;
}
@keyframes ld-kenburns {
  from { transform: scale(1.06) translateX(-1.6%); }
  to   { transform: scale(1.06) translateX(1.6%); }
}
@keyframes ld-hero-pan {
  from { transform: scale(1.06) translateX(-2%); }
  to   { transform: scale(1.06) translateX(2%); }
}
@keyframes ld-scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
}
@keyframes ld-wa-pulse {
  0% { box-shadow: 0 14px 34px -8px rgba(7,20,51,0.5), 0 0 0 0 rgba(63,208,224,0.45); }
  70% { box-shadow: 0 14px 34px -8px rgba(7,20,51,0.5), 0 0 0 14px rgba(63,208,224,0); }
  100% { box-shadow: 0 14px 34px -8px rgba(7,20,51,0.5), 0 0 0 0 rgba(63,208,224,0); }
}
/* Floating WhatsApp button: subtle attention pulse */
a[aria-label*="WhatsApp"] { animation: ld-wa-pulse 2.8s cubic-bezier(0.4,0,0.6,1) infinite; }
@media (prefers-reduced-motion: reduce) {
  a[aria-label*="WhatsApp"] { animation: none !important; }
  .ld-hero-scroll { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-hero-bg, .ld-hero-photo { animation: none !important; }
}

/* Disable sticky side-columns on tablet/mobile so a pinned title doesn't
   overlap content scrolling beneath it (e.g. About "Why we focus on Kenya"). */
@media (max-width: 900px) {
  [style*="position: sticky"][style*="top: 120px"],
  [style*="position:sticky"][style*="top: 120px"] {
    position: static !important;
    top: auto !important;
  }
}

/* ============================================================
   Legal.Digital — fonts: Bricolage Grotesque (display) + Hanken Grotesk (body)
   ============================================================ */
:root {
  --font-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Hanken Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  /* Bricolage sits taller than Inter — relax the display line-heights so ascenders/descenders don't clip */
  --text-display-lh: 1.06;
  --text-display-sm-lh: 1.06;
  --text-heading-md-lh: 1.08;
}
[style*="--text-display-size"],
[style*="--text-display-sm-size"],
[style*="--text-heading-md-size"],
[style*="--text-heading-sm-size"] { font-family: var(--font-display) !important; letter-spacing: -0.4px; overflow-wrap: break-word; }
input, textarea, select, button { font-family: var(--font-body); }
html, body { overflow-x: hidden; }

/* Visible, interactive form fields (contact forms) — filled + bordered + focus ring */
form input:not([type="hidden"]):not([aria-hidden="true"]),
form textarea {
  background: #ffffff !important;
  border: 1.5px solid var(--color-hairline, #d6dbe6) !important;
  border-radius: 10px !important;
  padding: 13px 15px !important;
  color: #0A1F4D !important;
  transition: border-color 160ms, box-shadow 160ms, background-color 160ms !important;
}
form input:not([type="hidden"]):not([aria-hidden="true"])::placeholder,
form textarea::placeholder { color: #9aa4b8 !important; opacity: 1; }
form input:not([type="hidden"]):not([aria-hidden="true"]):hover,
form textarea:hover { border-color: #a9b4c9 !important; }
form input:not([type="hidden"]):not([aria-hidden="true"]):focus,
form textarea:focus {
  outline: none !important;
  border-color: var(--accent, #3fd0e0) !important;
  box-shadow: 0 0 0 3px rgba(63,208,224,0.22) !important;
  background: #ffffff !important;
}

/* Newsletter email field (on dark panel) — visible, interactive */
input[placeholder="Your email"] {
  background: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 10px !important;
  padding: 13px 15px !important;
  color: #0A1F4D !important;
  transition: border-color 160ms, box-shadow 160ms !important;
}
input[placeholder="Your email"]::placeholder { color: #9aa4b8 !important; opacity: 1; }
input[placeholder="Your email"]:focus {
  outline: none !important;
  border-color: var(--accent, #3fd0e0) !important;
  box-shadow: 0 0 0 3px rgba(63,208,224,0.30) !important;
}

/* Contact audit/consultation toggle — full-width, clearly separated segments on mobile */
@media (max-width: 640px) {
  .ld-tab-toggle { display: flex !important; width: 100% !important; }
  .ld-tab-toggle button { flex: 1 1 0 !important; text-align: center !important; padding: 12px 8px !important; line-height: 1.2 !important; }

  /* Services compliance banner — stack cleanly instead of a cramped 3-part row */
  .ld-compliance-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 24px !important;
  }
  .ld-compliance-banner > div { max-width: 100% !important; }
  .ld-compliance-banner a { white-space: normal !important; color: var(--accent) !important; }
}
/* Faster, single-tap response on touch: removes the 300ms delay and stops
   hover styles from swallowing the first tap on links/buttons. */
a, button, [role="button"], input, select, textarea, label,
[onclick], [style*="cursor:pointer"], [style*="cursor: pointer"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(63,208,224,0.18);
}

/* ============================================================
   Legal.Digital — shared responsive layer
   Overrides inline styles with !important (beats inline non-important).
   Loaded in every page's <helmet>. Breakpoints: 1024 (tablet), 640 (mobile).
   ============================================================ */

/* ---------- TABLET (<= 1024px) ---------- */
@media (max-width: 1024px) {
  :root {
    --text-display-size: 40px;
    --text-display-sm-size: 34px;
    --text-heading-md-size: 30px;
    --space-section-lg: 72px;
    --space-section: 56px;
    --container-max: 100%;
  }
  [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* Footer: 6 columns -> 3 on tablet */
  footer [style*="repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ---------- MOBILE (<= 640px) ---------- */
@media (max-width: 640px) {
  :root {
    --text-display-size: 28px;
    --text-display-sm-size: 24px;
    --text-heading-md-size: 22px;
    --text-heading-sm-size: 20px;
    --text-subtitle-size: 17px;
    --space-section-lg: 44px;
    --space-section: 30px;
    --space-xxl: 26px;
    --space-xl: 20px;
  }

  /* Grids collapse */
  [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-lg) !important; }
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-lg) !important; }
  [style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }

  /* Two-column content grids written as "1fr 1fr" (platform deep-dives, etc.) */
  [style*="grid-template-columns: 1fr 1fr;"],
  [style*="grid-template-columns: 1fr 1fr "] { grid-template-columns: 1fr !important; gap: var(--space-lg) !important; }

  /* Custom multi-column data tables (comparison / channel tables): stack each
     row's cells into a titled block, and hide the orphaned header row. */
  [style*="1fr 1.6fr 1.6fr 1fr"],
  [style*="0.8fr 1.6fr 1fr 1.2fr"],
  [style*="1fr 1.6fr 1fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  [style*="1fr 1.6fr 1.6fr 1fr"][style*="var(--space-sm) 0"],
  [style*="0.8fr 1.6fr 1fr 1.2fr"][style*="var(--space-sm) 0"],
  [style*="1fr 1.6fr 1fr 1.2fr"][style*="var(--space-sm) 0"] { display: none !important; }

  /* Remaining custom 2- and 3-column fr grids collapse to single column */
  [style*="grid-template-columns: 1.4fr 1fr 2fr"],
  [style*="grid-template-columns: 1.2fr 2fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.5fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }

  /* Hero: keep the DESKTOP treatment on mobile — contained rounded card,
     sharp photo, eyebrow/headline/subtitle anchored to the bottom-left.
     Just scaled down and de-cluttered so it fits cleanly with no empty space. */
  /* MOBILE HERO (stacked) — only heroes that carry a real .ld-hero-photo (Home for now).
     Photo band on top, all copy below on navy. Other pages keep the overlay hero. */
  .ld-hero:has(.ld-hero-photo) {
    aspect-ratio: auto !important;
    min-height: auto !important;
    background: var(--color-canvas) !important;
    padding: 0 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 9px !important;
    border-radius: var(--radius-lg) !important;
  }
  /* the real photo element (hidden on desktop) becomes the top band */
  .ld-hero:has(.ld-hero-photo) .ld-hero-photo {
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    margin-bottom: 18px !important;
    animation: ld-hero-pan 20s ease-in-out infinite alternate !important;
    will-change: transform;
  }
  /* copy children get side padding; photo + wave excluded */
  .ld-hero:has(.ld-hero-photo) > *:not(.ld-hero-photo):not(svg) {
    padding-left: 22px !important;
    padding-right: 22px !important;
    position: relative !important;
    z-index: 2 !important;
  }
  /* text now sits on solid navy — drop the bg photo dim, scrim, cyan edge, wave */
  .ld-hero:has(.ld-hero-photo) > .ld-hero-bg { display: none !important; }
  .ld-hero:has(.ld-hero-photo)::after { display: none !important; }
  .ld-hero:has(.ld-hero-photo)::before { display: none !important; }
  .ld-hero:has(.ld-hero-photo) > svg { display: none !important; }
  .ld-hero [style*="var(--text-eyebrow-size)"] {
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    color: var(--accent) !important;
    opacity: 1 !important;
  }
  .ld-hero [style*="var(--text-display-size)"] {
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    max-width: 100% !important;
    text-wrap: balance !important;
    text-shadow: 0 2px 16px rgba(6,17,44,0.6) !important;
  }
  .ld-hero [style*="var(--text-subtitle-size)"] {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    color: rgba(255,255,255,0.82) !important;
    max-width: 100% !important;
  }
  /* Primary CTA: soft cyan glow + press-ready weight; both buttons lift on touch */
  .ld-hero-cta > *:first-child a,
  .ld-hero-cta > *:first-child button {
    background: var(--accent) !important;
    color: #071433 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    box-shadow: 0 14px 34px -10px rgba(63,208,224,0.45) !important;
  }
  .ld-hero-cta a, .ld-hero-cta button {
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
  }
  .ld-hero-cta a:active, .ld-hero-cta button:active { transform: translateY(1px) scale(0.995) !important; }
  .ld-hero-stats { display: none !important; }
  .ld-hero [style*="flex-wrap: wrap"][style*="gap: var(--space-md)"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 16px !important;
  }
  .ld-hero [style*="flex-wrap: wrap"][style*="gap: var(--space-md)"] > * { width: 100% !important; }
  .ld-hero [style*="flex-wrap: wrap"][style*="gap: var(--space-md)"] a,
  .ld-hero [style*="flex-wrap: wrap"][style*="gap: var(--space-md)"] button {
    width: 100% !important;
    justify-content: center !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 15px !important;
  }
  /* Scroll cue was a mobile-only add-on that created empty space — hide it */
  .ld-hero-scroll { display: none !important; }
  /* Keep decorative floating badge/thumbnail hidden so the card fits cleanly */
  div[style*="top: -28px"][style*="position: absolute"] { display: none !important; }
  div[style*="bottom: -48px"][style*="border-radius: 50%"] { display: none !important; }
  /* Tighten the empty gap directly below the hero card */
  [style*="margin-bottom: 56px"] { margin-bottom: 22px !important; }

  /* Closing CTA (mobile): clean solid navy card, cyan accent glow, solid button. No photo overlay. */
  .ld-cta {
    padding: 40px 24px !important;
    align-items: center !important;
    text-align: center !important;
    min-height: auto !important;
    background: radial-gradient(120% 90% at 50% -10%, rgba(63,208,224,0.20), rgba(63,208,224,0) 62%), #0A1F4D !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid rgba(63,208,224,0.5) !important;
  }
  .ld-cta > * { text-align: center !important; max-width: 100% !important; }
  .ld-cta > div:last-child { width: 100% !important; margin-top: 6px !important; }
  /* solid, high-converting button */
  .ld-cta a, .ld-cta button {
    background: var(--accent) !important;
    color: #071433 !important;
    border: none !important;
    font-weight: 700 !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 22px !important;
    box-shadow: 0 14px 30px -10px rgba(0,212,255,0.55) !important;
    text-decoration: none !important;
  }
  .ld-cta a *, .ld-cta button * { color: #071433 !important; }
  /* remove floating "back to top" vertical label so it doesn't overlap the card */
  .ld-backtotop span { display: none !important; }

  /* Section side padding tighten */
  section { padding-left: 20px !important; padding-right: 20px !important; }

  /* Footer: roomy 2-column layout on phones — lighter padding, generous
     row spacing, and a full-width first (brand) column so nothing feels packed. */
  footer { padding: 40px 22px 24px !important; }
  footer [style*="repeat(6, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
    margin-bottom: var(--space-xl) !important;
  }
  footer [style*="repeat(6, 1fr)"] > *:first-child { grid-column: 1 / -1 !important; }
  footer [style*="display: flex"] { flex-wrap: wrap !important; }
  footer [style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-md) !important;
  }
  footer [style*="gap: var(--space-lg)"] { gap: 10px 18px !important; }
}

@media (max-width: 430px) {
  footer [style*="repeat(6, 1fr)"] { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ---------- NAV: wrap to rows on smaller screens (<= 900px) ----------
   React serializes inline styles as "prop: value" — selectors must include the space.
   Two nav structures exist: links as a direct child of <nav> (Home) OR nested inside
   a flex:1 wrapper alongside the logo (service pages). Handle both. */
@media (max-width: 900px) {
  nav[style*="height: 64px"] {
    height: auto !important;
    flex-wrap: wrap !important;
    row-gap: 10px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    justify-content: space-between !important;
  }
  /* service pages nest logo+links in a flex:1 wrapper (gap: xxl) — dissolve it on
     mobile so logo/links/button become direct nav children, matching Home's layout */
  nav[style*="height: 64px"] > div[style*="gap: var(--space-xxl)"] {
    display: contents !important;
  }
  /* the middle link cluster (wherever nested): full width on its own row, centered */
  nav[style*="height: 64px"] [style*="justify-content: flex-end"] {
    flex-basis: 100% !important;
    order: 3 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    margin-right: 0 !important;
  }
  /* hover mega/simple panels would overlap on touch — suppress */
  nav[style*="height: 64px"] [style*="position: absolute"][style*="top: 100%"] { display: none !important; }
}

@media (max-width: 640px) {
  .ld-backtotop { right: 16px !important; bottom: 112px !important; }
  .ld-backtotop button { width: 40px !important; height: 40px !important; }
  .ld-backtotop span { font-size: 9px !important; letter-spacing: 1.5px !important; }
}

/* ---------- CONDENSE NAV + CONTACT FORM on phones ---------- */
@media (max-width: 640px) {
  /* Nav: reclaim headroom — tighter padding, smaller links, compact CTA pill */
  nav[style*="height: 64px"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    row-gap: 6px !important;
    column-gap: 10px !important;
  }
  nav[style*="height: 64px"] [style*="justify-content: flex-end"] {
    gap: 8px 14px !important;
    font-size: 14px !important;
  }
  /* the nav's trailing "Get Free Website Audit" button → compact pill */
  nav[style*="height: 64px"] > *:last-child a,
  nav[style*="height: 64px"] > *:last-child button {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }
  /* breadcrumb row: trim vertical space */
  nav[style*="height: 64px"] + div[style*="var(--space-sm)"] { padding-top: 6px !important; padding-bottom: 8px !important; }

  /* Contact form: bring fields up — lighter panel padding, tighter intro,
     and keep short field pairs side-by-side so the form isn't a long scroll. */
  #get-started { padding-top: 22px !important; padding-bottom: 28px !important; }
  #get-started [style*="padding: var(--space-xxl)"] { padding: 20px !important; }
  #get-started [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Fields never overflow the screen */
  #get-started input, #get-started textarea, #get-started select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
  }
  /* Any remaining side-by-side field pair anywhere on the page stacks */
  form [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* Testimonial slider: one card per view on phones */
@media (max-width: 720px) {
  #ld-testi-track > div { flex-basis: 100% !important; }
}

/* Testimonial nav arrows: guarantee they're visible + high-contrast on mobile */
@media (max-width: 640px) {
  button[aria-label="Previous testimonial"],
  button[aria-label="Next testimonial"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 5 !important;
    width: 50px !important;
    height: 50px !important;
    background: var(--accent) !important;
    border: 2px solid var(--accent) !important;
    box-shadow: 0 6px 16px -6px rgba(0,212,255,0.5) !important;
  }
  button[aria-label="Previous testimonial"] i,
  button[aria-label="Next testimonial"] i,
  button[aria-label="Previous testimonial"] svg,
  button[aria-label="Next testimonial"] svg {
    color: #071433 !important;
    stroke: #071433 !important;
    width: 22px !important;
    height: 22px !important;
  }
}