/* =========================================================
   WEBSDOCS ABOUT — HOW WE THINK ABOUT AI
   Company philosophy / principles
   Premium full-width / 8K
   Load AFTER about-fullwidth-8k.css
   No JavaScript required.
========================================================= */


/* =========================================================
   1. ROOT
========================================================= */

.wd-about-thinking {
  --thinking-edge:
    var(--wd-about-edge, clamp(18px, 2.35vw, 220px));

  --thinking-ink:
    #07182d;

  --thinking-ink-2:
    #1b3d5d;

  --thinking-muted:
    #667f98;

  --thinking-blue:
    #2c73ce;

  --thinking-cyan:
    #18b5cd;

  --thinking-green:
    #188f70;

  --thinking-line:
    rgba(68, 111, 154, 0.15);

  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: clip;
  color: var(--thinking-ink);
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fbff 52%,
      #eef5fd 100%
    );
  border-bottom:
    1px solid
    var(--thinking-line);
}


/* =========================================================
   2. AMBIENT
========================================================= */

.wd-about-thinking__ambient,
.wd-about-thinking__grid,
.wd-about-thinking__glow {
  position: absolute;
  pointer-events: none;
}

.wd-about-thinking__ambient {
  inset: 0;
  overflow: hidden;
}

.wd-about-thinking__grid {
  inset: 0;
  opacity: 0.46;
  background-image:
    linear-gradient(
      rgba(69, 113, 159, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(69, 113, 159, 0.03) 1px,
      transparent 1px
    );
  background-size:
    clamp(50px, 3vw, 220px)
    clamp(50px, 3vw, 220px);
  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.30),
      rgba(0,0,0,0.72) 28%,
      rgba(0,0,0,0.60) 82%,
      transparent
    );
}

.wd-about-thinking__glow {
  border-radius: 50%;
}

.wd-about-thinking__glow--one {
  width: min(48vw, 3400px);
  aspect-ratio: 1;
  right: -18%;
  top: 18%;
  background:
    radial-gradient(
      circle,
      rgba(62, 146, 238, 0.10),
      transparent 68%
    );
}

.wd-about-thinking__glow--two {
  width: min(40vw, 2900px);
  aspect-ratio: 1;
  left: -17%;
  bottom: 5%;
  background:
    radial-gradient(
      circle,
      rgba(24, 181, 205, 0.08),
      transparent 68%
    );
}


/* =========================================================
   3. SHELL
========================================================= */

.wd-about-thinking__shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  padding:
    clamp(94px, 6vw, 400px)
    var(--thinking-edge)
    clamp(104px, 6.7vw, 450px);
}


/* =========================================================
   4. HEADER
========================================================= */

.wd-about-thinking__head {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(0, 1.24fr)
    minmax(0, 0.76fr);
  gap:
    clamp(52px, 4.8vw, 310px);
  align-items: end;
}

.wd-about-thinking__eyebrow {
  margin: 0;
  color: #2e70b3;
  font-size:
    clamp(11px, 0.58vw, 28px);
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wd-about-thinking__head h2 {
  margin:
    clamp(18px, 1.2vw, 62px)
    0
    0;
  max-width: none;
  color: var(--thinking-ink);
  font-size:
    clamp(56px, 4.22vw, 230px);
  font-weight: 820;
  line-height: 0.93;
  letter-spacing: -0.058em;
  text-wrap: balance;
}

.wd-about-thinking__head h2 span {
  display: block;
  margin-top:
    clamp(9px, 0.48vw, 26px);
  color: #506b85;
  font-weight: 650;
}

.wd-about-thinking__head-note {
  padding-left:
    clamp(22px, 1.4vw, 72px);
  border-left:
    clamp(2px, 0.12vw, 6px)
    solid
    rgba(44, 115, 206, 0.48);
}

.wd-about-thinking__head-note p {
  margin: 0;
  color: #536b83;
  font-size:
    clamp(16px, 0.9vw, 43px);
  line-height: 1.72;
}


/* =========================================================
   5. STAGE
========================================================= */

.wd-about-thinking__stage {
  width: 100%;
  margin-top:
    clamp(76px, 5.2vw, 335px);
  display: grid;
  grid-template-columns:
    minmax(280px, 0.74fr)
    minmax(0, 1.26fr);
  gap:
    clamp(22px, 1.7vw, 98px);
  align-items: stretch;
}


/* =========================================================
   6. COMPASS
========================================================= */

.wd-about-thinking__compass {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows:
    auto
    1fr
    auto;
  border:
    1px solid
    rgba(73, 121, 173, 0.20);
  border-radius:
    clamp(30px, 1.62vw, 84px);
  background:
    linear-gradient(
      155deg,
      #0a1d32 0%,
      #102d4d 54%,
      #12395e 100%
    );
  box-shadow:
    0 38px 110px rgba(12, 38, 67, 0.18);
}

.wd-about-thinking__compass::before {
  content: "";
  position: absolute;
  width: 76%;
  aspect-ratio: 1;
  right: -28%;
  top: -22%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(68, 153, 242, 0.20),
      transparent 68%
    );
}

.wd-about-thinking__compass-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(14px, 0.85vw, 42px);
  align-items: center;
  padding:
    clamp(22px, 1.35vw, 70px);
  border-bottom:
    1px solid
    rgba(183, 212, 240, 0.11);
}

.wd-about-thinking__compass-mark {
  width:
    clamp(54px, 3.3vw, 170px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #2d75cf,
      #18b5cd
    );
  box-shadow:
    0 16px 42px
    rgba(40,126,208,0.24);
  font-size:
    clamp(16px, 0.98vw, 47px);
  font-weight: 950;
  letter-spacing: -0.04em;
}

.wd-about-thinking__compass-head small,
.wd-about-thinking__compass-head strong {
  display: block;
}

.wd-about-thinking__compass-head small {
  color: #7ba7d1;
  font-size:
    clamp(8px, 0.40vw, 19px);
  font-weight: 900;
  letter-spacing: 0.11em;
}

.wd-about-thinking__compass-head strong {
  margin-top:
    clamp(4px, 0.22vw, 10px);
  color: #ffffff;
  font-size:
    clamp(15px, 0.86vw, 41px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}


/* =========================================================
   7. COMPASS CORE
========================================================= */

.wd-about-thinking__compass-core {
  position: relative;
  min-height:
    clamp(650px, 40vw, 2200px);
  overflow: hidden;
}

.wd-about-thinking__compass-core::before {
  content: "";
  position: absolute;
  width: 64%;
  aspect-ratio: 1;
  left: 18%;
  top: 18%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(57, 137, 226, 0.16),
      rgba(57, 137, 226, 0.04) 45%,
      transparent 70%
    );
}

.wd-about-thinking__compass-center {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width:
    clamp(180px, 13vw, 700px);
  min-height:
    clamp(150px, 9.5vw, 510px);
  transform:
    translate(-50%, -50%);
  display: grid;
  align-content: center;
  justify-items: center;
  padding:
    clamp(18px, 1.1vw, 54px);
  border:
    1px solid
    rgba(108, 179, 243, 0.22);
  border-radius:
    clamp(24px, 1.2vw, 62px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.055)
    );
  box-shadow:
    0 26px 80px
    rgba(4, 17, 31, 0.20);
  backdrop-filter: blur(18px);
}

.wd-about-thinking__compass-center span {
  width:
    clamp(58px, 3.6vw, 186px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #2e76cf,
      #1ab4cc
    );
  box-shadow:
    0 16px 42px
    rgba(39, 127, 210, 0.28);
  font-size:
    clamp(18px, 1.08vw, 52px);
  font-weight: 950;
}

.wd-about-thinking__compass-center strong {
  margin-top:
    clamp(10px, 0.6vw, 28px);
  color: #ffffff;
  font-size:
    clamp(15px, 0.86vw, 41px);
  text-align: center;
  letter-spacing: -0.02em;
}

.wd-about-thinking__compass-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform:
    translate(-50%, -50%);
  pointer-events: none;
}

.wd-about-thinking__compass-orbit--one {
  width: 58%;
  aspect-ratio: 1;
  border:
    1px solid
    rgba(95, 163, 226, 0.18);
}

.wd-about-thinking__compass-orbit--two {
  width: 82%;
  aspect-ratio: 1;
  border:
    1px dashed
    rgba(95, 163, 226, 0.15);
}

.wd-about-thinking__compass-point {
  position: absolute;
  z-index: 4;
  width:
    clamp(150px, 10.5vw, 580px);
  min-height:
    clamp(88px, 5.6vw, 300px);
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(10px, 0.62vw, 30px);
  align-items: center;
  padding:
    clamp(12px, 0.8vw, 40px);
  border:
    1px solid
    rgba(176, 207, 237, 0.12);
  border-radius:
    clamp(16px, 0.84vw, 42px);
  background:
    rgba(255,255,255,0.055);
  backdrop-filter: blur(12px);
}

.wd-about-thinking__compass-point span {
  width:
    clamp(34px, 2vw, 102px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #8dc2f1;
  background:
    rgba(68, 145, 219, 0.13);
  font-size:
    clamp(8px, 0.42vw, 20px);
  font-weight: 950;
}

.wd-about-thinking__compass-point strong {
  color: #dceaf6;
  font-size:
    clamp(11px, 0.62vw, 30px);
  line-height: 1.26;
}

.wd-about-thinking__compass-point--one {
  left: 7%;
  top: 9%;
}

.wd-about-thinking__compass-point--two {
  right: 7%;
  top: 10%;
}

.wd-about-thinking__compass-point--three {
  left: 7%;
  bottom: 9%;
}

.wd-about-thinking__compass-point--four {
  right: 7%;
  bottom: 9%;
}


/* =========================================================
   8. COMPASS FOOT
========================================================= */

.wd-about-thinking__compass-foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(12px, 0.75vw, 36px);
  align-items: center;
  padding:
    clamp(18px, 1.12vw, 56px);
  border-top:
    1px solid
    rgba(183,212,240,0.11);
  background:
    rgba(3, 16, 30, 0.16);
}

.wd-about-thinking__compass-foot > i {
  color: #79b9f4;
  font-size:
    clamp(16px, 0.94vw, 45px);
}

.wd-about-thinking__compass-foot small,
.wd-about-thinking__compass-foot strong {
  display: block;
}

.wd-about-thinking__compass-foot small {
  color: #73a1cb;
  font-size:
    clamp(7px, 0.36vw, 17px);
  font-weight: 900;
  letter-spacing: 0.11em;
}

.wd-about-thinking__compass-foot strong {
  margin-top: 3px;
  color: #e3edf6;
  font-size:
    clamp(12px, 0.68vw, 33px);
}


/* =========================================================
   9. PRINCIPLES GRID
========================================================= */

.wd-about-thinking__principles {
  min-width: 0;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));
  gap:
    clamp(18px, 1.3vw, 74px);
}

.wd-about-thinking__principle {
  position: relative;
  min-width: 0;
  min-height:
    clamp(360px, 23vw, 1160px);
  display: grid;
  grid-template-rows:
    auto
    1fr
    auto;
  overflow: hidden;
  padding:
    clamp(28px, 1.8vw, 94px);
  border:
    1px solid
    var(--thinking-line);
  border-radius:
    clamp(26px, 1.42vw, 74px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.97),
      rgba(241,248,255,0.91)
    );
  box-shadow:
    0 26px 78px rgba(16,49,82,0.065);
}

.wd-about-thinking__principle::before {
  content: "";
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  right: -22%;
  top: -22%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(58, 141, 235, 0.10),
      transparent 68%
    );
}

.wd-about-thinking__principle-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:
    clamp(18px, 1.2vw, 60px);
}

.wd-about-thinking__principle-number {
  color:
    rgba(48, 100, 154, 0.12);
  font-size:
    clamp(62px, 4.8vw, 245px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.07em;
}

.wd-about-thinking__principle-icon {
  width:
    clamp(56px, 3.4vw, 176px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #2c73ca;
  background:
    linear-gradient(
      145deg,
      #eef6ff,
      #e3f0ff
    );
  border:
    1px solid
    rgba(65, 120, 181, 0.12);
  font-size:
    clamp(19px, 1.12vw, 54px);
}

.wd-about-thinking__principle-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-top:
    clamp(22px, 1.4vw, 72px);
}

.wd-about-thinking__principle-copy small,
.wd-about-thinking__principle-copy h3 {
  display: block;
}

.wd-about-thinking__principle-copy small {
  color: #6687a6;
  font-size:
    clamp(8px, 0.42vw, 20px);
  font-weight: 950;
  letter-spacing: 0.11em;
}

.wd-about-thinking__principle-copy h3 {
  margin:
    clamp(8px, 0.46vw, 22px)
    0
    0;
  color: #173b5b;
  font-size:
    clamp(26px, 1.7vw, 82px);
  line-height: 1.04;
  letter-spacing: -0.042em;
}

.wd-about-thinking__principle-copy p {
  margin:
    clamp(14px, 0.86vw, 42px)
    0
    0;
  color: #637b92;
  font-size:
    clamp(12px, 0.64vw, 31px);
  line-height: 1.68;
}

.wd-about-thinking__principle-line {
  position: relative;
  z-index: 2;
  margin-top:
    clamp(24px, 1.5vw, 76px);
  padding-top:
    clamp(14px, 0.86vw, 42px);
  border-top:
    1px solid
    rgba(67,111,155,0.13);
}

.wd-about-thinking__principle-line span {
  display: inline-flex;
  align-items: center;
  min-height:
    clamp(34px, 2vw, 96px);
  padding:
    0
    clamp(11px, 0.66vw, 32px);
  border:
    1px solid
    rgba(69,113,158,0.12);
  border-radius: 999px;
  color: #55708b;
  background:
    rgba(248,252,255,0.82);
  font-size:
    clamp(8px, 0.42vw, 20px);
  font-weight: 850;
}


/* =========================================================
   10. COMPANY POSITION
========================================================= */

.wd-about-thinking__position {
  width: 100%;
  margin-top:
    clamp(34px, 2.6vw, 160px);
  display: grid;
  grid-template-columns:
    minmax(0,0.82fr)
    minmax(0,1.18fr);
  gap:
    clamp(22px, 1.6vw, 90px);
  align-items: center;
  padding:
    clamp(28px, 1.8vw, 94px);
  border:
    1px solid
    var(--thinking-line);
  border-radius:
    clamp(26px, 1.42vw, 74px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.94),
      rgba(236,246,255,0.88)
    );
  box-shadow:
    0 24px 72px
    rgba(16,49,82,0.055);
}

.wd-about-thinking__position-label {
  min-width: 0;
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(14px, 0.86vw, 42px);
  align-items: center;
}

.wd-about-thinking__position-icon {
  width:
    clamp(56px, 3.4vw, 176px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #2c73ca;
  background: #ffffff;
  border:
    1px solid
    rgba(65,120,181,0.12);
  font-size:
    clamp(19px, 1.12vw, 54px);
}

.wd-about-thinking__position-label small,
.wd-about-thinking__position-label strong {
  display: block;
}

.wd-about-thinking__position-label small {
  color: #6987a4;
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 950;
  letter-spacing: 0.11em;
}

.wd-about-thinking__position-label strong {
  margin-top:
    clamp(5px, 0.28vw, 14px);
  color: #1a3e5e;
  font-size:
    clamp(18px, 1.12vw, 54px);
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.wd-about-thinking__position-flow {
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr)
    auto
    minmax(0,1fr)
    auto
    minmax(0,1fr);
  gap:
    clamp(8px, 0.48vw, 22px);
  align-items: center;
}

.wd-about-thinking__position-flow span {
  min-width: 0;
  min-height:
    clamp(70px, 4.4vw, 220px);
  display: grid;
  align-content: center;
  justify-items: center;
  padding:
    clamp(10px, 0.66vw, 32px);
  border:
    1px solid
    rgba(68,113,159,0.12);
  border-radius:
    clamp(15px, 0.78vw, 38px);
  color: #4f6b86;
  background:
    rgba(255,255,255,0.78);
  text-align: center;
  font-size:
    clamp(9px, 0.48vw, 23px);
  font-weight: 800;
}

.wd-about-thinking__position-flow small {
  display: block;
  margin-bottom: 4px;
  color: #2d73ca;
  font-size:
    clamp(7px, 0.34vw, 16px);
  font-weight: 950;
  letter-spacing: 0.10em;
}

.wd-about-thinking__position-flow > i {
  color: #91a8be;
  font-size:
    clamp(9px, 0.48vw, 23px);
}


/* =========================================================
   11. CLOSE
========================================================= */

.wd-about-thinking__close {
  width: 100%;
  margin-top:
    clamp(58px, 4.1vw, 260px);
  display: grid;
  grid-template-columns:
    minmax(120px, 0.18fr)
    minmax(0,1.82fr);
  gap:
    clamp(24px, 1.8vw, 110px);
  align-items: start;
}

.wd-about-thinking__close-rule {
  display: block;
  width: 100%;
  height:
    clamp(3px, 0.15vw, 8px);
  margin-top:
    clamp(12px, 0.68vw, 34px);
  background:
    linear-gradient(
      90deg,
      #2c73ce,
      rgba(44,115,206,0.06)
    );
}

.wd-about-thinking__close p {
  margin: 0;
  color: #60778e;
  font-size:
    clamp(23px, 1.8vw, 88px);
  line-height: 1.4;
  letter-spacing: -0.028em;
}

.wd-about-thinking__close strong {
  color: #173a59;
  font-weight: 720;
}


/* =========================================================
   12. 4K / 5K / 8K
========================================================= */

@media (min-width: 5120px) {
  .wd-about-thinking__shell {
    padding-top: 4.8vw;
    padding-bottom: 5.2vw;
  }

  .wd-about-thinking__head h2 {
    font-size: 3.98vw;
  }

  .wd-about-thinking__head-note p {
    font-size: 0.82vw;
  }

  .wd-about-thinking__principle-copy h3 {
    font-size: 1.52vw;
  }

  .wd-about-thinking__close p {
    font-size: 1.62vw;
  }
}


/* =========================================================
   13. LARGE DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1560px) {
  .wd-about-thinking__head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .wd-about-thinking__head-note {
    max-width: 1000px;
  }

  .wd-about-thinking__stage {
    grid-template-columns: 1fr;
  }

  .wd-about-thinking__compass-core {
    min-height: 760px;
  }
}


/* =========================================================
   14. TABLET
========================================================= */

@media (max-width: 980px) {
  .wd-about-thinking__principles {
    grid-template-columns: 1fr;
  }

  .wd-about-thinking__principle {
    min-height: 0;
  }

  .wd-about-thinking__position {
    grid-template-columns: 1fr;
  }

  .wd-about-thinking__position-flow {
    grid-template-columns:
      repeat(4, minmax(0,1fr));
  }

  .wd-about-thinking__position-flow > i {
    display: none;
  }
}


/* =========================================================
   15. MOBILE
========================================================= */

@media (max-width: 720px) {
  .wd-about-thinking__shell {
    padding-top: 72px;
    padding-bottom: 78px;
  }

  .wd-about-thinking__head h2 {
    font-size:
      clamp(44px, 12.5vw, 68px);
    line-height: 0.97;
  }

  .wd-about-thinking__head-note {
    padding-left: 16px;
  }

  .wd-about-thinking__head-note p {
    font-size: 16px;
  }

  .wd-about-thinking__stage {
    margin-top: 52px;
  }

  .wd-about-thinking__compass-core {
    min-height: auto;
    display: grid;
    gap: 10px;
    padding: 16px;
  }

  .wd-about-thinking__compass-orbit {
    display: none;
  }

  .wd-about-thinking__compass-center,
  .wd-about-thinking__compass-point {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 0;
    transform: none;
  }

  .wd-about-thinking__compass-center {
    order: -1;
  }

  .wd-about-thinking__principle {
    padding: 22px 18px;
  }

  .wd-about-thinking__principle-number {
    font-size: 72px;
  }

  .wd-about-thinking__principle-copy {
    margin-top: 22px;
  }

  .wd-about-thinking__principle-copy h3 {
    font-size:
      clamp(28px, 8.5vw, 42px);
  }

  .wd-about-thinking__principle-copy p {
    font-size: 15px;
  }

  .wd-about-thinking__position {
    margin-top: 20px;
    padding: 20px;
  }

  .wd-about-thinking__position-label {
    grid-template-columns: 1fr;
  }

  .wd-about-thinking__position-flow {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .wd-about-thinking__close {
    margin-top: 44px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wd-about-thinking__close-rule {
    width: 90px;
  }

  .wd-about-thinking__close p {
    font-size:
      clamp(24px, 7vw, 36px);
  }
}


/* =========================================================
   16. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .wd-about-thinking *,
  .wd-about-thinking *::before,
  .wd-about-thinking *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}






/* =========================================================
   WEBSDOCS ABOUT — CONTROL ARCHITECTURE
   Premium full-width / 8K
   Load AFTER about-fullwidth-8k.css
   No JavaScript required.
========================================================= */


/* =========================================================
   1. ROOT
========================================================= */

.wd-about-control {
  --control-edge:
    var(--wd-about-edge, clamp(18px, 2.35vw, 220px));

  --control-ink:
    #07182d;

  --control-ink-2:
    #1b3c5c;

  --control-muted:
    #667f98;

  --control-blue:
    #2b73ce;

  --control-cyan:
    #18b5cd;

  --control-green:
    #179f72;

  --control-amber:
    #c98437;

  --control-line:
    rgba(67, 111, 155, 0.15);

  --control-line-strong:
    rgba(52, 105, 163, 0.30);

  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: clip;
  color: var(--control-ink);
  background:
    linear-gradient(
      180deg,
      #eef5fd 0%,
      #f8fbff 32%,
      #ffffff 100%
    );
  border-bottom: 1px solid var(--control-line);
}


/* =========================================================
   2. AMBIENT
========================================================= */

.wd-about-control__ambient,
.wd-about-control__grid,
.wd-about-control__glow,
.wd-about-control__beam {
  position: absolute;
  pointer-events: none;
}

.wd-about-control__ambient {
  inset: 0;
  overflow: hidden;
}

.wd-about-control__grid {
  inset: 0;
  opacity: 0.48;
  background-image:
    linear-gradient(
      rgba(68, 112, 159, 0.032) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(68, 112, 159, 0.032) 1px,
      transparent 1px
    );
  background-size:
    clamp(50px, 3vw, 220px)
    clamp(50px, 3vw, 220px);
  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.4),
      rgba(0,0,0,0.72) 28%,
      rgba(0,0,0,0.58) 80%,
      transparent
    );
}

.wd-about-control__glow {
  border-radius: 50%;
}

.wd-about-control__glow--one {
  width: min(48vw, 3500px);
  aspect-ratio: 1;
  right: -18%;
  top: 18%;
  background:
    radial-gradient(
      circle,
      rgba(59, 142, 235, 0.10),
      transparent 68%
    );
}

.wd-about-control__glow--two {
  width: min(40vw, 2900px);
  aspect-ratio: 1;
  left: -17%;
  bottom: 12%;
  background:
    radial-gradient(
      circle,
      rgba(23, 181, 205, 0.08),
      transparent 68%
    );
}

.wd-about-control__beam {
  height: 1px;
  opacity: 0.46;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(52, 126, 207, 0.25),
      transparent
    );
}

.wd-about-control__beam--one {
  width: 72vw;
  right: -14vw;
  top: 27%;
  transform: rotate(-8deg);
}

.wd-about-control__beam--two {
  width: 68vw;
  left: -17vw;
  bottom: 24%;
  transform: rotate(8deg);
}


/* =========================================================
   3. SHELL
========================================================= */

.wd-about-control__shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  padding:
    clamp(94px, 6.1vw, 410px)
    var(--control-edge)
    clamp(102px, 6.7vw, 450px);
}


/* =========================================================
   4. HEADER
========================================================= */

.wd-about-control__head {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(0, 1.22fr)
    minmax(0, 0.78fr);
  gap:
    clamp(52px, 4.9vw, 320px);
  align-items: end;
}

.wd-about-control__eyebrow {
  margin: 0;
  color: #2d6fb3;
  font-size:
    clamp(11px, 0.58vw, 28px);
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wd-about-control__head h2 {
  margin:
    clamp(18px, 1.2vw, 62px)
    0
    0;
  max-width: none;
  color: var(--control-ink);
  font-size:
    clamp(56px, 4.22vw, 230px);
  font-weight: 820;
  line-height: 0.93;
  letter-spacing: -0.058em;
  text-wrap: balance;
}

.wd-about-control__head h2 span {
  display: block;
  margin-top:
    clamp(9px, 0.48vw, 26px);
  color: #506b85;
  font-weight: 650;
}

.wd-about-control__head-note {
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(16px, 1vw, 48px);
  align-items: start;
  padding:
    clamp(20px, 1.3vw, 66px);
  border-left:
    clamp(2px, 0.12vw, 6px)
    solid
    rgba(43,115,206,0.48);
  background:
    linear-gradient(
      90deg,
      rgba(231,242,255,0.72),
      rgba(248,252,255,0.30)
    );
}

.wd-about-control__head-icon {
  width:
    clamp(44px, 2.65vw, 136px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #2d73ca;
  background: #ffffff;
  border:
    1px solid
    rgba(64,118,177,0.14);
  box-shadow:
    0 12px 34px rgba(27,69,112,0.07);
  font-size:
    clamp(15px, 0.88vw, 42px);
}

.wd-about-control__head-note p {
  margin: 0;
  color: #536b83;
  font-size:
    clamp(15px, 0.88vw, 42px);
  line-height: 1.7;
}


/* =========================================================
   5. STAGE
========================================================= */

.wd-about-control__stage {
  width: 100%;
  margin-top:
    clamp(74px, 5vw, 320px);
  display: grid;
  grid-template-columns:
    minmax(220px, 0.28fr)
    minmax(0, 1.72fr);
  gap:
    clamp(20px, 1.5vw, 84px);
  align-items: stretch;
}


/* =========================================================
   6. LEFT CONTROL RAIL
========================================================= */

.wd-about-control__rail {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows:
    auto
    1fr
    auto;
  border:
    1px solid
    rgba(74,122,174,0.20);
  border-radius:
    clamp(28px, 1.5vw, 78px);
  background:
    linear-gradient(
      160deg,
      #0a1d32,
      #102d4c 55%,
      #12385d
    );
  box-shadow:
    0 36px 100px rgba(13,40,69,0.17);
}

.wd-about-control__rail::before {
  content: "";
  position: absolute;
  width: 90%;
  aspect-ratio: 1;
  right: -45%;
  top: -10%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(69,153,241,0.18),
      transparent 68%
    );
}

.wd-about-control__rail-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(12px, 0.76vw, 36px);
  align-items: center;
  padding:
    clamp(20px, 1.25vw, 64px);
  border-bottom:
    1px solid
    rgba(186,214,240,0.11);
}

.wd-about-control__rail-mark {
  width:
    clamp(52px, 3.1vw, 160px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #2d75cf,
      #18b5cd
    );
  box-shadow:
    0 16px 42px rgba(40,126,208,0.23);
  font-size:
    clamp(16px, 0.96vw, 46px);
  font-weight: 950;
  letter-spacing: -0.04em;
}

.wd-about-control__rail-top small,
.wd-about-control__rail-top strong {
  display: block;
}

.wd-about-control__rail-top small {
  color: #7ba6d0;
  font-size:
    clamp(7px, 0.37vw, 18px);
  font-weight: 900;
  letter-spacing: 0.11em;
}

.wd-about-control__rail-top strong {
  margin-top:
    clamp(4px, 0.22vw, 10px);
  color: #ffffff;
  font-size:
    clamp(14px, 0.8vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}


/* =========================================================
   7. RAIL SCALE
========================================================= */

.wd-about-control__rail-scale {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0;
  padding:
    clamp(24px, 1.5vw, 78px);
}

.wd-about-control__rail-step {
  width: 100%;
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(10px, 0.6vw, 28px);
  align-items: center;
  padding:
    clamp(12px, 0.76vw, 36px);
  border:
    1px solid
    rgba(181,211,239,0.10);
  border-radius:
    clamp(15px, 0.78vw, 38px);
  background:
    rgba(255,255,255,0.04);
}

.wd-about-control__rail-step span {
  width:
    clamp(32px, 1.9vw, 96px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #86bbeb;
  background:
    rgba(72,145,218,0.13);
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 950;
}

.wd-about-control__rail-step strong {
  color: #dce9f5;
  font-size:
    clamp(11px, 0.62vw, 30px);
  letter-spacing: -0.015em;
}

.wd-about-control__rail-line {
  width: 1px;
  height:
    clamp(34px, 2.2vw, 110px);
  background:
    linear-gradient(
      180deg,
      rgba(72,149,225,0.16),
      rgba(72,149,225,0.68),
      rgba(72,149,225,0.16)
    );
}

.wd-about-control__rail-foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(12px, 0.76vw, 36px);
  align-items: center;
  padding:
    clamp(18px, 1.1vw, 54px);
  border-top:
    1px solid
    rgba(186,214,240,0.11);
  background:
    rgba(3,16,30,0.16);
}

.wd-about-control__rail-foot > i {
  color: #78b8f4;
  font-size:
    clamp(18px, 1.06vw, 50px);
}

.wd-about-control__rail-foot small,
.wd-about-control__rail-foot strong {
  display: block;
}

.wd-about-control__rail-foot small {
  color: #719bc3;
  font-size:
    clamp(7px, 0.36vw, 17px);
  font-weight: 900;
  letter-spacing: 0.10em;
}

.wd-about-control__rail-foot strong {
  margin-top:
    3px;
  color: #dce8f4;
  font-size:
    clamp(10px, 0.56vw, 27px);
  line-height: 1.3;
}


/* =========================================================
   8. LAYERS STACK
========================================================= */

.wd-about-control__layers {
  min-width: 0;
  display: grid;
  gap:
    clamp(12px, 0.72vw, 34px);
}


/* =========================================================
   9. LAYER
========================================================= */

.wd-about-control__layer {
  --layer-accent: #2b73ce;
  --layer-soft: #edf5ff;
  --layer-line: rgba(43,115,206,0.18);

  min-width: 0;
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr)
    minmax(260px, 0.44fr);
  gap:
    clamp(20px, 1.4vw, 72px);
  align-items: center;
  padding:
    clamp(24px, 1.55vw, 80px);
  border:
    1px solid
    var(--control-line);
  border-radius:
    clamp(24px, 1.28vw, 66px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.96),
      rgba(242,248,255,0.91)
    );
  box-shadow:
    0 24px 72px rgba(16,49,82,0.065);
}

.wd-about-control__layer--interaction {
  --layer-accent: #337fbe;
  --layer-soft: #edf7fb;
  --layer-line: rgba(51,127,190,0.18);
}

.wd-about-control__layer--operational {
  --layer-accent: #4a70c6;
  --layer-soft: #f0f2ff;
  --layer-line: rgba(74,112,198,0.18);
}

.wd-about-control__layer--authority {
  --layer-accent: #2d8871;
  --layer-soft: #edf8f4;
  --layer-line: rgba(45,136,113,0.18);
}

.wd-about-control__layer-index {
  width:
    clamp(74px, 4.6vw, 238px);
  min-height:
    clamp(90px, 5.6vw, 286px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap:
    clamp(6px, 0.34vw, 16px);
  border-radius:
    clamp(18px, 0.95vw, 48px);
  color: var(--layer-accent);
  background: var(--layer-soft);
  border:
    1px solid
    var(--layer-line);
}

.wd-about-control__layer-index span {
  font-size:
    clamp(24px, 1.6vw, 78px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.06em;
}

.wd-about-control__layer-index small {
  font-size:
    clamp(7px, 0.34vw, 16px);
  font-weight: 950;
  letter-spacing: 0.10em;
  text-align: center;
}


/* =========================================================
   10. LAYER MAIN
========================================================= */

.wd-about-control__layer-main {
  min-width: 0;
}

.wd-about-control__layer-title {
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(14px, 0.86vw, 42px);
  align-items: start;
}

.wd-about-control__layer-icon {
  width:
    clamp(48px, 2.9vw, 150px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: var(--layer-accent);
  background: var(--layer-soft);
  border:
    1px solid
    var(--layer-line);
  font-size:
    clamp(17px, 1vw, 48px);
}

.wd-about-control__layer-title h3 {
  margin: 0;
  color: #183b5b;
  font-size:
    clamp(22px, 1.45vw, 70px);
  line-height: 1.05;
  letter-spacing: -0.038em;
}

.wd-about-control__layer-title p {
  margin:
    clamp(8px, 0.46vw, 22px)
    0
    0;
  color: #627a91;
  font-size:
    clamp(12px, 0.64vw, 31px);
  line-height: 1.62;
}

.wd-about-control__layer-items {
  margin-top:
    clamp(16px, 1vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap:
    clamp(7px, 0.42vw, 20px);
}

.wd-about-control__layer-items span {
  min-height:
    clamp(32px, 1.9vw, 90px);
  display: inline-flex;
  align-items: center;
  padding:
    0
    clamp(10px, 0.62vw, 30px);
  border:
    1px solid
    rgba(69,113,158,0.11);
  border-radius: 999px;
  color: #617a92;
  background:
    rgba(248,252,255,0.84);
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 760;
}


/* =========================================================
   11. LAYER RULE
========================================================= */

.wd-about-control__layer-rule {
  min-width: 0;
  align-self: stretch;
  display: grid;
  align-content: center;
  padding:
    clamp(18px, 1.1vw, 54px);
  border-left:
    clamp(3px, 0.15vw, 8px)
    solid
    var(--layer-accent);
  border-radius:
    0
    clamp(16px, 0.8vw, 40px)
    clamp(16px, 0.8vw, 40px)
    0;
  background:
    linear-gradient(
      90deg,
      var(--layer-soft),
      rgba(255,255,255,0.45)
    );
}

.wd-about-control__layer-rule small,
.wd-about-control__layer-rule strong {
  display: block;
}

.wd-about-control__layer-rule small {
  color: var(--layer-accent);
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 950;
  letter-spacing: 0.11em;
}

.wd-about-control__layer-rule strong {
  margin-top:
    clamp(6px, 0.34vw, 16px);
  color: #294c6c;
  font-size:
    clamp(13px, 0.74vw, 35px);
  line-height: 1.42;
  letter-spacing: -0.018em;
}


/* =========================================================
   12. BOUNDARIES
========================================================= */

.wd-about-control__boundary {
  min-height:
    clamp(54px, 3.3vw, 164px);
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(18px, 1.2vw, 60px);
  align-items: center;
  padding:
    0
    clamp(24px, 1.55vw, 80px);
  border:
    1px dashed
    rgba(75,127,182,0.22);
  border-radius:
    clamp(16px, 0.82vw, 42px);
  background:
    rgba(244,249,255,0.72);
}

.wd-about-control__boundary span {
  display: inline-flex;
  align-items: center;
  gap:
    clamp(7px, 0.38vw, 18px);
  color: #5c7fa2;
  font-size:
    clamp(8px, 0.42vw, 20px);
  font-weight: 950;
  letter-spacing: 0.10em;
  white-space: nowrap;
}

.wd-about-control__boundary strong {
  color: #5e7489;
  font-size:
    clamp(11px, 0.62vw, 30px);
  font-weight: 700;
}

.wd-about-control__boundary--strong {
  border-color:
    rgba(81,104,194,0.24);
  background:
    rgba(242,243,255,0.74);
}

.wd-about-control__boundary--authority {
  border-color:
    rgba(45,136,113,0.24);
  background:
    rgba(239,249,245,0.78);
}


/* =========================================================
   13. HARD RULES
========================================================= */

.wd-about-control__rules {
  width: 100%;
  margin-top:
    clamp(34px, 2.6vw, 160px);
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
  overflow: hidden;
  border:
    1px solid
    var(--control-line);
  border-radius:
    clamp(24px, 1.32vw, 68px);
  background:
    rgba(255,255,255,0.84);
  box-shadow:
    0 24px 72px rgba(16,49,82,0.055);
}

.wd-about-control__rule {
  position: relative;
  min-width: 0;
  min-height:
    clamp(330px, 20vw, 980px);
  padding:
    clamp(28px, 1.8vw, 94px);
  border-right:
    1px solid
    var(--control-line);
}

.wd-about-control__rule:last-child {
  border-right: 0;
}

.wd-about-control__rule-number {
  position: absolute;
  right:
    clamp(18px, 1.1vw, 54px);
  top:
    clamp(14px, 0.8vw, 40px);
  color:
    rgba(54,105,159,0.09);
  font-size:
    clamp(58px, 4.5vw, 230px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.07em;
}

.wd-about-control__rule-icon {
  position: relative;
  z-index: 2;
  width:
    clamp(52px, 3.2vw, 164px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #2d73ca;
  background:
    linear-gradient(
      145deg,
      #eef6ff,
      #e4f0ff
    );
  border:
    1px solid
    rgba(65,120,181,0.12);
  font-size:
    clamp(18px, 1.06vw, 50px);
}

.wd-about-control__rule > div {
  position: relative;
  z-index: 2;
  margin-top:
    clamp(30px, 2vw, 100px);
}

.wd-about-control__rule small,
.wd-about-control__rule strong {
  display: block;
}

.wd-about-control__rule small {
  color: #6686a6;
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 950;
  letter-spacing: 0.12em;
}

.wd-about-control__rule strong {
  margin-top:
    clamp(7px, 0.4vw, 20px);
  color: #173b5b;
  font-size:
    clamp(19px, 1.22vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.wd-about-control__rule p {
  margin:
    clamp(12px, 0.72vw, 34px)
    0
    0;
  color: #657c93;
  font-size:
    clamp(11px, 0.58vw, 28px);
  line-height: 1.66;
}


/* =========================================================
   14. PUBLIC VS PROTECTED SPLIT
========================================================= */

.wd-about-control__split {
  width: 100%;
  margin-top:
    clamp(34px, 2.5vw, 150px);
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);
  gap:
    clamp(20px, 1.4vw, 72px);
  align-items: stretch;
}

.wd-about-control__split-side {
  min-width: 0;
  padding:
    clamp(28px, 1.8vw, 94px);
  border:
    1px solid
    var(--control-line);
  border-radius:
    clamp(26px, 1.42vw, 74px);
  box-shadow:
    0 22px 66px rgba(16,49,82,0.055);
}

.wd-about-control__split-side--public {
  background:
    linear-gradient(
      145deg,
      #f7fbff,
      #edf6ff
    );
}

.wd-about-control__split-side--protected {
  background:
    linear-gradient(
      145deg,
      #f8fbfa,
      #edf8f4
    );
}

.wd-about-control__split-head {
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(14px, 0.86vw, 42px);
  align-items: center;
}

.wd-about-control__split-head > span {
  width:
    clamp(52px, 3.2vw, 164px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #2d73ca;
  background: #ffffff;
  border:
    1px solid
    rgba(65,120,181,0.12);
  font-size:
    clamp(18px, 1.06vw, 50px);
}

.wd-about-control__split-side--protected
.wd-about-control__split-head > span {
  color: #2d8871;
}

.wd-about-control__split-head small,
.wd-about-control__split-head strong {
  display: block;
}

.wd-about-control__split-head small {
  color: #6b88a4;
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 950;
  letter-spacing: 0.11em;
}

.wd-about-control__split-head strong {
  margin-top:
    clamp(5px, 0.28vw, 14px);
  color: #1b405f;
  font-size:
    clamp(21px, 1.38vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.038em;
}

.wd-about-control__split-side ul {
  margin:
    clamp(28px, 1.8vw, 90px)
    0
    0;
  padding: 0;
  display: grid;
  gap:
    clamp(10px, 0.6vw, 28px);
  list-style: none;
}

.wd-about-control__split-side li {
  position: relative;
  padding-left:
    clamp(24px, 1.4vw, 70px);
  color: #5f778f;
  font-size:
    clamp(12px, 0.66vw, 32px);
  line-height: 1.55;
}

.wd-about-control__split-side li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width:
    clamp(7px, 0.38vw, 18px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2d73ca;
  box-shadow:
    0 0 0
    clamp(5px, 0.24vw, 11px)
    rgba(45,115,202,0.08);
}

.wd-about-control__split-side--protected li::before {
  background: #2d8871;
  box-shadow:
    0 0 0
    clamp(5px, 0.24vw, 11px)
    rgba(45,136,113,0.08);
}


/* =========================================================
   15. SPLIT CENTER
========================================================= */

.wd-about-control__split-center {
  min-width:
    clamp(110px, 8vw, 420px);
  display: grid;
  grid-template-rows:
    auto
    auto
    1fr;
  justify-items: center;
  align-items: center;
  gap:
    clamp(12px, 0.72vw, 34px);
  padding:
    clamp(24px, 1.5vw, 76px)
    0;
}

.wd-about-control__split-gate {
  width:
    clamp(62px, 3.8vw, 196px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #153d70,
      #2d75cf
    );
  box-shadow:
    0 18px 46px rgba(43,115,206,0.22);
  font-size:
    clamp(20px, 1.18vw, 56px);
}

.wd-about-control__split-center strong {
  color: #55708a;
  font-size:
    clamp(10px, 0.55vw, 26px);
  text-align: center;
}

.wd-about-control__split-line {
  width: 1px;
  height: 100%;
  min-height:
    clamp(100px, 6vw, 300px);
  background:
    linear-gradient(
      180deg,
      rgba(43,115,206,0.08),
      rgba(43,115,206,0.58),
      rgba(43,115,206,0.08)
    );
}


/* =========================================================
   16. CLOSE
========================================================= */

.wd-about-control__close {
  width: 100%;
  margin-top:
    clamp(58px, 4.1vw, 260px);
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(22px, 1.6vw, 90px);
  align-items: start;
  padding:
    clamp(28px, 1.8vw, 94px);
  border:
    1px solid
    var(--control-line);
  border-radius:
    clamp(26px, 1.42vw, 74px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.92),
      rgba(239,247,255,0.86)
    );
  box-shadow:
    0 24px 72px rgba(16,49,82,0.055);
}

.wd-about-control__close-icon {
  width:
    clamp(60px, 3.7vw, 190px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #2d73ca;
  background: #eaf3ff;
  border:
    1px solid
    rgba(64,121,184,0.12);
  font-size:
    clamp(20px, 1.16vw, 56px);
}

.wd-about-control__close p {
  margin: 0;
  color: #61788f;
  font-size:
    clamp(23px, 1.76vw, 86px);
  line-height: 1.4;
  letter-spacing: -0.028em;
}

.wd-about-control__close strong {
  color: #173a59;
  font-weight: 720;
}


/* =========================================================
   17. 4K / 5K / 8K
========================================================= */

@media (min-width: 5120px) {
  .wd-about-control__shell {
    padding-top: 4.9vw;
    padding-bottom: 5.3vw;
  }

  .wd-about-control__head h2 {
    font-size: 3.98vw;
  }

  .wd-about-control__head-note p {
    font-size: 0.80vw;
  }

  .wd-about-control__layer-title h3 {
    font-size: 1.34vw;
  }

  .wd-about-control__close p {
    font-size: 1.58vw;
  }
}


/* =========================================================
   18. LARGE DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1580px) {
  .wd-about-control__head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .wd-about-control__head-note {
    max-width: 1080px;
  }

  .wd-about-control__stage {
    grid-template-columns: 1fr;
  }

  .wd-about-control__rail {
    grid-template-columns:
      auto
      1fr
      auto;
    grid-template-rows: auto;
  }

  .wd-about-control__rail-top,
  .wd-about-control__rail-foot {
    border: 0;
  }

  .wd-about-control__rail-scale {
    grid-auto-flow: column;
    grid-template-columns:
      repeat(7, auto);
    justify-content: center;
    align-items: center;
  }

  .wd-about-control__rail-line {
    width:
      clamp(34px, 2.2vw, 110px);
    height: 1px;
  }
}


/* =========================================================
   19. TABLET
========================================================= */

@media (max-width: 1100px) {
  .wd-about-control__layer {
    grid-template-columns:
      auto
      minmax(0,1fr);
  }

  .wd-about-control__layer-rule {
    grid-column: 1 / -1;
    border-left:
      clamp(3px, 0.15vw, 8px)
      solid
      var(--layer-accent);
  }

  .wd-about-control__rules {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .wd-about-control__rule:nth-child(2) {
    border-right: 0;
  }

  .wd-about-control__rule:nth-child(-n+2) {
    border-bottom:
      1px solid
      var(--control-line);
  }

  .wd-about-control__split {
    grid-template-columns: 1fr;
  }

  .wd-about-control__split-center {
    grid-template-columns:
      auto
      auto
      1fr;
    grid-template-rows: auto;
    min-width: 0;
    justify-items: start;
    padding: 0;
  }

  .wd-about-control__split-line {
    width: 100%;
    height: 1px;
    min-height: 0;
  }
}


/* =========================================================
   20. MOBILE
========================================================= */

@media (max-width: 720px) {
  .wd-about-control__shell {
    padding-top: 72px;
    padding-bottom: 78px;
  }

  .wd-about-control__head h2 {
    font-size:
      clamp(44px, 12.5vw, 68px);
    line-height: 0.97;
  }

  .wd-about-control__head-note {
    grid-template-columns: 1fr;
    padding: 18px 16px;
  }

  .wd-about-control__stage {
    margin-top: 52px;
  }

  .wd-about-control__rail {
    grid-template-columns: 1fr;
  }

  .wd-about-control__rail-scale {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .wd-about-control__rail-line {
    width: 1px;
    height: 24px;
    justify-self: center;
  }

  .wd-about-control__layer {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }

  .wd-about-control__layer-index {
    width: 100%;
    min-height: 64px;
    grid-auto-flow: column;
    justify-content: start;
    padding: 0 16px;
  }

  .wd-about-control__layer-title {
    grid-template-columns: 1fr;
  }

  .wd-about-control__layer-title h3 {
    font-size:
      clamp(28px, 8.4vw, 42px);
  }

  .wd-about-control__layer-title p {
    font-size: 15px;
  }

  .wd-about-control__layer-rule {
    grid-column: auto;
    padding: 16px;
  }

  .wd-about-control__boundary {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }

  .wd-about-control__boundary span {
    white-space: normal;
  }

  .wd-about-control__rules {
    margin-top: 20px;
    grid-template-columns: 1fr;
  }

  .wd-about-control__rule {
    min-height: 0;
    border-right: 0;
    border-bottom:
      1px solid
      var(--control-line);
    padding: 22px 18px;
  }

  .wd-about-control__rule:last-child {
    border-bottom: 0;
  }

  .wd-about-control__rule-number {
    font-size: 70px;
  }

  .wd-about-control__rule > div {
    margin-top: 24px;
  }

  .wd-about-control__split {
    margin-top: 20px;
    gap: 14px;
  }

  .wd-about-control__split-side {
    padding: 20px 18px;
  }

  .wd-about-control__split-head {
    grid-template-columns: 1fr;
  }

  .wd-about-control__split-center {
    grid-template-columns:
      auto
      minmax(0,1fr);
    gap: 12px;
  }

  .wd-about-control__split-line {
    grid-column: 1 / -1;
  }

  .wd-about-control__close {
    margin-top: 44px;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
  }

  .wd-about-control__close-icon {
    width: 62px;
  }

  .wd-about-control__close p {
    font-size:
      clamp(24px, 7vw, 36px);
  }
}


/* =========================================================
   21. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .wd-about-control *,
  .wd-about-control *::before,
  .wd-about-control *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   WEBSDOCS ABOUT — WHO WE BUILD FOR
   Company fit / business context
   Premium full-width / 8K
   Load AFTER about-fullwidth-8k.css
   No JavaScript required.
========================================================= */


/* =========================================================
   1. ROOT
========================================================= */

.wd-about-for {
  --for-edge:
    var(--wd-about-edge, clamp(18px, 2.35vw, 220px));

  --for-ink:
    #07182d;

  --for-ink-2:
    #1a3c5c;

  --for-muted:
    #657e96;

  --for-blue:
    #2c73ce;

  --for-cyan:
    #18b5cd;

  --for-green:
    #188f70;

  --for-line:
    rgba(68, 111, 154, 0.15);

  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: clip;
  color: var(--for-ink);
  background:
    linear-gradient(
      180deg,
      #eef5fd 0%,
      #f8fbff 36%,
      #ffffff 100%
    );
  border-bottom:
    1px solid
    var(--for-line);
}


/* =========================================================
   2. AMBIENT
========================================================= */

.wd-about-for__ambient,
.wd-about-for__grid,
.wd-about-for__glow {
  position: absolute;
  pointer-events: none;
}

.wd-about-for__ambient {
  inset: 0;
  overflow: hidden;
}

.wd-about-for__grid {
  inset: 0;
  opacity: 0.46;
  background-image:
    linear-gradient(
      rgba(69, 113, 159, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(69, 113, 159, 0.03) 1px,
      transparent 1px
    );
  background-size:
    clamp(50px, 3vw, 220px)
    clamp(50px, 3vw, 220px);
  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.26),
      rgba(0,0,0,0.72) 28%,
      rgba(0,0,0,0.56) 82%,
      transparent
    );
}

.wd-about-for__glow {
  border-radius: 50%;
}

.wd-about-for__glow--one {
  width: min(48vw, 3400px);
  aspect-ratio: 1;
  right: -18%;
  top: 18%;
  background:
    radial-gradient(
      circle,
      rgba(63, 146, 239, 0.10),
      transparent 68%
    );
}

.wd-about-for__glow--two {
  width: min(40vw, 2900px);
  aspect-ratio: 1;
  left: -17%;
  bottom: 5%;
  background:
    radial-gradient(
      circle,
      rgba(24, 181, 205, 0.08),
      transparent 68%
    );
}


/* =========================================================
   3. SHELL
========================================================= */

.wd-about-for__shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  padding:
    clamp(94px, 6vw, 400px)
    var(--for-edge)
    clamp(104px, 6.7vw, 450px);
}


/* =========================================================
   4. HEADER
========================================================= */

.wd-about-for__head {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(0, 1.22fr)
    minmax(0, 0.78fr);
  gap:
    clamp(52px, 4.8vw, 310px);
  align-items: end;
}

.wd-about-for__eyebrow {
  margin: 0;
  color: #2e70b3;
  font-size:
    clamp(11px, 0.58vw, 28px);
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wd-about-for__head h2 {
  margin:
    clamp(18px, 1.2vw, 62px)
    0
    0;
  max-width: none;
  color: var(--for-ink);
  font-size:
    clamp(56px, 4.22vw, 230px);
  font-weight: 820;
  line-height: 0.93;
  letter-spacing: -0.058em;
  text-wrap: balance;
}

.wd-about-for__head h2 span {
  display: block;
  margin-top:
    clamp(9px, 0.48vw, 26px);
  color: #506b85;
  font-weight: 650;
}

.wd-about-for__head-note {
  padding-left:
    clamp(22px, 1.4vw, 72px);
  border-left:
    clamp(2px, 0.12vw, 6px)
    solid
    rgba(44, 115, 206, 0.48);
}

.wd-about-for__head-note p {
  margin: 0;
  color: #536b83;
  font-size:
    clamp(16px, 0.9vw, 43px);
  line-height: 1.72;
}


/* =========================================================
   5. STAGE
========================================================= */

.wd-about-for__stage {
  width: 100%;
  margin-top:
    clamp(76px, 5.2vw, 335px);
  display: grid;
  grid-template-columns:
    minmax(300px, 0.72fr)
    minmax(0, 1.28fr);
  gap:
    clamp(22px, 1.7vw, 98px);
  align-items: stretch;
}


/* =========================================================
   6. FIT CORE
========================================================= */

.wd-about-for__fit {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows:
    auto
    1fr
    auto;
  border:
    1px solid
    rgba(73,121,173,0.20);
  border-radius:
    clamp(30px, 1.62vw, 84px);
  background:
    linear-gradient(
      155deg,
      #0a1d32 0%,
      #102d4d 54%,
      #12395e 100%
    );
  box-shadow:
    0 38px 110px rgba(12,38,67,0.18);
}

.wd-about-for__fit::before {
  content: "";
  position: absolute;
  width: 76%;
  aspect-ratio: 1;
  right: -28%;
  top: -22%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(68,153,242,0.20),
      transparent 68%
    );
}

.wd-about-for__fit-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(14px, 0.85vw, 42px);
  align-items: center;
  padding:
    clamp(22px, 1.35vw, 70px);
  border-bottom:
    1px solid
    rgba(183,212,240,0.11);
}

.wd-about-for__fit-mark {
  width:
    clamp(54px, 3.3vw, 170px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #2d75cf,
      #18b5cd
    );
  box-shadow:
    0 16px 42px rgba(40,126,208,0.24);
  font-size:
    clamp(16px, 0.98vw, 47px);
  font-weight: 950;
  letter-spacing: -0.04em;
}

.wd-about-for__fit-head small,
.wd-about-for__fit-head strong {
  display: block;
}

.wd-about-for__fit-head small {
  color: #7ba7d1;
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 900;
  letter-spacing: 0.11em;
}

.wd-about-for__fit-head strong {
  margin-top:
    clamp(4px, 0.22vw, 10px);
  color: #ffffff;
  font-size:
    clamp(15px, 0.86vw, 41px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}


/* =========================================================
   7. FIT MAP
========================================================= */

.wd-about-for__fit-core {
  position: relative;
  min-height:
    clamp(650px, 40vw, 2200px);
  overflow: hidden;
}

.wd-about-for__fit-core::before {
  content: "";
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  left: 19%;
  top: 19%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(57,137,226,0.16),
      rgba(57,137,226,0.04) 46%,
      transparent 70%
    );
}

.wd-about-for__fit-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform:
    translate(-50%, -50%);
}

.wd-about-for__fit-orbit--one {
  width: 58%;
  aspect-ratio: 1;
  border:
    1px solid
    rgba(95,163,226,0.18);
}

.wd-about-for__fit-orbit--two {
  width: 82%;
  aspect-ratio: 1;
  border:
    1px dashed
    rgba(95,163,226,0.15);
}

.wd-about-for__fit-center {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width:
    clamp(190px, 13.5vw, 730px);
  min-height:
    clamp(160px, 10vw, 530px);
  transform:
    translate(-50%, -50%);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding:
    clamp(20px, 1.2vw, 60px);
  border:
    1px solid
    rgba(108,179,243,0.22);
  border-radius:
    clamp(24px, 1.2vw, 62px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.055)
    );
  box-shadow:
    0 26px 80px rgba(4,17,31,0.20);
  backdrop-filter: blur(18px);
}

.wd-about-for__fit-center > i {
  width:
    clamp(58px, 3.6vw, 186px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #2e76cf,
      #1ab4cc
    );
  box-shadow:
    0 16px 42px rgba(39,127,210,0.28);
  font-size:
    clamp(19px, 1.12vw, 54px);
}

.wd-about-for__fit-center strong {
  margin-top:
    clamp(10px, 0.6vw, 28px);
  color: #ffffff;
  font-size:
    clamp(15px, 0.86vw, 41px);
  letter-spacing: -0.02em;
}

.wd-about-for__fit-center span {
  margin-top:
    clamp(5px, 0.28vw, 14px);
  color: #9fb8cf;
  font-size:
    clamp(9px, 0.46vw, 22px);
  line-height: 1.48;
}

.wd-about-for__fit-node {
  position: absolute;
  z-index: 4;
  width:
    clamp(155px, 10.8vw, 590px);
  min-height:
    clamp(82px, 5.2vw, 278px);
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(10px, 0.6vw, 28px);
  align-items: center;
  padding:
    clamp(12px, 0.78vw, 38px);
  border:
    1px solid
    rgba(176,207,237,0.12);
  border-radius:
    clamp(16px, 0.84vw, 42px);
  background:
    rgba(255,255,255,0.055);
  backdrop-filter: blur(12px);
}

.wd-about-for__fit-node > i {
  width:
    clamp(36px, 2.1vw, 108px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #8dc2f1;
  background:
    rgba(68,145,219,0.13);
  font-size:
    clamp(13px, 0.72vw, 35px);
}

.wd-about-for__fit-node span {
  color: #dceaf6;
  font-size:
    clamp(10px, 0.56vw, 27px);
  line-height: 1.28;
  font-weight: 800;
}

.wd-about-for__fit-node--one {
  left: 7%;
  top: 10%;
}

.wd-about-for__fit-node--two {
  right: 7%;
  top: 10%;
}

.wd-about-for__fit-node--three {
  left: 7%;
  bottom: 10%;
}

.wd-about-for__fit-node--four {
  right: 7%;
  bottom: 10%;
}


/* =========================================================
   8. FIT FOOT
========================================================= */

.wd-about-for__fit-foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));
  border-top:
    1px solid
    rgba(183,212,240,0.11);
  background:
    rgba(3,16,30,0.16);
}

.wd-about-for__fit-foot span {
  min-height:
    clamp(58px, 3.5vw, 176px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap:
    clamp(7px, 0.38vw, 18px);
  padding:
    clamp(12px, 0.74vw, 36px);
  color: #aac3d9;
  font-size:
    clamp(8px, 0.44vw, 21px);
  font-weight: 800;
  text-align: center;
}

.wd-about-for__fit-foot span:first-child {
  border-right:
    1px solid
    rgba(183,212,240,0.10);
}

.wd-about-for__fit-foot i {
  color: #72b6f7;
}


/* =========================================================
   9. CONTEXTS GRID
========================================================= */

.wd-about-for__contexts {
  min-width: 0;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));
  gap:
    clamp(18px, 1.3vw, 74px);
}

.wd-about-for__context {
  position: relative;
  min-width: 0;
  min-height:
    clamp(360px, 23vw, 1160px);
  display: grid;
  grid-template-rows:
    auto
    1fr
    auto;
  overflow: hidden;
  padding:
    clamp(28px, 1.8vw, 94px);
  border:
    1px solid
    var(--for-line);
  border-radius:
    clamp(26px, 1.42vw, 74px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.97),
      rgba(241,248,255,0.91)
    );
  box-shadow:
    0 26px 78px rgba(16,49,82,0.065);
}

.wd-about-for__context::before {
  content: "";
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  right: -22%;
  top: -22%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(58,141,235,0.10),
      transparent 68%
    );
}

.wd-about-for__context-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:
    clamp(18px, 1.2vw, 60px);
}

.wd-about-for__context-number {
  color:
    rgba(48,100,154,0.12);
  font-size:
    clamp(62px, 4.8vw, 245px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.07em;
}

.wd-about-for__context-icon {
  width:
    clamp(56px, 3.4vw, 176px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #2c73ca;
  background:
    linear-gradient(
      145deg,
      #eef6ff,
      #e3f0ff
    );
  border:
    1px solid
    rgba(65,120,181,0.12);
  font-size:
    clamp(19px, 1.12vw, 54px);
}

.wd-about-for__context-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  margin-top:
    clamp(22px, 1.4vw, 72px);
}

.wd-about-for__context-copy small {
  display: block;
  color: #6687a6;
  font-size:
    clamp(8px, 0.42vw, 20px);
  font-weight: 950;
  letter-spacing: 0.11em;
}

.wd-about-for__context-copy h3 {
  margin:
    clamp(8px, 0.46vw, 22px)
    0
    0;
  color: #173b5b;
  font-size:
    clamp(26px, 1.7vw, 82px);
  line-height: 1.04;
  letter-spacing: -0.042em;
}

.wd-about-for__context-copy p {
  margin:
    clamp(14px, 0.86vw, 42px)
    0
    0;
  color: #637b92;
  font-size:
    clamp(12px, 0.64vw, 31px);
  line-height: 1.68;
}

.wd-about-for__context-signal {
  position: relative;
  z-index: 2;
  margin-top:
    clamp(24px, 1.5vw, 76px);
  display: grid;
  grid-template-columns:
    auto
    auto
    minmax(0,1fr);
  gap:
    clamp(9px, 0.54vw, 26px);
  align-items: center;
  padding-top:
    clamp(14px, 0.86vw, 42px);
  border-top:
    1px solid
    rgba(67,111,155,0.13);
}

.wd-about-for__context-signal span,
.wd-about-for__context-signal strong {
  font-size:
    clamp(9px, 0.46vw, 22px);
}

.wd-about-for__context-signal span {
  color: #7890a7;
}

.wd-about-for__context-signal strong {
  color: #2e5e8c;
}

.wd-about-for__context-signal i {
  color: #8da4ba;
  font-size:
    clamp(8px, 0.4vw, 19px);
}


/* =========================================================
   10. NOT INDUSTRY-BOUND
========================================================= */

.wd-about-for__not-industry {
  width: 100%;
  margin-top:
    clamp(34px, 2.6vw, 160px);
  display: grid;
  grid-template-columns:
    minmax(0,0.78fr)
    minmax(0,1.22fr);
  gap:
    clamp(28px, 2vw, 120px);
  align-items: center;
  padding:
    clamp(30px, 2vw, 104px);
  border:
    1px solid
    var(--for-line);
  border-radius:
    clamp(26px, 1.42vw, 74px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.94),
      rgba(235,246,255,0.88)
    );
  box-shadow:
    0 24px 72px rgba(16,49,82,0.055);
}

.wd-about-for__not-industry-label {
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(14px, 0.86vw, 42px);
  align-items: center;
}

.wd-about-for__not-industry-label > span {
  width:
    clamp(58px, 3.5vw, 182px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #2c73ca;
  background: #ffffff;
  border:
    1px solid
    rgba(65,120,181,0.12);
  font-size:
    clamp(20px, 1.16vw, 56px);
}

.wd-about-for__not-industry-label small,
.wd-about-for__not-industry-label strong {
  display: block;
}

.wd-about-for__not-industry-label small {
  color: #6987a4;
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 950;
  letter-spacing: 0.11em;
}

.wd-about-for__not-industry-label strong {
  margin-top:
    clamp(5px, 0.28vw, 14px);
  color: #1a3e5e;
  font-size:
    clamp(20px, 1.3vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.wd-about-for__not-industry-copy {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));
  gap:
    clamp(24px, 1.8vw, 100px);
}

.wd-about-for__not-industry-copy p {
  margin: 0;
  color: #627a91;
  font-size:
    clamp(13px, 0.7vw, 34px);
  line-height: 1.68;
}

.wd-about-for__not-industry-copy strong {
  color: #224765;
}


/* =========================================================
   11. FIT TEST
========================================================= */

.wd-about-for__test {
  width: 100%;
  margin-top:
    clamp(34px, 2.6vw, 160px);
  overflow: hidden;
  border:
    1px solid
    var(--for-line);
  border-radius:
    clamp(26px, 1.42vw, 74px);
  background:
    rgba(255,255,255,0.86);
  box-shadow:
    0 24px 72px rgba(16,49,82,0.055);
}

.wd-about-for__test-head {
  padding:
    clamp(28px, 1.8vw, 94px);
  border-bottom:
    1px solid
    var(--for-line);
}

.wd-about-for__test-kicker {
  margin: 0;
  color: #2e70b3;
  font-size:
    clamp(10px, 0.52vw, 25px);
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wd-about-for__test-head h3 {
  margin:
    clamp(8px, 0.46vw, 22px)
    0
    0;
  color: #173b5b;
  font-size:
    clamp(30px, 2vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.042em;
}

.wd-about-for__test-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
}

.wd-about-for__test-grid article {
  position: relative;
  min-width: 0;
  min-height:
    clamp(220px, 14vw, 700px);
  display: grid;
  align-content: center;
  justify-items: start;
  gap:
    clamp(12px, 0.72vw, 34px);
  padding:
    clamp(26px, 1.65vw, 86px);
  border-right:
    1px solid
    var(--for-line);
}

.wd-about-for__test-grid article:last-child {
  border-right: 0;
}

.wd-about-for__test-grid article > span {
  position: absolute;
  right:
    clamp(16px, 1vw, 48px);
  top:
    clamp(14px, 0.8vw, 40px);
  color:
    rgba(48,100,154,0.10);
  font-size:
    clamp(48px, 3.5vw, 180px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.07em;
}

.wd-about-for__test-grid article > i {
  position: relative;
  z-index: 2;
  width:
    clamp(50px, 3vw, 154px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #2c73ca;
  background: #edf5ff;
  border:
    1px solid
    rgba(65,120,181,0.12);
  font-size:
    clamp(17px, 1vw, 48px);
}

.wd-about-for__test-grid strong {
  position: relative;
  z-index: 2;
  color: #214563;
  font-size:
    clamp(16px, 1vw, 48px);
  line-height: 1.28;
  letter-spacing: -0.025em;
}


/* =========================================================
   12. CLOSE
========================================================= */

.wd-about-for__close {
  width: 100%;
  margin-top:
    clamp(58px, 4.1vw, 260px);
  display: grid;
  grid-template-columns:
    minmax(120px, 0.18fr)
    minmax(0,1.82fr);
  gap:
    clamp(24px, 1.8vw, 110px);
  align-items: start;
}

.wd-about-for__close-rule {
  display: block;
  width: 100%;
  height:
    clamp(3px, 0.15vw, 8px);
  margin-top:
    clamp(12px, 0.68vw, 34px);
  background:
    linear-gradient(
      90deg,
      #2c73ce,
      rgba(44,115,206,0.06)
    );
}

.wd-about-for__close p {
  margin: 0;
  color: #60778e;
  font-size:
    clamp(23px, 1.8vw, 88px);
  line-height: 1.4;
  letter-spacing: -0.028em;
}

.wd-about-for__close strong {
  color: #173a59;
  font-weight: 720;
}


/* =========================================================
   13. 4K / 5K / 8K
========================================================= */

@media (min-width: 5120px) {
  .wd-about-for__shell {
    padding-top: 4.8vw;
    padding-bottom: 5.2vw;
  }

  .wd-about-for__head h2 {
    font-size: 3.98vw;
  }

  .wd-about-for__head-note p {
    font-size: 0.82vw;
  }

  .wd-about-for__context-copy h3 {
    font-size: 1.52vw;
  }

  .wd-about-for__close p {
    font-size: 1.62vw;
  }
}


/* =========================================================
   14. LARGE DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1560px) {
  .wd-about-for__head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .wd-about-for__head-note {
    max-width: 1000px;
  }

  .wd-about-for__stage {
    grid-template-columns: 1fr;
  }

  .wd-about-for__fit-core {
    min-height: 760px;
  }
}


/* =========================================================
   15. TABLET
========================================================= */

@media (max-width: 980px) {
  .wd-about-for__contexts {
    grid-template-columns: 1fr;
  }

  .wd-about-for__context {
    min-height: 0;
  }

  .wd-about-for__not-industry {
    grid-template-columns: 1fr;
  }

  .wd-about-for__test-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .wd-about-for__test-grid article:nth-child(2) {
    border-right: 0;
  }

  .wd-about-for__test-grid article:nth-child(-n+2) {
    border-bottom:
      1px solid
      var(--for-line);
  }
}


/* =========================================================
   16. MOBILE
========================================================= */

@media (max-width: 720px) {
  .wd-about-for__shell {
    padding-top: 72px;
    padding-bottom: 78px;
  }

  .wd-about-for__head h2 {
    font-size:
      clamp(44px, 12.5vw, 68px);
    line-height: 0.97;
  }

  .wd-about-for__head-note {
    padding-left: 16px;
  }

  .wd-about-for__head-note p {
    font-size: 16px;
  }

  .wd-about-for__stage {
    margin-top: 52px;
  }

  .wd-about-for__fit-core {
    min-height: auto;
    display: grid;
    gap: 10px;
    padding: 16px;
  }

  .wd-about-for__fit-orbit {
    display: none;
  }

  .wd-about-for__fit-center,
  .wd-about-for__fit-node {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 0;
    transform: none;
  }

  .wd-about-for__fit-center {
    order: -1;
  }

  .wd-about-for__context {
    padding: 22px 18px;
  }

  .wd-about-for__context-number {
    font-size: 72px;
  }

  .wd-about-for__context-copy {
    margin-top: 22px;
  }

  .wd-about-for__context-copy h3 {
    font-size:
      clamp(28px, 8.5vw, 42px);
  }

  .wd-about-for__context-copy p {
    font-size: 15px;
  }

  .wd-about-for__context-signal {
    grid-template-columns:
      minmax(0,1fr);
  }

  .wd-about-for__context-signal i {
    transform: rotate(90deg);
  }

  .wd-about-for__not-industry {
    margin-top: 20px;
    padding: 20px;
  }

  .wd-about-for__not-industry-label {
    grid-template-columns: 1fr;
  }

  .wd-about-for__not-industry-copy {
    grid-template-columns: 1fr;
  }

  .wd-about-for__test {
    margin-top: 20px;
  }

  .wd-about-for__test-grid {
    grid-template-columns: 1fr;
  }

  .wd-about-for__test-grid article {
    min-height: 0;
    border-right: 0;
    border-bottom:
      1px solid
      var(--for-line);
  }

  .wd-about-for__test-grid article:last-child {
    border-bottom: 0;
  }

  .wd-about-for__close {
    margin-top: 44px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wd-about-for__close-rule {
    width: 90px;
  }

  .wd-about-for__close p {
    font-size:
      clamp(24px, 7vw, 36px);
  }
}


/* =========================================================
   17. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .wd-about-for *,
  .wd-about-for *::before,
  .wd-about-for *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   WEBSDOCS ABOUT — HOW WE WORK
   Company operating discipline / delivery approach
   Premium full-width / 8K
   Load AFTER about-fullwidth-8k.css
   No JavaScript required.
========================================================= */


/* =========================================================
   1. ROOT
========================================================= */

.wd-about-work {
  --work-edge:
    var(--wd-about-edge, clamp(18px, 2.35vw, 220px));

  --work-ink:
    #07182d;

  --work-ink-2:
    #1a3c5c;

  --work-muted:
    #657e96;

  --work-blue:
    #2c73ce;

  --work-cyan:
    #18b5cd;

  --work-green:
    #188f70;

  --work-line:
    rgba(68, 111, 154, 0.15);

  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: clip;
  color: var(--work-ink);
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fbff 48%,
      #eef5fd 100%
    );
  border-bottom:
    1px solid
    var(--work-line);
}


/* =========================================================
   2. AMBIENT
========================================================= */

.wd-about-work__ambient,
.wd-about-work__grid,
.wd-about-work__glow,
.wd-about-work__beam {
  position: absolute;
  pointer-events: none;
}

.wd-about-work__ambient {
  inset: 0;
  overflow: hidden;
}

.wd-about-work__grid {
  inset: 0;
  opacity: 0.46;
  background-image:
    linear-gradient(
      rgba(69, 113, 159, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(69, 113, 159, 0.03) 1px,
      transparent 1px
    );
  background-size:
    clamp(50px, 3vw, 220px)
    clamp(50px, 3vw, 220px);
  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.24),
      rgba(0,0,0,0.70) 28%,
      rgba(0,0,0,0.54) 82%,
      transparent
    );
}

.wd-about-work__glow {
  border-radius: 50%;
}

.wd-about-work__glow--one {
  width: min(48vw, 3400px);
  aspect-ratio: 1;
  right: -18%;
  top: 16%;
  background:
    radial-gradient(
      circle,
      rgba(63,146,239,0.10),
      transparent 68%
    );
}

.wd-about-work__glow--two {
  width: min(40vw, 2900px);
  aspect-ratio: 1;
  left: -17%;
  bottom: 4%;
  background:
    radial-gradient(
      circle,
      rgba(24,181,205,0.08),
      transparent 68%
    );
}

.wd-about-work__beam {
  height: 1px;
  opacity: 0.44;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(52,126,207,0.24),
      transparent
    );
}

.wd-about-work__beam--one {
  width: 72vw;
  right: -14vw;
  top: 30%;
  transform: rotate(-8deg);
}

.wd-about-work__beam--two {
  width: 68vw;
  left: -17vw;
  bottom: 22%;
  transform: rotate(8deg);
}


/* =========================================================
   3. SHELL
========================================================= */

.wd-about-work__shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  padding:
    clamp(94px, 6vw, 400px)
    var(--work-edge)
    clamp(104px, 6.7vw, 450px);
}


/* =========================================================
   4. HEADER
========================================================= */

.wd-about-work__head {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(0, 1.22fr)
    minmax(0, 0.78fr);
  gap:
    clamp(52px, 4.8vw, 310px);
  align-items: end;
}

.wd-about-work__eyebrow {
  margin: 0;
  color: #2e70b3;
  font-size:
    clamp(11px, 0.58vw, 28px);
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wd-about-work__head h2 {
  margin:
    clamp(18px, 1.2vw, 62px)
    0
    0;
  max-width: none;
  color: var(--work-ink);
  font-size:
    clamp(56px, 4.22vw, 230px);
  font-weight: 820;
  line-height: 0.93;
  letter-spacing: -0.058em;
  text-wrap: balance;
}

.wd-about-work__head h2 span {
  display: block;
  margin-top:
    clamp(9px, 0.48vw, 26px);
  color: #506b85;
  font-weight: 650;
}

.wd-about-work__head-note {
  padding-left:
    clamp(22px, 1.4vw, 72px);
  border-left:
    clamp(2px, 0.12vw, 6px)
    solid
    rgba(44,115,206,0.48);
}

.wd-about-work__head-note p {
  margin: 0;
  color: #536b83;
  font-size:
    clamp(16px, 0.9vw, 43px);
  line-height: 1.72;
}


/* =========================================================
   5. OPERATING PATH
========================================================= */

.wd-about-work__path {
  position: relative;
  width: 100%;
  margin-top:
    clamp(78px, 5.3vw, 340px);
  display: grid;
  gap:
    clamp(18px, 1.3vw, 74px);
}


/* =========================================================
   6. SHARED PATH RAIL
========================================================= */

.wd-about-work__path-rail {
  position: absolute;
  z-index: 1;
  left:
    clamp(56px, 4.2vw, 215px);
  top:
    clamp(110px, 7vw, 360px);
  bottom:
    clamp(110px, 7vw, 360px);
  width:
    clamp(18px, 1.1vw, 56px);
  pointer-events: none;
}

.wd-about-work__path-rail-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform:
    translateX(-50%);
  background:
    linear-gradient(
      180deg,
      rgba(44,115,206,0.08),
      rgba(44,115,206,0.58) 14%,
      rgba(24,181,205,0.42) 78%,
      rgba(44,115,206,0.08)
    );
}

.wd-about-work__path-rail-dot {
  position: absolute;
  left: 50%;
  width:
    clamp(10px, 0.55vw, 26px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2c73ce;
  transform:
    translate(-50%, -50%);
  box-shadow:
    0 0 0
    clamp(7px, 0.36vw, 18px)
    rgba(44,115,206,0.09);
}

.wd-about-work__path-rail-dot--one {
  top: 0;
}

.wd-about-work__path-rail-dot--two {
  top: 33.333%;
}

.wd-about-work__path-rail-dot--three {
  top: 66.666%;
}

.wd-about-work__path-rail-dot--four {
  top: 100%;
}


/* =========================================================
   7. STEP
========================================================= */

.wd-about-work__step {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(130px, 0.18fr)
    minmax(0, 1.24fr)
    minmax(280px, 0.58fr);
  gap:
    clamp(24px, 1.8vw, 104px);
  align-items: stretch;
  padding:
    clamp(30px, 2vw, 104px);
  border:
    1px solid
    var(--work-line);
  border-radius:
    clamp(28px, 1.55vw, 80px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.97),
      rgba(240,248,255,0.91)
    );
  box-shadow:
    0 28px 82px rgba(16,49,82,0.065);
}

.wd-about-work__step::before {
  content: "";
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  right: -12%;
  top: -34%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(57,140,235,0.09),
      transparent 68%
    );
  pointer-events: none;
}


/* =========================================================
   8. STEP INDEX
========================================================= */

.wd-about-work__step-index {
  min-width: 0;
  align-self: center;
  display: grid;
  justify-items: center;
  gap:
    clamp(8px, 0.46vw, 22px);
}

.wd-about-work__step-index span {
  width:
    clamp(88px, 5.5vw, 282px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2c73ce;
  background:
    linear-gradient(
      145deg,
      #eef6ff,
      #e2efff
    );
  border:
    1px solid
    rgba(65,120,181,0.14);
  box-shadow:
    0 16px 42px rgba(27,69,112,0.07);
  font-size:
    clamp(28px, 1.8vw, 88px);
  font-weight: 950;
  letter-spacing: -0.06em;
}

.wd-about-work__step-index small {
  color: #6181a1;
  font-size:
    clamp(8px, 0.42vw, 20px);
  font-weight: 950;
  letter-spacing: 0.13em;
}


/* =========================================================
   9. STEP MAIN
========================================================= */

.wd-about-work__step-main {
  position: relative;
  z-index: 2;
  min-width: 0;
  align-self: center;
}

.wd-about-work__step-head {
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(16px, 1vw, 48px);
  align-items: start;
}

.wd-about-work__step-icon {
  width:
    clamp(54px, 3.3vw, 170px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #2c73ca;
  background:
    linear-gradient(
      145deg,
      #edf5ff,
      #e2efff
    );
  border:
    1px solid
    rgba(65,120,181,0.12);
  font-size:
    clamp(18px, 1.06vw, 50px);
}

.wd-about-work__step-head h3 {
  margin: 0;
  color: #173b5b;
  font-size:
    clamp(27px, 1.78vw, 86px);
  line-height: 1.05;
  letter-spacing: -0.042em;
}

.wd-about-work__step-head p {
  margin:
    clamp(12px, 0.72vw, 34px)
    0
    0;
  color: #627a91;
  font-size:
    clamp(12px, 0.64vw, 31px);
  line-height: 1.68;
}

.wd-about-work__step-questions {
  margin-top:
    clamp(24px, 1.5vw, 76px);
  display: flex;
  flex-wrap: wrap;
  gap:
    clamp(7px, 0.42vw, 20px);
}

.wd-about-work__step-questions span {
  min-height:
    clamp(34px, 2vw, 96px);
  display: inline-flex;
  align-items: center;
  padding:
    0
    clamp(11px, 0.66vw, 32px);
  border:
    1px solid
    rgba(69,113,158,0.12);
  border-radius: 999px;
  color: #58718a;
  background:
    rgba(248,252,255,0.85);
  font-size:
    clamp(8px, 0.42vw, 20px);
  font-weight: 800;
}


/* =========================================================
   10. STEP RESULT
========================================================= */

.wd-about-work__step-result {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: grid;
  align-content: center;
  padding:
    clamp(22px, 1.4vw, 72px);
  border-left:
    clamp(3px, 0.15vw, 8px)
    solid
    #2c73ce;
  border-radius:
    0
    clamp(20px, 1vw, 50px)
    clamp(20px, 1vw, 50px)
    0;
  background:
    linear-gradient(
      90deg,
      rgba(232,243,255,0.88),
      rgba(248,252,255,0.45)
    );
}

.wd-about-work__step-result small,
.wd-about-work__step-result strong {
  display: block;
}

.wd-about-work__step-result small {
  color: #2e70b3;
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 950;
  letter-spacing: 0.11em;
}

.wd-about-work__step-result strong {
  margin-top:
    clamp(6px, 0.34vw, 16px);
  color: #234867;
  font-size:
    clamp(18px, 1.1vw, 53px);
  line-height: 1.16;
  letter-spacing: -0.032em;
}

.wd-about-work__step-result p {
  margin:
    clamp(8px, 0.46vw, 22px)
    0
    0;
  color: #6b8197;
  font-size:
    clamp(10px, 0.54vw, 26px);
  line-height: 1.54;
}


/* =========================================================
   11. PRINCIPLES
========================================================= */

.wd-about-work__principles {
  width: 100%;
  margin-top:
    clamp(34px, 2.6vw, 160px);
  overflow: hidden;
  border:
    1px solid
    var(--work-line);
  border-radius:
    clamp(26px, 1.42vw, 74px);
  background:
    rgba(255,255,255,0.86);
  box-shadow:
    0 24px 72px rgba(16,49,82,0.055);
}

.wd-about-work__principles-head {
  padding:
    clamp(28px, 1.8vw, 94px);
  border-bottom:
    1px solid
    var(--work-line);
}

.wd-about-work__principles-head p {
  margin: 0;
  color: #2e70b3;
  font-size:
    clamp(10px, 0.52vw, 25px);
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wd-about-work__principles-head h3 {
  margin:
    clamp(8px, 0.46vw, 22px)
    0
    0;
  color: #173b5b;
  font-size:
    clamp(31px, 2vw, 98px);
  line-height: 1.04;
  letter-spacing: -0.042em;
}

.wd-about-work__principles-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
}

.wd-about-work__principles-grid article {
  min-width: 0;
  min-height:
    clamp(250px, 15.5vw, 780px);
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(14px, 0.86vw, 42px);
  align-content: center;
  padding:
    clamp(26px, 1.65vw, 86px);
  border-right:
    1px solid
    var(--work-line);
}

.wd-about-work__principles-grid article:last-child {
  border-right: 0;
}

.wd-about-work__principle-icon {
  width:
    clamp(48px, 2.9vw, 148px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #2c73ca;
  background:
    #edf5ff;
  border:
    1px solid
    rgba(65,120,181,0.12);
  font-size:
    clamp(16px, 0.94vw, 45px);
}

.wd-about-work__principles-grid small,
.wd-about-work__principles-grid strong {
  display: block;
}

.wd-about-work__principles-grid small {
  color: #6b88a5;
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 950;
  letter-spacing: 0.11em;
}

.wd-about-work__principles-grid strong {
  margin-top:
    clamp(5px, 0.28vw, 14px);
  color: #214664;
  font-size:
    clamp(17px, 1vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.028em;
}

.wd-about-work__principles-grid p {
  margin:
    clamp(8px, 0.46vw, 22px)
    0
    0;
  color: #6a8197;
  font-size:
    clamp(10px, 0.52vw, 25px);
  line-height: 1.56;
}


/* =========================================================
   12. BUSINESS STAYS CENTRAL
========================================================= */

.wd-about-work__center {
  width: 100%;
  margin-top:
    clamp(34px, 2.6vw, 160px);
  display: grid;
  grid-template-columns:
    minmax(0,0.7fr)
    minmax(0,1.3fr);
  gap:
    clamp(24px, 1.8vw, 100px);
  align-items: center;
  padding:
    clamp(28px, 1.8vw, 94px);
  border:
    1px solid
    var(--work-line);
  border-radius:
    clamp(26px, 1.42vw, 74px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.94),
      rgba(235,246,255,0.88)
    );
  box-shadow:
    0 24px 72px rgba(16,49,82,0.055);
}

.wd-about-work__center-core {
  min-width: 0;
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(14px, 0.86vw, 42px);
  align-items: center;
}

.wd-about-work__center-mark {
  width:
    clamp(58px, 3.5vw, 182px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #153d70,
      #2d75cf 66%,
      #18b5cd
    );
  box-shadow:
    0 16px 42px rgba(43,115,206,0.22);
  font-size:
    clamp(17px, 1vw, 48px);
  font-weight: 950;
  letter-spacing: -0.04em;
}

.wd-about-work__center-core small,
.wd-about-work__center-core strong {
  display: block;
}

.wd-about-work__center-core small {
  color: #6987a4;
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 950;
  letter-spacing: 0.11em;
}

.wd-about-work__center-core strong {
  margin-top:
    clamp(5px, 0.28vw, 14px);
  color: #1a3e5e;
  font-size:
    clamp(20px, 1.3vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.wd-about-work__center-flow {
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr)
    auto
    minmax(0,1fr)
    auto
    minmax(0,1fr);
  gap:
    clamp(8px, 0.48vw, 22px);
  align-items: center;
}

.wd-about-work__center-flow span {
  min-width: 0;
  min-height:
    clamp(68px, 4.3vw, 215px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap:
    clamp(6px, 0.34vw, 16px);
  padding:
    clamp(10px, 0.64vw, 30px);
  border:
    1px solid
    rgba(68,113,159,0.12);
  border-radius:
    clamp(15px, 0.78vw, 38px);
  color: #4f6b86;
  background:
    rgba(255,255,255,0.78);
  text-align: center;
  font-size:
    clamp(9px, 0.48vw, 23px);
  font-weight: 800;
}

.wd-about-work__center-flow span i {
  color: #2c73ca;
}

.wd-about-work__center-flow > i {
  color: #91a8be;
  font-size:
    clamp(9px, 0.48vw, 23px);
}


/* =========================================================
   13. CLOSE
========================================================= */

.wd-about-work__close {
  width: 100%;
  margin-top:
    clamp(58px, 4.1vw, 260px);
  display: grid;
  grid-template-columns:
    minmax(120px, 0.18fr)
    minmax(0,1.82fr);
  gap:
    clamp(24px, 1.8vw, 110px);
  align-items: start;
}

.wd-about-work__close-rule {
  display: block;
  width: 100%;
  height:
    clamp(3px, 0.15vw, 8px);
  margin-top:
    clamp(12px, 0.68vw, 34px);
  background:
    linear-gradient(
      90deg,
      #2c73ce,
      rgba(44,115,206,0.06)
    );
}

.wd-about-work__close p {
  margin: 0;
  color: #60778e;
  font-size:
    clamp(23px, 1.8vw, 88px);
  line-height: 1.4;
  letter-spacing: -0.028em;
}

.wd-about-work__close strong {
  color: #173a59;
  font-weight: 720;
}


/* =========================================================
   14. 4K / 5K / 8K
========================================================= */

@media (min-width: 5120px) {
  .wd-about-work__shell {
    padding-top: 4.8vw;
    padding-bottom: 5.2vw;
  }

  .wd-about-work__head h2 {
    font-size: 3.98vw;
  }

  .wd-about-work__head-note p {
    font-size: 0.82vw;
  }

  .wd-about-work__step-head h3 {
    font-size: 1.58vw;
  }

  .wd-about-work__close p {
    font-size: 1.62vw;
  }
}


/* =========================================================
   15. LARGE DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1560px) {
  .wd-about-work__head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .wd-about-work__head-note {
    max-width: 1000px;
  }

  .wd-about-work__path-rail {
    display: none;
  }

  .wd-about-work__step {
    grid-template-columns:
      auto
      minmax(0,1fr);
  }

  .wd-about-work__step-result {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 980px) {
  .wd-about-work__principles-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .wd-about-work__principles-grid article:nth-child(2) {
    border-right: 0;
  }

  .wd-about-work__principles-grid article:nth-child(-n+2) {
    border-bottom:
      1px solid
      var(--work-line);
  }

  .wd-about-work__center {
    grid-template-columns: 1fr;
  }

  .wd-about-work__center-flow {
    grid-template-columns:
      repeat(4, minmax(0,1fr));
  }

  .wd-about-work__center-flow > i {
    display: none;
  }
}


/* =========================================================
   17. MOBILE
========================================================= */

@media (max-width: 720px) {
  .wd-about-work__shell {
    padding-top: 72px;
    padding-bottom: 78px;
  }

  .wd-about-work__head h2 {
    font-size:
      clamp(44px, 12.5vw, 68px);
    line-height: 0.97;
  }

  .wd-about-work__head-note {
    padding-left: 16px;
  }

  .wd-about-work__head-note p {
    font-size: 16px;
  }

  .wd-about-work__path {
    margin-top: 52px;
  }

  .wd-about-work__step {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 18px;
  }

  .wd-about-work__step-index {
    justify-items: start;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
  }

  .wd-about-work__step-index span {
    width: 64px;
    font-size: 20px;
  }

  .wd-about-work__step-head {
    grid-template-columns: 1fr;
  }

  .wd-about-work__step-head h3 {
    font-size:
      clamp(28px, 8.5vw, 42px);
  }

  .wd-about-work__step-head p {
    font-size: 15px;
  }

  .wd-about-work__step-result {
    grid-column: auto;
    padding: 16px;
  }

  .wd-about-work__principles {
    margin-top: 20px;
  }

  .wd-about-work__principles-grid {
    grid-template-columns: 1fr;
  }

  .wd-about-work__principles-grid article {
    min-height: 0;
    border-right: 0;
    border-bottom:
      1px solid
      var(--work-line);
  }

  .wd-about-work__principles-grid article:last-child {
    border-bottom: 0;
  }

  .wd-about-work__center {
    margin-top: 20px;
    padding: 20px;
  }

  .wd-about-work__center-core {
    grid-template-columns: 1fr;
  }

  .wd-about-work__center-flow {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .wd-about-work__close {
    margin-top: 44px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wd-about-work__close-rule {
    width: 90px;
  }

  .wd-about-work__close p {
    font-size:
      clamp(24px, 7vw, 36px);
  }
}


/* =========================================================
   18. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .wd-about-work *,
  .wd-about-work *::before,
  .wd-about-work *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   WEBSDOCS ABOUT — THE WEBDOCS DIRECTION
   Final company closing / CTA
   Premium full-width / 8K
   Load AFTER about-fullwidth-8k.css
   No JavaScript required.
========================================================= */


/* =========================================================
   1. ROOT
========================================================= */

.wd-about-close {
  --close-edge:
    var(--wd-about-edge, clamp(18px, 2.35vw, 220px));

  --close-ink:
    #f4f8fc;

  --close-muted:
    #9fb5ca;

  --close-blue:
    #4d9cf3;

  --close-cyan:
    #20bdd1;

  --close-green:
    #29b88a;

  --close-line:
    rgba(181, 211, 239, 0.12);

  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: clip;
  color: var(--close-ink);
  background:
    linear-gradient(
      180deg,
      #0a1b2e 0%,
      #0c223b 48%,
      #0a1a2c 100%
    );
  border-bottom:
    1px solid
    rgba(255,255,255,0.08);
}


/* =========================================================
   2. AMBIENT
========================================================= */

.wd-about-close__ambient,
.wd-about-close__grid,
.wd-about-close__glow,
.wd-about-close__beam {
  position: absolute;
  pointer-events: none;
}

.wd-about-close__ambient {
  inset: 0;
  overflow: hidden;
}

.wd-about-close__grid {
  inset: 0;
  opacity: 0.42;
  background-image:
    linear-gradient(
      rgba(124, 172, 218, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(124, 172, 218, 0.045) 1px,
      transparent 1px
    );
  background-size:
    clamp(50px, 3vw, 220px)
    clamp(50px, 3vw, 220px);
  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.40),
      rgba(0,0,0,0.78) 28%,
      rgba(0,0,0,0.58) 82%,
      transparent
    );
}

.wd-about-close__glow {
  border-radius: 50%;
}

.wd-about-close__glow--one {
  width: min(54vw, 3900px);
  aspect-ratio: 1;
  right: -18%;
  top: -15%;
  background:
    radial-gradient(
      circle,
      rgba(63, 151, 247, 0.19),
      rgba(63, 151, 247, 0.045) 46%,
      transparent 70%
    );
}

.wd-about-close__glow--two {
  width: min(48vw, 3400px);
  aspect-ratio: 1;
  left: -18%;
  bottom: -18%;
  background:
    radial-gradient(
      circle,
      rgba(28, 191, 210, 0.13),
      transparent 70%
    );
}

.wd-about-close__beam {
  height: 1px;
  opacity: 0.55;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(91, 164, 239, 0.34),
      transparent
    );
}

.wd-about-close__beam--one {
  width: 76vw;
  right: -15vw;
  top: 27%;
  transform: rotate(-10deg);
}

.wd-about-close__beam--two {
  width: 70vw;
  left: -18vw;
  bottom: 25%;
  transform: rotate(9deg);
}


/* =========================================================
   3. SHELL
========================================================= */

.wd-about-close__shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  padding:
    clamp(100px, 6.4vw, 430px)
    var(--close-edge)
    clamp(78px, 5vw, 330px);
}


/* =========================================================
   4. HEADER
========================================================= */

.wd-about-close__head {
  width: 100%;
  max-width: none;
}

.wd-about-close__eyebrow {
  margin: 0;
  color: #72b6f5;
  font-size:
    clamp(11px, 0.58vw, 28px);
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wd-about-close__head h2 {
  margin:
    clamp(18px, 1.2vw, 62px)
    0
    0;
  max-width: none;
  color: #f7fbff;
  font-size:
    clamp(58px, 4.55vw, 246px);
  font-weight: 820;
  line-height: 0.92;
  letter-spacing: -0.061em;
  text-wrap: balance;
}

.wd-about-close__head h2 span {
  display: block;
  margin-top:
    clamp(11px, 0.58vw, 30px);
  color: #91aac2;
  font-weight: 630;
}


/* =========================================================
   5. CONVERGENCE STAGE
========================================================= */

.wd-about-close__stage {
  position: relative;
  width: 100%;
  min-height:
    clamp(820px, 50vw, 2900px);
  margin-top:
    clamp(76px, 5.2vw, 335px);
  overflow: hidden;
  border:
    1px solid
    rgba(158, 198, 235, 0.14);
  border-radius:
    clamp(32px, 1.75vw, 92px);
  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.012)
    );
  box-shadow:
    0 44px 130px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.045);
  backdrop-filter: blur(14px);
}

.wd-about-close__stage::before {
  content: "";
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  left: 24%;
  top: 22%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(63, 148, 240, 0.17),
      rgba(63, 148, 240, 0.045) 44%,
      transparent 68%
    );
}


/* =========================================================
   6. ORBITS
========================================================= */

.wd-about-close__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform:
    translate(-50%, -50%);
  pointer-events: none;
}

.wd-about-close__orbit--one {
  width: 30%;
  aspect-ratio: 1;
  border:
    1px solid
    rgba(104, 174, 240, 0.20);
}

.wd-about-close__orbit--two {
  width: 52%;
  aspect-ratio: 1;
  border:
    1px dashed
    rgba(104, 174, 240, 0.14);
  animation:
    wdAboutCloseOrbit 44s linear infinite;
}

.wd-about-close__orbit--three {
  width: 76%;
  aspect-ratio: 1;
  border:
    1px dotted
    rgba(104, 174, 240, 0.12);
  animation:
    wdAboutCloseOrbitReverse 60s linear infinite;
}


/* =========================================================
   7. CONNECTORS
========================================================= */

.wd-about-close__connector {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 27%;
  height: 1px;
  transform-origin: left center;
  background:
    linear-gradient(
      90deg,
      rgba(80, 156, 235, 0.72),
      rgba(80, 156, 235, 0.08)
    );
  pointer-events: none;
}

.wd-about-close__connector::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width:
    clamp(6px, 0.32vw, 16px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #65aef2;
  transform:
    translate(50%, -50%);
  box-shadow:
    0 0 0
    clamp(6px, 0.3vw, 14px)
    rgba(101,174,242,0.10);
}

.wd-about-close__connector--one {
  transform: rotate(-145deg);
}

.wd-about-close__connector--two {
  transform: rotate(-35deg);
}

.wd-about-close__connector--three {
  transform: rotate(145deg);
}

.wd-about-close__connector--four {
  transform: rotate(35deg);
}


/* =========================================================
   8. FORCE PANELS
========================================================= */

.wd-about-close__force {
  position: absolute;
  z-index: 4;
  width:
    clamp(260px, 20vw, 1100px);
  min-height:
    clamp(150px, 9.8vw, 520px);
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(15px, 0.92vw, 44px);
  align-items: start;
  padding:
    clamp(20px, 1.3vw, 66px);
  border:
    1px solid
    rgba(167, 204, 238, 0.13);
  border-radius:
    clamp(22px, 1.14vw, 58px);
  background:
    rgba(255,255,255,0.055);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.16);
  backdrop-filter: blur(18px);
}

.wd-about-close__force--customers {
  left: 5%;
  top: 10%;
}

.wd-about-close__force--buyers {
  right: 5%;
  top: 11%;
}

.wd-about-close__force--operations {
  left: 5%;
  bottom: 10%;
}

.wd-about-close__force--authority {
  right: 5%;
  bottom: 10%;
}

.wd-about-close__force-icon {
  width:
    clamp(52px, 3.2vw, 164px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #87c3f9;
  background:
    rgba(60, 137, 217, 0.15);
  border:
    1px solid
    rgba(117, 182, 241, 0.16);
  font-size:
    clamp(18px, 1.05vw, 50px);
}

.wd-about-close__force small,
.wd-about-close__force strong {
  display: block;
}

.wd-about-close__force small {
  color: #78a9d5;
  font-size:
    clamp(8px, 0.4vw, 19px);
  font-weight: 950;
  letter-spacing: 0.11em;
}

.wd-about-close__force strong {
  margin-top:
    clamp(5px, 0.28vw, 14px);
  color: #f3f8fd;
  font-size:
    clamp(16px, 0.96vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.028em;
}

.wd-about-close__force p {
  margin:
    clamp(8px, 0.44vw, 21px)
    0
    0;
  color: #9db5ca;
  font-size:
    clamp(10px, 0.52vw, 25px);
  line-height: 1.56;
}


/* =========================================================
   9. CENTRAL CORE
========================================================= */

.wd-about-close__core {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width:
    clamp(310px, 26vw, 1450px);
  min-height:
    clamp(260px, 16vw, 880px);
  transform:
    translate(-50%, -50%);
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(20px, 1.25vw, 64px);
  align-items: center;
  padding:
    clamp(28px, 1.8vw, 94px);
  border:
    1px solid
    rgba(111, 179, 241, 0.24);
  border-radius:
    clamp(30px, 1.55vw, 80px);
  background:
    linear-gradient(
      145deg,
      rgba(20, 53, 89, 0.96),
      rgba(13, 41, 70, 0.97)
    );
  box-shadow:
    0 38px 110px rgba(0,0,0,0.28),
    0 0 0
    clamp(10px, 0.52vw, 26px)
    rgba(255,255,255,0.025);
}

.wd-about-close__core-halo {
  position: absolute;
  inset: -24%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(60, 148, 241, 0.20),
      transparent 68%
    );
  animation:
    wdAboutClosePulse 5s ease-in-out infinite;
}

.wd-about-close__core-mark {
  width:
    clamp(76px, 4.7vw, 242px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #2f77d1,
      #1bb8cf
    );
  box-shadow:
    0 18px 48px rgba(40, 134, 215, 0.30);
  font-size:
    clamp(22px, 1.35vw, 66px);
  font-weight: 950;
  letter-spacing: -0.045em;
}

.wd-about-close__core-copy {
  min-width: 0;
}

.wd-about-close__core-copy small,
.wd-about-close__core-copy strong,
.wd-about-close__core-copy span {
  display: block;
}

.wd-about-close__core-copy small {
  color: #74aee0;
  font-size:
    clamp(8px, 0.42vw, 20px);
  font-weight: 950;
  letter-spacing: 0.13em;
}

.wd-about-close__core-copy strong {
  margin-top:
    clamp(6px, 0.34vw, 16px);
  color: #ffffff;
  font-size:
    clamp(25px, 1.65vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.wd-about-close__core-copy span {
  margin-top:
    clamp(10px, 0.58vw, 28px);
  color: #aac0d4;
  font-size:
    clamp(11px, 0.58vw, 28px);
  line-height: 1.55;
}

.wd-about-close__core-signals {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
  gap:
    clamp(8px, 0.5vw, 24px);
  margin-top:
    clamp(4px, 0.2vw, 10px);
}

.wd-about-close__core-signals span {
  min-height:
    clamp(38px, 2.3vw, 116px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    0
    clamp(10px, 0.6vw, 28px);
  border:
    1px solid
    rgba(160, 202, 240, 0.12);
  border-radius: 999px;
  color: #9ec2e2;
  background:
    rgba(255,255,255,0.045);
  font-size:
    clamp(8px, 0.42vw, 20px);
  font-weight: 850;
}


/* =========================================================
   10. FINAL POSITION
========================================================= */

.wd-about-close__position {
  width: 100%;
  margin-top:
    clamp(60px, 4.2vw, 270px);
  display: grid;
  grid-template-columns:
    minmax(120px, 0.18fr)
    minmax(0,1.82fr);
  gap:
    clamp(24px, 1.8vw, 110px);
  align-items: start;
}

.wd-about-close__position-rule {
  width: 100%;
  height:
    clamp(3px, 0.15vw, 8px);
  margin-top:
    clamp(12px, 0.68vw, 34px);
  background:
    linear-gradient(
      90deg,
      #58a8f5,
      rgba(88,168,245,0.08)
    );
}

.wd-about-close__position p {
  margin: 0;
  color: #93aabd;
  font-size:
    clamp(26px, 2vw, 98px);
  line-height: 1.38;
  letter-spacing: -0.032em;
}

.wd-about-close__position strong {
  color: #eef6fd;
  font-weight: 710;
}


/* =========================================================
   11. CTA RAIL
========================================================= */

.wd-about-close__cta {
  width: 100%;
  margin-top:
    clamp(64px, 4.5vw, 290px);
  display: grid;
  grid-template-columns:
    minmax(0,0.78fr)
    minmax(0,1.22fr);
  gap:
    clamp(30px, 2.2vw, 130px);
  align-items: center;
  padding:
    clamp(32px, 2.1vw, 110px);
  border:
    1px solid
    rgba(163, 203, 239, 0.14);
  border-radius:
    clamp(28px, 1.52vw, 78px);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.065),
      rgba(255,255,255,0.025)
    );
  box-shadow:
    0 28px 82px rgba(0,0,0,0.16);
  backdrop-filter: blur(18px);
}

.wd-about-close__cta-copy small,
.wd-about-close__cta-copy strong {
  display: block;
}

.wd-about-close__cta-copy small {
  color: #73aee0;
  font-size:
    clamp(8px, 0.42vw, 20px);
  font-weight: 950;
  letter-spacing: 0.12em;
}

.wd-about-close__cta-copy strong {
  margin-top:
    clamp(7px, 0.4vw, 20px);
  color: #f1f7fc;
  font-size:
    clamp(20px, 1.28vw, 62px);
  line-height: 1.15;
  letter-spacing: -0.032em;
}

.wd-about-close__cta-actions {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));
  gap:
    clamp(10px, 0.66vw, 32px);
}

.wd-about-close__button {
  min-height:
    clamp(58px, 3.5vw, 172px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap:
    clamp(8px, 0.46vw, 22px);
  padding:
    0
    clamp(16px, 1vw, 48px);
  border-radius:
    clamp(15px, 0.78vw, 38px);
  text-decoration: none;
  text-align: center;
  font-size:
    clamp(10px, 0.56vw, 27px);
  font-weight: 850;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.wd-about-close__button:hover {
  transform: translateY(-2px);
}

.wd-about-close__button--primary {
  color: #ffffff;
  border:
    1px solid
    rgba(88,168,245,0.38);
  background:
    linear-gradient(
      135deg,
      #2569bd,
      #348be1
    );
  box-shadow:
    0 18px 44px rgba(39, 120, 202, 0.22);
}

.wd-about-close__button--secondary {
  color: #bcd9f3;
  border:
    1px solid
    rgba(125,182,235,0.20);
  background:
    rgba(63,135,207,0.12);
}

.wd-about-close__button--ghost {
  color: #cad9e7;
  border:
    1px solid
    rgba(176,203,228,0.16);
  background:
    rgba(255,255,255,0.035);
}

.wd-about-close__button--secondary:hover,
.wd-about-close__button--ghost:hover {
  border-color:
    rgba(126,184,239,0.36);
  background:
    rgba(255,255,255,0.065);
}


/* =========================================================
   12. SIGNATURE
========================================================= */

.wd-about-close__signature {
  width: 100%;
  margin-top:
    clamp(34px, 2.5vw, 150px);
  display: grid;
  grid-template-columns:
    auto
    minmax(100px,1fr)
    auto;
  gap:
    clamp(20px, 1.4vw, 76px);
  align-items: center;
  padding:
    clamp(18px, 1.1vw, 54px)
    0
    0;
  border-top:
    1px solid
    rgba(170, 205, 236, 0.10);
}

.wd-about-close__signature-brand {
  display: grid;
  grid-template-columns:
    auto
    minmax(0,1fr);
  gap:
    clamp(10px, 0.62vw, 30px);
  align-items: center;
}

.wd-about-close__signature-mark {
  width:
    clamp(42px, 2.5vw, 128px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 28%;
  color: #ffffff;
  background:
    linear-gradient(
      145deg,
      #2d75cf,
      #18b5cd
    );
  font-size:
    clamp(12px, 0.72vw, 34px);
  font-weight: 950;
}

.wd-about-close__signature-brand strong,
.wd-about-close__signature-brand small {
  display: block;
}

.wd-about-close__signature-brand strong {
  color: #edf5fc;
  font-size:
    clamp(13px, 0.74vw, 35px);
}

.wd-about-close__signature-brand small {
  margin-top: 2px;
  color: #7998b5;
  font-size:
    clamp(8px, 0.4vw, 19px);
}

.wd-about-close__signature-line {
  width: 100%;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(116,174,228,0.10),
      rgba(116,174,228,0.40),
      rgba(116,174,228,0.10)
    );
}

.wd-about-close__signature p {
  margin: 0;
  max-width:
    clamp(320px, 25vw, 1300px);
  color: #7891a8;
  font-size:
    clamp(9px, 0.48vw, 23px);
  line-height: 1.5;
  text-align: right;
}


/* =========================================================
   13. 4K / 5K / 8K
========================================================= */

@media (min-width: 5120px) {
  .wd-about-close__shell {
    padding-top: 5vw;
    padding-bottom: 4vw;
  }

  .wd-about-close__head h2 {
    font-size: 4.1vw;
  }

  .wd-about-close__stage {
    min-height: 45vw;
  }

  .wd-about-close__position p {
    font-size: 1.78vw;
  }

  .wd-about-close__cta-copy strong {
    font-size: 1.15vw;
  }
}


/* =========================================================
   14. LARGE DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1500px) {
  .wd-about-close__stage {
    min-height: 980px;
  }

  .wd-about-close__force {
    width: min(330px, 29vw);
  }

  .wd-about-close__core {
    width: min(560px, 43vw);
  }
}


/* =========================================================
   15. TABLET
========================================================= */

@media (max-width: 1050px) {
  .wd-about-close__stage {
    min-height: auto;
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0,1fr));
    gap: 14px;
    padding: 18px;
  }

  .wd-about-close__orbit,
  .wd-about-close__connector {
    display: none;
  }

  .wd-about-close__force,
  .wd-about-close__core {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 0;
    transform: none;
  }

  .wd-about-close__core {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .wd-about-close__cta {
    grid-template-columns: 1fr;
  }

  .wd-about-close__signature {
    grid-template-columns:
      auto
      1fr;
  }

  .wd-about-close__signature-line {
    display: none;
  }

  .wd-about-close__signature p {
    text-align: right;
  }
}


/* =========================================================
   16. MOBILE
========================================================= */

@media (max-width: 720px) {
  .wd-about-close__shell {
    padding-top: 76px;
    padding-bottom: 56px;
  }

  .wd-about-close__head h2 {
    font-size:
      clamp(44px, 12.7vw, 70px);
    line-height: 0.96;
  }

  .wd-about-close__stage {
    margin-top: 52px;
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .wd-about-close__core {
    grid-column: auto;
    grid-row: 1;
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  .wd-about-close__core-signals {
    grid-column: auto;
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .wd-about-close__force {
    grid-template-columns: 1fr;
    padding: 20px 18px;
  }

  .wd-about-close__position {
    margin-top: 44px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wd-about-close__position-rule {
    width: 90px;
  }

  .wd-about-close__position p {
    font-size:
      clamp(25px, 7.2vw, 38px);
  }

  .wd-about-close__cta {
    margin-top: 48px;
    padding: 20px 18px;
  }

  .wd-about-close__cta-actions {
    grid-template-columns: 1fr;
  }

  .wd-about-close__button {
    width: 100%;
  }

  .wd-about-close__signature {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wd-about-close__signature p {
    max-width: none;
    text-align: left;
  }
}


/* =========================================================
   17. MOTION
========================================================= */

@keyframes wdAboutCloseOrbit {
  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@keyframes wdAboutCloseOrbitReverse {
  to {
    transform:
      translate(-50%, -50%)
      rotate(-360deg);
  }
}

@keyframes wdAboutClosePulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}


/* =========================================================
   18. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .wd-about-close__orbit,
  .wd-about-close__core-halo {
    animation: none !important;
  }

  .wd-about-close *,
  .wd-about-close *::before,
  .wd-about-close *::after {
    transition-duration: 0.01ms !important;
  }
}