/* ============================================================
   IONCORES — Cloud Executive foundation
   Light-dominant, navy headlines, green action accent.
   Tokens taken verbatim from the UX/Color recommendation brief.
   Adapted from the 10-directions base into a responsive site.
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

/* ---------- Brief palette + tokens ---------- */
:root{
  --navy:        #11263C;
  --navy-2:      #1B3A5B;
  --midnight:    #0B1220;
  --midnight-2:  #111B2E;
  --cloud:       #F8FAFC;
  --slate-soft:  #EEF3F8;
  --white:       #FFFFFF;
  --green:       #89C64F;
  --green-2:     #7AB843;
  --green-ink:   #46731C;
  --green-soft:  #E9F4D8;
  --blue:        #2563EB;
  --blue-ink:    #1D4ED8;
  --blue-soft:   #E5EDFD;
  --slate:       #475569;
  --slate-2:     #5C6B80;   /* WCAG-AA muted text (was #64748B; failed 4.5:1 on tinted sections) */
  --border:      #CBD5E1;
  --border-2:    #E2E8F0;

  /* on-dark */
  --on-deep:     #EAF1F8;
  --on-deep-mut: #9DB0C6;
  --on-deep-line:rgba(255,255,255,.10);

  /* ---- Tweakable ACTION accent (defaults to the brief's action green) ---- */
  --act:      #89C64F;   /* button / accent fill */
  --act-2:    #7AB843;   /* hover */
  --act-ink:  #46731C;   /* accent TEXT on light (AA) */
  --act-soft: #E9F4D8;   /* tinted surface */
  --act-fg:   #11263C;   /* text ON the accent fill */
  --act-glow: rgba(137,198,79,.16);

  /* type */
  --f-display:"Space Grotesk","Hanken Grotesk",system-ui,sans-serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* radius (tweakable via --rk multiplier) */
  --rk:1;
  --r-sm:calc(8px * var(--rk));
  --r-md:calc(12px * var(--rk));
  --r-lg:calc(18px * var(--rk));
  --r-xl:calc(26px * var(--rk));

  --sh-1:0 1px 2px rgba(17,38,60,.06), 0 1px 1px rgba(17,38,60,.04);
  --sh-2:0 8px 24px -10px rgba(17,38,60,.16), 0 3px 8px -4px rgba(17,38,60,.10);
  --sh-3:0 30px 70px -32px rgba(11,18,32,.40), 0 10px 28px -18px rgba(11,18,32,.24);

  --maxw:1180px;
  --gutter:40px;
  --sec-pad:88px;   /* tweakable via density */
}

/* ---------- Base ---------- */
body{
  font-family:var(--f-body);
  color:var(--slate);
  background:var(--cloud);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Type ---------- */
h1,h2,h3,h4,h5{ font-family:var(--f-display); font-weight:600; color:var(--navy); margin:0; letter-spacing:-.025em; line-height:1.06; }
h1{ font-size:clamp(38px,5.2vw,60px); letter-spacing:-.035em; line-height:1.02; }
h2{ font-size:clamp(28px,3.4vw,40px); }
h3{ font-size:23px; letter-spacing:-.02em; }
h4{ font-size:17px; letter-spacing:-.01em; }
h5{ font-size:14px; }
p{ margin:0; }
.balance{ text-wrap:balance; }
.pretty{ text-wrap:pretty; }
.lead{ font-size:clamp(17px,1.6vw,21px); line-height:1.5; color:var(--slate); }
.lede{ font-size:16.5px; line-height:1.6; color:var(--slate); max-width:60ch; margin-top:14px; }
.muted{ color:var(--slate-2); }
.mono{ font-family:var(--f-mono); }
.green-word{ color:var(--act-ink); }
.g{ color:var(--act-ink); }

.kicker{ font-family:var(--f-mono); font-weight:500; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--slate-2); }
.tagline{ font-family:var(--f-mono); font-weight:500; font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--act-ink); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:var(--sec-pad) 0; }
.section.tight{ padding:calc(var(--sec-pad) * .42) 0; }
.section.alt{ background:var(--slate-soft); }
/* Keep anchored sections clear of the sticky nav when jumped to. */
[id]{ scroll-margin-top:82px; }
.eyebrow{ display:flex; align-items:center; gap:14px; }
.eyebrow .kicker{ white-space:nowrap; }
.eyebrow .ln{ flex:1; height:1px; background:var(--border-2); }

/* ---------- Brand mark ---------- */
.brandimg{ height:28px; width:auto; display:block; }
.nav .brandimg{ height:26px; }
.foot .brandimg{ height:25px; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--f-display); font-weight:600; font-size:15.5px; letter-spacing:-.01em; padding:14px 24px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; transition:transform .12s, background .2s, box-shadow .2s, border-color .2s, color .2s; white-space:nowrap; }
.btn .ar{ transition:transform .15s; }
.btn:hover .ar{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px); }
.btn-act{ background:var(--act); color:var(--act-fg); }
.btn-act:hover{ background:var(--act-2); box-shadow:var(--sh-2); }
.btn-navy{ background:var(--navy); color:var(--white); }
.btn-navy:hover{ background:var(--navy-2); }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--navy); }
.btn-ghost:hover{ border-color:var(--navy); }
.btn-on-deep{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:var(--white); }
.btn-on-deep:hover{ border-color:var(--act); color:var(--act); }
.btn-lg{ padding:16px 28px; font-size:16.5px; }

/* Arrow-in-circle — reusable badge for GREEN (btn-act) CTAs only.
   Light-green circle (--act-soft) with a navy arrow inside; sits right
   of the label, vertically centred, keeps the button's existing height. */
.ar-c{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--act-soft); color:var(--navy); flex:none; }
.ar-c svg{ width:13px; height:13px; display:block; }

/* ---------- Chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12px; letter-spacing:.02em; color:var(--slate); padding:7px 13px; border-radius:999px; border:1px solid var(--border); background:var(--white); }
.chip svg{ width:15px; height:15px; color:var(--act-ink); flex:none; }

/* ---------- Cards ---------- */
.card{ background:var(--white); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:28px; }

/* ---------- NAV (sticky) ---------- */
.nav{ position:sticky; top:0; z-index:60; background:rgba(248,250,252,.82); backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s, background .2s; }
.nav.scrolled{ border-bottom-color:var(--border-2); box-shadow:0 1px 0 rgba(17,38,60,.03); }
.nav .row{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav .links{ display:flex; align-items:center; gap:30px; }
.nav .links a.lk{ font-size:15px; font-weight:500; color:var(--navy); opacity:.82; transition:opacity .15s, color .15s; }
.nav .links a.lk:hover,.nav .links a.lk.active{ opacity:1; color:var(--act-ink); }
.nav .cta-wrap{ display:flex; align-items:center; gap:16px; }
.nav .contact-lk{ font-size:15px; font-weight:600; color:var(--navy); }
.nav .contact-lk:hover{ color:var(--act-ink); }
.menu-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--border); border-radius:10px; background:var(--white); color:var(--navy); cursor:pointer; }

/* ---------- Footer (dark) ---------- */
.foot{ background:var(--navy); color:var(--on-deep); }
.foot .wrap{ padding-top:60px; padding-bottom:40px; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; align-items:start; }
.foot .lede{ color:var(--on-deep-mut); font-size:14px; margin-top:14px; max-width:34ch; line-height:1.6; }
.foot a.fl{ display:block; color:var(--on-deep-mut); font-size:14px; line-height:2; transition:color .15s; }
.foot a.fl:hover{ color:var(--act); }
.foot h5{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-deep-mut); margin:0 0 8px; }
.foot .trust-mini{ display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; }
.foot .trust-mini .tb{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11.5px; color:var(--on-deep-mut); }
.foot .trust-mini .tb svg{ width:14px; height:14px; color:var(--act); }
.foot-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid var(--on-deep-line); font-family:var(--f-mono); font-size:12px; color:var(--on-deep-mut); }

/* ---------- Selected work & live demos ---------- */
.worksec{ background:var(--slate-soft); }
.worksec .whead{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.worksec .whead h2{ max-width:20ch; }
.worksec .wsub{ font-size:15.5px; color:var(--slate); max-width:40ch; line-height:1.55; }
.wkgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px; }
.wkcard{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--border-2); border-radius:var(--r-lg); overflow:hidden; color:inherit; transition:box-shadow .2s, transform .2s; }
.wkcard:hover{ box-shadow:var(--sh-2); transform:translateY(-3px); }
.wkbar{ display:flex; align-items:center; gap:6px; padding:10px 13px; border-bottom:1px solid var(--border-2); }
.wkbar .d{ width:8px; height:8px; border-radius:50%; }
.wkbar .u{ margin-left:8px; font-family:var(--f-mono); font-size:10.5px; color:var(--slate-2); background:var(--cloud); border:1px solid var(--border-2); border-radius:5px; padding:3px 10px; }
.wkshot{ height:186px; overflow:hidden; background:var(--cloud); border-bottom:1px solid var(--border-2); }
.wkshot img{ width:100%; height:100%; object-fit:cover; object-position:top left; }
.wkbody{ display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; }
.wktop{ display:flex; align-items:center; justify-content:space-between; }
.wktag{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--act-ink); }
.wklive{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-2); }
.wklive::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--act); box-shadow:0 0 0 3px var(--act-soft); }
/* Coming-soon state: muted grey badge instead of the live green dot. */
.wklive.soon{ color:var(--slate-2); }
.wklive.soon::before{ background:var(--slate-2); box-shadow:0 0 0 3px var(--slate-soft); }
.wkcard h3{ font-size:18px; margin-top:10px; letter-spacing:-.01em; }
.wkcard p{ font-size:13.8px; color:var(--slate); margin-top:7px; line-height:1.5; flex:1; }
.wklink{ display:inline-flex; align-items:center; gap:7px; margin-top:15px; font-family:var(--f-display); font-weight:600; font-size:13.5px; color:var(--blue); }
.wklink .ar{ transition:transform .15s; }
.wkcard:hover .wklink .ar{ transform:translateX(3px); }

/* ---------- Reveal on scroll ----------
   Transform-only so content is ALWAYS visible (opacity is never 0): works with
   JS off, in print, and in throttled/frozen capture contexts where the CSS
   timeline doesn't tick. The subtle rise only plays on a live browser. */
.js .reveal{ transform:translateY(14px); transition:transform .55s cubic-bezier(.22,.61,.36,1); }
.js .reveal.in{ transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal,.js .reveal.in{ transform:none; transition:none; } }
@media print{ .js .reveal{ transform:none !important; } }