@font-face{font-family:"Zen Kaku Gothic New";src:url("assets/fonts/zen-400.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url("assets/fonts/zen-500.woff2") format("woff2");font-style:normal;font-weight:500 700;font-display:swap}

/* VIASALES Spatial V6 — brand / interaction / extended-page layer.
   CrearX motion geometry remains in the base stylesheet; this file owns the VIASALES expression. */
:root{
  --vs-coral:#ff7664;
  --vs-coral-deep:#b83f31;
  --vs-coral-dark:#70251d;
  --vs-cream:#f5f1ec;
  --vs-black:#111111;
  --vs-ink:#151515;
  --gutter:clamp(22px,3.2vw,58px);
}
body{font-family:"Zen Kaku Gothic New",Arial,sans-serif;background:#000;color:var(--vs-cream)}
body.intro-locked{overflow:hidden!important}
.sticky{height:100svh;padding:4vmin}
.backdrop{background:#f7f5f1}

/* ---------- official brand ---------- */
.vs-brand img,.footer-brand img,.target-brand img{display:block;width:100%;height:auto}
.vs-header{position:fixed;z-index:150;left:0;right:0;top:0;height:74px;padding:18px var(--gutter);display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;mix-blend-mode:normal}
.vs-brand{pointer-events:auto;width:150px;height:38px;display:flex;align-items:center;position:relative;z-index:3}
.vs-brand img{width:142px}
.vs-header-actions{display:flex;align-items:center;gap:10px;pointer-events:auto;position:relative;z-index:3}

/* ---------- V6.78 pointer-origin reveal controls ----------
   One reusable interaction grammar: the hover layer expands from the exact
   entry coordinate and collapses into the exact exit coordinate. JS owns the
   clip-path geometry; CSS owns only the authored rest/hover visual states. */
.pointer-reveal{--pr-hover-bg:var(--vs-coral);--pr-hover-fg:#111;position:relative;isolation:isolate;overflow:hidden}
.pointer-reveal-layer{position:absolute;inset:0;z-index:6;border-radius:inherit;background:var(--pr-hover-bg);color:var(--pr-hover-fg);clip-path:circle(0px at 50% 50%);pointer-events:none;contain:paint}
.pointer-reveal-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:inherit;pointer-events:none}
.pointer-reveal:focus-visible{outline:2px solid var(--vs-coral);outline-offset:3px}

/* Primary CTAs retain their authored geometry; only the hover language changes. */
.roll-cta{--h:48px;--pr-base-bg:#f8f7f4;--pr-base-fg:#171717;--pr-hover-bg:#161616;--pr-hover-fg:#f8f7f4;--pr-hover-border:transparent;position:relative;isolation:isolate;overflow:hidden;height:var(--h);min-width:150px;padding:0 38px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font:600 15px/1 Arial,sans-serif;letter-spacing:-.015em;background:var(--pr-base-bg);color:var(--pr-base-fg);border:1px solid rgba(20,20,20,.14);white-space:nowrap;transition:border-color .24s ease}
.roll-cta .roll-fill,.roll-cta .roll-token{display:none!important}
.roll-cta .roll-label{position:relative;z-index:2;color:var(--pr-base-fg);mix-blend-mode:normal;pointer-events:none;transform:none!important;transition:none!important}
.roll-cta .pointer-reveal-content{padding:0 38px;font:600 15px/1 Arial,sans-serif;letter-spacing:-.015em;white-space:nowrap}
.roll-cta .pointer-reveal-content .roll-label{color:inherit}
.roll-cta.is-pr-active{border-color:var(--pr-hover-border)}
.roll-cta-light{--pr-base-bg:#f8f7f4;--pr-base-fg:#171717;--pr-hover-bg:#161616;--pr-hover-fg:#f8f7f4;--pr-hover-border:#161616}
.roll-cta-dark{--pr-base-bg:#171717;--pr-base-fg:#f8f7f4;--pr-hover-bg:#f8f7f4;--pr-hover-fg:#171717;--pr-hover-border:#f8f7f4;border-color:rgba(255,255,255,.2)}

/* Menu click-state remains independent: Meny/Stäng + dots/X still own click state. */
.vs-menu-trigger{--pr-hover-bg:var(--vs-coral);--pr-hover-fg:#111;height:48px;min-width:112px;padding:0 18px;border-radius:999px;background:#161616;color:#fff;display:flex;align-items:center;gap:12px;justify-content:center;position:relative;z-index:4;box-shadow:0 6px 22px rgba(0,0,0,.12)}
.vs-menu-trigger .pointer-reveal-content{gap:12px;padding:0 18px}
.menu-dots{width:17px;height:17px;display:grid;grid-template-columns:repeat(2,4px);grid-template-rows:repeat(2,4px);gap:4px;place-content:center;position:relative;z-index:2}
.menu-dots i{width:4px;height:4px;background:currentColor;border-radius:50%;transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .25s,border-radius .25s}
.menu-word{height:18px;overflow:hidden;display:block;font:600 15px/18px Arial,sans-serif;width:48px;text-align:left;position:relative;z-index:2}
.menu-word>span{display:block;height:18px;transition:transform .42s cubic-bezier(.16,1,.3,1)}
body.menu-open .menu-word>span{transform:translateY(-18px)}
body.menu-open .menu-dots i:nth-child(1){transform:translate(4px,4px) rotate(45deg) scaleX(2.7);border-radius:3px}
body.menu-open .menu-dots i:nth-child(4){transform:translate(-4px,-4px) rotate(-45deg) scaleX(2.7);border-radius:3px}
body.menu-open .menu-dots i:nth-child(2),body.menu-open .menu-dots i:nth-child(3){opacity:0}
.vs-menu-overlay{position:fixed;inset:0;z-index:140;color:#fff;pointer-events:none;clip-path:circle(0 at calc(100% - 86px) 36px);transition:clip-path .82s cubic-bezier(.16,1,.3,1);background:#111}
body.menu-open .vs-menu-overlay{clip-path:circle(155vmax at calc(100% - 86px) 36px);pointer-events:auto}
.vs-menu-disc{display:none}
.vs-menu-content{position:absolute;inset:0;padding:clamp(110px,13vh,160px) var(--gutter) 48px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:space-between;opacity:0;transform:translateY(20px);transition:opacity .35s ease .12s,transform .55s cubic-bezier(.16,1,.3,1) .1s}
body.menu-open .vs-menu-content{opacity:1;transform:none}
.vs-menu-nav{display:flex;flex-direction:column;align-items:flex-start}
.vs-menu-nav a{font-size:clamp(48px,6.2vw,104px);line-height:.98;letter-spacing:-.06em;font-weight:400;opacity:.55;transition:opacity .22s,transform .32s cubic-bezier(.16,1,.3,1)}
.vs-menu-nav a:hover,.vs-menu-nav a:focus-visible{opacity:1;transform:translateX(12px)}
.vs-menu-foot{align-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right;color:rgba(255,255,255,.55)}
.vs-menu-social-label{font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.42)}
.vs-menu-socials{display:flex;align-items:center;gap:10px}
.vs-menu-socials a{--pr-hover-bg:var(--vs-coral);--pr-hover-fg:#111;width:50px;height:50px;border:1px solid rgba(245,241,236,.22);border-radius:50%;display:grid;place-items:center;color:rgba(245,241,236,.92);transition:border-color .28s ease}
.vs-menu-socials svg{display:block;width:18px;height:18px;fill:currentColor}
.vs-menu-socials a .pointer-reveal-content svg{width:18px;height:18px;fill:currentColor}
.vs-menu-socials a.is-pr-active{border-color:var(--vs-coral)}

/* ---------- V6.89 premium readiness loader ----------
   One calm brand gesture, then a two-panel reveal into the live hero.
   No spinner, no fake progress, no full-screen blur/glow work. */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;background:transparent;isolation:isolate;touch-action:none}
.loader-panel{position:absolute;left:0;width:100%;height:50.5%;background:#0d0d0d;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.loader-panel-top{top:0}
.loader-panel-bottom{bottom:0}
.loader-lockup{position:relative;z-index:3;display:grid;place-items:center;pointer-events:none}
.loader-mark-mask{overflow:hidden;padding:10px 8px}
.loader-mark{width:clamp(210px,22vw,356px);opacity:0;transform:translate3d(0,115%,0) scale(.985);transform-origin:50% 50%;will-change:transform,opacity}
.loader-mark img{display:block;width:100%;height:auto;filter:brightness(0) invert(1)}
@media(max-width:760px){.loader-mark{width:clamp(196px,58vw,262px)}}
@media(prefers-reduced-motion:reduce){.loader-panel,.loader-mark{will-change:auto}}

/* ---------- hero ---------- */
.hero-card{background:#220b08}
.hero-headline{padding:clamp(112px,12vh,144px) clamp(28px,3.2vw,54px) clamp(28px,3.2vw,54px)}
.hero-headline h1{font-size:clamp(62px,7.4vw,142px);max-width:92%;line-height:.9;letter-spacing:-.055em}
.hero-headline .dim{opacity:.44}
.hero-bottom{padding:clamp(28px,3.2vw,54px)}
.hero-para{font-size:clamp(15px,1vw,18px);max-width:32rem;line-height:1.55;text-wrap:balance}
.hero-slider{box-shadow:0 30px 90px rgba(0,0,0,.32)}
.hero-browse h2{font-size:clamp(24px,2.7vmin,42px)}

/* ---------- carousel faces: media first, readable only when they earn focus ---------- */
.orbit-media{position:relative;width:100%;height:100%;overflow:hidden;border-radius:3vmin;background:#151515;color:#fff}
.orbit-media>img,.orbit-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.orbit-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.22) 58%,rgba(0,0,0,.9) 100%)}
.orbit-copy{position:absolute;left:0;right:0;bottom:0;padding:3.2vmin;transform:translateY(calc((1 - var(--focus,1))*16px));opacity:calc(.48 + var(--focus,1)*.52)}
.orbit-copy h3{font-size:clamp(30px,4vmin,64px);line-height:.96;letter-spacing:-.045em;font-weight:400;text-wrap:balance}
.orbit-copy p{margin-top:1.3vmin;max-width:34ch;font-size:clamp(13px,1.65vmin,20px);line-height:1.38;opacity:clamp(0,calc((var(--focus,1) - .68)*3.2),1);transform:translateY(calc((1 - var(--focus,1))*18px));transition:none}
.sphere-face{background:linear-gradient(150deg,#ff7664 0%,#ec6252 46%,#5a201a 100%)}
.sphere-face-inner{padding:3.2vmin}
.sphere-face-top{justify-content:flex-start}
.sphere-face h3{font-size:clamp(34px,4.5vmin,72px);letter-spacing:-.045em;line-height:.98;max-width:92%;margin-top:auto}
.sphere-face-copy{font-size:clamp(13px,1.55vmin,19px);line-height:1.4;max-width:35ch;margin-top:1.4vmin;opacity:clamp(0,calc((var(--focus,1) - .68)*3.2),1)}
.brand-symbol-crop{display:block;width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none}
.brand-symbol-crop img{display:block;height:100%;width:auto;max-width:none;object-fit:initial}

/* ---------- circle transition / particle world ---------- */
.black-screen{background:#000;mask:none!important;-webkit-mask:none!important;clip-path:circle(var(--circle-r,3vmin) at 50% 50%);will-change:transform,clip-path}
.sphere-scene{background:#000}
.sphere-brand{position:absolute;left:50%;top:50%;z-index:5;width:88px;height:88px;transform:translate(-50%,-50%);display:grid;place-items:center}
.sphere-brand .brand-symbol-crop{width:76px;height:76px}
.sphere-logo{display:none!important}
.sphere-h-top{left:var(--gutter);top:var(--gutter);font-size:clamp(64px,10vw,172px);line-height:.86;letter-spacing:-.06em;max-width:70vw}
.sphere-h-bottom{right:var(--gutter);bottom:var(--gutter);font-size:clamp(70px,11.5vw,200px);line-height:.82;letter-spacing:-.065em;max-width:72vw}
.sphere-body{left:var(--gutter);bottom:var(--gutter);font-size:clamp(15px,1.15vw,20px);max-width:min(560px,40vw);gap:24px}
.sphere-metrics{display:grid;grid-template-columns:repeat(4,auto);gap:28px}
.sphere-metrics span{display:flex;flex-direction:column}
.sphere-metrics b{font-weight:400;font-size:clamp(26px,2.2vw,44px);line-height:1}
.sphere-metrics small{font-size:12px;color:rgba(255,255,255,.62);margin-top:5px}
.aurora{mix-blend-mode:screen}

/* ---------- video chapter ---------- */
.portfolio{background:transparent;padding-top:7vh;padding-bottom:7vh}
.pf-track{gap:2.2vw;padding-left:2.2vw}
.pf-card{width:66vw;border-radius:24px;padding:clamp(24px,3vw,46px);background:#151515;isolation:isolate}
.pf-card video{filter:saturate(.94) contrast(1.04)}
.pf-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.08) 55%,rgba(0,0,0,.7))}
.pf-card h3{font-size:clamp(56px,7vw,126px);max-width:88%;letter-spacing:-.055em;position:relative;z-index:2;color:#fff;text-wrap:balance}

/* ---------- final spatial target: no white frame ---------- */
.target{background:#111;border-radius:30px;isolation:isolate}
.target-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.03)}
.target-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,4,1,.85),rgba(18,4,1,.25) 52%,rgba(18,4,1,.02));z-index:1}
.target-brand{position:absolute;left:var(--gutter);top:var(--gutter);z-index:3;width:clamp(150px,16vw,260px)}
.cta-block{z-index:3;padding:var(--gutter);justify-content:flex-end;align-items:flex-start;padding-bottom:8vh}
.cta-block h2{font-size:clamp(64px,8vw,142px);max-width:70vw;letter-spacing:-.055em}
.cta-block p{font-size:clamp(15px,1.25vw,21px);max-width:40ch;color:rgba(255,255,255,.82)}

/* ---------- extended site shared ---------- */
.extended{position:relative;background:#f5f1ec;color:#171717;z-index:60}
.extended section{position:relative}
.extended img,.extended video{max-width:100%}

/* Services V6.36 — structured intro + one consistent card typography contract. */
.services-stack{
  height:390vh;
  background:#f5f1ec;
  color:#171717;
  --svc-head-top:clamp(84px,9.5svh,104px);
  --svc-top:220px;
  --svc-card-h:620px;
  --svc-radius:34px;
  --svc-stack-gap:18px;
  --svc-copy-pad:clamp(34px,3.6vw,64px);
  --svc-title-size:clamp(52px,5.35vw,92px);
  --svc-body-size:clamp(15px,1.08vw,18px);
}
.services-stack-sticky{position:sticky;top:0;height:100svh;overflow:hidden;padding:0 var(--gutter)}
.services-stack-head{
  position:absolute;
  z-index:20;
  left:var(--gutter);
  right:var(--gutter);
  top:var(--svc-head-top);
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  align-items:end;
  column-gap:clamp(52px,6vw,110px);
  pointer-events:none;
}
.services-stack-head>h2{
  margin:0;
  font-size:clamp(42px,4.35vw,72px);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.052em;
  color:#171717;
}
.services-stack-head>p{
  margin:0;
  max-width:47ch;
  justify-self:end;
  font-size:clamp(17px,1.45vw,25px);
  font-weight:400;
  line-height:1.28;
  letter-spacing:-.024em;
  text-align:left;
  color:rgba(23,23,23,.72);
}
.services-stack-stage{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);top:var(--svc-top);height:var(--svc-card-h);perspective:1600px}
.service-stack-card{
  position:absolute;
  inset:0;
  border-radius:var(--svc-radius);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  transform-origin:50% 0%;
  will-change:transform;
  backface-visibility:hidden;
  box-shadow:0 24px 70px rgba(34,20,16,.08);
  border:1px solid rgba(23,23,23,.08);
}
.service-stack-card--reverse{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.service-stack-card--reverse .service-stack-copy{order:2}.service-stack-card--reverse .service-stack-media{order:1}
.service-stack-card--cream{background:#f7f2ec;color:#171717}
.service-stack-card--dark{background:#171717;color:#fff;border-color:rgba(255,255,255,.08)}
.service-stack-card--coral{background:#ef735f;color:#fff;border-color:rgba(255,255,255,.13)}
.service-stack-card--deep{background:linear-gradient(135deg,#a84539 0%,#cf5e4d 58%,#eb8b62 100%);color:#fff;border-color:rgba(255,255,255,.08)}
.service-stack-copy{
  position:relative;
  z-index:2;
  padding:var(--svc-copy-pad);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  overflow:hidden;
}
.service-stack-copy h2{
  margin:0;
  font-size:var(--svc-title-size);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.058em;
  max-width:11.5ch;
  text-wrap:pretty;
}
.service-stack-copy p{
  margin:clamp(18px,2.2vh,26px) 0 0;
  font-size:var(--svc-body-size);
  font-weight:400;
  line-height:1.46;
  letter-spacing:-.012em;
  max-width:34ch;
  color:inherit;
  opacity:.84;
}
.service-stack-card--coral .service-stack-copy p,.service-stack-card--dark .service-stack-copy p,.service-stack-card--deep .service-stack-copy p{opacity:.9}
.service-stack-media{margin:clamp(12px,1.15vw,18px);border-radius:calc(var(--svc-radius) - 10px);overflow:hidden;min-width:0;background:#d8d3cc;align-self:stretch}
.service-stack-media img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.015);transform-origin:center;will-change:transform}
.service-stack-card--cream .service-stack-media img{object-position:50% 50%}
.service-stack-card--dark .service-stack-media img{object-position:58% 50%}
.service-stack-card--coral .service-stack-media img{object-position:50% 45%}
.service-stack-media--portrait img{object-position:50% 35%}

@media(min-width:901px) and (max-width:1199px){
  .services-stack{
    --svc-head-top:clamp(72px,10svh,88px);
    --svc-radius:28px;
    --svc-stack-gap:14px;
    --svc-copy-pad:clamp(28px,3vw,38px);
    --svc-title-size:clamp(46px,5.25vw,62px);
    --svc-body-size:14px;
  }
  .services-stack-sticky{padding:0 24px}
  .services-stack-stage{left:24px;right:24px}
  .services-stack-head{left:24px;right:24px;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);column-gap:38px}
  .services-stack-head>h2{font-size:clamp(38px,4.8vw,52px)}
  .services-stack-head>p{font-size:clamp(15px,1.65vw,18px);max-width:43ch}
  .service-stack-copy h2{max-width:12ch}
  .service-stack-copy p{max-width:32ch;margin-top:15px;line-height:1.43}
  .service-stack-media{margin:12px;border-radius:20px}
}
@media(min-width:901px) and (max-height:700px){
  .services-stack{
    --svc-head-top:72px;
    --svc-stack-gap:12px;
    --svc-copy-pad:26px;
    --svc-title-size:clamp(43px,5vw,58px);
    --svc-body-size:13px;
  }
  .services-stack-head>h2{font-size:clamp(36px,4.4vw,48px)}
  .services-stack-head>p{font-size:14px;line-height:1.3;max-width:45ch}
  .service-stack-copy p{line-height:1.4;margin-top:13px}
}
/* Career route — V6.41 real scroll-drawn journey */
.career-route{height:350vh;background:#111;color:#fff}
.career-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  padding:clamp(96px,10.8vh,124px) var(--gutter) clamp(26px,4.2vh,44px);
  display:grid;grid-template-rows:auto minmax(190px,1fr) auto;
  row-gap:clamp(16px,2.3vh,28px)
}
.career-head{display:grid;grid-template-columns:minmax(110px,.38fr) minmax(0,1.62fr);gap:clamp(30px,7vw,130px);align-items:start}
.career-head>span{padding-top:7px;font-size:13px;text-transform:uppercase;letter-spacing:.11em;color:rgba(255,255,255,.48)}
.career-head h2{justify-self:end;font-size:clamp(54px,5.15vw,90px);font-weight:400;letter-spacing:-.055em;line-height:.92;max-width:13.5ch;text-align:right;text-wrap:balance}
.career-journey{position:relative;min-height:190px}
.route-map{position:absolute;inset:0;min-height:190px}
.route-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route-path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.route-path-base{stroke:rgba(255,255,255,.17);stroke-width:1.5}
.route-path-progress{stroke:var(--vs-coral);stroke-width:2.25;filter:drop-shadow(0 0 8px rgba(255,118,100,.18))}
.route-tracer-halo{fill:rgba(255,118,100,.12);stroke:rgba(255,118,100,.42);stroke-width:1;vector-effect:non-scaling-stroke}
.route-tracer{fill:var(--vs-coral);stroke:#111;stroke-width:4;vector-effect:non-scaling-stroke}
.route-step{position:absolute;width:0;height:0;z-index:3;opacity:.38;transition:opacity .28s ease}
.route-step.is-done{opacity:.62}
.route-step.is-active{opacity:1}
.route-node{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#111;border:2px solid rgba(255,255,255,.34);transform:translate(-50%,-50%);transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,transform .32s cubic-bezier(.16,1,.3,1)}
.route-step.is-done .route-node{border-color:var(--vs-coral);background:var(--vs-coral)}
.route-step.is-active .route-node{border-color:var(--vs-coral);background:var(--vs-coral);box-shadow:0 0 0 6px rgba(255,118,100,.12);transform:translate(-50%,-50%) scale(1.08)}
.route-label{position:absolute;width:max-content;max-width:270px;margin:0;font-size:clamp(16px,1.35vw,24px);font-weight:400;line-height:1.08;letter-spacing:-.025em;color:inherit;white-space:normal;text-wrap:balance}
.route-step[data-step="0"] .route-label{left:18px;top:18px;text-align:left}
.route-step[data-step="1"] .route-label{left:50%;bottom:20px;transform:translateX(-50%);text-align:center}
.route-step[data-step="2"] .route-label{left:50%;top:20px;transform:translateX(-50%);text-align:center}
.route-step[data-step="3"] .route-label{right:18px;bottom:20px;text-align:right}
.route-mobile-copy{display:none}
.career-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.74fr);gap:clamp(46px,8vw,150px);align-items:end;min-height:clamp(190px,27vh,300px)}
.career-detail{position:relative;min-height:clamp(150px,20vh,205px);max-width:600px;border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(18px,2.2vh,26px)}
.career-detail-panel{position:absolute;left:0;top:clamp(18px,2.2vh,26px);width:min(100%,560px);opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);transform:translateY(12px);pointer-events:none;transition:clip-path .48s cubic-bezier(.16,1,.3,1),transform .48s cubic-bezier(.16,1,.3,1)}
.career-detail-panel.is-active{opacity:1;visibility:visible;clip-path:inset(0);transform:none;pointer-events:auto}
.career-detail-mark{display:block;width:34px;height:2px;background:var(--vs-coral);margin-bottom:clamp(16px,2vh,22px)}
.career-detail h3{font-size:clamp(30px,2.45vw,44px);font-weight:400;line-height:1;letter-spacing:-.04em}
.career-detail p{margin-top:14px;max-width:47ch;font-size:clamp(14px,.96vw,17px);line-height:1.55;color:rgba(255,255,255,.64)}
.route-video{justify-self:end;align-self:end;width:min(35vw,520px);height:min(30vh,310px);margin:0;border-radius:30px;overflow:hidden;background:#181818;box-shadow:0 28px 70px rgba(0,0,0,.34)}
.route-video video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.015);transition:transform .75s cubic-bezier(.16,1,.3,1)}
.career-route[data-career-step="1"] .route-video video,.career-route[data-career-step="3"] .route-video video{transform:scale(1.035)}
@media(max-width:1180px) and (min-width:901px){
  .career-sticky{padding-top:clamp(84px,10vh,102px);row-gap:14px}
  .career-head{grid-template-columns:100px 1fr;gap:34px}.career-head h2{font-size:clamp(46px,5.1vw,62px);max-width:14ch}
  .route-label{font-size:clamp(15px,1.6vw,20px);max-width:220px}
  .career-lower{grid-template-columns:minmax(0,1fr) minmax(300px,.78fr);gap:38px;min-height:190px}
  .career-detail{min-height:156px}.career-detail h3{font-size:clamp(28px,3vw,36px)}.career-detail p{font-size:13px;max-width:44ch}
  .route-video{width:min(36vw,410px);height:min(27vh,230px);border-radius:24px}
}
@media(max-height:700px) and (min-width:901px){
  .career-sticky{padding-top:78px;padding-bottom:18px;row-gap:10px;grid-template-rows:auto minmax(145px,1fr) auto}
  .career-head h2{font-size:clamp(42px,4.7vw,60px)}.career-head>span{font-size:11px}
  .career-lower{min-height:170px}.career-detail{min-height:142px;padding-top:14px}.career-detail-panel{top:14px}.career-detail-mark{margin-bottom:12px}.career-detail h3{font-size:clamp(26px,2.8vw,34px)}.career-detail p{margin-top:10px;font-size:12px;line-height:1.45;max-width:48ch}
  .route-video{height:min(26vh,180px)}
}
/* Team — portrait depth river */
.team-river{min-height:120vh;background:#f5f1ec;padding:12vh 0 10vh;overflow:hidden}
.team-river-head{padding:0 var(--gutter)}
.team-river-head h2{font-size:clamp(66px,9vw,160px);font-weight:400;letter-spacing:-.07em;line-height:.86;max-width:10ch}
.team-river-window{height:68vh;perspective:1300px;margin-top:7vh;overflow:hidden}
.team-river-track{height:100%;position:relative;transform-style:preserve-3d}
.portrait{position:absolute;width:min(27vw,420px);height:min(58vh,620px);border-radius:30px;overflow:hidden;background:#ddd;box-shadow:0 25px 70px rgba(0,0,0,.12);transform:translate3d(var(--tx),var(--ty),var(--tz)) rotate(var(--r));transition:filter .3s}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait figcaption{position:absolute;left:20px;right:20px;bottom:20px;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.portrait figcaption b{font-size:28px;font-weight:400}.portrait figcaption span{font-size:13px}
.p1{--tx:5vw;--ty:7vh;--tz:-50px;--r:-4deg}.p2{--tx:31vw;--ty:1vh;--tz:100px;--r:2deg}.p3{--tx:59vw;--ty:9vh;--tz:-90px;--r:-2deg}.p4{--tx:81vw;--ty:-2vh;--tz:-260px;--r:5deg}

/* V6.51 Partner horizon — authored 2.5D brand field, not a 3D carousel. */
.brands-horizon{min-height:100vh;background:#111;color:#fff;padding:10vh var(--gutter) 7vh;overflow:hidden;perspective:2600px;perspective-origin:50% 62%}
.brands-head{display:grid;grid-template-columns:1.12fr .88fr;align-items:end;gap:clamp(64px,7vw,120px)}
.brands-head h2{font-size:clamp(60px,5vw,92px);font-weight:400;letter-spacing:-.035em;line-height:1.04;max-width:none;text-wrap:balance;white-space:nowrap}
.brands-head p{font-size:clamp(16px,1.1vw,19px);line-height:1.52;max-width:36ch;color:rgba(255,255,255,.72);padding-bottom:8px}
.brand-plane{height:50vh;min-height:400px;margin-top:3.5vh;position:relative;overflow:visible;transform-style:preserve-3d;transform-origin:50% 52%;will-change:transform}
.brand-plane figure{position:absolute;left:var(--left);top:var(--top);width:clamp(120px,7.6vw,152px);aspect-ratio:402/502;margin:0;display:grid;place-items:center;transform:translate(-50%,-50%) translateZ(var(--depth)) rotateY(var(--yaw));transform-style:preserve-3d;transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:visible;background:transparent;will-change:transform}
.brand-plane figure img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 18px 30px rgba(0,0,0,.2));transition:transform .34s cubic-bezier(.2,.8,.2,1),filter .34s ease;transform:translateZ(1px)}
@media (hover:hover) and (pointer:fine){.brand-plane figure:hover img{transform:translateZ(24px) scale(1.035);filter:drop-shadow(0 26px 40px rgba(0,0,0,.28))}}
@media(min-width:901px) and (max-width:1199px){.brands-head{grid-template-columns:1.05fr .95fr;gap:48px}.brands-head h2{font-size:clamp(56px,5.3vw,72px)}.brands-horizon{perspective:2300px;perspective-origin:50% 64%}.brand-plane{height:47vh;min-height:360px;margin-top:4vh}.brand-plane figure{width:clamp(98px,8.1vw,120px)}}
.social-editorial{min-height:120vh;background:var(--vs-coral);color:#171717;padding:10vh var(--gutter);display:grid;grid-template-columns:.75fr 1.25fr;gap:6vw;align-items:center;overflow:hidden}
.social-copy{position:sticky;top:18vh;align-self:start}
.social-copy h2{font-size:clamp(74px,9vw,160px);font-weight:400;letter-spacing:-.07em;line-height:.88}
.social-copy p{font-size:18px;line-height:1.5;max-width:28ch;margin:24px 0 32px}
.social-spread{height:95vh;position:relative}
.social-spread figure{position:absolute;overflow:hidden;border-radius:30px;background:#222;box-shadow:0 28px 80px rgba(70,10,5,.18)}
.social-spread img,.social-spread video{width:100%;height:100%;object-fit:cover}
.social-main{left:2%;top:2%;width:54%;height:68%}.social-spread>figure:nth-child(2){right:1%;top:10%;width:37%;height:35%}.social-spread>figure:nth-child(3){right:7%;bottom:2%;width:42%;height:37%}.social-small-video{left:12%;bottom:1%;width:30%;height:34%}

/* Recruitment close — no recycled orbit */

/* Footer — calm, editorial */

/* performance boundaries */
.team-river,.brands-horizon,.social-editorial,.faq-editorial,.vs-footer{content-visibility:auto;contain-intrinsic-size:auto 900px}

@media(max-width:900px){
  .vs-header{height:62px;padding:12px 14px}.vs-brand{width:118px;height:30px}.vs-brand img{width:112px}.vs-job{display:none}.vs-menu-trigger{height:42px;min-width:104px;padding:0 14px;gap:9px}.vs-menu-overlay{clip-path:circle(0 at calc(100% - 62px) 28px)}body.menu-open .vs-menu-overlay{clip-path:circle(170vmax at calc(100% - 62px) 28px)}.vs-menu-content{padding:100px 22px 28px;display:flex;flex-direction:column;justify-content:space-between}.vs-menu-nav a{font-size:clamp(44px,13vw,70px)}.vs-menu-foot{text-align:left;align-self:flex-start;align-items:flex-start}.vs-menu-socials a{width:46px;height:46px}
  .sticky{padding:14px}.hero-headline{padding:84px 24px 24px}.hero-headline h1{font-size:clamp(50px,13vw,78px);max-width:100%;line-height:.9}.hero-bottom{padding:22px}.hero-para{max-width:28ch;font-size:14px}.hero-job{--h:44px;min-width:132px;padding-inline:36px}.hero-job .pointer-reveal-content{padding-inline:36px}.hero-slider{border-radius:18px}
  .orbit-copy{padding:24px}.orbit-copy h3{font-size:clamp(28px,8vw,44px)}.orbit-copy p{font-size:13px;max-width:30ch}.sphere-face-inner{padding:24px}.sphere-face h3{font-size:clamp(30px,9vw,48px)}.sphere-face-copy{font-size:13px}
  .sphere-h-top{font-size:clamp(48px,14vw,78px);left:20px;top:82px;max-width:92vw}.sphere-h-bottom{font-size:clamp(54px,15vw,90px);right:20px;bottom:35vh;max-width:95vw}.sphere-body{left:20px;right:20px;bottom:20px;max-width:none;font-size:14px}.sphere-metrics{grid-template-columns:repeat(2,1fr);gap:16px 26px}.sphere-brand{width:64px;height:64px}.sphere-brand .brand-symbol-crop{width:56px;height:56px}
  .portfolio{padding:72px 0 24px}.pf-track{gap:14px;padding-left:14px}.pf-card{width:84vw;border-radius:22px;padding:22px}.pf-card h3{font-size:clamp(42px,12vw,68px);max-width:95%}
  .target-brand{left:22px;top:78px;width:120px}.cta-block{padding:22px 22px 9vh}.cta-block h2{font-size:clamp(50px,13vw,78px);max-width:92vw}.cta-block p{max-width:82vw;font-size:14px}
  .services-stack{height:auto;padding:86px 18px 96px;background:#f5f1ec}.services-stack-sticky{position:relative;height:auto;overflow:visible;padding:0}.services-stack-head{position:relative;left:auto;right:auto;top:auto;display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:42px}.services-stack-head>h2{font-size:clamp(42px,12vw,58px);line-height:.94}.services-stack-head>p{font-size:15px;line-height:1.42;max-width:34ch;justify-self:start;text-align:left}.services-stack-stage{position:relative;left:auto;right:auto;top:auto;height:auto;display:grid;gap:14px;perspective:none}.service-stack-card{position:relative;inset:auto!important;display:flex;flex-direction:column;min-height:0;border-radius:24px;transform:none!important;opacity:1!important;visibility:visible!important;box-shadow:none}.service-stack-card--reverse .service-stack-copy,.service-stack-card--reverse .service-stack-media{order:initial}.service-stack-copy{order:1!important;padding:28px 22px 24px;justify-content:flex-start}.service-stack-media{order:2!important;margin:0 10px 10px;height:min(62svh,520px);border-radius:17px}.service-stack-copy h2{font-size:clamp(44px,11.6vw,62px);line-height:.94;letter-spacing:-.055em;max-width:none}.service-stack-copy p{font-size:14px;line-height:1.45;max-width:34ch;margin-top:14px}.service-stack-media img{transform:none!important}.service-stack-media--portrait img{object-position:50% 26%}
  .career-route{height:auto;padding:86px 18px 82px;background:#111}.career-sticky{position:relative;height:auto;padding:0;display:block;overflow:visible}.career-head{display:block}.career-head>span{padding:0;font-size:12px}.career-head h2{text-align:left;font-size:clamp(48px,12vw,72px);line-height:.92;letter-spacing:-.055em;margin-top:20px;max-width:100%;overflow-wrap:anywhere}.career-journey{min-height:0;margin-top:54px}.route-map{position:relative;inset:auto;min-height:0;padding-left:30px;display:flex;flex-direction:column;gap:0}.route-map::before{content:"";position:absolute;left:7px;top:8px;bottom:32px;width:1px;background:rgba(255,255,255,.22)}.route-line{display:none}.route-step{position:relative!important;left:auto!important;top:auto!important;width:auto;height:auto;opacity:1!important;padding:0 0 46px 18px}.route-step:last-of-type{padding-bottom:18px}.route-node{left:-23px;top:8px;width:14px;height:14px;transform:translate(-50%,-50%)!important}.route-step.is-active .route-node{box-shadow:0 0 0 5px rgba(255,118,100,.11)}.route-label,.route-step[data-step] .route-label{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:auto;max-width:100%;font-size:24px;line-height:1.02;text-align:left;white-space:normal}.route-mobile-copy{display:block;margin-top:12px;max-width:35ch;font-size:14px;line-height:1.5;color:rgba(255,255,255,.62)}.career-lower{display:block;min-height:0;margin-top:20px}.career-detail{display:none}.route-video{width:100%;height:min(62svh,520px);margin-top:0;border-radius:24px}.route-video video{transform:none!important}
  .team-river{min-height:0;padding:86px 0 60px}.team-river-head{padding:0 18px}.team-river-head h2{font-size:clamp(60px,16vw,90px)}.team-river-window{height:auto;margin-top:48px;overflow:visible}.team-river-track{height:auto;display:flex;gap:14px;overflow-x:auto;padding:0 18px 20px;scroll-snap-type:x mandatory;scrollbar-width:none}.team-river-track::-webkit-scrollbar{display:none}.portrait{position:relative;flex:0 0 82vw;width:82vw;height:64vh;transform:none!important;scroll-snap-align:center;border-radius:24px}.portrait figcaption b{font-size:25px}
  .brands-horizon{min-height:0;padding:86px 18px;perspective:none}.brands-head{display:block}.brands-head h2{font-size:clamp(48px,11.5vw,64px);line-height:1.05;letter-spacing:-.03em;white-space:normal}.brands-head p{margin-top:26px;max-width:34ch;color:rgba(255,255,255,.72)}.brand-plane{height:auto;min-height:0;margin-top:42px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;overflow:visible;transform:none!important;transform-style:flat}.brand-plane figure{position:relative;left:auto;top:auto;width:100%;aspect-ratio:402/502;margin:0;transform:none!important;overflow:visible}.brand-plane figure img{width:100%;height:100%;object-fit:contain;filter:none;transform:none!important}
  .social-editorial{min-height:0;padding:86px 18px;display:block}.social-copy{position:relative;top:auto}.social-copy h2{font-size:clamp(74px,20vw,112px)}.social-copy p{font-size:16px}.social-spread{height:auto;margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.social-spread figure,.social-main,.social-small-video,.social-spread>figure:nth-child(2),.social-spread>figure:nth-child(3){position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:52vw;border-radius:20px}.social-main{grid-column:1/-1;height:92vw!important}
}

@media(prefers-reduced-motion:reduce){
  .mq-row{animation:none}.roll-cta *,.vs-menu-overlay,.vs-menu-content,.menu-dots i,.menu-word>span{transition:none!important}.portrait{transform:none!important}.aurora{display:none}.services-stack,.career-route{height:auto}.services-stack-sticky,.career-sticky{position:relative;height:auto}.service-stack-card{position:relative!important;transform:none!important;opacity:1!important;visibility:visible!important}
}
/* V6 brand-copy refinements */

/* Lower-cost circle transition: same visual aperture on a viewport-sized surface, not CrearX's 300vw paint area. */
.black-screen{width:100vw!important;height:100svh!important;}
.card1,.hero-slider{will-change:transform;transform-origin:center center}

/* Keep the supplied mark at near-native scale; never enlarge the raster into a fake vector. */
.sphere-brand{width:68px;height:68px}.sphere-brand .brand-symbol-crop{width:54px;height:54px}
@media(max-width:900px){.sphere-brand{width:58px;height:58px}.sphere-brand .brand-symbol-crop{width:52px;height:52px}}

/* Robust particle base: source-like density remains visible if WebGL is unavailable, while live points layer above it. */
.sphere-fallback{position:absolute;left:50%;top:50%;width:min(1080px,92vw);height:min(900px,92vh);transform:translate(-50%,-50%) scale(1);background:url("assets/particle-ring-fallback.webp") center/contain no-repeat;opacity:.68;pointer-events:none;z-index:0;will-change:transform,opacity}
.sphere-canvas{z-index:1}
.sphere-brand,.sphere-h-top,.sphere-h-bottom,.sphere-body{z-index:3}

@media (max-width:640px){
  .career-head h2{font-size:clamp(38px,10.4vw,48px)!important;line-height:.94;max-width:100%!important;overflow-wrap:anywhere;hyphens:auto;text-wrap:balance}
  .extended section{scroll-margin-top:64px}
  .sphere-fallback{width:118vw;height:86vh;opacity:.62}
}

/* Final art-direction corrections after rendered QA. */
@media (min-width:901px){
  .hero-headline h1{max-width:48vw}
  
  .career-sticky{padding-top:92px}
  .career-head h2{font-size:clamp(50px,4.8vw,82px);max-width:54vw;line-height:.9;letter-spacing:-.055em}
}

/* V6.11 — CrearX-faithful card1 media handoff.
   No tower opacity crossfade: the original hero strip physically pans to the second media state. */
.hero-slider{background:transparent!important;overflow:hidden!important;isolation:isolate}
.hero-strip{position:absolute;inset:0;will-change:transform}
.hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:inherit}
.hero-slide-rest{left:0;background:#151515}
.hero-slide-tower{left:100%;background:transparent;overflow:hidden}
.hero-rest-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:inherit;display:block}

/* CrearX img-b used one fixed -90deg compensation while card1 rotates 0→90deg.
   The tower uses the same relationship; the transparent asset itself is never faded. */
.hero-tower-scene{position:absolute;inset:0;transform:rotate(-90deg) scale(1.42);transform-origin:50% 50%;will-change:transform}
.hero-tower-crop{position:absolute;left:50%;bottom:-.5%;height:96%;aspect-ratio:864/1184;transform:translateX(-50%);overflow:hidden;background:transparent}
.hero-tower-asset{position:absolute;left:0;top:0;height:100%;width:auto;max-width:none;display:block}

/* Text is a separate portrait face, not a child of the scaled hero media.
   That keeps the final card typography at native browser resolution. */
.card1-copy-face{position:absolute;width:var(--sr-card-w);height:var(--sr-card-h);left:50%;top:50%;transform-style:preserve-3d;pointer-events:none;opacity:0;overflow:hidden;border-radius:var(--radius-card);z-index:1101;color:#fff}
.card1-copy-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,7,6,0) 38%,rgba(14,7,6,.12) 58%,rgba(14,7,6,.78) 100%)}
.card1-copy{position:absolute;left:7.5%;right:7.5%;bottom:6.5%;z-index:1;font-family:"Zen Kaku Gothic New",Arial,sans-serif;font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;transform:translateY(14px);will-change:opacity,transform}
.card1-copy h3{font:400 clamp(30px,4.15vmin,44px)/.98 "Zen Kaku Gothic New",Arial,sans-serif;letter-spacing:-.045em;word-spacing:normal;max-width:8.5ch}
.card1-copy h3 span{display:block;white-space:nowrap}
.card1-copy h3 span+span{margin-top:.02em}
.card1-copy p{margin-top:16px;font:400 clamp(13px,1.52vmin,16px)/1.42 "Zen Kaku Gothic New",Arial,sans-serif;max-width:29ch;color:rgba(255,255,255,.92);letter-spacing:-.01em}
@media(max-width:900px){
  .hero-tower-scene{transform:rotate(-90deg) scale(1.38)}
  .hero-tower-crop{height:94%;bottom:0}
  .card1-copy{left:8%;right:8%;bottom:6%}
  .card1-copy h3{font-size:clamp(28px,8.2vw,38px)}
  .card1-copy p{font-size:clamp(12px,3.45vw,15px);max-width:27ch}
}

/* V6.12 — card1 parity pass.
   Tower: smaller, optically bottom-grounded.
   Copy: same padding / type / focus behavior as the other carousel cards. */
.hero-tower-scene{transform:rotate(-90deg) scale(1.20)!important;transform-origin:50% 50%!important}
.hero-tower-crop{height:92%!important;bottom:-7%!important;aspect-ratio:864/1184!important}
.hero-tower-asset{left:0!important;top:0!important;height:100%!important;width:auto!important;max-width:none!important}

.card1-copy-face{overflow:hidden;border-radius:3vmin}
.card1-copy-shade{background:linear-gradient(180deg,rgba(0,0,0,.02) 35%,rgba(0,0,0,.22) 58%,rgba(0,0,0,.9) 100%)}
.card1-copy{
  left:0!important;right:0!important;bottom:0!important;
  padding:3.2vmin!important;
  opacity:calc(.48 + var(--focus,1)*.52);
  transform:translateY(calc((1 - var(--focus,1))*16px));
  font-family:"Zen Kaku Gothic New",Arial,sans-serif;
  font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
}
.card1-copy h3{
  margin:0!important;max-width:none!important;
  font:400 clamp(30px,4vmin,64px)/.96 "Zen Kaku Gothic New",Arial,sans-serif!important;
  letter-spacing:-.045em!important;word-spacing:normal!important;text-wrap:balance!important;
}
.card1-copy p{
  margin-top:1.3vmin!important;max-width:34ch!important;
  font:400 clamp(13px,1.65vmin,20px)/1.38 "Zen Kaku Gothic New",Arial,sans-serif!important;
  color:rgba(255,255,255,.92)!important;letter-spacing:0!important;
  opacity:clamp(0,calc((var(--focus,1) - .68)*3.2),1);
  transform:translateY(calc((1 - var(--focus,1))*18px));
}

@media(max-width:900px){
  .hero-tower-scene{transform:rotate(-90deg) scale(1.70)!important}
  .hero-tower-crop{height:90%!important;bottom:-6%!important}
  .card1-copy{padding:24px!important}
  .card1-copy h3{font-size:clamp(28px,8vw,44px)!important}
  .card1-copy p{font-size:13px!important;max-width:30ch!important;margin-top:12px!important}
}

/* V6.13 — hero spacing / harmony only.
   Freeze all motion, carousel, tower, menu and CTA behavior from V6.12.
   This pass establishes one coherent hero content grid and better vertical rhythm. */
.hero-card{
  --hero-content-gutter:clamp(28px,3.2vw,54px);
}
.hero-headline{
  padding-left:var(--hero-content-gutter)!important;
  padding-right:var(--hero-content-gutter)!important;
}
.hero-bottom{
  left:0!important;
  right:0!important;
  width:auto!important;
  top:var(--hero-copy-top,auto)!important;
  bottom:auto!important;
  padding:0 var(--hero-content-gutter)!important;
  gap:22px!important;
}
.hero-para{
  max-width:min(31rem,40vw)!important;
  font-size:clamp(15px,1.05vw,17px)!important;
  line-height:1.52!important;
  letter-spacing:-.008em;
}
.hero-btns{gap:14px!important}

/* 701–1100px is still a desktop/tablet hero composition, not the phone layout.
   The title gets a touch less scale so it does not crowd the right-hand media. */
@media (min-width:701px) and (max-width:1100px){
  .hero-headline{padding-top:clamp(88px,11.5vh,104px)!important}
  .hero-headline h1{
    max-width:45vw!important;
    font-size:clamp(66px,8.25vw,88px)!important;
    line-height:.92!important;
  }
  .hero-para{max-width:min(29rem,40vw)!important;font-size:15.5px!important}
  .hero-job{--h:46px;min-width:142px!important;padding-inline:37px!important}
  .hero-job .pointer-reveal-content{padding-inline:37px}
}

/* Keep phones compact; only unify the left edge and internal rhythm. */
@media (max-width:700px){
  .hero-card{--hero-content-gutter:24px}
  .hero-headline{padding:84px var(--hero-content-gutter) 24px!important}
  .hero-bottom{
    top:auto!important;
    bottom:22px!important;
    padding:0 var(--hero-content-gutter)!important;
    gap:16px!important;
  }
  .hero-para{max-width:28ch!important;font-size:14px!important;line-height:1.52!important}
}

/* V6.14 — hero rhythm fix.
   Desktop/laptop supporting content is positioned from the ACTUAL painted bottom
   of the final headline line, not from viewport-height guesses. */
@media (min-width:701px){
  .hero-bottom{will-change:top}
}

/* V6.15 — structural fixed-navigation safe zone.
   The hero CARD, not just its text, begins below the floating header at rest.
   cinematic.js interpolates this extra top inset away during the first CrearX morph,
   so carousel geometry returns to the original source values before card1 settles. */
html{scroll-padding-top:var(--vs-nav-safe-top,96px)}

/* The previous large headline top offsets compensated for the card living under the fixed nav.
   Now that the card itself sits below the nav, return to normal card-internal spacing. */
.hero-headline{padding-top:var(--hero-content-gutter)!important}
@media (min-width:701px) and (max-width:1100px){.hero-headline{padding-top:var(--hero-content-gutter)!important}}
@media (max-width:700px){.hero-headline{padding-top:var(--hero-content-gutter)!important}}

/* V6.17 — optical leading correction for the hero title.
   The CSS line boxes were mathematically equal, but the descender in
   “morgondagens” makes the second-to-third gap read tighter. Preserve the
   approved heading size and overall line-height; add a small optical offset
   only before the third line. */
#hlLine2{margin-top:.045em}

/* V6.18 — compact fixed-header controls only.
   Hero CTA and menu animation remain untouched. */
@media (min-width:701px){
  .vs-header .vs-job{
    --h:42px;
    min-width:132px;
    padding:0 31px;
    font-size:14px;
  }
  .vs-header .vs-job .pointer-reveal-content{padding:0 31px;font-size:14px}

  .vs-header .vs-menu-trigger{
    height:42px;
    min-width:102px;
    padding:0 15px;
    gap:10px;
  }
  .vs-header .vs-menu-trigger .pointer-reveal-content{gap:10px;padding:0 15px}
  .vs-header .menu-dots{
    width:15px;
    height:15px;
    grid-template-columns:repeat(2,3.5px);
    grid-template-rows:repeat(2,3.5px);
    gap:3.5px;
  }
  .vs-header .menu-dots i{
    width:3.5px;
    height:3.5px;
  }
  .vs-header .menu-word{
    width:44px;
    height:17px;
    font-size:14px;
    line-height:17px;
  }
  .vs-header .menu-word>span{
    height:17px;
  }
  body.menu-open .vs-header .menu-word>span{
    transform:translateY(-17px);
  }
}

/* V6.19 — compact-nav interaction geometry fix.
   V6.18 reduced the resting controls but left some hover/open geometry at the
   old 48px scale. This pass rescales the entire interaction system while
   freezing the hero CTA and the approved menu reveal behavior. */

/* The menu reveal always originates from the ACTUAL compact capsule center.
   Base/mobile = 112×48, desktop compact = 102×42. */
.vs-menu-overlay{
  --menu-origin-x:calc(100% - var(--gutter) - 56px);
  --menu-origin-y:42px;
  clip-path:circle(0 at var(--menu-origin-x) var(--menu-origin-y));
}
body.menu-open .vs-menu-overlay{
  clip-path:circle(155vmax at var(--menu-origin-x) var(--menu-origin-y));
}

@media (min-width:701px){

  /* Meny: resize rest AND open-state dot→X geometry together. */
  .vs-header .menu-dots{
    width:15px;
    height:15px;
    grid-template-columns:repeat(2,3.5px);
    grid-template-rows:repeat(2,3.5px);
    gap:3.5px;
  }
  .vs-header .menu-dots i{
    width:3.5px;
    height:3.5px;
  }
  body.menu-open .vs-header .menu-dots i:nth-child(1){
    transform:translate(3.5px,3.5px) rotate(45deg) scaleX(2.8);
    border-radius:2px;
  }
  body.menu-open .vs-header .menu-dots i:nth-child(4){
    transform:translate(-3.5px,-3.5px) rotate(-45deg) scaleX(2.8);
    border-radius:2px;
  }

  /* 102px menu capsule at the same fixed-header gutter. */
  .vs-menu-overlay{
    --menu-origin-x:calc(100% - var(--gutter) - 51px);
    --menu-origin-y:39px;
  }
}

/* V6.22 — particle chapter desktop/laptop typography geometry.
   Keep the cinematic/WebGL choreography frozen; only reserve non-overlapping text zones. */
@media (min-width:901px){
  .sphere-scene{
    --sphere-left-col:min(33vw,520px);
    --sphere-col-gap:clamp(26px,3vw,58px);
    --sphere-top-size:clamp(70px,min(8vw,14vh),152px);
    --sphere-bottom-size:clamp(72px,min(8.4vw,14vh),158px);
  }
  .sphere-h-top{
    left:var(--gutter);
    top:clamp(92px,10vh,118px);
    width:min(64vw,1120px);
    max-width:none;
    font-size:var(--sphere-top-size);
    line-height:.86;
    letter-spacing:-.055em;
    white-space:nowrap;
  }
  .sphere-body{
    left:var(--gutter);
    bottom:var(--gutter);
    width:var(--sphere-left-col);
    max-width:none;
    gap:clamp(16px,2.2vh,24px);
    font-size:clamp(14px,min(.95vw,2.1vh),18px);
    line-height:1.42;
  }
  .sphere-body>p{max-width:38ch}
  .sphere-metrics{
    width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(12px,1.65vw,28px);
  }
  .sphere-metrics b{font-size:clamp(26px,min(2vw,4.4vh),40px)}
  .sphere-metrics small{font-size:clamp(10px,.72vw,12px);white-space:nowrap}
  .sphere-h-bottom{
    right:var(--gutter);
    bottom:var(--gutter);
    width:calc(100vw - var(--gutter) - var(--gutter) - var(--sphere-left-col) - var(--sphere-col-gap));
    max-width:none;
    font-size:var(--sphere-bottom-size);
    line-height:.80;
    letter-spacing:-.06em;
    white-space:nowrap;
  }
  .sphere-h-bottom>span{display:block;white-space:nowrap}
}

/* Compact / short PC screens: scale typography by height before it can collide. */
@media (min-width:901px) and (max-height:700px){
  .sphere-scene{
    --sphere-left-col:min(34vw,500px);
    --sphere-col-gap:clamp(24px,2.6vw,44px);
    --sphere-top-size:clamp(62px,min(7.4vw,12.8vh),112px);
    --sphere-bottom-size:clamp(64px,min(7.8vw,13.2vh),118px);
  }
  .sphere-h-top{top:clamp(82px,9vh,96px)}
  .sphere-body{bottom:clamp(22px,3.4vh,34px);gap:14px;font-size:14px;line-height:1.36}
  .sphere-metrics{gap:10px 16px}
  .sphere-metrics b{font-size:clamp(24px,2vw,32px)}
  .sphere-metrics small{font-size:10px;margin-top:4px}
  .sphere-h-bottom{bottom:clamp(22px,3.4vh,34px)}
}

/* Narrow desktop / small laptop widths retain the same zones with a little more copy room. */
@media (min-width:901px) and (max-width:1180px){
  .sphere-scene{--sphere-left-col:34vw;--sphere-col-gap:clamp(22px,2.5vw,32px)}
  .sphere-body>p{max-width:35ch}
  .sphere-metrics{gap:10px 14px}
  .sphere-metrics small{font-size:10px}
}

/* V6.24 — preserve the approved logo size; only reduce the resting mask to match it.
   V6.23 accidentally stretched the symbol to the full sphere-brand wrapper. */
.sphere-brand{
  aspect-ratio:1/1;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.sphere-brand .sphere-symbol{
  display:block;
  width:54px;
  height:54px;
  aspect-ratio:1/1;
  object-fit:contain;
}
@media(max-width:900px){
  .sphere-brand .sphere-symbol{width:52px;height:52px}
}

/* V6.32 — remove the extra target grouping boundary added after the recovered CrearX source.
   `isolation:isolate` creates an independent stacking/grouping context; this target already receives
   a stacking context from its 3D transform. Keeping it `auto` lets the target and Wahid plane be
   depth-sorted in the same parent 3D context. */
.target{isolation:auto!important;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.grid-item-wahid{backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
.grid-item-wahid>img{display:block;transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* V6.37 — services intro/stage are one real flow layout.
   The intro owns its space; the card deck cannot rise behind it. */
@media (min-width:901px){
  .services-stack{
    --svc-stack-gap:12px;
    --svc-deck-reserve:calc(var(--svc-stack-gap) * 3);
    --svc-section-top:clamp(88px,9.5svh,104px);
    --svc-section-bottom:clamp(18px,2.4svh,28px);
    --svc-head-stage-gap:clamp(18px,2.5svh,28px);
  }
  .services-stack-sticky{
    position:sticky;
    top:0;
    height:100svh;
    overflow:hidden;
    padding:var(--svc-section-top) var(--gutter) var(--svc-section-bottom);
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .services-stack-head{
    position:relative;
    inset:auto;
    z-index:20;
    flex:0 0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    align-items:end;
    column-gap:clamp(52px,6vw,110px);
    pointer-events:none;
  }
  .services-stack-stage{
    position:relative;
    inset:auto;
    z-index:2;
    flex:1 1 auto;
    min-height:0;
    height:auto;
    margin-top:var(--svc-head-stage-gap);
    perspective:1600px;
  }
  .service-stack-card{
    inset:var(--svc-deck-reserve) 0 auto 0;
    height:min(650px,calc(100% - var(--svc-deck-reserve)));
  }
}

@media (min-width:901px) and (max-width:1199px){
  .services-stack{
    --svc-stack-gap:10px;
    --svc-deck-reserve:calc(var(--svc-stack-gap) * 3);
    --svc-section-top:clamp(70px,9.5svh,84px);
    --svc-section-bottom:16px;
    --svc-head-stage-gap:18px;
  }
  .services-stack-sticky{padding-left:24px;padding-right:24px}
  .services-stack-head{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);column-gap:38px}
  .service-stack-card{height:min(540px,calc(100% - var(--svc-deck-reserve)))}
}

@media (min-width:901px) and (max-height:700px){
  .services-stack{
    --svc-stack-gap:9px;
    --svc-deck-reserve:calc(var(--svc-stack-gap) * 3);
    --svc-section-top:68px;
    --svc-section-bottom:14px;
    --svc-head-stage-gap:14px;
  }
  .service-stack-card{height:calc(100% - var(--svc-deck-reserve))}
}

/* ==========================================================================\n   V6.38 — services rebuilt from the uploaded Kora service-section structure.\n   Hierarchy contract: section lead > card title > body.\n   Layout contract: normal-flow lead, then one sticky chapter per service.\n   ========================================================================== */
.services-kora{
  position:relative;
  z-index:65;
  background:#f5f1ec;
  color:#171717;
  padding:clamp(104px,10vw,154px) var(--gutter) 0;
}
.services-kora-lead{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  align-items:start;
  gap:clamp(64px,7vw,124px);
  margin:0 0 clamp(84px,8vw,132px);
}
.services-kora-lead h2{
  margin:0;
  font-size:clamp(84px,6.15vw,112px);
  line-height:1.06;
  letter-spacing:-.032em;
  font-weight:400;
  max-width:none;
  white-space:nowrap;
  color:#171717;
}
.services-kora-lead p{
  margin:clamp(6px,.65vw,12px) 0 0;
  justify-self:end;
  max-width:30ch;
  font-size:clamp(20px,1.55vw,26px);
  line-height:1.35;
  letter-spacing:-.018em;
  font-weight:400;
  color:#171717;
  text-wrap:pretty;
}
.services-kora-stack{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  position:relative;
  overflow:visible;
}
.services-kora-chapter{
  width:100%;
  height:100svh;
  z-index:var(--service-z);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 0;
  position:sticky;
  top:0;
  pointer-events:none;
  overflow:visible;
}
.service-kora-card{
  width:100%;
  height:min(700px,calc(100svh - 40px));
  max-height:700px;
  padding:10px;
  border-radius:40px;
  overflow:clip;
  position:relative;
  pointer-events:auto;
  background:#ece6df;
  box-shadow:0 22px 72px rgba(34,20,16,.075);
}
.service-kora-inside{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-rows:minmax(0,1fr);
  gap:10px;
  overflow:hidden;
}
.service-kora-copy-panel,
.service-kora-media{
  min-width:0;
  height:100%;
  border-radius:30px;
  overflow:hidden;
}
.service-kora-copy-panel{
  padding:clamp(48px,4.1vw,72px);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background:#fff;
  color:#171717;
}
.service-kora-copy{
  width:100%;
  max-width:500px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:clamp(26px,2.25vw,36px);
}
.service-kora-copy h3{
  margin:0;
  font-size:clamp(38px,3.2vw,52px);
  line-height:.98;
  letter-spacing:-.052em;
  font-weight:400;
  max-width:100%;
  text-wrap:balance;
  white-space:nowrap;
}
.service-kora-copy p{
  margin:0;
  max-width:40ch;
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.56;
  letter-spacing:-.012em;
  font-weight:400;
  color:inherit;
  opacity:.82;
}
.service-kora-media{position:relative;background:#d8d3cc}
.service-kora-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:translate3d(24px,24px,0) scale(1.12) rotate(-2.4deg);
  transform-origin:center;
  transition:transform .82s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.service-kora-card.is-inview .service-kora-media img{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
.service-kora-card--dark .service-kora-copy-panel{background:#171717;color:#fff}
.service-kora-card--coral .service-kora-copy-panel{background:#ef735f;color:#fff}
.service-kora-card--deep .service-kora-copy-panel{background:linear-gradient(135deg,#a84539 0%,#cf5e4d 58%,#eb8b62 100%);color:#fff}
.service-kora-card--dark .service-kora-copy p,
.service-kora-card--coral .service-kora-copy p,
.service-kora-card--deep .service-kora-copy p{opacity:.88}
.service-kora-card--cream .service-kora-media img{object-position:50% 50%}
.service-kora-card--dark .service-kora-media img{object-position:58% 50%}
.service-kora-card--coral .service-kora-media img{object-position:50% 45%}
.service-kora-media--portrait img{object-position:50% 30%}

/* laptop: preserve the Kora hierarchy instead of shrinking card copy into a cramped block */
@media (min-width:901px) and (max-width:1199px){
  .services-kora{padding-top:clamp(92px,10vw,118px)}
  .services-kora-lead{grid-template-columns:1fr;gap:24px;margin-bottom:72px}
  .services-kora-lead h2{font-size:clamp(68px,6.8vw,84px);line-height:1.06;letter-spacing:-.03em;max-width:none;white-space:nowrap}
  .services-kora-lead p{justify-self:start;max-width:34ch;font-size:clamp(18px,1.8vw,22px);line-height:1.32;letter-spacing:-.018em}
  .service-kora-card{height:min(620px,calc(100svh - 40px));max-height:620px;border-radius:34px}
  .service-kora-copy-panel,.service-kora-media{border-radius:25px}
  .service-kora-copy-panel{padding:clamp(34px,4vw,48px)}
  .service-kora-copy{gap:24px;max-width:430px}
  .service-kora-copy h3{font-size:clamp(38px,4.1vw,50px)}
  .service-kora-copy p{font-size:15px;line-height:1.55;max-width:38ch}
}

/* very short PCs: same hierarchy, more compact card shell; never compress paragraph leading. */
@media (min-width:901px) and (max-height:700px){
  .services-kora{padding-top:82px}
  .services-kora-lead{margin-bottom:58px}
  .services-kora-lead h2{font-size:clamp(64px,6.4vw,78px);line-height:1.06;letter-spacing:-.03em;white-space:nowrap}
  .services-kora-lead p{font-size:clamp(17px,1.75vw,20px);line-height:1.32;max-width:34ch}
  .service-kora-card{height:min(560px,calc(100svh - 34px));padding:8px;border-radius:30px}
  .service-kora-inside{gap:8px}
  .service-kora-copy-panel,.service-kora-media{border-radius:22px}
  .service-kora-copy-panel{padding:32px 36px}
  .service-kora-copy{gap:20px}
  .service-kora-copy h3{font-size:clamp(36px,3.6vw,46px)}
  .service-kora-copy p{font-size:14px;line-height:1.55}
}

/* mobile/tablet: Kora's own rule — sticky chapters become normal-flow cards. */
@media (max-width:900px){
  .services-kora{padding:86px 18px 96px}
  .services-kora-lead{grid-template-columns:1fr;gap:22px;margin-bottom:54px}
  .services-kora-lead h2{font-size:clamp(42px,11.2vw,66px);line-height:1.06;letter-spacing:-.026em;max-width:none;white-space:nowrap}
  .services-kora-lead p{justify-self:start;margin:0;max-width:34ch;font-size:clamp(17px,4.6vw,20px);line-height:1.38;letter-spacing:-.012em}
  .services-kora-stack{gap:18px}
  .services-kora-chapter{height:auto;position:relative;top:auto;padding:0;z-index:auto;pointer-events:auto}
  .service-kora-card{height:auto;max-height:none;padding:8px;border-radius:28px;box-shadow:none}
  .service-kora-inside{display:flex;flex-direction:column;gap:8px;overflow:visible}
  .service-kora-copy-panel{order:1;height:auto;min-height:0;padding:32px 26px;border-radius:21px}
  .service-kora-media{order:2;height:min(64svh,520px);border-radius:21px}
  .service-kora-copy{gap:20px;max-width:none}
  .service-kora-copy h3{font-size:clamp(40px,11vw,58px);line-height:.98}
  .service-kora-copy p{font-size:15px;line-height:1.55;max-width:36ch}
  .service-kora-media img{transform:none!important;transition:none}
}

@media(prefers-reduced-motion:reduce){
  .service-kora-media img{transform:none!important;transition:none!important}
  .services-kora-chapter{position:relative;height:auto;padding:10px 0}
}

/* ==========================================================================
   V6.44 — Career process: compact four-card row + inline Bootstrap SVG icons.
   ========================================================================== */
.career-simple{
  position:relative;
  z-index:66;
  background:#111;
  color:#f5f1ec;
  padding:clamp(94px,8vw,126px) var(--gutter) clamp(104px,9vw,138px);
}
.career-simple-inner{width:100%;margin:0 auto}
.career-simple-head{max-width:980px;margin:0 0 clamp(48px,4.8vw,68px)}
.career-simple-head h2{
  margin:0;
  max-width:none;
  font-size:clamp(50px,4.2vw,70px);
  line-height:.98;
  letter-spacing:-.05em;
  font-weight:400;
  text-wrap:balance;
  opacity:.001;
  filter:blur(10px);
  transform:translate3d(0,14px,0);
  transition:opacity .52s ease,filter .68s cubic-bezier(.16,1,.3,1),transform .68s cubic-bezier(.16,1,.3,1);
}
.career-simple.is-inview .career-simple-head h2{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}
.career-simple-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1vw,16px);
  align-items:stretch;
}
.career-simple-card{
  min-width:0;
  min-height:clamp(286px,17.5vw,330px);
  padding:clamp(26px,1.75vw,32px);
  border-radius:28px;
  background:#f3eee8;
  color:#171717;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.14);
  --career-delay:0ms;
  --career-hover-field:var(--vs-coral,#ef735f);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  opacity:1;
  transform:translate3d(0,18px,0) scale(.975);
  transition:transform .78s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--career-delay);
}
/* Entrance curtain: the card exists at final geometry, but the page-colour cover retracts.
   This is intentionally not another opacity + 28px card fade. */
.career-simple-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:4;
  border-radius:inherit;
  background:#111;
  transform:scaleY(1);
  transform-origin:50% 0%;
  transition:transform .76s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--career-delay);
  pointer-events:none;
}
/* Hover field: a full-surface radial state grows out of the icon region.
   It is separate from the entrance cover so fast hover reversal remains deterministic. */
.career-simple-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:var(--career-hover-field);
  clip-path:circle(0 at 52px 52px);
  transition:clip-path .54s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.career-simple-card.is-inview{transform:translate3d(0,0,0) scale(1)}
.career-simple-card.is-inview::after{transform:scaleY(0)}
.career-simple-card.is-settled{transition-delay:0ms}
.career-simple-card:nth-child(2){--career-delay:90ms}
.career-simple-card:nth-child(3){--career-delay:180ms}
.career-simple-card:nth-child(4){--career-delay:270ms}
.career-simple-card--coral{background:var(--vs-coral,#ef735f);color:#fff;--career-hover-field:#171717}
.career-simple-icon,
.career-simple-card h3,
.career-simple-card p{position:relative;z-index:2}
.career-simple-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 0 30px;
  background:rgba(23,23,23,.065);
  flex:0 0 auto;
  opacity:0;
  transform:scale(.58) rotate(-18deg);
  transition:opacity .28s ease,transform .62s cubic-bezier(.16,1,.3,1),background-color .24s ease;
  transition-delay:calc(var(--career-delay) + 250ms),calc(var(--career-delay) + 250ms),0ms;
}
.career-simple-card.is-inview .career-simple-icon{opacity:1;transform:scale(1) rotate(0)}
.career-simple-card.is-settled .career-simple-icon{transition-delay:0ms}
.career-simple-card--coral .career-simple-icon{background:rgba(255,255,255,.16)}
.career-simple-icon svg{width:20px;height:20px;display:block;fill:currentColor}
.career-simple-card h3{
  margin:0;
  max-width:14ch;
  font-size:clamp(27px,1.8vw,34px);
  line-height:1.04;
  letter-spacing:-.04em;
  font-weight:400;
  text-wrap:balance;
}
.career-simple-card p{
  margin:20px 0 0;
  max-width:35ch;
  font-size:clamp(14px,.85vw,16px);
  line-height:1.52;
  letter-spacing:-.004em;
  color:inherit;
  opacity:.72;
}
.career-simple-card--coral p{opacity:.9}
@media (hover:hover) and (pointer:fine){
  .career-simple-card:hover::before{clip-path:circle(150% at 52px 52px)}
  .career-simple-card:hover .career-simple-icon{transform:scale(1.12) rotate(9deg);background:rgba(23,23,23,.12)}
  .career-simple-card--coral:hover .career-simple-icon{background:rgba(255,255,255,.20)}
}

/* Keep all four cards in one row through normal desktop/laptop widths. */
@media (min-width:1100px) and (max-width:1399px){
  .career-simple{padding-top:clamp(88px,8vw,112px)}
  .career-simple-head{margin-bottom:50px}
  .career-simple-head h2{font-size:clamp(46px,4.45vw,62px);white-space:nowrap}
  .career-simple-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .career-simple-card{min-height:310px;padding:24px 22px 26px;border-radius:24px}
  .career-simple-icon{width:38px;height:38px;margin-bottom:24px}.career-simple-icon svg{width:18px;height:18px}
  .career-simple-card h3{font-size:clamp(24px,2.05vw,29px);max-width:13ch}
  .career-simple-card p{margin-top:16px;font-size:13px;line-height:1.5;max-width:34ch}
}

/* Compact 2x2 only once four readable cards genuinely stop fitting. */
@media (min-width:761px) and (max-width:1099px){
  .career-simple{padding-top:92px}
  .career-simple-head{margin-bottom:48px}
  .career-simple-head h2{font-size:clamp(44px,5.3vw,56px)}
  .career-simple-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .career-simple-card{min-height:285px;padding:28px;border-radius:26px}
  .career-simple-icon{margin-bottom:24px}
  .career-simple-card h3{font-size:clamp(28px,3.4vw,36px);max-width:14ch}
  .career-simple-card p{margin-top:18px;font-size:14px;line-height:1.52;max-width:40ch}
}

@media (max-width:760px){
  .career-simple{padding:84px 18px 94px}
  .career-simple-head{margin-bottom:42px}
  .career-simple-head h2{max-width:100%;font-size:clamp(36px,10.2vw,50px);line-height:1.02;letter-spacing:-.04em;white-space:normal}
  .career-simple-grid{grid-template-columns:1fr;gap:12px}
  .career-simple-card{min-height:0;padding:28px 24px 30px;border-radius:22px;box-shadow:none}
  .career-simple-icon{width:40px;height:40px;margin-bottom:24px}
  .career-simple-card h3{max-width:none;font-size:clamp(30px,8.6vw,42px);line-height:1.04}
  .career-simple-card p{margin-top:17px;max-width:42ch;font-size:15px;line-height:1.55}
}

@media (min-width:761px) and (max-width:1099px){
  .career-simple-card:nth-child(1),.career-simple-card:nth-child(3){--career-delay:0ms}
  .career-simple-card:nth-child(2),.career-simple-card:nth-child(4){--career-delay:70ms}
}
@media (max-width:760px){.career-simple-card{--career-delay:0ms}}
@media(prefers-reduced-motion:reduce){
  .career-simple-head h2,.career-simple-card,.career-simple-card .career-simple-icon{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  .career-simple-card::after{display:none!important}
  .career-simple-card::before{clip-path:circle(0 at 52px 52px)!important;transition:none!important}
  .career-simple-card p{opacity:.72!important}
  .career-simple-card--coral p{opacity:.9!important}
}

/* ==========================================================================\n   V6.45 — Career card internal text alignment.\n   Every card in the same visual row uses identical vertical tracks for:\n   icon -> title start -> title reserve -> body start.\n   ========================================================================== */
@media (min-width:1100px){
  .career-simple-card{
    --career-icon-track:42px;
    --career-icon-title-gap:26px;
    --career-title-track:72px;
    --career-title-body-gap:18px;
    display:grid;
    grid-template-rows:
      var(--career-icon-track)
      var(--career-icon-title-gap)
      var(--career-title-track)
      var(--career-title-body-gap)
      auto;
    align-content:start;
    align-items:start;
  }
  .career-simple-icon{
    grid-row:1;
    margin:0;
    align-self:start;
  }
  .career-simple-card h3{
    grid-row:3;
    margin:0;
    align-self:end;
  }
  .career-simple-card p{
    grid-row:5;
    margin:0;
    align-self:start;
  }
}

@media (min-width:1100px) and (max-width:1399px){
  .career-simple-card{
    --career-icon-track:38px;
    --career-icon-title-gap:24px;
    --career-title-track:62px;
    --career-title-body-gap:16px;
  }
}

@media (min-width:761px) and (max-width:1099px){
  .career-simple-card{
    --career-icon-track:42px;
    --career-icon-title-gap:24px;
    --career-title-track:76px;
    --career-title-body-gap:18px;
    display:grid;
    grid-template-rows:
      var(--career-icon-track)
      var(--career-icon-title-gap)
      var(--career-title-track)
      var(--career-title-body-gap)
      auto;
    align-content:start;
    align-items:start;
  }
  .career-simple-icon{grid-row:1;margin:0;align-self:start}
  .career-simple-card h3{grid-row:3;margin:0;align-self:end}
  .career-simple-card p{grid-row:5;margin:0;align-self:start}
}

@media (max-width:760px){
  .career-simple-card{display:flex}
}

/* ==========================================================================\n   V6.48 — TEAM RIVER: TYPOGRAPHY + INTERACTION POLISH ONLY\n   Preserve the approved scattered portrait composition; improve hierarchy,\n   reveal, hover focus and mobile balance.\n   ========================================================================== */
.team-river{
  min-height:116vh;
  padding:clamp(92px,10vh,122px) 0 clamp(78px,9vh,108px);
}
.team-river-head{padding:0 var(--gutter)}
.team-river-head h2{
  margin:0;
  max-width:15.5ch;
  font-size:clamp(72px,6.35vw,112px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.038em;
  text-wrap:balance;
  opacity:0;
  filter:blur(9px);
  transform:translate3d(0,18px,0);
  transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1),filter .62s cubic-bezier(.16,1,.3,1);
}
.team-river.is-inview .team-river-head h2{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}
.team-river-window{
  height:clamp(520px,66vh,660px);
  margin-top:clamp(54px,6vh,78px);
  perspective:none;
}
.team-river-track{height:100%;position:relative;transform-style:flat;will-change:auto}
.portrait{
  --team-scroll-x:0vw;
  --team-scroll-y:0px;
  --team-i:0;
  width:min(25.5vw,400px);
  height:min(56vh,600px);
  border-radius:32px;
  isolation:isolate;
  transform:translate3d(calc(var(--tx) + var(--team-scroll-x)),calc(var(--ty) + var(--team-scroll-y)),var(--tz)) rotate(var(--r));
  transition:filter .34s ease,opacity .34s ease,box-shadow .42s cubic-bezier(.16,1,.3,1);
  box-shadow:0 24px 64px rgba(31,24,20,.12);
}
.portrait:nth-child(1){--team-i:0}.portrait:nth-child(2){--team-i:1}.portrait:nth-child(3){--team-i:2}.portrait:nth-child(4){--team-i:3}
.portrait::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:34% 0 0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.08) 30%,rgba(10,10,10,.68) 100%);
  opacity:.72;
  transition:opacity .32s ease;
}
/* Transform-only reveal curtain: the cards already occupy final geometry while the image is uncovered. */
.portrait::after{
  content:"";
  position:absolute;
  z-index:4;
  inset:-1px;
  border-radius:inherit;
  background:#f5f1ec;
  transform:scaleY(1);
  transform-origin:bottom;
  transition:transform .78s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(120ms + var(--team-i) * 90ms);
  pointer-events:none;
}
.team-river.is-inview .portrait::after{transform:scaleY(0)}
.portrait img{
  transform:scale(1.065);
  transition:transform .78s cubic-bezier(.16,1,.3,1),filter .34s ease;
  transition-delay:calc(80ms + var(--team-i) * 90ms);
  will-change:transform;
}
.team-river.is-inview .portrait img{transform:scale(1)}
.portrait figcaption{
  z-index:2;
  left:24px;
  right:24px;
  bottom:22px;
  gap:18px;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
  opacity:.9;
  transform:translate3d(0,5px,0);
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .28s ease;
}
.portrait figcaption b{font-size:clamp(23px,1.65vw,29px);line-height:1;font-weight:400;letter-spacing:-.025em}
.portrait figcaption span{font-size:13px;line-height:1.2;opacity:.72;transition:opacity .28s ease}

@media (hover:hover) and (pointer:fine){
  .team-river-track:has(.portrait:hover) .portrait:not(:hover){filter:saturate(.72) brightness(.88);opacity:.68}
  .portrait:hover{z-index:12;box-shadow:0 34px 88px rgba(31,24,20,.2)}
  .portrait:hover::before{opacity:.9}
  .portrait:hover img{transform:scale(1.045);transition-delay:0ms;transition-duration:.42s}
  .portrait:hover figcaption{opacity:1;transform:translate3d(0,0,0)}
  .portrait:hover figcaption span{opacity:1}
}

/* Laptop keeps the two-line hierarchy and all four portraits readable without hero-scale type. */
@media (min-width:901px) and (max-width:1199px){
  .team-river{min-height:112vh;padding-top:clamp(82px,9vh,102px)}
  .team-river-head h2{max-width:15.5ch;font-size:clamp(64px,6.6vw,80px);line-height:1.03;letter-spacing:-.034em}
  .team-river-window{height:clamp(450px,63vh,560px);margin-top:48px}
  .portrait{width:min(25vw,300px);height:min(54vh,490px);border-radius:28px}
  .portrait figcaption{left:18px;right:18px;bottom:18px}.portrait figcaption b{font-size:22px}.portrait figcaption span{font-size:12px}
}

/* Phone: retain the existing horizontal people rail, but give the heading and tiles their own phone composition. */
@media (max-width:900px){
  .team-river{min-height:0;padding:86px 0 72px}
  .team-river-head{padding:0 18px}
  .team-river-head h2{max-width:12.5ch;font-size:clamp(48px,12.5vw,68px);line-height:1.04;letter-spacing:-.032em;filter:none;transform:translate3d(0,12px,0)}
  .team-river.is-inview .team-river-head h2{transform:none}
  .team-river-window{height:auto;margin-top:42px;overflow:visible}
  .team-river-track{height:auto;display:flex;gap:14px;overflow-x:auto;padding:0 18px 22px;scroll-snap-type:x mandatory;scroll-padding-left:18px;scrollbar-width:none;overscroll-behavior-x:contain}
  .team-river-track::-webkit-scrollbar{display:none}
  .portrait{position:relative;flex:0 0 78vw;width:78vw;height:min(64svh,520px);transform:none!important;scroll-snap-align:start;border-radius:24px;box-shadow:0 18px 48px rgba(31,24,20,.11)}
  .portrait::after{transition-duration:.62s}
  .portrait img{transform:scale(1.045);transition-duration:.62s}
  .team-river.is-inview .portrait img{transform:scale(1)}
  .portrait figcaption{left:18px;right:18px;bottom:18px}.portrait figcaption b{font-size:24px}.portrait figcaption span{font-size:12px;opacity:.86}
}

@media(prefers-reduced-motion:reduce){
  .team-river-head h2{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  .portrait::after{display:none!important}.portrait img{transform:none!important;transition:none!important}.portrait figcaption{transform:none!important;transition:none!important}
}

/* ==========================================================================\n   V6.49 — TEAM RIVER: STATIC SCATTER + UNCLIPPED SHADOWS\n   No continuous scroll motion. Cards remain in authored positions after the\n   one-time reveal; ancestors no longer clip card geometry or ink overflow.\n   ========================================================================== */
.team-river{
  min-height:116vh;
  overflow:visible;
}
.team-river-window{
  height:clamp(540px,69vh,690px);
  overflow:visible;
  perspective:none;
  margin-top:clamp(54px,6vh,76px);
}
.team-river-track{
  height:100%;
  position:relative;
  overflow:visible;
  transform:none!important;
  transform-style:flat;
}
.portrait{
  --team-scroll-x:0px!important;
  --team-scroll-y:0px!important;
  width:min(23vw,390px);
  height:min(55vh,580px);
  transform:translate3d(var(--tx),var(--ty),0) rotate(var(--r))!important;
  box-shadow:0 28px 76px rgba(31,24,20,.14);
  transition:filter .32s ease,opacity .32s ease,box-shadow .38s cubic-bezier(.16,1,.3,1);
}
/* Authored static scatter: all four cards stay inside the viewport at PC sizes. */
.p1{--tx:4vw;--ty:7vh;--r:-4deg}
.p2{--tx:30vw;--ty:1vh;--r:2deg}
.p3{--tx:55vw;--ty:8vh;--r:-2deg}
.p4{--tx:73vw;--ty:1vh;--r:4deg}

@media (hover:hover) and (pointer:fine){
  .team-river-track:has(.portrait:hover) .portrait:not(:hover){filter:saturate(.82) brightness(.93);opacity:.78}
  .portrait:hover{z-index:12;box-shadow:0 38px 96px rgba(31,24,20,.22)}
  .portrait:hover img{transform:scale(1.035);transition-delay:0ms;transition-duration:.38s}
  .portrait:hover figcaption{opacity:1;transform:none}
  .portrait:hover figcaption span{opacity:1}
}

@media (min-width:901px) and (max-width:1199px){
  .team-river-window{height:clamp(470px,66vh,590px);overflow:visible}
  .portrait{width:min(22.8vw,270px);height:min(53vh,470px)}
  .p1{--tx:4vw;--ty:6vh;--r:-3.5deg}
  .p2{--tx:29vw;--ty:1vh;--r:1.8deg}
  .p3{--tx:54vw;--ty:7vh;--r:-1.8deg}
  .p4{--tx:74vw;--ty:1.5vh;--r:3.5deg}
}

/* Mobile keeps the explicit horizontal rail and never inherits desktop scatter. */
@media (max-width:900px){
  .team-river{overflow:visible}
  .team-river-window{height:auto;overflow:visible}
  .team-river-track{overflow-x:auto;overflow-y:visible;transform:none!important}
  .portrait{transform:none!important;width:78vw;height:min(64svh,520px);box-shadow:0 18px 48px rgba(31,24,20,.11)}
}

/* V6.49 QA correction: the final portrait is edge-safe by construction.
   Anchor it from the right instead of relying on a viewport translation. */
@media (min-width:901px){
  .team-river .p4{left:auto;right:4.5vw;--tx:0vw}
}

/* ==========================================================================
   V6.53 — mathematically laid out 3D brand carousel.
   Canonical geometry: rotateY(i*theta) translateZ(radius), while the carousel
   receives the inverse translateZ(-radius) and owns the scroll rotation.
   ========================================================================== */
@media (min-width:901px){
  .brands-horizon{
    min-height:100vh;
    padding:10vh var(--gutter) 6vh;
    overflow:clip;
    perspective:none!important;
  }
  .brand-scene{
    --brand-cell-gap:clamp(160px,13vw,260px);
    position:relative;
    height:52vh;
    min-height:410px;
    margin-top:2.5vh;
    perspective:clamp(1200px,92vw,1680px);
    perspective-origin:50% 46%;
    overflow:clip;
  }
  .brand-plane{
    position:absolute;
    left:50%;
    top:52%;
    width:clamp(136px,9vw,176px);
    aspect-ratio:402/502;
    height:auto;
    min-height:0;
    margin:0;
    overflow:visible;
    transform-style:preserve-3d;
    transform-origin:50% 50%;
    will-change:transform;
  }
  .brand-plane figure{
    position:absolute;
    inset:0;
    left:0!important;
    top:0!important;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    margin:0;
    display:block;
    background:transparent;
    border-radius:clamp(18px,1.45vw,28px);
    overflow:clip;
    transform-origin:50% 50%;
    transform-style:preserve-3d;
    backface-visibility:visible;
    -webkit-backface-visibility:visible;
    will-change:transform;
  }
  .brand-plane figure.brand-card-front,
  .brand-plane figure.brand-card-rear{backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .brand-plane figure.brand-card-rear{pointer-events:none}
  .brand-plane figure.brand-card-front img,
  .brand-plane figure.brand-card-rear img{
    width:100%;height:100%;display:block;object-fit:contain;filter:none;border-radius:inherit;
    backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 24px 54px rgba(0,0,0,.24);
    transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;transform:translateZ(.6px);
  }
  @media (hover:hover) and (pointer:fine){
    .brand-plane figure.brand-card-front:hover img{transform:translateZ(10px) scale(1.035);box-shadow:0 30px 66px rgba(0,0,0,.31)}
  }
}

@media (min-width:901px) and (max-width:1199px){
  .brand-scene{--brand-cell-gap:clamp(132px,12.8vw,172px);height:49vh;min-height:360px;perspective:clamp(1050px,100vw,1320px);perspective-origin:50% 48%}
  .brand-plane{width:clamp(108px,9.4vw,132px);top:53%}
}

@media (max-width:900px){
  .brand-scene{height:auto;min-height:0;margin-top:42px;perspective:none;overflow:visible}
  .brand-plane{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;overflow:visible;transform:none!important;transform-style:flat}
  .brand-plane figure{position:relative;inset:auto;left:auto!important;top:auto!important;width:100%;height:auto;aspect-ratio:402/502;margin:0;transform:none!important;overflow:visible;border-radius:20px}
  .brand-plane figure.brand-card-rear{display:none}.brand-plane figure.brand-card-front img{position:static;width:100%;height:100%;object-fit:contain;filter:none;transform:none!important;box-shadow:none;border-radius:inherit}
}

@media(prefers-reduced-motion:reduce) and (min-width:901px){
  .brand-plane{transition:none!important}
}

/* ==========================================================================
   V6.54 — ENDING SEQUENCE: FAQ → FÖLJ OSS
   Simple structures, premium presentation. Each section has one clear job,
   one dominant medium, and only the motion that reinforces that job.
   ========================================================================== */

/* ==========================================================================
   V6.64 — CANONICAL HEJSAN SECTION
   Consolidated from the old V6.54/V6.56/V6.57 patch stack.
   Heading + message + CTA are one compact content group centered top-to-bottom
   inside the left copy area; all content remains left aligned.
   ========================================================================== */
.career-close{
  min-height:0;
  background:var(--vs-coral);
  color:var(--vs-cream);
  padding:clamp(88px,6.8vw,120px) var(--gutter);
  overflow:clip;
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
.career-close-inner{
  width:min(100%,1760px);
  min-height:clamp(600px,68svh,730px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(360px,.74fr) minmax(570px,1.26fr);
  gap:clamp(72px,7.2vw,138px);
  align-items:center;
  position:relative;
}
.career-close-copy{
  grid-column:1;
  grid-row:1;
  position:relative;
  z-index:6;
  align-self:stretch;
  justify-self:center;
  width:min(100%,610px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:left;
  max-width:none;
  margin:0;
  padding:0;
  background:none;
  border-radius:0;
  box-shadow:none;
  color:var(--vs-cream);
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .5s ease .06s,transform .78s cubic-bezier(.16,1,.3,1) .06s;
}
.career-close-copy h2{
  margin:0;
  color:var(--vs-cream);
  font-size:clamp(78px,5.6vw,104px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.038em;
  white-space:nowrap;
}
.career-close-message{
  width:100%;
  margin-top:clamp(34px,3vw,46px);
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.career-close-lead{
  margin:0 0 clamp(18px,1.5vw,24px);
  width:100%;
  max-width:20ch;
  margin-inline:0;
  color:var(--vs-cream);
  font-size:clamp(26px,1.75vw,31px);
  line-height:1.18;
  letter-spacing:-.022em;
  font-weight:400;
  text-align:left;
  text-wrap:balance;
}
.career-close-body{
  margin:0 0 clamp(28px,2.2vw,34px);
  width:100%;
  max-width:44ch;
  margin-inline:0;
  color:rgba(245,241,236,.88);
  font-size:clamp(17px,1vw,18.5px);
  line-height:1.62;
  letter-spacing:-.006em;
  text-align:left;
}
.career-close .roll-cta-dark{
  --pr-base-bg:var(--vs-cream);
  --pr-base-fg:var(--vs-ink);
  --pr-hover-bg:#171717;
  --pr-hover-fg:var(--vs-cream);
  --pr-hover-border:#171717;
  margin-inline:0;
  background:var(--pr-base-bg);
  color:var(--pr-base-fg);
  border-color:rgba(245,241,236,.28);
}

.career-close-stack{
  grid-column:2;
  grid-row:1;
  position:relative;
  width:100%;
  height:100%;
  min-height:clamp(560px,64svh,700px);
  align-self:stretch;
  perspective:1500px;
  perspective-origin:52% 46%;
  transform-style:preserve-3d;
  isolation:auto;
  overflow:visible;
  opacity:0;
  transform:translate3d(0,20px,0);
  transition:opacity .5s ease .08s,transform .9s cubic-bezier(.16,1,.3,1) .08s;
  --stack-rx:0deg;
  --stack-ry:0deg;
}
.career-close-stack::before{
  content:"";
  position:absolute;
  left:10%;
  right:8%;
  bottom:1%;
  height:18%;
  border-radius:50%;
  background:rgba(75,25,18,.16);
  filter:blur(34px);
  opacity:.55;
  transform:translateZ(-220px);
  pointer-events:none;
}
.career-stack-card{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:#171717;
  border:1px solid rgba(245,241,236,.22);
  box-shadow:0 30px 70px rgba(65,20,14,.22);
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
  transition:transform .72s cubic-bezier(.16,1,.3,1),box-shadow .72s cubic-bezier(.16,1,.3,1),filter .5s ease;
}
.career-stack-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.career-stack-front{
  z-index:3;
  width:min(66%,650px);
  aspect-ratio:4/5;
  right:5%;
  top:50%;
  border-radius:clamp(30px,2.4vw,44px);
  transform:translate3d(0,-50%,0) rotateX(var(--stack-rx)) rotateY(var(--stack-ry));
}
.career-stack-front img{object-position:50% 41%}
.career-stack-back-a{
  z-index:1;
  width:min(45%,430px);
  aspect-ratio:1/1.12;
  left:1%;
  top:9%;
  border-radius:clamp(24px,2vw,36px);
  filter:saturate(.92) brightness(.96);
  transform:translate3d(0,0,-150px) rotateY(7deg) rotateZ(-3.5deg) scale(.94);
}
.career-stack-back-a img{object-position:51% 50%}
.career-stack-back-b{
  z-index:2;
  width:min(38%,360px);
  aspect-ratio:4/5;
  left:6%;
  bottom:2%;
  border-radius:clamp(24px,2vw,36px);
  filter:saturate(.94) brightness(.92);
  transform:translate3d(0,0,-90px) rotateY(5deg) rotateZ(3deg) scale(.96);
}
.career-stack-back-b img{object-position:50% 46%}
.career-close.is-inview .career-close-copy,
.career-close.is-inview .career-close-stack{opacity:1;transform:translate3d(0,0,0)}

@media (hover:hover) and (pointer:fine){
  .career-close-stack:hover .career-stack-front{
    transform:translate3d(18px,-50%,28px) rotateX(var(--stack-rx)) rotateY(var(--stack-ry)) scale(1.012);
    box-shadow:0 38px 88px rgba(61,18,13,.28);
  }
  .career-close-stack:hover .career-stack-front img{transform:scale(1.018)}
  .career-close-stack:hover .career-stack-back-a{transform:translate3d(-30px,-8px,-120px) rotateY(5deg) rotateZ(-5deg) scale(.95)}
  .career-close-stack:hover .career-stack-back-b{transform:translate3d(-10px,18px,-60px) rotateY(3deg) rotateZ(4deg) scale(.97)}
}

@media (min-width:901px) and (max-width:1199px){
  .career-close{padding:72px 24px}
  .career-close-inner{
    min-height:540px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:540px;
    gap:0;
    align-items:start;
  }
  .career-close-copy{
    grid-column:1;
    grid-row:1;
    width:min(560px,58vw);
    justify-self:center;
    align-self:stretch;
    justify-content:center;
    align-items:flex-start;
    text-align:left;
  }
  .career-close-copy h2{font-size:clamp(66px,6.1vw,76px)}
  .career-close-message{width:100%;margin-top:32px}
  .career-close-lead{font-size:clamp(22px,2.1vw,26px);max-width:21ch;text-align:left}
  .career-close-body{font-size:15.8px;line-height:1.6;max-width:40ch;text-align:left}
  .career-close .roll-cta-dark{margin-inline:0}
  /* Keep the 3D stack as a right-edge spatial counterweight, not a second column that shifts copy left. */
  .career-close-stack{
    grid-column:1;
    grid-row:1;
    position:absolute;
    top:0;
    right:clamp(-330px,-25vw,-210px);
    width:min(62vw,660px);
    height:540px;
    min-height:540px;
    perspective:1300px;
    z-index:2;
  }
  .career-stack-front{width:66%;right:3%;border-radius:32px}
  .career-stack-back-a{width:39%;left:27%;top:9%;border-radius:26px}
  .career-stack-back-b{width:34%;left:25%;bottom:2%;border-radius:26px}
}

@media (max-width:900px){
  .career-close{padding:60px 18px 78px;overflow:hidden}
  .career-close-inner{display:flex;flex-direction:column;min-height:0;gap:32px}
  .career-close-copy{order:1;width:min(100%,540px);margin-inline:auto;align-self:auto;align-items:flex-start;text-align:left;opacity:1;transform:none}
  .career-close-copy h2{font-size:clamp(58px,15vw,78px);line-height:1;letter-spacing:-.035em}
  .career-close-message{width:100%;margin-top:26px}
  .career-close-lead{font-size:clamp(23px,6vw,28px);line-height:1.2;max-width:19ch;margin-bottom:17px}
  .career-close-body{font-size:15px;line-height:1.62;max-width:37ch;margin-bottom:28px}
  .career-close-stack{
    order:2;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:1/1.18;
    perspective:1100px;
    opacity:1;
    transform:none;
    overflow:visible;
  }
  .career-close-stack::before{left:8%;right:8%;bottom:0;height:13%;filter:blur(24px)}
  .career-stack-front{width:72%;right:2%;top:50%;border-radius:26px;transform:translate3d(0,-50%,0)}
  .career-stack-back-a{width:47%;left:1%;top:4%;border-radius:22px;transform:translate3d(0,0,-90px) rotateZ(-4deg) scale(.94)}
  .career-stack-back-b{width:42%;left:3%;bottom:1%;border-radius:22px;transform:translate3d(0,0,-50px) rotateZ(4deg) scale(.96)}
}

@media (prefers-reduced-motion:reduce){
  .career-close-copy,.career-close-stack,.career-stack-card,.career-stack-card img{transition:none!important}
  .career-close-copy,.career-close-stack{opacity:1!important;transform:none!important}
  .career-close-stack{--stack-rx:0deg;--stack-ry:0deg}
}

/* FAQ — V6.65 canonical sizing / spacing */
.faq-editorial{
  position:relative;
  z-index:4;
  min-height:clamp(620px,78svh,760px);
  margin-top:0;
  border-radius:0;
  background:#f5f1ec;
  color:#171717;
  padding:clamp(84px,6.5vw,116px) var(--gutter) clamp(88px,6.5vw,118px);
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(70px,7vw,124px);
  align-items:start;
  overflow:clip;
}
.faq-sticky{
  position:sticky;
  top:clamp(78px,10vh,108px);
  align-self:start;
  max-width:560px;
}
.faq-sticky h2{
  margin:0;
  max-width:9.15ch;
  font-size:clamp(60px,4.6vw,82px);
  font-weight:400;
  line-height:1.07;
  letter-spacing:-.036em;
  text-wrap:balance;
}
.faq-contact{
  margin-top:clamp(34px,3.5vw,52px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}
.faq-sticky p{
  margin:0;
  color:rgba(23,23,23,.44);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.faq-sticky a{
  display:inline-block;
  margin:0;
  padding-bottom:3px;
  border-bottom:1px solid rgba(23,23,23,.4);
  font-size:16px;
  text-decoration:none;
}
.faq-list{
  align-self:start;
  padding-top:4px;
}
.faq-list article{border-top:1px solid rgba(0,0,0,.16)}
.faq-list article:last-child{border-bottom:1px solid rgba(0,0,0,.16)}
.faq-list button{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 40px;
  gap:24px;
  align-items:center;
  padding:clamp(24px,1.75vw,30px) 0;
  color:#171717;
  font-size:clamp(22px,1.55vw,28px);
  line-height:1.16;
  letter-spacing:-.028em;
  text-align:left;
  transition:color .3s ease;
}
.faq-list button i{
  --pr-hover-bg:var(--vs-coral);
  --pr-hover-fg:#171717;
  position:relative;
  width:38px;
  height:38px;
  display:block;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(0,0,0,.18);
  border-radius:50%;
  font-size:0;
  font-style:normal;
  font-weight:300;
  line-height:0;
  transition:transform .42s cubic-bezier(.16,1,.3,1),background-color .3s ease,color .3s ease,border-color .3s ease;
}
.faq-list button i::before,
.faq-list button i::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:1.5px;
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%,-50%);
  transform-origin:center;
}
.faq-list button i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-list button i .pointer-reveal-layer{z-index:4}
.faq-list button i .pointer-reveal-content{position:absolute;inset:0}
.faq-reveal-plus{position:absolute;inset:0;display:block;color:inherit}
.faq-reveal-plus::before,.faq-reveal-plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;border-radius:999px;background:currentColor;transform:translate(-50%,-50%)}
.faq-reveal-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-list article.is-open button i{
  transform:rotate(45deg);
  background:var(--vs-coral);
  border-color:var(--vs-coral);
  color:#171717;
}
.faq-list article>div{
  height:0;
  overflow:hidden;
  transition:height .55s cubic-bezier(.16,1,.3,1);
}
.faq-list article>div p{
  margin:0;
  max-width:62ch;
  padding:0 64px 28px 0;
  color:rgba(0,0,0,.64);
  font-size:16px;
  line-height:1.6;
}
@media (hover:hover) and (pointer:fine){
  .faq-list button:hover{color:#ef735f}
  .faq-list button:hover i{border-color:rgba(239,115,95,.65)}
}
.faq-list button:focus-visible{outline:none;color:#ef735f}
.faq-list button:focus-visible i{border-color:rgba(239,115,95,.75)}

/* Följ oss — final expressive outro. Existing media collage, tighter and non-sticky. */
.social-editorial{
  position:relative;
  z-index:5;
  min-height:100svh;
  margin-top:-44px;
  border-radius:54px 54px 0 0;
  background:var(--vs-coral);
  color:#171717;
  padding:clamp(108px,9vw,150px) var(--gutter) clamp(90px,8vw,130px);
  display:grid;
  grid-template-columns:minmax(320px,.72fr) minmax(620px,1.28fr);
  gap:clamp(60px,6vw,110px);
  align-items:center;
  overflow:hidden;
}
.social-copy{position:relative;top:auto;align-self:center;max-width:520px;opacity:0;transform:translate3d(0,22px,0);transition:opacity .65s ease,transform .85s cubic-bezier(.16,1,.3,1)}
.social-copy h2{margin:0;font-size:clamp(78px,7vw,122px);font-weight:400;letter-spacing:-.052em;line-height:.96}
.social-copy p{font-size:clamp(17px,1.12vw,20px);line-height:1.56;max-width:31ch;margin:28px 0 34px}
.social-spread{height:min(72vh,760px);min-height:560px;position:relative;isolation:isolate}
.social-spread figure{position:absolute;margin:0;overflow:hidden;border-radius:clamp(26px,2.3vw,40px);background:#222;box-shadow:0 26px 72px rgba(70,10,5,.16);opacity:0;transition:opacity .65s ease,transform .9s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.social-spread img,.social-spread video{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.035);transition:transform .65s cubic-bezier(.16,1,.3,1)}
.social-main{left:1%;top:4%;width:56%;height:70%;z-index:2;transform:translate3d(0,34px,0) rotate(-1.5deg)}
.social-card-a{right:0;top:7%;width:35%;height:36%;z-index:1;transform:translate3d(24px,14px,0) rotate(2.2deg)}
.social-card-b{right:5%;bottom:2%;width:43%;height:36%;z-index:4;transform:translate3d(22px,30px,0) rotate(-1.8deg)}
.social-small-video{left:14%;bottom:0;width:30%;height:34%;z-index:5;transform:translate3d(-18px,32px,0) rotate(1.3deg)}
.social-editorial.is-inview .social-copy{opacity:1;transform:translate3d(0,0,0)}
.social-editorial.is-inview .social-spread figure{opacity:1}
.social-editorial.is-inview .social-main{transform:translate3d(0,0,0) rotate(-1.5deg);transition-delay:.06s}
.social-editorial.is-inview .social-card-a{transform:translate3d(0,0,0) rotate(2.2deg);transition-delay:.14s}
.social-editorial.is-inview .social-card-b{transform:translate3d(0,0,0) rotate(-1.8deg);transition-delay:.21s}
.social-editorial.is-inview .social-small-video{transform:translate3d(0,0,0) rotate(1.3deg);transition-delay:.28s}
.social-editorial.is-inview .social-spread img,.social-editorial.is-inview .social-spread video{transform:scale(1)}
@media (hover:hover) and (pointer:fine){.social-spread figure:hover{box-shadow:0 34px 90px rgba(70,10,5,.22)}.social-spread figure:hover img,.social-spread figure:hover video{transform:scale(1.025)}}

/* Desktop/laptop tuning: preserve hierarchy without turning laptop into a tablet layout. */
@media (min-width:901px) and (max-width:1199px){
  
  .social-editorial{margin-top:-36px;border-radius:42px 42px 0 0;padding:104px 24px 94px;grid-template-columns:minmax(280px,.7fr) minmax(560px,1.3fr);gap:46px}.social-copy h2{font-size:clamp(70px,7.5vw,92px)}.social-copy p{font-size:16px}.social-spread{height:min(69vh,650px);min-height:500px}
}

@media (max-width:900px){
  
  .social-editorial{min-height:0;margin-top:-26px;border-radius:30px 30px 0 0;padding:86px 18px 92px;display:block}.social-copy{opacity:1;transform:none;max-width:none}.social-copy h2{font-size:clamp(62px,17vw,88px);line-height:.98}.social-copy p{font-size:15px;max-width:32ch;margin:24px 0 30px}.social-spread{height:auto;min-height:0;margin-top:50px;display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:visible}.social-spread figure,.social-main,.social-card-a,.social-card-b,.social-small-video{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:auto;min-height:0;aspect-ratio:4/5;border-radius:22px;opacity:1!important;transform:none!important;box-shadow:none}.social-main{grid-column:1/-1;aspect-ratio:1/1.08}.social-card-a,.social-card-b,.social-small-video{aspect-ratio:1/1.08}.social-spread img,.social-spread video{transform:none!important}
}

@media (min-width:901px) and (max-width:1199px){
  .faq-editorial{
    min-height:clamp(560px,76svh,660px);
    padding:72px 24px 82px;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:52px;
  }
  .faq-sticky{top:76px;max-width:430px}
  .faq-sticky h2{font-size:clamp(52px,5.15vw,62px);max-width:9.35ch;line-height:1.08;letter-spacing:-.034em}
  .faq-contact{margin-top:34px}
  .faq-list button{grid-template-columns:minmax(0,1fr) 38px;gap:20px;padding:22px 0;font-size:clamp(21px,2vw,24px)}
  .faq-list button i{width:36px;height:36px;font-size:22px}
  .faq-list article>div p{padding:0 54px 24px 0;font-size:15px;line-height:1.58}
}

@media (max-width:900px){
  .faq-editorial{
    min-height:0;
    padding:72px 18px 84px;
    display:block;
    overflow:hidden;
  }
  .faq-sticky{position:relative;top:auto;max-width:none}
  .faq-sticky h2{font-size:clamp(46px,10.5vw,58px);line-height:1.09;letter-spacing:-.032em;max-width:9.6ch}
  .faq-contact{margin-top:30px}
  .faq-sticky a{font-size:15px}
  .faq-list{margin-top:46px;padding-top:0}
  .faq-list button{grid-template-columns:minmax(0,1fr) 36px;gap:16px;padding:20px 0;font-size:clamp(20px,5vw,23px);line-height:1.16}
  .faq-list button i{width:34px;height:34px}.faq-list button i::before,.faq-list button i::after{width:13px;height:1.4px}
  .faq-list article>div p{max-width:none;padding:0 0 24px;font-size:14px;line-height:1.6}
}

@media (prefers-reduced-motion:reduce){
  .social-copy,.social-spread figure,.social-spread img,.social-spread video{transition:none!important;transform:none!important;opacity:1!important}
}

/* V6.54 QA refinements */
@media (min-width:901px){
  .social-editorial{align-items:start}
  .social-copy{align-self:start;padding-top:clamp(24px,4vh,54px)}
  .social-spread{height:min(70vh,700px);min-height:520px}
  .social-main{width:54%;height:74%}
}

/* V6.54's empty rounded chapter-divider slabs are removed. */
.social-editorial{margin-top:0;border-radius:0}

@media (min-width:901px) and (max-width:1199px){

  .social-editorial{margin-top:0;border-radius:0}
}
@media (max-width:900px){

  .social-editorial{margin-top:0;border-radius:0}
}

/* ========================================================================== 
   V6.68 — FÖLJ OSS / CTA ABOVE INSTAGRAM ORBIT
   Ugency hand asset + one true CSS 3D ring. No scroll scrub, no ticker rows.
   ========================================================================== */
.social-orbit{
  --orbit-count:9;
  --orbit-card-w:190px;
  --orbit-card-h:250px;
  --orbit-radius:305px;
  --orbit-pitch:-13deg;
  --orbit-speed:34s;
  position:relative;
  z-index:5;
  background:var(--vs-coral);
  color:var(--vs-cream);
  overflow:hidden;
}
.social-orbit-stage{
  width:min(100%,1880px);
  margin:0 auto;
  padding:0 var(--gutter);
}
.social-orbit-viewport{
  position:relative;
  height:clamp(610px,66svh,730px);
  perspective:1500px;
  perspective-origin:50% 44%;
  overflow:clip;
}
.social-orbit-scene{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}
.social-orbit-ring{
  position:absolute;
  left:50%;
  top:42%;
  width:0;
  height:0;
  transform-style:preserve-3d;
  animation:socialOrbitSpin var(--orbit-speed) linear infinite;
  will-change:transform;
}
.social-orbit.is-orbit-paused .social-orbit-ring{animation-play-state:paused}
.social-orbit-item{
  position:absolute;
  left:calc(var(--orbit-card-w) / -2);
  top:calc(var(--orbit-card-h) / -2);
  width:var(--orbit-card-w);
  height:var(--orbit-card-h);
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * (360deg / var(--orbit-count)))) translateZ(var(--orbit-radius));
}
.social-orbit-face{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:clamp(18px,1.6vw,28px);
  background:#ece9e4;
  border:1px solid rgba(245,241,236,.32);
  box-shadow:0 24px 50px rgba(67,20,14,.16);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.social-orbit-back{transform:rotateY(180deg)}
.social-orbit-face img,
.social-orbit-face video{display:block;width:100%;height:100%;object-fit:cover}
.social-orbit-face video{pointer-events:none;background:#171717}
.social-orbit-hand{
  position:absolute;
  z-index:0;
  left:50%;
  top:0;
  width:clamp(420px,27vw,510px);
  margin:0;
  pointer-events:none;
  transform:translate3d(-34.8%,0,0);
  transform-style:preserve-3d;
  will-change:transform;
}
.social-orbit-hand img{display:block;width:100%;height:auto}
.social-orbit-fog{
  position:absolute;
  z-index:20;
  left:-7%;
  right:-7%;
  bottom:-120px;
  height:360px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(239,115,95,0) 0%,rgba(239,115,95,.17) 18%,rgba(239,115,95,.82) 54%,var(--vs-coral) 72%,var(--vs-coral) 100%);
  filter:blur(26px);
}
.social-orbit-copy{
  min-height:clamp(330px,38svh,420px);
  padding:clamp(78px,6.5vw,108px) var(--gutter) clamp(58px,4.8vw,78px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.social-orbit-copy h2{
  margin:0;
  font-size:clamp(74px,6vw,108px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.045em;
  color:var(--vs-cream);
}
.social-orbit-copy p{
  margin:clamp(22px,2vw,30px) 0 clamp(30px,2.6vw,38px);
  max-width:35ch;
  font-size:clamp(17px,1.1vw,19px);
  line-height:1.55;
  color:rgba(245,241,236,.86);
}
.social-orbit .roll-cta-light{background:var(--vs-cream);color:var(--vs-ink)}
@keyframes socialOrbitSpin{
  from{transform:rotateX(var(--orbit-pitch)) rotateY(0deg)}
  to{transform:rotateX(var(--orbit-pitch)) rotateY(360deg)}
}

@media (min-width:901px) and (max-width:1199px){
  .social-orbit{--orbit-card-w:160px;--orbit-card-h:212px;--orbit-radius:292px;--orbit-pitch:-12deg;--orbit-speed:36s}
  .social-orbit-stage{padding:0 24px}
  .social-orbit-viewport{height:580px;perspective:1350px}
  .social-orbit-ring{top:42%}
  .social-orbit-hand{width:405px;transform:translate3d(-34.8%,0,0)}
  .social-orbit-fog{height:310px;bottom:-108px;filter:blur(23px)}
  .social-orbit-copy{min-height:310px;padding:68px 24px 54px}
  .social-orbit-copy h2{font-size:clamp(66px,6.4vw,78px)}
  .social-orbit-copy p{font-size:16px;max-width:34ch}
}

@media (max-width:900px){
  .social-orbit{--orbit-card-w:104px;--orbit-card-h:138px;--orbit-radius:194px;--orbit-pitch:-10deg;--orbit-speed:40s}
  .social-orbit-stage{padding:0}
  .social-orbit-viewport{height:min(540px,128vw);min-height:470px;perspective:1050px;perspective-origin:50% 41%}
  .social-orbit-ring{top:40%}
  .social-orbit-hand{top:10px;width:min(320px,78vw);transform:translate3d(-34.8%,0,0)}
  .social-orbit-fog{left:-18%;right:-18%;height:260px;bottom:-88px;filter:blur(20px)}
  .social-orbit-copy{min-height:300px;padding:64px 18px 44px}
  .social-orbit-copy h2{font-size:clamp(58px,15vw,76px)}
  .social-orbit-copy p{font-size:15px;max-width:30ch;margin:20px 0 28px}
  .social-orbit-face{border-radius:18px}
}

@media (max-width:480px){
  .social-orbit{--orbit-card-w:92px;--orbit-card-h:122px;--orbit-radius:172px}
  .social-orbit-viewport{height:470px;min-height:470px}
  .social-orbit-hand{width:min(292px,76vw);top:16px}
  .social-orbit-fog{height:230px;bottom:-78px}
}

@media (prefers-reduced-motion:reduce){
  .social-orbit-ring{animation:none;transform:rotateX(var(--orbit-pitch)) rotateY(-22deg)}
}



/* ==========================================================================\n   V6.74 — FOOTER / BALANCED BRAND + NEWSLETTER ROW\n   One calm brand zone, one newsletter zone, one compact information row.\n   Newsletter input + submit button remain one physical row at every breakpoint.\n   ========================================================================== */
.vs-footer{
  position:relative;
  background:#101010;
  color:var(--vs-cream);
  padding:0 var(--gutter);
  overflow:hidden;
}
.footer-shell{
  width:min(100%,1800px);
  margin:0 auto;
}
.footer-main{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(460px,1.1fr);
  gap:clamp(72px,7vw,126px);
  align-items:center;
  padding:clamp(76px,6vw,104px) 0 clamp(68px,5.4vw,92px);
}
.footer-brand-zone,
.footer-newsletter-zone{min-width:0}
.footer-brand{
  display:block;
  width:clamp(182px,12.2vw,220px);
  margin:0 0 clamp(38px,3vw,48px);
}
.footer-brand img{display:block;width:100%;height:auto}
.footer-statement{
  margin:0;
  max-width:13ch;
  color:var(--vs-cream);
  font-size:clamp(52px,3.8vw,66px);
  line-height:1.08;
  letter-spacing:-.042em;
  font-weight:400;
  text-wrap:balance;
}
.footer-brand-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:clamp(30px,2.5vw,38px);
}
.footer-socials{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-socials a{
  width:48px;height:48px;
  border:1px solid rgba(245,241,236,.22);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:rgba(245,241,236,.9);
  transition:background .28s ease,color .28s ease,border-color .28s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.footer-socials svg{width:18px;height:18px;display:block;fill:currentColor}
.footer-socials a{--pr-hover-bg:var(--vs-coral);--pr-hover-fg:#111}
.footer-socials a .pointer-reveal-content svg{width:18px;height:18px;fill:currentColor}
.footer-socials a.is-pr-active{border-color:var(--vs-coral)}

.footer-newsletter-zone{
  padding:0;
  border:0;
  max-width:820px;
  justify-self:end;
  width:100%;
}
.footer-label{
  margin:0 0 20px;
  font-size:12px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:rgba(245,241,236,.45);
}
.footer-newsletter-copy{
  margin:0 0 clamp(30px,2.7vw,40px);
  max-width:20ch;
  color:rgba(245,241,236,.96);
  font-size:clamp(34px,2.45vw,43px);
  line-height:1.14;
  letter-spacing:-.032em;
  font-weight:400;
}
.footer-newsletter-form{
  width:100%;
  min-height:64px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border:1px solid rgba(245,241,236,.22);
  border-radius:999px;
  background:rgba(255,255,255,.015);
  transition:border-color .28s ease,background .28s ease;
}
.footer-newsletter-form:focus-within{
  border-color:rgba(239,115,95,.72);
  background:rgba(255,255,255,.028);
}
.footer-newsletter-form input{
  flex:1 1 auto;
  width:auto;
  min-width:0;
  height:50px;
  padding:0 18px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--vs-cream);
  font:400 17px/1.2 "Zen Kaku Gothic New",Arial,sans-serif;
}
.footer-newsletter-form input::placeholder{color:rgba(245,241,236,.38)}
.footer-newsletter-form button{
  flex:0 0 auto;
  min-width:164px;
  height:52px;
  padding:0 24px;
  border:0;
  border-radius:999px;
  background:var(--vs-coral);
  color:#111;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:background .28s ease,color .28s ease,transform .28s ease;
}
.footer-newsletter-form button{--pr-hover-bg:var(--vs-cream);--pr-hover-fg:#111}
.footer-newsletter-form button .pointer-reveal-content{font-size:14px;font-weight:500}

.footer-secondary{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);
  gap:clamp(64px,7vw,122px);
  padding:clamp(48px,4vw,66px) 0 clamp(52px,4.4vw,72px);
  border-top:1px solid rgba(245,241,236,.14);
}
.footer-nav-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px clamp(38px,4vw,72px);
  max-width:720px;
}
.footer-nav-list a{
  position:relative;
  width:max-content;
  max-width:100%;
  color:rgba(245,241,236,.94);
  font-size:clamp(24px,1.85vw,31px);
  line-height:1.24;
  letter-spacing:-.027em;
  transition:color .24s ease;
}
.footer-nav-list a::after,
.footer-contact-list a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:-4px;
  height:1px;background:var(--vs-coral);
  transition:right .34s cubic-bezier(.16,1,.3,1);
}
.footer-nav-list a:hover,.footer-nav-list a:focus-visible{color:var(--vs-coral)}
.footer-nav-list a:hover::after,.footer-nav-list a:focus-visible::after,
.footer-contact-list a:hover::after,.footer-contact-list a:focus-visible::after{right:0}
.footer-contact-list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.footer-contact-list a{
  position:relative;
  color:rgba(245,241,236,.96);
  font-size:clamp(20px,1.45vw,25px);
  line-height:1.25;
  letter-spacing:-.022em;
}
.footer-contact-list p{
  margin:16px 0 0;
  color:rgba(245,241,236,.5);
  font-size:15px;
  line-height:1.5;
}
.footer-legal{
  min-height:70px;
  border-top:1px solid rgba(245,241,236,.14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:rgba(245,241,236,.42);
  font-size:12px;
}
.footer-legal a{transition:color .24s ease}
.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--vs-cream)}
.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}

@media (min-width:901px) and (max-width:1199px){
  .footer-main{
    grid-template-columns:minmax(0,.82fr) minmax(430px,1.18fr);
    gap:52px;
    padding:66px 0 70px;
  }
  .footer-brand{width:180px;margin-bottom:34px}
  .footer-statement{font-size:clamp(48px,4.7vw,58px);max-width:13ch;line-height:1.08}
  .footer-brand-actions{margin-top:28px}
  .footer-newsletter-copy{font-size:34px;max-width:20ch;margin-bottom:28px}
  .footer-newsletter-form{min-height:60px}
  .footer-newsletter-form input{height:46px;font-size:16px}
  .footer-newsletter-form button{height:48px;min-width:148px}
  .footer-secondary{grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:50px;padding:46px 0 54px}
  .footer-nav-list{gap:8px 38px}
  .footer-nav-list a{font-size:24px}
}

@media (max-width:900px){
  .vs-footer{padding:0 18px}
  .footer-main{
    grid-template-columns:1fr;
    gap:46px;
    padding:54px 0 58px;
  }
  .footer-brand{width:170px;margin-bottom:32px}
  .footer-statement{font-size:clamp(48px,8vw,60px);max-width:12ch;line-height:1.08}
  .footer-brand-actions{margin-top:28px}
  .footer-newsletter-zone{
    justify-self:stretch;
    max-width:none;
    padding-top:40px;
    border-top:1px solid rgba(245,241,236,.14);
  }
  .footer-newsletter-copy{font-size:32px;max-width:20ch;margin-bottom:28px}
  .footer-newsletter-form{min-height:58px}
  .footer-newsletter-form input{height:44px;font-size:16px;padding-left:16px}
  .footer-newsletter-form button{height:46px;min-width:142px;padding:0 20px}
  .footer-secondary{grid-template-columns:1fr 1fr;gap:44px 34px;padding:44px 0 50px}
  .footer-nav-list{grid-template-columns:1fr;gap:7px}
  .footer-nav-list a{font-size:23px}
  .footer-contact-list a{font-size:21px}
}

@media (max-width:560px){
  .footer-main{gap:38px;padding:44px 0 48px}
  .footer-brand{width:154px;margin-bottom:28px}
  .footer-statement{font-size:clamp(43px,11.5vw,52px);line-height:1.08;max-width:11.5ch}
  .footer-brand-actions{margin-top:24px}
  .footer-socials{gap:8px}
  .footer-socials a{width:43px;height:43px}
  .footer-socials svg{width:16px;height:16px}
  .footer-newsletter-zone{padding-top:34px}
  .footer-label{margin-bottom:16px}
  .footer-newsletter-copy{font-size:28px;line-height:1.16;max-width:19ch;margin-bottom:24px}
  .footer-newsletter-form{
    min-height:54px;
    gap:6px;
    padding:5px;
  }
  .footer-newsletter-form input{
    height:42px;
    min-width:0;
    padding:0 12px;
    font-size:14px;
  }
  .footer-newsletter-form button{
    min-width:120px;
    height:44px;
    padding:0 14px;
    font-size:13px;
  }
  .footer-secondary{grid-template-columns:1fr;gap:36px;padding:38px 0 42px}
  .footer-nav-list{grid-template-columns:1fr;gap:6px}
  .footer-nav-list a{font-size:22px}
  .footer-contact-list a{font-size:20px}
  .footer-contact-list p{font-size:14px;margin-top:12px}
  .footer-legal{min-height:0;padding:18px 0;flex-direction:column;align-items:flex-start;gap:7px}
}

@media (prefers-reduced-motion:reduce){
  .footer-socials a,.footer-nav-list a,.footer-nav-list a::after,.footer-contact-list a::after,.footer-newsletter-form,.footer-newsletter-form button,.footer-legal a{transition:none!important}
}

/* V6.76 pointer reveal integration */
@media (hover:none),(pointer:coarse){.pointer-reveal-layer{display:none!important}}
@media (prefers-reduced-motion:reduce){.pointer-reveal-layer{will-change:auto}.pointer-reveal,.pointer-reveal *{transition-duration:.01ms!important}}


/* ==========================================================================
   V6.80 — MOBILE OPENING-SEQUENCE PASS
   Fix the actual phone/portrait-tablet composition without flattening the
   recovered CrearX choreography. Desktop and laptop geometry remain frozen.
   ========================================================================== */
@media (max-width:900px){
  /* Hero: keep all three headline lines readable before the media begins. */
  .hero-headline{
    padding:24px!important;
  }
  .hero-headline h1{
    max-width:100%!important;
    font-size:clamp(44px,8vw,60px)!important;
    line-height:.96!important;
    letter-spacing:-.045em!important;
  }
  #hlLine2{margin-top:.018em}
  .hero-bottom{
    top:auto!important;
    bottom:20px!important;
    padding:0 24px!important;
    gap:13px!important;
  }
  .hero-para{
    max-width:min(31ch,calc(100vw - 48px))!important;
    font-size:14px!important;
    line-height:1.5!important;
    text-wrap:pretty;
  }
  .hero-btns{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    align-self:flex-start!important;
  }
  .hero-job{
    width:auto!important;
    min-width:142px!important;
    --h:44px;
    padding-inline:34px!important;
    flex:none!important;
  }
  .hero-job .pointer-reveal-content{padding-inline:34px}

  /* Carousel faces: smaller geometry comes from cinematic.js; type now earns
     the available card width instead of overflowing long Swedish labels. */
  .orbit-copy{padding:20px!important}
  .orbit-copy h3{
    max-width:100%!important;
    font-size:clamp(24px,5.4vw,34px)!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
    text-wrap:balance;
  }
  .orbit-copy p{
    max-width:32ch!important;
    margin-top:10px!important;
    font-size:12.5px!important;
    line-height:1.45!important;
  }
  .card1-copy{padding:20px!important}
  .card1-copy h3{
    max-width:100%!important;
    font-size:clamp(25px,5.8vw,34px)!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
    text-wrap:balance!important;
  }
  .card1-copy p{
    max-width:31ch!important;
    margin-top:10px!important;
    font-size:12.5px!important;
    line-height:1.45!important;
  }
  .sphere-face-inner{padding:20px!important}
  .sphere-face h3{
    max-width:100%!important;
    font-size:clamp(24px,5.25vw,32px)!important;
    line-height:1.02!important;
    letter-spacing:-.032em!important;
    overflow-wrap:normal;
    word-break:normal;
  }
  .sphere-face-copy{
    max-width:32ch!important;
    margin-top:10px!important;
    font-size:12.5px!important;
    line-height:1.45!important;
  }

  /* Particle/editorial chapter: preserve the split composition, but constrain
     both lines to the real mobile measure and keep them clear of the logo/body. */
  .sphere-h-top{
    left:20px!important;
    right:20px!important;
    top:76px!important;
    width:auto!important;
    max-width:none!important;
    font-size:clamp(44px,10vw,60px)!important;
    line-height:.96!important;
    letter-spacing:-.045em!important;
  }
  .sphere-h-bottom{
    left:20px!important;
    right:20px!important;
    bottom:28svh!important;
    width:auto!important;
    max-width:none!important;
    align-items:flex-end!important;
    text-align:right!important;
    font-size:clamp(44px,10.5vw,62px)!important;
    line-height:.92!important;
    letter-spacing:-.045em!important;
  }
  .sphere-h-bottom>span{white-space:nowrap}
}

@media (max-width:560px){
  /* Hejsan: keep the approved left alignment, just give the copy a real
     breathing gutter instead of letting it visually hug one side. */
  .career-close{padding-left:26px!important;padding-right:26px!important}
  .career-close-copy{width:min(100%,500px)!important}
  .career-close-body{max-width:34ch!important}
}


/* ==========================================================================
   V6.81 — FINISHED MOBILE OPENING RECOMPOSITION
   The phone/portrait-tablet sequence is authored as its own spatial mode.
   Desktop/laptop geometry remains on the recovered vmin choreography.
   ========================================================================== */
@media (max-width:900px){
  /* Real mobile card geometry is now written as bounded px values by cinematic.js.
     CSS only owns the visual treatment and readable text measure. */
  .side-card,.card4,.card1-copy-face{border-radius:22px!important}
  .orbit-media,.sphere-face{border-radius:22px!important}
  .orbit-copy,.card1-copy,.sphere-face-inner{padding:18px!important}
  .orbit-copy h3,.card1-copy h3,.sphere-face h3{
    font-size:clamp(23px,5.7vw,34px)!important;
    line-height:1!important;
    letter-spacing:-.034em!important;
  }
  .orbit-copy p,.card1-copy p,.sphere-face-copy{
    max-width:31ch!important;
    margin-top:9px!important;
    font-size:12.5px!important;
    line-height:1.43!important;
  }
  .sphere-face-inner{justify-content:flex-end}
  .sphere-face h3{margin-top:0!important}

  /* Particle chapter becomes a viewport-owned layer in the mobile mode.
     It no longer inherits the card/carousel transform containing block. */
  html.particle-viewport-owned .black-screen{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:100vw!important;
    height:100svh!important;
    z-index:8!important;
    pointer-events:none!important;
    transform-origin:50% 50%!important;
  }
  html.particle-viewport-owned .sphere-scene{
    width:100vw!important;
    height:100svh!important;
  }
  .sphere-brand{width:86px!important;height:86px!important}
  .sphere-brand .sphere-symbol{width:72px!important;height:72px!important}

  /* The headline letters are still animated, but media placement is measured
     from untransformed layout offsets in JS. */
  .hero-headline{padding:20px 22px!important}
  .hero-headline h1{
    font-size:clamp(40px,8vw,56px)!important;
    line-height:.96!important;
    letter-spacing:-.045em!important;
  }
  .hero-bottom{
    left:0!important;
    right:0!important;
    bottom:18px!important;
    padding:0 22px!important;
    gap:11px!important;
  }
  .hero-para{
    max-width:min(33ch,calc(100vw - 44px))!important;
    font-size:13.5px!important;
    line-height:1.46!important;
  }
  .hero-job{--h:42px;min-width:138px!important;padding-inline:31px!important}
  .hero-job .pointer-reveal-content{padding-inline:31px!important}
  .hero-slider{border-radius:18px!important}

  /* Editorial particle copy owns the viewport rather than the projected card. */
  .sphere-h-top{
    left:20px!important;right:20px!important;top:72px!important;
    max-width:none!important;font-size:clamp(42px,9.2vw,58px)!important;
    line-height:.96!important;letter-spacing:-.044em!important;
  }
  .sphere-h-bottom{
    left:20px!important;right:20px!important;bottom:29svh!important;
    max-width:none!important;align-items:flex-end!important;text-align:right!important;
    font-size:clamp(42px,9.8vw,60px)!important;line-height:.92!important;
    letter-spacing:-.045em!important;
  }
  .sphere-h-bottom>span{white-space:nowrap}
  .sphere-body{left:20px!important;right:20px!important;bottom:18px!important;font-size:13px!important;line-height:1.45!important}
  .sphere-body>p{max-width:36ch}
  .sphere-metrics{gap:10px 18px!important}
}

@media (max-width:560px){
  .career-close{padding-left:30px!important;padding-right:30px!important}
  .career-close-copy{width:100%!important;max-width:520px!important}
  .career-close-body{max-width:36ch!important}
}

@media (max-width:360px), (max-width:560px) and (max-height:640px){
  .hero-headline{padding:16px 18px!important}
  .hero-headline h1{font-size:36px!important;line-height:.95!important}
  .hero-bottom{bottom:12px!important;padding:0 18px!important;gap:8px!important}
  .hero-para{max-width:34ch!important;font-size:12px!important;line-height:1.38!important}
  .hero-job{--h:38px;min-width:126px!important;padding-inline:26px!important;font-size:14px!important}
  .hero-job .pointer-reveal-content{padding-inline:26px!important}
  .sphere-h-top{top:62px!important;font-size:38px!important}
  .sphere-h-bottom{bottom:31svh!important;font-size:34px!important;line-height:.9!important}
  .sphere-body{font-size:10.8px!important;line-height:1.32!important;bottom:10px!important;gap:10px!important}
  .sphere-body>p{max-width:38ch!important}
  .sphere-metrics{gap:6px 16px!important}
  .sphere-metrics b{font-size:20px!important}
  .sphere-metrics small{font-size:9px!important;margin-top:3px!important}
}

/* ==========================================================================
   V6.82 — MOBILE OPENING PRODUCTION FIX
   One left rail, readable card measure, true card-cover tower media,
   invariant VIASALES portal seed, and resize-safe opening lifecycle.
   ========================================================================== */
@media (max-width:900px){
  /* One mobile rail: headline, media, body and CTA all begin on the same x. */
  .hero-headline{padding-left:22px!important;padding-right:22px!important}
  .hero-bottom{padding-left:22px!important;padding-right:22px!important;align-items:flex-start!important;text-align:left!important}
  .hero-para{width:100%!important;max-width:none!important;text-wrap:pretty!important;text-align:left!important}
  .hero-btns{align-items:flex-start!important;justify-content:flex-start!important}
  .hero-slider{margin:0!important}

  /* The final tower surface is the card surface. No transparent source-canvas slack,
     no undersized vmin media box, no letterboxing inside the first card. */
  .hero-tower-scene{transform:rotate(-90deg) scale(1.01)!important;transform-origin:50% 50%!important}
  .hero-tower-crop{
    left:50%!important;top:50%!important;bottom:auto!important;
    width:var(--sr-card-w)!important;height:var(--sr-card-h)!important;
    aspect-ratio:auto!important;transform:translate(-50%,-50%)!important;
    overflow:hidden!important;
  }
  .hero-tower-asset{
    position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;max-width:none!important;
    object-fit:cover!important;object-position:50% 100%!important;
  }

  /* Use the width the card actually has. Swedish copy must not be forced into a 31ch column. */
  .orbit-copy,.card1-copy,.sphere-face-inner{
    padding:20px!important;
    text-align:left!important;
    align-items:flex-start!important;
  }
  .orbit-copy h3,.card1-copy h3,.sphere-face h3{
    width:100%!important;max-width:none!important;
    font-size:clamp(24px,6.2vw,34px)!important;
    line-height:1.02!important;letter-spacing:-.03em!important;
    text-align:left!important;text-wrap:wrap!important;
    overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;
  }
  .orbit-copy p,.card1-copy p,.sphere-face-copy{
    width:100%!important;max-width:none!important;
    margin-top:11px!important;font-size:13.5px!important;line-height:1.48!important;
    letter-spacing:-.005em!important;text-align:left!important;text-wrap:pretty!important;
  }
  .orbit-media>img,.orbit-media>video{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  .sphere-face-inner{justify-content:flex-end!important}

  /* Same VIASALES seed on phone, tablet and desktop: 54px symbol = 27px starting radius. */
  .sphere-brand{width:68px!important;height:68px!important}
  .sphere-brand .sphere-symbol{width:54px!important;height:54px!important;max-width:54px!important;max-height:54px!important}

  /* The entire particle/editorial chapter uses the same left rail on mobile. */
  .sphere-h-top{
    left:22px!important;right:22px!important;top:72px!important;width:auto!important;max-width:none!important;
    text-align:left!important;align-items:flex-start!important;
  }
  .sphere-h-bottom{
    left:22px!important;right:22px!important;bottom:28svh!important;width:auto!important;max-width:none!important;
    align-items:flex-start!important;text-align:left!important;
  }
  .sphere-body{left:22px!important;right:22px!important;max-width:none!important;text-align:left!important}
  .sphere-body>p{width:100%!important;max-width:none!important;text-wrap:pretty!important}
}

@media (max-width:560px){
  .career-close{padding-left:30px!important;padding-right:30px!important}
  .career-close-copy{width:100%!important;max-width:none!important;text-align:left!important}
  .career-close-body{width:100%!important;max-width:none!important;text-align:left!important;text-wrap:pretty!important}
}

@media (max-width:360px), (max-width:560px) and (max-height:640px){
  .hero-headline{padding-left:18px!important;padding-right:18px!important}
  .hero-bottom{padding-left:18px!important;padding-right:18px!important}
  .sphere-h-top,.sphere-h-bottom,.sphere-body{left:18px!important;right:18px!important}
  .orbit-copy,.card1-copy,.sphere-face-inner{padding:18px!important}
  .orbit-copy p,.card1-copy p,.sphere-face-copy{font-size:12.5px!important;line-height:1.44!important}
}

/* V6.83 — detached mobile particle stage obeys the original card4 exit envelope during the portfolio handoff. */

/* V6.84 — mobile card4 face exits before the detached particle viewport crossfades into portfolio, preventing underlying face bleed. */

/* ==========================================================================
   V6.85 — MOBILE PROPORTION + TRUE 3D PORTAL HANDOFF
   Wider opening type/media, slimmer spatial cards, and card-local portal
   ownership until the Karriärmöjligheter face is actually front-facing.
   ========================================================================== */
@media (max-width:900px){
  .hero-headline h1{
    width:100%!important;
    max-width:none!important;
    font-size:clamp(42px,10vw,76px)!important;
    line-height:.94!important;
    letter-spacing:-.048em!important;
  }
  .card4,.sphere-slot{transform-style:preserve-3d!important}
  .sphere-face,.black-screen{-webkit-backface-visibility:hidden;backface-visibility:hidden}
  .side-card,.card4,.card1-copy-face{border-radius:20px!important}
  .orbit-media,.sphere-face{border-radius:20px!important}
}
@media (max-width:360px), (max-width:560px) and (max-height:640px){
  .hero-headline h1{font-size:38px!important;line-height:.94!important}
}

/* ==========================================================================
   V6.87 — MOBILE PARTICLE HEADING LEADING POLISH
   Give the stacked "potential med" / "VIASALES" lines a little more vertical
   separation without changing size, width, tracking, alignment, or animation.
   ========================================================================== */
@media (max-width:900px){
  .sphere-h-bottom{line-height:.99!important}
}
@media (max-width:360px), (max-width:560px) and (max-height:640px){
  .sphere-h-bottom{line-height:.98!important}
}