:root{--bg:#070807;--paper:#f2f0e9;--muted:#a5aaa4;--line:rgba(242,240,233,.14);--gold:#d6ad39;--header:78px}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--paper);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}a{color:inherit}button{font:inherit}.topbar{position:fixed;z-index:100;inset:0 0 auto;height:var(--header);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5vw;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(5,6,5,.94),rgba(5,6,5,.63));backdrop-filter:blur(12px)}.brand{width:145px;display:flex}.brand img{width:100%;height:auto;display:block}.topnav{display:flex;gap:38px}.topnav a,.book{text-decoration:none;text-transform:uppercase;font-size:10px;letter-spacing:.18em}.topnav a{color:#c9cbc7}.book{justify-self:end;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:14px 19px}.book span{margin-left:14px}.experience{position:relative;height:860vh;background:#070807}.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#070807;isolation:isolate}.media-window{position:absolute;z-index:2;inset:0;overflow:hidden;background:#060706;transform-origin:top left;will-change:transform,border-radius;box-shadow:0 30px 100px rgba(0,0,0,0);border:1px solid rgba(255,255,255,0)}.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;will-change:opacity}.film.active{opacity:1}.film-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.54),rgba(0,0,0,.09) 48%,rgba(0,0,0,.12)),linear-gradient(0deg,rgba(0,0,0,.4),transparent 42%);pointer-events:none;will-change:opacity}.film-edge{position:absolute;inset:0;box-shadow:inset 0 0 110px rgba(0,0,0,.38);pointer-events:none}.film-meta{position:absolute;left:4vw;right:4vw;bottom:30px;display:flex;justify-content:space-between;text-transform:uppercase;font-size:9px;letter-spacing:.19em;color:rgba(255,255,255,.7)}.eyebrow{margin:0 0 18px;color:var(--gold);text-transform:uppercase;font-size:10px;letter-spacing:.2em}.studio-copy{position:absolute;z-index:10;left:5vw;bottom:11vh;width:min(740px,55vw);will-change:opacity,transform;pointer-events:none}.studio-copy h1,.services-intro h2,.service-panel h3,.section-heading h2{margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.055em}.studio-copy h1{font-size:clamp(56px,6.2vw,106px);line-height:.9}.studio-copy em,.services-intro em,.section-heading em{font-weight:400;color:var(--gold)}.studio-features{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:18px;margin-top:36px}.studio-features span{border-top:1px solid rgba(255,255,255,.3);padding-top:11px;text-transform:uppercase;font-size:9px;letter-spacing:.12em;color:rgba(255,255,255,.76)}.services-copy{position:absolute;z-index:12;left:5vw;top:14vh;width:31vw;height:72vh;opacity:0;pointer-events:none;will-change:opacity,transform}.services-intro{position:absolute;inset:0;opacity:0;transform:translateY(18px)}.services-intro h2{font-size:clamp(50px,5vw,86px);line-height:.9}.packages{display:inline-flex;margin-top:28px;text-decoration:none;text-transform:uppercase;font-size:9px;letter-spacing:.15em;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:7px}.packages span{margin-left:12px}.service-panels{position:absolute;inset:0}.service-panel{position:absolute;inset:0;opacity:0;transform:translateY(20px);will-change:opacity,transform}.service-panel .kicker{margin:0 0 14px;text-transform:uppercase;font-size:9px;letter-spacing:.16em;color:var(--gold)}.service-panel h3{font-size:clamp(48px,4.9vw,84px);line-height:.88}.service-desc{max-width:430px;margin:22px 0 0;color:#b6b9b4;font-size:14px;line-height:1.6}.outcome{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}.outcome>div{padding:14px 0}.outcome>div:last-child{padding-left:16px}.outcome span{text-transform:uppercase;font-size:8px;letter-spacing:.16em;color:#777c76}.outcome p{margin:6px 0 0;font-size:11px;line-height:1.45;color:#d5d7d2}.outcome i{align-self:center;padding:0 12px;color:var(--gold);font-style:normal}.service-panel>a{display:inline-flex;margin-top:22px;text-decoration:none;text-transform:uppercase;font-size:9px;letter-spacing:.14em;border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:7px}.service-panel>a span{margin-left:12px}.service-rail{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;pointer-events:auto}.service-rail button{position:relative;border:0;border-top:1px solid rgba(255,255,255,.16);background:none;color:#6f746e;text-align:left;padding:12px 0 0;cursor:pointer}.service-rail button i{position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--gold)}.service-rail button b,.service-rail button span{display:block}.service-rail button b{font-size:9px;letter-spacing:.12em}.service-rail button span{margin-top:5px;font-size:9px;line-height:1.3}.service-rail button.active{color:#f2f0e9}.service-rail button.active b{color:var(--gold)}.scroll-meter{position:absolute;z-index:14;left:5vw;right:5vw;bottom:23px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;text-transform:uppercase;font-size:8px;letter-spacing:.18em;color:#8e928c}.scroll-meter i{display:block;height:1px;background:rgba(255,255,255,.14);overflow:hidden}.scroll-meter i b{display:block;width:0;height:1px;background:var(--gold)}.scroll-meter strong{font-weight:400}.all-services{padding:9vw 5vw 8vw;border-top:1px solid rgba(255,255,255,.08);background:#090a09}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:70px}.section-heading h2{font-size:clamp(48px,5vw,84px);line-height:.93}.section-heading>a{align-self:flex-end;text-decoration:none;text-transform:uppercase;font-size:9px;letter-spacing:.15em;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:7px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px}.service-grid>a{position:relative;min-height:132px;padding:26px 42px 28px 0;border-top:1px solid rgba(255,255,255,.14);text-decoration:none;transition:background .25s ease,padding-left .25s ease}.service-grid>a:hover{background:rgba(255,255,255,.025);padding-left:12px}.service-grid h3{margin:0;font-size:16px;font-weight:500}.service-grid p{margin:12px 0 0;color:#8f958f;font-size:12px;line-height:1.5}.service-grid>a>span{position:absolute;right:6px;top:27px;color:#bfc3bd}.consult{display:inline-flex;margin-top:46px;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:17px 22px;text-decoration:none;text-transform:uppercase;font-size:10px;letter-spacing:.15em}.consult span{margin-left:16px}@media(max-width:900px){:root{--header:68px}.topbar{grid-template-columns:1fr auto;padding:0 20px}.brand{width:116px}.topnav{display:none}.book{font-size:8px;padding:11px 13px}.experience{height:auto}.stage{position:relative;height:auto;min-height:100vh;overflow:visible;padding:90px 18px 56px}.media-window{position:relative;inset:auto;width:100%;height:58vh;transform:none!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.13)!important}.studio-copy,.services-copy{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:auto!important;margin-top:32px;opacity:1!important;transform:none!important}.studio-copy h1,.services-intro h2,.service-panel h3{font-size:13vw}.studio-features{grid-template-columns:1fr 1fr}.services-copy{margin-top:60px}.services-intro{position:relative;opacity:1;transform:none}.service-panels{position:relative;min-height:470px;margin-top:40px}.service-panel:first-child{opacity:1}.service-rail{position:relative;margin-top:30px;grid-template-columns:1fr 1fr}.scroll-meter{display:none}.all-services{padding:70px 20px}.section-heading{display:block}.section-heading>a{display:inline-flex;margin-top:28px}.service-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.experience{height:auto}.stage{position:relative;height:auto;min-height:100vh;padding-top:var(--header)}.media-window{position:relative;height:65vh;transform:none!important}.studio-copy,.services-copy{position:relative;left:auto;top:auto;bottom:auto;width:auto;margin:40px 5vw;opacity:1!important}.services-intro{position:relative;opacity:1}.service-panel:first-child{opacity:1!important}.scroll-meter{display:none}}

/* Review 17B — final smoothing/polish pass */
@media(min-width:901px){
  .experience{height:900vh}
  .film{transition:none;backface-visibility:hidden;transform:translateZ(0)}
  .film-service{opacity:0}
  .services-copy{width:32.5vw;top:13.5vh;height:73vh}
  .services-intro{pointer-events:none}
  .service-panel{pointer-events:none;filter:blur(3px)}
  .service-panel>a{pointer-events:auto}
  .service-panel h3{font-size:clamp(46px,4.45vw,76px);line-height:.91;letter-spacing:-.05em;max-width:31vw}
  .service-panel .kicker{margin-bottom:16px;max-width:30vw;line-height:1.45}
  .service-desc{margin-top:19px;max-width:390px}
  .outcome{margin-top:20px}
  .outcome>div{padding:12px 0}
  .service-rail{gap:16px}
  .service-rail button{transition:color .28s ease,opacity .28s ease}
  .service-rail button i{transition:width .08s linear}
  .media-window{contain:paint;transform:translateZ(0)}
  .film-shade{background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.05) 47%,rgba(0,0,0,.10)),linear-gradient(0deg,rgba(0,0,0,.34),transparent 43%)}
  .all-services{padding-top:8vw}
  .service-grid>a{overflow:hidden;isolation:isolate;transition:padding-left .35s cubic-bezier(.22,.61,.36,1),background .35s ease,border-color .35s ease}
  .service-grid>a::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:var(--gold);transition:width .42s cubic-bezier(.22,.61,.36,1);z-index:1}
  .service-grid>a::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(214,173,57,.055),transparent 60%);opacity:0;transition:opacity .35s ease;z-index:-1}
  .service-grid>a:hover{padding-left:14px;background:transparent;border-color:rgba(255,255,255,.2)}
  .service-grid>a:hover::before{width:100%}
  .service-grid>a:hover::after{opacity:1}
  .service-grid>a>span{transition:transform .35s cubic-bezier(.22,.61,.36,1),color .35s ease}
  .service-grid>a:hover>span{transform:translate3d(4px,-4px,0);color:var(--gold)}
  .service-grid h3{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
  .service-grid>a:hover h3{transform:translateX(2px)}
}

/* Review 18 — interaction logic and final service hierarchy */
@media(min-width:901px){
  .studio-features span{
    position:relative;
    opacity:calc(.42 + (var(--feature-strength,0) * .58));
    transform:translate3d(0,calc((1 - var(--feature-strength,0)) * 4px),0);
    transition:color .22s ease,opacity .22s ease,transform .22s ease,border-color .22s ease;
  }
  .studio-features span::after{
    content:"";
    position:absolute;
    left:0;right:auto;top:-1px;
    width:calc(var(--feature-strength,0) * 100%);
    height:1px;
    background:var(--gold);
    transition:width .16s linear;
  }
  .studio-features span.active{color:#fff;border-color:rgba(255,255,255,.46)}
  .studio-features span.passed{color:rgba(255,255,255,.62)}

  .service-rail a{
    position:relative;
    display:block;
    border-top:1px solid rgba(255,255,255,.16);
    color:#6f746e;
    text-align:left;
    padding:12px 0 0;
    text-decoration:none;
    min-width:0;
    transition:color .28s ease,opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1);
  }
  .service-rail a i{position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--gold);transition:width .08s linear}
  .service-rail a b,.service-rail a span,.service-rail a em{display:block}
  .service-rail a b{font-size:9px;letter-spacing:.12em}
  .service-rail a span{margin-top:5px;font-size:9px;line-height:1.3}
  .service-rail a em{margin-top:8px;font-size:7px;letter-spacing:.13em;text-transform:uppercase;font-style:normal;color:transparent;transform:translateY(3px);transition:color .28s ease,transform .28s ease}
  .service-rail a.active{color:#f2f0e9;transform:translateY(-2px)}
  .service-rail a.active b{color:var(--gold)}
  .service-rail a.active em,.service-rail a:hover em{color:#cfd2cc;transform:none}
  .service-rail a:hover{color:#fff}

  .service-grid>a{
    opacity:0;
    transform:translate3d(0,24px,0);
    transition-delay:var(--reveal-delay,0ms);
  }
  .service-grid>a.revealed{
    opacity:1;
    transform:translate3d(0,0,0);
    transition-property:opacity,transform,padding-left,background,border-color;
    transition-duration:.58s,.58s,.35s,.35s,.35s;
    transition-timing-function:cubic-bezier(.22,.61,.36,1),cubic-bezier(.22,.61,.36,1),cubic-bezier(.22,.61,.36,1),ease,ease;
  }
  .service-grid>a:hover.revealed{transform:translate3d(0,-5px,0)}

  .consult-row{
    margin-top:34px;
    min-height:190px;
    padding:34px 38px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:40px;
    border:1px solid rgba(214,173,57,.34);
    background:linear-gradient(105deg,rgba(214,173,57,.095),rgba(255,255,255,.018) 48%,rgba(255,255,255,.01));
    opacity:0;
    transform:translate3d(0,22px,0);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1),border-color .35s ease;
  }
  .consult-row.revealed{opacity:1;transform:none}
  .consult-row:hover{border-color:rgba(214,173,57,.58)}
  .consult-copy .eyebrow{margin-bottom:10px}
  .consult-copy h3{margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(30px,3vw,48px);line-height:.96;letter-spacing:-.04em}
  .consult-copy h3 em{color:var(--gold);font-weight:400}
  .consult{
    margin-top:0;
    min-width:260px;
    min-height:62px;
    align-items:center;
    justify-content:center;
    border-color:var(--gold);
    background:var(--gold);
    color:#0b0c0b;
    font-weight:700;
    transition:transform .3s cubic-bezier(.22,.61,.36,1),background .3s ease,box-shadow .3s ease;
  }
  .consult:hover{transform:translateY(-3px);background:#e4bf4c;box-shadow:0 16px 44px rgba(214,173,57,.16)}
}

@media(max-width:900px){
  .service-rail a{display:block;border-top:1px solid rgba(255,255,255,.16);padding:12px 0;text-decoration:none;color:#c9cbc7}
  .service-rail a i{display:none}.service-rail a b{display:block;color:var(--gold);font-size:9px}.service-rail a span{display:block;margin-top:4px;font-size:10px}.service-rail a em{display:none}
  .consult-row{margin-top:32px;padding:26px 0;border-top:1px solid rgba(214,173,57,.35)}
  .consult-copy h3{margin:0 0 22px;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:34px;line-height:1}
  .consult-copy h3 em{color:var(--gold);font-weight:400}
  .consult{margin-top:0;background:var(--gold);border-color:var(--gold);color:#0b0c0b}
}

/* Review 19 — final requested section behavior */
@media(min-width:901px){
  .experience{height:930vh}

  /* Studio features reveal progressively and remain readable after their moment. */
  .studio-features span{
    opacity:0;
    transform:translate3d(0,12px,0);
    color:rgba(255,255,255,.40);
    border-color:rgba(255,255,255,.16);
    transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1),color .35s ease,border-color .35s ease;
  }
  .studio-features span.visible{opacity:.62;transform:none}
  .studio-features span.active{opacity:1;color:#fff;border-color:rgba(255,255,255,.52);transform:translate3d(0,-3px,0)}
  .studio-features span.passed{opacity:.72;color:rgba(255,255,255,.72);transform:none}
  .studio-features span::after{transition:width .28s cubic-bezier(.22,.61,.36,1)}

  /* Keep service editorial copy readable and visually anchored while each film chapter changes. */
  .services-copy{top:12.5vh;height:74vh}
  .service-panel{padding-top:1vh}
  .service-panel h3{font-size:clamp(46px,4.25vw,74px);max-width:30vw}
  .service-desc{font-size:13.5px;line-height:1.55}
  .service-panel>a{font-size:9px;letter-spacing:.13em;transition:color .25s ease,border-color .25s ease,transform .25s ease}
  .service-panel>a:hover{color:var(--gold);border-color:var(--gold);transform:translateX(4px)}

  /* Rail is navigation to real service pages, never a local video control. */
  .service-rail a{cursor:pointer}
  .service-rail a.active{color:#fff}
  .service-rail a.active::after{
    content:"Open service ↗";
    position:absolute;
    right:0;
    top:12px;
    font-size:6px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
  }

  /* More services rise into place more clearly without becoming heavy. */
  .service-grid>a{transform:translate3d(0,34px,0) scale(.985);opacity:0}
  .service-grid>a.revealed{transform:translate3d(0,0,0) scale(1);opacity:1}
  .service-grid>a.revealed h3{transition:color .28s ease,transform .28s ease}
  .service-grid>a.revealed:hover h3{color:#fff;transform:translateX(4px)}

  /* Consultation belongs to the same final service section and is the strongest CTA there. */
  .consult-row{margin-top:52px;min-height:210px;border-radius:22px;overflow:hidden;position:relative}
  .consult-row::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 82% 50%,rgba(214,173,57,.14),transparent 30%);
    opacity:.7;
  }
  .consult-row>*{position:relative;z-index:1}
  .consult{min-width:290px;min-height:66px;font-size:10px;box-shadow:0 0 0 1px rgba(214,173,57,.08),0 18px 60px rgba(0,0,0,.22)}
}

/* Review 20 — three requested final fixes only */
@media(min-width:901px){
  /* Add scroll distance so the final Dry Ice frame gets a calm hold before the directory arrives. */
  .experience{height:1040vh}

  /* Hard separation between editorial copy and moving film. */
  .services-copy{
    width:29.5vw;
    overflow:hidden;
    padding-right:.5vw;
  }
  .service-panel,.service-panel .kicker,.service-panel h3,.service-desc,.outcome{max-width:100%;min-width:0}
  .service-panel h3{max-width:28.5vw;font-size:clamp(44px,4vw,70px)}
  .outcome{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .outcome>div{min-width:0}
  .outcome p{overflow-wrap:anywhere}

  /* Directory heading and cards visibly rise as the page reaches them. */
  .section-heading{opacity:0;transform:translate3d(0,42px,0);filter:blur(5px);will-change:opacity,transform,filter}
  .service-grid>a{
    opacity:0;
    transform:translate3d(0,58px,0) scale(.975);
    filter:blur(6px);
    will-change:opacity,transform,filter;
    transition:padding-left .35s cubic-bezier(.22,.61,.36,1),background .35s ease,border-color .35s ease;
  }
  .service-grid>a::before{width:calc(var(--reveal-progress,0) * 100%)}
  .service-grid>a.revealed{filter:none}
  .service-grid>a:hover{transform:translate3d(0,-5px,0) scale(1)!important}

  .consult-row{will-change:opacity,transform,filter}
}

/* Miracle Detail — Mobile Polish V9 */
@media(max-width:900px){
  .experience{height:auto!important}
  .stage{position:relative!important;height:auto!important;min-height:auto!important;overflow:visible!important;padding:40px 16px 60px!important}
  .media-window{position:relative!important;inset:auto!important;width:100%!important;height:45vh!important;transform:none!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.13)!important;margin-bottom:24px!important}
  .film{position:absolute!important;inset:0!important;opacity:1!important}
  .film:not(.active){display:none!important}
  .studio-copy,.services-copy{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;width:100%!important;height:auto!important;margin:0 0 30px!important;opacity:1!important;transform:none!important}
  .studio-copy h1{font-size:clamp(32px,8vw,48px)!important;line-height:1.05!important}
  .services-intro{position:relative!important;opacity:1!important;transform:none!important;margin-bottom:20px!important}
  .services-intro h2{font-size:clamp(30px,7.5vw,44px)!important;line-height:1.05!important}
  .service-panels{position:relative!important;min-height:auto!important;margin-top:20px!important}
  .service-panel{position:relative!important;inset:auto!important;opacity:1!important;transform:none!important;filter:none!important;margin-bottom:28px!important;padding:20px!important;background:#0d0f0d!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:12px!important}
  .service-panel h3{font-size:clamp(26px,6.5vw,38px)!important;line-height:1.1!important;max-width:none!important}
  .service-rail{display:none!important}
  .scroll-meter{display:none!important}
  .all-services{padding:40px 16px!important}
  .section-heading{display:block!important;margin-bottom:28px!important}
  .section-heading h2{font-size:clamp(28px,7vw,42px)!important;line-height:1.1!important}
  .service-grid{grid-template-columns:1fr!important;gap:12px!important}
}