/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --cream:#FAF6F0;
  --sand:#EDEAE4;
  --sand-deep:#E5DFD6;
  --green:#476B64;
  --green-deep:#3D5752;
  --green-soft:#A5B8B4;
  /* Sage for TEXT on the dark green sections. --green-soft only reaches
     3.77:1 on --green-deep, which is fine for icons and rules but not for
     the small uppercase eyebrows and links that sit there. 4.68:1. */
  --green-mist:#BECBC6;
  /* Primary action colour. Darkened from #BA6562, which put cream button
     text at 3.81:1, under WCAG AA. This clears it at 5.07:1 while
     --terracotta-deep stays put, keeping a visible hover step. */
  --terracotta:#A05350;
  --terracotta-deep:#944746;
  --ink:#343837;
  /* Body copy on light grounds. The alpha is set so this clears WCAG AA
     4.5:1 on cream, sand AND sand-deep; .74 only reached 4.2 on cream
     and 3.7 on sand-deep. Only ever used on light backgrounds. */
  --ink-soft:rgba(78,73,70,.85);
  --cream-soft:rgba(250,246,240,.72);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --script:"Caveat",cursive;

  --shell:1600px;
  --pad:80px;
  --radius:20px;
  --ease:cubic-bezier(.44,0,.56,1);
}
@media (max-width:1199px){ :root{ --pad:40px } }
@media (max-width:809px){ :root{ --pad:24px } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--sand);color:var(--green)}

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3,h4{font-family:var(--serif);margin:0;letter-spacing:-.02em;line-height:1.1;font-weight:300}
h1{font-size:clamp(3.4rem,8.4vw,6.4rem)}
h2{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.015em}
h3{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:400;line-height:1.2;letter-spacing:-.01em}
h4{font-size:clamp(1.45rem,2.4vw,1.9rem);font-weight:600;letter-spacing:0;line-height:1.2}
p{margin:0}
em{font-style:italic}

.eyebrow{
  font-size:.7rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;color:var(--green);
}
.lead{font-size:clamp(1rem,1.5vw,1.06rem);line-height:1.7;color:var(--ink-soft)}
.balance{text-wrap:balance}

/* ============================================================
   LAYOUT
   ============================================================ */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(80px,10vw,128px)}
.stack{display:flex;flex-direction:column}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:16px 24px;border-radius:12px;
  font-size:.875rem;line-height:1.2;
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn--solid{background:var(--terracotta);color:var(--cream)}
.btn--solid:hover{background:var(--terracotta-deep)}
.btn--soft{background:var(--sand);color:var(--green);backdrop-filter:blur(20px)}
.btn--soft:hover{background:#fff}
.btn--ghost{border:1px solid var(--green-soft);color:var(--green);border-radius:99px;padding:12px 24px}
.btn--ghost:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
.btn--onDark{background:var(--cream);color:var(--green)}
.btn--onDark:hover{background:#fff}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;inset:8px 0 auto;z-index:60;padding-inline:var(--pad);pointer-events:none}
.nav__bar{
  pointer-events:auto;
  max-width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:8px 8px 8px 24px;border-radius:999px;
  background:rgba(250,246,240,0);backdrop-filter:blur(0px);
  transition:background-color .4s var(--ease),backdrop-filter .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.is-stuck .nav__bar{
  background:rgba(235,233,228,.72);backdrop-filter:blur(20px);
  box-shadow:0 1px 24px rgba(52,56,55,.07);
}
.nav__links{display:flex;align-items:center;gap:4px}
.nav__links a{padding:10px 12px 8px;font-size:.875rem;color:var(--green);opacity:.85;transition:opacity .3s var(--ease)}
.nav__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.nav__right{display:flex;align-items:center;gap:8px}

/* logo */
.logo{display:inline-flex;align-items:center}
.logo__img{display:block;height:48px;width:auto;transition:filter .4s var(--ease)}
.logo--lg .logo__img{height:clamp(96px,13vw,132px)}
/* Artwork is white with a transparent background: it reads as-is on the dark
   hero and footer, and is inverted to dark once the nav turns cream.
   Both states declare the same filter functions in the same order so the
   change animates rather than snapping. The halo keeps the white mark
   legible over light areas of whatever hero photo is used. */
.nav:not(.is-stuck) .logo__img{filter:invert(0) drop-shadow(0 1px 10px rgba(30,26,20,.55))}
.nav.is-stuck .logo__img{filter:invert(1) drop-shadow(0 1px 10px rgba(30,26,20,0))}
@media (max-width:809px){ .logo__img{height:42px} }

/* hero nav is light until stuck */
.nav:not(.is-stuck) .nav__links a{color:var(--cream)}
.nav:not(.is-stuck) .burger span{background:var(--cream)}

.burger{display:none;width:48px;height:40px;position:relative;border-radius:99px}
.burger span{
  position:absolute;left:6px;width:36px;height:1.5px;background:var(--green);border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s var(--ease),background-color .4s var(--ease);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:24px}
.nav.is-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.nav__drawer{
  pointer-events:auto;display:none;
  max-width:var(--shell);margin:8px auto 0;padding:8px 24px 24px;
  border-radius:24px;background:rgba(250,246,240,.96);backdrop-filter:blur(20px);
  box-shadow:0 20px 60px rgba(52,56,55,.12);
}
.nav.is-open .nav__drawer{display:block}
.nav__drawer a:not(.btn){display:block;padding:14px 0;color:var(--green);font-size:1.05rem;border-bottom:1px solid var(--sand-deep)}
.nav__drawer .btn{width:100%;justify-content:center;margin-top:16px}

/* ---------- primary nav: dropdowns ----------
   Top-level items are real links AND dropdown parents. The panel opens on
   hover and on focus-within, so a keyboard can tab straight through it
   without any JS. site.js adds Escape-to-close and tap-to-open for
   touch devices wide enough to still be showing this bar. */
.nav__item{position:relative;display:flex;align-items:center}
.nav__top{display:inline-flex;align-items:center;gap:5px}
.nav__links > a,.nav__top{white-space:nowrap}   /* labels must never wrap the bar to two lines */
.nav__caret{width:11px;height:11px;flex:none;opacity:.7;transition:transform .3s var(--ease)}
.nav__item.is-open > .nav__top .nav__caret,
.nav__item:hover > .nav__top .nav__caret,
.nav__item:focus-within > .nav__top .nav__caret{transform:rotate(180deg)}

.nav__drop{
  position:absolute;top:100%;left:-4px;z-index:5;
  padding-top:12px;                     /* transparent bridge so hover survives the gap */
  /* pointer-events rather than visibility/display: the links must stay in the
     tab order, otherwise focus can never enter and :focus-within never fires. */
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.nav__item:hover > .nav__drop,
.nav__item:focus-within > .nav__drop,
.nav__item.is-open > .nav__drop{opacity:1;pointer-events:auto;transform:none}

.nav__drop__inner{
  min-width:238px;display:flex;flex-direction:column;
  padding:10px;border-radius:18px;
  background:rgba(250,246,240,.97);backdrop-filter:blur(20px);
  box-shadow:0 20px 60px rgba(52,56,55,.16);
}
/* .nav__links a is styled for the bar; the panel needs its own treatment,
   including on the transparent hero nav where bar links turn cream. */
.nav__links .nav__drop a,
.nav:not(.is-stuck) .nav__links .nav__drop a{
  display:block;padding:11px 14px;border-radius:12px;
  color:var(--green);opacity:.9;font-size:.875rem;line-height:1.35;
  transition:background-color .3s var(--ease),opacity .3s var(--ease);
}
.nav__links .nav__drop a:hover{background:var(--sand);opacity:1;text-decoration:none}
.nav__links .nav__drop a[aria-current="page"]{background:var(--sand);opacity:1;font-style:italic}

/* ---------- drawer: collapsible groups ---------- */
.drawer__group{border-bottom:1px solid var(--sand-deep)}
.drawer__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nav__drawer .drawer__row > a{flex:1;border-bottom:0}
.drawer__toggle{
  flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  color:var(--green);border-radius:99px;
}
.drawer__toggle svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.drawer__toggle[aria-expanded="true"] svg{transform:rotate(45deg)}
.drawer__sub{overflow:hidden;height:0;transition:height .35s var(--ease)}
.nav__drawer .drawer__sub a{
  padding:11px 0 11px 16px;font-size:.95rem;opacity:.82;border-bottom:0;
}
.nav__drawer .drawer__sub a:last-child{padding-bottom:16px}

@media (max-width:1199px){
  .nav__links,.nav__right .btn{display:none}
  .burger{display:block}
  .nav.is-stuck .burger span{background:var(--green)}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;isolation:isolate;
  min-height:90vh;display:flex;align-items:flex-end;
  padding:156px 0 clamp(96px,10vw,128px);
  border-radius:0 0 clamp(28px,4vw,48px) clamp(28px,4vw,48px);
  overflow:hidden;background:var(--green-deep);
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:56% 48%}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(48,42,32,.86) 0%,rgba(48,42,32,.45) 45%,rgba(250,246,240,0) 78%);
}
/* On a phone the photo is cropped to a narrow slice, so the subject fills the
   frame and the copy runs across it. The sideways scrim above has faded out by
   then, leaving the end of each line unprotected, so switch to a vertical one
   that covers the full width where the text actually sits. */
@media (max-width:809px){
  .hero::before{
    background:linear-gradient(to top,
      rgba(38,33,26,.9) 0%,
      rgba(38,33,26,.72) 40%,
      rgba(38,33,26,.46) 66%,
      rgba(38,33,26,.24) 100%);
  }
  /* Slide the crop left so the figure sits to the right of the headline.
     42% is the useful limit: any further and her head crops off the frame. */
  .hero__media img{object-position:42% 48%}
}
.hero__inner{display:flex;flex-direction:column;gap:32px;width:100%}
.hero h1{color:var(--cream)}
.hero .lead{color:var(--cream);max-width:480px;opacity:.92}
.hero__copy{display:flex;flex-direction:column;gap:16px;max-width:640px}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px}
@media (max-width:520px){ .hero__cta{flex-direction:column;align-items:flex-start} .hero__cta .btn{width:100%;justify-content:center} }

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.philosophy{background:var(--cream);text-align:center}
.philosophy .shell{display:flex;flex-direction:column;align-items:center;gap:24px}
.philosophy h2{color:var(--green);text-align:center}
.philosophy .lead{max-width:560px;text-align:center}

/* ============================================================
   BUTTERFLY INTERLUDE
   ============================================================ */
.butterfly{
  background:var(--cream);
  padding-block:clamp(4px,2vw,24px);
  display:flex;justify-content:center;
}
.butterfly__stage{
  position:relative;
  width:clamp(170px,24vw,300px);
  aspect-ratio:1536/1024;
  perspective:1100px;
}
.butterfly__drift{position:absolute;inset:0;animation:bf-drift 11s var(--ease) infinite}
.butterfly__float{position:absolute;inset:0;animation:bf-float 7.5s var(--ease) infinite;transform-style:preserve-3d}

.butterfly__part{
  position:absolute;inset:0;
  /* Two declarations on purpose: the PNG is the fallback for anything
     without image-set(), which drops the whole declaration rather than
     the unsupported entry. The WebP is 238K against the PNG's 2.5MB. */
  background:url("butterfly_moving.png") center/contain no-repeat;
  background-image:image-set(url("butterfly_moving.webp") type("image/webp"),
                             url("butterfly_moving.png") type("image/png"));
  backface-visibility:hidden;
}
.butterfly__part--left{
  clip-path:inset(0 50% 0 0);
  transform-origin:50% 50%;
  animation:bf-wing-left 3s ease-in-out infinite;will-change:transform;
}
.butterfly__part--right{
  clip-path:inset(0 0 0 50%);
  transform-origin:50% 50%;
  animation:bf-wing-right 3s ease-in-out infinite;will-change:transform;
}
/* the body and abdomen stay put while the wings hinge around them */
.butterfly__part--body{clip-path:inset(0 46.5% 0 46.5%);transform:translateZ(1px)}

@keyframes bf-wing-left{
  0%,100%{transform:rotateY(4deg)}
  50%{transform:rotateY(26deg)}
}
@keyframes bf-wing-right{
  0%,100%{transform:rotateY(-4deg)}
  50%{transform:rotateY(-26deg)}
}
@keyframes bf-float{
  0%,100%{transform:translateY(-5px)}
  50%{transform:translateY(5px)}
}
@keyframes bf-drift{
  0%,100%{transform:rotate(-1.1deg)}
  50%{transform:rotate(1.1deg)}
}

@media (prefers-reduced-motion:reduce){
  .butterfly__drift,.butterfly__float,
  .butterfly__part--left,.butterfly__part--right{animation:none}
  .butterfly__part--left{transform:rotateY(8deg)}
  .butterfly__part--right{transform:rotateY(-8deg)}
}


/* ============================================================
   PRACTICE PANELS
   ============================================================ */
.practice{padding-block:clamp(80px,10vw,128px)}
.practice__head{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;margin-bottom:clamp(40px,5vw,64px);
}
.practice__head h2{color:var(--green)}
.practice__head p{max-width:620px}

.panels{
  display:flex;flex-direction:column;gap:12px;
  width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);
}
.panel{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--radius);min-height:300px;
  color:var(--cream);text-decoration:none;
}
/* Works for <img> or <video> without any change */
.panel__media{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.panel__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(26,32,30,.9) 0%,rgba(26,32,30,.46) 48%,rgba(26,32,30,.1) 100%);
}
.panel__pill{
  position:absolute;z-index:2;top:20px;right:20px;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  border:1px solid rgba(250,246,240,.45);border-radius:99px;
  padding:8px 15px;backdrop-filter:blur(4px);
}
.panel__body{
  position:absolute;z-index:2;left:28px;right:28px;bottom:28px;
  display:flex;flex-direction:column;gap:8px;
}
.panel__title{
  font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.2;
  font-size:clamp(1.5rem,2.4vw,1.95rem);color:var(--cream);
}
.panel__desc{font-size:.92rem;line-height:1.6;color:rgba(250,246,240,.9);max-width:36ch}
.panel__cta{
  margin-top:10px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:5px;
}
.panel:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* The accordion runs only where a real pointer can hover. Touch and small
   screens get plain stacked cards with everything already visible. */
@media (hover:hover) and (min-width:1024px){
  .panels{flex-direction:row;gap:8px;height:min(70vh,720px);min-height:520px}
  .panel{flex:1.2 1 0;min-width:0;min-height:0;transition:flex .75s var(--ease)}
  .panel--feature{flex:3.5 1 0}
  .panels:hover .panel--feature,
  .panels:focus-within .panel--feature{flex:1.2 1 0}
  .panels .panel:hover,
  .panels .panel:focus-visible{flex:3.5 1 0}

  .panel__pill{opacity:0;transform:translateY(-10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .panel__body{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .panel__scrim{opacity:.5;transition:opacity .6s var(--ease)}

  .panels:not(:hover):not(:focus-within) .panel--feature .panel__pill,
  .panels:not(:hover):not(:focus-within) .panel--feature .panel__body,
  .panel:hover .panel__pill,.panel:hover .panel__body,
  .panel:focus-visible .panel__pill,.panel:focus-visible .panel__body{opacity:1;transform:none}

  .panels:not(:hover):not(:focus-within) .panel--feature .panel__scrim,
  .panel:hover .panel__scrim,
  .panel:focus-visible .panel__scrim{opacity:1}

  .panel:focus-visible{outline-offset:-4px;outline-color:var(--cream)}
}

@media (prefers-reduced-motion:reduce){
  .panel,.panel__pill,.panel__body,.panel__scrim{transition:none}
}

/* ============================================================
   CLASSES
   ============================================================ */
.classes__head{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;margin-bottom:clamp(40px,5vw,64px)}
.classes__head h2{color:var(--green)}

.rail{
  display:flex;gap:clamp(24px,4vw,64px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:max(var(--pad),calc((100vw - 1240px)/2));
  padding-block:4px 24px;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:12px}

.rail-wrap{position:relative}
.rail__btn{
  position:absolute;top:calc(50% - 10px);translate:0 -50%;z-index:3;
  width:52px;height:52px;border-radius:99px;
  display:grid;place-items:center;
  background:rgba(250,246,240,.94);backdrop-filter:blur(8px);
  border:1px solid var(--green-soft);color:var(--green);
  box-shadow:0 10px 30px rgba(71,107,100,.15);
  transition:opacity .35s var(--ease),visibility .35s var(--ease),
             background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.rail__btn:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
.rail__btn:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.rail__btn--prev{left:clamp(8px,calc(var(--pad) - 26px),64px)}
.rail__btn--next{right:clamp(8px,calc(var(--pad) - 26px),64px)}
.rail__btn[disabled]{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:809px){ .rail__btn{width:44px;height:44px} }

.class-card{
  flex:0 0 clamp(268px,80vw,314px);scroll-snap-align:center;
  display:flex;flex-direction:column;min-height:600px;
  border:1px solid var(--green);border-radius:999px 999px 0 0;overflow:hidden;
  background:#fff;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.class-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(71,107,100,.16)}
.class-card__img{height:380px;overflow:hidden}
.class-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.class-card:hover .class-card__img img{transform:scale(1.05)}
.class-card__body{
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
  align-items:center;gap:24px;padding:24px;text-align:center;
}
.class-card__title{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--green);letter-spacing:-.01em;line-height:1.3}
.class-card__rule{width:60px;height:1.5px;background:var(--green);opacity:.6}
.class-card__desc{font-size:.85rem;line-height:1.5;color:var(--ink-soft)}
.class-card__top{display:flex;flex-direction:column;align-items:center;gap:16px}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.reviews{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--green);color:var(--cream);
  padding-block:clamp(80px,9vw,128px);
}
.reviews__pattern{
  position:absolute;inset:0 0 -134px;z-index:-1;
  background:url("pattern.jpg") repeat left top/384px auto;
  mix-blend-mode:overlay;opacity:.26;
}
/* The watercolour sits behind the heading: its enso ring (centred at 51.7% /
   30.4% of the artwork) is pinned to the middle of the title, so the landscape
   below spills into the gap above the carousel. */
.reviews__art{
  position:absolute;z-index:-1;pointer-events:none;
  top:50%;left:50%;
  width:min(88vw,860px);height:auto;
  translate:-51.7% calc(-30.4% + 36px);
  opacity:.75;
}
.reviews__head{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin-bottom:clamp(40px,5vw,64px)}
.reviews__head h2{color:var(--cream)}

/* Arc carousel: cards ride the crest of a large circle. JS sets the
   per-card transform, the stage pivot and --arc-cw / --arc-r. */
.arc{
  position:relative;width:100%;
  perspective:1400px;
  overflow:hidden;
  touch-action:pan-y;
  cursor:grab;
  outline:none;
  -webkit-user-select:none;user-select:none;
}
.arc.is-dragging{cursor:grabbing}
.arc:focus-visible{box-shadow:inset 0 0 0 2px var(--cream-soft)}

.arc__stage{position:absolute;left:50%;top:0;width:0;height:0;transform-style:preserve-3d}

.arc__card{
  position:absolute;left:0;top:0;margin:0;
  width:var(--arc-cw,300px);
  transform-origin:50% calc(var(--arc-cw,300px) / 2);
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.arc__img{
  aspect-ratio:1;border-radius:10px;overflow:hidden;
  background:var(--sand);
  box-shadow:0 22px 44px rgba(0,0,0,.22);
}
.arc__img img{width:100%;height:100%;object-fit:cover;pointer-events:none}

.arc__cap{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:14px}
.arc__quote{margin:0}
.arc__quote p{font-size:.82rem;line-height:1.55;color:var(--cream);opacity:.9}
.arc__num{
  flex:none;padding-top:2px;
  font-size:.7rem;letter-spacing:.14em;color:var(--cream);opacity:.45;
}

.arc__hint{
  position:absolute;left:0;right:0;bottom:0;text-align:center;pointer-events:none;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);opacity:.5;
}

/* No 3D, no motion, just a plain scrollable row */
.arc--flat{height:auto!important;perspective:none;overflow-x:auto;overflow-y:visible;cursor:auto}
.arc--flat .arc__stage{
  position:static;display:flex;align-items:flex-start;gap:32px;
  width:max-content;height:auto;
  padding:0 var(--pad) 8px;
}
.arc--flat .arc__card{
  position:static;flex:0 0 var(--arc-cw,300px);
  transform:none!important;opacity:1!important;
}
.arc--flat .arc__hint{display:none}

/* ============================================================
   JOURNAL
   ============================================================ */
.journal__head{display:flex;flex-direction:column;gap:24px;margin-bottom:clamp(40px,5vw,64px)}
.journal__row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.journal__grid{display:grid;grid-template-columns:2fr 1fr;gap:48px;align-items:start}
@media (max-width:900px){ .journal__grid{grid-template-columns:1fr;gap:40px} }
.journal__side{display:flex;flex-direction:column;gap:40px}

.post{display:flex;flex-direction:column;gap:24px;transition:transform .5s var(--ease)}
.post:hover{transform:translateY(-4px)}
.post__img{border-radius:var(--radius);overflow:hidden;aspect-ratio:1.15}
.post--wide .post__img{aspect-ratio:1.42}
.post--small .post__img{aspect-ratio:1.78}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.post:hover .post__img img{transform:scale(1.04)}
.post__body{display:flex;flex-direction:column;gap:8px;padding-right:24px}
.post__cat{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
/* A base size matters here: without one, a bare .post card title fell
   through to the global h3 rule (up to 2.8rem) and rendered larger than
   the H2s of the article it sat under. --wide and --small still win on
   specificity where a card needs a different scale. */
.post__title{color:var(--green);font-family:var(--serif);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.3}
.post--wide .post__title{font-size:clamp(1.5rem,2.6vw,2.4rem)}
.post--small .post__title{font-size:clamp(1.25rem,2vw,1.45rem);line-height:1.3}
.post__excerpt{font-size:.98rem;color:var(--ink-soft);line-height:1.65}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--cream);padding-bottom:clamp(80px,10vw,128px)}
.faq__rule{height:1px;background:var(--green);opacity:.35;margin-bottom:clamp(48px,6vw,96px)}
.faq__head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin-bottom:clamp(32px,4vw,48px)}
.faq__head h2{color:var(--green);font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:400}
.faq__list{max-width:640px;margin-inline:auto;background:var(--sand-deep);border-radius:var(--radius);padding:8px 24px}
.faq__item{border-bottom:1px solid rgba(52,56,55,.12)}
.faq__item:last-child{border-bottom:0}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 0;text-align:left;
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.35rem);font-weight:500;
  color:var(--ink);letter-spacing:-.01em;line-height:1.3;
}
.faq__icon{flex:none;width:16px;height:16px;color:var(--ink);transition:transform .4s var(--ease)}
.faq__item.is-open .faq__icon{transform:rotate(45deg)}
.faq__a{overflow:hidden;height:0;transition:height .4s var(--ease)}
.faq__a p{padding:0 0 24px;font-size:.98rem;color:var(--ink-soft);max-width:56ch}
/* inline prose links need an affordance; a{color:inherit} above strips it */
/* --green-deep, not --green: these links sit on --sand-deep panels where
   --green only reaches 4.46:1, just under AA. On cream it would pass. */
.faq__a p a,.pg__note a,.occ p a{color:var(--green-deep);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.faq__a p a:hover,.pg__note a:hover,.occ p a:hover{color:var(--terracotta-deep)}

/* ============================================================
   CTA
   ============================================================ */
.cta{position:relative;overflow:hidden;background:var(--cream);border-radius:clamp(28px,4vw,48px) clamp(28px,4vw,48px) 0 0}
.cta__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.cta h2{color:var(--green);text-align:center}
.cta__flowers{position:absolute;right:clamp(-54px,4vw,94px);bottom:-27px;width:clamp(213px,24vw,296px);z-index:1;pointer-events:none}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--green-deep);color:var(--cream)}
.footer__top{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-block:clamp(64px,8vw,80px) 48px}
@media (max-width:809px){ .footer__top{grid-template-columns:1fr;gap:40px} }
.footer h3.footer__label{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--cream);margin-bottom:24px}
.footer__links{display:flex;flex-direction:column;flex-wrap:wrap;max-height:170px;gap:2px 40px}
.footer__links a{padding:10px 0 8px;font-size:.875rem;opacity:.8;transition:opacity .3s var(--ease)}
.footer__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.footer__news p{font-size:.85rem;opacity:.8;margin-bottom:24px}

.news{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.news input{
  flex:1 1 220px;min-width:0;height:52px;padding:16px;border-radius:12px;
  border:1px solid var(--green-soft);background:transparent;color:var(--cream);
  font-family:var(--sans);font-size:1rem;line-height:1.2;
  transition:border-color .3s var(--ease)
}
.news input::placeholder{color:var(--cream-soft)}
.news input:focus{outline:none;border-color:var(--cream)}
.news button{padding:16px 28px;border-radius:12px;background:var(--terracotta);color:var(--cream);font-size:.875rem;transition:background-color .3s var(--ease)}
.news button:hover{background:var(--terracotta-deep)}
.news__msg{flex-basis:100%;font-size:.8rem;opacity:.85;min-height:1.2em}

.footer__brand{display:flex;flex-direction:column;align-items:center;gap:32px;padding-block:8px 32px}
.footer__logoRow{display:flex;align-items:center;gap:32px;width:100%}
.footer__logoRow::before,.footer__logoRow::after{content:"";flex:1;height:1px;background:var(--green-soft);opacity:.6}
.footer__brand > p{max-width:480px;text-align:center;font-size:.85rem;opacity:.7}
.footer__social{display:flex;gap:24px}
.footer__social a{opacity:.9;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.footer__social a:hover{opacity:1;transform:translateY(-2px)}
.footer__social svg{width:22px;height:22px}

.footer__legal{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:28px;border-top:1px solid rgba(165,184,180,.28);font-size:.875rem;opacity:.75;
}
.footer__legal a:hover{text-decoration:underline;text-underline-offset:4px}

/* ============================================================
   REVEAL
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   INTERIOR PAGES
   The un-stuck nav is built for the dark homepage hero: cream
   links and a white logo. Pages without that hero set
   .page--interior on <body>; site.js then locks the nav into its
   existing solid `is-stuck` state so there is one source of truth
   for those colours. All this needs is the space the fixed bar
   would otherwise sit on top of.
   ============================================================ */
.page--interior .page-main{padding-top:calc(72px + clamp(48px,7vw,96px))}

/* Current page marker in the nav */
.nav__links a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:4px}
.nav__drawer a[aria-current="page"]{font-style:italic}

/* ============================================================
   CLASS DETAIL MODAL
   ============================================================ */
.cmodal{
  width:min(1000px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 48px));
  padding:0;border:1px solid var(--green-soft);border-radius:var(--radius);
  background:var(--cream);color:var(--ink);overflow:hidden;
  box-shadow:0 40px 90px rgba(52,56,55,.28);
}
.cmodal::backdrop{background:rgba(52,56,55,.52);backdrop-filter:blur(3px)}

/* The dialog and its backdrop are display:none until open, so the entry
   animation has to run on [open] rather than on the element itself. */
.cmodal[open]{animation:cmodalIn .4s var(--ease) both}
.cmodal[open]::backdrop{animation:cmodalFade .4s var(--ease) both}
@keyframes cmodalIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cmodalFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .cmodal[open],.cmodal[open]::backdrop{animation:none}
}

.cmodal__inner{display:grid;grid-template-columns:40% 1fr;max-height:inherit}
.cmodal__media{overflow:hidden;background:var(--sand)}
.cmodal__media img{width:100%;height:100%;object-fit:cover}
.cmodal__body{
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
  padding:clamp(28px,3.4vw,48px);overflow-y:auto;
}
.cmodal__body h3{color:var(--green)}
.cmodal__specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0;width:100%}
.cmodal__specs dt{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);line-height:1;margin-bottom:6px;
}
.cmodal__specs dd{margin:0;font-size:.9rem;line-height:1.45;color:var(--ink)}
.cmodal__prose{display:flex;flex-direction:column;gap:14px}
.cmodal__prose p{font-size:.92rem;line-height:1.7;color:var(--ink-soft)}
.cmodal__book{margin-top:4px}

.cmodal__close{
  position:absolute;top:14px;right:14px;z-index:2;
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--cream);color:var(--green);border:1px solid var(--green-soft);
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.cmodal__close svg{width:18px;height:18px}
.cmodal__close:hover{background:var(--green);color:var(--cream)}
.cmodal__close:focus-visible{outline:2px solid var(--green);outline-offset:3px}

@media (max-width:809px){
  .cmodal{max-height:calc(100dvh - 32px)}
  .cmodal__inner{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow-y:auto}
  .cmodal__media{height:200px}
  .cmodal__body{overflow:visible}
  .cmodal__specs{gap:14px 20px}
}

/* ============================================================
   PRIVATE GROUPS: homepage band
   ============================================================ */
.pg__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
/* Decorative lavender sitting above the private-groups photograph. Kept in
   normal flow rather than absolutely positioned: the grid is only ~51px
   taller than the image, so an absolute sprig would land on top of it. */
/* Extra headroom above this section so the lavender has somewhere to live.
   The default .section padding leaves ~331px of clear space, which is short
   of the sprig's 444px at full size. Only the top grows; the bottom keeps the
   site's normal section rhythm. Reverted below 810px, where the flower drops
   back into flow and the space would just read as a gap. */
.pg{padding-block-start:clamp(190px,21vw,360px)}
.pg__mediaCol{position:relative}
/* Lifted out of flow and anchored to the top of the photograph, so it fills
   the whitespace between this section and the one above without pushing the
   layout down. Same treatment as .cta__flowers. */
.pg__flower{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(100% + clamp(16px,2vw,28px));
  /* same scale as .cta__flowers, the site's other decorative sprig */
  width:clamp(213px,24vw,296px);height:auto;pointer-events:none;
}
.pg__media{border-radius:var(--radius);overflow:hidden}
.pg__media img{width:100%;height:100%;object-fit:cover}
.pg__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.pg__tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pg__tags li{
  border:1px solid var(--green-soft);border-radius:99px;padding:7px 16px;
  font-size:.75rem;letter-spacing:.04em;color:var(--green);
}
.pg__note{font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
@media (max-width:809px){
  .pg{padding-block-start:clamp(80px,10vw,128px)}
  .pg__grid{grid-template-columns:1fr}
  .pg__mediaCol{order:-1;display:flex;flex-direction:column;align-items:center;gap:14px}
  /* back into flow on narrow screens; there is no side column to float beside */
  .pg__flower{position:static;transform:none;width:clamp(120px,30vw,170px)}
}

/* ============================================================
   PRIVATE GROUPS: page
   ============================================================ */
.pgp-hero{padding-block-start:clamp(24px,4vw,48px)}
.pgp-hero__copy{max-width:760px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.pgp-hero__copy h1{font-size:clamp(2.8rem,6.4vw,5rem)}
.pgp-hero__media{margin-top:clamp(32px,4vw,56px);border-radius:var(--radius);overflow:hidden}
.pgp-hero__media img{width:100%;height:clamp(240px,32vw,420px);object-fit:cover}

.pgp-intro__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(28px,5vw,80px)}
.pgp-intro__body{display:flex;flex-direction:column;gap:18px}
.pgp-intro__body p{color:var(--ink-soft);line-height:1.75}
@media (max-width:809px){ .pgp-intro__grid{grid-template-columns:1fr} }

.pgp-occ{background:var(--sand);border-radius:var(--radius)}
.pgp-occ__head{margin-bottom:clamp(28px,4vw,48px)}
.pgp-occ__head .eyebrow{margin-bottom:12px}
.pgp-occ__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.occ{background:var(--cream);border:1px solid var(--green-soft);border-radius:var(--radius);padding:clamp(20px,2.2vw,30px)}
.occ__title{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--green);margin-bottom:10px;line-height:1.25}
.occ p{font-size:.87rem;line-height:1.6;color:var(--ink-soft)}
@media (max-width:1099px){ .pgp-occ__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:559px){ .pgp-occ__grid{grid-template-columns:1fr} }

/* ---------- the enquiry form ---------- */
.pgp-form__shell{max-width:900px}
.pgp-form__head{display:flex;flex-direction:column;gap:16px;align-items:flex-start;margin-bottom:clamp(28px,4vw,48px)}

.pgf__set{border:0;margin:0 0 clamp(28px,3.4vw,44px);padding:0}
.pgf__legend{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);
  padding:0 0 14px;margin-bottom:22px;width:100%;border-bottom:1px solid var(--sand-deep);
}
.pgf__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin-bottom:20px}
.pgf__row:last-child{margin-bottom:0}
.pgf__field{display:flex;flex-direction:column;gap:8px;min-width:0}
.pgf__field + .pgf__field{margin-top:0}
.pgf__set > .pgf__field{margin-bottom:20px}
.pgf__field label,.pgf__label{font-size:.82rem;color:var(--ink);line-height:1.4}
.pgf__field label span[aria-hidden],.pgf__label span[aria-hidden]{color:var(--terracotta)}
.pgf__opt{font-size:.72rem;color:var(--ink-soft);letter-spacing:.04em}

.pgf__field input,.pgf__field select,.pgf__field textarea{
  font:inherit;font-size:.92rem;color:var(--ink);
  background:#fff;border:1px solid var(--sand-deep);border-radius:12px;
  padding:13px 15px;width:100%;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.pgf__field textarea{resize:vertical;line-height:1.6}
.pgf__field input:focus,.pgf__field select:focus,.pgf__field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(71,107,100,.12);
}
.pgf__field input::placeholder,.pgf__field textarea::placeholder{color:rgba(78,73,70,.42)}
.pgf__field.is-bad input,.pgf__field.is-bad select{border-color:var(--terracotta)}

.pgf__radios{display:flex;flex-wrap:wrap;gap:10px}
.pgf__radio{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--green-soft);border-radius:99px;padding:10px 18px;
  font-size:.84rem;color:var(--green);
  transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.pgf__radio input{accent-color:var(--green);margin:0;width:15px;height:15px}
.pgf__radio:hover{background:var(--sand)}
.pgf__radio:has(input:checked){background:var(--green);color:var(--cream);border-color:var(--green)}
.pgf__radio:has(input:focus-visible){outline:2px solid var(--green);outline-offset:3px}

.pgf__err{font-size:.76rem;color:var(--terracotta-deep);line-height:1.4;min-height:0}
.pgf__err:empty{display:none}
.pgf__reveal{
  border-left:2px solid var(--green-soft);padding-left:clamp(14px,2vw,24px);
  margin:0 0 20px;
}
.pgf__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pgf__actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:8px}
.pgf__status{font-size:.85rem;line-height:1.5;color:var(--green)}
.pgf__status.is-bad{color:var(--terracotta-deep)}
.pgf__foot{font-size:.78rem;line-height:1.6;color:var(--ink-soft);margin-top:22px;max-width:60ch}

@media (max-width:709px){ .pgf__row{grid-template-columns:1fr} }