/* ============================================================
   Interfire Systems — interfiresystems.com.au
   v2 redesign: full transplant of the AIconsult-it design
   language (aiconsult-it.ai) onto Interfire's light brand
   palette. Oversized display type, cinematic video hero,
   marquee, glass cards with gradient borders, count-up stats,
   deep-navy contrast bands, cursor glow, reveal motion.
   Logo colours: deep blue #1a6fae, sky blue #29a3d4, leaf green #7fb84e
   ============================================================ */
:root {
  --bg: #f3f6fa;
  --panel: #ffffff;
  --panel-2: #eaf1f7;
  --line: rgba(10, 36, 64, 0.10);
  --line-2: rgba(10, 36, 64, 0.20);
  --text: #0e2032;
  --muted: #4f6175;
  --muted-2: #7b8a9d;
  --blue: #1a6fae;
  --blue-d: #14598c;
  --teal: #29a3d4;
  --green: #7fb84e;
  --navy: #07182b;
  --navy-2: #0a2240;
  --grad: linear-gradient(95deg, #1a6fae 0%, #29a3d4 55%, #7fb84e 115%);
  --r: 16px;
  --r-lg: 22px;
  --maxw: 1240px;
  --shadow: 0 24px 60px -28px rgba(7, 24, 43, 0.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
section[id], header[id] { scroll-margin-top: 96px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 16px; line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--teal); color: #fff; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.025em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.dot { color: var(--teal); }
img { max-width: 100%; }

/* Ambient glow + blueprint grid behind the whole page (aiconsult signature) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58vw 58vw at 85% -12%, rgba(41, 163, 212, 0.16), transparent 60%),
    radial-gradient(50vw 50vw at -12% 42%, rgba(26, 111, 174, 0.12), transparent 60%),
    radial-gradient(46vw 46vw at 62% 112%, rgba(127, 184, 78, 0.10), transparent 60%),
    var(--bg);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image:
    linear-gradient(rgba(10, 36, 64, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 36, 64, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 30%, transparent 80%);
}

/* Cursor glow — teal light that lives in the dark sections (mix-blend screen
   makes it invisible on white, glowing over navy hero/bands/footer) */
.cursor-glow {
  position: fixed; z-index: 9999; width: 560px; height: 560px; border-radius: 50%;
  pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(circle, rgba(41, 163, 212, 0.28), rgba(26, 111, 174, 0.10) 45%, transparent 65%);
  transform: translate(-50%, -50%); transition: opacity .35s; left: 50%; top: 50%;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 27px; border-radius: 999px; font-weight: 600; font-size: 15px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .18s, box-shadow .25s, background .2s, border-color .2s;
  white-space: nowrap; line-height: 1; font-family: inherit;
}
.btn svg { width: 16px; height: 16px; }
.btn-blue { background: linear-gradient(110deg, var(--blue) 0%, var(--teal) 130%); color: #fff; box-shadow: 0 10px 32px -10px rgba(26, 111, 174, 0.75); }
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -10px rgba(41, 163, 212, 0.85); }
.btn-white { background: rgba(255,255,255,0.94); color: var(--navy); box-shadow: 0 8px 26px -10px rgba(7, 24, 43, 0.5); }
.btn-white:hover { background: #fff; transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,0.6); color: var(--text); border-color: var(--line-2); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: #fff; transform: translateY(-2px); }

/* ===== NAV — floating glass bar ===== */
nav.site-nav {
  position: fixed; top: 14px; left: 16px; right: 16px; z-index: 100;
  max-width: calc(var(--maxw) + 8px); margin: 0 auto;
  background: rgba(255, 255, 255, 0.74); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 18px;
  box-shadow: 0 14px 44px -18px rgba(7, 24, 43, 0.35), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: box-shadow .3s, background .3s;
}
nav.site-nav.scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 18px 50px -18px rgba(7, 24, 43, 0.45); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; }
.brand-logo { height: 34px; width: auto; display: block; }
.nav-menu { display: flex; align-items: center; gap: 25px; }
.nav-menu > a, .nav-drop > a { color: var(--muted); font-size: 14.5px; font-weight: 500; transition: color .15s; }
.nav-menu > a:hover, .nav-drop > a:hover { color: var(--blue); }
.nav-drop { position: relative; }
.nav-drop > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-drop > a svg { width: 11px; height: 11px; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: rgba(255,255,255,0.95); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  min-width: 190px; padding: 8px; opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-drop-menu a { display: block; padding: 9px 14px; border-radius: 9px; font-size: 14px; color: var(--muted); font-weight: 500; }
.nav-drop-menu a:hover { background: var(--panel-2); color: var(--blue); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-right .btn { padding: 11px 20px; font-size: 14px; }
.nav-phone { display: inline-flex; align-items: center; gap: 7px; color: var(--blue-d); font-size: 14px; font-weight: 700; }
.nav-phone svg { width: 15px; height: 15px; }
.menu-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; width: 44px; height: 44px; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after {
  display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--text); content: "";
}
.menu-toggle .bars { position: relative; }
.menu-toggle .bars::before { position: absolute; top: -8px; left: 0; }
.menu-toggle .bars::after { position: absolute; top: 8px; left: 0; }
@media (max-width: 1080px) {
  .nav-menu, .nav-right .nav-phone { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  nav.site-nav { top: 10px; left: 10px; right: 10px; }
  .brand-logo { height: 28px; }
  .nav-right .btn { display: none; }
  .nav-right { gap: 10px; }
  .nav-inner { padding: 10px 16px; }
}

/* mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 110; background: rgba(7, 24, 43, 0.97); backdrop-filter: blur(12px); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow-y: auto; padding: 80px 24px 40px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 600; color: #fff; }
.mobile-menu a.sub { font-size: 16px; color: #9fc1d8; font-weight: 500; }
.mobile-menu .close { position: absolute; top: 24px; right: 24px; background: none; border: 0; color: #fff; cursor: pointer; }

/* ===== HOME HERO — full-bleed cinematic smoke video ===== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--navy); }
/* Poster: the buildings graded DEEP BLUE — navy multiplied into the photo
   via background-blend-mode, plus a darkening/saturating filter, so the
   backdrop reads as dark BLUE buildings (per Adam), not a grey wash. */
.hero-poster {
  position: absolute; inset: 0; background-position: center; background-size: cover; z-index: 0;
  background-color: #11497f; background-blend-mode: multiply;
  filter: brightness(0.78) saturate(1.3);
}
.hero-video {
  /* VISIBLE BY DEFAULT — no JS opacity gate, no blend mode. The old combo
     (opacity 0 until a 'playing' event, plus mix-blend-mode: screen) failed
     on real machines: delayed/blocked autoplay left the video invisible
     forever, and screen-blending accelerated video composites wrong on some
     Windows GPUs. The clip is white smoke on black, so at partial opacity
     its black field simply deepens the blue buildings below while the
     filter-boosted wisps stay unmistakably white — smoke at all times, even
     on the very first paused frame. JS only ever REMOVES this element
     (load error / prefers-reduced-motion / save-data). */
  position: absolute; inset: -6% 0; z-index: 1; width: 100%; height: 112%; object-fit: cover;
  opacity: 0.62; will-change: transform;
  filter: contrast(1.25) brightness(1.5);
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* Brand flame mark in the smoke — the flat 2D logo, big, spinning slowly
   on the Y axis like a coin. Three shallow depth slices give the edge-on
   moment a little body, but it reads as the FLAT logo spinning, not a
   volumetric object. Sits at z-index 2 BEFORE .hero-scrim in the DOM, so
   the navy scrim washes over it and the smoke (below) drifts through it. */
.hero-flame {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
}
.hero-flame::before { /* soft teal aura, gentle pulse */
  content: ""; position: absolute; width: min(72vw, 760px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 163, 212, 0.30), rgba(26, 111, 174, 0.14) 45%, transparent 68%);
  animation: flameGlow 6s ease-in-out infinite;
}
.flame-spin {
  position: relative; width: clamp(420px, 44vw, 600px); aspect-ratio: 1;
  transform-style: preserve-3d; opacity: 0.9; will-change: transform;
  animation: flameSpin 14s linear infinite;
}
/* three shallow depth slices so the mark doesn't vanish edge-on */
.f-layer { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: visible; }
.f-layer.front { transform: translateZ(30px); filter: drop-shadow(0 0 34px rgba(41, 163, 212, 0.45)); }
.f-layer.mid   { transform: translateZ(0); opacity: 0.65; }
.f-layer.back  { transform: translateZ(-30px); opacity: 0.45; filter: blur(1.5px) brightness(0.75); }
@keyframes flameSpin { /* gentle constant tilt, full slow revolution */
  from { transform: rotateX(12deg) rotateY(0deg); }
  to   { transform: rotateX(12deg) rotateY(360deg); }
}
@keyframes flameGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .flame-spin { animation: none; transform: rotateX(0); }
  .f-layer.mid, .f-layer.back { display: none; } /* single static flame only */
  .hero-flame::before { animation: none; }
}
@media (max-width: 600px) {
  .flame-spin { width: min(320px, 82vw); opacity: 0.7; }
  .f-layer.back { display: none; } /* lighter compositing load on phones */
  .f-layer.front { transform: translateZ(18px); filter: drop-shadow(0 0 22px rgba(41, 163, 212, 0.4)); }
}
.hero-scrim {
  /* Deep BLUE wash (navy-2 leaning, not grey-navy) for legibility at the
     edges. Kept light in the centre so the smoke wisps — now un-gated and
     un-blended below — stay clearly visible at all times. */
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(80% 70% at 50% 42%, rgba(8, 28, 52, 0.10), rgba(8, 28, 52, 0.38) 75%, rgba(7, 24, 43, 0.66)),
    linear-gradient(180deg, rgba(7, 24, 43, 0.52) 0%, rgba(8, 28, 52, 0.08) 32%, rgba(8, 28, 52, 0.32) 74%, var(--navy) 100%);
}
.hero::after { /* faint blueprint grid over the smoke */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(141, 200, 233, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141, 200, 233, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 45%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 75% at 50% 45%, #000 25%, transparent 75%);
}
.hero .wrap { position: relative; z-index: 5; text-align: center; width: 100%; padding-top: 130px; padding-bottom: 120px; }
/* Hero brand stamp — official white logo (assets/img/logo-white.svg) above the eyebrow.
   Deliberately small: a signature, not a second headline. */
.hero-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 28px; }
.hero-brand img { width: auto; height: 72px; flex-shrink: 0; filter: drop-shadow(0 0 18px rgba(41, 163, 212, 0.45)); }
/* Hero entrance — brand stamp fades in first, then the stack follows */
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero .hero-brand, .hero .eyebrow, .hero h1, .hero .sub-rotator, .hero .hero-cta {
  animation: heroIn .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero .hero-brand { animation-delay: .05s; }
.hero .eyebrow { animation-delay: .22s; }
.hero h1 { animation-delay: .36s; }
.hero .sub-rotator { animation-delay: .5s; }
.hero .hero-cta { animation-delay: .62s; }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-brand, .hero .eyebrow, .hero h1, .hero .sub-rotator, .hero .hero-cta { animation: none; }
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.38em; text-transform: uppercase; color: #a9c6db;
}
.eyebrow .sep { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); }
.hero h1 {
  font-size: clamp(44px, 8.4vw, 110px); line-height: 0.96; letter-spacing: -0.035em;
  color: #fff; margin: 0 auto; max-width: 13ch; text-wrap: balance;
  text-shadow: 0 2px 34px rgba(7, 24, 43, 0.55); /* keeps headline crisp over the spinning mark */
}
.grad-w { background: linear-gradient(95deg, #7cc4ea 0%, #29a3d4 45%, #8fd05e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .sub-rotator { position: relative; min-height: 3.4em; max-width: 56ch; margin: 28px auto 0; }
.hero p.sub {
  position: absolute; inset: 0; font-size: clamp(17px, 2vw, 21px); color: #cfe0ed; line-height: 1.55;
  opacity: 0; transform: translateY(10px); transition: opacity .8s ease, transform .8s ease; pointer-events: none;
}
.hero p.sub.on { opacity: 1; transform: none; pointer-events: auto; }
.hero-cta { display: inline-flex; gap: 14px; margin-top: 42px; flex-wrap: wrap; justify-content: center; }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 6; color: #87a3ba; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-cue .bar { width: 1px; height: 38px; background: linear-gradient(var(--teal), transparent); animation: cue 2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }
/* corner badges */
.hero-corner { position: absolute; z-index: 6; bottom: 32px; }
.hero-corner.left { left: 30px; max-width: 250px; text-align: left; }
.hero-corner.right { right: 30px; }
.corner-label { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #6f8ba1; margin-bottom: 6px; }
.corner-link { font-size: 13px; font-weight: 600; color: #d4e2ee; line-height: 1.35; display: inline-flex; gap: 8px; align-items: flex-start; }
.corner-link svg { width: 13px; height: 13px; color: var(--teal); flex-shrink: 0; margin-top: 2px; }
.corner-link:hover { color: #fff; }
.badge-card { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.badge-card .lbl { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #6f8ba1; }
.badge-card .val { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #d4e2ee; padding: 7px 13px; border: 1px solid rgba(141, 200, 233, 0.25); border-radius: 999px; background: rgba(255,255,255,0.05); backdrop-filter: blur(8px); }
.badge-card .val .g { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulseG 2.2s ease-in-out infinite; }
@keyframes pulseG { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 760px) { .hero-corner { display: none; } }
@media (max-width: 600px) {
  .hero-brand { margin-bottom: 22px; }
  .hero-brand img { height: 56px; }
  .eyebrow { letter-spacing: 0.2em; font-size: 11.5px; gap: 9px; flex-wrap: wrap; justify-content: center; }
  .hero h1 { font-size: clamp(36px, 11vw, 48px); }
  .hero .sub-rotator { min-height: 6em; }
}

/* ===== PAGE HERO (inner pages) — deep navy, oversized type ===== */
.page-hero { position: relative; padding: 200px 0 92px; overflow: hidden; background: var(--navy); }
.page-hero .bgimg { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: 0.28; filter: saturate(0.4); }
.page-hero .scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(60vw 42vw at 82% -20%, rgba(41, 163, 212, 0.30), transparent 62%),
    radial-gradient(48vw 36vw at -8% 110%, rgba(127, 184, 78, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(7, 24, 43, 0.82) 0%, rgba(7, 24, 43, 0.55) 55%, var(--navy) 100%);
}
.page-hero::after { /* grid */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(141, 200, 233, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141, 200, 233, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000 20%, transparent 85%);
          mask-image: radial-gradient(ellipse 100% 100% at 50% 0%, #000 20%, transparent 85%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .kicker { color: var(--teal); }
.page-hero .kicker::before { background: var(--teal); }
.page-hero h1 { color: #fff; font-size: clamp(42px, 7vw, 92px); letter-spacing: -0.035em; line-height: 0.98; max-width: 16ch; text-wrap: balance; }
.page-hero p { color: #c6d8e6; font-size: 17px; max-width: 62ch; margin-top: 18px; }

/* ===== Marquee — dark strip flowing out of the hero ===== */
.marquee { padding: 22px 0; overflow: hidden; background: var(--navy); border-top: 1px solid rgba(141, 200, 233, 0.12); position: relative; }
.marquee::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); opacity: 0.9; }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: marq 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 500; color: #9fc1d8; display: inline-flex; align-items: center; gap: 48px; white-space: nowrap; }
.marquee span::after { content: "✦"; color: var(--teal); font-size: 11px; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ===== Section shell ===== */
section.block { padding: 110px 0; position: relative; }
section.block.tight { padding: 72px 0; }
.kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--blue); }
.sec-head { max-width: 800px; margin-bottom: 58px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .kicker::before { display: none; }
.sec-head h2 { font-size: clamp(32px, 5vw, 58px); line-height: 1.02; letter-spacing: -0.03em; }
.sec-head p { font-size: 18px; color: var(--muted); margin-top: 20px; line-height: 1.65; }
.grad { background: linear-gradient(100deg, var(--text) 0%, var(--text) 30%, var(--blue) 70%, var(--teal) 105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* reveal — gated behind .js so no-JS/crawlers still see content */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ===== Stats — count-up numerals ===== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 28px; background: rgba(255,255,255,0.75); backdrop-filter: blur(6px); position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; top: -50px; right: -50px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(41, 163, 212, 0.14), transparent 70%); }
.stat .num {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(44px, 5.4vw, 66px); font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--navy-2), var(--blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat .num .suf { color: var(--teal); -webkit-text-fill-color: var(--teal); }
.stat .lbl { margin-top: 14px; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ===== Split feature (image + copy) ===== */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.split.rev { grid-template-columns: 1fr 1.05fr; }
@media (max-width: 900px) { .split, .split.rev { grid-template-columns: 1fr; gap: 32px; } .split.rev .shot { order: -1; } }
.split h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.04; letter-spacing: -0.03em; }
.split p { color: var(--muted); font-size: 16.5px; margin-top: 16px; line-height: 1.7; }

/* framed screenshots/photos with glow ring (aiconsult .shot) */
.shot {
  position: relative; border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 34px 80px -32px rgba(7, 24, 43, 0.55), 0 0 0 1px rgba(41, 163, 212, 0.14);
}
.shot::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 70px rgba(41, 163, 212, 0.10); pointer-events: none; }
.shot img { display: block; width: 100%; height: auto; }

/* Brand-graded photo treatment — navy/teal duotone wash over site photography
   (1a6fae -> 29a3d4 -> navy, blended onto a part-desaturated, contrast-lifted
   image) inside the standard glow-ringed .shot frame, with a subtle slow zoom
   on hover. Add .shot-grade alongside .shot. */
.shot.shot-grade { background: var(--navy); }
.shot.shot-grade img {
  filter: saturate(0.6) contrast(1.1) brightness(0.97);
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  will-change: transform;
}
.shot.shot-grade::before { /* duotone wash: hue-shifts the photo to the brand blues */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(165deg, rgba(26, 111, 174, 0.80) 0%, rgba(41, 163, 212, 0.55) 48%, rgba(7, 24, 43, 0.85) 100%);
  mix-blend-mode: color;
}
.shot.shot-grade::after { /* keep the glow ring + add a gentle navy depth scrim */
  box-shadow: inset 0 0 70px rgba(41, 163, 212, 0.16);
  background: linear-gradient(180deg, rgba(7, 24, 43, 0.10) 0%, transparent 35%, rgba(7, 24, 43, 0.28) 100%);
}
.shot.shot-grade:hover img { filter: saturate(0.75) contrast(1.1) brightness(1.02); transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) { .shot.shot-grade img, .shot.shot-grade:hover img { transition: none; transform: none; } }
/* landscape crop of a portrait source (keeps the one-point perspective band) */
.shot.crop-32 img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; object-position: center 58%; }

/* tick list */
.ticks { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.ticks li { font-size: 15px; color: var(--text); display: flex; gap: 11px; align-items: flex-start; line-height: 1.5; }
.ticks li svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; margin-top: 2px; }

/* ===== Glass cards with gradient-border hover (aiconsult signature) ===== */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card {
  position: relative; background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 26px; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(41, 163, 212, 0.85), rgba(127, 184, 78, 0.4) 55%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .25s;
}
.card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card .no { position: absolute; top: 18px; right: 18px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; color: var(--muted-2); font-weight: 600; letter-spacing: 0.08em; }
.card .ic { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(26, 111, 174, 0.16), rgba(127, 184, 78, 0.08)); border: 1px solid rgba(26, 111, 174, 0.28); color: var(--blue); }
.card .ic svg { width: 19px; height: 19px; }
.card h3 { font-size: 16.5px; margin-bottom: 8px; line-height: 1.3; letter-spacing: -0.01em; text-transform: uppercase; }
.card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.card .lk { font-size: 13px; font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; }
.card .lk svg { width: 14px; height: 14px; }

/* ===== Project tiles ===== */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
.tile { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; display: block; border: 1px solid var(--line); background: var(--navy); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s, filter .4s; }
.tile:hover img { transform: scale(1.08); opacity: 0.4; filter: saturate(0.6); }
.tile .lbl {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding: 18px;
  background: linear-gradient(180deg, transparent 35%, rgba(7, 24, 43, 0.88) 100%);
  color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: 0.04em; line-height: 1.3;
}
.tile .lbl span { transition: transform .35s; }
.tile:hover .lbl span { transform: translateY(-5px); }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s;
}
.tile:hover::after { opacity: 1; }

/* ===== Project / article list cards ===== */
.list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 860px) { .list-grid { grid-template-columns: 1fr; } }
.lcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s, border-color .25s; }
.lcard:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: rgba(41, 163, 212, 0.45); }
.lcard .im { aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel-2); }
.lcard .im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.lcard:hover .im img { transform: scale(1.05); }
.lcard .bd { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lcard .date { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.lcard h3 { font-size: 20px; line-height: 1.25; }
.lcard p { font-size: 14.5px; color: var(--muted); line-height: 1.65; flex: 1; }
.lcard .lk { font-size: 13.5px; font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
.lk svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ===== Quotes — glass cards on navy band ===== */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } }
.quote { border: 1px solid rgba(141, 200, 233, 0.18); border-radius: var(--r-lg); padding: 32px 30px; background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); position: relative; display: flex; flex-direction: column; gap: 16px; }
.quote .qm { font-family: 'Space Grotesk', sans-serif; font-size: 48px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.quote p { font-size: 16px; color: #e2edf5; line-height: 1.65; flex: 1; margin: 0; }
.quote .who { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.quote .who span { display: block; font-weight: 500; color: #9fc1d8; letter-spacing: 0.02em; text-transform: none; margin-top: 2px; }

/* ===== Navy band (video / image, full-bleed contrast section) ===== */
.band { position: relative; min-height: 480px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 60%, #0d3354 100%); }
.band .bgimg, .band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-position: center; background-size: cover; z-index: 0; opacity: 0.55; }
.band-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7, 24, 43, 0.92) 0%, rgba(7, 24, 43, 0.68) 52%, rgba(7, 24, 43, 0.45) 100%); }
.band::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); z-index: 4; opacity: 0.9; }
.band .wrap { position: relative; z-index: 3; padding-top: 92px; padding-bottom: 92px; width: 100%; }
.band-inner { max-width: 640px; }
.band h2 { font-size: clamp(30px, 4.6vw, 54px); line-height: 1.03; color: #fff; letter-spacing: -0.03em; }
.band p { font-size: 18px; color: #c6d8e6; margin-top: 20px; max-width: 60ch; }
.band .kicker { color: var(--teal); }
.band .kicker::before { background: var(--teal); }
.band .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.chip { font-size: 13px; font-weight: 500; color: #e2edf5; border: 1px solid rgba(141, 200, 233, 0.3); border-radius: 999px; padding: 8px 16px; background: rgba(255,255,255,0.06); backdrop-filter: blur(6px); transition: background .2s, border-color .2s; }
a.chip:hover { background: rgba(255,255,255,0.14); border-color: rgba(141, 200, 233, 0.6); }

/* ===== Prose (long-form text) ===== */
.prose { max-width: 880px; }
.prose h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; margin-bottom: 18px; letter-spacing: -0.025em; }
.prose h3 { font-size: 20px; margin: 30px 0 10px; color: var(--blue-d); }
.prose p { color: var(--muted); font-size: 16px; line-height: 1.75; margin-bottom: 14px; }
.prose a { color: var(--blue); font-weight: 600; }
.prose ul { margin: 12px 0 16px 20px; color: var(--muted); line-height: 1.8; }

/* ===== Contact / CTA panel ===== */
.cta-wrap { border: 1px solid var(--line); border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, rgba(26, 111, 174, 0.08), rgba(255,255,255,0.92)); position: relative; box-shadow: var(--shadow); }
.cta-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 82% 0%, rgba(41, 163, 212, 0.18), transparent 60%); pointer-events: none; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; position: relative; z-index: 2; }
@media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-left { padding: 56px 48px; }
.cta-left h2 { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.04; letter-spacing: -0.03em; }
.cta-left p { font-size: 16.5px; color: var(--muted); margin-top: 16px; }
.cta-left .contact-lines { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.cline { display: flex; gap: 14px; align-items: flex-start; }
.cline .ic { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(26, 111, 174, 0.14), rgba(127, 184, 78, 0.08)); border: 1px solid rgba(26, 111, 174, 0.28); color: var(--blue); }
.cline .ic svg { width: 18px; height: 18px; }
.cline .lb { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.cline .vl { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.45; }
.cline .vl a:hover { color: var(--blue); }
.cta-form { padding: 48px; background: rgba(255,255,255,0.92); border-left: 1px solid var(--line); }
@media (max-width: 860px) { .cta-form { border-left: 0; border-top: 1px solid var(--line); } .cta-left, .cta-form { padding: 38px 28px; } }
.cta-form h3 { font-size: 21px; margin-bottom: 18px; }
.fld { margin-bottom: 14px; }
.fld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.fld input, .fld textarea, .fld select { width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line-2); background: #fbfdff; color: var(--text); font-family: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--muted-2); }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(41, 163, 212, 0.18); }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .fld-row { grid-template-columns: 1fr; } }
.cta-form .btn { width: 100%; margin-top: 6px; }
.cta-form .alt { text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.cta-form .alt a { color: var(--blue); font-weight: 600; }
.form-status { margin-top: 14px; font-size: 14px; text-align: center; padding: 10px 12px; border-radius: 10px; line-height: 1.4; }
.form-status.ok { color: #1e7c43; background: rgba(67, 209, 127, 0.1); border: 1px solid rgba(46, 160, 95, 0.3); }
.form-status.err { color: #b3372a; background: rgba(255, 122, 107, 0.1); border: 1px solid rgba(214, 89, 74, 0.3); }
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* sidebar enquiry panel used on service pages */
.side-panel { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 30px; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.side-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.side-panel h3 { font-size: 19px; margin-bottom: 16px; }
.side-panel .call { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; font-weight: 700; color: var(--blue-d); font-size: 16px; }
.side-panel .call svg { width: 17px; height: 17px; }

/* article pages */
.article-grid { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 880px; margin: 0 auto; }
.article-grid .shot { margin-bottom: 8px; }
.meta-date { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; display: block; }

/* ===== Footer — deep navy ===== */
footer { position: relative; padding: 64px 0 42px; background: var(--navy); color: #c6d8e6; overflow: hidden; }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); }
footer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50vw 30vw at 85% 0%, rgba(41, 163, 212, 0.12), transparent 60%);
}
footer .wrap { position: relative; z-index: 2; }
.foot-top { display: flex; justify-content: space-between; gap: 44px; flex-wrap: wrap; margin-bottom: 40px; }
.foot-blurb { max-width: 380px; }
/* Official white logo straight on the navy footer (no chip needed) */
.foot-logo { display: block; height: 64px; width: auto; margin-bottom: 18px; }
.foot-blurb p { font-size: 14px; color: #9fc1d8; line-height: 1.7; }
.foot-nfia { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.foot-nfia img { width: 60px; height: 60px; border-radius: 10px; background: #fff; padding: 4px; }
.foot-nfia span { font-size: 13px; color: #9fc1d8; line-height: 1.45; }
.foot-nfia strong { color: #e2edf5; }
.foot-uptick { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.foot-uptick img { height: 22px; width: auto; opacity: 0.9; }
.foot-uptick span { font-size: 12px; color: #9fc1d8; }
/* Customer portal nav button */
.nav-portal { font-size: 13.5px !important; padding: 10px 18px !important; }
.nav-portal-logo { height: 14px; width: auto; vertical-align: middle; display: inline-block; }
@media (max-width: 1080px) { .nav-portal { display: none; } }
/* Uptick section logo panel — center on mobile */
.uptick-logo-panel { display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (max-width: 900px) { .uptick-logo-panel { display: none; } }
.foot-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.foot-col h4 { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: #6f8ba1; margin-bottom: 16px; font-family: 'Inter', sans-serif; font-weight: 700; }
.foot-col a, .foot-col .ln { display: block; font-size: 14px; color: #9fc1d8; margin-bottom: 11px; transition: color .15s; line-height: 1.5; }
.foot-col a:hover { color: #fff; }
.foot-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid rgba(141, 200, 233, 0.14); font-size: 13px; color: #6f8ba1; }
.foot-bot a { color: #9fc1d8; }
.foot-bot a:hover { color: #fff; }