/* ============================================================
   AM Learning — shared site stylesheet
   Extracted from Home.html. Linked by all pages for consistency.
   ============================================================ */

    :root {
      --purple: #8A2BA6;
      --purple-deep: #6B1F82;
      --purple-wash: #F4ECF6;
      --teal: #4FA585;          /* Think Deep */
      --teal-soft: rgba(79,165,133,0.12);
      --blue: #4FB3B8;          /* Think Together (turquoise from alt logo) */
      --blue-soft: rgba(79,179,184,0.14);
      --pink: #D94E8F;          /* accent (kept in palette, no longer a theme) */
      --pink-soft: rgba(217,78,143,0.10);
      --amber: #F2A007;         /* Think Ahead */
      --amber-soft: rgba(242,160,7,0.12);
      --slate: #44455E;
      --slate-soft: #6E6F84;
      --slate-mute: #9C9DAD;
      --bg: #FAF7F2;
      --bg-warm: #F2EDE4;
      --rule: #E5DED1;
      --ink: #2A2B3A;
      --shadow-card: 0 1px 2px rgba(42,43,58,0.04), 0 8px 28px rgba(42,43,58,0.06);
      --shadow-lift: 0 2px 4px rgba(42,43,58,0.05), 0 16px 40px rgba(42,43,58,0.10);
      --container: 1240px;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--slate);
      font-family: 'Open Sans', system-ui, sans-serif;
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }

    /* ---------- type helpers ---------- */
    .display { font-family: 'Raleway', sans-serif; }
    .eyebrow {
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--purple);
    }
    .eyebrow.muted { color: var(--slate-mute); }
    .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

    /* ---------- container ---------- */
    .wrap {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 48px;
    }
    @media (max-width: 720px) {
      .wrap { padding: 0 24px; }
    }

    /* ---------- nav ---------- */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(250, 247, 242, 0.85);
      backdrop-filter: saturate(140%) blur(14px);
      -webkit-backdrop-filter: saturate(140%) blur(14px);
      border-bottom: 1px solid transparent;
      transition: border-color 220ms ease, background 220ms ease;
    }
    .nav.scrolled {
      border-bottom-color: var(--rule);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 0;
      gap: 32px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .brand img { height: 44px; width: auto; }
    .brand-text {
      display: none;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav-links a {
      font-family: 'Raleway', sans-serif;
      font-weight: 500;
      font-size: 14px;
      color: var(--slate);
      letter-spacing: 0.02em;
      transition: color 160ms ease;
      position: relative;
      padding: 6px 0;
      white-space: nowrap;
    }
    .nav-links a:hover { color: var(--purple); }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0;
      height: 1.5px;
      background: var(--purple);
      transition: width 220ms ease;
    }
    .nav-links a:hover::after { width: 100%; }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 22px;
      border-radius: 999px;
      background: var(--purple);
      color: white;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.02em;
      transition: background 180ms ease, transform 180ms ease;
    }
    .nav-cta:hover { background: var(--purple-deep); transform: translateY(-1px); }
    .nav-cta .arrow { transition: transform 180ms ease; }
    .nav-cta:hover .arrow { transform: translateX(3px); }

    .menu-toggle {
      display: none;
      background: transparent;
      border: none;
      padding: 8px;
      color: var(--ink);
    }
    @media (max-width: 920px) {
      .nav-links, .nav-cta { display: none; }
      .menu-toggle { display: block; }
      .nav-inner.open + .nav-mobile { display: flex; }
    }
    .nav-mobile {
      display: none;
      flex-direction: column;
      padding: 16px 0 24px;
      border-top: 1px solid var(--rule);
      gap: 4px;
    }
    .nav-mobile a {
      padding: 12px 0;
      font-family: 'Raleway', sans-serif;
      font-weight: 500;
      font-size: 16px;
      color: var(--slate);
    }
    .nav-mobile .nav-cta { margin-top: 12px; display: inline-flex; align-self: flex-start; }

    /* ---------- hero ---------- */
    .hero {
      position: relative;
      overflow: hidden;
      padding-top: 120px;
      padding-bottom: 140px;
    }
    @media (max-width: 720px) { .hero { padding-top: 72px; padding-bottom: 96px; } }
    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 1000px;
      margin: 0 auto;
      text-align: center;
    }
    .hero-blobs {
      position: absolute;
      pointer-events: none;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }
    .hero-blobs .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(50px);
    }
    /* Brain-logo composition fading from the top-right of the hero */
    .blob-amber  { background: var(--amber);  width: 340px; height: 260px; top: -80px;  right: 26%; opacity: 0.18; }
    .blob-teal   { background: var(--teal);   width: 320px; height: 260px; top: -90px;  right: 8%;  opacity: 0.18; }
    .blob-purple { background: var(--purple); width: 620px; height: 360px; top: 30px;   right: -60px; opacity: 0.20; border-radius: 60%; }
    .blob-pink   { background: var(--pink);   width: 90px;  height: 90px;  top: 320px;  right: 16%; opacity: 0.22; }
    @media (max-width: 880px) {
      .blob-amber  { width: 220px; height: 170px; right: 18%; opacity: 0.14; }
      .blob-teal   { width: 200px; height: 170px; right: 4%;  opacity: 0.14; }
      .blob-purple { width: 380px; height: 230px; opacity: 0.16; }
      .blob-pink   { width: 60px;  height: 60px;  top: 220px; opacity: 0.18; }
    }

    .hero-eyebrow {
      font-family: 'Open Sans', sans-serif;
      font-style: italic;
      font-weight: 400;
      font-size: 17px;
      color: var(--purple);
      margin-bottom: 32px;
      letter-spacing: 0.01em;
    }
    .hero h1 {
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      font-size: clamp(44px, 6.4vw, 96px);
      line-height: 1.04;
      letter-spacing: -0.024em;
      color: var(--ink);
      margin: 0 auto 32px;
      max-width: 18ch;
      text-wrap: balance;
    }
    .hero h1 em {
      font-style: italic;
      font-weight: 300;
      color: var(--purple);
    }
    .hero-lede {
      font-size: 20px;
      line-height: 1.55;
      color: var(--slate);
      margin: 0 auto 44px;
      max-width: 60ch;
    }
    .hero-ctas {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
    /* small framework hint under CTAs */
    .hero-hint {
      margin-top: 64px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-family: 'Raleway', sans-serif;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--slate-mute);
    }
    .hero-hint .dots {
      display: inline-flex;
      gap: 6px;
    }
    .hero-hint .dots i {
      display: block;
      width: 8px; height: 8px;
      border-radius: 50%;
    }
    .hero-hint .dots i:nth-child(1) { background: var(--teal); }
    .hero-hint .dots i:nth-child(2) { background: var(--blue); }
    .hero-hint .dots i:nth-child(3) { background: var(--amber); }

    /* ---------- buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 26px;
      border-radius: 999px;
      font-family: 'Raleway', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.02em;
      transition: all 180ms ease;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn-primary {
      background: var(--purple);
      color: white;
    }
    .btn-primary:hover {
      background: var(--purple-deep);
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(138,43,166,0.25);
    }
    .btn-ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--rule);
    }
    .btn-ghost:hover {
      border-color: var(--slate);
      color: var(--purple);
    }
    .btn .arrow { transition: transform 180ms ease; }
    .btn:hover .arrow { transform: translateX(3px); }

    /* ---------- generic sections ---------- */
    section { padding: 96px 0; }
    @media (max-width: 720px) { section { padding: 64px 0; } }

    .section-head {
      max-width: 760px;
      margin: 0 auto 64px;
      text-align: center;
    }
    .section-head .eyebrow { margin-bottom: 18px; display: block; }
    .section-head h2 {
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      font-size: clamp(34px, 4.4vw, 52px);
      line-height: 1.1;
      letter-spacing: -0.018em;
      color: var(--ink);
      margin: 0 0 20px;
      text-wrap: balance;
    }
    .section-head h2 em {
      font-style: italic;
      color: var(--purple);
      font-weight: 300;
    }
    .section-head p {
      font-size: 18px;
      line-height: 1.55;
      color: var(--slate-soft);
      max-width: 60ch;
      margin: 0 auto;
    }

    /* ---------- intro / quote ---------- */
    .intro {
      background: linear-gradient(180deg, var(--bg) 0%, #F5F0E7 100%);
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
    }
    .intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    @media (max-width: 880px) {
      .intro-grid { grid-template-columns: 1fr; gap: 32px; }
    }
    .intro-quote {
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.2;
      letter-spacing: -0.014em;
      color: var(--ink);
      margin: 0;
    }
    .intro-quote em {
      font-style: italic;
      color: var(--purple);
    }
    .intro-body p {
      font-size: 17px;
      line-height: 1.65;
      color: var(--slate);
      margin: 0 0 16px;
    }
    .intro-body p:last-child { margin-bottom: 0; }

    /* ---------- signature keynote section ---------- */
    .modalities, .keynote {
      background: var(--bg);
    }
    .keynote-footer {
      margin-top: 36px;
      text-align: center;
      font-family: 'Open Sans', sans-serif;
      font-style: italic;
      font-size: 15px;
      color: var(--slate-soft);
      line-height: 1.6;
    }
    .keynote-footer a {
      color: var(--purple);
      font-style: normal;
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.02em;
      padding-bottom: 1px;
      border-bottom: 1px solid currentColor;
      margin-left: 6px;
    }
    .keynote-footer a:hover { color: var(--purple-deep); }
    .keynote-footer .arrow { transition: transform 160ms ease; display: inline-block; }
    .keynote-footer a:hover .arrow { transform: translateX(3px); }
    .signature-keynote {
      background: linear-gradient(135deg, #F8F1F8 0%, #FBF6F1 100%);
      border: 1px solid var(--rule);
      border-radius: 14px;
      padding: 48px 48px 44px;
      margin-bottom: 64px;
      position: relative;
      overflow: hidden;
    }
    .signature-keynote::before {
      content: '';
      position: absolute;
      width: 360px; height: 360px;
      background: radial-gradient(circle, rgba(138,43,166,0.18), transparent 65%);
      top: -120px; right: -80px;
      filter: blur(20px);
      pointer-events: none;
    }
    @media (max-width: 720px) { .signature-keynote { padding: 32px 28px; } }
    .sig-meta {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
    }
    .sig-eyebrow {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--purple);
    }
    .sig-divider {
      width: 30px; height: 1px;
      background: var(--purple);
      opacity: 0.4;
    }
    .sig-tag {
      font-family: 'Open Sans', sans-serif;
      font-style: italic;
      font-size: 14px;
      color: var(--slate-soft);
    }
    .sig-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 48px;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    @media (max-width: 880px) {
      .sig-grid { grid-template-columns: 1fr; gap: 28px; }
    }
    .sig-text h3 {
      font-family: 'Raleway', sans-serif;
      font-weight: 400;
      font-size: clamp(30px, 3.6vw, 42px);
      line-height: 1.08;
      letter-spacing: -0.018em;
      color: var(--ink);
      margin: 0 0 18px;
    }
    .sig-text p {
      font-size: 17px;
      line-height: 1.6;
      color: var(--slate);
      margin: 0 0 28px;
      max-width: 56ch;
    }
    .sig-side {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      padding-left: 32px;
      border-left: 1px solid var(--rule);
    }
    @media (max-width: 880px) {
      .sig-side { padding-left: 0; border-left: none; padding-top: 24px; border-top: 1px solid var(--rule); grid-template-columns: repeat(3, 1fr); gap: 24px; }
    }
    .sig-stat .num {
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      font-size: 40px;
      color: var(--purple);
      line-height: 1;
      letter-spacing: -0.02em;
      margin-bottom: 4px;
    }
    .sig-stat .lbl {
      font-family: 'Open Sans', sans-serif;
      font-size: 13px;
      color: var(--slate-soft);
      line-height: 1.4;
    }

    .modality-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
    @media (max-width: 880px) {
      .modality-grid { grid-template-columns: 1fr; gap: 24px; }
    }
    .modality {
      padding: 32px 0 24px;
      border-top: 2px solid var(--purple);
      position: relative;
    }
    .modality .m-no {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.12em;
      color: var(--purple);
      margin-bottom: 14px;
    }
    .modality h4 {
      font-family: 'Raleway', sans-serif;
      font-weight: 400;
      font-size: 32px;
      letter-spacing: -0.018em;
      color: var(--ink);
      margin: 0 0 10px;
      line-height: 1.05;
    }
    .modality .m-duration {
      font-family: 'Open Sans', sans-serif;
      font-style: italic;
      font-size: 14px;
      color: var(--slate-mute);
      margin: 0 0 18px;
    }
    .modality .m-blurb {
      font-size: 15px;
      line-height: 1.6;
      color: var(--slate);
      margin: 0 0 16px;
    }
    .modality .m-best {
      font-family: 'Raleway', sans-serif;
      font-style: italic;
      font-weight: 500;
      font-size: 14px;
      color: var(--purple);
      margin: 0;
      line-height: 1.45;
    }

    .modality-footnote {
      margin-top: 56px;
      text-align: center;
      font-size: 14px;
      color: var(--slate-soft);
      max-width: 70ch;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
    }

    /* ---------- framework (compact) ---------- */
    .framework {
      background: var(--bg);
      padding: 88px 0;
    }
    @media (max-width: 720px) { .framework { padding: 64px 0; } }
    .framework-compact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    @media (max-width: 980px) {
      .framework-compact { grid-template-columns: 1fr; gap: 56px; }
    }
    .fc-text .eyebrow { display: block; margin-bottom: 20px; }
    .fc-text h2 {
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      font-size: clamp(30px, 3.8vw, 46px);
      line-height: 1.08;
      letter-spacing: -0.018em;
      color: var(--ink);
      margin: 0 0 22px;
      text-wrap: balance;
    }
    .fc-text h2 em { font-style: italic; color: var(--purple); font-weight: 300; }
    .fc-text p {
      font-size: 17px;
      line-height: 1.65;
      color: var(--slate);
      margin: 0 0 28px;
      max-width: 50ch;
    }
    .fc-levels {
      display: flex;
      gap: 14px;
      margin-bottom: 32px;
      flex-wrap: wrap;
    }
    .fc-level {
      flex: 1;
      min-width: 180px;
      padding: 14px 18px;
      background: white;
      border: 1px solid var(--rule);
      border-radius: 8px;
    }
    .fc-level .lbl {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--purple);
      margin-bottom: 2px;
      display: block;
    }
    .fc-level h4 {
      font-family: 'Raleway', sans-serif;
      font-weight: 500;
      font-size: 15px;
      color: var(--ink);
      margin: 0;
      letter-spacing: -0.005em;
    }

    /* Hex wheel */
    .hex-wheel {
      position: relative;
      width: 100%;
      max-width: 520px;
      aspect-ratio: 1;
      margin: 0 auto;
    }
    .hex-wheel svg.hex-outline {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    /* slow continuous rotation on the connector layer */
    .hex-outline .rotating {
      transform-origin: 50% 50%;
      animation: hex-spin 60s linear infinite;
    }
    .hex-outline .rotating.reverse {
      animation: hex-spin 90s linear infinite reverse;
    }
    @keyframes hex-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    /* gentle breath on the whole wheel */
    .hex-wheel { animation: hex-breath 9s ease-in-out infinite; }
    @keyframes hex-breath {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.012); }
    }
    .hex-wheel.active { animation-play-state: paused; }

    .hex-center {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 32%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, var(--purple-wash) 0%, #FBF6F1 80%);
      border: 1px solid rgba(138,43,166,0.18);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      z-index: 2;
      padding: 6%;
      transition: opacity 320ms ease, transform 320ms ease;
    }
    .hex-wheel.active .hex-center { opacity: 0; transform: translate(-50%, -50%) scale(0.92); pointer-events: none; }
    .hex-center .ttl {
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.04em;
      color: var(--purple);
      margin-bottom: 8px;
      line-height: 1.25;
      text-transform: none;
    }
    .hex-center .sub {
      font-family: 'Open Sans', sans-serif;
      font-style: italic;
      font-weight: 400;
      font-size: 12px;
      color: var(--slate-soft);
      line-height: 1.35;
    }
    .hex-center .hint {
      margin-top: 8px;
      font-family: 'Raleway', sans-serif;
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--slate-mute);
    }

    .hex-dim {
      position: absolute;
      width: 30%;
      padding: 11px 9px 12px;
      background: white;
      border: 1px solid var(--rule);
      border-radius: 12px;
      text-align: center;
      /* Keep card upright by counter-rotating against the orbit (ferris-wheel pattern) */
      transform: translate(-50%, -50%) rotate(var(--rot-neg, 0deg));
      z-index: 2;
      cursor: pointer;
      transition: transform 820ms cubic-bezier(0.2, 0.7, 0.2, 1),
                  box-shadow 280ms ease,
                  border-color 280ms ease,
                  background 280ms ease,
                  opacity 280ms ease;
      user-select: none;
    }
    .hex-dim:hover {
      transform: translate(-50%, -54%) rotate(var(--rot-neg, 0deg));
      box-shadow: var(--shadow-card);
      border-color: rgba(138,43,166,0.30);
    }
    .hex-dim.personal { background: #FBF5FA; border-color: rgba(138,43,166,0.18); }

    /* orbit layer (rotates so the active dim lands at 12 o'clock) */
    .hex-orbit {
      position: absolute;
      inset: 0;
      transform: rotate(var(--rot, 0deg));
      transition: transform 820ms cubic-bezier(0.2, 0.7, 0.2, 1);
      transform-origin: 50% 50%;
    }
    /* Inner content wrapper (no rotation — box itself stays upright via per-card transform) */
    .hex-dim-content {
      display: block;
    }

    /* floating idle motion on each card (staggered) */
    .hex-dim { animation: hex-float 6s ease-in-out infinite; }
    .hex-d1 { animation-delay: 0s; }
    .hex-d2 { animation-delay: 1s; }
    .hex-d3 { animation-delay: 2s; }
    .hex-d4 { animation-delay: 3s; }
    .hex-d5 { animation-delay: 4s; }
    .hex-d6 { animation-delay: 5s; }
    @keyframes hex-float {
      0%, 100% { translate: 0 0; }
      50%      { translate: 0 -3px; }
    }
    .hex-wheel.active .hex-dim { animation-play-state: paused; }

    .hex-dim .num {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 0.14em;
      color: var(--purple);
      margin-bottom: 3px;
      line-height: 1;
      transition: color 200ms ease;
    }
    .hex-dim .name {
      font-family: 'Raleway', sans-serif;
      font-weight: 500;
      font-size: 12px;
      color: var(--ink);
      line-height: 1.25;
      letter-spacing: -0.005em;
    }

    /* active dim: highlights with brand colour, pulls into focus */
    .hex-wheel.active .hex-dim { opacity: 0.35; }
    .hex-wheel.active .hex-dim:hover { opacity: 0.55; transform: translate(-50%, -54%) rotate(var(--rot-neg, 0deg)); }
    .hex-dim.is-active {
      opacity: 1 !important;
      background: var(--purple) !important;
      border-color: var(--purple) !important;
      color: white;
      box-shadow: 0 14px 36px rgba(138,43,166,0.30), 0 4px 12px rgba(138,43,166,0.18);
      transform: translate(-50%, -54%) rotate(var(--rot-neg, 0deg)) scale(1.06);
    }
    .hex-dim.is-active .num { color: rgba(255,255,255,0.75); }
    .hex-dim.is-active .name { color: white; }

    /* expanded detail panel */
    .hex-detail {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) scale(0.94);
      width: 76%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: white;
      border: 1px solid var(--rule);
      box-shadow: 0 24px 60px rgba(42,43,58,0.10), 0 6px 16px rgba(42,43,58,0.06);
      padding: 18% 16%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 340ms ease, transform 340ms cubic-bezier(0.2,0.7,0.2,1);
      z-index: 1;
    }
    .hex-wheel.active .hex-detail {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      pointer-events: auto;
    }
    .hex-detail .num {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--purple);
      margin-bottom: 6px;
    }
    .hex-detail .title {
      font-family: 'Raleway', sans-serif;
      font-weight: 400;
      font-size: 22px;
      color: var(--ink);
      letter-spacing: -0.01em;
      margin: 0 0 10px;
      line-height: 1.15;
    }
    .hex-detail .blurb {
      font-family: 'Open Sans', sans-serif;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--slate);
      margin: 0 0 12px;
    }
    .hex-detail .lvl {
      display: inline-block;
      font-family: 'Raleway', sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--slate-mute);
    }
    .hex-detail .close-hint {
      margin-top: 12px;
      font-family: 'Raleway', sans-serif;
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--slate-mute);
      opacity: 0.7;
    }

    /* positions on hexagon (radius 38%, clockwise from 10 o'clock so D1-D3 sit top half = personal, D4-D6 bottom half = strategic) */
    .hex-d1 { top: 31%;  left: 17.1%; }  /* 10 o'clock */
    .hex-d2 { top: 12%;  left: 50%;   }  /* 12 o'clock */
    .hex-d3 { top: 31%;  left: 82.9%; }  /*  2 o'clock */
    .hex-d4 { top: 69%;  left: 82.9%; }  /*  4 o'clock */
    .hex-d5 { top: 88%;  left: 50%;   }  /*  6 o'clock */
    .hex-d6 { top: 69%;  left: 17.1%; }  /*  8 o'clock */

    @media (max-width: 720px) {
      .hex-wheel { max-width: 360px; }
      .hex-dim { width: 32%; padding: 8px 6px; }
      .hex-dim .name { font-size: 11px; }
      .hex-center .ttl { font-size: 10px; }
      .hex-detail { width: 84%; padding: 14% 12%; }
      .hex-detail .title { font-size: 17px; }
      .hex-detail .blurb { font-size: 12.5px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hex-wheel, .hex-dim, .hex-outline .rotating { animation: none !important; }
    }
    /* ---------- themes ---------- */
    .themes {
      background: var(--bg-warm);
      position: relative;
    }
    .themes-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    @media (max-width: 980px) {
      .themes-grid { grid-template-columns: 1fr; gap: 18px; }
    }
    .theme-card {
      background: white;
      border-radius: 14px;
      padding: 40px 36px 36px;
      border: 1px solid var(--rule);
      transition: all 260ms ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .theme-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 5px;
      background: var(--accent);
      transition: height 260ms ease;
    }
    .theme-card:hover::before { height: 8px; }
    .theme-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lift);
    }
    .theme-card.deep { --accent: var(--teal); }
    .theme-card.together { --accent: var(--blue); }
    .theme-card.ahead { --accent: var(--amber); }

    .theme-no {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 13px;
      color: var(--accent);
      letter-spacing: 0.1em;
      margin-bottom: 22px;
    }
    .theme-card h3 {
      font-family: 'Raleway', sans-serif;
      font-weight: 400;
      font-size: 36px;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin: 0 0 4px;
    }
    .theme-card .tag {
      font-family: 'Open Sans', sans-serif;
      font-style: italic;
      font-size: 15px;
      color: var(--slate-soft);
      margin: 0 0 24px;
    }
    .theme-card .blurb {
      font-size: 15px;
      line-height: 1.6;
      color: var(--slate);
      margin: 0 0 28px;
      flex: 1;
    }
    .theme-flagship {
      padding-top: 22px;
      border-top: 1px solid var(--rule);
    }
    .theme-flagship .label {
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--slate-mute);
      margin-bottom: 6px;
    }
    .theme-flagship .name {
      font-family: 'Raleway', sans-serif;
      font-weight: 500;
      font-size: 17px;
      color: var(--ink);
      letter-spacing: -0.005em;
      line-height: 1.3;
    }
    .theme-flagship .name + .name { margin-top: 4px; }
    .theme-flagship .name .partner {
      display: block;
      font-family: 'Open Sans', sans-serif;
      font-style: italic;
      font-weight: 400;
      font-size: 13px;
      color: var(--slate-mute);
      margin-top: 2px;
      letter-spacing: 0;
    }
    .theme-flagship .sub {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px dashed var(--rule);
    }

    .themes-footer {
      margin-top: 56px;
      text-align: center;
    }

    /* ---------- what changes ---------- */
    .changes-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }
    @media (max-width: 880px) {
      .changes-grid { grid-template-columns: 1fr; gap: 28px; }
    }
    .change-col h3 {
      font-family: 'Raleway', sans-serif;
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -0.01em;
      color: var(--ink);
      margin: 0 0 24px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--rule);
    }
    .change-col h3 span {
      color: var(--purple);
      font-weight: 400;
      font-style: italic;
    }
    .change-list { list-style: none; margin: 0; padding: 0; }
    .change-item {
      padding: 16px 0;
      border-bottom: 1px solid var(--rule);
    }
    .change-item:last-child { border-bottom: none; }
    .change-item .h {
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 15px;
      color: var(--ink);
      margin: 0 0 4px;
    }
    .change-item p {
      font-size: 14px;
      color: var(--slate-soft);
      margin: 0;
      line-height: 1.55;
    }

    /* ---------- about teaser ---------- */
    .about {
      background: var(--bg);
      border-top: 1px solid var(--rule);
    }
    .about-grid {
      display: grid;
      grid-template-columns: 0.7fr 1.3fr;
      gap: 64px;
      align-items: center;
      max-width: 1040px;
      margin: 0 auto;
    }
    @media (max-width: 980px) {
      .about-grid { grid-template-columns: 1fr; gap: 40px; max-width: 560px; }
    }
    .about-photo {
      aspect-ratio: 4 / 5;
      max-width: 320px;
      width: 100%;
      margin: 0 auto;
      border-radius: 12px;
      overflow: hidden;
      background: var(--bg-warm);
      box-shadow: var(--shadow-lift);
      position: relative;
    }
    .about-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .about-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(42,43,58,0.25) 100%);
      pointer-events: none;
    }
    .about-text .eyebrow { margin-bottom: 18px; display: block; }
    .about-text h2 {
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.1;
      letter-spacing: -0.018em;
      color: var(--ink);
      margin: 0 0 24px;
      text-wrap: balance;
    }
    .about-text h2 em {
      font-style: italic;
      color: var(--purple);
    }
    .about-text p {
      font-size: 17px;
      line-height: 1.65;
      color: var(--slate);
      margin: 0 0 16px;
    }
    .credentials {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid var(--rule);
      display: flex;
      flex-wrap: wrap;
      gap: 18px 28px;
      font-family: 'Raleway', sans-serif;
      font-size: 13px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--slate-mute);
      font-weight: 600;
    }
    .credentials span { display: inline-flex; align-items: center; gap: 8px; }
    .credentials span::before {
      content: '';
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--purple);
      opacity: 0.6;
    }
    .about-cta { margin-top: 32px; }

    /* ---------- CTA section ---------- */
    .cta {
      position: relative;
      overflow: hidden;
      padding: 120px 0;
      background:
        radial-gradient(circle at 80% 30%, rgba(242,160,7,0.18), transparent 50%),
        radial-gradient(circle at 15% 70%, rgba(79,165,133,0.15), transparent 50%),
        radial-gradient(circle at 60% 90%, rgba(79,179,184,0.16), transparent 55%),
        linear-gradient(135deg, #F4ECF6 0%, #FBF6F1 100%);
    }
    @media (max-width: 720px) { .cta { padding: 80px 0; } }
    .cta-inner {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .cta .eyebrow { display: block; margin-bottom: 22px; color: var(--purple); }
    .cta h2 {
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      font-size: clamp(38px, 5.2vw, 64px);
      line-height: 1.05;
      letter-spacing: -0.022em;
      color: var(--ink);
      margin: 0 0 24px;
      text-wrap: balance;
    }
    .cta h2 em { font-style: italic; color: var(--purple); }
    .cta p {
      font-size: 19px;
      line-height: 1.55;
      color: var(--slate);
      max-width: 56ch;
      margin: 0 auto 36px;
    }
    .cta-row {
      display: flex;
      gap: 14px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .cta-row .email {
      font-family: 'Open Sans', sans-serif;
      font-size: 15px;
      color: var(--slate);
      padding-left: 8px;
    }
    .cta-row .email a {
      color: var(--purple);
      border-bottom: 1px solid currentColor;
      padding-bottom: 1px;
    }
    .cta-footnote {
      margin-top: 40px;
      font-family: 'Raleway', sans-serif;
      font-style: italic;
      font-size: 14px;
      color: var(--slate-mute);
    }

    /* ---------- footer ---------- */
    footer {
      background: var(--bg);
      border-top: 1px solid var(--rule);
      padding: 64px 0 40px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 56px;
    }
    @media (max-width: 880px) {
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    }
    @media (max-width: 480px) {
      .footer-grid { grid-template-columns: 1fr; }
    }
    .footer-brand img { height: 56px; margin-bottom: 16px; }
    .footer-brand p {
      font-family: 'Open Sans', sans-serif;
      font-style: italic;
      font-size: 15px;
      color: var(--purple);
      margin: 0 0 18px;
    }
    .footer-brand small {
      font-size: 13px;
      color: var(--slate-mute);
      line-height: 1.5;
      display: block;
    }
    .footer-col h5 {
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--slate-mute);
      margin: 0 0 18px;
    }
    .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .footer-col a {
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      color: var(--slate);
      transition: color 160ms ease;
    }
    .footer-col a:hover { color: var(--purple); }
    .footer-bottom {
      padding-top: 32px;
      border-top: 1px solid var(--rule);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      font-family: 'Open Sans', sans-serif;
      font-size: 12px;
      color: var(--slate-mute);
    }

    /* ---------- tweaks panel ---------- */
    .tweaks-panel {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 320px;
      background: white;
      border: 1px solid var(--rule);
      border-radius: 14px;
      padding: 18px 20px 20px;
      box-shadow: 0 20px 60px rgba(42,43,58,0.15), 0 4px 12px rgba(42,43,58,0.08);
      z-index: 1000;
      font-family: 'Open Sans', sans-serif;
      transform: translateY(20px);
      opacity: 0;
      pointer-events: none;
      transition: transform 220ms ease, opacity 220ms ease;
    }
    .tweaks-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .tweaks-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule);
    }
    .tweaks-header h6 {
      font-family: 'Raleway', sans-serif;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink);
      margin: 0;
    }
    .tweaks-close {
      background: transparent; border: none; padding: 2px 6px;
      color: var(--slate-mute); font-size: 18px; line-height: 1; cursor: pointer;
      border-radius: 4px;
    }
    .tweaks-close:hover { background: var(--bg-warm); color: var(--ink); }
    .tweak-row { margin-bottom: 14px; }
    .tweak-row:last-child { margin-bottom: 0; }
    .tweak-row .tlabel {
      display: block;
      font-family: 'Raleway', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--slate-mute);
      margin-bottom: 8px;
    }
    .tweak-seg {
      display: flex;
      background: var(--bg);
      border: 1px solid var(--rule);
      border-radius: 999px;
      padding: 3px;
      gap: 2px;
    }
    .tweak-seg button {
      flex: 1;
      padding: 7px 0;
      background: transparent;
      border: none;
      font-family: 'Raleway', sans-serif;
      font-size: 12px;
      font-weight: 600;
      color: var(--slate-soft);
      cursor: pointer;
      border-radius: 999px;
      transition: all 160ms ease;
      white-space: nowrap;
    }
    .tweak-seg button:hover { color: var(--ink); }
    .tweak-seg button.active {
      background: white;
      color: var(--purple);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .tweak-toggle {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; cursor: pointer; user-select: none;
    }
    .tweak-toggle .tlabel { margin-bottom: 0; }
    .tweak-toggle .switch {
      flex: 0 0 36px; width: 36px; height: 20px;
      background: var(--rule); border-radius: 999px;
      position: relative; transition: background 180ms ease;
    }
    .tweak-toggle .switch::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 16px; height: 16px; background: white; border-radius: 50%;
      transition: transform 180ms ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }
    .tweak-toggle.on .switch { background: var(--purple); }
    .tweak-toggle.on .switch::after { transform: translateX(16px); }
    .tweak-divider { height: 1px; background: var(--rule); margin: 14px 0; }

    /* tweak state effects */
    body[data-heading-weight="200"] .hero h1,
    body[data-heading-weight="200"] .section-head h2,
    body[data-heading-weight="200"] .cta h2,
    body[data-heading-weight="200"] .about-text h2,
    body[data-heading-weight="200"] .sig-text h3 { font-weight: 200; }
    body[data-heading-weight="400"] .hero h1,
    body[data-heading-weight="400"] .section-head h2,
    body[data-heading-weight="400"] .cta h2,
    body[data-heading-weight="400"] .about-text h2,
    body[data-heading-weight="400"] .sig-text h3 { font-weight: 400; }

    body[data-themes="inverted"] .theme-card.deep      { --accent: var(--amber); }
    body[data-themes="inverted"] .theme-card.together  { --accent: var(--teal); }
    body[data-themes="inverted"] .theme-card.ahead     { --accent: var(--blue); }
    body[data-themes="inverted"] .theme-card.deep .theme-no    { color: var(--amber); }
    body[data-themes="inverted"] .theme-card.together .theme-no{ color: var(--teal); }
    body[data-themes="inverted"] .theme-card.ahead .theme-no   { color: var(--blue); }
    body[data-themes="inverted"] .hero-hint .dots i:nth-child(1) { background: var(--amber); }
    body[data-themes="inverted"] .hero-hint .dots i:nth-child(2) { background: var(--teal); }
    body[data-themes="inverted"] .hero-hint .dots i:nth-child(3) { background: var(--blue); }

    body[data-themes="unified"] .theme-card.deep,
    body[data-themes="unified"] .theme-card.together,
    body[data-themes="unified"] .theme-card.ahead       { --accent: var(--purple); }
    body[data-themes="unified"] .theme-no               { color: var(--purple) !important; }
    body[data-themes="unified"] .hero-hint .dots i      { background: var(--purple); }

    body[data-bg="neutral"]  { --bg: #F6F5F2; --bg-warm: #ECEBE6; }
    body[data-bg="cool"]     { --bg: #F4F5F7; --bg-warm: #E8EAEE; }
    body[data-bg="paper"]    { --bg: #F8F4EC; --bg-warm: #EFE9DC; }

    body[data-hide-modalities="true"] #modalities { display: none; }
    body[data-hide-keynote="true"] #keynote { display: none; }
    body[data-hide-changes="true"] #changes { display: none; }
    body[data-hide-framework="true"] #framework { display: none; }

    /* ---------- reveal animation ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 720ms cubic-bezier(0.2,0.6,0.2,1), transform 720ms cubic-bezier(0.2,0.6,0.2,1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }