:root{
    --navy:#0B1E3D; --blue:#1657C4; --blue-deep:#0E3E93; --blue-tint:#EAF1FC;
    --ink:#10192B; --gray:#5B6474; --line:#DCE4F2; --white:#FFFFFF;
    --radius:10px;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *{box-sizing:inherit; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top:100px;}
  body{font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--white); line-height:1.6; overflow-x:hidden;}
  h1,h2,h3{font-family:'Inter',system-ui,sans-serif; font-weight:700; line-height:1.15; letter-spacing:-0.01em;}
  img{max-width:100%;}
  a{color:inherit;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  section{padding:96px 0;}
  @media (max-width:640px){ section{padding:64px 0;} }

  /* Header */
  header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px);}
  .nav{display:flex; align-items:center; justify-content:space-between; height:92px;}
  .logo{display:flex; align-items:center;}
  .logo a{display:flex; align-items:center;}
  .logo img{height:58px; width:auto; display:block; image-rendering:auto;}
  footer .logo img{height:50px;}
  .nav-links{display:none; gap:34px; font-size:.95rem; font-weight:500;}
  .nav-links a{text-decoration:none; color:var(--gray); transition:color .2s;}
  .nav-links a:hover{color:var(--navy);}
  a.nav-cta{display:none;}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:8px; font-weight:600; font-size:.95rem; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;}
  button.btn{font-family:inherit; line-height:inherit;}
  .btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  .btn-primary{background:var(--blue); color:#fff;}
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(22,87,196,.55);}
  .btn-ghost{background:transparent; color:var(--navy); border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--blue);}
  .btn-light{background:#fff; color:var(--blue-deep);}
  .btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}
  @media (min-width:860px){ a.nav-cta{display:inline-flex;} .nav-links{display:flex;} }
  @media (max-width:640px){
    .nav{height:76px;}
    .logo img{height:46px;}
  }
  @media (min-width:860px){ .burger{display:none;} }

  /* Hero */
  .hero{position:relative; min-height:92vh; display:flex; align-items:center; background:linear-gradient(180deg,#0B1E3D 0%,#0E2A57 55%,#0B1E3D 100%); overflow:hidden; padding:130px 0 80px;}
  @media (max-width:640px){ .hero{min-height:auto; padding:64px 0 56px;} }
  #heroCanvas{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; opacity:0; animation:canvasFadeIn 1.4s ease .15s forwards;}
  @keyframes canvasFadeIn{ to{opacity:1;} }
  @media (prefers-reduced-motion:reduce){ #heroCanvas{animation:none; opacity:1;} }
  .hero-scrim{position:absolute; inset:0; background:linear-gradient(100deg, rgba(11,30,61,.95) 0%, rgba(11,30,61,.85) 30%, rgba(11,30,61,.4) 60%, rgba(11,30,61,.6) 100%); pointer-events:none;}
  .hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr; max-width:760px;}
  .eyebrow{font-size:.85rem; font-weight:600; color:#8FB4F5; margin-bottom:18px; letter-spacing:.02em;}
  .hero h1{font-size:clamp(2.3rem,5vw,3.8rem); font-weight:700; color:#fff; max-width:16ch;}
  .hero p{margin-top:22px; font-size:1.2rem; color:#C7D4EE; max-width:46ch;}
  .hero-actions{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;}
  .hero-reveal{opacity:0; transform:translateY(14px); animation:reveal .7s ease forwards;}
  .hero-reveal.d1{animation-delay:.05s;} .hero-reveal.d2{animation-delay:.55s;} .hero-reveal.d3{animation-delay:.72s;}
  @keyframes reveal{ to{opacity:1; transform:none;} }
  @media (prefers-reduced-motion:reduce){ .hero-reveal{animation:none; opacity:1; transform:none;} }
  .hero h1 .word{display:inline-block; opacity:0; transform:translateY(16px); animation:wordIn .6s cubic-bezier(.22,.9,.32,1) forwards;}
  @media (prefers-reduced-motion:reduce){ .hero h1 .word{animation:none; opacity:1; transform:none;} }
  @keyframes wordIn{ to{opacity:1; transform:none;} }

  /* Section headings */
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-head h2{font-size:clamp(1.6rem,3vw,2.2rem); color:var(--navy); font-weight:700;}
  .section-head p{margin-top:14px; color:var(--gray); font-size:1.05rem;}
  .tint{background:var(--blue-tint);}

  /* Services */
  /* Real gaps between independent cards (rather than shared hairlines inside
     a clipped container) so a lifted card's shadow has room to breathe
     without being cropped by the grid's own edges or touching its neighbors. */
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media (max-width:860px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .services-grid{grid-template-columns:1fr;} }
  .service{background:#fff; padding:34px 30px; position:relative; border-radius:22px; box-shadow:0 2px 10px -4px rgba(11,30,61,.1); transition:transform .3s ease, box-shadow .3s ease;}
  .service[data-href]{cursor:pointer;}
  .service:hover, .service:focus-within{
    transform:translateY(-6px);
    box-shadow:0 26px 40px -22px rgba(11,30,61,.28), 0 10px 18px -10px rgba(11,30,61,.12);
  }
  .service svg{width:30px; height:30px; color:var(--blue); display:block; transition:transform .28s ease;}
  .service:hover svg{transform:translate(2px,-3px);}
  .service h3{margin-top:18px; font-size:1.08rem; color:var(--navy);}
  .service p{margin-top:8px; color:var(--gray); font-size:.95rem;}
  .service .link{display:inline-flex; align-items:center; gap:0; margin-top:14px; font-size:.9rem; font-weight:600; color:var(--blue-deep); text-decoration:none;}
  .service .link .arrow{display:inline-block; opacity:0; max-width:0; overflow:hidden; transform:translateX(-4px); transition:opacity .25s ease, transform .25s ease, max-width .25s ease, margin-left .25s ease;}
  .service:hover .link .arrow, .service:focus-within .link .arrow{opacity:1; transform:translateX(0); max-width:20px; margin-left:6px;}
  @media (prefers-reduced-motion:reduce){
    .service, .service svg, .service .link .arrow{transition:none;}
    .service:hover{transform:none;}
  }

  /* Projects */
  .badge{display:inline-block; font-size:.75rem; font-weight:600; color:var(--blue-deep); background:var(--blue-tint); padding:4px 10px; border-radius:100px;}
  .projects-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
  @media (max-width:800px){ .projects-grid{grid-template-columns:1fr;} }
  .project{border:1px solid var(--line); border-radius:14px; padding:30px; display:flex; flex-direction:column; gap:10px;}
  .project .cat{font-size:.8rem; color:var(--gray); font-weight:500;}
  .project h3{color:var(--navy); font-size:1.2rem; margin-top:2px;}
  .project dl{margin-top:10px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.9rem;}
  .project dt{color:var(--gray); font-weight:600;}
  .project dd{color:var(--ink);}
  .demo-note{margin-top:36px; font-size:.9rem; color:var(--gray); border-left:3px solid var(--blue); padding-left:14px;}

  /* Why */
  .why-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:24px;}
  @media (max-width:900px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }
  .why-item{padding:26px 4px; border-top:2px solid var(--blue);}
  .why-item h3{font-size:1.02rem; color:var(--navy);}
  .why-item p{margin-top:8px; font-size:.9rem; color:var(--gray);}

  /* Process */
  .process{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; counter-reset:step;}
  @media (max-width:900px){ .process{grid-template-columns:1fr; gap:0;} }
  .step{position:relative; padding:24px 0 24px 0; border-top:1px solid var(--line);}
  @media (min-width:900px){ .step{border-top:none; border-left:1px solid var(--line); padding:0 0 0 20px;} }
  .step .num{font-weight:800; color:var(--blue); font-size:1.4rem;}
  .step h3{margin-top:10px; font-size:1rem; color:var(--navy);}
  .step p{margin-top:6px; font-size:.88rem; color:var(--gray);}

  /* Transformation band */
  .flow{display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:8px;}
  .flow span.step-pill{background:#fff; border:1px solid var(--line); padding:10px 18px; border-radius:100px; font-size:.9rem; font-weight:600; color:var(--navy);}
  .flow .arrow{color:var(--blue); font-weight:700;}
  .ai-points{margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @media (max-width:760px){ .ai-points{grid-template-columns:1fr 1fr;} }
  @media (max-width:480px){ .ai-points{grid-template-columns:1fr;} }
  .ai-points li{list-style:none; background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; font-size:.9rem; color:var(--ink);}

  /* Testimonials */
  .testi-empty{border:1px dashed var(--line); border-radius:14px; padding:44px; text-align:center; color:var(--gray);}

  /* Final CTA */
  .cta-final{background:var(--navy); color:#fff; border-radius:20px; padding:64px 48px; text-align:center; margin:0 28px;}
  @media (max-width:640px){ .cta-final{padding:44px 26px; border-radius:14px;} }
  .cta-final h2{color:#fff; font-size:clamp(1.6rem,3.4vw,2.3rem);}
  .cta-final p{margin-top:14px; color:#C7D4EE; max-width:48ch; margin-left:auto; margin-right:auto;}
  .cta-final .hero-actions{justify-content:center; margin-top:30px;}

  /* Contact */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
  @media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:6px;}
  .field input, .field select, .field textarea{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:.95rem; background:#fff;}
  .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue);}
  .field textarea{resize:vertical; min-height:110px;}
  .hp{position:absolute; left:-9999px;}
  .contact-info h3{color:var(--navy); font-size:1rem; margin-bottom:6px;}
  .contact-info .row{display:flex; gap:10px; align-items:center; margin-top:14px; font-size:.95rem;}
  .contact-info svg{width:18px; height:18px; color:var(--blue);}
  #form-status{margin-top:12px; font-size:.9rem; color:var(--blue-deep);}

  /* Footer */
  footer{background:#F5F8FE; border-top:1px solid var(--line); padding:56px 0 30px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
  @media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
  footer h4{font-size:.85rem; color:var(--navy); margin-bottom:14px;}
  footer a{display:block; color:var(--gray); text-decoration:none; font-size:.92rem; margin-bottom:10px;}
  footer a:hover{color:var(--blue-deep);}
  @media (max-width:640px){ footer{padding-bottom:96px;} }
  .footer-bottom{margin-top:44px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.85rem; color:var(--gray);}

  /* ---- Service pages (routed via #/services/<slug>) ---- */
  #page-service{display:none;}
  #page-service:not([hidden]){display:block;}

  .service-hero{position:relative; min-height:66vh; display:flex; align-items:center; background:linear-gradient(135deg,#0B1E3D 0%,#123367 65%,#0B1E3D 100%); overflow:hidden; padding:150px 0 64px;}
  @media (max-width:640px){ .service-hero{min-height:auto; padding:56px 0 48px;} }
  .service-hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;}
  @media (max-width:960px){ .service-hero-grid{grid-template-columns:1fr;} }
  .service-hero-visual{display:flex; justify-content:center; align-items:center;}
  .svc-scene-box{width:100%; max-width:540px; aspect-ratio:4/3;}
  .svc-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; pointer-events:none;}
  @media (max-width:960px){ .service-hero-grid{gap:18px;} .svc-scene-box{max-width:460px;} }
  .service-back{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:#8FB4F5; text-decoration:none; margin-bottom:24px;}
  .service-back:hover{color:#fff;}
  .service-hero-content{max-width:640px;}
  .service-hero h1{font-size:clamp(2.1rem,4.6vw,3.2rem); color:#fff; max-width:18ch; font-weight:700;}
  .service-hero p{margin-top:20px; font-size:1.15rem; color:#C7D4EE; max-width:52ch;}

  .icon-badge{width:52px; height:52px; border-radius:15px; background:var(--blue-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .icon-badge svg{width:26px; height:26px; color:var(--blue); display:block;}
  .icon-badge.navy svg{color:var(--navy);}

  .challenges-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media (max-width:860px){ .challenges-grid{grid-template-columns:1fr;} }
  .challenge-card{background:var(--blue-tint); border-radius:20px; padding:28px 26px; box-shadow:0 2px 10px -6px rgba(11,30,61,.08);}
  .challenge-card .icon-badge{background:#fff;}
  .challenge-card h3{margin-top:18px; font-size:1rem; color:var(--navy);}
  .challenge-card p{margin-top:8px; font-size:.92rem; color:var(--gray);}

  .solutions-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media (max-width:860px){ .solutions-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .solutions-grid{grid-template-columns:1fr;} }
  .solution-card{background:#fff; border-radius:20px; padding:28px 26px; box-shadow:0 4px 16px -8px rgba(11,30,61,.12); transition:transform .3s ease, box-shadow .3s ease;}
  .solution-card:hover{transform:translateY(-6px); box-shadow:0 26px 40px -22px rgba(11,30,61,.3);}
  .solution-card h3{margin-top:18px; font-size:.98rem; color:var(--navy);}

  .faq-list{max-width:760px;}
  .faq-item{border-bottom:1px solid var(--line); padding:18px 0;}
  .faq-item summary{cursor:pointer; font-weight:600; color:var(--navy); font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+"; font-size:1.3rem; line-height:1; color:var(--blue); flex-shrink:0; transition:transform .25s ease;}
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{margin-top:12px; color:var(--gray); font-size:.95rem; max-width:64ch;}

  .related-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px;}
  .service-pill{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:100px; border:1px solid rgba(255,255,255,.35); font-size:.85rem; font-weight:600; color:#fff; text-decoration:none; transition:border-color .2s ease, background .2s ease;}
  .service-pill:hover{border-color:#fff; background:rgba(255,255,255,.1);}
  @media (prefers-reduced-motion:reduce){
    .solution-card{transition:none;}
    .solution-card:hover{transform:none;}
  }

  /* ================= Service pages — sections below the hero ================= */
  #page-service .service-hero{padding-bottom:104px;}
  @media (max-width:640px){ #page-service .service-hero{padding-bottom:84px;} }
  #page-service [id^="svc-"]{scroll-margin-top:96px;}
  .sv-section{padding:112px 0; position:relative;}
  @media (max-width:640px){ .sv-section{padding:72px 0;} }

  .sv-eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);}
  .sv-eyebrow::before{content:""; width:24px; height:2px; border-radius:2px; background:currentColor;}
  .sv-eyebrow.light{color:#8FB4F5;}
  .sv-h2{margin-top:14px; font-size:clamp(1.85rem,3.6vw,2.75rem); line-height:1.1; letter-spacing:-.025em; color:var(--navy); font-weight:800;}
  .sv-h2.light{color:#fff;}
  .sv-lead{margin-top:16px; font-size:1.08rem; color:var(--gray); max-width:52ch;}
  .sv-lead.light{color:#C7D4EE;}
  .sv-head-center{text-align:center; max-width:680px; margin:0 auto 60px;}
  .sv-head-center .sv-lead{margin-left:auto; margin-right:auto;}
  .sv-head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:52px; flex-wrap:wrap;}
  .sv-head-row .sv-lead{max-width:42ch; margin-top:0;}
  .sv-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:72px; align-items:start;}
  .sv-split-head{position:sticky; top:124px;}
  @media (max-width:960px){ .sv-split{grid-template-columns:1fr; gap:40px;} .sv-split-head{position:static;} }

  /* scroll reveal */

  /* jump bar overlapping the hero */
  .sv-jump-wrap{position:relative; z-index:5; margin-top:-44px;}
  .sv-jump{display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border-radius:20px; box-shadow:0 24px 48px -24px rgba(11,30,61,.38), 0 4px 14px -6px rgba(11,30,61,.12); overflow:hidden;}
  .sv-jump button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:14px; padding:22px 26px; font-weight:600; font-size:.95rem; color:var(--navy); position:relative; transition:background .25s ease, color .25s ease;}
  .sv-jump button + button::before{content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--line);}
  .sv-jump button span{width:34px; height:34px; border-radius:11px; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; font-size:.78rem; font-weight:800; transition:background .25s ease, color .25s ease, transform .25s ease;}
  .sv-jump button:hover{background:#F6F9FE;}
  .sv-jump button:hover span{background:var(--blue); color:#fff; transform:translateY(-2px);}
  .sv-jump button:focus-visible{outline:2px solid var(--blue); outline-offset:-4px;}
  @media (max-width:760px){
    .sv-jump{grid-template-columns:1fr 1fr;}
    .sv-jump button{padding:16px 16px; font-size:.86rem; gap:10px;}
    .sv-jump button:nth-child(3)::before{display:none;}
    .sv-jump button:nth-child(n+3){border-top:1px solid var(--line);}
    .sv-jump-wrap{margin-top:-36px;}
  }

  /* challenges */
  .sv-problems{display:flex; flex-direction:column; gap:18px;}
  .sv-problem{position:relative; display:flex; gap:20px; align-items:flex-start; background:#fff; border-radius:22px; padding:30px 30px 30px 28px; box-shadow:0 18px 40px -26px rgba(11,30,61,.35), 0 2px 8px -4px rgba(11,30,61,.08); overflow:hidden; transition:transform .35s ease, box-shadow .35s ease;}
  .sv-problem::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#1657C4,#8FB4F5);}
  .sv-problem:hover{transform:translateX(6px); box-shadow:0 26px 50px -26px rgba(11,30,61,.42);}
  .sv-problem-num{position:absolute; right:22px; top:10px; font-size:3.6rem; font-weight:800; letter-spacing:-.04em; color:var(--blue-tint); line-height:1; pointer-events:none;}
  .sv-problem-icon{flex-shrink:0; width:50px; height:50px; border-radius:15px; background:var(--blue-tint); color:var(--navy); display:grid; place-items:center;}
  .sv-problem-icon svg{width:24px; height:24px;}
  .sv-problem h3{position:relative; font-size:1.1rem; color:var(--navy); padding-right:60px;}
  .sv-problem p{position:relative; margin-top:6px; color:var(--gray); font-size:.95rem;}
  .sv-next{all:unset; box-sizing:border-box; cursor:pointer; margin-top:30px; display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:100px; background:var(--blue-tint); color:var(--blue-deep); font-weight:600; font-size:.92rem; transition:background .25s ease, color .25s ease;}
  .sv-next svg{width:18px; height:18px; animation:svBob 1.8s ease-in-out infinite;}
  .sv-next:hover{background:var(--blue); color:#fff;}
  .sv-next:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}
  @keyframes svBob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

  /* solutions (dark) */
  .sv-solutions{background:linear-gradient(160deg,#0B1E3D 0%,#10295A 55%,#0B1E3D 100%); overflow:hidden;}
  .sv-solutions-bg{position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(143,180,245,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(143,180,245,.07) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);}
  .sv-solutions::after{content:""; position:absolute; width:620px; height:620px; right:-180px; top:-220px; border-radius:50%; background:radial-gradient(circle, rgba(22,87,196,.45), transparent 65%); pointer-events:none;}
  .sv-solutions .wrap{position:relative; z-index:1;}
  .sv-sol-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media (max-width:960px){ .sv-sol-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .sv-sol-grid{grid-template-columns:1fr;} }
  .sv-sol{position:relative; padding:30px 28px 26px; border-radius:22px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); overflow:hidden; transition:transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;}
  .sv-sol::before{content:""; position:absolute; inset:0; background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(143,180,245,.18), transparent 60%); opacity:0; transition:opacity .35s ease; pointer-events:none;}
  .sv-sol:hover{transform:translateY(-6px); border-color:rgba(143,180,245,.45); background:rgba(22,87,196,.14); box-shadow:0 30px 50px -30px rgba(0,0,0,.6);}
  .sv-sol:hover::before{opacity:1;}
  .sv-sol-num{position:absolute; top:22px; right:24px; font-size:.8rem; font-weight:700; color:rgba(199,212,238,.45); letter-spacing:.06em;}
  .sv-sol-icon{position:relative; width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,#1657C4,#3E7BE6); color:#fff; display:grid; place-items:center; box-shadow:0 12px 24px -10px rgba(22,87,196,.8); transition:transform .35s ease;}
  .sv-sol-icon svg{width:26px; height:26px;}
  .sv-sol:hover .sv-sol-icon{transform:scale(1.08) rotate(-4deg);}
  .sv-sol h3{position:relative; margin-top:22px; color:#fff; font-size:1.08rem; font-weight:700;}
  .sv-sol-check{position:relative; margin-top:14px; display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; color:#8FB4F5;}
  .sv-sol-check svg{width:14px; height:14px;}
  .sv-flow{margin-top:44px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;}
  .sv-flow-pill{display:inline-flex; align-items:center; gap:10px; padding:11px 20px 11px 12px; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; font-weight:600; font-size:.92rem; animation:svPill 4s ease-in-out infinite; animation-delay:calc(var(--i) * 1s);}
  .sv-flow-pill b{width:26px; height:26px; border-radius:50%; background:rgba(143,180,245,.18); color:#8FB4F5; display:grid; place-items:center; font-size:.7rem;}
  .sv-flow-arrow{color:#8FB4F5; display:inline-flex;}
  .sv-flow-arrow svg{width:18px; height:18px;}
  @keyframes svPill{0%,20%,100%{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);} 8%,14%{background:rgba(22,87,196,.55); border-color:#8FB4F5;}}

  /* process timeline */
  .sv-timeline{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
  .sv-tl-line{position:absolute; top:34px; left:12.5%; right:12.5%; height:2px; background:var(--line); border-radius:2px;}
  .sv-tl-line span{position:absolute; inset:0; background:linear-gradient(90deg,#1657C4,#8FB4F5); transform-origin:left; transition:transform 1.8s cubic-bezier(.6,.1,.2,1) .2s; border-radius:2px;}
  .sv-tl-step{position:relative; text-align:center; padding:0 8px;}
  .sv-tl-node{position:relative; z-index:1; width:68px; height:68px; margin:0 auto; border-radius:22px; background:#fff; color:var(--blue); display:grid; place-items:center; box-shadow:0 16px 32px -16px rgba(11,30,61,.4), 0 0 0 6px #fff, 0 0 0 7px var(--blue-tint); transition:transform .35s ease, background .35s ease, color .35s ease;}
  .sv-tl-node svg{width:28px; height:28px;}
  .sv-tl-step:hover .sv-tl-node{transform:translateY(-4px); background:var(--blue); color:#fff;}
  .sv-tl-n{display:block; margin-top:24px; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);}
  .sv-tl-step h3{margin-top:6px; font-size:1.2rem; color:var(--navy);}
  .sv-tl-step p{margin-top:8px; color:var(--gray); font-size:.93rem; max-width:26ch; margin-left:auto; margin-right:auto;}
  @media (max-width:860px){
    .sv-timeline{grid-template-columns:1fr; gap:34px;}
    .sv-tl-line{left:33px; right:auto; top:34px; bottom:34px; width:2px; height:auto;}
    .sv-tl-line span{transform-origin:top;}
    .sv-tl-step{text-align:left; padding:0 0 0 94px; min-height:68px;}
    .sv-tl-node{position:absolute; left:0; top:0; margin:0;}
    .sv-tl-n{margin-top:4px;}
    .sv-tl-step p{margin-left:0;}
  }

  /* related work */
  .sv-work{background:var(--blue-tint);}
  .sv-projects{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
  .sv-projects.is-single{grid-template-columns:1fr;}
  @media (max-width:860px){ .sv-projects{grid-template-columns:1fr;} }
  .sv-project{background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 24px 50px -30px rgba(11,30,61,.4); display:flex; flex-direction:column; transition:transform .35s ease, box-shadow .35s ease;}
  .sv-project:hover{transform:translateY(-6px); box-shadow:0 34px 60px -30px rgba(11,30,61,.5);}
  .sv-project-band{position:relative; min-height:150px; padding:22px 24px; background:linear-gradient(135deg,#0B1E3D,#1657C4); color:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:18px; overflow:hidden;}
  .sv-project-band::after{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:16px 16px; -webkit-mask-image:linear-gradient(120deg, transparent 30%, #000); mask-image:linear-gradient(120deg, transparent 30%, #000); pointer-events:none;}
  .sv-project-badge{position:relative; z-index:1; align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:100px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);}
  .sv-project-icon{position:relative; z-index:1; width:56px; height:56px; border-radius:17px; background:rgba(255,255,255,.12); display:grid; place-items:center; backdrop-filter:blur(4px);}
  .sv-project-icon svg{width:28px; height:28px;}
  .sv-project-cat{position:relative; z-index:1; font-size:.85rem; font-weight:600; color:#C7D4EE;}
  .sv-project-body{padding:28px 28px 30px;}
  .sv-project-body h3{font-size:1.3rem; color:var(--navy);}
  .sv-project dl{margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:18px 22px;}
  .sv-project dt{font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue);}
  .sv-project dd{margin-top:4px; font-size:.92rem; color:var(--ink);}
  .sv-project.single{display:grid; grid-template-columns:300px 1fr;}
  .sv-project.single .sv-project-band{min-height:100%;}
  @media (max-width:760px){ .sv-project.single{display:flex;} .sv-project.single .sv-project-band{min-height:150px;} .sv-project dl{grid-template-columns:1fr;} }
  @media (max-width:600px){ .sv-problem{flex-direction:column; gap:16px; padding:26px 24px;} .sv-problem-num{font-size:2.6rem; top:16px; right:18px;} .sv-problem h3{padding-right:0;} }
  .sv-note{margin-top:22px; font-size:.86rem; color:var(--gray);}
  .sv-empty{background:#fff; border:2px dashed rgba(22,87,196,.25); border-radius:24px; padding:52px 28px; text-align:center; max-width:720px; margin:0 auto;}
  .sv-empty-icon{width:64px; height:64px; margin:0 auto; border-radius:20px; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center;}
  .sv-empty-icon svg{width:30px; height:30px;}
  .sv-empty h3{margin-top:20px; font-size:1.3rem; color:var(--navy);}
  .sv-empty p{margin:10px auto 26px; color:var(--gray); max-width:46ch;}

  /* why */
  .sv-why-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  @media (max-width:600px){ .sv-why-grid{grid-template-columns:1fr;} }
  .sv-why{background:#fff; border-radius:22px; padding:30px 28px; box-shadow:0 18px 40px -26px rgba(11,30,61,.32), 0 2px 8px -4px rgba(11,30,61,.06); transition:transform .35s ease, box-shadow .35s ease;}
  .sv-why:hover{transform:translateY(-6px); box-shadow:0 30px 50px -28px rgba(11,30,61,.42);}
  @media (min-width:601px){ .sv-why:nth-child(2n){margin-top:32px;} }
  .sv-why-icon{width:54px; height:54px; border-radius:16px; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; transition:background .35s ease, color .35s ease;}
  .sv-why-icon svg{width:26px; height:26px;}
  .sv-why:hover .sv-why-icon{background:var(--blue); color:#fff;}
  .sv-why h3{margin-top:20px; font-size:1.1rem; color:var(--navy);}
  .sv-why p{margin-top:8px; font-size:.94rem; color:var(--gray);}
  .sv-whysec{padding-bottom:140px;}

  /* faq */
  .sv-faqsec{background:var(--blue-tint);}
  .sv-help{margin-top:32px; display:flex; gap:16px; align-items:flex-start; background:#fff; border-radius:20px; padding:22px; box-shadow:0 18px 40px -28px rgba(11,30,61,.35); max-width:380px;}
  .sv-help-icon{flex-shrink:0; width:46px; height:46px; border-radius:14px; background:var(--blue); color:#fff; display:grid; place-items:center;}
  .sv-help-icon svg{width:22px; height:22px;}
  .sv-help h3{font-size:1rem; color:var(--navy);}
  .sv-help p{margin-top:4px; font-size:.9rem; color:var(--gray);}
  .sv-help-link{margin-top:10px; display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.9rem; color:var(--blue); text-decoration:none;}
  .sv-help-link svg{width:16px; height:16px; transition:transform .25s ease;}
  .sv-help-link:hover svg{transform:translateX(4px);}
  .sv-faq{display:flex; flex-direction:column; gap:14px;}
  .sv-faq-item{background:#fff; border-radius:18px; box-shadow:0 12px 30px -24px rgba(11,30,61,.4); transition:box-shadow .3s ease;}
  .sv-faq-item[open]{box-shadow:0 24px 44px -26px rgba(11,30,61,.45), inset 3px 0 0 var(--blue);}
  .sv-faq-item summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:22px 24px; font-weight:600; color:var(--navy); font-size:1rem;}
  .sv-faq-item summary::-webkit-details-marker{display:none;}
  .sv-faq-item summary:focus-visible{outline:2px solid var(--blue); outline-offset:-2px; border-radius:18px;}
  .sv-faq-item summary i{flex-shrink:0; position:relative; width:32px; height:32px; border-radius:50%; background:var(--blue-tint); transition:background .3s ease, transform .3s ease;}
  .sv-faq-item summary i::before, .sv-faq-item summary i::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; background:var(--blue); border-radius:2px; transition:transform .3s ease, background .3s ease;}
  .sv-faq-item summary i::after{transform:rotate(90deg);}
  .sv-faq-item[open] summary i{background:var(--blue); transform:rotate(180deg);}
  .sv-faq-item[open] summary i::before{background:#fff;}
  .sv-faq-item[open] summary i::after{transform:rotate(0); background:#fff;}
  .sv-faq-item p{padding:0 24px 22px; color:var(--gray); font-size:.96rem; max-width:62ch;}
  .sv-faq-item[open] p{animation:svFade .4s ease;}
  @keyframes svFade{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}

  /* final CTA + related services */
  .sv-cta{position:relative; overflow:hidden; border-radius:30px; padding:80px 40px; text-align:center; color:#fff; background:linear-gradient(135deg,#0B1E3D 0%,#123367 55%,#1657C4 130%); box-shadow:0 40px 80px -40px rgba(11,30,61,.6);}
  .sv-cta-orb{position:absolute; border-radius:50%; filter:blur(10px); pointer-events:none; animation:svOrb 12s ease-in-out infinite;}
  .sv-cta-orb.a{width:340px; height:340px; left:-110px; top:-140px; background:radial-gradient(circle, rgba(62,123,230,.55), transparent 65%);}
  .sv-cta-orb.b{width:420px; height:420px; right:-150px; bottom:-200px; background:radial-gradient(circle, rgba(143,180,245,.35), transparent 65%); animation-delay:-6s;}
  @keyframes svOrb{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,20px) scale(1.12);}}
  .sv-cta-inner{position:relative; z-index:1; max-width:640px; margin:0 auto;}
  .sv-cta-icon{width:66px; height:66px; margin:0 auto 24px; border-radius:20px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; color:#fff;}
  .sv-cta-icon svg{width:30px; height:30px;}
  .sv-cta h2{font-size:clamp(1.8rem,3.8vw,2.7rem); letter-spacing:-.02em; color:#fff; font-weight:800;}
  .sv-cta p{margin-top:16px; color:#C7D4EE; font-size:1.05rem;}
  @media (max-width:640px){ .sv-cta{padding:56px 22px; border-radius:24px;} }
  .sv-related{margin-top:64px;}
  .sv-related-grid{margin-top:22px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
  @media (max-width:700px){ .sv-related-grid{grid-template-columns:1fr;} }
  .sv-related-card{display:flex; align-items:center; gap:18px; padding:24px; border-radius:22px; background:#fff; text-decoration:none; box-shadow:0 18px 40px -26px rgba(11,30,61,.35), 0 2px 8px -4px rgba(11,30,61,.06); transition:transform .35s ease, box-shadow .35s ease;}
  .sv-related-card:hover{transform:translateY(-5px); box-shadow:0 28px 50px -26px rgba(11,30,61,.45);}
  .sv-related-icon{flex-shrink:0; width:54px; height:54px; border-radius:16px; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; transition:background .3s ease, color .3s ease;}
  .sv-related-icon svg{width:26px; height:26px;}
  .sv-related-card:hover .sv-related-icon{background:var(--blue); color:#fff;}
  .sv-related-text{flex:1; min-width:0;}
  .sv-related-text h3{font-size:1.05rem; color:var(--navy);}
  .sv-related-text p{margin-top:4px; font-size:.9rem; color:var(--gray);}
  .sv-related-arrow{flex-shrink:0; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); color:var(--blue); display:grid; place-items:center; transition:background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;}
  .sv-related-arrow svg{width:18px; height:18px;}
  .sv-related-card:hover .sv-related-arrow{background:var(--blue); border-color:var(--blue); color:#fff; transform:translateX(4px);}

  @media (prefers-reduced-motion: reduce){
    .sv-tl-line span{transform:none !important; transition:none !important;}
    .sv-next svg, .sv-flow-pill, .sv-cta-orb{animation:none !important;}
  }

  /* ---- solution branches (inside the dark "What MHSA provides" section) ---- */
  .sv-bnav-row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:-22px auto 72px; max-width:980px;}
  .sv-bnav{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:.88rem; font-weight:600; transition:background .25s ease, border-color .25s ease, transform .25s ease;}
  .sv-bnav span{width:28px; height:28px; border-radius:50%; background:rgba(143,180,245,.18); color:#8FB4F5; display:grid; place-items:center; font-size:.7rem; font-weight:800;}
  .sv-bnav:hover{background:rgba(22,87,196,.5); border-color:#8FB4F5; transform:translateY(-2px);}
  .sv-bnav:focus-visible{outline:2px solid #8FB4F5; outline-offset:3px;}
  .sv-branches{display:flex; flex-direction:column; gap:96px;}
  .sv-branch{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; scroll-margin-top:110px;}
  .sv-branch.flip .sv-branch-media{order:2;}
  .sv-branch-media{position:relative;}
  .sv-branch-media::before{content:""; position:absolute; inset:8% 10%; background:radial-gradient(circle, rgba(22,87,196,.55), transparent 70%); filter:blur(30px); z-index:0;}
  .sv-ill{position:relative; z-index:1; width:100%; height:auto; display:block; border-radius:26px; box-shadow:0 40px 80px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1); transition:transform .5s ease;}
  .sv-branch:hover .sv-ill{transform:translateY(-6px);}
  .sv-branch-num{display:inline-flex; align-items:center; gap:10px; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8FB4F5;}
  .sv-branch-num::before{content:""; width:24px; height:2px; border-radius:2px; background:currentColor;}
  .sv-branch h3{margin-top:14px; font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.15; letter-spacing:-.02em; color:#fff; font-weight:800;}
  .sv-branch-text > p{margin-top:14px; color:#C7D4EE; font-size:1.03rem; max-width:48ch;}
  .sv-branch-label{display:block; margin-top:28px; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(199,212,238,.6);}
  .sv-branch ul{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 22px;}
  .sv-branch li{display:flex; gap:10px; align-items:flex-start; color:#fff; font-size:.95rem; line-height:1.45;}
  .sv-branch li svg{flex-shrink:0; width:22px; height:22px; padding:4px; border-radius:50%; background:rgba(143,180,245,.18); color:#8FB4F5;}
  .sv-branch-link{margin-top:30px; display:inline-flex; align-items:center; gap:8px; color:#8FB4F5; font-weight:600; font-size:.95rem; text-decoration:none; transition:color .25s ease;}
  .sv-branch-link svg{width:18px; height:18px; transition:transform .25s ease;}
  .sv-branch-link:hover{color:#fff;}
  .sv-branch-link:hover svg{transform:translateX(4px);}
  @media (max-width:960px){
    .sv-branch{grid-template-columns:1fr; gap:34px;}
    .sv-branch.flip .sv-branch-media{order:0;}
    .sv-branches{gap:72px;}
    .sv-bnav-row{margin:-20px auto 52px;}
  }
  @media (max-width:520px){ .sv-branch ul{grid-template-columns:1fr;} .sv-bnav{font-size:.82rem;} }

  /* illustration motion */
  .sv-ill .ill-orbit{transform-box:view-box; transform-origin:150px 186px; animation:svSpin 40s linear infinite;}
  @keyframes svSpin{to{transform:rotate(360deg);}}
  .sv-ill .ill-dash{animation:svDash 1.4s linear infinite;}
  @keyframes svDash{to{stroke-dashoffset:-20;}}
  .sv-ill .ill-pulse{transform-box:fill-box; transform-origin:center; animation:svPulseC 2.6s ease-out infinite;}
  @keyframes svPulseC{0%{transform:scale(1); opacity:.9;} 100%{transform:scale(1.55); opacity:0;}}
  .sv-ill .ill-float.a{animation:svFloatY 6s ease-in-out infinite;}
  .sv-ill .ill-float.b{animation:svFloatY 6s ease-in-out infinite; animation-delay:-3s;}
  @keyframes svFloatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
  .sv-ill .ill-bar{transform-box:fill-box; transform-origin:left center; transition:transform 1s ease; transition-delay:calc(.3s + var(--r) * .35s);}
  .sv-ill .ill-chk{transform-box:fill-box; transform-origin:center; transition:transform .45s cubic-bezier(.3,1.6,.5,1); transition-delay:calc(.55s + var(--r) * .35s);}
  @media (prefers-reduced-motion: reduce){
    .sv-ill .ill-orbit, .sv-ill .ill-dash, .sv-ill .ill-pulse, .sv-ill .ill-float.a, .sv-ill .ill-float.b{animation:none !important;}
    .sv-ill .ill-bar, .sv-ill .ill-chk{transform:none !important; transition:none !important;}
  }

  /* ================= Reveal (shared) ================= */
  [data-reveal]{transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0ms);}
  [data-reveal].rv-pre{opacity:0; transform:translateY(28px);}
  [data-reveal].rv-done{transition-delay:0ms; transition-duration:.35s;}
  .sv-branch[data-reveal].rv-pre{opacity:1; transform:none;}
  .sv-tl-line span{transform:scaleX(1);}
  .sv-timeline.rv-pre .sv-tl-line span{transform:scaleX(0);}
  .sv-tl-step{transition:opacity .7s ease, transform .7s ease; transition-delay:calc(var(--d,0ms) * 3);}
  .sv-timeline.rv-pre .sv-tl-step{opacity:0; transform:translateY(20px);}
  .sv-timeline[data-reveal].rv-pre{opacity:1; transform:none;}
  @media (max-width:860px){ .sv-tl-line span{transform:scaleY(1);} .sv-timeline.rv-pre .sv-tl-line span{transform:scaleY(0);} }
  .sv-branch.rv-pre .ill-bar{transform:scaleX(0);}
  .sv-branch.rv-pre .ill-chk{transform:scale(0);}
  @media (prefers-reduced-motion: reduce){ [data-reveal], .sv-tl-step{transition:none !important;} }

  /* ================= Homepage ================= */
  .hm-hero{padding-bottom:110px;}
  @media (max-width:640px){ .hm-hero{padding-bottom:84px;} }
  .hm-hero .service-hero-content{max-width:620px;}
  .hm-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem); max-width:15ch;}
  #page-home > section{scroll-margin-top:90px;}
  .hm-services{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  @media (max-width:960px){ .hm-services{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .hm-services{grid-template-columns:1fr;} }
  .hm-svc{position:relative; cursor:pointer; background:#fff; border-radius:24px; padding:30px 28px 26px; box-shadow:0 18px 40px -26px rgba(11,30,61,.35), 0 2px 8px -4px rgba(11,30,61,.08); display:flex; flex-direction:column; overflow:hidden; transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .35s ease, box-shadow .35s ease;}
  .hm-svc::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,#1657C4,#8FB4F5); transform:scaleX(0); transform-origin:left; transition:transform .45s ease;}
  .hm-svc:hover{transform:translateY(-8px); box-shadow:0 34px 60px -30px rgba(11,30,61,.5);}
  .hm-svc:hover::before{transform:scaleX(1);}
  .hm-svc-top{display:flex; justify-content:space-between; align-items:flex-start;}
  .hm-svc-icon{width:58px; height:58px; border-radius:18px; background:linear-gradient(135deg,#1657C4,#3E7BE6); color:#fff; display:grid; place-items:center; box-shadow:0 14px 26px -12px rgba(22,87,196,.8); transition:transform .35s ease;}
  .hm-svc-icon svg{width:28px; height:28px;}
  .hm-svc:hover .hm-svc-icon{transform:scale(1.08) rotate(-4deg);}
  .hm-svc-num{font-size:2.4rem; font-weight:800; color:var(--blue-tint); line-height:1; letter-spacing:-.04em;}
  .hm-svc h3{margin-top:22px; font-size:1.2rem; color:var(--navy);}
  .hm-svc > p{margin-top:8px; color:var(--gray); font-size:.95rem;}
  .hm-svc ul{list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid rgba(11,30,61,.07); display:flex; flex-direction:column; gap:9px;}
  .hm-svc li{display:flex; gap:10px; align-items:center; font-size:.88rem; color:var(--ink);}
  .hm-svc li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); flex-shrink:0;}
  .hm-svc-link{margin-top:auto; padding-top:22px; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; color:var(--blue); text-decoration:none;}
  .hm-svc-link svg{width:18px; height:18px; transition:transform .25s ease;}
  .hm-svc:hover .hm-svc-link svg{transform:translateX(5px);}
  .hm-flow{margin:-10px 0 56px;}
  .hm-center-link{margin-top:48px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap;}
  .hm-why .sv-why:last-child{grid-column:1/-1;}
  @media (min-width:861px){ .hm-timeline{grid-template-columns:repeat(5,1fr);} .hm-timeline .sv-tl-line{left:10%; right:10%;} }
  .hm-ctasec{padding-top:0;}
  .hm-contact{background:var(--blue-tint);}
  .hm-contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start;}
  @media (max-width:960px){ .hm-contact-grid{grid-template-columns:1fr; gap:40px;} }
  .hm-info{margin-top:32px; background:linear-gradient(135deg,#0B1E3D,#123367); color:#fff; border-radius:22px; padding:28px; box-shadow:0 30px 60px -34px rgba(11,30,61,.6);}
  .hm-info h3{color:#fff; font-size:1.1rem;}
  .hm-info .row{display:flex; gap:12px; align-items:center; margin-top:14px; font-size:.95rem; color:#E3ECFB; flex-wrap:nowrap; overflow-wrap:anywhere;}
  .hm-info svg{width:20px; height:20px; color:#8FB4F5; flex-shrink:0;}
  .hm-info .ph{color:rgba(199,212,238,.6); font-size:.8rem;}
  .hm-form{background:#fff; border-radius:26px; padding:36px; box-shadow:0 30px 60px -34px rgba(11,30,61,.45);}
  @media (max-width:600px){ .hm-form{padding:26px 20px;} }
  .hm-form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media (max-width:600px){ .hm-form-row{grid-template-columns:1fr; gap:0;} }
  .hm-form .field input, .hm-form .field select, .hm-form .field textarea{border-radius:12px; background:#F7FAFE; border:1px solid #E3EAF6; padding:13px 15px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
  .hm-form .field input:focus, .hm-form .field select:focus, .hm-form .field textarea:focus{background:#fff; outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(22,87,196,.12);}
  .hm-submit{width:100%; justify-content:center; padding:15px;}

  /* ---- header right group, language switch, back to top ---- */
  .nav-right{display:flex; align-items:center; gap:14px;}
  .lang-switch{display:inline-flex; padding:3px; border-radius:100px; background:var(--blue-tint);}
  .lang-switch button{all:unset; box-sizing:border-box; cursor:pointer; min-width:38px; padding:7px 10px; border-radius:100px; font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--blue-deep); text-align:center; transition:background .2s ease, color .2s ease;}
  .lang-switch button[aria-pressed="true"]{background:var(--blue); color:#fff; box-shadow:0 4px 10px -4px rgba(22,87,196,.6);}
  .lang-switch button:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  @media (max-width:640px){ .nav-right{gap:8px;} .lang-switch button{min-width:34px; padding:6px 8px;} }
  .footer-plain{display:block; color:var(--gray); font-size:.92rem; margin-bottom:10px;}
  /* Social links: round icon buttons that take the brand colour on hover. */
  .f-social{margin-top:18px;}
  .f-social h4{margin-bottom:12px;}
  .f-social-row{display:flex; gap:10px; flex-wrap:wrap;}
  .f-social-row a{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin:0; border-radius:12px; background:#fff; border:1px solid var(--line); color:var(--navy); transition:transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;}
  .f-social-row a svg{width:21px; height:21px; display:block;}
  .f-social-row a:hover{transform:translateY(-3px); color:#fff; border-color:transparent; box-shadow:0 12px 22px -12px rgba(11,30,61,.5);}
  .f-social-row a.is-li:hover{background:#0A66C2;}
  .f-social-row a.is-fb:hover{background:#1877F2;}
  .f-social-row a.is-ig:hover{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF);}
  .f-social-row a:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  @media (prefers-reduced-motion:reduce){ .f-social-row a{transition:none;} .f-social-row a:hover{transform:none;} }
  .hm-info a.row{color:#E3ECFB; text-decoration:none;}
  .hm-info a.row:hover{color:#fff; text-decoration:underline;}
  .to-top{all:unset; box-sizing:border-box; position:fixed; right:22px; bottom:22px; z-index:60; width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 16px 30px -12px rgba(11,30,61,.6); opacity:0; transform:translateY(16px) scale(.9); pointer-events:none; transition:opacity .3s ease, transform .3s ease, background .25s ease;}
  .to-top.show{opacity:1; transform:none; pointer-events:auto;}
  .to-top:hover{background:var(--blue);}
  .to-top:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}
  .to-top-ring{position:absolute; inset:0; width:100%; height:100%;}
  .to-top-arrow{position:relative; width:20px; height:20px; transition:transform .25s ease;}
  .to-top:hover .to-top-arrow{transform:translateY(-3px);}
  @media (max-width:640px){ .to-top{right:16px; bottom:16px; width:46px; height:46px;} }
  @media (prefers-reduced-motion: reduce){ .to-top{transition:none;} }

  /* ---- Featured real client project (screenshots live in this static stylesheet) ---- */
  .shot-cfp-1{background-image:url(/assets/img/665dae3761.webp); aspect-ratio:760/545;}
  .shot-cfp-2{background-image:url(/assets/img/a14b86f338.webp); aspect-ratio:768/250;}
  .sv-feature{grid-column:1/-1; display:grid; grid-template-columns:1.1fr .9fr; background:#fff; border-radius:26px; overflow:hidden; box-shadow:0 30px 60px -32px rgba(11,30,61,.45), 0 2px 8px -4px rgba(11,30,61,.08); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .35s ease, box-shadow .35s ease;}
  .sv-feature:hover{transform:translateY(-6px); box-shadow:0 40px 70px -32px rgba(11,30,61,.55);}
  .sv-feature-media{position:relative; padding:34px 30px; background:linear-gradient(135deg,#0B1E3D,#1657C4); overflow:hidden; display:flex; flex-direction:column; justify-content:center;}
  .sv-feature-media::after{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size:18px 18px; -webkit-mask-image:linear-gradient(120deg, transparent 35%, #000); mask-image:linear-gradient(120deg, transparent 35%, #000); pointer-events:none;}
  .sv-browser{position:relative; z-index:1; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -24px rgba(0,0,0,.6);}
  .sv-browser-bar{display:flex; align-items:center; gap:6px; padding:9px 12px; background:#EEF2F8;}
  .sv-browser-bar i{width:9px; height:9px; border-radius:50%; background:#C9D3E3;}
  .sv-browser-bar i:first-child{background:#F2A7A0;} .sv-browser-bar i:nth-child(2){background:#F4D08A;} .sv-browser-bar i:nth-child(3){background:#A6DDB0;}
  .sv-shot{display:block; width:100%; background-size:cover; background-position:top left; background-repeat:no-repeat;}
  .sv-browser.small{position:absolute; right:18px; bottom:18px; width:46%; z-index:2; border-radius:10px; transform:rotate(-2deg); transition:transform .4s ease;}
  .sv-feature:hover .sv-browser.small{transform:rotate(0) translateY(-6px);}
  .sv-browser.small .sv-browser-bar{padding:6px 9px;} .sv-browser.small .sv-browser-bar i{width:7px; height:7px;}
  .sv-feature-media .sv-browser.main{margin-bottom:48px; margin-right:12%;}
  .sv-feature-body{padding:34px 34px 32px;}
  .sv-feature-top{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
  .sv-badge-real{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:100px; background:var(--blue); color:#fff;}
  .sv-badge-real svg{width:14px; height:14px;}
  .sv-feature-cat{font-size:.8rem; font-weight:600; color:var(--gray); padding:6px 10px; border-radius:100px; background:var(--blue-tint);}
  .sv-feature h3{margin-top:18px; font-size:clamp(1.35rem,2.2vw,1.7rem); color:var(--navy); letter-spacing:-.015em;}
  .sv-feature-client{margin-top:6px; color:var(--gray); font-size:.95rem;}
  .sv-feature dl{margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:18px 22px;}
  .sv-feature dt{font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue);}
  .sv-feature dd{margin-top:4px; font-size:.92rem; color:var(--ink);}
  .sv-feature-caps{margin-top:22px; display:flex; flex-wrap:wrap; gap:8px;}
  .sv-feature-caps span{font-size:.8rem; font-weight:600; color:var(--blue-deep); background:var(--blue-tint); padding:6px 11px; border-radius:100px;}
  @media (max-width:960px){ .sv-feature{grid-template-columns:1fr;} }
  @media (max-width:600px){ .sv-feature-body{padding:26px 22px;} .sv-feature dl{grid-template-columns:1fr;} .sv-feature-media{padding:24px 18px;} .sv-browser.small{right:10px; bottom:10px;} }
  .sv-projects.hm-3{grid-template-columns:repeat(3,1fr);}
  .sv-projects.hm-3 .sv-project dl{grid-template-columns:1fr;}
  @media (max-width:960px){ .sv-projects.hm-3{grid-template-columns:1fr;} }

  .shot-paie-1{background-image:url(/assets/img/1b4a273f3b.webp); aspect-ratio:1000/433;}
  .shot-paie-2{background-image:url(/assets/img/73fee303ff.webp); aspect-ratio:480/433;}
  .sv-browser.small.narrow{width:32%;}
  .sv-feature + .sv-feature{margin-top:4px;}
  .sv-feature.flip{grid-template-columns:.9fr 1.1fr;}
  .sv-feature.flip .sv-feature-media{order:2;}
  @media (max-width:960px){ .sv-feature.flip{grid-template-columns:1fr;} .sv-feature.flip .sv-feature-media{order:0;} }

  .sv-stack{position:relative; z-index:1;}
  .sv-stack .sv-browser.small{right:-4%; bottom:-12%;}
  @media (max-width:600px){ .sv-stack .sv-browser.small{right:-2%; bottom:-10%;} }

  .shot-stock-1{background-image:url(/assets/img/1de61044ac.webp); aspect-ratio:1000/433;}
  .shot-stock-2{background-image:url(/assets/img/6e4c6d0c9c.webp); aspect-ratio:1000/433;}

  .shot-smma-1{background-image:url(/assets/img/3d9a6eafbd.webp); aspect-ratio:1000/436;}
  .shot-smma-2{background-image:url(/assets/img/436bea15ce.webp); aspect-ratio:760/454;}

  /* ---- "They trust us" logo strip ---- */
  .hm-trust{padding:76px 0 0;}
  .hm-trust-title{display:flex; align-items:center; justify-content:center; gap:16px; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); text-align:center;}
  .hm-trust-title::before, .hm-trust-title::after{content:""; flex:0 1 80px; height:1px; background:linear-gradient(90deg, transparent, rgba(11,30,61,.18));}
  .hm-trust-title::after{background:linear-gradient(270deg, transparent, rgba(11,30,61,.18));}
  .hm-trust-row{margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; gap:20px;}
  .hm-trust-logo{display:flex; align-items:center; justify-content:center; min-width:240px; padding:26px 40px; background:#fff; border-radius:20px; box-shadow:0 18px 40px -26px rgba(11,30,61,.35), 0 2px 8px -4px rgba(11,30,61,.06); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .35s ease, box-shadow .35s ease;}
  .hm-trust-logo:hover{transform:translateY(-4px); box-shadow:0 26px 50px -26px rgba(11,30,61,.45);}
  .hm-trust-logo img{display:block; height:40px; width:auto;}
  @media (max-width:600px){ .hm-trust{padding-top:60px;} .hm-trust-logo{min-width:0; padding:20px 28px;} .hm-trust-logo img{height:32px;} }

  /* ---- testimonials: trust strip + quote ---- */
  .hm-testisec .hm-trust{padding:0 0 64px;}
  .hm-testi-head{margin-bottom:40px;}
  .hm-quote{position:relative; max-width:860px; margin:0 auto; padding:52px 52px 40px; border-radius:28px; background:linear-gradient(135deg,#0B1E3D 0%,#123367 60%,#1657C4 140%); color:#fff; box-shadow:0 40px 80px -40px rgba(11,30,61,.6); overflow:hidden;}
  .hm-quote::after{content:""; position:absolute; width:360px; height:360px; right:-120px; top:-160px; border-radius:50%; background:radial-gradient(circle, rgba(143,180,245,.35), transparent 65%); pointer-events:none;}
  .hm-quote-mark{position:relative; width:52px; height:52px; color:#8FB4F5; opacity:.9;}
  .hm-quote blockquote{position:relative; margin:18px 0 0; font-size:clamp(1.12rem,2vw,1.35rem); line-height:1.6; font-weight:500; color:#fff;}
  .hm-quote-tags{position:relative; margin-top:24px; display:flex; flex-wrap:wrap; gap:8px;}
  .hm-quote-tags span{font-size:.8rem; font-weight:600; color:#C7D4EE; padding:6px 12px; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);}
  .hm-quote figcaption{position:relative; margin-top:30px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); display:flex; align-items:center; gap:14px;}
  .hm-quote-avatar{width:50px; height:50px; border-radius:16px; background:#fff; color:var(--blue); display:grid; place-items:center; font-weight:800; font-size:1rem; flex-shrink:0;}
  .hm-quote figcaption strong{display:block; font-size:1.02rem;}
  .hm-quote figcaption small{display:block; margin-top:2px; font-size:.86rem; color:#C7D4EE;}
  @media (max-width:600px){ .hm-quote{padding:36px 24px 30px; border-radius:22px;} .hm-quote-mark{width:40px; height:40px;} }

  /* ================= Navigation (desktop + mobile/tablet) ================= */
  header{position:sticky;}
  .nav-links{gap:4px;}
  .nav-links a{position:relative; padding:9px 14px; border-radius:100px; color:var(--gray); font-weight:500; text-decoration:none; transition:color .2s ease, background .2s ease;}
  .nav-links a:hover{color:var(--navy); background:var(--blue-tint);}
  .nav-links a.active{color:var(--blue); background:var(--blue-tint); font-weight:600;}
  .nav-links a.active::after{content:""; position:absolute; left:50%; bottom:3px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--blue);}
  .nav-links a:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  @media (min-width:860px) and (max-width:1080px){ .nav-links a{padding:8px 10px; font-size:.9rem;} .nav-right{gap:10px;} .nav-cta{padding:11px 16px; font-size:.88rem;} }
  .burger{position:relative; width:44px; height:44px; border-radius:12px; border:none; background:var(--blue-tint); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; transition:background .2s ease;}
  .burger span{width:20px; height:2px; border-radius:2px; background:var(--navy); transition:transform .3s ease, opacity .2s ease;}
  .burger:hover{background:#DDE8FA;}
  .burger:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  .burger[aria-expanded="true"]{background:var(--navy);}
  .burger[aria-expanded="true"] span{background:#fff;}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  @media (min-width:860px){ .burger{display:none;} #mobile-menu{display:none !important;} }
  #mobile-menu{position:absolute; left:0; right:0; top:100%; z-index:49; background:#fff; padding:14px 20px 22px; border-top:1px solid var(--line); box-shadow:0 30px 50px -20px rgba(11,30,61,.35); max-height:calc(100vh - 76px); overflow-y:auto; opacity:0; transform:translateY(-10px); visibility:hidden; pointer-events:none; transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;}
  #mobile-menu.open{opacity:1; transform:none; visibility:visible; pointer-events:auto; transition:opacity .25s ease, transform .25s ease;}
  .mm-links{display:flex; flex-direction:column; gap:4px;}
  .mm-links a{display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:14px; text-decoration:none; color:var(--navy); font-weight:600; font-size:1rem; transition:background .2s ease, color .2s ease;}
  .mm-ic{width:38px; height:38px; border-radius:11px; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; flex-shrink:0; transition:background .2s ease, color .2s ease;}
  .mm-ic svg{width:19px; height:19px;}
  .mm-label{flex:1;}
  .mm-chev{width:18px; height:18px; color:#9AA6BA; transition:transform .2s ease, color .2s ease;}
  .mm-links a:hover, .mm-links a:focus-visible{background:#F4F7FD; outline:none;}
  .mm-links a:hover .mm-chev{transform:translateX(3px); color:var(--blue);}
  .mm-links a.active{background:var(--blue-tint); color:var(--blue);}
  .mm-links a.active .mm-ic{background:var(--blue); color:#fff;}
  .mm-links a.active .mm-chev{color:var(--blue);}
  .mm-cta{margin-top:14px; display:flex; align-items:center; justify-content:center; gap:10px; padding:15px 20px; border-radius:14px; background:var(--blue); color:#fff !important; font-weight:700; font-size:1rem; text-decoration:none; box-shadow:0 14px 26px -12px rgba(22,87,196,.7); transition:background .2s ease, transform .2s ease;}
  .mm-cta svg{width:18px; height:18px;}
  .mm-cta:hover{background:var(--blue-deep); transform:translateY(-1px);}
  .mm-contact{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; text-align:center;}
  .mm-contact a{font-size:.88rem; color:var(--gray); text-decoration:none; overflow-wrap:anywhere;}
  .mm-contact a:hover{color:var(--blue);}
  @media (min-width:560px) and (max-width:859px){ #mobile-menu{padding:18px 28px 26px;} .mm-links{display:grid; grid-template-columns:1fr 1fr; gap:8px;} .mm-links a:first-child{grid-column:1/-1;} }
  .nav-cta{white-space:nowrap;}

  /* ================= Small-screen hardening ================= */
  .sv-jump{grid-template-columns:repeat(4,minmax(0,1fr));}
  @media (max-width:760px){ .sv-jump{grid-template-columns:repeat(2,minmax(0,1fr));} }
  .sv-jump button{min-width:0;}
  .footer-grid > *{min-width:0;}
  footer a, .footer-plain{overflow-wrap:anywhere;}
  .sv-related-card{min-width:0;}
  .sv-related-text h3, .sv-related-text p{overflow-wrap:anywhere;}
  @media (max-width:520px){ .footer-grid{grid-template-columns:1fr; gap:28px;} }
  @media (max-width:420px){
    .wrap{padding:0 18px;}
    .sv-jump button{padding:14px 12px; font-size:.82rem; gap:8px;}
    .sv-jump button span{width:28px; height:28px; font-size:.7rem; flex-shrink:0;}
    .hero-actions .btn{width:100%; justify-content:center;}
    .sv-related-card{padding:18px; gap:12px;}
    .sv-related-icon{width:44px; height:44px;}
    .sv-related-arrow{width:34px; height:34px;}
    .sv-cta{padding:48px 18px;}
    .hm-form{padding:22px 16px;}
    .sv-feature-body{padding:22px 18px;}
    .sv-branch ul{grid-template-columns:1fr;}
    .lang-switch button{min-width:30px; padding:6px 7px;}
  }
  @media (max-width:360px){ .logo img{height:40px;} .nav-right{gap:6px;} .burger{width:40px; height:40px;} }

  header{background:#fff; backdrop-filter:none; transition:box-shadow .25s ease;}
  header.scrolled{box-shadow:0 10px 30px -18px rgba(11,30,61,.35);}
  body.menu-open::before{content:""; position:fixed; inset:0; z-index:45; background:rgba(11,30,61,.4); animation:mmFade .25s ease;}
  @keyframes mmFade{from{opacity:0;} to{opacity:1;}}

  /* ---- Floating WhatsApp button (bottom-left) ---- */
  .wa-float{position:fixed; left:22px; bottom:22px; z-index:60; display:flex; align-items:center; height:52px; padding:0; border-radius:100px; background:#25D366; color:#fff; text-decoration:none; box-shadow:0 14px 28px -10px rgba(37,211,102,.6), 0 4px 10px -4px rgba(11,30,61,.25); overflow:hidden; animation:waIn .6s cubic-bezier(.2,.8,.3,1.2) .8s both; transition:background .25s ease, box-shadow .25s ease, transform .25s ease;}
  .wa-icon{width:52px; height:52px; flex-shrink:0; display:grid; place-items:center;}
  .wa-icon svg{width:26px; height:26px;}
  .wa-label{max-width:0; opacity:0; white-space:nowrap; font-weight:700; font-size:.92rem; transition:max-width .35s ease, opacity .25s ease, padding .35s ease;}
  .wa-float:hover, .wa-float:focus-visible{background:#1EBE5A; box-shadow:0 18px 32px -10px rgba(37,211,102,.7), 0 4px 10px -4px rgba(11,30,61,.25);}
  .wa-float:hover .wa-label, .wa-float:focus-visible .wa-label{max-width:200px; opacity:1; padding-right:20px;}
  .wa-float:focus-visible{outline:2px solid #1EBE5A; outline-offset:3px;}
  .wa-float::after{content:""; position:absolute; left:0; top:0; width:52px; height:52px; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:waPulse 2.4s ease-out 1.6s 2; pointer-events:none;}
  @keyframes waIn{from{opacity:0; transform:translateY(16px) scale(.85);} to{opacity:1; transform:none;}}
  @keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45);} 100%{box-shadow:0 0 0 14px rgba(37,211,102,0);}}
  @media (max-width:640px){ .wa-float{left:16px; bottom:16px; height:46px;} .wa-icon{width:46px; height:46px;} .wa-icon svg{width:23px; height:23px;} .wa-float::after{width:46px; height:46px;} }
  @media (hover:none){ .wa-float:hover .wa-label{max-width:0; opacity:0; padding-right:0;} }
  @media (prefers-reduced-motion: reduce){ .wa-float, .wa-float::after{animation:none;} .wa-label{transition:none;} }

  /* ---- "MHSA" written in text is shown as the logo wordmark ---- */
  .brand-mark{display:inline-block; height:.74em; width:calc(.74em * 4.908); background:url(/assets/img/e5358e75c5.webp) no-repeat left center / contain; vertical-align:baseline; margin:0 .06em; position:relative; top:.02em;}
  .hero .brand-mark, .service-hero .brand-mark, .sv-solutions .brand-mark, .sv-cta .brand-mark, .hm-quote .brand-mark, .hm-info .brand-mark, .sv-project-band .brand-mark, .sv-feature-media .brand-mark{background-image:url(/assets/img/9e6727b999.webp);}
  .brand-text{white-space:normal;}
  .hm-info h3 .brand-mark{height:1.1em; width:calc(1.1em * 4.908);}

  /* ================= Contact section ================= */
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  .hm-contact{background:linear-gradient(180deg, var(--blue-tint) 0%, #F4F8FE 100%);}
  .hm-contact-grid{grid-template-columns:.85fr 1.15fr; gap:56px;}
  @media (max-width:960px){ .hm-contact-grid{grid-template-columns:1fr; gap:40px;} }
  .hm-contact-intro{position:sticky; top:110px;}
  @media (max-width:960px){ .hm-contact-intro{position:static;} }
  .ct-cards{margin-top:30px; display:flex; flex-direction:column; gap:12px;}
  .ct-card{display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:18px; background:#fff; text-decoration:none; color:var(--ink); box-shadow:0 14px 30px -22px rgba(11,30,61,.35), 0 2px 6px -3px rgba(11,30,61,.06); transition:transform .3s ease, box-shadow .3s ease;}
  a.ct-card:hover{transform:translateY(-3px); box-shadow:0 22px 40px -24px rgba(11,30,61,.45);}
  .ct-ic{width:48px; height:48px; border-radius:14px; background:var(--blue-tint); color:var(--blue); display:grid; place-items:center; flex-shrink:0; transition:background .3s ease, color .3s ease;}
  .ct-ic svg{width:22px; height:22px;}
  .ct-card.is-wa .ct-ic{background:#E7F9EE; color:#1EBE5A;}
  a.ct-card:hover .ct-ic{background:var(--blue); color:#fff;}
  a.ct-card.is-wa:hover .ct-ic{background:#25D366; color:#fff;}
  .ct-txt{flex:1; min-width:0; display:flex; flex-direction:column;}
  .ct-txt small{font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray);}
  .ct-txt strong{margin-top:2px; font-size:clamp(.8rem, 3.7vw, .98rem); color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .ct-go{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--blue); background:var(--blue-tint); flex-shrink:0; transition:transform .3s ease;}
  .ct-go svg{width:16px; height:16px;}
  a.ct-card:hover .ct-go{transform:translateX(3px);}
  .ct-next{margin-top:26px; padding:22px 22px 20px; border-radius:18px; background:linear-gradient(135deg,#0B1E3D,#123367); color:#fff; box-shadow:0 24px 50px -32px rgba(11,30,61,.6);}
  .ct-next h3{font-size:1rem; color:#fff;}
  .ct-next ol{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
  .ct-next li{display:flex; gap:12px; align-items:flex-start; font-size:.93rem; color:#DCE6F8;}
  .ct-next li b{width:26px; height:26px; border-radius:50%; background:rgba(143,180,245,.2); color:#8FB4F5; display:grid; place-items:center; font-size:.78rem; flex-shrink:0;}

  .ct-form{padding:34px 34px 28px; border-radius:28px; background:#fff; box-shadow:0 40px 80px -44px rgba(11,30,61,.5), 0 2px 10px -4px rgba(11,30,61,.08);}
  @media (max-width:600px){ .ct-form{padding:24px 18px 20px; border-radius:22px;} }
  .ct-form-head{display:flex; gap:14px; align-items:center; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid #EDF1F8;}
  .ct-form-ic{width:48px; height:48px; border-radius:15px; background:linear-gradient(135deg,#1657C4,#3E7BE6); color:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 12px 22px -10px rgba(22,87,196,.8);}
  .ct-form-ic svg{width:22px; height:22px;}
  .ct-form-head h3{font-size:1.2rem; color:var(--navy);}
  .ct-form-head p{margin-top:2px; font-size:.86rem; color:var(--gray);}
  .req{color:#DC2626; font-weight:700;}
  .opt{color:var(--gray); font-weight:500; font-size:.8rem;}
  .ct-alert{display:flex; align-items:center; gap:10px; margin-bottom:18px; padding:12px 14px; border-radius:12px; background:#FEF2F2; color:#B42318; font-size:.9rem; font-weight:600; border:1px solid #FECACA;}
  .ct-alert::before{content:"!"; width:22px; height:22px; border-radius:50%; background:#DC2626; color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:800; flex-shrink:0;}
  .ct-alert[hidden]{display:none;}
  .ct-form .field{margin-bottom:16px;}
  .ct-form .field label, .ct-form legend{display:block; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:7px;}
  .ct-input{position:relative;}
  .ct-input .ct-lead{position:absolute; left:14px; top:50%; width:18px; height:18px; margin-top:-9px; color:#94A3B8; pointer-events:none; transition:color .2s ease;}
  .ct-input .ct-ok{position:absolute; right:12px; top:50%; width:18px; height:18px; margin-top:-9px; color:#16A34A; opacity:0; transform:scale(.6); transition:opacity .2s ease, transform .2s ease; pointer-events:none;}
  .hm-form .ct-input input{padding-left:42px; padding-right:38px;}
  .hm-form .ct-input textarea{min-height:130px; padding:13px 15px;}
  .ct-input:focus-within .ct-lead{color:var(--blue);}
  .ct-field.is-valid .ct-ok{opacity:1; transform:none;}
  .hm-form .ct-field.is-valid input, .hm-form .ct-field.is-valid textarea{border-color:#86D9A5; background:#fff;}
  .hm-form .ct-field.is-invalid input, .hm-form .ct-field.is-invalid textarea{border-color:#F19999; background:#FFF7F7;}
  .hm-form .ct-field.is-invalid input:focus, .hm-form .ct-field.is-invalid textarea:focus{box-shadow:0 0 0 4px rgba(220,38,38,.12); border-color:#DC2626;}
  .ct-field.is-invalid .ct-lead{color:#DC2626;}
  .ct-err{min-height:0; margin-top:6px; font-size:.82rem; font-weight:500; color:#B42318; display:flex; gap:6px; align-items:flex-start;}
  .ct-err:empty{display:none;}
  .ct-err::before{content:""; width:14px; height:14px; margin-top:2px; flex-shrink:0; border-radius:50%; background:#DC2626 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center/10px no-repeat;}
  .ct-field.is-invalid{animation:ctShake .35s ease;}
  @keyframes ctShake{0%,100%{transform:none;} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);}}
  @media (prefers-reduced-motion: reduce){ .ct-field.is-invalid{animation:none;} }
  .ct-services{border:none; padding:0; margin:0 0 16px; min-width:0;}
  .ct-chips{display:flex; flex-wrap:wrap; gap:8px;}
  .ct-chips label{position:relative; margin:0 !important; cursor:pointer;}
  .ct-chips input{position:absolute; opacity:0; width:1px; height:1px;}
  .ct-chips span{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:100px; background:#F7FAFE; border:1px solid #E3EAF6; font-size:.86rem; font-weight:600; color:var(--navy); transition:background .2s ease, border-color .2s ease, color .2s ease;}
  .ct-chips label:hover span{border-color:var(--blue); color:var(--blue);}
  .ct-chips input:checked + span{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 8px 16px -8px rgba(22,87,196,.7);}
  .ct-chips input:checked + span::before{content:""; width:12px; height:12px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;}
  .ct-chips input:focus-visible + span{outline:2px solid var(--blue); outline-offset:2px;}
  .ct-services.is-invalid .ct-chips span{border-color:#F19999;}
  .ct-meta{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
  .ct-meta .ct-err{flex:1;}
  .ct-count{margin-top:6px; margin-left:auto; font-size:.78rem; color:var(--gray); white-space:nowrap;}
  .ct-actions{margin-top:8px; display:grid; grid-template-columns:1fr; gap:12px;}
  .ct-actions .btn{white-space:nowrap;}
  @media (max-width:600px){ .ct-actions{grid-template-columns:1fr;} }
  .ct-actions .btn{justify-content:center; padding:15px 18px; border-radius:12px;}
  .ct-submit svg, .ct-wa-btn svg{width:18px; height:18px;}
  .ct-wa-btn{background:#fff; color:#128C4B; border:1px solid #BFEBD0; font-family:inherit;}
  .ct-wa-btn:hover{background:#E7F9EE; border-color:#25D366;}
  .ct-privacy{margin-top:16px; display:flex; gap:8px; align-items:center; justify-content:center; font-size:.8rem; color:var(--gray); text-align:center;}
  .ct-privacy svg{width:14px; height:14px; flex-shrink:0;}
  .ct-success{text-align:center; padding:40px 10px 20px;}
  .ct-success[hidden]{display:none;}
  .ct-success-ic{width:74px; height:74px; margin:0 auto; border-radius:50%; background:#E7F9EE; color:#16A34A; display:grid; place-items:center; animation:ctPop .5s cubic-bezier(.3,1.6,.5,1);}
  .ct-success-ic svg{width:34px; height:34px;}
  @keyframes ctPop{from{transform:scale(.4); opacity:0;} to{transform:none; opacity:1;}}
  .ct-success h3{margin-top:20px; font-size:1.45rem; color:var(--navy);}
  .ct-success p{margin:10px auto 0; max-width:44ch; color:var(--gray);}
  .ct-success-actions{margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
  .ct-edit{background:#fff; color:var(--navy); border:1px solid var(--line); font-family:inherit;}
  .ct-edit:hover{border-color:var(--blue); color:var(--blue);}

  @media (max-width:420px){ .ct-card{padding:14px; gap:12px;} .ct-ic{width:42px; height:42px;} .ct-go{display:none;} }

  .ct-submit.is-loading{opacity:.85; cursor:progress;}
  .ct-submit.is-loading svg{display:none;}
  .ct-submit.is-loading::after{content:""; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:ctSpin .8s linear infinite;}
  @keyframes ctSpin{to{transform:rotate(360deg);}}
  #ctMailAgain[hidden]{display:none;}

  /* ================= Chatbot ================= */
  .to-top{bottom:94px; right:25px;}
  @media (max-width:640px){ .to-top{bottom:80px; right:20px;} }
  .cb-launcher{all:unset; box-sizing:border-box; position:fixed; right:22px; bottom:22px; z-index:71; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,#1657C4,#3E7BE6); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 16px 30px -10px rgba(22,87,196,.7), 0 4px 10px -4px rgba(11,30,61,.3); animation:waIn .6s cubic-bezier(.2,.8,.3,1.2) 1.1s both; transition:transform .25s ease, box-shadow .25s ease;}
  .cb-launcher:hover{transform:translateY(-2px) scale(1.04); box-shadow:0 20px 36px -12px rgba(22,87,196,.8);}
  .cb-launcher:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}
  .cb-launcher svg{position:absolute; width:26px; height:26px; transition:opacity .2s ease, transform .25s ease;}
  .cb-ic-close{opacity:0; transform:rotate(-90deg) scale(.6);}
  .cb-launcher[aria-expanded="true"] .cb-ic-chat{opacity:0; transform:rotate(90deg) scale(.6);}
  .cb-launcher[aria-expanded="true"] .cb-ic-close{opacity:1; transform:none;}
  .cb-online{position:absolute; top:3px; right:3px; width:13px; height:13px; border-radius:50%; background:#22C55E; border:2.5px solid #fff;}
  .cb-teaser{position:fixed; right:22px; bottom:92px; z-index:71; max-width:250px; padding:14px 34px 14px 16px; border-radius:16px 16px 4px 16px; background:#fff; color:var(--navy); font-size:.9rem; font-weight:500; line-height:1.45; box-shadow:0 20px 40px -18px rgba(11,30,61,.45); cursor:pointer; animation:cbIn .35s ease;}
  .cb-teaser[hidden]{display:none;}
  .cb-teaser-close{all:unset; position:absolute; top:6px; right:9px; width:20px; height:20px; text-align:center; font-size:1.1rem; color:var(--gray); cursor:pointer;}
  body.chat-open .cb-teaser{display:none;}
  @keyframes cbIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
  .cb-panel{padding:0 !important; margin:0; position:fixed; right:22px; bottom:92px; z-index:70; width:390px; height:min(600px, calc(100vh - 120px)); display:flex; flex-direction:column; background:#F6F8FC; border-radius:24px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(11,30,61,.55), 0 0 0 1px rgba(11,30,61,.06); opacity:0; transform:translateY(16px) scale(.98); transform-origin:bottom right; transition:opacity .25s ease, transform .25s ease;}
  .cb-panel[hidden]{display:none;}
  .cb-panel.open{opacity:1; transform:none;}
  .cb-head{display:flex; align-items:center; gap:12px; padding:16px 16px 16px 18px; background:linear-gradient(135deg,#0B1E3D,#1657C4); color:#fff;}
  .cb-head-avatar{width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; flex-shrink:0;}
  .cb-head-avatar .brand-mark{font-size:10px;}
  .cb-head .brand-mark{background-image:url(/assets/img/9e6727b999.webp);}
  .cb-head-txt{flex:1; min-width:0; display:flex; flex-direction:column;}
  .cb-head-txt strong{font-size:1rem;}
  .cb-head-txt small{display:flex; align-items:center; gap:6px; font-size:.78rem; color:#C7D4EE;}
  .cb-head-txt small i{width:8px; height:8px; border-radius:50%; background:#22C55E;}
  .cb-close{all:unset; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; cursor:pointer; color:#fff; background:rgba(255,255,255,.1);}
  .cb-close:hover{background:rgba(255,255,255,.2);}
  .cb-close svg{width:18px; height:18px;}
  .cb-panel > *{flex-shrink:0;}
  .cb-panel > .cb-log{flex:1 1 auto; min-height:0;}
  .cb-log{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 14px 8px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth;}
  .cb-row{display:flex; gap:8px; align-items:flex-end; animation:cbIn .3s ease;}
  .cb-row.user{justify-content:flex-end;}
  .cb-avatar{width:30px; height:30px; border-radius:10px; background:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow:0 4px 10px -6px rgba(11,30,61,.4);}
  .cb-avatar .brand-mark{font-size:7px;}
  .cb-bubble{max-width:84%; padding:11px 14px; border-radius:16px; font-size:.9rem; line-height:1.5; overflow-wrap:anywhere;}
  .cb-row.bot .cb-bubble{background:#fff; color:var(--ink); border-bottom-left-radius:4px; box-shadow:0 6px 16px -12px rgba(11,30,61,.35);}
  .cb-row.user .cb-bubble{background:var(--blue); color:#fff; border-bottom-right-radius:4px;}
  .cb-bubble ul, .cb-bubble ol{margin:8px 0 2px; padding-left:18px; display:flex; flex-direction:column; gap:5px;}
  .cb-bubble a:not(.cb-btn){color:var(--blue); font-weight:600;}
  .cb-bubble .brand-mark{font-size:1em;}
  .cb-muted{color:var(--gray); font-size:.82rem;}
  .cb-quote{margin:8px 0 0; padding:10px 12px; border-left:3px solid var(--blue); background:var(--blue-tint); border-radius:8px; font-size:.86rem;}
  .cb-actions{margin-top:10px; display:flex; flex-wrap:wrap; gap:6px;}
  .cb-btn{display:inline-flex; align-items:center; padding:7px 12px; border-radius:100px; background:var(--blue); color:#fff; font-size:.8rem; font-weight:600; text-decoration:none; transition:background .2s ease;}
  .cb-btn:hover{background:var(--blue-deep);}
  .cb-btn.ghost{background:var(--blue-tint); color:var(--blue-deep);}
  .cb-btn.ghost:hover{background:#DCE7FA;}
  .cb-btn.wa{background:#25D366;}
  .cb-btn.wa:hover{background:#1EBE5A;}
  .cb-typing{display:flex; gap:4px; padding:14px 16px;}
  .cb-typing i{width:7px; height:7px; border-radius:50%; background:#9AA6BA; animation:cbDot 1.2s ease-in-out infinite;}
  .cb-typing i:nth-child(2){animation-delay:.15s;} .cb-typing i:nth-child(3){animation-delay:.3s;}
  @keyframes cbDot{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}
  .cb-chips{display:flex; gap:6px; padding:6px 14px 10px; overflow-x:auto; scrollbar-width:none;}
  .cb-chips::-webkit-scrollbar{display:none;}
  .cb-chip{all:unset; flex-shrink:0; padding:7px 12px; border-radius:100px; background:#fff; border:1px solid #DCE4F2; color:var(--blue-deep); font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .2s ease, border-color .2s ease;}
  .cb-chip:hover{border-color:var(--blue); background:var(--blue-tint);}
  .cb-chip:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  .cb-input{display:flex; gap:8px; padding:12px; background:#fff; border-top:1px solid #E6ECF5;}
  .cb-input input{flex:1; min-width:0; padding:12px 14px; border-radius:12px; border:1px solid #E3EAF6; background:#F7FAFE; font-family:inherit; font-size:.92rem; color:var(--ink);}
  .cb-input input:focus{outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(22,87,196,.12);}
  .cb-input button{all:unset; width:44px; height:44px; border-radius:12px; background:var(--blue); color:#fff; display:grid; place-items:center; cursor:pointer; flex-shrink:0; transition:background .2s ease;}
  .cb-input button:hover{background:var(--blue-deep);}
  .cb-input button:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  .cb-input button svg{width:19px; height:19px;}
  @media (max-width:520px){
    .cb-panel{right:0; bottom:0; left:0; top:0; width:auto; height:auto; border-radius:0; transform-origin:bottom center;}
    body.chat-open .cb-launcher, body.chat-open .wa-float, body.chat-open .to-top{display:none;}
    .cb-launcher{right:16px; bottom:16px; width:54px; height:54px;}
    .cb-teaser{right:16px; bottom:82px;}
    .cb-input input{font-size:16px;}
  }
  @media (min-width:521px) and (max-height:640px){ .cb-panel{height:calc(100vh - 110px);} }
  @media (prefers-reduced-motion: reduce){ .cb-launcher, .cb-row, .cb-teaser{animation:none;} .cb-typing i{animation:none;} }
  .skip-link{position:absolute; left:12px; top:-60px; z-index:200; background:var(--blue); color:#fff; padding:10px 16px; border-radius:8px; font-weight:600; text-decoration:none; transition:top .2s ease;}
  .skip-link:focus{top:12px;}
  .mail-toast{position:fixed; left:50%; bottom:28px; z-index:120; transform:translate(-50%,20px); opacity:0; pointer-events:none; max-width:min(92vw,440px); background:#0B1E3D; color:#fff; border-radius:14px; padding:14px 18px; box-shadow:0 20px 40px -16px rgba(11,30,61,.6); font-size:.92rem; line-height:1.45; transition:opacity .25s ease, transform .25s ease;}
  .mail-toast.show{opacity:1; transform:translate(-50%,0);}
  .mail-toast b{display:block; color:#8FB4F5; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:2px;}