/* iNova Integrated Solution — shared styles
   Brand: blue #045D87, teal #6BAFA4, ink #0B2230, mist #EEF5F4
   Fonts: Sora (headings), IBM Plex Sans (body), IBM Plex Mono (labels) */

/* Theme tokens. Pages use these in their inline styles; dark surfaces (footer,
   dark cards, dark heroes, blue bands) keep fixed colours and only use --deep*.
   The theme is chosen by an inline script in each page's <head> and the header toggle
   (data-theme on <html>); without JS it follows the system setting. */
:root {
  color-scheme: light;
  --page: #FFFFFF;      /* page and section backgrounds */
  --card: #FFFFFF;      /* cards, inputs, buttons on light surfaces */
  --soft: #F7FBFA;      /* faint tinted panels */
  --mist: #EEF5F4;      /* alternate section bands */
  --chip: #EEF5F4;      /* tinted pills, icon discs, callout panels */
  --ink: #0B2230;       /* headings */
  --ink-2: #1B3340;     /* strong body text, nav */
  --text: #3D5561;      /* body text */
  --muted: #5E7782;
  --teal-ink: #2D7268;  /* mono labels, eyebrows */
  --blue-ink: #045D87;  /* links and icons drawn in brand blue */
  --line: #D5E1E3;
  --line-2: #C3D3D7;
  --line-3: #A9BCC2;
  --line-soft: #EEF5F4;
  --deep: #0B2230;      /* dark cards and footer */
  --deep-2: #10303F;
  --deep-line: #1E4456;
  --logo-tile: #FFFFFF; /* logos are drawn for a light background */
  --wa-hover: #E3F1EE;
  --hero-rgb: 238,245,244;
  --shadow: rgba(11,34,48,.08);
  --shadow-2: rgba(11,34,48,.10);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0B1A22;
  --card: #112630;
  --soft: #0E2029;
  --mist: #08151C;
  --chip: #15303C;
  --ink: #E8F0F2;
  --ink-2: #CFDCE0;
  --text: #A9BDC4;
  --muted: #88A0A9;
  --teal-ink: #7FCABD;
  --blue-ink: #6DB9DE;
  --line: #203A47;
  --line-2: #2B4755;
  --line-3: #3D5A68;
  --line-soft: #183140;
  --deep: #0F2B3A;
  --deep-2: #15384A;
  --deep-line: #24506A;
  --logo-tile: #E4ECEE;
  --wa-hover: #1A3A45;
  --hero-rgb: 8,21,28;
  --shadow: rgba(0,0,0,.30);
  --shadow-2: rgba(0,0,0,.40);
}
/* No JS: follow the system. Keep in sync with the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --page: #0B1A22; --card: #112630; --soft: #0E2029; --mist: #08151C; --chip: #15303C;
    --ink: #E8F0F2; --ink-2: #CFDCE0; --text: #A9BDC4; --muted: #88A0A9;
    --teal-ink: #7FCABD; --blue-ink: #6DB9DE;
    --line: #203A47; --line-2: #2B4755; --line-3: #3D5A68; --line-soft: #183140;
    --deep: #0F2B3A; --deep-2: #15384A; --deep-line: #24506A;
    --logo-tile: #E4ECEE; --wa-hover: #1A3A45; --hero-rgb: 8,21,28;
    --shadow: rgba(0,0,0,.30); --shadow-2: rgba(0,0,0,.40);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--page); }
body { margin: 0; background: var(--page); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
section[id] { scroll-margin-top: 24px; }
input,select,textarea{background-color:var(--card);color:var(--ink)}
::placeholder{color:var(--muted);opacity:1}
/* Brief cross-fade while the theme switches (class added by site.js) */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease, stroke .3s ease !important;
}

/* Theme toggle (header) */
.hdr-actions{display:flex;align-items:center;gap:8px}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:#6BAFA4;color:var(--blue-ink)}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
/* The wordmark's blue lettering needs a light backing on dark headers */
header img[src*="inova-wordmark"]{border-radius:10px;transition:background-color .3s,padding .3s}
:root[data-theme="dark"] header img[src*="inova-wordmark"]{background:var(--logo-tile);padding:4px 8px}

/* Links, buttons and hover states */
a{color:var(--blue-ink)}a:hover{color:#034664}
:root[data-theme="dark"] a:hover{color:#9AD0EA}
.nl{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:15px;padding:12px 2px}
.nl:hover{color:var(--blue-ink)}
.bp:hover{background:#034664 !important;color:#FFFFFF !important}
.bg:hover{border-color:#6BAFA4 !important;color:#FFFFFF !important}
.fl{color:#C9D8DC;text-decoration:none}
.fl:hover{color:#FFFFFF}
.cardlink:hover{border-color:#6BAFA4 !important}
.bo:hover{border-color:var(--blue-ink) !important}
.jl:hover{background:var(--card) !important;border-color:var(--blue-ink) !important}
.jd:hover{border-color:#6BAFA4 !important}
.ac:hover{border-color:#6BAFA4 !important}
.dl:hover{background:var(--chip) !important}
.wa:hover{background:var(--wa-hover) !important}
/* Contact details (email, phone, WhatsApp, map) */
.cl{color:inherit;text-decoration:none;border-bottom:1px solid #3F84A5;transition:border-color .2s}
.cl:hover{color:#FFFFFF;border-bottom-color:#BFE3DC}
dd a:hover{text-decoration:underline !important}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue-ink);outline-offset:1px}

/* Page heroes with a photo: the image is set inline on the section,
   a brand-colour gradient keeps the text side solid and lets the photo show on the right */
.hero-photo{position:relative;isolation:isolate;background-size:cover;background-position:center right;background-repeat:no-repeat}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-dark::before{background:linear-gradient(90deg,rgba(11,34,48,.97) 0%,rgba(11,34,48,.93) 38%,rgba(11,34,48,.70) 68%,rgba(11,34,48,.45) 100%)}
.hero-light::before{background:linear-gradient(90deg,rgba(var(--hero-rgb),.98) 0%,rgba(var(--hero-rgb),.95) 42%,rgba(var(--hero-rgb),.72) 70%,rgba(var(--hero-rgb),.40) 100%)}
/* Text on both sides (About): keep the photo as a soft texture */
.hero-light.hero-soft::before{background:linear-gradient(90deg,rgba(var(--hero-rgb),.97) 0%,rgba(var(--hero-rgb),.90) 55%,rgba(var(--hero-rgb),.84) 100%)}
@media (max-width: 760px) {
  .hero-dark::before{background:rgba(11,34,48,.88)}
  .hero-light::before{background:rgba(var(--hero-rgb),.92)}
}

/* Mobile navigation */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer;
}
@media (min-width: 861px) {
  /* menu packs to the right, next to the theme button */
  .site-nav { margin-left: auto; }
  .hdr-actions { margin-left: -16px; }
}
/* Tablet widths: tighter links so the theme button stays on the same row */
@media (min-width: 861px) and (max-width: 1024px) {
  header > div { column-gap: 20px !important; }
  .site-nav { column-gap: 14px !important; }
  .site-nav .nl { font-size: 14px; }
  .site-nav .bp { padding: 0 18px !important; }
  .hdr-actions { margin-left: -12px; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  /* logo, then theme + menu buttons, then the (collapsed) nav on its own row */
  .site-nav {
    order: 3;
    display: none !important; width: 100%;
    flex-direction: column; align-items: stretch !important; gap: 0 !important;
    padding: 8px 0 12px; border-top: 1px solid var(--line);
  }
  .site-nav.open { display: flex !important; }
  .site-nav .nl { padding: 14px 4px; border-bottom: 1px solid var(--line-soft); }
  .site-nav .bp { justify-content: center; margin-top: 12px; }
}

/* Home hero: live product cards */
@keyframes hx-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hx-pulse{0%{box-shadow:0 0 0 0 rgba(107,175,164,.55)}70%,100%{box-shadow:0 0 0 7px rgba(107,175,164,0)}}
@keyframes hx-route{from{stroke-dashoffset:14}to{stroke-dashoffset:-100}}
@keyframes hx-spark{0%{stroke-dashoffset:100;opacity:1}55%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.hx-card{animation:hx-in .6s ease-out both}
.hx-pulse{animation:hx-pulse 2s ease-out infinite}
.hx-route{stroke-dasharray:14 100;stroke-dashoffset:-50;animation:hx-route 3.2s linear infinite}
.hx-spark{stroke-dasharray:100;stroke-dashoffset:0;animation:hx-spark 4.8s ease-in-out infinite}
.hx-tick{transition:opacity .25s,transform .25s}
.hx-tick.out{opacity:0;transform:translateY(4px)}
.hx-live [data-step]{transition:background-color .3s}
.hx-track{transition:transform .7s cubic-bezier(.4,0,.2,1)}
.hx-dot{display:inline-flex;align-items:center;justify-content:flex-start;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.hx-dot span{display:block;width:8px;height:8px;border-radius:999px;background:#3E5A68;transition:width .3s,background-color .3s}
.hx-dot:hover span{background:#6BAFA4}
.hx-dot[aria-current="true"] span{width:24px;background:#6BAFA4}
.hx-pause{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:999px;border:1px solid #1E4456;background:none;color:#A9C0C7;cursor:pointer}
.hx-pause:hover{border-color:#6BAFA4;color:#FFFFFF}

/* Trusted brands: logo grid, 5 per row on desktop */
.brands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.brand{display:flex;align-items:center;justify-content:center;height:120px;padding:20px 24px;border:1px solid var(--line);border-radius:16px;background:var(--logo-tile);transition:border-color .2s,box-shadow .2s}
.brand img{display:block;max-width:100%;max-height:72px;width:auto;height:auto;object-fit:contain;transition:transform .2s}
.brand:hover{border-color:#6BAFA4;box-shadow:0 8px 24px var(--shadow)}
.brand:hover img{transform:scale(1.06)}
/* Reveal: site.js adds .brands-anim (so logos stay visible without JS), then .in when
   the grid scrolls into view; tiles rise in reading order, staggered by --i */
@keyframes brand-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.brands-anim .brand{opacity:0}
.brands-anim.in .brand{animation:brand-in .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@media (max-width: 900px) { .brands{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width: 480px) { .brands{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .brand{height:88px;padding:14px 16px} }

/* Contact form: fields in pairs, stacked on phones */
.form-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width: 600px) { .form-2col{grid-template-columns:1fr} }

/* Article pages (article-*.html): reading layout, prose, sidebar */
.read-progress{position:fixed;top:0;left:0;right:0;z-index:100;height:3px;pointer-events:none}
.read-progress span{display:block;height:100%;width:100%;background:#6BAFA4;transform:scaleX(0);transform-origin:left}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.crumbs a{color:var(--text);text-decoration:none}
.crumbs a:hover{color:var(--blue-ink);text-decoration:underline}
.crumbs span{color:var(--line-3)}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 0;font-size:14px;color:var(--muted)}
.art-meta span:first-child{font-weight:600;color:var(--ink-2)}
.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:start}
.art-aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:20px}
.art-label{margin:0 0 10px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.art-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.art-toc a{display:block;margin-left:-2px;padding:7px 0 7px 16px;border-left:2px solid transparent;font-size:15px;line-height:1.4;color:var(--text);text-decoration:none}
.art-toc a:hover{color:var(--blue-ink)}
.art-toc a[aria-current="true"]{border-left-color:#6BAFA4;color:var(--ink);font-weight:500}
.art-share > div{display:flex;flex-wrap:wrap;gap:8px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:border-color .2s,color .2s}
.share-btn:hover{border-color:#6BAFA4;color:var(--blue-ink)}
.prose{max-width:720px;font-size:18px;line-height:1.75}
.prose > *{margin:0 0 22px}
.prose > :first-child{font-size:20px;line-height:1.7;color:var(--ink-2)}
.prose h2{margin:44px 0 14px;font-family:Sora,sans-serif;font-weight:600;font-size:clamp(21px,2.4vw,25px);line-height:1.25;letter-spacing:-.015em;color:var(--ink);scroll-margin-top:24px}
.prose strong{color:var(--ink-2);font-weight:600}
.prose a{text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:24px}
.prose li{margin:0 0 10px;padding-left:4px}
.prose li::marker{color:var(--teal-ink);font-weight:600}
.prose blockquote{margin:32px 0;padding:6px 0 6px 24px;border-left:3px solid #6BAFA4;font-family:Sora,sans-serif;font-size:21px;line-height:1.5;color:var(--ink)}
.prose blockquote p{margin:0}
.prose .callout{padding:20px 24px;border-radius:16px;background:var(--chip);border:1px solid var(--line)}
.prose .callout p{margin:0;font-size:16px;line-height:1.65}
.prose .callout .callout-title{margin:0 0 6px;font-family:Sora,sans-serif;font-weight:600;font-size:17px;color:var(--ink)}
.art-back{margin-top:40px !important;padding-top:28px;border-top:1px solid var(--line)}
.art-back a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-size:15px;font-weight:600}
@media (max-width: 960px) {
  .art-layout{grid-template-columns:minmax(0,1fr);gap:48px}
  .art-aside{position:static}
  .art-toc{display:none}
}
@media (max-width: 600px) {
  .prose{font-size:17px}
  .prose > :first-child{font-size:18px}
}

/* Projects: completed-work cards (projects.html) */
.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:24px}
.pj{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);transition:border-color .2s,box-shadow .2s,transform .2s}
.pj:hover{border-color:#6BAFA4;box-shadow:0 14px 32px var(--shadow-2);transform:translateY(-3px)}
.pj-cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--chip);border-bottom:1px solid var(--line)}
.pj-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pj:hover .pj-cover img{transform:scale(1.04)}
.pj-badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(11,34,48,.88);color:#FFFFFF;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pj-badge svg{color:#6BAFA4}
.pj-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:24px 26px 26px}
.pj-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.pj-tag{padding:4px 10px;border-radius:999px;background:var(--chip)}
.pj h3{margin:0;font-family:Sora,sans-serif;font-weight:600;font-size:21px;line-height:1.3;color:var(--ink)}
.pj p{margin:0;font-size:15px}
.pj-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pj-chips li{font-size:13px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2)}
.pj-facts{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pj-facts dt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pj-facts dd{margin:2px 0 0;font-size:15px;font-weight:500;color:var(--ink)}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pj,.pj-cover img{transition:none}
  .pj:hover,.pj:hover .pj-cover img{transform:none}
  .hx-card,.hx-pulse,.hx-route,.hx-spark{animation:none}
  .hx-tick,.hx-live [data-step],.hx-track,.brand,.brand img{transition:none}
}