/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   ClarezAI — Lockwood-inspired site
   Teal + Navy on light, clean cards, modern serif/sans pairing
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */

:root{
  --navy:      #1a2c47;
  --navy-deep: #0e1c30;
  --navy-soft: #2a3e5c;
  --teal:      #0060c0;   /* primary accent — derived from the "AI" of the logo */
  --teal-dk:   #004a8c;
  --teal-soft: #b3d4f0;
  --bg:        #ffffff;
  --bg-2:      #f3f4f6;
  --bg-3:      #eaeef2;
  --text:      #3b4a5e;
  --muted:     #7a8896;
  --rule:      #dde3eb;

  --serif: "Source Serif Pro", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

::selection{background:var(--teal);color:#fff}

/* ── shared section components ── */
.kicker{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:18px;
}
h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.9rem,3.8vw,2.8rem);
  line-height:1.18;
  color:var(--navy);
  letter-spacing:-.012em;
}
h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.3rem;
  line-height:1.32;
  color:var(--navy);
  letter-spacing:-.005em;
}
.lead{
  font-family:var(--sans);
  font-size:1.05rem;
  font-weight:400;
  color:#111111;
  line-height:1.65;
  margin-top:18px;
}
.lead + .lead{margin-top:16px}

/* Stylish editorial lead used in the About / prop section */
.prop__lead{
  font-family:'Crimson Pro',Georgia,serif;
  font-size:clamp(1.2rem,1.7vw,1.45rem);
  font-weight:400;
  color:#0e1c30;
  line-height:1.55;
  letter-spacing:-.003em;
  margin:24px auto 0;
  max-width:62ch;
}
.prop__lead em{
  font-style:italic;
  font-weight:500;
  color:var(--navy);
}
.prop__lead .prop__brand{
  font-family:var(--serif);
  font-weight:700;
  font-style:normal;
  letter-spacing:.005em;
  color:var(--navy);
  white-space:nowrap;
}
.prop__lead .prop__brand-ai{color:var(--teal);margin-left:1px}
.prop__lead .prop__accent{
  font-style:italic;
  font-weight:600;
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal-dk) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
}
.prop__lead .prop__accent::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-3px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  border-radius:2px;
  opacity:.55;
}
.sec__head{margin-bottom:56px;max-width:720px}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__sub{
  font-size:1.04rem;
  color:var(--muted);
  margin-top:14px;
  max-width:60ch;
}
.sec__head--center .sec__sub{margin-inline:auto}

/* ── buttons ── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  padding:13px 26px;
  border-radius:4px;
  border:2px solid transparent;
  cursor:pointer;
  letter-spacing:.02em;
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.btn--lg{padding:16px 32px;font-size:1rem}
.btn--solid{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn--solid:hover{background:var(--teal-dk);border-color:var(--teal-dk);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(0,96,192,.55)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  color:var(--teal);
  font-size:.95rem;
  letter-spacing:.01em;
  transition:gap .25s var(--ease),color .25s var(--ease);
  margin-top:18px;
}
.link-arrow:hover{color:var(--teal-dk);gap:12px}

/* ─────────────────────────────────────────
   NAVIGATION
   ───────────────────────────────────────── */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--rule);
  backdrop-filter:blur(10px);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:90px}
.brand__logo{height:56px;width:auto;transition:transform .25s var(--ease)}
.brand:hover .brand__logo{transform:translateY(-1px)}
.nav__links{display:flex;align-items:center;gap:44px}
.nav__links a{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.25rem;
  font-weight:500;
  color:var(--navy);
  letter-spacing:.005em;
  position:relative;
  transition:color .2s var(--ease);
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:-4px;
  height:2px;background:var(--teal);
  transition:right .25s var(--ease);
}
.nav__links a:hover{color:var(--teal)}
.nav__links a:hover::after{right:0}
.nav__cta{
  background:var(--teal);
  color:#fff !important;
  padding:10px 22px;
  border-radius:4px;
  font-weight:600;
}
.nav__cta:hover{background:var(--teal-dk);transform:translateY(-1px)}
.nav__toggle{display:none;background:none;border:none;cursor:pointer;width:32px;height:28px;flex-direction:column;gap:6px;align-items:center;justify-content:center}
.nav__toggle span{width:24px;height:2px;background:var(--navy);transition:transform .25s var(--ease)}

/* ─────────────────────────────────────────
   HERO — exactly as in Initial Code for Design 2
   ───────────────────────────────────────── */
.hero{position:relative;padding:0 0 22vh;overflow:hidden;aspect-ratio:1365/768;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;background-color:#0a1428}
.hero__bg{position:absolute;inset:0;background-image:url('images/home-hero.png');background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#0a1428;pointer-events:none}
.hero__particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.hero__veil{position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(8,20,40,.85) 0%, rgba(8,20,40,.62) 28%, rgba(8,20,40,.18) 52%, transparent 72%),
  linear-gradient(180deg, transparent 94%, var(--bg) 100%);
  pointer-events:none}
.hero__inner{position:relative;max-width:620px;margin:0 0 0 8%;text-align:left;padding-bottom:0}

/* Editorial premium title — Source Serif Pro with cyan-teal gradient on the italic accent */
.hero__title{
  font-family:'Source Serif Pro',Georgia,serif;
  font-weight:600;
  font-size:clamp(2.2rem,4vw,3.6rem);
  line-height:1.08;
  letter-spacing:-.018em;
  color:#f4f9ff;
  text-shadow:0 2px 28px rgba(8,20,40,.85),0 0 60px rgba(8,20,40,.4);
  margin:0;
}
.hero__title em{
  font-family:'Crimson Pro','Source Serif Pro',Georgia,serif;
  font-style:italic;
  font-weight:700;
  background:linear-gradient(120deg,#00D1D1 0%,#4a90e2 60%,#7fc9dc 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:0.7px rgba(212,220,232,.85);
  paint-order:stroke fill;
  text-shadow:none;
  filter:drop-shadow(0 0 28px rgba(0,209,209,.55))
         drop-shadow(0 0 10px rgba(212,220,232,.4))
         drop-shadow(0 2px 6px rgba(8,20,40,.45));
}

/* Lead paragraph — Source Serif Pro for elegant editorial reading */
.hero__lead{
  font-family:'Source Serif Pro',Georgia,serif;
  font-style:normal;
  font-weight:400;
  font-size:clamp(1.24rem,1.75vw,1.55rem);
  color:#f4f8ff;
  max-width:56ch;
  margin:30px 0 0;
  text-shadow:0 2px 14px rgba(8,20,40,.95),0 0 28px rgba(8,20,40,.7),0 1px 2px rgba(0,0,0,.5);
  line-height:1.55;
  letter-spacing:-.005em;
}
.hero__lead em{
  font-family:'Crimson Pro',Georgia,serif;
  font-style:italic;
  font-weight:500;
  color:#b3e8e8;
  text-shadow:0 0 16px rgba(0,209,209,.4),0 2px 14px rgba(8,20,40,.85);
}
.hero__lead-brand{
  font-family:'Source Serif Pro',Georgia,serif;
  font-size:1.12em;
  font-weight:700;
  font-style:normal;
  letter-spacing:-.012em;
  color:#ffffff;
  text-shadow:0 2px 18px rgba(8,20,40,.75);
  padding:0 .04em;
}
.hero__lead-brand__ai{
  background:linear-gradient(120deg,#00D1D1 0%,#4a90e2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(0,209,209,.55));
}

/* ─────────────────────────────────────────
   VALUE PROPOSITION
   ───────────────────────────────────────── */
.prop{padding:68px 0;background:var(--bg)}
.prop__inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:80px;
  align-items:center;
}
.prop__inner--solo{display:block;max-width:880px;margin:0 auto;text-align:center}
.prop__inner--solo .prop__copy{max-width:none}
.prop__inner--solo .prop__copy .lead{margin-left:auto;margin-right:auto;max-width:64ch}

/* Split layout — image on the left, copy on the right (used on Who We Are) */
.prop__split{
  display:grid;
  grid-template-columns:0.95fr 1.15fr;
  gap:60px;
  align-items:center;
}
.prop__visual{
  margin:0;
  position:relative;
  max-width:430px;
  width:100%;
  justify-self:center;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg,var(--navy-deep) 0%,#08213e 100%);
  box-shadow:0 2px 8px rgba(14,28,48,.06),0 24px 60px -28px rgba(0,30,68,.45);
}
.prop__visual img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center;
}
.prop__split .prop__copy{max-width:none}
.prop__split .prop__copy h2{margin-bottom:18px;text-align:left}
.prop__split .prop__copy .lead{margin-left:0;margin-right:0;max-width:58ch;text-align:left}
@media (max-width:900px){
  .prop__split{grid-template-columns:1fr;gap:36px}
  .prop__visual{max-width:360px;margin:0 auto}
}
.prop__copy h2{margin-bottom:20px}
.prop__h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.25;letter-spacing:-.005em;color:var(--navy);margin-bottom:22px;padding-bottom:0}
.prop__h2::after{display:none !important}

/* Animated kicker — section labels with a one-shot light traveling along each side toward the text */
.kicker--animated{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  width:fit-content;
  margin:0 auto 24px;
  font-family:var(--sans);
  font-size:clamp(1.35rem,1.85vw,1.7rem);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal);
}
.kicker__text{white-space:nowrap}
.kicker__line{
  position:relative;
  display:block;
  width:clamp(70px,11vw,140px);
  height:1px;
  background:linear-gradient(90deg,rgba(0,96,192,0) 0%,rgba(0,96,192,.45) 50%,rgba(0,96,192,0) 100%);
  overflow:visible;
}
.kicker__line::before{
  content:"";
  position:absolute;
  top:50%;
  width:9px;
  height:9px;
  margin-top:-4.5px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:
    0 0 8px 2px rgba(0,96,192,.65),
    0 0 18px 4px rgba(0,96,192,.4),
    0 0 36px 10px rgba(0,96,192,.18);
  opacity:0;
  left:-4px;
}
.kicker__line--right::before{left:calc(100% - 4px)}
/* fire the light each time the section enters the viewport */
.replay-anim.in-view .kicker__line--left::before{
  animation:kickerLightToCenter 2.4s cubic-bezier(.5,.05,.3,1) .35s 1 forwards;
}
.replay-anim.in-view .kicker__line--right::before{
  animation:kickerLightFromCenter 2.4s cubic-bezier(.5,.05,.3,1) .35s 1 forwards;
}
@keyframes kickerLightToCenter{
  0%   {left:-4px;opacity:0}
  12%  {opacity:1}
  85%  {opacity:1}
  100% {left:calc(100% - 4px);opacity:0}
}
@keyframes kickerLightFromCenter{
  0%   {left:calc(100% - 4px);opacity:0}
  12%  {opacity:1}
  85%  {opacity:1}
  100% {left:-4px;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .replay-anim.in-view .kicker__line--left::before,
  .replay-anim.in-view .kicker__line--right::before{animation:none;opacity:0}
}

/* h2 entrance — one-shot underline sweep when the section reveals */
.sec__head h2,
.contact__title,
.pagehead__inner h1{
  position:relative;
  padding-bottom:18px;
  font-size:clamp(1.25rem,2.1vw,1.75rem);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.005em;
}
.sec__head h2::after,
.contact__title::after,
.pagehead__inner h1::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--teal) 35%,var(--teal) 65%,transparent);
  box-shadow:0 0 12px rgba(0,96,192,.55);
  transform:translateX(-50%);
  transition:width 1.1s cubic-bezier(.5,.05,.3,1) .55s;
}
.replay-anim.in-view .sec__head h2::after,
.replay-anim.in-view .contact__title::after,
.replay-anim.in-view .pagehead__inner h1::after{
  width:140px;
}
/* the prop__h2 sits inside .prop__copy.reveal so the selector above already matches */
.sec__head:not(.sec__head--center) h2::after,
.sec__head:not(.sec__head--center) h2{text-align:inherit}
@media (prefers-reduced-motion: reduce){
  .sec__head h2::after,
  .contact__title::after,
  .pagehead__inner h1::after{transition:none;width:140px}
}
.prop__stats{display:flex;flex-direction:column;gap:24px}
.stat{
  background:var(--bg-2);
  border-left:4px solid var(--teal);
  padding:24px 28px;
  border-radius:0 4px 4px 0;
}
.stat__num{
  display:block;
  font-family:var(--serif);
  font-size:1.65rem;
  font-weight:700;
  color:var(--navy);
  line-height:1.1;
  margin-bottom:6px;
}
.stat__label{
  display:block;
  font-size:.88rem;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:500;
}

/* ─────────────────────────────────────────
   CORE CAPABILITIES (3 cards)
   ───────────────────────────────────────── */
.caps{padding:68px 0;background:var(--bg-2)}
.caps__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  counter-reset:capn;
}
.cap-card{
  position:relative;
  background:#fff;
  padding:0 0 36px;
  border:1px solid var(--rule);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(14,28,48,.04),0 14px 34px -22px rgba(14,28,48,.12);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  display:flex;
  flex-direction:column;
  counter-increment:capn;
}
.cap-card::before{
  content:"";
  position:absolute;
  top:0;left:0;
  height:3px;
  width:48px;
  background:linear-gradient(90deg,var(--teal),var(--teal-dk));
  border-radius:0 0 3px 0;
  transition:width .45s var(--ease);
  z-index:2;
}
.cap-card:hover{
  transform:translateY(-8px);
  box-shadow:0 6px 12px rgba(14,28,48,.06),0 28px 60px -24px rgba(0,96,192,.32);
  border-color:rgba(0,96,192,.25);
}
.cap-card:hover::before{width:100%}
.cap-card__img{
  position:relative;
  background:var(--navy-deep);
  aspect-ratio:5/3;
  overflow:hidden;
}
.cap-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.cap-card:hover .cap-card__img img{transform:scale(1.04)}
.cap-card__img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(255,255,255,.55) 100%);
  pointer-events:none;
}
.cap-card h3{
  margin:30px 32px 14px;
  font-family:'Source Serif Pro',Georgia,serif;
  font-size:1.28rem;
  font-weight:600;
  letter-spacing:-.008em;
  line-height:1.24;
  color:var(--navy);
}
.cap-card p{
  margin:0 32px;
  font-family:'Source Serif Pro',Georgia,serif;
  font-weight:400;
  color:#2b3a52;
  font-size:1.12rem;
  line-height:1.62;
  letter-spacing:-.003em;
}

/* Black sub-text under "Our Products" heading */
.caps .sec__sub{
  font-family:'Source Serif Pro',Georgia,serif;
  font-style:normal;
  font-weight:500;
  font-size:1.1rem;
  line-height:1.55;
  color:#0a1428;
  letter-spacing:-.003em;
  max-width:680px;
  margin-top:18px;
  margin-inline:auto;
  text-align:center;
}
.cap-card .link-arrow{
  margin:22px 32px 0;
  align-self:flex-start;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--teal);
  position:relative;
  padding-bottom:2px;
}
.cap-card .link-arrow::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:0;height:1.5px;
  background:var(--teal);
  transition:width .35s var(--ease);
}
.cap-card:hover .link-arrow::after{width:100%}

/* ─────────────────────────────────────────
   PARTNERS / AFFILIATED LOGOS STRIP
   ───────────────────────────────────────── */
.partners{padding:48px 0;background:var(--bg);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.partners__heading{
  text-align:center;
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  margin-bottom:40px;
}
.partners__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
  align-items:center;
}
.partners__logo{
  text-align:center;
  font-family:var(--serif);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.12em;
  color:var(--navy);
  padding:18px 12px;
  border:1px solid var(--rule);
  border-radius:4px;
  opacity:.7;
  transition:opacity .25s var(--ease),border-color .25s var(--ease);
}
.partners__logo span{display:block;color:var(--teal);font-size:.78rem;letter-spacing:.16em;margin-top:4px}
.partners__logo:hover{opacity:1;border-color:var(--teal)}

/* ─────────────────────────────────────────
   WHY CLAREZAI (6 pillars)
   ───────────────────────────────────────── */
.why{
  padding:110px 0;
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(255,255,255,.06), transparent 65%),
    linear-gradient(180deg,#0060c0 0%,#004a8c 100%);
  color:#fff;
}
/* on the royal-blue panels, swap kicker + underline to white so they read against the gradient */
.why .kicker--animated,
.cta .kicker--animated{color:#ffffff}
.why .kicker__line,
.cta .kicker__line{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%)}
.why .kicker__line::before,
.cta .kicker__line::before{
  background:#ffffff;
  box-shadow:
    0 0 8px 2px rgba(255,255,255,.7),
    0 0 18px 4px rgba(255,255,255,.45),
    0 0 36px 10px rgba(255,255,255,.18);
}
.why .sec__head h2{color:#ffffff}
.why .sec__head h2::after{
  background:linear-gradient(90deg,transparent,#ffffff 35%,#ffffff 65%,transparent);
  box-shadow:0 0 12px rgba(255,255,255,.55);
}
.why .kicker{color:var(--teal-soft)}
.why h2{color:#fff}
.why .sec__sub{color:rgba(255,255,255,.75)}
.why__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}
.why-card{
  position:relative;
  border:1.5px solid rgba(255,255,255,.9);
  border-radius:8px;
  overflow:hidden;
  min-height:320px;
  cursor:pointer;
  outline:none;
  background:transparent;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.why-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px -18px rgba(0,15,40,.55);
}
/* BACK (revealed on peel) — brand-blue gradient matching the new .why section background */
.why-card__back{
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(255,255,255,.08), transparent 65%),
    linear-gradient(180deg,#0060c0 0%,#004a8c 100%);
  padding:38px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
/* decorative white accents above + below the reveal text */
.why-card__back::before,
.why-card__back::after{
  content:"";
  position:absolute;
  left:50%;
  width:42px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(179,212,240,.85),transparent);
  transform:translateX(-50%);
  border-radius:2px;
}
.why-card__back::before{top:24px}
.why-card__back::after{bottom:24px}
.why-card__reveal{
  color:#ffffff;
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:1.25rem;
  line-height:1.4;
  letter-spacing:-.002em;
  max-width:24ch;
  margin:0;
}
.why-card__detail{
  margin:16px 0 0;
  color:rgba(255,255,255,.88);
  font-family:var(--sans);
  font-size:.98rem;
  font-weight:400;
  line-height:1.55;
  max-width:32ch;
}
/* FRONT (resting) — white with navy text & royal-blue icon */
.why-card__front{
  position:absolute;
  inset:0;
  padding:34px 28px;
  text-align:center;
  background:#ffffff;
  clip-path:polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 0 100%);
  transition:clip-path .65s cubic-bezier(.6,.04,.3,1);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.why-card:hover .why-card__front,
.why-card:focus .why-card__front,
.why-card.is-peeled .why-card__front{
  clip-path:polygon(0 0, 0 0, 0 100%, 0 100%, 0 100%);
}
.why-card__icon{
  width:72px;
  height:72px;
  margin:0 auto 22px;
  color:var(--teal);
}
.why-card__icon svg{width:100%;height:100%}
.why-card h3{color:var(--navy);font-size:1.4rem;margin:0;font-weight:600;line-height:1.25;max-width:18ch}

/* The visible "fold" triangle — folded corner of the white front */
.why-card__peel{
  position:absolute;
  top:0;
  right:0;
  width:38px;
  height:38px;
  clip-path:polygon(100% 0, 0 0, 100% 100%);
  background:linear-gradient(225deg,#ffffff 0%,#e8eef7 55%,#9fb6d6 100%);
  pointer-events:none;
  z-index:3;
  filter:drop-shadow(-3px 3px 4px rgba(0,15,40,.28));
  transform-origin:100% 0;
  transition:transform .55s cubic-bezier(.6,.04,.3,1), opacity .35s var(--ease);
}
.why-card__peel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(225deg,transparent 55%,rgba(0,30,68,.25) 100%);
  clip-path:inherit;
}
.why-card:hover .why-card__peel,
.why-card:focus .why-card__peel,
.why-card.is-peeled .why-card__peel{
  transform:translate(-260px,260px) rotate(-30deg) scale(1.4);
  opacity:0;
}
@media (prefers-reduced-motion: reduce){
  .why-card__front,.why-card__peel{transition:none}
}

/* ─────────────────────────────────────────
   "WHAT WE DO" — 8 capabilities grid (Capabilities page)
   ───────────────────────────────────────── */
.do-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:56px;
  counter-reset:docount;
}
.do-card{
  position:relative;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:10px;
  padding:36px 24px 28px;
  text-align:left;
  overflow:hidden;
  counter-increment:docount;
  box-shadow:0 2px 6px rgba(14,28,48,.04),0 14px 34px -22px rgba(14,28,48,.12);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.do-card::before{
  content:"";
  position:absolute;
  top:0;left:0;
  height:3px;width:36px;
  background:linear-gradient(90deg,var(--teal),var(--teal-dk));
  border-radius:0 0 3px 0;
  transition:width .45s var(--ease);
}
.do-card::after{
  content:"";
  position:absolute;
  right:18px;top:18px;
  width:36px;height:36px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(0,96,192,.18),rgba(0,96,192,0) 70%);
  opacity:0;
  transition:opacity .45s var(--ease);
}
.do-card:hover{
  transform:translateY(-6px);
  box-shadow:0 6px 12px rgba(14,28,48,.06),0 24px 50px -22px rgba(0,96,192,.32);
  border-color:rgba(0,96,192,.25);
}
.do-card:hover::before{width:100%}
.do-card:hover::after{opacity:1}
.do-card__num{display:none}
.do-card h3{
  font-family:var(--serif);
  font-size:1.08rem;
  font-weight:600;
  color:var(--navy);
  margin:0 0 10px;
  line-height:1.3;
  letter-spacing:-.005em;
}
.do-card p{
  color:#2b3a52;
  font-size:.92rem;
  line-height:1.55;
  margin:0;
}
@media (max-width:1100px){.do-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.do-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.do-grid{grid-template-columns:1fr}}

/* ─────────────────────────────────────────
   TEAM (Who We Are page)
   ───────────────────────────────────────── */
.team{padding:100px 0;background:var(--bg-2)}
/* Refined editorial sub-text under "Our Team" heading */
.team .sec__sub{
  font-family:'Source Serif Pro',Georgia,serif;
  font-style:normal;
  font-weight:400;
  font-size:1.12rem;
  line-height:1.6;
  color:var(--navy);
  letter-spacing:-.003em;
  max-width:720px;
  margin-top:20px;
  margin-inline:auto;
  text-align:center;
  background:linear-gradient(120deg,var(--navy) 0%,var(--teal-dk) 70%,var(--teal) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.team__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px 32px;
}
.team-card{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:14px;
  padding:46px 32px 38px;
  text-align:center;
  box-shadow:0 4px 12px rgba(14,28,48,.05),0 22px 48px -22px rgba(14,28,48,.16);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.team-card:hover{
  transform:translateY(-8px);
  box-shadow:0 8px 18px rgba(14,28,48,.07),0 36px 76px -24px rgba(0,96,192,.36);
  border-color:rgba(0,96,192,.25);
}
.team-card__avatar{
  position:relative;
  width:170px;
  height:170px;
  margin:0 auto 26px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--navy-deep) 0%,var(--teal-dk) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 5px #fff, 0 0 0 6px rgba(0,96,192,.35), 0 22px 38px -16px rgba(0,30,68,.55);
  overflow:hidden;
}
.team-card__initials{
  font-family:'Source Serif Pro','Crimson Pro',Georgia,serif;
  font-weight:700;
  font-size:3rem;
  color:#fff;
  letter-spacing:.02em;
  text-shadow:0 2px 14px rgba(0,30,68,.4);
}
.team-card__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.team-card__name{
  font-family:'Source Serif Pro',Georgia,serif;
  font-weight:700;
  font-size:1.5rem;
  color:var(--navy);
  margin:0 0 8px;
  letter-spacing:-.012em;
  line-height:1.18;
}
.team-card__title{
  font-family:'Inter',sans-serif;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 10px;
  line-height:1.32;
}
.team-card__cred{
  font-family:'Source Serif Pro',Georgia,serif;
  font-size:1.04rem;
  font-weight:500;
  color:#5b6a82;
  margin:0 0 20px;
  line-height:1.5;
  letter-spacing:-.003em;
}
/* Co-founder/sub-role suffix inside the title */
.team-card__role{
  font-weight:500;
  letter-spacing:.08em;
  color:#7b8aa3;
  text-transform:none;
  font-size:.85em;
  font-style:italic;
}
/* Expertise bullet list below credentials */
.team-card__expertise{
  list-style:none;
  padding:0;
  margin:0;
  text-align:left;
  border-top:1px solid var(--rule);
  padding-top:16px;
}
.team-card__expertise li{
  position:relative;
  padding:8px 0 8px 24px;
  font-family:'Crimson Pro',Georgia,serif;
  font-style:italic;
  font-size:1.06rem;
  line-height:1.5;
  color:#4a5972;
}
.team-card__expertise li::before{
  content:"";
  position:absolute;
  left:0;
  top:17px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--teal-dk));
  box-shadow:0 0 0 3px rgba(0,96,192,.12);
}

/* Track record stats strip */
.team__stats{
  margin-top:56px;
  padding:28px 32px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
  background:linear-gradient(135deg,var(--navy-deep) 0%,#142544 100%);
  border-radius:14px;
  box-shadow:0 18px 44px -22px rgba(0,30,68,.5);
}
.team-stat{display:flex;flex-direction:column;gap:6px;padding:8px 12px}
.team-stat + .team-stat{border-left:1px solid rgba(255,255,255,.12)}
.team-stat strong{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.7rem,2.6vw,2.2rem);
  line-height:1;
  background:linear-gradient(135deg,#7fc9dc 0%,#4a90e2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#7fc9dc;
  letter-spacing:-.01em;
}
.team-stat span{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}

/* Partnership / Collaboration block */
.team__partners{
  margin-top:48px;
  padding:32px 28px;
  text-align:center;
  background:linear-gradient(180deg,#f4f8ff 0%,#ffffff 100%);
  border:1px solid rgba(0,96,192,.12);
  border-radius:14px;
}
.team__partners-tag{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.2vw,1.9rem);
  font-weight:700;
  color:var(--navy);
  margin:8px 0 12px;
  letter-spacing:-.01em;
}
.team__partners-tag strong{
  color:var(--teal);
  font-weight:700;
}
.team__partners-tag span{
  margin:0 14px;
  color:rgba(0,96,192,.4);
  font-weight:400;
}
.team__partners-line{
  font-family:"Crimson Pro", Georgia, serif;
  font-style:italic;
  font-size:1.02rem;
  line-height:1.55;
  color:#2b3a52;
  margin:0;
  max-width:680px;
  margin-left:auto;margin-right:auto;
}

@media (max-width:900px){
  .team__grid{grid-template-columns:repeat(2,1fr)}
  .team__stats{grid-template-columns:repeat(2,1fr);padding:24px}
  .team-stat:nth-child(2){border-left:none}
}
@media (max-width:620px){
  .team__grid{grid-template-columns:1fr;gap:28px}
  .team{padding:72px 0}
  .team__stats{grid-template-columns:1fr;gap:18px}
  .team-stat + .team-stat{border-left:none;border-top:1px solid rgba(255,255,255,.12);padding-top:16px}
  .team-card__avatar{width:104px;height:104px}
}

/* ─────────────────────────────────────────
   STRATEGIC FOCUS AREAS
   ───────────────────────────────────────── */
.focus{padding:110px 0;background:var(--bg)}
.focus__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.focus-card{
  position:relative;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(14,28,48,.04),0 14px 34px -22px rgba(14,28,48,.12);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.focus-card::after{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--teal),var(--teal-dk));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .5s var(--ease);
  z-index:2;
}
.focus-card:hover{
  transform:translateY(-8px);
  box-shadow:0 6px 12px rgba(14,28,48,.06),0 28px 60px -24px rgba(0,96,192,.32);
  border-color:rgba(0,96,192,.25);
}
.focus-card:hover::after{transform:scaleY(1)}
.focus-card__img{
  position:relative;
  background:var(--navy-deep);
  aspect-ratio:16/10;
  overflow:hidden;
}
.focus-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.focus-card:hover .focus-card__img img{transform:scale(1.04)}
.focus-card__img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.55) 100%);
  pointer-events:none;
}
.focus-card__body{padding:28px 30px 34px}
.focus-card__tag{
  display:inline-block;
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--teal);
  background:rgba(0,96,192,.08);
  padding:5px 11px;
  border-radius:3px;
  margin-bottom:14px;
}
.focus-card h3{
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:12px;
  letter-spacing:-.005em;
  color:var(--navy);
}
.focus-card p{color:#2b3a52;font-size:.96rem;line-height:1.65}

/* ─────────────────────────────────────────
   TESTIMONIALS
   ───────────────────────────────────────── */
.testimonials{padding:110px 0;background:var(--bg-2)}
.testimonials__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:36px;
}
.quote{
  background:#fff;
  padding:48px 44px 40px;
  border-radius:6px;
  position:relative;
  border-left:4px solid var(--teal);
}
.quote__mark{
  position:absolute;
  top:18px;
  left:32px;
  font-family:var(--serif);
  font-size:4.5rem;
  line-height:1;
  color:var(--teal);
  opacity:.25;
}
.quote p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.16rem;
  line-height:1.55;
  color:var(--navy);
  margin-bottom:24px;
  margin-top:24px;
}
.quote cite{font-style:normal;display:block}
.quote cite strong{
  display:block;
  font-weight:700;
  color:var(--navy);
  font-size:.98rem;
}
.quote cite span{
  display:block;
  font-size:.86rem;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:500;
  margin-top:4px;
}

/* ─────────────────────────────────────────
   CTA "LET'S WORK TOGETHER"
   ───────────────────────────────────────── */
.cta{
  position:relative;
  padding:72px 0;
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(0,96,192,.28), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(0,96,192,.18), transparent 65%),
    linear-gradient(180deg,#0e1c30 0%,#13284a 100%);
  color:#ffffff;
  text-align:center;
  border-bottom:1px solid rgba(0,209,209,.22);
}
.cta::after{
  content:"";
  position:absolute;
  bottom:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--teal) 35%,#4a90e2 50%,var(--teal) 65%,transparent 100%);
  opacity:.9;
}
.cta__inner{max-width:780px;margin:0 auto;position:relative;z-index:1}
.cta__eyebrow{
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  background:linear-gradient(90deg,#7fc9dc 0%,#4a90e2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#7fc9dc;
  margin-bottom:18px;
}
.cta h2{
  color:#ffffff;
  font-family:'Source Serif Pro',Georgia,serif;
  font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.8rem);
  line-height:1.16;
  letter-spacing:-.014em;
  margin-bottom:16px;
}
.cta h2 em{
  font-family:'Crimson Pro',Georgia,serif;
  font-style:italic;
  font-weight:600;
  background:linear-gradient(120deg,#00D1D1 0%,#7fc9dc 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#7fc9dc;
}
.cta__lead{
  font-family:'Source Serif Pro',Georgia,serif;
  font-size:1.08rem;
  font-weight:400;
  line-height:1.55;
  color:rgba(255,255,255,.86);
  margin-bottom:30px;
  max-width:620px;
  margin-left:auto;margin-right:auto;
}
.cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.cta .btn--solid{
  background:#ffffff;
  color:var(--teal-dk);
  border-color:#ffffff;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.cta .btn--solid:hover{
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
  box-shadow:0 14px 32px -14px rgba(0,209,209,.55);
  transform:translateY(-2px);
}
.cta .btn--ghost{color:#ffffff;border-color:rgba(255,255,255,.55);background:transparent}
.cta .btn--ghost:hover{background:#ffffff;color:var(--teal-dk);border-color:#ffffff}
/* Kicker recolor for dark CTA bg */
.cta .kicker--animated{color:#7fc9dc}
.cta .kicker__line{background:linear-gradient(90deg,rgba(127,201,220,0) 0%,rgba(127,201,220,.55) 50%,rgba(127,201,220,0) 100%)}
.cta .kicker__line::before{
  background:#00D1D1;
  box-shadow:
    0 0 8px 2px rgba(0,209,209,.7),
    0 0 18px 4px rgba(0,209,209,.45),
    0 0 36px 10px rgba(0,209,209,.22);
}

/* White-variant CTA (used on the Who We Are page) */
.cta.cta--light{
  background:#ffffff;
  color:var(--navy);
}
.cta.cta--light .cta__eyebrow{color:var(--teal)}
.cta.cta--light h2{color:var(--navy)}
.cta.cta--light .cta__lead{color:#2b3a52}
.cta.cta--light .btn--solid{background:var(--teal);color:#fff;border-color:var(--teal)}
.cta.cta--light .btn--solid:hover{background:var(--teal-dk);border-color:var(--teal-dk);color:#fff;box-shadow:0 14px 32px -14px rgba(0,96,192,.55)}
.cta.cta--light .btn--ghost{color:var(--navy);border-color:var(--navy);background:transparent}
.cta.cta--light .btn--ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* if the animated kicker is used here later, flip its colors back to royal blue on white */
.cta.cta--light .kicker--animated{color:var(--teal)}
.cta.cta--light .kicker__line{background:linear-gradient(90deg,rgba(0,96,192,0) 0%,rgba(0,96,192,.45) 50%,rgba(0,96,192,0) 100%)}
.cta.cta--light .kicker__line::before{
  background:var(--teal);
  box-shadow:
    0 0 8px 2px rgba(0,96,192,.65),
    0 0 18px 4px rgba(0,96,192,.4),
    0 0 36px 10px rgba(0,96,192,.18);
}

/* ─────────────────────────────────────────
   CAREERS
   ───────────────────────────────────────── */
.careers{padding:100px 0;background:var(--bg)}
.careers__inner{
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:80px;
  align-items:center;
}
.careers__copy h2{margin-bottom:20px}
.careers__copy .btn{margin-top:26px}
.careers__visual{display:flex;justify-content:center}
.careers__badge{
  width:220px;
  height:220px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--navy) 0%,var(--teal) 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--serif);
  font-weight:700;
  font-size:1.4rem;
  line-height:1.4;
  letter-spacing:.06em;
  box-shadow:0 24px 60px -22px rgba(26,44,71,.45);
}

/* ─────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────── */
.footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:72px 0 32px}
.footer__top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer__brand .footer__logo{height:64px;width:auto;background:#fff;padding:8px 12px;border-radius:4px;margin-bottom:18px;display:block}
.footer__brand p{font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.7);max-width:32ch}
.footer__col h4{
  color:#fff;
  font-family:var(--sans);
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.footer__col ul{list-style:none}
.footer__col li{margin-bottom:10px}
.footer__col a{font-size:.94rem;color:rgba(255,255,255,.7);transition:color .2s var(--ease)}
.footer__col a:hover{color:var(--teal-soft)}
.footer__social{display:flex;gap:10px;flex-direction:row !important}
.footer__social li{margin:0 !important}
.footer__social a{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:var(--serif);
  font-weight:700;
  font-size:.95rem;
  transition:background .2s var(--ease)
}
.footer__social a:hover{background:var(--teal)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:24px;font-size:.85rem;color:rgba(255,255,255,.5)}

/* ─────────────────────────────────────────
   REVEAL (scroll animation)
   ───────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ─────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────── */
@media (max-width:1000px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav.is-open .nav__links{
    display:flex;
    position:absolute;
    top:90px;
    left:0;right:0;
    flex-direction:column;
    background:#fff;
    border-bottom:1px solid var(--rule);
    padding:18px 32px;
    gap:0;
  }
  .nav.is-open .nav__links a{padding:14px 0;border-bottom:1px solid var(--rule);width:100%}
  .nav.is-open .nav__cta{margin-top:10px;text-align:center}

  .prop__inner,
  .careers__inner{grid-template-columns:1fr;gap:48px}
  .caps__grid,
  .focus__grid{grid-template-columns:1fr}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .partners__grid{grid-template-columns:repeat(3,1fr)}
  .testimonials__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:900px){
  .hero{aspect-ratio:auto;min-height:520px;padding:120px 0 80px}
  .hero__inner{margin:0 auto;padding:0 28px;max-width:720px}
  .hero__veil{background:linear-gradient(180deg,rgba(12,26,44,.4) 0%,rgba(12,26,44,.55) 60%,var(--bg) 100%)}
  .hero__bg{background-position:center}
}
@media (max-width:620px){
  .wrap{padding:0 22px}
  .hero{min-height:440px;padding:96px 0 64px}
  .hero__inner{padding:0 22px}
  .prop,.caps,.why,.focus,.testimonials,.cta,.careers{padding:72px 0}
  .why__grid{grid-template-columns:1fr}
  .partners__grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr}
  .brand__logo{height:48px}
  .nav__links a{font-size:1.08rem}
  .pagehead{padding:130px 0 60px}
  .pagehead__inner h1{font-size:clamp(2rem,7vw,2.6rem)}
  .contact-page__grid{grid-template-columns:1fr;gap:36px}
  .cform__row{grid-template-columns:1fr;gap:18px}
}

/* ─────────────────────────────────────────
   PAGE HEADER (sub-pages)
   ───────────────────────────────────────── */
.pagehead{position:relative;padding:170px 0 80px;background:linear-gradient(180deg,#0e1c30 0%,#13284a 100%);color:#fff;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 15% 30%,rgba(0,96,192,.28),transparent 60%),radial-gradient(50% 60% at 85% 70%,rgba(0,96,192,.18),transparent 65%);pointer-events:none}
.pagehead__inner{position:relative;max-width:880px}
.pagehead__inner .kicker{color:var(--teal-soft)}
.pagehead__inner h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,4.8vw,3.6rem);line-height:1.1;letter-spacing:-.015em;color:#fff;margin:8px 0 18px}
.pagehead__inner h1 em{font-style:italic;color:var(--teal-soft);font-weight:600}
.pagehead__lead{font-family:'Crimson Pro',Georgia,serif;font-size:clamp(1.1rem,1.6vw,1.35rem);color:rgba(255,255,255,.85);max-width:62ch;line-height:1.5}

/* current-page nav indicator */
.nav__links a.is-current{color:var(--teal)}
.nav__links a.is-current::after{right:0}

/* ─────────────────────────────────────────
   CONTACT PAGE
   ───────────────────────────────────────── */
.contact-page{
  padding:90px 0;
  background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%);
  position:relative;
  overflow:hidden;
}
.contact-page::before,
.contact-page::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
}
.contact-page::before{background:radial-gradient(circle,rgba(0,209,209,.14) 0%,transparent 70%);top:-180px;left:-180px}
.contact-page::after{background:radial-gradient(circle,rgba(0,96,192,.13) 0%,transparent 70%);bottom:-200px;right:-200px}
.contact-page .wrap{position:relative;z-index:1}
.contact-page__grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:48px;align-items:start}

/* Elegant + vibrant contact info panel */
.contact-page__meta{
  position:relative;
  background:#ffffff;
  border:1px solid rgba(0,96,192,.10);
  border-radius:18px;
  padding:36px 32px 32px;
  box-shadow:0 4px 18px rgba(8,27,51,.04),0 28px 60px -28px rgba(0,96,192,.22);
  overflow:hidden;
}
.contact-page__meta::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--teal) 0%,#4a90e2 50%,#7fc9dc 100%);
}
.contact-page__meta h3{
  font-family:'Source Serif Pro',Georgia,serif;
  font-weight:700;
  font-size:1.55rem;
  letter-spacing:-.014em;
  line-height:1.18;
  color:var(--navy);
  margin:0 0 22px;
  background:linear-gradient(120deg,var(--navy) 0%,var(--teal-dk) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.contact-meta{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.contact-meta li{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 18px 16px 22px;
  background:linear-gradient(90deg,rgba(0,209,209,.05) 0%,rgba(0,96,192,.05) 100%);
  border-radius:12px;
  border-top:none;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.contact-meta li::before{
  content:"";
  position:absolute;
  left:0;top:14px;bottom:14px;
  width:3px;
  border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,var(--teal) 0%,var(--teal-dk) 100%);
  opacity:.7;
  transition:opacity .3s var(--ease),width .3s var(--ease);
}
.contact-meta li:hover{
  background:linear-gradient(90deg,rgba(0,209,209,.1) 0%,rgba(0,96,192,.08) 100%);
  transform:translateX(2px);
}
.contact-meta li:hover::before{opacity:1;width:4px}
.contact-meta li:first-child{padding-top:18px}
.contact-meta span{
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:700;
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal-dk) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--teal);
}
.contact-meta a,
.contact-meta p{
  margin:0;
  font-family:'Source Serif Pro',Georgia,serif;
  color:var(--navy);
  font-weight:500;
  font-size:1.06rem;
  line-height:1.5;
  letter-spacing:-.005em;
}
.contact-meta a:hover{color:var(--teal)}

.cform{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  padding:36px;
  border-radius:18px;
  border:1px solid rgba(0,96,192,.10);
  box-shadow:0 4px 18px rgba(8,27,51,.04),0 28px 60px -28px rgba(0,96,192,.22);
  overflow:hidden;
}
.cform::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,#7fc9dc 0%,var(--teal) 50%,#4a90e2 100%);
}
/* Jotform-embedded form wrapper — keeps the card chrome around the iframe */
.cform.jotform-wrap{padding:0;background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);overflow:hidden}

@media (max-width:900px){
  .contact-page__grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:620px){
  .contact-page{padding:64px 0}
  .contact-page__meta,.cform{padding:28px 22px 24px;border-radius:14px}
}
.cform.jotform-wrap iframe{
  display:block;
  width:100%;
  min-width:100%;
  border:0;
  background:transparent;
  min-height:640px;
}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field__label{font-size:.85rem;font-weight:600;color:var(--navy);letter-spacing:.02em}
.field__label i{color:var(--teal);font-style:normal}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;color:var(--navy);background:#fff;border:1px solid var(--rule);border-radius:4px;padding:12px 14px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,96,192,.15)}
.field textarea{resize:vertical;min-height:120px}
.field__error{font-size:.82rem;color:#c92a2a;min-height:1em}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:#c92a2a}
.cform__submit{margin-top:8px}
.cform__status{margin:14px 0 0;font-size:.92rem;opacity:0;transition:opacity .2s var(--ease)}
.cform__status.is-visible{opacity:1}
.cform__status.is-ok{color:#0a7a3b}
.cform__status.is-error{color:#c92a2a}


/* ── PRODUCTS (rebrand of Capabilities) — 4-card grid + brand subtitle + per-product theming */
.caps__grid--four{
  display:grid;
  grid-template-columns:1fr;               /* one card per row */
  gap:32px;
  max-width:1100px;                        /* keeps the card from getting too wide on large screens */
  margin-left:auto;
  margin-right:auto;
}
/* Our Products cards — enlarged from the default cap-card size, text pushed down */
.caps__grid--four .cap-card{
  padding:0 0 56px;                        /* taller cards */
  border-radius:14px;                      /* softer corners */
  min-height:340px;                        /* enforces taller card baseline */
}
.caps__grid--four .cap-card::before{
  height:4px;
  width:72px;                              /* wider accent strip */
}
/* Push text further down inside each card */
.caps__grid--four .cap-card__brand{
  margin:64px 48px 10px;                   /* was 36px → 64px top — text starts lower */
  font-size:.82rem;                        /* slightly larger brand label */
  letter-spacing:.24em;
}
.caps__grid--four .cap-card h3{
  margin:0 48px 20px;                      /* spacing controlled by brand label above */
  font-size:1.7rem;                        /* larger title (was 1.55) */
  line-height:1.2;
  letter-spacing:-.008em;
}
.caps__grid--four .cap-card p{
  margin:0 48px;
  font-size:1.08rem;                       /* slightly larger body */
  line-height:1.72;
}
.caps__grid--four .cap-card .link-arrow{
  margin:32px 48px 0;                      /* more spacing before CTA */
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.04em;
}
/* Keep the global cap-card__brand defaults for other places where it's used */
.cap-card__brand{
  margin:30px 32px 8px;
  font-family:"Inter", sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--teal);
}
.cap-card:not(:has(.cap-card__img)) h3{margin-top:6px}
/* Card 1 (MA) — teal #118ab2 matching clarezai-ma.html hero highlight */
.cap-card--p1 .cap-card__brand{color:#118ab2}
.cap-card--p1::before{background:linear-gradient(90deg,#7fc9dc,#118ab2)}
.cap-card--p1:hover{box-shadow:0 6px 12px rgba(17,138,178,.08),0 28px 60px -24px rgba(17,138,178,.42)}
.cap-card--p1 .link-arrow{color:#118ab2}
.cap-card--p1 .link-arrow::after{background:#118ab2}

/* Card 2 (CASExAI) — amber-gold #ffd166 matching casexai.html hero highlight */
.cap-card--p2 .cap-card__brand{color:#c9a040}
.cap-card--p2::before{background:linear-gradient(90deg,#ffd166,#c9a040)}
.cap-card--p2:hover{box-shadow:0 6px 12px rgba(201,160,64,.1),0 28px 60px -24px rgba(255,209,102,.45)}
.cap-card--p2 .link-arrow{color:#c9a040}
.cap-card--p2 .link-arrow::after{background:#c9a040}

/* Card 3 (NRSS) — brand blue #0060c0 (was mint-green, switched to blue per brand) */
.cap-card--p3 .cap-card__brand{color:#0060c0}
.cap-card--p3::before{background:linear-gradient(90deg,#4a90e2,#0060c0)}
.cap-card--p3:hover{box-shadow:0 6px 12px rgba(0,96,192,.1),0 28px 60px -24px rgba(0,96,192,.42)}
.cap-card--p3 .link-arrow{color:#0060c0}
.cap-card--p3 .link-arrow::after{background:#0060c0}

/* Card 4 (ClinomicsAI) — violet #936cd1 matching clinomicsai.html hero highlight */
.cap-card--p4 .cap-card__brand{color:#7a55b8}
.cap-card--p4::before{background:linear-gradient(90deg,#c4a5e8,#936cd1)}
.cap-card--p4:hover{box-shadow:0 6px 12px rgba(147,108,209,.1),0 28px 60px -24px rgba(147,108,209,.42)}
.cap-card--p4 .link-arrow{color:#7a55b8}
.cap-card--p4 .link-arrow::after{background:#7a55b8}
.cap-card--p4:hover{box-shadow:0 6px 12px rgba(67,102,216,.08),0 28px 60px -24px rgba(67,102,216,.42)}

/* ── PRODUCTS PAGE — detailed product sections */
.product{
  padding:80px 0;
  background:#fff;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.product:nth-of-type(even){background:#f8fafc}
.product__inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:start;
}
@media (max-width:900px){
  .product__inner{grid-template-columns:1fr;gap:32px}
}
.product__brand{
  font-family:"Inter", sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 14px;
  color:var(--teal);
}
.product__copy h2{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:clamp(2rem,3.6vw,2.8rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.012em;
  color:var(--navy);
  margin:0 0 18px;
}
.product__lead{
  font-family:"Crimson Pro", Georgia, serif;
  font-size:1.18rem;
  line-height:1.6;
  color:#2b3a52;
  margin:0;
  max-width:54ch;
}
.product__caps-title{
  font-family:"Inter", sans-serif;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  margin:0 0 18px;
}
.product__caps-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.product__caps-list li{
  padding:14px 18px 14px 44px;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:8px;
  position:relative;
  font-size:1rem;
  color:#1f3a8a;
  font-weight:500;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.product__caps-list li::before{
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dk) 100%);
  box-shadow:0 0 0 4px rgba(0,128,128,.12);
}
.product__caps-list li:hover{
  transform:translateX(4px);
  border-color:rgba(0,128,128,.4);
  box-shadow:0 4px 14px rgba(0,128,128,.1);
}
.product:nth-of-type(even) .product__caps-list li{background:#fff}

/* per-product theming for the details sections */
.product--p2 .product__brand{color:#d97e3d}
.product--p2 .product__caps-list li{color:#7a4a1f}
.product--p2 .product__caps-list li::before{background:linear-gradient(135deg,#f5a623 0%,#d97e3d 100%);box-shadow:0 0 0 4px rgba(217,126,61,.15)}
.product--p2 .product__caps-list li:hover{border-color:rgba(217,126,61,.4);box-shadow:0 4px 14px rgba(217,126,61,.12)}

.product--p3 .product__brand{color:#A95EA3}
.product--p3 .product__caps-list li{color:#6b3380}
.product--p3 .product__caps-list li::before{background:linear-gradient(135deg,#c084d1 0%,#A95EA3 100%);box-shadow:0 0 0 4px rgba(169,94,163,.15)}
.product--p3 .product__caps-list li:hover{border-color:rgba(169,94,163,.4);box-shadow:0 4px 14px rgba(169,94,163,.12)}

.product--p4 .product__brand{color:#4366d8}
.product--p4 .product__caps-list li{color:#1f3a8a}
.product--p4 .product__caps-list li::before{background:linear-gradient(135deg,#6ba1d4 0%,#4366d8 100%);box-shadow:0 0 0 4px rgba(67,102,216,.15)}
.product--p4 .product__caps-list li:hover{border-color:rgba(67,102,216,.4);box-shadow:0 4px 14px rgba(67,102,216,.12)}

/* Strategic Value list — the 6 outcomes on products.html */
.value-list{
  list-style:none;
  padding:0;
  margin:28px 0 0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
@media (max-width:700px){.value-list{grid-template-columns:1fr}}
.value-list li{
  padding:18px 20px 18px 44px;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:8px;
  position:relative;
  font-family:"Inter", sans-serif;
  font-size:.98rem;
  font-weight:500;
  color:var(--navy);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.value-list li::before{
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--teal-dk));
  box-shadow:0 0 0 4px rgba(0,128,128,.15);
}
.value-list li:hover{border-color:rgba(0,128,128,.4);box-shadow:0 4px 14px rgba(0,128,128,.08)}


/* ══════════════════════════════════════════════════════════════════════
   WHY CHOOSE CLAREZAI — full benefits section with glassmorphism
   ══════════════════════════════════════════════════════════════════════ */
.whyc{
  position:relative;
  padding:78px 0 72px;
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(0,96,192,.28), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(0,96,192,.18), transparent 65%),
    linear-gradient(180deg,#0e1c30 0%,#13284a 100%);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.whyc__bg-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(80px);
  z-index:0;
}
.whyc__bg-glow--a{top:-10%;right:-8%;width:600px;height:600px;background:radial-gradient(circle,rgba(74,144,226,.18) 0%,transparent 70%);}
.whyc__bg-glow--b{bottom:-15%;left:-10%;width:520px;height:520px;background:radial-gradient(circle,rgba(67,102,216,.14) 0%,transparent 70%);}
.whyc .wrap{position:relative;z-index:1}

.whyc__head{text-align:center;max-width:820px;margin:0 auto 64px}
.whyc__head .kicker__line{background:linear-gradient(90deg,transparent 0%,rgba(74,144,226,.65) 100%)}
.whyc__head .kicker__line--right{background:linear-gradient(90deg,rgba(74,144,226,.65) 0%,transparent 100%)}
.whyc__head .kicker__text{color:#7fc9dc;font-weight:700}
.whyc__head .kicker__line::before{
  background:#4a90e2;
  box-shadow:
    0 0 8px 2px rgba(74,144,226,.7),
    0 0 18px 4px rgba(0,96,192,.45),
    0 0 36px 10px rgba(0,96,192,.22);
}
.whyc__head h2{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:clamp(2.2rem,4.4vw,3.4rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  color:#fff;
  margin:18px 0 20px;
}
.whyc__head h2 em{
  font-style:italic;
  font-weight:700;
  background:linear-gradient(90deg,#4a90e2 0%,#7fc9dc 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#7fc9dc;
}
.whyc__lead{font-size:1.1rem;line-height:1.7;color:rgba(255,255,255,.78);margin:0}

.whyc__subhead{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
  text-align:center;
  margin:72px 0 32px;
}

/* 4 benefit cards — 2x2 glassmorphism */
.whyc__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media (max-width:860px){.whyc__grid{grid-template-columns:1fr}}
.whyc-card{
  position:relative;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:36px 32px 28px;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),
             border-color .45s cubic-bezier(.22,.61,.36,1),
             box-shadow .45s cubic-bezier(.22,.61,.36,1);
  overflow:hidden;
}
.whyc-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  border-radius:18px 18px 0 0;
}
.whyc-card:hover{transform:translateY(-6px)}
.whyc-card__icon{
  width:60px;height:60px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .4s ease, background .4s ease, border-color .4s ease;
}
.whyc-card__icon svg{width:28px;height:28px}
.whyc-card:hover .whyc-card__icon{transform:scale(1.05)}
.whyc-card h4{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:1.3rem;
  font-weight:700;
  margin:0 0 14px;
  color:#fff;
  letter-spacing:-.005em;
  line-height:1.25;
}
.whyc-card > p{font-size:1rem;line-height:1.65;color:rgba(255,255,255,.75);margin:0 0 18px}
.whyc-card__benefit{
  padding:14px 16px;
  border-radius:8px;
  font-size:.95rem;
  line-height:1.55;
  color:rgba(255,255,255,.92);
  border-left:3px solid;
  background:rgba(255,255,255,.04);
  margin:0;
}
.whyc-card__benefit strong{font-weight:700}

/* Per-card theme colors */
.whyc-card--p1::before{background:linear-gradient(90deg,#4a90e2,#0060c0)}
.whyc-card--p1 .whyc-card__icon{background:rgba(74,144,226,.14);border-color:rgba(74,144,226,.32);color:#7fc9dc}
.whyc-card--p1:hover{border-color:rgba(74,144,226,.4);box-shadow:0 0 50px rgba(0,96,192,.2)}
.whyc-card--p1 .whyc-card__benefit{border-left-color:#4a90e2;background:rgba(0,96,192,.08)}

.whyc-card--p2::before{background:linear-gradient(90deg,#f5a623,#d97e3d)}
.whyc-card--p2 .whyc-card__icon{background:rgba(245,166,35,.12);border-color:rgba(245,166,35,.3);color:#f5a623}
.whyc-card--p2:hover{border-color:rgba(245,166,35,.4);box-shadow:0 0 50px rgba(245,166,35,.18)}
.whyc-card--p2 .whyc-card__benefit{border-left-color:#f5a623;background:rgba(245,166,35,.07)}

.whyc-card--p3::before{background:linear-gradient(90deg,#c084d1,#A95EA3)}
.whyc-card--p3 .whyc-card__icon{background:rgba(169,94,163,.14);border-color:rgba(169,94,163,.3);color:#c084d1}
.whyc-card--p3:hover{border-color:rgba(169,94,163,.4);box-shadow:0 0 50px rgba(169,94,163,.18)}
.whyc-card--p3 .whyc-card__benefit{border-left-color:#c084d1;background:rgba(169,94,163,.07)}

.whyc-card--p4::before{background:linear-gradient(90deg,#6ba1d4,#4366d8)}
.whyc-card--p4 .whyc-card__icon{background:rgba(67,102,216,.14);border-color:rgba(67,102,216,.3);color:#6ba1d4}
.whyc-card--p4:hover{border-color:rgba(67,102,216,.4);box-shadow:0 0 50px rgba(67,102,216,.18)}
.whyc-card--p4 .whyc-card__benefit{border-left-color:#6ba1d4;background:rgba(67,102,216,.07)}

/* Comparison table */
.whyc__compare-wrap{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
}
.whyc__compare{width:100%;border-collapse:separate;border-spacing:0}
.whyc__compare thead th{
  padding:22px 28px;
  text-align:left;
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
  letter-spacing:-.005em;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.whyc__compare thead th:last-child{
  background:linear-gradient(135deg,rgba(0,209,209,.16) 0%,rgba(0,128,128,.08) 100%);
  color:#00D1D1;
}
.whyc__compare tbody td{
  padding:18px 28px;
  font-size:1rem;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:rgba(255,255,255,.7);
  vertical-align:top;
  transition:background .3s ease;
}
.whyc__compare tbody td:first-child{position:relative;padding-left:50px}
.whyc__compare tbody td:first-child::before{
  content:"\2715";
  position:absolute;
  left:24px;top:18px;
  color:rgba(255,255,255,.35);
  font-weight:700;
  font-size:.95rem;
}
.whyc__compare tbody td:last-child{
  color:#fff;
  font-weight:500;
  background:rgba(0,209,209,.04);
  position:relative;
  padding-left:50px;
}
.whyc__compare tbody td:last-child::before{
  content:"\2713";
  position:absolute;
  left:24px;top:18px;
  color:#00D1D1;
  font-weight:700;
  font-size:1.05rem;
}
.whyc__compare tbody tr:last-child td{border-bottom:none}
.whyc__compare tbody tr:hover td{background:rgba(255,255,255,.04)}
.whyc__compare tbody tr:hover td:last-child{background:rgba(0,209,209,.08)}
@media (max-width:700px){
  .whyc__compare thead th,.whyc__compare tbody td{padding:14px 18px;font-size:.92rem}
  .whyc__compare tbody td:first-child,.whyc__compare tbody td:last-child{padding-left:38px}
  .whyc__compare tbody td:first-child::before,.whyc__compare tbody td:last-child::before{left:16px}
}

/* Impact checklist */
.whyc__impact{
  list-style:none;padding:0;margin:0 auto;
  max-width:920px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
@media (max-width:700px){.whyc__impact{grid-template-columns:1fr}}
.whyc__impact li{
  position:relative;
  padding:18px 22px 18px 56px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  color:rgba(255,255,255,.92);
  font-weight:500;
  font-size:1rem;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.whyc__impact li::before{
  content:"\2713";
  position:absolute;
  left:18px;top:50%;
  transform:translateY(-50%);
  width:26px;height:26px;
  background:linear-gradient(135deg,#4a90e2 0%,#0060c0 100%);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  box-shadow:0 0 0 4px rgba(74,144,226,.14);
}
.whyc__impact li:hover{background:rgba(74,144,226,.06);border-color:rgba(74,144,226,.32);transform:translateX(4px)}

/* Closing tagline + CTA */
.whyc__closing{text-align:center;max-width:780px;margin:80px auto 0}
.whyc__closing h3{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.012em;
  color:#fff;
  margin:0 0 20px;
}
.whyc__closing h3 em{
  font-style:italic;
  font-weight:700;
  background:linear-gradient(90deg,#4a90e2 0%,#7fc9dc 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#7fc9dc;
}
.whyc__closing p{font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.8);margin:0 0 32px}
.whyc__cta{
  background:linear-gradient(135deg,#4a90e2 0%,#0060c0 100%);
  color:#ffffff;
  border:none;
  box-shadow:0 8px 24px rgba(0,96,192,.36);
  font-weight:700;
  transition:transform .35s ease, box-shadow .35s ease;
}
.whyc__cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,96,192,.5)}

@media (max-width:700px){
  .whyc{padding:80px 0 70px}
  .whyc__head{margin-bottom:48px}
  .whyc__subhead{margin:56px 0 24px}
  .whyc-card{padding:30px 24px 24px}
}


/* ══════════════════════════════════════════════════════════════════════
   PRODUCTS DROPDOWN NAV
   ══════════════════════════════════════════════════════════════════════ */
.nav__dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
}
/* Invisible hover bridge — fills the gap between the "Products" button and
   the dropdown menu so the menu stays open while the cursor traverses down */
.nav__dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:300px;
  height:24px;
  background:transparent;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:visibility 0s linear .25s;
  z-index:99;
}
.nav__dropdown:hover::after,
.nav__dropdown:focus-within::after,
.nav__dropdown[data-open]::after{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:visibility 0s;
}
.nav__dropdown-toggle{
  background:none;border:none;cursor:pointer;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.25rem;
  font-weight:500;
  color:var(--navy);
  letter-spacing:.005em;
  padding:0;
  display:inline-flex;align-items:center;gap:6px;
  position:relative;
  transition:color .25s var(--ease);
}
.nav__dropdown-toggle::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:-6px;
  height:2px;background:var(--teal);
  transition:right .3s var(--ease);
}
.nav__dropdown-toggle:hover{color:var(--teal)}
.nav__dropdown-toggle:hover::after{right:24px}
.nav__dropdown-toggle.is-current{color:var(--teal)}
.nav__dropdown-toggle.is-current::after{right:24px}
.nav__caret{font-size:.7em;line-height:1;transition:transform .25s var(--ease)}
.nav__dropdown[data-open] .nav__caret{transform:rotate(180deg)}

.nav__dropdown-menu{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:260px;
  background:#fff;
  border:1px solid rgba(14,28,48,.08);
  border-radius:12px;
  padding:10px 0;
  box-shadow:0 4px 12px rgba(14,28,48,.06), 0 24px 60px -20px rgba(14,28,48,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:100;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu,
.nav__dropdown[data-open] .nav__dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav__dropdown-menu::before{
  content:"";
  position:absolute;
  top:-7px;left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:14px;height:14px;
  background:#fff;
  border-left:1px solid rgba(14,28,48,.08);
  border-top:1px solid rgba(14,28,48,.08);
}
.nav__dropdown-menu a{
  display:block;
  padding:12px 22px;
  color:var(--navy);
  text-decoration:none;
  font-size:.97rem;
  font-weight:500;
  border-bottom:0;
  transition:background .2s ease, color .2s ease, padding-left .25s ease;
  letter-spacing:0;
}
.nav__dropdown-menu a::after{display:none}
.nav__dropdown-menu a strong{font-weight:700;color:var(--navy)}
.nav__dropdown-menu a:hover{
  background:rgba(0,128,128,.07);
  color:var(--teal);
  padding-left:28px;
}
.nav__dropdown-menu a:hover strong{color:var(--teal)}
.nav__dropdown-menu a.is-current{
  background:rgba(0,128,128,.1);
  color:var(--teal);
}
.nav__dropdown-menu a.is-current strong{color:var(--teal)}

@media (max-width:860px){
  /* mobile: open dropdown items as part of the burger menu, no overlay */
  .nav__dropdown{display:block;width:100%}
  .nav__dropdown-toggle{
    width:100%;
    justify-content:space-between;
    padding:14px 0;
    border-bottom:1px solid var(--rule);
    font-size:1.08rem;
  }
  .nav__dropdown-toggle::after{display:none}
  .nav__dropdown-menu{
    position:static;
    transform:none !important;
    min-width:auto;
    padding:0;
    border:none;
    border-radius:0;
    box-shadow:none;
    background:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
  }
  .nav__dropdown-menu::before{display:none}
  .nav__dropdown[data-open] .nav__dropdown-menu{max-height:600px}
  .nav__dropdown-menu a{
    padding:12px 18px;
    background:rgba(0,128,128,.04);
    border-bottom:1px solid var(--rule);
    font-size:1rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO TAG (Retina · AI · Strategic Insight)
   ══════════════════════════════════════════════════════════════════════ */
.hero__tag{
  margin-top:28px;
  font-family:'Inter',sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.38em;
  text-transform:uppercase;
  background:linear-gradient(90deg,#00D1D1 0%,#7fc9dc 50%,#00D1D1 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:#00D1D1;
  filter:drop-shadow(0 0 14px rgba(0,209,209,.35));
  opacity:.95;
}
.hero__tag span{
  background:none;
  -webkit-text-fill-color:rgba(127,201,220,.45);
  color:rgba(127,201,220,.45);
  margin:0 12px;
  filter:none;
  font-weight:400;
}

/* ══════════════════════════════════════════════════════════════════════
   THE CLAREZAI ADVANTAGE — single-row comparison panel (white bg)
   ══════════════════════════════════════════════════════════════════════ */
.advantage{
  padding:72px 0 64px;
  background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%);
  position:relative;
  overflow:hidden;
}
.advantage::before,
.advantage::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
}
.advantage::before{background:radial-gradient(circle,rgba(0,209,209,.16) 0%,transparent 70%);top:-180px;left:-180px}
.advantage::after{background:radial-gradient(circle,rgba(0,96,192,.13) 0%,transparent 70%);bottom:-200px;right:-200px}
.advantage .wrap{position:relative;z-index:1}
.advantage .sec__head{margin-bottom:54px}
.advantage .sec__head h2,
.impact .sec__head h2{
  font-family:'Source Serif Pro',Georgia,serif;
  font-weight:600;
  font-size:clamp(1.8rem,2.8vw,2.5rem);
  letter-spacing:-.012em;
  color:var(--navy);
  line-height:1.18;
  max-width:780px;
  margin-left:auto;margin-right:auto;
}
.advantage .sec__head h2 em,
.impact .sec__head h2 em{
  font-family:'Crimson Pro',Georgia,serif;
  font-style:italic;
  font-weight:600;
  background:linear-gradient(120deg,var(--teal) 0%,#4a90e2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--teal);
}

.advantage-compare{
  position:relative;
  background:#ffffff;
  border:1px solid rgba(0,96,192,.10);
  border-radius:18px;
  padding:36px 40px 32px;
  box-shadow:0 4px 18px rgba(8,27,51,.04),0 28px 60px -28px rgba(0,96,192,.22);
  overflow:hidden;
}
.advantage-compare::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--teal) 0%,#4a90e2 50%,#7fc9dc 100%);
}
.advantage-compare__header{
  display:grid;
  grid-template-columns:1fr 64px 1fr;
  gap:14px;
  margin-bottom:24px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(0,96,192,.10);
}
.advantage-compare__col{
  font-family:'Inter',sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.advantage-compare__col--trad{color:#94a3b8}
.advantage-compare__col--arrow{}
.advantage-compare__col--clz{
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal-dk) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--teal);
}
.advantage-compare__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.advantage-compare__list li{
  display:grid;
  grid-template-columns:1fr 64px 1fr;
  align-items:center;
  gap:14px;
  padding:18px 22px;
  background:linear-gradient(90deg,rgba(148,163,184,.05) 0%,rgba(0,209,209,.06) 100%);
  border-radius:12px;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.advantage-compare__list li:hover{
  background:linear-gradient(90deg,rgba(148,163,184,.08) 0%,rgba(0,209,209,.13) 100%);
  transform:translateX(2px);
}
/* Traditional Approach — same elegant serif as ClarezAI, blackish for strong presence */
.advantage-compare__trad{
  font-family:'Source Serif Pro',Georgia,serif;
  font-style:normal;
  font-weight:500;
  font-size:1.05rem;
  line-height:1.35;
  color:#1f2937;
  letter-spacing:-.003em;
}
.advantage-compare__arrow{
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:1.5rem;
  text-align:center;
  background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dk) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--teal);
  flex-shrink:0;
  filter:drop-shadow(0 0 8px rgba(0,209,209,.35));
}
/* ClarezAI Approach — same serif but vibrant, bolder, gradient with subtle glow */
.advantage-compare__clz{
  position:relative;
  font-family:'Source Serif Pro',Georgia,serif;
  font-size:1.08rem;
  font-weight:700;
  line-height:1.35;
  color:var(--navy);
  letter-spacing:-.008em;
  background:linear-gradient(120deg,var(--navy) 0%,var(--teal-dk) 70%,var(--teal) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,209,209,.08));
}

@media (max-width:700px){
  .advantage{padding:72px 0}
  .advantage-compare{padding:28px 22px 24px}
  .advantage-compare__header{grid-template-columns:1fr}
  .advantage-compare__col--arrow{display:none}
  .advantage-compare__col--trad{font-size:.7rem}
  .advantage-compare__col--clz{font-size:.7rem;display:none}
  .advantage-compare__list li{grid-template-columns:1fr;gap:10px;padding:16px 18px}
  .advantage-compare__arrow{transform:rotate(90deg);justify-self:start}
}

/* ══════════════════════════════════════════════════════════════════════
   DELIVERING MEASURABLE IMPACT — 6 vibrant outcome cards (white bg)
   ══════════════════════════════════════════════════════════════════════ */
.impact{
  padding:72px 0 64px;
  background:linear-gradient(180deg,#f4f8ff 0%,#ffffff 100%);
  position:relative;
  overflow:hidden;
}
.impact::before,
.impact::after{
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  border-radius:50%;
  filter:blur(130px);
  pointer-events:none;
  z-index:0;
}
.impact::before{background:radial-gradient(circle,rgba(0,96,192,.16) 0%,transparent 70%);top:-200px;right:-180px}
.impact::after{background:radial-gradient(circle,rgba(0,209,209,.18) 0%,transparent 70%);bottom:-220px;left:-200px}
.impact .wrap{position:relative;z-index:1}
.impact .sec__head{margin-bottom:54px}

/* Readable sub-text for Impact + Advantage sections */
.impact .sec__sub,
.advantage .sec__sub{
  font-family:'Source Serif Pro',Georgia,serif;
  font-style:normal;
  font-weight:400;
  font-size:1.1rem;
  line-height:1.55;
  color:#3a4a64;
  letter-spacing:-.003em;
  max-width:680px;
  margin-top:18px;
  margin-inline:auto;
  text-align:center;
}

.impact__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.impact-card{
  position:relative;
  background:#ffffff;
  border:1px solid rgba(0,96,192,.10);
  border-radius:16px;
  padding:36px 28px 32px;
  text-align:left;
  overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  box-shadow:0 4px 14px rgba(8,27,51,.04),0 24px 50px -28px rgba(0,96,192,.18);
}
.impact-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--teal) 0%,#4a90e2 100%);
  opacity:.5;
  transition:opacity .4s var(--ease),height .4s var(--ease);
}
.impact-card::after{
  content:"";
  position:absolute;
  top:-60px;right:-60px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,209,209,.10) 0%,transparent 65%);
  opacity:0;
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
.impact-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 22px rgba(8,27,51,.07),0 36px 70px -28px rgba(0,96,192,.32);
  border-color:rgba(0,96,192,.22);
}
.impact-card:hover::before{opacity:1;height:4px}
.impact-card:hover::after{opacity:1}
.impact-card__icon{
  width:60px;
  height:60px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#00D1D1 0%,#0060c0 55%,#081B33 100%);
  color:#ffffff;
  margin-bottom:22px;
  box-shadow:
    0 6px 20px rgba(0,96,192,.32),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 -1px 4px rgba(255,255,255,.18) inset;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  position:relative;
  overflow:hidden;
}
.impact-card__icon::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 60%);
  pointer-events:none;
}
.impact-card__icon svg{width:28px;height:28px;position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(8,20,40,.35))}
.impact-card:hover .impact-card__icon{
  transform:scale(1.08) rotate(-2deg);
  box-shadow:
    0 10px 28px rgba(0,96,192,.5),
    0 0 0 1px rgba(255,255,255,.28) inset,
    0 -1px 4px rgba(255,255,255,.22) inset,
    0 0 24px rgba(0,209,209,.4);
}
.impact-card h3{
  font-family:'Source Serif Pro',Georgia,serif;
  font-weight:600;
  font-size:1.18rem;
  line-height:1.28;
  color:var(--navy);
  margin:0 0 12px;
  letter-spacing:-.008em;
  position:relative;
}
.impact-card p{
  font-family:'Crimson Pro',Georgia,serif;
  font-style:italic;
  font-size:1.02rem;
  line-height:1.5;
  color:#4a5972;
  margin:0;
  position:relative;
}

@media (max-width:1100px){
  .impact__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .impact{padding:72px 0}
  .impact__grid{grid-template-columns:1fr}
  .impact-card{padding:28px 22px 24px}
}

/* ══════════════════════════════════════════════════════════════════════
   CRITICAL BARRIERS (PPT slide 8) — 8-card grid below hero
   ══════════════════════════════════════════════════════════════════════ */
.barriers{
  padding:72px 0 64px;
  background:linear-gradient(180deg,var(--bg) 0%,#f4f8ff 100%);
  position:relative;
}
.barriers .sec__head{margin-bottom:54px}
.barriers .sec__head h2{
  font-family:'Source Serif Pro',Georgia,serif;
  font-weight:600;
  font-size:clamp(1.7rem,2.6vw,2.3rem);
  letter-spacing:-.012em;
  color:var(--navy);
  line-height:1.18;
  max-width:780px;
  margin-left:auto;margin-right:auto;
}
.barriers .sec__head h2 em{
  font-family:'Crimson Pro',Georgia,serif;
  font-style:italic;
  font-weight:600;
  background:linear-gradient(120deg,var(--teal) 0%,#4a90e2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--teal);
}
.barriers__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}
.barrier-card{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#fdf9f9 100%);
  border:1px solid rgba(220,38,38,.10);
  border-radius:18px;
  padding:42px 30px 36px;
  min-height:200px;
  text-align:left;
  overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
  box-shadow:0 4px 14px rgba(8,27,51,.04),0 22px 50px -24px rgba(220,38,38,.20);
}
/* Negative/tension accent bar — reddish gradient signals "barrier" (problem) */
.barrier-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,#ef5350 0%,#dc2626 50%,#991b1b 100%);
  opacity:.82;
  transition:opacity .4s var(--ease),width .4s var(--ease);
}
/* Decorative red glow orb in top-right — reveals on hover for premium feel */
.barrier-card::after{
  content:"";
  position:absolute;
  top:-70px;
  right:-70px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(239,83,80,.16) 0%,transparent 65%);
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.barrier-card:hover::after{opacity:1}

/* Reverse kicker animation in Critical Barriers — light moves AWAY from text */
.barriers .replay-anim.in-view .kicker__line--left::before{
  animation-direction:reverse;
}
.barriers .replay-anim.in-view .kicker__line--right::before{
  animation-direction:reverse;
}
/* Red light + red flanking gradient lines for Critical Barriers kicker */
.barriers .kicker__line{
  background:linear-gradient(90deg,rgba(220,38,38,0) 0%,rgba(220,38,38,.5) 50%,rgba(220,38,38,0) 100%);
}
.barriers .kicker__line::before{
  background:#ef4444;
  box-shadow:
    0 0 8px 2px rgba(220,38,38,.7),
    0 0 18px 4px rgba(220,38,38,.45),
    0 0 36px 10px rgba(220,38,38,.22);
}

/* Slight elegant underline beneath "The Hidden Friction" kicker text */
.barriers .kicker__text{
  position:relative;
  display:inline-block;
  padding-bottom:6px;
}
.barriers .kicker__text::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:46px;
  height:1.5px;
  background:linear-gradient(90deg,transparent 0%,#dc2626 30%,#ef5350 50%,#dc2626 70%,transparent 100%);
  border-radius:1px;
  opacity:.85;
}

/* Refined editorial sub-line under Critical Barriers headline */
.barriers__sub{
  font-family:'Source Serif Pro',Georgia,serif;
  font-style:normal;
  font-weight:400;
  font-size:1.1rem;
  line-height:1.55;
  color:#3a4a64;
  letter-spacing:-.003em;
  max-width:680px;
  margin-top:18px;
  margin-inline:auto;
  text-align:center;
}
.barrier-card:hover{
  transform:translateY(-6px);
  background:linear-gradient(180deg,#ffffff 0%,#fef5f5 100%);
  box-shadow:0 8px 18px rgba(8,27,51,.06),0 32px 65px -22px rgba(220,38,38,.36);
  border-color:rgba(220,38,38,.28);
}
.barrier-card:hover::before{opacity:1;width:6px}
.barrier-card__num{
  display:inline-block;
  font-family:'Source Serif Pro',Georgia,serif;
  font-weight:700;
  font-size:1.6rem;
  line-height:1;
  background:linear-gradient(120deg,var(--teal) 0%,#4a90e2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--teal);
  letter-spacing:-.01em;
  margin-bottom:14px;
}
.barrier-card__title{
  position:relative;
  font-family:'Source Serif Pro',Georgia,serif;
  font-weight:700;
  font-size:1.3rem;
  line-height:1.22;
  color:var(--navy);
  margin:0 0 14px;
  letter-spacing:-.014em;
  z-index:1;
}
.barrier-card__title::after{
  content:"";
  display:block;
  margin-top:10px;
  width:28px;
  height:2px;
  background:linear-gradient(90deg,#dc2626 0%,#ef5350 100%);
  border-radius:1px;
  opacity:.6;
  transition:width .4s var(--ease),opacity .4s var(--ease);
}
.barrier-card:hover .barrier-card__title::after{width:48px;opacity:1}
.barrier-card__desc{
  position:relative;
  font-family:'Crimson Pro',Georgia,serif;
  font-style:italic;
  font-size:1.12rem;
  line-height:1.55;
  color:#3a4a64;
  margin:0;
  letter-spacing:-.003em;
  z-index:1;
}
.barriers__payoff{
  margin:54px auto 0;
  max-width:780px;
  text-align:center;
  font-family:'Crimson Pro',Georgia,serif;
  font-size:clamp(1.05rem,1.4vw,1.18rem);
  line-height:1.55;
  color:var(--navy);
  padding:24px 30px;
  background:linear-gradient(135deg,rgba(0,209,209,.06) 0%,rgba(0,96,192,.06) 100%);
  border-left:3px solid var(--teal);
  border-radius:0 10px 10px 0;
}
.barriers__payoff em{
  font-style:italic;
  font-weight:600;
  background:linear-gradient(120deg,var(--teal) 0%,var(--teal-dk) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:var(--teal-dk);
}

@media (max-width:1100px){
  .barriers__grid{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media (max-width:620px){
  .barriers__grid{grid-template-columns:1fr}
  .barriers{padding:72px 0}
  .barriers__payoff{margin-top:36px;padding:20px 22px}
}

/* ══════════════════════════════════════════════════════════════════════
   PROBLEM STATEMENT (PPT slide 5)
   ══════════════════════════════════════════════════════════════════════ */
.problem{
  padding:90px 0;
  background:#fff;
  text-align:center;
}
.problem__inner{
  max-width:920px;
  margin:0 auto;
}
.problem__quote{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  font-weight:600;
  line-height:1.28;
  letter-spacing:-.012em;
  color:var(--navy);
  margin:0 0 28px;
}
/* "success" — subtle deep-navy emphasis (the positive pole) */
.problem__quote-pos{
  font-weight:700;
  color:var(--navy);
  position:relative;
}
/* "failure" — warm copper-amber italic (the tension / problem pole) */
.problem__quote-tension{
  font-style:italic;
  font-weight:700;
  color:#d97e3d;
  position:relative;
  background:linear-gradient(90deg,#f5a623 0%,#d97e3d 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* "the science" — cyan-teal italic with subtle underline (the differentiator) */
.problem__quote em{
  font-style:italic;
  font-weight:700;
  color:var(--teal);
  position:relative;
  background:linear-gradient(90deg,var(--teal) 0%,#4a90e2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.problem__quote em::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-3px;
  height:2px;
  background:linear-gradient(90deg,var(--teal),transparent);
  border-radius:2px;
  opacity:.6;
}
.problem__follow{
  font-family:"Crimson Pro", Georgia, serif;
  font-size:clamp(1.1rem,1.5vw,1.3rem);
  line-height:1.6;
  color:#2b3a52;
  margin:0;
  font-style:italic;
}
.problem__follow strong{font-weight:700;color:var(--navy);font-style:normal}
.problem__accent{
  display:block;
  margin-top:16px;
  font-style:normal;
  font-weight:600;
  color:var(--teal);
}
/* "decisive action" — bolder italic with darker cyan-teal for the payoff */
.problem__accent-payoff{
  font-style:italic;
  font-weight:700;
  color:var(--teal-dk);
  background:linear-gradient(90deg,var(--teal),var(--teal-dk));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ══════════════════════════════════════════════════════════════════════
   THREE REASONS (PPT slide 6)
   ══════════════════════════════════════════════════════════════════════ */
.reasons{
  padding:64px 0;
  background:#f8fafc;
}
.reasons__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:48px;
}
@media (max-width:900px){.reasons__grid{grid-template-columns:1fr}}
.reason-card{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  padding:46px 34px 36px;
  border:1px solid rgba(0,96,192,.10);
  border-radius:18px;
  box-shadow:0 4px 14px rgba(14,28,48,.04),0 22px 48px -24px rgba(0,96,192,.18);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  overflow:hidden;
}
.reason-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--teal) 0%,#4a90e2 50%,#7fc9dc 100%);
  opacity:.7;
  transition:opacity .4s var(--ease);
}
.reason-card::after{
  content:"";
  position:absolute;
  top:-80px;right:-80px;
  width:200px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,209,209,.14) 0%,transparent 65%);
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.reason-card:hover{
  transform:translateY(-7px);
  box-shadow:0 8px 18px rgba(14,28,48,.06),0 36px 70px -24px rgba(0,96,192,.36);
  border-color:rgba(0,96,192,.24);
}
.reason-card:hover::before{opacity:1}
.reason-card:hover::after{opacity:1}
.reason-card h3{
  position:relative;
  font-family:'Source Serif Pro',Georgia,serif;
  font-size:1.32rem;
  font-weight:700;
  letter-spacing:-.012em;
  line-height:1.22;
  color:var(--navy);
  margin:0 0 14px;
  background:linear-gradient(120deg,var(--navy) 0%,var(--teal-dk) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.reason-card p{
  position:relative;
  font-family:'Source Serif Pro',Georgia,serif;
  font-size:1.04rem;
  font-weight:400;
  line-height:1.6;
  color:#3a4a64;
  margin:0;
  letter-spacing:-.003em;
}

/* ══════════════════════════════════════════════════════════════════════
   PROOF POINTS STRIP (PPT slide 7)
   ══════════════════════════════════════════════════════════════════════ */
.proof{
  padding:54px 0;
  background:linear-gradient(180deg,#0a1226 0%,#15233f 100%);
  color:#fff;
}
.proof__inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  align-items:center;
  text-align:center;
}
@media (max-width:900px){.proof__inner{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.proof__inner{grid-template-columns:1fr}}
.proof__item{
  padding:20px 12px;
  border-right:1px solid rgba(255,255,255,.1);
}
.proof__item:last-child{border-right:none}
@media (max-width:900px){
  .proof__item:nth-child(2n){border-right:none}
}
@media (max-width:560px){
  .proof__item{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
  .proof__item:last-child{border-bottom:none}
}
.proof__num{
  display:block;
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:clamp(2.6rem,4.4vw,3.6rem);
  font-weight:700;
  line-height:1;
  color:var(--teal);
  letter-spacing:-.02em;
  margin-bottom:8px;
}
.proof__unit{font-size:.65em;color:rgba(0,209,209,.7)}
.proof__label{
  margin:0;
  font-family:var(--sans, "Inter"), sans-serif;
  font-size:.92rem;
  font-weight:500;
  color:rgba(255,255,255,.75);
  letter-spacing:.02em;
}

/* ══════════════════════════════════════════════════════════════════════
   REAL EXPERTISE (PPT slide 12)
   ══════════════════════════════════════════════════════════════════════ */
.real-expertise{
  padding:64px 0;
  background:#fff;
}
.real-expertise__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  margin-top:42px;
}
@media (max-width:1000px){.real-expertise__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.real-expertise__grid{grid-template-columns:1fr}}
.re-card{
  position:relative;
  background:#fff;
  padding:24px 20px 22px;
  border:1px solid var(--rule);
  border-radius:10px;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.re-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,128,128,.3);
  box-shadow:0 8px 22px -12px rgba(0,128,128,.3);
}
.re-card__no{
  display:inline-block;
  font-family:var(--mono),monospace;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--teal);
  margin-bottom:10px;
}
.re-card h3{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 8px;
  letter-spacing:-.005em;
}
.re-card p{margin:0;font-size:.92rem;line-height:1.55;color:#2b3a52}

/* ══════════════════════════════════════════════════════════════════════
   PRODUCT SUB-PAGE HEROES (clarezai-ma, nrss, casexai, clinomicsai)
   ══════════════════════════════════════════════════════════════════════ */
.product-hero{
  padding:120px 0 80px;
  position:relative;
}
.product-hero--p1{background:linear-gradient(135deg,#f0fdfa 0%,#ccfbf1 100%)}
.product-hero--p2{background:linear-gradient(135deg,#fff7ed 0%,#fed7aa 100%)}
.product-hero--p3{background:linear-gradient(135deg,#fdf4ff 0%,#f5d0fe 100%)}
.product-hero--p4{background:linear-gradient(135deg,#eff6ff 0%,#bfdbfe 100%)}
.product-hero__brand{
  font-family:var(--mono),monospace;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.product-hero--p1 .product-hero__brand{color:var(--teal-dk)}
.product-hero--p2 .product-hero__brand{color:#c2410c}
.product-hero--p3 .product-hero__brand{color:#86198f}
.product-hero--p4 .product-hero__brand{color:#1d4ed8}

/* Photo-hero variant — uses an inline background-image with dark overlay so the
   white text remains readable on top of the photograph. */
.product-hero--photo{
  padding:160px 0 120px;
  min-height:560px;
  background-color:#081B33;
  background-size:cover;
  background-position:30% center;          /* shift the image to the left */
  background-repeat:no-repeat;
  color:#fff;
  display:flex;
  align-items:center;
}
.product-hero--photo .pagehead__inner{
  max-width:600px;
  margin-left:0;                            /* anchor text to the left of the wrap */
  margin-right:auto;
  padding-left:20px;                        /* small breathing room from the wrap's left edge */
}
/* Kicker pill — solid brand-blue badge with white text */
.product-hero__brand--light{
  display:inline-block;
  color:#ffffff !important;
  background:#0060c0;
  border:1px solid rgba(255,255,255,.25);
  padding:9px 20px;
  border-radius:999px;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase;
  text-shadow:none;
  box-shadow:0 4px 16px rgba(0,96,192,.45);
  margin-bottom:24px;
}
/* Main title — pure white serif */
.product-hero__title{
  color:#ffffff !important;
  font-family:"Source Serif Pro", Georgia, serif;
  font-weight:700;
  font-size:clamp(2.6rem,5vw,4rem);
  line-height:1.05;
  letter-spacing:-.022em;
  margin:0 0 22px;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
/* Italic em — brand blue accent on the word "Excellence" */
.product-hero__title em{
  font-style:italic;
  font-weight:700;
  color:#7fb3f0 !important;        /* lighter brand-blue so it reads on dark navy */
  background:none;
  -webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:#7fb3f0;
  position:relative;
  display:inline-block;
}
/* Underline accent beneath the italic em — brand blue */
.product-hero__title em::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-6px;
  height:3px;
  background:linear-gradient(90deg,#0060c0 0%,#7fb3f0 60%,transparent 100%);
  border-radius:2px;
  opacity:.9;
}
/* Sub-headline between title and lead — white italic editorial, brand-blue left border */
.product-hero__sub{
  color:#ffffff !important;
  font-family:"Source Serif Pro", Georgia, serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.15rem,1.7vw,1.45rem);
  line-height:1.45;
  letter-spacing:-.005em;
  max-width:520px;
  margin:0 0 22px;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
  padding-left:18px;
  border-left:3px solid #0060c0;
  box-shadow:inset 4px 0 0 0 rgba(0,96,192,.15);
}
/* Lead paragraph — white at 92% with subtle text-shadow */
.product-hero__lead{
  color:rgba(255,255,255,.92) !important;
  font-family:"Crimson Pro", Georgia, serif;
  font-style:italic;
  font-size:clamp(1.05rem,1.4vw,1.22rem);
  line-height:1.6;
  font-weight:400;
  max-width:480px;
  margin:0;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
  letter-spacing:.005em;
}
@media (max-width:860px){
  .product-hero--photo{
    padding:120px 0 90px;
    min-height:460px;
    background-position:center;
  }
  .product-hero--photo .pagehead__inner{max-width:100%;padding-left:0;margin:0 auto;text-align:left}
}

/* Product intro section (between hero and capabilities) */
.product-intro{
  padding:70px 0;
  background:#fff;
  border-bottom:1px solid var(--rule);
}
.product-intro__inner{
  max-width:920px;
  margin:0 auto;
  text-align:center;
}
.product-intro h2{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:clamp(1.8rem,3.2vw,2.4rem);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.012em;
  color:var(--navy);
  margin:18px 0 22px;
}
.product-intro .lead{
  font-family:"Crimson Pro", Georgia, serif;
  font-size:1.18rem;
  line-height:1.6;
  color:#2b3a52;
  max-width:780px;
  margin:0 auto;
}

/* Product CTA link inside product__copy */
.product__link{
  display:inline-block;
  margin-top:22px;
  font-size:.95rem;
  font-weight:600;
}

/* ══════════════════════════════════════════════════════════════════════
   PILLARS (3-card grid used in sub-pages and home)
   ══════════════════════════════════════════════════════════════════════ */
.pillars{
  padding:90px 0;
  background:#f8fafc;
}
.pillars__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:42px;
}
.pillars__grid--two{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto}
@media (max-width:900px){.pillars__grid,.pillars__grid--two{grid-template-columns:1fr}}
.pillar-card{
  position:relative;
  background:#fff;
  padding:36px 30px 32px;
  border:1px solid var(--rule);
  border-radius:14px;
  box-shadow:0 2px 6px rgba(14,28,48,.04),0 14px 34px -22px rgba(14,28,48,.12);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.pillar-card:hover{
  transform:translateY(-6px);
  box-shadow:0 6px 12px rgba(14,28,48,.06),0 28px 60px -24px rgba(0,128,128,.28);
}
.pillar-card__tag{
  display:inline-block;
  font-family:var(--mono),monospace;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:14px;
}
.pillar-card--p2 .pillar-card__tag{color:#d97e3d}
.pillar-card--p3 .pillar-card__tag{color:#A95EA3}
.pillar-card h3{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:1.25rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 14px;
  letter-spacing:-.005em;
}
.pillar-card p{font-size:.98rem;line-height:1.6;color:#2b3a52;margin:0 0 14px}
.pillar-card__list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.pillar-card__list li{
  position:relative;
  padding:6px 0 6px 22px;
  font-size:.94rem;color:#2b3a52;
}
.pillar-card__list li::before{
  content:"";
  position:absolute;left:0;top:13px;
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--teal-dk));
}
.pillar-card--p2 .pillar-card__list li::before{background:linear-gradient(135deg,#f5a623,#d97e3d)}
.pillar-card--p3 .pillar-card__list li::before{background:linear-gradient(135deg,#c084d1,#A95EA3)}

/* ══════════════════════════════════════════════════════════════════════
   INSIGHTS — CRITICAL BARRIERS + BIG CHALLENGE
   ══════════════════════════════════════════════════════════════════════ */
.big-challenge{
  padding:80px 0;
  background:#fff;
  border-bottom:1px solid var(--rule);
}
.big-challenge__inner{
  max-width:920px;margin:0 auto;text-align:center;
}
.big-challenge h2{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  font-weight:700;line-height:1.2;letter-spacing:-.012em;
  color:var(--navy);margin:18px 0 22px;
}
.big-challenge h2 em{font-style:italic;color:var(--teal)}
.big-challenge .lead{
  font-family:"Crimson Pro", Georgia, serif;
  font-size:1.18rem;line-height:1.6;color:#2b3a52;margin:0;
}

.barriers{
  padding:90px 0;
  background:#f8fafc;
}
.barriers--alt{background:#fff;border-top:1px solid var(--rule)}
.barriers__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:42px;
}
@media (max-width:1100px){.barriers__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.barriers__grid{grid-template-columns:1fr}}
.barrier-card{
  position:relative;
  background:#fff;
  padding:26px 22px 22px;
  border:1px solid var(--rule);
  border-radius:10px;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.barriers--alt .barrier-card{background:#f8fafc}
.barrier-card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,128,128,.3);
  box-shadow:0 8px 22px -12px rgba(0,128,128,.3);
}
.barrier-card__no{
  display:inline-block;
  font-family:var(--mono),monospace;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--teal);
  margin-bottom:12px;
}
.barriers--alt .barrier-card__no{color:#d97e3d}
.barrier-card h3{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:1.08rem;
  font-weight:700;color:var(--navy);
  margin:0 0 10px;letter-spacing:-.005em;
}
.barrier-card p{margin:0;font-size:.93rem;line-height:1.55;color:#2b3a52}

.strategic-focus-head{
  padding:70px 0 30px;
  background:#f8fafc;
  text-align:center;
}


/* ══════════════════════════════════════════════════════════════════════
   CAPABILITIES SPOTLIGHT — matches Why Medical Affairs heading style
   (royal-blue gradient panel, animated kicker, white headline)
   ══════════════════════════════════════════════════════════════════════ */
.cap-spotlight{
  padding:110px 0;
  background:#ffffff;
  color:var(--navy);
  position:relative;
  overflow:hidden;
}
/* Heading treatment — animated kicker style adapted for light background */
.cap-spotlight .kicker--animated{color:var(--teal)}
.cap-spotlight .kicker__line{background:linear-gradient(90deg,rgba(0,96,192,0) 0%,rgba(0,96,192,.5) 50%,rgba(0,96,192,0) 100%)}
.cap-spotlight .kicker__line::before{
  background:var(--teal);
  box-shadow:
    0 0 8px 2px rgba(0,96,192,.55),
    0 0 18px 4px rgba(0,96,192,.32),
    0 0 36px 10px rgba(0,96,192,.12);
}
/* Headline + sub — reduced size to match the Why Medical Affairs proportions */
.cap-spotlight .sec__head h2{
  color:var(--navy);
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:clamp(1.55rem,2.4vw,2.05rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.008em;
  margin:18px 0 14px;
}
.cap-spotlight .sec__head h2 em{font-style:italic;color:var(--teal)}
.cap-spotlight .sec__head h2::after{
  background:linear-gradient(90deg,transparent,var(--teal) 35%,var(--teal) 65%,transparent);
  box-shadow:0 0 12px rgba(0,96,192,.4);
}
.cap-spotlight .sec__sub{
  color:#4a5972;
  font-family:"Crimson Pro", Georgia, serif;
  font-style:italic;
  font-size:.98rem;
  font-weight:400;
  line-height:1.55;
  max-width:640px;
  margin:0 auto;
  letter-spacing:.003em;
}

/* Single-column list — elegant + vibrant treatment with vertical accent bar + radial glow */
.cap-list{
  list-style:none;
  padding:0;
  margin:56px auto 0;
  max-width:880px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.cap-list__item{
  position:relative;
  padding:28px 32px 28px 40px;
  background:linear-gradient(135deg,#ffffff 0%,#fafbfd 100%);
  border:1px solid rgba(14,28,48,.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 2px 6px rgba(14,28,48,.04),
    0 14px 32px -22px rgba(14,28,48,.14);
  transition:transform .45s cubic-bezier(.22,.61,.36,1),
             border-color .45s cubic-bezier(.22,.61,.36,1),
             box-shadow .45s cubic-bezier(.22,.61,.36,1),
             background .45s cubic-bezier(.22,.61,.36,1);
}
/* Vertical gradient accent bar on the left edge — replaces the old circular dot */
.cap-list__item::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
  background:linear-gradient(180deg,var(--teal) 0%,var(--teal-dk) 100%);
  border-radius:14px 0 0 14px;
  transition:width .35s cubic-bezier(.22,.61,.36,1);
  z-index:2;
}
/* Soft themed radial glow that fades in on hover — vibrant depth */
.cap-list__item::after{
  content:"";
  position:absolute;
  top:-40%;
  right:-15%;
  width:55%;
  height:180%;
  background:radial-gradient(ellipse at center, rgba(0,96,192,.1) 0%, transparent 70%);
  pointer-events:none;
  opacity:0;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1);
  z-index:0;
}
.cap-list__item:hover{
  transform:translateX(6px) translateY(-2px);
  border-color:rgba(0,96,192,.35);
  background:linear-gradient(135deg,#ffffff 0%,#f4f8ff 100%);
  box-shadow:
    0 4px 12px rgba(14,28,48,.05),
    0 20px 44px -22px rgba(0,96,192,.4);
}
.cap-list__item:hover::before{width:7px}
.cap-list__item:hover::after{opacity:1}

.cap-list__item h3,
.cap-list__item p{position:relative;z-index:1}

.cap-list__item h3{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:1.18rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 8px;
  letter-spacing:-.008em;
  line-height:1.3;
  transition:color .35s var(--ease);
}
.cap-list__item:hover h3{color:var(--teal)}

.cap-list__item p{
  font-family:"Crimson Pro", Georgia, serif;
  font-style:italic;
  font-size:1.04rem;
  font-weight:400;
  line-height:1.6;
  color:#4a5972;
  margin:0;
  letter-spacing:.003em;
}

/* Staggered entrance animation — drives off the inline --cap-delay variable */
.cap-list__item.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--cap-delay,0s);
}
.cap-list__item.reveal.is-in{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .cap-list__item.reveal,.cap-list__item.reveal.is-in{
    transition:none;
    opacity:1;
    transform:none;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   PAGE THEME OVERRIDES
   .theme-ma       → #118ab2 (teal)
   .theme-casexai  → #ffd166 (amber-gold), with darker shades for backgrounds
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   THEME: MEDICAL AFFAIRS — #118ab2 teal
   ────────────────────────────────────────────────────────────────────── */
.theme-ma .product-hero__brand--light{
  background:#118ab2;
  box-shadow:0 4px 16px rgba(17,138,178,.45);
}
.theme-ma .product-hero__title em{
  color:#7fc9dc !important;
  -webkit-text-fill-color:#7fc9dc;
}
.theme-ma .product-hero__title em::after{
  background:linear-gradient(90deg,#118ab2 0%,#7fc9dc 60%,transparent 100%);
}
.theme-ma .product-hero__sub{border-left-color:#118ab2}

/* Capabilities — kicker + headline + list dots all in #118ab2 */
.theme-ma .cap-spotlight .kicker--animated{color:#118ab2}
.theme-ma .cap-spotlight .kicker__line{
  background:linear-gradient(90deg,rgba(17,138,178,0) 0%,rgba(17,138,178,.55) 50%,rgba(17,138,178,0) 100%);
}
.theme-ma .cap-spotlight .kicker__line::before{
  background:#118ab2;
  box-shadow:
    0 0 8px 2px rgba(17,138,178,.6),
    0 0 18px 4px rgba(17,138,178,.35),
    0 0 36px 10px rgba(17,138,178,.14);
}
.theme-ma .cap-spotlight .sec__head h2 em{color:#118ab2}
.theme-ma .cap-spotlight .sec__head h2::after{
  background:linear-gradient(90deg,transparent,#118ab2 35%,#118ab2 65%,transparent);
  box-shadow:0 0 12px rgba(17,138,178,.45);
}
/* MA (teal #118ab2) — vertical accent bar + themed glow + hover title color */
.theme-ma .cap-list__item::before{background:linear-gradient(180deg,#118ab2 0%,#0a5e7a 100%)}
.theme-ma .cap-list__item::after{background:radial-gradient(ellipse at center, rgba(17,138,178,.14) 0%, transparent 70%)}
.theme-ma .cap-list__item:hover{
  border-color:rgba(17,138,178,.4);
  background:linear-gradient(135deg,#ffffff 0%,#f0f8fb 100%);
  box-shadow:0 4px 12px rgba(14,28,48,.05),0 20px 44px -22px rgba(17,138,178,.45);
}
.theme-ma .cap-list__item:hover h3{color:#118ab2}

/* Why Medical Affairs — teal gradient background instead of brand-blue */
.theme-ma .why{
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(255,255,255,.06), transparent 65%),
    linear-gradient(180deg,#118ab2 0%,#0a5e7a 100%);
}
.theme-ma .why-card__back{
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(255,255,255,.08), transparent 65%),
    linear-gradient(180deg,#118ab2 0%,#0a5e7a 100%);
}
.theme-ma .why-card__icon{color:#118ab2}

/* ──────────────────────────────────────────────────────────────────────
   THEME: CASExAI — #ffd166 amber-gold
   Bright yellow needs careful handling: keep it as ACCENT on lighter UI,
   and use a darker bronze for Why-section background so white text reads.
   ────────────────────────────────────────────────────────────────────── */
.theme-casexai .product-hero__brand--light{
  background:#ffd166;
  color:#3d2f08 !important;                  /* dark text on bright pill */
  box-shadow:0 4px 16px rgba(255,209,102,.5);
}
.theme-casexai .product-hero__title em{
  color:#ffd166 !important;
  -webkit-text-fill-color:#ffd166;
}
.theme-casexai .product-hero__title em::after{
  background:linear-gradient(90deg,#ffd166 0%,#ffe9a8 60%,transparent 100%);
  opacity:1;
}
.theme-casexai .product-hero__sub{border-left-color:#ffd166}

/* Capabilities — kicker + headline + list dots in amber-gold */
.theme-casexai .cap-spotlight .kicker--animated{color:#c9a040}
.theme-casexai .cap-spotlight .kicker__line{
  background:linear-gradient(90deg,rgba(255,209,102,0) 0%,rgba(201,160,64,.7) 50%,rgba(255,209,102,0) 100%);
}
.theme-casexai .cap-spotlight .kicker__line::before{
  background:#c9a040;
  box-shadow:
    0 0 8px 2px rgba(201,160,64,.6),
    0 0 18px 4px rgba(255,209,102,.4),
    0 0 36px 10px rgba(255,209,102,.18);
}
.theme-casexai .cap-spotlight .sec__head h2 em{color:#c9a040}
.theme-casexai .cap-spotlight .sec__head h2::after{
  background:linear-gradient(90deg,transparent,#c9a040 35%,#c9a040 65%,transparent);
  box-shadow:0 0 12px rgba(201,160,64,.45);
}
/* CASExAI (gold #ffd166) — vertical accent bar + themed glow + hover title color */
.theme-casexai .cap-list__item::before{background:linear-gradient(180deg,#ffd166 0%,#c9a040 100%)}
.theme-casexai .cap-list__item::after{background:radial-gradient(ellipse at center, rgba(255,209,102,.18) 0%, transparent 70%)}
.theme-casexai .cap-list__item:hover{
  border-color:rgba(201,160,64,.45);
  background:linear-gradient(135deg,#ffffff 0%,#fbf6e8 100%);
  box-shadow:0 4px 12px rgba(14,28,48,.05),0 20px 44px -22px rgba(201,160,64,.5);
}
.theme-casexai .cap-list__item:hover h3{color:#c9a040}

/* Why CASExAI — dark bronze gradient background so white text reads,
   with #ffd166 reserved as warm accent on icons and highlights */
.theme-casexai .why{
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(255,209,102,.18), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(255,209,102,.1), transparent 65%),
    linear-gradient(180deg,#5a4517 0%,#372a0d 100%);
}
.theme-casexai .why-card__back{
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(255,209,102,.22), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(255,209,102,.12), transparent 65%),
    linear-gradient(180deg,#5a4517 0%,#372a0d 100%);
}
.theme-casexai .why-card__icon{color:#c9a040}
.theme-casexai .why-card{border-color:rgba(255,209,102,.85)}
.theme-casexai .why-card__back::before,
.theme-casexai .why-card__back::after{
  background:linear-gradient(90deg,transparent,rgba(255,209,102,.7),transparent);
}


/* ══════════════════════════════════════════════════════════════════════
   WHY STATEMENT GRID (used inside .why section as an alternative to peel cards)
   ══════════════════════════════════════════════════════════════════════ */
.why-stmts{
  list-style:none;
  padding:0;
  margin:48px auto 0;
  max-width:1080px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:900px){.why-stmts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why-stmts{grid-template-columns:1fr}}

.why-stmt{
  position:relative;
  padding:24px 24px 24px 70px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:96px;
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.why-stmt:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.4);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.45);
}

/* The number badge on the left */
.why-stmt__no{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  font-family:"Source Serif Pro", Georgia, serif;
  font-weight:700;
  font-size:1.6rem;
  line-height:1;
  color:#7fc9dc;
  letter-spacing:-.01em;
  transition:color .35s var(--ease);
}
.why-stmt__text{
  font-family:"Source Serif Pro", Georgia, serif;
  font-size:1.02rem;
  font-weight:500;
  line-height:1.4;
  color:#ffffff;
  letter-spacing:-.005em;
}

/* Stagger reveal animation — driven by inline --why-delay */
.why-stmt.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--why-delay,0s);
}
.why-stmt.reveal.is-in{opacity:1;transform:translateY(0)}

/* MA theme — teal accent number */
.theme-ma .why-stmt__no{color:#7fc9dc}
.theme-ma .why-stmt:hover .why-stmt__no{color:#aeddec}

/* CASExAI theme — gold accent number on dark bronze background */
.theme-casexai .why-stmt__no{color:#ffd166}
.theme-casexai .why-stmt:hover .why-stmt__no{color:#ffe9a8}
.theme-casexai .why-stmt{
  background:rgba(255,209,102,.05);
  border-color:rgba(255,209,102,.22);
}
.theme-casexai .why-stmt:hover{
  background:rgba(255,209,102,.12);
  border-color:rgba(255,209,102,.5);
  box-shadow:0 10px 30px -14px rgba(90,69,23,.6);
}

/* The headline em on Why section under CASExAI theme — gold accent */
.theme-casexai .why h2 em{
  font-style:italic;
  color:#ffd166;
}
.theme-ma .why h2 em{
  font-style:italic;
  color:#7fc9dc;
}

@media (prefers-reduced-motion:reduce){
  .why-stmt.reveal,.why-stmt.reveal.is-in{
    transition:none;
    opacity:1;
    transform:none;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   THEME: NRSS — #06d6a0 mint-green
   Bright mint accent for hero kicker / em / capabilities;
   darker mint-teal gradient for Why-section background so white text reads.
   ────────────────────────────────────────────────────────────────────── */
.theme-nrss .product-hero__brand--light{
  background:#06d6a0;
  color:#06382b !important;                  /* dark text on bright pill */
  box-shadow:0 4px 16px rgba(6,214,160,.5);
}
.theme-nrss .product-hero__title em{
  color:#6de8c4 !important;
  -webkit-text-fill-color:#6de8c4;
}
.theme-nrss .product-hero__title em::after{
  background:linear-gradient(90deg,#06d6a0 0%,#6de8c4 60%,transparent 100%);
}
.theme-nrss .product-hero__sub{border-left-color:#06d6a0}

/* Capabilities — kicker + headline + list dots in mint-green */
.theme-nrss .cap-spotlight .kicker--animated{color:#04a87c}
.theme-nrss .cap-spotlight .kicker__line{
  background:linear-gradient(90deg,rgba(6,214,160,0) 0%,rgba(6,214,160,.55) 50%,rgba(6,214,160,0) 100%);
}
.theme-nrss .cap-spotlight .kicker__line::before{
  background:#06d6a0;
  box-shadow:
    0 0 8px 2px rgba(6,214,160,.6),
    0 0 18px 4px rgba(6,214,160,.35),
    0 0 36px 10px rgba(6,214,160,.14);
}
.theme-nrss .cap-spotlight .sec__head h2 em{color:#04a87c}
.theme-nrss .cap-spotlight .sec__head h2::after{
  background:linear-gradient(90deg,transparent,#06d6a0 35%,#06d6a0 65%,transparent);
  box-shadow:0 0 12px rgba(6,214,160,.5);
}
/* NRSS (mint #06d6a0) — vertical accent bar + themed glow + hover title color */
.theme-nrss .cap-list__item::before{background:linear-gradient(180deg,#06d6a0 0%,#038760 100%)}
.theme-nrss .cap-list__item::after{background:radial-gradient(ellipse at center, rgba(6,214,160,.16) 0%, transparent 70%)}
.theme-nrss .cap-list__item:hover{
  border-color:rgba(6,214,160,.45);
  background:linear-gradient(135deg,#ffffff 0%,#effaf6 100%);
  box-shadow:0 4px 12px rgba(14,28,48,.05),0 20px 44px -22px rgba(6,214,160,.5);
}
.theme-nrss .cap-list__item:hover h3{color:#04a87c}

/* Why NRSS — dark mint-teal gradient background (white text reads cleanly) */
.theme-nrss .why{
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(6,214,160,.18), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(6,214,160,.1), transparent 65%),
    linear-gradient(180deg,#04684e 0%,#03442f 100%);
}
.theme-nrss .why-card__back{
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(6,214,160,.22), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(6,214,160,.12), transparent 65%),
    linear-gradient(180deg,#04684e 0%,#03442f 100%);
}
.theme-nrss .why-card__icon{color:#06d6a0}
.theme-nrss .why-card{border-color:rgba(109,232,196,.85)}
.theme-nrss .why-card__back::before,
.theme-nrss .why-card__back::after{
  background:linear-gradient(90deg,transparent,rgba(109,232,196,.75),transparent);
}

/* Why-stmts grid (legacy — if used) — mint accent number */
.theme-nrss .why-stmt__no{color:#06d6a0}
.theme-nrss .why-stmt:hover .why-stmt__no{color:#6de8c4}
.theme-nrss .why-stmt{
  background:rgba(6,214,160,.05);
  border-color:rgba(6,214,160,.22);
}
.theme-nrss .why-stmt:hover{
  background:rgba(6,214,160,.12);
  border-color:rgba(6,214,160,.5);
  box-shadow:0 10px 30px -14px rgba(3,68,47,.6);
}
.theme-nrss .why h2 em{
  font-style:italic;
  color:#06d6a0;
}


/* ──────────────────────────────────────────────────────────────────────
   THEME: CLINOMICSAI — #936cd1 violet
   ────────────────────────────────────────────────────────────────────── */
.theme-clinomicsai .product-hero__brand--light{
  background:#936cd1;
  box-shadow:0 4px 16px rgba(147,108,209,.5);
}
.theme-clinomicsai .product-hero__title em{
  color:#c4a5e8 !important;
  -webkit-text-fill-color:#c4a5e8;
}
.theme-clinomicsai .product-hero__title em::after{
  background:linear-gradient(90deg,#936cd1 0%,#c4a5e8 60%,transparent 100%);
}
.theme-clinomicsai .product-hero__sub{border-left-color:#936cd1}

/* Capabilities — kicker + headline + list dots in violet */
.theme-clinomicsai .cap-spotlight .kicker--animated{color:#7a55b8}
.theme-clinomicsai .cap-spotlight .kicker__line{
  background:linear-gradient(90deg,rgba(147,108,209,0) 0%,rgba(147,108,209,.55) 50%,rgba(147,108,209,0) 100%);
}
.theme-clinomicsai .cap-spotlight .kicker__line::before{
  background:#936cd1;
  box-shadow:
    0 0 8px 2px rgba(147,108,209,.6),
    0 0 18px 4px rgba(147,108,209,.35),
    0 0 36px 10px rgba(147,108,209,.14);
}
.theme-clinomicsai .cap-spotlight .sec__head h2 em{color:#7a55b8}
.theme-clinomicsai .cap-spotlight .sec__head h2::after{
  background:linear-gradient(90deg,transparent,#936cd1 35%,#936cd1 65%,transparent);
  box-shadow:0 0 12px rgba(147,108,209,.5);
}
/* ClinomicsAI (violet #936cd1) — vertical accent bar + themed glow + hover title color */
.theme-clinomicsai .cap-list__item::before{background:linear-gradient(180deg,#936cd1 0%,#5d3d96 100%)}
.theme-clinomicsai .cap-list__item::after{background:radial-gradient(ellipse at center, rgba(147,108,209,.16) 0%, transparent 70%)}
.theme-clinomicsai .cap-list__item:hover{
  border-color:rgba(147,108,209,.45);
  background:linear-gradient(135deg,#ffffff 0%,#f7f1fc 100%);
  box-shadow:0 4px 12px rgba(14,28,48,.05),0 20px 44px -22px rgba(147,108,209,.5);
}
.theme-clinomicsai .cap-list__item:hover h3{color:#7a55b8}

/* Why ClinomicsAI — violet gradient background */
.theme-clinomicsai .why{
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(255,255,255,.06), transparent 65%),
    linear-gradient(180deg,#7a55b8 0%,#4b3079 100%);
}
.theme-clinomicsai .why-card__back{
  background:
    radial-gradient(60% 70% at 15% 30%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(50% 60% at 85% 70%, rgba(255,255,255,.08), transparent 65%),
    linear-gradient(180deg,#7a55b8 0%,#4b3079 100%);
}
.theme-clinomicsai .why-card__icon{color:#936cd1}
.theme-clinomicsai .why-card{border-color:rgba(196,165,232,.85)}
.theme-clinomicsai .why-card__back::before,
.theme-clinomicsai .why-card__back::after{
  background:linear-gradient(90deg,transparent,rgba(196,165,232,.75),transparent);
}

/* Why-stmts grid (if used) — violet accent number */
.theme-clinomicsai .why-stmt__no{color:#c4a5e8}
.theme-clinomicsai .why-stmt:hover .why-stmt__no{color:#dcc3f1}
.theme-clinomicsai .why-stmt{
  background:rgba(147,108,209,.05);
  border-color:rgba(147,108,209,.22);
}
.theme-clinomicsai .why-stmt:hover{
  background:rgba(147,108,209,.12);
  border-color:rgba(147,108,209,.5);
  box-shadow:0 10px 30px -14px rgba(75,48,121,.6);
}
.theme-clinomicsai .why h2 em{
  font-style:italic;
  color:#c4a5e8;
}

/* ══════════════════════════════════════════════════════════════════════
   OUR PRODUCTS — split layout: image on left + text on right with top padding
   ══════════════════════════════════════════════════════════════════════ */
.caps__grid--four .cap-card--split{
  flex-direction:row;
  padding:0;                                    /* image flush to the edge */
  min-height:340px;
  overflow:hidden;
  text-align:left;
  align-items:stretch;
}
/* Zig-zag — every 2nd card flips so image alternates left → right → left → right */
.caps__grid--four .cap-card--split:nth-child(even){flex-direction:row-reverse}
/* Centered accent strip — sits on top, above both image + text */
.caps__grid--four .cap-card--split::before{
  left:50%;
  transform:translateX(-50%);
  border-radius:0 0 3px 3px;
  z-index:3;
}

/* IMAGE — left side of the wide card, sized to show the full photo (16:9) */
.caps__grid--four .cap-card--split .cap-card__img{
  position:relative;
  flex:0 0 48%;                                  /* image takes ~48% of card width */
  background:var(--navy-deep);
  aspect-ratio:16/9;                             /* matches the natural photo aspect */
  align-self:center;                             /* center vertically so text doesn't get pushed */
  overflow:hidden;
}
.caps__grid--four .cap-card--split .cap-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;                              /* now the card area matches the photo ratio — minimal cropping */
  object-position:center;
  display:block;
  transition:transform .6s var(--ease);
}
.caps__grid--four .cap-card--split:hover .cap-card__img img{transform:scale(1.05)}
/* soft edge fade so the image blends slightly into the adjacent text panel */
.caps__grid--four .cap-card--split .cap-card__img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 70%,rgba(255,255,255,.06) 100%);
  pointer-events:none;
}
/* For zig-zag reversed cards, fade points the other way (left side adjoining text) */
.caps__grid--four .cap-card--split:nth-child(even) .cap-card__img::after{
  background:linear-gradient(90deg,rgba(255,255,255,.06) 0%,transparent 30%);
}

/* TEXT BODY — right side, with TOP PADDING so text starts lower */
.caps__grid--four .cap-card--split .cap-card__body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:54px 40px 40px 40px;                   /* generous top padding pushes text down */
  background:#fff;
  text-align:left;
}
.caps__grid--four .cap-card--split .cap-card__brand{
  margin:0 0 12px;
  font-family:"Inter", sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--teal);
  max-width:none;
  align-self:auto;
}
.caps__grid--four .cap-card--split h3{
  margin:0 0 14px;
  font-size:1.4rem;
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.008em;
  color:var(--navy);
  max-width:none;
  align-self:auto;
  text-align:left;
}
.caps__grid--four .cap-card--split p{
  margin:0;
  font-size:1rem;
  line-height:1.65;
  color:#2b3a52;
  max-width:none;
  align-self:auto;
  text-align:left;
}
.caps__grid--four .cap-card--split .link-arrow{
  margin:24px 0 0;
  align-self:flex-start;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--teal);
  text-align:left;
  display:inline-block;
  max-width:none;
}

/* Mobile (narrow screens) — stack image above text */
@media (max-width:760px){
  .caps__grid--four .cap-card--split{flex-direction:column}
  .caps__grid--four .cap-card--split .cap-card__img{
    flex:0 0 200px;
    width:100%;
  }
  .caps__grid--four .cap-card--split .cap-card__body{padding:40px 32px 32px}
}
