/* ============================================================
   IRONCORE HUB — Site-wide upgrade (LIGHT, loaded by every page)
   Keeps the normal light background. Adds the two things that
   make the whole site read as one premium brand:
     1. A characterful display face (Bricolage Grotesque)
     2. A floating pill navigation, consistent on every page
   Loaded AFTER style.css so these win; no colors are flipped.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&display=swap');

:root{
  --font-display:'Bricolage Grotesque','Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --nav-h:76px;
}

/* --- Ambient moving background (subtle, site-wide) --- */
body::before{content:"";position:fixed;inset:-5%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42% 46% at 16% 22%, rgba(37,99,235,.16), transparent 60%),
    radial-gradient(48% 52% at 84% 74%, rgba(7,175,218,.14), transparent 60%),
    radial-gradient(40% 44% at 66% 10%, rgba(37,99,235,.12), transparent 60%);
  animation:ambientDrift 26s ease-in-out infinite alternate;}
@keyframes ambientDrift{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(4%,-6%,0) scale(1.18)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

/* ---- Floating pill nav (all pages) ---- */
/* At the top of the page the nav floats as a pill. Once scrolled (.scrolled, set in shared.js) it
   attaches to the top edge like the iPhone 12 notch, in two steps: the pill rises and touches the
   edge, THEN its top corners flatten while two concave "shoulders" grow out of its sides along the
   edge. Detaching plays the same path backwards. --nav-r is half the bar's height (measured in
   shared.js) so the corners animate as a true pill instead of snapping late from 999px.
   Selectors are nav#mainNav to match style.css's nav#mainNav / nav#mainNav.scrolled, which would
   otherwise outrank these and replace the transitions and the scrolled background. */
@property --nav-sh{syntax:"<length>"; inherits:false; initial-value:0px}
nav#mainNav{
  --nav-r:26px;
  --nav-shoulder:18px;
  --nav-solid:rgba(255,255,255,.97);
  --nav-ease:cubic-bezier(.32,.72,0,1);
  position:fixed;
  top:max(14px,env(safe-area-inset-top,0px)) !important;
  left:50% !important; right:auto !important; margin:0 !important;
  transform:translateX(-50%) !important;
  width:min(1140px,calc(100% - 2.4rem)) !important; height:auto !important;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--line) !important; border-radius:var(--nav-r) !important;
  box-shadow:0 8px 28px -16px rgba(16,24,40,.28);
  padding:.72rem 1rem !important;
  /* detaching: corners round first, then the pill drops away */
  transition:
    border-top-left-radius .26s var(--nav-ease) .14s,
    border-top-right-radius .26s var(--nav-ease) .14s,
    top .5s var(--nav-ease) .3s,
    padding .5s var(--nav-ease) .3s,
    border-top-color .2s ease .14s,
    background .35s ease, box-shadow .35s ease;
}
nav#mainNav.scrolled{
  top:0 !important;
  transform:translateX(-50%) !important;
  border-top-left-radius:0 !important; border-top-right-radius:0 !important;
  border-top-color:transparent !important;
  padding-top:calc(.72rem + env(safe-area-inset-top,0px)) !important;
  background:var(--nav-solid);
  box-shadow:0 14px 30px -20px rgba(16,24,40,.38);
  /* attaching: rise first, then flatten the corners as the shoulders grow */
  transition:
    top .46s var(--nav-ease),
    padding .46s var(--nav-ease),
    border-top-left-radius .34s var(--nav-ease) .4s,
    border-top-right-radius .34s var(--nav-ease) .4s,
    border-top-color .2s ease .4s,
    background .35s ease, box-shadow .35s ease;
}
/* The shoulders are anchored to the nav's own sides, so they always grow out of the bar. */
nav#mainNav::before,nav#mainNav::after{
  content:""; position:absolute; top:-1px; width:var(--nav-sh); height:var(--nav-sh); pointer-events:none;
  transition:--nav-sh .2s cubic-bezier(.4,0,1,1);
}
nav#mainNav::before{ right:100%; margin-right:-1px;
  background:radial-gradient(circle at 0 100%, transparent calc(var(--nav-sh) - 1px), var(--line) calc(var(--nav-sh) - 1px), var(--line) var(--nav-sh), var(--nav-solid) calc(var(--nav-sh) + .5px)); }
nav#mainNav::after{ left:100%; margin-left:-1px;
  background:radial-gradient(circle at 100% 100%, transparent calc(var(--nav-sh) - 1px), var(--line) calc(var(--nav-sh) - 1px), var(--line) var(--nav-sh), var(--nav-solid) calc(var(--nav-sh) + .5px)); }
nav#mainNav.scrolled::before,nav#mainNav.scrolled::after{
  --nav-sh:var(--nav-shoulder);
  transition:--nav-sh .42s cubic-bezier(.22,1.25,.36,1) .4s;
}
@media (prefers-reduced-motion:reduce){
  nav#mainNav,nav#mainNav.scrolled,nav#mainNav::before,nav#mainNav::after,
  nav#mainNav.scrolled::before,nav#mainNav.scrolled::after{transition:none}
}
/* Logo + links keep their existing layout; just refine spacing/weight */
#mainNav .nav-logo-name{font-family:var(--font-display);letter-spacing:.02em}
#mainNav .nav-link{border-radius:999px;font-family:var(--font-display);font-weight:500;transition:background .2s,color .2s}
#mainNav .nav-cta,#mainNav .btn-primary{font-family:var(--font-display)}
.mobile-menu a{font-family:var(--font-display)}
#mainNav .nav-link:hover{background:rgba(37,99,235,.08)}

/* Pill-shaped CTA already blue in style.css; ensure it sits tight in the pill */
#mainNav .nav-cta,#mainNav .btn-primary{border-radius:999px}

/* Headings pick up the display face site-wide automatically via --font-display */

/* --- Logo: plain "ICH" wordmark, no box, on the nav background --- */
#mainNav{display:flex !important; align-items:center}
#mainNav .nav-group{flex:1 1 0}
#mainNav .nav-group.right{justify-content:flex-end}
#mainNav .nav-logo{
  gap:0; width:58px; height:25px; flex:none;
  background:url('assets/logo-ich-nav.png') center/contain no-repeat;
}
#mainNav .nav-logo-name,#mainNav .nav-logo-sub{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
#mainNav .nav-logo::after{content:none}

/* --- No underline when hovering nav links --- */
#mainNav .nav-link::after{content:none !important; display:none !important}
#mainNav .nav-link:hover{background:transparent; color:var(--primary)}

/* --- Remove the rows-and-columns grid + line/mark decorations --- */
.hero-grid,.hv-grid,.hero-lines,.hero-vline,.page-hero-vline,.page-hero-mark{display:none !important}
.page-hero-bg::after,.platform-band::before,.platform-band::after{content:none !important; background:none !important}

/* --- Motion: pronounced, consistent scroll reveals site-wide --- */
.reveal{opacity:0; transform:translateY(34px);
  transition:opacity .75s cubic-bezier(.2,.75,.25,1), transform .75s cubic-bezier(.2,.75,.25,1)}
.reveal.visible{opacity:1; transform:none}
.rv-child{opacity:0; transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.2,.75,.25,1), transform .6s cubic-bezier(.2,.75,.25,1)}
.rv-go .rv-child{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  .rv-child{opacity:1 !important; transform:none !important; transition:none}
}

/* --- Sticky "Get a quote" CTA (bottom-left; WhatsApp sits bottom-right) --- */
.scroll-cta{position:fixed; z-index:60;
  left:max(18px,env(safe-area-inset-left,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; gap:8px;
  background:var(--primary); color:#fff; font-family:var(--font-body); font-weight:600; font-size:14px;
  padding:12px 20px; border-radius:999px; text-decoration:none;
  box-shadow:0 12px 30px -8px rgba(37,99,235,.6);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .4s ease, transform .4s ease, background .2s ease}
.scroll-cta.show{opacity:1; transform:none; pointer-events:auto}
.scroll-cta:hover{background:var(--primary-dark)}
@media (max-width:600px){.scroll-cta{font-size:13px; padding:10px 16px}}
@media (prefers-reduced-motion:reduce){.scroll-cta{transition:opacity .2s ease}}

/* --- Platform band: light and consistent (no dark section) --- */
.platform-band{background:var(--surface) !important; color:var(--ink)}
.platform-band .section-eyebrow{color:var(--primary) !important}
.platform-band .section-eyebrow::before{background:var(--primary) !important}
.platform-band .section-title{color:var(--ink) !important}
.platform-band .section-title em{color:var(--primary) !important}
.platform-band .section-lead{color:var(--ink-soft) !important}
.platform-band .btn-ghost,.platform-band .btn-ghost span{color:var(--ink) !important}
.platform-band .btn-ghost{border:1px solid var(--line-accent) !important;background:rgba(12,15,22,.02) !important}
.platform-band .btn-ghost:hover{border-color:var(--primary) !important;background:rgba(37,99,235,.08) !important}