:root{
    --bg:#fefdfd;
    --tint:#f3eff0;
    --tint-2:#ebe4e6;
    --ink:#201c1d;
    --muted:#8e8184;
    --line:#ebe7e8;
    --green:#ff154e;
    --green-d:#d90d3f;
    --green-soft:#ffe3ea;
    --serif:"Newsreader","Iowan Old Style","Georgia",serif;
    --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    --radius:28px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  html.lenis,html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  .lenis.lenis-stopped{overflow:hidden}
  :root{--ease:cubic-bezier(.22,1,.36,1)}
  body{overflow-x:hidden}
  body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  ul{list-style:none}
  .wrap{width:min(1120px,100% - 40px);margin-inline:auto}
  h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.12}
  h1{font-size:clamp(2.4rem,5.2vw,3.9rem)}
  h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
  p.lead{color:var(--muted);font-size:.95rem;max-width:34ch}

  /* buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.7rem;border-radius:999px;font-weight:500;font-size:.88rem;border:1.5px solid var(--green);cursor:pointer;font-family:var(--sans);position:relative;overflow:hidden;
    transform:translate(var(--mx,0px),var(--my,0px));
    transition:transform .5s var(--ease),background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),color .4s}
  .btn:active{scale:.97}
  .btn-fill{background:var(--green);color:#ffffff}
  .btn-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
  .btn-fill:hover::after{transform:translateX(120%)}
  .btn-fill:hover{background:var(--green-d);border-color:var(--green-d);box-shadow:0 14px 26px -12px var(--green-d)}
  .btn-line{background:transparent;color:var(--ink);border-color:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green-soft)}
  .btn-line:hover{border-color:var(--green);background:rgba(255,21,78,.08)}
  .btn-row{display:flex;gap:.9rem;flex-wrap:wrap}
  .btn-sm{padding:.55rem 1.2rem;font-size:.8rem}

  /* nav */
  header{position:fixed;inset:0 0 auto 0;z-index:50;transition:transform .7s var(--ease),background .5s,backdrop-filter .5s,box-shadow .5s}
  header.scrolled{background:rgba(254,253,253,.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
  header.hide{transform:translateY(-101%)}
  .nav{display:flex;align-items:center;justify-content:space-between;padding-block:34px;transition:padding .5s var(--ease)}
  header.scrolled .nav{padding-block:16px}
  .nav ul a{position:relative;transition:color .3s}
  .nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--green);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
  .nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
  .logo{font-family:var(--serif);font-size:1.35rem;font-weight:500;display:flex;align-items:center;gap:.5rem}
  .logo img{width:54px;height:54px;display:block;border-radius:50%}
  .nav ul{display:flex;gap:2.2rem;font-size:.86rem;color:#564c4e}
  .nav ul a:hover{color:var(--green-d)}
  .burger{display:none;background:none;border:0;cursor:pointer;width:38px;height:38px;position:relative}
  .burger span,.burger span::before,.burger span::after{position:absolute;left:9px;width:20px;height:1.5px;background:var(--ink);content:"";transition:.25s}
  .burger span{top:18px}.burger span::before{top:-6px;left:0}.burger span::after{top:6px;left:0}
  .burger.open span{background:transparent}
  .burger.open span::before{top:0;transform:rotate(45deg)}
  .burger.open span::after{top:0;transform:rotate(-45deg)}

  /* hero */
  .hero{background:var(--tint);padding:170px 0 110px;position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-120px;border-radius:50%;background:radial-gradient(circle,#ffffff 0,transparent 68%);opacity:.9}
  .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;position:relative}
  .hero h1{margin-bottom:1.3rem;max-width:none;font-size:clamp(2.1rem,3.9vw,3.1rem)}
  .hero p.lead{margin-bottom:2rem}
  .community{display:flex;align-items:center;gap:.8rem;margin-top:2.2rem;font-size:.7rem;color:var(--muted);line-height:1.35}
  .community b{color:var(--green-d);font-weight:500;display:block}
  .avatars{display:flex}
  .avatars span{width:30px;height:30px;border-radius:50%;border:2px solid var(--tint);margin-left:-8px;display:grid;place-items:center;font-size:.62rem;font-weight:600;color:#ffffff}
  .avatars span:first-child{margin-left:0}
  .a1{background:#7d6e71}.a2{background:#ff7a99}.a3{background:#4e3f43}

  .hero-art{position:relative;height:430px}
  .shape{position:absolute;overflow:hidden;box-shadow:0 30px 60px -30px rgba(86,64,69,.35)}
  .shape-a{left:0;top:0;width:58%;height:88%;border-radius:120px 24px 24px 120px;
    background:
      repeating-linear-gradient(90deg,rgba(255,255,255,.0) 0 14px,rgba(166,152,155,.16) 14px 16px),
      linear-gradient(160deg,#fcfbfb,#e6e0e1 70%,#d9d0d3)}
  .shape-a::before{content:"";position:absolute;inset:-10% -30% auto auto;width:95%;height:70%;border-radius:0 0 0 100%;background:linear-gradient(135deg,#ffffff,#e3dcde);box-shadow:-14px 14px 30px rgba(142,123,127,.25)}
  .shape-a::after{content:"";position:absolute;left:38%;top:22%;width:20%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff,#ddd4d6 70%);box-shadow:8px 14px 20px rgba(132,113,118,.3)}
  .shape-b{right:0;bottom:0;width:44%;height:66%;border-radius:24px 24px 90px 24px;background:linear-gradient(160deg,#ede7e8,#dfd6d8)}
  .shape-b::before{content:"";position:absolute;left:18%;top:30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 28%,#ffffff 0,#f2f0f0 40%,#d9d0d3 100%);box-shadow:0 26px 30px -10px rgba(126,104,109,.4)}
  .shape-b::after{content:"";position:absolute;right:-12%;top:8%;width:45%;height:26%;border-radius:40px;background:linear-gradient(120deg,#f2d8c8,#e0b9a5);transform:rotate(-24deg);opacity:.85}
  .next{position:absolute;left:2%;bottom:2%;font-size:.6rem;color:var(--muted);display:flex;flex-direction:column;gap:.2rem;width:90px}
  .next::after{content:"";height:1px;background:#a79c9e;margin-top:6px}
  .gl-canvas{position:absolute;inset:-6% -8%;width:116%;height:112%;display:block;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
  .gl .gl-canvas{opacity:1}
  .gl .shape{display:none}
  .hero .next{z-index:2}
  .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
  .hero h1 .w>span{display:inline-block;transform:translateY(105%) rotateX(-40deg);transform-origin:0 100%;animation:wordIn 1.1s var(--ease) forwards;animation-delay:calc(.15s + var(--i)*.09s)}
  @keyframes wordIn{to{transform:none}}
  .hero .fade-up{opacity:0;transform:translateY(20px);animation:fadeUp 1s var(--ease) forwards;animation-delay:calc(.7s + var(--i,0)*.12s)}
  @keyframes fadeUp{to{opacity:1;transform:none}}

  /* sections */
  section{padding:110px 0}
  .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}
  .head-row p{margin-top:.8rem}

  /* brands */
  .brand-track{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .brand-track::-webkit-scrollbar{display:none}
  .brand{flex:0 0 190px;height:86px;border-radius:14px;display:grid;place-items:center;font-family:var(--serif);font-size:1.25rem;color:#463d3f;scroll-snap-align:start;background:#ffffff;border:1px solid var(--line);transition:.3s;gap:.4rem;grid-auto-flow:column;justify-content:center}
  .brand svg{width:20px;height:20px;stroke:var(--green-d);fill:none;stroke-width:1.6}
  .brand:hover{box-shadow:0 14px 30px -18px rgba(86,64,69,.5);transform:translateY(-3px)}
  .arrow-btn{display:inline-flex;align-items:center;gap:.9rem;font-size:.66rem;color:var(--muted);background:none;border:0;cursor:pointer;margin-top:2.2rem}
  .arrow-btn::after{content:"";width:84px;height:1px;background:#988c8f;transition:.3s;position:relative}
  .arrow-btn:hover::after{width:110px;background:var(--green-d)}

  /* why */
  .why{padding-top:40px}
  .why-grid{display:grid;grid-template-columns:1fr 1.1fr .8fr;gap:3rem;align-items:center}
  .ticks{margin:1.6rem 0 2rem;display:grid;gap:.75rem;font-size:.85rem;color:#514648}
  .ticks li{display:flex;align-items:center;gap:.7rem}
  .ticks li::before{content:"";width:9px;height:9px;border-radius:50%;background:#3f3537;box-shadow:0 0 0 3px var(--tint-2)}
  .cloud{position:relative;height:380px}
  .cloud i{position:absolute;border-radius:50%;filter:blur(1px)}
  .cloud .beam{position:absolute;left:46%;top:0;bottom:0;width:1px;background:linear-gradient(var(--line),#d3c8ca);}
  .cloud.gl i{display:none}
  .stats{display:grid;gap:2rem}
  .stat{display:grid;grid-template-columns:28px 1fr;column-gap:.9rem;align-items:center}
  .stat svg{grid-row:span 2;width:22px;height:22px;stroke:#483b3e;fill:none;stroke-width:1.5}
  .stat b{font-family:var(--sans);font-size:1.15rem;font-weight:600}
  .stat span{font-size:.72rem;color:var(--muted)}

  /* process */
  .process{background:linear-gradient(var(--bg),#faf7f8)}
  .road-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:3rem;align-items:center}
  .step{display:grid;grid-template-columns:70px 1fr;gap:1rem;padding:26px 0;border-top:1px solid var(--line);cursor:pointer;position:relative;transition:.3s}
  .step:last-child{border-bottom:1px solid var(--line)}
  .step::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--green);transition:width .5s}
  .step.on::before{width:100%}
  .step small{font-weight:600;font-size:.78rem;color:#483b3e;padding-top:2px}
  .step h3{font-family:var(--sans);font-size:.92rem;font-weight:500;margin-bottom:.4rem}
  .step li{font-size:.72rem;color:var(--muted);padding-left:.9rem;position:relative}
  .step li::before{content:"·";position:absolute;left:0}
  .step:not(.on){opacity:.62}
  .step:hover{opacity:1}
  .road-art{position:relative;height:420px;perspective:1100px}
  .road-3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease)}
  .road-art .card{position:absolute;overflow:hidden;box-shadow:0 40px 60px -30px rgba(86,64,69,.5);animation:cardSwap .9s var(--ease) both}
  .road-art .big{left:0;top:60px;width:62%;height:250px;border-radius:38px;transform:translateZ(0)}
  .road-art .small{right:0;top:0;width:34%;height:130px;border-radius:26px;transform:translateZ(70px);animation-delay:.08s}
  @keyframes cardSwap{from{opacity:0;rotate:y -35deg;scale:.92}to{opacity:1;rotate:y 0deg;scale:1}}
  .road-art .chip{position:absolute;white-space:nowrap;left:52%;top:250px;font-size:.72rem;background:#ffffff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;box-shadow:0 20px 30px -16px rgba(86,64,69,.5);transform:translateZ(110px)}
  .road-art .chip b{color:var(--green-d);font-weight:600}
  .v0{background:radial-gradient(circle at 30% 25%,#ffffff,#e5dcde 60%,#d0c5c8)}
  .v1{background:conic-gradient(from 200deg at 60% 60%,#f7f4f5,#dad1d3,#faf7f8,#cabbbf,#f7f4f5)}
  .v2{background:linear-gradient(140deg,#fbf7f8,#e3cbd1 55%,#d49fab)}
  .v3{background:radial-gradient(circle at 70% 30%,#f5e6dc,#ece9ea 55%,#d3c9cb)}
  .cta-row{display:flex;justify-content:center;margin-top:4rem}

  /* work */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .work{perspective:1100px}
  .work-card{background:#ffffff;border:1px solid var(--line);border-radius:22px;padding:14px;position:relative;transform-style:preserve-3d;
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
    transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
  .work-card:hover{--ty:-8px;box-shadow:0 40px 60px -34px rgba(86,64,69,.55)}
  .work-card::after,.member .ph::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 60%)}
  .work-card:hover::after,.member .ph:hover::before{opacity:1}
  .pic-wrap{position:relative;transform-style:preserve-3d}
  .work .pic{height:250px;border-radius:16px;position:relative;overflow:hidden;transform:translateZ(24px)}
  .work .tag{position:absolute;left:12px;top:12px;font-size:.62rem;background:#ffffff;border-radius:999px;padding:.2rem .6rem;color:#564c4e;transform:translateZ(56px);box-shadow:0 8px 16px -8px rgba(0,0,0,.25)}
  .work .time{position:absolute;right:12px;top:12px;font-size:.62rem;color:#564c4e;transform:translateZ(44px)}
  .work .pic-wrap .btn{position:absolute;right:12px;bottom:12px;transform:translateZ(70px)}
  .work .meta{transform:translateZ(30px)}
  .work .meta{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 4px;font-size:.78rem}
  .work .meta b{font-weight:500}
  .work .meta span{font-size:.68rem;color:var(--muted)}
  .work .meta em{font-style:normal;color:var(--green-d);font-weight:600;font-size:.85rem}
  .p1{background:radial-gradient(circle at 50% 45%,#e8b98d 0,#c98d5f 30%,#efe9e4 32%,#ede9ea 100%)}
  .p1::before,.p1::after{content:"";position:absolute;top:36%;width:20%;aspect-ratio:1;border-radius:50%;background:#ffffff;box-shadow:inset 0 0 0 7px #ffffff,inset 0 0 0 16px #222222}
  .p1::before{left:26%}.p1::after{right:26%}
  .p2{background:linear-gradient(150deg,#f3eff0,#d9d0d3)}
  .p2::before{content:"";position:absolute;left:22%;top:20%;width:56%;height:60%;border-radius:40% 60% 50% 50%/50% 40% 60% 50%;background:radial-gradient(circle at 35% 30%,#ffffff,#b8abae 60%,#807275);box-shadow:0 30px 30px -14px rgba(82,63,67,.4)}
  .p3{background:linear-gradient(150deg,#f3e2e6,#e2b9c3)}
  .p3::before{content:"";position:absolute;left:18%;bottom:-20%;width:64%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff,#cb7c8e 65%,#a94a60)}
  .p3::after{content:"";position:absolute;left:30%;top:14%;width:14%;aspect-ratio:1;border-radius:50%;background:#ffffff;box-shadow:70px 40px 0 -2px #ffffff}

  /* team */
  .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
  .member{text-align:left}
  .member{perspective:900px}
  .member .ph{aspect-ratio:1/1.12;border-radius:24px 24px 24px 90px;display:grid;place-items:center;font-family:var(--serif);font-size:2.6rem;color:rgba(255,255,255,.95);margin-bottom:1rem;overflow:hidden;position:relative;
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .7s var(--ease),border-radius .8s var(--ease),box-shadow .7s var(--ease);box-shadow:0 30px 40px -30px rgba(80,50,57,.6)}
  .member:hover .ph{border-radius:24px 90px 24px 24px}
  .member .ph::after{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.18);right:-20%;bottom:-20%}
  .member b{font-weight:500;display:block;font-size:.95rem}
  .member span{font-size:.75rem;color:var(--muted)}
  .m1{background:linear-gradient(150deg,#b5a2a6,#846f74)}
  .m2{background:linear-gradient(150deg,#ff7a99,#d90d3f)}
  .m3{background:linear-gradient(150deg,#d3cacc,#a29296)}
  .m4{background:linear-gradient(150deg,#e6c3ad,#c99a80)}

  /* cta band */
  .band{background:var(--tint);border-radius:36px;padding:70px 40px;text-align:center;position:relative;overflow:hidden}
  .band::before,.band::after{content:"";position:absolute;border-radius:50%;background:radial-gradient(circle,#ffffff,transparent 70%)}
  .band::before{width:340px;height:340px;left:-80px;top:-100px}
  .band::after{width:300px;height:300px;right:-60px;bottom:-120px}
  .band h2{max-width:16ch;margin:0 auto 1rem;position:relative}
  .band p{margin:0 auto 2rem;position:relative}
  .band .btn-row{justify-content:center;position:relative}

  footer{padding:60px 0 40px;font-size:.8rem;color:var(--muted)}
  .foot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:32px}
  .foot ul{display:flex;gap:1.6rem}
  .foot a:hover{color:var(--green-d)}

  /* reveal */
  .rv{opacity:0;transform:perspective(1000px) translateY(46px) rotateX(-9deg) scale(.985);transform-origin:50% 100%;transition:opacity 1.1s var(--ease),transform 1.3s var(--ease);will-change:transform,opacity}
  .rv.in{opacity:1;transform:none}
  .band{transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
  .glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(60px);opacity:.55;background:var(--green-soft)}
  @media (prefers-reduced-motion:reduce){
    .rv,.hero h1 .w>span,.hero .fade-up{opacity:1;transform:none;transition:none;animation:none}
    html{scroll-behavior:auto}
  }

  /* responsive */
  @media (max-width:960px){
    .hero-grid,.why-grid,.road-grid{grid-template-columns:1fr}
    .hero{padding-top:140px}
    .hero-art{height:380px}
    .cards{grid-template-columns:1fr 1fr}
    .team-grid{grid-template-columns:1fr 1fr}
    .stats{grid-template-columns:repeat(3,1fr)}
    .cloud{height:280px}
  }
  @media (max-width:720px){
    .nav ul{position:absolute;top:82px;left:20px;right:20px;flex-direction:column;gap:1rem;background:#ffffff;padding:1.4rem;border-radius:20px;box-shadow:0 20px 50px -20px rgba(70,40,47,.35);opacity:0;pointer-events:none;transform:translateY(-8px);transition:.25s}
    .nav ul.open{opacity:1;pointer-events:auto;transform:none}
    .burger{display:block}
    .nav .btn{display:none}
    section{padding:80px 0}
    .cards{grid-template-columns:1fr}
    .stats{grid-template-columns:1fr 1fr}
    .road-art{height:330px}
    .road-art .big{height:200px}
    .band{padding:56px 22px}
    .foot{flex-direction:column;align-items:flex-start}
  }

/* =====================================================
   v2 — digital marketing / video editing content
   ===================================================== */
.pill-tag{display:inline-block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-d);background:var(--green-soft);border-radius:999px;padding:.3rem .85rem;margin-bottom:1rem;font-weight:500}
.sec-head{max-width:640px;margin-bottom:3rem}
.sec-head p{margin-top:.9rem;color:var(--muted);max-width:52ch}
.nav ul a.cur{color:var(--green-d)}
.nav ul a.cur::after{transform:scaleX(1)}

/* generic 3D tilt card (put inside an .rv wrapper) */
.t3{position:relative;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .7s var(--ease),box-shadow .7s var(--ease);transform-style:preserve-3d}
.t3:hover{--ty:-8px;box-shadow:0 40px 60px -34px rgba(86,64,69,.55)}
.t3::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.6),transparent 60%)}
.t3:hover::after{opacity:1}

/* featured service: video editing */
.svc-main{display:grid;grid-template-columns:1fr 1.15fr;gap:2.5rem;background:linear-gradient(150deg,var(--tint),#fbf7f8);border:1px solid var(--line);border-radius:36px;padding:48px;align-items:center;position:relative;overflow:hidden}
.svc-main::before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,#ffffff,transparent 70%)}
.svc-main h3{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:.9rem;position:relative}
.svc-main p{color:var(--muted);max-width:44ch;position:relative}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 1.9rem;position:relative}
.chips span{font-size:.75rem;border:1px solid var(--line);background:#ffffff;border-radius:999px;padding:.35rem .85rem;color:#564c4e}

/* editor mock */
.editor{perspective:1100px;position:relative}
.editor-in{position:relative;transform-style:preserve-3d;transform:rotateX(calc(var(--rx,0deg) + 5deg)) rotateY(calc(var(--ry,0deg) - 9deg));transition:transform .9s var(--ease)}
.win{background:#ffffff;border:1px solid var(--line);border-radius:20px;box-shadow:0 50px 70px -40px rgba(80,50,57,.55);padding:14px}
.win-bar{display:flex;gap:6px;margin-bottom:12px}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#e4dcde}
.win-bar i:first-child{background:#ff9f8a}.win-bar i:nth-child(2){background:#f6d27c}.win-bar i:nth-child(3){background:var(--green)}
.prev{display:grid;grid-template-columns:1fr 86px;gap:10px;margin-bottom:12px}
.prev-main{aspect-ratio:16/9;border-radius:12px;background:linear-gradient(135deg,#ebd6db,#d08f9e 60%,#ff154e);position:relative;overflow:hidden}
.prev-main::before{display:none;content:"";position:absolute;left:50%;bottom:-8%;width:30%;height:78%;transform:translateX(-50%);border-radius:50% 50% 0 0/38% 38% 0 0;background:rgba(70,40,47,.75)}
.prev-main::after{display:none;content:"";position:absolute;left:50%;top:14%;width:17%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:rgba(80,50,57,.85)}
.prev-main .cap{position:absolute;left:0;right:0;bottom:9%;text-align:center;font-weight:700;font-size:.7rem;color:#ffffff;letter-spacing:.02em;z-index:2;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.prev-main .cap mark{background:#ffd95e;color:#222222;padding:0 .3em;border-radius:3px}
/* hero mascot (Clip waving inside the preview) */
.hm{position:absolute;left:50%;top:13%;height:66%;width:auto;aspect-ratio:200/170;transform:translateX(-50%);overflow:visible;z-index:1}
.hm-sh{fill:rgba(70,20,40,.22);transform-box:fill-box;transform-origin:center;animation:hmSh 2.6s ease-in-out infinite}
.hm-leg{stroke:var(--ink);stroke-width:6;stroke-linecap:round;fill:none}
.hm-foot{fill:var(--ink)}
.hm-arm{stroke:var(--ink);stroke-width:6;stroke-linecap:round;transform-box:fill-box}
.hm-al{transform-origin:100% 0%}
.hm-ar{transform-origin:0% 0%;animation:hmWave 1.1s ease-in-out infinite}
.hm-body{fill:#fff;stroke:var(--ink);stroke-width:4}
.hm-ck{fill:var(--ink)}
.hm-cs{fill:var(--green)}
.hm-clap{transform-box:fill-box;transform-origin:0% 100%;animation:hmClap 3.2s ease-in-out infinite}
.hm-eye{fill:var(--ink);transform-box:fill-box;transform-origin:center;animation:hmBlink 4.2s infinite}
.hm-cheek{fill:var(--green);opacity:.3}
.hm-mouth{stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;fill:none}
.hm-bob{animation:hmBob 2.6s ease-in-out infinite}
.hm-cut{font:800 15px var(--sans);fill:#fff;stroke:var(--ink);stroke-width:3;paint-order:stroke;stroke-linejoin:round;opacity:0;transform-box:fill-box;transform-origin:0% 100%;animation:hmCut 3.2s ease-in-out infinite}
.hm-sp{fill:#ffd95e;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:hmTwinkle 2s ease-in-out infinite}
.hm-sp2{animation-delay:-1s}
@keyframes hmBob{50%{transform:translateY(-5px)}}
@keyframes hmSh{50%{transform:scaleX(.88);opacity:.7}}
@keyframes hmWave{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-70deg)}}
@keyframes hmClap{0%,62%,100%{transform:rotate(0)}70%{transform:rotate(-28deg)}78%{transform:rotate(0)}}
@keyframes hmCut{0%,68%{opacity:0;transform:scale(.4) rotate(-8deg)}76%{opacity:1;transform:scale(1.15) rotate(-8deg)}84%,92%{opacity:1;transform:scale(1) rotate(-8deg)}100%{opacity:0;transform:scale(1) rotate(-8deg)}}
@keyframes hmBlink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes hmTwinkle{0%,100%{transform:scale(.5) rotate(0);opacity:.4}50%{transform:scale(1.15) rotate(20deg);opacity:1}}
.prev-side{border-radius:12px;background:linear-gradient(170deg,#392a2e,#1e1316);position:relative;overflow:hidden;display:grid;place-items:center;color:#ffffff;font-size:.55rem;text-align:center;font-weight:600;line-height:1.3;padding:8px}
.prev-side b{color:var(--green)}
.tracks{display:grid;gap:6px;position:relative;padding-top:6px}
.trk{height:22px;border-radius:6px;background:#f4f1f1;position:relative;overflow:hidden}
.clip{position:absolute;top:3px;bottom:3px;border-radius:5px;left:var(--l);width:var(--w);background:var(--c)}
.wave{display:flex;align-items:center;gap:2px;padding:0 4px}
.wave i{flex:1;background:#dc9fad;border-radius:2px}
.playhead{position:absolute;top:0;bottom:-2px;width:2px;background:#201c1d;left:2%;border-radius:2px;animation:scrub 7s linear infinite;z-index:3}
.playhead::before{content:"";position:absolute;top:-3px;left:-4px;width:10px;height:10px;background:#201c1d;border-radius:3px}
@keyframes scrub{from{left:2%}to{left:97%}}
.float{position:absolute;background:#ffffff;border:1px solid var(--line);border-radius:14px;padding:.55rem .85rem;font-size:.7rem;box-shadow:0 26px 34px -18px rgba(80,50,57,.5);white-space:nowrap}
.float b{color:var(--green-d);font-weight:600}
.float.f1{right:-10px;top:-22px;transform:translateZ(90px);animation:bob 5s ease-in-out infinite}
.float.f2{left:-16px;bottom:-20px;transform:translateZ(110px);animation:bob 6s ease-in-out -2s infinite}
@keyframes bob{50%{translate:0 -8px}}

/* service mini grid */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.4rem}
.svc{background:#ffffff;border:1px solid var(--line);border-radius:24px;padding:26px 24px}
.ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--green-soft);margin-bottom:1.1rem}
.ico svg{width:22px;height:22px;stroke:var(--green-d);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc h3,.ad h3{font-family:var(--sans);font-size:1.02rem;font-weight:500;margin-bottom:.45rem;letter-spacing:0}
.svc p,.ad p{font-size:.82rem;color:var(--muted)}

/* ads */
.ads-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.ad{background:#ffffff;border:1px solid var(--line);border-radius:22px;padding:20px 18px;height:100%}
.ad .badge{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-family:var(--serif);font-size:1.1rem;margin-bottom:.8rem;color:#ffffff;background:linear-gradient(140deg,var(--green),#d90d3f);box-shadow:0 14px 22px -12px var(--green-d);transform:translateZ(40px)}
.ad ul{margin:.7rem 0 0;display:grid;gap:.45rem;font-size:.78rem;color:#564c4e}
.ad li{padding-left:1rem;position:relative}
.ad li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--green)}
.ad .kpi{margin-top:1.1rem;padding-top:1rem;border-top:1px dashed var(--line);font-size:.72rem;color:var(--muted)}
.ad .kpi b{display:block;font-size:1.15rem;color:var(--ink);font-weight:600}

/* platform marquee */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000000 8%,#000000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000000 8%,#000000 92%,transparent)}
.marq-track{display:flex;gap:1rem;width:max-content;animation:marq 42s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.plat{display:flex;align-items:center;gap:.65rem;padding:.95rem 1.6rem;border:1px solid var(--line);border-radius:999px;background:#ffffff;font-size:.92rem;white-space:nowrap;transition:.4s var(--ease)}
.plat i{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.plat:hover{transform:translateY(-4px);box-shadow:0 18px 28px -18px rgba(86,64,69,.5);border-color:var(--green)}
@keyframes marq{to{transform:translateX(-50%)}}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
.mini{padding:22px 4px;border-top:1px solid var(--line)}
.mini h3{font-family:var(--sans);font-size:.95rem;font-weight:500;margin-bottom:.4rem}
.mini p{font-size:.82rem;color:var(--muted)}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.q{background:#ffffff;border:1px solid var(--line);border-radius:24px;padding:28px 26px;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem}
.q blockquote{font-family:var(--serif);font-size:1.12rem;line-height:1.4}
.stars{color:#f2b544;letter-spacing:.15em;font-size:.8rem;margin-bottom:.8rem}
.who{display:flex;align-items:center;gap:.8rem;font-size:.78rem}
.who i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:600;color:#ffffff;font-size:.78rem}
.who b{display:block;font-weight:500;font-size:.85rem}
.who span{color:var(--muted)}
.c1{background:linear-gradient(140deg,#b5a2a6,#846f74)}.c2{background:linear-gradient(140deg,#ff7a99,#d90d3f)}.c3{background:linear-gradient(140deg,#e6c3ad,#c99a80)}.c4{background:linear-gradient(140deg,#d6a7bb,#b06f8b)}
.center-row{display:flex;justify-content:center;margin-top:2.6rem}

/* ---------- testimonials page ---------- */
.t-hero{padding-bottom:90px}
.t-hero .hero-art{height:400px}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.2rem}
.tabs button{font:500 .8rem var(--sans);padding:.6rem 1.15rem;border-radius:999px;border:1px solid var(--line);background:#ffffff;cursor:pointer;transition:.45s var(--ease);color:#564c4e}
.tabs button:hover{border-color:var(--green)}
.tabs button.on{background:var(--green);border-color:var(--green);color:#ffffff;box-shadow:0 14px 24px -12px var(--green-d)}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.vitem{transition:opacity .4s var(--ease),scale .4s var(--ease)}
.vitem.out{opacity:0;scale:.92}
.vt{background:#ffffff;border:1px solid var(--line);border-radius:26px;padding:12px;cursor:pointer;height:100%}
.poster{aspect-ratio:4/5;border-radius:18px;position:relative;overflow:hidden;transform:translateZ(20px)}
.poster .sub{position:absolute;left:50%;bottom:0;width:58%;height:66%;transform:translateX(-50%)}
.poster .sub::before{content:"";position:absolute;left:50%;top:0;width:36%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:rgba(66,40,46,.82)}
.poster .sub::after{content:"";position:absolute;left:0;right:0;bottom:0;top:38%;border-radius:50% 50% 0 0/36% 36% 0 0;background:rgba(66,40,46,.82)}
.po1{background:linear-gradient(160deg,#f5e3e7,#d48f9f)}
.po2{background:linear-gradient(160deg,#f2eff0,#c7b8bc)}
.po3{background:linear-gradient(160deg,#f8ebe2,#e0b49b)}
.po4{background:linear-gradient(160deg,#f5e6ec,#d3a3b8)}
.po5{background:linear-gradient(160deg,#f4e6e9,#c77487)}
.po6{background:linear-gradient(160deg,#f4f1f2,#cfc4c6)}
.poster::before{content:"";position:absolute;width:70%;aspect-ratio:1;right:-25%;top:-15%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75),transparent 70%)}
.play{position:absolute;left:50%;top:44%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#ffffff;display:grid;place-items:center;box-shadow:0 18px 30px -12px rgba(60,30,37,.45);transform:translateZ(60px);transition:scale .5s var(--ease);z-index:3}
.play::before{content:"";width:0;height:0;border-left:15px solid var(--green-d);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.play::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{from{transform:scale(.85);opacity:1}to{transform:scale(1.5);opacity:0}}
.vt:hover .play{scale:1.12}
.poster .dur{position:absolute;right:12px;top:12px;font-size:.62rem;background:rgba(38,20,24,.72);color:#ffffff;border-radius:999px;padding:.2rem .6rem;transform:translateZ(40px)}
.poster .cat{position:absolute;left:12px;top:12px;font-size:.62rem;background:#ffffff;border-radius:999px;padding:.2rem .65rem;color:#564c4e;transform:translateZ(46px)}
.poster .cap{position:absolute;left:8%;right:8%;bottom:16%;text-align:center;font-weight:700;font-size:.8rem;line-height:1.25;color:#ffffff;text-shadow:0 2px 8px rgba(0,0,0,.35);z-index:2;transform:translateZ(50px)}
.poster .cap mark{background:#ffd95e;color:#222222;padding:0 .3em;border-radius:3px;text-shadow:none}
.poster .metric{position:absolute;left:12px;bottom:12px;background:var(--green);color:#ffffff;font-weight:600;font-size:.72rem;border-radius:999px;padding:.35rem .8rem;transform:translateZ(60px);box-shadow:0 12px 20px -10px var(--green-d)}
.vt-body{padding:16px 6px 6px}
.vt-body blockquote{font-family:var(--serif);font-size:1.02rem;line-height:1.4;margin-bottom:1rem}

/* before / after */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.ba-card{background:#ffffff;border:1px solid var(--line);border-radius:28px;padding:14px}
.ba-card h3{font-family:var(--sans);font-size:.95rem;font-weight:500;margin:16px 6px 4px}
.ba-card p{font-size:.78rem;color:var(--muted);margin:0 6px 8px}
.ba{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;--pos:50;user-select:none;background:#cccccc}
.ba .side{position:absolute;inset:0}
.ba .edit{clip-path:inset(0 0 0 calc(var(--pos)*1%))}
.sc{position:absolute;inset:0;overflow:hidden}
.raw .sc{background:linear-gradient(#bdb8b9,#a1999b);filter:grayscale(.9) contrast(.8)}
.edit .sc{background:linear-gradient(140deg,#ecc4cd,#ff154e 62%,#8f2f45)}
.v2 .edit .sc{background:linear-gradient(140deg,#f8e6d9,#f2b992 55%,#e58b63)}
.sc .sub{position:absolute;left:50%;bottom:0;width:32%;height:74%;transform:translateX(-50%)}
.sc .sub::before{content:"";position:absolute;left:50%;top:0;width:38%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:rgba(65,47,51,.8)}
.sc .sub::after{content:"";position:absolute;left:0;right:0;bottom:0;top:38%;border-radius:50% 50% 0 0/34% 34% 0 0;background:rgba(65,47,51,.8)}
.raw .sc::before,.raw .sc::after{content:"";position:absolute;left:0;right:0;height:11%;background:#000000}
.raw .sc::before{top:0}.raw .sc::after{bottom:0}
.tc{position:absolute;left:12px;top:15%;font:500 .62rem/1 ui-monospace,Menlo,monospace;color:#f3f3f3;background:rgba(0,0,0,.45);padding:.3rem .5rem;border-radius:4px;z-index:2}
.rawnote{position:absolute;right:12px;bottom:15%;font:500 .62rem/1.3 var(--sans);color:#473e40;z-index:2;text-align:right}
.hook{position:absolute;left:50%;top:13%;transform:translateX(-50%);background:#ffffff;color:#201c1d;font-weight:700;font-size:.9rem;padding:.35rem .85rem;border-radius:10px;white-space:nowrap;box-shadow:0 12px 20px -10px rgba(0,0,0,.35);z-index:2}
.cap2{position:absolute;left:0;right:0;bottom:15%;text-align:center;font-weight:800;font-size:1.05rem;color:#ffffff;text-shadow:0 2px 8px rgba(0,0,0,.35);z-index:2;padding:0 10%}
.cap2 mark{background:#ffd95e;color:#222222;padding:0 .3em;border-radius:4px;text-shadow:none}
.bar{position:absolute;left:0;bottom:0;height:5px;width:62%;background:#ffffff;z-index:2;opacity:.9}
.sticker{position:absolute;right:12px;top:18%;background:#201c1d;color:#ffffff;font-weight:700;font-size:.7rem;padding:.35rem .7rem;border-radius:999px;transform:rotate(6deg);z-index:2;box-shadow:0 12px 18px -8px rgba(20,10,14,.4)}
.handle{position:absolute;top:0;bottom:0;left:calc(var(--pos)*1%);width:2px;background:#ffffff;box-shadow:0 0 0 1px rgba(0,0,0,.08);z-index:4;pointer-events:none}
.handle::after{content:"↔";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#ffffff;display:grid;place-items:center;font-size:.9rem;color:var(--green-d);box-shadow:0 12px 22px -8px rgba(0,0,0,.4)}
.lab{position:absolute;top:12px;font-size:.62rem;font-weight:600;letter-spacing:.08em;background:rgba(38,20,24,.7);color:#ffffff;border-radius:999px;padding:.25rem .65rem;z-index:3}
.lab.l{left:12px}.lab.r{right:12px;background:var(--green)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}

/* how we edit list */
.how{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center;margin-top:3.5rem}
.how ol{list-style:none;counter-reset:s;display:grid}
.how li{counter-increment:s;display:grid;grid-template-columns:44px 1fr auto;gap:1rem;padding:20px 0;border-top:1px solid var(--line);align-items:start}
.how li:last-child{border-bottom:1px solid var(--line)}
.how li::before{content:"0" counter(s);font-weight:600;font-size:.78rem;color:#483b3e;padding-top:3px}
.how h3{font-family:var(--sans);font-size:.92rem;font-weight:500;margin-bottom:.2rem}
.how p{font-size:.78rem;color:var(--muted)}
.how em{font-style:normal;font-size:.68rem;color:var(--green-d);background:var(--green-soft);border-radius:999px;padding:.2rem .6rem;white-space:nowrap;font-weight:500}

/* stats band */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.big-stat{text-align:center;padding:30px 10px;border-radius:26px;background:var(--tint)}
.big-stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,2.9rem);line-height:1}
.big-stat span{font-size:.75rem;color:var(--muted)}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(32,18,21,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.modal.open{opacity:1;pointer-events:auto}
.m-box{width:min(860px,100%);background:#ffffff;border-radius:28px;overflow:hidden;transform:perspective(1300px) rotateX(14deg) translateY(50px) scale(.94);transition:transform .9s var(--ease);position:relative}
.modal.open .m-box{transform:none}
.m-stage{aspect-ratio:16/9;position:relative;display:grid;place-items:center;color:#ffffff;overflow:hidden}
.m-stage video{position:absolute;inset:0;width:100%;height:100%;background:#000000;object-fit:contain}
.m-stage .q-big{font-family:var(--serif);font-size:clamp(1.1rem,2.6vw,1.9rem);line-height:1.3;text-align:center;padding:0 12%;text-shadow:0 2px 14px rgba(0,0,0,.3);position:relative;z-index:2}
.eq{position:absolute;left:24px;bottom:22px;display:flex;gap:4px;align-items:flex-end;height:28px}
.eq i{width:4px;background:#ffffff;border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:6px}50%{height:26px}}
.m-info{padding:20px 26px;display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.m-x{position:absolute;top:14px;right:14px;z-index:4;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.9);cursor:pointer;font-size:1.1rem;transition:.4s var(--ease)}
.m-x:hover{rotate:90deg;background:#ffffff}

@media (max-width:960px){
  .svc-main,.how,.ba-grid{grid-template-columns:1fr}
  .svc-grid,.quotes,.vgrid,.three{grid-template-columns:1fr 1fr}
  .ads-grid{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr 1fr}
  .svc-main{padding:32px 24px}
}
@media (max-width:720px){
  .svc-grid,.quotes,.vgrid,.three,.ads-grid{grid-template-columns:1fr}
  .float.f1{right:0}.float.f2{left:0}
  .how li{grid-template-columns:36px 1fr}.how em{display:none}
}
@media (prefers-reduced-motion:reduce){.marq-track,.playhead,.float,.play::after,.eq i,.hm *{animation:none}}
.vitem>.rv{height:100%}
.m-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(42,20,25,.4),rgba(42,20,25,.62));z-index:1}
.m-stage .eq{z-index:2}
.m-stage .q-big{z-index:2}
.m-stage video{z-index:3}
.m-stage[class*="po"]{background-size:cover}
.ad{display:flex;flex-direction:column}
.ad .kpi{margin-top:auto}
.ad ul{margin-bottom:0}
.eq[hidden]{display:none}

/* =====================================================
   work page — video edit examples
   ===================================================== */
.w-hero{padding-bottom:90px}
.jump{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2rem}
.jump a{font-size:.78rem;border:1px solid var(--green-soft);border-radius:999px;padding:.5rem 1rem;background:rgba(255,255,255,.6);transition:.4s var(--ease)}
.jump a:hover{border-color:var(--green);transform:translateY(-3px)}
.ex{padding:90px 0}
.ex:nth-of-type(even){background:linear-gradient(var(--bg),#f9f5f6 40%,var(--bg))}
.ex-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}
.ex.flip .ex-grid>:first-child{order:2}
.ex-no{font-family:var(--serif);font-size:4.2rem;line-height:1;color:var(--tint-2);margin-bottom:.4rem}
.ex h2{margin-bottom:.9rem}
.ex .lead{max-width:44ch}
.log{list-style:none;margin:1.8rem 0 1.6rem;display:grid}
.log li{display:grid;grid-template-columns:52px 1fr;gap:.9rem;padding:14px 12px;border-top:1px solid var(--line);cursor:pointer;border-radius:14px;transition:background .5s var(--ease),transform .5s var(--ease)}
.log li:last-child{border-bottom:1px solid var(--line)}
.log li:hover{transform:translateX(6px)}
.log li.on{background:var(--tint);border-color:transparent}
.log li time{font:600 .7rem ui-monospace,Menlo,monospace;color:var(--green-d);background:var(--green-soft);border-radius:999px;padding:.25rem 0;height:max-content;text-align:center}
.log li b{display:block;font-weight:500;font-size:.9rem}
.log li span{font-size:.76rem;color:var(--muted)}
.res{display:flex;gap:2.2rem;flex-wrap:wrap}
.res b{display:block;font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.1}
.res span{font-size:.72rem;color:var(--muted)}

.vp{position:relative;perspective:1200px;--ar:9/16}
.vp:not(.h){max-width:520px;margin-inline:auto;width:100%}
.vp.h{--ar:16/9}
.vp-in{background:#ffffff;border:1px solid var(--line);border-radius:30px;padding:14px;box-shadow:0 50px 70px -44px rgba(80,50,57,.55);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease)}
.vp-panes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vp.h .vp-panes{grid-template-columns:1fr}
.pane{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:var(--ar);background:#d6d0d1}
.pane video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000000}
.pane .lab{top:10px}
.pane .lab.l{left:10px}
.vp .sc .sub{transform:translateX(-50%) scale(var(--z,1));transform-origin:50% 100%;transition:transform .7s var(--ease)}
.vp.playing .raw .sc .sub{animation:shake 2.4s ease-in-out infinite}
@keyframes shake{0%,100%{translate:0 0}25%{translate:-3px 2px}50%{translate:3px -1px}75%{translate:-2px -2px}}
.vp .edit .sc{filter:hue-rotate(var(--hr,0deg));transition:filter .9s}
.vp .hook:empty,.vp .cap2:empty{display:none}
.vp .pop{animation:pop .5s var(--ease)}
@keyframes pop{from{scale:.72;opacity:0}}
.vp .bar{width:calc(var(--p,0)*100%)}
.vp .hook{font-size:.82rem}
.vp .cap2{font-size:1rem}
.vp.h .cap2{font-size:1.3rem}
.vp-ctl{display:flex;align-items:center;gap:14px;padding:16px 8px 6px}
.vp-btn{width:42px;height:42px;flex:none;border-radius:50%;border:0;background:var(--green);color:#ffffff;cursor:pointer;display:grid;place-items:center;transition:background .4s,scale .5s var(--ease);box-shadow:0 12px 20px -10px var(--green-d)}
.vp-btn:hover{background:var(--green-d);scale:1.1}
.vp-btn svg{width:14px;height:14px;fill:#ffffff}
.vp-track{position:relative;flex:1;height:6px;border-radius:6px;background:var(--tint-2);cursor:pointer}
.vp-track::before{content:"";position:absolute;inset:-12px 0}
.vp-track .fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0)*100%);background:var(--green);border-radius:6px}
.vp-track .mk{position:absolute;top:-4px;width:3px;height:14px;left:var(--l);background:#c9bbbe;border-radius:2px;transition:background .3s}
.vp-track .mk.past{background:var(--green-d)}
.vp-time{flex:none;font:500 .7rem ui-monospace,Menlo,monospace;color:var(--muted)}
.vp-hint{font-size:.7rem;color:var(--muted);text-align:center;margin-top:.7rem}

@media (max-width:960px){
  .ex-grid{grid-template-columns:1fr;gap:2.4rem}
  .ex.flip .ex-grid>:first-child{order:0}
  .ex{padding:64px 0}
}
@media (prefers-reduced-motion:reduce){.vp.playing .raw .sc .sub{animation:none}}
.pane.edit .lab{background:var(--green)}
.vp .hook{top:8%}
.vp .rawnote{color:#ffffff;background:rgba(0,0,0,.45);padding:.25rem .45rem;border-radius:6px;bottom:14%}
.warm .edit .sc{background:linear-gradient(140deg,#f8e6d9,#f2b992 55%,#e58b63)}
.ad .addon{position:absolute;top:18px;right:18px;font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green-d);background:var(--green-soft);padding:.22rem .6rem;border-radius:999px;font-weight:600;transform:translateZ(30px)}
#addons .chips{margin-bottom:0}

/* =====================================================
   How We Edit — mascot story stage
   ===================================================== */
.road-art{height:auto}
.road-3d{position:relative;inset:auto}
.road-art .chip{left:auto;right:-6px;top:-16px;transform:translateZ(90px);z-index:5}
.step{outline:none}
.step:focus-visible{box-shadow:0 0 0 2px var(--green-soft)}
.dots{display:flex;gap:.55rem;justify-content:center;margin-top:1.5rem}
.dots button{width:10px;height:10px;border-radius:6px;border:0;background:var(--tint-2);cursor:pointer;transition:.6s var(--ease)}
.dots button.on{background:var(--green);width:30px}

.stage{position:relative;aspect-ratio:480/380;border-radius:34px;overflow:hidden;background:linear-gradient(165deg,#fff 0%,var(--tint) 100%);border:1px solid var(--line);box-shadow:0 50px 70px -40px rgba(70,20,40,.5);transform-style:preserve-3d}
.stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.stage.flip svg{animation:stageFlip .9s var(--ease)}
@keyframes stageFlip{from{opacity:0;transform:perspective(900px) rotateY(-28deg) scale(.95)}}
.scene-tag{position:absolute;left:18px;top:14px;z-index:3;font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--green-d);background:var(--green-soft);border-radius:999px;padding:.25rem .7rem}
.bubble{position:absolute;left:18px;right:18px;top:46px;z-index:3;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 14px;min-height:62px;box-shadow:0 16px 26px -18px rgba(70,20,40,.45);font-size:.8rem;line-height:1.4}
.bubble::after{content:"";position:absolute;left:52px;bottom:-8px;width:14px;height:14px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.bubble b{display:block;font-family:var(--serif);font-weight:500;font-size:1rem;color:var(--ink);margin-bottom:.1rem;min-height:1.3em}
.bubble span{color:#5a4d51;display:block}

/* shared svg look */
.stage text{font-family:var(--sans);font-weight:600;font-size:12px;text-anchor:middle}
.ground{fill:rgba(255,21,78,.06)}
.lbl{fill:var(--muted);font-weight:500!important}
.scene{opacity:0;transition:opacity .5s var(--ease)}
.stage[data-s="1"] .sc1,.stage[data-s="2"] .sc2,.stage[data-s="3"] .sc3,.stage[data-s="4"] .sc4{opacity:1}
.stage [class*="th"],.stage .fr,.stage .pf,.stage .mo,.stage .plane,.stage .eye,.stage .arm,.stage .clap{transform-box:fill-box}

/* mascot */
.mshadow{fill:rgba(70,20,40,.16);transform-box:fill-box;transform-origin:center}
.leg{stroke:var(--ink);stroke-width:6;stroke-linecap:round;fill:none}
.foot{fill:var(--ink)}
.arm{stroke:var(--ink);stroke-width:6;stroke-linecap:round}
.arm-l{transform-origin:100% 0%}
.arm-r{transform-origin:0% 0%}
.body{fill:#fff;stroke:var(--ink);stroke-width:4}
.ck{fill:var(--ink)}
.cs{fill:var(--green)}
.clap{transform-origin:0% 100%}
.eye{fill:var(--ink);transform-origin:center;animation:blink 4.2s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.cheek{fill:var(--green);opacity:.3}
.mouth{stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;fill:none}
.mouth2{fill:var(--ink);opacity:0}
.bob{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}

/* ---- scene 1 : brief & raw upload ---- */
.fld-back{fill:#ffc4d1;stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.fld-front{fill:var(--green-soft);stroke:var(--ink);stroke-width:4}
.up{stroke:var(--green);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.th rect{fill:#fff;stroke:var(--ink);stroke-width:3}
.th path{fill:var(--green)}
.th{transform-origin:center;opacity:0}
.stage[data-s="1"] .th{animation:drop 3s ease-in infinite}
.stage[data-s="1"] .th2{animation-delay:.9s}
.stage[data-s="1"] .th3{animation-delay:1.8s}
@keyframes drop{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:1}72%{transform:translateY(112px) scale(.6);opacity:1}100%{transform:translateY(128px) scale(.35);opacity:0}}
.stage[data-s="1"] .arm-r{animation:wave .9s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-78deg)}}
.stage[data-s="1"] .clap{animation:clap 2.8s ease-in-out infinite}
@keyframes clap{0%,66%,100%{transform:rotate(0)}74%{transform:rotate(-26deg)}82%{transform:rotate(0)}}
.stage[data-s="1"] .up{animation:upbob 1.2s ease-in-out infinite}
@keyframes upbob{50%{transform:translateY(-5px)}}

/* ---- scene 2 : rough cut ---- */
.hk rect{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.hk text{fill:var(--ink)}
.stage[data-s="2"] .hk1 rect{animation:hkon 6s infinite}
.stage[data-s="2"] .hk2 rect{animation:hkon 6s 2s infinite}
.stage[data-s="2"] .hk3 rect{animation:hkon 6s 4s infinite}
.stage[data-s="2"] .hk1 text{animation:hktx 6s infinite}
.stage[data-s="2"] .hk2 text{animation:hktx 6s 2s infinite}
.stage[data-s="2"] .hk3 text{animation:hktx 6s 4s infinite}
@keyframes hkon{0%,30%{fill:var(--green)}34%,100%{fill:#fff}}
@keyframes hktx{0%,30%{fill:#fff}34%,100%{fill:var(--ink)}}
.strip{fill:var(--ink)}
.holes{stroke:#fff;stroke-width:4;stroke-dasharray:6 8;opacity:.5;fill:none}
.fr rect{fill:#fff}
.fr .m{fill:var(--green)}
.fr .slow{fill:#e5dcde}
.zz{fill:#9b8d91;font-size:11px!important}
.fr{transform-origin:center}
.stage[data-s="2"] .fr3{animation:cutout 5.5s ease-in-out infinite}
.stage[data-s="2"] .fr4,.stage[data-s="2"] .fr5{animation:gap 5.5s ease-in-out infinite}
@keyframes cutout{0%,38%{transform:none;opacity:1}50%{transform:translateY(-16px) rotate(-10deg);opacity:.6}62%,84%{transform:translateY(-24px) scale(.2);opacity:0}94%,100%{transform:none;opacity:1}}
@keyframes gap{0%,56%{transform:none}66%,84%{transform:translateX(-46px)}94%,100%{transform:none}}
.stage[data-s="2"] .scissors{animation:cutmove 5.5s ease-in-out infinite}
@keyframes cutmove{0%{transform:translateX(0)}42%,60%{transform:translateX(96px)}100%{transform:translateX(0)}}
.blade{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.ring{fill:none;stroke:var(--green);stroke-width:3.5}
.cutline{stroke:var(--green);stroke-width:2.5;stroke-dasharray:3 3}
.stage[data-s="2"] .arm-r{animation:snip .5s ease-in-out infinite}
@keyframes snip{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(-38deg)}}

/* ---- scene 3 : we post ---- */
.trail{fill:none;stroke:var(--green);stroke-width:3;stroke-dasharray:4 7;stroke-linecap:round}
.stage[data-s="3"] .trail{animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}
.pl{fill:var(--green);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.plf{stroke:var(--ink);stroke-width:2.5;fill:none}
.plane{transform-origin:center}
.stage[data-s="3"] .plane{animation:fly 3.2s ease-in-out infinite}
@keyframes fly{0%{transform:translate(0,0) rotate(6deg);opacity:0}12%{opacity:1}50%{transform:translate(52px,-70px) rotate(-8deg)}100%{transform:translate(98px,-118px) rotate(-26deg);opacity:0}}
.pf{transform-origin:center;transform:scale(0)}
.pf rect{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.pf circle{fill:var(--green)}
.pf text{fill:var(--ink);text-anchor:start!important}
.stage[data-s="3"] .pf{animation:chippop .6s var(--ease) forwards}
.stage[data-s="3"] .pf1{animation-delay:.4s}
.stage[data-s="3"] .pf2{animation-delay:.8s}
.stage[data-s="3"] .pf3{animation-delay:1.2s}
.stage[data-s="3"] .pf4{animation-delay:1.6s}
.stage[data-s="3"] .pf5{animation-delay:2s}
@keyframes chippop{from{transform:scale(0)}to{transform:scale(1)}}
.stage[data-s="3"] .arm-r{animation:wave .9s ease-in-out infinite}

/* ---- scene 4 : repeat ---- */
.mo{transform-origin:center;transform:scale(0)}
.mo rect{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.mo text{fill:var(--ink)}
.stage[data-s="4"] .mo{animation:chippop .6s var(--ease) forwards}
.stage[data-s="4"] .mo1{animation-delay:.3s}
.stage[data-s="4"] .mo2{animation-delay:.9s}
.stage[data-s="4"] .mo3{animation-delay:1.5s}
.cyc{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round}
.cych{fill:var(--green);stroke:var(--green);stroke-width:2;stroke-linejoin:round}
.loop{transform-box:view-box;transform-origin:335px 235px}
.stage[data-s="4"] .loop{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vd rect{fill:#fff;stroke:var(--ink);stroke-width:3}
.vd path{fill:var(--green)}
.stage[data-s="4"] .bob{animation:jump .9s cubic-bezier(.3,0,.4,1) infinite}
@keyframes jump{0%,100%{transform:translateY(0)}45%{transform:translateY(-26px)}}
.stage[data-s="4"] .mshadow{animation:shrink .9s cubic-bezier(.3,0,.4,1) infinite}
@keyframes shrink{45%{transform:scale(.7);opacity:.6}}
.stage[data-s="4"] .arm-l{animation:cheerl .9s ease-in-out infinite}
.stage[data-s="4"] .arm-r{animation:cheerr .9s ease-in-out infinite}
@keyframes cheerl{0%,100%{transform:rotate(112deg)}50%{transform:rotate(132deg)}}
@keyframes cheerr{0%,100%{transform:rotate(-112deg)}50%{transform:rotate(-132deg)}}
.stage[data-s="4"] .mouth1{opacity:0}
.stage[data-s="4"] .mouth2{opacity:1}
.stage[data-s="4"] .clap{animation:clap 1.8s ease-in-out infinite}

@media (max-width:720px){
  .bubble{font-size:.72rem;padding:8px 11px;min-height:56px;left:12px;right:12px}
  .bubble b{font-size:.9rem}
  .scene-tag{left:12px}
  .road-art .chip{right:0}
}
@media (prefers-reduced-motion:reduce){.stage *{animation:none!important}.stage .pf,.stage .mo{transform:scale(1)}}

/* ads 3D scenes */
.head-split{display:grid;grid-template-columns:1.05fr 1fr;gap:2rem;align-items:center}
#ads .head-split{margin-bottom:2.4rem}
.head-split .sec-head{margin-bottom:0}
.gl-box{position:relative;height:380px}
@media (max-width:960px){.head-split{grid-template-columns:1fr}.gl-box{height:300px}}

/* =====================================================
   Book-a-call wizard
   ===================================================== */
.bk{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(28,14,20,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.bk.open{opacity:1;pointer-events:auto}
.bk-box{position:relative;width:min(640px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:#fff;border-radius:30px;box-shadow:0 60px 90px -40px rgba(60,10,30,.6);transform:perspective(1300px) rotateX(12deg) translateY(50px) scale(.94);transition:transform .9s var(--ease);overflow:hidden}
.bk.open .bk-box{transform:none}
.bk-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border:0;border-radius:50%;background:var(--tint);cursor:pointer;font-size:1rem;transition:.4s var(--ease);z-index:2}
.bk-x:hover{rotate:90deg;background:var(--green-soft)}
.bk-top{display:flex;justify-content:space-between;align-items:center;padding:22px 64px 14px 28px}
.bk-brand{display:flex;align-items:center;gap:.5rem;font-family:var(--serif);font-size:1.1rem}
.bk-brand img{width:44px;height:44px;display:block;border-radius:50%}
.bk-count{font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.bk-bar{height:4px;background:var(--tint-2);margin:0 28px;border-radius:4px;overflow:hidden}
.bk-bar span{display:block;height:100%;width:0;background:var(--green);border-radius:4px;transition:width .7s var(--ease)}
.bk-body{padding:26px 28px 8px;overflow-y:auto;flex:1}
.bk-body.in-next{animation:bkNext .6s var(--ease)}
.bk-body.in-prev{animation:bkPrev .6s var(--ease)}
@keyframes bkNext{from{opacity:0;transform:translateX(34px)}}
@keyframes bkPrev{from{opacity:0;transform:translateX(-34px)}}
.bk-q{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.6vw,1.95rem);line-height:1.15;margin-bottom:.5rem}
.bk-hint{font-size:.85rem;color:var(--muted);margin-bottom:1.4rem}
.bk-opts{display:grid;gap:.7rem}
.bk-opt{position:relative;display:flex;align-items:center;gap:1rem;text-align:left;width:100%;padding:14px 46px 14px 14px;border:1.5px solid var(--line);border-radius:18px;background:#fff;cursor:pointer;font-family:var(--sans);color:var(--ink);transition:transform .5s var(--ease),border-color .3s,background .3s,box-shadow .5s var(--ease)}
.bk-opt:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 18px 26px -20px rgba(255,21,78,.55)}
.bk-opt.on{border-color:var(--green);background:var(--green-soft)}
.bk-ico{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--green-soft);transition:.4s}
.bk-opt.on .bk-ico{background:#fff}
.bk-ico svg{width:22px;height:22px;stroke:var(--green-d);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bk-txt{display:grid;gap:.1rem;min-width:0}
.bk-txt b{font-weight:500;font-size:.95rem}
.bk-txt span{font-size:.76rem;color:var(--muted)}
.bk-opt em{position:absolute;top:10px;right:46px;font-style:normal;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-d);background:var(--green-soft);border-radius:999px;padding:.15rem .5rem;font-weight:600}
.bk-opt.on em{background:#fff}
.bk-tick{position:absolute;right:16px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:1.5px solid #d9cdd1;transition:.4s var(--ease)}
.bk-opt.on .bk-tick{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat;border-color:var(--green)}
.bk-text,.bk-form input,.bk-form textarea{width:100%;font:400 .92rem var(--sans);padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);outline:none;transition:border-color .3s,box-shadow .3s;resize:vertical}
.bk-text:focus,.bk-form input:focus,.bk-form textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.bk-form{display:grid;gap:.9rem}
.bk-form label{display:grid;gap:.35rem;font-size:.78rem;font-weight:500}
.bk-form label small{font-weight:400;color:var(--muted)}
.bk-err{color:var(--green-d);font-size:.8rem}
.bk-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.bk-chip{font-size:.72rem;background:var(--tint);border-radius:999px;padding:.3rem .75rem;color:#5a4d51}
.bk-foot{display:flex;justify-content:space-between;align-items:center;padding:18px 28px 24px}
.bk-back{background:none;border:0;cursor:pointer;font:500 .85rem var(--sans);color:var(--muted);padding:.5rem .2rem;transition:color .3s}
.bk-back:hover{color:var(--ink)}
.bk-next:disabled{opacity:.4;pointer-events:none}
.bk-done{text-align:center;padding:10px 0 20px}
.bk-check{width:74px;height:74px;margin:0 auto 1.2rem;border-radius:50%;background:var(--green);display:grid;place-items:center;box-shadow:0 20px 30px -12px var(--green-d);animation:bkPop .7s var(--ease)}
.bk-check svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:bkDraw .6s .3s var(--ease) forwards}
@keyframes bkPop{from{transform:scale(0)}}
@keyframes bkDraw{to{stroke-dashoffset:0}}
.bk-sum{list-style:none;text-align:left;margin:1.4rem 0;display:grid;gap:.5rem}
.bk-sum li{display:grid;gap:.1rem;padding:.75rem 1rem;background:var(--tint);border-radius:14px;font-size:.78rem}
.bk-sum li span{color:var(--muted)}
.bk-sum li b{font-weight:500;font-size:.88rem}
@media (max-width:720px){
  .bk{padding:0;place-items:end center}
  .bk-box{border-radius:26px 26px 0 0;max-height:92vh}
  .bk-top{padding-left:20px}.bk-bar{margin:0 20px}.bk-body{padding:22px 20px 6px}.bk-foot{padding:14px 20px 22px}
  .bk-opt em{display:none}
}
@media (prefers-reduced-motion:reduce){.bk-box{transition:none;transform:none}.bk-body{animation:none!important}}
@media (max-width:720px){.nav .btn{display:inline-flex;margin-left:auto;margin-right:.6rem}}
.bk-foot[hidden],.bk-next[hidden]{display:none}
.bk-opt:focus{outline:none}
.bk-opt:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.bk-opts:empty{display:none}
.bk-let{font-family:var(--serif);font-size:1.1rem;color:var(--green-d);font-weight:500}
.bk-lbl{font-size:.78rem;font-weight:500;margin-bottom:-.4rem}
.bk-lbl small{font-weight:400;color:var(--muted)}
.bk-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.bk-slot{position:relative;cursor:pointer}
.bk-slot input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.bk-slot span{display:grid;gap:.1rem;text-align:center;padding:.8rem .4rem;border:1.5px solid var(--line);border-radius:14px;background:#fff;transition:.4s var(--ease)}
.bk-slot b{font-weight:500;font-size:.85rem}
.bk-slot small{font-size:.68rem;color:var(--muted);font-weight:400}
.bk-slot:hover span{border-color:var(--green);transform:translateY(-2px)}
.bk-slot input:checked+span{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 14px 22px -12px var(--green-d)}
.bk-slot input:checked+span small{color:rgba(255,255,255,.85)}
.bk-slot input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
@media (max-width:420px){.bk-slots{grid-template-columns:1fr}}
.bk-opts.multi .bk-tick{border-radius:7px}
.bk-multi-note{font-size:.72rem;color:var(--muted);margin-top:.9rem}
/* popup scrolling */
.bk-body{min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#e3d6da transparent}
.bk-body::-webkit-scrollbar{width:8px}
.bk-body::-webkit-scrollbar-thumb{background:#e3d6da;border-radius:8px}
.bk-form select{width:100%;font:400 .92rem var(--sans);padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);outline:none;transition:border-color .3s,box-shadow .3s;appearance:auto}
.bk-form select:focus{border-color:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.bk-lbl small{color:var(--green-d);font-weight:500}

/* Calendly embed step */
.bk-box{transition:transform .9s var(--ease),width .6s var(--ease)}
.bk-box.wide{width:min(940px,100%)}
.bk-embed{position:relative;height:clamp(520px,calc(100vh - 330px),720px);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;margin-bottom:.6rem}
.bk-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .6s var(--ease)}
.bk-embed.ready iframe{opacity:1}
.bk-load{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:.85rem}

/* =====================================================
   MOBILE / TABLET RESPONSIVE PASS
   ===================================================== */
html,body{overflow-x:clip;max-width:100%}
img,video,canvas,svg,iframe{max-width:100%}

@media (max-width:960px){
  .wrap{width:min(1120px,100% - 40px)}
  .hero{padding:130px 0 60px}
  .hero-art,.t-hero .hero-art{height:340px}
  .gl-canvas{inset:0!important;width:100%!important;height:100%!important}
  .float.f1{right:6px}.float.f2{left:6px}
}

@media (max-width:720px){
  body{font-size:15px}
  .wrap{width:calc(100% - 36px)}
  section{padding:56px 0}
  h1{font-size:clamp(2.1rem,9.5vw,2.7rem)}
  h2{font-size:clamp(1.65rem,7.4vw,2rem)}

  /* nav */
  .nav{padding-block:18px}
  header.scrolled .nav{padding-block:12px}
  .logo{font-size:1.2rem}
  .logo img{width:46px;height:46px}
  .nav .btn{padding:.55rem 1.05rem;font-size:.78rem}

  /* hero */
  .hero{padding:104px 0 28px}
  .hero-grid{gap:.4rem}
  .hero h1{max-width:none;margin-bottom:1rem}
  .hero p.lead{max-width:none;margin-bottom:1.5rem;font-size:.93rem}
  .btn-row .btn{flex:1 1 auto}
  .community{margin-top:1.6rem}
  .hero-art,.t-hero .hero-art{height:290px;margin-top:.5rem}

  /* section headings */
  .sec-head{margin-bottom:1.8rem}
  .head-row{margin-bottom:1.6rem;gap:1rem}
  .head-split{gap:.6rem}
  #ads .head-split{margin-bottom:1.4rem}
  .gl-box{height:250px}
  #addons{padding-bottom:0!important}
  #ads{padding-top:10px!important}
  #social{padding-top:10px!important}

  /* video editing feature card */
  .svc-main{padding:26px 20px;border-radius:26px;gap:2rem}
  .float.f1{right:2px;top:-16px}.float.f2{left:2px;bottom:-14px}
  .float{font-size:.64rem;padding:.45rem .7rem}
  .svc-grid{gap:.8rem}
  .svc{padding:20px 18px;display:grid;grid-template-columns:46px 1fr;column-gap:14px;align-items:start}
  .svc .ico{margin:0;grid-row:span 2}
  .svc h3{margin:.05rem 0 .25rem}

  /* ads */
  .ads-grid{gap:.8rem}
  .ad{padding:24px 18px}

  /* social */
  .three{gap:0;margin-top:1.6rem}
  .mini{padding:18px 4px}

  /* why */
  .why{padding-top:24px}
  .why-grid{gap:1.4rem}
  .cloud{height:230px}
  .stats{grid-template-columns:repeat(3,1fr);gap:.4rem}
  .stat{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:.15rem;padding:14px 4px;background:var(--tint);border-radius:16px}
  .stat svg{grid-row:auto;margin-bottom:.2rem}
  .stat b{font-size:1.05rem}
  .stat span{font-size:.66rem}

  /* how we edit: mascot first, steps become a compact list */
  .road-grid{display:flex;flex-direction:column;align-items:stretch;gap:1.6rem}
  .road-art{order:-1;height:auto;width:100%}
  .steps{width:100%}
  .road-art .chip{display:none}
  .stage{aspect-ratio:350/354;border-radius:26px}
  .steps .step{grid-template-columns:38px 1fr;padding:16px 0}
  .steps .step:not(.on) ul{display:none}
  .steps .step:not(.on){opacity:.85}
  .steps .step h3{font-size:.95rem;margin-bottom:0}
  .steps .step.on h3{margin-bottom:.4rem}
  .steps .step li{font-size:.76rem}
  .cta-row{margin-top:2rem}
  .cta-row .btn-row{width:100%}

  /* contact band + footer */
  .band{padding:44px 20px;border-radius:26px}
  .band .btn-row{flex-direction:column;align-items:stretch}
  footer{padding:36px 0 28px}
  .foot ul{flex-wrap:wrap;gap:.6rem 1.2rem}
}

@media (max-width:380px){
  .wrap{width:calc(100% - 28px)}
  .btn{padding:.8rem 1.3rem}
  .bubble{font-size:.7rem}
}

@media (max-width:720px){.btn-line{border-color:#ffc6d3;box-shadow:inset 0 0 0 1px #ffc6d3}}
@media (max-width:720px){.bk-body:has(.bk-embed) .bk-chips{display:none}.bk-embed{height:max(520px,calc(100dvh - 290px))}}

/* final touch-device polish */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,.step,.bk-opt,.vt{-webkit-tap-highlight-color:transparent}
.bk-box{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}
@media (max-width:720px){.bk-box{max-height:92vh;max-height:92dvh}}
@media (min-width:721px) and (max-width:960px){
  .road-art{max-width:560px;margin-inline:auto;width:100%}
  .road-art .chip{right:8px}
  .steps{max-width:640px;margin-inline:auto}
  .vp:not(.h){max-width:460px}
}

/* Calendly step: never hide behind a load event; backup link */
.bk-alt{font-size:.75rem;color:var(--muted);text-align:center;margin:.4rem 0 .8rem}
.bk-alt a{color:var(--green-d);font-weight:500;text-decoration:underline}
@media (max-width:720px){
  .bk-body:has(.bk-embed) .bk-hint{display:none}
  .bk-body:has(.bk-embed) .bk-q{font-size:1.35rem;margin-bottom:.8rem}
  .bk-body:has(.bk-embed){padding-top:18px}
  .bk-embed{height:max(480px,calc(100dvh - 300px))}
}

/* decorative glows must never block clicks on the buttons above them */
.band::before,.band::after,.hero::before,.svc-main::before,.glow{pointer-events:none}
.band>*{position:relative;z-index:1}
.band::before,.band::after{z-index:0}

/* =====================================================
   Live reels strip (autoplaying phone screens)
   ===================================================== */
#reels{padding-top:70px;padding-bottom:50px}
.reels-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;align-items:start}
.reels-row>.rv:nth-child(even){margin-top:34px}
.reel{display:block}
.phone{position:relative;aspect-ratio:9/16;border-radius:34px;padding:7px;background:#241a1e;box-shadow:0 44px 60px -34px rgba(60,10,30,.6),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.phone::before{content:"";position:absolute;top:13px;left:50%;width:22%;height:12px;margin-left:-11%;border-radius:8px;background:#0e0a0c;z-index:6}
.reel-screen{position:absolute;inset:7px;border-radius:28px;overflow:hidden;background:#111;transform:translateZ(0)}
.reel .sc{position:absolute;inset:0;overflow:hidden}
.reel .sc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.reel[data-theme="pink"] .sc{background:linear-gradient(165deg,#ffd0da,#ff4f7b 55%,#cf0b3c)}
.reel[data-theme="ink"] .sc{background:linear-gradient(165deg,#5a3743,#2a1f23 58%,#ff154e 140%)}
.reel[data-theme="peach"] .sc{background:linear-gradient(165deg,#f8e6d9,#f2b992 55%,#e58b63)}
.reel[data-theme="rose"] .sc{background:linear-gradient(165deg,#ffe3ea,#ff9db5 55%,#ff5a80)}
.reel[data-theme="ink"] .sc .sub::before,.reel[data-theme="ink"] .sc .sub::after{background:rgba(255,255,255,.16)}
.reel .sc .sub{width:56%;height:62%;transform:translateX(-50%) scale(var(--z,1));transform-origin:50% 100%;transition:transform .7s var(--ease)}
.reel[data-shape="bottle"] .sc .sub{width:34%;height:52%;bottom:16%}
.reel[data-shape="bottle"] .sc .sub::before{left:50%;top:0;width:40%;aspect-ratio:auto;height:16%;border-radius:6px 6px 2px 2px;background:rgba(44,64,68,.85);background:rgba(60,30,40,.85)}
.reel[data-shape="bottle"] .sc .sub::after{top:14%;left:0;right:0;bottom:0;border-radius:18px 18px 12px 12px;background:rgba(60,30,40,.85)}
.reel .sc{filter:hue-rotate(var(--hr,0deg));transition:filter .9s}
.reel .hook{top:10%;font-size:.78rem}
.reel .hook:empty,.reel .cap2:empty{display:none}
.reel .cap2{font-size:1rem;bottom:22%;padding:0 9%}
.reel .sticker{top:22%;right:12px}
.reel .bar{height:4px;bottom:0;background:#fff}
.reel .pop{animation:pop .5s var(--ease)}
.reel-ui{position:absolute;inset:0;z-index:4;pointer-events:none;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.ru-top{position:absolute;top:30px;left:0;right:0;text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.02em}
.ru-side{position:absolute;right:10px;bottom:74px;display:grid;gap:.75rem}
.ru-side i{font-style:normal;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--green);display:grid;place-items:center;font-size:.8rem;text-shadow:none}
.ru-user{position:absolute;left:12px;bottom:16px;right:56px;display:grid;line-height:1.25}
.ru-user b{font-size:.74rem}
.ru-user span{font-size:.62rem;opacity:.9}
.reel-snd{position:absolute;top:26px;right:12px;z-index:7;width:34px;height:34px;border-radius:50%;border:0;background:rgba(20,10,14,.55);color:#fff;font-size:.85rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.reel.has-video .reel-ui{display:none}
.reel-meta{display:grid;gap:.1rem;padding:16px 4px 0;text-align:left}
.reel-meta b{font-size:.86rem;font-weight:500}
.reel-meta span{font-size:.74rem;color:var(--muted)}

@media (max-width:960px) and (min-width:721px){
  .reels-row{grid-template-columns:repeat(2,1fr);max-width:520px;margin-inline:auto}
  .reels-row>.rv:nth-child(even){margin-top:0}
}
@media (max-width:720px){
  #reels{padding-top:50px;padding-bottom:30px}
  .reels-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:6px 18px 18px;scrollbar-width:none}
  .reels-row::-webkit-scrollbar{display:none}
  .reels-row>.rv{flex:0 0 66%;max-width:270px;scroll-snap-align:center}
  .reels-row>.rv:nth-child(even){margin-top:0}
  .reels-row>.rv .phone{transform:none!important}
}
@media (prefers-reduced-motion:reduce){.reel .sc .sub{transition:none}}
.reel .hook{top:14%}
.reel-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.reel.has-yt .sc{filter:none}
.yt-fb{position:absolute;inset:0;display:grid;place-items:end center;padding:18px;background:#111 center/cover no-repeat;text-decoration:none}
.yt-fb span{background:#fff;color:var(--ink);font:600 .78rem var(--sans);padding:.6rem 1rem;border-radius:999px;box-shadow:0 12px 20px -10px rgba(0,0,0,.5)}

/* =====================================================
   Pricing — 4 compact plans + Clip the mascot
   ===================================================== */
.pricing{background:var(--bg);padding-top:40px}
.pm-top{display:grid;grid-template-columns:1fr 1.1fr;gap:2rem;align-items:center;margin-bottom:2.2rem}
.pm-stage{display:flex;align-items:center;justify-content:center;gap:.4rem;background:var(--tint);border-radius:32px;padding:22px 26px 14px;position:relative;overflow:hidden}
.pm-stage::before{content:"";position:absolute;width:260px;height:260px;right:-60px;top:-90px;border-radius:50%;background:radial-gradient(circle,#fff,transparent 70%)}
.pm-bubble{position:relative;flex:1;background:#fff;border:1.5px solid var(--ink);border-radius:20px;padding:.95rem 1.1rem;font-size:.86rem;line-height:1.5;color:var(--ink);box-shadow:0 14px 24px -16px rgba(86,64,69,.5);min-height:5.6rem;display:flex;align-items:center}
.pm-bubble::after{content:"";position:absolute;right:-9px;top:50%;width:16px;height:16px;background:#fff;border:1.5px solid var(--ink);border-left:0;border-bottom:0;transform:translateY(-50%) rotate(45deg)}
.pm-bubble span{display:block}
.pm-bubble.say span{animation:pmSay .45s var(--ease)}
@keyframes pmSay{from{opacity:0;transform:translateY(6px) scale(.97)}}
.pm-mascot{width:190px;flex:none;position:relative;overflow:visible}

.pm-shadow{fill:rgba(70,20,40,.16);transform-box:fill-box;transform-origin:center;animation:pmSh 2.6s ease-in-out infinite}
@keyframes pmSh{50%{transform:scaleX(.9);opacity:.7}}
.pm-bob{animation:pmBob 2.6s ease-in-out infinite}
@keyframes pmBob{50%{transform:translateY(-5px)}}
.pm-leg,.pm-arm{stroke:var(--ink);stroke-width:6;stroke-linecap:round;fill:none}
.pm-foot{fill:var(--ink)}
.pm-body{fill:#fff;stroke:var(--ink);stroke-width:4}
.pm-ck{fill:var(--ink)}
.pm-cs{fill:var(--green)}
.pm-clap{transform-box:fill-box;transform-origin:0% 100%;animation:pmClap 3.4s ease-in-out infinite}
@keyframes pmClap{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-24deg)}86%{transform:rotate(0)}}
.pm-eye{fill:var(--ink);transform-box:fill-box;transform-origin:center;animation:pmBlink 4.2s infinite}
@keyframes pmBlink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.pm-cheek{fill:var(--green);opacity:.3}
.pm-mouth{stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;fill:none}
.pm-wave{transform-origin:100px 62px;animation:pmWave 1.6s ease-in-out infinite}
@keyframes pmWave{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(9deg)}}
.pm-coin circle:first-child{fill:#ffd35c;stroke:var(--ink);stroke-width:3.5}
.pm-coin .pm-rim{fill:none;stroke:#e0a91f;stroke-width:2}
.pm-coin text{font:700 17px var(--sans);fill:var(--ink)}
.pm-mascot.talk .pm-mouth{animation:pmTalk .3s ease-in-out 4}
@keyframes pmTalk{50%{transform:scaleY(1.7)}}
.pm-mouth{transform-box:fill-box;transform-origin:center top}

.pm-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:.9rem}
.pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pm-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;padding:12px 12px 8px;outline:0;overflow:hidden;
  box-shadow:0 18px 34px -28px rgba(86,64,69,.45);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .4s}
.pm-card::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--green);transform:scaleX(0);transition:transform .6s var(--ease)}
.pm-card:hover,.pm-card:focus-visible{transform:translateY(-8px);border-color:var(--green-soft);box-shadow:0 34px 46px -28px rgba(217,13,63,.35)}
.pm-card:hover::after,.pm-card:focus-visible::after{transform:scaleX(1)}

.pm-vis{height:168px;border-radius:20px;background:radial-gradient(circle at 20% 0%,#fff 0,transparent 60%),linear-gradient(160deg,#faf3f5,var(--tint));display:grid;place-items:center;padding:18px;position:relative;overflow:hidden}
.pm-vis::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(217,13,63,.13) 1px,transparent 1.4px) 0 0/14px 14px;-webkit-mask:linear-gradient(#000,transparent 85%);mask:linear-gradient(#000,transparent 85%)}
.pm-vis>*{position:relative}
.pm-card{display:flex;flex-direction:column}
.pm-txt{position:relative;padding:18px 12px 16px;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.pm-num{position:absolute;right:12px;top:8px;font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--tint-2);transition:color .4s}
.pm-card:hover .pm-num,.pm-card:focus-visible .pm-num{color:var(--green-soft)}
.pm-txt h3{font-size:1.45rem}
.pm-txt p{margin-top:.4rem;font-size:.86rem;color:var(--muted);line-height:1.5;max-width:26ch}
.pm-btn{margin-top:auto;width:100%}
.pm-cta{display:flex;justify-content:center;margin-top:2.4rem}
.pm-txt p{margin-bottom:1.2rem}
.pm-card:hover .pm-btn,.pm-card:focus-within .pm-btn{background:var(--green);border-color:var(--green);color:#fff}

/* 01 volume: grid of mini videos that light up one by one */
.pm-tiles{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;width:100%}
.pm-tiles i{aspect-ratio:9/14;border-radius:6px;background:#fff;border:1px solid var(--line);position:relative;animation:pmTile 4s ease-in-out infinite;animation-delay:calc(var(--n)*.15s)}
.pm-tiles i::after{content:"";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;background:var(--tint-2);clip-path:polygon(15% 0,100% 50%,15% 100%);transform:translate(-40%,-50%);transition:background .3s;animation:pmPlay 4s ease-in-out infinite;animation-delay:inherit}
.pm-tiles i:nth-child(1){--n:0}.pm-tiles i:nth-child(2){--n:1}.pm-tiles i:nth-child(3){--n:2}.pm-tiles i:nth-child(4){--n:3}.pm-tiles i:nth-child(5){--n:4}.pm-tiles i:nth-child(6){--n:5}.pm-tiles i:nth-child(7){--n:6}.pm-tiles i:nth-child(8){--n:7}
.pm-tiles i:nth-child(9){--n:8}.pm-tiles i:nth-child(10){--n:9}.pm-tiles i:nth-child(11){--n:10}.pm-tiles i:nth-child(12){--n:11}.pm-tiles i:nth-child(13){--n:12}.pm-tiles i:nth-child(14){--n:13}.pm-tiles i:nth-child(15){--n:14}.pm-tiles i:nth-child(16){--n:15}
@keyframes pmTile{0%,55%,100%{background:#fff;border-color:var(--line);transform:none}12%,30%{background:var(--green);border-color:var(--green);transform:translateY(-4px);box-shadow:0 10px 14px -8px var(--green-d)}}
@keyframes pmPlay{0%,55%,100%{background:var(--tint-2)}12%,30%{background:#fff}}

/* 02 turnaround: standard vs same-day */
.pm-time{width:100%;display:grid;gap:16px}
.pm-seg{position:relative;display:flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;font-size:.76rem;font-weight:500;box-shadow:0 10px 18px -14px rgba(86,64,69,.5)}
.pm-seg span{flex:1;text-align:center;padding:.5rem 0;position:relative;z-index:1;color:#fff;animation:pmC1 6s ease-in-out infinite}
.pm-seg span+span{color:var(--ink);animation-name:pmC2}
.pm-seg i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--green);animation:pmSeg 6s ease-in-out infinite}
@keyframes pmSeg{0%,44%{left:4px}52%,96%{left:50%}100%{left:4px}}
@keyframes pmC1{0%,42%{color:#fff}52%,94%{color:var(--ink)}100%{color:#fff}}
@keyframes pmC2{0%,42%{color:var(--ink)}52%,94%{color:#fff}100%{color:var(--ink)}}
.pm-track{height:8px;border-radius:8px;background:#fff;border:1px solid var(--line);overflow:hidden}
.pm-track b{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#ff7a99,var(--green));animation:pmBar 6s ease-in-out infinite}
@keyframes pmBar{0%{width:0}44%{width:100%}49%{width:100%}50%{width:0}62%{width:100%}94%{width:100%}100%{width:0}}

/* 03 add-ons: optional toggles */
.pm-opts{width:100%;display:grid;gap:10px}
.pm-opt{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;font-size:.8rem;font-weight:500;box-shadow:0 10px 18px -14px rgba(86,64,69,.5)}
.pm-opt em{width:34px;height:20px;border-radius:20px;background:var(--tint-2);position:relative;flex:none;animation:pmTg 5s ease-in-out infinite}
.pm-opt em::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);animation:pmKn 5s ease-in-out infinite}
.pm-opt.d2 em,.pm-opt.d2 em::after{animation-delay:1.4s}
@keyframes pmTg{0%,15%,80%,100%{background:var(--tint-2)}25%,70%{background:var(--green)}}
@keyframes pmKn{0%,15%,80%,100%{transform:none}25%,70%{transform:translateX(14px)}}

@media (max-width:960px){
  .pm-top{grid-template-columns:1fr}
}
@media (max-width:720px){
  .pm-stage{flex-direction:column;padding:22px 18px 10px}
  .pm-bubble{min-height:0;width:100%}
  .pm-bubble::after{right:auto;left:50%;top:auto;bottom:-9px;transform:translateX(-50%) rotate(135deg)}
  .pm-mascot{width:160px}
}
@media (max-width:720px){.pm-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pm-bob,.pm-wave,.pm-clap,.pm-eye,.pm-shadow,.pm-tiles i,.pm-tiles i::after,.pm-seg span,.pm-seg i,.pm-track b,.pm-opt em,.pm-opt em::after,.pm-bubble.say span,.pm-mascot.talk .pm-mouth{animation:none}}

/* Founders */
.founders{padding-top:70px}
.fd-head{text-align:center;margin:0 auto 2.6rem}
.fd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,340px));gap:24px;justify-content:center}
.fd-card{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:#e6e6e8;isolation:isolate}
.fd-card>svg,.fd-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.fd-card:hover>svg,.fd-card:hover>img{transform:scale(1.05)}
.fd-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.45) 55%,rgba(0,0,0,.25));opacity:.7;transition:opacity .5s var(--ease)}
.fd-info{position:absolute;inset:auto 0 0 0;z-index:2;padding:28px 26px;color:#fff}
.fd-card:hover::after,.fd-card:focus-within::after{opacity:1}
.fd-info h3{font-size:1.7rem}
.fd-info p{color:rgba(255,255,255,.75);font-size:.88rem;margin:.2rem 0 1.1rem}
.fd-ig{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:.45rem 1rem;transition:background .3s,border-color .3s}
.fd-ig svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.fd-ig:hover{background:var(--green);border-color:var(--green)}
@media (max-width:720px){.fd-grid{grid-template-columns:minmax(0,360px)}}

/* real YouTube raw-vs-edited embed (ex1) */
.vpy-in{background:#ffffff;border:1px solid var(--line);border-radius:30px;padding:14px;box-shadow:0 50px 70px -44px rgba(80,50,57,.55)}
.vpy-panes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vpy-pane{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:9/16;background:#000}
.vpy-pane .lab{top:10px;left:10px}
.vpy-pane.edited .lab{background:var(--green)}
.vpy-embed{position:absolute;inset:0}
.vpy-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:520px){.vpy-panes{grid-template-columns:1fr}}

/* footer instagram handles */
.foot-social{display:flex;gap:1.2rem;flex-wrap:wrap}
.foot-social a{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:500;color:var(--ink);transition:color .3s}
.foot-social a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.foot-social a:hover{color:var(--green-d)}
@media (max-width:720px){.foot-social{order:2}}