:root {
     --primary: #383591;
     --primary2: #2f2b85;
     --accent: #ffe486;
     --accent2: #f6d96c;
     --purple: #383591;
     --dark: #172033;
     --text: #667085;
     --light: #f5f6f8;
     --white: #fff;
     --border: #e8edf3;
     --shadow: 0 22px 55px rgba(17, 35, 55, .10);
     --radius: 22px
   }

   * {
     box-sizing: border-box
   }

   html {
     scroll-behavior: smooth
   }

   body {
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
     background: #fff;
     color: var(--text)
   }

   a {
     text-decoration: none;
     color: inherit
   }

   img {
     max-width: 100%;
     display: block
   }

   .container {
     width: min(1260px, calc(100% - 34px));
     margin: auto
   }

   .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 9px 18px;
     border-radius: 14px;
     background: #fff5cf;
     border: 1px solid #f0dfad;
     color: var(--purple);
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: 900;
     font-size: 13px
   }

   .section {
     padding: 95px 0
   }

   .section-head {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 70px;
     align-items: end;
     margin-bottom: 46px
   }

   .title {
     font-size: 50px;
     line-height: 1.08;
     margin: 20px 0 0;
     color: var(--dark);
     letter-spacing: -2px
   }

   .title span {
     color: var(--purple)
   }

   .lead {
     font-size: 19px;
     line-height: 1.65;
     margin: 0;
     color: #667085
   }

   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     padding: 15px 27px;
     border-radius: 12px;
     font-weight: 900;
     border: 0;
     cursor: pointer;
     transition: .28s ease
   }

   .btn-primary {
     background: var(--primary);
     color: #fff
   }

   .btn-primary:hover {
     background: var(--primary2);
     transform: translateY(-2px)
   }

   .btn-accent {
     background: var(--accent);
     color: #0d2d35
   }

   .btn-accent:hover {
     filter: brightness(.96);
     transform: translateY(-2px)
   }

   .btn-outline {
     background: rgba(255, 255, 255, .14);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, .45)
   }

   .btn-outline:hover {
     background: #fff;
     color: var(--primary)
   }

   .btn-schedule {
     background: var(--accent);
     color: #151515;
     border: 1px solid var(--accent);
     box-shadow: 0 14px 30px rgba(246, 217, 108, .28)
   }

   .btn-schedule:hover {
     background: #fff;
     color: var(--purple);
     transform: translateY(-2px)
   }

   .topbar {
     background: var(--primary2);
     color: #fff;
     font-size: 14px
   }

   .topbar .container {
     min-height: 44px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px
   }

   .top-left,
   .top-right {
     display: flex;
     align-items: center;
     gap: 22px;
     flex-wrap: wrap
   }

   .topbar a,
   .topbar span {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     opacity: .94
   }

   .social a {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: inline-grid;
     place-items: center;
     background: rgba(255, 255, 255, .12);
     transition: .25s
   }

   .social a:hover {
     background: var(--accent);
     color: #0d2d35;
     opacity: 1
   }

   .header {
     background: #fff;
     box-shadow: 0 4px 22px rgba(0, 0, 0, .09);
     position: sticky;
     top: 0;
     z-index: 999
   }

   .nav {
     height: 86px;
     display: flex;
     align-items: center;
     justify-content: space-between
   }

   .logo img {
     height: 76px;
     width: auto
   }

   .menu {
     display: flex;
     align-items: center;
     gap: 14px;
     list-style: none;
     margin: 0;
     padding: 0
   }

   .menu>li {
     position: relative
   }

   .menu>li>a {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 32px 10px;
     color: #333;
     font-size: 14px;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: .2px;
     border-radius: 0;
     background: transparent
   }

   .menu>li>a:hover,
   .menu>li>a.active {
     color: var(--purple);
     background: transparent
   }

   .hamb {
     display: none;
     background: var(--primary);
     color: #fff;
     border: 0;
     border-radius: 10px;
     font-size: 28px;
     padding: 8px 12px
   }

   .dropdown-panel {
     position: absolute;
     top: 100%;
     left: -230px;
     width: 860px;
     background: #fff;
     box-shadow: var(--shadow);
     border-top: 4px solid var(--accent);
     padding: 24px;
     grid-template-columns: repeat(3, 1fr);
     gap: 22px;
     display: grid;
     opacity: 0;
     visibility: hidden;
     transform: translateY(14px);
     transition: opacity .32s ease, transform .32s ease, visibility .32s ease;
     pointer-events: none;
     border-radius: 0
   }

   .has-drop:hover .dropdown-panel,
   .has-drop.open .dropdown-panel {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
     pointer-events: auto
   }

   .drop-col h4 {
     margin: 0 0 14px;
     color: var(--purple);
     font-size: 16px;
     line-height: 1.15;
     text-transform: uppercase;
     border-bottom: 1px solid #d9dde6;
     padding-bottom: 12px
   }

   .drop-col a {
     display: block;
     padding: 7px 0;
     color: #555;
     font-size: 15px;
     transition: .24s
   }

   .drop-col a:hover {
     color: var(--purple);
     padding-left: 6px
   }

   .hero {
     position: relative;
     min-height: 680px;
     overflow: hidden;
     background: #000
   }

   .slide {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     background-size: cover;
     background-position: center;
     opacity: 0;
     transform: scale(1.06);
     transition: opacity 1s ease, transform 6s ease
   }

   .slide.active {
     opacity: 1;
     transform: scale(1);
     z-index: 1
   }

   .slide:before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(5, 36, 48, .78), rgba(5, 36, 48, .32), rgba(5, 36, 48, .08))
   }

   .hero .container {
     position: relative;
     z-index: 2
   }

   .hero-box {
     max-width: 690px;
     color: #fff;
     animation: fadeUp .9s ease both
   }

   .hero-box h1 {
     font-size: 62px;
     line-height: 1.05;
     letter-spacing: -2px;
     margin: 0 0 20px
   }

   .hero-box h1 span {
     display: block;
     color: var(--accent)
   }

   .hero-box p {
     font-size: 20px;
     line-height: 1.7;
     margin: 0 0 32px;
     color: #eef7fa
   }

   .hero-actions {
     display: flex;
     gap: 16px;
     flex-wrap: wrap
   }

   .hero-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 3;
     width: 52px;
     height: 52px;
     border-radius: 50%;
     border: 1px solid rgba(255, 255, 255, .55);
     background: rgba(255, 255, 255, .12);
     color: #fff;
     font-size: 28px;
     display: grid;
     place-items: center;
     cursor: pointer;
     transition: .25s
   }

   .hero-arrow:hover {
     background: var(--accent);
     color: #0d2d35
   }

   .prev {
     left: 24px
   }

   .next {
     right: 24px
   }

   .dots {
     position: absolute;
     left: 50%;
     bottom: 28px;
     transform: translateX(-50%);
     display: flex;
     gap: 10px;
     z-index: 5
   }

   .dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     border: 2px solid #fff;
     background: transparent;
     cursor: pointer
   }

   .dot.active {
     background: var(--accent);
     border-color: var(--accent)
   }

   @keyframes fadeUp {
     from {
       opacity: 0;
       transform: translateY(28px)
     }

     to {
       opacity: 1;
       transform: translateY(0)
     }
   }

   .about {
     background: #f4f4f4
   }

   .about-top {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 70px;
     align-items: center;
     margin-bottom: 38px
   }

   .about-top .title span {
     color: var(--purple)
   }

   .about-lead {
     border-left: 2px solid var(--accent);
     padding-left: 30px
   }

   .about-grid {
     display: grid;
     grid-template-columns: 1.05fr 1fr;
     gap: 28px;
     align-items: stretch
   }

   .about-photo {
     border-radius: 12px;
     overflow: hidden;
     box-shadow: var(--shadow)
   }

   .about-photo img {
     height: 100%;
     width: 100%;
     object-fit: cover
   }

   .info-stack {
     display: grid;
     gap: 18px
   }

   .info-card {
     background: #fff;
     border-radius: 13px;
     padding: 26px 28px;
     box-shadow: 0 4px 18px rgba(0, 0, 0, .03)
   }

   .info-card h3 {
     margin: 0 0 12px;
     color: var(--primary2);
     font-size: 26px;
     display: flex;
     gap: 18px;
     align-items: center
   }

   .info-card h3:before {
     content: "";
     width: 11px;
     height: 11px;
     border-radius: 50%;
     background: var(--primary);
     flex: 0 0 11px
   }

   .info-card p {
     margin: 0;
     line-height: 1.65;
     font-size: 17px
   }

   .about-btn {
     margin-top: 3px;
     align-self: start
   }

   .founder {
     background: #fff
   }

   .founder-wrap {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 34px;
     align-items: start
   }

   .founder-photo {
     border-radius: 12px;
     overflow: hidden;
     background: #f1f1f1;
     box-shadow: var(--shadow)
   }

   .founder-photo img {
     width: 100%;
     height: 620px;
     object-fit: cover;
     object-position: center top
   }

   .founder-name {
     background: var(--primary);
     color: #fff;
     border-radius: 12px;
     padding: 28px 32px;
     margin-bottom: 30px;
     box-shadow: var(--shadow)
   }

   .founder-name h3 {
     margin: 0;
     font-size: 35px;
     letter-spacing: -1px;
     text-transform: uppercase
   }

   .founder-name p {
     margin: 6px 0 0;
     color: #cbdfe5;
     font-size: 20px
   }

   .founder-message {
     background: #f5f5f5;
     border-radius: 12px;
     padding: 30px 32px;
     box-shadow: 0 18px 45px rgba(17, 35, 55, .06)
   }

   .founder-message h3 {
     margin: 0 0 14px;
     font-size: 27px;
     color: var(--primary2)
   }

   .founder-message p {
     font-size: 17px;
     line-height: 1.65;
     margin: 0 0 18px
   }

   .products {
     background: #f7f8fb
   }

   .filter-tabs {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
     margin-bottom: 30px
   }

   .filter-tabs button {
     border: 1px solid var(--border);
     background: #fff;
     color: #253047;
     padding: 13px 22px;
     border-radius: 24px;
     font-weight: 900;
     cursor: pointer;
     box-shadow: 0 5px 14px rgba(20, 30, 50, .03)
   }

   .filter-tabs button.active {
     background: var(--purple);
     color: #fff
   }

   .product-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 28px
   }

   .product-card {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 24px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     min-height: 470px;
     box-shadow: 0 16px 35px rgba(18, 31, 54, .04);
     position: relative;
     transition: .28s
   }

   .product-card:hover {
     transform: translateY(-7px);
     box-shadow: var(--shadow)
   }

   .product-card .tag {
     position: absolute;
     top: 20px;
     left: 22px;
     background: #fff;
     color: var(--purple);
     padding: 9px 16px;
     border-radius: 22px;
     font-size: 12px;
     font-weight: 900;
     z-index: 1;
     box-shadow: 0 10px 25px rgba(0, 0, 0, .06)
   }

   .product-img {
     height: 265px;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     padding: 28px 28px 0;
     background: #fff
   }

   .product-img img {
     height: 230px;
     width: 100%;
     object-fit: contain
   }

   .product-body {
     border-top: 1px solid var(--border);
     padding: 24px 26px 28px
   }

   .product-body h3 {
     margin: 0 0 10px;
     color: #061425;
     font-size: 24px
   }

   .product-body p {
     font-size: 17px;
     line-height: 1.6;
     margin: 0 0 14px
   }

   .read {
     font-weight: 900;
     color: var(--primary);
     display: inline-flex;
     gap: 7px;
     align-items: center
   }

   .why {
     background: #fff
   }

   .why-carousel {
     position: relative;
     overflow: hidden
   }

   .why-track {
     display: flex;
     gap: 28px;
     transition: transform .55s ease
   }

   .why-card {
     flex: 0 0 calc((100% - 56px)/3);
     border: 1px solid var(--border);
     border-radius: 24px;
     min-height: 300px;
     padding: 34px 32px;
     background: #fff;
     box-shadow: 0 14px 34px rgba(18, 31, 54, .04)
   }

   .why-icon {
     width: 72px;
     height: 72px;
     background: #fff4cd;
     clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
     display: grid;
     place-items: center;
     color: var(--purple);
     font-size: 31px;
     margin-bottom: 22px
   }

   .why-card h3 {
     font-size: 24px;
     margin: 0 0 14px;
     color: #061425
   }

   .why-card p {
     font-size: 18px;
     line-height: 1.65;
     margin: 0
   }

   .carousel-controls {
     display: flex;
     justify-content: center;
     gap: 12px;
     margin-top: 28px
   }

   .carousel-controls button {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     border: 1px solid var(--border);
     background: #fff;
     color: var(--purple);
     font-size: 20px;
     cursor: pointer;
     transition: .25s
   }

   .carousel-controls button:hover {
     background: var(--purple);
     color: #fff
   }

   .process {
     background: var(--purple);
     color: #fff
   }

   .process .title,
   .process .lead {
     color: #fff
   }

   .process .eyebrow {
     background: rgba(255, 255, 255, .22);
     border-color: rgba(255, 255, 255, .14);
     color: #fff
   }

   .timeline {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
     margin-top: 42px
   }

   .step {
     background: rgba(255, 255, 255, .09);
     border: 1px solid rgba(255, 255, 255, .18);
     border-radius: 24px;
     padding: 34px;
     min-height: 235px
   }

   .step b {
     display: grid;
     place-items: center;
     width: 62px;
     height: 54px;
     background: #ffe486;
     color: var(--purple);
     clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
     font-size: 24px;
     margin-bottom: 26px
   }

   .step h3 {
     font-size: 21px;
     margin: 0 0 8px;
     color: #fff
   }

   .step p {
     font-size: 17px;
     line-height: 1.55;
     color: #eef0ff;
     margin: 0
   }

   .gallery {
     background: #f7f8fb
   }

   .gallery-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px
   }

   .gallery-item {
     height: 210px;
     border-radius: 14px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
     cursor: zoom-in
   }

   .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: .45s
   }

   .gallery-item:hover img {
     transform: scale(1.08)
   }

   .cases {
     background: #fff
   }

   .case-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px
   }

   .case {
     border-radius: 20px;
     overflow: hidden;
     position: relative;
     height: 275px;
     cursor: zoom-in;
     box-shadow: var(--shadow);
     background: #111
   }

   .case img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: .45s
   }

   .case:hover img {
     transform: scale(1.08)
   }

   .case:before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .06));
     z-index: 1
   }

   .case div {
     position: absolute;
     left: 24px;
     right: 24px;
     bottom: 24px;
     z-index: 2;
     color: #fff
   }

   .case span {
     font-weight: 900;
     color: var(--accent2);
     text-transform: uppercase;
     letter-spacing: 1.5px
   }

   .case h3 {
     margin: 7px 0 0;
     font-size: 24px
   }

   .services {
     background: #fff
   }

   .service-row {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
     gap: 24px
   }

   .service-card {
     position: relative;
     border-radius: 18px;
     min-height: 330px;
     overflow: hidden;
     box-shadow: var(--shadow);
     background: #111;
     color: #fff
   }

   .service-card img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: .55s
   }

   .service-card:hover img {
     transform: scale(1.08)
   }

   .service-card:before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, .1));
     z-index: 1
   }

   .service-card div {
     position: absolute;
     left: 26px;
     right: 26px;
     bottom: 26px;
     z-index: 2
   }

   .service-card h3 {
     font-size: 25px;
     margin: 0 0 10px
   }

   .service-card p {
     line-height: 1.6;
     margin: 0 0 14px
   }

   .partners {
     background: #f6f6f6
   }

   .partner-marquee {
     overflow: hidden;
     position: relative;
     padding: 8px 0
   }

   .partner-marquee:before,
   .partner-marquee:after {
     content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     width: 90px;
     z-index: 2;
     pointer-events: none
   }

   .partner-marquee:before {
     left: 0;
     background: linear-gradient(90deg, #f6f6f6, rgba(246, 246, 246, 0))
   }

   .partner-marquee:after {
     right: 0;
     background: linear-gradient(270deg, #f6f6f6, rgba(246, 246, 246, 0))
   }

   .partner-track {
     display: flex;
     gap: 22px;
     width: max-content
   }

   .partner-track.loop {
     animation: partnerLoop 22s linear infinite
   }

   .partner {
     flex: 0 0 220px;
     height: 116px;
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 14px;
     display: grid;
     place-items: center;
     padding: 18px;
     transition: .3s
   }

   .partner:hover {
     transform: none;
     box-shadow: none
   }

   .partner img {
     max-height: 70px;
     object-fit: contain
   }

   @keyframes partnerLoop {
     from {
       transform: translateX(0)
     }

     to {
       transform: translateX(calc(-50% - 11px))
     }
   }

   .contact-band {
     background: var(--primary);
     color: #fff;
     padding: 55px 0
   }

   .contact-band .container {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 30px;
     align-items: center
   }

   .contact-band h2 {
     font-size: 34px;
     margin: 0 0 8px
   }

   .footer {
     background: #f2f2f2;
     color: #666;
     padding: 72px 0 28px
   }

   .footer-grid {
     display: grid;
     grid-template-columns: 1.25fr .8fr 1fr 1.15fr;
     gap: 56px;
     align-items: start;
     max-width: 1080px;
     margin: 0 auto
   }

   .footer-brand img {
     height: 64px;
     width: auto;
     margin-bottom: 22px
   }

   .footer-brand h3 {
     margin: 0;
     color: #0d5265;
     font-size: 20px;
     font-weight: 900;
     text-transform: uppercase
   }

   .footer-brand span {
     display: block;
     color: var(--purple);
     font-weight: 800;
     margin: 5px 0 24px
   }

   .footer p {
     line-height: 1.45;
     margin: 0 0 22px
   }

   .footer h4 {
     color: #0d5265;
     margin: 0 0 24px;
     font-size: 22px
   }

   .footer ul {
     list-style: none;
     margin: 0;
     padding: 0
   }

   .footer li {
     margin: 0 0 16px
   }

   .footer a {
     color: #666;
     transition: .25s
   }

   .footer a:hover {
     color: var(--purple)
   }

   .footer-social {
     display: flex;
     gap: 12px
   }

   .footer-social a {
     width: 43px;
     height: 43px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: var(--purple);
     color: #fff;
     font-size: 18px
   }

   .footer-social a:hover {
     background: var(--accent);
     color: var(--primary)
   }

   .copy {
     border-top: 1px solid #9aa7b3;
     margin-top: 28px;
     padding-top: 24px;
     text-align: center;
     color: #666
   }

   .copy strong {
     color: #0d5265;
     letter-spacing: 1px
   }

   .whatsapp,
   .to-top {
     position: fixed;
     right: 20px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: #fff;
     z-index: 998;
     box-shadow: var(--shadow)
   }

   .whatsapp {
     bottom: 82px;
     width: 56px;
     height: 56px;
     background: #25d366;
     font-size: 30px
   }

   .to-top {
     bottom: 18px;
     width: 48px;
     height: 48px;
     background: var(--purple);
     font-size: 22px
   }

   .modal,
   .image-modal {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .72);
     z-index: 3000;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 24px
   }

   .modal.open,
   .image-modal.open {
     display: flex;
     animation: modalFade .25s ease
   }

   .modal-card {
     width: min(620px, 96vw);
     background: #fff;
     border-radius: 22px;
     padding: 30px;
     position: relative;
     box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
     animation: modalUp .25s ease
   }

   .modal-card h2 {
     margin: 0 0 8px;
     color: var(--dark);
     font-size: 30px
   }

   .modal-card p {
     margin: 0 0 20px;
     line-height: 1.55
   }

   .modal-close,
   .image-close {
     position: absolute;
     top: 16px;
     right: 16px;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     border: 0;
     background: #f1f3f5;
     font-size: 24px;
     cursor: pointer
   }

   .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px
   }

   .form-grid input,
   .form-grid select,
   .form-grid textarea {
     width: 100%;
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 14px;
     font-size: 15px
   }

   .form-grid textarea {
     grid-column: 1/-1;
     height: 110px;
     resize: vertical
   }

   .form-grid .full {
     grid-column: 1/-1
   }

   .image-modal img {
     max-width: min(1120px, 94vw);
     max-height: 88vh;
     object-fit: contain;
     background: #fff;
     border: 6px solid #fff
   }

   .image-close {
     background: #fff
   }

   .image-modal .image-close {
     color: #111
   }

   @keyframes modalFade {
     from {
       opacity: 0
     }

     to {
       opacity: 1
     }
   }

   @keyframes modalUp {
     from {
       transform: translateY(24px);
       opacity: 0
     }

     to {
       transform: translateY(0);
       opacity: 1
     }
   }

   @media(max-width:1050px) {
     .topbar .container {
       justify-content: center;
       text-align: center
     }

     .top-left,
     .top-right {
       justify-content: center
     }

     .hamb {
       display: block
     }

     .nav {
       height: auto;
       min-height: 82px
     }

     .menu {
       position: absolute;
       top: 100%;
       left: 0;
       right: 0;
       display: none;
       background: #fff;
       box-shadow: var(--shadow);
       padding: 10px 18px 20px;
       flex-direction: column;
       align-items: stretch
     }

     .menu.open {
       display: flex
     }

     .menu>li>a {
       padding: 15px 22px
     }

     .dropdown-panel {
       position: static;
       width: 100%;
       box-shadow: none;
       grid-template-columns: 1fr;
       display: grid;
       max-height: 0;
       opacity: 0;
       visibility: hidden;
       overflow: hidden;
       padding: 0 22px;
       border-top: 0;
       transform: none;
       transition: max-height .42s ease, opacity .28s ease, padding .28s ease;
       pointer-events: auto
     }

     .has-drop.open .dropdown-panel {
       max-height: 900px;
       opacity: 1;
       visibility: visible;
       padding: 15px 22px 22px
     }

     .nav-cta {
       display: none
     }

     .section-head,
     .about-top,
     .about-grid,
     .founder-wrap,
     .contact-band .container {
       grid-template-columns: 1fr
     }

     .product-grid,
     .case-grid,
     .service-row {
       grid-template-columns: 1fr 1fr
     }

     .timeline,
     .gallery-grid {
       grid-template-columns: repeat(2, 1fr)
     }

     .footer-grid {
       grid-template-columns: 1fr 1fr
     }

     .partner {
       flex-basis: calc((100% - 22px)/2)
     }

     .why-card {
       flex-basis: calc((100% - 28px)/2)
     }

     .title {
       font-size: 42px
     }

     .hero-box h1 {
       font-size: 50px
     }

     .founder-photo img {
       height: 520px
     }
   }

   @media(max-width:640px) {
     .section {
       padding: 64px 0
     }

     .topbar {
       display: none
     }

     .hero {
       min-height: 620px
     }

     .hero-box h1 {
       font-size: 38px
     }

     .hero-box p {
       font-size: 17px
     }

     .hero-arrow {
       display: none
     }

     .title {
       font-size: 34px
     }

     .product-grid,
     .case-grid,
     .service-row,
     .timeline,
     .gallery-grid,
     .footer-grid,
     .form-grid {
       grid-template-columns: 1fr
     }

     .partner {
       flex-basis: 100%
     }

     .why-card {
       flex-basis: 100%
     }

     .about-top {
       gap: 24px
     }

     .founder-photo img {
       height: 430px
     }

     .footer-grid {
       gap: 26px
     }

     .contact-band .container {
       text-align: center
     }

     .logo img {
       height: 58px
     }
   }

/* OrcaMinds product image fitting fixes only - index gallery/services kept original */
.product-img,
.gallery-main,
.product-card .product-img {
  overflow: hidden;
}
.product-img img,
.gallery-main img,
.product-card img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.product-card .product-img img {
  width: 100%;
  height: 100%;
}