/* =========================================================
   LUMARA Medical Center — Landing Page
   Design base: Figma 1440px  |  Fully responsive, no framework
   ---------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Utilities (container, buttons, section head)
   4.  Header
   5.  Hero + trust bar
   6.  Services cards
   7.  Doctors carousel
   8.  Why choose us
   9.  Journey steps
   10. Testimonials
   11. FAQ
   12. Booking form
   13. Footer
   14. Floating action buttons
   15. Responsive breakpoints
   ========================================================= */

/* ============ 1. DESIGN TOKENS ============ */
:root{
  /* colour */
  --green-900:#1B3218;
  --green-800:#23401F;
  --green-700:#2C4C26;      /* primary brand green */
  --green-600:#3A5F31;
  --green-100:#E7EDE4;
  --green-050:#F3F6F1;

  --ink:#1D2A1A;
  --body:#5C6659;
  --muted:#8A9186;
  --line:#E2E6DF;
  --white:#FFFFFF;
  --cream:#F7F8F4;
  --gold:#E8A33D;

  /* typography */
  --font-head:  "Playfair Display", serif;
  --font-body:  "Onest", sans-serif;

  /* fluid type — scales between 360px and 1440px viewports */
  --fs-h1:clamp(2rem, 1.15rem + 3.8vw, 3.75rem);
  --fs-h2:clamp(1.7rem, 1.15rem + 2.4vw, 3rem);
  --fs-h3:clamp(1.05rem, .95rem + .35vw, 1.25rem);
  --fs-body:clamp(.875rem, .82rem + .2vw, 1rem);
  --fs-sm:clamp(.78rem, .75rem + .12vw, .875rem);

  /* rhythm */
  --container:1240px;
  --gutter:clamp(1rem, 3.2vw, 2.5rem);
  --section-y:clamp(3rem, 6vw, 5.5rem);
  --gap:clamp(.9rem, 1.4vw, 1.5rem);
  --radius:10px;
  --radius-lg:16px;

  --shadow-sm:0 2px 10px rgba(27,50,24,.06);
  --shadow-md:0 10px 30px rgba(27,50,24,.10);
  --transition:.28s cubic-bezier(.4,0,.2,1);
}

/* ============ 2. RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.7;
  color:var(--body);
  background:var(--white);
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
/* every heading takes --font-head; everything else inherits --font-body from body */
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-head);font-weight:500;line-height:1.2;color:var(--ink);}
p{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,select,textarea{font:inherit;}
:focus-visible{outline:2px solid var(--green-600);outline-offset:3px;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--green-700);color:#fff;padding:.75rem 1.25rem;
}
.skip-link:focus{left:0;}

/* placeholder tint so layout stays readable before real images are added */
.hero__media,.doctor__media,.why__item,.faq__aside-media,.booking__media,.quote__avatar{
  background:linear-gradient(135deg,var(--green-100),var(--cream));
}

/* ============ 3. UTILITIES ============ */
.container{
  width:90%;
  max-width:none;
  margin-inline:auto;
  padding-inline:0;
}
.section{padding-block:var(--section-y);}
.section--tint{background:var(--green-050);}

.section__head{text-align:center;margin-bottom:clamp(1.75rem,3.5vw,3rem);}
.section__title{font-size:var(--fs-h2);letter-spacing:.01em; color: #1E3A1F;}
.ornament{display:block;margin:.5rem auto 0;width:clamp(90px,10vw,120px);color:var(--green-700);}
.ornament svg{width:100%;height:auto;stroke:currentColor;stroke-width:1;opacity:.7;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8em 1.6em;
  border-radius:6px;
  font-size:var(--fs-sm);
  font-weight:400;
  line-height:1;
  white-space:nowrap;
  transition:background var(--transition),color var(--transition),transform var(--transition),border-color var(--transition);
}
.btn:hover{transform:translateY(-2px);}
.btn--dark{background:var(--green-700);color:#fff;}
.btn--dark:hover{background:var(--green-800);}
.btn--ghost{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(4px);}
.btn--ghost:hover{background:#fff;color:var(--green-800);}
.btn--light{background:#fff;color:var(--green-800);}
.btn--light:hover{background:var(--green-100);}
.btn--sm{padding:.6em 1.1em;font-size:var(--fs-sm);}
.btn__icon{display:inline-flex;width:1.1em;}
.btn__icon svg{width:100%;fill:currentColor;}

/* ============ 4. HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:clamp(60px,5vw,76px);
}
.logo{display:inline-flex;flex-direction:column;line-height:1;}
.logo img{width:clamp(140px,14vw,187px);height:auto;}
.logo__word{
  font-family:var(--font-head);
  font-size:clamp(1.25rem,1rem + .9vw,1.75rem);
  font-weight:600;letter-spacing:.18em;color:var(--green-800);
}
.logo__sub{
  font-size:clamp(.5rem,.45rem + .12vw,.6rem);
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:.35em;
}
.logo--light img{filter:brightness(0) invert(1);}
.logo--light .logo__word{color:#fff;}
.logo--light .logo__sub{color:rgba(255,255,255,.65);}

.header__actions{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,1.5rem);}
.header__divider{width:1px;height:28px;background:var(--line);}

.contact-chip{display:inline-flex;align-items:center;gap:.6rem;}
/* icons ship as complete circular badges, so the span stays transparent */
.contact-chip__icon{
  display:grid;place-items:center;
  width:34px;height:34px;flex:none;
}
.contact-chip__icon img{width:100%;height:100%;object-fit:contain;}
.contact-chip__text{display:flex;flex-direction:column;line-height:1.2;}
.contact-chip__text small{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.contact-chip__text strong{font-size:var(--fs-sm);font-weight:500;color:var(--ink);}

.nav-toggle{display:none;flex-direction:column;gap:5px;padding:.5rem;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--green-800);transition:var(--transition);}

/* ============ 5. HERO ============ */
.hero{position:relative;isolation:isolate;}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center right;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  /* banner-image.png already fades out on the left, so this only lifts contrast */
  background:linear-gradient(100deg,rgba(240,236,224,.72) 0%,rgba(240,236,224,.45) 34%,rgba(240,236,224,.08) 60%,rgba(240,236,224,0) 78%);
}
.hero__inner{
  min-height:clamp(520px,48vw,760px);
  display:flex;align-items:center;
  padding-block:clamp(3.5rem,7vw,6rem) clamp(5.5rem,9vw,8rem);
}
.hero__content{
  max-width: 65%;
}
/* hero type runs a step above the global scale to match the taller banner */
.hero__title{
  font-size:clamp(2.25rem, .95rem + 3.6vw, 4rem);
  color:var(--green-900);
  letter-spacing:.01em;
}
.hero__text{
  margin-top:clamp(1rem,1.6vw,1.5rem);
  max-width:34ch;color:#404B3C;
  font-size:clamp(.95rem,.86rem + .42vw,1.25rem);
  line-height:1.6;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:clamp(.75rem,1.2vw,1rem);margin-top:clamp(1.5rem,3vw,2.5rem);}
.hero__cta .btn{font-size:clamp(.85rem,.78rem + .3vw,1.05rem);padding:.95em 1.9em;}
.hero__cta .btn--ghost{color:var(--green-800);border-color:var(--green-700);background:transparent;}
.hero__cta .btn--ghost:hover{background:var(--green-700);color:#fff;}

/* trust bar */
.trustbar{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(44,76,38,.82);
  backdrop-filter:blur(6px);
  color:#fff;
}
.trustbar__inner{
  display:grid;grid-template-columns:repeat(4,1fr);
  align-items:center;
  padding-block:clamp(.85rem,1.6vw,1.15rem);
}
.trust{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  text-align:left;font-size:var(--fs-sm);line-height:1.35;
  padding-inline:clamp(.5rem,1.5vw,1rem);
}
.trust + .trust{border-left:1px solid rgba(255,255,255,.22);}
.trust__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(26px,2.4vw,34px);height:clamp(26px,2.4vw,34px);flex:none;
}
.trust__icon img{width:100%;height:100%;object-fit:contain;}

/* ============ 6. SERVICES ============ */
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
}
.card{
  border:1px solid  #7E957F;
  border-radius:var(--radius);
  background: #F8FAF8;
  padding:clamp(1.1rem,1.8vw,1.6rem);
  transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition);
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--green-100);}
/* fixed-height box: the 12 icons vary in width, so height is what keeps them even */
.card__icon{
  display:flex;align-items:flex-end;
  height:clamp(38px,3.2vw,48px);
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.card__icon img{width:auto;height:100%;object-fit:contain;}
.card__title{font-size:var(--fs-h3);margin-bottom:.5rem;}
.card__text{font-size:var(--fs-sm);color:var(--body);}

/* ============ 7. DOCTORS CAROUSEL ============ */
.carousel{position:relative;}
.carousel__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * var(--gap)) / 3);
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-bottom:.25rem;
}
.carousel__track::-webkit-scrollbar{display:none;}
.carousel__track > *{scroll-snap-align:start;}

.carousel__btn{
  position:absolute;top:50%;translate:0 -50%;z-index:5;
  display:grid;place-items:center;
  width:clamp(30px,2.6vw,36px);aspect-ratio:1;
  border-radius:50%;
  background:var(--white);color:var(--green-800);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  transition:background var(--transition),color var(--transition);
}
.carousel__btn:hover{background:var(--green-700);color:#fff;}
.carousel__btn:disabled{opacity:.35;cursor:default;}
.carousel__btn:disabled:hover{background:var(--white);color:var(--green-800);}
.carousel__btn svg{width:55%;}
.carousel__btn--prev{left:calc(-1 * clamp(12px,2vw,22px));}
.carousel__btn--next{right:calc(-1 * clamp(12px,2vw,22px));}

.doctor{position:relative;border-radius:var(--radius);overflow:hidden;}
.doctor__media{aspect-ratio:16/13;}
.doctor__media img{width:100%;height:100%;object-fit:cover;}
.doctor__info{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(.9rem,1.6vw,1.25rem);
  background: #1E3A1F;
  color:#fff;
  margin: 20px;
  border-radius: 5px;
}
.doctor__name{font-size:var(--fs-h3);color:#fff;}
.doctor__meta{font-size:.72rem;line-height:1.5;color:rgba(255,255,255,.8);margin-top:.15rem;}
.doctor__link{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-top:.75rem;padding:.45em .9em;
  border:1px solid rgba(255,255,255,.55);border-radius:4px;
  font-size:.72rem;
  transition:background var(--transition),color var(--transition);
}
.doctor__link:hover{background:#fff;color:var(--green-800);}

/* ============ 8. WHY CHOOSE ============ */
.why__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
}
.why__item{
  position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:16/10;
}
.why__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.why__item:hover img{transform:scale(1.06);}
.why__body{
  position:absolute;inset:auto 0 0 0;
  padding:clamp(.9rem,1.6vw,1.4rem);
  color:#fff;
}
.why__body h3{font-size:var(--fs-h3);color:#fff;}
.why__body p{font-size:var(--fs-sm);color:rgba(255,255,255,.82);margin-top:.15rem;}

/* ============ 9. JOURNEY STEPS ============ */
.steps__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
}
.step{
  background:var(--green-700);color:#fff;
  border-radius:var(--radius);
  padding:clamp(1.4rem,2.4vw,2rem) clamp(1rem,2vw,1.75rem);
  text-align:center;
  transition:background var(--transition),transform var(--transition);
}
.step:hover{background:var(--green-800);transform:translateY(-4px);}
/* fixed-height box so the varied icon widths still line the titles up */
.step__icon{
  display:flex;align-items:flex-end;justify-content:center;
  height:clamp(38px,3.4vw,50px);margin-bottom:.9rem;
}
.step__icon img{width:auto;height:100%;object-fit:contain;}
.step__title{font-size:clamp(1.15rem,1rem + .5vw,1.5rem);color:#fff;}
.step__text{font-size:var(--fs-sm);color:rgba(255,255,255,.82);margin-top:.4rem;}

/* ============ 10. TESTIMONIALS ============ */
.quote{
  background: #F8FAF8;
  border:1px solid  #7E957F;
  border-radius:var(--radius);
  padding:clamp(1.1rem,1.8vw,1.6rem);
  height:100%;
}
.quote__name{font-size:var(--fs-h3);}
.quote__text{font-size:var(--fs-sm);margin-top:.9rem;}
.quote__stars{color:var(--gold);letter-spacing:.15em;margin-top:.9rem;}

/* ============ 11. FAQ ============ */
.faq__layout{
  display:grid;
  grid-template-columns:1fr minmax(280px,340px);
  gap:clamp(1.25rem,2.6vw,2.5rem);
  align-items:start;
}
.faq__list{display:grid;gap:.75rem;}
.acc{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:box-shadow var(--transition);
}
.acc[open]{box-shadow:var(--shadow-sm);}
.acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(.9rem,1.5vw,1.15rem) clamp(1rem,1.8vw,1.35rem);
  /* the question is the item's heading, so it takes the heading face */
  font-family:var(--font-head);
  font-size:var(--fs-body);font-weight:500;color:var(--ink);
  cursor:pointer;list-style:none;
}
.acc summary::-webkit-details-marker{display:none;}
.acc__mark{
  position:relative;flex:none;
  width:24px;height:24px;border-radius:50%;
  background:var(--green-700);
  transition:transform var(--transition);
}
.acc__mark::before,.acc__mark::after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  background:#fff;
}
.acc__mark::before{width:10px;height:1.5px;}
.acc__mark::after{width:1.5px;height:10px;transition:opacity var(--transition);}
.acc[open] .acc__mark{transform:rotate(180deg);}
.acc[open] .acc__mark::after{opacity:0;}
.acc__body{
  padding:0 clamp(1rem,1.8vw,1.35rem) clamp(1rem,1.6vw,1.25rem);
  font-size:var(--fs-sm);
}

/* one card: the photo fills it, the copy sits on a green wash across the top */
.faq__aside{
  position:relative;isolation:isolate;
  border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:317/480;
  color:#fff;
  box-shadow:var(--shadow-md);
}
.faq__aside-media{position:absolute;inset:0;z-index:-2;}
.faq__aside-media img{width:100%;height:100%;object-fit:cover;object-position:center bottom;}
.faq__aside::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    var(--green-800) 0%,
    rgba(27,50,24,.92) 34%,
    rgba(27,50,24,.55) 48%,
    rgba(27,50,24,0) 62%);
}
.faq__aside-top{
  padding:clamp(1.5rem,2.6vw,2rem) clamp(1.25rem,2.2vw,1.75rem);
}
.faq__aside-top h3{
  font-size:clamp(1.35rem,1.05rem + .95vw,1.85rem);
  color:#fff;line-height:1.15;
}
.faq__aside-top p{
  font-size:var(--fs-sm);color:rgba(255,255,255,.82);
  margin:.55rem 0 clamp(1.1rem,2vw,1.5rem);
}
.faq__aside-btn{width:100%;padding-inline:1rem;gap:.65rem;}
.btn__icon--img{width:1.6em;height:1.6em;}
.btn__icon--img img{width:100%;height:100%;object-fit:contain;}

/* ============ 12. BOOKING ============ */
.booking__layout{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(1rem,2vw,1.75rem);
  align-items:stretch;
}
.booking__media{border-radius:var(--radius);overflow:hidden;min-height:320px;}
.booking__media img{width:100%;height:100%;object-fit:cover;}
.booking__panel{
  background:var(--green-700);color:#fff;
  border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,3rem);
  display:flex;flex-direction:column;justify-content:center;
}
.booking__title{
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.5rem);
  color:#fff;max-width:14ch;
}

.form{display:grid;gap:.75rem;margin-top:clamp(1.25rem,2.4vw,2rem);}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.form input,.form select,.form textarea{
  width:100%;
  padding:.85em 1em;
  border:1px solid rgba(255,255,255,.35);
  border-radius:6px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:var(--fs-sm);
  font-weight:300;
  transition:border-color var(--transition),background var(--transition);
}
.form textarea{resize:vertical;min-height:96px;}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.7);}
.form select{
  appearance:none;
  color:rgba(255,255,255,.7);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:18px;
  padding-right:2.4rem;
}
.form select option{color:var(--ink);}
.form input:focus,.form select:focus,.form textarea:focus{
  border-color:#fff;background:rgba(255,255,255,.16);outline:none;
}
.form .btn{justify-self:start;margin-top:.4rem;}

/* ============ 13. FOOTER ============ */
.footer{background:var(--green-800);color:rgba(255,255,255,.78);padding-top:clamp(2.5rem,5vw,4rem);}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;
  gap:clamp(1.5rem,3vw,2.5rem);
  padding-bottom:clamp(2rem,4vw,3rem);
}
.footer__brand p{font-size:var(--fs-sm);max-width:26ch;margin-top:1rem;}
.footer__col h3{font-size:var(--fs-h3);color:#fff;margin-bottom:1rem;}
.footer__list li + li{margin-top:.5rem;}
.footer__list a,.footer__addr{font-size:var(--fs-sm);}
.footer__list a:hover{color:#fff;}
.footer__addr{margin-bottom:1rem;}
.footer__hours li{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);}
.footer__hours li + li{margin-top:.5rem;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;}

.socials{display:flex;gap:.5rem;margin-top:1.25rem;}
.socials a{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  transition:background var(--transition),color var(--transition);
}
.socials svg{width:14px;fill:currentColor;}
.socials a:hover{background:#fff;color:var(--green-800);}

.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-block:1.1rem;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.75rem;
}
.footer__legal{display:flex;gap:1.25rem;}
.footer__legal a:hover{color:#fff;}

/* ============ 14. FLOATING BUTTONS ============ */
.floaters{
  position:fixed;right:clamp(.75rem,1.5vw,1.25rem);bottom:clamp(1rem,3vw,2rem);
  z-index:70;display:grid;gap:.6rem;
}
.floater{
  display:grid;place-items:center;
  width:clamp(40px,3.4vw,46px);aspect-ratio:1;border-radius:50%;
  color:#fff;box-shadow:var(--shadow-md);
  transition:transform var(--transition);
}
.floater:hover{transform:scale(1.08);}
.floater svg{width:52%;fill:currentColor;}
.floater--call{background:var(--green-700);}
.floater--wa{background:#25D366;}

.form__error{
  font-size:var(--fs-sm);
  color:#FFD9D2;
  margin-top:.85rem;
}
.form__error[hidden]{display:none;}
.form .btn[disabled]{opacity:.6;pointer-events:none;}

/* ============ 15. BOOKING SUCCESS MODAL ============ */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.25rem;}
.modal[hidden]{display:none;}
.modal__backdrop{position:absolute;inset:0;background:rgba(11,32,17,.55);}
.modal__panel{
  position:relative;
  width:min(440px,100%);
  background:#fff;
  border-radius:var(--radius);
  padding:clamp(1.75rem,4vw,2.5rem);
  text-align:center;
  box-shadow:0 24px 60px rgba(11,32,17,.28);
}
.modal__close{
  position:absolute;top:.5rem;right:.75rem;
  font-size:1.6rem;line-height:1;color:var(--muted);
  background:none;border:0;padding:.25rem;
}
.modal__close:hover{color:var(--green-800);}
.modal__icon{
  display:grid;place-items:center;
  width:56px;height:56px;margin:0 auto 1rem;
  border-radius:50%;background:var(--green-800);color:#fff;
}
.modal__icon svg{width:28px;height:28px;}
.modal__title{font-family:var(--font-head);font-size:var(--fs-h2);color:var(--green-800);}
.modal__text{font-size:var(--fs-sm);margin:.6rem 0 1.5rem;}

/* ============ 16. RESPONSIVE ============ */

/* ---- ≤1200px : laptops ---- */
@media (max-width:1200px){
  /* the headline needs more room here or it breaks onto a third line */
  .hero__content{max-width:75%;}
  .cards{grid-template-columns:repeat(3,1fr);}
  .carousel__btn--prev{left:0;}
  .carousel__btn--next{right:0;}
}

/* ---- ≤992px : tablets ---- */
@media (max-width:992px){
  .header__divider{display:none;}
  .contact-chip__text{display:none;}

  .hero__content{max-width:100%;}
  .hero::before{
    background:linear-gradient(180deg,rgba(240,236,224,.94) 0%,rgba(240,236,224,.82) 55%,rgba(240,236,224,.6) 100%);
  }
  .hero__text{max-width:46ch;}

  .trustbar__inner{grid-template-columns:repeat(2,1fr);gap:.75rem 0;}
  .trust:nth-child(3){border-left:0;}
  .trust:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:.75rem;}

  .why__grid{grid-template-columns:repeat(2,1fr);}
  .steps__grid{grid-template-columns:repeat(2,1fr);}

  .carousel__track{grid-auto-columns:calc((100% - var(--gap)) / 2);}

  .faq__layout{grid-template-columns:1fr;}
  .faq__aside{max-width:340px;margin-inline:auto;width:100%;}

  .booking__layout{grid-template-columns:1fr;}
  .booking__media{aspect-ratio:16/9;min-height:0;}

  .footer__grid{grid-template-columns:repeat(2,1fr);}
}

/* ---- ≤768px : large phones ---- */
@media (max-width:768px){
  /* the burger and the contact panel it opened are hidden on phones — the
     floating call/WhatsApp buttons cover the same actions there */
  .nav-toggle{display:none;}
  .header__actions{display:none;}
  .header__inner{flex-wrap:wrap;row-gap:0;}
  /* the panel animates open via max-height/opacity instead of display:none,
     so the sticky header grows smoothly instead of snapping */
  .header__actions{
    order:3;width:100%;
    flex-direction:column;align-items:stretch;
    gap:.85rem;
    overflow:hidden;
    max-height:0;opacity:0;visibility:hidden;
    padding-block:0;
    border-top:1px solid transparent;
    transition:max-height .35s ease,opacity .25s ease,padding .35s ease,visibility 0s linear .35s;
  }
  .header__actions.is-open{
    max-height:22rem;opacity:1;visibility:visible;
    padding-block:1rem 1.25rem;
    border-top-color:var(--line);
    transition:max-height .35s ease,opacity .25s ease .05s,padding .35s ease,visibility 0s;
  }
  .contact-chip__text{display:flex;}
  .header__actions .btn{width:100%;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .cards{grid-template-columns:repeat(2,1fr);}
  .hero__inner{min-height:0;padding-block:2.5rem 5.5rem;}
  .hero__media img{object-position:65% center;}

  .form__row{grid-template-columns:1fr;}
  .form .btn{justify-self:stretch;}

  .footer__bottom{justify-content:center;text-align:center;}
}

/* ---- ≤576px : small phones ---- */
@media (max-width:576px){
  :root{--gap:.75rem;}

  .cards{grid-template-columns:1fr;}
  .why__grid{grid-template-columns:1fr;}
  .steps__grid{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr;}

  .carousel__track{grid-auto-columns:100%;}
  /* arrows drop below the track on phones; the padding reserves their room
     plus a gap so they never crowd the following section */
  .carousel{padding-inline:0;padding-bottom:4.25rem;}
  .carousel__btn{top:auto;bottom:1.5rem;translate:0 0;}
  .carousel__btn--prev{left:calc(50% - 46px);}
  .carousel__btn--next{right:calc(50% - 46px);}

  .trustbar{position:static;background:var(--green-700);}
  .hero__inner{padding-block:2.25rem;}

  .footer__legal{justify-content:center;}
  .booking__title{max-width:none;}
}

/* ---- motion preferences ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
  .carousel__track{scroll-behavior:auto;}
}