/* ─────────────────────────────────────────────────────────
   Delve Risk — global.css
   Font: Montserrat (300, 400, 700, 800, 900) via Google Fonts
   Link: <link rel="stylesheet" href="/assets/css/global.css">
───────────────────────────────────────────────────────── */

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

:root {
  --blue-core: #1B4656;
  --blue-dark: #12313A;
  --blue-darker: #0a1e24;
  --blue-deep: #061318;
  --blue-mid: #2A6577;
  --blue-light: #2DA1C4;
  --yellow-light: #F9A943;
  --yellow-mid: #E08E3E;
  --yellow-dark: #D58B39;
  --white: #ffffff;
  --text-muted: rgba(255,255,255,.6);
  --text-dim: rgba(255,255,255,.35);
  --border: rgba(255,255,255,.08);
  --border-hover: rgba(255,255,255,.16);
  --surface: rgba(255,255,255,.03);
  --surface-hover: rgba(255,255,255,.05);
  --font: 'Montserrat', sans-serif;
  --nav-dur: .85s;
  --nav-ease: cubic-bezier(.6, 0, .2, 1);   /* ramps up to speed, then eases out long and slow */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--blue-deep); color: var(--white); overflow-x: hidden; line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.accent { color: var(--yellow-light); }
button { font-family: inherit; }

/* ─── TOP NAV: FROSTED GLASS BAR ───
   A floating pill using the same glass styles as the delvein.com nav
   (rgba(16,40,52,.72), blur 12px, 7% white border). At the top of the page the
   items float loose across the full width with no glass; scrolling past the nav
   fades the pill in while everything glides into place. A soft highlight glides between
   links (nav.js). The blur lives on .topnav-bar (a sibling layer behind the
   content) so the dropdown panels can run their own blur against the page. */
.topnav { position: fixed; top: 18px; left: 0; right: 0; width: calc(100% - 64px); max-width: 1500px; margin: 0 auto; z-index: 200;
  transition: width var(--nav-dur) var(--nav-ease), max-width var(--nav-dur) var(--nav-ease); }
.topnav.is-scrolled { width: calc(100% - 32px); max-width: 1180px; }
/* The glass pill is fixed to its final (scrolled) size and only fades in. It must not
   resize while it animates: a resizing element with a backdrop blur and a large shadow gets
   re-drawn every frame, which made the first scroll hesitate. */
.topnav-bar { position: fixed; top: 18px; left: 0; right: 0; width: calc(100% - 32px); max-width: 1180px; height: 64px; margin: 0 auto; border-radius: 32px; border: 1px solid rgba(255,255,255,.07);
  background: rgba(16,40,52,.72);
  box-shadow: 0 2px 6px rgba(0,0,0,.14), 0 10px 22px -10px rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s; }
/* visibility (not just opacity) so the blur layer costs nothing while it is hidden at the top.
   Timing: the logo and links glide into place over .85s (slow start, most of the travel between .3s
   and .6s). The pill waits .4s, by which point they are about two thirds there, then fades in, so it
   arrives as they settle instead of showing up empty. Going back up it fades out fast (.25s) instead,
   before the items drift apart. */
.topnav.is-scrolled .topnav-bar { opacity: 1; visibility: visible; transition: opacity .5s ease .4s, visibility 0s linear 0s; }
.topnav-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 4px; transition: padding var(--nav-dur) var(--nav-ease); }
.topnav.is-scrolled .topnav-inner { padding: 0 12px 0 28px; }
.topnav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.topnav-logo img { height: 38px; width: auto; display: block; }
.topnav-links { position: relative; display: flex; align-items: center; justify-content: center; gap: 34px; list-style: none; margin: 0 auto; transition: gap var(--nav-dur) var(--nav-ease); }
.topnav.is-scrolled .topnav-links { gap: 2px; }
.topnav-item { position: relative; }

/* the glider: one soft highlight that slides to the hovered or current link */
.topnav-glider { position: absolute; top: 0; left: 0; height: 100%; width: var(--gw, 0); transform: translateX(var(--gx, 0)); border-radius: 999px; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); opacity: 0; pointer-events: none;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), width .38s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.topnav-glider.no-anim { transition: none; }

.topnav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; border: none; background: transparent; -webkit-appearance: none; appearance: none; font-family: inherit; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.72); text-decoration: none; cursor: pointer; white-space: nowrap; transition: color .2s; }
.topnav-link svg { width: 10px; height: 10px; opacity: .7; transition: transform .2s; }
.topnav-link:hover, .topnav-item.is-open > .topnav-link, .topnav-link.is-current { color: var(--white); }
.topnav-link.is-current { font-weight: 600; }
.topnav-item.is-open > .topnav-link svg { transform: rotate(180deg); }

.topnav-cta { flex-shrink: 0; display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--blue-deep); background: var(--yellow-light); text-decoration: none; white-space: nowrap; transition: background .2s ease; }
.topnav-cta:hover { background: var(--yellow-mid); }
/* quiet link to the sister site (DELVEin); the gold button stays the one loud item */
.topnav-ext { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.72); text-decoration: none; transition: color .2s, background .2s; }
.topnav-ext svg { width: 11px; height: 11px; opacity: .8; }
.topnav-ext:hover { color: var(--white); background: rgba(255,255,255,.08); }

/* dropdown panels: their own frosted glass */
.topnav-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 12px; width: 580px; max-width: calc(100vw - 32px); visibility: hidden; transition: visibility 0s linear .18s; }
.topnav-menu-panel { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; padding: 8px; border-radius: 20px; border: 1px solid rgba(255,255,255,.07);
  background: rgba(16,40,52,.72);
  box-shadow: 0 2px 6px rgba(0,0,0,.14), 0 10px 22px -10px rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; }
.topnav-menu a { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.8); text-decoration: none; transition: background .15s, color .15s; }
.topnav-menu-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(249,169,67,.12); color: var(--yellow-light); transition: background .15s; }
.topnav-menu-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topnav-menu a:hover .topnav-menu-icon, .topnav-menu a.is-current .topnav-menu-icon { background: rgba(249,169,67,.2); }
.topnav-menu a:hover { background: rgba(255,255,255,.08); color: var(--white); }
.topnav-menu a.is-current { background: rgba(255,255,255,.10); color: var(--white); }
.topnav-item.is-open > .topnav-menu { visibility: visible; transition-delay: 0s; }
.topnav-item.is-open > .topnav-menu .topnav-menu-panel { opacity: 1; transform: none; }
@media (hover: hover) {
  .topnav-item.has-menu:hover > .topnav-menu { visibility: visible; transition-delay: 0s; }
  .topnav-item.has-menu:hover > .topnav-menu .topnav-menu-panel { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .topnav, .topnav-bar, .topnav.is-scrolled .topnav-bar, .topnav-inner, .topnav-links { transition: none; }
}

/* hamburger (small screens) */
.topnav-burger { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; width: 44px; height: 40px; margin-left: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); -webkit-appearance: none; appearance: none; cursor: pointer; background: rgba(255,255,255,.08); }
.topnav-burger span { width: 18px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .25s, opacity .25s; }
.topnav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topnav-burger.open span:nth-child(2) { opacity: 0; }
.topnav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1150px) {
  .topnav { width: calc(100% - 32px); }
  .topnav-inner { padding: 0 2px; }
  .topnav.is-scrolled .topnav-inner { padding: 0 12px 0 22px; }
  .topnav-logo img { height: 32px; }
  .topnav-links, .topnav-cta, .topnav-ext { display: none; }
  .topnav-burger { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .topnav-glider { transition: none; } }

/* full-screen menu for small screens (frosted) */
.nav-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 199; background: rgba(6,19,24,.78); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); opacity: 0; visibility: hidden; transition: opacity .3s ease; overflow-y: auto; }
.nav-overlay.open { opacity: 1; visibility: visible; }
.nav-overlay-scroll { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 110px 24px 60px; }
.nav-overlay-scroll > a { display: inline-flex; align-items: center; justify-content: center; min-width: 240px; padding: 16px 32px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--border); font-size: 17px; font-weight: 600; text-decoration: none; color: rgba(255,255,255,.85); transition: background .2s, border-color .2s; }
.nav-overlay-scroll > a:hover, .nav-overlay-scroll > a.nav-current { background: rgba(255,255,255,.1); border-color: var(--border-hover); color: var(--white); }
.nav-overlay .nav-overlay-cta { margin-top: 12px; background: var(--yellow-light); color: var(--blue-deep); border-color: transparent; }
.nav-overlay .nav-overlay-ext { margin-top: 4px; min-width: 0; padding: 12px 22px; gap: 8px; font-size: 13px; font-weight: 500; background: transparent; color: var(--text-muted); text-align: center; }
.nav-overlay .nav-overlay-ext svg { width: 11px; height: 11px; flex-shrink: 0; }
.nav-overlay-group { width: 100%; max-width: 560px; text-align: center; margin: 4px 0; }
.nav-overlay-group-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.nav-overlay-group-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nav-overlay-group-links a { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--border); font-size: 13px; font-weight: 500; text-decoration: none; color: rgba(255,255,255,.7); transition: background .2s, border-color .2s, color .2s; }
.nav-overlay-group-links a:hover, .nav-overlay-group-links a.nav-current { background: rgba(255,255,255,.09); border-color: var(--border-hover); color: var(--white); }

/* ─── BUTTONS ─── */
.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 999px; background: var(--yellow-light); color: var(--blue-deep); font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, background .2s; }
.btn-primary:hover { transform: translateY(-2px); background: var(--yellow-mid); box-shadow: 0 16px 32px -12px rgba(249,169,67,.45); }
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 999px; background: transparent; border: 1px solid var(--border-hover); color: var(--white); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s; }
.btn-ghost:hover { background: var(--surface-hover); border-color: rgba(255,255,255,.3); }

/* ─── LAYOUT PRIMITIVES ─── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--yellow-light); margin-bottom: 18px; }
.eyebrow-pill { display: inline-flex; padding: 7px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); margin-bottom: 20px; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.section-title { font-size: clamp(26px, 3.6vw, 42px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.08; color: var(--white); margin-bottom: 16px; }
.section-body { font-size: 16px; font-weight: 400; color: var(--text-muted); line-height: 1.7; }

/* ─── SCROLL REVEAL ─── */
.reveal { opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── MARQUEE ─── */
.marquee-section { padding: 40px 0 80px; text-align: center; }
.marquee-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 28px; }
.marquee-mask { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 44s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-item { display: flex; align-items: center; justify-content: center; padding: 0 40px; }
.marquee-logo { display: block; height: 28px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .5; transition: opacity .25s; }
.marquee-item:hover .marquee-logo { opacity: .9; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ─── CARDS: SOLUTIONS GRID ─── */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.solution-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 32px; transition: border-color .25s, background .25s, transform .25s; }
.solution-card:hover { border-color: var(--border-hover); background: var(--surface-hover); transform: translateY(-4px); }
.solution-card-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(249,169,67,.12); color: var(--yellow-light); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.solution-card-icon svg { width: 22px; height: 22px; }
.solution-card-title { font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; color: var(--white); margin-bottom: 10px; }
.solution-card-body { font-size: 14px; font-weight: 400; color: var(--text-muted); line-height: 1.7; margin-bottom: 18px; }
.solution-card-link { font-size: 13px; font-weight: 700; color: var(--yellow-light); text-decoration: none; }
.solution-card-link:hover { text-decoration: underline; }

@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }

/* ─── WHO WE ARE (3-pillar) ─── */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.pillar { text-align: left; }
.pillar-title { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; color: var(--white); margin-bottom: 10px; }
.pillar-body { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ─── INDUSTRIES GRID ─── */
.industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.industry-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 30px; text-decoration: none; transition: border-color .25s, background .25s, transform .25s; }
.industry-card:hover { border-color: var(--border-hover); background-color: var(--surface-hover); transform: translateY(-4px) perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.industry-card-title { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; color: var(--white); margin-bottom: 10px; }
.industry-card-body { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; }
.industry-card-link { font-size: 13px; font-weight: 700; color: var(--yellow-light); }
@media (max-width: 900px) { .industry-grid { grid-template-columns: 1fr; } }

/* ─── GENERIC SECTION SHELLS ─── */
section { padding: 96px 0; }
.section-alt { background: rgba(255,255,255,.015); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ─── SOLUTION / INDUSTRY DETAIL PAGES ─── */
.detail-hero { padding: 170px 24px 80px; text-align: center; }
.detail-hero .eyebrow-pill { margin-bottom: 22px; }
.detail-hero h1 { font-size: clamp(28px, 4.2vw, 46px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.08; margin-bottom: 18px; max-width: 760px; margin-left: auto; margin-right: auto; }
.detail-hero p { font-size: 16px; color: var(--text-muted); max-width: 620px; margin: 0 auto 32px; line-height: 1.7; }

.check-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-muted); line-height: 1.6; }
.check-list li svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--yellow-light); margin-top: 2px; }

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-col { padding: 32px; border-radius: 18px; }
.compare-col.problem { background: rgba(255,255,255,.02); border: 1px solid var(--border); }
.compare-col.solution { background: rgba(249,169,67,.05); border: 1px solid rgba(249,169,67,.2); }
.compare-col h3 { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; color: var(--text-dim); }
.compare-col.solution h3 { color: var(--yellow-light); }
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.feature-item { padding: 26px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.feature-item h4 { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.feature-item p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }

.quote-block { max-width: 720px; margin: 0 auto; text-align: center; font-size: 20px; font-weight: 500; font-style: italic; color: rgba(255,255,255,.85); line-height: 1.6; }
.quote-block cite { display: block; margin-top: 20px; font-size: 13px; font-weight: 700; font-style: normal; color: var(--text-dim); }

/* ─── FOOTER ─── */
footer { padding: 64px 24px 40px; border-top: 1px solid var(--border); }
.footer-inner { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-brand { max-width: 280px; }
.footer-logo-img { height: 30px; width: auto; margin-bottom: 16px; }
.footer-tagline { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
.footer-cols { display: flex; gap: 36px 44px; flex-wrap: wrap; }
.footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,.65); text-decoration: none; margin-bottom: 10px; transition: color .2s; }
.footer-col a:hover { color: var(--white); }

/* FAQ (visible Q&A; mirrored in each page's FAQPage JSON-LD) */
.faq { border-top: 1px solid var(--border); }
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 20px 56px 20px 24px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--white); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--yellow-light); border-bottom: 2px solid var(--yellow-light); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--yellow-light); outline-offset: 2px; border-radius: 14px; }
.faq-item p { padding: 0 24px 22px; font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.footer-address { font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.footer-bottom { max-width: 1180px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-bottom a { text-decoration: none; color: var(--text-dim); }
.footer-bottom a:hover { color: var(--white); }

/* ─── MEDIA PLACEHOLDERS ───
   Visible stand-ins for images/video still to be produced. Each one is
   labeled on the page with its spec and the intended concept. Swap the
   whole .ph element for the real <img>/<video> when the asset exists. */
.ph { position: relative; overflow: hidden; border-radius: 18px; border: 1px dashed rgba(249,169,67,.4); background: linear-gradient(135deg, rgba(27,70,86,.5), rgba(10,30,36,.95)); display: flex; align-items: center; justify-content: center; width: 100%; }
.ph::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 85%); mask-image: radial-gradient(circle at center, #000 30%, transparent 85%); }
.ph::after { content: ''; position: absolute; width: 60%; height: 60%; left: -10%; top: -10%; border-radius: 50%; background: radial-gradient(circle, rgba(45,161,196,.35), transparent 65%); animation: ph-drift 14s ease-in-out infinite alternate; }
@keyframes ph-drift { to { transform: translate(90%, 60%) scale(1.2); } }
.ph-note { position: relative; z-index: 1; max-width: 82%; text-align: center; padding: 20px; }
.ph-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow-light); padding: 6px 12px; border-radius: 999px; background: rgba(6,19,24,.72); border: 1px solid rgba(249,169,67,.35); margin-bottom: 10px; }
.ph-spec { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ph-vision { font-size: 12px; font-style: italic; color: var(--text-dim); margin-top: 8px; line-height: 1.55; }
.ph-4x3 { aspect-ratio: 4 / 3; }
.ph-3x2 { aspect-ratio: 3 / 2; }
.ph-16x10 { aspect-ratio: 16 / 10; }
.ph-4x5 { aspect-ratio: 4 / 5; }
.ph-11x10 { aspect-ratio: 11 / 10; }
@media (prefers-reduced-motion: reduce) { .ph::after { animation: none; } }

/* ─── UTILITY CLASSES (replace former inline styles) ─── */
.cta-row { text-align: center; margin-top: 36px; }
.cta-row--lg { margin-top: 44px; }
.section-head--flush { margin-bottom: 0; }
.subhead-center { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 32px; }
.title-sm { font-size: 22px; }
.container--narrow { max-width: 640px; }
.container--center { text-align: center; }

/* ─── CONTACT FORM ─── */
.form-stack { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: flex; gap: 18px; flex-wrap: wrap; }
.form-field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-muted); }
.form-field--grow { flex: 1; min-width: 220px; }
.form-input { padding: 14px 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--white); font-family: inherit; font-size: 14px; }
.form-input:focus { outline: none; border-color: var(--yellow-light); }
.form-textarea { resize: vertical; }
.form-submit { align-self: flex-start; border: none; cursor: pointer; }
.form-note { font-size: 13px; color: var(--text-muted); }
.form-stack.is-sent > :not(.form-note) { display: none; }
.form-stack.is-sent .form-note { font-size: 17px; line-height: 1.6; color: var(--white); text-align: center; padding: 24px 0; }

/* ─── HERO SCROLL CUE (shared by the home and solution heroes) ─── */
.hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 26px; height: 44px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 14px; z-index: 2; }
.hero-scroll span { position: absolute; top: 8px; left: 50%; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--white); animation: scroll-dot 1.8s ease-in-out infinite; }
@keyframes scroll-dot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .hero-scroll span { animation: none; } }

/* framed image used wherever a placeholder box used to be; aspect ratio comes from a .ph-* class */
.photo { width: 100%; overflow: hidden; border-radius: 18px; border: 1px solid var(--border); background: var(--blue-deep); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* looping animations are paused while their section is off screen (global.js adds .is-offscreen) */
.is-offscreen, .is-offscreen *, .is-offscreen::before, .is-offscreen::after { animation-play-state: paused !important; }

/* ─── INTERACTION POLISH ─── */
/* Cursor-follow glow on cards (global.js sets --mx/--my on fine-pointer devices) */
.sol-card:hover, .benefit:hover, .phase:hover, .compare-col:hover, .industry-card:hover {
  background-image: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(249,169,67,.09), transparent 65%);
}

/* Challenge / Solution pairs (detail.js) */
.pair-item { cursor: default; border-radius: 10px; margin-left: -10px; margin-right: -10px; padding: 6px 10px; transition: opacity .3s, background .3s, color .3s, box-shadow .3s; }
.pair-item:focus-visible { outline: 2px solid var(--yellow-light); outline-offset: 2px; }
.compare-grid.has-link .pair-item:not(.is-linked) { opacity: .42; }
.compare-col.problem .pair-item.is-linked { color: var(--white); background: rgba(255,255,255,.05); }
.compare-col.solution .pair-item.is-linked { color: var(--white); background: rgba(249,169,67,.12); box-shadow: inset 0 0 0 1px rgba(249,169,67,.35); }
.pair-hint { grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--text-dim); margin-top: -4px; }

/* ─── LEGAL TEXT (privacy policy) ─── */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { font-size: 18px; letter-spacing: .03em; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 15px; color: var(--text-muted); line-height: 1.8; }
.prose p { margin-bottom: 14px; }
.prose ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.prose li { position: relative; padding-left: 20px; }
.prose li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow-light); }
.prose strong { color: var(--white); font-weight: 700; }
.prose a { color: var(--yellow-light); }
.footer-legal { font-size: 11px; line-height: 1.8; }

/* ─── COOKIE CONSENT (consent.js) ─── */
.consent { position: fixed; left: 20px; bottom: 20px; z-index: 210; width: min(460px, calc(100vw - 32px)); padding: 24px 24px 20px; border-radius: 18px; background: rgba(10,26,34,.97); border: 1px solid var(--border-hover); box-shadow: 0 24px 60px -12px rgba(0,0,0,.65); animation: consent-in .45s cubic-bezier(.16,1,.3,1); max-height: calc(100vh - 40px); overflow-y: auto; }
@keyframes consent-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.consent-title { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--white); margin-bottom: 10px; }
.consent-text { font-size: 13px; line-height: 1.65; color: var(--text-muted); margin-bottom: 16px; }
.consent-text a { color: var(--yellow-light); }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-btn { flex: 1 1 0; justify-content: center; padding: 12px 16px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn-ghost.consent-btn { border: 1px solid var(--border-hover); }
.consent-link { display: block; margin-top: 14px; padding: 4px 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.consent-link:hover { color: var(--white); }
.consent-rows { display: flex; flex-direction: column; margin-bottom: 18px; border-top: 1px solid var(--border); }
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.consent-cat { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.consent-row p { font-size: 12px; line-height: 1.55; color: var(--text-muted); }
.consent-always { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.consent-switch { position: relative; flex-shrink: 0; width: 44px; height: 24px; border-radius: 999px; border: 1px solid var(--border-hover); background: rgba(255,255,255,.08); cursor: pointer; transition: background .2s, border-color .2s; padding: 0; }
.consent-switch i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); transition: transform .2s; }
.consent-switch[aria-checked="true"] { background: var(--yellow-light); border-color: var(--yellow-light); }
.consent-switch[aria-checked="true"] i { transform: translateX(20px); background: var(--blue-deep); }
.consent button:focus-visible, .consent a:focus-visible { outline: 2px solid var(--yellow-light); outline-offset: 2px; }
@media (max-width: 520px) { .consent { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 20px 18px 16px; } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } .consent-switch, .consent-switch i { transition: none; } }
.prose h3 { font-size: 15px; letter-spacing: .03em; margin: 28px 0 10px; }
.prose-rule { border: none; border-top: 1px solid var(--border); margin: 56px 0 40px; }
.prose-meta { font-size: 13px !important; color: var(--text-dim) !important; }
.prose .eyebrow { margin-bottom: 12px; }
.table-wrap { overflow-x: auto; margin: 20px 0 24px; border: 1px solid var(--border); border-radius: 14px; }
.prose table { width: 100%; min-width: 620px; border-collapse: collapse; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 14px 16px; font-size: 13px; line-height: 1.6; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.prose th { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); background: var(--surface); }
.prose tr:last-child td { border-bottom: none; }
.prose td:last-child { font-weight: 700; color: var(--white); white-space: nowrap; }

/* ─── LITE MODE (global.js adds .lite) ───
   Drops the costliest effects when the device or browser is struggling: no frosted blur, no looping
   float animations. Solid dark backgrounds stand in for the glass. */
.lite .topnav-bar, .lite .topnav-menu-panel, .lite .nav-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .topnav-bar { background: rgba(16,40,52,.84); box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); }
.lite .nav-overlay { background: rgba(6,19,24,.97); }
.lite .float-chip, .lite .hero-scroll span { animation: none; }
@media (prefers-reduced-transparency: reduce) {
  .topnav-bar, .topnav-menu-panel, .nav-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topnav-bar { background: rgba(16,40,52,.95); }
  .nav-overlay { background: rgba(6,19,24,.97); }
}