:root {
    /* LOCKED PALETTE — Lime & Black */
    --blue: #5C7C1B;      /* primary lime-green */
    --purple: #14160F;    /* near-black (the "Black") */
    --teal: #9DC247;      /* bright lime accent */
    --bg: #F6F8F1;        /* light background */
    --ink: #0E120B;       /* near-black text */
    --success: #22C55E;

    /* Derived neutrals (warm) */
    --ink-2: #4F524B;
    --ink-3: #797C75;
    --line: #DADCD5;
    --card: #FFFFFF;
    --white: #FFFFFF;
    --silver: #B6B6B5;    /* metallic silver swoosh */

    /* Gradients */
    --grad-primary: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
    --grad-soft: linear-gradient(135deg, var(--purple) 0%, var(--teal) 100%);
    --grad-hero: radial-gradient(1200px 600px at 75% -10%, rgba(157,194,71,0.18), transparent 60%),
                 radial-gradient(900px 500px at 10% 0%, rgba(92,124,27,0.12), transparent 55%);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(27,27,26,0.05), 0 1px 3px rgba(27,27,26,0.06);
    --shadow-md: 0 8px 24px rgba(45,60,15,0.10), 0 2px 6px rgba(27,27,26,0.05);
    --shadow-lg: 0 24px 60px rgba(45,60,15,0.18), 0 6px 18px rgba(27,27,26,0.06);
    --shadow-blue: 0 12px 30px rgba(61,90,18,0.32);

    /* Radii (8px system) */
    --r-sm: 12px;
    --r-md: 20px;
    --r-lg: 28px;
    --r-xl: 36px;

    --maxw: 1200px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* ----- LOCKED FONTS — Luxe Sans (Poppins headings / Montserrat body) ----- */
    --font-head: 'Poppins', sans-serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent: 'Poppins', sans-serif;
    --head-weight: 700;
    --head-letter: -0.02em;
    --body-line: 1.6;
    --accent-style: italic;            /* italic headings accent on/off */
    --r-pill: 999px;                   /* pill rounding (sharp studio mode squares it) */
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }

  html { background: var(--bg); }
  body {
    margin: 0;
    font-family: var(--font-body);
    background: transparent;
    color: var(--ink);
    line-height: var(--body-line);
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: var(--head-weight);
    line-height: 1.08;
    letter-spacing: var(--head-letter);
    margin: 0;
    color: var(--ink);
  }

  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
  .section { padding: 80px 0; position: relative; }

  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--blue);
    background: rgba(92,124,27,0.08);
    padding: 7px 14px; border-radius: 999px;
    margin-bottom: 20px;
  }
  .eyebrow.teal { color: #4E6B16; background: rgba(157,194,71,0.16); }
  .eyebrow.purple { color: var(--purple); background: rgba(61,90,18,0.10); }

  .section-head { max-width: 640px; }
  .section-head.center { margin: 0 auto; text-align: center; }
  .section-head h2 { font-size: clamp(2rem, 4vw, 3rem); }
  .section-head p { color: var(--ink-2); font-size: 1.1rem; margin-top: 16px; }

  .gradient-text {
    background: var(--grad-primary);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 1rem;
    padding: 15px 28px; border-radius: 14px; cursor: pointer;
    border: 1px solid transparent; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
    will-change: transform;
  }
  .btn:focus-visible { outline: 3px solid rgba(92,124,27,0.45); outline-offset: 2px; }
  .btn-primary {
    color: #fff; background: var(--grad-primary);
    background-size: 160% 160%; background-position: 0% 50%;
    box-shadow: var(--shadow-blue);
  }
  .btn-primary:hover { transform: translateY(-2px); background-position: 100% 50%; box-shadow: 0 16px 38px rgba(92,124,27,0.45); }
  .btn-ghost {
    color: var(--ink); background: rgba(255,255,255,0.7);
    border-color: var(--line); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm);
  }
  .btn-ghost:hover { transform: translateY(-2px); border-color: #C8CFB6; box-shadow: var(--shadow-md); }
  .btn-light { color: var(--blue); background: #fff; }
  .btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .btn-outline-light { color: #fff; border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.08); }
  .btn-outline-light:hover { transform: translateY(-2px); background: rgba(255,255,255,0.16); }
  /* Pill variants (hero / statement) */
  .btn-pill { border-radius: 999px; padding: 16px 30px; }
  .btn-pill-light { border-radius: 999px; padding: 16px 30px; color: #1B1B1A; background: #fff; }
  .btn-pill-light:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,0.28); }
  .btn-pill-glass { border-radius: 999px; padding: 16px 30px; color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.30); backdrop-filter: blur(8px); }
  .btn-pill-glass:hover { transform: translateY(-2px); background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.55); }
  .btn-pill-outline { border-radius: 999px; padding: 16px 30px; color: var(--ink); background: transparent; border-color: #C8CFB6; }
  .btn-pill-outline:hover { transform: translateY(-2px); border-color: var(--blue); color: var(--blue); }

  /* ---------- Floating background shapes ---------- */
  .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; z-index: 0; pointer-events: none; }

  /* ---------- Nav ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(247,248,243,0.72);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  }
  header.nav.scrolled { background: rgba(247,248,243,0.88); border-color: var(--line); box-shadow: 0 6px 20px rgba(27,27,26,0.05); }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }
  .brand { display: flex; align-items: center; }
  .brand-chip { display: inline-flex; align-items: center; }
  .brand-logo { height: 66px; width: auto; display: block; }
  .ft-logo-chip { display: inline-flex; background: #fff; padding: 12px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow-md); margin-bottom: 16px; }
  .ft-logo-chip img { height: 48px; width: auto; display: block; }
  .nav-links { display: flex; align-items: center; gap: 34px; }
  .nav-links a.link { font-size: 0.95rem; font-weight: 500; color: var(--ink-2); position: relative; transition: color 0.2s; }
  .nav-links a.link::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--grad-primary); transition: width 0.25s var(--ease); border-radius: 2px; }
  .nav-links a.link:hover { color: var(--ink); }
  .nav-links a.link:hover::after { width: 100%; }
  .nav-cta { display: flex; align-items: center; gap: 14px; }
  .nav-cta .btn { padding: 11px 20px; font-size: 0.93rem; }
  .menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 11px; width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; color: var(--ink); }
  header.nav.scrolled .menu-toggle { background: none; border-color: var(--line); color: var(--ink); }

  /* ---------- Hero (dark, editorial) ---------- */
  .hero {
    position: relative; overflow: hidden; isolation: isolate;
    margin-top: -84px; padding: 180px 0 120px;
    background: var(--bg);
    color: var(--ink); text-align: center;
  }
  .hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background:  center right / cover no-repeat;
    opacity: 0.4;
  }
  .hero::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(100deg, rgba(247,248,243,0.88) 0%, rgba(247,248,243,0.58) 50%, rgba(247,248,243,0.20) 100%),
      radial-gradient(820px 480px at 50% -10%, rgba(157,194,71,0.18), transparent 62%);
  }
  .hero-inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }
  .hero-eyebrow {
    display: inline-block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--blue); margin-bottom: 26px;
  }
  .hero-title {
    color: var(--ink); font-size: clamp(3rem, 7.2vw, 6rem); line-height: 1.03;
    letter-spacing: -0.025em; font-weight: 700;
  }
  .hero-title em {
    font-family: var(--font-accent); font-style: var(--accent-style); font-weight: 400;
    color: var(--blue); letter-spacing: 0; padding: 0 0.04em;
  }
  .hero-sub {
    font-size: 1.3rem; color: var(--ink-2); max-width: 660px;
    margin: 30px auto 42px; line-height: 1.6;
  }
  .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
  .hero-ctas .btn { padding: 18px 38px; font-size: 1.04rem; }
  .hero-note { margin-top: 26px; font-size: 0.88rem; color: var(--ink-3); letter-spacing: 0.02em; }
  .scroll-cue {
    margin-top: 64px; display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
    font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
  }
  .scroll-cue svg { animation: bobbing 1.8s ease-in-out infinite; }
  @keyframes bobbing { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

  /* ---------- Statement (editorial intro) ---------- */
  .statement { padding: 76px 0; text-align: center; position: relative; overflow: hidden; }
  .stmt-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(600px 320px at 50% 0%, rgba(157,194,71,0.18), transparent 66%); }
  .statement .wrap { position: relative; z-index: 1; }
  .big-statement {
    max-width: 900px; margin: 22px auto 0; font-family: 'Garet', 'DM Sans', sans-serif;
    font-size: clamp(1.45rem, 2.7vw, 2.1rem); line-height: 1.4; letter-spacing: -0.01em;
    color: var(--ink); font-weight: 500;
  }
  .big-statement .muted { color: #A7AE9C; }
  .big-statement .accent { color: var(--blue); }
  .stmt-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 740px; margin: 40px auto 34px; }
  .sfact { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 14px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
  .sfact:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .sfact-n { display: block; font-family: 'Garet', 'DM Sans'; font-weight: 700; font-size: 1.95rem; line-height: 1; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .sfact-l { display: block; margin-top: 8px; font-size: 0.85rem; color: var(--ink-2); line-height: 1.3; }
  @media (max-width: 640px) { .stmt-facts { grid-template-columns: repeat(2, 1fr); } }
  .statement .btn { margin-top: 4px; }

  /* ---------- Trust / stats ---------- */
  .stats-band { position: relative; z-index: 2; }
  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .stat {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 30px 26px; box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .stat .num { font-family: 'Garet', 'DM Sans'; font-weight: 800; font-size: 2.6rem; line-height: 1; }
  .stat .lbl { color: var(--ink-2); margin-top: 8px; font-weight: 500; }
  .trust-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 46px; }
  .trust-pill {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid var(--line); background: #fff; border-radius: 999px;
    padding: 11px 20px; font-weight: 600; font-size: 0.92rem; color: var(--ink-2);
    box-shadow: var(--shadow-sm);
  }

  /* ---------- About / features ---------- */
  .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 54px; }
  .feature-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 38px 32px; box-shadow: var(--shadow-sm);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
    position: relative; overflow: hidden;
  }
  .feature-card::before { content: ''; position: absolute; inset: 0; background: var(--grad-soft); opacity: 0; transition: opacity 0.35s; }
  .feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
  .feature-icn {
    width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
    background: rgba(92,124,27,0.10); margin-bottom: 22px; transition: transform 0.35s var(--ease);
  }
  .feature-card:hover .feature-icn { transform: scale(1.06) rotate(-3deg); }
  .feature-card h3 { font-size: 1.35rem; margin-bottom: 10px; }
  .feature-card p { color: var(--ink-2); margin: 0; }

  /* ---------- Courses ---------- */
  .course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 54px; }
  .course-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 26px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
    transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease), border-color 0.32s;
  }
  .course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: #D7E3B4; }
  .course-icn { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; }
  .course-card h3 { font-size: 1.16rem; margin-bottom: 8px; }
  .course-card .desc { color: var(--ink-2); font-size: 0.94rem; flex: 1; }
  .course-tags { display: flex; gap: 8px; margin: 18px 0 16px; flex-wrap: wrap; }
  .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }
  .tag.lvl-beg { color: #4E6B16; background: rgba(157,194,71,0.13); border-color: transparent; }
  .tag.lvl-int { color: var(--blue); background: rgba(92,124,27,0.09); border-color: transparent; }
  .tag.lvl-adv { color: var(--purple); background: rgba(61,90,18,0.10); border-color: transparent; }
  .course-card .learn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--blue); font-size: 0.94rem; transition: gap 0.25s var(--ease); }
  .course-card .learn:hover { gap: 12px; }

  /* ---------- Packages ---------- */
  .pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 54px; align-items: start; }
  .pkg-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 34px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
    position: relative; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
  }
  .pkg-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: #D7E3B4; }
  .pkg-card.featured { border-color: transparent; background: linear-gradient(180deg, #15190F, #0E120B); box-shadow: var(--shadow-lg); }
  .pkg-card.featured:hover { border-color: transparent; }
  .pkg-card.featured .pkg-name { color: #fff; }
  .pkg-card.featured .pkg-desc { color: rgba(255,255,255,0.72); }
  .pkg-card.featured .pkg-incl li { color: rgba(255,255,255,0.92); }
  .pkg-card.featured .pkg-meta { color: rgba(255,255,255,0.6); border-top-color: rgba(255,255,255,0.16); }
  .pkg-tag {
    position: absolute; top: 18px; right: 18px; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: #0E120B; background: var(--teal);
    padding: 6px 12px; border-radius: 999px;
  }
  .pkg-icn { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px; }
  .pkg-name { font-family: 'Garet', 'DM Sans', sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--ink); letter-spacing: -0.01em; }
  .pkg-desc { color: var(--ink-2); margin: 8px 0 20px; font-size: 0.96rem; }
  .pkg-incl { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 11px; }
  .pkg-incl.two { grid-template-columns: 1fr 1fr; gap: 11px 16px; }
  .pkg-incl li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.91rem; color: var(--ink); line-height: 1.35; }
  .pkg-incl li svg { flex-shrink: 0; margin-top: 1px; }
  .pkg-meta { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
  .pkg-meta svg { flex-shrink: 0; }
  .pkg-card .btn { margin-top: 18px; width: 100%; }
  .pkg-note {
    max-width: 760px; margin: 40px auto 0; text-align: center;
    background: rgba(157,194,71,0.14); border: 1px solid rgba(157,194,71,0.32);
    border-radius: var(--r-md); padding: 20px 26px; color: var(--ink-2); font-size: 0.96rem;
  }
  @media (max-width: 1024px) { .pkg-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
  @media (max-width: 460px) { .pkg-incl.two { grid-template-columns: 1fr; } }

  /* ---------- Learning Journey ---------- */
  .journey { background: linear-gradient(180deg, #fff 0%, #F2F5E9 100%); }
  .journey-track { margin-top: 44px; position: relative; }
  .journey-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; position: relative; }
  .journey-line { position: absolute; top: 39px; left: 8%; right: 8%; height: 3px; background: linear-gradient(90deg, #9DC247, #5C7C1B 55%, #15170F); border-radius: 3px; z-index: 0; opacity: 0.55; }
  .jstep { position: relative; z-index: 1; text-align: center; }
  .jstep .node {
    width: 80px; height: 80px; border-radius: 23px; margin: 0 auto 16px;
    display: grid; place-items: center; box-shadow: 0 12px 26px rgba(27,40,8,0.20);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .jstep .node svg { width: 34px; height: 34px; }
  .jstep .node svg path, .jstep .node svg rect, .jstep .node svg circle { stroke: #fff; stroke-width: 2.5; }
  .jstep:nth-child(1) .node svg path, .jstep:nth-child(1) .node svg rect, .jstep:nth-child(1) .node svg circle,
  .jstep:nth-child(2) .node svg path, .jstep:nth-child(2) .node svg rect, .jstep:nth-child(2) .node svg circle { stroke: #1d2c08; }
  .jstep:hover .node { transform: translateY(-6px) scale(1.06); box-shadow: 0 18px 34px rgba(27,40,8,0.28); }
  .jstep .step-n { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; color: var(--blue); text-transform: uppercase; }
  .jstep h4 { font-size: 1.05rem; margin: 4px 0 6px; }
  .jstep p { font-size: 0.85rem; color: var(--ink-2); margin: 0; }

  /* ---------- Testimonials ---------- */
  .testimonials { background:
      radial-gradient(800px 400px at 90% 0%, rgba(61,90,18,0.10), transparent 60%),
      radial-gradient(700px 380px at 0% 100%, rgba(157,194,71,0.10), transparent 60%),
      var(--bg);
  }
  .carousel { margin-top: 50px; position: relative; }
  .carousel-viewport { overflow: hidden; border-radius: var(--r-lg); }
  .carousel-track { display: flex; transition: transform 0.6s var(--ease); }
  .tcard { min-width: 100%; padding: 4px; }
  .tcard-inner {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  }
  .quote {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 30px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 16px;
  }
  .quote .stars { gap: 3px; }
  .quote blockquote { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.65; flex: 1; }
  .quote .who { display: flex; align-items: center; gap: 13px; }
  .quote .who img { width: 50px; height: 50px; border-radius: 50%; box-shadow: var(--shadow-sm); }
  .quote .who .nm { font-weight: 700; font-family: 'Garet', 'DM Sans'; }
  .quote .who .rl { font-size: 0.85rem; color: var(--ink-3); }
  .carousel-ctrls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
  .car-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform 0.25s, box-shadow 0.25s, background 0.25s; color: var(--ink); }
  .car-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--bg); }
  .car-dots { display: flex; gap: 9px; }
  .car-dots button { width: 9px; height: 9px; border-radius: 999px; border: none; background: #C8CFB6; cursor: pointer; transition: width 0.3s, background 0.3s; }
  .car-dots button.active { width: 28px; background: var(--grad-primary); }

  /* ---------- Mentors ---------- */
  .mentor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 54px; }
  .mentor {
    position: relative; border-radius: var(--r-md); overflow: hidden;
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
  }
  .mentor:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .mentor .photo { aspect-ratio: 1/1; background: var(--grad-soft); }
  .mentor .photo img { width: 100%; height: 100%; object-fit: cover; }
  .mentor .info { padding: 20px 22px 22px; }
  .mentor .info .nm { font-family: 'Garet', 'DM Sans'; font-weight: 700; font-size: 1.12rem; }
  .mentor .info .ps { color: var(--blue); font-size: 0.88rem; font-weight: 600; }
  .mentor .info .sp { color: var(--ink-3); font-size: 0.85rem; margin-top: 4px; }
  .mentor .socials { display: flex; gap: 10px; margin-top: 14px; }
  .mentor .socials a { width: 32px; height: 32px; border-radius: 9px; background: var(--bg); display: grid; place-items: center; color: var(--ink-2); transition: background 0.2s, color 0.2s, transform 0.2s; }
  .mentor .socials a:hover { background: var(--grad-primary); color: #fff; transform: translateY(-2px); }
  .mentor .bio {
    position: absolute; inset: 0; padding: 26px; color: #fff;
    background: linear-gradient(160deg, rgba(92,124,27,0.95), rgba(61,90,18,0.96));
    display: flex; flex-direction: column; justify-content: center; gap: 10px;
    opacity: 0; transform: translateY(12px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
    pointer-events: none;
  }
  .mentor:hover .bio, .mentor:focus-within .bio { opacity: 1; transform: translateY(0); }
  .mentor .bio .nm { font-family: 'Garet', 'DM Sans'; font-weight: 700; font-size: 1.2rem; }
  .mentor .bio p { font-size: 0.92rem; line-height: 1.6; margin: 0; color: rgba(255,255,255,0.95); }

  /* ---------- Community ---------- */
  .community { background: linear-gradient(180deg, #F2F5E9 0%, #fff 100%); }
  .community-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
  .comm-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
  .comm-feature { display: flex; gap: 13px; align-items: flex-start; background: rgba(61,90,18,0.12); border: 1px solid rgba(61,90,18,0.22); border-radius: var(--r-sm); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: transform 0.25s var(--ease), background 0.3s, border-color 0.3s, box-shadow 0.3s; }
  .comm-feature:hover { transform: translateY(-3px); background: rgba(61,90,18,0.18); border-color: rgba(61,90,18,0.34); box-shadow: var(--shadow-md); }
  .comm-feature .ci { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: #fff; }
  .comm-feature .ct { font-weight: 600; font-size: 0.96rem; }
  .comm-feature .cs { font-size: 0.83rem; color: var(--ink-3); }
  .community-visual { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.8); }

  /* ---------- FAQ ---------- */
  .faq-wrap { display: grid; grid-template-columns: 0.85fr 1.25fr; gap: 48px; align-items: start; }
  .faq-head { position: sticky; top: 108px; max-width: 420px; }
  .faq-head h2 { font-size: clamp(2rem, 4vw, 3rem); }
  .faq-head p { color: var(--ink-2); font-size: 1.1rem; margin-top: 16px; }
  .faq-head p a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .faq-list { margin: 0; display: flex; flex-direction: column; gap: 14px; }
  .faq-item { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 0.3s, border-color 0.3s, transform 0.25s, background 0.35s; }
  .faq-item:hover { transform: translateY(-2px); border-color: #C8D59A; box-shadow: var(--shadow-md); }
  .faq-item.open { background: linear-gradient(135deg, #314616 0%, #151614 100%); border-color: transparent; box-shadow: var(--shadow-lg); }
  .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-family: 'Garet', 'DM Sans'; font-weight: 700; font-size: 1.1rem; color: var(--ink); transition: color 0.3s; }
  .faq-item.open .faq-q { color: #fff; }
  .faq-q:focus-visible { outline: 3px solid rgba(92,124,27,0.4); outline-offset: -3px; border-radius: var(--r-md); }
  .faq-icn { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: rgba(92,124,27,0.12); display: grid; place-items: center; color: var(--blue); transition: transform 0.3s var(--ease), background 0.3s, color 0.3s; }
  .faq-item.open .faq-icn { transform: rotate(135deg); background: rgba(255,255,255,0.18); color: #fff; }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
  .faq-a-inner { padding: 0 24px 24px; color: var(--ink-2); transition: color 0.35s; }
  .faq-item.open .faq-a-inner { color: rgba(255,255,255,0.82); }
  @media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; gap: 22px; } .faq-head { position: static; max-width: none; text-align: center; margin: 0 auto; } }

  /* ---------- Final CTA ---------- */
  .final-cta { padding: 96px 0; }
  .cta-box {
    position: relative; overflow: hidden;
    background: var(--grad-primary); border-radius: var(--r-xl);
    padding: 80px 56px; text-align: center; color: #fff;
    box-shadow: var(--shadow-lg);
  }
  .cta-box h2 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
  .cta-box p { color: rgba(255,255,255,0.92); font-size: 1.18rem; max-width: 560px; margin: 20px auto 38px; }
  .cta-box .hero-ctas { justify-content: center; }
  .cta-box .blob { filter: blur(40px); }

  /* ---------- Footer ---------- */
  footer.ft { background: var(--ink); color: #cbd2e0; padding: 72px 0 36px; }
  .ft-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.10); }
  .ft .brand { color: #fff; margin-bottom: 16px; }
  .ft-blurb { font-size: 0.94rem; color: #9aa3b8; max-width: 300px; }
  .ft-col h5 { color: #fff; font-family: 'Garet', 'DM Sans'; font-size: 1rem; margin-bottom: 18px; }
  .ft-col a { display: block; color: #9aa3b8; font-size: 0.93rem; padding: 7px 0; transition: color 0.2s, padding-left 0.2s; }
  .ft-col a:hover { color: #fff; padding-left: 4px; }
  .ft-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; gap: 20px; flex-wrap: wrap; }
  .ft-bottom small { color: #8089a0; font-size: 0.86rem; }
  .ft-social { display: flex; gap: 12px; }
  .ft-social a { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,0.07); display: grid; place-items: center; color: #cbd2e0; transition: background 0.25s, transform 0.25s, color 0.25s; }
  .ft-social a:hover { background: var(--grad-primary); color: #fff; transform: translateY(-3px); }

  /* ---------- Hero hook ---------- */
  .hero-hook {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.98rem; font-weight: 600; letter-spacing: 0.03em;
    color: #3D5A12; background: rgba(157,194,71,0.18);
    border: 1px solid rgba(92,124,27,0.28);
    padding: 10px 20px 10px 16px; border-radius: 999px; margin-bottom: 30px;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
  }
  .hero-hook:hover { transform: translateY(-2px); background: rgba(157,194,71,0.30); box-shadow: 0 10px 24px rgba(92,124,27,0.18); }
  .hero-hook:active { transform: translateY(0) scale(0.97); }
  .pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #5C7C1B; position: relative; }
  .pulse-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: rgba(92,124,27,0.45); animation: pulse 1.9s ease-out infinite; }
  @keyframes pulse { 0% { transform: scale(0.55); opacity: 0.85; } 100% { transform: scale(1.9); opacity: 0; } }

  /* ---------- Contact / enrollment ---------- */
  .contact-section { background: linear-gradient(180deg, #fff, #F2F5E9); }
  .contact-card {
    display: grid; grid-template-columns: 0.9fr 1.1fr;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
    overflow: hidden; box-shadow: var(--shadow-lg);
  }
  .contact-info { padding: 48px 44px; background: linear-gradient(160deg, #15190F, #0E120B); color: #fff; }
  .contact-info h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 14px; }
  .contact-info p { color: rgba(255,255,255,0.74); }
  .contact-info .eyebrow.teal { color: #0E120B; background: var(--teal); }
  .contact-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 13px; }
  .contact-points li { display: flex; align-items: center; gap: 11px; font-size: 0.95rem; color: rgba(255,255,255,0.92); }
  .contact-points .cp-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(157,194,71,0.20); flex-shrink: 0; }
  .contact-form { padding: 44px; }
  .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
  .field label { font-size: 0.86rem; font-weight: 600; color: var(--ink-2); }
  .field .opt { font-weight: 400; color: var(--ink-3); font-size: 0.78rem; }
  .field input, .field select, .field textarea {
    font-family: 'DM Sans', sans-serif; font-size: 0.96rem; color: var(--ink);
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; width: 100%; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .field textarea { resize: vertical; }
  .field input::placeholder, .field textarea::placeholder { color: #A7AE9C; }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(92,124,27,0.14);
  }
  .field input.invalid { border-color: #D6455D; box-shadow: 0 0 0 4px rgba(214,69,93,0.12); }
  .form-note { margin: 14px 0 0; font-size: 0.9rem; min-height: 1.1em; }
  .form-note.ok { color: var(--blue); font-weight: 600; }
  .form-note.err { color: #C0405A; }
  @media (max-width: 860px) {
    .contact-card { grid-template-columns: 1fr; }
    .contact-info, .contact-form { padding: 34px 26px; }
    .cf-row { grid-template-columns: 1fr; }
  }

  /* ---------- Extra hover / click micro-interactions ---------- */
  .btn:active { transform: translateY(0) scale(0.96); }
  .pkg-card:hover { transform: translateY(-10px) scale(1.015); }
  .pkg-card:active { transform: translateY(-6px) scale(0.995); }
  .pkg-icn { transition: transform 0.35s var(--ease); }
  .pkg-card:hover .pkg-icn { transform: scale(1.08) rotate(-4deg); }
  .feature-card:active, .comm-feature:active, .faq-item:active, .course-card:active { transform: translateY(-2px) scale(0.997); }
  .car-btn:active { transform: scale(0.92); }
  a.learn:active { transform: scale(0.97); }
  section[id], span[id] { scroll-margin-top: 100px; }

  /* ---------- Scroll reveal ---------- */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .reveal.in { opacity: 1; transform: translateY(0); }
  .reveal.d1 { transition-delay: 0.08s; }
  .reveal.d2 { transition-delay: 0.16s; }
  .reveal.d3 { transition-delay: 0.24s; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
    .badge { animation: none; }
    .pulse-dot::after { animation: none; display: none; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1024px) {
    .course-grid, .mentor-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .journey-steps { grid-template-columns: repeat(3, 1fr); gap: 28px 14px; }
    .journey-line { display: none; }
  }
  @media (max-width: 860px) {
    .section { padding: 76px 0; }
    .nav-links { display: none; }
    .nav-cta { gap: 8px; }
    .nav-cta .btn { padding: 9px 13px; font-size: 0.82rem; }
    .menu-toggle { width: 42px; height: 42px; }
    .menu-toggle { display: inline-flex; }
    .hero { padding: 140px 0 90px; }
    .hero::before { background-position: center; opacity: 0.32; }
    .hero::after { background: linear-gradient(rgba(247,248,243,0.82), rgba(247,248,243,0.9)); }
    .hero-grid, .community-grid { grid-template-columns: 1fr; gap: 48px; }
    .feature-grid { grid-template-columns: 1fr; }
    .comm-features { grid-template-columns: 1fr; }
    .ft-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  }
  @media (max-width: 540px) {
    body { font-size: 16px; }
    .wrap { padding: 0 18px; }
    .course-grid, .mentor-grid, .stats-grid, .journey-steps { grid-template-columns: 1fr; }
    .cta-box { padding: 56px 26px; }
    .hero-ctas .btn { width: 100%; }
    .ft-top { grid-template-columns: 1fr; }
    .ft-bottom { flex-direction: column; align-items: flex-start; }
  }

  /* Mobile menu panel */
  .mobile-menu { display: none; position: fixed; inset: 84px 0 0; z-index: 99; background: rgba(247,248,243,0.98); backdrop-filter: blur(16px); padding: 28px 24px; flex-direction: column; gap: 6px; }
  .mobile-menu.open { display: flex; }
  .mobile-menu a { padding: 16px 12px; font-size: 1.1rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
  .mobile-menu .btn { margin-top: 18px; }

  .nav-links a.link.active { color: var(--ink); }
  .nav-links a.link.active::after { width: 100%; }

  .step-card { position: relative; }
  .step-num { position: absolute; top: 22px; right: 26px; font-family: 'Garet','DM Sans',sans-serif; font-weight: 800; font-size: 2.2rem; color: rgba(92,124,27,0.16); line-height: 1; }

  /* ===================== OFFERS PAGE ===================== */
/* ---------- Kickstart CTA ---------- */
  .kickstart { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 78px 32px; text-align: center; }
  .ks-inner { position: relative; z-index: 2; max-width: 580px; margin: 0 auto; }
  .kickstart h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.06; }
  .kickstart p { color: var(--ink-2); font-size: 1.12rem; margin: 16px auto 34px; max-width: 480px; }
  .ks-arc { position: absolute; top: 50%; width: 440px; height: 440px; border-radius: 50%; transform: translateY(-50%); background: conic-gradient(from 130deg, var(--teal), var(--blue), var(--purple), transparent 58%); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 64%); mask: radial-gradient(closest-side, transparent 62%, #000 64%); filter: blur(7px); opacity: 0.5; z-index: 1; pointer-events: none; }
  .ks-arc-l { left: -185px; }
  .ks-arc-r { right: -185px; transform: translateY(-50%) scaleX(-1); }
  @media (max-width: 640px) { .kickstart { padding: 54px 22px; } .ks-arc { width: 300px; height: 300px; } .ks-arc-l { left: -165px; } .ks-arc-r { right: -165px; } }
/* ---------- Offers intro accent + chips ---------- */
  .hl { font-family: var(--font-accent); font-style: var(--accent-style); font-weight: 400; color: var(--blue); }
  .intro-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
  .intro-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; color: var(--ink); background: rgba(255,255,255,0.85); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
  .intro-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .intro-chip svg { flex-shrink: 0; }

  /* =====================================================================
     CLIENT REVISIONS  (colour / content — theme-aware)
     ===================================================================== */

  /* Head-font everywhere it was hard-coded, so the Studio can re-font it */
  .sfact-n, .stat .num, .pkg-name, .mentor .info .nm, .mentor .bio .nm,
  .quote .who .nm, .faq-q, .ft-col h5, .step-num, .big-statement {
    font-family: var(--font-head);
  }

  /* Pill rounding follows the Studio's corner setting */
  .btn { border-radius: var(--r-sm); }
  .btn-pill, .btn-pill-light, .btn-pill-glass, .btn-pill-outline,
  .eyebrow, .hero-hook, .intro-chip, .tag, .trust-pill, .pkg-tag { border-radius: var(--r-pill); }

  /* 1. Horizontal logo — anchored hard-LEFT, wide but a compact header */
  .nav-inner { height: 92px; justify-content: space-between !important; }
  .brand { order: -1; margin-right: 36px; }        /* logo locked to the far LEFT (can't drift to centre) */
  .brand-logo { height: 56px; width: auto; }       /* wide horizontal lockup — aspect ratio locked, no distortion */
  .hero { margin-top: -92px; }
  .ft-logo-chip img { height: 66px; }
  section[id], span[id] { scroll-margin-top: 110px; }
  .faq-head { top: 114px; }
  @media (max-width: 860px) {
    .nav-inner { height: 74px; }
    .brand-logo { height: 44px; width: auto; }
    .hero { margin-top: -74px; }
  }

  /* 2. FREE-course subtext now lives on the HERO "Enroll now" button */
  .hero-ctas .btn-enroll { flex-direction: column; gap: 2px; padding-top: 13px; padding-bottom: 13px; line-height: 1.15; }
  .btn-enroll .be-main { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
  .btn-enroll .be-sub { font-weight: 600; font-size: 0.74rem; letter-spacing: 0.02em; opacity: 0.95; }

  /* 8. "Hire a VA" — dark-green fill */
  .btn-hire { color: #fff; background: var(--purple); border: 1px solid var(--purple); box-shadow: 0 6px 16px rgba(61,90,18,0.28); }
  .btn-hire:hover { transform: translateY(-2px); filter: brightness(0.9); box-shadow: 0 12px 26px rgba(61,90,18,0.36); }

  /* 3/4/6. Solid journey-style filled icon squares */
  .feature-grid .feature-card:nth-child(1) .feature-icn { background: var(--teal); }
  .feature-grid .feature-card:nth-child(1) .feature-icn svg [stroke] { stroke: #1B2B08; }
  .feature-grid .feature-card:nth-child(2) .feature-icn { background: var(--purple); }
  .feature-grid .feature-card:nth-child(2) .feature-icn svg [stroke] { stroke: #fff; }
  .feature-grid .feature-card:nth-child(3) .feature-icn { background: #15170F; }
  .feature-grid .feature-card:nth-child(3) .feature-icn svg [stroke] { stroke: #fff; }
  .feature-icn { box-shadow: 0 8px 18px rgba(27,40,8,0.16); }

  /* FAQ "+" squares filled */
  .faq-icn { background: var(--purple); color: #fff; }
  .faq-icn svg [stroke] { stroke: #fff; }
  .faq-item.open .faq-icn { background: rgba(255,255,255,0.20); color: #fff; }

  /* 5. FAQ text bigger / blacker */
  .faq-q { font-size: 1.22rem; font-weight: 700; color: #111110; }
  .faq-head h2 { color: #111110; }

  /* 6/4. Packages — Faith & Freedom light, Family dark; icon squares filled */
  .pkg-grid .pkg-card:nth-child(1), .pkg-grid .pkg-card:nth-child(3) { background: #EAF1DA; border-color: #D7E3B4; }
  .pkg-grid .pkg-card:nth-child(1) .pkg-icn { background: var(--blue); }
  .pkg-grid .pkg-card:nth-child(1) .pkg-icn svg [stroke] { stroke: #fff; }
  .pkg-grid .pkg-card:nth-child(3) .pkg-icn { background: var(--purple); }
  .pkg-grid .pkg-card:nth-child(3) .pkg-icn svg [stroke] { stroke: #fff; }
  .pkg-card.featured .pkg-icn { background: var(--teal); }
  .pkg-card.featured .pkg-icn svg [stroke] { stroke: #1B2B08; }
  .pkg-icn { box-shadow: 0 8px 18px rgba(27,40,8,0.16); }

  /* 8/12. Readable muted text + black "Discover" button */
  .big-statement .muted { color: #3C4035; }
  .btn-discover { color: #fff !important; background: #15170F; border: 1px solid #15170F; box-shadow: 0 8px 20px rgba(0,0,0,0.22); }
  .btn-discover:hover { transform: translateY(-2px); background: #000; border-color: #000; color: #fff; }

  /* NEW: "Why choose Elevare" boxes filled dark-green -> black (like the journey) */
  #about .feature-grid .feature-card {
    color: #fff; border-color: transparent;
    box-shadow: 0 16px 40px rgba(20,30,8,0.22);
  }
  #about .feature-grid .feature-card:nth-child(1) { background: linear-gradient(160deg, #3E5A12, #2C4210); }
  #about .feature-grid .feature-card:nth-child(2) { background: linear-gradient(160deg, #26380C, #1A2708); }
  #about .feature-grid .feature-card:nth-child(3) { background: linear-gradient(160deg, #14160F, #0B0C08); }
  #about .feature-grid .feature-card h3 { color: #fff; }
  #about .feature-grid .feature-card p { color: rgba(255,255,255,0.82); }
  #about .feature-grid .feature-card::before { display: none; }
  #about .feature-grid .feature-card .feature-icn { background: rgba(255,255,255,0.14) !important; }
  #about .feature-grid .feature-card .feature-icn svg [stroke] { stroke: #fff !important; }
  #about .feature-grid .feature-card:hover { transform: translateY(-8px); box-shadow: 0 26px 60px rgba(20,30,8,0.34); }

  /* 11. Thank-you panel */
  .contact-card.is-thankyou { grid-template-columns: 1fr; }
  .thankyou-panel { padding: 64px 48px; text-align: center; background: linear-gradient(160deg, #1B2410 0%, #0E120B 100%); color: #fff; }
  .thankyou-panel .ty-badge { width: 72px; height: 72px; border-radius: var(--r-md); margin: 0 auto 24px; display: grid; place-items: center; background: var(--grad-primary); box-shadow: 0 12px 28px rgba(61,90,18,0.4); }
  .thankyou-panel h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 16px; }
  .thankyou-panel p { color: rgba(255,255,255,0.86); font-size: 1.05rem; max-width: 540px; margin: 0 auto 14px; }
  .thankyou-panel p strong { color: var(--teal); }
  .thankyou-panel .ty-small { font-size: 0.9rem; color: rgba(255,255,255,0.6); }
  .thankyou-panel .btn { margin-top: 26px; }
  @media (max-width: 860px) { .thankyou-panel { padding: 44px 26px; } }

  /* =====================================================================
     LOCKED LAYOUT MODES — corner radius + italic accent (set on <html>)
     ===================================================================== */
  html[data-radius="sharp"]  { --r-sm:4px;  --r-md:6px;  --r-lg:8px;  --r-xl:10px; --r-pill:6px; }
  html[data-radius="soft"]   { --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:16px; }
  html[data-radius="round"]  { --r-sm:16px; --r-md:22px; --r-lg:30px; --r-xl:40px; --r-pill:999px; }
  html[data-italic="off"]    { --accent-style: normal; --font-accent: var(--font-head); }


  /* =====================================================================
     MORE FILLS — stat boxes + FAQ boxes (green -> dark-green, like journey)
     ===================================================================== */
  /* Stat boxes (30 / 4-5 / 1:1 / 100%) */
  .stmt-facts .sfact { border-color: transparent; color: #fff; box-shadow: 0 12px 30px rgba(20,30,8,0.20); }
  .stmt-facts .sfact:nth-child(1) { background: linear-gradient(160deg, #6F9B1E, #4E6B16); }
  .stmt-facts .sfact:nth-child(2) { background: linear-gradient(160deg, #5C7C1B, #3D5A12); }
  .stmt-facts .sfact:nth-child(3) { background: linear-gradient(160deg, #3D5A12, #2C4210); }
  .stmt-facts .sfact:nth-child(4) { background: linear-gradient(160deg, #26380C, #14160F); }
  .stmt-facts .sfact-n { background-image: none; -webkit-text-fill-color: #fff; color: #fff; }
  .stmt-facts .sfact-l { color: rgba(255,255,255,0.82); }
  .stmt-facts .sfact:hover { box-shadow: 0 18px 40px rgba(20,30,8,0.30); }

  /* FAQ boxes — filled when closed; darkest when open */
  .faq-item { border-color: transparent; box-shadow: 0 10px 26px rgba(20,30,8,0.16); }
  .faq-item:nth-child(1) { background: linear-gradient(160deg, #6F9B1E, #5C7C1B); }
  .faq-item:nth-child(2) { background: linear-gradient(160deg, #5C7C1B, #4A6416); }
  .faq-item:nth-child(3) { background: linear-gradient(160deg, #4A6416, #3D5A12); }
  .faq-item:nth-child(4) { background: linear-gradient(160deg, #3D5A12, #2E4A0E); }
  .faq-item:nth-child(5) { background: linear-gradient(160deg, #2E4A0E, #1F3309); }
  .faq-item:hover { border-color: transparent; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(20,30,8,0.26); }
  .faq-q { color: #fff; }
  .faq-icn { background: rgba(255,255,255,0.18); color: #fff; }
  .faq-icn svg [stroke] { stroke: #fff; }
  .faq-item.open { background: linear-gradient(135deg, #1C2A0C 0%, #0E120B 100%); }  /* darkest on open */

  /* =====================================================================
     HIRE PAGE — "Top Skills at Elevare" (3 layouts, switchable in Studio)
     ===================================================================== */
  .skills-sec { padding-top: 24px; }
  .sk-variant { display: none; }
  html:not([data-skills]) .sk-cols,
  html[data-skills="1"] .sk-cols { display: grid; }
  html[data-skills="2"] .sk-tags { display: flex; }
  html[data-skills="3"] .sk-cards { display: grid; }

  /* Layout 1 — Columns */
  .sk-cols { grid-template-columns: repeat(4, 1fr); gap: 36px 28px; max-width: 1040px; margin: 8px auto 0; }
  .sk-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
  .sk-cols a { color: var(--blue); text-decoration: none; font-size: 1.06rem; transition: color .15s; }
  .sk-cols a:hover { color: var(--purple); text-decoration: underline; }
  @media (max-width: 900px) { .sk-cols { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .sk-cols { grid-template-columns: 1fr; text-align: center; } }

  /* Layout 2 — Tags */
  .sk-tags { flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 920px; margin: 8px auto 0; }
  .sk-tags a { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: 0.98rem; text-decoration: none; transition: transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s; }
  .sk-tags a:hover { background: var(--grad-primary); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: var(--shadow-md); }

  /* Layout 3 — Cards */
  .sk-cards { grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1000px; margin: 8px auto 0; }
  .sk-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); }
  .sk-cat { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
  .sk-ic { width: 46px; height: 46px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; color: #fff; }
  .sk-card:nth-child(1) .sk-ic { background: var(--teal); color: #1B2B08; }
  .sk-card:nth-child(2) .sk-ic { background: var(--purple); }
  .sk-card:nth-child(3) .sk-ic { background: #15170F; }
  .sk-card:nth-child(4) .sk-ic { background: var(--blue); }
  .sk-cat h3 { margin: 0; font-size: 1.2rem; }
  .sk-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .sk-card li { color: var(--ink-2); font-size: 1rem; display: flex; align-items: center; gap: 10px; }
  .sk-card li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
  @media (max-width: 760px) { .sk-cards { grid-template-columns: 1fr; } }

  /* Hire CTA band */
  .hire-cta { max-width: 820px; margin: 8px auto 0; text-align: center; background: linear-gradient(160deg, #2C4210, #14160F); color: #fff; border-radius: var(--r-xl); padding: 48px 40px; box-shadow: 0 20px 50px rgba(20,30,8,0.25); }
  .hire-cta h3 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 12px; }
  .hire-cta p { color: rgba(255,255,255,0.82); max-width: 520px; margin: 0 auto 24px; }
  @media (max-width: 600px) { .hire-cta { padding: 36px 24px; } }

  /* =====================================================================
     HOME PAGE — Hero style variants (switchable in Design Studio)
     data-home: 1 = Classic (default) · 2 = Bento · 3 = Panel
     ===================================================================== */
  .hero-show { display: none; }
  .hs-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; text-align: left; box-shadow: var(--shadow-sm); }
  .hs-stars { color: #E8B931; letter-spacing: 2px; font-size: 0.92rem; line-height: 1; }
  .hs-k { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; color: var(--ink); }
  .hs-l { font-size: 0.9rem; color: var(--ink-2); margin-top: 5px; line-height: 1.4; }
  .hs-accent { background: var(--grad-primary); border-color: transparent; }
  .hs-accent .hs-k, .hs-accent .hs-l { color: #15170F; }

  /* ---------- Layout 2 — Bento (bold, two-column) ---------- */
  html[data-home="2"] .hero { text-align: left; padding: 150px 0 110px; }
  html[data-home="2"] .hero::before { opacity: 0.30; }
  html[data-home="2"] .hero::after { background: radial-gradient(760px 460px at 102% -6%, rgba(157,194,71,0.22), transparent 60%), radial-gradient(620px 420px at -8% 30%, rgba(61,90,18,0.10), transparent 60%); }
  html[data-home="2"] .hero-inner { max-width: 1180px; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 54px; align-items: center; }
  html[data-home="2"] .hero-title { font-size: clamp(2.6rem, 5.4vw, 4.7rem); }
  html[data-home="2"] .hero-sub { margin-left: 0; margin-right: 0; }
  html[data-home="2"] .hero-ctas { justify-content: flex-start; }
  html[data-home="2"] .scroll-cue { display: none; }
  html[data-home="2"] .hero-show { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  html[data-home="2"] .hs-card { padding: 24px 24px; }
  html[data-home="2"] .hs-card:nth-child(1) { transform: translateY(-14px); }
  html[data-home="2"] .hs-card:nth-child(4) { transform: translateY(-14px); }
  @media (max-width: 880px) {
    html[data-home="2"] .hero { text-align: center; }
    html[data-home="2"] .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    html[data-home="2"] .hero-ctas { justify-content: center; }
    html[data-home="2"] .hs-card { text-align: left; }
    html[data-home="2"] .hs-card:nth-child(n) { transform: none; }
  }

  /* ---------- Layout 3 — Panel (centered gradient card + floating cards) ---------- */
  html[data-home="3"] .hero { margin-top: 0; padding: 116px 0 120px; }
  html[data-home="3"] .hero::before { opacity: 0.42; }
  html[data-home="3"] .hero::after { background: radial-gradient(1000px 520px at 50% -8%, rgba(157,194,71,0.16), transparent 62%); }
  html[data-home="3"] .hero-inner {
    max-width: 1080px; background: linear-gradient(158deg, rgba(45,64,17,0.88) 0%, rgba(30,45,11,0.92) 60%, rgba(20,30,8,0.94) 100%);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; border-radius: var(--r-xl); padding: 76px 56px 56px; box-shadow: 0 34px 80px rgba(20,30,8,0.34); border: 1px solid rgba(255,255,255,0.10);
  }
  html[data-home="3"] .hero-title { color: #fff; }
  html[data-home="3"] .hero-title em { color: #B7E25A; }
  html[data-home="3"] .hero-sub { color: rgba(255,255,255,0.84); }
  html[data-home="3"] .hero-hook { background: rgba(255,255,255,0.14); color: #EAF1DA; }
  html[data-home="3"] .hero-hook:hover { background: rgba(255,255,255,0.22); }
  html[data-home="3"] .scroll-cue { display: none; }
  html[data-home="3"] .hero-show { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 52px; transform: translateY(40px); }
  html[data-home="3"] .hs-card { flex: 1 1 180px; max-width: 230px; background: #fff; box-shadow: 0 22px 46px rgba(15,20,6,0.22); }
  html[data-home="3"] .hs-accent { background: #fff; }
  html[data-home="3"] .hs-accent .hs-k { color: var(--blue); }
  html[data-home="3"] .hs-accent .hs-l { color: var(--ink-2); }
  @media (max-width: 600px) {
    html[data-home="3"] .hero-inner { padding: 56px 26px 44px; }
    html[data-home="3"] .hero-show { transform: translateY(28px); }
    html[data-home="3"] .hs-card { flex: 1 1 140px; }
  }

  /* Panel hero — button contrast on the dark green panel */
  html[data-home="3"] .hero .btn-primary { background: #B7E25A; color: #15170F; box-shadow: 0 16px 32px rgba(0,0,0,0.28); }
  html[data-home="3"] .hero .btn-primary svg path { stroke: #15170F !important; }
  html[data-home="3"] .hero .btn-enroll .be-sub { color: rgba(21,23,15,0.72); }
  html[data-home="3"] .hero .btn-pill-outline { border-color: rgba(255,255,255,0.55); color: #fff; }
  html[data-home="3"] .hero .btn-pill-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); }

  /* =====================================================================
     HOME PAGE — whole-page theme overrides (all sections)
     ===================================================================== */

  /* ---------------- BENTO (data-home="2") : bold, structured, bento grids ---------------- */
  /* Section headings: bold, left-aligned, tighter */
  html[data-home="2"] .section-head.center { text-align: left; margin-left: 0; margin-right: 0; max-width: 760px; }
  html[data-home="2"] .section-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -0.03em; }

  /* Statement: larger, staggered stat cards (bento feel) */
  html[data-home="2"] .stmt-facts { max-width: 960px; gap: 16px; }
  html[data-home="2"] .sfact { border-radius: var(--r-lg); padding: 28px 20px; }
  html[data-home="2"] .sfact-n { font-size: 2.3rem; }
  html[data-home="2"] .sfact:nth-child(2), html[data-home="2"] .sfact:nth-child(3) { transform: translateY(-14px); }

  /* About: asymmetric bento — first card tall, others stacked */
  html[data-home="2"] .feature-grid { grid-template-columns: 1.25fr 1fr; grid-auto-rows: 1fr; gap: 18px; }
  html[data-home="2"] #about .feature-card:nth-child(1) { grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; }
  html[data-home="2"] #about .feature-card:nth-child(1) h3 { font-size: 1.7rem; }

  /* Community: two-up bento feature tiles, stronger */
  html[data-home="2"] .comm-features { gap: 14px; }
  html[data-home="2"] .comm-feature { border-radius: var(--r-md); padding: 18px 20px; }

  /* FAQ: a touch bolder questions */
  html[data-home="2"] .faq-q { font-size: 1.16rem; }

  @media (max-width: 880px) {
    html[data-home="2"] .section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
    html[data-home="2"] .feature-grid { grid-template-columns: 1fr; }
    html[data-home="2"] #about .feature-card:nth-child(1) { grid-row: auto; }
    html[data-home="2"] .sfact:nth-child(n) { transform: none; }
  }

  /* ---------------- PANEL (data-home="3") : soft, rounded, airy, contained ---------------- */
  /* Airy spacing + centered heads */
  html[data-home="3"] .section { padding: 100px 0; }
  html[data-home="3"] .section-head.center { text-align: center; margin: 0 auto; }

  /* Soft tinted sections with the content held in a rounded white panel */
  html[data-home="3"] #about { background: linear-gradient(180deg, #F3F6EA 0%, #FBFCF8 100%); }
  html[data-home="3"] #about > .wrap,
  html[data-home="3"] .journey > .wrap,
  html[data-home="3"] #faq > .wrap {
    background: #fff; border: 1px solid var(--line); border-radius: 32px;
    padding: 64px 52px; box-shadow: 0 30px 70px rgba(20,30,8,0.08);
  }
  html[data-home="3"] .journey { background: linear-gradient(180deg, #EEF3E1 0%, #F8FBF1 100%); }

  /* Softer, rounder cards everywhere */
  html[data-home="3"] .sfact { border-radius: 22px; padding: 24px 18px; }
  html[data-home="3"] .feature-card { border-radius: 26px; padding: 40px 34px; box-shadow: 0 18px 44px rgba(20,30,8,0.10); }
  html[data-home="3"] .faq-item { border-radius: 20px; }
  html[data-home="3"] .comm-feature { border-radius: 18px; }
  html[data-home="3"] .community-visual { border-radius: 30px; }

  @media (max-width: 600px) {
    html[data-home="3"] #about > .wrap,
    html[data-home="3"] .journey > .wrap,
    html[data-home="3"] #faq > .wrap { padding: 40px 22px; border-radius: 24px; }
  }

  /* =====================================================================
     OFFERS PAGE — Packages layout (switchable in Design Studio)
     data-pkg: 1 = Cards (default) · 2 = Rows · 3 = Spotlight
     ===================================================================== */
  /* Layout 2 — Rows (wide horizontal cards: details left, includes right) */
  html[data-pkg="2"] .pkg-grid { grid-template-columns: 1fr; max-width: 920px; margin-left: auto; margin-right: auto; gap: 18px; }
  html[data-pkg="2"] .pkg-card { display: grid; grid-template-columns: 270px 1fr; column-gap: 38px; row-gap: 6px; text-align: left; align-items: start; padding: 30px 34px; }
  html[data-pkg="2"] .pkg-card > * { grid-column: 1; }
  html[data-pkg="2"] .pkg-card > .pkg-incl { grid-column: 2; grid-row: 1 / span 24; align-self: center; margin: 0; min-width: 0; }
  html[data-pkg="2"] .pkg-incl { grid-template-columns: 1fr 1fr; gap: 11px 18px; }
  html[data-pkg="2"] .pkg-incl.two { grid-template-columns: 1fr 1fr 1fr; }
  @media (max-width: 920px) {
    html[data-pkg="2"] .pkg-card { grid-template-columns: 1fr; }
    html[data-pkg="2"] .pkg-card > .pkg-incl { grid-column: 1; grid-row: auto; align-self: start; }
    html[data-pkg="2"] .pkg-incl, html[data-pkg="2"] .pkg-incl.two { grid-template-columns: 1fr; }
  }

  /* Layout 3 — Spotlight (featured tier strongly emphasized, sides recede) */
  html[data-pkg="3"] .pkg-grid { grid-template-columns: 0.9fr 1.24fr 0.9fr; align-items: center; gap: 14px; }
  html[data-pkg="3"] .pkg-card.featured { transform: scale(1.09) translateY(-8px); box-shadow: 0 34px 74px rgba(20,30,8,0.38); z-index: 2; }
  html[data-pkg="3"] .pkg-card:not(.featured) { transform: scale(0.9); opacity: 0.9; }
  html[data-pkg="3"] .pkg-card:not(.featured):hover { opacity: 1; transform: scale(0.93) translateY(-4px); }
  @media (max-width: 1024px) {
    html[data-pkg="3"] .pkg-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
    html[data-pkg="3"] .pkg-card, html[data-pkg="3"] .pkg-card.featured, html[data-pkg="3"] .pkg-card:not(.featured) { transform: none; opacity: 1; }
  }

  /* =====================================================================
     CONTACT PAGE — Form layout (switchable in Design Studio)
     data-form: 1 = Split (default) · 2 = Stacked · 3 = Reversed
     ===================================================================== */
  /* Layout 2 — Stacked (info on top, form below) */
  html[data-form="2"] .contact-card { grid-template-columns: 1fr; max-width: 720px; margin-left: auto; margin-right: auto; }
  /* Layout 3 — Open (no card box: centered intro + standalone form card) */
  html[data-form="3"] .contact-card { display: block; background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; max-width: 700px; margin: 0 auto; }
  html[data-form="3"] .contact-info { background: transparent; color: var(--ink); padding: 0 0 6px; text-align: center; }
  html[data-form="3"] .contact-info h2 { color: var(--ink); }
  html[data-form="3"] .contact-info p { color: var(--ink-2); max-width: 540px; margin: 0 auto; }
  html[data-form="3"] .contact-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
  html[data-form="3"] .contact-points li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 15px; font-size: 0.85rem; color: var(--ink-2); }
  html[data-form="3"] .contact-points .cp-ic { background: rgba(92,124,27,0.16); }
  html[data-form="3"] .contact-points .cp-ic svg path { stroke: #5C7C1B !important; }
  html[data-form="3"] .contact-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 38px; margin-top: 24px; }
  @media (max-width: 600px) { html[data-form="3"] .contact-form { padding: 28px 22px; } }

  /* =====================================================================
     EXTRA LAYOUT OPTIONS (4th choice per page)
     ===================================================================== */

  /* ---------------- HOME · EDITORIAL (data-home="4") : magazine / serif, flat hairlines ---------------- */
  html[data-home="4"] .hero { text-align: left; }
  html[data-home="4"] .hero-inner { max-width: 1040px; }
  html[data-home="4"] .hero-title { font-family: var(--font-accent); font-weight: 500; letter-spacing: -0.01em; }
  html[data-home="4"] .hero-sub { margin-left: 0; }
  html[data-home="4"] .hero-ctas { justify-content: flex-start; }
  html[data-home="4"] .hero-show { display: none; }
  html[data-home="4"] .scroll-cue { display: none; }
  html[data-home="4"] .section-head.center { text-align: left; margin-left: 0; margin-right: 0; max-width: 820px; padding-top: 26px; border-top: 1px solid var(--line); }
  html[data-home="4"] .section-head h2 { font-family: var(--font-accent); font-weight: 500; font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
  html[data-home="4"] .statement { text-align: left; }
  html[data-home="4"] .big-statement { margin-left: 0; max-width: 940px; font-family: var(--font-accent); font-weight: 500; }
  /* Stat facts -> flat row with hairline dividers + serif numerals */
  html[data-home="4"] .stmt-facts { max-width: 100%; gap: 0; margin-top: 40px; border-top: 1px solid var(--line); }
  html[data-home="4"] .stmt-facts .sfact { background: none !important; border: none; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none !important; padding: 26px 22px; text-align: left; }
  html[data-home="4"] .stmt-facts .sfact:last-child { border-right: none; }
  html[data-home="4"] .stmt-facts .sfact-n { background: none !important; -webkit-text-fill-color: var(--blue) !important; color: var(--blue) !important; font-family: var(--font-accent); font-size: 2.7rem; }
  html[data-home="4"] .stmt-facts .sfact-l { color: var(--ink-2) !important; }
  /* About feature cards -> flat, numbered, hairline-separated */
  html[data-home="4"] .feature-grid { gap: 0; margin-top: 36px; counter-reset: feat; }
  html[data-home="4"] #about .feature-grid .feature-card { background: none !important; border: none; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none !important; padding: 36px 30px 36px 0; }
  html[data-home="4"] #about .feature-grid .feature-card h3 { color: var(--ink) !important; font-family: var(--font-accent); font-weight: 500; }
  html[data-home="4"] #about .feature-grid .feature-card p { color: var(--ink-2) !important; }
  html[data-home="4"] #about .feature-grid .feature-card::after { counter-increment: feat; content: '0' counter(feat); position: absolute; top: 30px; right: 6px; font-family: var(--font-accent); font-size: 1.5rem; color: var(--ink-3); }
  html[data-home="4"] #about .feature-grid .feature-card .feature-icn { background: rgba(92,124,27,0.10) !important; }
  html[data-home="4"] #about .feature-grid .feature-card .feature-icn svg [stroke] { stroke: var(--blue) !important; }
  /* FAQ -> flat list with bottom hairlines */
  html[data-home="4"] .faq-list { gap: 0; }
  html[data-home="4"] .faq-item { background: none !important; border: none; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none !important; }
  html[data-home="4"] .faq-item.open { background: none !important; }
  html[data-home="4"] .faq-q { font-family: var(--font-accent); font-weight: 500; color: var(--ink) !important; }
  html[data-home="4"] .faq-item.open .faq-q { color: var(--blue) !important; }
  html[data-home="4"] .faq-icn { background: rgba(92,124,27,0.12) !important; color: var(--blue) !important; }
  html[data-home="4"] .faq-icn svg [stroke] { stroke: var(--blue) !important; }
  html[data-home="4"] .faq-item.open .faq-icn { background: rgba(92,124,27,0.18) !important; color: var(--blue) !important; }
  html[data-home="4"] .faq-a-inner, html[data-home="4"] .faq-item.open .faq-a-inner { color: var(--ink-2) !important; }
  @media (max-width: 880px) {
    html[data-home="4"] .hero { text-align: center; }
    html[data-home="4"] .hero-ctas { justify-content: center; }
    html[data-home="4"] .section-head.center { text-align: center; }
    html[data-home="4"] .stmt-facts .sfact { border-right: none; border-bottom: 1px solid var(--line); text-align: center; }
  }

  /* ---------------- OFFERS · ZIGZAG (data-pkg="4") : alternating rows ---------------- */
  html[data-pkg="4"] .pkg-grid { grid-template-columns: 1fr; max-width: 920px; margin-left: auto; margin-right: auto; gap: 18px; }
  html[data-pkg="4"] .pkg-card { display: grid; grid-template-columns: 270px 1fr; column-gap: 38px; row-gap: 6px; text-align: left; align-items: start; padding: 30px 34px; }
  html[data-pkg="4"] .pkg-card > * { grid-column: 1; }
  html[data-pkg="4"] .pkg-card > .pkg-incl { grid-column: 2; grid-row: 1 / span 24; align-self: center; margin: 0; min-width: 0; }
  html[data-pkg="4"] .pkg-card:nth-child(even) { grid-template-columns: 1fr 270px; }
  html[data-pkg="4"] .pkg-card:nth-child(even) > * { grid-column: 2; }
  html[data-pkg="4"] .pkg-card:nth-child(even) > .pkg-incl { grid-column: 1; }
  html[data-pkg="4"] .pkg-incl { grid-template-columns: 1fr 1fr; gap: 11px 18px; }
  html[data-pkg="4"] .pkg-incl.two { grid-template-columns: 1fr 1fr 1fr; }
  @media (max-width: 920px) {
    html[data-pkg="4"] .pkg-card, html[data-pkg="4"] .pkg-card:nth-child(even) { grid-template-columns: 1fr; }
    html[data-pkg="4"] .pkg-card > *, html[data-pkg="4"] .pkg-card:nth-child(even) > * { grid-column: 1; }
    html[data-pkg="4"] .pkg-card > .pkg-incl, html[data-pkg="4"] .pkg-card:nth-child(even) > .pkg-incl { grid-column: 1; grid-row: auto; align-self: start; }
    html[data-pkg="4"] .pkg-incl, html[data-pkg="4"] .pkg-incl.two { grid-template-columns: 1fr; }
  }

  /* ---------------- CONTACT · SIDEBAR (data-form="4") : wide form + slim sticky info ---------------- */
  html[data-form="4"] .contact-card { display: grid; grid-template-columns: 1.5fr 0.8fr; gap: 24px; background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
  html[data-form="4"] .contact-form { order: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 40px; }
  html[data-form="4"] .contact-info { order: 2; background: linear-gradient(160deg, #15190F, #0E120B); color: #fff; border-radius: var(--r-xl); padding: 34px 30px; align-self: start; position: sticky; top: 108px; }
  html[data-form="4"] .contact-info h2 { font-size: 1.5rem; }
  @media (max-width: 860px) {
    html[data-form="4"] .contact-card { grid-template-columns: 1fr; }
    html[data-form="4"] .contact-info { position: static; order: 2; }
    html[data-form="4"] .contact-form { order: 1; }
  }

  /* ---------------- HIRE · GRID (data-skills="4") : uniform skill tiles ---------------- */
  html[data-skills="4"] .sk-tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 1000px; margin: 8px auto 0; }
  html[data-skills="4"] .sk-tags a { justify-content: flex-start; border-radius: var(--r-md); padding: 16px 18px; font-weight: 600; }
  html[data-skills="4"] .sk-tags a::before { content: '\2713'; color: var(--blue); font-weight: 800; margin-right: 10px; }
  html[data-skills="4"] .sk-tags a:hover::before { color: #fff; }
  @media (max-width: 860px) { html[data-skills="4"] .sk-tags { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { html[data-skills="4"] .sk-tags { grid-template-columns: 1fr; } }

  /* =====================================================================
     MORE LAYOUT OPTIONS (5th choice per page) — each distinct
     ===================================================================== */

  /* ---------------- OFFERS · LIST (data-pkg="5") : flat editorial rows, inline includes ---------------- */
  html[data-pkg="5"] .pkg-grid { display: block; max-width: 880px; margin: 36px auto 0; }
  html[data-pkg="5"] .pkg-card { background: none !important; border: none !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; padding: 30px 0; display: grid; grid-template-columns: 1fr auto; column-gap: 28px; row-gap: 10px; align-items: start; text-align: left; }
  html[data-pkg="5"] .pkg-card:last-child { border-bottom: 1px solid var(--line) !important; }
  html[data-pkg="5"] .pkg-card > * { grid-column: 1; }
  html[data-pkg="5"] .pkg-card .pkg-icn { display: none; }
  html[data-pkg="5"] .pkg-card .pkg-tag { justify-self: start; }
  html[data-pkg="5"] .pkg-card .pkg-name { font-size: 1.5rem; color: var(--ink) !important; }
  html[data-pkg="5"] .pkg-card .pkg-desc { color: var(--ink-2) !important; }
  html[data-pkg="5"] .pkg-card .pkg-incl { display: flex !important; flex-wrap: wrap; gap: 4px 6px; grid-template-columns: none !important; margin: 0; }
  html[data-pkg="5"] .pkg-card .pkg-incl li { font-size: 0.86rem; color: var(--ink-2) !important; }
  html[data-pkg="5"] .pkg-card .pkg-incl li svg { display: none; }
  html[data-pkg="5"] .pkg-card .pkg-incl li::after { content: '\00B7'; margin-left: 8px; color: var(--ink-3); }
  html[data-pkg="5"] .pkg-card .pkg-incl li:last-child::after { content: ''; }
  html[data-pkg="5"] .pkg-card .pkg-meta { grid-column: 2; grid-row: 1; color: var(--ink-3) !important; border: none !important; padding: 0 !important; white-space: nowrap; }
  html[data-pkg="5"] .pkg-card .btn { grid-column: 2; grid-row: 2; width: auto; align-self: end; justify-self: end; margin: 0; }
  html[data-pkg="5"] .pkg-card.featured .pkg-name, html[data-pkg="5"] .pkg-card.featured .pkg-desc, html[data-pkg="5"] .pkg-card.featured .pkg-incl li { color: var(--ink) !important; }
  @media (max-width: 640px) {
    html[data-pkg="5"] .pkg-card { grid-template-columns: 1fr; }
    html[data-pkg="5"] .pkg-card .pkg-meta, html[data-pkg="5"] .pkg-card .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  }

  /* ---------------- CONTACT · CENTERED (data-form="5") : single focused card ---------------- */
  html[data-form="5"] .contact-card { display: block; max-width: 560px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
  html[data-form="5"] .contact-info { background: none; color: var(--ink); padding: 38px 38px 0; text-align: center; }
  html[data-form="5"] .contact-info h2 { color: var(--ink); }
  html[data-form="5"] .contact-info p { color: var(--ink-2); }
  html[data-form="5"] .contact-info .contact-points { display: none; }
  html[data-form="5"] .contact-info .eyebrow.teal { color: #0E120B; background: var(--teal); }
  html[data-form="5"] .contact-form { padding: 24px 38px 38px; }

  /* ---------------- HIRE · FLOW (data-skills="5") : large editorial run-in list ---------------- */
  html[data-skills="5"] .sk-tags { display: block; max-width: 880px; margin: 14px auto 0; text-align: center; line-height: 2.1; }
  html[data-skills="5"] .sk-tags a { display: inline; background: none; border: none; padding: 0; color: var(--ink); font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 600; transition: color .15s; }
  html[data-skills="5"] .sk-tags a:hover { background: none; color: var(--blue); transform: none; box-shadow: none; }
  html[data-skills="5"] .sk-tags a::after { content: '\00B7'; color: var(--ink-3); margin: 0 6px 0 10px; font-weight: 400; }
  html[data-skills="5"] .sk-tags a:last-child::after { content: ''; }

  /* =====================================================================
     EXTRA LAYOUTS — 2 more per page (each visually distinct)
     ===================================================================== */

  /* ============ HOME · SPLIT (data-home="5") : two-column + stacked rows ============ */
  html[data-home="5"] .hero { text-align: left; }
  html[data-home="5"] .hero-inner { max-width: 1180px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 54px; align-items: center; }
  html[data-home="5"] .hero-ctas { justify-content: flex-start; }
  html[data-home="5"] .scroll-cue { display: none; }
  html[data-home="5"] .hero-show { display: flex; flex-direction: column; gap: 14px; }
  html[data-home="5"] .hs-accent { order: -1; }
  html[data-home="5"] .section-head.center { text-align: left; margin-left: 0; margin-right: 0; }
  html[data-home="5"] .feature-grid { grid-template-columns: 1fr; gap: 16px; }
  html[data-home="5"] #about .feature-grid .feature-card { display: grid; grid-template-columns: 64px 1fr; column-gap: 24px; align-items: center; }
  html[data-home="5"] #about .feature-grid .feature-card .feature-icn { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; align-self: center; }
  html[data-home="5"] #about .feature-grid .feature-card h3 { grid-column: 2; }
  html[data-home="5"] #about .feature-grid .feature-card p { grid-column: 2; }
  html[data-home="5"] .faq-wrap { grid-template-columns: 1fr; gap: 26px; }
  html[data-home="5"] .faq-head { position: static; max-width: none; }
  @media (max-width: 880px) {
    html[data-home="5"] .hero-inner { grid-template-columns: 1fr; }
    html[data-home="5"] .hero, html[data-home="5"] .section-head.center { text-align: center; }
    html[data-home="5"] .hero-ctas { justify-content: center; }
  }

  /* ============ HOME · BOLD (data-home="6") : brutalist, sharp + hard shadows ============ */
  html[data-home="6"] .hero-title, html[data-home="6"] .section-head h2 { text-transform: uppercase; letter-spacing: -0.01em; }
  html[data-home="6"] #about .feature-grid .feature-card { background: var(--card) !important; color: var(--ink) !important; border: 2px solid #15170F; border-radius: 0; box-shadow: 6px 6px 0 #15170F; }
  html[data-home="6"] #about .feature-grid .feature-card h3 { color: var(--ink) !important; }
  html[data-home="6"] #about .feature-grid .feature-card p { color: var(--ink-2) !important; }
  html[data-home="6"] #about .feature-grid .feature-card .feature-icn { background: var(--blue) !important; border-radius: 0; }
  html[data-home="6"] #about .feature-grid .feature-card .feature-icn svg [stroke] { stroke: #fff !important; }
  html[data-home="6"] .stmt-facts .sfact { background: var(--card) !important; border: 2px solid #15170F !important; border-radius: 0 !important; box-shadow: 4px 4px 0 #15170F; }
  html[data-home="6"] .stmt-facts .sfact-n { -webkit-text-fill-color: var(--blue) !important; background: none !important; color: var(--blue) !important; }
  html[data-home="6"] .stmt-facts .sfact-l { color: var(--ink-2) !important; }
  html[data-home="6"] .faq-item { background: var(--card) !important; border: 2px solid #15170F !important; border-radius: 0 !important; box-shadow: 4px 4px 0 #15170F; }
  html[data-home="6"] .faq-q { color: var(--ink) !important; }
  html[data-home="6"] .faq-item.open .faq-q { color: var(--blue) !important; }
  html[data-home="6"] .faq-icn { background: var(--blue) !important; color: #fff !important; border-radius: 0; }
  html[data-home="6"] .faq-icn svg [stroke] { stroke: #fff !important; }
  html[data-home="6"] .faq-a-inner, html[data-home="6"] .faq-item.open .faq-a-inner { color: var(--ink-2) !important; }
  html[data-home="6"] .btn-primary, html[data-home="6"] .btn-pill, html[data-home="6"] .btn-pill-outline, html[data-home="6"] .btn-discover { border-radius: 0 !important; }

  /* ============ OFFERS · OUTLINE (data-pkg="6") : minimal outlined cards ============ */
  html[data-pkg="6"] .pkg-card { background: none !important; border: 1.5px solid var(--line) !important; box-shadow: none !important; }
  html[data-pkg="6"] .pkg-card .pkg-name { color: var(--ink) !important; }
  html[data-pkg="6"] .pkg-card .pkg-desc { color: var(--ink-2) !important; }
  html[data-pkg="6"] .pkg-card .pkg-incl li { color: var(--ink) !important; }
  html[data-pkg="6"] .pkg-card .pkg-meta { color: var(--ink-3) !important; }
  html[data-pkg="6"] .pkg-incl li svg [stroke] { stroke: var(--blue) !important; }
  html[data-pkg="6"] .pkg-card.featured { border-color: var(--blue) !important; box-shadow: inset 0 0 0 1.5px var(--blue) !important; }

  /* ============ OFFERS · SHOWCASE (data-pkg="7") : 1 featured banner + 2 below ============ */
  html[data-pkg="7"] .pkg-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  html[data-pkg="7"] .pkg-card.featured { grid-column: 1 / -1; grid-row: 1; }
  html[data-pkg="7"] .pkg-card:not(.featured) { grid-row: 2; }
  html[data-pkg="7"] .pkg-card.featured .pkg-incl.two { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 760px) { html[data-pkg="7"] .pkg-grid { grid-template-columns: 1fr; } html[data-pkg="7"] .pkg-card.featured, html[data-pkg="7"] .pkg-card:not(.featured) { grid-row: auto; } html[data-pkg="7"] .pkg-card.featured .pkg-incl.two { grid-template-columns: 1fr 1fr; } }

  /* ============ CONTACT · HERO (data-form="6") : band header + floating form ============ */
  html[data-form="6"] .contact-card { display: block; background: none; border: none; box-shadow: none; overflow: visible; max-width: 760px; margin: 0 auto; }
  html[data-form="6"] .contact-info { background: linear-gradient(160deg, #3E5A12, #1C2A0C); color: #fff; border-radius: var(--r-xl); padding: 46px 40px 56px; text-align: center; }
  html[data-form="6"] .contact-info h2 { color: #fff; }
  html[data-form="6"] .contact-info p { color: rgba(255,255,255,0.86); margin-left: auto; margin-right: auto; }
  html[data-form="6"] .contact-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
  html[data-form="6"] .contact-points li { color: rgba(255,255,255,0.92); }
  html[data-form="6"] .contact-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 36px; margin: -32px 24px 0; position: relative; z-index: 2; }

  /* ============ CONTACT · DARK (data-form="7") : full dark card ============ */
  html[data-form="7"] .contact-card { background: linear-gradient(160deg, #15190F, #0B0E08) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
  html[data-form="7"] .contact-info { background: none; }
  html[data-form="7"] .contact-form { color: #EAF0E0; }
  html[data-form="7"] .contact-form .field label { color: rgba(255,255,255,0.82); }
  html[data-form="7"] .contact-form .field .opt { color: rgba(255,255,255,0.45); }
  html[data-form="7"] .contact-form .field input, html[data-form="7"] .contact-form .field select, html[data-form="7"] .contact-form .field textarea { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: #fff; }
  html[data-form="7"] .contact-form .field input::placeholder, html[data-form="7"] .contact-form .field textarea::placeholder { color: rgba(255,255,255,0.40); }

  /* ============ HIRE · BANDS (data-skills="6") : category bands ============ */
  html[data-skills="6"] .sk-cards { display: block; max-width: 1000px; margin: 8px auto 0; }
  html[data-skills="6"] .sk-card { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; background: none; border: none; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 26px 0; }
  html[data-skills="6"] .sk-card:last-child { border-bottom: 1px solid var(--line); }
  html[data-skills="6"] .sk-cat { margin-bottom: 0; }
  html[data-skills="6"] .sk-card ul { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px 10px; }
  html[data-skills="6"] .sk-card li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; font-size: 0.85rem; }
  html[data-skills="6"] .sk-card li::before { display: none; }
  @media (max-width: 640px) { html[data-skills="6"] .sk-card { grid-template-columns: 1fr; gap: 12px; } }

  /* ============ HIRE · INDEX (data-skills="7") : 2-column bordered index ============ */
  html[data-skills="7"] .sk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; max-width: 880px; margin: 12px auto 0; }
  html[data-skills="7"] .sk-cols ul { gap: 0; }
  html[data-skills="7"] .sk-cols li { border-bottom: 1px solid var(--line); }
  html[data-skills="7"] .sk-cols a { display: block; padding: 14px 4px; font-size: 1.04rem; }
  @media (max-width: 560px) { html[data-skills="7"] .sk-cols { grid-template-columns: 1fr; } }

  /* ----------------------------------------------------------------
     Keep non-home pages centered.
     The Design Studio "Home page · Hero style" sets data-home on <html>,
     which is global. Those hero rules are only meant for the home page,
     so re-assert centered headings/CTAs everywhere except the home page.
     ---------------------------------------------------------------- */
  html body:not(.page-home) .section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
  html body:not(.page-home) .hero-ctas { justify-content: center; }

  /* Stop the "Founding cohort" badge dot from pulsing on mobile (reads as a blink on small screens) */
  @media (max-width: 768px) {
    .pulse-dot::after { animation: none !important; display: none; }
  }