/* ═══════════════════════════════════════════════════════════
   MXXE — CINEMATIC HOME (motion.css)
   Pinned hero, pinned "problem" sequence and pinned services sequence.
   Works without JavaScript: the pinned layout only switches on when
   motion.js adds  html.mx-on  (never for visitors who ask for reduced motion).
   Built for speed: no blur filters, no blend modes, no backdrop filters.
   ═══════════════════════════════════════════════════════════ */

/* dark stage: re-points the site's own colour tokens so every existing
   component (buttons, tags, text) adapts automatically. Same in light and dark theme. */
.mx-dark{
  --bg:#0A0A0A;--bg2:#111;--surface:#151515;--surface2:#1c1c1c;
  --text:#F4F1EA;--text2:#dcd8cf;--muted:#a8a196;--muted2:#7f796f;
  --border:rgba(255,255,255,.14);--border2:rgba(255,255,255,.24);
  background:#0A0A0A;color:var(--text);
}
.mx-pin{padding:0;}

/* nav turns dark while it sits over a dark stage (light theme only matters; dark theme is already dark) */
html.mx-nav-dark nav{background:rgba(10,10,10,.94)!important;border-bottom-color:rgba(255,255,255,.1)!important;box-shadow:none!important;}
html.mx-nav-dark nav .logo img{filter:invert(1);}
html.mx-nav-dark nav .logo div span:first-child{color:#F4F1EA!important;}
html.mx-nav-dark .nav-links a{color:rgba(244,241,234,.68);}
html.mx-nav-dark .nav-links a:hover,html.mx-nav-dark .nav-links a.active{color:var(--accent);}
html.mx-nav-dark .hamburger span{background:#F4F1EA;}

/* ───────────────────────── HERO ───────────────────────── */
.mx-hero{position:relative;overflow:hidden;padding:150px 64px 90px;min-height:100vh;display:flex;align-items:center;}
.mx-hero-inner{position:relative;z-index:2;max-width:820px;}
html.is-loading .mx-hero *{animation-play-state:paused!important;}
.mx-hero .hero-h1{font-size:clamp(56px,min(9.4vw,12vh),152px);margin-bottom:22px;}
.mx-hero .hero-sub{max-width:520px;margin-bottom:28px;font-size:15px;line-height:1.7;}
.mx-cue{position:absolute;left:64px;bottom:28px;z-index:2;display:none;align-items:center;gap:12px;font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);}
.mx-cue i{display:block;width:46px;height:1px;background:var(--accent);transform-origin:left;animation:mxCue 2.2s ease-in-out infinite;}
@keyframes mxCue{0%,100%{transform:scaleX(.25)}50%{transform:scaleX(1)}}

/* the stage that grows out from behind the headline */
.mx-reveal{display:none;}
.mx-rev-bg{position:absolute;inset:0;background:#0A0A0A;}
.mx-rev-bg img,.mx-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.mx-rev-bg.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.35) 40%,rgba(10,10,10,.8));}
.mx-rev-top{position:absolute;left:64px;top:calc(14vh + 24px);z-index:2;}
.mx-mask{overflow:hidden;}
.mx-rev-h{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(54px,8vw,132px);line-height:.92;letter-spacing:.02em;color:var(--text);}
.mx-rev-h em{font-style:normal;color:var(--accent);}
.mx-pillars{position:absolute;left:64px;right:64px;top:56%;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--border2);}
.mx-pillar{padding:22px 28px 0 0;display:grid;gap:6px;align-content:start;}
.mx-pillar+.mx-pillar{padding-left:28px;border-left:1px solid var(--border);}
.mx-pillar b{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(26px,2.6vw,40px);letter-spacing:.05em;color:var(--text);line-height:1;}
.mx-pillar span{font-size:13px;color:var(--muted);letter-spacing:.02em;}
.mx-rev-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap:wrap;gap:24px 56px;align-items:center;justify-content:space-between;padding:20px 64px 84px;}
.mx-stats{display:flex;flex-wrap:wrap;gap:20px 52px;}

/* switch to the pinned layout only when motion.js is running */
html.mx-on .mx-hero{height:100vh;height:100svh;min-height:0;padding:128px 64px 64px;}
html.mx-on .mx-cue{display:flex;}
html.mx-on .mx-reveal{display:block;position:absolute;inset:0;z-index:3;clip-path:inset(50% 50% 50% 50%);}

/* ──────────────── PINNED SEQUENCES (problem + services) ──────────────── */
.mx-seq{position:relative;overflow:hidden;padding:90px 24px;}
.mx-seq-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;max-width:1100px;margin:0 auto;}
.mx-seq-left{position:relative;z-index:2;display:flex;flex-direction:column;gap:28px;}
.mx-seq-title{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(40px,min(4.6vw,7.6vh),88px);line-height:.94;letter-spacing:.025em;}
.mx-seq-title em{font-style:normal;color:var(--accent);}
.mx-seq-intro{font-size:15px;line-height:1.75;color:var(--muted);max-width:480px;}
.mx-steps{position:relative;display:grid;gap:44px;}
.mx-step{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.mx-count{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--text);}
.mx-name{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:-4px;}
.mx-count b{font-weight:700;color:var(--muted2);}
.mx-step h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(38px,min(5vw,9vh),76px);line-height:.94;letter-spacing:.03em;}
.mx-step p{font-size:14.5px;line-height:1.75;color:var(--text2);max-width:46ch;}
.mx-price{display:flex;align-items:baseline;gap:10px;font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.mx-price b{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:34px;letter-spacing:.04em;color:var(--accent);}
.mx-step .mx-link{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:4px;transition:color .2s;}
.mx-step .mx-link:hover{color:var(--accent);}
.mx-seq-foot{display:flex;gap:14px;flex-wrap:wrap;}
.mx-arts{display:none;}
.mx-w{display:inline-block;white-space:nowrap;}
.mx-ch{display:inline-block;}

/* right-hand panels: a real photo when one is supplied, otherwise real content from the site */
.mx-art{position:absolute;inset:0;display:flex;align-items:center;background:#101010;border-left:1px solid var(--border);color:var(--text);}
.mx-art.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 55%,rgba(10,10,10,.55));pointer-events:none;}
.mx-art.has-photo .mx-fb:not(.mx-fb-list){display:none;}
/* over a photo, the "what's included" words sit along the bottom and light up one by one as you scroll */
.mx-art.has-photo::after{background:linear-gradient(180deg,rgba(10,10,10,.1) 0%,rgba(10,10,10,0) 22%,rgba(10,10,10,.74) 52%,rgba(10,10,10,.93) 100%);}
.mx-art{isolation:isolate;}
.mx-art.has-photo .mx-fb-list{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 clamp(24px,4vw,56px) clamp(150px,22vh,190px);align-content:end;gap:12px;}
.mx-art.has-photo .mx-fb-list ul{border-top:1px solid rgba(255,255,255,.22);}
.mx-art.has-photo .mx-fb-list li{padding:clamp(6px,1.1vh,10px) 0;font-size:clamp(18px,min(1.9vw,3.2vh),27px);color:#F4F1EA;border-bottom:1px solid rgba(255,255,255,.12);text-shadow:0 1px 12px rgba(0,0,0,.6);will-change:opacity,transform;}
.mx-art.has-photo .mx-fb-label{color:rgba(244,241,234,.75);}
@media(max-width:820px){.mx-art.has-photo .mx-fb-list{padding-bottom:12px;padding-right:20px;}.mx-art.has-photo .mx-fb-list li{font-size:13px;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.03em;}}
.mx-fb{position:relative;width:100%;padding:112px 64px 64px;display:grid;gap:18px;align-content:center;}
.mx-fb-label{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.mx-fb-big{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(56px,min(7.4vw,15vh),170px);line-height:.92;letter-spacing:.02em;color:var(--text);white-space:nowrap;}
.mx-fb-big i{font-style:normal;color:var(--muted2);}
.mx-fb-big em{font-style:normal;color:var(--accent);}
.mx-fb-sub{font-size:14px;color:var(--text2);}
.mx-fb-list ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--border2);}
.mx-fb-list li{padding:15px 0;border-bottom:1px solid var(--border);font-family:'Bebas Neue',sans-serif;font-size:clamp(22px,min(2.4vw,4.2vh),34px);letter-spacing:.05em;line-height:1.1;}

/* pinned layout */
html.mx-on .mx-seq{height:100vh;height:100svh;padding:0;}
html.mx-on .mx-seq-grid{position:relative;height:100%;max-width:none;margin:0;gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
html.mx-on .mx-seq-left{padding:118px 40px 92px 64px;justify-content:space-between;gap:14px;}
html.mx-on .mx-steps{display:block;flex:1;min-height:230px;}
html.mx-on .mx-step{position:absolute;inset:0;justify-content:center;}
html.mx-on .mx-seq-intro{display:none;}
html.mx-on .mx-arts{display:block;position:relative;overflow:hidden;}

/* ───────────────────────── RESPONSIVE ───────────────────────── */
@media(max-width:1100px){
  .mx-hero,html.mx-on .mx-hero{padding-left:32px;padding-right:32px;}
  .mx-rev-top{left:32px;}.mx-pillars{left:32px;right:32px;}.mx-rev-foot{padding-left:32px;padding-right:32px;}.mx-cue{left:32px;}
  html.mx-on .mx-seq-left{padding-left:32px;}
  .mx-fb{padding-left:40px;padding-right:40px;}
}
@media(max-width:820px){
  .mx-hero{padding:120px 20px 60px;}
  html.mx-on .mx-hero{padding:96px 20px 28px;align-items:flex-start;}
  .mx-hero .hero-h1{font-size:clamp(46px,14.2vw,92px);}
  .mx-hero .hero-sub{font-size:14px;margin-bottom:24px;}
  .mx-rev-top{left:20px;top:92px;}
  .mx-rev-h{font-size:clamp(40px,12vw,84px);}
  .mx-pillars{left:20px;right:20px;top:46%;grid-template-columns:minmax(0,1fr);}
  .mx-pillar,.mx-pillar+.mx-pillar{padding:12px 0;border-left:0;border-bottom:1px solid var(--border);}
  .mx-pillar span{font-size:12px;}
  .mx-rev-foot{padding:16px 20px 80px;}.mx-cue{left:20px;}
  .mx-stats{gap:14px 30px;}.mx-stats .hstat .val{font-size:32px;}
  .mx-name{display:none;}
  html.mx-on .mx-seq-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:32% 68%;}
  html.mx-on .mx-arts{order:-1;}
  html.mx-on .mx-art{border-left:0;border-bottom:1px solid var(--border);}
  html.mx-on .mx-seq-left{padding:14px 20px 72px;gap:10px;}
  html.mx-on .mx-seq-title{font-size:clamp(28px,8.2vw,42px);}
  html.mx-on .mx-seq-left .sec-tag{margin-bottom:10px;}
  html.mx-on .mx-step{gap:10px;}
  html.mx-on .mx-step h3{font-size:clamp(32px,9.6vw,48px);}
  html.mx-on .mx-step p{font-size:13.5px;line-height:1.6;}
  html.mx-on .mx-steps{min-height:0;}
  .mx-price b{font-size:28px;}
  .mx-seq-foot .btn-primary,.mx-seq-foot .btn-outline{padding:12px 18px;}
  html.mx-on .mx-fb{padding:84px 20px 14px;gap:6px;}
  html.mx-on .mx-fb-big{font-size:clamp(44px,15vw,72px);}
  html.mx-on .mx-fb-list li{padding:3px 0;font-size:16px;}
  html.mx-on .mx-fb-list .mx-fb-label{display:none;}
  html.mx-on .mx-fb-list{align-content:end;}
  html.mx-on .mx-fb-list{gap:4px;}
  html.mx-on .mx-fb-sub{font-size:12px;}
}
@media(prefers-reduced-motion:reduce){.mx-cue i{animation:none;}}