:root {
      --ocean:   #0A3D62;
      --green:   #1ABC9C;
      --orange:  #F39C12;
      --gray:    #7F8C8D;
      --sand:    #F4F6F7;
      --dark:    #061F33;
      --darker:  #030F1A;
      --white:   #ffffff;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'DM Sans', sans-serif; background: var(--sand); }

    /* ─── PRE-FOOTER CTA BAND ─────────────────────────────── */
    .cta-band {
      background: linear-gradient(100deg, var(--ocean) 0%, #0d5080 50%, var(--ocean) 100%);
      padding: 56px 0;
      position: relative;
      overflow: hidden;
    }
    .cta-band::before {
      content: '';
      position: absolute;
      top: -60px; right: -80px;
      width: 380px; height: 380px;
      background: radial-gradient(circle, rgba(26,188,156,0.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .cta-band::after {
      content: '';
      position: absolute;
      bottom: -80px; left: -60px;
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(243,156,18,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .cta-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 10px;
    }
    .cta-heading {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 800;
      text-transform: uppercase;
      color: var(--white);
      line-height: 1.05;
      margin-bottom: 0;
    }
    .cta-heading span { color: var(--orange); }
    .cta-sub {
      color: rgba(255,255,255,0.7);
      font-size: 0.95rem;
      line-height: 1.6;
      max-width: 360px;
    }
    .btn-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--orange);
      color: var(--white);
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 14px 30px;
      border-radius: 4px;
      text-decoration: none;
      border: none;
      transition: all 0.25s;
      position: relative;
      overflow: hidden;
    }
    .btn-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.1);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s ease;
    }
    .btn-cta:hover::before { transform: scaleX(1); }
    .btn-cta:hover {
      color: var(--white);
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(243,156,18,0.45);
    }
    .btn-cta-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: var(--white);
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 13px 30px;
      border-radius: 4px;
      text-decoration: none;
      border: 2px solid rgba(255,255,255,0.35);
      transition: all 0.25s;
    }
    .btn-cta-outline:hover {
      border-color: var(--green);
      color: var(--green);
      transform: translateY(-3px);
    }

    /* ─── MAIN FOOTER ─────────────────────────────────────── */
    .footer-main {
      background: var(--dark);
      padding: 72px 0 0;
      position: relative;
    }

    /* subtle map watermark */
    .footer-main::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(26,188,156,0.06)'/%3E%3C/svg%3E") repeat;
      pointer-events: none;
    }

    /* ─── LOGO COL ─────────────────────────────────────────── */
    .footer-logo-img {
      height: 52px;
      width: auto;
      object-fit: contain;
      filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(26,188,156,0.2));
      margin-bottom: 16px;
      display: block;
    }
    .footer-brand-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.5rem;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--white);
      letter-spacing: 0.04em;
      line-height: 1;
    }
    .footer-brand-name span { color: var(--green); }
    .footer-tagline {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 20px;
      display: block;
    }
    .footer-desc {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.55);
      line-height: 1.75;
      max-width: 300px;
    }

    /* social icons */
    .social-icons { display: flex; gap: 10px; margin-top: 24px; }
    .social-icons a {
      width: 36px; height: 36px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,0.12);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      font-size: 0.95rem;
      transition: all 0.25s;
    }
    .social-icons a:hover {
      background: var(--green);
      border-color: var(--green);
      color: var(--white);
      transform: translateY(-3px);
    }

    /* ─── COLUMN HEADINGS ─────────────────────────────────── */
    .footer-col-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 20px;
      position: relative;
      padding-bottom: 12px;
    }
    .footer-col-title::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 32px; height: 2px;
      background: var(--green);
      border-radius: 2px;
    }

    /* ─── LINK LISTS ──────────────────────────────────────── */
    .footer-links { list-style: none; padding: 0; margin: 0; }
    .footer-links li { margin-bottom: 10px; }
    .footer-links a {
      color: rgba(255,255,255,0.55);
      font-size: 0.88rem;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: color 0.22s, gap 0.22s;
    }
    .footer-links a i { color: var(--green); font-size: 0.8rem; flex-shrink: 0; }
    .footer-links a:hover { color: var(--white); gap: 12px; }

    /* ─── CONTACT INFO ────────────────────────────────────── */
    .contact-item {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
      align-items: flex-start;
    }
    .contact-icon {
      width: 36px; height: 36px;
      background: rgba(26,188,156,0.12);
      border: 1px solid rgba(26,188,156,0.2);
      border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      color: var(--green);
      font-size: 0.95rem;
      flex-shrink: 0;
    }
    .contact-label {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 2px;
    }
    .contact-value {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.7);
    }
    .contact-value a { color: rgba(255,255,255,0.7); text-decoration: none; }
    .contact-value a:hover { color: var(--green); }

    /* ─── NEWSLETTER ──────────────────────────────────────── */
    .newsletter-form {
      display: flex;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.12);
    }
    .newsletter-input {
      flex: 1;
      background: rgba(255,255,255,0.06);
      border: none;
      outline: none;
      padding: 10px 14px;
      font-size: 0.85rem;
      color: var(--white);
      font-family: 'DM Sans', sans-serif;
    }
    .newsletter-input::placeholder { color: rgba(255,255,255,0.35); }
    .newsletter-btn {
      background: var(--green);
      border: none;
      padding: 10px 16px;
      color: var(--white);
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.2s;
    }
    .newsletter-btn:hover { background: #17a589; }

    /* certifications / badges */
    .badge-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 4px;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.55);
    }
    .badge-item i { color: var(--green); font-size: 1rem; }

    /* ─── DIVIDER ─────────────────────────────────────────── */
    .footer-divider {
      border: none;
      border-top: 1px solid rgba(255,255,255,0.07);
      margin: 48px 0 0;
    }

    /* ─── BOTTOM BAR ──────────────────────────────────────── */
    .footer-bottom {
      background: var(--darker);
      padding: 18px 0;
    }
    .copyright {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.4);
    }
    .copyright a { color: var(--green); text-decoration: none; }
    .copyright a:hover { color: var(--orange); }
    .legal-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
    .legal-links a {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.4);
      text-decoration: none;
      transition: color 0.2s;
    }
    .legal-links a:hover { color: var(--white); }

    /* scroll-to-top */
    .scroll-top {
      position: fixed;
      bottom: 28px; right: 24px;
      width: 44px; height: 44px;
      background: var(--ocean);
      border: 2px solid var(--green);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--green);
      font-size: 1.1rem;
      cursor: pointer;
      text-decoration: none;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.3s;
      z-index: 999;
    }
    .scroll-top.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .scroll-top:hover {
      background: var(--green);
      color: var(--white);
    }

    /* reveal animation on scroll */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 767.98px) {
      .legal-links { justify-content: flex-start; margin-top: 6px; }
      .footer-main { padding: 48px 0 0; }
    }