/* ==========================================================================
   Innovation — contemporary and energetic.
   Gradient mesh hero, floating pill navigation, bento cards, colourful track
   tiles. Motion is limited to hover lifts and the shared reveal, both off for
   visitors who prefer reduced motion. Scoped to body.tpl-innovation.
   ========================================================================== */

body.tpl-innovation {
  --ix-grad: linear-gradient(120deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 50%, var(--accent)) 55%, var(--accent) 100%);
  /* Decorative only (borders, rings, wordmark): may be light, never behind text. */
  --ix-glass: color-mix(in srgb, var(--page-bg) 78%, transparent);
  /* Behind white text: built from --brand-dark, which is contrast-checked against white. */
  --ix-grad-strong: linear-gradient(120deg, var(--brand-dark) 0%, color-mix(in srgb, var(--brand-dark) 72%, var(--brand)) 100%);
  /* Gradient TEXT on light backgrounds: both ends are the 4.5:1 "ink" variants. */
  --ix-grad-ink: linear-gradient(120deg, var(--brand-ink) 0%, var(--accent-ink) 100%);
  --shadow-ix: 0 20px 50px -24px color-mix(in srgb, var(--brand) 55%, transparent);
  background: var(--page-bg);
}
.tpl-innovation main h1, .tpl-innovation main h2 { letter-spacing: -.035em; font-weight: 700; }
.tpl-innovation .btn { border-radius: var(--radius-pill); font-weight: 700; }
.tpl-innovation .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-ix); }
.tpl-innovation .slide .btn-primary { color: var(--on-brand); }
.tpl-innovation .btn:hover { transform: translateY(-2px); }
.tpl-innovation .eyebrow { color: var(--brand-ink); }
.tpl-innovation .eyebrow::before { background: var(--ix-grad); width: 24px; }
.tpl-innovation .section--tint { background: color-mix(in srgb, var(--brand) 5%, var(--page-bg)); }
.tpl-innovation .card, .tpl-innovation .highlight, .tpl-innovation .fee, .tpl-innovation .tl-item {
  border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 18px 40px -30px rgba(15,23,42,.35);
}
.tpl-innovation .highlight { border-left: 1px solid var(--line); position: relative; overflow: hidden; }
.tpl-innovation .highlight::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ix-grad); }

/* ---------- Floating pill header ---------- */
.tpl-innovation .site-header { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: .75rem var(--gutter) 0; }
.tpl-innovation .site-header .header-inner {
  background: var(--ix-glass); backdrop-filter: saturate(170%) blur(14px); -webkit-backdrop-filter: saturate(170%) blur(14px);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 999px;
  padding: 0 .6rem 0 1rem; min-height: 60px; box-shadow: 0 10px 30px -20px rgba(15,23,42,.45);
  max-width: calc(var(--wrap) + 140px);
}
.tpl-innovation .site-header.is-scrolled { box-shadow: none; }
.tpl-innovation .brand-mark { background: var(--ix-grad-strong); color: #fff; border-radius: 12px; }
.tpl-innovation .main-nav:not(.is-open) a { border-radius: 999px; }
.tpl-innovation .main-nav:not(.is-open) a[aria-current="page"] { box-shadow: none; background: var(--brand-soft); }
.tpl-innovation .header-cta .btn-primary { background: var(--ix-grad-strong); color: #fff; border: 0; }
.tpl-innovation .nav-toggle { border-radius: 999px; }
.tpl-innovation.header--dark .site-header .header-inner, .tpl-innovation.header--brand .site-header .header-inner { background: var(--brand-dark); }
.tpl-innovation.header--brand .site-header .header-inner { background: var(--brand); }
@media (max-width: 1240px) { .tpl-innovation .site-header .header-inner { border-radius: 20px; } }

/* ---------- Hero ---------- */
.ix-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); margin-top: -76px; padding-top: calc(76px + clamp(3rem, 8vw, 6rem)); }
.ix-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40rem 26rem at 12% 8%, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 70%),
    radial-gradient(38rem 26rem at 92% 28%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 70%),
    radial-gradient(30rem 20rem at 55% 105%, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 70%),
    var(--page-bg);
}
.ix-hero-bg::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
.ix-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ix-pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
  background: var(--ix-glass); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); color: var(--brand-ink); margin-bottom: 1.25rem;
}
.ix-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.ix-hero h1 { font-size: clamp(2.4rem, 5.8vw, 4.6rem); line-height: 1.02; margin: 0 0 1.1rem; text-wrap: balance; color: var(--ink); }
.ix-hero h1.is-long { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.ix-theme { font: 600 clamp(1.1rem, 2vw, 1.4rem)/1.4 var(--font-heading); margin: 0 0 .75rem; max-width: 46ch;
  background: var(--ix-grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .ix-theme { color: var(--brand-ink); } }
.ix-intro { font-size: 1.08rem; color: var(--ink-2); max-width: 56ch; margin: 0 0 1.25rem; }
.ix-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.75rem; }
.ix-chips li { padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600; background: var(--page-bg); border: 1px solid var(--line); color: var(--ink-2); }

.ix-bento { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.ix-tile {
  position: relative; padding: 1.25rem; border-radius: 22px; background: var(--ix-glass);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); box-shadow: var(--shadow-ix);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: .3rem; min-height: 130px;
}
.ix-label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ix-tile strong { font: 700 clamp(1.1rem, 1.8vw, 1.35rem)/1.2 var(--font-heading); color: var(--ink); }
.ix-tile em { font-style: normal; font-size: .9rem; color: var(--ink-2); }
.ix-tile--date { background: var(--ix-grad-strong); color: #fff; border: 0; }
.ix-tile--date .ix-label, .ix-tile--date strong, .ix-tile--date em { color: #fff; }
.ix-tile--deadline { grid-column: span 2; }
.ix-tile--image { grid-column: span 2; padding: 0; overflow: hidden; min-height: 180px; }
.ix-tile--image img { width: 100%; height: 100%; object-fit: cover; }
.ix-slider .slider { margin: 0 var(--gutter); border-radius: 28px; overflow: hidden; }
@media (max-width: 900px) { .ix-hero-grid { grid-template-columns: 1fr; } }

/* ---------- Bento intro ---------- */
.ix-bento-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ix-card { border-radius: 24px; padding: clamp(1.25rem, 3vw, 2rem); background: var(--page-bg); border: 1px solid var(--line); }
.ix-card--wide { grid-column: span 2; grid-row: span 2; }
.ix-card--stat { display: flex; flex-direction: column; justify-content: flex-end; background: var(--brand-soft); border-color: transparent; }
.ix-card--stat:nth-of-type(3) { background: color-mix(in srgb, var(--accent) 16%, var(--page-bg)); }
.ix-card--stat strong { font: 700 clamp(2.4rem, 5vw, 3.6rem)/1 var(--font-heading); color: var(--brand-ink); letter-spacing: -.04em; }
.ix-card--stat span { font-weight: 700; color: var(--ink-2); }
.ix-card--list { grid-column: span 2; }
@media (max-width: 900px) { .ix-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ix-card--wide, .ix-card--list { grid-column: span 2; grid-row: auto; } }

/* ---------- Colourful tracks & speakers ---------- */
.tpl-innovation .tracks { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tpl-innovation .track { border-radius: 22px; border: 0; background: color-mix(in srgb, var(--brand) 9%, var(--page-bg)); }
.tpl-innovation .track:nth-child(3n+2) { background: color-mix(in srgb, var(--accent) 14%, var(--page-bg)); }
.tpl-innovation .track:nth-child(3n+3) { background: color-mix(in srgb, color-mix(in srgb, var(--brand) 50%, var(--accent)) 12%, var(--page-bg)); }
.tpl-innovation .track-num { color: var(--brand-ink); }
.tpl-innovation .person { border-radius: 24px; border: 0; background: transparent; }
.tpl-innovation .person-photo { border-radius: 24px; overflow: hidden; padding: 3px; background: var(--ix-grad); }
.tpl-innovation .person-photo img, .tpl-innovation .person-photo .monogram { border-radius: 21px; }
.tpl-innovation .timeline { grid-auto-flow: row; }
.tpl-innovation .tl-item.is-next { background: var(--ix-grad-strong); color: #fff; border: 0; }
.tpl-innovation .tl-item.is-next .tl-date, .tpl-innovation .tl-item.is-next .tl-title, .tpl-innovation .tl-item.is-next .tl-desc { color: #fff; }
.tpl-innovation .cta-band { background: var(--ix-grad-strong); border-radius: 32px; }
.tpl-innovation .cta-band h2, .tpl-innovation .cta-band p { color: #fff; }
.tpl-innovation .cta-band::after { background: #fff; opacity: .12; }
.tpl-innovation .facts { display: none; }

/* ---------- Page heads & footer ---------- */
.tpl-innovation .page-head { margin-top: -76px; padding-top: calc(76px + clamp(2.5rem, 6vw, 4rem)); background: var(--brand-dark); }
.tpl-innovation .page-head::before { opacity: .8; }
.tpl-innovation .page-head h1 { letter-spacing: -.035em; }
.tpl-innovation .site-footer { position: relative; background: var(--footer-bg); }
.tpl-innovation .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ix-grad); }
.tpl-innovation .footer-wordmark {
  display: block; font: 700 clamp(3rem, 12vw, 9rem)/.95 var(--font-heading); letter-spacing: -.05em; margin-top: 2.5rem;
  background: var(--ix-grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .55;
  white-space: nowrap; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .tpl-innovation .btn:hover { transform: none; }
}

/* The glass pill is a containing block for the fixed mobile menu (backdrop-filter), which
   squeezed the open menu into the pill: drop the blur while the menu is open. */
.tpl-innovation.nav-open .site-header .header-inner { backdrop-filter: none; -webkit-backdrop-filter: none; }