/* ================= LUCHS Tierklinik — styles ================= */
:root{
  --teal:        #46bfc4;
  --teal-deep:   #159399;
  --teal-ink:    #0f7a80;
  --teal-panel1: #7fd7d3;
  --teal-panel2: #a6e6df;
  --orange:      #f26a1f;
  --orange-dark: #b64a12;
  --blue-soft:   #dff1f4;
  --blue-soft2:  #e7f4fb;
  --ink:         #1f2b32;
  --ink-soft:    #5a6b73;
  --line:        #e7edee;
  --bg:          #ffffff;
  --pill-shadow: 0 6px 18px rgba(20,120,128,.12);
  --card-shadow: 0 18px 40px rgba(20,120,128,.10);
  --radius-xl:   34px;
  --radius-lg:   22px;
  --radius-md:   14px;
  --maxw:        1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-weight:800;font-size:1rem;
  border:0;border-radius:14px;padding:15px 30px;cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(242,106,31,.28)}
.btn-primary:hover{background:#e35d14}
.btn-lg{padding:19px 46px;font-size:1.12rem;border-radius:16px}
.btn-dark{background:var(--orange-dark);color:#fff}
.btn-dark:hover{background:#9a3d0d}
.btn-ghost{background:transparent;border:2px solid var(--teal);color:var(--teal-ink)}
.btn-wa{background:#25d366;color:#fff}
.btn-mail{background:var(--teal);color:#fff}

/* ================= HEADER ================= */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:26px;height:82px}
.brand{display:flex;align-items:center;gap:11px;color:var(--teal-deep)}
.brand-mark{display:grid;place-items:center;color:var(--teal)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-weight:900;font-size:1.65rem;color:var(--teal-ink);letter-spacing:.5px}
.brand-tag{font-size:.72rem;font-weight:600;color:var(--ink-soft);margin-top:3px}
.main-nav{display:flex;gap:8px;margin-left:14px}
.main-nav a{padding:9px 16px;border-radius:11px;font-weight:700;font-size:.95rem;color:var(--ink);background:#f4f7f7;transition:.18s}
.main-nav a:hover{background:var(--blue-soft);color:var(--teal-ink)}
.header-contact{margin-left:auto;text-align:right;line-height:1.35}
.header-phone{font-weight:900;font-size:1.18rem;color:var(--ink)}
.header-loc{display:flex;align-items:center;gap:5px;justify-content:flex-end;font-size:.84rem;color:var(--ink-soft);margin-top:2px}
.header-loc svg{color:var(--orange)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:26px;height:3px;background:var(--teal-ink);border-radius:2px;transition:.2s}
.mobile-nav{display:flex;flex-direction:column;padding:12px 24px 20px;gap:4px;border-bottom:1px solid var(--line);background:#fff}
.mobile-nav a{padding:12px 14px;border-radius:10px;font-weight:700;background:#f4f7f7}
.mobile-phone{color:var(--teal-ink)!important}

/* ================= HERO ================= */
.hero{padding:56px 0 40px}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.hero-copy h1{font-size:clamp(2.4rem,4.6vw,3.7rem);font-weight:900;line-height:1.06;color:var(--teal-ink);letter-spacing:-.5px}
.hero-promo{display:flex;align-items:center;gap:18px;margin:30px 0 26px}
.promo-pill{background:var(--blue-soft);color:var(--teal-ink);font-weight:800;padding:13px 26px;border-radius:14px;font-size:1.05rem;white-space:nowrap}
.promo-note{font-size:.9rem;color:var(--ink-soft);font-weight:600}
.hero-lead{font-size:1.18rem;color:#43555d;max-width:33ch;font-weight:500}
.hero-hours{color:var(--teal-deep);font-weight:800;font-size:1.35rem;margin:26px 0 30px}
.hero-visual{position:relative}
.hero-panel{position:relative;background:linear-gradient(150deg,var(--teal-panel1),var(--teal-panel2));
  border-radius:var(--radius-xl);min-height:470px;overflow:hidden;box-shadow:var(--card-shadow)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 30%;z-index:0}
.hero-panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(160deg,rgba(70,191,196,.55) 0%,rgba(70,191,196,.05) 34%,rgba(15,122,128,.05) 60%,rgba(15,122,128,.45) 100%)}
.hero-stetho{position:absolute;left:34px;top:30px;color:#fff;opacity:.9;z-index:3;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.hero-pills{position:absolute;top:30px;right:26px;display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end;max-width:62%;z-index:3}
.hero-pills span{background:#fff;color:var(--teal-ink);font-weight:700;font-size:.82rem;padding:8px 15px;border-radius:11px;box-shadow:var(--pill-shadow)}

/* ================= INTRO / FEATURES ================= */
.intro{padding:64px 0 20px}
.intro-lead{max-width:900px;margin:0 auto 50px;text-align:center;font-size:clamp(1.35rem,2.6vw,1.95rem);font-weight:800;line-height:1.4;color:var(--ink)}
.intro-lead strong{color:var(--teal-deep)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:22px}
.feature-card{border-radius:var(--radius-lg);padding:34px 30px;position:relative;overflow:hidden;min-height:230px;display:flex;flex-direction:column}
.feature-card:nth-child(1),.feature-card:nth-child(2){grid-row:1 / 3;min-height:470px;justify-content:flex-start}
.feature-card:nth-child(3){grid-column:3;grid-row:1}
.feature-card:nth-child(4){grid-column:3;grid-row:2}
.feature-card h3{font-size:1.4rem;font-weight:900;margin-bottom:14px;line-height:1.15}
.feature-card p{font-size:.96rem;line-height:1.55;color:var(--ink-soft);max-width:24ch}
.fc-teal{background:var(--blue-soft);color:var(--teal-ink)}
.fc-teal h3{color:var(--teal-deep)}
.fc-blue{background:var(--blue-soft2)}
.fc-blue h3{color:var(--teal-deep)}
.fc-plain{background:var(--blue-soft2)}
.fc-plain h3{color:var(--teal-deep)}
.fc-orange{background:var(--orange);color:#fff}
.fc-orange h3{color:#fff}
.fc-orange p{color:rgba(255,255,255,.92)}
.fc-photo{color:#fff}
.fc-photo h3{color:#fff!important}
.fc-photo p{color:rgba(255,255,255,.94)!important;max-width:22ch}
.fc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fc-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(175deg,rgba(15,122,128,.86) 0%,rgba(15,122,128,.45) 45%,rgba(15,122,128,.30) 100%)}
.fc-blue.fc-photo::after{background:linear-gradient(175deg,rgba(20,120,128,.84) 0%,rgba(37,120,150,.42) 46%,rgba(37,120,150,.28) 100%)}
.fc-body{position:relative;z-index:2}
.link-arrow{margin-top:16px;background:none;border:0;font-family:inherit;font-weight:800;font-size:1rem;color:inherit;cursor:pointer;display:inline-flex;gap:8px;align-items:center;text-decoration:underline;text-underline-offset:4px}
.fc-orange .link-arrow{color:#fff}
.fc-plain .link-arrow,.fc-teal .link-arrow{color:var(--teal-deep)}
.link-arrow span{transition:transform .18s}
.link-arrow:hover span{transform:translateX(5px)}

/* ================= OFFERS ================= */
.offers{padding:80px 0 40px}
.section-title{text-align:center;font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:900;color:var(--ink);line-height:1.15}
.section-title.center{margin-bottom:44px}
.offers-lead{max-width:640px;margin:22px auto 54px;text-align:center;color:var(--ink-soft);font-size:1.05rem;line-height:1.6;font-weight:500}
.offers-lead a{color:var(--teal-deep);font-weight:700}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;max-width:960px;margin:0 auto}
.offer-card img{width:100%;height:300px;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:24px}
.offer-card h3{font-size:1.35rem;font-weight:900;margin-bottom:12px;line-height:1.25}
.offer-card p{color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.offer-price{color:var(--teal-deep)!important;font-weight:900;font-size:1.7rem;margin:18px 0 20px!important}

/* ================= TEAM ================= */
.team{padding:80px 0 40px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px;max-width:1000px;margin:0 auto}
.doc-card{text-align:left}
.doc-avatar{width:100%;aspect-ratio:1/1.04;border-radius:20px;
  background:linear-gradient(160deg,var(--teal-panel2),#eef8f6);
  position:relative;display:grid;place-items:center;margin-bottom:18px;overflow:hidden}
.doc-avatar::after{content:attr(data-initials);font-weight:900;font-size:3.4rem;color:#fff;
  text-shadow:0 3px 10px rgba(20,120,128,.35);
  background:linear-gradient(150deg,var(--teal),var(--teal-deep));
  width:118px;height:118px;border-radius:50%;display:grid;place-items:center}
.doc-avatar::before{content:"";position:absolute;right:16px;bottom:16px;width:46px;height:46px;opacity:.4;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23159399'%3E%3Cellipse cx='24' cy='31' rx='10' ry='8'/%3E%3Ccircle cx='12' cy='18' r='4.2'/%3E%3Ccircle cx='20' cy='12' r='4.2'/%3E%3Ccircle cx='28' cy='12' r='4.2'/%3E%3Ccircle cx='36' cy='18' r='4.2'/%3E%3C/svg%3E")}
.doc-card h3{font-size:1.28rem;font-weight:900;margin-bottom:8px}
.doc-card p{color:var(--ink-soft);font-size:.92rem;line-height:1.5}
.doc-card p span{font-size:.85rem}

/* ================= REVIEWS ================= */
.reviews{padding:70px 0 40px}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review-card{background:var(--blue-soft2);border-radius:var(--radius-lg);padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.stars{color:#f5a623;font-size:1.1rem;letter-spacing:2px}
.review-card p{font-size:1rem;line-height:1.6;color:var(--ink);font-weight:600}
.review-card footer{color:var(--ink-soft);font-weight:700;font-size:.9rem;margin-top:auto}

/* ================= BOOKING ================= */
.booking{padding:70px 0}
.booking-panel{background:var(--orange);border-radius:var(--radius-xl);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.35fr 1fr;min-height:420px}
.booking-form-col{padding:48px 48px 44px;position:relative;z-index:2}
.booking-form-col h2{color:#fff;font-size:2.3rem;font-weight:900;margin-bottom:26px}
#bookingForm .form-row{display:flex;gap:16px;margin-bottom:16px;align-items:flex-start}
#bookingForm input,#bookingForm select,#bookingForm textarea{
  width:100%;font-family:inherit;font-size:1rem;padding:14px 18px;border:2px solid rgba(255,255,255,.6);border-radius:12px;
  background:rgba(255,255,255,.16);color:#fff;font-weight:600;transition:border-color .18s, background .18s, box-shadow .18s}
#bookingForm input::placeholder,#bookingForm textarea::placeholder{color:#ffe6db}
#bookingForm select{color:#ffe6db;height:54px;padding-top:0;padding-bottom:0}
#bookingForm input:focus,#bookingForm select:focus,#bookingForm textarea:focus{
  outline:0;border-color:#fff;background:rgba(255,255,255,.26);box-shadow:0 0 0 4px rgba(255,255,255,.18)}
#bookingForm input:hover,#bookingForm select:hover,#bookingForm textarea:hover{border-color:rgba(255,255,255,.85)}
#bookingForm select option{color:var(--ink);background:#fff}
#bookingForm textarea{margin-bottom:16px;resize:vertical}
.field-label{color:#fff;font-weight:800;font-size:1.15rem;display:block;margin:6px 0 12px}
.mini-contact{background:rgba(20,120,128,.28);border-radius:12px;padding:16px 18px;min-width:230px;color:#fff;font-size:.9rem}
.mini-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mini-badge{background:#25c268;color:#fff;font-weight:800;font-size:.72rem;padding:4px 11px;border-radius:20px}
.mini-hours{font-size:.82rem;opacity:.9}
.mini-phone{display:block;font-weight:900;font-size:1.25rem;margin-bottom:8px}
.mini-addr{font-size:.8rem;line-height:1.5;opacity:.92}
.mini-addr a{text-decoration:underline}
.consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;color:#ffe4d8;font-size:.8rem;line-height:1.5;margin:6px 0 18px;width:100%}
.consent input{margin-top:3px;accent-color:#fff;width:16px;height:16px}
.consent span{min-width:0}
.consent a{text-decoration:underline;color:#fff}
.form-status{color:#fff;font-weight:700;margin-top:10px;min-height:1em}
.booking-visual{position:relative;overflow:hidden}
.booking-visual img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top}
.booking-panel::before{content:"";position:absolute;inset:0;
  background:no-repeat 88% 30%/70px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23ffffff'%3E%3Cellipse cx='24' cy='31' rx='10' ry='8'/%3E%3Ccircle cx='12' cy='18' r='4.2'/%3E%3Ccircle cx='20' cy='12' r='4.2'/%3E%3Ccircle cx='28' cy='12' r='4.2'/%3E%3Ccircle cx='36' cy='18' r='4.2'/%3E%3C/svg%3E");opacity:.1}

/* ================= CONTACT ================= */
.contact{padding:20px 0 80px}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:stretch}
.contact-info{display:flex;flex-direction:column;gap:16px;justify-content:center}
.contact-info h2{font-size:1.9rem;font-weight:900;color:var(--teal-ink)}
.contact-info p{color:var(--ink-soft);font-size:1.02rem;line-height:1.6}
.contact-info a{color:var(--teal-deep);font-weight:700}
.contact-info .btn{align-self:flex-start;margin-top:8px}
.contact-map{border-radius:var(--radius-lg);overflow:hidden;min-height:340px;box-shadow:var(--card-shadow)}
.contact-map iframe{width:100%;height:100%;min-height:340px;border:0;filter:saturate(.9)}

/* ================= FOOTER ================= */
.site-footer{background:#0f3e41;color:#cfe6e6;padding:44px 0}
.footer-inner{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between}
.footer-brand{display:flex;flex-direction:column}
.footer-brand .brand-name{color:#fff;font-size:1.6rem}
.footer-brand .brand-tag{color:#8fc4c4}
.footer-nav{display:flex;gap:20px;flex-wrap:wrap}
.footer-nav a{font-weight:700;color:#d5eaea}
.footer-nav a:hover{color:#fff}
.footer-legal{text-align:right;font-size:.82rem;line-height:1.9}
.footer-legal a{color:#9fcccc;margin-left:16px}
.footer-legal p{color:#6fa3a3;margin-top:6px}

/* ================= MODAL ================= */
.modal-overlay{position:fixed;inset:0;background:rgba(15,62,65,.55);backdrop-filter:blur(3px);
  z-index:80;display:grid;place-items:center;padding:20px}
.modal-overlay[hidden]{display:none}
.modal{background:#fff;border-radius:var(--radius-lg);max-width:430px;width:100%;padding:38px 34px;position:relative;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.modal h3{font-size:1.7rem;font-weight:900;color:var(--teal-ink);margin-bottom:10px}
.modal p{color:var(--ink-soft);margin-bottom:24px}
.modal-actions{display:flex;flex-direction:column;gap:12px}
.modal-actions .btn{width:100%}
.modal-close{position:absolute;top:14px;right:18px;background:none;border:0;font-size:1.9rem;line-height:1;color:var(--ink-soft);cursor:pointer}

/* ================= RESPONSIVE ================= */
@media(max-width:960px){
  .main-nav,.header-contact{display:none}
  .nav-toggle{display:flex;margin-left:auto}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-panel{min-height:400px}
  .feature-grid{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .feature-card:nth-child(1),.feature-card:nth-child(2){grid-row:auto;min-height:320px}
  .feature-card:nth-child(3){grid-column:auto;grid-row:auto}
  .feature-card:nth-child(4){grid-column:auto;grid-row:auto}
  .team-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .review-grid{grid-template-columns:1fr}
  .booking-panel{grid-template-columns:1fr}
  .booking-visual{display:none}
  .contact-grid{grid-template-columns:1fr}
  .offer-grid{gap:30px}
}
@media(max-width:600px){
  .header-inner{height:66px}
  .brand-name{font-size:1.35rem}
  .hero{padding:34px 0}
  .hero-promo{flex-direction:column;align-items:flex-start;gap:10px}
  .feature-grid{grid-template-columns:1fr}
  .offer-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr;gap:24px 16px}
  .doc-avatar::after{width:88px;height:88px;font-size:2.4rem}
  .booking-form-col{padding:32px 24px}
  #bookingForm .form-row{flex-direction:column;gap:12px}
  .booking-form-col h2{font-size:1.8rem}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .footer-legal{text-align:left}
  .footer-legal a{margin:0 16px 0 0}
}
.mobile-nav[hidden]{display:none}

/* ================================================================
   JOY PACK — pet-friendly colour, hover motion & delight
   ================================================================ */
:root{
  --joy-coral:#ff8a5b; --joy-coral-d:#ff6f43;
  --joy-sun:#f7b32b;   --joy-sun-d:#ef9f12;
  --joy-mint:#35c08a;  --joy-mint-d:#22a877;
  --joy-lav:#9b8cf0;   --joy-lav-d:#7e6ee8;
  --joy-sky:#46b6e0;   --joy-sky-d:#2b9fce;
  --joy-teal:#2bb3b8;  --joy-teal-d:#159399;
}

/* --- global button lift --- */
.btn{transition:transform .16s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0)}
.btn-primary:hover{box-shadow:0 16px 30px rgba(242,106,31,.38)}

/* --- bobbing brand paw --- */
@keyframes paw-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-6deg)}}
.brand-mark{animation:paw-bob 2.8s ease-in-out infinite;transform-origin:center}
.brand:hover .brand-mark{animation-duration:.7s}
.main-nav a:hover{transform:translateY(-2px);transition:transform .15s, background .18s, color .18s}

/* --- hero service pills: happy pastels + pop --- */
.hero-pills span{transition:transform .18s ease, box-shadow .18s ease}
.hero-pills span:hover{transform:translateY(-4px) scale(1.06)}
.hero-pills span:nth-child(1){background:#fff2e8;color:#d9541f}
.hero-pills span:nth-child(2){background:#eafaf2;color:var(--joy-mint-d)}
.hero-pills span:nth-child(3){background:#fff7e2;color:var(--joy-sun-d)}
.hero-pills span:nth-child(4){background:#eaf6fc;color:var(--joy-sky-d)}
.hero-pills span:nth-child(5){background:#f1eefd;color:var(--joy-lav-d)}
.hero-pills span:nth-child(6){background:#e6f7f7;color:var(--joy-teal-d)}
.promo-pill{transition:transform .18s}
.promo-pill:hover{transform:translateY(-2px) scale(1.03)}

/* --- feature cards: lift + photo zoom --- */
.feature-card{transition:transform .22s ease, box-shadow .22s ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(20,120,128,.22)}
.fc-img{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.fc-photo:hover .fc-img{transform:scale(1.08)}
.fc-plain:hover,.fc-orange:hover{box-shadow:0 24px 48px rgba(20,120,128,.18)}

/* --- offer cards: lift + photo zoom --- */
.offer-card{transition:transform .2s ease}
.offer-card img{transition:transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
.offer-card:hover{transform:translateY(-5px)}
.offer-card:hover img{transform:scale(1.035);box-shadow:0 20px 40px rgba(20,120,128,.20)}

/* --- doctors: a whole rainbow of pet-friendly avatars --- */
.doc-card{transition:transform .2s ease}
.doc-card:hover{transform:translateY(-7px)}
.doc-avatar::after{transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s;box-shadow:0 8px 20px rgba(20,120,128,.28)}
.doc-avatar::before{transition:transform .35s ease}
.doc-card:hover .doc-avatar::after{transform:scale(1.09)}
.doc-card:hover .doc-avatar::before{transform:rotate(-16deg) scale(1.2)}
.team-grid .doc-card:nth-child(6n+1) .doc-avatar::after{background:linear-gradient(150deg,var(--joy-coral),var(--joy-coral-d))}
.team-grid .doc-card:nth-child(6n+1) .doc-avatar{background:linear-gradient(160deg,#ffe4d6,#fff3ec)}
.team-grid .doc-card:nth-child(6n+2) .doc-avatar::after{background:linear-gradient(150deg,var(--joy-teal),var(--joy-teal-d))}
.team-grid .doc-card:nth-child(6n+2) .doc-avatar{background:linear-gradient(160deg,#d5f2f1,#eefaf9)}
.team-grid .doc-card:nth-child(6n+3) .doc-avatar::after{background:linear-gradient(150deg,var(--joy-sun),var(--joy-sun-d))}
.team-grid .doc-card:nth-child(6n+3) .doc-avatar{background:linear-gradient(160deg,#fdeecb,#fff8e9)}
.team-grid .doc-card:nth-child(6n+4) .doc-avatar::after{background:linear-gradient(150deg,var(--joy-mint),var(--joy-mint-d))}
.team-grid .doc-card:nth-child(6n+4) .doc-avatar{background:linear-gradient(160deg,#d6f2e6,#eefaf4)}
.team-grid .doc-card:nth-child(6n+5) .doc-avatar::after{background:linear-gradient(150deg,var(--joy-lav),var(--joy-lav-d))}
.team-grid .doc-card:nth-child(6n+5) .doc-avatar{background:linear-gradient(160deg,#e6e1fb,#f4f1ff)}
.team-grid .doc-card:nth-child(6n+6) .doc-avatar::after{background:linear-gradient(150deg,var(--joy-sky),var(--joy-sky-d))}
.team-grid .doc-card:nth-child(6n+6) .doc-avatar{background:linear-gradient(160deg,#d7eefa,#eef8fd)}
.doc-avatar::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23ffffff'%3E%3Cellipse cx='24' cy='31' rx='10' ry='8'/%3E%3Ccircle cx='12' cy='18' r='4.2'/%3E%3Ccircle cx='20' cy='12' r='4.2'/%3E%3Ccircle cx='28' cy='12' r='4.2'/%3E%3Ccircle cx='36' cy='18' r='4.2'/%3E%3C/svg%3E");opacity:.6}

/* --- reviews: cheerful pastel cards that tilt on hover --- */
.reviews{background:linear-gradient(180deg,#fffaf4,#f4fbfa);border-radius:38px;margin:0 12px}
.review-card{transition:transform .22s ease, box-shadow .25s ease}
.review-card:nth-child(1){background:#fff2e6}
.review-card:nth-child(2){background:#e7f7f0}
.review-card:nth-child(3){background:#eeeafe}
.review-card:hover{transform:translateY(-6px) rotate(-.7deg);box-shadow:0 22px 44px rgba(20,120,128,.15)}
.review-card:nth-child(2):hover{transform:translateY(-6px) rotate(.7deg)}

/* --- section titles: playful colour underline --- */
.section-title.center{position:relative;padding-bottom:20px}
.section-title.center::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:70px;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--joy-coral),var(--joy-sun),var(--joy-mint),var(--joy-sky))}

/* --- contact CTA + map hover --- */
.contact-map{transition:transform .25s ease, box-shadow .25s ease}
.contact-map:hover{transform:translateY(-4px);box-shadow:0 26px 50px rgba(20,120,128,.20)}
.link-arrow:hover{filter:brightness(1.05)}

/* --- respect reduced motion --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .review-card:hover{transform:none}
}