.scroll-video-demo { 
    &{--ink:#f4f1e9;--muted:#a9b3c7;--accent:#7da8ff;--lime:#c9f24a;--night:#0e1626;--line:#f4f1e92e}
    *{box-sizing:border-box}
    &{margin:0;background:var(--night);color:var(--ink);font-family:Arial,sans-serif}
    a{color:inherit}

    
    .scrolly{position:relative;height:340svh}
    .stage{position:sticky;top:0;height:100svh;min-height:560px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6vw;padding:0 7vw;overflow:clip}

    .frame{position:relative;height:86svh;aspect-ratio:9/16;border-radius:28px;overflow:clip;background:#1b2436;box-shadow:0 40px 80px -40px #000c}
    .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

    .demo-brand{position:absolute;z-index:2;top:0;left:0;width:100%;padding:32px 7vw;display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
    .demo-brand strong{color:var(--ink);letter-spacing:3px}

    
    .steps{display:grid}
    .step{grid-area:1/1;opacity:0;translate:0 24px;transition:opacity .6s ease,translate .6s ease;pointer-events:none}
    .step.is-active{opacity:1;translate:none;pointer-events:auto}
    .eyebrow{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--lime)}
    h1,h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(44px,5.6vw,96px);line-height:.98;letter-spacing:-2px;margin:22px 0}
    h1 em,h2 em{color:var(--accent);font-style:italic}
    p{max-width:420px;font-size:17px;line-height:1.65;color:var(--muted);margin:0}
    .cta{display:inline-block;margin-top:28px;padding:16px 26px;border-radius:99px;background:var(--lime);color:var(--night);font-weight:700;text-decoration:none}
    .cta:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

    .progress{position:absolute;z-index:2;left:7vw;right:7vw;bottom:30px;height:2px;background:var(--line)}
    .progress span{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);background:var(--lime)}
    
    .hint{position:absolute;z-index:2;left:50%;bottom:52px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);transition:opacity .4s}
    .scrolly[data-started] .hint{opacity:0}
    .mouse{position:relative;width:26px;height:40px;border:2px solid var(--ink);border-radius:14px}
    .mouse::before{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--lime);animation:wheel 1.8s ease-in-out infinite}
    .arrow{display:none;width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);rotate:45deg;animation:nudge 1.8s ease-in-out infinite}
    @keyframes wheel{0%{opacity:0;translate:0 0}25%{opacity:1}75%,100%{opacity:0;translate:0 12px}}
    @keyframes nudge{0%,100%{translate:0 -4px}50%{translate:0 4px}}
    @media (hover:none){.mouse{display:none}.arrow{display:block}}
    .video-status{position:absolute;z-index:2;right:7vw;bottom:46px;font-size:12px;color:var(--muted)}

    
    .chapter{height:230svh}
    .chapter.flip .stage{grid-template-columns:auto minmax(0,1fr)}
    .chapter.flip .frame{order:-1}
    .copy{opacity:clamp(0,calc(var(--p,0) * 5),1);translate:0 calc((1 - min(var(--p,0) * 5,1)) * 40px)}
    .copy .num{display:block;margin-bottom:18px;font-family:Georgia,serif;font-size:20px;color:var(--muted)}

    .after{min-height:70svh;display:grid;place-items:center;padding:10vh 7vw;text-align:center;color:var(--muted)}

    
    @media (max-width:800px){
      .stage{display:block;padding:0}
      .frame{position:absolute;inset:0;height:auto;aspect-ratio:auto;border-radius:0}
      .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0e1626f2 0%,#0e1626aa 32%,#0e162600 58%),linear-gradient(180deg,#0e1626b3 0%,#0e162600 16%)}
      .demo-brand{padding:22px 6vw}
      :is(.steps,.copy){position:absolute;z-index:2;left:6vw;right:6vw;bottom:84px}
      h1,h2{font-size:44px;margin:14px 0}
      p{font-size:15px}
      .progress{left:6vw;right:6vw;bottom:24px}
      .hint{bottom:34px;flex-direction:row;gap:10px}
      .video-status{bottom:38px;right:6vw}
    }

    @media (prefers-reduced-motion:reduce){
      .step{transition:none}
      .mouse::before,.arrow{animation:none}
    }
   }
.scroll-video-demo { width:100vw; max-width:none!important; margin-inline:calc(50% - 50vw)!important; }
.scroll-video-demo .stage { min-height:0; }
.scroll-video-demo :is(h1,h2) { color:var(--ink); }
.scroll-video-demo .step[aria-hidden="true"] { visibility:hidden; }
.scroll-video-demo:not([data-ready]) .scrolly,
.scroll-video-demo.is-reduced .scrolly { height:auto; }
.scroll-video-demo:not([data-ready]) .stage,
.scroll-video-demo.is-reduced .stage { position:relative; height:auto; min-height:100svh; padding-block:5rem; }
.scroll-video-demo:not([data-ready]) .steps,
.scroll-video-demo.is-reduced .steps { display:block; }
.scroll-video-demo:not([data-ready]) .step,
.scroll-video-demo.is-reduced .step { opacity:1; translate:none; visibility:visible; pointer-events:auto; margin-block:2rem; }
.scroll-video-demo:not([data-ready]) .copy,
.scroll-video-demo.is-reduced .copy { opacity:1; translate:none; }
.scroll-video-demo:not([data-ready]) :is(.hint,.progress,.video-status),
.scroll-video-demo.is-reduced :is(.hint,.progress,.video-status) { display:none; }
@media(max-width:800px){
  .scroll-video-demo:not([data-ready]) :is(.steps,.copy),
  .scroll-video-demo.is-reduced :is(.steps,.copy) { position:relative; inset:auto; padding:2rem 6vw; }
  .scroll-video-demo:not([data-ready]) .frame,
  .scroll-video-demo.is-reduced .frame { position:relative; height:70svh; }
}
body:has(.scroll-video-demo) .wp-site-blocks { padding-block:0; }
body:has(.scroll-video-demo) .wp-block-post-title { display:none; }
body:has(.scroll-video-demo) .wp-block-post-content { margin-block:0; }
body:has(.scroll-video-demo) .wp-site-blocks > :is(header,footer) { display:none; }
.scroll-video-demo .scrolly { height:260svh; }
.scroll-video-demo .scrolly.chapter { height:200svh; }
.scroll-video-demo.is-reduced .scrolly { height:auto; }
.scroll-video-demo:not([data-ready]) .scrolly { height:auto; }
.scroll-video-demo .wp-block-group { margin-block-start:0; }
.scroll-video-demo .wp-block-video { margin:0; width:100%; height:100%; }
.scroll-video-demo .demo-brand p { font-size:12px; line-height:1.4; letter-spacing:2px; margin:0; }
.scroll-video-demo .progress .progress-bar { position:absolute; inset:0; background:var(--lime); transform:scaleX(var(--p,0)); transform-origin:left; }
.scroll-video-demo .wp-block-button__link { background:var(--lime); color:var(--night); border-radius:99px; font-size:17px; font-weight:700; padding:16px 26px; text-decoration:none; }
.scroll-video-demo .wp-block-buttons { margin-top:28px; }
.scroll-video-demo .video-status { position:absolute; z-index:2; right:7vw; bottom:46px; font-size:12px; }
.scroll-video-demo .hint { white-space:nowrap; }
@media(max-width:800px){.scroll-video-demo .video-status { bottom:38px; right:6vw; }}
.editor-styles-wrapper .scroll-video-demo { width:100%!important; margin-inline:0!important; }
.editor-styles-wrapper .scroll-video-demo .scrolly { height:auto!important; }
.editor-styles-wrapper .scroll-video-demo .stage { position:relative; height:auto; min-height:0; padding:5rem 4vw; }
.editor-styles-wrapper .scroll-video-demo .steps { display:block; }
.editor-styles-wrapper .scroll-video-demo .step { opacity:1; translate:none; visibility:visible; pointer-events:auto; margin-block:2rem; }
.editor-styles-wrapper .scroll-video-demo .copy { opacity:1; translate:none; }
.editor-styles-wrapper .scroll-video-demo .frame { height:600px; max-height:80svh; }
.editor-styles-wrapper .scroll-video-demo :is(.hint,.progress,.video-status) { display:none; }

.portrait-business { --accent:#8da9ff; --lime:#d1f264; --night:#111827; --ink:#f4f1e9; background:var(--night)!important; }
.portrait-business .stage { gap:7vw; padding-inline:7vw; }
.portrait-business .portrait-hero .frame { height:79svh; border-radius:3px 80px 3px 3px; box-shadow:none; }
.portrait-business .portrait-service .frame { height:79svh; border-radius:3px 3px 70px 3px; box-shadow:none; }
.portrait-business .portrait-service.flip .frame { border-radius:70px 3px 3px 3px; }
.portrait-business .demo-brand { padding-top:35px; align-items:center; }
.portrait-business .portrait-wordmark { font-size:14px; letter-spacing:3px; }
.portrait-business .portrait-nav { display:flex; gap:30px; letter-spacing:0; text-transform:none; }
.portrait-business .portrait-nav a { text-decoration:none; transition:color .2s; }
.portrait-business a:hover { color:var(--lime); }
.portrait-business a:focus-visible { outline:2px solid var(--lime); outline-offset:5px; }
.portrait-business .eyebrow { font-size:11px; letter-spacing:2.5px; margin-bottom:22px; }
.portrait-business h1,.portrait-business h2 { font-size:clamp(54px,6.4vw,100px); letter-spacing:-3px; line-height:1.02; margin:0 0 26px; }
.portrait-business .portrait-lead { max-width:470px; font-size:17px; line-height:1.7; }
.portrait-business .wp-block-buttons { margin-top:32px; }
.portrait-business .wp-block-button__link { border-radius:0; corner-shape:bevel; padding:17px 23px; font-size:13px; letter-spacing:.2px; }
.portrait-business .portrait-primary .wp-block-button__link { border-radius:0 15px 0 0; color:var(--night); }
.portrait-business .portrait-secondary .wp-block-button__link { background:transparent; border:1px solid #f4f1e950; color:var(--ink); }
.portrait-business .portrait-secondary .wp-block-button__link:hover { border-color:var(--lime); color:var(--lime); }
.portrait-business .portrait-side-note { position:absolute; right:26px; top:50%; writing-mode:vertical-rl; font-size:10px; letter-spacing:3px; opacity:.55; }
.portrait-business .progress { bottom:24px; }
.portrait-business .hint { left:7vw; translate:none; bottom:48px; font-size:10px; letter-spacing:1px; }
.portrait-business .num { font-size:14px; letter-spacing:2px; border-top:1px solid var(--lime); padding-top:14px; width:40px; color:var(--lime); }
.portrait-business .portrait-tags { border-top:1px solid #f4f1e92e; padding-top:20px; margin-top:28px; font-size:11px; color:var(--accent); letter-spacing:.6px; }
.portrait-business .portrait-section { padding:110px 7vw; }
.portrait-business .portrait-intro { border-top:1px solid #f4f1e91e; background:linear-gradient(135deg,#1a2438,var(--night) 60%); }
.portrait-business .portrait-intro-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:8vw; align-items:start; }
.portrait-business .portrait-intro h2,.portrait-business .portrait-process h2 { font-size:clamp(42px,4.6vw,68px); }
.portrait-business .portrait-intro-copy p { max-width:520px; margin:0 0 22px; }
.portrait-business strong { color:var(--ink); }
.portrait-business .portrait-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:60px!important; }
.portrait-business .portrait-principle { border-top:1px solid #f4f1e930; padding-top:22px; }
.portrait-business .portrait-small-index { color:var(--lime); font-size:11px; letter-spacing:2px; margin-bottom:18px; }
.portrait-business h3 { color:var(--ink); font-family:Arial,sans-serif; font-size:22px; font-weight:500; margin:0 0 14px; letter-spacing:-.5px; }
.portrait-business .portrait-principle p:last-child { font-size:14px; }
.portrait-business .portrait-ribbon { margin:0!important; padding:24px 7vw; background:var(--lime); transform:skewY(-1deg); position:relative; z-index:2; }
.portrait-business .portrait-ribbon p { max-width:none; font-family:Georgia,serif; font-style:italic; font-size:clamp(20px,2.4vw,34px); text-align:center; color:var(--night); }
.portrait-business .portrait-process { background:#192235; border-block:1px solid #f4f1e91e; }
.portrait-business .portrait-process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:55px!important; }
.portrait-business .portrait-process-step { border-top:1px solid #f4f1e92e; padding-top:22px; }
.portrait-business .portrait-process-step p:last-child { font-size:14px; }
.portrait-business .portrait-contact { padding-top:130px; padding-bottom:32px; background:radial-gradient(ellipse at 80% 30%,#26395380,transparent 55%); }
.portrait-business .portrait-contact h2 { font-size:clamp(48px,6.4vw,92px); }
.portrait-business .portrait-contact .portrait-primary .wp-block-button__link { margin-top:12px; }
.portrait-business .portrait-footer { display:flex; justify-content:space-between; gap:24px; margin-top:100px!important; padding-top:25px; border-top:1px solid #f4f1e92e; }
.portrait-business .portrait-footer p { font-size:11px; letter-spacing:.7px; }
.portrait-business .portrait-footer a { text-decoration:none; }
@media(max-width:800px){
 .portrait-business .stage { padding:0; }
 .portrait-business .portrait-hero .frame,.portrait-business .portrait-service .frame { height:auto; border-radius:0; }
 .portrait-business .demo-brand { padding:25px 6vw; }
 .portrait-business .portrait-wordmark { font-size:11px!important; }
 .portrait-business .portrait-nav { gap:12px; }
 .portrait-business .portrait-nav a { font-size:10px; }
 .portrait-business .portrait-nav a:first-child { display:none; }
 .portrait-business h1,.portrait-business h2 { font-size:clamp(44px,11.5vw,66px); letter-spacing:-1.8px; margin-bottom:18px; }
 .portrait-business .eyebrow { font-size:9px; letter-spacing:1.8px; margin-bottom:15px; }
 .portrait-business .portrait-lead { font-size:14px; line-height:1.6; }
 .portrait-business .wp-block-buttons { margin-top:20px; }
 .portrait-business .portrait-side-note { display:none; }
 .portrait-business .hint { left:6vw; bottom:38px; }
 .portrait-business .portrait-tags { margin-top:18px; padding-top:12px; font-size:10px; }
 .portrait-business .portrait-section { padding:75px 6vw; }
 .portrait-business .portrait-intro-grid { grid-template-columns:1fr; gap:18px; }
 .portrait-business .portrait-principles { grid-template-columns:1fr; gap:25px; margin-top:35px!important; }
 .portrait-business .portrait-process-grid { grid-template-columns:1fr 1fr; gap:28px 20px; margin-top:35px!important; }
 .portrait-business h3 { font-size:20px; }
 .portrait-business .portrait-contact h2 { font-size:43px; }
 .portrait-business .portrait-footer { flex-wrap:wrap; margin-top:65px!important; gap:15px; }
 .portrait-business .portrait-footer p { font-size:10px; }
}
@media(prefers-reduced-motion:reduce){ .portrait-business .portrait-ribbon { transform:none; } }
.editor-styles-wrapper .portrait-business .portrait-side-note { display:none; }
.editor-styles-wrapper .portrait-business .portrait-ribbon { transform:none; }
.editor-styles-wrapper .portrait-business .portrait-intro h2,.editor-styles-wrapper .portrait-business .portrait-process h2,.editor-styles-wrapper .portrait-business .portrait-contact h2 { animation:none; opacity:1; translate:none; }