/* ==========================================================================
   Singula Decisions — site styles
   Design tokens + shared components, ported from the Claude Design handoff.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Brand / ink */
  --ink:        #0B2A33;   /* nav, hero, footer, dark cards */
  --navy-panel: #123842;   /* calculator results panel */
  --teal:       #06BEE1;   /* primary buttons, accents, full-stop dot */
  --teal-dark:  #0596B5;   /* hover, eyebrow labels on light */
  --teal-bright:#17C1DA;   /* heartbeat pulse */
  --teal-light: #7FD6E0;   /* accent text on navy */

  /* Surfaces */
  --page:  #F5F7F8;
  --tint:  #E4F1F2;
  --tint2: #EEF3F4;
  --white: #ffffff;

  /* Text */
  --heading:  #243039;
  --heading2: #142229;
  --body:     #5C6B72;
  --body2:    #4A5860;
  --muted:    #8A99A0;     /* secondary on light */
  --muted-2:  #7C8A91;
  --on-navy:  #CFDDE1;     /* hero subcopy */
  --on-navy-2:#A9BEC4;     /* nav links, calc body */
  --on-navy-3:#8FA6AD;

  /* Lines */
  --border:  #E7ECEE;
  --border-2:#DCE4E6;

  /* Lifecycle tints */
  --win-bg:#EAF6F7;  --win-br:#CDE7E9;
  --grow-bg:#D2EAEC; --grow-br:#B4DBDE;
  --keep-bg:#B7DDE1; --keep-br:#99CDD2;

  /* Type */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Shape */
  --maxw: 1425px;
  --pad: 32px;
  --nav-h: 80px;
  --shadow-card: 0 10px 26px rgba(20,34,41,.05);
  --shadow-card-lg: 0 12px 30px rgba(20,34,41,.06);
}

/* ---- Reset / base -------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--page);
  color: var(--heading2);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { text-decoration: none; color: inherit; transition: color .18s ease; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* accessible focus */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ---- Layout helpers ------------------------------------------------------ */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.container--narrow { max-width: 1100px; }
.container--tight  { max-width: 1000px; }

.section { padding: 82px 0; }
.section--tight { padding: 56px 0; }
.section--flush-top { padding-top: 40px; }

.bg-tint  { background: var(--tint); }
.bg-tint2 { background: var(--tint2); }
.bg-white { background: var(--white); }
.bg-ink   { background: var(--ink); color: #fff; }

.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

/* ---- Typography ---------------------------------------------------------- */
.eyebrow {
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 14px;
}
.eyebrow--wide { letter-spacing: 2.5px; }
.eyebrow--on-dark { color: var(--teal-light); font-weight: 600; }

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--teal-light); font-weight: 600; letter-spacing: 2px;
  font-size: 12px; text-transform: uppercase;
  border: 1px solid rgba(127,214,224,.3); padding: 6px 12px; border-radius: 20px;
}

/* display-heading size utilities (card titles) */
.hd { font-family: var(--font-display); color: var(--heading); font-weight: 700; letter-spacing: -.3px; }
.hd-24 { font-size: 24px; }
.hd-22 { font-size: 22px; }
.hd-21 { font-size: 21px; }
.hd-19 { font-size: 19px; }
.hd-17 { font-size: 17.5px; letter-spacing: normal; }

.dot { color: var(--teal); }          /* teal full-stop motif */
.accent { color: var(--teal-dark); }  /* teal text on light */
.accent-bright { color: var(--teal); }

.section-head { max-width: 680px; margin-bottom: 46px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08;
  letter-spacing: -.6px; color: var(--heading); margin-bottom: 14px;
}
.h2--xl { font-weight: 800; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.05; letter-spacing: -.8px; }
.lead { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 60ch; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 8px;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  /* These two exist because .btn is used on <button> as well as <a>. A <button>
     does not inherit font-family and defaults to the UA's light `buttonface`
     background, so without them the form submits and the cookie banner rendered
     in Arial, and .btn-secondary (which sets no background of its own) came out
     as white text on #EFEFEF. Variants that want a fill still override below. */
  background: transparent; font-family: inherit;
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); color: #fff; }

.btn-secondary { border-color: rgba(255,255,255,.28); color: #fff; font-weight: 600; padding: 13px 26px; }
.btn-secondary:hover { border-color: var(--teal); background: rgba(6,190,225,.12); color: #fff; }

.btn-dark { background: var(--ink); color: #fff; font-size: 16px; padding: 15px 34px; border-radius: 9px; }
.btn-dark:hover { background: #062028; color: #fff; }

/* ---- Header / nav -------------------------------------------------------- */
.site-header {
  background: var(--ink); position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 6px 22px rgba(11,42,51,.10);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; height: var(--nav-h);
  display: flex; align-items: center; padding: 0 var(--pad); gap: 30px;
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; }

.nav-wrap { display: flex; flex: 1; align-items: center; gap: 30px; }
.nav { display: flex; gap: 26px; margin-left: 4px; }
.nav a { color: var(--on-navy-2); font-size: 15px; font-weight: 600; letter-spacing: .1px; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.nav a:hover { color: #fff; }
.nav a.is-active { color: #fff; border-bottom-color: var(--teal); }

.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.btn-nav-ghost {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border: 1.5px solid var(--teal); color: var(--teal-light);
  font-weight: 700; font-size: 14px; padding: 11px 17px; border-radius: 8px;
}
.btn-nav-ghost:hover { background: rgba(6,190,225,.16); color: #fff; }
/* "The Singula effect" — live heartbeat pulse on the activity icon + soft glow */
@keyframes navEffectBeat {
  0%, 42%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(6,190,225,0)); }
  12% { transform: scale(1.28); filter: drop-shadow(0 0 5px rgba(6,190,225,.9)); }
  24% { transform: scale(1); }
  32% { transform: scale(1.15); filter: drop-shadow(0 0 3px rgba(6,190,225,.6)); }
}
@keyframes navEffectGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6,190,225,0); }
  50% { box-shadow: 0 0 16px 0 rgba(6,190,225,.28); }
}
.btn-nav-ghost svg { transform-origin: center; overflow: visible; animation: navEffectBeat 2.4s ease-in-out infinite; }
.btn-nav-ghost { animation: navEffectGlow 2.4s ease-in-out infinite; }
.btn-nav-ghost:hover svg, .btn-nav-ghost:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .btn-nav-ghost, .btn-nav-ghost svg { animation: none; } }
.btn-nav-solid {
  white-space: nowrap; background: var(--teal); color: #fff;
  font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 8px;
}
.btn-nav-solid:hover { background: var(--teal-dark); color: #fff; }

.nav-toggle {
  display: none; margin-left: auto; width: 42px; height: 38px;
  background: transparent; border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 7px; cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

/* Sub-nav (Partners) */
.subnav {
  background: #0F3540; border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top: var(--nav-h); z-index: 49;
}
.subnav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); height: 48px; display: flex; align-items: center; gap: 22px; }
.subnav-label { font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal-light); }
.subnav a { color: #9FC0C6; font-size: 13.5px; font-weight: 600; }
.subnav a:hover { color: #fff; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; right: -160px; top: -140px; width: 600px; height: 600px;
  border-radius: 50%; background: radial-gradient(circle at center, rgba(6,190,225,.26), transparent 60%);
  pointer-events: none;
}
.hero--dual::after {
  content: ""; position: absolute; left: -140px; bottom: -200px; width: 480px; height: 480px;
  border-radius: 50%; background: radial-gradient(circle at center, rgba(6,190,225,.12), transparent 62%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 80px var(--pad) 70px; }
.hero-inner--split {
  padding: 72px var(--pad) 78px;
  display: grid; grid-template-columns: 1fr 1.04fr; gap: 44px; align-items: center;
}

.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(44px, 6vw, 74px); line-height: 1; letter-spacing: -1.4px;
  margin-bottom: 22px;
}
.hero--home h1 { font-size: clamp(46px, 6vw, 78px); line-height: .98; letter-spacing: -1.5px; margin: 24px 0 22px; }
.hero h1 .accent-bright, .hero h1 span.accent-bright { color: var(--teal); }

.hero-sub { font-size: 19px; line-height: 1.6; color: var(--on-navy); max-width: 62ch; margin-bottom: 34px; }
.hero-sub--lead { font-size: 20px; max-width: 46ch; margin-bottom: 14px; font-weight: 500; }
.hero-sub--fine { font-size: 15.5px; color: var(--on-navy-3); max-width: 54ch; margin-bottom: 30px; }

.hero-badge-row { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.pill-preview { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); background: var(--teal-light); padding: 3px 9px; border-radius: 20px; }

.btn-row { display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 34px; }
.btn-row--flush { margin-bottom: 0; }

/* hero stat strip */
.stat-strip { display: flex; gap: 26px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.stat-strip--wide { gap: 14px 44px; padding-top: 28px; }
.stat-mini { display: flex; align-items: center; gap: 9px; }
.stat-mini .ico { width: 30px; height: 30px; border-radius: 8px; background: rgba(6,190,225,.16); color: var(--teal-light); display: flex; align-items: center; justify-content: center; }
.stat-mini .t { font-size: 14px; font-weight: 700; }
.stat-mini .s { font-size: 11.5px; color: var(--on-navy-3); }

.stat-num { }
.stat-num .n { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--teal-light); line-height: 1; }
.stat-num .l { font-size: 13px; color: var(--on-navy-3); margin-top: 4px; }

/* hero product image + floating badge (home) */
.hero-visual { position: relative; }
.hero-frame { border-radius: 14px; border: 1px solid #1c4651; box-shadow: 0 40px 80px rgba(0,0,0,.5); overflow: hidden; background: #000; }
.hero-float {
  position: absolute; left: -22px; bottom: 34px; background: #fff; color: var(--heading2);
  border-radius: 12px; padding: 14px 18px; box-shadow: 0 20px 40px rgba(0,0,0,.28);
  display: flex; align-items: center; gap: 12px;
}
.hero-float .ico { width: 38px; height: 38px; border-radius: 9px; background: #E4F4F6; color: var(--teal-dark); display: flex; align-items: center; justify-content: center; }
.hero-float .big { font-size: 20px; font-weight: 800; font-family: var(--font-display); line-height: 1; }
.hero-float .small { font-size: 12px; color: var(--body); }

/* hero art-directed product panel (home) */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero-panel { position: relative; background: #fff; border-radius: 18px; box-shadow: 0 40px 90px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.6); overflow: hidden; }

/* Approach hero — "three numbers" (Win / Grow / Keep) panel */
.hero-visual--three { display: flex; justify-content: center; }
.tn-panel { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 18px; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 40px 90px rgba(0,0,0,.5); padding: 24px 26px 22px; }
.tn-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tn-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.tn-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--teal-dark); }
.tn-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-dark); animation: tnpulse 2.1s infinite; }
@keyframes tnpulse { 0% { box-shadow: 0 0 0 0 rgba(5,150,181,.45); } 70% { box-shadow: 0 0 0 8px rgba(5,150,181,0); } 100% { box-shadow: 0 0 0 0 rgba(5,150,181,0); } }
.tn-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 16px 2px; border-top: 1px solid var(--border); }
.tn-row:first-of-type { border-top: 0; }
.tn-meta { display: flex; align-items: center; gap: 12px; }
.tn-step { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--tint); color: var(--teal-dark); font-family: var(--font-display); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.tn-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--heading); line-height: 1; }
.tn-sub { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.tn-spark { width: 100%; height: 32px; overflow: visible; }
.tn-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #159A6E; white-space: nowrap; }
.tn-delta svg { width: 15px; height: 15px; }
.tn-foot { margin-top: 14px; padding-top: 15px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--body); line-height: 1.5; }
.tn-foot b { color: var(--heading); font-weight: 700; }
.tn-badge { position: absolute; left: -22px; bottom: 30px; display: flex; align-items: center; gap: 11px; background: var(--ink); border-radius: 13px; padding: 12px 15px; box-shadow: 0 18px 42px rgba(0,0,0,.42); }
.tn-badge .bic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: rgba(6,190,225,.18); color: var(--teal-light); display: flex; align-items: center; justify-content: center; }
.tn-badge .bt { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff; line-height: 1; }
.tn-badge .bs { font-size: 11px; color: var(--on-navy-3); margin-top: 4px; }

/* Psychology hero — stacked report "book" mockup (covers superimposed) */
.hero-visual--reports { display: flex; justify-content: center; align-items: center; }
.rpt-stack { position: relative; width: min(100%, 460px); transform: rotate(-3deg); }
.rpt-book { border-radius: 5px 9px 9px 5px; background-size: cover; background-position: center; box-shadow: 3px 0 0 #ece6da, 6px 0 0 #e2dccd, 9px 0 0 #d7d0be, 11px 2px 0 #cfc7b3, 0 42px 70px rgba(0,0,0,.55); }
.rpt-book::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(0,0,0,.28) 55%, rgba(0,0,0,0)); border-radius: 5px 0 0 5px; pointer-events: none; }
.rpt-book--front { position: relative; z-index: 3; aspect-ratio: 1.41 / 1; }
.rpt-book--mid, .rpt-book--back { position: absolute; inset: 0; }
.rpt-book--mid { z-index: 2; transform: translate(-7%, -8%) rotate(-4deg) scale(.965); }
.rpt-book--back { z-index: 1; transform: translate(-13.5%, -16%) rotate(-8deg) scale(.93); }
.rpt-book--mid::after, .rpt-book--back::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(9,25,31,.34); pointer-events: none; }
.rpt-book--back::after { background: rgba(9,25,31,.5); }
.rpt-tag { position: absolute; right: -14px; bottom: 22px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--heading); font-size: 12px; font-weight: 700; padding: 9px 14px; border-radius: 999px; box-shadow: 0 16px 34px rgba(0,0,0,.34); transform: rotate(3deg); }
.rpt-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-dark); }

/* Careers hero — framed team photo with floating badge */
.hero-visual--photo { display: flex; justify-content: center; }
.hero-photo { position: relative; width: 100%; max-width: 540px; }
.hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: 18px; box-shadow: 0 40px 90px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.14); }
.hero-photo .hp-badge { position: absolute; left: -20px; bottom: 26px; display: flex; align-items: center; gap: 11px; background: #fff; border-radius: 13px; padding: 12px 16px; box-shadow: 0 20px 44px rgba(0,0,0,.4); }
.hero-photo .hp-badge .ic { flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--tint); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; }
.hero-photo .hp-badge .t { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--heading); line-height: 1; }
.hero-photo .hp-badge .s { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* Careers hero — culture / values panel */
.hero-visual--culture { display: flex; justify-content: center; }
.cult-panel { width: 100%; max-width: 460px; background: #fff; border-radius: 18px; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 40px 90px rgba(0,0,0,.5); padding: 24px 24px 22px; }
.cult-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cult-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.cult-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cult-val { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--tint2); border: 1px solid var(--border); border-radius: 13px; }
.cult-val .ci { width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--teal-dark); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(11,42,51,.06); }
.cult-val .cv { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; color: var(--heading); line-height: 1.2; }
.cult-foot { display: flex; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.cult-foot > div { flex: 1; }
.cult-foot b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--teal-dark); line-height: 1; }
.cult-foot span { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }

/* Success hero — proof / results card */
.hero-visual--proof { display: flex; justify-content: center; }
.pf-panel { width: 100%; max-width: 440px; background: #fff; border-radius: 18px; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 40px 90px rgba(0,0,0,.5); padding: 22px 26px 18px; }
.pf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pf-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.pf-row { display: flex; align-items: center; gap: 18px; padding: 15px 2px; border-top: 1px solid var(--border); }
.pf-row:first-of-type { border-top: 0; }
.pf-n { flex: none; min-width: 92px; font-family: var(--font-display); font-weight: 800; font-size: 33px; letter-spacing: -1px; color: var(--teal-dark); line-height: 1; }
.pf-l { font-size: 13.5px; color: var(--body); line-height: 1.4; }
.pf-who { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

/* Partners hero — "complete your stack" layer diagram */
.hero-visual--stack { display: flex; justify-content: center; }
.pstack-panel { width: 100%; max-width: 440px; background: #fff; border-radius: 18px; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 40px 90px rgba(0,0,0,.5); padding: 24px 24px 22px; }
.pstack-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pstack-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.pstack-layers { display: flex; flex-direction: column; gap: 9px; }
.pstack-layer { display: flex; align-items: center; gap: 13px; padding: 14px 15px; border-radius: 12px; border: 1px solid var(--border); background: var(--tint2); }
.pstack-layer .li { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--muted); box-shadow: 0 2px 6px rgba(11,42,51,.06); }
.pstack-layer .lt { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; color: var(--heading); line-height: 1.1; }
.pstack-layer .ls { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.pstack-layer--you { border-style: dashed; background: #fff; }
.pstack-layer--sg { background: linear-gradient(120deg,#EAF7F8,#D8EEF0); border-color: rgba(5,150,181,.35); }
.pstack-layer--sg .li { background: var(--teal-dark); color: #fff; }
.pstack-plus { text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--teal-dark); margin: 2px 0; }
.pstack-foot { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--body); line-height: 1.45; }
.pstack-foot .chk { flex: none; color: var(--teal-dark); display: flex; }
.hp-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--tint2); background: #FAFCFC; }
.hp-top .t { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--heading); letter-spacing: .2px; }
.hp-top .t .ic { color: var(--teal); display: flex; }
.hp-top .upd { font-size: 11.5px; color: var(--on-navy-3); font-weight: 600; }
.hp-body { padding: 20px 20px 24px; }
.hp-identity { display: flex; align-items: center; gap: 13px; }
.hp-avatar { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 17px; flex: none; }
.hp-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--heading2); }
.hp-sub { font-size: 12.5px; color: var(--body); }
.hp-risk { display: inline-flex; align-items: center; gap: 5px; background: #FFF3E0; color: #B5630A; font-weight: 700; font-size: 11px; letter-spacing: .4px; padding: 5px 10px; border-radius: 20px; text-transform: uppercase; white-space: nowrap; }
.hp-nba { margin-top: 16px; background: linear-gradient(135deg, #EAF7F8, #D8EEF0); border: 1px solid #BFE3E6; border-radius: 13px; padding: 14px 15px; display: flex; align-items: center; gap: 13px; }
.hp-nba .nba-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.hp-nba .kick { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal-dark); }
.hp-nba .title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--heading2); margin-top: 2px; }
.hp-nba .reason { font-size: 12px; line-height: 18px; color: var(--body); margin-top: 1px; min-height: 36px; }
.hp-nba .trigger { background: var(--teal); color: #fff; font-weight: 700; font-size: 12.5px; padding: 8px 14px; border-radius: 7px; white-space: nowrap; }
.hp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.hp-tile { border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; }
.hp-tile .lbl { font-size: 11.5px; color: var(--on-navy-3); font-weight: 600; }
.hp-tile .row { display: flex; align-items: center; justify-content: space-between; }
.hp-rising { display: inline-flex; align-items: center; gap: 3px; color: #1F8A5B; font-size: 11px; font-weight: 700; }
.hp-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 8px; }
.hp-spark span { flex: 1; border-radius: 2px; }
.hp-big { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--heading2); margin-top: 6px; }
.hp-big small { font-size: 13px; color: var(--body); font-weight: 600; }
.hp-health { display: inline-flex; align-items: center; gap: 5px; color: #1F8A5B; font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-top: 8px; }

.hero-chip { position: absolute; top: -22px; left: -30px; background: var(--ink); border: 1px solid rgba(23,193,218,.4); border-radius: 14px; padding: 13px 16px; box-shadow: 0 22px 44px rgba(0,0,0,.4); animation: floaty 5.5s ease-in-out infinite; display: flex; align-items: center; gap: 12px; }
.hero-chip .ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(23,193,218,.18); display: flex; align-items: center; justify-content: center; color: var(--teal-bright); flex: none; }
.hero-chip .kick { font-size: 11px; color: var(--teal-light); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.hero-chip .val { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #fff; line-height: 1.1; }
.hero-chip .val small { font-size: 12px; color: #7C939A; font-weight: 600; margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .hero-chip { animation: none; } }

/* Platform hero — Customer 360 account record */
.crm-status { display: inline-flex; align-items: center; gap: 5px; background: #E7F6EE; color: #1F8A5B; font-weight: 700; font-size: 11px; letter-spacing: .4px; padding: 5px 10px; border-radius: 20px; text-transform: uppercase; white-space: nowrap; }
.crm-plan { margin-top: 16px; background: linear-gradient(135deg, #EAF7F8, #D8EEF0); border: 1px solid #BFE3E6; border-radius: 13px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.crm-eb { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal-dark); }
.crm-plan-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--heading2); margin-top: 3px; }
.crm-plan-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--body); margin-top: 4px; }
.crm-plan-meta svg { color: var(--teal-dark); }
.crm-price { flex: none; font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--heading2); line-height: 1; }
.crm-price small { font-size: 12px; color: var(--body); font-weight: 600; }
.crm-pay { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--heading2); margin-top: 8px; }
.crm-cardic { width: 26px; height: 26px; border-radius: 7px; background: var(--tint2); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; flex: none; }
.crm-ent { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.crm-ent span { display: inline-flex; align-items: center; gap: 4px; background: var(--tint2); color: var(--heading2); font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 7px; }
.crm-ent span svg { color: var(--teal-dark); }

/* Singula IQ hero — Insight Dashboard showcase card */
.insight-dash { position: relative; z-index: 2; max-width: 1004px; margin: 44px auto 0; padding: 44px var(--pad) 56px; }
.idash { position: relative; width: 100%; max-width: 940px; margin: 0 auto; }
.idash-badge { position: absolute; top: -36px; left: -18px; z-index: 3; display: flex; align-items: center; gap: 15px; padding: 15px 24px; border-radius: 15px; background: var(--ink); box-shadow: 0 22px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(34,211,238,.16); }
.idash-badge .ic { width: 46px; height: 46px; border-radius: 11px; background: rgba(34,211,238,.14); display: flex; align-items: center; justify-content: center; flex: none; color: #22D3EE; }
.idash-badge .eb { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: #7FB8C4; }
.idash-badge .valrow { display: flex; align-items: baseline; gap: 9px; margin-top: 2px; }
.idash-badge .val { font-family: var(--font-display); font-size: 27px; font-weight: 800; color: #EAF6F9; line-height: 1; }
.idash-badge .per { font-size: 13px; font-weight: 500; color: #7FB8C4; }

.idash-card { position: relative; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.idash-strip { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; border-bottom: 1px solid #EEF2F3; background: linear-gradient(180deg,#FBFDFD,#FFFFFF); }
.idash-strip .grp { display: flex; align-items: center; gap: 11px; }
.idash-strip .tile { width: 30px; height: 30px; border-radius: 8px; background: var(--teal); display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.idash-strip .name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.idash-strip .muted { font-size: 13px; font-weight: 500; color: #94A6AC; }
.idash-strip .muted--r { font-size: 14px; }

.idash-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; padding: 26px 32px 22px; }
.idash-kpi { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.idash-kpi .lbl { font-size: 13px; font-weight: 600; color: #7A8B91; }
.idash-kpi .val { font-family: var(--font-display); font-weight: 800; font-size: 27px; color: var(--ink); line-height: 1; margin-top: 10px; }
.idash-kpi .delta { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-family: var(--font-display); font-weight: 700; font-size: 13px; }

.idash-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; padding: 4px 32px 30px; }
.idash-panel { border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px 22px; }
.idash-panel .phead { display: flex; align-items: center; justify-content: space-between; }
.idash-panel .ptitle { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.idash-legend { display: flex; gap: 14px; font-size: 12px; font-weight: 600; color: #7A8B91; }
.idash-legend span { display: inline-flex; align-items: center; gap: 6px; }
.idash-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.idash-chart { margin-top: 16px; }
.idash-chart svg { display: block; width: 100%; }
.idash-drivers { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.idash-driver .drow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.idash-driver .dlabel { font-size: 14px; font-weight: 600; color: #425059; }
.idash-driver .dpct { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.idash-driver .dtrack { height: 8px; border-radius: 5px; background: #EEF3F4; overflow: hidden; }
.idash-driver .dfill { height: 100%; border-radius: 5px; }

.idash-action { margin: 0 32px 30px; display: flex; align-items: center; gap: 20px; padding: 20px 24px; border-radius: 16px; background: linear-gradient(180deg,#E4F6F9,#EAF7F9); }
.idash-action .aic { width: 50px; height: 50px; border-radius: 13px; background: var(--teal); display: flex; align-items: center; justify-content: center; flex: none; color: #fff; box-shadow: 0 8px 18px rgba(6,190,225,.35); }
.idash-action .aeb { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 1.4px; color: var(--teal-dark); }
.idash-action .atitle { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); margin-top: 4px; line-height: 1.2; }
.idash-action .asub { font-size: 14px; font-weight: 500; color: #5F787E; margin-top: 4px; }
.idash-action .abtn { flex: none; border: none; cursor: pointer; display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; background: var(--teal); padding: 14px 26px; border-radius: 11px; box-shadow: 0 8px 18px rgba(6,190,225,.35); transition: background .18s ease; }
.idash-action .abtn:hover { background: var(--teal-dark); color: #fff; }

/* IQ dashboard sits in the hero's right column at the SAME width as the home
   hero panel (no widening); the chart fills its panel and the stacked sections
   are tightened so the card stays close to the home panel's size. */
.hero-inner--split:has(.hero-visual--dash) { grid-template-columns: 1.02fr .98fr; }
.hero-visual .idash { max-width: none; width: 100%; margin: 16px 0 0; }
.hero-visual .idash-badge { top: -30px; left: -14px; padding: 13px 20px; }
.hero-visual .idash-badge .ic { width: 42px; height: 42px; }
.hero-visual .idash-badge .val { font-size: 24px; }
.hero-visual .idash-strip { padding: 15px 24px; }
.hero-visual .idash-kpis { gap: 12px; padding: 20px 24px 14px; }
.hero-visual .idash-kpi { padding: 13px 14px; }
.hero-visual .idash-kpi .lbl { font-size: 12px; }
.hero-visual .idash-kpi .val { font-size: 22px; margin-top: 7px; }
.hero-visual .idash-kpi .delta { margin-top: 7px; font-size: 12px; }
.hero-visual .idash-grid { gap: 16px; padding: 2px 24px 20px; }
.hero-visual .idash-panel { padding: 16px 18px; }
.hero-visual .idash-drivers { gap: 12px; margin-top: 14px; }
.hero-visual .idash-driver .drow { margin-bottom: 6px; }
.hero-visual .idash-action { margin: 0 24px 22px; padding: 16px 18px; gap: 16px; }
.hero-visual .idash-action .aic { width: 44px; height: 44px; }
.hero-visual .idash-action .atitle { font-size: 16px; }
.hero-visual .idash-action .asub { font-size: 12.5px; margin-top: 3px; }
/* chart fills its panel (no dead whitespace) + tighter stacked sections */
.hero-visual .idash-strip { padding: 12px 22px; }
.hero-visual .idash-grid { grid-template-columns: 1.5fr 1fr; padding-top: 2px; padding-bottom: 16px; }
.hero-visual .idash-grid .idash-panel:first-child { display: flex; flex-direction: column; }
.hero-visual .idash-panel { padding: 15px 16px; }
.hero-visual .idash-chart { flex: 1; min-height: 0; margin-top: 12px; }
.hero-visual .idash-chart svg { height: 100%; }
.hero-visual .idash-kpis { padding-top: 14px; padding-bottom: 10px; }
.hero-visual .idash-kpi { padding: 11px 13px; }
.hero-visual .idash-kpi .lbl { font-size: 11.5px; line-height: 1.35; min-height: 31px; }
.hero-visual .idash-kpi .val { font-size: 21px; margin-top: 6px; }
.hero-visual .idash-drivers { gap: 9px; }
.hero-visual .idash-driver .drow { margin-bottom: 5px; }
.hero-visual .idash-action { margin-bottom: 18px; padding: 13px 18px; }
.hero-visual .idash-action .aic { width: 40px; height: 40px; }
.hero-visual .idash-action .atitle { font-size: 15px; }

/* Singula IQ gradient "IQ." brand mark (hero) */
.iq-mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(150deg, #22D3EE 0%, #06BEE1 48%, #0596B5 100%); box-shadow: 0 18px 36px rgba(6,190,225,.34); font-family: var(--font-display); font-weight: 900; font-size: 27px; letter-spacing: -1px; line-height: 1; color: #fff; margin-bottom: 22px; }
.iq-mark .dot { color: var(--ink); }
.iq-mark--sm { width: 50px; height: 50px; border-radius: 13px; font-size: 21px; letter-spacing: -.8px; box-shadow: 0 10px 22px rgba(6,190,225,.3); margin-bottom: 0; }

/* home hero panel: smooth transitions for the healthy → at-risk state animation */
.hp-risk, .hp-rising, .hp-health { transition: color .38s ease, background-color .38s ease; }
.hp-spark span { transition: height .55s cubic-bezier(.2,.7,.2,1), background-color .55s ease; }

/* Contact Centre hero — chat / Next Best Action card */
.cc-chat { width: 100%; max-width: 500px; margin: 0 0 0 auto; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); display: flex; flex-direction: column; }
.cc-intent { display: flex; align-items: center; gap: 12px; padding: 13px 22px; background: var(--ink); }
.cc-intent .ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(34,211,238,.14); display: flex; align-items: center; justify-content: center; flex: none; color: #22D3EE; }
.cc-intent .eb { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; color: #7FB8C4; }
.cc-intent .val { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: #EAF6F9; line-height: 1.1; margin-top: 2px; }
.cc-intent .pct { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #22D3EE; flex: none; margin-left: auto; }
.cc-head { display: flex; align-items: center; gap: 12px; padding: 13px 22px; border-bottom: 1px solid #EEF2F3; background: linear-gradient(180deg,#FBFDFD,#FFFFFF); }
.cc-head .av { width: 38px; height: 38px; border-radius: 11px; background: var(--teal); display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #fff; }
.cc-head .name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.cc-head .meta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #7A8B91; margin-top: 2px; }
.cc-head .live { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.cc-head .risk { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .7px; color: #B9741F; background: #FDF1E3; padding: 6px 11px; border-radius: 999px; flex: none; margin-left: auto; }
.cc-msgs { display: flex; flex-direction: column; gap: 10px; padding: 16px 22px; background: #F7FAFB; }
.cc-msg { max-width: 82%; }
.cc-msg.them { align-self: flex-start; }
.cc-msg.us { align-self: flex-end; }
.cc-b-them { background: #fff; border: 1px solid #E7ECEE; border-radius: 4px 15px 15px 15px; padding: 11px 14px; font-size: 13.5px; line-height: 1.45; color: #33434A; }
.cc-b-us { background: var(--teal); border-radius: 15px 15px 4px 15px; padding: 11px 14px; font-size: 13.5px; line-height: 1.45; color: #fff; }
.cc-time { font-size: 11px; color: #9DADB3; margin-top: 4px; }
.cc-typing { align-self: flex-end; display: flex; align-items: center; gap: 6px; padding: 9px 13px; background: #E4F6F9; border-radius: 15px 15px 4px 15px; }
.cc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.cc-typing span:nth-child(2) { opacity: .55; } .cc-typing span:nth-child(3) { opacity: .3; }
.cc-assist { padding: 15px 22px 18px; background: linear-gradient(180deg,#FFFFFF,#F4FBFC); border-top: 1px solid #EEF2F3; }
.cc-assist .ahead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cc-assist .abot { width: 26px; height: 26px; border-radius: 8px; background: rgba(6,190,225,.14); display: flex; align-items: center; justify-content: center; color: var(--teal-dark); }
.cc-assist .atitle { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.cc-assist .nba-tag { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 1.2px; color: var(--teal-dark); background: #E4F6F9; padding: 4px 9px; border-radius: 999px; margin-left: auto; }
.cc-nba { border-radius: 15px; background: linear-gradient(180deg,#E4F6F9,#EAF7F9); padding: 17px 18px 18px; }
.cc-nba .t { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); line-height: 1.2; }
.cc-nba .s { font-size: 13.5px; font-weight: 500; color: #5F787E; margin-top: 6px; line-height: 1.5; }
.cc-nba .btns { display: flex; gap: 9px; margin-top: 14px; }
.cc-nba .b-send { flex: 1; border: none; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: #fff; background: var(--teal); padding: 11px 14px; border-radius: 10px; box-shadow: 0 8px 18px rgba(6,190,225,.35); transition: background .18s ease; }
.cc-nba .b-send:hover { background: var(--teal-dark); }
.cc-nba .b-alt { border: 1px solid #BFD9DE; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--teal-dark); background: #fff; padding: 11px 14px; border-radius: 10px; }
.cc-nba .b-alt:hover { background: #F2FAFB; }

@media (max-width: 860px) {
  .insight-dash { padding-left: 20px; padding-right: 20px; }
  .idash-badge { top: -26px; left: 6px; padding: 12px 18px; }
  .idash-badge .ic { width: 40px; height: 40px; }
  .idash-badge .val { font-size: 23px; }
  .idash-kpis { grid-template-columns: 1fr 1fr; }
  .idash-grid { grid-template-columns: 1fr; }
  .idash-strip, .idash-kpis, .idash-grid { padding-left: 20px; padding-right: 20px; }
  .idash-action { margin-left: 20px; margin-right: 20px; flex-wrap: wrap; }
  .idash-action .abtn { width: 100%; justify-content: center; }
}

/* ---- Cards --------------------------------------------------------------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 30px 28px; box-shadow: var(--shadow-card); }

/* ---- Video thumbnail + lightbox (landing hero) -------------------------- */
.video-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid rgba(255,255,255,.14); cursor: pointer; border-radius: 16px; overflow: hidden; background: linear-gradient(140deg, #0B2A33 0%, #103b47 55%, #0596B5 135%); box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.video-thumb .video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-thumb .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.55); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.video-thumb .video-play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(23,193,218,.5); animation: videoPing 2.4s ease-out infinite; }
.video-thumb .video-play svg { margin-left: 4px; }
.video-thumb:hover .video-play { transform: translate(-50%,-50%) scale(1.08); background: var(--teal); border-color: var(--teal); }
.video-thumb .video-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(0deg, rgba(3,18,22,.72), transparent); }
@keyframes videoPing { 0% { transform: scale(1); opacity: .8; } 70%,100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .video-thumb .video-play::before { animation: none; } }

.video-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 28px; background: rgba(4,18,22,.88); }
.video-modal.open { display: flex; }
.vm-frame { position: relative; width: 100%; max-width: 980px; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.vm-body, .vm-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.vm-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 10px; border: none; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vm-close:hover { background: rgba(0,0,0,.7); }
.vm-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #EAF6F9; background: linear-gradient(140deg, #0B2A33, #0596B5); }
.vm-placeholder p { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.vm-placeholder .s { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: #A9BEC4; margin-top: 8px; max-width: 40ch; }
.vm-placeholder code { background: rgba(255,255,255,.12); padding: 1px 6px; border-radius: 5px; }

/* ---- Landing-page inline form ------------------------------------------- */
.lf-panel { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 32px 30px; box-shadow: var(--shadow-card-lg); }
.lf-form .lf-field { margin-bottom: 15px; }
.lf-form label { display: block; font-size: 14px; font-weight: 700; color: var(--heading); margin-bottom: 7px; }
.lf-form input, .lf-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #D3DEE0; border-radius: 9px; font-size: 15px; font-family: inherit; color: var(--heading2); background: #fff; }
.lf-form input:focus, .lf-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(6,190,225,.14); }
.lf-form textarea { min-height: 92px; resize: vertical; }
.lf-form .lf-field.invalid input, .lf-form .lf-field.invalid textarea { border-color: #C0392B; }
.lf-form .lf-err { color: #C0392B; font-size: 12.5px; margin-top: 6px; display: none; }
.lf-form .lf-field.invalid .lf-err { display: block; }
.lf-form .lf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--body); margin: 4px 0 18px; }
.lf-form .lf-consent input { width: auto; margin-top: 2px; flex: none; }
.lf-form .lf-formerror { color: #C0392B; font-size: 13.5px; line-height: 1.5; margin: 0 0 12px; display: none; }
.lf-form .lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-form button[type="submit"] { width: 100%; justify-content: center; }
.lf-success { text-align: center; padding: 26px 6px; }
.lf-success .tick { width: 54px; height: 54px; border-radius: 50%; background: #E6F6EE; color: #1F8A5B; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.lf-success h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--heading); margin-bottom: 8px; outline: none; }
.lf-success p { font-size: 15px; color: var(--body); line-height: 1.55; max-width: 40ch; margin: 0 auto; }

/* ---- Landing colour themes (add class to <body>; keeps the navy base, swaps the accent) --- */
/* VIOLET */
body.theme-violet { --teal: #7C5CFF; --teal-dark: #5E3FE0; --teal-light: #C9BBFF; --teal-bright: #8E72FF; --tint: #ECEAFB; --tint2: #F2F0FC; }
body.theme-violet .hero::before { background: radial-gradient(circle at center, rgba(124,92,255,.28), transparent 60%); }
body.theme-violet .ico-teal { background: #ECEAFB; }
body.theme-violet .btn-secondary:hover { background: rgba(124,92,255,.14); }
body.theme-violet .eyebrow-pill { border-color: rgba(201,187,255,.35); }
body.theme-violet .video-thumb { background: linear-gradient(140deg, #0B2A33 0%, #2a2350 55%, #7C5CFF 135%); }
body.theme-violet .video-thumb .video-play::before { border-color: rgba(142,114,255,.55); }
body.theme-violet .vm-placeholder { background: linear-gradient(140deg, #0B2A33, #5E3FE0); }
body.theme-violet .lf-form input:focus, body.theme-violet .lf-form textarea:focus { box-shadow: 0 0 0 3px rgba(124,92,255,.16); }
body.theme-violet .lf-success .tick { background: #ECEAFB; color: #5E3FE0; }

/* CORAL / SUNSET */
body.theme-coral { --teal: #FF6B57; --teal-dark: #E1503C; --teal-light: #FFC2B8; --teal-bright: #FF7E6B; --tint: #FDEDEA; --tint2: #FCF1EF; }
body.theme-coral .hero::before { background: radial-gradient(circle at center, rgba(255,107,87,.26), transparent 60%); }
body.theme-coral .ico-teal { background: #FDECE9; }
body.theme-coral .btn-secondary:hover { background: rgba(255,107,87,.14); }
body.theme-coral .eyebrow-pill { border-color: rgba(255,194,184,.4); }
body.theme-coral .video-thumb { background: linear-gradient(140deg, #0B2A33 0%, #3a2420 55%, #FF6B57 135%); }
body.theme-coral .video-thumb .video-play::before { border-color: rgba(255,126,107,.55); }
body.theme-coral .vm-placeholder { background: linear-gradient(140deg, #0B2A33, #E1503C); }
body.theme-coral .lf-form input:focus, body.theme-coral .lf-form textarea:focus { box-shadow: 0 0 0 3px rgba(255,107,87,.16); }
body.theme-coral .lf-success .tick { background: #FDECE9; color: #E1503C; }
/* subtle hover lift on content cards — snappy transform, works alongside scroll-reveal */
.card, .stat-card, .outcome-card, .number-card, .tool-card, .proof-item,
.reveal.card, .reveal.stat-card, .reveal.outcome-card, .reveal.number-card, .reveal.tool-card, .reveal.proof-item {
  transition: opacity .5s cubic-bezier(.2,.6,.2,1), transform .22s ease, box-shadow .22s ease, border-color .18s ease;
}
.card:hover, .stat-card:hover, .outcome-card:hover, .number-card:hover, .tool-card:hover, .proof-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-lg); }
@media (prefers-reduced-motion: reduce) { .card:hover, .stat-card:hover, .outcome-card:hover, .number-card:hover, .tool-card:hover, .proof-item:hover { transform: none; } }
.card--lg { border-radius: 18px; padding: 36px 34px; box-shadow: var(--shadow-card-lg); }
.card--flat { box-shadow: none; }
.card--soft { background: #F7FAFB; border-radius: 14px; box-shadow: none; }
.card--pale { background: #fff; border-color: #D2E6E7; }
.card-dark { background: var(--ink); border: 1px solid var(--ink); border-radius: 18px; padding: 36px 34px; box-shadow: 0 16px 34px rgba(11,42,51,.2); color: #fff; }

.card h3 { font-family: var(--font-display); color: var(--heading); }

/* lifecycle tint cards */
.tint-win  { background: var(--win-bg);  border-color: var(--win-br); }
.tint-grow { background: var(--grow-bg); border-color: var(--grow-br); }
.tint-keep { background: var(--keep-bg); border-color: var(--keep-br); }

/* icon tiles */
.ico-tile { display: flex; align-items: center; justify-content: center; flex: none; }
.ico-tile--sm { width: 44px; height: 44px; border-radius: 11px; }
.ico-tile--md { width: 50px; height: 50px; border-radius: 13px; }
.ico-tile--lg { width: 52px; height: 52px; border-radius: 13px; }
.ico-teal { background: #E4F4F6; color: var(--teal-dark); }
.ico-ink  { background: var(--ink); color: var(--teal-light); }
.ico-ink-soft { background: rgba(6,190,225,.18); color: var(--teal-light); }

/* pills / chips */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--teal-dark); background: #E4F4F6; padding: 5px 13px; border-radius: 20px; }
.pill--sm { font-size: 11px; letter-spacing: .5px; padding: 4px 11px; }
.pill--solid { color: #fff; background: var(--teal-dark); text-transform: uppercase; }
.pill--flag { color: #fff; background: var(--teal-dark); text-transform: uppercase; }
.pill--on-dark { color: var(--teal-light); background: rgba(6,190,225,.18); }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--heading); background: #fff; border: 1px solid var(--border); padding: 9px 13px; border-radius: 10px; box-shadow: 0 1px 2px rgba(20,34,41,.04); }
.chip .ic { display: flex; color: var(--teal-dark); flex: none; }
.chip.is-warn .ic { color: #C6701A; }

.kicker { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 8px; }
.sublabel { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

/* check list */
.check-list { display: flex; flex-direction: column; gap: 13px; }
.check-list li { display: flex; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--body2); }
.check-list .ck { flex: none; color: var(--teal); margin-top: 2px; display: flex; }
.check-list--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; }
@media (max-width: 620px) { .check-list--grid { grid-template-columns: 1fr; } }
.card-dark .check-list li { color: #CAD3DE; }
.card-dark .check-list .ck { color: var(--teal-light); }
.card-dark h3 { color: #fff; }

/* ---- Three numbers ------------------------------------------------------- */
.number-card { position: relative; }
.num-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1;
  margin-bottom: 20px;
}
.number-card .word { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--heading); line-height: 1; letter-spacing: -.5px; margin-bottom: 12px; }
.number-card .metric { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--body); text-transform: uppercase; margin-bottom: 12px; }
.number-card p { font-size: 14.5px; line-height: 1.55; color: var(--body); }

/* ---- Lifecycle loop (heartbeat) ----------------------------------------- */
.hb-wrap { position: relative; max-width: 1180px; margin: 34px auto 0; }
.hb-svg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; overflow: visible; }
.hb-cards { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 26px; }
.hb-card { flex: 1; border: 1px solid; border-radius: 16px; padding: 30px 28px; box-shadow: var(--shadow-card-lg); display: flex; flex-direction: column; }
.hb-card .stage { color: var(--muted); font-weight: 700; font-size: 11.5px; letter-spacing: 1.1px; text-transform: uppercase; margin-bottom: 14px; }
.hb-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 27px; letter-spacing: -.4px; color: var(--heading); margin-bottom: 10px; }
.hb-card .desc { font-size: 15px; color: var(--muted-2); line-height: 1.5; margin-bottom: 18px; }
.hb-card .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; }
.hb-card .outcome { border-top: 1px dashed #D9E0E3; padding-top: 18px; margin-top: auto; display: flex; align-items: baseline; gap: 10px; }
.hb-card .outcome .o { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--teal-dark); }
.hb-card .outcome .m { font-size: 14px; color: var(--muted); }

/* ---- Three outcomes ------------------------------------------------------ */
.outcome-card { background: #fff; border: 1px solid var(--border-2); border-radius: 16px; padding: 34px 30px; }
.outcome-card .ico-tile { margin-bottom: 20px; }
.outcome-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -.2px; line-height: 1.2; margin-bottom: 10px; color: var(--heading); }
.outcome-card p { font-size: 14.5px; line-height: 1.55; color: var(--body); }

/* ---- Calculator ---------------------------------------------------------- */
.glow-section { position: relative; overflow: hidden; }
.glow-section::before {
  content: ""; position: absolute; right: -120px; top: -120px; width: 520px; height: 520px;
  border-radius: 50%; background: radial-gradient(circle at center, rgba(6,190,225,.22), transparent 62%); pointer-events: none;
}
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.4); align-items: stretch; }

/* inputs (white) */
.calc-inputs { background: #fff; color: var(--heading2); padding: 34px 32px; }
.calc-inputs .title { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 20px; }
.calc-inputs label { display: block; font-size: 13px; font-weight: 600; color: var(--body); margin-bottom: 6px; }
.calc-inputs .fine { font-size: 12px; color: #8b979d; line-height: 1.5; margin-top: 4px; }

.cfield { position: relative; display: flex; align-items: center; margin-bottom: 16px; }
.cfield input { width: 100%; padding: 11px 13px; border: 1px solid #D3DEE0; border-radius: 8px; font-size: 15px; font-family: inherit; color: var(--heading2); background: #fff; }
.cfield input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(6,190,225,.14); }
.cfield .pre { position: absolute; left: 12px; font-size: 15px; color: var(--muted); pointer-events: none; }
.cfield.has-pre input { padding-left: 26px; }
.cfield .suf { position: absolute; right: 13px; font-size: 15px; color: var(--muted); pointer-events: none; }
.cfield.has-suf input { padding-right: 30px; }

.cur-toggle { display: flex; gap: 8px; margin-bottom: 20px; }
.cur-toggle button {
  flex: 1; text-align: center; padding: 9px 0; border-radius: 7px; font-weight: 700; font-size: 14px;
  cursor: pointer; border: 1px solid #D3DEE0; background: #fff; color: var(--body); font-family: inherit;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cur-toggle button.is-active { border-color: var(--teal); background: var(--teal); color: #fff; }

/* results (navy) */
.calc-out { background: var(--navy-panel); padding: 34px 32px; display: flex; flex-direction: column; }
.calc-out .cap { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal-light); margin-bottom: 16px; }

.results-wrap { position: relative; flex: 1; display: flex; flex-direction: column; }
.calc-results { display: flex; flex-direction: column; flex: 1; transition: opacity .3s ease, filter .3s ease; }
.results-wrap.locked .calc-results { opacity: .25; filter: blur(3px); pointer-events: none; }
.results-wrap.pop .calc-results { animation: calcpop .5s cubic-bezier(.2,.7,.2,1); }
@keyframes calcpop { 0% { transform: scale(.985); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }

.calc-results .subtitle { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; margin-bottom: 20px; }
.calc-results .rows { display: flex; flex-direction: column; gap: 15px; margin-bottom: 22px; }
.calc-results .row { border-bottom: 1px solid #24505c; padding-bottom: 13px; }
.calc-results .row:last-child { border-bottom: 0; padding-bottom: 0; }
.calc-results .v { font-family: var(--font-display); font-weight: 800; font-size: 32px; color: #2FB6CB; line-height: 1; letter-spacing: -.5px; }
.calc-results .k { font-size: 13.5px; color: var(--on-navy-2); margin-top: 5px; }

.calc-badges { display: flex; gap: 8px; margin-bottom: 22px; }
.calc-badges span { flex: 1; text-align: center; background: var(--ink); border-radius: 8px; padding: 10px 4px; }
.calc-badges .bn { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--teal-light); }
.calc-badges .bl { font-size: 11px; color: var(--on-navy-3); }

.calc-chart { width: 100%; margin-bottom: 10px; }
.calc-chart svg { width: 100%; height: auto; display: block; }
.calc-legend { display: flex; gap: 18px; font-size: 11.5px; color: var(--on-navy-3); margin-bottom: 14px; }
.calc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calc-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.calc-results .justify { font-size: 11.5px; color: #7c9199; line-height: 1.5; margin-top: auto; }

.calc-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; transition: opacity .3s ease; }
.results-wrap:not(.locked) .calc-lock { opacity: 0; pointer-events: none; }
.lock-inner { max-width: 240px; }
.lock-icon { font-size: 26px; color: var(--teal-light); margin-bottom: 10px; line-height: 1; }
.lock-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; margin-bottom: 6px; }
.lock-sub { font-size: 13px; color: var(--on-navy-2); line-height: 1.5; }

.calc-cta { margin-top: 20px; text-align: center; }
.calc-cta[hidden] { display: none; }
.calc-cta p { font-size: 14.5px; color: var(--on-navy); margin-bottom: 14px; line-height: 1.5; }
.calc-note { font-size: 12px; color: #7c9199; margin-top: 16px; max-width: 80ch; }

/* ---- Proof cards --------------------------------------------------------- */
.proof-card { background: #fff; border: 1px solid #E2E8EA; border-radius: 14px; padding: 26px 24px; }
.proof-card .badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--teal-dark); background: #E4F4F6; padding: 4px 10px; border-radius: 20px; margin-bottom: 16px; }
.proof-card .n { font-family: var(--font-display); font-weight: 800; font-size: 44px; color: var(--ink); line-height: 1; letter-spacing: -1px; margin-bottom: 12px; }
.proof-card p { font-size: 13.5px; line-height: 1.55; color: var(--body); margin-bottom: 14px; }
.proof-card .who { font-size: 13px; font-weight: 700; color: var(--heading2); }

/* stat cards (Success) */
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 30px 28px; box-shadow: var(--shadow-card); }
.stat-card .badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--teal-dark); background: #E4F4F6; padding: 5px 12px; border-radius: 20px; margin-bottom: 20px; }
.stat-card .n { font-family: var(--font-display); font-weight: 800; font-size: 52px; color: var(--ink); line-height: 1; letter-spacing: -1.5px; margin-bottom: 14px; }
.stat-card p { font-size: 14.5px; line-height: 1.55; color: var(--body); margin-bottom: 18px; }
.stat-card .who { font-size: 13.5px; font-weight: 700; color: var(--heading); padding-top: 14px; border-top: 1px solid var(--tint2); }

/* ---- Proof strip (homepage) --------------------------------------------- */
.proof-item { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px 24px; box-shadow: var(--shadow-card); }
.proof-item .pn { font-family: var(--font-display); font-weight: 800; font-size: 42px; color: var(--ink); line-height: 1; letter-spacing: -1.5px; }
.proof-item .pl { font-size: 14px; line-height: 1.5; color: var(--body); margin-top: 12px; }
.proof-item .pc { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--teal-dark); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tint2); }

/* ---- Text link with arrow ----------------------------------------------- */
.text-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--teal-dark); text-decoration: none; }
.text-link:hover { color: var(--ink); }
.text-link svg { transition: transform .18s ease; }
.text-link:hover svg { transform: translateX(3px); }

/* Report cover thumbnails (Psychology reports) */
.report-cover { width: 100%; height: auto; display: block; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 8px 20px rgba(11,42,51,.14); }

/* Expert headshots (Psychology page) */
.expert-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 16px; box-shadow: 0 6px 16px rgba(11,42,51,.16); }

/* ---- Product pillar cards (homepage) ------------------------------------ */
.pillar-card { display: flex; flex-direction: column; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pillar-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-lg); border-color: var(--teal-light); }
.pillar-card .kicker { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 8px; }
.pillar-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.3px; color: var(--heading); margin-bottom: 10px; }
.pillar-card p { font-size: 14.5px; line-height: 1.6; color: var(--body); }
.pillar-card .more { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--teal-dark); }
.pillar-card .more svg { transition: transform .18s ease; }
.pillar-card:hover .more svg { transform: translateX(3px); }

/* ---- Case study card (Success) ------------------------------------------ */
.case-study { position: relative; overflow: hidden; border-radius: 22px; padding: 52px 54px; color: #fff; background: linear-gradient(140deg, #0596B5 0%, #077A96 100%); box-shadow: 0 30px 70px rgba(5,150,181,.28); }
/* royalty-free stadium watermark (Unsplash) — fades away from the text on the left, blended to keep the teal identity */
.case-study::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url('../img/stadium.webp') center right / cover no-repeat; opacity: .32; mix-blend-mode: soft-light; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 24%, #000 86%); mask-image: linear-gradient(90deg, transparent 0%, transparent 24%, #000 86%); pointer-events: none; }
.case-study::after { content: ""; position: absolute; top: -45%; right: -8%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%); pointer-events: none; z-index: 0; }
.case-study > * { position: relative; z-index: 1; }
.case-study .cs-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #BEEAF2; margin-bottom: 16px; }
.case-study .cs-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px,3vw,40px); line-height: 1.1; letter-spacing: -.5px; color: #fff; margin-bottom: 18px; max-width: 24ch; }
.case-study .cs-body { font-size: 17.5px; line-height: 1.6; color: #E4F5F9; max-width: 62ch; }
.case-study .cs-stats { display: flex; flex-wrap: wrap; gap: 30px 64px; margin: 38px 0 34px; }
.case-study .cs-stat .n { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -1px; color: #fff; }
.case-study .cs-stat .l { font-size: 14px; color: #C3EAF1; margin-top: 10px; max-width: 22ch; }
.case-study .cs-quote { border-left: 3px solid #7FD6E0; padding-left: 22px; font-style: italic; font-size: 17px; line-height: 1.6; color: #EAF9FB; max-width: 62ch; }
@media (max-width: 560px) { .case-study { padding: 34px 24px; } .case-study .cs-stats { gap: 22px 40px; } }

/* ---- Awards strip (Platform) -------------------------------------------- */
.awards { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; }
.awards-title { display: flex; align-items: center; gap: 12px; }
.awards-title .t { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); letter-spacing: -.2px; }
.awards-list { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.award-chip { font-size: 14px; font-weight: 600; color: #0B5560; background: #fff; border: 1px solid #C6E2E4; padding: 9px 18px; border-radius: 24px; }

/* ---- Notice banner (Singula IQ) ----------------------------------------- */
.notice { display: flex; align-items: center; gap: 14px; background: var(--tint); border: 1px solid #B9DBDE; border-radius: 14px; padding: 20px 24px; }
.notice p { font-size: 15.5px; line-height: 1.55; color: #0E5560; }
.notice strong { color: var(--ink); font-weight: 700; }

/* ---- Tool cards (Singula IQ) -------------------------------------------- */
.tool-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.tool-card .ico-tile { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px; }
.tool-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.3px; color: var(--heading); margin-bottom: 3px; }
.tool-card h3 .fam { color: var(--teal-dark); }
.tool-card .tool-sub { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.tool-card p { font-size: 14px; line-height: 1.55; color: var(--body); margin-bottom: 18px; }
.tool-card .tag { margin-top: auto; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--teal-dark); }

/* ---- Singula IQ Core (the engine story, light band) --------------------- */
.core-section { background: var(--tint); border-top: 1px solid var(--border); }
.core-badge { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.core-badge .core-eyebrow { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal-dark); }
.core-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column; height: 100%; box-shadow: var(--shadow-card); }
.core-card .core-step { display: inline-flex; align-items: center; align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal-dark); background: #E4F4F6; padding: 5px 12px; border-radius: 20px; margin-bottom: 15px; }
.core-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.3px; color: var(--heading); margin-bottom: 9px; }
.core-card p { font-size: 14px; line-height: 1.6; color: var(--body); }
.core-card .core-tag { margin-top: auto; padding-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--teal-dark); }
.core-line { text-align: center; font-size: 16px; line-height: 1.65; color: var(--body); max-width: 76ch; margin: 34px auto 0; }
.core-line b { color: var(--heading); }
.core-moat { display: flex; align-items: flex-start; gap: 18px; margin-top: 30px; background: linear-gradient(135deg, #EAF7F8, #D8EEF0); border: 1px solid #BFE3E6; border-radius: 16px; padding: 24px 26px; }
.core-moat .ico { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(6,190,225,.3); }
.core-moat .t { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.3px; color: var(--ink); margin-bottom: 6px; }
.core-moat p { font-size: 14.5px; line-height: 1.6; color: var(--body); margin: 0; }
@media (max-width: 560px) { .core-moat { flex-direction: column; gap: 14px; } }

/* ---- Client logo wall (Success) ----------------------------------------- */
.logo-wall { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.logo-tile { height: 78px; background: #fff; border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; color: #9AA7AD; font-weight: 700; font-size: 13.5px; }
.logo-tile img { max-height: 40px; max-width: 88%; width: auto; }

/* --- logo optical-size normalization (shared brand heights, applied to ticker + wall) --- */
/* ticker: fixed-height context */
.ticker-item img[src*="NBCUniversal"] { height: 16px; }
.ticker-item img[src*="Warner"]       { height: 21px; }
.ticker-item img[src*="premier"]      { height: 20px; }
.ticker-item img[src*="tnt"]          { height: 27px; }
.ticker-item img[src*="Freeview"]     { height: 27px; }
.ticker-item img[src*="racing"]       { height: 33px; }
.ticker-item img[src*="nhk"]          { height: 36px; }
.ticker-item img[src*="Lothian"]      { height: 37px; }
.ticker-item img[src*="eir-sport"]    { height: 38px; }
.ticker-item img[src*="ITV_Box"]      { height: 40px; }
/* Dense square marks need the extra height to stay legible at tile size. */
.ticker-item img[src*="ABS-CBN"]      { height: 42px; }
.ticker-item img[src*="SET_Asia"]     { height: 42px; }
.ticker-item img[src*="zee"]          { height: 42px; }
/* wall: max-height context (tile inner ~50px) */
.logo-tile img[src*="NBCUniversal"] { max-height: 20px; }
.logo-tile img[src*="Warner"]       { max-height: 26px; }
.logo-tile img[src*="premier"]      { max-height: 26px; }
.logo-tile img[src*="tnt"]          { max-height: 34px; }
.logo-tile img[src*="Freeview"]     { max-height: 34px; }
.logo-tile img[src*="racing"]       { max-height: 42px; }
.logo-tile img[src*="nhk"]          { max-height: 44px; }
.logo-tile img[src*="Lothian"]      { max-height: 46px; }
.logo-tile img[src*="eir-sport"]    { max-height: 46px; }
.logo-tile img[src*="ITV_Box"]      { max-height: 48px; }
/* Dense square marks need the extra height to stay legible at tile size. */
.logo-tile img[src*="ABS-CBN"]      { max-height: 50px; }
.logo-tile img[src*="SET_Asia"]     { max-height: 50px; }
.logo-tile img[src*="zee"]          { max-height: 50px; }

/* ---- Client ticker (homepage) ------------------------------------------- */
.ticker { padding: 40px 0 46px; background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.ticker-label { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.ticker-viewport {
  position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* two identical item sets + uniform right-margin (incl. last) → translateX(-50%) loops seamlessly */
.ticker-track { display: flex; align-items: center; width: max-content; animation: tickerscroll 46s linear infinite; }
.ticker-viewport:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  flex: none; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  height: 62px; padding: 0 30px; margin-right: 18px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 2px rgba(11,42,51,.05);
  font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.2px; color: #9AA7AD;
}
.ticker-item img { height: 30px; width: auto; display: block; }
.ticker-item--dark { border-color: transparent; box-shadow: 0 6px 16px rgba(11,42,51,.14); }
@keyframes tickerscroll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-viewport { overflow-x: auto; }
}
@media (max-width: 760px) {
  .ticker-item { font-size: 16px; margin-right: 12px; height: 52px; padding: 0 20px; }
  .ticker-item img { height: 24px; }
}

/* ---- Partners: stack equation ------------------------------------------- */
.stack-row { display: flex; align-items: stretch; justify-content: center; gap: 16px; flex-wrap: wrap; }
.stack-box { flex: 1; min-width: 230px; border-radius: 16px; padding: 26px 24px; text-align: center; }
.stack-box .t { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.stack-box .s { font-size: 13.5px; line-height: 1.6; }
.stack-box--your { background: #fff; border: 1px solid #D2E6E7; color: var(--heading); }
.stack-box--your .s { color: var(--body); }
.stack-box--ink { background: var(--ink); border: 1px solid var(--ink); color: #fff; }
.stack-box--ink .s { color: #9FB8BF; }
.stack-box--ink .note { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--teal-light); margin-top: 10px; }
.stack-box--teal { background: var(--teal); border: 1px solid var(--teal); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.stack-box--teal .t { font-weight: 800; font-size: 18px; line-height: 1.2; }
.stack-op { display: flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--teal-dark); }

/* co-brand lockup */
.lockup-col { display: flex; flex-direction: column; gap: 20px; max-width: 620px; margin: 0 auto; }
.lockup { display: flex; align-items: center; justify-content: center; gap: 26px; background: rgba(255,255,255,.04); border: 1px solid rgba(127,214,224,.16); border-radius: 16px; padding: 26px 30px; }
.lockup-slot { flex: 1; height: 56px; border: 1.5px dashed rgba(255,255,255,.32); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--on-navy-3); font-weight: 600; font-size: 14px; }
.lockup-logo { flex: 1; display: flex; align-items: center; justify-content: center; }
.lockup-logo img { height: 26px; width: auto; }
.lockup-x { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--teal-light); }

/* numbered steps */
.step-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px 22px; box-shadow: var(--shadow-card); }
.step-card .num { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--teal-light); line-height: 1; margin-bottom: 12px; }
.step-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--heading); margin-bottom: 7px; }
.step-card p { font-size: 13.5px; line-height: 1.5; color: var(--body); }
.step-card.card-dark h3 { color: #fff; }
.step-card.card-dark p { color: #9FB8BF; }

/* API code block */
.api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.code-window { background: var(--ink); border-radius: 16px; padding: 26px; box-shadow: 0 26px 54px rgba(11,42,51,.28); overflow: hidden; }
.code-dots { display: flex; gap: 7px; margin-bottom: 18px; }
.code-dots span { width: 11px; height: 11px; border-radius: 50%; background: #3a4c56; }
.code-window pre { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--on-navy); white-space: pre; overflow-x: auto; margin: 0; }
.cm { color: #6B8A93; }  /* comment */
.cv { color: var(--teal-light); }  /* verb */
.ck-key { color: #9FD9A0; }  /* json key */
.cs { color: #E9C083; }  /* string */
.cr { color: var(--teal); }  /* result */

/* ---- Client quote band --------------------------------------------------- */
.quote-band { background: var(--ink); color: #fff; text-align: center; }
.quote-band .eyebrow { color: var(--teal-light); margin-bottom: 18px; }
.quote-mark { font-family: var(--font-display); font-weight: 800; font-size: 60px; line-height: .6; color: var(--teal); margin-bottom: 10px; }
.quote-text {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.32; letter-spacing: -.3px; color: #fff; max-width: 760px; margin: 0 auto 30px;
}
.quote-by { display: inline-flex; align-items: center; gap: 14px; justify-content: center; }
.quote-avatar { width: 46px; height: 46px; border-radius: 50%; background: rgba(127,214,224,.16); border: 1px solid rgba(127,214,224,.3); flex: none; }
.quote-meta { text-align: left; display: flex; flex-direction: column; }
.quote-meta strong { font-weight: 700; font-size: 15px; color: #fff; }
.quote-meta .role { font-size: 13.5px; color: var(--on-navy-2); margin-top: 2px; }

/* ---- CTA band ------------------------------------------------------------ */
.cta { background: var(--teal); color: #fff; padding: 74px 0; text-align: center; }
.cta .inner { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); }
.cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -.8px; margin-bottom: 14px; }
.cta p { font-size: 18px; color: #E1F4F6; margin-bottom: 28px; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #fff; padding: 64px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand img { height: 46px; width: auto; margin-bottom: 18px; }
.footer-brand p { font-size: 14.5px; line-height: 1.6; color: var(--on-navy-3); max-width: 38ch; }
.footer-col .head { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer-col .links { display: flex; flex-direction: column; gap: 11px; }
.footer-col .links a, .footer-col .links span { font-size: 14.5px; color: var(--on-navy-2); }
.footer-col .links a:hover { color: #fff; }
.footer-col .links span { color: var(--on-navy-3); }
.footer-legal { padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.footer-legal span { font-size: 13px; color: var(--on-navy-3); }
.footer-legal a { font-size: 13px; color: var(--on-navy-3); text-decoration: none; }
.footer-legal a:hover { color: #fff; }
.footer-legal .dotsep { width: 3px; height: 3px; border-radius: 50%; background: #4a5c66; }

/* ---- Singula IQ architecture diagram ------------------------------------ */
/* overflow visible on desktop so the hub's drop shadow isn't clipped into a
   hard line; only enable horizontal scroll when the 1120px diagram won't fit. */
.diagram-scroll { padding: 20px 2px 60px; }
@media (max-width: 1200px) {
  .diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.diagram { position: relative; width: 1120px; height: 500px; margin: 0 auto; font-family: var(--font-body); }
.diagram > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.dg-node { position: absolute; z-index: 1; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-card-lg); }
.dg-node .ico { width: 40px; height: 40px; border-radius: 11px; background: #EEF2F4; color: #3C4C53; display: flex; align-items: center; justify-content: center; }
.dg-title { font-family: var(--font-display); font-weight: 700; color: var(--heading); }
.dg-hub { position: absolute; z-index: 2; background: radial-gradient(120% 120% at 30% 0%, #124350, #0B2A33 62%); border: 2px solid var(--teal); border-radius: 20px; box-shadow: 0 30px 64px rgba(11,42,51,.4), 0 0 0 6px rgba(6,190,225,.08); padding: 24px 22px; display: flex; flex-direction: column; }
.dg-chip-label { position: absolute; transform: translate(-50%,-50%); z-index: 3; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: #fff; border: 1px solid #DCE7E9; color: var(--teal-dark); font-weight: 700; font-size: 12.5px; padding: 6px 13px; border-radius: 22px; box-shadow: 0 5px 14px rgba(20,34,41,.08); }

/* ---- Scroll reveal ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hb-pulse { display: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero-inner--split { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { display: none; }   /* hero product image not needed on stacked/mobile view */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .api-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .nav-wrap {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--ink); flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px var(--pad) 20px; border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 40px rgba(0,0,0,.3);
    display: none;
  }
  .nav-wrap.open { display: flex; }
  .nav { flex-direction: column; gap: 0; margin: 0; }
  .nav a { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav a.is-active { border-bottom-color: rgba(255,255,255,.06); color: var(--teal-light); }
  .nav-actions { flex-direction: column; align-items: stretch; margin: 14px 0 0; gap: 10px; }
  .btn-nav-ghost, .btn-nav-solid { justify-content: center; padding: 12px 15px; }

  /* lifecycle: stack the cards and drop the heartbeat pulse on mobile */
  .hb-svg { display: none; }
  .hb-cards { flex-direction: column; gap: 16px; }
  .hb-card { flex: none; }
}

@media (max-width: 760px) {
  :root { --pad: 20px; }
  .section { padding: 60px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .stack-op { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .subnav-inner { gap: 16px; overflow-x: auto; }
  .hero-inner { padding: 56px var(--pad); }
  .hero-float { left: 12px; right: 12px; bottom: 12px; }
}

/* ==========================================================================
   Demo modal (overlay form)
   ========================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11,42,51,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.modal-backdrop.open { opacity: 1; visibility: visible; }

.modal {
  position: relative; background: #fff; color: var(--heading2);
  width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto;
  border-radius: 20px; padding: 44px 48px 34px;
  box-shadow: 0 40px 90px rgba(11,42,51,.45);
  transform: translateY(12px) scale(.985);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.modal-backdrop.open .modal { transform: none; }

.modal-close {
  position: absolute; top: 20px; right: 20px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--muted); transition: background .15s ease, color .15s ease;
}
.modal-close:hover { background: var(--page); color: var(--heading); }

.modal .eyebrow { color: var(--teal); margin-bottom: 6px; }
.modal h2 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(25px, 3.2vw, 31px);
  line-height: 1.12; letter-spacing: -.5px; color: var(--heading); margin: 0 0 12px;
}
.modal .modal-sub { font-size: 16px; line-height: 1.55; color: var(--body); margin-bottom: 26px; }
.modal .report-req { font-size: 13.5px; color: var(--teal-dark); background: #E4F4F6; border: 1px solid #C9E7EA; border-radius: 10px; padding: 10px 14px; margin: -12px 0 22px; }
.modal .report-req strong { color: var(--ink); font-weight: 700; }

.modal .field { margin-bottom: 18px; }
.modal .field label { display: block; font-size: 14px; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.modal input[type="text"], .modal input[type="email"] {
  width: 100%; padding: 14px 16px; font-size: 15px; font-family: inherit;
  color: var(--heading2); background: #fff; border: 1px solid #D3DEE0; border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.modal textarea {
  width: 100%; padding: 14px 16px; font-size: 15px; font-family: inherit;
  color: var(--heading2); background: #fff; border: 1px solid #D3DEE0; border-radius: 10px;
  resize: vertical; min-height: 92px; transition: border-color .15s ease, box-shadow .15s ease;
}
.modal input:focus, .modal textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(6,190,225,.18); }
.modal .field.invalid textarea { border-color: #C0392B; }

.modal .consent { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 22px; }
.modal .consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--teal); flex: none; }
.modal .consent label { font-weight: 400; font-size: 13.5px; line-height: 1.5; color: var(--body); margin: 0; }
.modal .consent a { color: var(--teal-dark); text-decoration: underline; }

.modal form .btn-primary { width: 100%; font-size: 16px; padding: 16px; }
.modal form .btn-primary[disabled] { opacity: .7; cursor: default; }
.modal .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modal-error { color: #C0392B; font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; text-align: center; }
.modal-error[hidden] { display: none; }
.modal .modal-foot { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 16px; }
.modal .field-error { color: #C0392B; font-size: 12.5px; margin-top: 6px; display: none; }
.modal .field.invalid .field-error { display: block; }
.modal .field.invalid input { border-color: #C0392B; }

.modal-success { text-align: center; padding: 24px 0 12px; }
.modal-success .tick {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(6,190,225,.14); color: var(--teal);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.modal-success h2:focus { outline: none; }
.modal-success p { font-size: 16px; color: var(--body); line-height: 1.55; max-width: 42ch; margin: 0 auto; }

@media (max-width: 560px) {
  .modal { padding: 34px 22px 26px; border-radius: 16px; }
}

/* ==========================================================================
   Texture on the dark (ink) sections — a subtle brand-teal dot grid layered
   over the solid navy so it reads with depth rather than a flat block.
   (background-image longhand keeps each section's `background: var(--ink)` colour;
   radial glows on .hero / .glow-section still sit on top via their ::before.)
   ========================================================================== */
.hero, .bg-ink, .quote-band, .site-footer {
  background-image:
    radial-gradient(rgba(127,214,224,.06) 1px, transparent 1.4px),
    radial-gradient(rgba(127,214,224,.05) 1px, transparent 1.4px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
}

/* ---- Cookie consent banner ---------------------------------------------- */
/* Accept and Reject are the same size, weight and prominence, side by side —
   UK GDPR requires refusing to be as easy as consenting. Do not demote Reject
   to a text link. */
.cc-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
             background: var(--ink); border-top: 2px solid var(--teal);
             box-shadow: 0 -8px 32px rgba(11, 42, 51, .28); }
.cc-banner[hidden] { display: none; }
.cc-inner { max-width: 1120px; margin: 0 auto; padding: 22px 24px;
            display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: center; }
.cc-copy h2 { font-family: var(--font-display); font-size: 17px; font-weight: 700;
              color: #fff; margin: 0 0 6px; letter-spacing: -.2px; outline: none; }
.cc-copy p { font-size: 14.5px; line-height: 1.6; color: var(--on-navy); margin: 0; max-width: 68ch; }
.cc-copy a { color: var(--teal-light); }
.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cc-actions .btn { padding: 11px 20px; font-size: 14.5px; white-space: nowrap; }
.cc-textlink { background: none; border: 0; padding: 8px 4px; cursor: pointer;
               font: inherit; font-size: 14px; color: var(--on-navy-2); text-decoration: underline; }
.cc-textlink:hover { color: #fff; }
.cc-textlink[hidden] { display: none; }

.cc-prefs { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12);
            padding-top: 16px; margin-top: 2px; }
.cc-prefs[hidden] { display: none; }
.cc-row { display: flex; align-items: center; justify-content: space-between;
          gap: 24px; padding: 11px 0; }
.cc-row + .cc-row { border-top: 1px solid rgba(255,255,255,.08); }
.cc-row-t { font-size: 14.5px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.cc-row-s { font-size: 13.5px; color: var(--on-navy-3); line-height: 1.5; }
.cc-always { font-size: 13px; color: var(--on-navy-3); white-space: nowrap; }

.cc-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-track { width: 44px; height: 25px; border-radius: 13px; background: #3A4E57;
            transition: background .18s ease; display: block; }
.cc-thumb { width: 19px; height: 19px; border-radius: 50%; background: #fff; display: block;
            transform: translate(3px, 3px); transition: transform .18s ease; }
.cc-switch input:checked + .cc-track { background: var(--teal); }
.cc-switch input:checked + .cc-track .cc-thumb { transform: translate(22px, 3px); }
.cc-switch input:focus-visible + .cc-track { outline: 2px solid var(--teal-light); outline-offset: 2px; }
.cc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 820px) {
  .cc-inner { grid-template-columns: 1fr; padding: 18px 20px; gap: 14px; }
  .cc-actions .btn { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-track, .cc-thumb { transition: none; }
}

/* ---- Three-numbers strip (campaign landing pages) ------------------------ */
/* Compact sibling of .stat-strip: a caption over three icon+label pairs.
   Sits in the dark hero, so colours follow the --on-navy ramp. Introduced for
   /ibc2026; the markup existed before these rules did, so the strip rendered
   as unstyled stacked blocks. */
.tri-strip { padding-top: 24px; margin-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
.tri-strip-cap { font-size: 13px; color: var(--on-navy-3); margin-bottom: 16px; }
.tri-strip-items { display: flex; flex-wrap: wrap; gap: 16px 34px; }
.tri-mini { display: flex; align-items: center; gap: 11px; }
.tri-ic { flex: none; width: 38px; height: 38px; border-radius: 11px;
          display: inline-flex; align-items: center; justify-content: center;
          background: rgba(6, 190, 225, .12); color: var(--teal-light); }
.tri-ic svg { display: block; }
.tri-t { font-family: var(--font-display); font-weight: 700; font-size: 15px;
         color: #fff; line-height: 1.2; }
.tri-s { font-size: 13px; color: var(--on-navy-3); margin-top: 2px; }

/* Hero with a photographic backdrop — the image is set inline per page; this
   darkens it enough for white type to stay legible.
   Uses ::after deliberately: .hero::before is already the 600px teal glow orb
   (border-radius 50%), so a ::before scrim here would inherit that circle. */
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: 0;
                      pointer-events: none;
                      background: linear-gradient(180deg, rgba(11,42,51,.82), rgba(11,42,51,.92)); }
.hero--photo > * { position: relative; z-index: 1; }

@media (max-width: 560px) {
  .tri-strip-items { gap: 14px 20px; }
  .tri-mini { flex: 1 1 100%; }
}

/* ---- Scheduler modal ([data-book]) -------------------------------------- */
/* Sibling of .video-modal, but sized for a booking calendar rather than 16:9
   video: schedulers need height for the month grid plus a time column, and go
   near-full-height on a phone. */
.book-modal { position: fixed; inset: 0; z-index: 200; display: none;
              align-items: center; justify-content: center; padding: 28px;
              background: rgba(4,18,22,.88); }
.book-modal.open { display: flex; }
.bm-frame { position: relative; width: 100%; max-width: 760px; height: min(820px, 92vh);
            background: #fff; border-radius: 14px; overflow: hidden;
            box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.bm-body, .bm-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.bm-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px;
            border-radius: 10px; border: none; background: rgba(11,42,51,.5); color: #fff;
            cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bm-close:hover { background: rgba(11,42,51,.78); }
.bm-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column;
                  align-items: center; justify-content: center; text-align: center;
                  padding: 24px; color: #EAF6F9;
                  background: linear-gradient(140deg, #0B2A33, #0596B5); }
.bm-placeholder .s { font-size: 14px; color: #A9BEC4; margin-top: 8px; }

@media (max-width: 620px) {
  .book-modal { padding: 12px; }
  .bm-frame { height: 94vh; border-radius: 12px; }
}