/* ============================================================
   SOURCE DIGITAL — site.css
   Shared refined-dark design layer · July 2026 redesign
   Loaded AFTER each page's inline <style>, so it wins the
   cascade. Readability overrides are scoped to html.sd-dark
   (the 91 core-token pages); accessibility rules are global.
   ============================================================ */

/* Accessible blue accent for TEXT on dark surfaces.
   #7290ff = 6.9:1 on --black #050508 (WCAG AA/near-AAA).
   The deep brand blues (--blue #061bb0, --blue-mid #0d34f5)
   remain for fills, buttons, borders and glows only. */
:root{
  --blue-text:#7290ff;
  --blue-text-hover:#9db2ff;
}

/* ── 1. Readability tokens ──────────────────────────────── */
/* Paragraph/body colour: near-white instead of grey.
   (#e8ebf7 ≈ 17:1 on --black; headings stay pure #fff so
   hierarchy survives via brightness + size, not murk.) */
html.sd-dark{
  --muted:#e8ebf7;
}

/* Body copy: bigger + more air. rem-based heading clamps are
   root-relative so they are unaffected by this bump. */
html.sd-dark body{
  font-size:18px;
  color:#f4f6ff;
}
html.sd-dark p{ font-size:17px; line-height:1.7; }
html.sd-dark li{ line-height:1.65; }

/* Long-form article copy reads at full size. */
html.sd-dark .blog-content p{ font-size:18px; line-height:1.75; }
html.sd-dark .blog-content li{ font-size:17.5px; }

/* ── 1b. H1 scale: smaller site-wide (Sept 2026) ────────── */
/* Caps ranged 64-96px; one uniform clamp brings every H1
   down. !important is deliberate: several templates size
   their H1 via inline style attributes. */
html.sd-dark h1{
  font-size:clamp(30px, 4.5vw, 56px) !important;
  line-height:1.05 !important;
}

/* ── 1c. Glass nav on scroll ────────────────────────────── */
/* Templates set .nav.scrolled to ~97% opaque, which hides the
   blur. Translucent + stronger blur = the frost effect. */
html.sd-dark .nav.scrolled{
  background:rgba(7, 8, 14, .58);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  border-bottom-color:rgba(255,255,255,.07);
}

/* ── 1d. Hero eyebrow: always one clean line ────────────── */
/* Progressive trim instead of wrapping: lose "Est. 2022"
   under 769px, lose "Perth HQ" under 601px. */
html.sd-dark .eyebrow-text{ white-space:nowrap; }
@media (max-width:768px){
  html.sd-dark .eyebrow-est{ display:none; }
}
@media (max-width:600px){
  html.sd-dark .eyebrow-hq{ display:none; }
  html.sd-dark .eyebrow{ font-size:10.5px; letter-spacing:.12em; }
}

/* OmegaCS homepage band collapses on smaller screens */
@media (max-width:900px){
  html.sd-dark .omega-band{ grid-template-columns:1fr !important; gap:36px !important; }
}

/* ── 1e. No horizontal scroll, ever ─────────────────────── */
html.sd-dark, html.sd-dark body{
  overflow-x:hidden;
  max-width:100%;
}

/* ── 2. Small-label legibility floor ────────────────────── */
/* The template family declares many 10–11px labels; lift the
   text-like ones to 13px and the pill/tag ones to 12px. */
html.sd-dark .eyebrow,
html.sd-dark .section-eyebrow,
html.sd-dark .cs-eyebrow,
html.sd-dark .hero-proof-label,
html.sd-dark .trust-item,
html.sd-dark .service-time,
html.sd-dark .service-from,
html.sd-dark .hf-trust,
html.sd-dark .hf2-trust,
html.sd-dark .vs-label,
html.sd-dark .cs-stat-label,
html.sd-dark .stat-label,
html.sd-dark .testi-role,
html.sd-dark .breadcrumb{
  font-size:13px;
}
html.sd-dark .hero-pill,
html.sd-dark .cs-tag,
html.sd-dark .tech-pill,
html.sd-dark .tag,
html.sd-dark .svc-tag,
html.sd-dark .ticker-item{
  font-size:12px;
}

/* Sub-headline and card copy: lift the sizes a step. */
html.sd-dark .hero-sub,
html.sd-dark .page-sub,
html.sd-dark .hf-sub,
html.sd-dark .cta-sub{
  font-size:18px;
}
html.sd-dark .service-desc,
html.sd-dark .svc-desc{
  font-size:16px;
  line-height:1.6;
}

/* Footer text was rgba(255,255,255,.25) — lift to legible. */
html.sd-dark .footer-copy{
  font-size:13px;
  color:#b9bfd6;
}
html.sd-dark .footer-col-title{ font-size:13px; }

/* ── 3. In-content link affordance ──────────────────────── */
/* The page templates force in-content links WHITE with
   `color:#fff !important` + a pulse-glow animation — invisible
   affordance inside now-white copy. Counter-important is the
   legitimate fix here: links go accent-blue and underlined,
   the glow animation dies. Buttons/CTAs are excluded. */
/* Structural chrome (nav, footer, menus, breadcrumbs) is EXCLUDED —
   blue underlined links belong in body copy, not in navigation. */
html.sd-dark p a:not([class*="btn"]):not(.nav-logo):not(.footer-contact-item):not(:is(nav,.nav,footer,.footer,.mob-menu,.breadcrumb,.has-dropdown) a),
html.sd-dark li a:not([class*="btn"]):not(:is(nav,.nav,footer,.footer,.mob-menu,.breadcrumb,.has-dropdown) a),
html.sd-dark .section-desc a,
html.sd-dark .why-desc a,
html.sd-dark .faq-a a,
html.sd-dark .service-desc a{
  color:var(--blue-text) !important;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  border-bottom:none;
  animation:none;
}
html.sd-dark p a:not([class*="btn"]):not(.nav-logo):not(.footer-contact-item):not(:is(nav,.nav,footer,.footer,.mob-menu,.breadcrumb,.has-dropdown) a):hover,
html.sd-dark li a:not([class*="btn"]):not(:is(nav,.nav,footer,.footer,.mob-menu,.breadcrumb,.has-dropdown) a):hover,
html.sd-dark .section-desc a:hover,
html.sd-dark .why-desc a:hover,
html.sd-dark .faq-a a:hover,
html.sd-dark .service-desc a:hover{
  color:var(--blue-text-hover) !important;
  text-shadow:none;
}

/* ── 4. Services mega-menu ──────────────────────────────── */
/* Rides on each page's existing .has-dropdown/.dropdown rules;
   the panel is viewport-fixed under the nav bar so it never
   overflows, and opens on hover, keyboard focus, or tap. */
html.sd-dark .dropdown.mega{
  position:fixed;
  top:var(--nav-h, 76px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  display:grid;
  grid-template-columns:repeat(4, minmax(180px, 1fr));
  gap:0 10px;
  width:min(860px, calc(100vw - 32px));
  padding:14px 10px 16px;
}
html.sd-dark .has-dropdown:hover .dropdown.mega,
html.sd-dark .has-dropdown:focus-within .dropdown.mega,
html.sd-dark .has-dropdown.open .dropdown.mega{
  transform:translateX(-50%) translateY(0);
}
/* invisible hover bridge across the nav→panel gap */
html.sd-dark .dropdown.mega::before{
  content:'';
  position:absolute;
  top:-18px; left:0; right:0; height:18px;
}
html.sd-dark .dropdown.mega .mega-head{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#8f95b2;
  padding:10px 18px 4px;
}
html.sd-dark .dropdown.mega a{
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:none;
  padding:9px 18px;
  border-radius:4px;
  white-space:normal;
}
html.sd-dark .dropdown.mega a svg{
  width:14px;
  height:14px;
  flex-shrink:0;
  color:var(--blue-text);
}
/* keyboard/touch open states for ALL dropdowns (incl. non-mega) */
html.sd-dark .has-dropdown:focus-within .dropdown,
html.sd-dark .has-dropdown.open .dropdown{
  opacity:1;
  visibility:visible;
}
@media (max-width:1023px){
  html.sd-dark .dropdown.mega{ display:none; } /* mobile uses the hamburger menu */
}

/* ── 4b. Mobile footer: tighten the stack ───────────────── */
/* Stacked footer was ~2,000px tall on phones — sparse 40px
   rows and 40px column gaps. Tighten, and run link lists
   two-across so each section halves in height. */
@media (max-width:768px){
  html.sd-dark .footer{ padding:44px 0 24px; }
  html.sd-dark .footer-grid{ gap:28px; }
  html.sd-dark .footer-col-title{ margin-bottom:12px; }
  html.sd-dark .footer-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 18px;
  }
  html.sd-dark .footer-bottom{ margin-top:28px; }
}

/* ── 5. Accessibility (GLOBAL — all pages) ──────────────── */
:focus-visible{
  outline:2px solid #7290ff;
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── 6. Client logo scroller (shared component) ─────────── */
.logo-scroller{background:#ffffff;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;padding:36px 0;overflow:hidden;}
.logo-scroller-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(0,0,0,.4);text-align:center;margin-bottom:24px;}
.logo-track-wrap{overflow:hidden;-webkit-mask:linear-gradient(to right,transparent 0%,#fff 8%,#fff 92%,transparent 100%);mask:linear-gradient(to right,transparent 0%,#fff 8%,#fff 92%,transparent 100%);}
.logo-track{display:flex;align-items:center;gap:72px;animation:logoScroll 55s linear infinite;width:max-content;}
.logo-track:hover{animation-play-state:paused;}
@keyframes logoScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.logo-item{flex-shrink:0;height:56px;display:flex;align-items:center;}
.logo-item img{height:100%;width:auto;object-fit:contain;opacity:.85;transition:opacity .3s;}
.logo-track:hover .logo-item img{opacity:1;}