/* ============================================================
   Ayushya Arogya — design system
   Brand: #17543E deep green · #D6A944 gold · #F2F2F2 ground
   Type:  Caudex (headings) · Raleway (body)
   ============================================================ */

:root{
  color-scheme: light;

  /* The original declares "Caudex", Sans-serif but serves the Caudex webfont from
     a bare-IP host that doesn't answer, so its headings fall back to the system
     sans — which is what the reference screenshot shows. This matches that.
     To use real Caudex instead, swap the two lines below. */
  --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* --font-heading: "Caudex", "Iowan Old Style", Georgia, serif; */
  --font-body: "Raleway", "Helvetica Neue", Arial, sans-serif;

  /* Brand */
  --green:        #17543E;
  --green-deep:   #0E3728;
  --green-mid:    #2A6E53;
  --green-wash:   #E6EDE9;
  --green-tint:   #F0F4F1;

  --gold:         #D6A944;
  --gold-deep:    #B98D2C;
  --gold-wash:    #F6EEDC;

  --whatsapp:     #25D366;

  /* Neutrals — biased a few degrees toward the green ground */
  --bg:           #F2F2F2;
  --bg-alt:       #EAEEEA;
  --surface:      #FFFFFF;
  /* translucent, so a tile picks up whatever section ground sits behind it
     instead of reading as a hard white box */
  --surface-soft: rgba(255,255,255,.66);
  --line-faint:   rgba(23,84,62,.08);
  --ink:          #2C3531;
  --body:         #555F5B;
  --muted:        #7C8783;
  --line:         #DFE3DF;
  --line-soft:    #ECEEEB;

  /* Type scale */
  /* original: section H2 50px, card H3 21px, eyebrow 24px, stat 38px */
  --f-h1:      clamp(34px, 3.9vw, 50px);
  --f-h2:      clamp(32px, 3.9vw, 50px);
  --f-h3:      21px;
  --f-eyebrow: clamp(19px, 1.7vw, 24px);
  --f-stat:    clamp(30px, 3vw, 38px);
  --f-body:    1rem;
  --f-sm:      .9rem;
  --f-xs:      .78rem;

  /* Space */
  --u: 4px;
  --hdr-h: 105px;
  --gutter: clamp(20px, 5vw, 56px);
  --sec-y: clamp(56px, 8vw, 104px);
  --wrap: 1180px;

  /* Shape */
  --r: 5px;          /* brand token, kept for small chips and inputs */
  --r-card: 16px;     /* cards, so they sit with the framed media and pills */
  --r-lg: 14px;
  --r-pill: 57px;
  --shadow-sm: 0 5px 15px -5px rgba(0,0,0,.11);
  --shadow-card: 0 10px 30px -20px rgba(23,84,62,.22);
  --shadow-md: 0 18px 40px -22px rgba(23,84,62,.38);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

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

body{
  margin:0;
  /* the off-canvas menu sits past the right edge when closed; `clip` (not `hidden`)
     stops that widening the page without breaking the sticky header */
  overflow-x:clip;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-body);
  font-size:var(--f-body);
  line-height:1.6;
  letter-spacing:.4px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-heading);
  color:var(--green);
  font-weight:700;
  line-height:1.18;
  text-wrap:balance;
  margin:0;
}
p{ margin:0; }
a{ color:var(--gold-deep); text-decoration:none; }
a:hover{ color:var(--green); }
img{ max-width:100%; height:auto; display:block; }

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- Very large screens -----------------------------------------
   The original Elementor container was a fixed 1180px, so on a 1920 or 2560
   monitor the page sat in a narrow strip with a wide empty margin. Below
   1600px nothing changes and the layout still matches the original exactly;
   above it the container and the headline are allowed to grow a little so
   the page fills the screen it is on.
   To go back to the original behaviour at every width, delete this block. */
@media (min-width:1600px){
  :root{
    --wrap: 1320px;
    --f-h1: clamp(34px, 3.4vw, 56px);
    --f-h2: clamp(32px, 3.4vw, 56px);
  }
}
@media (min-width:2100px){
  :root{
    --wrap: 1480px;
    --sec-y: clamp(72px, 6vw, 128px);
  }
}

.skip{
  position:absolute; left:0; top:-64px; z-index:200;
  background:var(--green); color:#fff; padding:10px 18px; border-radius:0 0 var(--r) 0;
  transition:top .2s ease;
}
.skip:focus{ top:0; color:#fff; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:"Raleway",sans-serif; font-size:var(--f-sm); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  padding:13px 30px; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  text-align:center;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--green); color:#fff; font-size:1rem; text-transform:none;
  letter-spacing:normal; font-weight:500; padding:17px 40px; }
.btn--primary:hover{ background:var(--green-deep); color:#fff; }
.btn--secondary{ background:var(--gold); color:#fff; border-radius:30px; }
.btn--secondary:hover{ background:var(--gold-deep); color:#fff; }
.btn--outline{
  background:transparent; color:var(--gold); border-color:var(--gold); border-width:2px;
  text-transform:none; letter-spacing:normal; font-weight:500; font-size:1rem;
  padding:18px 42px; border-radius:50px; text-decoration:underline;
  text-underline-offset:3px;
}
.btn--outline:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.btn--ghost{ background:transparent; color:var(--green); border-color:var(--green); }
.btn--ghost:hover{ background:var(--green); color:#fff; }
.btn--wide{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  /* transparent so the hero's gradient runs up behind it, as on the original */
  background:transparent;
  transition:background .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck{
  background:rgba(242,242,242,.94);
  backdrop-filter:saturate(1.15) blur(8px);
  box-shadow:0 2px 22px -14px rgba(14,55,40,.55);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,2vw,32px);
  padding-block:10px;
}
.brand{ display:flex; align-items:center; padding:5px 0 5px 0; }
.brand img{ max-width:225px; max-height:85px; width:auto; height:auto; }

.nav{ display:flex; align-items:center; gap:clamp(20px,3.6vw,60px); }
.nav a{
  font-family:var(--font-body);
  font-size:1rem; font-weight:500;
  color:var(--green); padding:22px 0;
  white-space:nowrap;            /* "Book an Appointment" must not fold in two */
  transition:color .2s ease;
}

/* The full bar needs about 930px. Between that and 1180 the gap has to give
   way, or the items wrap and the header looks broken — which is what browser
   zoom on a laptop lands you in. */
@media (max-width:1180px){ .nav{ gap:clamp(16px,2.1vw,30px); } }
@media (max-width:1040px){ .nav{ gap:16px; }
  .nav a{ font-size:.95rem; }
  .header-cta .btn{ padding:14px 26px; }
}
.nav a:hover{ color:var(--gold); }
.nav a[aria-current="page"]{ color:var(--gold); }
.nav .btn[aria-current="page"]{ color:#fff; }

.header-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none; background:none; border:0; padding:9px; cursor:pointer;
  color:var(--green); min-width:44px; min-height:44px;
}
.nav-toggle svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }

@media (max-width:960px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,86vw);
    background:#fff; flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:4px; padding:96px 28px 40px; box-shadow:-20px 0 50px -30px rgba(0,0,0,.5);
    z-index:70;
    /* wiped in from the right. clip-path rather than translateX so the closed
       panel never sits outside the viewport and widen the page sideways */
    clip-path:inset(0 0 0 100%);
    visibility:hidden;
    transition:clip-path .3s ease, visibility 0s linear .3s;
  }
  .nav[data-open="true"]{
    clip-path:inset(0 0 0 0);
    visibility:visible;
    transition:clip-path .3s ease, visibility 0s;
  }
  .nav a, .nav .btn{
    opacity:0; translate:18px 0;
    transition:opacity .3s ease .08s, translate .3s ease .08s;
  }
  .nav[data-open="true"] a, .nav[data-open="true"] .btn{ opacity:1; translate:0 0; }
  .nav a{ font-size:1.05rem; padding:12px 0; width:100%; border-bottom:1px solid var(--line-soft); }
  .nav-toggle{ display:block; z-index:80; }
}

/* The Contact button stays in the bar once the links move into the drawer.
   Without it the header collapses to a logo and a thin burger and reads as
   empty — the state you land in at 150% zoom on a 1440 screen. */
.nav .btn{ display:none; }
@media (max-width:960px){
  .header-cta .btn{ font-size:.95rem; padding:13px 24px; }
}
@media (max-width:540px){
  /* below this only the logo and the burger fit, so Contact moves inside */
  .header-cta .btn{ display:none; }
  .nav .btn{ display:inline-flex; margin-top:18px; }
}

.nav-scrim{
  position:fixed; inset:0; background:rgba(14,55,40,.45); z-index:65;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.nav-scrim[data-open="true"]{ opacity:1; pointer-events:auto; }

/* ---------- Wave section dividers (Elementor "waves" shape) ---------- */
.wave-divider{
  position:absolute; left:0; right:0; bottom:-1px; z-index:2;
  height:clamp(58px,7.5vw,132px); line-height:0; pointer-events:none;
}
.wave-divider--tall{ height:clamp(72px,9vw,164px); }
.wave-divider--short{ height:clamp(46px,6vw,104px);
}
.wave-divider svg{ width:100%; height:100%; display:block; }
.wave-divider--flip svg{ transform:scaleX(-1); }

/* ---------- Section furniture ---------- */
.section{ position:relative; padding-block:var(--sec-y); }
.section:has(> .wave-divider),
.section:has(> .wrap + .wave-divider){ padding-bottom:calc(var(--sec-y) + clamp(34px,4.5vw,74px)); }
.section--alt{ background:var(--bg-alt); }
.section--tint{ background:var(--green-tint); }
.section--white{ background:var(--surface); }

.eyebrow{
  display:block;
  font-family:var(--font-heading);
  font-size:var(--f-eyebrow); font-weight:400; letter-spacing:.5px;
  color:var(--gold); margin-bottom:10px;
}
.section-head{ max-width:62ch; margin-bottom:clamp(32px,4vw,52px); }
.gold-leaf{ width:clamp(48px,4.4vw,64px); height:auto; margin-bottom:12px; }
.shloka .gold-leaf{ margin-inline:auto; position:relative; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.section-title{ font-size:var(--f-h2); font-weight:600; line-height:1; margin-bottom:20px; }
.lead{ font-size:1rem; line-height:1.6; letter-spacing:.4px; }

/* ---------- Hero (home) ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  /* the original's hero gradient, verbatim */
  background:linear-gradient(20deg,#D4E9DF 15%,#F2F2F2 60%);
  margin-top:calc(-1 * var(--hdr-h));
  padding-block:calc(var(--hdr-h) + clamp(24px,4vw,70px)) clamp(150px,18vw,270px);
}

/* Decorative background: outline monstera leaves, soft wave, gold dots */
.leaf{
  position:absolute; z-index:-1; pointer-events:none; user-select:none;
  opacity:.13; width:clamp(180px,22vw,330px); height:auto;
}
.leaf--tr{ top:-32px; right:-72px; rotate:12deg; }
.leaf--bl{ left:-104px; bottom:18%; transform:scaleX(-1) rotate(14deg); }
@media (max-width:760px){
  .leaf--tr{ width:170px; right:-58px; }
  .leaf--bl{ display:none; }
}

.hero__wave{
  position:absolute; left:0; right:0; bottom:0; z-index:-1;
  width:180%; left:50%; right:auto; translate:-50% 0;
  height:clamp(120px,20vw,260px); display:block;
}

.hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.16fr .84fr; gap:clamp(28px,4vw,56px); align-items:center;
}
.hero__dots{
  position:absolute; inset:0; display:block;
  pointer-events:none;
}
.hero__dots i{
  position:absolute; border-radius:50%; background:var(--gold);
  translate:-50% -50%;
}
@media (max-width:560px){ .hero__dots{ display:none; } }
.hero__title{ margin:0 0 28px; display:grid; gap:14px; }
.hero__title-a,
.hero__title-b{ display:block; font-weight:600; line-height:1; }
@media (min-width:861px){ .hero__title-a,.hero__title-b{ white-space:nowrap; } }
.hero__title-a{ font-size:clamp(2rem,4.2vw,74px); color:var(--gold); }
.hero__title-b{ font-size:clamp(2rem,2.9vw,50px); color:var(--green); }
.hero__lead{
  font-size:1rem; line-height:1.6; letter-spacing:.4px;
  color:var(--body); max-width:46ch; margin-bottom:34px;
}

.hero__art{
  position:relative; display:grid; place-items:center;
  /* the original's hero shape — blobs and gold dots, centred and contained */
  background:url("../img/hero-shape.png") center center / contain no-repeat;
  padding-block:clamp(24px,4vw,64px);
}
.hero__art img{ position:relative; width:min(76%,470px); height:auto; }

@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art img{ width:min(62%,290px); }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  background:linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%);
  color:#D6E2DB; padding-block:clamp(44px,6vw,76px);
  position:relative; overflow:hidden; isolation:isolate;
}
.page-hero::after{
  content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px;
  border-radius:50%; border:2px solid rgba(214,169,68,.35);
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero .leaf{
  filter:brightness(0) invert(1); opacity:.09;
  width:clamp(190px,20vw,300px);
}
.page-hero .leaf--tr{ top:-26px; right:6%; }
.page-hero .leaf--bl{ left:-90px; bottom:-70px; }
.page-hero h1{ color:#fff; font-size:var(--f-h1); font-weight:600; line-height:1.1; margin-bottom:14px; }
.page-hero p{ max-width:60ch; }
.crumbs{ font-size:var(--f-xs); letter-spacing:.12em; text-transform:uppercase; color:rgba(214,169,68,.95); margin-bottom:16px; }
.crumbs a{ color:rgba(214,226,219,.85); display:inline-block; padding-block:6px; }
.crumbs a:hover{ color:#fff; }

/* ---------- Generic grids ---------- */
.grid{ display:grid; gap:clamp(18px,2.4vw,28px); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (min-width:901px){
  /* a lone card on the final row centres instead of hanging off the left */
  .grid--3 > :last-child:nth-child(3n+1){ grid-column:2; }
}
@media (max-width:760px){ .grid--2{ grid-template-columns:1fr; } }
@media (max-width:900px){ .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .grid--3{ grid-template-columns:1fr; } }

/* ---------- Service cards ---------- */
.service{
  background:var(--surface-soft); border:1px solid var(--line-faint);
  border-radius:var(--r-card); padding:32px 30px 34px;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.service:hover{ border-color:rgba(214,169,68,.55); box-shadow:0 20px 44px -24px rgba(23,84,62,.42); transform:translateY(-3px); }

/* A service card holds exactly one link, so the whole card is the target
   rather than the 23px-tall title. The <a> keeps the accessible name. */
.service{ position:relative; }
.service h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.service h3 a:focus-visible{ outline:none; }
.service:has(h3 a:focus-visible){ outline:3px solid var(--gold); outline-offset:3px; }
.service__mark{
  display:block; color:var(--gold); flex:none;
  height:48px; margin-bottom:4px;
  transition:transform .2s ease;
}
.service:hover .service__mark{ transform:translateY(-2px); }

/* Font Awesome glyphs, solid gold fill — the original site's icon set */
.ico{ height:100%; width:auto; max-height:48px; fill:currentColor; display:block; }
.ico--img{ height:48px; width:auto; display:block; }
.service h3 a{ color:inherit; }
.service h3 a:hover{ color:var(--gold-deep); }
.service h3{ font-size:var(--f-h3); font-weight:600; line-height:1.25; padding-top:7px;
  text-transform:uppercase; }
.service p{ font-size:1rem; line-height:1.6; }

/* ---------- Offer list (About) ---------- */
.offers{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.offers li{
  display:flex; align-items:flex-start; gap:14px;
  padding:15px 0; border-bottom:1px solid var(--line);
  font-weight:600; color:var(--ink);
}
.offers li::before{
  content:""; flex:none; width:9px; height:9px; margin-top:9px;
  background:var(--gold); transform:rotate(45deg);
}
@media (min-width:760px){ .offers{ grid-template-columns:1fr 1fr; column-gap:44px; } }
.offers--single{ grid-template-columns:1fr !important; }

/* ---------- Practice pages: glyph panel used where no photograph exists ---------- */
.practice-mark{
  display:grid; place-items:center;
  aspect-ratio:4 / 3;
  border-radius:var(--r-lg);
  border:1px solid var(--line-faint);
  background:
    radial-gradient(120% 120% at 22% 18%, rgba(214,169,68,.16) 0%, rgba(214,169,68,0) 58%),
    linear-gradient(150deg, #E4F0EA 0%, #F7F4EC 100%);
  box-shadow:var(--shadow-md);
  color:var(--gold);
  overflow:hidden;
}
.ico--xl{ height:auto; width:clamp(92px,14vw,150px); max-height:none; }
@media (max-width:760px){ .practice-mark{ aspect-ratio:3 / 2; } }

/* ---------- Split media ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.split--narrow-media{ grid-template-columns:.85fr 1.15fr; }
.split--top{ align-items:start; }
@media (min-width:861px){
  .split--top > .framed{ position:sticky; top:104px; }
}
@media (max-width:860px){ .split, .split--narrow-media{ grid-template-columns:1fr; } }
.framed{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.framed img{ width:100%; height:100%; object-fit:cover; }
.framed--wide{ max-width:920px; margin-inline:auto; }
.framed--ring::after{
  content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.5); border-radius:calc(var(--r-lg) - 4px);
  pointer-events:none;
}

/* ---------- Trainer ---------- */
.trainer{ display:grid; grid-template-columns:340px 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
@media (max-width:820px){ .trainer{ grid-template-columns:1fr; } }
.trainer__photo{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.trainer__photo img{ width:100%; aspect-ratio:1; object-fit:cover; }
.trainer__name{ font-size:clamp(24px,2.2vw,30px); font-weight:600; margin-bottom:6px; }
.trainer__role{ color:var(--gold-deep); font-weight:700; font-size:var(--f-sm); letter-spacing:.02em; margin-bottom:4px; }
.trainer__quals{ font-size:var(--f-sm); color:var(--muted); margin-bottom:20px; }
.creds{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.creds li{ display:flex; gap:12px; font-size:var(--f-sm); line-height:1.7; }
.creds li::before{
  content:""; flex:none; width:7px; height:7px; margin-top:9px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 3px var(--green-wash);
}

/* ---------- Shloka ---------- */
.shloka{
  background:var(--green); color:#E8EFEA; border-radius:var(--r-lg);
  padding:clamp(32px,5vw,56px); text-align:center; position:relative; overflow:hidden;
}
.shloka::before{
  content:""; position:absolute; left:50%; top:-120px; translate:-50% 0;
  width:300px; height:300px; border-radius:50%; border:1px solid rgba(214,169,68,.35);
}
.shloka h2{ color:#fff; font-size:var(--f-h2); font-weight:600; line-height:1.1; margin-bottom:18px; }
.shloka__verse{
  font-family:var(--font-heading); font-size:clamp(1rem,.9rem + .5vw,1.25rem); line-height:2.1;
  color:var(--gold); margin-bottom:26px; position:relative;
}
.shloka__note{ max-width:60ch; margin-inline:auto; margin-bottom:28px; color:#CBD9D2; }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,40px); }
.why-media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); margin-top:clamp(32px,4vw,52px); }
.why-media img{ width:100%; height:auto; }
@media (max-width:640px){ .stats{ grid-template-columns:1fr; } }
.stat{ text-align:center; padding:8px 0; }
.stat__num{
  font-family:var(--font-heading); font-size:var(--f-stat); font-weight:600;
  color:var(--green); line-height:1; font-variant-numeric:tabular-nums; margin-bottom:15px;
}
.stat__num span:last-child{ color:var(--gold); }
.stat__label{ font-size:var(--f-sm); letter-spacing:.12em; text-transform:uppercase; margin-top:10px; color:var(--muted); }

.section--white .service,
.section--white .quote,
.section--white .post-card,
.section--white .info-card,
.section--white .notebox,
.section--white .faq__item{ background:var(--green-tint); }

/* ---------- Reviews carousel ---------- */
.carousel{ position:relative; }
.carousel__track{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * clamp(18px,2.4vw,26px)) / 3);
  gap:clamp(18px,2.4vw,26px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none;
  padding-block:6px;                 /* room for the card shadow */
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track:focus-visible{ outline:3px solid var(--gold); outline-offset:6px; border-radius:var(--r-card); }
@media (prefers-reduced-motion: reduce){ .carousel__track{ scroll-behavior:auto; } }
@media (max-width:980px){
  .carousel__track{ grid-auto-columns:calc((100% - clamp(18px,2.4vw,26px)) / 2); }
}
@media (max-width:640px){
  .carousel__track{ grid-auto-columns:88%; }
}

.carousel__nav{ display:flex; justify-content:center; gap:14px; margin-top:26px; }
.carousel__btn{
  width:48px; height:48px; border-radius:50%;
  border:1.5px solid var(--gold); background:transparent; color:var(--gold);
  display:grid; place-items:center; cursor:pointer;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.carousel__btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.carousel__btn:hover:not(:disabled){ background:var(--gold); color:#fff; }
.carousel__btn:disabled{ opacity:.3; cursor:default; }
.carousel__btn--play .ico-play{ display:none; }
.carousel__btn--play .ico-play path{ fill:currentColor; stroke:none; }
.carousel__btn--play[aria-pressed="true"] .ico-pause{ display:none; }
.carousel__btn--play[aria-pressed="true"] .ico-play{ display:block; }

.quote{
  scroll-snap-align:start;
  margin:0; background:var(--surface-soft); border:1px solid var(--line-faint);
  border-radius:var(--r-card); padding:30px 28px 26px;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:16px;
}
.quote blockquote{ margin:0; flex:1; }
.quote blockquote::before{
  content:"\201C"; display:block; font-family:var(--font-heading);
  font-size:3rem; line-height:.7; color:var(--gold); margin-bottom:10px;
}
.quote blockquote p{ font-size:.97rem; line-height:1.65; }
.quote figcaption{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px;
  padding-top:14px; border-top:1px solid var(--line-soft);
}
.quote__who{ font-weight:700; color:var(--green); font-size:.95rem; }
.quote__badge{
  font-size:var(--f-xs); color:var(--gold-deep);
  background:var(--gold-wash); padding:3px 10px; border-radius:var(--r-pill);
}

/* ---------- Blog cards ---------- */
.post-card{
  background:var(--surface-soft); border:1px solid var(--line-faint); border-radius:var(--r-card);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-card);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.post-card:hover{ box-shadow:0 20px 44px -24px rgba(23,84,62,.42); transform:translateY(-3px); border-color:rgba(214,169,68,.5); }
.post-card__media{ aspect-ratio:16/10; background:var(--green-wash); overflow:hidden; }
.post-card__media img{ width:100%; height:100%; object-fit:cover; }
.post-card__body{ padding:24px 24px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card__date{ font-size:var(--f-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.post-card h3{ font-size:var(--f-h3); font-weight:600; line-height:1.3; }
.post-card h3 a{ color:var(--green); }
.post-card h3 a:hover{ color:var(--gold-deep); }

/* Whole card is the target, not the 23px line of title text */
.post-card{ position:relative; }
.post-card h3 a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.post-card h3 a:focus-visible{ outline:none; }
.post-card:has(h3 a:focus-visible){ outline:3px solid var(--gold); outline-offset:3px; }
.post-card .readmore{ position:relative; z-index:1; }
.post-card p{ font-size:var(--f-sm); flex:1; }
.readmore{
  font-size:var(--f-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  min-height:44px;          /* the text is 20px tall; the target should not be */
}
.readmore::after{ content:"→"; transition:translate .2s ease; }
.readmore:hover::after{ translate:4px 0; }


/* ---------- Touch devices ----------------------------------------------
   On a touch screen :hover latches after a tap and the card stays lifted
   until you tap elsewhere. Movement is for pointers; colour changes are
   harmless either way. */
@media (hover: none){
  .btn:hover,
  .wa-float:hover,
  .service:hover,
  .post-card:hover{ transform:none; }
  .service:hover .service__mark{ transform:none; }
  .service:hover{ box-shadow:var(--shadow-card); border-color:var(--line-faint); }
  .post-card:hover{ box-shadow:var(--shadow-card); }
  .readmore:hover::after{ translate:0 0; }
}

/* Active feedback instead, so a tap still registers visibly */
@media (hover: none){
  .btn:active{ transform:scale(.98); }
  .service:active, .post-card:active{ border-color:rgba(214,169,68,.55); }
}

/* ---------- Article ---------- */
.article{ max-width:72ch; margin-inline:auto; }
.article > * + *{ margin-top:1.25em; }
.article h2{ font-size:1.5rem; margin-top:1.9em; }
.article h3{ font-size:1.15rem; margin-top:1.6em; color:var(--ink); }
.article p{ line-height:1.85; }
.article ul{ padding-left:0; list-style:none; display:grid; gap:12px; }
.article ul li{ display:flex; gap:12px; }
.article ul li::before{
  content:""; flex:none; width:7px; height:7px; margin-top:10px; border-radius:50%;
  background:var(--gold);
}
.article strong{ color:var(--green); }
.article__figure{ margin-block:2em; }
.article__figure img{ width:100%; border-radius:var(--r-lg); }
.article__figure figcaption{ font-size:var(--f-xs); color:var(--muted); margin-top:10px; text-align:center; }
.article__meta{
  display:flex; flex-wrap:wrap; gap:8px 18px; font-size:var(--f-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:34px;
}
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2.5em; }
.tag{
  font-size:var(--f-xs); background:var(--green-wash); color:var(--green);
  padding:6px 14px; border-radius:var(--r-pill);
}
.callout{
  background:var(--gold-wash); border-left:3px solid var(--gold);
  padding:22px 26px; border-radius:0 var(--r) var(--r) 0;
}
.callout p{ margin:0; }

.faq{ max-width:820px; margin-inline:auto; display:grid; gap:12px; }
.faq__item{
  background:var(--surface-soft); border:1px solid var(--line-faint); border-radius:var(--r-card);
  padding:22px 26px; box-shadow:var(--shadow-card);
}
.faq__item summary{
  cursor:pointer; list-style:none; font-weight:600; color:var(--green);
  font-size:1.02rem; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; font-size:1.4rem; line-height:1; color:var(--gold); flex:none;
  transition:transform .2s ease;
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item p{ margin-top:12px; font-size:1rem; line-height:1.6; }

/* ---------- Info cards (contact) ---------- */
.info-card{
  background:var(--surface-soft); border:1px solid var(--line-faint); border-radius:var(--r-card);
  padding:32px 28px; display:flex; flex-direction:column; gap:10px;
  box-shadow:var(--shadow-card);
}
.info-card__icon{
  width:44px; height:44px; border-radius:50%; background:var(--green-wash);
  display:grid; place-items:center; color:var(--green);
}
.info-card__icon{ color:var(--gold); background:var(--gold-wash); }
.info-card__icon .ico{ height:20px; max-height:20px; }
.info-card h3{ font-size:1.05rem; }
.info-card .muted{ margin-top:auto; padding-top:6px; }
.info-card a{ color:var(--body); font-weight:600; }
.info-card a:hover{ color:var(--green); }

/* ---------- Forms ---------- */
.form-panel{
  background:var(--surface); border-radius:var(--r-lg); padding:clamp(26px,4vw,44px);
  box-shadow:var(--shadow-sm); border:1px solid var(--line-soft);
}
.form-grid{ display:grid; gap:18px 20px; grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1 / -1; }
.field label, .fieldset legend{
  font-size:var(--f-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green);
}
.field .req{ color:var(--gold-deep); }
input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="time"],select,textarea{
  font-family:"Raleway",sans-serif; font-size:var(--f-body); color:#000;
  background:#EAEAEA; border:1.5px solid transparent; border-radius:30px;
  padding:13px 20px; box-shadow:var(--shadow-sm); width:100%;
  transition:border-color .18s ease, background .18s ease;
}
textarea{ border-radius:18px; min-height:130px; resize:vertical; line-height:1.7; }
input:focus,select:focus,textarea:focus{ background:#fff; border-color:var(--green); outline:none; }
input::placeholder,textarea::placeholder{ color:#8A908D; }
select{ appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2317543E' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:22px; padding-right:46px; }

.fieldset{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:9px 18px; border-radius:var(--r-pill);
  border:1.5px solid var(--line); background:#fff; font-size:var(--f-sm); font-weight:600;
  cursor:pointer; transition:.18s ease; color:var(--body);
}
.chip input:checked + span{ background:var(--green); border-color:var(--green); color:#fff; }
.chip input:focus-visible + span{ outline:3px solid var(--gold); outline-offset:2px; }

.form-note{ font-size:var(--f-xs); color:var(--muted); margin-top:16px; line-height:1.7; }
.form-error{
  display:none; background:#FBEAEA; color:#8E2C2C; border-radius:var(--r);
  padding:12px 16px; font-size:var(--f-sm); margin-bottom:18px;
}
.form-error[data-show="true"]{ display:block; }

/* ---------- Terms / notes ---------- */
.notebox{
  background:var(--surface-soft); border:1px solid var(--line-faint); border-radius:var(--r-card);
  padding:28px 30px; box-shadow:var(--shadow-card);
}
.notebox h3{ font-size:1.05rem; margin-bottom:14px; }
.notebox ol{ margin:0; padding-left:20px; display:grid; gap:10px; font-size:var(--f-sm); }
.notebox li::marker{ color:var(--gold-deep); font-weight:700; }

.timings{ display:grid; gap:14px; }
.timing{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.timing:last-child{ border-bottom:0; }
.timing__place{ font-weight:700; color:var(--green); }
.timing__when{ font-variant-numeric:tabular-nums; }

/* ---------- Newsletter ---------- */
.newsletter{
  background:var(--green-deep); color:#CBD9D2; border-radius:var(--r-lg);
  padding:clamp(30px,4vw,50px); display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,48px); align-items:center;
}
@media (max-width:760px){ .newsletter{ grid-template-columns:1fr; } }
.newsletter h2{ color:#fff; font-size:clamp(30px,3.1vw,40px); font-weight:600; line-height:1.1; margin-bottom:12px; }
.newsletter form{ display:flex; gap:12px; flex-wrap:wrap; }
.newsletter input{ flex:1 1 220px; box-shadow:none; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--green-deep); color:#B9C8C1; padding-block:clamp(48px,6vw,72px) 0; }
.site-footer h3{ color:#fff; font-size:1rem; letter-spacing:.04em; margin-bottom:18px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:clamp(28px,5vw,60px);
  padding-bottom:44px;
}
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer a{ color:#B9C8C1; }
.site-footer a:hover{ color:var(--gold); }
.footer-logo{ display:inline-block; margin-bottom:20px; }
.footer-logo img{ max-width:230px; height:auto; }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:2px; font-size:var(--f-sm); }
.footer-links a{ display:inline-block; padding-block:10px; }
.footer-contact{ display:grid; gap:10px; font-size:var(--f-sm); }
.footer-contact a{ display:inline-block; padding-block:11px; }   /* phone and email: full 44px target */
.footer-contact div{ display:flex; gap:12px; align-items:flex-start; }
.footer-contact svg{ width:17px; height:17px; fill:var(--gold); flex:none; margin-top:4px; }
.social{ display:flex; gap:12px; margin-top:22px; }
.social a{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(185,200,193,.35);
  display:grid; place-items:center; color:#B9C8C1;
}
.social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--green-deep); }
.social svg{ width:16px; height:16px; fill:currentColor; }
.footer-bottom{
  border-top:1px solid rgba(185,200,193,.2); padding-block:22px;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:var(--f-xs);
}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--whatsapp); color:#fff; padding:12px 18px 12px 14px;
  border-radius:var(--r-pill); box-shadow:0 12px 28px -10px rgba(0,0,0,.45);
  font-size:var(--f-sm); font-weight:700;
}
.wa-float:hover{ color:#fff; transform:translateY(-2px); }
.wa-float svg{ width:22px; height:22px; fill:currentColor; }
@media (max-width:520px){ .wa-float span{ display:none; } .wa-float{ padding:14px; } }

/* ---------- CTA strip ---------- */
.cta-strip{
  background:var(--gold-wash); border-radius:var(--r-lg);
  padding:clamp(28px,4vw,48px); display:flex; flex-wrap:wrap; gap:24px;
  align-items:center; justify-content:space-between;
}
.cta-strip h2{ font-size:var(--f-h2); font-weight:600; line-height:1.1; margin-bottom:10px; }
.cta-strip p{ max-width:50ch; }

/* ---------- Utility ---------- */
.stack{ display:grid; gap:18px; }
.mt-lg{ margin-top:clamp(32px,4vw,52px); }
.center{ text-align:center; }
.muted{ color:var(--muted); }