.services-page{background:#fff}

/* Keep every inner-page hero in the same deep space palette as the home hero.
   The existing illustrations, wave and responsive sizing stay unchanged. */
.about-page .site-header{
  background:transparent;
}
.about-page .contact-strip{
  border-bottom-color:transparent;
}
.about-page .about-hero.services-hero{
  background:
    radial-gradient(ellipse at 52% 8%,rgba(26,139,204,.48) 0%,rgba(26,139,204,.18) 25%,transparent 53%),
    linear-gradient(115deg,#0e101e 0%,#0d203c 38%,#071226 72%,#0b0d1b 100%);
}

/* The source page scales its desktop composition with the viewport. */
@media (min-width:1101px){
  .services-page .site-header{height:9.49vw;max-height:180px}
  .services-page .contact-strip{height:3.165vw;font-size:1.21vw;padding-right:.47vw}
  .services-page .strip-right{gap:3.96vw}
  .services-page .strip-phone span,.services-page .strip-right a:first-child span{font-size:1.42vw}
  .services-page .social-letter{font-size:1.16vw}
  .services-page .instagram-icon{font-size:1.32vw}
  .services-page .nav-row{height:6.33vw;padding:0 .42vw 0 .63vw}
  .services-page .brand{width:13.2vw;height:4.33vw;flex-basis:13.2vw}
  .services-page .primary-nav{gap:2.43vw;font-size:1.42vw}
  .services-page .primary-nav .nav-contact{min-width:10.45vw;min-height:4.54vw;height:4.54vw;padding:0 1.48vw;font-size:1.42vw}
}

.services-hero{height:39.56vw;max-height:750px;min-height:490px}
.services-hero h1{top:20.45vw;font-size:3.38vw;animation:services-rise .85s .25s both}
.services-hero .about-hero-wave{height:4.22vw}
.services-hero .hero-plant{width:7.91vw;left:0;bottom:.95vw;animation:services-from-left .75s both}
.services-hero .hero-man{width:10.81vw;left:6.44vw;bottom:.95vw;animation:services-from-left .9s .1s both}
.services-hero .hero-calendar{width:6.43vw;left:17.46vw;bottom:.95vw;animation:services-from-left .9s .18s both}
.services-hero .hero-bars{width:12.92vw;right:3.74vw;bottom:0;animation:services-from-right .9s .12s both}
.services-hero .hero-woman{width:5.75vw;right:8.18vw;bottom:3.9vw;animation:services-from-right .9s .24s both}
.services-hero .hero-target{width:3.06vw;right:15.3vw;bottom:9.92vw;animation:services-pop .85s .45s both}
.services-hero .hero-chart{width:4.11vw;right:19.62vw;bottom:3.32vw;animation:services-from-right .9s .28s both}
.services-hero .hero-pie{width:4.8vw;right:2.37vw;bottom:15.93vw;animation:services-pop .85s .55s both}

.services-overview{padding:3.7vw 2.38vw 2vw;text-align:center;background:#fff}
.services-heading{margin-bottom:5.4vw}
.services-eyebrow{font-size:1.27vw;line-height:1.2;color:#191349;margin:0 0 1.5vw}
.services-heading h2{font-size:2.55vw;color:#0b8bdf;line-height:1.1;margin:0 0 1.2vw}
.services-subtitle{font-size:1.36vw;color:#0b1856;line-height:1.3;margin:0}
.services-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3.65vw;align-items:start}
.services-detail-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:3.1vw 3.05vw 2.6vw;border:.22vw solid #0b8bdf;border-radius:.8vw;box-shadow:.45vw .65vw 1.25vw rgba(0,0,0,.36);background:#fff;color:#191349;min-width:0}
.services-detail-card:nth-child(1){min-height:29vw}
.services-detail-card:nth-child(2){min-height:27vw}
.services-detail-card:nth-child(3){min-height:31.4vw}
.services-detail-card:nth-child(4){min-height:26.5vw}
.services-detail-card>img{width:4vw;height:4vw;object-fit:contain;margin-bottom:1.55vw;filter:invert(45%) sepia(84%) saturate(1540%) hue-rotate(168deg) brightness(96%)}
.services-detail-card h3{font-size:1.36vw;line-height:1.33;color:#0b8bdf;margin:0 0 1.1vw;max-width:100%}
.services-detail-card p{font-size:1.19vw;line-height:1.95;margin:0 0 1.1vw;max-width:100%}
.services-card-arrow{display:flex;align-items:center;justify-content:center;width:2.64vw;height:2.64vw;border:.18vw solid #0b8bdf;border-radius:50%;color:#0b8bdf;font:400 2vw/1 Arial,sans-serif;padding-bottom:.34vw;transition:background .2s,color .2s,transform .2s}
.services-card-arrow:hover{background:#0b8bdf;color:#fff;transform:translateX(3px)}

.services-testimonials{padding:.9vw 1.2vw 0;text-align:center;background:#fff}
.feedback-heading>p{font-size:1.27vw;margin:0 0 1.4vw;color:#191349}
.feedback-heading h2{font-size:2.55vw;color:#0b8bdf;margin:0 0 3vw;line-height:1.1}
.services-testimonials .testimonial-card{max-width:70.5vw;min-height:18.4vw;padding:2.6vw 3vw 1.9vw;background:#f3f6ff}
.services-testimonials .testimonial-card>p{font-size:1.22vw;line-height:1.9;max-width:64vw}
.services-testimonials .testimonial-author{gap:1.2vw;font-size:1.22vw}
.services-testimonials .avatar{width:5.55vw;height:5.55vw;background-image:url('./assets/portrait-nika.jpg')}
.services-testimonials .testimonial-dots{gap:.9vw;margin:1.3vw auto 9.7vw}
.services-testimonials .testimonial-dots button{width:.63vw;height:.63vw;min-width:8px;min-height:8px}

.services-page .footer{min-height:47.5vw;padding:10.55vw 2.37vw 2vw}
@media (min-width:1101px){
  .services-page .footer-grid{gap:4.5vw}
  .services-page .footer h2{font-size:1.8vw;margin:.48vw 0 2.2vw}
  .services-page .footer-about .brand{width:13.2vw;height:4.33vw;margin-bottom:1.32vw}
  .services-page .footer-about p{font-size:1.27vw;line-height:2.05;max-width:20vw}
  .services-page .footer-menu a{font-size:1.37vw;margin-bottom:1.42vw}
  .services-page .footer-contact a{font-size:1.32vw;margin-bottom:1.7vw}
  .services-page .footer-newsletter input{height:3.8vw;font-size:1.32vw}
  .services-page .footer-newsletter button{height:5.17vw;font-size:1.43vw}
  .services-page .footer-social a{width:2.9vw;height:2.9vw;font-size:1.7vw}
  .services-page .footer-bottom{margin-top:3.16vw;font-size:1vw}
  .services-page .footer-wave{height:5.27vw}
}

[data-reveal].is-visible{animation:services-rise .75s both}
.services-card-grid [data-reveal]:nth-child(2).is-visible{animation-delay:.1s}
.services-card-grid [data-reveal]:nth-child(3).is-visible{animation-delay:.2s}
.services-card-grid [data-reveal]:nth-child(4).is-visible{animation-delay:.3s}
.testimonial-card.quote-changing{animation:services-quote .4s ease-out}
@keyframes services-rise{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}
@keyframes services-from-left{from{opacity:0;transform:translateX(-45px)}to{opacity:1;transform:translateX(0)}}
@keyframes services-from-right{from{opacity:0;transform:translateX(45px)}to{opacity:1;transform:translateX(0)}}
@keyframes services-pop{from{opacity:0;transform:scale(.45)}to{opacity:1;transform:scale(1)}}
@keyframes services-quote{from{opacity:.45;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:1100px){
  .services-page .site-header{height:130px;min-height:130px}
  .services-page .contact-strip{height:42px;font-size:16px;padding:0 15px}
  .services-page .strip-right{gap:20px}
  .services-page .nav-row{height:88px;padding:0 18px}
  .services-page .brand{width:140px;height:48px;flex-basis:140px}
  .services-page .primary-nav{font-size:25px;gap:0}
  .services-page .primary-nav .nav-contact{font-size:23px;min-height:55px}
  .services-hero{height:620px;max-height:none;min-height:0}
  .services-hero h1{top:260px;font-size:50px}
  .services-hero .about-hero-wave{height:70px}
  .services-hero .hero-plant{width:110px;bottom:20px}.services-hero .hero-man{width:155px;left:75px;bottom:19px}.services-hero .hero-calendar{width:95px;left:215px;bottom:20px}
  .services-hero .hero-bars{width:185px;right:25px}.services-hero .hero-woman{width:82px;right:89px;bottom:57px}.services-hero .hero-target{width:45px;right:190px;bottom:145px}.services-hero .hero-chart{width:60px;right:230px;bottom:50px}.services-hero .hero-pie{width:70px;right:25px;bottom:235px}
  .services-overview{padding:70px 30px 80px}.services-heading{margin-bottom:60px}.services-eyebrow{font-size:21px;margin-bottom:20px}.services-heading h2{font-size:40px;margin-bottom:15px}.services-subtitle{font-size:22px}
  .services-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px}.services-detail-card,.services-detail-card:nth-child(n){min-height:380px;padding:40px;border-width:3px;border-radius:12px;box-shadow:7px 10px 20px rgba(0,0,0,.3)}
  .services-detail-card>img{width:60px;height:60px;margin-bottom:20px}.services-detail-card h3{font-size:27px;margin-bottom:18px}.services-detail-card p{font-size:22px;margin-bottom:20px}.services-card-arrow{width:40px;height:40px;border-width:2px;font-size:30px;padding-bottom:5px}
  .services-testimonials{padding:70px 20px 0}.feedback-heading>p{font-size:21px;margin-bottom:20px}.feedback-heading h2{font-size:40px;margin-bottom:40px}.services-testimonials .testimonial-card{max-width:900px;min-height:300px;padding:38px 30px 25px}.services-testimonials .testimonial-card>p{font-size:21px;max-width:100%}.services-testimonials .testimonial-author{gap:15px;font-size:22px}.services-testimonials .avatar{width:75px;height:75px}.services-testimonials .testimonial-dots{gap:12px;margin:20px auto 70px}.services-testimonials .testimonial-dots button{width:10px;height:10px}
  .services-page .footer{min-height:0;padding:160px 30px 30px}
}

@media (max-width:700px){
  .services-page .contact-strip{font-size:14px}.services-page .strip-right>a:first-child{display:none}
  .services-hero{height:560px}.services-hero h1{top:245px;font-size:43px}.services-hero .about-hero-wave{height:48px}
  .services-hero .hero-plant{width:74px;left:-5px;bottom:22px}.services-hero .hero-man{width:113px;left:32px;bottom:22px}.services-hero .hero-calendar{width:67px;left:130px;bottom:24px}
  .services-hero .hero-bars{width:115px;right:-2px}.services-hero .hero-woman{width:53px;right:35px;bottom:39px}.services-hero .hero-target{width:32px;right:115px;bottom:95px}.services-hero .hero-chart{width:40px;right:145px;bottom:39px}.services-hero .hero-pie{width:50px;right:2px;bottom:145px}
  .services-overview{padding:55px 20px 75px}.services-heading{margin-bottom:45px}.services-eyebrow{font-size:18px;margin-bottom:17px}.services-heading h2{font-size:36px}.services-subtitle{font-size:19px}
  .services-card-grid{grid-template-columns:1fr;gap:28px}.services-detail-card,.services-detail-card:nth-child(n){min-height:0;padding:35px}.services-detail-card>img{width:60px;height:60px}.services-detail-card h3{font-size:28px}.services-detail-card p{font-size:21px;line-height:1.65}.services-card-arrow{width:40px;height:40px}
  .services-testimonials{padding:60px 18px 0}.feedback-heading>p{font-size:19px;margin-bottom:15px}.feedback-heading h2{font-size:34px;margin-bottom:35px}.services-testimonials .testimonial-card{min-height:350px;padding:30px 22px}.services-testimonials .testimonial-card>p{font-size:19px;line-height:1.6}.services-testimonials .testimonial-author{font-size:20px}.services-testimonials .avatar{width:70px;height:70px}.services-testimonials .testimonial-dots{margin-bottom:70px}
  .services-page .footer{padding:140px 25px 30px}
}

@media (prefers-reduced-motion:reduce){
  .services-hero h1,.services-hero img,[data-reveal].is-visible,.testimonial-card.quote-changing{animation:none!important}
}

/* Keep the mobile shell consistent with the reference site.  Inner pages load
   this stylesheet after styles.css, so these rules intentionally close the
   later desktop/tablet header overrides above. */
@media (max-width:700px){
  .services-page .site-header{height:0;min-height:0;background:transparent;pointer-events:none}
  .services-page .contact-strip{display:none}
  .services-page .nav-row{height:82px;padding:0 18px;pointer-events:auto}
  .services-page .brand{width:130px;height:48px;flex-basis:130px}
  .services-page .menu-toggle{width:34px;height:34px;gap:5px;padding:0}
  .services-page .menu-toggle span{height:3px}
  .services-page .primary-nav{top:82px;pointer-events:auto}
}

/* The live services page uses a clean mobile hero: the heading remains over
   the navy field while the decorative desktop figures are hidden below it. */
@media (max-width:700px){
  body[data-page="services"] .services-hero{height:390px;min-height:390px;background:#06145a}
  body[data-page="services"] .services-hero h1{top:230px;left:40px;width:calc(100% - 80px);font-size:36px}
  body[data-page="services"] .services-hero .hero-plant,
  body[data-page="services"] .services-hero .hero-man,
  body[data-page="services"] .services-hero .hero-calendar,
  body[data-page="services"] .services-hero .hero-bars,
  body[data-page="services"] .services-hero .hero-woman,
  body[data-page="services"] .services-hero .hero-target,
  body[data-page="services"] .services-hero .hero-chart,
  body[data-page="services"] .services-hero .hero-pie{display:none}
  body[data-page="services"] .services-hero .about-hero-wave{height:45px}
  body[data-page="services"] .services-overview{padding:38px 20px 75px}
  body[data-page="services"] .services-card-grid{padding:0 10px}
  body[data-page="services"] .services-detail-card,
  body[data-page="services"] .services-detail-card:nth-child(n){padding:30px;min-height:0}
  body[data-page="services"] .services-detail-card h3{font-size:18px;line-height:1.4;margin-bottom:10px}
  body[data-page="services"] .services-detail-card p{font-size:16px;line-height:2;margin-bottom:18px}
  body[data-page="services"] .services-detail-card>img{width:50px;height:50px;margin-bottom:18px}
  body[data-page="services"] .services-card-arrow{width:34px;height:34px;font-size:25px}
}

/* The remaining inner pages share the reference site's compact mobile hero.
   Their page content starts immediately after the wave, so the same header
   and illustration rules keep navigation and page rhythm consistent. */
@media (max-width:700px){
  body[data-page="projects"] .services-hero,
  body[data-page="contact"] .services-hero,
  body[data-page="prices"] .services-hero{height:410px;min-height:410px;background:#06145a}
  body[data-page="projects"] .services-hero h1,
  body[data-page="contact"] .services-hero h1{top:230px;left:40px;width:calc(100% - 80px);font-size:36px}
  body[data-page="prices"] .services-hero h1{display:none}
  body[data-page="projects"] .services-hero .hero-plant,
  body[data-page="projects"] .services-hero .hero-man,
  body[data-page="projects"] .services-hero .hero-calendar,
  body[data-page="projects"] .services-hero .hero-bars,
  body[data-page="projects"] .services-hero .hero-woman,
  body[data-page="projects"] .services-hero .hero-target,
  body[data-page="projects"] .services-hero .hero-chart,
  body[data-page="projects"] .services-hero .hero-pie,
  body[data-page="contact"] .services-hero .hero-plant,
  body[data-page="contact"] .services-hero .hero-man,
  body[data-page="contact"] .services-hero .hero-calendar,
  body[data-page="contact"] .services-hero .hero-bars,
  body[data-page="contact"] .services-hero .hero-woman,
  body[data-page="contact"] .services-hero .hero-target,
  body[data-page="contact"] .services-hero .hero-chart,
  body[data-page="contact"] .services-hero .hero-pie,
  body[data-page="prices"] .services-hero .hero-plant,
  body[data-page="prices"] .services-hero .hero-man,
  body[data-page="prices"] .services-hero .hero-calendar,
  body[data-page="prices"] .services-hero .hero-bars,
  body[data-page="prices"] .services-hero .hero-woman,
  body[data-page="prices"] .services-hero .hero-target,
  body[data-page="prices"] .services-hero .hero-chart,
  body[data-page="prices"] .services-hero .hero-pie{display:none}
  body[data-page="projects"] .services-hero .about-hero-wave,
  body[data-page="contact"] .services-hero .about-hero-wave,
  body[data-page="prices"] .services-hero .about-hero-wave{height:45px}
}

/* Inner pages use the same desktop navbar scale as the home page.  Keep these
   values fixed so the navigation does not grow or shift with viewport width. */
@media (min-width:1101px){
  .about-page .site-header{height:120px;min-height:0}
  .about-page .contact-strip{height:40px;font-size:16px;align-items:center;padding:0 4px}
  .about-page .strip-right{gap:40px}
  .about-page .strip-phone span,
  .about-page .strip-right a:first-child span{font-size:20px}
  .about-page .social-letter{font-size:15px}
  .about-page .instagram-icon{font-size:18px}
  .about-page .nav-row{height:80px;padding:0 8px 0 5px}
  .about-page .brand{width:166px;height:55px;flex-basis:166px;min-width:0}
  .about-page .primary-nav{font-size:18px;gap:30px}
  .about-page .primary-nav .nav-contact{height:58px;min-height:58px;min-width:132px;padding:0 20px;font-size:18px}
}

/* Keep a clear, consistent gutter around the mobile service content. */
@media (max-width:700px){
  body[data-page="services"] .services-overview{padding-inline:clamp(20px,6vw,28px)}
  body[data-page="services"] .services-card-grid{padding-inline:0}
  body[data-page="services"] .services-detail-card,
  body[data-page="services"] .services-detail-card:nth-child(n){padding-inline:24px}
}