:root{
  --accent:#7A5BFF;
  --text:#EED7E7;
  --text-dim:#B9BDD1;
  --bg-top:#23103E; --bg-mid:#100A1F; --bg-bottom:#0E0A18;
  --panel:#1A1425; --panel-border:#3B2A4E;
  --maxw:1100px; --radius:16px;
  --nav-pad-y:.35rem;   /* matches active pill vertical padding */
  --nav-pad-x:.6rem;
  --nav-radius:10px;
  --nav-h: 44px;   /* pill height for ALL nav items */
  --nav-r: 14px;   /* consistent radius */
  --nav-bg: #2b1e49;         /* sRGB base */
  --nav-bg-2: #24193c;       /* sRGB shade */
  --nav-brd: #5a3ea3;

  --glow1: radial-gradient(140vw 90vh at 70% -10%,
      rgba(122,91,255,.26) 0%,
      rgba(122,91,255,.14) 32%,
      rgba(122,91,255,.06) 48%,
      transparent 66%);
  --glow2: radial-gradient(100vw 60vh at 10% 22%,
      rgba(122,91,255,.16) 0%,
      rgba(122,91,255,.08) 28%,
      rgba(122,91,255,.04) 44%,
      transparent 62%);
  --bgLinear: linear-gradient(165deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
  /* ---- Spacing scale (one place to tweak site-wide rhythm) ---- */
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 2.5rem;
  --space-7: 3rem;
  --space-8: 4rem;
/* shared horizontal padding for small screens */
  --px: clamp(18px, 5.5vw, 28px);

}
.site-header{
  background: linear-gradient(180deg, var(--nav-bg), var(--nav-bg-2));
  border-bottom: 1px solid color-mix(in srgb, var(--nav-brd) 45%, transparent);
}
*{box-sizing:border-box}
html,body{height:100%;
  background:
    var(--glow1),
    var(--glow2),
    var(--bgLinear),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.02'/></svg>");
  background-blend-mode: normal, normal, normal, overlay;
  background-color: var(--bg-bottom);

}


@media (max-width: 420px){
  :root{ --px: clamp(20px, 6vw, 32px); }
}


body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:transparent; /* helps with the diffusion of the blend between colours */
  background-blend-mode: normal, normal, normal, overlay;
  background-color:var(--bg-bottom);
  min-height: 100dvh;   /* use 100svh if you care about old iOS quirks */
  display: flex;
  flex-direction: column;
}
/* Wide-gamut overlay (only on displays/browsers that support Display-P3) */
@supports (color: color(display-p3 0.55 0.45 0.95 / 0.22)) {
  body{
    --p3Glow:
      radial-gradient(130vw 80vh at 70% -12%,
        color(display-p3 0.55 0.45 0.95 / 0.22) 0%,
        color(display-p3 0.55 0.45 0.95 / 0.10) 46%,
        transparent 66%);
    background-image:
      var(--p3Glow),
      var(--glow2),
      var(--bgLinear),
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter>\
  <rect width='100%' height='100%' filter='url(%23n)' opacity='.02'/>\
</svg>");
    background-blend-mode: normal, normal, normal, overlay;
  }
}

a{color:var(--accent);text-decoration:none}
/* If you want underlines in page copy, scope it there, not the nav */
.prose a:hover, main a:hover{ text-decoration:underline }

.container{ max-width: var(--maxw); margin: 0 auto; padding-inline: var(--px); }
main{flex: 1 0 auto;
padding:2rem 0;
padding-bottom: 3rem;
}
/* Section rhythm: everything in main gets air by default */
main > section { padding-block: var(--space-7); }
@media (min-width: 980px){
  main > section { padding-block: var(--space-8); }
}
/* Headings don’t smash into content */
h1 { margin-block: var(--space-3) var(--space-4); }
h2 { margin-block: var(--space-3) var(--space-3); }

/* Simple vertical stack utility for ad-hoc groups */
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }


/* Header / nav */
header{position:sticky;top:0;z-index:100;background:transparent;
  backdrop-filter:saturate(140%) blur(8px);
  flex: 0 0  auto;
}

/* ensure header/nav/hero don’t hug the bezel */
header .nav, .hero, main{ padding-inline: var(--px); }

/* belt + braces in case any old nudge is lurking */
.hero h1{ margin-left: 0; }
.brand, .burger{ margin-left: 0; }


header::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04) 70%, transparent);
}

.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-badge{
  width:28px;
  height:28px;
  border-radius:8px;
  background: linear-gradient(135deg, #6b4ac9 0%, #7A5BFF 100%); /* solid */
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:700;
  font-size:.8rem;
  border: 0;               /* remove inner stroke so it looks filled */
  flex-shrink: 0;}

  /* ===== NAV (desktop default) ===== */
  nav ul{
    display:flex;
    gap:1rem;
    list-style:none;
    margin:0;
    padding:0;
    align-items:center;
  }
  .burger{ display:none; }     /* hidden on desktop */
  #menu-toggle{ display:none; }

  /* ===== NAV (mobile) ===== */
  @media (max-width:760px){
    /* burger button on the far right */
    .burger{
      display:grid;
      margin-left:auto;
      margin-right:.25rem;     /* keep it off the edge */
      width:44px; height:44px; /* comfy tap target */
      place-items:center;
      cursor:pointer;
      z-index:999;
    }

    /* hide menu until opened */
    nav ul{
      display:none;            /* ONLY inside this media query */
      position:absolute;
      left:0; right:0;
      top:calc(var(--nav-h,44px) + 12px);
      background:#0f0b18;
      border-bottom:1px solid rgba(255,255,255,.08);
      padding:1rem;
      flex-direction:column;
      align-items:center;
      z-index:1000;
    }

    /* open state (checkbox hack) */
    #menu-toggle:checked + nav ul{ display:flex; }
  }


  /* Slightly more breathing room */
  .contact-grid .card p{ margin:.35rem 0 .6rem; }
  .contact-grid .list{ margin-top:.4rem; }

/* Hero + typography */
.hero{padding:4rem 0 2rem}
.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.9rem}
h1{font-size:clamp(2rem,1.4rem + 2.5vw,3.2rem);line-height:1.15;margin:.4rem 0 1rem}
.lead{color:var(--text-dim)}

/* Chips */
.trust{padding:1rem 0;
  padding-block: var(--space-5);
}
.trust { margin: 1.2rem 0 2.2rem; }
.trust .container .row{
  display: grid;
  /* flex-wrap: wrap; */
  justify-content: center;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: .85rem 1rem;
  /* max-width: var(--maxw);  aligns with header text */
  /* margin: 0 auto; */
}


/* responsive fallbacks so they don’t squish */
@media (max-width:1100px){ .trust .container .row{ grid-template-columns: repeat(4, minmax(120px,1fr)); } }
@media (max-width: 900px){ .trust .container .row{ grid-template-columns: repeat(3, minmax(120px,1fr)); } }
@media (max-width: 700px){ .trust .container .row{ grid-template-columns: repeat(2, minmax(120px,1fr)); } }
@media (max-width: 420px){ .trust .container .row{ grid-template-columns: 1fr; } }


.trust .chip{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 38%), color-mix(in oklab, var(--panel) 78%, white 22%);   /* stronger for sRGB */
  border-color: color-mix(in oklab, var(--panel-border) 55%, white 25%);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  color:var(--text);
  border:1px solid var(--panel-border);
  border-radius:999px;
  padding:.55rem .95rem;
  font-size:1.6rem;             /* larger text */
  font-weight:500;
  text-align:center;
  display:inline-flex;           /* centers text inside each pill */
  align-items:center;
  justify-content:center;
  height:48px;                   /* consistent height */
  white-space:nowrap;            /* Rail & Metro stays on one line */
  line-height:1;
  letter-spacing: .2px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.trust .container{ max-width: 980px; margin-inline: auto; }

/* Hover = same accent pop as cards */
.trust .chip:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 20px rgba(0,0,0,.35), 0 0 1px var(--accent) inset;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 38%), color-mix(in oklab, var(--panel) 72%, white 28%);   /* a hair brighter */
}
@media (color-gamut: p3){
  .trust .chip{
    background:
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 38%),
      color-mix(in oklab, var(--panel) 86%, white 10%);
  }
  .trust .chip:hover{
    background:
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 38%),
      color-mix(in oklab, var(--panel) 82%, white 12%);
  }
}

/* Cards/grid */
.cards{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:var(--space-5);
  margin-top:var(--space-5)}

.card{background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:0 12px 32px rgba(0,0,0,.25)}
.card h1,.card h2,.card h3,.card h4,.card strong{color:var(--text)}
.card p,.card li,.card small,.card .tiny{color:var(--text-dim)}
.list{margin:.6rem 0 0;padding-left:1.1rem}

/* If the page has fewer than 3 cards, relax the layout automatically */
.cards:not(:has(.card:nth-child(3))){
  max-width: 900px;                 /* prevents one or two cards stretching silly wide */
  margin-inline: auto;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
/* Contact: two cols on roomy screens, stack on phones */
.contact-grid{
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}
@media (max-width: 760px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Let long emails break instead of punching through the card */
.cards a[href^="mailto:"],
.contact-grid a {
  overflow-wrap: anywhere;   /* modern, safe */
  word-break: break-word;    /* belt + braces */
}

/* Buttons */
.btn{display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.8rem 1.1rem;
  border-radius:12px;
  border:1px solid var(--panel-border);
  font-weight:700}
.btn.ghost{background:var(--accent);
  border-color:var(--accent);
  color:#fff}
.btn.primary{background:transparent;
  color:var(--text)}

/* Footer */
footer{position: relative;
  background: transparent;          /* kill the solid block */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 1px solid rgba(255,255,255,.06); /* optional subtle separator */
  color:#cfd0d6;padding:2rem 0;
  margin-top:auto;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.tiny{font-size:.9rem;color:#a9adb7
}
footer::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,.05) 40%, transparent 80%);
  /* very gentle tint; no hard edge */
}
/* ===== NAV PILL SYSTEM (final) ===== */

/* 1) Base pills for all nav links EXCEPT the home icon */
header nav a:not(.home-link){
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--nav-h);
  padding: var(--nav-pad-y) var(--nav-pad-x);
  border:1px solid rgba(122,91,255,.35);
  border-radius:var(--nav-r);
  color:var(--text); font-weight:600; text-decoration:none;
  transition:border-color .15s, box-shadow .15s, background .15s, color .15s;
}

/* 2) Home icon pill — scoped to the ANCHOR only */
header nav a.home-link{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--nav-h);
  padding: var(--nav-pad-y) var(--nav-pad-x);
  border:1px solid rgba(122,91,255,.35);
  border-radius:var(--nav-r);
  color:var(--text);
  transition:border-color .15s, box-shadow .15s, background .15s, color .15s;
}

/* 3) Hover states (split so home gets OUTER glow) */
header nav a:not(.home-link):hover,
.brand:hover{
  border-color: rgba(122,91,255,.60);
  box-shadow: 0 0 0 3px rgba(122,91,255,.18) inset;
}
header nav a.home-link:hover{
  border-color: rgba(122,91,255,.60);
  box-shadow: 0 0 0 3px rgba(122,91,255,.18); /* no inset */
}

/* 4) Active/current page */
header nav a[aria-current="page"],
header nav a.active{
  background: rgba(122,91,255,.20);
  border-color: rgba(122,91,255,.60);
  color: var(--accent);
}

/* 5) Keyboard focus (match hover split) */
header nav a:not(.home-link):focus-visible,
.brand:focus-visible{
  outline: 0;
  border-color: rgba(122,91,255,.60);
  box-shadow: 0 0 0 3px rgba(122,91,255,.20) inset;
}
header nav a.home-link:focus-visible{
  outline: 0;
  border-color: rgba(122,91,255,.60);
  box-shadow: 0 0 0 3px rgba(122,91,255,.20);
}

/* 6) Brand pill */
.brand{
  display:inline-flex; align-items:center; gap:.5rem;
  height:var(--nav-h);
  padding:.6rem .9rem;
  border:1px solid rgba(122,91,255,.35);
  border-radius:14px;
  text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s, background .15s, color .15s;
}

/* 7) Size the home glyph */
nav .home-link svg{
  display:block; width:1.2em; height:1.2em;
}


/* Badge is decorative; let the <a> handle hover */
.brand-badge{ pointer-events:none; }

/* ===== SERVICES: single, final block ===== */

/* Layout: ILS full width on its own row; RAMS + Compliance below */
.services-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "primary primary primary"
    "rams    .       comp";
  column-gap: 1.6rem;
  row-gap: 2.2rem;
  align-items: start;                /* don't stretch siblings */
}

/* Map cards */
.svc-card.primary  { grid-area: primary; }
.svc-card.svc-rams { grid-area: rams; }
.svc-card.svc-comp { grid-area: comp; }

/* Card base */
.svc-card{
  position: relative;
  overflow: visible;                 /* allow scale to bleed */
  background: var(--panel,#1A1425);
  border: 1px solid var(--panel-border,#3B2A4E);
  border-radius: 16px;
  padding: 1.2rem 1.2rem 1rem;
  transform-origin: top center;
  isolation: isolate;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .20s ease,
    border-color .20s ease;
}
.svc-card h3{ margin:0 0 .35rem; font-size:1.2rem; }
.svc-rams{ background: color-mix(in oklab, var(--panel) 86%, black); }
.svc-ils { background: color-mix(in oklab, var(--panel) 92%, white 4%); }
.svc-comp{ background: color-mix(in oklab, var(--panel) 86%, black); }

/* Compact at rest */
.svc-card .hook{ opacity:1; transition:opacity .15s ease; }
.svc-card .leadcard,
.svc-card .details{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(6px);
  margin-top: 0 !important;
  padding-top: 0 !important;
  transition:
    max-height .35s cubic-bezier(.2,.7,.2,1),
    opacity .20s ease,
    transform .20s ease;
}
.svc-card .details ul{ margin:0 !important; padding-left:1.2rem; }
.svc-card .details li{ padding:.18rem 0; }

/* No-flicker hover: stabilise hitbox with tiny buffers */
.svc-card > *{ pointer-events: none; } /* children don't steal :hover */


.services-grid .svc-card.svc-rams::before,
.services-grid .svc-card.svc-comp::before{
  content:"";
  position:absolute; left:-6px; right:-6px; top:-26px; height:30px; /* bridge gap below ILS */
}

/* Hover: lift + subtle zoom; reveal content */
.svc-card:is(:hover,:focus-within){
  transform: translateY(-8px) scale(1.035);
  z-index: 3;
  background: color-mix(in oklab, var(--panel) 90%, white 6%);
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
  /* add the accent border highlight like the other cards */
  border-color: var(--accent);
  /* optional: inner ring so it “pops” without changing layout */
  box-shadow:
    0 16px 36px rgba(0,0,0,.45),
    0 0 0 1px var(--accent) inset;
}
/* make icons react on expand (same behavior as other pages) */
.svc-card:is(:hover,:focus-within) .icon{
  fill: var(--text);
  transform: scale(1.1);
}
.svc-card:is(:hover,:focus-within) .hook{ opacity:0; }
.svc-card:is(:hover,:focus-within) .leadcard,
.svc-card:is(:hover,:focus-within) .details{
  max-height: 460px; opacity: 1; transform: none; margin-top: .45rem !important;
}

/* Mobile/tablet: no hover, show everything */
@media (pointer:coarse){
  .services-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "primary"
      "rams"
      "comp";
    row-gap: 1.2rem;
  }
  .svc-card .leadcard,
  .svc-card .details{ max-height:none; opacity:1; transform:none; }
  .svc-card .hook{ display:none; }
  .services-grid .svc-card::after,
  .services-grid .svc-card::before{ display:none; }
}
/* limit line length inside the full-width ILS card */
.svc-card.primary header,
.svc-card.primary .leadcard,
.svc-card.primary .details ul { max-width: 80ch; }

/* motion-sensitive users */
@media (prefers-reduced-motion: reduce){
  .services-grid .svc-card,
  .services-grid .svc-card .leadcard,
  .services-grid .svc-card .details{
    transition: none !important;
    transform: none !important;
  }
}

/* strong focus ring for keyboard */
.services-grid .svc-card:focus-visible{
  outline: 2px solid rgba(122,91,255,.7);
  outline-offset: 3px;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset;
}

/* keep interactive elements clickable inside cards */
.svc-card a,
.svc-card button{ pointer-events: auto; position: relative; z-index: 1; }

@media (hover:hover){
  .svc-card.primary::before{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(100deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
    transform: translateX(-120%);
    pointer-events:none;
    animation: svcSheen 1.4s ease-out 1 1.2s; /* duration, easing, run-once, delay */
  }
  @keyframes svcSheen{
    to { transform: translateX(120%); }
  }
}
@media (prefers-reduced-motion: reduce){
  .svc-card.primary::before{ display:none; }
}
/* Sheen: clip to the card, run once, then stay gone */
@media (hover:hover){
  .svc-card.primary{
    position: relative;       /* anchor the pseudo-element */
    overflow: hidden;         /* clip the sheen inside the card */
  }
  .svc-card.primary::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;   /* match the card corners */
    pointer-events:none;
    background:
      linear-gradient(100deg,
      transparent 40%,
      rgba(255,255,255,.11) 46%,
      rgba(255,255,255,.22) 50%,
      rgba(255,255,255,.11) 54%,
      transparent 60%);
    transform: translateX(-120%);
    opacity: 0;
    will-change: transform, opacity;

    /* P3 displays — a hair brighter, still not casino */
@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .svc-card.primary::before{
      background:
        linear-gradient(100deg,
          transparent 40%,
          color(display-p3 1 1 1 / .13) 46%,
          color(display-p3 1 1 1 / .28) 50%,
          color(display-p3 1 1 1 / .13) 54%,
          transparent 60%);
}}}
    /* explicit animation props so shorthand order can't betray us */
    animation-name: svcSheen;
    animation-duration: 1.6s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;              /* start a beat after load */
    animation-iteration-count: 2;     /* run once */
    animation-fill-mode: forwards;    /* stay off-screen at the end */
  }

  @keyframes svcSheen{
    0%   { transform: translateX(-120%); opacity: 0; }
    15%  { opacity: .85; }
    85%  { opacity: .85; }
    100% { transform: translateX(120%); opacity: 0; }
  }
}

/* Motion-sensitive users: no shimmer */
@media (prefers-reduced-motion: reduce){
  .svc-card.primary::before{ animation: none !important; }
}
/* Anchor hint to the card, not the header */
.svc-card { position: relative; }               /* already true, just ensuring */


/* Footer aligned to header container */
.site-footer { padding: 1.6rem 0 2.2rem; border-top: 1px solid rgba(255,255,255,.06); }

/* Grid: left fills, right hugs the edge */
.foot-grid{
  display: grid;
  grid-template-columns: 1fr auto;   /* left | right */
  align-items: start;
  column-gap: 1.6rem;
}

/* Left block: stack logo + strapline neatly */
.footer-left{ display:flex; flex-direction:column; gap:.4rem; }
.footer-left .brand{ display:flex; align-items:center; gap:.55rem; }

/* If your brand pill styling bleeds into the footer, declaw it here */
.site-footer .brand{ background:transparent; border:0; box-shadow:none; padding:0; }

/* Right block: shove to the right, compact spacing */
.footer-right{
  justify-self: end;             /* move all the way right */
  display:flex;
  align-items:flex-start;
  gap: 1.2rem;                   /* gap between the two clusters */
}

.footer-links,
.footer-legal{
  display:flex;
  gap:.85rem;                    /* tighter between links */
  font-size:.94rem;              /* quieter */
  line-height:1.15;
  letter-spacing:.2px;
}

.footer-links a,
.footer-legal a{
  text-decoration:none;
  opacity:.9;
}
.footer-links a:hover,
.footer-legal a:hover{ opacity:1; text-decoration:underline; text-underline-offset:2px; }

/* Strapline quieter so it stops yelling at the room */
.footer-left .strap{ opacity:.8; }

/* Meta row already uses .container, so it will align with header edges */

/* Mobile: stack and remove the “push right” */
@media (max-width: 820px){
  .foot-grid{ grid-template-columns:1fr; row-gap:.8rem; }
  .footer-right{ justify-self:start; gap:.9rem; }
  .footer-links, .footer-legal{ gap:.8rem; font-size:.96rem; }
}
/* ——— Footer: final nudge ——— */

/* Keep strapline on one line, quieter */
.footer-left .strap{
  white-space: nowrap;
  font-size: .9rem;
  letter-spacing: .15px;
  opacity: .8;
}

/* Right cluster sits at the far right and stays compact */
.footer-right{
  justify-self: end;                /* hugs the right edge */
  display: flex;
  align-items: center;              /* vertical balance with left side */
  gap: 1.1rem;                      /* space between the two groups */
}

/* Compact link groups */
.site-footer .footer-links,
.site-footer .footer-legal{
  display: flex;
  gap: .8rem;
  font-size: .94rem;
  line-height: 1.15;
  letter-spacing: .2px;
}

/* Dim link color in the footer (beat global styles) */
.site-footer .footer-links a,
.site-footer .footer-legal a{
  /* color: var(--text-dim, #B9BDD1) !important; */
  text-decoration: none;
  opacity: .9;
}
.site-footer .footer-links a:hover,
.site-footer .footer-legal a:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The brand pill shouldn’t look clickable in the footer */
.site-footer .brand{ background: transparent; border: 0; box-shadow: none; padding: 0; }

/* Optional: if you want the whole row vertically centered instead of top-aligned
.foot-grid{ align-items: center; }
*/


footer.site-footer .footer-right a:hover,
footer.site-footer .footer-right a:focus-visible{
  color: var(--text, #F2F3F7);
  text-decoration: underline;
  text-underline-offset: 2px;
}

footer.site-footer .footer-right a:active{
  color: var(--text, #F2F3F7);
}
footer.site-footer nav a:link,
footer.site-footer nav a:visited{ color: var(--text-dim, #B9BDD1); }
/* Footer link color (the winning rule) */
footer.site-footer .footer-right { color: var(--text-dim, #B9BDD1); }

footer.site-footer .footer-right a:link,
footer.site-footer .footer-right a:visited,
footer.site-footer .footer-right a:hover,
footer.site-footer .footer-right a:focus-visible,
footer.site-footer .footer-right a:active {
  color: inherit;
}

footer.site-footer .footer-right a:hover,
footer.site-footer .footer-right a:focus-visible {
  color: var(--text, #F2F3F7);
  text-decoration: underline;
  text-underline-offset: 2px;
}
footer.site-footer .footer-right { color: var(--accent, #7A5BFF); } /* purple */

/* Approach layout */
.approach-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
@media (max-width: 980px){
  .approach-grid{ grid-template-columns: 1fr; }
}

/* Cards: match Services styling */
.approach-card{
  position: relative;
  background: var(--panel,#1A1425);
  border: 1px solid var(--panel-border,#3B2A4E);
  border-radius: 16px;
  padding: 1.2rem 1.2rem 2.4rem; /* extra room for hint */
  transition: transform .22s ease, box-shadow .22s ease,
              background-color .20s ease, border-color .20s ease;
}
.approach-card:hover,
.approach-card:focus-within{
  transform: translateY(-8px) scale(1.035);
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
  background: color-mix(in oklab, var(--panel) 90%, white 6%);
  border-color: color-mix(in oklab, var(--panel-border) 60%, white 20%);
  z-index: 2;
}


/* Make the Sectors header match the card h3 */
.approach-card .sectors-title{
  /* mirror whatever you use for .approach-card h3 */
  font-size: 1.2rem;          /* same as your card h3 */
  font-weight: 700;
  margin: 1.0rem 0 .4rem;     /* small top gap before the list */
}

/* Give the list some air */
.approach-card .sectors{
  margin-top: .2rem;          /* tiny nudge below the title */
}

.approach-card .sectors li{
  margin: .5rem 0;            /* more vertical gap between categories */
  line-height: 1.5;           /* easier to scan multi-line bullets */
}

/* Quiet flex for named clients without logos */
.client{
  font-weight: 650;
  color: #E5E3FF;                 /* a notch brighter than body text */
  text-decoration: underline dotted rgba(229,227,255,.35);
  text-underline-offset: 2px;
  white-space: nowrap;            /* stops awkward wraps */
}
.client:hover{ text-decoration-style: solid; }


/* If your global .list adds tight padding, keep it; we only want extra vertical rhythm here */

/* Approach page: no buffers, no phantom scroll growth */
.approach .svc-card::after,
.approach .svc-card::before{ display:none !important; }

/* === APPROACH: pull the grid up, add a touch more bottom air === */
.page-approach {            /* add this class to the <main> or section wrapper for Approach */
  padding-top: clamp(16px, 3vh, 36px);     /* less dead space above cards */
  padding-bottom: clamp(56px, 7vh, 96px);  /* avoids footer crowding */
}

.page-approach .lead{
  margin: .4rem 0 1rem;     /* tighter under the H1 */
}

.page-approach .approach-grid{
  margin-top: .6rem;        /* pulls the cards up closer to the intro */
}

/* If you don't want a wrapper class, target the page's section instead:
   section.approach { … } or main.approach { … } — same rules as above. */

   /* Nudge the grid up a bit; reduce dead space under the intro */
   .approach .intro { margin-bottom: 1.1rem; }
   .approach .cards { margin-top: .6rem; }  /* whatever your grid wrapper is */

/* === UNIFY THE "Hover for details ↘" HINT (Services + Approach) === */
.hover-hint{                             /* shared look */
  position: absolute;
  right: 14px; bottom: 12px;
  font-size: .86rem;
  color: var(--text-dim, #B9BDD1);
  opacity: .85;
  letter-spacing: .1px;
  pointer-events: none;
}
.hover-hint::after{ content: " ↘"; }     /* consistent arrow everywhere */

@media (hover: none){
  .hover-hint{ display: none; }          /* don’t tease touch users */
}

body.approach main.container{
  padding-top: clamp(12px,2.5vh,28px);
  padding-bottom: 0;
}
body.approach .lead{ margin:.4rem 0 .9rem; }
/* Global: ditch the hard divider */
.site-footer{ border-top: 0; }
/* Approach page: no service-style pseudo bits, ever */
body.approach .svc-card::before,
body.approach .svc-card::after { content:none !important; }
/* Isolate the card’s painting so abs. children never affect page height */
body.approach .approach-card { overflow:hidden; contain: paint; }
/* === Shared “Hover for details ↘” (Services + Approach) === */
@media (hover:hover){
  .hover-hint{
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-size: .86rem;
    letter-spacing: .1px;
    color: var(--text-dim, #B9BDD1);
    opacity: .85;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    animation: hoverNudge 1.8s ease-in-out infinite;
  }
  .hover-hint::after { content: " ↘"; }

  .svc-card:is(:hover,:focus-within) .hover-hint,
  .approach-card:is(:hover,:focus-within) .hover-hint{
    opacity: 0; transform: translateY(4px); animation: none;
  }
}

@keyframes hoverNudge{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(2px); }
}

@media (hover:none){
  .hover-hint{ display: none; }   /* don’t tease touch users */
}
/* room for the hint in Services cards */
.services-grid .svc-card{
  padding-bottom: calc(1rem + 1.35em);  /* adds ~1 line of space at the bottom */
}

/* default placement for approach cards */
.approach-card .hover-hint{
  right: 1rem;
  bottom: 1rem;
}

/* optional: nudge the big ILS card a hair further right
.svc-card.primary .hover-hint{ right: 1.2rem; }*/

/* helper positions (use on the card: hint-br / hint-bl / hint-tr / hint-tl) */
.hint-br .hover-hint{ right: 1rem; bottom: 1rem; left:auto; top:auto; }
.hint-bl .hover-hint{ left: 1rem; bottom: 1rem; right:auto; top:auto; }
.hint-tr .hover-hint{ right: 1rem; top: 1rem; left:auto; bottom:auto; }
.hint-tl .hover-hint{ left: 1rem; top: 1rem; right:auto; bottom:auto; }
/* keep hints visible on non-hovered cards */
.services-grid:has(.svc-card:hover) .svc-card:not(:hover,:focus-within) .hover-hint,
.approach-grid:has(.approach-card:hover) .approach-card:not(:hover,:focus-within) .hover-hint{
  opacity: .85;
  transform: none;
  animation: hoverNudge 1.8s ease-in-out infinite;
}

/* leave this if you still want the hint to fade on the hovered card itself */
.svc-card:is(:hover,:focus-within) .hover-hint,
.approach-card:is(:hover,:focus-within) .hover-hint{
  opacity: 0;
  transform: translateY(4px);
  animation: none;
}
/* --- SERVICES: pin hint to the CARD, give it room, keep other hints visible --- */

/* 1) Make the card the positioning context (beat any earlier rule) */
.services-grid .svc-card{
  position: relative;          /* card = containing block */
  padding-bottom: 2.4rem;      /* room so it never overlaps copy */
}

.services-grid .svc-card > header{
  position: static !important; /* ensure header is NOT the anchor */
}

/* 2) Put the hint bottom-right of the card, consistently */
.services-grid .svc-card .hover-hint{
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  /* inset: auto 1rem 1rem auto;  bottom-right: top/right/bottom/left */
  pointer-events: none;
  z-index: 10;
}


/* (tiny extra nudge for the full-width ILS card) */
.services-grid .svc-card.primary .hover-hint{ right: 1.25rem; }

/* Fallback text if the element is missing */
.services-grid .svc-card:not(:has(.hover-hint))::after{
  content: "Hover for details ↘";
  position: absolute; right: 1rem; bottom: 1rem;
  font-size: .86rem; color: var(--text-dim); opacity: .85;
  pointer-events: none;
}

/* (defensive) bridge pseudos mustn’t steal hover */
.services-grid .svc-card.svc-rams::before,
.services-grid .svc-card.svc-comp::before{
  pointer-events: none;
}

/* (Optional) still fade the hint on the hovered card itself.
   Remove this block if you want it to remain visible too.*/
.services-grid .svc-card:is(:hover,:focus-within) .hover-hint{
  opacity: 0; transform: translateY(4px); animation: none;
}
/* 1) Fallback label content (only if the card has no .hover-hint element) */
.svc-card:not(:has(.hover-hint))::after{
  content: "Hover for details ↘";
  position: absolute;
  right: 1rem; bottom: 1rem;   /* default placement */
  font-size: .86rem;
  color: var(--text-dim, #B9BDD1);
  opacity: .85;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;  /* so we can fade it */
}

/* 2) Scope any per-page tweaks to Services */
.services-grid .svc-card{ position: relative; }                 /* anchor */
.services-grid .svc-card.primary::after{ right: 1.25rem; }      /* tiny nudge for ILS */

/* 3) Fade the fallback label on the hovered card (this is the key bit) */
.services-grid .svc-card:is(:hover,:focus-within)::after{
  opacity: 0;
  transform: translateY(4px);
}


/* Shared card DNA (same as Sectors) */
.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  border-color: var(--accent);
}
.card h3,
.svc-card h3,
.card strong {
  display: flex;
  align-items: center;
  line-height: 1.3;
  letter-spacing: .3px;
  margin: 0 0 .75rem 0;
}
.icon {
  width: 1.2em; height: 1.2em;
  fill: var(--accent);
  margin-right: .4rem;
  flex-shrink: 0;
  transition: fill .2s ease, transform .2s ease;
}
.card:hover .icon { fill: var(--text); transform: scale(1.1); }

/* Approach-specific grids */
.approach-grid { margin-bottom: 1rem; }
.meta-grid .wide { grid-column: span 2; }

/* Make the wide card collapse gracefully on narrow screens */
@media (max-width: 860px){
  .meta-grid .wide { grid-column: span 1; }
}

/* Tidy standards paragraph */
.standards { opacity: .9; line-height: 1.6; }

/* Cross-link */
.next-link {
  margin-top: 2rem;
  font-size: .95rem;
  color: var(--text-dim) !important;
  text-align: center;
}
.next-link a {
  color: var(--accent) !important;
  text-decoration: none !important; }
.next-link a:hover { text-decoration: underline !important; }

/* Bottom row spans so edges align with the top cards */
.card-deliverables{ grid-column: 1 / span 2; }
.card-standards   { grid-column: 3; }

/* Keep cards lifting on hover like Sectors */
.approach-grid .card{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.approach-grid .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  border-color: var(--accent);
}

/* Optional: split the long list on big screens so the card isn’t a skyscraper */
@media (min-width: 1180px){
  .card-deliverables ul{ columns: 2; column-gap: 2rem; }
  .card-deliverables li{ break-inside: avoid;
  margin: .35rem 0} /* tiny vertical space between bullets */
}

/* Mobile: stack everything nicely */
@media (max-width: 1100px){
  .approach-grid{ grid-template-columns: 1fr; }
  .card-deliverables, .card-standards{ grid-column: auto; }
}
/* Whole Approach block uses one grid with named areas */
.approach-grid{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  align-items: start;
  grid-template-areas:
    "dev int ops"
    "del del std";
}

/* Map cards to areas (guarantees alignment) */
.card-dev        { grid-area: dev; }
.card-int        { grid-area: int; }
.card-ops        { grid-area: ops; }
.card-deliverables{ grid-area: del; }
.card-standards  {
  grid-area: std;
align-self: start;
}

/* Make each card fill its cell’s height */
.approach-grid .card{
  display:flex;
  flex-direction:column; }

/* Optional: split long list when there’s room */
@media (min-width: 1180px){
  .card-deliverables ul{ columns:2; column-gap:2rem; }
  .card-deliverables li{ break-inside: avoid;
    margin: .35rem 0} /* tiny vertical space between bullets */
  }

/* Mobile: single column flow */
@media (max-width: 1100px){
  .approach-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "dev"
      "int"
      "ops"
      "del"
      "std";
  }
}
.card-deliverables h3{
  justify-content: center;   /* centers icon + text */
  text-align: center;        /* belt + braces */
}

/* Contact page: always stacked (one column) */
  .cards.contact-grid{
    display:grid;
    grid-template-columns:1fr !important; /* force single column */
    gap:1.1rem;
  }

  /* Prevent long content (like the email) from stretching the grid */
  .cards.contact-grid > .card{ min-width: 0; }

  /* Email line wraps on tiny screens */
  .cards.contact-grid a{
    overflow-wrap:anywhere;     /* modern */
    word-break:break-word;      /* fallback */
  }


/* BACKDROP IDEA (disabled)
html::before{
  content:"";
  position: fixed;
  inset: -8% -8%;        [overscan so edges don't show]
  z-index: 0;            [above page color, below content]
  pointer-events: none;
  opacity: .24;
  background:
    radial-gradient(60vmax 40vmax at 15% 15%, rgba(122,91,255,.22) 0%, transparent 60%),
    radial-gradient(50vmax 30vmax at 85% 85%, rgba(89,202,255,.18) 0%, transparent 65%),
    radial-gradient(45vmax 28vmax at 10% 85%, rgba(255,122,217,.14) 0%, transparent 70%);
  transform: translateZ(0);
  will-change: transform;
  animation: bgFloat 28s ease-in-out infinite alternate;
}

@keyframes bgFloat{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(0,-1.5%,0) scale(1.02); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

[Keep content above it]
header, main, footer { position: relative; z-index: 1; }

[Respect motion settings]
@media (prefers-reduced-motion: reduce){
  html::before{ animation: none !important; }
}
*/