/* ============================================================
   THE EMBODIED ALCHEMIST — shared design system
   "Spa, not statement."

   Ten rules this stylesheet obeys:
    1. Cream, never pure white.        6. Barely-there shadows.
    2. No pure black. Anywhere.        7. Organic dividers, not hard rules.
    3. Sections melt, never slam.      8. Gold is a hairline, not a fill.
    4. Generous space.                 9. Rose is an accent, never a block.
    5. Soft edges everywhere.         10. Motion is slow. Nothing snaps.

   Change the palette HERE and both pages follow.
   ============================================================ */

:root{
  --deep-teal:#14565C;   /* headlines, buttons, grounding */
  --teal-wash:#7FB6BA;   /* the banner's watercolour teal — the SPICE */
  --forest:#1E4A47;      /* deepest accent, leaf green */
  --soft-aqua:#9AC8CB;   /* section washes */
  --aqua-mist:#D6E8E8;   /* palest wash */
  --cream:#FAF6F0;       /* PAGE BACKGROUND — never pure white */
  --cream-warm:#F3EBE0;  /* alternate sections */
  --dusty-rose:#E3A2A8;  /* accent + hovers */
  --rose-deep:#C97F87;   /* rose pressed */
  --gold:#C9A96A;        /* hairlines + flourishes */
  --gold-bright:#D9B978; /* gold on dark panels */
  --text:#2A4649;        /* body — soft teal-charcoal, NOT black */
  --text-soft:#6B8A8C;   /* secondary */

  --shadow-soft:0 8px 32px rgba(20,86,92,.06);
  --shadow-lift:0 16px 48px rgba(20,86,92,.10);
  --radius:24px;
  --radius-lg:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,sans-serif;
  /* 400, not 300. Light type on pale cream is the single biggest cause of a
     page reading "washed out" — it has no ink. */
  font-size:18.5px;font-weight:400;line-height:1.85;
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html{overflow-x:hidden}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;line-height:1.15;
  color:var(--deep-teal);
}

/* Bold key words are the scan-anchors. The eye lands on these first, so they
   have to carry real ink AND real colour — not just a heavier grey. */
strong,b{font-weight:700;color:var(--deep-teal)}
em{font-style:italic}

/* Spacious by default — every paragraph gets room to breathe. */
p{margin-bottom:26px}
p:last-child{margin-bottom:0}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- layout ---------- */
.wrap{max-width:1140px;margin:0 auto;padding:0 32px}
.narrow{max-width:680px;margin-left:auto;margin-right:auto}
section{padding:112px 0}

/* ---------- atoms ---------- */

/* wide-tracked uppercase — the signature label, lifted from the banner */
.label{
  font-family:'Inter',sans-serif;
  font-size:11.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-soft);
}
.label-gold{color:var(--gold)}

/* gold hairline flourish */
.rule{
  width:64px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:28px auto;
}
.rule-left{margin-left:0;background:linear-gradient(90deg,var(--gold),transparent)}

/* ---------- the mark divider ----------
   The rose-and-triangle logo, sitting in a gold hairline, used to breathe between
   major sections. Deliberately RARE — at most two or three per page. A logo that
   appears every few hundred pixels stops being a signature and becomes wallpaper;
   the whole point is that the eye pauses when it sees it.
   Purely ornamental, so the img carries an empty alt and the row is aria-hidden. */
.mark-rule{
  display:flex;align-items:center;justify-content:center;gap:20px;
  width:min(340px,72vw);margin:0 auto;
  padding:72px 0;
}
.mark-rule span{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,169,106,.85));
}
.mark-rule span:last-child{
  background:linear-gradient(90deg,rgba(201,169,106,.85),transparent);
}
.mark-rule img{
  width:38px;height:auto;flex:none;
  opacity:.9;
}
/* On a dark panel the hairline needs the brighter gold or it disappears. */
.mark-rule-light span{
  background:linear-gradient(90deg,transparent,rgba(217,185,120,.9));
}
.mark-rule-light span:last-child{
  background:linear-gradient(90deg,rgba(217,185,120,.9),transparent);
}
/* Sitting DIRECTLY on top of a heading rather than between two sections: the
   padding closes right up, so the mark, the label and the title stack into one
   tapering group — wide hairline at the top, narrowing to the title beneath. */
.mark-rule-tight{
  padding:0 0 20px;
  width:min(300px,68vw);
}
.mark-rule-tight img{width:44px}

@media(max-width:640px){
  .mark-rule{padding:52px 0;gap:14px}
  .mark-rule img{width:30px}
  .mark-rule-tight{padding:0 0 14px}
  .mark-rule-tight img{width:36px}
}

.btn{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:18px 40px;border-radius:100px;
  background:var(--deep-teal);color:var(--cream);
  text-decoration:none;
  border:1px solid var(--deep-teal);
  cursor:pointer;
  transition:all .5s var(--ease);
}
.btn:hover{background:var(--dusty-rose);border-color:var(--dusty-rose);color:var(--forest)}
.btn-ghost{background:transparent;color:var(--deep-teal);border:1px solid var(--gold)}
.btn-ghost:hover{background:var(--gold);border-color:var(--gold);color:var(--cream)}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,240,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,169,106,.18);
}
/* Name left, everything else grouped to the right. Centring the links put them
   too close to the name — the mark and the wordmark need room around them to read
   as one unit rather than as the first item in a list. */
.nav-in{
  max-width:1220px;margin:0 auto;padding:20px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.nav-right{display:flex;align-items:center;gap:30px}
/* The rose-and-triangle mark, then her name. Flex so the two sit on one baseline
   and the row can never wrap — a nav that breaks in half is the fastest way to
   make a site look unfinished. */
.nav-mark{
  display:flex;align-items:center;gap:12px;
  font-family:'Cormorant Garamond',serif;
  font-size:19px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--deep-teal);text-decoration:none;white-space:nowrap;
}
.nav-logo{
  width:42px;height:auto;flex:none;
  transition:transform .6s var(--ease);
}
.nav-mark:hover .nav-logo{transform:scale(1.06)}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none;flex-wrap:nowrap}
.nav-links a{
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  white-space:nowrap;                       /* never let a nav item break in half */
  color:var(--text-soft);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:all .4s var(--ease);
}
.nav-links a:hover,
.nav-links a.here{color:var(--deep-teal);border-bottom-color:var(--gold)}
/* Now a direct child of .nav-in rather than a list item, so it needs its own
   reset — it no longer inherits anything from `.nav-links a`. */
.nav-cta{
  display:inline-block;text-decoration:none;
  font-family:'Inter',sans-serif;
  font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:12px 22px;border-radius:100px;white-space:nowrap;
  background:var(--deep-teal);color:var(--cream);
  border:1px solid var(--deep-teal);border-bottom:none;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.nav-cta:hover{background:var(--dusty-rose);border-color:var(--dusty-rose);color:var(--forest)}
@media(max-width:1040px){.nav-links{display:none}}
/* The nav was the widest thing on the site: mark + full name + button came to
   ~520px, which forced EVERY page to overflow horizontally on a phone. That's
   what was clipping the doors — not the doors themselves. */
@media(max-width:620px){
  .nav-in{padding:14px 18px;gap:12px}
  .nav-mark{font-size:14px;gap:9px;letter-spacing:.07em}
  .nav-logo{width:32px}
  .nav-right{gap:14px}
  .nav-cta{font-size:9.5px;letter-spacing:.1em;padding:10px 14px}
}
/* The long wordmark + long button still overflow a true phone. Below 480 we keep
   BOTH — but shrink the name and swap the button to a short label so the whole
   row fits inside the screen instead of forcing the page wider than the viewport. */
.nav-cta .cta-short{display:none}
@media(max-width:480px){
  .nav-in{padding:12px 15px;gap:10px}
  .nav-mark{font-size:12px;letter-spacing:.04em;gap:8px}
  .nav-logo{width:28px}
  .nav-cta{font-size:9px;letter-spacing:.08em;padding:9px 14px}
  .nav-cta .cta-full{display:none}
  .nav-cta .cta-short{display:inline}
}
/* Below this the wordmark simply cannot fit beside the button. The logo alone
   still links home and is unmistakably hers — so the name goes, not the nav. */
@media(max-width:430px){
  .nav-mark span{display:none}
  .nav-logo{width:36px}
}

/* ---------- banner ----------
   Chata's Embodied Alchemist banner. Drop the file at
   brand-images/banners/embodied-alchemist-banner.webp and it appears.
   The frame carries a soft teal/rose gradient underneath, so while the
   file is missing (or still loading) you get a tasteful panel, not a
   broken-image icon. */
.banner-frame{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 80% at 12% 20%, rgba(227,162,168,.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 88% 85%, rgba(227,162,168,.45) 0%, transparent 60%),
    linear-gradient(150deg, var(--soft-aqua) 0%, var(--aqua-mist) 50%, var(--cream-warm) 100%);
}
.banner-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* If the file is missing, let the gradient show through cleanly instead of
     rendering the alt text over it. Screen readers still announce the alt. */
  color:transparent;font-size:0;
}

/* ---------- pull quote ---------- */
.pull{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,3.2vw,2.1rem);font-style:italic;font-weight:600;
  color:var(--deep-teal);
  text-align:center;line-height:1.5;
  padding:36px 0;margin:12px 0;
  border-top:1px solid rgba(201,169,106,.35);
  border-bottom:1px solid rgba(201,169,106,.35);
}
.pull strong{font-weight:700}

/* ---------- body of work ---------- */
.work{background:var(--cream);text-align:center}
.work h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600;margin-bottom:14px}
.work .sub{color:var(--text-soft);font-size:16px;max-width:620px;margin:0 auto}

.stats{
  display:flex;justify-content:center;flex-wrap:wrap;
  margin:52px auto 60px;max-width:760px;
}
.stat{flex:1;min-width:150px;padding:0 24px}
.stat + .stat{border-left:1px solid rgba(201,169,106,.35)}
.stat .n{
  font-family:'Cormorant Garamond',serif;
  font-size:3.1rem;font-weight:700;color:var(--deep-teal);line-height:1.1;
}
/* the "s" in 100s shouldn't shout as loud as the numerals */
.stat .n sup{
  font-size:.5em;font-weight:600;
  vertical-align:baseline;margin-left:1px;
}
.stat .t{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-soft);margin-top:8px;
}

/* A horizontal rail, not a grid — so more events can be added without the
   section growing endlessly, and you scroll sideways through the archive. */
.gallery{
  display:flex;gap:24px;text-align:left;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding:4px 4px 22px;
  margin:0 -4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(201,169,106,.55) transparent;
}
.gallery::-webkit-scrollbar{height:6px}
.gallery::-webkit-scrollbar-track{background:rgba(201,169,106,.12);border-radius:100px}
.gallery::-webkit-scrollbar-thumb{background:rgba(201,169,106,.55);border-radius:100px}
.gallery::-webkit-scrollbar-thumb:hover{background:var(--gold)}
.piece{flex:0 0 296px;scroll-snap-align:start}
.gallery-hint{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-soft);margin-top:6px;
}
.piece{
  border-radius:var(--radius);overflow:hidden;
  background:var(--cream-warm);
  border:1px solid rgba(201,169,106,.22);
  box-shadow:var(--shadow-soft);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.piece:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.piece .ph{
  aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--aqua-mist) 0%,rgba(227,162,168,.28) 100%);
  color:var(--deep-teal);
  font-family:'Cormorant Garamond',serif;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.55;
}
/* Archive treatment.
   The real posters are from the older, louder brand (black, electric turquoise,
   hot blue). Dropped in raw they shatter the calm of a cream page. So they're
   gently muted to sit inside the palette — and return to full colour on hover,
   where the loudness reads as history rather than noise. */
.piece .shot{
  position:relative;overflow:hidden;
  height:400px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream-warm);
}
/* CONTAIN, never cover: these are posters, and a crop decapitates them.
   The letterbox reads as a mount around the artwork. */
.piece .shot img{
  width:100%;height:100%;object-fit:contain;
  filter:saturate(.86) contrast(.96) brightness(1.02);
  transition:filter .9s var(--ease),transform .9s var(--ease);
}
.piece .shot::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(250,246,240,.26),rgba(214,232,232,.20));
  transition:opacity .9s var(--ease);
}
.piece:hover .shot img{filter:none;transform:scale(1.03)}
.piece:hover .shot::after{opacity:0}

/* Landscape posters would lose half their content to a 4:5 crop —
   letterbox them onto cream instead of cropping. */


.piece .cap{padding:24px}
.piece .cap .when{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px;
}
.piece .cap h3{font-size:1.4rem;font-weight:400;margin-bottom:6px}
.piece .cap p{font-size:14.5px;color:var(--text-soft);line-height:1.7}

/* ---------- invitation / opt-in ----------
   The one deliberately BOLD moment on the page. Deep teal like the banner,
   not another pale cream panel — the eye needs somewhere to land, and the
   thing you most want people to do should be the thing they can't miss. */
.invite{background:var(--cream);text-align:center}
.invite-card{
  position:relative;overflow:hidden;
  max-width:760px;margin:0 auto;padding:72px 56px;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(ellipse 70% 90% at 15% 10%, rgba(127,182,186,.30) 0%, transparent 60%),
    radial-gradient(ellipse 70% 90% at 90% 95%, rgba(201,127,135,.28) 0%, transparent 60%),
    linear-gradient(155deg, #185F66 0%, var(--deep-teal) 55%, #103F47 100%);
  box-shadow:0 20px 60px rgba(20,86,92,.22);
}
/* The roses are lifted from the banner itself (cut out, background keyed away,
   edges feathered) so the invitation reads as the same world — not a separate
   dark box bolted onto the page. Decorative only, hence aria-hidden in markup. */
.invite-card::before,
.invite-card::after{
  content:'';position:absolute;pointer-events:none;
  background-repeat:no-repeat;
  opacity:.9;
}
.invite-card::before{
  top:0;left:0;width:230px;height:212px;
  background-image:url('brand-images/decor/rose-corner-tl.webp');
  background-size:contain;background-position:top left;
}
.invite-card::after{
  bottom:0;right:0;width:236px;height:225px;
  background-image:url('brand-images/decor/rose-corner-br.webp');
  background-size:contain;background-position:bottom right;
}
/* keep the copy above the flowers */
.invite-card > *{position:relative;z-index:1}

@media(max-width:640px){
  .invite-card::before{width:140px;height:129px}
  .invite-card::after{width:145px;height:138px}
}

.invite-card .label{color:var(--gold-bright)}
.invite-card .rule{background:linear-gradient(90deg,transparent,var(--gold-bright),transparent)}
.invite h2{
  font-size:clamp(1.9rem,3.8vw,2.8rem);
  font-weight:600;font-style:normal;
  color:#FBF7F1;
  line-height:1.35;margin-bottom:20px;
}
.invite h2 em{color:var(--gold-bright);font-style:italic}
.invite p{color:rgba(251,247,241,.82);font-size:17px;margin-bottom:38px}
.invite strong{color:var(--gold-bright);font-weight:700}

.form{display:flex;flex-direction:column;gap:14px;max-width:420px;margin:0 auto}
.form input{
  width:100%;padding:18px 26px;
  font-family:'Inter',sans-serif;font-size:15.5px;font-weight:400;
  color:var(--deep-teal);background:#FBF7F1;
  border:1px solid rgba(217,185,120,.5);
  border-radius:100px;
  transition:all .4s var(--ease);
}
.form input::placeholder{color:var(--text-soft)}
.form input:focus{
  outline:none;border-color:var(--gold-bright);
  box-shadow:0 0 0 4px rgba(217,185,120,.25);
}
/* Gold button on deep teal — maximum contrast, impossible to miss. */
.form button{
  width:100%;border:none;margin-top:8px;
  background:var(--gold-bright);color:#103F47;
  font-weight:600;
}
.form button:hover{background:var(--dusty-rose);color:#103F47}

/* The newsletter CTA is now a link out to the signup page, not an inline form. */
.btn-join{
  background:var(--gold-bright);
  border-color:var(--gold-bright);
  color:#103F47;
  padding:20px 48px;
  font-size:14px;
}
.btn-join:hover{
  background:var(--dusty-rose);
  border-color:var(--dusty-rose);
  color:#103F47;
}

/* ---------- connect ---------- */
.connect{background:var(--cream);text-align:center;padding-bottom:96px}
.connect h2{font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:600;margin-bottom:10px}
.connect .mail{margin:32px 0 40px}
.connect .mail a{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;color:var(--deep-teal);
  text-decoration:none;
  border-bottom:1px solid var(--gold);padding-bottom:4px;
  transition:color .4s var(--ease);
}
.connect .mail a:hover{color:var(--rose-deep)}
.socials{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.socials a{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream-warm);
  border:1px solid rgba(201,169,106,.35);
  color:var(--deep-teal);text-decoration:none;
  transition:all .5s var(--ease);
}
.socials svg{width:23px;height:23px;fill:currentColor;display:block}
.socials a:hover{
  background:var(--dusty-rose);border-color:var(--dusty-rose);
  color:var(--forest);transform:translateY(-3px);
}

/* ---------- botanicals ----------
   Leaves, roses and the watercolour wash are all cut from Chata's own banner,
   so the ornament is literally the same artwork — not stock foliage bolted on.
   Every one is decorative: aria-hidden, pointer-events:none, and it never
   reflows the layout (absolutely positioned, clipped by the section).
   Sections that host them need position:relative + overflow:hidden. */
.bot{
  position:absolute;pointer-events:none;z-index:0;
  background-repeat:no-repeat;background-size:contain;
}
/* content must always sit above the foliage */
.has-bot{position:relative;overflow:hidden}
.has-bot .wrap{position:relative;z-index:1}

/* Leaves reaching IN from the edges of the page.
   ONLY the horizontal branches are used. The upright "bouquet" sprigs in the
   banner all sit on top of a rose, so cutting one out drags a chopped pink-and-
   gold stump along with it — it reads as a torn sticker, not foliage. The
   branches extract whole: a stem that runs off the edge and leaves that fan in.
   The right-hand versions are the same branches mirrored, so both sides are the
   same plant. Each hangs a third of its width off the page, so the stem is cut
   by the EDGE (a real boundary) and never by its own ragged outline. */
.bot-left{
  left:0;
  background-image:url('brand-images/decor/leaf-edge-l.webp');
  background-position:left center;
  transform:translateX(-30%) rotate(-4deg);
  opacity:.8;
}
.bot-right{
  right:0;
  background-image:url('brand-images/decor/leaf-edge-r.webp');
  background-position:right center;
  transform:translateX(30%) rotate(4deg);
  opacity:.8;
}
.bot-sprig{
  background-image:url('brand-images/decor/leaf-sprig.webp');
}
/* Second branch, so opposite edges of the page never repeat the same silhouette.
   Roses are deliberately absent here: every rose in the banner is cut off by the
   banner's own edge, so a half-rose only reads right in a CORNER, where two of
   its cut sides are hidden by a real edge. That is why roses live on the invite
   card and the contact card, and the page edges get leaves. */
.bot-rose-l{
  left:0;
  background-image:url('brand-images/decor/leaf-edge-l2.webp');
  background-position:left center;
  transform:translateX(-28%) rotate(5deg);
  opacity:.72;
}
.bot-rose-r{
  right:0;
  background-image:url('brand-images/decor/leaf-edge-r2.webp');
  background-position:right center;
  transform:translateX(28%) rotate(-5deg);
  opacity:.72;
}

/* the faded "river" watercolour wash */
.bot-wash{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('brand-images/decor/wash-teal.webp');
  background-size:cover;background-position:center;
  opacity:.16;
  mix-blend-mode:multiply;
}

@media(max-width:900px){
  /* on a phone the botanicals crowd the text — keep only the faintest hint */
  .bot{opacity:.4}
  .bot-left,.bot-rose-l{transform:translateX(-52%) scale(.72)}
  .bot-right,.bot-rose-r{transform:translateX(52%) scale(.72)}
}

/* ---------- contact form ----------
   A real form, not a mailto. It posts through Netlify Forms — the site already
   deploys there, so submissions land in the Netlify dashboard and get emailed
   on. Nothing to host, no backend to maintain.
   NOTE: it only works on the DEPLOYED site. Opening the file locally, the form
   has nowhere to post to. */
.contact-card{
  position:relative;overflow:hidden;
  max-width:600px;margin:64px auto 44px;   /* breathe after "Come as you are." */
  padding:56px 46px 46px;
  text-align:left;
  background:
    radial-gradient(ellipse 60% 50% at 8% 4%,  rgba(227,162,168,.16) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 95% 98%, rgba(154,200,203,.20) 0%, transparent 62%),
    var(--cream-warm);
  border:1px solid rgba(201,169,106,.45);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
/* Same roses as the invitation, so the two cards read as one family.
   Corners only — every rose in the banner is clipped by the banner's own
   edge, so a corner is the one place the cut is hidden by a real edge.
   Pale here: they sit UNDER a form, so they wash rather than compete. */
.contact-card::before,
.contact-card::after{
  content:'';position:absolute;pointer-events:none;z-index:0;
  background-repeat:no-repeat;
}
.contact-card::before{
  top:-6px;left:-8px;width:134px;height:124px;
  background-image:url('brand-images/decor/rose-corner-tl.webp');
  background-size:contain;background-position:top left;
  opacity:.28;
}
.contact-card::after{
  bottom:-10px;right:-10px;width:180px;height:172px;
  background-image:url('brand-images/decor/rose-corner-br.webp');
  background-size:contain;background-position:bottom right;
  opacity:.38;
}
/* everything the eye reads sits above the flowers */
.contact-card > *{position:relative;z-index:1}

/* The mark in the top-right corner — it signs the card the way a letterhead does,
   and it balances the rose sitting in the opposite corner. Small on purpose: it
   is a seal, not a headline. */
.card-mark{
  position:absolute;top:26px;right:26px;
  width:46px;height:auto;
  opacity:.9;z-index:2;
  pointer-events:none;
}
@media(max-width:640px){ .card-mark{width:34px;top:18px;right:18px} }

/* a leaf trailing in from each side of the heading — the gold rule, grown */
.contact-card h3{
  font-size:1.6rem;font-weight:600;
  text-align:center;margin-bottom:6px;
}
.contact-card .note{
  text-align:center;font-size:15px;color:var(--text);
  margin-bottom:6px;line-height:1.6;
}
/* a plain gold hairline between the heading and the fields — no ornament */
.contact-card .rule{margin:22px auto 28px}

@media(max-width:640px){
  .contact-card{padding:48px 26px 36px}
  .contact-card::before{width:112px;height:104px}
  .contact-card::after{width:120px;height:115px}
}
.contact-form{display:flex;flex-direction:column;gap:16px}
.contact-form label{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:-8px;
}
.contact-form input,
.contact-form textarea{
  width:100%;padding:15px 20px;
  font-family:'Inter',sans-serif;font-size:16px;font-weight:400;
  color:var(--text);background:var(--cream);
  border:1px solid rgba(201,169,106,.5);
  border-radius:var(--radius);
  transition:all .4s var(--ease);
}
.contact-form textarea{min-height:130px;resize:vertical;line-height:1.7}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--text-soft);opacity:.75}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;border-color:var(--soft-aqua);
  box-shadow:0 0 0 4px rgba(154,200,203,.2);
}
.contact-form button{width:100%;border:none;margin-top:6px;cursor:pointer}
/* spam trap — hidden from people, catches bots */
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- footer ---------- */
footer{
  position:relative;overflow:hidden;
  background:var(--cream-warm);
  border-top:1px solid rgba(201,169,106,.28);
  padding:60px 32px 48px;text-align:center;
}
/* The mark signs off the page. Larger than the nav one — this is the last thing
   the eye rests on, and there is room here that the nav bar doesn't have. */
.footer-mark{
  width:72px;height:auto;
  margin:0 auto 22px;
  opacity:.92;
}
@media(max-width:760px){ .footer-mark{width:58px;margin-bottom:16px} }
/* sprigs either side of "Feel your way to freedom" */
footer::before,
footer::after{
  content:'';position:absolute;pointer-events:none;
  width:190px;height:141px;top:24px;
  background-repeat:no-repeat;background-size:contain;
  opacity:.85;
}
footer::before{
  left:0;
  background-image:url('brand-images/decor/leaf-left.webp');
  background-position:left top;
  transform:translateX(-22%);
}
footer::after{
  right:0;bottom:0;top:auto;
  width:260px;height:250px;
  background-image:url('brand-images/decor/rose-corner-br.webp');
  background-position:right bottom;
  opacity:.95;
}
footer > *{position:relative;z-index:1}
@media(max-width:760px){
  footer::before{width:120px;height:89px;opacity:.5}
  footer::after{width:150px;height:144px;opacity:.6}
}
footer p{font-size:12.5px;color:var(--text-soft);letter-spacing:.05em}
footer .fq{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:600;
  font-size:clamp(1.6rem,3vw,2.3rem);
  color:var(--deep-teal);margin-bottom:18px;
  line-height:1.3;
}

/* ---------- scroll reveals ----------
   One shared engine: anything with a reveal class starts displaced and settles
   when it scrolls into view. Slow and long (1.1s) on a soft ease — the brief is
   "relaxing on the nervous system", so nothing snaps, bounces or overshoots.
   Everything here degrades to "just visible" under prefers-reduced-motion. */
.rise,.rise-l,.rise-r,.pop{
  opacity:0;
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
  will-change:opacity,transform;
}
.rise  {transform:translateY(24px)}
.rise-l{transform:translateX(-44px)}   /* enters from the left  */
.rise-r{transform:translateX(44px)}    /* enters from the right */

/* .pop is the only thing on the site allowed to overshoot. Small icons can carry
   a little spring — they read as playful. A big card doing this would read as a
   glitch, which is why the doors and offering panels glide instead. */
.pop{
  transform:translateY(16px) scale(.86);
  transition:opacity .55s var(--ease),
             transform .62s cubic-bezier(.34,1.56,.64,1);   /* settles just past 1.0, then back */
}

.rise.in,.rise-l.in,.rise-r.in,.pop.in{opacity:1;transform:none}

/* Stagger: children of a .stagger parent land one after another instead of all
   at once. The delay is set from JS as --d, so the markup stays clean. */
.stagger > *{transition-delay:var(--d,0s)}

/* ---------- the gold sheen ----------
   A slow band of light crossing a dark panel. Lifted from the AI group-container
   card, made reusable: put .sheen on any dark card and it comes alive. */
.sheen{position:relative;overflow:hidden}
.sheen::after{
  content:'';position:absolute;top:-60%;bottom:-60%;left:-40%;width:32%;
  pointer-events:none;z-index:2;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(217,185,120,.00) 20%,
    rgba(217,185,120,.22) 50%,
    rgba(217,185,120,.00) 80%,
    transparent 100%);
  transform:skewX(-14deg);
  animation:sheen-sweep 7s var(--ease) infinite;
}
@keyframes sheen-sweep{
  0%   {left:-40%}
  55%  {left:120%}
  100% {left:120%}   /* long dark pause, so it reads as a breath, not a blink */
}

/* ---------- hover life ----------
   Nothing moves until you point at it — then it lifts a few pixels. */
.lift{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}

@media(prefers-reduced-motion:reduce){
  .rise,.rise-l,.rise-r,.pop{opacity:1;transform:none;transition:none}
  .sheen::after{display:none}
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---------- responsive ---------- */
@media(max-width:860px){
  section{padding:80px 0}
  .wrap{padding:0 24px}
  .stat{flex:0 0 50%;min-width:0;padding:20px 16px}
  .stat + .stat{border-left:none}
  .invite-card{padding:48px 28px}
}
@media(max-width:480px){
  body{font-size:17px}
  .gallery{grid-template-columns:1fr}
}

/* ---------- screen-reader-only ----------
   Both inner pages carry their title INSIDE the banner artwork, which Google
   and screen readers cannot read. This gives each page a real <h1> — the single
   strongest on-page relevance signal — without changing the design. It states
   exactly what the banner already says, so it is a description, not a trick. */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- about / meet Chata ----------
   Portrait beside the words. Placed AFTER the story on each page — by the time a
   reader reaches it she is already warm, so the elevated language lands as
   confirmation of someone she's started to trust, not as a cold first pitch. */
.about{background:var(--cream);}
.about .wrap{
  display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;align-items:center;
}
.about .portrait{
  position:relative;
  border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 18px 50px rgba(20,86,92,.18);
  border:1px solid rgba(201,169,106,.3);
}
.about .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.about .copy{text-align:left}
.about .copy .role{
  display:block;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}
.about .copy h2{font-size:clamp(1.9rem,3.8vw,2.7rem);font-weight:600;margin-bottom:6px}
.about .copy .founder{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.15rem;color:var(--text-soft);margin-bottom:28px;
}
.about .copy .greet{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
  font-size:1.4rem;color:var(--rose-deep);margin-bottom:20px;
}
.about .copy p{font-size:16.5px;line-height:1.85;margin-bottom:20px}
.about .copy .sparkle{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
  font-size:clamp(1.3rem,2.6vw,1.6rem);
  color:var(--deep-teal);text-align:center;
  padding-top:12px;margin-bottom:0;
}
@media(max-width:820px){
  .about .wrap{grid-template-columns:1fr;gap:36px}
  .about .portrait{max-width:360px;margin:0 auto;width:100%}
  .about .copy{text-align:center}
  .about .copy .sparkle{text-align:center}
}

/* ============================================================
   INLINE MAILERLITE FORMS
   MailerLite's own webforms.min.js handles the submit (kept intact);
   we strip their default grey / Open-Sans styling and dress the
   fields in the brand so they read as native to the page.
   ============================================================ */
.ml-embedded-wrap{width:100%;max-width:440px;margin:0 auto}
.ml-embedded-wrap .ml-form-embedContainer{width:100%!important;display:block!important}
.ml-embedded-wrap .ml-form-embedWrapper{background:transparent!important;border:0!important;width:100%!important;max-width:100%!important;display:block!important;margin:0!important}
.ml-embedded-wrap .ml-form-align-center{text-align:center}
.ml-embedded-wrap .ml-form-embedBody{padding:0!important}
.ml-embedded-wrap .ml-form-embedContent{display:none!important}   /* hide MailerLite's own heading/copy — we supply our own */
.ml-embedded-wrap form{margin:0!important;width:100%!important}
.ml-embedded-wrap .ml-form-formContent{margin:0 0 14px 0!important;width:100%!important}
.ml-embedded-wrap .ml-form-fieldRow{margin:0 0 12px 0!important;width:100%!important}
.ml-embedded-wrap .ml-form-fieldRow.ml-last-item{margin-bottom:0!important}
.ml-embedded-wrap .ml-field-group{text-align:left!important}
.ml-embedded-wrap input[type=text],
.ml-embedded-wrap input[type=email]{
  background:#FFFDFA!important;color:var(--text)!important;
  border:1px solid rgba(201,169,106,.55)!important;border-radius:12px!important;
  font-family:'Inter',sans-serif!important;font-size:15px!important;line-height:1.4!important;
  padding:14px 16px!important;width:100%!important;box-sizing:border-box!important;max-width:100%!important;
  transition:border-color .3s ease;
}
.ml-embedded-wrap input:focus{outline:none!important;border-color:var(--deep-teal)!important}
.ml-embedded-wrap input::placeholder{color:var(--text-soft)!important;opacity:1}
.ml-embedded-wrap .ml-form-embedSubmit{margin:2px 0 0 0!important;width:100%!important;float:none!important}
.ml-embedded-wrap .ml-form-embedSubmit button.primary{
  background:var(--deep-teal)!important;color:#FBF7F1!important;border:0!important;
  border-radius:100px!important;box-shadow:none!important;
  font-family:'Inter',sans-serif!important;font-size:12px!important;font-weight:600!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;
  padding:16px 24px!important;width:100%!important;height:auto!important;cursor:pointer;
  transition:background .5s var(--ease),transform .5s var(--ease);
}
.ml-embedded-wrap .ml-form-embedSubmit button.primary:hover{background:var(--rose-deep)!important;transform:translateY(-2px)}
.ml-embedded-wrap .ml-form-embedSubmit button.loading{background:var(--deep-teal)!important;border:0!important}
.ml-embedded-wrap .ml-form-successBody{padding:0!important}
.ml-embedded-wrap .ml-form-successContent{text-align:center!important;margin:0!important}
.ml-embedded-wrap .ml-form-successContent h4{
  font-family:'Cormorant Garamond',serif!important;color:var(--deep-teal)!important;
  font-size:1.7rem!important;font-weight:600!important;margin:0 0 8px 0!important;text-align:center!important;
}
.ml-embedded-wrap .ml-form-successContent p{
  color:var(--text)!important;font-family:'Inter',sans-serif!important;
  font-size:15px!important;line-height:1.6!important;margin:0!important;text-align:center!important;
}
.ml-embedded-wrap .ml-error input{border-color:var(--rose-deep)!important}
.ml-embedded-wrap .ml-form-embedSubmitLoad{display:inline-block;width:20px;height:20px}
.ml-embedded-wrap .ml-form-embedSubmitLoad:after{content:" ";display:block;width:11px;height:11px;margin:1px;border-radius:50%;border:4px solid #fff;border-color:#fff #fff #fff transparent;animation:ml-form-embedSubmitLoad 1.2s linear infinite}
@keyframes ml-form-embedSubmitLoad{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.ml-embedded-wrap .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* the middle band on the home Connect section: icons, then email, between the two forms */
.connect-mid{text-align:center;margin:40px auto 44px}
.connect-mid .mid-label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);margin:0 0 16px}
.connect-mid .socials{margin-bottom:16px}

/* The embodied page's mailing form sits on a DARK teal invite-card, so its
   success message + button need light/gold treatment to stay legible.
   (On the home page the same form is on a cream card and keeps the dark text.) */
.invite-card .ml-form-successContent h4{color:var(--gold-bright)!important}
.invite-card .ml-form-successContent p{color:#FBF7F1!important}
.invite-card .ml-form-embedSubmit button.primary{background:var(--gold-bright)!important;color:#103F47!important}
.invite-card .ml-form-embedSubmit button.primary:hover{background:var(--dusty-rose)!important;color:#FBF7F1!important}

/* ============================================================
   VIDEO TESTIMONIALS — click-to-play (preload none: the video
   only downloads when a visitor actually taps play, so page
   loads and idle visitors cost zero video bandwidth).
   ============================================================ */
.vgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;
  max-width:760px;margin:0 auto;
}
.vtesti{margin:0;text-align:center}
.vframe{
  position:relative;cursor:pointer;overflow:hidden;
  aspect-ratio:3/4;border-radius:var(--radius);
  background:#0e2f33;box-shadow:var(--shadow-soft);
}
.vframe img.vposter{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.vframe:hover img.vposter{transform:scale(1.04)}
.vframe::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,86,92,.02),rgba(20,86,92,.30));pointer-events:none;transition:opacity .4s var(--ease)}
.vframe.playing::after{opacity:0}
.vplay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:70px;height:70px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(250,246,240,.94);color:var(--deep-teal);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 32px rgba(20,86,92,.38);
  transition:transform .4s var(--ease),background .4s var(--ease);
}
.vframe:hover .vplay{transform:translate(-50%,-50%) scale(1.09);background:var(--gold-bright)}
.vplay svg{width:28px;height:28px;margin-left:3px;fill:currentColor}
.vplayer{width:100%;height:100%;object-fit:cover;display:block;background:#0e2f33}
.vtesti figcaption{
  margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-soft);
}
@media(max-width:600px){
  .vgrid{grid-template-columns:1fr;gap:22px;max-width:360px}
}

/* ============================================================
   "READ MORE" bio reveal (Meet Chata on home + AI pages).
   First two paragraphs + a hook stay visible; the rest is one
   tap away via a native <details> (works with JS disabled).
   ============================================================ */
.about .copy .chata-hook{margin-bottom:2px}
.about .copy .chata-reveal{margin:0 0 4px}
.about .copy .chata-reveal summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--deep-teal);padding:2px 0 4px;
  border-bottom:1px solid var(--gold);width:-moz-fit-content;width:fit-content;
  transition:gap .4s var(--ease),color .4s var(--ease);
}
.about .copy .chata-reveal summary::-webkit-details-marker{display:none}
.about .copy .chata-reveal summary:hover{gap:13px;color:var(--rose-deep)}
.about .copy .chata-reveal[open] summary{display:none}
.about .copy .chata-reveal[open]{margin-top:10px}
.about .copy .chata-reveal > p:first-of-type{margin-top:0}

/* Video-testimonial captions styled as a short pulled quote (italic serif),
   instead of the small uppercase label. */
.vtesti figcaption.vq{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
  font-size:1.3rem;line-height:1.35;letter-spacing:0;text-transform:none;
  color:var(--deep-teal);margin-top:16px;
}