/* The faces are declared here rather than in a separate file that this one
   @imports. An @import cannot start downloading until the stylesheet holding it
   has arrived, so every import is another full round trip standing between the
   visitor and the first painted word. There were two of them, and they were a
   leftover from the font bake-off: compare-fonts.css carried Bricolage along
   with Figtree, Hanken Grotesk and Space Grotesk, and fonts.css carried DM Sans
   along with two weights of Cormorant. Between them they declared six families
   for a site that uses two, including a serif on a site that is supposed to
   have none anywhere.

   Paths are absolute. They were relative in the old files, which worked because
   those files sat in /assets/fonts/ next to the woff2s. This file is served
   from the root, so a relative path would resolve to /bricolage... and quietly
   fall back to system-ui. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/bricolagegrotesque-400-normal.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/bricolagegrotesque-600-normal.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/bricolagegrotesque-700-normal.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/bricolagegrotesque-800-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/dmsans-300-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/dmsans-400-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/dmsans-500-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/dmsans-600-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/dmsans-700-normal.woff2') format('woff2');}

/* ============================================================
   Melanie Wagman - MODERN EDITORIAL
   Light paper, bold Bricolage display, DM Sans body,
   locked violet accent, asymmetric magazine grid.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;}
img{max-width:100%;height:auto;display:block;}
button{font:inherit;color:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px;}

:root{
  --paper:#ffffff;
  --paper-2:#ffffff;
  --lav:#f5eff8;
  --ink:#141519;
  --ink-2:#55566a;
  --accent:#7a2a86;
  --accent-ink:#5f1f68;
  --line:#e8e4f0;
  --line-strong:#141519;
  --navy:#171a2e;
  /* tinted shadows to background, never pure black */
  --sh-sm:0 2px 10px rgba(43,38,74,.08);
  --sh-md:0 18px 46px rgba(43,38,74,.14);
  --sh-lg:0 34px 90px rgba(43,38,74,.20);
  --maxw:1240px;
  --gutter:clamp(20px,5vw,72px);
  --header-h:96px;
  /* One vertical rhythm for every section, so nothing drifts. */
  --section-y:clamp(3.25rem,7vw,5.5rem);
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
}

html,body{background:var(--paper);color:var(--ink);}
body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}

/* ---------- Type primitives ---------- */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.98;
  margin:0;
  color:var(--ink);
}
p{margin:0;}

/* Site-wide orphan control: stops a paragraph ending on a single stranded word.
   Chrome and Safari honour this; other browsers ignore it and lose nothing. */
p,li,dd,blockquote,figcaption{text-wrap:pretty;}

.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin:0 0 1.4rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5em;
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  padding:.85em 1.4em;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--lg{padding:1.05em 1.75em;font-size:1rem;}
.btn--block{width:100%;}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--sh-sm);}
.btn--primary:hover{background:var(--accent-ink);box-shadow:var(--sh-md);}
.btn--primary:active{transform:translateY(1px) scale(.99);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);}
.btn--ghost:active{transform:translateY(1px) scale(.99);}
.btn--nav{padding:.62em 1.15em;font-size:.9rem;}

.link-more{
  font-family:var(--font-body);
  font-weight:600;
  color:var(--accent-ink);
  display:inline-flex;align-items:center;gap:.4em;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s ease, gap .2s ease;
}
.link-more::after{content:"\2192";transition:transform .2s ease;}
.link-more:hover{border-color:var(--accent);}
.link-more:hover::after{transform:translateX(4px);}

/* ============================================================
   ANNOUNCEMENT TICKER
   ------------------------------------------------------------
   Only in the markup when it is switched on in the panel, so there is nothing
   here to hide the rest of the time. It scrolls away with the page rather than
   sticking: it is context, not a warning, and a permanent bar eating the top of
   a phone screen would wear thin fast.

   The movement is one CSS animation and no JavaScript. The message list is
   printed twice and the track slides exactly half its own width, so the moment
   the animation restarts the second copy is sitting precisely where the first
   one began and the seam is invisible.

   Background and text colour are set inline from the chosen preset, because they
   are data rather than design: they change from the panel without a rebuild.
   ============================================================ */
.ticker{
  overflow:hidden;
  font-size:.9rem;
  line-height:1.4;
  letter-spacing:.01em;
  padding:.62rem 0;
}
.ticker__track{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  will-change:transform;
  /* Only a fallback. The real duration is written inline by mw_ticker_html().
     Kept in step with the midpoint of that speed table. */
  animation:ticker-slide 10s linear infinite;
}
.ticker__item{padding:0 2.2rem;}
.ticker__sep{opacity:.45;}

/* The list is printed twice and each copy is one flex item, so the track is
   exactly twice one copy and the -50% slide lands on the seam.

   min-width is the load-bearing part. Without it a copy is only as wide as the
   words, so the whole track is only as wide as two short messages and the slide
   moves it by that same small distance. Measured at 1440px: two copies of a
   six word message came to 621px, 43% of the screen, and the text shuffled
   about in the left third while the rest of the band sat empty. Forcing every
   copy to at least the full width of the band means one slide is always at
   least one screen, so the words cross the page on any monitor.

   It has to be 100vw and not 100%. A percentage resolves against the track,
   and the track is shrink-to-fit around these very copies, so 100% is circular
   and silently resolves to the width it already had: measured, it changed
   nothing at all. The track must also stay shrink-to-fit, because the -50%
   in the keyframes is a percentage of the track's own width, so anything that
   sets an explicit track width moves the seam and breaks the loop. */
.ticker__set{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:100vw;
}
.ticker__dupe{display:inline-flex;align-items:center;}

/* Links inherit the preset's text colour. Anything else risks a dark link on a
   dark band the first time a new preset is added. */
.ticker a{
  color:currentColor;
  text-decoration:underline;
  text-underline-offset:.2em;
  font-weight:600;
  margin-left:.4em;
}

@keyframes ticker-slide{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Let people stop it to actually read a message. Pointer devices only: on a
   touchscreen every tap would count as a hover and stick it in place. */
@media (hover:hover){
  .ticker:hover .ticker__track{animation-play-state:paused;}
}

/* Keyboard users cannot hover. Without this, tabbing onto a ticker link means
   chasing a moving target you can see but cannot follow. */
.ticker:focus-within .ticker__track{animation-play-state:paused;}

/* Speed 0. The messages hold still and centre themselves, which is what an
   away notice needs, and is also the only version that wraps on a phone
   instead of running off the side. */
.ticker--static{overflow:visible;}
.ticker--static .ticker__track{
  display:flex;flex-wrap:wrap;
  justify-content:center;
  white-space:normal;
  animation:none;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.25rem;
  text-align:center;
}
.ticker--static .ticker__item{padding:0 .6rem;}

/* Motion here is decoration, and this one moves continuously and forever, which
   is exactly the kind of thing that makes some people feel ill. If the visitor
   has asked their device for less motion, it simply stops. */
@media (prefers-reduced-motion:reduce){
  .ticker{overflow:visible;}
  .ticker__track{
    display:flex;flex-wrap:wrap;justify-content:center;
    white-space:normal;animation:none;
    max-width:var(--maxw);margin:0 auto;padding:0 1.25rem;text-align:center;
  }
  /* The list is printed twice for the loop. Standing still, that would read as
     every message duplicated, so the second copy is dropped. */
  .ticker__dupe{display:none;}
  /* Nothing is sliding now, so the copy no longer needs to be a screen wide,
     and it has to be able to wrap or a long message runs off the side. */
  .ticker__set{display:flex;flex-wrap:wrap;justify-content:center;min-width:0;}
}

@media (max-width:600px){
  .ticker{font-size:.84rem;}
  .ticker__item{padding:0 1.4rem;}
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:#ffffff;
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.site-header.scrolled{
  box-shadow:var(--sh-sm);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  height:var(--header-h);
}
.brand{display:flex;align-items:center;flex:0 0 auto;}
.brand img{height:66px;width:auto;}

.nav{display:flex;align-items:center;}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);}
.nav__links a{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.84rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);
  transition:color .18s ease;
}
.nav__links a:not(.btn){position:relative;}
.nav__links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .22s cubic-bezier(.16,1,.3,1);
}
.nav__links a:not(.btn):hover{color:var(--accent);}
.nav__links a:not(.btn):hover::after{transform:scaleX(1);}
.nav__links .btn--nav{color:#fff;}
.nav__links .btn--nav:hover{color:#fff;}

.nav__toggle{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;
  background:transparent;border:0;padding:9px;
  margin:-9px -9px -9px 0;
}
.nav__toggle span{
  display:block;height:2px;width:100%;border-radius:2px;background:var(--ink);
  transition:transform .25s ease, opacity .2s ease;
}

/* ============================================================
   HERO - asymmetric, oversized display, portrait + orb
   ============================================================ */
.hero{padding-top:clamp(2.5rem,6vw,5rem);padding-bottom:clamp(3rem,8vw,7rem);}
.hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.hero__copy{max-width:36ch;}
.hero__title{
  font-size:clamp(4.2rem,15vw,11rem);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:.86;
  margin:0 0 1.4rem;
}
.hero__tag{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.25rem,2.4vw,1.9rem);
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--accent-ink);
  margin:0 0 1.4rem;
}
.hero__lede{
  color:var(--ink-2);
  font-size:1.06rem;
  max-width:44ch;
  margin:0 0 2.2rem;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;max-width:34rem;}
.hero__cta .btn{flex:1 1 0;}

.hero__media{position:relative;justify-self:end;width:100%;max-width:480px;}
.hero__portrait{
  margin:0;
  position:relative;z-index:2;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--sh-lg);
  transform:rotate(1.4deg);
}
.hero__portrait img{width:100%;aspect-ratio:534/579;object-fit:cover;object-position:62% center;}
.hero__orb{
  margin:0;
  position:absolute;
  z-index:1;
  width:60%;
  left:-16%;bottom:-11%;
  border-radius:50%;
  overflow:hidden;
  box-shadow:var(--sh-md);
}
.hero__orb img{width:100%;}

/* ============================================================
   INTRO - asymmetric two-col, big head left, body offset right
   ============================================================ */
.intro{
  padding-block:clamp(3.5rem,9vw,8rem);
  border-top:1px solid var(--line);
  background:var(--lav);
}
.intro__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.intro__title{
  font-size:clamp(2.4rem,5.4vw,4.6rem);
  max-width:14ch;
}
.intro__body{
  color:var(--ink-2);
  font-size:clamp(1.05rem,1.5vw,1.28rem);
  line-height:1.7;
  padding-top:.6rem;
  border-left:3px solid var(--accent);
  padding-left:clamp(1.2rem,2vw,2rem);
}

/* ============================================================
   FULL-BLEED BAND - dramatic art-tree, overlay quote
   ============================================================ */
.band{
  position:relative;
  min-height:clamp(420px,62vh,680px);
  display:flex;
  overflow:hidden;
  background:var(--navy);
}
.band__media{position:absolute;inset:0;}
/* Full-bleed scrim: sits on the band, not the centered text column, so it
   always spans the whole image no matter how wide the window gets. */
.band::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(15,17,32,.70) 0%,rgba(15,17,32,.46) 42%,rgba(15,17,32,.12) 72%,rgba(15,17,32,0) 92%),
    linear-gradient(0deg,rgba(15,17,32,.58) 0%,rgba(15,17,32,.10) 45%,rgba(15,17,32,0) 70%);
}
.band__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
}
.band__overlay{
  position:relative;z-index:2;
  width:100%;max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;align-items:flex-end;
  padding-bottom:clamp(2.5rem,6vw,5rem);
  padding-top:clamp(3rem,8vw,6rem);
}
.band__quote{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.02;
  color:#fdfcf8;
  font-size:clamp(1.7rem,4.4vw,3.4rem);
  max-width:20ch;
  text-shadow:0 2px 30px rgba(15,17,32,.55);
}

/* ============================================================
   OFFERINGS - alternating asymmetric rows (art + text)
   ============================================================ */
.offerings{padding-block:clamp(4rem,10vw,9rem);}
.offerings__head{margin-bottom:clamp(2.5rem,5vw,4.5rem);max-width:20ch;}
.offerings__title{font-size:clamp(2.4rem,5.6vw,4.8rem);}

.offerings__list{display:grid;gap:clamp(2.5rem,5vw,5rem);}
.offer{
  display:grid;
  grid-template-columns:minmax(240px,.9fr) 1.1fr;
  gap:clamp(1.8rem,4vw,4rem);
  align-items:center;
}
.offer--alt{grid-template-columns:1.1fr minmax(240px,.9fr);}
.offer--alt .offer__art{order:2;}
.offer--alt .offer__body{order:1;}

.offer__art{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:var(--navy);
  box-shadow:var(--sh-md);
  border:1px solid var(--line);
}
.offer__art img{width:100%;aspect-ratio:1/1;object-fit:cover;}

.offer__body{max-width:46ch;}
.offer__title{
  font-size:clamp(1.9rem,3.4vw,3rem);
  margin-bottom:1rem;
}
.offer__body p{color:var(--ink-2);margin-bottom:1.6rem;font-size:1.06rem;}

/* ============================================================
   CONNECT - asymmetric: intro column + form card
   ============================================================ */
.connect{
  padding-block:clamp(4rem,9vw,8rem);
  border-top:1px solid var(--line);
  background:var(--lav);
}
.connect__grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
}
.connect__intro{position:relative;}
.connect__title{font-size:clamp(2.2rem,4.4vw,3.6rem);margin-bottom:1.4rem;max-width:14ch;}
.connect__lede{color:var(--ink-2);font-size:1.08rem;max-width:40ch;margin-bottom:2rem;}
.connect__orb{margin:clamp(3rem,6vw,5rem) auto 0;width:70%;max-width:290px;border-radius:50%;overflow:hidden;box-shadow:var(--sh-md);}
.connect__orb img{width:100%;}

/* ---- Form ---- */
.form{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(1.6rem,3vw,2.6rem);
  box-shadow:var(--sh-md);
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.field{display:flex;flex-direction:column;margin-bottom:1.15rem;}
.form__row .field{margin-bottom:1.15rem;}
.field label{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.86rem;
  letter-spacing:.01em;
  color:var(--ink);
  margin-bottom:.5rem;
}
.field input,
.field select,
.field textarea{
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  background:#fff;
  border:1.5px solid #cfc9bc;
  border-radius:12px;
  padding:.8rem .95rem;
  width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder,
.field textarea::placeholder{color:#6c6d80;}
.field textarea{resize:vertical;min-height:120px;line-height:1.55;}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:2.6rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(122,42,134,.22);
}
.check{
  display:flex;align-items:flex-start;gap:.6rem;
  margin:.2rem 0 1.5rem;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-size:.74rem;color:var(--ink-2);line-height:1.5;
}
.check input{
  width:17px;height:17px;flex:0 0 auto;margin-top:1px;
  accent-color:var(--accent);
}
.check a{color:var(--accent-ink);text-decoration:underline;}

/* ---- Form states ----
   The three states a real form needs and that most sites skip: sending,
   sent, and something went wrong. */

/* Honeypot wrapper. Pushed off-screen rather than display:none, because a
   fair number of bots deliberately skip display:none inputs but happily fill
   an off-screen one. aria-hidden and tabindex="-1" on the inputs keep it away
   from screen readers and the keyboard, so no person ever meets it. */
.trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.form.is-sending{opacity:.6;pointer-events:none;}

/* Replaces the form once the message is in. Deliberately no green checkmark:
   the rest of the site is quiet and editorial, and a stock success badge would
   be the one stock thing on it.

   White, matching .form exactly, and not lavender. Lavender was tried first and
   disappeared: both places this panel appears sit inside a .connect section
   that is itself lavender, so the card lost its edges at the moment it most
   needed to be noticed. It replaces the form, so it holds the form's weight. */
.form__done{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(2.2rem,4vw,3.2rem);
  box-shadow:var(--sh-md);
  text-align:left;
}
.form__done .eyebrow{margin-bottom:.9rem;}
.form__done h3{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.05;
  margin:0 0 .7rem;color:var(--ink);
}
.form__done p{color:var(--ink-2);font-size:1.05rem;line-height:1.6;margin:0;max-width:38ch;}

/* Errors. Crimson rather than a pure red, so it sits with the plum instead of
   fighting it. Measured at 6.4:1 on white and 5.9:1 on the lavender. */
.field--error input,
.field--error select,
.field--error textarea{border-color:#a3232b;}
.field__error{font-size:.82rem;color:#a3232b;margin:.45rem 0 0;font-weight:500;}
.form__alert{
  background:#fdf0f0;border:1px solid #f0c9c9;border-radius:12px;
  padding:.85rem 1rem;margin-bottom:1.4rem;
  font-size:.9rem;line-height:1.5;color:#8a1d24;
}

/* ============================================================
   FOOTER
   ============================================================ */
/* Charcoal, not black. Sits in the same cool family as the navy CTA card above
   it but a clear step lighter, so the card stays the heavy element and this
   reads as the ground beneath it. The noise is an inline SVG tile used as a
   second background layer (no image file, no request); it keeps a large flat
   dark area from looking like a printed slab and kills gradient banding.
   Opacity is baked into the SVG rect because background-image has no opacity
   property of its own. Layering it as a background rather than an ::after
   overlay keeps it behind the text. */
.site-footer{
  background-color:#2b2f42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  color:#e9e7f2;
  padding-top:clamp(2.25rem,3.5vw,3rem);
  padding-bottom:1.4rem;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:2rem;
  align-items:center;
  padding-bottom:clamp(1.4rem,2.5vw,2rem);
}
.footer__logo{
  width:190px;max-width:100%;height:auto;border-radius:12px;
  background:#fff;padding:11px 14px;
}
.footer__tag{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.02em;
  font-size:1.05rem;
  margin-top:.8rem;
  color:#fff;
  max-width:18ch;
}
.footer__nav ul{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem 2rem;
  justify-items:start;
}
.footer__nav a{
  font-size:.98rem;color:#c8c5db;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;
}
.footer__nav a:hover{color:#fff;border-color:var(--accent);}
.footer__base{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:1.1rem;
  display:flex;flex-direction:column;gap:.6rem;
  font-size:.82rem;color:#b3afc8;
}
.footer__base p{margin:0;}
/* Small legalese on a lighter ground needs a lighter ink than it did on black
   to hold 4.5:1. Measured, not guessed. */
.footer__legal{font-size:.68rem;line-height:1.5;color:#aaa6c1;max-width:none;}

/* ============================================================
   REVEALS (scoped under html.js for no-JS safety)
   ============================================================ */
html.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
html.js .reveal.in{opacity:1;transform:none;}
html.js .reveal.d1{transition-delay:.09s;}
html.js .reveal.d2{transition-delay:.18s;}
html.js .reveal.d3{transition-delay:.27s;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1.05fr .95fr;}
  .connect__grid{grid-template-columns:1fr;}
  .connect__orb{display:none;}
}

@media (max-width:900px){
  /* Shorter bar + smaller logo so the menu button can never be pushed
     off the right edge on narrow phones. */
  :root{--header-h:72px;}
  /* 54px, not 46: the hamburger leaves 93px of width slack at 390px, so the
     72px bar height is the real limit. 54px keeps 9px clear above and below.
     Measured ceiling: 54px is safe to 360px, but 50px+ shoves the hamburger
     off the edge at 320px, hence the step-down below. */
  .brand img{height:54px;}

  /* Mobile nav */
  .nav__toggle{display:flex;}
  .nav__links{
    position:fixed;
    top:var(--header-h);left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#ffffff;
    border-bottom:1px solid var(--line);
    box-shadow:var(--sh-md);
    padding:.5rem var(--gutter) 1.4rem;
    transform:translateY(-8px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
  }
  .nav__links.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
  .nav__links li{border-bottom:1px solid var(--line);}
  .nav__links li:last-child{border-bottom:0;}
  .nav__links a{display:block;padding:1rem 0;font-size:1.05rem;color:var(--ink);}
  .nav__links a:not(.btn)::after{display:none;}
  .nav__links .btn--nav{
    justify-content:center;margin-top:1rem;width:100%;padding:.9em 1.15em;font-size:1rem;
  }

  /* Single column stacks */
  .hero__grid,
  .intro__grid{grid-template-columns:1fr;}
  .hero__media{justify-self:start;margin-top:1rem;max-width:420px;}
  .hero__copy{max-width:none;}
  .intro__body{border-left:0;padding-left:0;border-top:3px solid var(--accent);padding-top:1.4rem;}

  .offer,
  .offer--alt{grid-template-columns:1fr;}
  .offer--alt .offer__art{order:0;}
  .offer--alt .offer__body{order:0;}
  .offer__art{max-width:340px;}

  .footer__grid{grid-template-columns:1fr;gap:1.5rem;align-items:start;}
}

@media (max-width:560px){
  .form__row{grid-template-columns:1fr;gap:0;}
  /* Stays two columns on phones. Stacking six links single-file was the single
     biggest contributor to a 786px mobile footer. */
  .footer__nav ul{grid-template-columns:1fr 1fr;gap:.6rem 1.5rem;}
  .hero__orb{width:52%;left:-8%;}
}

/* Full-height sections use dvh, never vh (band handled above with dvh-safe clamp) */
@media (min-width:901px){
  .band{min-height:min(680px,72dvh);}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.js .reveal{opacity:1 !important;transform:none !important;}
  .hero__portrait{transform:none;}
}

/* Click-to-reveal phone (number is not present in page source) */
.connect__phone{margin:1.6rem 0 0;}
.connect__phone .btn{font-size:.95rem;}
.phone-number{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:1.5rem;color:var(--accent-ink);
}

/* ============================================================
   INTERIOR PAGES
   ============================================================ */

/* Current page marker in the nav */
.nav__links a.is-current{color:var(--accent);}
.nav__links a.is-current::after{transform:scaleX(1);}

/* ---- Interior page hero: big display left, lede offset right ---- */
.page-hero{
  padding-block:var(--section-y);
  border-bottom:1px solid var(--line);
}
.page-hero--tight{padding-bottom:clamp(1.5rem,3vw,2.5rem);}
.page-hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:end;
}
.page-hero__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.8rem,7.5vw,6rem);
  line-height:.94;letter-spacing:-.035em;color:var(--ink);
}
.page-hero__lede{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.1rem,1.8vw,1.45rem);
  line-height:1.32;letter-spacing:-.015em;
  color:var(--ink);max-width:28ch;
  border-top:2px solid var(--line-strong);
  padding-top:1.05rem;
}
/* FAQ, PHONE ONLY. On desktop the lede sits in its own right-hand column, well
   away from the questions, and must match every other page - so no override
   there. Stacked on a phone it lands directly above the accordion, where the
   display font at weight 600 is within a hair of .qa summary (display 700) and
   reads as if it were the first question, and its top rule becomes a second bar
   a few pixels above .page-hero's own bottom rule. The mobile override is in the
   max-width:900px block further down, next to the other stacking rules. */
.page-hero__meta{
  font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);
}

/* ---- About: sticky portrait beside long-form prose ---- */
.story{padding-block:var(--section-y);}
.story__grid{
  display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:start;
}
/* The home hero only hints at the orb behind the portrait. Here it is
   revealed: both become full circles that overlap, echoing the two
   interlocking circles at the centre of the logo mark. */
.story__media{
  position:sticky;top:calc(var(--header-h) + 2rem);
  width:100%;aspect-ratio:1/1.1;
}
.story__portrait{
  margin:0;position:absolute;z-index:2;
  top:0;left:0;width:80%;aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-lg);
}
.story__portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:62% center;}
.story__orb{
  margin:0;position:absolute;z-index:1;
  right:0;bottom:0;width:52%;aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  box-shadow:var(--sh-md);
}
.story__orb img{width:100%;height:100%;display:block;object-fit:cover;}
/* One body voice for the whole About article: the opening paragraph, the
   paragraphs after the pull quote, and the callout all read at one size. */
.story__prose p{
  color:var(--ink-2);font-size:1.12rem;line-height:1.75;
  max-width:62ch;margin-bottom:1.5rem;
}
.pull{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.1;
  letter-spacing:-.02em;color:var(--accent-ink);
  border-left:3px solid var(--accent);
  padding-left:clamp(1rem,2vw,1.8rem);
  margin:2.5rem 0 2.5rem;max-width:20ch;
}

/* ---- Callout band ---- */
.callout{background:var(--lav);padding-block:var(--section-y);border-block:1px solid var(--line);}
/* Keeps the site's normal column. The title used to wrap because of a
   max-width:18ch on the heading itself, not because of this cap. */
.callout__inner{max-width:70ch;}
.callout__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.85rem,3.8vw,2.8rem);line-height:1.04;
  letter-spacing:-.03em;color:var(--ink);
  margin-bottom:.7rem;
}
/* Must outrank .callout__body (1.12rem) at EVERY width, phone included.
   Min is 1.4rem, not 1.1rem: at 390px the old min computed to 17.6px against
   17.92px body, so the subhead rendered smaller than the paragraph below it. */
.callout__sub{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4rem,2.7vw,2rem);letter-spacing:-.02em;
  color:var(--accent-ink);line-height:1.25;
  margin-bottom:1.5rem;
}
.callout__body{font-size:1.12rem;line-height:1.75;color:var(--ink-2);max-width:70ch;}

/* Below ~450px the 1.85rem floor above is wider than the column, so the title
   wrapped. Measured max that fits one line: 320px->21px, 360px->24px,
   390px->26.5px, 414px->28px. 6.5vw sits under every one of those. */
@media (max-width:450px){
  .callout__title{font-size:6.5vw;}
}

/* ---- Generic section ---- */
.section{padding-block:var(--section-y);}
.section__intro,.section__outro{
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.5;
  color:var(--ink);max-width:52ch;font-weight:500;
}
.section__intro{margin-bottom:clamp(2.5rem,5vw,4rem);}
.section__outro{margin-top:clamp(2.5rem,5vw,4rem);color:var(--ink-2);font-weight:400;font-size:1.06rem;line-height:1.75;max-width:62ch;}

/* Quiet setup line. Deliberately body-weight so the closing statement below
   is the only large voice in the section. */
.section__note{
  color:var(--ink-2);font-size:1.06rem;line-height:1.75;
  max-width:58ch;margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}

/* Closing statement: no rule above it. It is the payoff of the columns it
   follows, set in display type beside the artwork. */
.section__close{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1.75rem,4vw,3.25rem);align-items:center;
  margin-top:clamp(2.5rem,5vw,3.75rem);
}
.section__close-art{
  margin:0;width:clamp(150px,17vw,220px);aspect-ratio:1;
  border-radius:50%;overflow:hidden;box-shadow:var(--sh-md);
}
.section__close-art img{width:100%;height:100%;display:block;object-fit:cover;}
.section__close-body{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.38;
  letter-spacing:-.015em;color:var(--ink);max-width:46ch;
}

/* ---- Two-up comparison ----
   No rules across the top: these two are halves of one idea, so the only
   division is a single hairline down the middle. */
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.two-up__col{padding-right:clamp(1.5rem,3.5vw,2.75rem);}
.two-up__col + .two-up__col{
  border-left:1px solid var(--line);
  padding-left:clamp(1.5rem,3.5vw,2.75rem);
  padding-right:0;
}
.two-up__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.025em;
  margin-bottom:.9rem;line-height:1.05;
}
.two-up__col p{color:var(--ink-2);line-height:1.75;}

/* ---- Spec list ---- */
.details{background:var(--lav);padding-block:var(--section-y);border-block:1px solid var(--line);}
.details__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.details__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.03em;line-height:1.05;}
.spec{border-top:1px solid var(--line-strong);}
.spec__row{
  display:grid;grid-template-columns:.42fr 1fr;gap:1.5rem;
  padding:1.1rem 0;border-bottom:1px solid var(--line);
}
.spec dt{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--accent-ink);padding-top:.2rem;
}
.spec dd{margin:0;color:var(--ink);line-height:1.6;}
.spec--tight{margin-top:2rem;}
.spec--tight .spec__row{padding:.8rem 0;}
/* display:flex forces the link onto its own line under the dd text. */
.spec dd .link-more{display:flex;width:fit-content;margin-top:.85rem;font-size:.95rem;}

/* Giving back sits alongside the price list rather than in its own section. */
.details__giving{margin-top:clamp(2rem,4vw,3rem);}
.details__giving-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.14;
  letter-spacing:-.025em;color:var(--accent-ink);
  max-width:24ch;margin-bottom:.7rem;
}
.details__giving p{color:var(--ink-2);line-height:1.7;margin-bottom:1rem;max-width:52ch;}

/* How to prepare is now just the last row of the spec list. */

/* ---- FAQ accordion (native details, works with JS off) ---- */
/* Lavender behind the questions. The accordion used to float in undifferentiated
   white with nothing containing it; this gives the page three clear zones -
   white hero, lavender question block, dark close. */
.faq{padding-block:var(--section-y);background:var(--lav);}
/* No rule on top: the hero already divides the heading from the questions. */
.faq__inner{max-width:78ch;}
.qa{border-bottom:1px solid var(--line);}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.05rem,1.9vw,1.35rem);
  letter-spacing:-.015em;line-height:1.3;color:var(--ink);
  transition:color .18s ease;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary:hover{color:var(--accent);}
.qa summary::after{
  content:"";flex:0 0 auto;width:14px;height:14px;margin-top:.35em;
  background:var(--accent);
  clip-path:polygon(43% 0,57% 0,57% 43%,100% 43%,100% 57%,57% 57%,57% 100%,43% 100%,43% 57%,0 57%,0 43%,43% 43%);
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.qa[open] summary::after{transform:rotate(135deg);}
.qa[open] summary{color:var(--accent-ink);}
/* Answers indent so they read as a reply to the question above them. */
.qa__body{padding-bottom:1.6rem;padding-left:clamp(1rem,3vw,2.25rem);max-width:68ch;}
.qa__body p{color:var(--ink-2);font-size:1.1rem;line-height:1.75;margin-bottom:1rem;}
.qa__body p:last-child{margin-bottom:0;}

/* ---- Testimonials ---- */
.quotes{padding-block:var(--section-y);}
.quotes__list{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(3,1fr);}
.quote{
  margin:0;background:var(--lav);
  border-radius:18px;padding:clamp(1.6rem,3vw,2.4rem);
  border:1px solid var(--line);
}
.quote blockquote{
  font-size:1.02rem;line-height:1.7;color:var(--ink);
  position:relative;padding-top:2.2rem;
}
.quote blockquote::before{
  content:"\201C";position:absolute;top:-.35em;left:-.06em;
  font-family:var(--font-display);font-weight:800;
  font-size:4.5rem;line-height:1;color:var(--accent);opacity:.35;
}
.quote__by{
  margin-top:1.2rem;padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--accent-ink);
}

/* ---- Legal / long-form prose ---- */
.legal{padding-block:var(--section-y);}
.legal__inner{max-width:70ch;}
.legal__inner h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:-.02em;
  margin:2.4rem 0 .7rem;color:var(--ink);
}
.legal__inner p{color:var(--ink-2);line-height:1.75;margin-bottom:1rem;}
.legal__inner .lead{font-size:1.1rem;color:var(--ink);}
.legal__inner a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;}

/* ---- CTA band ---- */
/* An inset card, not a full-bleed slab. Edge-to-edge dark here ran straight
   into the dark footer with only a slight hue change between them, which read
   as a rendering seam rather than a decision. Floating the card leaves real
   daylight on all four sides, so the two dark areas can never merge.
   The section owns the gutter; .wrap owns the card's own inner padding. */
.cta-band{
  color:#fdfcf8;
  padding-block:clamp(2.5rem,5vw,4.5rem);
  padding-inline:var(--gutter);
}
/* The circle motif from the hero and the About portrait, carried through as a
   soft plum glow. It is a background LAYER rather than a pseudo-element: an
   absolutely positioned ::before on this same element paints above the inline
   text and greyed the headline out. */
.cta-band .wrap{
  max-width:var(--maxw);
  padding:clamp(3rem,6vw,4.75rem) clamp(1.5rem,4vw,3rem);
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 55%,
      rgba(122,42,134,.62) 0%,
      rgba(122,42,134,.30) 38%,
      rgba(122,42,134,0) 68%),
    var(--navy);
}
.cta-band__inner{text-align:center;}
.cta-band__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.032em;
  line-height:1.02;margin-bottom:.9rem;color:#fdfcf8;
}
.cta-band__lede{color:rgba(253,252,248,.78);font-size:1.06rem;margin:0 auto 1.9rem;line-height:1.6;text-wrap:pretty;}
.cta-band__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;max-width:36rem;margin-inline:auto;}
.cta-band__actions .btn{flex:1 1 0;}
/* A lone CTA should not stretch to the full pair width. */
.cta-band__actions .btn:only-child{flex:0 0 auto;}
.cta-band .btn--ghost{color:#fdfcf8;border-color:rgba(253,252,248,.35);}
.cta-band .btn--ghost:hover{background:rgba(253,252,248,.1);border-color:#fdfcf8;color:#fdfcf8;}

/* ============================================================
   OFFERINGS (reimagined) - one immersive dark band for what a
   reading is, then a single card object for what it costs.
   ============================================================ */
.reading{
  background:var(--navy);color:#fdfcf8;
  padding-block:clamp(4rem,8vw,6.5rem);
}
.reading__open{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.18;
  letter-spacing:-.025em;color:#fdfcf8;
  max-width:34ch;margin:0 auto clamp(2.5rem,6vw,4.25rem);
  text-align:center;text-wrap:balance;
}
/* Three columns so the artwork sits ON the seam between the two
   practices, which is the thing Melanie's copy describes: she blends them. */
.reading__split{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  column-gap:clamp(1.5rem,3.5vw,3rem);
  position:relative;
  /* breathing room so the hairline shows above and below the circle */
  padding-block:clamp(1.75rem,3.5vw,3rem);
}
/* The hairline runs the height of the split; the opaque circle sits on top of
   it, so the artwork reads as bridging the two practices. */
.reading__split::before{
  content:"";position:absolute;top:0;left:50%;width:1px;
  /* runs past the split so it points down into the closing statement */
  bottom:calc(-1 * clamp(1.75rem,3.5vw,2.75rem));
  background:rgba(253,252,248,.18);
}
/* Arrowhead: the two practices merge into the statement below. */
.reading__split::after{
  content:"";position:absolute;left:50%;
  bottom:calc(-1 * clamp(1.75rem,3.5vw,2.75rem));
  width:10px;height:10px;
  border-right:1px solid rgba(253,252,248,.34);
  border-bottom:1px solid rgba(253,252,248,.34);
  transform:translate(-50%,-2px) rotate(45deg);
}
.reading__col p{color:rgba(253,252,248,.72);line-height:1.75;text-wrap:pretty;}
/* The left practice hugs the artwork so the two read as one unit. */
.reading__col--right{text-align:right;}
.reading__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.55rem,2.9vw,2.2rem);letter-spacing:-.025em;
  line-height:1.05;margin-bottom:.9rem;color:#fdfcf8;
}
.reading__seal{
  margin:0;position:relative;align-self:center;
  width:clamp(144px,18vw,228px);aspect-ratio:1;
}
.reading__seal img{
  width:100%;height:100%;border-radius:50%;
  box-shadow:0 0 0 1px rgba(253,252,248,.16),var(--sh-lg);
}
.reading__note{
  color:rgba(253,252,248,.74);line-height:1.6;
  font-size:clamp(1.15rem,1.9vw,1.4rem);
  max-width:52ch;margin:clamp(2.5rem,6vw,4.25rem) auto 0;
  text-align:center;text-wrap:pretty;
}

/* ---- The session card, sitting in its own field of lavender ---- */
.works{
  background:var(--lav);
  padding-block:var(--section-y);
}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--sh-lg);
  padding:clamp(1.75rem,4vw,3.25rem);
}
.card__head{
  padding-bottom:clamp(1.4rem,3vw,2rem);
  border-bottom:1px solid var(--line);
}
.card__title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.8rem,3.6vw,2.8rem);letter-spacing:-.03em;line-height:1.02;
}
.card__row{
  display:grid;grid-template-columns:.34fr 1fr;gap:1.5rem;
  padding:1.15rem 0;border-bottom:1px solid var(--line);
}
.card__row:last-child{border-bottom:0;padding-bottom:0;}
.card__row dt{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--accent-ink);padding-top:.2rem;
}
.card__row dd{margin:0;color:var(--ink);line-height:1.65;}
.card__row dd .link-more{display:flex;width:fit-content;margin-top:.85rem;font-size:.95rem;}
.card__foot{
  display:flex;justify-content:center;
  text-align:center;
  margin-top:clamp(1.4rem,3vw,2rem);
  background:var(--lav);border-radius:14px;
  padding:clamp(1.15rem,2.2vw,1.5rem) clamp(1.1rem,2.2vw,1.6rem);
}
/* The whole line is the link to About. "Learn why" + arrow stay glued. */
.card__giving{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.18rem,2vw,1.45rem);letter-spacing:-.015em;
  color:var(--accent-ink);line-height:1.35;
  text-wrap:balance;
}
.card__giving-cta{
  white-space:nowrap;
  border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color .2s ease;
}
.card__giving-cta::after{
  content:"\2192";display:inline-block;margin-left:.35em;
  transition:transform .2s ease;
}
.card__giving:hover .card__giving-cta{border-color:var(--accent);}
.card__giving:hover .card__giving-cta::after{transform:translateX(4px);}

/* Stacks at 1000px, not 900px: below this the two columns get too narrow for
   Psychic to hold four lines, and the mirror with Mediumship breaks. */
@media (max-width:1000px){
  .reading__split{grid-template-columns:1fr;row-gap:2.25rem;justify-items:start;}
  /* stacked, there is no seam, so the line and its arrowhead have nothing to join */
  .reading__split::before,
  .reading__split::after{display:none;}
  .reading__seal{width:180px;order:-1;align-self:center;justify-self:center;}
  /* stacked, there is no seam to hug, so the practices read left to right */
  .reading__col--right{text-align:left;}
  /* Centred copy needs width to look deliberate; on a stacked column it just
     reads as ragged. Left-align it and drop the auto centring margin. */
  .reading__note{text-align:left;margin-left:0;margin-right:0;}
  .card__row{grid-template-columns:1fr;gap:.35rem;}
}

/* ---- Form hint ---- */
.field__hint{font-size:.82rem;color:var(--ink-2);margin-top:.45rem;}
.connect--page{border-top:0;}

/* ---- Thank you page ----
   Divider rules rather than cards. Someone who has just sent a message does not
   need four boxes competing for the next click, only a quiet list of where to
   go while they wait. */
.thanks-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.thanks-links li{border-bottom:1px solid var(--line);}
.thanks-links a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem .25rem;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:1.15rem;color:var(--ink);text-decoration:none;
  transition:color .18s ease, padding-left .18s ease;
}
.thanks-links a::after{content:"\2192";color:var(--accent);opacity:0;transform:translateX(-6px);transition:opacity .18s ease, transform .18s ease;}
.thanks-links a:hover{color:var(--accent-ink);padding-left:.6rem;}
.thanks-links a:hover::after{opacity:1;transform:translateX(0);}
.thanks-links a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---- Interior responsive ---- */
@media (max-width:900px){
  .page-hero__grid,
  .story__grid,
  .details__grid{grid-template-columns:1fr;}
  .page-hero__grid{align-items:start;}
  .page-hero__lede{padding-bottom:0;}
  /* FAQ page only, and only once stacked. See the note by .page-hero__lede. */
  .page-hero__lede--note{
    font-family:var(--font-body);font-weight:400;
    font-size:1.05rem;line-height:1.6;letter-spacing:0;
    color:var(--ink-2);
    border-top:0;padding-top:0;
  }
  .story__media{position:static;max-width:400px;margin-bottom:1rem;}
  .section__close{grid-template-columns:1fr;justify-items:start;gap:1.5rem;}
  .two-up{grid-template-columns:1fr;}
  .two-up__col{padding-right:0;}
  .two-up__col + .two-up__col{border-left:0;padding-left:0;margin-top:2rem;}
  .quotes__list{grid-template-columns:1fr;}
  .spec__row{grid-template-columns:1fr;gap:.35rem;}
}

/* Very narrow phones (320px, e.g. original iPhone SE). Measured: a 50px logo
   already pushes the hamburger past the right edge and forces the whole page
   to scroll sideways. 46px is the last size that clears. */
@media (max-width:359px){
  .brand img{height:46px;}
}