/* services: rules only this page uses, plus overrides of site.css. */

.btn-outline-navy, .tx-btn-outline-navy .elementor-button{ margin-top:36px; padding:.95rem 1.8rem; font-size:.98rem; }
.page-hero-inner-center{ max-width:720px; }
.page-hero-inner-center h1 .highlight{ background:linear-gradient(100deg,var(--navy) 0%,var(--cyan) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero-sub{ margin:22px auto 0; max-width:580px; }
.page-hero-support{ margin:14px auto 0; max-width:560px; }
.page-hero-actions{ margin-top:30px; justify-content:center; }
.page-hero-actions .btn-primary, .page-hero-actions .btn-outline-navy, .page-hero-actions .tx-btn-primary .elementor-button, .page-hero-actions .tx-btn-outline-navy .elementor-button{ display:inline-flex; align-items:center; justify-content:center; padding:1rem 2.1rem; font-size:1rem; line-height:1; margin-top:0; box-sizing:border-box; }
.page-hero-actions .btn-primary, .page-hero-actions .tx-btn-primary .elementor-button{ border:1.5px solid transparent; }
.page-hero-actions .btn-outline-navy, .page-hero-actions .tx-btn-outline-navy .elementor-button{ border-width:1.5px; }
.page-hero .wave-divider{ position:relative; z-index:2; margin-top:clamp(30px,6vw,70px); line-height:0; }
.page-hero .wave-divider svg{ width:100%; height:auto; display:block; }
@media (max-width:480px){
  .page-hero-actions{ margin-top:26px; gap:14px; flex-wrap:wrap; }
}
.svc-list{ background:#fff; }
.svc-block{ padding:clamp(56px,7vw,88px) clamp(20px,4vw,64px); }
.svc-block:nth-child(even){ background:#F6FAFF; }
.svc-inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center; }
.svc-block:nth-child(even) .svc-visual{ order:2; }
.svc-block:nth-child(even) .svc-content{ order:1; }
.svc-num{ font-family:"Sora",sans-serif; font-weight:800; font-size:.82rem; letter-spacing:.14em; color:var(--cyan); margin-bottom:12px; }
.svc-content h2{ font-family:"Sora",sans-serif; font-weight:800; letter-spacing:-.01em; line-height:1.2; font-size:clamp(1.6rem,2.8vw,2.05rem); color:var(--navy); margin-bottom:14px; }
.svc-content > p, .svc-content > .elementor-widget > p{ font-size:1rem; line-height:1.75; color:var(--body-text); margin-bottom:24px; max-width:540px; }
.svc-includes{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:11px 20px; }
.svc-includes li{ display:flex; align-items:flex-start; gap:10px; padding:5px 8px 5px 4px; border-radius:9px; font-size:.92rem; font-weight:600; color:var(--navy); line-height:1.45; transition:transform .28s ease, background .28s ease; }
.svc-includes li:hover{ transform:translateX(5px); background:rgba(43,163,255,.07); }
.svc-visual{ position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.svc-visual-ground-glow-block{ position:absolute; left:50%; bottom:2%; width:70%; height:60px; transform:translateX(-50%); background:radial-gradient(ellipse at center, rgba(43,163,255,.32) 0%, rgba(43,163,255,0) 72%); filter:blur(6px); z-index:0; }
.svc-visual-img, .tx-svc-visual-img img{ position:relative; z-index:1; width:88%; height:auto; max-height:100%; object-fit:contain; filter:drop-shadow(0 34px 42px rgba(10,30,77,.28)); transform:translateY(0) scale(1); transition:transform .55s cubic-bezier(.2,.8,.2,1), filter .55s ease; }
.tx-svc-media-widget, .tx-svc-media-widget .elementor-widget-container{ width:100%; height:100%; }
.tx-service-media{ width:100%; height:100%; margin:0; }
.tx-service-media img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; border-radius:18px; box-shadow:0 24px 50px -30px rgba(10,30,77,.4); }
.svc-visual:hover .svc-visual-img, .svc-visual:hover .tx-svc-visual-img img{ transform:translateY(-10px) scale(1.05); filter:drop-shadow(0 46px 54px rgba(10,30,77,.34)); }
@media (max-width:900px){
  .svc-inner{ grid-template-columns:1fr; }
  .svc-block:nth-child(even) .svc-visual, .svc-block:nth-child(even) .svc-content{ order:initial; }
  .svc-visual{ max-width:420px; margin:0 auto; }
  .svc-visual:hover .svc-visual-img, .svc-visual:hover .tx-svc-visual-img img{ transform:translateY(-6px) scale(1.03); }
}
@media (max-width:560px){
  .svc-includes{ grid-template-columns:1fr; }
}
.process-intro{ text-align:center; max-width:640px; margin:0 auto clamp(46px,6vw,64px); }
.process-intro h2{ font-family:"Sora",sans-serif; font-weight:800; letter-spacing:-.01em; line-height:1.2; font-size:clamp(1.9rem,3.4vw,2.4rem); color:var(--navy); margin:8px 0 14px; }
.process-intro p:not(.eyebrow){ font-size:1.02rem; line-height:1.7; color:var(--body-text); }
.process-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.process-step{ position:relative; padding:30px 26px; border-radius:20px; background:#fff; border:1px solid rgba(10,30,77,.08); box-shadow:0 10px 26px -20px rgba(10,30,77,.2); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.process-step:hover{ transform:translateY(-6px); border-color:rgba(43,163,255,.32); box-shadow:0 26px 44px -22px rgba(10,30,77,.3); }
.process-step-num{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:linear-gradient(150deg,var(--navy),var(--navy-2)); color:#fff; font-family:"Sora",sans-serif; font-weight:700; font-size:.92rem; margin-bottom:16px; box-shadow:0 10px 20px -10px rgba(10,30,77,.45); transition:transform .35s ease; }
.process-step:hover .process-step-num{ transform:scale(1.08) rotate(-5deg); }
.process-step h3{ font-family:"Sora",sans-serif; font-weight:700; font-size:1.08rem; color:var(--navy); margin-bottom:9px; }
.process-step p{ font-size:.93rem; line-height:1.65; color:var(--body-text); }
@media (max-width:900px){
  .process-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .process-grid{ grid-template-columns:1fr; }
}
.tech-intro{ text-align:center; max-width:640px; margin:0 auto clamp(46px,6vw,64px); }
.tech-intro .eyebrow, .process-intro .eyebrow{ justify-content:center; }
.tech-intro h2{ font-family:"Sora",sans-serif; font-weight:800; letter-spacing:-.01em; line-height:1.2; font-size:clamp(1.9rem,3.4vw,2.4rem); color:var(--navy); margin:8px 0 14px; }
.tech-intro p:not(.eyebrow){ font-size:1.02rem; line-height:1.7; color:var(--body-text); }
.tech-card-icon{ width:60px; height:60px; border-radius:16px; }
.tech-card-icon svg{ width:26px; height:26px; }
.tech-card h4{ margin-bottom:4px; }
.tech-card-sub{ font-size:.85rem; margin-bottom:18px; line-height:1.5; }
.tech-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tech-tag{ padding:7px 13px; border-radius:999px; background:rgba(43,163,255,.06); border:1px solid rgba(43,163,255,.16); font-size:.82rem; font-weight:600; color:var(--navy); transition:background .25s ease, border-color .25s ease, transform .25s ease; }
.tech-card:hover .tech-tag{ border-color:rgba(43,163,255,.3); }
.tech-tag:hover{ background:rgba(43,163,255,.14); transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){
  .tech-card, .tech-card-icon, .tech-tag{ transition:none; }
}
.cta-section{ padding:clamp(64px,9vw,110px) clamp(20px,4vw,64px) clamp(90px,11vw,130px); }
.cta-inner .eyebrow{ display:flex; align-items:center; gap:10px; }
@media (prefers-reduced-motion:reduce){
  .svc-visual-img, .process-step, .process-step-num, .tech-card, .tech-card-icon, .tech-tag, .tx-svc-visual-img img{ transition:none; }
}
@media (max-width:480px){
  .page-hero-sub{ font-size:1rem; margin-top:16px; }
  .page-hero-support{ font-size:.92rem; margin-top:10px; }
}
@media (max-width:900px){
  .cta-section{ perspective:none; }
}
.svc-includes li::before{ content:""; width:16px; height:16px; flex-shrink:0; margin-top:2px; background-color:var(--cyan); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .3s cubic-bezier(.2,.85,.25,1), background-color .3s ease; }
.svc-includes li:hover::before{ transform:scale(1.35); background-color:var(--navy); }

/* [tx_service_ring]: six service icons on a tilted ring that turns; items stay facing the viewer. */
@property --spin{ syntax:"<angle>"; inherits:true; initial-value:0deg; }
.svc-ring{ position:relative; width:100%; max-width:540px; aspect-ratio:5/4; perspective:1100px; display:flex; align-items:center; justify-content:center; --r:clamp(140px,16vw,200px); }
.svc-ring-track{ position:relative; list-style:none; margin:0; padding:0; width:0; height:0; transform-style:preserve-3d; transform:rotateX(-16deg) rotateY(var(--spin)); animation:svc-spin 36s linear infinite; }
.svc-ring:hover .svc-ring-track, .svc-ring:focus-within .svc-ring-track{ animation-play-state:paused; }
@keyframes svc-spin{ to{ --spin:360deg; } }
/* The orbit, drawn in the ring's own plane so it depth-sorts with the icons. */
.svc-ring-track::before{ content:""; position:absolute; left:calc(-1 * var(--r)); top:calc(-1 * var(--r)); width:calc(2 * var(--r)); height:calc(2 * var(--r)); border-radius:50%; border:2px dashed rgba(43,163,255,.6); background:radial-gradient(circle, rgba(43,163,255,.22), rgba(43,163,255,.06) 60%, transparent 72%); transform:rotateX(90deg); }
.svc-ring-track li{ position:absolute; left:0; top:0; transform-style:preserve-3d; transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--r)) rotateY(calc(-1 * (var(--spin) + var(--i) * 60deg))); --face:cos(calc(var(--spin) + var(--i) * 60deg)); opacity:calc(.45 + .55 * (var(--face) + 1) / 2); }
.svc-ring-item{ position:absolute; left:0; top:0; transform:translate(-50%,-50%) scale(calc(.8 + .2 * (var(--face) + 1) / 2)); display:grid; justify-items:center; gap:10px; text-decoration:none; }
.svc-ring-item .tech-card-icon{ width:64px; height:64px; border-radius:18px; }
.svc-ring-label{ font-family:"Sora",sans-serif; font-weight:700; font-size:.82rem; color:var(--navy); white-space:nowrap; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.85); border:1px solid var(--border); }
.svc-ring-label{ opacity:clamp(0, calc(var(--face) * 2.2 + .5), 1); }
.svc-ring-item:hover .icon3d-rig, .svc-ring-item:focus-visible .icon3d-rig{ transform:rotateX(4deg) rotateY(-12deg); }
.svc-ring-item:hover .svc-ring-label, .svc-ring-item:focus-visible .svc-ring-label{ border-color:var(--cyan); color:var(--cyan); }
.svc-ring-item:focus-visible{ outline:none; } .svc-ring-item:focus-visible .svc-ring-label{ outline:2px solid var(--cyan); outline-offset:2px; }
.svc-ring::after{ content:""; position:absolute; left:50%; bottom:12%; width:70%; height:46px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse, rgba(43,163,255,.4), transparent 70%); filter:blur(6px); z-index:-2; }
@media (max-width:900px){ .svc-ring{ max-width:360px; aspect-ratio:4/3; --r:118px; } .svc-ring-item .tech-card-icon{ width:52px; height:52px; } }
@media (prefers-reduced-motion:reduce){ .svc-ring-track{ animation:none; --spin:20deg; } }

/* Six service panels: same style, different colour, angle and timing, so they don't read as one template. */
.svc-block:nth-child(1) .icon3d--lg{ --svc-a:#123072; --svc-b:#0A1E4D; --svc-glow:43,163,255; --tilt:-1; }
.svc-block:nth-child(2) .icon3d--lg{ --svc-a:#0f4a6e; --svc-b:#08263f; --svc-glow:56,198,224; --tilt:1; }
.svc-block:nth-child(3) .icon3d--lg{ --svc-a:#262f7a; --svc-b:#0e1240; --svc-glow:124,140,255; --tilt:-1; }
.svc-block:nth-child(4) .icon3d--lg{ --svc-a:#0e5486; --svc-b:#062c52; --svc-glow:124,201,255; --tilt:1; }
.svc-block:nth-child(5) .icon3d--lg{ --svc-a:#163d6b; --svc-b:#0a1e3d; --svc-glow:70,215,190; --tilt:-1; }
.svc-block:nth-child(6) .icon3d--lg{ --svc-a:#2a2a72; --svc-b:#0c0f38; --svc-glow:170,140,255; --tilt:1; }
.svc-block .icon3d--lg{ background:radial-gradient(70% 70% at 50% 35%, rgba(var(--svc-glow),.45), transparent 70%), linear-gradient(150deg,var(--svc-a),var(--svc-b) 55%,#041024); }
.svc-block .icon3d--lg::after{ background:radial-gradient(ellipse, rgba(var(--svc-glow),.55), transparent 70%); }
.svc-block:nth-child(2) .icon3d--lg .icon3d-rig{ animation-duration:8.5s; animation-delay:-3s; }
.svc-block:nth-child(3) .icon3d--lg .icon3d-rig{ animation-duration:6.2s; animation-delay:-5s; }
.svc-block:nth-child(4) .icon3d--lg .icon3d-rig{ animation-duration:9s; animation-delay:-1.5s; }
.svc-block:nth-child(5) .icon3d--lg .icon3d-rig{ animation-duration:7.4s; animation-delay:-6s; }
.svc-block:nth-child(6) .icon3d--lg .icon3d-rig{ animation-duration:8s; animation-delay:-2.2s; }
/* Where supported, each icon turns as its panel scrolls past instead of swaying on a timer. */
@supports (animation-timeline: view()){
  .svc-block .icon3d--lg .icon3d-rig{ animation:svc-turn linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; animation-delay:0s; }
  @keyframes svc-turn{ from{ transform:rotateX(-6deg) rotateY(calc(var(--tilt) * -16deg)); } to{ transform:rotateX(5deg) rotateY(calc(var(--tilt) * 16deg)); } }
}

/* Process: number coins that flip and light up in order as the steps scroll in. */
.process-grid{ perspective:1000px; }
.process-step-num{ position:relative; background:linear-gradient(150deg,#c9d6ea,#aebfd9); color:transparent; box-shadow:inset 0 -3px 0 rgba(10,30,77,.18), 0 8px 14px -8px rgba(10,30,77,.35); transform:rotateY(-180deg); transition:transform .9s cubic-bezier(.2,.8,.2,1), background .6s ease, box-shadow .6s ease; transition-delay:var(--d,0s); }
.process-step.in-view .process-step-num{ transform:none; color:#fff; background:linear-gradient(150deg,var(--navy),var(--navy-2)); box-shadow:inset 0 -3px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.12), 0 0 0 5px rgba(43,163,255,.14), 0 10px 20px -8px rgba(43,163,255,.55); }
.process-step::after{ content:""; position:absolute; left:84px; right:26px; top:51px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--cyan),rgba(43,163,255,.08)); transform:scaleX(0); transform-origin:left; transition:transform .9s ease; transition-delay:calc(var(--d,0s) + .35s); }
.process-step.in-view::after{ transform:scaleX(1); }
.process-step:nth-child(2){ --d:.12s; } .process-step:nth-child(3){ --d:.24s; } .process-step:nth-child(4){ --d:.36s; } .process-step:nth-child(5){ --d:.48s; } .process-step:nth-child(6){ --d:.6s; }
.process-step.in-view:hover .process-step-num{ transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .process-step-num{ transform:none; transition:none; color:#fff; } .process-step::after{ transition:none; } }
