/* Moxireel Web Studio — shared styles v2 */
:root{
  --paper:#F4EFE6;
  --paper-2:#ECE5D8;
  --ink:#141210;
  --ink-2:#39342C;
  --muted:#847B6C;
  --ember:#EE4B0A;
  --ember-2:#C93A05;
  --line:rgba(20,18,16,.12);
  --shadow:rgba(20,18,16,.16);
  --disp:"Hanken Grotesk",sans-serif;
  --body:"Hanken Grotesk",sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.62;letter-spacing:.002em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--ember);color:#fff}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(20px,5vw,60px)}

.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;mix-blend-mode:multiply}

/* live ambient background + layering (v3 motion pass) */
#hub-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
body>header,body>main,body>footer{position:relative;z-index:3}
.nav{z-index:80}
.mobile-menu{z-index:70}
#scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--ember),#f5904f);box-shadow:0 0 14px rgba(238,75,10,.55);transition:width .1s linear}
/* kinetic hero chars */
.hero h1 .ch,.page-hero h1 .ch{display:inline-block;will-change:transform,opacity}
/* headline gradient shimmer on the highlight word */
.hl{background:linear-gradient(100deg,var(--ember-2),var(--ember) 45%,#f59b5e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ember-2)}
/* svc row hover color wash */
.svc-row::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(238,75,10,.07),transparent 66%);opacity:0;transition:opacity .5s var(--ease)}
.svc-row:hover::before{opacity:1}
.svc-row .n{transition:color .4s var(--ease),transform .5s var(--ease)}
.svc-row:hover .n{transform:translateX(6px)}
/* floating accent dot in section index */
.sec-idx::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ember);margin-right:9px;vertical-align:middle;box-shadow:0 0 10px rgba(238,75,10,.6);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.5);opacity:1}}

.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,5vw,60px);transition:transform .5s var(--ease),background .4s,backdrop-filter .4s}
.nav.hide{transform:translateY(-120%)}
.nav.solid{background:rgba(244,239,230,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:1.35rem;letter-spacing:-.02em}
.logo svg{width:26px;height:26px;display:block}
.nav-right{display:flex;align-items:center;gap:clamp(18px,3vw,36px)}
.nav-links{display:flex;gap:clamp(16px,2.6vw,34px);font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.nav-links a{position:relative;padding:4px 0;color:var(--ink-2)}
.nav-links a.active{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--ember);transition:width .4s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{padding:11px 20px;border-radius:40px;background:var(--ink);color:var(--paper);font-size:.82rem;font-weight:600;letter-spacing:.02em;overflow:hidden;position:relative;isolation:isolate}
.nav-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ember);transform:translateY(101%);transition:transform .45s var(--ease)}
.nav-cta:hover::before{transform:translateY(0)}
.burger{display:none;width:30px;height:20px;position:relative;cursor:pointer;z-index:90}
.burger span{position:absolute;left:0;width:100%;height:2px;background:var(--ink);transition:.35s var(--ease)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:9px}.burger span:nth-child(3){top:18px}
body.menu-open .burger span{background:var(--paper)}
body.menu-open .burger span:nth-child(1){top:9px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:9px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:0 8vw;gap:6px;transform:translateY(-100%);transition:transform .6s var(--ease);pointer-events:none}
body.menu-open .mobile-menu{transform:translateY(0);pointer-events:auto}
.mobile-menu a{font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,10vw,4rem);letter-spacing:-.03em;padding:8px 0;color:var(--paper);opacity:.55;transition:opacity .3s,padding-left .4s var(--ease)}
.mobile-menu a:hover,.mobile-menu a.active{opacity:1;padding-left:14px;color:var(--ember)}
.mobile-menu .mm-foot{margin-top:6vh;font-family:var(--body);font-size:.9rem;opacity:.5;letter-spacing:.04em}
@media(max-width:860px){.nav-links,.nav-cta{display:none}.burger{display:block}}

.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:17px 32px;border-radius:44px;
  font-family:var(--body);font-weight:600;font-size:.98rem;overflow:hidden;isolation:isolate;will-change:transform;cursor:pointer;border:none}
.btn .lbl,.btn .arw{position:relative;z-index:1;transition:transform .5s var(--ease)}
.btn:hover .arw{transform:translateX(6px)}
.btn-fill{background:var(--ink);color:var(--paper)}
.btn-fill::before{content:"";position:absolute;inset:0;z-index:0;background:var(--ember);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn-fill:hover::before{transform:translateY(0)}
.btn-ghost{border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-ember{background:var(--ember);color:#fff}
.btn-ember::before{content:"";position:absolute;inset:0;z-index:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn-ember:hover::before{transform:translateY(0)}

.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.74rem;text-transform:uppercase;letter-spacing:.24em;font-weight:600;color:var(--ember-2)}
.eyebrow::before{content:"";width:34px;height:1.5px;background:var(--ember)}
.sec{padding:clamp(88px,13vh,168px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(52px,7vh,92px)}
.sec-title{font-family:var(--disp);font-weight:700;font-size:clamp(2.1rem,6vw,5.2rem);line-height:.98;letter-spacing:-.035em;max-width:17ch}
.sec-title .hl{color:var(--ember-2)}
.sec-idx{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

.line-mask{overflow:hidden;display:block}
.line-mask>span{display:block;will-change:transform}

.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:16vh;padding-bottom:8vh;position:relative}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.9rem,9vw,9.5rem);line-height:.9;letter-spacing:-.045em;max-width:16ch}
.hero h1 .hl{color:var(--ember-2)}
.hero-sub{max-width:46ch;margin-top:2.4rem;font-size:clamp(1.02rem,1.5vw,1.3rem);color:var(--ink-2)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:2.8rem}
.hero-scroll{position:absolute;left:clamp(20px,5vw,60px);bottom:5vh;display:flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero-scroll .bar{width:44px;height:1.5px;background:var(--muted);position:relative;overflow:hidden}
.hero-scroll .bar::after{content:"";position:absolute;inset:0;background:var(--ember);transform:translateX(-100%);animation:scrollbar 2.2s var(--ease) infinite}
@keyframes scrollbar{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}

.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;white-space:nowrap;background:var(--paper-2)}
.marquee-row{display:inline-flex;gap:40px;font-family:var(--disp);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;align-items:center;will-change:transform}
.marquee-row .star{color:var(--ember);font-size:.9rem}

.svc-list{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:90px 1fr 1.3fr;gap:2rem;padding:clamp(28px,4vh,50px) 0;border-bottom:1px solid var(--line);align-items:baseline;position:relative}
.svc-row .n{font-family:var(--disp);font-weight:700;color:var(--ember-2);font-size:1.05rem}
.svc-row h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:-.02em;line-height:1;transition:transform .5s var(--ease)}
.svc-row p{color:var(--ink-2);max-width:44ch}
.svc-row:hover h3{transform:translateX(14px)}
@media(max-width:820px){.svc-row{grid-template-columns:1fr;gap:.6rem}.svc-row .n{font-size:.9rem}}

.work-grid{display:flex;flex-direction:column;gap:clamp(40px,7vh,90px)}
.work-card{position:relative;border-radius:20px;overflow:hidden;min-height:78vh;display:flex;align-items:flex-end;color:#fff;padding:clamp(24px,4vw,48px)}
.work-card canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;will-change:transform}
.work-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,6,4,.04),rgba(8,6,4,.7))}
.work-card .wc{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;width:100%;flex-wrap:wrap;gap:1.4rem}
.work-card .tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;opacity:.85;margin-bottom:.8rem}
.work-card h3{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,5vw,4rem);line-height:.98;letter-spacing:-.03em}
.work-card .go{font-size:.9rem;display:inline-flex;gap:9px;align-items:center;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:5px}
@media(max-width:820px){.work-card{min-height:66vh}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:clamp(30px,5vh,54px) 20px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .num{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,5.5vw,4.4rem);letter-spacing:-.03em;line-height:1}
.stat .num .u{color:var(--ember-2);font-size:.5em}
.stat .lab{color:var(--muted);font-size:.86rem;margin-top:.5rem}
@media(max-width:720px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}}

.proc-row{display:grid;grid-template-columns:70px 1fr 1.2fr;gap:1.6rem;padding:clamp(26px,4vh,46px) 0;border-top:1px solid var(--line);align-items:baseline}
.proc-row:last-child{border-bottom:1px solid var(--line)}
.proc-row .n{font-family:var(--disp);font-weight:700;color:var(--ember-2);font-size:1.2rem}
.proc-row h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.4rem,2.6vw,2.1rem);letter-spacing:-.02em}
.proc-row p{color:var(--ink-2)}
@media(max-width:760px){.proc-row{grid-template-columns:1fr;gap:.5rem}}

.promo-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--ink);color:var(--paper);border-radius:16px;padding:16px 24px;font-size:.95rem;margin-bottom:clamp(30px,5vh,56px)}
.promo-bar .pill{background:var(--ember);color:#fff;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:30px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan{border:1.5px solid var(--line);border-radius:22px;padding:clamp(28px,3vw,40px);background:var(--paper-2);display:flex;flex-direction:column;transition:transform .55s var(--ease),box-shadow .55s,border-color .4s}
.plan:hover{transform:translateY(-10px);box-shadow:0 44px 80px -54px var(--shadow);border-color:var(--ink)}
.plan.feat{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan .pt{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.plan.feat .pt{color:var(--ember)}
.plan .pr{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,4.4vw,3.6rem);letter-spacing:-.03em;margin:1.2rem 0 .1rem}
.plan .pr .c{font-size:.9rem;font-weight:500;color:var(--muted)}
.plan.feat .pr .c{color:rgba(244,239,230,.6)}
.plan .pd{color:var(--muted);font-size:.92rem;min-height:2.6em}
.plan.feat .pd{color:rgba(244,239,230,.62)}
.plan ul{list-style:none;margin:1.6rem 0;display:flex;flex-direction:column;gap:.8rem;font-size:.95rem}
.plan li{display:flex;gap:11px}
.plan li::before{content:"";flex:none;margin-top:.55em;width:7px;height:7px;border-radius:50%;background:var(--ember)}
.plan .btn{margin-top:auto;justify-content:center}
.plan.feat .btn-ghost{border-color:rgba(244,239,230,.35);color:var(--paper)}
.plan.feat .btn-ghost:hover{border-color:var(--paper)}
@media(max-width:860px){.plans{grid-template-columns:1fr}}

.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q-h{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:clamp(22px,3.4vh,32px) 0;cursor:pointer}
.q-h h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.1rem,2.2vw,1.7rem);letter-spacing:-.01em}
.q-ic{flex:none;width:24px;height:24px;position:relative}
.q-ic::before,.q-ic::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--ember-2)}
.q-ic::before{width:15px;height:2px}
.q-ic::after{width:2px;height:15px;transition:transform .4s var(--ease),opacity .4s}
.q.open .q-ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.q-b{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.q-b p{padding:0 0 28px;max-width:62ch;color:var(--ink-2);font-size:1.02rem}

.cta{background:var(--ink);color:var(--paper);border-radius:26px;padding:clamp(44px,8vw,110px) clamp(26px,6vw,88px);position:relative;overflow:hidden}
.cta .glow{position:absolute;width:64vw;height:64vw;border-radius:50%;background:radial-gradient(circle,rgba(238,75,10,.5),transparent 62%);bottom:-34vw;right:-12vw;filter:blur(30px);pointer-events:none}
.cta h2{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,7vw,6.4rem);line-height:.92;letter-spacing:-.04em;max-width:15ch;position:relative}
.cta h2 .hl{color:var(--ember)}
.cta p{margin-top:1.8rem;max-width:44ch;color:rgba(244,239,230,.66);position:relative}
.cta .btn{margin-top:2.4rem;position:relative}

.foot{padding:clamp(60px,9vh,120px) 0 40px}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:3rem}
.foot-brand{font-family:var(--disp);font-weight:800;font-size:clamp(3rem,13vw,9.5rem);letter-spacing:-.045em;line-height:.78}
.foot-brand .d{color:var(--ember)}
.foot-cols{display:flex;gap:clamp(2.4rem,5vw,5rem);flex-wrap:wrap}
.foot-col h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:1.1rem;font-weight:600}
.foot-col a{display:block;padding:5px 0;color:var(--ink-2);transition:color .3s,padding-left .3s var(--ease)}
.foot-col a:hover{color:var(--ember-2);padding-left:6px}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:3vh;margin-top:5vh;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}

.page-hero{padding-top:24vh;padding-bottom:6vh}
.page-hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,8vw,7rem);line-height:.92;letter-spacing:-.04em;max-width:16ch}
.page-hero h1 .hl{color:var(--ember-2)}
.page-hero .lead{max-width:52ch;margin-top:1.8rem;font-size:clamp(1rem,1.5vw,1.25rem);color:var(--ink-2)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:3vh}
.form .full{grid-column:1/-1}
.field label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;background:var(--paper-2);border:1.5px solid var(--line);border-radius:12px;padding:15px 16px;font-family:var(--body);font-size:1rem;color:var(--ink);transition:border-color .3s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ember)}
.field textarea{min-height:150px;resize:vertical}
@media(max-width:640px){.form{grid-template-columns:1fr}}

/* honeypot */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

/* ---- mobile hero: kill the dead-air gap, flow straight into content ---- */
@media(max-width:640px){
  .hero{min-height:auto;padding-top:15vh;padding-bottom:6vh;justify-content:flex-start}
  .hero-scroll{display:none}
  .hero-sub{margin-top:1.8rem}
  .hero-cta{margin-top:2rem}
  .page-hero{padding-top:19vh;padding-bottom:4vh}
}

@media(min-width:861px){.mobile-menu{display:none}}