/*
Theme Name: Ivy Infusion & Wellness
Theme URI: https://ivyinfusionwellness.com/
Author: Ivy Infusion & Wellness
Description: Custom WordPress theme for Ivy Infusion & Wellness — IV infusion therapy, vitamin injections and medical weight management. Deep forest green + warm cream + gold accent identity, Ken Burns hero carousel, Polylang-ready, fully responsive.
Version: 3.0.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ivy-infusion
Tags: custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   1. DESIGN TOKENS
   Palette derived from the client's 3 reference compositions:
   deep forest green + warm cream (never pure #fff) + gold accent.
   ========================================================================= */
:root{
  /* Greens */
  --color-deep:        #14301f;   /* darkest — footer, dark section grounds */
  --color-primary:     #1a3d2e;   /* primary forest green — headings, dark bands */
  --color-primary-mid: #20402f;
  --color-primary-soft:#2c5642;
  --color-primary-tint:rgba(26,61,46,.08);

  /* Creams / neutrals */
  --color-bg:          #f7f3ea;   /* warm cream page ground */
  --color-bg-alt:      #efe8d9;   /* slightly deeper cream for banded sections */
  --color-surface:     #fdfbf6;   /* card surface — still warm, not pure white */
  --color-line:        #e0d7c5;
  --color-text:        #2b3a31;
  --color-muted:       #5d6b62;
  --color-on-dark:     #f3efe4;
  --color-on-dark-mut: rgba(243,239,228,.72);

  /* Gold accent */
  --color-accent-gold: #b8965a;
  --color-gold-light:  #c9a15f;
  --color-gold-soft:   rgba(184,150,90,.18);
  --color-gold-glow:   #f2dfb4;   /* jasny punkt swiatla na pierscieniu */

  /* Type */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --wrap:        1180px;
  --wrap-narrow: 820px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --section-y:   clamp(3.5rem, 8vw, 7rem);
  --radius:      4px;
  --radius-lg:   10px;

  --shadow-sm: 0 2px 10px rgba(20,48,31,.06);
  --shadow-md: 0 10px 34px rgba(20,48,31,.10);
  --shadow-lg: 0 22px 60px rgba(20,48,31,.16);

  --header-h: 92px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================================
   2. BASE / RESET
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video,iframe{max-width:100%; height:auto; display:block}
a{color:var(--color-primary); text-underline-offset:3px}
a:hover{color:var(--color-accent-gold)}
button{font:inherit}
ul,ol{padding-left:1.15em}
hr{border:0;height:1px;background:var(--color-line);margin:2.5rem 0}
:focus-visible{outline:2px solid var(--color-accent-gold); outline-offset:3px; border-radius:2px}

.ivy-wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.ivy-wrap--narrow{max-width:var(--wrap-narrow)}
.ivy-section{padding-block:var(--section-y)}
.ivy-section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.screen-reader-text{position:absolute!important;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:9999;background:var(--color-primary);color:#fff;padding:.75rem 1.25rem}
.skip-link:focus{left:0}

/* =========================================================================
   3. TYPOGRAPHY
   ========================================================================= */
h1,h2,h3,h4,h5,h6,.ivy-display{
  font-family:var(--font-display);
  color:var(--color-primary);
  font-weight:600;
  line-height:1.14;
  letter-spacing:.005em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1,.ivy-h1{font-size:clamp(2.35rem,1.6rem + 3.3vw,4.25rem)}
h2,.ivy-h2{font-size:clamp(1.85rem,1.35rem + 2.2vw,3rem)}
h3,.ivy-h3{font-size:clamp(1.35rem,1.15rem + .9vw,1.9rem)}
h4,.ivy-h4{font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem)}
h5{font-size:1.15rem} h6{font-size:1rem}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

/* Caps display variant used in the hero + section titles */
.ivy-caps{text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.ivy-italic{font-style:italic; font-weight:500}
.ivy-gold{color:var(--color-accent-gold)}

/* Gold kicker — small caps overline, wide tracking */
.ivy-kicker{
  font-family:var(--font-body);
  font-size:clamp(.68rem,.64rem + .12vw,.78rem);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--color-accent-gold);
  margin:0 0 1rem;
  display:block;
}
.ivy-kicker--on-dark{color:var(--color-gold-light)}

/* Short gold rule under a heading (never full width) */
.ivy-rule{width:72px;height:1px;background:var(--color-accent-gold);border:0;margin:1.5rem 0 1.75rem;display:block}
.ivy-rule--center{margin-inline:auto}

.ivy-lead{font-size:clamp(1.05rem,1rem + .3vw,1.22rem); color:var(--color-muted); line-height:1.7}

/* A condition the reader has to notice before booking — set apart from the
   surrounding copy by a gold rule rather than by shouting at them. */
.ivy-note{
  margin-top:1.25rem; padding-left:.9rem;
  border-left:2px solid var(--color-accent-gold);
  font-size:.95rem; line-height:1.6; color:var(--color-text);
}

.ivy-section-head{max-width:760px}
.ivy-section-head--center{margin-inline:auto; text-align:center}

/* Dark band sections */
.ivy-band--dark{background:var(--color-primary); color:var(--color-on-dark); position:relative; overflow:hidden}
.ivy-band--dark h1,.ivy-band--dark h2,.ivy-band--dark h3,.ivy-band--dark h4{color:var(--color-on-dark)}
.ivy-band--dark p{color:var(--color-on-dark-mut)}
/* :not(.ivy-btn) matters — this rule out-specifies the button colour classes
   and was repainting Book Now labels gold on a gold ground. */
.ivy-band--dark a:not(.ivy-btn){color:var(--color-gold-light)}
.ivy-band--alt{background:var(--color-bg-alt)}

/* Decorative monstera leaf accent in section corners (subtle, never dominant) */
.ivy-leaf{
  position:absolute; pointer-events:none; z-index:0;
  width:clamp(160px,22vw,360px); opacity:.10; color:var(--color-accent-gold);
}
.ivy-leaf--tl{top:-40px; left:-56px; transform:rotate(-14deg)}
.ivy-leaf--br{bottom:-56px; right:-48px; transform:rotate(160deg)}
.ivy-band--dark .ivy-leaf{opacity:.13}
.ivy-section > .ivy-wrap{position:relative; z-index:1}
@media (max-width:640px){.ivy-leaf{display:none}}

/* =========================================================================
   4. BUTTONS  (the site has to sell — CTAs are large and repeated)
   ========================================================================= */
.ivy-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-body); font-size:.82rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
  padding:1.05rem 2.1rem; min-height:52px;
  border:1px solid transparent; border-radius:var(--radius);
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background-color .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .18s var(--ease), box-shadow .28s var(--ease);
}
.ivy-btn:hover{transform:translateY(-2px)}
.ivy-btn:active{transform:translateY(0)}

.ivy-btn--primary{background:var(--color-primary); color:var(--color-on-dark); border-color:var(--color-primary)}
.ivy-btn--primary:hover{background:var(--color-deep); color:#fff; border-color:var(--color-deep); box-shadow:var(--shadow-md)}

.ivy-btn--gold{background:var(--color-accent-gold); color:#231a06; border-color:var(--color-accent-gold)}
.ivy-btn--gold:hover{background:var(--color-gold-light); color:#231a06; box-shadow:var(--shadow-md)}

/* Cream fill, forest ink — the strongest call to action available on a dark
   ground, and far higher contrast than gold-on-green. */
.ivy-btn--light{background:var(--color-on-dark); color:var(--color-primary); border-color:var(--color-on-dark)}
.ivy-btn--light:hover{background:#fff; color:var(--color-deep); border-color:#fff; box-shadow:var(--shadow-md)}

.ivy-btn--ghost{background:transparent; color:var(--color-primary); border-color:var(--color-primary)}
.ivy-btn--ghost:hover{background:var(--color-primary); color:var(--color-on-dark)}

.ivy-btn--ghost-light{background:transparent; color:var(--color-on-dark); border-color:rgba(243,239,228,.55)}
.ivy-btn--ghost-light:hover{background:var(--color-on-dark); color:var(--color-primary); border-color:var(--color-on-dark)}

.ivy-btn--sm{padding:.8rem 1.5rem; min-height:44px; font-size:.72rem; letter-spacing:.14em}
.ivy-btn--block{width:100%}

/*
 * Pulsing CTA label. Only the words scale — scaling the button itself would
 * nudge the card layout on every beat. The keyframes rest for most of the
 * cycle and pulse twice at the end, so it reads as a heartbeat drawing the eye
 * rather than as something breathing continuously.
 */
.ivy-btn__label{display:inline-block; will-change:transform}
.ivy-btn--pulse .ivy-btn__label{
  animation:ivyCtaPulse 3.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes ivyCtaPulse{
  0%, 62%, 100% { transform:scale(1) }
  71%           { transform:scale(1.13) }
  79%           { transform:scale(1) }
  87%           { transform:scale(1.09) }
  94%           { transform:scale(1) }
}
/* Once the pointer is on the button the job is done — stop pulling focus. */
.ivy-btn--pulse:hover .ivy-btn__label,
.ivy-btn--pulse:focus-visible .ivy-btn__label{animation-play-state:paused; transform:scale(1)}

/* Offset each card so a grid of CTAs does not beat in unison like a fault. */
.ivy-cards .ivy-card:nth-child(2) .ivy-btn__label{animation-delay:.45s}
.ivy-cards .ivy-card:nth-child(3) .ivy-btn__label{animation-delay:.9s}
.ivy-cards .ivy-card:nth-child(4) .ivy-btn__label{animation-delay:1.35s}
.ivy-cards .ivy-card:nth-child(5) .ivy-btn__label{animation-delay:1.8s}
.ivy-cards .ivy-card:nth-child(6) .ivy-btn__label{animation-delay:2.25s}
.ivy-circles__grid .ivy-circle:nth-child(2) .ivy-btn__label{animation-delay:.6s}
.ivy-circles__grid .ivy-circle:nth-child(3) .ivy-btn__label{animation-delay:1.2s}

@media (prefers-reduced-motion: reduce){
  .ivy-btn--pulse .ivy-btn__label{animation:none}
}

/* =========================================================================
   5. HEADER / NAVIGATION
   ========================================================================= */
.ivy-header{
  position:sticky; top:0; z-index:900;
  background:rgba(247,243,234,.92);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--color-line);
  transition:box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.ivy-header.is-stuck{box-shadow:var(--shadow-sm); background:rgba(247,243,234,.98)}
.ivy-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:var(--header-h);
}
.ivy-brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:0 0 auto}
.ivy-brand img{max-height:60px; width:auto}
.ivy-brand__text{font-family:var(--font-display); font-size:1.3rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--color-primary); line-height:1.1}
.ivy-brand__text small{display:block; font-size:.5em; letter-spacing:.28em; color:var(--color-accent-gold); font-weight:500}

/* Round brand mark beside the wordmark. The client's logo is a white disc, so
   it gets a hairline gold ring to seat it on the cream header rather than
   floating as a pale blob. */
.ivy-brand__mark{
  width:56px; height:56px; flex:0 0 auto; border-radius:50%;
  box-shadow:0 0 0 1px var(--color-gold-soft);
  --emblem-bg:var(--color-primary);
  --emblem-ring:var(--color-accent-gold);
  --emblem-leaf:var(--color-accent-gold);
  transition:transform .4s var(--ease), box-shadow .3s var(--ease);
}
.ivy-brand:hover .ivy-brand__mark{transform:scale(1.05); box-shadow:0 0 0 1px var(--color-accent-gold)}
@media (max-width:520px){
  .ivy-brand__mark{width:44px; height:44px}
  .ivy-brand__text{font-size:1.05rem}
}

.ivy-header__right{display:flex; align-items:center; gap:clamp(.75rem,2vw,1.75rem)}

/* Primary nav */
.ivy-nav > ul{display:flex; align-items:center; gap:clamp(.5rem,1.6vw,1.6rem); list-style:none; margin:0; padding:0}
.ivy-nav li{position:relative}
.ivy-nav a{
  display:block; padding:.6rem .25rem; text-decoration:none;
  font-size:.78rem; font-weight:500; text-transform:uppercase; letter-spacing:.15em;
  color:var(--color-primary); white-space:nowrap;
  transition:color .22s var(--ease);
}
.ivy-nav a::after{
  content:""; display:block; height:1px; width:0; background:var(--color-accent-gold);
  transition:width .3s var(--ease); margin-top:4px;
}
.ivy-nav a:hover{color:var(--color-accent-gold)}
.ivy-nav a:hover::after,
.ivy-nav .current-menu-item > a::after,
.ivy-nav .current-menu-ancestor > a::after,
.ivy-nav .current_page_item > a::after{width:100%}

/* Dropdown toggle caret (injected by JS for items with children) */
.ivy-nav__caret{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; padding:.35rem; margin-left:.15rem; cursor:pointer;
  color:inherit; line-height:0;
}
.ivy-nav__caret svg{width:10px; height:10px; transition:transform .28s var(--ease)}
.ivy-nav li.menu-item-has-children > .ivy-nav__row{display:flex; align-items:center}

/* Submenu — desktop hover */
.ivy-nav .sub-menu{
  list-style:none; margin:0; padding:.6rem 0;
  position:absolute; top:calc(100% + 10px); left:-1.1rem; min-width:260px;
  background:var(--color-surface); border:1px solid var(--color-line);
  border-top:2px solid var(--color-accent-gold);
  box-shadow:var(--shadow-md); border-radius:var(--radius);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.ivy-nav .sub-menu::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px}
.ivy-nav .sub-menu a{padding:.7rem 1.35rem; letter-spacing:.1em; font-size:.76rem; white-space:normal}
.ivy-nav .sub-menu a::after{display:none}
.ivy-nav .sub-menu a:hover{background:var(--color-primary-tint); color:var(--color-primary)}
.ivy-nav .sub-menu li + li{border-top:1px solid rgba(224,215,197,.55)}
@media (hover:hover) and (min-width:1025px){
  .ivy-nav li.menu-item-has-children:hover > .sub-menu{opacity:1; visibility:visible; transform:translateY(0)}
  .ivy-nav li.menu-item-has-children:hover > .ivy-nav__row .ivy-nav__caret svg{transform:rotate(180deg)}
}
.ivy-nav li.is-open > .sub-menu{opacity:1; visibility:visible; transform:translateY(0)}
.ivy-nav li.is-open > .ivy-nav__row .ivy-nav__caret svg{transform:rotate(180deg)}

/* Language switcher (Polylang) */
.ivy-lang{position:relative}
.ivy-lang__toggle{
  display:inline-flex; align-items:center; gap:.45rem;
  background:transparent; border:1px solid var(--color-line); border-radius:var(--radius);
  padding:.5rem .85rem; cursor:pointer; color:var(--color-primary);
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  transition:border-color .24s var(--ease), color .24s var(--ease);
}
.ivy-lang__toggle:hover{border-color:var(--color-accent-gold); color:var(--color-accent-gold)}
/* The globe leads, the chevron closes — they need different sizes, and only
   the chevron turns when the list opens. */
.ivy-lang__toggle svg:first-child{width:14px; height:14px; flex:0 0 auto}
.ivy-lang__toggle svg:last-child{width:9px; height:9px; transition:transform .26s var(--ease)}
.ivy-lang.is-open .ivy-lang__toggle svg:last-child{transform:rotate(180deg)}
.ivy-lang__list{
  list-style:none; margin:0; padding:.4rem 0; position:absolute; right:0; top:calc(100% + 8px);
  min-width:170px; background:var(--color-surface); border:1px solid var(--color-line);
  border-top:2px solid var(--color-accent-gold); border-radius:var(--radius); box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-8px); z-index:20;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.ivy-lang.is-open .ivy-lang__list{opacity:1; visibility:visible; transform:translateY(0)}
.ivy-lang__list a{display:flex; align-items:center; gap:.55rem; padding:.6rem 1rem; text-decoration:none;
  font-size:.78rem; letter-spacing:.06em; color:var(--color-primary)}
.ivy-lang__list a:hover{background:var(--color-primary-tint)}
.ivy-lang__list .current-lang > a{color:var(--color-accent-gold); font-weight:600}

/* Header socials */
.ivy-socials{display:flex; align-items:center; gap:.55rem; list-style:none; margin:0; padding:0}
.ivy-socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--color-line); color:var(--color-primary);
  transition:background-color .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease);
}
.ivy-socials a:hover{background:var(--color-primary); border-color:var(--color-primary); color:var(--color-on-dark); transform:translateY(-2px)}
.ivy-socials svg{width:16px; height:16px}

/* Seven menu items plus the language switcher fill the bar, so the header's own
   social row only appears once there is genuinely room for it. Below that
   width the same icons live at the foot of the drawer instead.

   The threshold was 1400px, which hid the icons on every ordinary laptop —
   1280 and 1366 are the two commonest desktop widths there are. Measured on
   the live header: 1180px still lays out without overflow and 1030px does not,
   so 1200px is the lowest round number with room to spare. */
.ivy-header__right > .ivy-socials{display:none}
@media (min-width:1200px){
  .ivy-header__right > .ivy-socials{display:flex; gap:.35rem}
  .ivy-header__right > .ivy-socials a{width:30px; height:30px}
  .ivy-header__right > .ivy-socials svg{width:13px; height:13px}
}

/* Drawer-only social row (hidden while the nav is a horizontal bar) */
.ivy-nav__socials{display:none}

/* Burger */
.ivy-burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; background:transparent;
  border:1px solid var(--color-line); border-radius:var(--radius); cursor:pointer;
}
.ivy-burger span{display:block; height:1.5px; width:100%; background:var(--color-primary); transition:transform .3s var(--ease), opacity .2s var(--ease)}
.ivy-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ivy-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.ivy-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* --- Mobile / tablet navigation: tap accordion, never hover --- */
@media (max-width:1024px){
  .ivy-burger{display:inline-flex}
  /* backdrop-filter would make the header a containing block for the fixed
     drawer below, pinning it inside the header instead of the viewport. */
  .ivy-header{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--color-bg)}
  .ivy-header.is-stuck{background:var(--color-bg)}
  .ivy-nav{
    position:fixed; inset:var(--header-h) 0 0 0;
    background:var(--color-bg); padding:1.5rem var(--gutter) 4rem;
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(100%); visibility:hidden;
    transition:transform .34s var(--ease), visibility .34s;
    z-index:880;
  }
  .ivy-nav.is-open{transform:translateX(0); visibility:visible}
  .ivy-nav > ul{flex-direction:column; align-items:stretch; gap:0}
  .ivy-nav > ul > li{border-bottom:1px solid var(--color-line)}
  .ivy-nav a{padding:1.05rem .25rem; font-size:.9rem; letter-spacing:.12em}
  .ivy-nav a::after{display:none}
  .ivy-nav li.menu-item-has-children > .ivy-nav__row{justify-content:space-between}
  .ivy-nav li.menu-item-has-children > .ivy-nav__row > a{flex:1}
  .ivy-nav__caret{width:44px; height:44px; margin:0}
  .ivy-nav__caret svg{width:12px; height:12px}
  /* Accordion: collapsed to zero height, opened on tap. `--sub-h` is set from
     the submenu's own scrollHeight by main.js, so this works for any number
     of children; the fallback covers the case where JS has not run yet. */
  .ivy-nav .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-radius:0; min-width:0;
    background:var(--color-bg-alt); padding:0;
    display:block; max-height:0; overflow:hidden;
    transition:max-height .32s var(--ease);
  }
  .ivy-nav li.is-open > .sub-menu{max-height:var(--sub-h,40rem)}
  .ivy-nav .sub-menu li + li{border-top:1px solid var(--color-line)}
  .ivy-nav .sub-menu a{padding-left:1.25rem; font-size:.82rem}
  body.ivy-nav-open{overflow:hidden}

  /* Socials at the foot of the drawer — the only place they fit on a phone */
  .ivy-nav__socials{display:block; margin-top:2rem}
  .ivy-nav__socials .ivy-socials{gap:.75rem}
  .ivy-nav__socials .ivy-socials a{width:44px; height:44px}
  .ivy-nav__socials .ivy-socials svg{width:18px; height:18px}
}
@media (min-width:1025px){ .ivy-burger{display:none} }

/* Six items need a little more discipline than four did */
@media (min-width:1025px) and (max-width:1399px){
  .ivy-nav > ul{gap:.9rem}
  .ivy-nav a{font-size:.72rem; letter-spacing:.12em}
}

/* =========================================================================
   6. HERO — 3-slide crossfade carousel with Ken Burns zoom
   The reference JPGs carry burned-in text on their left half, so each slide
   is anchored to its clean right-hand region and the live HTML text sits on
   a scrim over the left. Text stays translatable (Polylang) + editable.
   ========================================================================= */
/*
 * Height is tied to viewport WIDTH, not height. The source art is a 1920x430
 * banner (4.5:1); a tall hero forces `cover` to throw away most of its width,
 * which is what made laptops look brutally cropped. Roughly 2.3:1 keeps the
 * photography close to the proportion it was composed at.
 */
/*
 * Roughly 2.8:1 — wider than a conventional hero on purpose. The source art
 * is a 4.5:1 banner, and every bit of height `cover` has to fill is width it
 * throws away. This ratio is what lets slide 1 hold the client AND the drip
 * stand in the same frame.
 */
/* min-height, not height: the stage behind the copy is absolutely positioned to
   inset:0, so it stretches to whatever the hero ends up being, while the copy is
   in flow and must be allowed to make it taller. With a fixed height the longer
   Spanish and Polish headlines were clipped by overflow:hidden — at 1280px, the
   commonest laptop width, 194px of the block including both buttons. */
.ivy-hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(460px, 36vw, 820px);
  display:flex; align-items:center;
  background:var(--color-primary);
}
.ivy-hero__stage{position:absolute; inset:0; z-index:0}

.ivy-hero__slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1.6s var(--ease), visibility 1.6s;
}
.ivy-hero__slide.is-active{opacity:1; visibility:visible}

.ivy-hero__picture{display:block; width:100%; height:100%}
.ivy-hero__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--slide-pos,78% 50%);
  transform-origin:var(--slide-pos,78% 50%);
  will-change:transform;
}
/* Ken Burns: every slide zooms slowly for its whole time on screen,
   then resets to scale(1) when it leaves. */
/*
 * Eased rather than linear: the move is quick and definite in the first
 * couple of seconds, then settles, which reads as crisper than a constant
 * creep covering the same distance.
 */
.ivy-hero__slide.is-active .ivy-hero__img{
  animation:ivyKenBurns var(--slide-duration,7.5s) cubic-bezier(.16,.62,.32,1) forwards;
}
@keyframes ivyKenBurns{
  from{transform:scale(1)}
  to  {transform:scale(1.11)}
}
@media (prefers-reduced-motion: reduce){
  .ivy-hero__slide.is-active .ivy-hero__img{animation:none; transform:scale(1.03)}
  .ivy-hero__slide{transition-duration:.4s}
}

/* Scrim: matches each slide's own ground (cream or forest) so the live text
   reads exactly like the reference art — and masks the burned-in original. */
/*
 * The wash has two jobs that pull against each other: hide the burned-in
 * typography in the left of the source files, and stay off the subject —
 * the woman's face on slide 1, the IVY wall sign on slide 3. So it goes
 * fully opaque only across the band where that old type can appear, then
 * drops away quickly and is gone by two thirds, well before the subject.
 */
.ivy-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(
    100deg,
    var(--slide-scrim,#f7f3ea) 0%,
    var(--slide-scrim,#f7f3ea) 24%,
    color-mix(in srgb, var(--slide-scrim,#f7f3ea) 82%, transparent) 34%,
    color-mix(in srgb, var(--slide-scrim,#f7f3ea) 45%, transparent) 43%,
    color-mix(in srgb, var(--slide-scrim,#f7f3ea) 12%, transparent) 49%,
    transparent 54%
  );
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .ivy-hero__scrim{background:linear-gradient(100deg,#f7f3ea 0%,#f7f3ea 42%,rgba(247,243,234,.55) 62%,transparent 84%)}
  .ivy-hero__slide--dark .ivy-hero__scrim{background:linear-gradient(100deg,#14301f 0%,#14301f 42%,rgba(20,48,31,.55) 62%,transparent 84%)}
}

.ivy-hero__content{
  position:relative; z-index:2; width:100%;
  padding-block:clamp(2rem,6vh,4rem);
}
/* All three copy blocks share one grid cell so the hero keeps a stable
   height and the crossfade has nothing to jump against. */
.ivy-hero__copies{display:grid}
.ivy-hero__copy{
  grid-area:1/1; align-self:center; max-width:640px;
  opacity:0; visibility:hidden;
  transition:opacity 1.1s var(--ease) .35s, visibility 1.1s .35s, transform 1.1s var(--ease) .35s;
  transform:translateY(14px);
}
.ivy-hero__copy.is-active{opacity:1; visibility:visible; transform:none}
.ivy-hero__copy--dark{--slide-ink:var(--color-on-dark); --slide-ink-mut:var(--color-on-dark-mut)}
.ivy-hero__title{
  font-size:clamp(2.4rem,1.3rem + 4.6vw,4.6rem);
  line-height:1.06; margin:0;
  color:var(--slide-ink,var(--color-primary));
}
.ivy-hero__title .ivy-gold{color:var(--color-gold-light)}
.ivy-hero__subtitle{
  font-size:clamp(1rem,.94rem + .42vw,1.22rem);
  color:var(--slide-ink-mut,var(--color-muted));
  max-width:36ch; margin:0 0 2rem;
}
.ivy-hero__actions{display:flex; flex-wrap:wrap; gap:.85rem}

/* Per-slide ink: light slides get forest ink, the dark leaf slide gets cream */
.ivy-hero__slide--dark{--slide-ink:var(--color-on-dark); --slide-ink-mut:var(--color-on-dark-mut)}
@media (prefers-reduced-motion: reduce){.ivy-hero__copy{transition-duration:.3s; transform:none}}

/* Carousel dots */
.ivy-hero__dots{
  position:absolute; bottom:clamp(1.5rem,4vh,2.75rem); left:50%; transform:translateX(-50%);
  z-index:3; display:flex; gap:.7rem;
}
.ivy-hero__dot{
  position:relative; width:34px; height:3px; padding:0; border:0; cursor:pointer; border-radius:2px;
  background:rgba(20,48,31,.22); transition:background-color .3s var(--ease), width .3s var(--ease);
}
.ivy-hero__dot::after{content:""; position:absolute; inset:-14px}
.ivy-hero__dot[aria-selected="true"]{background:var(--color-accent-gold); width:52px}
.ivy-hero.is-dark-slide .ivy-hero__dot{background:rgba(243,239,228,.3)}
.ivy-hero.is-dark-slide .ivy-hero__dot[aria-selected="true"]{background:var(--color-gold-light)}

/*
 * Phones get a stacked hero: photograph on top, copy on solid ground beneath.
 *
 * Overlaying them does not work here. The source art is a 4.5:1 banner, so a
 * portrait frame crops it to roughly a sixth of its width and then blows that
 * sliver up past 3x — visibly soft. And keeping type legible over it needed a
 * wash so heavy the photograph disappeared behind it.
 *
 * Stacking fixes both at once: a wide, short band shows about 40% of the
 * source instead of 17%, which more than halves the upscaling, and the copy
 * sits on the page ground where it needs no wash at all.
 */
@media (max-width:768px){
  .ivy-hero{
    --stage-h:clamp(190px, 50vw, 300px);
    height:auto; min-height:0; display:block; background:var(--color-bg);
  }

  .ivy-hero__stage{position:relative; inset:auto; height:var(--stage-h)}
  /* The mobile file is already cropped to the clean part of the frame, so it
     is centred rather than pushed sideways like the wide original. */
  .ivy-hero__img{object-position:50% 50%; transform-origin:50% 50%}
  .ivy-hero__scrim{
    /* Only a whisper along the bottom, so the dots stay readable. */
    background:linear-gradient(to top, rgba(20,48,31,.28), transparent 38%);
  }

  .ivy-hero__content{position:relative; padding-block:clamp(1.75rem,6vw,2.5rem)}

  /* On the cream ground every slide's copy takes the same forest ink — the
     dark slide's cream type would vanish here. */
  .ivy-hero__copy,
  .ivy-hero__copy--dark{
    --slide-ink:var(--color-primary);
    --slide-ink-mut:var(--color-muted);
    max-width:100%;
  }
  .ivy-hero__title .ivy-gold{color:var(--color-accent-gold)}
  .ivy-hero__subtitle{max-width:100%}

  /* Same reason: the light-on-dark outline button needs the dark-on-light one. */
  .ivy-hero__copy .ivy-btn--ghost-light{
    color:var(--color-primary); border-color:var(--color-primary);
  }
  .ivy-hero__copy .ivy-btn--ghost-light:hover{
    background:var(--color-primary); color:var(--color-on-dark);
  }

  .ivy-hero__actions .ivy-btn{flex:1 1 auto}

  /* Dots belong on the photo band. They are positioned against .ivy-hero, so
     they are placed from the top using the stage height rather than from the
     bottom, which is now below the copy. */
  .ivy-hero__dots{top:calc(var(--stage-h) - 1.6rem); bottom:auto}
}


/* =========================================================================
   6b. "WE COME TO YOU" BAND — directly under the hero
   ========================================================================= */
.ivy-mobile-band{
  position:relative; overflow:hidden;
  background:var(--color-deep); color:var(--color-on-dark);
  border-bottom:1px solid rgba(201,161,95,.28);
}
/* A slow highlight crossing the band. The text stays still — this is the only
   thing that moves, so it draws the eye without costing legibility. */
.ivy-mobile-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%, transparent 38%,
    rgba(242,223,180,.10) 47%,
    rgba(242,223,180,.16) 50%,
    rgba(242,223,180,.10) 53%,
    transparent 62%, transparent 100%);
  transform:translateX(-100%);
  animation:ivyBandSweep 7s ease-in-out infinite;
}
@keyframes ivyBandSweep{
  0%,18%{transform:translateX(-100%)}
  70%,100%{transform:translateX(100%)}
}

.ivy-mobile-band__inner{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:clamp(.75rem,2vw,1.25rem);
  padding-block:clamp(.85rem,2vw,1.15rem);
}
.ivy-mobile-band__icon{display:inline-grid; place-items:center; flex:0 0 auto; color:var(--color-gold-light)}
.ivy-mobile-band__icon svg{width:26px; height:26px}

.ivy-mobile-band__text{margin:0; font-size:clamp(.9rem,.85rem + .25vw,1.02rem); line-height:1.5}
.ivy-mobile-band__label{
  display:inline-block; margin-right:.6rem;
  font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-gold-light);
}

.ivy-mobile-band__cta{
  margin-left:auto; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-on-dark); border-bottom:1px solid rgba(201,161,95,.5);
  padding-bottom:2px; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.ivy-mobile-band__cta:hover{color:var(--color-gold-light); border-color:var(--color-gold-light)}
.ivy-mobile-band__cta svg{width:15px; height:15px; transition:transform .3s var(--ease)}
.ivy-mobile-band__cta:hover svg{transform:translateX(3px)}

@media (max-width:760px){
  /* Stacked on a phone: the link drops under the sentence rather than being
     squeezed onto the same line. */
  .ivy-mobile-band__inner{flex-wrap:wrap; row-gap:.6rem}
  .ivy-mobile-band__text{flex:1 1 100%; order:2}
  .ivy-mobile-band__icon{order:1}
  .ivy-mobile-band__cta{order:3; margin-left:0}
  .ivy-mobile-band__label{display:block; margin:0 0 .2rem}
}
@media (prefers-reduced-motion: reduce){
  .ivy-mobile-band::after{animation:none; opacity:.5; transform:none}
}

/* =========================================================================
   7. BENEFITS ICON ROW  (Hydration / Immunity / Energy / Wellness)
   ========================================================================= */
.ivy-benefits{border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line)}
.ivy-benefits__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,3vw,2.5rem);
}
.ivy-benefit{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem; position:relative}
.ivy-benefit + .ivy-benefit::before{
  content:""; position:absolute; left:calc(-1 * clamp(.5rem,1.5vw,1.25rem)); top:12%; bottom:12%;
  width:1px; background:var(--color-line);
}
.ivy-benefit__icon{
  display:grid; place-items:center; width:66px; height:66px; border-radius:50%;
  border:1px solid var(--color-accent-gold); color:var(--color-primary);
  background:var(--color-surface); transition:background-color .3s var(--ease), color .3s var(--ease);
}
.ivy-benefit:hover .ivy-benefit__icon{background:var(--color-primary); color:var(--color-gold-light)}
.ivy-benefit__icon svg{width:28px; height:28px}
.ivy-benefit__label{
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--color-primary);
}
.ivy-band--dark .ivy-benefit__label{color:var(--color-on-dark)}
.ivy-band--dark .ivy-benefit__icon{background:transparent; color:var(--color-gold-light)}
.ivy-band--dark .ivy-benefit + .ivy-benefit::before{background:rgba(243,239,228,.18)}
@media (max-width:700px){
  .ivy-benefits__grid{grid-template-columns:repeat(2,1fr); gap:2rem 1rem}
  .ivy-benefit + .ivy-benefit::before{display:none}
  .ivy-benefit__icon{width:56px;height:56px}
  .ivy-benefit__icon svg{width:24px;height:24px}
}

/* =========================================================================
   8. SERVICES — round-framed photos (the old site's "circles" section)
   ========================================================================= */
.ivy-circles{position:relative}
.ivy-circles__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.75rem,4vw,3.25rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.ivy-circle{
  --circle-size:min(260px,72vw);
  --ring-gap:14px;
  --ring-w:4px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  position:relative;
}
.ivy-circle__media{
  width:var(--circle-size); aspect-ratio:1; border-radius:50%; overflow:hidden;
  position:relative; margin-bottom:1.9rem;
  box-shadow:var(--shadow-md);
}

/*
 * Gold ring with a light travelling around it. Two layers sharing one mask:
 * ::before is the continuous ring, ::after is a bright arc that rotates over
 * it. Both sit on .ivy-circle rather than the media, which clips its own
 * overflow. The mask trims a full disc down to a ring of --ring-w.
 */
.ivy-circle::before,
.ivy-circle::after{
  content:"";
  position:absolute; top:calc(-1 * var(--ring-gap)); left:0; right:0;
  margin-inline:auto; pointer-events:none;
  width:calc(var(--circle-size) + var(--ring-gap) * 2);
  aspect-ratio:1; border-radius:50%;
  -webkit-mask:radial-gradient(closest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w)));
  mask:radial-gradient(closest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w)));
}

/* The ring itself — always whole, so the circle never looks unfinished. */
.ivy-circle::before{
  background:var(--color-accent-gold);
  opacity:.32;
  transition:opacity .35s var(--ease);
}

/* The light: a bright head with a soft tail, sweeping round the ring. */
.ivy-circle::after{
  background:conic-gradient(
    from 0deg,
    transparent 0 55%,
    rgba(184,150,90,.45) 70%,
    var(--color-gold-glow) 82%,
    rgba(184,150,90,.45) 90%,
    transparent 100%
  );
  animation:ivyRingSpin 6s linear infinite;
}

.ivy-circle:hover::before{opacity:.6}
.ivy-circle:hover::after{animation-duration:2.6s}

@keyframes ivyRingSpin{ to{ transform:rotate(1turn) } }

@media (prefers-reduced-motion: reduce){
  .ivy-circle::after{animation:none}
  .ivy-circle::before{opacity:.5}
}
.ivy-circle__media img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.ivy-circle:hover .ivy-circle__media img{transform:scale(1.06)}
.ivy-circle__media--empty{
  display:grid; place-items:center; background:var(--color-primary); color:var(--color-gold-light);
}
.ivy-circle__media--empty svg{width:38%; height:38%}
.ivy-circle__body{display:flex; flex-direction:column; flex:1; align-items:center}
.ivy-circle h3{margin-bottom:.75rem}
.ivy-circle__text{color:var(--color-muted); font-size:.98rem; margin-bottom:1.8rem}
.ivy-band--dark .ivy-circle__text{color:var(--color-on-dark-mut)}
.ivy-circle .ivy-btn{margin-top:auto}
@media (max-width:900px){
  .ivy-circles__grid{grid-template-columns:1fr; gap:3rem; max-width:520px; margin-inline:auto}
}

/* =========================================================================
   9. "OUR SERVICES" price cards
   ========================================================================= */
.ivy-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1.25rem,2.5vw,1.9rem); margin-top:clamp(2.5rem,5vw,3.5rem);
}
.ivy-card{
  display:flex; flex-direction:column;
  background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.1rem);
  position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ivy-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--color-accent-gold);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.ivy-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.ivy-card:hover::before{transform:scaleX(1)}
.ivy-card__title{font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem); margin-bottom:.9rem}
.ivy-card__meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  padding-bottom:1.1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--color-line);
}
.ivy-card__duration{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--color-muted);
}
.ivy-card__duration svg{width:14px; height:14px; color:var(--color-accent-gold)}
.ivy-card__price{
  font-family:var(--font-display); font-size:1.75rem; font-weight:600; color:var(--color-primary);
  margin-left:auto; line-height:1; text-align:right;
}
.ivy-card__price small{font-family:var(--font-body); font-size:.58rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:var(--color-muted); display:block; margin-bottom:.3rem}
.ivy-card__text{color:var(--color-muted); font-size:.95rem; margin-bottom:1.6rem}
.ivy-card__foot{margin-top:auto}
.ivy-card--dark{background:rgba(243,239,228,.05); border-color:rgba(243,239,228,.16)}
.ivy-band--dark .ivy-card__title,.ivy-band--dark .ivy-card__price{color:var(--color-on-dark)}
.ivy-band--dark .ivy-card__text,.ivy-band--dark .ivy-card__duration,.ivy-band--dark .ivy-card__price small{color:var(--color-on-dark-mut)}
.ivy-band--dark .ivy-card__meta{border-bottom-color:rgba(243,239,228,.16)}

/* Photo band inside Our Services — the counterweight to all that green */
.ivy-band-photo{
  margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding:0;
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  outline:1px solid rgba(201,161,95,.35); outline-offset:-1px;
}
.ivy-band-photo img{
  width:100%; height:auto; display:block;
  aspect-ratio:2.6/1; object-fit:cover; object-position:center;
}
@media (max-width:700px){
  /* Squarer crop on a phone, or the subjects shrink to nothing */
  .ivy-band-photo img{aspect-ratio:16/10}
}

/* =========================================================================
   9b. "OUR IV INFUSIONS" — the eight drips
   ========================================================================= */
.ivy-infusions{background:var(--color-bg-alt)}
.ivy-infusions__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(1.25rem,2.4vw,1.9rem); margin-top:clamp(2.5rem,5vw,3.5rem);
}
.ivy-drip{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ivy-drip:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--color-gold-soft)}

/* The bag photographs carry their own gradient backdrops, so the media block
   is left full-bleed rather than boxed — a frame would fight them. */
.ivy-drip__media{aspect-ratio:1/1; overflow:hidden; background:var(--color-bg-alt)}
.ivy-drip__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
.ivy-drip:hover .ivy-drip__media img{transform:scale(1.04)}

.ivy-drip__body{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(1.25rem,2.4vw,1.6rem);
}
.ivy-drip__name{
  font-family:var(--font-display); font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem);
  line-height:1.2; color:var(--color-primary); margin:0 0 .7rem;
}
.ivy-drip__text{color:var(--color-muted); font-size:.9rem; line-height:1.6; margin:0 0 .9rem}

.ivy-drip__ingredients{
  font-size:.8rem; line-height:1.55; color:var(--color-muted);
  margin:0 0 1.1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--color-line);
}
.ivy-drip__ingredients span{
  display:block; font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-accent-gold); margin-bottom:.3rem;
}

.ivy-drip__prices{list-style:none; margin:0 0 .5rem; padding:0}
.ivy-drip__prices li{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  padding:.3rem 0;
}
.ivy-drip__size{
  font-size:.78rem; letter-spacing:.03em; color:var(--color-muted); white-space:nowrap;
}
.ivy-drip__price{
  font-family:var(--font-display); font-size:1.3rem; font-weight:600;
  color:var(--color-primary); line-height:1; white-space:nowrap;
}
.ivy-drip__price--solo{font-size:1.15rem}

.ivy-drip__promo{
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-accent-gold); margin:.4rem 0 0; line-height:1.4;
}
.ivy-drip__foot{margin-top:auto; padding-top:1.2rem}

@media (max-width:520px){
  /* One card per row on a phone; two would squeeze the ingredient list into
     an unreadable column. */
  .ivy-infusions__grid{grid-template-columns:1fr}
  .ivy-drip__media{aspect-ratio:4/3}
}

.ivy-notice--on-dark{
  background:rgba(243,239,228,.06); color:var(--color-on-dark-mut);
  margin-top:clamp(2rem,4vw,3rem);
}
.ivy-notice--on-dark strong{color:var(--color-on-dark)}

/* Vitamin injection cards — denser grid */
.ivy-cards--injections{grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.ivy-card--injection .ivy-card__meta{justify-content:space-between}
.ivy-card--injection .ivy-card__price{font-size:2rem; margin-left:auto}

/* =========================================================================
   10. PAGE HEADER (inner pages)
   ========================================================================= */
.ivy-page-head{
  background:var(--color-primary); color:var(--color-on-dark);
  padding-block:clamp(3.5rem,9vw,6rem); position:relative; overflow:hidden; text-align:center;
}
.ivy-page-head > .ivy-wrap{position:relative; z-index:1}
.ivy-page-head h1{color:var(--color-on-dark); margin:0}
.ivy-page-head .ivy-lead{color:var(--color-on-dark-mut); max-width:62ch; margin-inline:auto}
.ivy-page-head .ivy-rule{margin-inline:auto}
.ivy-breadcrumbs{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-on-dark-mut); margin-bottom:1.1rem}
.ivy-breadcrumbs a{color:var(--color-gold-light); text-decoration:none}
.ivy-breadcrumbs .sep{opacity:.45; margin:0 .5rem}

/* =========================================================================
   11. MEDICAL WEIGHT LOSS — checklist, compare columns, FAQ
   ========================================================================= */
.ivy-checklist{list-style:none; padding:0; margin:0; display:grid; gap:.9rem}
.ivy-checklist li{display:flex; align-items:flex-start; gap:.9rem; font-size:1.02rem}
.ivy-checklist svg{flex:0 0 auto; width:22px; height:22px; color:var(--color-accent-gold); margin-top:.22em}
.ivy-band--dark .ivy-checklist li{color:var(--color-on-dark)}

.ivy-compare{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.25rem,3vw,2rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.ivy-compare__col{
  background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.25rem); position:relative; overflow:hidden;
}
.ivy-compare__col::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--color-accent-gold)}
.ivy-compare__col h3{margin-bottom:.35rem}
.ivy-compare__tag{
  display:inline-block; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  color:var(--color-accent-gold); margin-bottom:1.35rem;
}
.ivy-compare__list{list-style:none; padding:0; margin:0}
.ivy-compare__list li{padding:.85rem 0; border-top:1px solid var(--color-line); color:var(--color-muted); font-size:.96rem}
.ivy-compare__list li:first-child{border-top:0; padding-top:0}
@media (max-width:760px){
  .ivy-compare{grid-template-columns:1fr}
}
/* Any wide table scrolls inside its own box rather than breaking the layout */
.ivy-table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-block:1.5rem}
.ivy-table-scroll table{border-collapse:collapse; width:100%; min-width:560px}
.ivy-table-scroll th,.ivy-table-scroll td{padding:.9rem 1rem; text-align:left; border-bottom:1px solid var(--color-line)}
.ivy-table-scroll th{font-family:var(--font-body); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--color-primary)}

/* FAQ accordion */
.ivy-faq{margin-top:clamp(1.5rem,3vw,2.5rem); border-top:1px solid var(--color-line)}
.ivy-faq__item{border-bottom:1px solid var(--color-line)}
.ivy-faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:1.35rem 0; color:var(--color-primary);
  font-family:var(--font-display); font-size:clamp(1.05rem,1rem + .35vw,1.28rem); font-weight:600;
}
.ivy-faq__q:hover{color:var(--color-accent-gold)}
.ivy-faq__icon{flex:0 0 auto; width:20px; height:20px; position:relative}
.ivy-faq__icon::before,.ivy-faq__icon::after{
  content:""; position:absolute; background:var(--color-accent-gold); transition:transform .3s var(--ease);
}
.ivy-faq__icon::before{top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%)}
.ivy-faq__icon::after{left:50%; top:0; height:100%; width:1.5px; transform:translateX(-50%)}
.ivy-faq__q[aria-expanded="true"] .ivy-faq__icon::after{transform:translateX(-50%) scaleY(0)}
.ivy-faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s var(--ease)}
.ivy-faq__item.is-open .ivy-faq__a{grid-template-rows:1fr}
.ivy-faq__a > div{overflow:hidden}
.ivy-faq__a p{padding-bottom:1.35rem; color:var(--color-muted); margin:0}
.ivy-band--dark .ivy-faq,.ivy-band--dark .ivy-faq__item{border-color:rgba(243,239,228,.18)}
.ivy-band--dark .ivy-faq__q{color:var(--color-on-dark)}
.ivy-band--dark .ivy-faq__a p{color:var(--color-on-dark-mut)}

/* Two-column intro block used on the weight-loss page */
.ivy-split{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:center}
@media (max-width:860px){.ivy-split{grid-template-columns:1fr}}

/* =========================================================================
   12. CONTENT (posts, pages, editor output)
   ========================================================================= */
.ivy-content{font-size:1.06rem; line-height:1.8}
.ivy-content > *{max-width:100%}
.ivy-content h2{margin-top:2.4em; margin-bottom:.6em}
.ivy-content h3{margin-top:1.9em; margin-bottom:.5em}
.ivy-content h2:first-child,.ivy-content h3:first-child{margin-top:0}
.ivy-content ul,.ivy-content ol{margin:0 0 1.4em; padding-left:1.35em}
.ivy-content li{margin-bottom:.55em}
.ivy-content li::marker{color:var(--color-accent-gold)}
.ivy-content blockquote{
  margin:2em 0; padding:.35em 0 .35em 1.75em; border-left:2px solid var(--color-accent-gold);
  font-family:var(--font-display); font-size:1.2em; font-style:italic; color:var(--color-primary);
}
.ivy-content img{border-radius:var(--radius-lg); margin-block:2em}
.ivy-content strong{color:var(--color-primary); font-weight:600}
.ivy-content em{font-style:italic}
.ivy-content a{font-weight:500}
.ivy-content .ivy-disclaimer,.ivy-disclaimer{
  margin-top:3em; padding:1.25rem 1.5rem; background:var(--color-bg-alt);
  border-left:2px solid var(--color-accent-gold); border-radius:0 var(--radius) var(--radius) 0;
  font-size:.92rem; color:var(--color-muted); font-style:italic;
}

/* =========================================================================
   13. BLOG
   ========================================================================= */
.ivy-posts{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(1.5rem,3vw,2.5rem)}
.ivy-post-card{
  display:flex; flex-direction:column; background:var(--color-surface);
  border:1px solid var(--color-line); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ivy-post-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.ivy-post-card__media{aspect-ratio:16/10; overflow:hidden; background:var(--color-primary); display:block}
.ivy-post-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.ivy-post-card:hover .ivy-post-card__media img{transform:scale(1.05)}
/* Branded tile for posts with no featured image, so the grid stays even */
.ivy-post-card__media--empty{position:relative; display:grid; place-items:center; overflow:hidden}
.ivy-post-card__leaf{position:absolute; width:75%; color:var(--color-gold-light); opacity:.14; transform:rotate(-12deg) translate(8%,6%)}
.ivy-post-card__mark{width:56px; height:56px; color:var(--color-gold-light); position:relative}
.ivy-post-card__body{padding:clamp(1.35rem,2.5vw,1.85rem); display:flex; flex-direction:column; flex:1}
.ivy-post-card__date{font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--color-accent-gold); margin-bottom:.8rem}
.ivy-post-card__title{font-size:1.3rem; margin-bottom:.75rem; line-height:1.25}
.ivy-post-card__title a{text-decoration:none; color:inherit}
.ivy-post-card__title a:hover{color:var(--color-accent-gold)}
.ivy-post-card__excerpt{color:var(--color-muted); font-size:.95rem; margin-bottom:1.4rem}
.ivy-post-card__more{
  margin-top:auto; align-self:flex-start; font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; text-decoration:none; color:var(--color-primary);
  display:inline-flex; align-items:center; gap:.5rem;
}
.ivy-post-card__more svg{width:14px; height:14px; transition:transform .28s var(--ease)}
.ivy-post-card__more:hover svg{transform:translateX(4px)}

.ivy-single__meta{font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--color-on-dark-mut); margin-top:1rem}
.ivy-single__thumb{
  margin:clamp(-5rem,-6vw,-3rem) auto clamp(2.5rem,5vw,3.5rem); max-width:var(--wrap);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative; z-index:2;
}
.ivy-single__thumb img{width:100%; height:auto}
.ivy-pagination{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:clamp(2.5rem,5vw,4rem)}
.ivy-pagination .page-numbers{
  display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 .75rem;
  border:1px solid var(--color-line); border-radius:var(--radius); text-decoration:none;
  font-size:.85rem; color:var(--color-primary); background:var(--color-surface);
}
.ivy-pagination .page-numbers:hover,.ivy-pagination .current{background:var(--color-primary); color:var(--color-on-dark); border-color:var(--color-primary)}
.ivy-post-nav{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:clamp(2.5rem,5vw,4rem); padding-top:2rem; border-top:1px solid var(--color-line)}
.ivy-post-nav a{display:block; text-decoration:none; font-size:.95rem; font-family:var(--font-display); font-size:1.1rem}
.ivy-post-nav span{display:block; font-family:var(--font-body); font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; color:var(--color-accent-gold); margin-bottom:.4rem}
.ivy-post-nav > div:last-child{text-align:right}
@media (max-width:600px){.ivy-post-nav{grid-template-columns:1fr}.ivy-post-nav > div:last-child{text-align:left}}

/* =========================================================================
   14. CONTACT FORM + CONSENT
   ========================================================================= */
.ivy-contact{position:relative; overflow:hidden}
.ivy-contact__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}

/* The same "we come to you" line, repeated where the decision is made. */
.ivy-contact__mobile{
  display:flex; align-items:flex-start; gap:.7rem;
  margin:1.6rem 0 0; padding:.9rem 1.1rem;
  border:1px solid var(--color-gold-soft); border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--color-accent-gold) 7%, transparent);
  font-size:.92rem; line-height:1.55; color:var(--color-primary);
}
.ivy-contact__mobile svg{width:20px; height:20px; flex:0 0 auto; color:var(--color-accent-gold); margin-top:.1rem}
@supports not (background:color-mix(in srgb, red 7%, transparent)){
  .ivy-contact__mobile{background:rgba(184,150,90,.07)}
}

.ivy-contact__item{display:flex; gap:1rem; padding:1.25rem 0; border-bottom:1px solid var(--color-line)}
.ivy-contact__item:first-of-type{padding-top:0}
.ivy-contact__item > svg{flex:0 0 auto; width:20px; height:20px; color:var(--color-accent-gold); margin-top:.3em}
.ivy-contact__label{font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; color:var(--color-muted); margin:0 0 .3rem}
.ivy-contact__value{margin:0; font-size:1rem; color:var(--color-primary)}
.ivy-contact__value a{text-decoration:none}
.ivy-band--dark .ivy-contact__item{border-color:rgba(243,239,228,.16)}
.ivy-band--dark .ivy-contact__value{color:var(--color-on-dark)}
.ivy-band--dark .ivy-contact__label{color:var(--color-on-dark-mut)}

.ivy-form{
  background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,4vw,2.75rem); box-shadow:var(--shadow-sm); position:relative;
}
.ivy-form__row{display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem}
.ivy-field{display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.1rem}
.ivy-field label{font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:var(--color-muted)}
.ivy-field .req{color:var(--color-accent-gold)}
.ivy-field input,.ivy-field select,.ivy-field textarea{
  width:100%; font:inherit; font-size:.98rem; color:var(--color-text);
  background:var(--color-bg); border:1px solid var(--color-line); border-radius:var(--radius);
  padding:.85rem 1rem; min-height:50px;
  transition:border-color .24s var(--ease), box-shadow .24s var(--ease), background-color .24s var(--ease);
}
.ivy-field textarea{min-height:150px; resize:vertical; line-height:1.65}
.ivy-field select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235d6b62' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px; padding-right:2.75rem}
.ivy-field input:focus,.ivy-field select:focus,.ivy-field textarea:focus{
  outline:0; border-color:var(--color-accent-gold); background:var(--color-surface);
  box-shadow:0 0 0 3px var(--color-gold-soft);
}

/* Required privacy-policy consent — the form will not submit unchecked */
.ivy-consent{
  display:flex; align-items:flex-start; gap:.8rem; margin:.5rem 0 1.6rem;
  padding:1rem 1.1rem; background:var(--color-bg); border:1px solid var(--color-line); border-radius:var(--radius);
}
.ivy-consent input[type="checkbox"]{
  flex:0 0 auto; width:20px; height:20px; margin:.15em 0 0; accent-color:var(--color-primary); cursor:pointer;
}
.ivy-consent label{font-size:.9rem; line-height:1.6; color:var(--color-muted); cursor:pointer; text-transform:none; letter-spacing:0; font-weight:400}
.ivy-consent a{color:var(--color-primary); font-weight:500}
.ivy-form__note{font-size:.82rem; color:var(--color-muted); margin-top:1rem}
.ivy-form__hp{position:absolute!important; left:-9999px; opacity:0; height:0; width:0; overflow:hidden}
.ivy-form__status{display:none; padding:1rem 1.25rem; border-radius:var(--radius); margin-bottom:1.25rem; font-size:.95rem}
.ivy-form__status.is-visible{display:block}
.ivy-form__status--ok{background:rgba(44,86,66,.1); border:1px solid var(--color-primary-soft); color:var(--color-primary)}
.ivy-form__status--err{background:rgba(180,82,63,.08); border:1px solid rgba(180,82,63,.4); color:#8d3d2e}

@media (max-width:900px){
  .ivy-contact__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ivy-form__row{grid-template-columns:1fr}
}

/* =========================================================================
   15. MAPS — two locations
   ========================================================================= */
.ivy-maps{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.25rem,3vw,2rem)}
.ivy-map{
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
}
.ivy-map__frame{aspect-ratio:16/10; background:var(--color-bg-alt)}
.ivy-map__frame iframe{width:100%; height:100%; border:0; display:block}
.ivy-map__body{padding:1.5rem; display:flex; flex-direction:column; flex:1}
.ivy-map__city{font-family:var(--font-display); font-size:1.35rem; font-weight:600; color:var(--color-primary); margin:0 0 .35rem}
.ivy-map__addr{font-size:.94rem; color:var(--color-muted); margin:0 0 1.35rem}
.ivy-map__actions{margin-top:auto; display:flex; flex-wrap:wrap; gap:.6rem}
.ivy-maps__between{text-align:center; margin-top:clamp(1.5rem,3vw,2.25rem)}
@media (max-width:820px){.ivy-maps{grid-template-columns:1fr}}

/* =========================================================================
   16. FOOTER
   ========================================================================= */
.ivy-footer{background:var(--color-deep); color:var(--color-on-dark); position:relative; overflow:hidden}
.ivy-footer a{color:var(--color-on-dark-mut); text-decoration:none; transition:color .22s var(--ease)}
.ivy-footer a:hover{color:var(--color-gold-light)}
.ivy-footer > .ivy-wrap{position:relative; z-index:1}
.ivy-footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(2rem,4vw,3.5rem);
  padding-block:clamp(3rem,7vw,5rem);
}
.ivy-footer__title{
  font-family:var(--font-body); font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--color-gold-light); margin:0 0 1.5rem;
}
.ivy-footer__brand .ivy-brand{margin-bottom:1.25rem}
.ivy-footer__brand .ivy-brand__text{color:var(--color-on-dark)}
/* The logo is a white disc — on the deep footer it stands on its own, so it
   only needs a slightly warmer ring. (No invert filter: that would flatten the
   artwork into a solid white circle.) */
.ivy-footer .ivy-brand__mark{
  width:64px; height:64px;
  box-shadow:0 0 0 1px rgba(201,161,95,.45);
  --emblem-bg:rgba(243,239,228,.06);
  --emblem-ring:var(--color-gold-light);
  --emblem-leaf:var(--color-gold-light);
}
.ivy-footer__about{color:var(--color-on-dark-mut); font-size:.95rem; max-width:38ch}
.ivy-footer__list{list-style:none; margin:0; padding:0}
.ivy-footer__list li{margin-bottom:.85rem; font-size:.95rem}
.ivy-footer__list--links a{display:inline-flex; align-items:center; gap:.5rem}
.ivy-footer__list--links a::before{
  content:""; width:0; height:1px; background:var(--color-gold-light); transition:width .26s var(--ease);
}
.ivy-footer__list--links a:hover::before{width:14px}
.ivy-footer__loc{color:var(--color-on-dark-mut); font-size:.95rem; margin:0 0 1.35rem}
.ivy-footer__loc strong{display:block; color:var(--color-on-dark); font-weight:500; font-family:var(--font-display); font-size:1.12rem; margin-bottom:.25rem}
.ivy-footer .ivy-socials{margin-top:1.5rem}
.ivy-footer .ivy-socials a{border-color:rgba(243,239,228,.24); color:var(--color-on-dark)}
.ivy-footer .ivy-socials a:hover{background:var(--color-gold-light); border-color:var(--color-gold-light); color:var(--color-deep)}
.ivy-footer__bar{
  border-top:1px solid rgba(243,239,228,.14); padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:center; justify-content:space-between;
  font-size:.82rem; color:var(--color-on-dark-mut);
}
.ivy-footer__bar p{margin:0}
.ivy-footer__legal{display:flex; flex-wrap:wrap; gap:1.25rem}
/* Build credit — quieter than the copyright line beside it. */
.ivy-footer__credit{font-size:.76rem; letter-spacing:.04em; color:rgba(243,239,228,.45)}
@media (max-width:980px){.ivy-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ivy-footer__grid{grid-template-columns:1fr; gap:2.5rem}}

/* =========================================================================
   17. FLOATING BUTTONS — WhatsApp (left, by client request) + scroll-to-top (right)
   ========================================================================= */
.ivy-float{
  position:fixed; z-index:850; display:inline-grid; place-items:center;
  width:54px; height:54px; border-radius:50%; border:0; cursor:pointer;
  box-shadow:var(--shadow-md); text-decoration:none;
  transition:transform .28s var(--ease), opacity .28s var(--ease), visibility .28s, background-color .28s var(--ease);
}
.ivy-float:hover{transform:translateY(-3px) scale(1.04)}
.ivy-float svg{width:26px; height:26px}

/* CookieYes parks its "revisit consent" badge in the bottom-left corner, right
   on top of this button. 100px clears it and puts WhatsApp on the same line as
   the chat bubble on the other side, which reads as a deliberate pair rather
   than two buttons that happen to be in the corners. */
.ivy-float--whatsapp{
  left:clamp(14px,2.2vw,26px);
  bottom:100px;
  background:#25d366; color:#fff;
}
.ivy-float--whatsapp:hover{background:#1eb757; color:#fff}

.ivy-float--top{
  right:clamp(14px,2.2vw,26px);
  bottom:clamp(18px,3vh,28px);
  background:var(--color-primary); color:var(--color-on-dark);
  opacity:0; visibility:hidden; pointer-events:none;
}
.ivy-float--top.is-visible{opacity:1; visibility:visible; pointer-events:auto}
.ivy-float--top:hover{background:var(--color-deep); color:#fff}
.ivy-float--top svg{width:20px; height:20px}

/* Short viewports and phones. The WhatsApp offsets track the chat bubble's own
   mobile offset so the two stay level. */
@media (max-width:480px){
  .ivy-float{width:48px; height:48px}
  .ivy-float svg{width:23px; height:23px}
  .ivy-float--whatsapp{bottom:88px}
}
@media (max-height:520px){
  .ivy-float{width:44px; height:44px; bottom:12px}
  .ivy-float svg{width:20px; height:20px}
  .ivy-float--whatsapp{bottom:70px}
}

/* =========================================================================
   18. REVEAL ON SCROLL
   ========================================================================= */
.ivy-reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.ivy-reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .ivy-reveal{opacity:1; transform:none; transition:none}
  .ivy-card:hover,.ivy-post-card:hover,.ivy-btn:hover,.ivy-float:hover{transform:none}
}

/* =========================================================================
   19. WORDPRESS CORE CLASSES + misc
   ========================================================================= */
.alignleft{float:left;margin:.5em 1.75em 1.25em 0}
.alignright{float:right;margin:.5em 0 1.25em 1.75em}
.aligncenter{margin-inline:auto; display:block}
.alignwide{max-width:min(1180px,92vw); margin-inline:auto}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:.84rem; color:var(--color-muted); text-align:center; margin-top:.75rem; font-style:italic}
.sticky .ivy-post-card{border-color:var(--color-accent-gold)}
.ivy-no-results{text-align:center; padding-block:clamp(3rem,8vw,6rem)}

/* =========================================================================
   20. ABOUT — round portrait under the heading
   ========================================================================= */
/* Small round portrait, sitting above the page title */
.ivy-portrait__frame{
  width:clamp(96px,12vw,132px); aspect-ratio:1;
  margin:0 auto clamp(1.5rem,3vw,2rem);
  border-radius:50%; overflow:hidden; position:relative;
  outline:1px solid rgba(201,161,95,.55); outline-offset:7px;
  box-shadow:0 14px 40px rgba(0,0,0,.3);
}
.ivy-portrait__frame img{width:100%; height:100%; object-fit:cover; display:block}
.ivy-portrait__caption{
  margin:0; font-family:var(--font-body);
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em;
  color:var(--color-gold-light);
}

/* =========================================================================
   21. GALLERY — native Gallery / Video blocks, re-gridded by the theme
   ========================================================================= */
.ivy-gallery-page{max-width:none}

.ivy-content .wp-block-gallery,
.ivy-content .blocks-gallery-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(.75rem,1.5vw,1.15rem);
  margin-block:clamp(2rem,4vw,3rem);
  padding:0; list-style:none;
}
.ivy-content .wp-block-gallery .wp-block-image,
.ivy-content .blocks-gallery-grid .blocks-gallery-item{
  margin:0; width:auto !important; position:relative; overflow:hidden;
  border-radius:var(--radius-lg); background:var(--color-bg-alt);
}
.ivy-content .wp-block-gallery figure,
.ivy-content .blocks-gallery-grid figure{margin:0; height:100%}
.ivy-content .wp-block-gallery img,
.ivy-content .blocks-gallery-grid img{
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
  margin:0; border-radius:0; display:block;
  transition:transform .6s var(--ease);
}
.ivy-content .wp-block-gallery .wp-block-image:hover img,
.ivy-content .blocks-gallery-grid .blocks-gallery-item:hover img{transform:scale(1.05)}
.ivy-content .wp-block-gallery figcaption,
.ivy-content .blocks-gallery-grid figcaption{
  position:absolute; inset:auto 0 0 0; margin:0; padding:2.5rem .9rem .8rem;
  background:linear-gradient(to top, rgba(20,48,31,.85), transparent);
  color:var(--color-on-dark); font-size:.8rem; text-align:left; font-style:normal;
}

/* Theme's own gallery grid — portrait tiles, because the photographs are
   portrait. Forcing them into landscape would cut heads off. */
.ivy-gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(.9rem,2vw,1.4rem);
}
.ivy-gallery__item{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius-lg); background:var(--color-bg-alt);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ivy-gallery__item:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.ivy-gallery__item img{
  width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
}
.ivy-gallery__item:hover img{transform:scale(1.05)}
/* pointer-events:none — bez tego nakladka lapie klikniecie zamiast lightboxa */
.ivy-gallery__zoom{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  background:linear-gradient(to top, rgba(20,48,31,.55), rgba(20,48,31,.12) 55%, transparent);
  color:var(--color-on-dark); opacity:0; transition:opacity .3s var(--ease);
}
.ivy-gallery__item:hover .ivy-gallery__zoom,
.ivy-gallery__item:focus-visible .ivy-gallery__zoom{opacity:1}
.ivy-gallery__zoom svg{
  width:44px; height:44px; padding:10px; border-radius:50%;
  background:rgba(243,239,228,.14); border:1px solid rgba(243,239,228,.4);
}
@media (prefers-reduced-motion: reduce){
  .ivy-gallery__item:hover{transform:none}
  .ivy-gallery__item img{transition:none}
  .ivy-gallery__item:hover img{transform:none}
}

/* YouTube Shorts — 9:16, so they get their own narrower grid rather than the
   photo grid's portrait tiles. Capped so three clips do not tower over the
   page on a wide monitor. */
.ivy-videos__head{margin-top:clamp(3rem,6vw,4.5rem)}
.ivy-videos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(1rem,2.5vw,1.75rem);
  max-width:900px;
}
.ivy-videos__item{
  aspect-ratio:9/16; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--color-deep); box-shadow:var(--shadow-md);
}
.ivy-videos__item iframe{width:100%; height:100%; border:0; display:block}
@media (max-width:520px){
  .ivy-videos{grid-template-columns:1fr; max-width:340px; margin-inline:auto}
}

/* Anything clickable in a lightboxed area advertises itself */
[data-ivy-lightbox] .wp-block-image img,
[data-ivy-lightbox] .wp-block-gallery img{cursor:zoom-in}

/* Video — hosted embeds and self-hosted files get the same frame */
.ivy-content .wp-block-embed__wrapper,
.ivy-content .wp-block-video{
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  margin-block:clamp(2rem,4vw,3rem); background:var(--color-deep);
}
.ivy-content .wp-block-embed.is-type-video .wp-block-embed__wrapper{position:relative; padding-top:56.25%}
.ivy-content .wp-block-embed.is-type-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.ivy-content .wp-block-video video{width:100%; display:block; border-radius:var(--radius-lg)}

/* Two-up video row on wide screens, when the client uses columns */
.ivy-content .wp-block-columns{gap:clamp(1rem,2.5vw,1.75rem)}

/* =========================================================================
   22. LIGHTBOX
   ========================================================================= */
.ivy-lightbox{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(12,26,18,.94);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.ivy-lightbox.is-open{opacity:1; visibility:visible}
.ivy-lightbox__figure{margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:1rem; align-items:center}
.ivy-lightbox__img{
  max-width:100%; max-height:78vh; width:auto; height:auto;
  border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.ivy-lightbox__caption{color:var(--color-on-dark-mut); font-size:.9rem; text-align:center; max-width:60ch}
.ivy-lightbox__btn{
  position:absolute; display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(243,239,228,.1); border:1px solid rgba(243,239,228,.25);
  color:var(--color-on-dark); transition:background-color .24s var(--ease), border-color .24s var(--ease);
}
.ivy-lightbox__btn:hover{background:var(--color-accent-gold); border-color:var(--color-accent-gold); color:#231a06}
.ivy-lightbox__btn svg{width:20px; height:20px}
.ivy-lightbox__close{top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem)}
.ivy-lightbox__prev{left:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%)}
.ivy-lightbox__next{right:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%)}
.ivy-lightbox__prev svg{transform:rotate(180deg)}
.ivy-lightbox__count{
  position:absolute; bottom:clamp(1rem,3vw,2rem); left:50%; transform:translateX(-50%);
  color:var(--color-on-dark-mut); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
@media (max-width:600px){
  .ivy-lightbox__btn{width:44px; height:44px}
  .ivy-lightbox__prev{left:.5rem} .ivy-lightbox__next{right:.5rem}
  .ivy-lightbox__img{max-height:66vh}
}
@media (prefers-reduced-motion: reduce){
  .ivy-lightbox{transition-duration:.01s}
  .ivy-content .wp-block-gallery img{transition:none}
}

/* Booking page — host container for whichever booking plugin is activated */
.ivy-booking-embed{
  background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-lg); padding:clamp(1.25rem,3vw,2.25rem); box-shadow:var(--shadow-sm);
}
.ivy-notice{
  padding:1.25rem 1.5rem; border-left:2px solid var(--color-accent-gold);
  background:var(--color-bg-alt); border-radius:0 var(--radius) var(--radius) 0;
  font-size:.95rem; color:var(--color-muted);
}
.ivy-cta-band{text-align:center}
.ivy-cta-band .ivy-hero__actions{justify-content:center}