/* Homepage only: responsive workplace editorial block. */
.workplace-section { padding:76px 0 64px; scroll-margin-top:140px; color:#d9e9f4; background:radial-gradient(ellipse at 80% 5%, #123142 0, transparent 52%), #06111b; border-top:1px solid #203441; border-bottom:1px solid #203441; }
.workplace-heading { display:grid; grid-template-columns:1.15fr 1fr; align-items:end; gap:48px; margin-bottom:28px; }
.workplace-kicker { margin:0 0 14px; color:#72ddec; font:700 11px/1.5 ui-monospace, monospace; letter-spacing:.1em; text-transform:uppercase; }
.workplace-heading h2 { margin:0; max-width:650px; color:#f3f8fc; font-size:clamp(28px, 3.5vw, 46px); line-height:1.1; letter-spacing:-.035em; }
.workplace-intro { margin:0; color:#b6cad8; font-size:16px; line-height:1.7; }
.workplace-figure { margin:0; overflow:hidden; border:1px solid #2b4554; border-radius:18px; background:#0b1c29; box-shadow:0 24px 64px #0005; }
.workplace-photo-link { position:relative; display:block; }
.workplace-photo-link picture { display:block; }
.workplace-photo-link img { display:block; width:100%; height:auto; aspect-ratio:1672 / 941; object-fit:contain; }
.workplace-zoom { position:absolute; right:18px; top:18px; display:flex; gap:16px; align-items:center; padding:10px 14px; border:1px solid #ffffff38; border-radius:7px; color:#fff; background:#07121bea; font-size:12px; font-weight:700; pointer-events:none; }
.workplace-zoom span { color:#7de9f7; }
.workplace-figure figcaption { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 19px; font-size:12px; line-height:1.5; color:#a9c2d2; }
.workplace-figure figcaption a { flex-shrink:0; color:#83e6f3; padding:6px 0; }
.workplace-steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:26px; list-style:none; margin:32px 0 0; padding:0; }
.workplace-steps li { display:flex; gap:14px; padding:20px 0; border-top:1px solid #2a4050; min-width:0; }
.workplace-step-number { color:#72ddec; font:600 12px/1.6 ui-monospace, monospace; padding-top:2px; }
.workplace-steps h3 { margin:0 0 8px; color:#edf6fc; font-size:17px; line-height:1.35; }
.workplace-steps p { margin:0; color:#aac0ce; font-size:14px; line-height:1.65; }
.workplace-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:18px; }
.workplace-directions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid #203e50; }
.workplace-directions a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:11px 16px; border:1px solid #214558; border-radius:10px; background:#092231; color:#b9d6e5; font-size:14px; font-weight:700; text-decoration:none; }
.workplace-directions a:hover { color:#fff; border-color:#72e5f4; background:#103344; }
.workplace-actions .btn-accent { gap:20px; color:#06202d; background:#72e5f4; }
.workplace-tariffs { display:inline-flex; align-items:center; min-height:44px; color:#c6e5f0; font-size:14px; font-weight:700; }
.workplace-section a:focus-visible { outline:3px solid #83e6f3; outline-offset:4px; }
.workplace-photo-link:focus-visible { outline-offset:-4px; }
@media (max-width: 900px) {
  .workplace-heading { grid-template-columns:1fr; gap:18px; }
  .workplace-steps { gap:18px; }
}
@media (max-width: 720px) {
  .workplace-section { padding:42px 0; scroll-margin-top:90px; }
  .workplace-heading { margin-bottom:22px; }
  .workplace-intro { font-size:15px; }
  .workplace-figure { border-radius:12px; }
  .workplace-photo-link img { aspect-ratio:4 / 3; }
  .workplace-zoom { display:none; }
  .workplace-figure figcaption { display:block; padding:12px 14px; font-size:11px; }
  .workplace-figure figcaption a { display:flex; align-items:center; min-height:44px; width:max-content; max-width:100%; font-size:12px; }
  .workplace-steps { grid-template-columns:1fr; gap:0; margin-top:24px; }
  .workplace-steps li { padding:16px 0; }
  .workplace-actions { display:grid; grid-template-columns:1fr; gap:8px; }
  .workplace-actions .btn { width:100%; }
  .workplace-tariffs { justify-content:center; }
}
/* Network wings follow only the photograph, not the whole section. */
.workplace-section { position:relative; isolation:isolate; overflow-x:clip; }
.workplace-section > .container { position:relative; z-index:1; }
.workplace-figure { position:relative; overflow:visible; }
.workplace-photo-link { overflow:hidden; border-radius:inherit; }
.workplace-figure::before,.workplace-figure::after {
  content:''; position:absolute; top:0; bottom:0;
  width:max(0px,calc((100vw - 100%)/2 - 1px));
  pointer-events:none; z-index:0; opacity:.65;
  background:
    linear-gradient(90deg,#06111b99,transparent 70%),
    #04121f url('../images/nano-network-wings.svg') center/cover no-repeat;
  mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);
}
.workplace-figure::before { right:100%; }
.workplace-figure::after { left:100%; transform:scaleX(-1); }