/* =========================================================
   SERVICES PAGE — The 8D Studios Growth Architecture™
   Scoped to services.php. Relies on global tokens from style.css:
   --blue --red --bg --ink --muted --line --ease
========================================================= */

/* ---------- shared flow primitives ---------- */
.svc-flow-arrow,
.svc-arch-arrow,
.svc-arch-connector,
.svc-flow-h-arrow,
.svc-arch-join { flex-shrink:0; }

/* ============ SECTION 1 — HERO ============ */
.svc-hero { padding:210px 0 140px; position:relative; overflow:hidden; }
.svc-hero .hero-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.svc-hero .wrap { position:relative; z-index:2; }
.svc-hero-layout {
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:80px; align-items:center;
}
.svc-hero-content .hero-badge { margin-bottom:34px; }
.svc-hero-title {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(2.5rem,5vw,4rem); line-height:1.04;
  letter-spacing:-.03em; color:var(--ink); margin-bottom:30px;
}
.svc-hero-title .line { display:block; }
.svc-hero-title .line:last-child span { color:var(--blue); }
.svc-hero-sub {
  font-size:1.1rem; line-height:1.7; color:var(--ink);
  max-width:540px; margin-bottom:18px; font-weight:500;
}
.svc-hero-sub2 {
  font-size:1rem; line-height:1.8; color:var(--muted);
  max-width:540px; margin-bottom:40px;
}
.svc-hero .hero-actions { display:flex; gap:16px; flex-wrap:wrap; }

/* Hero visual — The Growth Engine (a system that runs forever) */
.svc-engine { position:relative; width:100%; max-width:420px; aspect-ratio:1; margin:0 auto; }
.svc-engine-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* Flowing current of light — a thin bright arc circulating the ring forever (forward only) */
.svc-engine-current,
.svc-engine-current-glow {
  /* circumference of r=150 ≈ 942.48; a short bright segment travels the loop */
  stroke-dasharray:120 822;
  animation:svc-engine-flow 7s linear infinite;
}
.svc-engine-current { stroke-width:1.5; }
.svc-engine-current-glow { stroke:rgba(7,62,129,.20); stroke-width:5; }
@keyframes svc-engine-flow {
  from { stroke-dashoffset:0; }
  to   { stroke-dashoffset:-942.48; }
}

/* Growth ripples — very thin, faint blue rings expanding gently from the core */
.svc-engine-ripple { opacity:0; stroke-width:0.6; transform-origin:200px 200px; }
.e-r1 { animation:svc-engine-ripple 5s var(--ease) infinite; }
.e-r2 { animation:svc-engine-ripple 5s var(--ease) infinite; animation-delay:-2.5s; }
@keyframes svc-engine-ripple {
  0%   { transform:scale(1);   opacity:.0; }
  15%  { opacity:.16; }
  100% { transform:scale(1.9); opacity:0; }
}

/* Stations on the ring (32px = generous hover target; dot centred inside) */
.svc-engine-node {
  position:absolute; left:var(--x); top:var(--y);
  width:32px; height:32px; transform:translate(-50%,-50%);
}
.svc-engine-dot {
  position:absolute; left:50%; top:50%;
  width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 0 4px rgba(7,62,129,.10);
  animation:svc-engine-ignite 7s var(--ease) infinite;
}
.svc-engine-lbl {
  position:absolute; left:50%; top:50%; white-space:nowrap;
  display:flex; flex-direction:column; align-items:center; line-height:1.15;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.04em; color:var(--blue); opacity:.85;
}
.svc-engine-num {
  font-size:.56rem; font-weight:800; letter-spacing:.18em;
  color:var(--red); margin-bottom:2px;
}
/* label placement, pushed clear of the ring */
.n-build    .svc-engine-lbl { transform:translate(calc(-100% - 18px),-50%); }
.n-maintain .svc-engine-lbl { transform:translate(-50%,-185%); }
.n-amplify  .svc-engine-lbl { transform:translate(18px,-50%); }
.n-trust    .svc-engine-lbl { transform:translate(-50%,130%); }
.n-growth   .svc-engine-lbl { transform:translate(-50%,130%); }

/* ignition cascade — each station grows only as the current sweeps past it */
.n-growth   .svc-engine-dot { animation-delay:0.55s; }
.n-trust    .svc-engine-dot { animation-delay:1.95s; }
.n-build    .svc-engine-dot { animation-delay:3.35s; }
.n-maintain .svc-engine-dot { animation-delay:4.75s; }
.n-amplify  .svc-engine-dot { animation-delay:6.15s; }
@keyframes svc-engine-ignite {
  0%, 100% { transform:scale(1);    box-shadow:0 0 0 4px rgba(7,62,129,.10); }
  8%       { transform:scale(1.5);  box-shadow:0 0 0 5px rgba(7,62,129,.16), 0 0 16px rgba(7,62,129,.5); }
  22%      { transform:scale(1);    box-shadow:0 0 0 4px rgba(7,62,129,.10); }
}

/* Trust & Growth — the outcomes: smaller red dots that grow when the current arrives */
.n-trust  .svc-engine-dot,
.n-growth .svc-engine-dot {
  width:8px; height:8px; margin:-4px 0 0 -4px;
  background:var(--red); box-shadow:0 0 0 3px rgba(255,0,51,.10);
  animation-name:svc-engine-ignite-red;
}
@keyframes svc-engine-ignite-red {
  0%, 100% { transform:scale(1);   box-shadow:0 0 0 3px rgba(255,0,51,.10); }
  8%       { transform:scale(2);   box-shadow:0 0 0 4px rgba(255,0,51,.18), 0 0 18px rgba(255,0,51,.55); }
  22%      { transform:scale(1);   box-shadow:0 0 0 3px rgba(255,0,51,.10); }
}

/* Hover tooltips on the three process stations */
.svc-engine-tip {
  position:absolute; left:50%; top:50%;
  width:190px; padding:13px 15px; border-radius:14px;
  background:var(--blue); color:#fff;
  font-family:'Inter',sans-serif; font-size:.72rem; line-height:1.5;
  text-align:left; white-space:normal;
  box-shadow:0 16px 40px rgba(7,62,129,.24);
  opacity:0; visibility:hidden;
  transition:opacity .22s var(--ease), visibility .22s;
  pointer-events:none; z-index:6;
}
.svc-engine-tip strong {
  display:block; font-family:'Manrope',sans-serif; font-weight:800;
  font-size:.82rem; letter-spacing:-.01em; margin-bottom:3px;
}
.svc-engine-node:hover { z-index:8; }
.svc-engine-node:hover .svc-engine-tip { opacity:1; visibility:visible; }
.n-build    .svc-engine-tip { transform:translate(16px, -50%); }
.n-maintain .svc-engine-tip { transform:translate(-50%, 26px); }
.n-amplify  .svc-engine-tip { transform:translate(calc(-100% - 16px), -50%); }

/* Forward-momentum core */
.svc-engine-core {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
}
.svc-engine-core svg {
  width:22px; height:auto; transform-origin:center;
  animation:play-heartbeat 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .svc-engine-current, .svc-engine-current-glow,
  .svc-engine-ripple, .svc-engine-dot, .svc-engine-core svg { animation:none; }
  .svc-engine-current { stroke-dasharray:none; }
  .svc-engine-ripple { display:none; }
}

/* ============ SECTION 2 — WHY PERCEPTION MATTERS ============ */
.svc-perception { background:var(--bg); }
.svc-perception-grid {
  display:grid; grid-template-columns:1fr 0.8fr; gap:90px; align-items:center;
}
.svc-perception-copy h2 {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.12;
  letter-spacing:-.02em; color:var(--ink); margin:18px 0 26px;
}
.svc-perception-copy p {
  font-size:1.02rem; line-height:1.85; color:var(--muted);
  max-width:480px; margin-bottom:18px;
}
.svc-framework-label {
  display:inline-block; margin-top:14px; padding:10px 20px;
  border:1px solid var(--line); border-radius:100px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.82rem;
  color:var(--blue); letter-spacing:.02em;
}

/* Brand Perception Framework — connected vertical journey */
.svc-bpf { display:flex; justify-content:center; }
.svc-bpf-track {
  position:relative; display:flex; flex-direction:column; gap:30px;
  padding:6px 0;
}
.svc-bpf-spine {
  position:absolute; left:18px; top:19px; bottom:19px; width:2px;
  background:var(--line); border-radius:2px; overflow:hidden;
}
/* faint constant fill drawn once on reveal */
.svc-bpf-spine-fill {
  position:absolute; inset:0; background:rgba(7,62,129,.18);
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.1s var(--ease) .15s;
}
.svc-bpf.in .svc-bpf-spine-fill { transform:scaleY(1); }

/* travelling play-button pulse — runs the flow, loops */
.svc-bpf-pulse {
  position:absolute; left:50%; top:0;
  width:18px; height:20.6px; margin-left:-9px; margin-top:-10px;
  opacity:0; z-index:1; filter:drop-shadow(0 0 8px rgba(255,0,51,.6));
  transform:rotate(90deg);
}
.svc-bpf-pulse svg { width:100%; height:100%; display:block; }
.svc-bpf.in .svc-bpf-pulse { animation:svc-pulse 5.5s var(--ease) infinite 1s; }

.svc-bpf-node {
  display:grid; grid-template-columns:38px 30px auto; align-items:center; gap:16px;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:calc(var(--i) * .11s);
}
.svc-bpf.in .svc-bpf-node { opacity:1; transform:none; }

.svc-bpf-marker {
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; position:relative; z-index:2;
}
.svc-bpf-dot {
  width:13px; height:13px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 0 5px var(--bg), 0 0 0 6px var(--line), 0 0 14px rgba(7,62,129,.4);
  transition:transform .3s var(--ease), background .3s ease, box-shadow .3s ease;
}
/* each dot ignites as the pulse passes (delay tracks pulse position) */
.svc-bpf.in .svc-bpf-dot {
  animation:svc-ignite 5.5s var(--ease) infinite 1s;
  animation-delay:calc(1s + var(--i) * 0.5s);
}
.svc-bpf-marker-play {
  width:42px; height:42px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 0 5px var(--bg), 0 8px 22px rgba(7,62,129,.35);
  margin-left:-2px; transition:background .3s ease, box-shadow .3s ease;
}
.svc-bpf-marker-play svg { width:14px; height:16px; display:block; }
.svc-bpf.in .svc-bpf-marker-play {
  animation:svc-growth 5.5s var(--ease) infinite;
  animation-delay:calc(1s + 5 * 0.5s);
}
.svc-bpf-num {
  font-size:.72rem; font-weight:700; letter-spacing:.14em; color:var(--red);
}
.svc-bpf-name {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1.18rem;
  color:var(--ink); letter-spacing:-.01em; line-height:1;
  transition:color .3s ease, transform .3s var(--ease);
}
.svc-bpf-node-final .svc-bpf-name { color:var(--blue); font-size:1.34rem; }

/* manual interactivity — hover lights a stage */
.svc-bpf-node:hover .svc-bpf-dot {
  transform:scale(1.5); background:var(--red);
  box-shadow:0 0 0 5px var(--bg), 0 0 0 6px var(--line), 0 0 18px rgba(255,0,51,.6);
}
.svc-bpf-node:hover .svc-bpf-name { color:var(--red); transform:translateX(3px); }

@keyframes svc-pulse {
  0%   { top:0%;   opacity:0; }
  4%   { opacity:1; }
  45%  { top:100%; opacity:1; }
  52%  { top:100%; opacity:0; }
  100% { top:0%;   opacity:0; }
}
@keyframes svc-ignite {
  0%   { transform:scale(1);    background:var(--blue);
         box-shadow:0 0 0 5px var(--bg), 0 0 0 6px var(--line), 0 0 14px rgba(7,62,129,.4); }
  5%   { transform:scale(1.7);  background:var(--red);
         box-shadow:0 0 0 5px var(--bg), 0 0 0 6px var(--line), 0 0 22px rgba(255,0,51,.7); }
  18%  { transform:scale(1);    background:var(--blue);
         box-shadow:0 0 0 5px var(--bg), 0 0 0 6px var(--line), 0 0 14px rgba(7,62,129,.4); }
  100% { transform:scale(1);    background:var(--blue);
         box-shadow:0 0 0 5px var(--bg), 0 0 0 6px var(--line), 0 0 14px rgba(7,62,129,.4); }
}
@keyframes svc-growth {
  0%,40% { transform:scale(1); background:var(--blue);
           box-shadow:0 0 0 5px var(--bg), 0 8px 22px rgba(7,62,129,.35); }
  47%    { transform:scale(1.18); background:var(--red);
           box-shadow:0 0 0 5px var(--bg), 0 0 0 9px rgba(255,0,51,.18), 0 10px 30px rgba(255,0,51,.6); }
  60%    { transform:scale(1); background:var(--red);
           box-shadow:0 0 0 5px var(--bg), 0 8px 22px rgba(255,0,51,.4); }
  75%    { transform:scale(1); background:var(--blue);
           box-shadow:0 0 0 5px var(--bg), 0 8px 22px rgba(7,62,129,.35); }
  100%   { transform:scale(1); background:var(--blue);
           box-shadow:0 0 0 5px var(--bg), 0 8px 22px rgba(7,62,129,.35); }
}
@media (prefers-reduced-motion: reduce){
  .svc-bpf-pulse { display:none; }
  .svc-bpf.in .svc-bpf-dot,
  .svc-bpf.in .svc-bpf-marker-play { animation:none; }
  .svc-bpf-spine-fill { background:rgba(7,62,129,.3); }
}

/* ============ SECTIONS 3 & 5 — PILLAR CARDS ============ */
.svc-pillar-light { background:var(--bg); transition:background-color .9s var(--ease); }
.svc-pillar-light.is-blue { background:var(--blue); }
.svc-pillar-card {
  position:relative; background:#fff; border:1px solid var(--line); border-radius:36px;
  padding:74px 70px; box-shadow:0 30px 80px rgba(7,62,129,.06);
}
/* card stays white in both states; only the section background flips blue */

/* corner animations that name each pillar */
.svc-anim {
  position:absolute; top:50px; right:58px;
  width:104px; height:104px; pointer-events:none;
}

/* BUILD — blocks stacking up to a red apex */
.svc-build-bar {
  position:absolute; right:0; height:18px; border-radius:6px;
  background:rgba(7,62,129,.16); transform:scaleY(0); transform-origin:bottom center;
  animation:svc-build 4s var(--ease) infinite;
}
.svc-build-bar.b1 { bottom:0;    width:100%; animation-delay:0s; }
.svc-build-bar.b2 { bottom:23px; width:74%;  animation-delay:.28s; background:rgba(7,62,129,.26); }
.svc-build-bar.b3 { bottom:46px; width:48%;  animation-delay:.56s; background:rgba(7,62,129,.38); }
.svc-build-cap {
  position:absolute; bottom:71px; right:9%;
  width:18px; height:20.6px; transform:scale(0); transform-origin:bottom center;
  animation:svc-build-cap 4s var(--ease) infinite .84s;
  filter:drop-shadow(0 3px 8px rgba(255,0,51,.35));
}
.svc-build-cap svg { width:100%; height:100%; display:block; }
/* forward-only: rise up, then fade out holding position (never collapse back) */
@keyframes svc-build {
  0%   { transform:scaleY(0) translateY(0);    opacity:0; }
  12%  { transform:scaleY(1) translateY(0);    opacity:1; }
  76%  { transform:scaleY(1) translateY(0);    opacity:1; }
  92%  { transform:scaleY(1) translateY(-8px); opacity:0; }
  100% { transform:scaleY(1) translateY(-8px); opacity:0; }
}
@keyframes svc-build-cap {
  0%,6% { transform:scale(1) translateY(0);    opacity:0; }
  18%   { transform:scale(1) translateY(0);    opacity:1; }
  72%   { transform:scale(1) translateY(0);    opacity:1; }
  90%   { transform:scale(1) translateY(-8px); opacity:0; }
  100%  { transform:scale(1) translateY(-8px); opacity:0; }
}

/* AMPLIFY — muted arcs rippling outward (inner→outer) from a red play emitter */
.svc-anim-amplify svg { width:100%; height:100%; display:block; }
.svc-amp-wave {
  fill:none; stroke:rgba(7,62,129,.3); stroke-width:2.5; stroke-linecap:round;
  opacity:0; animation:svc-amp-wave 3s var(--ease) infinite;
}
.svc-amp-wave.w1 { animation-delay:0s; }
.svc-amp-wave.w2 { animation-delay:.5s; }
.svc-amp-wave.w3 { animation-delay:1s; }
.svc-amp-play { fill:var(--red); }
/* forward-only: each arc rises in then eases out as the next takes over */
@keyframes svc-amp-wave {
  0%   { opacity:0; }
  22%  { opacity:.45; }
  55%  { opacity:0; }
  100% { opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .svc-build-bar, .svc-build-cap { animation:none; transform:none; opacity:1; }
  .svc-build-bar { transform:scaleY(1); }
  .svc-amp-wave { animation:none; opacity:.25; }
  .svc-maintain-bar, .svc-maintain-cap { animation:none; opacity:1; }
}
.svc-pillar-index {
  font-size:.72rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); display:block; margin-bottom:18px;
}
.svc-pillar-head h2 {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(2rem,3.6vw,3rem); line-height:1.08;
  letter-spacing:-.025em; color:var(--ink); margin-bottom:14px;
}
.svc-pillar-sub { font-size:1.1rem; color:var(--blue); font-weight:500; line-height:1.6; max-width:600px; }
.svc-pillar-body { margin-top:46px; }
.svc-pillar-lead {
  font-size:1.05rem; line-height:1.85; color:var(--muted);
  max-width:760px; margin-bottom:48px;
}
.svc-service-list {
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  padding-top:44px; border-top:1px solid var(--line);
}
.svc-service h3 {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1.4rem;
  color:var(--ink); letter-spacing:-.01em; margin-bottom:12px;
}
.svc-service p { font-size:.96rem; line-height:1.8; color:var(--muted); }

/* outcome chain (horizontal) */
.svc-outcome { margin-top:50px; padding-top:36px; border-top:1px solid var(--line); }
.svc-outcome-label {
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:18px;
}
.svc-flow-h { display:flex; align-items:center; flex-wrap:wrap; gap:0; }
.svc-flow-h-step {
  font-family:'Manrope',sans-serif; font-weight:700; font-size:1rem;
  padding:11px 22px; border:1px solid var(--line); border-radius:100px;
  color:var(--ink); background:var(--bg);
}
.svc-flow-h-step-accent { background:var(--blue); color:#fff; border-color:var(--blue); }
.svc-flow-h-arrow {
  width:30px; height:1.5px; margin:0 14px; background:rgba(7,62,129,.2); position:relative;
}
.svc-flow-h-arrow::after {
  content:''; position:absolute; right:0; top:50%;
  width:6px; height:6px; border-top:1.5px solid rgba(7,62,129,.2);
  border-right:1.5px solid rgba(7,62,129,.2);
  transform:translateY(-50%) rotate(45deg);
}

/* MAINTAIN corner icon — identical bars pulsing in a steady cadence (consistency) */
.svc-maintain-bar {
  position:absolute; right:0; width:100%; height:18px; border-radius:6px;
  background:rgba(7,62,129,.16); animation:svc-maintain 3s var(--ease) infinite;
}
.svc-maintain-bar.m1 { bottom:0;    animation-delay:0s; }
.svc-maintain-bar.m2 { bottom:23px; animation-delay:.32s; background:rgba(7,62,129,.22); }
.svc-maintain-bar.m3 { bottom:46px; animation-delay:.64s; background:rgba(7,62,129,.30); }
.svc-maintain-cap {
  position:absolute; bottom:71px; right:9%; width:18px; height:20.6px;
  filter:drop-shadow(0 3px 8px rgba(255,0,51,.35));
  animation:svc-maintain-cap 3s ease-in-out infinite;
}
.svc-maintain-cap svg { width:100%; height:100%; display:block; }
@keyframes svc-maintain { 0%,100% { opacity:.5; } 45% { opacity:1; } }
@keyframes svc-maintain-cap { 0%,100% { transform:scale(1); opacity:.85; } 45% { transform:scale(1.15); opacity:1; } }


/* ============ SECTION 4 — MAINTAIN (dark) ============ */
.svc-pillar-dark { background:var(--blue); color:#fff; }
.svc-pillar-dark .svc-pillar-index { color:rgba(255,255,255,.55); }
.svc-pillar-dark .svc-pillar-head h2 { color:#fff; }
.svc-pillar-dark .svc-pillar-sub { color:rgba(255,255,255,.7); }
.svc-flagship {
  margin-top:50px; padding:48px 52px; border-radius:36px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
}
.svc-flagship-tag {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 18px 7px 14px; border-radius:100px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  color:#fff; font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:20px;
}
.svc-flagship-tag::before {
  content:''; width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 10px rgba(255,0,51,.8); flex-shrink:0;
}
.svc-flagship h3 {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(1.6rem,2.6vw,2.2rem); letter-spacing:-.02em; margin-bottom:16px;
}
.svc-flagship p { font-size:1.02rem; line-height:1.8; color:rgba(255,255,255,.78); max-width:760px; }
.svc-maintain-grid { display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }
.svc-chip {
  padding:13px 24px; border-radius:100px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04);
  font-family:'Manrope',sans-serif; font-weight:600; font-size:.95rem; color:#fff;
  transition:background .35s ease, border-color .35s ease, transform .35s var(--ease);
}
.svc-chip:hover {
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); transform:translateY(-2px);
}
.svc-outcome-dark { border-top-color:rgba(255,255,255,.14); }
.svc-outcome-dark .svc-outcome-label { color:rgba(255,255,255,.55); }
.svc-outcome-dark .svc-flow-h-step {
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); color:#fff;
}
.svc-outcome-dark .svc-flow-h-step-accent { background:#fff; border-color:#fff; color:var(--blue); }
.svc-outcome-dark .svc-flow-h-arrow { background:rgba(255,255,255,.3); }
.svc-outcome-dark .svc-flow-h-arrow::after {
  border-top-color:rgba(255,255,255,.3); border-right-color:rgba(255,255,255,.3);
}

/* ============ SECTION 6 — THE GROWTH ARCHITECTURE™ ============ */
.svc-architecture { background:var(--bg); }
.svc-architecture-head { text-align:center; max-width:680px; margin:0 auto 64px; }
.svc-architecture-head .eyebrow { justify-content:center; }
.svc-architecture-head h2 {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(2rem,3.6vw,3rem); line-height:1.1;
  letter-spacing:-.025em; color:var(--ink); margin:18px 0 18px;
}
.svc-architecture-head p { font-size:1.05rem; line-height:1.8; color:var(--muted); }
.svc-architecture-flow {
  display:flex; align-items:stretch; justify-content:center; gap:0;
}
.svc-arch-block {
  flex:1; max-width:280px; background:#fff; border:1px solid var(--line);
  border-radius:28px; padding:38px 32px; text-align:center;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.svc-arch-block:hover { transform:translateY(-5px); box-shadow:0 20px 44px rgba(7,62,129,.1); }
.svc-arch-block-num {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1.1rem;
  color:var(--red); display:block; margin-bottom:14px;
}
.svc-arch-block h3 {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1.45rem;
  color:var(--ink); letter-spacing:-.01em; margin-bottom:10px;
}
.svc-arch-block p { font-size:.9rem; line-height:1.65; color:var(--muted); }
.svc-arch-block-result { background:var(--blue); border-color:var(--blue); }
.svc-arch-block-result .svc-arch-block-num { color:rgba(255,255,255,.7); }
.svc-arch-block-icon { display:inline-flex; align-items:center; justify-content:center; height:18px; }
.svc-arch-block-icon svg { width:14px; height:16px; display:block; }
.svc-arch-block-result h3 { color:#fff; }
.svc-arch-block-result p { color:rgba(255,255,255,.75); }
.svc-arch-connector {
  align-self:center; width:34px; height:1.5px; margin:0 16px;
  background:rgba(7,62,129,.22); position:relative; flex-shrink:0;
}
.svc-arch-connector::after {
  content:''; position:absolute; right:0; top:50%;
  width:7px; height:7px; border-top:1.5px solid rgba(7,62,129,.22);
  border-right:1.5px solid rgba(7,62,129,.22);
  transform:translateY(-50%) rotate(45deg);
}
.svc-arch-connector-final { background:var(--red); }
.svc-arch-connector-final::after { border-top-color:var(--red); border-right-color:var(--red); }

/* ============ SECTION 7 — PROOF IN PRACTICE ============ */
.svc-proof { background:#fff; }
.svc-proof-head { margin-bottom:54px; }
.svc-proof-head h2 {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(2rem,3.4vw,2.8rem); letter-spacing:-.02em;
  color:var(--ink); margin-top:14px;
}
.svc-proof-list { display:flex; flex-direction:column; gap:26px; }
.svc-proof-card {
  display:grid; grid-template-columns:0.9fr 1.1fr; align-items:stretch;
  border:1px solid var(--line); border-radius:36px; overflow:hidden;
  text-decoration:none; background:var(--bg);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
}
.svc-proof-card:hover {
  transform:translateY(-4px); border-color:rgba(7,62,129,.16);
  box-shadow:0 26px 60px rgba(7,62,129,.1);
}
.svc-proof-frame { min-height:280px; position:relative; background-size:cover; background-position:center; }
.svc-proof-build    { background:var(--blue) url('../assets/images/work-identity-v.jpg') center/cover no-repeat; }
.svc-proof-maintain { background:var(--ink)  url('../assets/images/work-social-v.jpg')   center/cover no-repeat; }
.svc-proof-amplify  { background:var(--red)  url('../assets/images/work-motion-v.jpg')   center/cover no-repeat; }
/* subtle brand-tinted wash for cohesion (kept light so the photo stays vibrant) */
.svc-proof-frame::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(125deg, rgba(7,62,129,.22), rgba(6,16,32,0) 60%);
}
.svc-proof-info { padding:48px 52px; align-self:center; }
.svc-proof-tag {
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin-bottom:16px;
}
.svc-proof-info h3 {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1.7rem;
  color:var(--ink); letter-spacing:-.02em; margin-bottom:14px;
}
.svc-proof-info p { font-size:.98rem; line-height:1.8; color:var(--muted); margin-bottom:22px; max-width:420px; }
.svc-proof-link { font-weight:700; font-size:.92rem; color:var(--blue); transition:color .3s ease; }
.svc-proof-card:hover .svc-proof-link { color:var(--red); }

/* ============ SECTION 9 — WHY CHOOSE 8D ============ */
.svc-why { background:var(--bg); }
.svc-why-head { margin-bottom:56px; }
.svc-why-head h2 {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(2rem,3.4vw,2.8rem); letter-spacing:-.02em;
  color:var(--ink); margin-top:14px;
}
.svc-why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc-why-card {
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:28px; padding:40px 36px;
  transition:background .4s ease, transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease;
}
.svc-why-card:hover {
  background:var(--blue); border-color:var(--blue);
  transform:translateY(-8px); box-shadow:0 26px 54px rgba(7,62,129,.28);
}

/* icon morphs to play button on hover (homepage Approach pattern) */
.svc-why-icon {
  position:absolute; top:34px; right:34px;
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--blue);
  transition:border-color .4s ease;
}
.svc-why-card:hover .svc-why-icon { border-color:#fff; }
.svc-why-icon-default {
  position:absolute; width:21px; height:21px; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(1); color:var(--blue);
  transition:color .3s ease, opacity .3s ease, transform .3s ease;
}
.svc-why-card:hover .svc-why-icon-default { opacity:0; transform:translate(-50%,-50%) scale(.4); }
.svc-why-icon-play {
  position:absolute; width:14px; height:auto; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.4); opacity:0;
  transition:opacity .35s ease .1s, transform .35s ease .1s;
}
.svc-why-card:hover .svc-why-icon-play { opacity:1; transform:translate(-50%,-50%) scale(1); }

.svc-why-idx {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:.78rem;
  letter-spacing:.16em; color:var(--red); display:block; margin-bottom:10px;
  transition:color .35s ease;
}
.svc-why-card:hover .svc-why-idx { color:rgba(255,255,255,.55); }
.svc-why-card h3 {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1.3rem;
  color:var(--ink); letter-spacing:-.01em; margin-bottom:12px; padding-right:50px;
  transition:color .35s ease;
}
.svc-why-card:hover h3 { color:#fff; }
.svc-why-card p { font-size:.94rem; line-height:1.75; color:var(--muted); transition:color .35s ease; }
.svc-why-card:hover p { color:rgba(255,255,255,.82); }

/* ============ SECTION 10 — FINAL CTA ============ */
.svc-quote { background:var(--white); }

/* Final CTA now uses the global .cta-final component (style.css) */

/* ============ RESPONSIVE ============ */
@media (max-width:1200px){
  .svc-hero-layout { gap:56px; }
  .svc-perception-grid { gap:60px; }
  .svc-pillar-card { padding:60px 50px; }
}
@media (max-width:992px){
  .svc-hero { padding:170px 0 110px; }
  .svc-hero-layout { grid-template-columns:1fr; gap:60px; }
  .svc-engine { max-width:360px; }
  .svc-perception-grid { grid-template-columns:1fr; gap:50px; }
  .svc-perception-copy p,
  .svc-perception-copy h2 { max-width:none; }
  .svc-flow { max-width:420px; margin:0 auto; }
  .svc-architecture-flow { flex-direction:column; align-items:center; gap:0; }
  .svc-arch-block { max-width:440px; width:100%; }
  .svc-arch-connector {
    width:1.5px; height:30px; align-self:center; margin:14px 0;
  }
  .svc-arch-connector::after {
    right:auto; left:50%; top:auto; bottom:0;
    border-top:none; border-right:1.5px solid rgba(7,62,129,.22);
    border-bottom:1.5px solid rgba(7,62,129,.22);
    transform:translateX(-50%) rotate(45deg);
  }
  .svc-arch-connector-final::after { border-right-color:var(--red); border-bottom-color:var(--red); }
  .svc-proof-card { grid-template-columns:1fr; }
  .svc-proof-frame { min-height:200px; }
  .svc-why-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .svc-pillar-card { padding:48px 32px; border-radius:28px; }
  .svc-anim { width:80px; height:80px; top:34px; right:32px; }
  .svc-service-list { grid-template-columns:1fr; gap:32px; }
  .svc-flagship { padding:38px 32px; }
  .svc-proof-info { padding:40px 34px; }
}
@media (max-width:576px){
  .svc-hero { padding:150px 0 90px; }
  .svc-engine { max-width:300px; }
  .svc-engine-lbl { font-size:.66rem; }
  .svc-why-grid { grid-template-columns:1fr; }
  .svc-flow-h { gap:6px 0; }
  .svc-pillar-card { padding:40px 24px; }
  .svc-anim { display:none; }
}