/* Code-built hero identity: six CSS planes assemble into the Nos mark. */
.concept-b .scene--brand .brand-stage__logo{opacity:0;background-image:none;pointer-events:none}
.concept-b .scene--brand .logo-assembly{display:block;left:2vw;right:auto;top:13vh;width:min(39vw,560px);height:auto;aspect-ratio:1;perspective:1400px;isolation:isolate;filter:drop-shadow(24px 30px 28px rgba(22,33,58,.2))}
.concept-b .scene--brand .logo-assembly:before{content:"";position:absolute;inset:7%;border:1px solid rgba(22,33,58,.13);border-radius:50%;box-shadow:0 0 0 4.5vw rgba(22,33,58,.025),0 0 0 9vw rgba(22,33,58,.018);transform:scale(.86);opacity:0;animation:identity-orbit 1.4s 1.1s cubic-bezier(.16,1,.3,1) forwards}
.concept-b .scene--brand .logo-assembly:after{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(22,33,58,.24),transparent);box-shadow:0 -16vw rgba(22,33,58,.07),0 16vw rgba(22,33,58,.07);opacity:0;animation:identity-grid .9s 1.25s ease-out forwards}
.concept-b .scene--brand .assembly-piece{display:block;inset:0;background:none!important;transform-origin:center;backface-visibility:hidden}
.concept-b .scene--brand .assembly-piece--left{--ax:-34vw;--ay:18vh;--ar:-22deg;clip-path:polygon(15% 22%,31% 12%,31% 75%,15% 88%);background-image:linear-gradient(112deg,#020a14 0%,#10233a 42%,#35445a 72%,#071524 100%)!important}
.concept-b .scene--brand .assembly-piece--top{--ax:-10vw;--ay:-46vh;--ar:16deg;clip-path:polygon(15% 22%,31% 12%,70% 41%,70% 58%,31% 29%);background-image:linear-gradient(142deg,#758294 0%,#36465a 35%,#0b1828 78%,#020914 100%)!important}
.concept-b .scene--brand .assembly-piece--right{--ax:38vw;--ay:-13vh;--ar:19deg;clip-path:polygon(67% 37%,83% 49%,83% 84%,67% 97%);background-image:linear-gradient(105deg,#34475e 0%,#14283f 42%,#061321 78%,#010812 100%)!important}
.concept-b .scene--brand .assembly-piece--bridge{--ax:24vw;--ay:43vh;--ar:-17deg;clip-path:polygon(31% 53%,31% 70%,67% 97%,83% 84%);background-image:linear-gradient(140deg,#31445b 0%,#13263c 42%,#020a14 82%)!important}
.concept-b .scene--brand .assembly-piece--accent-a{--ax:32vw;--ay:-38vh;--ar:28deg;clip-path:polygon(59% 13%,83% 13%,83% 38%);background-image:linear-gradient(135deg,#00a8ff 0%,#0665ff 55%,#0634df 100%)!important}
.concept-b .scene--brand .assembly-piece--accent-b{--ax:47vw;--ay:4vh;--ar:-26deg;clip-path:polygon(59% 13%,75% 21%,83% 38%);background-image:linear-gradient(145deg,#123bd8 0%,#0b51ec 52%,#07289d 100%)!important}
.concept-b .scene--brand .logo-vector{display:block;width:100%;height:100%;overflow:visible}
.concept-b .scene--brand .logo-plane{opacity:0;transform-box:fill-box;transform-origin:center;will-change:transform,opacity,filter;backface-visibility:hidden}
.concept-b .scene--brand .logo-plane--left{--ax:-280px;--ay:150px;--ar:-18deg}
.concept-b .scene--brand .logo-plane--top{--ax:-90px;--ay:-330px;--ar:13deg}
.concept-b .scene--brand .logo-plane--right{--ax:310px;--ay:-120px;--ar:17deg}
.concept-b .scene--brand .logo-plane--bridge{--ax:230px;--ay:300px;--ar:-14deg}
.concept-b .scene--brand .logo-plane--accent{--ax:260px;--ay:-280px;--ar:24deg}
.concept-b .scene--brand.is-active .assembly-piece,.concept-b .scene--brand.is-active .assembly-flare,.concept-b .scene--brand.is-active .type-rail span{animation:none}
.concept-b .scene--brand.is-active .logo-plane{animation:none}
.brand-loader.is-done~main .concept-b .scene--brand.is-active .assembly-piece{animation:assemble-logo 1.35s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.1s + var(--i)*.11s)}
.brand-loader.is-done~main .concept-b .scene--brand.is-active .logo-plane{animation:assemble-vector 1.42s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.08s + var(--i)*.12s)}
.brand-loader.is-done~main .concept-b .scene--brand.is-active .assembly-flare{animation:flare-pass 1.9s .52s ease-out forwards}
.brand-loader.is-done~main .concept-b .scene--brand.is-active .type-rail span{animation:rail-in .65s calc(1.1s + var(--ri)*.08s) forwards}
.concept-b .scene--brand .wordmark-line,.concept-b .scene--brand .wordmark-tagline,.concept-b .scene--brand .wordmark-statement,.concept-b .scene--brand .wordmark-statement:after{animation-play-state:paused}
.brand-loader.is-done~main .concept-b .scene--brand .wordmark-line,.brand-loader.is-done~main .concept-b .scene--brand .wordmark-tagline,.brand-loader.is-done~main .concept-b .scene--brand .wordmark-statement,.brand-loader.is-done~main .concept-b .scene--brand .wordmark-statement:after{animation-play-state:running}
@keyframes identity-orbit{to{opacity:.32;transform:scale(1)}}
@keyframes identity-grid{50%{opacity:.42}to{opacity:.1}}
@keyframes assemble-vector{0%{opacity:0;transform:translate3d(var(--ax),var(--ay),220px) rotate(var(--ar)) scale(.74);filter:blur(8px)}65%{opacity:1;filter:blur(0)}84%{transform:translate3d(0,0,0) rotate(0) scale(1.014)}100%{opacity:1;transform:none;filter:none}}
@media(max-width:800px){.concept-b .scene--brand .brand-stage__logo{opacity:0;background-image:none}.concept-b .scene--brand .logo-assembly{display:block;left:50%;right:auto;top:7vh;width:min(72vw,330px);height:auto;transform:translateX(-50%)}.concept-b .scene--brand .assembly-piece{display:block}.concept-b .scene--brand .wordmark-build{top:43vh}.concept-b .scene--brand .logo-assembly:before{box-shadow:0 0 0 10vw rgba(22,33,58,.025),0 0 0 20vw rgba(22,33,58,.018)}.concept-b .scene--brand .assembly-flare{left:67%;top:18%}}
@media(max-width:800px) and (max-height:700px){.concept-b .scene--brand .logo-assembly{top:5vh;width:min(62vw,270px)}.concept-b .scene--brand .wordmark-build{top:39vh}}
@media(prefers-reduced-motion:reduce){.concept-b .scene--brand .assembly-piece,.concept-b .scene--brand .logo-plane{opacity:1;transform:none;filter:none;animation:none!important}.concept-b .scene--brand .logo-assembly:before,.concept-b .scene--brand .logo-assembly:after{opacity:1;transform:none;animation:none}.concept-b .scene--brand .wordmark-line,.concept-b .scene--brand .wordmark-tagline,.concept-b .scene--brand .wordmark-statement,.concept-b .scene--brand .wordmark-statement:after{animation-play-state:running}}

/* =========================================================
   SERVICE SCENES / ART DIRECTION V2
   Three distinct, legible systems instead of a shared particle treatment.
   ========================================================= */
.concept-b .scene--service{--paper:#f8f8f5;background:var(--paper)!important}
.concept-b .scene--service:before{inset:0;transform:none;opacity:1;transition:opacity .8s ease;background-size:auto}
.concept-b .scene--web:before{background:linear-gradient(90deg,rgba(23,105,255,.045) 1px,transparent 1px),linear-gradient(rgba(23,105,255,.045) 1px,transparent 1px),radial-gradient(circle at 74% 48%,rgba(23,105,255,.13),transparent 27%);background-size:44px 44px,44px 44px,auto}
.concept-b .scene--tools:before{background:repeating-linear-gradient(135deg,transparent 0 38px,rgba(24,169,87,.055) 39px 40px),linear-gradient(90deg,transparent 0 48%,rgba(24,169,87,.08) 48% 48.2%,transparent 48.2%);}
.concept-b .scene--system:before{background:repeating-radial-gradient(circle at 74% 48%,transparent 0 58px,rgba(255,106,26,.09) 59px 60px),linear-gradient(115deg,transparent 0 62%,rgba(255,106,26,.08) 62% 62.2%,transparent 62.2%)}
.concept-b .scene--web:after{clip-path:polygon(34% 0,100% 0,100% 100%,0 100%)}
.concept-b .scene--tools:after{clip-path:polygon(12% 0,100% 0,88% 100%,0 90%)}
.concept-b .scene--system:after{clip-path:polygon(28% 0,100% 0,100% 86%,5% 100%)}
.concept-b .scene--service .scene__num{display:flex;align-items:center;gap:13px}
.concept-b .scene--service .scene__num:before{content:"";width:42px;border-top:2px solid currentColor}
.concept-b .scene--service .enter{position:relative;overflow:hidden;box-shadow:8px 9px 0 #16213a;transition:transform .25s,box-shadow .25s,background .25s}
.concept-b .scene--service .enter:hover{transform:translate(4px,4px)!important;box-shadow:4px 5px 0 #16213a}
.concept-b .scene--service .enter b{font-size:20px}
.experience-cursor{display:none!important}

.concept-b .symbol-stage{position:relative;isolation:isolate;overflow:visible}
.concept-b .symbol-stage:before{position:absolute;z-index:4;left:5%;top:9%;padding:9px 12px;border:1px solid rgba(255,255,255,.65);color:#fff;background:rgba(22,33,58,.13);backdrop-filter:blur(10px);font:700 8px/1 "Space Grotesk",sans-serif;letter-spacing:.2em}
.concept-b .scene--web .symbol-stage:before{content:"RESPONSIVE / LIVE"}
.concept-b .scene--tools .symbol-stage:before{content:"INPUT / AUTOMATE / OUTPUT"}
.concept-b .scene--system .symbol-stage:before{content:"USER / CORE / API"}
.concept-b .symbol-stage:after{position:absolute;z-index:-1;right:-2%;bottom:-9%;color:rgba(255,255,255,.12);font:700 clamp(180px,24vw,390px)/.7 "Space Grotesk",sans-serif;letter-spacing:-.1em}
.concept-b .scene--web .symbol-stage:after{content:"01"}
.concept-b .scene--tools .symbol-stage:after{content:"02"}
.concept-b .scene--system .symbol-stage:after{content:"03"}
.concept-b .symbol-stage>p{right:3%;bottom:4%;padding:9px 12px;border:1px solid rgba(255,255,255,.5);background:rgba(22,33,58,.12);backdrop-filter:blur(8px)}
.concept-b .symbol{width:min(35vw,520px);filter:drop-shadow(0 30px 45px rgba(0,0,0,.16))}

/* WEB — desktop browser, mobile viewport and content card. */
.concept-b .symbol--web{aspect-ratio:1.2}
.concept-b .symbol--web i{animation:none!important;border-radius:0!important;box-sizing:border-box}
.concept-b .symbol--web i:nth-child(1){inset:7% 5% 13% 4%;border:2px solid rgba(255,255,255,.9);background:linear-gradient(180deg,rgba(255,255,255,.18) 0 13%,rgba(255,255,255,.06) 13%);box-shadow:inset 0 0 0 1px rgba(22,33,58,.12),14px 18px 0 rgba(22,33,58,.18)}
.concept-b .symbol--web i:nth-child(1):before{content:"NOS / DESKTOP";position:absolute;left:5%;top:5%;font:700 7px/1 "Space Grotesk",sans-serif;letter-spacing:.18em}
.concept-b .symbol--web i:nth-child(1):after{content:"";position:absolute;left:7%;right:7%;top:23%;bottom:10%;background:linear-gradient(90deg,rgba(255,255,255,.92) 0 37%,transparent 37% 41%,rgba(255,255,255,.32) 41% 100%),linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:auto,100% 22%;clip-path:polygon(0 0,100% 0,100% 84%,56% 84%,56% 100%,0 100%)}
.concept-b .symbol--web i:nth-child(2){inset:auto 0 2% auto;width:25%;height:57%;border:2px solid #fff;background:rgba(22,33,58,.2);border-radius:18px!important;box-shadow:0 18px 28px rgba(22,33,58,.2)}
.concept-b .symbol--web i:nth-child(2):before{content:"MOBILE";position:absolute;left:50%;top:6%;translate:-50% 0;font:700 6px/1 "Space Grotesk",sans-serif;letter-spacing:.12em}
.concept-b .symbol--web i:nth-child(2):after{content:"";position:absolute;inset:17% 10% 10%;background:linear-gradient(#fff 0 31%,rgba(255,255,255,.28) 31% 39%,transparent 39% 47%,rgba(255,255,255,.22) 47% 69%,transparent 69% 77%,rgba(255,255,255,.8) 77%)}
.concept-b .symbol--web i:nth-child(3){inset:auto auto 1% -2%;width:40%;height:24%;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.93);color:#1769ff;box-shadow:10px 12px 0 rgba(22,33,58,.14)}
.concept-b .symbol--web i:nth-child(3):before{content:"CTA FLOW";position:absolute;left:10%;top:17%;font:700 7px/1 "Space Grotesk",sans-serif;letter-spacing:.16em}
.concept-b .symbol--web i:nth-child(3):after{content:"VISIT  →  CONTACT";position:absolute;left:10%;bottom:19%;font:700 10px/1 "Space Grotesk",sans-serif;letter-spacing:.04em}
.concept-b .symbol--web span{left:55%;top:40%;width:16px;height:16px;border:2px solid #fff;border-radius:50%;background:#1769ff;box-shadow:0 0 0 12px rgba(255,255,255,.16),0 0 0 25px rgba(255,255,255,.06);animation:focus-pulse 2.4s ease-in-out infinite}

/* TOOLS — four field inputs converging into an automation core. */
.concept-b .symbol--tools{aspect-ratio:1.15}
.concept-b .symbol--tools:before,.concept-b .symbol--tools:after{left:10%;right:10%;top:50%;height:1px;background:rgba(255,255,255,.72)}
.concept-b .symbol--tools:before{rotate:31deg}.concept-b .symbol--tools:after{rotate:-31deg}
.concept-b .symbol--tools i{width:31%!important;height:18%!important;border:1px solid rgba(255,255,255,.76)!important;border-radius:2px!important;background:rgba(255,255,255,.13)!important;box-shadow:8px 10px 0 rgba(22,33,58,.12);backdrop-filter:blur(8px);display:grid;place-items:center}
.concept-b .symbol--tools i:after{color:#fff;font:700 9px/1 "Space Grotesk",sans-serif;letter-spacing:.14em}
.concept-b .symbol--tools i:nth-child(1){left:2%;top:10%}.concept-b .symbol--tools i:nth-child(1):after{content:"SALES"}
.concept-b .symbol--tools i:nth-child(2){right:2%;top:10%}.concept-b .symbol--tools i:nth-child(2):after{content:"RESERVE"}
.concept-b .symbol--tools i:nth-child(3){right:2%;bottom:10%}.concept-b .symbol--tools i:nth-child(3):after{content:"REPORT"}
.concept-b .symbol--tools i:nth-child(4){left:2%;bottom:10%}.concept-b .symbol--tools i:nth-child(4):after{content:"STAFF"}
.concept-b .symbol--tools span{inset:31%!important;border:2px solid #fff!important;border-radius:8px!important;background:#fff!important;box-shadow:0 0 0 13px rgba(255,255,255,.13),15px 18px 0 rgba(22,33,58,.14);animation:tools-core 3s ease-in-out infinite!important}
.concept-b .symbol--tools span:before{content:"AUTO";position:absolute;inset:0;display:grid;place-items:center;color:#18a957;font:800 clamp(20px,3.3vw,50px)/1 "Space Grotesk",sans-serif;letter-spacing:-.04em}
.concept-b .symbol--tools span:after{content:"RUNNING"!important;clip-path:none!important;right:10%!important;top:auto!important;bottom:9%!important;width:auto!important;height:auto!important;background:none!important;color:#0b7138;font:700 6px/1 "Space Grotesk",sans-serif;letter-spacing:.18em}

/* SYSTEM — named nodes connected to one stable processing core. */
.concept-b .symbol--system{aspect-ratio:1}
.concept-b .symbol--system:before{inset:12%;border:1px solid rgba(255,255,255,.62);border-radius:50%;animation:system-orbit 18s linear infinite}
.concept-b .symbol--system:after{inset:23%;border:1px solid rgba(255,255,255,.34);rotate:45deg}
.concept-b .symbol--system i{width:18%!important;height:12%!important;border:1px solid rgba(255,255,255,.7);border-radius:2px!important;background:rgba(255,255,255,.15)!important;box-shadow:7px 9px 0 rgba(22,33,58,.12)!important;display:grid;place-items:center;backdrop-filter:blur(8px)}
.concept-b .symbol--system i:after{color:#fff;font:700 7px/1 "Space Grotesk",sans-serif;letter-spacing:.12em}
.concept-b .symbol--system i:nth-child(1){left:41%;top:3%}.concept-b .symbol--system i:nth-child(1):after{content:"USER"}
.concept-b .symbol--system i:nth-child(2){right:1%;top:43%}.concept-b .symbol--system i:nth-child(2):after{content:"API"}
.concept-b .symbol--system i:nth-child(3){left:41%;bottom:3%}.concept-b .symbol--system i:nth-child(3):after{content:"DATA"}
.concept-b .symbol--system i:nth-child(4){left:1%;top:43%}.concept-b .symbol--system i:nth-child(4):after{content:"ADMIN"}
.concept-b .symbol--system i:nth-child(5){right:12%;bottom:14%;width:13%!important;height:9%!important}.concept-b .symbol--system i:nth-child(5):after{content:"CLOUD"}
.concept-b .symbol--system span{inset:34%!important;background:#fff!important;clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%);box-shadow:none;animation:system-core 4s ease-in-out infinite}
.concept-b .symbol--system span:after{content:"CORE"!important;color:#ff6a1a!important;font-size:clamp(16px,3vw,42px)!important;letter-spacing:-.04em}

.home-contact{isolation:isolate;background:#101b34}
.home-contact:after{content:"04";position:absolute;z-index:0;right:-.04em;top:.05em;color:rgba(255,255,255,.045);font:700 min(42vw,620px)/.7 "Space Grotesk",sans-serif;letter-spacing:-.12em}
.home-contact h2,.home-contact__top,.home-contact__bottom{z-index:2}
.home-contact__top{padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.25)}
.home-contact__bottom a{box-shadow:9px 10px 0 #050910}

@keyframes tools-core{50%{transform:scale(.95);box-shadow:0 0 0 22px rgba(255,255,255,.08),15px 18px 0 rgba(22,33,58,.14)}}

@media(max-width:800px){
  .concept-b .scene--service:after{inset:0 0 auto;width:100%;transform:none!important}
  .concept-b .scene--web:after{height:56vh;clip-path:polygon(0 0,100% 0,100% 92%,0 100%)}
  .concept-b .scene--tools:after{height:56vh;clip-path:polygon(0 0,100% 0,100% 98%,0 96%)}
  .concept-b .scene--system:after{height:57vh;clip-path:polygon(0 0,100% 0,100% 96%,0 99%)}
  .concept-b .scene--service .scene__copy{padding-top:1.5vh}
  .concept-b .scene--service h2{font-size:19vw;line-height:.75}
  .concept-b .scene--service .scene__num{font-size:8px}
  .concept-b .symbol-stage{height:40vh;margin:0}
  .concept-b .symbol-stage:before{left:4%;top:6%;font-size:6px;padding:7px 9px}
  .concept-b .symbol-stage:after{right:0;bottom:-1%;font-size:48vw}
  .concept-b .symbol-stage>p{right:2%;bottom:5%;font-size:5px;letter-spacing:.22em;padding:7px 8px}
  .concept-b .symbol{width:min(72vw,350px)}
  .concept-b .symbol--web{width:min(76vw,365px)}
  .concept-b .symbol--tools{width:min(68vw,330px)}
  .concept-b .symbol--system{width:min(66vw,320px)}
  .concept-b .wordmark-line{width:100%;overflow:visible}
  .concept-b .wordmark-nos{font-size:14vw}
  .concept-b .wordmark-tech{font-size:5.9vw}
  .experience-cursor{display:none!important}
  .home-contact:after{font-size:68vw;top:18%}
}

/* CRISP SCENE TRANSITIONS
   Keep every scroll resting point sharp. Scene changes use opacity and motion;
   never blur the complete scene, which softens type and artwork mid-scroll. */
.concept-b .scene,
.concept-b .scene.is-active{
  filter:none!important;
}

@media(prefers-reduced-motion:reduce){
  .concept-b .symbol--web span,.concept-b .symbol--tools span,.concept-b .symbol--system:before,.concept-b .symbol--system span{animation:none!important}
}

/* =========================================================
   SERVICE SCENES / EDITORIAL 3D ILLUSTRATIONS
   Generated glass-and-metal sculptures replace literal UI diagrams while
   preserving the existing typography, colour planes and navigation rhythm.
   ========================================================= */
.concept-b .scene--service .symbol{display:none!important}
.concept-b .scene--service .symbol-stage{
  min-width:0;
  perspective:1200px;
}
.concept-b .scene--service .scene-illustration{
  position:relative;
  z-index:2;
  display:block;
  width:min(34vw,510px);
  height:min(68vh,690px);
  object-fit:cover;
  object-position:center;
  border:1px solid rgba(255,255,255,.5);
  opacity:0;
  transform:translate3d(5%,5%,80px) rotate(2.2deg) scale(.9);
  filter:drop-shadow(19px 25px 22px rgba(10,20,37,.22));
  clip-path:polygon(3% 0,100% 3.8%,96.5% 100%,0 95.5%);
  transition:opacity .72s ease,transform 1.25s cubic-bezier(.16,1,.3,1),filter .7s ease;
  will-change:transform,opacity;
}
.concept-b .scene--tools .scene-illustration{
  transform:translate3d(5%,-3%,80px) rotate(-2deg) scale(.9);
  clip-path:polygon(0 4%,96.5% 0,100% 95.5%,3.5% 100%);
}
.concept-b .scene--system .scene-illustration{
  transform:translate3d(7%,4%,80px) rotate(2.6deg) scale(.9);
  clip-path:polygon(4% 0,100% 5%,96% 100%,0 94%);
}
.concept-b .scene--service.is-active .scene-illustration{
  opacity:1;
  transform:translate3d(0,0,0) rotate(0) scale(1);
}
.concept-b .scene--service.is-active .scene-illustration:hover{
  transform:translate3d(0,-6px,25px) rotate(-.45deg) scale(1.012);
  filter:drop-shadow(22px 32px 28px rgba(10,20,37,.27));
}
.concept-b .scene--service .symbol-stage:before{
  z-index:5;
  box-shadow:8px 8px 0 rgba(22,33,58,.12);
}
.concept-b .scene--service .symbol-stage>p{
  z-index:5;
  color:#fff;
}

@media(max-width:800px){
  .concept-b .scene--service .symbol-stage{
    height:40vh;
    align-self:start;
  }
  .concept-b .scene--service .scene-illustration{
    width:min(74vw,350px);
    height:39vh;
    max-height:390px;
    object-position:center 48%;
    filter:drop-shadow(11px 15px 14px rgba(10,20,37,.2));
  }
  .concept-b .scene--service.is-active .scene-illustration:hover{
    transform:none;
  }
}

@media(max-width:800px) and (max-height:700px){
  .concept-b .scene--service .symbol-stage{height:36vh}
  .concept-b .scene--service .scene-illustration{height:34vh;width:min(66vw,300px)}
}

@media(prefers-reduced-motion:reduce){
  .concept-b .scene--service .scene-illustration{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* Keep desktop scenes pinned to the sticky stage even when the browser UI
   changes the available viewport height between scene transitions. */
@media(min-width:801px){
  .concept-b .scene-stage{
    contain:layout paint;
  }
  .concept-b .scene-stage>.scene{
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    height:100vh;
  }
}

/* =========================================================
   COLOUR MERGE + WEB RUNTIME MOTION
   The generated backdrops inherit each scene colour and dissolve into the
   colour plane. The WEB sculpture is split into independently moving crops.
   ========================================================= */
.concept-b .scene--web{--accent:#0050f8!important;--glow:rgba(0,80,248,.24)!important}
.concept-b .scene--tools{--accent:#03994c!important;--glow:rgba(3,153,76,.24)!important}
.concept-b .scene--system{--accent:#fd5402!important;--glow:rgba(253,84,2,.25)!important}
.concept-b .scene--service .scene-illustration{
  border:0;
  clip-path:none;
  mix-blend-mode:luminosity;
  -webkit-mask-image:radial-gradient(ellipse 76% 76% at 50% 50%,#000 0 62%,rgba(0,0,0,.96) 71%,rgba(0,0,0,.48) 88%,transparent 100%);
  mask-image:radial-gradient(ellipse 76% 76% at 50% 50%,#000 0 62%,rgba(0,0,0,.96) 71%,rgba(0,0,0,.48) 88%,transparent 100%);
}
.concept-b .scene--web .symbol-stage{
  --kinetic-w:min(34vw,510px);
  --kinetic-h:min(68vh,690px);
}
.concept-b .scene--web .web-kinetic{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:var(--kinetic-w);
  height:var(--kinetic-h);
  background:url('illustrations/web-editorial.jpg') center/100% 100% no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity,filter;
}
.concept-b .scene--web .web-kinetic--frame{
  clip-path:polygon(7% 11%,72% 6%,94% 22%,93% 65%,72% 69%,69% 30%,10% 34%);
}
.concept-b .scene--web .web-kinetic--tiles{
  clip-path:polygon(13% 31%,88% 20%,91% 76%,10% 79%);
}
.concept-b .scene--web .web-kinetic--base{
  clip-path:polygon(8% 66%,91% 63%,90% 94%,10% 94%);
}
.concept-b .scene--web.is-active .web-kinetic--frame{
  opacity:.26;
  animation:web-runtime-frame 5.4s cubic-bezier(.45,0,.2,1) infinite alternate;
}
.concept-b .scene--web.is-active .web-kinetic--tiles{
  opacity:.24;
  animation:web-runtime-tiles 4.2s cubic-bezier(.45,0,.2,1) .2s infinite alternate;
}
.concept-b .scene--web.is-active .web-kinetic--base{
  opacity:.2;
  animation:web-runtime-base 3.6s cubic-bezier(.45,0,.2,1) .35s infinite alternate;
}
.concept-b .scene--web .web-runtime-scan{
  position:absolute;
  z-index:4;
  left:50%;
  top:16%;
  width:calc(var(--kinetic-w) * .82);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.82) 34% 66%,transparent);
  box-shadow:0 0 16px 3px rgba(255,255,255,.2);
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
}
.concept-b .scene--web .web-runtime-scan:after{
  content:"LIVE";
  position:absolute;
  right:3%;
  bottom:7px;
  color:#fff;
  font:700 6px/1 "Space Grotesk",sans-serif;
  letter-spacing:.24em;
}
.concept-b .scene--web.is-active .web-runtime-scan{
  animation:web-runtime-scan 4.8s cubic-bezier(.4,0,.2,1) 1s infinite;
}
@keyframes web-runtime-frame{
  from{transform:translate3d(-50%,-50%,22px) rotateX(.3deg);filter:brightness(1)}
  to{transform:translate3d(calc(-50% + 7px),calc(-50% - 9px),48px) rotateX(-.5deg);filter:brightness(1.12)}
}
@keyframes web-runtime-tiles{
  from{transform:translate3d(calc(-50% - 3px),calc(-50% + 5px),34px);filter:brightness(1.04)}
  to{transform:translate3d(calc(-50% + 6px),calc(-50% - 7px),62px);filter:brightness(1.2)}
}
@keyframes web-runtime-base{
  from{transform:translate3d(calc(-50% - 6px),calc(-50% + 2px),18px)}
  to{transform:translate3d(calc(-50% + 5px),calc(-50% - 3px),38px)}
}
@keyframes web-runtime-scan{
  0%{top:17%;opacity:0}
  10%{opacity:.65}
  72%{opacity:.45}
  88%,100%{top:83%;opacity:0}
}

@media(max-width:800px){
  .concept-b .scene--web .symbol-stage{
    --kinetic-w:min(74vw,350px);
    --kinetic-h:min(39vh,390px);
  }
  .concept-b .scene--web.is-active .web-kinetic--frame{opacity:.2}
  .concept-b .scene--web.is-active .web-kinetic--tiles{opacity:.19}
  .concept-b .scene--web.is-active .web-kinetic--base{opacity:.16}
}

@media(prefers-reduced-motion:reduce){
  .concept-b .scene--web .web-kinetic,
  .concept-b .scene--web .web-runtime-scan{
    display:none;
    animation:none!important;
  }
}

/* =========================================================
   FINAL SERVICE-SCENE POLISH
   Remove the oversized duplicate scene numerals and reduce navigation chrome.
   ========================================================= */
.concept-b .scene--service .symbol-stage:after{
  content:none!important;
  display:none!important;
}
.concept-b .scene--service .symbol-stage:before{
  left:7%;
  top:8%;
  padding:8px 11px;
  border-color:rgba(255,255,255,.48);
  background:rgba(10,24,48,.1);
  box-shadow:none;
  backdrop-filter:blur(12px);
}
.concept-b .scene--service .symbol-stage>p{
  right:6%;
  bottom:5%;
  padding:8px 10px;
  border-color:rgba(255,255,255,.38);
  background:rgba(10,24,48,.09);
  box-shadow:none;
}
.concept-b .scene-progress{
  bottom:4.7vh;
  gap:10px;
  padding:8px 0;
  background:transparent;
}
.concept-b .scene-progress button{
  position:relative;
  width:52px;
  height:18px!important;
  min-height:0!important;
  padding:0;
  border:0;
  background:transparent!important;
  overflow:visible;
}
.concept-b .scene-progress button:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:rgba(22,33,58,.28);
  transform:translateY(-50%);
  transition:height .25s,background .25s,transform .25s;
}
.concept-b .scene-progress button:after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(22,33,58,.38);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .25s,background .25s;
}
.concept-b .scene-progress button.is-active{
  background:transparent!important;
}
.concept-b .scene-progress button.is-active:before{
  height:2px;
  background:var(--progress-accent,#1a5cff);
  transform:translateY(-50%) scaleX(1.05);
}
.concept-b .scene-progress button.is-active:after{
  background:var(--progress-accent,#1a5cff);
  transform:translate(-50%,-50%) scale(1);
}
.concept-b .scene-progress button:focus-visible{
  outline:2px solid var(--progress-accent,#1a5cff);
  outline-offset:3px;
}
.concept-b:has(.scene--brand.is-active) .scene-progress{--progress-accent:#1a5cff}
.concept-b:has(.scene--web.is-active) .scene-progress{--progress-accent:#0050f8}
.concept-b:has(.scene--tools.is-active) .scene-progress{--progress-accent:#03994c}
.concept-b:has(.scene--system.is-active) .scene-progress{--progress-accent:#fd5402}

@media(max-width:800px){
  .concept-b .scene--service .symbol-stage:before{
    left:7%;
    top:7%;
    padding:7px 9px;
  }
  .concept-b .scene--service .symbol-stage>p{
    right:6%;
    bottom:6%;
    padding:7px 8px;
  }
}

/* One framing language across all three services. */
.concept-b .scene--web:after,
.concept-b .scene--tools:after,
.concept-b .scene--system:after{
  clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);
}

@media(max-width:800px){
  .concept-b .scene--web:after,
  .concept-b .scene--tools:after,
  .concept-b .scene--system:after{
    height:56vh;
    clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
  }
}

/* Larger, contained artwork: the opaque image matte never crosses the cut. */
@media(min-width:801px){
  .concept-b .scene--service .scene__art{
    height:75vh;
  }
  .concept-b .scene--service .scene-illustration{
    width:min(38vw,570px);
    height:min(74vh,710px);
  }
  .concept-b .scene--web .symbol-stage{
    --kinetic-w:min(38vw,570px);
    --kinetic-h:min(74vh,710px);
  }
}

@media(max-width:800px){
  .concept-b .scene--service{
    padding-top:10vh;
  }
  .concept-b .scene--web:after,
  .concept-b .scene--tools:after,
  .concept-b .scene--system:after{
    height:62vh;
    clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
  }
  .concept-b .scene--service .symbol-stage{
    height:46vh;
  }
  .concept-b .scene--service .scene__copy{
    padding-top:5.5vh;
  }
  .concept-b .scene--service .scene-illustration{
    width:min(90vw,440px);
    height:45vh;
    max-height:430px;
    clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  }
  .concept-b .scene--web .symbol-stage{
    --kinetic-w:min(90vw,440px);
    --kinetic-h:min(45vh,430px);
  }
  .concept-b .scene--service .symbol-stage:before{
    left:4%;
    top:7%;
  }
  .concept-b .scene--service .symbol-stage>p{
    right:4%;
    bottom:7%;
  }
}

@media(max-width:800px) and (max-height:700px){
  .concept-b .scene--service{padding-top:9vh}
  .concept-b .scene--service .symbol-stage{height:43vh}
  .concept-b .scene--service .scene__copy{padding-top:4vh}
  .concept-b .scene--service .scene-illustration{width:min(82vw,380px);height:41vh}
  .concept-b .scene--web .symbol-stage{--kinetic-w:min(82vw,380px);--kinetic-h:41vh}
}

/* Preserve the full generated artwork at its native portrait ratio. */
@media(min-width:801px){
  .concept-b .scene--service .scene__art{
    height:78vh;
  }
  .concept-b .scene--service .scene-illustration{
    width:min(38vw,570px);
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }
  .concept-b .scene--web .symbol-stage{
    --kinetic-w:min(38vw,570px);
    --kinetic-h:min(47.5vw,712px);
  }
}

@media(max-width:800px){
  .concept-b .scene--service{
    padding-top:8vh;
  }
  .concept-b .scene--web:after,
  .concept-b .scene--tools:after,
  .concept-b .scene--system:after{
    height:64vh;
  }
  .concept-b .scene--service .symbol-stage{
    height:56vh;
  }
  .concept-b .scene--service .scene__copy{
    padding-top:3vh;
  }
  .concept-b .scene--service .scene__tag{
    margin:9px 0 10px;
  }
  .concept-b .scene--service .scene-illustration{
    width:min(82vw,420px);
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:center;
    clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
  }
  .concept-b .scene--web .symbol-stage{
    --kinetic-w:min(82vw,420px);
    --kinetic-h:min(102.5vw,525px);
  }
}

@media(max-width:800px) and (max-height:700px){
  .concept-b .scene--service{padding-top:8vh}
  .concept-b .scene--web:after,
  .concept-b .scene--tools:after,
  .concept-b .scene--system:after{height:66vh}
  .concept-b .scene--service .symbol-stage{height:56vh}
  .concept-b .scene--service .scene__copy{padding-top:3vh}
  .concept-b .scene--service .scene__tag{margin:8px 0 9px}
  .concept-b .scene--service .scene-illustration{width:min(76vw,380px);height:auto}
  .concept-b .scene--web .symbol-stage{--kinetic-w:min(76vw,380px);--kinetic-h:min(95vw,475px)}
}

/* =========================================================
   SERVICE COMPOSITION V6
   A single crisp overlap rule: paper / colour field / framed artwork.
   ========================================================= */
.concept-b .scene--service{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  padding:11vh clamp(34px,5.5vw,88px) 7vh;
  background:#f8f8f5!important;
}
.concept-b .scene--service::before{
  inset:0;
  z-index:0;
  transform:none!important;
  opacity:1!important;
  transition:none;
  background-size:48px 48px,48px 48px,auto;
}
.concept-b .scene--web::before{
  background-image:linear-gradient(rgba(0,80,248,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,80,248,.045) 1px,transparent 1px)!important;
}
.concept-b .scene--tools::before{
  background-image:repeating-linear-gradient(135deg,transparent 0 63px,rgba(3,153,76,.055) 64px 65px)!important;
}
.concept-b .scene--system::before{
  background-image:repeating-radial-gradient(circle at 70% 48%,transparent 0 78px,rgba(253,84,2,.065) 79px 80px)!important;
}
.concept-b .scene--service::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0 0 0 auto;
  width:38.5vw;
  height:100%;
  background:var(--accent);
  clip-path:none!important;
  transform:none!important;
  opacity:1;
  box-shadow:-14px 0 0 color-mix(in srgb,var(--accent) 12%,transparent);
  transition:width 1s cubic-bezier(.16,1,.3,1);
}
.concept-b .scene--service .scene__copy{
  z-index:5;
  max-width:46vw;
  padding-left:0;
}
.concept-b .scene--service .scene__art{
  z-index:6;
  height:78vh;
  min-width:0;
  margin-right:-2vw;
  display:grid;
  place-items:center;
  overflow:visible;
  isolation:isolate;
}
.concept-b .scene--service .symbol-stage::after{
  content:""!important;
  display:block!important;
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  width:min(42vw,640px);
  height:min(72vh,690px);
  background:#fff;
  border:1px solid rgba(22,33,58,.13);
  box-shadow:0 34px 78px rgba(22,33,58,.14);
  clip-path:polygon(0 0,100% 0,100% 100%,7% 100%);
  transform:translate(calc(-50% + 20px),calc(-50% + 20px));
  opacity:1;
  pointer-events:none;
}
.concept-b .scene--service .scene-illustration{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:min(42vw,640px);
  height:min(72vh,690px);
  max-height:690px;
  object-fit:cover;
  object-position:center;
  border:0;
  clip-path:polygon(0 0,100% 0,100% 100%,7% 100%);
  -webkit-mask-image:none!important;
  mask-image:none!important;
  mix-blend-mode:normal!important;
  filter:saturate(1.02) contrast(1.025) drop-shadow(0 18px 24px rgba(10,20,37,.13));
  transform:translate(-50%,-50%) scale(.94);
  opacity:0;
  transition:opacity .62s ease,transform 1.05s cubic-bezier(.16,1,.3,1),filter .6s ease;
}
.concept-b .scene--service.is-active .scene-illustration{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.concept-b .scene--service.is-active .scene-illustration:hover{
  transform:translate(-50%,calc(-50% - 5px)) scale(1.008);
  filter:saturate(1.03) contrast(1.03) drop-shadow(0 25px 30px rgba(10,20,37,.18));
}
.concept-b .scene--service .symbol-stage::before{
  left:calc(50% - min(21vw,320px) + 18px);
  top:calc(50% - min(36vh,345px) + 18px);
  z-index:7;
  border-color:rgba(255,255,255,.72);
  background:rgba(10,24,48,.16);
}
.concept-b .scene--service .symbol-stage>p{
  right:calc(50% - min(21vw,320px) + 16px);
  bottom:calc(50% - min(36vh,345px) + 16px);
  z-index:7;
  border-color:rgba(255,255,255,.62);
  background:rgba(10,24,48,.14);
}
.concept-b .scene--web .web-kinetic,
.concept-b .scene--web .web-runtime-scan{
  display:none!important;
  animation:none!important;
}

@media(min-width:801px) and (max-width:1100px){
  .concept-b .scene--service{
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
    padding:10vh 36px 6vh;
  }
  .concept-b .scene--service::after{width:40vw}
  .concept-b .scene--service .scene__copy{max-width:45vw}
  .concept-b .scene--service .scene__art{margin-right:-7vw}
  .concept-b .scene--service .scene-illustration,
  .concept-b .scene--service .symbol-stage::after{
    width:min(47vw,540px);
    height:min(68vh,620px);
  }
  .concept-b .scene--service .symbol-stage::before{left:7%;top:8%}
  .concept-b .scene--service .symbol-stage>p{right:5%;bottom:6%}
}

@media(max-width:800px){
  .concept-b .scene--service{
    min-height:100svh;
    grid-template-columns:1fr;
    padding:82px 18px 64px;
    background:#f8f8f5!important;
  }
  .concept-b .scene--service::before{background-size:32px 32px,32px 32px,auto}
  .concept-b .scene--service::after{
    inset:0 0 auto;
    width:100%;
    height:50vh;
    box-shadow:0 12px 0 color-mix(in srgb,var(--accent) 11%,transparent);
  }
  .concept-b .scene--service .scene__art{
    grid-row:1;
    width:calc(100% + 36px);
    height:47vh;
    min-height:330px;
    margin:0 -18px 18px;
  }
  .concept-b .scene--service .scene-illustration,
  .concept-b .scene--service .symbol-stage::after{
    width:calc(100% - 36px);
    height:41vh;
    min-height:292px;
    max-height:390px;
    clip-path:polygon(0 0,100% 0,100% 100%,6% 100%);
  }
  .concept-b .scene--service .symbol-stage::after{
    transform:translate(calc(-50% + 10px),calc(-50% + 10px));
    box-shadow:0 20px 46px rgba(22,33,58,.13);
  }
  .concept-b .scene--service .scene__copy{
    grid-row:2;
    max-width:none;
    padding-top:18px;
  }
  .concept-b .scene--service .symbol-stage::before{left:8%;top:8%}
  .concept-b .scene--service .symbol-stage>p{right:7%;bottom:9%}
  .concept-b .scene--service h2{font-size:clamp(52px,16vw,78px)}
}

@media(max-width:800px) and (max-height:700px){
  .concept-b .scene--service{padding-top:76px}
  .concept-b .scene--service::after{height:48vh}
  .concept-b .scene--service .scene__art{height:45vh;min-height:300px}
  .concept-b .scene--service .scene-illustration,
  .concept-b .scene--service .symbol-stage::after{height:39vh;min-height:270px}
}

@media(prefers-reduced-motion:reduce){
  .concept-b .scene--service .scene-illustration{opacity:1;transform:translate(-50%,-50%);transition:none}
}

/* Wide-screen composition: close the empty centre without adding clutter. */
@media(min-width:1200px){
  .concept-b .scene--service{
    grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
    align-items:center;
    padding:9vh 4vw 5vh;
  }
  .concept-b .scene--service .scene__copy{
    align-self:center;
    max-width:50vw;
    padding-left:2vw;
    transform:translateY(4vh);
  }
  .concept-b .scene--service .scene__copy:after{
    content:"";
    position:absolute;
    z-index:-1;
    left:88%;
    top:44%;
    width:clamp(180px,22vw,450px);
    height:1px;
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 58%,transparent),color-mix(in srgb,var(--accent) 12%,transparent) 70%,transparent);
    transform-origin:left center;
    opacity:.7;
    pointer-events:none;
  }
  .concept-b .scene--service h2{
    font-size:clamp(130px,10.5vw,215px);
    line-height:.74;
  }
  .concept-b .scene--service .scene__tag{
    margin:24px 0 16px;
  }
  .concept-b .scene--service .scene__art{
    position:relative;
    left:-2.2vw;
    height:84vh;
  }
  .concept-b .scene--service .scene-illustration{
    width:auto;
    height:min(82vh,870px);
    max-width:none;
  }
  .concept-b .scene--web .symbol-stage{
    --kinetic-w:min(65.6vh,696px);
    --kinetic-h:min(82vh,870px);
  }
}

/* WEB FLOW / SCROLL-LINKED HORIZONTAL MOTION
   The main artwork travels right-to-left while the WEB scene is active.
   Three cropped layers move at different speeds to make the composition feel
   like a live responsive canvas instead of a static poster. */
@media(min-width:801px) and (prefers-reduced-motion:no-preference){
  .concept-b .scene--web .scene-illustration{
    translate:var(--web-flow-x,0px) 0;
    transition:opacity .62s ease,transform 1.05s cubic-bezier(.16,1,.3,1),filter .6s ease,translate .07s linear!important;
    will-change:transform,translate;
  }
  .concept-b .scene--web .web-kinetic{
    display:block!important;
    animation:none!important;
    opacity:0!important;
    filter:saturate(1.08) brightness(1.04)!important;
    transition:opacity .42s ease,transform .07s linear!important;
  }
  .concept-b .scene--web.is-active .web-kinetic--frame{
    opacity:.16!important;
    transform:translate3d(calc(-50% + var(--web-layer-1,0px)),-50%,24px)!important;
  }
  .concept-b .scene--web.is-active .web-kinetic--tiles{
    opacity:.2!important;
    transform:translate3d(calc(-50% + var(--web-layer-2,0px)),-50%,42px)!important;
  }
  .concept-b .scene--web.is-active .web-kinetic--base{
    opacity:.14!important;
    transform:translate3d(calc(-50% + var(--web-layer-3,0px)),-50%,18px)!important;
  }
}

@media(max-width:800px),(prefers-reduced-motion:reduce){
  .concept-b .scene--web .scene-illustration{translate:none!important}
  .concept-b .scene--web .web-kinetic{display:none!important}
}

/* =========================================================
   ALL5 FINISH / responsive identity, header contrast and CTA legibility
   ========================================================= */
@media(min-width:801px){
  .home-contact{padding-top:clamp(96px,11vh,120px)!important}
  body:has(.concept-b) .site-header.is-dark .brand::after{color:#fff!important}
  body:has(.concept-b) .site-header.is-dark .brand::before{filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.18))!important}
}

@media(max-width:800px){
  body:has(.concept-b) .site-header{padding:14px 16px!important}
  body:has(.concept-b) .site-header.is-scrolled .brand,
  body.menu-open:has(.concept-b) .site-header .brand{
    width:174px!important;height:46px!important;padding:0 13px 0 45px!important;
    border:1px solid rgba(22,33,58,.13)!important;border-radius:999px!important;
    background:rgba(248,248,245,.92)!important;background-image:none!important;
    box-shadow:0 10px 30px rgba(10,22,40,.12)!important;backdrop-filter:blur(16px)!important;
  }
  body:has(.concept-b) .site-header .brand::before{left:5px!important;width:36px!important;height:36px!important;filter:none!important}
  body:has(.concept-b) .site-header .brand::after{color:#16213a!important;font-size:14px!important;letter-spacing:-.04em!important}
  body:has(.concept-b) .menu-toggle{box-shadow:0 10px 28px rgba(10,22,40,.12)!important}
  body:has(.concept-b) .menu-toggle span{
    bottom:-13px!important;padding:3px 6px!important;border-radius:999px!important;
    background:rgba(248,248,245,.94)!important;color:#16213a!important;
  }
  .concept-b .scene--brand .assembly-status{display:none!important}

  .concept-b .scene--brand .wordmark-build{left:24px!important;top:42vh!important;width:calc(100vw - 48px)!important;max-width:calc(100vw - 48px)!important}
  .concept-b .scene--brand .wordmark-line{width:100%!important;max-width:100%!important;overflow:visible!important}
  .concept-b .scene--brand .wordmark-nos{flex:0 0 auto!important;font-size:15.7vw!important;line-height:.9!important}
  .concept-b .scene--brand .wordmark-tech{flex:0 1 auto!important;margin-left:.06em!important;font-size:7.25vw!important;line-height:.95!important}
  .concept-b .scene--brand .wordmark-tagline{gap:8px!important;margin-top:11px!important;font-size:7.5px!important;letter-spacing:.115em!important}
  .concept-b .scene--brand .wordmark-tagline::before,
  .concept-b .scene--brand .wordmark-tagline::after{width:18px!important}
  .concept-b .scene--brand .wordmark-statement{width:100%!important;max-width:100%!important;margin-top:16px!important}
  .concept-b .scene--brand .wordmark-statement span,
  .concept-b .scene--brand .wordmark-statement strong{color:#16213a!important;background:none!important;-webkit-text-fill-color:#16213a!important}
  .concept-b .scene--brand .wordmark-statement strong{font-size:8.8vw!important;white-space:nowrap!important}
  .concept-b .scene--brand .wordmark-statement::after{background:#16213a!important}

  .concept-b .scene--service .symbol-stage::before{top:72px!important;left:18px!important}

  .home-contact{padding:92px 20px 5vh!important}
  .home-contact__top{align-items:center!important;flex-wrap:nowrap!important;font-size:8px!important;letter-spacing:.15em!important}
  .home-contact h2{width:100%!important;max-width:100%!important;margin:4vh 0!important;font-size:clamp(72px,21vw,86px)!important;line-height:.77!important;letter-spacing:-.085em!important}
  .home-contact h2 em{max-width:100%!important;font-size:.78em!important;letter-spacing:-.075em!important;white-space:nowrap!important}
  .home-contact__bottom p{font-size:15px!important;line-height:1.75!important}
  .home-contact__bottom a{min-height:64px!important;align-items:center!important}
}

@media(max-width:420px){
  .concept-b .scene--brand .wordmark-nos{font-size:16.8vw!important}
  .concept-b .scene--brand .wordmark-tech{font-size:7.8vw!important}
  .home-contact h2 em{font-size:.74em!important}
}

@media(min-width:1800px){
  .concept-b .scene--service{
    padding-left:5.5vw;
    padding-right:3.5vw;
  }
  .concept-b .scene--service .scene__copy{
    transform:translateY(2vh);
  }
  .concept-b .scene--service h2{
    font-size:clamp(170px,10.4vw,230px);
  }
  .concept-b .scene--service .scene__art{
    left:-4vw;
  }
}

/*
 * Portrait-leaning desktop composition.
 * The artwork deliberately leaves the grid and bleeds beyond the viewport,
 * while the proof cards sit above its leading edge. This turns the awkward
 * mid-size collision into an intentional editorial overlap.
 */
@media(min-width:801px) and (max-aspect-ratio:5/3){
  .concept-b .scene--service{
    grid-template-columns:47% 53%;
    align-items:center;
    padding:8vh 5.5vw 4vh;
  }
  .concept-b .scene--service .scene__copy{
    z-index:8;
    align-self:center;
    max-width:47vw;
    padding-left:0;
    transform:translateY(2vh);
  }
  .concept-b .scene--service .scene__copy:after{
    z-index:-1;
    left:82%;
    top:47%;
    width:32vw;
  }
  .concept-b .scene--service h2{
    font-size:clamp(112px,10vw,170px);
  }
  .concept-b .scene--service .scene__tag{
    margin:20px 0 15px;
  }
  .concept-b .scene--service .scene-proof{
    max-width:min(39vw,620px);
  }
  .concept-b .scene--service .scene__art{
    position:absolute;
    z-index:5!important;
    top:-7vh;
    right:-5vw;
    bottom:auto;
    left:auto!important;
    width:91.2vh;
    height:114vh!important;
    margin:0;
    overflow:visible;
  }
  .concept-b .scene--service .scene-illustration{
    position:absolute;
    inset:0;
    width:100%!important;
    height:100%!important;
    max-width:none;
    object-fit:cover;
    object-position:center;
    clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,5% 64%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 100%);
    filter:drop-shadow(-28px 30px 36px rgba(10,20,37,.16));
  }
  .concept-b .scene--web .symbol-stage{
    --kinetic-w:91.2vh;
    --kinetic-h:114vh;
  }
  .concept-b .scene--service .symbol-stage>p{
    right:14%;
    bottom:10%;
  }
}

/* V6 enforcement — supersedes all earlier experimental desktop exceptions. */
@media(min-width:801px){
  .concept-b .scene--service{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
    align-items:center!important;
    padding:11vh clamp(34px,5.5vw,88px) 7vh!important;
  }
  .concept-b .scene--service .scene__copy{
    position:relative!important;
    z-index:8!important;
    align-self:center!important;
    max-width:46vw!important;
    padding-left:0!important;
    transform:none!important;
  }
  .concept-b .scene--service .scene__copy::after{display:none!important}
  .concept-b .scene--service h2{
    font-size:clamp(72px,8.8vw,138px)!important;
    line-height:.78!important;
  }
  .concept-b .scene--service .scene__tag{margin:20px 0 15px!important}
  .concept-b .scene--service .scene-proof{max-width:min(41vw,620px)!important}
  .concept-b .scene--service .scene__art{
    position:relative!important;
    z-index:6!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:auto!important;
    height:78vh!important;
    min-width:0!important;
    margin:0 -2vw 0 0!important;
    display:grid!important;
    place-items:center!important;
    overflow:visible!important;
  }
  .concept-b .scene--service .scene-illustration{
    position:absolute!important;
    inset:auto!important;
    left:50%!important;
    top:50%!important;
    width:min(42vw,640px)!important;
    height:min(72vh,690px)!important;
    max-width:640px!important;
    max-height:690px!important;
    object-fit:cover!important;
    object-position:center!important;
    clip-path:polygon(0 0,100% 0,100% 100%,7% 100%)!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    mix-blend-mode:normal!important;
  }
  .concept-b .scene--service.is-active .scene-illustration{
    transform:translate(-50%,-50%) scale(1)!important;
  }
  .concept-b .scene--service .symbol-stage::after{
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    width:min(42vw,640px)!important;
    height:min(72vh,690px)!important;
    transform:translate(calc(-50% + 20px),calc(-50% + 20px))!important;
  }
  .concept-b .scene--service .symbol-stage::before{left:7%!important;top:8%!important}
  .concept-b .scene--service .symbol-stage>p{right:5%!important;bottom:6%!important}
}

@media(min-width:801px) and (max-width:1100px){
  .concept-b .scene--service{
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)!important;
    padding:10vh 34px 6vh!important;
  }
  .concept-b .scene--service .scene__copy{max-width:45vw!important}
  .concept-b .scene--service h2{font-size:clamp(68px,8.8vw,98px)!important}
  .concept-b .scene--service .scene__art{margin-right:-7vw!important}
  .concept-b .scene--service .scene-illustration,
  .concept-b .scene--service .symbol-stage::after{
    width:min(47vw,540px)!important;
    height:min(68vh,620px)!important;
  }
}

/* =========================================================
   SERVICE TYPOGRAPHY V7 / PC
   Treat the left column as a full editorial panel rather than a small caption.
   Mobile stays on the compact composition above.
   ========================================================= */
@media(min-width:1101px){
  .concept-b .scene--service{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;
    padding:8.5vh clamp(42px,5.2vw,82px) 5.5vh!important;
  }
  .concept-b .scene--service .scene__copy{
    width:100%!important;
    max-width:49vw!important;
    transform:translateY(-1vh)!important;
  }
  .concept-b .scene--service .scene__num{
    margin-bottom:22px!important;
    font-size:clamp(10px,.72vw,12px)!important;
  }
  .concept-b .scene--service .scene__num::before{width:48px!important}
  .concept-b .scene--service h2{
    font-size:clamp(88px,9.8vw,154px)!important;
    line-height:.76!important;
    max-width:none!important;
  }
  .concept-b .scene--service .scene__tag{
    max-width:34em!important;
    margin:25px 0 18px!important;
    font-size:clamp(20px,1.65vw,25px)!important;
    line-height:1.55!important;
  }
  .concept-b .scene--service .scene-proof{
    max-width:min(44vw,660px)!important;
    gap:10px!important;
    margin-bottom:22px!important;
  }
  .concept-b .scene--service .scene-proof__item{
    min-height:80px!important;
    padding:13px 16px 12px 19px!important;
  }
  .concept-b .scene--service .scene-proof__item small{font-size:9px!important}
  .concept-b .scene--service .scene-proof__item strong{
    font-size:14px!important;
    line-height:1.5!important;
  }
  .concept-b .scene--service .scene-proof__chips{gap:7px!important}
  .concept-b .scene--service .scene-proof__chips span{
    padding:8px 12px!important;
    font-size:10px!important;
  }
  .concept-b .scene--service .enter{
    min-width:250px!important;
    padding:20px 21px!important;
    font-size:13px!important;
  }
  .concept-b .scene--service .enter b{font-size:23px!important}
}

@media(min-width:801px) and (max-width:1100px){
  .concept-b .scene--service{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
    padding:8.5vh 34px 5.5vh!important;
  }
  .concept-b .scene--service .scene__copy{
    width:100%!important;
    max-width:47vw!important;
    transform:translateY(-1vh)!important;
  }
  .concept-b .scene--service .scene__num{
    margin-bottom:18px!important;
    font-size:9px!important;
  }
  .concept-b .scene--service .scene__num::before{width:40px!important}
  .concept-b .scene--service h2{
    font-size:clamp(74px,9.5vw,104px)!important;
    line-height:.77!important;
    max-width:none!important;
  }
  .concept-b .scene--service .scene__tag{
    max-width:32em!important;
    margin:19px 0 15px!important;
    font-size:18px!important;
    line-height:1.5!important;
  }
  .concept-b .scene--service .scene-proof{
    max-width:45.5vw!important;
    gap:8px!important;
    margin-bottom:19px!important;
  }
  .concept-b .scene--service .scene-proof__item{
    min-height:74px!important;
    padding:11px 13px 10px 16px!important;
  }
  .concept-b .scene--service .scene-proof__item strong{
    font-size:12.5px!important;
    line-height:1.45!important;
  }
  .concept-b .scene--service .scene-proof__chips span{
    padding:7px 10px!important;
    font-size:9px!important;
  }
  .concept-b .scene--service .enter{
    min-width:235px!important;
    padding:18px!important;
    font-size:12px!important;
  }
}