/* ============================================================
     ANDRIANA SOFIA — landing page
     Palette is warm/near-monochrome by design; the "accent" is
     the sunlight itself. Light + dark share one token system.
     ============================================================ */

@font-face {
  font-family: 'Lyon Display';
  src: url('fonts/LyonDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

  :root[data-theme="light"] {
    /* core */
    --bg:        #EEE9E1;   /* warm chalk */
    --bg-panel:  #E6DFD4;   /* slightly deeper panel */
    --bg-deep:   #DED6C9;   /* session block */
    --ink:       #2A2621;   /* warm near-black text */
    --muted:     #6E675B;   /* secondary text */
    --line:      #C7BFB1;   /* hairlines / borders */
    --line-soft: #D6CFC2;
    --room-wall-a: #E9E2D6;
    --room-wall-b: #DCD2C2;
    --room-floor:  #D2C7B4;
    --beam:      rgba(255, 248, 232, 0.55);
    --beam-soft: rgba(255, 244, 222, 0.35);
    --shadow:    rgba(60, 50, 38, 0.10);
    --card-dim:  rgba(30, 24, 18, 0.04);
    /* accent — dusty gold, light mode only */
    --accent:           #b8935a;
    /* premise (my approach) */
    --premise-bg:       #EDE6DA;
    --premise-overlay:  rgba(235, 228, 217, 0.90);
    --premise-ink:      #2A2621;
    --premise-muted:    #7A7165;
    --premise-subtle:   #8A8375;
    --premise-body-clr: #4A4540;
    --premise-rule:     rgba(42, 38, 33, 0.14);
    --premise-btn-clr:  #2A2621;
    --premise-btn-bdr:  rgba(42, 38, 33, 0.38);
    --premise-btn-hov:  rgba(42, 38, 33, 0.08);
    /* spotlight gradient stops */
    --spotlight-base:   rgba(80, 72, 58, 1);
    --spotlight-mid:    rgba(80, 72, 58, 0.6);
    --spotlight-peak:   rgba(20, 15, 8, 1);
    /* grounded bio */
    --grounded-overlay: linear-gradient(to top, rgba(10, 7, 4, 0.72) 0%, rgba(10, 7, 4, 0.40) 50%, rgba(10, 7, 4, 0.14) 100%);
    --grounded-ink:     #EDE5D8;
    --grounded-muted:   rgba(200, 185, 162, 0.72);
    --grounded-body-clr:rgba(255, 255, 255, 0.88);
    /* about panel */
    --about-overlay:    linear-gradient(180deg, rgba(160,140,118,0.45) 0%, rgba(130,110,88,0.65) 100%);
    --about-ink:        #2A2621;
    /* hero */
    --hero-key-clr:     #7a8492;
    --hero-spot-mid:    rgba(80, 72, 58, 0.65);
    --hero-spot-peak:   rgba(30, 24, 16, 0.92);
    /* form feedback */
    --form-ok:          #3a6b44;
    --form-err:         #9b3a2e;
    --field-err:        #9b3a2e;
  }

  :root[data-theme="dark"] {
    /* core */
    --bg:        #1D1814;   /* deep warm charcoal */
    --bg-panel:  #221C16;
    --bg-deep:   #171310;
    --ink:       #E9E2D6;   /* warm cream text */
    --muted:     #A79E8C;
    --line:      #3B332A;
    --line-soft: #2E271F;
    --room-wall-a: #3A2E20;
    --room-wall-b: #241B12;
    --room-floor:  #191308;
    --beam:      rgba(226, 190, 128, 0.30);
    --beam-soft: rgba(200, 160, 100, 0.18);
    --shadow:    rgba(0, 0, 0, 0.45);
    --card-dim:  rgba(0, 0, 0, 0.28);
    /* premise (my approach) */
    --premise-bg:       #17140F;
    --premise-overlay:  rgba(23, 20, 15, 0.88);
    --premise-ink:      #EDE5D8;
    --premise-muted:    #8B8072;
    --premise-subtle:   #C3B7A6;
    --premise-body-clr: #DDD4C4;
    --premise-rule:     rgba(237, 229, 216, 0.18);
    --premise-btn-clr:  #EDE5D8;
    --premise-btn-bdr:  rgba(237, 229, 216, 0.38);
    --premise-btn-hov:  rgba(237, 229, 216, 0.10);
    /* spotlight gradient stops */
    --spotlight-base:   #D6CBBA;
    --spotlight-mid:    rgba(230, 218, 200, 0.8);
    --spotlight-peak:   rgba(255, 250, 238, 1);
    /* grounded bio */
    --grounded-overlay: linear-gradient(to top, rgba(10, 7, 4, 0.78) 0%, rgba(10, 7, 4, 0.45) 50%, rgba(10, 7, 4, 0.18) 100%);
    --grounded-ink:     #EDE5D8;
    --grounded-muted:   rgba(200, 185, 162, 0.70);
    --grounded-body-clr:rgba(200, 185, 162, 0.88);
    /* about panel */
    --about-overlay:    linear-gradient(180deg, rgba(18,13,9,0.58) 0%, rgba(13,9,6,0.74) 100%);
    --about-ink:        #F4EFE7;
    /* hero */
    --hero-key-clr:     #ffffff;
    --hero-spot-mid:    rgba(200, 185, 162, 0.6);
    --hero-spot-peak:   rgba(255, 252, 245, 1);
    /* form feedback */
    --form-ok:          #5a7e62;
    --form-err:         #b85c50;
    --field-err:        #b85c50;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: auto; scroll-padding-top: 96px; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color .6s ease, color .6s ease;
    overflow-x: hidden;
  }

  /* ---------- shared type / utility ---------- */
  .serif { font-family: 'Lyon Display', Georgia, serif; }

  .eyebrow {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: clamp(0.92rem, 1.6vw, 1.08rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .divider {
    width: 34px;
    height: 1px;
    background: var(--ink);
    opacity: 0.55;
    margin: 1.1rem auto;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 0.65rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    min-height: 44px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background-color .4s ease, color .4s ease, border-color .4s ease;
  }
  .btn:hover, .btn:focus-visible { background: var(--ink); color: var(--bg); }

  .link-arrow {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
    transition: border-color .35s ease, opacity .35s ease;
  }
  .link-arrow:hover, .link-arrow:focus-visible { border-color: var(--ink); }

  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--muted);
    outline-offset: 4px;
  }

  /* ---------- header ---------- */
  header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem clamp(1.25rem, 4vw, 3.25rem);
    transition: background-color .5s ease, box-shadow .5s ease;
  }
  header.scrolled {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 var(--line-soft);
  }

  .brand { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; color: var(--ink); text-decoration: none; }
  .brand .mono {
    font-family: 'Abhaya Libre', serif;
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.28rem;
  }
  .brand .mono .bar { width: 1px; height: 1.25rem; background: currentColor; opacity: 0.7; }
  .brand .word {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.66rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink);
  }

  nav.main { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.4rem); }
  nav.main a {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    opacity: 0.82;
    transition: opacity .3s ease;
  }
  nav.main a:hover { opacity: 1; }
  nav.main .btn { padding: 0.7rem 1.3rem; }
  .toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color .3s ease, transform .4s ease;
  }
  .toggle:hover { transform: rotate(18deg); border-color: var(--ink); }
  .toggle svg { width: 15px; height: 15px; }
  [data-theme="light"] .toggle .moon { display: block; }
  [data-theme="light"] .toggle .sun  { display: none; }
  [data-theme="dark"]  .toggle .moon { display: none; }
  [data-theme="dark"]  .toggle .sun  { display: block; }

  /* ---------- the sunlit "room" (CSS stand-in for photography) ---------- */
  .room {
    position: relative;
    background:
      linear-gradient(180deg,
        var(--room-wall-a) 0%,
        var(--room-wall-b) 62%,
        var(--room-floor) 62.4%,
        var(--room-floor) 100%);
    overflow: hidden;
  }
  /* angled light beams falling across the wall */
  .room::before {
    content: "";
    position: absolute; inset: -20% -10%;
    background:
      linear-gradient(115deg, transparent 0%, var(--beam) 14%, transparent 26%,
                      transparent 40%, var(--beam-soft) 52%, transparent 64%),
      linear-gradient(115deg, transparent 60%, var(--beam-soft) 74%, transparent 86%);
    filter: blur(6px);
    transform: translateX(0);
    animation: drift 26s ease-in-out infinite alternate;
    pointer-events: none;
  }
  /* soft leaf-like shadow pooling at lower left */
  .room::after {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(60% 45% at 12% 78%, var(--shadow) 0%, transparent 60%),
      radial-gradient(70% 60% at 92% 8%, var(--beam-soft) 0%, transparent 55%);
    pointer-events: none;
  }
  @keyframes drift {
    from { transform: translateX(-2%) translateY(0); }
    to   { transform: translateX(3%) translateY(-1.5%); }
  }

  /* ---------- hero ---------- */
  .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4.5rem 1.5rem 4.5rem;
  }
  .hero .content { position: relative; z-index: 2; }
  .hero .mono {
    font-family: 'Abhaya Libre', serif;
    font-weight: 500;
    font-size: clamp(3.4rem, 9vw, 5.6rem);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .hero .mono .bar { width: 1.5px; height: clamp(3rem, 8vw, 4.9rem); background: currentColor; opacity: 0.6; }
  .hero .word {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: clamp(0.8rem, 2vw, 1.05rem);
    letter-spacing: 0.5em;
    text-transform: uppercase;
    margin: 1.6rem 0 0;
    padding-left: 0.5em; /* optically center the tracked text */
  }
  .brand-name {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    padding-left: 0.22em;
    text-align: center;
  }
  .hero .btn { margin-top: 2rem; }
  .hero-services {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.80;
    text-align: center;
    margin: 2rem 0 0;
  }
  .hero-services .dot { font-weight: 700; font-size: 1.15em; color: var(--accent, var(--ink)); opacity: 1; }
  .hero-tagline {
    font-family: 'Century Gothic', 'Urbanist', sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--muted);
    max-width: 100%;
    margin: 1.4rem 0 0;
    text-align: center;
    animation-duration: 2s;
    margin-top: 2.2rem;
  }
  @keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
  .hp { opacity: 0; animation: heroFade 0.7s ease forwards; animation-delay: var(--d, 0s); }

  /* ---- spotlight sweep ---- */
  @property --reveal {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -8%;
  }
  @keyframes spotlightSweep {
    from { --reveal: -8%; }
    to   { --reveal: 108%; }
  }
  @keyframes glowPulse {
    0%   { text-shadow: none; }
    45%  { text-shadow: 0 0 24px rgba(210,190,155,0.75), 0 0 48px rgba(210,190,155,0.3); }
    100% { text-shadow: none; }
  }

  /* tagline: simple fade-in */
  .hero-tagline {
    opacity: 0;
    animation: heroFade 1.4s ease forwards;
    animation-delay: 0.4s;
  }

  /* service line: spotlight sweep */
  .has-spotlight .hero-services {
    color: transparent;
    animation: spotlightSweep 2s linear forwards;
    animation-delay: 1.6s;
    background-image: linear-gradient(
      to right,
      var(--muted)                   0%,
      var(--muted)                   calc(var(--reveal) - 20%),
      var(--hero-spot-mid)           calc(var(--reveal) - 10%),
      var(--hero-spot-peak)          calc(var(--reveal) - 1%),
      var(--hero-spot-peak)          var(--reveal),
      var(--hero-spot-peak)          calc(var(--reveal) + 1%),
      var(--hero-spot-mid)           calc(var(--reveal) + 10%),
      transparent                    calc(var(--reveal) + 20%)
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
  /* dots inside .hero-services also need to stay visible */
  .has-spotlight .hero-services .dot { color: inherit; }

  @media (prefers-reduced-motion: reduce) {
    .hero-tagline { opacity: 1; animation: none; }
    .has-spotlight .hero-services {
      color: var(--muted);
      background-image: none;
      -webkit-background-clip: unset;
      background-clip: unset;
      animation: none;
    }
  }
  .hero-key { color: var(--hero-key-clr); animation-duration: 3.5s; }
  .hero-tagline span { color: var(--hero-key-clr); }
  .hero-br { display: block; margin-bottom: 0; }
  .hero-conn { color: var(--muted); }
  .scroll-cue {
    position: absolute;
    bottom: 2.2rem; left: 50%; transform: translateX(-50%);
    z-index: 2;
    color: var(--muted);
    animation: bob 2.6s ease-in-out infinite;
  }
  @keyframes bob { 0%,100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, 7px);} }

  /* ---------- experiences ---------- */
  section { position: relative; }
  .section-pad { padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 3.25rem); }
  .center { text-align: center; }
  .wrap { max-width: 1080px; margin: 0 auto; }

  .experiences { background: var(--bg-panel); }
  .cards {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 0.4rem;
    margin: 2.6rem 0 2.4rem;
  }
  .card {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    color: #F3EDE2;
    padding: 1.4rem;
    cursor: pointer;
  }
  .card .card-label {
    position: relative; z-index: 2;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: clamp(0.72rem, 1.5vw, 0.92rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(0,0,0,0.45);
  }
  .card .card-label::after {
    content: ""; display: block;
    width: 26px; height: 1px; background: currentColor;
    margin: 0.7rem auto 0; opacity: 0.8;
  }
  .card::after { /* readability wash — darkens on reveal */
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(20,15,10,0.05), rgba(20,15,10,0.35));
    transition: background .45s ease;
  }
  .card:hover::after, .card:focus::after, .card:focus-within::after, .card.is-open::after {
    background: linear-gradient(180deg, rgba(18,13,9,0.52), rgba(18,13,9,0.74));
  }
  .card-desc {
    position: relative; z-index: 2;
    max-width: 26ch;
    margin-top: 0.9rem;
    opacity: 0; transform: translateY(8px);
    transition: opacity .45s ease, transform .45s ease;
  }
  .card-desc p { color: #F2EBDE; font-size: 0.86rem; line-height: 1.5; font-weight: 400; }
  .card-desc em { font-style: italic; opacity: 0.7; }
  .card-select-rule {
    border: none;
    border-top: 1px solid rgba(242, 235, 222, 0.22);
    width: 40%;
    margin: 0.75rem auto;
  }
  .card-select {
    font-family: 'Lyon Display', Georgia, serif;
    font-style: italic;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(242, 235, 222, 0.72);
  }
  .card:hover .card-desc, .card:focus .card-desc, .card:focus-within .card-desc, .card.is-open .card-desc {
    opacity: 1; transform: none;
  }
  .card:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: -4px; }
  .card-book-link,
  .card-book-link:visited {
    display: inline-block;
    margin-top: 1rem;
    padding-top: 0.8rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #d8c39f;
    text-decoration: none;
    border-top: 1px solid rgba(242, 235, 222, 0.35);
    transition: color .3s ease, border-color .3s ease;
  }
  .card-book-link::after {
    content: " →";
  }
  .card-book-link:hover,
  .card-book-link:focus-visible {
    color: #f3ede2;
    border-top-color: rgba(255, 255, 255, 0.72);
    outline: none;
  }
  /* three distinct moods, all CSS stand-ins for real photos */
  .card.reiki {
    background:
      radial-gradient(120% 90% at 30% 20%, rgba(255,250,235,0.35), transparent 55%),
      linear-gradient(160deg, #C9B79E 0%, #A98F73 55%, #7C6449 100%);
  }
  .card.breath {
    background:
      linear-gradient(105deg, transparent 30%, rgba(255,250,236,0.5) 48%, transparent 60%),
      linear-gradient(160deg, #CDBBA0 0%, #B49B7C 60%, #8A6F52 100%);
  }
  .card.readings {
    background:
      radial-gradient(90% 70% at 78% 30%, rgba(210,160,90,0.4), transparent 55%),
      linear-gradient(160deg, #4A3B2C 0%, #2E241A 60%, #1A130C 100%);
  }

  /* ---------- editorial line ---------- */
  .editorial { background: var(--bg); }
  .expect { background: var(--bg-panel); }
  .editorial .line {
    font-family: 'Abhaya Libre', serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 4.4vw, 2.9rem);
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  /* ---------- session options ---------- */
  .sessions { background: var(--bg-deep); }
  .session-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    gap: 0;
    max-width: 1040px;
    margin: 2.6rem auto 2.8rem;
  }
  .session-grid .rule { background: var(--line); }
  .session-col {
    padding: 0.4rem clamp(1.2rem, 4vw, 2.6rem);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    text-align: center;
    cursor: pointer;
    transition: border-color .35s ease, background-color .35s ease, transform .35s ease;
  }
  .session-option:hover,
  .session-option:focus-visible {
    border-color: var(--line);
    outline: none;
  }
  .session-option:focus-visible { box-shadow: 0 0 0 2px var(--accent, var(--line)); }
  .session-option.is-selected {
    border-color: var(--accent, var(--ink));
    background: color-mix(in srgb, var(--bg) 22%, transparent);
  }
  .session-col h3 {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
  }
  .session-col .price {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.1rem;
  }
  .session-col p {
    font-size: 0.92rem;
    color: var(--muted);
    max-width: 20ch;
  }
  .session-choice {
    display: inline-block;
    margin-top: 1.25rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .35s ease, transform .35s ease, color .35s ease;
  }
  .session-option:hover .session-choice,
  .session-option:focus-visible .session-choice,
  .session-option.is-selected .session-choice {
    opacity: 1;
    transform: translateY(0);
  }
  .session-option.is-selected .session-choice { color: var(--accent, var(--ink)); }

  /* ---------- closing cta ---------- */
  .closing {
    min-height: 62vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(4rem, 10vw, 7rem) 1.5rem;
  }
  .closing .content { position: relative; z-index: 2; }
  .closing .line {
    font-family: 'Abhaya Libre', serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1.2;
    margin-bottom: 2rem;
  }

  /* ---------- contact form ---------- */
  .contact-section { background: var(--bg-panel); }
  .contact-wrap { max-width: 680px; }
  .contact-wrap h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 0.6rem; }
  .contact-sub { color: var(--muted); margin-bottom: 2.8rem; font-size: 0.95rem; }

  .contact-form { display: flex; flex-direction: column; gap: 1.4rem; }
  .contact-botcheck { position: absolute; left: -9999px; }

  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

  .form-field { display: flex; flex-direction: column; gap: 0.45rem; }
  .form-field label {
    font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  }
  .form-field input,
  .form-field textarea {
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    padding: 0.85rem 1rem;
    border-radius: 0;
    outline: none;
    transition: border-color .25s ease;
    resize: vertical;
    width: 100%;
  }
  .form-field input::placeholder,
  .form-field textarea::placeholder { color: var(--muted); opacity: 0.7; }
  .form-field input:focus,
  .form-field textarea:focus { border-color: var(--ink); }

  .form-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

  /* Sending state */
  .contact-form .btn-sending { display: none; }
  .contact-form.is-sending .btn-label { display: none; }
  .contact-form.is-sending .btn-sending { display: inline; }
  .contact-form.is-sending .btn { opacity: 0.7; pointer-events: none; }

  /* Result messages */
  .form-success,
  .form-error { font-size: 0.82rem; letter-spacing: 0.06em; display: none; }
  .form-success { color: var(--ink); }
  .form-error   { color: #9b3a2e; }
  .contact-form.is-success .form-success { display: block; }
  .contact-form.is-error   .form-error   { display: block; }
  .contact-form.is-success .btn,
  .contact-form.is-error   .btn { display: none; }

  /* ---------- footer (added — POC didn't show one) ---------- */
  footer {
    background: var(--bg);
    border-top: 1px solid var(--line-soft);
    padding: 3rem clamp(1.25rem, 5vw, 3.25rem);
  }
  .foot-grid {
    max-width: 1080px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1.5rem;
  }
  .foot-grid nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
  .foot-grid nav a {
    font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--muted); text-decoration: none; transition: color .3s ease;
  }
  .foot-grid nav a:hover { color: var(--ink); }
  .foot-meta { font-size: 0.7rem; letter-spacing: 0.14em; color: var(--muted); }

  /* ---------- scroll reveal ---------- */
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* ---------- about / meet andriana ---------- */
  .about-panel {
    position: relative;
    overflow: hidden;
    max-width: 760px;
    margin: 2.8rem auto 0;
    padding: clamp(2.6rem, 8vw, 4.5rem) clamp(1.6rem, 7vw, 3.6rem);
    min-height: clamp(460px, 68vh, 580px);
    display: flex;
    align-items: center;
    text-align: left;
  }
  .about-panel .portrait {
    position: absolute; inset: 0;
    z-index: 0;
    aspect-ratio: auto;
    opacity: 0.6;                 /* faded texture beneath a dark wash */
    filter: grayscale(0.2) contrast(0.95);
  }
  .about-panel::after {           /* wash adapts to theme */
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: var(--about-overlay);
  }
  .about-copy { position: relative; z-index: 2; max-width: 100%; }
  .about-copy p { color: var(--about-ink); font-weight: 400; margin-bottom: 1rem; font-size: 1.125rem; font-family: 'Abhaya Libre', serif; }
  .about-copy em { font-style: italic; font-weight: 400; opacity: 0.72; }
  .about-panel .signature {
    position: absolute;
    bottom: clamp(2.6rem, 8vw, 4.5rem);
    right: clamp(1.6rem, 7vw, 3.6rem);
    z-index: 3;
    height: clamp(44px, 8vw, 68px);
    width: auto;
    mix-blend-mode: lighten;
    opacity: 0.9;
    margin-top: 2rem;
  }

  /* ---------- what to expect ---------- */
  .expect-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.6rem, 4vw, 3rem);
    max-width: 900px;
    margin: 2.8rem auto 0;
    text-align: left;
  }
  .expect-step .step-eyebrow {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
  }
  .expect-step p { font-size: 0.98rem; }

  /* ---------- hamburger + overlay menu ---------- */
  .menu-btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; padding: 0; cursor: pointer;
    color: var(--ink);
  }
  .menu-lines { position: relative; width: 24px; height: 12px; }
  .menu-lines span {
    position: absolute; left: 0; width: 100%; height: 1.4px;
    background: currentColor;
    transition: transform .4s ease, opacity .3s ease, top .4s ease, bottom .4s ease;
  }
  .menu-lines span:nth-child(1) { top: 0; }
  .menu-lines span:nth-child(2) { top: 50%; transform: translateY(-50%); }
  .menu-lines span:nth-child(3) { bottom: 0; }
  .menu-btn.menu-open .menu-lines span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
  .menu-btn.menu-open .menu-lines span:nth-child(2) { opacity: 0; }
  .menu-btn.menu-open .menu-lines span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

  .overlay {
    position: fixed; inset: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 95%, transparent);
    backdrop-filter: blur(7px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .5s ease, visibility .5s ease;
  }
  .overlay.open { opacity: 1; visibility: visible; }
  .overlay-nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
  .overlay-nav a {
    font-family: 'Lyon Display', Georgia, serif;
    font-style: normal;
    font-weight: 200;
    font-size: clamp(1.9rem, 6vw, 2.9rem);
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--ink); text-decoration: none;
    opacity: 0; transform: translateY(16px);
    transition: color .3s ease, opacity .6s ease, transform .6s ease;
  }
  .overlay.open .overlay-nav a { opacity: 1; transform: none; }
  .overlay.open .overlay-nav a:nth-child(1) { transition-delay: .10s; }
  .overlay.open .overlay-nav a:nth-child(2) { transition-delay: .16s; }
  .overlay.open .overlay-nav a:nth-child(3) { transition-delay: .22s; }
  .overlay.open .overlay-nav a:nth-child(4) { transition-delay: .28s; }
  .overlay.open .overlay-nav a:nth-child(5) { transition-delay: .36s; }
  .overlay-nav a:hover, .overlay-nav a:focus-visible { color: var(--muted); }
  .overlay.open .overlay-nav a[aria-current] { font-style: italic; }
  .overlay.open .overlay-nav a[aria-current]::after { content: ' ·'; opacity: 0.35; font-style: normal; }
  .overlay-book {
    font-family: 'Jost', sans-serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.24em; text-transform: uppercase;
    border: 1px solid var(--ink); padding: 0.9rem 1.9rem; margin-top: 1.4rem;
    transition: background-color .4s ease, color .4s ease, opacity .6s ease, transform .6s ease !important;
    display: none; /* shown on mobile; header keeps the persistent Book on desktop */
  }
  .overlay-book:hover, .overlay-book:focus-visible { background: var(--ink); color: var(--bg); }

  /* ---------- responsive ---------- */
  @media (max-width: 860px) {
    .cards { grid-template-columns: 1fr; }
    .card { aspect-ratio: 16 / 10; }
    .session-grid { grid-template-columns: 1fr; }
    .session-grid .rule { height: 1px; width: 60%; margin: 1.6rem auto; }
    .session-col p { max-width: none; }
    .brand .word { display: none; }
    .header-book { display: none; }
    .overlay-book { display: inline-block; }
    .expect-flow { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ============================================================
     PHOTO BACKGROUNDS — muted atmosphere, never focal.
     Real photography, desaturated + washed so copy stays in focus.
     ============================================================ */
  :root[data-theme="light"] {
    --room-tint: linear-gradient(180deg, rgba(238,233,225,0.32) 0%, rgba(238,233,225,0.52) 58%, rgba(222,214,201,0.60) 100%);
    --room-photo-opacity: 0.42;
    --room-grayscale: 0.30;
  }
  :root[data-theme="dark"] {
    --room-tint: linear-gradient(180deg, rgba(20,16,13,0.40) 0%, rgba(20,16,13,0.56) 58%, rgba(15,12,9,0.70) 100%);
    --room-photo-opacity: 0.48;
    --room-grayscale: 0.22;
  }
  .room::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: var(--room-photo);
    background-size: cover; background-position: center;
    opacity: var(--room-photo-opacity);
    filter: grayscale(var(--room-grayscale)) contrast(0.95);
    transform: none;
    animation: kenburns 44s ease-in-out infinite alternate;
  }
  .room::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: var(--room-tint);
    animation: none;
  }
  @keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.06); } }

  .hero                        { --room-photo: url("images/hero-light.jpg"); }
  [data-theme="dark"] .hero    { --room-photo: url("images/hero-dark.jpg"); }
  .closing                     { --room-photo: url("images/closing-light.jpg"); }
  [data-theme="dark"] .closing { --room-photo: url("images/closing-dark.jpg"); }

  .card.reiki    { background-image: linear-gradient(180deg, rgba(18,13,9,0.15), rgba(18,13,9,0.48)), url("images/card-reiki.jpg");  background-size: cover; background-position: center; }
  .card.breath   { background-image: linear-gradient(180deg, rgba(18,13,9,0.15), rgba(18,13,9,0.48)), url("images/card-breath.jpg"); background-size: cover; background-position: center; }
  .card.readings { background-image: linear-gradient(180deg, rgba(18,13,9,0.20), rgba(18,13,9,0.55)), url("images/card-readings.jpg");   background-size: cover; background-position: center; }

  .portrait { background-image: linear-gradient(180deg, rgba(30,22,14,0.04), rgba(30,22,14,0.10)), url("images/portrait.jpg"); background-size: cover; background-position: center; }


  /* ---------- booking section ---------- */
  .booking-section {
    padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 5vw, 3.25rem);
  }
  .booking-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1080px;
    margin: 0 auto;
  }
  .booking-inner .eyebrow {
    margin-bottom: 0.8rem;
  }
  .booking-inner .line.serif {
    font-family: 'Abhaya Libre', serif;
    font-weight: 300;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.25;
    margin-bottom: 2.8rem;
    color: var(--ink);
  }
  .booking-flow {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    max-width: 980px;
    margin: 0 auto;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    border: 1px solid var(--line);
    text-align: left;
  }
  .booking-side,
  .booking-calendar {
    padding: clamp(1.8rem, 4vw, 3.2rem);
  }
  .booking-side {
    border-right: 1px solid var(--line);
  }
  .booking-step {
    margin-bottom: 1.5rem;
    font-family: 'Jost', sans-serif;
    font-size: 0.63rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .booking-side h2,
  .booking-calendar h2 {
    margin: 0 0 1.7rem;
    font-family: 'Lyon Display', Georgia, serif;
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
  }
  .booking-session-options {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
  }
  .booking-session-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color .35s ease, background-color .35s ease, transform .35s ease;
  }
  .booking-session-option:hover,
  .booking-session-option:focus-visible {
    border-color: var(--ink);
    outline: none;
  }
  .booking-session-option:focus-visible {
    box-shadow: 0 0 0 2px var(--accent, var(--line));
  }
  .booking-session-option.is-selected {
    border-color: var(--accent, var(--ink));
    background: color-mix(in srgb, var(--bg) 22%, transparent);
  }
  .booking-session-option > span:first-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
  }
  .booking-session-option strong {
    font-family: 'Jost', sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .booking-option-price {
    font-family: 'Jost', sans-serif;
    font-size: 0.67rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--muted);
  }
  .booking-option-action {
    flex: 0 0 auto;
    font-family: 'Jost', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .35s ease;
  }
  .booking-session-option.is-selected .booking-option-action {
    color: var(--accent, var(--ink));
  }
  .booking-selection {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0 0 1.6rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 68%, transparent);
    color: var(--ink);
  }
  .booking-selection-label {
    font-family: 'Jost', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .booking-selection strong {
    font-family: 'Lyon Display', Georgia, serif;
    font-size: 1.08rem;
    font-weight: 400;
  }
  .booking-selection span:last-child {
    font-family: 'Jost', sans-serif;
    font-size: 0.76rem;
    font-weight: 300;
    color: var(--muted);
  }
  .booking-side-copy {
    max-width: 30ch;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--muted);
  }
  .booking-change {
    display: inline-block;
    font-family: 'Jost', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.25rem;
  }
  .booking-calendar {
    background: color-mix(in srgb, var(--bg) 45%, transparent);
  }
  .booking-placeholder {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 1.8rem;
    border: 1px dashed var(--line);
    text-align: left;
  }
  .booking-placeholder-mark {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--accent, var(--muted));
  }
  .booking-placeholder-title {
    margin-bottom: 0.65rem;
    font-family: 'Lyon Display', Georgia, serif;
    font-size: 1.15rem;
    color: var(--ink);
  }
  .booking-placeholder-copy {
    max-width: 34ch;
    margin-bottom: 1.5rem;
    font-size: 0.84rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--muted);
  }
  .booking-placeholder-btn {
    font-size: 0.62rem;
    min-height: 40px;
    padding: 0.6rem 1rem;
  }

  /* ---------- contact form ---------- */
  .contact-section { background: var(--bg); }
  .contact-heading {
    font-family: 'Abhaya Libre', serif;
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.2;
    margin: 0.6rem 0 2.8rem;
    color: var(--ink);
  }
  .contact-form {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
  }
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .form-group label {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .form-group input,
  .form-group textarea,
  .form-group select {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.92rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 0.7rem 0;
    width: 100%;
    outline: none;
    resize: none;
    transition: border-color .35s ease;
    caret-color: var(--ink);
  }
  .form-group select {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
    cursor: pointer;
  }
  .form-group input::placeholder,
  .form-group textarea::placeholder { color: var(--muted); opacity: 0.6; }
  .form-group select:invalid { color: var(--muted); opacity: 0.6; }
  .form-group input:focus,
  .form-group textarea:focus,
  .form-group select:focus { border-color: var(--ink); }
  .form-group input.field-error,
  .form-group textarea.field-error,
  .form-group select.field-error { border-color: var(--field-err); }
  .form-group textarea { min-height: 120px; line-height: 1.6; }

  .form-status {
    font-family: 'Jost', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    min-height: 1.4em;
    transition: opacity .4s ease;
  }
  .form-status.status-success { color: var(--form-ok); }
  .form-status.status-error   { color: var(--form-err); }

  .form-submit { align-self: flex-start; }
  .form-note {
    margin: -0.55rem 0 0;
    font-family: 'Jost', sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--muted);
    opacity: 0.72;
  }

  @media (max-width: 560px) {
    .form-row { grid-template-columns: 1fr; }
  }

  /* ---------- premise (her approach) ---------- */
  .premise {
    background: var(--premise-bg) url("images/approach-bg.jpg") center/cover no-repeat;
    background-blend-mode: luminosity;
    color: var(--premise-ink);
    padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 5vw, 3.25rem);
    position: relative;
    transition: background-color .6s ease, color .6s ease;
  }
  .premise::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--premise-overlay);
    pointer-events: none;
  }
  .premise .wrap { position: relative; z-index: 1; }
  .premise-eyebrow {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--premise-muted);
    margin-bottom: 2.4rem;
  }
  .premise-heading {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-transform: lowercase;
    color: var(--premise-ink);
    margin-bottom: 2.8rem;
  }
  .premise-heading em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--accent, inherit);
  }
  .premise-quote {
    font-family: 'Jost', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.1rem, 2.1vw, 1.4rem);
    line-height: 1.5;
    color: var(--premise-subtle);
    max-width: 68ch;
    margin-bottom: 0.4rem;
  }

  /* spotlight reveal — only when @property is supported (gated via JS has-spotlight class) */
  .has-spotlight .premise-quote.reveal {
    opacity: 1;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(to right, transparent, transparent);
    transition: transform 1s ease;
  }
  .has-spotlight .premise-quote.reveal.in {
    animation: spotlightSweep 2.2s linear forwards;
    animation-delay: 0.9s;
    background-image: linear-gradient(
      to right,
      var(--spotlight-base)          0%,
      var(--spotlight-base)          calc(var(--reveal) - 20%),
      var(--spotlight-mid)           calc(var(--reveal) - 10%),
      var(--spotlight-peak)          calc(var(--reveal) - 1%),
      var(--spotlight-peak)          var(--reveal),
      var(--spotlight-peak)          calc(var(--reveal) + 1%),
      var(--spotlight-mid)           calc(var(--reveal) + 10%),
      transparent                    calc(var(--reveal) + 20%)
    );
  }
  /* fallback for browsers without @property: plain fade-in like the rest of the reveals */
  .premise-quote.reveal   { opacity: 0; }
  .premise-quote.reveal.in { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .has-spotlight .premise-quote.reveal   { opacity: 0; color: var(--premise-subtle); background-image: none; -webkit-background-clip: unset; background-clip: unset; }
    .has-spotlight .premise-quote.reveal.in { opacity: 1; animation: none; }
    .premise-quote.reveal   { opacity: 1; }
    .premise-quote.reveal.in { opacity: 1; }
  }
  .premise-body p {
    font-family: 'Lyon Display', Georgia, serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.5vw, 1.08rem);
    line-height: 1.75;
    color: var(--premise-body-clr);
    max-width: 62ch;
    margin-bottom: 0.575em;
  }
  .premise-body p:last-child { margin-bottom: 0; }

  /* ---------- doors (why these three) ---------- */
  .doors { background: var(--bg-panel); border-top: 1px solid var(--line-soft); }
  .doorlist {
    display: grid;
    gap: 0;
    max-width: 860px;
    margin-top: 2.2rem;
  }
  .door {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.2rem;
    align-items: baseline;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .door:first-child { border-top: 1px solid var(--line-soft); }
  .door dt {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .door dd { color: var(--muted); font-size: 16px; line-height: 1.6; }

  /* ---------- grounded (bio) ---------- */
  .grounded { background: var(--bg); }
  .grounded-cols {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
  .grounded-cols::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: var(--grounded-overlay);
  }
  .grounded-portrait {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover;
    background-position: center top;
    opacity: 0.07;
  }
  .grounded-text {
    position: relative; z-index: 2;
    padding: clamp(3rem, 7vw, 5.5rem);
    max-width: 680px;
    width: 100%;
  }
  .grounded-text .eyebrow {
    color: var(--grounded-muted);
    margin-bottom: 1.2rem;
  }
  .grounded-heading {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: clamp(1.4rem, 3vw, 2rem) !important;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-transform: lowercase;
    margin-bottom: 1.6rem;
    color: var(--grounded-ink);
  }
  .grounded-heading em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0.01em; color: var(--accent, var(--grounded-ink)); opacity: 0.9; }
  .grounded-body p { font-size: 17px; color: var(--grounded-body-clr); line-height: 1.75; margin-bottom: 1rem; }
  .fill {
    border-bottom: 1px dashed var(--muted);
    padding: 0 3px;
    font-style: italic;
    opacity: 0.65;
  }

  /* Andriana inset portrait — flex child, secondary, trailing edge */
  .grounded-inset {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    align-self: flex-end;
    margin: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) 0;
    width: clamp(200px, 26vw, 340px);
    opacity: 0.72;
    transition: opacity 0.4s ease;
  }
  .grounded-inset img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
  }
  /* In dark mode, reduce opacity so the bright white bg doesn't punch through */
  [data-theme="dark"] .grounded-inset { opacity: 0.45; }

  /* Hide on narrow phones — space is too tight */
  @media (max-width: 560px) { .grounded-inset { display: none; } }

  /* ---------- refuse (what I won't do) ---------- */
  /* ---------- beats (shape of a session) ---------- */
  .beats-statement {
    font-size: clamp(1.3rem, 2.8vw, 1.8rem) !important;
    margin: 0.8rem 0 2.8rem;
  }
  .beats-statement em { font-style: italic; color: var(--accent, inherit); }
  .triad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line-soft);
    text-align: left;
  }
  .beat {
    background: var(--bg-panel);
    padding: clamp(1.8rem, 4vw, 2.8rem);
    position: relative;
  }
  .beat-num {
    font-family: 'Abhaya Libre', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--muted);
    position: absolute;
    top: clamp(1.8rem, 4vw, 2.8rem);
    right: clamp(1.8rem, 4vw, 2.8rem);
  }
  .beat-title {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.1rem;
  }
  .beat p { font-size: 0.95rem; line-height: 1.65; color: var(--muted); }

  @media (max-width: 760px) {
    .door { grid-template-columns: 1fr; gap: 0.3rem; }
    .grounded-cols { grid-template-columns: 1fr; }
    .grounded-portrait { aspect-ratio: 3 / 2; }
    .triad { grid-template-columns: 1fr; }
    .booking-flow { grid-template-columns: 1fr; }
    .booking-side { border-right: none; border-bottom: 1px solid var(--line); }
  }

  /* ---- phone polish (≤ 480px) ---- */
  @media (max-width: 480px) {
    /* service cards: slightly taller so the label + revealed text have breathing room */
    .card { aspect-ratio: 3 / 2; }

    /* card labels: 17px inline override is too large, cap it */
    .card .card-label { font-size: 0.78rem !important; }

    /* grounded bio: tighten padding so text isn't squeezed to ~280px wide */
    .grounded-text { padding: 2rem 1.5rem; }

    /* premise heading: 50px inline is far too large on phones */
    .premise-heading { font-size: clamp(1.75rem, 7vw, 2.2rem) !important; }

    /* premise body: 20px inline is heavy at narrow widths */
    .premise-body p { font-size: 1rem !important; }

    /* premise quote: inline font-size: 26px is too large at this width */
    .premise-quote { font-size: clamp(1rem, 4.5vw, 1.25rem) !important; }

    /* eyebrow overrides: inline 20–26px are too large on phone */
    .eyebrow { font-size: 0.72rem !important; }
    .premise-eyebrow { font-size: 0.72rem !important; }

    /* hero tagline: tighten line-height and reduce size slightly */
    .hero-tagline { font-size: clamp(1.4rem, 5.5vw, 1.7rem) !important; }

    /* hero services: reduce letter-spacing so line doesn't overflow */
    .hero-services { letter-spacing: 0.18em !important; }

    /* forward question: clamp doesn't kick in below 1rem — nudge it */
    .forward-question { font-size: 1rem !important; }

    /* booking section: the cal embed is already tall — no need for full padding */
    .booking-section { padding: 3.5rem 1.25rem; }

    /* footer: stack logo, nav, and copyright in a column */
    .foot-grid {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 1.4rem;
    }
    .foot-grid nav {
      justify-content: center;
      gap: 1rem 1.4rem;
    }
  }

  /* ---------- brand logo (uploaded artwork) ---------- */
  .logo-full { display: block; width: clamp(230px, 40vw, 400px); height: auto; margin: 0 auto; }
  .logo-mark { display: block; height: 40px; width: auto; }
  footer .logo-mark { height: 30px; }
  [data-theme="dark"] .logo-full, [data-theme="dark"] .logo-mark, [data-theme="dark"] .logo-hero-mark { filter: invert(1); }

  /* ============================================================
     GUIDED FLOW — step markers, forward controls, bypass link
     ============================================================ */

  /* Step markers — small italic numeral + label above each section heading */
  .step-marker {
    font-family: 'Lyon Display', Georgia, serif;
    font-style: italic;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--muted);
    opacity: 0.65;
    margin-bottom: 1.2rem;
  }
  /* Premise section step marker uses section-specific muted tone */
  .premise .step-marker { color: var(--premise-muted); opacity: 0.85; }

  /* Forward controls — hairline + italic question + next-section button */
  .forward-control {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 0;
  }
  .forward-rule {
    border: none;
    border-top: 1px solid var(--line-soft);
    margin: 0 0 1.8rem;
  }
  .forward-question {
    font-family: 'Lyon Display', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    color: var(--muted);
    margin-bottom: 1.4rem;
  }

  /* Premise section forward control — theme-aware */
  .premise .forward-rule { border-top-color: var(--premise-rule); }
  .premise .forward-question { color: var(--premise-subtle); }
  .premise .forward-control .btn {
    color: var(--premise-btn-clr);
    border-color: var(--premise-btn-bdr);
  }
  .premise .forward-control .btn:hover,
  .premise .forward-control .btn:focus-visible {
    background: var(--premise-btn-hov);
    color: var(--premise-btn-clr);
  }

  /* Hero bypass link — secondary muted text link beside Begin */
  .hero-bypass {
    display: block;
    margin-top: 2.8rem;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 0.83rem;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 6px;
    opacity: 0;                   /* starts invisible; animated by .hp */
    transition: opacity .3s ease;
  }
  .hero-bypass.hp { animation: heroFade 0.7s ease forwards; animation-delay: var(--d, 0s); }
  .hero-bypass:hover, .hero-bypass:focus-visible { opacity: 1 !important; }

  /* Soft exit beneath booking embed */
  .booking-exit {
    margin-top: 1.8rem;
    font-family: 'Lyon Display', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--muted);
    opacity: 0.75;
    position: relative;
    z-index: 2;
  }
  .booking-exit a {
    color: inherit;
    text-decoration-line: underline;
    text-underline-offset: 3px;
    transition: opacity .3s ease;
  }
  .booking-exit a:hover { opacity: 1; }