/* ============================================================
   aib.digital brand layer: logo 5d "Source" in Midnight & Blue.
   Loaded last by every page, the new ones and the older Tilly POS / founder pages,
   so the logo, header, labels and buttons look the same everywhere.

   Brand blue #2563eb is for fills (white text on it reads well). Text in blue uses
   --blue-text: #1d4ed8 on light backgrounds, #60a5fa on navy ones.
   ============================================================ */
:root{
  --display:"Space Grotesk","DM Sans",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --navy:#0a1020; --blue:#2563eb; --blue-hover:#1d4ed8; --blue-text:#1d4ed8; --blue-light:#60a5fa;
}
:root[data-theme="dark"]{ --blue-text:#60a5fa }

/* ---------- logo: code tile + aib.digital (header and footer are navy) ---------- */
.mark{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; flex:none}
.mark svg.logo-tile{display:block; flex:none; width:38px; height:38px; border:0; border-radius:0; background:none; box-shadow:none}
.mark .lk{display:flex; flex-direction:column; gap:6px; white-space:nowrap}
.mark .wm{font-family:"Space Mono",ui-monospace,monospace; font-size:21px; font-weight:400; line-height:1; letter-spacing:-.02em; color:#fff}
.mark .wm b{font:inherit; font-weight:700; letter-spacing:inherit; color:inherit}
.mark .wm i{display:inline !important; font:inherit; font-weight:700; font-style:normal; letter-spacing:0; text-transform:none; color:var(--blue-light)}
.mark small{font-family:"Space Mono",ui-monospace,monospace; font-size:10.5px; line-height:1; letter-spacing:0; color:#94a3b8}
@media(max-width:520px){ .mark small{display:none} .mark svg.logo-tile{width:34px; height:34px} .mark .wm{font-size:19px} }

/* ---------- header: one navy bar in both themes ---------- */
header{background:var(--navy) !important; border-bottom:1px solid rgba(255,255,255,.08) !important}
header.scrolled{box-shadow:0 12px 30px -18px rgba(2,6,23,.8)}
header nav a{color:#94a3b8}
header nav a:hover{color:#fff; background:rgba(255,255,255,.07)}
header nav a.on{color:#fff}
header nav a.on::after{background:var(--blue-light)}
header nav a[data-cta]{background:var(--blue); color:#fff}
header nav a[data-cta]:hover{background:var(--blue-hover); color:#fff}
header .tgl{color:#94a3b8; border-color:rgba(255,255,255,.18)}
header .tgl:hover{color:#fff; border-color:rgba(255,255,255,.4)}
header .menu-btn{color:#fff; border-color:rgba(255,255,255,.22)}
.depth i{background:linear-gradient(90deg,var(--blue),var(--blue-light))}
@media(max-width:980px){
  header nav{background:var(--navy)}
  header nav a{color:#e2e8f0; border-bottom-color:rgba(255,255,255,.1)}
  header nav a:hover{color:var(--blue-light); background:transparent}
}

/* ---------- section labels read like code comments ---------- */
.eyebrow{font-family:var(--mono); font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--blue-text); gap:8px}
.eyebrow::before{content:"//"; width:auto; height:auto; background:none; opacity:.55}
.ink .eyebrow, .band-dark .eyebrow, main > section.band-dark .eyebrow{color:var(--blue-light)}

/* ---------- buttons: brand blue with white text ---------- */
.btn-p, .ink .btn-p, :root[data-theme="dark"] .btn-p, .cband .btn-p{background:var(--blue); color:#fff; box-shadow:none}
.btn-p:hover, .ink .btn-p:hover, .cband .btn-p:hover{background:var(--blue-hover); color:#fff; box-shadow:none}
/* the older Tilly POS pages call their main button .btn-primary */
.btn-primary{background:var(--blue) !important; color:#fff !important; border-color:var(--blue) !important}
.btn-primary:hover{background:var(--blue-hover) !important}

/* headings: one colour, no highlighted half */
h1 em, h2 em, h3 em{font-style:normal; color:inherit}

/* banner glows */
.glow.g1{opacity:.4}
.glow.g2{background:radial-gradient(circle,#3b82f6 0%,rgba(59,130,246,0) 70%); opacity:.14}

/* anything that sits on a blue fill gets white text; the old gradients start too light for it */
.seg span:nth-child(1){background:var(--blue); color:#fff; font-weight:700}
.seg span:nth-child(3){background:rgba(59,130,246,.14)}
.tracks button[aria-selected="true"]{background:var(--blue); color:#fff; box-shadow:0 8px 22px -10px rgba(37,99,235,.7)}
.tabs-art .fav.o{background:var(--blue); color:#fff}
::selection{background:var(--blue); color:#fff}

/* call-to-action box: a plain navy panel */
.cband{background:var(--navy); border:1px solid rgba(255,255,255,.08)}
.cband h2 em{color:inherit; -webkit-text-fill-color:currentColor}

/* intro text on the dark bands */
main > section.band-dark .intro, main > section.band-dark p{color:#cbd5e1}

/* ---------- header: same CTA and round menu button on the new and the older pages ---------- */
header .menu-btn{border-radius:999px}
header nav a[data-cta]{display:inline-flex; align-items:center; gap:8px; margin-left:12px; padding:10px 16px; border-radius:10px; font-weight:500; white-space:nowrap}
header nav a[data-cta]::after{display:none}

/* ---------- floating WhatsApp: every page, icon-only on a phone ---------- */
.wa-fab{position:fixed; right:18px; bottom:18px; z-index:80; display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px 12px 14px; border-radius:999px; background:#25d366; color:#052e16; font-weight:600; font-size:15px; line-height:1;
  text-decoration:none; box-shadow:0 14px 34px -12px rgba(2,6,23,.55); transition:transform .2s ease, box-shadow .2s ease}
.wa-fab:hover{transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(2,6,23,.6); color:#052e16}
.wa-fab svg{flex:none}
body.menu-open .wa-fab{display:none}
@media(max-width:620px){ .wa-fab{right:14px; bottom:14px; padding:14px} .wa-fab span{display:none} }

/* ---------- the first screen never waits for the scroll reveal ---------- */
html.js main > section:first-child .rv{opacity:1; transform:none; transition:none}

/* ---------- comfortable tap targets in the footer on a phone ---------- */
@media(max-width:620px){ footer ul a{display:inline-block; padding:7px 0} .ft-links a{display:inline-block; padding:8px 4px} }

/* ---------- quieter craft: squared buttons, sentence-case labels, small motion ---------- */
.btn{border-radius:10px; font-weight:500}
.btn-lg{padding:16px 20px}
.btn:hover svg{transform:none}
.ft h4{font-size:12px; letter-spacing:0; text-transform:none}
html.js .rv{transform:translateY(8px); transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1)}

/* ---------- the same on every inner page: one-colour headlines, no glow fields,
   nothing pulsing, labels in sentence case ---------- */
.ink h1 em, .ink h2 em, .ink h3 em, .band-dark h2 em{background:none; color:inherit; -webkit-text-fill-color:currentColor; padding-right:0}
.field, .glow, .grain{display:none}
.svc article::after, .plans article.best::before, .team article.lead::before, .team .av::after, .tz::before{display:none}
.tagpill{font-size:12px; letter-spacing:0; text-transform:none}
.tagpill .pulse{animation:none; box-shadow:none}
.tracks button[aria-selected="true"]{box-shadow:none}
.crumbs, .crumbs a, .banner .by, .tracks button, .paycard .lbl, .plans .flag, .lic .flag, .svc-nav a, .line .deliv b, .fc .lbl, .tz h4,
.facts-list b, .case .tag, .work .tag, .team .role, .svc .n, .track em, .steps strong small, .compare h4, .wall .sx, .cband li small,
.plats span, .pipe li, .feed li b, .marq span, .org-node small, .pc-foot small, .tabs-art .st, .pillar .n, main .track, h3 .tag{letter-spacing:0; text-transform:none}