*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    /* ══════════════════════════════════════════════════
       THEME VARIABLES
       ══════════════════════════════════════════════════ */
    :root {
      --purple       : #7c3aed;
      --purple-light : #a78bfa;
      --ease-panel   : cubic-bezier(0.76, 0, 0.24, 1);
      --theme-transition: background 0.55s cubic-bezier(.4,0,.2,1),
                          color 0.55s cubic-bezier(.4,0,.2,1),
                          border-color 0.55s cubic-bezier(.4,0,.2,1),
                          box-shadow 0.55s cubic-bezier(.4,0,.2,1);
    }

    /* DARK THEME (default) */
    [data-theme="dark"] {
      --white        : #ffffff;
      --dark         : #07050f;
      --panel-l      : #0d0b14;
      --panel-r      : #110f1a;
      --bg           : #000000;
      --bg2          : #07040f;
      --text-primary : #ffffff;
      --text-secondary: rgba(255,255,255,0.50);
      --text-muted   : rgba(255,255,255,0.28);
      --text-faint   : rgba(255,255,255,0.08);
      --border-light : rgba(255,255,255,0.08);
      --border-mid   : rgba(255,255,255,0.15);
      --hero-overlay : linear-gradient(
                         180deg,
                         rgba(7,2,20,.88) 0%,
                         rgba(7,2,20,.52) 13%,
                         rgba(7,2,20,0) 30%,
                         rgba(7,2,20,0) 70%,
                         rgba(7,2,20,.48) 88%,
                         rgba(5,2,18,.92) 100%
                       );
      --hero-bottom  : linear-gradient(to top, rgba(7,2,20,.97) 0%, rgba(7,2,20,.55) 45%, transparent 100%);
      --word-ghost   : #2a2730;
      --word-ghost-p : #2a1e4a;
      --word-lit     : #ffffff;
      --word-lit-p   : #a78bfa;
      --word-g       : #1c1b20;
      --word-gp      : #1a1430;
      --word-lit-g   : rgba(255,255,255,0.38);
      --word-lit-gp  : rgba(167,139,250,0.52);
      --s7-word      : #242424;
      --s7-word-p    : #1e1830;
      --s8-bg        : #000;
      --s9-form-bg   : #07040f;
      --s9-input-bg  : rgba(255,255,255,.04);
      --s9-input-border: rgba(255,255,255,.09);
      --s9-input-focus-bg: rgba(124,58,237,.06);
      --footer-bg    : #000;
      --blob-a       : radial-gradient(circle,rgba(124,58,237,.08) 0%,transparent 65%);
      --blob-b       : radial-gradient(circle,rgba(167,139,250,.06) 0%,transparent 65%);
      --vid-overlay3 : linear-gradient(180deg,rgba(0,0,0,.42) 0%,transparent 28%,transparent 58%,rgba(0,0,0,.78) 100%),linear-gradient(90deg,rgba(0,0,0,.32) 0%,transparent 38%),radial-gradient(ellipse at 80% 20%,rgba(124,58,237,.14) 0%,transparent 52%);
      --cred4-fade   : linear-gradient(to right,rgba(0,0,0,.75) 0%,rgba(0,0,0,.25) 25%,transparent 60%);
      --s6-overlay   : linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.30) 30%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.82) 100%),radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(0,0,0,.35) 100%);
      --s6-scrim     : linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%);
      --map-filter   : grayscale(1) invert(1) brightness(.5) hue-rotate(190deg) contrast(1.1);
      --map-overlay  : linear-gradient(to right, rgba(0,0,0,.55) 0%, transparent 55%), linear-gradient(to top, rgba(0,0,0,.60) 0%, transparent 45%);
      --badge-bg     : rgba(7,3,18,.90);
      --logo-filter  : brightness(0) invert(1);
      --footer-featured-bg: linear-gradient(135deg,#0e1e2e,#1a2e4a,#0a1828);
    }

    /* LIGHT / MILKY WHITE THEME */
    [data-theme="light"] {
      --white        : #1a1025;
      --dark         : #faf8f5;
      --panel-l      : #f5f2ee;
      --panel-r      : #ede9e3;
      --bg           : #faf8f5;
      --bg2          : #f2ede8;
      --text-primary : #1a1025;
      --text-secondary: rgba(26,16,37,0.55);
      --text-muted   : rgba(26,16,37,0.32);
      --text-faint   : rgba(26,16,37,0.08);
      --border-light : rgba(26,16,37,0.08);
      --border-mid   : rgba(26,16,37,0.15);
      --hero-overlay : linear-gradient(
                         180deg,
                         rgba(250,248,245,.88) 0%,
                         rgba(250,248,245,.48) 13%,
                         rgba(250,248,245,0) 30%,
                         rgba(250,248,245,0) 70%,
                         rgba(250,248,245,.44) 88%,
                         rgba(250,248,245,.92) 100%
                       );
      --hero-bottom  : linear-gradient(to top, rgba(250,248,245,.97) 0%, rgba(250,248,245,.55) 45%, transparent 100%);
      --word-ghost   : #d4cfc8;
      --word-ghost-p : #c9bde0;
      --word-lit     : #1a1025;
      --word-lit-p   : #6d28d9;
      --word-g       : #c8c3bc;
      --word-gp      : #c0b5d8;
      --word-lit-g   : rgba(26,16,37,0.40);
      --word-lit-gp  : rgba(109,40,217,0.55);
      --s7-word      : #c8c3bc;
      --s7-word-p    : #c0b5d8;
      --s8-bg        : #f2ede8;
      --s9-form-bg   : #f0ebe5;
      --s9-input-bg  : rgba(26,16,37,.04);
      --s9-input-border: rgba(26,16,37,.12);
      --s9-input-focus-bg: rgba(124,58,237,.05);
      --footer-bg    : #ede9e2;
      --blob-a       : radial-gradient(circle,rgba(124,58,237,.05) 0%,transparent 65%);
      --blob-b       : radial-gradient(circle,rgba(109,40,217,.04) 0%,transparent 65%);
      --vid-overlay3 : linear-gradient(180deg,rgba(250,248,245,.42) 0%,transparent 28%,transparent 58%,rgba(250,248,245,.78) 100%),linear-gradient(90deg,rgba(250,248,245,.32) 0%,transparent 38%),radial-gradient(ellipse at 80% 20%,rgba(124,58,237,.08) 0%,transparent 52%);
      --cred4-fade   : linear-gradient(to right,rgba(250,248,245,.80) 0%,rgba(250,248,245,.30) 25%,transparent 60%);
      --s6-overlay   : linear-gradient(180deg,rgba(250,248,245,.55) 0%,rgba(250,248,245,.28) 30%,rgba(250,248,245,.42) 70%,rgba(250,248,245,.88) 100%),radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(250,248,245,.30) 100%);
      --s6-scrim     : linear-gradient(to top,rgba(250,248,245,.90) 0%,transparent 100%);
      --map-filter   : grayscale(0.4) brightness(1.05) contrast(0.95);
      --map-overlay  : linear-gradient(to right, rgba(250,248,245,.45) 0%, transparent 55%), linear-gradient(to top, rgba(250,248,245,.55) 0%, transparent 45%);
      --badge-bg     : rgba(255,252,248,.95);
      --logo-filter  : brightness(0) saturate(100%) invert(8%) sepia(20%) saturate(800%) hue-rotate(260deg);
      --footer-featured-bg: linear-gradient(135deg,#ddd6f3,#ede0f8,#d8d0ee);
    }

    html, body { height:100%; font-family:'Raleway',sans-serif; background: var(--bg); }
    html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
    body { overflow-x:hidden; overflow-y:auto; transition: var(--theme-transition); }

    /* ══ HERO ══ */
    .hero { position:relative; width:100vw; height:100vh; overflow:hidden; }
    .hero__video-wrapper { position:absolute; inset:0; z-index:0; }
    .hero__video-wrapper video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; }
    .hero__video--mobile { display:none; }
    .hero__video--desktop { display:block; }
    .hero__overlay {
      position:absolute; inset:0; z-index:1;
      background: var(--hero-overlay);
      transition: background 0.55s;
    }
    .hero__bottom-fade {
      position:absolute; bottom:0; left:0; right:0; height:60%; z-index:2;
      background: var(--hero-bottom);
      pointer-events:none; transition: background 0.55s;
    }
/*    .topbar { position:absolute; top:0; left:0; right:0; display:flex; align-items:flex-start; justify-content:space-between; padding:32px 48px 0; z-index:10; }
    .logo-wrapper { display:inline-flex; align-items:center; text-decoration:none; animation:fadeDown .8s ease both; }
    .logo-img-box { height:56px; display:flex; align-items:center; }
    .logo-img-box img { height:100%; width:auto; display:block; object-fit:contain; filter: var(--logo-filter); transition: filter 0.55s; }*/
    .menu-btn {
      background:none;
      border:1.5px solid rgba(var(--menu-btn-border, 255,255,255),.28);
      width:56px; height:56px; cursor:pointer;
      display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
      gap:6px; padding:0 16px; flex-shrink:0;
      transition:border-color .3s;
      animation:fadeDown .8s ease .1s both;
    }
    [data-theme="dark"] .menu-btn { border-color: rgba(255,255,255,.28); }
    [data-theme="light"] .menu-btn { border-color: rgba(26,16,37,.28); }
    [data-theme="dark"] .menu-btn:hover { border-color:rgba(255,255,255,.75); }
    [data-theme="light"] .menu-btn:hover { border-color:rgba(26,16,37,.70); }
    .menu-btn span { display:block; height:1.5px; transition:width .3s ease; }
    [data-theme="dark"] .menu-btn span { background:#fff; }
    [data-theme="light"] .menu-btn span { background:#1a1025; }
    .menu-btn span:nth-child(1) { width:22px; }
    .menu-btn span:nth-child(2) { width:22px; }
    .menu-btn span:nth-child(3) { width:14px; }
    .menu-btn:hover span { width:22px; }
    .hero__bottom-content { position:absolute; bottom:0; left:0; right:0; z-index:5; padding:0 48px 72px; display:flex; align-items:center; justify-content:center; text-align:center; }
    .hero__title {
      font-family:'Playfair Display',serif; font-size:clamp(2.4rem,6vw,5.5rem);
      font-weight:900; line-height:1.1; color: var(--text-primary);
      opacity:0; animation:fadeUp 1s ease .6s forwards;
      transition: color 0.55s;
    }
    .hero__title em { font-style:italic; color:var(--purple-light); }
/* ══ HERO SOUND CONTROL ══ */
.hero__sound {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 6; /* above .hero__bottom-content (z-index:5) */
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__sound-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-mid);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease, var(--theme-transition);
}

[data-theme="light"] .hero__sound-btn { background: rgba(255,255,255,0.45); }

.hero__sound-btn:hover { transform: scale(1.05); }

.hero__sound-btn .icon { width: 20px; height: 20px; }
.hero__sound-btn .icon--off { display: none; }
.hero__sound.is-muted .icon--on  { display: none; }
.hero__sound.is-muted .icon--off { display: block; }

/* Volume bar: collapsed by default, opens on hover of the whole control */
.hero__volume {
  display: flex;
  align-items: center;
  width: 0;
  overflow: hidden;
  opacity: 0;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-mid);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: width 0.25s ease, opacity 0.2s ease, var(--theme-transition);
}

[data-theme="light"] .hero__volume { background: rgba(255,255,255,0.45); }

.hero__sound:hover .hero__volume,
.hero__sound:focus-within .hero__volume,
.hero__sound.is-open .hero__volume {
  width: 120px;
  opacity: 1;
  padding: 0 16px;
}

.hero__volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--border-mid);
  outline: none;
  cursor: pointer;
}

.hero__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--text-primary);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.hero__volume-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

.hero__volume-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: none;
  border-radius: 50%;
  background: var(--text-primary);
  cursor: pointer;
}

/* Responsive: sits inside your existing hero breakpoints */
@media (max-width: 768px) {
  .hero__sound { left: 16px; bottom: 16px; }
  .hero__sound-btn { width: 38px; height: 38px; }
  .hero__sound-btn .icon { width: 17px; height: 17px; }
  .hero__volume { height: 38px; }
}
@media (max-width: 480px) {
  .hero__sound { left: 12px; bottom: 12px; }
}
    /* ══ NAV ══ */
/*    .nav-overlay { position:fixed; inset:0; z-index:100; display:grid; grid-template-columns:1.1fr .9fr; pointer-events:none; visibility:hidden; }
    .nav-overlay.open { visibility:visible; pointer-events:all; }
    .nav-panel {
      background: var(--panel-l);
      position:relative; display:flex; flex-direction:column;
      justify-content:flex-end; padding:48px 56px 60px;
      transform:translateX(-100%);
      transition:transform .6s var(--ease-panel), background 0.55s;
      overflow-y:auto;
    }
    .nav-overlay.open .nav-panel { transform:translateX(0); }
    .nav-panel__logo-div { position:absolute; top:28px; left:48px; display:inline-flex; align-items:center; text-decoration:none; }
    .nav-logo-img-box { height:46px; display:flex; align-items:center; }
    .nav-logo-img-box img { height:100%; width:auto; object-fit:contain; display:block; filter: var(--logo-filter); transition: filter 0.55s; }
    .nav-list { list-style:none; margin-top:8px; }
    .nav-list > li {
      border-top:1px solid var(--border-light);
      opacity:0; transform:translateY(18px);
      transition:opacity .45s ease, transform .45s ease, border-color 0.55s;
    }
    .nav-list > li:last-child { border-bottom:1px solid var(--border-light); }
    .nav-list > li:first-child > a { color: var(--text-primary); }
    .nav-overlay.open .nav-list > li:nth-child(1) { opacity:1; transform:none; transition-delay:.28s; }
    .nav-overlay.open .nav-list > li:nth-child(2) { opacity:1; transform:none; transition-delay:.36s; }
    .nav-overlay.open .nav-list > li:nth-child(3) { opacity:1; transform:none; transition-delay:.44s; }
    .nav-overlay.open .nav-list > li:nth-child(4) { opacity:1; transform:none; transition-delay:.52s; }
    .nav-overlay.open .nav-list > li:nth-child(5) { opacity:1; transform:none; transition-delay:.60s; }
    .nav-overlay.open .nav-list > li:nth-child(6) { opacity:1; transform:none; transition-delay:.68s; }
    .nav-list > li > .sh-link {
      display:flex; align-items:center; gap:12px; padding:16px 0;
      font-family:'Raleway',sans-serif; font-size:clamp(.95rem,1.8vw,1.35rem);
      font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
      color: var(--text-muted);
      text-decoration:none; transition:color .3s, padding-left .3s; cursor:pointer;
    }
    .nav-list > li > .sh-link:hover { color: var(--text-primary); padding-left:6px; }
    .sh-ico { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
    .sh-caret { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-left:auto; flex-shrink:0; transition:transform .3s; }
    .sh-has-dd { position:relative; }
    .sh-dd { list-style:none; max-height:0; overflow:hidden; transition:max-height .4s ease, opacity .3s ease; opacity:0; padding-left:32px; }
    .sh-has-dd.sh-open .sh-dd { max-height:600px; opacity:1; }
    .sh-has-dd.sh-open .sh-caret { transform:rotate(180deg); }
    .sh-dd li a {
      display:block; padding:8px 0;
      font-size:.8rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
      color: var(--text-muted);
      text-decoration:none; transition:color .2s, padding-left .2s;
      border-bottom:1px solid var(--border-light);
    }
    .sh-dd li:last-child a { border-bottom:none; }
    .sh-dd li a:hover { color:var(--purple-light); padding-left:6px; }
    .sh-nested { margin-top:4px; }
    .sh-nested > .sh-link { font-size:.8rem!important; letter-spacing:.12em!important; padding:8px 0!important; color: var(--text-muted) !important; border-bottom:1px solid var(--border-light); }
    .sh-nested > .sh-link:hover { color:var(--purple-light)!important; }
    .sh-sub { padding-left:16px!important; }
    .nav-close-panel {
      background: var(--panel-r);
      display:flex; flex-direction:column; align-items:flex-end;
      justify-content:flex-start; padding:32px 40px;
      transform:translateX(100%);
      transition:transform .6s var(--ease-panel), background 0.55s;
      position:relative; overflow:hidden;
    }
    .nav-overlay.open .nav-close-panel { transform:translateX(0); }
    .nav-preview { position:absolute; inset:0; z-index:0; }
    .nav-preview img { width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .5s ease; }
    .nav-preview img.active { opacity:1; }
    .nav-preview::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(11,8,20,.82) 0%, rgba(11,8,20,.55) 50%, rgba(11,8,20,.70) 100%); }
    [data-theme="light"] .nav-preview::after { background:linear-gradient(135deg, rgba(240,235,229,.82) 0%, rgba(240,235,229,.55) 50%, rgba(240,235,229,.70) 100%); }
    .nav-close-panel::before { content:''; position:absolute; bottom:-100px; left:-80px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(124,58,237,.14) 0%,transparent 70%); pointer-events:none; z-index:1; }
    .nav-close-panel::after { content:''; position:absolute; top:-80px; right:-80px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(80,20,200,.16) 0%,transparent 70%); pointer-events:none; z-index:1; }
    .close-btn {
      width:72px; height:72px;
      border:1.5px solid var(--border-mid);
      background:none; cursor:pointer; display:grid; place-items:center;
      position:relative; z-index:3; flex-shrink:0;
      transition:border-color .3s, background .3s;
    }*/
    .close-btn:hover { border-color: var(--text-secondary); background: var(--text-faint); }
    .close-btn svg { width:20px; height:20px; stroke: var(--text-primary); stroke-width:1.5; stroke-linecap:square; }
    .nav-section-label { position:absolute; bottom:56px; left:48px; right:40px; z-index:3; opacity:0; transition:opacity .5s ease .6s; }
    .nav-overlay.open .nav-section-label { opacity:1; }
    .nav-section-label__tag { font-size:.6rem; letter-spacing:.38em; text-transform:uppercase; color: var(--text-muted); margin-bottom:10px; font-family:'Raleway',sans-serif; }
    .nav-section-label__name { font-family:'Playfair Display',serif; font-size:clamp(1.3rem,2.5vw,2.1rem); font-weight:700; font-style:italic; color: var(--text-faint); line-height:1.3; }
    .nav-section-label__name span { color:rgba(167,139,250,.35); }
    #sectionName { transition:opacity .25s; }

    @keyframes fadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fadeUp   { from{opacity:0;transform:translateY(24px)}  to{opacity:1;transform:translateY(0)} }

    @media (max-width:768px) {
      .nav-overlay { grid-template-columns: 1fr 0; }
      .nav-close-panel { display: none; }
      .nav-panel { padding: 0 0 40px; width: 100%; justify-content: flex-start; }
      .nav-panel__logo-div { position: relative; top: auto; left: auto; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px 20px 0; margin-bottom: 12px; }
      .nav-panel__close-mobile { display: flex !important; width: 44px; height: 44px; border: 1.5px solid var(--border-mid); background: none; cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; }
      .nav-panel__close-mobile svg { width: 18px; height: 18px; stroke: var(--text-primary); stroke-width: 1.5; stroke-linecap: square; }
      #navMobileClose { display: flex !important; }
      .nav-logo-img-box { height: 38px; }
      .nav-list { margin-top: 0; padding: 0 20px; }
      .nav-list > li > .sh-link { font-size: 1rem; letter-spacing: 0.14em; padding: 14px 0; }
      .sh-dd { padding-left: 20px; }
      .sh-dd li a { font-size: .82rem; padding: 10px 0; }
    }
    @media (max-width:480px) {
      .nav-panel { padding: 0 0 32px; }
      .nav-panel__logo-div { padding: 16px 16px 0; }
      .nav-list { padding: 0 16px; }
      .nav-list > li > .sh-link { font-size: .92rem; padding: 12px 0; }
    }

    /* ══ SECTION 2 ══ */
    .reveal-gap { height:0; margin:0; padding:0; display:none; background:var(--bg); }
    .cr-track { position:relative; height:330vh; background: var(--bg); transition: background 0.55s; }
    .cr-sticky {
      position:sticky; top:0; height:100vh; width:100%;
      display:flex; flex-direction:column; justify-content:flex-start;
      padding:clamp(28px,3.8vh,46px) 4.5vw clamp(22px,2.8vh,34px);
      overflow:hidden; background:var(--bg); transition:background 0.55s;
    }
    .cr-blob { position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
    .cr-blob--a { top:-20vh; left:-10vw; width:70vw; height:70vw; background: var(--blob-a); transition: background 0.55s; }
    .cr-blob--b { bottom:-15vh; right:-8vw; width:55vw; height:55vw; background: var(--blob-b); transition: background 0.55s; }
    .cr-eyebrow { display:none; }
    .cr-eyebrow.in { display:none; }
    .cr-copy {
      position:relative; z-index:1; display:flex; flex-direction:column; gap:0; width:100%;
      /* Reference spacing: tight lines inside a thought, larger blank gap between thought groups. */
      --cr-tight-gap:clamp(1px,.22vh,3px);
      --cr-group-gap:clamp(18px,2.35vh,30px);
    }
    .cr-line {
      display:block; line-height:1.12; padding:0; white-space:nowrap; margin:0 0 var(--cr-tight-gap);
    }
    .cr-line--ghost { line-height:1.12; }
    /* Reference-image rhythm:
       1 and 2 stand alone; 3+4, 5+6, 7+8 and 9+10 are paired. */
    .cr-line--1,
    .cr-line--2,
    .cr-line--4,
    .cr-line--6,
    .cr-line--8 { margin-bottom:var(--cr-group-gap); }
    .cr-line--10 { margin-bottom:0; }
    .cw { display:inline-block; font-family:'Playfair Display',serif; font-weight:900; margin-right:.13em; letter-spacing:.018em; transition:color .38s cubic-bezier(.25,.46,.45,.94); will-change:color; }

    /* Desktop: exact requested line breaks. Size responds to BOTH width and height,
       preventing the top from clipping on short-but-wide screens. */
    .cr-line--1  { --cr-font-size:clamp(2.18rem,min(3.72vw,5.48vh),4.35rem); }
    .cr-line--2  { --cr-font-size:clamp(2.28rem,min(4.18vw,5.78vh),4.85rem); }
    .cr-line--3  { --cr-font-size:clamp(2.08rem,min(3.56vw,5.18vh),4.15rem); }
    .cr-line--4  { --cr-font-size:clamp(2.4rem,min(4.9vw,5.98vh),5.45rem); }
    .cr-line--5  { --cr-font-size:clamp(1.82rem,min(2.88vw,4.48vh),3.4rem); }
    .cr-line--6  { --cr-font-size:clamp(1.82rem,min(2.85vw,4.43vh),3.35rem); }
    .cr-line--7  { --cr-font-size:clamp(2.4rem,min(4.8vw,5.88vh),5.35rem); }
    .cr-line--8  { --cr-font-size:clamp(1.95rem,min(3.25vw,4.85vh),3.8rem); }
    .cr-line--9  { --cr-font-size:clamp(2.4rem,min(5vw,5.93vh),5.6rem); }
    .cr-line--10 { --cr-font-size:clamp(1.98rem,min(3.35vw,4.95vh),3.95rem); }
    .cr-line .cw { font-size:var(--cr-font-size); }
    .cw--w  { color: var(--word-ghost); }  .cw--w.lit  { color: var(--word-lit); }
    .cw--p  { color: var(--word-ghost-p); } .cw--p.lit  { color: var(--word-lit-p); }
    .cw--g  { color: var(--word-g); }       .cw--g.lit  { color: var(--word-lit-g); }
    .cw--gp { color: var(--word-gp); }      .cw--gp.lit { color: var(--word-lit-gp); }
    .cr-amp { font-style:italic; }
    .cr-bar { position:absolute; bottom:0; left:0; right:0; height:2px; background: var(--border-light); z-index:5; transition: background 0.55s; }
    .cr-bar__fill { height:100%; width:0%; background:linear-gradient(90deg,#7c3aed,#a78bfa); }

    /* ══ SECTION 3 ══ */
    .cred3 { position:relative; background: var(--bg); width:100vw; overflow:hidden; transition: background 0.55s; }
    .cred3__video-block { position:relative; width:100%; height:clamp(260px,56vh,700px); overflow:hidden; background:#080510; opacity:0; transform:scale(1.04); transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1); }
    .cred3__video-block.vid-in { opacity:1; transform:scale(1); }
    .cred3__bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:1; }
    .cred3__vid-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; background: var(--vid-overlay3); transition: background 0.55s; }
    .cred3__vid-label { position:absolute; top:clamp(20px,4vh,48px); left:clamp(20px,4vw,56px); z-index:3; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateY(-12px); transition:opacity .7s ease .55s,transform .7s ease .55s; }
    .cred3__video-block.vid-in .cred3__vid-label { opacity:1; transform:translateY(0); }
    .cred3__vid-tag { font-family:'Raleway',sans-serif; font-size:.55rem; font-weight:700; letter-spacing:.44em; text-transform:uppercase; color:rgba(167,139,250,.8); display:block; }
    .cred3__text-block { position:relative; background: var(--bg); width:100%; padding:10vh 0 12vh; overflow:hidden; transition: background 0.55s; }
    .cred3__inner { max-width:1200px; margin:0 auto; padding:0 8vw; }
    .cred3__headline-wrap { margin-bottom:5vh; }
    .cred3__headline { display:flex; flex-direction:column; }
    .cred3__line { display:block; font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(3rem,8.5vw,9.2rem); line-height:1.0; color: var(--text-primary); letter-spacing:-0.01em; will-change:transform,opacity; transition: color 0.55s; }
    .cred3__body-wrap { max-width:680px; will-change:transform,opacity; }
    .cred3__body { font-family:'Raleway',sans-serif; font-size:clamp(.95rem,1.6vw,1.18rem); font-weight:300; color: var(--text-secondary); line-height:1.95; transition: color 0.55s; }
    .cred3__text-block { min-height:28vh; }

    /* ══ SECTION 4 — 2-SCROLL STICKY STORY ══ */
    .cred4-track { position:relative; z-index:1; isolation:isolate; height:300vh; background:var(--bg); transition:background .55s; }
    .cred4 { position:sticky; top:0; z-index:1; background:var(--bg); width:100vw; height:100vh; min-height:100vh; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; overflow:hidden; transition:background .55s; }
    .cred4::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--border-light); z-index:2; transition:background .55s; }
    .cred4__text { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; padding:10vh 6vw 10vh 8vw; opacity:0; transform:translateX(-30px); transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1); }
    .cred4.in-view .cred4__text { opacity:1; transform:none; }
    .cred4.is-exiting .cred4__text { opacity:0!important; transform:translateY(-24px)!important; visibility:hidden; pointer-events:none; }
    .cred4__title { font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(2.6rem,5.5vw,6.2rem); line-height:1.06; color:var(--text-primary); letter-spacing:-0.01em; margin-bottom:32px; transition:color .55s; }
    .cred4__title em { font-style:italic; color:var(--text-primary); }
    .cred4__body-stack { display:grid; max-width:460px; }
    .cred4__body { grid-area:1/1; font-family:'Raleway',sans-serif; font-size:clamp(.9rem,1.35vw,1.05rem); font-weight:300; color:var(--text-secondary); line-height:1.9; max-width:460px; opacity:0; transform:translateY(24px); visibility:hidden; pointer-events:none; transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),visibility .5s,color .55s; }
    .cred4__body--step.is-active { opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto; }
    .cred4__scroll-dots { display:flex; gap:8px; margin-top:28px; }
    .cred4__scroll-dot { width:28px; height:3px; border-radius:999px; background:var(--border-mid); opacity:.5; transition:width .35s ease,opacity .35s ease,background .35s ease; }
    .cred4__scroll-dot.is-active { width:52px; opacity:1; background:var(--purple-light); }
    .cred4__media { position:relative; overflow:hidden; opacity:0; transform:translateX(20px); transition:opacity 1s cubic-bezier(.22,1,.36,1) .1s,transform 1s cubic-bezier(.22,1,.36,1) .1s; }
    .cred4.in-view .cred4__media { opacity:1; transform:none; }
    .cred4__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:1; }
    .cred4__media-fade { position:absolute; inset:0; z-index:1; background:var(--cred4-fade); pointer-events:none; transition:background .55s; }

    /* ══ SECTION 5 ══ */
    .hs-track { position:relative; z-index:5; isolation:isolate; height:600vh; background: var(--bg); transition: background 0.55s; }
    .hs-sticky { position:sticky; top:0; z-index:5; height:100vh; width:100vw; overflow:hidden; background: var(--bg); display:flex; flex-direction:column; justify-content:center; transition: background 0.55s; }
    .hs-title-row { padding:0 8vw; margin-bottom:4vh; flex-shrink:0; }
    .hs-title { display:flex; flex-direction:column; }
    .hs-title__line { display:block; font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(3rem,7.5vw,8rem); line-height:1.0; color: var(--text-primary); letter-spacing:-0.01em; transition: color 0.55s; }
    .hs-title__line--italic { font-style:italic; color: var(--text-secondary); }
    .hs-viewport { width:100%; overflow:visible; flex-shrink:0; }
    .hs-rail { display:flex; gap:16px; padding:0 8vw; will-change:transform; }
    .hs-card { position:relative; flex-shrink:0; width:clamp(280px,28vw,370px); height:clamp(420px,56vh,540px); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; padding:28px 28px 0; border:1px solid var(--border-light); cursor:default; transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease, border-color 0.55s; }
    .hs-card:hover { transform:translateY(-10px) scale(1.02); }
    .hs-card__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Raleway', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ec4899 0%, #f472b6 35%, #c084fc 68%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  margin-bottom: 22px;
  position: relative;
  z-index: 4;
  flex-shrink: 0;
}.hs-card__headline { font-family:'Raleway',sans-serif; font-weight:800; font-size:clamp(1.85rem,3vw,2.6rem); line-height:1.06; color:#fff; letter-spacing:-0.025em; margin-bottom:26px; position:relative; z-index:4; flex-shrink:0; }
    .hs-card__cta { display:inline-flex; align-items:center; gap:12px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); color:#fff; font-family:'Raleway',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; padding:13px 22px; border-radius:3px; backdrop-filter:blur(10px); position:relative; z-index:4; flex-shrink:0; transition:background .25s,border-color .25s; }
    .hs-card__cta:hover { background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.5); }
    .hs-card__img-zone { position:absolute; bottom:0; left:0; right:0; height:62%; z-index:1; pointer-events:none; display:flex; align-items:flex-end; justify-content:center; overflow:visible; }
    .hs-card__img { height:78%; width:auto; max-width:85%; object-fit:contain; object-position:center bottom; display:block; filter:drop-shadow(0 -12px 32px rgba(0,0,0,.6)); transition:transform .45s cubic-bezier(.22,1,.36,1),filter .45s ease; }
    .hs-card:hover .hs-card__img { transform:translateY(-12px) scale(1.04); filter:drop-shadow(0 -18px 40px rgba(0,0,0,.7)); }
    /* Light theme card tints */
    .hs-card--1 { background:#100810; }
    .hs-card--1 .hs-card__img-zone { background:radial-gradient(ellipse at 55% 100%,rgba(220,40,120,.85) 0%,rgba(180,20,90,.45) 38%,transparent 66%),radial-gradient(ellipse at 18% 72%,rgba(200,0,90,.4) 0%,transparent 55%); }
    .hs-card--2 { background:#090714; }
    .hs-card--2 .hs-card__img-zone { background:radial-gradient(ellipse at 55% 100%,rgba(120,40,230,.85) 0%,rgba(80,20,180,.45) 40%,transparent 68%),radial-gradient(ellipse at 82% 65%,rgba(100,20,210,.38) 0%,transparent 52%); }
    .hs-card--3 { background:#060f08; }
    .hs-card--3 .hs-card__img-zone { background:radial-gradient(ellipse at 58% 100%,rgba(30,210,100,.82) 0%,rgba(20,155,65,.42) 40%,transparent 66%),radial-gradient(ellipse at 25% 70%,rgba(10,185,82,.32) 0%,transparent 52%); }
    .hs-card--4 { background:#060912; }
    .hs-card--4 .hs-card__img-zone { background:radial-gradient(ellipse at 55% 100%,rgba(30,130,250,.82) 0%,rgba(20,85,200,.42) 40%,transparent 68%),radial-gradient(ellipse at 78% 62%,rgba(0,190,250,.32) 0%,transparent 50%); }
    .hs-card--5 { background:#0d0a02; }
    .hs-card--5 .hs-card__img-zone { background:radial-gradient(ellipse at 55% 100%,rgba(250,165,20,.80) 0%,rgba(190,105,12,.42) 40%,transparent 68%),radial-gradient(ellipse at 26% 68%,rgba(230,125,0,.30) 0%,transparent 52%); }
    [data-theme="light"] .hs-card--1 { background:#1e0d18; }
    [data-theme="light"] .hs-card--2 { background:#100a20; }
    [data-theme="light"] .hs-card--3 { background:#081410; }
    [data-theme="light"] .hs-card--4 { background:#080d1c; }
    [data-theme="light"] .hs-card--5 { background:#141008; }
    .hs-dots { display:flex; gap:8px; padding:20px 8vw 0; flex-shrink:0; }
    .hs-dot { width:6px; height:6px; border-radius:50%; background: var(--text-muted); transition:background .3s,width .3s, background 0.55s; cursor:pointer; }
    .hs-dot.active { background: var(--text-primary); width:20px; border-radius:3px; }

    /* ══ SECTION 6 ══ */
    .s6-track { position:relative; background: var(--bg); transition: background 0.55s; }
    .s6__spacer { height:500vh; }
    .s6-sticky { position:sticky; top:0; height:100vh; width:100vw; overflow:hidden; }
    .s6__video-wrap { position:absolute; inset:0; z-index:0; }
    .s6__video { width:100%; height:100%; object-fit:cover; display:block; opacity:1; }
    .s6__overlay { position:absolute; inset:0; z-index:1; background: var(--s6-overlay); transition: background 0.55s; }
    .s6__bottom-scrim { position:absolute; bottom:0; left:0; right:0; height:100px; z-index:2; background: var(--s6-scrim); pointer-events:none; transition: background 0.55s; }
    .s6__panels { position:absolute; inset:0; z-index:3; display:flex; align-items:center; padding:0 9vw; }
    .s6__panel { position:absolute; left:9vw; right:9vw; opacity:0; visibility:hidden; will-change:transform,opacity; }
    .s6__panel-inner { display:flex; flex-direction:column; gap:clamp(14px,2.4vh,26px); max-width:840px; }
    .s6__tag { font-family:'Raleway',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.44em; text-transform:uppercase; color: var(--text-muted); display:block; transition: color 0.55s; }
    .s6__headline { display:flex; flex-direction:column; }
    .s6__line { display:block; font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(3rem,8vw,8.8rem); line-height:1.0; color: var(--text-primary); letter-spacing:-0.015em; text-shadow:0 2px 60px rgba(0,0,0,.1); will-change:transform,opacity; transition: color 0.55s; }
    .s6__line--italic { font-style:italic; }
    .s6__body { font-family:'Raleway',sans-serif; font-size:clamp(.9rem,1.5vw,1.1rem); font-weight:300; color: var(--text-secondary); line-height:1.9; text-shadow:0 1px 12px rgba(0,0,0,.1); transition: color 0.55s; }

    /* ══ SECTION 7 ══ */
    .s7 { position:relative; background: var(--bg); width:100vw; padding:13vh 6vw 15vh; display:flex; flex-direction:column; align-items:center; overflow:hidden; transition: background 0.55s; }
    .s7__icon-wrap { margin-bottom:44px; opacity:0; transform:translateY(-14px); transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1); }
    .s7.in-view .s7__icon-wrap { opacity:1; transform:none; }
    .s7__shield { width:50px; height:60px; display:block; }
    .s7__shield path, .s7__shield rect, .s7__shield circle { stroke: var(--text-primary); transition: stroke 0.55s; }
    .s7__shield circle { fill: var(--text-primary); stroke: none; }
    .s7__label { font-family:'Raleway',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color: var(--text-secondary); text-align:center; margin-bottom:8vh; opacity:0; transform:translateY(8px); transition:opacity .75s ease .18s,transform .75s ease .18s, color 0.55s; }
    .s7.in-view .s7__label { opacity:1; transform:none; }
    .s7__para {
      --s7-x:50%;
      --s7-y:50%;
      position:relative;
      isolation:isolate;
      font-family:'Raleway',sans-serif;
      font-weight:700;
      font-size:clamp(2rem,5.2vw,6rem);
      line-height:1.18;
      text-align:center;
      max-width:1140px;
      letter-spacing:-0.01em;
      opacity:0;
      transform:translateY(22px);
      transition:opacity .8s ease .32s,transform .8s ease .32s;
    }
    .s7.in-view .s7__para { opacity:1; transform:none; }

    /* Base state stays muted. The old one-word hover has been removed. */
    .s7__para > .hw {
      display:inline;
      color:var(--s7-word);
      cursor:default;
      transition:color .55s;
      white-space:nowrap;
    }
    .s7__para > .hw--p { color:var(--s7-word-p); }

    /* Cursor-following spotlight layer: only this circular area shows
       the original white / purple colours. JS creates this duplicate layer. */
    .s7__para-spotlight {
      position:absolute;
      inset:0;
      z-index:2;
      display:block;
      width:100%;
      height:100%;
      font:inherit;
      line-height:inherit;
      letter-spacing:inherit;
      text-align:inherit;
      pointer-events:none;
      opacity:0;
      will-change:opacity,-webkit-mask-position,mask-position;
      -webkit-mask-image:radial-gradient(circle 170px at var(--s7-x) var(--s7-y),#000 0%,#000 48%,rgba(0,0,0,.92) 61%,rgba(0,0,0,.56) 75%,transparent 100%);
      mask-image:radial-gradient(circle 170px at var(--s7-x) var(--s7-y),#000 0%,#000 48%,rgba(0,0,0,.92) 61%,rgba(0,0,0,.56) 75%,transparent 100%);
      transition:opacity .18s ease;
    }
    .s7__para.is-spotlight-active .s7__para-spotlight { opacity:1; }
    .s7__para-spotlight .hw {
      display:inline;
      color:var(--text-primary);
      white-space:nowrap;
      transition:none;
    }
    .s7__para-spotlight .hw--p { color:var(--purple-light); }

    /* Soft light under the cursor so the reveal feels like a real spotlight. */
    .s7__spotlight-glow {
      position:absolute;
      left:var(--s7-x);
      top:var(--s7-y);
      width:300px;
      height:300px;
      z-index:-1;
      pointer-events:none;
      border-radius:50%;
      transform:translate(-50%,-50%);
      background:radial-gradient(circle,rgba(124,58,237,.13) 0%,rgba(124,58,237,.055) 42%,transparent 72%);
      opacity:0;
      transition:opacity .22s ease;
    }
    .s7__para.is-spotlight-active .s7__spotlight-glow { opacity:1; }

    /* Touch screens have no real hover, so keep the copy readable/full-colour. */
    @media (hover:none), (pointer:coarse) {
      .s7__para > .hw { color:var(--text-primary); }
      .s7__para > .hw--p { color:var(--purple-light); }
      .s7__para-spotlight,.s7__spotlight-glow { display:none!important; }
    }

    /* ══ SECTION 8 ══ */
    .s8 { background: var(--s8-bg); width:100vw; padding:12vh 9vw; border-top:1px solid var(--border-light); transition: background 0.55s, border-color 0.55s; }
    .s8__inner { display:flex; align-items:center; justify-content:space-between; gap:60px; max-width:1200px; margin:0 auto; }
    .s8__eyebrow { font-family:'Raleway',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.38em; text-transform:uppercase; color: var(--text-muted); margin-bottom:18px; transition: color 0.55s; }
    .s8__headline { font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(3rem,6vw,6.8rem); line-height:1.06; color: var(--text-primary); letter-spacing:-0.01em; transition: color 0.55s; }
    .s8__right { display:flex; gap:64px; flex-shrink:0; }
    .s8__stars { display:flex; gap:4px; margin-bottom:14px; }
    .s8__stars svg { width:22px; height:22px; }
    .s8__stars svg path { fill: var(--text-primary); transition: fill 0.55s; }
    .s8__score { display:flex; align-items:baseline; gap:2px; margin-bottom:10px; }
    .s8__num { font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(3.5rem,6vw,6rem); color: var(--text-primary); line-height:1; transition: color 0.55s; }
    .s8__denom { font-family:'Raleway',sans-serif; font-weight:700; font-size:1.4rem; color: var(--text-secondary); transition: color 0.55s; }
    .s8__store-label { font-family:'Raleway',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.36em; text-transform:uppercase; color: var(--text-muted); transition: color 0.55s; }

    /* ══ SECTION 9 ══ */
    .s9 { display:grid; grid-template-columns:1fr 1fr; width:100vw; min-height:100vh; background: var(--bg); overflow:hidden; transition: background 0.55s; }
    .s9__map-col, .s9__form-col { position:relative; overflow:hidden; }
    .s9__map-mask, .s9__form-mask { position:absolute; inset:0; will-change:clip-path; }
    .s9__map-iframe { position:absolute; inset:0; width:100%; height:100%; border:none; display:block;  transition: filter 0.55s; }
    .s9__map-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; background: var(--map-overlay); transition: background 0.55s; }
    .s9__map-badge { position:absolute; bottom:36px; left:36px; z-index:3; display:flex; align-items:center; gap:12px; background: var(--badge-bg); backdrop-filter:blur(16px); padding:14px 20px; border-radius:10px; border:1px solid rgba(124,58,237,.28); transition: background 0.55s; }
    .s9__badge-dot { width:10px; height:10px; border-radius:50%; background:var(--purple-light); flex-shrink:0; animation:s9Pulse 2.2s ease-in-out infinite; }
    @keyframes s9Pulse { 0%,100%{box-shadow:0 0 0 0 rgba(167,139,250,.7);} 50%{box-shadow:0 0 0 10px rgba(167,139,250,.0);} }
    .s9__badge-name { display:block; font-family:'Raleway',sans-serif; font-size:.84rem; font-weight:700; color: var(--text-primary); letter-spacing:.05em; transition: color 0.55s; }
    .s9__badge-loc  { display:block; font-family:'Raleway',sans-serif; font-size:.7rem; font-weight:300; color: var(--text-muted); transition: color 0.55s; }
    .s9__form-col { background: var(--s9-form-bg); transition: background 0.55s; }
    .s9__form-inner { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:8vh 6vw 8vh 5vw; overflow-y:auto; }
    .s9__eyebrow { font-family:'Raleway',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.44em; text-transform:uppercase; color:rgba(167,139,250,.75); margin-bottom:14px; display:block; }
    .s9__headline { font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(2.4rem,4vw,4.8rem); line-height:1.06; color: var(--text-primary); letter-spacing:-0.01em; margin-bottom:14px; transition: color 0.55s; }
    .s9__headline em { font-style:italic; color:var(--purple-light); }
    .s9__sub { font-family:'Raleway',sans-serif; font-size:clamp(.85rem,1.2vw,.95rem); font-weight:300; color: var(--text-secondary); line-height:1.8; margin-bottom:30px; transition: color 0.55s; }
    .s9__form { display:flex; flex-direction:column; gap:14px; }
    .s9__row  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .s9__field { display:flex; flex-direction:column; gap:6px; }
    .s9__label { font-family:'Raleway',sans-serif; font-size:.55rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color: var(--text-muted); transition: color 0.55s; }
    .s9__input { background: var(--s9-input-bg); border:1px solid var(--s9-input-border); color: var(--text-primary); font-family:'Raleway',sans-serif; font-size:.88rem; font-weight:300; padding:12px 14px; border-radius:6px; outline:none; width:100%; resize:none; transition:border-color .25s, background .25s, color 0.55s; }
    .s9__input::placeholder { color: var(--text-muted); }
    .s9__input:focus { border-color:rgba(124,58,237,.55); background: var(--s9-input-focus-bg); }
    .s9__textarea { min-height:100px; }
    .s9__btn { align-self:flex-start; background:var(--purple); color:#fff; font-family:'Raleway',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; border:none; padding:15px 32px; border-radius:6px; cursor:pointer; margin-top:4px; transition:background .25s, letter-spacing .25s; }
    .s9__btn:hover { background:#6d28d9; letter-spacing:.34em; }

    /* ══ SECTION 10 ══ */
    .s10 { background: var(--bg); width:100vw; padding:0 0 10vh; transition: background 0.55s; }
    .s10__header { display:flex; align-items:center; justify-content:center; gap:14px; padding:36px 8vw; cursor:pointer; user-select:none; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); transition:background .2s, border-color 0.55s; }
    .s10__header:hover { background: var(--text-faint); }
    .s10__title { font-family:'Raleway',sans-serif; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:700; letter-spacing:.55em; text-transform:uppercase; color: var(--text-secondary); transition: color 0.55s; }
    .s10__caret { width:22px; height:22px; flex-shrink:0; transition:transform .4s cubic-bezier(.22,1,.36,1); }
    .s10__caret path { stroke: var(--text-primary); transition: stroke 0.55s; }
    .s10__header.open .s10__caret { transform:rotate(180deg); }
    .s10__divider { height:0; border-top:1px solid var(--border-light); transition: border-color 0.55s; }
    .s10__body { max-height:0; overflow:hidden; transition:max-height .55s cubic-bezier(.22,1,.36,1); padding:0 9vw; }
    .s10__body.open { max-height:2000px; padding-top:8px; }
    .s10__item { border-bottom:1px solid var(--border-light); transition: border-color 0.55s; }
    .s10__q { width:100%; background:none; border:none; color: var(--text-secondary); font-family:'Raleway',sans-serif; font-size:clamp(.95rem,1.5vw,1.1rem); font-weight:500; text-align:left; padding:26px 0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; transition:color .2s; }
    .s10__q:hover,.s10__q[aria-expanded="true"] { color: var(--text-primary); }
    .s10__icon { width:20px; height:20px; flex-shrink:0; transition:transform .35s cubic-bezier(.22,1,.36,1); }
    .s10__icon path { stroke: var(--text-primary); transition: stroke 0.55s; }
    .s10__q[aria-expanded="true"] .s10__icon { transform:rotate(45deg); }
    .s10__a { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.22,1,.36,1),padding .3s; }
    .s10__a.open { max-height:300px; padding-bottom:24px; }
    .s10__a p { font-family:'Raleway',sans-serif; font-size:clamp(.88rem,1.3vw,1rem); font-weight:300; color: var(--text-secondary); line-height:1.9; max-width:780px; transition: color 0.55s; }

    /* ══ FOOTER ══ */
/*    .footer { background: var(--footer-bg); width:100vw; padding:0 9vw; border-top:1px solid var(--border-light); transition: background 0.55s, border-color 0.55s; }
    .footer__top { display:flex; align-items:flex-start; justify-content:space-between; padding:64px 0 56px; gap:40px; flex-wrap:wrap; border-bottom:1px solid var(--border-light); transition: border-color 0.55s; }
    .footer__brand { display:flex; flex-direction:column; gap:14px; }
    .footer__logo-box { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }
    .footer__logo-img { width:100%; height:auto; object-fit:contain; filter: var(--logo-filter); transition: filter 0.55s; }
    .footer__brand-name { font-family:'Raleway',sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.25em; color: var(--text-primary); transition: color 0.55s; }
    .footer__featured { display:flex; flex-direction:column; gap:10px; }
    .footer__featured-tag { display:inline-block; font-family:'Raleway',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color: var(--text-primary); background: var(--text-faint); border:1px solid var(--border-light); padding:6px 14px; width:fit-content; transition: all 0.55s; }
    .footer__featured-imgbox { position:relative; width:clamp(280px,42vw,620px); height:clamp(120px,18vh,220px); background: var(--footer-featured-bg); border-radius:8px; overflow:hidden; display:flex; align-items:flex-end; transition: background 0.55s; }
    .footer__featured-bigimg { position:absolute; bottom:0; right:0; height:135%; width:auto; max-width:65%; object-fit:contain; object-position:right bottom; display:block; filter:drop-shadow(-12px 0 28px rgba(0,0,0,.55)); transition:transform .4s ease; }
    .footer__featured-imgbox:hover .footer__featured-bigimg { transform:scale(1.04) translateY(-4px); }
    .footer__featured-imgbox-label { position:relative; z-index:2; padding:20px 24px; }
    .footer__featured-card-label { font-family:'Raleway',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.32em; color: var(--text-muted); margin-bottom:5px; text-transform:uppercase; transition: color 0.55s; }
    .footer__featured-card-sub   { font-family:'Raleway',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.18em; color: var(--text-primary); text-transform:uppercase; transition: color 0.55s; }
    .footer__featured-imgbox::after { content:''; position:absolute; right:0; bottom:0; width:55%; height:100%; background:radial-gradient(ellipse at 80% 100%,rgba(124,58,237,.28) 0%,transparent 65%); pointer-events:none; z-index:1; }
    .footer__links { display:grid; grid-template-columns:repeat(4,1fr); gap:40px 32px; padding:56px 0; border-bottom:1px solid var(--border-light); transition: border-color 0.55s; }
    .footer__col-head { font-family:'Raleway',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.38em; text-transform:uppercase; color: var(--text-secondary); margin-bottom:18px; transition: color 0.55s; }
    .footer__col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
    .footer__col ul a { font-family:'Raleway',sans-serif; font-size:.88rem; font-weight:300; color: var(--text-muted); text-decoration:none; transition:color .2s; }
    .footer__col ul a:hover { color: var(--text-primary); }
    .footer__bottom { display:flex; align-items:center; justify-content:space-between; padding:24px 0 32px; gap:20px; flex-wrap:wrap; }
    .footer__copy { font-family:'Raleway',sans-serif; font-size:.72rem; font-weight:300; color: var(--text-muted); transition: color 0.55s; }
    .footer__bottom-links { display:flex; gap:28px; }
    .footer__bottom-links a { font-family:'Raleway',sans-serif; font-size:.72rem; font-weight:400; color: var(--text-muted); text-decoration:none; transition:color .2s; }
    .footer__bottom-links a:hover { color: var(--text-primary); }
*/
    /* ══════════════════════════════════════════════════
       RESPONSIVE
       ══════════════════════════════════════════════════ */
    @media (max-width:900px) {
      .cred4-track { height:auto; }
      .cred4 { position:relative; top:auto; height:auto; grid-template-columns:1fr; min-height:auto; }
      /*.cred4__body-stack { display:block; max-width:100%; }
      .cred4__body { display:block; opacity:1; visibility:visible; transform:none; pointer-events:auto; max-width:100%; }
      .cred4__body + .cred4__body { margin-top:14px; }*/
      .cred4__scroll-dots { display:none; }
      .cred4__text { padding:56px 6vw 32px; }
      .cred4__media { position:relative; height:260px; min-height:260px; max-height:260px; }
      .cred4__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
      .s8__inner { flex-direction:column; gap:40px; }
      .s8__right  { gap:36px; }
      .s9 { grid-template-columns:1fr; min-height:auto; }
      .s9__map-col { height:280px; min-height:280px; max-height:280px; }
      .s9__map-mask { position:relative; width:100%; height:100%; }
      .s9__map-iframe { position:absolute; inset:0; width:100%; height:100%; }
      .s9__form-col { min-height:auto; }
      .s9__form-mask { position:relative; height:auto; }
      .s9__form-inner { position:relative; inset:auto; padding:48px 6vw 48px; overflow-y:visible; }
      .s9__row    { grid-template-columns:1fr; }
      .s9__map-badge { bottom:16px; left:16px; padding:10px 14px; }
      .footer__top  { flex-direction:column; align-items:flex-start; padding:48px 0 40px; }
      .footer__featured { max-width:100%; }
      .footer__featured-imgbox { width:100%; }
      .footer__links { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width:768px) {
      .hero { height:38vh; min-height:240px; max-height:380px; }
      .hero__video--mobile { display:block; }
      .hero__video--desktop { display:none; }
      .topbar { padding:16px 16px 0; }
      .logo-img-box { height:36px; }
      .menu-btn { width:42px; height:42px; }
      .hero__bottom-content { padding:0 16px 22px; }
      .hero__title { font-size:clamp(1.6rem,7.5vw,2.6rem); }
  .reveal-gap { height:0; margin:0; padding:0; display:none; }
.cr-track { margin-bottom:0; height:220vh !important; }
.cr-sticky {
  height:100vh !important; height:100svh !important; min-height:0;
  padding:clamp(22px,3vh,34px) 4.5vw clamp(18px,2.4vh,28px);
  justify-content:center;
}
.cr-eyebrow { margin-bottom:11px; font-size:.59rem; letter-spacing:.32em; }
.cr-copy {
  gap:0;
  --cr-tight-gap:clamp(2px,.38vh,4px);
  --cr-group-gap:clamp(14px,2vh,22px);
}
/* Mobile keeps the SAME grouping rhythm as the screenshot. Long sentences can
   wrap naturally, but lines inside one thought remain close together. */
.cr-line { line-height:1.13; white-space:normal; margin-bottom:var(--cr-tight-gap); }
.cr-line--ghost { line-height:1.13; }
.cr-line--1, .cr-line--2, .cr-line--4, .cr-line--6, .cr-line--8 { margin-bottom:var(--cr-group-gap); }
.cr-line--11 { margin-bottom:0; }
.cr-line--1  { --cr-font-size:clamp(1.32rem,5.85vw,2.08rem); }
.cr-line--2  { --cr-font-size:clamp(1.4rem,6.35vw,2.23rem); }
.cr-line--3  { --cr-font-size:clamp(1.26rem,5.55vw,1.98rem); }
.cr-line--4  { --cr-font-size:clamp(1.54rem,7.15vw,2.45rem); }
.cr-line--5  { --cr-font-size:clamp(1.12rem,4.95vw,1.78rem); }
.cr-line--6  { --cr-font-size:clamp(1.12rem,4.95vw,1.78rem); }
.cr-line--7  { --cr-font-size:clamp(1.5rem,6.95vw,2.4rem); }
.cr-line--8  { --cr-font-size:clamp(1.33rem,6.05vw,2.08rem); }
.cr-line--9  { --cr-font-size:clamp(1.5rem,6.95vw,2.4rem); }
.cr-line--10 { --cr-font-size:clamp(1.38rem,6.45vw,2.18rem); }
.cr-line--11 { --cr-font-size:clamp(1.38rem,6.45vw,2.18rem); }
      .cred3 { display:flex; flex-direction:column; margin-bottom:0; }
      .cred3__text-block { min-height:0!important; }
      .cred3__video-block { order:1; height:260px; min-height:260px; max-height:260px; margin-bottom:0; }
      #cred3VideoBlock { opacity:1!important; transform:none!important; transition:none!important; }
      .cred3__text-block { order:2; padding:28px 0 32px; min-height:0!important; }
      .cred3__headline-wrap { margin-bottom:16px; }
      .cred3__line { font-size:clamp(2.2rem,9.5vw,3.8rem); }
      .cred3__inner { padding:0 5vw; }
      .cred3__body { font-size:clamp(.95rem,3.8vw,1.08rem); line-height:1.85; }
      .cred4 { display:flex; flex-direction:column; min-height:auto; }
      .cred4__media { order:1; width:100%; height:210px; min-height:210px; max-height:210px; opacity:1!important; transform:none!important; transition:none!important; }
      .cred4__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
      .cred4__text { order:2; padding:28px 5vw 20px; opacity:1!important; transform:none!important; transition:none!important; }
      .cred4__title { font-size:clamp(1.9rem,8vw,3rem); margin-bottom:14px; }
      .cred4__body { font-size:clamp(.84rem,3.5vw,.96rem); }
      .cred4__media-fade { background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,rgba(0,0,0,.1) 60%,transparent 100%); }
      .hs-track { height:500vh; }
      .hs-title-row { padding:0 5vw; margin-bottom:18px; }
      .hs-title__line { font-size:clamp(1.9rem,8vw,3.2rem); }
      .hs-rail { padding:0 5vw; gap:12px; }
   .hs-card { width:82vw; height:122vw; min-width:280px; max-width:360px; min-height:320px; max-height:420px; padding:22px 20px 0; border-radius:10px; }
.hs-card__label { font-size:.68rem; margin-bottom:16px; }
.hs-card__headline { font-size:1.85rem; margin-bottom:16px; }
.hs-card__cta { padding:12px 18px; font-size:.64rem; } .hs-dots { padding:10px 5vw 0; }
      .s6__video-wrap { position:absolute; top:0; left:0; right:0; height:44vh; z-index:0; opacity:0; transform:scale(1.06); transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1); }
      .s6__video-wrap.s6-mob-in { opacity:1; transform:scale(1); }
      .s6__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
      .s6__overlay { position:absolute; top:0; left:0; right:0; height:44vh; }
      .s6__bottom-scrim { position:absolute; top:38vh; bottom:auto; left:0; right:0; height:10vh; background:linear-gradient(to bottom,transparent 0%,var(--bg) 100%); z-index:2; }
      .s6__panels { position:absolute; top:44vh; left:0; right:0; bottom:0; padding:3vh 5vw 2vh; align-items:flex-start; }
      .s6__panel { left:5vw; right:5vw; }
      .s6__panel-inner { gap:8px; }
      .s6__line { font-size:clamp(1.7rem,7.5vw,2.8rem); }
      .s6__body { font-size:clamp(.82rem,3.5vw,.96rem); }
      .s6__tag { font-size:.52rem; letter-spacing:.32em; }
      .s7 { padding:44px 5vw 48px; margin-bottom:0; }
      .s7__icon-wrap { margin-bottom:22px; }
      .s7__label { font-size:.52rem; letter-spacing:.26em; margin-bottom:28px; }
      .s7__para { font-size:clamp(1.5rem,6.5vw,2.2rem); line-height:1.25; }
      .s8 { padding:44px 5vw 48px; margin-bottom:0; }
      .s8__headline { font-size:clamp(2.2rem,9vw,3.6rem); }
      .s8__right { flex-direction:column; gap:24px; }
      .s9__map-col { height:240px; min-height:240px; max-height:240px; }
      .s9__form-inner { padding:32px 5vw 36px; }
      .s9__headline { font-size:clamp(1.8rem,7vw,2.6rem); }
      .s9__btn { width:100%; align-self:stretch; text-align:center; justify-content:center; }
      .s10 { padding:0 0 44px; }
      .s10__header { padding:20px 5vw; gap:10px; }
      .s10__body { padding:0 5vw; }
      .s10__q { padding:14px 0; font-size:.92rem; }
      .footer { padding:0 5vw; }
      .footer__top { padding:36px 0 28px; gap:18px; }
      .footer__links { grid-template-columns:1fr 1fr; gap:22px 14px; padding:28px 0; }
      .footer__bottom { padding:14px 0 20px; }
      .footer__featured-imgbox { height:130px; min-height:130px; }
      .cred3 { margin-bottom:0; }
      .cred4 { margin-bottom:0; }
      .s7 { margin-bottom:0; }
      .s8 { margin-bottom:0; }
    }
    @media (max-width:480px) {
      .hero { height:34vh; min-height:210px; max-height:320px; }
      .topbar { padding:12px 12px 0; }
      .hero__bottom-content { padding:0 12px 20px; }
      .hero__title { font-size:clamp(1.5rem,7.5vw,2.2rem); }
      .cr-track { height:205vh !important; }
      .cr-sticky { padding:clamp(18px,2.7vh,28px) 4.5vw clamp(16px,2.2vh,24px); }
      .cr-copy { gap:0; --cr-tight-gap:2px; --cr-group-gap:clamp(12px,1.75vh,18px); }
      .cr-line { line-height:1.14; white-space:normal; margin-bottom:var(--cr-tight-gap); }
      .cr-line--1, .cr-line--2, .cr-line--4, .cr-line--6, .cr-line--8 { margin-bottom:var(--cr-group-gap); }
      .cr-line--11 { margin-bottom:0; }
      .cr-line--1  { --cr-font-size:clamp(1.16rem,5.7vw,1.62rem); }
      .cr-line--2  { --cr-font-size:clamp(1.24rem,6.15vw,1.78rem); }
      .cr-line--3  { --cr-font-size:clamp(1.1rem,5.4vw,1.58rem); }
      .cr-line--4  { --cr-font-size:clamp(1.39rem,6.9vw,2rem); }
      .cr-line--5  { --cr-font-size:clamp(1.03rem,4.85vw,1.42rem); }
      .cr-line--6  { --cr-font-size:clamp(1.03rem,4.85vw,1.42rem); }
      .cr-line--7  { --cr-font-size:clamp(1.37rem,6.75vw,1.95rem); }
      .cr-line--8  { --cr-font-size:clamp(1.18rem,5.85vw,1.68rem); }
      .cr-line--9  { --cr-font-size:clamp(1.37rem,6.75vw,1.95rem); }
      .cr-line--10 { --cr-font-size:clamp(1.26rem,6.25vw,1.78rem); }
      .cr-line--11 { --cr-font-size:clamp(1.26rem,6.25vw,1.78rem); }
      .cred3__video-block { height:220px; min-height:220px; max-height:220px; }
      .cred3__line { font-size:clamp(2rem,9vw,3rem); }
      .cred3__text-block { padding:22px 0 26px; }
      .cred4__media { height:185px; min-height:185px; max-height:185px; }
      .s6__video-wrap { height:38vh; }
      .s6__overlay { height:38vh; }
      .s6__bottom-scrim { top:32vh; }
      .s6__panels { top:38vh; }
      .s6__line { font-size:clamp(1.5rem,7.2vw,2.2rem); }
      .hs-card { width:232px; height:360px; min-width:232px; max-width:232px; }
      .hs-card__headline { font-size:1.3rem; }
      .s7 { padding:40px 5vw 44px; }
      .s7__para { font-size:clamp(1.3rem,6.2vw,1.8rem); }
      .s8 { padding:40px 5vw 44px; }
      .s8__headline { font-size:clamp(1.9rem,8.5vw,2.8rem); }
      .s9__map-col { height:200px; min-height:200px; max-height:200px; }
      .s9__form-inner { padding:24px 5vw 28px; }
      .s9__headline { font-size:clamp(1.6rem,6.5vw,2rem); }
      .footer { padding:0 5vw; }
      .footer__links { grid-template-columns:1fr; }
      .footer__featured-imgbox { height:110px; min-height:110px; }
      .footer__bottom { flex-direction:column; align-items:flex-start; gap:10px; }
      .footer__bottom-links { gap:14px; flex-wrap:wrap; }
    }
  /* Section 6 — responsive video switching */
/*@media (min-width: 769px) {
  .s6__video--mobile { display: none !important; }
}
@media (max-width: 768px) {
  .s6__video--desktop { display: none !important; }
  .s6__video--mobile  { display: block !important; }
  .s6__video-wrap { position:absolute; top:0; left:0; right:0; height:44vh; z-index:0; opacity:0; transform:scale(1.06); transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1); }
.s6__video-wrap.s6-mob-in { opacity:1; transform:scale(1); }
.s6__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.s6__overlay { position:absolute; top:0; left:0; right:0; height:44vh; }
.s6__bottom-scrim { position:absolute; top:38vh; bottom:auto; left:0; right:0; height:10vh; background:linear-gradient(to bottom,transparent 0%,var(--bg) 100%); z-index:2; }
.s6__panels { position:absolute; top:44vh; left:0; right:0; bottom:0; padding:3vh 5vw 2vh; align-items:flex-start; }
.s6__panel { left:5vw; right:5vw; }
.s6__panel-inner { gap:8px; }
.s6__line { font-size:clamp(1.7rem,7.5vw,2.8rem); }
.s6__body { font-size:clamp(.82rem,3.5vw,.96rem); }
.s6__tag { font-size:.52rem; letter-spacing:.32em; }
}*/

@media (max-width:768px){

    .s6__video--desktop{
        display:none !important;
    }

    .s6__video--mobile{
        display:block !important;
        width:100% !important;
        height:100% !important;
        opacity:1 !important;
        visibility:visible !important;
    }

    .s6__video-wrap{
        position:absolute !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;
        height:44vh !important;

        display:block !important;
        overflow:hidden !important;

        z-index:0 !important;

        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;
    }

    .s6__video{
        position:absolute !important;
        inset:0 !important;

        width:100% !important;
        height:100% !important;

        display:block !important;

        object-fit:cover !important;

        opacity:1 !important;
        visibility:visible !important;
    }

    .s6__overlay{
        position:absolute !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;
        height:44vh !important;

        z-index:1 !important;
    }

    .s6__bottom-scrim{
        position:absolute !important;

        top:38vh !important;
        bottom:auto !important;

        left:0 !important;
        right:0 !important;

        height:10vh !important;

        z-index:2 !important;
    }

    .s6__panels{
        position:absolute !important;

        top:44vh !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;

        z-index:3 !important;

        padding:3vh 5vw 2vh !important;

        align-items:flex-start !important;
    }

}
/* ══ SECTION 9 MOBILE — COMPLETE FIX ══ */

@media (max-width: 900px) {
  .s9 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: auto !important;
    grid-template-columns: unset !important;
    overflow: hidden;
  }

  .s9__map-col {
    position: relative !important;
    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }

  .s9__map-mask {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    clip-path: none !important;
    transform: none !important;
    inset: 0 !important;
  }

  /* THE KEY FIX — image fills container without stretching */
  .s9__map-iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    display: block !important;
    border: none !important;
  }

  .s9__map-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
  }

  .s9__map-badge {
    position: absolute !important;
    bottom: 14px !important;
    left: 14px !important;
    right: auto !important;
    z-index: 4 !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  .s9__form-col {
    width: 100% !important;
    position: relative !important;
    min-height: auto !important;
    background: var(--s9-form-bg);
  }

  .s9__form-mask {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    clip-path: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  .s9__form-inner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    padding: 44px 6vw 48px !important;
    overflow-y: visible !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .s9__row {
    grid-template-columns: 1fr !important;
  }

  .s9__btn {
    width: 100% !important;
    align-self: stretch !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
 .s9__map-col {
    height: 306px !important;
    min-height: 311px !important;
    max-height: 310px !important;
}

  .s9__map-iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .s9__map-mask {
    position: absolute !important;
    inset: 0 !important;
    clip-path: none !important;
    transform: none !important;
  }

  .s9__map-badge {
    bottom: 12px !important;
    left: 12px !important;
    padding: 8px 12px !important;
  }

  .s9__badge-name { font-size: .76rem !important; }
  .s9__badge-loc  { font-size: .62rem !important; }

  .s9__form-inner {
    padding: 32px 5vw 36px !important;
  }

  .s9__headline {
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
  }
}

@media (max-width: 480px) {
 .s9__map-col {
    height: 256px !important;
    min-height: 291px !important;
    max-height: 210px !important;
}

  .s9__map-iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .s9__form-inner {
    padding: 26px 5vw 30px !important;
  }

  .s9__headline {
    font-size: clamp(1.6rem, 6.5vw, 2rem) !important;
  }
}

/* SECTION 2 v6 — reference-image text only */
@media (max-width:768px) {
  .cr-line--8  { --cr-font-size:clamp(1.32rem,5.5vw,2.2rem); }
  .cr-line--10 { --cr-font-size:clamp(1.28rem,5.25vw,2.1rem); }
}
@media (max-width:480px) {
  .cr-line--8  { --cr-font-size:clamp(1.18rem,5.1vw,1.85rem); }
  .cr-line--10 { --cr-font-size:clamp(1.14rem,4.9vw,1.78rem); }
}

/* ═════════════════════════════════════════════════════════════════════
   RETINA MAC DESKTOP NORMALIZATION
   ---------------------------------------------------------------------
   The existing Windows / normal-laptop layout is NOT changed.
   Home.php/Home.js add .kone-mac-retina only on a Retina Mac desktop.
   The compensation mainly removes max-size caps that make the same UI
   look physically smaller on dense MacBook displays.
   ═════════════════════════════════════════════════════════════════════ */

@media (min-width:1024px) {
  html.kone-mac-retina {
    /* Slightly larger rem baseline for labels, body copy and capped headings. */
    font-size:17px;
  }

  /* HERO */
  html.kone-mac-retina .hero__title {
    font-size:clamp(2.7rem,6.25vw,6.1rem);
  }
  html.kone-mac-retina .hero__bottom-content {
    padding-bottom:clamp(72px,7.6vh,96px);
  }

  /* SECTION 2 — keep the same exact line layout, only normalize physical size. */
  html.kone-mac-retina .cr-sticky {
    padding-top:clamp(32px,4.3vh,52px);
    padding-left:4.2vw;
    padding-right:4.2vw;
  }
  html.kone-mac-retina .cr-copy {
    --cr-tight-gap:clamp(2px,.26vh,4px);
    --cr-group-gap:clamp(21px,2.65vh,34px);
  }
  html.kone-mac-retina .cr-line {
    line-height:1.12;
  }
  html.kone-mac-retina .cr-line--1  { --cr-font-size:clamp(2.32rem,min(4.02vw,5.92vh),4.75rem); }
  html.kone-mac-retina .cr-line--2  { --cr-font-size:clamp(2.42rem,min(4.50vw,6.22vh),5.25rem); }
  html.kone-mac-retina .cr-line--3  { --cr-font-size:clamp(2.22rem,min(3.84vw,5.58vh),4.55rem); }
  html.kone-mac-retina .cr-line--4  { --cr-font-size:clamp(2.55rem,min(5.25vw,6.42vh),5.95rem); }
  html.kone-mac-retina .cr-line--5  { --cr-font-size:clamp(1.95rem,min(3.12vw,4.82vh),3.72rem); }
  html.kone-mac-retina .cr-line--6  { --cr-font-size:clamp(1.95rem,min(3.08vw,4.78vh),3.68rem); }
  html.kone-mac-retina .cr-line--7  { --cr-font-size:clamp(2.55rem,min(5.15vw,6.32vh),5.85rem); }
  html.kone-mac-retina .cr-line--8  { --cr-font-size:clamp(2.08rem,min(3.50vw,5.22vh),4.18rem); }
  html.kone-mac-retina .cr-line--9  { --cr-font-size:clamp(2.55rem,min(5.35vw,6.38vh),6.05rem); }
  html.kone-mac-retina .cr-line--10 { --cr-font-size:clamp(2.12rem,min(3.62vw,5.32vh),4.35rem); }

  /* SECTION 3 (kept safe even if enabled again later) */
  html.kone-mac-retina .cred3__inner {
    max-width:1320px;
  }
  html.kone-mac-retina .cred3__line {
    font-size:clamp(3.2rem,8.5vw,10rem);
  }
  html.kone-mac-retina .cred3__body {
    font-size:clamp(1rem,1.55vw,1.28rem);
  }

  /* SECTION 4 */
  html.kone-mac-retina .cred4__title {
    font-size:clamp(2.9rem,5.65vw,6.8rem);
  }
  html.kone-mac-retina .cred4__body {
    font-size:clamp(.98rem,1.38vw,1.16rem);
    max-width:510px;
  }

  /* SECTION 5 */
  html.kone-mac-retina .hs-title__line {
    font-size:clamp(3.3rem,7.6vw,8.8rem);
  }
  html.kone-mac-retina .hs-card {
    width:clamp(310px,28vw,410px);
    max-width:410px;
    padding:30px 30px 0;
  }
  html.kone-mac-retina .hs-card__headline {
    font-size:clamp(2rem,3vw,2.85rem);
  }
  html.kone-mac-retina .hs-card__label {
    font-size:.66rem;
  }
  html.kone-mac-retina .hs-card__cta {
    font-size:.69rem;
    padding:14px 23px;
  }

  /* SECTION 6 */
  html.kone-mac-retina .s6__panel-inner {
    max-width:930px;
  }
  html.kone-mac-retina .s6__line {
    font-size:clamp(3.35rem,8vw,9.55rem);
  }
  html.kone-mac-retina .s6__body {
    font-size:clamp(.98rem,1.5vw,1.2rem);
  }
  html.kone-mac-retina .s6__tag {
    font-size:.66rem;
  }

  /* SECTION 7 */
  html.kone-mac-retina .s7__para {
    max-width:1260px;
    font-size:clamp(2.25rem,5.25vw,6.55rem);
  }
  html.kone-mac-retina .s7__label {
    font-size:.66rem;
  }

  /* SECTION 8 */
  html.kone-mac-retina .s8__inner {
    max-width:1320px;
  }
  html.kone-mac-retina .s8__headline {
    font-size:clamp(3.35rem,6vw,7.45rem);
  }
  html.kone-mac-retina .s8__num {
    font-size:clamp(3.8rem,6vw,6.6rem);
  }
  html.kone-mac-retina .s8__eyebrow,
  html.kone-mac-retina .s8__store-label {
    font-size:.69rem;
  }

  /* SECTION 9 */
  html.kone-mac-retina .s9__headline {
    font-size:clamp(2.65rem,4.1vw,5.2rem);
  }
  html.kone-mac-retina .s9__sub {
    font-size:clamp(.94rem,1.2vw,1.05rem);
  }
  html.kone-mac-retina .s9__input {
    font-size:.95rem;
    padding:13px 15px;
  }
  html.kone-mac-retina .s9__label,
  html.kone-mac-retina .s9__eyebrow {
    font-size:.61rem;
  }
  html.kone-mac-retina .s9__btn {
    font-size:.69rem;
    padding:16px 34px;
  }
  html.kone-mac-retina .s9__map-badge {
    padding:15px 21px;
  }

  /* SECTION 10 */
  html.kone-mac-retina .s10__title {
    font-size:clamp(1.2rem,2vw,1.65rem);
  }
  html.kone-mac-retina .s10__q {
    font-size:clamp(1rem,1.5vw,1.2rem);
  }
  html.kone-mac-retina .s10__a p {
    font-size:clamp(.94rem,1.3vw,1.08rem);
    max-width:860px;
  }
}

/* 14"/16" MacBook "More Space" logical desktop modes need a little more
   compensation because their CSS viewport is wider while the physical panel
   remains compact. */
@media (min-width:1400px) and (min-height:800px) {
  html.kone-mac-retina {
    font-size:17.5px;
  }
}

@media (min-width:1650px) and (min-height:900px) {
  html.kone-mac-retina {
    font-size:18px;
  }

  html.kone-mac-retina .hs-card {
    max-width:425px;
    width:clamp(320px,27vw,425px);
  }

  html.kone-mac-retina .s6__panel-inner {
    max-width:970px;
  }

  html.kone-mac-retina .s7__para,
  html.kone-mac-retina .s8__inner {
    max-width:1360px;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   FINAL LARGE-DESKTOP / 16-INCH NORMALIZATION
   ---------------------------------------------------------------------
   Keeps the composition visually close to the normal laptop layout on
   1600px+ / 16-inch / wide Retina screens. No body zoom is used.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:1500px) and (min-height:780px) and (hover:hover) and (pointer:fine) {
  /* Do not enlarge the whole typographic scale just because the panel is Retina. */
  html.kone-mac-retina { font-size:16px; }

  .hero__title,
  html.kone-mac-retina .hero__title {
    font-size:clamp(3rem,min(5.4vw,9.2vh),5.7rem);
    max-width:1500px;
  }

  /* Section 2: preserve the same number of lines and keep it inside the viewport. */
  .cr-sticky,
  html.kone-mac-retina .cr-sticky {
    padding-left:clamp(56px,4.2vw,82px);
    padding-right:clamp(56px,4.2vw,82px);
  }

  /* Section 3 */
  .cred3__inner,
  html.kone-mac-retina .cred3__inner { max-width:1240px; }
  .cred3__line,
  html.kone-mac-retina .cred3__line {
    font-size:clamp(3.2rem,min(7vw,12vh),7.6rem);
  }

  /* Section 4 */
  .cred4__text { padding-left:clamp(80px,7vw,120px); padding-right:clamp(56px,5vw,90px); }
  .cred4__title,
  html.kone-mac-retina .cred4__title {
    font-size:clamp(2.8rem,min(4.8vw,8.8vh),5.4rem);
  }
  /*.cred4__body,
  html.kone-mac-retina .cred4__body {
    font-size:clamp(.94rem,1vw,1.05rem);
    max-width:500px;
  }*/

  /* Section 5 */
  .hs-title__line,
  html.kone-mac-retina .hs-title__line {
    font-size:clamp(3.3rem,min(6.35vw,12.2vh),7rem);
  }
  .hs-card,
  html.kone-mac-retina .hs-card {
    width:clamp(300px,23.5vw,370px);
    max-width:370px;
    height:clamp(420px,55vh,535px);
    padding:28px 28px 0;
  }
  .hs-card__headline,
  html.kone-mac-retina .hs-card__headline {
    font-size:clamp(1.85rem,min(2.45vw,4.4vh),2.55rem);
  }

  /* Section 6 */
  .s6__panel-inner,
  html.kone-mac-retina .s6__panel-inner { max-width:880px; }
  .s6__line,
  html.kone-mac-retina .s6__line {
    font-size:clamp(3.2rem,min(6.8vw,12vh),7.8rem);
  }
  .s6__body,
  html.kone-mac-retina .s6__body { font-size:clamp(.95rem,1.1vw,1.08rem); }

  /* Section 7 */
  .s7__para,
  html.kone-mac-retina .s7__para {
    max-width:1180px;
    font-size:clamp(2.25rem,min(4.65vw,8.3vh),5.45rem);
  }

  /* Section 8 */
  .s8__inner,
  html.kone-mac-retina .s8__inner { max-width:1240px; }
  .s8__headline,
  html.kone-mac-retina .s8__headline {
    font-size:clamp(3.2rem,min(5.25vw,9.3vh),6rem);
  }
  .s8__num,
  html.kone-mac-retina .s8__num {
    font-size:clamp(3.5rem,min(5.2vw,9vh),5.8rem);
  }

  /* Section 9 */
  .s9__headline,
  html.kone-mac-retina .s9__headline {
    font-size:clamp(2.6rem,min(3.65vw,6.8vh),4.4rem);
  }
  .s9__sub,
  html.kone-mac-retina .s9__sub { font-size:clamp(.92rem,1vw,1rem); }
  .s9__input,
  html.kone-mac-retina .s9__input { font-size:.9rem; padding:12px 14px; }

  /* Section 10 */
  .s10__title,
  html.kone-mac-retina .s10__title { font-size:clamp(1.1rem,1.45vw,1.45rem); }
  .s10__q,
  html.kone-mac-retina .s10__q { font-size:clamp(.95rem,1.05vw,1.08rem); }
}

/* Extra-wide desktop: grow whitespace, not typography. */
@media (min-width:1800px) and (min-height:900px) and (hover:hover) and (pointer:fine) {
  .hs-title-row, .hs-rail, .hs-dots { padding-left:max(8vw,120px); padding-right:max(8vw,120px); }
  .s6__panels { padding-left:max(9vw,145px); padding-right:max(9vw,145px); }
  .s6__panel { left:max(9vw,145px); right:max(9vw,145px); }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — SLOWER / LONGER SCROLL RUNWAY
   ---------------------------------------------------------------------
   Home.js maps word reveal progress to the available .cr-track runway.
   A taller track therefore makes the exact same reveal animation slower.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {
  /*
     More real scrolling distance per custom word step.
     This keeps native scrolling fluid while making each highlight easier
     to see instead of changing too quickly.
  */
  .cr-track { height:1680vh !important; }
}

@media (min-width:1200px) and (min-height:700px) {
  .cr-track { height:1840vh !important; }
}

@media (min-width:1600px) and (min-height:800px) {
  .cr-track { height:1960vh !important; }
}

/* Keep touch/mobile comfortable rather than forcing a 5-screen desktop scroll. */
@media (max-width:768px) {
  .cr-track { height:270vh !important; }
}

@media (max-width:480px) {
  .cr-track { height:245vh !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   LARGE DESKTOP — AUTOMATIC 105% VIEW
   ---------------------------------------------------------------------
   The JS adds .kone-large-screen-105 only when the usable desktop
   viewport is genuinely large. CSS zoom gives Chrome/Edge/Safari the
   closest page-level result to selecting 105% browser zoom while keeping
   the user's browser setting untouched. Normal laptops/mobile are unchanged.
   ═════════════════════════════════════════════════════════════════════ */
html.kone-large-screen-105 {
  zoom:1.05;
}

/* Firefox fallback: Firefox may ignore CSS zoom on some versions.
   Do not use transform scaling here because it breaks 100vw/sticky layouts. */
@supports not (zoom: 1.05) {
  html.kone-large-screen-105 {
    font-size:16.8px;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — DIM → HIGHLIGHT → HOLD → DIM OUT
   ---------------------------------------------------------------------
   Every sentence approaches the centre as a muted preview, becomes the
   bright readable focus, holds there for extra scroll distance, then dims
   again while leaving above. The next sentence rises from below at the same
   time. This creates one continuous, symmetrical reading flow.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {
  .cr-copy {
    min-height:calc(100vh - clamp(50px,6.6vh,80px));
  }

  .cr-copy.cr-copy--sequence {
    position:relative;
    display:block;
    flex:1 1 auto;
    height:100%;
    min-height:0;
    overflow:visible;
  }

  /* Soft masks at BOTH sides. Multiple completed lines now remain visible
     above the centre just like upcoming lines below it; distance-based opacity
     plus these edge masks makes the farthest top/bottom lines disappear softly. */
  .cr-copy.cr-copy--sequence::before,
  .cr-copy.cr-copy--sequence::after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    height:20vh;
    z-index:4;
    pointer-events:none;
  }
  .cr-copy.cr-copy--sequence::before {
    top:-2px;
    height:24vh;
    background:linear-gradient(to bottom,var(--bg) 2%,color-mix(in srgb,var(--bg) 72%,transparent) 34%,transparent 100%);
    opacity:.78;
  }
  .cr-copy.cr-copy--sequence::after {
    bottom:-2px;
    height:24vh;
    background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--bg) 72%,transparent) 66%,var(--bg) 98%);
    opacity:.78;
  }


  @supports not (background:color-mix(in srgb,#000 50%,transparent)) {
    .cr-copy.cr-copy--sequence::before {
      background:linear-gradient(to bottom,var(--bg) 4%,transparent 100%);
    }
    .cr-copy.cr-copy--sequence::after {
      background:linear-gradient(to bottom,transparent 0%,var(--bg) 96%);
    }
  }

  .cr-copy.cr-copy--sequence .cr-line {
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    margin:0;
    opacity:var(--cr-seq-opacity,0);
    transform:translate3d(0,calc(-50% + var(--cr-seq-y,0px)),0);
    filter:saturate(var(--cr-seq-saturate,1)) brightness(var(--cr-seq-brightness,1));
    transition:none;
    will-change:opacity,transform,filter;
    pointer-events:none;
  }

  .cr-copy.cr-copy--sequence .cr-line.cr-line--active {
    z-index:3;
  }

  .cr-copy.cr-copy--sequence .cr-line.cr-line--past {
    z-index:1;
  }

  .cr-copy.cr-copy--sequence .cr-line.cr-line--future {
    z-index:2;
  }

  .cr-copy.cr-copy--sequence .cr-line.cr-line--future .cw,
  .cr-copy.cr-copy--sequence .cr-line.cr-line--past .cw {
    text-shadow:0 0 18px rgba(167,139,250,.03);
  }

  /* Portfolio / Power / you receive a stronger focus only when they are
     actually lit in the centred active sentence. */
  .cr-copy.cr-copy--sequence .cr-line.cr-line--active .cw.cr-keyword.lit,
  .cr-copy.cr-copy--auto-final .cw.cr-keyword.lit {
    color:var(--purple-light)!important;
    text-shadow:0 0 10px rgba(167,139,250,.32),0 0 24px rgba(124,58,237,.20);
  }

  /* Final stage restores the original stacked design. */
  .cr-copy.cr-copy--auto-final {
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .cr-copy.cr-copy--auto-final .cr-line {
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    opacity:var(--cr-final-progress,0);
    transform:translateY(var(--cr-final-y,30px));
    filter:none;
    transition:none;
  }

  .cr-copy.cr-copy--auto-final .cr-line.cr-line--1,
  .cr-copy.cr-copy--auto-final .cr-line.cr-line--2,
  .cr-copy.cr-copy--auto-final .cr-line.cr-line--4,
  .cr-copy.cr-copy--auto-final .cr-line.cr-line--6,
  .cr-copy.cr-copy--auto-final .cr-line.cr-line--8 {
    margin-bottom:var(--cr-group-gap);
  }

  .cr-copy.cr-copy--auto-final .cr-line:not(.cr-line--1):not(.cr-line--2):not(.cr-line--4):not(.cr-line--6):not(.cr-line--8):not(.cr-line--10) {
    margin-bottom:var(--cr-tight-gap);
  }

  .cr-copy.cr-copy--auto-final .cr-line.cr-line--10 {
    margin-bottom:0;
  }
}

/* Touch layouts keep the existing readable stacked composition. */
@media (max-width:768px) {
  .cr-copy.cr-copy--sequence,
  .cr-copy.cr-copy--auto-final {
    display:flex;
    flex-direction:column;
  }
  .cr-copy .cr-line {
    position:relative!important;
    top:auto!important;
    left:auto!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — FINAL FADE / DELAYED MAIN WORDS / DROP + GLITTER
   ---------------------------------------------------------------------
   After the scroll-led story ends, JS reserves exactly ONE viewport scroll.
   The final composition then plays automatically:
   all lines fade in → selected supporting words drop smoothly into place →
   main words wait 2 seconds → main words fade in with glitter → settle.
   Stars are absolutely positioned, so they add NO top/bottom layout space.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {
  .cr-copy.cr-copy--auto-final {
    position:relative;
    display:flex;
    flex-direction:column;
    gap:0;
    overflow:visible;
    isolation:isolate;
    margin-block:0;
    padding-block:0;
    --cr-tight-gap:clamp(1px,.22vh,3px);
    --cr-group-gap:clamp(12px,1.65vh,22px);
  }

  .cr-copy.cr-copy--auto-final .cr-line {
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    opacity:0;
    transform:translateY(15px) scale(.996);
    filter:blur(6px) brightness(.9);
    transition:
      opacity 1.10s cubic-bezier(.22,1,.36,1),
      transform 1.26s cubic-bezier(.16,1,.3,1),
      filter 1.16s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform,filter;
  }

  .cr-copy.cr-copy--auto-final .cr-line.cr-line--final-visible {
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0) brightness(1);
  }

  .cr-copy.cr-copy--auto-final .cr-line.cr-line--1,
  .cr-copy.cr-copy--auto-final .cr-line.cr-line--2,
  .cr-copy.cr-copy--auto-final .cr-line.cr-line--4,
  .cr-copy.cr-copy--auto-final .cr-line.cr-line--6,
  .cr-copy.cr-copy--auto-final .cr-line.cr-line--8 {
    margin-bottom:var(--cr-group-gap);
  }

  .cr-copy.cr-copy--auto-final .cr-line:not(.cr-line--1):not(.cr-line--2):not(.cr-line--4):not(.cr-line--6):not(.cr-line--8):not(.cr-line--10) {
    margin-bottom:var(--cr-tight-gap);
  }

  .cr-copy.cr-copy--auto-final .cr-line.cr-line--10 { margin-bottom:0; }

  .cr-copy.cr-copy--auto-final .cw {
    position:relative;
    overflow:visible;
    background:none!important;
    -webkit-background-clip:initial!important;
    background-clip:initial!important;
    -webkit-text-fill-color:currentColor!important;
    -webkit-text-stroke:0 transparent!important;
  }

  /* Supporting words: a small, smooth drop from above. */
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word {
    opacity:0;
    transform:translateY(-.58em) scale(.97);
    filter:blur(5px);
    transition:
      opacity .92s cubic-bezier(.22,1,.36,1),
      transform 1.18s cubic-bezier(.16,1,.3,1),
      filter 1.02s cubic-bezier(.22,1,.36,1);
  }

  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in {
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }

  /* Main words are deliberately withheld for TWO seconds. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word {
    opacity:0!important;
    transform:translateY(.30em) scale(.95);
    filter:blur(8px) brightness(.82);
    transition:
      opacity 1.10s cubic-bezier(.22,1,.36,1),
      transform 1.30s cubic-bezier(.16,1,.3,1),
      filter 1.18s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform,filter;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in {
    opacity:1!important;
    transform:translateY(0) scale(1);
    filter:blur(0) brightness(1);
    color:var(--purple-light)!important;
    text-shadow:0 0 10px rgba(167,139,250,.30),0 0 26px rgba(124,58,237,.17);
  }

  /* Main-word glitter — short, bright, and then cleanly settles. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter {
    animation:crMainWordPulse 4.6s cubic-bezier(.22,1,.36,1) both;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter::before,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter::after {
    position:absolute;
    z-index:7;
    pointer-events:none;
    line-height:1;
    color:var(--text-primary);
    text-shadow:0 0 7px rgba(255,255,255,.82),0 0 16px rgba(167,139,250,.64);
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter::before {
    content:'✦';
    left:10%;
    top:-.24em;
    font-size:.20em;
    animation:crMainSparkA 4.25s ease-in-out both;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter::after {
    content:'✧';
    right:4%;
    bottom:-.04em;
    font-size:.17em;
    animation:crMainSparkB 4.10s .14s ease-in-out both;
  }

  /* Star atmosphere: absolute overlay, mostly in the lower half. */
  .cr-final-stars {
    position:absolute;
    inset:0;
    z-index:6;
    pointer-events:none;
    overflow:visible;
    opacity:0;
    transition:opacity 1.35s cubic-bezier(.22,1,.36,1);
  }

  .cr-copy.cr-copy--stars-on .cr-final-stars { opacity:1; }

  .cr-final-star {
    position:absolute;
    left:var(--sx);
    top:var(--sy);
    transform:translate(-50%,-50%) scale(var(--ss));
    color:rgba(255,255,255,.72);
    text-shadow:0 0 7px rgba(255,255,255,.38),0 0 14px rgba(167,139,250,.28);
    animation:crFinalStarTwinkle var(--sdu) var(--sd) ease-in-out infinite;
    opacity:.26;
    line-height:1;
  }

  .cr-final-star--1 { font-size:.52rem; }
  .cr-final-star--2 { font-size:.42rem; color:rgba(167,139,250,.74); }
  .cr-final-star--3 { font-size:.72rem; color:rgba(255,255,255,.55); }

  /* One subtle end pulse only; no repeated full-text flashing. */
  .cr-copy.cr-copy--auto-final .cr-line.cr-line--final-soft-glow {
    animation:crFinalLineSettle 1.70s cubic-bezier(.22,1,.36,1) both;
  }

  .cr-copy.cr-copy--auto-final.cr-copy--final-complete .cr-line {
    opacity:1;
    transform:none;
    filter:none;
  }

  @keyframes crMainWordPulse {
    0%   { filter:brightness(.94); text-shadow:0 0 0 rgba(167,139,250,0); }
    12%  { filter:brightness(1.28); text-shadow:0 0 8px rgba(255,255,255,.24),0 0 22px rgba(167,139,250,.50),0 0 36px rgba(124,58,237,.18); }
    30%  { filter:brightness(1.08); text-shadow:0 0 7px rgba(255,255,255,.14),0 0 18px rgba(167,139,250,.34),0 0 30px rgba(124,58,237,.13); }
    48%  { filter:brightness(1.34); text-shadow:0 0 10px rgba(255,255,255,.28),0 0 28px rgba(167,139,250,.58),0 0 46px rgba(124,58,237,.24); }
    67%  { filter:brightness(1.10); text-shadow:0 0 8px rgba(255,255,255,.16),0 0 20px rgba(167,139,250,.38),0 0 32px rgba(124,58,237,.14); }
    84%  { filter:brightness(1.26); text-shadow:0 0 9px rgba(255,255,255,.22),0 0 24px rgba(167,139,250,.48),0 0 38px rgba(124,58,237,.18); }
    100% { filter:brightness(1); text-shadow:0 0 10px rgba(167,139,250,.30),0 0 26px rgba(124,58,237,.17); }
  }

  @keyframes crMainSparkA {
    0%,8%   { opacity:0; transform:translate(-7px,7px) scale(.1) rotate(-18deg); }
    18%     { opacity:1; transform:translate(0,0) scale(1.20) rotate(4deg); }
    32%     { opacity:.20; transform:translate(5px,-5px) scale(.58) rotate(12deg); }
    44%     { opacity:.90; transform:translate(2px,-2px) scale(1.04) rotate(-3deg); }
    60%     { opacity:.18; transform:translate(8px,-8px) scale(.48) rotate(18deg); }
    72%     { opacity:.82; transform:translate(4px,-4px) scale(.94) rotate(8deg); }
    100%    { opacity:0; transform:translate(14px,-13px) scale(.12) rotate(28deg); }
  }

  @keyframes crMainSparkB {
    0%,14%  { opacity:0; transform:translate(6px,-5px) scale(.1) rotate(14deg); }
    26%     { opacity:.92; transform:translate(0,0) scale(1.12) rotate(-5deg); }
    42%     { opacity:.16; transform:translate(-5px,4px) scale(.50) rotate(-12deg); }
    56%     { opacity:.82; transform:translate(-1px,1px) scale(.96) rotate(4deg); }
    74%     { opacity:.20; transform:translate(-7px,7px) scale(.44) rotate(-16deg); }
    86%     { opacity:.70; transform:translate(-3px,3px) scale(.82) rotate(-7deg); }
    100%    { opacity:0; transform:translate(-12px,10px) scale(.14) rotate(-22deg); }
  }

  @keyframes crFinalStarTwinkle {
    0%,100% { opacity:.16; transform:translate(-50%,-50%) scale(calc(var(--ss) * .72)); filter:brightness(.9); }
    48%     { opacity:.82; transform:translate(-50%,-50%) scale(calc(var(--ss) * 1.18)); filter:brightness(1.35); }
    72%     { opacity:.36; }
  }

  @keyframes crFinalLineSettle {
    0%   { filter:brightness(1); transform:translateY(0); }
    46%  { filter:brightness(1.08) drop-shadow(0 0 8px rgba(167,139,250,.07)); transform:translateY(-1px); }
    100% { filter:brightness(1); transform:translateY(0); }
  }
}

@media (prefers-reduced-motion:reduce) {
  .cr-copy.cr-copy--auto-final .cr-line,
  .cr-copy.cr-copy--auto-final .cw {
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
  .cr-copy.cr-copy--auto-final .cw.cr-main-word::before,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word::after,
  .cr-final-stars { display:none!important; }
}


/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — FINAL SCREEN: USE THE FULL VIEWPORT HEIGHT
   ---------------------------------------------------------------------
   The automatic final composition should not sit in a short block with
   empty bands above and below.  While the final scene is active we trim
   the sticky vertical padding and let the 10 lines distribute themselves
   across the available height.  The text animation itself is unchanged.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {
  #crSticky.cr-sticky--auto-final {
    justify-content:stretch;
    padding-top:clamp(10px,1.35vh,16px);
    padding-bottom:clamp(9px,1.15vh,14px);
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    flex:1 1 auto;
    height:auto;
    min-height:0;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:0;
    margin:0;
    padding:clamp(2px,.35vh,5px) 0 clamp(5px,.65vh,8px);
  }

  /* Let space-between do the main vertical distribution.  Group endings
     retain a small extra beat so the original thought-group rhythm stays. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    flex:0 0 auto;
    margin-top:0;
    margin-bottom:0;
    line-height:1.105;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--1,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--2,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--4,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--6,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--8 {
    margin-bottom:clamp(3px,.48vh,6px);
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--10 {
    margin-bottom:0;
  }

  /* Keep the decorative stars inside the same text field so they never add
     layout height or create artificial blank space around the composition. */
  #crSticky.cr-sticky--auto-final .cr-final-stars {
    inset:0;
  }
}

/* Short desktop viewports need slightly tighter typography, but still use
   essentially the whole screen instead of leaving top/bottom dead space. */
@media (min-width:769px) and (max-height:760px) {
  #crSticky.cr-sticky--auto-final {
    padding-top:8px;
    padding-bottom:7px;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    padding-top:1px;
    padding-bottom:4px;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    line-height:1.07;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--1,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--2,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--4,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--6,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--8 {
    margin-bottom:2px;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — SPACING ONLY (TEXT ANIMATION UNCHANGED)
   ---------------------------------------------------------------------
   Group 1 : lines 1–2
   Group 2 : lines 3–8
   Group 3 : lines 9–10

   Normal spacing inside each group.
   Larger spacing only after line 2 and line 8.
   No JS / reveal / drop / fade / glitter timing is changed.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    --cr-final-inner-gap:clamp(4px,.62vh,8px);
    --cr-final-group-gap:clamp(18px,2.25vh,28px);
    gap:0!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    margin-top:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Group 1 */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--1 {
    margin-bottom:var(--cr-final-inner-gap)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--2 {
    margin-bottom:var(--cr-final-group-gap)!important;
  }

  /* Group 2 */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--3,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--4,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--5,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--6,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--7 {
    margin-bottom:var(--cr-final-inner-gap)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--8 {
    margin-bottom:var(--cr-final-group-gap)!important;
  }

  /* Group 3 */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--9 {
    margin-bottom:var(--cr-final-inner-gap)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--10 {
    margin-bottom:0!important;
  }
}

@media (min-width:769px) and (max-height:760px) {
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    --cr-final-inner-gap:clamp(2px,.35vh,5px);
    --cr-final-group-gap:clamp(12px,1.55vh,18px);
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — FADED PLACEHOLDER → EXISTING DROP / FADE-ZOOM → TRUE COLOR
   ---------------------------------------------------------------------
   IMPORTANT:
   - Existing animation order/timing is NOT changed.
   - Existing 1–2 / 3–8 / 9–10 spacing is NOT changed.
   - Outside the final scene the placeholder is hidden, so the scroll story
     remains visually identical.
   ═════════════════════════════════════════════════════════════════════ */

/* Normal story/mobile state: render the word only once. */
.cw.cr-motion-word .cr-word-motion {
  display:inline;
}
.cw.cr-motion-word .cr-word-placeholder {
  display:none;
}

@media (min-width:769px) {

  /* Outer word stays fixed at the final sentence position. */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word {
    position:relative!important;
    display:inline-block!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    overflow:visible!important;
    will-change:auto!important;
  }

  /* Faded placeholder: already visible before drop/zoom begins. */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word .cr-word-placeholder {
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    display:inline-block;
    white-space:nowrap;
    pointer-events:none;
    opacity:.92;
    transform:none;
    filter:none;
    text-shadow:none!important;
    transition:opacity .58s cubic-bezier(.22,1,.36,1);
  }

  /* Use the site's EXISTING faded color family. */
  .cr-copy.cr-copy--auto-final .cw--w.cr-motion-word .cr-word-placeholder {
    color:var(--word-ghost)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--p.cr-motion-word .cr-word-placeholder {
    color:var(--word-ghost-p)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--g.cr-motion-word .cr-word-placeholder {
    color:var(--word-g)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--gp.cr-motion-word .cr-word-placeholder {
    color:var(--word-gp)!important;
  }

  /* Real animated word sits exactly over its placeholder. */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word .cr-word-motion {
    position:relative;
    z-index:2;
    display:inline-block;
    white-space:nowrap;
    will-change:opacity,transform,filter;
  }

  /* ── DROP WORDS: preserve the existing drop values exactly. ── */
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    opacity:0;
    transform:translateY(-.58em) scale(.97);
    filter:blur(5px);
    transition:
      opacity .92s cubic-bezier(.22,1,.36,1),
      transform 1.18s cubic-bezier(.16,1,.3,1),
      filter 1.02s cubic-bezier(.22,1,.36,1),
      color .82s cubic-bezier(.22,1,.36,1);
  }

  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion {
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }

  /* ── MAIN WORDS: preserve the existing fade/zoom values exactly. ── */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    will-change:auto!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion {
    opacity:0;
    transform:translateY(.30em) scale(.95);
    filter:blur(8px) brightness(.82);
    transition:
      opacity 1.10s cubic-bezier(.22,1,.36,1),
      transform 1.30s cubic-bezier(.16,1,.3,1),
      filter 1.18s cubic-bezier(.22,1,.36,1),
      color .90s cubic-bezier(.22,1,.36,1);
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion {
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0) brightness(1);
  }

  /*
     TRUE FINAL COLOR:
     Do not force every main word to purple. Restore the actual color family
     that the word originally owns.
  */
  .cr-copy.cr-copy--auto-final .cw--w.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--p.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-p)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--g.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-g)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--gp.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-gp)!important;
  }

  /* Keep your stronger Portfolio / Power / you purple emphasis. */
  .cr-copy.cr-copy--auto-final .cw.cr-keyword.lit .cr-word-motion {
    color:var(--purple-light)!important;
  }

  /* Real word has landed: now the faded placeholder disappears. */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word.cr-motion-word--settled .cr-word-placeholder {
    opacity:0;
  }

  /* Existing glitter remains on main words; do not reintroduce parent movement. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter {
    transform:none!important;
  }
}

@media (prefers-reduced-motion:reduce) and (min-width:769px) {
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word .cr-word-motion {
    transform:none!important;
    filter:none!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — THREE TRUE PARAGRAPH GROUPS
   ---------------------------------------------------------------------
   Paragraph 1: lines 1–2
   Paragraph 2: lines 3–8
   Paragraph 3: lines 9–10

   Lines inside each paragraph stay close together.
   A larger paragraph break appears only after line 2 and line 8.
   Animation is untouched.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    --cr-para-line-gap:clamp(1px,.20vh,3px);
    --cr-para-break-gap:clamp(20px,2.55vh,32px);
    gap:0!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    margin-top:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Paragraph 1: 1–2 */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--1 {
    margin-bottom:var(--cr-para-line-gap)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--2 {
    margin-bottom:var(--cr-para-break-gap)!important;
  }

  /* Paragraph 2: 3–8 */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--3,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--4,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--5,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--6,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--7 {
    margin-bottom:var(--cr-para-line-gap)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--8 {
    margin-bottom:var(--cr-para-break-gap)!important;
  }

  /* Paragraph 3: 9–10 */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--9 {
    margin-bottom:var(--cr-para-line-gap)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--10 {
    margin-bottom:0!important;
  }
}

/* Compact but still visibly grouped on shorter desktop heights. */
@media (min-width:769px) and (max-height:760px) {
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    --cr-para-line-gap:1px;
    --cr-para-break-gap:clamp(14px,1.8vh,20px);
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — TIGHTER LINE SPACING INSIDE EACH PARAGRAPH
   ---------------------------------------------------------------------
   Paragraph grouping remains:
   1–2 / 3–8 / 9–10
   Only the spacing INSIDE each paragraph is reduced.
   Larger paragraph gaps after line 2 and line 8 remain unchanged.
   Animation remains unchanged.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    --cr-para-line-gap:0px;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    line-height:1.04!important;
  }

  /* Close spacing inside Paragraph 1 */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--1 {
    margin-bottom:0!important;
  }

  /* Close spacing inside Paragraph 2 */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--3,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--4,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--5,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--6,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--7 {
    margin-bottom:0!important;
  }

  /* Close spacing inside Paragraph 3 */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--9 {
    margin-bottom:0!important;
  }
}

@media (min-width:769px) and (max-height:760px) {
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    line-height:1.02!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — EXTRA TIGHT PARAGRAPH LINE SPACING
   ---------------------------------------------------------------------
   Keep paragraphs:
   1–2 / 3–8 / 9–10

   Extra-tight spacing only INSIDE each paragraph.
   Paragraph breaks after line 2 and line 8 stay unchanged.
   Animation stays unchanged.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    line-height:.99!important;
  }

  /* Pull consecutive lines slightly closer inside each paragraph. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--1,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--3,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--4,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--5,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--6,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--7,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--9 {
    margin-bottom:-2px!important;
  }

  /* Preserve paragraph breaks exactly. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--2,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--8 {
    margin-bottom:var(--cr-para-break-gap)!important;
  }
}

@media (min-width:769px) and (max-height:760px) {
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    line-height:.97!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--1,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--3,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--4,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--5,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--6,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--7,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--9 {
    margin-bottom:-3px!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — ULTRA-TIGHT PARAGRAPH LINES + BOTTOM BREATHING SPACE
   ---------------------------------------------------------------------
   Paragraphs remain:
   1–2 / 3–8 / 9–10

   Line spacing inside each paragraph is reduced further.
   Paragraph gaps after line 2 and line 8 remain unchanged.
   Extra breathing room is added below the final paragraph.
   Animation remains unchanged.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {

  /* More bottom breathing room for the final Section 2 composition. */
  #crSticky.cr-sticky--auto-final {
    padding-bottom:clamp(34px,4.2vh,54px)!important;
  }

  /* Tighten text vertically even more. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    line-height:.94!important;
  }

  /* Pull consecutive lines closer inside each paragraph. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--1,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--3,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--4,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--5,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--6,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--7,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--9 {
    margin-bottom:-5px!important;
  }

  /* Keep the two paragraph breaks exactly as paragraph breaks. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--2,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--8 {
    margin-bottom:var(--cr-para-break-gap)!important;
  }

  /* Extra clear space after the last line before the section bottom. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--10 {
    margin-bottom:clamp(18px,2.4vh,30px)!important;
  }
}

/* Shorter laptop height: still very tight, but keep safe readability. */
@media (min-width:769px) and (max-height:760px) {
  #crSticky.cr-sticky--auto-final {
    padding-bottom:clamp(24px,3.2vh,36px)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    line-height:.92!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--1,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--3,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--4,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--5,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--6,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--7,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--9 {
    margin-bottom:-6px!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--10 {
    margin-bottom:clamp(12px,1.8vh,20px)!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — DIRECT FADE-IN ONLY + IMMEDIATE FINAL AUTO
   ---------------------------------------------------------------------
   - No drop movement.
   - No zoom movement.
   - Supporting emphasis words and main words both fade directly in.
   - Faded placeholder remains visible first, then disappears after fade.
   - Existing 1–2 / 3–8 / 9–10 paragraph spacing and bottom spacing remain.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {

  .cr-copy.cr-copy--auto-final .cw.cr-motion-word,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /* Direct fade only for BOTH former drop words and main words. */
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:
      opacity .82s cubic-bezier(.22,1,.36,1),
      color .82s cubic-bezier(.22,1,.36,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /* Restore each word's real original final color. */
  .cr-copy.cr-copy--auto-final .cw--w.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--p.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-p)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--g.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-g)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--gp.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-gp)!important;
  }

  /* Keep existing stronger purple emphasis for Portfolio / Power / you. */
  .cr-copy.cr-copy--auto-final .cw.cr-keyword.lit .cr-word-motion {
    color:var(--purple-light)!important;
  }

  /* Do not let old parent animations create movement. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in {
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — EXTRA-SMOOTH RANDOM MAIN FADE + SMALL-SCROLL HANDOFF
   ---------------------------------------------------------------------
   - No drop movement.
   - No zoom movement.
   - Main words fade in in a freshly shuffled order on every run.
   - Main fade is softer/longer to avoid a loader-like feel.
   - Existing 3-paragraph spacing and bottom breathing room stay untouched.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {

  /* Supporting emphasis words: soft direct fade only. */
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:
      opacity 1.18s cubic-bezier(.16,1,.3,1),
      color 1.18s cubic-bezier(.16,1,.3,1)!important;
  }

  /* Main words: extra-smooth direct fade only. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:
      opacity 1.34s cubic-bezier(.16,1,.3,1),
      color 1.34s cubic-bezier(.16,1,.3,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /* Placeholder releases gently after the real word has become readable. */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word .cr-word-placeholder {
    transition:opacity .76s cubic-bezier(.16,1,.3,1)!important;
  }

  /* Never allow older movement/pulse rules to reappear. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in {
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — SLOW COLOR FADE + 2–3 WORD RANDOM BATCHES
   ---------------------------------------------------------------------
   - Final full text lines appear together.
   - Main words reveal in random batches of 2–3.
   - Real color arrives slowly/smoothly over the faded placeholder.
   - No drop and no zoom.
   - Paragraph separation is reduced.
   - Final screen needs only a very short extra scroll after the last story text.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {

  /* Main words: slow opacity + slow original-color transition. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:
      opacity 1.78s cubic-bezier(.16,1,.3,1),
      color 1.86s cubic-bezier(.16,1,.3,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /* Supporting emphasis words also stay soft, but slightly quicker than main. */
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:
      opacity 1.34s cubic-bezier(.16,1,.3,1),
      color 1.42s cubic-bezier(.16,1,.3,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion {
    opacity:1!important;
  }

  /* Placeholder stays visible longer, then dissolves gently. */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word .cr-word-placeholder {
    transition:opacity .92s cubic-bezier(.16,1,.3,1)!important;
  }

  /*
     Reduce only the paragraph-break space.
     Inside-paragraph ultra-tight spacing remains unchanged.
  */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    --cr-para-break-gap:clamp(10px,1.25vh,16px)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--2,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--8 {
    margin-bottom:var(--cr-para-break-gap)!important;
  }

  /* Guarantee old movement rules never return. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in {
    transform:none!important;
    filter:none!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter {
    animation:none!important;
  }
}

@media (min-width:769px) and (max-height:760px) {
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    --cr-para-break-gap:clamp(7px,.9vh,11px)!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — DIRECT 2–3 WORD FADE BATCHES + CLOSER PARAGRAPHS
   ---------------------------------------------------------------------
   - No individual one-by-one emphasis reveal.
   - Every emphasis event starts 2–3 random words at exactly the same time.
   - Original colors arrive slowly and smoothly.
   - Paragraph gaps are reduced further.
   - Line 5→6 spacing is forced to exactly match line 3→4 spacing.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {

  /* Same slow fade for BOTH main and former supporting/drop words. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:
      opacity 1.82s cubic-bezier(.16,1,.3,1),
      color 1.90s cubic-bezier(.16,1,.3,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /* More compact separation between the three paragraph groups. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    --cr-para-break-gap:clamp(6px,.72vh,10px)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--2,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--8 {
    margin-bottom:var(--cr-para-break-gap)!important;
  }

  /*
     Exact matching:
       line 3 → line 4
       line 5 → line 6
     Both now use the exact same line-height and bottom margin.
  */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--3,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--5 {
    margin-bottom:-5px!important;
    line-height:.94!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--4,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--6 {
    line-height:.94!important;
  }

  /* Keep all old movement disabled. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in {
    transform:none!important;
    filter:none!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter {
    animation:none!important;
  }
}

@media (min-width:769px) and (max-height:760px) {
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    --cr-para-break-gap:clamp(4px,.55vh,7px)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--3,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--5 {
    margin-bottom:-6px!important;
    line-height:.92!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--4,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line--6 {
    line-height:.92!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — ONE PURE FADE STYLE FOR ALL IMPORTANT WORDS
   ---------------------------------------------------------------------
   IMPORTANT:
   - No glitter/shimmer.
   - No second fade style.
   - No drop.
   - No zoom.
   - Main + supporting emphasis words use the EXACT SAME fade.
   - 2–3 random words begin together in each batch.
   - Slow transparent/faded → original white/purple color transition.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {

  /*
     ONE animation rule for BOTH types.
     The real word starts at opacity 0 and slowly becomes fully visible in its
     existing original final color.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    text-shadow:none!important;
    animation:none!important;
    transition:
      opacity 2.20s cubic-bezier(.22,.72,.22,1),
      color 2.20s cubic-bezier(.22,.72,.22,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }

  /*
     Ensure the placeholder also disappears gently after the real word reaches
     full color, avoiding any sudden snap at the end.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word .cr-word-placeholder {
    transition:opacity .95s cubic-bezier(.22,.72,.22,1)!important;
  }

  /*
     Completely disable every old glitter/shimmer path, including any class
     that may remain during replay/reset from older code.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter .cr-word-motion {
    animation:none!important;
    text-shadow:none!important;
    filter:none!important;
    transform:none!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — EXACT TWO-WORD PURE TRANSPARENT → ORIGINAL FADE
   ---------------------------------------------------------------------
   - Exactly TWO important words start together.
   - Start: opacity 0 (completely transparent).
   - End: opacity 1 in the word's ORIGINAL final white/purple color.
   - ONLY opacity animates.
   - No placeholder color underneath.
   - No color interpolation.
   - No glitter, shimmer, drop, zoom, blur or movement.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {

  /*
     Remove the faded placeholder from the animation completely.
     This makes the visible transition genuinely 0 → original word.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word .cr-word-placeholder {
    opacity:0!important;
    visibility:hidden!important;
    transition:none!important;
  }

  /*
     Both word types use ONE identical pure-opacity animation.
     The word already owns its correct final color; only opacity changes.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    text-shadow:none!important;
    transition:opacity 2.60s cubic-bezier(.22,.65,.24,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /* Actual original final colors — no animated color transition. */
  .cr-copy.cr-copy--auto-final .cw--w.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--p.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-p)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--g.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-g)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--gp.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-gp)!important;
  }
  .cr-copy.cr-copy--auto-final .cw.cr-keyword.lit .cr-word-motion {
    color:var(--purple-light)!important;
  }

  /* Kill every legacy alternate animation path. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter {
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — PLACEHOLDER PRESERVED + IMMEDIATE NO-BLANK HANDOFF
   ---------------------------------------------------------------------
   - Important-word placeholders remain visible.
   - Full final text appears together first.
   - THEN exactly two important words fade at the same time.
   - Real word fades from opacity 0 → 1 over the faded placeholder.
   - No drop, no zoom, no glitter.
   - No blank screen between scroll story and final composition.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {

  /*
     Restore the faded important-word placeholder.
     It stays in the final position so the complete sentence is always readable.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word .cr-word-placeholder {
    display:inline-block!important;
    visibility:visible!important;
    opacity:.90!important;
    transition:opacity .95s cubic-bezier(.22,.72,.22,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw--w.cr-motion-word .cr-word-placeholder {
    color:var(--word-ghost)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--p.cr-motion-word .cr-word-placeholder {
    color:var(--word-ghost-p)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--g.cr-motion-word .cr-word-placeholder {
    color:var(--word-g)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--gp.cr-motion-word .cr-word-placeholder {
    color:var(--word-gp)!important;
  }

  /*
     The real important word uses ONE pure opacity fade only.
     Its color is already the correct final white/purple color.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    text-shadow:none!important;
    transition:opacity 2.60s cubic-bezier(.22,.65,.24,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion {
    opacity:1!important;
  }

  /*
     After the real word is fully visible, dissolve only its faded placeholder.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word.cr-motion-word--settled .cr-word-placeholder {
    opacity:0!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — LARGE-SCREEN CENTER + ALL IMPORTANT WORDS TOGETHER
   ---------------------------------------------------------------------
   LARGE SCREEN STORY:
   - While the user scrolls through the sentence story, every sentence is
     horizontally centered on genuinely large desktop screens.

   FINAL SECTION 2:
   - ALL important words start at exactly the same time.
   - opacity: 0 → 1
   - scale: 0 → 1 (0 size → original size)
   - Existing important-word placeholder remains in the final position.
   - No random / pair / one-after-another important-word reveal.
   ═════════════════════════════════════════════════════════════════════ */

/* Use the site's own large-desktop class/threshold. */
@media (min-width:1600px) and (min-height:850px) {
  html.kone-large-screen-105 .cr-copy.cr-copy--sequence .cr-line {
    left:0!important;
    width:100%!important;
    text-align:center!important;
  }
}

@media (min-width:769px) {

  /*
     Keep the wrapper and placeholder fixed at the final layout position.
     Only the real word layer scales, so line width never changes.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word {
    position:relative!important;
    display:inline-block!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    overflow:visible!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-motion-word .cr-word-placeholder {
    display:inline-block!important;
    visibility:visible!important;
  }

  /*
     ONE identical animation for ALL important words:
     transparent + zero size → original opacity + original size.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    opacity:0!important;
    transform:scale(0)!important;
    transform-origin:50% 55%!important;
    filter:none!important;
    animation:none!important;
    text-shadow:none!important;
    will-change:opacity,transform;
    transition:
      opacity 1.95s cubic-bezier(.22,.72,.22,1),
      transform 2.10s cubic-bezier(.16,1,.3,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion {
    opacity:1!important;
    transform:scale(1)!important;
    filter:none!important;
  }

  /* Preserve the word's existing final white/purple color family. */
  .cr-copy.cr-copy--auto-final .cw--w.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--p.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-p)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--g.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-g)!important;
  }
  .cr-copy.cr-copy--auto-final .cw--gp.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-gp)!important;
  }
  .cr-copy.cr-copy--auto-final .cw.cr-keyword.lit .cr-word-motion {
    color:var(--purple-light)!important;
  }

  /*
     The placeholder stays during the shared animation and dissolves only after
     all important words have finished together.
  */
  .cr-copy.cr-copy--auto-final
  .cw.cr-motion-word.cr-motion-word--settled .cr-word-placeholder {
    opacity:0!important;
  }

  /* Disable old movement/glitter paths without touching other sections. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter {
    animation:none!important;
    filter:none!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — CENTERED SCROLL STORY + NORMAL ALL-AT-ONCE FADE
   ---------------------------------------------------------------------
   - Desktop scroll-story text is centered.
   - Important words keep their original size at all times.
   - ALL important words still begin together.
   - Pure smooth opacity 0 → 1 fade only.
   - Existing placeholder and final colors remain unchanged.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {

  /* Previous scroll-controlled story: center every sentence horizontally. */
  .cr-copy.cr-copy--sequence .cr-line {
    left:0!important;
    width:100%!important;
    text-align:center!important;
  }

  /*
     Important words: NORMAL FADE ONLY.
     No scale from 0, no zoom, no size change.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    transform-origin:initial!important;
    filter:none!important;
    animation:none!important;
    text-shadow:none!important;
    will-change:opacity;
    transition:opacity 2.10s cubic-bezier(.22,.72,.22,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /* Keep the wrapper itself completely fixed at original size. */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in {
    transform:none!important;
    scale:none!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — CENTERED SCROLL STORY + LEFT FINAL FADE SCREEN
   ---------------------------------------------------------------------
   SCROLL STORY:
   - Keep every scroll-controlled sentence centered.
   - Give equal safe breathing room on left and right.

   FINAL AUTO SCREEN:
   - Keep the complete stacked text LEFT aligned.
   - Important words use FADE ONLY.
   - No drop, translate, scale, zoom or blur.
   - Existing important-word placeholder remains visible during the fade.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {

  /* Previous scroll-controlled story: centered with balanced side spacing. */
  .cr-copy.cr-copy--sequence .cr-line {
    left:0!important;
    width:100%!important;
    padding-left:clamp(42px,7vw,120px)!important;
    padding-right:clamp(42px,7vw,120px)!important;
    text-align:center!important;
  }

  /* Last automatic full-text composition: LEFT aligned. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    width:100%!important;
    align-items:stretch!important;
    text-align:left!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    width:100%!important;
    text-align:left!important;
  }

  /*
     Keep the important-word placeholder.
     Do not hide or remove it while the real word is fading in.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-motion-word .cr-word-placeholder {
    display:inline-block!important;
    visibility:visible!important;
  }

  /*
     ONE NORMAL FADE for BOTH important-word classes.
     This completely neutralizes the legacy "drop word" movement.
  */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    text-shadow:none!important;
    will-change:opacity;
    transition:opacity 2.10s cubic-bezier(.22,.72,.22,1)!important;
  }

  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /* Neutralize every old parent-level drop / zoom / glitter path. */
  .cr-copy.cr-copy--auto-final .cw.cr-main-word,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in,
  .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in,
  .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter {
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
}

/* Slightly smaller safe side space on compact desktop heights. */
@media (min-width:769px) and (max-height:760px) {
  .cr-copy.cr-copy--sequence .cr-line {
    padding-left:clamp(30px,5.5vw,82px)!important;
    padding-right:clamp(30px,5.5vw,82px)!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — FINAL CORRECTION
   ---------------------------------------------------------------------
   FIRST STAGE / SCROLL STORY
   - Center aligned.
   - Equal left/right breathing room.

   SECOND STAGE / FINAL AUTO SCREEN
   - Left aligned.
   - ALL important words start together.
   - ONE normal fade style only.
   - No glitter, shimmer, pulse, glow-animation, drop, zoom or scale.
   - Placeholder text remains unchanged.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width:769px) {

  /* FIRST STAGE: proper centered scroll text with balanced safe width. */
  #crSticky .cr-copy.cr-copy--sequence {
    width:100%!important;
    padding-left:clamp(48px,7.5vw,128px)!important;
    padding-right:clamp(48px,7.5vw,128px)!important;
  }

  #crSticky .cr-copy.cr-copy--sequence .cr-line {
    left:0!important;
    width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
    text-align:center!important;
  }

  /* SECOND STAGE: final complete composition stays left aligned. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    text-align:left!important;
  }

  /*
     KEEP PLACEHOLDER.
     Do not change its text, dimensions or final position.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-motion-word
  .cr-word-placeholder {
    display:inline-block!important;
    visibility:visible!important;
  }

  /*
     ONE IDENTICAL FADE FOR EVERY IMPORTANT WORD.
     No second animation type.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word
  .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-drop-word
  .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    text-shadow:none!important;
    transition-property:opacity!important;
    transition-duration:2.15s!important;
    transition-timing-function:cubic-bezier(.22,.72,.22,1)!important;
    transition-delay:0s!important;
    will-change:opacity!important;
  }

  /*
     Both important-word classes enter through the SAME rule and therefore
     have exactly the same visual fade.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word.cr-main-word--in
  .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-drop-word.cr-drop-word--in
  .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    text-shadow:none!important;
  }

  /*
     Hard-disable ALL legacy glitter/shimmer/pulse routes.
     Even if an old class somehow remains, it cannot look different.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word.cr-main-glitter,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word.cr-main-glitter .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-keyword.lit,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-keyword.lit .cr-word-motion {
    animation:none!important;
    transform:none!important;
    filter:none!important;
    text-shadow:none!important;
  }

  /*
     Keep original final colors, but do not animate the color itself.
     Only opacity fades.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--w.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--p.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--g.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--gp.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-gp)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-keyword.lit .cr-word-motion {
    color:var(--purple-light)!important;
  }
}

/* Compact desktop: keep balanced side breathing room. */
@media (min-width:769px) and (max-height:760px) {
  #crSticky .cr-copy.cr-copy--sequence {
    padding-left:clamp(34px,5.5vw,86px)!important;
    padding-right:clamp(34px,5.5vw,86px)!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — CRED-LIKE CENTERED STORY ALIGNMENT (ALIGNMENT ONLY)
   ---------------------------------------------------------------------
   USER REQUEST:
   - Scroll-story alignment should match the centered CRED-style layout.
   - Do NOT copy the font.
   - Final important words (both normal + keyword/purple important words)
     should arrive at the SAME TIME with fade-in, not one after another.
   - Placeholder text must remain.
   ═════════════════════════════════════════════════════════════════════ */

/* Desktop / large-screen story layout */
@media (min-width:769px) {

  /*
     Stage 1: scrolling story block.
     Instead of stretching full-width text, create a centered readable column
     like the reference screenshot: centered block, centered lines, balanced space.
  */
  #crSticky .cr-copy.cr-copy--sequence {
    width:min(100%, 980px)!important;
    max-width:min(100%, 980px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:clamp(24px, 3vw, 40px)!important;
    padding-right:clamp(24px, 3vw, 40px)!important;
    box-sizing:border-box!important;
  }

  #crSticky .cr-copy.cr-copy--sequence .cr-line {
    width:100%!important;
    max-width:none!important;
    left:0!important;
    right:auto!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    text-align:center!important;
  }

  /*
     Stage 2: final auto screen remains left aligned, as previously approved.
  */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    text-align:left!important;
  }

  /*
     Keep ONE identical fade for every important word.
     This override reinforces that both normal and keyword/purple important
     words share the same fade timing and begin together.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word
  .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-drop-word
  .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-keyword
  .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    text-shadow:none!important;
    transition-property:opacity!important;
    transition-duration:2.15s!important;
    transition-timing-function:cubic-bezier(.22,.72,.22,1)!important;
    transition-delay:0s!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word.cr-main-word--in
  .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-drop-word.cr-drop-word--in
  .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-keyword.lit
  .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    text-shadow:none!important;
  }

  /*
     Preserve placeholder exactly.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-motion-word
  .cr-word-placeholder {
    display:inline-block!important;
    visibility:visible!important;
  }

  /*
     Hard-disable any remaining glitter/shimmer path, even if a class remains.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word.cr-main-glitter,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word.cr-main-glitter .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-keyword .cr-word-motion {
    animation:none!important;
    filter:none!important;
    text-shadow:none!important;
  }
}

/* Compact desktop: slightly narrower centered story column */
@media (min-width:769px) and (max-height:760px) {
  #crSticky .cr-copy.cr-copy--sequence {
    width:min(100%, 900px)!important;
    max-width:min(100%, 900px)!important;
    padding-left:clamp(18px, 2.2vw, 28px)!important;
    padding-right:clamp(18px, 2.2vw, 28px)!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SECTION 2 — READABLE CENTER STORY + CLEAN FINAL FADE/GLITTER
   ---------------------------------------------------------------------
   FIRST VIEW / SCROLL STORY
   - Centered like the approved reference.
   - Fixed readable width with balanced left/right breathing room.

   SECOND VIEW / FINAL AUTO
   - Left aligned.
   - ALL important words start together.
   - ALL important words use the SAME fade over the placeholder.
   - ONLY selected main important words add a subtle glitter shimmer.
   - No drop, zoom, scale or stagger.
   ═════════════════════════════════════════════════════════════════════ */

@media (min-width:769px) {

  /* ---------- FIRST VIEW: CENTERED, EASY-TO-READ STORY ---------- */
  #crSticky .cr-copy.cr-copy--sequence {
    width:min(92vw, 1040px)!important;
    max-width:1040px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:clamp(22px,2.8vw,42px)!important;
    padding-right:clamp(22px,2.8vw,42px)!important;
    box-sizing:border-box!important;
  }

  #crSticky .cr-copy.cr-copy--sequence .cr-line {
    left:0!important;
    width:100%!important;
    max-width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:center!important;
  }

  /* ---------- SECOND VIEW: LEFT-ALIGNED FINAL COMPOSITION ---------- */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    text-align:left!important;
  }

  /*
     Keep the placeholder visible and fixed in the final word position.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-motion-word
  .cr-word-placeholder {
    display:inline-block!important;
    visibility:visible!important;
  }

  /*
     RESET ALL OLD IMPORTANT-WORD EFFECTS.
     Both supporting and main important words now share ONE fade only.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-drop-word {
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-drop-word .cr-word-motion {
    opacity:0!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    text-shadow:none!important;
    transition:
      opacity 2.20s cubic-bezier(.22,.72,.22,1)!important;
    transition-delay:0s!important;
    will-change:opacity;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word.cr-main-word--in .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-drop-word.cr-drop-word--in .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /*
     Main important words ONLY:
     add a soft glitter/shimmer while using the exact same fade timing.
     No movement or scaling is involved.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-main-word.cr-main-glitter .cr-word-motion {
    animation:crMainWordGlitterOnly 3.25s ease-in-out both!important;
  }

  @keyframes crMainWordGlitterOnly {
    0% {
      text-shadow:
        0 0 0 rgba(255,255,255,0),
        0 0 0 rgba(167,139,250,0);
    }
    28% {
      text-shadow:
        0 0 10px rgba(255,255,255,.24),
        0 0 22px rgba(167,139,250,.18);
    }
    58% {
      text-shadow:
        0 0 16px rgba(255,255,255,.32),
        0 0 34px rgba(124,58,237,.24);
    }
    100% {
      text-shadow:
        0 0 8px rgba(255,255,255,.10),
        0 0 18px rgba(167,139,250,.08);
    }
  }

  /*
     Original final colors remain unchanged.
  */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--w.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--p.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--g.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--gp.cr-motion-word.lit .cr-word-motion {
    color:var(--word-lit-gp)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-keyword.lit .cr-word-motion {
    color:var(--purple-light)!important;
  }
}

/* Large-screen readability: slightly wider center column, still balanced. */
@media (min-width:1600px) and (min-height:850px) {
  #crSticky .cr-copy.cr-copy--sequence {
    width:min(90vw, 1120px)!important;
    max-width:1120px!important;
  }
}

/* Compact-height desktop: keep margins safe without squeezing the story. */
@media (min-width:769px) and (max-height:760px) {
  #crSticky .cr-copy.cr-copy--sequence {
    width:min(94vw, 960px)!important;
    max-width:960px!important;
    padding-left:clamp(16px,2vw,28px)!important;
    padding-right:clamp(16px,2vw,28px)!important;
  }
}


/* =========================================================
   REQUESTED UI UPDATE — SECTION 2 FINAL VIEW + SECTION 4
   ========================================================= */
@media (min-width:769px) {
  /* Section 2 second/final view: center the whole composition. */
  #crSticky.cr-sticky--auto-final {
    justify-content:center!important;
    align-items:center!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final {
    width:min(92vw,1180px)!important;
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    width:100%!important;
    text-align:center!important;
  }

  /* Every word is visible in the same reveal; remove old delayed/drop movement. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-main-word,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-drop-word,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    transform:none!important;
    filter:none!important;
    transition-delay:0s!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-drop-word.cr-drop-word--in .cr-word-motion {
    opacity:1!important;
  }
}

@media (min-width:901px) {
  /* Section 4: 1 original paragraph + 3 extra paragraphs = four scroll stages. */
  .cred4-track {
    height:500vh!important;
  }
}

/* =========================================================
   SECTION 2 — VIEW 2 GROUPED BLUR STORY BUILD
   1 | 2 | 3+4 | 5+6 | 7+8 | 9+10
   ========================================================= */
@media (min-width:769px) {
  /* Keep the approved centered final composition. */
  #crSticky.cr-sticky--auto-final {
    justify-content:center!important;
    align-items:center!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    text-align:center!important;
  }

  /*
     The paragraph/idea group itself owns the entrance animation.
     Each group starts soft and blurred, then settles into its exact position.
  */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    opacity:0!important;
    transform:translateY(12px)!important;
    filter:blur(9px) brightness(.90)!important;
    transition:
      opacity 1.05s cubic-bezier(.22,1,.36,1),
      transform 1.18s cubic-bezier(.16,1,.3,1),
      filter 1.14s cubic-bezier(.22,1,.36,1)!important;
    will-change:opacity,transform,filter;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line.cr-line--final-visible {
    opacity:1!important;
    transform:translateY(0)!important;
    filter:blur(0) brightness(1)!important;
  }

  /*
     Do not run a second delayed/drop animation inside the paragraph.
     Important words are already present when their line blurs into focus.
  */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-main-word,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-drop-word,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-main-word .cr-word-motion,
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-drop-word .cr-word-motion {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }

  /* Highlighted main words glitter immediately with their own group's reveal. */
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-word--in .cr-word-motion {
    opacity:1!important;
  }

  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cw.cr-main-word.cr-main-glitter .cr-word-motion {
    animation:crView2GroupedGlitter 2.50s ease-in-out both!important;
  }

  @keyframes crView2GroupedGlitter {
    0% {
      text-shadow:0 0 0 rgba(255,255,255,0),0 0 0 rgba(167,139,250,0);
    }
    30% {
      text-shadow:0 0 9px rgba(255,255,255,.24),0 0 20px rgba(167,139,250,.24);
    }
    58% {
      text-shadow:0 0 15px rgba(255,255,255,.34),0 0 30px rgba(124,58,237,.28);
    }
    100% {
      text-shadow:0 0 7px rgba(255,255,255,.10),0 0 16px rgba(167,139,250,.10);
    }
  }
}

@media (prefers-reduced-motion:reduce) {
  #crSticky.cr-sticky--auto-final .cr-copy.cr-copy--auto-final .cr-line {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
}


/* =========================================================
   SECTION 2 — VIEW 2 DIM PLACEHOLDERS + SYNCHRONIZED FINAL HIGHLIGHTS
   Important words wait in dim light until every paragraph is on screen.
   Then all important words restore their original color together; main words glitter together.
   ========================================================= */
@media (min-width:769px) {
  /* Important word keeps the exact final width/position while it waits. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-motion-word {
    position:relative!important;
    display:inline-block!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /* Old placeholder treatment: visible but deliberately dim. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-motion-word .cr-word-placeholder {
    display:inline-block!important;
    opacity:.72!important;
    filter:brightness(.78)!important;
    text-shadow:none!important;
    transition:
      opacity .82s cubic-bezier(.22,1,.36,1),
      filter .82s cubic-bezier(.22,1,.36,1)!important;
  }

  /* The real important word is hidden while its placeholder is waiting. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-motion-word .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-main-word .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-drop-word .cr-word-motion {
    opacity:0!important;
    transform:translateY(4px) scale(.985)!important;
    filter:blur(5px) brightness(.84)!important;
    transition:
      opacity .92s cubic-bezier(.22,1,.36,1),
      transform 1.02s cubic-bezier(.16,1,.3,1),
      filter .98s cubic-bezier(.22,1,.36,1),
      color .88s cubic-bezier(.22,1,.36,1)!important;
  }

  /* Synchronized arrival: every important word restores its original color together. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-reveal .cr-word-motion {
    opacity:1!important;
    transform:translateY(0) scale(1)!important;
    filter:blur(0) brightness(1)!important;
  }

  /* Fade the dim duplicate away at the same time the real word arrives. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-reveal .cr-word-placeholder {
    opacity:0!important;
    filter:brightness(1)!important;
  }

  /* Preserve each word's ORIGINAL final color family. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--w.cr-final-important.cr-important-reveal .cr-word-motion {
    color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--p.cr-final-important.cr-important-reveal .cr-word-motion {
    color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--g.cr-final-important.cr-important-reveal .cr-word-motion {
    color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw--gp.cr-final-important.cr-important-reveal .cr-word-motion {
    color:var(--word-lit-gp)!important;
  }

  /* Keep the approved stronger purple for these signature keywords. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-keyword.cr-final-important.cr-important-reveal .cr-word-motion {
    color:var(--purple-light)!important;
  }

  /* Main-important glitter begins exactly with the synchronized color arrival. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-main-word.cr-important-glitter .cr-word-motion {
    animation:crImportantTogetherGlitter 2.30s ease-in-out both!important;
  }

  @keyframes crImportantTogetherGlitter {
    0% {
      text-shadow:
        0 0 0 rgba(255,255,255,0),
        0 0 0 rgba(167,139,250,0);
    }
    24% {
      text-shadow:
        0 0 8px rgba(255,255,255,.20),
        0 0 18px rgba(167,139,250,.18);
    }
    52% {
      text-shadow:
        0 0 16px rgba(255,255,255,.36),
        0 0 30px rgba(124,58,237,.30),
        0 0 42px rgba(167,139,250,.15);
    }
    76% {
      text-shadow:
        0 0 11px rgba(255,255,255,.24),
        0 0 24px rgba(167,139,250,.20);
    }
    100% {
      text-shadow:
        0 0 5px rgba(255,255,255,.08),
        0 0 12px rgba(167,139,250,.07);
    }
  }
}

@media (prefers-reduced-motion:reduce) and (min-width:769px) {
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-reveal .cr-word-motion {
    transform:none!important;
    filter:none!important;
  }
}


/* =========================================================
   SECTION 2 — VIEW 2 ALL IMPORTANT WORDS GLITTER TOGETHER
   Runs only after the complete grouped paragraph reveal.
   Every selected important word changes to its real color and
   receives the same glitter pulse at the exact same moment.
   ========================================================= */
@media (min-width:769px) {
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-glitter {
    position:relative!important;
    overflow:visible!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-glitter .cr-word-motion {
    animation:crAllImportantWordGlitter 2.30s cubic-bezier(.22,1,.36,1) both!important;
  }

  /* Small real glitter sparks around every important word. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-glitter::before,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-glitter::after {
    position:absolute!important;
    z-index:12!important;
    pointer-events:none!important;
    line-height:1!important;
    color:var(--text-primary)!important;
    opacity:0;
    text-shadow:
      0 0 7px rgba(255,255,255,.92),
      0 0 15px rgba(167,139,250,.72)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-glitter::before {
    content:'✦'!important;
    left:8%!important;
    top:-.30em!important;
    font-size:.20em!important;
    animation:crAllImportantSparkA 2.15s ease-in-out both!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-glitter::after {
    content:'✧'!important;
    right:2%!important;
    bottom:-.08em!important;
    font-size:.18em!important;
    animation:crAllImportantSparkB 2.20s .05s ease-in-out both!important;
  }

  @keyframes crAllImportantWordGlitter {
    0% {
      text-shadow:
        0 0 0 rgba(255,255,255,0),
        0 0 0 rgba(167,139,250,0);
    }
    22% {
      text-shadow:
        0 0 8px rgba(255,255,255,.28),
        0 0 18px rgba(167,139,250,.24);
    }
    48% {
      text-shadow:
        0 0 15px rgba(255,255,255,.46),
        0 0 28px rgba(124,58,237,.34),
        0 0 40px rgba(167,139,250,.20);
    }
    72% {
      text-shadow:
        0 0 10px rgba(255,255,255,.28),
        0 0 22px rgba(167,139,250,.24);
    }
    100% {
      text-shadow:
        0 0 4px rgba(255,255,255,.08),
        0 0 10px rgba(167,139,250,.07);
    }
  }

  @keyframes crAllImportantSparkA {
    0%,100% { opacity:0; transform:translate(-3px,4px) scale(.35) rotate(-18deg); }
    28% { opacity:1; transform:translate(0,0) scale(1.10) rotate(6deg); }
    58% { opacity:.72; transform:translate(4px,-3px) scale(.82) rotate(18deg); }
    82% { opacity:.26; transform:translate(7px,-6px) scale(.55) rotate(28deg); }
  }

  @keyframes crAllImportantSparkB {
    0%,100% { opacity:0; transform:translate(3px,-3px) scale(.35) rotate(14deg); }
    32% { opacity:.95; transform:translate(0,0) scale(1.04) rotate(-4deg); }
    62% { opacity:.62; transform:translate(-4px,3px) scale(.78) rotate(-16deg); }
    84% { opacity:.20; transform:translate(-7px,5px) scale(.50) rotate(-24deg); }
  }
}

@media (prefers-reduced-motion:reduce) and (min-width:769px) {
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-glitter .cr-word-motion,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-glitter::before,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-glitter::after {
    animation:none!important;
  }
}

/* =====================================================================
   SECTION 2 — VIEW 2 GUARANTEED LETTER GLITTER (FINAL OVERRIDE)
   ---------------------------------------------------------------------
   This is intentionally the LAST Section-2 rule in the stylesheet.
   It does not rely on the old word animation property. A separate duplicate
   of the actual letters receives a bright moving shine, while 3 particles
   sparkle around each important word. This keeps the original word color
   underneath and makes the glitter clearly visible.
   ===================================================================== */
@media (min-width:769px) {
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important {
    position:relative!important;
    overflow:visible!important;
    isolation:isolate;
  }

  /* Bright moving highlight INSIDE the letters. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important .cr-live-glitter-layer {
    position:absolute!important;
    left:0!important;
    top:0!important;
    z-index:30!important;
    display:inline-block!important;
    width:auto!important;
    height:auto!important;
    white-space:nowrap!important;
    pointer-events:none!important;
    user-select:none!important;

    color:transparent!important;
    -webkit-text-fill-color:transparent!important;
    background-image:linear-gradient(
      110deg,
      transparent 0%,
      transparent 28%,
      rgba(255,255,255,.12) 37%,
      rgba(255,255,255,.98) 47%,
      rgba(233,213,255,1) 52%,
      rgba(255,255,255,.96) 57%,
      rgba(167,139,250,.20) 67%,
      transparent 76%,
      transparent 100%
    )!important;
    background-size:280% 100%!important;
    background-position:130% 0!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;

    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.92))
      drop-shadow(0 0 12px rgba(167,139,250,.76))!important;

    animation:crGuaranteedLetterGlitter 2.45s cubic-bezier(.22,1,.36,1) both!important;
  }

  /* A stronger short glow on the real word itself. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important.cr-important-glitter .cr-word-motion {
    text-shadow:
      0 0 7px rgba(255,255,255,.38),
      0 0 18px rgba(167,139,250,.34),
      0 0 30px rgba(124,58,237,.18)!important;
  }

  /* Real sparkle particles around the word. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important .cr-live-glitter-spark {
    position:absolute!important;
    z-index:34!important;
    display:block!important;
    pointer-events:none!important;
    color:#fff!important;
    opacity:0;
    line-height:1!important;
    font-family:Arial,sans-serif!important;
    font-weight:700!important;
    -webkit-text-fill-color:#fff!important;
    text-shadow:
      0 0 4px #fff,
      0 0 10px rgba(255,255,255,.95),
      0 0 18px rgba(167,139,250,.90),
      0 0 28px rgba(124,58,237,.58)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important .cr-live-glitter-spark--1 {
    left:8%!important;
    top:-.52em!important;
    font-size:.34em!important;
    animation:crGuaranteedSparkOne 2.15s .04s ease-in-out both!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important .cr-live-glitter-spark--2 {
    right:5%!important;
    top:-.22em!important;
    font-size:.27em!important;
    animation:crGuaranteedSparkTwo 2.30s .13s ease-in-out both!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important .cr-live-glitter-spark--3 {
    left:42%!important;
    bottom:-.36em!important;
    font-size:.24em!important;
    animation:crGuaranteedSparkThree 2.22s .22s ease-in-out both!important;
  }

  @keyframes crGuaranteedLetterGlitter {
    0%   { opacity:0; background-position:130% 0; }
    10%  { opacity:.35; }
    28%  { opacity:1; background-position:78% 0; }
    52%  { opacity:1; background-position:25% 0; }
    70%  { opacity:.88; background-position:-18% 0; }
    100% { opacity:0; background-position:-75% 0; }
  }

  @keyframes crGuaranteedSparkOne {
    0%,100% { opacity:0; transform:translate(-4px,5px) scale(.25) rotate(-20deg); }
    23% { opacity:1; transform:translate(0,0) scale(1.28) rotate(4deg); }
    48% { opacity:.92; transform:translate(4px,-5px) scale(.86) rotate(18deg); }
    72% { opacity:.45; transform:translate(8px,-8px) scale(.62) rotate(30deg); }
  }

  @keyframes crGuaranteedSparkTwo {
    0%,100% { opacity:0; transform:translate(4px,4px) scale(.25) rotate(18deg); }
    29% { opacity:.98; transform:translate(0,0) scale(1.18) rotate(-5deg); }
    54% { opacity:.78; transform:translate(-4px,-4px) scale(.82) rotate(-17deg); }
    78% { opacity:.34; transform:translate(-7px,-7px) scale(.56) rotate(-28deg); }
  }

  @keyframes crGuaranteedSparkThree {
    0%,100% { opacity:0; transform:translateY(-2px) scale(.20) rotate(-12deg); }
    34% { opacity:.92; transform:translateY(2px) scale(1.12) rotate(7deg); }
    61% { opacity:.66; transform:translateY(6px) scale(.74) rotate(18deg); }
    82% { opacity:.24; transform:translateY(9px) scale(.50) rotate(28deg); }
  }
}

/* Reduced-motion still keeps a clearly visible static glitter glow. */
@media (prefers-reduced-motion:reduce) and (min-width:769px) {
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important .cr-live-glitter-layer {
    animation:none!important;
    opacity:.82!important;
    background-position:48% 0!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cw.cr-final-important .cr-live-glitter-spark {
    animation:none!important;
    opacity:.72!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 1 REFERENCE SCREEN + LINE SPACING
   ---------------------------------------------------------------------
   Applies ONLY to the scroll-led first view (.cr-copy--sequence).
   View 2 / final grouped blur + glitter composition is not changed.
   ===================================================================== */
@media (min-width:769px) {
  #crSticky:not(.cr-sticky--auto-final) .cr-copy.cr-copy--sequence {
    /*
       CRED-like first-view framing:
       noticeably more empty space at both sides of the reading column.
    */
    width:clamp(660px,45vw,760px)!important;
    max-width:calc(100vw - 180px)!important;
    margin-left:auto!important;
    margin-right:auto!important;

    /* Adds the same calm breathing space around the visible story stack. */
    padding-top:clamp(54px,6vh,82px)!important;
    padding-bottom:clamp(54px,6vh,82px)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence
  .cr-line {
    white-space:normal!important;
    text-align:center!important;
    line-height:1.22!important;
  }
}

/* Normal laptop widths: keep the same visual margin without squeezing too hard. */
@media (min-width:769px) and (max-width:1199px) {
  #crSticky:not(.cr-sticky--auto-final) .cr-copy.cr-copy--sequence {
    width:min(68vw,720px)!important;
    max-width:calc(100vw - 96px)!important;
    padding-top:48px!important;
    padding-bottom:48px!important;
  }
}

/* Large desktop: stronger CRED-like side margins. */
@media (min-width:1600px) {
  #crSticky:not(.cr-sticky--auto-final) .cr-copy.cr-copy--sequence {
    width:clamp(690px,43vw,780px)!important;
    max-width:780px!important;
    padding-top:72px!important;
    padding-bottom:72px!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 1 FIXED NEWLINES, ORIGINAL UI PRESERVED
   ---------------------------------------------------------------------
   Important:
   - Existing .cw purple/white colours are untouched.
   - Existing active/dim/lit UI is untouched.
   - Existing centered first-view layout is untouched.
   - These breaks exist only in View 1; View 2 sees the original continuous text.
   ===================================================================== */

.cr-v1-break {
  display:none!important;
}

@media (min-width:769px) {
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence
  .cr-v1-break {
    display:block!important;
    width:100%!important;
    height:0!important;
    line-height:0!important;
    margin:0!important;
    padding:0!important;
  }

  /* Keep the ORIGINAL centered UI and word-level colours. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence
  .cr-line {
    text-align:center!important;
    white-space:normal!important;
    line-height:1.22!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 2 CLEANER / LARGER FINAL COMPOSITION
   ---------------------------------------------------------------------
   View 1 is untouched.
   View 2 hides lines 3, 5 and 6, then enlarges and re-spaces the remaining
   content so the composition uses the available screen more confidently.
   ===================================================================== */
@media (min-width:769px) {

  /* Removed sentences — VIEW 2 ONLY. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--3,

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--5,

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--6 {
    display:none!important;
  }

  /* Use more of the screen without making the composition edge-to-edge. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final {
    width:min(88vw,1280px)!important;
    max-width:1280px!important;
    min-height:min(76vh,760px)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:stretch!important;
    gap:0!important;
    padding:clamp(20px,3.5vh,42px) clamp(28px,3.2vw,56px)!important;
    margin:auto!important;
  }

  /* Larger type for the remaining View-2 statements. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--1 {
    --cr-font-size:clamp(2.65rem,min(4.45vw,6.15vh),5.10rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--2 {
    --cr-font-size:clamp(2.80rem,min(4.90vw,6.40vh),5.55rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--4 {
    --cr-font-size:clamp(3.00rem,min(5.25vw,6.75vh),5.95rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--7 {
    --cr-font-size:clamp(2.95rem,min(5.05vw,6.55vh),5.75rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--8 {
    --cr-font-size:clamp(2.30rem,min(3.75vw,5.35vh),4.55rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--9 {
    --cr-font-size:clamp(3.00rem,min(5.10vw,6.55vh),5.80rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--10 {
    --cr-font-size:clamp(2.35rem,min(3.85vw,5.45vh),4.65rem)!important;
  }

  /* Balanced vertical rhythm for the reduced 7-line composition. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line {
    width:100%!important;
    line-height:1.085!important;
    margin:0!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--1 {
    margin-bottom:clamp(18px,2.5vh,30px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--2 {
    margin-bottom:clamp(32px,4.2vh,52px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--4 {
    margin-bottom:clamp(36px,4.8vh,60px)!important;
  }

  /* 7 + 8 read as one idea. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--7 {
    margin-bottom:clamp(8px,1.2vh,14px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--8 {
    margin-bottom:clamp(36px,4.8vh,60px)!important;
  }

  /* 9 + 10 read as the conclusion. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--9 {
    margin-bottom:clamp(8px,1.2vh,14px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-line--10 {
    margin-bottom:0!important;
  }
}

/* Large desktop gets a little more scale and breathing room. */
@media (min-width:1600px) {
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final {
    width:min(84vw,1360px)!important;
    max-width:1360px!important;
    min-height:min(78vh,800px)!important;
    padding-left:72px!important;
    padding-right:72px!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 1 CUSTOM WORD SCROLL SPECIAL FINISH
   ---------------------------------------------------------------------
   Original word colour system is preserved.
   Only the explicitly requested last-line treatments are added here.
   ===================================================================== */
@media (min-width:769px) {

  /* Make "institutional" true white when its custom scroll step is active. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cw.cr-v1-institutional-white.lit {
    color:#fff!important;
/*    color:#ffffff!important;*/
    text-shadow:0 0 9px rgba(255,255,255,.20)!important;
  }

  /* If the word has an inner motion layer, force that layer white too. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cw.cr-v1-institutional-white.lit .cr-word-motion {
    color:#ffffff!important;
  }

  /* Final "edge" glow — first view only, only on its last custom step. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cw.cr-v1-final-edge-glow {
    color:#ffffff!important;
    position:relative;
    text-shadow:
      0 0 7px rgba(255,255,255,.95),
      0 0 16px rgba(196,175,245,.90),
      0 0 34px rgba(124,58,237,.72),
      0 0 58px rgba(124,58,237,.38)!important;
    animation:crV1EdgeGlow 1.65s ease-in-out infinite alternate!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cw.cr-v1-final-edge-glow .cr-word-motion {
    color:#ffffff!important;
    text-shadow:
      0 0 7px rgba(255,255,255,.95),
      0 0 16px rgba(196,175,245,.90),
      0 0 34px rgba(124,58,237,.72)!important;
  }

  @keyframes crV1EdgeGlow {
    0% {
      filter:brightness(1);
    }
    100% {
      filter:brightness(1.28);
    }
  }
}


/* =====================================================================
   SECTION 2 — VIEW 1 COMPLETED LINE READABILITY
   ---------------------------------------------------------------------
   No new palette: every lit word still uses its original .cw--w/.cw--p/
   .cw--g/.cw--gp colour. This only makes the completed line settle cleanly.
   ===================================================================== */
@media (min-width:769px) {
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active .cw {
    transition:
      color .34s cubic-bezier(.22,1,.36,1),
      text-shadow .34s ease!important;
  }
}


/* SECTION 2 VIEW 1 — softer transitions with native scrolling */
@media (min-width:769px) {
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line {
    transition:
      opacity .24s ease,
      filter .28s ease!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cw {
    transition:
      color .44s cubic-bezier(.22,1,.36,1),
      text-shadow .44s ease,
      opacity .36s ease!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 1 CUMULATIVE COLOUR REVEAL
   ---------------------------------------------------------------------
   A word that has reached its scroll step keeps its original colour.
   The colour does not fall back to the ghost/dim state on the next word.
   ===================================================================== */
@media (min-width:769px) {
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cw.lit {
    transition:
      color .46s cubic-bezier(.22,1,.36,1),
      text-shadow .46s ease,
      opacity .38s ease!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 2 TWO-SCREEN LAYOUT
   ---------------------------------------------------------------------
   Screen 1 = first 3 remaining lines.
   Screen 2 = final 4 remaining lines.
   Uses most of the viewport with larger text and generous spacing.
   ===================================================================== */
@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final.cr-copy--scene-1,

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final.cr-copy--scene-2 {
    width:min(94vw,1540px)!important;
    max-width:1540px!important;
    min-height:82vh!important;
    height:82vh!important;
    padding:clamp(22px,3vh,42px) clamp(36px,4.4vw,82px)!important;
    margin:auto!important;

    display:flex!important;
    flex-direction:column!important;
    justify-content:space-evenly!important;
    align-items:center!important;

    gap:clamp(26px,4.4vh,60px)!important;
    overflow:visible!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-scene-hidden {
    display:none!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-scene-line {
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;

    opacity:0!important;
    transform:translateY(34px) scale(.985)!important;
    filter:blur(13px)!important;

    transition:
      opacity .82s cubic-bezier(.22,1,.36,1),
      transform .92s cubic-bezier(.22,1,.36,1),
      filter .92s cubic-bezier(.22,1,.36,1)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-scene-line.cr-scene-line--visible {
    opacity:1!important;
    transform:translateY(0) scale(1)!important;
    filter:blur(0)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final
  .cr-scene-line.cr-scene-line--out {
    opacity:0!important;
    transform:translateY(-30px) scale(.985)!important;
    filter:blur(12px)!important;
  }

  /* ---------- SCREEN 1: 3 lines, bold use of space ---------- */

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final.cr-copy--scene-1
  .cr-line--1 {
    --cr-font-size:clamp(3.45rem,min(5.75vw,7.2vh),6.65rem)!important;
    line-height:1.06!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final.cr-copy--scene-1
  .cr-line--2 {
    --cr-font-size:clamp(3.75rem,min(6.10vw,7.55vh),7.00rem)!important;
    line-height:1.04!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final.cr-copy--scene-1
  .cr-line--4 {
    --cr-font-size:clamp(4.00rem,min(6.45vw,7.90vh),7.35rem)!important;
    line-height:1.03!important;
  }

  /* ---------- SCREEN 2: 4 lines, balanced hierarchy ---------- */

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final.cr-copy--scene-2
  .cr-line--7 {
    --cr-font-size:clamp(3.55rem,min(5.75vw,7.05vh),6.55rem)!important;
    line-height:1.04!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final.cr-copy--scene-2
  .cr-line--8 {
    --cr-font-size:clamp(3.05rem,min(4.85vw,6.15vh),5.60rem)!important;
    line-height:1.07!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final.cr-copy--scene-2
  .cr-line--9 {
    --cr-font-size:clamp(3.65rem,min(5.95vw,7.15vh),6.70rem)!important;
    line-height:1.03!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final.cr-copy--scene-2
  .cr-line--10 {
    --cr-font-size:clamp(2.75rem,min(4.35vw,5.75vh),5.10rem)!important;
    line-height:1.075!important;
  }
}

/* Large displays use still more of the available screen. */
@media (min-width:1600px) and (min-height:800px) {
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final.cr-copy--scene-1,

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--auto-final.cr-copy--scene-2 {
    width:min(92vw,1660px)!important;
    max-width:1660px!important;
    min-height:84vh!important;
    height:84vh!important;
    padding-left:clamp(72px,5vw,110px)!important;
    padding-right:clamp(72px,5vw,110px)!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 2 FINAL CLEAN TWO-SCREEN STAGE
   ---------------------------------------------------------------------
   This dedicated stage intentionally ignores all legacy View-2 line layout.
   Screen 1 has exactly 3 rows.
   Screen 2 has exactly 4 rows.
   No line can overlap another line and no selected line is hidden.
   ===================================================================== */
@media (min-width:769px) {

  /* Old source nodes are removed from layout only while dedicated View 2 runs. */
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated
  > .cr-line.cr-v2-source-hidden {
    display:none!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated {
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    height:100vh!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated
  .cr-v2-stage {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    z-index:30!important;
    pointer-events:none!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen {
    position:absolute!important;
    inset:0!important;

    width:min(92vw,1500px)!important;
    height:100vh!important;

    margin:0 auto!important;
    left:50%!important;
    right:auto!important;

    padding:
      clamp(70px,8vh,105px)
      clamp(58px,6vw,120px)!important;

    opacity:0!important;
    visibility:hidden!important;
    transform:translateX(-50%) translateY(22px)!important;
    filter:blur(10px)!important;

    transition:
      opacity 5s cubic-bezier(.22,1,.36,1),
      transform 5s cubic-bezier(.22,1,.36,1),
      filter 5s cubic-bezier(.22,1,.36,1),
      visibility 0s linear 5s!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen.is-active {
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(-50%) translateY(0)!important;
    filter:blur(0)!important;
    transition-delay:0s!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen.is-leaving {
    opacity:0!important;
    visibility:visible!important;
    transform:translateX(-50%) translateY(-24px)!important;
    filter:blur(10px)!important;
  }

  /*
     SCREEN 1
     --------
     Exactly 3 rows, each row gets one third of the usable vertical area.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--1 {
    display:grid!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    align-items:center!important;
    gap:clamp(20px,2.6vh,34px)!important;
  }

  /*
     SCREEN 2
     --------
     Exactly 4 rows, each row gets one quarter of the usable vertical area.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 {
    display:grid!important;
    grid-template-rows:repeat(4,minmax(0,1fr))!important;
    align-items:center!important;
    gap:clamp(14px,1.8vh,24px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-line {
    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    align-content:center!important;
    justify-content:center!important;

    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;

    margin:0!important;
    padding:0!important;

    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;

    text-align:center!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  /* Clean word rendering: no old placeholders/motion wrappers exist here. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-line .cw {
    display:inline-block!important;
    position:relative!important;

    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;

    margin-right:.22em!important;
    text-shadow:none;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-line .cw:last-child {
    margin-right:0!important;
  }

  /* Restore the original K One word colour families directly. */
  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--w {
    color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--p {
    color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--g {
    color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--gp {
    color:var(--word-lit-gp)!important;
  }

  /* Important words are clear and readable, without changing layout. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-line .cr-v2-important {
    text-shadow:0 0 18px rgba(167,139,250,.18)!important;
  }

  /* ================================================================
     SCREEN 1 FONT SCALE — 3 lines fill the screen confidently
     ================================================================ */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--1 .cr-v2-line--1 {
    font-family:'Playfair Display',serif!important;
    font-size:clamp(3.2rem,min(5.7vw,7.2vh),6.8rem)!important;
    font-weight:700!important;
    line-height:1.07!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--1 .cr-v2-line--2 {
    font-family:'Playfair Display',serif!important;
    font-size:clamp(3.55rem,min(6.1vw,7.6vh),7.2rem)!important;
    font-weight:700!important;
    line-height:1.05!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--1 .cr-v2-line--3 {
    font-family:'Playfair Display',serif!important;
    font-size:clamp(3.85rem,min(6.45vw,8vh),7.55rem)!important;
    font-weight:700!important;
    line-height:1.04!important;
  }

  /* ================================================================
     SCREEN 2 FONT SCALE — 4 lines, large but guaranteed not to overlap
     ================================================================ */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 .cr-v2-line--4 {
    font-family:'Playfair Display',serif!important;
    font-size:clamp(3.15rem,min(5.45vw,6.55vh),6.25rem)!important;
    font-weight:700!important;
    line-height:1.05!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 .cr-v2-line--5 {
    font-family:'Playfair Display',serif!important;
    font-size:clamp(2.75rem,min(4.55vw,5.8vh),5.25rem)!important;
    font-weight:700!important;
    line-height:1.08!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 .cr-v2-line--6 {
    font-family:'Playfair Display',serif!important;
    font-size:clamp(3.2rem,min(5.55vw,6.7vh),6.35rem)!important;
    font-weight:700!important;
    line-height:1.04!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 .cr-v2-line--7 {
    font-family:'Playfair Display',serif!important;
    font-size:clamp(2.6rem,min(4.15vw,5.35vh),4.85rem)!important;
    font-weight:700!important;
    line-height:1.08!important;
  }
}

/* Short desktop screens: reduce scale slightly, never crop or overlap. */
@media (min-width:769px) and (max-height:760px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen {
    padding-top:48px!important;
    padding-bottom:48px!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(2.6rem,5.1vh,4.35rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(2.2rem,4.5vh,3.75rem)!important;
  }
}

/* Very large desktop: use more width without letting lines become oversized. */
@media (min-width:1600px) and (min-height:800px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen {
    width:min(90vw,1640px)!important;
    padding-left:clamp(90px,6vw,140px)!important;
    padding-right:clamp(90px,6vw,140px)!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 2 DEDICATED STAGE: SAME GUARANTEED GLITTER
   ---------------------------------------------------------------------
   These rules only adapt the EXISTING glitter effect to the clean View-2
   screen copies. The animation/keyframes/timing are unchanged.
   ===================================================================== */
@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-final-important {
    position:relative!important;
    overflow:visible!important;
    isolation:isolate;
  }

  /* Same bright moving highlight inside the letters. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-final-important
  .cr-live-glitter-layer {
    position:absolute!important;
    left:0!important;
    top:0!important;
    z-index:30!important;
    display:inline-block!important;
    width:auto!important;
    height:auto!important;
    white-space:nowrap!important;
    pointer-events:none!important;
    user-select:none!important;

    color:transparent!important;
    -webkit-text-fill-color:transparent!important;

    background-image:linear-gradient(
      110deg,
      transparent 0%,
      transparent 28%,
      rgba(255,255,255,.12) 37%,
      rgba(255,255,255,.98) 47%,
      rgba(233,213,255,1) 52%,
      rgba(255,255,255,.96) 57%,
      rgba(167,139,250,.20) 67%,
      transparent 76%,
      transparent 100%
    )!important;

    background-size:280% 100%!important;
    background-position:130% 0!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;

    filter:
      drop-shadow(0 0 5px rgba(255,255,255,.92))
      drop-shadow(0 0 12px rgba(167,139,250,.76))!important;

    animation:
      crGuaranteedLetterGlitter
      2.45s
      cubic-bezier(.22,1,.36,1)
      both!important;
  }

  /* Same short glow on the real word. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-final-important.cr-important-glitter {
    text-shadow:
      0 0 7px rgba(255,255,255,.38),
      0 0 18px rgba(167,139,250,.34),
      0 0 30px rgba(124,58,237,.18)!important;
  }

  /* Same 3 sparkle particles. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-final-important
  .cr-live-glitter-spark {
    position:absolute!important;
    z-index:34!important;
    display:block!important;
    pointer-events:none!important;
    color:#fff!important;
    opacity:0;
    line-height:1!important;
    font-family:Arial,sans-serif!important;
    font-weight:700!important;
    -webkit-text-fill-color:#fff!important;

    text-shadow:
      0 0 4px #fff,
      0 0 10px rgba(255,255,255,.95),
      0 0 18px rgba(167,139,250,.90),
      0 0 28px rgba(124,58,237,.58)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-final-important
  .cr-live-glitter-spark--1 {
    left:8%!important;
    top:-.52em!important;
    font-size:.34em!important;
    animation:crGuaranteedSparkOne 2.15s .04s ease-in-out both!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-final-important
  .cr-live-glitter-spark--2 {
    right:5%!important;
    top:-.22em!important;
    font-size:.27em!important;
    animation:crGuaranteedSparkTwo 2.30s .13s ease-in-out both!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-final-important
  .cr-live-glitter-spark--3 {
    left:42%!important;
    bottom:-.36em!important;
    font-size:.24em!important;
    animation:crGuaranteedSparkThree 2.22s .22s ease-in-out both!important;
  }
}

@media (prefers-reduced-motion:reduce) and (min-width:769px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-final-important
  .cr-live-glitter-layer {
    animation:none!important;
    opacity:.82!important;
    background-position:48% 0!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-final-important
  .cr-live-glitter-spark {
    animation:none!important;
    opacity:.72!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 2 / SCREEN 2 FINAL TYPOGRAPHY BALANCE
   ---------------------------------------------------------------------
   4 = Custom-made. Just for you.           -> HERO
   5 = Portfolio ... Precision Power ...    -> highlighted key words
   6 = Partner with us.                     -> clear supporting line
   7 = Unlock your ultimate ... edge.       -> one clean closing paragraph
   ===================================================================== */
@media (min-width:769px) {

  /* Give the hero more vertical room; keep all four rows safely separated. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 {
    grid-template-rows:
      minmax(0,1.42fr)
      minmax(0,1.02fr)
      minmax(0,.82fr)
      minmax(0,1.08fr)!important;

    gap:clamp(16px,2.2vh,30px)!important;

    padding-top:clamp(60px,7vh,92px)!important;
    padding-bottom:clamp(60px,7vh,92px)!important;
  }

  /* HERO: Custom-made. Just for you. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    font-size:clamp(4.25rem,min(7.15vw,8.6vh),8.15rem)!important;
    line-height:1.00!important;
    font-weight:800!important;
    letter-spacing:-.025em!important;
  }

  /* Portfolio / Precision / Power supporting statement. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--5 {
    font-size:clamp(2.80rem,min(4.55vw,5.75vh),5.35rem)!important;
    line-height:1.06!important;
    font-weight:700!important;
  }

  /* Requested highlight colour on Portfolio, Precision and Power only. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--5
  .cr-v2-screen2-highlight {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
    text-shadow:
      0 0 10px rgba(167,139,250,.18),
      0 0 22px rgba(124,58,237,.10)!important;
  }

  /* Partner with us. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--6 {
    font-size:clamp(3.25rem,min(5.45vw,6.55vh),6.35rem)!important;
    line-height:1.02!important;
    font-weight:800!important;
  }

  /*
     Closing sentence:
     keep it visually as one paragraph, with controlled width and font size.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--7 {
    width:min(100%,1320px)!important;
    max-width:1320px!important;
    margin-left:auto!important;
    margin-right:auto!important;

    font-size:clamp(2.55rem,min(4.05vw,5.15vh),4.80rem)!important;
    line-height:1.08!important;
    font-weight:700!important;
    letter-spacing:-.01em!important;

    flex-wrap:wrap!important;
  }

  /* Keep the whole closing sentence visually together on wide desktop. */
  @media (min-width:1200px) {
    #crSticky.cr-sticky--auto-final
    .cr-v2-screen--2
    .cr-v2-line--7 {
      flex-wrap:nowrap!important;
      white-space:nowrap!important;
    }
  }
}

/* Short-height desktop: scale safely, still preserve the hierarchy. */
@media (min-width:769px) and (max-height:760px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    font-size:clamp(3.15rem,7.3vh,5.35rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--5 {
    font-size:clamp(2.25rem,4.7vh,3.55rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--6 {
    font-size:clamp(2.65rem,5.6vh,4.05rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.05rem,4.1vh,3.15rem)!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 2 / SCREEN 2 STRONGER FINAL SCALE
   ---------------------------------------------------------------------
   Stronger hierarchy requested:
   - Custom-made. Just for you. = much larger hero
   - Portfolio / Precision / Power = stronger highlight
   - Partner with us. = larger supporting statement
   - Unlock...edge = almost one full-width paragraph
   ===================================================================== */
@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 {
    width:min(96vw,1660px)!important;

    grid-template-rows:
      minmax(0,1.62fr)
      minmax(0,.98fr)
      minmax(0,.78fr)
      minmax(0,1.08fr)!important;

    gap:clamp(12px,1.7vh,24px)!important;

    padding-top:clamp(42px,5.2vh,72px)!important;
    padding-bottom:clamp(42px,5.2vh,72px)!important;
    padding-left:clamp(34px,3.6vw,72px)!important;
    padding-right:clamp(34px,3.6vw,72px)!important;
  }

  /* HERO — much more dominant */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    font-size:clamp(4.85rem,min(8.15vw,9.45vh),9.25rem)!important;
    line-height:.96!important;
    font-weight:800!important;
    letter-spacing:-.035em!important;

    width:100%!important;
    max-width:1500px!important;
  }

  /* Portfolio sentence — slightly larger overall */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--5 {
    font-size:clamp(3.15rem,min(5.15vw,6.30vh),5.95rem)!important;
    line-height:1.03!important;
    font-weight:700!important;
  }

  /*
     Portfolio / Precision / Power:
     stronger purple-white highlight, more visible than supporting words.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--5
  .cr-v2-screen2-highlight {
    color:#d9c8ff!important;
    -webkit-text-fill-color:#d9c8ff!important;
    font-weight:800!important;

    text-shadow:
      0 0 5px rgba(255,255,255,.62),
      0 0 13px rgba(216,196,255,.72),
      0 0 26px rgba(167,139,250,.58),
      0 0 44px rgba(124,58,237,.30)!important;

    filter:brightness(1.15)!important;
  }

  /* Partner with us — stronger and larger */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--6 {
    font-size:clamp(3.70rem,min(6.15vw,7.25vh),7.05rem)!important;
    line-height:.99!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
  }

  /*
     Closing line — nearly one full-width paragraph.
     Keep it centered and almost single-line on normal desktop.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--7 {
    width:min(98%,1540px)!important;
    max-width:1540px!important;

    margin-left:auto!important;
    margin-right:auto!important;

    font-size:clamp(2.85rem,min(4.55vw,5.55vh),5.25rem)!important;
    line-height:1.04!important;
    font-weight:700!important;
    letter-spacing:-.018em!important;

    justify-content:center!important;
    align-content:center!important;
  }
}

/* Keep the closing paragraph on one visual line whenever width allows. */
@media (min-width:1100px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--7 {
    white-space:nowrap!important;
    flex-wrap:nowrap!important;
  }
}

/* Mid desktop: keep scale high but allow closing line to wrap once if needed. */
@media (min-width:769px) and (max-width:1099px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    font-size:clamp(4rem,8.2vw,6.2rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--5 {
    font-size:clamp(2.7rem,5.1vw,4.2rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--6 {
    font-size:clamp(3.15rem,6vw,4.7rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.35rem,4.35vw,3.5rem)!important;
    white-space:normal!important;
    flex-wrap:wrap!important;
  }
}

/* Short-height desktop safety: still visibly larger than the previous version. */
@media (min-width:769px) and (max-height:760px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 {
    padding-top:32px!important;
    padding-bottom:32px!important;
    gap:10px!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    font-size:clamp(3.55rem,8.2vh,5.85rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--5 {
    font-size:clamp(2.45rem,5.15vh,3.85rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--6 {
    font-size:clamp(2.95rem,6.1vh,4.55rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.15rem,4.35vh,3.25rem)!important;
  }
}

/* Large desktop: use the screen confidently. */
@media (min-width:1600px) and (min-height:800px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 {
    width:min(95vw,1740px)!important;
    padding-left:70px!important;
    padding-right:70px!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    font-size:clamp(6.1rem,7.8vw,9.6rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--7 {
    width:min(100%,1640px)!important;
    max-width:1640px!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 1 TOP/BOTTOM DIM COLOUR SYMMETRY
   ---------------------------------------------------------------------
   Past/top lines already contain revealed words in their original colour
   families and are dimmed by line-level opacity/saturation.

   Future/bottom lines previously used the separate ghost word palette,
   which made the lower stack look darker/different.

   Make future words use the SAME original colour families as the top stack.
   The existing identical line opacity/saturation/brightness now dims both
   directions evenly.
   ===================================================================== */
@media (min-width:769px) {

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--w {
    color:var(--word-lit)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--p {
    color:var(--word-lit-p)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--g {
    color:var(--word-lit-g)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--gp {
    color:var(--word-lit-gp)!important;
  }

  /* Same treatment if any word still contains the internal motion layer. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--w .cr-word-motion {
    color:var(--word-lit)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--p .cr-word-motion {
    color:var(--word-lit-p)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--g .cr-word-motion {
    color:var(--word-lit-g)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--gp .cr-word-motion {
    color:var(--word-lit-gp)!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 2 SCREEN 2: HERO + PORTFOLIO + TIGHT PARAGRAPH GROUP
   ===================================================================== */
@media (min-width:769px) {

  /*
     Screen 2 now has only 3 major vertical regions:
     1) Hero
     2) Portfolio / Precision / Power / Purpose
     3) Partner + Unlock paragraph group
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 {
    width:min(97vw,1740px)!important;

    grid-template-rows:
      minmax(0,1.72fr)
      minmax(0,.94fr)
      minmax(0,1.18fr)!important;

    gap:clamp(10px,1.4vh,20px)!important;

    padding-top:clamp(32px,4.2vh,62px)!important;
    padding-bottom:clamp(32px,4.2vh,62px)!important;
    padding-left:clamp(28px,3.1vw,60px)!important;
    padding-right:clamp(28px,3.1vw,60px)!important;
  }

  /* Larger hero than previous version. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    font-size:clamp(5.25rem,min(8.65vw,10.1vh),9.85rem)!important;
    line-height:.94!important;
    font-weight:800!important;
    letter-spacing:-.04em!important;

    width:100%!important;
    max-width:1600px!important;
  }

  /* Portfolio statement also gets more scale. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--5 {
    font-size:clamp(3.35rem,min(5.45vw,6.65vh),6.25rem)!important;
    line-height:1.02!important;
    font-weight:700!important;
  }

  /*
     Portfolio / Precision / Power / Purpose:
     visibly stronger highlight than all supporting words.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--5
  .cr-v2-screen2-highlight {
    color:#e5d8ff!important;
    -webkit-text-fill-color:#e5d8ff!important;
    font-weight:900!important;

    text-shadow:
      0 0 5px rgba(255,255,255,.82),
      0 0 12px rgba(238,229,255,.82),
      0 0 24px rgba(196,175,245,.78),
      0 0 40px rgba(167,139,250,.62),
      0 0 64px rgba(124,58,237,.34)!important;

    filter:brightness(1.24)!important;
  }

  /*
     Partner + Unlock are one paragraph unit.
     They remain two readable rows, but with intentionally small separation.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-screen2-paragraph-group {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;

    width:100%!important;
    height:100%!important;
    min-height:0!important;

    gap:clamp(3px,.55vh,8px)!important;
    margin:0!important;
    padding:0!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-screen2-paragraph-group
  .cr-v2-line {
    height:auto!important;
    min-height:0!important;
    flex:none!important;
  }

  /* Partner with us. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--6 {
    font-size:clamp(3.95rem,min(6.55vw,7.65vh),7.45rem)!important;
    line-height:.98!important;
    font-weight:800!important;
    letter-spacing:-.025em!important;

    margin:0!important;
  }

  /*
     Closing sentence sits immediately below Partner with us,
     like the second line of one paragraph.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--7 {
    width:min(99%,1640px)!important;
    max-width:1640px!important;

    font-size:clamp(3.05rem,min(4.75vw,5.85vh),5.55rem)!important;
    line-height:1.02!important;
    font-weight:700!important;
    letter-spacing:-.02em!important;

    margin:0!important;
    padding:0!important;

    justify-content:center!important;
    align-content:center!important;
  }
}

/* Keep closing paragraph almost single-line on normal/wide desktop. */
@media (min-width:1120px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-screen2-paragraph-group
  .cr-v2-line--7 {
    white-space:nowrap!important;
    flex-wrap:nowrap!important;
  }
}

/* Mid-width fallback: preserve proximity while allowing one safe wrap. */
@media (min-width:769px) and (max-width:1119px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    font-size:clamp(4.15rem,8.5vw,6.5rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--6 {
    font-size:clamp(3.15rem,6.2vw,4.85rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.45rem,4.55vw,3.65rem)!important;
    white-space:normal!important;
    flex-wrap:wrap!important;
  }
}

/* Short-height desktop safety. */
@media (min-width:769px) and (max-height:760px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 {
    padding-top:24px!important;
    padding-bottom:24px!important;
    gap:6px!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    font-size:clamp(3.75rem,8.55vh,6.05rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--5 {
    font-size:clamp(2.55rem,5.25vh,3.95rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--6 {
    font-size:clamp(3rem,6.2vh,4.65rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.15rem,4.35vh,3.30rem)!important;
  }
}

/* Large-screen boost. */
@media (min-width:1600px) and (min-height:800px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 {
    width:min(96vw,1820px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    font-size:clamp(6.4rem,8.25vw,10.15rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--7 {
    width:min(100%,1720px)!important;
    max-width:1720px!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 1 STRONGER ACTIVE-LINE FOCUS
   ---------------------------------------------------------------------
   JS now gives previous and next lines the same lower opacity/saturation.
   This CSS removes any extra glow that could make ghost lines compete with
   the centered active sentence.
   ===================================================================== */
@media (min-width:769px) {

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past
  .cw,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw {
    text-shadow:none!important;
  }

  /* Active line stays crisp and visually dominant. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active {
    z-index:10!important;
  }
}


/* =====================================================================
   SECTION 2 — FIRST VIEW: SMOOTHER SCROLL / CLEARER ACTIVE CENTRE
   ===================================================================== */
@media (min-width:769px) {

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line {
    /*
       No time-based line fade/tween here.
       Position, opacity and filter are all driven directly by scroll progress,
       which prevents lag, catching-up, and sudden fade acceleration.
    */
    transition:none!important;
    will-change:transform,opacity,filter;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cw {
    transition:
      color .48s cubic-bezier(.22,1,.36,1),
      text-shadow .48s ease,
      opacity .42s ease!important;
  }

  /*
     Top / previous stack gets an extra soft visual suppression.
     Bottom remains visible enough as a preview.
  */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past
  .cw {
    text-shadow:none!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active {
    z-index:20!important;
  }
}


/* =====================================================================
   VIEW 2 / SCREEN 2 — ONE-TIME FOUR-WORD GLITTER, THEN NORMAL PALETTE
   ===================================================================== */

/*
   During glitter these four words may use the stronger emphasis already
   defined above. Once the single glitter pass completes, remove that extra
   visual treatment and restore each word's original colour family.
*/
@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-screen2-highlight {
    font-weight:inherit!important;
    filter:none!important;
    text-shadow:none!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-screen2-highlight.cw--w {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-screen2-highlight.cw--p {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-screen2-highlight.cw--g {
    color:var(--word-lit-g)!important;
    -webkit-text-fill-color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-screen2-highlight.cw--gp {
    color:var(--word-lit-gp)!important;
    -webkit-text-fill-color:var(--word-lit-gp)!important;
  }
}


/* =====================================================================
   MACBOOK PRO 16-INCH / LARGE LAPTOP VIEW
   Custom-made.
   Just for you.
   ---------------------------------------------------------------------
   Force the hero into two deliberate centred rows on this display class.
   ===================================================================== */
@media
  (min-width:1360px) and
  (max-width:1800px) and
  (min-height:800px) and
  (max-height:1200px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    align-content:center!important;

    width:min(100%,1560px)!important;
    max-width:1560px!important;

    font-size:clamp(5.8rem,min(7.55vw,8.65vh),8.35rem)!important;
    line-height:.96!important;
    text-align:center!important;
  }

  /*
     "Custom-made." occupies the whole first row.
     Just / for / you. naturally sit centred together on the second row.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4
  .cw:first-child {
    flex:0 0 100%!important;
    width:100%!important;
    margin-right:0!important;
    text-align:center!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4
  .cw:nth-child(n+2) {
    flex:0 0 auto!important;
  }

  /* Keep the second row visually close beneath the hero word. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--4 {
    row-gap:.02em!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 2 SCREEN 2
   CLEAN FINAL COLOUR AFTER ONE-TIME GLITTER
   ---------------------------------------------------------------------
   After glitter:
   Portfolio = WHITE
   Precision = PURPLE
   Power     = WHITE
   Purpose   = PURPLE

   No text-shadow, glow, filter or permanent glitter emphasis remains.
   ===================================================================== */
@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-line--5
  .cr-v2-screen2-highlight {
    text-shadow:none!important;
    filter:none!important;
    box-shadow:none!important;
    animation:none!important;
    font-weight:inherit!important;
  }

  /* Portfolio — white */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-line--5
  .cw:nth-child(1) {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
    text-shadow:none!important;
    filter:none!important;
  }

  /* Precision — purple */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-line--5
  .cw:nth-child(4) {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
    text-shadow:none!important;
    filter:none!important;
  }

  /* Power — white */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-line--5
  .cw:nth-child(5) {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
    text-shadow:none!important;
    filter:none!important;
  }

  /* Purpose — purple */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-line--5
  .cw:nth-child(6) {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
    text-shadow:none!important;
    filter:none!important;
  }

  /* Safety: no leftover sparkle/shine rendering after completion. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-line--5
  .cr-live-glitter-layer,

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2.cr-v2-screen2-glitter-done
  .cr-v2-line--5
  .cr-live-glitter-spark {
    display:none!important;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 1 FINAL SCROLL-MOTION OVERRIDE
   Full physical travel, no time-based fast fade.
   ===================================================================== */
@media (min-width:769px) {
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line {
    transition:none!important;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform-style:preserve-3d;
  }
}


/* =====================================================================
   SECTION 2 — VIEW 1 STRICT WORD-BY-WORD COLOUR
   ---------------------------------------------------------------------
   IMPORTANT:
   - Previous line = dim ghost palette
   - Next/future line = dim ghost palette
   - Active unreached words = dim ghost palette
   - ONLY active .lit words = original white/purple/supporting colour

   This overrides the older symmetric-dim patch that gave future words their
   final colours too early.
   ===================================================================== */
@media (min-width:769px) {

  /* Past / previous words: always ghost palette. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past
  .cw--w,
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--w {
    color:var(--word-ghost)!important;
    -webkit-text-fill-color:var(--word-ghost)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past
  .cw--p,
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--p {
    color:var(--word-ghost-p)!important;
    -webkit-text-fill-color:var(--word-ghost-p)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past
  .cw--g,
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--g {
    color:var(--word-g)!important;
    -webkit-text-fill-color:var(--word-g)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past
  .cw--gp,
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--gp {
    color:var(--word-gp)!important;
    -webkit-text-fill-color:var(--word-gp)!important;
  }

  /*
     If legacy motion wrappers exist, keep those ghosted too.
     They must not inherit final white/purple before the line becomes active.
  */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past
  .cw--w .cr-word-motion,
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--w .cr-word-motion {
    color:var(--word-ghost)!important;
    -webkit-text-fill-color:var(--word-ghost)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past
  .cw--p .cr-word-motion,
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--p .cr-word-motion {
    color:var(--word-ghost-p)!important;
    -webkit-text-fill-color:var(--word-ghost-p)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past
  .cw--g .cr-word-motion,
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--g .cr-word-motion {
    color:var(--word-g)!important;
    -webkit-text-fill-color:var(--word-g)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past
  .cw--gp .cr-word-motion,
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future
  .cw--gp .cr-word-motion {
    color:var(--word-gp)!important;
    -webkit-text-fill-color:var(--word-gp)!important;
  }

  /* Active line unreached words stay ghost. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active
  .cw--w:not(.lit) {
    color:var(--word-ghost)!important;
    -webkit-text-fill-color:var(--word-ghost)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active
  .cw--p:not(.lit) {
    color:var(--word-ghost-p)!important;
    -webkit-text-fill-color:var(--word-ghost-p)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active
  .cw--g:not(.lit) {
    color:var(--word-g)!important;
    -webkit-text-fill-color:var(--word-g)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active
  .cw--gp:not(.lit) {
    color:var(--word-gp)!important;
    -webkit-text-fill-color:var(--word-gp)!important;
  }

  /* Active accepted words restore only their own original colour family. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active
  .cw--w.lit {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active
  .cw--p.lit {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active
  .cw--g.lit {
    color:var(--word-lit-g)!important;
    -webkit-text-fill-color:var(--word-lit-g)!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active
  .cw--gp.lit {
    color:var(--word-lit-gp)!important;
    -webkit-text-fill-color:var(--word-lit-gp)!important;
  }
}


/* =====================================================================
   SECTION 2 — FIRST VIEW FINAL-LINE CLEAN HANDOFF
   ===================================================================== */
@media (min-width:769px) {

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll {
    isolation:isolate!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active {
    z-index:30!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--future {
    z-index:10!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past {
    z-index:5!important;
  }

  /*
     Keep movement fully scroll-driven. No timed speed fade/catch-up.
  */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line {
    transition:none!important;
  }

  /*
     Gentle top-edge mask for already departing faded text.
     It does not cover the centered active sentence.
  */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:16%;
    z-index:40;
    pointer-events:none;
    background:linear-gradient(
      to bottom,
      var(--bg) 0%,
      color-mix(in srgb,var(--bg) 82%,transparent) 42%,
      transparent 100%
    );
  }

  @supports not (background:color-mix(in srgb,#000 50%,transparent)) {
    #crSticky:not(.cr-sticky--auto-final)
    .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll::before {
      background:linear-gradient(
        to bottom,
        var(--bg) 0%,
        transparent 100%
      );
    }
  }
}


/* =====================================================================
   SECTION 2 — FIRST VIEW FINAL LINE
   Only the immediately previous sentence may remain above Unlock...edge.
   Older lines are driven to opacity:0 by Home.js.
   ===================================================================== */
@media (min-width:769px) {
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--active {
    z-index:30!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line.cr-line--past {
    z-index:5!important;
    pointer-events:none!important;
  }
}


/* =====================================================================
   SECTION 2 — FIRST VIEW FINAL SCREEN ABSOLUTE CLEANUP
   ---------------------------------------------------------------------
   When Unlock your ultimate...edge is the active sentence:
   - Lines 1–8: FORCE HIDDEN
   - Line 9 Partner with us.: the ONLY previous line allowed
   - Line 10 Unlock...edge: active

   !important is deliberate here to defeat all older ghost/dim overrides.
   ===================================================================== */
@media (min-width:769px) {

  /* Hard-hide every older sentence before Partner with us. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll.cr-v1-final-active
  .cr-line:nth-of-type(-n+8) {
    opacity:0!important;
    visibility:hidden!important;
    filter:none!important;
    pointer-events:none!important;
    z-index:-1!important;
  }

  /* Also hide all inner word/motion/placeholder layers on those lines. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll.cr-v1-final-active
  .cr-line:nth-of-type(-n+8)
  .cw,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll.cr-v1-final-active
  .cr-line:nth-of-type(-n+8)
  .cr-word-motion,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll.cr-v1-final-active
  .cr-line:nth-of-type(-n+8)
  .cr-word-placeholder {
    opacity:0!important;
    visibility:hidden!important;
    text-shadow:none!important;
  }

  /*
     Partner with us. is line 9 and is the ONLY recent previous sentence
     allowed above the final active line.
  */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll.cr-v1-final-active
  .cr-line.cr-line--9 {
    visibility:visible!important;
    opacity:.065!important;
    z-index:6!important;
    pointer-events:none!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll.cr-v1-final-active
  .cr-line.cr-line--9
  .cw {
    text-shadow:none!important;
  }

  /* Final active Unlock line always stays clean and above everything. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll.cr-v1-final-active
  .cr-line.cr-line--10 {
    visibility:visible!important;
    z-index:30!important;
  }
}


/* =====================================================================
   SECTION 2 — FIRST VIEW CUSTOM BRIGHT WORD COLOURS
   ---------------------------------------------------------------------
   Applies ONLY to the active/revealed (.lit) words in First View.
   View 2 remains unchanged.

   You imagine. We build.
     white / purple / white / purple

   Our ... life.
     Our = white
     life. = white

   Achieve products ... edge.
     Achieve = purple
     products = white
     edge. = white

   Custom-made. Just for you.
     you. = purple

   Precision. Power. Purpose.
     white / purple / white

   Final edge.
     white, NO glow
   ===================================================================== */
@media (min-width:769px) {

  /* Bright palette — intentionally clean, no glow. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--active
  .cw.lit {
    text-shadow:none!important;
    filter:none!important;
  }


  /* ---------------------------------------------------------
     LINE 4 — You imagine. We build.
     --------------------------------------------------------- */

  /* You = WHITE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--4.cr-line--active
  .cw:nth-child(1).lit {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
  }

  /* imagine. = PURPLE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--4.cr-line--active
  .cw:nth-child(2).lit {
    color:#a78bfa!important;
    -webkit-text-fill-color:#a78bfa!important;
  }

  /* We = WHITE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--4.cr-line--active
  .cw:nth-child(3).lit {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
  }

  /* build. = PURPLE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--4.cr-line--active
  .cw:nth-child(4).lit {
    color:#a78bfa!important;
    -webkit-text-fill-color:#a78bfa!important;
  }


  /* ---------------------------------------------------------
     LINE 5 — Our world-class ... life.
     --------------------------------------------------------- */

  /* Our = WHITE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--5.cr-line--active
  .cw:nth-child(1).lit {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
  }

  /* life. = WHITE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--5.cr-line--active
  .cw:nth-child(9).lit {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
  }


  /* ---------------------------------------------------------
     LINE 6 — Achieve products ... edge.
     --------------------------------------------------------- */

  /* Achieve = PURPLE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--6.cr-line--active
  .cw:nth-child(1).lit {
    color:#a78bfa!important;
    -webkit-text-fill-color:#a78bfa!important;
  }

  /* products = WHITE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--6.cr-line--active
  .cw:nth-child(2).lit {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
  }

  /* edge. = WHITE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--6.cr-line--active
  .cw:nth-child(9).lit {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
  }


  /* ---------------------------------------------------------
     LINE 7 — Custom-made. Just for you.
     --------------------------------------------------------- */

  /* you. = PURPLE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--7.cr-line--active
  .cw:nth-child(4).lit {
    color:#a78bfa!important;
    -webkit-text-fill-color:#a78bfa!important;
  }


  /* ---------------------------------------------------------
     LINE 8 — Portfolio that lends Precision. Power. Purpose.
     Precision / Power / Purpose = WHITE / PURPLE / WHITE
     --------------------------------------------------------- */

  /* Precision. = WHITE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--8.cr-line--active
  .cw:nth-child(4).lit {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
  }

  /* Power. = PURPLE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--8.cr-line--active
  .cw:nth-child(5).lit {
    color:#a78bfa!important;
    -webkit-text-fill-color:#a78bfa!important;
  }

  /* Purpose. = WHITE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--8.cr-line--active
  .cw:nth-child(6).lit {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
  }


  /* ---------------------------------------------------------
     LINE 10 — final edge. = WHITE, NO GLOW
     --------------------------------------------------------- */

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cw:nth-child(7).lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cr-v1-edge-word.lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cr-v1-edge-word.cr-v1-final-edge-glow {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    text-shadow:none!important;
    filter:none!important;
    animation:none!important;
  }
}


/* =====================================================================
   SECTION 2 — FIRST VIEW FINAL WORD COLOUR REBALANCE
   ---------------------------------------------------------------------
   life.  = PURPLE
   you.   = WHITE
   final edge. = plain WHITE, absolutely no glow/shadow/filter/animation
   ===================================================================== */
@media (min-width:769px) {

  /* Our world-class coding prowess brings your ideas to life. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--5.cr-line--active
  .cw:nth-child(9).lit {
    color:#a78bfa!important;
    -webkit-text-fill-color:#a78bfa!important;
    text-shadow:none!important;
    filter:none!important;
  }

  /* Custom-made. Just for you. -> you. = WHITE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--7.cr-line--active
  .cw:nth-child(4).lit {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    text-shadow:none!important;
    filter:none!important;
  }

  /* Final Unlock...edge -> edge. = normal WHITE only */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cw:nth-child(7).lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cr-v1-edge-word.lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cr-v1-edge-word.cr-v1-final-edge-glow {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    text-shadow:none!important;
    filter:none!important;
    animation:none!important;
    box-shadow:none!important;
  }
}


/* =====================================================================
   SECTION 2 — FIRST VIEW FORCED FINAL WORD COLOURS
   ---------------------------------------------------------------------
   Strongest final override. It targets BOTH:
   1) the outer .cw word
   2) the inner .cr-word-motion / placeholder

   life.    = PURPLE
   you.     = PURPLE
   Purpose. = WHITE
   final edge. = plain WHITE, absolutely NO shadow/glow
   ===================================================================== */
@media (min-width:769px) {

  /* ---------------------------------------------------------
     Our world-class coding prowess brings your ideas to life.
     life. = PURPLE
     --------------------------------------------------------- */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--5.cr-line--active
  .cw:nth-child(9).lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--5.cr-line--active
  .cw:nth-child(9).lit .cr-word-motion,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--5.cr-line--active
  .cw:nth-child(9).lit .cr-word-placeholder {
    color:#a78bfa!important;
    -webkit-text-fill-color:#a78bfa!important;
    text-shadow:none!important;
    filter:none!important;
  }


  /* ---------------------------------------------------------
     Custom-made. Just for you.
     you. = PURPLE
     --------------------------------------------------------- */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--7.cr-line--active
  .cw:nth-child(4).lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--7.cr-line--active
  .cw:nth-child(4).lit .cr-word-motion,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--7.cr-line--active
  .cw:nth-child(4).lit .cr-word-placeholder {
    color:#a78bfa!important;
    -webkit-text-fill-color:#a78bfa!important;
    text-shadow:none!important;
    filter:none!important;
  }


  /* ---------------------------------------------------------
     Precision. Power. Purpose.
     Keep the alternating pattern:
     Precision = WHITE
     Power     = PURPLE
     Purpose   = WHITE
     --------------------------------------------------------- */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--8.cr-line--active
  .cw:nth-child(6).lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--8.cr-line--active
  .cw:nth-child(6).lit .cr-word-motion,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--8.cr-line--active
  .cw:nth-child(6).lit .cr-word-placeholder {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    text-shadow:none!important;
    filter:none!important;
  }


  /* ---------------------------------------------------------
     FINAL: Unlock your ultimate corporate & institutional edge.
     edge. = plain WHITE only — no shadow, glow, animation or filter
     --------------------------------------------------------- */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cw:nth-child(7),

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cw:nth-child(7) .cr-word-motion,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cw:nth-child(7) .cr-word-placeholder,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-edge-word,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-edge-word .cr-word-motion,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-edge-word .cr-word-placeholder {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    text-shadow:none!important;
    filter:none!important;
    animation:none!important;
    box-shadow:none!important;
  }

  /* Kill any leftover first-view edge glitter/glow layer completely. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-edge-word
  .cr-live-glitter-layer,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-edge-word
  .cr-live-glitter-spark {
    display:none!important;
  }
}


/* =====================================================================
   SECTION 2 — FIRST VIEW CORRECT FINAL-WORD COLOURS
   ---------------------------------------------------------------------
   IMPORTANT:
   These lines contain extra .cr-v1-break spans, so nth-child selectors can
   point to the wrong word. Use .cw:last-child for the real final word.

   life.    = PURPLE
   you.     = PURPLE
   Purpose. = WHITE
   final edge. = plain WHITE, no glow/shadow
   ===================================================================== */
@media (min-width:769px) {

  /* Shared: when these final words are lit, show one clean real word only. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--5.cr-line--active
  .cw:last-child.lit .cr-word-placeholder,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--7.cr-line--active
  .cw:last-child.lit .cr-word-placeholder,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--8.cr-line--active
  .cw:last-child.lit .cr-word-placeholder,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cw:last-child.lit .cr-word-placeholder {
    opacity:0!important;
    visibility:hidden!important;
    display:none!important;
  }

  /* Make sure the actual animated word is fully visible. */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--5.cr-line--active
  .cw:last-child.lit .cr-word-motion,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--7.cr-line--active
  .cw:last-child.lit .cr-word-motion,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--8.cr-line--active
  .cw:last-child.lit .cr-word-motion,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cw:last-child.lit .cr-word-motion {
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
    text-shadow:none!important;
  }

  /* life. = bright PURPLE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--5.cr-line--active
  .cw:last-child.lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--5.cr-line--active
  .cw:last-child.lit .cr-word-motion {
    color:#a78bfa!important;
    -webkit-text-fill-color:#a78bfa!important;
    text-shadow:none!important;
    filter:none!important;
  }

  /* you. = bright PURPLE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--7.cr-line--active
  .cw:last-child.lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--7.cr-line--active
  .cw:last-child.lit .cr-word-motion {
    color:#a78bfa!important;
    -webkit-text-fill-color:#a78bfa!important;
    text-shadow:none!important;
    filter:none!important;
  }

  /* Purpose. = bright WHITE */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--8.cr-line--active
  .cw:last-child.lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--8.cr-line--active
  .cw:last-child.lit .cr-word-motion {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    text-shadow:none!important;
    filter:none!important;
  }

  /* Final edge. = plain bright WHITE, absolutely no glow */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cw:last-child,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cw:last-child .cr-word-motion,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-edge-word,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-edge-word .cr-word-motion {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    text-shadow:none!important;
    filter:none!important;
    animation:none!important;
    box-shadow:none!important;
  }

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-edge-word
  .cr-live-glitter-layer,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-edge-word
  .cr-live-glitter-spark {
    display:none!important;
  }
}

/* =====================================================================
   SECTION 2 — FINAL TIMING FIX
   ---------------------------------------------------------------------
   Do NOT show the final "institutional / edge" finish before the visitor
   actually reaches those words in View 1. Legacy rules above intentionally
   forced edge white at all times; these last rules restore the dim placeholder
   until the word receives .lit from the current scroll step.
   ===================================================================== */
@media (min-width:769px) {

  /* institutional: muted before its own step */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-institutional-white:not(.lit),

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-institutional-white:not(.lit) .cr-word-motion {
    color:var(--word-gp)!important;
    -webkit-text-fill-color:var(--word-gp)!important;
    text-shadow:none!important;
    filter:none!important;
    animation:none!important;
  }

  /* edge: muted before its FINAL scroll step */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-edge-word:not(.lit),

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10
  .cr-v1-edge-word:not(.lit) .cr-word-motion {
    color:var(--word-ghost-p)!important;
    -webkit-text-fill-color:var(--word-ghost-p)!important;
    text-shadow:none!important;
    filter:none!important;
    animation:none!important;
    box-shadow:none!important;
  }

  /* institutional gets its requested white only when its scroll step is reached */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cr-v1-institutional-white.lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cr-v1-institutional-white.lit .cr-word-motion {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
  }

  /* edge gets its requested clean white only at the final scroll step */
  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cr-v1-edge-word.lit,

  #crSticky:not(.cr-sticky--auto-final)
  .cr-copy.cr-copy--sequence.cr-copy--custom-word-scroll
  .cr-line--10.cr-line--active
  .cr-v1-edge-word.lit .cr-word-motion {
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    text-shadow:none!important;
    filter:none!important;
    animation:none!important;
    box-shadow:none!important;
  }
}



/* =====================================================================
   SECTION 2 — MACBOOK PRO 16-INCH: VIEW 2 / SCREEN 2 POSITION TUNING
   ---------------------------------------------------------------------
   Mac Retina only:
   - Portfolio line (second visual line) sits slightly higher.
   - Partner + Unlock final paragraph pair moves toward the visual centre.
   Normal Windows/laptop layouts are intentionally untouched.
   ===================================================================== */
@media
  (min-width:1360px) and
  (max-width:1800px) and
  (min-height:800px) and
  (max-height:1200px) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2 {
    /* Keep the hero dominant but give the lower paragraph group more central room. */
    grid-template-rows:
      minmax(0,1.62fr)
      minmax(0,.82fr)
      minmax(0,1.38fr)!important;

    gap:clamp(7px,.9vh,13px)!important;
    padding-top:clamp(26px,3.2vh,44px)!important;
    padding-bottom:clamp(26px,3.2vh,44px)!important;
  }

  /* Second visual line: Portfolio ... Precision. Power. Purpose. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-line--5 {
    transform:translate3d(0,-18px,0)!important;
  }

  /* Last two lines: move the pair slightly upward, toward screen centre. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-screen2-paragraph-group {
    justify-content:center!important;
    transform:translate3d(0,-10px,0)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-screen2-paragraph-group
  .cr-v2-line--6,

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen--2
  .cr-v2-screen2-paragraph-group
  .cr-v2-line--7 {
    justify-content:center!important;
    align-content:center!important;
  }
}

/* =====================================================================
   SECTION 2 — FINAL VIEW 2 MATCHES VIEW 1
   ---------------------------------------------------------------------
   The dedicated View 2 keeps its current layout, but uses View 1's clean
   dim -> active word treatment. No glow, glitter or blur is used.
   ===================================================================== */
@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final .cr-v2-screen {
    filter:none!important;
    transform:translateX(-50%) translateY(34px)!important;
    transition:
      opacity .95s cubic-bezier(.22,1,.36,1),
      transform .95s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .95s!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-screen.is-active {
    transform:translateX(-50%) translateY(0)!important;
    filter:none!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-screen.is-leaving {
    transform:translateX(-50%) translateY(-34px)!important;
    filter:none!important;
  }

  /* View 1 style: unreached words stay in their original ghost family. */
  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--w:not(.lit) {
    color:var(--word-ghost)!important;
    -webkit-text-fill-color:var(--word-ghost)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--p:not(.lit) {
    color:var(--word-ghost-p)!important;
    -webkit-text-fill-color:var(--word-ghost-p)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--g:not(.lit) {
    color:var(--word-g)!important;
    -webkit-text-fill-color:var(--word-g)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--gp:not(.lit) {
    color:var(--word-gp)!important;
    -webkit-text-fill-color:var(--word-gp)!important;
  }

  /* Reached words restore the same colour families used in View 1. */
  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--w.lit {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--p.lit {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--g.lit {
    color:var(--word-lit-g)!important;
    -webkit-text-fill-color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line .cw--gp.lit {
    color:var(--word-lit-gp)!important;
    -webkit-text-fill-color:var(--word-lit-gp)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line .cw {
    text-shadow:none!important;
    filter:none!important;
    box-shadow:none!important;
    animation:none!important;
    transition:
      color .55s cubic-bezier(.22,1,.36,1),
      -webkit-text-fill-color .55s cubic-bezier(.22,1,.36,1),
      opacity .55s cubic-bezier(.22,1,.36,1)!important;
  }

  /* Kill every legacy View 2 glow/glitter layer. */
  #crSticky.cr-sticky--auto-final .cr-v2-line .cr-live-glitter-layer,
  #crSticky.cr-sticky--auto-final .cr-v2-line .cr-live-glitter-spark {
    display:none!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-final-important,
  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-important-glitter,
  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cr-v2-important {
    text-shadow:none!important;
    filter:none!important;
    animation:none!important;
  }
}

/* =====================================================================
   SECTION 2 — OLD MAIN-WORD GLITTER, NO FLOATING STARS
   ---------------------------------------------------------------------
   - Same moving old-style letter shine on main words.
   - No separate ✦ / ✧ particles above or below any word.
   - Works on BOTH View-2 screens.
   - Clean View-2 layout/timing remains untouched.
   ===================================================================== */
@media (min-width:769px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-v2-main-glitter-target.cr-v2-glitter-running {
    position:relative!important;
    display:inline-block!important;
    overflow:visible!important;
    isolation:isolate!important;
    transform:none!important;
    filter:none!important;
  }

  /* Moving glitter stays INSIDE the actual word letters. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-v2-main-glitter-target.cr-v2-glitter-running
  .cr-live-glitter-layer {
    display:inline-block!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    margin:0!important;
    transform:none!important;
    pointer-events:none!important;
  }

  /* Never show detached star/spark particles in View 2. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cr-live-glitter-spark {
    display:none!important;
  }

  /* Keep only a controlled glow during the letter-shine pass. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-line
  .cw.cr-v2-main-glitter-target.cr-v2-glitter-running.cr-important-glitter {
    text-shadow:
      0 0 6px rgba(255,255,255,.30),
      0 0 15px rgba(167,139,250,.28),
      0 0 24px rgba(124,58,237,.14)!important;
  }
}

/* =====================================================================
   SECTION 2 — FINAL VIEW 2: ONE SCREEN / LEFT + RIGHT COLUMNS
   ---------------------------------------------------------------------
   Requested layout:
   - Old Screen 1 = LEFT column
   - Old Screen 2 = RIGHT column
   - Both columns are visible in ONE screen
   - All text is LEFT aligned
   - Both columns use the SAME smooth entrance at the SAME time
   - Existing word colours and approved main-word glitter stay intact
   ===================================================================== */
@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated
  .cr-v2-stage {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    position:absolute!important;
    inset:0!important;
    width:min(96vw,1780px)!important;
    height:100vh!important;
    margin:0 auto!important;
    padding:
      clamp(58px,6.5vh,92px)
      clamp(38px,3.4vw,68px)!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:clamp(68px,7vw,138px)!important;
    align-items:center!important;

    left:50%!important;
    transform:translateX(-50%)!important;
    pointer-events:none!important;
  }

  /*
     The two former screens are now normal column DIVs.
     Both begin from the same Y offset and receive .is-active together.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen {
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;

    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;

    margin:0!important;
    padding:clamp(8px,1vh,16px) 0!important;
    max-width:760px!important;

    opacity:0!important;
    visibility:hidden!important;
    transform:translate3d(0,34px,0)!important;
    filter:none!important;

    transition:
      opacity .95s cubic-bezier(.22,1,.36,1),
      transform .95s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .95s!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen.is-active {
    opacity:1!important;
    visibility:visible!important;
    transform:translate3d(0,0,0)!important;
    transition-delay:0s!important;
  }

  /* LEFT COLUMN */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1 {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:stretch!important;
    justify-self:start!important;
    gap:clamp(30px,3.8vh,52px)!important;
  }

  /* RIGHT COLUMN */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:stretch!important;
    justify-self:end!important;
    gap:clamp(24px,3vh,42px)!important;
  }

  /*
     Every line is LEFT aligned on both sides.
     This intentionally overrides all older center-align rules.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line {
    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    align-items:baseline!important;
    align-content:flex-start!important;

    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-width:100%!important;

    margin:0!important;
    padding:0!important;

    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
    letter-spacing:-.018em!important;

    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen2-paragraph-group {
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:clamp(18px,2.2vh,30px)!important;
    width:100%!important;
    transform:none!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen2-paragraph-group
  .cr-v2-line {
    justify-content:flex-start!important;
    text-align:left!important;
  }

  /*
     Balanced typography for a 50/50 desktop composition.
     Keep Playfair and existing colour families, only resize to prevent overlap.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-family:'Playfair Display',serif!important;
    font-size:clamp(2.55rem,3.65vw,4.85rem)!important;
    font-weight:700!important;
    line-height:1.08!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-family:'Playfair Display',serif!important;
    font-size:clamp(2.15rem,2.95vw,3.95rem)!important;
    font-weight:700!important;
    line-height:1.10!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--4 {
    font-size:clamp(2.55rem,3.35vw,4.45rem)!important;
    line-height:1.06!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--5 {
    font-size:clamp(2.05rem,2.65vw,3.45rem)!important;
  }

  /*
     Same smooth text colour arrival for ALL words on BOTH sides.
     JS adds .lit to the complete left/right text at the exact same time.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    transition:
      color .72s cubic-bezier(.22,1,.36,1),
      -webkit-text-fill-color .72s cubic-bezier(.22,1,.36,1),
      opacity .72s cubic-bezier(.22,1,.36,1)!important;
  }
}

/* Short desktop / laptop: keep both columns readable without overlap. */
@media (min-width:769px) and (max-height:760px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    padding-top:42px!important;
    padding-bottom:42px!important;
    padding-left:34px!important;
    padding-right:34px!important;
    column-gap:clamp(50px,5.5vw,88px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(2.15rem,3.05vw,3.75rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(1.82rem,2.45vw,3.05rem)!important;
  }
}



/* Typical 1024–1399px desktop widths: keep the larger look without collision. */
@media (min-width:769px) and (max-width:1399px) {
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen {
    width:96vw!important;
    padding-left:30px!important;
    padding-right:30px!important;
    column-gap:clamp(42px,5vw,72px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen {
    max-width:100%!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(2rem,3.1vw,3.45rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(1.68rem,2.5vw,2.85rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--4 {
    font-size:clamp(2rem,2.9vw,3.25rem)!important;
  }
}

/* Mobile/tablet: stack the same two columns vertically for readability. */
@media (max-width:768px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100vh!important;
    padding:64px 22px 46px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:34px!important;
    overflow:hidden!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen {
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateY(22px)!important;
    transition:
      opacity .82s cubic-bezier(.22,1,.36,1),
      transform .82s cubic-bezier(.22,1,.36,1)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen.is-active {
    opacity:1!important;
    visibility:visible!important;
    transform:translateY(0)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen2-paragraph-group .cr-v2-line {
    height:auto!important;
    justify-content:flex-start!important;
    text-align:left!important;
    margin:0!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen2-paragraph-group {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(1.62rem,6.6vw,2.35rem)!important;
    line-height:1.08!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(1.28rem,5.15vw,1.82rem)!important;
    line-height:1.10!important;
  }
}


/* =====================================================================
   SECTION 2 — DUAL COLUMN FINAL FIT / LARGER TYPE / SAFE WORD WRAP
   ---------------------------------------------------------------------
   Final composition correction:
   - use the viewport cleanly without touching either edge
   - give the RIGHT column a little more width for the long closing sentence
   - increase type while keeping every word visible
   - enforce natural wrap between words
   - maintain balanced top and bottom breathing space
   - compensate for html.kone-large-screen-105 { zoom:1.05; }
   ===================================================================== */

@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated
  .cr-v2-stage {
    overflow:hidden!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    box-sizing:border-box!important;

    /*
       92vw is deliberate: at the site's automatic 105% desktop zoom it
       still remains comfortably inside the visible viewport.
    */
    width:min(92vw,1680px)!important;
    max-width:92vw!important;
    height:100vh!important;

    padding-top:clamp(78px,10vh,118px)!important;
    padding-bottom:clamp(78px,10vh,118px)!important;
    padding-left:clamp(34px,3vw,58px)!important;
    padding-right:clamp(34px,3vw,58px)!important;

    grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)!important;
    column-gap:clamp(54px,5.6vw,104px)!important;

    align-items:center!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1 {
    justify-self:stretch!important;
    gap:clamp(34px,4.1vh,54px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    justify-self:stretch!important;
    gap:clamp(26px,3.2vh,42px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen2-paragraph-group {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:clamp(20px,2.4vh,30px)!important;
    overflow:visible!important;
  }

  /*
     Natural word wrapping:
     every word remains an individual flex item, but the line itself is
     allowed to wrap cleanly before it reaches the viewport edge.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line {
    display:flex!important;
    flex-wrap:wrap!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    justify-content:flex-start!important;
    align-items:baseline!important;
    align-content:flex-start!important;

    text-align:left!important;
    white-space:normal!important;

    overflow:visible!important;
    overflow-wrap:normal!important;
    word-break:normal!important;

    padding-right:clamp(6px,.7vw,12px)!important;
    box-sizing:border-box!important;

    letter-spacing:-.022em!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    display:inline-block!important;
    flex:0 0 auto!important;
    max-width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    margin-right:.115em!important;
  }

  /*
     Larger typography.
     LEFT is intentionally dominant, RIGHT stays slightly smaller but gets
     more horizontal room so the closing sentence wraps elegantly.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(2.72rem,3.78vw,5.05rem)!important;
    line-height:1.07!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(2.28rem,3.04vw,4.06rem)!important;
    line-height:1.08!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--4 {
    font-size:clamp(2.68rem,3.42vw,4.52rem)!important;
    line-height:1.055!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--5 {
    font-size:clamp(2.16rem,2.72vw,3.52rem)!important;
    line-height:1.075!important;
  }

  /*
     The longest closing sentence receives the full right-column width.
     No max-content sizing, no nowrap, and no legacy centering.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--7 {
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    justify-content:flex-start!important;
    text-align:left!important;
    white-space:normal!important;
    font-size:clamp(2rem,2.62vw,3.38rem)!important;
    line-height:1.09!important;
    padding-right:18px!important;
  }
}

/*
   IMPORTANT: the site zooms large desktop pages to 105%.
   Shrink only the OUTER dual-screen canvas in that state, not the text,
   so the typography still looks larger while nothing is cut on the right.
*/
@media (min-width:1600px) and (min-height:850px) {
  html.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    width:min(88vw,1600px)!important;
    max-width:88vw!important;
    padding-left:44px!important;
    padding-right:44px!important;
    column-gap:clamp(64px,5.2vw,96px)!important;
  }

  html.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(2.82rem,3.56vw,4.95rem)!important;
  }

  html.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(2.32rem,2.90vw,3.90rem)!important;
  }

  html.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--4 {
    font-size:clamp(2.72rem,3.22vw,4.34rem)!important;
  }

  html.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(2.06rem,2.48vw,3.24rem)!important;
  }
}

/* Normal laptop heights: preserve top + bottom breathing room and prevent crop. */
@media (min-width:769px) and (max-height:820px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    padding-top:clamp(52px,7vh,72px)!important;
    padding-bottom:clamp(52px,7vh,72px)!important;
    column-gap:clamp(44px,4.8vw,74px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1 {
    gap:clamp(25px,3.3vh,38px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(19px,2.5vh,30px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(2.28rem,3.22vw,3.92rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(1.92rem,2.58vw,3.08rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--4 {
    font-size:clamp(2.22rem,2.92vw,3.48rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(1.74rem,2.30vw,2.72rem)!important;
  }
}

/* Mid-size desktop: use nearly the full safe width, never the browser edge. */
@media (min-width:769px) and (max-width:1399px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    width:94vw!important;
    max-width:94vw!important;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;
    padding-left:24px!important;
    padding-right:24px!important;
    column-gap:clamp(34px,4vw,58px)!important;
  }
}


/* =====================================================================
   SECTION 2 — FINAL NO-CLIP DESKTOP + MACBOOK PRO 16"
   ---------------------------------------------------------------------
   This is the last Section-2 desktop override.
   It removes the old sticky-side-padding conflict and pins the dual screen
   by SAFE LEFT + RIGHT edges instead of width + translateX centering.
   Result:
   - nothing is hidden on the left
   - nothing is hidden on the right
   - larger text
   - natural word wrap
   - balanced top/bottom breathing room
   - safe on normal desktop and MacBook Pro 16-inch Retina / 105% mode
   ===================================================================== */
@media (min-width:769px) {

  /*
     View 2 must use the complete viewport width.
     Older Section-2 rules add horizontal padding to .cr-sticky, which was
     shrinking the true containing block and clipping the two-column screen.
  */
  #crSticky.cr-sticky--auto-final {
    padding-left:0!important;
    padding-right:0!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated {
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated
  .cr-v2-stage {
    position:absolute!important;
    inset:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    overflow:hidden!important;
  }

  /*
     Do NOT use left:50% + translateX(-50%) here.
     Pin both physical edges so browser zoom / Retina scaling cannot push
     either side outside the viewport.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    position:absolute!important;

    inset:auto!important;
    top:0!important;
    bottom:0!important;
    left:clamp(42px,4.2vw,82px)!important;
    right:clamp(42px,4.2vw,82px)!important;

    width:auto!important;
    max-width:none!important;
    height:100vh!important;

    margin:0!important;
    transform:none!important;

    padding-top:clamp(76px,9vh,112px)!important;
    padding-bottom:clamp(76px,9vh,112px)!important;
    padding-left:0!important;
    padding-right:0!important;

    display:grid!important;
    grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr)!important;
    column-gap:clamp(58px,5.2vw,108px)!important;

    align-items:center!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /* Both column boxes must be allowed to shrink inside their grid tracks. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen {
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    margin:0!important;
    padding:0!important;

    overflow:visible!important;
    box-sizing:border-box!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1 {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
    justify-self:stretch!important;
    gap:clamp(30px,3.7vh,50px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
    justify-self:stretch!important;
    gap:clamp(24px,3vh,40px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen2-paragraph-group {
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:clamp(18px,2.2vh,28px)!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    overflow:visible!important;
  }

  /*
     Clean word wrapping.
     No nowrap/max-content behavior is allowed to survive from older rules.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen2-paragraph-group
  .cr-v2-line {
    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex-wrap:wrap!important;
    flex-direction:row!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    justify-content:flex-start!important;
    align-items:baseline!important;
    align-content:flex-start!important;

    margin:0!important;
    padding:0!important;

    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:visible!important;

    transform:none!important;
    filter:none!important;

    letter-spacing:-.025em!important;
    box-sizing:border-box!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    display:inline-block!important;
    position:relative!important;

    flex:0 0 auto!important;
    min-width:0!important;
    max-width:100%!important;

    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;

    margin-right:.12em!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw:last-child {
    margin-right:0!important;
  }

  /*
     Larger typography, but use BOTH viewport width and height as guards.
     This lets large screens grow significantly without vertical clipping.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-family:'Playfair Display',serif!important;
    font-size:clamp(2.65rem,min(3.62vw,5.65vh),5.15rem)!important;
    line-height:1.065!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-family:'Playfair Display',serif!important;
    font-size:clamp(2.20rem,min(2.92vw,4.65vh),4.15rem)!important;
    line-height:1.075!important;
  }

  /* Custom-made hero line */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--4 {
    font-size:clamp(2.58rem,min(3.28vw,5.15vh),4.62rem)!important;
    line-height:1.055!important;
  }

  /* Portfolio line */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--5 {
    font-size:clamp(2.15rem,min(2.72vw,4.32vh),3.72rem)!important;
    line-height:1.075!important;
  }

  /* Long Unlock... institutional edge sentence */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--7 {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    justify-content:flex-start!important;
    text-align:left!important;
    white-space:normal!important;

    font-size:clamp(2.02rem,min(2.52vw,4.05vh),3.45rem)!important;
    line-height:1.085!important;
  }
}


/* =====================================================================
   MACBOOK PRO 16-INCH / RETINA
   ---------------------------------------------------------------------
   Explicit profile for typical 16-inch MacBook Pro CSS viewport sizes.
   It also works when .kone-large-screen-105 is active.
   ===================================================================== */
@media
  (min-width:1500px) and
  (max-width:1900px) and
  (min-height:850px) and
  (max-height:1250px) and
  (hover:hover) and
  (pointer:fine) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    /*
       Extra-safe physical margins compensate for Retina + 105% page zoom.
       Text itself remains larger; only the outer canvas is protected.
    */
    left:clamp(78px,5vw,104px)!important;
    right:clamp(78px,5vw,104px)!important;

    padding-top:clamp(82px,8.3vh,106px)!important;
    padding-bottom:clamp(82px,8.3vh,106px)!important;

    grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)!important;
    column-gap:clamp(66px,4.6vw,94px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(3rem,min(3.42vw,5.22vh),5.18rem)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(2.42rem,min(2.74vw,4.32vh),4.12rem)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--4 {
    font-size:clamp(2.82rem,min(3.08vw,4.82vh),4.58rem)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--5 {
    font-size:clamp(2.30rem,min(2.55vw,4vh),3.70rem)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(2.18rem,min(2.38vw,3.78vh),3.40rem)!important;
  }
}


/* Large desktop 105% mode: use safe physical edges, never vw-centering. */
@media (min-width:1600px) and (min-height:850px) {
  html.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(84px,5.2vw,112px)!important;
    right:clamp(84px,5.2vw,112px)!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
  }
}


/* Normal 1366/1440-style desktop and shorter laptop screens. */
@media (min-width:769px) and (max-height:840px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(32px,3vw,50px)!important;
    right:clamp(32px,3vw,50px)!important;

    padding-top:clamp(48px,6.5vh,64px)!important;
    padding-bottom:clamp(48px,6.5vh,64px)!important;

    column-gap:clamp(36px,3.8vw,62px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1 {
    gap:clamp(22px,3vh,34px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(16px,2.25vh,26px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(2.25rem,min(3.18vw,5.05vh),3.90rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(1.88rem,min(2.52vw,4.05vh),3.12rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--4 {
    font-size:clamp(2.20rem,min(2.85vw,4.48vh),3.48rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(1.75rem,min(2.22vw,3.60vh),2.76rem)!important;
  }
}


/* Very wide desktop: allow larger text while preserving safe side gutters. */
@media (min-width:1900px) and (min-height:900px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(92px,5vw,128px)!important;
    right:clamp(92px,5vw,128px)!important;
    column-gap:clamp(82px,5vw,122px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(3.2rem,min(3.62vw,5.45vh),5.55rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(2.55rem,min(2.88vw,4.45vh),4.42rem)!important;
  }
}


/* =====================================================================
   SECTION 2 — BIGGER TYPE + MORE LINE / GROUP SPACING
   ---------------------------------------------------------------------
   Final visual tuning:
   - bigger typography on both columns
   - more space between statement rows
   - more comfortable line-height when a sentence wraps
   - less unused top/bottom padding so the screen is used properly
   - safe on normal desktop + MacBook Pro 16-inch
   ===================================================================== */

@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    /* Use more of the vertical canvas while preserving safe top/bottom room. */
    padding-top:clamp(52px,6.5vh,78px)!important;
    padding-bottom:clamp(52px,6.5vh,78px)!important;

    /* Keep a healthy visual split between the two text columns. */
    column-gap:clamp(64px,5.6vw,116px)!important;
  }

  /* LEFT: more breathing room between its three main statements. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1 {
    gap:clamp(40px,5vh,68px)!important;
  }

  /* RIGHT: more breathing room between its four text groups. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(30px,3.8vh,52px)!important;
  }

  /* More spacing inside Partner / Unlock paragraph group. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen2-paragraph-group {
    gap:clamp(24px,3vh,40px)!important;
  }

  /*
     Slightly larger word spacing makes the wrap cleaner at the larger size.
     Keep normal word-wrap; never allow clipping.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    margin-right:.14em!important;
  }

  /* LEFT COLUMN — larger, stronger display size. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(2.90rem,min(3.88vw,5.75vh),5.45rem)!important;
    line-height:1.105!important;
  }

  /* RIGHT COLUMN — larger while retaining safe wrap. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(2.38rem,min(3.10vw,4.90vh),4.40rem)!important;
    line-height:1.105!important;
  }

  /* Custom-made. Just for you. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--4 {
    font-size:clamp(2.82rem,min(3.48vw,5.35vh),4.90rem)!important;
    line-height:1.085!important;
  }

  /* Portfolio ... Precision / Power / Purpose */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--5 {
    font-size:clamp(2.32rem,min(2.90vw,4.55vh),3.95rem)!important;
    line-height:1.11!important;
  }

  /* Unlock ... corporate & institutional edge. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(2.16rem,min(2.68vw,4.18vh),3.62rem)!important;
    line-height:1.12!important;
  }
}


/* =====================================================================
   MACBOOK PRO 16-INCH — BIGGER BUT STILL SAFE
   ===================================================================== */
@media
  (min-width:1500px) and
  (max-width:1900px) and
  (min-height:850px) and
  (max-height:1250px) and
  (hover:hover) and
  (pointer:fine) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    padding-top:clamp(58px,6.2vh,76px)!important;
    padding-bottom:clamp(58px,6.2vh,76px)!important;
    column-gap:clamp(72px,4.8vw,102px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1 {
    gap:clamp(46px,4.8vh,66px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(34px,3.6vh,48px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen2-paragraph-group {
    gap:clamp(26px,2.8vh,36px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(3.18rem,min(3.62vw,5.45vh),5.42rem)!important;
    line-height:1.10!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(2.56rem,min(2.92vw,4.48vh),4.34rem)!important;
    line-height:1.10!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--4 {
    font-size:clamp(3rem,min(3.26vw,5vh),4.84rem)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--5 {
    font-size:clamp(2.42rem,min(2.70vw,4.18vh),3.92rem)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(2.28rem,min(2.48vw,3.92vh),3.58rem)!important;
    line-height:1.115!important;
  }
}


/* Normal laptop / shorter screen: still noticeably larger than before. */
@media (min-width:769px) and (max-height:840px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    padding-top:clamp(34px,4.8vh,52px)!important;
    padding-bottom:clamp(34px,4.8vh,52px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1 {
    gap:clamp(28px,3.8vh,42px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(21px,2.8vh,32px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen2-paragraph-group {
    gap:clamp(17px,2.2vh,26px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--1 .cr-v2-line {
    font-size:clamp(2.42rem,min(3.36vw,5.25vh),4.08rem)!important;
    line-height:1.095!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line {
    font-size:clamp(2.02rem,min(2.68vw,4.22vh),3.26rem)!important;
    line-height:1.095!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--4 {
    font-size:clamp(2.35rem,min(3vw,4.65vh),3.66rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(1.88rem,min(2.36vw,3.72vh),2.90rem)!important;
    line-height:1.11!important;
  }
}


/* =====================================================================
   SECTION 2 — MATCHED LEFT / RIGHT TYPOGRAPHY + TOP HEADINGS
   ---------------------------------------------------------------------
   FINAL OVERRIDE
   - LEFT heading:  You imagine. We build.
   - RIGHT heading: Custom-made. Just for you.
   - both headings start at the SAME top level
   - SAME heading font size on both sides
   - SAME body font size on both sides
   - RIGHT text is always LEFT aligned
   - SAME original View-1 white / purple / soft-gray colour families
   - safe for normal desktop + MacBook Pro 16-inch Retina
   ===================================================================== */

@media (min-width:769px) {

  /* Remove any old containing-padding conflict in final View 2. */
  #crSticky.cr-sticky--auto-final {
    padding-left:0!important;
    padding-right:0!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated
  .cr-v2-stage {
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /*
     Physical left/right gutters prevent clipping under normal scaling,
     Mac Retina normalization and the large-desktop 105% mode.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    position:absolute!important;
    inset:auto!important;
    top:0!important;
    bottom:0!important;
    left:clamp(46px,4.1vw,78px)!important;
    right:clamp(46px,4.1vw,78px)!important;

    width:auto!important;
    max-width:none!important;
    height:100vh!important;
    margin:0!important;
    transform:none!important;

    padding-top:clamp(70px,8.2vh,100px)!important;
    padding-bottom:clamp(60px,7vh,86px)!important;
    padding-left:0!important;
    padding-right:0!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:clamp(68px,5.8vw,112px)!important;

    /* Both column headings begin on the same horizontal level. */
    align-items:start!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /* Both columns share the exact same layout rules. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    position:relative!important;
    inset:auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    margin:0!important;
    padding:0!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    justify-self:stretch!important;

    /* Same main-group spacing on LEFT and RIGHT. */
    gap:clamp(34px,4vh,54px)!important;

    overflow:visible!important;
    box-sizing:border-box!important;
  }

  /*
     Right lower two rows remain a group, but visually follow the
     same spacing rhythm as the left column.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen2-paragraph-group {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:clamp(24px,2.8vh,38px)!important;

    transform:none!important;
    overflow:visible!important;
  }

  /* Absolute left alignment for EVERY line on BOTH sides. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen2-paragraph-group
  .cr-v2-line {
    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    justify-content:flex-start!important;
    align-items:baseline!important;
    align-content:flex-start!important;

    margin:0!important;
    padding:0!important;

    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:visible!important;

    transform:none!important;
    filter:none!important;
    box-sizing:border-box!important;

    font-family:'Playfair Display',serif!important;
    font-weight:700!important;
    letter-spacing:-.024em!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    display:inline-block!important;
    position:relative!important;
    flex:0 0 auto!important;

    min-width:0!important;
    max-width:100%!important;

    margin-right:.14em!important;

    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw:last-child {
    margin-right:0!important;
  }

  /* ================================================================
     ONE TYPOGRAPHY SCALE FOR BOTH COLUMNS
     ================================================================ */

  /*
     HEADINGS:
     Left  = You imagine. We build.
     Right = Custom-made. Just for you.
     Exactly the same size.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.10rem,min(3.72vw,5.55vh),5.25rem)!important;
    line-height:1.075!important;
    margin-bottom:clamp(4px,.5vh,8px)!important;
  }

  /*
     BODY:
     Every non-heading line on LEFT and RIGHT has the same base size.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1
  .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(2.50rem,min(2.92vw,4.45vh),4.05rem)!important;
    line-height:1.115!important;
  }

  /*
     Long final sentence keeps the SAME base size.
     It wraps naturally rather than becoming smaller than the left side.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.50rem,min(2.92vw,4.45vh),4.05rem)!important;
    line-height:1.115!important;
    width:100%!important;
    max-width:100%!important;
    justify-content:flex-start!important;
    text-align:left!important;
  }

  /* ================================================================
     SAME COLOUR SYSTEM AS THE PREVIOUS / FIRST VIEW
     ================================================================ */

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--w {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--p {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--g {
    color:var(--word-lit-g)!important;
    -webkit-text-fill-color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--gp {
    color:var(--word-lit-gp)!important;
    -webkit-text-fill-color:var(--word-lit-gp)!important;
  }

  /* No separate right-side colour treatment. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cw {
    text-align:left!important;
  }
}


/* =====================================================================
   MACBOOK PRO 16-INCH RETINA — MATCHED TYPOGRAPHY
   ===================================================================== */
@media
  (min-width:1500px) and
  (max-width:1900px) and
  (min-height:850px) and
  (max-height:1250px) and
  (hover:hover) and
  (pointer:fine) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(82px,5vw,106px)!important;
    right:clamp(82px,5vw,106px)!important;

    padding-top:clamp(76px,7.5vh,96px)!important;
    padding-bottom:clamp(62px,6.2vh,80px)!important;

    column-gap:clamp(76px,4.8vw,104px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(38px,3.8vh,52px)!important;
  }

  /* SAME heading size on MacBook left/right. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.35rem,min(3.48vw,5.18vh),5.28rem)!important;
    line-height:1.07!important;
  }

  /* SAME body size on MacBook left/right. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1
  .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.68rem,min(2.78vw,4.22vh),4.08rem)!important;
    line-height:1.11!important;
  }
}


/* Large desktop 105% visual zoom safety. */
@media (min-width:1600px) and (min-height:850px) {
  html.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(88px,5.3vw,116px)!important;
    right:clamp(88px,5.3vw,116px)!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
  }
}


/* Normal shorter laptop screens — still matched left/right. */
@media (min-width:769px) and (max-height:840px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(34px,3vw,50px)!important;
    right:clamp(34px,3vw,50px)!important;

    padding-top:clamp(44px,5.5vh,60px)!important;
    padding-bottom:clamp(38px,4.8vh,54px)!important;

    column-gap:clamp(42px,4vw,64px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(24px,3vh,36px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(2.58rem,min(3.18vw,5vh),3.92rem)!important;
    line-height:1.075!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1
  .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.08rem,min(2.52vw,4vh),3.12rem)!important;
    line-height:1.11!important;
  }
}


/* =====================================================================
   SECTION 2 — HEADER SAFE + BIGGER HEADINGS + BIGGER BODY
   ---------------------------------------------------------------------
   FINAL VISUAL TUNING
   - reserve safe top space below the fixed/header logo area
   - headings are clearly larger than body text
   - larger body text on BOTH left and right
   - balanced use of full viewport height
   - same left alignment / same color system
   - safe for normal laptop + MacBook Pro 16-inch
   ===================================================================== */

@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    /*
       Extra top clearance protects the first heading from the left header logo.
       Bottom space is smaller so the content still uses the screen fully.
    */
    padding-top:clamp(118px,13vh,154px)!important;
    padding-bottom:clamp(54px,6vh,76px)!important;

    column-gap:clamp(70px,5.8vw,118px)!important;

    /* Start both columns at the same protected top line. */
    align-items:start!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    /*
       Use available vertical space more evenly.
       Heading stays at top, remaining groups breathe underneath.
    */
    height:calc(100vh - clamp(172px,19vh,226px))!important;
    min-height:0!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;

    gap:clamp(42px,5vh,68px)!important;
  }

  /* Slightly tighter right group so all 4 groups use the height well. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(34px,4.2vh,56px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen2-paragraph-group {
    gap:clamp(26px,3vh,42px)!important;
  }

  /* Keep all text firmly left aligned. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen2-paragraph-group .cr-v2-line {
    justify-content:flex-start!important;
    text-align:left!important;
    align-items:baseline!important;
    align-content:flex-start!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    white-space:normal!important;
    flex-wrap:wrap!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    margin-right:.145em!important;
  }

  /* ================================================================
     HEADINGS — SAME SIZE LEFT + RIGHT, CLEARLY BIGGER THAN BODY
     ================================================================ */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.55rem,min(4.15vw,6.15vh),5.85rem)!important;
    line-height:1.045!important;
    font-weight:700!important;
    margin:0 0 clamp(8px,1vh,14px) 0!important;
  }

  /* ================================================================
     BODY — SAME SIZE LEFT + RIGHT
     ================================================================ */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1
  .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.75rem,min(3.18vw,4.95vh),4.45rem)!important;
    line-height:1.12!important;
  }

  /* Keep the long final sentence large; wrap instead of shrinking. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line--7 {
    width:100%!important;
    max-width:100%!important;
    justify-content:flex-start!important;
    text-align:left!important;
    white-space:normal!important;
  }
}


/* =====================================================================
   MACBOOK PRO 16-INCH — MORE TOP CLEARANCE + LARGER TYPE
   ===================================================================== */
@media
  (min-width:1500px) and
  (max-width:1900px) and
  (min-height:850px) and
  (max-height:1250px) and
  (hover:hover) and
  (pointer:fine) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    /*
       Give the top-left floating/header logo a wider safe zone.
       Keep both column headings aligned below that zone.
    */
    left:clamp(92px,5.4vw,116px)!important;
    right:clamp(92px,5.4vw,116px)!important;

    padding-top:clamp(132px,12.5vh,164px)!important;
    padding-bottom:clamp(58px,5.8vh,78px)!important;

    column-gap:clamp(78px,4.9vw,108px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    height:calc(100vh - clamp(196px,18.3vh,242px))!important;
    gap:clamp(46px,4.5vh,66px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(36px,3.6vh,54px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen2-paragraph-group {
    gap:clamp(28px,2.8vh,40px)!important;
  }

  /* Same large heading size on BOTH sides. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.78rem,min(3.92vw,5.82vh),5.88rem)!important;
    line-height:1.045!important;
  }

  /* Same larger body size on BOTH sides. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1
  .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.92rem,min(3vw,4.62vh),4.42rem)!important;
    line-height:1.115!important;
  }
}


/* =====================================================================
   NORMAL LAPTOP / SHORTER HEIGHT
   ===================================================================== */
@media (min-width:769px) and (max-height:840px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    /*
       Still protect the header/logo but avoid wasting too much height.
    */
    padding-top:clamp(92px,11vh,112px)!important;
    padding-bottom:clamp(30px,4vh,44px)!important;

    left:clamp(36px,3.1vw,52px)!important;
    right:clamp(36px,3.1vw,52px)!important;

    column-gap:clamp(44px,4vw,66px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    height:auto!important;
    gap:clamp(30px,3.7vh,42px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(24px,3vh,34px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen2-paragraph-group {
    gap:clamp(18px,2.3vh,28px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(2.92rem,min(3.5vw,5.35vh),4.28rem)!important;
    line-height:1.05!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1
  .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.32rem,min(2.72vw,4.18vh),3.30rem)!important;
    line-height:1.11!important;
  }
}


/* =====================================================================
   SECTION 2 — CENTER BOOK + EXACT VIEW-1 SCROLL COLORS
   ---------------------------------------------------------------------
   FINAL OVERRIDE
   - LEFT text / BOOK SVG / RIGHT text have separate grid columns
   - no overlap with header logo
   - normal laptop + MacBook Pro 16-inch alignment
   - exact same cw--w / cw--p / cw--g / cw--gp color behavior as View 1
   - initial ghost colors -> .lit active colors, same as scroll animation
   ===================================================================== */

@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final {
    padding-left:0!important;
    padding-right:0!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated .cr-v2-stage {
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /*
     Physical safe gutters keep the whole composition inside the viewport.
     Top clearance protects the left heading from the floating/header logo.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    position:absolute!important;
    inset:auto!important;
    top:0!important;
    bottom:0!important;
    left:clamp(50px,4.4vw,86px)!important;
    right:clamp(50px,4.4vw,86px)!important;

    width:auto!important;
    max-width:none!important;
    height:100vh!important;
    margin:0!important;
    transform:none!important;

    padding-top:clamp(126px,13.2vh,162px)!important;
    padding-bottom:clamp(48px,5.5vh,70px)!important;
    padding-left:0!important;
    padding-right:0!important;

    display:grid!important;
    grid-template-columns:
      minmax(0,1fr)
      clamp(82px,7.2vw,124px)
      minmax(0,1fr)!important;
    column-gap:clamp(34px,3.2vw,62px)!important;

    align-items:start!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /* LEFT and RIGHT use the same width, rhythm and alignment. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    position:relative!important;
    inset:auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    margin:0!important;
    padding:0!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    justify-self:stretch!important;

    gap:clamp(38px,4.6vh,62px)!important;

    overflow:visible!important;
    box-sizing:border-box!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(30px,3.7vh,50px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen2-paragraph-group {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;

    gap:clamp(24px,2.9vh,38px)!important;
    margin:0!important;
    padding:0!important;

    transform:none!important;
    overflow:visible!important;
  }

  /* CENTER BOOK — a true grid divider, never an overlay. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-book-divider {
    width:100%!important;
    align-self:center!important;
    justify-self:center!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    color:var(--word-lit-p)!important;

    opacity:0;
    transform:translateY(20px) scale(.90);
    transition:
      opacity .95s cubic-bezier(.22,1,.36,1),
      transform .95s cubic-bezier(.22,1,.36,1)!important;

    pointer-events:none!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen.is-active
  .cr-v2-book-divider {
    opacity:1!important;
    transform:translateY(0) scale(1)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-book-divider svg {
    display:block!important;
    width:clamp(74px,6.3vw,108px)!important;
    height:auto!important;
    overflow:visible!important;
    filter:
      drop-shadow(0 0 8px rgba(255,255,255,.12))
      drop-shadow(0 0 18px rgba(124,58,237,.20));
  }

  /*
     Exact left alignment and natural word wrap on BOTH columns.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-screen2-paragraph-group .cr-v2-line {
    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    justify-content:flex-start!important;
    align-items:baseline!important;
    align-content:flex-start!important;

    margin:0!important;
    padding:0!important;

    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:visible!important;

    transform:none!important;
    filter:none!important;

    font-family:'Playfair Display',serif!important;
    font-weight:700!important;
    letter-spacing:-.024em!important;
    box-sizing:border-box!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    display:inline-block!important;
    position:relative!important;
    flex:0 0 auto!important;
    min-width:0!important;
    max-width:100%!important;

    margin-right:.14em!important;

    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw:last-child {
    margin-right:0!important;
  }

  /* Same heading size left and right. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.35rem,min(3.90vw,5.78vh),5.55rem)!important;
    line-height:1.05!important;
    margin:0 0 clamp(6px,.7vh,10px) 0!important;
  }

  /* Same body size left and right. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1 .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2 .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(2.58rem,min(2.95vw,4.52vh),4.10rem)!important;
    line-height:1.115!important;
  }

  /* ================================================================
     EXACT SAME COLORS AS THE EARLIER SCROLL ANIMATION
     ------------------------------------------------
     Original rules:
       cw--w  ghost -> word-lit
       cw--p  ghost-p -> word-lit-p
       cw--g  word-g -> word-lit-g
       cw--gp word-gp -> word-lit-gp
     ================================================================ */

  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--w:not(.lit) {
    color:var(--word-ghost)!important;
    -webkit-text-fill-color:var(--word-ghost)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--w.lit {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--p:not(.lit) {
    color:var(--word-ghost-p)!important;
    -webkit-text-fill-color:var(--word-ghost-p)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--p.lit {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--g:not(.lit) {
    color:var(--word-g)!important;
    -webkit-text-fill-color:var(--word-g)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--g.lit {
    color:var(--word-lit-g)!important;
    -webkit-text-fill-color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--gp:not(.lit) {
    color:var(--word-gp)!important;
    -webkit-text-fill-color:var(--word-gp)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--gp.lit {
    color:var(--word-lit-gp)!important;
    -webkit-text-fill-color:var(--word-lit-gp)!important;
  }
}


/* =====================================================================
   MACBOOK PRO 16-INCH RETINA
   ===================================================================== */
@media
  (min-width:1500px) and
  (max-width:1900px) and
  (min-height:850px) and
  (max-height:1250px) and
  (hover:hover) and
  (pointer:fine) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(94px,5.5vw,118px)!important;
    right:clamp(94px,5.5vw,118px)!important;

    padding-top:clamp(138px,12.8vh,168px)!important;
    padding-bottom:clamp(54px,5.2vh,72px)!important;

    grid-template-columns:
      minmax(0,1fr)
      clamp(94px,6.4vw,118px)
      minmax(0,1fr)!important;
    column-gap:clamp(42px,3vw,62px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(40px,3.9vh,56px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(32px,3.1vh,46px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-book-divider svg {
    width:clamp(90px,5.7vw,110px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.55rem,min(3.48vw,5.22vh),5.38rem)!important;
    line-height:1.05!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1 .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2 .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(2.72rem,min(2.70vw,4.12vh),4.02rem)!important;
    line-height:1.11!important;
  }
}


/* Large desktop 105% zoom safety. */
@media (min-width:1600px) and (min-height:850px) {
  html.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(100px,5.8vw,124px)!important;
    right:clamp(100px,5.8vw,124px)!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
  }
}


/* Normal laptop / shorter-height screen. */
@media (min-width:769px) and (max-height:840px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(38px,3.2vw,54px)!important;
    right:clamp(38px,3.2vw,54px)!important;

    padding-top:clamp(100px,11.5vh,118px)!important;
    padding-bottom:clamp(28px,3.8vh,42px)!important;

    grid-template-columns:
      minmax(0,1fr)
      clamp(70px,6vw,92px)
      minmax(0,1fr)!important;
    column-gap:clamp(28px,2.7vw,44px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(28px,3.4vh,38px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(22px,2.7vh,31px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen2-paragraph-group {
    gap:clamp(17px,2.1vh,25px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-book-divider svg {
    width:clamp(66px,5.4vw,84px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(2.78rem,min(3.18vw,4.95vh),4.02rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1 .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2 .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(2.18rem,min(2.42vw,3.82vh),3.02rem)!important;
    line-height:1.105!important;
  }
}


/* =====================================================================
   SECTION 2 — TEXT DIRECTLY ON OPEN BOOK PAGES
   ---------------------------------------------------------------------
   FINAL OVERRIDE:
   - SVG book is the full background
   - left text sits on left page
   - right text sits on right page
   - exact original scroll-text colors are reused
   ===================================================================== */
@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final {
    padding-left:0!important;
    padding-right:0!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen {
    position:absolute!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-shell {
    position:relative!important;
    width:min(91vw,1660px)!important;
    height:min(76vh,760px)!important;
    min-height:560px!important;
    margin-top:clamp(72px,8vh,102px)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-art {
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    pointer-events:none!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-art svg {
    width:100%!important;
    height:100%!important;
    display:block!important;
    overflow:visible!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-pages {
    position:absolute!important;
    z-index:2!important;
    inset:clamp(64px,7vh,88px) clamp(72px,5.1vw,106px) clamp(56px,6vh,78px)!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:clamp(108px,7.8vw,150px)!important;
    align-items:start!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-pages > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final .cr-v2-book-pages > .cr-v2-screen--2 {
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:clamp(34px,4vh,52px)!important;
    overflow:visible!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-pages > .cr-v2-screen--2 {
    gap:clamp(27px,3.2vh,42px)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-screen2-paragraph-group {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:clamp(21px,2.5vh,32px)!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cr-v2-line,
  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cr-v2-screen2-paragraph-group .cr-v2-line {
    display:flex!important;
    flex-wrap:wrap!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    justify-content:flex-start!important;
    align-items:baseline!important;
    align-content:flex-start!important;
    margin:0!important;
    padding:0!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:visible!important;
    transform:none!important;
    filter:none!important;
    font-family:'Playfair Display',serif!important;
    font-weight:700!important;
    letter-spacing:-.023em!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cr-v2-line .cw {
    display:inline-block!important;
    flex:0 0 auto!important;
    min-width:0!important;
    max-width:100%!important;
    margin-right:.14em!important;
    white-space:normal!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cr-v2-column-heading {
    font-size:clamp(3.02rem,min(3.45vw,5.15vh),4.95rem)!important;
    line-height:1.045!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-book-pages .cr-v2-screen--1 .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-book-pages .cr-v2-screen--2 .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-book-pages .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(2.30rem,min(2.55vw,3.92vh),3.62rem)!important;
    line-height:1.105!important;
  }

  /* EXACT original scroll-text colors */
  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cw--w {
    color:var(--word-ghost)!important;
    -webkit-text-fill-color:var(--word-ghost)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cw--w.lit {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cw--p {
    color:var(--word-ghost-p)!important;
    -webkit-text-fill-color:var(--word-ghost-p)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cw--p.lit {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cw--g {
    color:var(--word-g)!important;
    -webkit-text-fill-color:var(--word-g)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cw--g.lit {
    color:var(--word-lit-g)!important;
    -webkit-text-fill-color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cw--gp {
    color:var(--word-gp)!important;
    -webkit-text-fill-color:var(--word-gp)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cw--gp.lit {
    color:var(--word-lit-gp)!important;
    -webkit-text-fill-color:var(--word-lit-gp)!important;
  }

  /* Exact original stronger keyword focus */
  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cw.cr-keyword.lit {
    color:var(--purple-light)!important;
    -webkit-text-fill-color:var(--purple-light)!important;
    text-shadow:0 0 10px rgba(167,139,250,.32),0 0 24px rgba(124,58,237,.20)!important;
  }
}

/* MacBook Pro 16-inch */
@media
  (min-width:1500px) and (max-width:1900px) and
  (min-height:850px) and (max-height:1250px) and
  (hover:hover) and (pointer:fine) {

  html.kone-mac-retina #crSticky.cr-sticky--auto-final .cr-v2-book-shell {
    width:min(87vw,1540px)!important;
    height:min(72vh,730px)!important;
    min-height:590px!important;
    margin-top:clamp(82px,8.2vh,106px)!important;
  }

  html.kone-mac-retina #crSticky.cr-sticky--auto-final .cr-v2-book-pages {
    inset:clamp(68px,6.7vh,84px) clamp(78px,4.8vw,102px) clamp(58px,5.7vh,76px)!important;
    column-gap:clamp(118px,7vw,144px)!important;
  }

  html.kone-mac-retina #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cr-v2-column-heading {
    font-size:clamp(3.10rem,min(3.08vw,4.72vh),4.78rem)!important;
  }

  html.kone-mac-retina #crSticky.cr-sticky--auto-final
  .cr-v2-book-pages .cr-v2-screen--1 .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina #crSticky.cr-sticky--auto-final
  .cr-v2-book-pages .cr-v2-screen--2 .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina #crSticky.cr-sticky--auto-final
  .cr-v2-book-pages .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(2.36rem,min(2.38vw,3.68vh),3.55rem)!important;
    line-height:1.10!important;
  }
}

/* Large desktop 105% zoom */
@media (min-width:1600px) and (min-height:850px) {
  html.kone-large-screen-105 #crSticky.cr-sticky--auto-final .cr-v2-book-shell {
    width:min(84vw,1500px)!important;
  }
}

/* Normal shorter laptop */
@media (min-width:769px) and (max-height:840px) {
  #crSticky.cr-sticky--auto-final .cr-v2-book-shell {
    width:min(93vw,1500px)!important;
    height:min(77vh,650px)!important;
    min-height:510px!important;
    margin-top:clamp(62px,7vh,78px)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-pages {
    inset:clamp(48px,5.7vh,62px) clamp(58px,4.2vw,78px) clamp(40px,4.8vh,56px)!important;
    column-gap:clamp(82px,6.5vw,112px)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-book-pages .cr-v2-column-heading {
    font-size:clamp(2.46rem,min(2.85vw,4.38vh),3.58rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-book-pages .cr-v2-screen--1 .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-book-pages .cr-v2-screen--2 .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-book-pages .cr-v2-screen--2 .cr-v2-line--7 {
    font-size:clamp(1.92rem,min(2.18vw,3.38vh),2.70rem)!important;
    line-height:1.095!important;
  }
}


/* =====================================================================
   SECTION 2 — SIMPLE LEFT / RIGHT FINAL SCREEN
   EXACT SAME COLORS AS SCROLL-TEXT ANIMATION
   ---------------------------------------------------------------------
   FINAL OVERRIDE:
   - NO book / SVG
   - LEFT heading  = You imagine. We build.
   - RIGHT heading = Custom-made. Just for you.
   - both headings start at same top line
   - enough top space below header/logo
   - equal left/right text alignment
   - larger heading than body
   - exact original Section-2 scroll colors
   - normal laptop + MacBook Pro 16-inch safe
   ===================================================================== */

@media (min-width:769px) {

  /* Final view owns the full viewport. */
  #crSticky.cr-sticky--auto-final {
    padding-left:0!important;
    padding-right:0!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated
  .cr-v2-stage {
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Remove any old book layout if stale markup is ever present. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-book-shell,
  #crSticky.cr-sticky--auto-final
  .cr-v2-book-art,
  #crSticky.cr-sticky--auto-final
  .cr-v2-book-pages,
  #crSticky.cr-sticky--auto-final
  .cr-v2-book-divider {
    display:none!important;
  }

  /*
     Safe physical left/right edges are more reliable than width +
     translate centering under Retina / 105% zoom.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    position:absolute!important;
    inset:auto!important;
    top:0!important;
    bottom:0!important;

    left:clamp(52px,4.5vw,88px)!important;
    right:clamp(52px,4.5vw,88px)!important;

    width:auto!important;
    max-width:none!important;
    height:100vh!important;

    margin:0!important;
    transform:none!important;

    /*
       Keep the first heading safely below the floating/header logo.
       Use less bottom padding so the screen is still used properly.
    */
    padding-top:clamp(126px,13vh,158px)!important;
    padding-bottom:clamp(44px,5.2vh,68px)!important;
    padding-left:0!important;
    padding-right:0!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:clamp(72px,6vw,122px)!important;
    align-items:start!important;

    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /*
     BOTH columns use the exact same alignment and vertical rhythm.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    margin:0!important;
    padding:0!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    justify-self:stretch!important;

    gap:clamp(42px,4.8vh,64px)!important;

    overflow:visible!important;
    box-sizing:border-box!important;
  }

  /* Right side contains more groups, so use a slightly tighter group gap. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(32px,3.8vh,50px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen2-paragraph-group {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    margin:0!important;
    padding:0!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;

    gap:clamp(24px,2.8vh,38px)!important;

    transform:none!important;
    overflow:visible!important;
  }

  /*
     Every line on BOTH sides is strictly left-aligned and wraps normally.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen2-paragraph-group
  .cr-v2-line {
    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    justify-content:flex-start!important;
    align-items:baseline!important;
    align-content:flex-start!important;

    margin:0!important;
    padding:0!important;

    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:visible!important;

    transform:none!important;
    filter:none!important;

    font-family:'Playfair Display',serif!important;
    font-weight:700!important;
    letter-spacing:-.023em!important;
    box-sizing:border-box!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    display:inline-block!important;
    position:relative!important;

    flex:0 0 auto!important;
    min-width:0!important;
    max-width:100%!important;

    margin-right:.14em!important;

    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw:last-child {
    margin-right:0!important;
  }

  /* ================================================================
     HEADING — SAME SIZE BOTH SIDES, CLEARLY BIGGER THAN CONTENT
     ================================================================ */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.55rem,min(4.05vw,5.95vh),5.70rem)!important;
    line-height:1.045!important;
    margin:0 0 clamp(8px,.9vh,14px) 0!important;
  }

  /* ================================================================
     BODY — SAME SIZE BOTH SIDES
     ================================================================ */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1
  .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.72rem,min(3.08vw,4.75vh),4.30rem)!important;
    line-height:1.115!important;
  }

  /* ================================================================
     EXACT SAME COLORS AS ORIGINAL SCROLL-TEXT SECTION
     ------------------------------------------------
     Original CSS:
       .cw--w  { color: var(--word-ghost); }
       .cw--w.lit  { color: var(--word-lit); }
       .cw--p  { color: var(--word-ghost-p); }
       .cw--p.lit  { color: var(--word-lit-p); }
       .cw--g  { color: var(--word-g); }
       .cw--g.lit  { color: var(--word-lit-g); }
       .cw--gp { color: var(--word-gp); }
       .cw--gp.lit { color: var(--word-lit-gp); }
     ================================================================ */

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--w {
    color:var(--word-ghost)!important;
    -webkit-text-fill-color:var(--word-ghost)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--w.lit {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--p {
    color:var(--word-ghost-p)!important;
    -webkit-text-fill-color:var(--word-ghost-p)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--p.lit {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--g {
    color:var(--word-g)!important;
    -webkit-text-fill-color:var(--word-g)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--g.lit {
    color:var(--word-lit-g)!important;
    -webkit-text-fill-color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--gp {
    color:var(--word-gp)!important;
    -webkit-text-fill-color:var(--word-gp)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw--gp.lit {
    color:var(--word-lit-gp)!important;
    -webkit-text-fill-color:var(--word-lit-gp)!important;
  }

  /* Same Portfolio / Power / you focus rule from scroll animation. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw.cr-keyword.lit {
    color:var(--purple-light)!important;
    -webkit-text-fill-color:var(--purple-light)!important;
    text-shadow:
      0 0 10px rgba(167,139,250,.32),
      0 0 24px rgba(124,58,237,.20)!important;
  }
}


/* =====================================================================
   MACBOOK PRO 16-INCH RETINA
   ===================================================================== */
@media
  (min-width:1500px) and
  (max-width:1900px) and
  (min-height:850px) and
  (max-height:1250px) and
  (hover:hover) and
  (pointer:fine) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(96px,5.6vw,120px)!important;
    right:clamp(96px,5.6vw,120px)!important;

    padding-top:clamp(138px,12.8vh,168px)!important;
    padding-bottom:clamp(52px,5vh,72px)!important;

    column-gap:clamp(82px,5vw,112px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(44px,4.2vh,60px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(34px,3.3vh,48px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen2-paragraph-group {
    gap:clamp(25px,2.5vh,36px)!important;
  }

  /* Same large heading on LEFT and RIGHT. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.78rem,min(3.72vw,5.50vh),5.62rem)!important;
    line-height:1.045!important;
  }

  /* Same body size on LEFT and RIGHT. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1
  .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.88rem,min(2.88vw,4.34vh),4.24rem)!important;
    line-height:1.11!important;
  }
}


/* Large desktop 105% mode — extra safe physical margins. */
@media (min-width:1600px) and (min-height:850px) {
  html.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(102px,5.9vw,126px)!important;
    right:clamp(102px,5.9vw,126px)!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
  }
}


/* =====================================================================
   NORMAL LAPTOP / SHORTER SCREEN
   ===================================================================== */
@media (min-width:769px) and (max-height:840px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(38px,3.2vw,54px)!important;
    right:clamp(38px,3.2vw,54px)!important;

    /* Still clear the top-left logo, but use the rest of the height. */
    padding-top:clamp(100px,11.5vh,120px)!important;
    padding-bottom:clamp(26px,3.5vh,40px)!important;

    column-gap:clamp(48px,4.2vw,70px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(28px,3.4vh,40px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    gap:clamp(22px,2.7vh,32px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-screen2-paragraph-group {
    gap:clamp(17px,2.1vh,26px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(2.88rem,min(3.35vw,5.10vh),4.12rem)!important;
    line-height:1.05!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1
  .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2
  .cr-v2-line--7 {
    font-size:clamp(2.24rem,min(2.58vw,3.92vh),3.12rem)!important;
    line-height:1.105!important;
  }
}


/* =====================================================================
   SECTION 2 — MATCHED ROWS + PARTNER LAST + PRECISION/POWER/PURPOSE COLORS
   ---------------------------------------------------------------------
   FINAL OVERRIDE:
   LEFT:
     row 1  You imagine. We build.
     row 2  Where breakthrough...
     row 3  AI Automation...
   RIGHT:
     row 1  Custom-made. Just for you.
     row 2  Portfolio... Precision. Power. Purpose.
     row 3  Unlock...
     row 4  Partner with us.  (LAST)
   Both columns use the SAME row grid, so rows line up vertically.
   ===================================================================== */

@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final {
    padding-left:0!important;
    padding-right:0!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated .cr-v2-stage {
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    position:absolute!important;
    inset:auto!important;
    top:0!important;
    bottom:0!important;

    left:clamp(54px,4.6vw,90px)!important;
    right:clamp(54px,4.6vw,90px)!important;

    width:auto!important;
    max-width:none!important;
    height:100vh!important;
    margin:0!important;
    transform:none!important;

    /* Header / floating-logo clearance. */
    padding-top:clamp(136px,14vh,172px)!important;
    padding-bottom:clamp(40px,4.7vh,62px)!important;
    padding-left:0!important;
    padding-right:0!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:clamp(76px,6.2vw,126px)!important;
    align-items:stretch!important;

    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /*
     SAME FOUR-ROW GRID on left and right.
     Because both columns have the same height and same track definition,
     rows 1/2/3 start at exactly the same vertical positions.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    position:relative!important;
    inset:auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;

    margin:0!important;
    padding:0!important;

    display:grid!important;
    grid-template-rows:
      auto
      minmax(0,1fr)
      minmax(0,1fr)
      auto!important;
    row-gap:clamp(24px,2.8vh,38px)!important;

    align-content:stretch!important;
    align-items:start!important;
    justify-items:stretch!important;

    overflow:visible!important;
    box-sizing:border-box!important;
  }

  /* Direct lines only — no old paragraph grouping layout. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-screen2-paragraph-group {
    display:contents!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line {
    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    justify-content:flex-start!important;
    align-items:baseline!important;
    align-content:flex-start!important;
    align-self:start!important;

    margin:0!important;
    padding:0!important;

    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:visible!important;

    transform:none!important;
    filter:none!important;

    font-family:'Playfair Display',serif!important;
    font-weight:700!important;
    letter-spacing:-.023em!important;
    box-sizing:border-box!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    display:inline-block!important;
    position:relative!important;
    flex:0 0 auto!important;

    min-width:0!important;
    max-width:100%!important;

    margin-right:.14em!important;

    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw:last-child {
    margin-right:0!important;
  }

  /* Heading row: same size left/right. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.58rem,min(4.02vw,5.90vh),5.66rem)!important;
    line-height:1.045!important;
  }

  /*
     SAME body font on both sides.
     Rows 2 and 3 therefore visually match as well as geometrically align.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1 .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2 .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(2.68rem,min(3.02vw,4.65vh),4.20rem)!important;
    line-height:1.11!important;
  }

  /* Last Partner line stays in row 4 and remains left aligned. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-right-partner-last {
    grid-row:4!important;
    align-self:end!important;
    justify-content:flex-start!important;
    text-align:left!important;
    font-size:clamp(2.68rem,min(3.02vw,4.65vh),4.20rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-right-unlock {
    grid-row:3!important;
  }

  /* ================================================================
     EXACT SAME COLOR SYSTEM AS ORIGINAL SCROLL ANIMATION
     ================================================================ */
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--w {
    color:var(--word-ghost)!important;
    -webkit-text-fill-color:var(--word-ghost)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--w.lit {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--p {
    color:var(--word-ghost-p)!important;
    -webkit-text-fill-color:var(--word-ghost-p)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--p.lit {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--g {
    color:var(--word-g)!important;
    -webkit-text-fill-color:var(--word-g)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--g.lit {
    color:var(--word-lit-g)!important;
    -webkit-text-fill-color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--gp {
    color:var(--word-gp)!important;
    -webkit-text-fill-color:var(--word-gp)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--gp.lit {
    color:var(--word-lit-gp)!important;
    -webkit-text-fill-color:var(--word-lit-gp)!important;
  }

  /* Same original keyword focus. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw.cr-keyword.lit {
    color:var(--purple-light)!important;
    -webkit-text-fill-color:var(--purple-light)!important;
    text-shadow:
      0 0 10px rgba(167,139,250,.32),
      0 0 24px rgba(124,58,237,.20)!important;
  }

  /*
     Requested explicit final colors inside the Portfolio row.
     Ghost/pre-lit state remains original. Only active .lit state is forced.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-precision-lavender.lit {
    color:var(--purple-light)!important;
    -webkit-text-fill-color:var(--purple-light)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-power-purpose-white.lit {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
    text-shadow:none!important;
  }
}


/* =====================================================================
   MACBOOK PRO 16-INCH RETINA — SAME ROW ALIGNMENT
   ===================================================================== */
@media
  (min-width:1500px) and
  (max-width:1900px) and
  (min-height:850px) and
  (max-height:1250px) and
  (hover:hover) and
  (pointer:fine) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(98px,5.7vw,122px)!important;
    right:clamp(98px,5.7vw,122px)!important;

    padding-top:clamp(150px,13.8vh,182px)!important;
    padding-bottom:clamp(46px,4.5vh,66px)!important;

    column-gap:clamp(88px,5.2vw,116px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    grid-template-rows:
      auto
      minmax(0,1fr)
      minmax(0,1fr)
      auto!important;
    row-gap:clamp(28px,2.7vh,38px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.82rem,min(3.68vw,5.42vh),5.60rem)!important;
    line-height:1.045!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1 .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2 .cr-v2-line:not(.cr-v2-column-heading),
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-right-partner-last {
    font-size:clamp(2.90rem,min(2.86vw,4.26vh),4.20rem)!important;
    line-height:1.105!important;
  }
}


/* Large desktop 105% mode. */
@media (min-width:1600px) and (min-height:850px) {
  html.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(104px,6vw,130px)!important;
    right:clamp(104px,6vw,130px)!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
  }
}


/* Normal / shorter laptop. */
@media (min-width:769px) and (max-height:840px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(40px,3.3vw,56px)!important;
    right:clamp(40px,3.3vw,56px)!important;

    padding-top:clamp(108px,12vh,126px)!important;
    padding-bottom:clamp(24px,3.2vh,38px)!important;

    column-gap:clamp(50px,4.3vw,72px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    grid-template-rows:
      auto
      minmax(0,1fr)
      minmax(0,1fr)
      auto!important;
    row-gap:clamp(18px,2.3vh,28px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(2.94rem,min(3.34vw,5.02vh),4.08rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--1 .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-screen--2 .cr-v2-line:not(.cr-v2-column-heading),
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-right-partner-last {
    font-size:clamp(2.22rem,min(2.54vw,3.84vh),3.08rem)!important;
    line-height:1.10!important;
  }
}


/* =====================================================================
   SECTION 2 — TRUE SHARED ROW ALIGNMENT + PARTNER CONTACT LINK
   ---------------------------------------------------------------------
   This is the FINAL alignment rule.
   Both left and right lines are children of ONE shared grid via
   `display: contents`, so row positions are mathematically identical.

   ROW 1: You imagine...              | Custom-made...
   ROW 2: Where breakthrough...       | Portfolio... Precision/Power/Purpose
   ROW 3: AI Automation...            | Unlock...
   ROW 4: [empty left]                | Partner with us. -> #section9
   ===================================================================== */

@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final {
    padding-left:0!important;
    padding-right:0!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated,
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated
  .cr-v2-stage {
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /*
     ONE grid owns BOTH sides.
     Safe top spacing keeps the first heading below the floating logo/header.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    position:absolute!important;
    inset:auto!important;
    top:0!important;
    bottom:0!important;

    left:clamp(54px,4.6vw,90px)!important;
    right:clamp(54px,4.6vw,90px)!important;

    width:auto!important;
    max-width:none!important;
    height:100vh!important;

    margin:0!important;
    transform:translateY(26px)!important;

    padding-top:clamp(138px,14vh,174px)!important;
    padding-bottom:clamp(38px,4.5vh,58px)!important;
    padding-left:0!important;
    padding-right:0!important;

    display:grid!important;
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr)!important;

    grid-template-rows:
      auto
      minmax(0,1fr)
      minmax(0,1fr)
      auto!important;

    column-gap:clamp(78px,6.3vw,128px)!important;
    row-gap:clamp(22px,2.6vh,34px)!important;

    align-items:start!important;
    align-content:stretch!important;

    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;

    transition:
      opacity .92s cubic-bezier(.22,1,.36,1),
      transform .92s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .92s!important;

    box-sizing:border-box!important;
    overflow:visible!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen.is-active {
    opacity:1!important;
    visibility:visible!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
    transition-delay:0s!important;
  }

  /*
     Critical alignment fix:
     remove the two independent screen boxes from layout.
     Their LINE children become direct items of the one parent grid.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    display:contents!important;
  }

  /* ---- LEFT COLUMN ---- */
  #crSticky.cr-sticky--auto-final .cr-v2-line--1 {
    grid-column:1!important;
    grid-row:1!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line--2 {
    grid-column:1!important;
    grid-row:2!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line--3 {
    grid-column:1!important;
    grid-row:3!important;
  }

  /* ---- RIGHT COLUMN ---- */
  #crSticky.cr-sticky--auto-final .cr-v2-line--4 {
    grid-column:2!important;
    grid-row:1!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line--5 {
    grid-column:2!important;
    grid-row:2!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line--6,
  #crSticky.cr-sticky--auto-final .cr-v2-right-unlock {
    grid-column:2!important;
    grid-row:3!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-line--7,
  #crSticky.cr-sticky--auto-final .cr-v2-right-partner-last {
    grid-column:2!important;
    grid-row:4!important;
    align-self:end!important;
  }

  /*
     Every line follows one common geometry.
     No separate left/right flex layout remains.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line {
    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    justify-content:flex-start!important;
    align-items:baseline!important;
    align-content:flex-start!important;
    align-self:start!important;

    margin:0!important;
    padding:0!important;

    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:visible!important;

    transform:none!important;
    filter:none!important;

    font-family:'Playfair Display',serif!important;
    font-weight:700!important;
    letter-spacing:-.023em!important;

    box-sizing:border-box!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    display:inline-block!important;
    position:relative!important;

    flex:0 0 auto!important;
    min-width:0!important;
    max-width:100%!important;

    margin-right:.14em!important;

    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw:last-child {
    margin-right:0!important;
  }

  /* Same heading size on both sides. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.58rem,min(4.02vw,5.9vh),5.66rem)!important;
    line-height:1.045!important;
  }

  /* Same body size for corresponding left/right rows. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(2.68rem,min(3.02vw,4.65vh),4.20rem)!important;
    line-height:1.11!important;
  }

  /*
     Partner link:
     retains all existing per-word colors because the word spans stay unchanged.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-partner-link {
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:baseline!important;
    justify-content:flex-start!important;

    width:100%!important;
    min-width:0!important;

    color:inherit!important;
    -webkit-text-fill-color:inherit;
    text-decoration:none!important;
    cursor:pointer!important;

    pointer-events:auto!important;
    outline-offset:6px;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-partner-link:hover .cw,
  #crSticky.cr-sticky--auto-final
  .cr-v2-partner-link:focus-visible .cw {
    filter:brightness(1.14);
  }

  /* ================================================================
     EXACT ORIGINAL SCROLL-TEXT COLOR BEHAVIOR
     ================================================================ */
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--w {
    color:var(--word-ghost)!important;
    -webkit-text-fill-color:var(--word-ghost)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--w.lit {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--p {
    color:var(--word-ghost-p)!important;
    -webkit-text-fill-color:var(--word-ghost-p)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--p.lit {
    color:var(--word-lit-p)!important;
    -webkit-text-fill-color:var(--word-lit-p)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--g {
    color:var(--word-g)!important;
    -webkit-text-fill-color:var(--word-g)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--g.lit {
    color:var(--word-lit-g)!important;
    -webkit-text-fill-color:var(--word-lit-g)!important;
  }

  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--gp {
    color:var(--word-gp)!important;
    -webkit-text-fill-color:var(--word-gp)!important;
  }
  #crSticky.cr-sticky--auto-final .cr-v2-dual-screen .cw--gp.lit {
    color:var(--word-lit-gp)!important;
    -webkit-text-fill-color:var(--word-lit-gp)!important;
  }

  /* Same original keyword emphasis. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cw.cr-keyword.lit {
    color:var(--purple-light)!important;
    -webkit-text-fill-color:var(--purple-light)!important;
    text-shadow:
      0 0 10px rgba(167,139,250,.32),
      0 0 24px rgba(124,58,237,.20)!important;
  }

  /* Requested explicit active colors in Portfolio row. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-precision-lavender.lit {
    color:var(--purple-light)!important;
    -webkit-text-fill-color:var(--purple-light)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-power-purpose-white.lit {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
    text-shadow:none!important;
  }
}


/* =====================================================================
   MACBOOK PRO 16-INCH — SAME SHARED ROW GRID
   ===================================================================== */
@media
  (min-width:1500px) and
  (max-width:1900px) and
  (min-height:850px) and
  (max-height:1250px) and
  (hover:hover) and
  (pointer:fine) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(98px,5.7vw,122px)!important;
    right:clamp(98px,5.7vw,122px)!important;

    padding-top:clamp(150px,13.8vh,182px)!important;
    padding-bottom:clamp(44px,4.3vh,64px)!important;

    column-gap:clamp(88px,5.2vw,116px)!important;
    row-gap:clamp(25px,2.5vh,35px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.82rem,min(3.68vw,5.42vh),5.60rem)!important;
    line-height:1.045!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(2.90rem,min(2.86vw,4.26vh),4.20rem)!important;
    line-height:1.105!important;
  }
}


/* Large desktop 105% visual zoom safety. */
@media (min-width:1600px) and (min-height:850px) {
  html.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(104px,6vw,130px)!important;
    right:clamp(104px,6vw,130px)!important;
    width:auto!important;
    max-width:none!important;
  }
}


/* =====================================================================
   NORMAL / SHORTER LAPTOP
   ===================================================================== */
@media (min-width:769px) and (max-height:840px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(40px,3.3vw,56px)!important;
    right:clamp(40px,3.3vw,56px)!important;

    padding-top:clamp(108px,12vh,126px)!important;
    padding-bottom:clamp(22px,3vh,36px)!important;

    column-gap:clamp(50px,4.3vw,72px)!important;
    row-gap:clamp(16px,2vh,26px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(2.94rem,min(3.34vw,5.02vh),4.08rem)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(2.22rem,min(2.54vw,3.84vh),3.08rem)!important;
    line-height:1.10!important;
  }
}


/* =====================================================================
   SECTION 2 — FINAL HEADING / TOP SPACE / ONE-LINE PHRASES / CENTER CTA
   ---------------------------------------------------------------------
   FINAL OVERRIDE
   - larger headings
   - more space below header/logo
   - Precision. Power. Purpose. stays on ONE line
   - corporate & institutional edge. stays on ONE line
   - Partner with us. centered at bottom across BOTH columns
   - shared rows remain aligned
   - normal laptop + MacBook Pro 16-inch
   ===================================================================== */

@media (min-width:769px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    /*
       Move both headings farther below the top-left floating logo/header.
    */
    padding-top:clamp(158px,16vh,194px)!important;
    padding-bottom:clamp(34px,4vh,50px)!important;

    /*
       Keep one shared 4-row geometry.
       Row 4 is now the centered Partner CTA across both columns.
    */
    grid-template-rows:
      auto
      minmax(0,1fr)
      minmax(0,1fr)
      auto!important;

    row-gap:clamp(24px,2.8vh,36px)!important;
  }

  /* Headings are clearly stronger than all body content. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.92rem,min(4.35vw,6.35vh),6.05rem)!important;
    line-height:1.035!important;
    letter-spacing:-.03em!important;
  }

  /* Keep body large, but leave enough width for the requested one-line groups. */
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(2.62rem,min(2.92vw,4.45vh),4.05rem)!important;
    line-height:1.105!important;
  }

  /*
     These wrappers contain the ORIGINAL .cw spans.
     No color is applied here, so each child keeps the exact same
     scroll-animation color rules and .lit transition.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-precision-group,
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-edge-group {
    display:inline-flex!important;
    flex:0 0 auto!important;
    flex-wrap:nowrap!important;
    align-items:baseline!important;
    white-space:nowrap!important;
    max-width:none!important;
    min-width:max-content!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-precision-group .cw,
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-edge-group .cw {
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /*
     Right Portfolio row:
     allow "Portfolio that lends" to wrap if needed, but keep
     Precision. Power. Purpose. together as one complete line.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--5 {
    align-content:flex-start!important;
  }

  /*
     Unlock row:
     "corporate & institutional edge." is one unbroken group.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-right-unlock {
    align-content:flex-start!important;
  }

  /*
     Partner CTA now owns the entire bottom row.
     This removes the visual imbalance of keeping it only under the right side.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--7,
  #crSticky.cr-sticky--auto-final
  .cr-v2-right-partner-last {
    grid-column:1 / -1!important;
    grid-row:4!important;

    width:100%!important;
    max-width:100%!important;

    align-self:end!important;
    justify-content:center!important;
    text-align:center!important;

    font-size:clamp(2.72rem,min(3vw,4.5vh),4.08rem)!important;
    line-height:1.05!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-partner-link {
    width:auto!important;
    max-width:max-content!important;

    display:inline-flex!important;
    flex-wrap:nowrap!important;

    align-items:baseline!important;
    justify-content:center!important;

    margin:0 auto!important;
    white-space:nowrap!important;

    text-align:center!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-partner-link .cw {
    white-space:nowrap!important;
  }

  /*
     Requested active colors:
       Precision = lavender
       Power + Purpose = white
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-precision-lavender.lit {
    color:var(--purple-light)!important;
    -webkit-text-fill-color:var(--purple-light)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-power-purpose-white.lit {
    color:var(--word-lit)!important;
    -webkit-text-fill-color:var(--word-lit)!important;
    text-shadow:none!important;
  }
}


/* =====================================================================
   MACBOOK PRO 16-INCH RETINA — SAME COMPOSITION
   ===================================================================== */
@media
  (min-width:1500px) and
  (max-width:1900px) and
  (min-height:850px) and
  (max-height:1250px) and
  (hover:hover) and
  (pointer:fine) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    /*
       More protected top area on 16-inch Retina, while preserving
       enough vertical space for the centered bottom CTA.
    */
    padding-top:clamp(170px,15.8vh,202px)!important;
    padding-bottom:clamp(38px,3.8vh,54px)!important;

    left:clamp(102px,5.8vw,126px)!important;
    right:clamp(102px,5.8vw,126px)!important;

    column-gap:clamp(88px,5.1vw,116px)!important;
    row-gap:clamp(26px,2.5vh,36px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(4.08rem,min(3.92vw,5.82vh),5.95rem)!important;
    line-height:1.035!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(2.78rem,min(2.72vw,4.08vh),4.00rem)!important;
    line-height:1.10!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--7,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-right-partner-last {
    font-size:clamp(2.92rem,min(2.82vw,4.18vh),4.10rem)!important;
  }
}


/* =====================================================================
   NORMAL LAPTOP / SHORTER HEIGHT
   ===================================================================== */
@media (min-width:769px) and (max-height:840px) {

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    /*
       Keep clear of the logo/header without starving the shorter viewport.
    */
    padding-top:clamp(122px,14vh,142px)!important;
    padding-bottom:clamp(20px,2.7vh,32px)!important;

    row-gap:clamp(14px,1.8vh,24px)!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.12rem,min(3.55vw,5.35vh),4.38rem)!important;
    line-height:1.04!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(2.15rem,min(2.42vw,3.65vh),2.98rem)!important;
    line-height:1.095!important;
  }

  #crSticky.cr-sticky--auto-final
  .cr-v2-line--7,
  #crSticky.cr-sticky--auto-final
  .cr-v2-right-partner-last {
    font-size:clamp(2.28rem,min(2.55vw,3.78vh),3.10rem)!important;
  }

  /*
     Slightly tighten only the two no-wrap groups on short screens,
     while keeping them visually consistent with the body.
  */
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-precision-group,
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-edge-group {
    letter-spacing:-.035em!important;
  }
}


/* =====================================================================
   SECTION 2 — SECOND VIEW HEADING ONLY UPDATE
   ---------------------------------------------------------------------
   ONLY requested changes:
   - You imagine. We build. -> larger heading
   - Custom-made. Just for you. -> same larger heading
   - add more space directly below both headings
   - normal desktop/laptop + MacBook Pro 16-inch
   ===================================================================== */

/* Normal desktop / laptop */
@media (min-width:769px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(4.35rem,min(4.75vw,6.75vh),6.65rem)!important;
    line-height:1.025!important;
    letter-spacing:-.032em!important;

    /* More space between heading and the content directly underneath. */
    margin-bottom:clamp(38px,4.2vh,58px)!important;
  }
}

/* MacBook Pro 16-inch / Retina */
@media
  (min-width:1500px) and
  (max-width:1900px) and
  (min-height:850px) and
  (max-height:1250px) and
  (hover:hover) and
  (pointer:fine) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(4.70rem,min(4.28vw,6.20vh),6.55rem)!important;
    line-height:1.02!important;
    letter-spacing:-.033em!important;

    /* Slightly more heading-to-content space on the 16-inch screen. */
    margin-bottom:clamp(44px,4.2vh,62px)!important;
  }
}

/* Normal shorter laptop screens */
@media (min-width:769px) and (max-height:840px) {
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-column-heading {
    font-size:clamp(3.55rem,min(4vw,5.95vh),4.90rem)!important;
    line-height:1.025!important;

    /* Keep visible breathing room without consuming too much short-screen height. */
    margin-bottom:clamp(28px,3.4vh,42px)!important;
  }
}


/* =====================================================================
   SECTION 2 — MACBOOK PRO 16" = SAME LAYOUT AS NORMAL LAPTOP
   ---------------------------------------------------------------------
   FINAL OVERRIDE — CSS ONLY
   Fixes the 16-inch screenshot where the right side becomes too narrow
   and headings/body wrap vertically.

   On Retina Mac 16":
   - use the same safe side spacing as the working normal laptop
   - same 50/50 left/right column width
   - same heading/body scale
   - keep both headings on one line
   - keep requested phrase groups on one line
   - keep Partner with us. centered at the bottom
   ===================================================================== */
@media
  (min-width:1500px) and
  (max-width:1900px) and
  (min-height:850px) and
  (max-height:1250px) and
  (hover:hover) and
  (pointer:fine) {

  /*
     IMPORTANT:
     Override ALL earlier Mac-specific Section-2 widening/font rules
     with the same geometry used by the normal laptop layout.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    left:clamp(40px,3.3vw,56px)!important;
    right:clamp(40px,3.3vw,56px)!important;

    width:auto!important;
    max-width:none!important;

    padding-top:clamp(122px,14vh,142px)!important;
    padding-bottom:clamp(20px,2.7vh,32px)!important;
    padding-left:0!important;
    padding-right:0!important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr)!important;

    /*
       Compact shared rows like the normal laptop:
       heading / content / content / bottom CTA.
    */
    grid-template-rows:
      auto
      auto
      auto
      1fr!important;

    column-gap:clamp(50px,4.3vw,72px)!important;
    row-gap:clamp(20px,2.4vh,32px)!important;

    align-items:start!important;
    align-content:stretch!important;

    box-sizing:border-box!important;
    overflow:visible!important;
  }

  /* Both top headings use the SAME normal-laptop size. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-column-heading {
    font-size:clamp(3.55rem,min(4vw,5.95vh),4.90rem)!important;
    line-height:1.025!important;
    letter-spacing:-.032em!important;

    margin-bottom:clamp(28px,3.4vh,42px)!important;

    /*
       Prevent:
       Custom-
       made.
       Just
       for
       you.
    */
    flex-wrap:nowrap!important;
    white-space:nowrap!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-column-heading
  .cw {
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /* Same body scale as normal laptop on BOTH sides. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(2.15rem,min(2.42vw,3.65vh),2.98rem)!important;
    line-height:1.095!important;
  }

  /*
     Keep the right-side requested phrases intact.
     With the normal-laptop font scale they fit correctly in the 50/50 column.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-precision-group,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-edge-group {
    display:inline-flex!important;
    flex-wrap:nowrap!important;
    flex:0 0 auto!important;
    min-width:max-content!important;
    max-width:none!important;
    white-space:nowrap!important;
    letter-spacing:-.035em!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-precision-group .cw,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-edge-group .cw {
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /*
     Partner remains centered at the bottom of the entire Section 2 screen,
     exactly like the normal laptop composition.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--7,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-right-partner-last {
    grid-column:1 / -1!important;
    grid-row:4!important;

    width:100%!important;
    align-self:end!important;

    justify-content:center!important;
    text-align:center!important;

    font-size:clamp(2.28rem,min(2.55vw,3.78vh),3.10rem)!important;
    line-height:1.05!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-partner-link {
    width:auto!important;
    max-width:max-content!important;
    margin:0 auto!important;

    display:inline-flex!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;

    white-space:nowrap!important;
    text-align:center!important;
  }

  /*
     Both columns keep their shared row mapping so corresponding left/right
     text starts on the same horizontal row.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--1 {
    grid-column:1!important;
    grid-row:1!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--4 {
    grid-column:2!important;
    grid-row:1!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--2 {
    grid-column:1!important;
    grid-row:2!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--5 {
    grid-column:2!important;
    grid-row:2!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--3 {
    grid-column:1!important;
    grid-row:3!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--6,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-right-unlock {
    grid-column:2!important;
    grid-row:3!important;
  }
}


/* =====================================================================
   SECTION 2 — MACBOOK M2 PRO 16" EXACT NORMAL-LAPTOP COMPOSITION
   ---------------------------------------------------------------------
   FINAL OVERRIDE — MAC ONLY.
   The normal laptop layout above is NOT changed.

   Desired composition copied from the user's normal-screen reference:
   LEFT:
     You imagine. We build.
     Where breakthrough tech meets your boldest ideas.
     AI Automation. Next-gen solutions.

   RIGHT:
     Custom-made. Just for you.
     Portfolio that lends Precision. Power. Purpose.
     Unlock your ultimate corporate & institutional edge.
     Partner with us.

   No stretched row grid. No bottom-centred Partner CTA.
   Both sides are independent, balanced vertical stacks.
   ===================================================================== */

@media (min-width:1024px) {

  /*
     Apply to every Retina Mac desktop width, not only >=1500px.
     This is important because MacBook display scaling can report a smaller
     CSS viewport even on the 16-inch panel.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final {
    padding:0!important;
    overflow:hidden!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated
  .cr-v2-stage {
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Full-screen two-column canvas, matching the normal laptop screenshot. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    position:absolute!important;
    inset:0!important;

    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;

    margin:0!important;
    padding:
      clamp(118px,13.2vh,150px)
      clamp(54px,4.2vw,76px)
      clamp(34px,4vh,52px)!important;

    transform:translateY(24px)!important;

    display:grid!important;
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr)!important;

    grid-template-rows:1fr!important;

    column-gap:clamp(78px,6.4vw,118px)!important;

    align-items:start!important;
    align-content:start!important;

    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;

    transition:
      opacity .92s cubic-bezier(.22,1,.36,1),
      transform .92s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .92s!important;

    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen.is-active {
    opacity:1!important;
    visibility:visible!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
    transition-delay:0s!important;
  }

  /*
     CRITICAL FIX:
     restore the two screen wrappers as actual left/right columns.
     This cancels the previous Mac/shared-grid display:contents behavior.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    margin:0!important;
    padding:0!important;

    opacity:1!important;
    visibility:visible!important;
    transform:none!important;

    overflow:visible!important;
    box-sizing:border-box!important;
  }

  /* Left stack spacing — same rhythm as normal screenshot. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1 {
    grid-column:1!important;
    grid-row:1!important;
    gap:clamp(56px,6.2vh,80px)!important;
  }

  /* Right stack has one extra line, so spacing is slightly tighter. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    grid-column:2!important;
    grid-row:1!important;
    gap:clamp(42px,4.8vh,62px)!important;
  }

  /*
     Remove all earlier per-line grid placements.
     Inside the flex columns every line returns to normal document order.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line {
    grid-column:auto!important;
    grid-row:auto!important;

    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;

    justify-content:flex-start!important;
    align-items:baseline!important;
    align-content:flex-start!important;

    margin:0!important;
    padding:0!important;

    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:visible!important;

    transform:none!important;
    filter:none!important;

    font-family:'Playfair Display',serif!important;
    font-weight:700!important;
    letter-spacing:-.023em!important;

    box-sizing:border-box!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    display:inline-block!important;
    flex:0 0 auto!important;
    min-width:0!important;
    max-width:100%!important;

    margin-right:.14em!important;

    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  /*
     Same visual heading size as normal laptop.
     PX/VW/VH sizing avoids the Retina root 17px rem normalization from
     enlarging these headings differently from Windows.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-column-heading {
    font-size:clamp(42px,min(3.55vw,5.6vh),58px)!important;
    line-height:1.04!important;
    letter-spacing:-.03em!important;

    margin:0 0 clamp(8px,1vh,14px) 0!important;

    flex-wrap:nowrap!important;
    white-space:nowrap!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-column-heading .cw {
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /* Body scale copied visually from the normal laptop reference. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(32px,min(2.52vw,4.15vh),43px)!important;
    line-height:1.10!important;
  }

  /*
     Keep the two requested right-side phrases intact.
     They retain each child word's existing color classes.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-precision-group,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-edge-group {
    display:inline-flex!important;
    flex:0 0 auto!important;
    flex-wrap:nowrap!important;

    min-width:max-content!important;
    max-width:none!important;

    white-space:nowrap!important;
    letter-spacing:-.035em!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-precision-group .cw,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-edge-group .cw {
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /*
     Partner with us. belongs UNDER the right column exactly like the
     normal-laptop screenshot — NOT centered across the whole screen.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--7,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-right-partner-last {
    grid-column:auto!important;
    grid-row:auto!important;

    width:100%!important;
    max-width:100%!important;

    align-self:auto!important;
    justify-content:flex-start!important;
    text-align:left!important;

    margin-top:0!important;

    font-size:clamp(32px,min(2.52vw,4.15vh),43px)!important;
    line-height:1.08!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-partner-link {
    width:auto!important;
    max-width:100%!important;

    display:inline-flex!important;
    flex-wrap:nowrap!important;

    justify-content:flex-start!important;
    align-items:baseline!important;

    margin:0!important;

    white-space:nowrap!important;
    text-align:left!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-partner-link .cw {
    white-space:nowrap!important;
  }
}


/* =====================================================================
   MAC + LARGE-DESKTOP 105% CLASS
   ---------------------------------------------------------------------
   If both classes are present, keep the exact same Section-2 geometry.
   This overrides the earlier special 105%-mode Section-2 gutters.
   ===================================================================== */
@media (min-width:1024px) {
  html.kone-mac-retina.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    inset:0!important;
    left:0!important;
    right:0!important;

    width:100vw!important;
    max-width:100vw!important;

    padding:
      clamp(118px,13.2vh,150px)
      clamp(54px,4.2vw,76px)
      clamp(34px,4vh,52px)!important;

    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:clamp(78px,6.4vw,118px)!important;
  }
}


/* =====================================================================
   SECTION 2 — MACBOOK M2 PRO 16" FINAL FIX
   ---------------------------------------------------------------------
   MAC ONLY — normal laptop layout is NOT touched.

   Goals:
   - visually match normal laptop screenshot
   - larger font on Mac 16"
   - no hidden / clipped text
   - same 2-column composition
   - Partner with us. centered at bottom of whole section
   ===================================================================== */

@media (min-width:1024px) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final {
    padding:0!important;
    overflow:hidden!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-copy.cr-copy--v2-dedicated
  .cr-v2-stage {
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /*
     Full-screen Mac canvas.
     Slightly narrower side padding gives the text more usable width
     while still keeping safe browser-edge margins.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    position:absolute!important;
    inset:0!important;

    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;

    margin:0!important;

    padding:
      clamp(126px,12.4vh,154px)
      clamp(48px,3.2vw,64px)
      clamp(88px,8vh,108px)!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:1fr!important;

    column-gap:clamp(72px,5vw,98px)!important;

    align-items:start!important;
    align-content:start!important;

    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  /*
     Restore LEFT / RIGHT as independent stacks, exactly like normal laptop.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    inset:auto!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;

    margin:0!important;
    padding:0!important;

    opacity:1!important;
    visibility:visible!important;
    transform:none!important;

    overflow:visible!important;
    box-sizing:border-box!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--1 {
    grid-column:1!important;
    grid-row:1!important;

    /* Heading -> middle sentence -> AI Automation */
    gap:clamp(52px,5.3vh,72px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen > .cr-v2-screen--2 {
    grid-column:2!important;
    grid-row:1!important;

    /* Slightly tighter because right side has more content. */
    gap:clamp(38px,3.9vh,54px)!important;

    /*
       Keep static so the Partner line can anchor to the whole
       .cr-v2-dual-screen instead of only the right column.
    */
    position:static!important;
  }

  /* All lines: normal flow, no shared-grid leftovers. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line {
    grid-column:auto!important;
    grid-row:auto!important;

    position:relative!important;
    inset:auto!important;

    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;

    justify-content:flex-start!important;
    align-items:baseline!important;
    align-content:flex-start!important;

    margin:0!important;
    padding:0!important;

    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    overflow:visible!important;

    transform:none!important;
    filter:none!important;

    font-family:'Playfair Display',serif!important;
    font-weight:700!important;
    letter-spacing:-.023em!important;

    box-sizing:border-box!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen .cr-v2-line .cw {
    display:inline-block!important;
    flex:0 0 auto!important;

    min-width:0!important;
    max-width:100%!important;

    margin-right:.13em!important;

    white-space:normal!important;
  }

  /*
     BIGGER headings than previous Mac attempt.
     Still one line, matching the normal laptop screenshot.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-column-heading {
    font-size:clamp(52px,min(3.9vw,5.9vh),66px)!important;
    line-height:1.02!important;
    letter-spacing:-.032em!important;

    margin:0 0 clamp(10px,1vh,16px) 0!important;

    flex-wrap:nowrap!important;
    white-space:nowrap!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-column-heading .cw {
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /*
     BIGGER body text on Mac, but still protected from clipping.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(38px,min(2.72vw,4.25vh),48px)!important;
    line-height:1.095!important;
  }

  /* Keep requested right-side phrases on one line. */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-precision-group,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-edge-group {
    display:inline-flex!important;
    flex:0 0 auto!important;
    flex-wrap:nowrap!important;

    min-width:max-content!important;
    max-width:none!important;

    white-space:nowrap!important;
    letter-spacing:-.04em!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-precision-group .cw,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-nowrap-edge-group .cw {
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /*
     Partner with us. = TRUE CENTER BOTTOM of whole Section 2 screen.
  */
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--7,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-right-partner-last {
    position:absolute!important;

    left:50%!important;
    right:auto!important;
    bottom:clamp(34px,3.6vh,48px)!important;

    width:auto!important;
    min-width:max-content!important;
    max-width:90vw!important;

    transform:translateX(-50%)!important;

    justify-content:center!important;
    align-items:baseline!important;

    margin:0!important;
    padding:0!important;

    text-align:center!important;
    white-space:nowrap!important;

    font-size:clamp(38px,min(2.72vw,4.25vh),48px)!important;
    line-height:1.05!important;

    z-index:4!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-partner-link {
    display:inline-flex!important;
    flex-wrap:nowrap!important;

    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;

    justify-content:center!important;
    align-items:baseline!important;

    margin:0 auto!important;

    white-space:nowrap!important;
    text-align:center!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-partner-link .cw {
    white-space:nowrap!important;
  }
}


/* =====================================================================
   MACBOOK 16" + 105% LARGE-SCREEN CLASS
   Keep exactly the same final geometry.
   ===================================================================== */
@media (min-width:1024px) {

  html.kone-mac-retina.kone-large-screen-105
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    inset:0!important;

    left:0!important;
    right:0!important;

    width:100vw!important;
    max-width:100vw!important;

    padding:
      clamp(126px,12.4vh,154px)
      clamp(48px,3.2vw,64px)
      clamp(88px,8vh,108px)!important;

    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:clamp(72px,5vw,98px)!important;
  }
}


/* =====================================================================
   EXTRA SAFETY FOR MACBOOK 16" WHEN DISPLAY SCALING REPORTS A NARROWER
   CSS VIEWPORT.  Prevent any right-side clipping without changing layout.
   ===================================================================== */
@media (min-width:1024px) and (max-width:1500px) {

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen {
    padding-left:40px!important;
    padding-right:40px!important;
    column-gap:56px!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-column-heading {
    font-size:clamp(46px,4.1vw,58px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-dual-screen
  .cr-v2-line:not(.cr-v2-column-heading) {
    font-size:clamp(34px,2.85vw,42px)!important;
  }

  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-line--7,
  html.kone-mac-retina
  #crSticky.cr-sticky--auto-final
  .cr-v2-right-partner-last {
    font-size:clamp(34px,2.85vw,42px)!important;
  }
}



/* =====================================================================
   NEW STANDALONE SECTION AFTER SECTION 2 — EXACT TWO-SCROLL RUNWAY
   ---------------------------------------------------------------------
   This does NOT replace or style the existing .cr-track scroll story.
   ===================================================================== */
.kone-fade-track{
  position:relative;
  width:100%;
  height:200vh;
  background:var(--bg);
  transition:background .55s;
}

.kone-fade-sticky{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(36px,6vh,76px) clamp(24px,7vw,130px);
  background:var(--bg);
}

.kone-fade-content{
  position:relative;
  z-index:2;
  width:min(1120px,92vw);
  margin:0 auto;
  text-align:center;
  opacity:0;
  transform:translateY(72px) scale(.975);
  will-change:transform,opacity;
}

.kone-fade-kicker{
  margin:0 0 24px;
  font-family:'Raleway',sans-serif;
  font-size:clamp(.62rem,.8vw,.78rem);
  font-weight:700;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--purple-light);
}

.kone-fade-title{
  margin:0;
  font-family:'Playfair Display',serif;
  font-size:clamp(3rem,6.4vw,7rem);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--text-primary);
}

.kone-fade-title em{
  color:var(--purple-light);
  font-style:italic;
}

.kone-fade-text{
  width:min(720px,88vw);
  margin:32px auto 0;
  font-family:'Raleway',sans-serif;
  font-size:clamp(.95rem,1.25vw,1.18rem);
  font-weight:300;
  line-height:1.85;
  color:var(--text-secondary);
}

.kone-fade-glow{
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
  filter:blur(4px);
}

.kone-fade-glow--left{
  width:min(62vw,900px);
  height:min(62vw,900px);
  left:-26vw;
  top:-25vh;
  background:radial-gradient(circle,rgba(124,58,237,.12) 0%,rgba(124,58,237,.035) 44%,transparent 70%);
}

.kone-fade-glow--right{
  width:min(52vw,760px);
  height:min(52vw,760px);
  right:-21vw;
  bottom:-27vh;
  background:radial-gradient(circle,rgba(167,139,250,.10) 0%,rgba(124,58,237,.025) 46%,transparent 70%);
}

@media (max-width:768px){
  .kone-fade-track{height:200vh;}
  .kone-fade-sticky{height:100svh;min-height:100svh;padding:28px 20px;}
  .kone-fade-title{font-size:clamp(2.35rem,11vw,4.35rem);}
  .kone-fade-text{margin-top:24px;font-size:.96rem;line-height:1.72;}
}


/* AI PORTFOLIO SECTION */
.ai-portfolio-section{
  min-height:100vh;
  background:#05030a;
  color:#fff;
  display:grid;
  grid-template-columns:22% 50% 28%;
  border-top:1px solid rgba(255,255,255,.12);
  position:relative;
  overflow:hidden;
  font-family:'Raleway',sans-serif;
}

.ai-left-panel,
.ai-center-panel,
.ai-right-panel
{
  padding:25px;
  border-right:1px solid rgba(255,255,255,.12);
}
.ai-left-panel{
  display:flex;
  flex-direction:column;
}
.ai-left-panel .ai-small{
  display:block;
  margin-bottom:10px;
}
.ai-right-panel
{
  padding:25px;
  border-right:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  height:100%;
  box-sizing:border-box;
}

.ai-right-panel .ai-03a-fade,
.ai-right-panel .ai-box{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  box-sizing:border-box;
}

.ai-right-panel .ai-box{
  margin-top:0!important; /* remove the old fixed top margin now that flex handles spacing */
}

.ai-03a-cycle{
  position:relative;
  min-height:2.6em; /* was 2.4em — gives 2-line headlines enough room */
}

.ai-box{
  margin-top:0;
}

.ai-box h2,
.ai-box p,
.ai-box small{
  margin:0;
}

.ai-box h2{
  margin-top:5px;
  margin-bottom:7px;
}
.ai-small,
.ai-right-panel small{
  color:#a78bfa;
  letter-spacing:3px;
  font-size:11px;
}
.ai-left-panel h5{
  margin:0 0 22px;
  font-size:12px;
  letter-spacing:3px;
  font-weight:700;
  color:#a78bfa;
}
.ai-left-panel h2{
  margin:0 0 28px;
  font-size:48px;
  line-height:.95;
}
.ai-bottom-text b{
  color:#a78bfa;
}

.ai-left-panel h2 span,

.ai-title .ai-vertical-imagine2{
  color:#ffffff; /* AI white */
}

.ai-title .ai-tall-portfolio{
  color:#a78bfa; /* PORTFOLIO purple */
}
.ai-title b .ai-lends{
    color:#a78bfa !important;
    display:inline-block;
    line-height:inherit;
    vertical-align:baseline;
    transform:translateY(0) !important;
}

.ppp-word--1 {
    color: #a78bfa; /* Purple */
}

.ai-center-panel .ai-title b span.ppp-word.ppp-word--2{
    color:#ffffff !important;
    text-shadow:0 0 15px rgba(255,255,255,.35);
}

.ppp-word--3 {
    color: #a78bfa; /* Purple */
}
.ai-center-textblock{
    position:relative;
    overflow:hidden;
}


.ai-particle-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
}


.ai-center-textblock > *:not(.ai-particle-canvas){
    position:relative;
    z-index:2;
}
.ai-particle-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    opacity:.9;
    filter:blur(.15px);
}
.ai-title span{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  position:relative;
}
.ai-title-row{
  position:relative;
  min-height:1.4em;
  padding-left:0.9em; /* reserve room for the rotated AI so PORTFOLIO doesn't overlap it */
}
.ai-left-panel h2 h3{
  /* AUTOMATION. sits inside the h2 in the markup */
  display:block;
  margin:6px 0 0;
  font-size:38px;
  line-height:.95;
}
.ai-left-panel > h3{
  /* CUSTOM-MADE. JUST FOR YOU. */
  margin:0 0 30px;
  font-size:38px;
  line-height:1.08;
}
.ai-left-panel .unlock-card{
  margin:0 0 26px;
}

.ai-left-panel > p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,.55);
}
/* ===== AI PORTFOLIO TITLE — TALLER "PORTFOLIO" TEXT ===== */
/* .ai-title > span:not(.ai-vertical-imagine2){
  display:inline-block;
  font-size:clamp(46px,4.6vw,64px);
  line-height:1;
  font-weight:900;
} */
.ai-portfolio-section .ai-vertical-imagine{
  display:block;
  position:absolute;
  left:50%;
  top:58%;
  transform:translate(-50%,-50%) rotate(-90deg);
  transform-origin:center;
  color:#f5f1fb;
  font-size:clamp(58px,6.2vw,92px); /* increased from clamp(48px,5.1vw,78px) */
  line-height:.9;
  font-weight:900;
  letter-spacing:-4px;
  white-space:nowrap;
}
.ai-title-hero{
  font-style:normal;
  position:absolute;
  left:0;
  top:50%;
  display:inline-block;
  font-weight:900;
  font-size:2.6em;
  line-height:.85;
  letter-spacing:-3px;
  color:#a78bfa;
  transform:translate(-50%,-50%) rotate(-90deg);
  transform-origin:center;
  white-space:nowrap;
  text-shadow:0 0 24px rgba(167,139,250,.35);
}
.ai-left-panel h3{
  font-size:38px;
  line-height:.9;
}

.ai-vertical{
  margin-top:80px;
  writing-mode:vertical-rl;
  font-size:45px;
  font-weight:900;
  color:#ddd;
}

.ai-title{
  display:flex;
  justify-content:space-between;
  font-size:40px;
  font-weight:900;
}

.ai-title b{
  font-size:18px;
  color:#fff;
}

.ai-grid{
    display:grid;
    grid-template-columns: 0.75fr 1fr 1fr;
    grid-template-rows: repeat(0.1, 340px);
    gap:28px;
    position:relative;
}
.ai-grid::after{
    content:"BUILDING\\A INTELLIGENT\\A FUTURES";
    white-space:pre;
    position:absolute;

    left:0;
    bottom:20px;

    font-size:72px;
    line-height:.9;
    font-weight:900;
    letter-spacing:-3px;

    opacity:.08;

    pointer-events:none;
}

.ai-vertical-box{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ai-card{
  height:180px;
  border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(circle,#171022,#05030a);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#777;
}

.ai-card strong{
  display:block;
  color:white;
  margin-top:20px;
}

.ai-bottom-text {
    margin-top: 40px;
    font-size: 110px;
    font-weight: 900;
    margin-bottom: 40px;
}
.ai-right-panel h3{
  font-size:28px;
}

.ai-box{
  margin-top:15px;
  border:1px solid rgba(255,255,255,.12);
  padding:20px;
}

.ai-box h2{
  font-size:30px;
}

.ai-right-panel {
    padding: 25px;
    border-right: 1px solid rgba(255,255,255,.12);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    height: 100%;
    box-sizing: border-box;
}

.ai-partner span{
  font-size:60px;
  color:#a78bfa;
}

.ai-partner h2{
  font-size:55px;
}

@media(max-width:900px){
 .ai-portfolio-section{
  display:block;
 }
 .ai-grid{
  grid-template-columns:1fr 1fr;
 }
 .ai-partner{
  position:relative;
  left:0;
 }
}


/* ================= AI PORTFOLIO MOTION ================= */
.ai-portfolio-section .ai-left-panel > *,
.ai-portfolio-section .ai-center-panel > *,
.ai-portfolio-section .ai-right-panel > *,
.ai-partner{
 opacity:0;
 transform:translateY(60px);
}
.ai-portfolio-section .ai-right-panel{
  overflow:hidden; /* stop any child from spilling past the column */
}

.ai-portfolio-section .ai-03a-fade,
.ai-portfolio-section .ai-03a-cycle,
.ai-portfolio-section .ai-03a-line{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.ai-portfolio-section .ai-03a-line,
.ai-portfolio-section .ai-right-panel h3{
  font-size:clamp(15px,1.55vw,21px)!important;
  line-height:1.22!important;
  white-space:normal!important;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

.ai-portfolio-section .ai-box{
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}

.ai-portfolio-section .ai-box h2{
  font-size:clamp(18px,1.7vw,24px)!important;
  line-height:1.15!important;
  word-wrap:break-word;
}

@media(max-width:1100px){
  .ai-portfolio-section .ai-03a-line,
  .ai-portfolio-section .ai-right-panel h3{
    font-size:clamp(16px,3.4vw,20px)!important;
  }
}
.ai-portfolio-section .ai-title span,
.ai-portfolio-section .ai-title b,
.ai-bottom-text span,
.ai-bottom-text b{
 display:inline-block;
 overflow:hidden;
}

.ai-portfolio-section .ai-card{
 opacity:0;
 transform:scale(.85) translateY(40px);
 filter:blur(10px);
 transition:all .8s cubic-bezier(.16,1,.3,1);
}

.ai-portfolio-section.ai-active .ai-card{
 opacity:1;
 transform:none;
 filter:blur(0);
}

.ai-portfolio-section.ai-active .ai-card:nth-child(2){transition-delay:.1s}
.ai-portfolio-section.ai-active .ai-card:nth-child(3){transition-delay:.2s}
.ai-portfolio-section.ai-active .ai-card:nth-child(4){transition-delay:.3s}
.ai-portfolio-section.ai-active .ai-card:nth-child(5){transition-delay:.4s}

@media(max-width:900px){
 .ai-portfolio-section{
   min-height:auto;
 }
 .ai-bottom-text{
   font-size:45px!important;
 }
 .ai-title{
   display:block;
 }
 .ai-right-panel h3{
   font-size:22px;
 }
 .ai-left-panel h2{
   font-size:38px;
 }
}


/* =========================================================
   PRODUCT CARD AUTO IMAGE SMOOTH CHANGE
   ========================================================= */
.ai-card.product-card{
    width:100%;
    height:340px;
    border:none;
    background:transparent;
    position:relative;
    overflow:hidden;
}
.product-card-inner{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.product-image-wrap{
    height:270px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.product-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:25px;
  transition:opacity .45s ease, transform .45s ease;
}
.product-auto-image{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:.4s ease;
}
.product-name{
    font-size:18px;
    letter-spacing:3px;
    font-weight:700;
    text-align:center;
    padding-top:15px;
}

/* Partner school logo continuous slider */
.ai-partner {
  overflow:hidden;
}

.partner-logo-track {
  width:100%;
  overflow:hidden;
  margin-top:35px;
  display:flex;
  gap:40px;
}

.partner-logo-slide {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:45px;
  animation:partnerMove 22s linear infinite;
}

.partner-logo-slide img {
  width:130px;
  height:80px;
  object-fit:contain;
  padding:12px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 35px rgba(0,0,0,.18);
}

.partner-logo-track:hover .partner-logo-slide {
  animation-play-state:paused;
}

@keyframes partnerMove {
 from {transform:translateX(0);}
 to {transform:translateX(-100%);}
}

@media(max-width:768px){
 .ai-flip-card,.ai-flip-inner{
   min-height:220px;
 }
 
}

@media(max-width:480px){
 .ai-flip-card,.ai-flip-inner{
   min-height:190px;
 }
}

.ai-card.product-card::before,
.ai-card.product-card::after{
    display:none;
}

/* ================= UPDATED AI SECTION NUMBERING + FLIP PRODUCTS ================= */
.ai-portfolio-section{
  counter-reset: aiSection;
}
.section-number{
  font-size:12px;
  letter-spacing:3px;
  color:#a78bfa;
  font-weight:700;
}
.panel-number{
  display:block;
  margin-bottom:20px;
}
.card-number{
  position:absolute;
  top:12px;
  left:14px;
  z-index:5;
}
.ai-card.ai-flip-card{
  position:relative;
  background:transparent;
  border:none;
  height:260px;
  overflow:visible;
}
.ai-flip-front,
.ai-flip-back{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(145deg,#7c3aed 0%,#a855f7 45%,#ec4899 100%);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:
    0 18px 40px rgba(124,58,237,.35),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -14px 30px rgba(0,0,0,.25);
}
.ai-flip-front img{
  opacity:1;
  transition:opacity .35s ease, transform .45s ease;
  object-fit:contain;
  padding:25px;
}
.ai-flip-back{
  border:1px solid rgba(255,255,255,.15);
}
.ai-flip-back{
  background:
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(145deg,#4338ca 0%,#7c3aed 50%,#c026d3 100%);
}
/* partner schools small circle with shadow */
.partner-logo-slide img{
  width:72px;
  height:72px;
  border-radius:50%;
  padding:10px;
  box-shadow:0 10px 35px rgba(0,0,0,.45);
}

/* product image fade in/out */
.product-auto-image{
  animation:productFadeIn .35s ease;
}
@keyframes productFadeIn{
  from{opacity:0;transform:scale(.96);}
  to{opacity:1;transform:scale(1);}
}

/* avoid centered product title overlay */
.product-card h4,
.product-back-text{
  display:none!important;
}
.ai-grid .product-card:nth-child(2){
    grid-column:2;
    grid-row:1;
}
/* Card 03 */
.ai-grid .product-card:nth-child(3){
    grid-column:3;
    grid-row:1;
}


/* Card 04 */
.ai-grid .product-card:nth-child(4){
    grid-column:2;
    grid-row:2;
}


/* Card 05 */
.ai-grid .product-card:nth-child(5){
    grid-column:3;
    grid-row:2;
}
@media(max-width:1100px){

.ai-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
}

.ai-card.product-card{
    height:320px;
}

.ai-grid::after{
    display:none;
}

}


@media(max-width:700px){

.ai-grid{
    display:block;
}

.ai-card.product-card{
    margin-bottom:30px;
}

}

/* ===== AI PORTFOLIO COMPACT FLIP UPDATE ===== */
.ai-card.product-card{height:240px!important;perspective:1200px;overflow:visible!important;}
.ai-flip-inner{height:100%;width:100%;position:relative;transform-style:preserve-3d;animation:autoFlip 7s infinite;}
.ai-flip-front,.ai-flip-back{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:20px;background:#0b0715;border:1px solid rgba(255,255,255,.12);backface-visibility:hidden;}
.ai-flip-front img,.ai-flip-back img{width:75%;height:130px;object-fit:contain;}
.ai-flip-back{transform:rotateY(180deg);}
@keyframes autoFlip{0%,35%{transform:rotateY(0)}45%,85%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.unlock-card{height:240px;width:227px;perspective:1000px;position:relative;animation:unlockFlip 8s infinite;transform-style:preserve-3d;}
.unlock-front,.unlock-back{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.25);
  font-size:28px;font-weight:900;
  backface-visibility:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.20), transparent 55%),
    linear-gradient(145deg,#7c3aed 0%,#db2777 100%);
  box-shadow:
    0 18px 40px rgba(124,58,237,.35),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -14px 30px rgba(0,0,0,.25);
}

.unlock-back{
  background:
    radial-gradient(circle at 75% 80%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(145deg,#0ea5e9 0%,#7c3aed 100%);
}
.unlock-back{transform:rotateY(180deg);}
@keyframes unlockFlip{0%,40%{transform:rotateY(0)}50%,90%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.ai-partner{height:75px!important;}
.ai-partner h2{white-space:nowrap;font-size:28px!important;}
.partner-logo-track{margin-top:5px!important;}
.partner-logo-slide img{width:55px!important;height:55px!important;padding:6px!important;}


/* UPDATED AI PORTFOLIO PRODUCT FADE CARDS */
.fade-product-card{position:relative!important;height:220px!important;overflow:hidden!important;}
.product-image-wrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.product-img{position:absolute;width:75%;height:130px;object-fit:contain;opacity:0;transform:scale(.95);transition:opacity 1.5s ease,transform 1.5s ease;}
.product-img.active{opacity:1;transform:scale(1);}
.fade-product-card .product-name{position:absolute;bottom:14px;left:0;right:0;text-align:center;}

/* =========================================================
   AI PORTFOLIO GRID — FINAL IMAGE-ONLY CARD UPDATE
   Matches the narrow YOU / IMAGINE reference panel.
   This block intentionally lives last so it overrides older
   portfolio experiments without affecting the rest of the page.
   ========================================================= */
.ai-portfolio-section .ai-grid{
  display:grid;
  grid-template-columns:minmax(120px,.62fr) repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(185px,1fr));
  gap:18px;
  align-items:stretch;
  position:relative;
}

.ai-portfolio-section .ai-grid::after{
  display:none!important;
}

.ai-portfolio-section .ai-vertical-box{
  grid-column:1;
  grid-row:1 / span 2;
  min-height:418px;
  height:100%;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(167,139,250,.18);
  background:linear-gradient(180deg,rgba(14,10,24,.98),rgba(7,5,14,.98));
}

.ai-portfolio-section .ai-vertical-number{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(27,21,43,.94);
  border:1px solid rgba(167,139,250,.14);
  font-size:9px;
  line-height:1;
  letter-spacing:1px;
  color:#d8ccff;
}

.ai-portfolio-section .ai-vertical-copy{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:18px 8px 14px;
  overflow:hidden;
}
.ai-tall-portfolio{
  font-family:'Big Shoulders Display','Teko',sans-serif;
  font-weight:900;
   font-size:clamp(96px,4.4vw,68px);
  letter-spacing:-1px;
}
.ai-portfolio-section .ai-vertical-you{
  display:block;
  margin-top:2px;
  color:#9f7cff;
  font-size:clamp(40px,4.4vw,68px);
  line-height:.92;
  font-weight:900;
  letter-spacing:-4px;
  white-space:nowrap;
}
.por{

}
.ai-portfolio-section .ai-vertical-imagine{
  display:block;
  position:absolute;
  left:50%;
  top:58%;
   font-family:'Big Shoulders Display','Teko',sans-serif;
  transform-origin:center;
  color:#f5f1fb;
  font-size:clamp(108px, 9vh, 110px); /* scales with the card's height */
  line-height:.9; font-family:'Oswald','Bebas Neue','Anton',sans-serif; /* tall/condensed style */
  font-weight:100;
  letter-spacing:-1px;
  white-space:nowrap;
}
.ai-vertical-imagine2 {
    display: block;
    position: absolute;
    left: 7%;
    /* top: 75%!important; */
    transform: translate(-50%,-50%) rotate(-90deg);
    transform-origin: center;
    color: #f5f1fb;
    font-size: clamp(92px,5.1vw,122px);
    line-height: .9;
    font-weight: 900;
    letter-spacing: -4px;
    white-space: nowrap;
    margin-top: 53px;
}

/* Every product card has exactly one inner div and no product-name layer. */
.ai-portfolio-section .ai-card.product-card,
.ai-portfolio-section .fade-product-card{
  width:100%;
  height:auto!important;
  min-height:200px;
  position:relative!important;
  overflow:hidden!important;
  perspective:none!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 42%,rgba(124,58,237,.15),transparent 62%),
    linear-gradient(145deg,#0d0916,#07050d)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

.ai-portfolio-section .product-card-inner{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:22px;
}

.ai-portfolio-section .product-card-inner .product-img{
  position:absolute;
  inset:50% auto auto 50%;
  width:82%;
  height:76%;
  padding:0!important;
  object-fit:contain;
  opacity:0;
  transform:translate(-50%,-50%) scale(.96);
  transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.16,1,.3,1);
  filter:none;
}

.ai-portfolio-section .product-card-inner .product-img.active{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.ai-portfolio-section .product-name,
.ai-portfolio-section .product-back-text,
.ai-portfolio-section .ai-flip-inner,
.ai-portfolio-section .ai-flip-front,
.ai-portfolio-section .ai-flip-back{
  display:none!important;
}

.ai-portfolio-section .card-number{
  top:11px;
  left:12px;
  z-index:6;
  font-size:9px;
  letter-spacing:1px;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(12,8,20,.72);
  border:1px solid rgba(167,139,250,.12);
}

.ai-portfolio-section .ai-grid .product-card:nth-child(2){grid-column:2;grid-row:1;}
.ai-portfolio-section .ai-grid .product-card:nth-child(3){grid-column:3;grid-row:1;}
.ai-portfolio-section .ai-grid .product-card:nth-child(4){grid-column:2;grid-row:2;}
.ai-portfolio-section .ai-grid .product-card:nth-child(5){grid-column:3;grid-row:2;}

@media(max-width:1100px){
  .ai-portfolio-section .ai-grid{
    grid-template-columns:minmax(105px,.55fr) repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(165px,1fr));
    gap:14px;
  }
  .ai-portfolio-section .ai-vertical-box{min-height:360px;}
  .ai-portfolio-section .ai-card.product-card{min-height:172px;margin-bottom:0;}
}

@media(max-width:700px){
  .ai-portfolio-section .ai-grid{
    display:grid;
    grid-template-columns:92px 1fr;
    grid-template-rows:repeat(4,minmax(150px,1fr));
    gap:12px;
  }
  .ai-portfolio-section .ai-vertical-box{
    grid-column:1;
    grid-row:1 / span 4;
    min-height:636px;
  }
  .ai-portfolio-section .ai-vertical-you{
    font-size:33px;
    letter-spacing:-2px;
  }
  .ai-portfolio-section .ai-vertical-imagine{
    font-size:52px;
    letter-spacing:-3px;
  }
  .ai-portfolio-section .ai-grid .product-card:nth-child(2),
  .ai-portfolio-section .ai-grid .product-card:nth-child(3),
  .ai-portfolio-section .ai-grid .product-card:nth-child(4),
  .ai-portfolio-section .ai-grid .product-card:nth-child(5){
    grid-column:2;
    min-height:150px;
    margin-bottom:0;
  }
  .ai-portfolio-section .ai-grid .product-card:nth-child(2){grid-row:1;}
  .ai-portfolio-section .ai-grid .product-card:nth-child(3){grid-row:2;}
  .ai-portfolio-section .ai-grid .product-card:nth-child(4){grid-row:3;}
  .ai-portfolio-section .ai-grid .product-card:nth-child(5){grid-row:4;}
}

/* ===== AI PORTFOLIO — CENTER TEXT PANEL (replaces the 4 product cards) ===== */
.ai-portfolio-section .ai-center-textblock{
  grid-column:2 / span 2;
  grid-row:1 / span 2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:14px;
  position:relative;
  padding:32px 30px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:
    radial-gradient(circle at 30% 20%,rgba(124,58,237,.16),transparent 60%),
    linear-gradient(145deg,#0d0916,#07050d);
  overflow:hidden;
}

.ai-portfolio-section .ai-textblock-number{
  margin-bottom:6px;
}

/* Continuous drop -> fade in -> hold -> fade out -> reset loop */
.ai-portfolio-section .ai-textblock-drop{
  opacity:0;
  transform:translateY(-38px);
  animation:aiTextDropFade 4.2s cubic-bezier(.22,1,.36,1) infinite;
  will-change:opacity,transform;
}

.ai-portfolio-section .ai-textblock-drop[data-drop-index="0"]{ animation-delay:0s; }
.ai-portfolio-section .ai-textblock-drop[data-drop-index="1"]{ animation-delay:.22s; }
.ai-portfolio-section .ai-textblock-drop[data-drop-index="2"]{ animation-delay:.44s; }
.ai-portfolio-section .ai-textblock-drop[data-drop-index="3"]{ animation-delay:.66s; }

.ai-portfolio-section h3.ai-textblock-drop{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,2.6vw,2.6rem);
  font-weight:900;
  line-height:1.08;
  color:#fff;
  margin:8px 0;
}

.ai-portfolio-section p.ai-textblock-drop{
  font-size:14px;
  letter-spacing:2px;
 
  color:#a78bfa;
  margin:0;
}

.ai-portfolio-section .ai-textblock-sub{
  font-family:'Raleway',sans-serif;
  text-transform:none;
  letter-spacing:0;
  font-size:15px;
  font-weight:300;
  line-height:1.7;
  color:rgba(255,255,255,.62);
  max-width:480px;
}

@keyframes aiTextDropFade{
  0%   { opacity:0; transform:translateY(-38px); }
  12%  { opacity:1; transform:translateY(0); }
  55%  { opacity:1; transform:translateY(0); }
  78%  { opacity:0; transform:translateY(14px); }
  100% { opacity:0; transform:translateY(-38px); }
}

@media (prefers-reduced-motion:reduce){
  .ai-portfolio-section .ai-textblock-drop{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

@media(max-width:1100px){
  .ai-portfolio-section .ai-center-textblock{ grid-column:2 / span 2; grid-row:1 / span 2; }
}
@media(max-width:700px){
  .ai-portfolio-section .ai-center-textblock{ grid-column:2; grid-row:1 / span 4; padding:24px 20px; }
}
/* ===== 03A — fade in smoothly from the right ===== */
.ai-portfolio-section .ai-03a-fade{
  opacity:0;

  transition:
    opacity 1.05s cubic-bezier(.22,1,.36,1),
    transform 1.05s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}

.ai-portfolio-section.ai-active .ai-03a-fade{
  opacity:1;
  transform:translateX(0);
}
.ai-portfolio-section .ai-03a-line{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 1s ease, transform 1s ease;
  pointer-events:none;
}
.ai-portfolio-section .ai-03a-cycle{
  position:relative;
  min-height:2.4em;
}
.ai-portfolio-section .ai-03a-line.is-active{
  position:relative;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
@media (prefers-reduced-motion:reduce){
  .ai-portfolio-section .ai-03a-fade{
    transition:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .ai-portfolio-section .ai-03a-line{
    transition:none!important;
  }
}

/* ===== WE BUILD — image beside the text ===== */
.ai-portfolio-section .ai-bottom-text{
  display:flex;
  align-items:center;
  justify-content:center ;
  gap:24px;
  flex-wrap:wrap;
}

/* .ai-portfolio-section .ai-webuild-img {
    width: 297px;
    height: 184px;
    object-fit: cover;
    border-radius: 14px;
    border: none;
    background: none;
    padding: 0;
    opacity: 0;
    transform: translateX(40px) scale(.96);
    transition: opacity 1.05s cubic-bezier(.22,1,.36,1) .15s,
    transform 1.05s cubic-bezier(.22,1,.36,1) .15s;
}

.ai-portfolio-section.ai-active .ai-webuild-img{
  opacity:1;
  transform:translateX(0) scale(1);
} */

@media(max-width:700px){
  .ai-portfolio-section .ai-bottom-text{
    justify-content:center;
    flex-direction:column;
    gap:16px;
  }
  .ai-portfolio-section .ai-webuild-img{
    width:180px;
    height:85px;
  }
}
/* =========================================================
   "PRECISION. POWER. PURPOSE." — CUMULATIVE BUILD-UP FADE
   Word 1 appears and stays, then word 2 joins it, then word 3
   joins both. All three hold together, then fade out as one,
   and the cycle repeats.
   ========================================================= */
.ai-title b .ppp-word{
  display:inline-block;
  opacity:0;
  color:#a78bfa;
  animation-duration:7s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-fill-mode:both;
}

.ai-title b .ppp-word--1{ animation-name:pppWord1; }
.ai-title b .ppp-word--2{ animation-name:pppWord2; }
.ai-title b .ppp-word--3{ animation-name:pppWord3; }

/* Word 1: appears first, stays until the shared fade-out */
@keyframes pppWord1{
  0%,4%   { opacity:0; transform:translateY(8px); }
  10%     { opacity:1; transform:translateY(0); }
  80%     { opacity:1; transform:translateY(0); }
  90%,100%{ opacity:0; transform:translateY(-6px); }
}

/* Word 2: joins after word 1, stays alongside it */
@keyframes pppWord2{
  0%,18%  { opacity:0; transform:translateY(8px); }
  26%     { opacity:1; transform:translateY(0); }
  80%     { opacity:1; transform:translateY(0); }
  90%,100%{ opacity:0; transform:translateY(-6px); }
}

/* Word 3: joins last, then all three fade out together */
@keyframes pppWord3{
  0%,34%  { opacity:0; transform:translateY(8px); }
  42%     { opacity:1; transform:translateY(0); }
  80%     { opacity:1; transform:translateY(0); }
  90%,100%{ opacity:0; transform:translateY(-6px); }
}

@media (prefers-reduced-motion:reduce){
  .ai-title b .ppp-word{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}
/* ===== READY TO MOVE CTA ===== */
.ai-ready-cta{
  position:absolute;
  bottom:130px;
  left:50%;
  transform:translateX(-50%) translateY(24px);
  z-index:10;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;

  cursor:pointer;
  user-select:none;

  opacity:0;
  pointer-events:none;
  transition:opacity .9s cubic-bezier(.22,1,.36,1),
             transform .9s cubic-bezier(.22,1,.36,1);
}

.ai-ready-cta.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}

.ai-ready-text{
  font-family:'Raleway',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
  transition:color .3s ease;
}

.ai-ready-cta:hover .ai-ready-text{
  color:#fff;
}

.ai-ready-arrow{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(167,139,250,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#a78bfa;
  animation:aiReadyBounce 1.8s ease-in-out infinite;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}

.ai-ready-arrow svg{
  width:18px;
  height:18px;
}

.ai-ready-cta:hover .ai-ready-arrow{
  background:rgba(167,139,250,.14);
  border-color:rgba(167,139,250,.75);
  color:#fff;
}

@keyframes aiReadyBounce{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(6px); }
}

/* Whole-section fade-out on click, before auto-scroll */
.ai-portfolio-section.ai-section-leaving{
  opacity:0;
  transform:translateY(-24px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),
             transform .75s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}

@media(max-width:900px){
  .ai-ready-cta{
    bottom:24px;
  }
}

@media (prefers-reduced-motion:reduce){
  .ai-ready-arrow{ animation:none!important; }
}
/* ===== CUSTOM SOLUTIONS — LETTERS SCATTER IN FROM DIFFERENT ANGLES ===== */
.ai-box--custom-scatter .ai-scatter-text{
  display:flex;
  flex-wrap:wrap;
}

.ai-scatter-letter{
  display:inline-block;
  opacity:0;
  transform:
    translate(var(--sx,0px), var(--sy,0px))
    rotate(var(--sr,0deg))
    scale(var(--ss,.4));
  animation: aiScatterLetterIn 1.1s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--sd,0s);
  will-change: opacity, transform;
}

/* preserve spaces */
.ai-scatter-letter--space{
  width:.32em;
}

@keyframes aiScatterLetterIn{
  0%{
    opacity:0;
    transform:
      translate(var(--sx), var(--sy))
      rotate(var(--sr))
      scale(var(--ss));
  }
  60%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:translate(0,0) rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion:reduce){
  .ai-scatter-letter{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}
/* ===== AI AUTOMATION / NEXT-GEN SOLUTIONS — INFINITE AUTOTYPE ===== */
.ai-type-heading{
  display:block;
  min-height:2.1em; /* prevents layout jump while typing/erasing */
}

.ai-type-line{
  display:inline-block;
  white-space:pre;
}

.ai-type-cursor{
  display:inline-block;
  margin-left:2px;
  color:#a78bfa;
  animation: aiTypeCursorBlink .85s step-end infinite;
}

@keyframes aiTypeCursorBlink{
  0%,100%{ opacity:1; }
  50%{ opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .ai-type-cursor{ animation:none!important; opacity:1!important; }
}
/* =========================================================
   AI PORTFOLIO — LEFT PANEL WORD-ART FILLER
   Vertical rotated word + stacked oversized horizontal words.
   Pushed to bottom of the flex column to fill empty space.
   Continuous fade-cycle animation, matching the section's
   existing .ai-textblock-drop / .ppp-word loop style.
   ========================================================= */
.ai-portfolio-section .ai-wordart {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: flex-end;
  gap: 18px;
  min-height: 150px;
  overflow: hidden;
}

/* ── Vertical rotated word (reads bottom-to-top) ── */
.ai-portfolio-section .ai-wordart__vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Oswald', 'Bebas Neue', 'Anton', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: 6px;
  line-height: 1;
  color: #a78bfa;
  text-shadow: 0 0 18px rgba(167,139,250,.28);
  flex-shrink: 0;
  opacity: .35;
  animation: aiWordartVerticalPulse 4.4s ease-in-out infinite;
}

/* ── Stacked oversized horizontal words ── */
.ai-portfolio-section .ai-wordart__horizontal {
  display: flex;
  flex-direction: column;
  line-height: .88;
}

.ai-portfolio-section .ai-wordart__line {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -1px;
  color: #f5f1fb;
  opacity: 0;
  transform: translateY(18px);
  animation: aiWordartLineFade 4.4s cubic-bezier(.22,1,.36,1) infinite;
}

.ai-portfolio-section .ai-wordart__line--1 {
  animation-delay: 0s;
}

.ai-portfolio-section .ai-wordart__line--2 {
  color: #a78bfa;
  animation-delay: .35s;
}

@keyframes aiWordartVerticalPulse {
  0%, 100% { opacity: .30; text-shadow: 0 0 12px rgba(167,139,250,.18); }
  50%      { opacity: .85; text-shadow: 0 0 22px rgba(167,139,250,.42); }
}

@keyframes aiWordartLineFade {
  0%   { opacity: 0;   transform: translateY(18px); }
  14%  { opacity: 1;   transform: translateY(0); }
  70%  { opacity: 1;   transform: translateY(0); }
  90%  { opacity: 0;   transform: translateY(-10px); }
  100% { opacity: 0;   transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-portfolio-section .ai-wordart__vertical,
  .ai-portfolio-section .ai-wordart__line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .ai-portfolio-section .ai-wordart {
    margin-top: 24px;
    padding-top: 20px;
    min-height: auto;
    gap: 12px;
  }
  .ai-portfolio-section .ai-wordart__vertical {
    font-size: 22px;
    letter-spacing: 4px;
  }
  .ai-portfolio-section .ai-wordart__line {
    font-size: clamp(24px, 8vw, 34px);
  }
}
/* =========================================================
   AI PORTFOLIO SECTION — SIMPLE STICKY HOLD + FADE-OUT
   ---------------------------------------------------------
   No scroll-jacking, no panel dimming, no step animation.
   The section just stays pinned in view for 3 scroll-lengths
   (giving the user time to read), then fades out as a whole
   so the next section appears directly after.
   Nothing inside .ai-portfolio-section is modified.
   ========================================================= */
.ai-portfolio-track {
  position: relative;
  height: 300vh; /* holds the section in view for reading time */
  background: #05030a;
}

.ai-portfolio-track .ai-portfolio-section {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1);
}

.ai-portfolio-section.ai-scroll-leaving {
  opacity: 0;
  transform: translateY(-32px);
  pointer-events: none;
}

@media (max-width: 900px) {
  .ai-portfolio-track { height: auto; }
  .ai-portfolio-track .ai-portfolio-section {
    position: relative;
    height: auto;
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-portfolio-track .ai-portfolio-section {
    transition: none !important;
  }
}



/*//============================//*/

/*#crCopy .cr-motion-word {
    display: inline-block;
    position: relative;
}

#crCopy .cr-word-motion {
    display: inline-block;
    position: relative;
}

#crCopy .cr-word-placeholder {
    display: none !important;
}*/