@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/f21d2ed782c72654.woff2) format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/bd541e2d7b7c712d.woff2) format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/ece9cb794bea716a.woff2) format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/f3dbce7be994996a.woff2) format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/4db42137a988032e.woff2) format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/536b4af8c047a76e.woff2) format('woff2');
}
/* Latin delivery subset */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/4db42137a988032e-latin.woff2) format('woff2');
  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/536b4af8c047a76e-latin.woff2) format('woff2');
  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/bd541e2d7b7c712d-latin.woff2) format('woff2');
  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/ece9cb794bea716a-latin.woff2) format('woff2');
  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/f21d2ed782c72654-latin.woff2) format('woff2');
  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://sustify.org/wp-content/plugins/sustify-design/assets/optimized/f3dbce7be994996a-latin.woff2) format('woff2');
  unicode-range: U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F;
}


    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    :root {
      --brand: #013c42;
      --brand-l: #045560;
      --brand-ll: #07707e;
      --mint: #64c99a;
      --mint-d: #4bb585;
      --mint-l: #8ddab5;
      --mint-pale: #e8f8f0;
      --mint-bg: #f2fbf7;
      --lime: #d3d800;
      --lime-l: #e2e64a;
      --olive: #d3d800;
      --olive-l: #e2e64a;
      --olive-pale: #f8f9d7;
      --petrol: #0dacac;
      --petrol-l: #1ec8c8;
      --petrol-pale: #e0f7f7;
      --sea: #307569;
      --sea-pale: #e6f2f0;
      --lavender: #a2abf4;
      --lavender-pale: #eceeff;
      --forest: #1b8d41;
      --forest-pale: #e5f4ec;
      --fade-red: #f6a0a3;
      --fade-red-pale: #fdf0f0;
      --wine: #792c2b;
      --lgrey: #b2c5c6;
      --dgrey: #657071;
      --bg: #fff;
      --bg2: #f6faf8;
      --t1: #013c42;
      --t2: #2e5a5f;
      --t3: #6a918f;
      --brd: #d6e8e4;
      --display: 'Rubik', system-ui, sans-serif;
      --body: 'Rubik', system-ui, sans-serif;
      --r: 12px;
      --r2: 16px;
      --r3: 20px;
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: var(--body);
      color: var(--t1);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden
    }

    ::selection {
      background: var(--mint-pale);
      color: var(--brand)
    }

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

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

    @keyframes scroll-l {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }

    .ani {
      animation: fadeUp .65s cubic-bezier(.22, 1, .36, 1) both
    }

    .d1 {
      animation-delay: .07s
    }

    .d2 {
      animation-delay: .14s
    }

    .d3 {
      animation-delay: .21s
    }

    .d4 {
      animation-delay: .28s
    }

    .wrap {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 40px
    }

    /* ===== NAV ===== */
    nav {
      position: sticky;
      top: 0;
      z-index: 999;
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--brd)
    }

    .n {
      max-width: 1240px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      height: 72px
    }

    .n-logo {
      text-decoration: none;
      display: flex;
      align-items: center
    }

    .n-logo img {
      height: 38px;
      width: auto;
      display: block;
    }

    .n-mid {
      display: flex;
      gap: 28px;
      list-style: none
    }

    .n-mid a {
      font-size: 14px;
      font-weight: 500;
      color: var(--t2);
      text-decoration: none;
      transition: color .15s
    }

    .n-mid a:hover {
      color: var(--mint)
    }

    .n-r {
      display: flex;
      gap: 10px;
      align-items: center
    }

    .n-r a {
      font-size: 14px;
      text-decoration: none
    }

    .n-ghost {
      color: var(--t2);
      padding: 8px 16px;
      border-radius: 8px;
      font-weight: 500;
      transition: .15s
    }

    .n-ghost:hover {
      background: var(--mint-pale);
      color: var(--mint)
    }

    .n-fill {
      background: var(--olive);
      color: var(--brand);
      padding: 10px 22px;
      border-radius: 10px;
      font-weight: 700;
      transition: .2s;
      letter-spacing: .01em
    }

    .n-fill:hover {
      background: var(--olive-l);
      box-shadow: 0 2px 8px rgba(211, 216, 0, .3)
    }

    .ham {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      flex-direction: column;
      gap: 4px;
      padding: 6px
    }

    .ham s {
      width: 18px;
      height: 1.5px;
      background: var(--t1);
      display: block;
      text-decoration: none
    }

    /* ===== HERO ===== */
    .hero-wrap {
      overflow: hidden;
      background: #f2fff9;
      position: relative
    }

    .hero {
      padding: 100px 40px 0;
      max-width: 1240px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 40px;
      align-items: end
    }

    .hero-text {
      padding-bottom: 56px
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--brand);
      background: #fff;
      border: 1.5px solid var(--mint-l);
      padding: 7px 16px;
      border-radius: 100px;
      margin-bottom: 32px;
      letter-spacing: .01em;
      box-shadow: 0 2px 14px rgba(0, 185, 145, .15)
    }

    .hero-badge span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--mint);
      flex-shrink: 0;
      animation: badge-pulse 2.2s ease-in-out infinite
    }

    @keyframes badge-pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .4;
        transform: scale(.78)
      }
    }

    .hero h1 {
      font-family: var(--display);
      font-size: clamp(25px, 2.9vw, 37px);
      font-weight: 700;
      line-height: 1.2;
      color: var(--t1);
      letter-spacing: -.025em;
      margin-bottom: 20px;
      transition: all .2s ease;
    }

    .hero h1 em {
      font-style: normal;
      color: var(--brand);
    }


    .hero-p {
      font-size: 17px;
      font-weight: 600;
      line-height: 1.72;
      color: var(--t1);
      margin-bottom: 20px;
      max-width: 480px
    }

    .hero-perks {
      list-style: none;
      padding: 0;
      margin: 0 0 32px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 480px
    }

    .hero-perks li {
      font-size: 15.5px;
      color: var(--t2);
      padding-left: 26px;
      position: relative;
      line-height: 1.6
    }

    .hero-perks li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      width: 15px;
      height: 15px;
      background: var(--mint);
      border-radius: 50%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23013c42' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-size: 10px;
      background-repeat: no-repeat;
      background-position: center
    }

    .hero-btns {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--body);
      font-size: 14.5px;
      font-weight: 600;
      padding: 13px 30px;
      border-radius: 12px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all .22s;
      letter-spacing: .01em
    }

    .btn-g {
      background: var(--brand);
      color: #fff;
      box-shadow: 0 2px 10px rgba(1, 60, 66, .18)
    }

    .btn-g:hover {
      background: var(--brand-l);
      box-shadow: 0 6px 20px rgba(1, 60, 66, .22);
      transform: translateY(-2px)
    }

    .btn-o {
      background: var(--bg);
      color: var(--t1);
      border: 1.5px solid var(--brd);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
    }

    .btn-o:hover {
      border-color: var(--mint);
      color: var(--mint);
      background: var(--mint-pale)
    }

    .btn svg {
      width: 16px;
      height: 16px
    }

    .hero-img {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end
    }

    .hero-img img {
      width: 100%;
      max-width: 620px;
      border-radius: var(--r2) var(--r2) 0 0;
      display: block;
      filter: drop-shadow(0 28px 48px rgba(1, 60, 66, .16));
      position: relative;
      z-index: 1
    }

    .hero-deco {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0
    }

    .hero-deco-1 {
      width: 500px;
      height: 500px;
      background: var(--mint-pale);
      top: -40px;
      right: -60px
    }

    .hero-deco-2 {
      width: 210px;
      height: 210px;
      background: var(--olive-pale);
      bottom: 80px;
      right: -20px;
      opacity: .55
    }

    .hero-chips-top {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      position: relative;
      z-index: 2;
      margin-bottom: 20px;
      width: 100%
    }

    .hero-chip {
      background: #fff;
      border: 1px solid var(--brd);
      border-radius: 14px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 6px 22px rgba(1, 60, 66, .1);
      white-space: nowrap
    }

    .hero-chip-ico {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: var(--mint-pale);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .hero-chip-ico svg {
      width: 16px;
      height: 16px;
      stroke: var(--mint-d);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .hero-chip-n {
      font-size: 13px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.2
    }

    .hero-chip-l {
      font-size: 11px;
      color: var(--t3);
      margin-top: 2px
    }

    /* HERO FLOATS */
    .hero-float {
      position: absolute;
      z-index: 3;
      background: #fff;
      border-radius: 16px;
      padding: 11px 15px;
      box-shadow: 0 10px 36px rgba(1, 60, 66, .13);
      border: 1px solid var(--brd);
      display: flex;
      align-items: center;
      gap: 11px;
      white-space: nowrap
    }

    .hero-float-top {
      top: 32px;
      left: -36px
    }

    .hero-float-bot {
      bottom: 96px;
      right: -18px
    }

    .hero-float-ico {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .hero-float-ico svg {
      width: 16px;
      height: 16px
    }

    .hero-float-n {
      font-size: 13px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.2
    }

    .hero-float-l {
      font-size: 11px;
      color: var(--t3);
      margin-top: 1px
    }

    /* HERO TRUST */
    .hero-trust {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--brd)
    }

    .hero-trust-avas {
      display: flex;
      flex-shrink: 0
    }

    .hero-trust-av {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2.5px solid #fff;
      margin-left: -10px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
      flex-shrink: 0
    }

    .hero-trust-av:first-child {
      margin-left: 0
    }

    .hero-trust-av img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .hero-trust-stars {
      color: #c9a227;
      font-size: 13px;
      letter-spacing: .5px;
      line-height: 1
    }

    .hero-trust-txt {
      font-size: 12.5px;
      color: var(--t3);
      margin-top: 3px
    }

    .hero-trust-txt strong {
      color: var(--t1);
      font-weight: 700
    }

    .hero-cta-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-start
    }

    .cta-note {
      font-size: 11px;
      color: var(--t3);
      margin-top: 5px;
      padding-left: 3px
    }

    /* ===== LOGOS ===== */
    .client-logos {
      padding: 32px 40px 36px;
      background: #fff;
    }
    .client-logos::after {
      content: "";
      display: block;
      max-width: 1160px;
      height: 1px;
      margin: 28px auto 0;
      background: #d8e8e2;
    }
    .client-logos .sec-t {
      max-width: 1160px;
      margin: 0 auto 24px;
      text-align: left;
      font-size: 28px;
      font-weight: 500;
      line-height: 33px;
    }
    .client-logos-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
    }
    .client-logos-grid a {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      min-height: 76px;
      padding: 12px;
      border-radius: 12px;
      transition: background .2s, transform .2s;
    }
    .client-logos-grid a:hover { background: #ebf7f1; transform: translateY(-3px); }
    .client-logos-grid a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
    .client-logos-grid img { display: block; max-width: 110px; width: auto; height: auto; max-height: 48px; object-fit: contain; }
    .client-logos-grid img[alt="Soulbottles"] { max-height: 56px; }
    .client-logos-grid img[alt="Appellando"] { max-width: 140px; max-height: 60px; }
    .client-logos-grid img[alt="Hakro"] { max-width: 95px; max-height: 42px; }
    #testimonials { scroll-margin-top: 100px; }
    @media (max-width: 1100px) {
      .client-logos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .client-logos-grid img { max-width: min(110px, 100%); }
      .client-logos-grid img[alt="Appellando"] { max-width: min(140px, 100%); }
    }
    @media (max-width: 480px) {
      .client-logos { padding: 28px 20px; }
      .client-logos-grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .logos {
      padding: 48px 40px;
      border-bottom: 1px solid var(--brd)
    }

    .logos-lab {
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 24px
    }

    .logos-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px
    }

    .logos-grid span {
      font-size: 14px;
      font-weight: 500;
      color: var(--t2);
      padding: 8px 20px;
      border-radius: 100px;
      border: 1px solid var(--brd);
      background: var(--bg2);
      white-space: nowrap
    }

    /* ===== FEATURES GRID ===== */
    .feat {
      padding: 100px 40px;
      background: #ebf7f1;
      border-top: 1px solid rgba(1, 60, 66, .06);
      border-bottom: 1px solid rgba(1, 60, 66, .06);
      position: relative;
    }

    .feat-in {
      max-width: 1200px;
      margin: 0 auto;
    }

    .sec-h {
      text-align: center;
      max-width: 620px;
      margin: 0 auto 56px;
    }

    .sec-tag {
      display: inline-block;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      color: var(--brand-l);
      background: #ffffff;
      border: 1.5px solid var(--mint-l);
      padding: 6px 16px;
      border-radius: 100px;
      margin-bottom: 18px;
      box-shadow: 0 4px 14px rgba(100, 201, 154, .25);
    }

    .sec-t,
    .feat .sec-t,
    .ind-hd .sec-t,
    .tst .sec-t,
    .lang .sec-t {
      font-family: var(--display);
      font-size: clamp(25px, 2.9vw, 37px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.025em;
      color: var(--t1);
      margin-bottom: 14px;
    }

    .sec-t em,
    .feat .sec-t em {
      font-style: normal;
      color: #38a875;
    }

    .sec-p,
    .feat .sec-p {
      font-size: 16px;
      line-height: 1.68;
      color: var(--t2);
      margin: 0 auto;
    }

    /* PALETTE */
    .btn-olive {
      background: var(--olive);
      color: var(--brand);
      font-family: var(--body);
      font-size: 14.5px;
      font-weight: 700;
      padding: 14px 30px;
      border-radius: 12px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .22s;
      letter-spacing: .01em;
      border: none;
      cursor: pointer;
      box-shadow: 0 2px 12px rgba(211, 216, 0, .24)
    }

    .btn-olive:hover {
      background: var(--olive-l);
      box-shadow: 0 6px 22px rgba(211, 216, 0, .36);
      transform: translateY(-2px)
    }

    .btn-olive svg,
    .btn-petrol svg {
      width: 16px;
      height: 16px
    }

    .btn-petrol {
      background: var(--petrol);
      color: #fff;
      font-family: var(--body);
      font-size: 14.5px;
      font-weight: 600;
      padding: 14px 30px;
      border-radius: 12px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .22s;
      letter-spacing: .01em;
      border: none;
      cursor: pointer;
      box-shadow: 0 2px 12px rgba(13, 172, 172, .24)
    }

    .btn-petrol:hover {
      background: var(--petrol-l);
      box-shadow: 0 6px 22px rgba(13, 172, 172, .36);
      transform: translateY(-2px)
    }

    .tag-petrol {
      color: #004d4d;
      background: var(--petrol-pale);
      border: 1px solid #7dd8d8;
      padding: 5px 14px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      display: inline-block
    }

    .tag-olive {
      color: #4a4c00;
      background: var(--olive-pale);
      border: 1px solid #c5c900;
      padding: 5px 14px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      display: inline-block
    }

    .tag-lavender {
      color: #3040a0;
      background: var(--lavender-pale);
      border: 1px solid #8890e8;
      padding: 5px 14px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      display: inline-block
    }

    .tag-forest {
      color: #0f5228;
      background: var(--forest-pale);
      border: 1px solid #8cd0a8;
      padding: 5px 14px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      display: inline-block
    }

    .tag-wine {
      color: #fff;
      background: var(--wine);
      border: 1px solid var(--wine);
      padding: 5px 14px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      display: inline-block
    }

    .fc:nth-child(2) .fc-ico {
      background: var(--petrol-pale);
      border-color: #7dd8d8
    }

    .fc:nth-child(2) .fc-ico svg {
      stroke: var(--petrol)
    }

    .fc:nth-child(3) .fc-ico {
      background: var(--lavender-pale);
      border-color: #8890e8
    }

    .fc:nth-child(3) .fc-ico svg {
      stroke: var(--lavender)
    }

    .fc:nth-child(4) .fc-ico {
      background: var(--olive-pale);
      border-color: #c5c900
    }

    .fc:nth-child(4) .fc-ico svg {
      stroke: #6e7000
    }

    .fc:nth-child(5) .fc-ico {
      background: var(--sea-pale);
      border-color: #87bbb5
    }

    .fc:nth-child(5) .fc-ico svg {
      stroke: var(--sea)
    }

    .fc:nth-child(6) .fc-ico {
      background: var(--forest-pale);
      border-color: #8cd0a8
    }

    .fc:nth-child(6) .fc-ico svg {
      stroke: var(--forest)
    }

    .fc:nth-child(2):hover {
      border-color: #7dd8d8
    }

    .fc:nth-child(3):hover {
      border-color: #8890e8
    }

    .fc:nth-child(4):hover {
      border-color: #c5c900
    }

    .fc:nth-child(5):hover {
      border-color: #87bbb5
    }

    .fc:nth-child(6):hover {
      border-color: #8cd0a8
    }

    .hero-chip:nth-child(2) .hero-chip-ico {
      background: #f6faf8
    }

    .hero-chip:nth-child(2) .hero-chip-ico svg {
      stroke: var(--petrol)
    }

    .hero-chip:nth-child(3) .hero-chip-ico {
      background: var(--lavender-pale)
    }

    .hero-chip:nth-child(3) .hero-chip-ico svg {
      stroke: var(--lavender)
    }

    .hero-chip:nth-child(2) {
      border-color: #aadede
    }

    .hero-chip:nth-child(3) {
      border-color: #b8bef0
    }

    /* Hero badge -> olive */
    .hero-badge {
      color: #4a4c00;
      background: var(--olive-pale);
      border-color: #c5c900
    }

    /* Features section gradient bg */
    /* Feature card hover border matches icon colour */
    /* Editorial link -> petrol */
    .ed-link {
      color: var(--petrol)
    }

    .ed-link:hover {
      color: var(--petrol-l)
    }

    /* Editorial section subtle tint */

    /* Video glow -> olive */
    .vid::before {
      background: radial-gradient(ellipse at 50% 0%, rgba(211, 216, 0, .1), transparent 70%)
    }

    .vid-play {
      background: var(--olive)
    }

    .vid-play svg {
      fill: var(--brand)
    }

    .vid-box:hover .vid-play {
      background: var(--olive-l)
    }

    /* Standards section gradient + petrol accents */

    .legal {
      border-left-color: var(--petrol)
    }

    .std-pill:nth-child(4n+1) {
      border-color: #c0e8e8;
      color: var(--petrol);
      background: #f6faf8
    }

    .std-pill:nth-child(4n+2) {
      border-color: #c8cdf8;
      color: #3040a0;
      background: var(--lavender-pale)
    }

    .std-pill:nth-child(4n+3) {
      border-color: #b8d4d0;
      color: var(--sea);
      background: var(--sea-pale)
    }

    .std-pill:nth-child(4n+4) {
      border-color: #b0d8b8;
      color: var(--forest);
      background: var(--forest-pale)
    }

    .std-pill:hover {
      border-color: var(--brand) !important;
      color: var(--brand) !important;
      background: var(--mint-pale) !important
    }

    /* Industry cards  -  coloured label tags */
    .ind-card:nth-child(2) .ind-label-tag {
      background: rgba(13, 172, 172, .28);
      border-color: rgba(13, 172, 172, .5)
    }

    .ind-card:nth-child(3) .ind-label-tag {
      background: rgba(162, 171, 244, .28);
      border-color: rgba(162, 171, 244, .5)
    }

    .ind-card:nth-child(4) .ind-label-tag {
      background: rgba(211, 216, 0, .3);
      border-color: rgba(211, 216, 0, .55);
      color: rgba(255, 255, 255, .95)
    }

    .ind-card:nth-child(5) .ind-label-tag {
      background: rgba(48, 117, 105, .3);
      border-color: rgba(48, 117, 105, .55)
    }

    /* Testimonials  -  olive stars, petrol dots & arrows */

    .tst-stars svg {
      fill: var(--olive)
    }

    .tst-dot.active {
      background: var(--petrol)
    }

    .tst-arr:hover {
      background: var(--petrol);
      border-color: var(--petrol)
    }

    .tst-card::before {
      color: var(--petrol);
      opacity: .07
    }

    /* Languages */
    .lc:hover {
      border-color: var(--petrol) !important;
      color: var(--petrol) !important;
      box-shadow: 0 10px 30px rgba(13, 172, 172, .12) !important
    }

    /* Logos  -  palette cycling per pill */
    .logos-grid span:nth-child(5n+2) {
      background: var(--petrol-pale);
      border-color: #a8dcdc;
      color: var(--petrol)
    }

    .logos-grid span:nth-child(5n+3) {
      background: var(--lavender-pale);
      border-color: #b8bef0;
      color: #3040a0
    }

    .logos-grid span:nth-child(5n+4) {
      background: var(--olive-pale);
      border-color: #d4d660;
      color: #4a4c00
    }

    .logos-grid span:nth-child(5n+5) {
      background: var(--forest-pale);
      border-color: #a0c8a8;
      color: var(--forest)
    }

    /* CTA form submit -> olive */
    .cta-f button {
      background:var(--brand);
      color:#fff}

    .cta-f button:hover {
      background:var(--brand-l);
      box-shadow:0 8px 24px rgba(1,60,66,.28)}

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

    .fc {
      padding: 32px 28px;
      border-radius: 20px;
      background: #ffffff;
      border: 1.5px solid var(--brd);
      box-shadow: none;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: transform .25s ease, border-color .25s ease;
    }

    .fc:hover {
      box-shadow: none;
      transform: translateY(-3px);
      border-color: var(--mint);
    }

    .fc-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
    }

    .fc-ico {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--mint-pale);
      border: 1.5px solid var(--mint-l);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform .3s ease;
    }

    .fc:hover .fc-ico {
      transform: scale(1.08);
    }

    .fc-ico svg {
      width: 22px;
      height: 22px;
      stroke: var(--mint-d);
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fc-num {
      font-size: 13px;
      font-weight: 700;
      color: var(--lgrey);
      letter-spacing: .05em;
    }

    .fc h3 {
      font-family: var(--display);
      font-size: 17.5px;
      font-weight: 700;
      color: var(--t1);
      margin-bottom: 8px;
      line-height: 1.3;
      letter-spacing: -.015em;
    }

    .fc p {
      font-size: 14px;
      color: var(--t2);
      line-height: 1.6;
      margin: 0;
    }

    /* ===== EDITORIAL ===== */
    .ed {
      padding: 100px 40px;
      background: #ffffff;
      position: relative;
    }

    .ed-in {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 60px;
      align-items: stretch;
    }

    .ed-img-wrap {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(1, 60, 66, .12);
    }

    .ed-img-box {
      border-radius: 24px;
      overflow: hidden;
      position: absolute;
      inset: 0;
      background: var(--mint-pale);
      line-height: 0;
    }

    .ed-img-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s cubic-bezier(.22, 1, .36, 1);
    }

    .ed-img-wrap:hover .ed-img-box img {
      transform: scale(1.04);
    }

    .ed-img-badge {
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 16px;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 10px 30px rgba(1, 60, 66, .14);
    }

    .ed-img-badge-ico {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--mint-pale);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .ed-img-badge-ico svg {
      width: 18px;
      height: 18px;
      stroke: var(--brand);
      stroke-width: 2.2;
      fill: none;
    }

    .ed-img-badge-txt {
      font-size: 13px;
      font-weight: 700;
      color: var(--brand);
      line-height: 1.25;
    }

    .ed-img-badge-txt span {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: var(--t3);
      margin-top: 1px;
    }

    .ed-body .sec-tag {
      margin-bottom: 18px;
    }

    .ed-body h2 {
      font-family: var(--display);
      font-size: clamp(23px, 2.6vw, 34px);
      font-weight: 700;
      line-height: 1.22;
      margin-bottom: 20px;
      letter-spacing: -.025em;
      color: var(--t1);
    }

    .ed-body h2 em {
      font-style: normal;
      color: var(--mint-d);
    }

    .ed-body p {
      font-size: 15.5px;
      line-height: 1.72;
      color: var(--t2);
      margin-bottom: 14px;
    }

    .ed-callout {
      background: rgba(100, 201, 154, .10);
      border-left: 4px solid var(--mint);
      border-radius: 0 14px 14px 0;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 22px 0 26px 0;
    }

    .ed-callout-ico {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--mint);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .ed-callout-ico svg {
      width: 14px;
      height: 14px;
      stroke: var(--brand);
      fill: none;
      stroke-width: 2.5;
    }

    .ed-callout-txt {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--brand);
      line-height: 1.4;
    }

    .ed-actions {
      margin-top: 20px;
    }

    /* ===== VIDEO ===== */
    .vid {
      padding: 80px 40px;
      background: var(--brand);
      text-align: center;
      position: relative;
      overflow: hidden
    }

    .vid::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(100, 201, 154, .08), transparent 70%);
      pointer-events: none
    }

    .vid h2 {
      font-family: var(--display);
      font-size: clamp(20px, 2.2vw, 28px);
      font-weight: 700;
      color: #fff;
      margin-bottom: 10px;
      position: relative;
      letter-spacing: -.02em;
      line-height: 1.2
    }

    .vid>p {
      font-size: 16px;
      color: rgba(255, 255, 255, .75);
      max-width: 480px;
      margin: 0 auto 28px;
      line-height: 1.65;
      position: relative
    }

    .vid-box {
      max-width: 680px;
      margin: 0 auto;
      border-radius: var(--r3);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      overflow: hidden
    }

    .vid-box img {
      width: 100%;
      display: block;
      transition: transform .4s, filter .4s;
      filter: brightness(.85)
    }

    .vid-box:hover img {
      transform: scale(1.03);
      filter: brightness(.7)
    }

    .vid-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--brand);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .25s, background .25s;
      box-shadow: 0 4px 24px rgba(1, 60, 66, .4)
    }

    .vid-box:hover .vid-play {
      transform: translate(-50%, -50%) scale(1.1);
      background: var(--brand-l)
    }

    .vid-play svg {
      width: 22px;
      height: 22px;
      fill: #fff;
      margin-left: 3px
    }



    /* ===== STANDARDS ===== */
    .std { padding: 88px 40px; background: #fff; }
    .std-in {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      align-items: center;
      gap: 64px;
    }
    .std-copy { min-width: 0; }
    .std-copy h2 { margin-bottom: 24px; text-wrap: wrap; }
    .std-description + .std-description { margin-top: 14px; }

    .std-figure { min-width: 0; margin: 0; padding: 32px; border-radius: 20px; background: #f0f4f3; }
    .std-figure img { display: block; width: 100%; height: auto; }
    .std-figure figcaption {
      margin-top: 20px;
      text-align: center;
      font-size: 11px;
      line-height: 1.6;
      color: #5a7576;
      letter-spacing: .01em;
    }
    @media (max-width: 1000px) { .std-in { gap: 36px; } }
    @media (max-width: 600px) {
      .std { padding: 56px 20px; }
      .std-figure { padding: 24px; }
    }

    /* ===== INDUSTRIES ===== */
    .industry {
      padding: 80px 40px;
      background: var(--bg2);
    }
    .ind-hd { max-width: 1200px; margin: 0 auto; }
    .ind-hd .sec-h { max-width: 100%; }
    .industry .ind-more {
      margin: 24px auto 0;
      text-align: center;
    }
    .ind-grid {
      max-width: 1200px;
      margin: 44px auto 0;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-template-rows: 300px 240px;
      gap: 16px;
    }
    .ind-card {
      position: relative;
      min-width: 0;
      grid-column: span 2;
      border-radius: 8px;
      overflow: hidden;
    }
    .ind-card:nth-child(-n+2) { grid-column: span 3; }
    .ind-card img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .65s cubic-bezier(.25, .46, .45, .94);
    }
    .ind-card:hover img { transform: scale(1.03); }
    .ind-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(1, 60, 66, .82) 0%, rgba(1, 60, 66, .12) 55%, transparent 100%);
    }
    .ind-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 28px; }
    .ind-label h3 {
      font-family: var(--display);
      font-size: 21px;
      font-weight: 700;
      color: #fff;
      margin: 0;
      line-height: 1.2;
      letter-spacing: -.01em;
    }

    /* ===== TESTIMONIALS ===== */
    .tst {
      padding: 72px 40px;
      background: #fff;
      overflow: hidden
    }

    .tst-in {
      max-width: 1120px;
      margin: 0 auto
    }

    .tst-slider {
      position: relative;
      margin-top: 36px
    }

    .tst-viewport {
      overflow: hidden;
      transition: height .45s cubic-bezier(.4, 0, .2, 1);
      will-change: height
    }

    .tst-track {
      display: flex;
      transition: transform .65s cubic-bezier(.4, 0, .2, 1);
      align-items: flex-start
    }

    .tst-slide {
      flex: 0 0 100%;
      min-width: 0;
      height: auto
    }

    .tst-card {
      background: var(--bg2);
      border: 1px solid var(--brd);
      border-radius: 28px;
      padding: 40px 48px;
      display: grid;
      grid-template-columns: 1fr 220px;
      gap: 40px;
      align-items: center;
      position: relative;
      overflow: hidden;
      box-sizing: border-box
    }

    .tst-card::before {
      content: '\201C';
      font-family: Georgia, serif;
      font-size: 200px;
      line-height: 1;
      color: var(--mint);
      opacity: .08;
      position: absolute;
      top: -24px;
      left: 40px;
      pointer-events: none;
      user-select: none
    }

    .tst-card-top {
      position: relative;
      z-index: 1
    }

    .tst-stars {
      display: flex;
      gap: 4px;
      margin-bottom: 20px
    }

    .tst-stars svg {
      width: 15px;
      height: 15px;
      fill: var(--mint)
    }

    .tst-q {
      font-size: 16.5px;
      line-height: 1.75;
      color: var(--t1);
      font-style: italic;
      font-weight: 400;
      margin-bottom: 22px
    }

    .tst-foot {
      padding-top: 16px;
      border-top: 1px solid var(--brd)
    }

    .tst-nm {
      font-size: 14px;
      font-weight: 700;
      color: var(--t1);
      line-height: 1.3
    }

    .tst-rl {
      font-size: 12px;
      color: var(--t3);
      margin-top: 3px
    }

    .tst-logo-side {
      display: flex;
      align-items: center;
      justify-content: center
    }

    .tst-logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center
    }

    .tst-logo {
      max-width: 195px;
      max-height: 95px;
      object-fit: contain;
      display: block
    }

    .tst-logo.tst-logo-aurubis {
      max-width: 230px;
      max-height: 120px;
      transform: none;
      transform-origin: center center;
    }

    .tst-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 28px
    }

    .tst-arr {
      width: auto;
      min-width: 44px;
      height: 44px;
      border-radius: 10px;
      font-family: var(--body);
      font-size: 14px;
      font-weight: 600;
      color: var(--brand);
      border: 1.5px solid var(--brd);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .22s;
      flex-shrink: 0;
      padding: 0
    }

    .tst-arr:hover {
      color: #fff;
      background: var(--brand);
      border-color: var(--brand)
    }

    .tst-arr:hover svg {
      stroke: #fff
    }

    .tst-arr svg {
      width: 18px;
      height: 18px;
      stroke: var(--t2);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke .22s
    }

    .tst-dots {
      display: flex;
      gap: 8px;
      align-items: center
    }

    .tst-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--brd);
      cursor: pointer;
      transition: all .28s;
      border: none;
      padding: 0;
      outline: none
    }

    .tst-dot.active {
      background: var(--brand);
      width: 26px;
      border-radius: 4px
    }

    /* ===== LANGUAGES ===== */
    .lng {
      padding: 80px 40px;
      background: #f6faf8
    }

    .lng-in {
      max-width: 1120px;
      margin: 0 auto
    }

    .lng-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 14px;
      margin-top: 32px
    }

    .lc {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f4f6f5;
      border: 1px solid #dce3e0;
      border-radius: 999px;
      padding: 12px 18px;
      font-size: 14px;
      font-weight: 500;
      color: var(--t1);
      box-shadow: 0 1px 3px rgba(1, 60, 66, .06);
      transition: .28s
    }

    .lc:hover {
      transform: translateY(-4px);
      border-color: #5DC28F;
      box-shadow: 0 10px 30px rgba(14, 59, 58, .10)
    }

    .lc img {
      width: 22px;
      height: 16px;
      object-fit: cover;
      border-radius: 3px;
      flex-shrink: 0
    }

    /* ===== CTA ===== */
    .cta {
      padding: 80px 40px;
      background: var(--bg2)
    }

    .cta-box {
      max-width: 1160px;
      margin: 0 auto;
      background: linear-gradient(135deg, var(--brand) 0%, #024d56 60%, #046068 100%);
      border-radius: 32px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      box-shadow: 0 32px 80px rgba(1, 60, 66, .22), 0 0 0 1px rgba(100, 201, 154, .15)
    }

    .cta-l {
      padding: 64px 56px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .cta-l::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at -10% 50%, rgba(100, 201, 154, .18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 100% 10%, rgba(13, 172, 172, .12) 0%, transparent 70%);
      pointer-events: none
    }

    .cta-l>* {
      position: relative;
      z-index: 1
    }

    .cta-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--olive);
      background: rgba(211, 216, 0, .1);
      border: 1px solid rgba(211, 216, 0, .28);
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 22px;
      align-self: flex-start
    }

    .cta-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--olive);
      flex-shrink: 0
    }

    .cta-l h2 {
      font-family: var(--display);
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 14px;
      line-height: 33px;
      letter-spacing: -.03em
    }

    .cta-l h2 em {
      font-style: normal;
      color: var(--mint)
    }

    .cta-l .cta-sub {
      font-size: 15.5px;
      color: #fff;
      margin-bottom: 0;
      line-height: 1.72;
      max-width: 380px
    }

    .cta-perks {
      list-style: none;
      padding: 0;
      margin: 22px 0 0;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .cta-perks li {
      font-size: 14px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 10px;
      line-height: 1.5
    }

    .cta-perks li::before {
      content: '';
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--mint);
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23013c42' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-size: 10px;
      background-repeat: no-repeat;
      background-position: center
    }

    .cta-links {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .cta-link-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13.5px;
      color: #fff;
      text-decoration: none;
      transition: .18s;
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: blur(4px)
    }

    .cta-link-item:hover {
      color: #fff;
      background: rgba(255, 255, 255, .07);
      border-color: rgba(100, 201, 154, .3)
    }

    .cta-link-ico {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: .18s
    }

    .cta-link-item:hover .cta-link-ico {
      background: rgba(100, 201, 154, .2)
    }

    .cta-link-ico svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .cta-reply {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 24px;
      font-size: 12px;
      color: rgba(255, 255, 255, .3);
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, .07)
    }

    .cta-reply svg {
      width: 13px;
      height: 13px;
      stroke: var(--mint);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0
    }

    .cta-r {
      background: #fff;
      padding: 52px 52px;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .cta-r-head {
      margin-bottom: 28px
    }

    .cta-r-head h3 {
      font-family: var(--display);
      font-size: 20px;
      font-weight: 700;
      color: var(--t1);
      letter-spacing: -.02em;
      margin-bottom: 6px
    }

    .cta-r-head p {
      font-size: 13.5px;
      color: var(--t3);
      line-height: 1.55
    }

    .cta-f {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .cta-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .cta-field {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .cta-field label {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--t3);
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .cta-f input,
    .cta-f textarea {
      font-family: var(--body);
      font-size: 14px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1.5px solid var(--brd);
      background: #fff;
      color: var(--t1);
      outline: none;
      transition: .2s;
      width: 100%;
      box-sizing: border-box
    }

    .cta-f input::placeholder,
    .cta-f textarea::placeholder {
      color: var(--t3);
      opacity: .55
    }

    .cta-f input:focus,
    .cta-f textarea:focus {
      border-color: var(--mint);
      box-shadow: 0 0 0 3px rgba(100, 201, 154, .12)
    }

    .cta-f textarea {
      resize: vertical;
      min-height: 90px
    }

    .cta-f button {
      font-family: var(--body);
      font-size: 15px;
      font-weight: 700;
      padding: 15px 28px;
      border-radius: 12px;
      background:var(--brand);
      color:#fff;
      border: none;
      cursor: pointer;
      transition: .22s;
      width: 100%;
      letter-spacing: .01em;
      box-shadow:0 4px 14px rgba(1,60,66,.18)}

    .cta-f button:hover {
      background:var(--brand-l);
      box-shadow:0 8px 24px rgba(1,60,66,.28);
      transform: translateY(-2px)
    }

    .cta-privacy {
      font-size: 11.5px;
      color: var(--t3);
      text-align: center;
      margin-top: 8px
    }

    /* ===== FOOTER ===== */
    /* ===== THE BEST FOOTER (WITH COLOR THEMES) ===== */
    footer {
      position: relative;
      color: #013c42;
      padding: 50px 40px 36px;
      overflow: hidden;
      transition: background .3s ease, color .3s ease, border-color .3s ease;
    }

    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      height: 240px;
      pointer-events: none;
      transition: opacity .3s ease;
    }

    /* Switcher Bar for Client Variations */
    .ft-switcher-bar {
      max-width: 1240px;
      margin: 0 auto 40px;
      padding: 12px 18px;
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1.5px solid rgba(1, 60, 66, .14);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      position: relative;
      z-index: 10;
      box-shadow: 0 6px 22px rgba(1, 60, 66, .07);
    }

    .ft-switcher-title-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ft-switcher-icon {
      font-size: 16px;
    }

    .ft-switcher-label {
      font-weight: 700;
      font-size: 13px;
      color: #013c42;
      letter-spacing: -.01em;
    }

    .ft-switcher-buttons {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .ft-theme-btn {
      background: #ffffff;
      border: 1.5px solid rgba(1, 60, 66, .15);
      color: #013c42;
      padding: 7px 14px;
      border-radius: 10px;
      font-family: var(--body, sans-serif);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .2s cubic-bezier(.25, .8, .25, 1);
    }

    .ft-theme-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1.5px solid rgba(0, 0, 0, .2);
      display: inline-block;
      flex-shrink: 0;
    }

    .ft-theme-btn:hover {
      border-color: #013c42;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(1, 60, 66, .1);
    }

    .ft-theme-btn.is-active {
      background: #013c42;
      color: #ffffff;
      border-color: #013c42;
      box-shadow: 0 4px 14px rgba(1, 60, 66, .25);
    }

    .ft-theme-btn.is-active .ft-theme-dot {
      border-color: #ffffff;
    }

    /* Trust Bar */
    .ft-trust {
      max-width: 1240px;
      margin: 0 auto 52px;
      padding-bottom: 36px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      position: relative;
      z-index: 1;
      transition: border-color .3s;
    }

    .ft-trust-item {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .ft-trust-ico {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .25s;
    }

    .ft-trust-ico svg {
      width: 20px;
      height: 20px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ft-trust-text {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35;
      transition: color .25s;
    }

    .ft-trust-text span {
      display: block;
      font-size: 12px;
      font-weight: 400;
      margin-top: 2px;
      transition: color .25s;
    }

    /* Main Grid */
    .ft-main {
      max-width: 1240px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: 48px;
      position: relative;
      z-index: 1;
    }

    /* Col 1 - Brand */
    .ft-brand {
      display: flex;
      flex-direction: column;
    }

    .ft-logo {
      height: 38px;
      width: auto;
      margin-bottom: 18px;
      display: block;
      align-self: flex-start;
      transition: filter .3s;
    }

    .ft-desc {
      font-size: 14px;
      line-height: 1.75;
      margin-bottom: 20px;
      max-width: 320px;
      transition: color .25s;
    }

    .ft-sewf-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .03em;
      padding: 6px 14px;
      border-radius: 100px;
      width: fit-content;
      margin-bottom: 24px;
      transition: all .25s;
    }

    .ft-sewf-pill::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .ft-socials {
      display: flex;
      gap: 10px;
      margin-top: auto;
    }

    .ft-social-link {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      transition: all .2s;
    }

    .ft-social-link svg {
      width: 17px;
      height: 17px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Nav Columns */
    .ft-col h4 {
      font-family: var(--display, inherit);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: color .25s;
    }

    .ft-col h4::after {
      content: none;
      display: none;
    }

    .ft-links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .ft-links a {
      font-size: 14px;
      text-decoration: none;
      transition: all .18s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .ft-links a:hover {
      transform: translateX(4px);
    }

    /* Col 4 - Contact Card */
    .ft-contact-card {
      border-radius: 18px;
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: all .25s;
    }

    .ft-contact-line {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13.5px;
      text-decoration: none;
      transition: color .18s;
    }

    .ft-contact-line svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      transition: stroke .2s;
    }

    .ft-demo-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--olive, #d3d800);
      color: #013c42;
      font-family: var(--body, inherit);
      font-size: 13px;
      font-weight: 700;
      padding: 11px 18px;
      border-radius: 10px;
      text-decoration: none;
      margin-top: 4px;
      transition: all .2s;
      box-shadow: 0 4px 14px rgba(211, 216, 0, .22);
    }

    .ft-demo-pill:hover {
      background: var(--olive-l, #e6eb1c);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(211, 216, 0, .36);
    }

    /* Bottom Bar */
    .ft-bot {
      max-width: 1240px;
      margin: 52px auto 0;
      padding-top: 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 12.5px;
      position: relative;
      z-index: 1;
      transition: border-color .25s, color .25s;
    }

    .ft-bot-links {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .ft-bot-links a {
      text-decoration: none;
      transition: color .15s;
    }

    .ft-back-top {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 15px;
      border-radius: 100px;
      font-family: var(--body, inherit);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
    }

    .ft-back-top svg {
      width: 12px;
      height: 12px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* =======================================
   THEME 1: PALE MINT (LIGHT & FRESH - DEFAULT)
   ======================================= */
    footer.ft-theme-pale-mint {
      background: linear-gradient(180deg, #edf7f3 0%, #e1efe8 100%);
      color: #013c42;
      border-top: 1px solid #c7e5da;
    }

    footer.ft-theme-pale-mint::before {
      background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(100, 201, 154, .28) 0%, transparent 70%);
    }

    footer.ft-theme-pale-mint .ft-trust {
      border-bottom: 1px solid rgba(1, 60, 66, .12);
    }

    footer.ft-theme-pale-mint .ft-trust-ico {
      background: #ffffff;
      border: 1px solid #bfe3d6;
      color: #013c42;
      box-shadow: 0 4px 12px rgba(1, 60, 66, .05);
    }

    footer.ft-theme-pale-mint .ft-trust-text {
      color: #013c42;
    }

    footer.ft-theme-pale-mint .ft-trust-text span {
      color: #3b6b6f;
    }

    footer.ft-theme-pale-mint .ft-logo {
      filter: none;
    }

    footer.ft-theme-pale-mint .ft-desc {
      color: #3b6b6f;
    }

    footer.ft-theme-pale-mint .ft-sewf-pill {
      color: #004d4d;
      background: #daf3f3;
      border: 1px solid #7dd8d8;
    }

    footer.ft-theme-pale-mint .ft-sewf-pill::before {
      background: #00b4b4;
    }

    footer.ft-theme-pale-mint .ft-social-link {
      background: #ffffff;
      border: 1px solid #cce4dc;
      color: #013c42;
    }

    footer.ft-theme-pale-mint .ft-social-link:hover {
      background: #013c42;
      border-color: #013c42;
      color: #ffffff;
      box-shadow: 0 6px 16px rgba(1, 60, 66, .2);
    }

    footer.ft-theme-pale-mint .ft-col h4 {
      color: #013c42;
    }

    footer.ft-theme-pale-mint .ft-col h4::after {
      background: #00a896;
    }

    footer.ft-theme-pale-mint .ft-links a {
      color: #3b6b6f;
    }

    footer.ft-theme-pale-mint .ft-links a:hover {
      color: #013c42;
      font-weight: 600;
    }

    footer.ft-theme-pale-mint .ft-contact-card {
      background: #ffffff;
      border: 1px solid #cce4dc;
      box-shadow: 0 10px 32px rgba(1, 60, 66, .06);
    }

    footer.ft-theme-pale-mint .ft-contact-line {
      color: #013c42;
    }

    footer.ft-theme-pale-mint .ft-contact-line svg {
      stroke: #00a896;
    }

    footer.ft-theme-pale-mint .ft-contact-line:hover {
      color: #00a896;
    }

    footer.ft-theme-pale-mint .ft-bot {
      border-top: 1px solid rgba(1, 60, 66, .12);
      color: #638487;
    }

    footer.ft-theme-pale-mint .ft-bot-links a {
      color: #3b6b6f;
    }

    footer.ft-theme-pale-mint .ft-bot-links a:hover {
      color: #013c42;
    }

    footer.ft-theme-pale-mint .ft-back-top {
      background: #ffffff;
      border: 1px solid #cce4dc;
      color: #013c42;
    }

    footer.ft-theme-pale-mint .ft-back-top:hover {
      background: #013c42;
      border-color: #013c42;
      color: #ffffff;
    }

    /* =======================================
   THEME 2: MID-TEAL PETROL (VIBRANT OCEAN)
   ======================================= */
    footer.ft-theme-mid-teal {
      background: linear-gradient(180deg, #05545e 0%, #023d44 100%);
      color: #e4f0ee;
      border-top: 1px solid rgba(100, 201, 154, .25);
    }

    footer.ft-theme-mid-teal::before {
      background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(100, 201, 154, .2) 0%, transparent 70%);
    }

    footer.ft-theme-mid-teal .ft-switcher-bar {
      background: rgba(1, 40, 45, .75);
      border-color: rgba(255, 255, 255, .2);
    }

    footer.ft-theme-mid-teal .ft-switcher-label {
      color: #ffffff;
    }

    footer.ft-theme-mid-teal .ft-theme-btn {
      background: rgba(255, 255, 255, .12);
      border-color: rgba(255, 255, 255, .25);
      color: #ffffff;
    }

    footer.ft-theme-mid-teal .ft-theme-btn:hover {
      background: rgba(255, 255, 255, .22);
      border-color: #64c99a;
    }

    footer.ft-theme-mid-teal .ft-theme-btn.is-active {
      background: #64c99a;
      color: #013c42;
      border-color: #64c99a;
    }

    footer.ft-theme-mid-teal .ft-trust {
      border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

    footer.ft-theme-mid-teal .ft-trust-ico {
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .2);
      color: #64c99a;
    }

    footer.ft-theme-mid-teal .ft-trust-text {
      color: #ffffff;
    }

    footer.ft-theme-mid-teal .ft-trust-text span {
      color: rgba(255, 255, 255, .7);
    }

    footer.ft-theme-mid-teal .ft-logo {
      filter: brightness(0) invert(1);
    }

    footer.ft-theme-mid-teal .ft-desc {
      color: rgba(255, 255, 255, .8);
    }

    footer.ft-theme-mid-teal .ft-sewf-pill {
      color: #d3d800;
      background: rgba(211, 216, 0, .14);
      border: 1px solid rgba(211, 216, 0, .32);
    }

    footer.ft-theme-mid-teal .ft-sewf-pill::before {
      background: #d3d800;
    }

    footer.ft-theme-mid-teal .ft-social-link {
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .18);
      color: #ffffff;
    }

    footer.ft-theme-mid-teal .ft-social-link:hover {
      background: #d3d800;
      border-color: #d3d800;
      color: #013c42;
    }

    footer.ft-theme-mid-teal .ft-col h4 {
      color: #ffffff;
    }

    footer.ft-theme-mid-teal .ft-col h4::after {
      background: #64c99a;
    }

    footer.ft-theme-mid-teal .ft-links a {
      color: rgba(255, 255, 255, .78);
    }

    footer.ft-theme-mid-teal .ft-links a:hover {
      color: #64c99a;
    }

    footer.ft-theme-mid-teal .ft-contact-card {
      background: rgba(0, 0, 0, .2);
      border: 1px solid rgba(255, 255, 255, .15);
    }

    footer.ft-theme-mid-teal .ft-contact-line {
      color: #ffffff;
    }

    footer.ft-theme-mid-teal .ft-contact-line svg {
      stroke: #64c99a;
    }

    footer.ft-theme-mid-teal .ft-bot {
      border-top: 1px solid rgba(255, 255, 255, .14);
      color: rgba(255, 255, 255, .58);
    }

    footer.ft-theme-mid-teal .ft-bot-links a {
      color: rgba(255, 255, 255, .7);
    }

    footer.ft-theme-mid-teal .ft-bot-links a:hover {
      color: #64c99a;
    }

    footer.ft-theme-mid-teal .ft-back-top {
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .2);
      color: #ffffff;
    }

    footer.ft-theme-mid-teal .ft-back-top:hover {
      background: #d3d800;
      border-color: #d3d800;
      color: #013c42;
    }

    /* =======================================
   THEME 3: CRISP PURE WHITE
   ======================================= */
    footer.ft-theme-white {
      background: #ffffff;
      color: #013c42;
      border-top: 1px solid #d6e8e4;
    }

    footer.ft-theme-white::before {
      display: none;
    }

    footer.ft-theme-white .ft-trust {
      border-bottom: 1px solid #e2eee9;
    }

    footer.ft-theme-white .ft-trust-ico {
      background: #f4faf7;
      border: 1px solid #d6e8e4;
      color: #013c42;
    }

    footer.ft-theme-white .ft-trust-text {
      color: #013c42;
    }

    footer.ft-theme-white .ft-trust-text span {
      color: #4a7578;
    }

    footer.ft-theme-white .ft-logo {
      filter: none;
    }

    footer.ft-theme-white .ft-desc {
      color: #4a7578;
    }

    footer.ft-theme-white .ft-sewf-pill {
      color: #004d4d;
      background: #daf3f3;
      border: 1px solid #7dd8d8;
    }

    footer.ft-theme-white .ft-sewf-pill::before {
      background: #00b4b4;
    }

    footer.ft-theme-white .ft-social-link {
      background: #f4faf7;
      border: 1px solid #d6e8e4;
      color: #013c42;
    }

    footer.ft-theme-white .ft-social-link:hover {
      background: #013c42;
      border-color: #013c42;
      color: #ffffff;
    }

    footer.ft-theme-white .ft-col h4 {
      color: #013c42;
    }

    footer.ft-theme-white .ft-col h4::after {
      background: #008f7a;
    }

    footer.ft-theme-white .ft-links a {
      color: #4a7578;
    }

    footer.ft-theme-white .ft-links a:hover {
      color: #013c42;
      font-weight: 600;
    }

    footer.ft-theme-white .ft-contact-card {
      background: #f8fcfa;
      border: 1px solid #d6e8e4;
      box-shadow: 0 8px 24px rgba(1, 60, 66, .05);
    }

    footer.ft-theme-white .ft-contact-line {
      color: #013c42;
    }

    footer.ft-theme-white .ft-contact-line svg {
      stroke: #008f7a;
    }

    footer.ft-theme-white .ft-bot {
      border-top: 1px solid #e2eee9;
      color: #729294;
    }

    footer.ft-theme-white .ft-bot-links a {
      color: #4a7578;
    }

    footer.ft-theme-white .ft-bot-links a:hover {
      color: #013c42;
    }

    footer.ft-theme-white .ft-back-top {
      background: #f4faf7;
      border: 1px solid #d6e8e4;
      color: #013c42;
    }

    footer.ft-theme-white .ft-back-top:hover {
      background: #013c42;
      border-color: #013c42;
      color: #ffffff;
    }

    /* =======================================
   THEME 4: SOFT SAGE / SLATE
   ======================================= */
    footer.ft-theme-slate {
      background: #f1f6f4;
      color: #013c42;
      border-top: 1px solid #d3e2dd;
    }

    footer.ft-theme-slate::before {
      display: none;
    }

    footer.ft-theme-slate .ft-trust {
      border-bottom: 1px solid #d3e2dd;
    }

    footer.ft-theme-slate .ft-trust-ico {
      background: #ffffff;
      border: 1px solid #d3e2dd;
      color: #013c42;
    }

    footer.ft-theme-slate .ft-trust-text {
      color: #013c42;
    }

    footer.ft-theme-slate .ft-trust-text span {
      color: #4a7578;
    }

    footer.ft-theme-slate .ft-logo {
      filter: none;
    }

    footer.ft-theme-slate .ft-desc {
      color: #4a7578;
    }

    footer.ft-theme-slate .ft-sewf-pill {
      color: #004d4d;
      background: #daf3f3;
      border: 1px solid #7dd8d8;
    }

    footer.ft-theme-slate .ft-sewf-pill::before {
      background: #00b4b4;
    }

    footer.ft-theme-slate .ft-social-link {
      background: #ffffff;
      border: 1px solid #d3e2dd;
      color: #013c42;
    }

    footer.ft-theme-slate .ft-social-link:hover {
      background: #013c42;
      border-color: #013c42;
      color: #ffffff;
    }

    footer.ft-theme-slate .ft-col h4 {
      color: #013c42;
    }

    footer.ft-theme-slate .ft-col h4::after {
      background: #008f7a;
    }

    footer.ft-theme-slate .ft-links a {
      color: #4a7578;
    }

    footer.ft-theme-slate .ft-links a:hover {
      color: #013c42;
      font-weight: 600;
    }

    footer.ft-theme-slate .ft-contact-card {
      background: #ffffff;
      border: 1px solid #d3e2dd;
      box-shadow: 0 10px 30px rgba(1, 60, 66, .06);
    }

    footer.ft-theme-slate .ft-contact-line {
      color: #013c42;
    }

    footer.ft-theme-slate .ft-contact-line svg {
      stroke: #008f7a;
    }

    footer.ft-theme-slate .ft-bot {
      border-top: 1px solid #d3e2dd;
      color: #729294;
    }

    footer.ft-theme-slate .ft-bot-links a {
      color: #4a7578;
    }

    footer.ft-theme-slate .ft-bot-links a:hover {
      color: #013c42;
    }

    footer.ft-theme-slate .ft-back-top {
      background: #ffffff;
      border: 1px solid #d3e2dd;
      color: #013c42;
    }

    footer.ft-theme-slate .ft-back-top:hover {
      background: #013c42;
      border-color: #013c42;
      color: #ffffff;
    }

    @media(max-width:960px) {
      .ft-trust {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .ft-main {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
      }
    }

    @media(max-width:560px) {
      footer {
        padding: 40px 20px 28px;
      }

      .ft-switcher-bar {
        flex-direction: column;
        align-items: flex-start;
      }

      .ft-switcher-buttons {
        width: 100%;
      }

      .ft-theme-btn {
        width: 100%;
        justify-content: flex-start;
      }

      .ft-trust {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 36px;
        padding-bottom: 28px;
      }

      .ft-main {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .ft-bot {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .ft-bot-links {
        flex-wrap: wrap;
        gap: 14px;
      }
    }

    /* ===== RESPONSIVE ===== */
    @media(max-width:900px) {
      .n-mid {
        display: none
      }

      .ham {
        display: flex
      }

      nav.open .n-mid {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: 66px;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--brd);
        padding: 8px 20px 20px;
        box-shadow: 0 8px 24px rgba(1, 60, 66, .08);
        z-index: 998
      }

      nav.open .n-mid a {
        font-size: 15px;
        padding: 10px 4px;
        border-bottom: 1px solid var(--brd)
      }

      nav.open .n-mid li:last-child a {
        border-bottom: none
      }

      .n,
      .wrap {
        padding: 0 20px
      }

      .hero {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 48px 20px 32px;
      }

      .hero-text {
        padding: 0;
        align-items: center;
        text-align: center;
      }

      .hero-p {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      .hero-perks {
        text-align: left;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
      }

      .hero-btns {
        justify-content: center
      }

      .hero-trust {
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
      }

      .hero-img {
        padding: 10px 0 0;
        min-height: auto;
      }

      .hero-img>img {
        max-width: 90%
      }

      .hero-float-top {
        left: 8px;
        top: 0px
      }

      .hero-float-bot {
        right: 8px;
        bottom: 16px
      }

      .feat,
      .ed,
      .vid,
      .tst,
      .lng,
      .cta,
      .std,
      .industry {
        padding-left: 20px;
        padding-right: 20px
      }

      .feat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
      }

      .tst-slide {
        flex: 0 0 100%;
        height: auto
      }

      .tst-card {
        grid-template-columns: 1fr;
        padding: 28px 22px;
        gap: 24px
      }

      .tst-logo-side {
        display: flex;
        justify-content: flex-start
      }

      .tst-logo.tst-logo-aurubis {
        transform-origin: left center;
      }

      .std-in {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .ed-in {
        grid-template-columns: 1fr;
        gap: 24px
      }

      .ed-img-box {
        position: relative;
        inset: auto;
      }

      .ed-img-box img {
        height: auto;
      }

      .cta-box {
        grid-template-columns: 1fr;
        border-radius: 24px
      }

      .cta-l {
        padding: 44px 28px
      }

      .cta-r {
        padding: 40px 28px
      }

      .ind-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: 240px;
      }
      .ind-card:nth-child(n) { grid-column: auto; }
      .ind-card:last-child { grid-column: 1 / -1; }

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

      footer {
        padding-left: 20px;
        padding-right: 20px
      }
    }

    @media(max-width:500px) {
      .ind-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
      .ind-label { padding: 22px; }

      .hero-btns {
        flex-direction: column;
        align-items: stretch
      }

      .feat-grid {
        grid-template-columns: 1fr;
      }

      .std-grid {
        grid-template-columns: 1fr;
      }

      .std-img-badge,
      .ed-img-badge {
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 10px 14px;
      }

      .sdg-g {
        max-width: 260px
      }

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

      .ft-bot {
        flex-direction: column;
        gap: 4px;
        text-align: center
      }
    }

    /* TOPBAR */
    .topbar {
      background: var(--brand);
      border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .topbar-in {
      max-width: 1240px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      height: 40px
    }

    .topbar-l {
      display: flex;
      align-items: center;
      gap: 20px
    }

    .topbar-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, .55);
      text-decoration: none;
      transition: .15s;
      letter-spacing: .01em
    }

    .topbar-link:hover {
      color: var(--mint)
    }

    .topbar-link svg {
      width: 13px;
      height: 13px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .topbar-sep {
      width: 1px;
      height: 12px;
      background: rgba(255, 255, 255, .14)
    }

    .topbar-lang {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .08em
    }

    .topbar-lang s {
      color: rgba(255, 255, 255, .18);
      font-weight: 400;
      text-decoration: none
    }

    .lang-btn {
      color: rgba(255, 255, 255, .38);
      text-decoration: none;
      transition: .15s
    }

    .lang-btn:hover,
    .lang-btn.act {
      color: var(--olive)
    }

    @media(max-width:920px) {
      .topbar-in {
        padding: 0 20px
      }
    }

    @media(max-width:560px) {
      .topbar {
        display: none
      }
    }
  
.homepage-device{position:relative;width:100%;max-width:620px;z-index:1}
.hero-img .homepage-device>img{width:100%;max-width:none}
.homepage-screen{position:absolute;left:62.28%;top:11.27%;width:23.23%;height:62.2%;object-fit:fill;border-radius:10% 10% 10% 10%;z-index:2;background:#fdfdfd;cursor:pointer}
.homepage-screen:focus-visible{outline:2px solid #307569;outline-offset:2px}
@media(max-width:760px){.homepage-device{width:90%}}

footer .ft-socials{display:flex;align-items:center;gap:12px;margin-top:22px}
footer .ft-socials .ft-social-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #b9d8cf;border-radius:12px;background:#eef7f3;color:#003c41;box-shadow:none;transition:background .18s,color .18s,border-color .18s}
footer .ft-socials .ft-social-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
footer .ft-socials .ft-social-link[aria-label="LinkedIn"] svg{fill:currentColor;stroke:none}
footer .ft-socials .ft-social-link:hover{background:#003c41;color:#fff;border-color:#003c41;transform:none}
footer .ft-socials .ft-social-link:focus-visible{outline:2px solid #307569;outline-offset:4px}

footer .ft-socials .ft-social-link{background:#003c41;color:#fff;border-color:#003c41;border-radius:50%;width:44px;height:44px}
footer .ft-socials .ft-social-link svg{stroke-width:2}
footer .ft-socials .ft-social-link:hover{background:#66cc99;color:#003c41;border-color:#66cc99}

footer .ft-socials{gap:10px}
footer .ft-socials .ft-social-link{width:36px;height:36px;border-radius:10px}
footer .ft-socials .ft-social-link svg.footer-symbol{width:18px;height:18px;display:block;fill:currentColor;stroke:none;stroke-width:0}

/* Improve brand and tagline legibility without changing the artwork. */
nav .n-logo img{height:46px;width:auto;max-width:100%;object-fit:contain}
footer .ft-logo{height:48px;width:auto;max-width:100%;object-fit:contain}
@media(max-width:600px){nav .n-logo img{height:42px}footer .ft-logo{height:46px}}

.vid h2{font-size:clamp(25px,2.9vw,37px);line-height:1.2;letter-spacing:-.025em}

/* Language navigation and German text reflow; source design retained. */
.topbar .topbar-l{display:flex;align-items:center}
.topbar .topbar-link{display:inline-flex;align-items:center;gap:6px;line-height:1;min-height:20px}
.topbar .topbar-link svg.contact-symbol{display:block;width:14px;height:14px;flex:0 0 14px;vertical-align:middle}
.topbar .topbar-link[href*="linkedin.com"] svg.contact-symbol{transform:translateY(-2px)}
@media(max-width:560px){.topbar .topbar-l{display:none}}
/* Each heading uses its parent colour, including on dark sections. */
:is(h1,h2,h3,h4,h5,h6) :is(em,span,strong,b,i,a){color:inherit!important;-webkit-text-fill-color:inherit!important;background-image:none!important}
.lang-btn:focus-visible{outline:2px solid currentColor;outline-offset:4px}
:is(h1,h2,h3,h4,h5,h6),:is(h1,h2,h3,h4,h5,h6) *{hyphens:none!important;-webkit-hyphens:none!important;word-break:normal!important;overflow-wrap:normal!important}
html[lang="de"] .cta-row>*{min-width:0}
html[lang="de"] .btn,html[lang="de"] .cta-f button{white-space:normal;text-align:center}
html[lang="de"] .n-mid{gap:22px}
nav.open .n-mid{top:100%}
@media(max-width:560px){.topbar{display:block!important}.topbar-in{height:38px;justify-content:flex-end}.topbar-l{display:none}.topbar-lang{display:flex;gap:13px}.lang-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 5px}}
html[lang="de"] :is(p,li),html[lang="de"] :is(p,li) *{hyphens:none!important;-webkit-hyphens:none!important;word-break:normal;overflow-wrap:normal}
.phero-in>*,.split-in>*,.ov-grid>*,.other-grid>*{min-width:0}
.ov-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.other-h{flex-wrap:wrap}.other-h a{white-space:normal}.oc>*{min-width:0}
@media(max-width:920px){.phero .phero-in,.split-in,.ov-in,.other-in{padding-left:0;padding-right:0}.split-card{padding:28px 24px}}
@media(max-width:560px){.ovc{padding:28px 22px}.oc{padding:22px 18px;gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ani{animation:none!important}.tst-track{transition:none!important}}


nav .n-r a.n-fill{display:inline-flex;align-items:center;justify-content:center;background:var(--olive);color:var(--brand);font-family:var(--body);font-size:14.5px;font-weight:700;line-height:1.2;padding:14px 30px;min-height:44px;border:0;border-radius:12px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;box-shadow:0 2px 12px rgba(211,216,0,.24);transition:background .22s,box-shadow .22s,transform .22s}
nav .n-r a.n-fill:hover{background:var(--olive-l);box-shadow:0 6px 22px rgba(211,216,0,.36);transform:translateY(-2px)}
nav .n-r a.n-fill:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media(max-width:560px){nav .n-r a.n-fill{padding:12px 18px}}
@media(prefers-reduced-motion:reduce){nav .n-r a.n-fill{transition:none}nav .n-r a.n-fill:hover{transform:none}}

.topbar-link svg.contact-symbol,.cta-link-ico svg.contact-symbol{fill:currentColor;stroke:none;stroke-width:0;flex-shrink:0}.topbar-link svg.contact-symbol{width:14px;height:14px}.cta-link-ico svg.contact-symbol{width:18px;height:18px}
h1,h2,h3,h4,h5,h6{hyphens:none!important;-webkit-hyphens:none!important;word-break:normal;overflow-wrap:normal}

.hero .hero-btns > a.btn-o{background:#003c41;color:#fff;border-color:#003c41;box-shadow:0 2px 10px rgba(0,60,65,.16)}
.hero .hero-btns > a.btn-o:hover{background:#1f5b4a;color:#fff;border-color:#1f5b4a;box-shadow:0 6px 18px rgba(0,60,65,.2)}
.hero .hero-btns > a.btn-o:focus-visible{outline:2px solid #003c41;outline-offset:4px}


.cta-l{justify-content:flex-start}
.cta-l .cta-sub{max-width:none}
.cta-r{justify-content:flex-start}
.cta-f{flex:none}
.cta-f > .cta-field{flex:none}
.cta-f > .cta-field textarea{flex:none;min-height:90px;height:96px}
@media(min-width:901px){.cta-r{padding-top:64px;padding-bottom:64px}}


.cta-r .cta-f{flex:1}
.cta-r .cta-f > .cta-field{flex:1}
.cta-r .cta-f > .cta-field textarea{flex:1;height:auto;min-height:150px}
@media(max-width:900px){.cta-r .cta-f > .cta-field textarea{min-height:140px}}

/* Section introductions share the available content width in both languages. */
body :is(h1, h2, h3, p, li) {
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  html[lang="de"] body :is(h1, h2, h3, p, li) {
    overflow-wrap: anywhere !important;
  }
}

body .sec-h,
body .ov-head,
body .mv-head {
  max-width: none;
  width: 100%;
}

body .phero:not(.course-intro) .phero-in {
  max-width: 1240px;
}

body .section-copy {
  width: 100%;
  max-width: 1240px;
}

body .hero h1,
body .hero-p,
body .hero-lead,
body .phero-sub,
body .course-intro .phero-sub,
body .sec-p,
body .feat .sec-h .sec-p,
body .intro,
body .section-copy h1,
body .mv-copy,
body .tm-bio p,
body .crs-header h2,
body .crs-paras p:first-child,
body .crs-foot {
  max-width: none;
}

/* The video section has no inner container; align its copy to the site grid. */
body .vid > h2,
body .vid > p {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}


    :root body .ed .ed-body h2 {
      line-height: 36px;
    }
    footer .ft-col h4 {
      text-transform: none;
      letter-spacing: normal;
    }
    footer .ft-col h4::after {
      content: none;
      display: none;
    }
    :root body .client-logos .sec-t,
    :root body .tst .sec-t {
      font-weight: 700;
    }
    body .vid > p {
      color: #c4dcd8;
      max-width: 680px;
      margin: 0 auto 28px;
      line-height: 1.65;
      text-wrap: balance;
    }
    :root body .client-logos .sec-t,
    :root body .tst .sec-t,
    :root body h2:not(.hero-wrap *):not(footer *) {
      font-size: 28px;
      line-height: 33px;
    }
  
/* Shared contact component, based on the homepage. */
body #contact.cta {
      padding: 80px 40px;
      background: var(--bg2)
    }

    body #contact .cta-box {
      max-width: 1160px;
      margin: 0 auto;
      background: linear-gradient(135deg, var(--brand) 0%, #024d56 60%, #046068 100%);
      border-radius: 32px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      box-shadow: 0 32px 80px rgba(1, 60, 66, .22), 0 0 0 1px rgba(100, 201, 154, .15)
    }

    body #contact .cta-l {
      padding: 64px 56px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    body #contact .cta-l::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at -10% 50%, rgba(100, 201, 154, .18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 100% 10%, rgba(13, 172, 172, .12) 0%, transparent 70%);
      pointer-events: none
    }

    body #contact .cta-l>* {
      position: relative;
      z-index: 1
    }

    body #contact .cta-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--olive);
      background: rgba(211, 216, 0, .1);
      border: 1px solid rgba(211, 216, 0, .28);
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 22px;
      align-self: flex-start
    }

    body #contact .cta-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--olive);
      flex-shrink: 0
    }

    body #contact .cta-l h2 {
      font-family: var(--display);
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 14px;
      line-height: 33px;
      letter-spacing: -.03em
    }

    body #contact .cta-l h2 em {
      font-style: normal;
      color: var(--mint)
    }

    body #contact .cta-l .cta-sub {
      font-size: 15.5px;
      color: #fff;
      margin-bottom: 0;
      line-height: 1.72;
      max-width: 380px
    }

    body #contact .cta-perks {
      list-style: none;
      padding: 0;
      margin: 22px 0 0;
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    body #contact .cta-perks li {
      font-size: 14px;
      color: #fff;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.5
    }

    body #contact .cta-perks li::before {
      content: '';
      margin-top: 1.5px;
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--mint);
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23013c42' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-size: 10px;
      background-repeat: no-repeat;
      background-position: center
    }

    body #contact .cta-links {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    body #contact .cta-link-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13.5px;
      color: #fff;
      text-decoration: none;
      transition: .18s;
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: blur(4px)
    }

    body #contact .cta-link-item:hover {
      color: #fff;
      background: rgba(255, 255, 255, .07);
      border-color: rgba(100, 201, 154, .3)
    }

    body #contact .cta-link-ico {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: .18s
    }

    body #contact .cta-link-item:hover .cta-link-ico {
      background: rgba(100, 201, 154, .2)
    }

    body #contact .cta-link-ico svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    body #contact .cta-reply {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 24px;
      font-size: 12px;
      color: rgba(255, 255, 255, .3);
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, .07)
    }

    body #contact .cta-reply svg {
      width: 13px;
      height: 13px;
      stroke: var(--mint);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0
    }

    body #contact .cta-r {
      background: #fff;
      padding: 52px 52px;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    body #contact .cta-r-head {
      margin-bottom: 28px
    }

    body #contact .cta-r-head h3 {
      font-family: var(--display);
      font-size: 20px;
      font-weight: 700;
      color: var(--t1);
      letter-spacing: -.02em;
      margin-bottom: 6px
    }

    body #contact .cta-r-head p {
      font-size: 13.5px;
      color: var(--t3);
      line-height: 1.55
    }

    body #contact .cta-f {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    body #contact .cta-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    body #contact .cta-field {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    body #contact .cta-field label {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--t3);
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .cta-f input,
    body #contact .cta-f textarea {
      font-family: var(--body);
      font-size: 14px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1.5px solid var(--brd);
      background: #fff;
      color: var(--t1);
      outline: none;
      transition: .2s;
      width: 100%;
      box-sizing: border-box
    }

    .cta-f input::placeholder,
    body #contact .cta-f textarea::placeholder {
      color: var(--t3);
      opacity: .55
    }

    .cta-f input:focus,
    body #contact .cta-f textarea:focus {
      border-color: var(--mint);
      box-shadow: 0 0 0 3px rgba(100, 201, 154, .12)
    }

    body #contact .cta-f textarea {
      resize: vertical;
      min-height: 90px
    }

    body #contact .cta-f button {
      font-family: var(--body);
      font-size: 15px;
      font-weight: 700;
      padding: 15px 28px;
      border-radius: 12px;
      background:var(--brand);
      color:#fff;
      border: none;
      cursor: pointer;
      transition: .22s;
      width: 100%;
      letter-spacing: .01em;
      box-shadow:0 4px 14px rgba(1,60,66,.18)}

    body #contact .cta-f button:hover {
      background:var(--brand-l);
      box-shadow:0 8px 24px rgba(1,60,66,.28);
      transform: translateY(-2px)
    }

    body #contact .cta-privacy {
      font-size: 11.5px;
      color: var(--t3);
      text-align: center;
      margin-top: 8px
    }
body #contact .cta-l, body #contact .cta-r { justify-content: flex-start; min-width: 0; }
body #contact .cta-l .cta-sub { max-width: none; }
body #contact .cta-r { padding: 64px 52px; }
body #contact .cta-f { flex: none; }
body #contact .cta-f > .cta-field { flex: none; }
body #contact .cta-f > .cta-field textarea { flex: none; height: auto; min-height: 76px; field-sizing: content; }
body #contact .cta-row > * { min-width: 0; }
body #contact .cta-link-ico svg.contact-symbol { width: 18px; height: 18px; fill: currentColor; stroke: none; stroke-width: 0; }
@media (max-width: 900px) {
  body #contact.cta { padding: 56px 20px; }
  body #contact .cta-box { grid-template-columns: 1fr; border-radius: 24px; }
  body #contact .cta-l { padding: 44px 28px; }
  body #contact .cta-r { padding: 40px 28px; }
  body #contact .cta-f > .cta-field textarea { min-height: 76px; }
}
@media (max-width: 480px) {
  body #contact .cta-row { grid-template-columns: 1fr; }
  body #contact .cta-l, body #contact .cta-r { padding: 32px 22px; }
}


/* Shared footer for English and German pages. */
body footer#footer { padding: 50px 40px 36px; background: #fff; color: #013c42; border-top: 1px solid #dcecea; }
body footer#footer::before { display: none; }
#footer .ft-main { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.1fr; gap: 40px; max-width: 1240px; margin: 0 auto 48px; padding: 0; }
#footer .ft-main > * { min-width: 0; }
#footer .ft-logo { display: block; width: 150px; height: auto; max-width: 100%; }
#footer .ft-col h4 { font-family: var(--display); font-size: 18px; line-height: 24px; font-weight: 700; text-transform: none; letter-spacing: normal; color: #013c42; margin: 0 0 20px; }
#footer .ft-col h4::after { content: none; display: none; }
#footer .ft-links { display: flex; flex-direction: column; list-style: none; gap: 12px; padding: 0; margin: 0; }
#footer .ft-links a { font-size: 14px; line-height: 1.6; color: #4a7578; text-decoration: none; margin: 0; padding: 0; }
#footer .ft-links a:hover { color: #008f7a; }
#footer .ft-contact-card { display: flex; flex-direction: column; gap: 12px; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
#footer .ft-contact-line { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.6; color: #013c42; text-decoration: none; margin: 0; padding: 0; }
#footer .ft-contact-line svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: #008f7a; stroke-width: 1.7; }
#footer .ft-contact-line svg :is(path, polyline, circle, rect, line) { fill: none; stroke: #008f7a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#footer .ft-socials { display: flex; gap: 10px; margin-top: 22px; }
#footer .ft-social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: #66cc99; color: #003c41; transition: background .2s, color .2s; }
#footer .ft-social-link:hover { background: #003c41; color: #fff; }
#footer .ft-social-link:focus-visible { outline: 2px solid #003c41; outline-offset: 4px; }
#footer .ft-social-link svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
#footer .ft-bot { max-width: 1240px; margin: 0 auto; padding-top: 24px; border-top: 1px solid #dcecea; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; font-size: 12px; color: #4a7578; }
#footer .ft-bot-links { display: flex; flex-wrap: wrap; gap: 20px; }
#footer .ft-bot-links a { color: #4a7578; font-size: 12px; text-decoration: none; }
#footer .ft-back-top { padding: 9px 14px; border: 1px solid #dcecea; border-radius: 20px; background: #f7fbfa; color: #013c42; font: inherit; cursor: pointer; }
@media (max-width: 1000px) { #footer .ft-main { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { body footer#footer { padding: 40px 20px 28px; } #footer .ft-main { grid-template-columns: 1fr; } #footer .ft-bot { flex-direction: column; align-items: flex-start; } }

/* Compact legal row with an accessible arrow control. */
#footer .ft-bot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
#footer .ft-bot-links { justify-content: center; align-items: center; gap: 24px; }
#footer .ft-bot-links a { line-height: 1.5; padding: 8px 0; }
#footer .ft-bot-links a:hover { color: #008f7a; text-decoration: underline; text-underline-offset: 4px; }
#footer .ft-back-top { justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #f7fbfa; transition: background .2s, color .2s; }
#footer .ft-back-top svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#footer .ft-back-top:hover { background: #003c41; color: #fff; }
#footer .ft-back-top:focus-visible, #footer .ft-bot-links a:focus-visible { outline: 2px solid #008f7a; outline-offset: 4px; }
@media (max-width: 700px) {
  #footer .ft-bot { grid-template-columns: 1fr auto; gap: 12px 20px; }
  #footer .ft-copy { grid-column: 1; }
  #footer .ft-bot-links { grid-column: 1; justify-content: flex-start; gap: 20px; }
  #footer .ft-back-top { grid-column: 2; grid-row: 1 / 3; }
}

/* Footer v4: two balanced rows - logo and back-to-top, divider, copyright and legal links. */
body footer#footer { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logo . top" "line line line" "copy . links"; align-items: center; column-gap: 32px; row-gap: 22px; padding: 40px max(40px, calc((100% - 1160px) / 2)) 28px; background: #fff; border-top: 1px solid #dcecea; }
body footer#footer::before { content: ""; display: block; grid-area: line; position: static; width: auto; max-width: none; height: 1px; margin: 0; transform: none; background: #e3efec; opacity: 1; }
#footer .ft-main.ft-v2 { grid-area: logo; display: block; margin: 0; padding: 0; max-width: none; background: none; border: 0; border-radius: 0; }
#footer .ft-v2 .ft-brand { display: block; }
#footer .ft-v2 .ft-logo-link { display: block; line-height: 0; }
#footer .ft-v2 .ft-logo { width: 144px; }
#footer .ft-reach { display: none; }
#footer .ft-bot { display: contents; }
#footer .ft-copy { grid-area: copy; font-size: 13px; line-height: 1.5; color: #4a7578; }
#footer .ft-bot-links { grid-area: links; display: flex; justify-content: flex-end; align-items: center; gap: 28px; }
#footer .ft-bot-links a { font-size: 13px; line-height: 1.5; padding: 4px 0; color: #4a7578; }
#footer .ft-back-top { grid-area: top; justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #dcecea; border-radius: 50%; background: #fff; color: #013c42; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
#footer .ft-back-top:hover { background: #013c42; border-color: #013c42; color: #fff; }
@media (max-width: 640px) { body footer#footer { grid-template-columns: 1fr auto; grid-template-areas: "logo top" "line line" "links links" "copy copy"; padding: 32px 20px 24px; row-gap: 18px; } #footer .ft-bot-links { justify-content: flex-start; } }

/* Consistent page-title size across both languages. */
:root body h1 { font-size: 37px; }

/* Shared heading-to-introduction gap on desktop and mobile. */
:root { --heading-paragraph-gap: 18px; }
:root body :is(h1, h2):not(.a11y-page-title):has(+ p) {
  margin-bottom: var(--heading-paragraph-gap) !important;
}
:root body :is(h1, h2):not(.a11y-page-title) + p {
  margin-top: 0 !important;
}

/* Consistent semibold text for buttons across both languages. */
:root body button,
:root body [role="button"],
:root body .btn,
:root body .btn-olive,
:root body .btn-mint,
:root body .btn-petrol,
:root body .btn-ghost-w,
:root body .n-fill,
:root body .read-more-btn,
:root body .ft-back-top,
:root body .ft-theme-btn,
:root body .tm-toggle-btn .tm-toggle-name,
:root body #contact .cta-f button,
:root body #footer .ft-back-top {
  font-weight: 600;
}

.a11y-page-title{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.faq-cat-label{margin:0}