/* Graphic service-page layer: shared 10X brand, a more expressive service identity. */
.graphic-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 760px;
  background:
    radial-gradient(circle at 16% 20%, #0eca752d 0 2px, transparent 3px) 0 0/28px 28px,
    linear-gradient(115deg, #0b2738 0 59%, #123e4d 59% 100%);
  color: white;
}
.graphic-hero::before {
  content: "STRATEGY";
  position: absolute;
  right: -2vw;
  bottom: -8vw;
  z-index: -1;
  color: #ffffff08;
  font-size: clamp(110px, 20vw, 310px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.09em;
}
.graphic-hero .eyebrow { color: var(--green); }
.graphic-hero h1 { font-size: clamp(64px, 8vw, 120px); }
.graphic-hero h1 em { display: block; color: var(--green); font-style: normal; }
.graphic-hero .lead { color: #d2e1e5; }
.graphic-hero .button.secondary { border-color: #b9d0d7; color: white; box-shadow: 0 6px 0 #31566f, 0 12px 22px #0005; }
.graphic-hero .button.secondary:hover { border-color: var(--blue); }

.strategy-visual {
  position: relative;
  min-height: 520px;
  border: 1px solid #ffffff32;
  background: linear-gradient(145deg, #ffffff10, #ffffff03);
  box-shadow: 24px 24px 0 var(--green), 0 35px 70px #0005;
}
.strategy-visual::before,
.strategy-visual::after {
  content: "";
  position: absolute;
  background: #ffffff26;
}
.strategy-visual::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.strategy-visual::after { top: 50%; right: 0; left: 0; height: 1px; }
.orbit { position: absolute; border: 1px solid #0eca7575; border-radius: 50%; }
.orbit-one { top: 47px; right: 46px; width: 240px; height: 240px; }
.orbit-two { right: 92px; bottom: 56px; width: 330px; height: 330px; border-color: #ffffff25; }
.visual-title { position: absolute; top: 58px; left: 42px; z-index: 2; }
.visual-title small { display: block; margin-bottom: 14px; color: var(--green); font-weight: 900; letter-spacing: .18em; }
.visual-title strong { font-size: clamp(38px, 4vw, 64px); line-height: .92; letter-spacing: -.06em; }
.graphic-proof { grid-template-columns: repeat(3, 1fr); background: var(--green); color: #07100b; }
.graphic-proof div { border-color: #087b49; }
.graphic-proof strong { color: #07100b; font-size: clamp(39px, 4vw, 62px); line-height: 1; }
.graphic-proof span { color: #0b4c31; font-weight: 800; }

.challenge { position: relative; overflow: hidden; }
.challenge::after { content: "10X"; position: absolute; right: -20px; bottom: -70px; color: #5278950b; font-size: 260px; font-weight: 900; line-height: 1; }

.capabilities { background: #eaf4f3; }
.graphic-cards { gap: 0; border: 1px solid #bcd1d2; }
.graphic-cards article { position: relative; min-height: 375px; padding: 32px; border: 0; border-right: 1px solid #bcd1d2; border-bottom: 1px solid #bcd1d2; box-shadow: inset 0 0 0 1px #ffffff80, 0 15px 32px #15354b16; overflow: hidden; }
.graphic-cards article::before { content:""; position:absolute; top:18px; left:18px; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:16px 0 0 #527895,32px 0 0 #ffffff,0 16px 18px #0eca7599; }
.graphic-cards article::after { content:""; position:absolute; right:-36px; bottom:34px; width:120px; height:1px; background:#5278954d; box-shadow:0 10px 0 #52789538,0 20px 0 #52789524; transform:rotate(-35deg); }
.graphic-cards article:nth-child(1),.graphic-cards article:nth-child(4){background:#f7fbfa}.graphic-cards article:nth-child(2),.graphic-cards article:nth-child(5){background:#e2f0ed}.graphic-cards article:nth-child(3),.graphic-cards article:nth-child(6){background:#d4e9e5}
.graphic-cards article>i { position: absolute; top: 24px; right: 28px; color: #52789580; font-style: normal; font-size: 12px; font-weight: 900; }
.card-mark { position: relative; width: 108px; height: 108px; margin: 34px 0 42px 9px; border-radius:18px; background-color:#cbe4df; box-shadow:8px 8px 0 #52789580,0 18px 28px #15354b2e,inset 0 0 0 1px #ffffffcc; filter:drop-shadow(0 0 9px #0eca7545); transform:perspective(300px) rotateX(7deg) rotateY(-8deg); transition:transform .25s ease,box-shadow .25s ease; }
.graphic-cards article:hover .card-mark { transform:perspective(300px) rotateX(0) rotateY(0) translateY(-5px); box-shadow:11px 11px 0 #5278958c,0 22px 34px #15354b38,inset 0 0 0 1px #fff; }
.card-mark::before,.card-mark::after { content: ""; position: absolute; }
.discovery-mark::before{inset:20px;border:11px solid var(--navy);border-radius:50%;box-shadow:inset 0 0 0 4px #ffffff70}.discovery-mark::after{right:12px;bottom:18px;width:39px;height:11px;background:var(--green);box-shadow:0 0 12px #0eca75;transform:rotate(45deg)}
.swot-mark{background-color:#cbe4df;background-image:linear-gradient(90deg,transparent 47%,var(--navy) 47% 53%,transparent 53%),linear-gradient(transparent 47%,var(--navy) 47% 53%,transparent 53%)}.swot-mark::after{inset:37px;background:var(--green);box-shadow:0 0 15px #0eca75}
.target-mark{background-color:#cbe4df;background-image:linear-gradient(90deg,transparent 48%,#52789580 48% 52%,transparent 52%),linear-gradient(transparent 48%,#52789580 48% 52%,transparent 52%)}.target-mark::before{inset:17px;border:7px solid var(--navy);border-radius:50%;box-shadow:inset 0 0 0 8px #cbe4df,inset 0 0 0 14px var(--green),0 0 13px #0eca7560}.target-mark::after{inset:45px;background:var(--navy);border:5px solid var(--green);border-radius:50%;box-shadow:0 0 14px #0eca75}
.message-mark::before{left:19px;right:19px;top:28px;height:52px;border:5px solid var(--navy);border-radius:10px}.message-mark::after{left:31px;right:31px;top:44px;height:4px;background:var(--green);box-shadow:0 13px 0 var(--green),0 0 12px #0eca75}
.journey-mark::before{left:14px;top:52px;width:80px;height:5px;background:var(--navy);box-shadow:0 0 9px #527895}.journey-mark::after{left:13px;top:39px;width:24px;height:24px;border:5px solid var(--green);background:#cbe4df;border-radius:50%;box-shadow:32px 0 0 -4px #cbe4df,32px 0 0 1px var(--navy),64px 0 0 -4px #cbe4df,64px 0 0 1px var(--green),0 0 15px #0eca75}
.gps-mark::before{left:25px;top:12px;width:58px;height:72px;background:var(--navy);border-radius:50% 50% 50% 0;box-shadow:0 0 16px #52789580;transform:rotate(-45deg)}.gps-mark::after{left:43px;top:30px;width:22px;height:22px;border:6px solid var(--green);background:#cbe4df;border-radius:50%;box-shadow:0 0 14px #0eca75}
.graphic-cards h3 { font-size: 28px; }

.process { position: relative; overflow: hidden; }
.process::after { content: "→"; position: absolute; right: 4vw; top: 25px; color: #0eca7521; font-size: 230px; line-height: 1; }

@media(max-width:950px){.graphic-hero{background:linear-gradient(150deg,#0b2738,#123e4d)}.strategy-visual{max-width:650px}.graphic-proof{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.graphic-hero{padding-top:65px}.strategy-visual{min-height:430px;box-shadow:10px 10px 0 var(--green)}.visual-title{top:42px;left:25px}.orbit-two{width:240px;height:240px}.graphic-proof{grid-template-columns:1fr}.graphic-cards{grid-template-columns:1fr}.graphic-cards article{min-height:310px}.challenge::after{font-size:150px}}