/* ===========================================================================
   BRAND TOKENS  (every colour/font from the brief lives here)
   =========================================================================== */
:root{
  --orange:#E4932D;            /* Book Now btn, price highlight */
  --orange-hover:#E6932D;      /* rgb(230,147,45) */
  --nav-bg:#1D3033;
  --teal:#2E5252;              /* body text, footer, icon circle */
  --olive:#5F6A4C;             /* Meet Jane left panel */
  --cream:#F2ECE4;             /* section bands  rgb(242,236,228) */
  --cream-dark:#EBDFCF;        /* about-nat image panel  rgb(235,223,207) */
  --grey:#78736F;              /* nav hover + price heading */
  --error:#F36154;            /* missed-field border */
  --submit-hover:#C49875;      /* rgb(196,152,117) submit hover */
  --white:#FFFFFF;

  --font-body:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* sans throughout */
  --font-display:'Playfair Display', Georgia, serif;

  --maxw:1200px;
  --pad:clamp(20px,5vw,60px);
  --section-y:clamp(54px,8vw,96px);
  --nav-h:62px;                 /* sticky nav height — kept in sync with .nav__inner min-height; used for anchor scroll offset */

  /* Motion (button value taken from brief; carousel/modal tuned to match feel) */
  --t-btn:0.4s ease;          /* border-color + background-color, per brief */
  --t-fade:0.45s ease;
  --carousel-fade:0.7s;       /* testimonial dissolve  (adjustable) */
  --carousel-dwell:8000;      /* ms per slide (read by JS, adjustable) */
}

/* ===========================================================================
   BASE  (mobile-first)
   =========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);font-size:17px;line-height:1.7;
  color:var(--teal);background:var(--white);-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0 0 .5em;color:var(--teal)}  /* 1.15 on mobile (wrapping); steps toward 1.0 at desktop */
h2{font-size:clamp(28px,5vw,40px)}
h3{font-size:clamp(22px,3vw,28px)}
p{margin:0 0 1em}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--section-y)}
.section-icon{width:54px;height:54px;margin-bottom:18px}

/* Shared button (Book Now / Read More) — brief spec: 5px radius, 0.4s ease */
.btn{
  display:inline-block;cursor:pointer;font-family:var(--font-body);font-weight:700;
  font-size:15px;letter-spacing:.02em;padding:13px 30px;border-radius:5px;border:0;
  background:var(--orange);color:var(--white);text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 4px #0009;transition:background-color var(--t-btn),border-color var(--t-btn);
}
.btn:hover{background:var(--orange-hover)}

/* Anchor targets: offset scroll position so headings clear the sticky nav (kept in
   sync with --nav-h, which changes at the tablet/desktop breakpoints below) */
#welcome,#conditions,#services,#testimonials,#contact{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ===========================================================================
   NAVIGATION  (#1D3033, white links, grey hover, orange Book Now)
   =========================================================================== */
.nav{position:-webkit-sticky;position:sticky;top:0;z-index:60;background:var(--nav-bg)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:62px}  /* mobile */
.nav__logo{flex:0 0 auto}
.nav__logo img{width:240px;height:auto}            /* brief: logo 240px, keep proportion */
.nav__links{display:none;list-style:none;margin:0;padding:0;gap:30px;align-items:center}
.nav__links a{color:var(--white);font-weight:600;font-size:15px;text-decoration:none;transition:color var(--t-fade);white-space:nowrap}
.nav__links a:hover{color:var(--submit-hover)}
.nav__cta{display:none}
/* Book Now must never shrink/wrap: it keeps its 165x34 shape at every width the
   tablet+ nav is shown at. Room for it is instead freed up by shrinking the logo
   and easing the link spacing/size a little as the viewport narrows toward 900px —
   see the fluid clamp() values in the 900px tier below. No extra breakpoint needed. */
.nav__cta{flex-shrink:0}
.nav__burger{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger span{width:26px;height:2px;background:var(--white);border-radius:2px;transition:.25s}
.nav.open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav__burger span:nth-child(2){opacity:0}
.nav.open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__panel{display:none;flex-direction:column;background:var(--nav-bg);padding:6px var(--pad) 22px}
.nav__panel.open{display:flex}
.nav__panel a{color:var(--white);font-weight:600;padding:13px 2px;text-decoration:none;border-top:1px solid rgba(255,255,255,.12)}
.nav__panel .btn{margin-top:16px;text-align:center}

/* ===========================================================================
   HERO / TITLE SECTION  (chamomile bg, stacked logo, white tagline, button)
   =========================================================================== */
.hero{
  position:relative;text-align:center;color:var(--white);
  min-height:max(750px,75vh);            /* brief: ~750px / 75% of viewport depth */
  display:flex;align-items:center;justify-content:center;
  background-color:#3a4830;             /* fallback while image loads */
  background-image:url('/assets/hero-760.webp');
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.hero__inner{padding-block:40px;display:flex;flex-direction:column;align-items:center;gap:26px}
.hero__logo{width:min(400px,76vw);height:auto}
.hero__tagline{font-family:var(--font-body);font-size:clamp(18px,2.8vw,28px);font-weight:300;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.55)}
/* Tagline + button fade in ~1s after load (logo stays put) */
.hero__tagline,.hero .btn{opacity:0;animation:heroFade 1s ease .35s forwards}
@keyframes heroFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===========================================================================
   MEET JANE  (split frame: olive panel + white panel)
   =========================================================================== */
.meet{display:grid;grid-template-columns:1fr}
/* Mobile (stacked): a contained photo on the olive panel with olive showing on
   all four sides (matches the live site's treatment at every breakpoint —
   there is always green space above/below/either side of the photo, not just
   left/right). The image keeps a fixed portrait aspect ratio matching
   jane-tall's native 417x500 and is cropped to it with object-fit, rather
   than being stretched to fill the panel. */
.meet__photo{background:var(--olive);display:flex;align-items:center;justify-content:center;padding:clamp(28px,7vw,48px)}
/* <picture> is the actual flex child here, and — being an unstyled wrapper — sizes
   itself to the image's natural size rather than the img's own width, then
   left-aligns the (correctly sized) img inside that oversized box. display:contents
   takes picture out of the box model so the img is centred directly. */
.meet__photo picture{display:contents}
.meet__photo img{width:66%;max-width:300px;aspect-ratio:417/500;height:auto;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 15%;object-position:50% 15%}
.meet__body{background:var(--white);padding:clamp(48px,7vw,96px) var(--pad);text-align:center}  /* live site centres this */
.meet__body p{line-height:1.8}                                                                  /* Wix: 180% */
.meet__body .section-icon{fill:var(--teal);margin-inline:auto}
.meet__body h2{margin-top:0}

/* ===========================================================================
   WELCOME + CONDITIONS  (cream band)
   =========================================================================== */
.band-cream{background:var(--cream)}
/* Two cream sections back-to-back (Conditions -> From the Blog) share the same
   background, so their stacked top+bottom section padding reads as one odd,
   over-large gap with no visual break to justify it. Shrink just that shared
   edge to 60% of the normal section gap; unrelated section spacing elsewhere
   on the page is untouched.
   This is the one deliberately-kept use of :has() in this file (the other two —
   dispensary full-bleed and its CTA centering — were switched to explicit
   template classes; see dispensary.njk). Left as :has() here on purpose: without
   it, on a browser that doesn't support :has(), both bands just keep their full
   normal gap — a bit more whitespace, nothing broken. A class-based fix would
   also be more fragile than this, since it'd hardcode "these two specific
   sections are adjacent," which breaks quietly if the section order ever changes
   (e.g. articles get hidden, or a section gets reordered), whereas :has() keeps
   detecting the real adjacency automatically regardless of what's arranged next
   to what. */
.band-cream.section:has(+ .band-cream.section){padding-bottom:calc(var(--section-y) * 0.6)}
.band-cream.section + .band-cream.section{padding-top:calc(var(--section-y) * 0.6)}

/* --- Section 3: Welcome --- */
.welcome{text-align:left;max-width:calc(var(--maxw) * 0.8);margin-inline:auto}  /* 80% of container width = 960px at desktop */
.welcome .section-icon{
  width:32px;height:32px;                              /* Wix: 32×32px */
  display:block;margin-inline:auto;                    /* centred */
  margin-top:30px;margin-bottom:48px;                  /* +30px above icon, +30px before heading */
}
.welcome h2{font-size:clamp(22px,3.2vw,36px);font-weight:400;text-align:center}  /* Wix: 36px w400 centred */
.welcome>p{font-size:clamp(16px,1.8vw,20px);line-height:1.4;color:var(--teal)}
.welcome ul{list-style:none;margin:1.1em 0;padding:0;display:grid;gap:.6em}
.welcome li{position:relative;padding-left:2.2em;font-size:clamp(16px,1.8vw,20px);line-height:1.45;color:var(--teal)}  /* Wix: 1.4; +.05 mobile buffer */
.welcome li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--teal)}
.welcome .bullet-bold{font-weight:700}                 /* bold first word via span */
.welcome .cta-bold{font-weight:700;color:#2a2a2a}      /* "Book Now" bold near-black */

/* --- Section 4: Conditions --- */
.conditions{margin-top:8px}                            /* inherits container padding */
.conditions h2{font-size:clamp(22px,3.2vw,36px);font-weight:400;text-align:center;margin-block:48px}
/* Grid is real grid (not absolute) so columns NEVER overlap — fixes the Wix bug.
   3 cols desktop -> 2 cols tablet -> 1 col mobile (per brief). */
.cond-grid{display:grid;grid-template-columns:1fr;gap:38px 46px;margin-top:30px}
.cond h3{color:var(--teal);font-weight:500;margin-bottom:.35em}   /* one step less than bold */
.cond p{margin:0;color:#32302f;line-height:1.5}         /* body text near-black; Wix: 150% */
.cond__text{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.cond.open .cond__text{-webkit-line-clamp:unset;overflow:visible}
.cond__more{
  display:inline-block;margin-top:10px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:16px;color:#000;text-decoration:underline;
}
.conditions .btn-row{text-align:center;margin-top:34px}
.cond__article-link{display:inline-block;margin-top:10px;margin-left:14px;font-weight:700;color:var(--orange);text-decoration:none}
.cond__article-link:hover{text-decoration:underline}

/* ===========================================================================
   TESTIMONIALS  (white bg, fade carousel, green dots -> white ring when active)
   =========================================================================== */
.testi{text-align:center}
.testi .section-icon{width:32px;height:32px;margin-inline:auto;margin-top:30px;margin-bottom:0}
.testi h2{font-size:clamp(22px,3.2vw,36px);font-weight:400;text-align:center;margin-block:48px}
.testi__stage{max-width:780px;margin:26px auto 0;position:relative;min-height:230px}
.slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity var(--carousel-fade) ease, visibility var(--carousel-fade) ease;
}
.slide.active{opacity:1;visibility:visible;position:relative}
.slide p{font-family:var(--font-body);font-size:clamp(16px,2vw,18px);color:var(--teal);white-space:pre-line;line-height:1.8}  /* Wix: 180% */
.slide cite{display:block;margin-top:14px;font-style:normal;font-weight:700;color:var(--teal)}
.dots{display:flex;justify-content:center;gap:14px;margin-top:30px}
.dots button{
  width:14px;height:14px;border-radius:50%;border:2px solid var(--teal);background:var(--teal);
  cursor:pointer;padding:0;transition:background-color var(--t-fade),border-color var(--t-fade);
}
.dots button.active{background:var(--white)}   /* white fill, green (teal) border */

/* ===========================================================================
   BOOKINGS & PRICES  (cream band, white panel)
   =========================================================================== */
.panel{background:var(--white);border-radius:8px;padding:clamp(30px,5vw,56px);box-shadow:0 14px 40px -28px rgba(46,82,82,.5)}
.prices{font-family:var(--font-display)}
/* Two-column grid: label+price left, body text right */
.price-grid{display:grid;grid-template-columns:1fr;gap:clamp(12px,2vw,20px);margin-bottom:clamp(28px,4vw,44px)}
.price-grid:last-child{margin-bottom:0}
.price-label h2{color:var(--orange);margin:0;font-size:clamp(22px,3.2vw,36px);font-weight:400}
.price-label h3{color:var(--grey);font-weight:600;margin:0}
.price-label .amount{display:block;font-family:var(--font-display);font-weight:700;color:var(--orange);font-size:clamp(24px,3vw,30px);margin-top:.25em}
.price-body p{font-family:var(--font-display);font-weight:400;color:var(--teal);margin:0;line-height:1.8}  /* Wix: 180% */
@media(min-width:700px){
  .price-grid{grid-template-columns:1fr 2fr;align-items:start}
}

/* ===========================================================================
   DISPENSARY  — full-bleed image with overlapping panel
   =========================================================================== */
/* Mobile: image above, panel below */
.dispensary{display:flex;flex-direction:column}
.dispensary__img img{display:block;width:100%;height:clamp(260px,60vw,480px);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}
.dispensary__body{padding:clamp(28px,5vw,48px) clamp(20px,5vw,60px)}
.dispensary h2,.dispensary h3{color:var(--orange);line-height:1.4}  /* Wix: 140% for this section */
.dispensary h3{margin-top:1em}
.dispensary .panel p{line-height:1.8}                               /* Wix: 180% */
/* Was `.dispensary p:has(.btn)` — switched to an explicit class (set directly in
   dispensary.njk) so this doesn't depend on :has() support at all. Not every
   old/frozen browser Jane's clients might be on supports :has() yet. */
.dispensary__cta{text-align:center;margin-top:1.5em}
.dispensary .btn{padding-inline:5vw}
/* Desktop: image fills section height, panel floats right and overlaps image */
@media(min-width:900px){
  /* Was `.band-cream:has(.dispensary)` — same reasoning as .dispensary__cta above:
     an explicit class (set in dispensary.njk) instead of a :has() dependency, since
     this one visibly matters (it's what makes the image go edge-to-edge — without
     it the section keeps its normal padding and the image looks "boxed" instead
     of full-bleed) so it's worth not leaving it dependent on :has() support. */
  .band-cream.dispensary-band{padding-block:0}
  .dispensary{flex-direction:row;position:relative;min-height:560px}
  .dispensary__img{position:absolute;top:0;left:0;bottom:0;width:60%;overflow:hidden}
  .dispensary__img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
  .dispensary__body{margin-left:auto;width:55%;position:relative;z-index:1;padding:clamp(40px,6vw,72px) clamp(24px,4vw,56px);display:flex;align-items:center}
  .dispensary__body .panel{width:100%}
}

/* ===========================================================================
   QUOTE BAND  (branches bg, white Playfair quote)
   =========================================================================== */
.quote-band{
  text-align:center;color:var(--white);
  background:linear-gradient(rgba(30,33,23,.62),rgba(30,33,23,.68)),url('/assets/branches.webp') center/cover no-repeat;
}
.quote-band blockquote{font-family:var(--font-display);font-size:clamp(22px,3.4vw,32px);line-height:1.2;max-width:28ch;margin:0 auto .6em;color:var(--white)}  /* Wix: 1.0; 1.2 for mobile readability */
.quote-band cite{font-style:normal;font-family:var(--font-body);color:var(--white)}

/* ===========================================================================
   CONTACT / FOOTER  (dark teal, white text, underline form)
   =========================================================================== */
.contact{background:var(--teal);color:var(--white)}
.contact a{color:var(--white)}
.contact .section-icon{width:32px;height:32px;fill:var(--white)}
.contact h2{color:var(--white)}
.contact__grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,60px)}
.contact__info p{margin:0 0 1em;line-height:1.35}  /* Wix: 1.0–1.4 mixed; 1.35 mobile-safe */
.contact__info .label{display:block;font-weight:700}

/* Underline-only fields (white bottom border; 50% on hover) */
.form{display:grid;gap:24px}
.form .row{display:grid;grid-template-columns:1fr;gap:24px}
.field{position:relative;display:flex;flex-direction:column}
.field label{font-size:13px;font-weight:700;letter-spacing:.02em;margin-bottom:6px;opacity:.9}
.field input,.field textarea{
  font-family:var(--font-body);font-size:16px;color:var(--white);background:transparent;
  border:0;border-bottom:1px solid var(--white);padding:8px 2px;width:100%;transition:border-color var(--t-fade);
}
.field textarea{resize:vertical;min-height:90px}
.field input::-moz-placeholder, .field textarea::-moz-placeholder{color:rgba(255,255,255,.6)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.6)}
.field input:hover,.field textarea:hover{border-bottom-color:rgba(255,255,255,.5)}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--white);border-bottom-width:2px}
/* Missed required field (first/last/email only) */
.field.invalid input{border-bottom-color:var(--error)}
.field__err{display:none;align-items:center;gap:8px;margin-top:8px;color:var(--error);font-size:13.5px;font-weight:600}
.field.invalid .field__err{display:flex}
.field__err .ico{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--teal);
  border:1.5px solid var(--error);color:var(--error);font-weight:800;font-size:12px;
  display:grid;place-items:center;font-family:var(--font-body);
}
/* Submit: white border/text on teal; hover dissolves to #C49875 */
.btn-submit{
  justify-self:start;background:var(--teal);color:var(--white);border:1.5px solid var(--white);
  border-radius:5px;padding:12px 34px;font-family:var(--font-body);font-weight:700;font-size:15px;cursor:pointer;
  transition:color var(--t-btn),border-color var(--t-btn);
}
.btn-submit:hover{color:var(--submit-hover);border-color:var(--submit-hover)}
.form__status{font-size:14px;font-weight:600;min-height:1em}
.form__status.ok{color:#bfe3c8}
.form__status.bad{color:var(--error)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Footer bottom bar */
.footer-bar{background:var(--teal);border-top:1px solid rgba(255,255,255,.12);color:var(--white);text-align:center;padding:24px var(--pad)}
.footer-bar .socials{display:flex;justify-content:center;gap:16px;margin-bottom:12px}
.footer-bar .socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--white)}
.footer-bar small{opacity:.85;font-size:13px}

/* ===========================================================================
   ABOUT JANE PAGE
   =========================================================================== */
/* =====================================================================
   ABOUT JANE PAGE  —  mobile-first, two-section layout
   Section 1: white left (58% text) | olive right (42% photo)
   Section 2: cream left (42% photo) | white right (58% text)
   ===================================================================== */

/* ---- Shared mobile: panels stack, image above text ---- */
.about-bio,.about-nat{display:flex;flex-direction:column}

/* Photo panels — mobile: image on top, max-width 70vw, centred (same
   treatment as .about-nat__img below — both axes centred, symmetric padding) */
.about-bio__photo{
  background:var(--olive);
  order:1;
  display:flex;justify-content:center;align-items:center;
  padding:clamp(28px,6vw,48px) 0;
}
/* <picture> is an unstyled wrapper — without this it sizes itself to the
   image's natural pixel size rather than the img's own width:60% below, so
   the percentage never resolves and the photo renders at a fixed size
   instead of scaling with the column (same fix as .meet__photo picture). */
.about-bio__photo picture{display:contents}
.about-bio__photo img{width:70vw;max-width:70vw;height:auto}

.about-nat__img{
  background:var(--cream-dark);
  order:1;
  display:flex;justify-content:center;align-items:center;
  padding:clamp(28px,6vw,48px) 0;
}
.about-nat__img img{width:70vw;max-width:70vw;height:auto}

/* Text panels — mobile: below image */
.about-bio__text{
  background:var(--white);
  order:2;
  padding:clamp(32px,5vw,56px) var(--pad);
}
.about-bio__text h2{color:var(--teal);margin-top:0}
.about-bio__text p{line-height:1.8;color:var(--teal)}

.about-nat__text{
  background:var(--cream);
  order:2;
  padding:clamp(32px,5vw,56px) var(--pad);
}
.about-nat__text h2{color:var(--teal);margin-top:0}
.about-nat__text p{line-height:1.8;color:var(--teal)}

/* ---- Desktop (≥ 900px): side-by-side ---- */
@media(min-width:900px){

  /* Section 1: text LEFT 58% white | photo RIGHT 42% olive */
  .about-bio{flex-direction:row;align-items:stretch}

  .about-bio__text{
    flex:0 0 58%;order:1;
    /* Percentage padding resolves against the flex ROW's width, not this
       column's own width — 11.6% of the row = 20% of this 58%-wide column,
       leaving text at ~60% of the column (was 16% → ~28/45/28). Always
       comfortably above the 7%-of-page minimum gutter, so no separate
       clamp/floor is needed. */
    padding:clamp(56px,7vw,96px) 11.6%;
  }

  .about-bio__photo{
    flex:0 0 42%;order:2;
    align-items:flex-start;
    /* Same top padding as .about-bio__text (both have margin:0 on their
       first child), so the photo's top edge lines up exactly with the
       "About Me" heading's top edge instead of just being near it. */
    padding:clamp(56px,7vw,96px) 0 0;
  }
  .about-bio__photo img{
    /* Hard-capped at jane-tall's native 417px so very wide screens (e.g.
       Jane's work monitor) never upscale it past its own resolution and
       soften/pixellate it — .about-bio__photo's justify-content:center
       (inherited from the mobile rule above) keeps it centred in the
       column either way, whether width:60% or the 417px cap is binding. */
    width:60%;max-width:417px;
  }

  /* Section 2: photo LEFT 42% cream | text RIGHT 58% white */
  .about-nat{flex-direction:row;align-items:stretch}

  .about-nat__img{
    flex:0 0 42%;order:1;
    padding:clamp(40px,6vw,72px) 0;   /* vertical padding; image centred */
  }
  .about-nat__img img{
    width:60%;max-width:60%;
  }

  .about-nat__text{
    flex:0 0 58%;order:2;
    padding:clamp(56px,7vw,96px) 11.6%;  /* same ~60% text width as .about-bio__text */
  }
}

/* ===========================================================================
   ARTICLES / BLOG  (reuses band-cream, container, btn, section-icon tokens)
   =========================================================================== */
.latest-articles h2,.articles-index h1{text-align:center;font-size:clamp(22px,3.2vw,36px);font-weight:400;margin-block:48px}
.latest-articles .section-icon{width:32px;height:32px;margin-inline:auto;margin-top:30px;margin-bottom:0}
.latest-articles__grid{display:grid;grid-template-columns:1fr;gap:34px;margin-top:30px}
@media(min-width:600px){.latest-articles__grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.latest-articles__grid{grid-template-columns:repeat(3,1fr)}}
.article-card{background:var(--white);border-radius:8px;overflow:hidden;box-shadow:0 14px 40px -30px rgba(46,82,82,.4);display:flex;flex-direction:column}
.article-card img{width:100%;height:180px;-o-object-fit:cover;object-fit:cover}
.article-card h3{margin:16px 16px 8px;font-size:20px}
.article-card h3 a{color:var(--teal);text-decoration:none}
.article-card h3 a:hover{text-decoration:underline}
.article-card p{margin:0 16px 12px;color:#32302f;font-size:15px;line-height:1.5;flex:1}
.article-card__link{display:block;margin:0 16px 16px;font-weight:700;color:var(--orange);text-decoration:none}
.article-card__link:hover{text-decoration:underline}
.latest-articles .btn-row{text-align:center;margin-top:34px}

.article__header{padding-block:clamp(40px,6vw,72px) 0;text-align:left}
.breadcrumbs{margin-bottom:14px}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:0;
  font-family:var(--font-body);font-size:14px}
.breadcrumbs li{display:flex;align-items:center;gap:6px;color:var(--grey)}
.breadcrumbs li+li::before{content:"/";color:var(--grey);opacity:.6}
.breadcrumbs a{color:var(--teal);font-weight:700;text-decoration:none}
.breadcrumbs a:hover{color:var(--orange);text-decoration:underline}
.breadcrumbs li[aria-current="page"]{color:var(--teal);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38ch}
.article__meta{color:var(--grey);font-size:14px}
.article__hero{margin-block:24px}
.article__hero img{width:100%;height:clamp(220px,40vw,420px);-o-object-fit:cover;object-fit:cover;border-radius:8px}
.article__body{max-width:72ch;margin-inline:auto;padding-block:8px 24px}
.article__body p{line-height:1.8}
.article__body h2{font-size:clamp(20px,2.6vw,28px);margin-top:1.2em}
.article__share{
  max-width:72ch;margin-inline:auto;padding-block:20px;border-top:1px solid rgba(46,82,82,.15);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
}
.article__share-label{font-weight:700;font-size:14px;color:var(--grey)}
.article__share-links{display:flex;flex-wrap:wrap;gap:18px}
.article__share-link{
  font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--orange);
  text-decoration:none;background:none;border:0;padding:0;cursor:pointer;
}
.article__share-link:hover{text-decoration:underline}
.article__cta{text-align:center;padding-block:12px 12px}

/* ===========================================================================
   BOOK NOW MODAL  (teal card so it reuses the exact contact-form styling)
   =========================================================================== */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;
  padding:clamp(14px,5vh,56px) 16px;background:rgba(20,30,30,.6);overflow-y:auto}
.modal.open{display:flex}
.modal__card{background:var(--teal);color:var(--white);border-radius:12px;max-width:560px;width:100%;
  padding:clamp(28px,5vw,42px);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.modal__head h2{color:var(--white);margin:0}
.modal__close{background:none;border:0;color:var(--white);font-size:30px;line-height:1;cursor:pointer;padding:0 4px}
.modal__sub{opacity:.85;margin:.4em 0 22px;font-size:15px}

/* Accessibility */
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ===========================================================================
   RESPONSIVE  (the five tiers from the brief, each labelled)
   =========================================================================== */
/* hero image swaps up with viewport (keeps mobile light, desktop crisp) */
@media (min-width:761px){.hero{background-image:url('/assets/hero-1200.webp')}}
@media (min-width:1201px){.hero{background-image:url('/assets/hero-1920.webp')}}

/* ---- VERTICAL TABLET (portrait, >=600px) ---- */
@media (min-width:600px){
  :root{--nav-h:92px}                            /* brief: tablet nav min-height */
  .nav__inner{min-height:92px}
  .cond-grid{grid-template-columns:1fr 1fr}     /* fall back to TWO columns */
  .form .row{grid-template-columns:1fr 1fr}
  /* welcome max-width handles its own width — no padding-inline override needed */
}

/* ---- HORIZONTAL TABLET (landscape tablet, >=900px) ---- */
@media (min-width:900px){
  body{font-size:17.5px}
  /* 900–1200px is tight for logo(240) + 6 links + the fixed 165px Book Now button.
     Rather than let the button shrink/wrap (it must keep its 165x34 shape), the
     logo and link spacing scale down fluidly across this band and settle back at
     their full desktop size by 1200px — no extra breakpoint needed. */
  .nav__logo img{width:clamp(160px,20vw,240px)}
  .nav__links{display:flex;gap:clamp(14px,2.2vw,30px)}
  .nav__links a{font-size:clamp(13.5px,1.5vw,15px)}
  .nav__cta{display:inline-flex;align-items:center;justify-content:center;width:165px;height:34px;padding:0}  /* brief: 165x34 */
  .nav__burger{display:none}
  .nav__panel{display:none!important}
  .meet{grid-template-columns:1fr 1.1fr}
  /* welcome max-width already correct — no override */
  /* Tablet+: the photo keeps its own fixed portrait box (matching jane-tall's
     native 417x500 ratio) inset in the olive panel, with olive showing on all
     four sides — the panel still stretches to fill the grid row height (so
     there's always green space above/below), but the photo itself is centred
     within it rather than stretched to match the row's full height. */
  .meet__photo{padding:clamp(28px,3.5vw,48px);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .meet__photo picture{display:contents}
  .meet__photo img{width:100%;max-width:380px;aspect-ratio:417/500;height:auto;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 15%;object-position:50% 15%}
  .cond-grid{grid-template-columns:repeat(3,1fr)} /* full three columns */
  .contact__grid{grid-template-columns:1fr 1.05fr}
  h2,h3,h4{line-height:1.05}                      /* headings less likely to wrap at tablet+ */
  .quote-band blockquote{line-height:1.1}          /* tighter quote at wider viewports */
}

/* ---- FULL DESKTOP (>=1200px) ---- */
@media (min-width:1200px){ body{font-size:18px} h2{font-size:40px;line-height:1.0} h3,h4{line-height:1.0} .nav__inner{min-height:80px} :root{--nav-h:80px} }  /* full Wix ratio at desktop */  /* brief: desktop nav 80px */

/* ---- HORIZONTAL MOBILE (landscape phone) = horizontal-tablet layout, larger type ---- */
@media (orientation:landscape) and (max-height:500px){
  body{font-size:18.5px}
  .nav__links{display:flex}
  .nav__cta{display:inline-flex;align-items:center;justify-content:center;width:165px;height:34px;padding:0}
  .nav__burger{display:none}
  .nav__panel{display:none!important}
  .meet{grid-template-columns:1fr 1.1fr}
  .meet__photo{padding:clamp(20px,3vw,36px);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .meet__photo picture{display:contents}
  .meet__photo img{width:100%;max-width:320px;aspect-ratio:417/500;height:auto;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 15%;object-position:50% 15%}
  .cond-grid{grid-template-columns:repeat(3,1fr)}
  .contact__grid{grid-template-columns:1fr 1.05fr}
  .hero__inner{padding-block:60px}
}