/* Generated from src/styles.src.css by src/mkcss.py. Edit the source, not this file. */
/* =========================================================
   YummyAds, creative studio site (layout modelled on a light,
   full-width performance-creative page).
   Written in design pixels: calc(112 * var(--u)) = 112 px of the 1440 design
   (390 design inside the phone query). See src/mkcss.py.
   ========================================================= */

:root{
  --u:min(calc(100vw / 1440), 1px);
  --ink:#14171f; --ink-2:#1d2130; --paper:#faf8f4; --sand:#f0ece5;
  --coral:#ff5640; --coral-d:#d63a25; --coral-dd:#bd301c; --accent:#e8442d; --accent-d:#ff7a66;
  --peach:#ffe5dd; --amber:#ffc670; --violet:#e3defa; --mint:#7fd6a4;
  --muted:rgba(20,23,31,.6); --line:rgba(20,23,31,.14);
  --serif:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.3,.7,.2,1);
  --gx:calc(24 * var(--u)); --r:calc(14 * var(--u));
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{overflow-x:hidden; overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:calc(24 * var(--u)); -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:400; font-size:calc(16 * var(--u)); line-height:calc(24 * var(--u)); letter-spacing:calc(-0.1 * var(--u)); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0; padding:0}
ul,ol{list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; letter-spacing:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; text-align:inherit; -webkit-tap-highlight-color:transparent}
em{font-style:normal; color:var(--accent)}
i{font-style:normal}
svg{display:block}
img,video{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--coral); outline-offset:3px}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
section,footer{position:relative}
.wrap{width:100%; max-width:calc(1440 * var(--u)); margin-inline:auto; padding-left:max(var(--gx), env(safe-area-inset-left, 0px)); padding-right:max(var(--gx), env(safe-area-inset-right, 0px))}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:700; text-transform:uppercase; text-wrap:balance}
h1{font-size:calc(74 * var(--u)); line-height:calc(68 * var(--u)); letter-spacing:calc(-3.2 * var(--u))}
.h2{font-size:calc(48 * var(--u)); line-height:calc(50 * var(--u)); letter-spacing:calc(-1.9 * var(--u))}
h3{font-size:calc(24 * var(--u)); line-height:calc(30 * var(--u)); letter-spacing:calc(-0.6 * var(--u))}

/* ---------- small parts ---------- */
.tag{display:inline-flex; align-items:center; flex:none; gap:calc(8 * var(--u)); height:calc(30 * var(--u)); padding:0 calc(13 * var(--u)) 0 calc(11 * var(--u)); border-radius:calc(100 * var(--u)); background:var(--peach); color:var(--ink); font-size:calc(12 * var(--u)); font-weight:600; line-height:calc(18 * var(--u)); letter-spacing:calc(0.8 * var(--u)); text-transform:uppercase; white-space:nowrap}
.tag::before{content:""; flex:none; width:calc(6 * var(--u)); height:calc(6 * var(--u)); border-radius:50%; background:var(--coral)}
.tag-dark{background:rgba(255,255,255,.12); color:#fff}
.num{flex:none; display:grid; place-items:center; width:calc(38 * var(--u)); height:calc(38 * var(--u)); border-radius:50%; background:var(--coral-d); color:#fff; font-family:var(--serif); font-weight:700; font-size:calc(16 * var(--u)); line-height:calc(20 * var(--u))}

.btn{display:inline-flex; align-items:center; justify-content:center; flex:none; gap:calc(8 * var(--u)); height:calc(46 * var(--u)); padding:0 calc(22 * var(--u)); border-radius:calc(100 * var(--u)); font-family:var(--serif); font-weight:700; font-size:calc(15.5 * var(--u)); line-height:calc(20 * var(--u)); letter-spacing:calc(-0.1 * var(--u)); white-space:nowrap; transition:background-color .25s, transform .2s}
.btn-go{gap:calc(12 * var(--u)); padding:0 calc(7 * var(--u)) 0 calc(20 * var(--u))}
.btn-go i{display:grid; place-items:center; width:calc(32 * var(--u)); height:calc(32 * var(--u)); border-radius:50%; background:#fff; color:var(--ink); transition:transform .25s var(--ease)}
.btn-go i svg{width:calc(16 * var(--u)); height:calc(16 * var(--u))}
.btn-go:hover i{transform:rotate(-45deg)}
.btn-lg{height:calc(54 * var(--u)); padding-left:calc(26 * var(--u)); font-size:calc(17 * var(--u))}
.btn-lg i{width:calc(40 * var(--u)); height:calc(40 * var(--u))}
.btn-primary{background:var(--coral-d); color:#fff}
.btn-primary:hover{background:var(--coral-dd)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#2b3040}
.btn-soft{background:var(--sand); color:var(--ink)}
.btn-soft:hover{background:#e6e0d6}
.btn-soft i{background:var(--coral-d); color:#fff}

.head{display:flex; flex-direction:column; align-items:flex-start; gap:calc(22 * var(--u))}
.head--center{align-items:center; text-align:center}

.blogo{width:auto; height:calc(34 * var(--u)); filter:brightness(0)}
.blogo--canva{height:calc(100 * var(--u))}
.blogo--pulsetto{height:calc(66 * var(--u))}
.blogo--sr{height:calc(26 * var(--u))}
.blogo-text{font-family:Georgia, "Times New Roman", serif; font-size:calc(26 * var(--u)); line-height:calc(34 * var(--u)); letter-spacing:calc(6 * var(--u))}

/* ---------- moving strips ---------- */
.tk{display:flex; overflow:hidden; overflow:clip; --tg:calc(16 * var(--u))}
.tk-track{display:flex; flex:none; align-items:center; width:max-content; animation:tk-x var(--dur, 60s) linear infinite; animation-play-state:paused; will-change:transform}
.tk-track > *{flex:none; margin-right:var(--tg)}
.tk.is-live .tk-track{animation-play-state:running}
.tk.rev .tk-track{animation-direction:reverse}
.tk-v{flex-direction:column}
.tk-v .tk-track{flex-direction:column; align-items:stretch; width:auto; height:max-content; animation-name:tk-y}
.tk-v .tk-track > *{margin-right:0; margin-bottom:var(--tg)}
@keyframes tk-x{to{transform:translate3d(-50%, 0, 0)}}
@keyframes tk-y{to{transform:translate3d(0, -50%, 0)}}

/* ---------- video boxes ---------- */
.vid{position:relative; overflow:hidden; background:#262a36; isolation:isolate}
.vid video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ---------- header ---------- */
.nav{position:absolute; top:0; left:0; right:0; z-index:40}
.nav-in{display:flex; align-items:flex-start; justify-content:space-between; gap:calc(16 * var(--u)); max-width:calc(1440 * var(--u)); margin-inline:auto; padding:calc(20 * var(--u)) max(var(--gx), env(safe-area-inset-right, 0px)) 0 max(var(--gx), env(safe-area-inset-left, 0px))}
.nav-box{width:calc(500 * var(--u)); border-radius:calc(12 * var(--u)); background:var(--sand)}
.nav-top{display:flex; align-items:center; height:calc(52 * var(--u)); padding:0 calc(6 * var(--u)) 0 calc(14 * var(--u))}
.logo{flex:none; display:inline-flex; align-items:center; gap:calc(8 * var(--u)); font-family:var(--serif); font-weight:800; font-size:calc(22 * var(--u)); line-height:calc(26 * var(--u)); letter-spacing:calc(-1 * var(--u)); white-space:nowrap}
.logo-mark{position:relative; flex:none; width:calc(25 * var(--u)); height:calc(25 * var(--u)); border-radius:calc(8 * var(--u)); background:var(--coral)}
.logo-mark::after{content:""; position:absolute; left:39%; top:27%; width:36%; height:46%; background:#fff; clip-path:polygon(0 0, 100% 50%, 0 100%)}
.nav-tag{margin-left:calc(12 * var(--u)); padding-left:calc(12 * var(--u)); box-shadow:inset 1px 0 0 var(--ink); font-size:calc(11 * var(--u)); font-weight:500; line-height:calc(14 * var(--u)); letter-spacing:calc(0.5 * var(--u)); text-transform:uppercase; white-space:nowrap}
.menu-btn{display:grid; place-items:center; width:calc(40 * var(--u)); height:calc(40 * var(--u)); margin-left:auto; border-radius:calc(8 * var(--u)); transition:background-color .2s}
.menu-btn:hover{background:rgba(20,23,31,.07)}
.menu-btn svg{width:calc(24 * var(--u)); height:calc(24 * var(--u))}
.menu-btn .ic-close{display:none; width:calc(20 * var(--u)); height:calc(20 * var(--u))}
.nav.is-open .ic-open{display:none}
.nav.is-open .ic-close{display:block}
.nav-menu{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease)}
.nav-menu > ul{min-height:0; overflow:hidden; padding:0 calc(16 * var(--u)); visibility:hidden; transition:visibility 0s .35s}
.nav.is-open .nav-menu{grid-template-rows:1fr}
.nav.is-open .nav-menu > ul{visibility:visible; transition-delay:0s}
.nav-menu a{display:block; padding:calc(5 * var(--u)) 0; font-family:var(--serif); font-weight:600; font-size:calc(22 * var(--u)); line-height:calc(28 * var(--u)); letter-spacing:calc(-0.4 * var(--u)); transition:color .2s}
.nav-menu a:hover{color:var(--accent)}
.nav-menu li:first-child a{padding-top:calc(12 * var(--u))}
.nav-menu li:last-child a{padding-bottom:calc(20 * var(--u))}

/* ---------- hero ---------- */
.hero{padding-top:calc(160 * var(--u))}
.hero-in{display:grid; grid-template-columns:calc(580 * var(--u)) calc(780 * var(--u)); justify-content:space-between}
.hero-copy{display:flex; flex-direction:column; align-items:flex-start; min-height:calc(580 * var(--u))}
.hero-lead{width:calc(450 * var(--u)); margin-top:calc(36 * var(--u)); font-size:calc(20 * var(--u)); line-height:calc(27 * var(--u)); letter-spacing:calc(-0.4 * var(--u))}
.hero-copy > .btn{margin-top:calc(36 * var(--u))}
.hero-trust{align-self:stretch; margin-top:auto}
.hero-trust p{margin-bottom:calc(12 * var(--u)); font-size:calc(15 * var(--u)); font-weight:500; line-height:calc(21 * var(--u))}
.hero-logos{--tg:calc(46 * var(--u)); width:calc(540 * var(--u)); height:calc(44 * var(--u)); -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 10%, #000 72%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 10%, #000 72%, rgba(0,0,0,0) 100%)}
.hero-logos .blogo{height:calc(24 * var(--u)); opacity:.62}
.hero-logos .blogo--canva{height:calc(72 * var(--u))}
.hero-logos .blogo--pulsetto{height:calc(48 * var(--u))}
.hero-logos .blogo--sr{height:calc(19 * var(--u))}
.hero-logos .blogo-text{font-size:calc(18 * var(--u)); line-height:calc(24 * var(--u)); letter-spacing:calc(4 * var(--u)); opacity:.55}
.hero-panel{display:flex; gap:calc(10 * var(--u)); height:calc(580 * var(--u)); padding:calc(8 * var(--u)); border-radius:calc(16 * var(--u)); background:var(--sand); overflow:hidden}
.hero-panel .tk{flex:1 1 0; min-width:0; height:100%; border-radius:calc(10 * var(--u)); --tg:calc(10 * var(--u))}
.hw{width:100%; border-radius:calc(10 * var(--u)); overflow:hidden; background:#262a36}
.hw img{width:100%; height:100%; object-fit:cover}
.hw--sq{aspect-ratio:1 / 1}
.hw--45{aspect-ratio:4 / 5}
.hw--916{aspect-ratio:9 / 16}

/* ---------- statement ---------- */
.stmt{padding-top:calc(210 * var(--u)); text-align:center}
.stmt-text{width:calc(1000 * var(--u)); max-width:100%; margin:calc(40 * var(--u)) auto 0; font-family:var(--serif); font-weight:600; font-size:calc(56 * var(--u)); line-height:calc(61 * var(--u)); letter-spacing:calc(-2.1 * var(--u))}
.js .stmt-text .w{opacity:.16; transition:opacity .35s}
.js .stmt-text .w.is-on{opacity:1}

/* ---------- brands ---------- */
.clients{padding:calc(150 * var(--u)) 0 calc(170 * var(--u)); text-align:center}
.clients-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); width:calc(800 * var(--u)); max-width:100%; margin:calc(36 * var(--u)) auto 0}
.clients-grid > div{display:grid; place-items:center; height:calc(88 * var(--u))}
.clients-grid .blogo,.clients-grid .blogo-text{opacity:.9}

/* ---------- method ---------- */
.eng{padding-bottom:calc(170 * var(--u))}
.eng-in{display:grid; grid-template-columns:calc(577 * var(--u)) calc(720 * var(--u)); justify-content:space-between; align-items:center}
.eng-panel{position:relative; height:calc(577 * var(--u)); border-radius:calc(16 * var(--u)); background:radial-gradient(80% 80% at 100% 0%, rgba(255,86,64,.34) 0%, rgba(255,86,64,0) 70%), var(--ink); color:#fff; overflow:hidden}
.eng-vis{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(24 * var(--u)); padding:calc(84 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u)); opacity:0; visibility:hidden; transition:opacity .45s, visibility 0s .45s}
.eng-vis.is-on{opacity:1; visibility:visible; transition-delay:0s}
.ev-cap{position:absolute; left:calc(28 * var(--u)); top:calc(26 * var(--u)); display:flex; align-items:center; gap:calc(12 * var(--u)); color:rgba(255,255,255,.8); font-size:calc(13 * var(--u)); font-weight:500; line-height:calc(18 * var(--u)); letter-spacing:calc(1.1 * var(--u)); text-transform:uppercase}
.ev-cap b{display:inline-flex; align-items:center; height:calc(28 * var(--u)); padding:0 calc(11 * var(--u)); border-radius:calc(100 * var(--u)); background:var(--coral-d); color:#fff; font-weight:600; letter-spacing:calc(0.6 * var(--u))}
.ev-shot{padding:calc(10 * var(--u)); border-radius:calc(12 * var(--u)); background:#fff; box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-20 * var(--u)) rgba(0,0,0,.7)}
.ev-shot img{width:100%; height:auto; border-radius:calc(6 * var(--u))}
.ev-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:calc(8 * var(--u))}
.ev-chips span{display:inline-flex; align-items:center; height:calc(32 * var(--u)); padding:0 calc(14 * var(--u)); border-radius:calc(100 * var(--u)); background:rgba(255,255,255,.12); font-size:calc(13.5 * var(--u)); font-weight:500; line-height:calc(18 * var(--u))}
.ev-card{width:calc(410 * var(--u)); padding:calc(30 * var(--u)) calc(30 * var(--u)) calc(18 * var(--u)); border-radius:calc(16 * var(--u)); background:#fff; color:var(--ink); box-shadow:0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-20 * var(--u)) rgba(0,0,0,.7)}
.ev-card > b{display:block; font-family:var(--serif); font-weight:700; font-size:calc(28 * var(--u)); line-height:calc(32 * var(--u)); letter-spacing:calc(-0.7 * var(--u))}
.ev-card dl{display:flex; flex-direction:column; margin-top:calc(20 * var(--u))}
.ev-card dl div{padding:calc(13 * var(--u)) 0; box-shadow:inset 0 1px 0 var(--line)}
.ev-card dt{color:var(--muted); font-size:calc(11.5 * var(--u)); font-weight:600; line-height:calc(16 * var(--u)); letter-spacing:calc(1.2 * var(--u)); text-transform:uppercase}
.ev-card dd{margin-top:calc(3 * var(--u)); font-size:calc(17 * var(--u)); font-weight:500; line-height:calc(23 * var(--u)); letter-spacing:calc(-0.2 * var(--u))}
.ev-hooks{position:relative; width:calc(440 * var(--u)); height:calc(350 * var(--u))}
.hook{position:absolute; top:calc(44 * var(--u)); display:block; width:calc(158 * var(--u)); aspect-ratio:9 / 16; border-radius:calc(12 * var(--u)); overflow:hidden; background:#262a36; box-shadow:0 calc(24 * var(--u)) calc(46 * var(--u)) calc(-16 * var(--u)) rgba(0,0,0,.7)}
.hook b,.bt b{position:absolute; left:calc(8 * var(--u)); z-index:2; padding:calc(3 * var(--u)) calc(8 * var(--u)); border-radius:calc(6 * var(--u)); background:#fff; color:var(--ink); font-size:calc(11.5 * var(--u)); font-weight:600; line-height:calc(16 * var(--u))}
.hook b{top:calc(8 * var(--u))}
.hook--a{left:0; transform:rotate(-7deg)}
.hook--b{left:50%; top:calc(18 * var(--u)); z-index:1; margin-left:calc(-79 * var(--u))}
.hook--c{right:0; transform:rotate(7deg)}
.ev-batch{display:grid; grid-template-columns:repeat(2, calc(186 * var(--u))); gap:calc(12 * var(--u))}
.bt{position:relative; display:block; height:calc(206 * var(--u)); border-radius:calc(12 * var(--u)); overflow:hidden; background:#262a36; box-shadow:0 calc(20 * var(--u)) calc(40 * var(--u)) calc(-18 * var(--u)) rgba(0,0,0,.7)}
.bt img{width:100%; height:100%; object-fit:cover}
.bt b{bottom:calc(8 * var(--u))}
.ev-review{display:flex; flex-direction:column; gap:calc(10 * var(--u)); width:calc(390 * var(--u))}
.ev-review li{display:flex; align-items:center; gap:calc(10 * var(--u)); height:calc(50 * var(--u)); padding:0 calc(14 * var(--u)) 0 calc(16 * var(--u)); border-radius:calc(12 * var(--u)); background:#fff; color:var(--ink); font-size:calc(15 * var(--u)); font-weight:500; line-height:calc(20 * var(--u))}
.ev-review svg{flex:none; width:calc(16 * var(--u)); height:calc(16 * var(--u))}
.ev-review i{margin-left:auto; padding:calc(3 * var(--u)) calc(9 * var(--u)); border-radius:calc(6 * var(--u)); font-size:calc(12 * var(--u)); font-weight:600; line-height:calc(18 * var(--u))}
.is-keep svg{color:#1f9d5b} .is-keep i{background:#dff5e8; color:#157a45}
.is-drop svg{color:var(--coral-d)} .is-drop i{background:var(--peach); color:var(--coral-dd)} .is-drop span{opacity:.55; text-decoration:line-through}
.is-next i{background:var(--ink); color:#fff}
.eng-copy{display:flex; flex-direction:column; align-items:flex-start}
.eng-copy .h2{width:calc(640 * var(--u)); max-width:100%; margin-top:calc(22 * var(--u))}
.eng-lead{width:calc(520 * var(--u)); max-width:100%; margin:calc(20 * var(--u)) 0 calc(40 * var(--u)); color:var(--muted); font-size:calc(18 * var(--u)); line-height:calc(25 * var(--u)); letter-spacing:calc(-0.3 * var(--u))}
.eacc-list{align-self:stretch; border-bottom:1px solid var(--ink)}
.eacc{position:relative; border-top:1px solid var(--ink)}
.eacc-bar{position:absolute; left:0; right:0; top:-1px; height:3px; background:var(--coral-d); transform:scaleX(0); transform-origin:0 50%}
.eacc.is-open .eacc-bar{transform:scaleX(1)}
.eng.is-auto .eacc.is-open .eacc-bar{animation:eacc-fill 5.5s linear both}
.eng.is-auto:not(.is-live) .eacc.is-open .eacc-bar{animation-play-state:paused}
@keyframes eacc-fill{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.eacc-head{display:flex; align-items:center; gap:calc(22 * var(--u)); width:100%; height:calc(72 * var(--u))}
.eacc-title{font-family:var(--serif); font-weight:700; font-size:calc(24 * var(--u)); line-height:calc(30 * var(--u)); letter-spacing:calc(-0.6 * var(--u)); text-transform:uppercase}
.eacc-head svg{flex:none; width:calc(20 * var(--u)); height:calc(20 * var(--u)); margin-left:auto}
.eacc-head .ic-minus{display:none}
.eacc.is-open .ic-plus{display:none}
.eacc.is-open .ic-minus{display:block}
.eacc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease)}
.eacc-body > div{min-height:0; overflow:hidden; visibility:hidden; transition:visibility 0s .4s}
.eacc.is-open .eacc-body{grid-template-rows:1fr}
.eacc.is-open .eacc-body > div{visibility:visible; transition-delay:0s}
.eacc-body p{max-width:calc(660 * var(--u)); min-height:calc(50 * var(--u)); padding:0 0 0 calc(60 * var(--u)); color:#3c4150; font-size:calc(18 * var(--u)); line-height:calc(25 * var(--u)); letter-spacing:calc(-0.3 * var(--u))}
.eacc-body .eacc-get{display:flex; align-items:baseline; gap:calc(12 * var(--u)); min-height:0; padding:calc(12 * var(--u)) 0 calc(28 * var(--u)) calc(60 * var(--u)); color:var(--ink); font-weight:600}
.eacc-get span{flex:none; color:var(--accent); font-size:calc(11.5 * var(--u)); font-weight:700; line-height:calc(16 * var(--u)); letter-spacing:calc(1.3 * var(--u)); text-transform:uppercase}

/* ---------- creatives ---------- */
.exe{padding-bottom:calc(160 * var(--u)); text-align:center}
.exe-title{margin-top:calc(22 * var(--u))}
.rot{--rh:calc(52 * var(--u)); height:var(--rh); overflow:hidden}
.rot-track{display:flex; flex-direction:column; transition:transform .6s var(--ease)}
.rot-track span{display:block; height:var(--rh); color:var(--accent); font-family:var(--serif); font-weight:700; font-size:calc(48 * var(--u)); line-height:var(--rh); letter-spacing:calc(-1.9 * var(--u)); text-transform:uppercase; white-space:nowrap}
.exe-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:calc(16 * var(--u)); margin-top:calc(48 * var(--u))}
.vtile{position:relative; display:block; width:100%; aspect-ratio:337 / 500; border-radius:var(--r); overflow:hidden; background:var(--sand); cursor:pointer}
.vtile--45{aspect-ratio:4 / 5}
.vtile img{width:100%; height:100%; object-fit:cover}
.vtile img,.vtile video{transition:transform .7s var(--ease)}
.vtile:hover img,.vtile:hover video{transform:scale(1.035)}
.vplay{position:absolute; left:50%; top:50%; z-index:2; display:grid; place-items:center; width:calc(56 * var(--u)); height:calc(56 * var(--u)); margin:calc(-28 * var(--u)) 0 0 calc(-28 * var(--u)); border-radius:50%; background:#fff; color:var(--ink); box-shadow:0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.28); transition:transform .25s var(--ease)}
.vplay svg{width:calc(22 * var(--u)); height:calc(22 * var(--u)); margin-left:calc(2 * var(--u))}
.vtile:hover .vplay{transform:scale(1.12)}
.exe-more{margin-top:calc(36 * var(--u))}

/* ---------- results ---------- */
.cases{padding-bottom:calc(110 * var(--u))}
.cases-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:calc(48 * var(--u)) calc(24 * var(--u)); margin-top:calc(64 * var(--u))}
.ccard-media{position:relative; display:block; width:100%; height:calc(400 * var(--u)); border-radius:var(--r); overflow:hidden}
.js .ccard-media{clip-path:inset(16% 0 16% 0 round calc(14 * var(--u))); transition:clip-path 1s var(--ease)}
.js .ccard-media.is-in{clip-path:inset(0 0 0 0 round calc(14 * var(--u)))}
.ccard-media--shot{display:grid; place-items:center; padding:0 calc(72 * var(--u)) calc(44 * var(--u)); background:var(--ink-2); cursor:zoom-in}
.ccard-media--after{background:var(--coral-d)}
.ccard-media--shot img{width:100%; height:auto; padding:calc(8 * var(--u)); border-radius:calc(12 * var(--u)); background:#fff; transition:transform .5s var(--ease)}
.ccard-media--shot:hover img{transform:translateY(calc(-6 * var(--u)))}
.ccard-media video{object-position:var(--vp, 50% 30%)}
.ccard-badge{position:absolute; right:calc(16 * var(--u)); bottom:calc(16 * var(--u)); z-index:2; display:block; min-width:calc(196 * var(--u)); padding:calc(14 * var(--u)) calc(18 * var(--u)) calc(15 * var(--u)); border-radius:calc(8 * var(--u)); background:#0c0e13; color:#fff; text-align:left}
.ccard-badge b{display:block; color:var(--accent-d); font-family:var(--serif); font-weight:700; font-size:calc(30 * var(--u)); line-height:calc(34 * var(--u)); letter-spacing:calc(-0.9 * var(--u))}
.ccard-badge span{display:block; font-size:calc(14 * var(--u)); line-height:calc(20 * var(--u))}
.ccard-row{display:flex; align-items:baseline; justify-content:space-between; gap:calc(16 * var(--u)); margin-top:calc(22 * var(--u))}
.ccard-row span{color:var(--muted); font-size:calc(17 * var(--u)); line-height:calc(24 * var(--u)); letter-spacing:calc(-0.2 * var(--u))}
.ccard-desc{margin-top:calc(18 * var(--u)); padding:calc(22 * var(--u)) calc(18 * var(--u)); border-radius:calc(8 * var(--u)); background:var(--sand); font-size:calc(18 * var(--u)); font-weight:500; line-height:calc(25 * var(--u)); letter-spacing:calc(-0.4 * var(--u))}
.cases-note{margin-top:calc(30 * var(--u)); color:var(--muted); font-size:calc(13 * var(--u)); font-style:italic; line-height:calc(19 * var(--u))}

/* ---------- bar ---------- */
.bar{display:flex; align-items:center; justify-content:space-between; gap:calc(24 * var(--u)); padding:calc(22 * var(--u)) calc(36 * var(--u)); border-radius:calc(10 * var(--u)); background:var(--ink); color:#fff}
.bar h2{font-size:calc(32 * var(--u)); line-height:calc(38 * var(--u)); letter-spacing:calc(-1.1 * var(--u))}

/* ---------- process ---------- */
.proc{padding:calc(200 * var(--u)) 0 calc(170 * var(--u))}
.proc-steps{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:calc(24 * var(--u)); margin-top:calc(60 * var(--u))}
.pstep{position:relative}
.pstep::before{content:""; position:absolute; left:calc(50 * var(--u)); right:calc(-12 * var(--u)); top:calc(19 * var(--u)); height:1px; background:var(--ink)}
.pstep:last-child::before{display:none}
.pstep h3{margin-top:calc(44 * var(--u))}
.pstep p{max-width:calc(258 * var(--u)); margin-top:calc(24 * var(--u)); color:#555a66; font-size:calc(17 * var(--u)); line-height:calc(24 * var(--u)); letter-spacing:calc(-0.2 * var(--u))}

/* ---------- clients' words ---------- */
.tst{padding-bottom:calc(160 * var(--u))}
.tst-head{display:flex; align-items:flex-end; justify-content:space-between; gap:calc(24 * var(--u))}
.tst-arrows{display:flex; gap:calc(10 * var(--u))}
.arrow{display:grid; place-items:center; width:calc(42 * var(--u)); height:calc(42 * var(--u)); border-radius:50%; background:var(--coral-d); color:#fff; transition:background-color .2s, opacity .2s}
.arrow:hover{background:var(--coral-dd)}
.arrow:disabled{opacity:.3; cursor:default}
.arrow svg{width:calc(18 * var(--u)); height:calc(18 * var(--u))}
.tst-row{display:flex; gap:calc(24 * var(--u)); margin-top:calc(44 * var(--u)); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none}
.tst-row::-webkit-scrollbar{display:none}
.tcol{flex:0 0 calc(547 * var(--u)); display:flex; flex-direction:column; align-items:flex-start; scroll-snap-align:start}
.tcol-src{margin-bottom:calc(22 * var(--u)); font-family:var(--serif); font-weight:700; font-size:calc(16 * var(--u)); line-height:calc(22 * var(--u)); letter-spacing:calc(-0.2 * var(--u))}
.tcol-text{margin-bottom:calc(28 * var(--u)); font-size:calc(24 * var(--u)); line-height:calc(31 * var(--u)); letter-spacing:calc(-0.7 * var(--u))}
.tcol b{font-size:calc(16 * var(--u)); font-weight:600; line-height:calc(22 * var(--u)); text-transform:uppercase}
.tcol-role{margin-top:calc(2 * var(--u)); color:var(--muted); font-size:calc(12 * var(--u)); line-height:calc(17 * var(--u)); letter-spacing:calc(0.6 * var(--u)); text-transform:uppercase}
.tcol--cta .btn{margin-top:calc(24 * var(--u))}
.tcol-src{display:flex; align-items:center; min-height:calc(22 * var(--u))}
.tcol-src .blogo{height:calc(20 * var(--u))}
.tcol-src .blogo-text{font-size:calc(20 * var(--u)); line-height:calc(22 * var(--u)); letter-spacing:calc(5 * var(--u))}
.tcol--work .tcol-text{margin-bottom:calc(20 * var(--u))}
.tcol-made{display:flex; gap:calc(10 * var(--u)); margin-bottom:calc(22 * var(--u))}
.tcol-made img{width:calc(104 * var(--u)); aspect-ratio:4 / 5; border-radius:calc(10 * var(--u)); object-fit:cover}
.tst-note{margin-top:calc(44 * var(--u)); color:var(--muted); font-size:calc(13 * var(--u)); font-style:italic; line-height:calc(19 * var(--u))}

/* ---------- pricing ---------- */
.pc{padding-bottom:calc(160 * var(--u))}
.pc-cards{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:calc(16 * var(--u)); margin-top:calc(60 * var(--u))}
.pc-card{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:calc(26 * var(--u)); padding:calc(30 * var(--u)); border-radius:var(--r); background:var(--sand)}
.pc-card--pop{background:var(--ink); color:#fff}
.pc-top{display:flex; flex-direction:column; gap:calc(6 * var(--u))}
.pc-top p{font-size:calc(17 * var(--u)); font-weight:600; line-height:calc(24 * var(--u))}
.pc-price{display:flex; flex-direction:column; gap:calc(4 * var(--u)); align-self:stretch; padding:calc(22 * var(--u)) 0; box-shadow:inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line)}
.pc-price p{display:flex; align-items:baseline; gap:calc(6 * var(--u))}
.pc-amt{font-family:var(--serif); font-weight:700; font-size:calc(52 * var(--u)); line-height:calc(56 * var(--u)); letter-spacing:calc(-2 * var(--u))}
.pc-per{font-family:var(--serif); font-weight:600; font-size:calc(20 * var(--u)); line-height:calc(24 * var(--u))}
.pc-sub{color:var(--muted); font-size:calc(14.5 * var(--u)); line-height:calc(20 * var(--u))}
.pc-card--pop .pc-sub{color:rgba(255,255,255,.7)}
.pc-card--pop .pc-price{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.16)}
.pc-list{display:flex; flex-direction:column; gap:calc(12 * var(--u)); align-self:stretch; margin-bottom:calc(8 * var(--u))}
.pc-list li{display:flex; align-items:flex-start; gap:calc(10 * var(--u)); font-size:calc(15 * var(--u)); line-height:calc(21 * var(--u))}
.pc-list li::before{content:""; flex:none; width:calc(16 * var(--u)); height:calc(16 * var(--u)); margin-top:calc(2.5 * var(--u)); background:var(--coral-d); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.6l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.6l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat}
.pc-card--pop .pc-list li::before{background:var(--accent-d)}
.pc-card > .btn{margin-top:auto}
.pc-alt{display:flex; align-items:baseline; justify-content:space-between; gap:calc(12 * var(--u)); align-self:stretch; margin-top:auto; padding:calc(14 * var(--u)) calc(16 * var(--u)); border-radius:calc(12 * var(--u)); background:rgba(20,23,31,.06); font-size:calc(14.5 * var(--u)); line-height:calc(22 * var(--u))}
.pc-alt b{font-family:var(--serif); font-weight:700; font-size:calc(18 * var(--u)); line-height:calc(22 * var(--u)); white-space:nowrap}
.pc-card--pop .pc-alt{background:rgba(255,255,255,.1)}
.pc-card > .pc-alt + .btn{margin-top:calc(-6 * var(--u))}
.pc-note{margin-top:calc(28 * var(--u)); color:var(--muted); font-size:calc(14.5 * var(--u)); line-height:calc(21 * var(--u)); text-align:center}
.pc-pop{position:absolute; top:calc(30 * var(--u)); right:calc(30 * var(--u)); display:inline-flex; align-items:center; height:calc(28 * var(--u)); padding:0 calc(12 * var(--u)); border-radius:calc(100 * var(--u)); background:var(--coral-d); color:#fff; font-size:calc(12 * var(--u)); font-weight:600; line-height:calc(18 * var(--u))}

/* ---------- FAQ ---------- */
.faq{padding-bottom:calc(150 * var(--u))}
.faq-list{display:flex; flex-direction:column; gap:calc(14 * var(--u)); width:calc(800 * var(--u)); max-width:100%; margin:calc(56 * var(--u)) auto 0}
.faq-item{border-radius:calc(10 * var(--u)); background:var(--sand)}
.acc-head{display:flex; align-items:center; justify-content:space-between; gap:calc(20 * var(--u)); width:100%; min-height:calc(66 * var(--u)); padding:calc(14 * var(--u)) calc(20 * var(--u)); font-size:calc(18 * var(--u)); font-weight:600; line-height:calc(25 * var(--u)); letter-spacing:calc(-0.4 * var(--u))}
.acc-plus{flex:none; display:grid; place-items:center; width:calc(26 * var(--u)); height:calc(26 * var(--u)); border-radius:50%; background:var(--ink); color:#fff; transition:transform .35s var(--ease)}
.acc-plus svg{width:calc(14 * var(--u)); height:calc(14 * var(--u))}
.acc.is-open .acc-plus{transform:rotate(-135deg)}
.acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease)}
.acc-body > div{min-height:0; overflow:hidden; visibility:hidden; transition:visibility 0s .4s}
.acc.is-open .acc-body{grid-template-rows:1fr}
.acc.is-open .acc-body > div{visibility:visible; transition-delay:0s}
.acc-body p{padding:0 calc(66 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u)); color:#444956; font-size:calc(16.5 * var(--u)); line-height:calc(25 * var(--u))}

/* ---------- contact ---------- */
.contact{padding:0 calc(12 * var(--u))}
.contact-box{display:grid; grid-template-columns:minmax(0, 1fr) calc(600 * var(--u)); gap:calc(80 * var(--u)); max-width:calc(1416 * var(--u)); min-height:calc(560 * var(--u)); margin-inline:auto; padding:calc(40 * var(--u)); border-radius:calc(16 * var(--u)); background:radial-gradient(60% 90% at 100% 100%, rgba(255,86,64,.26) 0%, rgba(255,86,64,0) 70%), var(--ink); color:#fff}
.contact-l{display:flex; flex-direction:column; align-items:flex-start}
.contact-l .h2{margin-top:calc(24 * var(--u))}
.contact-for{margin-top:auto; padding-top:calc(60 * var(--u))}
.contact-for p{margin-bottom:calc(14 * var(--u)); font-size:calc(12 * var(--u)); line-height:calc(17 * var(--u)); letter-spacing:calc(1.4 * var(--u)); text-transform:uppercase; opacity:.6}
.contact-for li{display:flex; align-items:flex-start; gap:calc(12 * var(--u)); padding:calc(3 * var(--u)) 0; font-size:calc(17 * var(--u)); line-height:calc(25 * var(--u))}
.contact-for svg{flex:none; width:calc(18 * var(--u)); height:calc(18 * var(--u)); margin-top:calc(4 * var(--u)); color:var(--accent-d)}
.contact-r{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:calc(22 * var(--u))}
.call-card{align-self:stretch; padding:calc(6 * var(--u)) calc(24 * var(--u)); border-radius:calc(12 * var(--u)); background:rgba(255,255,255,.07)}
.call-card > div{display:grid; grid-template-columns:calc(150 * var(--u)) minmax(0, 1fr); gap:calc(16 * var(--u)); padding:calc(18 * var(--u)) 0; box-shadow:inset 0 -1px 0 rgba(255,255,255,.12)}
.call-card > div:last-child{box-shadow:none}
.call-card dt{padding-top:calc(4 * var(--u)); font-size:calc(12 * var(--u)); line-height:calc(17 * var(--u)); letter-spacing:calc(1.2 * var(--u)); text-transform:uppercase; opacity:.6}
.call-card dd{font-size:calc(17 * var(--u)); font-weight:500; line-height:calc(24 * var(--u))}
.call-note{font-size:calc(13 * var(--u)); line-height:calc(19 * var(--u)); opacity:.6}

/* ---------- footer ---------- */
.ft{padding-top:calc(96 * var(--u)); overflow:hidden; overflow:clip}
.ft-marq{--tg:calc(30 * var(--u))}
.ft-word{font-family:var(--serif); font-weight:800; font-size:calc(236 * var(--u)); line-height:calc(236 * var(--u)); letter-spacing:calc(-12 * var(--u)); white-space:nowrap}
.ft-pic{display:block; width:calc(240 * var(--u)); height:calc(172 * var(--u)); border-radius:var(--r); overflow:hidden}
.ft-pic img{width:100%; height:100%; object-fit:cover}
.ft-cols{display:flex; gap:calc(120 * var(--u)); margin-top:calc(72 * var(--u))}
.ft-col p{margin-bottom:calc(14 * var(--u)); color:var(--muted); font-size:calc(12 * var(--u)); line-height:calc(17 * var(--u)); letter-spacing:calc(1.2 * var(--u)); text-transform:uppercase}
.ft-col a{display:block; padding:calc(3 * var(--u)) 0; font-size:calc(19 * var(--u)); line-height:calc(26 * var(--u)); letter-spacing:calc(-0.3 * var(--u)); transition:color .2s}
.ft-col a:hover{color:var(--accent)}
.ft-cta{width:calc(400 * var(--u)); margin-left:auto}
.ft-cta p{margin-bottom:calc(18 * var(--u)); font-size:calc(24 * var(--u)); line-height:calc(31 * var(--u)); letter-spacing:calc(-0.7 * var(--u))}
.ft-bottom{display:flex; align-items:center; justify-content:space-between; gap:calc(24 * var(--u)); margin-top:calc(64 * var(--u)); padding:calc(18 * var(--u)) 0 calc(26 * var(--u)); border-top:1px solid var(--ink); font-size:calc(12 * var(--u)); line-height:calc(17 * var(--u)); letter-spacing:calc(0.4 * var(--u)); text-transform:uppercase}
.ft-bottom a{text-decoration:underline; text-underline-offset:calc(3 * var(--u))}

/* ---------- gallery overlay ---------- */
.lb{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; gap:calc(24 * var(--u)); padding:calc(32 * var(--u)); background:rgba(12,14,19,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.lb-stage{display:flex; flex-direction:column; align-items:center; gap:calc(16 * var(--u)); min-width:0; max-width:calc(1000 * var(--u))}
.lb-media img,.lb-media video{width:auto; height:auto; max-width:100%; max-height:calc(100vh - calc(150 * var(--u))); border-radius:calc(12 * var(--u)); background:#000}
.lb-cap{color:#fff; font-family:var(--serif); font-weight:600; font-size:calc(18 * var(--u)); line-height:calc(24 * var(--u)); text-align:center}
.lb-close,.lb-nav{flex:none; display:grid; place-items:center; width:calc(52 * var(--u)); height:calc(52 * var(--u)); border-radius:50%; background:rgba(255,255,255,.12); color:#fff; transition:background-color .2s}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.26)}
.lb-close svg,.lb-nav svg{width:calc(22 * var(--u)); height:calc(22 * var(--u))}
.lb-close{position:absolute; top:calc(24 * var(--u)); right:calc(24 * var(--u))}
.lb.is-single .lb-nav{visibility:hidden}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .eng.is-auto .eacc.is-open .eacc-bar{animation:none}
  .tk-track{animation:none}
  .rot-track,.tst-row{transition:none; scroll-behavior:auto}
  .js .stmt-text .w{opacity:1; transition:none}
  .js .ccard-media{clip-path:none; transition:none}
}

/* =========================================================
   Phones and tablets: the 390-wide design, one column.
   ========================================================= */
@media (max-width:1099px){
  :root{--u:min(calc(100vw / 390), 1.5px); --gx:calc(16 * var(--u))}
  h1{font-size:calc(54 * var(--u)); line-height:calc(50 * var(--u)); letter-spacing:calc(-2.4 * var(--u))}
  .h2{font-size:calc(34 * var(--u)); line-height:calc(36 * var(--u)); letter-spacing:calc(-1.3 * var(--u))}
  h3{font-size:calc(21 * var(--u)); line-height:calc(26 * var(--u))}
  .btn{height:calc(50 * var(--u)); font-size:calc(16 * var(--u))}
  .btn-go i{width:calc(36 * var(--u)); height:calc(36 * var(--u))}
  .head{gap:calc(16 * var(--u))}

  .nav-in{padding-top:calc(14 * var(--u))}
  .nav-box{flex:1 1 0; width:auto}
  .nav-tag,.nav-cta{display:none}
  .nav-menu a{font-size:calc(24 * var(--u)); line-height:calc(32 * var(--u))}

  .hero{padding-top:calc(92 * var(--u))}
  .hero-in{display:flex; flex-direction:column-reverse; gap:calc(30 * var(--u))}
  .hero-copy{min-height:0}
  .hero-lead{width:auto; margin-top:calc(22 * var(--u)); font-size:calc(18 * var(--u)); line-height:calc(25 * var(--u))}
  .hero-copy > .btn{margin-top:calc(24 * var(--u))}
  .hero-trust{margin-top:calc(44 * var(--u))}
  .hero-logos{width:auto}
  .hero-panel{gap:calc(8 * var(--u)); height:calc(340 * var(--u)); padding:calc(6 * var(--u)); border-radius:calc(14 * var(--u))}
  .hero-panel .tk{--tg:calc(8 * var(--u))}

  .stmt{padding-top:calc(96 * var(--u))}
  .stmt-text{margin-top:calc(26 * var(--u)); font-size:calc(30 * var(--u)); line-height:calc(35 * var(--u)); letter-spacing:calc(-1 * var(--u))}

  .clients{padding:calc(80 * var(--u)) 0 calc(96 * var(--u))}
  .clients-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); width:auto; margin-top:calc(22 * var(--u))}
  .clients-grid > div{height:calc(76 * var(--u))}
  .blogo{height:calc(28 * var(--u))}
  .blogo--canva{height:calc(84 * var(--u))}
  .blogo--pulsetto{height:calc(54 * var(--u))}
  .blogo--sr{height:calc(21 * var(--u))}
  .blogo-text{font-size:calc(21 * var(--u)); letter-spacing:calc(5 * var(--u))}

  .eng{padding-bottom:calc(96 * var(--u))}
  .eng-in{display:flex; flex-direction:column; align-items:stretch; gap:0}
  .eng-copy{display:contents}
  .eng-copy > .tag{order:1; align-self:flex-start}
  .eng-copy .h2{order:2; width:auto; margin-top:calc(16 * var(--u))}
  .eng-lead{order:3; width:auto; margin:calc(14 * var(--u)) 0 calc(24 * var(--u))}
  .eng-panel{order:4; position:relative; top:auto; height:calc(372 * var(--u)); margin-bottom:calc(24 * var(--u))}
  .eacc-list{order:5}
  .eng-vis{gap:calc(14 * var(--u)); padding:calc(62 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u))}
  .ev-cap{left:calc(18 * var(--u)); top:calc(18 * var(--u)); gap:calc(10 * var(--u)); font-size:calc(12 * var(--u))}
  .ev-card{width:calc(300 * var(--u)); padding:calc(20 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u))}
  .ev-card > b{font-size:calc(22 * var(--u)); line-height:calc(26 * var(--u))}
  .ev-card dl{margin-top:calc(14 * var(--u))}
  .ev-card dl div{padding:calc(9 * var(--u)) 0}
  .ev-card dd{font-size:calc(15 * var(--u)); line-height:calc(21 * var(--u))}
  .ev-hooks{width:calc(316 * var(--u)); height:calc(262 * var(--u))}
  .hook{top:calc(36 * var(--u)); width:calc(116 * var(--u))}
  .hook--b{top:calc(14 * var(--u)); margin-left:calc(-58 * var(--u))}
  .ev-batch{grid-template-columns:repeat(2, calc(132 * var(--u))); gap:calc(8 * var(--u))}
  .bt{height:calc(136 * var(--u))}
  .ev-review{width:calc(300 * var(--u)); gap:calc(8 * var(--u))}
  .ev-review li{height:calc(44 * var(--u)); font-size:calc(14 * var(--u))}
  .eacc-head{gap:calc(16 * var(--u)); height:calc(66 * var(--u))}
  .eacc-title{font-size:calc(19 * var(--u)); line-height:calc(24 * var(--u))}
  .eacc-body p{min-height:0; padding:0 0 0 calc(54 * var(--u)); font-size:calc(17 * var(--u)); line-height:calc(24 * var(--u))}
  .eacc-body .eacc-get{flex-direction:column; gap:calc(2 * var(--u)); padding:calc(10 * var(--u)) 0 calc(22 * var(--u)) calc(54 * var(--u))}

  .exe{padding-bottom:calc(96 * var(--u))}
  .rot{--rh:calc(38 * var(--u))}
  .rot-track span{font-size:calc(34 * var(--u)); letter-spacing:calc(-1.3 * var(--u))}
  .exe-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:calc(10 * var(--u)); margin-top:calc(30 * var(--u))}
  .vplay{width:calc(46 * var(--u)); height:calc(46 * var(--u)); margin:calc(-23 * var(--u)) 0 0 calc(-23 * var(--u))}
  .vplay svg{width:calc(18 * var(--u)); height:calc(18 * var(--u))}
  .exe-more{margin-top:calc(26 * var(--u))}

  .cases{padding-bottom:calc(64 * var(--u))}
  .cases-grid{grid-template-columns:minmax(0, 1fr); gap:calc(36 * var(--u)); margin-top:calc(32 * var(--u))}
  .ccard-media{height:calc(260 * var(--u))}
  .ccard-media--shot{padding:0 calc(18 * var(--u)) calc(54 * var(--u))}
  .ccard-media--shot img{padding:calc(5 * var(--u)); border-radius:calc(8 * var(--u))}
  .ccard-badge{right:calc(12 * var(--u)); bottom:calc(12 * var(--u)); min-width:calc(170 * var(--u)); padding:calc(10 * var(--u)) calc(14 * var(--u)) calc(11 * var(--u))}
  .ccard-badge b{font-size:calc(26 * var(--u)); line-height:calc(30 * var(--u))}
  .ccard-row{flex-direction:column; align-items:flex-start; gap:calc(2 * var(--u)); margin-top:calc(16 * var(--u))}
  .ccard-row span{font-size:calc(15 * var(--u)); line-height:calc(21 * var(--u))}
  .ccard-desc{margin-top:calc(12 * var(--u)); padding:calc(16 * var(--u)) calc(14 * var(--u)); font-size:calc(16.5 * var(--u)); line-height:calc(23 * var(--u))}

  .bar{flex-direction:column; align-items:stretch; gap:calc(18 * var(--u)); padding:calc(26 * var(--u)) calc(20 * var(--u)); text-align:center}
  .bar h2{font-size:calc(27 * var(--u)); line-height:calc(31 * var(--u))}
  .bar .btn{align-self:center}

  .proc{padding:calc(96 * var(--u)) 0}
  .proc-steps{grid-template-columns:minmax(0, 1fr); gap:0; margin-top:calc(34 * var(--u))}
  .pstep{display:grid; grid-template-columns:calc(38 * var(--u)) minmax(0, 1fr); column-gap:calc(18 * var(--u)); padding-bottom:calc(30 * var(--u))}
  .pstep::before{left:calc(19 * var(--u)); right:auto; top:calc(44 * var(--u)); bottom:calc(6 * var(--u)); width:1px; height:auto}
  .pstep .num{grid-row:1 / 3}
  .pstep h3{margin-top:calc(5 * var(--u))}
  .pstep p{max-width:none; margin-top:calc(8 * var(--u)); font-size:calc(16.5 * var(--u))}

  .tst{padding-bottom:calc(96 * var(--u))}
  .tst-head{flex-direction:column; align-items:flex-start; gap:calc(18 * var(--u))}
  .tst-row{gap:calc(16 * var(--u)); margin-top:calc(30 * var(--u))}
  .tcol{flex-basis:calc(300 * var(--u))}
  .tcol-text{font-size:calc(20 * var(--u)); line-height:calc(27 * var(--u)); letter-spacing:calc(-0.5 * var(--u))}
  .tst-note{margin-top:calc(28 * var(--u))}

  .pc{padding-bottom:calc(96 * var(--u))}
  .pc-cards{grid-template-columns:minmax(0, 1fr); margin-top:calc(32 * var(--u))}
  .pc-card{gap:calc(22 * var(--u)); padding:calc(24 * var(--u)) calc(20 * var(--u))}
  .pc-note{margin-top:calc(20 * var(--u))}
  .pc-alt{flex-wrap:wrap; gap:calc(4 * var(--u)) calc(10 * var(--u)); padding:calc(13 * var(--u)) calc(12 * var(--u))}
  .pc-alt span{white-space:nowrap}
  .pc-alt b{font-size:calc(16 * var(--u))}
  .pc-pop{top:calc(24 * var(--u)); right:calc(20 * var(--u))}
  .pc-amt{font-size:calc(46 * var(--u)); line-height:calc(50 * var(--u))}

  .faq{padding-bottom:calc(88 * var(--u))}
  .faq-list{gap:calc(10 * var(--u)); width:auto; margin-top:calc(30 * var(--u))}
  .acc-head{padding:calc(14 * var(--u)) calc(16 * var(--u)); font-size:calc(17 * var(--u)); line-height:calc(23 * var(--u))}
  .acc-body p{padding:0 calc(16 * var(--u)) calc(20 * var(--u)); font-size:calc(16 * var(--u)); line-height:calc(24 * var(--u))}

  .contact{padding:0 calc(8 * var(--u))}
  .contact-box{grid-template-columns:minmax(0, 1fr); gap:calc(32 * var(--u)); min-height:0; padding:calc(26 * var(--u)) calc(18 * var(--u)) calc(24 * var(--u)); border-radius:calc(14 * var(--u))}
  .contact-for{padding-top:calc(28 * var(--u))}
  .contact-r{align-items:stretch}
  .call-card{padding:calc(4 * var(--u)) calc(16 * var(--u))}
  .call-card > div{grid-template-columns:minmax(0, 1fr); gap:calc(4 * var(--u)); padding:calc(14 * var(--u)) 0}
  .contact-r .btn{align-self:flex-start}

  .ft{padding-top:calc(64 * var(--u))}
  .ft-marq{--tg:calc(16 * var(--u))}
  .ft-word{font-size:calc(116 * var(--u)); line-height:calc(116 * var(--u)); letter-spacing:calc(-6 * var(--u))}
  .ft-pic{width:calc(120 * var(--u)); height:calc(86 * var(--u)); border-radius:calc(10 * var(--u))}
  .ft-cols{flex-wrap:wrap; gap:calc(36 * var(--u)) calc(56 * var(--u)); margin-top:calc(44 * var(--u))}
  .ft-cta{width:100%; margin-left:0}
  .ft-bottom{flex-direction:column; align-items:flex-start; gap:calc(10 * var(--u)); margin-top:calc(44 * var(--u)); padding-bottom:calc(calc(22 * var(--u)) + env(safe-area-inset-bottom, 0px))}

  .lb{flex-wrap:wrap; align-content:center; gap:calc(16 * var(--u)); padding:calc(64 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u))}
  .lb-stage{order:-1; flex:0 0 100%}
  .lb-media img,.lb-media video{max-height:calc(100vh - calc(230 * var(--u)))}
  .lb-close{top:calc(10 * var(--u)); right:calc(10 * var(--u)); width:calc(44 * var(--u)); height:calc(44 * var(--u))}
}