/* =========================================================
   Hub 360 Group — styles
   Palette taken from the company signage: navy, steel blue,
   gold rule, green ticks.
   ========================================================= */
:root{
  --navy-900:#0a1230;
  --navy-800:#0e1a40;
  --navy-700:#16275a;
  --blue:#3f55a5;
  --blue-soft:#6f87cf;
  --steel:#7da3c8;
  --cyan:#46c4d8;
  --gold:#d8b678;
  --gold-600:#c19a52;
  --green:#5cb85c;
  --ink:#1a2140;
  --muted:#5b6485;
  --line:#e4e8f4;
  --tint:#f3f6fc;
  --white:#fff;
  --rent:#3f55a5;
  --gate:#2e9bb8;
  --design:#7b4fd1;
  --radius:20px;
  --shadow:0 20px 50px -20px rgba(14,26,64,.35);
  --ease:cubic-bezier(.22,.8,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{
  margin:0;font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:min(1180px,92%);margin-inline:auto}

/* scroll progress */
.progress{position:fixed;inset:0 auto auto 0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width .1s linear}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.1rem;
}
.eyebrow i{width:28px;height:2px;background:currentColor;border-radius:2px;display:block}
.eyebrow--dark{color:var(--blue)}
.grad{background:linear-gradient(95deg,var(--cyan),var(--blue-soft) 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.h2{font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1.18;font-weight:700;margin:0 0 1rem;letter-spacing:-.01em}
.h2--light{color:#fff}
.lead{font-size:1.05rem;color:var(--muted);max-width:60ch;margin:0 0 1.4rem}
.lead--light{color:#b7c2e6}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.6rem;border-radius:999px;font-weight:600;font-size:.95rem;
  border:1.5px solid transparent;cursor:pointer;font-family:inherit;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:hover{transform:translateY(-2px)}
.btn--sm{padding:.55rem 1.2rem;font-size:.85rem}
.btn--block{width:100%;justify-content:center}
.btn--gold{background:linear-gradient(120deg,var(--gold),#ecd39d);color:#2a2210;box-shadow:0 10px 26px -10px rgba(216,182,120,.8)}
.btn--gold:hover{box-shadow:0 16px 34px -10px rgba(216,182,120,.9)}
.btn--ghost{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.05);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn--navy{background:var(--navy-800);color:#fff;box-shadow:0 12px 28px -12px rgba(14,26,64,.7)}
.btn--navy:hover{background:var(--blue)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}

.section{padding:clamp(4.5rem,9vw,7.5rem) 0;position:relative}
.section--tint{background:var(--tint)}
.section--dark{background:var(--navy-900);color:#fff;overflow:hidden}
.sec-head{text-align:center;max-width:840px;margin:0 auto 3.2rem}
.sec-head .lead{margin-inline:auto}
.sec-head .eyebrow{justify-content:center}
.sec-head--light .lead{color:#b7c2e6}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav.is-solid{background:rgba(10,18,48,.86);backdrop-filter:blur(14px);box-shadow:0 8px 30px -14px rgba(0,0,0,.6)}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;font-size:1.02rem;letter-spacing:.04em;font-weight:300}
.brand b{font-weight:700}
.brand__logo{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.nav__links{display:flex;align-items:center;gap:2rem}
.nav__links a:not(.btn){color:#d6defa;font-size:.92rem;font-weight:500;position:relative;padding:.3rem 0;transition:color .25s}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--gold);transition:width .3s var(--ease)}
.nav__links a:not(.btn):hover,.nav__links a.is-active{color:#fff}
.nav__links a:not(.btn):hover::after,.nav__links a.is-active::after{width:100%}
.nav__toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.nav__toggle span{position:absolute;left:11px;right:11px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s,top .3s}
.nav__toggle span:nth-child(1){top:15px}.nav__toggle span:nth-child(2){top:21px}.nav__toggle span:nth-child(3){top:27px}
.nav__toggle[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;color:#fff;overflow:hidden;
  background:linear-gradient(180deg,#0a1230 0%,#101f4d 55%,#16306a 100%);
  display:flex;flex-direction:column;justify-content:center;padding:96px 0 250px;
}

.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.hero__glow--a{width:520px;height:520px;background:#3f55a5;left:-140px;top:-100px}
.hero__glow--b{width:420px;height:420px;background:#2e9bb8;right:-80px;top:20%;animation-delay:-8s;opacity:.35}
@keyframes drift{to{transform:translate(60px,40px) scale(1.15)}}
.hero__grid{
  position:absolute;inset:0;opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%);
  animation:grid 30s linear infinite;
}
@keyframes grid{to{background-position:56px 56px,56px 56px}}

.skyline{position:absolute;left:0;right:0;bottom:70px;height:260px;display:flex;align-items:flex-end;gap:6px;padding:0 1%;opacity:.55}
.bld{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#1b2f6b,#12214f);position:relative;display:grid;gap:5px;padding:8px 6px;align-content:start}
.bld i{display:block;height:6px;border-radius:1px;background:rgba(255,255,255,.07);animation:win 4s ease-in-out infinite}
.bld i.on{background:rgba(255,222,140,.75)}
@keyframes win{0%,100%{opacity:1}50%{opacity:.35}}

/* 3D WebGL background (bg3d.js) replaces the CSS skyline + grid once it is running */
.bg3d{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.bg3d.on{opacity:1}
.hero.has3d .skyline,.hero.has3d .hero__grid{display:none}
.hero.has3d .hero__bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,18,48,.55) 0%,rgba(10,18,48,.15) 45%,transparent 70%),linear-gradient(180deg,transparent 60%,rgba(10,18,48,.55) 100%)}
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;gap:2.5rem;align-items:center}
.hero__title{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.1;font-weight:700;margin:0 0 1.3rem;letter-spacing:-.02em}
.hero__lead{font-size:1.1rem;color:#c6d1f3;max-width:56ch;margin:0 0 2rem}
.hero__lead strong{color:#fff;font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.hero__chips{display:flex;flex-wrap:wrap;gap:.6rem}
.hero__chips li{font-size:.8rem;padding:.35rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:#c6d1f3;background:rgba(255,255,255,.05)}

/* floating panel (light 3D tilt only) */
.panel{perspective:1000px}
.panel__tilt{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:22px;backdrop-filter:blur(16px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);transform:rotateY(var(--ry,-6deg)) rotateX(var(--rx,3deg));transition:transform .25s ease-out;
  animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{50%{translate:0 -10px}}
.panel__top{display:flex;align-items:center;gap:.45rem;padding:.9rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.12)}
.panel__title{margin-left:.6rem;font-size:.8rem;color:#c6d1f3;font-weight:500}
.live{margin-left:auto;display:flex;align-items:center;gap:.4rem;font-size:.7rem;color:#9df0b5;font-weight:600}
.live i{width:7px;height:7px;border-radius:50%;background:#5cd68a;box-shadow:0 0 0 0 rgba(92,214,138,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(92,214,138,0)}100%{box-shadow:0 0 0 0 rgba(92,214,138,0)}}
.panel__body{padding:1.1rem}
.panel__logo{flex:none;width:30px;height:30px;border-radius:50%;object-fit:cover}
.panel__top .panel__title{margin-left:.2rem;font-weight:600;color:#fff;font-size:.88rem}
/* workflow card: a request moves Request -> Matched -> In progress -> Delivered, then lands in the feed */
.wfx__now{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.wfx__tag{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .65rem;border-radius:999px;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent);transition:color .4s,border-color .4s,background .4s}
.wfx__now b{font-size:1rem;font-weight:600;color:#fff;line-height:1.3}
.wfx__steps{position:relative;margin-top:1rem;padding:0 .2rem}
.wfx__track{position:absolute;left:calc(.2rem + 6px);right:calc(.2rem + 6px);top:6px;height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
.wfx__track b{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--c),#efd9a2);width:calc(var(--s,0) * 33.333%);transition:width .7s var(--ease)}
.wfx__steps ol{position:relative;list-style:none;margin:0;padding:0;display:flex;justify-content:space-between}
.wfx__steps li{display:flex;flex-direction:column;align-items:center;gap:.45rem;width:25%;font-size:.7rem;color:#8fa0d6;transition:color .4s}
.wfx__steps li:first-child{align-items:flex-start}.wfx__steps li:last-child{align-items:flex-end}
.wfx__steps li i{width:14px;height:14px;border-radius:50%;background:#1a2558;border:2px solid rgba(255,255,255,.28);transition:background .4s,border-color .4s,box-shadow .4s,transform .4s var(--ease)}
.wfx__steps li.is-done{color:#d6defa}
.wfx__steps li.is-done i{background:var(--c);border-color:var(--c)}
.wfx__steps li.is-now{color:#fff;font-weight:600}
.wfx__steps li.is-now i{background:#fff;border-color:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 30%,transparent);transform:scale(1.1)}
.wfx__label{margin:1.1rem 0 .5rem;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8fa0d6}
.wfx__feed{display:flex;flex-direction:column;gap:.5rem;min-height:178px;overflow:hidden}
.wfx__item{--c:#9fb2f5;display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);animation:feedIn .6s var(--ease) both}
.wfx__ico{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--c)}
.wfx__ico svg{width:16px;height:16px}
.wfx__item div{min-width:0;flex:1}
.wfx__item b{display:block;font-size:.82rem;font-weight:600;color:#fff;line-height:1.25}
.wfx__item span.s{display:block;font-size:.7rem;color:#aebbe6;margin-top:.1rem}
.wfx__ok{flex:none;display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:600;color:var(--c)}
.wfx__ok svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wfx__chart{margin-top:.9rem;padding:.75rem .9rem .6rem;border-radius:14px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.07)}
.wfx__chartHead{display:flex;align-items:center;gap:.9rem;font-size:.7rem;color:#aebbe6}
.wfx__chartHead em{margin-left:auto;font-style:normal;color:#9df0b5;font-weight:500;white-space:nowrap}
.wfx__lg{display:inline-flex;align-items:center;gap:.35rem}
.wfx__lg i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.wfx__chartHead em svg{width:13px;height:13px;margin-right:.3rem;vertical-align:-2px;fill:none;stroke:#9df0b5;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wfx__plot{position:relative;margin-top:.6rem;height:108px}
.wfx__plot svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;clip-path:inset(-8px 100% -8px 0);animation:wfxWipe 2s var(--ease) .5s forwards}
.wfx__grid path{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1px;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.wfx__pt{position:absolute;right:-4px;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent),0 0 14px var(--c);opacity:0;animation:wfxFade .5s ease 2.2s forwards}
.wfx__ln{fill:none;stroke:var(--c);stroke-width:2.4;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 70%,transparent));stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.wfx__area{stroke:none;opacity:0;animation:wfxFade 1s ease 1.9s forwards}
@keyframes wfxWipe{to{clip-path:inset(-6px 0 -6px 0)}}
@keyframes wfxFade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.wfx__plot svg{animation:none;clip-path:none}.wfx__area,.wfx__pt{animation:none;opacity:1}}

/* working platform */
.platform{position:absolute;left:0;right:0;bottom:0;height:220px;z-index:3;pointer-events:none}
.platform__floor{
  z-index:0;position:absolute;left:0;right:0;bottom:0;height:62px;
  background:linear-gradient(180deg,#1a2d66,#0b1535);
  border-top:2px solid rgba(216,182,120,.7);box-shadow:0 -10px 40px -10px rgba(216,182,120,.35);
}
.platform__floor::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 90px);
  animation:floorMove 9s linear infinite;
}
@keyframes floorMove{to{background-position:-90px 0}}
.platform__stations{position:absolute;left:0;right:0;bottom:62px;height:120px}
.station{position:absolute;bottom:0;width:120px;height:90px;opacity:.9}
.station .desk{position:absolute;left:0;right:0;bottom:0;height:8px;background:#2b4180;border-radius:3px}
.station .legs{position:absolute;left:10px;right:10px;bottom:-0px;height:0}
.station .screen{position:absolute;left:28px;bottom:8px;width:64px;height:44px;border-radius:5px;background:#0d1a42;border:2px solid #3a5199;overflow:hidden}
.station .screen::before{content:"";position:absolute;inset:6px;background:repeating-linear-gradient(0deg,rgba(125,163,200,.55) 0 3px,transparent 3px 8px);animation:code 3s linear infinite}
.station .screen::after{content:"";position:absolute;left:0;right:0;height:3px;background:rgba(70,196,216,.8);animation:scan 2.4s ease-in-out infinite}
.station .stand{position:absolute;left:58px;bottom:8px;width:4px;height:0}
@keyframes code{to{background-position:0 22px}}
@keyframes scan{0%,100%{top:0}50%{top:calc(100% - 3px)}}

.walkers{position:absolute;inset:0}
.walker{position:absolute;bottom:var(--b);left:0;height:var(--h);width:calc(var(--h)*.4);opacity:var(--o,1);
  animation:walk var(--t) linear infinite;animation-delay:var(--dl);will-change:transform}
.walker--rtl{animation-name:walkRtl}
@keyframes walk{from{transform:translateX(-120px)}to{transform:translateX(calc(100vw + 120px))}}
@keyframes walkRtl{from{transform:translateX(calc(100vw + 120px))}to{transform:translateX(-120px)}}
.walker svg{width:100%;height:100%;overflow:visible;fill:currentColor;stroke:none;animation:bob .62s ease-in-out infinite}
.walker--rtl svg{transform:scaleX(-1)}
@keyframes bob{50%{translate:0 -2.5%}}
.limb{transform-box:fill-box;transform-origin:50% 6%}
.leg-a{animation:swing .62s ease-in-out infinite alternate}
.leg-b{animation:swing .62s ease-in-out infinite alternate-reverse}
.arm-a{animation:swingArm .62s ease-in-out infinite alternate-reverse}
.arm-b{animation:swingArm .62s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
@keyframes swingArm{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}

.scrollcue{position:absolute;left:50%;bottom:78px;z-index:5;width:26px;height:42px;border:2px solid rgba(255,255,255,.55);border-radius:14px;translate:-50% 0;display:none}
.scrollcue span{position:absolute;left:50%;top:7px;width:4px;height:8px;border-radius:2px;background:#fff;translate:-50% 0;animation:cue 1.6s infinite}
@keyframes cue{60%{opacity:0;transform:translateY(14px)}}

/* ---------- marquee ---------- */
.marquee{background:var(--navy-900);border-top:1px solid rgba(216,182,120,.4);overflow:hidden;padding:1.1rem 0}
.marquee__track{display:flex;width:max-content;gap:2.5rem;animation:marq 55s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{display:inline-flex;align-items:center;gap:2.5rem;color:#c6d1f3;font-size:.95rem;font-weight:500;white-space:nowrap}
.marquee__track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- about ---------- */
.ticks li{position:relative;padding-left:2rem;margin-bottom:.7rem;color:var(--ink);font-weight:500}
.ticks li::before,.check li::before{
  content:"";position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat;
}
/* ---------- division cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.card{
  --c:var(--blue);position:relative;background:#fff;border-radius:24px;padding:2rem 1.8rem 1.8rem;border:1px solid var(--line);
  box-shadow:0 14px 40px -24px rgba(14,26,64,.35);overflow:hidden;display:flex;flex-direction:column;
  transform-style:preserve-3d;
}
/* shared: fade-in on reveal first, then quick hover transitions once .done */
.card,.stat,.why__item{transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s),box-shadow .4s,border-color .4s}
.card.reveal.done,.stat.reveal.done,.why__item.reveal.done{transition-delay:0s;transition-duration:.5s,.35s,.4s,.4s}
.card.tilting{transition-property:transform,box-shadow,border-color;transition-duration:.15s,.4s,.4s;transition-delay:0s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.card--rent{--c:var(--rent)}.card--gate{--c:var(--gate)}.card--design{--c:var(--design)}
.card__glow{position:absolute;width:260px;height:260px;border-radius:50%;background:var(--c);opacity:0;filter:blur(70px);right:-90px;top:-90px;transition:opacity .5s;pointer-events:none}
.card:hover{box-shadow:0 30px 60px -26px rgba(14,26,64,.5);border-color:var(--c)}
.card:hover .card__glow{opacity:.22}
.card__head{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;position:relative}
.card__logo{width:68px;height:68px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 8px 20px -8px rgba(14,26,64,.5);transition:transform .6s var(--ease)}
.card__logo--soft{background:#e9e6df}
.card:hover .card__logo{transform:rotate(8deg) scale(1.08)}
.card h3{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:.01em}
.card h3 em{font-style:normal;color:var(--c)}
.card__head p{margin:.15rem 0 0;font-size:.82rem;color:var(--muted);line-height:1.4}
.check{margin:0 0 1.5rem;flex:1;position:relative}
.check li{position:relative;padding:.55rem 0 .55rem 2rem;font-weight:500;border-bottom:1px dashed var(--line);font-size:.95rem;
  opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0)*.08s + .3s)}
.check li:last-child{border-bottom:0}
.check li::before{left:0;top:.8em}
.card.in .check li{opacity:1;transform:none}
.card__link{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;color:var(--c);position:relative}
.card__link svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.card__link:hover svg{transform:translateX(5px)}

/* ---------- work / flow ---------- */
.work__bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 15% 10%,rgba(63,85,165,.45),transparent 70%),radial-gradient(500px 300px at 90% 90%,rgba(46,155,184,.3),transparent 70%)}
.tabs{position:relative;display:flex;justify-content:center;gap:.4rem;margin:0 auto 3.2rem;width:max-content;max-width:100%;
  padding:.4rem;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.tab{position:relative;z-index:1;background:none;border:0;color:#b7c2e6;font:600 .9rem "Poppins",sans-serif;padding:.7rem 1.4rem;border-radius:999px;cursor:pointer;transition:color .3s}
.tab.is-active{color:#1b1b1b}
.tabs__ink{position:absolute;z-index:0;top:.4rem;bottom:.4rem;left:0;width:0;border-radius:999px;background:linear-gradient(120deg,var(--gold),#ecd39d);transition:left .4s var(--ease),width .4s var(--ease)}

.flow{position:relative;max-width:1000px;margin:0 auto}
.flow__track{position:absolute;top:34px;left:12.5%;right:12.5%;height:4px;border-radius:4px;background:rgba(255,255,255,.14)}
.flow__fill{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--gold))}
.flow__token{position:absolute;top:50%;left:0;width:18px;height:18px;border-radius:50%;background:#fff;translate:-50% -50%;box-shadow:0 0 0 6px rgba(216,182,120,.35),0 0 24px rgba(216,182,120,.9)}
.flow__steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:s}
.step{text-align:center;padding:0 .6rem;opacity:.45;transition:opacity .5s,transform .5s var(--ease)}
.step.is-on{opacity:1}
.step__ico{
  width:68px;height:68px;margin:0 auto 1.1rem;border-radius:50%;display:grid;place-items:center;position:relative;
  background:var(--navy-700);border:2px solid rgba(255,255,255,.2);color:#c6d1f3;transition:background .5s,border-color .5s,color .5s,transform .5s var(--ease);
}
.step__ico svg{width:28px;height:28px}
.step.is-on .step__ico{background:linear-gradient(135deg,var(--blue),var(--gate));border-color:var(--gold);color:#fff;transform:scale(1.1)}
.step.is-current .step__ico::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--gold);animation:ring 1.5s ease-out infinite}
@keyframes ring{from{transform:scale(.8);opacity:1}to{transform:scale(1.25);opacity:0}}
.step small{display:block;color:var(--gold);font-weight:600;font-size:.72rem;letter-spacing:.14em;margin-bottom:.2rem}
.step h3{margin:0 0 .4rem;font-size:1.05rem;font-weight:600}
.step p{margin:0;font-size:.85rem;color:#b7c2e6;line-height:1.55}
.flow__note{margin:2.6rem auto 0;max-width:640px;text-align:center;color:#c6d1f3;font-size:.98rem;padding:1rem 1.4rem;border:1px dashed rgba(216,182,120,.5);border-radius:14px;background:rgba(255,255,255,.04)}

/* ---------- why ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.why__item{padding:1.8rem 1.5rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.why__item:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--gold)}
.why__ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.1rem;background:linear-gradient(135deg,#e8edfb,#dff3f7);color:var(--blue);transition:background .35s,color .35s,transform .5s var(--ease)}
.why__ico svg{width:26px;height:26px}
.why__item:hover .why__ico{background:linear-gradient(135deg,var(--blue),var(--gate));color:#fff;transform:rotate(-8deg)}
.why h4,.why h3{margin:0 0 .4rem;font-size:1.05rem}
.why p{margin:0;font-size:.9rem;color:var(--muted)}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:center}
.founder__visual{position:relative;min-height:380px;display:grid;place-items:center}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- contact ---------- */
.contact{background:var(--navy-900);color:#fff;overflow:hidden}
.contact__bg{position:absolute;inset:0;background:radial-gradient(700px 400px at 90% 0%,rgba(63,85,165,.5),transparent 70%),radial-gradient(500px 300px at 0% 100%,rgba(216,182,120,.15),transparent 70%)}
.contact__inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.contact__list li{display:flex;gap:.9rem;align-items:center;margin-bottom:1rem;color:#d6defa}
.contact__list .ci{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--gold)}
.contact__list svg{width:20px;height:20px}
.contact__list a:hover{color:var(--gold)}
.form{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:2rem;backdrop-filter:blur(14px);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.field{position:relative;margin-bottom:1.1rem}
.field input,.field select,.field textarea{
  width:100%;font:400 .95rem "Poppins",sans-serif;color:#fff;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.2);border-radius:14px;padding:1.45rem 1rem .55rem;outline:none;transition:border-color .3s,background .3s;resize:vertical;appearance:none;-webkit-appearance:none
}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b678' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:18px}
.field select option{color:#111}
.field label{position:absolute;left:1rem;top:.95rem;color:#aebbe6;font-size:.95rem;pointer-events:none;transition:all .25s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.1)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,
.field select:focus+label,.field select:valid+label{top:.4rem;font-size:.7rem;color:var(--gold);letter-spacing:.05em}
.field.err input,.field.err select,.field.err textarea{border-color:#ff8585}
.form__msg{margin:1rem 0 0;font-size:.9rem;min-height:1.4em;text-align:center}
.form__msg.ok{color:#9df0b5}.form__msg.bad{color:#ffb3b3}

/* ---------- footer ---------- */

.totop{position:fixed;right:22px;bottom:max(88px,calc(env(safe-area-inset-bottom) + 80px));z-index:90;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:var(--gold);color:#2a2210;display:grid;place-items:center;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .3s,transform .3s}
.totop svg{width:20px;height:20px}
.totop.show{opacity:1;pointer-events:auto;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero__inner{grid-template-columns:1fr}
  .panel{max-width:520px}
  .founder,.contact__inner{grid-template-columns:1fr;gap:2.6rem}
  .cards{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .why{grid-template-columns:1fr 1fr}
  .founder__visual{min-height:340px}
}
@media (max-width:820px){
  .nav__toggle{display:block}
  .nav__links{
    position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;padding:1rem 6% 1.6rem;background:rgba(10,18,48,.97);backdrop-filter:blur(14px);
    transform:translateY(-120%);transition:transform .4s var(--ease);box-shadow:0 20px 40px -20px #000;
  }
  .nav__links.open{transform:none}
  .nav__links a:not(.btn){width:100%;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav__links .btn{margin-top:1rem}
  .nav{background:rgba(10,18,48,.86);backdrop-filter:blur(14px)}
  .hero{padding:110px 0 220px}
  .panel{display:none}
  .flow__track{display:none}
  .flow__steps{grid-template-columns:1fr 1fr;row-gap:2rem}
  .tabs{width:100%;overflow-x:auto}
  .tab{padding:.7rem 1rem;font-size:.8rem;white-space:nowrap}
}
@media (max-width:560px){
  .why{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stat b{font-size:2.2rem}
  .hero__title{font-size:2.15rem}
  .form{padding:1.4rem}
}
@media (max-width:420px){.why{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
  .walker{animation:none!important;left:calc(var(--x,10)*1%)}
}

/* =========================================================
   Advanced UI layer (loader · cursor · spotlight · 3D hero)
   ========================================================= */

/* 3D hero replaces the CSS decorations once it is running */
.hero.has3d .hero__glow{display:none}
.hero.has3d .hero__title,.hero.has3d .hero__lead{text-shadow:0 2px 26px rgba(4,9,28,.75)}
.hero__title .grad{background-size:220% 100%;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}

/* intro loader */
.loader{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
  background:radial-gradient(600px 400px at 50% 40%,#16275a,#070d24 70%);color:#fff;transition:opacity .9s ease,visibility .9s,transform .9s var(--ease)}
.loader.hide{opacity:0;visibility:hidden;transform:scale(1.06)}
.loader__mark{position:relative;width:112px;height:112px;display:grid;place-items:center}
.loader__mark img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 40px rgba(70,196,216,.45);animation:lpulse 1.8s ease-in-out infinite}
.loader__ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--cyan);border-right-color:var(--gold);animation:spin 1.3s linear infinite}
.loader__ring--2{inset:10px;border-top-color:#a583f0;border-right-color:transparent;border-left-color:var(--steel);animation-duration:2s;animation-direction:reverse}
@keyframes lpulse{50%{transform:scale(1.07)}}
.loader__name{font-size:1.2rem;letter-spacing:.32em;font-weight:300}
.loader__name b{font-weight:700}
.loader__bar{width:200px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold));transition:width .25s ease;box-shadow:0 0 12px var(--cyan)}

/* magnetic buttons */
.btn,.totop{transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s,translate .25s ease-out}

/* spotlight that follows the cursor inside cards */
.card::after,.why__item::after,.stat::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),var(--c,#3f55a5),transparent 62%)}
.card:hover::after,.why__item:hover::after,.stat:hover::after{opacity:.1}
.why__item,.stat{position:relative;overflow:hidden}
.why__item{--c:var(--blue)}.stat{--c:var(--gold)}
.hero__title .grad{background-image:linear-gradient(95deg,#6fe3f2,#b4c4ff 35%,#f3dcaa 65%,#6fe3f2)}


/* =========================================================
   Refinement layer — polish, accessibility, restrained motion
   (kept as an override layer so every original rule stays intact)
   ========================================================= */

/* ---------- accessibility helpers ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:2000;background:var(--gold);color:#2a2210;padding:.7rem 1.1rem;border-radius:12px;font-weight:600;transition:top .2s}
.skip-link:focus{top:14px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.section:not(.section--dark):not(.contact) :focus-visible{outline-color:var(--blue)}
.btn:focus-visible,.tab:focus-visible,.totop:focus-visible,.replay:focus-visible,.chip:focus-visible{outline-offset:3px;border-radius:999px}
.card__link:focus-visible{outline-offset:5px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(216,182,120,.4)}
.field [aria-invalid="true"]{border-color:#ff8585}

/* ---------- typography & rhythm ---------- */
h1,h2,h3,h4{text-wrap:balance}
p,.lead{text-wrap:pretty}
.hero__title{font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1.08}
.hero__lead{font-size:clamp(1.02rem,1.5vw,1.14rem);line-height:1.7}
.h2{letter-spacing:-.015em}
.lead{line-height:1.75}
.eyebrow{margin-bottom:1rem}

/* gradient headings: readable gradient on light backgrounds */
.section:not(.section--dark):not(.contact) .grad{background-image:linear-gradient(95deg,#1e7b94,#3f55a5 55%,#6a3fc0)}
.hero__title .grad{animation:none;background-size:100% 100%}

/* ---------- content stays visible unless JS is running ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.show-all .reveal{opacity:1!important;transform:none!important}
.show-all .loader{display:none}
.loader{animation:loaderFail .01s linear 7s forwards}
@keyframes loaderFail{to{opacity:0;visibility:hidden;pointer-events:none}}

/* ---------- buttons ---------- */
.btn{letter-spacing:.005em}
.btn--gold{color:#241c08}
.btn:active{transform:translateY(0) scale(.98)}
.hero__talk{display:inline-flex;align-items:center;gap:.45rem;color:#d6defa;font-weight:600;font-size:.95rem;padding:.9rem .4rem;border-bottom:1.5px solid transparent;transition:color .25s,gap .25s var(--ease)}
.hero__talk svg{width:18px;height:18px}
.hero__talk:hover{color:#fff;gap:.7rem}
.hero__cta{align-items:center;gap:.9rem 1.1rem}

/* hub quick-links under the hero CTAs */
.hero__chips li{padding:0;border:0;background:none}
.chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:500;padding:.42rem .95rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#d6defa;background:rgba(255,255,255,.06);transition:background .25s,border-color .25s,transform .25s var(--ease),color .25s}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot,var(--cyan))}
.chip--rent{--dot:#8fa6ee}.chip--gate{--dot:#46c4d8}.chip--design{--dot:#b08cf5}
.chip:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff;transform:translateY(-2px)}

/* ---------- hero: let the illustration support the message ---------- */
.hero{padding:104px 0 190px}
.hero.has3d .hero__bg::after{
  background:linear-gradient(90deg,rgba(8,15,40,.82) 0%,rgba(8,15,40,.5) 40%,rgba(8,15,40,.08) 70%,transparent 85%),
             linear-gradient(180deg,rgba(8,15,40,.35) 0%,transparent 22%,transparent 62%,rgba(8,15,40,.6) 100%)}
.hero__inner{gap:2.2rem;grid-template-columns:1.25fr .75fr}
.platform{height:150px;opacity:.9}
.platform__floor{height:46px}
.platform__stations{bottom:46px;height:90px}
.station{transform:scale(.78);transform-origin:bottom left}
.walkers{opacity:.9}

/* illustrative panel: calm, clearly an example */
.panel__tilt{animation:none;box-shadow:0 30px 70px -34px rgba(0,0,0,.75)}
.live{padding:.2rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#d6defa;font-weight:500;letter-spacing:.04em}
.live i{display:none}
.panel__note{margin:.8rem .2rem 0;font-size:.72rem;color:#aebbe6;line-height:1.45}

/* ---------- marquee ---------- */
.marquee__track{animation-duration:70s}

/* ---------- about / stats ---------- */
.stat:nth-child(4) b{color:#8a6a2b}

/* ---------- division cards ---------- */
.card--rent{--ci:#3f55a5}.card--gate{--ci:#1e7b94}.card--design{--ci:#6a3fc0}
.card h3 em,.card__link{color:var(--ci,var(--c))}
.card__link{padding:.25rem 0;background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;transition:background-size .35s var(--ease)}
.card__link:hover,.card__link:focus-visible{background-size:100% 2px}
.card:focus-within{border-color:var(--c);box-shadow:0 30px 60px -26px rgba(14,26,64,.45)}
.check li{font-size:.94rem}

/* ---------- process (Our Work) ---------- */
.step{opacity:.66}
.step.is-on{opacity:1}
.step p{color:#c3cdee}
.step.is-current .step__ico::after{animation-iteration-count:2}
.flow__note{border-style:solid;border-color:rgba(216,182,120,.35)}
.flow__replay{text-align:center;margin-top:1.1rem}
.replay{display:inline-flex;align-items:center;gap:.5rem;background:none;color:#c6d1f3;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.5rem 1.1rem;font:500 .85rem "Poppins",sans-serif;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.replay svg{width:16px;height:16px}
.replay:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5)}
.tab:not(.is-active):hover{color:#fff}
.tab.is-active{color:#241c08}

/* ---------- form ---------- */
.form .btn--block{margin-top:.4rem}
.form__msg{line-height:1.5}

/* ---------- mobile & tablet ---------- */
@media (max-width:1000px){
  .hero__inner{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* closed menu must not be reachable by keyboard */
  .nav__links{visibility:hidden;transition:transform .4s var(--ease),visibility 0s linear .4s}
  .nav__links.open{visibility:visible;transition-delay:0s}
  .hero.has3d .hero__bg::after{background:linear-gradient(180deg,rgba(8,15,40,.5) 0%,rgba(8,15,40,.62) 50%,rgba(8,15,40,.72) 100%)}
  .hero{padding:96px 0 140px;min-height:auto}
  .platform{height:112px}
  .platform__floor{height:36px}
  .platform__stations{bottom:36px;height:70px}
  .station{transform:scale(.62)}
  .hero__lead{margin-bottom:1.5rem}
  .hero__cta{margin-bottom:1.4rem}
  .section{padding:clamp(3.5rem,9vw,5rem) 0}
  .sec-head{margin-bottom:2.2rem}
}
@media (max-width:560px){
  .hero__cta .btn{flex:1 1 100%;justify-content:center}
  .hero__talk{margin-inline:auto}
  .hero__chips{gap:.5rem}
  .chip{font-size:.78rem;padding:.38rem .8rem}
  .tabs{gap:.1rem;padding:.3rem;justify-content:space-between}
  .tabs__ink{top:.3rem;bottom:.3rem}
  .tab{flex:1 1 auto;padding:.65rem .55rem;font-size:.74rem;text-align:center}
  /* process → vertical timeline */
  .flow__steps{grid-template-columns:1fr;row-gap:0;position:relative}
  .flow__steps::before{content:"";position:absolute;left:33px;top:34px;bottom:34px;width:2px;background:rgba(255,255,255,.16)}
  .step{display:grid;grid-template-columns:68px 1fr;column-gap:1.1rem;text-align:left;padding:0 0 1.6rem;align-items:start}
  .step:last-child{padding-bottom:0}
  .step__ico{grid-row:1 / span 3;margin:0;position:relative;z-index:1}
  .step small,.step h3,.step p{grid-column:2}
  .step small{margin-top:.2rem}
}
@media (max-width:340px){
  .stats{grid-template-columns:1fr}
}

/* ---------- reduced motion (after the layer so it wins) ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .marquee__track{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center;gap:.5rem 1.8rem;padding:0 5%}
  .marquee__track span[aria-hidden="true"]{display:none}
  .card__link,.chip,.btn,.hero__talk{transition-duration:.001s!important}
  .loader{animation-delay:0s}
}

/* =========================================================
   3D ecosystem showcase (ecosystem3d.js) + card entrance depth
   ========================================================= */
.eco{
  color:#fff;overflow:hidden;
  background:
    radial-gradient(760px 460px at 72% 52%,rgba(63,85,165,.5),transparent 70%),
    radial-gradient(520px 360px at 6% 100%,rgba(46,155,184,.2),transparent 70%),
    linear-gradient(180deg,#0a1230,#0e1a40);
}
.eco__inner{display:grid;grid-template-columns:.92fr 1.08fr;gap:2.5rem;align-items:center}
.eco__copy .lead{max-width:46ch}
.eco__list{display:grid;gap:.8rem;margin-top:1.8rem}
.eco__row{
  --rc:var(--cyan);display:flex;align-items:center;gap:1rem;padding:.8rem 1.1rem .8rem .8rem;border-radius:18px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff;
  transition:background .3s,border-color .3s,transform .35s var(--ease),box-shadow .3s;
}
.eco__row img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:#e9e6df;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.eco__row span{flex:1;min-width:0}
.eco__row b{display:block;font-weight:600;font-size:1rem;line-height:1.3}
.eco__row small{display:block;font-size:.82rem;color:#b7c2e6;line-height:1.4}
.eco__row svg{width:20px;height:20px;flex:none;color:var(--rc);transition:transform .3s var(--ease)}
.eco__row:hover,.eco__row.is-hot,.eco__row:focus-visible{background:rgba(255,255,255,.1);border-color:var(--rc);transform:translateX(4px);box-shadow:0 14px 30px -18px var(--rc)}
.eco__row:hover svg,.eco__row.is-hot svg{transform:translateX(4px)}
.eco__row:focus-visible{outline-color:var(--gold)}

.eco__stage{position:relative;width:100%;aspect-ratio:1 / .92;min-height:340px;max-height:600px}
.eco__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease;touch-action:pan-y}
.eco__canvas.on{opacity:1}
.eco__labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.eco__label{
  position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-size:.76rem;font-weight:600;letter-spacing:.02em;color:#e4eaff;padding:.28rem .7rem;border-radius:999px;
  background:rgba(10,18,48,.72);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);
  opacity:0;transition:border-color .25s,color .25s,background .25s;will-change:transform,opacity;
}
.eco__label i{width:8px;height:8px;border-radius:50%;background:var(--lc)}
.eco__label.is-hot{border-color:var(--lc);color:#fff;background:rgba(10,18,48,.9)}

/* static fallback (shown until / unless WebGL is running) */
.eco__fallback{position:absolute;inset:0;display:grid;place-items:center}
.eco__fallback::before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(159,180,255,.35)}
.eco__fallback img{position:absolute;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 14px 30px -10px rgba(0,0,0,.6)}
.eco__fc{width:26%;max-width:110px;height:auto;aspect-ratio:1}
.eco__fn{width:15%;max-width:64px;height:auto;aspect-ratio:1}
.eco__fn--1{left:50%;top:15%;translate:-50% 0}
.eco__fn--2{left:23%;bottom:20%}
.eco__fn--3{right:23%;bottom:20%}
.eco.has3d .eco__fallback{display:none}

/* gentle 3D entrance for division cards */
.js .card.reveal{transform:perspective(1100px) translateY(30px) rotateX(9deg);transform-origin:50% 100%}
.js .card.reveal.in{transform:none}

@media (max-width:1000px){
  .eco__inner{grid-template-columns:1fr;gap:1.5rem}
  .eco__stage{order:-1;max-width:560px;margin-inline:auto}
  .eco__copy{text-align:left}
}
@media (max-width:560px){
  .eco__stage{min-height:300px;aspect-ratio:1 / .9}
  .eco__label{font-size:.68rem;padding:.22rem .55rem}
}
@media (prefers-reduced-motion:reduce){
  .js .card.reveal{transform:none}
  .eco__row,.eco__canvas{transition-duration:.001s!important}
}





/* =========================================================
   About — clean light section (matches the rest of the site)
   + scroll-driven animation system
   ========================================================= */

/* ---------- About section ---------- */
.section--tech{overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fff 100%);box-shadow:0 18px 30px -22px rgba(30,45,120,.22)}
.section--tech::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(63,85,165,.28),transparent);pointer-events:none}
.tech__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* blueprint grid that opens up like a lens when the section scrolls into view */
.tech__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(63,85,165,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(63,85,165,.075) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 85% at 76% 45%,#000 8%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 85% at 76% 45%,#000 8%,transparent 72%);
}
.js .tech__grid{clip-path:circle(0% at 76% 44%);transition:clip-path 1.9s var(--ease)}
.js .in-view .tech__grid{clip-path:circle(150% at 76% 44%)}
.section--tech .hn{position:relative;z-index:1}

/* ticks: staggered entrance, springy check marks */
.js .ticks.reveal li{opacity:0;transform:translateX(-18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*.13s + .45s)}
.js .ticks.reveal.in li{opacity:1;transform:none}
.show-all .ticks li{opacity:1!important;transform:none!important}
.ticks li::before{transition:transform .45s var(--ease),box-shadow .3s}
.ticks li:hover::before{transform:scale(1.18) rotate(-8deg);box-shadow:0 6px 14px -4px rgba(92,184,92,.7)}

/* ---------- About: the three hubs sit on one 360° ring around Hub 360 Group ---------- */
.hn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.hn__copy .lead{max-width:56ch}
.hn__points{display:grid;gap:.9rem;margin-top:1.8rem;max-width:56ch}
.hn__points li{--hc:var(--blue);display:flex;flex-direction:column;gap:.1rem;padding:.15rem 0 .15rem 1.1rem;border-left:3px solid var(--hc);transition:border-color .25s,background-color .25s}
.hn__points li[data-hub=gate]{--hc:#1e7b94}.hn__points li[data-hub=design]{--hc:#6a3fc0}
.hn__tag{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hc)}
.hn__txt{font-size:1.02rem;font-weight:500;color:var(--ink);line-height:1.5}

.hn__viz{margin:0}
/* the ring: centre (60, 47) radius 27 in a 120 x 80 box; the three hubs sit at 12, 4 and 8 on a clock face, Rent's label above it, Gate's and Design's beside their logos */
.hn__net{--b:68px;--cb:clamp(64px,15vw,88px);position:relative;aspect-ratio:120/80;max-width:580px;margin-inline:auto}
.hn__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hn__ring .hn__disc{fill:#fff;stroke:none}
.hn__ring .hn__base{fill:none;stroke:rgba(14,26,64,.26);stroke-width:.4}
.hn__ring .hn__ticks{fill:none;stroke:rgba(14,26,64,.28);stroke-width:1.1;stroke-dasharray:.45 4.55;stroke-linecap:butt}
.hn__ring .hn__arc{fill:none;stroke-width:1.5;stroke-linecap:round;transition:stroke-width .3s}
.hn__arc[data-hub=rent]{stroke:var(--blue)}.hn__arc[data-hub=gate]{stroke:#1e7b94}.hn__arc[data-hub=design]{stroke:#6a3fc0}

.hn__node{--hc:var(--blue);--dl:0s;position:absolute;left:var(--x);top:var(--y);display:flex;flex-direction:row;align-items:center;gap:.8rem;width:max-content;max-width:37%;
  text-align:left;text-decoration:none;color:var(--ink);translate:calc(var(--b) / -2) -50%;
  transition:opacity .6s var(--ease) var(--dl),transform .6s var(--ease) var(--dl)}
.hn__node--rent{--x:50%;--y:25%;flex-direction:column-reverse;align-items:center;gap:.55rem;text-align:center;max-width:42%;translate:-50% calc(var(--b) / 2 - 100%)}
.hn__node--gate{--hc:#1e7b94;--x:69.5%;--y:75.6%}
.hn__node--design{--hc:#6a3fc0;--x:30.5%;--y:75.6%;flex-direction:row-reverse;text-align:right;translate:calc(var(--b) / 2 - 100%) -50%}
.hn__node img{display:block;flex:none;width:var(--b);height:var(--b);border-radius:50%;object-fit:cover;background:#fff;
  box-shadow:0 0 0 3px #fff,0 0 0 5px var(--hc),0 12px 22px -12px rgba(14,26,64,.55);transition:transform .35s var(--ease),box-shadow .3s}
.hn__name{display:block;font-size:.92rem;font-weight:700;line-height:1.25;color:var(--navy-700);transition:color .25s}
.hn__sub{display:block;margin-top:.1rem;font-size:.78rem;line-height:1.35;color:var(--muted)}

.hn__core{--dl:0s;position:absolute;left:50%;top:58.75%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:.45rem;
  transition:opacity .6s var(--ease) var(--dl),transform .6s var(--ease) var(--dl)}
.hn__core img{display:block;width:var(--cb);height:var(--cb);border-radius:50%;object-fit:cover;background:#fff;
  box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(216,182,120,.95),0 16px 30px -14px rgba(14,26,64,.6)}
.hn__w{display:inline}
.hn__core span{padding:.2rem .7rem;border-radius:999px;background:var(--navy-800);color:#fff;font-size:.74rem;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.hn__cap{margin:1.1rem auto 0;max-width:46ch;text-align:center;font-size:.86rem;line-height:1.55;color:var(--muted)}

/* hover / keyboard focus (and hovering the matching row of the list): the logo rises, its arc thickens, the name takes the hub colour */
.hn__node:hover,.hn__node:focus-visible,.hn[data-active=rent] .hn__node--rent,.hn[data-active=gate] .hn__node--gate,.hn[data-active=design] .hn__node--design{transform:translateY(-3px)}
.hn__node:hover img,.hn__node:focus-visible img,.hn[data-active=rent] .hn__node--rent img,.hn[data-active=gate] .hn__node--gate img,.hn[data-active=design] .hn__node--design img{
  transform:scale(1.07);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--hc),0 18px 28px -14px rgba(14,26,64,.6)}
.hn__node:hover .hn__name,.hn__node:focus-visible .hn__name,.hn[data-active=rent] .hn__node--rent .hn__name,.hn[data-active=gate] .hn__node--gate .hn__name,.hn[data-active=design] .hn__node--design .hn__name{color:var(--hc)}
.hn__node:focus-visible{outline:3px solid var(--gold-600);outline-offset:8px;border-radius:14px}
.hn[data-active=rent] .hn__arc[data-hub=rent],.hn[data-active=gate] .hn__arc[data-hub=gate],.hn[data-active=design] .hn__arc[data-hub=design]{stroke-width:2.3}
.hn[data-active=rent] li[data-hub=rent],.hn[data-active=gate] li[data-hub=gate],.hn[data-active=design] li[data-hub=design]{background:linear-gradient(90deg,rgba(63,85,165,.07),transparent)}
.hn--done .hn__points li:hover{transform:translateX(6px)}

/* entrance: the ring draws round, the group logo appears, then Rent, Gate and Design in turn (each with its own arc), then the caption and the list.
   Hidden only while JS runs; without JS everything is simply visible. */
.js .hn:not(.hn--in) .hn__base,.js .hn:not(.hn--in) .hn__arc{stroke-dasharray:1;stroke-dashoffset:1}
.js .hn:not(.hn--in) .hn__ticks{opacity:0}
.js .hn:not(.hn--in) .hn__node{opacity:0;transform:translateY(12px)}
.js .hn:not(.hn--in) .hn__core{opacity:0;transform:scale(.9)}
.js .hn:not(.hn--pts) .hn__points li,.js .hn:not(.hn--in) .hn__cap{opacity:0;transform:translateY(10px)}
.js .hn--in .hn__base,.js .hn--in .hn__arc{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--ease) var(--dl,0s),stroke-width .3s}
.js .hn--in .hn__base{--dl:.1s;transition-duration:1.3s,.3s}
.js .hn--in .hn__ticks{transition:opacity .9s var(--ease) .5s}
.js .hn--in .hn__node,.js .hn--in .hn__core{--dl:var(--t,0s)}
.hn--in .hn__core{--t:.5s}
.hn--in .hn__node--rent{--t:1s}.hn--in .hn__node--gate{--t:1.35s}.hn--in .hn__node--design{--t:1.7s}
.hn--in .hn__arc[data-hub=rent]{--dl:1s}.hn--in .hn__arc[data-hub=gate]{--dl:1.35s}.hn--in .hn__arc[data-hub=design]{--dl:1.7s}
.hn{--pd:.1s}
.hn--seq{--pd:1.4s}
.js .hn--pts .hn__points li{transition:opacity .6s var(--ease) calc(var(--pd) + var(--i,0)*.14s),transform .6s var(--ease) calc(var(--pd) + var(--i,0)*.14s),border-color .25s,background-color .25s}
.js .hn--in .hn__cap{transition:opacity .6s var(--ease) 2.4s,transform .6s var(--ease) 2.4s}
.hn--done .hn__node,.hn--done .hn__core,.hn--done .hn__points li,.hn--done .hn__cap{--dl:0s;transition-delay:0s!important}
.show-all .hn__node,.show-all .hn__core,.show-all .hn__points li,.show-all .hn__cap,.show-all .hn__ticks{opacity:1!important;transform:none!important}
.show-all .hn__base,.show-all .hn__arc{stroke-dashoffset:0!important}

@media (max-width:1000px){
  .hn{grid-template-columns:1fr;gap:2.4rem}
  .hn__copy .lead,.hn__points{max-width:none}
}
@media (max-width:600px){
  .hn__net{--b:46px;--cb:56px}
  .hn__viz{padding-top:.4rem}
  .hn__name{font-size:.86rem}
  .hn__sub{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hn__node{gap:.5rem}
  .hn__node--gate .hn__w,.hn__node--design .hn__w{display:block}
  .hn__core span{font-size:.7rem;padding:.15rem .6rem}
}
@media (prefers-reduced-motion:reduce){
  .js .hn:not(.hn--in) .hn__node,.js .hn:not(.hn--in) .hn__core,.js .hn:not(.hn--pts) .hn__points li,.js .hn:not(.hn--in) .hn__cap{opacity:1;transform:none}
  .js .hn:not(.hn--in) .hn__base,.js .hn:not(.hn--in) .hn__arc{stroke-dashoffset:0}
  .js .hn:not(.hn--in) .hn__ticks{opacity:1}
  .hn__node,.hn__core,.hn__points li,.hn__cap,.hn__base,.hn__arc,.hn__ticks,.hn__node img,.hn__name{transition:none!important}
  .hn__node:hover,.hn__node:focus-visible,.hn[data-active] .hn__node,.hn--done .hn__points li:hover{transform:none}
  .hn__node:hover img,.hn__node:focus-visible img,.hn[data-active] .hn__node img{transform:none}
}

/* ======================= SCROLL ANIMATION SYSTEM ======================= */

/* headings: words rise out of a mask, one after another */
.js .h2.split.reveal{opacity:1;transform:none;transition:none}
.js .h2.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em .02em .16em;margin:-.08em -.02em -.16em}
.js .h2.split .wi{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:0 100%;transition:transform .95s var(--ease) calc(var(--wd,0)*1s + var(--d,0s))}
.js .h2.split.in .wi{transform:none}
.h2 .grad .wi{background-image:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}
.show-all .h2.split .wi{transform:none!important}

/* eyebrow rule draws itself */
.js .eyebrow.reveal i{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .25s}
.js .eyebrow.reveal.in i{transform:none}
.show-all .eyebrow i{transform:none!important}

/* parallax layers (driven from script.js through --py) */
[data-parallax]{translate:0 var(--py,0px)}

@media (prefers-reduced-motion:reduce){
  .js .tech__grid{clip-path:none;transition:none}
  .js .h2.split .wi{transform:none;transition:none}
  .js .eyebrow.reveal i{transform:none;transition:none}
  [data-parallax]{translate:none}
}

/* =========================================================
   How every hub works — three cinematic scenes (Rent · Gate · Design)
   story-hub.js writes five numbers on every scene while you scroll:
     --b  art build 0→1 · --tb text build 0→1 · --in / --out scene entering / leaving · --d slow camera drift −1→1
   The artwork below is plain CSS / SVG / <img> reacting to those numbers (transform + opacity only).
   Defaults are "fully built", so with no JS or with reduced motion everything is simply visible, stacked.
   ========================================================= */
.cine{position:relative;background:#050a1e;color:#fff;isolation:isolate}
.cine__track,.cine__sticky{position:relative}

.scene{
  --c:#8ea2ff;--c2:#5b6cf0;--cr:142,162,255;--g1:#aebcff;--g2:#7d6cf6;
  --b:1;--tb:1;--in:1;--out:0;--d:0;
  position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;
  padding:clamp(5.5rem,10vw,7.5rem) 0 clamp(3.5rem,7vw,5rem);
}
.scene--gate{--c:#3fe0e8;--c2:#16a5c9;--cr:63,224,232;--g1:#86f4f0;--g2:#27b6d8}
.scene--design{--c:#b78bff;--c2:#8b5cf6;--cr:183,139,255;--g1:#d6b9ff;--g2:#f07bd4}

.scene__bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 58% 72% at 72% 50%,rgba(var(--cr),.2),transparent 70%),
    radial-gradient(ellipse 46% 56% at 6% 104%,rgba(var(--cr),.1),transparent 70%),
    linear-gradient(180deg,#060b22,#050a1e)}
.scene__bg::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(var(--cr),.055) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--cr),.055) 1px,transparent 1px);
  background-size:68px 68px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 60% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 60% 50%,#000,transparent 75%)}
.dust{position:absolute;inset:0;overflow:hidden}
.dust i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:var(--c);opacity:.0;
  box-shadow:0 0 12px 1px rgba(var(--cr),.8);animation:dustFloat var(--t) ease-in-out var(--dl) infinite}
@keyframes dustFloat{0%,100%{transform:translate3d(0,0,0);opacity:0}25%{opacity:.75}50%{transform:translate3d(var(--dx),-46px,0);opacity:.35}75%{opacity:.7}}

.scene__wrap{position:relative;z-index:1;width:min(1300px,92%);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.6rem,4vw,2.6rem);align-items:center}
@media (min-width:1001px){.scene__wrap{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:2rem}}

/* ---------- copy ---------- */
.scene__eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 .85rem;font:600 .74rem/1 "Poppins",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}.scene__brand{display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem;font-weight:600;font-size:1rem;color:#dfe6ff}
.scene__brand img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#e9e6df;box-shadow:0 0 0 2px rgba(var(--cr),.5),0 0 18px rgba(var(--cr),.4)}
.scene__brand em{font-style:normal;color:var(--c)}
.scene__title{margin:0 0 .9rem;font-size:clamp(1.9rem,min(3.25vw,5.4svh),3.1rem);line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#fff}
.scene__title .ln{display:block}
.scene__title b{font-weight:700;background:linear-gradient(95deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.scene__tag{margin:0 0 .5rem;font-weight:600;font-size:1.02rem;color:var(--c)}
.scene__desc{margin:0;max-width:34em;font-size:.95rem;line-height:1.7;color:#b9c5ee}
.scene__svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15.5rem,100%),1fr));column-gap:1.6rem;margin:1.1rem 0 1.25rem;padding:0;list-style:none;max-width:35rem}
.scene__svc li{position:relative;padding:.34rem 0 .34rem 1.15rem;font-size:.9rem;color:#e8edff;border-bottom:1px solid rgba(255,255,255,.08)}
.scene__svc li::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:linear-gradient(135deg,var(--c),var(--c2));box-shadow:0 0 10px rgba(var(--cr),.75)}
.scene__link{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.92rem;color:var(--c);padding:.2rem 0;border-bottom:1px solid transparent;transition:gap .3s var(--ease),border-color .3s,color .3s}
.scene__link svg{width:18px;height:18px}
.scene__link:hover{gap:.85rem;border-color:currentColor;color:#fff}
.scene__link:focus-visible{outline:2px solid var(--gold);outline-offset:5px;border-radius:4px}

/* ---------- building blocks for the art ---------- */
.k{--k:clamp(0,calc((var(--b) - var(--st,0)) / var(--du,.22)),1);--e:calc(var(--k) * var(--k) * (3 - 2 * var(--k)))}
.st{--k:clamp(0,calc((var(--tb) - var(--st,0)) / .2),1);--e:calc(var(--k) * var(--k) * (3 - 2 * var(--k)))}

.vis{position:relative;width:min(100%,calc((100svh - 150px) * 1.14));max-width:760px;aspect-ratio:1.14 / 1;margin-inline:auto;container-type:inline-size}
.vis__in{position:absolute;inset:0;font-size:11px;font-size:clamp(7.5px,1.8cqi,13.5px)}
.l{position:absolute;display:block}
.vis svg{overflow:visible}

.v-aura{inset:6% 4%;background:radial-gradient(closest-side,rgba(var(--cr),.34),transparent);opacity:var(--e)}

/* glass panel shared by all scenes */
.fp,.rq{opacity:var(--e);
  transform:perspective(1200px) translate3d(calc((1 - var(--e)) * var(--fx,0px)),calc((1 - var(--e)) * var(--fy,30px)),0) rotateY(calc((1 - var(--e)) * var(--fr,-22deg))) scale(calc(.82 + var(--e) * .18));
  translate:calc(var(--d) * var(--px,0) * 1px) calc(var(--d) * var(--py,0) * 1px)}
.fp__in{padding:.85em 1em 1em;border-radius:1.25em;background:linear-gradient(150deg,rgba(var(--cr),.28),rgba(9,15,46,.86) 72%);border:1px solid rgba(var(--cr),.45);
  box-shadow:0 1.8em 3.2em -1.4em rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.16);animation:bob 6.5s ease-in-out infinite}
.fp__in.alt{animation-duration:7.6s;animation-delay:-2.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.55em)}}
.fp b,.rq b{display:flex;align-items:center;gap:.5em;font:600 1em/1.25 "Poppins",sans-serif;color:#fff}
.fp b svg,.rq b svg{flex:none;width:1.55em;height:1.55em;stroke:var(--c)}
.sk{display:block;height:.42em;margin-top:.7em;border-radius:1em;background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.08))}
.sk.s{width:64%}

/* ---------- RENT: blueprint → building, listing panels, light trails ---------- */
.v-bp{inset:0;width:100%;height:100%;fill:none;stroke:rgba(var(--cr),.85);stroke-width:.35;opacity:calc(1 - clamp(0,calc((var(--b) - .5) / .3),1) * .78);filter:drop-shadow(0 0 3px rgba(var(--cr),.7))}
.v-bp path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--e))}
.v-pin{left:50%;top:55%;width:11%;translate:-50% -50%;color:var(--c);
  opacity:calc(var(--e) * (1 - clamp(0,calc((var(--b) - .3) / .1),1)));transform:translateY(calc((1 - var(--e)) * -90%)) scale(calc(.6 + var(--e) * .4))}
.v-pin svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 .8em rgba(var(--cr),.9));stroke:none}
.ring{position:absolute;left:50%;bottom:-6%;width:170%;aspect-ratio:2.6;margin-left:-85%;border-radius:50%;border:1.5px solid rgba(var(--cr),.8);animation:ringPing 2.4s ease-out infinite}
.ring.r2{animation-delay:1.2s}
@keyframes ringPing{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1);opacity:0}}
.v-img{left:-3%;top:50%;width:106%;translate:0 -50%;clip-path:inset(calc((1 - var(--e)) * 100%) 0 0 0)}
.v-img img{display:block;width:100%;height:auto;transform:perspective(1300px) rotateY(calc(var(--d) * 5deg)) scale(calc(1.02 + var(--d) * .035));
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse closest-side at 50% 50%,#000 58%,transparent 100%)}
.v-scan{left:4%;width:92%;height:2px;top:calc(82.5% - var(--e) * 65%);opacity:calc(var(--e) * (1 - var(--e)) * 4);
  background:linear-gradient(90deg,transparent,rgba(var(--cr),1),#fff,rgba(var(--cr),1),transparent);box-shadow:0 0 18px 3px rgba(var(--cr),.7)}
.v-trails{inset:0;width:100%;height:100%;fill:none;stroke:rgba(var(--cr),.9);stroke-width:.3;filter:drop-shadow(0 0 2px rgba(var(--cr),.9))}
.v-trails path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--e))}
.dotk{fill:#fff;stroke:none;opacity:var(--e);filter:drop-shadow(0 0 1.4px #fff)}
.node{opacity:var(--e);transform:scale(calc(.7 + var(--e) * .3));padding:.4em .85em .4em 1.7em;border-radius:99em;font:600 .92em/1 "Poppins",sans-serif;color:#e6ebff;
  background:rgba(10,18,52,.86);border:1px solid rgba(var(--cr),.55);box-shadow:0 0 1.4em -.2em rgba(var(--cr),.6)}
.node::before{content:"";position:absolute;left:.75em;top:50%;width:.6em;height:.6em;margin-top:-.3em;border-radius:50%;background:var(--c);box-shadow:0 0 .8em var(--c)}

/* ---------- GATE: platform rings, radial service modules, connection lines, request panels ---------- */
.v-rings,.v-lines{inset:0;width:100%;height:100%;fill:none}
.v-rings ellipse:first-of-type{opacity:var(--e)}
.v-rings ellipse:not(:first-of-type){stroke:rgba(var(--cr),.75);stroke-width:.3;stroke-dasharray:2 2.6;opacity:var(--e);animation:dashRun 9s linear infinite}
.v-rings .rg2{animation-direction:reverse;animation-duration:12s}
@keyframes dashRun{to{stroke-dashoffset:-46}}
.v-lines path{stroke:rgba(var(--cr),.85);stroke-width:.3;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--e));filter:drop-shadow(0 0 2px rgba(var(--cr),.9))}
.v-img--gate{left:19%;top:2%;width:62%;translate:none;clip-path:circle(calc(var(--e) * 76%) at 50% 50%);opacity:var(--e);transform:scale(calc(.86 + var(--e) * .14))}
.v-img--gate img{transform:scale(calc(1 + var(--d) * .04)) translateY(calc(var(--d) * -1.2%))}
.mod{width:19%;text-align:center;opacity:var(--e);transform:translate3d(calc((1 - var(--e)) * var(--tx)),calc((1 - var(--e)) * var(--ty)),0) scale(calc(.3 + var(--e) * .7));
  translate:calc(var(--d) * var(--px,0) * 1px) calc(var(--d) * var(--py,0) * 1px)}
.mod__ico{display:grid;place-items:center;width:3.7em;height:3.7em;margin:0 auto .55em;border-radius:1.15em;
  background:linear-gradient(145deg,rgba(var(--cr),.42),rgba(6,28,48,.92));border:1px solid rgba(var(--cr),.6);box-shadow:0 0 2.2em -.3em rgba(var(--cr),.6),inset 0 1px 0 rgba(255,255,255,.2)}
.mod__ico svg{width:1.95em;height:1.95em;stroke:#fff}
.mod span{display:block;font:600 .95em/1.25 "Poppins",sans-serif;color:#dffbff;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.rq{width:21%}
.rq .fp__in{padding:.7em .85em .8em}
.pill{position:relative;display:block;margin-top:.8em;height:1.9em;border-radius:99em;background:linear-gradient(120deg,var(--c2),var(--c));color:#04202c;font:700 .92em/1.9em "Poppins",sans-serif;text-align:center;overflow:hidden}
.pill em{font-style:normal;position:absolute;inset:0;transition:opacity .4s}
.pill .ok{opacity:0;background:#fff;color:#0a5a58}
.scene--gate .rq{--okp:clamp(0,calc((var(--b) - .93) / .05),1)}
.scene--gate .rq .ok{opacity:var(--okp)}
.scene--gate .rq em:not(.ok){opacity:calc(1 - var(--okp))}

/* ---------- DESIGN: canvas opens → panels converge → object becomes identity ---------- */
.dc__img,.dc__frame{left:4%;top:8%;width:92%;height:84%;border-radius:1.7em}
.dc__img{overflow:hidden;background:#04050c;clip-path:inset(calc((1 - clamp(0,calc((var(--b) - .12) / .24),1)) * 50%) calc((1 - clamp(0,calc((var(--b) - .02) / .14),1)) * 50%) round 1.7em)}
.dc__img img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.06 + var(--d) * .035));opacity:clamp(0,calc((var(--b) - .2) / .2),1)}
.dc__frame{border:1.5px solid rgba(var(--cr),.85);box-shadow:0 0 3.4em -.4em rgba(var(--cr),.7),inset 0 0 3.2em rgba(var(--cr),.22);
  transform:scale(clamp(0,calc((var(--b) - .02) / .14),1),clamp(0.004,calc((var(--b) - .12) / .24),1));
  opacity:calc(1 - clamp(0,calc((var(--b) - .78) / .22),1) * .35)}
.v-orbit{inset:0;width:100%;height:100%;fill:none;stroke:rgba(var(--cr),.6);stroke-width:.25;pointer-events:none}
.v-orbit .shape{opacity:var(--e);filter:drop-shadow(0 0 1.2px currentColor)}
.v-orbit ellipse{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--e))}
.morph{left:50%;top:71%;width:11%;aspect-ratio:1;translate:-50% -50%}
.morph .cube{position:absolute;inset:0;width:100%;height:100%;stroke:#d6b9ff;stroke-width:1.6;fill:rgba(124,92,255,.35);
  opacity:calc(clamp(0,calc((var(--b) - .36) / .1),1) * (1 - clamp(0,calc((var(--b) - .62) / .1),1)));transform:rotateY(calc(var(--b) * 260deg)) scale(calc(.6 + var(--b) * .5));filter:drop-shadow(0 0 .7em rgba(var(--cr),.9))}
.morph .mlogo{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#101030;box-shadow:0 0 0 2px rgba(var(--cr),.7),0 0 2.4em rgba(var(--cr),.8);
  opacity:clamp(0,calc((var(--b) - .62) / .1),1);transform:scale(calc(.5 + clamp(0,calc((var(--b) - .62) / .14),1) * .5))}
.sws{position:absolute;left:50%;top:112%;display:flex;gap:.45em;translate:-50% 0;opacity:clamp(0,calc((var(--b) - .78) / .1),1)}
.sws i{width:1.15em;height:1.15em;border-radius:50%;background:var(--s);box-shadow:0 0 .9em var(--s);transform:translateY(calc((1 - clamp(0,calc((var(--b) - .8) / .12),1)) * 1.2em))}
.sw3{display:flex;gap:.4em;margin-top:.75em}
.sw3 i{width:1.5em;height:1.5em;border-radius:50%;background:var(--s);box-shadow:0 0 .8em -.1em var(--s)}
.pst{display:grid;grid-template-columns:1fr;gap:.45em;margin-top:.7em;aspect-ratio:3 / 3.5;padding:.6em;border-radius:.7em;background:linear-gradient(160deg,#7c5cff,#f27ad6 90%)}
.pst i:first-child{background:rgba(255,255,255,.9);border-radius:50%;width:48%;aspect-ratio:1;justify-self:center}
.pst i:last-child{background:rgba(255,255,255,.7);height:.4em;border-radius:1em;width:80%;justify-self:center;align-self:end}
.ui{display:grid;grid-template-columns:.8fr 2fr;gap:.4em;margin-top:.7em}
.ui i{display:block;height:.5em;border-radius:1em;background:rgba(255,255,255,.2)}
.ui i:first-child{grid-row:1 / 4;height:auto;min-height:3.2em;border-radius:.5em;background:rgba(var(--cr),.35)}
.ui i:nth-child(3){width:66%;background:rgba(var(--cr),.7)}
.tl{position:relative;display:flex;gap:.3em;margin-top:.8em;padding:.5em;border-radius:.6em;background:rgba(255,255,255,.07)}
.tl i{flex:1;height:1.5em;border-radius:.35em;background:linear-gradient(90deg,#7c5cff,#b78bff)}
.tl i:nth-child(2){flex:1.5;background:linear-gradient(90deg,#f27ad6,#ff9ae6)}
.tl i:nth-child(3){flex:.8;background:linear-gradient(90deg,#6ee7f0,#9af3fa)}
.tl u{position:absolute;top:.2em;bottom:.2em;width:2px;background:#fff;box-shadow:0 0 6px #fff;animation:playhead 5s linear infinite}
@keyframes playhead{from{left:8%}to{left:92%}}
.so{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;margin-top:.75em}
.so i{aspect-ratio:1;border-radius:.5em;background:linear-gradient(145deg,#7c5cff,#b78bff)}
.so i:nth-child(2){background:linear-gradient(145deg,#f27ad6,#ff9ae6)}
.so i:nth-child(3){background:linear-gradient(145deg,#6ee7f0,#3aa7d8)}

/* ---------- scroll-driven mode (JS running, motion allowed) ---------- */
.cine--on .st{opacity:var(--e);transform:translate3d(0,calc((1 - var(--e)) * 30px),0)}
.cine--paused .scene *,.cine--paused .scene *::before,.cine--on .scene:not(.is-live) *{animation-play-state:paused!important}

/* desktop: the three scenes are pinned one after another; the pin releases after the last one */
.cine--pin .cine__track{height:calc(100svh * 3.85)}
.cine--pin .cine__sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#050a1e}
.cine--pin .scene{position:absolute;inset:0;min-height:0;padding:78px 0 22px;opacity:0;pointer-events:none;will-change:opacity}
.cine--pin .scene__copy{transform:translate3d(0,calc(var(--out) * -36px),0)}
.cine--pin .scene__vis{transform:translate3d(calc((1 - var(--in)) * 80px + var(--out) * -50px),0,0) scale(calc(.93 + var(--in) * .07 + var(--out) * .07))}
.cine--pin .scene__copy .scene__title{font-size:clamp(1.8rem,min(3.2vw,5.2svh),3.05rem)}
@media (max-height:760px){.cine--pin .scene__desc{font-size:.9rem;line-height:1.6}.cine--pin .scene__svc li{padding-block:.24rem}.cine--pin .scene__brand{margin-bottom:.6rem}}

/* tablet & phone: scenes stack (copy first, art below) and build as each one scrolls into view */
@media (max-width:1000px){
  .scene{min-height:0;padding:5.2rem 0 3.4rem}
  .vis{max-width:640px}
  .scene__svc{max-width:none}
}
@media (max-width:640px){
  .scene{padding:4.6rem 0 2.8rem}
  .scene__title{font-size:clamp(1.85rem,8.2vw,2.3rem)}
  .scene__desc{font-size:.92rem}
  .vis__in{font-size:clamp(7px,2.1cqi,11px)}
  .node{display:none}
  .rq{display:none}
  .fp--brand,.fp--ui{display:none}
  .mod span{font-size:.85em}
  .dust i:nth-child(n+9){display:none}
}

@media (prefers-reduced-motion:reduce){
  .scene *,.scene *::before,.scene *::after{animation:none!important}
  .cine--on .st{transition:none}
}

/* =========================================================
   Contact / register panel — premium glass + cinematic 3D layer
   Visual only: the form, its fields, labels, validation and submit logic are untouched.
   Decorative art lives in .cx (aria-hidden, pointer-events:none); transform + opacity animations only.
   ========================================================= */
.contact__copy,.form{position:relative;z-index:1}
.contact__bg{background:
  radial-gradient(760px 460px at 92% 0%,rgba(63,85,165,.55),transparent 70%),
  radial-gradient(520px 320px at 0% 100%,rgba(216,182,120,.16),transparent 70%),
  radial-gradient(420px 300px at 58% 62%,rgba(111,135,207,.12),transparent 70%)}

/* --- glass panel: gold→blue hairline edge, soft top light, slow reflection sweep --- */
.form{
  isolation:isolate;overflow:hidden;
  background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.05) 45%,rgba(111,135,207,.08));
  border-color:rgba(255,255,255,.14);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.8),0 0 0 1px rgba(216,182,120,.08),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -40px 60px -50px rgba(63,85,165,.5);
}
.form::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:linear-gradient(140deg,rgba(243,223,174,.75),rgba(255,255,255,.08) 32%,rgba(111,135,207,.5) 70%,rgba(216,182,120,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.form::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:38%;pointer-events:none;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);transform:translateX(0) skewX(-16deg);animation:cxSheen 11s ease-in-out 2s infinite}
@keyframes cxSheen{0%,55%{transform:translateX(0) skewX(-16deg)}100%{transform:translateX(560%) skewX(-16deg)}}

.field input,.field select,.field textarea{
  border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .3s,background .3s,box-shadow .3s}
.field input,.field textarea{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04))}
.field select{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b678' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-color:rgba(255,255,255,.07)}
.field select,.field select:focus{background-image:var(--chev);background-repeat:no-repeat;background-position:right 1rem center;background-size:18px}
.field select:focus{background-color:rgba(255,255,255,.1)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(216,182,120,.55)}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(216,182,120,.28),0 10px 30px -14px rgba(216,182,120,.55)}
.field.err input,.field.err select,.field.err textarea{box-shadow:0 0 0 3px rgba(255,133,133,.2)}

.form .btn--gold{
  background:linear-gradient(115deg,#d3ab62,#efd9a2 48%,#d8b678);
  box-shadow:0 14px 30px -12px rgba(216,182,120,.85),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(150,110,40,.25)}
.form .btn--gold::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg) translateX(0);transition:transform .8s var(--ease)}
.form .btn--gold:hover::after{transform:skewX(-20deg) translateX(520%)}
.form .btn--gold:hover{box-shadow:0 20px 38px -12px rgba(216,182,120,.95),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(150,110,40,.25)}
.form .btn--gold:focus-visible{outline:2px solid #fff;outline-offset:3px}
.contact__list .ci{background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -12px rgba(0,0,0,.6)}

/* =========================================================
   Footer — brand + contact, three hub columns, quick links
   ========================================================= */
.footer{background:#050a1d;color:#9aa8d6;padding:0;font-size:.9rem;margin-top:-1px}
.footer__panel{padding:3.4rem 0 1.1rem;border-radius:36px 36px 0 0;border-top:1px solid rgba(255,255,255,.1);
  background:radial-gradient(640px 320px at 0 0,rgba(216,182,120,.09),transparent 70%),radial-gradient(600px 340px at 100% 0,rgba(63,85,165,.22),transparent 70%),linear-gradient(180deg,#0e1738,#070d25)}

/* desktop: brand + five columns, every column starts on the same line.
   .footer__stack only wraps "What We Do" and "Quick Links", so it is flattened into the grid. */
.footer__grid{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(5,minmax(0,1fr));gap:2.2rem 1.8rem;align-items:start}
.footer__stack{display:contents}

/* brand block: logo + name, description, contact/social (when configured), button */
.footer__brandcol{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.footer__brand{display:flex;align-items:center;gap:.8rem;color:#fff}
.footer__brand .brand__logo{flex:none;width:44px;height:44px}
.footer__brand span{display:block;min-width:0}
.footer__brand b{display:block;font-size:1.02rem;letter-spacing:.06em;font-weight:700;line-height:1.25}
.footer__brand em{display:block;font-style:normal;font-size:.74rem;color:#aebbe6;margin-top:.15rem;line-height:1.4}
.footer__about{margin:1rem 0 0;max-width:34ch;line-height:1.65;color:#aebbe6}
.footer__social{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.1rem 0 0}
.footer__social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;transition:background .3s,color .3s,transform .3s var(--ease),border-color .3s}
.footer__social a:hover{background:var(--gold);border-color:var(--gold);color:#0e1a40;transform:translateY(-3px)}
.footer__social svg{width:18px;height:18px;fill:currentColor;stroke:none}
.footer__contact{display:grid;gap:.7rem;margin:1.1rem 0 0}
.footer__contact li{display:flex;align-items:flex-start;gap:.7rem;line-height:1.5;color:#d6defa}
.footer__contact .fi{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(216,182,120,.14);color:var(--gold)}
.footer__contact .fi svg{width:16px;height:16px}
.footer__contact a:hover{color:var(--gold)}
.footer__cta{margin-top:1.3rem}

/* the contact and social lists stay out of the layout until contact-config.js fills them */
.footer__social[hidden],.footer__contact[hidden]{display:none}

/* link columns: one shared heading height so the lists start on the same line */
.footer__col{min-width:0}
.footer__col h3{display:flex;align-items:center;gap:.5rem;min-height:30px;margin:0 0 .9rem;font-size:.95rem;line-height:1.3;font-weight:600;color:#fff;white-space:nowrap}
.footer__col h3 img{flex:none;width:26px;height:26px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.footer__col ul{display:grid;gap:.15rem}
.footer__col a{position:relative;display:inline-block;padding:.28rem 0;color:#aebbe6;line-height:1.4;transition:color .25s,transform .25s var(--ease)}
.footer__col a:hover{color:var(--gold);transform:translateX(4px)}
.footer__col--rent h3 img{box-shadow:0 0 0 2px #9fb2f5}.footer__col--gate h3 img{box-shadow:0 0 0 2px #7fdcef}.footer__col--design h3 img{box-shadow:0 0 0 2px #c4a6ff}
.footer__panel :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* bottom row */
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.4rem;margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem}
.footer__copy,.footer__tag{margin:0}
.footer__tag{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;color:#8fa0d6}
.footer__tag i{width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* tablet and small laptops: brand across the top, then the three hubs, then "What We Do" and "Quick Links" side by side
   (a 6-column grid, so every row lines up and nothing is crowded) */
@media (max-width:1179px){
  .footer__grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:2rem 1.6rem}
  .footer__brandcol{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:2rem;row-gap:.9rem;align-items:center}
  .footer__brand{grid-column:1}
  .footer__about{grid-column:2;margin:0;max-width:60ch}
  .footer__social,.footer__contact{grid-column:1/-1;margin-top:0}
  .footer__cta{grid-column:1/-1;justify-self:start;margin-top:.2rem}
  .footer__col--rent,.footer__col--gate,.footer__col--design{grid-column:span 2}
  .footer__col--services,.footer__col--links{grid-column:span 3}
  .footer__col--services ul,.footer__col--links ul{grid-template-columns:1fr 1fr;column-gap:1.4rem}
}
/* small tablets and phones */
@media (max-width:760px){
  .footer__brandcol{display:flex}
  .footer__about{max-width:none;margin-top:.1rem}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1.2rem}
  .footer__col--rent,.footer__col--gate,.footer__col--design,.footer__col--services{grid-column:auto}
  .footer__col--links{grid-column:1/-1}
  .footer__col--services ul{grid-template-columns:1fr}
  .footer__col--links ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .footer__panel{padding-top:2.6rem;border-radius:28px 28px 0 0}
  .footer__col h3{font-size:.92rem;margin-bottom:.7rem;white-space:normal}
  .footer__col a{font-size:.86rem;padding:.34rem 0}
  .footer__col--links ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__bottom{flex-direction:column;align-items:flex-start;margin-top:1.8rem}
}
@media (prefers-reduced-motion:reduce){
  .footer__col a,.footer__social a{transition:none}
  .footer__col a:hover,.footer__social a:hover{transform:none}
}

/* =========================================================
   Services dropdown (header) + the three service pages
   ========================================================= */

/* ---------- header dropdown ---------- */
.svcnav{position:relative}
.svcnav__btn{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem 0;border:0;background:none;font:inherit;font-size:.92rem;font-weight:500;color:#d6defa;cursor:pointer;position:relative;transition:color .25s}
.svcnav__btn::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--gold);transition:width .3s var(--ease)}
.svcnav__btn:hover,.svcnav__btn.is-active,.svcnav.is-open .svcnav__btn{color:#fff}
.svcnav__btn:hover::after,.svcnav__btn.is-active::after,.svcnav.is-open .svcnav__btn::after{width:100%}
.svcnav__btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.svcnav__chev{width:14px;height:14px;stroke-width:2.4;transition:transform .3s var(--ease)}
.svcnav.is-open .svcnav__chev{transform:rotate(180deg)}

.svcnav__menu{position:absolute;left:50%;top:calc(100% + 16px);width:min(380px,92vw);padding:.7rem;border-radius:20px;
  background:rgba(10,18,48,.97);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(216,182,120,.08);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s}
.svcnav__menu::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:rgba(10,18,48,.97);border-left:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14)}
.svcnav__menu::after{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}   /* hover bridge between button and panel */
.svcnav.is-open .svcnav__menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.svcnav__label{margin:.2rem .7rem .5rem;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.svcnav__menu ul{display:grid;gap:.3rem}
.nav__links .svcnav__menu a.svcitem{--c:#9fb2f5;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;width:auto;padding:.7rem .8rem;border:0;border-radius:14px;color:#fff;position:relative;transition:background .25s,transform .25s var(--ease)}
.nav__links .svcnav__menu a.svcitem::after{display:none}
.nav__links .svcnav__menu a.svcitem--gate{--c:#7fdcef}
.nav__links .svcnav__menu a.svcitem--design{--c:#c4a6ff}
.nav__links .svcnav__menu a.svcitem::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:var(--c);opacity:0;transition:opacity .25s}
.nav__links .svcnav__menu a.svcitem:hover,.nav__links .svcnav__menu a.svcitem:focus-visible,.nav__links .svcnav__menu a.svcitem[aria-current="page"]{background:rgba(255,255,255,.08)}
.nav__links .svcnav__menu a.svcitem:hover::before,.nav__links .svcnav__menu a.svcitem:focus-visible::before,.nav__links .svcnav__menu a.svcitem[aria-current="page"]::before{opacity:1}
.nav__links .svcnav__menu a.svcitem:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.svcitem img{width:40px;height:40px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.svcitem__t b{display:block;font-size:.95rem;font-weight:600;line-height:1.3}
.svcitem__t em{display:block;margin-top:.1rem;font-style:normal;font-size:.76rem;line-height:1.4;color:#aebbe6}
.svcitem>svg{width:16px;height:16px;stroke:var(--c);stroke-width:2.2;opacity:.6;transition:transform .25s var(--ease),opacity .25s}
.svcitem:hover>svg,.svcitem:focus-visible>svg{transform:translateX(3px);opacity:1}

@media (max-width:820px){
  .svcnav{width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .svcnav__btn{width:100%;justify-content:space-between;padding:.9rem 0;font-size:.92rem}
  .svcnav__btn::after{display:none}
  .svcnav__menu{position:static;width:auto;padding:0 0 .6rem;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;
    opacity:1;visibility:visible;transform:none;transition:none;display:none}
  .svcnav__menu::before,.svcnav__menu::after{display:none}
  .svcnav.is-open .svcnav__menu{display:block;transform:none}
  .svcnav__label{display:none}
  .nav__links .svcnav__menu a.svcitem{padding:.7rem .6rem;border-bottom:0}
}

/* ---------- service pages ---------- */
.svc-page{background:#fff}
.svc-hero{position:relative;overflow:hidden;color:#fff;padding:136px 0 5rem;background:linear-gradient(180deg,#0a1230,#101f4d 62%,#16306a)}
.svc-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 420px at 82% 18%,rgba(var(--cr),.22),transparent 70%),radial-gradient(520px 360px at 0 100%,rgba(216,182,120,.12),transparent 70%)}
.svc-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.svc-hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:3.5rem;align-items:center}
.svc-crumbs ol{display:flex;flex-wrap:wrap;gap:.2rem .5rem;font-size:.82rem;color:#aebbe6}
.svc-crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.svc-crumbs a:hover{color:var(--gold)}
.svc-crumbs [aria-current]{color:#fff}
.svc-hero :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.svc-brand{display:flex;align-items:center;gap:.8rem;margin:1.6rem 0 0;font-size:1.05rem;font-weight:600}
.svc-brand img{width:52px;height:52px;border-radius:14px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 14px 28px -12px rgba(var(--cr),.6)}
.svc-eyebrow{margin:1.1rem 0 0;font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.svc-title{margin:.7rem 0 0;font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.08;font-weight:700;letter-spacing:-.02em}
.svc-title .ln{display:block}
.svc-title b{background:linear-gradient(95deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-tag{margin:1.2rem 0 0;font-size:1.15rem;font-weight:600;color:var(--c)}
.svc-desc{margin:.8rem 0 0;max-width:56ch;color:#c6d1f3;line-height:1.75}
.svc-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.svc-visual{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:16/11;background:#0a1230;border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 80px -34px rgba(0,0,0,.85),0 0 70px -14px rgba(var(--cr),.4)}
.svc-visual>img{width:100%;height:100%;object-fit:cover}
.svc-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(10,18,48,.75))}
.svc-visual__chip{position:absolute;z-index:1;left:1rem;bottom:1rem;display:flex;align-items:center;gap:.6rem;padding:.4rem .9rem .4rem .45rem;border-radius:999px;background:rgba(10,18,48,.7);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);font-size:.82rem;font-weight:600}
.svc-visual__chip img{width:30px;height:30px;border-radius:50%;object-fit:cover}

/* what we offer */
.svc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.svc-list li{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.2rem;border-radius:16px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--c2);box-shadow:0 14px 34px -26px rgba(14,26,64,.5);font-weight:600;color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s}
.svc-list li:hover{transform:translateY(-3px);box-shadow:0 22px 40px -24px rgba(var(--cr),.7)}
.svc-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--c2) 12%,#fff);color:var(--c2)}
.svc-ico svg{width:20px;height:20px}

/* how it works */
.svc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;counter-reset:s}
.svc-steps li{position:relative;padding:1.6rem 1.4rem;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -30px rgba(14,26,64,.5)}
.svc-steps li:not(:last-child)::after{content:"";position:absolute;top:2.9rem;right:-1.2rem;width:1.2rem;height:2px;background:linear-gradient(90deg,var(--c2),transparent)}
.svc-step__ico{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:linear-gradient(140deg,var(--c2),color-mix(in srgb,var(--c2) 55%,#0e1a40));color:#fff;box-shadow:0 14px 26px -14px var(--c2)}
.svc-step__ico svg{width:24px;height:24px}
.svc-steps small{display:block;margin-top:1.1rem;font-size:.7rem;font-weight:600;letter-spacing:.16em;color:var(--c2)}
.svc-steps h3{margin:.3rem 0 0;font-size:1.1rem;line-height:1.3;color:var(--ink)}
.svc-steps p{margin:.5rem 0 0;font-size:.9rem;line-height:1.65;color:var(--muted)}
.svc-note{max-width:62ch;margin:2.2rem auto 0;text-align:center;color:var(--muted)}

/* other hubs */
.svc-others{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.svc-other{display:grid;grid-template-columns:auto 1fr;gap:1.1rem 1.2rem;align-items:center;padding:1.5rem;border-radius:22px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--c2);box-shadow:0 18px 40px -30px rgba(14,26,64,.5);transition:transform .4s var(--ease),box-shadow .4s}
.svc-other:hover,.svc-other:focus-visible{transform:translateY(-4px);box-shadow:0 30px 54px -28px rgba(var(--cr),.7)}
.svc-other:focus-visible{outline:2px solid var(--c2);outline-offset:3px}
.svc-other>img{width:64px;height:64px;border-radius:18px;object-fit:cover;box-shadow:0 12px 24px -12px var(--c2)}
.svc-other__t b{display:block;font-size:1.15rem;color:var(--ink);line-height:1.3}
.svc-other__t em{display:block;margin-top:.15rem;font-style:normal;font-size:.86rem;font-weight:500;color:var(--c2)}
.svc-other__t small{display:block;margin-top:.45rem;font-size:.8rem;color:var(--muted);line-height:1.5}
.svc-other__go{grid-column:1/-1;display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9rem;color:var(--c2)}
.svc-other__go svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.svc-other:hover .svc-other__go svg{transform:translateX(5px)}

/* closing call to action */
.svc-final{padding:clamp(3.5rem,7vw,5.5rem) 0;background:linear-gradient(120deg,#0a1230,#16275a)}
.svc-final::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 260px at 0 0,rgba(var(--cr),.2),transparent 70%),radial-gradient(420px 240px at 100% 100%,rgba(216,182,120,.14),transparent 70%)}
.svc-final__in{position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.8rem}
.svc-final .h2{margin-bottom:.5rem}
.svc-final .lead{margin:0}
.svc-final__btns{display:flex;flex-wrap:wrap;gap:1rem}
.svc-final :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

@media (max-width:1000px){
  .svc-hero{padding:120px 0 3.5rem}
  .svc-hero__in{grid-template-columns:1fr;gap:2.4rem}
  .svc-visual{max-width:640px}
  .svc-steps{grid-template-columns:1fr 1fr}
  .svc-steps li::after{display:none}
}
@media (max-width:640px){
  .svc-others{grid-template-columns:1fr}
  .svc-steps{grid-template-columns:1fr}
  .svc-list{grid-template-columns:1fr}
  .svc-cta .btn,.svc-final__btns .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .svcnav__menu,.svcnav__chev,.svcitem>svg,.svc-list li,.svc-other,.svc-other__go svg{transition:none}
  .svc-list li:hover,.svc-other:hover{transform:none}
}


/* =========================================================
   "What We Do" dropdown (six items) + the six service pages
   ========================================================= */
.svc-page{--c:#d8b678;--c2:#3f55a5;--cr:216,182,120;--g1:#f3dfae;--g2:#d8b678}

/* dropdown: two columns on desktop, one on mobile */
.svcnav__menu--six{width:min(640px,92vw)}
.svcnav__menu--six ul{grid-template-columns:1fr 1fr}
.nav__links .svcnav__menu a.svcitem--six{--c:#d8b678;grid-template-columns:auto 1fr auto}
.svcitem__ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(216,182,120,.12);border:1px solid rgba(216,182,120,.28);color:#d8b678}
.svcitem__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.svcitem--six .svcitem__t b{font-size:.9rem}
@media (max-width:820px){
  .svcnav__menu--six ul{grid-template-columns:1fr}
}

/* ---------- Who We Are dropdown ---------- */
.aboutnav{position:relative}
.aboutnav__btn{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem 0;border:0;background:none;font:inherit;font-size:.92rem;font-weight:500;color:#d6defa;cursor:pointer;transition:color .2s}
.aboutnav__btn:hover,.aboutnav.is-open .aboutnav__btn{color:#fff}
.aboutnav__btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .25s}
.aboutnav.is-open .aboutnav__btn svg{transform:rotate(180deg)}
.aboutnav__btn:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.aboutnav__menu{position:absolute;left:50%;top:calc(100% + 16px);width:min(300px,90vw);padding:.55rem;border-radius:16px;background:rgba(10,18,48,.98);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 54px -20px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.aboutnav__menu::before{content:"";position:absolute;left:50%;top:-6px;width:11px;height:11px;transform:rotate(45deg);background:#0a1230;border-left:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14)}
.aboutnav.is-open .aboutnav__menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.nav__links .aboutnav__menu a{display:block;padding:.65rem .75rem;border-radius:11px;color:#fff;font-weight:600}
.nav__links .aboutnav__menu a::after{display:none}
.nav__links .aboutnav__menu a:hover,.nav__links .aboutnav__menu a:focus-visible{background:rgba(255,255,255,.08);outline:none}
.aboutnav__menu span{display:block;margin-top:.12rem;color:#aebbe6;font-size:.72rem;font-weight:400}
@media(max-width:820px){
  .aboutnav{width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .aboutnav__btn{width:100%;justify-content:space-between;padding:.9rem 0}
  .aboutnav__menu{position:static;width:auto;padding:0 0 .55rem;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;opacity:1;visibility:visible;transform:none;transition:none;display:none}
  .aboutnav__menu::before{display:none}
  .aboutnav.is-open .aboutnav__menu{display:block}
}

/* ---------- Team page ---------- */
.team-page{background:#f6f7fb}
.team-hero{position:relative;overflow:hidden;padding:142px 0 5rem;color:#fff;background:linear-gradient(145deg,#0a1230,#17295f 70%,#203b77)}
.team-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 82% 20%,rgba(216,182,120,.18),transparent 36%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,54px 54px,54px 54px;mask-image:linear-gradient(#000,transparent 95%)}
.team-hero__in{position:relative;max-width:880px;text-align:center}
.team-hero__eyebrow{display:inline-flex;align-items:center;gap:.55rem;color:var(--gold);font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.team-hero__eyebrow::before,.team-hero__eyebrow::after{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.team-hero h1{margin:1rem 0 .8rem;font-size:clamp(2.5rem,6vw,5rem);line-height:1.04;letter-spacing:-.04em}
.team-hero h1 span{color:var(--gold)}
.team-hero p{max-width:650px;margin:0 auto;color:#d6defa;font-size:1.02rem;line-height:1.8}
.team-section{padding:clamp(3.5rem,7vw,6rem) 0}
.team-section__head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.team-section__head h2{margin:0;color:var(--ink);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.2}
.team-section__head p{max-width:44ch;margin:0;color:var(--muted);font-size:.9rem;line-height:1.7}
.team-demo-note{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.4rem;padding:.55rem .8rem;border:1px solid rgba(193,154,82,.28);border-radius:999px;background:#fff8e9;color:#695229;font-size:.76rem;font-weight:500}
.team-demo-note svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.team-card{overflow:hidden;border:1px solid #e6e9f1;border-radius:20px;background:#fff;box-shadow:0 16px 40px -32px rgba(14,26,64,.55);transition:transform .3s var(--ease),box-shadow .3s}
.team-card:hover{transform:translateY(-5px);box-shadow:0 24px 44px -30px rgba(14,26,64,.52)}
.team-card__photo{position:relative;aspect-ratio:4/4.2;overflow:hidden;background:linear-gradient(145deg,#e7ebf5,#d5ddef)}
.team-card__photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.team-card:hover .team-card__photo img{transform:scale(1.035)}
.team-card__photo::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(10,18,48,.26));pointer-events:none}
.team-card__body{padding:1rem 1rem 1.15rem}
.team-card__body small{color:#9a7a42;font-size:.65rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.team-card__body h3{margin:.28rem 0 .18rem;color:var(--ink);font-size:1rem;line-height:1.35}
.team-card__body p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.5}
.team-bottom{padding:0 0 clamp(3rem,6vw,5rem)}
.team-bottom__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:2rem 2.2rem;border:1px solid rgba(216,182,120,.25);border-radius:24px;background:linear-gradient(120deg,#0a1230,#17295f);color:#fff}
.team-bottom h2{margin:0 0 .35rem;font-size:clamp(1.25rem,2.5vw,1.8rem)}
.team-bottom p{margin:0;color:#c6d1f3;font-size:.9rem}
.team-page :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:1000px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.team-section__head{align-items:flex-start;flex-direction:column;gap:.7rem}}
@media(max-width:560px){.team-grid{gap:.7rem}.team-card__body{padding:.8rem}.team-card__body h3{font-size:.88rem}.team-card__body p{font-size:.72rem}.team-bottom__inner{align-items:flex-start;flex-direction:column;padding:1.5rem}}
@media(prefers-reduced-motion:reduce){.aboutnav__btn svg,.aboutnav__menu,.team-card,.team-card__photo img{transition:none}.team-card:hover,.team-card:hover .team-card__photo img{transform:none}}

/* hero art (no photo needed): icon medallion and the first three topics */
.svc-art{position:relative;display:grid;place-items:center;aspect-ratio:16/11;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(55% 60% at 50% 42%,rgba(216,182,120,.2),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:0 40px 80px -34px rgba(0,0,0,.8)}
.svc-art__ring{position:absolute;left:50%;top:44%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;border:1px solid rgba(216,182,120,.35);box-shadow:0 0 0 38px rgba(216,182,120,.05),0 0 0 39px rgba(216,182,120,.16)}
.svc-art__icon{position:relative;top:-14px;display:grid;place-items:center;width:124px;height:124px;border-radius:50%;background:linear-gradient(140deg,#f3dfae,#d8b678);color:#0e1a40;box-shadow:0 24px 50px -16px rgba(216,182,120,.8),inset 0 2px 0 rgba(255,255,255,.5)}
.svc-art__icon svg{width:58px;height:58px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc-art__chips{position:absolute;left:1rem;right:1rem;bottom:1.1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.svc-art__chips li{padding:.35rem .85rem;border-radius:999px;font-size:.76rem;font-weight:500;color:#e4e9fb;background:rgba(10,18,48,.6);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}

/* what it includes (title + one-line detail) */
.svc-list--rich li{align-items:flex-start}
.svc-list--rich .svc-ico{margin-top:.1rem}
.svc-list--rich b{display:block;font-weight:600;color:var(--ink)}
.svc-list--rich small{display:block;margin-top:.25rem;font-size:.84rem;line-height:1.6;font-weight:400;color:var(--muted)}

/* benefits reuse the step cards, without the connector line */
.svc-steps--benefits li::after{display:none}

/* clearly marked placeholder for details only the business can supply */
.svc-needs{max-width:820px;margin:0 auto;padding:2rem 2.2rem;border-radius:22px;background:linear-gradient(160deg,#fffaf0,#fff);border:2px dashed rgba(193,154,82,.7)}
.svc-needs__badge{display:inline-block;padding:.3rem .8rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4a3410;background:var(--gold)}
.svc-needs h2{margin:.9rem 0 0;font-size:clamp(1.25rem,2.3vw,1.6rem);line-height:1.3;color:var(--ink)}
.svc-needs p{margin:.5rem 0 0;color:var(--muted)}
.svc-needs ul{margin:1rem 0 0;display:grid;gap:.45rem}
.svc-needs li{position:relative;padding-left:1.4rem;font-size:.92rem;color:var(--ink)}
.svc-needs li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--gold-600)}

/* links to the other five services */
.svc-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.svc-chip{display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;border-radius:16px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--c2);box-shadow:0 14px 34px -26px rgba(14,26,64,.5);font-weight:600;color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s}
.svc-chip .svcitem__ico{background:color-mix(in srgb,var(--c2) 10%,#fff);border-color:transparent;color:var(--c2)}
.svc-chip>span:nth-child(2){flex:1}
.svc-chip>svg{width:18px;height:18px;color:var(--c2);transition:transform .3s var(--ease)}
.svc-chip:hover,.svc-chip:focus-visible{transform:translateY(-3px);box-shadow:0 22px 40px -24px rgba(14,26,64,.6)}
.svc-chip:hover>svg{transform:translateX(4px)}
.svc-chip:focus-visible{outline:2px solid var(--c2);outline-offset:3px}
@media (max-width:640px){.svc-needs{padding:1.5rem 1.3rem}.svc-art__ring{width:190px;height:190px;margin:-95px 0 0 -95px}}
@media (prefers-reduced-motion:reduce){.svc-chip,.svc-chip>svg{transition:none}.svc-chip:hover{transform:none}}

/* =========================================================
   Header with two dropdowns: the bar switches to the mobile menu a little earlier (<=1080px)
   so "Who We Are" and "What We Do" never crowd the logo
   ========================================================= */
.svcnav__menu--who{width:min(380px,92vw)}
.svcnav__menu--who ul{grid-template-columns:1fr}
@media (min-width:1081px) and (max-width:1279px){ .nav__links{gap:1.4rem} }
@media (max-width:1080px){
  .nav__toggle{display:block}
  .nav__links{
    position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;padding:1rem 6% 1.6rem;background:rgba(10,18,48,.97);backdrop-filter:blur(14px);
    transform:translateY(-120%);box-shadow:0 20px 40px -20px #000;
    visibility:hidden;transition:transform .4s var(--ease),visibility 0s linear .4s;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;
  }
  .nav__links.open{transform:none;visibility:visible;transition-delay:0s}
  .nav__links a:not(.btn){width:100%;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav__links .btn{margin-top:1rem}
  .nav{background:rgba(10,18,48,.86);backdrop-filter:blur(14px)}
  .svcnav{width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
  .svcnav__btn{width:100%;justify-content:space-between;padding:.9rem 0;font-size:.92rem}
  .svcnav__btn::after{display:none}
  .svcnav__menu{position:static;width:auto;padding:0 0 .6rem;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;
    opacity:1;visibility:visible;transform:none;transition:none;display:none}
  .svcnav__menu::before,.svcnav__menu::after{display:none}
  .svcnav.is-open .svcnav__menu{display:block;transform:none}
  .svcnav__label{display:none}
  .nav__links .svcnav__menu a.svcitem{padding:.7rem .6rem;border-bottom:0}
  .svcnav__menu--six ul{grid-template-columns:1fr}
}

/* =========================================================
   Our Team page: demo notice, 8 profile cards
   ========================================================= */
.tm-lead__link{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;font-weight:600;font-size:.92rem;color:var(--gold)}
.tm-lead__link svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.tm-lead__link:hover svg{transform:translateX(4px)}

.tm-demo{display:flex;align-items:flex-start;gap:1rem;max-width:880px;margin:0 auto 2.4rem;padding:1rem 1.3rem;border-radius:16px;background:#fffaf0;border:2px dashed rgba(193,154,82,.75)}
.tm-demo__badge{flex:none;padding:.3rem .8rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4a3410;background:var(--gold)}
.tm-demo p{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink)}

.tm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.tm-card{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -30px rgba(14,26,64,.55);transition:transform .4s var(--ease),box-shadow .4s}
.tm-card:hover{transform:translateY(-5px);box-shadow:0 30px 54px -28px rgba(14,26,64,.65)}
.tm-card__img{position:relative;margin:0;aspect-ratio:4/5;background:var(--navy-800)}
.tm-card__img img{width:100%;height:100%;object-fit:cover}
.tm-card__demo{position:absolute;left:.8rem;top:.8rem;padding:.25rem .65rem;border-radius:999px;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4a3410;background:var(--gold);box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.tm-card__body{padding:1.1rem 1.2rem 1.3rem;border-top:3px solid var(--gold)}
.tm-card h3{margin:0;font-size:1.05rem;line-height:1.3;font-weight:700;color:var(--ink)}
.tm-card__role{margin:.2rem 0 0;font-size:.9rem;font-weight:500;color:var(--blue)}
.tm-card__div{display:flex;flex-direction:column;gap:.1rem;margin:.8rem 0 0;padding-top:.7rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.tm-card__div span{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

@media (max-width:1080px){.tm-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.tm-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}
@media (max-width:359px){.tm-grid{grid-template-columns:1fr}.tm-demo{flex-direction:column;gap:.6rem}}
@media (max-width:480px){.tm-demo{flex-direction:column;gap:.6rem}.tm-card__body{padding:.9rem .9rem 1rem}.tm-card h3{font-size:.95rem}.tm-card__role{font-size:.82rem}}
@media (prefers-reduced-motion:reduce){.tm-card,.tm-lead__link svg{transition:none}.tm-card:hover{transform:none}}

/* =========================================================
   About Company page
   ========================================================= */
.svc-art__icon--logo{background:none;box-shadow:none;width:150px;height:150px}
.svc-art__icon--logo img{width:132px;height:132px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(216,182,120,.8),0 0 0 10px rgba(216,182,120,.14),0 24px 50px -16px rgba(216,182,120,.6)}

.ab-overview{display:grid;grid-template-columns:1.25fr .75fr;gap:3.5rem;align-items:center}
.ab-overview .lead{max-width:62ch;margin-bottom:0}
.ab-facts{display:grid;gap:.9rem}
.ab-facts li{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.4rem;border-radius:18px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);box-shadow:0 16px 36px -28px rgba(14,26,64,.55)}
.ab-facts b{min-width:3.4rem;font-size:2rem;line-height:1;font-weight:700;color:var(--blue);letter-spacing:-.02em}
.ab-facts span{font-weight:500;color:var(--muted)}

.ab-purpose-sec{padding-top:0}
.ab-purpose{position:relative;overflow:hidden;padding:2.6rem 2.8rem;border-radius:28px;color:#fff;background:linear-gradient(135deg,var(--navy-900),var(--navy-700));box-shadow:0 34px 70px -34px rgba(10,18,48,.85)}
.ab-purpose::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 260px at 0 0,rgba(216,182,120,.2),transparent 70%),radial-gradient(420px 240px at 100% 100%,rgba(111,135,207,.26),transparent 70%)}
.ab-purpose::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold),transparent)}
.ab-purpose>*{position:relative}
.ab-purpose__tag{margin:0;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.ab-purpose h2{margin:.6rem 0 0;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.15;font-weight:700;letter-spacing:-.015em;background:linear-gradient(95deg,#fff,#f3dfae 70%,#d8b678);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-purpose p:not(.ab-purpose__tag){margin:1rem 0 0;max-width:70ch;color:#d6defa;line-height:1.75}
.ab-purpose :focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}

.ab-hubs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.ab-hub{--c2:#4a63c8;--cr:143,166,255;display:flex;flex-direction:column;gap:1.1rem;padding:1.6rem 1.5rem;border-radius:22px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--c2);box-shadow:0 18px 40px -30px rgba(14,26,64,.5);transition:transform .4s var(--ease),box-shadow .4s}
.ab-hub:hover{transform:translateY(-4px);box-shadow:0 30px 54px -28px rgba(var(--cr),.7)}
.ab-hub header{display:flex;align-items:center;gap:.9rem}
.ab-hub header img{flex:none;width:60px;height:60px;border-radius:16px;object-fit:cover;box-shadow:0 12px 24px -12px var(--c2)}
.ab-hub h3{margin:0;font-size:1.15rem;line-height:1.3;color:var(--ink)}
.ab-hub header p{margin:.15rem 0 0;font-size:.84rem;font-weight:500;color:var(--c2)}
.ab-hub ul{display:grid;gap:.5rem}
.ab-hub li{position:relative;padding-left:1.3rem;font-size:.9rem;color:var(--ink)}
.ab-hub li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--c2)}
.ab-hub__link{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.88rem;color:var(--c2)}
.ab-hub__link svg{flex:none;width:18px;height:18px;transition:transform .3s var(--ease)}
.ab-hub__link:hover svg{transform:translateX(4px)}
.ab-hub__link:focus-visible{outline:2px solid var(--c2);outline-offset:3px;border-radius:4px}

@media (max-width:1000px){
  .ab-overview{grid-template-columns:1fr;gap:2.2rem}
  .ab-facts{grid-template-columns:repeat(3,1fr)}
  .ab-facts li{flex-direction:column;align-items:flex-start;gap:.4rem;border-left:1px solid var(--line);border-top:4px solid var(--gold)}
  .ab-hubs{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .ab-facts{grid-template-columns:1fr}
  .ab-facts li{flex-direction:row;align-items:center;gap:1rem;border-top:1px solid var(--line);border-left:4px solid var(--gold)}
  .ab-hubs{grid-template-columns:1fr}
  .ab-purpose{padding:1.9rem 1.5rem}
}
@media (prefers-reduced-motion:reduce){.ab-hub,.ab-hub__link svg{transition:none}.ab-hub:hover{transform:none}}

/* Leadership page: initials medallion until a photo is supplied */
.svc-art__icon--mono span{font-size:2.6rem;font-weight:700;letter-spacing:.05em;color:#0e1a40}
.ld-message{padding-top:clamp(3rem,6vw,5rem)}

/* =========================================================
   Contact Us page
   ========================================================= */
.contact--page{padding-top:clamp(7.5rem,12vw,9rem)}
.svc-crumbs--light{margin-bottom:1.2rem}
.svc-crumbs--light ol{display:flex;flex-wrap:wrap;gap:.2rem .5rem;font-size:.82rem;color:#aebbe6}
.svc-crumbs--light li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.svc-crumbs--light a:hover{color:var(--gold)}
.svc-crumbs--light [aria-current]{color:#fff}
.svc-crumbs--light a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.contact__ph{margin-top:1.4rem;padding:1.1rem 1.3rem;border-radius:16px;border:2px dashed rgba(216,182,120,.6);background:rgba(216,182,120,.07);max-width:46ch}
.contact__ph[hidden]{display:none}
.contact__ph-badge{display:inline-block;padding:.25rem .7rem;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4a3410;background:var(--gold)}
.contact__ph p{margin:.6rem 0 0;font-size:.88rem;line-height:1.6;color:#d6defa}
.contact__ph code{padding:.1rem .4rem;border-radius:6px;background:rgba(255,255,255,.1);font-size:.85em}
.form select optgroup{font-style:normal;font-weight:600;color:#17204a}
.form select option{color:#17204a}

/* =========================================================
   Our Work / portfolio page (labelled placeholders until real projects are supplied)
   ========================================================= */
.pf-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:0 0 2rem}
.pf-filter__btn{padding:.6rem 1.2rem;border-radius:999px;border:1px solid var(--line);background:#fff;font:600 .86rem/1 "Poppins",sans-serif;color:var(--muted);cursor:pointer;transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.pf-filter__btn:hover{border-color:var(--blue);color:var(--blue)}
.pf-filter__btn.is-on{background:var(--navy-800);border-color:var(--navy-800);color:#fff;box-shadow:0 12px 24px -14px rgba(14,26,64,.8)}
.pf-filter__btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.pf-card[hidden]{display:none}
.pf-card{--c2:#4a63c8;--cr:143,166,255;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -30px rgba(14,26,64,.55);transition:transform .4s var(--ease),box-shadow .4s}
.pf-card--gate{--c2:#16a5c9;--cr:63,224,232}
.pf-card--design{--c2:#7b4fd1;--cr:183,139,255}
.pf-card:hover{transform:translateY(-5px);box-shadow:0 30px 54px -28px rgba(var(--cr),.7)}
.pf-card__img{position:relative;margin:0;aspect-ratio:16/10;display:grid;place-items:center;align-content:center;gap:.5rem;
  background:radial-gradient(60% 70% at 50% 40%,rgba(var(--cr),.28),transparent 70%),linear-gradient(150deg,var(--navy-900),var(--navy-700))}
.pf-card__img img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 16px 30px -12px rgba(0,0,0,.7)}
.pf-card__img figcaption{font-size:.74rem;font-weight:500;letter-spacing:.08em;color:#aebbe6}
.pf-card__badge{position:absolute;left:.8rem;top:.8rem;padding:.25rem .65rem;border-radius:999px;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4a3410;background:var(--gold)}
.pf-card__body{padding:1.2rem 1.3rem 1.4rem;border-top:3px solid var(--c2)}
.pf-card__cat{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c2)}
.pf-card h3{margin:.4rem 0 0;font-size:1.08rem;line-height:1.3;color:var(--ink)}
.pf-card__body p:not(.pf-card__cat){margin:.5rem 0 0;font-size:.9rem;line-height:1.6;color:var(--muted)}
.pf-card .pf-card__link{margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--line);font-size:.8rem;font-style:italic}

@media (max-width:1000px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pf-grid{grid-template-columns:1fr}.pf-filter{justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){.pf-card,.pf-filter__btn{transition:none}.pf-card:hover{transform:none}}

/* =========================================================
   Careers page
   ========================================================= */
.cr-empty{display:grid;justify-items:center;gap:.6rem;max-width:640px;margin:0 auto;padding:2.6rem 2rem;text-align:center;border-radius:26px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);box-shadow:0 24px 50px -34px rgba(14,26,64,.55)}
.cr-empty__ico{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(140deg,var(--navy-700),var(--blue));color:#fff;box-shadow:0 16px 28px -14px rgba(14,26,64,.8)}
.cr-empty__ico svg{width:30px;height:30px}
.cr-empty h3{margin:.6rem 0 0;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.25;color:var(--ink)}
.cr-empty p{margin:0 0 .8rem;color:var(--muted)}
@media (max-width:640px){.cr-empty{padding:2rem 1.3rem}}

/* =========================================================
   How We Work (homepage process section): step cards, clearer active step, calmer motion
   ========================================================= */
.how__link{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.how__link:hover{color:#fff}
.how__link:focus-visible,.tab:focus-visible,.replay:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.step.is-current .step__ico::after{animation:none;inset:-7px;opacity:1;border-color:rgba(216,182,120,.7);box-shadow:0 0 22px rgba(216,182,120,.4)}
.step small{font-size:.74rem}
.step h3{font-size:1.08rem;line-height:1.3}
.step p{font-size:.9rem}
.step .step__out,.step .step__confirm{margin-top:.8rem;padding:.5rem .75rem;border-radius:10px;font-size:.82rem;line-height:1.4;text-align:left}
.step .step__out{background:rgba(216,182,120,.1);border:1px solid rgba(216,182,120,.3);color:#f3dfae}
.step .step__confirm{border:1.5px dashed rgba(216,182,120,.7);color:#e6d3a6}
.step__out span,.step__confirm span{display:block;margin-bottom:.12rem;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.flow__static{margin-top:1.5rem;color:#c6d1f3;line-height:1.6}
.flow__static h3{margin:1.2rem 0 .4rem;color:#fff;font-size:1.05rem}
.flow__static ol{list-style:decimal;padding-left:1.3rem;display:grid;gap:.3rem}
@media (min-width:821px){
  .flow__track{top:56px}
  .step{padding:1.4rem 1rem 1.3rem;border:1px solid transparent;border-radius:20px;transition:opacity .7s var(--ease),background .7s,border-color .7s,transform .7s var(--ease)}
  .step.is-on{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
  .step.is-current{background:rgba(255,255,255,.08);border-color:rgba(216,182,120,.55);transform:translateY(-3px)}
}
@media (max-width:820px){
  .step .step__out,.step .step__confirm{grid-column:2}
  .step.is-current h3{color:var(--gold)}
}
@media (prefers-reduced-motion:reduce){
  .step,.step.is-current{transition:none;transform:none}
}

/* =========================================================
   How We Work: staggered entrance, scroll-driven timeline, per-hub visual, tab crossfade
   Motion is one-time and calm; with reduced motion, or without JavaScript, everything is simply shown.
   ========================================================= */

/* one-time staggered entrance (only hidden when JavaScript is running, so the section is never blank) */
.js .hw-item{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .hw-in .hw-item{opacity:1;transform:none;transition-delay:calc(var(--i,0) * .12s)}
.show-all .hw-item{opacity:1!important;transform:none!important}

/* timeline stage (the line + the four steps) */
.flow__stage{position:relative}
.flow__fill{transition:width .3s linear}
.flow__token{transition:left .3s linear}
.flow__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.4rem;margin-top:1.6rem}
.flow__foot .replay{margin:0}
.flow__cta svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.flow__cta:hover svg,.flow__cta:focus-visible svg{transform:translateX(4px)}
.flow__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.flow__static{margin-top:1.5rem}

/* tabs: gentle hover / focus motion */
.tab{transition:color .3s,transform .3s var(--ease)}
.tab:hover:not(.is-active){color:#fff;transform:translateY(-1px)}
.tab:active{transform:translateY(0)}

/* steps: emphasis when a step becomes active, inactive steps stay readable */
.step small{display:inline-block;justify-self:start;padding:.14rem .6rem;border-radius:999px;border:1px solid transparent;transition:background .5s,color .5s,border-color .5s}
.step.is-current small{background:var(--gold);color:#1b1b1b}
.step h3{color:#dfe6fb;transition:color .5s}
.step.is-current h3,.step.is-on h3{color:#fff}
.step.is-current p:not(.step__out):not(.step__confirm){color:#fff}
.step.is-current .step__ico{transform:scale(1.14)}
@media (min-width:821px){
  .step:hover{background:rgba(255,255,255,.07);border-color:rgba(216,182,120,.35);transform:translateY(-3px)}
  .step.is-current:hover{transform:translateY(-4px)}
}
@media (max-width:820px){
  /* the vertical line fills with the same progress value */
  .flow__steps::after{content:"";position:absolute;left:33px;top:34px;bottom:34px;width:2px;background:linear-gradient(180deg,var(--cyan),var(--gold));transform-origin:top;transform:scaleY(var(--fp,1));transition:transform .3s linear}
  .step.is-current small{margin-bottom:.2rem}
  .flow__visual{display:none}
}

/* service visual: a quiet illustration of the same four steps, advancing with the timeline */
.flow__visual{position:relative;max-width:1000px;margin:0 auto 1.2rem;border-radius:22px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));overflow:hidden}
.fv{display:none;width:100%;height:auto;--p:1;--fc:#8fa6ff}
.fv.is-active{display:block}
.fv--gate{--fc:#3fe0e8}
.fv--design{--fc:#b78bff}
.fv-bg rect{fill:rgba(255,255,255,.035);stroke:none}
.fv-base{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
.fv-prog{fill:none;stroke:var(--fc);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p));transition:stroke-dashoffset .3s linear;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--fc) 55%,transparent))}
.fv-ring{fill:#0e1a40;stroke:rgba(255,255,255,.26);stroke-width:2;transition:fill .5s,stroke .5s}
.fv-glyph{fill:none;stroke:#aebbe6;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.fv-node{transform-box:fill-box}
.fv-node:not(.is-on) .fv-ring{opacity:.9}
.fv-node.is-on .fv-ring{fill:#16275a;stroke:var(--fc)}
.fv-node.is-on .fv-glyph{stroke:#fff}
.fv-dot{fill:#fff;stroke:var(--fc);stroke-width:3;filter:drop-shadow(0 0 6px var(--fc));opacity:0;transition:opacity .4s}
.fv-dot.is-moving{opacity:1}
.fv-pop{fill:none;stroke:var(--fc);stroke-width:1.6;opacity:0;transition:opacity .6s}
.fv-pop.is-on{opacity:.9}
.fv-pop circle{fill:var(--fc);stroke:none}
.fv-pop path:last-child{stroke:#0e1a40}

/* Gate: a request travels along the line to a professional, then the service completes */
.fv-card rect,.fv-card path{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.6;stroke-linecap:round}
.fv-pkt{stroke:none;fill:var(--fc);filter:drop-shadow(0 0 6px var(--fc));opacity:0;transition:opacity .4s}
.fv-pkt.is-moving{opacity:1}
.fv-pulse{fill:none;stroke:var(--fc);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.fv-pulse.is-on{animation:fvPulse 1.4s ease-out 1}
@keyframes fvPulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.fv-arc{fill:none;stroke:var(--fc);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p3,1));opacity:.9;transition:stroke-dashoffset .3s linear}

/* Design: a brief becomes a concept, then a finished creative / software result */
.fv-art{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.3);stroke-width:2;transition:fill .6s,stroke .6s}
.fv-node.is-on .fv-art{stroke:var(--fc)}
.fv-line{fill:none;stroke:rgba(255,255,255,.4);stroke-width:2.4;stroke-linecap:round}
.fv-dash{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:4 4;stroke-linecap:round}
.fv-solid{fill:var(--fc);opacity:.85;stroke:none}
.fv-fill{fill:color-mix(in srgb,var(--fc) 20%,transparent)}
.fv-done{fill:color-mix(in srgb,var(--fc) 32%,#16275a)}
.fv-code{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fv-badge circle{fill:#3fe0a0;stroke:none}
.fv-badge path{fill:none;stroke:#07212a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fv-node:not(.is-on) .fv-solid,.fv-node:not(.is-on) .fv-badge,.fv-node:not(.is-on) .fv-code{opacity:.15}
.fv-node:not(.is-on) .fv-fill,.fv-node:not(.is-on) .fv-done{fill:rgba(255,255,255,.04)}
.fv-node .fv-solid,.fv-node .fv-badge,.fv-node .fv-code{transition:opacity .6s}

/* reduced motion: no movement, everything shown at once */
@media (prefers-reduced-motion:reduce){
  .js .hw-item{opacity:1;transform:none;transition:none}
  .tab,.step,.step small,.step h3,.flow__fill,.flow__token,.fv-prog,.fv-arc,.fv-ring,.fv-dot,.fv-pkt,.fv-pop,.flow__steps::after,.flow__cta svg{transition:none!important}
  .fv-pulse.is-on{animation:none}
  .tab:hover:not(.is-active),.step:hover{transform:none}
}

/* =========================================================
   Why Hub 360: calm staggered entrance, icon stroke draw-in, refined hover / focus
   One-time motion only. Reduced motion, touch, no JavaScript: everything is simply shown.
   ========================================================= */

/* entrance: a small rise + fade, a little after the heading */
.js .why__item.reveal{transform:translateY(16px);transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s),box-shadow .35s,border-color .35s}
.js .why__item.reveal.in{transform:none}
.js .why__item.reveal.done{transition-delay:0s,0s,0s,0s;transition-duration:.35s,.35s,.35s,.35s}

/* the icon tile settles in just after its card (animation ends back at the normal state, so hover is never blocked) */
@keyframes whyPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.js .why__item.in .why__ico{animation:whyPop .5s var(--ease) calc(var(--d,0s) + .12s) backwards}

/* icon strokes draw in once; afterwards the dash is removed so the finished icon is exactly the original */
.why--draw .why__ico svg *{stroke-dasharray:1;stroke-dashoffset:0}
.js .why--draw .why__item:not(.in) .why__ico svg *{stroke-dashoffset:1}
.why--draw .why__item.in .why__ico svg *{transition:stroke-dashoffset .85s var(--ease) calc(var(--d,0s) + .22s)}
.why--draw .why__item.done .why__ico svg *{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
.show-all .why--draw .why__ico svg *{stroke-dasharray:none!important;stroke-dashoffset:0!important}

/* hover and keyboard focus (focus-within: the cards hold no controls, so there are no extra tab stops) */
.why__item:hover,.why__item:focus-within,
.js .why__item.reveal.in:hover,.js .why__item.reveal.in:focus-within{
  transform:translateY(-6px);border-color:rgba(216,182,120,.75);
  box-shadow:0 24px 46px -24px rgba(14,26,64,.38),0 0 0 3px rgba(216,182,120,.16)}
.why__item:hover .why__ico,.why__item:focus-within .why__ico{
  background:linear-gradient(135deg,var(--blue),var(--gate));color:#fff;transform:translateY(-2px) scale(1.07);
  box-shadow:0 14px 24px -12px rgba(63,85,165,.75)}
.why__item:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* touch: no hover needed, a light press response instead */
@media (hover:none){
  .why__item:hover,.js .why__item.reveal.in:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .why__item:active{transform:scale(.99)}
}

@media (prefers-reduced-motion:reduce){
  .js .why__item.reveal,.js .why__item.reveal.in{opacity:1;transform:none;transition:none}
  .js .why__item.in .why__ico{animation:none}
  .why--draw .why__ico svg *{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important}
  .why__item:hover,.why__item:focus-within,.js .why__item.reveal.in:hover,.js .why__item.reveal.in:focus-within,
  .why__item:hover .why__ico,.why__item:focus-within .why__ico{transform:none}
}

/* =========================================================
   Why Hub 360, cinematic pass: masked heading (existing word reveal), cards that rise and settle from a slight
   perspective, a soft light sweep across each card, drawn icons, and a lifted hover / focus state.
   All of it plays once. Reduced motion and no-JS show everything immediately.
   ========================================================= */
.why{--k:1}

/* card entrance: fade + rise + settle from a slight angle (one after another, after the heading) */
.js .why__item.reveal{
  transform:perspective(1000px) translate3d(0,38px,-40px) rotateX(11deg) scale(.97);transform-origin:50% 100%;
  transition:opacity .9s var(--ease) calc(var(--d,0s) * var(--k)),transform 1.05s var(--ease) calc(var(--d,0s) * var(--k)),box-shadow .4s,border-color .4s}
.js .why__item.reveal.in{transform:perspective(1000px) translate3d(0,0,0) rotateX(0) scale(1)}
.js .why__item.reveal.done{transform:none;transition-delay:0s,0s,0s,0s;transition-duration:.4s,.4s,.4s,.4s}

/* keep the content above the light sweep */
.why__item>*{position:relative;z-index:1}

/* one soft light sweep across the card as it lands */
.why__item::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(216,182,120,.28) 46%,rgba(255,255,255,.85) 50%,rgba(143,166,255,.2) 54%,transparent 70%)}
.js .why__item.in::before{animation:whySweep 1.15s var(--ease) calc(var(--d,0s) * var(--k) + .55s) 1 both}
@keyframes whySweep{0%{opacity:0;transform:translateX(-120%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(120%)}}

/* icon tile and strokes follow the card (all finished before the card is marked "done") */
@keyframes whyPop{from{opacity:0;transform:scale(.8) translateY(6px)}to{opacity:1;transform:none}}
.js .why__item.in .why__ico{animation:whyPop .6s var(--ease) calc(var(--d,0s) * var(--k) + .15s) backwards}
.why--draw .why__item.in .why__ico svg *{transition:stroke-dashoffset .85s var(--ease) calc(var(--d,0s) * var(--k) + .25s)}

/* hover and keyboard focus: lift with a little perspective, deeper shadow, brighter border, coordinated icon tile */
.why__item:hover,.why__item:focus-within,
.js .why__item.reveal.in:hover,.js .why__item.reveal.in:focus-within{
  transform:perspective(1000px) translate3d(0,-8px,0) rotateX(1.6deg);border-color:rgba(216,182,120,.85);
  box-shadow:0 32px 58px -24px rgba(14,26,64,.45),0 0 0 3px rgba(216,182,120,.18)}
.why__item:hover .why__ico,.why__item:focus-within .why__ico{transform:translateY(-3px) scale(1.08);box-shadow:0 16px 26px -12px rgba(63,85,165,.8)}

/* touch and small screens: no hover, all content shown, a brief simple entrance */
@media (hover:none),(max-width:820px){
  .why{--k:.3}
  .js .why__item.reveal{transform:translateY(20px);transition-duration:.6s,.6s,.4s,.4s}
  .js .why__item.reveal.in{transform:none}
  .why__item::before{display:none}
}
@media (hover:none){
  .why__item:hover,.js .why__item.reveal.in:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .why__item:hover .why__ico{transform:none;box-shadow:none}
  .why__item:active{transform:scale(.99)}
}

@media (prefers-reduced-motion:reduce){
  .js .why__item.reveal,.js .why__item.reveal.in{opacity:1;transform:none;transition:none}
  .js .why__item.in .why__ico,.js .why__item.in::before{animation:none}
  .why__item::before{display:none}
  .why--draw .why__ico svg *{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important}
  .why__item:hover,.why__item:focus-within,.js .why__item.reveal.in:hover,.js .why__item.reveal.in:focus-within,
  .why__item:hover .why__ico,.why__item:focus-within .why__ico{transform:none}
}

/* =========================================================
   Founder: a brand medallion ringed by the three divisions (no photo exists, so no photo is implied; no sample data)
   The base styles are the finished state; the entrance only plays once when the visual scrolls in.
   ========================================================= */
.fo{position:relative;width:min(340px,86vw);aspect-ratio:1}
.fo__glow{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(216,182,120,.34),transparent 66%);opacity:.5}
.fo__rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fo__guide{fill:none;stroke:rgba(63,85,165,.14);stroke-width:1.5}
.fo__inner{fill:none;stroke:rgba(216,182,120,.5);stroke-width:1;stroke-dasharray:2 7;stroke-linecap:round}
.fo__arc{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:.31 .69}
.fo__orbit{position:absolute;inset:0}
.fo__dot{position:absolute;left:50%;top:8.75%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(216,182,120,.3),0 0 18px rgba(216,182,120,.7)}
.fo__sat{position:absolute;width:13.5%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:#fff;border:2px solid var(--c);color:var(--c);box-shadow:0 12px 24px -12px var(--c)}
.fo__sat svg{width:52%;height:52%}
.fo__medal{position:absolute;left:50%;top:50%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;overflow:hidden;
  background:linear-gradient(140deg,var(--navy-700),var(--blue) 62%,var(--gate));color:#fff;font-size:clamp(2.4rem,9vw,3.6rem);font-weight:700;letter-spacing:.05em;
  box-shadow:0 0 0 6px rgba(216,182,120,.2),0 0 0 7px rgba(216,182,120,.7),0 30px 56px -22px rgba(14,26,64,.75)}
.fo__medal::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%)}

/* entrance, once: rings draw, the orbit dot travels round and rests at the top, then a soft glow and a light sweep */
@keyframes foDraw{from{stroke-dasharray:0 1}}
@keyframes foOrbit{from{transform:rotate(-210deg)}}
@keyframes foMedal{from{opacity:0;transform:translate(-50%,-50%) scale(.84)}}
@keyframes foSat{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
@keyframes foGlow{from{opacity:0;transform:scale(.7)}40%{opacity:.85}}
@keyframes foSweep{0%{opacity:0;transform:translateX(-120%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(120%)}}
.js .founder__visual.in .fo__medal{animation:foMedal .9s var(--ease) .05s backwards}
.js .founder__visual.in .fo__medal::after{animation:foSweep 1.3s var(--ease) 1.5s 1 both}
.js .founder__visual.in .fo__arc{animation:foDraw 1.3s var(--ease) calc(.2s + var(--i) * .28s) backwards}
.js .founder__visual.in .fo__orbit{animation:foOrbit 2.4s cubic-bezier(.22,.8,.24,1) .45s backwards}
.js .founder__visual.in .fo__sat{animation:foSat .6s var(--ease) calc(1.2s + var(--i) * .16s) backwards}
.js .founder__visual.in .fo__glow{animation:foGlow 2s ease-out .9s backwards}

/* call to action: a refined entrance and a calm hover / focus response */
.js .founder__cta.reveal{transform:translateY(14px) scale(.97);transform-origin:left center}
.js .founder__cta.reveal.in{transform:none}
.founder__cta .btn{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s}
.founder__cta .btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.founder__cta .btn:hover,.founder__cta .btn:focus-visible{transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(14,26,64,.8),0 0 0 3px rgba(216,182,120,.45)}
.founder__cta .btn:hover svg,.founder__cta .btn:focus-visible svg{transform:translateX(4px)}
.founder__cta .btn:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

@media (max-width:560px){.fo{width:min(300px,84vw)}}
@media (prefers-reduced-motion:reduce){
  .js .founder__visual.in .fo__medal,.js .founder__visual.in .fo__medal::after,.js .founder__visual.in .fo__arc,
  .js .founder__visual.in .fo__orbit,.js .founder__visual.in .fo__sat,.js .founder__visual.in .fo__glow{animation:none}
  .js .founder__cta.reveal,.js .founder__cta.reveal.in{transform:none}
  .founder__cta .btn,.founder__cta .btn svg{transition:none}
  .founder__cta .btn:hover,.founder__cta .btn:focus-visible{transform:none}
}

/* =========================================================
   Our Divisions: balanced, aligned cards + a calm staggered entrance (no pointer tilt, no loops)
   ========================================================= */
.cards{align-items:stretch}
.card{padding:1.9rem 1.7rem 1.6rem;border-radius:24px}

/* header: logo, title and tagline sit in a fixed-height row, so every list starts on the same line */
.card__head{min-height:92px;margin-bottom:1.1rem;padding-bottom:1.15rem;border-bottom:1px solid var(--line)}
.card__head p{font-size:.84rem;color:#4f5878}
.card__logo{box-shadow:0 0 0 3px #fff,0 0 0 4px color-mix(in srgb,var(--c) 55%,transparent),0 10px 22px -10px rgba(14,26,64,.55)}
.card:hover .card__logo,.card:focus-within .card__logo{transform:scale(1.06)}

/* service list: the rows share the card's height, so short lists no longer leave a big gap above the link */
.check{display:flex;flex-direction:column;margin:0 0 1.2rem}
.check li{flex:1 1 auto;display:flex;align-items:center;padding:.5rem 0 .5rem 2rem;min-height:2.7rem;font-size:.95rem;line-height:1.4;color:var(--ink)}
.check li::before{top:50%;margin-top:-10px}
.check li:last-child{border-bottom:0}

/* link row: always at the bottom, divided from the list, with a small arrow response */
.card__link{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:auto;padding:.95rem 0 .1rem;border-top:1px solid var(--line);background:none;
  font-size:.92rem;letter-spacing:.01em;transition:color .3s}
.card__link:hover,.card__link:focus-visible{background:none}
.card__link svg{flex:none;transition:transform .35s var(--ease)}
.card__link:hover svg,.card__link:focus-visible svg{transform:translateX(5px)}
.card__link:focus-visible{outline:2px solid var(--ci,var(--c));outline-offset:4px;border-radius:6px}

/* entrance: a small rise; the colour bar draws in and the logo settles once */
.js .card.reveal{transform:translateY(26px);transition:opacity .75s var(--ease) var(--d,0s),transform .85s var(--ease) var(--d,0s),box-shadow .4s,border-color .4s}
.js .card.reveal.in{transform:none}
.js .card.reveal.done{transition-delay:0s,0s,0s,0s;transition-duration:.4s,.4s,.4s,.4s}
.card::before{transform-origin:left;transition:transform .9s var(--ease) calc(var(--d,0s) + .2s)}
.js .card.reveal:not(.in)::before{transform:scaleX(0)}
@keyframes cardLogoIn{from{opacity:0;transform:scale(.82)}}
.js .card.in .card__logo{animation:cardLogoIn .6s var(--ease) calc(var(--d,0s) + .15s) backwards}

/* hover and keyboard focus: a slight lift, a clearer border, a softer shadow */
.card:hover,.card:focus-within,.js .card.reveal.in:hover,.js .card.reveal.in:focus-within{
  transform:translateY(-6px);border-color:var(--c);box-shadow:0 28px 52px -26px rgba(14,26,64,.45)}
.card:hover .card__glow{opacity:.12}

/* touch screens: no hover state is needed */
@media (hover:none){
  .card:hover,.js .card.reveal.in:hover{transform:none;border-color:var(--line);box-shadow:0 14px 40px -24px rgba(14,26,64,.35)}
}

/* stacked layouts: natural height, no stretched rows */
@media (max-width:1000px){
  .card__head{min-height:0}
  .check li{flex:0 0 auto}
  .card{padding:1.7rem 1.4rem 1.4rem}
}

@media (prefers-reduced-motion:reduce){
  .js .card.reveal,.js .card.reveal.in{opacity:1;transform:none;transition:none}
  .js .card.reveal:not(.in)::before{transform:none}
  .card::before{transition:none}
  .js .card.in .card__logo{animation:none}
  .card:hover,.card:focus-within,.js .card.reveal.in:hover,.js .card.reveal.in:focus-within,.card:hover .card__logo{transform:none}
  .card__link svg{transition:none}
}

/* =========================================================
   How We Work, v3: a wide four-step timeline with uniform cards, one process line, a short summary.
   Everything is scoped to #how-we-work so no other section is touched.
   ========================================================= */
#how-we-work .tabs{margin-bottom:2.2rem}
#how-we-work .tab{transition:color .3s,transform .3s var(--ease)}
#how-we-work .tab:hover:not(.is-active){color:#fff;transform:translateY(-1px)}
#how-we-work .tab:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:999px}

#how-we-work .flow{max-width:1180px}

/* the process line (service-specific, aligned with the four cards below) */
#how-we-work .flow__visual{max-width:none;margin:0 0 1.1rem;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));overflow:hidden}
#how-we-work .fv-num{fill:#aebbe6;stroke:none;font:700 15px "Poppins",sans-serif;transition:fill .5s}
#how-we-work .fv-node.is-on .fv-num{fill:#fff}
#how-we-work .fv-ring{fill:#0e1a40;stroke:rgba(255,255,255,.28)}
#how-we-work .fv-node.is-on .fv-ring{fill:#16275a;stroke:var(--fc)}

/* four equal cards: same structure, same height, nothing dimmed */
#how-we-work .flow__stage{position:relative}
#how-we-work .flow__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:none}
#how-we-work .step{opacity:1;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;height:100%;text-align:left;padding:1.5rem 1.4rem 1.6rem;
  border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);
  transition:background .6s var(--ease),border-color .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
#how-we-work .step.is-on{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2)}
#how-we-work .step.is-current{background:rgba(216,182,120,.11);border-color:rgba(216,182,120,.7);transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(216,182,120,.6)}
#how-we-work .step__ico{width:50px;height:50px;margin:0;border-radius:15px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);color:#c6d1f3;transform:none;
  transition:background .5s,color .5s,border-color .5s,box-shadow .5s}
#how-we-work .step__ico svg{width:24px;height:24px}
#how-we-work .step.is-on .step__ico{background:linear-gradient(135deg,var(--blue),var(--gate));border-color:transparent;color:#fff;transform:none}
#how-we-work .step.is-current .step__ico{background:linear-gradient(135deg,#f3dfae,#d8b678);color:#0e1a40;box-shadow:0 12px 24px -10px rgba(216,182,120,.85);transform:none}
#how-we-work .step.is-current .step__ico::after{content:none}
#how-we-work .step__body{display:flex;flex-direction:column;gap:.45rem;min-width:0}
#how-we-work .step small{align-self:flex-start;margin:0;padding:.14rem .6rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--gold);background:rgba(216,182,120,.1);border:1px solid rgba(216,182,120,.3);transition:background .5s,color .5s}
#how-we-work .step.is-current small{background:var(--gold);color:#1b1b1b;border-color:var(--gold)}
#how-we-work .step h3{margin:0;font-size:1.12rem;line-height:1.3;font-weight:600;color:#fff}
#how-we-work .step p{margin:0;font-size:.93rem;line-height:1.65;color:#d3dbf3}
#how-we-work .step:hover{border-color:rgba(216,182,120,.55);background:rgba(255,255,255,.09)}
#how-we-work .step.is-current:hover{background:rgba(216,182,120,.14)}

/* short service summary */
#how-we-work .flow__summary{display:flex;align-items:flex-start;gap:1.1rem;margin-top:1.3rem;padding:1.15rem 1.4rem;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045)}
#how-we-work .flow__tag{flex:none;padding:.28rem .8rem;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1b1b1b;background:var(--gold)}
#how-we-work .flow__sumtext{min-width:0;flex:1}
#how-we-work .flow__note{margin:0;max-width:72ch;padding:0;border:0;background:none;text-align:left;font-size:.98rem;line-height:1.65;color:#d3dbf3}
#how-we-work .flow__confirm{margin:.8rem 0 0;padding:.55rem .85rem;max-width:72ch;border:1.5px dashed rgba(216,182,120,.7);border-radius:10px;font-size:.84rem;line-height:1.5;color:#e6d3a6}
#how-we-work .flow__confirm[hidden]{display:none}
#how-we-work .flow__confirm span{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* tablet: the process line stays as an overview strip, the cards become a roomy 2 x 2 grid */
@media (max-width:1100px) and (min-width:821px){
  #how-we-work .flow__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* mobile: a clean vertical timeline with a visible connector that fills with the progress */
@media (max-width:820px){
  #how-we-work .flow__visual{display:none}
  #how-we-work .flow__steps{grid-template-columns:1fr;gap:0;position:relative}
  #how-we-work .flow__steps::before{content:"";position:absolute;left:24px;top:26px;bottom:26px;width:2px;background:rgba(255,255,255,.16)}
  #how-we-work .flow__steps::after{content:"";position:absolute;left:24px;top:26px;bottom:26px;width:2px;background:linear-gradient(180deg,var(--cyan),var(--gold));transform-origin:top;transform:scaleY(var(--fp,1));transition:transform .3s linear}
  #how-we-work .step{display:grid;grid-template-columns:50px 1fr;column-gap:1rem;align-items:start;height:auto;padding:0 0 1.6rem;border:0;background:none;box-shadow:none;transform:none}
  #how-we-work .step:last-child{padding-bottom:0}
  #how-we-work .step.is-on,#how-we-work .step.is-current,#how-we-work .step:hover{background:none;border-color:transparent;transform:none;box-shadow:none}
  #how-we-work .step__ico{position:relative;z-index:1}
  #how-we-work .step.is-current h3{color:var(--gold)}
  #how-we-work .flow__summary{flex-direction:column;gap:.7rem;padding:1.1rem}
}

@media (prefers-reduced-motion:reduce){
  #how-we-work .tab,#how-we-work .step,#how-we-work .step__ico,#how-we-work .step small{transition:none}
  #how-we-work .tab:hover:not(.is-active),#how-we-work .step.is-current{transform:none}
}

/* =========================================================
   Contact page: details area, form and a location map (all hidden or placeholder until configured)
   ========================================================= */
.ct__head{max-width:760px;margin-bottom:2.4rem}
.ct__head .eyebrow{margin-bottom:.8rem}
.ct__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2.6rem;align-items:start}
.ct__h{margin:0 0 1.1rem;font-size:1.15rem;font-weight:600;color:#fff}
.ct__list{display:grid;gap:.8rem}
.ct__list[hidden]{display:none}
.ct__item{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.2rem;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:border-color .3s,background .3s}
.ct__item:hover,.ct__item:focus-within{border-color:rgba(216,182,120,.55);background:rgba(255,255,255,.09)}
.ct__item .ci{flex:none}
.ct__item div{min-width:0}
.ct__item small{display:block;margin-bottom:.15rem;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ct__item a,.ct__item span{color:#fff;font-size:1rem;line-height:1.55;word-break:break-word}
.ct__item a{display:inline-block;padding:.3rem 0}
.ct__item a:hover{color:var(--gold)}
.ct__item a:focus-visible,.ct__dir:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.ct__dir{display:inline-block;margin-left:.5rem;font-size:.86rem!important;font-weight:600;color:var(--gold)!important;text-decoration:underline;text-underline-offset:3px}
.ct__social{margin-top:1.3rem}
.ct__social[hidden]{display:none}
.ct__social small{display:block;margin-bottom:.5rem;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ct__social ul{display:flex;flex-wrap:wrap;gap:.5rem}
.ct__social a{display:inline-block;padding:.45rem .95rem;border-radius:999px;font-size:.88rem;font-weight:500;color:#fff;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);transition:background .3s,color .3s,border-color .3s}
.ct__social a:hover{background:var(--gold);border-color:var(--gold);color:#0e1a40}
.ct__social a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* map card */
.ct__map{margin-top:2.8rem;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));box-shadow:0 30px 60px -36px rgba(0,0,0,.8)}
.ct__maphead{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.4rem;flex-wrap:wrap;padding:1.2rem 1.5rem}
.ct__maphead h2{margin:0;font-size:1.15rem;font-weight:600;color:#fff}
.ct__maphead p{margin:.2rem 0 0;max-width:60ch;font-size:.92rem;line-height:1.55;color:#c6d1f3}
.ct__maphead [hidden],.ct__frame[hidden],.ct__mapph[hidden]{display:none}
.ct__frame{position:relative;height:clamp(280px,42vw,420px);background:#0e1a40}
.ct__frame iframe{display:block;width:100%;height:100%;border:0}
.ct__mapph{padding:1.6rem 1.5rem 1.8rem;border-top:1px solid rgba(255,255,255,.1)}
.ct__mapph p{margin:.7rem 0 0;max-width:60ch;font-size:.92rem;line-height:1.6;color:#d6defa}
.ct__mapph code{padding:.1rem .4rem;border-radius:6px;background:rgba(255,255,255,.1);font-size:.85em}

@media (max-width:1000px){
  .ct__grid{grid-template-columns:1fr;gap:2.2rem}
}
@media (max-width:560px){
  .ct__item{padding:.9rem 1rem}
  .ct__maphead{padding:1.1rem 1.1rem}
  .ct__maphead .btn{width:100%;justify-content:center}
  .ct__frame{height:300px}
}
@media (prefers-reduced-motion:reduce){.ct__item,.ct__social a{transition:none}}

/* =========================================================
   Footer "Policies" row + policy pages (readable legal layout, visible placeholders)
   ========================================================= */
.footer__policies{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:.1rem 1.5rem;padding:0 0 .9rem;margin-bottom:.3rem;border-bottom:1px dashed rgba(255,255,255,.12)}
.footer__policies span{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.footer__policies a{padding:.4rem 0;color:#aebbe6;transition:color .25s}
.footer__policies a:hover{color:var(--gold)}
.footer__policies a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.pol__hero{position:relative;overflow:hidden;color:#fff;padding:128px 0 2.6rem;background:linear-gradient(180deg,#0a1230,#101f4d 70%,#16306a)}
.pol__hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px 300px at 85% 0,rgba(216,182,120,.16),transparent 70%)}
.pol__hero .wrap{position:relative}
.pol__hero h1{margin:1.2rem 0 0;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.12;font-weight:700;letter-spacing:-.015em}
.pol__intro{margin:1rem 0 0;max-width:68ch;font-size:1.05rem;line-height:1.75;color:#c6d1f3}
.pol__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.4rem 0 0;font-size:.86rem;color:#aebbe6}
.pol__hero :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.pol__wrap{padding-top:2.2rem;padding-bottom:3.5rem}
.pol__review{margin:0 0 2.2rem;padding:1rem 1.3rem;border-radius:16px;border:2px dashed rgba(193,154,82,.75);background:#fffaf0;font-size:.92rem;line-height:1.65;color:var(--ink)}
.pl{padding:.05rem .4rem;border-radius:6px;border:1px dashed rgba(193,154,82,.9);background:rgba(216,182,120,.22);color:#5a4010;font-weight:500}
.pol__layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:3rem;align-items:start}
.pol__toc{position:sticky;top:96px;padding:1.2rem 1.2rem 1.3rem;border-radius:18px;background:var(--tint);border:1px solid var(--line)}
.pol__toc p{margin:0 0 .6rem;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.pol__toc ol{list-style:decimal;padding-left:1.2rem;display:grid;gap:.1rem;font-size:.86rem}
.pol__toc a{display:inline-block;padding:.28rem 0;color:var(--ink)}
.pol__toc a:hover{color:var(--blue);text-decoration:underline}
.pol__toc a:focus-visible,.pol__content a:focus-visible,.pol__more a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.pol__content section{padding-top:.3rem}
.pol__content h2{margin:2.2rem 0 .7rem;padding-top:.4rem;font-size:1.4rem;line-height:1.3;font-weight:700;color:var(--ink);scroll-margin-top:96px}
.pol__content section:first-child h2{margin-top:0}
.pol__content h3{margin:1.4rem 0 .4rem;font-size:1.08rem;color:var(--ink)}
.pol__content p,.pol__content ul{max-width:72ch;margin:0 0 1rem;font-size:1rem;line-height:1.8;color:#3b4366}
.pol__content ul{list-style:disc;padding-left:1.4rem;display:block}
.pol__content li{margin-bottom:.4rem}
.pol__content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.pol__content strong{color:var(--ink)}
.pol__more{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.pol__more h2{margin:0 0 1rem;font-size:1.2rem;color:var(--ink)}
.pol__more ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.pol__more a{display:block;height:100%;padding:1.1rem 1.2rem;border-radius:16px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);transition:transform .3s var(--ease),box-shadow .3s}
.pol__more a:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(14,26,64,.5)}
.pol__more b{display:block;font-size:1rem;color:var(--ink)}
.pol__more span{display:block;margin-top:.25rem;font-size:.86rem;line-height:1.5;color:var(--muted)}

@media (max-width:1000px){
  .pol__layout{grid-template-columns:1fr;gap:1.6rem}
  .pol__toc{position:static}
  .pol__toc ol{grid-template-columns:1fr 1fr;column-gap:1.6rem}
  .pol__more ul{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pol__hero{padding-top:112px}
  .pol__toc ol{grid-template-columns:1fr}
  .pol__review{padding:.9rem 1rem}
}
@media (prefers-reduced-motion:reduce){.pol__more a,.footer__policies a{transition:none}.pol__more a:hover{transform:none}}
.pol__hero .pl{background:rgba(216,182,120,.18);border-color:rgba(216,182,120,.8);color:#f3dfae}

/* Accessibility (audit): Gate Hub accent text on white cards darkened to reach 4.5:1; borders, dots and shadows keep the original accent */
.ab-hub:nth-child(2) header p,.ab-hub:nth-child(2) .ab-hub__link,.pf-card--gate .pf-card__cat{color:#0f7a96}

/* Admin-managed content (public-content.js): initials when a team member has no photo, real project images, project links */
.tm-card__initials{display:grid;place-items:center;width:100%;height:100%;font-size:3.2rem;font-weight:700;color:var(--gold);background:linear-gradient(140deg,var(--navy-700),var(--blue))}
.pf-card__img--photo{overflow:hidden}
.pf-card__img--photo img{width:100%;height:100%;border-radius:0;box-shadow:none}
.pf-card a.pf-card__link{display:inline-block;font-style:normal;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.pf-card a.pf-card__link:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.tm-demo[hidden]{display:none}
.tm-grid{align-items:stretch}
/* Admin-managed team photos are square (1:1); older non-square uploads are cropped to match */
.tm-card--square .tm-card__img{position:relative;aspect-ratio:1/1;overflow:hidden}
.tm-card--square .tm-card__img img,.tm-card--square .tm-card__initials{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ct__item .ct__num{margin-left:.45rem;font-size:.9rem;font-weight:400;color:#c6d1f3}.ct__item a:hover .ct__num{color:inherit}

/* ---------- Floating WhatsApp button (bottom-right, every page). The back-to-top button sits just above it. ---------- */
.wa-float{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));z-index:89;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;text-decoration:none;color:#fff;background:#128c7e;
  box-shadow:0 0 0 3px #fff,0 12px 26px -8px rgba(5,60,50,.6);
  transition:transform .25s var(--ease),box-shadow .25s,background-color .25s}
.wa-float svg{width:28px;height:28px;stroke-width:1.9}
.wa-float:hover{background:#0e7569;transform:translateY(-2px);box-shadow:0 0 0 3px #fff,0 16px 30px -8px rgba(5,60,50,.65)}
.wa-float:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 6px #0a1230}
@media (max-width:560px){.wa-float{width:50px;height:50px;right:max(14px,env(safe-area-inset-right))}.wa-float svg{width:26px;height:26px}.totop{right:16px;bottom:max(84px,calc(env(safe-area-inset-bottom) + 76px))}}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}
@media print{.wa-float{display:none}}
/* keep the last footer lines clear of the floating WhatsApp and back-to-top buttons */
.footer__bottom{padding-bottom:5.5rem;padding-right:5rem}
@media (max-width:560px){.footer__bottom{padding-bottom:8.5rem;padding-right:0}}

/* ---------- footer alignment ----------
   Desktop: brand block on the left with the five link columns beside it, all starting on the same line; the contact
   details run across the full width underneath instead of stretching the brand column. Icons line up with their text. */
.footer__contact{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem 1.8rem}
.footer__contact li>span:last-child{padding-top:calc((30px - 1.5em) / 2);min-width:0;overflow-wrap:anywhere}
@media (min-width:1180px){
  .footer__grid{row-gap:0}
  .footer__brandcol{display:contents}
  .footer__brand,.footer__about,.footer__social,.footer__cta{grid-column:1;justify-self:start}
  .footer__brand{grid-row:1}
  .footer__about{grid-row:2}
  .footer__social{grid-row:3}
  .footer__cta{grid-row:4}
  .footer__col{grid-row:1 / span 4;align-self:start}
  .footer__col--rent{grid-column:2}
  .footer__col--gate{grid-column:3}
  .footer__col--design{grid-column:4}
  .footer__col--services{grid-column:5}
  .footer__col--links{grid-column:6}
  .footer__contact{grid-column:1 / -1;grid-row:5;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1)}
}
@media (min-width:561px) and (max-width:1179px){.footer__contact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer__contact{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.footer__brandcol{align-items:flex-start}}

/* =========================================================
   Purpose: a light section between the dark ones, so it reads as its own part of the page.
   Left: the purpose statement, one line at a time, then the supporting line and the enquiry button.
   Right: one navy brand panel with the group logo. The base styles are the finished state;
   the entrance plays once when the section scrolls in (it starts dark and the light background wipes up over it).
   ========================================================= */
.pu{position:relative;isolation:isolate;padding:clamp(4.5rem,9vw,7.5rem) 0;color:var(--ink);background:#f3f6fd}
.pu::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#f7f9ff,#edf1fb);transform-origin:50% 100%;transition:transform .8s var(--ease)}
.js .pu:not(.pu-in){background:#070d25}
.js .pu:not(.pu-in)::before{transform:scaleY(0)}

.pu__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.pu__eyebrow{display:flex;align-items:center;gap:.8rem;margin:0 0 1.4rem;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--navy-700)}
.pu__title{margin:0;font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.1;font-weight:700;letter-spacing:-.025em;color:var(--navy-800)}
.pu__ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.pu__ln>span{display:block;transition:transform 1s var(--ease) calc(.7s + var(--i) * .14s)}
.pu__ln--gold{color:var(--gold-600)}
.pu__lead{margin:1.8rem 0 0;max-width:34ch;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:var(--muted);transition:opacity .8s var(--ease) 1.5s,transform .8s var(--ease) 1.5s}
.pu__cta{margin-top:2rem;transition:opacity .8s var(--ease) 1.7s,transform .8s var(--ease) 1.7s,box-shadow .3s,background-color .3s}
.pu__cta svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.pu__cta:hover svg,.pu__cta:focus-visible svg{transform:translateX(4px)}
.pu__cta:focus-visible{outline:3px solid var(--navy-800);outline-offset:4px}

/* the brand panel: navy, with the group logo, name, tagline and the three hub names */
.pu__brand{position:relative;display:grid;place-items:center;padding:3rem 1.8rem;text-align:center;border-radius:28px;overflow:hidden;min-height:340px}
.pu__slab{position:absolute;inset:0;z-index:0;background:radial-gradient(420px 260px at 0 0,rgba(216,182,120,.16),transparent 70%),linear-gradient(180deg,#0e1738,#070d25);
  clip-path:inset(0 round 28px);transition:clip-path 1.1s var(--ease) .5s}
.pu__brandin{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.pu__logo{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 4px #0b1330,0 0 0 6px rgba(216,182,120,.95);transition:opacity .8s var(--ease) 1.1s,transform .8s var(--ease) 1.1s}
.pu__name{margin:1.3rem 0 0;font-size:1.15rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;transition:opacity .8s var(--ease) 1.25s,transform .8s var(--ease) 1.25s}
.pu__tag{margin:.5rem 0 0;max-width:20ch;font-size:1rem;line-height:1.5;color:#c9d3f3;transition:opacity .8s var(--ease) 1.35s,transform .8s var(--ease) 1.35s}
.pu__hubs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem .7rem;margin:1.5rem 0 0;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);font-size:.78rem;font-weight:500;color:#aebbe6;transition:opacity .8s var(--ease) 1.45s,transform .8s var(--ease) 1.45s}
.pu__hubs i{width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* before the entrance (only while JS is running): lines masked below their baseline, everything else waiting */
.js .pu:not(.pu-in) .pu__ln>span{transform:translateY(108%)}
.js .pu:not(.pu-in) .pu__eyebrow{opacity:0}
.js .pu:not(.pu-in) .pu__slab{clip-path:inset(100% 0 0 0 round 28px)}
.js .pu:not(.pu-in) .pu__logo{opacity:0;transform:scale(.88)}
.js .pu:not(.pu-in) .pu__name,.js .pu:not(.pu-in) .pu__tag,.js .pu:not(.pu-in) .pu__hubs,.js .pu:not(.pu-in) .pu__lead,.js .pu:not(.pu-in) .pu__cta{opacity:0;transform:translateY(14px)}
.pu__eyebrow{transition:opacity .6s var(--ease) .55s}
.pu-in .pu__cta:hover{transition-delay:0s}
.show-all .pu .pu__ln>span,.show-all .pu .pu__logo,.show-all .pu .pu__name,.show-all .pu .pu__tag,.show-all .pu .pu__hubs,.show-all .pu .pu__lead,.show-all .pu .pu__cta,.show-all .pu .pu__eyebrow{opacity:1!important;transform:none!important}
.show-all .pu .pu__slab{clip-path:inset(0 round 28px)!important}
.show-all .pu::before{transform:none!important}
.show-all .pu{background:#f3f6fd!important}

@media (max-width:900px){
  .pu__grid{grid-template-columns:1fr;gap:2.6rem}
  .pu__brand{min-height:0;padding:2.4rem 1.4rem}
  .pu__tag{max-width:none}
}
@media (max-width:520px){
  .pu__title{font-size:clamp(1.85rem,8.4vw,2.4rem)}
  .pu__cta{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .js .pu:not(.pu-in){background:#f3f6fd}
  .js .pu:not(.pu-in)::before{transform:none}
  .js .pu:not(.pu-in) .pu__ln>span,.js .pu:not(.pu-in) .pu__logo,.js .pu:not(.pu-in) .pu__name,.js .pu:not(.pu-in) .pu__tag,.js .pu:not(.pu-in) .pu__hubs,.js .pu:not(.pu-in) .pu__lead,.js .pu:not(.pu-in) .pu__cta,.js .pu:not(.pu-in) .pu__eyebrow{opacity:1;transform:none}
  .js .pu:not(.pu-in) .pu__slab{clip-path:inset(0 round 28px)}
  .pu::before,.pu__eyebrow,.pu__ln>span,.pu__slab,.pu__logo,.pu__name,.pu__tag,.pu__hubs,.pu__lead,.pu__cta,.pu__cta svg{transition:none!important}
  .pu__cta:hover svg,.pu__cta:focus-visible svg{transform:none}
}


/* =========================================================
   How We Work, v4: the same layout, a calmer and more finished look.
   Roomier type and cards, an accent colour per hub, a bar on each card that fills as the journey passes it,
   and a short entrance for the cards when the hub changes. Scoped to #how-we-work.
   ========================================================= */
#how-we-work{--hc:#8fa6ff}
#how-we-work[data-hub=gate]{--hc:#3fd2e0}
#how-we-work[data-hub=design]{--hc:#b78bff}

/* hub selector: a little larger, easier to hit */
#how-we-work .tabs{margin-bottom:2.6rem}
#how-we-work .tab{padding:.8rem 1.7rem;font-size:.98rem}
#how-we-work .flow__visual{margin-bottom:1.4rem}

/* the four steps */
#how-we-work .flow__steps{gap:22px}
#how-we-work .step{position:relative;overflow:hidden;gap:1.2rem;padding:1.8rem 1.55rem 1.75rem;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.035)}
#how-we-work .step::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--hc);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
#how-we-work .step.is-on::before{transform:scaleX(1)}
#how-we-work .step.is-current::before{background:var(--gold)}
#how-we-work .step.is-on{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.18)}
#how-we-work .step.is-current{background:rgba(216,182,120,.1);border-color:rgba(216,182,120,.65);transform:translateY(-4px);box-shadow:0 22px 36px -28px rgba(216,182,120,.55)}
#how-we-work .step__ico{width:54px;height:54px;border-radius:16px}
#how-we-work .step__ico svg{width:25px;height:25px}
#how-we-work .step.is-on .step__ico{background:color-mix(in srgb,var(--hc) 26%,#0e1a40);border:1px solid color-mix(in srgb,var(--hc) 65%,transparent);color:#fff}
#how-we-work .step.is-current .step__ico{background:linear-gradient(135deg,#f3dfae,#d8b678);border-color:transparent;color:#0e1a40;box-shadow:0 10px 20px -10px rgba(216,182,120,.8)}
#how-we-work .step__body{gap:.6rem}
#how-we-work .step small{padding:.18rem .7rem;font-size:.72rem}
#how-we-work .step h3{font-size:1.25rem;line-height:1.3}
#how-we-work .step p{font-size:1rem;line-height:1.6}

/* the short summary */
#how-we-work .flow__summary{margin-top:1.5rem;padding:1.3rem 1.6rem;border-left:3px solid var(--hc)}
#how-we-work .flow__note{font-size:1.02rem}

/* motion: the cards of a newly chosen hub rise in one after another; the current step's icon settles in once */
@keyframes hwStepIn{from{opacity:0;transform:translateY(14px)}}
@keyframes hwIcoPop{from{transform:scale(.86)}}
#how-we-work.hw-in .step{animation:hwStepIn .6s var(--ease) calc(.05s + var(--si,0) * .08s) backwards}
#how-we-work .step:nth-child(2){--si:1}
#how-we-work .step:nth-child(3){--si:2}
#how-we-work .step:nth-child(4){--si:3}
#how-we-work .step.is-current .step__ico{animation:hwIcoPop .5s var(--ease)}

@media (max-width:1100px) and (min-width:821px){
  #how-we-work .step{padding:1.6rem 1.5rem}
}
@media (max-width:820px){
  #how-we-work .tab{padding:.7rem .6rem;font-size:.8rem}
  #how-we-work .step,#how-we-work .step.is-on,#how-we-work .step.is-current,#how-we-work .step:hover{overflow:visible;gap:0;padding:0 0 1.7rem;border:0;background:none;box-shadow:none;transform:none}
  #how-we-work .step:last-child{padding-bottom:0}
  #how-we-work .step::before{display:none}
  #how-we-work .step h3{font-size:1.2rem}
  #how-we-work .step p{font-size:1rem}
  #how-we-work .step.is-on .step__ico{background:color-mix(in srgb,var(--hc) 26%,#0e1a40);border:1px solid color-mix(in srgb,var(--hc) 65%,transparent)}
  #how-we-work .step.is-current .step__ico{background:linear-gradient(135deg,#f3dfae,#d8b678);border-color:transparent}
  #how-we-work .flow__summary{padding:1.1rem 1.2rem}
}
@media (prefers-reduced-motion:reduce){
  #how-we-work.hw-in .step,#how-we-work .step.is-current .step__ico{animation:none}
  #how-we-work .step::before{transition:none}
}


/* =========================================================
   How We Work: an interactive process stage.
   One hub at a time and one step at a time: title and description on the left, a drawn scene for that step on the right,
   a rail of the four steps below the text. The scene is built from simple strokes that draw in; hub changes sweep a curtain across.
   The base styles are the finished state; JS adds the sequence. Older tab/wave/card rules above are no longer used.
   ========================================================= */
.wk{--hc:#8fa6ff}
.wk[data-hub=gate]{--hc:#3fd2e0}
.wk[data-hub=design]{--hc:#b78bff}

.wk__stage{position:relative;overflow:hidden;margin-top:.4rem;padding:clamp(1.4rem,3vw,2.6rem);border-radius:28px;border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(560px 320px at 100% 0,color-mix(in srgb,var(--hc) 15%,transparent),transparent 70%),linear-gradient(165deg,#0f1a42,#09112b);box-shadow:0 34px 60px -44px rgba(0,0,0,.75)}

/* hub selector and the step counter */
.wk__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 1.5rem}
.wk__tabs{display:inline-flex;gap:.3rem;padding:.3rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.wk__tab{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1.1rem .5rem .5rem;border:0;border-radius:999px;background:none;color:#b7c2e6;font:600 .95rem "Poppins",sans-serif;cursor:pointer;
  transition:background-color .35s var(--ease),color .3s}
.wk__tab img{display:block;width:28px;height:28px;border-radius:50%;object-fit:cover;background:#fff;opacity:.7;transition:opacity .3s}
.wk__tab:hover:not(.is-active){color:#fff;background:rgba(255,255,255,.07)}
.wk__tab:hover img{opacity:1}
.wk__tab.is-active{background:linear-gradient(120deg,var(--gold),#ecd39d);color:#241c08}
.wk__tab.is-active img{opacity:1;box-shadow:0 0 0 2px rgba(36,28,8,.25)}
.wk__tab:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wk__count{margin:0;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#aebbe6}
.wk__count b{color:var(--hc);font-size:1.05rem}

.wk__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(1.8rem,4.5vw,4rem);align-items:center;margin-top:2rem}
.wk__left{display:flex;flex-direction:column;gap:1.7rem;min-width:0}
.wk__note{margin:0;max-width:54ch;font-size:.98rem;line-height:1.6;color:#aebbe6}

/* the step on show */
.wk__txt{display:grid}
.wk__pn{grid-area:1/1;visibility:hidden;transition:visibility 0s linear .6s}
.wk__pn.is-active{visibility:visible;transition-delay:0s}
.wk__k{margin:0 0 .7rem;font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--hc);transition:opacity .5s var(--ease) .25s,transform .5s var(--ease) .25s}
.wk__ttl{margin:0;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;font-size:clamp(2rem,3.7vw,3.3rem);line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#fff}
.wk__ttl span{display:block;transform:translateY(105%);transition:transform .75s var(--ease) .08s}
.wk__desc{margin:1rem 0 0;max-width:36ch;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:#c9d3f0;transition:opacity .6s var(--ease) .3s,transform .6s var(--ease) .3s}
.wk__k,.wk__desc{opacity:0;transform:translateY(14px)}
.wk__pn.is-active .wk__ttl span{transform:none}
.wk__pn.is-active .wk__k,.wk__pn.is-active .wk__desc{opacity:1;transform:none}
.wk__pn.is-past .wk__ttl span{transform:translateY(-105%)}
.wk__pn.is-past .wk__k,.wk__pn.is-past .wk__desc{transform:translateY(-14px)}
.wk__pn:not(.is-active) .wk__ttl span,.wk__pn:not(.is-active) .wk__k,.wk__pn:not(.is-active) .wk__desc{transition-delay:0s;transition-duration:.35s}

/* controls: previous, the four steps, next */
.wk__ctl{display:flex;align-items:center;gap:.9rem}
.wk__nav{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:none;color:#fff;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,opacity .3s}
.wk__nav svg{width:20px;height:20px}
.wk__nav:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:#1b1b1b}
.wk__nav:disabled{opacity:.35;cursor:default}
.wk__nav:focus-visible,.wk__stepbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wk__rail{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin:0;padding:0;list-style:none;min-width:0}
.wk__stepbtn{position:relative;display:block;width:100%;min-height:46px;padding:.85rem 0 .1rem;background:none;border:0;text-align:left;font:inherit;color:#8e9cc9;cursor:pointer;transition:color .3s}
.wk__stepbtn::before,.wk__stepbtn::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px}
.wk__stepbtn::before{background:rgba(255,255,255,.18)}
.wk__stepbtn::after{background:var(--hc);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.wk__stepbtn small{display:block;font-size:.74rem;font-weight:700;letter-spacing:.16em}
.wk__stepbtn b{display:block;margin-top:.1rem;font-size:.86rem;font-weight:600;line-height:1.3}
.wk__stepbtn.is-on::after{transform:scaleX(1)}
.wk__stepbtn.is-current{color:#fff}
.wk__stepbtn.is-current::after{background:var(--gold)}
.wk__stepbtn:hover{color:#fff}
.wk__confirm{margin:0;padding:.55rem .85rem;max-width:54ch;border:1.5px dashed rgba(216,182,120,.7);border-radius:10px;font-size:.86rem;line-height:1.5;color:#e6d3a6}
.wk__confirm span{font-weight:700;color:var(--gold)}
.wk__confirm[hidden]{display:none}

/* the scene */
.wk__frame{position:relative;aspect-ratio:4/3;border-radius:24px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(60% 60% at 50% 45%,color-mix(in srgb,var(--hc) 10%,transparent),transparent 75%),rgba(255,255,255,.025);overflow:hidden}
.wk__svg{position:absolute;inset:6% 7% 12%;width:86%;height:82%;overflow:visible}
.wk__chip{position:absolute;left:1.1rem;bottom:1rem;display:flex;align-items:center;gap:.55rem;font-size:.84rem;font-weight:600;color:#e5ebfb}
.wk__chip img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff}
.sc{visibility:hidden}
.sc.is-active{visibility:visible}
.sc *{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sc .a{stroke:var(--hc)}
.sc .w{stroke:rgba(255,255,255,.6)}
.sc .g{stroke:var(--gold)}
.sc .fa{fill:color-mix(in srgb,var(--hc) 40%,transparent)}
.sc .f{opacity:0;transition:opacity .4s}
.sc.is-active .f{opacity:1;transition:opacity .6s var(--ease) calc(var(--n,0) * .12s + .3s)}
.sc .d{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s ease-in}
.sc.is-active .d{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease) calc(var(--n,0) * .11s + .1s)}
.sc:not(.is-active){transition:visibility 0s linear .35s}

/* the hub-change curtain */
.wk__curtain{position:absolute;inset:0;z-index:3;border-radius:28px;background:color-mix(in srgb,var(--hc) 34%,#070d25);transform:translateX(-101%);pointer-events:none}

/* entrance: the stage content comes in one part after another (only while JS runs) */
@keyframes wkUp{from{opacity:0;transform:translateY(16px)}}
.js .wk:not(.wk-in) .wk__bar,.js .wk:not(.wk-in) .wk__left,.js .wk:not(.wk-in) .wk__frame{opacity:0}
.wk-in .wk__stage{animation:wkUp .8s var(--ease) backwards}
.wk-in .wk__bar{animation:wkUp .7s var(--ease) .25s backwards}
.wk-in .wk__left{animation:wkUp .8s var(--ease) .45s backwards}
.wk-in .wk__frame{animation:wkUp .9s var(--ease) .6s backwards}
.show-all .wk .wk__bar,.show-all .wk .wk__left,.show-all .wk .wk__frame{opacity:1!important}

@media (max-width:900px){
  .wk__main{grid-template-columns:1fr;gap:1.6rem;margin-top:1.4rem}
  .wk__frame{order:-1;aspect-ratio:16/11}
  .wk__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-radius:18px}
  .wk__tab{flex-direction:column;justify-content:center;gap:.3rem;padding:.55rem .3rem;border-radius:14px;font-size:.78rem;text-align:center}
  .wk__count{display:none}
  .wk__stepbtn b{display:none}
  .wk__stepbtn{padding-top:1rem}
  .wk__stepbtn small{font-size:.82rem}
}
@media (max-width:520px){
  .wk__stage{padding:1.1rem 1rem 1.3rem;border-radius:22px}
  .wk__nav{width:44px;height:44px}
  .wk__desc{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .js .wk:not(.wk-in) .wk__bar,.js .wk:not(.wk-in) .wk__left,.js .wk:not(.wk-in) .wk__frame{opacity:1}
  .wk-in .wk__stage,.wk-in .wk__bar,.wk-in .wk__left,.wk-in .wk__frame{animation:none}
  .wk__tab,.wk__nav,.wk__stepbtn,.wk__stepbtn::after,.wk__pn,.wk__k,.wk__ttl span,.wk__desc,.sc .d,.sc .f{transition:none!important}
}

/* =========================================================
   About: a clear beginning and end.
   Above it the dark ticker ends in a soft shade that falls onto the page; below, the section finishes as a rounded sheet resting on the
   next (tinted) section, which slides a little way underneath it. The shade and the lift settle in as the section scrolls into view.
   ========================================================= */
#about.section--tech{--ab-r:clamp(28px,4vw,48px);z-index:2;border-radius:0 0 var(--ab-r) var(--ab-r);
  box-shadow:inset 0 42px 46px -40px rgba(10,18,48,.17),0 30px 46px -34px rgba(30,45,120,.4);
  transition:box-shadow 1.2s var(--ease)}
#about.section--tech::after{display:none}
.js #about.section--tech:not(.in-view){box-shadow:inset 0 0 0 0 rgba(10,18,48,0),0 0 0 0 rgba(30,45,120,0)}
#about + #divisions{margin-top:calc(-1 * clamp(28px,4vw,48px));padding-top:calc(clamp(4.5rem,9vw,7.5rem) + clamp(28px,4vw,48px))}
@media (max-width:820px){
  #about + #divisions{padding-top:calc(clamp(3.5rem,9vw,5rem) + clamp(28px,4vw,48px))}
}
@media (prefers-reduced-motion:reduce){
  #about.section--tech{transition:none}
}

/* =========================================================
   Homepage section boundaries: one consistent rule.
   Where a light section meets a dark one, the light side carries a soft tonal ramp (a faint shade falling from a dark section above,
   a slow deepening towards a dark section below), so every change of section reads as intentional without borders or bars.
   Light after light (About, then Divisions) is separated by the About sheet and a deeper tone under it (see the About block above).
   ========================================================= */
/* Divisions: deeper under the About sheet, deeper again before the dark process section */
#divisions{background:linear-gradient(180deg,#e8edfa 0,#f3f6fc 220px,#f3f6fc calc(100% - 140px),#e6ebf8 100%)}
/* Why: a shade from the dark process section above, a deepening towards the dark story below */
#why{background:linear-gradient(180deg,rgba(10,18,48,.1) 0,rgba(10,18,48,0) 70px),linear-gradient(180deg,#fff calc(100% - 140px),#eef2fb 100%)}
/* Purpose: the same two ramps on its light background, and a lighter navy while it waits to be revealed so it never melts into the story above */
.pu::before{background:linear-gradient(180deg,rgba(10,18,48,.12) 0,rgba(10,18,48,0) 70px),linear-gradient(0deg,rgba(63,85,165,.1) 0,rgba(63,85,165,0) 100px),linear-gradient(180deg,#f7f9ff,#edf1fb)}
.js .pu:not(.pu-in){background:#101b44}

/* =========================================================
   Footer refinement: one content width, even rhythm, matching dividers.
   ========================================================= */
/* brand column: one spacing step between description, social icons and the button */
.footer__about{margin-top:1.15rem}
.footer__social{margin-top:1.25rem}
.footer__cta{margin-top:1.25rem}
.footer__col ul{gap:.3rem}

/* contact row: the address takes two columns on a wide screen, so it wraps to two lines instead of four and the other items keep their place */
.footer__contact{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem 1.8rem;margin-top:2.4rem;padding-top:1.7rem}
@media (min-width:1180px){.footer__contact li:last-child:nth-child(4){grid-column:span 2}}

/* the three dividers match: same colour, same distance above and below */
.footer__policies{border-bottom:1px solid rgba(255,255,255,.1);padding:0 0 1.4rem;margin-bottom:1.2rem}
.footer__bottom{margin-top:2.4rem;padding-top:1.7rem;padding-right:0;padding-bottom:2.4rem}
/* keep the last line clear of the floating buttons only where the content can reach them */
@media (max-width:1300px){.footer__bottom{padding-bottom:5.5rem}.footer__tag{margin-right:4.6rem}}

@media (max-width:760px){
  .footer__social a{width:44px;height:44px}
  .footer__contact{margin-top:2rem;padding-top:1.5rem}
  .footer__bottom{margin-top:2rem;padding-top:1.5rem;padding-bottom:8.5rem}
  .footer__tag{margin-right:0}
}
.footer__contact li>span:last-child{overflow-wrap:break-word}
@media (min-width:1180px){
  .footer__contact li:last-child:nth-child(4){grid-column:auto}
  .footer__contact:has(li:nth-child(4)){grid-template-columns:max-content max-content max-content minmax(0,1fr);column-gap:2.6rem}
}
@media (max-width:420px){.footer__contact li>span:last-child{overflow-wrap:anywhere}}
@media (min-width:561px) and (max-width:1179px){
  .footer__contact:has(li:nth-child(4)) li:nth-child(4){grid-column:1/-1}
}

/* footer WhatsApp button: the logo mark fills its whole box, so it is drawn a little smaller to look the same size as the other icons */
.footer__social .footer__wa svg{width:15.5px;height:15.5px}

/* Portfolio hero: desktop and mobile responsive showcase. Illustrative until real project captures are supplied. */
.pf-showcase{isolation:isolate;min-height:380px;aspect-ratio:16/11;background:radial-gradient(60% 75% at 62% 46%,rgba(74,119,202,.26),transparent 74%),linear-gradient(145deg,#142248,#0b1431 70%,#1a3265)}
.pf-showcase__glow{position:absolute;width:58%;aspect-ratio:1;border-radius:50%;left:31%;top:4%;background:radial-gradient(circle,rgba(216,182,120,.2),rgba(82,109,208,.08) 48%,transparent 72%);pointer-events:none}
.pf-showcase__browser{position:absolute;z-index:1;left:7%;top:12%;width:78%;aspect-ratio:1.53;border:1px solid rgba(255,255,255,.34);border-radius:15px;background:#f8f9fc;overflow:hidden;box-shadow:0 28px 48px -26px rgba(0,0,0,.8);transform:rotate(-2deg);animation:pfBrowserEnter .9s cubic-bezier(.2,.75,.25,1) both}
.pf-showcase__toolbar{height:10%;min-height:22px;padding:0 3.5%;display:flex;align-items:center;gap:.75rem;background:#e9edf5;color:#586582;font-size:clamp(.48rem,.75vw,.68rem);font-weight:600;letter-spacing:.025em}
.pf-showcase__dots{display:flex;gap:4px;flex:none}.pf-showcase__dots i{display:block;width:6px;height:6px;border-radius:50%;background:#d98780}.pf-showcase__dots i:nth-child(2){background:#e0bd69}.pf-showcase__dots i:nth-child(3){background:#72b88f}
.pf-showcase__toolbar-mark{margin-left:auto;width:13%;height:5px;border-radius:5px;background:#c9d0de}
.pf-showcase__screen{height:90%;padding:0 5%;background:#fff}
.pf-showcase__nav{height:15%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9edf4}
.pf-showcase__mini-brand{display:block;width:15%;height:7px;border-radius:6px;background:#1b2b53}
.pf-showcase__nav-lines{display:flex;gap:7px}.pf-showcase__nav-lines i{display:block;width:26px;height:4px;border-radius:4px;background:#b7c0d0}
.pf-showcase__webhero{height:70%;display:grid;grid-template-columns:1fr .92fr;gap:4%;align-items:center;padding:4% 0}
.pf-showcase__webcopy{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pf-showcase__microline{width:30%;height:4px;border-radius:4px;background:#c99b4b}
.pf-showcase__headline-lines{display:grid;gap:6px;width:90%}.pf-showcase__headline-lines i{height:9px;border-radius:5px;background:#17264a}.pf-showcase__headline-lines i:last-child{width:76%;background:#334d85}
.pf-showcase__body-lines{display:grid;gap:5px;width:82%;margin-top:3px}.pf-showcase__body-lines i{height:4px;border-radius:4px;background:#c5ccda}.pf-showcase__body-lines i:last-child{width:62%}
.pf-showcase__button{display:block;width:33%;height:17px;margin-top:3px;border-radius:20px;background:linear-gradient(100deg,#e5c778,#c99b4b)}
.pf-showcase__scene{position:relative;height:100%;min-height:100px;border-radius:9px;overflow:hidden;background:linear-gradient(180deg,#d9ecee 0%,#b6d0d0 56%,#8ca7a6 100%)}
.pf-showcase__sun{position:absolute;top:13%;right:14%;width:17%;aspect-ratio:1;border-radius:50%;background:#f1d792}
.pf-showcase__hill{position:absolute;left:-10%;right:-10%;bottom:0;height:54%;border-radius:50% 50% 0 0 / 40% 40% 0 0}
.pf-showcase__hill--back{bottom:14%;background:#6b8584;transform:rotate(-5deg)}.pf-showcase__hill--front{background:#405d63;transform:rotate(7deg)}
.pf-showcase__house{position:absolute;z-index:1;left:34%;bottom:0;width:43%;height:49%;background:#f5f2e9;clip-path:polygon(0 31%,50% 0,100% 31%,100% 100%,0 100%);filter:drop-shadow(0 4px 4px rgba(13,27,50,.16))}
.pf-showcase__house i{position:absolute;left:15%;bottom:0;width:25%;height:51%;background:#91b5b8}.pf-showcase__house b{position:absolute;right:13%;bottom:0;width:32%;height:62%;background:#293f60}
.pf-showcase__webfoot{height:15%;display:flex;align-items:center;gap:5%;border-top:1px solid #edf0f5}.pf-showcase__webfoot i{width:15%;height:5px;border-radius:4px;background:#d4dae4}.pf-showcase__webfoot i:first-child{background:#4a63bd}
.pf-showcase__phone{position:absolute;z-index:2;right:7.5%;bottom:16%;width:24%;max-width:160px;min-width:112px;aspect-ratio:.56;padding:7px;border:1px solid rgba(241,217,153,.75);border-radius:25px;background:#101a3b;box-shadow:0 22px 42px -16px rgba(0,0,0,.75),0 0 0 5px rgba(255,255,255,.08);transform-origin:center;animation:pfPhoneEnter .8s cubic-bezier(.2,.75,.25,1) .28s both}
.pf-showcase__speaker{position:absolute;z-index:2;top:4px;left:50%;width:24%;height:4px;border-radius:5px;background:#697694;transform:translateX(-50%)}
.pf-showcase__phone-screen{height:100%;padding:12px 7px 8px;border-radius:19px;overflow:hidden;background:#fafbfe}
.pf-showcase__phone-nav{height:13%;display:flex;align-items:center;justify-content:space-between}.pf-showcase__phone-nav i{width:29%;height:5px;border-radius:4px;background:#1b2a4f}.pf-showcase__phone-nav b{width:12px;height:12px;border-radius:50%;background:#e4cb8d}
.pf-showcase__phone-image{position:relative;height:46%;overflow:hidden;border-radius:8px;background:linear-gradient(180deg,#d9ecee,#b8d1d1 58%,#718e8e)}
.pf-showcase__phone-sun{position:absolute;top:12%;right:14%;width:20%;aspect-ratio:1;border-radius:50%;background:#f1d792}
.pf-showcase__phone-hill{position:absolute;left:-8%;right:-8%;bottom:-7%;height:53%;border-radius:55% 55% 0 0;background:#405d63;transform:rotate(-7deg)}
.pf-showcase__phone-title{display:block;width:74%;height:7px;margin:11px 2px 7px;border-radius:4px;background:#18264a}
.pf-showcase__phone-copy{display:block;width:92%;height:4px;margin:0 2px 5px;border-radius:4px;background:#c6ceda}.pf-showcase__phone-copy--short{width:64%}
.pf-showcase__phone-cta{display:block;width:48%;height:14px;margin:9px 2px 0;border-radius:20px;background:linear-gradient(100deg,#e5c778,#c99b4b)}
.pf-showcase__label{position:absolute;z-index:3;left:1rem;top:1rem;padding:.35rem .7rem;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:rgba(9,18,46,.65);color:#e5ebfb;font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;backdrop-filter:blur(8px)}
.pf-showcase .svc-art__chips{z-index:3;bottom:.85rem}
@keyframes pfBrowserEnter{from{opacity:.4;transform:translate(-18px,12px) rotate(-4deg)}to{opacity:1;transform:translate(0,0) rotate(-2deg)}}
@keyframes pfPhoneEnter{from{opacity:0;transform:translate(28px,26px) rotate(9deg)}to{opacity:1;transform:translate(0,0) rotate(5deg)}}
@media (max-width:640px){
 .pf-showcase{min-height:300px;aspect-ratio:4/3}
 .pf-showcase__browser{left:5%;top:15%;width:82%;border-radius:11px}
 .pf-showcase__phone{right:5%;bottom:18%;width:25%;min-width:98px;padding:5px;border-radius:20px}
 .pf-showcase__phone-screen{padding:10px 5px 6px;border-radius:15px}
 .pf-showcase__phone-title{margin-top:7px}
 .pf-showcase__nav-lines{gap:4px}.pf-showcase__nav-lines i{width:15px}
 .pf-showcase__label{top:.7rem;left:.7rem;font-size:.58rem}
 .pf-showcase .svc-art__chips{gap:.35rem;bottom:.65rem}
 .pf-showcase .svc-art__chips li{padding:.3rem .55rem;font-size:.64rem}
}
@media (prefers-reduced-motion:reduce){.pf-showcase__browser,.pf-showcase__phone{animation:none;opacity:1}.pf-showcase__browser{transform:rotate(-2deg)}.pf-showcase__phone{transform:rotate(5deg)}}

/* =========================================================
   Our Work hero: a layered, purely decorative visual.
   A large browser-style frame behind and a smaller phone-style frame in front, drawn only with colour fields, neutral blocks and
   minimal interface lines. It shows no project, client or screenshot. The base styles are the finished, still composition;
   the entrance only plays when JS adds .is-in (large frame first, then the small one) and never repeats.
   ========================================================= */
.pf-reel{position:relative}
.pf-reel__frame{position:relative;aspect-ratio:16/12;border-radius:26px;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(60% 70% at 62% 40%,rgba(74,119,202,.26),transparent 72%),linear-gradient(150deg,#142248,#0b1431 70%,#1a3265);box-shadow:0 36px 70px -36px rgba(0,0,0,.8)}
.pf-reel__glow{position:absolute;z-index:-1;width:56%;aspect-ratio:1;left:34%;top:2%;border-radius:50%;background:radial-gradient(circle,rgba(216,182,120,.2),rgba(82,109,208,.08) 50%,transparent 72%);pointer-events:none}

/* large browser frame, behind */
.pf-reel__browser{position:absolute;z-index:1;left:6%;top:9%;width:72%;aspect-ratio:1.5;border-radius:14px;overflow:hidden;background:#f6f8fd;border:1px solid rgba(255,255,255,.4);box-shadow:0 26px 46px -24px rgba(0,0,0,.85);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.pf-reel__toolbar{height:11%;min-height:20px;padding:0 3.5%;display:flex;align-items:center;gap:.6rem;background:#e8ecf5}
.pf-reel__dots{display:flex;gap:4px;flex:none}
.pf-reel__dots i{display:block;width:6px;height:6px;border-radius:50%;background:#c3cbdc}
.pf-reel__dots i:first-child{background:#d8b678}
.pf-reel__url{flex:1;max-width:46%;height:48%;margin-left:4%;border-radius:999px;background:#fff}
.pf-reel__screen{position:absolute;left:0;right:0;top:11%;bottom:0;padding:4% 4.5%;display:grid;grid-template-rows:auto 1fr auto;gap:5%;clip-path:inset(0);transition:clip-path 1s var(--ease) .25s}
.pf-reel__nav{display:flex;align-items:center;gap:6%}
.pf-reel__brand{width:7%;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#d8b678,#f1dca6)}
.pf-reel__nav i{display:block;width:11%;height:4px;border-radius:4px;background:#ccd3e3}
.pf-reel__nav i:first-of-type{margin-left:auto}
.pf-reel__hero{display:grid;grid-template-columns:1fr 1.05fr;gap:5%;min-height:0}
.pf-reel__copy{display:flex;flex-direction:column;justify-content:center;gap:7%}
.pf-reel__copy i{display:block;height:6px;border-radius:6px;background:#1c2a5c}
.pf-reel__copy i:nth-child(1){width:88%}
.pf-reel__copy i:nth-child(2){width:62%}
.pf-reel__copy i:nth-child(n+3){height:4px;background:#ccd3e3;width:92%}
.pf-reel__copy i:nth-child(4){width:78%}
.pf-reel__copy b{display:block;width:34%;height:12px;border-radius:999px;background:linear-gradient(135deg,#d8b678,#f1dca6)}
.pf-reel__field{position:relative;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#3f55a5 0%,#2f9bb5 55%,#7a56c9 100%)}
.pf-reel__field::before{content:"";position:absolute;left:12%;top:16%;width:34%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.28)}
.pf-reel__field::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-18%;height:52%;border-radius:50% 50% 0 0;background:rgba(10,18,48,.32)}
.pf-reel__foot{display:grid;grid-template-columns:repeat(3,1fr);gap:4%}
.pf-reel__foot i{display:block;height:13px;border-radius:5px;background:#dfe4f0}

/* small phone frame, in front: it overlaps the lower right corner of the large frame and stays clear of the hub labels */
.pf-reel__phone{position:absolute;z-index:2;right:7%;bottom:17%;width:27%;aspect-ratio:.56;padding:3.2%;border-radius:20px;background:#0a1230;border:1px solid rgba(255,255,255,.3);box-shadow:0 24px 40px -20px rgba(0,0,0,.9);
  transition:opacity .8s var(--ease) .4s,transform .8s var(--ease) .4s}
.pf-reel__phone-screen{position:relative;height:100%;border-radius:14px;overflow:hidden;background:#f6f8fd;padding:9% 8%;display:grid;grid-template-rows:auto 1.3fr auto auto;gap:6%;clip-path:inset(0);transition:clip-path 1s var(--ease) .65s}
.pf-reel__phone-screen>i{display:block;width:100%;height:4px;border-radius:4px;background:#ccd3e3}
.pf-reel__phone-screen>i:first-child{width:46%;height:5px;background:#1c2a5c}
.pf-reel__phone-field{border-radius:9px;background:linear-gradient(160deg,#a27bf0 0%,#4f75d1 60%,#35b9d6 100%);position:relative;overflow:hidden}
.pf-reel__phone-field::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-24%;height:55%;border-radius:50% 50% 0 0;background:rgba(10,18,48,.3)}
.pf-reel__phone-screen>b{display:block;width:50%;height:9px;border-radius:999px;background:linear-gradient(135deg,#d8b678,#f1dca6)}

.pf-reel__hubs{position:absolute;z-index:3;left:4%;right:4%;bottom:4.5%;display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:0;padding:0;list-style:none}
.pf-reel__hubs li{padding:.32rem .8rem;border-radius:999px;font-size:.74rem;font-weight:500;color:#e4e9fb;background:rgba(10,18,48,.7);border:1px solid rgba(255,255,255,.16)}

/* entrance (only while JS runs): the large frame first, its screen revealed behind a mask, then the small frame slides in and is revealed */
.js .pf-reel:not(.is-in) .pf-reel__browser{opacity:0;transform:translateY(22px) scale(.97)}
.js .pf-reel:not(.is-in) .pf-reel__phone{opacity:0;transform:translateX(46px)}
.js .pf-reel:not(.is-in) .pf-reel__screen,.js .pf-reel:not(.is-in) .pf-reel__phone-screen{clip-path:inset(0 100% 0 0)}
.show-all .pf-reel__browser,.show-all .pf-reel__phone{opacity:1!important;transform:none!important}
.show-all .pf-reel__screen,.show-all .pf-reel__phone-screen{clip-path:none!important}

@media (max-width:1000px){
  .pf-reel{max-width:640px}
}
/* phone: a taller frame, the large frame fills the width, the small frame overlaps its lower corner and the hub labels sit below both */
@media (max-width:560px){
  .pf-reel__frame{aspect-ratio:auto;height:clamp(320px,96vw,400px);border-radius:22px}
  .pf-reel__browser{left:5%;top:7%;width:90%;border-radius:12px}
  .pf-reel__phone{right:7%;bottom:19%;width:34%;border-radius:18px}
  .pf-reel__hubs{left:3%;right:3%;bottom:4%;gap:.35rem}
  .pf-reel__hubs li{padding:.28rem .65rem;font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .js .pf-reel:not(.is-in) .pf-reel__browser,.js .pf-reel:not(.is-in) .pf-reel__phone{opacity:1;transform:none}
  .js .pf-reel:not(.is-in) .pf-reel__screen,.js .pf-reel:not(.is-in) .pf-reel__phone-screen{clip-path:inset(0)}
  .pf-reel__browser,.pf-reel__phone,.pf-reel__screen,.pf-reel__phone-screen{transition:none!important}
}

/* Website Development hero: device showcase inspired by the requested Framer preview. */
.webdev-showcase{isolation:isolate;min-height:380px;aspect-ratio:16/11;background:radial-gradient(52% 58% at 59% 48%,rgba(81,111,190,.26),transparent 74%),linear-gradient(145deg,#17264b,#0b1431 74%,#1a3264)}
.webdev-showcase__light{position:absolute;z-index:-1;left:27%;top:5%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(220,191,126,.2),rgba(81,111,190,.09) 44%,transparent 72%)}
.webdev-showcase__laptop{position:absolute;left:5%;top:13%;width:82%;filter:drop-shadow(0 24px 24px rgba(0,0,0,.42));animation:webdevLaptopIn .95s cubic-bezier(.2,.75,.25,1) both}
.webdev-showcase__display{position:relative;width:100%;aspect-ratio:1.58;padding:7px;border-radius:13px 13px 8px 8px;border:1px solid rgba(255,255,255,.68);background:linear-gradient(135deg,#f9fafc,#aeb7c6 23%,#f8f9fb 48%,#7e899e 76%,#f7f8fb);box-shadow:inset 0 0 0 1px rgba(12,23,52,.35),0 0 0 1px rgba(255,255,255,.12)}
.webdev-showcase__screen{height:100%;overflow:hidden;border-radius:7px;background:#f8f9fc;box-shadow:inset 0 0 0 1px rgba(15,25,50,.18)}
.webdev-showcase__browserbar{height:8%;min-height:18px;display:flex;align-items:center;gap:7px;padding:0 2.2%;background:linear-gradient(#f5f6f8,#e7eaf0);border-bottom:1px solid #d4d9e2}
.webdev-showcase__browserdots{display:flex;gap:3px}.webdev-showcase__browserdots i{width:5px;height:5px;border-radius:50%;background:#d98079}.webdev-showcase__browserdots i:nth-child(2){background:#e1bd68}.webdev-showcase__browserdots i:nth-child(3){background:#69ad86}
.webdev-showcase__url{width:54%;height:7px;border-radius:6px;background:#d6dbe4;box-shadow:inset 0 1px 1px rgba(20,32,60,.06)}.webdev-showcase__toolbar-dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#aeb6c6}
.webdev-showcase__site{height:92%;padding:0 5%;background:#fff}
.webdev-showcase__site-nav{height:17%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8ebf1}
.webdev-showcase__brand{display:flex;align-items:center;gap:5px;color:#152146;font-size:clamp(.34rem,.61vw,.58rem);white-space:nowrap}.webdev-showcase__brand img{width:22px;height:22px;object-fit:contain;border-radius:50%}.webdev-showcase__brand em{font-style:normal;font-weight:400;color:#66728e}
.webdev-showcase__nav-links{display:flex;align-items:center;gap:10px}.webdev-showcase__nav-links i{width:18px;height:3px;border-radius:3px;background:#adb7c9}.webdev-showcase__nav-cta{width:12%;height:15px;border-radius:12px;background:linear-gradient(100deg,#ecd596,#d4ae61)}
.webdev-showcase__site-hero{height:83%;display:grid;grid-template-columns:1.12fr .88fr;gap:4%;align-items:center;padding:2% 1% 5%}
.webdev-showcase__copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:#152044}.webdev-showcase__eyebrow{width:24%;height:4px;border-radius:3px;background:#d5ad5e}
.webdev-showcase__copy strong{font-size:clamp(.65rem,1.45vw,1.22rem);line-height:1.16;letter-spacing:-.035em;font-weight:800;color:#172348}
.webdev-showcase__copyline{width:91%;height:4px;border-radius:4px;background:#bbc5d6}.webdev-showcase__copyline--short{width:69%}.webdev-showcase__action{width:29%;height:15px;margin-top:3px;border-radius:12px;background:linear-gradient(100deg,#e9d08e,#d1a959);box-shadow:0 4px 8px rgba(198,156,75,.22)}
.webdev-showcase__hub-visual{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:72%;border-radius:10px;background:radial-gradient(circle at 50% 46%,rgba(211,174,92,.17),transparent 55%),linear-gradient(145deg,#eef2f9,#e2e8f3);border:1px solid #dce3ef}
.webdev-showcase__hub-visual::before{content:"";position:absolute;width:58%;aspect-ratio:1;border:1px solid rgba(64,87,160,.25);border-radius:50%;box-shadow:0 0 0 12px rgba(67,91,165,.035)}
.webdev-showcase__hub-visual span{position:relative;display:grid;place-items:center;width:28%;aspect-ratio:1;border-radius:50%;padding:4px;background:#fff;border:1px solid #e0e5ee;box-shadow:0 5px 12px rgba(17,31,68,.12)}
.webdev-showcase__hub-visual span:nth-child(2){transform:translateY(-13px);border-color:#d7ba77}.webdev-showcase__hub-visual img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.webdev-showcase__laptop-base{position:relative;width:108%;height:14px;margin-left:-4%;margin-top:-1px;border-radius:0 0 48% 48% / 0 0 100% 100%;border:1px solid rgba(255,255,255,.48);background:linear-gradient(180deg,#c5cad4 0%,#737e93 36%,#313d58 70%,#9da7b8 100%);box-shadow:0 5px 8px rgba(0,0,0,.22)}
.webdev-showcase__laptop-base span{position:absolute;top:0;left:42%;width:16%;height:3px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#818b9d,#e5e8ed,#858fa1)}
.webdev-showcase__phone{position:absolute;z-index:2;right:5.5%;bottom:18%;width:24%;max-width:158px;min-width:105px;aspect-ratio:.5;padding:6px;border:1px solid rgba(255,255,255,.76);border-radius:27px;background:linear-gradient(130deg,#f7f8fa,#778299 28%,#f6f7fa 54%,#313d58 83%,#d7dbe3);box-shadow:0 22px 38px rgba(0,0,0,.56),inset 0 0 0 1px rgba(13,23,48,.35);animation:webdevPhoneIn .9s cubic-bezier(.2,.75,.25,1) .24s both}
.webdev-showcase__phone-camera{position:absolute;z-index:2;top:5px;left:50%;width:22%;height:4px;border-radius:5px;background:#252e43;transform:translateX(-50%)}
.webdev-showcase__phone-screen{height:100%;overflow:hidden;border-radius:21px;background:#fff;box-shadow:inset 0 0 0 1px rgba(13,23,48,.14)}
.webdev-showcase__mobile-nav{height:15%;display:flex;align-items:center;justify-content:space-between;padding:0 9%;border-bottom:1px solid #e9edf3}.webdev-showcase__mobile-nav img{width:19px;height:19px;object-fit:contain;border-radius:50%}.webdev-showcase__mobile-nav span{width:18px;height:12px;border-top:2px solid #18264b;border-bottom:2px solid #18264b;position:relative}.webdev-showcase__mobile-nav span::after{content:"";position:absolute;left:0;right:0;top:4px;border-top:2px solid #18264b}
.webdev-showcase__mobile-hero{height:61%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:10% 11%;background:linear-gradient(180deg,#fff,#f5f7fb)}
.webdev-showcase__mobile-hero small{font-size:clamp(.32rem,.5vw,.46rem);font-weight:700;letter-spacing:.12em;color:#ba9147}.webdev-showcase__mobile-hero b{font-size:clamp(.52rem,.82vw,.72rem);line-height:1.17;letter-spacing:-.03em;color:#152044}.webdev-showcase__mobile-hero i{display:block;width:92%;height:4px;border-radius:4px;background:#c4ccda}.webdev-showcase__mobile-hero i:last-of-type{width:67%}.webdev-showcase__mobile-hero span{display:block;width:48%;height:13px;margin-top:4px;border-radius:10px;background:linear-gradient(100deg,#ecd596,#d1a959)}
.webdev-showcase__mobile-hubs{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:6%}.webdev-showcase__mobile-hubs img{width:20%;aspect-ratio:1;object-fit:contain;border-radius:50%;padding:2px;background:#f4f6fa;box-shadow:0 2px 5px rgba(13,24,50,.1)}
.webdev-showcase__caption{position:absolute;z-index:3;top:1rem;left:1rem;padding:.4rem .75rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(8,17,43,.68);color:#e6ebf7;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(8px)}
.webdev-showcase .svc-art__chips{z-index:3;bottom:.8rem}
@keyframes webdevLaptopIn{from{opacity:0;transform:translate(-20px,16px) perspective(1100px) rotateY(5deg)}to{opacity:1;transform:translate(0,0) perspective(1100px) rotateY(0)}}
@keyframes webdevPhoneIn{from{opacity:0;transform:translate(22px,24px) rotate(7deg)}to{opacity:1;transform:translate(0,0) rotate(3deg)}}
@media (max-width:640px){
 .webdev-showcase{min-height:300px;aspect-ratio:4/3}
 .webdev-showcase__laptop{left:4%;top:18%;width:84%}
 .webdev-showcase__display{padding:5px;border-radius:10px 10px 6px 6px}
 .webdev-showcase__laptop-base{height:10px}
 .webdev-showcase__phone{right:4%;bottom:20%;width:25%;min-width:94px;padding:5px;border-radius:22px}
 .webdev-showcase__phone-screen{border-radius:17px}
 .webdev-showcase__caption{top:.65rem;left:.65rem;font-size:.57rem}
 .webdev-showcase .svc-art__chips{gap:.3rem;bottom:.55rem}
 .webdev-showcase .svc-art__chips li{padding:.27rem .5rem;font-size:.6rem}
 .webdev-showcase__nav-links{gap:5px}.webdev-showcase__nav-links i{width:11px}
}
@media (prefers-reduced-motion:reduce){.webdev-showcase__laptop,.webdev-showcase__phone{animation:none;opacity:1}.webdev-showcase__laptop{transform:none}.webdev-showcase__phone{transform:rotate(3deg)}}

/* =========================================================
   Website Development hero: one-shot cinematic device reveal (replaces the earlier animation layers).
   1. the laptop turns in through a 3D perspective and settles   2. its screen is revealed along a diagonal
   3. the phone comes out from behind the laptop, moves to the front and settles beside it, its screen resolves the same way
   4. one soft reflection passes across both screens, then everything rests. Nothing loops.
   The device designs themselves are unchanged (see above); only their entrance is defined here.
   ========================================================= */
.webdev-showcase__laptop{transform-origin:50% 100%;animation:wdLaptopTurn 1.2s cubic-bezier(.16,.8,.22,1) both}
.webdev-showcase__display{transform:none;animation:none}
.webdev-showcase__screen{animation:wdScreenDiagonal 1.3s cubic-bezier(.45,.05,.2,1) .45s both}
.webdev-showcase__phone{animation:wdPhoneOut 1.3s cubic-bezier(.16,.82,.24,1) 1.05s both}
.webdev-showcase__phone-screen{animation:wdPhoneDiagonal .9s cubic-bezier(.45,.05,.2,1) 1.95s both}
.webdev-showcase__caption{animation:wdFade .6s ease 2.3s both}
.webdev-showcase .svc-art__chips{animation:wdFade .6s ease 2.5s both}
/* the reflections: a single soft band, laptop screen first, then the phone */
.webdev-showcase__display::after{content:"";position:absolute;z-index:4;inset:-30% auto -30% -55%;width:28%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),rgba(255,255,255,.04),transparent);filter:blur(2px);transform:skewX(-18deg);opacity:0;animation:wdLensLaptop 1.5s ease-in-out 2.55s both}
.webdev-showcase__phone::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.18) 47%,transparent 63%);opacity:0;animation:wdLensPhone 1.2s ease-in-out 2.85s both}

@keyframes wdLaptopTurn{
  0%{opacity:0;transform:perspective(1200px) translate3d(-34px,26px,-140px) rotateX(9deg) rotateY(-24deg) scale(.93)}
  55%{opacity:1}
  80%{transform:perspective(1200px) translate3d(2px,-2px,0) rotateX(-.6deg) rotateY(1.6deg) scale(1.004)}
  100%{opacity:1;transform:perspective(1200px) translate3d(0,0,0) rotateX(0) rotateY(0) scale(1)}
}
/* a triangle that grows from the top left corner uncovers the screen along a diagonal edge */
@keyframes wdScreenDiagonal{
  from{clip-path:polygon(0 0,0 0,0 0);filter:brightness(1.25)}
  to{clip-path:polygon(0 0,210% 0,0 210%);filter:brightness(1)}
}
@keyframes wdPhoneDiagonal{
  from{clip-path:polygon(0 0,0 0,0 0)}
  to{clip-path:polygon(0 0,210% 0,0 210%)}
}
/* behind the laptop first (lower in the stack, tucked in and a little smaller), out past its edge, then in front and settled */
@keyframes wdPhoneOut{
  0%{opacity:0;z-index:0;transform:translate3d(-62%,4%,0) scale(.88) rotate(0)}
  18%{opacity:1;z-index:0}
  50%{z-index:0;transform:translate3d(-20%,0,0) scale(.94) rotate(1deg)}
  51%{z-index:2}
  78%{z-index:2;transform:translate3d(3%,-2%,0) scale(1.02) rotate(4deg)}
  100%{opacity:1;z-index:2;transform:translate3d(0,0,0) scale(1) rotate(3deg)}
}
@keyframes wdFade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes wdLensLaptop{
  0%{opacity:0;transform:translateX(0) skewX(-18deg)}
  22%{opacity:.7}
  80%{opacity:0;transform:translateX(620%) skewX(-18deg)}
  100%{opacity:0;transform:translateX(620%) skewX(-18deg)}
}
@keyframes wdLensPhone{0%{opacity:0;transform:translateX(-34%)}35%{opacity:.4}80%,100%{opacity:0;transform:translateX(36%)}}

/* the panel must never be wider than its column (min-height plus aspect-ratio could stretch it past the screen on a phone, clipping the phone frame) */
.webdev-showcase{width:100%;max-width:100%}

/* reduced motion: the finished composition at once, no reflections */
@media (prefers-reduced-motion:reduce){
  .webdev-showcase__laptop,.webdev-showcase__screen,.webdev-showcase__phone,.webdev-showcase__phone-screen,.webdev-showcase__caption,.webdev-showcase .svc-art__chips{animation:none!important;opacity:1;filter:none;clip-path:none;transform:none}
  .webdev-showcase__phone{transform:rotate(3deg)}
  .webdev-showcase__display::after,.webdev-showcase__phone::after{animation:none!important;opacity:0}
}

/* =========================================================
   Website Development hero: what is shown INSIDE the laptop and the phone.
   A neutral, fictional "Concept Preview" landing page shown twice, as a desktop page and as its mobile version. It carries no Hub 360 Group
   name, logo, hub, service or claim: it only demonstrates how a professional website can look on both screens.
   Sizes use container units (cqw) of the screen they are in, so the text keeps the same proportions at every panel size.
   The devices and their entrance animation are defined above and are not changed here.
   ========================================================= */
.webdev-showcase__screen{container:wdscreen/inline-size}
.webdev-showcase__phone-screen{container:wdphone/inline-size}

/* ---- laptop: the desktop page ---- */
.dm{height:92%;padding:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#fbfaf7,#f3f0ea);color:#161a2c;font-family:"Poppins",sans-serif}
.dm__nav{flex:none;height:14%;display:flex;align-items:center;gap:2.4cqw;padding:0 27cqw 0 4cqw;border-bottom:1px solid #e4e0d8}
.dm__brand{display:flex;align-items:center;gap:1.2cqw;white-space:nowrap}
.dm__brand i{display:block;width:3.2cqw;height:3.2cqw;border-radius:50%;background:linear-gradient(135deg,#4f75d1,#35b9d6)}
.dm__brand b{font-size:max(2.2cqw,6.6px);font-weight:700;letter-spacing:-.01em;color:#161a2c}
.dm__links{display:flex;gap:2.4cqw;margin-left:auto;font-size:max(2cqw,6.2px);font-weight:500;color:#4b5268;white-space:nowrap}
.dm__badge{padding:.9cqw 2cqw;border-radius:999px;background:#161a2c;color:#fff;font-size:max(1.85cqw,5.8px);font-weight:600;letter-spacing:.04em;white-space:nowrap}
.dm__hero{flex:1;min-height:0;display:grid;grid-template-columns:1.1fr .9fr;gap:3cqw;align-items:center;padding:0 4cqw 1cqw}
.dm__copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.7cqw}
.dm__eyebrow{font-size:max(1.8cqw,5.6px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#4f75d1}
.dm__copy strong{font-size:max(5cqw,14px);line-height:1.1;font-weight:700;letter-spacing:-.03em;color:#161a2c}
.dm__copy strong span{background:linear-gradient(95deg,#3f55a5,#2f9bb5);-webkit-background-clip:text;background-clip:text;color:transparent}
.dm__copy p{margin:0;font-size:max(2.2cqw,6.6px);line-height:1.55;color:#4b5268}
.dm__btns{display:flex;align-items:center;gap:2.4cqw;margin-top:.6cqw}
.dm__cta{padding:1.2cqw 3cqw;border-radius:999px;background:#161a2c;color:#fff;font-size:max(2.1cqw,6.4px);font-weight:600;white-space:nowrap;box-shadow:0 1.4cqw 2.4cqw -1.2cqw rgba(22,26,44,.5)}
.dm__link{font-size:max(2.1cqw,6.4px);font-weight:600;color:#3f55a5;white-space:nowrap}
/* the visual: a restrained gradient composition, no illustration and no photo */
.dm__art{position:relative;align-self:stretch;margin:2cqw 0;border-radius:2.4cqw;overflow:hidden;background:linear-gradient(150deg,#e6ecfb,#d4def6 55%,#f4e6c7)}
.dm__orb{position:absolute;left:14%;top:18%;width:58%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#8fb0ff,#4f75d1 52%,#2f9bb5);box-shadow:0 3cqw 5cqw -2cqw rgba(63,85,165,.55)}
.dm__ring{position:absolute;left:4%;top:6%;width:78%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(63,85,165,.28)}
.dm__spark{position:absolute;right:12%;bottom:14%;width:16%;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#d8b678,#f1dca6);box-shadow:0 1.6cqw 3cqw -1.4cqw rgba(190,150,70,.6)}
@container wdscreen (max-width:300px){
  .dm__copy p,.dm__links{display:none}
  .dm__hero{grid-template-columns:1.15fr .85fr}
  .dm__copy strong{font-size:max(5.4cqw,14px)}
}

/* ---- phone: the same page, adapted ---- */
.dmp{height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#fbfaf7,#f3f0ea);color:#161a2c;font-family:"Poppins",sans-serif}
.dmp__nav{flex:none;display:flex;align-items:center;gap:3cqw;padding:10cqw 7cqw 4cqw;border-bottom:1px solid #e4e0d8}
.dmp__nav>i{display:block;width:6cqw;height:6cqw;border-radius:50%;background:linear-gradient(135deg,#4f75d1,#35b9d6)}
.dmp__nav b{font-size:5.4cqw;font-weight:700;letter-spacing:-.01em}
.dmp__burger{margin-left:auto;display:grid;gap:1.4cqw;width:6.4cqw}
.dmp__burger i{display:block;height:.9cqw;border-radius:1px;background:#161a2c}
.dmp__hero{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:3cqw;padding:7cqw 7cqw 0}
.dmp__badge{padding:1.4cqw 3.2cqw;border-radius:999px;background:#161a2c;color:#fff;font-size:4cqw;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.dmp__hero strong{font-size:9.4cqw;line-height:1.12;font-weight:700;letter-spacing:-.03em}
.dmp__hero strong span{background:linear-gradient(95deg,#3f55a5,#2f9bb5);-webkit-background-clip:text;background-clip:text;color:transparent}
.dmp__hero p{margin:0;font-size:5.4cqw;line-height:1.45;color:#4b5268}
.dmp__cta{margin-top:1cqw;padding:2.4cqw 5.4cqw;border-radius:999px;background:#161a2c;color:#fff;font-size:5.4cqw;font-weight:600;white-space:nowrap}
.dmp__art{position:relative;flex:1;min-height:0;margin:6cqw 7cqw 7cqw;border-radius:5cqw;overflow:hidden;background:linear-gradient(150deg,#e6ecfb,#d4def6 55%,#f4e6c7)}
.dmp__orb{position:absolute;left:22%;top:16%;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#8fb0ff,#4f75d1 52%,#2f9bb5);box-shadow:0 5cqw 8cqw -4cqw rgba(63,85,165,.55)}
.dmp__ring{position:absolute;left:10%;top:4%;width:80%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(63,85,165,.28)}
/* the smallest phone: the headline, the button and the visual are enough */
@container wdphone (max-width:112px){
  .dmp__hero p{display:none}
  .dmp__hero strong{font-size:10.4cqw}
}

/* ---- the content comes in with the devices (secondary to the device animation, one short stagger, no loop) ---- */
.dm__nav,.dm__copy>*,.dm__art,.dmp__nav,.dmp__hero>*,.dmp__art{animation:wdsRise .7s cubic-bezier(.2,.75,.25,1) both}
.dm__nav{animation-delay:1.05s}
.dm__copy>*:nth-child(1){animation-delay:1.2s}.dm__copy>*:nth-child(2){animation-delay:1.3s}.dm__copy>*:nth-child(3){animation-delay:1.4s}.dm__copy>*:nth-child(4){animation-delay:1.5s}
.dm__art{animation-delay:1.4s}
.dmp__nav{animation-delay:2.1s}
.dmp__hero>*:nth-child(1){animation-delay:2.2s}.dmp__hero>*:nth-child(2){animation-delay:2.3s}.dmp__hero>*:nth-child(3){animation-delay:2.4s}.dmp__hero>*:nth-child(4){animation-delay:2.5s}
.dmp__art{animation-delay:2.5s}
@keyframes wdsRise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dm__nav,.dm__copy>*,.dm__art,.dmp__nav,.dmp__hero>*,.dmp__art{animation:none!important;opacity:1;transform:none}
}

/* =========================================================
   Software Development hero: a one-time "editor to application" sequence.
   A code editor lights up on a desktop screen, its code resolves into a neutral application screen (sidebar, toolbar, table), then a
   phone shows the same application adapted for mobile, and a soft light passes over the screens. Everything is generic and conceptual:
   no company content and no data. The base styles are the finished composition (the application, no code); the animation only
   plays the way there, once, and never loops. Sizes use container units (cqw) of the screen they are in.
   ========================================================= */
.swdev-showcase{isolation:isolate;min-height:380px;aspect-ratio:16/11;width:100%;max-width:100%;
  background:radial-gradient(60% 62% at 60% 46%,rgba(255,255,255,.85),transparent 72%),radial-gradient(42% 42% at 12% 94%,rgba(216,182,120,.2),transparent 70%),linear-gradient(145deg,#eaf1fd,#d5e2f8 62%,#e6edfb);border-color:rgba(255,255,255,.7);box-shadow:0 30px 60px -34px rgba(18,33,78,.5)}
.swdev-showcase__light{position:absolute;z-index:-1;left:27%;top:5%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.8),rgba(220,191,126,.12) 46%,transparent 72%)}
.sdv__stage{position:absolute;inset:0;animation:sdvDolly 6.6s cubic-bezier(.2,.7,.2,1) both}

/* ---- devices ---- */
.sdv__laptop{position:absolute;left:5%;top:13%;width:82%;transform-origin:50% 100%;filter:drop-shadow(0 20px 20px rgba(24,40,92,.3));animation:sdvLaptopTurn 1.2s cubic-bezier(.16,.8,.22,1) both}
.sdv__display{position:relative;aspect-ratio:1.58;padding:7px;border-radius:13px 13px 8px 8px;border:1px solid #fff;background:linear-gradient(145deg,#fdfdfe,#c4cee0 45%,#f4f6fb);box-shadow:inset 0 0 0 1px rgba(22,36,82,.14),0 0 0 1px rgba(255,255,255,.5)}
.sdv__screen{position:relative;height:100%;overflow:hidden;border-radius:7px;background:#fff;container:sdvscreen/inline-size;box-shadow:inset 0 0 0 1px rgba(22,36,82,.16);animation:sdvScreenOn 1.3s cubic-bezier(.45,.05,.2,1) .45s both}
.sdv__base{position:relative;width:108%;height:14px;margin-left:-4%;margin-top:-1px;border-radius:0 0 48% 48% / 0 0 100% 100%;border:1px solid rgba(255,255,255,.8);background:linear-gradient(180deg,#f1f4fa 0%,#bcc7dc 45%,#8e9bb6 100%);box-shadow:0 5px 8px rgba(24,40,92,.25)}
.sdv__base span{position:absolute;top:0;left:42%;width:16%;height:3px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#9aa6c0,#f2f5fb,#9aa6c0)}
.sdv__phone{position:absolute;z-index:2;right:5.5%;bottom:18%;width:24%;max-width:158px;min-width:105px;aspect-ratio:.5;padding:6px;border-radius:27px;border:1px solid #fff;
  background:linear-gradient(130deg,#fdfdfe,#bfc9de 46%,#f4f6fb);box-shadow:0 20px 34px rgba(24,40,92,.35),inset 0 0 0 1px rgba(22,36,82,.14);transform:rotate(3deg);animation:sdvPhoneOut 1.3s cubic-bezier(.16,.82,.24,1) 3.2s both}
.sdv__camera{position:absolute;z-index:2;top:5px;left:50%;width:22%;height:4px;border-radius:5px;background:#2a3558;transform:translateX(-50%)}
.sdv__phone-screen{position:relative;height:100%;overflow:hidden;border-radius:21px;background:#f7f9fd;container:sdvphone/inline-size;box-shadow:inset 0 0 0 1px rgba(22,36,82,.14);animation:sdvPhoneOn .9s cubic-bezier(.45,.05,.2,1) 4.1s both}
.sdv__m{position:relative;height:100%;display:flex;flex-direction:column;gap:4cqw;padding:10cqw 7cqw 7cqw}

/* ---- the code editor (shown first, gone in the finished composition) ---- */
.sdv__code{position:absolute;inset:0;opacity:0;background:#f8faff;animation:sdvCodeOut 1.1s ease 2.5s both}
.sdv__editorbar{height:10%;display:flex;align-items:center;gap:3cqw;padding:0 3cqw;background:#eef2f9;border-bottom:1px solid #dde4f0}
.sdv__dots{display:flex;gap:1cqw}
.sdv__dots i{display:block;width:1.5cqw;height:1.5cqw;border-radius:50%;background:#c3cbdc}
.sdv__dots i:first-child{background:#d8b678}
.sdv__tab{display:flex;align-items:center;gap:1.2cqw;padding:.8cqw 2.4cqw;border-radius:1cqw 1cqw 0 0;background:#fff;color:#1c2a5c;font-family:"Poppins",sans-serif;font-size:max(2cqw,6px);font-weight:500}
.sdv__tab i{display:block;width:1.3cqw;height:1.3cqw;border-radius:50%;background:#4f75d1}
.sdv__editor{display:flex;height:90%}
.sdv__gutter{flex:none;width:6cqw;border-right:1px solid #e3e9f4;background:repeating-linear-gradient(180deg,transparent 0 3.4cqw,rgba(28,42,92,.12) 3.4cqw 3.9cqw);background-size:1.6cqw 100%;background-repeat:no-repeat;background-position:50% 2cqw}
.sdv__lines{position:relative;flex:1;padding:2.4cqw 3.5cqw;display:flex;flex-direction:column;gap:1.5cqw}
.sdv__line{display:block;height:1.5cqw;margin-left:calc(var(--ind,0) * 4cqw);width:calc(var(--w,40%) * (1 - var(--ind,0) * .08));border-radius:1cqw;background:#4f75d1;animation:sdvLine .55s ease calc(1.1s + var(--n,0) * .07s) both}
.sdv__line--k{background:#8d62dc}
.sdv__line--f{background:#2f9bb5}
.sdv__line--s{background:#d3a54f}
.sdv__line--v{background:#4f75d1}
.sdv__cursor{position:absolute;left:3.5cqw;bottom:2.4cqw;width:.7cqw;height:2.4cqw;background:#c99a45}

/* ---- the application (the finished laptop screen) ---- */
.sdv__app{position:absolute;inset:0;display:grid;grid-template-columns:22% 1fr;background:linear-gradient(160deg,#fcfdff,#eef3fc);color:#14204a;font-family:"Poppins",sans-serif;animation:sdvAppIn 1.1s cubic-bezier(.45,.05,.2,1) 2.4s both}
.sdv__side{display:flex;flex-direction:column;gap:1.6cqw;padding:3cqw 2.2cqw;background:#f1f5fc;border-right:1px solid #dfe6f2}
.sdv__mark{display:block;width:4cqw;height:4cqw;margin-bottom:1.6cqw;border-radius:1.2cqw;background:linear-gradient(135deg,#d8b678,#f1dca6)}
.sdv__nav{display:block;padding:1.1cqw 1.8cqw;border-radius:1.2cqw;font-size:max(2.15cqw,6.6px);font-weight:500;color:#566486}
.sdv__nav.is-on{background:rgba(79,117,209,.14);color:#14204a;box-shadow:inset 2px 0 0 #c99a45}
.sdv__main{display:flex;flex-direction:column;gap:2cqw;min-width:0;padding:3cqw 27cqw 3cqw 3.2cqw}
.sdv__top{display:flex;align-items:center;gap:2cqw}
.sdv__top b{font-size:max(3.4cqw,10px);font-weight:700;letter-spacing:-.01em;margin-right:auto}
.sdv__search{padding:.9cqw 3cqw .9cqw 2cqw;border-radius:999px;background:#fff;border:1px solid #d9e1ef;font-size:max(1.95cqw,6px);color:#6f7d9c}
.sdv__new{padding:1cqw 2.2cqw;border-radius:999px;background:linear-gradient(120deg,#d8b678,#f1dca6);color:#241c08;font-size:max(1.95cqw,6px);font-weight:600;white-space:nowrap}
.sdv__seg{display:inline-flex;align-self:flex-start;padding:.5cqw;border-radius:999px;background:#e6ecf7}
.sdv__seg span{padding:.7cqw 2.4cqw;border-radius:999px;font-size:max(1.9cqw,5.8px);font-weight:500;color:#566486}
.sdv__seg .is-on{background:#4f75d1;color:#fff}
.sdv__table{display:flex;flex-direction:column;gap:.9cqw;flex:1;min-height:0}
.sdv__row{display:flex;align-items:center;gap:2cqw;padding:1.1cqw 2cqw;border-radius:1.4cqw;background:#fff;border:1px solid #e0e7f3;box-shadow:0 .6cqw 1.4cqw -.8cqw rgba(24,40,92,.25);font-size:max(2.1cqw,6.4px);font-weight:500;color:#14204a}
.sdv__row span{margin-right:auto}
.sdv__chk{display:block;width:2.1cqw;height:2.1cqw;border-radius:.6cqw;border:1px solid #b6c2d9}
.sdv__chk.is-on{background:#4f75d1;border-color:#4f75d1}
.sdv__pill{font-style:normal;padding:.5cqw 1.8cqw;border-radius:999px;font-size:max(1.8cqw,5.6px);font-weight:600;white-space:nowrap}
.sdv__pill--a{background:rgba(47,155,181,.16);color:#1d7a92}
.sdv__pill--r{background:rgba(216,182,120,.32);color:#8a6420}
.sdv__pill--d{background:rgba(79,117,209,.16);color:#3f55a5}
/* the pieces of the application settle in one after another while the code gives way */
.sdv__app [style*="--n"]{animation:sdvRise .6s cubic-bezier(.2,.75,.25,1) calc(2.75s + var(--n,0) * .07s) both}

/* ---- the phone: the same application, adapted ---- */
.sdv__m-top{display:flex;align-items:center;gap:3cqw;color:#14204a;font-family:"Poppins",sans-serif}
.sdv__m-top b{font-size:7.4cqw;font-weight:700;letter-spacing:-.01em}
.sdv__burger{display:grid;gap:1.4cqw;width:6.4cqw}
.sdv__burger i{display:block;height:.9cqw;border-radius:1px;background:#14204a}
.sdv__m-search{padding:2cqw 4cqw;border-radius:999px;background:#fff;border:1px solid #d9e1ef;font-family:"Poppins",sans-serif;font-size:5cqw;color:#6f7d9c}
.sdv__m-list{display:flex;flex-direction:column;gap:3cqw}
.sdv__m-row{display:flex;flex-direction:column;align-items:flex-start;gap:1.6cqw;padding:4cqw;border-radius:4cqw;background:#fff;border:1px solid #e0e7f3;box-shadow:0 1.4cqw 3cqw -2cqw rgba(24,40,92,.3);font-family:"Poppins",sans-serif;font-size:5.4cqw;font-weight:500;color:#14204a}
.sdv__m-row .sdv__pill{font-size:4.2cqw;padding:.8cqw 3cqw}
.sdv__fab{position:absolute;right:7cqw;bottom:7cqw;display:grid;place-items:center;width:13cqw;height:13cqw;border-radius:50%;background:linear-gradient(130deg,#d8b678,#f1dca6);color:#241c08;font-family:"Poppins",sans-serif;font-size:8cqw;font-weight:600;line-height:1;box-shadow:0 3cqw 6cqw -2cqw rgba(150,110,40,.5)}
@container sdvphone (max-width:112px){.sdv__m-row:nth-child(3){display:none}}

/* ---- soft light passes (laptop screen, then the phone), once ---- */
.sdv__display::after{content:"";position:absolute;z-index:4;inset:-30% auto -30% -55%;width:28%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),rgba(255,236,190,.35),transparent);filter:blur(2px);transform:skewX(-18deg);opacity:0;animation:sdvLens 1.6s ease-in-out 5s both}
.sdv__phone::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.7) 47%,transparent 63%);opacity:0;animation:sdvLensPhone 1.2s ease-in-out 5.4s both}
.swdev-showcase .svc-art__chips{z-index:3;bottom:.8rem;animation:sdvFade .6s ease .6s both}
.swdev-showcase .svc-art__chips li{background:rgba(255,255,255,.92);color:#14204a;border:1px solid rgba(22,36,82,.14);box-shadow:0 6px 14px -8px rgba(24,40,92,.4);-webkit-backdrop-filter:none;backdrop-filter:none}

@keyframes sdvDolly{from{transform:scale(1.035)}to{transform:none}}
@keyframes sdvLaptopTurn{
  0%{opacity:0;transform:perspective(1200px) translate3d(-34px,26px,-140px) rotateX(9deg) rotateY(-24deg) scale(.93)}
  55%{opacity:1}
  80%{transform:perspective(1200px) translate3d(2px,-2px,0) rotateX(-.6deg) rotateY(1.6deg) scale(1.004)}
  100%{opacity:1;transform:perspective(1200px) translate3d(0,0,0) rotateX(0) rotateY(0) scale(1)}
}
@keyframes sdvScreenOn{from{clip-path:polygon(0 0,0 0,0 0)}to{clip-path:polygon(0 0,210% 0,0 210%)}}
@keyframes sdvLine{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes sdvCodeOut{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(.985)}}
@keyframes sdvAppIn{from{clip-path:polygon(0 0,0 0,0 0)}to{clip-path:polygon(0 0,210% 0,0 210%)}}
@keyframes sdvRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sdvPhoneOut{
  0%{opacity:0;z-index:0;transform:translate3d(-62%,4%,0) scale(.88) rotate(0)}
  18%{opacity:1;z-index:0}
  50%{z-index:0;transform:translate3d(-20%,0,0) scale(.94) rotate(1deg)}
  51%{z-index:2}
  78%{z-index:2;transform:translate3d(3%,-2%,0) scale(1.02) rotate(4deg)}
  100%{opacity:1;z-index:2;transform:translate3d(0,0,0) scale(1) rotate(3deg)}
}
@keyframes sdvPhoneOn{from{clip-path:polygon(0 0,0 0,0 0)}to{clip-path:polygon(0 0,210% 0,0 210%)}}
@keyframes sdvLens{0%{opacity:0;transform:translateX(0) skewX(-18deg)}22%{opacity:.7}80%{opacity:0;transform:translateX(620%) skewX(-18deg)}100%{opacity:0;transform:translateX(620%) skewX(-18deg)}}
@keyframes sdvLensPhone{0%{opacity:0;transform:translateX(-34%)}35%{opacity:.4}80%,100%{opacity:0;transform:translateX(36%)}}
@keyframes sdvFade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* tablet and phone: the same composition on a smaller panel (the panel never gets wider than its column) */
@media (max-width:640px){
  .swdev-showcase{min-height:300px;aspect-ratio:4/3}
  .sdv__laptop{left:4%;top:18%;width:84%}
  .sdv__display{padding:5px;border-radius:10px 10px 6px 6px}
  .sdv__base{height:10px}
  .sdv__phone{right:4%;bottom:20%;width:25%;min-width:94px;padding:5px;border-radius:22px}
  .sdv__phone-screen{border-radius:17px}
  .swdev-showcase .svc-art__chips{gap:.3rem;bottom:.55rem}
  .swdev-showcase .svc-art__chips li{padding:.27rem .5rem;font-size:.6rem}
}
/* a narrow laptop screen: keep the sidebar labels and rows, drop the extras */
@container sdvscreen (max-width:300px){
  .sdv__search,.sdv__seg{display:none}
}

/* reduced motion: the finished composition at once, no passes */
@media (prefers-reduced-motion:reduce){
  .sdv__stage,.sdv__laptop,.sdv__screen,.sdv__line,.sdv__code,.sdv__app,.sdv__app [style*="--n"],.sdv__phone,.sdv__phone-screen,.swdev-showcase .svc-art__chips{animation:none!important}
  .sdv__laptop{opacity:1;transform:none}
  .sdv__code{opacity:0}
  .sdv__display::after,.sdv__phone::after{animation:none!important;opacity:0}
}

/* =========================================================
   App Development hero: a short "app in use" showcase that fills the panel.
   Three layers share the scene: a second app screen set behind and angled, the main phone in the centre, and close-up interface details
   around them. In about 3.5 seconds the phone is used (a tap on the home screen opens the details screen), the details around it respond,
   and everything stops on a finished composition. The app is fictional and generic: no Hub 360 content.
   The base styles ARE the finished composition (so it also shows without JavaScript or with reduced motion). The sequence only runs when
   the inline script in app-development.html adds .is-play (once, when the panel first comes into view).
   Positions and sizes use container units (cqw) of the scene, so the composition keeps its proportions at every panel width.
   ========================================================= */
.appx{display:flex;flex-direction:column;place-items:initial;aspect-ratio:auto;border-color:rgba(255,255,255,.75);
  background:linear-gradient(165deg,#fdfaf3,#f1e8d2 58%,#f6eedc);box-shadow:0 30px 60px -34px rgba(8,16,48,.7)}
.appx__sprite{position:absolute;width:0;height:0;overflow:hidden}
.appx__i{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* scene */
.appx__scene{position:relative;flex:none;width:100%;aspect-ratio:4/3;overflow:hidden;container:appxs/inline-size;perspective:1400px;font-family:"Poppins",sans-serif}
.appx__bg{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(112deg,transparent 33%,rgba(216,182,120,.2) 33% 56%,transparent 56%),
    linear-gradient(112deg,transparent 70%,rgba(79,117,209,.1) 70% 100%),
    radial-gradient(50% 62% at 50% 40%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%),
    radial-gradient(circle,rgba(20,32,74,.14) 1px,transparent 1.3px) 0 0/2.8cqw 2.8cqw}
.appx__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(253,250,243,0) 70%,rgba(241,232,210,.9))}

/* layers: the two phones */
.appx__layer{position:absolute;aspect-ratio:9/19}
.appx__layer--a{z-index:3;left:34cqw;top:4.6cqw;width:33cqw}
.appx__layer--b{z-index:1;left:8cqw;top:11cqw;width:29cqw;transform:rotateY(22deg);transform-origin:100% 50%}
.appx__phone{position:relative;width:100%;height:100%}

/* the device: navy titanium with a fine champagne rim and a soft gloss */
.appx__body{container:appxp/inline-size;position:relative;width:100%;height:100%;padding:3.3%;border-radius:15%/7.1%;
  background:linear-gradient(145deg,#3a4672,#111b40 42%,#232f5e);
  box-shadow:0 0 0 1.5px #cdb27a,0 0 0 2.6px rgba(255,255,255,.6),0 3.4cqw 5cqw -2cqw rgba(14,26,64,.6),0 1cqw 2cqw -1cqw rgba(14,26,64,.4),inset 0 0 0 1.5px rgba(255,255,255,.1)}
.appx__body::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 30%,transparent 68%,rgba(255,255,255,.1))}
.appx__key{position:absolute;width:1.6%;border-radius:2px;background:linear-gradient(90deg,#bfa46c,#ecd9a8)}
.appx__key--p{right:-1.7%;top:25%;height:11%}
.appx__key--v1{left:-1.7%;top:18%;height:5%}
.appx__key--v2{left:-1.7%;top:26%;height:8%}

/* the screen */
.appx__screen{position:relative;height:100%;overflow:hidden;border-radius:12cqw;background:linear-gradient(180deg,#fdfdff,#eef3fc);color:#14204a;box-shadow:inset 0 0 0 1px rgba(22,36,82,.1)}
.appx__island{position:absolute;z-index:5;top:2.6cqw;left:50%;width:25cqw;height:7cqw;margin-left:-12.5cqw;border-radius:99px;background:#0b1126}
.appx__status{position:absolute;z-index:4;top:2.6cqw;left:0;right:0;height:7cqw;display:flex;align-items:center;justify-content:space-between;padding:0 9cqw;font-size:max(4.2cqw,6px);font-weight:600}
.appx__sys{display:flex;align-items:flex-end;gap:.7cqw}
.appx__sys i{display:block;width:.9cqw;border-radius:1px;background:#14204a}
.appx__sys i:nth-child(1){height:1.6cqw}.appx__sys i:nth-child(2){height:2.6cqw}.appx__sys i:nth-child(3){height:3.6cqw}
.appx__bat{display:block;width:5cqw;height:2.6cqw;margin-left:1.2cqw;border-radius:.9cqw;border:1px solid #14204a;background:linear-gradient(90deg,#14204a 70%,transparent 70%)}

/* views inside a phone (sizes are cqw of the phone body) */
.appx__view{position:absolute;inset:0 0 15.5cqw;display:flex;flex-direction:column;gap:4cqw;padding:13cqw 6.5cqw 0}
.appx__home{opacity:0;pointer-events:none}
.appx__h{display:flex;align-items:center;justify-content:space-between}
.appx__h em{display:block;font-style:normal;font-size:max(4.2cqw,6.2px);font-weight:500;color:#6f7d9c}
.appx__h b{display:block;font-size:max(8.6cqw,11px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.appx__ico{display:grid;place-items:center;width:10.5cqw;height:10.5cqw;border-radius:50%;background:#fff;border:1px solid #dbe3f1;box-shadow:0 1.2cqw 3cqw -2cqw rgba(24,40,92,.4);color:#14204a;font-size:5.2cqw}
.appx__search{display:flex;align-items:center;gap:2.4cqw;height:11cqw;padding:0 3.8cqw;border-radius:99px;background:#fff;border:1px solid #dbe3f1;font-size:max(4.6cqw,6.4px);color:#7a87a6}
.appx__search .appx__i{font-size:4.8cqw;flex:none}
.appx__card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3cqw;padding:5.4cqw;border-radius:6cqw;color:#fff;
  background:radial-gradient(90% 90% at 100% 0,rgba(216,182,120,.38),transparent 60%),linear-gradient(145deg,#1f3270,#101c45);box-shadow:0 4cqw 7cqw -4cqw rgba(16,28,69,.7)}
.appx__badge{padding:1cqw 2.8cqw;border-radius:99px;background:#e6cf94;color:#14204a;font-size:max(3.6cqw,5.6px);font-weight:600;letter-spacing:.03em}
.appx__card strong{max-width:82%;font-size:max(7.2cqw,9.4px);font-weight:700;line-height:1.14;letter-spacing:-.015em}
.appx__cta{position:relative;display:inline-flex;align-items:center;gap:1.8cqw;margin-top:1cqw;padding:2.8cqw 5cqw;border-radius:99px;background:linear-gradient(135deg,#f3dfae,#d8b678);color:#14204a;font-size:max(4.6cqw,6.4px);font-weight:600;white-space:nowrap}
.appx__cta .appx__i{font-size:4.6cqw}
.appx__sec{display:flex;justify-content:space-between;margin-top:.6cqw;font-size:max(5cqw,6.6px)}
.appx__sec b{font-weight:700}
.appx__cats{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw}
.appx__cats>span{display:grid;justify-items:center;gap:1.8cqw;padding:3.6cqw 0 3cqw;border-radius:4.4cqw;background:#fff;border:1px solid #e0e7f3;box-shadow:0 1.2cqw 3cqw -2cqw rgba(24,40,92,.3);font-size:max(4cqw,5.8px);font-weight:500;color:#33436f}
.appx__cats i{display:grid;place-items:center;width:9.4cqw;height:9.4cqw;border-radius:50%;font-size:5.2cqw}
.appx__tile--blue{background:rgba(79,117,209,.16);color:#3f55a5}
.appx__tile--gold{background:rgba(216,182,120,.34);color:#8a6420}
.appx__list{display:flex;flex-direction:column;gap:2.6cqw;margin:0;padding:0;list-style:none}
.appx__list li{display:flex;align-items:center;gap:3cqw;padding:2.8cqw 3.4cqw;border-radius:4cqw;background:#fff;border:1px solid #e0e7f3;box-shadow:0 1.2cqw 3cqw -2cqw rgba(24,40,92,.28);font-size:max(4.8cqw,6.5px);font-weight:500}
.appx__list b{font-weight:500}
.appx__tile{display:grid;place-items:center;flex:none;width:8.6cqw;height:8.6cqw;border-radius:2.6cqw;font-size:4.8cqw}
.appx__next{margin-left:auto;font-size:4.4cqw;color:#9aa6c0}
.appx__seg{display:inline-flex;align-self:flex-start;padding:.7cqw;border-radius:99px;background:#e6ecf7;font-size:max(4.4cqw,6px);font-weight:500;color:#566486}
.appx__seg span{padding:1.6cqw 4.4cqw;border-radius:99px}
.appx__seg .is-on{background:#4f75d1;color:#fff}

/* details view: the main phone's finished state */
.appx__nav{display:flex;align-items:center;justify-content:space-between}
.appx__nav b{font-size:max(5.6cqw,7.4px);font-weight:700}
.appx__cover{position:relative;flex:none;height:35cqw;border-radius:5cqw;overflow:hidden;
  background:radial-gradient(70% 90% at 88% 6%,rgba(216,182,120,.65),transparent 62%),linear-gradient(145deg,#2a4294,#101c45);box-shadow:0 4cqw 7cqw -4cqw rgba(16,28,69,.6)}
.appx__cover .appx__i{position:absolute;left:6cqw;bottom:5cqw;width:15cqw;height:15cqw;color:#f3dfae;stroke-width:1.3}
.appx__cover::after{content:"";position:absolute;right:-8cqw;top:-8cqw;width:34cqw;height:34cqw;border-radius:50%;border:1px solid rgba(255,255,255,.22)}
.appx__copy strong{display:block;font-size:max(7cqw,9px);font-weight:700;letter-spacing:-.015em;line-height:1.15}
.appx__copy p{margin:1.4cqw 0 0;font-size:max(4.6cqw,6.3px);line-height:1.4;color:#566486}
.appx__steps{display:flex;flex-direction:column;gap:2.4cqw;margin:0;padding:0;list-style:none}
.appx__steps li{display:flex;align-items:center;gap:3cqw;padding:2.6cqw 3.2cqw;border-radius:4cqw;background:#fff;border:1px solid #e0e7f3;box-shadow:0 1.2cqw 3cqw -2cqw rgba(24,40,92,.28);font-size:max(4.8cqw,6.5px)}
.appx__steps b{font-weight:500}
.appx__dot{display:grid;place-items:center;flex:none;width:6.8cqw;height:6.8cqw;border-radius:50%;background:linear-gradient(140deg,#f6e4b6,#d8b678);color:#14204a;font-size:4cqw}
.appx__dot .appx__i{stroke-width:2.6}
.appx__dot--open{background:#fff;border:1.5px solid #b6c2d9}
.appx__btn{margin-top:auto;margin-bottom:3.5cqw;padding:3.6cqw 0;border-radius:99px;text-align:center;background:linear-gradient(145deg,#1f3270,#101c45);color:#fff;font-size:max(5.2cqw,7px);font-weight:600;box-shadow:0 3cqw 6cqw -3cqw rgba(16,28,69,.7)}

/* bottom navigation */
.appx__tabs{position:absolute;z-index:3;left:0;right:0;bottom:0;height:15.5cqw;display:flex;justify-content:space-around;align-items:flex-start;padding:2.8cqw 4cqw 0;background:rgba(255,255,255,.94);border-top:1px solid #e3e9f4}
.appx__tabs::after{content:"";position:absolute;left:50%;bottom:2cqw;width:30cqw;height:1cqw;margin-left:-15cqw;border-radius:99px;background:rgba(20,32,74,.8)}
.appx__tab{position:relative;display:grid;place-items:center;width:10.4cqw;height:8.4cqw;border-radius:99px;color:#8591b0;font-size:5.6cqw}
.appx__tab.is-on{background:rgba(79,117,209,.14);color:#14204a}

/* touch indicator (only seen during the demo) */
.appx__touch{position:absolute;z-index:4;left:76%;top:56%;width:12cqw;height:12cqw;margin:-6cqw 0 0 -6cqw;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid rgba(20,32,74,.55);box-shadow:0 1.4cqw 3cqw rgba(14,26,64,.35);opacity:0;pointer-events:none}
.appx__touch::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid rgba(20,32,74,.5);opacity:0}

/* glass reflection and its one-time sweep */
.appx__glass{position:absolute;z-index:7;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.3) 0,rgba(255,255,255,.07) 24%,transparent 38%)}
.appx__glass::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:32%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-150%) skewX(-16deg);opacity:0}

/* layer 3: close-up interface details (their sizes follow the em of each piece) */
.appx__comp{position:absolute;z-index:4;display:flex;align-items:center;gap:.7em;padding:.75em .9em;border-radius:1.1em;font-size:2.4cqw;font-weight:600;line-height:1.2;color:#14204a;
  background:#fff;border:1px solid rgba(22,36,82,.1);box-shadow:0 2.4cqw 4.6cqw -2cqw rgba(18,33,78,.5),0 .5cqw 1.2cqw rgba(18,33,78,.12)}
.appx__comp .appx__i{font-size:1.2em;flex:none}
.appx__comp .appx__tile{width:2.2em;height:2.2em;border-radius:.75em;font-size:1em}
.appx__comp .appx__tile .appx__i{font-size:1.15em}
.appx__comp b{font-weight:600}
.appx__comp--toggle{left:2cqw;top:3.4cqw;width:25cqw}
.appx__comp--task{left:1.5cqw;top:57cqw;width:27cqw}
.appx__comp--task b{white-space:nowrap}
.appx__comp--seg{left:70cqw;top:6cqw;width:28cqw;padding:.45em}
.appx__comp--next{left:69cqw;top:23cqw;width:30cqw}
.appx__comp--open{left:71cqw;top:44cqw;width:27cqw;justify-content:center;padding:.85em 1em;border:0;color:#14204a;background:linear-gradient(135deg,#f6e4b6,#d8b678);box-shadow:0 2.4cqw 4.6cqw -2cqw rgba(150,110,40,.6)}
.appx__comp--fab{left:83cqw;top:57cqw;width:10.5cqw;height:10.5cqw;padding:0;justify-content:center;border:0;border-radius:50%;color:#fff;background:linear-gradient(145deg,#2a4294,#101c45);font-size:4.4cqw;box-shadow:0 2.4cqw 4.6cqw -2cqw rgba(16,28,69,.7)}
.appx__comp--fab .appx__i{font-size:1em}
.appx__comp b{flex:1}
.appx__comp--open b{flex:none}
.appx__sw{position:relative;flex:none;width:2.6em;height:1.45em;border-radius:99px;background:#4f75d1}
.appx__sw i{position:absolute;top:.17em;left:1.3em;width:1.11em;height:1.11em;border-radius:50%;background:#fff;box-shadow:0 .12em .3em rgba(0,0,0,.3)}
.appx__dot--sm{width:1.7em;height:1.7em;font-size:1em}
.appx__dot--sm .appx__i{font-size:1em}
.appx__segc{display:flex;width:100%;border-radius:99px;background:#e6ecf7;font-weight:500;color:#566486}
.appx__segc span{flex:1;padding:.55em 0;border-radius:99px;text-align:center}
.appx__segc .is-on{background:#4f75d1;color:#fff;font-weight:600}
.appx__next2{display:flex;flex-direction:column;min-width:0}
.appx__next2 em{font-style:normal;font-size:.8em;font-weight:500;color:#6f7d9c}
.appx__next2 b{font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the footer band with the three topics */
.appx .svc-art__chips{position:static;flex:none;padding:.8rem 1rem;background:rgba(255,255,255,.72);border-top:1px solid rgba(22,36,82,.08)}
.appx .svc-art__chips li{background:#fff;color:#14204a;border:1px solid rgba(22,36,82,.14);box-shadow:0 6px 14px -8px rgba(24,40,92,.4);-webkit-backdrop-filter:none;backdrop-filter:none}

/* before the demo plays (script present, panel not yet in view): hold the scene back so the finished composition does not flash */
.appx.is-armed:not(.is-play) .appx__scene{opacity:0}

/* ---- the sequence: about 3.5 seconds, once ---- */
.appx.is-play .appx__layer--b{animation:appxInB .9s cubic-bezier(.2,.8,.2,1) .15s both}
.appx.is-play .appx__layer--a{animation:appxInA .9s cubic-bezier(.2,.8,.2,1) 0s both}
.appx.is-play .appx__home>[style*="--n"]{animation:appxRise .55s cubic-bezier(.2,.75,.25,1) calc(.4s + var(--n)*.07s) both}
.appx.is-play .appx__comp{animation:appxPopIn .55s cubic-bezier(.2,.8,.25,1.1) calc(.5s + var(--n)*.09s) both}
.appx.is-play .appx__touch{animation:appxTouch 1s ease .95s both}
.appx.is-play .appx__touch::after{animation:appxRipple .6s ease-out 1.52s both}
.appx.is-play .appx__cta{animation:appxPress .35s ease 1.45s both}
.appx.is-play .appx__home{animation:appxHomeOut .6s ease 1.7s both}
.appx.is-play .appx__detail{animation:appxDetailIn .65s cubic-bezier(.2,.75,.25,1) 1.7s both}
.appx.is-play .appx__detail>[style*="--n"]{animation:appxRise .55s cubic-bezier(.2,.75,.25,1) calc(1.95s + var(--n)*.08s) both}
.appx.is-play .appx__dot--1{animation:appxPop .5s cubic-bezier(.3,1.4,.5,1) 2.45s both}
.appx.is-play .appx__dot--2{animation:appxPop .5s cubic-bezier(.3,1.4,.5,1) 2.65s both}
.appx.is-play .appx__dot--sm{animation:appxPop .5s cubic-bezier(.3,1.4,.5,1) 2.85s both}
.appx.is-play .appx__sw{animation:appxSwBg .3s ease 1.95s both}
.appx.is-play .appx__sw i{animation:appxSwKnob .3s ease 1.95s both}
.appx.is-play .appx__layer--a .appx__glass::after{animation:appxSweep 1.2s ease 2.3s both}
.appx.is-play .svc-art__chips{animation:appxFade .6s ease .6s both}

@keyframes appxInA{
  0%{opacity:0;transform:translate3d(0,9cqw,0) rotateX(9deg) scale(.95)}
  60%{opacity:1}
  100%{opacity:1;transform:none}}
@keyframes appxInB{
  0%{opacity:0;transform:translate3d(-9cqw,3cqw,0) rotateY(38deg)}
  100%{opacity:1;transform:rotateY(22deg)}}
@keyframes appxPopIn{from{opacity:0;transform:translateY(3cqw) scale(.9)}to{opacity:1;transform:none}}
@keyframes appxRise{from{opacity:0;transform:translateY(8%)}to{opacity:1;transform:none}}
@keyframes appxTouch{
  0%{opacity:0;transform:translate(60%,90%) scale(1.25)}
  35%{opacity:1;transform:none}
  58%{opacity:1;transform:scale(.8)}
  78%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:translate(8%,12%)}}
@keyframes appxRipple{from{opacity:.8;transform:scale(.7)}to{opacity:0;transform:scale(2.6)}}
@keyframes appxPress{0%,100%{transform:none;filter:none}50%{transform:scale(.93);filter:brightness(.93)}}
@keyframes appxHomeOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-14%)}}
@keyframes appxDetailIn{from{opacity:0;transform:translateX(16%)}to{opacity:1;transform:none}}
@keyframes appxPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes appxSwBg{from{background:#c9d2e6}to{background:#4f75d1}}
@keyframes appxSwKnob{from{left:.17em}to{left:1.3em}}
@keyframes appxSweep{0%{opacity:0;transform:translateX(-150%) skewX(-16deg)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(420%) skewX(-16deg)}}
@keyframes appxFade{from{opacity:0}to{opacity:1}}

/* tablet and stacked layout: same composition, panel capped in width */
@media (max-width:1000px){
  .appx{max-width:640px}
}
/* phone: a taller scene so the main phone is large; the pieces are re-placed and slightly larger */
@media (max-width:640px){
  .appx__scene{aspect-ratio:10/11}
  .appx__layer--a{left:25cqw;top:6.5cqw;width:50cqw}
  .appx__layer--b{left:1cqw;top:19cqw;width:35cqw}
  .appx__comp{font-size:3.3cqw}
  .appx__comp--toggle{left:59.5cqw;top:9cqw;width:39.5cqw;font-size:3cqw}
  .appx__comp--seg{left:2cqw;top:6cqw;width:36cqw}
  .appx__comp--task{left:2cqw;top:84cqw;width:38cqw}
  .appx__comp--next{display:none}
  .appx__comp--open{left:62cqw;top:73cqw;width:36cqw}
  .appx__comp--fab{left:84cqw;top:88cqw;width:13cqw;height:13cqw;font-size:5.4cqw}
  .appx .svc-art__chips{gap:.3rem;padding:.65rem .8rem}
  .appx .svc-art__chips li{padding:.27rem .5rem;font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .appx *,.appx *::before,.appx *::after{animation:none!important}
}

/* =========================================================
   Digital Marketing hero: a short "campaign studio" showcase.
   A desktop display shows a fictional campaign workspace; a phone shows the same creative as a clean social post; three channel cards show
   the creative adapted for each format. In about 3.5 seconds the workspace builds, the creative comes into focus and is selected,
   a channel is switched on, the creative travels to the phone, and the format cards slide in. It then stops on the finished composition.
   Everything is generic and fictional: no Hub 360 content, no real platform logos, no results or metrics.
   The base styles ARE the finished composition (so it also shows without JavaScript or with reduced motion). The sequence only runs when
   the inline script in digital-marketing.html adds .is-play (once, when the panel first comes into view).
   The phone body and its parts reuse the .appx__* styles of the App Development panel. Sizes use container units (cqw) of the scene.
   ========================================================= */
.dmk{display:flex;flex-direction:column;place-items:initial;aspect-ratio:auto;border-color:rgba(255,255,255,.3);
  background:linear-gradient(165deg,#c9d3e6,#adbbd6 60%,#bcc7dc);box-shadow:0 30px 60px -34px rgba(8,16,48,.7)}
.dmk__scene{position:relative;flex:none;width:100%;aspect-ratio:4/3;overflow:hidden;container:dmks/inline-size;font-family:"Poppins",sans-serif;color:#14204a}
.dmk__bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 40% 30%,rgba(231,237,249,.55),rgba(231,237,249,0) 72%),radial-gradient(40% 40% at 96% 4%,rgba(216,182,120,.3),transparent 70%),radial-gradient(circle,rgba(20,32,74,.16) 1px,transparent 1.3px) 0 0/2.8cqw 2.8cqw}
.dmk__desk{position:absolute;left:0;right:0;bottom:0;height:19cqw;background:linear-gradient(180deg,#d3cdc1,#bfb8aa);border-top:1px solid rgba(255,255,255,.45);box-shadow:0 -1.5cqw 3cqw -2cqw rgba(24,40,92,.35)}

/* ---- the desktop display ---- */
.dmk__monitor{position:absolute;z-index:2;left:3cqw;top:5cqw;width:70cqw}
.dmk__bezel{position:relative;padding:1.1cqw 1.1cqw 3.2cqw;border-radius:2cqw;background:linear-gradient(180deg,#dfe5f0,#a9b5cc 55%,#c3cbdc);
  box-shadow:0 0 0 1px rgba(22,36,82,.3),0 3.4cqw 5cqw -2cqw rgba(14,26,64,.65),0 1cqw 2cqw -1cqw rgba(14,26,64,.4)}
.dmk__cam{position:absolute;top:.45cqw;left:50%;width:.6cqw;height:.6cqw;margin-left:-.3cqw;border-radius:50%;background:#4e5a7c}
.dmk__screen{position:relative;aspect-ratio:16/10;overflow:hidden;container:dmkm/inline-size;border-radius:.8cqw;background:#101a40;outline:1.5px solid #0b1230}
.dmk__neck{display:block;width:9cqw;height:4.6cqw;margin:0 auto;background:linear-gradient(90deg,#8995b0,#d5dbe8,#8995b0)}
.dmk__base{display:block;width:24cqw;height:1.4cqw;margin:0 auto;border-radius:1cqw;background:linear-gradient(180deg,#d9dfeb,#8995b0);box-shadow:0 1.2cqw 2cqw -.6cqw rgba(14,26,64,.55)}

/* the workspace (sizes are cqw of the display screen) */
.dmk__ui{position:absolute;inset:0;display:grid;grid-template-columns:9% 67% 24%;grid-template-rows:11.2% 1fr;background:#101a40;color:#e8edfb}
.dmk__top{grid-column:1/-1;display:flex;align-items:center;gap:2cqw;padding:0 3cqw;background:#0b1332;border-bottom:1px solid rgba(255,255,255,.08);font-size:3.2cqw}
.dmk__mark{display:block;width:3.8cqw;height:3.8cqw;border-radius:1cqw;background:linear-gradient(135deg,#f3dfae,#d8b678)}
.dmk__top b{font-weight:700;white-space:nowrap}
.dmk__draft{padding:.6cqw 1.8cqw;border-radius:99px;background:rgba(255,255,255,.09);color:#a9b5dc;font-size:2.4cqw;font-weight:500}
.dmk__acts{display:flex;gap:1.6cqw;margin-left:auto}
.dmk__btn{padding:1cqw 2.8cqw;border-radius:99px;background:linear-gradient(135deg,#f3dfae,#d8b678);color:#14204a;font-size:2.5cqw;font-weight:600}
.dmk__btn--ghost{background:transparent;color:#e1e7fa;border:1px solid rgba(255,255,255,.26)}
.dmk__tools{display:flex;flex-direction:column;align-items:center;gap:1.6cqw;padding-top:2.6cqw;background:#0d1638;border-right:1px solid rgba(255,255,255,.08)}
.dmk__tool{display:grid;place-items:center;width:5.6cqw;height:5.6cqw;border-radius:1.4cqw;color:#8e9bc7;font-size:3cqw}
.dmk__tool.is-on{background:rgba(53,185,214,.2);color:#8fe3f3}
.dmk__canvas{display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,rgba(20,32,74,.2) 1px,transparent 1.2px) 0 0/2.4cqw 2.4cqw,#d4d0c8}
.dmk__focus{position:relative;width:53.7%}
.dmk__focus .dmk__cr{box-shadow:0 3cqw 6cqw -2cqw rgba(16,28,69,.55)}
.dmk__sel{position:absolute;inset:-1.4cqw;border:1.5px solid #3f6fe0;border-radius:1cqw;pointer-events:none}
.dmk__sel i{position:absolute;width:2cqw;height:2cqw;background:#fff;border:1.5px solid #3f6fe0;border-radius:.5cqw}
.dmk__sel i:nth-child(1){left:-1.1cqw;top:-1.1cqw}.dmk__sel i:nth-child(2){right:-1.1cqw;top:-1.1cqw}
.dmk__sel i:nth-child(3){left:-1.1cqw;bottom:-1.1cqw}.dmk__sel i:nth-child(4){right:-1.1cqw;bottom:-1.1cqw}
.dmk__panel{display:flex;flex-direction:column;gap:1.3cqw;padding:2.4cqw 1.7cqw;background:#0d1638;border-left:1px solid rgba(255,255,255,.08);font-size:2.4cqw}
.dmk__ptitle{font-size:2.6cqw;font-weight:700;color:#eef1fb}
.dmk__ptitle--2{margin-top:1.2cqw}
.dmk__ch{display:flex;align-items:center;justify-content:space-between;gap:.8cqw;padding:1.2cqw 1.2cqw 1.2cqw 1.5cqw;border-radius:1.4cqw;background:rgba(216,182,120,.14);border:1px solid rgba(216,182,120,.5);font-weight:500;color:#f1e4c0;white-space:nowrap}
.dmk__ch .appx__sw{font-size:1.9cqw;background:#35a9d4}
.dmk__when{display:flex;align-items:center;gap:1.2cqw;padding:1.3cqw 1.5cqw;border-radius:1.4cqw;background:rgba(255,255,255,.07);font-size:2.2cqw;font-weight:500;color:#cdd6f2;white-space:nowrap}
.dmk__when .appx__i{font-size:2.8cqw;flex:none;color:#7fe0f2}
.dmk__cursor{position:absolute;z-index:6;left:0;top:0;width:4.6cqw;height:4.6cqw;fill:#14204a;stroke:#fff;stroke-width:1.4;stroke-linejoin:round;opacity:0;pointer-events:none;filter:drop-shadow(0 .5cqw .7cqw rgba(0,0,0,.35))}
.dmk__glare{position:absolute;z-index:7;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.02) 22%,transparent 36%)}
.dmk__glare::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);transform:translateX(-150%) skewX(-16deg);opacity:0}

/* ---- the creative (one design, used large, in the phone and as thumbnails; sizes are cqw of the creative itself) ---- */
.dmk__cr{position:relative;container:dmkcr/inline-size;width:100%;aspect-ratio:var(--ar,4/5);border-radius:4%;overflow:hidden;color:#fff;
  background:radial-gradient(90% 70% at 100% 0,rgba(79,117,209,.6),transparent 60%),linear-gradient(155deg,#2a4294,#0f1b45)}
.dmk__cr-orb{position:absolute;right:-14cqw;bottom:-10cqw;width:62cqw;height:62cqw;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fbeec9,#d8b678 58%,#b48a3c);box-shadow:0 4cqw 8cqw -3cqw rgba(0,0,0,.45)}
.dmk__cr-ring{position:absolute;right:-6cqw;top:-18cqw;width:60cqw;height:60cqw;border-radius:50%;border:1px solid rgba(255,255,255,.22)}
.dmk__cr-in{position:absolute;inset:0;padding:9cqw;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between}
.dmk__cr-tag{padding:1.6cqw 4cqw;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);font-size:5.6cqw;font-weight:600;letter-spacing:.04em}
.dmk__cr strong{font-size:12.6cqw;line-height:1.08;font-weight:700;letter-spacing:-.02em;text-shadow:0 .6cqw 2cqw rgba(8,14,40,.4)}
.dmk__cr-cta{padding:2.6cqw 6cqw;border-radius:99px;background:#fff;color:#14204a;font-size:6cqw;font-weight:600}
/* thumbnails: the same composition without small text */
.dmk__cr--mini .dmk__cr-tag,.dmk__cr--mini .dmk__cr-cta,.dmk__cr--mini strong{display:none}
.dmk__cr--mini .dmk__cr-in::before{content:"";width:54%;height:9cqw;border-radius:99px;background:rgba(255,255,255,.88)}
.dmk__cr--wide .dmk__cr-in::before{height:20cqw;width:34%}
.dmk__cr--wide .dmk__cr-orb{width:40cqw;height:40cqw;right:-6cqw;bottom:-14cqw}
.dmk__cr--wide .dmk__cr-ring{display:none}

/* ---- the phone with the social post ---- */
.dmk .appx__body{background:linear-gradient(145deg,#5d6ca3,#26356b 42%,#3d4d86)}
.dmk .appx__screen{background:linear-gradient(180deg,#15214f,#0d1637);color:#eef1fb;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dmk .appx__status{color:#e6ebfb}
.dmk .appx__sys i{background:#e6ebfb}
.dmk .appx__bat{border-color:#e6ebfb;background:linear-gradient(90deg,#e6ebfb 70%,transparent 70%)}
.dmk .appx__tabs{background:rgba(9,15,40,.96);border-top:1px solid rgba(255,255,255,.08)}
.dmk .appx__tabs::after{background:rgba(255,255,255,.65)}
.dmk .appx__tab{color:#7f8cb8}
.dmk .appx__tab.is-on{background:rgba(53,185,214,.2);color:#8fe3f3}
.dmk .appx__glass{background:linear-gradient(118deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.03) 24%,transparent 38%)}
.dmk .appx__glass::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent)}
.dmk__phone{position:absolute;z-index:3;left:74.5cqw;top:18cqw;width:24cqw;aspect-ratio:9/19}
.appx__view.dmk__post{gap:3cqw;padding:13cqw 0 0}
.dmk__ph-head{display:flex;align-items:center;gap:2.6cqw;padding:0 4.5cqw}
.dmk__av{flex:none;width:8cqw;height:8cqw;border-radius:50%;background:linear-gradient(135deg,#f6e4b6,#d8b678);box-shadow:0 0 0 .7cqw #0d1637,0 0 0 1.3cqw rgba(216,182,120,.8)}
.dmk__who{display:flex;flex-direction:column;line-height:1.2}
.dmk__who b{font-size:max(4.6cqw,6px);font-weight:700}
.dmk__who em{font-style:normal;font-size:max(3.6cqw,5px);color:#8e9bc7}
.dmk__more{margin-left:auto;width:6cqw;height:6cqw;fill:currentColor;stroke:none;color:#9fabd2}
.dmk__ph-img{position:relative;flex:none;width:100%;aspect-ratio:4/5;background:linear-gradient(120deg,#1b2860,#26356f)}
.dmk__ph-img .dmk__cr{position:absolute;inset:0;border-radius:0}
.dmk__ph-act{display:flex;justify-content:space-between;align-items:center;padding:0 4.5cqw;font-size:6cqw;color:#eef1fb}
.dmk__ph-act>span{display:flex;gap:3.4cqw}
.dmk__ph-cap{padding:0 4.5cqw;font-size:max(4.4cqw,5.8px);line-height:1.35;color:#c3cdea}
.dmk__ph-cap b{color:#fff}

/* ---- the caption card, the link between the two screens, the channel formats ---- */
.dmk__caption{position:absolute;z-index:4;left:75cqw;top:3.4cqw;width:22.5cqw;display:flex;flex-direction:column;gap:.5em;padding:1.5cqw 1.7cqw;border-radius:1.6cqw;font-size:2cqw;line-height:1.25;color:#eef1fb;
  background:#142252;border:1px solid rgba(255,255,255,.1);box-shadow:0 2cqw 3.6cqw -1.8cqw rgba(8,16,48,.7)}
.dmk__cap-l{font-size:.8em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8e9bc7}
.dmk__caption b{font-weight:600}
.dmk__bar{display:block;height:.55em;width:100%;border-radius:99px;background:rgba(255,255,255,.16)}
.dmk__bar--s{width:58%}
.dmk__ph-cap .dmk__bar{height:2cqw;width:60%;margin-top:2cqw}
.dmk__link{position:absolute;z-index:5;left:71.8cqw;top:35.9cqw;width:5.4cqw;height:5.4cqw;display:grid;place-items:center;border-radius:50%;font-size:2.8cqw;color:#14204a;
  background:linear-gradient(135deg,#f6e4b6,#d8b678);box-shadow:0 1.4cqw 2.6cqw -1cqw rgba(120,86,30,.7),0 0 0 .6cqw #142252}
.dmk__ghost{position:absolute;z-index:6;left:32.9cqw;top:29.7cqw;width:24.4cqw;opacity:0;pointer-events:none;transform:translate(-50%,-50%);--dx:53.6;--dy:8.9;--ds:.918}
.dmk__ghost .dmk__cr{box-shadow:0 3cqw 6cqw -2cqw rgba(16,28,69,.6)}
.dmk__fmts{position:absolute;z-index:4;left:3cqw;top:59.6cqw;width:70cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;font-size:2cqw}
.dmk__fmt{display:flex;align-items:center;gap:.8em;padding:.7em .8em;border-radius:1em;background:#142252;border:1px solid rgba(255,255,255,.1);color:#eef1fb;box-shadow:0 2cqw 3.6cqw -1.8cqw rgba(8,16,48,.7)}
.dmk__thumb{flex:none;display:grid;place-items:center;width:4.6em;height:4.6em;border-radius:.7em;background:#d4d0c8}
.dmk__thumb-in{display:block;width:var(--w)}
.dmk__fmt-t{min-width:0;font-weight:600;line-height:1.25}
.dmk__fmt-t em{display:block;font-style:normal;font-size:.85em;font-weight:500;color:#9fabd2}

/* the footer band with the three topics */
.dmk .svc-art__chips{position:static;flex:none;padding:.8rem 1rem;background:#0c1538;border-top:1px solid rgba(255,255,255,.1)}
.dmk .svc-art__chips li{background:rgba(255,255,255,.08);color:#e4e9fb;border:1px solid rgba(255,255,255,.18);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* before the demo plays (script present, panel not yet in view): hold the scene back so the finished composition does not flash */
.dmk.is-armed:not(.is-play) .dmk__scene,.dmk.is-armed:not(.is-play) .svc-art__chips{opacity:0}

/* ---- the sequence: about 3.5 seconds, once ---- */
.dmk.is-play .dmk__monitor{animation:dmkMonitorIn .8s cubic-bezier(.2,.8,.2,1) both}
.dmk.is-play .dmk__ui [style*="--n"]{animation:dmkUi .55s cubic-bezier(.2,.75,.25,1) calc(.15s + var(--n)*.1s) both}
.dmk.is-play .dmk__focus .dmk__cr{animation:dmkFocus .7s ease .45s both}
.dmk.is-play .dmk__phone{animation:dmkPhoneIn .8s cubic-bezier(.2,.8,.2,1) .5s both}
.dmk.is-play .dmk__post>*{animation:appxRise .5s cubic-bezier(.2,.75,.25,1) both}
.dmk.is-play .dmk__post>:nth-child(1){animation-delay:.9s}
.dmk.is-play .dmk__post>:nth-child(2){animation-delay:1s}
.dmk.is-play .dmk__post>:nth-child(3){animation-delay:2.65s}
.dmk.is-play .dmk__post>:nth-child(4){animation-delay:2.75s}
.dmk.is-play .dmk__cursor{animation:dmkCursor 1.1s ease .9s both}
.dmk.is-play .dmk__sel{animation:dmkSel .25s ease 1.4s both}
.dmk.is-play .dmk__focus{animation:dmkLift 1.1s ease 1.95s both}
.dmk.is-play .dmk__ch--1{animation:dmkRow .3s ease 1.85s both}
.dmk.is-play .dmk__ch--2{animation:dmkRow .3s ease 2.55s both}
.dmk.is-play .dmk__ch--3{animation:dmkRow .3s ease 2.75s both}
.dmk.is-play .dmk__ch--1 .appx__sw{animation:dmkSwBg .3s ease 1.85s both}.dmk.is-play .dmk__ch--1 .appx__sw i{animation:appxSwKnob .3s ease 1.85s both}
.dmk.is-play .dmk__ch--2 .appx__sw{animation:dmkSwBg .3s ease 2.55s both}.dmk.is-play .dmk__ch--2 .appx__sw i{animation:appxSwKnob .3s ease 2.55s both}
.dmk.is-play .dmk__ch--3 .appx__sw{animation:dmkSwBg .3s ease 2.75s both}.dmk.is-play .dmk__ch--3 .appx__sw i{animation:appxSwKnob .3s ease 2.75s both}
.dmk.is-play .dmk__ghost{animation:dmkFly 1s cubic-bezier(.45,.05,.2,1) 1.95s both}
.dmk.is-play .dmk__cr--post{animation:dmkFadeIn .3s ease 2.55s both}
.dmk.is-play .dmk__caption{animation:dmkDrop .55s cubic-bezier(.2,.8,.25,1) 2.3s both}
.dmk.is-play .dmk__link{animation:appxPop .45s cubic-bezier(.3,1.4,.5,1) 2.75s both}
.dmk.is-play .dmk__fmt{animation:dmkSlide .5s cubic-bezier(.2,.8,.25,1) calc(2.5s + var(--n)*.1s) both}
.dmk.is-play .dmk__glare::after{animation:appxSweep 1.2s ease 2.5s both}
.dmk.is-play .dmk__phone .appx__glass::after{animation:appxSweep 1.1s ease 2.7s both}
.dmk.is-play .svc-art__chips{animation:appxFade .6s ease .6s both}

@keyframes dmkMonitorIn{from{opacity:0;transform:translateY(4cqw) scale(.97)}to{opacity:1;transform:none}}
@keyframes dmkUi{from{opacity:0;transform:translateY(6%)}to{opacity:1;transform:none}}
@keyframes dmkFocus{from{opacity:.4;filter:blur(7px);transform:scale(.94)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes dmkPhoneIn{from{opacity:0;transform:translate3d(8cqw,3cqw,0)}to{opacity:1;transform:none}}
@keyframes dmkCursor{
  0%{opacity:0;transform:translate(84cqw,52cqw)}
  10%{opacity:1}
  38%{opacity:1;transform:translate(47cqw,38cqw) scale(1)}
  44%{transform:translate(47cqw,38cqw) scale(.85)}
  50%{transform:translate(47cqw,38cqw) scale(1)}
  78%{opacity:1;transform:translate(88cqw,20.5cqw) scale(1)}
  84%{transform:translate(88cqw,20.5cqw) scale(.85)}
  90%{opacity:1;transform:translate(88cqw,20.5cqw) scale(1)}
  100%{opacity:0;transform:translate(90cqw,22cqw)}}
@keyframes dmkSel{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes dmkLift{0%{opacity:1}14%,82%{opacity:.35}100%{opacity:1}}
@keyframes dmkRow{from{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}to{background:rgba(216,182,120,.14);border-color:rgba(216,182,120,.5)}}
@keyframes dmkSwBg{from{background:#4a5788}to{background:#35a9d4}}
@keyframes dmkFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1)}
  6%{opacity:1}
  40%{opacity:1;transform:translate(calc(-50% + var(--dx)*.4cqw),calc(-50% + (var(--dy)*.4 - 7)*1cqw)) scale(1.06)}
  78%{opacity:1;transform:translate(calc(-50% + var(--dx)*1cqw),calc(-50% + var(--dy)*1cqw)) scale(var(--ds))}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)*1cqw),calc(-50% + var(--dy)*1cqw)) scale(var(--ds))}}
@keyframes dmkFadeIn{from{opacity:0}to{opacity:1}}
@keyframes dmkDrop{from{opacity:0;transform:translateY(-6cqw)}to{opacity:1;transform:none}}
@keyframes dmkSlide{from{opacity:0;transform:translateX(12cqw)}to{opacity:1;transform:none}}

/* tablet and stacked layout: same composition, panel capped in width */
@media (max-width:1000px){
  .dmk{max-width:640px}
}
/* phone: a taller scene; the display spans the width, the phone and the channel cards share the lower part */
@media (max-width:640px){
  .dmk{max-width:none}
  .dmk__scene{aspect-ratio:10/12.5}
  .dmk__desk{height:57cqw}
  .dmk__monitor{left:2cqw;top:4cqw;width:96cqw}
  .dmk__phone{left:60cqw;top:42cqw;width:38cqw}
  .dmk__fmts{left:3cqw;top:75cqw;width:55cqw;grid-template-columns:1fr;gap:1.4cqw;font-size:3cqw}
  .dmk__thumb{width:3.6em;height:3.6em}
  .dmk__caption,.dmk__link{display:none}
  .dmk__ghost{left:43cqw;top:37.7cqw;width:33.8cqw;--dx:36;--dy:37;--ds:1.05}
  .dmk .svc-art__chips{gap:.3rem;padding:.65rem .8rem}
  .dmk .svc-art__chips li{padding:.27rem .5rem;font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .dmk *,.dmk *::before,.dmk *::after{animation:none!important}
}

/* =========================================================
   Software Development hero: a short "custom workspace takes shape" showcase.
   One desktop application window fills the panel: a navigation rail, a workflow canvas and a contextual detail panel. The panels assemble,
   the workflow is drawn, then one change is made: a new "Approval" step is inserted, the rest of the flow shifts to make room, and the detail
   panel updates to the new step. It then stops on the finished interface (about 3.5 seconds, once).
   The interface is generic and fictional: no Hub 360 content, no client data, no metrics.
   The base styles ARE the finished composition (so it also shows without JavaScript or with reduced motion). The sequence only runs when
   the inline script in software-development.html adds .is-play (once, when the panel first comes into view).
   Window contents use container units (cqw) of the window; workflow steps use the em of --nf so that they scale together.
   ========================================================= */
.swx{display:flex;flex-direction:column;place-items:initial;aspect-ratio:auto;border-color:rgba(255,255,255,.3);
  background:linear-gradient(150deg,#5a70b0,#4459a1 58%,#506aa8);box-shadow:0 30px 60px -34px rgba(8,16,48,.7)}
.swx__sprite{position:absolute;width:0;height:0;overflow:hidden}
.swx__i{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.swx__scene{position:relative;flex:none;width:100%;aspect-ratio:4/3;overflow:hidden;container:swxs/inline-size;font-family:"Poppins",sans-serif;color:#e8edfb}
.swx__bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 30% 20%,rgba(205,219,248,.28),rgba(205,219,248,0) 72%),radial-gradient(40% 44% at 100% 100%,rgba(216,182,120,.28),transparent 70%),radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.3px) 0 0/2.8cqw 2.8cqw}

/* the window, with two quiet layers behind it for depth */
.swx__stack{position:absolute;left:3cqw;top:5.4cqw;width:94cqw}
.swx__stack::before,.swx__stack::after{content:"";position:absolute;left:2.4cqw;right:2.4cqw;top:-1.5cqw;height:6cqw;border-radius:1.8cqw 1.8cqw 0 0;background:rgba(255,255,255,.24)}
.swx__stack::after{left:4.8cqw;right:4.8cqw;top:-3cqw;background:rgba(255,255,255,.14)}
.swx__win{position:relative;z-index:1;display:grid;grid-template-columns:7% 69% 24%;grid-template-rows:8.6% 1fr;grid-template-areas:"title title title" "rail canvas detail";
  aspect-ratio:100/70;container:swxw/inline-size;overflow:hidden;border-radius:2cqw;background:#2b3c78;
  box-shadow:0 0 0 1px rgba(255,255,255,.45),0 4cqw 7cqw -2.5cqw rgba(10,18,54,.6),0 1cqw 2cqw -1cqw rgba(10,18,54,.4)}
.swx__gloss{position:absolute;z-index:8;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.02) 24%,transparent 38%)}
.swx__gloss::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:26%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-150%) skewX(-16deg);opacity:0}

/* title bar */
.swx__titlebar{grid-area:title;display:flex;align-items:center;gap:2cqw;padding:0 2.4cqw;background:#22326a;border-bottom:1px solid rgba(255,255,255,.14);font-size:2.6cqw}
.swx__dots{display:flex;gap:1cqw}
.swx__dots i{display:block;width:1.6cqw;height:1.6cqw;border-radius:50%;background:#8493c9}
.swx__dots i:first-child{background:#d8b678}
.swx__titlebar b{font-weight:600;color:#fff;white-space:nowrap}
.swx__state{display:grid;margin-left:auto}
.swx__st{grid-area:1/1;justify-self:end;display:inline-flex;align-items:center;gap:.5em;padding:.3em 1em;border-radius:99px;font-size:.82em;font-weight:600;white-space:nowrap}
.swx__st--draft{opacity:0;background:rgba(255,255,255,.16);color:#dbe3fb}
.swx__st--saved{background:rgba(53,192,220,.26);color:#a4ecf8}
.swx__st .swx__i{font-size:1em;stroke-width:2.4}

/* navigation rail */
.swx__rail{grid-area:rail;display:flex;flex-direction:column;align-items:center;gap:1.8cqw;padding-top:3cqw;background:#243569;border-right:1px solid rgba(255,255,255,.14)}
.swx__rt{position:relative;display:grid;place-items:center;width:4.8cqw;height:4.8cqw;border-radius:1.2cqw;color:#b3bfe8;font-size:2.8cqw}
.swx__rt.is-on{background:rgba(216,182,120,.24);color:#f6e2b0}
.swx__rt.is-on::before{content:"";position:absolute;left:-1.1cqw;top:20%;bottom:20%;width:.5cqw;border-radius:2px;background:#d8b678}

/* canvas */
.swx__canvas{grid-area:canvas;position:relative;overflow:hidden;background:radial-gradient(circle,rgba(255,255,255,.15) 1px,transparent 1.2px) 0 0/2.4cqw 2.4cqw,#364a8c}
.swx__chead{display:flex;align-items:center;justify-content:space-between;height:6cqw;padding:0 2.4cqw;background:rgba(24,36,88,.45);border-bottom:1px solid rgba(255,255,255,.12);font-size:2.3cqw}
.swx__crumb{color:#b9c5ec;white-space:nowrap}.swx__crumb i{font-style:normal;opacity:.6;margin:0 .3em}.swx__crumb b{color:#fff;font-weight:600}
.swx__seg{display:inline-flex;padding:.25em;border-radius:99px;background:rgba(255,255,255,.14);font-size:.95em;font-weight:500;color:#d2dbf6}
.swx__seg span{padding:.35em 1em;border-radius:99px}
.swx__seg .is-on{background:#9ab8ff;color:#12206a;font-weight:600}
.swx__flow{position:absolute;left:0;right:0;top:6cqw;bottom:0;--nf:2.6cqw;--w:5.3em;--s:6.3em;--t0:6.6cqw;--dt:23cqw;--lh:21cqw}
.swx__lane{position:absolute;left:2cqw;right:2cqw;border-radius:2cqw;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17)}
.swx__lane--main{top:2cqw;height:var(--lh)}
.swx__lane--alt{top:calc(2cqw + var(--dt));height:var(--lh)}
.swx__lane em{position:absolute;left:1.8cqw;top:1.3cqw;font-style:normal;font-size:1.9cqw;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#b3bfe8}

/* workflow steps */
.swx__slot{position:absolute;font-size:var(--nf);width:var(--w);left:calc(.7em + 2cqw + var(--k)*var(--s));top:calc(var(--t0) + var(--r)*var(--dt))}
.swx__node{position:relative;display:flex;flex-direction:column;gap:.35em;padding:.6em;border-radius:.8em;background:#4d63a9;border:1px solid rgba(255,255,255,.3);box-shadow:0 .7em 1.4em -.8em rgba(12,20,60,.6)}
.swx__node b{font-size:.9em;font-weight:600;line-height:1.15;color:#fff;white-space:nowrap}
.swx__node em{font-style:normal;font-size:.75em;line-height:1.15;color:#d0d9f6}
.swx__ntile{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:.6em;font-size:1em}
.swx__ntile .swx__i{font-size:1.15em}
.swx__ntile--blue{background:rgba(255,255,255,.18);color:#e4ecff}
.swx__ntile--gold{background:rgba(216,182,120,.4);color:#fbe9bd}
.swx__ring{position:absolute;inset:-.28em;border-radius:1em;border:.14em solid #a9c3ff;pointer-events:none}
.swx__ring--blue{opacity:0}
.swx__ring--gold{border-color:#d8b678}
.swx__ln{position:absolute;font-size:var(--nf);display:block}
.swx__ln--h{left:calc(.7em + 2cqw + var(--k)*var(--s) + var(--w));width:calc(var(--s) - var(--w));top:calc(var(--t0) + var(--r)*var(--dt) + 2.7em);border-top:.1em solid rgba(218,226,250,.8);transform-origin:left}
.swx__ln--h::after{content:"";position:absolute;right:-.05em;top:-.34em;border-left:.4em solid rgba(226,233,252,.95);border-top:.28em solid transparent;border-bottom:.28em solid transparent}
.swx__ln--new{border-top-color:#d8b678}.swx__ln--new::after{border-left-color:#d8b678}
.swx__ln--v{left:calc(.7em + 2cqw + var(--k)*var(--s) + var(--w)/2);top:calc(var(--t0) + 5.4em);height:calc(var(--dt) - 5.4em);border-left:.1em solid rgba(218,226,250,.8);transform-origin:top}
.swx__ln--v::after{content:"";position:absolute;left:-.3em;bottom:-.05em;border-top:.4em solid rgba(226,233,252,.95);border-left:.28em solid transparent;border-right:.28em solid transparent}
.swx__legend{position:absolute;left:2cqw;bottom:2cqw;display:flex;gap:2cqw;font-size:2cqw;color:#d0d9f6}
.swx__legend span{display:inline-flex;align-items:center;gap:.6em}
.swx__lg{display:block;width:1.2cqw;height:1.2cqw;border-radius:50%;background:#a9c3ff}
.swx__lg--b{background:#d8b678}
.swx__zoom{position:absolute;right:2cqw;bottom:2cqw;display:flex;align-items:center;gap:1.4cqw;padding:.7cqw 1.4cqw;border-radius:99px;background:#2b3c78;border:1px solid rgba(255,255,255,.28);font-size:2cqw;color:#d0d9f6}
.swx__zoom b{font-weight:600;color:#fff}
.swx__zoom .swx__i{font-size:2.6cqw}

/* contextual detail panel */
.swx__detail{grid-area:detail;position:relative;background:#2e407e;border-left:1px solid rgba(255,255,255,.16);font-size:2.2cqw}
.swx__dt{position:absolute;inset:0;display:flex;flex-direction:column;gap:1.6cqw;padding:2.4cqw 2cqw 2.2cqw}
.swx__dt--a{opacity:0;pointer-events:none}
.swx__dh{display:flex;align-items:center;gap:1cqw;margin-bottom:.6cqw}
.swx__dh .swx__ntile{display:none;width:3.8cqw;height:3.8cqw;flex:none;border-radius:1cqw;font-size:2.1cqw}
.swx__dh b{font-size:1.1em;font-weight:700;color:#fff;white-space:nowrap}
.swx__pill{margin-left:auto;padding:.2em .65em;border-radius:99px;font-size:.7em;font-weight:600;white-space:nowrap}
.swx__pill--new{background:rgba(216,182,120,.34);color:#fbe9bd}
.swx__pill--active{background:rgba(53,192,220,.26);color:#a4ecf8}
.swx__f{display:flex;flex-direction:column;gap:.4em}
.swx__f em{font-style:normal;font-size:.82em;color:#c0cbee}
.swx__box{display:flex;align-items:center;justify-content:space-between;height:2.1em;padding:0 .8em;border-radius:.6em;background:#3d519a;border:1px solid rgba(255,255,255,.26);font-weight:500;color:#fff}
.swx__box .swx__i{font-size:1.1em;color:#c0cbee}
.swx__tg{display:flex;align-items:center;justify-content:space-between;gap:1cqw;font-weight:500;color:#e6ecfd}
.swx__sw{position:relative;flex:none;width:2.4em;height:1.3em;border-radius:99px;background:#6f80b8}
.swx__sw.is-on{background:#35bedc}
.swx__sw i{position:absolute;top:.15em;left:.15em;width:1em;height:1em;border-radius:50%;background:#fff;box-shadow:0 .1em .3em rgba(0,0,0,.35)}
.swx__sw.is-on i{left:1.25em}
.swx__bt{display:flex;gap:1cqw;margin-top:auto}
.swx__b{flex:1;display:grid;place-items:center;height:2.2em;border-radius:.7em;background:linear-gradient(135deg,#f3dfae,#d8b678);color:#14204a;font-weight:700;font-size:.92em}
.swx__b--ghost{background:transparent;color:#e6ecfd;border:1px solid rgba(255,255,255,.36);font-weight:600}

/* the footer band with the three topics */
.swx .svc-art__chips{position:static;flex:none;padding:.8rem 1rem;background:#2b3c78;border-top:1px solid rgba(255,255,255,.18)}
.swx .svc-art__chips li{background:rgba(255,255,255,.14);color:#f1f4fe;border:1px solid rgba(255,255,255,.3);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* before the sequence plays (script present, panel not yet in view): hold the scene back so the finished interface does not flash */
.swx.is-armed:not(.is-play) .swx__scene,.swx.is-armed:not(.is-play) .svc-art__chips{opacity:0}

/* ---- the sequence: about 3.5 seconds, once ---- */
.swx.is-play .swx__win{animation:swxWin .8s cubic-bezier(.2,.8,.2,1) both}
.swx.is-play .swx__titlebar{animation:swxFade .4s ease .15s both}
.swx.is-play .swx__rail{animation:swxRail .6s cubic-bezier(.2,.8,.25,1) .2s both}
.swx.is-play .swx__chead{animation:swxFade .5s ease .3s both}
.swx.is-play .swx__detail{animation:swxDetail .6s cubic-bezier(.2,.8,.25,1) .35s both}
.swx.is-play .swx__lane{animation:swxFade .5s ease .5s both}
.swx.is-play .swx__lane--main{animation:swxFade .5s ease .5s both,swxLane .9s ease 1.8s both}
.swx.is-play .swx__node{animation:swxPop .45s cubic-bezier(.3,1.3,.5,1) calc(.7s + var(--n)*.1s) both}
.swx.is-play .swx__slot--new .swx__node{animation-delay:2.15s}
.swx.is-play .swx__slot--shift{animation:swxShift .55s cubic-bezier(.5,0,.2,1) 2s both}
.swx.is-play .swx__ln--h{animation:swxDrawX .35s ease calc(.95s + var(--n)*.1s) both}
.swx.is-play .swx__ln--v{animation:swxDrawY .35s ease 1.2s both}
.swx.is-play .swx__ln--new{animation-delay:2.4s}
.swx.is-play .swx__ring--blue{animation:swxRingOut .3s ease 2s both}
.swx.is-play .swx__ring--gold{animation:swxFade .3s ease 2.3s both}
.swx.is-play .swx__legend,.swx.is-play .swx__zoom{animation:swxFade .5s ease 1.3s both}
.swx.is-play .swx__dt--a{animation:swxOut .25s ease 2.3s both}
.swx.is-play .swx__dt--b{animation:swxIn .4s ease 2.4s both}
.swx.is-play .swx__st--draft{animation:swxOut .3s ease 3s both}
.swx.is-play .swx__st--saved{animation:swxFade .3s ease 3s both}
.swx.is-play .swx__gloss::after{animation:appxSweep 1.1s ease 2.7s both}
.swx.is-play .svc-art__chips{animation:appxFade .6s ease .5s both}

@keyframes swxWin{from{opacity:0;transform:translateY(3cqw) scale(.98)}to{opacity:1;transform:none}}
@keyframes swxFade{from{opacity:0}to{opacity:1}}
@keyframes swxRail{from{opacity:0;transform:translateX(-35%)}to{opacity:1;transform:none}}
@keyframes swxDetail{from{opacity:0;transform:translateX(12%)}to{opacity:1;transform:none}}
@keyframes swxPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes swxShift{from{transform:translateX(calc(var(--s)*-1))}to{transform:none}}
@keyframes swxDrawX{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}
@keyframes swxDrawY{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
@keyframes swxRingOut{from{opacity:1}to{opacity:0}}
@keyframes swxLane{0%,100%{border-color:rgba(255,255,255,.17);background:rgba(255,255,255,.07)}40%{border-color:rgba(236,205,140,.9);background:rgba(216,182,120,.16)}}
@keyframes swxOut{from{opacity:1}to{opacity:0}}
@keyframes swxIn{from{opacity:0;transform:translateY(2%)}to{opacity:1;transform:none}}

/* tablet and stacked layout: same composition, panel capped in width */
@media (max-width:1000px){
  .swx{max-width:640px}
}
/* phone: the detail panel moves under the canvas, the steps and text are larger */
@media (max-width:640px){
  .swx{max-width:none}
  .swx__scene{aspect-ratio:100/122}
  .swx__win{grid-template-columns:9% 1fr;grid-template-rows:5.4% 59.5% 1fr;grid-template-areas:"title title" "rail canvas" "rail detail";aspect-ratio:100/121}
  .swx__titlebar{font-size:3.4cqw}
  .swx__rt{width:6.4cqw;height:6.4cqw;font-size:3.8cqw}
  .swx__chead{font-size:3cqw;height:6.5cqw}
  .swx__flow{top:6.5cqw;--nf:3.3cqw;--w:5em;--s:6.6em;--t0:8cqw;--dt:29cqw;--lh:27cqw}
  .swx__lane em{font-size:2.5cqw;top:1.8cqw}
  .swx__legend,.swx__zoom{font-size:2.8cqw;bottom:2.4cqw}
  .swx__detail{border-left:0;border-top:1px solid rgba(255,255,255,.08);font-size:3cqw}
  .swx__dt{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:2.2cqw 3cqw;padding:3cqw 3.4cqw}
  .swx__dh,.swx__bt{grid-column:1/-1}
  .swx__dh .swx__ntile{display:grid;width:6cqw;height:6cqw;font-size:3.4cqw}
  .swx__bt{margin-top:.6cqw}
  .swx__dt>.swx__f:nth-child(4){display:none}
  .swx .svc-art__chips{gap:.3rem;padding:.65rem .8rem}
  .swx .svc-art__chips li{padding:.27rem .5rem;font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .swx *,.swx *::before,.swx *::after{animation:none!important}
}

/* =========================================================
   CRM Development hero: a short "customer journey" showcase.
   One CRM window fills the panel: the contact record and its activity on the left, a three-stage pipeline board on the right.
   In about 3.7 seconds an enquiry card enters the "New" column, moves to "In progress" and then to "Follow-up", the contact's stage
   changes with it, and a follow-up reminder appears in the activity timeline. It then stops on the finished CRM view.
   Everything is fictional and generic: no real contact details, no Hub 360 content, no figures.
   The base styles ARE the finished view (so it also shows without JavaScript or with reduced motion). The sequence only runs when
   the inline script in crm-development.html adds .is-play (once, when the panel first comes into view).
   Window contents use container units (cqw) of the window; cards and the side panels use the em of --cf / --sf so they scale together.
   ========================================================= */
.crm{display:flex;flex-direction:column;place-items:initial;aspect-ratio:auto;border-color:rgba(255,255,255,.28);
  background:linear-gradient(150deg,#51649c,#394c84 58%,#485c95);box-shadow:0 30px 60px -34px rgba(8,16,48,.7)}
.crm__sprite{position:absolute;width:0;height:0;overflow:hidden}
.crm__i{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.crm__scene{position:relative;flex:none;width:100%;aspect-ratio:4/3;overflow:hidden;container:crms/inline-size;font-family:"Poppins",sans-serif;color:#14204a}
.crm__bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 70% 15%,rgba(205,219,248,.26),rgba(205,219,248,0) 72%),radial-gradient(44% 48% at 0 100%,rgba(216,182,120,.3),transparent 70%),radial-gradient(circle,rgba(255,255,255,.13) 1px,transparent 1.3px) 0 0/2.8cqw 2.8cqw}

/* the window, with two quiet layers behind it for depth */
.crm__stack{position:absolute;left:3cqw;top:5.4cqw;width:94cqw}
.crm__stack::before,.crm__stack::after{content:"";position:absolute;left:2.4cqw;right:2.4cqw;top:-1.5cqw;height:6cqw;border-radius:1.8cqw 1.8cqw 0 0;background:rgba(255,255,255,.22)}
.crm__stack::after{left:4.8cqw;right:4.8cqw;top:-3cqw;background:rgba(255,255,255,.13)}
.crm__win{position:relative;z-index:1;display:grid;grid-template-columns:32% 68%;grid-template-rows:8.6% 1fr;grid-template-areas:"title title" "side board";
  aspect-ratio:100/70;container:crmw/inline-size;overflow:hidden;border-radius:2cqw;background:#304278;
  box-shadow:0 0 0 1px rgba(255,255,255,.42),0 4cqw 7cqw -2.5cqw rgba(10,18,54,.6),0 1cqw 2cqw -1cqw rgba(10,18,54,.4)}
.crm__gloss{position:absolute;z-index:8;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.02) 24%,transparent 38%)}
.crm__gloss::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:26%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-150%) skewX(-16deg);opacity:0}

/* title bar */
.crm__titlebar{grid-area:title;display:flex;align-items:center;gap:2cqw;padding:0 2.4cqw;background:#25376c;border-bottom:1px solid rgba(255,255,255,.14);font-size:2.6cqw}
.crm__dots{display:flex;gap:1cqw}
.crm__dots i{display:block;width:1.6cqw;height:1.6cqw;border-radius:50%;background:#8493c9}
.crm__dots i:first-child{background:#d8b678}
.crm__titlebar b{font-weight:600;color:#fff;white-space:nowrap}
.crm__tabs{display:inline-flex;margin-left:auto;padding:.25em;border-radius:99px;background:rgba(255,255,255,.14);font-size:.88em;font-weight:500;color:#d2dbf6}
.crm__tabs span{padding:.3em 1em;border-radius:99px}
.crm__tabs .is-on{background:#9ab8ff;color:#12206a;font-weight:600}

/* contact record: profile and activity (sizes are em of --sf) */
.crm__side{grid-area:side;--sf:2.05cqw;font-size:var(--sf);display:flex;flex-direction:column;gap:.8em;padding:.9em;overflow:hidden;background:#34477f;border-right:1px solid rgba(255,255,255,.14)}
.crm__profile,.crm__activity{border-radius:.8em;background:#eef3ff;color:#14204a;padding:.85em;box-shadow:0 .6em 1.4em -.9em rgba(8,14,48,.6)}
.crm__activity{background:#e5ecfc}
.crm__pt{display:flex;align-items:center;gap:.7em;margin-bottom:.7em}
.crm__avatar{display:grid;place-items:center;flex:none;width:3em;height:3em;border-radius:50%;background:linear-gradient(135deg,#f6e4b6,#d8b678);color:#14204a;font-size:1em;font-weight:700}
.crm__who{display:flex;flex-direction:column;gap:.3em;min-width:0}
.crm__who b{font-size:1.05em;font-weight:700;white-space:nowrap}
.crm__stages{display:grid}
.crm__pill{grid-area:1/1;justify-self:start;padding:.15em .7em;border-radius:99px;font-size:.78em;font-weight:600;white-space:nowrap}
.crm__pill--new{opacity:0;background:rgba(79,117,209,.2);color:#34489a}
.crm__pill--prog{opacity:0;background:rgba(47,167,201,.22);color:#1a6a88}
.crm__pill--fu{background:rgba(216,182,120,.4);color:#7a5614}
.crm__fld{display:flex;flex-direction:column;gap:.25em;margin-top:.55em}
.crm__fld em{font-style:normal;font-size:.76em;font-weight:500;color:#6a7aa6}
.crm__skel{display:block;height:.7em;width:78%;border-radius:99px;background:#c6d2ef}
.crm__skel--s{width:52%}
.crm__val{font-size:.95em;font-weight:500}
.crm__atitle{display:block;font-size:1em;font-weight:700;margin-bottom:.6em}
.crm__tl{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em}
.crm__tl::before{content:"";position:absolute;left:.62em;top:.8em;bottom:.8em;width:.12em;background:#b9c7ea}
.crm__ev{position:relative;display:flex;align-items:center;gap:.7em;padding:.25em .3em;border-radius:.6em}
.crm__ev i{display:grid;place-items:center;flex:none;width:1.3em;height:1.3em;border-radius:50%;background:#4f75d1;box-shadow:0 0 0 .2em #e5ecfc;color:#fff;font-style:normal;font-size:1em}
.crm__ev--2 i{background:#2fa7c9}
.crm__ev--3{background:rgba(216,182,120,.3);box-shadow:0 0 0 1px rgba(216,182,120,.8) inset}
.crm__ev--3 i{background:#d8b678;color:#14204a;box-shadow:0 0 0 .2em rgba(229,236,252,0)}
.crm__ev i .crm__i{font-size:.8em}
.crm__ev span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.crm__ev b{font-size:.86em;font-weight:600;white-space:nowrap}
.crm__ev em{font-style:normal;font-size:.72em;color:#6a7aa6}

/* pipeline board */
.crm__board{grid-area:board;position:relative;overflow:hidden;background:#3b4f8c}
.crm__bhead{display:flex;align-items:center;justify-content:space-between;height:6cqw;padding:0 2.2cqw;background:rgba(24,36,88,.4);border-bottom:1px solid rgba(255,255,255,.12);font-size:2.3cqw}
.crm__crumb{color:#b9c5ec;white-space:nowrap}.crm__crumb i{font-style:normal;opacity:.6;margin:0 .3em}.crm__crumb b{color:#fff;font-weight:600}
.crm__search{display:inline-flex;align-items:center;gap:.5em;padding:.3em 1em;border-radius:99px;background:rgba(255,255,255,.14);font-size:.9em;color:#d2dbf6}
.crm__search .crm__i{font-size:1.1em}
.crm__cols{--cf:2.1cqw;--cp:1cqw;--gap:1.6cqw;--g:calc(2*var(--cp) + var(--gap));display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);height:calc(100% - 6cqw);padding:2.2cqw;font-size:var(--cf)}
.crm__col{display:flex;flex-direction:column;min-width:0;padding:var(--cp);border-radius:.9em;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.crm__ch{display:flex;align-items:center;gap:.5em;margin:0 0 .7em .2em;font-size:1.1em;font-weight:600;color:#fff;white-space:nowrap}
.crm__dot{display:block;width:.6em;height:.6em;border-radius:50%;background:#8fb0ff}
.crm__dot--cyan{background:#5fd0e8}.crm__dot--gold{background:#e6c57d}
.crm__cards{display:flex;flex-direction:column;gap:.7em;margin:0;padding:0;list-style:none}
.crm__slot{position:relative;height:5.8em}
.crm__card{display:flex;align-items:center;gap:.6em;height:4.6em;padding:.6em;border-radius:.8em;background:#eef3ff;border:1px solid rgba(255,255,255,.75);box-shadow:0 .4em 1em -.6em rgba(8,14,48,.55);min-width:0}
.crm__card--slot{height:100%}
.crm__av{display:grid;place-items:center;flex:none;width:2em;height:2em;border-radius:50%;background:linear-gradient(135deg,#f6e4b6,#d8b678);color:#14204a;font-size:.8em;font-weight:700}
.crm__av--ph{background:#c6d2ef}
.crm__ct{display:flex;flex-direction:column;gap:.4em;flex:1;min-width:0}
.crm__ct .crm__skel{height:.6em}
.crm__ct b{font-size:.95em;font-weight:700;line-height:1.1;white-space:nowrap}
.crm__ct em{font-style:normal;font-size:.76em;color:#6a7aa6;line-height:1.1;white-space:nowrap}
.crm__card--active{position:absolute;inset:0;z-index:3;height:auto;flex-direction:column;align-items:stretch;justify-content:center;gap:.5em;background:#fffaf0;border:1px solid #d8b678;
  box-shadow:0 .5em 1.3em -.5em rgba(8,14,48,.6),0 0 0 .16em rgba(216,182,120,.35)}
.crm__row{display:flex;align-items:center;gap:.6em;min-width:0}
.crm__row--b{justify-content:space-between}
.crm__row--b .crm__skel{width:44%;height:.55em}
.crm__tag{padding:.1em .6em;border-radius:99px;background:rgba(216,182,120,.35);color:#7a5614;font-size:.7em;font-weight:600}

/* the footer band with the three topics */
.crm .svc-art__chips{position:static;flex:none;padding:.8rem 1rem;background:#2e4078;border-top:1px solid rgba(255,255,255,.18)}
.crm .svc-art__chips li{background:rgba(255,255,255,.14);color:#f1f4fe;border:1px solid rgba(255,255,255,.3);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* before the demo plays (script present, panel not yet in view): hold the scene back so the finished view does not flash */
.crm.is-armed:not(.is-play) .crm__scene,.crm.is-armed:not(.is-play) .svc-art__chips{opacity:0}

/* ---- the sequence: about 3.7 seconds, once ---- */
.crm.is-play .crm__win{animation:crmWin .8s cubic-bezier(.2,.8,.2,1) both}
.crm.is-play .crm__titlebar{animation:crmFade .4s ease .15s both}
.crm.is-play .crm__profile{animation:crmPop .5s cubic-bezier(.2,.8,.25,1) .3s both}
.crm.is-play .crm__activity{animation:crmPop .5s cubic-bezier(.2,.8,.25,1) .5s both}
.crm.is-play .crm__bhead{animation:crmFade .4s ease .35s both}
.crm.is-play .crm__col{animation:crmFade .5s ease calc(.45s + var(--n)*.1s) both}
.crm.is-play .crm__ph{animation:crmPop .4s cubic-bezier(.2,.8,.25,1) calc(.7s + var(--n)*.06s) both}
.crm.is-play .crm__ph1--a{animation:crmFade .3s ease 1.9s both}
.crm.is-play .crm__ph1--b{animation:crmFade .3s ease 2.55s both}
.crm.is-play .crm__card--active{animation:crmMove 1.8s linear .9s both}
.crm.is-play .crm__pill--new{animation:crmOut .2s ease 1.75s both}
.crm.is-play .crm__pill--prog{animation:crmBlink .85s linear 1.8s both}
.crm.is-play .crm__pill--fu{animation:crmFade .25s ease 2.55s both}
.crm.is-play .crm__ev--1{animation:crmRise .45s cubic-bezier(.2,.8,.25,1) 1s both}
.crm.is-play .crm__ev--2{animation:crmRise .45s cubic-bezier(.2,.8,.25,1) 1.95s both}
.crm.is-play .crm__ev--3{animation:crmRise .5s cubic-bezier(.2,.8,.25,1) 2.65s both}
.crm.is-play .crm__gloss::after{animation:appxSweep 1.1s ease 2.7s both}
.crm.is-play .svc-art__chips{animation:appxFade .6s ease .5s both}

@keyframes crmWin{from{opacity:0;transform:translateY(3cqw) scale(.98)}to{opacity:1;transform:none}}
@keyframes crmFade{from{opacity:0}to{opacity:1}}
@keyframes crmOut{from{opacity:1}to{opacity:0}}
@keyframes crmBlink{0%{opacity:0}15%,85%{opacity:1}100%{opacity:0}}
@keyframes crmPop{from{opacity:0;transform:translateY(6%) scale(.96)}to{opacity:1;transform:none}}
@keyframes crmRise{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes crmMove{
  0%{opacity:0;transform:translate(calc(-200% - 2*var(--g)),-1.2em) scale(.94);animation-timing-function:cubic-bezier(.2,.8,.25,1)}
  19%{opacity:1;transform:translate(calc(-200% - 2*var(--g)),0) scale(1)}
  31%{opacity:1;transform:translate(calc(-200% - 2*var(--g)),0) scale(1);animation-timing-function:cubic-bezier(.5,0,.2,1)}
  43%{transform:translate(calc(-150% - 1.5*var(--g)),-.5em) rotate(-1.4deg) scale(1.05)}
  56%{transform:translate(calc(-100% - var(--g)),0) rotate(0deg) scale(1)}
  67%{transform:translate(calc(-100% - var(--g)),0) scale(1);animation-timing-function:cubic-bezier(.5,0,.2,1)}
  79%{transform:translate(calc(-50% - .5*var(--g)),-.5em) rotate(-1.4deg) scale(1.05)}
  92%{transform:none}
  100%{opacity:1;transform:none}}

/* tablet and stacked layout: same composition, panel capped in width */
@media (max-width:1000px){
  .crm{max-width:640px}
}
/* phone: the contact record moves under the board, the cards and text are larger */
@media (max-width:640px){
  .crm{max-width:none}
  .crm__scene{aspect-ratio:100/128}
  .crm__win{grid-template-columns:1fr;grid-template-rows:5.4% 58% 1fr;grid-template-areas:"title" "board" "side";aspect-ratio:100/124}
  .crm__titlebar{font-size:3.4cqw}
  .crm__bhead{font-size:3cqw;height:6.5cqw}
  .crm__cols{--cf:3.1cqw;height:calc(100% - 6.5cqw)}
  .crm__cards .crm__ph:nth-child(4){display:none}
  .crm__side{--sf:2.8cqw;flex-direction:row;gap:2cqw;padding:2cqw;border-right:0;border-top:1px solid rgba(255,255,255,.14)}
  .crm__profile,.crm__activity{flex:1;min-width:0}
  .crm .svc-art__chips{gap:.3rem;padding:.65rem .8rem}
  .crm .svc-art__chips li{padding:.27rem .5rem;font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .crm *,.crm *::before,.crm *::after{animation:none!important}
}

/* =========================================================
   Meta Ads hero: a short "campaign takes shape" showcase.
   One campaign-builder window fills the panel: a stepper, an audience panel (location, interests, age range, placements), the ad creative
   and a live feed preview on a phone. In about 3.8 seconds the audience is chosen, the creative comes into focus, a light passes over it
   and the same ad is revealed in the phone feed; gold link markers show the audience feeding the creative and the creative feeding the
   preview. It then stops on the finished campaign view.
   Everything is fictional and generic: no platform logos, no real data, no results or figures.
   The base styles ARE the finished view (so it also shows without JavaScript or with reduced motion). The sequence only runs when
   the inline script in meta-ads.html adds .is-play (once, when the panel first comes into view).
   The phone body reuses the .appx__* styles of the App Development panel. Window contents use container units (cqw) of the window.
   ========================================================= */
.met{display:flex;flex-direction:column;place-items:initial;aspect-ratio:auto;border-color:rgba(255,255,255,.28);
  background:linear-gradient(150deg,#4a5e98,#35487f 58%,#43588f);box-shadow:0 30px 60px -34px rgba(8,16,48,.7)}
.met__sprite{position:absolute;width:0;height:0;overflow:hidden}
.met__i{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.met__scene{position:relative;flex:none;width:100%;aspect-ratio:4/3;overflow:hidden;container:mets/inline-size;font-family:"Poppins",sans-serif;color:#14204a}
.met__bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 30% 15%,rgba(205,219,248,.26),rgba(205,219,248,0) 72%),radial-gradient(46% 50% at 100% 100%,rgba(216,182,120,.3),transparent 70%),radial-gradient(circle,rgba(255,255,255,.13) 1px,transparent 1.3px) 0 0/2.8cqw 2.8cqw}

/* the window, with two quiet layers behind it for depth */
.met__stack{position:absolute;left:3cqw;top:5.4cqw;width:94cqw}
.met__stack::before,.met__stack::after{content:"";position:absolute;left:2.4cqw;right:2.4cqw;top:-1.5cqw;height:6cqw;border-radius:1.8cqw 1.8cqw 0 0;background:rgba(255,255,255,.22)}
.met__stack::after{left:4.8cqw;right:4.8cqw;top:-3cqw;background:rgba(255,255,255,.13)}
.met__win{position:relative;z-index:1;display:grid;grid-template-columns:2.2% 1.15fr 1fr 1.1fr 2.2%;column-gap:1.6%;grid-template-rows:8.6% 9.3% 3.1% 1fr 3.1%;
  aspect-ratio:100/70;container:metw/inline-size;overflow:hidden;border-radius:2cqw;background:#2d3f77;
  box-shadow:0 0 0 1px rgba(255,255,255,.42),0 4cqw 7cqw -2.5cqw rgba(10,18,54,.6),0 1cqw 2cqw -1cqw rgba(10,18,54,.4)}
.met__gloss{position:absolute;z-index:8;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.02) 24%,transparent 38%)}
.met__gloss::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:26%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-150%) skewX(-16deg);opacity:0}

/* title bar and stepper */
.met__titlebar{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:2cqw;padding:0 2.4cqw;background:#23346a;border-bottom:1px solid rgba(255,255,255,.14);font-size:2.6cqw}
.met__dots{display:flex;gap:1cqw}
.met__dots i{display:block;width:1.6cqw;height:1.6cqw;border-radius:50%;background:#8493c9}
.met__dots i:first-child{background:#d8b678}
.met__titlebar b{font-weight:600;color:#fff;white-space:nowrap}
.met__state{display:grid;margin-left:auto}
.met__st{grid-area:1/1;justify-self:end;display:inline-flex;align-items:center;gap:.5em;padding:.3em 1em;border-radius:99px;font-size:.82em;font-weight:600;white-space:nowrap}
.met__st--draft{opacity:0;background:rgba(255,255,255,.16);color:#dbe3fb}
.met__st--ready{background:rgba(53,192,220,.26);color:#a4ecf8}
.met__st .met__i{font-size:1em;stroke-width:2.4}
.met__steps{grid-column:1/-1;grid-row:2;display:flex;align-items:center;padding:0 2.6cqw;background:#283a72;border-bottom:1px solid rgba(255,255,255,.12);font-size:2.2cqw}
.met__step{display:flex;align-items:center;gap:.6em;color:#c8d3f3;white-space:nowrap}
.met__step:not(:last-child){flex:1}
.met__step:not(:last-child)::after{content:"";flex:1;height:1px;margin:0 1.1em;background:rgba(255,255,255,.24)}
.met__step i{display:grid;place-items:center;flex:none;width:1.75em;height:1.75em;border-radius:50%;background:#d8b678;color:#14204a;font-style:normal;font-weight:700;font-size:.9em}
.met__step i .met__i{font-size:1.05em;stroke-width:2.6}
.met__step b{font-weight:600}
.met__step.is-now{color:#fff}
.met__step.is-now i{background:transparent;border:1.5px solid #d8b678;color:#f6e4b6}

/* the three panes (sizes are em of --cf) */
.met__aud,.met__cre{--cf:2.05cqw;font-size:var(--cf);grid-row:4;display:flex;flex-direction:column;gap:.55em;min-width:0;padding:.9em;border-radius:.9em;overflow:hidden;
  background:#eef3ff;color:#14204a;box-shadow:0 .7em 1.6em -1em rgba(8,14,48,.6)}
.met__aud{grid-column:2}.met__cre{grid-column:3}
.met__h{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.met__h b{font-size:1.1em;font-weight:700;white-space:nowrap}
.met__sub{font-size:.75em;color:#6a7aa6;white-space:nowrap}
.met__lbl{display:flex;justify-content:space-between;font-size:.78em;font-weight:600;color:#6a7aa6}
.met__lbl em{font-style:normal;font-weight:500}
/* audience: a dotted map with the chosen area, interests, age range, placements */
.met__map{position:relative;flex:none;height:6.2em;border-radius:.7em;overflow:hidden;background:#dbe5f8}
.met__land,.met__region{position:absolute;inset:0}
.met__land{background:radial-gradient(circle,#8fa3d3 .09em,transparent .13em) 0 0/.62em .62em;
  -webkit-mask:radial-gradient(ellipse 30% 40% at 24% 42%,#000 97%,transparent),radial-gradient(ellipse 36% 38% at 64% 62%,#000 97%,transparent),radial-gradient(ellipse 22% 26% at 70% 26%,#000 97%,transparent);
  mask:radial-gradient(ellipse 30% 40% at 24% 42%,#000 97%,transparent),radial-gradient(ellipse 36% 38% at 64% 62%,#000 97%,transparent),radial-gradient(ellipse 22% 26% at 70% 26%,#000 97%,transparent)}
.met__region{background:radial-gradient(circle,#c4903a .11em,transparent .16em) 0 0/.62em .62em,rgba(216,182,120,.22);
  -webkit-mask:radial-gradient(ellipse 22% 28% at 64% 62%,#000 97%,transparent);mask:radial-gradient(ellipse 22% 28% at 64% 62%,#000 97%,transparent)}
.met__pin{position:absolute;left:64%;top:62%;width:.8em;height:.8em;margin:-.4em 0 0 -.4em;border-radius:50%;background:#14204a;border:.15em solid #fff;box-shadow:0 .2em .5em rgba(8,14,48,.5)}
.met__loc{position:absolute;left:.5em;bottom:.5em;padding:.15em .6em;border-radius:99px;background:rgba(255,255,255,.9);font-size:.72em;font-weight:600;color:#14204a}
.met__chips{display:flex;gap:.4em;flex-wrap:wrap}
.met__chip{padding:.22em .8em;border-radius:99px;background:rgba(216,182,120,.35);border:1px solid #d8b678;color:#7a5614;font-size:.82em;font-weight:600}
.met__range{position:relative;flex:none;height:.4em;margin:.5em .55em .45em;border-radius:99px;background:#c6d2ef}
.met__fill{position:absolute;left:22%;right:30%;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,#d8b678,#e8cf94)}
.met__hd{position:absolute;top:50%;width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em;border-radius:50%;background:#fff;border:.16em solid #c99a45;box-shadow:0 .15em .4em rgba(8,14,48,.35)}
.met__hd--a{left:22%}.met__hd--b{left:70%}
.met__pl{display:flex;align-items:center;justify-content:space-between;padding:.3em .6em;border-radius:.5em;background:#e3eafb;font-size:.88em;font-weight:500}
.met__sw{position:relative;flex:none;width:2.2em;height:1.2em;border-radius:99px;background:#35a9d4}
.met__sw i{position:absolute;top:.1em;left:1.1em;width:1em;height:1em;border-radius:50%;background:#fff;box-shadow:0 .1em .3em rgba(0,0,0,.3)}
/* creative */
.met__seg{display:inline-flex;padding:.2em;border-radius:99px;background:#dde6f8;font-size:.72em;font-weight:500;color:#566486}
.met__seg span{padding:.2em .8em;border-radius:99px}
.met__seg .is-on{background:#4f75d1;color:#fff;font-weight:600}
.met__poster{position:relative;flex:none;width:100%}
.met__sel{position:absolute;inset:-.45em;border:1.5px solid #4f75d1;border-radius:.5em;pointer-events:none}
.met__sel i{position:absolute;width:.7em;height:.7em;background:#fff;border:1.5px solid #4f75d1;border-radius:.2em}
.met__sel i:nth-child(1){left:-.4em;top:-.4em}.met__sel i:nth-child(2){right:-.4em;top:-.4em}
.met__sel i:nth-child(3){left:-.4em;bottom:-.4em}.met__sel i:nth-child(4){right:-.4em;bottom:-.4em}
.met__beam{position:absolute;inset:0;overflow:hidden;border-radius:4%;pointer-events:none}
.met__beam::after{content:"";position:absolute;left:0;right:0;top:0;height:26%;opacity:0;background:linear-gradient(180deg,transparent,rgba(216,182,120,.55),transparent)}
.met__box{display:flex;align-items:center;justify-content:space-between;height:2.1em;padding:0 .8em;border-radius:.6em;background:#fff;border:1px solid #c6d2ef;font-size:.9em;font-weight:500}
.met__box .met__i{font-size:1.1em;color:#6a7aa6}

/* the ad creative (one design, used large and in the phone feed; sizes are cqw of the creative itself) */
.met__cr{position:relative;container:metcr/inline-size;width:100%;aspect-ratio:4/5;border-radius:4%;overflow:hidden;color:#14204a;background:linear-gradient(160deg,#f8efdb,#ecdcb8)}
.met__cr-bar{position:absolute;left:-10%;bottom:27%;width:125%;height:13cqw;background:linear-gradient(90deg,#d8b678,#ecd194);transform:rotate(-12deg)}
.met__cr-disc{position:absolute;right:-22cqw;bottom:-24cqw;width:84cqw;height:84cqw;border-radius:50%;background:radial-gradient(circle at 32% 28%,#33499c,#14204a 70%)}
.met__cr-in{position:absolute;inset:0;padding:9cqw;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between}
.met__cr-tag{padding:1.6cqw 4cqw;border-radius:99px;background:#14204a;color:#f6e4b6;font-size:5.4cqw;font-weight:600;letter-spacing:.04em}
.met__cr strong{font-size:12.4cqw;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.met__cr-cta{padding:2.6cqw 6cqw;border-radius:99px;background:#14204a;color:#fff;font-size:6cqw;font-weight:600}

/* live preview: the phone */
.met__prev{grid-column:4;grid-row:4;display:flex;flex-direction:column;align-items:center;gap:1cqw;min-width:0;padding:1.2cqw 1cqw 1.6cqw;border-radius:1.8cqw;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16)}
.met__plabel{font-size:2cqw;font-weight:600;color:#d2dbf6;white-space:nowrap}
.met__phone{position:relative;flex:1;min-height:0;aspect-ratio:9/19}
.met .appx__body{background:linear-gradient(145deg,#5d6ca3,#26356b 42%,#3d4d86);box-shadow:0 0 0 1.5px #cdb27a,0 0 0 2.6px rgba(255,255,255,.55),0 2cqw 3cqw -1.4cqw rgba(8,14,48,.6)}
.met .appx__screen{background:linear-gradient(180deg,#e7edfb,#d6e0f4)}
.appx__view.met__feed{gap:2.6cqw;padding:13cqw 0 0}
.met__fh{display:flex;align-items:center;gap:2.4cqw;padding:0 4cqw}
.met__fav{flex:none;width:8cqw;height:8cqw;border-radius:50%;background:linear-gradient(135deg,#f6e4b6,#d8b678);box-shadow:0 0 0 .7cqw #e7edfb,0 0 0 1.3cqw rgba(216,182,120,.8)}
.met__fwho{display:flex;flex-direction:column;line-height:1.2}
.met__fwho b{font-size:max(5cqw,6.2px);font-weight:700}
.met__fwho em{font-style:normal;font-size:max(3.8cqw,5.4px);color:#6a7aa6}
.met__fmore{margin-left:auto;width:6cqw;height:6cqw;fill:currentColor;stroke:none;color:#566486}
.met__fimg{position:relative;flex:none;width:100%;aspect-ratio:4/5;background:linear-gradient(120deg,#c9d6f0,#d9e3f6)}
.met__fimg .met__cr{position:absolute;inset:0;border-radius:0}
.met__fact{display:flex;justify-content:space-between;align-items:center;padding:0 4cqw;font-size:6cqw;color:#14204a}
.met__fact>span{display:flex;gap:3.4cqw}
.met__fcap{display:flex;flex-direction:column;gap:1.6cqw;padding:0 4cqw}
.met__bar{display:block;height:2cqw;border-radius:99px;background:#b3c2e6}
.met__bar--s{width:58%}

/* link markers between the three panes */
.met__node{position:absolute;z-index:5;top:39cqw;width:4.4cqw;height:4.4cqw;display:grid;place-items:center;border-radius:50%;font-size:2.4cqw;color:#14204a;
  background:linear-gradient(135deg,#f6e4b6,#d8b678);box-shadow:0 1cqw 2cqw -.8cqw rgba(120,86,30,.7),0 0 0 .5cqw #2d3f77}
.met__node--1{left:33.5cqw}.met__node--2{left:63.5cqw}

/* the footer band with the three topics */
.met .svc-art__chips{position:static;flex:none;padding:.8rem 1rem;background:#2e4078;border-top:1px solid rgba(255,255,255,.18)}
.met .svc-art__chips li{background:rgba(255,255,255,.14);color:#f1f4fe;border:1px solid rgba(255,255,255,.3);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* before the demo plays (script present, panel not yet in view): hold the scene back so the finished view does not flash */
.met.is-armed:not(.is-play) .met__scene,.met.is-armed:not(.is-play) .svc-art__chips{opacity:0}

/* ---- the sequence: about 3.8 seconds, once ---- */
.met.is-play .met__win{animation:metWin .8s cubic-bezier(.2,.8,.2,1) both}
.met.is-play .met__titlebar{animation:metFade .4s ease .15s both}
.met.is-play .met__steps{animation:metFade .4s ease .3s both}
.met.is-play .met__aud{animation:metPop .5s cubic-bezier(.2,.8,.25,1) .3s both}
.met.is-play .met__cre{animation:metPop .5s cubic-bezier(.2,.8,.25,1) .45s both}
.met.is-play .met__prev{animation:metPop .5s cubic-bezier(.2,.8,.25,1) .6s both}
.met.is-play .met__phone{animation:metPhone .8s cubic-bezier(.2,.8,.2,1) .7s both}
.met.is-play .met__step--0 i{animation:metPopI .35s cubic-bezier(.3,1.4,.5,1) .6s both}
.met.is-play .met__step--1 i{animation:metPopI .35s cubic-bezier(.3,1.4,.5,1) 1.3s both}
.met.is-play .met__step--2 i{animation:metPopI .35s cubic-bezier(.3,1.4,.5,1) 2s both}
.met.is-play .met__region{animation:metFade .5s ease 1s both}
.met.is-play .met__pin{animation:metPopI .4s cubic-bezier(.3,1.4,.5,1) 1.1s both}
.met.is-play .met__chip{animation:metChip .3s ease calc(1.15s + var(--n)*.15s) both}
.met.is-play .met__fill{animation:metWipe .5s ease 1.4s both}
.met.is-play .met__hd--a{animation:metPopI .3s cubic-bezier(.3,1.4,.5,1) 1.4s both}
.met.is-play .met__hd--b{animation:metPopI .3s cubic-bezier(.3,1.4,.5,1) 1.7s both}
.met.is-play .met__sw--1{animation:metSwBg .3s ease 1.75s both}.met.is-play .met__sw--1 i{animation:metSwKnob .3s ease 1.75s both}
.met.is-play .met__sw--2{animation:metSwBg .3s ease 1.95s both}.met.is-play .met__sw--2 i{animation:metSwKnob .3s ease 1.95s both}
.met.is-play .met__cr--big{animation:metFocus .6s ease 1.3s both}
.met.is-play .met__sel{animation:metFade .25s ease 2s both}
.met.is-play .met__beam::after{animation:metBeam .6s ease 2.15s both}
.met.is-play .met__node--1{animation:metPopI .4s cubic-bezier(.3,1.4,.5,1) 1.95s both}
.met.is-play .met__node--2{animation:metPopI .4s cubic-bezier(.3,1.4,.5,1) 2.55s both}
.met.is-play .met__cr--post{animation:metWipe .6s ease 2.35s both}
.met.is-play .met__feed>*{animation:appxRise .5s cubic-bezier(.2,.75,.25,1) both}
.met.is-play .met__feed>:nth-child(1){animation-delay:.95s}
.met.is-play .met__feed>:nth-child(2){animation-delay:1.05s}
.met.is-play .met__feed>:nth-child(3){animation-delay:2.8s}
.met.is-play .met__feed>:nth-child(4){animation-delay:2.9s}
.met.is-play .met__st--draft{animation:metOut .3s ease 3s both}
.met.is-play .met__st--ready{animation:metFade .3s ease 3s both}
.met.is-play .met__gloss::after{animation:appxSweep 1.1s ease 2.75s both}
.met.is-play .svc-art__chips{animation:appxFade .6s ease .5s both}

@keyframes metWin{from{opacity:0;transform:translateY(3cqw) scale(.98)}to{opacity:1;transform:none}}
@keyframes metFade{from{opacity:0}to{opacity:1}}
@keyframes metOut{from{opacity:1}to{opacity:0}}
@keyframes metPop{from{opacity:0;transform:translateY(6%) scale(.97)}to{opacity:1;transform:none}}
@keyframes metPopI{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes metPhone{from{opacity:0;transform:translateY(10%)}to{opacity:1;transform:none}}
@keyframes metChip{from{background:#e0e8f8;border-color:#c6d2ef;color:#4a5a86}to{background:rgba(216,182,120,.35);border-color:#d8b678;color:#7a5614}}
@keyframes metWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes metFocus{from{opacity:.45;filter:blur(7px);transform:scale(.95)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes metBeam{from{opacity:0;transform:translateY(-110%)}15%{opacity:1}85%{opacity:1}to{opacity:0;transform:translateY(400%)}}
@keyframes metSwBg{from{background:#b3c1e6}to{background:#35a9d4}}
@keyframes metSwKnob{from{left:.1em}to{left:1.1em}}

/* tablet and stacked layout: same composition, panel capped in width */
@media (max-width:1000px){
  .met{max-width:640px}
}
/* phone: the audience panel spans the top, the creative and the phone preview share the lower row */
@media (max-width:640px){
  .met{max-width:none}
  .met__scene{aspect-ratio:100/128}
  .met__win{grid-template-columns:3% 1fr 1fr 3%;column-gap:2%;grid-template-rows:5.4% 5.8% 1.6% 33% 1.6% 1fr 1.6%;aspect-ratio:100/122}
  .met__titlebar{font-size:3.4cqw}
  .met__steps{font-size:2.8cqw}
  .met__aud{--cf:2.7cqw;grid-column:2/4;grid-row:4;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;align-content:start;gap:.55em .9em}
  .met__aud .met__h{grid-column:1/-1}
  .met__aud .met__map{grid-column:1;grid-row:2/7;height:auto;min-height:9em}
  .met__aud>*:not(.met__h):not(.met__map){grid-column:2}
  .met__lbl--pl,.met__pl--2{display:none}
  .met__cre .met__lbl,.met__cre .met__box{display:none}
  .met__cre{--cf:2.7cqw;grid-column:2;grid-row:6}
  .met__prev{grid-column:3;grid-row:6;padding:2cqw 1.4cqw 2.2cqw}
  .met__plabel{font-size:2.8cqw}
  .met__node--1{display:none}
  .met__node--2{left:48.7cqw;top:80cqw;font-size:3cqw;width:5.4cqw;height:5.4cqw}
  .met .svc-art__chips{gap:.3rem;padding:.65rem .8rem}
  .met .svc-art__chips li{padding:.27rem .5rem;font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .met *,.met *::before,.met *::after{animation:none!important}
}

/* Website Development hero: the entrance is held at its first frame until the inline script in website-development.html adds .is-play (when the panel is in view or about to be); without the script it plays as before */
.webdev-showcase.is-armed:not(.is-play),
.webdev-showcase.is-armed:not(.is-play) *,
.webdev-showcase.is-armed:not(.is-play) *::before,
.webdev-showcase.is-armed:not(.is-play) *::after{animation-play-state:paused!important}

/* =========================================================
   Our Team: "Meet Our Visionaries" (Founder and Co-Founder): cinematic immersive leadership, light theme.
   Two full-width compositions (Founder first, Co-Founder second, mirrored): a large portrait that is revealed through a mask, soft blue
   ambient light and layered slabs behind it, and an information panel beside it. Only this section is styled here. Names, designations,
   biographies and photographs come from the admin panel through public-content.js; the built-in cards in team.html only show until a
   profile is saved. Pure CSS (the reveal is triggered by the page's existing scroll observer).
   Palette: #F5F7FC / #EAF0FA, white, royal blue #3159A5, deep blue #1B315F, champagne gold #D5B477, soft gold #E9D7AC, text #192B4D / #64728A.
   ========================================================= */
.ldr{position:relative;overflow:hidden;padding:clamp(4.5rem,9vw,7.5rem) 0;color:#192B4D;
  background:radial-gradient(1000px 520px at 8% 0%,rgba(49,89,165,.13),transparent 66%),radial-gradient(900px 520px at 96% 100%,rgba(213,180,119,.22),transparent 66%),linear-gradient(180deg,#F5F7FC,#EAF0FA)}
.ldr .wrap{position:relative;width:min(1400px,95%)}
.ldr :focus-visible{outline:2px solid #3159A5;outline-offset:4px}
.ldr__bg{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.ldr__bg--a{left:-180px;top:34%;width:520px;height:520px;background:radial-gradient(circle,rgba(49,89,165,.14),transparent 68%);animation:ldrDrift 20s ease-in-out infinite alternate}
.ldr__bg--b{right:-160px;top:-90px;width:460px;height:460px;background:radial-gradient(circle,rgba(213,180,119,.28),transparent 68%);animation:ldrDrift 24s ease-in-out -9s infinite alternate}
@keyframes ldrDrift{to{transform:translate3d(36px,28px,0)}}

/* ---- introduction ---- */
.ldr__top{text-align:center;max-width:1000px;margin:0 auto}
.ldr__eyebrow{display:inline-flex;align-items:center;gap:1rem;margin:0 0 1.3rem;font:800 .78rem/1 "Manrope","Poppins",sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#3159A5}
.ldr__eyebrow::before,.ldr__eyebrow::after{content:"";width:40px;height:1px;background:linear-gradient(90deg,transparent,#D5B477)}
.ldr__eyebrow::after{transform:scaleX(-1)}
.ldr__title{margin:0;font:800 clamp(2.4rem,6vw,4.7rem)/1.06 "Manrope","Poppins",sans-serif;letter-spacing:-.03em;color:#1B315F}
.ldr__title span{background:linear-gradient(100deg,#3159A5 0%,#5b8be6 48%,#3159A5 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ldrSheen 8s linear infinite}
@keyframes ldrSheen{to{background-position:-200% 0}}
.ldr__sub{margin:1.3rem 0 0;font:400 clamp(1.02rem,1.6vw,1.22rem)/1.7 "Inter","Poppins",sans-serif;color:#64728A}
.ldr__line{display:block;width:150px;height:3px;margin:1.9rem auto 0;border-radius:3px;background:linear-gradient(90deg,#D5B477,#E9D7AC,#D5B477);background-size:200% 100%;animation:ldrSheen 5s linear infinite}

/* ---- the two compositions ---- */
.ldr__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(4.5rem,9vw,8rem);margin-top:clamp(3.2rem,6vw,5.5rem)}
.ldr__card{position:relative;display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);align-items:center;gap:clamp(2.5rem,6vw,6rem);width:100%;max-width:1180px;margin:0 auto;color:#192B4D}
.ldr__card[data-lead="co_founder"]{grid-template-columns:minmax(0,1fr) minmax(0,480px)}
.ldr__card[data-lead="co_founder"] .ldr__stage{order:2}
.ldr__card.reveal,.js .ldr__card.reveal{opacity:1;transform:none;transition:none}

/* portrait: identical size for both leaders (5:6), photograph fills the frame from its top edge (cover) with a focal point chosen for each picture,
   so the head and shoulders stay in view. Soft blue light behind it and two offset slabs give the depth. */
.ldr__stage{position:relative;width:100%}
.ldr__deco{position:absolute;inset:0;pointer-events:none}
.ldr__glow{position:absolute;inset:-16% -24%;background:radial-gradient(closest-side,rgba(49,89,165,.34),rgba(49,89,165,.1) 58%,transparent 76%);filter:blur(8px);animation:ldrBreath 9s ease-in-out infinite alternate;transition:transform .8s ease}
@keyframes ldrBreath{from{opacity:.7}to{opacity:1}}
.ldr__slab{position:absolute;inset:0;border-radius:36px;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .6s ease,border-color .6s ease}
.ldr__slab--a{border:1.5px solid rgba(213,180,119,.85);transform:translate(24px,24px)}
.ldr__slab--b{background:linear-gradient(150deg,rgba(49,89,165,.2),rgba(49,89,165,.03));transform:translate(-20px,-20px)}
.ldr__card[data-lead="co_founder"] .ldr__slab--a{transform:translate(-24px,24px)}
.ldr__card[data-lead="co_founder"] .ldr__slab--b{transform:translate(20px,-20px)}
.ldr__float{position:relative;aspect-ratio:5/6;border-radius:32px;background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.95),0 0 0 7px rgba(213,180,119,.55),0 46px 80px -34px rgba(27,49,95,.55),0 0 60px -14px rgba(49,89,165,.35);
  transition:box-shadow .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.ldr__photo{position:absolute;inset:0;margin:0;border-radius:inherit;overflow:hidden;background:#EEF3FC}
.ldr__img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.ldr__card[data-lead="founder"] .ldr__img{object-position:49.5% 0}
.ldr__card[data-lead="co_founder"] .ldr__img{object-position:50% 0}
.ldr__img[hidden],.ldr__ph[hidden]{display:none}
.ldr__ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ldr__ph img{width:96px;height:96px;opacity:.55}

/* information panel */
.ldr__body{position:relative;min-width:0;padding:clamp(1.8rem,3vw,2.8rem) clamp(1.6rem,3vw,2.9rem) clamp(1.8rem,3vw,2.8rem) clamp(2rem,3.4vw,3.3rem);border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 36px 64px -40px rgba(27,49,95,.35),inset 0 1px 0 #fff;transition:background .5s ease,box-shadow .5s ease}
.ldr__body::before{content:"";position:absolute;left:0;top:50%;width:3px;height:42%;border-radius:3px;translate:0 -50%;background:linear-gradient(180deg,#E9D7AC,#D5B477,#E9D7AC);transition:height .6s cubic-bezier(.2,.7,.2,1)}
.ldr__head{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ldr__role{margin:0;padding:.5rem 1rem;border-radius:12px;font:800 .72rem/1.4 "Manrope","Poppins",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5d4513;
  background:linear-gradient(135deg,#F4E8C6,#E9D7AC);border:1px solid rgba(213,180,119,.95);box-shadow:0 10px 20px -12px rgba(160,120,40,.6)}
.ldr__body h3{margin:1.2rem 0 0;font:800 clamp(2rem,3.5vw,3.1rem)/1.1 "Manrope","Poppins",sans-serif;letter-spacing:-.03em;color:#1B315F;overflow-wrap:anywhere}
.ldr__rule{display:block;width:84px;height:3px;margin:1.3rem 0 1.4rem;border-radius:3px;background:linear-gradient(90deg,#3159A5,#D5B477);transform-origin:left;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.ldr__intro{margin:0;font:400 1.02rem/1.8 "Inter","Manrope","Poppins",sans-serif;color:#55627a;white-space:pre-line}
.ldr__intro + .ldr__intro{margin-top:.9rem}
.ldr__intro strong{color:#1B315F;font-weight:600}

/* hover and keyboard focus: portrait (scale, shadow, frame, light) and information (gold line, background) */
@media (hover:hover){
  .ldr__stage:hover .ldr__img{transform:scale(1.03)}
  .ldr__stage:hover .ldr__float{box-shadow:0 0 0 6px rgba(255,255,255,1),0 0 0 7px rgba(213,180,119,1),0 58px 90px -34px rgba(27,49,95,.65),0 0 80px -8px rgba(49,89,165,.5)}
  .ldr__stage:hover .ldr__glow{transform:scale(1.06)}
  .ldr__stage:hover .ldr__slab--a{transform:translate(30px,30px)}
  .ldr__stage:hover .ldr__slab--b{transform:translate(-24px,-24px)}
  .ldr__card[data-lead="co_founder"] .ldr__stage:hover .ldr__slab--a{transform:translate(-30px,30px)}
  .ldr__card[data-lead="co_founder"] .ldr__stage:hover .ldr__slab--b{transform:translate(24px,-24px)}
  .ldr__body:hover{background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.74));box-shadow:0 46px 74px -40px rgba(27,49,95,.42),inset 0 1px 0 #fff}
  .ldr__body:hover::before{height:78%}
  .ldr__body:hover .ldr__rule{width:130px}
}
.ldr__body:focus-visible{background:rgba(255,255,255,.95)}
.ldr__body:focus-visible::before{height:78%}

/* cinematic entrance (starts when the profile scrolls into view): the portrait is revealed through a mask while its picture settles,
   then the designation, name, gold line and each paragraph follow one after the other */
.js .ldr__photo{clip-path:inset(0 0 0 0 round 32px);transition:clip-path 1.4s cubic-bezier(.77,0,.18,1) .1s}
.js .ldr__card:not(.in) .ldr__photo{clip-path:inset(0 100% 0 0 round 32px)}
.js .ldr__card[data-lead="co_founder"]:not(.in) .ldr__photo{clip-path:inset(0 0 0 100% round 32px)}
.js .ldr__card:not(.in) .ldr__img{transform:scale(1.14)}
.js .ldr__img{transition:transform 1.8s cubic-bezier(.2,.7,.2,1) .1s}
.js .ldr__card.in .ldr__img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .ldr__glow,.js .ldr__slab{transition-delay:0s}
.js .ldr__card:not(.in) .ldr__deco{opacity:0;transform:scale(.96)}
.js .ldr__deco{transition:opacity 1.2s ease .25s,transform 1.4s cubic-bezier(.2,.7,.2,1) .25s}
.js .ldr__body{transition:opacity .9s ease .35s,transform .9s cubic-bezier(.2,.7,.2,1) .35s,background .5s ease,box-shadow .5s ease}
.js .ldr__card:not(.in) .ldr__body{opacity:0;transform:translateY(26px)}
.js :is(.ldr__role,.ldr__body h3,.ldr__rule,.ldr__intro){transition:opacity .8s ease var(--t,.6s),transform .8s cubic-bezier(.2,.7,.2,1) var(--t,.6s),width .6s cubic-bezier(.2,.7,.2,1)}
.js .ldr__card:not(.in) :is(.ldr__role,.ldr__body h3,.ldr__rule,.ldr__intro){opacity:0;transform:translateY(16px)}
.ldr__role{--t:.7s}.ldr__body h3{--t:.8s}.ldr__rule{--t:.9s}
.ldr__intro{--t:1s}.ldr__head + .ldr__intro{--t:1s}.ldr__head + .ldr__intro + .ldr__intro{--t:1.12s}.ldr__head + .ldr__intro + .ldr__intro + .ldr__intro{--t:1.24s}

/* held back for a moment until the saved profiles are applied (so the built-in text never flashes); shown anyway after 2.5 s if the script cannot run */
.js .ldr:not(.is-ready) .ldr__grid{visibility:hidden;animation:ldrShow 0s 2.5s forwards}
@keyframes ldrShow{to{visibility:visible}}
.ldr[hidden],.ldr__card[hidden],.ldr__note[hidden]{display:none}

/* tablet: the portrait above, the information below it, both centred and still large */
@media (max-width:960px){
  .ldr__card,.ldr__card[data-lead="co_founder"]{grid-template-columns:minmax(0,1fr);gap:3rem;max-width:660px}
  .ldr__card[data-lead="co_founder"] .ldr__stage{order:0}
  .ldr__stage{width:calc(100% - 56px);max-width:440px;margin:0 auto}
  .ldr__slab--a{transform:translate(18px,18px)}
  .ldr__slab--b{transform:translate(-16px,-16px)}
  .ldr__card[data-lead="co_founder"] .ldr__slab--a{transform:translate(-18px,18px)}
  .ldr__card[data-lead="co_founder"] .ldr__slab--b{transform:translate(16px,-16px)}
}
@media (max-width:700px){
  .ldr__stage{width:calc(100% - 40px)}
  .ldr__body{padding:1.6rem 1.3rem 1.6rem 1.6rem;border-radius:24px}
  .ldr__intro{font-size:1rem;line-height:1.75}
  .ldr__eyebrow::before,.ldr__eyebrow::after{width:22px}
  .ldr__grid{gap:4.5rem}
}
@media (prefers-reduced-motion:reduce){
  .ldr__bg,.ldr__glow,.ldr__title span,.ldr__line{animation:none!important}
  .js .ldr__photo,.js .ldr__card:not(.in) .ldr__photo,.js .ldr__card[data-lead="co_founder"]:not(.in) .ldr__photo{clip-path:none;transition:none}
  .js .ldr__card:not(.in) .ldr__img,.js .ldr__card:not(.in) .ldr__deco,.js .ldr__card:not(.in) .ldr__body,.js .ldr__card:not(.in) :is(.ldr__role,.ldr__body h3,.ldr__rule,.ldr__intro){opacity:1;transform:none}
  .js .ldr__img,.js .ldr__deco,.js .ldr__body,.js :is(.ldr__role,.ldr__body h3,.ldr__rule,.ldr__intro),.ldr__float,.ldr__slab,.ldr__glow{transition:none!important}
}

/* =========================================================
   Our Team hero: orbital ecosystem (right-hand visual, team.html only)
   A holographic Hub 360 Group sphere at the centre, four tilted orbital rings with travelling light, and three floating glass nodes
   (Rent Hub 360, Gate Hub 360, Design Hub 360) joined to the sphere by glowing lines with moving particles. Everything scales with the
   panel width (container units). The scene sways gently and follows the mouse a little; a hovered / focused / tapped hub is lit and named.
   Animations only run while the panel is on screen and stop for reduced motion.
   Palette: navy #0B1535, deep blue #19366B, electric blue #2E8EFF, cyan #49E0FF, champagne gold #E5C27D / #F5DFA8, white highlights.
   ========================================================= */
.svc-art.orb{display:block;position:relative;container-type:inline-size;aspect-ratio:600/480;perspective:1100px;border-radius:26px;overflow:hidden;
  background:linear-gradient(160deg,#1d4fa8 0%,#19366B 46%,#0e2457 100%);
  border:1px solid rgba(245,223,168,.26);box-shadow:0 40px 80px -34px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.05)}
.orb__bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 52% at 50% 50%,rgba(73,190,255,.38),transparent 72%),radial-gradient(40% 40% at 10% 6%,rgba(46,142,255,.5),transparent 70%),radial-gradient(40% 40% at 94% 96%,rgba(229,194,125,.34),transparent 70%),
    radial-gradient(1.2px 1.2px at 12% 38%,rgba(255,255,255,.8) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 86% 30%,rgba(255,255,255,.7) 50%,transparent 52%),radial-gradient(1.4px 1.4px at 70% 82%,rgba(245,223,168,.9) 50%,transparent 52%),
    radial-gradient(1px 1px at 28% 86%,rgba(255,255,255,.7) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 44% 10%,rgba(245,223,168,.8) 50%,transparent 52%),radial-gradient(1px 1px at 92% 62%,rgba(255,255,255,.6) 50%,transparent 52%)}
.orb__bg::after{content:"";position:absolute;inset:-20%;background:radial-gradient(30% 30% at 30% 70%,rgba(73,224,255,.22),transparent 70%),radial-gradient(28% 28% at 72% 26%,rgba(229,194,125,.2),transparent 70%);animation:orbAmb 16s ease-in-out infinite alternate}
@keyframes orbAmb{to{transform:translate3d(8%,-6%,0) scale(1.08)}}

.orb__sway{position:absolute;inset:0;transform-style:preserve-3d;animation:orbSway 18s ease-in-out infinite alternate}
@keyframes orbSway{from{transform:rotateY(-2.5deg) rotateX(1deg)}to{transform:rotateY(2.5deg) rotateX(-1deg)}}
.orb__scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.orb__rings{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}

/* rings: each is tilted in 3D and its inner element turns; a bright comet arc and a particle ride on it */
.orb__ring{position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:1;translate:-50% -50%;transform:rotateX(var(--tx)) rotateY(var(--ty));transform-style:preserve-3d;pointer-events:none}
.orb__spin{position:absolute;inset:0;border-radius:50%;border:1.2px solid rgba(var(--cr),.6);animation:orbSpin var(--t) linear infinite;will-change:transform}
.orb__spin::before{content:"";position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 58%,rgba(var(--cr),.95) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.orb__dot{position:absolute;left:50%;top:0;width:clamp(5px,1.4cqw,9px);aspect-ratio:1;margin:calc(clamp(5px,1.4cqw,9px) / -2) 0 0 calc(clamp(5px,1.4cqw,9px) / -2);border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(var(--cr),.95)}
.orb__dot--b{top:100%;width:clamp(3px,.9cqw,6px);margin:calc(clamp(3px,.9cqw,6px) / -2) 0 0 calc(clamp(3px,.9cqw,6px) / -2);background:rgba(var(--cr),1)}
@keyframes orbSpin{to{transform:rotate(360deg)}}
.orb__ring--1{--w:74%;--tx:71deg;--ty:-10deg;--t:24s;--cr:229,194,125}
.orb__ring--2{--w:92%;--tx:65deg;--ty:16deg;--t:34s;--cr:46,142,255}
.orb__ring--2 .orb__spin{animation-direction:reverse}.orb__ring--2 .orb__spin::before{transform:scaleX(-1)}
.orb__ring--3{--w:56%;--tx:77deg;--ty:-24deg;--t:19s;--cr:73,224,255}
.orb__ring--4{--w:100%;--tx:73deg;--ty:6deg;--t:48s;--cr:245,223,168}
.orb__ring--4 .orb__spin{border-style:dashed;animation-direction:reverse}.orb__ring--4 .orb__spin::before{transform:scaleX(-1);opacity:.6}

/* connection lines */
.orb__lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;fill:none;stroke:none}
.orb__ln path{fill:none;stroke-linecap:round;transition:stroke .4s ease,stroke-width .4s ease,stroke-opacity .4s ease,opacity .4s ease}
.orb__ln-glow{stroke:#2E8EFF;stroke-width:9;stroke-opacity:.22}
.orb__ln-core{stroke:#8fd0ff;stroke-width:1.8;stroke-opacity:.9;stroke-dasharray:100}
.orb__run{stroke:#F5DFA8;stroke-width:3.2;stroke-dasharray:9 91;animation:orbRun var(--t,3.6s) linear infinite}
@keyframes orbRun{from{stroke-dashoffset:9}to{stroke-dashoffset:-100}}
.orb__ln--gate .orb__ln-glow{stroke:#49E0FF}
.orb__ln--design .orb__ln-glow{stroke:#E5C27D}

/* central sphere */
.orb__core{position:absolute;left:50%;top:49%;width:36%;aspect-ratio:1;translate:-50% -50%;transition:opacity 1.1s ease .1s,scale 1.3s cubic-bezier(.2,.7,.2,1) .1s}
.orb__aura{position:absolute;inset:-52%;border-radius:50%;background:radial-gradient(circle,rgba(110,205,255,.6) 0,rgba(46,142,255,.3) 34%,transparent 68%);animation:orbBreath 5s ease-in-out infinite}
.orb__shell{position:absolute;border-radius:50%;border:1px solid rgba(160,225,255,.5);background:radial-gradient(circle,transparent 60%,rgba(73,190,255,.2) 100%);animation:orbBreath 5s ease-in-out -1.2s infinite}
.orb__shell--1{inset:-8%}
.orb__shell--2{inset:-17%;border-color:rgba(229,194,125,.4);background:none;animation-delay:-2.6s}
@keyframes orbBreath{0%,100%{transform:scale(.96);opacity:.75}50%{transform:scale(1.06);opacity:1}}
.orb__sphere{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 52%,#fff6cf 0,#f4d993 13%,#e5c27d 27%,rgba(229,194,125,.65) 40%,rgba(46,142,255,.9) 63%,#1546a8 82%,#0c2a6b 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.28),0 0 40px 6px rgba(73,190,255,.6),0 0 90px 16px rgba(46,142,255,.38),inset 0 -14px 30px rgba(11,21,53,.55),inset 0 10px 24px rgba(255,255,255,.3);
  animation:orbThrob 5s ease-in-out infinite}
@keyframes orbThrob{50%{transform:scale(1.018)}}
.orb__sphere::before{content:"";position:absolute;left:10%;top:5%;width:64%;height:38%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));transform:rotate(-14deg);pointer-events:none}
.orb__sphere::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 72% 88%,rgba(73,224,255,.6),transparent 46%);pointer-events:none}
.orb__grid{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.42);stroke-width:.9}
.orb__lon{transform-box:fill-box;transform-origin:center;animation:orbLon 14s linear var(--d,0s) infinite}
@keyframes orbLon{from{transform:scaleX(1)}to{transform:scaleX(-1)}}
.orb__logo{position:absolute;left:50%;top:41%;width:35%;height:auto;translate:-50% -50%;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.65),0 10px 22px -6px rgba(11,21,53,.7);z-index:1}
.orb__brand{position:absolute;left:0;right:0;top:67%;z-index:1;text-align:center;font:800 clamp(.5rem,2.2cqw,.8rem)/1 "Manrope","Poppins",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(11,21,53,.9)}

/* the three hubs */
.orb__node{position:absolute;width:13.4%;aspect-ratio:1;translate:-50% -50%;margin:0;padding:0;border:0;background:none;color:inherit;cursor:pointer;transform:translateZ(34px);
  transition:opacity .5s ease,scale .5s cubic-bezier(.2,.7,.2,1)}
.orb__node:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:50%}
.orb__node--rent{--ha:229,194,125;--hb:46,142,255}
.orb__node--gate{--ha:46,142,255;--hb:73,224,255}
.orb__node--design{--ha:245,223,168;--hb:229,194,125}
.orb__disc{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;animation:orbFloat 6s ease-in-out infinite alternate;
  background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.6),rgba(255,255,255,.1) 40%,transparent 62%),linear-gradient(145deg,rgba(var(--ha),.7),rgba(var(--hb),.55) 70%,rgba(11,21,53,.45));
  border:1.5px solid rgba(255,255,255,.6);box-shadow:0 0 0 6px rgba(var(--ha),.16),0 16px 32px -10px rgba(var(--ha),.8),inset 0 0 18px rgba(255,255,255,.22);transition:box-shadow .5s ease,border-color .5s ease}
.orb__node--gate .orb__disc{animation-duration:7s;animation-delay:-2s}
.orb__node--design .orb__disc{animation-duration:6.5s;animation-delay:-4s}
@keyframes orbFloat{to{transform:translateY(-7%)}}
.orb__disc svg{width:50%;height:50%;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(11,21,53,.5))}
.orb__name{position:absolute;left:50%;top:calc(100% + .5em);translate:-50% 0;display:block;padding:.3em .85em;border-radius:999px;white-space:nowrap;text-align:center;
  font:700 max(.6rem,1.9cqw)/1.3 "Poppins",sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:rgba(11,21,53,.62);border:1px solid rgba(var(--ha),.7);
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
.orb__name small{display:block;max-height:0;opacity:0;overflow:hidden;font-weight:400;font-size:.88em;letter-spacing:.03em;text-transform:none;color:#dbe9ff;transition:max-height .4s ease,opacity .4s ease}

.orb[data-on="rent"] .orb__node--rent,.orb[data-on="gate"] .orb__node--gate,.orb[data-on="design"] .orb__node--design{scale:1.14}
.orb[data-on="rent"] .orb__node--rent .orb__disc,.orb[data-on="gate"] .orb__node--gate .orb__disc,.orb[data-on="design"] .orb__node--design .orb__disc{border-color:#fff;box-shadow:0 0 0 9px rgba(var(--ha),.3),0 0 40px 6px rgba(var(--ha),.85),inset 0 0 22px rgba(255,255,255,.35)}
.orb[data-on="rent"] .orb__node--rent .orb__name,.orb[data-on="gate"] .orb__node--gate .orb__name,.orb[data-on="design"] .orb__node--design .orb__name{background:rgba(11,21,53,.9);border-color:#fff;box-shadow:0 10px 26px -10px rgba(var(--ha),.9)}
.orb[data-on="rent"] .orb__node--rent small,.orb[data-on="gate"] .orb__node--gate small,.orb[data-on="design"] .orb__node--design small{max-height:2.6em;opacity:1}
.orb[data-on="rent"] .orb__ln--rent .orb__ln-core,.orb[data-on="gate"] .orb__ln--gate .orb__ln-core,.orb[data-on="design"] .orb__ln--design .orb__ln-core{stroke:#fff;stroke-width:3.2;stroke-opacity:1}
.orb[data-on="rent"] .orb__ln--rent .orb__ln-glow,.orb[data-on="gate"] .orb__ln--gate .orb__ln-glow,.orb[data-on="design"] .orb__ln--design .orb__ln-glow{stroke:#F5DFA8;stroke-width:15;stroke-opacity:.45}
.orb[data-on="rent"] .orb__ln--rent .orb__run,.orb[data-on="gate"] .orb__ln--gate .orb__run,.orb[data-on="design"] .orb__ln--design .orb__run{animation-duration:1.3s}
.orb[data-on="rent"] :is(.orb__node--gate,.orb__node--design),.orb[data-on="gate"] :is(.orb__node--rent,.orb__node--design),.orb[data-on="design"] :is(.orb__node--rent,.orb__node--gate){opacity:.62}
.orb[data-on="rent"] :is(.orb__ln--gate,.orb__ln--design),.orb[data-on="gate"] :is(.orb__ln--rent,.orb__ln--design),.orb[data-on="design"] :is(.orb__ln--rent,.orb__ln--gate){opacity:.5}

/* entrance (armed by the script, so nothing is hidden if it cannot run) */
.orb.is-armed:not(.is-in) .orb__core{opacity:0;scale:.6}
.orb.is-armed:not(.is-in) .orb__ring{opacity:0;scale:.7}
.orb.is-armed .orb__ring{transition:opacity 1.2s ease .5s,scale 1.4s cubic-bezier(.2,.7,.2,1) .5s}
.orb.is-armed:not(.is-in) .orb__node{opacity:0;scale:.6}
.orb.is-armed .orb__node--rent{transition-delay:.9s}.orb.is-armed .orb__node--gate{transition-delay:1.05s}.orb.is-armed .orb__node--design{transition-delay:1.2s}
.orb.is-armed:not(.is-in) .orb__ln-core{stroke-dashoffset:100}
.orb.is-armed .orb__ln-core{transition:stroke-dashoffset 1.4s ease .8s,stroke .4s ease,stroke-width .4s ease,stroke-opacity .4s ease}
.orb.is-armed:not(.is-in) :is(.orb__ln-glow,.orb__run,.orb__lines circle){opacity:0}
.orb.is-armed :is(.orb__ln-glow,.orb__run,.orb__lines circle){transition:opacity 1s ease 1.8s}

.orb:not(.is-live) :is(.orb__sway,.orb__spin,.orb__run,.orb__aura,.orb__shell,.orb__sphere,.orb__lon,.orb__disc){animation-play-state:paused}
.orb:not(.is-live) .orb__bg::after{animation-play-state:paused}

@media (max-width:900px){
  .orb__ring--4,.orb__shell--2{display:none}
}
@media (max-width:640px){
  .svc-art.orb{border-radius:20px}
  .orb__dot--b{display:none}
  .orb__name small{display:none}
  .orb[data-on] .orb__name small{display:block}
}
@media (prefers-reduced-motion:reduce){
  .orb__sway,.orb__bg::after,.orb__spin,.orb__run,.orb__aura,.orb__shell,.orb__sphere,.orb__lon,.orb__disc{animation:none!important}
  .orb__run,.orb__lines circle{display:none}
  .orb__scene{transform:none!important;transition:none}
  .orb.is-armed:not(.is-in) .orb__core,.orb.is-armed:not(.is-in) .orb__ring,.orb.is-armed:not(.is-in) .orb__node{opacity:1;scale:1}
  .orb.is-armed:not(.is-in) .orb__ln-core{stroke-dashoffset:0}
  .orb.is-armed:not(.is-in) :is(.orb__ln-glow,.orb__run){opacity:1}
  .orb__core,.orb__ring,.orb__node,.orb__ln-core,.orb__ln-glow{transition:none!important}
}

/* =========================================================
   Careers: current openings (careers.js fills #crJobs from the admin panel's Careers Management)
   ========================================================= */
.js .cr-wrap:not(.is-ready) .cr-empty{visibility:hidden;animation:crShow 0s 2.5s forwards}
@keyframes crShow{to{visibility:visible}}
.cr-empty[hidden],.cr-jobs[hidden]{display:none}
.cr-jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;max-width:1060px;margin:0 auto;padding:0;list-style:none}
.cr-job{display:flex;flex-direction:column;gap:.8rem;padding:1.6rem;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.cr-job::before{content:"";position:absolute;left:0;top:1.6rem;bottom:1.6rem;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--gold),var(--blue))}
.cr-job--closed::before{background:#c5cbe0}
.cr-job:hover{transform:translateY(-3px);box-shadow:0 28px 60px -24px rgba(14,26,64,.45)}
.cr-job__head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.cr-job h3{margin:0;font-size:1.2rem;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.cr-badge{flex:none;padding:.18rem .75rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cr-badge--open{background:#e3f6ec;color:#1b7440}
.cr-badge--closed{background:#eceff8;color:#5b6485}
.cr-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.cr-chips li{padding:.22rem .7rem;border-radius:999px;font-size:.78rem;font-weight:500;color:var(--navy-700);background:var(--tint);border:1px solid var(--line)}
.cr-job__short{margin:0;color:var(--muted);flex:1}
.cr-job__note{margin:0;font-size:.86rem;color:#8a5a12}
.cr-job__note--open{color:var(--blue)}
.cr-job__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.2rem}
.cr-job__actions .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cr-job .btn--ghost,.cr-dialog .btn--ghost{background:#fff;color:var(--navy-700);border-color:#cfd6ea;backdrop-filter:none}
.cr-job .btn--ghost:hover,.cr-dialog .btn--ghost:hover{background:var(--tint);border-color:var(--blue)}
.cr-job .btn[disabled],.cr-dialog .btn[disabled]{opacity:.55;cursor:not-allowed}
@media (max-width:820px){.cr-jobs{grid-template-columns:1fr}}

.cr-dialog{width:min(780px,calc(100vw - 1.5rem));max-height:calc(100vh - 1.5rem);padding:0;border:0;border-radius:26px;background:#fff;color:var(--ink);box-shadow:0 50px 100px -30px rgba(0,0,0,.65);overflow:auto}
.cr-dialog::backdrop{background:rgba(10,18,48,.66)}
.cr-dialog__box{position:relative;padding:2rem 2rem 1.6rem}
.cr-dialog__x{position:absolute;right:.9rem;top:.9rem;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.cr-dialog__x:hover{background:var(--tint)}
.cr-dialog__x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cr-dlg__head{display:flex;align-items:flex-start;gap:.8rem;margin:0 2.6rem .8rem 0;flex-wrap:wrap}
.cr-dlg__head h2{margin:0;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.2;overflow-wrap:anywhere}
.cr-dlg__lead{margin:.2rem 0 1rem;color:var(--muted)}
.cr-dlg__closed{margin:1rem 0 0;padding:.8rem 1rem;border-radius:12px;background:#fff6df;color:#7a5a10;font-weight:500}
.cr-sec{margin-top:1.4rem}
.cr-sec h3{margin:0 0 .5rem;font-size:1rem;letter-spacing:.02em;color:var(--navy-700)}
.cr-sec p{margin:0 0 .7rem;color:var(--ink);overflow-wrap:anywhere}
.cr-bul{margin:0;padding-left:1.2rem;display:grid;gap:.3rem;color:var(--ink);list-style:disc}
.cr-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.4rem}
.cr-facts dt{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cr-facts dd{margin:0;overflow-wrap:anywhere}
.cr-contact{margin:.4rem 0 0;color:var(--muted)}
.cr-dlg__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.cr-form{display:grid;gap:1rem}
.cr-form__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.cr-field{display:grid;gap:.3rem;min-width:0}
.cr-field label{font-size:.85rem;font-weight:600;color:var(--navy-700)}
.cr-field input,.cr-field textarea{width:100%;padding:.7rem .9rem;font:inherit;color:var(--ink);background:#fff;border:1.5px solid #cfd6ea;border-radius:12px}
.cr-field input[readonly]{background:var(--tint);color:var(--muted)}
.cr-field input[type=file]{padding:.55rem .7rem}
.cr-field input:focus,.cr-field textarea:focus{outline:3px solid rgba(63,85,165,.25);border-color:var(--blue)}
.cr-field [aria-invalid]{border-color:#c0392b}
.cr-err{margin:0;font-size:.82rem;color:#b3261e}
.cr-form__msg{margin:0;padding:.7rem 1rem;border-radius:12px;background:#fdecec;color:#a3262a;font-weight:500}
.cr-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cr-thanks{padding:1.4rem 0 .4rem;display:grid;gap:.8rem;justify-items:start}
.cr-thanks h2{margin:0}
.cr-thanks p{margin:0;color:var(--muted)}
@media (max-width:640px){
  .cr-dialog{width:100vw;max-width:100vw;max-height:100vh;border-radius:0}
  .cr-dialog__box{padding:1.6rem 1.1rem 1.2rem}
  .cr-facts,.cr-form__two{grid-template-columns:1fr}
  .cr-job{padding:1.3rem}
}
@media (prefers-reduced-motion:reduce){.cr-job{transition:none}.cr-job:hover{transform:none}}