/* ==========================================================================
   WHAT WE DO: built on the real picture of the glass tower (assets/v5d/wwd-tower.jpg).
   The text is live HTML on top of it. Six invisible buttons sit exactly over the six
   blocks; the chosen block lifts out, spins a full 360° and "What's included" opens.
   Block positions are in assets/v5d/what-we-do.js (BLOCKS).
   ========================================================================== */
.wwd{position:relative;overflow:hidden;isolation:isolate;background:#040d18;padding:0}
.wwd-stage{position:relative;max-width:1920px;margin:0 auto;container-type:inline-size}
.wwd-canvas{position:relative;width:100%;aspect-ratio:2650/1520}
.wwd-img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;user-select:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 90%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 90%,transparent 100%)}

/* light running down through the tower (sits in the core between the blocks) */
.wwd-flow{position:absolute;left:45%;width:13%;top:4%;height:83%;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.wwd-flow i{position:absolute;top:0;bottom:0;width:2px;border-radius:2px;opacity:.55;
  background:linear-gradient(180deg,transparent 0 40%,rgba(150,235,255,.95) 48%,transparent 56%) 0 0/100% 260% no-repeat;
  animation:wwdDrip 3.6s linear infinite;filter:drop-shadow(0 0 4px #39c8ff)}
.wwd-flow i:nth-child(1){left:22%;animation-duration:3.1s}
.wwd-flow i:nth-child(2){left:38%;animation-duration:4.2s;animation-delay:-1.4s}
.wwd-flow i:nth-child(3){left:50%;animation-duration:2.8s;animation-delay:-.6s}
.wwd-flow i:nth-child(4){left:63%;animation-duration:3.8s;animation-delay:-2.2s}
.wwd-flow i:nth-child(5){left:77%;animation-duration:4.6s;animation-delay:-3s}
@keyframes wwdDrip{from{background-position:0 100%}to{background-position:0 0}}

/* ---------- the six blocks ---------- */
.wwd-tabs{position:absolute;inset:0}
.wwd-tab{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);padding:0;border:0;background:none;cursor:pointer;perspective:1100px;-webkit-tap-highlight-color:transparent}
.wwd-tab:focus-visible{outline:none}
.wwd-tab:focus-visible .wwd-card{outline:2px solid #5ee9f5;outline-offset:3px;border-radius:10px}
/* the block itself: a cut-out of the picture with a back face */
.wwd-card{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.wwd-card>span{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wwd-face{background-image:url(wwd-tower.jpg);background-repeat:no-repeat;background-size:var(--bs);background-position:var(--bp)}
.wwd-card>.wwd-back{transform:rotateY(180deg);display:grid;place-items:center;inset:8% 1% 8% 15%;border-radius:9px;
  background:linear-gradient(135deg,rgba(30,90,130,.92),rgba(4,16,30,.97) 60%);border:1px solid rgba(140,230,255,.55);
  box-shadow:inset 0 0 24px rgba(60,200,255,.35),0 0 30px rgba(40,180,255,.35);
  font:600 clamp(9px,1.05cqw,18px)/1 'JetBrains Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:#bff3ff}
/* glow frame round the front glass of the open block */
.wwd-glow{position:absolute;left:15.5%;right:.5%;top:9%;bottom:9%;border-radius:10px;opacity:0;transition:opacity .45s;pointer-events:none;
  border:2px solid rgba(120,240,255,.95);box-shadow:0 0 10px rgba(80,230,255,.9),0 0 34px rgba(40,190,255,.6),inset 0 0 22px rgba(70,220,255,.35)}
/* Websites already glows in the picture: dim it when another block is open */
.wwd-dim{position:absolute;left:14.5%;right:0;top:6%;bottom:6%;border-radius:12px;background:rgba(3,12,26,.5);opacity:0;transition:opacity .45s;pointer-events:none}
.wwd-tab.first:not([aria-selected="true"]) .wwd-dim{opacity:1}
.wwd-tab:not(.first).opened .wwd-glow{opacity:1}

.wwd-tab.spinning{z-index:3}
.wwd-tab:not(.spinning):not([aria-selected="true"]):hover .wwd-card{filter:brightness(1.18)}

/* ---------- left: headline ---------- */
.wwd-intro{position:absolute;left:2.4%;top:22%;width:32%;color:#eef6fb}
.wwd-kick{display:flex;align-items:center;gap:1.4cqw;font:500 clamp(10px,.9cqw,15px)/1 'JetBrains Mono',monospace;letter-spacing:.32em;text-transform:uppercase;color:#cfe3ee}
.wwd-kick::before{content:'';width:2.9cqw;height:2px;background:#2fd6ea;box-shadow:0 0 10px #2fd6ea}
.wwd-intro h2{margin:2.1cqw 0 0;font-size:clamp(28px,3.55cqw,66px);line-height:1.06;letter-spacing:-.025em;font-weight:600;color:#f4f8fb}
.wwd-intro h2 span{color:#23d9f2;text-shadow:0 0 24px rgba(35,217,242,.35)}
.wwd-intro p{margin:1.8cqw 0 0;font-size:clamp(14px,1.32cqw,24px);line-height:1.45;color:#c3d3de}
.wwd-cta{display:inline-flex;align-items:center;gap:.6em;margin-top:2.6cqw;padding:.9em 1.6em;border-radius:999px;font-weight:600;font-size:clamp(13px,1.2cqw,21px);color:#04121c;text-decoration:none;
  background:linear-gradient(180deg,#5ef0ff,#1fcbe6);box-shadow:0 0 0 1px rgba(160,250,255,.6) inset,0 10px 30px rgba(30,200,240,.35),0 0 40px rgba(40,220,255,.25);transition:transform .3s,box-shadow .3s}
.wwd-cta svg{width:1.05em;height:1.05em}
.wwd-cta:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(200,255,255,.8) inset,0 14px 40px rgba(30,200,240,.5),0 0 60px rgba(40,220,255,.4)}

/* ---------- right: the open service ---------- */
.wwd-detail{position:absolute;left:75.6%;top:24%;width:21.5%;padding-left:1.9cqw;border-left:1px solid rgba(80,220,245,.75);color:#eef6fb;outline:none}
.wwd-count{display:block;font:500 clamp(10px,.92cqw,15px)/1 'JetBrains Mono',monospace;letter-spacing:.22em;color:#bcd2de}
.wwd-name{display:block;margin-top:1.4cqw;font-size:clamp(22px,2.55cqw,46px);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.wwd-line{margin:1.2cqw 0 0;font-size:clamp(14px,1.3cqw,23px);font-weight:400;line-height:1.4;color:#c3d3de}
.wwd-inc{margin-top:1.6cqw}
.wwd-inc-h{display:block;font:500 clamp(9px,.78cqw,13px)/1 'JetBrains Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:#5ee9f5}
.wwd-inc ul{list-style:none;margin:.9cqw 0 0;padding:0;display:grid;gap:.55cqw}
.wwd-inc li{position:relative;padding-left:1.4em;font-size:clamp(12px,.98cqw,17px);line-height:1.35;color:#dbe7ef}
.wwd-inc li::before{content:'';position:absolute;left:0;top:.48em;width:.5em;height:.5em;border-radius:2px;background:#2fd6ea;box-shadow:0 0 8px #2fd6ea}
.wwd-link{display:inline-block;margin-top:1.7cqw;padding-bottom:.35em;border-bottom:1px solid #2fd6ea;font-weight:600;font-size:clamp(13px,1.15cqw,20px);color:#2fe0f2;text-decoration:none}
.wwd-link:hover{color:#9ff6ff}
.wwd-detail.opening .wwd-name,.wwd-detail.opening .wwd-line,.wwd-detail.opening .wwd-inc-h,.wwd-detail.opening li,.wwd-detail.opening .wwd-link{animation:wwdIn .55s cubic-bezier(.2,.8,.2,1) both}
.wwd-detail.opening .wwd-line{animation-delay:.06s}
.wwd-detail.opening .wwd-inc-h{animation-delay:.12s}
.wwd-detail.opening li{animation-delay:calc(.16s + var(--k) * .06s)}
.wwd-detail.opening .wwd-link{animation-delay:.5s}
@keyframes wwdIn{from{opacity:0;transform:translateX(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ---------- tablet / phone: text above and below, picture in the middle ---------- */
@media (max-width:900px){
  .wwd{padding:70px 0 60px}
  .wwd-stage{display:flex;flex-direction:column;overflow:hidden}
  .wwd-intro,.wwd-detail{position:static;width:auto;margin:0 20px}
  .wwd-intro{order:1}
  .wwd-intro h2{font-size:clamp(32px,8.6vw,50px);margin-top:16px}
  .wwd-kick{font-size:11px;gap:14px}.wwd-kick::before{width:28px}
  .wwd-intro p{font-size:16px;margin-top:14px}
  .wwd-cta{font-size:15px;margin-top:22px}
  .wwd-canvas{order:2;width:190%;flex:none;margin:10px 0 0 -50.7%}
  .wwd-card>.wwd-back{font-size:9px}
  .wwd-detail{order:3;margin-top:4px;padding-left:18px}
  .wwd-count{font-size:11px}.wwd-name{font-size:30px;margin-top:10px}.wwd-line{font-size:16px;margin-top:8px}
  .wwd-inc{margin-top:16px}.wwd-inc-h{font-size:10.5px}.wwd-inc ul{margin-top:10px;gap:7px}.wwd-inc li{font-size:15px}
  .wwd-link{font-size:15px;margin-top:18px}
}
@media (prefers-reduced-motion:reduce){.wwd-flow{display:none}.wwd-detail.opening *{animation:none!important}}

/* The back fills the same rectangle as the front; no stationary slot or frame. */
.wwd-card>.wwd-back{inset:0;border-radius:0}
.wwd-face>.wwd-glow,.wwd-face>.wwd-dim{backface-visibility:hidden}
.wwd-img{mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
/* Compact service prices inside Advertising, alongside the tower. */
.wwd-ad-offers[hidden]{display:none}
.wwd-ad-offers{margin-top:1.3cqw}
.wwd-ad-offers h4{font-size:clamp(12px,1.05cqw,18px);line-height:1.3;margin:0 0 .7cqw;color:#d8edff}
.wwd-ad-offers a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:.65cqw .7cqw;margin-top:.4cqw;border:1px solid #6ba8d64d;border-radius:8px;background:linear-gradient(130deg,#183653b3,#081928d9);color:#e3eff9;text-decoration:none;font-size:clamp(10px,.85cqw,15px);line-height:1.4;min-height:36px}
.wwd-ad-offers strong{color:#84caff;white-space:nowrap;font-size:inherit}
.wwd-ad-offers a:hover,.wwd-ad-offers a:focus-visible{border-color:#71d5ff;background:#153b59}
.wwd-detail.has-ad-offers{top:14%}
.wwd-detail.has-ad-offers .wwd-inc{margin-top:1cqw}
.wwd-detail.has-ad-offers .wwd-inc li{font-size:clamp(11px,.88cqw,15px)}
.wwd-detail.has-ad-offers .wwd-link{margin-top:1cqw}
@media(max-width:900px){.wwd-ad-offers{margin-top:22px}.wwd-ad-offers h4{font-size:17px;margin-bottom:12px}.wwd-ad-offers a{font-size:14px;min-height:48px;padding:12px;margin-top:8px}.wwd-detail.has-ad-offers .wwd-inc li{font-size:15px}}

.wwd-mobile-label{display:none}
@media(max-width:900px){
  .wwd{padding:80px 0 40px}
  .wwd-intro h2{font-size:clamp(28px,7vw,40px)}
  .wwd-intro p{margin-top:12px}
  .wwd-intro .wwd-cta{display:none}
  .wwd .wwd-canvas{width:auto;aspect-ratio:auto;margin:24px 20px 20px;overflow:visible}
  .wwd-canvas>:not(.wwd-tabs){display:none!important}
  .wwd .wwd-tabs{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wwd .wwd-tab{position:relative;inset:auto;width:auto;height:auto;min-height:48px;padding:12px 8px;border:1px solid #43759d;border-radius:12px;background:linear-gradient(140deg,#143555,#091829);color:#dceeff;perspective:none;transition:background .2s,border-color .2s}
  .wwd-tab .wwd-card{display:none}
  .wwd-mobile-label{display:block;font-size:14px;font-weight:600;line-height:1.3}
  .wwd .wwd-tab[aria-selected="true"]{background:linear-gradient(120deg,#62dbed,#369bff);color:#031321;border-color:#a5efff}
  .wwd .wwd-tab:focus-visible{outline:2px solid #b7f4ff;outline-offset:3px}
  .wwd-detail{border:1px solid #417097;border-radius:18px;background:#091c30;padding:20px;margin-top:0}
  .wwd-name{font-size:26px}
  .wwd-line{font-size:15px}
}