/*
Theme Name: Coyomena Yoga — Sage
Description: One-page Yoga-Studio-Website-Template (weiche Salbei-/Eukalyptus-Palette). Erzeugt beim Aktivieren automatisch Home-, Imprint- und Privacy-Seiten mit editierbarem Inhalt.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Author: Studio Coyomena
Text Domain: coyomena-yoga-sage
*/


/* ============================================================
   your name yoga — website
   Warm terracotta / sand palette · Caladea + FreeSans
   Glassmorphism + subtle parallax

   Google Fonts are NOT @import'ed here on purpose: @import must be
   the syntactically first rule in a stylesheet, which is fragile
   wherever a CSS file gets server-or-client-side rewritten/merged
   (exactly what WordPress does for add_editor_style() in the Block/
   Site Editor). The font is enqueued separately in functions.php for
   both frontend and editor instead — see coyomena_yoga_sage_block_assets()
   (hooked on enqueue_block_assets, which reaches the editor iframe).
   ============================================================ */

:root{
  /* Logo palette */
  --rose:#c7a99b;        /* light sand-rose (outer shape) */
  --brown:#9a7163;       /* warm brown (middle shape) */
  --terracotta:#8a3a1f;  /* rust accent (line) */

  /* Neutral body text */
  --grey700:#374151;

  /* Surfaces — light tints derived from the rose */
  --paper:#fbf6f2;
  --cream:#f5ece6;
  --sand:#e6d3cb;
  --mist:#e8d6cc;

  /* Aliases kept for compatibility (mapped into palette) */
  --ink:#8a3a1f;
  --slate:#374151;
  --muted:#374151;

  --head:'Caladea','Cambria',Georgia,serif;
  --body:'Helvetica Neue',Helvetica,Arial,'FreeSans',sans-serif;

  --maxw:1180px;
  --gutter:clamp(20px,5vw,64px);

  --glass-bg:rgba(251,246,241,.5);
  --glass-bd:rgba(255,255,255,.55);
  /* Tint used by every shadow & subtle line on the page — overridden per theme. */
  --shadow-rgb:94,58,42;     /* warm brown drop-shadow */
  --accent-rgb:169,104,79;   /* subtle inset/border tint */
  --glass-sh:0 18px 48px -18px rgba(var(--shadow-rgb),.35), inset 0 1px 0 rgba(255,255,255,.65);
}

/* ============================================================
   COLOUR THEME — Terracotta
   The palette lives in :root above. Sage and Lavender variants
   live in their own asset folders (sage-website/, lavender-website/)
   and are loaded by sage.html and lavender.html respectively.
   ============================================================ */

/* ------------------------------------------------------------
   (No script-style themes currently active.)
   ------------------------------------------------------------ */

/* ============================================================
   SECTION RAIL — fixed vertical line on the left edge of the
   viewport, with a dot + label that always shows the current
   section's title. Built from each section's data-screen-label.
   ============================================================ */
.section-rail{
  position:fixed;
  left:max(14px,2vw);
  top:0;
  bottom:0;
  width:30px;
  z-index:60;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brown);
}
.rail-line{
  position:relative;
  width:1px;
  height:62vh;
  background:linear-gradient(to bottom,
    transparent,
    currentColor 12%,
    currentColor 88%,
    transparent);
  opacity:.45;
}
.rail-dot{
  position:absolute;
  left:50%;
  top:calc(19vh + var(--rail-y,0) * 62vh);
  width:9px;height:9px;border-radius:50%;
  background:var(--terracotta);
  transform:translate(-50%,-50%);
  box-shadow:0 6px 14px -4px rgba(0,0,0,.18);
  transition:top .55s cubic-bezier(.2,.7,.3,1), transform .25s, box-shadow .25s;
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
}
.rail-dot:hover{transform:translate(-50%,-50%) scale(1.35);}
.rail-dot::before{
  content:"";position:absolute;left:50%;top:50%;
  width:28px;height:28px;border-radius:50%;
  transform:translate(-50%,-50%);
}
.rail-dot.dragging{
  cursor:grabbing;
  transform:translate(-50%,-50%) scale(1.5);
  box-shadow:0 8px 22px -4px rgba(0,0,0,.28);
  transition:transform .15s, box-shadow .15s;
}
.rail-label{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--body);
  font-size:.6rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--brown);
  white-space:nowrap;
  padding:.4em .9em;
  border-radius:99px;
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 6px 14px -6px rgba(0,0,0,.15);
  opacity:0;
  transform:translate(-6px,-50%);
  transition:opacity .35s, transform .45s cubic-bezier(.2,.7,.3,1);
}
.rail-label.in{opacity:1;transform:translate(0,-50%);}
.rail-label.swap{opacity:0;transform:translate(-6px,-50%);}

/* ---------- back-to-top button ---------- */
.to-top{
  position:fixed;right:clamp(18px,3vw,36px);bottom:clamp(18px,3vw,36px);
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;z-index:90;
  color:var(--brown);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 12px 30px -14px rgba(var(--shadow-rgb),.45), inset 0 1px 0 rgba(255,255,255,.75);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1), background .25s, color .25s;
}
.to-top.show{opacity:1;pointer-events:auto;transform:none;}
.to-top:hover{background:rgba(255,255,255,.85);color:var(--terracotta);}
.to-top svg{width:20px;height:20px;display:block;}

@media (max-width:760px){
  .section-rail{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .rail-dot,.rail-label{transition:none;}
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--grey700);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
}
/* Page-wide ambient light field + grain — fixed in the viewport so
   sections scroll over a stable atmosphere instead of flat colour.
   Built from layered radial gradients: a bright upper-left highlight,
   warm dome lift in the centre, soft tinted blooms diagonally, and a
   subtle corner vignette — together they fake a 3D "room" of light. */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    /* corner vignette — slight darkening pulls the eye inward */
    radial-gradient(140% 110% at 50% 50%, transparent 55%, rgba(var(--shadow-rgb),.10) 88%, rgba(var(--shadow-rgb),.18) 100%),
    /* upper-left bright highlight — primary light source */
    radial-gradient(55% 45% at 14% 8%, color-mix(in srgb, var(--paper) 92%, #fff) 0%, transparent 65%),
    /* soft secondary highlight upper-right, cooler */
    radial-gradient(45% 40% at 92% 18%, color-mix(in srgb, var(--paper) 70%, #fff) 0%, transparent 70%),
    /* warm bloom lower-right */
    radial-gradient(60% 50% at 88% 82%, color-mix(in srgb, var(--mist) 80%, var(--cream)) 0%, transparent 70%),
    /* warm bloom lower-left, deeper */
    radial-gradient(55% 45% at 10% 92%, color-mix(in srgb, var(--sand) 75%, var(--cream)) 0%, transparent 72%),
    /* central dome lift — slight overall brightening at mid-screen */
    radial-gradient(80% 60% at 50% 45%, color-mix(in srgb, var(--paper) 55%, transparent) 0%, transparent 70%),
    var(--cream);
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.3;mix-blend-mode:multiply;
  /* Percent-encoded SVG (standards-compliant) — the old ";utf8," form is
     non-standard and failed to render in some delivery contexts. */
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.5%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  background-size:220px 220px;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--head);font-weight:400;margin:0;line-height:1.08;}
p{margin:0;}

/* ---------- shared helpers ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:.66rem;
  letter-spacing:.38em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--terracotta);
}
.eyebrow.muted{color:var(--slate);}
.eyebrow.light{color:var(--cream);}
.retreat .eyebrow.light{color:var(--terracotta);}

.dotrule{display:flex;align-items:center;gap:10px;margin-top:18px;}
.dotrule span:nth-child(odd){width:5px;height:5px;border-radius:99px;background:var(--terracotta);}
.dotrule span:nth-child(even){width:64px;height:1px;background:var(--terracotta);}
.dotrule.center{justify-content:center;}

.section{
  position:relative;
  padding:clamp(80px,12vh,150px) var(--gutter);
  isolation:isolate;
}
.wrap{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2;}
.section-head{max-width:720px;}
.section-head h2{
  font-size:clamp(2.1rem,5vw,3.6rem);
  color:var(--brown);
  margin-top:14px;
  text-wrap:balance;
}
.section-head .lead{
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  line-height:1.8;
  color:var(--slate);
  margin-top:22px;
  max-width:54ch;
}

/* serif italic accent */
.script{font-family:var(--head);font-style:italic;}

/* ---------- buttons (glass) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--head);font-weight:400;
  font-size:1.05rem;letter-spacing:.02em;text-transform:none;
  padding:.85em 1.6em;border-radius:22px;border:none;cursor:pointer;
  color:var(--brown);
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-bd);
  box-shadow:var(--glass-sh);
  position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, background .35s;
}
.btn::before{
  content:"";position:absolute;left:0;right:0;top:0;height:45%;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0));
  pointer-events:none;
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);
}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.65);
  box-shadow:0 24px 60px -22px rgba(var(--shadow-rgb),.45), inset 0 1px 0 rgba(255,255,255,.75);}
.btn:active{transform:translateY(-1px);}
.btn .arrow{transition:transform .35s;color:var(--terracotta);}
.btn:hover .arrow{transform:translateX(4px);}

.btn.ghost{
  background:var(--glass-bg);
  color:var(--brown);
}
.btn.ghost::before{opacity:1;}
.btn.ghost:hover{background:rgba(255,255,255,.65);}

.btn.light{
  color:var(--brown);
  background:rgba(255,255,255,.7);
  border-color:rgba(255,255,255,.8);
  box-shadow:0 18px 48px -18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------- glass panel ---------- */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-bd);
  box-shadow:var(--glass-sh);
  position:relative;
}
.glass::after{ /* top sheen */
  content:"";position:absolute;left:0;right:0;top:0;height:45%;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0));
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);
}
.glass.dark{
  background:rgba(58,42,35,.34);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 22px 60px -22px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25);
}

/* ============================================================
   PARALLAX BLOBS (decorative background layers)
   ============================================================ */
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
  pointer-events:none;
  z-index:0;
  opacity:.9;
  will-change:transform;
}
.blob.b-rose{background:radial-gradient(circle at 35% 30%,#d9b3a3,#c89786 60%,#b98774);}
.blob.b-sand{background:radial-gradient(circle at 35% 30%,#f0e2d6,#e8d6c8 60%,#dcc6b6);}
.blob.b-terra{background:radial-gradient(circle at 35% 30%,#bd816a,#a9684f 65%,#8f5440);}
.blob.b-cream{background:radial-gradient(circle at 35% 30%,#fbf6f1,#f4ece4 60%,#ead9cd);}
.blob.soft{opacity:.55;filter:blur(10px);}
.blob.ghost{opacity:.32;filter:blur(1px);}

/* organic logo motif used as floating element */
.motif{
  position:absolute;pointer-events:none;z-index:0;
  opacity:.5;will-change:transform;
}

/* grain/sheen overlay on hero */
.sheen{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 80% at 80% 0%,rgba(255,255,255,.35),transparent 55%);
  mix-blend-mode:screen;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:14px var(--gutter);
  border-radius:0;
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  transition:top .4s, left .4s, right .4s, padding .4s, background .4s,
             box-shadow .4s, border-radius .4s, border-color .4s,
             backdrop-filter .4s;
}
.nav.scrolled{
  top:14px;left:18px;right:18px;
  padding:10px clamp(28px, 3.6vw, 48px) 10px clamp(18px, 2.4vw, 28px);
  border-radius:999px;
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(105%);
  -webkit-backdrop-filter:blur(14px) saturate(105%);
  border-color:var(--glass-bd);
  box-shadow:0 12px 28px -18px rgba(var(--shadow-rgb),.28);
}
.brand{display:flex;align-items:center;gap:16px;transform:translateY(-4px);}
.brand img,.brand .logo-mark{width:64px;height:64px;transition:width .4s, height .4s;}
.nav.scrolled .brand img,.nav.scrolled .brand .logo-mark{width:54px;height:54px;}
.logo-mark{
  display:inline-block;
  background-color:var(--terracotta);
  -webkit-mask:url('logo-yoga.png') center/contain no-repeat;
  mask:url('logo-yoga.png') center/contain no-repeat;
  transition:background-color .25s ease;
}
.brand .bn{font-family:var(--body);font-weight:600;font-style:normal;letter-spacing:.01em;text-transform:none;font-size:1.05rem;color:var(--brown);line-height:1;transform:translateY(4px);}
.brand .bt{font-size:.5rem;letter-spacing:.28em;color:var(--slate);font-weight:700;margin-top:3px;}

/* Site Logo + Site Title blocks (globally editable brand via Settings →
   General title and the Site Logo). Slot them into the existing brand
   layout and keep the logo's real aspect ratio (don't force it square). */
.wp-block-site-logo{margin:0;line-height:0;}
.brand .wp-block-site-logo img{width:64px;height:auto;}
.nav.scrolled .brand .wp-block-site-logo img{width:54px;}
.footer .fbrand .wp-block-site-logo img{width:54px;height:auto;}
.brand .wp-block-site-title,
.footer .fbrand .wp-block-site-title{margin:0;}
.brand .wp-block-site-title a,
.footer .fbrand .wp-block-site-title a{color:inherit;text-decoration:none;}

.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;}
.nav-links a{
  font-family:var(--body);
  font-weight:600;
  font-size:.95rem;letter-spacing:.01em;text-transform:none;
  color:var(--brown);position:relative;padding:6px 0 6px 14px;transition:color .25s;
}
.nav-links a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scale(.4);
  width:5px;height:5px;border-radius:99px;background:var(--terracotta);
  opacity:0;transition:opacity .3s, transform .3s;
}
.nav-links a:hover::before{opacity:1;transform:translateY(-50%) scale(1);}
.nav-links a:hover{color:var(--terracotta);}
.nav .btn{padding:.95em 1.7em;font-size:.82rem;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px;position:relative;z-index:2;}
.nav-toggle > div{width:24px;height:2px;background:var(--brown);border-radius:2px;transition:.3s;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;
  padding:140px var(--gutter) 90px;
  background:transparent;
}
.hero .wrap{max-width:var(--maxw);width:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.hero-copy{max-width:620px;}
.hero h1{
  font-size:clamp(3.1rem,7vw,6rem);
  color:var(--brown);
  letter-spacing:-.01em;
  margin-top:22px;
}
.hero h1 em{font-style:italic;color:var(--terracotta);}
.hero .lead{font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.75;color:var(--slate);margin-top:26px;max-width:46ch;}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px;}

.hero-visual{position:relative;height:min(560px,70vh);}
.hero-photo{
  position:absolute;inset:0;margin:auto;
  width:min(460px,90%);height:min(460px,90vw);
  aspect-ratio:1/1;
  border-radius:63% 37% 54% 46% / 49% 52% 48% 51%;
  overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(var(--shadow-rgb),.55), inset 0 2px 0 rgba(255,255,255,.4);
}
.hero-photo image-slot{width:100%;height:100%;}
.hero-badge{
  position:absolute;left:-6%;bottom:8%;
  padding:18px 22px;border-radius:22px;max-width:230px;z-index:5;
}
.hero-badge .n{font-family:var(--head);font-size:1.9rem;color:var(--brown);line-height:1;}
.hero-badge .t{font-size:.72rem;color:var(--slate);line-height:1.5;margin-top:6px;}

.scrollcue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:5;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:700;
}
.scrollcue .mouse{width:22px;height:36px;border:1.5px solid var(--muted);border-radius:14px;position:relative;}
.scrollcue .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:3px;background:var(--terracotta);transform:translateX(-50%);animation:scrolldot 1.8s infinite;}
@keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0);}40%{opacity:1;}80%{opacity:0;transform:translate(-50%,12px);}100%{opacity:0;}}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:transparent;}
.about .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6vw,80px);align-items:center;}
.about-visual{position:relative;}
.about-photo{
  border-radius:42% 58% 63% 37% / 56% 44% 56% 44%;
  overflow:hidden;aspect-ratio:1/1;
  box-shadow:0 36px 70px -28px rgba(var(--shadow-rgb),.5);
}
.about-photo image-slot{width:100%;height:100%;}
.about-stamp{
  position:absolute;right:-18px;top:-18px;width:120px;height:120px;border-radius:50%;
  display:grid;place-items:center;text-align:center;z-index:4;
}
.about-stamp .num{font-family:var(--head);font-size:1.7rem;color:var(--terracotta);line-height:1;}
.about-stamp .lab{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-weight:700;margin-top:4px;}
/* Only the plain body paragraphs get this — NOT the eyebrow, signature
   or credential chips, which in the block version are also <p> elements
   inside .about-body and would otherwise be overridden (wrong colour/size)
   because .about-body p (0,1,1) outranks .eyebrow/.chip/.about-sign (0,1,0). */
.about-body p:not(.eyebrow):not(.about-sign):not(.chip){font-size:1.06rem;line-height:1.85;color:var(--grey700);margin-top:20px;}
.about-sign{font-family:var(--head);font-style:italic;font-size:1.7rem;color:var(--brown);margin-top:28px;}
.about-creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.chip{
  font-size:.72rem;letter-spacing:.08em;font-weight:700;color:var(--brown);
  padding:.6em 1.1em;border-radius:99px;
  background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.28),inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* ============================================================
   OFFERINGS
   ============================================================ */
.offer{background:transparent;}
.offer .wrap{display:flex;flex-direction:column;}
.offer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:54px;
}
.ocard{
  border-radius:24px;padding:34px 30px 30px;
  display:flex;flex-direction:column;min-height:300px;
  position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.ocard:hover{transform:translateY(-8px);box-shadow:0 32px 60px -24px rgba(var(--shadow-rgb),.42),inset 0 1px 0 rgba(255,255,255,.7);}
.ocard .onum{
  position:absolute;top:-.18em;right:.04em;
  font-family:var(--head);font-weight:400;font-style:normal;
  font-size:clamp(7rem, 14vw, 11rem);line-height:1;
  color:var(--terracotta);opacity:.06;
  pointer-events:none;z-index:0;
  letter-spacing:-.04em;
}
.ocard > *:not(.onum){position:relative;z-index:1;}
.ocard h3{font-size:1.7rem;color:var(--brown);margin-top:0;}
.ocard .otag{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);font-weight:700;margin-top:8px;}
.ocard p{font-size:.98rem;line-height:1.7;color:var(--slate);margin-top:16px;flex:1;}
.ocard .ometa{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:16px;border-top:1px solid rgba(var(--accent-rgb),.2);font-size:.8rem;color:var(--brown);font-weight:700;}
.ocard .ometa .lvl{color:var(--muted);font-weight:600;}

/* ============================================================
   RETREAT (dark feature)
   ============================================================ */
.retreat{
  background:transparent;
  color:var(--grey700);
}
.retreat .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,70px);align-items:center;}
.retreat h2{color:var(--brown);font-size:clamp(2.4rem,5.5vw,4rem);}
.retreat h2 em{font-style:italic;color:var(--terracotta);}
.retreat .lead{color:var(--grey700);font-size:1.1rem;line-height:1.8;margin-top:24px;max-width:46ch;}
.retreat-meta{display:flex;flex-wrap:wrap;gap:30px;margin-top:34px;}
.retreat-meta .rm{}
.retreat-meta .rk{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--terracotta);font-weight:700;}
.retreat-meta .rv{font-family:var(--head);font-size:1.5rem;margin-top:6px;color:var(--brown);}
.retreat-cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.retreat-photo{
  border-radius:58% 42% 38% 62% / 45% 55% 45% 55%;overflow:hidden;aspect-ratio:4/5;
  background:rgba(255,255,255,.25);
  box-shadow:0 50px 90px -30px rgba(var(--shadow-rgb),.35),inset 0 2px 0 rgba(255,255,255,.4);
}
.retreat-photo image-slot{width:100%;height:100%;color:rgba(58,42,35,.55);}
.retreat-spots{font-size:.9rem;color:var(--grey700);}
.retreat-spots b{color:var(--terracotta);}

/* ============================================================
   PRICING
   ============================================================ */
.pricing{background:transparent;}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:54px;align-items:stretch;}
.pcard{
  border-radius:26px;padding:36px 32px;display:flex;flex-direction:column;
  transition:transform .4s, box-shadow .4s;
}
.pcard:hover{transform:translateY(-6px);}
.pcard.feature{
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--terracotta) 78%, #000),
    var(--terracotta) 60%,
    color-mix(in srgb, var(--terracotta) 55%, #000));
  color:#fff;box-shadow:0 36px 70px -26px rgba(var(--shadow-rgb),.7),inset 0 1px 0 rgba(255,255,255,.4);
}
.pcard.feature::after{display:none;}
.pcard .ptag{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--terracotta);}
.pcard.feature .ptag{color:var(--cream);}
.pcard h3{font-size:1.5rem;color:var(--brown);margin-top:14px;}
.pcard.feature h3{color:#fff;}
.pcard .price{font-family:var(--head);font-size:3rem;color:var(--brown);margin-top:18px;line-height:1;}
.pcard.feature .price{color:#fff;}
.pcard .price small{font-size:.9rem;font-family:var(--body);color:var(--muted);font-weight:600;}
.pcard.feature .price small{color:var(--cream);}
.pcard ul{list-style:none;margin:24px 0 0;padding:0;flex:1;}
.pcard li{font-size:.95rem;line-height:1.5;color:var(--slate);padding:10px 0 10px 26px;position:relative;border-top:1px solid rgba(var(--accent-rgb),.16);}
.pcard li:first-child{border-top:none;}
.pcard.feature li{color:var(--cream);border-color:rgba(255,255,255,.2);}
.pcard li::before{content:"";position:absolute;left:0;top:16px;width:11px;height:7px;border-left:1.6px solid var(--terracotta);border-bottom:1.6px solid var(--terracotta);transform:rotate(-45deg);}
.pcard.feature li::before{border-color:#fff;}
.pcard .btn{margin-top:28px;width:100%;justify-content:center;}
.price-note{text-align:center;font-size:.85rem;color:var(--muted);margin-top:30px;}

/* ============================================================
   SCHEDULE
   ============================================================ */
.schedule{background:transparent;}
.sched-panel{border-radius:28px;padding:clamp(26px,4vw,46px);margin-top:48px;overflow:hidden;}
.sched-row{
  display:grid;grid-template-columns:90px 120px 1fr auto;gap:20px;align-items:center;
  padding:20px 8px;border-top:1px solid rgba(var(--accent-rgb),.18);
}
.sched-row:first-child{border-top:none;}
.sched-row .day{font-size:.74rem;letter-spacing:.18em;font-weight:700;color:var(--terracotta);}
.sched-row .time{font-family:var(--head);font-size:1.15rem;color:var(--brown);}
.sched-row .cls{font-size:1.05rem;color:var(--grey700);}
.sched-row .cls small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px;}
.sched-row .lvl{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--slate);padding:.5em 1em;border-radius:99px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.22);}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi{background:transparent;}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:54px;}
.tcard{border-radius:24px;padding:36px 32px;display:flex;flex-direction:column;}
.tcard .quote{font-family:var(--head);font-size:3.4rem;color:var(--terracotta);line-height:.6;height:.5em;}
.tcard p{font-family:var(--head);font-size:1.32rem;line-height:1.42;color:var(--grey700);margin-top:18px;flex:1;}
.tcard .who{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--slate);margin-top:24px;}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{background:transparent;}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;margin-top:48px;}
.gal-grid image-slot{width:100%;height:100%;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(var(--shadow-rgb),.4);}
.g-tall{grid-row:span 2;}
.g-wide{grid-column:span 2;}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news{position:relative;background:transparent;}
.news-card{
  border-radius:30px;padding:clamp(36px,5vw,64px);max-width:760px;margin:0 auto;text-align:center;
}
.news-card h2{font-size:clamp(2rem,4.5vw,3.2rem);color:var(--brown);}
.news-card .lead{color:var(--slate);font-size:1.08rem;line-height:1.7;margin-top:18px;}
.news-form{display:flex;gap:12px;margin-top:30px;max-width:480px;margin-left:auto;margin-right:auto;flex-wrap:wrap;}
.news-form input{
  flex:1;min-width:200px;border:none;border-radius:99px;padding:1.05em 1.5em;font-family:var(--body);font-size:.95rem;color:var(--grey700);
  background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3),inset 0 2px 6px rgba(var(--shadow-rgb),.08);
  outline:none;transition:box-shadow .25s;
}
.news-form input:focus{box-shadow:inset 0 0 0 1.5px var(--terracotta),inset 0 2px 6px rgba(var(--shadow-rgb),.08);}
.news-note{font-size:.74rem;color:var(--muted);margin-top:16px;}
.news-thanks{font-family:var(--head);font-style:italic;font-size:1.4rem;color:var(--terracotta);margin-top:24px;min-height:1.4em;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:transparent;color:var(--grey700);}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,70px);}
.contact h2{color:var(--brown);font-size:clamp(2.2rem,5vw,3.6rem);margin-top:14px;}
.contact .lead{color:var(--slate);line-height:1.8;margin-top:22px;font-size:1.05rem;max-width:42ch;}
.contact-list{margin-top:34px;display:flex;flex-direction:column;gap:2px;}
.contact-list .ci{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:16px 0;border-top:1px solid rgba(var(--shadow-rgb),.18);align-items:baseline;}
.contact-list .ck{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta);font-weight:700;}
.contact-list .cv{font-size:1.05rem;color:var(--grey700);line-height:1.5;}
.contact-list .cv a:hover{color:var(--terracotta);}
.contact-form{border-radius:28px;padding:clamp(28px,4vw,40px);}
.contact-form label{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--brown);margin:18px 0 8px;}
.contact-form label:first-child{margin-top:0;}
.contact-form input,.contact-form textarea{
  width:100%;border:none;border-radius:14px;padding:.95em 1.1em;font-family:var(--body);font-size:.95rem;color:var(--grey700);
  background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3),inset 0 2px 6px rgba(var(--shadow-rgb),.08);outline:none;transition:box-shadow .25s,background .25s;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(var(--shadow-rgb),.45);}
.contact-form input:focus,.contact-form textarea:focus{box-shadow:inset 0 0 0 1.5px var(--terracotta),inset 0 2px 6px rgba(var(--shadow-rgb),.08);background:rgba(255,255,255,.85);}
.contact-form textarea{resize:vertical;min-height:110px;}
.contact-form .btn{margin-top:26px;width:100%;justify-content:center;}
.contact-thanks{font-family:var(--head);font-style:italic;font-size:1.25rem;color:var(--terracotta);margin-top:18px;text-align:center;min-height:1.2em;}

.map-strip{margin-top:40px;border-radius:20px;overflow:hidden;height:200px;background:rgba(var(--shadow-rgb),.05);box-shadow:0 30px 60px -28px rgba(var(--shadow-rgb),.25);}
.map-strip image-slot{width:100%;height:100%;color:rgba(var(--shadow-rgb),.55);}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:transparent;
  color:var(--grey700);padding:64px var(--gutter) 40px;position:relative;
}
.footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
.footer .fbrand img,.footer .fbrand .logo-mark{width:54px;height:54px;opacity:.95;}
.footer .fbrand .bn{font-family:var(--head);font-size:1.4rem;color:var(--brown);margin-top:14px;}
.footer .fbrand p{font-size:.92rem;line-height:1.7;color:var(--grey700);margin-top:14px;max-width:34ch;}
.footer h4{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--terracotta);font-weight:700;font-family:var(--body);margin:0 0 18px;}
.fsocial-h{margin-top:22px;}
.fsocial{display:flex;gap:10px;margin-top:0;}
.fsocial a{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;
  color:var(--brown);
  background:rgba(var(--accent-rgb),.08);
  border:1px solid rgba(var(--accent-rgb),.18);
  transition:background .25s, color .25s, transform .25s;
}
.fsocial a:hover{background:var(--terracotta);color:#fff;transform:translateY(-2px);}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.footer ul a{
  font-family:var(--body);
  font-size:.92rem;line-height:1.7;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--grey700);transition:color .2s;
}
.footer ul a:hover{color:var(--terracotta);}
.footer-bottom{max-width:var(--maxw);margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(var(--shadow-rgb),.2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.74rem;letter-spacing:.1em;color:var(--grey700);}
.footer-bottom a{color:inherit;text-decoration:none;transition:color .2s;}
.footer-bottom a:hover{color:var(--terracotta);}

/* ============================================================
   LEGAL PAGES — Imprint / Privacy. Long-form text content with a
   calm reading column, generous spacing, and the same nav/footer
   chrome as the rest of the site.
   ============================================================ */
.legal{
  padding:160px var(--gutter) 100px;
  /* transparent so the shared warm body atmosphere (body::before/::after)
     shows through — same background as the home page sections. */
  background:transparent;
}
.legal .wrap{max-width:780px;}
.legal .eyebrow{margin-bottom:18px;}
.legal h1{font-size:clamp(2.2rem,4vw,3.2rem);color:var(--brown);margin-bottom:14px;}
.legal .updated{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-bottom:48px;}
.legal .updated::before{content:"Last updated · ";}
.legal h2{
  font-size:1.5rem;color:var(--brown);
  margin:48px 0 14px;line-height:1.2;
}
.legal h3{
  font-size:1.05rem;color:var(--brown);
  margin:28px 0 10px;line-height:1.3;
}
.legal p,.legal li{
  font-size:1rem;line-height:1.75;color:var(--grey700);
}
.legal p{margin:0 0 16px;}
.legal ul{margin:0 0 20px;padding-left:1.2em;}
.legal li{margin:6px 0;}
.legal a{color:var(--terracotta);text-decoration:underline;text-underline-offset:3px;}
.legal a:hover{color:var(--brown);}
.legal address{
  font-style:normal;line-height:1.75;color:var(--grey700);
  margin:0 0 16px;
}
.legal .back-home{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:48px;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terracotta);text-decoration:none;
}
.legal .back-home:hover{color:var(--brown);}

/* ============================================================
   REVEAL — elements fade + lift gently into view once their top
   crosses the viewport threshold (managed by parallax.js via .in).
   .d1 / .d2 / .d3 stagger sibling reveals for a calm rhythm.
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.reveal.d1{transition-delay:.12s;}
.reveal.d2{transition-delay:.24s;}
.reveal.d3{transition-delay:.36s;}
.reveal.in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .blob,.motif{transform:none!important;}
  .scrollcue .mouse::after{animation:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero .wrap{display:flex;flex-direction:column;gap:0;}
  .hero-copy{display:contents;}
  .hero .eyebrow{order:1;}
  .hero h1{order:2;margin-top:10px;}
  .hero-visual{order:3;height:auto;min-height:0;display:flex;justify-content:center;margin-top:28px;}
  .hero-photo{position:relative;inset:auto;margin:0 auto;width:min(420px,86vw);height:auto;}
  .hero .lead{order:4;margin-top:24px;}
  .hero-cta{order:5;margin-top:18px;}
  .about .wrap,.retreat .wrap,.contact .wrap{grid-template-columns:1fr;}
  .about-visual{max-width:420px;}
  .gal-grid{grid-template-columns:repeat(2,1fr);}
  .retreat-cta{flex-direction:column;align-items:flex-start;}
  .retreat-cta .retreat-spots{order:-1;}
  .sched-row{grid-template-columns:1fr;gap:6px;padding:18px 8px;}
  .sched-row .lvl{justify-self:start;}
  .section{padding:48px var(--gutter);}
}
@media (max-width:760px){
  /* Don't animate the bar's position/shape on mobile — only its surface —
     so opening AND closing the menu snaps the bar cleanly instead of
     morphing the floating pill (which felt janky). */
  .nav{transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease;}
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;left:0;width:100%;z-index:1;
    flex-direction:column;align-items:center;justify-content:center;gap:44px;
    padding:80px 40px 40px;
    /* Solid, NO backdrop-filter: animating opacity over a blurred backdrop
       is what made the open stutter on mobile. */
    background:var(--paper);
    box-shadow:none;
    opacity:0;pointer-events:none;
    transform:translateY(-12px);
    transition:opacity .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);
    will-change:opacity, transform;
  }
  .nav-links.open{opacity:1;pointer-events:auto;transform:none;}
  .nav-links a{font-size:1.25rem;letter-spacing:.01em;text-transform:none;}
  .nav-links .btn{font-size:.85rem;}
  .nav.menu-open .brand{position:relative;z-index:3;}
  .nav-toggle{display:flex;position:relative;z-index:3;}
  .nav.menu-open,
  .nav.scrolled.menu-open{
    top:0;left:0;right:0;
    background:transparent;border-color:transparent;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;
    padding:14px var(--gutter);
    /* snap the bar to full width instantly instead of morphing the floating
       pill open — the menu overlay fade below stays smooth. */
    transition:none;
  }
  body.menu-open{overflow:hidden;}
  .nav-toggle.open > div:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open > div:nth-child(2){opacity:0;}
  .nav-toggle.open > div:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .sched-row{grid-template-columns:1fr;gap:6px;}
  .sched-row .time{grid-column:1;}
  .sched-row .lvl{grid-column:1;justify-self:start;}
  .gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;}
  .g-wide{grid-column:span 2;}
  .footer .wrap{grid-template-columns:1fr;}
}

/* ============================================================
   HEADING TONE — base in lighter warm brown, em accents in
   the deep rust --terracotta for two-tone hierarchy.
   ============================================================ */
.hero h1,
.section-head h2,
.retreat h2,
.ocard h3,
.pcard h3,
.news-card h2,
.contact h2,
.legal h1,
.legal h2,
.legal h3{
  color:#93a78f;
}
.hero h1 em,
.section-head h2 em,
.retreat h2 em,
.news-card h2 em,
.contact h2 em{
  color:var(--terracotta);
}

/* ============================================================
   MATTE PASS — calmer surfaces, less glass shine.
   ============================================================ */
:root{
  --glass-bg:rgba(251,246,241,.78);
  --glass-bd:rgba(var(--accent-rgb),.18);
  --glass-sh:0 14px 36px -20px rgba(var(--shadow-rgb),.22);
}
.glass,
.nav.scrolled,
.about-card,
.feature-card{
  backdrop-filter:blur(14px) saturate(105%);
  -webkit-backdrop-filter:blur(14px) saturate(105%);
  box-shadow:0 14px 36px -20px rgba(var(--shadow-rgb),.22);
}
.glass::after{display:none;}
.btn{
  backdrop-filter:blur(6px) saturate(105%);
  -webkit-backdrop-filter:blur(6px) saturate(105%);
  box-shadow:0 10px 24px -14px rgba(var(--shadow-rgb),.28);
}
.btn:hover{
  box-shadow:0 18px 40px -20px rgba(var(--shadow-rgb),.32);
}
.ocard:hover{
  box-shadow:0 24px 48px -26px rgba(var(--shadow-rgb),.28);
}
.pcard.feature{
  box-shadow:0 28px 56px -28px rgba(var(--shadow-rgb),.45);
}
.brand .logo-mark{
  box-shadow:0 6px 14px -8px rgba(0,0,0,.18);
}

/* ============================================================
   SECTION WATERMARK — large diffused logo per section.
   ============================================================ */
.section-watermark{
  position:absolute;
  top:50%;left:var(--wm-left,50%);
  width:var(--wm-size,clamp(360px,46vw,640px));
  height:var(--wm-size,clamp(360px,46vw,640px));
  min-height:0;
  padding:0;margin:0;
  transform:translate(-50%,-50%) rotate(var(--wm-rotate,0deg));
  /* The colour comes from the block's own background colour (editable in
     the editor). blur + low opacity turn that solid shape into a soft,
     diffuse blob. */
  filter:blur(70px);
  opacity:.32;
  pointer-events:none;
  z-index:0;
  border-radius:var(--wm-blob,50%);
}
/* per-section placement (position / size / shape / rotation) */
.wm-1{--wm-left:8%;--wm-size:clamp(280px,32vw,460px);--wm-blob:63% 37% 54% 46% / 49% 52% 48% 51%;--wm-rotate:-18deg;}
.wm-2{--wm-left:78%;--wm-size:clamp(520px,62vw,860px);--wm-blob:42% 58% 70% 30% / 45% 35% 65% 55%;--wm-rotate:12deg;}
.wm-3{--wm-left:32%;--wm-size:clamp(360px,44vw,620px);--wm-blob:67% 33% 38% 62% / 60% 47% 53% 40%;--wm-rotate:-6deg;}
.wm-4{--wm-left:88%;--wm-size:clamp(640px,72vw,1000px);--wm-blob:50% 50% 33% 67% / 55% 36% 64% 45%;--wm-rotate:24deg;}
.wm-5{--wm-left:15%;--wm-size:clamp(320px,38vw,540px);--wm-blob:38% 62% 63% 37% / 41% 44% 56% 59%;--wm-rotate:-30deg;}
.wm-6{--wm-left:65%;--wm-size:clamp(480px,56vw,780px);--wm-blob:70% 30% 52% 48% / 36% 60% 40% 64%;--wm-rotate:8deg;}
.wm-7{--wm-left:22%;--wm-size:clamp(400px,48vw,680px);--wm-blob:45% 55% 48% 52% / 65% 38% 62% 35%;--wm-rotate:-14deg;}
.wm-8{--wm-left:82%;--wm-size:clamp(560px,66vw,920px);--wm-blob:58% 42% 67% 33% / 48% 52% 48% 52%;--wm-rotate:20deg;}
.wm-9{--wm-left:45%;--wm-size:clamp(280px,32vw,460px);--wm-blob:33% 67% 40% 60% / 55% 50% 50% 45%;--wm-rotate:-18deg;}
.gal-grid image-slot{
  cursor:zoom-in;
  overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s;
}
.gal-grid image-slot img{
  transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .45s;
}
.gal-grid image-slot:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 50px -24px rgba(var(--shadow-rgb),.45);
}
.gal-grid image-slot:hover img{
  transform:scale(1.06);
  filter:saturate(1.1) brightness(1.03);
}
.lb-overlay{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  background:rgba(18,28,18,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:clamp(20px,4vw,60px);
  opacity:0;transition:opacity .25s ease;
}
.lb-overlay.open{display:flex;opacity:1;}
.lb-stage{
  position:relative;margin:0;
  max-width:min(1400px,92vw);max-height:88vh;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.lb-img{
  max-width:100%;max-height:80vh;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
  background:#13201a;
}
.lb-caption{
  color:rgba(255,255,255,.78);
  font-family:var(--body);font-size:.9rem;letter-spacing:.02em;
  text-align:center;max-width:60ch;
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:#fff;cursor:pointer;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.18);}
.lb-close{top:20px;right:20px;width:44px;height:44px;font-size:1.6rem;line-height:1;}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:2rem;line-height:1;}
.lb-prev{left:20px;}
.lb-next{right:20px;}
.lb-prev:hover{transform:translateY(-50%) translateX(-2px);}
.lb-next:hover{transform:translateY(-50%) translateX(2px);}
@media (max-width:640px){
  .lb-prev,.lb-next{width:44px;height:44px;font-size:1.6rem;}
  .lb-prev{left:10px;} .lb-next{right:10px;}
  .lb-close{top:12px;right:12px;}
}

/* Final mobile menu open state — must override MATTE PASS .nav.scrolled */
@media (max-width:760px){
  .nav.menu-open,
  .nav.scrolled.menu-open{
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-radius:0 !important;
    top:0 !important;left:0 !important;right:0 !important;
    padding:14px var(--gutter) !important;
  }
}

/* ============================================================
   NATIVE WP IMAGE BLOCK SUPPORT
   Replaces the old <image-slot> placeholder element: every photo
   is now a real Image block (figure.wp-block-image > img), edited
   via the WordPress Media Library (click image -> Replace/Delete).
   ============================================================ */
.hero-photo .wp-block-image{width:100%;height:100%;margin:0;}
.hero-photo .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;}
.about-photo .wp-block-image{width:100%;height:100%;margin:0;}
.about-photo .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;}
.retreat-photo .wp-block-image{width:100%;height:100%;margin:0;color:rgba(58,42,35,.55);}
.retreat-photo .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;}
.map-strip .wp-block-image{width:100%;height:100%;margin:0;}
.map-strip .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;}
.gal-grid .wp-block-image{
  width:100%;height:100%;margin:0;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 40px -22px rgba(var(--shadow-rgb),.4);
  cursor:zoom-in;transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s;
}
.gal-grid .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .45s;}
.gal-grid .wp-block-image:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(var(--shadow-rgb),.45);}
.gal-grid .wp-block-image:hover img{transform:scale(1.06);filter:saturate(1.1) brightness(1.03);}

/* ============================================================
   NATIVE WP BUTTON BLOCK SUPPORT (Hero CTAs)
   core/buttons wraps each core/button in an extra <div>, so the
   existing .btn/.btn.ghost rules (written for a bare <a class="btn">)
   are re-applied here to .wp-block-button__link, the actual link
   WordPress renders inside that wrapper.
   ============================================================ */
.wp-block-buttons.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px;}

/* Neutralise the outer wrapper <div class="wp-block-button btn ..."> fully:
   because it carries the .btn class it would otherwise inherit the whole
   base .btn box (padding, border, glass background, shadow, ::before sheen)
   and render a SECOND box around the real button. Strip it back to a plain
   container so only the inner link is the visible button. */
.wp-block-button.btn{
  background:none;border:none;box-shadow:none;
  padding:0;border-radius:0;overflow:visible;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.wp-block-button.btn::before{display:none;}

.wp-block-button.btn .wp-block-button__link{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--head);font-weight:400;
  font-size:1.05rem;letter-spacing:.02em;text-transform:none;
  padding:.85em 1.6em;border-radius:22px;border:none;cursor:pointer;
  color:var(--brown);text-decoration:none;
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-bd);
  box-shadow:var(--glass-sh);
  position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, background .35s;
}
/* top sheen, same as the original .btn::before */
.wp-block-button.btn .wp-block-button__link::before{
  content:"";position:absolute;left:0;right:0;top:0;height:45%;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0));
  pointer-events:none;
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);
}
/* .light variant (e.g. Retreat "Request the details") */
.wp-block-button.btn.light .wp-block-button__link{
  background:rgba(255,255,255,.7);
  border-color:rgba(255,255,255,.8);
  box-shadow:0 18px 48px -18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.9);
}
.wp-block-button.btn .wp-block-button__link:hover{transform:translateY(-2px);background:rgba(255,255,255,.65);
  box-shadow:0 24px 60px -22px rgba(var(--shadow-rgb),.45), inset 0 1px 0 rgba(255,255,255,.75);}
.wp-block-button.btn .wp-block-button__link .arrow{transition:transform .35s;color:var(--terracotta);}
.wp-block-button.btn .wp-block-button__link:hover .arrow{transform:translateX(4px);}
/* full-width buttons inside price cards / contact form */
.pcard .wp-block-button.btn,
.contact-form .wp-block-button.btn{width:100%;}
.pcard .wp-block-button.btn .wp-block-button__link,
.contact-form .wp-block-button.btn .wp-block-button__link{width:100%;justify-content:center;}
/* ============================================================
   ICON MASKS (replace inline <svg> with CSS mask icons, since
   raw SVG markup has no native Gutenberg block equivalent)
   ============================================================ */
.icon-arrow-up{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%205%20L12%2019%20M5%2012%20L12%205%20L19%2012%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%205%20L12%2019%20M5%2012%20L12%205%20L19%2012%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.icon-instagram{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2217.3%22%20cy%3D%226.7%22%20r%3D%221%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2217.3%22%20cy%3D%226.7%22%20r%3D%221%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.icon-youtube{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M10%209l5%203-5%203z%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M10%209l5%203-5%203z%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.icon-facebook{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%208h2.5V5H14c-2%200-3.5%201.5-3.5%203.5V11H8v3h2.5v7h3v-7H16l.5-3h-3V8.5c0-.3.2-.5.5-.5z%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%208h2.5V5H14c-2%200-3.5%201.5-3.5%203.5V11H8v3h2.5v7h3v-7H16l.5-3h-3V8.5c0-.3.2-.5.5-.5z%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.icon-email{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M4%207l8%206%208-6%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M4%207l8%206%208-6%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.icon-burger-close{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%205%20L19%2019%20M19%205%20L5%2019%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%205%20L19%2019%20M19%205%20L5%2019%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}

/* ============================================================
   NATIVE BLOCK STRUCTURE RESETS
   A few elements were bare flex children in the original markup
   (e.g. .brand was a direct child of .nav). Native blocks always
   save a real wrapper element (p/div) around their content, so
   these neutralise that wrapper with display:contents - it doesn't
   participate in layout, the real child takes its place exactly
   as before.
   ============================================================ */
.nav-brand,.fsocial-link{display:contents;}
.to-top .icon-arrow-up{width:20px;height:20px;}
.icon-instagram,.icon-youtube,.icon-facebook,.icon-email{width:22px;height:22px;}
.fsocial a{display:inline-flex;align-items:center;justify-content:center;}
.rail-dot p.rail-label{margin:0;}
.hero-badge p.n,.hero-badge p.t,.about-stamp p.num,.about-stamp p.lab,
.ometa p,.contact-list p.ck,.contact-list p.cv,.sched-row p,
.ci p{margin:0;}
.section-head-center{margin:0 auto;text-align:center;}
.about-heading{font-size:clamp(2rem,4.5vw,3.2rem);color:var(--brown);margin-top:14px;}
/* core/list output (<ul class="wp-block-list">) reuses existing list
   styling for nav-links / footer link columns / price-card features */
.nav-links.wp-block-list{list-style:none;}
.price-grid ul.wp-block-list,.footer .wp-block-list{list-style:none;padding-left:0;margin:0;}

/* ============================================================
   BLOCK / SITE EDITOR OVERRIDES (editor only)
   .editor-styles-wrapper is the class WordPress puts on the <body>
   INSIDE the editor iframe — it is never present on the front end,
   so everything below applies ONLY while editing and leaves the live
   site 100% untouched.

   Reason: several elements are hidden by default and only revealed by
   JavaScript on the front end (scroll-reveal, sticky nav, floating
   chrome). We deliberately do NOT run that JS in the editor, so here
   we put those elements into their "final"/visible resting state so
   the content is actually visible and editable.
   ============================================================ */

/* Scroll-reveal copy: JS adds .in on the front end. Show it here. */
.editor-styles-wrapper .reveal{opacity:1;transform:none;transition:none;}

/* Sticky nav: position:fixed floats over content inside the iframe.
   Let it sit in normal flow so the header reads correctly. */
.editor-styles-wrapper .nav{position:static;}

/* Back-to-top button is purely functional (JS) — hide while editing. */
.editor-styles-wrapper .to-top{display:none;}

/* Left-edge section rail: shown in the editor too (requested). Its moving
   dot + label are driven by JS (scroll position), which the editor doesn't
   run, so we show it in a sensible static state — the label is normally
   revealed by JS, so force it visible here (defaults to "Hero" from markup).
   width:max-content + nowrap keep the label on one horizontal line; in the
   narrow 30px rail the editor was otherwise wrapping it letter-by-letter. */
.editor-styles-wrapper .rail-label{
  opacity:1;
  transform:translate(0,-50%);
  white-space:nowrap;
  width:max-content;
  max-width:none;
  writing-mode:horizontal-tb;
}

/* The CSS-only warm atmosphere (body::before) and film-grain (body::after)
   ARE shown in the editor so the background matches the front end / HTML.
   The per-section watermark blobs are now real blocks in the template, so
   they show and are editable in the editor too (no JS involved). */

/* The big decorative card numbers (.onum "01"–"04" in the Classes cards)
   are pointer-events:none and nearly transparent on the front end, so they
   can't be clicked/edited in the editor. Make them selectable and visible
   enough to edit while editing (front end keeps the faint watermark look). */
.editor-styles-wrapper .ocard .onum{pointer-events:auto;opacity:.28;}

/* Watermark blobs are pointer-events:none on the front end (purely
   decorative). In the editor, make them clickable so they can be selected
   and recoloured directly on the canvas. */
.editor-styles-wrapper .section-watermark{pointer-events:auto;}


/* ===== SAGE PALETTE (variant override) ===== */
/* ============================================================
   SAGE THEME — soft eucalyptus / forest, grounded and green.
   Loaded by sage.html after sage-website/styles.css.
   ============================================================ */

:root{
  --rose:#b9c7b3;
  --brown:#6f8470;
  --terracotta:#3f5a3a;

  --paper:#f5f7f2;
  --cream:#ebf0e7;
  --sand:#d2dccb;
  --mist:#d6e0cf;

  --ink:#3f5a3a;

  /* Hand-printed script — a different handwritten voice than Caladea */
  --head:'Kalam','Bradley Hand',cursive;

  --shadow-rgb:48,72,48;
  --accent-rgb:111,132,112;
  --glass-bg:rgba(245,247,242,.78);
  --glass-bd:rgba(var(--accent-rgb),.18);
  --glass-sh:0 14px 36px -20px rgba(var(--shadow-rgb),.22);
}

/* Sage: Kalam is slightly heavier than Caladea — nudge size + tracking. */
h1, h2, h3, h4{
  letter-spacing:0;
  line-height:1.12;
  color:#93a78f;
}
h1{font-size:clamp(3rem,6.6vw,5.6rem);color:#93a78f;}
h2{font-size:clamp(2.2rem,4.8vw,3.6rem);}
h3{font-size:clamp(1.6rem,2.2vw,2rem);}
/* italic <em> accents look fine in Kalam, but keep them upright for calmness */
h1 em, h2 em{font-style:normal;color:var(--terracotta);}

/* Sage: base heading text in a lighter sage, em accents in the
   deep forest --terracotta for contrast. */
.hero h1,
.section-head h2,
.retreat h2,
.ocard h3,
.pcard h3,
.news-card h2,
.contact h2,
.legal h1,
.legal h2,
.legal h3{
  color:#93a78f;
}
.hero h1 em,
.section-head h2 em,
.retreat h2 em,
.news-card h2 em,
.contact h2 em{
  color:var(--terracotta);
}