/* ==========================================================================
   24daheim — Senior care marketing site · v2 redesign
   Light, premium, warm. Honey-gold accent + teal/green/navy from the Kolibri.
   ========================================================================== */

/* ---------- Brand fonts ---------- */
@font-face{font-family:"Gotham Rounded";src:url("../assets/fonts/GothamRounded-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham Rounded";src:url("../assets/fonts/GothamRounded-LightItalic.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Gotham Rounded";src:url("../assets/fonts/GothamRounded-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Gotham Rounded";src:url("../assets/fonts/GothamRounded-MediumItalic.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Gotham Rounded";src:url("../assets/fonts/GothamRounded-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Heleno Script";src:url("../assets/fonts/HelenoScript.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --teal:#1AAC9A; --teal-600:#12968A; --teal-700:#0C7064;
  --navy:#29358E; --navy-600:#202A78; --navy-700:#161E5C;
  --green:#16A35A; --green-600:#0d8646;
  /* Warm accent (replaces red) */
  --gold:#F4A52A; --gold-2:#FFC65C; --gold-700:#D98613; --gold-soft:#FFF4DD;

  /* Surfaces */
  --cream:#FCFAF6; --cream-2:#F5F1E8; --paper:#ffffff;
  --mist:#EFF8F6; --mist-2:#E7F4F1;
  --ink:#1B2440; --muted:#5C6680; --muted-2:#828BA3;
  --line:#ECE7DA; --line-2:#eef1f4;

  /* Gradients */
  --grad-teal:linear-gradient(135deg,#22BDA8 0%,#0E8F7E 100%);
  --grad-green:linear-gradient(135deg,#2BC07B 0%,#13934F 100%);
  --grad-navy:linear-gradient(135deg,#3A47A6 0%,#1E2873 100%);
  --grad-gold:linear-gradient(135deg,#FFD27D 0%,#F4A52A 100%);
  --grad-hero:linear-gradient(135deg,#1FB6A4 0%,#149A8E 42%,#2A3690 100%);
  --grad-text:linear-gradient(100deg,#1AAC9A,#16A35A 55%,#F4A52A);

  /* Shadows (lighter, premium) */
  --sh-xs:0 1px 3px rgba(27,36,64,.05);
  --sh-sm:0 6px 18px -10px rgba(27,36,64,.18);
  --sh-md:0 18px 44px -22px rgba(27,36,64,.28);
  --sh-lg:0 36px 80px -34px rgba(27,36,64,.42);
  --sh-teal:0 22px 48px -22px rgba(16,150,138,.55);
  --sh-gold:0 22px 48px -20px rgba(216,134,19,.5);
  --glass:saturate(160%) blur(16px);

  /* Geometry */
  --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px; --r-2xl:44px;
  --maxw:1180px; --gutter:clamp(20px,5vw,48px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:"Gotham Rounded","Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:300;font-size:18px;line-height:1.7;color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--teal-700);text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-weight:700;line-height:1.1;color:var(--navy);margin:0 0 .5em;letter-spacing:-.015em}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold-soft);color:var(--navy)}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--teal),var(--green),var(--gold));box-shadow:0 0 12px rgba(26,172,154,.5);
  transition:width .1s linear}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.section--tight{padding:clamp(48px,6vw,80px) 0}
.section--mist{background:
  radial-gradient(1100px 560px at 88% -10%,rgba(26,172,154,.10),transparent 60%),
  radial-gradient(800px 500px at 6% 110%,rgba(244,165,42,.08),transparent 60%),var(--mist)}
.section--cream2{background:var(--cream-2)}
.section--navy{background:
  radial-gradient(900px 520px at 8% 0%,rgba(26,172,154,.28),transparent 55%),
  radial-gradient(700px 520px at 100% 100%,rgba(244,165,42,.16),transparent 55%),var(--grad-navy);
  color:#dfe3ff;overflow:hidden}
.section--navy h2,.section--navy h3{color:#fff}

/* Decorative patterns / shapes */
.pattern-dots{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(41,53,142,.10) 1.4px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.section--navy .pattern-dots{background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.4px)}
.section > .container{position:relative;z-index:1}
.shape{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(2px);opacity:.55}
.shape--ring{border-radius:50%;border:2px dashed rgba(26,172,154,.35);background:none;filter:none}
.shape--blob{background:var(--grad-gold);opacity:.16;filter:blur(30px)}
.shape--blob-t{background:var(--grad-teal);opacity:.14;filter:blur(34px)}

.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal-700);margin-bottom:1rem}
.section--navy .eyebrow{color:#86e4d5}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;border-radius:2px;opacity:.8}
.eyebrow--gold{color:var(--gold-700)}

.h-display{font-size:clamp(2.2rem,5.6vw,3.8rem);line-height:1.04}
.h-2{font-size:clamp(1.9rem,3.8vw,2.7rem)}
.lead{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--muted);max-width:62ch}
.section--navy .lead{color:#c7cdf2}
.center{text-align:center}
.center .lead{margin-inline:auto}
.script{font-family:"Heleno Script",cursive;font-weight:400;color:var(--teal)}
.gtext{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:200% center}}

/* ---------- Buttons ---------- */
.btn{--bg:var(--grad-teal);--fg:#fff;position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1rem 1.7rem;border-radius:999px;border:0;background:var(--bg);color:var(--fg);
  font-weight:700;font-size:1.02rem;line-height:1;cursor:pointer;box-shadow:var(--sh-teal);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s;text-align:center;white-space:nowrap}
.btn svg{width:1.15em;height:1.15em}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:0 30px 60px -22px rgba(16,150,138,.7)}
.btn:hover::after{left:140%}
.btn:active{transform:translateY(-1px)}
.btn--cta,.btn--coral{--bg:var(--grad-gold);--fg:var(--navy);box-shadow:var(--sh-gold)}
.btn--cta:hover,.btn--coral:hover{box-shadow:0 30px 60px -20px rgba(216,134,19,.7)}
.btn--navy{--bg:var(--grad-navy);box-shadow:0 22px 48px -22px rgba(41,53,142,.6)}
.btn--ghost{background:#fff;color:var(--navy);box-shadow:var(--sh-sm);border:1.5px solid var(--line)}
.btn--ghost::after{display:none}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal-700);box-shadow:var(--sh-md)}
.btn--white{--bg:#fff;--fg:var(--navy);box-shadow:var(--sh-md)}
.btn--white::after{background:linear-gradient(100deg,transparent,rgba(26,172,154,.18),transparent)}
.btn--lg{padding:1.18rem 2.15rem;font-size:1.08rem}
.btn--block{width:100%}

.link-arrow{display:inline-flex;align-items:center;gap:.45em;font-weight:700;color:var(--teal-700)}
.link-arrow svg{width:1.05em;height:1.05em;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ==========================================================================
   Top bar + Header
   ========================================================================== */
.topbar{background:#fff;border-bottom:1px solid var(--line);color:var(--muted);font-size:.85rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:40px;flex-wrap:wrap}
.topbar a{color:var(--navy);font-weight:600}
.topbar a:hover{color:var(--teal-700)}
.topbar__set{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:.45em}
.topbar__item svg{width:1em;height:1em;color:var(--teal)}
@media (max-width:680px){.topbar{font-size:.8rem}.topbar__set--meta{display:none}}

.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  border-bottom:1px solid var(--line-soft);transition:background .3s,box-shadow .3s,border-color .3s,padding .3s}
.header.is-stuck{background:rgba(255,255,255,.94);box-shadow:0 8px 30px -22px rgba(27,36,64,.4);border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:clamp(.7rem,1.6vw,1.5rem);padding-block:.7rem;transition:padding .3s}
.header.is-stuck .nav{padding-block:.45rem}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand img{height:54px;width:auto;transition:height .3s;filter:drop-shadow(0 4px 8px rgba(27,36,64,.1))}
.header.is-stuck .brand img{height:46px}

.nav__links{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav__links a{position:relative;display:block;padding:.5rem clamp(.5rem,.9vw,.85rem);border-radius:999px;color:var(--navy);font-weight:500;font-size:.96rem;white-space:nowrap;transition:color .2s}
.nav__links a::before{content:"";position:absolute;left:50%;bottom:.35rem;width:0;height:2px;border-radius:2px;
  background:var(--grad-teal);transform:translateX(-50%);transition:width .3s var(--ease)}
.nav__links a:hover{color:var(--teal-700)}
.nav__links a:hover::before,.nav__links a.active::before{width:42%}
.nav__links a.active{color:var(--teal-700)}
.nav__cta{display:flex;align-items:center;gap:.7rem}
.nav__phone{display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:var(--navy);padding:.5rem .6rem;border-radius:999px}
.nav__phone svg{width:1.1em;height:1.1em;color:var(--teal)}
.nav__phone:hover{color:var(--teal-700)}

/* ---- Burger button ---- */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid rgba(41, 53, 142, 0.12);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  cursor: pointer;
  padding: 0;
  z-index: 80;
  box-shadow: 0 2px 8px rgba(27,36,64,0.06);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.burger:hover {
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 4px 14px rgba(26,172,154,0.18);
  transform: translateY(-1px);
}
.burger__line {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1), opacity 0.25s, width 0.3s;
}
.burger__line--2 { width: 14px; }
.burger[aria-expanded="true"] .burger__line--1 { transform: translateY(7px) rotate(45deg); width: 20px; }
.burger[aria-expanded="true"] .burger__line--2 { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] .burger__line--3 { transform: translateY(-7px) rotate(-45deg); width: 20px; }

/* ================================================================
   Mobile Drawer — hidden on desktop
   ================================================================ */
.mob-drawer, .scrim { display: none; }

@media (max-width: 1024px) {
  .nav__links, .nav__phone--inline { display: none; }
  .burger { display: inline-flex; }

  /* Scrim with deep blur */
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(14, 20, 60, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    z-index: 8000;
  }
  .scrim.open { opacity: 1; visibility: visible; }

  /* Drawer shell: Luxurious glassmorphism */
  .mob-drawer {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    flex-direction: column;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    z-index: 9000;
    overflow: hidden;
    transform: translateX(105%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -15px 0 50px rgba(14, 20, 60, 0.15);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mob-drawer.open {
    transform: translateX(0);
  }

  /* Decorative blobs */
  .mob-drawer__blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(50px);
  }
  .mob-drawer__blob--1 {
    width: 200px; height: 200px;
    top: -50px; right: -50px;
    background: radial-gradient(circle, rgba(26,172,154,0.15), transparent 70%);
    animation: blobDrift1 12s ease-in-out infinite;
  }
  .mob-drawer__blob--2 {
    width: 180px; height: 180px;
    bottom: -40px; left: -40px;
    background: radial-gradient(circle, rgba(244,165,42,0.1), transparent 70%);
    animation: blobDrift2 16s ease-in-out infinite;
  }
  @keyframes blobDrift1 { 50% { transform: translate(-15px, 20px); } }
  @keyframes blobDrift2 { 50% { transform: translate(15px, -15px); } }

  /* Drawer inner scroll container */
  .mob-drawer__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 env(safe-area-inset-bottom, 0);
  }

  /* Drawer header with brand and clean circle close button */
  .mob-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1.4rem 1.1rem;
    border-bottom: 1px solid rgba(41, 53, 142, 0.06);
    flex-shrink: 0;
  }
  .mob-drawer__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
  }
  .mob-drawer__brand img {
    height: 38px;
    width: auto;
  }
  .mob-drawer__brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.02em;
  }
  .mob-drawer__brand-name span {
    color: var(--teal-700);
  }
  .mob-drawer__close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(41, 53, 142, 0.05);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--navy);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  .mob-drawer__close:hover {
    background: var(--navy);
    color: #fff;
    transform: rotate(90deg) scale(1.05);
  }
  .mob-drawer__close svg { width: 16px; height: 16px; }

  /* Premium Navigation Links */
  .mob-drawer__nav {
    padding: 1.2rem 1.2rem 0.5rem;
    flex-shrink: 0;
  }
  .mob-drawer__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .mob-drawer__nav li {
    opacity: 0;
    transform: translateX(15px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i) * 50ms + 50ms);
  }
  .mob-drawer.open .mob-drawer__nav li {
    opacity: 1;
    transform: translateX(0);
  }
  .mob-drawer__link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.2rem;
    border-radius: 16px;
    color: var(--navy);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    background: transparent;
  }
  .mob-drawer__link:hover {
    background: rgba(26, 172, 154, 0.05);
    border-color: rgba(26, 172, 154, 0.08);
    color: var(--teal-700);
    transform: translateX(4px);
  }
  .mob-drawer__link.is-active {
    background: #ffffff;
    border-color: rgba(26, 172, 154, 0.15);
    color: var(--teal-700);
    box-shadow: 0 8px 20px -8px rgba(26, 172, 154, 0.15);
  }
  .mob-drawer__link-text { flex: 1; }
  .mob-drawer__link-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 8px rgba(26, 172, 154, 0.6);
    flex-shrink: 0;
  }
  .mob-drawer__link-arrow {
    width: 16px;
    height: 16px;
    opacity: 0.3;
    color: var(--teal-700);
    transform: translateX(-4px);
    transition: opacity 0.3s, transform 0.3s;
    flex-shrink: 0;
  }
  .mob-drawer__link:hover .mob-drawer__link-arrow,
  .mob-drawer__link.is-active .mob-drawer__link-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  /* CTA block: premium styled button */
  .mob-drawer__cta {
    padding: 1rem 1.4rem;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s;
  }
  .mob-drawer.open .mob-drawer__cta {
    opacity: 1;
    transform: translateY(0);
  }
  .mob-drawer__cta-btn {
    font-size: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 16px;
    background: var(--grad-teal) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700;
    box-shadow: 0 8px 20px -4px rgba(26, 172, 154, 0.25);
    transition: all 0.3s ease !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .mob-drawer__cta-btn:hover {
    background: var(--teal-700) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -4px rgba(26, 172, 154, 0.35);
  }

  /* Contact Cards inside mobile drawer */
  .mob-drawer__contact {
    padding: 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(41, 53, 142, 0.06);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.4s ease 0.42s;
  }
  .mob-drawer.open .mob-drawer__contact { opacity: 1; }
  
  .mob-drawer__contact-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1rem;
    border-radius: 16px;
    text-decoration: none;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(41, 53, 142, 0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  a.mob-drawer__contact-row:hover {
    background: #ffffff;
    border-color: rgba(26, 172, 154, 0.15);
    box-shadow: 0 8px 20px -8px rgba(26, 172, 154, 0.12);
    transform: translateY(-2px);
  }
  .mob-drawer__contact-row--plain {
    cursor: default;
  }
  .mob-drawer__contact-row--plain:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(41, 53, 142, 0.04);
    box-shadow: none;
  }
  .mob-drawer__contact-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mist);
    color: var(--teal-700);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  .mob-drawer__contact-row:hover .mob-drawer__contact-ic {
    transform: scale(1.05);
  }
  .mob-drawer__contact-ic svg { width: 16px; height: 16px; }
  .mob-drawer__contact-row small {
    display: block;
    font-size: 0.72rem;
    color: var(--muted-2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1px;
  }
  .mob-drawer__contact-row strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--navy);
  }

  /* Footer Section with Language switch */
  .mob-drawer__footer {
    margin-top: auto;
    padding: 1.2rem 1.4rem 1.4rem;
    border-top: 1px solid rgba(41, 53, 142, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.4s ease 0.48s;
  }
  .mob-drawer.open .mob-drawer__footer { opacity: 1; }
  .mob-drawer__lang {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(41, 53, 142, 0.04);
    padding: 3px;
    border-radius: 10px;
  }
  .mob-drawer__lang-btn {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    letter-spacing: 0.06em;
  }
  .mob-drawer__lang-btn.is-on {
    background: #ffffff;
    color: var(--navy);
    box-shadow: 0 4px 10px rgba(14, 20, 60, 0.06);
  }
  .mob-drawer__lang-btn:not(.is-on):hover {
    color: var(--navy);
  }
  .mob-drawer__lang-sep {
    display: none;
  }
  .mob-drawer__tagline {
    font-size: 0.7rem;
    color: var(--muted-2);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Brand responsiveness */
  .brand img { height: 46px; }
  .nav__cta { gap: 0.45rem; }
  .nav__cta .btn--cta { padding: 0.62rem 1.05rem; font-size: 0.92rem; }
}

@media (max-width: 560px) {
  .nav__cta .btn--cta { display: none; }
}





/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;overflow:clip;padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(56px,8vw,112px)}
.hero__aurora{position:absolute;inset:-10% -10% 0 -10%;z-index:-2;overflow:hidden}
.hero__aurora span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.aur-1{width:46vw;height:46vw;max-width:620px;max-height:620px;top:-12%;right:-6%;background:radial-gradient(circle at 30% 30%,#7fe6d8,transparent 70%);animation:drift1 20s ease-in-out infinite}
.aur-2{width:38vw;height:38vw;max-width:520px;max-height:520px;bottom:-18%;left:-8%;background:radial-gradient(circle at 30% 30%,#a8b2f2,transparent 70%);animation:drift2 24s ease-in-out infinite}
.aur-3{width:30vw;height:30vw;max-width:420px;max-height:420px;top:30%;left:42%;background:radial-gradient(circle at 30% 30%,#ffd98a,transparent 72%);opacity:.4;animation:drift3 28s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(-30px,34px) scale(1.08)}}
@keyframes drift2{50%{transform:translate(28px,-26px) scale(1.06)}}
@keyframes drift3{50%{transform:translate(-24px,-30px) scale(1.1)}}
.hero__bg-dots{position:absolute;inset:0;z-index:-1;opacity:.45;
  background-image:radial-gradient(rgba(41,53,142,.08) 1.3px,transparent 1.3px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent)}

.hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__pills{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.3rem}
.pill{display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);
  border:1px solid var(--line);padding:.5rem .9rem;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--navy);box-shadow:var(--sh-xs)}
.pill svg{width:1.05em;height:1.05em;color:var(--teal)}
.pill--gold svg{color:var(--gold-700)}

.hero__rotator{display:inline-flex;align-items:baseline;gap:.45em;font-weight:700;color:var(--gold-700);
  font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.6rem}
.hero__rotator .rot{position:relative;display:inline-block;min-width:10.5em;height:1.35em;overflow:hidden;vertical-align:bottom}
.hero__rotator .rot b{position:absolute;left:0;top:0;opacity:0;transform:translateY(100%);transition:opacity .5s,transform .5s var(--ease);white-space:nowrap}
.hero__rotator .rot b.in{opacity:1;transform:translateY(0)}
.hero__rotator .rot b.out{opacity:0;transform:translateY(-100%)}

.hero h1{margin-bottom:.55rem}
.hero__sub{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:500;color:var(--teal-700);margin-bottom:1.1rem}
.hero__text{font-size:1.12rem;color:var(--muted);max-width:52ch;margin-bottom:1.7rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero__mini{display:flex;align-items:center;gap:1rem;margin-top:1.9rem;flex-wrap:wrap}
.hero__mini .avatars{display:flex}
.hero__mini .avatars span{width:42px;height:42px;border-radius:50%;border:3px solid #fff;margin-left:-12px;
  background-size:cover;background-position:center;box-shadow:var(--sh-xs)}
.hero__mini .avatars span:first-child{margin-left:0}
.hero__mini .avatars .more{display:grid;place-items:center;background:var(--grad-navy);color:#fff;font-size:.78rem;font-weight:700}
.hero__mini .mini-txt b{display:block;color:var(--navy);font-size:1rem}
.hero__mini .mini-txt span{color:var(--muted);font-size:.88rem}
.hero__mini .stars{color:var(--gold);letter-spacing:2px;font-size:.95rem}

/* Hero media */
.hero__media{position:relative;width:100%}
.hero__photo{position:relative;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/4.1;
  border:7px solid #fff;border-radius:48% 52% 47% 53%/47% 46% 54% 53%;
  animation:morph 14s ease-in-out infinite}
@keyframes morph{0%,100%{border-radius:48% 52% 47% 53%/47% 46% 54% 53%}
  34%{border-radius:54% 46% 56% 44%/52% 56% 44% 48%}
  67%{border-radius:46% 54% 43% 57%/55% 44% 56% 45%}}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(41,53,142,.18))}

.float-card{position:absolute;z-index:4;background:rgba(255,255,255,.82);backdrop-filter:var(--glass);
  border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:.85rem 1.05rem;box-shadow:var(--sh-md);
  display:flex;align-items:center;gap:.7rem;animation:floaty 6s ease-in-out infinite}
.float-card .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;flex-shrink:0}
.float-card b{display:block;color:var(--navy);font-weight:700;font-size:1rem;line-height:1.15}
.float-card span{font-size:.8rem;color:var(--muted)}
.float-card--exp{left:-22px;top:30px;animation-delay:-1s}
.float-card--exp .ic{background:var(--grad-teal)}
.float-card--rate{right:-16px;bottom:64px;animation-delay:-3s}
.float-card--rate .stars{color:var(--gold);letter-spacing:1px}
.float-card--heart{right:24px;top:-18px;padding:.7rem;animation-delay:-2s}
.float-card--heart .ic{background:var(--grad-gold);color:var(--navy);width:38px;height:38px}
@keyframes floaty{50%{transform:translateY(-12px)}}

.hero__flight{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
.hero__flight path{fill:none;stroke:rgba(26,172,154,.45);stroke-width:2;stroke-dasharray:6 8;
  stroke-dashoffset:600;animation:draw 3s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__kolibri{position:absolute;top:-30px;right:-6px;width:118px;z-index:5;
  filter:drop-shadow(0 16px 24px rgba(27,36,64,.22));animation:hover-bird 5.5s ease-in-out infinite}
@keyframes hover-bird{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(2deg)}}

@media (max-width:880px){
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__pills,.hero__actions,.hero__mini,.hero__rotator{justify-content:center}
  .hero__text{margin-inline:auto}
  .hero__media{max-width:480px;margin:1.5rem auto 0}
  .hero__kolibri{width:88px;top:-22px;right:4px}
  .float-card--exp{left:-8px}.float-card--rate{right:-4px}
}

/* ==========================================================================
   Hero 3D stage + animated Kolibri
   ========================================================================== */
.stage{position:relative;width:100%;max-width:540px;margin:0 auto}
.stage__card{position:relative;aspect-ratio:1/1;border-radius:46px;overflow:hidden;
  perspective:1000px;border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh-lg);
  background:linear-gradient(165deg,#f1fbf8 0%,#e0f4ef 42%,#dfeaff 100%)}
.sky-orb{position:absolute;border-radius:50%;filter:blur(34px);opacity:.6;z-index:0}
.sky-orb--a{width:58%;height:58%;top:-12%;right:-10%;background:radial-gradient(circle at 35% 35%,#7fe6d8,transparent 70%);animation:drift1 18s ease-in-out infinite}
.sky-orb--b{width:48%;height:48%;bottom:-14%;left:-12%;background:radial-gradient(circle at 35% 35%,#ffd98a,transparent 70%);animation:drift2 22s ease-in-out infinite}
.sky-sun{position:absolute;top:8%;left:50%;width:120px;height:120px;border-radius:50%;
  transform:translateX(-50%);background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,236,196,.4) 45%,transparent 70%);z-index:0}

.stage__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s var(--ease);will-change:transform}

.pdot{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;
  background:var(--c);opacity:.75;box-shadow:0 0 10px var(--c);
  transform:translate3d(0,0,var(--z));animation:pfloat var(--d,8s) ease-in-out infinite;animation-delay:var(--delay,0s)}
@keyframes pfloat{0%,100%{transform:translate3d(0,6px,var(--z))}50%{transform:translate3d(0,-20px,var(--z))}}

.bloom{position:absolute;width:54px;filter:drop-shadow(0 6px 8px rgba(27,36,64,.12))}
.bloom--1{left:9%;bottom:16%;transform:translateZ(20px);animation:sway 5s ease-in-out infinite}
.bloom--2{right:8%;bottom:11%;width:42px;transform:translateZ(40px);animation:sway 6.5s ease-in-out infinite reverse}
@keyframes sway{0%,100%{rotate:-6deg}50%{rotate:8deg}}

.stage__shadow{position:absolute;left:50%;bottom:26%;width:32%;height:18px;transform:translate(-50%,0) translateZ(2px);
  background:radial-gradient(closest-side,rgba(27,36,64,.22),transparent);filter:blur(3px);
  animation:shadowPulse 3.4s ease-in-out infinite}
@keyframes shadowPulse{0%,100%{transform:translate(-50%,0) translateZ(2px) scale(1);opacity:.5}50%{transform:translate(-50%,0) translateZ(2px) scale(.8);opacity:.3}}

.wm{position:absolute;left:0;right:0;bottom:10%;display:flex;justify-content:center;align-items:baseline;gap:.06em;
  transform:translateZ(26px);z-index:3}
.wm24{font-weight:700;font-size:clamp(2.2rem,7.5vw,3.4rem);color:var(--navy);letter-spacing:-.03em;
  text-shadow:0 4px 10px rgba(41,53,142,.18)}
.wmd{font-family:"Heleno Script",cursive;font-weight:400;font-size:clamp(2.9rem,10vw,4.4rem);color:var(--teal);line-height:.6;
  text-shadow:0 6px 14px rgba(16,150,138,.22)}

.bird-wrap{position:absolute;inset:0;display:grid;place-items:center;transform:translateZ(72px);z-index:4}
.kolibri{width:min(84%,410px);overflow:visible;transform:translate(-4%,-12%)}
.bird{transform-box:fill-box;transform-origin:55% 55%;animation:birdBob 3.4s ease-in-out infinite}
@keyframes birdBob{0%,100%{transform:translateY(6px) rotate(-2.5deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.wing{transform-box:fill-box}
.wing--near{transform-origin:100% 50%;animation:flap .12s ease-in-out infinite alternate}
.wing--far{transform-origin:100% 35%;animation:flap .12s ease-in-out infinite alternate-reverse}
.wing--blur{transform-box:fill-box;transform-origin:100% 50%}
@keyframes flap{0%{transform:rotate(-24deg) scaleY(.82)}100%{transform:rotate(32deg) scaleY(1)}}

.stage__chip{position:absolute;z-index:6;display:flex;flex-direction:column;line-height:1.15;
  background:rgba(255,255,255,.86);backdrop-filter:var(--glass);border:1px solid rgba(255,255,255,.7);
  border-radius:15px;padding:.6rem .9rem;box-shadow:var(--sh-md);animation:floaty 6s ease-in-out infinite}
.stage__chip b{color:var(--navy);font-weight:700;font-size:1rem}
.stage__chip span{color:var(--muted);font-size:.78rem}
.stage__chip .s{color:var(--gold);font-size:.86rem;letter-spacing:1px}
.chip--exp{left:-16px;top:16%;animation-delay:-1s}
.chip--star{right:-14px;bottom:18%;animation-delay:-3s}

@media (max-width:880px){.stage{max-width:420px}.chip--exp{left:-6px}.chip--star{right:-6px}}
@media (prefers-reduced-motion:reduce){
  .wing--near,.wing--far,.bird,.pdot,.bloom,.stage__shadow,.sky-orb,.stage__inner{animation:none!important}
  .wing--near{transform:rotate(4deg)}.wing--far{transform:rotate(-6deg)}
}

/* ==========================================================================
   Region marquee + Partner strip
   ========================================================================== */
.regions{background:var(--navy);color:#dfe3ff;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.regions__track{display:flex;gap:3rem;align-items:center;padding:.9rem 0;white-space:nowrap;width:max-content;animation:marquee 28s linear infinite}
.regions__track span{display:inline-flex;align-items:center;gap:.7rem;font-weight:500;letter-spacing:.02em}
.regions__track span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}
.regions:hover .regions__track{animation-play-state:paused}

.partners{text-align:center}
.partners__label{font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1.6rem}
.partners__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.5rem,5vw,3.5rem)}
.partners__row img{height:clamp(38px,6vw,54px);width:auto;filter:grayscale(1);opacity:.55;
  transition:filter .3s,opacity .3s,transform .3s}
.partners__row img:hover{filter:grayscale(0);opacity:1;transform:translateY(-3px)}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.9rem 1.4rem;text-align:center;box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease),box-shadow .3s}
.stat:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.stat .ic{width:56px;height:56px;margin:0 auto .8rem;border-radius:16px;background:var(--mist);display:grid;place-items:center;color:var(--teal-700)}
.stat:nth-child(2) .ic{background:var(--gold-soft);color:var(--gold-700)}
.stat:nth-child(4) .ic{background:#e9f6ef;color:var(--green-600)}
.stat .ic svg{width:26px;height:26px}
.stat .num{font-size:2.5rem;font-weight:700;color:var(--navy);line-height:1}
.stat .lbl{color:var(--muted);font-size:.98rem;margin-top:.4rem}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

.sec-head{max-width:64ch}
.sec-head.center{margin-inline:auto}

/* ==========================================================================
   Services
   ========================================================================== */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.service{
  background:linear-gradient(135deg, #ffffff 40%, var(--theme-bg-soft, #f7fbfb) 100%);
  border:1.5px solid var(--theme-border, var(--line));
  border-top: 4px solid var(--theme-color, var(--teal));
  border-radius:var(--r-lg);
  padding:2.2rem 1.9rem;
  box-shadow:var(--theme-sh-default, 0 8px 30px -15px rgba(27,36,64,0.05));
  position:relative;
  overflow:hidden;
  transition:all 0.4s cubic-bezier(.16,1,.3,1);
  transform-style:preserve-3d;
}
.service::before{
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  top:-100px;
  right:-80px;
  background:var(--theme-grad, var(--grad-teal));
  opacity:0;
  transition:opacity 0.4s, transform 0.4s;
  filter:blur(12px);
  transform:scale(0.8);
}
.service:hover{
  transform:translateY(-8px) scale(1.015);
  box-shadow:var(--theme-sh, var(--sh-md));
  border-color:var(--theme-color, rgba(26,172,154,0.45));
  border-top-width: 5px;
}
.service:hover::before{
  opacity:0.08;
  transform:scale(1.1);
}
.service__ic{
  position:relative;
  width:64px;
  height:64px;
  border-radius:20px;
  display:grid;
  place-items:center;
  margin-bottom:1.3rem;
  color:#fff;
  background:var(--theme-grad, var(--grad-teal));
  box-shadow:var(--theme-ic-sh, var(--sh-teal));
  transition:transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s;
}
.service:hover .service__ic{
  transform:scale(1.1) rotate(-5deg);
  box-shadow:var(--theme-ic-sh-hover, var(--sh-teal));
}
.service__ic svg{
  width:32px;
  height:32px;
  transition:transform 0.4s;
}
.service:hover .service__ic svg{
  transform:scale(1.05);
}
.service h3{
  font-size:1.32rem;
  margin-bottom:.5rem;
  transition:color 0.3s;
  color:var(--navy);
}
.service:hover h3{
  color:var(--theme-color, var(--teal-700));
}
.service p{
  color:var(--muted);
  margin:0;
  font-size:0.98rem;
  line-height:1.6;
}

/* Individual card theme overrides using CSS variables */
.service:nth-child(1) {
  --theme-color: var(--teal-700);
  --theme-color-soft: rgba(26, 172, 154, 0.25);
  --theme-bg-soft: rgba(26, 172, 154, 0.06);
  --theme-border: rgba(26, 172, 154, 0.28);
  --theme-grad: var(--grad-teal);
  --theme-sh-default: 0 10px 24px -10px rgba(26, 172, 154, 0.22);
  --theme-sh: 0 20px 40px -15px rgba(26, 172, 154, 0.35);
  --theme-ic-sh: 0 12px 28px -10px rgba(26, 172, 154, 0.45);
  --theme-ic-sh-hover: 0 16px 36px -8px rgba(26, 172, 154, 0.6);
}

.service:nth-child(2) {
  --theme-color: var(--navy-600);
  --theme-color-soft: rgba(41, 53, 142, 0.25);
  --theme-bg-soft: rgba(41, 53, 142, 0.05);
  --theme-border: rgba(41, 53, 142, 0.22);
  --theme-grad: var(--grad-navy);
  --theme-sh-default: 0 8px 24px -10px rgba(41, 53, 142, 0.18);
  --theme-sh: 0 20px 40px -15px rgba(41, 53, 142, 0.3);
  --theme-ic-sh: 0 12px 28px -10px rgba(41, 53, 142, 0.4);
  --theme-ic-sh-hover: 0 16px 36px -8px rgba(41, 53, 142, 0.55);
}

.service:nth-child(3) {
  --theme-color: var(--green-600);
  --theme-color-soft: rgba(22, 163, 90, 0.25);
  --theme-bg-soft: rgba(22, 163, 90, 0.05);
  --theme-border: rgba(22, 163, 90, 0.22);
  --theme-grad: var(--grad-green);
  --theme-sh-default: 0 8px 24px -10px rgba(22, 163, 90, 0.18);
  --theme-sh: 0 20px 40px -15px rgba(22, 163, 90, 0.3);
  --theme-ic-sh: 0 12px 28px -10px rgba(22, 163, 90, 0.4);
  --theme-ic-sh-hover: 0 16px 36px -8px rgba(22, 163, 90, 0.5);
}

.service:nth-child(4) {
  --theme-color: var(--gold-700);
  --theme-color-soft: rgba(244, 165, 42, 0.25);
  --theme-bg-soft: rgba(244, 165, 42, 0.06);
  --theme-border: rgba(244, 165, 42, 0.28);
  --theme-grad: var(--grad-gold);
  --theme-sh-default: 0 10px 24px -10px rgba(244, 165, 42, 0.22);
  --theme-sh: 0 20px 40px -15px rgba(244, 165, 42, 0.35);
  --theme-ic-sh: 0 12px 28px -10px rgba(244, 165, 42, 0.35);
  --theme-ic-sh-hover: 0 16px 36px -8px rgba(244, 165, 42, 0.45);
}
.service:nth-child(4) .service__ic {
  color: var(--navy);
}

.service:nth-child(5) {
  --theme-color: var(--navy-600);
  --theme-color-soft: rgba(41, 53, 142, 0.25);
  --theme-bg-soft: rgba(41, 53, 142, 0.05);
  --theme-border: rgba(41, 53, 142, 0.22);
  --theme-grad: var(--grad-navy);
  --theme-sh-default: 0 8px 24px -10px rgba(41, 53, 142, 0.18);
  --theme-sh: 0 20px 40px -15px rgba(41, 53, 142, 0.3);
  --theme-ic-sh: 0 12px 28px -10px rgba(41, 53, 142, 0.4);
  --theme-ic-sh-hover: 0 16px 36px -8px rgba(41, 53, 142, 0.55);
}

.service:nth-child(6) {
  --theme-color: var(--green-600);
  --theme-color-soft: rgba(22, 163, 90, 0.25);
  --theme-bg-soft: rgba(22, 163, 90, 0.05);
  --theme-border: rgba(22, 163, 90, 0.22);
  --theme-grad: var(--grad-green);
  --theme-sh-default: 0 8px 24px -10px rgba(22, 163, 90, 0.18);
  --theme-sh: 0 20px 40px -15px rgba(22, 163, 90, 0.3);
  --theme-ic-sh: 0 12px 28px -10px rgba(22, 163, 90, 0.4);
  --theme-ic-sh-hover: 0 16px 36px -8px rgba(22, 163, 90, 0.5);
}

@media (max-width:900px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.services{grid-template-columns:1fr}}

/* ==========================================================================
   Split / explainer
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative}
.split__media img{border-radius:var(--r-2xl);box-shadow:var(--sh-lg);width:100%;border:7px solid #fff}
.split__media .deco-dot{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(26,172,154,.4),transparent 70%);z-index:-1}
.split__media .deco-grid{position:absolute;width:120px;height:120px;z-index:-1;
  background-image:radial-gradient(var(--gold) 1.6px,transparent 1.6px);background-size:16px 16px;opacity:.4}
.facts{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.85rem}
.facts li{display:flex;gap:.8rem;align-items:flex-start;font-size:1.05rem}
.facts .tick{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--mist);color:var(--teal-700);display:grid;place-items:center;margin-top:2px}
.section--navy .facts .tick{background:rgba(134,228,213,.18);color:#86e4d5}
.facts .tick svg{width:16px;height:16px}
@media (max-width:820px){.split{grid-template-columns:1fr}.split--rev .split__media{order:0}.split__media{max-width:520px;margin-inline:auto}}

/* ==========================================================================
   Process
   ========================================================================== */
.process{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3rem;counter-reset:step}
.step{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:2.2rem 1.5rem 1.6rem;
  transition:transform .3s var(--ease),background .3s}
.step:hover{transform:translateY(-6px);background:rgba(255,255,255,.12)}
.step__n{counter-increment:step;width:52px;height:52px;border-radius:50%;background:var(--grad-gold);color:var(--navy);font-weight:700;font-size:1.35rem;display:grid;place-items:center;box-shadow:0 14px 30px -12px rgba(216,134,19,.7);margin-bottom:1rem}
.step__n::before{content:counter(step)}
.step h3{font-size:1.18rem;color:#fff;margin-bottom:.35rem}
.step p{color:#c7cdf2;font-size:.98rem;margin:0}
.step:not(:last-child)::after{content:"";position:absolute;top:48px;right:-0.85rem;width:1.7rem;height:2px;background:repeating-linear-gradient(90deg,rgba(134,228,213,.7) 0 6px,transparent 6px 12px)}
@media (max-width:900px){.process{grid-template-columns:repeat(2,1fr)}.step:nth-child(2)::after{display:none}}
@media (max-width:520px){.process{grid-template-columns:1fr}.step::after{display:none}}

/* ==========================================================================
   Why / benefits
   ========================================================================== */
.why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.benefits{display:grid;gap:1rem}
.benefit{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--sh-sm);transition:transform .25s var(--ease),box-shadow .25s}
.benefit:hover{transform:translateX(6px);box-shadow:var(--sh-md)}
.benefit .ic{flex-shrink:0;width:46px;height:46px;border-radius:13px;background:var(--mist);color:var(--teal-700);display:grid;place-items:center}
.benefit:nth-child(2) .ic{background:var(--gold-soft);color:var(--gold-700)}
.benefit:nth-child(3) .ic{background:#e9f6ef;color:var(--green-600)}
.benefit:nth-child(4) .ic{background:#e9ebfb;color:var(--navy)}
.benefit .ic svg{width:24px;height:24px}
.benefit b{display:block;color:var(--navy);font-size:1.08rem}
.benefit span{color:var(--muted);font-size:.97rem}
.guarantee{background:var(--grad-hero);color:#fff;border-radius:var(--r-2xl);padding:clamp(1.8rem,4vw,2.6rem);box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.guarantee::before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.12);top:-90px;right:-60px}
.guarantee::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(244,165,42,.3);bottom:-70px;left:-40px;filter:blur(20px)}
.guarantee h3{color:#fff;font-size:1.6rem;position:relative}
.guarantee p{color:rgba(255,255,255,.94);position:relative}
.guarantee .seal{display:inline-flex;align-items:center;gap:.6em;background:rgba(255,255,255,.18);padding:.5rem .9rem;border-radius:999px;font-weight:700;font-size:.9rem;margin-bottom:1rem;position:relative}
.guarantee .seal svg{width:1.1em;height:1.1em}
@media (max-width:820px){.why{grid-template-columns:1fr}}

/* ==========================================================================
   Story
   ========================================================================== */
.story__quote{font-weight:500;font-style:italic;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--navy);line-height:1.4;
  border-left:4px solid var(--gold);padding-left:1.2rem;margin:1.5rem 0}
.story__sign{display:flex;align-items:center;gap:.9rem;margin-top:1.4rem}
.story__sign .nm{font-weight:700;color:var(--navy)}
.story__sign .rl{color:var(--muted);font-size:.95rem}
.story__sign .script{font-size:2rem;line-height:1}

/* ==========================================================================
   Team
   ========================================================================== */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.member{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .35s var(--ease),box-shadow .35s}
.member:hover{transform:translateY(-7px);box-shadow:var(--sh-md)}
.member__photo{aspect-ratio:4/3.1;overflow:hidden;position:relative}
.member__photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.member:hover .member__photo img{transform:scale(1.06)}
.member__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(41,53,142,.28))}
.member__role{position:absolute;left:14px;bottom:14px;z-index:2;background:rgba(255,255,255,.92);color:var(--teal-700);font-weight:700;font-size:.82rem;padding:.35rem .8rem;border-radius:999px;backdrop-filter:blur(4px)}
.member__body{padding:1.4rem 1.4rem 1.7rem}
.member__body h3{font-size:1.25rem;margin-bottom:.1rem}
.member__title{color:var(--teal-700);font-weight:500;font-size:.92rem;margin-bottom:.8rem}
.member__body p{color:var(--muted);font-size:.98rem;margin:0;font-style:italic}
@media (max-width:900px){.team{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* ==========================================================================
   Kolibri band
   ========================================================================== */
.kolibri-band{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.kolibri-band__art{position:relative;display:grid;place-items:center;min-height:260px}
.kolibri-band__art img{width:min(78%,320px);animation:hover-bird 6s ease-in-out infinite;filter:drop-shadow(0 16px 26px rgba(27,36,64,.18));border:0;background:none;box-shadow:none;border-radius:0}
.kolibri-band__art .ring{position:absolute;border-radius:50%;border:2px dashed rgba(26,172,154,.4)}
.kolibri-band__art .ring--1{width:300px;height:300px;animation:spin 40s linear infinite}
.kolibri-band__art .ring--2{width:210px;height:210px;animation:spin 30s linear infinite reverse;border-color:rgba(244,165,42,.45)}
@keyframes spin{to{transform:rotate(360deg)}}
.meaning{display:grid;gap:1.1rem;margin-top:1.2rem}
.meaning li{display:flex;gap:.9rem;align-items:flex-start;list-style:none}
.meaning .ic{flex-shrink:0;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--grad-teal)}
.meaning li:nth-child(2) .ic{background:var(--grad-gold);color:var(--navy)}
.meaning li:nth-child(3) .ic{background:var(--grad-navy)}
.meaning .ic svg{width:22px;height:22px}
.meaning b{color:var(--navy)}
.meaning span{color:var(--muted)}
@media (max-width:820px){.kolibri-band{grid-template-columns:1fr}.kolibri-band__art{min-height:220px}}

/* ==========================================================================
   FAQ accordion (shared — used on homepage FAQ strip too)
   ========================================================================== */
.faq{max-width:840px;margin:3rem auto 0;display:grid;gap:.8rem}
.qa{
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:box-shadow .3s var(--ease), border-color .3s, transform .3s var(--ease);
  border-left:3px solid transparent;
  position:relative;
}
.qa::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--grad-teal);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .35s var(--ease);
  border-radius:3px 0 0 3px;
}
.qa.open{
  box-shadow:0 12px 36px -16px rgba(26,172,154,.25), var(--sh-sm);
  border-color:rgba(26,172,154,.2);
  transform:translateX(3px);
}
.qa.open::before{transform:scaleY(1)}
.qa__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;background:none;border:0;padding:1.3rem 1.5rem;
  text-align:left;cursor:pointer;font-family:inherit;
  font-weight:600;font-size:1.08rem;color:var(--navy);
  transition:color .2s;
}
.qa__q:hover,.qa.open .qa__q{color:var(--teal-700)}
.qa__q-text{flex:1;line-height:1.45}
/* Plus → X toggle icon */
.qa__toggle{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:var(--mist);color:var(--teal-700);
  display:grid;place-items:center;
  transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s;
}
.qa__toggle svg{width:16px;height:16px;transition:stroke .2s}
.qa.open .qa__toggle{
  transform:rotate(45deg);
  background:var(--grad-gold);color:var(--navy);
  box-shadow:0 6px 18px -6px rgba(244,165,42,.55);
}
/* Legacy ic alias */
.qa__ic{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--mist);color:var(--teal-700);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s,color .3s}
.qa__ic svg{width:18px;height:18px}
.qa.open .qa__ic{transform:rotate(45deg);background:var(--grad-gold);color:var(--navy)}
.qa__a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease-out)}
.qa__a-inner{padding:.2rem 1.5rem 1.5rem;color:var(--muted);line-height:1.75}
.qa__a-inner p{margin:0 0 .6rem}
.qa__a-inner p:last-child{margin:0}
.qa__a-cta{
  display:inline-flex;align-items:center;gap:.4em;
  margin-top:.8rem;font-size:.92rem;font-weight:700;
  color:var(--teal-700);text-decoration:none;
  transition:gap .2s var(--ease);
}
.qa__a-cta:hover{gap:.65em}

/* ==========================================================================
   Inquiry form
   ========================================================================== */
.inquiry{position:relative}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--sh-lg);max-width:780px;margin:2.5rem auto 0;overflow:hidden}
.form-progress{padding:1.6rem clamp(1.4rem,4vw,2.4rem) 0}
.form-progress__bar{height:9px;background:var(--cream-2);border-radius:999px;overflow:hidden}
.form-progress__fill{height:100%;width:25%;background:linear-gradient(90deg,var(--teal),var(--green));border-radius:999px;transition:width .5s var(--ease)}
.form-progress__meta{display:flex;justify-content:space-between;margin-top:.7rem;font-size:.9rem;color:var(--muted)}
.form-progress__meta b{color:var(--navy)}
.form-body{padding:1.6rem clamp(1.4rem,4vw,2.4rem) 0}
.fstep{display:none;animation:fade .45s var(--ease)}
.fstep.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fstep h3{font-size:1.4rem;margin-bottom:.2rem}
.fstep__hint{color:var(--muted);font-size:.98rem;margin-bottom:1.4rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
.fgrid--3{grid-template-columns:1fr 1fr 1fr}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--full{grid-column:1/-1}
.field label{font-weight:500;color:var(--navy);font-size:.98rem}
.field .req{color:var(--gold-700)}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;color:var(--ink);padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:14px;background:var(--cream);transition:border-color .2s,box-shadow .2s,background .2s;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(26,172,154,.14)}
.choice-row{display:flex;flex-wrap:wrap;gap:.6rem}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice span{display:inline-flex;align-items:center;gap:.5em;padding:.7rem 1.1rem;border:1.5px solid var(--line);border-radius:999px;background:var(--cream);font-size:.97rem;cursor:pointer;transition:.2s;color:var(--navy)}
.choice input:checked+span{border-color:var(--teal);background:var(--mist);color:var(--teal-700);font-weight:500;box-shadow:0 0 0 3px rgba(26,172,154,.12)}
.choice input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.consent{display:flex;gap:.8rem;align-items:flex-start;background:var(--mist);border-radius:16px;padding:1.1rem 1.2rem;margin-top:.4rem}
.consent input{margin-top:.25rem;width:20px;height:20px;accent-color:var(--teal);flex-shrink:0}
.consent label{font-size:.92rem;color:var(--muted);font-weight:300}
.form-actions{display:flex;justify-content:space-between;gap:1rem;padding:1.6rem clamp(1.4rem,4vw,2.4rem) 2rem;flex-wrap:wrap}
.form-success{display:none;text-align:center;padding:3rem 2rem}
.form-success.show{display:block;animation:fade .5s var(--ease)}
.form-success .check{width:84px;height:84px;border-radius:50%;background:var(--grad-teal);display:grid;place-items:center;margin:0 auto 1.2rem;box-shadow:var(--sh-teal);animation:pop .5s var(--ease)}
.form-success .check svg{width:42px;height:42px;color:#fff}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.field-error{border-color:var(--gold-700)!important;box-shadow:0 0 0 4px rgba(216,134,19,.14)!important}
.err-msg{color:var(--gold-700);font-size:.85rem;display:none}
.err-msg.show{display:block}
@media (max-width:600px){.fgrid,.fgrid--3{grid-template-columns:1fr}}

/* ==========================================================================
   Offices
   ========================================================================== */
.offices{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:3rem}
.office{background:linear-gradient(180deg,#fff,#fbfdfc);border:1px solid var(--line);border-radius:24px;padding:1.9rem 1.9rem 1.8rem;box-shadow:0 12px 32px rgba(18,28,60,.07);position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.office::before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;top:-95px;right:-60px;background:var(--grad-teal);opacity:.1;transition:transform .55s var(--ease)}
.office:nth-child(2)::before{background:var(--grad-gold);opacity:.14}
.office::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--teal),var(--green) 55%,var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.office:hover{transform:translateY(-6px);box-shadow:0 28px 54px rgba(18,28,60,.14);border-color:transparent}
.office:hover::before{transform:scale(1.18) rotate(8deg)}
.office:hover::after{transform:scaleX(1)}
.office__tag{display:inline-flex;align-items:center;gap:.5em;background:var(--mist);color:var(--teal-700);font-weight:700;font-size:.8rem;letter-spacing:.02em;padding:.45rem 1rem;border-radius:999px;margin-bottom:1.05rem;position:relative;box-shadow:inset 0 0 0 1px rgba(26,172,154,.16)}
.office:nth-child(2) .office__tag{background:var(--gold-soft);color:var(--gold-700);box-shadow:inset 0 0 0 1px rgba(244,165,42,.22)}
.office__tag svg{width:1.05em;height:1.05em}
.office h3{font-size:1.55rem;margin-bottom:1rem}
.office__list{list-style:none;margin:0 -.5rem;padding:0;display:grid;gap:.15rem}
.office__list li{display:flex;gap:.8rem;align-items:center;color:var(--ink);padding:.5rem;border-radius:14px;transition:background .25s}
.office__list li:hover{background:var(--mist)}
.office:nth-child(2) .office__list li:hover{background:var(--gold-soft)}
.office__list .ic{flex-shrink:0;width:42px;height:42px;border-radius:13px;background:#fff;color:var(--teal-700);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line),0 4px 10px rgba(18,28,60,.05);transition:transform .25s,background .25s,color .25s,box-shadow .25s}
.office__list li:hover .ic{background:var(--grad-teal);color:#fff;box-shadow:0 8px 16px rgba(26,172,154,.32);transform:translateY(-2px)}
.office:nth-child(2) .office__list li:hover .ic{background:var(--grad-gold);box-shadow:0 8px 16px rgba(244,165,42,.32)}
.office__list .ic svg{width:20px;height:20px}
.office__list a{color:var(--ink);font-weight:600}
.office__list a:hover{color:var(--teal-700)}
.office__list .sub{color:var(--muted);font-size:.88rem;font-weight:400;margin-left:.35rem}
.office__list .ic--wa{background:rgba(37,211,102,.12);color:#1faa52;box-shadow:inset 0 0 0 1px rgba(37,211,102,.22)}
.office__list .ic--wa svg{width:22px;height:22px}
.office__list li:hover .ic--wa,.office:nth-child(2) .office__list li:hover .ic--wa{background:#25D366;color:#fff;box-shadow:0 8px 16px rgba(37,211,102,.32)}
/* meta row: live status + directions */
.office__meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.25rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.office__status{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.9rem;color:var(--muted)}
.office__status .dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex-shrink:0}
.office__status.is-open{color:#0c8a48}
.office__status.is-open .dot{background:#19b35c;animation:livedot 2.2s infinite}
@keyframes livedot{0%{box-shadow:0 0 0 0 rgba(25,179,92,.5)}70%{box-shadow:0 0 0 8px rgba(25,179,92,0)}100%{box-shadow:0 0 0 0 rgba(25,179,92,0)}}
.office__dir{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--teal-700);font-size:.9rem;transition:color .2s,transform .2s}
.office__dir svg{width:1.05em;height:1.05em}
.office__dir:hover{color:var(--navy);transform:translateX(2px)}
.office__actions{display:flex;gap:.7rem;margin-top:1.3rem;flex-wrap:wrap}
/* WhatsApp button + inline glyph */
.btn--wa{background:#25D366;color:#fff;border:1.5px solid #25D366;box-shadow:0 8px 18px rgba(37,211,102,.28);display:inline-flex;align-items:center;gap:.5rem}
.btn--wa:hover{background:#1faa52;border-color:#1faa52;color:#fff}
.btn--wa .wa-ic{width:18px;height:18px;flex-shrink:0}
@media (max-width:760px){.offices{grid-template-columns:1fr}}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.section--testi{background:linear-gradient(180deg,#fff 0%,#f6faf9 100%);position:relative;overflow:hidden}
.section--testi::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;top:-220px;left:-160px;background:radial-gradient(circle,rgba(26,172,154,.1),transparent 70%);pointer-events:none}
.section--testi::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;bottom:-220px;right:-150px;background:radial-gradient(circle,rgba(244,165,42,.1),transparent 70%);pointer-events:none}
.sec-head__sub{max-width:54ch;margin:.8rem auto 0;color:var(--muted);font-size:1.05rem}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem;position:relative;z-index:1}
.tcard{margin:0;position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.7rem 1.6rem 1.5rem;box-shadow:0 12px 30px rgba(18,28,60,.06);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.tcard::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--green) 55%,var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.tcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(18,28,60,.13);border-color:transparent}
.tcard:hover::after{transform:scaleX(1)}
.tcard__mark{position:absolute;top:.1rem;right:1rem;font-family:Georgia,"Times New Roman",serif;font-size:6rem;line-height:1;color:var(--teal);opacity:.1;pointer-events:none}
.tcard__stars{color:var(--gold);letter-spacing:2px;font-size:1.02rem;margin-bottom:.7rem}
.tcard blockquote{margin:0 0 1.3rem;font-size:1.04rem;line-height:1.6;color:var(--ink);font-weight:500;position:relative;z-index:1}
.tcard figcaption{display:flex;align-items:center;gap:.85rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)}
.tcard__avatar{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.95rem;letter-spacing:.02em;background:var(--grad-teal);box-shadow:0 6px 14px rgba(26,172,154,.32)}
.tcard:nth-child(3n+2) .tcard__avatar{background:var(--grad-gold);box-shadow:0 6px 14px rgba(244,165,42,.32)}
.tcard:nth-child(3n+3) .tcard__avatar{background:linear-gradient(135deg,var(--navy),#3a49b8);box-shadow:0 6px 14px rgba(41,53,142,.3)}
.tcard__who{display:flex;flex-direction:column;line-height:1.3}
.tcard__who b{color:var(--navy);font-size:1rem}
.tcard__who span{color:var(--muted);font-size:.88rem}
@media (max-width:900px){.testimonials{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.testimonials{grid-template-columns:1fr}}

/* ---- Google reviews ---- */
.greview-badge{display:flex;align-items:center;gap:1.1rem 1.4rem;flex-wrap:wrap;justify-content:center;margin:2.4rem auto 0;max-width:760px;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.1rem 1.5rem;box-shadow:0 14px 36px rgba(18,28,60,.08);position:relative;z-index:1}
.greview-badge__logo{width:40px;height:40px;flex-shrink:0}
.greview-badge__logo svg{width:100%;height:100%}
.greview-badge__info{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:170px}
.greview-badge__top{display:flex;align-items:center;gap:.6rem}
.greview-badge__rate{font-size:2rem;font-weight:800;color:var(--navy);line-height:1}
.greview-badge__stars{display:inline-flex;gap:1px;font-size:1.15rem;letter-spacing:1px}
.greview-badge__meta{color:var(--muted);font-size:.92rem}
.greview-badge__meta a{color:var(--teal-700);font-weight:600}
.st{color:#dfe3ee}.st.on{color:#fbbc05}
.btn--google{background:#fff;color:var(--navy);border:1.5px solid var(--line);box-shadow:var(--sh-sm);display:inline-flex;align-items:center;gap:.6rem}
.btn--google::after{display:none}
.btn--google:hover{border-color:#4285F4;color:#1a1a1a;box-shadow:0 14px 30px -16px rgba(66,133,244,.5)}
.btn--google .g-ic{width:1.25em;height:1.25em;display:inline-grid;flex-shrink:0}
.btn--google .g-ic svg{width:100%;height:100%}
.greviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.2rem;position:relative;z-index:1}
.greviews--few{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem}
.greviews--few .greview{flex:0 1 360px}
.greview{margin:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.5rem 1.5rem 1.4rem;box-shadow:0 12px 30px rgba(18,28,60,.06);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.greview:hover{transform:translateY(-5px);box-shadow:0 26px 50px rgba(18,28,60,.13);border-color:transparent}
.greview__head{display:flex;align-items:center;gap:.75rem;margin-bottom:.7rem}
.greview__avatar{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;overflow:hidden;color:#fff;font-weight:800;font-size:.95rem;background:linear-gradient(135deg,var(--teal),var(--green))}
.greview__avatar img{width:100%;height:100%;object-fit:cover}
.greview:nth-child(3n+2) .greview__avatar{background:linear-gradient(135deg,var(--gold),#e08e12)}
.greview:nth-child(3n+3) .greview__avatar{background:linear-gradient(135deg,var(--navy),#3a49b8)}
.greview__who{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.greview__who b{color:var(--navy);font-size:.98rem}
.greview__who span{color:var(--muted);font-size:.82rem}
.greview__src{width:20px;height:20px;flex-shrink:0;opacity:.9}
.greview__src svg{width:100%;height:100%}
.greview__stars{display:inline-flex;gap:1px;font-size:1.05rem;margin-bottom:.6rem;letter-spacing:1px}
.greview blockquote{margin:0;color:var(--ink);font-size:.95rem;line-height:1.6;white-space:pre-line;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;min-height:9.1em}
.greview.is-open blockquote{-webkit-line-clamp:unset;display:block;overflow:visible;min-height:0}
.greview__more{align-self:flex-start;margin-top:.65rem;background:none;border:0;padding:.1rem 0;font:inherit;font-weight:700;font-size:.9rem;color:var(--teal-700);cursor:pointer}
.greview__more:hover{text-decoration:underline}
@media (max-width:900px){.greviews{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.greviews{grid-template-columns:1fr}}

/* ==========================================================================
   Partners / regional engagement
   ========================================================================== */
.partners-sec{background:linear-gradient(180deg,#fff,#f7faf9)}
.partners{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:1.1rem;margin-top:2.4rem}
.partner{display:flex;align-items:center;justify-content:center;min-width:150px;height:104px;padding:1rem 1.4rem;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 20px rgba(18,28,60,.05);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.partner img{max-height:64px;max-width:170px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .35s,opacity .35s,transform .35s}
.partner:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(18,28,60,.12);border-color:transparent}
.partner:hover img{filter:grayscale(0);opacity:1;transform:scale(1.04)}
@media (max-width:560px){.partner{min-width:120px;height:88px;padding:.7rem 1rem}.partner img{max-height:52px;max-width:130px}}

/* ==========================================================================
   Photo-backed sections (lifestyle backgrounds behind a brand-tinted scrim)
   ========================================================================== */
.sp{background-size:cover;background-position:center;background-repeat:no-repeat}
@media (min-width:1100px){.sp-proc,.ctaband.sp-cta{background-attachment:fixed}}
/* light sections: warm photo behind a near-solid light wash (dark text stays crisp) */
.section--mist.sp-svc{background-image:radial-gradient(120% 90% at 50% 0,rgba(244,249,248,.82),rgba(244,249,248,.95) 70%),url("../assets/img/001bg.jpg")}
.section--cream2.sp-about{background-image:linear-gradient(180deg,rgba(252,249,243,.9),rgba(252,249,243,.95)),url("../assets/img/003bg.jpg")}
/* navy sections: cinematic — photo under a deep navy wash, white text + glass cards */
.section--navy.sp-proc{background-image:linear-gradient(180deg,rgba(15,21,58,.86),rgba(17,24,68,.92)),url("../assets/img/002bg.jpg")}
.section--navy.sp-care{background-image:linear-gradient(180deg,rgba(14,20,58,.9) 0%,rgba(16,23,66,.94) 100%),url("../assets/img/004bg.jpg");background-position:center 38%}
@media (min-width:1100px){.sp-care{background-attachment:fixed}}
.ctaband.sp-cta{background-image:linear-gradient(130deg,rgba(13,19,54,.9),rgba(28,36,96,.78)),url("../assets/img/004bg.jpg");background-size:cover;background-position:center 30%}

/* ==========================================================================
   CTA band
   ========================================================================== */
.ctaband{position:relative;overflow:hidden;background:var(--grad-hero);color:#fff;border-radius:var(--r-2xl);padding:clamp(2.4rem,6vw,4rem);text-align:center;box-shadow:var(--sh-lg)}
.ctaband::before,.ctaband::after{content:"";position:absolute;border-radius:50%}
.ctaband::before{width:320px;height:320px;top:-140px;left:-80px;background:rgba(255,255,255,.1)}
.ctaband::after{width:280px;height:280px;bottom:-150px;right:-60px;background:rgba(244,165,42,.25);filter:blur(30px)}
.ctaband h2{color:#fff;position:relative}
.ctaband p{color:rgba(255,255,255,.94);max-width:54ch;margin:0 auto 1.8rem;position:relative;font-size:1.12rem}
.ctaband .hero__actions{position:relative;justify-content:center}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{position:relative;overflow:hidden;color:#c4cbee;padding-top:clamp(56px,8vw,92px);
  background:
    radial-gradient(820px 360px at 84% -12%,rgba(26,172,154,.15),transparent 60%),
    radial-gradient(640px 340px at 6% 120%,rgba(244,165,42,.06),transparent 60%),
    linear-gradient(180deg,#1b2472 0%,#10163c 80%);}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--teal),var(--green) 50%,var(--gold))}
.footer::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../assets/img/kolibri-banner.png") center center/112% auto no-repeat;opacity:.06;
  -webkit-mask-image:radial-gradient(62% 82% at 50% 50%,#000 34%,transparent 88%);
          mask-image:radial-gradient(62% 82% at 50% 50%,#000 34%,transparent 88%)}
.footer>.container{position:relative;z-index:3}
.footer__brand{align-self:start;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:1.6rem 1.6rem 1.7rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.footer ul a{display:inline-block;transition:color .2s,transform .2s}
.footer ul a:hover{transform:translateX(4px)}
.footer a{color:#dfe3ff}
.footer a:hover{color:#86e4d5}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.2rem;position:relative}
.footer__brand img{height:104px;width:auto;max-width:100%;display:block;align-self:flex-start;box-sizing:content-box;margin:.1rem 0 0;background:#fff;border-radius:16px;padding:.9rem 1.1rem;box-shadow:0 12px 26px rgba(8,12,38,.3)}
.footer__brand p{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);position:relative;color:#aab2e0;font-size:.95rem;line-height:1.62;max-width:32ch}
.footer__brand p::before{content:"";position:absolute;top:-1px;left:0;width:42px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.footer__social{display:flex;align-items:center;gap:.9rem;margin-top:1.35rem}
.footer__social>span{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8b93c4}
.footer__social .soc{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.17),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px rgba(0,0,0,.22);
  transition:transform .3s var(--ease),box-shadow .3s,background .3s}
.footer__social .soc svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.footer__social .soc::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.14);pointer-events:none}
.footer__social .soc:hover{transform:translateY(-3px);background:linear-gradient(160deg,#4a93ff,#1877F2);
  box-shadow:0 14px 26px -8px rgba(24,119,242,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.footer__social .soc:hover svg{transform:scale(1.1)}
.footer__social .soc:hover::after{border-color:rgba(255,255,255,.35)}
.footer h4{color:#fff;font-size:1.05rem;letter-spacing:.04em;margin-bottom:1rem;position:relative;padding-bottom:.55rem}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.footer ul a{color:#b9c0e8;font-weight:300}
.foot-contact{display:grid;gap:.7rem}
.foot-contact .row{display:flex;gap:.7rem;align-items:flex-start}
.foot-contact svg{width:1.1em;height:1.1em;color:#86e4d5;margin-top:.2em;flex-shrink:0}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.6rem;padding:1.4rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.9rem;color:#8c95c8;position:relative}
.footer__bottom .links{display:flex;gap:1.3rem;flex-wrap:wrap}
.footer__bottom .links a{position:relative;color:#aab2e0}
.footer__bottom .links a+a{padding-left:1.3rem}
.footer__bottom .links a+a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:12px;background:rgba(255,255,255,.18)}
/* Footer locations + CTA (replaces the old duplicate "Rechtliches" column) */
.footer__grid--3{grid-template-columns:1.5fr 1fr 1.3fr}
.foot-offices{list-style:none;margin:0;padding:0;display:grid;gap:1.05rem}
.foot-offices li{display:grid;gap:.18rem;font-size:.92rem;line-height:1.5}
.foot-offices .off-name{color:#fff;font-weight:600;letter-spacing:.01em}
.foot-offices .off-addr{color:#aab2e0}
.foot-offices .off-phone{color:#b9c0e8;font-weight:300}
.foot-offices .off-phone:hover{color:#86e4d5}
.footer__cta{margin-top:1.4rem;align-self:start;box-shadow:0 14px 30px -12px rgba(216,134,19,.6)}
.footer .btn, .footer .btn:hover{color:var(--fg) !important}
@media (max-width: 768px) {
  .footer {
    padding-bottom: 110px; /* offset for floating chat & scroll-to-top FABs */
  }
  .footer::after {
    background: url("../assets/img/kolibri-banner.png") right center/cover no-repeat;
    opacity: 0.04;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .footer__grid, .footer__grid--3 {
    grid-template-columns: 1fr 1fr;
    gap: 2.2rem 1.5rem;
  }
  .footer__brand {
    grid-column: 1 / -1;
    order: 1;
  }
  .footer__nav {
    grid-column: 1;
    order: 2;
  }
  .footer__contact {
    grid-column: 2;
    order: 3;
  }
  .footer__locations {
    grid-column: 1 / -1;
    order: 4;
  }
  .foot-offices {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .foot-offices li {
    border-left: 2.5px solid var(--teal);
    padding-left: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  .foot-contact {
    gap: 0.75rem;
  }
  .foot-contact .row {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: background 0.25s, border-color 0.25s;
  }
  .foot-contact .row:active,
  .foot-contact .row:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
  }
  .foot-contact svg {
    margin-top: 0;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
  }
  .foot-contact .row a,
  .foot-contact .row span {
    color: #dfe3ff;
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    flex: 1;
  }
  .footer__bottom .links a+a {
    padding-left: 0;
  }
  .footer__bottom .links a+a::before {
    display: none;
  }
  .footer__bottom .links {
    gap: 0.6rem 1.2rem;
  }
}
@media (max-width: 520px) {
  .footer__grid, .footer__grid--3 {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .footer__brand,
  .footer__nav,
  .footer__contact,
  .footer__locations {
    grid-column: auto;
    order: unset;
  }
  .footer__brand {
    align-items: center;
    text-align: center;
    padding: 1.25rem;
  }
  .footer__brand img {
    align-self: center;
  }
  .footer__brand p::before {
    left: 50%;
    transform: translateX(-50%);
  }
  .footer__social {
    justify-content: center;
  }
  .footer__nav ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1rem;
  }
  .foot-offices {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }
  .footer__cta {
    display: flex;
    width: 100%;
    justify-content: center;
    align-self: stretch;
    text-align: center;
    margin-top: 1.5rem;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
  }
  .footer__bottom .links {
    justify-content: center;
  }
}

/* ==========================================================================
   Floating helpers
   ========================================================================== */
/* WhatsApp FAB retired — replaced by the live-chat widget below */
.fab-wa{display:none !important}

/* ---- Live chat widget (launcher + panel) ---- */
.chat-fab{position:fixed;right:18px;bottom:18px;z-index:56;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--grad-teal);box-shadow:0 12px 28px rgba(26,172,154,.45);transition:transform .25s,box-shadow .25s;animation:pulse-chat 2.8s ease-in-out infinite}
.chat-fab svg{width:30px;height:30px}
.chat-fab:hover{transform:translateY(-3px) scale(1.04)}
.chat-fab.is-open{animation:none}
@keyframes pulse-chat{0%,100%{box-shadow:0 12px 28px rgba(26,172,154,.4),0 0 0 0 rgba(26,172,154,.45)}50%{box-shadow:0 12px 28px rgba(26,172,154,.4),0 0 0 16px rgba(26,172,154,0)}}
.chat-fab__dot{position:absolute;top:2px;right:4px;width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid #fff}
.chatbox{position:fixed;right:18px;bottom:88px;z-index:57;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 140px));background:#fff;border-radius:20px;border:1px solid var(--line);box-shadow:0 30px 70px -20px rgba(20,30,70,.5);display:flex;flex-direction:column;overflow:hidden;animation:cbIn .25s var(--ease)}
.chatbox[hidden]{display:none}
@keyframes cbIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.chatbox__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.85rem 1rem;color:#fff;background:linear-gradient(135deg,var(--teal),var(--green))}
.chatbox__id{display:flex;align-items:center;gap:.65rem}
.chatbox__av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:rgba(255,255,255,.22)}
.chatbox__idt b{display:block;font-size:1.02rem;line-height:1.1}
.chatbox__status{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;opacity:.95}
.chatbox__status i{width:8px;height:8px;border-radius:50%;background:#9af7c0;animation:livedot 2s infinite}
.chatbox__close{background:none;border:0;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;opacity:.85;padding:0 .25rem}
.chatbox__close:hover{opacity:1}
.chatbox__body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.55rem;background:#f5f8fc}
.cb-msg{display:flex;flex-direction:column;max-width:82%}
.cb-msg--me{align-self:flex-end;align-items:flex-end}
.cb-msg--bot,.cb-msg--agent{align-self:flex-start;align-items:flex-start}
.cb-who{font-size:.7rem;color:var(--muted);margin:0 .35rem .12rem;font-weight:600}
.cb-bubble{padding:.6rem .85rem;border-radius:16px;font-size:.94rem;line-height:1.45;box-shadow:0 1px 2px rgba(20,30,60,.07)}
.cb-msg--me .cb-bubble{background:var(--navy);color:#fff;border-bottom-right-radius:5px}
.cb-msg--bot .cb-bubble{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--ink)}
.cb-msg--agent .cb-bubble{background:var(--teal);color:#fff;border-bottom-left-radius:5px}
.cb-typing{align-self:flex-start;display:flex;gap:4px;padding:.7rem .9rem;background:#fff;border:1px solid var(--line);border-radius:16px}
.cb-typing span{width:7px;height:7px;border-radius:50%;background:#b9c0d8;animation:cbBounce 1.2s infinite}
.cb-typing span:nth-child(2){animation-delay:.15s}.cb-typing span:nth-child(3){animation-delay:.3s}
@keyframes cbBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.chatbox__form{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--line);background:#fff}
.chatbox__input{flex:1;border:1px solid var(--line);border-radius:999px;padding:.65rem 1rem;font:inherit;outline:none}
.chatbox__input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(26,172,154,.15)}
.chatbox__send{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:var(--grad-teal);color:#fff;display:grid;place-items:center}
.chatbox__send svg{width:20px;height:20px}
.chatbox__foot{text-align:center;font-size:.72rem;color:var(--muted);padding:.4rem;background:#fff;border-top:1px solid var(--line)}
@media (max-width:480px){.chatbox{right:10px;left:10px;width:auto;bottom:84px;height:min(72vh,540px)}}
.fab-call{position:fixed;right:18px;bottom:90px;z-index:55;display:none;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--grad-teal);color:#fff;box-shadow:var(--sh-teal);animation:pulse 2.6s ease-in-out infinite}
.fab-call svg{width:26px;height:26px}
@keyframes pulse{0%,100%{box-shadow:var(--sh-teal),0 0 0 0 rgba(26,172,154,.4)}50%{box-shadow:var(--sh-teal),0 0 0 16px rgba(26,172,154,0)}}
/* Phone FAB retired on all screens — WhatsApp + back-to-top are enough (phone is in the top bar) */
/* Back-to-top sits just above the WhatsApp FAB, vertically aligned with it */
.to-top{position:fixed;right:24px;bottom:92px;z-index:54;width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--navy);display:grid;place-items:center;box-shadow:var(--sh-md);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--teal-700);transform:translateY(-2px)}
.to-top svg{width:22px;height:22px}

/* Hide back-to-top when live chat is active to avoid overlaps */
body.chat-open .to-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Compact responsive adjustments for floating FABs on mobile screens */
@media (max-width: 480px) {
  .chat-fab {
    width: 50px !important;
    height: 50px !important;
    right: 14px !important;
    bottom: 14px !important;
  }
  .chat-fab svg {
    width: 24px !important;
    height: 24px !important;
  }
  .to-top {
    width: 40px !important;
    height: 40px !important;
    right: 19px !important; /* centered horizontally above 50px FAB at right: 14px */
    bottom: 74px !important; /* 14px bottom + 50px height + 10px gap */
    border-radius: 12px !important;
  }
  .to-top svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-40px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal-l.in{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(40px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal-r.in{opacity:1;transform:none}
.reveal-s{opacity:0;transform:scale(.92);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal-s.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-l,.reveal-r,.reveal-s{opacity:1!important;transform:none!important;transition:none}
  .hero__aurora span,.hero__kolibri,.kolibri-band__art img,.regions__track,.ring,.fab-call,.gtext,.float-card,.hero__photo,.hero__flight path,.shape{animation:none!important}
  .hero__flight path{stroke-dashoffset:0}
}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal{max-width:820px;margin-inline:auto}
.legal h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:1.5rem}
.legal h2{font-size:1.4rem;margin:2rem 0 .6rem}
.legal p,.legal li{color:var(--ink)}
.legal a{color:var(--teal-700);font-weight:500}
.legal .muted{color:var(--muted)}
.backlink{display:inline-flex;align-items:center;gap:.5em;margin-bottom:1.6rem;font-weight:500}
.backlink svg{width:1.1em;height:1.1em}

/* ==========================================================================
   v4 — Header dropdown, elegant hero, trust bar, breadcrumb, page hero,
        FAQ page, prose. (Appended; overrides earlier where needed.)
   ========================================================================== */

/* ---- Header: phone pill + dropdown ---- */
.nav__phone{border:0;background:none;box-shadow:none}
.nav__phone--inline{padding:.4rem .5rem;gap:.6em}
.nav__phone--inline svg{width:1.45em;height:1.45em;color:var(--teal);flex-shrink:0}
.nav__phone--inline .ph{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.nav__phone--inline .ph small{font-size:.66rem;color:var(--muted);font-weight:500;letter-spacing:.03em}
.nav__phone--inline .ph b{font-size:1rem;color:var(--navy);font-weight:700;white-space:nowrap}
.nav__phone--inline:hover .ph b{color:var(--teal-700)}
/* The inline phone block is wide — show it only on roomy screens (it's also in the top bar) */
@media (max-width:1240px){.nav__phone--inline{display:none}}

.has-dropdown{position:relative}
.has-dropdown>a{display:inline-flex;align-items:center;gap:.3em}
.has-dropdown>a .caret{width:.7em;height:.7em;transition:transform .3s var(--ease)}
.has-dropdown:hover>a .caret,.has-dropdown:focus-within>a .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);
  width:min(640px,92vw);background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--sh-lg);padding:.8rem;opacity:0;visibility:hidden;transition:.28s var(--ease);z-index:80}
.dropdown::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;background:#fff;
  border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown__grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:.5rem}
.dropdown a{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem .9rem;border-radius:14px;transition:background .2s;height:100%;box-sizing:border-box}
.dropdown a:hover{background:var(--mist)}
.dropdown a::before{display:none}
.dropdown .di{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;background:var(--grad-teal)}
.dropdown a:nth-child(2) .di{background:var(--grad-navy)}
.dropdown a:nth-child(3) .di{background:var(--grad-green)}
.dropdown a:nth-child(4) .di{background:var(--grad-gold);color:var(--navy)}
.dropdown .di svg{width:20px;height:20px}
.dropdown a > span{flex:1;min-width:0;display:flex;flex-direction:column}
.dropdown b{display:block;color:var(--navy);font-weight:700;font-size:.96rem;line-height:1.2}
.dropdown span{color:var(--muted);font-size:.82rem;font-weight:300}
.dropdown a > span > span{display:block;margin-top:2px;line-height:1.3}
.dropdown__foot{margin-top:.5rem;padding:.7rem .9rem;border-radius:14px;background:var(--mist);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dropdown__foot span{color:var(--navy);font-weight:500;font-size:.9rem}
@media (max-width:1024px){.dropdown{display:none}}

/* ---- Elegant hero (v4) ---- */
.hero2{position:relative;overflow:clip;padding:clamp(34px,5vw,64px) 0 clamp(40px,6vw,72px)}
.hero2__bg{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(1100px 620px at 86% -8%,rgba(26,172,154,.13),transparent 60%),
  radial-gradient(840px 520px at -6% 18%,rgba(41,53,142,.08),transparent 60%),
  radial-gradient(700px 500px at 60% 118%,rgba(244,165,42,.09),transparent 60%)}
.hero2__bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(41,53,142,.06) 1.3px,transparent 1.3px);background-size:30px 30px;
  -webkit-mask-image:radial-gradient(80% 70% at 70% 30%,#000,transparent);mask-image:radial-gradient(80% 70% at 70% 30%,#000,transparent)}
.hero2__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero2 h1{font-size:clamp(2.2rem,5.4vw,3.7rem);line-height:1.05;margin-bottom:.5rem}
.hero2 h1 .u{position:relative;white-space:nowrap;color:var(--teal-700)}
.hero2 h1 .u::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.04em;height:.2em;border-radius:6px;z-index:-1;
  background:linear-gradient(90deg,var(--gold-2),var(--gold));opacity:.55;transform:scaleX(0);transform-origin:left;
  animation:drawline 1s var(--ease) .6s forwards}
@keyframes drawline{to{transform:scaleX(1)}}
.hero2__sub{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:500;color:var(--navy);margin-bottom:1rem}
.hero2__text{font-size:1.12rem;color:var(--muted);max-width:54ch;margin-bottom:1.7rem}
.hero2__cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero2__assure{display:flex;align-items:center;gap:1rem;margin-top:1.9rem;flex-wrap:wrap}
.hero2__stars{color:var(--gold);letter-spacing:1px}
.hero2__assure .avatars{display:flex}
.hero2__assure .avatars span{width:42px;height:42px;border-radius:50%;border:3px solid #fff;margin-left:-12px;background-size:cover;background-position:center;box-shadow:var(--sh-xs)}
.hero2__assure .avatars span:first-child{margin-left:0}
.hero2__assure .avatars .more{display:grid;place-items:center;background:var(--grad-navy);color:#fff;font-size:.76rem;font-weight:700}
.hero2__assure .at b{display:block;color:var(--navy);font-size:.98rem}
.hero2__assure .at span{color:var(--muted);font-size:.86rem}

.hero2__visual{position:relative}
.hero2__frame{position:relative;border-radius:30px 30px 30px 90px;overflow:hidden;box-shadow:var(--sh-lg);
  border:7px solid #fff;aspect-ratio:4/4.4}
.hero2__frame img{width:100%;height:100%;object-fit:cover;transform-origin:60% 40%;animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.hero2__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(41,53,142,.16))}
.hero2__logo{position:absolute;top:-26px;right:-14px;width:104px;z-index:4;filter:drop-shadow(0 14px 22px rgba(27,36,64,.22));animation:floaty 5.5s ease-in-out infinite}
.hero2__rating{position:absolute;left:-22px;bottom:54px;z-index:5;background:rgba(255,255,255,.9);backdrop-filter:var(--glass);
  border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:.85rem 1.05rem;box-shadow:var(--sh-md);animation:floaty 6s ease-in-out infinite;animation-delay:-2s}
.hero2__rating .s{color:var(--gold);letter-spacing:1px;font-size:.95rem}
.hero2__rating b{display:block;color:var(--navy);font-size:.98rem;line-height:1.2}
.hero2__rating span{font-size:.8rem;color:var(--muted)}
.hero2__guarantee{position:absolute;right:-14px;top:64px;z-index:5;display:inline-flex;align-items:center;gap:.5em;
  background:var(--grad-gold);color:var(--navy);font-weight:700;font-size:.84rem;padding:.55rem .9rem;border-radius:999px;
  box-shadow:var(--sh-gold);animation:floaty 6.5s ease-in-out infinite;animation-delay:-1s}
.hero2__guarantee svg{width:1.1em;height:1.1em}
@media (max-width:880px){
  .hero2__grid{grid-template-columns:1fr;text-align:center}
  .hero2__cta,.hero2__assure{justify-content:center}
  .hero2__text{margin-inline:auto}
  .hero2__visual{max-width:440px;margin:1rem auto 0}
  .hero2__logo{width:84px}
}
/* Phone: tighten the hero so the call-to-action is reachable without much scrolling */
@media (max-width:600px){
  .hero2{padding-top:16px}
  .hero2 h1{font-size:1.95rem;line-height:1.1;margin-bottom:.4rem}
  .hero2__sub{font-size:1.05rem;margin-bottom:.6rem}
  .hero2__text{font-size:1rem;line-height:1.55;margin-bottom:1rem}
  .hero2__cta{gap:.65rem}
  .hero2__assure{margin-top:1.1rem;gap:.7rem}
  .hero2__visual{max-width:360px;margin-top:.6rem}
}

/* ---- Trust bar (logo-inspired) ---- */
.trustbar{margin-top:clamp(2.4rem,4vw,3.4rem)}
.trustbar__inner{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  box-shadow:0 24px 60px -34px rgba(27,36,64,.34)}
.trustbar__inner::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:3;
  background:linear-gradient(90deg,var(--teal),var(--green) 45%,var(--gold))}
.trustbar__item{position:relative;background:#fff;display:flex;gap:1rem;align-items:center;
  padding:1.5rem 1.4rem;transition:background .3s var(--ease)}
.trustbar__item:not(:last-child)::after{content:"";position:absolute;right:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 30%,var(--line) 70%,transparent)}
.trustbar__item:hover{background:linear-gradient(180deg,#fff,var(--mist))}
.trustbar__item .ic{flex-shrink:0;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  color:#fff;background:var(--grad-teal);box-shadow:var(--sh-teal);transition:transform .3s var(--ease)}
.trustbar__item:nth-child(2) .ic{background:var(--grad-gold);color:var(--navy);box-shadow:var(--sh-gold)}
.trustbar__item:nth-child(3) .ic{background:var(--grad-green);color:#fff;box-shadow:0 18px 40px -20px rgba(22,163,90,.55)}
.trustbar__item:nth-child(4) .ic{background:var(--grad-navy);color:#fff;box-shadow:0 18px 40px -20px rgba(41,53,142,.55)}
.trustbar__item:hover .ic{transform:scale(1.1) rotate(-5deg)}
.trustbar__item .ic svg{width:25px;height:25px}
.trustbar__item b{display:block;color:var(--navy);font-size:1.04rem;line-height:1.15;font-weight:700}
.trustbar__item span{color:var(--muted);font-size:.84rem}
@media (max-width:860px){.trustbar__inner{grid-template-columns:1fr 1fr}.trustbar__item:nth-child(2)::after{display:none}}
@media (max-width:480px){.trustbar__inner{grid-template-columns:1fr}.trustbar__item::after{display:none!important}}

/* ---- Breadcrumb + page hero (subpages) ---- */
.page-hero{position:relative;overflow:hidden;padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,56px);
  background:
   radial-gradient(800px 420px at 88% -20%,rgba(26,172,154,.14),transparent 60%),
   radial-gradient(600px 380px at -5% 120%,rgba(244,165,42,.10),transparent 60%),var(--mist)}
.page-hero__logo{position:absolute;right:3%;top:50%;transform:translateY(-50%);width:clamp(120px,16vw,210px);opacity:.16;animation:floaty 7s ease-in-out infinite}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.9rem;color:var(--muted);margin-bottom:1rem}
.crumbs a{color:var(--teal-700);font-weight:500}
.crumbs svg{width:1em;height:1em;opacity:.6}
.crumbs span[aria-current]{color:var(--navy);font-weight:500}
.page-hero h1{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:.6rem;max-width:18ch}
.page-hero .lead{max-width:60ch}
.page-hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

/* ---- Prose (content pages) ---- */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:2.2rem 0 .7rem}
.prose h3{font-size:1.3rem;margin:1.6rem 0 .5rem}
.prose p,.prose li{font-size:1.08rem;color:var(--ink)}
.prose p{margin:0 0 1.1rem}
.prose ul{margin:0 0 1.3rem;padding:0;list-style:none;display:grid;gap:.7rem}
.prose ul li{display:flex;gap:.7rem;align-items:flex-start}
.prose ul li::before{content:"";flex-shrink:0;width:24px;height:24px;margin-top:2px;border-radius:50%;
  background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230C7064' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}
.callout{background:var(--mist);border:1px solid rgba(26,172,154,.2);border-left:4px solid var(--teal);
  border-radius:16px;padding:1.2rem 1.4rem;margin:1.6rem 0}
.callout b{color:var(--navy)}
.content-grid{display:grid;grid-template-columns:1fr 320px;gap:clamp(2rem,4vw,3.4rem);align-items:start}
.sidecard{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-md);padding:1.6rem;display:grid;gap:.9rem}
.sidecard h3{font-size:1.2rem;margin:0}
.sidecard p{color:var(--muted);font-size:.96rem;margin:0}
.sidecard .row{display:flex;gap:.6rem;align-items:center;color:var(--navy);font-weight:500}
.sidecard .row svg{width:1.1em;height:1.1em;color:var(--teal)}
@media (max-width:900px){.content-grid{grid-template-columns:1fr}.sidecard{position:static}}

/* ==========================================================================
   FAQ Full Page — Premium two-column masterpiece design
   ========================================================================== */

/* Page wrapper */
.faq-page {
  background:
    radial-gradient(circle at 0% 0%, rgba(26,172,154,0.06) 0%, transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(244,165,42,0.05) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(41,53,142,0.02) 0%, transparent 60%),
    var(--cream);
  padding: clamp(3rem, 6vw, 6rem) 0;
  min-height: 60vh;
  position: relative;
}
.faq-page__wrap {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* ── Sidebar: Glassmorphism Floating Panel ── */
.faq-sidebar {
  position: sticky;
  top: calc(var(--header-h, 80px) + 24px);
  z-index: 10;
}
.faq-sidebar__inner {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 
    0 10px 30px -10px rgba(27, 36, 64, 0.04),
    0 1px 3px rgba(27, 36, 64, 0.02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Search input with glowing ring */
.faq-sb-search {
  position: relative;
}
.faq-sb-search svg {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1em;
  height: 1.1em;
  color: var(--muted-2);
  pointer-events: none;
  transition: color 0.25s ease;
}
.faq-sb-search input {
  width: 100%;
  font-family: inherit;
  font-size: .95rem;
  padding: .9rem 1rem .9rem 2.85rem;
  border: 1.5px solid rgba(41, 53, 142, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: var(--ink);
}
.faq-sb-search input::placeholder {
  color: var(--muted-2);
}
.faq-sb-search input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 
    0 0 0 4px rgba(26, 172, 154, 0.12), 
    0 8px 20px -8px rgba(27, 36, 64, 0.08);
  background: #fff;
}
.faq-sb-search input:focus ~ svg {
  color: var(--teal);
}

/* Sidebar Topics Navigation */
.faq-sb-nav__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 .6rem 0.2rem;
}
.faq-sb-nav {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

/* Sleek Category buttons with sliding hover */
.faq-sb-btn {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}
.faq-sb-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 4px;
  border-radius: 4px;
  background: var(--teal);
  transform: scaleY(0);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.faq-sb-btn:hover {
  background: rgba(26, 172, 154, 0.05);
  color: var(--teal-700);
  transform: translateX(4px);
}
.faq-sb-btn.active {
  background: #ffffff;
  border-color: rgba(26, 172, 154, 0.12);
  color: var(--teal-700);
  font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(26, 172, 154, 0.15);
  transform: translateX(6px);
}
.faq-sb-btn.active::before {
  transform: scaleY(1);
}

.faq-sb-btn__ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.faq-sb-btn:hover .faq-sb-btn__ic {
  transform: scale(1.08);
}
.faq-sb-btn__ic svg {
  width: 17px;
  height: 17px;
}

/* Icon colors */
.faq-sb-btn__ic--all { background: var(--mist); color: var(--navy); }
.faq-sb-btn__ic--0 { background: rgba(26, 172, 154, 0.12); color: var(--teal-700); }
.faq-sb-btn__ic--1 { background: rgba(244, 165, 42, 0.12); color: var(--gold-700); }
.faq-sb-btn__ic--2 { background: rgba(41, 53, 142, 0.1); color: var(--navy); }
.faq-sb-btn__ic--3 { background: rgba(22, 163, 90, 0.1); color: var(--green-600); }

.faq-sb-btn__label {
  flex: 1;
  line-height: 1.2;
}
.faq-sb-btn__count {
  flex-shrink: 0;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(41, 53, 142, 0.05);
  color: var(--muted-2);
  font-size: .75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: all 0.25s ease;
}
.faq-sb-btn.active .faq-sb-btn__count {
  background: var(--teal);
  color: #fff;
}

/* Beautiful Contact nudge card in sidebar */
.faq-sb-cta {
  background: linear-gradient(135deg, var(--navy) 0%, #171f54 100%);
  border-radius: 20px;
  padding: 1.5rem;
  color: #dfe3ff;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px -8px rgba(14, 20, 60, 0.22);
  transition: all 0.3s ease;
}
.faq-sb-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -8px rgba(14, 20, 60, 0.28);
}
.faq-sb-cta::before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 172, 154, 0.3), transparent 70%);
  top: -40px;
  right: -40px;
  filter: blur(15px);
  pointer-events: none;
}
.faq-sb-cta__ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(26, 172, 154, 0.2);
  color: #86e4d5;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.faq-sb-cta__ic svg {
  width: 20px;
  height: 20px;
}
.faq-sb-cta p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
}
.faq-sb-cta strong {
  color: #fff;
  display: block;
  margin-bottom: .2rem;
  font-size: 1.05rem;
}
.faq-sb-cta span {
  color: #a4aff2;
  font-size: .85rem;
}
.faq-sb-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 12px rgba(26, 172, 154, 0.25);
  transition: all 0.3s ease;
  position: relative;
}
.faq-sb-cta__btn:hover {
  background: var(--teal-700);
  box-shadow: 0 6px 16px rgba(26, 172, 154, 0.35);
  transform: translateY(-1px);
}

/* ── Main Area Content ── */
.faq-main {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-width: 0;
  max-width: 100%;
}

/* Intro banner block */
.faq-intro {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2.2rem;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  box-shadow: 0 10px 30px -15px rgba(27, 36, 64, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.faq-intro__text {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 280px;
}
.faq-intro__h {
  font-size: clamp(1.65rem, 3.5vw, 2.2rem);
  color: var(--navy);
  margin: .4rem 0 .6rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.faq-intro__sub {
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0;
  max-width: 54ch;
  line-height: 1.6;
}
.faq-intro__stats {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 1.2rem;
  flex-shrink: 0;
}
.faq-intro__logo {
  position: absolute;
  right: -25px;
  bottom: -35px;
  width: clamp(120px, 18vw, 180px);
  opacity: 0.05;
  pointer-events: none;
  transform: rotate(-15deg);
  z-index: 1;
}
.faq-intro__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.faq-intro__stat {
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(41, 53, 142, 0.05);
  border-radius: 18px;
  padding: 0.9rem 1.5rem;
  box-shadow: 0 8px 20px -8px rgba(27, 36, 64, 0.04);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.faq-intro__stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(27, 36, 64, 0.08);
}
.faq-intro__stat b {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 2px;
}
.faq-intro__stat span {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 600;
}

/* Mobile Filters with glowing active chips */
.faq-mobile-filters {
  display: none;
}
.faq-mobile-search {
  position: relative;
}
.faq-mobile-search svg {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1em;
  height: 1.1em;
  color: var(--muted-2);
}
.faq-mobile-search input {
  width: 100%;
  font-family: inherit;
  font-size: .95rem;
  padding: .85rem 1rem .85rem 2.8rem;
  border: 1.5px solid rgba(41, 53, 142, 0.08);
  border-radius: 14px;
  background: #fff;
  transition: all 0.25s ease;
}
.faq-mobile-search input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(26, 172, 154, 0.12);
}
.faq-mobile-chips-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.faq-mobile-chips-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9));
  pointer-events: none;
  z-index: 2;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}
.faq-mobile-chips {
  display: flex;
  gap: .5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0.3rem 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  max-width: 100%;
}
.faq-mobile-chips::-webkit-scrollbar {
  display: none;
}
.faq-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1.5px solid rgba(41, 53, 142, 0.06);
  background: #fff;
  color: var(--navy);
  font-family: inherit;
  font-weight: 600;
  font-size: .85rem;
  padding: .4rem .8rem .4rem .4rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.faq-chip:hover {
  border-color: var(--teal);
  color: var(--teal-700);
}
.faq-chip.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 4px 10px rgba(14, 20, 60, 0.15);
}
.faq-chip__ic {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mist);
  color: var(--navy);
  transition: all 0.3s ease;
}
.faq-chip__ic svg {
  width: 12px;
  height: 12px;
}
.faq-chip__ic--0 { background: rgba(26, 172, 154, 0.1); color: var(--teal-700); }
.faq-chip__ic--1 { background: rgba(244, 165, 42, 0.12); color: var(--gold-700); }
.faq-chip__ic--2 { background: rgba(41, 53, 142, 0.1); color: var(--navy); }
.faq-chip__ic--3 { background: rgba(22, 163, 90, 0.1); color: var(--green-600); }

.faq-chip.active .faq-chip__ic {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}
.faq-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(41, 53, 142, 0.05);
  color: var(--muted-2);
  font-size: .7rem;
  font-weight: 700;
  margin-left: 2px;
  transition: all 0.25s ease;
}
.faq-chip.active .faq-chip__count {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

/* Empty state */
.faq-empty {
  display: none;
  text-align: center;
  padding: 3.5rem 2rem;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(41, 53, 142, 0.06);
  color: var(--muted);
  box-shadow: var(--sh-sm);
}
.faq-empty a {
  color: var(--teal-700);
  font-weight: 700;
  margin-left: .4em;
}
.faq-empty.show {
  display: block;
}
.qa[hidden] {
  display: none;
}

/* ── Category groups with serif numbering ── */
.faq-group {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.faq-group__head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 2px solid rgba(41, 53, 142, 0.05);
  position: relative;
}
.faq-group__head::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 54px;
  height: 2px;
  background: var(--grad-teal);
  border-radius: 2px;
}
.faq-group__num {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--line-2);
  letter-spacing: -.03em;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--line-2) 0%, rgba(26, 172, 154, 0.25) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.faq-group__ic {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.faq-group__ic svg {
  width: 20px;
  height: 20px;
}
.faq-group__ic--0 { background: rgba(26, 172, 154, 0.1); color: var(--teal-700); }
.faq-group__ic--1 { background: rgba(244, 165, 42, 0.12); color: var(--gold-700); }
.faq-group__ic--2 { background: rgba(41, 53, 142, 0.1); color: var(--navy); }
.faq-group__ic--3 { background: rgba(22, 163, 90, 0.1); color: var(--green-600); }

.faq-group__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.faq-group__sub {
  font-size: .8rem;
  color: var(--muted-2);
  font-weight: 600;
}

/* ── FAQ Accordion cards with morphing plus-minus toggles ── */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.faq-accordion .qa {
  border-radius: 20px;
  border: 1.5px solid rgba(41, 53, 142, 0.05);
  background: #ffffff;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  animation: faqSlideIn .4s var(--ease-out) both;
  animation-delay: calc(var(--fi,0) * 35ms);
}
@keyframes faqSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq-accordion .qa:hover {
  border-color: rgba(26, 172, 154, 0.15);
  box-shadow: 0 10px 24px -10px rgba(27, 36, 64, 0.06);
  transform: translateY(-1px);
}
.faq-accordion .qa.open {
  box-shadow: 
    0 20px 40px -15px rgba(26, 172, 154, 0.14), 
    0 4px 12px -8px rgba(27, 36, 64, 0.03);
  border-color: rgba(26, 172, 154, 0.3);
  transform: translateX(4px);
}

.faq-accordion .qa__q {
  padding: 1.25rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.25s ease;
  gap: 1rem;
}
.faq-accordion .qa__q-text {
  flex: 1;
  line-height: 1.4;
}
.faq-accordion .qa:hover .qa__q {
  color: var(--teal-700);
}

/* Morphing toggle icon */
.qa__toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--teal-700);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.faq-accordion .qa:hover .qa__toggle {
  background: var(--teal);
  color: #fff;
  transform: scale(1.05);
}
.faq-accordion .qa.open .qa__toggle {
  transform: rotate(135deg);
  background: var(--navy);
  color: #fff;
}
.qa__toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Answer content card with editorial left accent line */
.faq-accordion .qa__a-inner {
  padding: 0.2rem 1.6rem 1.6rem;
  border-left: 3px solid var(--teal);
  margin-left: 1.5rem;
  margin-bottom: 0.2rem;
}
.faq-accordion .qa__a-inner p {
  margin: 0;
  line-height: 1.6;
  color: var(--ink);
  font-size: 0.98rem;
}

/* Premium Link inline CTA */
.qa__a-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1.2rem;
  color: var(--teal-700);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
  letter-spacing: -0.01em;
}
.qa__a-cta::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.qa__a-cta:hover {
  color: var(--teal);
}
.qa__a-cta:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── Legacy faq-tools strip ── */
.faq-tools { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.faq-search { position: relative; flex: 1; min-width: 260px; }
.faq-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.2em; height: 1.2em; color: var(--muted); }
.faq-search input { width: 100%; font-family: inherit; font-size: 1rem; padding: .9rem 1rem .9rem 2.8rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; transition: .2s; }
.faq-search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(26,172,154,0.14); }
.faq-filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.faq-cat { margin-top: 2rem; }
.faq-cat__title { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; color: var(--navy); font-weight: 700; margin-bottom: 1rem; }
.faq-cat__title .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--mist); color: var(--teal-700); display: grid; place-items: center; }
.faq-cat__title .ic svg { width: 18px; height: 18px; }

/* ── Responsive adjustments ── */
@media (max-width: 960px) {
  .faq-page__wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-sidebar {
    display: none;
  }
  .faq-mobile-filters {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 1rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px -10px rgba(27, 36, 64, 0.05);
  }
  .faq-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.8rem;
  }
  .faq-intro__stats {
    align-self: stretch;
    justify-content: flex-start;
  }
}
@media (max-width: 560px) {
  .faq-intro__h {
    font-size: 1.5rem;
  }
  .faq-accordion .qa__q {
    font-size: .98rem;
    padding: 1.1rem 1.2rem;
  }
  .faq-accordion .qa.open {
    transform: none; /* Disable horizontal shift to prevent clipping into gutter */
  }
  .faq-accordion .qa__a-inner {
    padding: .1rem 1.2rem 1.4rem;
    margin-left: 1.2rem;
  }
  .faq-intro__stat {
    padding: .75rem 1.1rem;
    flex: 1;
  }
  .faq-intro__stat b {
    font-size: 1.7rem;
  }
}

/* ---- Misc helpers ---- */
.muted-link{color:var(--muted)}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.tag{display:inline-flex;align-items:center;gap:.4em;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem .85rem;font-size:.86rem;color:var(--navy);font-weight:500;box-shadow:var(--sh-xs)}
.tag svg{width:1em;height:1em;color:var(--teal)}
.section-cta{display:flex;justify-content:center;margin-top:2.4rem}

/* ==========================================================================
   Page-hero Kolibri banner motif (elegant, transparent, animated background)
   ========================================================================== */
.page-hero{
  background:
    radial-gradient(720px 380px at 10% 120%,rgba(244,165,42,.08),transparent 60%),
    linear-gradient(180deg,#ffffff 0%,var(--mist) 100%);
}
.page-hero::before{               /* the cleaned hummingbird artwork */
  content:"";position:absolute;top:0;right:0;bottom:0;
  width:min(72%,920px);z-index:0;pointer-events:none;
  background:url("../assets/img/kolibri-banner.png") right center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 42%,#000 75%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 42%,#000 75%);
  opacity:.2;
  animation:kolibriFloat 24s ease-in-out infinite;
  will-change:transform,opacity;
}
.page-hero::after{                /* soft light gradient that drifts over it = elegant sheen */
  content:"";position:absolute;top:0;right:0;bottom:0;width:min(72%,920px);z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 46%,rgba(255,255,255,.5) 52%,transparent 58%);
  background-size:280% 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 60%);mask-image:linear-gradient(90deg,transparent 0%,#000 60%);
  opacity:.5;animation:kolibriSheen 9s ease-in-out infinite;
}
.page-hero > .container{position:relative;z-index:3}
.page-hero__logo{display:none}    /* replaced by the banner motif */
@keyframes kolibriFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1.02);opacity:.17}
  50%{transform:translate3d(-1.4%,-2%,0) scale(1.06);opacity:.24}
}
@keyframes kolibriSheen{
  0%,72%,100%{background-position:130% 0}
  86%{background-position:-30% 0}
}
@media (prefers-reduced-motion:reduce){
  .page-hero::before{animation:none;opacity:.18}
  .page-hero::after{display:none}
}

/* ---- Cinematic photo page-heroes (subpages) ---- */
.page-hero--photo{background-size:cover;background-position:center;color:#fff}
.page-hero--photo::before,.page-hero--photo::after{display:none}
.page-hero--photo .crumbs{color:rgba(255,255,255,.78)}
.page-hero--photo .crumbs a{color:#9af7c0}
.page-hero--photo .crumbs svg{opacity:.7}
.page-hero--photo .crumbs span[aria-current]{color:#fff}
.page-hero--photo .eyebrow{color:#9af7c0}
.page-hero--photo h1{color:#fff;text-shadow:0 2px 18px rgba(8,12,40,.35)}
.page-hero--photo .lead{color:rgba(255,255,255,.93)}
@media (min-width:1100px){.page-hero--photo{background-attachment:fixed}}
.page-hero--photo.ph-services{background-image:linear-gradient(100deg,rgba(11,16,46,.92) 0%,rgba(13,19,54,.6) 50%,rgba(20,27,72,.32) 100%),url("../assets/img/001bg.jpg");background-position:center 66%}
/* how-page hero stays the standard light hero (no photo) */
/* Artistic glowing wave that separates the how-hero from the process steps */
/* So-funktioniert's process steps: dark navy + lifestyle photo (independent of the hero) */
.section--navy.sp-care{background-image:linear-gradient(180deg,rgba(16,23,66,.92) 0%,rgba(16,23,66,.86) 32%,rgba(16,23,66,.94) 100%),url("../assets/img/004bg.jpg");background-position:center,center 38%;background-size:cover,cover}
.page-hero--photo.ph-about{background-image:linear-gradient(100deg,rgba(11,16,46,.92) 0%,rgba(13,19,54,.6) 50%,rgba(20,27,72,.32) 100%),url("../assets/img/003bg.jpg");background-position:center 64%}
.page-hero--photo.ph-faq{background-image:linear-gradient(100deg,rgba(11,16,46,.92) 0%,rgba(13,19,54,.64) 50%,rgba(20,27,72,.4) 100%),url("../assets/img/002bg.jpg");background-position:center 52%}
.page-hero--photo.ph-contact{background-image:linear-gradient(100deg,rgba(12,18,52,.88) 0%,rgba(13,19,54,.66) 50%,rgba(20,27,72,.42) 100%),url("../assets/img/004bg.jpg");background-position:center 42%}
.page-hero--photo.ph-request{background-image:linear-gradient(100deg,rgba(12,18,52,.9) 0%,rgba(13,19,54,.68) 50%,rgba(20,27,72,.46) 100%),url("../assets/img/004bg.jpg");background-position:center 42%}

/* ==========================================================================
   Enhanced "So funktioniert's" navy process section
   ========================================================================== */
.section--navy{isolation:isolate}
.section--navy::before{          /* drifting aurora glow */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(640px 340px at 14% 22%,rgba(26,172,154,.26),transparent 62%),
    radial-gradient(560px 320px at 88% 82%,rgba(244,165,42,.13),transparent 62%);
  animation:navyAurora 18s ease-in-out infinite alternate;
}
.section--navy::after{           /* subtle twinkling star-dust */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 18% 28%,rgba(134,228,213,.9),transparent),
    radial-gradient(2px 2px at 72% 18%,rgba(255,210,125,.9),transparent),
    radial-gradient(1.5px 1.5px at 88% 56%,rgba(255,255,255,.8),transparent),
    radial-gradient(2px 2px at 36% 74%,rgba(134,228,213,.7),transparent),
    radial-gradient(1.5px 1.5px at 58% 46%,rgba(255,255,255,.6),transparent),
    radial-gradient(2px 2px at 9% 62%,rgba(255,210,125,.7),transparent),
    radial-gradient(1.5px 1.5px at 47% 12%,rgba(255,255,255,.6),transparent);
  animation:twinkle 6s ease-in-out infinite;
}
@keyframes navyAurora{to{transform:translate3d(0,-16px,0) scale(1.05)}}
@keyframes twinkle{0%,100%{opacity:.45}50%{opacity:.95}}
.section--navy .pattern-dots{animation:dotsDrift 60s linear infinite}
@keyframes dotsDrift{to{background-position:120px 90px}}

/* Cards */
.process .step{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 24px 50px -34px rgba(0,0,0,.6);
  overflow:hidden;z-index:1;
}
.process .step::before{        /* top edge sheen */
  content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
}
.process .step:hover{
  transform:translateY(-8px);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border-color:rgba(134,228,213,.45);
  box-shadow:0 36px 64px -30px rgba(0,0,0,.6),0 0 0 1px rgba(134,228,213,.22),0 0 40px -10px rgba(26,172,154,.4);
}

/* Glowing, pulsing number badge */
.process .step__n{position:relative;z-index:2;
  box-shadow:0 14px 30px -10px rgba(216,134,19,.75),0 0 0 7px rgba(244,165,42,.12);
}
.process .step__n::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(244,165,42,.5);animation:ringPulse 2.8s ease-in-out infinite}
@keyframes ringPulse{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.45);opacity:0}}

/* Flowing connector between steps (desktop) */
.process .step:not(:last-child)::after{
  top:61px;right:-0.85rem;width:1.7rem;height:2px;background:none;
  background-image:repeating-linear-gradient(90deg,#86e4d5 0 6px,transparent 6px 12px);
  background-size:24px 100%;background-repeat:repeat-x;
  animation:dashFlow 1.4s linear infinite;opacity:.85;
}
@keyframes dashFlow{to{background-position:24px 0}}

@media (prefers-reduced-motion:reduce){
  .section--navy::before,.section--navy::after,.section--navy .pattern-dots,
  .process .step__n::after,.process .step:not(:last-child)::after{animation:none}
}

/* Step type-icon (consultation / match / arrival / care) */
.process .step{padding-top:2.4rem}
.step__ic{position:absolute;top:1.4rem;right:1.4rem;width:30px;height:30px;z-index:2;
  color:rgba(134,228,213,.6);transition:transform .35s var(--ease),color .35s}
.step__ic svg{width:100%;height:100%}
.process .step:hover .step__ic{color:rgba(134,228,213,.95);transform:scale(1.12) rotate(-4deg)}

/* Continuous connector that fills as you scroll (replaces dashes) */
.process .step:not(:last-child)::after{display:none}
.process__line{position:absolute;top:calc(2.4rem + 26px);left:12%;right:12%;height:3px;border-radius:3px;
  background:rgba(255,255,255,.14);z-index:0;overflow:hidden}
.process__line-fill{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--teal),#86e4d5 45%,var(--gold));
  box-shadow:0 0 14px rgba(134,228,213,.65);transition:width .12s linear}
@media (max-width:900px){.process__line{display:none}}

/* Language switcher */
.langswitch{display:inline-flex;align-items:center;gap:.1rem;border:1px solid var(--line);
  border-radius:999px;padding:2px;font-size:.78rem;font-weight:700}
.langswitch a{display:inline-flex;align-items:center;padding:.16rem .55rem;border-radius:999px;color:var(--muted);line-height:1}
.langswitch a.is-on{background:var(--teal);color:#fff}
.langswitch a:hover{color:var(--teal-700)}
.langswitch a.is-on:hover{color:#fff}
.topbar__set--meta .langswitch{margin-left:.4rem}

/* ==========================================================================
   Hero kolibri scene — the real logo bird hovering with flapping wings
   ========================================================================== */
.kolibri-scene{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.06}
.kolibri-scene .ks-bird{position:absolute;top:50%;left:50%;transform:translate(-54%,-50%);
  width:118%;max-width:none;height:auto;
  -webkit-mask-image:radial-gradient(64% 78% at 50% 50%,#000 32%,transparent 88%);
          mask-image:radial-gradient(64% 78% at 50% 50%,#000 32%,transparent 88%)}
.kolibri-scene .ks-wing{display:none}
@media (max-width:880px){.kolibri-scene{opacity:.05}.kolibri-scene .ks-bird{width:150%}}

/* ==========================================================================
   Site preloader — logo loading animation (initial load + page switches)
   ========================================================================== */
#site-preloader{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;
  height:100dvh;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cream);
  transition:opacity .5s var(--ease),visibility .5s;
}
#site-preloader.loaded{opacity:0;visibility:hidden;pointer-events:none}
#site-preloader .pl-wrap{
  position:relative;
  width:170px;height:170px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
#site-preloader .pl-logo{
  position:relative;
  z-index:2;
  width:clamp(72px,22vw,108px);
  height:auto;
  display:block;
  animation:plFloat 1.9s ease-in-out infinite;
  filter:drop-shadow(0 10px 18px rgba(27,36,64,.16));
}
/* Rings: absolutely centered WITHOUT using transform (so spin animation works cleanly) */
#site-preloader .pl-ring{
  position:absolute;
  border-radius:50%;
  top:50%;left:50%;
  margin-top:-79px; /* half of 158px */
  margin-left:-79px;
}
#site-preloader .pl-ring--1{width:158px;height:158px;border:2px dashed rgba(26,172,154,.45);animation:plSpin 3.6s linear infinite}
#site-preloader .pl-ring--2{width:120px;height:120px;border:2px dashed rgba(244,165,42,.5);margin-top:-60px;margin-left:-60px;animation:plSpin 5s linear infinite reverse}
#site-preloader .pl-bar{
  position:absolute;
  bottom:-34px;
  left:50%;
  margin-left:-60px; /* half of 120px */
  width:120px;height:3px;border-radius:3px;
  background:rgba(41,53,142,.12);overflow:hidden
}
#site-preloader .pl-bar::after{content:"";position:absolute;inset:0;width:40%;border-radius:3px;
  background:linear-gradient(90deg,var(--teal),var(--gold));animation:plBar 1.3s ease-in-out infinite}
@keyframes plFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
/* Spin: rotation only — no translate needed since centering is done via margin */
@keyframes plSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes plBar{0%{left:-40%}100%{left:100%}}
@media (max-width:480px){
  #site-preloader .pl-ring--1{width:120px;height:120px;margin-top:-60px;margin-left:-60px}
  #site-preloader .pl-ring--2{width:88px;height:88px;margin-top:-44px;margin-left:-44px}
  #site-preloader .pl-logo{width:clamp(60px,18vw,80px)}
}
@media (prefers-reduced-motion:reduce){#site-preloader .pl-logo,#site-preloader .pl-ring,#site-preloader .pl-bar::after{animation:none}}

/* ==========================================================================
   A Day in the Life Timeline Section
   ========================================================================== */
.sp-time {
  padding: 6rem 0 !important;
  background: radial-gradient(120% 80% at 50% -10%, #ffffff 35%, #f4f6fb 100%) !important; /* soft mesh depth instead of flat gray */
  border-top: 1px solid rgba(41, 53, 142, 0.04);
}
.time-controls {
  display: flex;
  justify-content: center;
  margin-top: 4rem; /* generous spacing below title */
  margin-bottom: 3.5rem;
  width: 100%;
}
.time-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 820px;
  height: 8px; /* thicker metallic slider rail */
  background: rgba(41, 53, 142, 0.06);
  border-radius: 8px;
  margin: 0 auto;
  padding: 0 10px;
  box-shadow: inset 0 2px 4px rgba(27, 36, 64, 0.08); /* realistic inset groove shadow */
}
.time-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%); /* fluid gradient progress track */
  border-radius: 8px;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  width: 0%;
  z-index: 1;
}
.time-dot {
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  outline: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.time-dot__node {
  width: 20px; /* larger visual nodes */
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(41, 53, 142, 0.15); /* thick border ring */
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  box-shadow: 0 2px 6px rgba(27, 36, 64, 0.05); /* floating node shadow */
}
.time-dot__bird {
  display: block;
  width: 36px; /* larger hovering hummingbird */
  height: 36px;
  background-image: url('/assets/img/kolibri-bird.png?v=3');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3) rotate(-15deg);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  z-index: 10;
}
.time-dot:hover .time-dot__bird {
  opacity: 0.45;
  transform: translate(-50%, -50%) scale(0.85) rotate(-5deg);
}
.time-dot.active .time-dot__bird {
  opacity: 1;
  animation: hoverFlight 2.2s ease-in-out infinite alternate; /* realistic bobbing flight animation */
}
.time-dot:hover .time-dot__node {
  border-color: var(--teal);
  transform: scale(1.15);
  box-shadow: 0 4px 10px rgba(26, 172, 154, 0.15);
}
.time-dot.active .time-dot__node {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 14px rgba(26, 172, 154, 0.45);
  transform: scale(0.55); /* shrinks down neatly to act as the bird's anchor nest */
}
.time-dot__val {
  position: absolute;
  bottom: 28px;
  white-space: nowrap;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.88rem;
  opacity: 0.65;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  letter-spacing: 0.5px;
}
.time-dot.active .time-dot__val {
  opacity: 1;
  color: var(--teal-700);
  transform: translateY(-3px);
}

/* Realistic Floating Hummingbird Flight Animation */
@keyframes hoverFlight {
  0% {
    transform: translate(-50%, -50%) scale(1.3) translateY(-4px) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3) translateY(-8px) rotate(3deg); /* moves slightly up and tilts */
  }
  100% {
    transform: translate(-50%, -50%) scale(1.3) translateY(-4px) rotate(0deg);
  }
}
.timeline-slides {
  position: relative;
  min-height: 400px;
}
.timeline-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97) translateY(12px); /* modern subtle scale & slide-up entry */
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              visibility 0.5s;
  z-index: 1;
}
.timeline-slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  z-index: 2;
}
.timeline-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2rem;
  align-items: stretch;
}
.timeline-card {
  background: #fff;
  border-radius: 20px; /* softer, more modern corners */
  box-shadow: 0 10px 35px -12px rgba(27,36,64,0.06), 0 2px 8px rgba(27,36,64,0.02);
  overflow: hidden;
  border: 1px solid rgba(41, 53, 142, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.timeline-card:hover {
  transform: translateY(-4px); /* subtle premium elevation lift */
  box-shadow: 0 20px 40px -12px rgba(27,36,64,0.12), 0 4px 16px rgba(27,36,64,0.04);
}
.timeline-card__bg {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.timeline-card__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(27, 36, 64, 0.35) 100%); /* premium darkening overlay vignette */
  pointer-events: none;
}
.time-badge {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-size: 0.88rem;
  box-shadow: 0 4px 12px rgba(26, 172, 154, 0.3);
  z-index: 2; /* keep above overlay vignette */
}
.timeline-card__body {
  padding: 1.8rem;
  flex-grow: 1;
}
.timeline-card__body h3 {
  color: var(--navy);
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
  font-weight: 700;
}
.timeline-card__body p {
  color: var(--muted);
  font-size: 0.96rem;
  margin: 0;
  line-height: 1.6;
}
.timeline-perspectives {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  justify-content: center;
}
.perspective-card {
  display: flex;
  gap: 1.3rem;
  padding: 1.6rem;
  border-radius: 18px;
  border: 1px solid rgba(41, 53, 142, 0.04);
  box-shadow: 0 4px 12px rgba(27, 36, 64, 0.02);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.perspective-card:hover {
  transform: translateX(6px); /* smoother, slightly deeper pull */
  box-shadow: 0 8px 24px rgba(27, 36, 64, 0.06);
}
.perspective-card.carer-card {
  background: linear-gradient(135deg, #f7fdfb 0%, #effaf7 100%);
  border-left: 5px solid var(--teal);
}
.perspective-card.senior-card {
  background: linear-gradient(135deg, #f7f9fd 0%, #eff3fa 100%);
  border-left: 5px solid var(--navy);
}
.p-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.carer-card .p-icon { color: var(--teal); }
.senior-card .p-icon { color: var(--navy); }
.p-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}
.p-body h4 {
  font-size: 0.94rem;
  margin: 0 0 0.25rem 0;
  font-weight: 700;
}
.carer-card h4 { color: var(--teal-d); }
.senior-card h4 { color: var(--navy-700); }
.p-body p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 820px) {
  .timeline-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .time-dot__val {
    font-size: 0.72rem;
  }
  .sp-time {
    padding: 3.5rem 0 !important;
  }
}

/* ==========================================================================
   Local Trust Hub Map Section
   ========================================================================== */
.sp-trust {
  padding: 6rem 0 !important;
  background: radial-gradient(circle at 10% 20%, rgba(26, 172, 154, 0.16) 0%, transparent 45%),
              radial-gradient(circle at 90% 80%, rgba(244, 165, 42, 0.12) 0%, transparent 45%),
              linear-gradient(180deg, #10153B 0%, #0B0E2A 100%) !important;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sp-trust .eyebrow {
  color: var(--teal);
}
.sp-trust .h-2 {
  color: #fff;
}
.trusthub-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2rem;
}
.map-panel {
  display: flex;
  justify-content: center;
  align-items: center;
}
.map-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 320 / 400;
  background: rgba(16, 21, 59, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4),
              inset 0 1px 1px rgba(255,255,255,0.05);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.map-container:hover {
  border-color: rgba(26, 172, 154, 0.2);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5),
              0 0 30px rgba(26, 172, 154, 0.1),
              inset 0 1px 1px rgba(255,255,255,0.1);
}
.suedbaden-map {
  filter: drop-shadow(0 0 20px rgba(26, 172, 154, 0.15)); /* soft glow drop shadow */
  width: 100%;
  height: 100%;
  display: block;
}
.rhine-flow {
  stroke-dasharray: 12, 12;
  animation: riverFlow 6s linear infinite;
}
@keyframes riverFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -24; }
}
.mountain-peaks {
  stroke: rgba(255, 255, 255, 0.08);
  transition: stroke 0.5s ease;
}
.map-container:hover .mountain-peaks {
  stroke: rgba(244, 165, 42, 0.25);
}
.suedbaden-map text {
  font-family: "Gotham Rounded", var(--font-sans), sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  font-weight: 700;
  letter-spacing: 1px;
}
.map-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.map-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  outline: none;
  z-index: 10;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.map-pin:hover {
  z-index: 20;
}
.map-pin.active {
  z-index: 25;
}
.map-pin.active::before,
.map-pin.active::after {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}
.map-pin.active::before {
  animation: radarPing 2.2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}
.map-pin.active::after {
  animation: radarPing 2.2s infinite cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}
@keyframes radarPing {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.8); opacity: 0; }
}
.pin-dot {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
  border: 2px solid #fff;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 3;
}
.map-pin:hover .pin-dot {
  background: var(--gold);
  border-color: #fff;
  transform: scale(1.25);
  box-shadow: 0 0 8px var(--gold);
}
.map-pin.active .pin-dot {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  transform: scale(0.65);
}
.pin-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.4;
  animation: pinPulse 2s infinite ease-out;
  transition: all 0.3s ease;
  z-index: 1;
}
.map-pin:hover .pin-pulse {
  background: var(--gold);
}
.map-pin.active .pin-pulse {
  opacity: 0;
}
@keyframes pinPulse {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}
.pin-bird {
  display: block;
  width: 28px;
  height: 28px;
  background-image: url('/assets/img/kolibri-bird.png?v=3');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  z-index: 12;
}
.map-pin:hover .pin-bird {
  opacity: 0.5;
  transform: translate(-50%, -130%) scale(0.8);
}
.map-pin.active .pin-bird {
  opacity: 1;
  transform: translate(-50%, -130%) scale(1.1);
  animation: mapBirdFlight 2.2s ease-in-out infinite alternate;
}
@keyframes mapBirdFlight {
  0% { transform: translate(-50%, -130%) scale(1.1) translateY(-2px) rotate(0deg); }
  50% { transform: translate(-50%, -130%) scale(1.1) translateY(-6px) rotate(4deg); }
  100% { transform: translate(-50%, -130%) scale(1.1) translateY(-2px) rotate(0deg); }
}
.pin-tooltip {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--font-sans);
  letter-spacing: 0.5px;
  opacity: 1;
  visibility: visible;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  z-index: 15;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pin-tooltip::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 5px 5px 0;
  border-style: solid;
  border-color: transparent transparent transparent transparent; /* hidden by default */
  transition: border-color 0.3s ease;
}
.map-pin:hover .pin-tooltip {
  color: #fff;
  transform: translateY(-50%) translateX(3px);
  text-shadow: 0 0 8px rgba(26, 172, 154, 0.6);
}
.map-pin.active .pin-tooltip {
  color: #fff;
  font-size: 0.8rem;
  background: linear-gradient(135deg, rgba(26, 172, 154, 0.96) 0%, rgba(20, 130, 116, 0.96) 100%);
  padding: 0.35rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), 0 0 15px rgba(26, 172, 154, 0.25);
  transform: translateY(-50%) scale(1.04) translateX(2px);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-shadow: none;
}
.map-pin.active .pin-tooltip::before {
  border-color: transparent rgba(26, 172, 154, 0.96) transparent transparent; /* visible only on active */
}

.testimonial-panel {
  display: flex;
  align-items: center;
}
.testimonial-carousel {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
}
.trust-card {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96) translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              visibility 0.5s;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}
.trust-card.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  z-index: 2;
}
.trust-card__badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.trust-card__badge-row .stars {
  color: var(--gold);
  font-size: 1.25rem;
}
.trust-card__badge-row .care-badge {
  background: rgba(26, 172, 154, 0.15);
  color: #86e4d5;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(26, 172, 154, 0.25);
}
.trust-card__quote {
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.6;
  color: #f8fafc;
  margin: 0 0 1.6rem 0;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.trust-card__author {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.avatar-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.trust-card__author h4 {
  margin: 0 0 4px 0;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
}
.trust-card__author .city {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  font-weight: 500;
}
.trust-card__footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.1rem;
  font-size: 0.85rem;
  display: flex;
  gap: 8px;
}
.trust-card__footer .label {
  color: rgba(255, 255, 255, 0.5);
}
.trust-card__footer .value {
  color: #86e4d5;
  font-weight: 600;
}

@media (max-width: 820px) {
  .trusthub-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .testimonial-carousel {
    min-height: 280px;
  }
  .trust-card {
    padding: 1.8rem;
  }
  .sp-trust {
    padding: 4rem 0 !important;
  }
}

/* ==========================================================================
   Carer Compatibility Matcher Section
   ========================================================================== */
.sp-matcher {
  padding: 6rem 0 !important;
  background: radial-gradient(120% 80% at 50% -10%, #ffffff 35%, #f4f6fb 100%) !important;
  border-top: 1px solid rgba(41, 53, 142, 0.04);
}
.matcher-box {
  max-width: 820px;
  margin: 3.5rem auto 0 auto;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 15px 45px -12px rgba(27,36,64,0.08), 0 3px 10px rgba(27,36,64,0.02);
  border: 1px solid rgba(41, 53, 142, 0.05);
  overflow: hidden;
  position: relative;
  min-height: 480px;
  display: flex;
}
.matcher-screen {
  width: 100%;
  display: none;
  flex-direction: column;
  padding: 3rem;
  box-sizing: border-box;
}
.matcher-screen.active {
  display: flex;
}

/* Progress bar */
.matcher-progress {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.progress-bar {
  height: 6px;
  background: rgba(41, 53, 142, 0.06);
  border-radius: 99px;
  position: relative;
  overflow: visible !important;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%);
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.progress-bar-bird {
  position: absolute;
  top: 50%;
  left: 33%;
  width: 32px;
  height: 32px;
  background-image: url('/assets/img/kolibri-bird.png?v=3');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -55%) scale(1.15);
  transition: left 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 10;
  pointer-events: none;
  animation: progressBirdFly 1.5s ease-in-out infinite alternate;
}
@keyframes progressBirdFly {
  0% { transform: translate(-50%, -55%) scale(1.15) translateY(-1px) rotate(-3deg); }
  100% { transform: translate(-50%, -55%) scale(1.15) translateY(-5px) rotate(3deg); }
}
.progress-steps {
  display: flex;
  justify-content: space-between;
}
.step-lbl {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.3s ease;
}
.step-lbl.active {
  color: var(--teal-700);
}

/* Quiz Steps */
.quiz-step {
  display: none;
  flex-direction: column;
  gap: 1.8rem;
  flex-grow: 1;
}
.quiz-step.active {
  display: flex;
}
.step-heading {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.step-sub {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
}

/* Grid Options */
.matcher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}
.matcher-grid--thirds {
  grid-template-columns: repeat(3, 1fr);
}
.match-card {
  background: #f8fafc;
  border: 1.5px solid rgba(41, 53, 142, 0.06);
  border-radius: 18px;
  padding: 1.4rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  text-align: center;
}
.match-card:hover {
  border-color: var(--teal);
  background: #fff;
  transform: translateY(-3px);
}
.match-card.active {
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 10px 25px rgba(26, 172, 154, 0.12), inset 0 0 0 1px var(--teal);
  transform: translateY(-3px);
}
.m-card-icon {
  font-size: 1.8rem;
}
.m-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
}

/* Control buttons footer */
.quiz-controls {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(41, 53, 142, 0.06);
  padding-top: 1.8rem;
  display: flex;
  justify-content: space-between;
}
.quiz-controls .btn {
  min-width: 140px;
}

/* Scanning Overlay Screen */
#matcher-scanning {
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #10153B 0%, #0B0E2A 100%);
  color: #fff;
}
.scanner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: relative;
}
.scanner-bird {
  width: 54px;
  height: 54px;
  background-image: url('/assets/img/kolibri-bird.png?v=3');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: scanBird 2s ease-in-out infinite alternate;
  z-index: 2;
}
.scanner-spinner {
  width: 90px;
  height: 90px;
  border: 3px dashed rgba(26, 172, 154, 0.4);
  border-radius: 50%;
  border-top-color: var(--teal);
  animation: scanSpin 1.8s linear infinite;
  position: absolute;
  top: -18px;
  z-index: 1;
}
.scanner-text {
  font-size: 0.94rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
@keyframes scanSpin {
  to { transform: rotate(360deg); }
}
@keyframes scanBird {
  0% { transform: translateY(0) rotate(-5deg) scale(1); }
  100% { transform: translateY(-8px) rotate(5deg) scale(1.1); }
}

/* Results Screen */
#matcher-results {
  background: linear-gradient(180deg, #10153B 0%, #0B0E2A 100%);
  color: #fff;
  border-radius: 28px;
}
.results-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  align-items: center;
  flex-grow: 1;
}
.result-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2.2rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.result-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  background: rgba(26, 172, 154, 0.12);
  border: 2px solid var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(26, 172, 154, 0.25);
  margin-bottom: 1.4rem;
  z-index: 1;
}
.result-avatar::before,
.result-avatar::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  z-index: -1;
}
.result-avatar::before {
  animation: resultRadar 2.5s infinite cubic-bezier(0.16, 1, 0.3, 1);
}
.result-avatar::after {
  animation: resultRadar 2.5s infinite cubic-bezier(0.16, 1, 0.3, 1) 1.25s;
}
@keyframes resultRadar {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.result-avatar__kolibri {
  width: 58px;
  height: auto;
  animation: resultBirdFlight 3s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 8px rgba(26, 172, 154, 0.3));
}
@keyframes resultBirdFlight {
  0% { transform: translateY(2px) scale(1) rotate(0deg); }
  50% { transform: translateY(-6px) scale(1.08) rotate(3deg); }
  100% { transform: translateY(2px) scale(1) rotate(0deg); }
}
.result-archetype {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.35rem 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.result-lbl {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.result-details {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.details-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.details-desc {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin: 0;
}

.matched-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.bullets-title {
  font-size: 0.85rem;
  color: var(--teal);
  font-weight: 700;
  margin: 0 0 0.2rem 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.bullets-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bullets-list li {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.bullet-check-icon {
  color: var(--teal);
  font-weight: 800;
  font-size: 0.95rem;
}

.results-buttons {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.btn--restart {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}
.btn--restart:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Responsiveness */
@media (max-width: 860px) {
  .matcher-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }
  .results-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .result-profile {
    padding: 1.6rem;
  }
}
@media (max-width: 600px) {
  .matcher-screen {
    padding: 1.6rem;
  }
  .matcher-box {
    border-radius: 20px;
    margin-top: 2rem;
  }
  .step-heading {
    font-size: 1.15rem;
  }
  .m-card-icon {
    font-size: 1.5rem;
  }
  .m-card-title {
    font-size: 0.8rem;
  }
  .match-card {
    padding: 1rem 0.6rem;
    border-radius: 14px;
  }
  .progress-steps {
    display: none; /* hide label flow on mobile to save space */
  }
  .sp-matcher {
    padding: 4rem 0 !important;
  }
}

/* ==========================================================================
   Caregiver Spotlight Sidebar Card
   ========================================================================== */
.spotlight-card {
  background: #ffffff;
  border: 1.5px solid rgba(41, 53, 142, 0.08);
  border-radius: 24px;
  padding: 1.8rem;
  box-shadow: 0 10px 30px rgba(27, 36, 64, 0.04);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}
.spotlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(27, 36, 64, 0.08);
  border-color: rgba(26, 172, 154, 0.35);
}
.spotlight-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.spotlight-avatar-container {
  position: relative;
  flex-shrink: 0;
}
.spotlight-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--teal);
  box-shadow: 0 4px 10px rgba(26, 172, 154, 0.18);
}
.spotlight-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 13px;
  height: 13px;
  background-color: #10b981;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: spotlightPing 2s infinite;
}
@keyframes spotlightPing {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.spotlight-meta h4 {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.spotlight-tag {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--teal);
  background: rgba(26, 172, 154, 0.08);
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  display: inline-block;
  margin-top: 0.25rem;
}
.spotlight-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.86rem;
  color: var(--navy-600);
}
.spotlight-info-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.spotlight-info-row svg {
  width: 17px;
  height: 17px;
  color: var(--teal);
  flex-shrink: 0;
}
.spotlight-quote {
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--navy-700);
  background: #f8fafc;
  padding: 0.95rem 1.1rem;
  border-left: 3.5px solid var(--teal);
  border-radius: 0 12px 12px 0;
  margin: 0;
  position: relative;
}
.spotlight-badge {
  position: absolute;
  top: 14px;
  right: -28px;
  background: var(--grad-gold);
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 2.2rem;
  transform: rotate(45deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Creative Hummingbird Placements & Micro-animations */
.sec-head.center .eyebrow::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url('/assets/img/kolibri-bird.png?v=3') center center/contain no-repeat;
  border-radius: 0;
  opacity: 0.85;
}
.service {
  position: relative;
  overflow: hidden;
}
.service::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 44px;
  height: 44px;
  background: url('/assets/img/kolibri-bird.png?v=3') center center/contain no-repeat;
  opacity: 0;
  transform: translate(5px, 5px) scale(0.7) rotate(15deg);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}
.service:hover::after {
  opacity: 0.08;
  transform: translate(0, 0) scale(1) rotate(5deg);
}
.greview {
  position: relative;
  overflow: hidden;
}
.greview::after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 38px;
  height: 38px;
  background: url('/assets/img/kolibri-bird.png?v=3') center center/contain no-repeat;
  opacity: 0.035;
  transform: rotate(-10deg) scale(0.95);
  pointer-events: none;
}
.story-bird {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 48px;
  height: 48px;
  background: url('/assets/img/kolibri-bird.png?v=3') center center/contain no-repeat;
  z-index: 10;
  pointer-events: none;
  animation: birdFloatShort 6s ease-in-out infinite alternate;
}
.ctaband__bird {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 70px;
  height: 70px;
  background: url('/assets/img/kolibri-bird.png?v=3') center center/contain no-repeat;
  opacity: 0.12;
  transform: rotate(-15deg);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.4s ease;
}
.ctaband:hover .ctaband__bird {
  transform: rotate(-5deg) scale(1.08) translateY(-2px);
}
.to-top {
  padding: 0;
}
.to-top__bird {
  display: block;
  width: 24px;
  height: 24px;
  background: url('/assets/img/kolibri-bird.png?v=3') center center/contain no-repeat;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}
.to-top:hover .to-top__bird {
  transform: translateY(-4px) rotate(-10deg);
}
@keyframes birdFloatShort {
  0% { transform: translateY(0) rotate(5deg) scale(0.95); }
  100% { transform: translateY(-8px) rotate(-8deg) scale(1.05); }
}
@media (max-width: 560px) {
  .ctaband__bird {
    width: 50px;
    height: 50px;
    top: 5px;
    right: 8px;
    opacity: 0.08;
  }
}