/* ====================================================================
   HARMONY MOMENTS · styles.css
   ====================================================================
   Mobile-first stylesheet. Base styles target a 375px phone; two
   breakpoints enhance upward:
     @media (min-width: 768px)   tablet
     @media (min-width: 1200px)  desktop
   Media queries live next to the component they modify so each
   section of the site can be edited in one place.

   CONTENTS
   01. Design tokens (colours, type, radii, shadows)
   02. Reset & base
   03. Utilities (container, section, headings, urgency, a11y helpers)
   04. Buttons
   05. Image frames + gradient fallback placeholders
   06. Header & navigation (sticky, hamburger)
   07. Hero
   08. Trust strip
   09. Intro strip
   10. Experiences
   11. CTA band
   12. Gallery
   13. Testimonials
   14. About
   15. Contact
   16. Instagram strip
   17. Footer
   18. Mobile sticky action bar
   19. Motion (fade-ins, scroll indicator, reduced-motion)
   ==================================================================== */


/* ====================================================================
   01. DESIGN TOKENS
   ==================================================================== */
:root {
  /* Brand palette (from the logo + brief) */
  --sage:       #8FAE87;   /* primary brand green */
  --fern:       #5C7A5A;   /* headings & accents */
  --cream:      #F7F3EC;   /* primary background */
  --clay:       #C9836A;   /* terracotta: CTAs ONLY */
  --charcoal:   #3A3A36;   /* body text (never pure black) */
  --cream-deep: #EFE8DC;   /* secondary background */

  /* Derived shades (kept in-family; used for hover states only) */
  --clay-deep:  #B9714F;   /* darker clay for button hover */

  /* Type */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shape & depth: soft rounded corners, gentle shadows */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --shadow-soft: 0 10px 30px rgba(58, 58, 54, 0.08);
  --shadow-lift: 0 18px 44px rgba(58, 58, 54, 0.14);

  /* Layout */
  --header-h: 64px;        /* bumped up at desktop */
  --bar-h: 74px;           /* mobile sticky action bar height */
}


/* ====================================================================
   02. RESET & BASE
   ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;                              /* smooth anchor jumps  */
  scroll-padding-top: calc(var(--header-h) + 14px);     /* clear sticky header  */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;                                     /* generous line-height */
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                                   /* no horizontal scroll */
  /* Keep content clear of the fixed mobile action bar */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  body { padding-bottom: 0; }                           /* bar hidden on desktop */
}

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; font-family: var(--font-heading); font-weight: 600; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; }

a { color: var(--fern); }

::selection { background: rgba(143, 174, 135, 0.35); }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--fern);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn-clay:focus-visible { outline-color: var(--charcoal); }


/* ====================================================================
   03. UTILITIES
   ==================================================================== */
.container {
  width: min(100% - 2.5rem, 1140px);
  margin-inline: auto;
}

.section { padding-block: clamp(4rem, 10vw, 6.75rem); } /* airy whitespace */

/* Centred heading block used by most sections */
.section-head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(2.25rem, 6vw, 3.5rem);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;                               /* airy tracking */
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--fern);
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: clamp(1.95rem, 5vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--fern);
  margin-bottom: 0.75rem;
  text-wrap: balance;
}

.section-intro { color: rgba(58, 58, 54, 0.82); }

/* Scarcity line shown near CTAs */
.urgency {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--fern);
}
.urgency-on-dark { color: rgba(247, 243, 236, 0.92); }

.noscript-note { text-align: center; }

/* Screen-reader-only helper */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link: hidden until focused via keyboard */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  background: var(--fern);
  color: var(--cream);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 0; }


/* ====================================================================
   04. BUTTONS  (min 48px tall = comfortable tap targets)
   ==================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 2rem;
  border: 2px solid transparent;
  border-radius: 999px;                                 /* soft pill shape */
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Primary CTA: the warm terracotta pop — clay is used ONLY here */
.btn-clay {
  background: var(--clay);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(201, 131, 106, 0.35);
}
.btn-clay:hover {
  background: var(--clay-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(201, 131, 106, 0.42);
}

/* Light outline: sits on top of the hero photo */
.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.85);
  color: #FFFFFF;
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.14); }

/* Green outline: sits on cream backgrounds */
.btn-outline {
  border-color: var(--fern);
  color: var(--fern);
}
.btn-outline:hover { background: var(--fern); color: var(--cream); }

/* Compact variant for the nav bar */
.btn-sm {
  min-height: 44px;
  padding: 0.5rem 1.35rem;
  font-size: 0.95rem;
}


/* ====================================================================
   05. IMAGE FRAMES + GRADIENT FALLBACKS
   Every content image sits inside a .frame that owns its aspect
   ratio, radius and a sage-to-cream gradient. The gradient shows
   while an image loads AND becomes the branded placeholder if the
   file is missing (script.js adds .is-fallback + the data-label
   text). To swap a placeholder for a real photo later, just drop
   the correctly named .jpg into the site folder.
   ==================================================================== */
.frame {
  position: relative;
  overflow: hidden;
  margin: 0;                                            /* reset figure */
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg,
              rgba(143, 174, 135, 0.55) 0%,
              var(--cream-deep) 100%);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* Aspect-ratio variants (also prevent layout shift while loading) */
.frame-landscape { aspect-ratio: 4 / 3; }
.frame-square    { aspect-ratio: 1 / 1; }
.frame-portrait  { aspect-ratio: 4 / 5; }

/* Centred label shown when a file is missing (set via data-label) */
.frame.is-fallback::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fern);
}


/* ====================================================================
   06. HEADER & NAVIGATION
   Translucent cream keeps the sage logo legible over the hero.
   Mobile: logo + hamburger, links in a dropdown panel.
   Desktop (768px+): full inline nav + small clay Enquire button.
   ==================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 236, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.3s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(58, 58, 54, 0.08); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 44px; width: auto; }              /* ~40-56px per brief */

/* --- Mobile dropdown panel --- */
.site-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 49;
  background: var(--cream);
  border-bottom: 1px solid rgba(92, 122, 90, 0.15);
  box-shadow: var(--shadow-soft);
  padding: 0.75rem 1.25rem 1.5rem;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
body.nav-open .site-nav {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nav-link {
  display: block;
  padding: 0.85rem 0.25rem;                             /* 48px+ tap target */
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.nav-link:hover { color: var(--fern); }
.nav-cta-item { margin-top: 0.6rem; }
.nav-cta-item .btn { width: 100%; }                     /* full-width in menu */

/* --- Hamburger button --- */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: none;
  border: 0;
  cursor: pointer;
  gap: 0;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 3px 0;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- Tablet / desktop: full inline nav --- */
@media (min-width: 768px) {
  :root { --header-h: 76px; }
  .brand-logo { height: 52px; }
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .nav-links {
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
  }
  .nav-link { padding: 0.4rem 0.1rem; font-size: 0.98rem; }
  .nav-cta-item { margin: 0 0 0 0.35rem; }
  .nav-cta-item .btn { width: auto; }
}


/* ====================================================================
   07. HERO  (full viewport, image full-bleed, soft dark overlay)
   ==================================================================== */
.hero {
  position: relative;
  min-height: 100vh;                                    /* fallback */
  min-height: 100svh;                                   /* mobile URL bar safe */
  display: grid;
  place-items: center;
  /* Branded gradient shows if hero.jpg is missing or still loading */
  background: linear-gradient(160deg, var(--sage) 0%, var(--cream-deep) 100%);
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Soft charcoal wash so cream text always passes contrast */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%,
              rgba(40, 40, 37, 0.5) 0%,
              rgba(40, 40, 37, 0.25) 45%,
              transparent 75%),
    linear-gradient(180deg,
              rgba(40, 40, 37, 0.4) 0%,
              rgba(40, 40, 37, 0.42) 50%,
              rgba(40, 40, 37, 0.68) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 48rem;
  padding-block: 7rem 7.5rem;                           /* clears indicator/bar */
}

.hero-title {
  font-size: clamp(2.5rem, 9vw, 4.6rem);
  line-height: 1.08;
  color: var(--cream);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(30, 30, 28, 0.55), 0 1px 3px rgba(30, 30, 28, 0.4);
}
.hero-title em {                                        /* signature flourish */
  font-style: italic;
  font-weight: 500;
}

.hero-sub {
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: rgba(247, 243, 236, 0.97);
  max-width: 38rem;
  margin: 1.15rem auto 1.9rem;
  text-shadow: 0 1px 12px rgba(30, 30, 28, 0.55);
}

.hero-actions {
  display: flex;
  flex-direction: column;                               /* stacked on mobile */
  align-items: center;
  gap: 0.85rem;
}
.hero-actions .btn { width: min(100%, 320px); }
@media (min-width: 768px) {
  .hero-actions { flex-direction: row; justify-content: center; }
  .hero-actions .btn { width: auto; }
}

/* Bouncing chevron */
.scroll-indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.4rem;                                       /* bar is fixed OVER it */
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--cream);
  animation: heroBounce 2.4s ease-in-out infinite;
}
@media (min-width: 768px) { .scroll-indicator { bottom: 1.75rem; } }
@keyframes heroBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(9px); }
}


/* ====================================================================
   08. TRUST STRIP
   ==================================================================== */
.trust-strip {
  background: var(--fern);
  color: var(--cream);
  padding-block: 1.05rem;
}
.trust-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 2.25rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.trust-item { display: inline-flex; align-items: center; gap: 0.55rem; }
.trust-item::before { content: "\2726"; color: var(--sage); font-size: 0.8em; } /* ✦ */


/* ====================================================================
   09. ABOUT CHIPS  (founder promises, shown under the sign-off)
   ==================================================================== */
.about-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
  padding: 0;
}
.about-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  border-radius: 99px;
  background: var(--cream-deep);
  color: var(--fern);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.about-chip svg { flex: none; }


/* ====================================================================
   10. EXPERIENCES
   Cards are rendered by script.js from the EXPERIENCES array.
   Mobile:   stacked vertical cards
   Tablet:   horizontal cards (image left, copy right)
   Desktop:  three vertical cards side by side
   ==================================================================== */
.experiences { background: var(--cream-deep); }

.experience-grid {
  display: grid;
  gap: 1.75rem;
}

.experience-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.experience-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.experience-card .frame { border-radius: 0; }           /* flush inside card */

.experience-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.6rem 1.5rem 1.8rem;
}

.experience-name {
  font-size: 1.55rem;
  color: var(--fern);
  line-height: 1.2;
}
.experience-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fern);
  opacity: 0.75;
  margin: 0.2rem 0 0.75rem;
}
.experience-desc { margin-bottom: 0.9rem; }

.experience-details {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.4rem;
  font-size: 0.96rem;
}
.experience-details li {
  position: relative;
  padding-left: 1.5rem;
}
.experience-details li::before {
  content: "\2726";                                     /* ✦ */
  position: absolute;
  left: 0;
  color: var(--sage);
  font-size: 0.85em;
  top: 0.2em;
}

.experience-body .btn { margin-top: auto; align-self: flex-start; }

/* Tablet: roomy horizontal cards */
@media (min-width: 768px) {
  .experience-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .experience-card .frame { aspect-ratio: auto; height: 100%; min-height: 300px; }
  .experience-body { padding: 2rem 2.1rem; }
}

/* Desktop: three columns, back to vertical cards */
@media (min-width: 1200px) {
  .experience-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .experience-card { display: flex; flex-direction: column; }
  .experience-card .frame { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .experience-body { padding: 1.8rem 1.7rem 2rem; }
}


/* ====================================================================
   11. CTA BAND
   ==================================================================== */
.cta-band {
  background:
    radial-gradient(90% 150% at 85% 0%, rgba(143, 174, 135, 0.35) 0%, transparent 55%),
    var(--fern);
  color: var(--cream);
  text-align: center;
  padding-block: clamp(3.25rem, 8vw, 4.5rem);
}
.cta-band-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.cta-band .urgency { margin-top: 1.1rem; }


/* ====================================================================
   12. GALLERY
   ==================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);                /* 3-up grid on mobile (9 images = tidy 3x3) */
  gap: 0.5rem;
}
.gallery-grid .frame { border-radius: var(--radius-sm); }
.gallery-grid .frame img { transition: transform 0.5s ease; }
.gallery-grid .frame:hover img { transform: scale(1.045); }

@media (min-width: 768px) {
  .gallery-grid { gap: 1.1rem; }
}


/* ====================================================================
   13. JOURNAL  (single featured article card)
   ==================================================================== */
.journal { background: var(--cream-deep); }

.journal-article {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: grid;
}

.journal-cover {
  aspect-ratio: 16 / 10;
  border-radius: 0;                                     /* corners handled by parent */
  margin: 0;
}

.journal-body {
  padding: 2rem 1.6rem 2.25rem;
}
@media (min-width: 768px) {
  .journal-body { padding: 2.75rem 3rem 3rem; }
  .journal-article { grid-template-columns: 1.05fr 1fr; }
  .journal-cover { aspect-ratio: auto; height: 100%; min-height: 420px; }
}

.journal-meta {
  color: var(--fern);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.journal-title {
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  line-height: 1.2;
  color: var(--fern);
  margin-bottom: 1.1rem;
}

.journal-lede {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--charcoal);
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.journal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  counter-reset: journal;
}
.journal-list > li {
  counter-increment: journal;
  padding-left: 2.4rem;
  position: relative;
  margin-bottom: 1.35rem;
}
.journal-list > li::before {
  content: counter(journal, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--sage);
  line-height: 1;
}
.journal-list h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fern);
  margin: 0 0 0.35rem;
}
.journal-list p { margin: 0; }

.journal-signoff {
  font-style: italic;
  color: var(--fern);
  margin: 0 0 1.4rem;
}


/* ====================================================================
   14. ABOUT
   ==================================================================== */
.about-grid {
  display: grid;
  gap: 2.25rem;
  align-items: center;
}
@media (min-width: 768px) {
  .about-grid { grid-template-columns: 5fr 6fr; gap: 3.5rem; }
}

.about-copy .section-title { margin-bottom: 1rem; }
.about-signoff {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--fern);
  margin-top: 1.25rem;
}
.about-signature { font-weight: 600; white-space: nowrap; }

/* Founder portrait: frame keeps its crop, caption sits below it */
.about-portrait { aspect-ratio: auto; background: none; }
.about-portrait img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.about-caption {
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  opacity: 0.75;
}

.about-quote {
  margin: 1.4rem 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--sage, #8FAE87);
}
.about-quote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--fern);
}


/* ====================================================================
   15. CONTACT  (sage-tinted cream-deep background)
   ==================================================================== */
.contact {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(143, 174, 135, 0.16) 0%, transparent 55%),
    var(--cream-deep);
}

.contact-actions {
  display: grid;
  gap: 1rem;
  max-width: 26rem;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .contact-actions { grid-template-columns: repeat(3, 1fr); max-width: 52rem; }
}

/* Large tappable channel buttons: Instagram / WhatsApp / Email */
.contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 62px;
  padding: 1rem 1.2rem;
  background: #FFFFFF;
  border: 1.5px solid rgba(92, 122, 90, 0.22);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--charcoal);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.contact-btn svg { color: var(--clay); flex: none; }    /* warm CTA accent */
.contact-btn:hover {
  transform: translateY(-2px);
  border-color: var(--clay);
  box-shadow: var(--shadow-lift);
}

.contact-urgency { text-align: center; margin-top: 1.6rem; }


/* ====================================================================
   16. INSTAGRAM STRIP
   ==================================================================== */
.instagram { text-align: center; }

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);                /* 3x2 on mobile */
  gap: 0.6rem;
  margin-bottom: 2.25rem;
}
@media (min-width: 768px) {
  .instagram-grid { grid-template-columns: repeat(6, 1fr); }
}
.frame-mini { border-radius: 10px; }
.frame-mini.is-fallback::after { font-size: 0.8rem; }


/* ====================================================================
   17. FOOTER  (light background so the sage logo never clashes)
   ==================================================================== */
.site-footer {
  background: var(--cream-deep);
  border-top: 1px solid rgba(92, 122, 90, 0.12);
  text-align: center;
  padding: 3.25rem 0 2rem;
}
.footer-logo { height: 66px; width: auto; margin: 0 auto 1.1rem; }
.footer-tagline { font-size: 0.95rem; opacity: 0.85; }

.footer-icons {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin: 1.35rem 0 1.6rem;
}

/* Round icon buttons (footer + sticky bar) */
.icon-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(92, 122, 90, 0.35);
  border-radius: 50%;
  color: var(--fern);
  background: transparent;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.icon-btn:hover { background: var(--fern); color: var(--cream); }

.footer-copy { font-size: 0.84rem; opacity: 0.65; }


/* ====================================================================
   18. MOBILE STICKY ACTION BAR
   Fixed to the bottom of the phone screen; hidden from 768px up.
   ==================================================================== */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(247, 243, 236, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(92, 122, 90, 0.15);
}
.mobile-cta-btn { flex: 1; }
.mobile-cta-bar .icon-btn { flex: none; background: #FFFFFF; }

@media (min-width: 768px) {
  .mobile-cta-bar { display: none; }
}


/* ====================================================================
   19. MOTION
   Subtle fade-in-on-scroll: script.js adds .is-visible when an
   element with .fade-in enters the viewport.
   ==================================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.is-visible { opacity: 1; transform: none; }

/* Simple stagger helpers for grids */
.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1; transform: none; transition: none; }
  .scroll-indicator { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ====================================================================
   20. EXPERIENCES ADD-ONS NOTE
   Small centred line under the package cards; keeps "what's included"
   separate from optional extras like fresh florals.
   ==================================================================== */
.experience-price {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--clay);
  margin: 0.35rem 0 0.9rem;
  letter-spacing: 0.01em;
}

.experiences-note {
  margin: 2.25rem auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--charcoal);
  opacity: 0.9;
}
.experiences-note strong { color: var(--fern); font-weight: 700; }


/* ====================================================================
   21. GALLERY LIGHTBOX
   Full-screen enlarged view opened from the gallery grid (script.js
   section 08). Hidden until .is-open is added.
   ==================================================================== */
.gallery-grid .frame.is-zoomable { cursor: zoom-in; }

body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(58, 58, 54, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }

.lightbox-stage {
  margin: 0;
  max-width: min(92vw, 1100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  background: var(--cream);
}
.lightbox-caption {
  color: var(--cream);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  text-align: center;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--cream);
  background: rgba(247, 243, 236, 0.14);
  border: 1px solid rgba(247, 243, 236, 0.35);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(247, 243, 236, 0.28); }
.lightbox-close { top: clamp(0.8rem, 3vw, 1.6rem); right: clamp(0.8rem, 3vw, 1.6rem); }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-prev { left: clamp(0.5rem, 3vw, 1.6rem); }
.lightbox-next { right: clamp(0.5rem, 3vw, 1.6rem); }

@media (max-width: 600px) {
  .lightbox-close, .lightbox-nav { width: 42px; height: 42px; font-size: 1.5rem; }
}


/* ====================================================================
   22. HOW IT WORKS
   Three numbered steps directly after the trust strip.
   ==================================================================== */
.how-it-works { background: #FFFFFF; }

.steps-grid {
  list-style: none;
  display: grid;
  gap: 2rem;
  counter-reset: step;
  text-align: center;
  max-width: 960px;
  margin-inline: auto;
}
.step { padding-inline: 0.5rem; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--sage-soft, rgba(143, 174, 135, 0.18));
  color: var(--fern);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
}
.step-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fern);
  margin-bottom: 0.4rem;
}
.step-desc { font-size: 0.97rem; line-height: 1.6; max-width: 300px; margin-inline: auto; }

@media (min-width: 768px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}


/* ====================================================================
   23. PERFECT FOR (occasions grid)
   Six image cards linking to contact; whole card is clickable.
   ==================================================================== */
.occasion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.occasion-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
}
.occasion-card .frame {
  border-radius: var(--radius-sm);
  margin-bottom: 0.65rem;
}
.occasion-card .frame img { transition: transform 0.5s ease; }
.occasion-card:hover .frame img { transform: scale(1.045); }
.occasion-name {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fern);
}
.occasions-note {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.97rem;
  opacity: 0.9;
}
.occasions-note a { color: var(--clay); font-weight: 600; }

@media (min-width: 768px) {
  .occasion-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  .occasion-name { font-size: 1.12rem; }
}


/* ====================================================================
   24. FOOTER INFO LINE
   ==================================================================== */
.footer-info {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.5rem;
  margin: 0.9rem 0 1.2rem;
  padding: 0;
  font-size: 0.9rem;
  opacity: 0.85;
}
.footer-info li { position: relative; }
.footer-info li + li::before {
  content: "·";
  position: absolute;
  left: -0.95rem;
  opacity: 0.6;
}


/* ====================================================================
   25. MOBILE COMPACTION
   Phones get tighter vertical rhythm and denser grids so the page
   needs far less scrolling. Desktop layout is untouched.
   ==================================================================== */
@media (max-width: 767px) {
  /* Tighter global rhythm */
  .section { padding-block: clamp(2.4rem, 7vw, 3.25rem); }
  .section-head { margin-bottom: 1.6rem; }
  .hero-content { padding-block: 5rem 5.5rem; }

  /* Steps: numbered rows instead of tall centred blocks */
  .steps-grid { gap: 1.1rem; text-align: left; }
  .step { display: flex; align-items: flex-start; gap: 0.95rem; padding-inline: 0; }
  .step-num { width: 40px; height: 40px; font-size: 1.1rem; margin-bottom: 0; flex: none; }
  .step-name { font-size: 1.05rem; margin-bottom: 0.15rem; }
  .step-desc { max-width: none; margin-inline: 0; font-size: 0.92rem; }

  /* Founder: slimmer portrait so the section costs ~one screen */
  .about-portrait { width: 72%; margin-inline: auto; }
  .about-chips { justify-content: flex-start; }

  /* Experiences: swipe carousel — next card peeks in from the right */
  .experience-grid {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .experience-grid::-webkit-scrollbar { display: none; }
  .experience-grid .experience-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
  .experience-card .frame { aspect-ratio: 16 / 10; }
  .experience-body { padding: 1.3rem 1.25rem 1.5rem; }

  .experience-dots {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1rem;
  }
  .experience-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 99px;
    background: rgba(92, 122, 90, 0.28);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
  }
  .experience-dots button.is-active {
    width: 22px;
    background: var(--clay);
  }

  /* Occasions + gallery: 3-up mini grids */
  /* (dots exist only on mobile; desktop hides them below) */
  .occasion-grid { grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
  .occasion-card .frame { margin-bottom: 0.4rem; }
  .occasion-name { font-size: 0.78rem; }
  .occasions-note { margin-top: 1.4rem; font-size: 0.9rem; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }

  /* Journal + about: tighter internal spacing */
  .journal-list { gap: 1rem; }
  .journal-body { padding: 1.5rem 1.4rem 1.8rem; }
  .cta-band { padding-block: 2.6rem; }
  .about-grid { gap: 1.6rem; }
}

@media (min-width: 768px) {
  .experience-dots { display: none; }
}


/* ====================================================================
   26. ENQUIRY FORM  (Netlify Forms — inline expandable)
   Sits under the three channel buttons in the Contact section.
   ==================================================================== */
.enquiry-wrap {
  max-width: 560px;
  margin: 2rem auto 0;
  text-align: center;
}

.enquiry-heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fern);
}

.enquiry-form {
  margin-top: 1rem;
  padding: 1.75rem;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(58, 58, 54, 0.06);
  text-align: left;
}

.enquiry-row { margin-bottom: 1.05rem; }
.enquiry-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fern);
  letter-spacing: 0.01em;
}
.enquiry-optional {
  font-weight: 400;
  font-style: italic;
  color: rgba(58, 58, 54, 0.5);
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--charcoal);
  background: var(--cream);
  border: 1px solid rgba(92, 122, 90, 0.22);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.enquiry-form textarea { resize: vertical; min-height: 100px; }
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
  outline: none;
  border-color: var(--fern);
  box-shadow: 0 0 0 3px rgba(143, 174, 135, 0.22);
}
.enquiry-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fern) 50%), linear-gradient(-45deg, transparent 50%, var(--fern) 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }

.enquiry-submit {
  margin-top: 0.4rem;
  width: 100%;
}
.enquiry-submit[disabled] { opacity: 0.65; cursor: wait; }

.enquiry-error {
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  background: rgba(184, 108, 84, 0.08);
  border: 1px solid rgba(184, 108, 84, 0.28);
  border-radius: 8px;
  color: var(--clay);
  font-size: 0.9rem;
  text-align: center;
}

.enquiry-thanks {
  margin-top: 1.5rem;
  padding: 1.75rem;
  background: rgba(143, 174, 135, 0.12);
  border-radius: var(--radius-md);
  text-align: center;
}
.enquiry-thanks h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--fern);
  margin-bottom: 0.4rem;
}
.enquiry-thanks p { color: var(--charcoal); }