:root {
      --primary: #19446A;
      --secondary: #F39C12;
      --accent: #63C29B;
      --background: #F8F8F8;
      --text: #222F3E;
      --footer: #1B263B;
      --button: #F39C12;
      --buttonText: #fff;
      --lightGray: #E8E8EA;
      --hero-gradient: linear-gradient(45deg, #19446A 60%, #63C29B 100%);
      --shape-gradient: radial-gradient(circle at 60% 40%, #63C29b22 30%, transparent 75%);
    }
    body {
      background: var(--background);
      color: var(--text);
      font-family: 'Inter', Arial, Helvetica, sans-serif;
      overflow-x: hidden;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Montserrat', Arial, Helvetica, sans-serif;
      letter-spacing: -0.5px;
      color: var(--primary);
    }
    .navbar {
      background: rgba(25, 68, 106, 0.96);
      box-shadow: 0 4px 24px 0 #222F3E11;
    }
    .navbar-brand, .navbar-nav .nav-link  {
      font-weight: 700;
      color: #fff !important;
      text-shadow: 1px 1px 5px #0004;
    }
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link:hover {
      color: var(--secondary) !important;
      border-bottom: 2px solid var(--secondary);
      background: transparent !important;
    }
    .sticky-top {
      z-index: 1040 !important;
    }
    .hero-section {
      min-height: 90vh;
      display: flex;
      align-items: center;
      background:
        var(--hero-gradient),
        url('images/hero-creative-studios-banner.jpeg') center center/cover no-repeat;
      position: relative;
      overflow: hidden;
    }
    .hero-bg-overlay {
      position: absolute;
      inset: 0;
      background: var(--shape-gradient);
      z-index: 1;
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 2;
    }
    .hero-headline {
      font-size: 2.75rem;
      font-weight: 900;
      line-height: 1.1;
      color: #fff;
      text-shadow: 2px 4px 24px #222F3E77;
      margin-bottom: 1rem;
    }
    .hero-subheadline {
      font-size: 1.3rem;
      color: #f8f8f8;
      font-family: 'Inter', Arial, Helvetica, sans-serif;
      font-weight: 500;
      margin-bottom: 2.25rem;
      text-shadow: 1px 4px 18px #222F3E55;
    }
    .btn-primary-custom {
      background: var(--button);
      color: var(--buttonText);
      font-weight: 700;
      border-radius: 2rem;
      padding: .85rem 2.2rem;
      border: 0;
      transition: background 0.2s, box-shadow 0.2s;
      box-shadow: 0 4px 18px 0 var(--secondary)22;
      font-size: 1.1rem;
    }
    .btn-primary-custom:hover, .btn-primary-custom:focus {
      background: #e87c0c;
      color: #fff;
      box-shadow: 0 8px 28px 0 var(--secondary)44;
      outline: 0;
    }
    .section-divider-diagonal {
      position: relative;
      height: 56px;
      overflow: hidden;
    }
    .section-divider-diagonal svg {
      position: absolute;
      top: -20px;
      left: 0;
      width: 100vw;
      height: 80px;
      display: block;
    }
    /* Card, Service, and Team styling */
    .card-service {
      background: #fff;
      border: none;
      border-radius: 1.5rem;
      box-shadow: 0 8px 32px 0 rgba(25,68,106,0.08), 0 1.5px 4px 0 rgba(99,194,155,0.10);
      transition: transform 0.2s cubic-bezier(.45,1.65,.45,1.2), box-shadow 0.2s;
      will-change: transform;
      position: relative;
      overflow: hidden;
    }
    .card-service:hover {
      transform: translateY(-8px) scale(1.025) rotateZ(-1deg);
      box-shadow: 0 16px 56px 0 rgba(99,194,155,0.12);
      z-index: 2;
    }
    .service-icon {
      font-size: 2.5rem;
      color: var(--accent);
      margin-bottom: 1.2rem;
      transition: color .18s;
    }
    .card-service:hover .service-icon {
      color: var(--secondary);
      animation: service-bounce 0.5s 1;
    }
    @keyframes service-bounce {
      0% { transform: scale(1);}
      30% { transform: scale(1.15);}
      60% { transform: scale(0.94);}
      85% { transform: scale(1.08);}
      100% { transform: scale(1);}
    }
    .card-title {
      color: var(--primary);
      font-weight: 700;
    }
    .floating-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      width: 100%; height: 100%;
    }
    .floating-particles span {
      position: absolute;
      width: 24px; height: 24px;
      background: linear-gradient(145deg, var(--accent) 20%, var(--secondary) 80%);
      opacity: 0.13;
      border-radius: 100%;
      filter: blur(1px);
      animation: float-particle 12s linear infinite alternate;
    }
    .floating-particles span:nth-child(1) { left: 17%; top: 21%; animation-duration: 11s;}
    .floating-particles span:nth-child(2) { left: 50%; top: 35%; width: 34px; height: 34px; animation-delay: 2s; }
    .floating-particles span:nth-child(3) { left: 77%; top: 67%; width: 16px; height: 16px; animation-delay: 3.5s; }
    .floating-particles span:nth-child(4) { left: 7%; top: 80%; width: 18px; height: 18px; animation-duration: 9s;}
    @keyframes float-particle {
      0% { transform: translateY(0) scale(1);}
      50%{ transform: translateY(-48px) scale(1.15);}
      100%{ transform: translateY(8px) scale(1);}
    }
    .gradient-border {
      border: 3.5px solid;
      border-image-slice: 1;
      border-width: 3.5px;
      border-radius: 16px;
      border-image-source: linear-gradient(45deg, var(--accent), var(--secondary));
    }
    .features-grid .feature-icon {
      font-size: 2rem;
      background: var(--accent);
      color: #fff;
      border-radius: 50%;
      padding: 1rem;
      transition: background .2s, color .2s;
      margin-bottom: .7rem;
    }
    .features-grid .feature-card:hover .feature-icon {
      background: var(--secondary);
      color: #fff;
      animation: service-bounce 0.41s 1 cubic-bezier(.47,1.64,.7,1.23);
    }
    .about-highlight {
      background: var(--accent);
      color: #fff;
      padding: 0.5rem 1.6rem;
      border-radius: 22px;
      display: inline-block;
      font-size: 1.1rem;
      margin: .4rem .3rem;
      font-weight: 500;
    }
    .vertical-rhythm-section {
      min-height: 420px;
      margin-bottom: 6rem;
    }
    .testimonial-carousel .carousel-inner {
      min-height: 300px;
    }
    .testimonial-quote {
      font-size: 1.18rem;
      font-style: italic;
      color: #222F3E;
      font-family: Georgia, 'Times New Roman', Times, serif;
      text-shadow: 0 1px 6px #f8f8f8;
    }
    .testimonial-name {
      color: var(--primary);
      font-weight: 700;
      margin-bottom: 0.2rem;
    }
    .testimonial-role {
      color: var(--accent);
      font-size: .98rem;
      font-weight: 500;
    }
    .testimonial-stars .fa-star {
      color: var(--secondary);
      text-shadow: 0 2.5px 6px #f39c1230;
    }
    .team-card {
      background: #fff;
      border-radius: 1.3rem;
      box-shadow: 0 2px 18px 0 rgba(25,68,106, .10);
      border: none;
      overflow: hidden;
      transition: transform .16s cubic-bezier(.41,1.71,.45,1.4), box-shadow .18s;
    }
    .team-card:hover {
      transform: translateY(-8px) scale(1.04) rotateZ(0.5deg);
      box-shadow: 0 8px 28px 0 rgba(99,194,155,.11);
      z-index: 2;
    }
    .team-photo {
      object-fit: cover;
      aspect-ratio: 1/1;
      border-radius: 50%;
      border: 3.5px solid var(--lightGray);
      background: #E8E8EA22;
    }
    .newsletter-section {
      background: linear-gradient(45deg, #63C29B 40%, #F8F8F8 100%);
      box-shadow: 0 0px 16px #19446A09;
      border-radius: 2rem;
      overflow: hidden;
      position: relative;
    }
    .newsletter-section::after {
      content: '';
      display: block;
      position: absolute;
      bottom: -24px; right: -64px;
      width: 240px; height: 180px;
      background: var(--secondary);
      opacity: .13;
      border-radius: 42% 58% 70% 30%/52% 48% 52% 48%;
      filter: blur(24px);
      pointer-events: none;
    }
    .newsletter-image {
      box-shadow: 0 16px 42px #222F3E11;
      border-radius: 1.5rem;
    }
    .gradient-bg-outline {
      border: 2.7px solid;
      border-image: linear-gradient(45deg, var(--secondary) 10%, var(--accent) 100%) 1;
    }
    .scroll-top-btn {
      position: fixed;
      bottom: 36px;
      right: 30px;
      z-index: 1200;
      background: var(--secondary);
      color: #fff;
      padding: .7rem 1.1rem;
      font-size: 1.3rem;
      border-radius: 50%;
      border: 0;
      box-shadow: 0 2px 20px #F39C1299;
      opacity: 0.87;
      cursor: pointer;
      display: none;
      transition: opacity .18s, box-shadow .2s;
    }
    .scroll-top-btn:active, .scroll-top-btn:focus {
      box-shadow: 0 3.5px 28px #F39C12ee;
      opacity: 1;
      outline: 0;
    }
    .cookie-consent-banner {
      background: #fff;
      color: var(--primary);
      border-top: 2.5px solid var(--lightGray);
      position: fixed;
      bottom: 0;
      left: 0; right: 0;
      width: 100vw;
      z-index: 2000;
      box-shadow: 0 -3px 18px #63C29B13;
      font-size: 1.03rem;
      padding: 1.1rem 2rem 1rem 1.5rem;
      display: none;
      align-items: center;
      flex-wrap: wrap;
    }
    .cookie-consent-banner button {
      background: var(--secondary);
      color: #fff;
      border: 0;
      border-radius: 16px;
      padding: .42rem 1.26rem;
      font-weight: 700;
      box-shadow: 0 3px 16px #F39C1222;
      margin-left: 1.8rem;
      font-size: 1.07rem;
      transition: background .16s;
    }
    .cookie-consent-banner button:hover {
      background: #e87c0c;
      color: #fff;
    }
    .footer-area {
      background: var(--footer);
      color: #f8f8f8;
      padding-top: 48px;
      padding-bottom: 0;
      border-top-left-radius: 3.5rem;
      border-top-right-radius: 1.5rem;
      box-shadow: 0 -9px 36px #63C29B19;
    }
    .footer-link, .footer-link:visited, .footer-link:active {
      color: #F8F8F8DD;
      text-decoration: none;
      font-weight: 500;
      transition: color .13s;
    }
    .footer-link:hover {
      color: var(--secondary);
      text-decoration: underline;
    }
    .footer-socicon {
      font-size: 1.54rem;
      margin: 0 .67rem;
      color: #f8f8f8bb;
      transition: color .16s;
    }
    .footer-socicon:hover, .footer-socicon:focus {
      color: var(--accent);
    }
    .gradient-footerform input[type="email"], .gradient-footerform input[type="text"] {
      border-radius: 1.4rem;
      border: none;
      padding: .74rem 1.4rem;
      margin-right: .6rem;
      width: 62%;
      max-width: 290px;
    }
    .gradient-footerform button {
      background: var(--accent);
      color: #fff;
      border-radius: 1.4rem;
      padding: .7rem 2.1rem;
      border: none;
      font-weight: 600;
    }
    .gradient-footerform button:hover, .gradient-footerform button:focus {
      background: var(--secondary);
      color: #fff;
    }
    .map-rounded-overlay {
      border-radius: 1.5rem;
      overflow: hidden;
      box-shadow: 0 4px 48px #19446a19;
      border: 3.5px solid var(--accent);
    }
    .contact-social-btn {
      background: var(--secondary);
      color: #fff;
      border: none;
      border-radius: 1rem;
      font-size: 1rem;
      padding: .55rem 1.45rem;
      margin: .2rem .5rem .2rem 0;
      transition: background .16s;
      font-weight: 600;
      outline: none;
      display: inline-block;
    }
    .contact-social-btn:hover, .contact-social-btn:focus {
      background: var(--accent);
      color: #fff;
      outline: none;
    }
    .form-control:focus {
      box-shadow: 0 0 0 2.5px var(--accent)44;
      border-color: var(--primary);
    }
    .contact-badge {
      background: var(--accent);
      color: #fff;
      border-radius: 14px;
      font-size: 1rem;
      padding: .18rem 1.2rem;
      font-weight: 600;
      margin: 0 .6rem;
      box-shadow: 0 1.5px 6px #63C29B22;
    }
    @media (max-width: 767.98px) {
      .hero-headline { font-size: 2rem; }
      .hero-section { min-height: 64vh; }
      .footer-area { padding-top: 32px; }
      .vertical-rhythm-section { margin-bottom: 2.2rem;}
    }
    /* Parallax hover on images */
    .parallax-hover {
      transition: transform .18s cubic-bezier(.47,1.34,.42,1.19);
      will-change: transform;
    }
    .parallax-hover:hover {
      transform: scale(1.04) rotateZ(-1deg) translateY(-8px);
      box-shadow: 0 10px 38px #222F3E19;
      z-index: 3;
    }
    /* Accordion and progress styling */
    .process-step-circle {
      width: 2.2rem;
      height: 2.2rem;
      display: inline-block;
      border-radius: 100%;
      background: var(--accent);
      color: #fff;
      text-align: center;
      font-weight: 800;
      font-size: 1.27rem;
      line-height: 2.2rem;
      margin-right: .93rem;
      margin-bottom: .19rem;
      box-shadow: 0 2px 10px #63C29B19;
      border: 2.5px solid var(--secondary);
    }
    .process-stepbar {
      background: var(--primary);
      height: 0.35rem;
      width: 100%;
      margin-bottom: 2.1rem;
      border-radius: 1.4rem;
      box-shadow: 0 1.5px 12px #19446a33;
    }
    /* FAQ & Live Chat */
    .faq-drawer {
      position: fixed;
      right: 0;
      bottom: 0;
      width: 98vw;
      max-width: 410px;
      background: #fff;
      border-top-left-radius: 2rem;
      box-shadow: 0 -5px 33px #19446a19;
      z-index: 1750;
      padding: 1.8rem 2.3rem 1.5rem 2rem;
      display: none;
      flex-direction: column;
      gap: 1.1rem;
      border-left: 4px solid var(--accent);
      border-top: 4px solid var(--secondary);
    }
    .faq-drawer.open {
      display: flex;
      animation: fadeInUp .38s;
    }
    @keyframes fadeInUp {
      from { transform: translateY(100px); opacity: 0;}
      to { transform: translateY(0); opacity: 1;}
    }
    .faq-btn {
      position: fixed;
      bottom: 86px;
      right: 30px;
      z-index: 1170;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 2rem 2rem 1rem 2rem;
      padding: .7rem 2rem .7rem 1.2rem;
      box-shadow: 0 4px 18px #19446A23;
      font-size: 1.14rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .18s;
      display: flex;
      gap: .6rem;
      align-items: center;
    }
    .faq-btn:hover, .faq-btn:focus {
      background: var(--secondary);
      color: #fff;
      outline: 0;
    }
    .faq-question {
      font-weight: 700;
      color: var(--primary);
      margin-bottom: .5rem;
      font-size: 1.11rem;
    }
    .faq-answer {
      font-size: 1.027rem;
      color: var(--text);
    }
    .faq-drawer .close-faq {
      align-self: flex-end;
      background: none;
      border: none;
      font-size: 1.51rem;
      color: var(--secondary);
      cursor: pointer;
      margin-top: -.7rem;
      margin-right: -.5rem;
    }