:root{
  --paper:#f5f5f4;
  --ink:#161616;
  --muted:#686868;
  --line:#d3d3d0;
  --purple:#815bff;
  --blue:#5aa0ff;
  --pink:#f4a2df;
  --green:#35c99a;
  --orange:#ffba42;
  --red:#ff6637;
  --viasales-coral:#f26a2f;
  --viasales-coral-dark:#bd4720;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#111;color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.page-shell{background:var(--paper);border-radius:0 0 28px 28px;overflow:clip}.section-pad{padding-left:clamp(18px,4vw,64px);padding-right:clamp(18px,4vw,64px)}
.menu-surface{
  position:fixed;
  inset:0;
  z-index:140;
  width:100%;
  height:100vh;
  height:100dvh;
  pointer-events:none;
  overflow:visible;
}
.menu-surface path{fill:#171717}
.topbar{
  position:fixed;
  z-index:170;
  top:0;
  left:0;
  right:0;
  height:124px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(18px,4vw,64px);
  pointer-events:none;
}
.topbar>*{pointer-events:auto}
.brand{
  display:inline-flex;
  align-items:center;
  position:relative;
  z-index:2;
  margin-top:21px;
  transition:none;
}
.brand-logo{
  width:38px;
  height:38px;
  display:block;
  object-fit:contain;
}
.menu-tab{
  position:absolute;
  left:50%;
  top:45px;
  transform:translateX(-50%);
  width:210px;
  height:79px;
  padding:0 26px 4px;
  border:0;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  overflow:visible;
  -webkit-tap-highlight-color:transparent;
}
.menu-tab:focus-visible,.roll-button:focus-visible,.menu-link:focus-visible,.menu-social-row a:focus-visible{
  outline:2px solid var(--viasales-coral);
  outline-offset:4px;
}
.menu-dots{
  width:22px;
  height:22px;
  display:block;
  position:relative;
  flex:0 0 22px;
  transform-origin:50% 50%;
  will-change:transform;
}
.menu-dots i{
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  margin:0;
  background:#fff;
  border-radius:999px;
  transform-origin:center;
  will-change:transform,width,height,border-radius;
}
.menu-label-window{
  height:22px;
  overflow:hidden;
  display:block;
  min-width:52px;
  text-align:left;
}
.menu-label-track{
  display:flex;
  flex-direction:column;
  will-change:transform;
}
.menu-label-track>span{
  display:flex;
  align-items:center;
  height:22px;
  white-space:nowrap;
}
.top-cta{
  position:relative;
  width:154px;
  height:48px;
  margin-top:21px;
  border-radius:999px;
  background:#dedede;
  color:#171717;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:15px;
  line-height:1;
  will-change:background-color,color,opacity,transform;
}
.pill-dot{
  position:absolute;
  left:5px;
  top:5px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  display:block;
  will-change:transform;
}
.roll-label{
  position:relative;
  z-index:1;
  margin-left:23px;
  will-change:transform;
}
.menu-content{
  position:fixed;
  z-index:155;
  inset:0;
  height:100vh;
  height:100dvh;
  color:#fff;
  pointer-events:none;
  visibility:hidden;
  overflow:hidden;
}
.menu-content-inner{
  height:100%;
  min-height:100%;
  padding:128px 24px 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.menu-nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1px;
}
.menu-link{
  display:block;
  color:#969696;
  font-size:clamp(48px,5vw,76px);
  line-height:1.05;
  letter-spacing:-.055em;
  font-weight:620;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(26px);
  transition:color .18s ease;
}
.menu-link:hover{color:var(--viasales-coral)}
.menu-link.is-active{color:var(--viasales-coral)}
.menu-link.is-active:hover{color:var(--viasales-coral-dark)}
.menu-socials{
  margin-top:52px;
  padding-top:30px;
  width:min(400px,80vw);
  border-top:1px solid #343434;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  opacity:0;
  transform:translateY(16px);
  color:#efefef;
  font-size:14px;
}
.menu-social-row{display:flex;gap:10px}
.menu-social-row a{
  width:43px;
  height:43px;
  border-radius:50%;
  background:#2b2b2b;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:11px;
  font-weight:700;
  transition:background-color .18s ease,color .18s ease;
}
.menu-social-row a:hover{background:var(--viasales-coral);color:#171717}
body.menu-open{overflow:hidden}
.hero{min-height:1040px;padding-top:188px;position:relative;overflow:hidden}.hero-center{max-width:1000px;margin:0 auto;text-align:center;position:relative;z-index:5}.eyebrow{display:inline-flex;border:1px solid #c7c7c4;border-radius:999px;padding:6px 18px;font-size:14px;background:rgba(255,255,255,.55)}.hero-title{margin:44px auto 28px;font-size:clamp(54px,6.35vw,98px);line-height:.97;font-weight:430;letter-spacing:-.066em;text-transform:uppercase}.hero-title>span{display:block}.hero-second{margin-top:18px}.hero-title em{font-style:normal;background:var(--purple);color:white;border-radius:999px;padding:.05em .36em .15em;white-space:nowrap}.stop-o{display:inline-block;position:relative;width:.76em;height:.76em;background:#171717;border-radius:50%;vertical-align:.02em;margin:0 .015em}.stop-o i{position:absolute;width:58%;height:12%;left:21%;top:44%;background:#fff;border-radius:20px;transform:rotate(-42deg)}.hero-copy{max-width:590px;margin:0 auto 30px;font-size:16px;line-height:1.35;color:#4d4d4d}.primary-button{display:inline-flex;align-items:center;gap:4px;background:#161616;color:#fff;border-radius:999px;padding:6px 20px 6px 7px;min-height:51px;font-size:16px}.button-dot{width:39px;height:39px;border-radius:50%;background:#fff;display:block;transition:transform .35s cubic-bezier(.16,1,.3,1)}.primary-button:hover .button-dot{transform:translateX(5px)}.hero-reels{position:absolute;left:50%;bottom:-126px;transform:translateX(-50%);width:min(1540px,112vw);height:410px}.reel-card{position:absolute;width:340px;height:400px;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06);will-change:transform;transition:transform .5s cubic-bezier(.16,1,.3,1)}.reel-card img{width:100%;height:100%;object-fit:cover}.reel-caption{position:absolute;left:16px;right:16px;bottom:14px;background:rgba(20,20,20,.78);color:white;border-radius:999px;padding:10px 14px;font-size:13px;backdrop-filter:blur(8px)}.reel-a{left:2%;top:58px;transform:rotate(-6deg)}.reel-b{left:28%;top:18px;transform:rotate(6deg)}.reel-c{right:2%;top:52px;transform:rotate(7deg)}.reel-stat{left:52%;top:0;transform:rotate(-8deg);background:var(--blue);padding:46px 35px;text-align:center;display:flex;flex-direction:column;align-items:center}.reel-stat strong{font-size:72px;letter-spacing:-.07em;font-weight:450;margin-top:28px}.reel-stat>span{font-size:17px;max-width:220px}.avatar-stack{display:flex}.avatar-stack img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid var(--blue);margin-left:-10px}.avatar-stack img:first-child{margin-left:0}.stat-chips{margin-top:auto;display:flex;gap:5px}.stat-chips i{font-style:normal;background:white;border-radius:999px;font-size:11px;padding:6px 10px}
.platform-strip{padding:40px 0 66px;border-bottom:1px solid var(--line);text-align:center;overflow:hidden}.platform-strip p{font-size:12px;color:#777;margin:0 0 24px}.marquee-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.marquee-track{display:flex;gap:58px;width:max-content;animation:marquee 24s linear infinite}.marquee-track span{font-weight:600;color:#999;font-size:17px;white-space:nowrap}@keyframes marquee{to{transform:translateX(-50%)}}
.manifesto{padding-top:150px;padding-bottom:170px}.manifesto-copy{max-width:1120px;margin:auto}.small-label{font-size:12px;color:#777;margin:0 0 32px;text-transform:none}.manifesto-lines p{font-size:clamp(38px,4.4vw,69px);line-height:1.12;letter-spacing:-.058em;margin:4px 0;font-weight:430}.hi{display:inline-block;padding:0 .12em .08em;border-radius:.18em}.hi-blue{background:#F1636F;color:#fff}.hi-pink{background:#F9A461;color:#161616}.hi-green{background:#F1636F;color:#fff}.inline-photo{display:inline-block;width:92px;height:.88em;border-radius:14px;overflow:hidden;vertical-align:-.08em;transform:rotate(-5deg)}.inline-photo.p-two{width:112px;transform:rotate(4deg)}.inline-photo img{width:100%;height:100%;object-fit:cover}.manifesto-note{max-width:620px;margin:58px 0 0;font-size:16px;line-height:1.45;color:#565656}
.mission{padding-top:30px;padding-bottom:72px}.mission-grid{max-width:1260px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.photo-pair{position:relative;height:520px}.photo-pair figure{margin:0;position:absolute;width:52%;height:72%;border-radius:28px;overflow:hidden}.photo-pair figure:first-child{left:0;top:70px;transform:rotate(-4deg)}.photo-pair figure:nth-child(2){right:1%;top:22px;transform:rotate(6deg)}.photo-pair img{width:100%;height:100%;object-fit:cover}.float-badge{position:absolute;border-radius:999px;padding:8px 14px;font-size:12px}.badge-black{background:#161616;color:white;left:42%;top:25px;transform:rotate(4deg)}.badge-orange{background:#ff6a36;color:white;right:0;bottom:78px;transform:rotate(-5deg)}.mission-copy h2{font-size:clamp(38px,4vw,62px);line-height:1.01;letter-spacing:-.055em;font-weight:450;margin:0 0 25px}.mission-copy>p{max-width:540px;line-height:1.5;color:#595959}.compact{margin-top:16px}.services-intro{width:min(calc(100vw - 60px),1280px);margin:78px auto 64px;text-align:center}.services-intro h2{font-size:clamp(44px,4.7vw,72px);line-height:.94;letter-spacing:-.06em;font-weight:440;margin:0}
.services{padding:0 0 130px}.service-stack{width:min(calc(100vw - 60px),1280px);margin:0 auto;position:relative}.service-card{height:617px;position:sticky;top:100px;margin:0 0 150px;border-radius:30px;padding:50px;overflow:hidden;box-shadow:none;transform-origin:50% 50%;will-change:transform}.service-card[data-service-index="0"]{z-index:1}.service-card[data-service-index="1"]{z-index:2}.service-card[data-service-index="2"]{z-index:3}.service-card[data-service-index="3"]{z-index:4}.service-coral{background:#f1636f;color:#fff}.service-orange{background:#d94f67;color:#fff}.service-coral-soft{background:#e97952;color:#fff}.service-orange-soft{background:#f9a461;color:#fff}.service-card-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.78fr);gap:64px;align-items:start}.service-card-top h3{font-size:clamp(54px,5vw,78px);line-height:.92;letter-spacing:-.06em;font-weight:470;margin:0;color:#fff}.service-card-top p{font-size:17px;line-height:1.42;margin:4px 0 0;max-width:510px;color:rgba(255,255,255,.88)}.service-card-bottom{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:50px;align-items:stretch;margin-top:54px;height:330px}.service-points{list-style:none;margin:0;padding:2px 0 0;align-self:start;display:grid;gap:18px;color:#fff}.service-points li{font-size:16px;line-height:1.25;padding:0;border:0;display:grid;grid-template-columns:26px minmax(0,1fr);gap:13px;align-items:center;font-weight:560;color:#fff}.service-points li .bi{width:24px;height:24px;display:grid;place-items:center;font-size:22px;line-height:1;color:#fff;opacity:1}.service-points li span{display:block;color:#fff}.service-media{margin:0;border:2px solid rgba(255,255,255,.9);border-radius:30px;overflow:hidden;height:330px}.service-media img{display:block;width:100%;height:100%;object-fit:cover}.service-exit-spacer{height:600px;margin-top:-150px}
.case-study{padding-top:100px;padding-bottom:150px}.case-intro{text-align:center}.case-intro h2{font-size:clamp(36px,3.8vw,58px);line-height:1.04;letter-spacing:-.055em;font-weight:440;margin:0}.case-grid{max-width:1050px;margin:74px auto 0;display:grid;grid-template-columns:1.25fr .75fr;gap:0;align-items:center}.case-image{margin:0;height:520px;border-radius:30px;overflow:hidden}.case-image img{width:100%;height:100%;object-fit:cover}.case-note{background:#fff;margin-left:-35px;border-radius:22px;padding:34px;position:relative;z-index:2;border:1px solid #ececea}.case-note>span{font-size:11px;color:#777}.case-note h3{font-size:30px;line-height:1.05;letter-spacing:-.04em;margin:22px 0 18px}.case-note p{font-size:14px;color:#666;line-height:1.5}.case-note a{display:inline-block;margin-top:20px;background:#161616;color:white;border-radius:999px;padding:12px 16px;font-size:12px}
.compare-wrap{padding-top:10px;padding-bottom:150px}.compare{height:620px;max-width:1375px;margin:auto;background:#171717;color:white;border-radius:22px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.compare-texture{position:absolute;inset:0;opacity:.3;background:repeating-linear-gradient(135deg,transparent 0 31px,rgba(255,255,255,.025) 31px 62px),radial-gradient(circle at 50% 50%,rgba(255,255,255,.05),transparent 50%)}.compare>*:not(.compare-texture){position:relative}.inverse{color:#aaa}.compare h2{font-size:clamp(42px,5vw,76px);line-height:.99;letter-spacing:-.06em;font-weight:430;margin:0}.compare-list{position:absolute;left:40px;right:40px;bottom:32px;border-top:1px solid #3c3c3c;padding-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;color:#bdbdbd;font-size:12px}
.steps{padding-top:60px;padding-bottom:160px}.steps-head{text-align:center}.steps-head h2{font-size:clamp(46px,5.2vw,80px);line-height:.98;letter-spacing:-.06em;font-weight:440;margin:0}.steps-head h2 span{background:var(--purple);color:white;border-radius:999px;padding:0 .22em .12em;white-space:nowrap}.steps-cards{max-width:1360px;margin:100px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end}.step-card{border-radius:20px 20px 10px 10px;min-height:470px;padding:26px;display:flex;flex-direction:column;position:relative;overflow:hidden}.step-orange{background:#ffbd44;min-height:440px}.step-blue{background:#62a6fb;min-height:520px}.step-green{background:#35c899;min-height:455px}.step-red{background:#ff6537;min-height:500px}.step-num{align-self:center;background:inherit;border-radius:18px 18px 0 0;position:absolute;top:-22px;padding:7px 18px;font-size:11px}.step-card h3{font-size:27px;letter-spacing:-.045em;margin:4px 0 24px}.step-card ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.step-card li{background:#fff;border-radius:8px;padding:9px 11px;font-size:11px}.step-card p{margin:auto 0 0;font-size:12px}.step-center-avatars{margin:auto;display:flex}.step-center-avatars img{width:70px;height:70px;border-radius:50%;object-fit:cover;border:4px solid #62a6fb;margin-left:-17px}.step-photo{width:100%;height:190px;object-fit:cover;border-radius:15px;margin:auto 0}.bars{margin:auto 0;display:flex;align-items:flex-end;gap:9px;height:160px}.bars i{width:20%;background:#161616;border-radius:10px 10px 0 0}.bars i:nth-child(1){height:25%}.bars i:nth-child(2){height:48%}.bars i:nth-child(3){height:70%}.bars i:nth-child(4){height:100%}
.counter{padding-top:70px;padding-bottom:160px}.counter-grid{max-width:1260px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.counter-media{margin:0;position:relative;height:610px;border-radius:26px;overflow:hidden}.counter-media img{width:100%;height:100%;object-fit:cover}.counter-media figcaption{position:absolute;left:24px;bottom:24px;color:#fff;font-size:31px;max-width:330px;line-height:1.04;letter-spacing:-.04em}.metrics{padding:10px 0}.metric-row{display:grid;grid-template-columns:180px 1fr;align-items:end;border-top:1px solid var(--line);padding:20px 0}.metric-row strong{font-size:57px;letter-spacing:-.06em;font-weight:430}.metric-row span{font-size:13px;color:#666;padding-bottom:10px}
.testimonials{padding-top:60px;padding-bottom:150px}.testimonials-head{text-align:center}.testimonials-head h2{font-size:clamp(38px,4vw,62px);line-height:1.01;letter-spacing:-.055em;font-weight:440;margin:0}.testimonials-stage{max-width:1120px;height:620px;margin:50px auto 0;position:relative}.phone-card{position:absolute;width:300px;height:530px;left:50%;top:25px;transform:translateX(-50%) rotate(-2deg);background:white;border-radius:31px;padding:9px;box-shadow:0 10px 35px rgba(0,0,0,.07)}.phone-card img{width:100%;height:455px;object-fit:cover;border-radius:24px}.phone-meta{display:flex;justify-content:space-between;padding:13px 10px;font-size:12px}.quote{position:absolute;width:330px;background:white;border:1px solid #e7e7e4;border-radius:18px;padding:24px}.quote p{font-size:14px;line-height:1.45}.quote span{font-size:11px;color:#777}.stars{color:#ffb222;letter-spacing:2px}.q-left{left:10px;top:220px;transform:rotate(-3deg)}.q-right{right:0;top:95px;transform:rotate(3deg)}
.paths{padding-top:60px;padding-bottom:150px}.paths-head{max-width:1260px;margin:auto 0 30px;display:flex;align-items:end;justify-content:space-between}.paths-head h2{font-size:clamp(40px,4.2vw,64px);letter-spacing:-.06em;font-weight:440;margin:0}.segmented{background:#ddd;border-radius:999px;padding:4px;display:flex;gap:3px;font-size:11px}.segmented span{padding:8px 13px;border-radius:999px}.segmented .active{background:#fff}.path-grid{max-width:1260px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.path-card{background:#dedede;border-radius:22px;padding:27px;min-height:470px;display:flex;flex-direction:column}.path-card.featured{background:#60a4ef}.path-card.dark{background:#555;color:white}.path-card>span{font-size:11px}.path-card h3{font-size:30px;letter-spacing:-.04em;margin:20px 0 10px}.path-card p{font-size:13px;line-height:1.5;max-width:290px}.path-card ul{list-style:none;margin:30px 0;padding:0;border-top:1px solid rgba(0,0,0,.15)}.path-card li{border-bottom:1px solid rgba(0,0,0,.15);padding:10px 0;font-size:12px}.path-card.dark li{border-color:rgba(255,255,255,.18)}.path-card a{margin-top:auto;background:#161616;color:white;border-radius:999px;text-align:center;padding:13px;font-size:12px}.path-card.dark a{background:white;color:#161616}
.cta-section{padding-top:20px;padding-bottom:120px}.orbit-cta{max-width:1375px;height:600px;border-radius:22px;background:#ddd;position:relative;overflow:hidden;display:grid;place-items:center}.cta-copy{position:relative;z-index:4;text-align:center;max-width:610px}.cta-copy h2{font-size:clamp(42px,5vw,76px);letter-spacing:-.06em;font-weight:440;margin:0 0 18px}.cta-copy p{font-size:14px;line-height:1.45;max-width:480px;margin:0 auto 25px;color:#585858}.cta-actions{display:flex;align-items:center;justify-content:center;gap:18px}.text-link{font-size:12px;border-bottom:1px solid #999;padding-bottom:3px}.orbit{position:absolute;width:140px;height:100px;left:50%;top:50%;animation:orbit 80s linear infinite;transform-origin:0 0}.orbit img{width:140px;height:100px;object-fit:cover;border-radius:40% 60% 35% 65% / 55% 42% 58% 45%}.orbit-one{--r:440px;--a:0deg}.orbit-two{--r:390px;--a:72deg}.orbit-three{--r:455px;--a:144deg}.orbit-four{--r:405px;--a:216deg}.orbit-five{--r:430px;--a:288deg}@keyframes orbit{from{transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1))}to{transform:rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc((var(--a) + 360deg) * -1))}}
.footer{background:#171717;color:#fff;padding:68px clamp(20px,5vw,72px) 25px}.footer-main{max-width:1350px;margin:auto;display:grid;grid-template-columns:1.6fr .7fr 1fr;gap:70px}.footer-logo{display:flex;align-items:center;gap:8px;font-size:25px}.brand-mark.light span{background:#ff6537}.footer-brand p{color:#999;max-width:390px;font-size:12px;line-height:1.5;margin:24px 0}.social-row{display:flex;gap:8px}.social-row span{width:30px;height:30px;border-radius:50%;background:#2d2d2d;display:grid;place-items:center;font-size:9px}.footer-links{display:flex;flex-direction:column;gap:11px;font-size:12px;color:#aaa}.footer-links a:hover{color:white}.footer-bottom{max-width:1350px;margin:70px auto 0;padding-top:20px;border-top:1px solid #303030;display:flex;justify-content:space-between;color:#666;font-size:10px}
.reveal{opacity:0;transform:translateY(30px);filter:blur(7px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1)}.reveal.in{opacity:1;transform:none;filter:none}
@media(max-width:1199px) and (min-width:810px){.brand-word{font-size:26px}.brand-symbol{width:28px;height:28px;flex-basis:28px}.topbar{padding:0 22px;height:96px}.menu-tab{width:184px;height:72px;border-radius:0 0 34px 34px}.top-cta{width:152px;height:50px}.pill-dot{width:38px;height:38px}.roll-label{font-size:15px;margin-left:24px}.mission-grid,.counter-grid{grid-template-columns:1fr;gap:35px}.mission-copy{order:-1}.services-intro{width:calc(100vw - 44px);margin-top:64px}.service-stack{width:calc(100vw - 44px)}.service-card{position:relative;top:auto;height:auto;min-height:620px;margin-bottom:24px;padding:30px;transform:none!important}.service-card-top{grid-template-columns:1fr;gap:22px}.service-card-bottom{grid-template-columns:1fr 1.2fr;height:320px;margin-top:36px;gap:30px}.service-media{height:320px}.service-exit-spacer{display:none}.steps-cards{grid-template-columns:repeat(2,1fr);gap:12px}.step-card{min-height:420px!important}.case-grid{grid-template-columns:1fr}.case-note{margin:-35px 20px 0}.path-grid{grid-template-columns:1fr}.path-card{min-height:340px}.compare-list{grid-template-columns:1fr 1fr}.hero-reels{width:1200px;left:48%}.reel-card{width:290px;height:350px}.footer-main{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.orbit{opacity:.8}}
@media(max-width:809px){.page-shell{border-radius:0}.topbar{height:78px;padding:0 12px}.brand{gap:7px}.brand-symbol{width:22px;height:22px;flex-basis:22px}.brand-word{font-size:18px;letter-spacing:-.045em}.menu-tab{width:132px;height:60px;border-radius:0 0 28px 28px;padding:0 14px 2px;gap:9px;font-size:14px}.menu-dots{transform:scale(.86)}.menu-label-window{min-width:42px;height:20px}.menu-label-track>span{height:20px}.top-cta{width:112px;height:44px;font-size:13px}.pill-dot{left:5px;top:5px;width:34px;height:34px}.roll-label{margin-left:22px}.menu-overlay-inner{padding:100px 16px 26px}.menu-link{font-size:clamp(40px,12vw,58px)}.menu-socials{margin-top:42px;padding-top:26px}.hero{min-height:850px;padding-top:145px}.eyebrow{font-size:11px}.hero-title{font-size:43px;margin-top:30px}.hero-title em{display:inline}.hero-copy{font-size:14px;max-width:330px}.hero-reels{height:290px;bottom:-65px;width:790px}.reel-card{width:180px;height:250px;border-radius:20px}.reel-a{left:6%}.reel-b{left:29%}.reel-stat{left:53%;padding:26px 15px}.reel-c{right:2%}.reel-stat strong{font-size:44px;margin-top:17px}.reel-stat>span{font-size:12px}.avatar-stack img{width:34px;height:34px}.stat-chips{display:none}.platform-strip{padding-top:25px}.manifesto{padding-top:100px;padding-bottom:110px}.manifesto-lines p{font-size:30px}.inline-photo{width:54px;border-radius:8px}.inline-photo.p-two{width:68px}.manifesto-note{font-size:14px;margin-top:35px}.mission{padding-bottom:100px}.photo-pair{height:400px}.services-intro{width:calc(100vw - 36px);margin:58px auto 36px;text-align:left}.services-intro h2{font-size:42px}.services{padding-bottom:80px}.service-stack{width:calc(100vw - 18px)}.service-card{position:relative;top:auto!important;height:auto;min-height:0;margin-bottom:14px;padding:24px 20px;border-radius:20px;transform:none!important}.service-card-top{grid-template-columns:1fr;gap:18px}.service-card-top h3{font-size:42px}.service-card-top p{font-size:14px;max-width:100%}.service-card-bottom{grid-template-columns:1fr;height:auto;margin-top:30px;gap:24px}.service-points{gap:14px}.service-points li{font-size:14px;grid-template-columns:24px minmax(0,1fr);gap:10px}.service-points li .bi{width:20px;height:20px;font-size:18px}.service-media{height:270px;border-radius:20px}.service-exit-spacer{display:none}.case-study{padding-top:70px;padding-bottom:100px}.case-intro h2{font-size:31px}.case-image{height:380px}.compare{height:520px}.compare-list{left:20px;right:20px;grid-template-columns:1fr;font-size:10px}.compare-list span:nth-child(n+3){display:none}.steps{padding-bottom:100px}.steps-head h2{font-size:40px}.steps-head h2 span{display:inline-block;margin-top:7px}.steps-cards{grid-template-columns:1fr;margin-top:70px}.step-card{min-height:390px!important}.counter-media{height:450px}.metric-row{grid-template-columns:140px 1fr}.metric-row strong{font-size:45px}.testimonials-stage{height:780px}.phone-card{width:260px;height:480px}.phone-card img{height:405px}.quote{width:270px}.q-left{left:0;top:455px}.q-right{right:0;top:540px}.paths-head{align-items:center}.segmented{display:none}.orbit-cta{height:540px}.orbit{width:90px;height:68px}.orbit img{width:90px;height:68px}.orbit-one{--r:245px}.orbit-two{--r:220px}.orbit-three{--r:260px}.orbit-four{--r:230px}.orbit-five{--r:250px}.cta-copy{max-width:330px}.cta-copy h2{font-size:43px}.footer-main{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{display:block;line-height:1.8}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track,.orbit{animation:none}.reveal{opacity:1;transform:none;filter:none;transition:none}}


/* Header/menu V3 — these rules intentionally come last so old responsive header values cannot leak through. */
@media(max-width:1199px) and (min-width:810px){
  .topbar{height:116px;padding:0 28px}
  .brand{margin-top:20px}.brand-logo{width:36px;height:36px}
  .menu-tab{top:44px;width:198px;height:76px;font-size:16px}
  .top-cta{width:146px;height:46px;margin-top:20px;font-size:14px}
  .pill-dot{width:36px;height:36px}.roll-label{margin-left:22px}
}
@media(max-width:809px){
  .topbar{height:100px;padding:0 14px}
  .brand{margin-top:17px}.brand-logo{width:30px;height:30px}
  .menu-tab{top:38px;width:154px;height:66px;padding:0 15px 3px;gap:10px;font-size:14px}
  .menu-dots{width:19px;height:19px;flex-basis:19px}
  .menu-label-window{height:20px;min-width:43px}.menu-label-track>span{height:20px}
  .top-cta{width:112px;height:42px;margin-top:17px;font-size:12px}
  .pill-dot{left:4px;top:4px;width:34px;height:34px}.roll-label{margin-left:22px}
  .menu-content-inner{padding:105px 16px 26px}
  .menu-link{font-size:clamp(40px,12vw,58px)}
  .menu-socials{margin-top:40px;padding-top:24px}
  .hero{padding-top:135px}
}

/* ========================================================================
   HEADER / MENU V6 — PULL-TAB SHEET — independently coded, source-locked Ugency lip.
   Supplied Framer source measurements used directly for the closed desktop
   state: Menu 139×52, 20px bottom radius, 18×18 inverse-corner wings,
   Navigation max-width 1340 with 30px gutters, logo 34px high, CTA 170×54.
   ======================================================================== */
:root{
  --viasales-coral:#f1636f;
  --viasales-coral-dark:#c84b57;
}

.menu-surface{
  position:fixed;
  z-index:150;
  inset:0;
  width:100%;
  height:100vh;
  height:100dvh;
  min-width:0;
  background:transparent;
  border:0;
  border-radius:0;
  transform:none;
  pointer-events:none;
  overflow:hidden;
}
.menu-curtain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  pointer-events:none;
}
#menu-curtain-path{fill:#161616}
.menu-wing{display:none!important}

.topbar{
  position:fixed;
  z-index:180;
  top:0;
  left:50%;
  right:auto;
  width:min(1340px,100%);
  height:76px;
  padding:0 30px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  pointer-events:none;
}
.topbar>*{pointer-events:auto}
.brand{
  grid-column:1;
  justify-self:start;
  display:block;
  width:auto;
  height:34px;
  margin:40px 0 0;
  padding:0;
  position:relative;
  z-index:2;
  transform:none;
  will-change:opacity,transform;
}
.brand-logo{
  display:block;
  width:auto;
  height:34px;
  max-width:none;
  object-fit:contain;
}

.menu-tab{
  grid-column:2;
  justify-self:center;
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  width:139px;
  height:52px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:16px;
  font-weight:400;
  line-height:1.2;
  cursor:pointer;
  overflow:visible;
  -webkit-tap-highlight-color:transparent;
  z-index:4;
}
.menu-tab:focus-visible,.roll-button:focus-visible,.menu-link:focus-visible,.menu-social-row a:focus-visible{
  outline:2px solid var(--viasales-coral);
  outline-offset:4px;
}
.menu-dots{
  position:relative;
  display:block;
  flex:0 0 12px;
  width:12px;
  height:12px;
  transform-origin:50% 50%;
  will-change:transform;
}
.menu-dots i{
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  margin:0;
  background:#fff;
  border-radius:999px;
  transform-origin:center;
  will-change:transform,width,height,border-radius;
}
.menu-label-window{
  display:block;
  width:46px;
  min-width:46px;
  height:20px;
  overflow:hidden;
  text-align:left;
}
.menu-label-track{
  display:flex;
  flex-direction:column;
  transform:translateY(0);
  will-change:transform;
}
.menu-label-track>span{
  display:flex;
  align-items:center;
  height:20px;
  white-space:nowrap;
}

.top-cta{
  grid-column:3;
  justify-self:end;
  position:relative;
  width:170px;
  height:54px;
  margin:24px 0 0;
  border-radius:999px;
  background:#dedede;
  color:#171717;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:16px;
  line-height:1;
  transform:none;
  will-change:background-color,color,opacity,transform;
}
.pill-dot{
  position:absolute;
  left:6px;
  top:6px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  display:block;
  will-change:transform;
}
.roll-label{
  position:relative;
  z-index:1;
  margin-left:29px;
  will-change:transform;
}

.menu-content{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:#fff;
  pointer-events:none;
  visibility:hidden;
  overflow:hidden;
  z-index:2;
}
.menu-content-inner{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  padding:86px 24px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.menu-nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:2px;
}
.menu-link{
  display:block;
  color:#929292;
  font-size:clamp(48px,4.1vw,64px);
  line-height:1.03;
  letter-spacing:-.055em;
  font-weight:600;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(22px);
  transition:color .3s cubic-bezier(.44,0,.56,1);
}
.menu-link:hover{color:var(--viasales-coral)}
.menu-link.is-active{color:var(--viasales-coral)}
.menu-link.is-active:hover{color:var(--viasales-coral-dark)}
.menu-socials{
  margin-top:54px;
  padding-top:28px;
  width:min(400px,78vw);
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  opacity:0;
  transform:translateY(14px);
  color:#f2f2f2;
  font-size:14px;
}
.menu-social-row{display:flex;gap:10px}
.menu-social-row a{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#2b2b2b;
  display:grid;
  place-items:center;
  color:#fff;
}
body.menu-open{overflow:hidden}

@media(max-width:809px){
  .topbar{
    width:100%;
    height:58px;
    padding:0 16px;
    grid-template-columns:1fr auto;
  }
  .brand{grid-column:1;height:24px;margin:18px 0 0}
  .brand-logo{height:24px}
  .menu-tab{
    grid-column:2;
    justify-self:end;
    width:104px;
    height:42px;
    margin:0;
    padding:0 24px;
    gap:6px;
    font-size:14px;
  }
  .menu-label-window{width:42px;min-width:42px;height:18px}
  .menu-label-track>span{height:18px}
  .top-cta{display:none}
  .menu-content-inner{padding:76px 16px 24px}
  .menu-link{font-size:clamp(40px,12vw,58px)}
  .menu-socials{margin-top:38px;padding-top:22px}
}



/* V6 pull-tab + real social marks */
.menu-social-row a,
.social-row a{
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#2b2b2b;
  color:#fff;
  transition:background-color .22s cubic-bezier(.16,1,.3,1),color .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1);
}
.menu-social-row a{width:40px;height:40px}
.social-row a{width:30px;height:30px}
.menu-social-row a svg{width:18px;height:18px}
.social-row a svg{width:14px;height:14px}
.menu-social-row a svg,.social-row a svg{
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.menu-social-row a .fill-mark,.social-row a .fill-mark{fill:currentColor;stroke:none}
.menu-social-row a .no-stroke,.social-row a .no-stroke{stroke:none}
.menu-social-row a:hover,.social-row a:hover{background:var(--viasales-coral);color:#171717;transform:translateY(-2px)}
.footer .social-row span{display:none}


/* V7 — Ugency scroll-direction header */
.brand,.top-cta{will-change:transform,opacity}
@media(max-width:809px){.brand,.top-cta{transform:translateY(0)!important}}

/* ========================================================================
   HERO V10 — clean Ugenc(y)-style reel deck + VIASALES media.
   ======================================================================== */
:root{
  --viasales-coral:#f1636f;
  --viasales-orange:#f9a461;
}

/* V38 — Hero CTA now uses the exact same approved geometry as the navbar/mission CTA. */
.hero-cta{
  position:relative;
  width:170px;
  height:54px;
  border-radius:999px;
  background:#171717;
  color:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  margin:0 auto;
  font-size:16px;
  line-height:1;
  will-change:background-color,color;
}
.hero-cta .pill-dot{
  position:absolute;
  left:6px;
  top:6px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  z-index:2;
  margin:0;
  will-change:transform;
}
.hero-cta .roll-label{
  position:relative;
  z-index:1;
  margin-left:29px;
  white-space:nowrap;
  will-change:transform;
}

.hero{
  min-height:auto;
  padding-top:108px;
  padding-bottom:0;
  position:relative;
  overflow:visible;
}
.hero-center{
  max-width:1050px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:5;
}
.hero-title{
  margin:16px auto 22px;
  font-size:clamp(54px,6.35vw,98px);
  line-height:.97;
  font-weight:430;
  letter-spacing:-.066em;
  text-transform:uppercase;
}
.hero-title>span{display:block}
.hero-second{margin-top:16px}
.hero-title em{
  font-style:normal;
  background:var(--viasales-coral);
  color:#fff;
  border-radius:999px;
  padding:.05em .36em .15em;
  white-space:nowrap;
}
.hero-copy{
  max-width:620px;
  margin:0 auto 24px;
  font-size:16px;
  line-height:1.35;
  color:#4d4d4d;
}

.hero-reels{
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  width:1140px;
  height:550px;
  margin:34px auto 0;
  max-width:none;
  overflow:visible;
  z-index:4;
}
.reel-slot{
  position:absolute;
  top:0;
  width:285px;
  height:550px;
  z-index:1;
  pointer-events:auto;
  will-change:transform;
}
.reel-slot-01{left:0}
.reel-slot-02{left:285px}
.reel-slot-03{left:570px}
.reel-slot-04{left:855px}
.reel-card{
  position:relative;
  inset:auto;
  width:285px;
  height:550px;
  border-radius:30px;
  overflow:hidden;
  background:#fff;
  box-shadow:none;
  transform-origin:50% 50%;
  will-change:transform;
  transition:none;
}
.reel-slot-01 .reel-card{transform:rotate(-5deg)}
.reel-slot-02 .reel-card{transform:rotate(5deg)}
.reel-slot-03 .reel-card{transform:rotate(-9deg)}
.reel-slot-04 .reel-card{transform:rotate(5deg)}
.reel-video video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  background:#202020;
}
.reel-stat{
  position:relative;
  left:auto;
  top:auto;
  background:var(--viasales-coral);
  padding:40px 0 22px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#fff;
}
.reel-stat-kicker{
  margin:0;
  max-width:205px;
  font-size:15px;
  line-height:1.15;
  letter-spacing:-.025em;
  color:#fff;
}
.reel-stat strong{
  font-size:82px;
  line-height:.88;
  letter-spacing:-.075em;
  font-weight:430;
  margin-top:42px;
  color:#fff;
}
.reel-stat>span{
  font-size:19px;
  line-height:1.05;
  margin-top:10px;
  color:#fff;
}
.logo-ticker{
  position:absolute;
  left:0;
  right:0;
  height:60px;
  overflow:hidden;
  pointer-events:none;
  z-index:2;
}
.logo-ticker-one{bottom:94px}
.logo-ticker-two{bottom:28px}
.logo-ticker-track{
  position:absolute;
  left:0;
  top:2px;
  height:56px;
  display:flex;
  align-items:center;
  gap:9px;
  width:max-content;
  will-change:transform;
  animation:hero-logo-ticker-left 17s linear infinite;
  animation-delay:-2.4s;
}
.logo-ticker-two .logo-ticker-track{
  animation-name:hero-logo-ticker-right;
  animation-duration:20s;
  animation-delay:-7.1s;
}
.logo-chip{
  width:66px;
  height:56px;
  flex:0 0 66px;
  display:grid;
  place-items:center;
  overflow:visible;
  padding:0;
}
.logo-chip img{
  display:block;
  width:66px;
  height:56px;
  object-fit:contain;
  border:0;
  border-radius:0;
  background:transparent;
  opacity:1;
}
@keyframes hero-logo-ticker-left{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-375px,0,0)}
}
@keyframes hero-logo-ticker-right{
  from{transform:translate3d(-375px,0,0)}
  to{transform:translate3d(0,0,0)}
}

/* The old standalone partner strip is intentionally removed from the DOM. */
.platform-strip{display:none!important}

@media(max-width:1199px) and (min-width:810px){
  .hero{padding-top:112px}
  .hero-title{font-size:clamp(54px,7.1vw,82px)}
  .hero-reels{
    width:min(810px,calc(100vw - 44px));
    height:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
    margin-top:40px;
  }
  .reel-slot{
    position:relative;
    inset:auto!important;
    width:100%;
    height:520px;
    transform:none!important;
  }
  .reel-card{width:100%;height:520px;transform:none!important}
}
@media(max-width:809px){
  .hero{min-height:auto;padding-top:94px;padding-left:14px;padding-right:14px}
  .hero-title{font-size:43px;margin-top:12px;margin-bottom:20px}
  .hero-second{margin-top:10px}
  .hero-copy{font-size:14px;max-width:340px;margin-bottom:22px}
  .hero-cta{width:170px;height:54px;font-size:16px}
  .hero-cta .pill-dot{left:6px;top:6px;width:42px;height:42px}
  .hero-cta .roll-label{margin-left:29px}
  .hero-reels{
    width:100%;
    height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin-top:34px;
  }
  .reel-slot{position:relative;inset:auto!important;width:100%;height:auto;transform:none!important}
  .reel-card{width:100%;height:auto;aspect-ratio:9/15;border-radius:24px;transform:none!important}
  .reel-stat{min-height:510px;aspect-ratio:auto}
}


/* V20 — manifesto: keep the large editorial block centered; center the lower
   paragraph as its own block while preserving left-aligned text inside it. */
.manifesto-copy{
  width:auto;
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.manifesto-lines{
  text-align:left;
}
.manifesto-note{
  width:min(620px,100%);
  max-width:620px;
  margin:58px auto 0;
  text-align:left;
}
@media(max-width:809px){
  .manifesto-copy{max-width:100%}
  .manifesto-note{
    width:min(620px,100%);
    margin:35px auto 0;
    text-align:left;
  }
}

/* V21 — center the manifesto as ONE content block. Everything inside stays left-aligned. */
.manifesto-copy{
  width:min(1120px,100%);
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.manifesto-lines,
.manifesto-note{
  text-align:left;
}
.manifesto-note{
  width:min(620px,100%);
  max-width:620px;
  margin:58px 0 0;
}
@media(max-width:809px){
  .manifesto-copy{
    width:100%;
    max-width:100%;
  }
  .manifesto-note{
    width:min(620px,100%);
    margin:35px 0 0;
  }
}

/* V22 — center the actual visible manifesto block, not a full-width container.
   The block shrink-wraps to its headline content, then is centered as one unit.
   All text inside remains left-aligned and the supporting paragraph shares the same left edge. */
@media (min-width:810px){
  .manifesto-copy{
    width:max-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
  }
  .manifesto-lines{
    width:max-content;
    max-width:100%;
    text-align:left;
  }
  .manifesto-note{
    width:min(620px,100%);
    max-width:620px;
    margin:58px 0 0;
    text-align:left;
  }
}

/* ========================================================================
   V24 — Mission cleanup + CTA fix.
   The prior V23 block was accidentally written with literal "\\n" characters,
   making the browser ignore the entire block. This is the valid replacement.
   ======================================================================== */
.mission-copy > .small-label{
  display:none!important;
}
.badge-black{
  left:40%;
  top:25px;
  padding:9px 16px;
  background:#171717;
  color:#fff;
  white-space:nowrap;
}
.badge-orange{
  background:#F1636F;
  color:#fff;
  padding:9px 16px;
}
/* V37 — Mission CTA uses the exact approved navigation CTA geometry.
   No special label box, no mission-specific travel: same 170×54 shell, 42px dot,
   centered label with the same +29px resting offset and -22px hover travel. */
.mission-cta{
  position:relative;
  width:170px;
  height:54px;
  margin-top:24px;
  padding:0;
  border-radius:999px;
  background:#171717;
  color:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:16px;
  line-height:1;
  will-change:background-color,color;
}
.mission-cta .pill-dot{
  position:absolute;
  left:6px;
  top:6px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  display:block;
  will-change:transform;
}
.mission-cta .roll-label{
  position:relative;
  z-index:1;
  margin-left:29px;
  white-space:nowrap;
  will-change:transform;
}
@media(max-width:809px){
  .mission-cta{width:170px;height:54px;font-size:16px}
  .mission-cta .pill-dot{left:6px;top:6px;width:42px;height:42px}
  .mission-cta .roll-label{margin-left:29px}
  .badge-black,.badge-orange{font-size:11px;padding:8px 12px}
}

/* V34 — COPY-ONLY CORRECTION.
   Preserve the approved component/layout system while accommodating the verified
   VIASALES wording. No section redesign or motion changes. */
@media (min-width:810px){
  .manifesto-copy{
    width:max-content;
    max-width:calc(100vw - 120px);
    margin-left:auto;
    margin-right:auto;
    text-align:left;
  }
  .manifesto-lines{
    width:max-content;
    max-width:100%;
    text-align:left;
  }
  .manifesto-note{
    width:min(620px,100%);
    max-width:620px;
    margin:58px 0 0;
    text-align:left;
  }
}

/* ========================================================================
   V39 — STATIC PROOF / CASE CARD
   Source translation from the supplied Ugency Case Card component:
   - source card: 750×507 inside a 780×566 stage
   - two equal columns
   - image lands at rotate(-4deg)
   - info panel lands at rotate(3deg)
   - 30px radii / 30px panel padding
   Carousel wrapper, progress indicators and second CTA intentionally omitted.
   ======================================================================== */
.proof-case-section{
  padding-top:96px;
  padding-bottom:150px;
}
.proof-case-inner{
  width:min(920px,calc(100vw - 60px));
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:50px;
}
.proof-case-heading{
  width:min(860px,100%);
  text-align:center;
}
.proof-case-heading h2{
  margin:0;
  font-size:clamp(44px,4.65vw,70px);
  line-height:.96;
  letter-spacing:-.062em;
  font-weight:450;
}
.proof-case-stage{
  width:min(780px,100%);
  min-height:566px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  position:relative;
  isolation:isolate;
  overflow:visible;
}
.proof-case-media,
.proof-case-panel{
  height:507px;
  border-radius:30px;
  will-change:transform,opacity;
}
.proof-case-media{
  margin:0;
  overflow:hidden;
  transform:rotate(-4deg);
  transform-origin:center;
  position:relative;
  z-index:1;
  background:#ddd;
}
.proof-case-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.proof-case-panel{
  position:relative;
  z-index:2;
  background:#fff;
  border:1px solid #ececea;
  transform:rotate(3deg);
  transform-origin:center;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#171717;
}
.proof-case-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
}
.proof-case-copy h3{
  margin:0;
  max-width:325px;
  font-size:clamp(34px,2.5vw,40px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:620;
}
.proof-case-copy p{
  margin:20px 0 0;
  max-width:325px;
  font-size:14px;
  line-height:1.45;
  color:#555;
}
.proof-case-copy .proof-case-secondary{
  margin-top:12px;
  color:#777;
}
.proof-case-cta{
  position:relative;
  width:170px;
  height:54px;
  margin-top:64px;
  padding:0;
  border-radius:999px;
  background:#171717;
  color:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:16px;
  line-height:1;
  will-change:background-color,color;
}
.proof-case-cta .pill-dot{
  left:6px;
  top:6px;
  width:42px;
  height:42px;
}
.proof-case-cta .roll-label{
  position:relative;
  z-index:1;
  margin-left:29px;
  white-space:nowrap;
  will-change:transform;
}
.proof-case-results{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:50px;
  border-top:1px solid #ddd;
  padding-top:26px;
}
.proof-case-result{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.proof-case-result strong{
  font-size:42px;
  line-height:.95;
  letter-spacing:-.06em;
  font-weight:620;
}
.proof-case-result span{
  font-size:12px;
  line-height:1.25;
  color:#686868;
}
.proof-case-foot{
  width:min(500px,100%);
  margin:0;
  text-align:center;
  font-size:16px;
  line-height:1.42;
  color:#555;
}

@media(max-width:809px){
  .proof-case-section{padding-top:70px;padding-bottom:100px}
  .proof-case-inner{width:calc(100vw - 36px);gap:34px}
  .proof-case-heading{text-align:left}
  .proof-case-heading h2{font-size:40px;line-height:.98}
  .proof-case-stage{
    width:100%;
    min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:20px;
  }
  .proof-case-media,
  .proof-case-panel{
    height:auto;
    transform:none!important;
    border-radius:20px;
  }
  .proof-case-media{aspect-ratio:1/1.05}
  .proof-case-panel{min-height:440px;padding:24px}
  .proof-case-copy h3{font-size:32px;max-width:100%}
  .proof-case-copy p{max-width:100%;font-size:14px}
  .proof-case-copy .proof-case-secondary{margin-top:10px}
  .proof-case-cta{margin-top:30px}
  .proof-case-results{gap:28px;padding-top:22px}
  .proof-case-result strong{font-size:36px}
  .proof-case-foot{text-align:left;font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  .proof-case-media,.proof-case-panel{opacity:1!important;transform:none!important}
  .proof-case-copy,.proof-case-results{opacity:1!important;transform:none!important}
}

/* ========================================================================
   V45 — Ugency-derived career benefits scroll chapter, fidelity pass.
   Source architecture preserved: sticky 100vh statement, four cards sharing
   one sticky Y target, structural 0/300/600/900px arrival delays, and
   reversible scroll-linked settling. Card surfaces are VIASALES-specific.
   ======================================================================== */
.benefits-story{
  position:relative;
  width:100%;
  padding:0 0 50px;
  overflow:visible;
}
.benefits-story-inner{
  width:min(1660px,100%);
  margin:0 auto;
  padding:0 clamp(18px,4vw,64px);
  position:relative;
}
.benefits-title-stage{
  width:min(980px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:200px 0;
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:visible;
  z-index:0;
}
.benefits-title-copy{
  position:relative;
  z-index:0;
  width:100%;
  will-change:opacity;
}
.benefits-title-copy h2{
  margin:0;
  font-size:clamp(52px,6.2vw,94px);
  line-height:.94;
  letter-spacing:-.065em;
  font-weight:430;
  text-wrap:balance;
}
.benefits-title-blur{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  pointer-events:none;
  user-select:none;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  will-change:opacity;
}
.benefits-card-grid{
  position:relative;
  z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(50px,1fr));
  grid-auto-rows:min-content;
  gap:30px;
  padding:0 0 200px;
  align-items:start;
  overflow:visible;
}
.benefit-column{
  position:relative;
  width:100%;
  height:100%;
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  overflow:visible;
}
.benefit-delay-marker,.benefit-delay-spacer{
  width:100%;
  height:300px;
  flex:none;
}
.benefit-delay-spacer-long{
  width:100%;
  height:600px;
  flex:none;
}
.benefit-card-shell{
  position:sticky;
  top:275px;
  width:100%;
  height:auto;
  flex:none;
  z-index:1;
  transform-origin:50% 50%;
  will-change:transform;
}
.benefit-card{
  --card-bg:#f1636f;
  position:relative;
  width:100%;
  height:518px;
  color:#fff;
  background:var(--card-bg);
  border-radius:30px;
  overflow:visible;
}
.benefit-card-education{--card-bg:#e85e69}
.benefit-card-sweden{--card-bg:#e98a48}
.benefit-card-awards{--card-bg:#bd4d5a}
.benefit-card-career{--card-bg:#d76e43}

/* Real source-style tab shoulders. These are filled SVG quarter shapes,
   not radial-gradient cut-outs, so no white crescent artifacts can appear. */
.benefit-tab{
  position:absolute;
  left:50%;
  top:-38px;
  transform:translateX(-50%);
  z-index:3;
  width:88px;
  height:39px;
  padding:9px 26px 8px;
  border-radius:20px 20px 0 0;
  display:grid;
  place-items:center;
  background:var(--card-bg);
  color:var(--card-bg);
}
.benefit-tab-shoulder{
  position:absolute;
  bottom:0;
  width:18px;
  height:18px;
  display:block;
  overflow:visible;
  pointer-events:none;
}
.benefit-tab-shoulder path{fill:currentColor}
.benefit-tab-shoulder-left{left:-18px}
.benefit-tab-shoulder-right{right:-18px}
.benefit-tab>img{
  width:21px;
  height:21px;
  display:block;
  filter:none;
}
.benefit-card-body{
  height:100%;
  padding:34px 34px 30px;
  display:flex;
  flex-direction:column;
  gap:22px;
  overflow:hidden;
  border-radius:30px;
}
.benefit-visual{
  width:100%;
  min-height:236px;
  flex:0 0 236px;
}
.benefit-copy{
  margin-top:auto;
  min-height:156px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}
.benefit-copy h3{
  margin:0;
  color:#fff;
  font-size:clamp(23px,1.65vw,28px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:650;
  text-wrap:balance;
}
.benefit-copy p{
  margin:0 auto;
  max-width:305px;
  color:rgba(255,255,255,.82);
  font-size:13px;
  line-height:1.42;
  text-wrap:balance;
}

/* Card 01 — source-like stacked status objects. */
.education-stack{
  width:88%;
  max-width:268px;
  margin:0 auto;
  display:grid;
  gap:10px;
  align-content:center;
  padding:8px 0 2px;
}
.education-row{
  min-height:56px;
  padding:0 15px;
  border-radius:15px;
  background:rgba(255,255,255,.96);
  color:#171717;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:650;
  letter-spacing:-.02em;
}
.education-status{
  width:27px;
  height:27px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 27px;
  background:#cf4e59;
}
.education-status-b{background:#dc7544}
.education-status-c{background:#9e424d}
.education-status img{width:14px;height:14px;display:block}

/* Card 02 — source-like matching/orbit visual using real VIASALES imagery. */
.sweden-visual{
  position:relative;
  margin:0 auto;
  display:grid;
  place-items:center;
}
.sweden-ring{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.40);
}
.sweden-ring-outer{width:204px;height:204px}
.sweden-ring-inner{width:154px;height:154px;border-style:dashed;opacity:.75}
.sweden-main{
  position:relative;
  z-index:2;
  width:104px;
  height:104px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid rgba(255,255,255,.96);
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.sweden-main img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.sweden-avatar{
  position:absolute;
  z-index:3;
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--card-bg);
  box-shadow:0 0 0 2px rgba(255,255,255,.85);
}
.sweden-avatar-a{left:42px;top:88px;object-position:center 28%}
.sweden-avatar-b{right:40px;top:42px}
.sweden-avatar-c{right:54px;bottom:24px}

/* Card 03 — media stage + source-backed status chips. */
.awards-visual{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:9px;
}
.awards-media-wrap{
  position:relative;
  width:88%;
  height:178px;
  border-radius:20px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.96);
  background:#9f3f4b;
}
.awards-media-wrap>img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 42%;
}
.awards-chip,
.awards-status span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#171717;
  font-size:10px;
  line-height:1;
  font-weight:650;
  white-space:nowrap;
}
.awards-chip-live{position:absolute;left:12px;bottom:12px}
.awards-status{width:88%;display:flex;justify-content:center;gap:7px;flex-wrap:wrap}

/* Card 04 — source-like progression graphic, with no fabricated metrics. */
.career-visual{
  position:relative;
  width:86%;
  max-width:260px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:6px 4px 0;
}
.career-label{
  align-self:center;
  padding:7px 11px;
  border-radius:7px;
  background:rgba(255,255,255,.96);
  color:#171717;
  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.015em;
}
.career-bars{
  width:100%;
  height:176px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
}
.career-bars i{
  flex:1;
  max-width:32px;
  min-width:18px;
  background:#fff;
  border-radius:10px 10px 3px 3px;
  opacity:.96;
}
.career-bars i:nth-child(1){height:28%}
.career-bars i:nth-child(2){height:38%}
.career-bars i:nth-child(3){height:50%}
.career-bars i:nth-child(4){height:62%}
.career-bars i:nth-child(5){height:73%}
.career-bars i:nth-child(6){height:86%}
.career-bars i:nth-child(7){height:100%}

/* V46: keep the visual scenes subordinate to the card copy. The shells and scroll
   choreography are unchanged; only the internal compositions are reduced. */
.benefit-card-sweden .benefit-visual{max-width:272px;margin-left:auto;margin-right:auto}
.benefit-card-awards .benefit-visual{max-width:292px;margin-left:auto;margin-right:auto}

/* V47: rebalance the whole card after the V46 visual-size reduction.
   The visual zone, title zone and copy zone now form one intentional vertical composition
   instead of anchoring the copy to the bottom and leaving a dead band in the middle. */
@media(min-width:1024px){
  .benefit-card-body{
    display:grid;
    grid-template-rows:228px auto;
    align-content:start;
    row-gap:28px;
  }
  .benefit-visual{
    min-height:0;
    height:228px;
    flex:none;
  }
  .benefit-copy{
    margin-top:0;
    min-height:0;
    display:grid;
    grid-template-rows:56px auto;
    align-content:start;
    justify-items:center;
    gap:10px;
  }
  .benefit-copy h3{
    min-height:56px;
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .benefit-copy p{
    align-self:start;
  }
}

@media(max-width:1199px) and (min-width:1024px){
  .benefits-story-inner{padding-left:30px;padding-right:30px}
  .benefits-card-grid{gap:20px}
  .benefit-card-shell{top:235px}
  .benefit-card{height:500px}
  .benefit-card-body{padding:30px 24px 27px;grid-template-rows:216px auto;row-gap:24px}
  .benefit-visual{min-height:0;height:216px;flex:none}
  .benefit-copy{min-height:0}
  .benefit-copy h3{font-size:22px}
  .benefit-copy p{font-size:12px}
  .education-row{min-height:64px;padding:0 13px;font-size:12px}
  .sweden-ring-outer{width:226px;height:226px}
  .sweden-ring-inner{width:166px;height:166px}
  .sweden-main{width:114px;height:114px}
  .sweden-avatar{width:43px;height:43px}
  .awards-media-wrap{height:166px}
  .career-bars{height:160px;gap:6px}
}

/* Tablet: preserve the information architecture, not the desktop sticky choreography. */
@media(max-width:1023px) and (min-width:810px){
  .benefits-story{padding:150px 0}
  .benefits-story-inner{padding:0 30px}
  .benefits-title-stage{min-height:0;padding:0;position:relative;top:auto;margin-bottom:90px}
  .benefits-title-copy h2{font-size:clamp(52px,7vw,72px)}
  .benefits-title-blur{display:none}
  .benefits-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:68px 30px;padding:0}
  .benefit-column{height:auto}
  .benefit-delay-marker,.benefit-delay-spacer,.benefit-delay-spacer-long{display:none}
  .benefit-card-shell{position:relative;top:auto;transform:none!important}
  .benefit-card{height:500px}
}

/* Phone: one card at a time, normal reading flow. */
@media(max-width:809px){
  .benefits-story{padding:100px 0 110px}
  .benefits-story-inner{padding:0 18px}
  .benefits-title-stage{min-height:0;padding:0;position:relative;top:auto;margin-bottom:76px;text-align:left}
  .benefits-title-copy h2{font-size:42px;line-height:.96;text-align:left}
  .benefits-title-blur{display:none}
  .benefits-card-grid{grid-template-columns:1fr;gap:62px;padding:0}
  .benefit-column{height:auto}
  .benefit-delay-marker,.benefit-delay-spacer,.benefit-delay-spacer-long{display:none}
  .benefit-card-shell{position:relative;top:auto;transform:none!important}
  .benefit-card{height:auto;min-height:500px}
  .benefit-card-body{padding:30px 24px 28px;gap:24px;min-height:500px}
  .benefit-visual{min-height:230px;flex-basis:230px}
  .benefit-copy{min-height:0;text-align:left;align-items:flex-start}
  .benefit-copy p{margin:0;max-width:100%;text-wrap:pretty}
  .sweden-ring-outer{width:238px;height:238px}
  .sweden-ring-inner{width:176px;height:176px}
  .awards-media-wrap{height:172px}
}

@media(prefers-reduced-motion:reduce){
  .benefits-story{padding:150px 0}
  .benefits-title-stage{min-height:0;padding:0;position:relative;top:auto;margin-bottom:90px}
  .benefits-title-copy{opacity:1!important}
  .benefits-title-blur{display:none!important}
  .benefit-delay-marker,.benefit-delay-spacer,.benefit-delay-spacer-long{display:none!important}
  .benefit-card-shell{position:relative!important;top:auto!important;transform:none!important}
  .benefits-card-grid{padding:0;align-items:stretch}
  .benefit-column{height:auto}
}


/* V48 — restore the user-requested chapter heading and remove the oversized
   blank runway before it without shortening the sticky story itself. The title
   is moved toward the top of the existing 100vh stage; the card grid therefore
   keeps its original source-derived entry distance and scroll relationship. */
@media(min-width:1024px){
  .proof-case-section{padding-bottom:64px}
  .benefits-title-stage{
    width:min(1240px,100%);
    min-height:100vh;
    padding:132px 0 120px;
    align-items:flex-start;
  }
  .benefits-title-copy h2{
    font-size:clamp(46px,5.1vw,78px);
    line-height:.95;
    letter-spacing:-.06em;
  }
}

/* V49 — restore the source relationship between the sticky title and the
   approaching cards. V48 moved the title to the top of the viewport, which
   created a visually empty runway. Keep the 100vh sticky stage, but center
   the title again so the first card enters into the title field as in Ugency. */
@media(min-width:1024px){
  .proof-case-section{padding-bottom:64px}
  .benefits-title-stage{
    width:min(1200px,100%);
    min-height:100vh;
    padding:0;
    align-items:center;
    justify-content:center;
  }
  .benefits-title-copy{
    display:flex;
    justify-content:center;
  }
  .benefits-title-copy h2{
    width:min(1120px,100%);
    margin:0 auto;
    font-size:clamp(48px,4.9vw,76px);
    line-height:.94;
    letter-spacing:-.06em;
    text-align:center;
    text-wrap:balance;
  }
}

/* V50 — inter-section spacing correction.
   Keep the source-derived 100vh sticky title/card choreography intact.
   The oversized runway came from carrying 64px of proof-section tail space
   into a chapter whose title already owns a full viewport stage. */
@media(min-width:1024px){
  .proof-case-section{padding-bottom:0}
}


/* V51 — user-requested two-line benefits heading on larger layouts. */
.benefits-title-break{display:inline}
@media(max-width:809px){
  .benefits-title-break{display:none}
}


/* ========================================================================
   V58 — TYPOGRAPHY RESET
   Roboto Condensed is used only for major display headings.
   Inter Display / Inter Variable remains the supporting UI and body family.
   The V51 layout geometry is otherwise preserved.
   ======================================================================== */
:root{
  --font-display:"Roboto Condensed", "Arial Narrow", sans-serif;
  --font-ui:"Inter Display", "InterVariable", "Inter", Arial, Helvetica, sans-serif;
}
html,body,button,input,textarea,select{
  font-family:var(--font-ui);
  font-optical-sizing:none;
  font-variation-settings:"opsz" 32;
}
.hero-title,
.manifesto-lines p,
.mission-copy h2,
.services-intro h2,
.service-card-top h3,
.proof-case-heading h2,
.benefits-title-copy h2,
.testimonials-head h2,
.paths-head h2,
.cta-copy h2,
.case-intro h2,
.compare h2,
.steps-head h2{
  font-family:var(--font-display);
  font-weight:700;
  font-synthesis:none;
  letter-spacing:-.025em;
}
/* Keep the original V51 sizes/line-heights. Roboto Condensed has conventional
   line metrics, so the approved layout does not need per-section font surgery. */

/* V59 — benefits-card cleanup: remove unnecessary pill UI, diversify education
   icons, align all copy blocks to a shared text grid, and rebuild the Sweden
   orbit around a mathematically centered composition. */
.education-status{
  font-style:normal;
  color:#fff;
  font-size:14px;
  line-height:1;
}
.education-status::before{display:block}
.education-status img{display:none}

/* No tag/pill UI inside the awards or career visuals. */
.awards-chip,.awards-status,.career-label{display:none!important}
.awards-visual{gap:0}
.awards-media-wrap{
  width:86%;
  height:194px;
  margin:auto;
}
.career-visual{
  justify-content:center;
  padding:10px 4px 0;
}
.career-bars{
  height:190px;
  margin:auto 0;
}

/* Rebuild the Sweden visual around one precise centre point. */
.sweden-visual{
  width:228px;
  height:228px;
  max-width:228px!important;
  margin:0 auto!important;
  position:relative;
  display:block;
}
.sweden-ring{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.sweden-ring-outer{width:204px;height:204px}
.sweden-ring-inner{width:154px;height:154px}
.sweden-main{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:104px;
  height:104px;
}
.sweden-avatar{
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  width:42px;
  height:42px;
  transform:translate(-50%,-50%) translate(var(--orbit-x),var(--orbit-y));
}
.sweden-avatar-a{--orbit-x:-89px;--orbit-y:0px;object-position:center 28%}
.sweden-avatar-b{--orbit-x:72px;--orbit-y:-70px}
.sweden-avatar-c{--orbit-x:66px;--orbit-y:76px}

/* V60 — tighten and optically center the benefits copy system.
   One-line and two-line titles share the same centered title lane; body copy
   follows immediately instead of leaving a dead band beneath short titles. */
@media(min-width:1024px){
  .benefit-card-body{
    grid-template-columns:minmax(0,1fr);
  }
  .benefit-copy{
    width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:56px auto;
    gap:4px;
    align-content:start;
    justify-items:stretch;
    text-align:center;
  }
  .benefit-copy h3{
    width:100%;
    max-width:100%;
    min-width:0;
    height:56px;
    min-height:0;
    padding:0;
    display:grid;
    place-items:center;
    text-align:center;
    line-height:1;
    white-space:normal;
    text-wrap:balance;
  }
  .benefit-copy p{
    width:min(100%,292px);
    max-width:292px;
    min-width:0;
    justify-self:center;
    align-self:start;
    margin:0;
    text-align:center;
    line-height:1.38;
    text-wrap:pretty;
  }
}

@media(max-width:1199px) and (min-width:1024px){
  /* Keep the Sweden scene inside the narrower laptop card instead of letting
     its intrinsic orbit width expand the copy grid and make the text look off-centre. */
  .sweden-visual{width:168px;height:168px;max-width:168px!important}
  .sweden-ring-outer{width:150px;height:150px}
  .sweden-ring-inner{width:112px;height:112px}
  .sweden-main{width:78px;height:78px}
  .sweden-avatar{width:32px;height:32px}
  .sweden-avatar-a{--orbit-x:-64px;--orbit-y:0px}
  .sweden-avatar-b{--orbit-x:51px;--orbit-y:-49px}
  .sweden-avatar-c{--orbit-x:48px;--orbit-y:53px}
  .awards-media-wrap{height:180px}
  .career-bars{height:178px}
}
.education-status img{width:14px;height:14px;display:block}

/* V61 — optically center the Upptäck Sverige orbit composition.
   The right-side satellites make the mathematically centered orbit read right-heavy,
   so the complete visual cluster is shifted left as one unit. */
@media(min-width:1200px){
  .benefit-card-sweden .sweden-visual{transform:translateX(-16px)}
}
@media(max-width:1199px) and (min-width:1024px){
  .benefit-card-sweden .sweden-visual{transform:translateX(-10px)}
}

/* V62 — VIASALES numbers rebuilt as an asymmetric editorial collage.
   Reference direction: mixed-scale image/stat composition, but translated into
   the existing VIASALES paper + coral/orange system. No pills, icons or KPI grid. */
.impact-stats{
  padding-top:110px;
  padding-bottom:145px;
}
.impact-stats-head{
  width:min(1500px,100%);
  margin:0 auto 62px;
}
.impact-stats-head h2{
  margin:0;
  max-width:980px;
  font-family:var(--font-display);
  font-size:clamp(48px,5vw,76px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:700;
  text-transform:uppercase;
}
.impact-collage{
  width:min(1500px,100%);
  height:620px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(14,minmax(0,1fr));
  grid-template-rows:repeat(7,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.impact-tile{
  min-width:0;
  min-height:0;
  margin:0;
  border-radius:22px;
  overflow:hidden;
  position:relative;
}
.impact-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.impact-photo-recruit{grid-column:1/3;grid-row:2/5}
.impact-photo-recruit img{object-position:50% 34%}
.impact-stat-awards{grid-column:1/3;grid-row:5/8}
.impact-stat-main{grid-column:3/7;grid-row:2/8}
.impact-photo-field{grid-column:7/9;grid-row:2/5}
.impact-photo-field img{object-position:50% 28%}
.impact-photo-b2b{grid-column:7/9;grid-row:5/8}
.impact-photo-b2b img{object-position:48% 44%}
.impact-stat-founded{grid-column:9/12;grid-row:1/4}
.impact-stat-partners{grid-column:12/15;grid-row:1/4}
.impact-photo-wide{grid-column:9/15;grid-row:4/8}
.impact-photo-wide img{object-position:50% 48%}

.impact-stat{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:22px 24px;
  color:#fff;
}
.impact-stat strong{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  line-height:.82;
  letter-spacing:-.055em;
}
.impact-stat span{
  display:block;
  max-width:130px;
  margin-left:auto;
  text-align:right;
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.15;
  font-weight:600;
}
.impact-stat-main{background:#e85e69;padding:30px 32px}
.impact-stat-main strong{font-size:clamp(102px,10vw,158px)}
.impact-stat-main span{font-size:16px;max-width:150px}
.impact-stat-awards{background:#e98a48}
.impact-stat-awards strong{font-size:clamp(58px,5vw,84px)}
.impact-stat-founded{background:#d76e43}
.impact-stat-founded strong{font-size:clamp(54px,4.4vw,74px)}
.impact-stat-partners{background:#bd4d5a}
.impact-stat-partners strong{font-size:clamp(64px,5.3vw,90px)}

/* Give the collage a short assembly without creating another sticky chapter. */
.impact-photo-recruit.reveal{transform:translateY(22px) rotate(-1.6deg);transform-origin:50% 70%}
.impact-stat-awards.reveal{transform:translateY(24px) scale(.975)}
.impact-stat-main.reveal{transform:translateY(30px) scale(.97)}
.impact-photo-field.reveal{transform:translateY(22px) rotate(1.4deg);transform-origin:50% 70%}
.impact-photo-b2b.reveal{transform:translateY(24px) rotate(-1.2deg);transform-origin:50% 70%}
.impact-stat-founded.reveal{transform:translateY(20px) scale(.98)}
.impact-stat-partners.reveal{transform:translateY(24px) scale(.98)}
.impact-photo-wide.reveal{transform:translateY(28px) scale(.985)}
.impact-tile.reveal.in{transform:none}

@media(max-width:1199px) and (min-width:810px){
  .impact-stats{padding-top:90px;padding-bottom:120px}
  .impact-stats-head{margin-bottom:44px}
  .impact-stats-head h2{font-size:clamp(48px,6.2vw,68px);max-width:760px}
  .impact-collage{
    height:860px;
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-rows:repeat(8,minmax(0,1fr));
    gap:16px;
  }
  .impact-stat-main{grid-column:1/4;grid-row:1/5}
  .impact-photo-recruit{grid-column:4/7;grid-row:1/3}
  .impact-stat-awards{grid-column:4/7;grid-row:3/5}
  .impact-photo-field{grid-column:1/3;grid-row:5/7}
  .impact-photo-b2b{grid-column:3/5;grid-row:5/7}
  .impact-stat-partners{grid-column:5/7;grid-row:5/7}
  .impact-photo-wide{grid-column:1/5;grid-row:7/9}
  .impact-stat-founded{grid-column:5/7;grid-row:7/9}
  .impact-stat-main strong{font-size:clamp(96px,13vw,140px)}
  .impact-stat-main span{font-size:15px}
}

@media(max-width:809px){
  .impact-stats{padding-top:78px;padding-bottom:100px}
  .impact-stats-head{margin-bottom:34px}
  .impact-stats-head h2{font-size:42px;line-height:1.02;max-width:350px}
  .impact-collage{
    height:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-rows:154px;
    gap:12px;
  }
  .impact-tile{border-radius:18px}
  .impact-stat{padding:18px}
  .impact-stat span{font-size:12px;max-width:100px}
  .impact-stat-main{grid-column:1/3;grid-row:span 2;min-height:0;padding:22px}
  .impact-stat-main strong{font-size:104px}
  .impact-stat-main span{font-size:14px;max-width:120px}
  .impact-photo-wide{grid-column:1/3;grid-row:span 2;min-height:0}
  .impact-photo-recruit,.impact-stat-awards,.impact-photo-field,.impact-photo-b2b,.impact-stat-founded,.impact-stat-partners{
    grid-column:auto;
    grid-row:auto;
  }
  .impact-stat-awards strong,.impact-stat-partners strong{font-size:58px}
  .impact-stat-founded strong{font-size:48px}
}

/* ========================================================================
   V63 — statistics section rebuilt against the selected IEG4/Awwwards
   reference: compact 6-column × 2-row mosaic, mixed 1×1 / 2×2 / 2×1 tiles.
   The previous separate heading and tall 7-row grid are intentionally removed.
   ======================================================================== */
@media(min-width:1024px){
  .benefits-story{padding-bottom:0}
  .benefits-card-grid{padding-bottom:80px}
}
.impact-stats{
  position:relative;
  width:100%;
  padding:72px 0 118px;
  background:var(--paper);
}
.impact-stats-head{display:none!important}
.impact-collage{
  width:min(1320px,82vw);
  aspect-ratio:750/233;
  height:auto;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.impact-tile{
  min-width:0;
  min-height:0;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  position:relative;
}
.impact-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
/* Exact reference topology: 1×1 stack / 2×2 stat / 1×1 stack /
   1×1 + stat / 2×1 photo. */
.impact-photo-recruit{grid-column:1;grid-row:1}
.impact-stat-awards{grid-column:1;grid-row:2}
.impact-stat-main{grid-column:2/4;grid-row:1/3}
.impact-photo-field{grid-column:4;grid-row:1}
.impact-photo-team{grid-column:4;grid-row:2}
.impact-photo-b2b{grid-column:5;grid-row:1}
.impact-stat-partners{grid-column:6;grid-row:1}
.impact-photo-wide{grid-column:5/7;grid-row:2}

.impact-photo-recruit img{object-position:50% 31%}
.impact-photo-field img{object-position:50% 25%}
.impact-photo-team img{object-position:64% 44%}
.impact-photo-b2b img{object-position:48% 35%}
.impact-photo-wide img{object-position:50% 47%}

.impact-stat{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:14px 16px 13px;
  color:#171717;
}
.impact-stat strong{
  display:block;
  margin:0;
  color:inherit;
  font-family:var(--font-ui);
  font-weight:500;
  line-height:.86;
  letter-spacing:-.065em;
}
.impact-stat>span,
.impact-main-label,
.impact-founded-inline{
  font-family:var(--font-ui);
}
.impact-stat>span{
  display:block;
  align-self:flex-end;
  max-width:112px;
  margin:0;
  text-align:right;
  font-size:11px;
  line-height:1.12;
  font-weight:500;
}
.impact-stat-main{
  background:#f39a72;
  padding:24px 24px 20px;
}
.impact-stat-main>strong{
  font-size:clamp(100px,9.4vw,156px);
  font-weight:450;
}
.impact-main-meta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.impact-founded-inline{
  display:block;
  color:#171717;
  font-size:11px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.02em;
}
.impact-main-label{
  max-width:120px;
  text-align:right;
  font-size:11px;
  line-height:1.12;
  font-weight:500;
}
.impact-stat-awards{background:#f9b95e}
.impact-stat-awards strong{font-size:clamp(43px,4vw,64px)}
.impact-stat-partners{background:#e87568}
.impact-stat-partners strong{font-size:clamp(46px,4.2vw,68px)}

/* The reference is a clean mosaic, not a pile of floating/rotating cards. */
.impact-photo-recruit.reveal,
.impact-stat-awards.reveal,
.impact-stat-main.reveal,
.impact-photo-field.reveal,
.impact-photo-team.reveal,
.impact-photo-b2b.reveal,
.impact-stat-partners.reveal,
.impact-photo-wide.reveal{
  transform:translateY(14px) scale(.992);
}
.impact-tile.reveal.in{transform:none}

@media(max-width:1199px) and (min-width:810px){
  .impact-stats{padding-top:62px;padding-bottom:100px}
  .impact-collage{width:min(900px,86vw);gap:14px}
  .impact-tile{border-radius:16px}
  .impact-stat{padding:12px 13px 11px}
  .impact-stat-main{padding:20px 20px 17px}
  .impact-stat-main>strong{font-size:clamp(86px,11vw,126px)}
  .impact-stat-awards strong,.impact-stat-partners strong{font-size:46px}
  .impact-founded-inline,.impact-main-label,.impact-stat>span{font-size:9px}
}

@media(max-width:809px){
  .benefits-story{padding-bottom:0}
  .impact-stats{padding:54px 16px 84px}
  .impact-collage{
    width:100%;
    aspect-ratio:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:148px;
    gap:12px;
  }
  .impact-tile{border-radius:16px}
  .impact-stat-main{grid-column:1/3;grid-row:span 2;padding:20px}
  .impact-stat-main>strong{font-size:102px}
  .impact-photo-recruit,.impact-stat-awards,.impact-photo-field,.impact-photo-team,
  .impact-photo-b2b,.impact-stat-partners,.impact-photo-wide{
    grid-column:auto;
    grid-row:auto;
  }
  .impact-photo-wide{grid-column:1/3;grid-row:span 2}
  .impact-stat-awards strong,.impact-stat-partners strong{font-size:54px}
  .impact-main-meta{gap:12px}
  .impact-founded-inline{font-size:10px}
  .impact-main-label{font-size:10px}
}

/* ========================================================================
   V64 — UGENCY COUNTER SECTION
   Direct VIASALES adaptation of the Ugency split image / by-the-numbers
   composition. No collage grid, no pill UI, no invented metrics.
   ======================================================================== */
.numbers-section{
  position:relative;
  width:100%;
  padding:72px clamp(22px,2vw,38px) 118px;
  background:var(--paper);
}
.numbers-shell{
  width:min(1660px,100%);
  height:min(840px,calc(100vh - 64px));
  min-height:720px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;
}
.numbers-visual,
.numbers-panel{
  min-width:0;
  min-height:0;
  margin:0;
  border-radius:36px;
  overflow:hidden;
}
.numbers-visual{
  position:relative;
  background:#111;
  isolation:isolate;
}
.numbers-visual>img{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:55% 50%;
  transform:scale(1.01);
}
.numbers-visual-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(13,13,13,0) 38%,rgba(13,13,13,.08) 58%,rgba(13,13,13,.56) 100%);
}
.numbers-visual-title{
  position:absolute;
  z-index:2;
  left:clamp(34px,3.4vw,66px);
  right:clamp(28px,3vw,58px);
  bottom:clamp(40px,4vw,72px);
  display:flex;
  flex-direction:column;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(58px,4.8vw,86px);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-wrap:balance;
}
.numbers-visual-title span{display:block}

.numbers-panel{
  background:#fff;
  padding:clamp(42px,4.1vw,72px) clamp(42px,4.5vw,78px) clamp(36px,3.6vw,62px);
  display:grid;
  grid-template-rows:minmax(0,1.04fr) minmax(0,1fr);
  color:#161616;
}
.numbers-primary{
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 0 clamp(24px,2vw,34px);
}
.numbers-primary strong,
.numbers-row strong{
  font-family:var(--font-display);
  font-weight:700;
  color:#161616;
  font-synthesis:none;
  letter-spacing:-.055em;
}
.numbers-primary strong{
  display:block;
  margin:0;
  font-size:clamp(142px,10.3vw,194px);
  line-height:.82;
}
.numbers-primary span{
  margin-top:clamp(28px,2.2vw,38px);
  font-family:var(--font-ui);
  font-size:clamp(20px,1.55vw,27px);
  line-height:1.12;
  font-weight:500;
  letter-spacing:-.025em;
}
.numbers-rows{
  min-height:0;
  display:grid;
  grid-template-rows:repeat(3,minmax(0,1fr));
}
.numbers-row{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(150px,.95fr) minmax(180px,1.05fr);
  align-items:center;
  column-gap:clamp(28px,3vw,58px);
  border-top:1px solid #dededb;
}
.numbers-row strong{
  display:block;
  margin:0;
  font-size:clamp(70px,5.8vw,106px);
  line-height:.86;
}
.numbers-row span{
  display:block;
  max-width:240px;
  justify-self:start;
  font-family:var(--font-ui);
  font-size:clamp(18px,1.35vw,23px);
  line-height:1.16;
  font-weight:500;
  letter-spacing:-.025em;
  color:#3d3d3b;
}

@media(max-width:1199px) and (min-width:901px){
  .numbers-section{padding:62px 28px 100px}
  .numbers-shell{gap:26px;height:min(720px,calc(100vh - 56px));min-height:650px}
  .numbers-visual,.numbers-panel{border-radius:28px}
  .numbers-panel{padding:42px 42px 36px}
  .numbers-visual-title{font-size:clamp(50px,5.2vw,66px)}
  .numbers-primary strong{font-size:clamp(118px,13vw,154px)}
  .numbers-primary span{font-size:20px;margin-top:24px}
  .numbers-row{grid-template-columns:minmax(120px,.9fr) minmax(140px,1.1fr);column-gap:24px}
  .numbers-row strong{font-size:clamp(58px,7.4vw,82px)}
  .numbers-row span{font-size:17px}
}

@media(max-width:900px){
  .numbers-section{padding:54px 18px 90px}
  .numbers-shell{
    width:100%;
    height:auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .numbers-visual,.numbers-panel{border-radius:24px}
  .numbers-visual{height:62svh;min-height:500px;max-height:660px}
  .numbers-visual-title{
    left:28px;
    right:28px;
    bottom:30px;
    font-size:clamp(48px,10.5vw,70px);
  }
  .numbers-panel{
    display:block;
    padding:42px 28px 30px;
  }
  .numbers-primary{padding:12px 0 44px}
  .numbers-primary strong{font-size:clamp(116px,28vw,164px)}
  .numbers-primary span{font-size:20px;margin-top:24px}
  .numbers-rows{display:block}
  .numbers-row{
    min-height:132px;
    grid-template-columns:minmax(105px,.75fr) minmax(0,1.25fr);
    column-gap:22px;
  }
  .numbers-row strong{font-size:clamp(64px,17vw,92px)}
  .numbers-row span{font-size:18px}
}

@media(max-width:520px){
  .numbers-section{padding:42px 12px 76px}
  .numbers-visual{height:520px;min-height:0}
  .numbers-visual>img{object-position:59% 50%}
  .numbers-visual-title{left:22px;right:20px;bottom:24px;font-size:48px;line-height:.96}
  .numbers-panel{padding:32px 22px 22px}
  .numbers-primary{padding:10px 0 34px}
  .numbers-primary strong{font-size:124px}
  .numbers-primary span{font-size:18px;margin-top:20px}
  .numbers-row{min-height:112px;grid-template-columns:110px minmax(0,1fr);column-gap:16px}
  .numbers-row strong{font-size:62px}
  .numbers-row span{font-size:16px}
}

/* ========================================================================
   V65 — numbers polish requested after V64
   - remove the upper rule above the first secondary metric
   - give each figure its own VIASALES palette accent
   ======================================================================== */
.numbers-row:first-child{border-top:0}
.numbers-primary strong{color:#f1636f}
.numbers-row:nth-child(1) strong{color:#f9a461}
.numbers-row:nth-child(2) strong{color:#bd4d5a}
.numbers-row:nth-child(3) strong{color:#d76e43}

/* ========================================================================
   V67 — TEAM SHOWCASE
   Replaces the old testimonial/phone collage with the four-person team grid
   modeled on the Ugency About section. No supporting statement or CTA.
   ======================================================================== */
.team-showcase{
  padding:34px clamp(18px,2.35vw,42px) 116px;
}
.team-showcase-inner{
  max-width:1640px;
  margin:0 auto;
  background:#fff;
  border-radius:34px;
  padding:76px clamp(34px,5vw,88px) 72px;
  overflow:hidden;
}
.team-showcase-head{
  text-align:center;
  max-width:920px;
  margin:0 auto;
}
.team-showcase-head h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(52px,5.35vw,88px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:700;
  text-transform:uppercase;
}
.team-grid{
  width:100%;
  margin:74px auto 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,2.35vw,38px);
  align-items:stretch;
}
.team-card{
  min-width:0;
  border-radius:34px;
  overflow:hidden;
  background:#f1f1ef;
  box-shadow:0 0 0 1px rgba(22,22,22,.025);
  transform-origin:50% 75%;
  transition-delay:var(--team-delay,0ms);
}
.team-card.reveal{
  transform:translateY(32px) rotate(var(--team-rotate,0deg));
  filter:blur(5px);
}
.team-card.reveal.in{
  transform:translateY(0) rotate(0deg);
  filter:none;
}
.team-card:nth-child(1){--team-rotate:-1.4deg}
.team-card:nth-child(2){--team-rotate:.8deg}
.team-card:nth-child(3){--team-rotate:-.7deg}
.team-card:nth-child(4){--team-rotate:1.25deg}
.team-photo{
  aspect-ratio:310/350;
  overflow:hidden;
  background:#ddd;
}
.team-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 26%;
  transform:scale(1.002);
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.team-card:hover .team-photo img{transform:scale(1.025)}
.team-meta{
  min-height:128px;
  padding:29px 28px 27px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  text-align:left;
}
.team-meta h3{
  margin:0;
  font-family:var(--font-ui);
  font-size:clamp(24px,2vw,32px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:650;
}
.team-meta p{
  margin:8px 0 0;
  font-family:var(--font-ui);
  font-size:clamp(15px,1.3vw,19px);
  line-height:1.2;
  letter-spacing:-.02em;
  color:#565656;
}
@media(max-width:1199px) and (min-width:810px){
  .team-showcase{padding-top:30px;padding-bottom:96px}
  .team-showcase-inner{padding:66px 42px 58px;border-radius:30px}
  .team-showcase-head h2{font-size:clamp(48px,6.2vw,66px)}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:58px}
  .team-card{border-radius:30px}
  .team-meta{min-height:112px;padding:24px 24px 23px}
}
@media(max-width:809px){
  .team-showcase{padding:18px 12px 78px}
  .team-showcase-inner{padding:52px 14px 24px;border-radius:24px}
  .team-showcase-head{padding:0 6px}
  .team-showcase-head h2{font-size:clamp(38px,12vw,54px);line-height:1.01}
  .team-grid{grid-template-columns:1fr;gap:16px;margin-top:42px}
  .team-card{border-radius:24px}
  .team-photo{aspect-ratio:310/330}
  .team-meta{min-height:96px;padding:21px 20px 20px}
  .team-meta h3{font-size:26px}
  .team-meta p{font-size:15px;margin-top:5px}
}
@media(prefers-reduced-motion:reduce){
  .team-card.reveal,.team-card.reveal.in{transform:none;filter:none;transition:none}
  .team-photo img,.team-card:hover .team-photo img{transform:none;transition:none}
}

/* ========================================================================
   V68 — TEAM CARD PROPORTION FIX
   Match the Ugency reference card silhouette more closely without changing
   the four-person content or the surrounding section.
   ======================================================================== */
@media (min-width:1200px){
  .team-grid{
    align-items:start;
  }
  .team-card{
    align-self:start;
    border-radius:38px;
    box-shadow:none;
  }
  .team-photo{
    aspect-ratio:310/350;
    flex:none;
  }
  .team-photo img{
    transform:scale(1.075);
  }
  .team-card:hover .team-photo img{
    transform:scale(1.105);
  }
  .team-card:nth-child(1) .team-photo img{object-position:center 24%;}
  .team-card:nth-child(2) .team-photo img{object-position:center 22%;}
  .team-card:nth-child(3) .team-photo img{object-position:center 24%;}
  .team-card:nth-child(4) .team-photo img{object-position:center 24%;}
  .team-meta{
    height:142px;
    min-height:142px;
    max-height:142px;
    padding:27px 30px 24px;
    justify-content:flex-start;
    gap:0;
  }
  .team-meta h3{
    font-size:clamp(28px,1.9vw,32px);
    line-height:1;
    letter-spacing:-.04em;
    font-weight:650;
  }
  .team-meta p{
    margin-top:6px;
    font-size:clamp(17px,1.28vw,20px);
    line-height:1.15;
    letter-spacing:-.018em;
    color:#4b4b4b;
  }
}

@media (max-width:1199px) and (min-width:810px){
  .team-grid{align-items:start;}
  .team-card{align-self:start;box-shadow:none;}
  .team-meta{
    height:126px;
    min-height:126px;
    max-height:126px;
    padding:24px 25px 20px;
  }
  .team-meta h3{line-height:1;font-size:29px;}
  .team-meta p{margin-top:6px;font-size:18px;line-height:1.15;color:#4b4b4b;}
  .team-photo img{transform:scale(1.06);}
  .team-card:hover .team-photo img{transform:scale(1.085);}
}

@media (max-width:809px){
  .team-grid{align-items:start;}
  .team-card{align-self:start;box-shadow:none;}
  .team-meta{
    height:108px;
    min-height:108px;
    max-height:108px;
    padding:21px 22px 18px;
  }
  .team-meta h3{line-height:1;font-size:26px;}
  .team-meta p{margin-top:5px;font-size:16px;line-height:1.15;color:#4b4b4b;}
}

/* V68 desktop width calibration against the supplied Ugency reference. */
@media (min-width:1200px){
  .team-showcase-inner{
    padding-left:50px;
    padding-right:50px;
  }
  .team-grid{gap:40px;}
}

/* ========================================================================
   V69 — TEAM PORTRAIT CORNER FIX
   The Ugency reference rounds the portrait tile itself, including its lower
   corners. The outer profile card radius is not enough because the portrait
   needs its own visible silhouette above the metadata footer.
   ======================================================================== */
.team-photo{
  border-radius:38px;
  position:relative;
  z-index:1;
}
.team-photo img{
  border-radius:inherit;
}
@media (max-width:1199px) and (min-width:810px){
  .team-photo{border-radius:30px;}
}
@media (max-width:809px){
  .team-photo{border-radius:24px;}
}

/* ========================================================================
   V72 — VIASALES recruitment CTA using the recovered Ugency CTA geometry.
   Source relationship: 1340px shell, 30px gutters, 30px radius, 1:1 rotating
   avatar field inset 40px, six 30deg spokes / twelve image tiles, 80s linear
   loop, centered copy and a soft lower mask. The old five-blob orbit is unused.
   ======================================================================== */
.recruitment-cta-section{
  padding:18px 0 150px;
  position:relative;
}
.recruitment-cta-shell{
  width:min(100%,1340px);
  margin:0 auto;
  padding:0 30px;
}
.recruitment-cta{
  position:relative;
  width:100%;
  min-height:760px;
  padding:210px 0 150px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:30px;
  background:#F1636F;
  isolation:isolate;
}
.recruitment-orbit{
  position:absolute;
  z-index:0;
  left:40px;
  right:40px;
  top:40px;
  aspect-ratio:1/1;
  transform-origin:50% 50%;
  animation:recruitment-orbit-spin 80s linear infinite;
  pointer-events:none;
  will-change:transform;
}
.recruitment-spoke{
  position:absolute;
  left:50%;
  top:50%;
  width:120px;
  height:100%;
  transform:translate(-50%,-50%) rotate(var(--spoke-angle));
  transform-origin:50% 50%;
}
.recruitment-orbit-tile{
  position:absolute;
  left:0;
  width:120px;
  height:120px;
  margin:0;
  overflow:hidden;
  border-radius:30px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.24);
}
.recruitment-orbit-tile-top{top:0}
.recruitment-orbit-tile-bottom{bottom:0;transform:rotate(180deg)}
.recruitment-orbit-tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  transform:scale(1.02);
}
/* Deliberate crop variation while keeping one consistent 120x120 tile system. */
.recruitment-spoke:nth-child(1) .recruitment-orbit-tile-top img{object-position:50% 25%}
.recruitment-spoke:nth-child(1) .recruitment-orbit-tile-bottom img{object-position:75% 50%}
.recruitment-spoke:nth-child(2) .recruitment-orbit-tile-top img{object-position:50% 24%}
.recruitment-spoke:nth-child(2) .recruitment-orbit-tile-bottom img{object-position:50% 40%}
.recruitment-spoke:nth-child(3) .recruitment-orbit-tile-top img{object-position:50% 22%}
.recruitment-spoke:nth-child(3) .recruitment-orbit-tile-bottom img{object-position:68% 50%}
.recruitment-spoke:nth-child(4) .recruitment-orbit-tile-top img{object-position:50% 28%}
.recruitment-spoke:nth-child(4) .recruitment-orbit-tile-bottom img{object-position:26% 50%}
.recruitment-spoke:nth-child(5) .recruitment-orbit-tile-top img{object-position:70% 45%}
.recruitment-spoke:nth-child(5) .recruitment-orbit-tile-bottom img{object-position:50% 24%}
.recruitment-spoke:nth-child(6) .recruitment-orbit-tile-top img{object-position:34% 50%}
.recruitment-spoke:nth-child(6) .recruitment-orbit-tile-bottom img{object-position:50% 20%}

.recruitment-cta-mask{
  position:absolute;
  z-index:1;
  left:-30px;
  right:-30px;
  bottom:-88px;
  height:250px;
  pointer-events:none;
  background:#F1636F;
  filter:blur(24px);
}
.recruitment-cta-copy{
  position:relative;
  z-index:3;
  width:min(650px,calc(100% - 80px));
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:#fff;
}
.recruitment-cta-copy h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(62px,6.2vw,96px);
  line-height:.92;
  letter-spacing:-.035em;
  font-weight:700;
  text-transform:none;
  color:#fff;
}
.recruitment-cta-copy p{
  max-width:610px;
  margin:28px auto 0;
  font-family:var(--font-ui);
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.55;
  letter-spacing:-.018em;
  color:rgba(255,255,255,.96);
}
.recruitment-cta-button{
  position:relative;
  display:grid;
  place-items:center;
  width:176px;
  height:56px;
  margin-top:34px;
  border-radius:999px;
  background:#dedede;
  color:#171717;
  overflow:hidden;
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:600;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
  will-change:background-color,color;
}
.recruitment-cta-button .pill-dot{
  left:5px;
  top:5px;
  width:46px;
  height:46px;
}
.recruitment-cta-button .roll-label{
  margin-left:27px;
}
@keyframes recruitment-orbit-spin{to{transform:rotate(360deg)}}

@media(max-width:1199px) and (min-width:810px){
  .recruitment-cta-section{padding:10px 0 110px}
  .recruitment-cta-shell{padding:0 22px}
  .recruitment-cta{
    min-height:670px;
    padding:190px 0 125px;
    border-radius:26px;
  }
  .recruitment-orbit{left:30px;right:30px;top:30px}
  .recruitment-spoke{width:92px}
  .recruitment-orbit-tile{width:92px;height:92px;border-radius:23px}
  .recruitment-cta-copy{width:min(540px,calc(100% - 64px))}
  .recruitment-cta-copy h2{font-size:clamp(62px,8vw,78px)}
  .recruitment-cta-copy p{font-size:16px;max-width:520px}
  .recruitment-cta-mask{height:220px}
}

@media(max-width:809px){
  .recruitment-cta-section{padding:8px 12px 86px}
  .recruitment-cta-shell{width:100%;padding:0}
  .recruitment-cta{
    min-height:0;
    padding:76px 24px 72px;
    border-radius:24px;
  }
  .recruitment-orbit,.recruitment-cta-mask{display:none}
  .recruitment-cta-copy{width:100%;max-width:430px}
  .recruitment-cta-copy h2{font-size:clamp(54px,17vw,72px);line-height:.94}
  .recruitment-cta-copy p{margin-top:24px;font-size:15px;line-height:1.5}
  .recruitment-cta-button{margin-top:28px;width:166px;height:54px;font-size:15px}
  .recruitment-cta-button .pill-dot{width:44px;height:44px}
}

@media(prefers-reduced-motion:reduce){
  .recruitment-orbit{animation:none}
}

/* ========================================================================
   V73 — FOLLOW US / UGENCY TESTIMONIAL-STAGE ADAPTATION
   Preserve the recovered Ugency relationship: centered heading, two opposing
   continuous rows, 30px gaps, 70px desktop edge fades and one static hand / phone
   composition layered above both tracks. Media comes from real VIASALES Instagram.
   ======================================================================== */
.social-follow-section{
  position:relative;
  padding:74px 0 0;
  background:var(--paper);
  overflow:hidden;
}
.social-follow-shell{
  width:min(100%,1660px);
  margin:0 auto;
  padding:0 30px;
}
.social-follow-head{
  width:min(860px,100%);
  margin:0 auto;
  text-align:center;
}
.social-follow-head h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(58px,5.8vw,88px);
  line-height:.94;
  letter-spacing:-.035em;
  font-weight:700;
  color:var(--ink);
}
.social-follow-head p{
  margin:24px auto 0;
  font-family:var(--font-ui);
  font-size:clamp(16px,1.45vw,21px);
  line-height:1.35;
  letter-spacing:-.018em;
  color:#4e4e4e;
}
.social-follow-head.reveal,
.social-follow-stage.reveal{
  filter:none;
  transform:translateY(40px);
  transition:opacity .45s cubic-bezier(.44,0,.56,1),transform .45s cubic-bezier(.44,0,.56,1);
}
.social-follow-stage.reveal{transition-delay:.05s}
.social-follow-head.reveal.in,
.social-follow-stage.reveal.in{transform:none;filter:none}

.social-follow-stage{
  position:relative;
  height:790px;
  margin-top:38px;
  overflow:hidden;
  isolation:isolate;
}
.social-ticker{
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  height:313px;
  overflow:hidden;
}
.social-ticker-top{top:146px}
.social-ticker-bottom{top:430px}
.social-ticker-track{
  display:flex;
  width:max-content;
  height:100%;
  will-change:transform;
  animation:social-follow-marquee 42s linear infinite;
}
.social-ticker-bottom .social-ticker-track{animation-direction:reverse}
.social-ticker-group{
  flex:none;
  display:flex;
  align-items:stretch;
  gap:30px;
  padding-right:30px;
}
.social-media-tile{
  flex:none;
  width:250px;
  height:313px;
  margin:0;
  border-radius:28px;
  overflow:hidden;
  background:#e8e8e6;
  box-shadow:0 0 0 1px rgba(22,22,22,.035);
}
.social-media-tile img,
.social-media-tile video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.social-media-video video{background:#dededb}
.social-ticker-edge{
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:70px;
  pointer-events:none;
}
.social-ticker-edge-left{
  left:0;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(245,245,244,.88) 24%,rgba(245,245,244,0) 100%);
}
.social-ticker-edge-right{
  right:0;
  background:linear-gradient(270deg,var(--paper) 0%,rgba(245,245,244,.88) 24%,rgba(245,245,244,0) 100%);
}
.social-phone-hand{
  position:absolute;
  z-index:4;
  width:691px;
  left:57%;
  top:-20px;
  transform:translateX(-50%);
  margin:0;
  pointer-events:none;
}
.social-phone-hand img{
  display:block;
  width:100%;
  height:auto;
}
.social-follow-bottom-mask{
  position:absolute;
  z-index:5;
  left:-70px;
  right:-70px;
  bottom:-142px;
  height:420px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(245,245,244,0) 0%,rgba(245,245,244,.18) 20%,var(--paper) 58%,var(--paper) 100%);
  filter:blur(28px);
}
@keyframes social-follow-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media(max-width:1199px) and (min-width:810px){
  .social-follow-section{padding-top:58px}
  .social-follow-shell{padding:0 22px}
  .social-follow-head h2{font-size:clamp(54px,7vw,72px)}
  .social-follow-head p{font-size:17px;margin-top:20px}
  .social-follow-stage{height:710px;margin-top:30px}
  .social-ticker{height:270px}
  .social-ticker-top{top:128px}
  .social-ticker-bottom{top:384px}
  .social-media-tile{width:216px;height:270px;border-radius:24px}
  .social-ticker-group{gap:24px;padding-right:24px}
  .social-phone-hand{width:550px;left:56%;top:-10px}
  .social-ticker-edge{width:54px}
  .social-follow-bottom-mask{height:360px;bottom:-128px}
}

@media(max-width:809px){
  .social-follow-section{padding:52px 0 0}
  .social-follow-shell{padding:0}
  .social-follow-head{padding:0 22px}
  .social-follow-head h2{font-size:clamp(46px,14vw,64px)}
  .social-follow-head p{max-width:340px;margin-top:17px;font-size:15px;line-height:1.4}
  .social-follow-stage{
    height:auto;
    margin-top:24px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .social-phone-hand{
    order:1;
    position:relative;
    z-index:4;
    left:auto;
    top:auto;
    width:min(360px,88vw);
    transform:none;
    margin:0 auto -62px;
  }
  .social-ticker{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    height:224px;
  }
  .social-ticker-top{order:2}
  .social-ticker-bottom{order:3;margin-top:14px}
  .social-media-tile{width:178px;height:224px;border-radius:20px}
  .social-ticker-group{gap:16px;padding-right:16px}
  .social-ticker-track{animation-duration:34s}
  .social-ticker-edge{width:20px}
  .social-follow-bottom-mask{display:none}
}

@media(prefers-reduced-motion:reduce){
  .social-ticker-track{animation-play-state:paused}
  .social-follow-head.reveal,.social-follow-stage.reveal{transform:none;transition:none}
}

/* ========================================================================
   V74 — FOLLOW SECTION QA CORRECTION
   The V73 media stage was materially oversized: the supplied hand asset has
   much tighter transparent bounds than Ugency's source art, so reusing the
   source wrapper width made the phone dominate the section. The two IG rows
   were also too tall and overlapped vertically. This pass calibrates visible
   geometry to the Ugency reference rather than copying source wrapper numbers.
   ======================================================================== */
@media (min-width:1200px){
  .social-follow-section{
    padding-top:82px;
  }
  .social-follow-stage{
    height:650px;
    margin-top:44px;
  }
  .social-ticker{
    height:238px;
  }
  .social-ticker-top{
    top:96px;
  }
  .social-ticker-bottom{
    top:354px;
  }
  .social-media-tile{
    width:190px;
    height:238px;
    border-radius:24px;
  }
  .social-phone-hand{
    width:470px;
    left:51.5%;
    top:8px;
  }
  .social-follow-bottom-mask{
    left:-80px;
    right:-80px;
    bottom:-124px;
    height:340px;
    filter:blur(26px);
  }
}

@media (max-width:1199px) and (min-width:810px){
  .social-follow-section{padding-top:64px}
  .social-follow-head h2{font-size:clamp(50px,6.7vw,68px)}
  .social-follow-stage{
    height:570px;
    margin-top:36px;
  }
  .social-ticker{height:210px}
  .social-ticker-top{top:82px}
  .social-ticker-bottom{top:310px}
  .social-media-tile{
    width:168px;
    height:210px;
    border-radius:22px;
  }
  .social-phone-hand{
    width:405px;
    left:51%;
    top:6px;
  }
  .social-follow-bottom-mask{
    height:300px;
    bottom:-112px;
    filter:blur(24px);
  }
}

@media (max-width:809px){
  .social-follow-section{padding-top:56px}
  .social-follow-stage{margin-top:28px}
  .social-phone-hand{
    width:min(300px,78vw);
    margin:0 auto -42px;
  }
  .social-ticker{height:206px}
  .social-media-tile{
    width:165px;
    height:206px;
    border-radius:20px;
  }
  .social-ticker-bottom{margin-top:12px}
}

/* ========================================================================
   V75 — SOCIAL FOLLOW COMPOSITION BALANCE
   More breathing room between the opposing ticker rows and optical centering
   of the phone itself (not the full hand PNG canvas). The supplied hand asset
   places the phone at ~27% of the image width, so centering the PNG bounding
   box makes the phone read materially left of the page axis.
   ======================================================================== */
@media (min-width:1200px){
  .social-follow-stage{
    height:680px;
  }
  .social-ticker-bottom{
    top:386px; /* top row ends at 334px => 52px true gap */
  }
  .social-phone-hand{
    left:50%;
    transform:translateX(-27.1%);
  }
  .social-follow-bottom-mask{
    height:350px;
    bottom:-122px;
  }
}

@media (max-width:1199px) and (min-width:810px){
  .social-follow-stage{
    height:600px;
  }
  .social-ticker-bottom{
    top:338px; /* top row ends at 292px => 46px true gap */
  }
  .social-phone-hand{
    left:50%;
    transform:translateX(-27.1%);
  }
}

@media (max-width:809px){
  .social-phone-hand{
    transform:translateX(22.9%);
  }
  .social-ticker-bottom{
    margin-top:26px;
  }
}

/* ========================================================================
   V76 — PHONE BODY TRUE CENTER
   The phone body occupies x≈90..739 inside the 1192px source PNG at the top
   of the asset, so its center is ≈414.5px = 34.77% of the PNG width.
   V75 used 27.1%, which leaves the phone visibly to the right of the heading.
   Center the PHONE BODY on the section axis, not the full hand canvas.
   ======================================================================== */
@media (min-width:810px){
  .social-phone-hand{
    left:50%;
    transform:translateX(-34.8%);
  }
}

@media (max-width:809px){
  .social-phone-hand{
    transform:translateX(15.2%);
  }
}

/* ========================================================================
   V77 — UGENCY-STRUCTURE / VIASALES-CONTENT FOOTER
   ======================================================================== */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.menu-social-row a .bi{font-size:18px;line-height:1}
.menu-social-row a:hover{background:#F1636F;color:#171717}

.footer-v77{
  position:relative;
  background:#161616;
  color:#fff;
  border-radius:30px 30px 0 0;
  padding:174px 30px 30px;
  overflow:hidden;
}
.footer-v77-inner{
  width:min(1340px,100%);
  margin:0 auto;
}
.footer-v77-top,
.footer-v77-lower{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:70px;
  align-items:start;
}
.footer-v77-lower{margin-top:92px}
.footer-v77-brand{min-width:0}
.footer-v77-logo{display:inline-block;width:194px;line-height:0}
.footer-v77-logo img{display:block;width:100%;height:auto}
.footer-v77-tagline{
  margin:30px 0 26px;
  max-width:440px;
  color:#929292;
  font-size:19px;
  line-height:1.35;
  letter-spacing:-.025em;
}
.footer-v77-socials{display:flex;gap:12px}
.footer-v77-socials a{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:#2c2c2c;color:#fff;
  transition:transform .2s ease,background-color .2s ease,color .2s ease;
}
.footer-v77-socials a .bi{font-size:19px;line-height:1}
.footer-v77-socials a:hover{transform:translateY(-2px);background:#F1636F;color:#171717}
.footer-v77-socials a:focus-visible,
.footer-v77-page-grid a:focus-visible,
.footer-v77-newsletter-field:focus-visible,
.footer-v77-legal a:focus-visible{outline:2px solid #F1636F;outline-offset:4px}

.footer-v77-pages h2,
.footer-v77-contact h2,
.footer-v77-newsletter h2{
  margin:0 0 22px;
  font-family:"Roboto Condensed",Inter,sans-serif;
  text-transform:uppercase;
  font-size:24px;
  line-height:1;
  letter-spacing:-.035em;
  font-weight:700;
  color:#f4f4f4;
}
.footer-v77-page-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.footer-v77-page-grid a{
  min-width:0;
  height:54px;
  padding:0 20px 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-radius:100px;
  background:#252525;
  color:#a7a7a7;
  font-size:16px;
  letter-spacing:-.02em;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.footer-v77-page-grid a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.footer-v77-page-grid a .bi{flex:0 0 auto;font-size:15px;color:#7e7e7e;transition:color .2s ease,transform .2s ease}
.footer-v77-page-grid a:hover{background:#303030;color:#fff;transform:translateY(-1px)}
.footer-v77-page-grid a:hover .bi{color:#F1636F;transform:translateX(1px)}

.footer-v77-contact-list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  color:#999;
  font-size:18px;
  line-height:1.35;
  letter-spacing:-.02em;
}
.footer-v77-contact-list a{transition:color .18s ease}
.footer-v77-contact-list a:hover{color:#fff}

.footer-v77-newsletter>p{
  margin:-10px 0 18px;
  color:#8f8f8f;
  font-size:16px;
  line-height:1.4;
}
.footer-v77-newsletter-field{
  height:66px;
  border-radius:999px;
  background:#202020;
  padding:0 8px 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:#777;
  font-size:16px;
  transition:background-color .2s ease,color .2s ease;
}
.footer-v77-newsletter-field:hover{background:#252525;color:#aaa}
.footer-v77-newsletter-icon{
  flex:0 0 50px;
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;
  background:#F1636F;color:#171717;
  transition:transform .2s ease,background-color .2s ease;
}
.footer-v77-newsletter-icon .bi{font-size:20px;line-height:1}
.footer-v77-newsletter-field:hover .footer-v77-newsletter-icon{transform:rotate(-7deg) scale(1.03);background:#F9A461}

.footer-v77-legal{
  margin-top:94px;
  padding-top:25px;
  border-top:1px solid #303030;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  color:#686868;
  font-size:13px;
  line-height:1.4;
}
.footer-v77-legal a{transition:color .18s ease}
.footer-v77-legal a:hover{color:#aaa}

/* Recover Ugency's restrained 40px / .45s footer assembly without the global blur. */
.footer-v77 .footer-v77-reveal.reveal{
  opacity:0;
  transform:translateY(40px);
  filter:none;
  transition:opacity .45s cubic-bezier(.44,0,.56,1),transform .45s cubic-bezier(.44,0,.56,1);
}
.footer-v77 .footer-v77-reveal.reveal.in{opacity:1;transform:none;filter:none}
.footer-v77-brand{transition-delay:0s!important}
.footer-v77-pages{transition-delay:.05s!important}
.footer-v77-contact{transition-delay:.10s!important}
.footer-v77-newsletter{transition-delay:.15s!important}
.footer-v77-legal{transition-delay:.20s!important}

@media(max-width:1199px){
  .footer-v77{padding:142px 22px 28px}
  .footer-v77-top,.footer-v77-lower{grid-template-columns:1fr;gap:62px}
  .footer-v77-lower{margin-top:72px}
  .footer-v77-page-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-v77-legal{margin-top:76px}
}

@media(max-width:809px){
  .footer-v77{border-radius:20px 20px 0 0;padding:96px 16px 24px}
  .footer-v77-top,.footer-v77-lower{gap:52px}
  .footer-v77-lower{margin-top:60px}
  .footer-v77-logo{width:168px}
  .footer-v77-tagline{margin:24px 0 22px;font-size:17px}
  .footer-v77-socials a{width:44px;height:44px}
  .footer-v77-pages h2,.footer-v77-contact h2,.footer-v77-newsletter h2{font-size:22px;margin-bottom:18px}
  .footer-v77-page-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .footer-v77-page-grid a{height:52px;padding:0 17px 0 19px;font-size:14px}
  .footer-v77-contact-list{font-size:16px;gap:10px}
  .footer-v77-newsletter>p{font-size:15px;margin-top:-6px}
  .footer-v77-newsletter-field{height:60px;padding-left:20px;font-size:14px}
  .footer-v77-newsletter-icon{width:46px;height:46px;flex-basis:46px}
  .footer-v77-legal{margin-top:64px;padding-top:20px;flex-direction:column;align-items:flex-start;gap:10px;font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  .footer-v77 .footer-v77-reveal.reveal{opacity:1;transform:none;transition:none}
}

/* ========================================================================
   V78 — DESKTOP / PC RHYTHM POLISH
   One page-wide spacing system for >=1200px. Component-specific geometry
   (sticky cards, orbit stages, media proportions) remains untouched.

   Desktop rhythm:
   - 64px minimum horizontal gutter
   - 110px visible chapter gap, built from paired 55px section edges
   - 64px heading/content gap where the section has a separate heading stage
   - sticky narrative sections keep their source-derived scroll geometry
   ======================================================================== */
@media (min-width:1200px){
  :root{
    --pc-gutter:64px;
    --pc-section-edge:55px;
    --pc-section-gap:110px;
    --pc-content-gap:64px;
  }

  /* One desktop page-edge system. */
  .section-pad{
    padding-left:var(--pc-gutter);
    padding-right:var(--pc-gutter);
  }
  .benefits-story-inner,
  .social-follow-shell{
    padding-left:var(--pc-gutter);
    padding-right:var(--pc-gutter);
  }
  .numbers-section,
  .team-showcase{
    padding-left:var(--pc-gutter);
    padding-right:var(--pc-gutter);
  }

  /* Opening content chapter after the bespoke hero stage. */
  .manifesto{
    padding-top:var(--pc-section-gap);
    padding-bottom:var(--pc-section-edge);
  }

  /* Standard content-to-content rhythm: 55px + 55px = 110px. */
  .mission{
    padding-top:var(--pc-section-edge);
    padding-bottom:var(--pc-section-edge);
  }
  .services-intro{
    width:min(calc(100vw - (var(--pc-gutter) * 2)),1280px);
    margin-top:var(--pc-section-edge);
    margin-bottom:var(--pc-content-gap);
  }
  .services{
    padding-bottom:0;
  }
  .proof-case-section{
    padding-top:var(--pc-section-edge);
    padding-bottom:0; /* sticky benefits title already owns the next viewport stage */
  }

  /* Benefits -> numbers uses the same 110px chapter transition. */
  .benefits-card-grid{
    padding-bottom:var(--pc-section-edge);
  }
  .numbers-section{
    padding-top:var(--pc-section-edge);
    padding-bottom:var(--pc-section-edge);
  }

  /* Numbers -> team -> recruitment -> social all use the same chapter edges. */
  .team-showcase{
    padding-top:var(--pc-section-edge);
    padding-bottom:var(--pc-section-edge);
  }
  .recruitment-cta-section{
    padding-top:var(--pc-section-edge);
    padding-bottom:var(--pc-section-edge);
  }
  .social-follow-section{
    padding-top:var(--pc-section-edge);
    padding-bottom:0;
  }

  /* Consistent heading-to-primary-content distance on ordinary sections. */
  .proof-case-inner{
    gap:var(--pc-content-gap);
  }
  .team-grid{
    margin-top:var(--pc-content-gap);
  }
  .social-follow-stage{
    margin-top:var(--pc-content-gap);
  }
  .manifesto-note{
    margin-top:var(--pc-content-gap);
  }

  /* Footer remains its own dark chapter, but uses the same desktop inset. */
  .footer-v77{
    padding:110px var(--pc-gutter) 30px;
  }
}

/* ========================================================================
   V79 — MOBILE SOURCE-FIDELITY REBUILD
   Measured against the supplied Ugency Framer export at 390×844.
   Key source mobile geometry recovered from SSR:
   - nav 76px, centered 133×52 menu tab, 12px inset menu panel
   - hero 1198px with a 358px content stage and 550px horizontal reel deck
   - ordinary content gutters 16px
   - service cards 358px wide in normal reading flow
   - mobile is a recomposition, not a scaled desktop layout
   ======================================================================== */
@media (max-width:809px){
  :root{
    --m-gutter:16px;
    --m-section:96px;
    --m-radius:22px;
  }

  html{scroll-padding-top:76px}
  .section-pad{padding-left:var(--m-gutter);padding-right:var(--m-gutter)}

  /* --- Ugency phone header / menu geometry --- */
  .topbar{
    left:0;
    right:0;
    width:100%;
    height:76px;
    padding:0 16px;
    transform:none;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
  }
  .brand{
    display:block;
    width:auto;
    height:28px;
    margin:18px 0 0;
    z-index:4;
  }
  .brand-logo{width:auto;height:28px}
  .menu-tab{
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:133px;
    height:52px;
    margin:0;
    padding:0;
    justify-self:auto;
    gap:6px;
    font-size:14px;
    z-index:7;
  }
  .menu-dots{width:12px;height:12px;flex-basis:12px}
  .menu-label-window{width:42px;min-width:42px;height:18px}
  .menu-label-track>span{height:18px}
  .top-cta{
    display:grid;
    position:relative;
    width:112px;
    height:44px;
    margin:18px 0 0;
    justify-self:auto;
    font-size:13px;
    z-index:4;
  }
  .top-cta .pill-dot{left:5px;top:5px;width:34px;height:34px}
  .top-cta .roll-label{margin-left:22px}

  /* The source phone menu is a rounded panel below the persistent header,
     not a full-screen typographic takeover. Keep the existing state machine,
     but render its content inside the recovered panel geometry. */
  .menu-curtain{display:none}
  .menu-surface{overflow:visible}
  .menu-content{
    position:fixed;
    inset:auto 12px auto 12px;
    top:62px;
    width:auto;
    height:520px;
    border-radius:20px;
    background:#161616;
    overflow:hidden;
    box-shadow:0 18px 44px rgba(0,0,0,.12);
  }
  .menu-content-inner{
    position:relative;
    inset:auto;
    width:100%;
    height:100%;
    min-height:0;
    padding:48px 50px 28px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
  }
  .menu-nav{width:100%;gap:17px}
  .menu-link{
    font-size:15px;
    line-height:1.2;
    letter-spacing:-.02em;
    font-weight:500;
    transform:translateY(12px);
  }
  .menu-socials{
    width:100%;
    margin-top:auto;
    padding-top:27px;
    gap:14px;
    font-size:11px;
  }
  .menu-social-row{gap:12px}
  .menu-social-row a{width:32px;height:32px}
  .menu-social-row a .bi{font-size:14px}

  /* --- Hero: restore the source mobile silhouette instead of four 9:15
     cards stacked into a 2800px runway. --- */
  .hero{
    min-height:0;
    height:auto;
    padding:130px 16px 96px;
    overflow:hidden;
  }
  .hero-center{width:100%;max-width:358px}
  .hero-title{
    margin:0 auto 22px;
    font-size:44px;
    line-height:.95;
    letter-spacing:-.055em;
  }
  .hero-second{margin-top:8px}
  .hero-copy{max-width:338px;margin-bottom:22px;font-size:14px;line-height:1.42}
  .hero-cta{width:164px;height:52px;font-size:15px}
  .hero-cta .pill-dot{width:40px;height:40px}
  .hero-reels{
    position:relative;
    width:358px;
    max-width:100%;
    height:550px;
    margin:40px auto 0;
    display:block;
    overflow:visible;
  }
  .reel-slot{
    position:absolute;
    top:0!important;
    height:550px;
    transform:none!important;
  }
  .reel-slot-01{left:-8px!important;width:116px}
  .reel-slot-02{left:80px!important;width:116px}
  .reel-slot-03{left:153px!important;width:150px;z-index:3}
  .reel-slot-04{left:260px!important;width:116px}
  .reel-card{
    width:100%;
    height:550px;
    aspect-ratio:auto;
    border-radius:22px;
    transform:none!important;
  }
  .reel-slot-01 .reel-card{transform:rotate(-2.4deg)!important}
  .reel-slot-02 .reel-card{transform:rotate(1.8deg)!important}
  .reel-slot-03 .reel-card{transform:rotate(-1.2deg)!important}
  .reel-slot-04 .reel-card{transform:rotate(2deg)!important}
  .reel-stat{
    min-height:550px;
    padding:50px 10px 24px;
  }
  .reel-stat-kicker{max-width:125px;font-size:10px}
  .reel-stat strong{font-size:56px;margin-top:44px}
  .reel-stat>span{font-size:13px;margin-top:8px}
  .logo-ticker{height:48px}
  .logo-ticker-one{bottom:86px}
  .logo-ticker-two{bottom:30px}
  .logo-ticker-track{height:44px;gap:5px}
  .logo-chip,.logo-chip img{width:48px;height:44px}

  /* --- Editorial chapters --- */
  .manifesto{padding:96px 16px 96px}
  .manifesto-copy{width:100%;max-width:358px;margin:0 auto}
  .manifesto-lines p{font-size:29px;line-height:1.12;letter-spacing:-.05em;margin:3px 0}
  .inline-photo{width:52px;border-radius:8px}
  .inline-photo.p-two{width:66px}
  .manifesto-note{margin-top:36px;font-size:14px;line-height:1.48}

  .mission{padding:0 16px 96px}
  .mission-grid{
    width:100%;
    max-width:358px;
    margin:0 auto;
    grid-template-columns:1fr;
    gap:42px;
    align-items:start;
  }
  .mission-media{order:0}
  .mission-copy{order:1}
  .photo-pair{height:318px}
  .photo-pair figure{width:54%;height:76%;border-radius:22px}
  .photo-pair figure:first-child{left:0;top:55px;transform:rotate(-4deg)}
  .photo-pair figure:nth-child(2){right:0;top:18px;transform:rotate(5deg)}
  .badge-black{left:35%;top:20px}
  .badge-orange{right:0;bottom:34px}
  .mission-copy h2{font-size:38px;line-height:.98;margin-bottom:20px}
  .mission-copy>p{font-size:15px;line-height:1.5;margin:0}
  .mission-cta{margin-top:24px;width:164px;height:52px;font-size:15px}
  .mission-cta .pill-dot{width:40px;height:40px}
  .services-intro{
    width:100%;
    max-width:358px;
    margin:84px auto 34px;
    text-align:left;
  }
  .services-intro h2{font-size:40px;line-height:.96}

  /* --- Services: same 16px page gutter and source-like single card flow. --- */
  .services{padding-bottom:96px}
  .service-stack{width:calc(100vw - 32px);max-width:358px;margin:0 auto}
  .service-card{
    margin-bottom:16px;
    padding:28px 22px 22px;
    border-radius:22px;
  }
  .service-card-top{gap:14px}
  .service-card-top h3{font-size:36px;line-height:.97}
  .service-card-top p{font-size:14px;line-height:1.45}
  .service-card-bottom{margin-top:24px;gap:20px}
  .service-points{gap:10px}
  .service-points li{font-size:13px}
  .service-media{height:246px;border-radius:18px}

  /* --- Static case/proof card --- */
  .proof-case-section{padding:96px 16px 96px}
  .proof-case-inner{width:100%;max-width:358px;gap:30px}
  .proof-case-heading h2{font-size:36px;line-height:.96;letter-spacing:-.05em}
  .proof-case-stage{gap:16px}
  .proof-case-media,.proof-case-panel{border-radius:22px}
  .proof-case-media{aspect-ratio:1/1.03}
  .proof-case-panel{min-height:400px;padding:24px}
  .proof-case-copy h3{font-size:30px}
  .proof-case-copy p{font-size:14px;line-height:1.45}
  .proof-case-results{gap:20px}

  /* --- Benefits: keep normal phone flow, but match the source alignment and
     358px card silhouette instead of treating the copy as a left-only afterthought. --- */
  .benefits-story{padding:96px 0 96px}
  .benefits-story-inner{padding:0 16px;max-width:390px}
  .benefits-title-stage{margin-bottom:64px;text-align:left}
  .benefits-title-copy h2{font-size:40px;line-height:.95;text-align:left}
  .benefits-card-grid{gap:70px}
  .benefit-card{min-height:500px;border-radius:22px}
  .benefit-card-body{min-height:500px;padding:30px 24px 28px;border-radius:22px;gap:24px}
  .benefit-tab{top:-38px}
  .benefit-copy{
    text-align:center;
    align-items:center;
    justify-content:flex-end;
  }
  .benefit-copy h3{width:100%;font-size:25px;text-align:center}
  .benefit-copy p{margin:0 auto;max-width:310px;text-align:center;line-height:1.42}

  /* --- Numbers --- */
  .numbers-section{padding:48px 16px 96px}
  .numbers-shell{gap:16px}
  .numbers-visual,.numbers-panel{border-radius:22px}
  .numbers-visual{height:470px;min-height:0}
  .numbers-visual-title{left:24px;right:24px;bottom:24px;font-size:45px;line-height:.95}
  .numbers-panel{padding:32px 24px 22px}
  .numbers-primary{padding:8px 0 32px}
  .numbers-primary strong{font-size:116px}
  .numbers-primary span{font-size:17px;margin-top:18px}
  .numbers-row{min-height:108px;grid-template-columns:102px minmax(0,1fr);column-gap:16px}
  .numbers-row strong{font-size:58px}
  .numbers-row span{font-size:15px}

  /* --- Team: source About page is also a four-card, ~2236px phone chapter. --- */
  .team-showcase{padding:0 16px 96px}
  .team-showcase-inner{padding:54px 0 24px;border-radius:22px}
  .team-showcase-head{padding:0 14px}
  .team-showcase-head h2{font-size:42px;line-height:.98}
  .team-grid{gap:18px;margin-top:44px;padding:0 0}
  .team-card{border-radius:22px}
  .team-photo{aspect-ratio:358/344}
  .team-meta{min-height:94px;padding:20px 20px 18px}
  .team-meta h3{font-size:26px}
  .team-meta p{font-size:15px}

  /* --- Final CTA: source phone CTA is ~469px. --- */
  .recruitment-cta-section{padding:0 16px 82px}
  .recruitment-cta{padding:64px 22px 60px;border-radius:22px}
  .recruitment-cta-copy h2{font-size:54px;line-height:.94}
  .recruitment-cta-copy p{margin-top:20px;font-size:14px;line-height:1.48}
  .recruitment-cta-button{margin-top:26px}

  /* --- Social stage: preserve the approved phone-first composition. --- */
  .social-follow-section{padding-top:76px}
  .social-follow-head{padding:0 16px}
  .social-follow-head h2{font-size:52px;line-height:.95}
  .social-follow-head p{max-width:340px;margin-top:18px;font-size:15px}
  .social-follow-stage{margin-top:34px}
  .social-phone-hand{width:min(280px,72vw);margin:0 auto -30px}
  .social-ticker{height:200px}
  .social-media-tile{width:160px;height:200px;border-radius:18px}
  .social-ticker-group{gap:16px;padding-right:16px}
  .social-ticker-bottom{margin-top:26px}

  /* Footer already measured almost 1:1 with the Ugency phone footer. */
  .footer-v77{padding:100px 16px 24px}
}

/* ========================================================================
   V80 — MOBILE SOURCE PASS 2
   Recovered directly from Ugency's generated Phone / Open-Phone variants:
   - phone logo height 24px
   - phone Menu component uses 12px 24px padding and a ~43px high shell
   - menu panel sits at top:70px with 16px side insets, 20px radius,
     30px internal padding and 30px group gap
   This pass also corrects the previously invisible mobile Menu shell.
   ======================================================================== */
@media (max-width:809px){
  .topbar{padding:0 16px;height:76px}
  .brand{height:24px;margin-top:20px;max-width:104px}
  .brand-logo{height:24px;width:auto;max-width:104px}

  .menu-tab{
    top:0;
    width:104px;
    height:43px;
    padding:0 12px 2px;
    gap:6px;
    border-radius:0 0 20px 20px;
    background:#161616;
    color:#fff;
    overflow:visible;
  }
  .menu-tab .menu-dots i{background:#fff}
  .menu-dots{width:12px;height:12px;flex-basis:12px}
  .menu-label-window{width:42px;min-width:42px;height:18px}
  .menu-label-track>span{height:18px}

  .top-cta{width:112px;height:42px;margin-top:17px;font-size:12px}
  .top-cta .pill-dot{left:4px;top:4px;width:34px;height:34px}

  .menu-content{
    inset:auto 16px auto 16px;
    top:70px;
    height:430px;
    border-radius:20px;
  }
  .menu-content-inner{
    padding:30px;
    gap:30px;
    align-items:center;
    justify-content:flex-start;
  }
  .menu-nav{gap:20px}
  .menu-link{font-size:14px;line-height:1.15;letter-spacing:-.015em}
  .menu-socials{
    width:100%;
    margin-top:0;
    padding-top:24px;
    gap:14px;
    font-size:11px;
  }
  .menu-social-row{gap:12px}
  .menu-social-row a{width:32px;height:32px}

  /* Ugency's mobile case-study display title is considerably calmer than the
     desktop display scale. Keep the long Swedish proof statement readable. */
  .proof-case-heading h2{font-size:32px;line-height:.98;letter-spacing:-.045em}

  /* Broken remote portraits must not leak alt text into the designed media
     surface if a CDN request is delayed or unavailable. */
  .team-photo img{font-size:0;color:transparent;background:#dedede}
}

@media (max-width:359px){
  .brand{max-width:92px}
  .brand-logo{max-width:92px}
  .top-cta{width:102px}
  .menu-tab{width:96px}
  .hero-title{font-size:40px}
  .manifesto-lines p{font-size:27px}
}

/* ========================================================================
   V81 — FINAL MOBILE FIDELITY POLISH
   Final source comparison pass after rendered 390px review.
   ======================================================================== */
@media (max-width:809px){
  /* Source hero's mobile media stage begins materially lower than the first
     content group. Preserve that pause instead of welding the media to CTA. */
  .hero-reels{margin-top:110px}

  /* Open-phone panel is content-sized in the Framer source. This tighter
     height removes the unused black void from the previous pass. */
  .menu-content{height:375px}
}

/* ========================================================================
   V83 — MOBILE SOURCE REBUILD
   Directly recovered from Ugency Phone/Open-Phone and Home phone variants.
   This block intentionally supersedes V79–V82's invented mobile deck.
   ======================================================================== */
@media (max-width:809px){
  :root{
    --m-gutter:16px;
    --m-radius:20px;
    --m-section:100px;
  }

  /* Ugency Phone navigation: logo left, menu control right. No detached CTA. */
  .topbar{
    left:0;
    right:0;
    top:0;
    transform:none;
    width:100%;
    height:76px;
    padding:0 16px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:start;
  }
  .brand{
    grid-column:1;
    justify-self:start;
    height:24px;
    margin:20px 0 0;
    max-width:104px;
  }
  .brand-logo{height:24px;width:auto;max-width:104px}
  .menu-tab{
    grid-column:2;
    justify-self:end;
    position:relative;
    left:auto;
    right:auto;
    top:0;
    transform:none;
    width:auto;
    min-width:104px;
    height:42px;
    margin:0;
    padding:0 16px 2px;
    border-radius:0 0 20px 20px;
    background:#161616;
    color:#fff;
    gap:6px;
    font-size:14px;
    overflow:hidden;
  }
  .top-cta{display:none!important}

  /* Open-Phone panel from source: 16px inset, top 70, 20px radius,
     right-aligned content, 30px inner spacing. */
  .menu-content{
    position:fixed;
    left:16px;
    right:16px;
    top:70px;
    bottom:auto;
    width:auto;
    height:auto;
    min-height:0;
    max-height:calc(100dvh - 86px);
    border-radius:20px;
    background:#161616;
    overflow:hidden;
    box-shadow:0 18px 44px rgba(0,0,0,.12);
  }
  .menu-content-inner{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    min-height:0;
    padding:30px;
    display:flex;
    flex-direction:column;
    gap:30px;
    align-items:flex-end;
    justify-content:flex-start;
  }
  .menu-nav{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
    gap:20px;
  }
  .menu-link{
    width:auto;
    font-size:14px;
    line-height:1.15;
    letter-spacing:-.015em;
    font-weight:500;
    text-transform:none;
    text-align:right;
    transform:translateY(12px);
  }
  .menu-socials{
    width:100%;
    margin:0;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:flex-end;
    text-align:right;
    gap:14px;
    font-size:11px;
  }
  .menu-social-row{justify-content:flex-end;gap:12px}
  .menu-social-row a{width:32px;height:32px}

  /* Hero Reel Cards — actual Ugency Phone topology:
     360px one-column flow, 30px gap, no overlap/rotation. Reel Card phone
     variant is 400px tall. */
  .hero{
    min-height:0;
    height:auto;
    padding:130px 16px 100px;
    overflow:hidden;
  }
  .hero-center{width:100%;max-width:358px;margin:0 auto}
  .hero-title{
    margin:0 auto 22px;
    font-size:44px;
    line-height:.95;
    letter-spacing:-.055em;
  }
  .hero-second{margin-top:8px}
  .hero-copy{max-width:338px;margin:0 auto 22px;font-size:14px;line-height:1.42}
  .hero-cta{width:164px;height:52px;font-size:15px}
  .hero-cta .pill-dot{width:40px;height:40px;left:6px;top:6px}
  .hero-reels{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:100%;
    max-width:360px;
    height:auto;
    margin:40px auto 0;
    display:grid;
    grid-template-columns:repeat(1,minmax(0,1fr));
    grid-auto-rows:400px;
    gap:30px;
    overflow:visible;
  }
  .reel-slot,
  .reel-slot-01,
  .reel-slot-02,
  .reel-slot-03,
  .reel-slot-04{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:400px!important;
    transform:none!important;
    z-index:auto!important;
  }
  .reel-card,
  .reel-slot-01 .reel-card,
  .reel-slot-02 .reel-card,
  .reel-slot-03 .reel-card,
  .reel-slot-04 .reel-card{
    width:100%!important;
    height:400px!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    border-radius:20px!important;
    transform:none!important;
  }
  .reel-video video{object-fit:cover;object-position:center}
  .reel-stat{
    min-height:0!important;
    padding:40px 20px 20px!important;
  }
  .reel-stat-kicker{max-width:220px;font-size:13px}
  .reel-stat strong{font-size:72px;margin-top:34px}
  .reel-stat>span{font-size:16px;margin-top:8px}
  .logo-ticker-one{bottom:82px}
  .logo-ticker-two{bottom:22px}

  /* Ugency testimonial phone composition: heading -> dedicated 301x608
     phone/hand stage -> ticker rows. No negative-margin collision. */
  .social-follow-section{padding:100px 0 0}
  .social-follow-shell{padding:0}
  .social-follow-head{padding:0 16px}
  .social-follow-head h2{font-size:52px;line-height:.95}
  .social-follow-head p{max-width:340px;margin-top:18px;font-size:15px;line-height:1.4}
  .social-follow-stage{
    width:100%;
    height:auto;
    margin-top:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    overflow:hidden;
  }
  .social-phone-hand{
    order:0;
    position:relative;
    left:auto;
    top:auto;
    transform:none!important;
    width:301px!important;
    height:608px;
    margin:0 auto;
    flex:none;
    z-index:4;
    overflow:visible;
  }
  .social-phone-hand img{
    position:absolute;
    width:301px;
    height:auto;
    right:-30px;
    top:44px;
    max-width:none;
  }
  .social-phone-hand::after{
    content:"";
    position:absolute;
    z-index:5;
    left:-150px;
    right:-150px;
    bottom:-100px;
    height:311px;
    pointer-events:none;
    background:var(--paper);
    filter:blur(60px);
  }
  .social-follow-bottom-mask{display:none!important}
  .social-ticker{
    order:1;
    position:relative;
    left:auto;
    right:auto;
    top:auto!important;
    width:100%;
    height:206px;
    flex:none;
    z-index:3;
  }
  .social-ticker-top{order:1}
  .social-ticker-bottom{order:2;margin-top:0}
  .social-media-tile{width:165px;height:206px;border-radius:20px}
  .social-ticker-group{gap:20px;padding-right:20px}
  .social-ticker-edge{width:20px}
}

@media (max-width:359px){
  .hero-title{font-size:40px}
  .menu-tab{min-width:96px;padding-left:14px;padding-right:14px}
  .social-phone-hand{transform:scale(.94)!important;transform-origin:top center;margin-bottom:-36px}
}

/* ========================================================================
   V83 — MOBILE SOURCE REBUILD / PASS 2
   Tightens the three source-derived phone systems after the first render.
   Values below come from Ugency's generated Phone variants, not desktop
   interpolation: Navigation / Open-Phone, Hero Reel Cards / Phone and the
   Testimonial phone-stage composition.
   ======================================================================== */
@media (max-width:809px){
  /* Ugency's phone navigation does not use the desktop curtain sheet. The
     floating menu panel + dim/blur backdrop are the phone composition. */
  .menu-curtain{display:none!important}
  .menu-surface{background:transparent}

  /* Menu typography recovered from Ugency's phone text presets:
     current item 20px, remaining primary links 18px, uppercase Boldonse. */
  .menu-nav{gap:20px}
  .menu-link{
    font-family:"Boldonse","Roboto Condensed",sans-serif;
    font-size:18px;
    line-height:1.35;
    font-weight:400;
    text-transform:uppercase;
    color:#8b8b8b;
    letter-spacing:0;
  }
  .menu-link.is-active{
    font-size:20px;
    color:var(--viasales-coral);
  }

  /* Hero Reel Card keeps the source 30px card radius on Phone. */
  .reel-card,
  .reel-slot-01 .reel-card,
  .reel-slot-02 .reel-card,
  .reel-slot-03 .reel-card,
  .reel-slot-04 .reel-card{
    border-radius:30px!important;
    overflow:hidden!important;
  }

  /* Source width is exactly 360px; retain 16px safety gutters on narrower
     viewports without allowing any card to become a desktop-style strip. */
  .hero-reels{width:min(360px,calc(100vw - 32px));max-width:none}

  /* Keep the hand stage optically separate from the media belts. */
  .social-follow-stage{gap:30px}
  .social-ticker-bottom{margin-top:0!important}
}

/* ========================================================================
   V84 — MOBILE MENU + UNIFIED GUTTER POLISH
   User-requested corrections:
   1) mobile Menu pull-tab uses the exact desktop visual geometry
   2) mobile open menu panel is white
   3) every mobile section uses one 12px outer gutter token
   ======================================================================== */
@media (max-width:809px){
  :root{--m-gutter:12px}

  /* --------------------------------------------------------------------
     One mobile page gutter. This is intentionally the ONLY outer section
     inset value on phone. Internal card padding remains component-specific.
     -------------------------------------------------------------------- */
  .section-pad,
  .hero,
  .manifesto,
  .mission,
  .proof-case-section,
  .numbers-section,
  .team-showcase,
  .recruitment-cta-section,
  .footer-v77{
    padding-left:var(--m-gutter)!important;
    padding-right:var(--m-gutter)!important;
  }

  .manifesto-copy,
  .mission-grid,
  .services-intro,
  .service-stack,
  .proof-case-inner,
  .benefits-story-inner,
  .hero-center{
    width:100%!important;
    max-width:none!important;
  }

  .services-intro,
  .service-stack{
    width:calc(100vw - (var(--m-gutter) * 2))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .benefits-story-inner{padding-left:var(--m-gutter)!important;padding-right:var(--m-gutter)!important}
  .social-follow-head{padding-left:var(--m-gutter)!important;padding-right:var(--m-gutter)!important}

  /* Hero media now obeys the same exact viewport gutter instead of the old
     360px cap that created ~15–16px margins at common phone widths. */
  .hero-reels{
    width:100%!important;
    max-width:none!important;
  }

  /* --------------------------------------------------------------------
     MOBILE MENU BUTTON — same visual system as desktop.
     The black shape is the same SVG pull-tab used on PC, not a generic
     rounded rectangle. The button itself is transparent and sits above it.
     -------------------------------------------------------------------- */
  .topbar{
    padding-left:var(--m-gutter)!important;
    padding-right:var(--m-gutter)!important;
  }
  .menu-curtain{display:block!important}
  .menu-tab{
    width:139px!important;
    min-width:139px!important;
    height:52px!important;
    padding:0!important;
    gap:6px!important;
    border-radius:0!important;
    background:transparent!important;
    font-size:16px!important;
    font-weight:400!important;
    line-height:1.2!important;
    overflow:visible!important;
  }
  .menu-dots{width:12px!important;height:12px!important;flex-basis:12px!important}
  .menu-dots i{width:4px;height:4px;background:#fff!important}
  .menu-label-window{width:46px!important;min-width:46px!important;height:20px!important}
  .menu-label-track>span{height:20px!important}

  /* --------------------------------------------------------------------
     MOBILE OPEN MENU — white panel, dark text, same shared mobile gutter.
     -------------------------------------------------------------------- */
  .menu-content{
    left:var(--m-gutter)!important;
    right:var(--m-gutter)!important;
    top:70px!important;
    background:#fff!important;
    color:#171717!important;
    border:1px solid rgba(23,23,23,.08);
    box-shadow:0 18px 44px rgba(0,0,0,.12);
  }
  .menu-content-inner{padding:30px!important}
  .menu-link{color:#7b7b7b!important}
  .menu-link:hover{color:var(--viasales-coral)!important}
  .menu-link.is-active{color:var(--viasales-coral)!important}
  .menu-socials{
    color:#4f4f4f!important;
    border-top-color:rgba(23,23,23,.12)!important;
  }
  .menu-social-row a{
    background:#f0f0f0!important;
    color:#171717!important;
  }
  .menu-social-row a:hover{background:var(--viasales-coral)!important;color:#171717!important}
}

@media (max-width:359px){
  /* Keep the desktop-shaped tab while preventing collisions on narrow phones. */
  .menu-tab{width:128px!important;min-width:128px!important}
}

/* ========================================================================
   V85 — MOBILE HEADER BAR CORRECTION
   User clarification:
   - the MOBILE HEADER BAR is white
   - the OPEN MENU PANEL stays dark (revert V84's white-panel mistake)
   - keep V84's desktop-matched black pull-tab and unified 12px gutters
   Desktop/tablet are intentionally untouched.
   ======================================================================== */
@media (max-width:809px){
  /* The fixed white strip belongs behind the navigation chrome, not inside
     the menu panel. It sits below the SVG pull-tab so the black PC-shaped
     menu silhouette remains visible. */
  body::before{
    content:"";
    position:fixed;
    z-index:130;
    left:0;
    right:0;
    top:0;
    height:76px;
    background:#fff;
    pointer-events:none;
  }

  /* Keep the actual topbar transparent so it does not paint over the SVG
     pull-tab living in .menu-surface (z-index:140). */
  .topbar{background:transparent!important}

  /* Revert the V84 misunderstanding: only the header bar is white. The
     opened mobile menu returns to the source-style dark panel. */
  .menu-content{
    background:#161616!important;
    color:#fff!important;
    border:0!important;
    box-shadow:0 18px 44px rgba(0,0,0,.18)!important;
  }
  .menu-link{color:#8b8b8b!important}
  .menu-link:hover{color:var(--viasales-coral)!important}
  .menu-link.is-active{color:var(--viasales-coral)!important}
  .menu-socials{
    color:#efefef!important;
    border-top-color:rgba(255,255,255,.10)!important;
  }
  .menu-social-row a{
    background:#2b2b2b!important;
    color:#fff!important;
  }
  .menu-social-row a:hover{
    background:var(--viasales-coral)!important;
    color:#171717!important;
  }
}

/* ========================================================================
   V86 — MOBILE HEADER SCALE + MENU ARTIFACT + BENEFIT CONTENT BALANCE
   Source-locked to Ugency's Phone navigation proportions:
   - phone navigation row = 58px total (42px Menu + 16px lower inset)
   - Menu control = 42px high, compact ~104px content shell
   - logo = 24px, vertically aligned to the same 16px lower inset
   Also fixes the open-label 2px bleed and recenters each benefit card's
   visual + copy as one composition on phone.
   ======================================================================== */
@media (max-width:809px){
  /* Ugency Phone navigation is 58px tall, not the desktop-height 76px bar. */
  body::before{height:58px!important}
  .topbar{
    height:58px!important;
    padding-left:var(--m-gutter)!important;
    padding-right:var(--m-gutter)!important;
    align-items:start!important;
  }
  .brand{
    height:24px!important;
    margin-top:18px!important;
  }
  .brand-logo{height:24px!important}

  /* Same pull-tab language as desktop, but with Ugency's Phone proportions.
     The SVG lip is generated from these same dimensions in script.js. */
  .menu-tab{
    width:104px!important;
    min-width:104px!important;
    height:42px!important;
    padding:0!important;
    gap:6px!important;
    font-size:14px!important;
    line-height:1!important;
    overflow:visible!important;
  }
  .menu-dots{
    width:12px!important;
    height:12px!important;
    flex-basis:12px!important;
  }
  .menu-dots i{width:4px;height:4px}

  /* JS moves the track by exactly 18px on Phone. V84 had a 20px window,
     leaving a 2px sliver of the previous label visible when open. */
  .menu-label-window{
    width:42px!important;
    min-width:42px!important;
    height:18px!important;
    line-height:18px!important;
  }
  .menu-label-track>span{
    height:18px!important;
    line-height:18px!important;
  }

  /* Keep the source 12px gap between the compact 58px header and the panel. */
  .menu-content{top:70px!important}

  /* Benefits: the visual and the text are one centered composition on phone.
     No visual pinned to the top and copy pinned to the bottom. */
  .benefit-card{min-height:500px!important}
  .benefit-card-body{
    min-height:500px!important;
    height:500px!important;
    padding:30px 24px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:stretch!important;
    gap:28px!important;
  }
  .benefit-visual{
    width:100%!important;
    height:210px!important;
    min-height:210px!important;
    flex:0 0 210px!important;
    margin-top:0!important;
    margin-bottom:0!important;
  }
  .benefit-copy{
    margin-top:0!important;
    min-height:0!important;
    flex:0 0 auto!important;
    justify-content:flex-start!important;
    align-items:center!important;
    text-align:center!important;
    gap:10px!important;
  }
  .benefit-copy h3{margin:0!important;text-align:center!important}
  .benefit-copy p{margin:0 auto!important;text-align:center!important}

  /* Each existing visual has different internals; these alignment rules keep
     the authored asset itself centered inside the shared 210px visual zone. */
  .education-stack{align-content:center!important;padding:0!important}
  .sweden-visual{place-items:center!important}
  .awards-visual{justify-content:center!important}
  .career-visual{justify-content:center!important;padding:0!important}
}

@media (max-width:359px){
  /* Do not re-enlarge the Phone Menu on narrow devices. */
  .menu-tab{width:100px!important;min-width:100px!important}
}

/* ========================================================================
   V87 — MOBILE HEADER REMAINS WHITE WHILE MENU IS OPEN
   The mobile menu surface applies the Ugency-style dim/blur backdrop to the
   page, but the fixed navigation bar must remain above that backdrop. Keep
   the white header strip below the menu control (.topbar z-index:180) and
   above the dimming surface (.menu-surface z-index:150).
   Desktop/tablet unchanged.
   ======================================================================== */
@media (max-width:809px){
  body::before{z-index:170!important}
}
@media (max-width:809px){
  body.menu-open::before{
    background:#fff!important;
    opacity:1!important;
    filter:none!important;
  }
}

/* ========================================================================
   V88 — MOBILE MENU BUTTON RESTORE
   V87 correctly kept the white mobile header above the dim/blur backdrop,
   but that also covered the SVG curtain that had been supplying the black
   pull-tab silhouette. On phone the menu is already a separate floating
   panel, so the control now owns its own source-matched static pull-tab shape.
   Desktop/tablet are untouched.
   ======================================================================== */
@media (max-width:809px){
  /* Phone does not need the desktop curtain SVG for the control silhouette. */
  .menu-curtain{display:none!important}

  .menu-tab{
    position:relative!important;
    background:transparent!important;
    isolation:isolate;
    overflow:visible!important;
  }
  .menu-tab::before{
    content:"";
    position:absolute;
    z-index:0;
    top:0;
    left:50%;
    width:140px;
    height:42px;
    transform:translateX(-50%);
    background:#171717;
    /* Same 104px body + 18px inverse-corner wings + 20px lower radius
       used by the recovered Ugency phone pull-tab geometry. */
    clip-path:path("M 0 0 L 140 0 C 130.059 0 122 9.941 122 18 L 122 22 Q 122 42 102 42 L 38 42 Q 18 42 18 22 L 18 18 C 18 9.941 9.941 0 0 0 Z");
    -webkit-clip-path:path("M 0 0 L 140 0 C 130.059 0 122 9.941 122 18 L 122 22 Q 122 42 102 42 L 38 42 Q 18 42 18 22 L 18 18 C 18 9.941 9.941 0 0 0 Z");
    pointer-events:none;
  }
  .menu-tab > *{position:relative;z-index:1}
}