/* ============================================================
   Maiaveda concept site
   Palette: her teal (#008487) as structure, palm-leaf parchment as
   canvas, her brand orange (#d6712d) as the single action colour.
   Type: Newsreader (display) + Figtree (text)
   ============================================================ */

:root{
  --teal-950:#062627;
  --teal-900:#0C4243;
  --teal-800:#134F51;
  --teal-700:#1D6465;
  --brand:#008487;
  --teal-deep:#007073;   /* small teal text on light: 5.2:1 */
  --teal-300:#9FBDBB;    /* muted text on dark: 5.6:1 on teal-900 */

  --parchment:#F7F1E6;
  --parchment-2:#EFE5D3;
  --parchment-3:#E3D5BE;
  --hair:#CFC3B0;        /* hairlines on light */
  --stone:#D9D0C4;
  --stone-2:#CFC7BB;
  --stone-3:#B9B1A6;

  --orange:#d6712d;      /* her brand orange. Text on it is always teal-950: 4.8:1 */
  --orange-hi:#E07F3C;
  --orange-deep:#B85E22;
  --orange-action:#A85520; /* white on this: 5.27:1 */
  --orange-action-deep:#8E4517;
  --amber:#E9A82E;       /* dark grounds only: date stamp, prices */

  --ink:#1F2A29;
  --ink-muted:#4C5C5A;

  /* Never less than the safe area, so a phone on its side keeps the logo, menu
     and text clear of the notch. The insets are 0 everywhere else (ECHOSTUDIO-789). */
  --gutter:max(clamp(.875rem,2.2vw,1.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --pad:clamp(1.25rem,5vw,3.5rem);
  --gap:clamp(2.5rem,6vw,5rem);
  --rule:1px solid var(--hair);
  --rule-dark:1px solid rgba(159,189,187,.22);
  --r:4px;

  /* --newsreader and --figtree are the self-hosted faces from next/font, set
     on <html> by the site layout (ECHOSTUDIO-789). */
  --serif:var(--newsreader),Georgia,"Times New Roman",serif;
  --sans:var(--figtree),"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
/* Route changes must land at the top rather than animating there. In-page
   anchors are smoothed in the behaviour layer instead. */
html{-webkit-text-size-adjust:100%; scroll-behavior:auto; scroll-padding-top:90px}

body{
  margin:0; background:var(--parchment); color:var(--ink);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.6;
  font-variant-numeric:tabular-nums; overflow-x:clip; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal-deep); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:2px}
.on-dark :focus-visible{outline-color:var(--amber)}
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:500;
  font-variation-settings:"SOFT" 28,"WONK" 1; line-height:1.04; letter-spacing:-.018em;
  margin:0; text-wrap:balance;
}
h1{font-size:clamp(2.6rem,7vw,5.6rem); font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 144; letter-spacing:-.03em}
h2{font-size:clamp(2rem,4.8vw,3.6rem); font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 96}
h3{font-size:clamp(1.25rem,2.3vw,1.6rem); font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 40}
h4{font-size:1.1rem}
p{margin:0 0 1rem}
.lede{font-size:clamp(1.08rem,1.6vw,1.25rem); color:var(--ink-muted); max-width:56ch; line-height:1.55}
.on-dark .lede{color:var(--stone-2)}
.small{font-size:.86rem; color:var(--ink-muted)}
.on-dark .small{color:var(--teal-300)}
.serif-i{font-family:var(--serif); font-style:italic; font-variation-settings:"SOFT" 60,"WONK" 1}
.wrap{width:100%; padding-inline:var(--gutter)}
.narrow{max-width:72ch}
.measure{max-width:60ch}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--teal-900); color:var(--parchment); padding:.75rem 1.25rem; font-weight:600}
.skip:focus{left:.5rem; top:.5rem}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* labels ------------------------------------------------------- */
.label{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-deep); margin:0 0 1rem; display:block;
}
.on-dark .label{color:var(--amber)}
.label .n{display:inline-block; min-width:2.4em; color:var(--ink-muted)}
.on-dark .label .n{color:var(--teal-300)}

/* grain -------------------------------------------------------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:95; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* header ------------------------------------------------------- */
/*
 * Solid by default, transparent only over a hero.
 *
 * It was the other way round: the bar had no background anywhere and blended
 * with `difference` so its marks inverted over whatever was behind them. That
 * is a lovely idea and it only works over a photograph. On the pages with no
 * hero, and on every page once you had scrolled past one, the nav sat directly
 * on top of running text with nothing separating the two, and hovering a top
 * level link that has no dropdown gave no feedback at all, because only an
 * open mega menu ever painted a background.
 *
 * `over-hero` is the exception now rather than the rule. site-behaviours.ts has
 * been computing it for months, adding and removing the class on scroll; no
 * rule in any stylesheet ever read it, so the work was thrown away every frame.
 *
 * No backdrop-filter: it would create a stacking context and the blend inside
 * the exception would have nothing behind it to work against.
 */
.site-head{
  position:fixed; left:0; right:0; top:0; z-index:80; padding-top:env(safe-area-inset-top);
  background:var(--parchment); border-bottom:1px solid var(--hair);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.site-head .brand{background:transparent; padding:0}
.site-head .nav a.top, .site-head .nav button.top{color:var(--ink-muted)}
.site-head .nav li.open > .top{color:var(--ink)}
.site-head .burger{color:var(--ink)}
.site-head .head-cta .btn2{color:var(--ink)}
.site-head .head-cta .btn2:hover{color:var(--teal-deep)}
/* The mark is drawn light for the photograph, so on parchment it inverts. */
.site-head .brand-mark{filter:invert(1)}

/*
 * Over a hero the bar is the photograph.
 *
 * A solid strip across the top of a full bleed image costs the first thing
 * anyone sees, and on a phone that strip was a third of what fitted above the
 * fold. The blend goes on the bar, not on the marks inside it: `position:fixed`
 * with a z-index makes the header its own stacking context, so a child blending
 * inside it has nothing behind it but transparency. The bar blends against the
 * page and everything in it inverts together.
 *
 * White is the only colour this blend can be trusted with. Dark ink under
 * difference against a mid-toned photograph subtracts to something close to the
 * photograph itself, which is how the phone number went muddy and nearly
 * vanished.
 */
.site-head.over-hero{
  background:transparent; border-bottom-color:transparent;
  mix-blend-mode:difference;
}
.site-head.over-hero .burger{color:#fff}
.site-head.over-hero .nav a.top, .site-head.over-hero .nav button.top{color:#fff}
.site-head.over-hero .head-cta .btn2{color:#fff}
.site-head.over-hero .head-cta .btn2:hover{color:#bfbfbf}
.site-head.over-hero .brand-mark{filter:none}
/*
 * The hero starts at the top of the screen.
 *
 * No negative margin is needed: over a hero the bar is `fixed`, so it is out of
 * the flow already and the hero begins at zero on its own. The content inside
 * is pushed down instead, or the first line sits behind the logo.
 */
body.hero-top .hero{padding-block-start:calc(var(--head-h, 68px) + clamp(1.5rem, 4vw, 3rem))}
/* Pages that do not open with a hero would otherwise start under the bar. */
body:not(.hero-top) main,
body:not(.hero-top) .page-hero:first-child{padding-block-start:var(--head-h, 68px)}
/* The same decision from the markup, so a page that opens with a hero is drawn
   that way from the first paint. Waiting for the script moved the whole hero up
   68px once it ran, a layout shift Google counts (ECHOSTUDIO-789). The class
   above stays for browsers without :has(). */
body:has(> main > :is(.hero, .mh):nth-child(1 of :not(script, style, template, noscript))) main{padding-block-start:0}
/* 69px before the script measures it: the bar's 68px and its 1px rule. */
body:has(> main > .hero:nth-child(1 of :not(script, style, template, noscript))) .hero{padding-block-start:calc(var(--head-h, 69px) + clamp(1.5rem, 4vw, 3rem))}
.site-head .bar{display:flex; align-items:center; gap:1.5rem; min-height:68px; padding-block:.55rem}
.brand{display:inline-flex; align-items:center; text-decoration:none; background:var(--brand); padding:.5rem .85rem .45rem; border-radius:var(--r); flex:none}
.brand img{width:124px; height:auto}
/* One or the other, never both. */
.brand-mark{display:block; width:40px !important}
/* The lock up with its teal box is never used in the bar now. */
.brand-full{display:none}
@media (max-width:430px){.brand{padding:.42rem .65rem .38rem}.brand img{width:98px}}
.nav{display:none; gap:.25rem; margin-inline:auto}
@media (min-width:1080px){.nav{display:flex}}
.nav > li{list-style:none; position:static}
.nav{padding:0; margin-block:0}
.nav a.top, .nav button.top{
  appearance:none; background:none; border:0; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:.4rem; padding:.7rem .8rem;
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); text-decoration:none; border-radius:999px;
}
/*
 * Six items, a mark and the Book button share 1080 pixels at the narrowest
 * desktop width. At full padding the button was pushed off the right edge, and
 * before the regroup "Gift vouchers" wrapped onto two lines. Tighter padding
 * until there is room for the full amount.
 */
@media (min-width:1080px) and (max-width:1279px){.nav a.top, .nav button.top{padding-inline:.55rem}}
.nav a.top:hover, .nav button.top:hover, .nav li.open > .top, .nav a.top[aria-current="page"]{color:var(--ink); background:var(--parchment-2)}
.nav button.top svg{width:10px; height:10px; transition:transform .25s var(--ease)}
.nav li.open > button.top svg{transform:rotate(180deg)}
.head-cta{display:none; align-items:center; gap:.4rem; margin-left:auto}
@media (min-width:640px){.head-cta{display:flex}}
/*
 * Two fine lines, close together, that cross into an X when the menu is open.
 *
 * Three thick bars with air between them is the default every framework ships
 * with. This is lighter and tighter, and it is one control rather than two: the
 * same button opens and closes, so there is no second cross floating inside the
 * panel.
 */
.burger{
  appearance:none; background:none; border:0; cursor:pointer; padding:0;
  width:44px; height:44px; position:relative; display:block; margin-left:auto; color:var(--ink);
}

@media (min-width:640px){.burger{margin-left:0}}
@media (min-width:1080px){.burger{display:none}}
.burger span{
  position:absolute; left:50%; top:50%;
  display:block; width:24px; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .42s cubic-bezier(.65,0,.35,1);
}
/* Closed: a tight pair, 5px apart. */
.burger span:nth-child(1){transform:translate(-50%,-50%) translateY(-2.75px)}
.burger span:nth-child(2){transform:translate(-50%,-50%) translateY(2.75px)}
/* Open: the same two lines, crossed. Nothing appears or disappears. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}

/* The bar stays above the open panel so the button is still the way out. */
.site-head{z-index:130}

/*
 * With the panel open the backdrop is a known colour, so the blend stands down.
 * Difference against deep teal turns white into salmon, which is a fine effect
 * over a photograph and the wrong one for a close button.
 */
body.menu-open .site-head{mix-blend-mode:normal; color:var(--parchment)}
body.menu-open .burger{color:var(--parchment)}

/*
 * The same for a desktop dropdown, which was the bug: the panels live inside
 * the bar, so the bar's blend composited them against the page as well. They
 * opened see-through, with the page text showing through the menu and every
 * photograph in it turned to a negative. With a panel open the backdrop is the
 * panel's own parchment, so the bar goes solid and uses its real colours, and
 * the light mark is inverted to read on it.
 */
/*
 * Over a hero the bar comes forward as soon as you reach for it.
 *
 * Three ways in, and they all land on the same state: an open mega menu, the
 * pointer anywhere in the bar, or the keyboard arriving in it. The bar is a
 * fixed full width strip, so `:hover` on the element itself fires the moment
 * the pointer crosses into that band, which is what you expect of a navigation
 * that is otherwise invisible. Hovering a top level link with no dropdown used
 * to do nothing at all, because an open panel was the only trigger.
 *
 * `:focus-within` is not decoration. Without it a keyboard user tabs into a
 * white link sitting on a photograph with no background behind it.
 */
.site-head.over-hero:has(.nav > li.open),
.site-head.over-hero:hover,
.site-head.over-hero:focus-within{mix-blend-mode:normal; background:var(--parchment); border-bottom-color:var(--hair)}
.site-head.over-hero:has(.nav > li.open) .nav a.top,
.site-head.over-hero:has(.nav > li.open) .nav button.top,
.site-head.over-hero:hover .nav a.top,
.site-head.over-hero:hover .nav button.top,
.site-head.over-hero:focus-within .nav a.top,
.site-head.over-hero:focus-within .nav button.top{color:var(--ink-muted)}
.site-head.over-hero:has(.nav > li.open) .burger,
.site-head.over-hero:hover .burger,
.site-head.over-hero:focus-within .burger{color:var(--ink)}
.site-head.over-hero:has(.nav > li.open) .brand-mark,
.site-head.over-hero:hover .brand-mark,
.site-head.over-hero:focus-within .brand-mark{filter:invert(1)}
.site-head.over-hero:has(.nav > li.open) .head-cta .btn2,
.site-head.over-hero:hover .head-cta .btn2,
.site-head.over-hero:focus-within .head-cta .btn2{color:var(--ink-muted)}
/*
 * The Book button is drawn in its own fixed layer outside the header, because
 * the header blends and everything inside a blending element blends with it.
 * That layer cannot see the header's hover, so it is told about it here: the
 * two sit on top of each other and have to change together or the button
 * appears to float on nothing.
 */
.head-book{transition:background .2s var(--ease)}
.site-head:has(.nav > li.open) .nav li.open > .top{color:var(--ink); background:var(--parchment-2)}
/*
 * The Book button's own layer, outside the blended header. See Header.tsx.
 * The bar's measurements are repeated here rather than shared, because the
 * header's rules are scoped to .site-head; if one changes, change both. The
 * header keeps an invisible copy of the button so everything else holds still.
 */
.head-cta .book-space{visibility:hidden}
.head-book{position:fixed; top:0; left:0; right:0; z-index:131; pointer-events:none; display:none; padding-top:env(safe-area-inset-top)}
@media (min-width:640px){.head-book{display:block}}
.head-book .bar{display:flex; align-items:center; justify-content:flex-end; gap:1.5rem; min-height:68px; padding-block:.55rem}
.head-book .btn{pointer-events:auto}
.head-book .burger-space{width:44px; height:44px; flex:none}
@media (min-width:1080px){.head-book .burger-space{display:none}}

@media (prefers-reduced-motion: reduce){.burger span{transition:none}}

/* mega menu ---------------------------------------------------- */
.mega{
  overflow:hidden; position:absolute; left:0; right:0; top:100%; background:var(--parchment);
  border-bottom:var(--rule); box-shadow:0 30px 60px -40px rgba(6,38,39,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  /* A closed menu is not rendered at all, so the photographs inside it are not
     downloaded until someone opens it. With visibility alone the browser still
     fetched every thumbnail in every menu on every page: about 6MB. */
  content-visibility:hidden;
}
.nav li.open > .mega{opacity:1; visibility:visible; transform:none; transition-delay:0s; content-visibility:visible}
/* Switching between two menus: no drop, no rise, the panels crossfade where
   they are. The class is put on by the behaviour layer for the length of the
   fade. */
.nav.switching > li > .mega{transform:none; transition:opacity .18s var(--ease), visibility 0s linear .18s}
.nav.switching > li.open > .mega{transition-delay:0s}
.mega-in{display:grid; gap:0; padding:0}
.mega-in{grid-template-columns:1.1fr 1fr 1fr 1.2fr}
.mega-col{padding:1.5rem 1.5rem 1.75rem; border-right:var(--rule)}
.mega-col:last-child{border-right:0}
.mega-col .label{margin-bottom:.8rem}
.mega-col ul{list-style:none; margin:0; padding:0}
.mega-col li a{display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--parchment-3); text-decoration:none; color:var(--ink); font-size:.95rem}
.mega-col li a small{color:var(--ink-muted); font-size:.8rem}
.mega-col li a:hover{color:var(--teal-deep)}
.mega-col li:last-child a{border-bottom:0}
/* The rule above was written for the first mega menus, plain link lists. In
   the list and photograph layout the only <a> inside an <li> is "See details",
   and it inherited a hairline under it on every row but the last. No lines
   under a link, and no line between the list and the photograph. */
.mega-col .llist li a{border-bottom:0; padding:0}
.mega-2 .mega-col{border-right:0}
.mega-tile{display:block; text-decoration:none; color:var(--ink); border-radius:var(--r); overflow:hidden; position:relative}
.mega-tile img{aspect-ratio:4/3; object-fit:cover; width:100%; border-radius:var(--r); transition:transform .6s var(--ease)}
.mega-tile:hover img{transform:scale(1.03)}
.mega-tile b{display:block; font-family:var(--serif); font-weight:500; font-size:1.25rem; margin-top:.75rem}
.mega-tile span{display:block; color:var(--ink-muted); font-size:.86rem}

h2[tabindex]:focus{outline:0}
.mega-in{max-width:1400px; margin-inline:auto}
/* drawer ------------------------------------------------------- */
/*
 * The menu arrives rather than slides.
 *
 * A panel sliding in from the right is the default every template ships with.
 * This opens from the corner the burger is in: the ground expands out from
 * under the button, then the links rise into it one after another. The whole
 * thing is about half a second, which is long enough to read as deliberate and
 * short enough not to be in the way on the second use.
 */
.drawer{
  position:fixed; inset:0; z-index:120; background:var(--teal-900); color:var(--parchment);
  overflow-y:auto; overscroll-behavior:contain;
  /* Sides come from the gutter; top and bottom keep the links off the status
     bar and the home indicator (ECHOSTUDIO-789). */
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  clip-path:circle(0% at calc(100% - 2.4rem) 2.4rem);
  opacity:0;
  transition:clip-path .52s cubic-bezier(.4,0,.2,1), opacity .2s linear .02s;
  pointer-events:none;
}
.drawer.open{
  clip-path:circle(145% at calc(100% - 2.4rem) 2.4rem);
  opacity:1;
  pointer-events:auto;
}

/* The links come up after the ground has arrived under them. */
.drawer .grp, .drawer .top{
  opacity:0; transform:translateY(14px);
  transition:opacity .34s var(--ease), transform .34s var(--ease);
}
.drawer.open .grp, .drawer.open .top{opacity:1; transform:none}
.drawer.open .top{transition-delay:.10s}
.drawer.open .grp:nth-of-type(1){transition-delay:.16s}
.drawer.open .grp:nth-of-type(2){transition-delay:.22s}
.drawer.open .grp:nth-of-type(3){transition-delay:.28s}
.drawer.open .grp:nth-of-type(4){transition-delay:.34s}
.drawer.open .grp:nth-of-type(5){transition-delay:.40s}
.drawer.open .grp:nth-of-type(n+6){transition-delay:.44s}

/* Someone who has asked for less movement gets the panel, not the performance. */
@media (prefers-reduced-motion: reduce){
  .drawer{transition:opacity .2s linear; clip-path:none; visibility:hidden}
  .drawer.open{visibility:visible}
  .drawer .grp, .drawer .top{transition:none; transform:none; opacity:1}
}
.drawer .top{display:flex; align-items:center; justify-content:space-between; padding:.75rem var(--gutter); border-bottom:var(--rule-dark); min-height:68px}
/* Hidden: the burger is the close button now, and two crosses on one screen is
   one too many. Kept in the markup so anything relying on it still finds it. */
.drawer .close{display:none}
.drawer nav, .drawer .drawer-links{padding:1rem var(--gutter) 6rem}
.drawer .grp{border-bottom:var(--rule-dark); padding:.9rem 0}
.drawer .grp > a, .drawer .grp > b{display:block; font-family:var(--serif); font-size:1.7rem; color:var(--parchment); text-decoration:none; font-weight:500}
.drawer .grp ul{list-style:none; margin:.5rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.15rem 1rem}
.drawer .grp ul a{color:var(--stone); text-decoration:none; font-size:.95rem; display:block; padding:.3rem 0}
.drawer .meta{margin-top:1.5rem; color:var(--teal-300); font-size:.9rem}
.drawer .meta a{color:var(--parchment)}

/* buttons: primary pill + borderless secondary ----------------- */
.btn{
  display:inline-flex; align-items:center; gap:.9rem; min-height:50px;
  padding:.45rem .45rem .45rem 1.35rem; border-radius:999px; border:0; cursor:pointer;
  background:var(--orange-action); color:#fff; text-decoration:none;
  font:600 1.0625rem/1 var(--sans); letter-spacing:.01em; white-space:nowrap; width:fit-content; max-width:100%;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
/* On a phone a label longer than the screen (200% text or zoom) wraps inside
   its pill rather than running off the edge. At normal sizes every label fits
   on one line, so none wraps (ECHOSTUDIO-762). */
@media (max-width:560px){.btn{white-space:normal; line-height:1.15}}
.btn .arr{width:38px; height:38px; border-radius:50%; background:var(--teal-950); color:#fff; display:grid; place-items:center; flex:none; transition:transform .3s var(--ease)}
.btn .arr svg{width:15px; height:15px}
.btn:hover{background:var(--orange-action-deep); color:#fff; transform:translateY(-1px)}
.btn:hover .arr{transform:rotate(-45deg)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink)}
.btn.ghost .arr{background:var(--ink); color:var(--parchment)}
.on-dark .btn.ghost{color:var(--parchment); border-color:rgba(247,241,230,.5)}
.on-dark .btn.ghost .arr{background:var(--parchment); color:var(--teal-900)}
.btn.sm{min-height:42px; padding:.3rem .3rem .3rem 1rem; font-size:.95rem}
.btn.sm .arr{width:32px; height:32px}
.btn.teal{background:var(--teal-900); color:var(--parchment)}
.btn.teal .arr{background:var(--parchment); color:var(--teal-900)}
.btn.teal:hover{background:var(--teal-800); color:var(--parchment)}

.btn2{
  display:inline-flex; align-items:center; gap:.55rem; min-height:50px; padding:.5rem .6rem;
  font:600 .92rem/1 var(--sans); color:var(--ink); text-decoration:none; white-space:nowrap; border-radius:999px;
}
.btn2 svg{width:18px; height:18px; flex:none}
.btn2:hover{color:var(--teal-deep)}
.on-dark .btn2{color:var(--parchment)}
.on-dark .btn2:hover{color:var(--amber)}
.ctas{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-top:1.75rem}
/* The button that closes a grid (the full menu under the treatment tiles, the
   team under the portraits) sits under the middle of the grid, not its left
   edge, so it reads as belonging to the whole set rather than the first tile. */
.ctas--center{justify-content:center}
/* On a phone a call to action fills the column it sits in. A button sized to
   its own text reads as an afterthought next to one that does not. */
@media (max-width:560px){
  .ctas{flex-direction:column; align-items:stretch; width:100%}
  .ctas .btn, .ctas .btn2, .ctas .quiet{width:100%; justify-content:space-between}
  .ctas .btn2{justify-content:center}
}
/* The same rule for every page button, not only the ones in a .ctas row: a
   block's "Buy a gift voucher" sat at the width of its label under two rating
   badges that fill the column (Phil, 15 Oct 2026, ECHOSTUDIO-788). That
   includes the small ones in a tile or a price row. The header's small button
   and the arrow-only button keep their own size. In the enquiry form's
   Back/Next row the button takes what Back leaves. */
@media (max-width:560px){
  main .btn:not(.sm), .site-foot .btn,
  .btn-cta:not(.btn-cta--bare){width:100%; justify-self:stretch; justify-content:space-between}
  .enq-nav > .btn-cta{width:auto; flex:1 1 auto}
  .ttile-links{width:100%; justify-self:stretch}
}

/* sections ----------------------------------------------------- */
main{position:relative; z-index:2; background:var(--parchment)}
.sec{padding-block:clamp(3.25rem,7vw,6.5rem); border-top:var(--rule)}
.sec.tight{padding-block:clamp(2rem,4vw,3.5rem)}
.sec.dark{background:var(--teal-900); color:var(--parchment); border-top:0}
.sec.deep{background:var(--teal-950); color:var(--parchment); border-top:0}
.sec.alt{background:var(--parchment-2)}
.dark h1,.dark h2,.dark h3,.deep h1,.deep h2,.deep h3{color:var(--parchment)}
.sec-head{display:grid; gap:1rem 3rem; margin-bottom:clamp(1.75rem,4vw,3rem); align-items:end}
@media (min-width:900px){.sec-head{grid-template-columns:1.3fr 1fr}.sec-head .lede{margin:0}}
.split{display:grid; gap:var(--gap)}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr; align-items:start}}
.split-3{display:grid; gap:1.25rem}
@media (min-width:760px){.split-3{grid-template-columns:repeat(3,1fr)}}
.split-4{display:grid; gap:1.25rem}
@media (min-width:640px){.split-4{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.split-4{grid-template-columns:repeat(4,1fr)}}
.prose p{max-width:60ch}
.prose ul{padding-left:1.2rem; max-width:60ch}
.prose li{margin-bottom:.35rem}
.dark .prose p, .deep .prose p{color:var(--stone)}
.pull{font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.8rem); line-height:1.3; font-style:italic; font-variation-settings:"SOFT" 40,"WONK" 1; color:var(--teal-deep); max-width:30ch; margin:0 0 1.4rem}
.dark .pull{color:var(--amber)}

/* hairline lists ----------------------------------------------- */
.lines{list-style:none; margin:0; padding:0; border-top:var(--rule)}
.lines li{padding:.75rem 0; border-bottom:var(--rule); display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
.lines li em{font-style:normal; color:var(--ink-muted); font-size:.86rem; display:block; margin-top:.15rem}
.dark .lines, .dark .lines li{border-color:rgba(159,189,187,.22)}
.dark .lines li em{color:var(--teal-300)}
dl.facts{margin:0; display:grid; gap:.1rem}
/* Label column then value, side by side while the value has room for 8em
   (true on a 320px phone at normal size); at large text the value drops under its label rather
   than the label running into it (ECHOSTUDIO-762). Sizes in em so the label
   column grows with the reader's text. */
dl.facts > div{display:flex; flex-wrap:wrap; gap:.25rem 1rem; padding:.7rem 0; border-bottom:var(--rule)}
dl.facts > div > dt{flex:0 0 calc(8.5em / .74)} /* 8.5rem at the label's own .74rem */
dl.facts > div > dd{flex:1 1 8em; min-width:0}
/* An email address can't break anywhere sensible, so when it doesn't fit
   beside its label it goes under it whole (ECHOSTUDIO-762). */
dl.facts > div > dd:has(> a[href^="mailto:"]){flex-basis:auto}
dl.facts dt{font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); font-weight:600; padding-top:.2rem}
dl.facts dd{margin:0}
.dark dl.facts > div{border-color:rgba(159,189,187,.22)}
.dark dl.facts dt{color:var(--teal-300)}

/* hero --------------------------------------------------------- */
.hero{position:relative; padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,6vw,4.5rem)}
.hero.dark{background:var(--teal-900); color:var(--parchment); overflow:hidden}
.hero.dark::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 10% 0%,rgba(214,113,45,.22),transparent 55%),radial-gradient(80% 70% at 100% 100%,rgba(233,168,46,.10),transparent 62%)}
.hero .wrap{position:relative; z-index:2}
.hero-grid{display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:end}
@media (min-width:980px){.hero-grid{grid-template-columns:1.15fr .85fr; align-items:stretch}}
.kicker{font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); margin:0 0 1rem}
.hero:not(.dark) .kicker{color:var(--teal-deep)}
.datestamp{display:block; font-family:var(--serif); color:var(--amber); font-size:clamp(3.6rem,15vw,10.5rem); font-weight:600; line-height:.82; letter-spacing:-.045em; font-variation-settings:"SOFT" 12,"WONK" 1,"opsz" 144; margin:.3rem 0 .1rem; font-feature-settings:"lnum" 1}
.datestamp .mo{display:inline-block; font-size:.4em; letter-spacing:.02em; vertical-align:.42em; margin-left:.12em}
.h1-name{display:block; font-family:var(--sans); font-weight:600; font-size:clamp(1.05rem,2.4vw,1.5rem); letter-spacing:.02em; line-height:1.25; color:var(--parchment)}
.dateline{display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline; border-top:var(--rule-dark); padding-top:.85rem; margin-top:.9rem; font-size:.9rem; color:var(--teal-300); letter-spacing:.03em}
.dateline b{color:var(--parchment); font-weight:600}
.pricebar{margin-top:1.5rem; padding:1rem 1.15rem; border:var(--rule-dark); background:rgba(6,38,39,.5); border-radius:var(--r); display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; align-items:baseline}
.pricebar .amt{font-family:var(--serif); font-size:1.6rem; color:var(--amber); font-weight:600; line-height:1}
.pricebar .lbl{font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--teal-300); display:block; margin-bottom:.2rem}
.pricebar .dep{font-size:.86rem; color:var(--stone); flex-basis:100%; padding-top:.6rem; border-top:var(--rule-dark)}
.pricebar .dep b{color:var(--parchment)}
@media (min-width:620px){.pricebar .dep{margin-left:auto; flex-basis:auto; padding-top:0; border-top:0}}
.rating{margin-top:1.5rem; padding-top:1rem; border-top:var(--rule-dark); display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; font-size:.86rem; color:var(--stone)}
.stars{color:var(--amber); letter-spacing:.12em; font-size:1rem}
.rating b{color:var(--parchment)}
.hero:not(.dark) .rating{border-top:var(--rule); color:var(--ink-muted)}
.hero:not(.dark) .rating b{color:var(--ink)}
.hero:not(.dark) .stars{color:var(--orange-deep)}
.hero-fig{margin:0; position:relative; display:flex; flex-direction:column; justify-content:flex-end}
.hero-fig img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 42%; border-radius:var(--r)}
.hero-fig figcaption{margin-top:.7rem; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-300)}
.hero:not(.dark) .hero-fig figcaption{color:var(--ink-muted)}
@media (min-width:980px){.hero-fig img{aspect-ratio:auto; flex:1 1 auto; min-height:clamp(420px,52vh,620px)}}
@media (max-width:979px){.hero-fig img{aspect-ratio:5/4; object-position:50% 38%}}
.page-hero{padding-block:clamp(3rem,7vw,6rem) clamp(2rem,5vw,4rem)}
.page-hero .lede{margin-top:1.25rem}
/* In the media, one appearance: the intro under the title, and the way back to the list. */
.press-intro{margin-top:1.25rem; max-width:40rem}
.press-back{margin-top:1.5rem}
.page-hero .split{align-items:center !important}
.page-hero .split figure img{max-width:min(100%,460px); margin-left:auto}
.crumbs{font-size:.8rem; color:var(--ink-muted); margin:0 0 1.25rem; letter-spacing:.02em}
.crumbs a{color:var(--ink-muted); text-decoration:none}
.crumbs a:hover{color:var(--teal-deep)}
.on-dark .crumbs, .on-dark .crumbs a{color:var(--teal-300)}

/* proof strip -------------------------------------------------- */
.proof{border-top:var(--rule); border-bottom:var(--rule); background:var(--parchment-2)}
.proof .wrap{display:grid; grid-template-columns:1fr}
@media (min-width:640px){.proof .wrap{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.proof .wrap{grid-template-columns:repeat(4,1fr)}}
.proof-item{padding:1.25rem 0; border-bottom:var(--rule)}
@media (min-width:640px){.proof-item{padding:1.4rem 1.5rem; border-right:var(--rule)}.proof-item:nth-child(2n){border-right:0}}
@media (min-width:1020px){.proof-item{border-bottom:0; border-right:var(--rule)}.proof-item:nth-child(2n){border-right:var(--rule)}.proof-item:last-child{border-right:0}.proof-item:first-child{padding-left:0}}
.proof-item b{display:block; font-family:var(--serif); font-size:1.3rem; font-weight:500; margin-bottom:.15rem; color:var(--teal-deep)}
.proof-item span{display:block; font-size:.86rem; color:var(--ink-muted); line-height:1.45}

/* tiles -------------------------------------------------------- */
.tiles{display:grid; gap:1.25rem}
@media (min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.tiles.c3{grid-template-columns:repeat(3,1fr)}.tiles.c4{grid-template-columns:repeat(4,1fr)}}
.tile{display:block; text-decoration:none; color:inherit; position:relative}
.tile .im{border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--parchment-2)}
.tile .im.tall{aspect-ratio:3/4}
.tile .im.sq{aspect-ratio:1}
.tile .im img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.tile:hover .im img{transform:scale(1.035)}
.tile .cap{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.85rem 0 0}
.tile .cap b{font-family:var(--serif); font-weight:500; font-size:1.25rem; letter-spacing:-.01em}
.tile .cap span{font-size:.85rem; color:var(--ink-muted); white-space:nowrap}
.tile .cap em{display:block; font-style:normal; color:var(--ink-muted); font-size:.88rem; margin-top:.15rem}
.dark .tile .cap span, .dark .tile .cap em{color:var(--teal-300)}
.tile .circ{position:absolute; right:.75rem; top:.75rem; width:44px; height:44px; border-radius:50%; background:rgba(247,241,230,.9); color:var(--teal-900); display:grid; place-items:center; transform:scale(.6); opacity:0; transition:all .3s var(--ease)}
.tile:hover .circ{transform:none; opacity:1}
@media (hover:hover) and (pointer:fine){.tile[data-cursor] .circ{display:none}}
.cursor-tag{
  position:fixed; left:0; top:0; z-index:110; pointer-events:none; width:86px; height:86px; border-radius:50%;
  /* The deeper orange, because white on the brand orange is 3.36:1 and fails. */
  background:var(--orange-action); color:#fff; display:grid; place-items:center;
  font:600 .78rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  transform:translate(-50%,-50%) scale(0); transition:transform .28s var(--ease); will-change:transform;
}
/* --rot, --sx and --sy come from the cursor loop: it leans into the direction of
   travel and stretches with speed. The transition softens them further. */
.cursor-tag.on{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(var(--sx,1), var(--sy,1))}
@media (hover:none),(pointer:coarse){.cursor-tag{display:none}}

/* Parked: the lit pill that hangs off the pointer instead of sitting under it.
   Nothing applies this class at the moment. To try it again, have the cursor tag
   in src/lib/site-behaviours.ts add "cursor-tag--pill" alongside "cursor-tag". */
.cursor-tag--pill{
  width:auto; height:40px; border-radius:999px; padding:0 1.15rem;
  background:
    radial-gradient(120% 90% at 28% 8%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(to bottom, var(--orange-hi) 0%, var(--orange) 46%, var(--orange-action-deep) 100%);
  /* Inner shading only: the pill lights itself and casts nothing on the page. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -6px 10px -6px rgba(64,24,4,.75),
    inset 0 8px 14px -10px rgba(255,255,255,.5);
  text-shadow:0 1px 1px rgba(74,30,6,.5);
  transform:translate(14px,14px) scale(.6); opacity:0;
  transition:transform .26s var(--ease), opacity .2s var(--ease);
  transform-origin:top left;
  overflow:hidden; isolation:isolate;
}
.cursor-tag--pill::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}
.cursor-tag--pill.on{transform:translate(14px,14px) scale(1); opacity:1}

/* photo band with parallax -------------------------------------- */
.pband{position:relative; overflow:hidden; height:clamp(260px,46vw,560px); border-radius:0}
.pband img{position:absolute; left:0; top:-12%; width:100%; height:124%; object-fit:cover; will-change:transform}
.pband .cap{position:absolute; left:var(--gutter); bottom:1rem; color:var(--parchment); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,.4)}
.pband .cap.dk{color:var(--ink); text-shadow:none}
.pband.r{border-radius:var(--r)}

/* pictogram lists ---------------------------------------------- */
.picto{display:grid; gap:1.25rem}
@media (min-width:640px){.picto{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.picto{grid-template-columns:repeat(4,1fr)}}
.picto .it{border-top:1px solid var(--teal-deep); padding:1rem 0 .5rem}
.picto .it svg{width:44px; height:44px; stroke:var(--teal-deep); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.8rem}
.picto .it b{display:block; font-family:var(--serif); font-weight:500; font-size:1.15rem; margin-bottom:.25rem}
.picto .it p{font-size:.92rem; color:var(--ink-muted); margin:0}
.dark .picto .it{border-color:var(--amber)}
.dark .picto .it svg{stroke:var(--amber)}
.dark .picto .it p{color:var(--stone-2)}
.inline-picto{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* menu / price rows -------------------------------------------- */
.menu-group{border-top:2px solid var(--teal-deep); padding-top:1.25rem; margin-bottom:2.5rem}
.menu-group h3{margin-bottom:.35rem}
.menu-group .intro{color:var(--ink-muted); font-size:.95rem; max-width:60ch; margin-bottom:1rem}
/* Mind Body's workshops, after its treatments (Marye, 7 Oct 2026). */
.menu-group h4{margin:2rem 0 .5rem; color:var(--teal-deep)}
.mrow{display:grid; grid-template-columns:1fr auto; gap:.25rem 1rem; padding:.85rem 0; border-bottom:var(--rule); text-decoration:none; color:inherit; align-items:start}
a.mrow:hover .nm{color:var(--teal-deep)}
.mrow .nm{font-family:var(--serif); font-weight:500; font-size:1.12rem; letter-spacing:-.01em}
.mrow .nm small{display:block; font-family:var(--sans); font-size:.82rem; color:var(--ink-muted); margin-top:.15rem; font-weight:400}
.mrow .pr{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
/* The price column fills first and wraps only when the row can't hold it, so at
   200% text "$145 weekends" stays on the screen (ECHOSTUDIO-762). */
@media (max-width:560px){.mrow .pr{white-space:normal}}
.mrow .pr b{display:block; font-weight:600}
.mrow .pr span{display:block; font-size:.78rem; color:var(--ink-muted)}
.mrow .dur{grid-column:1; font-size:.8rem; color:var(--ink-muted); letter-spacing:.04em; text-transform:uppercase}
.price-key{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.84rem; color:var(--ink-muted); padding:.75rem 0; border-bottom:var(--rule); margin-bottom:.5rem}
.price-key b{color:var(--ink)}
.menu-jump{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.25rem 0 0}
.menu-jump a{display:inline-flex; align-items:center; min-height:40px; padding:.35rem .95rem; border:1px solid var(--hair); border-radius:999px; text-decoration:none; font-size:.84rem; font-weight:600; color:var(--ink)}
.menu-jump a:hover{border-color:var(--ink)}

/* treatment page ------------------------------------------------ */
.tblock{display:grid; gap:2rem}
@media (min-width:960px){.tblock{grid-template-columns:1.25fr .9fr; align-items:start}}
.tblock .tcopy{display:flex; flex-direction:column}
.tblock .tcopy .ctas{margin-top:auto; padding-top:1.75rem}
.tblock .prose p{margin:1.25rem 0 0}
.pricebox{background:var(--parchment-2); border-radius:12px; padding:clamp(1rem,2vw,1.5rem); display:grid; gap:.6rem; align-content:start}
.alt .pricebox{background:var(--parchment)}
.pricebox .ptiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem}
.ptile{background:var(--parchment); border-radius:8px; padding:.9rem 1rem; border:1px solid rgba(31,42,41,.06)}
.alt .ptile{background:var(--parchment-2)}
.ptile span{display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); font-weight:600}
.ptile b{display:block; font-family:var(--serif); font-size:1.7rem; font-weight:500; line-height:1.1; margin:.25rem 0 .15rem}
.ptile small{display:block; font-size:.82rem; color:var(--ink-muted); line-height:1.35}
.ptile.with b{font-size:1.05rem; font-family:var(--sans); font-weight:600; line-height:1.35}
.pricebox .note{margin:0; background:transparent; padding:.9rem 0 0; border-left:0; border-top:1px solid rgba(31,42,41,.1); border-radius:0; font-size:.88rem}
.t-head{display:grid; gap:1.5rem}
@media (min-width:900px){.t-head{grid-template-columns:1.2fr .8fr; align-items:end}}
.t-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:0; border-top:var(--rule); border-bottom:var(--rule)}
.t-meta > div{padding:.9rem 1rem .9rem 0; border-right:var(--rule)}
.t-meta > div:last-child{border-right:0}
.t-meta b{display:block; font-family:var(--serif); font-size:1.35rem; font-weight:500}
.t-meta span{display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-muted); margin-bottom:.15rem}
.sanskrit{font-family:var(--serif); font-style:italic; color:var(--ink-muted); font-size:1.15rem; margin:.25rem 0 0}
.note{margin-top:1.5rem; padding:1rem 1.15rem; background:var(--parchment-2); border-left:3px solid var(--orange); font-size:.92rem; color:var(--ink-muted); max-width:70ch; border-radius:0 var(--r) var(--r) 0}
.note b{color:var(--ink)}
.dark .note{background:rgba(6,38,39,.5); color:var(--stone)}
.dark .note b{color:var(--parchment)}

/* booking card (one per page, the only saturated block) -------- */
.bookcard{
  background:var(--orange-action); color:#fff; border-radius:var(--r);
  padding:clamp(1.5rem,4vw,2.75rem); display:grid; gap:1.25rem 3rem; align-items:center; position:relative; overflow:hidden;
}
@media (min-width:900px){.bookcard{grid-template-columns:1.4fr 1fr}}
.bookcard h2,.bookcard h3{color:#fff}
.bookcard p{color:#fff; max-width:52ch; margin:.6rem 0 0}
.bookcard .btn{background:var(--teal-950); color:#fff}
.bookcard .btn .arr{background:var(--parchment); color:var(--teal-950)}
.bookcard .btn:hover{background:var(--teal-900); color:#fff}
.bookcard .btn2{color:#fff}
.bookcard .btn2:hover{color:var(--amber)}
.bookcard .ctas{margin-top:1.6rem}
.bookcard svg.mark{display:none}
.bookcard .facts{font-size:.9rem; display:grid; gap:.3rem; margin:0}
.bookcard .facts div{display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid rgba(255,255,255,.35); padding:.4rem 0}
.bookcard .facts b{font-weight:600}

/* team --------------------------------------------------------- */
.team{display:grid; gap:1.25rem 1rem}
@media (min-width:560px){.team{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.team{grid-template-columns:repeat(4,1fr)}}
.person{display:block; text-decoration:none; color:inherit; position:relative}
.person img{width:100%; aspect-ratio:6/7; object-fit:cover; border-radius:var(--r); filter:saturate(.92)}
.person b{display:block; font-family:var(--serif); font-weight:500; font-size:1.3rem; margin-top:.75rem}
.person span{display:block; font-size:.86rem; color:var(--ink-muted); line-height:1.4}
.person em{display:block; font-style:normal; font-size:.78rem; color:var(--teal-deep); margin-top:.3rem; letter-spacing:.02em}
.dark .person span{color:var(--stone-2)}
.dark .person em{color:var(--amber)}
.creds{list-style:none; margin:1.25rem 0 0; padding:0; border-top:var(--rule)}
.creds li{padding:.55rem 0; border-bottom:var(--rule); font-size:.92rem; display:flex; gap:.9rem}
.creds li b{color:var(--teal-deep); min-width:5.4rem; font-weight:600; flex:none}
.dark .creds, .dark .creds li{border-color:rgba(159,189,187,.22)}
.dark .creds li b{color:var(--amber)}
.postnom{font-size:.9rem; color:var(--ink-muted); letter-spacing:.01em; margin:.35rem 0 0}

/* quote -------------------------------------------------------- */
blockquote.q{margin:0; font-family:var(--serif); font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.4; font-variation-settings:"SOFT" 50,"WONK" 1; max-width:34ch; color:var(--ink)}
blockquote.q + figcaption{margin-top:1rem; font-size:.86rem; color:var(--ink-muted)}
.dark blockquote.q{color:var(--parchment)}
.dark blockquote.q + figcaption{color:var(--teal-300)}

/* forms -------------------------------------------------------- */
.form{display:grid; gap:1.1rem}
.field{display:grid; gap:.4rem}
.field label{font-size:.82rem; font-weight:600; letter-spacing:.03em; color:var(--ink)}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:var(--parchment); border:1px solid var(--hair);
  border-radius:var(--r); padding:.8rem .9rem; min-height:50px; width:100%;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--brand); outline-offset:1px; border-color:var(--brand)}
.field .err{font-size:.82rem; color:#8A2C0F; margin:0}
.field.invalid input{border-color:#8A2C0F}
.two{display:grid; gap:1.1rem}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}
.opts{display:grid; gap:.5rem}
.opt{display:flex; gap:.8rem; align-items:flex-start; padding:.85rem .95rem; border:1px solid var(--hair); border-radius:var(--r); cursor:pointer; background:var(--parchment)}
.opt:has(input:checked){border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand)}
.opt input{margin-top:.3rem; accent-color:var(--brand)}
.opt b{display:block}
.opt span{display:block; font-size:.86rem; color:var(--ink-muted)}
.thanks{display:none; background:var(--parchment-2); padding:clamp(1.25rem,3vw,2rem); border-radius:var(--r); border-top:3px solid var(--brand)}
.thanks.show{display:block}
.thanks ol{padding-left:1.2rem; margin:1rem 0 0}
.thanks li{margin-bottom:.4rem}

/* steps (conversational contact) -------------------------------- */
.stepper{display:flex; gap:.4rem; margin-bottom:1.5rem; flex-wrap:wrap}
.stepper span{height:4px; flex:1 1 40px; background:var(--parchment-3); border-radius:2px}
.stepper span.on{background:var(--brand)}
.step{display:none}
.step.on{display:block}
.step h3{margin-bottom:1rem}
.step .row{display:flex; gap:.6rem; margin-top:1.25rem; flex-wrap:wrap}

/* journal ------------------------------------------------------ */
.post-list{display:grid; gap:0; border-top:var(--rule)}
.post-row{display:grid; gap:.5rem 2rem; padding:1.5rem 0; border-bottom:var(--rule); text-decoration:none; color:inherit; align-items:center}
@media (min-width:800px){.post-row{grid-template-columns:200px 1fr auto}}
.post-row img{aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); width:100%}
.post-row b{font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2.4vw,1.8rem); letter-spacing:-.01em; display:block}
.post-row p{margin:.35rem 0 0; color:var(--ink-muted); max-width:60ch}
.post-row .when{font-size:.8rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.1em}
.post-row:hover b{color:var(--teal-deep)}
.article{max-width:66ch}
.article p{font-size:1.1rem; line-height:1.7}
.article h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:2rem 0 .75rem}
.article .byline{font-size:.86rem; color:var(--ink-muted); margin-bottom:2rem; display:flex; gap:.75rem; align-items:center}
.article .byline img{width:40px; height:40px; border-radius:50%; object-fit:cover}

/* faq ---------------------------------------------------------- */
details.faq{border-bottom:var(--rule)}
details.faq summary{cursor:pointer; list-style:none; padding:1.1rem 2.5rem 1.1rem 0; font-family:var(--serif); font-size:1.2rem; font-weight:500; position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%); width:32px; height:32px; border:1px solid var(--hair); border-radius:50%; display:grid; place-items:center; font-family:var(--sans); font-size:1.1rem; color:var(--teal-deep)}
details.faq[open] summary::after{content:"\2212"}
details.faq .a{padding:0 0 1.25rem; max-width:64ch; color:var(--ink-muted)}
.faq-wrap{border-top:var(--rule)}

/* reveal ------------------------------------------------------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0ms)}
.rv.in{opacity:1; transform:none}
/* The mask has to sit below the baseline or descenders get sliced off the
   finished heading. The negative margin puts the extra space back. */
/* Clipped rather than overflow:hidden so the mask reaches above the first
   line, where accented capitals sit (ECHOSTUDIO-207). The extra .45em start
   keeps ascenders and accents out of sight until the heading rises. */
.rv-h{clip-path:inset(-.25em -.1em 0 -.1em); padding-bottom:.22em; margin-bottom:-.22em}
.rv-h > span{display:block; transform:translateY(calc(130% + .45em)); transition:transform .7s var(--ease); transition-delay:var(--d,0ms)}
.rv-h.in > span{transform:none}
@media (prefers-reduced-motion:reduce){.rv,.rv-h > span{opacity:1; transform:none; transition:none}}

/* final cta + footer reveal ------------------------------------ */
.final{position:relative; overflow:hidden; background:var(--teal-950); color:var(--parchment); min-height:clamp(420px,56vw,640px); display:flex; align-items:flex-end}
.final > img{position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; will-change:transform}
.final::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,38,39,.15) 0%,rgba(6,38,39,.55) 55%,rgba(6,38,39,.85) 100%); pointer-events:none}
/* `> .in`, not ` .in`: the reveal script marks a shown element by adding the
   class `in`, so a descendant selector also matched the heading and paragraph
   once they revealed. Each picked up this padding, the band grew 172px mid
   scroll and the photo sized to it zoomed with it. */
.final > .in{position:relative; z-index:2; width:100%; padding:clamp(2.5rem,6vw,5rem) var(--gutter) clamp(2.5rem,5vw,4rem); display:grid; gap:1rem}
@media (min-width:900px){.final > .in{grid-template-columns:1.4fr 1fr; align-items:end}}
.final h2{font-size:clamp(2.4rem,6vw,5.2rem); letter-spacing:-.03em; color:var(--parchment); margin:0}
.final p{color:var(--stone); max-width:40ch; margin:.75rem 0 0}
.final .quiet{justify-self:start; width:fit-content; max-width:100%; display:inline-flex; align-items:center; gap:.75rem; color:var(--parchment); text-decoration:none; font:600 1rem var(--sans); border:1px solid rgba(247,241,230,.5); border-radius:999px; padding:.8rem .5rem .8rem 1.25rem; min-height:50px}
.final .quiet .arr{width:34px; height:34px; border-radius:50%; border:1px solid rgba(247,241,230,.6); display:grid; place-items:center}
.final .quiet .arr svg{width:14px; height:14px}
.final .quiet:hover{background:rgba(247,241,230,.12)}
@media (min-width:900px){.final .quiet{justify-self:end}}
/* ---- footer: one teal surface in two parts (ECHOSTUDIO-339) ----
   .foot-cover (sign-up, links, legal) scrolls with the page and sits over
   .foot-reveal, which is pinned to the bottom of the window, so the page and
   the cover slide up off the logo and name. Only the band is pinned because
   the whole footer was taller than a phone or a short laptop window. The band
   is sized by the page width alone and stays well inside a 360x640 screen.
   Sticky inside the footer, so the band never shows before the footer does. */
.site-foot{position:relative; background:var(--teal-900); color:var(--stone)}
.foot-cover{position:relative; z-index:2; background:var(--teal-900); padding-top:clamp(2rem,5vw,4rem)}
.foot-reveal{position:sticky; bottom:0; z-index:1; background:var(--teal-900)}
.site-foot[data-reveal="off"] .foot-reveal{position:relative}
/* The footer ripple (ECHOSTUDIO-207, desktop with a mouse only): under the words,
   over the teal. The cover's z-index makes it the stacking context. */
.foot-ripple{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
.foot-grid{display:grid; gap:2rem; padding-bottom:2rem}
@media (min-width:760px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.site-foot h4, .site-foot .foot-head{font-family:var(--sans); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-300); margin-bottom:.8rem; font-weight:600}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin:.3rem 0; font-size:.93rem}
.site-foot a{color:var(--parchment); text-decoration:none}
.site-foot a:hover{color:var(--amber)}
.site-foot p{font-size:.93rem; color:var(--stone-2); max-width:38ch}
.newsletter-footer{padding-bottom:clamp(2rem,5vw,4rem)}
.newsletter{
  display:grid; gap:clamp(1.5rem,4vw,3.5rem); align-items:end;
  padding-block:clamp(1.5rem,4vw,2.75rem); border-block:1px solid var(--hair);
}
.newsletter-copy{display:grid;gap:.55rem;max-width:34rem}
.newsletter h2{margin:0;font-family:var(--serif);font-size:clamp(2rem,4vw,3.5rem);line-height:1;letter-spacing:-.025em;font-weight:400}
.newsletter p{margin:0;color:var(--ink-muted)}
.newsletter-kicker{font-size:.7rem !important;line-height:1.4;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.newsletter-form{display:grid;gap:.9rem;min-width:0}
.newsletter-fields{display:grid;gap:.7rem;align-items:end;grid-template-columns:minmax(0,1fr)}
.newsletter-field{display:grid;gap:.35rem;min-width:0}
.newsletter-field label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.newsletter-field input{
  width:100%;min-width:0;height:3.25rem;padding:.72rem .85rem;border:1px solid var(--hair);
  border-radius:4px;background:rgba(255,255,255,.38);color:var(--ink);font:inherit;
}
.newsletter-field input:focus{outline:3px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.newsletter-submit{
  min-height:3.25rem;padding:.75rem 1.2rem;border:0;border-radius:999px;background:var(--orange-action);
  color:#fff;font:600 .95rem var(--sans);cursor:pointer;white-space:nowrap;
}
.newsletter-submit:hover{background:var(--orange-action-deep)}
.newsletter-submit:disabled{cursor:wait;opacity:.7}
.newsletter-submit--desktop{display:none}
/* full width on a phone, so its label wraps at large text rather than widening the page (ECHOSTUDIO-762) */
.newsletter-submit--mobile{width:100%;white-space:normal}
.newsletter-consent{display:flex;align-items:flex-start;gap:.65rem;font-size:.82rem;line-height:1.4;color:var(--ink-muted);cursor:pointer}
.newsletter-consent input{width:1rem;height:1rem;margin-top:.1rem;accent-color:var(--brand);flex:none}
.newsletter-problem{min-height:1.2em;font-size:.82rem;color:#8A2C0F !important}
.newsletter--sent{align-content:center;min-height:15rem}
@media(min-width:900px){
  .newsletter--inline{grid-template-columns:minmax(0,.85fr) minmax(32rem,1.15fr)}
  .newsletter-fields{grid-template-columns:minmax(8rem,.7fr) minmax(13rem,1fr) auto}
  .newsletter--inline .newsletter-submit--desktop{display:block}
  .newsletter--inline .newsletter-submit--mobile{display:none}
}
.newsletter--footer{border-color:rgba(159,189,187,.28)}
.newsletter--footer h2{color:var(--parchment);font-size:clamp(1.9rem,3vw,3rem)}
.newsletter--footer .newsletter-copy>p:not(.newsletter-kicker){color:var(--stone-2)}
.newsletter--footer .newsletter-kicker{color:var(--teal-300)}
.newsletter--footer .newsletter-field label{color:var(--teal-300)}
.newsletter--footer .newsletter-field input{border-color:rgba(247,241,230,.35);background:rgba(247,241,230,.08);color:var(--parchment)}
.newsletter--footer .newsletter-field input:focus{outline-color:var(--amber);border-color:var(--amber)}
.newsletter--footer .newsletter-submit{background:var(--parchment);color:var(--teal-950)}
.newsletter--footer .newsletter-submit:hover{background:var(--parchment-3)}
.newsletter--footer .newsletter-consent{color:var(--stone-2)}
.newsletter--footer .newsletter-consent input{accent-color:var(--amber)}
.newsletter--footer .newsletter-problem{color:#FFD1BD !important}
/* Copy beside the form only from 1000px: the two minimum widths add up to more
   than a 768px tablet, which pushed the button off the right edge. Between
   760 and 1000 the copy sits above and the fields keep their row. */
@media(min-width:1000px){
  .newsletter--footer{grid-template-columns:minmax(14rem,.65fr) minmax(28rem,1.35fr)}
}
@media(min-width:760px){
  .newsletter--footer .newsletter-fields{grid-template-columns:minmax(8rem,.65fr) minmax(12rem,1fr) auto}
  .newsletter--footer .newsletter-submit--desktop{display:block}
  .newsletter--footer .newsletter-submit--mobile{display:none}
}
/* ---- footer wordmark ----
   The mark and the name side by side, centred, the pair as wide as the page
   allows, sitting on the bottom edge of the screen. Sized with container query
   units on the footer row so it scales with the page and never overflows:
   --fit is the width of mark plus name at 1em of the name, measured in both
   engines. Re-measure if the face, weight or mark changes. No border: the
   footer is one surface, not two stacked bands. */
.foot-brand{
  container-type:inline-size;
  display:flex; justify-content:center; align-items:flex-end;
  gap:.22em; padding-block:0; margin-top:clamp(1rem,3vw,2.5rem);
  font-size:calc(100cqi / var(--fit, 5.6)); line-height:0; overflow:hidden;
}
.foot-brand-mark{display:block; height:.78em; width:auto; flex:none; margin-bottom:.07em}
.foot-brand-name{
  display:block; font-family:var(--serif); font-weight:400; color:var(--parchment);
  font-size:1em; line-height:.74; letter-spacing:-.02em; white-space:nowrap;
  /* The descender-free word's baseline sits on the bottom of the screen. */
  margin-bottom:-.02em;
}
.foot-legal{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.78rem; color:var(--teal-300); padding-block:0 .25rem}
.foot-legal a{color:var(--teal-300)}
/* The phone's Book/Call bar is fixed over the bottom of the screen, so the
   pinned band carries the room for it and the name sits above the bar. */
.has-bar .foot-reveal{padding-bottom:4.75rem}
/* The home page's retreat pill sits above the bar, so there the name rises
   clear of the pill too, and the pill rests underneath it (Marye, 9 Oct). */
.has-bar:has(#upc) .foot-reveal{padding-bottom:calc(8.85rem + env(safe-area-inset-bottom))}
@media (min-width:640px){.has-bar .foot-reveal, .has-bar:has(#upc) .foot-reveal{padding-bottom:env(safe-area-inset-bottom)}}

/* sticky mobile bar -------------------------------------------- */
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:100; display:flex; gap:.5rem; padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background:rgba(247,241,230,.96); backdrop-filter:blur(10px); border-top:var(--rule); transform:translateY(110%); transition:transform .35s var(--ease)}
.mbar.show{transform:none}
.mbar .btn{flex:1 1 auto; width:auto; justify-content:space-between}
.mbar .btn2{flex:0 0 auto; border:1px solid var(--hair)}
/* At large text or zoom, Call drops under Book instead of off the screen (ECHOSTUDIO-762). */
.mbar{flex-wrap:wrap}
@media (min-width:640px){.mbar{display:none}}

/* misc --------------------------------------------------------- */
.ph{background:repeating-linear-gradient(135deg,var(--parchment-2) 0 12px,var(--parchment) 12px 24px); border:1px dashed var(--hair); border-radius:var(--r); display:grid; place-items:center; text-align:center; padding:1.5rem; color:var(--ink-muted); font-size:.85rem; min-height:220px}
.ph b{display:block; color:var(--ink); font-family:var(--serif); font-size:1.1rem; margin-bottom:.35rem; font-weight:500}
.spine{display:none !important}
.big-num{font-family:var(--serif); font-size:clamp(3rem,8vw,6rem); line-height:.9; letter-spacing:-.04em; font-weight:500; color:var(--teal-deep)}
.dark .big-num{color:var(--amber)}
.day{border-top:var(--rule-dark); padding-top:1.1rem; margin-bottom:2rem}
.day h3{color:var(--amber); font-size:1rem; letter-spacing:.14em; text-transform:uppercase; font-family:var(--sans); font-weight:600; margin-bottom:.5rem}
.day h3 span{color:var(--teal-300); letter-spacing:.04em; text-transform:none; font-weight:400; font-size:.85rem; margin-left:.5rem}
.sched{list-style:none; margin:0; padding:0}
.sched li{display:grid; grid-template-columns:4.6rem 1fr; gap:.4rem 1rem; padding:.62rem 0; border-bottom:1px solid rgba(159,189,187,.18); align-items:baseline}
.sched time{color:var(--amber); font-size:.86rem; font-weight:600}
.sched .what{font-size:.98rem; color:var(--parchment)}
.sched .who{display:block; color:var(--teal-300); font-size:.82rem; margin-top:.12rem}
.tiers{display:grid; gap:1.25rem; margin-top:2rem}
@media (min-width:820px){.tiers{grid-template-columns:1fr 1fr}}
.tier{background:var(--parchment); border:1px solid var(--hair); border-radius:var(--r); padding:clamp(1.4rem,3vw,2.1rem); display:flex; flex-direction:column; position:relative}
.tier.feature{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand)}
.tier .flag{position:absolute; top:-1px; right:-1px; background:var(--orange-action); color:#fff; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:.35rem .7rem; border-radius:0 var(--r) 0 var(--r)}
.tier .price{font-family:var(--serif); font-size:clamp(2.4rem,6vw,3.2rem); font-weight:500; line-height:1; letter-spacing:-.03em; margin:.6rem 0 .15rem}
.tier .per{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted)}
.tier ul{list-style:none; margin:1.2rem 0 1.5rem; padding:0; border-top:var(--rule)}
.tier li{padding:.55rem 0 .55rem 1.4rem; border-bottom:var(--rule); font-size:.93rem; position:relative; color:var(--ink-muted)}
.tier li::before{content:""; position:absolute; left:0; top:1.05em; width:9px; height:1px; background:var(--brand)}
.tier .btn{margin-top:auto}
.fit{display:grid; gap:var(--gap)}
@media (min-width:880px){.fit{grid-template-columns:1fr 1fr}}
.fit ul{list-style:none; margin:1rem 0 0; padding:0}
.fit li{padding:.7rem 0 .7rem 2rem; border-bottom:var(--rule); position:relative; font-size:.98rem}
.fit .yes li::before{content:""; position:absolute; left:.15rem; top:1.2em; width:11px; height:6px; border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(-45deg)}
.fit .no li::before{content:""; position:absolute; left:.15rem; top:1.4em; width:12px; height:2px; background:var(--ink-muted)}
.inc-grid{display:grid; gap:0}
@media (min-width:760px){.inc-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.inc-grid{grid-template-columns:repeat(4,1fr)}}
.inc-col{border-top:2px solid var(--brand); padding:1.1rem 0 1.4rem}
@media (min-width:760px){.inc-col{padding-right:1.5rem}}
.inc-col h3{font-size:1.02rem; margin-bottom:.8rem; display:flex; align-items:center; gap:.6rem}
.inc-col ul{list-style:none; margin:0; padding:0}
.inc-col li{padding:.5rem 0; border-bottom:var(--rule); font-size:.92rem; line-height:1.45}
.inc-col li em{display:block; font-style:normal; color:var(--ink-muted); font-size:.8rem; margin-top:.1rem}

/* small screens: pills may wrap, never overflow */
@media (max-width:640px){
  .btn{white-space:normal; max-width:100%; text-align:left; line-height:1.2}
  .tblock .ctas{flex-direction:column; align-items:flex-start}
}
.tblock > *, .split > *, .sec-head > *, .hero-grid > *, .final > .in > *{min-width:0}
@media (max-width:640px){.btn{width:auto}}

/* Leandra list: large muted headings, hovered row outlined, image panel swaps ---- */
.llist-wrap{display:grid; gap:2rem; align-items:start}
@media (min-width:960px){.llist-wrap{grid-template-columns:1.15fr .85fr; gap:3rem}}
.llist{list-style:none; margin:0; padding:0}
.llist > li{margin:0}
.li-item{display:block; position:relative; border:1px solid transparent; border-radius:12px; padding:.55rem 3.4rem .55rem .9rem; margin:0; cursor:pointer; outline:none; transition:border-color .25s var(--ease), background .25s var(--ease)}
.li-item .t{display:block; font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4.2vw,3.6rem); line-height:1.08; letter-spacing:-.025em; color:var(--ink); opacity:.42; transition:opacity .25s var(--ease)}
.li-item .plus{position:absolute; right:.9rem; top:50%; width:34px; height:34px; margin-top:-17px; border-radius:50%; border:1px solid var(--ink); display:grid; place-items:center; font:400 1.35rem/1 var(--sans); color:var(--ink); opacity:0; transition:opacity .25s var(--ease), transform .3s var(--ease)}
.li-item .d{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease)}
.li-item .d > div{overflow:hidden}
.li-item .d p{margin:.35rem 0 0; color:var(--ink-muted); font-size:.95rem; max-width:52ch}
.li-item .d a{display:inline-block; margin:.5rem 0 .4rem; font-weight:600; color:var(--teal-deep); text-decoration:none}
.li-item.on, .li-item:focus-visible{border-color:var(--ink)}
.li-item.on .t, .li-item:focus-visible .t{opacity:1}
.li-item.on .plus, .li-item:focus-visible .plus{opacity:1}
.li-item.open .plus{transform:rotate(45deg)}
.li-item.open .d{grid-template-rows:1fr}
@media (hover:hover) and (pointer:fine){.li-item.on .d{grid-template-rows:1fr}}
.lpanel{position:sticky; top:96px; border-radius:12px; overflow:hidden; aspect-ratio:4/5; background:var(--parchment-2)}
@media (max-width:959px){.lpanel{aspect-ratio:16/10; position:relative; top:auto}}
.lpanel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s var(--ease); transform:scale(1.02)}
.lpanel img.on{opacity:1; transform:none}
.lpanel .cap{position:absolute; left:1rem; bottom:.9rem; color:var(--parchment); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,.4)}
/* small variant inside the mega menu */
.llist.sm .li-item{padding:.35rem 2.8rem .35rem .7rem; margin:0; border-radius:10px}
.llist.sm .li-item .t{font-size:1.75rem; line-height:1.1}
.llist.sm .li-item .plus{width:28px; height:28px; margin-top:-14px; font-size:1.1rem; right:.7rem}
.llist.sm .li-item .d p{font-size:.86rem}
.mega-in.mega-treat{grid-template-columns:1fr 1.6fr 1fr}
.mega-treat .lpanel{aspect-ratio:4/3; position:relative; top:auto}

/* journal grid ------------------------------------------------- */
.feat{display:grid; gap:1.5rem; text-decoration:none; color:inherit; border-radius:12px}
@media (min-width:900px){.feat{grid-template-columns:1.5fr 1fr; align-items:center; gap:2.5rem}}
.feat .im{border-radius:12px; overflow:hidden; aspect-ratio:3/2}
.feat .im img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.feat:hover .im img{transform:scale(1.03)}
.feat h2{font-size:clamp(1.8rem,3.4vw,2.8rem); letter-spacing:-.025em; margin:.75rem 0 .75rem}
.feat p{color:var(--ink-muted); max-width:48ch}
.chips{display:flex; flex-wrap:wrap; gap:.4rem; margin:0}
.chip{display:inline-flex; align-items:center; min-height:30px; padding:.25rem .75rem; border:1px solid var(--hair); border-radius:999px; font-size:.76rem; font-weight:600; letter-spacing:.04em; color:var(--ink-muted)}
.chip.tag{background:var(--teal-900); color:var(--parchment); border-color:var(--teal-900)}
.jgrid{display:grid; gap:1.5rem; margin-top:2.5rem; padding-top:2.5rem; border-top:var(--rule)}
@media (min-width:760px){.jgrid{grid-template-columns:repeat(3,1fr)}}
.jtile{text-decoration:none; color:inherit; display:block}
.jtile .im{border-radius:12px; overflow:hidden; aspect-ratio:4/3}
.jtile .im img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.jtile:hover .im img{transform:scale(1.03)}
.jtile h3{margin:.9rem 0 .4rem; font-size:1.35rem}
.jtile .chips{margin-top:.6rem}

.llist-wrap .llist{margin-left:-.8rem}
.mega-col{min-width:0}

/* category page top band: real height */
.page-hero + .pband{height:clamp(260px,34vw,460px)}

/* ---- trust badges: logo and rating marks (the laurels came off, Marye 8 Oct 2026) ---- */
/* Text in rem so it follows the reader's own text size, and the pair wraps to a
   second row when the two no longer fit side by side. On a phone set to large
   text they ran into each other (Marye's walkthrough, 14 Oct 2026, ECHOSTUDIO-762):
   the row was held on one line and each badge allowed to shrink below its words. */
.badges{display:flex;gap:clamp(14px,2vw,26px);align-items:center;flex-wrap:wrap;margin-top:1.5rem;padding-top:0}
.badge{display:flex;align-items:center;gap:9px;width:fit-content;max-width:100%;color:var(--parchment)}
.badge-mid{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;text-align:center}
.badge-title{font-size:.78125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.badge-row{display:flex;align-items:center;gap:7px}
.badge-logo{width:20px;height:20px;flex:none;display:block}
.badge-marks{display:flex;gap:3px;align-items:center}
.badge-marks svg{width:16px;height:16px;display:block}
.badge-sub{font-size:.75rem;font-weight:600;letter-spacing:.02em;opacity:.94}
.badge--google .badge-marks svg{fill:#E9A82E}
.badge--ta .badge-marks svg{fill:#00AA6C}
.badge--ink{color:var(--ink)}
@media(max-width:560px){
  /* Two equal halves, as before. When a review count is longer than its half
     it wraps under itself inside the badge, and when even "Rated Excellent"
     can't fit beside the other badge, the second drops to its own row. The
     badge's minimum is the width of its title (min-width auto), where it used
     to be zero, which is what let the two run into each other. */
  .badges{gap:8px;width:100%;justify-content:center}
  .badge{gap:4px;flex:1 1 0;width:auto;min-width:auto;justify-content:center}
  .badge-title{font-size:.59375rem;letter-spacing:.08em}
  .badge-sub{font-size:.55rem}
  .badge-logo{width:14px;height:14px}
  .badge-marks{gap:2px}
  .badge-marks svg{width:11px;height:11px}
}
/* A phone zoomed to 200% is under 360px wide: there a badge alone on its row
   may be narrower than its title, which wraps inside it. */
@media(max-width:359px){.badge{min-width:0}.badge-title{white-space:normal}}

/* ---- "As featured on Sunrise": a hairline and one line under the ratings ---- */
.sr-line{display:flex;align-items:center;gap:14px;width:fit-content;margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid color-mix(in srgb,currentColor 28%,transparent);color:var(--parchment);font-size:.78125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1}
.sr-line--ink{color:var(--teal-900)}
.sr-logo{display:block;flex:none;height:34px;aspect-ratio:609/360;background:currentColor;-webkit-mask:url(/assets/img/sunrise-logo.webp) center/contain no-repeat;mask:url(/assets/img/sunrise-logo.webp) center/contain no-repeat}
.hero.seo .sr-line,.rvw-badges .sr-line{margin-inline:auto}
.sr-line a{color:inherit;font-size:.8125rem;font-weight:600;letter-spacing:.02em;text-transform:none;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;opacity:.9}
.sr-line a:hover{opacity:1}
/* The footer's paragraph rule greys and enlarges p; the line keeps its own cream
   and a tighter set so it stays on one line in the first column. */
.site-foot .sr-line{margin-top:1.5rem;max-width:none;white-space:nowrap;gap:10px;color:var(--parchment);font-size:.71875rem}
.site-foot .sr-line a{font-size:.78125rem}
.site-foot .sr-line a:hover{color:inherit}
@media(max-width:560px){
  /* On a phone the line wraps rather than running off the edge when the
     reader's text is larger (ECHOSTUDIO-762). At normal size it still fits on
     one line; wider screens keep it held on one line, as before. */
  .sr-line,.site-foot .sr-line{flex-wrap:wrap;white-space:normal;gap:6px 10px;font-size:.625rem}
  .sr-line > span:first-child{white-space:nowrap}
  .sr-logo{height:28px}
  .sr-line a,.site-foot .sr-line a{font-size:.6875rem}
  /* Under the badges it spans the column they fill and sits in its middle,
     rather than hanging off the left edge (ECHOSTUDIO-788). The footer's
     column is set left, so its line stays with it. */
  .sr-line{width:100%;justify-content:center}
  .site-foot .sr-line{width:fit-content;justify-content:flex-start}
}

/* journal post: centred article column */
.article{max-width:680px; margin-inline:auto}
.article .byline{justify-content:center}
.post-hero .wrap{text-align:center}
.post-hero h1{margin-inline:auto}
.post-hero .lede{margin-inline:auto}
.post-hero .crumbs{justify-content:center}

/* ---- SEO hero with slideshow ---- */
.hero.seo{position:relative; overflow:hidden; background:var(--teal-950); color:var(--parchment); min-height:clamp(560px,82vh,820px); display:flex; align-items:center; justify-content:center; text-align:center; padding-block:clamp(3rem,7vw,5rem) clamp(4rem,9vw,7rem)}
.hero.seo::before{display:none}
.hero.seo .slides{position:absolute; inset:0; z-index:0}
.hero.seo .slides img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.8s var(--ease); transform:scale(1.04)}
.hero.seo .slides img.on{opacity:1; transform:none; transition:opacity 1.8s var(--ease), transform 7s linear}
.hero.seo .slides::after{content:""; position:absolute; inset:0; background:rgba(6,38,39,.6)}
.hero.seo .wrap{position:relative; z-index:2; max-width:960px; margin-inline:auto; display:flex; flex-direction:column; align-items:center}
.hero.seo .kicker{color:var(--amber)}
.hero.seo h1{font-size:clamp(2.4rem,5.6vw,4.6rem); max-width:18ch; margin-inline:auto; color:#fff}
.hero.seo .lede{margin:1.25rem auto 0; color:var(--stone); max-width:58ch}
.hero.seo .ctas{justify-content:center; margin-top:1.75rem}
@media (max-width:560px){.hero.seo .ctas{align-items:center}}
.hero.seo .badges{justify-content:center; margin-top:2.25rem; padding-top:0; width:100%; max-width:640px}
@media (prefers-reduced-motion:reduce){.hero.seo .slides img{transition:none}}
/* ---- upcoming retreat card: the pill is the card, collapsed ---- */
.upc{position:fixed; right:var(--gutter); bottom:calc(1.25rem + env(safe-area-inset-bottom)); z-index:70; max-width:calc(100% - 2*var(--gutter))}
/* Condensed on a phone, where 250px of pill is most of the screen. */
.txt-short{display:none}
@media (max-width:560px){
  .upc{--upc-w:min(320px, calc(100vw - 2*var(--gutter)))}
  .upc .tile-box{width:var(--upc-w)}
  .upc .txt-long{display:none}
  .upc .txt-short{display:inline}
  .upc .pill{padding-inline:.7rem .9rem}
}
/* The sticky bar pushes the pill up rather than covering it, and it moves with
   the bar instead of jumping once it has arrived. */
.upc{transition:bottom .35s var(--ease)}
/* From the markup rather than the script's .has-bar, so the pill is drawn in
   its place above the bar and does not climb there after load (ECHOSTUDIO-789). */
body:has(#mobileBar) .upc{bottom:calc(5.5rem + env(safe-area-inset-bottom))}
@media (min-width:640px){body:has(#mobileBar) .upc{bottom:calc(1.25rem + env(safe-area-inset-bottom))}}

/* One shell holds both states so the change of size is a single movement. */
.upc .shell{
  position:relative; overflow:hidden; margin-left:auto;
  background:var(--parchment); color:var(--ink);
  border:1px solid var(--hair); border-radius:16px;
  box-shadow:0 26px 54px -26px rgba(6,38,39,.55);
  width:var(--upc-w,340px); max-height:var(--upc-h,520px);
  transition:
    width .62s cubic-bezier(.22,.61,.36,1),
    max-height .62s cubic-bezier(.22,.61,.36,1),
    box-shadow .5s cubic-bezier(.22,.61,.36,1);
}
.upc.collapsed .shell{
  width:var(--pill-w,250px); max-height:var(--pill-h,46px);
  box-shadow:0 14px 28px -16px rgba(6,38,39,.45);
}
.upc.collapsed.open .shell{
  width:var(--upc-w,340px); max-height:var(--upc-h,520px);
  box-shadow:0 26px 54px -26px rgba(6,38,39,.55);
}
.upc .shell:hover{border-color:var(--teal-300)}

/* The card keeps its own width so nothing reflows while the shell narrows. */
.upc .tile-box{width:var(--upc-w,340px); opacity:1; transition:opacity .36s ease .14s}
.upc.collapsed .tile-box{opacity:0; transition:opacity .18s ease}
.upc.collapsed.open .tile-box{opacity:1; transition:opacity .36s ease .14s}
/* High, not centred: a figure's head sits in the top third, and a centred crop
   of the retreat's statue showed her from the neck down (Marye, 1 Oct 2026). */
.upc .shot{display:block; width:100%; height:132px; overflow:hidden}
.upc .shot img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%}
/* On a phone turned sideways the open card would be taller than the screen, so
   it goes without the photo there and the dates, name and link all fit. */
@media (max-height:500px){.upc .shot{display:none}}
/* The smallest phone on its side (568x320) also keeps the card above the
   Book/Call bar, so the one-line description goes too and the card stays clear
   of the header. */
@media (max-width:639px) and (max-height:500px){.upc .tile-box .fr{display:none}}
.upc .tb-in{display:grid; gap:.35rem; padding:1rem 1.15rem 1.15rem}
.upc .tile-box .lbl{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--teal-deep)}
.upc .tile-box .ds{font-family:var(--serif); font-size:2rem; line-height:1; letter-spacing:-.03em; font-weight:500}
.upc .tile-box .ds small{font-size:.5em; letter-spacing:.02em; vertical-align:.35em; margin-left:.15em}
.upc .tile-box .nm{font-weight:600}
.upc .tile-box .fr{font-size:.86rem; color:var(--ink-muted)}
.upc .tile-box .go{display:inline-flex; align-items:center; gap:.5rem; margin-top:.4rem; font-weight:600; color:var(--teal-deep); text-decoration:none}
.upc .tile-box .go:hover{color:var(--ink)}
.upc .x{
  position:absolute; top:.6rem; right:.6rem; z-index:2; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(247,241,230,.5); background:rgba(6,38,39,.45); color:var(--parchment);
  cursor:pointer; font-size:1rem; line-height:1; display:grid; place-items:center;
  backdrop-filter:blur(6px); transition:background .25s ease, opacity .3s ease;
}
.upc .x:hover{background:rgba(6,38,39,.7)}
.upc.collapsed .x{opacity:0; pointer-events:none}
.upc.collapsed.open .x{opacity:1; pointer-events:auto}

/* The pill label rides on top of the same parchment, so nothing changes colour. */
.upc .pill{
  position:absolute; left:0; top:0; width:max-content;
  display:flex; align-items:center; gap:.6rem; padding:.85rem 1.15rem;
  background:transparent; border:0; color:var(--teal-deep);
  font:600 .84rem/1 var(--sans); cursor:pointer; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .26s ease;
}
.upc.collapsed .pill{opacity:1; pointer-events:auto; transition:opacity .34s ease .18s}
.upc.collapsed.open .pill{opacity:0; pointer-events:none; transition:opacity .16s ease}
.upc .pill .dot{width:8px; height:8px; border-radius:50%; background:var(--amber); flex:none}
.upc .pill .txt{overflow:hidden; text-overflow:ellipsis}
/* Never wider than the screen: at large text the name ends in "..." inside the
   pill, and opening it shows the whole card (ECHOSTUDIO-762). */
.upc .shell{max-width:100%}
.upc .pill{max-width:calc(100vw - 2*var(--gutter))}

@media (prefers-reduced-motion: reduce){
  .upc .shell,.upc .tile-box,.upc .pill,.upc .x{transition:none}
}

/* Before the script has run (ECHOSTUDIO-789). Wherever the open card would
   cover the hero, the server's markup is already the pill, sized by its own
   label, so nothing moves when the script takes over. This query is the exact
   opposite of upcomingRoom in src/tokens/space.ts; change both together. The
   -2px matches the measured pill, which is the label's own size including the
   shell's 1px border. */
.upc.pre,.upc.pre *{transition:none !important}
@media (width < 1152px), (height < 700px), (width < 1400px) and (height < 900px){
  .upc.pre .shell{width:auto; max-height:none; box-shadow:0 14px 28px -16px rgba(6,38,39,.45)}
  .upc.pre .tile-box{position:absolute; top:0; left:0; opacity:0}
  .upc.pre .x{opacity:0; pointer-events:none}
  .upc.pre .pill{position:relative; opacity:1; pointer-events:auto; margin:0 -2px -2px 0}
  .upc.pre .shot img{display:none}
}
/* A lazy picture that is not displayed is not fetched, so the pill costs nothing. */
.upc.unseen .shot img{display:none}

/* forms never wait on scroll reveal */
form.rv,form .rv,.form.rv{opacity:1 !important;transform:none !important;transition:none}

/* option rows: radio fixed size, text takes the rest */
.opt input[type=radio],.opt input[type=checkbox]{width:18px !important;height:18px;flex:none;margin:.2rem 0 0;padding:0}
.opt>span{flex:1;min-width:0}

/* hero: two cut panels beside the centred copy */
.hero.seo{min-height:0; display:block; padding-block:clamp(2.5rem,5vw,4rem) clamp(3.5rem,7vw,5.5rem)}
.hero.seo .slides{display:none}
.hero.seo .wrap.hero-3{max-width:none; display:grid; gap:clamp(1rem,2.5vw,2.5rem); align-items:center; grid-template-columns:1fr}
@media (min-width:960px){.hero.seo .wrap.hero-3{grid-template-columns:minmax(200px,.8fr) minmax(0,1.6fr) minmax(200px,.8fr)}}
.hero.seo .hcopy{display:flex; flex-direction:column; align-items:center; text-align:center}
.hpanel{position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/5; background:var(--teal-900); min-height:0}
.hpanel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none}
.hpanel img.on{display:block}
.hpanel::after{content:""; position:absolute; inset:0; background:rgba(6,38,39,.38)}
@media (max-width:959px){
  .hero.seo .wrap.hero-3{grid-template-columns:1fr 1fr}
  .hero.seo .hcopy{grid-column:1 / -1; order:-1}
  .hpanel{aspect-ratio:3/4}
}
.badges.ink-wrap{border-top:0}
.badge--ink .badge-title, .badge--ink .badge-sub{color:var(--ink)}
.badges:has(.badge--ink){border-top:0}

/* proof tiles */
.proof-tiles{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(2rem,4vw,3rem)}
.proof-tiles .tile .cap b{font-size:1.15rem}
/* cursor tag: auto width for longer labels, so it becomes a lozenge */
.cursor-tag{width:auto; min-width:86px; padding:0 1.1rem; border-radius:999px; white-space:nowrap}
/* practitioner tiles: lift on hover */
.person img{transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.person:hover img{transform:translateY(-6px); box-shadow:0 22px 40px -26px rgba(6,38,39,.55)}
/* treatment pages: breathing room above the CTA pair */
.tblock .tcopy .ctas{padding-top:2.5rem}

/* two-column mega menu: list left, one swapping image right, parchment */
.mega-in.mega-2{grid-template-columns:1.5fr 1fr; background:var(--parchment)}
.mega-2 .mega-col{padding:1.5rem 1.75rem 1.5rem}
.mega-2 .mega-col:last-child{padding:1.25rem 1.25rem 1.25rem 0; border-right:0}
.mega-2 .lpanel{aspect-ratio:4/3; position:relative; top:auto; height:100%; max-height:420px}
.mega-2 .llist.sm .li-item .t{font-size:1.55rem}
.mega-2 .llist.sm .li-item{padding:.3rem 2.8rem .3rem .7rem}
.mega-more{display:inline-block; margin-top:1rem; font-weight:600; color:var(--teal-deep); text-decoration:none}
.mega-more:hover{color:var(--ink)}

/* hero correction: full-bleed background, hard cuts, ~80vh */
.hero.seo{min-height:80vh; display:flex; align-items:center; justify-content:center; padding-block:clamp(3rem,6vw,4.5rem) clamp(4.5rem,8vw,6.5rem)}
.hero.seo .slides{display:block}
.hero.seo .slides img{transition:none !important; transform:none !important}
.hero.seo .slides::after{background:rgba(6,38,39,.6)}
.hero.seo .wrap{max-width:960px; display:flex; flex-direction:column; align-items:center; text-align:center}
.hpanel{display:none}

/* ==== HERO OVERRIDE (Phil, 17:52): one full-bleed background, hard cut, centred copy ==== */
.hero.seo{position:relative;min-height:80vh;display:flex;align-items:center;overflow:hidden;background:var(--teal-950,#062627)}
.hero.seo .wrap.hero-3{display:block !important;position:static;max-width:none;width:100%;padding:0;margin:0;grid-template-columns:none}
.hero.seo .hpanel{position:absolute !important;inset:0;width:100% !important;height:100% !important;border-radius:0;overflow:hidden;z-index:0;aspect-ratio:auto;margin:0;transform:none}
.hero.seo .hpanel[data-panel="1"]{display:none !important}
.hero.seo .hpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:none !important;transform:none !important}
.hero.seo .hpanel img.on,.hero.seo .hpanel img:first-child:not(.off){opacity:1}
.hero.seo .hpanel::after{content:"";position:absolute;inset:0;background:rgba(6,38,39,.62)}
.hero.seo .hcopy{position:relative;z-index:1;max-width:980px;margin:0 auto;text-align:center;padding:clamp(56px,9vw,110px) 24px}
.hero.seo .hcopy h1{margin-left:auto;margin-right:auto}
.hero.seo .ctas,.hero.seo .badges{justify-content:center}
.hero.seo .hcopy .lede{margin-left:auto;margin-right:auto}
@media (max-width:640px){.hero.seo{min-height:auto}.hero.seo .hcopy{padding:48px 18px 120px}}

/* ---- content image parallax ---- */
/* site-behaviours writes the offsets as custom properties, so the hover
   transforms below compose with the movement instead of clobbering it. */
img.plx{transform:translate3d(0,var(--plx-y,0px),0) scale(var(--plx-s,1))}
.tile .im img.plx,.feat .im img.plx,.jtile .im img.plx,.person img.plx,.post-row img.plx{transition:transform .25s var(--ease)}
.tile:hover .im img.plx,.feat:hover .im img.plx,.jtile:hover .im img.plx{transform:translate3d(0,var(--plx-y,0px),0) scale(calc(var(--plx-s,1) * 1.035))}
.person:hover img.plx{transform:translate3d(0,calc(var(--plx-y,0px) - 6px),0) scale(var(--plx-s,1))}
@media (prefers-reduced-motion:reduce){img.plx{transform:none; transition:none}}

/* ---- large text, zoom and reflow (ECHOSTUDIO-762) ---- */
/* On a phone, a word wider than its column breaks onto the next line instead
   of pushing the page sideways or running off the edge. That's where it's
   needed: 200% text or zoom on a phone, where "Treatments", "Shiroabhyanga" or
   an email address is wider than the screen. "anywhere" also lets a column
   narrow below its longest word, so it stays on phone widths only: on a
   1024px screen it let the About page's heading break as
   "Acknowledgemen / t of Country" and narrowed the footer's first column. */
@media (max-width:560px){
  h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,legend,summary,td,th,.btn,.btn2,.mrow .nm{overflow-wrap:anywhere}
  /* The name may shrink, but the price can't take more than about half the
     row, or a long note ("25% off regular prices") at large text squeezes the
     name to one letter a line. */
  .mrow{grid-template-columns:minmax(0,1fr) fit-content(55%)}
  /* Except the number beside a list item: it sits in a column exactly its own
     width, and WebKit broke "01" into "0" over "1". */
  .n{overflow-wrap:normal}
}

/* At large text a treatment's name and its price don't both fit on a phone, so
   the price goes under the name instead of breaking the name mid-word. A
   container's em follows the reader's text size, which a media query's doesn't:
   17em is never reached at normal size (a 320px phone's menu is 18em wide),
   only once the text is about 130% or more. */
.menu-group{container-type:inline-size}
@container (max-width:17em){
  .mrow{grid-template-columns:minmax(0,1fr)}
  .mrow .pr{text-align:left}
}

/* ---- Windows high contrast / forced colours (ECHOSTUDIO-762) ---- */
/* Forced colours repaint every background in the page colour. The menu
   button's two lines and the Sunrise logo are drawn as background, so they
   vanished, and the pill buttons, which have no border, lost their outline.
   Only applies when the reader has turned high contrast on. */
@media (forced-colors: active){
  .burger span{forced-color-adjust:none; background:ButtonText}
  .sr-logo{forced-color-adjust:none; background:CanvasText}
  .btn,.btn-cta,button.btn-cta,.btn2,.final .quiet,.upc .shell{border:1px solid ButtonText}
}