/* ============================================================
   MOTION PEAK — Service subpage system (Dark Digital Cinema)
   Self-contained: tokens + Fraunces/DM Sans + subpage layout.
   ============================================================ */

:root {
  --obsidian:#050505; --carbon:#0B0B0C; --charcoal:#151517; --soft-black:#1D1D20;
  --white:#FFFFFF; --soft-white:#F3F3F0; --stone:#B8B8B2; --steel:#7A7A7D; --chrome:#C8C9CC;
  --peak:#F2740B; --ember:#B4540A;
  --serif:"Fraunces",Georgia,serif; --sans:"DM Sans","Helvetica Neue",sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--obsidian); color:var(--soft-white); font-family:var(--sans); font-weight:300; overflow-x:hidden; cursor:none; }
@media (pointer:coarse),(prefers-reduced-motion:reduce){ body{cursor:auto;} .cursor{display:none;} }
a { color:inherit; text-decoration:none; }
img,video { max-width:100%; display:block; }
em { font-family:var(--serif); font-style:italic; font-weight:400; }
::selection { background:var(--peak); color:var(--obsidian); }
:focus-visible { outline:2px solid var(--peak); outline-offset:3px; }

.skip-link { position:fixed; top:-100px; left:1rem; z-index:2000; background:var(--peak); color:var(--obsidian); padding:0.8rem 1.4rem; border-radius:2rem; font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; transition:top 0.3s; }
.skip-link:focus-visible { top:1rem; }

.wrap { max-width:1180px; margin:0 auto; padding:0 clamp(1.4rem,6vw,5rem); }

/* type roles */
.label { font-size:0.78rem; font-weight:500; letter-spacing:0.4em; text-transform:uppercase; color:var(--stone); }
.label-orange { color:var(--peak); }
.section-title { font-family:var(--serif); font-size:clamp(2.2rem,5vw,4rem); font-weight:400; line-height:1.12; color:var(--white); }
.section-title em { color:var(--peak); }
.section-sub { margin-top:1.3rem; font-size:1rem; line-height:1.8; color:var(--stone); max-width:44rem; }

.btn { display:inline-block; font-family:var(--sans); font-size:0.78rem; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; padding:1.05rem 2rem; border-radius:2.6rem; border:1px solid rgba(200,201,204,0.3); color:var(--soft-white); cursor:pointer; transition:border-color .35s,color .35s,background .35s,transform .35s var(--ease); }
.btn:hover,.btn:focus-visible { border-color:var(--peak); color:var(--peak); transform:translateY(-2px); }
.btn-solid { background:var(--peak); border-color:var(--peak); color:var(--obsidian); }
.btn-solid:hover,.btn-solid:focus-visible { background:var(--white); border-color:var(--white); color:var(--obsidian); }

.reveal { opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease),transform 1s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }

/* cursor */
.cursor { position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%; background:var(--peak); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .25s var(--ease),height .25s var(--ease),background .25s; }
.cursor.is-hover { width:40px; height:40px; background:transparent; border:1px solid var(--peak); }

/* nav */
.svc-nav { position:fixed; top:0; left:0; right:0; z-index:500; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.3rem clamp(1.4rem,4vw,3.2rem); background:linear-gradient(to bottom,rgba(5,5,5,0.7),transparent); }
.svc-logo { display:flex; align-items:center; gap:0.7rem; }
.svc-logo img { height:30px; width:auto; }
.svc-logo span { font-weight:500; letter-spacing:0.34em; font-size:0.76rem; color:var(--white); white-space:nowrap; }
.svc-nav-right { display:flex; align-items:center; gap:1.6rem; }
.svc-back { font-size:0.7rem; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:var(--stone); transition:color .3s; }
.svc-back:hover { color:var(--white); }
.svc-nav-cta { font-size:0.7rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--obsidian); background:var(--peak); padding:0.75rem 1.4rem; border-radius:2rem; white-space:nowrap; transition:background .3s; }
.svc-nav-cta:hover { background:var(--white); }
@media (max-width:640px){ .svc-logo span{display:none;} .svc-back{display:none;} }

/* hero */
.svc-hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.svc-hero-media { position:absolute; inset:0; z-index:0; }
.svc-hero-media img,.svc-hero-media video { width:100%; height:100%; object-fit:cover; opacity:0.5; filter:brightness(0.62) saturate(0.95); }
.svc-hero::after { content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(120% 90% at 30% 50%,transparent 40%,rgba(5,5,5,0.7) 100%),linear-gradient(to right,rgba(5,5,5,0.7),transparent 70%); }
.svc-hero-inner { position:relative; z-index:2; padding-top:6rem; }
.svc-hero-kicker { color:var(--peak); font-size:0.82rem; font-weight:600; letter-spacing:0.42em; text-transform:uppercase; }
.svc-hero-title { margin-top:1.4rem; font-family:var(--serif); font-size:clamp(2.8rem,7vw,6rem); font-weight:400; line-height:1.02; color:var(--white); text-shadow:0 1px 40px rgba(5,5,5,0.6); max-width:16ch; }
.svc-hero-title em { color:var(--peak); }
.svc-hero-sub { margin-top:1.8rem; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.7; color:var(--soft-white); max-width:40rem; }
.svc-hero-ctas { margin-top:2.6rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* horizontal scroll section */
.svc-h { position:relative; background:var(--carbon); height:230vh; border-top:1px solid rgba(200,201,204,0.07); }
.svc-h-sticky { position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:clamp(1.6rem,4vh,3rem); padding-top:clamp(4.6rem,10vh,6rem); }
.svc-h-head { max-width:1180px; width:100%; margin:0 auto; padding:0 clamp(1.4rem,6vw,5rem); }
.svc-h-track { display:flex; gap:clamp(1.6rem,3vw,3rem); padding:0 clamp(1.4rem,6vw,5rem); align-items:center; will-change:transform; }
.svc-slide { flex:0 0 auto; width:clamp(300px,60vw,700px); }
.svc-slide-frame { position:relative; aspect-ratio:16/10; max-height:56vh; overflow:hidden; border:1px solid rgba(200,201,204,0.16); background:var(--charcoal); }
.svc-slide-frame img,.svc-slide-frame video { width:100%; height:100%; object-fit:cover; }
.svc-slide-cap { display:flex; align-items:baseline; gap:1rem; margin-top:1.1rem; }
.svc-slide-num { font-size:0.72rem; letter-spacing:0.3em; color:var(--peak); }
.svc-slide-name { font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:420; color:var(--white); }
.svc-slide-tag { display:block; margin-top:0.2rem; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--steel); }
/* flow-step slide (no photo needed) */
.svc-slide-step { width:clamp(280px,34vw,400px); }
.svc-step-card { position:relative; border:1px solid rgba(200,201,204,0.14); background:linear-gradient(160deg,var(--charcoal),var(--obsidian)); padding:2.2rem 1.9rem 2.4rem; min-height:clamp(230px,34vh,300px); display:flex; flex-direction:column; overflow:hidden; }
.svc-step-card::after { content:""; position:absolute; right:-40px; top:-40px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(242,116,11,0.13),transparent 70%); }
.svc-step-n { font-family:var(--sans); font-size:0.64rem; font-weight:600; letter-spacing:0.3em; color:var(--peak); }
.svc-step-ico { margin-top:1.2rem; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(242,116,11,0.34); border-radius:12px; color:var(--peak); background:rgba(242,116,11,0.06); }
.svc-step-ico svg { width:21px; height:21px; }
.svc-step-card h3 { margin-top:1.3rem; font-family:var(--serif); font-size:1.5rem; font-weight:440; color:var(--white); }
.svc-step-card p { margin-top:0.7rem; font-size:0.9rem; line-height:1.65; color:var(--stone); }
.svc-step-chip { margin-top:auto; padding-top:1.2rem; font-family:var(--sans); font-size:0.6rem; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--steel); }

/* transformation "look" slide (portrait) */
.svc-slide-look { width:clamp(230px,26vw,330px); }
.svc-slide-look .svc-slide-frame { aspect-ratio:3/4; max-height:62vh; }
.look-badge { position:absolute; left:0.8rem; bottom:0.8rem; font-family:var(--sans); font-size:0.54rem; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--obsidian); background:var(--peak); padding:0.35rem 0.7rem; }
.look-badge-source { background:var(--white); }
.look-source { border-color:rgba(255,255,255,0.5); box-shadow:0 0 0 1px rgba(255,255,255,0.18), 0 20px 50px rgba(0,0,0,0.45); }

/* ---- playable video affordance ---- */
.svc-slide-frame.has-video { cursor:pointer; }
.svc-slide-frame.has-video::after {
  content:""; position:absolute; left:50%; top:50%; width:64px; height:64px;
  transform:translate(-50%,-50%) scale(0.9);
  border:1px solid rgba(255,255,255,0.75); border-radius:50%;
  background:rgba(5,5,5,0.42) no-repeat center/16px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M0 0v18l16-9z' fill='%23fff'/%3E%3C/svg%3E");
  opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none; backdrop-filter:blur(4px);
}
/* the cue shows while paused, and on hover as a hint that it's clickable */
.svc-slide-frame.has-video.is-paused::after { opacity:1; transform:translate(-50%,-50%) scale(1); }
.svc-slide-frame.has-video:hover::after { opacity:0.85; transform:translate(-50%,-50%) scale(1); }

/* ---- reduced motion: no scrub, so the rail scrolls natively ---- */
.svc-h-static { height:auto !important; }
.svc-h-static .svc-h-sticky { position:static; height:auto; padding:5rem 0; }
.svc-h-static .svc-h-track { overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1.4rem; }
.svc-h-static .svc-slide { scroll-snap-align:center; }

.svc-slide-vert { width:clamp(216px,28vw,300px); }
.svc-slide-vert .svc-slide-frame { aspect-ratio:9/16; max-height:66vh; border-radius:1.8rem; }
@media (max-width:820px){ .svc-h{height:auto;} .svc-h-sticky{position:static;height:auto;padding:5rem 0;} .svc-h-track{flex-direction:column;} .svc-slide{width:100%;max-width:640px;margin:0 auto;} .svc-slide-vert{max-width:320px;} .svc-slide-look{width:100%;max-width:320px;} }

/* ---- every editorial section fills the viewport and centres its content ----
   sections were padding-only, so on tall screens they left dead space.        */
.svc-body, .svc-faq, .svc-final, .panels-sec {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* content taller than the viewport must still breathe, never clip */
@media (max-height:640px){
  .svc-body, .svc-faq, .svc-final, .panels-sec { min-height:auto; }
}

/* ---- ambient backdrop: keeps flat black from reading as a dead panel ----
   a related image, heavily veiled, sits behind the content.                  */
.svc-body, .svc-faq, .svc-final { position:relative; isolation:isolate; }
.svc-body::after, .svc-faq::after, .svc-final::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--amb, none);
  background-size:cover; background-position:center;
  opacity:0.16; filter:grayscale(0.4) contrast(1.05);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 0%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 40%,#000 0%,transparent 78%);
  pointer-events:none;
}
/* a film of obsidian over the image so type never fights it */
.svc-body::before, .svc-faq::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(5,5,5,0.82),rgba(5,5,5,0.62) 45%,rgba(5,5,5,0.88));
  pointer-events:none;
}

/* body / value props */
.svc-body { background:var(--obsidian); padding:clamp(6rem,15vh,11rem) 0; }
.svc-grid { margin-top:clamp(3rem,7vh,5rem); display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:rgba(200,201,204,0.09); border:1px solid rgba(200,201,204,0.09); }
.svc-cell { background:var(--obsidian); padding:2.4rem 1.9rem 3rem; transition:background .4s; }
.svc-cell:hover { background:var(--charcoal); }
.svc-cell .n { font-family:var(--serif); font-style:italic; color:var(--peak); font-size:1rem; }
.svc-cell h3 { margin-top:1.2rem; font-family:var(--serif); font-size:1.35rem; font-weight:450; color:var(--white); }
.svc-cell p { margin-top:0.8rem; font-size:0.9rem; line-height:1.7; color:var(--stone); }

/* comparison */
.cmp { margin-top:clamp(3rem,7vh,5rem); display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(200,201,204,0.09); border:1px solid rgba(200,201,204,0.09); }
.cmp-col { background:var(--obsidian); padding:2.4rem 2rem 2.8rem; }
.cmp-new { background:var(--charcoal); }
.cmp-h { font-family:var(--sans); font-size:0.66rem; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--steel); margin-bottom:1.4rem; }
.cmp-new .cmp-h { color:var(--peak); }
.cmp-col ul { list-style:none; display:flex; flex-direction:column; gap:0.9rem; }
.cmp-col li { position:relative; padding-left:1.7rem; font-size:0.94rem; line-height:1.5; color:var(--stone); }
.cmp-old li::before { content:"✕"; position:absolute; left:0; color:var(--steel); }
.cmp-new li { color:var(--soft-white); }
.cmp-new li::before { content:"✓"; position:absolute; left:0; color:#38d16a; font-weight:700; }
@media (max-width:640px){ .cmp{grid-template-columns:1fr;} }

/* FAQ (AEO) */
.svc-faq { background:var(--carbon); padding:clamp(6rem,14vh,10rem) 0; border-top:1px solid rgba(200,201,204,0.07); }
.faq-list { margin-top:clamp(2.6rem,6vh,4rem); border-top:1px solid rgba(200,201,204,0.1); }
.faq-item { border-bottom:1px solid rgba(200,201,204,0.1); }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.4rem; padding:1.6rem 0; background:none; border:none; text-align:left; cursor:pointer; font-family:var(--serif); font-size:clamp(1.15rem,2.1vw,1.6rem); font-weight:420; color:var(--white); }
.faq-q .plus { flex:none; width:22px; height:22px; position:relative; }
.faq-q .plus::before,.faq-q .plus::after { content:""; position:absolute; background:var(--peak); transition:transform .35s var(--ease); }
.faq-q .plus::before { top:10px; left:0; width:22px; height:2px; }
.faq-q .plus::after { top:0; left:10px; width:2px; height:22px; }
.faq-item.open .plus::after { transform:scaleY(0); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p { padding:0 0 1.6rem; font-size:0.98rem; line-height:1.8; color:var(--stone); max-width:52rem; }

/* final CTA */
.svc-final { position:relative; background:var(--obsidian); text-align:center; padding:clamp(7rem,18vh,13rem) clamp(1.4rem,6vw,5rem); overflow:hidden; border-top:1px solid rgba(200,201,204,0.07); }
.svc-final::before { content:""; position:absolute; inset:-30%; background:radial-gradient(40% 40% at 50% 30%,rgba(242,116,11,0.08),transparent 70%); pointer-events:none; }
.svc-final-inner { position:relative; max-width:60rem; margin:0 auto; }
.svc-final h2 { font-family:var(--serif); font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:400; line-height:1.1; color:var(--white); }
.svc-final h2 em { color:var(--peak); }
.svc-final .btn { margin-top:2.6rem; }

.svc-footer { background:var(--obsidian); border-top:1px solid rgba(200,201,204,0.1); display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; padding:2rem clamp(1.4rem,5vw,3.4rem); }
.svc-footer .b { display:flex; align-items:center; gap:0.7rem; font-weight:500; letter-spacing:0.34em; font-size:0.72rem; color:var(--white); }
.svc-footer .b img { height:28px; }
.svc-footer .n { font-size:0.6rem; letter-spacing:0.2em; color:var(--steel); text-transform:uppercase; }

/* WhatsApp pill */
.wa-pill { position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vh,1.6rem); z-index:800; display:flex; align-items:center; gap:0.6rem; background:#1fb355; color:#fff; font-size:0.74rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; padding:0.85rem 1.3rem; border-radius:3rem; box-shadow:0 14px 34px rgba(0,0,0,0.4); }
.wa-pill:hover { background:#24cf63; }
.wa-pill svg { width:17px; height:17px; fill:currentColor; }

/* stacked-panels interactive canvas */
.panels-sec { background:var(--carbon); padding:clamp(6rem,14vh,10rem) 0 clamp(4rem,10vh,7rem); border-top:1px solid rgba(200,201,204,0.07); text-align:center; overflow:hidden; }
.panels-stage { position:relative; width:100%; height:min(72vh,600px); display:flex; align-items:center; justify-content:center; perspective:1000px; margin-top:clamp(2.5rem,7vh,5rem); overflow:hidden; }
.panels-3d { position:relative; transform-style:preserve-3d; width:0; height:0; will-change:transform; }
.p-panel { position:absolute; border-radius:14px; overflow:hidden; pointer-events:none; will-change:transform; box-shadow:0 20px 50px rgba(0,0,0,0.5); }
.p-panel img { width:100%; height:100%; object-fit:cover; }
.p-panel .p-tint { position:absolute; inset:0; }
.p-panel .p-edge { position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(255,255,255,0.14); }
.panels-hint { margin-top:1.4rem; font-size:0.6rem; letter-spacing:0.4em; text-transform:uppercase; color:var(--steel); }

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .svc-h{height:auto;} .svc-h-sticky{position:static;height:auto;}
  .svc-h-track{flex-direction:column;}
}