/* ==============================================================
   Carla Polfers - site styles

   Lifted verbatim from the single-file build, in original document
   order. ORDER MATTERS: later blocks deliberately override earlier
   ones (that is where the !important rules come from). Merging or
   reordering blocks will change the design.
   ============================================================== */

/* ---------- 1/13 ---------- */
  /* ========== Reset & base ========== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #FDFDFC;
    --bg-warm: #FEFEFE;
    --text: #1A1A18;
    --text-soft: #4A4A45;
    --text-muted: #8A8A83;
    --sage: #5E7A94;
    --sage-deep: #33475C;
    --sage-darker: #26374A;
    --clay: #C47A5A;
    --divider: #D8D3CB;
    --placeholder: #D8D3CB;
    --white: #FFFFFF;

    --serif: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
    --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    --max-w: 1280px;
    --pad-x: clamp(20px, 4.5vw, 56px);
    --pad-y: clamp(64px, 10vw, 140px);
  }

  /* clip, not hidden: keeps the page from ever being dragged off-axis without
     creating a scroll container (which would break every sticky hold) */
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

  body {
    font-family: var(--sans);
    font-weight: 400;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img { max-width: 100%; display: block; }

  a { color: inherit; text-decoration: none; transition: opacity 0.25s ease, color 0.25s ease; }

  ::selection { background: var(--sage); color: var(--white); }

  /* ========== Layout helpers ========== */
  .container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }

  .container-wide {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }

  section { padding-top: var(--pad-y); padding-bottom: var(--pad-y); }

  /* ========== Typography ========== */
  h1, h2, h3, h4 {
    font-family: var(--sans);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--text);
  }

  h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); }
  h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.15; }
  h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  h4 { font-size: clamp(1.15rem, 1.6vw, 1.3rem); }

  .italic { font-style: italic; font-weight: 400; }
  /* Serif italic accents inside sans headlines - the editorial counterpoint */
  /* All headings stay all-sans, upright */
  .nh-title em, .hero h1 .italic,
  .invitation-headline em,
  .about-text h2 .italic, .bridge h2 .italic, .offering-head h2 .italic,
  .contact-cta h2 .italic, .iv2d .iv-lead i {
    font-family: var(--sans);
    font-style: normal;
    font-weight: 300;
  }

  p { color: var(--text); }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .eyebrow::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    border-radius: 50%;
    position: relative;
    background:
      radial-gradient(circle at 50% 50%, currentColor 1.5px, transparent 2px);
    opacity: 0.55;
  }

  /* ========== Buttons (pill style w/ arrow) ========== */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 500;
    padding: 13px 22px 13px 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }
  .btn svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.3s ease; }
  .btn:hover svg { transform: translate(2px, -2px); }

  .btn-sage { background: var(--sage-deep); color: var(--white); border-color: var(--sage-deep); }
  .btn-sage:hover { background: var(--sage-darker); border-color: var(--sage-darker); }

  .btn-white { background: var(--white); color: var(--text); border-color: var(--white); }
  .btn-white:hover { background: var(--bg-warm); border-color: var(--bg-warm); }

  .btn-outline { background: transparent; color: var(--text); border-color: var(--text); }
  .btn-outline:hover { background: var(--text); color: var(--bg-warm); }

  .btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.7); }
  .btn-outline-light:hover { background: var(--white); color: var(--text); border-color: var(--white); }

  .btn-glass-dark {
    background: rgba(26, 26, 24, 0.04);
    color: var(--text);
    border-color: rgba(26, 26, 24, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .btn-glass-dark:hover {
    background: rgba(26, 26, 24, 0.1);
    border-color: rgba(26, 26, 24, 0.55);
  }

  .btn-glass-light {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .btn-glass-light:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.7);
  }

  .btn-sm { padding: 10px 18px 10px 20px; font-size: 13px; }

  /* ========== Nav ========== */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 22px 0;
    transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
    border-bottom: 1px solid transparent;
  }

  .nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }

  .nav.scrolled {
    background: rgba(253, 253, 252, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 14px 0;
    border-bottom-color: var(--divider);
    box-shadow: 0 10px 34px rgba(22, 32, 44, 0.12);
  }

  .logo {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white);
    transition: color 0.4s ease;
    justify-self: start;
  }
  .nav.scrolled .logo { color: var(--text); }

  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    list-style: none;
    justify-self: center;
  }

  .nav-links a {
    font-size: 14px;
    font-weight: 400;
    color: var(--white);
    transition: color 0.4s ease, opacity 0.25s ease;
  }
  .nav-links a:hover { opacity: 0.7; }
  .nav.scrolled .nav-links a { color: var(--text); }

  /* Language switcher, in the primary nav rather than the hero bar: the hero
     bar's two sides are display:none below 720px, and a language switcher that
     only exists on desktop is not a language switcher.
     Font is set on .lang so both halves inherit it - the <a> is sized by
     .nav-links a and the <b> would otherwise keep the inherited body size.
     Current language is full strength, the other is dimmed; all of it is
     opacity, so it survives .nav.scrolled swapping white for ink. */
  .nav-cta .lang {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    font-size: 14px; font-weight: 400; color: var(--white);
    transition: color 0.4s ease;
  }
  .nav.scrolled .nav-cta .lang { color: var(--text); }
  .nav-cta .lang b { font-weight: inherit; }
  .nav-cta .lang a { opacity: 0.5; }
  .nav-cta .lang a:hover { opacity: 1; }
  .nav-cta .lang .sep { opacity: 0.35; }

  .nav-cta { justify-self: end; display: flex; align-items: center; gap: clamp(16px, 1.8vw, 26px); }
  .nav-cta .btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--white);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
  .nav-cta .btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.7);
  }
  .nav.scrolled .nav-cta .btn {
    background: rgba(26, 26, 24, 0.06);
    border-color: rgba(26, 26, 24, 0.35);
    color: var(--text);
  }
  .nav.scrolled .nav-cta .btn:hover {
    background: rgba(26, 26, 24, 0.12);
    border-color: rgba(26, 26, 24, 0.6);
  }

  @media (max-width: 880px) {
    .nav { grid-template-columns: auto 1fr; }
    .nav-links { display: none; }
  }

  /* ========== Hero ========== */
  .hero {
    position: relative;
    height: 280vh;
    padding: 0;
    color: var(--white);
  }
  .hero-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 140px 0 clamp(48px, 7vw, 88px);
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Stands in for the clip's first frame while 4K data arrives: warm shadow on the
       left, sunlit falloff to the right, matching the footage's tonality. */
    background-color: #26241F;
    background-image: radial-gradient(120% 105% at 76% 44%, #b09876 0%, #6b5c46 36%, #2f2b25 74%, #26241F 100%);
  }
  .hero-bg img,
  .hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    display: block;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.35) 100%);
    z-index: -1;
  }

  .hero-top {
    max-width: var(--max-w);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--pad-x);
    text-align: center;
  }

  .hero-eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: clamp(20px, 2.5vw, 30px);
  }

  .hero h1 {
    color: var(--white);
    max-width: 16ch;
    margin: 0 auto;
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(40px, 5.5vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.03em;
  }
  .hero h1 .italic { color: rgba(255,255,255,0.95); }

  .hero-sub {
    margin: clamp(24px, 3vw, 36px) auto 0;
    font-size: clamp(13px, 0.95vw, 14.5px);
    line-height: 1.7;
    color: rgba(255,255,255,0.88);
    max-width: 52ch;
    font-weight: 300;
    letter-spacing: 0.005em;
    text-wrap: balance;
  }

  .hero-ctas {
    margin-top: clamp(32px, 4vw, 48px);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* ========== Flow wrapper: single continuous gradient ========== */
  .flow-green-to-cream {
    position: relative;
    z-index: 2;
    margin-top: -155vh;
    background: var(--bg);
    /* clip, not hidden - hidden would make this a scrollport and kill the pinned intro text */
    overflow: clip;
    /* Hard top edge - the white section cuts straight across the hero, no fade */
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* ========== Offering flow (standalone, below About) - solid green field ========== */
  .flow-offering {
    position: relative;
    z-index: 2; /* keep above the pinned hero video on very tall viewports */
    background: linear-gradient(180deg, #EDF2F5 0%, #B7C8D4 26%, #8098AC 62%, #7C93A7 100%);
    overflow: hidden;
  }

  /* ========== The Invitation ========== */
  
  
  
  .invitation-opener { display: block; }
  .invitation-headline {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(32px, 3.8vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--text);
    margin: 0;
    text-wrap: balance;
  }
  /* Lower masthead - serif lead + two body columns share one aligned grid */
  
  
  .invitation-index {
    display: none;
  }
  
  .invitation-tags {
    margin-top: clamp(20px, 2.4vw, 32px);
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 768px) {
    .invitation-tags { grid-column: 2; margin-top: clamp(18px, 2vw, 28px); }
  }
  .invitation-tags-label {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: clamp(8px, 1vw, 12px);
  }
  
  
  .invitation-tag-index {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    transition: color 0.3s ease;
  }
  .invitation-tag-name {
    flex: 1;
    font-size: clamp(19px, 2vw, 27px);
    font-weight: 300;
    letter-spacing: -0.015em;
    line-height: 1;
  }
  
  
  
  

  /* ========== Editorial section (Areas of Work) ========== */
  .editorial {
    background: var(--bg);
  }
  .editorial .container { max-width: 1320px; }

  .editorial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
  }
  @media (min-width: 1000px) {
    .editorial-grid { grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
  }

  .editorial-left { display: flex; flex-direction: column; gap: 48px; }
  .editorial-left .eyebrow { margin-bottom: 0; }
  
  
  
  
  

  .editorial-right { display: flex; flex-direction: column; gap: 48px; }
  
  
  
  
  

  .editorial-list {
    border-top: 1px solid var(--divider);
  }
  
  
  
  

  /* ========== Two-column generic ========== */
  .two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
  }
  @media (min-width: 960px) {
    .two-col { grid-template-columns: 1.1fr 1fr; }
    .two-col.reverse > :first-child { order: 2; }
  }

  /* Image placeholder w/ decorative corners */
  
  
  
  
  
  
  

  
  

  
  
  
  
  
  
  

  /* ========== About section ========== */
  /* z-index lifts About above the pinned hero video (hero is position:relative and
     its parked video would otherwise bleed through on tall viewports). Mirrors .flow-green-to-cream. */
  .about { background: var(--bg); position: relative; z-index: 2; }
  .about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }
  @media (min-width: 1000px) {
    .about-grid { grid-template-columns: 1.05fr 1fr; }
  }
  .about-text { display: flex; flex-direction: column; gap: 32px; }
  .about-text .eyebrow { margin-bottom: 0; }
  .about-text h2 {
    font-family: var(--sans);
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 1.08;
    max-width: 18ch;
  }
  .about-text h2 .italic { font-weight: 300; }
  
  

  .credentials {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--divider);
  }
  .credentials-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 18px;
  }
  summary.credentials-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color 0.25s ease;
  }
  summary.credentials-label::-webkit-details-marker { display: none; }
  summary.credentials-label:hover { color: var(--text-soft); }
  summary.credentials-label::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    flex: none;
    margin-bottom: 3px;
  }
  .credentials[open] summary.credentials-label::after { transform: rotate(-135deg); margin-bottom: -3px; }
  .credentials[open] .credentials-list { margin-top: 22px; }
  .credentials-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .credentials-list li {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-soft);
    padding-left: 18px;
    position: relative;
  }
  .credentials-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 1px;
    background: var(--text-soft);
    opacity: 0.5;
  }

  /* Stats row */
  .stats {
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--divider);
    padding-top: 32px;
  }
  .stat { padding-right: 24px; border-right: 1px solid var(--divider); }
  .stat:last-child { border-right: 0; padding-left: 24px; padding-right: 0; }
  .stat:not(:first-child):not(:last-child) { padding-left: 24px; }
  .stat-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 300;
    line-height: 1;
    color: var(--text);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }
  .stat-label {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
  }

  /* ========== Offering (content only - gradient lives on .flow-green-to-cream) ========== */
  .offering {
    position: relative;
    color: var(--text);
    background: transparent;
    padding: clamp(40px, 4.6vw, 64px) var(--pad-x) clamp(72px, 10vw, 132px);
  }
  .offering > * { position: relative; z-index: 1; }
  .offering .container { max-width: 1320px; }

  
  
  
  
  

  .offerings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: clamp(56px, 7vw, 88px);
  }
  @media (min-width: 760px) {
    .offerings-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  }

  /* 3D flip wrapper */
  
  .offering-card-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  

  
  
  
  
  

  /* No per-tile tints - the frosted glass picks up the background gradient directly */

  /* Back face content */
  .offering-back-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    justify-content: flex-start;
    padding-top: clamp(18px, 2.2vw, 28px);
  }

  /* Sub-offering block - title + duration tag + description, divided by a thin hairline */
  
  
  
  .offering-sub-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 7px;
  }
  
  .offering-sub-meta {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
  }
  
  .offering-back-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
  }
  
  
  
  

  .offering-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .offering-card-label {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: var(--white);
  }
  .offering-card-eyebrow {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
  }

  
  
  /* Meditate icon has tighter padding in its viewBox - scale it down to match the others visually */
  
  
  /* Lotus icon - thicken the lines slightly with stacked drop-shadows */
  
  

  .offering-card-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Lock the content block so titles align across all cards; the icon claims the rest of the tile */
    min-height: clamp(190px, 17vw, 215px);
  }
  
  .offering-card-rule {
    width: 36px;
    height: 1px;
    background: rgba(255, 255, 255, 0.75);
    border: 0;
    margin: 4px 0 6px;
  }
  
  
  
  
  
  

  
  
  

  /* ========== Bridge ========== */
  .bridge {
    position: relative;
    background: var(--sage-deep);
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
  }
  .bridge-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background-color: #26343F;
  }
  .bridge-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(2.6);
    transform-origin: center 40%;
    display: block;
    will-change: transform;
  }
  .bridge::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(19, 29, 39, 0.45) 0%, rgba(19, 29, 39, 0.55) 50%, rgba(19, 29, 39, 0.66) 100%);
    pointer-events: none;
  }
  .bridge .container { max-width: 960px; text-align: center; position: relative; z-index: 1; }
  .bridge .eyebrow { color: rgba(255,255,255,0.75); margin-bottom: 32px; justify-content: center; display: flex; }
  .bridge h2 {
    color: var(--white);
    font-family: var(--sans);
    font-weight: 300;
    letter-spacing: -0.02em;
    max-width: 26ch;
    margin: 0 auto 40px;
    line-height: 1.1;
  }
  .bridge h2 .italic { font-weight: 300; }
  @media (max-width: 700px) { .bridge h2 br { display: none; } }
  .bridge p + p { margin-top: 1.05em; }
  .bridge p {
    color: rgba(255,255,255,0.9);
    max-width: 86ch;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.85;
    font-weight: 400;
    text-wrap: balance;
  }

  /* ========== Testimonials (asymmetric editorial) ========== */
  .testimonials {
    background: var(--bg);
    padding: clamp(96px, 14vw, 180px) var(--pad-x);
  }
  .testimonials .container { max-width: 1320px; }

  .testimonials-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(56px, 7vw, 96px);
  }
  @media (min-width: 900px) {
    .testimonials-layout {
      grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
      gap: clamp(80px, 9vw, 140px);
      align-items: start;
    }
  }

  .testimonials-aside {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  @media (min-width: 900px) {
    .testimonials-aside {
      position: sticky;
      top: 120px;
    }
  }
  .testimonials-aside h2 {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(32px, 4.2vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    max-width: 12ch;
    color: var(--text);
  }
  .testimonials-aside-note {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    max-width: 28ch;
    line-height: 1.6;
    letter-spacing: 0.005em;
  }

  .testimonials-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .testimonial-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(20px, 3vw, 40px);
    row-gap: 18px;
    padding: clamp(36px, 5vw, 56px) 0;
    border-top: 1px solid var(--divider);
    align-items: start;
  }
  .testimonial-item:last-child { border-bottom: 1px solid var(--divider); }

  .testimonial-num {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--text-muted);
    padding-top: 8px;
  }

  .testimonial-item blockquote {
    grid-column: 2;
    font-family: var(--serif);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.35;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.005em;
    max-width: 44ch;
  }

  .testimonial-cite {
    grid-column: 2;
    font-style: normal;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
  }
  .testimonial-cite .italic {
    font-family: var(--sans);
    font-style: normal;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text);
    font-weight: 500;
    letter-spacing: 0.16em;
  }

  /* ========== Flow wrapper: cream → green (mirrors top flow inverted) ========== */
  .flow-cream-to-green {
    position: relative;
    background: linear-gradient(180deg, #64798E 0%, #55697E 62%, #4C6076 100%);
    overflow: hidden;
  }

  /* ========== The Letter (newsletter + archive) ========== */
  .letter {
    background: var(--bg);
    padding: clamp(80px, 12vw, 160px) var(--pad-x) clamp(96px, 14vw, 180px);
  }
  .letter .container { max-width: 1320px; }

  .letter-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(56px, 7vw, 96px);
  }
  /* Two columns only when there is genuinely room for them: the archive rows
     carry a 140px date rail, so below ~1080px the second track's own
     min-content pushed the grid past the viewport and the page could be
     dragged sideways. */
  @media (min-width: 1080px) {
    .letter-layout {
      grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
      gap: clamp(80px, 9vw, 140px);
      align-items: start;
    }
  }

  /* Per-letter breathing orb - soft, editorial, integrated with the background */
  .letter-orb {
    aspect-ratio: 1;
    width: 100%;
    max-width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .letter-orb-sphere {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: orbBreathe 6s ease-in-out infinite;
    transform-origin: center;
    filter: blur(0.5px);
  }

  .letter-orb-sage .letter-orb-sphere {
    background:
      radial-gradient(circle at 40% 36%, rgba(163, 190, 214, 0.55) 0%, rgba(163, 190, 214, 0.32) 38%, rgba(163, 190, 214, 0.12) 62%, rgba(163, 190, 214, 0) 82%);
  }
  .letter-orb-blue .letter-orb-sphere {
    background:
      radial-gradient(circle at 40% 36%, rgba(141, 176, 196, 0.6) 0%, rgba(141, 176, 196, 0.35) 38%, rgba(141, 176, 196, 0.12) 62%, rgba(141, 176, 196, 0) 82%);
  }

  @keyframes orbBreathe {
    0%, 100% { transform: scale(0.92); opacity: 0.85; }
    50%      { transform: scale(1.04); opacity: 1; }
  }

  .letter-item:hover .letter-orb-sphere { animation-duration: 3.8s; }

  .letter-orb-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    aspect-ratio: 1;
    object-fit: contain;
    pointer-events: none;
    opacity: 0.95;
    animation: orbIconBreathe 6s ease-in-out infinite;
    transform-origin: center;
    /* Default: white. Filter chain mirrors the hover state for smooth interpolation. */
    filter:
      brightness(0)
      saturate(100%)
      invert(100%)
      sepia(0%)
      saturate(100%)
      hue-rotate(0deg)
      brightness(100%)
      contrast(100%);
    transition: filter 2.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* On hover: spiral fades to a softer sage tone */
  .letter-item:hover .letter-orb-sage .letter-orb-icon {
    filter:
      brightness(0)
      saturate(100%)
      invert(72%)
      sepia(12%)
      saturate(420%)
      hue-rotate(178deg)
      brightness(95%)
      contrast(85%);
  }
  /* On hover: waves fade to a muted light blue matching the orb */
  .letter-item:hover .letter-orb-blue .letter-orb-icon {
    filter:
      brightness(0)
      saturate(100%)
      invert(72%)
      sepia(12%)
      saturate(420%)
      hue-rotate(178deg)
      brightness(95%)
      contrast(85%);
  }

  @keyframes orbIconBreathe {
    0%, 100% { transform: translate(-50%, -50%) scale(0.97); opacity: 0.9; }
    50%      { transform: translate(-50%, -50%) scale(1.02); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .letter-orb-sphere,
    .letter-orb-icon { animation: none; }
    .letter-orb-sphere { transform: scale(0.98); }
    .letter-orb-icon { transform: translate(-50%, -50%) scale(1); }
  }

  .letter-meta-text {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
  }

  .letter-form-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1080px) {
    .letter-form-side {
      position: sticky;
      top: 120px;
    }
  }
  .letter-form-side h2 {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(32px, 4.2vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    max-width: 14ch;
    color: var(--text);
  }
  .letter-form-side > p {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-soft);
    line-height: 1.7;
    max-width: 38ch;
    letter-spacing: 0.005em;
  }

  .letter-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
    max-width: 420px;
  }
  .letter-form-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
  }
  .letter-form input[type="email"] {
    flex: 1;
    min-width: 200px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    background: transparent;
    border: 1px solid rgba(26, 26, 24, 0.25);
    border-radius: 999px;
    padding: 14px 20px;
    color: var(--text);
    transition: border-color 0.3s ease, background 0.3s ease;
    letter-spacing: 0.005em;
  }
  .letter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--text);
    background: rgba(255, 255, 255, 0.5);
  }
  .letter-form input[type="email"]::placeholder {
    color: var(--text-muted);
  }
  .letter-form button.btn { flex-shrink: 0; cursor: pointer; }

  /* Language toggle */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  
  
  
  

  
  
  

  
  

  .letter-fine {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-top: 4px;
  }

  .letter-archive {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
  }
  .letter-archive-head { margin-bottom: 0; }

  /* Latest letter card (single preview on homepage) */
  
  
  .letter-latest-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(26, 26, 24, 0.14);
  }
  .letter-latest-label {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: var(--text);
  }
  .letter-latest-eyebrow {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  
  .letter-latest-rule {
    width: 36px;
    height: 1px;
    background: rgba(26, 26, 24, 0.3);
    border: 0;
    margin: 2px 0 4px;
  }
  
  .letter-latest-link {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 8px;
    transition: gap 0.3s ease;
  }
  .letter-latest-link .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
  }
  
  

  
  
  
  

  .letter-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .letter-item {
    border-top: 1px solid var(--divider);
  }
  .letter-item:last-child { border-bottom: 1px solid var(--divider); }
  .letter-item .letter-item-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: clamp(28px, 3.5vw, 40px) 0;
    text-decoration: none;
    color: inherit;
    transition: padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @media (min-width: 760px) {
    .letter-item .letter-item-inner {
      grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
      column-gap: clamp(28px, 4vw, 56px);
      align-items: start;
    }
  }
  .letter-item:hover .letter-item-inner { padding-left: 8px; }

  .letter-meta {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 6px;
  }
  .letter-body { display: flex; flex-direction: column; gap: 8px; }
  .letter-body h3 {
    font-family: var(--serif);
    font-size: clamp(21px, 2vw, 26px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .letter-body p {
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-soft);
    max-width: 48ch;
  }

  .letter-link {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text);
    padding-top: 8px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    transition: gap 0.3s ease;
  }
  .letter-link .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
  }
  .letter-item:hover .letter-link { gap: 10px; }
  .letter-item:hover .letter-link .arrow { transform: translateX(3px); }

  /* ========== Contact (transparent - gradient lives on .flow-cream-to-green) ========== */
  .contact-cta {
    position: relative;
    min-height: 70vh;
    min-height: 70svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(96px, 12vw, 160px) var(--pad-x) clamp(72px, 9vw, 120px);
    text-align: center;
    color: var(--text);
    background: transparent;
  }
  .contact-cta .container { max-width: 1000px; position: relative; }
  .contact-cta h2 {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
  }
  .contact-cta h2 .italic { font-weight: 300; }
  .contact-cta-sub {
    font-size: 16px;
    color: var(--text-soft);
    margin-bottom: 40px;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
  }
  .contact-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  .contact-cta-actions .btn {
    background: rgba(26, 26, 24, 0.04);
    border-color: rgba(26, 26, 24, 0.3);
    color: var(--text);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
  .contact-cta-actions .btn:hover {
    background: rgba(26, 26, 24, 0.1);
    border-color: rgba(26, 26, 24, 0.55);
  }

  .contact-meta {
    margin-top: 28px;
    font-size: 13px;
    color: var(--text-soft);
  }
  .contact-meta a:hover { opacity: 0.7; }

  /* ========== Footer (transparent - gradient lives on .flow-cream-to-green) ========== */
  footer {
    background: transparent;
    color: rgba(255,255,255,0.85);
    padding: clamp(56px, 8vw, 88px) 0 32px;
    position: relative;
  }
  .footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  @media (min-width: 800px) {
    .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 56px; }
  }
  .footer-brand { display: flex; flex-direction: column; gap: 18px; }
  .footer-logo {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white);
  }
  .footer-brand p {
    font-size: 13.5px;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    max-width: 30ch;
  }
  
  
  
  

  
  
  
  

  .footer-bottom {
    margin-top: clamp(48px, 6vw, 72px);
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: rgba(255,255,255,0.55);
  }
  .footer-bottom .italic { color: rgba(255,255,255,0.7); }

  /* ========== Reveal animation ========== */
  /* One curve, one distance for everything that arrives on scroll - the page
     should read as a single hand, not eight. */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 1s cubic-bezier(.22, 1, .36, 1),
      transform 1.05s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
  }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* Stagger children inside a reveal-stagger container */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity .9s cubic-bezier(.22, 1, .36, 1),
      transform .95s cubic-bezier(.22, 1, .36, 1);
  }
  .reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
  /* close enough to read as one gesture, not a queue */
  .reveal-stagger.in > *:nth-child(1) { transition-delay: 0s; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: 0.08s; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: 0.15s; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: 0.21s; }

  /* Word-by-word reveal for headlines */
  
  

  /* Hero video gets a slow, breathing zoom. The video keeps its own transform +
     will-change: without them Safari drops the video layer entirely and only the
     .hero-bg fallback paints. */
  .hero-bg video, .hero-bg img {
    transform: scale(1.02);
    transition: transform 0s;
    will-change: transform;
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-stagger > *,
    .reveal-words .word { opacity: 1; transform: none; transition: none; }
    .hero-bg video, .hero-bg img { transform: none; }
    html { scroll-behavior: auto; }
    .btn:hover svg { transform: none; }
  }

  /* ========== New hero (1B-based, sans headline) ========== */
  .nav { transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease, opacity 0.45s ease, transform 0.45s ease; opacity: 0; transform: translateY(-100%); pointer-events: none; }
  .nav.scrolled { opacity: 1; transform: none; pointer-events: auto; }

  /* Persistent glass nav - blurs on scroll (never a solid white bar), text adapts to the section behind it */
  .nav { opacity: 1; transform: none; pointer-events: auto; }
  .nav-inner { max-width: none; }
  /* Full-bleed alignment - page content edges match the nav (both padded by --pad-x) */
  .container, .container-wide,
  .invitation .container, .offering .container,
  .testimonials .container, .letter .container,
  .contact-cta .container, .bridge .container,
  .footer-inner { max-width: none; }
  .nav.scrolled {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
  }
  /* No border at all, in any state - a transparent 1px edge over the blurred
     backing was catching dark pixels as sections passed under the bar. */
  .nav, .nav.scrolled, .nav.scrolled.nav-light { border-bottom: 0 !important; box-shadow: none !important; }
  /* Fading blur backing - reads as text fixed at the very top, not a defined bar */
  .nav::before {
    content: "";
    position: absolute;
    /* runs past the bar's bottom edge so the blur's own hard boundary is never
       on screen - that seam was the dark line appearing mid-scroll */
    inset: 0 0 -34px 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(16,24,34,0.05) 0%, rgba(16,24,34,0) 72%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(180deg, #000 28%, rgba(0,0,0,0) 92%);
    mask-image: linear-gradient(180deg, #000 28%, rgba(0,0,0,0) 92%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    transform: translateZ(0);
  }
  .nav.scrolled::before { opacity: 1; }
  .nav .logo, .nav .nav-links a, .nav .nav-cta .btn { text-shadow: 0 1px 6px rgba(12,18,26,0.16); }
  .nav.scrolled .logo, .nav.scrolled .nav-links a { color: var(--white); }
  .nav.scrolled .nav-cta .btn { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.45); color: var(--white); }
  .nav.scrolled .nav-cta .btn:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.78); }
  /* Over the pale (white → light-blue) sections: frosted light glass + dark text */
  .nav.scrolled.nav-light { background: transparent; border-bottom: none; }
  .nav.scrolled.nav-light::before { background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 72%); }
  .nav.scrolled.nav-light .logo, .nav.scrolled.nav-light .nav-links a { text-shadow: none; }
  .nav.scrolled.nav-light .logo, .nav.scrolled.nav-light .nav-links a { color: var(--text); }
  .nav.scrolled.nav-light .nav-cta .btn { background: rgba(26,26,24,0.05); border-color: rgba(26,26,24,0.30); color: var(--text); }
  .nav.scrolled.nav-light .nav-cta .btn:hover { background: rgba(26,26,24,0.12); border-color: rgba(26,26,24,0.55); }

  .nhero { position: relative; isolation: isolate; }
  .nhero-scrim {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(15,23,32,0.30) 0%, rgba(15,23,32,0) 15%),
      linear-gradient(0deg, rgba(15,23,32,0.34) 0%, rgba(15,23,32,0) 22%);
  }
  .hero-top-group { position: absolute; inset: 0; z-index: 12; will-change: transform, opacity; }
  .nh-wordmark, .nh-eyebrow, .nh-title, .nh-para, .nh-bar { text-shadow: 0 1px 22px rgba(15,23,32,0.45); }
  .nh-bar { border-top: none; justify-content: space-between; }
  .nh-bar::before { content: ""; position: absolute; top: 0; left: clamp(24px, 4vw, 60px); right: clamp(24px, 4vw, 60px); height: 1px; background: rgba(246,242,233,0.5); }
  .nh-bar-side { display: flex; align-items: center; gap: clamp(14px, 3vw, 40px); }
  .nhero { background: var(--bg); }
  .nhero::before { display: none; }
  .hero-stage { position: absolute; inset: 0; z-index: 0; will-change: opacity; }
  .hero-fg { position: absolute; inset: 0; z-index: 12; will-change: transform, opacity; }
  
  .nh-cards {
    position: absolute; top: clamp(22px, 2.4vw, 26px); right: clamp(16px, 2.4vw, 30px); z-index: 30;
    display: flex; flex-direction: column; gap: 10px; width: 232px;
  }
  .nh-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; border-radius: 13px;
    font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    background: rgba(18,26,34,0.42); border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: var(--white); transition: background 0.25s ease, transform 0.25s ease;
  }
  .nh-card:hover { background: rgba(18,26,34,0.62); transform: translateY(-1px); }
  .nh-card .plus { color: rgba(246,242,233,0.6); }
  .nh-card-lead { background: rgba(246,242,233,0.92); color: var(--text); border-color: rgba(255,255,255,0.5); font-weight: 500; justify-content: flex-start; gap: 12px; }
  .nh-card-lead img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }

  .nh-copy { position: absolute; z-index: 12; left: clamp(24px, 4vw, 60px); bottom: clamp(100px, 12.5vh, 140px); max-width: 64vw; }
  .nh-eyebrow { font-family: var(--sans); font-weight: 500; font-size: clamp(10px, 0.9vw, 12px); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(246,242,233,0.86); margin-bottom: clamp(16px, 2vw, 26px); }
  .nh-title { font-family: var(--sans); font-weight: 300; font-size: clamp(46px, 7.4vw, 120px); line-height: 0.95; letter-spacing: -0.03em; color: var(--white); }

  .nh-para { position: absolute; z-index: 12; right: clamp(24px, 3vw, 46px); bottom: clamp(100px, 12.5vh, 140px); max-width: 33ch; font-family: var(--sans); font-weight: 400; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.62; color: rgba(246,242,233,0.94); }

  .nh-bar {
    position: absolute; z-index: 20; left: 0; right: 0; bottom: clamp(16px, 2.4vh, 30px);
    display: flex; align-items: center; gap: clamp(14px, 3vw, 40px);
    padding: 16px clamp(24px, 4vw, 60px);
    border-top: none;
    font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(246,242,233,0.82);
    background: none;
  }
  .nh-bar .dot { color: var(--clay); }
  .nh-bar .grow { flex: 1; }
  .nh-bar .lang b { color: #fff; font-weight: 500; }
  .nh-bar a { transition: color 0.25s ease; }
  .nh-bar a:hover { color: #fff; }

  @media (max-width: 860px) {
    .nh-cards { display: none; }
    .nh-para { display: none; }
    .nh-copy { max-width: calc(100% - 48px); }
    .nh-bar { gap: 14px; flex-wrap: wrap; font-size: 10px; }
  }

  /* ========== V12 · One continuous flow: white → slate blue ========== */
  /* Background chain - each section hands its exact end color to the next */
  .about { background: linear-gradient(180deg, var(--bg) 0%, #EDF2F5 100%); }
  .testimonials { background: linear-gradient(180deg, #7C93A7 0%, #74899D 100%); }
  .letter { background: linear-gradient(180deg, #74899D 0%, #64798E 100%); }

  /* Offerings - head sits on the pale top of the flow */
  
  
  
  

  /* Testimonials - white on slate */
  .testimonials .eyebrow { color: rgba(255,255,255,0.8); }
  .testimonials-aside h2 { color: var(--white); }
  .testimonials-aside-note { color: rgba(255,255,255,0.72); }
  .testimonial-num { color: rgba(255,255,255,0.66); }
  .testimonial-item { border-top-color: rgba(255,255,255,0.24); }
  .testimonial-item:last-child { border-bottom-color: rgba(255,255,255,0.24); }
  .testimonial-item blockquote { color: rgba(255,255,255,0.96); }
  .testimonial-cite { color: rgba(255,255,255,0.66); }
  .testimonial-cite .italic { color: var(--white); }

  /* Letter - white on deeper slate */
  .letter .eyebrow { color: rgba(255,255,255,0.78); }
  .letter-form-side h2 { color: var(--white); }
  .letter-form-side > p { color: rgba(255,255,255,0.85); }
  .letter-fine { color: rgba(255,255,255,0.55); }
  .letter-form input[type="email"] { border-color: rgba(255,255,255,0.42); color: var(--white); }
  .letter-form input[type="email"]:focus { border-color: var(--white); background: rgba(255,255,255,0.08); }
  .letter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.6); }
  .letter .btn-glass-dark { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); color: var(--white); }
  .letter .btn-glass-dark:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.8); }
  
  
  
  
  .letter-meta-text { color: rgba(255,255,255,0.66); }
  .letter-body h3 { color: var(--white); }
  .letter-body p { color: rgba(255,255,255,0.78); }
  .letter-item { border-top-color: rgba(255,255,255,0.22); }
  .letter-item:last-child { border-bottom-color: rgba(255,255,255,0.22); }
  
  
  .letter-link { color: var(--white); }

  /* Contact + footer - deepest slate */
  .contact-cta { color: var(--white); }
  .contact-cta h2 { color: var(--white); }
  .contact-cta-sub { color: rgba(255,255,255,0.85); }
  .contact-cta-actions .btn { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.45); color: var(--white); }
  .contact-cta-actions .btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.8); }
  .contact-meta { color: rgba(255,255,255,0.7); }

  /* Drift motion */
  .img-frame, .letter-orb { will-change: transform; }

  /* ===================================================================
     TEMP · Full off-white background.
     Remove this whole block (and restore the nav lightEnd line in JS)
     to bring back the slate-blue "V12" flow. Every colored section is
     flattened to off-white and all white-on-dark text / icons / borders
     are flipped to the light palette so nothing disappears.
     =================================================================== */
  .flow-offering,
  .about,
  .testimonials,
  .letter,
  .flow-cream-to-green { background: var(--bg) !important; }

  /* ---- Offerings: mesh grain gradient field - pale cream bloom in the
         top-left dissolving into deep slate, with film grain over the top.
         Top and bottom edges feather to off-white so the section melts into
         the off-white sections above and below. ---- */
  .flow-offering {
    background:
      linear-gradient(180deg, #FDFDFC 0%, rgba(253,253,252,0) 56px),
      linear-gradient(0deg, #FDFDFC 0%, rgba(253,253,252,0) 120px),
      radial-gradient(62% 46% at 6% 10%, rgba(240,236,214,0.95) 0%, rgba(240,236,214,0) 68%),
      radial-gradient(46% 34% at 30% 2%, rgba(252,252,248,0.85) 0%, rgba(252,252,248,0) 70%),
      radial-gradient(48% 22% at 0% 16%, rgba(226,225,203,0.5) 0%, rgba(226,225,203,0) 74%),
      radial-gradient(70% 52% at 78% 8%, rgba(58,86,74,0.75) 0%, rgba(58,86,74,0) 74%),
      radial-gradient(58% 46% at 96% 62%, rgba(30,56,46,0.85) 0%, rgba(30,56,46,0) 76%),
      radial-gradient(64% 50% at 46% 96%, rgba(38,66,54,0.8) 0%, rgba(38,66,54,0) 78%),
      radial-gradient(40% 30% at 22% 74%, rgba(122,140,110,0.45) 0%, rgba(122,140,110,0) 72%),
      linear-gradient(150deg, #6E7A55 0%, #47623F 26%, #33543F 58%, #2A4739 100%) !important;
  }
  .flow-offering::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }

  /* ---- Offerings: light glass cards, dark ink ---- */
  
  
  
  .offering-card-eyebrow { color: var(--text-muted); }
  .offering-card-label,
  .offering-card h3,
  .offering-sub-title,
  .offering-card-link,
  .offering-card:hover .offering-card-link { color: var(--text); }
  
  .offering-sub-meta,
  .offering-back-row dt { color: var(--text-muted); }
  .offering-card-rule { background: rgba(26,26,24,0.28); }
  .offering-card-top,
  .offering-sub,
  .offering-back-row { border-color: rgba(26,26,24,0.12); }
  
  
  
  
  

  /* ---- Offerings sit on the dark mesh field again: white ink, glass cards ---- */
  .offering { padding-top: clamp(88px, 9vw, 132px); }
  
  
  
  /* Specular sweep + fine grain across the glass */
  
  
  .offering-card-eyebrow { color: rgba(255,255,255,0.8); }
  .offering-card-label,
  .offering-card h3,
  .offering-sub-title,
  .offering-card-link,
  .offering-card:hover .offering-card-link { color: var(--white); }
  
  .offering-sub-meta,
  .offering-back-row dt { color: rgba(255,255,255,0.8); }
  .offering-card-rule { background: rgba(255,255,255,0.4); }
  .offering-card-top,
  .offering-sub,
  .offering-back-row { border-color: rgba(255,255,255,0.2); }
  
  
  
  

  /* ===================================================================
     OFFERINGS COLOUR VERSIONS - A #C9E0DD / B #B9BBB2 / C #7C8570
     Same mesh-grain construction each time; only the palette and the ink
     change. Top and bottom edges still feather to off-white.
     =================================================================== */

  /* ---- Colour fields ---- */
  .flow-offering[data-offer-theme] { overflow: hidden; }
  .flow-offering[data-offer-theme="aqua"] { background: #35595B !important; }
  .flow-offering[data-offer-theme="stone"] { background: #6E6F66 !important; }
  .flow-offering[data-offer-theme="sage"] { background: #4A5340 !important; }

  /* ---- Edge treatments -
     bleed:  crisp full-width chapter block, editorial hard cut;
     expand: enters as an inset rounded panel and grows to full bleed as you
             scroll into it, shrinking back as you leave (clip-path, paint-only);
     morph:  no edges at all - the colour itself arrives and leaves with the
             scroll, so the page stays one continuous surface. ---- */
  .flow-offering[data-offer-edge="morph"][data-offer-theme] {
    background: var(--offer-morph, #FDFDFC) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .flow-offering[data-offer-edge="morph"][data-offer-theme="aqua"] { --offer-morph: #35595B; }
    .flow-offering[data-offer-edge="morph"][data-offer-theme="stone"] { --offer-morph: #6E6F66; }
    .flow-offering[data-offer-edge="morph"][data-offer-theme="sage"] { --offer-morph: #4A5340; }
  }

  /* Slow ambient light drifting across the field - the block breathes while
     you scroll through it. */
  .flow-offering[data-offer-theme]::before {
    display: block;
    inset: -15%;
    opacity: 0.32;
    mix-blend-mode: soft-light;
    background-image:
      radial-gradient(42% 34% at 26% 28%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 70%),
      radial-gradient(36% 30% at 74% 62%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%),
      radial-gradient(30% 26% at 52% 86%, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%);
    background-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
    animation: offerGlow 30s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes offerGlow {
    0%   { transform: translate3d(-4%, -3%, 0) scale(1); }
    100% { transform: translate3d(4%, 3%, 0) scale(1.08); }
  }
  @media (prefers-reduced-motion: reduce) {
    .flow-offering[data-offer-theme]::before { animation: none; }
  }

  /* ---- All three versions: white ink, tiles are open glass.
         No fill panel - just a hairline outline and a blur that pulls the
         field colour down enough for white type to hold. ---- */
  
  

  
  
  
  
  
  .flow-offering[data-offer-theme] .offering-card-label,
  .flow-offering[data-offer-theme] .offering-card h3,
  .flow-offering[data-offer-theme] .offering-sub-title,
  .flow-offering[data-offer-theme] .offering-card-link,
  .flow-offering[data-offer-theme] .offering-card:hover .offering-card-link { color: var(--white); }
  
  .flow-offering[data-offer-theme] .offering-card-eyebrow,
  .flow-offering[data-offer-theme] .offering-sub-meta,
  .flow-offering[data-offer-theme] .offering-back-row dt { color: rgba(255,255,255,0.82); }
  .flow-offering[data-offer-theme] .offering-card-rule { background: rgba(255,255,255,0.45); }
  .flow-offering[data-offer-theme] .offering-card-top,
  .flow-offering[data-offer-theme] .offering-sub,
  .flow-offering[data-offer-theme] .offering-back-row,
  .flow-offering[data-offer-theme] .offering-back-row:last-child { border-color: rgba(255,255,255,0.24); }
  
  
  

  /* ---- Principles strip - same field, sits below the offerings ---- */
  .principles { position: relative; padding: 0 var(--pad-x) clamp(96px, 12vw, 160px); }
  .principles > * { position: relative; z-index: 1; }
  .principles .container { max-width: 1320px; margin: 0 auto; }
  .principles-eyebrow { display: block; margin-bottom: clamp(28px, 3.5vw, 44px); color: rgba(255,255,255,0.82); }
  .principles-eyebrow::before { color: rgba(255,255,255,0.82); }
  .principles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,0.24);
    border-bottom: 1px solid rgba(255,255,255,0.24);
  }
  
  
  
  
  
  .principle-num {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.55);
    margin-bottom: clamp(32px, 4.5vw, 56px);
  }
  .principles-grid[hidden] { display: none !important; }
  
  
  @media (max-width: 960px) {
    .principles-grid { grid-template-columns: 1fr 1fr; }
    
    
    
  }
  @media (max-width: 560px) {
    .principles-grid { grid-template-columns: 1fr; }
    
    
  }


  /* B · Index rows - editorial ledger, hairline rules like the principles strip */
  .offerings-index { border-top: 1px solid rgba(255,255,255,0.24); }
  .offx-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.5fr) 1.5fr 1fr auto;
    gap: clamp(24px, 3.5vw, 64px);
    align-items: start;
    padding: clamp(40px, 5vw, 72px) 0;
    border-bottom: 1px solid rgba(255,255,255,0.24);
    color: var(--white);
  }
  .offx-head { display: flex; flex-direction: column; gap: 10px; }
  .offx-main h3 { font-family: var(--sans); font-weight: 300; font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -0.02em; line-height: 1.05; color: var(--white); margin: 0 0 14px; }
  .offx-main p { font-family: var(--sans); font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.85); max-width: 44ch; margin: 0; }
  .offx-meta { list-style: none; margin: 6px 0 0; padding: 0; }
  .offx-meta li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
  .offx-meta li:first-child { padding-top: 0; }
  .offx-meta li:last-child { border-bottom: 0; }
  .offx-name { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--white); }
  .offx-time { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); padding-top: 6px; white-space: nowrap; }
  .offx-link, .offf-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    padding: 12px 22px;
    white-space: nowrap;
    transition: background 0.3s ease, border-color 0.3s ease;
  }
  .offx-link { justify-self: end; margin-top: 6px; }
  .offx-link:hover, .offf-cta:hover { background: rgba(255,255,255,0.15); border-color: var(--white); }
  @media (max-width: 900px) {
    .offx-row { grid-template-columns: 1fr; gap: 20px; }
    .offx-link { justify-self: start; }
  }

  /* C · Feature panels - two wide glass chapters, alternating */
  .offerings-feature { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
  .offf-panel {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(28px, 4vw, 72px);
    padding: clamp(32px, 4vw, 60px);
    border: 1px solid rgba(255,255,255,0.42);
    border-radius: 8px;
    background: linear-gradient(155deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 46%, rgba(255,255,255,0.01) 100%);
    backdrop-filter: blur(18px) saturate(1.15) brightness(0.82);
    -webkit-backdrop-filter: blur(18px) saturate(1.15) brightness(0.82);
    box-shadow: 0 16px 40px rgba(30,40,34,0.14), inset 0 1px 0 rgba(255,255,255,0.34);
    color: var(--white);
  }
  .offf-copy { display: flex; flex-direction: column; align-items: flex-start; }
  .offf-top { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: clamp(24px, 3vw, 44px); }
  .offf-copy h3 { font-family: var(--sans); font-weight: 300; font-size: clamp(32px, 3.4vw, 52px); letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 16px; color: var(--white); }
  .offf-copy > p { font-family: var(--sans); font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,0.85); margin: 0 0 clamp(24px, 3vw, 40px); max-width: 40ch; }
  .offf-cta { margin-top: auto; }
  .offf-details { display: flex; flex-direction: column; gap: clamp(22px, 2.5vw, 34px); border-left: 1px solid rgba(255,255,255,0.2); padding-left: clamp(24px, 3vw, 48px); }
  .offf-sub h4 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2vw, 25px); margin: 0; color: var(--white); }
  .offf-meta { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin: 6px 0 10px; }
  .offf-sub p { font-family: var(--sans); font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.8); margin: 0; }
  .offf-flip .offf-copy { order: 2; }
  .offf-flip .offf-details { border-left: 0; border-right: 1px solid rgba(255,255,255,0.2); padding-left: 0; padding-right: clamp(24px, 3vw, 48px); }

  /* Tabs variant - two formats, click through */
  .pt-side { display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,0.2); padding-left: clamp(24px, 3vw, 48px); }
  .pt-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 2.5vw, 32px); }
  .pt-tab {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
  .pt-tab:hover { border-color: rgba(255,255,255,0.7); color: var(--white); }
  .pt-tab.active { background: rgba(255,255,255,0.92); border-color: transparent; color: #333A33; }
  .pt-pane { display: none; }
  .pt-pane.active { display: block; animation: ptFade 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes ptFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .pt-pane p { max-width: 46ch; }

  /* Steps variant - two formats as expandable rows, one always open */
  .pacc-list { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,0.2); padding-left: clamp(24px, 3vw, 48px); }
  
  
  .pacc-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 18px 0;
    color: var(--white);
  }
  .pacc-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2vw, 25px); }
  .pacc-meta { margin: 0; }
  .pacc-icon { font-family: var(--sans); font-weight: 300; font-size: 18px; line-height: 1; color: rgba(255,255,255,0.7); transition: transform 0.4s ease; }
  
  .pacc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
  .pacc-body > div { overflow: hidden; }
  
  .pacc-body p { font-family: var(--sans); font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.85); margin: 0; padding-bottom: 20px; max-width: 46ch; }
  @media (max-width: 900px) {
    .offf-panel { grid-template-columns: 1fr; }
    .offf-flip .offf-copy { order: 0; }
    .offf-details, .offf-flip .offf-details,
    .pt-side, .pacc-list {
      border-left: 0; border-right: 0;
      padding-left: 0; padding-right: 0;
      border-top: 1px solid rgba(255,255,255,0.2);
      padding-top: 24px;
    }
    
  }

  /* ========== Offerings - integrated into the field (no card) ========== */
  .offerings-flow { max-width: 1120px; margin: 0 auto; }
  .swap-host { position: relative; display: flex; flex-direction: column; }

  /* The two names sit on one hairline and are the switch */
  .off-switch {
    display: flex;
    align-items: flex-end;
    gap: clamp(26px, 4vw, 56px);
    border-bottom: 1px solid rgba(255,255,255,0.28);
    padding-bottom: 18px;
    margin-bottom: clamp(38px, 4.6vw, 66px);
  }
  
  
  
  .off-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(13px, 1.1vw, 16px);
    color: rgba(255,255,255,0.7);
    transform: translateY(-0.62em);
  }
  
  .off-word {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(19px, 1.85vw, 27px);
    letter-spacing: -0.014em;
    line-height: 1;
    white-space: nowrap;
  }
  
  
  .off-switch-meta {
    margin-left: auto;
    padding-bottom: 5px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
  }

  /* Panes - content sits straight on the field */
  .swap-body { display: none; }
  .swap-body.active {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(34px, 5.5vw, 104px);
    animation: offRise 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes offRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .swap-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
  .swap-label {
    display: block;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.58);
    margin-bottom: clamp(16px, 1.8vw, 24px);
  }
  .swap-lede {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(19px, 1.75vw, 24px);
    line-height: 1.5;
    color: rgba(255,255,255,0.96);
    margin: 0 0 clamp(18px, 2vw, 26px);
    max-width: 34ch;
    text-wrap: pretty;
  }
  .swap-lede em { font-style: italic; }
  .swap-para {
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.9;
    color: rgba(255,255,255,0.78);
    margin: 0 0 15px;
    max-width: 66ch;
    text-wrap: pretty;
  }
  .swap-para:last-of-type { margin-bottom: 0; }
  .off-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(28px, 3.2vw, 44px);
    padding-bottom: 9px;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--white);
  }
  .off-cta::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.45);
    transition: background 0.35s ease;
  }
  .off-cta:hover::after { background: var(--white); }
  .off-cta .arrow { display: inline-block; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
  .off-cta:hover .arrow { transform: translateX(6px); }

  /* Formats - a quiet ledger, held by a single hairline */
  .swap-formats {
    min-width: 0;
    width: 100%;
    align-self: start;
    border-left: 1px solid rgba(255,255,255,0.18);
    padding-left: clamp(24px, 3.5vw, 56px);
  }
  .swap-formats-label {
    display: block;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 16px;
  }
  
  
  
  
  
  
  
  
  
  

  @media (max-width: 900px) {
    .off-switch { flex-wrap: wrap; gap: 20px 28px; }
    .off-switch-meta { display: none; }
    .swap-body.active { grid-template-columns: 1fr; gap: 34px; }
    .swap-formats {
      border-left: 0;
      padding-left: 0;
      border-top: 1px solid rgba(255,255,255,0.2);
      padding-top: 26px;
    }
  }


  /* ---- Testimonials ---- */
  .testimonials .eyebrow { color: var(--text-muted); }
  .testimonials-aside h2,
  .testimonial-item blockquote,
  .testimonial-cite .italic { color: var(--text); }
  .testimonials-aside-note { color: var(--text-soft); }
  .testimonial-num,
  .testimonial-cite { color: var(--text-muted); }
  .testimonial-item,
  .testimonial-item:last-child { border-color: var(--divider); }

  /* ---- Letter ---- */
  .letter .eyebrow { color: var(--text-muted); }
  .letter-form-side h2,
  .letter-body h3,
  .letter-see-all,
  .letter-link,
  .letter-lang[data-state="en"] [data-side="en"],
  .letter-lang[data-state="de"] [data-side="de"] { color: var(--text); }
  .letter-form-side > p,
  .letter-body p { color: var(--text-soft); }
  .letter-fine,
  .letter-lang-label,
  .letter-meta-text { color: var(--text-muted); }
  
  .letter-item,
  .letter-item:last-child { border-color: var(--divider); }
  .letter-form input[type="email"] { border-color: rgba(26,26,24,0.28); color: var(--text); }
  .letter-form input[type="email"]:focus { border-color: var(--text); background: rgba(26,26,24,0.03); }
  .letter-form input[type="email"]::placeholder { color: var(--text-muted); }
  .letter .btn-glass-dark { background: rgba(26,26,24,0.04); border-color: rgba(26,26,24,0.3); color: var(--text); }
  .letter .btn-glass-dark:hover { background: rgba(26,26,24,0.1); border-color: rgba(26,26,24,0.55); }
  
  

  /* ---- Contact + footer ---- */
  .contact-cta,
  .contact-cta h2 { color: var(--text); }
  .contact-cta-sub { color: var(--text-soft); }
  .contact-cta-actions .btn { background: rgba(26,26,24,0.04); border-color: rgba(26,26,24,0.3); color: var(--text); }
  .contact-cta-actions .btn:hover { background: rgba(26,26,24,0.1); border-color: rgba(26,26,24,0.55); }
  .contact-meta { color: var(--text-muted); }
  footer { color: var(--text-soft); }
  .footer-logo,
  .footer-bottom .italic { color: var(--text); }
  .footer-brand p,
  .footer-col a { color: var(--text-soft); }
  
  
  
  .footer-bottom { color: var(--text-muted); border-top-color: var(--divider); }

  /* Minimal footer: name on one side, a single row of links on the other */
  footer { padding: clamp(40px, 5vw, 60px) 0 26px; }
  .footer-min {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 16px 44px;
  }
  .footer-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
  .footer-nav a {
    font-family: var(--sans); font-size: 13.5px; line-height: 1.4;
    color: var(--text-soft); transition: color 0.25s ease;
  }
  .footer-nav a:hover { color: var(--text); }
  .footer-right {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 14px 30px;
  }
  .footer-icons { display: flex; align-items: center; gap: 14px; }
  .footer-icons a { color: var(--text-muted); transition: color 0.25s ease; }
  .footer-icons a:hover { color: var(--text); }
  .footer-icons svg { width: 18px; height: 18px; display: block; }
  .footer-bottom { margin-top: clamp(26px, 3vw, 34px); padding-top: 18px; }

  @media (max-width: 720px) {
    .offering-intro br { display: none; }
  }
  .offering-intro {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: var(--text-muted);
    max-width: 68ch;
    margin: 0 auto;
    text-wrap: pretty;
  }

/* ===================================================================
     OFFERINGS - restored from v11: solid deep-green field, frosted glass
     flip cards, white ink. Supersedes every later offering treatment
     (off-white mesh, colour themes, white field / doors).
     =================================================================== */
  .flow-offering {
    position: relative;
    z-index: 2;
    background: #2A3128 !important;
    overflow: hidden;
  }
  .flow-offering::before { display: none !important; }

  .offering {
    padding: clamp(48px, 6vw, 80px) var(--pad-x) clamp(96px, 14vw, 180px) !important;
  }
  
  

  
  
  

  
  .offering-card-eyebrow { color: rgba(255,255,255,0.55) !important; }
  .offering-card-label,
  .offering-card h3,
  .offering-sub-title,
  .offering-card-link,
  .offering-card:hover .offering-card-link { color: var(--white) !important; }
  
  .offering-sub-meta,
  .offering-back-row dt { color: rgba(255,255,255,0.62) !important; }
  .offering-card-rule { background: rgba(255,255,255,0.75) !important; }
  .offering-card-top { border-color: rgba(255,255,255,0.18) !important; }


/* ---------- 2/13 ---------- */
/* ===== Introduction - statement runs wide, small text flows on (v24) ===== */
.iv2p-grid { display: block; }
.iv2p-text { max-width: none; }
.iv2d .iv-lead { max-width: 38ch; font-size: clamp(22px, 2.55vw, 39px) !important; line-height: 1.16 !important; }
.iv-tail {
  font-family: var(--sans); font-size: clamp(27px, 3.35vw, 51px); font-weight: 300;
  line-height: 1.1; letter-spacing: -.025em; color: var(--text);
  margin: clamp(26px, 2.8vw, 42px) 0 0;
  max-width: 36ch; text-wrap: pretty;
}
@media (max-width: 899px) { .iv-tail { margin-left: 0; max-width: none; } }
[data-iv-ink] .w { display: inline-block; will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) { [data-iv-ink] .w { opacity: 1 !important; transform: none !important; } }
.iv2p-text { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  [data-iv-rise] { opacity: 1 !important; transform: none !important; }
  .iv2p-text { transform: none !important; }
}


/* ---------- 3/13 ---------- */
/* ===== About - one side stays, the other scrolls past (v25) ===== */
.ab-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(44px, 6vw, 80px); align-items: start;
}
@media (min-width: 1000px) {
  .ab-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(42px, 5vw, 90px); }
  .ab-stay { position: sticky; top: clamp(56px, 8vh, 96px); align-self: start; }
}
.ab-head { display: flex; flex-direction: column; gap: clamp(10px, 1.1vw, 14px); margin-bottom: 0; }
.ab-head + .ab-para { margin-top: clamp(-10px, -0.7vw, -4px); }
.ab-head .about-lead-serif { margin: 0; }
.ab-portrait { margin: 0; overflow: hidden; }
.ab-portrait img {
  display: block; width: 100%; margin-left: auto; aspect-ratio: 3 / 5.6; height: auto;
  max-height: clamp(520px, 88vh, 1020px);
  object-fit: cover; object-position: 50% 38%;
  transform: scale(1.02); transition: transform 1.8s cubic-bezier(.22,1,.36,1);
}
.ab-scroll { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); }
.ab-para { max-width: 60ch; }
.ab-pair { margin: clamp(14px, 2vw, 28px) 0 clamp(18px, 2.4vw, 34px); }
.ab-para:last-of-type { margin-top: clamp(8px, 1.4vw, 20px); }
.ab-para p {
  font-family: var(--sans); font-weight: 300; font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.75; color: var(--text-soft); margin: 0; text-wrap: pretty;
}
.ab-shot { margin: 0; }
.ab-shot img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transform: scale(1.04); transition: transform 1.8s cubic-bezier(.22,1,.36,1);
}
.ab-shot:nth-of-type(even) img { aspect-ratio: 5 / 4; }
.ab-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.5vw, 22px); align-items: start; }
.ab-pair .ab-shot { width: 100% !important; }
.ab-pair .ab-shot img { aspect-ratio: 3 / 4 !important; }
.ab-pair .ab-shot:last-child { margin-top: 0; }
.ab-shot.is-in img { transform: scale(1); }
.ab-shot figcaption {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
  margin-top: 12px;
}
[data-ab-rise] {
  opacity: 0;
  transform: translateY(var(--ab-py, 0px)) translateY(24px);
  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1.05s cubic-bezier(.22,1,.36,1);
}
[data-ab-rise].is-in { opacity: 1; transform: translateY(var(--ab-py, 0px)); }
@media (max-width: 999px) {
  .ab-stay { order: -1; }
  .ab-portrait img { margin-left: 0; }
  .ab-shot { width: 100% !important; align-self: stretch !important; }
  .ab-pair { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ab-pair .ab-shot:last-child { margin-top: 0; }
  [data-ab-rise] { --ab-py: 0px !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ab-rise] { opacity: 1 !important; transform: none !important; }
  .ab-shot img, .ab-portrait img { transform: none !important; }
}


/* ---------- 4/13 ---------- */
/* HERO OPTION 1E · centered, small */
.nhero-scrim {
  background:
    radial-gradient(66% 56% at 50% 48%, rgba(15,23,32,0.40) 0%, rgba(15,23,32,0) 72%),
    linear-gradient(180deg, rgba(15,23,32,0.30) 0%, rgba(15,23,32,0) 16%),
    linear-gradient(0deg, rgba(15,23,32,0.38) 0%, rgba(15,23,32,0) 22%);
}
.nhero .nh-copy {
  inset: 0; left: 0; right: 0; top: 0; bottom: 0; max-width: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(16px, 1.9vw, 26px); padding: 0 clamp(24px, 10vw, 180px);
}
.nhero .nh-eyebrow { margin-bottom: 0; font-size: clamp(9.5px, 0.8vw, 11px); letter-spacing: 0.3em; }
.nhero .nh-title {
  font-size: clamp(27px, 3.35vw, 51px); line-height: 1.19; letter-spacing: -0.018em;
  max-width: 24ch; text-wrap: pretty; font-weight: 300;
}
.nhero .nh-title .q-serif {
  font-family: var(--sans);
  font-style: normal; font-weight: 300; letter-spacing: inherit;
  font-size: inherit;
}
.nhero .nh-para { display: none; }
@media (max-width: 860px) {
  .nhero .nh-copy { padding: 0 28px; }
  .nhero .nh-title { font-size: clamp(25px, 6.2vw, 34px); max-width: 22ch; }
}
/* Invitation · all text left, offering sneak peek right */


.invitation-peek { display: flex; flex-direction: column; gap: 14px; }
.invitation-peek-label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted);
  padding-bottom: 2px;
}


.peek-a { background: linear-gradient(165deg, #6C7B60 0%, #5B6A51 100%); box-shadow: 0 18px 38px -24px rgba(84,96,74,0.8); }
.peek-b { background: linear-gradient(165deg, #566A5A 0%, #45584A 100%); box-shadow: 0 18px 38px -24px rgba(70,88,75,0.8); }
.peek-a:hover { box-shadow: 0 28px 50px -24px rgba(84,96,74,0.85); }
.peek-b:hover { box-shadow: 0 28px 50px -24px rgba(70,88,75,0.85); }
.peek-icon { width: clamp(38px, 3.6vw, 50px); height: clamp(38px, 3.6vw, 50px); display: flex; align-items: center; justify-content: center; }
.peek-icon img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.92; }
.peek-icon img[src="assets/icons/massage.svg"] { width: 128%; max-width: none; height: auto; }
.peek-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.peek-num { font-family: var(--serif); font-style: italic; font-size: 13px; color: rgba(255,255,255,0.9); }
.peek-name { font-family: var(--sans); font-weight: 400; font-size: clamp(18px, 1.55vw, 22px); letter-spacing: -0.015em; line-height: 1.1; }
.peek-line { font-family: var(--sans); font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.84); }
.peek-arrow { font-size: 15px; color: rgba(255,255,255,0.75); transition: transform 0.4s cubic-bezier(.2,.7,.2,1), color 0.3s ease; }

.peek-note { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

/* ---- Tighter transition: Invitation → About ---- */

.about { padding-top: clamp(56px, 6vw, 88px) !important; }

/* Card height is driven by the TALLER of the two faces instead of a fixed
   3:4 box: both faces share one grid cell, so the flip still works but
   neither front nor back can be clipped by overflow:hidden. */

.offering-card-inner {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100%;
}

/* Icon band is bounded so the square SVG can't drive card height now that
   the card is content-sized; text then lands near v11's 3:4 proportion. */





/* Headline deleted - the body copy now carries the section as a statement */




/* ---- Invitation: statement copy sits wider, starts further left ---- */




/* ---- Invitation: two-tier scale - lead statement large, follow-up small ---- */




/* ---- Peek cards: light card, category row + plus, icon tile beside copy ---- */
.invitation-peek { gap: 12px !important; }
.peek-card,
.peek-a, .peek-b {
  display: block !important;
  background: var(--white, #fff) !important;
  color: var(--text) !important;
  border: 1px solid rgba(42,49,40,0.07) !important;
  border-radius: 18px !important;
  padding: 16px 18px 20px !important;
  box-shadow: 0 1px 2px rgba(42,49,40,0.04) !important;
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(.2,.7,.2,1) !important;
}

.peek-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.peek-cat {
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0.01em; color: var(--text-muted);
}
.peek-plus {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(42,49,40,0.05); color: var(--text);
  font-size: 16px; line-height: 1; font-weight: 300;
  transition: background 0.3s ease;
}

.peek-row { display: flex; align-items: flex-start; gap: 16px; }
.peek-icon {
  flex: 0 0 auto;
  width: clamp(58px, 5vw, 74px) !important; height: clamp(58px, 5vw, 74px) !important;
  border-radius: 15px; padding: 15px; box-sizing: border-box;
}
.peek-a .peek-icon { background: linear-gradient(165deg, #6C7B60 0%, #5B6A51 100%); }
.peek-b .peek-icon { background: linear-gradient(165deg, #566A5A 0%, #45584A 100%); }
.peek-text { gap: 3px !important; padding-top: 2px; }
.peek-name {
  font-weight: 500 !important; font-size: clamp(17px, 1.4vw, 20px) !important;
  line-height: 1.25 !important; color: var(--text) !important;
}
.peek-line {
  font-size: 14.5px !important; line-height: 1.45 !important;
  color: var(--text-muted) !important; max-width: 26ch;
}


/* ---------- 5/13 ---------- */
/* ---- Intro option 1d: quiet fact strip ---- */
.intro-strip {
  margin-top: clamp(38px, 4vw, 58px);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  max-width: 1020px;
}
.intro-strip-cell {
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 34px) clamp(18px, 2vw, 26px) 0;
  display: flex; flex-direction: column; gap: 7px;
}
.intro-strip-cell + .intro-strip-cell {
  padding-left: clamp(20px, 2.2vw, 34px);
  border-left: 1px solid var(--divider);
}
.intro-strip-label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted);
}
.intro-strip-fact {
  font-family: var(--serif); font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.2; color: var(--text); letter-spacing: -0.005em;
}
.intro-strip-link {
  padding: clamp(18px, 2vw, 26px) 0 clamp(18px, 2vw, 26px) clamp(24px, 2.6vw, 40px);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 13px; color: var(--text);
  text-decoration: none; white-space: nowrap;
  transition: gap 0.4s cubic-bezier(.2,.7,.2,1);
}
.intro-strip-link:hover { gap: 18px; }
@media (max-width: 900px) {
  .intro-strip { grid-template-columns: minmax(0, 1fr); }
  .intro-strip-cell + .intro-strip-cell { border-left: 0; border-top: 1px solid var(--divider); padding-left: 0; }
  .intro-strip-link { padding-left: 0; border-top: 1px solid var(--divider); }
}


/* ---------- 6/13 ---------- */
/* ---- Testimonials: compact, scrolls inside the section ---- */
.testimonials { padding-top: clamp(58px, 6.5vw, 92px) !important; padding-bottom: clamp(58px, 6.5vw, 92px) !important; }
.tstm-viewport { position: relative; }
.tstm-viewport::before,
.tstm-viewport::after {
  content: ""; position: absolute; left: 0; right: 0; height: clamp(40px, 5vw, 64px);
  pointer-events: none; z-index: 2; transition: opacity 0.35s ease;
}
.tstm-viewport::before { top: 0; background: linear-gradient(180deg, var(--bg) 12%, rgba(253,253,252,0) 100%); opacity: 0; }
.tstm-viewport::after { bottom: 0; background: linear-gradient(0deg, var(--bg) 12%, rgba(253,253,252,0) 100%); opacity: 1; }
.tstm-viewport[data-at="mid"]::before { opacity: 1; }
.tstm-viewport[data-at="end"]::before { opacity: 1; }
.tstm-viewport[data-at="end"]::after { opacity: 0; }
.tstm-viewport[data-at="none"]::before,
.tstm-viewport[data-at="none"]::after { opacity: 0; }
.tstm-scroll {
  max-height: clamp(330px, 42vh, 480px);
  overflow-y: auto;
  padding-right: clamp(22px, 2.4vw, 38px);
  scrollbar-width: none; -ms-overflow-style: none;
}
.tstm-scroll::-webkit-scrollbar { width: 0; height: 0; }
.tstm-track {
  position: absolute; top: 2px; bottom: 2px; right: 0; width: 1px;
  background: var(--divider); pointer-events: none; z-index: 3;
}
.tstm-thumb {
  position: absolute; left: -1px; width: 3px; border-radius: 2px;
  background: rgba(26,26,24,0.5);
  transition: top 0.12s linear, height 0.2s ease;
}
@media (max-width: 900px) {
  .tstm-scroll { max-height: clamp(300px, 56vh, 460px); }
}

/* Pin the section while the quotes scroll, then release the page */
/* the section's own off-white field, so the track never shows a colour of
   its own below the sticky section */
.tstm-pin { position: relative; background: var(--bg); }
.tstm-pin .testimonials {
  position: sticky; top: 0;
  min-height: 84vh;
  display: flex; align-items: center;
}
.tstm-pin .testimonials > .container { width: 100%; }
.tstm-pin[data-pinned="1"] .tstm-scroll { overflow-y: hidden; }


/* ---------- 7/13 ---------- */
/* Type settled: Geist + Cormorant, set in :root. The explorer that chose
   them is gone; its values are baked into the rules below. */

/* One weight + one line-height for every heading, hero included */
html .hero h1, html .nh-title,
html h1, html h2, html h3, html h4,
html .offering-sub-title,
html h1 .italic, html h2 .italic, html h3 .italic,
html h1 .q-serif, html .nh-title .q-serif,
html h1 i, html h2 i, html h3 i, html h2 em,
html .invitation-item p:first-child {
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
/* Body copy: one weight, one line-height (1.25) everywhere */
html p, html li, html .about-body p,
html .hero p, html .invitation-item p + p,
html .oi-form-line, html .oi-form-for {
  font-weight: 350 !important;
  line-height: 1.25 !important;
}
/* the sections that set their own !important line-height are pulled in line */
html .about-body p, html .ab-para p,
html .bridge p, html .iv-body,
html .letter-form-side > p, html .letter-body p,
html .contact-cta-sub, html .footer-brand p,
html .oi-panel-lead p, html .oi-sub p, html .oi-case p,
html .oi-prin-lead, html .oi-prin-list li,
html .oi-head-lead, html .invitation-item p + p,
html .editorial-row p, html .principle p, html .offx-main p {
  line-height: 1.25 !important;
}

.ab-head p.about-lead-serif,
.about-body p.about-lead-serif {
  font-family: var(--serif) !important;
  font-size: clamp(21px, 1.9vw, 27px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin-top: clamp(6px, 0.9vw, 12px) !important;
}

.invitation-cta {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: clamp(22px, 2.4vw, 32px);
  font-size: clamp(12.5px, 1vw, 14px);
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 3px;
  transition: border-color 0.3s ease, gap 0.4s cubic-bezier(.2,.7,.2,1);
}
.invitation-cta:hover { border-color: currentColor; gap: 14px; }
.invitation-cta .arrow { transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
.invitation-cta:hover .arrow { transform: translateX(3px); }

/* About portrait: cap height so image + text fit one view */



/* Introduction: centered statement; photographs float around it and drift
   at different speeds - scattered prints, deliberately unlike the framed
   About portrait below, while the drift motion carries through */

.intro-stage { position: relative; }
.intro-core {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(26px, 3vw, 40px);
  padding-inline: 20px;
  text-align: center;
}
@media (min-width: 900px) { .intro-core { min-height: clamp(520px, 64vh, 720px); } }




@media (min-width: 900px) {
  .intro-core { align-items: flex-end; padding-inline: 0; }
  
  
  
  
}

/* the prints: white mat, quiet practice label */
.intro-stage .snap {
  margin: 0; background: #FDFCF8; padding: 3px;
  box-shadow: 0 2px 10px rgba(26,26,24,0.09);
  transition: box-shadow .5s ease, opacity 1.1s ease;
}
.intro-stage .snap .ph { display: block; overflow: hidden; position: relative; }
.intro-stage .snap img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22,1,.36,1), filter .6s ease;
}



/* one loose pile on the left - overlapping prints, each drifting at its own speed */










/* photos develop in after the statement (delay pairs: box-shadow, opacity) */








/* deeper crop on the meditation shot: cuts the dark doorframe at the photo's edges */


.intro-stage .snap:hover { box-shadow: 0 14px 30px rgba(26,26,24,0.16); }



/* below 900px: text first, then a gentle film strip of the work */



.about-text h2, .offering-head h2, .testimonials-aside h2,
.letter-form-side h2, .contact-cta h2 { text-wrap: balance; }
.iv2d .iv-lead { font-weight: 300; }


/* ===================================================================
   OFFERINGS - split index (v16): list on the left, detail on the right,
   both sitting on the deep-green field. The first tile and the detail
   panel share one top line; the panel is the same size for every
   offering; every tile is the same size.
   =================================================================== */
.oi-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
  margin-bottom: clamp(24px, 2.6vw, 34px);
}
.oi-head-left { display: flex; flex-direction: column; gap: 12px; }
.oi-head .eyebrow, .oi-head .eyebrow::before { color: rgba(255,255,255,0.65) !important; }
.oi-head h2 {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(32px, 3.5vw, 44px); line-height: 1.06;
  letter-spacing: -0.03em; color: var(--white); margin: 0; max-width: 16ch;
}
.oi-head-lead {
  font-family: var(--sans); font-size: 13.5px; font-weight: 300; line-height: 1.7;
  color: rgba(255,255,255,0.72); margin: 0; max-width: 34ch; text-wrap: pretty;
}

/* Two columns, two rows: the group label owns row 1 of the left column,
   so the first tile and the detail panel both begin on row 2. */
.oi-split {
  display: grid;
  grid-template-columns: minmax(270px, 330px) 1fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(20px, 2.2vw, 28px);
  align-items: start;
}
.oi-split-label { grid-column: 1; grid-row: 1; }
.oi-list { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 10px; }
.oi-detail { grid-column: 2; grid-row: 2; }

.oi-group-label {
  display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  padding: 0 4px 8px;
}
.oi-list > .oi-group-label { padding-top: clamp(16px, 1.8vw, 24px); }

.oi-row {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 14px; width: 100%; height: 76px; text-align: left; padding: 0 42px 0 13px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  color: var(--white); cursor: pointer; font: inherit;
  transition: background .35s ease, border-color .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.oi-row:hover { transform: translateX(3px); border-color: rgba(255,255,255,0.34); }
.oi-row[aria-pressed="true"] {
  background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 40px rgba(0,0,0,0.2);
}
.oi-row-icon {
  width: 42px; height: 42px; border-radius: 7px; background: rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.oi-row-icon img { width: 23px; height: 23px; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.oi-row-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oi-row-title {
  font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -0.012em;
  line-height: 1.15; color: var(--white);
}
.oi-row-desc {
  font-family: var(--sans); font-size: 12.5px; font-weight: 400; line-height: 1.4;
  letter-spacing: 0.002em; color: rgba(255,255,255,0.62);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.oi-row-mark {
  position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.06);
  display: grid; place-items: center; font-family: var(--sans); font-size: 13px; font-weight: 300;
  line-height: 1; color: rgba(255,255,255,0.85);
}
.oi-row[aria-pressed="true"] .oi-row-mark { background: rgba(255,255,255,0.92); border-color: transparent; color: #2A3128; }

/* All panels share one grid cell and stay laid out, so the pane keeps one
   height - the tallest panel (coaching) sets it for every offering. */
.oi-detail {
  position: relative; overflow: hidden; display: grid; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.07);
  backdrop-filter: blur(36px) saturate(1.4); -webkit-backdrop-filter: blur(36px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
  padding: clamp(18px, 1.4vw, 22px); color: var(--white);
}
.oi-panel {
  grid-area: 1 / 1; display: flex; flex-direction: column;
  gap: clamp(7px, 0.7vw, 10px); width: 100%;
}
.oi-panel:not([data-active]) { visibility: hidden; opacity: 0; pointer-events: none; }
.oi-panel[data-active] { animation: oiFade .4s ease both; }
@keyframes oiFade { from { opacity: 0; } to { opacity: 1; } }
.oi-panel > * { position: relative; }
.oi-panel-top {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.18);
}
.oi-panel-eyebrow {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.62);
}
.oi-panel-num { font-family: var(--serif); font-style: italic; font-size: 15px; color: #E0A183; white-space: nowrap; }
.oi-panel-lead { display: flex; flex-direction: column; gap: 10px; }
.oi-panel-lead h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.1vw, 29px);
  line-height: 1.16; letter-spacing: -0.01em; color: var(--white); margin: 0; max-width: 46ch; text-wrap: pretty;
}
.oi-panel-lead p {
  font-family: var(--sans); font-size: 12.8px; font-weight: 300; line-height: 1.65;
  color: rgba(255,255,255,0.8); margin: 0; max-width: 68ch; text-wrap: pretty;
}





.oi-subs { display: flex; flex-direction: column; }

.oi-sub-head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.oi-sub-head h4 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; color: var(--white); margin: 0; }
.oi-sub-meta {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.6); white-space: nowrap;
}

.oi-panel-foot {
  margin-top: auto; padding-top: 12px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.oi-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.55);
  font-family: var(--sans); font-size: 12.8px; color: var(--white); text-decoration: none;
  transition: background .3s ease, gap .4s cubic-bezier(.2,.7,.2,1);
}
.oi-cta:hover { background: rgba(255,255,255,0.2); gap: 18px; color: var(--white); }
.oi-note { font-family: var(--sans); font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,0.68); }

/* --- Journeys: the coaching panel's 3 / 6 month chooser --- */
.oi-journeys { display: flex; flex-wrap: wrap; gap: 6px; }
.oi-jr {
  display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 5px 12px 6px; border-radius: 999px; font-family: var(--sans); color: var(--white);
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05);
  transition: background .35s ease, border-color .35s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.oi-jr:hover { border-color: rgba(255,255,255,0.42); }
.oi-jr[aria-pressed="true"] { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.62); }
.oi-jr-name { font-family: var(--serif); font-size: 15.5px; letter-spacing: -0.005em; color: var(--white); }
.oi-jr-mark {
  width: 11px; height: 11px; align-self: center; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.45);
}
.oi-jr-mark::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: transparent; transition: background .3s ease; }
.oi-jr[aria-pressed="true"] .oi-jr-mark { border-color: var(--white); }
.oi-jr[aria-pressed="true"] .oi-jr-mark::after { background: var(--white); }
.oi-jr-meta { font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); white-space: nowrap; }

/* --- The path: discovery call → The Arrival → woven sessions --- */
.oi-path { position: relative; margin: 8px 0 4px; padding: 24px 0 20px; }
.oi-path::before {
  content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.06);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}



.oi-step-node {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--sans); font-size: 10px; font-weight: 500;
}
.oi-step-dash { border: 1.5px dashed rgba(255,255,255,0.75); }
.oi-step-dash i { width: 6px; height: 6px; border-radius: 50%; background: var(--white); display: block; }
.oi-step-solid { background: var(--white); color: #26374A; }
.oi-step-ring { border: 1.5px solid rgba(255,255,255,0.7); color: var(--white); font-size: 13px; }
.oi-step-copy { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.oi-step-copy b { font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--white); }
.oi-step-copy small { font-family: var(--sans); font-size: 10.5px; font-weight: 300; color: rgba(255,255,255,0.6); }
.oi-beads { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-evenly; margin-top: 9px; }
.oi-bead { width: 10px; height: 10px; border-radius: 50%; flex: none; animation: oiBead .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes oiBead { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

.oi-legend { display: flex; justify-content: flex-end; align-items: center; gap: 18px; flex-wrap: wrap; padding: 2px 2px 0; }
.oi-legend-keys { display: flex; align-items: center; gap: 14px; }
.oi-key {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 9.5px;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.oi-key i { width: 6px; height: 6px; border-radius: 50%; display: block; flex: none; }
.oi-legend-note { font-family: var(--serif); font-style: italic; font-size: 13px; color: rgba(255,255,255,0.66); }

/* --- What the coaching journey is about --- */
.oi-prin { display: flex; flex-direction: column; gap: 8px; margin-top: clamp(4px, 0.6vw, 8px); }
.oi-prin-lead, .oi-prin-list li {
  font-family: var(--sans); font-size: 12.8px; font-weight: 300; line-height: 1.7;
  color: rgba(255,255,255,0.78); margin: 0; max-width: 74ch; text-wrap: pretty;
}
.oi-prin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.oi-prin-list li { position: relative; padding-left: 17px; }
.oi-prin-list li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.5);
}
.oi-prin-close {
  font-family: var(--serif); font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.9);
  margin: 2px 0 0; max-width: 60ch; text-wrap: pretty;
}

/* --- What you get --- */
.oi-get { display: flex; flex-direction: column; }
.oi-get-label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); padding-bottom: 8px;
}




/* --- The two bodywork sessions --- */
.oi-forms { display: flex; flex-direction: column; margin-top: 14px; }
.oi-form {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.16);
}
.oi-form-head { display: flex; flex-direction: column; gap: 3px; }
.oi-form-name { font-family: var(--serif); font-size: 21px; letter-spacing: -0.005em; color: var(--white); }
.oi-form-meta { font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.oi-form-line { font-family: var(--sans); font-size: 12.8px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,0.82); }
.oi-form-for { grid-column: 2; font-family: var(--sans); font-size: 11.8px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,0.62); margin-top: 7px; }
.oi-form-for b { font-weight: 500; letter-spacing: 0.01em; }
.oi-forms > .oi-get-label { padding-bottom: 4px; }
.oi-form-name { position: relative; padding-left: 17px; }
.oi-form-name::before {
  content: ""; position: absolute; left: 0; top: 0.46em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--oi-body); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oi-body) 22%, transparent);
}
.oi-form-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.oi-form-tags i {
  font-style: normal; font-family: var(--sans); font-size: 10.5px; font-weight: 400; letter-spacing: 0.02em;
  line-height: 1; padding: 5px 10px 4px; border-radius: 99px; color: var(--oi-ink);
  background: color-mix(in srgb, var(--oi-body) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oi-body) 38%, transparent);
}

.oi-case-dots { display: flex; gap: 6px; }
.oi-case-dots i { width: 7px; height: 7px; border-radius: 50%; }

.oi-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 13px; border-top: 1px solid rgba(var(--oi-tint), 0.16); }
.oi-duo-col { display: flex; flex-direction: column; gap: 7px; }
.oi-duo-col .oi-form-tags { margin-top: 2px; }
@media (max-width: 760px) { .oi-duo { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 760px) { .oi-form { grid-template-columns: 1fr; gap: 6px; } .oi-form-for { grid-column: 1; margin-top: 2px; } }

.oi-avail-note {
  margin: 0 0 0 auto; max-width: 54ch; text-align: right;
  font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.5;
  color: rgba(255,255,255,0.62); text-wrap: pretty;
}
.oi-thread-note {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--sans); font-size: 12.5px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.72);
}
.oi-thread-note i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.oi-list-note {
  display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,0.55); padding: 6px 12px 0;
}

@media (max-width: 860px) {
  .oi-journeys { grid-template-columns: 1fr; }
  
  
  
  .oi-step-copy { align-items: flex-start; text-align: left; }
  .oi-beads { width: 100%; justify-content: flex-start; gap: 9px; margin: 2px 0 2px 10px; }
  .oi-legend { align-items: flex-start; }
}

/* v27.2: the split no longer stacks on tablets - a slimmer two-column grid
   lives at the end of the sheet; phones stack in the 720px block */
@media (max-width: 560px) {
  .oi-row { height: auto; padding: 15px 46px 15px 15px; }
  
  
  .oi-panel-foot { flex-direction: column; align-items: flex-start; }
}

/* Unified section heading scale */
.about-text h2,
.oi-head h2,
.testimonials-aside h2,
.bridge h2,
.letter-form-side h2,
.contact-cta h2 {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
}
/* Intro statement rides the hero scale, not the section-header scale */
.iv2d .iv-lead {
  font-size: clamp(22px, 2.55vw, 39px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em !important;
}

/* Unified body copy scale - one size across every section */
.about-body p,
.invitation-item p + p,
.bridge p,
.letter-form-side > p,
.contact-cta-sub,
.peek-line,
.peek-note,
.oi-panel-lead p,
.oi-case p,
.oi-sub p,
.oi-note,
.oi-get-row span,
.oi-form-line,
.oi-form-for,
.letter-latest-card p,
.letter-body p {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}
.about-body p,
.invitation-item p + p,
.bridge p,
.letter-form-side > p,
.contact-cta-sub { line-height: 1.7 !important; }


/* ---------- 8/13 ---------- */
/* v27: intro copy uses the full tile width */
.oi-panel-lead p, .oi-case p { max-width: none !important; }
/* v27: "people often come with" - smaller, italic */
.oi-form-come {
  font-style: italic;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.oi-form-come b { font-style: normal; font-weight: 500; }
/* v27: CTA moved to the tile's top-right corner - hairline box, eyebrow-scale
   type, so it reads as a peer of the label row instead of a foreign pill */
.oi-panel-top { padding-bottom: 9px; gap: 16px; align-items: center; }
.oi-panel-top .oi-cta {
  flex: none;
  padding: 6px 2px;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent) !important;
  color: color-mix(in srgb, currentColor 72%, transparent) !important;
  font-family: var(--sans);
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  gap: 8px;
  transition: color .35s ease, border-color .35s ease, gap .4s cubic-bezier(.2,.7,.2,1);
}
.oi-panel-top .oi-cta .arrow { font-size: 11px; letter-spacing: 0; }
.oi-panel-top .oi-cta:hover {
  gap: 12px;
  background: transparent !important;
  color: currentColor !important;
  border-bottom-color: color-mix(in srgb, currentColor 55%, transparent) !important;
}
/* v27: examples note lines up with, and reads like, the session notes */
.oi-thread-note { padding-left: 224px; font-size: 13px; font-style: italic; line-height: 1.5; color: rgba(255,255,255,0.62); margin-top: 7px; }
@media (max-width: 760px) { .oi-thread-note { padding-left: 0; } }
/* v27: left-hand rows - round icon wells, no +/− chip, quieter chrome so the
   selected row is the only one that reads as a card */
.oi-list .oi-row {
  height: 82px;
  padding: 0 34px 0 14px;
  background: transparent !important;
  border-color: color-mix(in srgb, var(--oi-ink) 13%, transparent) !important;
  box-shadow: none !important;
}
.oi-list .oi-row:hover {
  background: color-mix(in srgb, var(--oi-ink) 5%, transparent) !important;
  border-color: color-mix(in srgb, var(--oi-ink) 26%, transparent) !important;
}
.oi-list .oi-row[aria-pressed="true"] {
  background: var(--oi-glass-hi) !important;
  border-color: color-mix(in srgb, var(--oi-ink) 42%, transparent) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.16) !important;
}
/* Each well carries its own shade - a green-to-blue ladder derived from the
   section accents, so the four tiles read apart without shouting. */
.oi-list .oi-row[data-oi="0"] { --oi-well: color-mix(in srgb, var(--oi-yoga) 82%, #5F7145); }
.oi-list .oi-row[data-oi="1"] { --oi-well: color-mix(in srgb, var(--oi-body) 50%, var(--oi-yoga)); }
.oi-list .oi-row[data-oi="2"] { --oi-well: #9BCBE2; }
.oi-list .oi-row[data-oi="3"] { --oi-well: #CFE2EC; }
.oi-list .oi-row-icon {
  width: 54px; height: 54px;
  border-radius: 50% !important;
  background: radial-gradient(circle at 40% 36%,
    color-mix(in srgb, var(--oi-well, var(--oi-accent, var(--oi-ink))) 34%, transparent) 0%,
    color-mix(in srgb, var(--oi-well, var(--oi-accent, var(--oi-ink))) 20%, transparent) 38%,
    color-mix(in srgb, var(--oi-well, var(--oi-accent, var(--oi-ink))) 7%, transparent) 62%,
    transparent 82%) !important;
  box-shadow: none !important;
  transition: background .45s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.oi-list .oi-row-icon img { width: 34px; height: 34px; opacity: .9; transition: opacity .4s ease; }
.oi-list .oi-row[data-oi="1"] { --oi-accent: var(--oi-body); }
.oi-list .oi-row[data-oi="2"] { --oi-accent: var(--oi-yoga); }
.oi-list .oi-row:hover .oi-row-icon { transform: scale(1.03); }
.oi-list .oi-row[aria-pressed="true"] .oi-row-icon {
  background: radial-gradient(circle at 40% 36%,
    color-mix(in srgb, var(--oi-well, var(--oi-accent, var(--oi-ink))) 58%, transparent) 0%,
    color-mix(in srgb, var(--oi-well, var(--oi-accent, var(--oi-ink))) 34%, transparent) 38%,
    color-mix(in srgb, var(--oi-well, var(--oi-accent, var(--oi-ink))) 12%, transparent) 62%,
    transparent 82%) !important;
  animation: oiOrbBreathe 6s ease-in-out infinite;
}
.oi-list .oi-row[aria-pressed="true"] .oi-row-icon img { opacity: 1; }
/* Yoga's blue washes out at the shared alphas over the green field - give it
   a stronger pour so the hue actually reads. */
.oi-list .oi-row[data-oi="2"] .oi-row-icon {
  background: radial-gradient(circle at 40% 36%,
    color-mix(in srgb, var(--oi-well) 38%, transparent) 0%,
    color-mix(in srgb, var(--oi-well) 24%, transparent) 38%,
    color-mix(in srgb, var(--oi-well) 9%, transparent) 62%,
    transparent 82%) !important;
}
.oi-list .oi-row[data-oi="2"][aria-pressed="true"] .oi-row-icon {
  background: radial-gradient(circle at 40% 36%,
    color-mix(in srgb, var(--oi-well) 58%, transparent) 0%,
    color-mix(in srgb, var(--oi-well) 36%, transparent) 38%,
    color-mix(in srgb, var(--oi-well) 13%, transparent) 62%,
    transparent 82%) !important;
}
@keyframes oiOrbBreathe {
  0%, 100% { transform: scale(0.94); opacity: 0.9; }
  50%      { transform: scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .oi-list .oi-row[aria-pressed="true"] .oi-row-icon { animation: none; }
}
/* the +/− chip goes; a faint arrow slides in instead */
.oi-list .oi-row-mark { display: none !important; }
.oi-list .oi-row::after {
  content: "→";
  position: absolute; right: 14px; top: 50%;
  font-family: var(--sans); font-size: 14px; font-weight: 300; line-height: 1;
  color: var(--oi-ink);
  opacity: 0; transform: translate(-5px, -50%);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.oi-list .oi-row:hover::after { opacity: .45; transform: translate(0, -50%); }
.oi-list .oi-row[aria-pressed="true"]::after { opacity: .7; transform: translate(0, -50%); }
.oi-panel-foot { margin-top: auto; }
.oi-panel-foot:empty { display: none; }
/* v27: coaching copy below the journey matches the other offering descriptions */
.oi-prin-lead, .oi-prin-list li {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  max-width: none !important;
}


/* ---------- 9/13 · was <style id="oi-theme"> ---------- */
/* ===================================================================
   OFFERINGS - palette + the animated three-month arc.
   Every colour in the section reads from vars set on .flow-offering.
   =================================================================== */
/* Moss Slate - the settled palette: moss-green field lit by slate-blue */
.flow-offering {
  --oi-bg: #3A423A;
  --oi-tint: 255,255,255;
  --oi-ink: #FDFDFC;
  --oi-solid: #FDFDFC;
  --oi-solid-ink: #2B322B;
  --oi-coach: #FDFDFC;
  --oi-body: #4B6FCB;
  --oi-yoga: #9EBFC9;
  --oi-glow: rgba(190,219,232,0.75);
  --oi-icon: brightness(0) invert(1);
  --oi-glass: rgba(255,255,255,0.05);
  --oi-glass-2: rgba(255,255,255,0.07);
  --oi-glass-hi: rgba(255,255,255,0.13);
  --oi-wash-1: rgba(140,180,200,0.26);
  --oi-wash-2: rgba(75,111,203,0.16);
}

/* Field + a very slow wash that drifts behind the content */
.flow-offering { background: var(--oi-bg) !important; }
.flow-offering::after {
  content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 28%, var(--oi-wash-1), transparent 70%),
    radial-gradient(34% 40% at 78% 72%, var(--oi-wash-2), transparent 72%);
  filter: blur(30px);
  animation: oiWash 34s ease-in-out infinite alternate;
}
@keyframes oiWash {
  from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.1); }
}
.offering { position: relative; z-index: 1; }

/* --- section head + left column --- */
.offering .eyebrow, .offering .eyebrow::before { color: rgba(var(--oi-tint), 0.62) !important; }
.oi-head h2 { color: var(--oi-ink) !important; }
.oi-head p { color: rgba(var(--oi-tint), 0.72) !important; }
.oi-group-label { color: rgba(var(--oi-tint), 0.55) !important; }
.oi-list-note { color: rgba(var(--oi-tint), 0.55) !important; }

.oi-row {
  color: var(--oi-ink) !important;
  background: var(--oi-glass) !important;
  border-color: rgba(var(--oi-tint), 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(var(--oi-tint), 0.10) !important;
}
.oi-row:hover { border-color: rgba(var(--oi-tint), 0.36) !important; }
.oi-row[aria-pressed="true"] {
  background: var(--oi-glass-hi) !important;
  border-color: rgba(var(--oi-tint), 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(var(--oi-tint), 0.18), 0 16px 40px rgba(0,0,0,0.16) !important;
}
.oi-row-icon { background: rgba(var(--oi-tint), 0.10) !important; }
.oi-row-icon img { filter: var(--oi-icon) !important; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.oi-row:hover .oi-row-icon img { transform: scale(1.09) rotate(-3deg); }
.oi-row[aria-pressed="true"] .oi-row-icon { background: rgba(var(--oi-tint), 0.16) !important; }
.oi-row[aria-pressed="true"] .oi-row-icon img { animation: oiPop .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes oiPop { 0% { transform: scale(.82); } 60% { transform: scale(1.1); } 100% { transform: none; } }

/* Hand-drawn icon set - inline SVG, inks itself from currentColor */
.oi-row-icon .oi-ic {
  width: 29px; height: 29px; flex: none;
  fill: currentColor; color: var(--oi-ink);
  opacity: .8; overflow: visible;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.oi-row-icon .oi-ic-eye { width: 33px; height: 33px; }
.oi-row-icon .oi-ic-hand { width: 26px; height: 26px; }
.oi-row:hover .oi-row-icon .oi-ic { transform: scale(1.07) rotate(-3deg); opacity: 1; }
.oi-row[aria-pressed="true"] .oi-row-icon .oi-ic { opacity: 1; animation: oiPop .6s cubic-bezier(.16,1,.3,1) both; }
.oi-row[aria-pressed="true"] .oi-row-icon .oi-ic-vessel .dot {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: oiDotFloat 3.2s ease-in-out infinite;
}
@keyframes oiDotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8%); } }
@media (prefers-reduced-motion: reduce) {
  .oi-row-icon .oi-ic, .oi-row-icon .oi-ic * { animation: none !important; }
}

.oi-row-title { color: var(--oi-ink) !important; }
.oi-row-desc { color: rgba(var(--oi-tint), 0.62) !important; }
.oi-row-mark {
  border-color: rgba(var(--oi-tint), 0.28) !important;
  background: rgba(var(--oi-tint), 0.06) !important;
  color: rgba(var(--oi-tint), 0.85) !important;
  transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.oi-row[aria-pressed="true"] .oi-row-mark {
  background: var(--oi-solid) !important; border-color: transparent !important;
  color: var(--oi-solid-ink) !important; transform: rotate(180deg);
}

/* --- detail pane --- */
.oi-detail {
  color: var(--oi-ink) !important;
  background: var(--oi-glass-2) !important;
  border-color: rgba(var(--oi-tint), 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(var(--oi-tint), 0.16) !important;
}
.oi-panel-top { border-bottom-color: rgba(var(--oi-tint), 0.18) !important; }
.oi-panel-eyebrow { color: rgba(var(--oi-tint), 0.62) !important; }
.oi-panel-num { color: var(--oi-body) !important; }
.oi-panel-lead h3 { color: var(--oi-ink) !important; }
.oi-panel-lead p { color: rgba(var(--oi-tint), 0.8) !important; }
.oi-prin-lead, .oi-prin-list li { color: rgba(var(--oi-tint), 0.78) !important; }
.oi-prin-list li b { font-weight: 500; color: var(--oi-ink); }
.oi-prin-list li::before { background: rgba(var(--oi-tint), 0.5) !important; }
.oi-prin-close { color: rgba(var(--oi-tint), 0.92) !important; }
.oi-get-label { color: rgba(var(--oi-tint), 0.55) !important; }


.oi-form { border-top-color: rgba(var(--oi-tint), 0.16) !important; }
.oi-form-name { color: var(--oi-ink) !important; }
.oi-form-meta { color: color-mix(in srgb, var(--oi-body) 80%, var(--oi-ink)) !important; }
.oi-form-line { color: rgba(var(--oi-tint), 0.82) !important; }
.oi-form-for { color: rgba(var(--oi-tint), 0.6) !important; }
.oi-thread-note { color: rgba(var(--oi-tint), 0.6) !important; }
.oi-avail-note { color: rgba(var(--oi-tint), 0.62) !important; }
.oi-note { color: rgba(var(--oi-tint), 0.68) !important; }
.oi-cta {
  background: var(--oi-glass-hi) !important; border-color: rgba(var(--oi-tint), 0.5) !important;
  color: var(--oi-ink) !important;
}
.oi-cta:hover { background: var(--oi-solid) !important; color: var(--oi-solid-ink) !important; border-color: transparent !important; }
.oi-cta .arrow { animation: oiNudge 3.4s ease-in-out infinite; }
@keyframes oiNudge { 0%, 72%, 100% { transform: none; } 84% { transform: translateX(3px); } }
.oi-key { color: rgba(var(--oi-tint), 0.7) !important; }

/* thread colours, themable */
.offering [data-thread="coach"] { background: var(--oi-coach) !important; }
.offering [data-thread="body"] { background: var(--oi-body) !important; }
.offering [data-thread="yoga"] { background: var(--oi-yoga) !important; }
.oi-panel[data-panel="1"] .oi-panel-eyebrow, .oi-panel[data-panel="2"] .oi-panel-eyebrow, .oi-panel[data-panel="3"] .oi-panel-eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.oi-panel[data-panel="1"] .oi-panel-eyebrow::before, .oi-panel[data-panel="2"] .oi-panel-eyebrow::before, .oi-panel[data-panel="3"] .oi-panel-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--oi-body);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oi-body) 22%, transparent);
}
.oi-panel[data-panel="2"] .oi-panel-eyebrow::before { background: var(--oi-yoga); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oi-yoga) 22%, transparent); }
.oi-panel[data-panel="3"] .oi-panel-eyebrow::before { background: var(--oi-coach); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oi-coach) 22%, transparent); }
.oi-panel[data-panel="3"] .oi-form-name::before { background: var(--oi-coach); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oi-coach) 22%, transparent); }
.oi-panel[data-panel="3"] .oi-form-tags i {
  background: color-mix(in srgb, var(--oi-coach) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oi-coach) 32%, transparent);
}
.oi-panel[data-panel="3"] .oi-form-meta { color: rgba(var(--oi-tint), 0.6) !important; }

.oi-panel[data-panel="2"] .oi-form-name::before { background: var(--oi-yoga); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oi-yoga) 22%, transparent); }
.oi-panel[data-panel="2"] .oi-form-tags i {
  background: color-mix(in srgb, var(--oi-yoga) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oi-yoga) 38%, transparent);
}
.oi-panel[data-panel="2"] .oi-form-meta { color: color-mix(in srgb, var(--oi-yoga) 80%, var(--oi-ink)) !important; }

/* Panel switch - one rhythm for every offering: every top-level block lifts in,
   top to bottom, same curve and travel regardless of what the panel contains */
.oi-panel[data-active] > * { animation: oiUp .6s cubic-bezier(.16,1,.3,1) both; }
.oi-panel[data-active] > *:nth-child(2) { animation-delay: .07s; }
.oi-panel[data-active] > *:nth-child(3) { animation-delay: .14s; }
.oi-panel[data-active] > *:nth-child(4) { animation-delay: .21s; }
.oi-panel[data-active] > *:nth-child(5) { animation-delay: .28s; }
.oi-panel[data-active] > *:nth-child(n+6) { animation-delay: .35s; }
@keyframes oiUp { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* ================= THE THREE-MONTH ARC ================= */
.oi-path {
  position: relative; margin: 6px 0 2px; padding: 12px 0 12px;
  border-top: 1px solid rgba(var(--oi-tint), 0.16);
  border-bottom: 1px solid rgba(var(--oi-tint), 0.16);
}
.oi-path-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 12px; }
.oi-path-title {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(var(--oi-tint), 0.55);
}
.oi-arc { position: relative; }
.oi-arc-rail {
  position: absolute; left: 52px; right: 52px; top: 15px; height: 1px; overflow: hidden;
}
.oi-arc-rail::before {
  content: ""; position: absolute; inset: 0; background: rgba(var(--oi-tint), 0.28);
  transform: scaleX(0); transform-origin: left center;
}
.oi-path.is-in .oi-arc-rail::before { animation: oiRail 1.5s cubic-bezier(.4,0,.2,1) .1s forwards; }
@keyframes oiRail { to { transform: scaleX(1); } }
.oi-arc-travel {
  position: absolute; top: 50%; left: 0; width: 110px; height: 2px; opacity: 0;
  transform: translate(-100%, -50%);
  background: linear-gradient(90deg, transparent, var(--oi-glow), transparent);
}
.oi-path.is-in .oi-arc-travel { animation: oiTravel 8s 2.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes oiTravel {
  0% { left: 0; opacity: 0; } 10% { opacity: .95; } 88% { opacity: .95; } 100% { left: 100%; opacity: 0; }
}

.oi-arc-row { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 8px; }
.oi-anchor { width: 104px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.oi-anchor-node {
  position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  flex: none; font-family: var(--sans); font-size: 10px; font-weight: 500; color: var(--oi-ink);
}
.oi-node-dash {
  background: radial-gradient(circle, rgba(var(--oi-tint), 0.22), rgba(var(--oi-tint), 0.04) 72%);
  box-shadow: inset 0 0 0 1px rgba(var(--oi-tint), 0.30);
}
.oi-node-dash i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--oi-ink);
  box-shadow: 0 0 10px 1px var(--oi-glow); display: block;
}
.oi-node-dash::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(var(--oi-tint), 0.4); opacity: 0;
}
.oi-path.is-in .oi-node-dash::after { animation: oiPing 4.2s ease-out 2s infinite; }
@keyframes oiPing { 0% { opacity: .7; transform: scale(.72); } 70%, 100% { opacity: 0; transform: scale(1.28); } }
.oi-path.is-in .oi-node-dash i { animation: oiSpark 5.2s ease-in-out 2s infinite; }
@keyframes oiSpark { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.oi-node-solid { background: var(--oi-solid); color: var(--oi-solid-ink); box-shadow: 0 0 18px rgba(0,0,0,0.10); }
.oi-node-solid::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(var(--oi-tint), 0.35);
}
.oi-node-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(var(--oi-tint), 0.8) 0deg, rgba(var(--oi-tint), 0.8) 26deg,
    rgba(var(--oi-tint), 0) 62deg, rgba(var(--oi-tint), 0) 118deg,
    rgba(var(--oi-tint), 0.8) 154deg, rgba(var(--oi-tint), 0.8) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
}
.oi-node-ring i { width: 7px; height: 7px; border-radius: 50%; background: var(--oi-ink); display: block; }
.oi-anchor-copy { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.oi-anchor-copy b { font-family: var(--sans); font-size: 11.5px; font-weight: 500; line-height: 1.7; color: var(--oi-ink); }
.oi-anchor-copy small { font-family: var(--sans); font-size: 10.5px; font-weight: 300; line-height: 1.7; color: rgba(var(--oi-tint), 0.6); white-space: nowrap; }

/* Left-to-right draw: each step lands as the line reaches it -
   call → rail → Arrival → the Journey label → sessions rise in order → the far node */
.oi-arc .oi-anchor-node, .oi-arc .oi-anchor-copy, .oi-arc .oi-trace-note { opacity: 0; }
.oi-path.is-in .oi-anchor-node { animation: oiNodeIn .55s cubic-bezier(.3,1.4,.4,1) forwards; }
.oi-path.is-in .oi-anchor-copy { animation: oiCopyIn .6s cubic-bezier(.16,1,.3,1) forwards; }
.oi-path.is-in .oi-anchor:nth-child(1) .oi-anchor-node { animation-delay: .05s; }
.oi-path.is-in .oi-anchor:nth-child(1) .oi-anchor-copy { animation-delay: .18s; }
.oi-path.is-in .oi-anchor:nth-child(2) .oi-anchor-node { animation-delay: .5s; }
.oi-path.is-in .oi-anchor:nth-child(2) .oi-anchor-copy { animation-delay: .63s; }
.oi-path.is-in .oi-anchor:nth-child(4) .oi-anchor-node { animation-delay: 1.62s; }
.oi-path.is-in .oi-anchor:nth-child(4) .oi-anchor-copy { animation-delay: 1.75s; }
.oi-path.is-in .oi-trace-note { animation: oiCopyIn .6s cubic-bezier(.16,1,.3,1) .72s forwards; }
@keyframes oiNodeIn { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes oiCopyIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.oi-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.oi-trace { height: 30px; display: flex; align-items: center; justify-content: space-evenly; }
.oi-stroke {
  position: relative; width: 3px; height: var(--h, 14px); flex: none; cursor: default;
  transform: scaleY(0); opacity: 0; transition: opacity .3s ease, height 1.1s cubic-bezier(.22,1,.36,1);
}
.oi-stroke::before { content: ""; position: absolute; inset: -10px -8px; }
.oi-stroke:hover { z-index: 6; }
.oi-path.is-in .oi-stroke { animation: oiRise .7s cubic-bezier(.16,1,.3,1) var(--d, 0ms) forwards; }
@keyframes oiRise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.oi-stroke > i {
  display: block; width: 100%; height: 100%; border-radius: 99px;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .3s ease, background-color .9s ease;
}
.oi-path.is-in .oi-stroke > i { animation: oiBreathe 7s ease-in-out var(--d, 0ms) infinite; }
@keyframes oiBreathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.22); } }
.oi-stroke:hover > i { transform: scaleY(1.75) !important; filter: brightness(1.15); }
/* v27.1: the mid label speaks the same voice as the anchor copies - same sans, same two-line rhythm */
.oi-trace-note {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.oi-trace-note b { font-family: var(--sans); font-size: 11.5px; font-weight: 500; line-height: 1.7; color: var(--oi-ink); }
.oi-trace-note small { font-family: var(--sans); font-size: 10.5px; font-weight: 300; line-height: 1.7; color: rgba(var(--oi-tint), 0.6); white-space: nowrap; }

@media (max-width: 720px) {
  .oi-arc-rail { display: none; }
  .oi-arc-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .oi-anchor { width: auto; flex-direction: row; align-items: center; gap: 14px; }
  .oi-anchor-copy { align-items: flex-start; text-align: left; }
  .oi-trace { justify-content: flex-start; gap: 14px; padding-left: 8px; }
  .oi-trace-note { align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-offering::after,
  .oi-cta .arrow,
  .oi-path.is-in .oi-arc-travel,
  .oi-path.is-in .oi-node-dash i,
  .oi-path.is-in .oi-node-dash::after,
  .oi-path.is-in .oi-stroke > i,
  .oi-panel[data-active],
  .oi-panel[data-active] > * { animation: none !important; }
  .oi-path.is-in .oi-arc-rail::before { animation: none; transform: none; }
  .oi-path.is-in .oi-stroke { animation: none; transform: none; opacity: 1; }
  .oi-arc .oi-anchor-node, .oi-arc .oi-anchor-copy, .oi-arc .oi-trace-note { animation: none !important; opacity: 1 !important; }
}


/* ---------- 10/13 ---------- */
/* ---- One heading scale: hero, section headers and the intro statement ---- */
html .nh-title,
html .hero h1,
html .about-text h2,
html .oi-head h2,
html .offering-head h2,
html .testimonials-aside h2,
html .bridge h2,
html .letter-form-side h2,
html .contact-cta h2 {
  font-size: clamp(33px, 4.35vw, 60px) !important;
  line-height: 1.07 !important;
  letter-spacing: -0.025em !important;
}
html .offering-head h2, html .oi-head h2 { white-space: normal !important; }
@media (max-width: 720px) {
  html .nh-title,
  html .hero h1,
  html .about-text h2,
  html .oi-head h2,
  html .offering-head h2,
  html .testimonials-aside h2,
  html .bridge h2,
  html .letter-form-side h2,
  html .contact-cta h2 {
    font-size: clamp(30px, 7.6vw, 40px) !important;
  }
}


/* ---------- 11/13 ---------- */
/* ===== Introduction - text pinned, the work drifts past ===== */
.iv-sec { position: relative; padding: clamp(96px, 10vw, 150px) 0 clamp(80px, 8vw, 124px); }
.iv-wrap { max-width: none; margin-inline: 0; padding-inline: var(--pad-x); }
.iv-lead {
  font-family: var(--sans); font-weight: 300; color: var(--text); margin: 0;
  font-size: clamp(30px, 3.7vw, 52px); line-height: 1.14; letter-spacing: -0.025em; text-wrap: pretty;
  max-width: 30ch;
}
.iv-lead i, .iv-serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.iv-body {
  font-family: var(--sans); font-weight: 300; color: var(--text-soft);
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; letter-spacing: -0.005em;
  margin: clamp(20px, 2.2vw, 30px) 0 0; max-width: 52ch; text-wrap: pretty;
}
.iv-cta {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--sans); font-size: clamp(12.5px, 1vw, 14px); color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--divider); padding-bottom: 3px;
  transition: border-color .3s ease, gap .4s cubic-bezier(.2,.7,.2,1);
}
.iv-cta:hover { border-color: currentColor; gap: 14px; }
.iv-eyebrow { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: clamp(20px, 2.2vw, 32px); }

/* 2d - text pinned, the work drifts past */












@media (max-width: 899px) {
  
  
  .iv-lead { max-width: none; }
}


/* ---------- 12/13 ---------- */
/* ===== Offerings - the section holds while you scroll the offerings ===== */
/* No visual change: the section keeps its own layout and padding; it is only
   parked in place while each scroll step hands the pane to the next offering. */
.oi-pin-track { position: relative; }
.oi-pin-track.is-pinning > .oi-pin-stage { position: sticky; }
/* while held, the section breathes a little tighter so the whole of it -
   heading, pane and CTA - is readable inside one window */
.oi-pin-track.is-pinning .offering {
  padding-top: var(--oi-pt, clamp(48px, 6vw, 80px)) !important;
  padding-bottom: var(--oi-pb, clamp(96px, 14vw, 180px)) !important;
}


/* ---------- 13/13 ---------- */
/* ===== CTA buttons: one quiet glass system =====
   Hairline edge, a breath of tint, a light blur. Hover only deepens it. */
:root { --cta-ink: #1A1A18; --cta-ink-deep: #1A1A18; }

.nav-cta .btn,
.contact-cta-actions .btn,
.letter-form button.btn {
  font-family: var(--sans);
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition:
    background 0.35s ease, color 0.3s ease, border-color 0.35s ease,
    transform 0.4s cubic-bezier(.2,.7,.2,1) !important;
}

/* --- On the pale sections: ink-tinted glass --- */
.contact-cta-actions .btn,
.letter-form button.btn {
  background: color-mix(in srgb, var(--cta-ink) 5%, transparent) !important;
  color: var(--cta-ink-deep) !important;
  border-color: color-mix(in srgb, var(--cta-ink) 26%, transparent) !important;
}
.contact-cta-actions .btn:hover,
.letter-form button.btn:hover {
  background: color-mix(in srgb, var(--cta-ink) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--cta-ink) 44%, transparent) !important;
  transform: translateY(-1px);
}
/* the second action stays one step quieter than the first */
.contact-cta-actions .btn:nth-child(2) {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--cta-ink) 16%, transparent) !important;
}
.contact-cta-actions .btn:nth-child(2):hover {
  background: color-mix(in srgb, var(--cta-ink) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--cta-ink) 34%, transparent) !important;
}

/* --- Nav: white glass over the film, ink glass over the pale sections --- */
.nav-cta .btn {
  padding: 11px 18px 11px 20px !important;
  font-size: 12px !important;
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.42) !important;
}
.nav-cta .btn:hover {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.72) !important;
  transform: translateY(-1px);
}
.nav.scrolled.nav-light .nav-cta .btn {
  background: color-mix(in srgb, var(--cta-ink) 5%, transparent) !important;
  color: var(--cta-ink-deep) !important;
  border-color: color-mix(in srgb, var(--cta-ink) 26%, transparent) !important;
}
.nav.scrolled.nav-light .nav-cta .btn:hover {
  background: color-mix(in srgb, var(--cta-ink) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--cta-ink) 44%, transparent) !important;
}

/* Arrow: travels a touch further, in step with the lift */
.nav-cta .btn svg,
.contact-cta-actions .btn svg,
.letter-form button.btn svg { transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
.nav-cta .btn:hover svg,
.contact-cta-actions .btn:hover svg,
.letter-form button.btn:hover svg { transform: translate(3px, -3px); }

@media (prefers-reduced-motion: reduce) {
  .nav-cta .btn:hover,
  .contact-cta-actions .btn:hover,
  .letter-form button.btn:hover { transform: none; }
}

/* ===== Phone pass =====
   The nav links were hidden with nothing to open, the headline sat at 25px,
   and most links were half a thumb tall. */

/* Tablet (721-1080): offerings keep tiles left / description right, one size down */
@media (min-width: 721px) and (max-width: 1080px) {
  /* Nav: with the links hidden, the CTA still sits hard right */
  .nav .nav-cta { grid-column: 3; justify-self: end; }
  .oi-split { grid-template-columns: minmax(196px, 232px) 1fr; column-gap: 16px; }
  .oi-list { gap: 8px; }
  .oi-row { height: 64px; gap: 11px; padding: 0 30px 0 10px; }
  .oi-list .oi-row-icon { width: 44px; height: 44px; }
  .oi-list .oi-row-icon img { width: 27px; height: 27px; }
  .oi-row-title { font-size: 14px; }
  .oi-row-desc { font-size: 11.5px; }
  .oi-detail { padding: 16px; }
  
  
  .oi-thread-note { padding-left: 0; }
  /* the arc in the narrower panel: slimmer stops, labels may wrap */
  .oi-anchor { width: 88px; }
  .oi-arc-rail { left: 44px; right: 44px; }
  .oi-anchor-copy small, .oi-trace-note small { white-space: normal; }
  /* Session name above its description, not beside it */
  .oi-form { grid-template-columns: 1fr; gap: 6px; }
  .oi-form-head { flex-direction: row; align-items: baseline; gap: 10px; }
  .oi-form-for { grid-column: 1; margin-top: 2px; }
  /* Tile trims to its own content */
  .oi-panel:not([data-active]) { display: none; }
  /* CTA at the bottom of the tile, same hairline look; header keeps its rule */
  .oi-panel-top { display: contents; }
  .oi-panel-top .oi-panel-eyebrow {
    align-self: stretch; padding-bottom: 9px;
    border-bottom: 1px solid rgba(var(--oi-tint), 0.18);
  }
  .oi-panel-top .oi-cta { order: 99; align-self: flex-start; margin-top: 10px; }
  .oi-panel .oi-thread-note { order: 98; }
  /* "Words from you." on one line */
  .testimonials-aside h2 br { display: none; }
  /* About: two columns like desktop - story left, portrait right (not huge on top) */
  .ab-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 60px); }
  .ab-stay { order: 0; position: sticky; top: clamp(56px, 8vh, 96px); align-self: start; }
  /* Body copy a touch smaller */
  .about-body p,
  .invitation-item p + p,
  .bridge p,
  .letter-form-side > p,
  .contact-cta-sub,
  .peek-line,
  .peek-note,
  .oi-panel-lead p,
  .oi-case p,
  .oi-sub p,
  .oi-note,
  .oi-get-row span,
  .oi-form-line,
  .oi-form-for,
  .letter-latest-card p,
  .letter-body p,
  .oi-prin-lead,
  .oi-prin-list li,
  .ab-para p {
    font-size: 14.5px !important;
  }
}

@media (max-width: 720px) {
  /* Nav: logo + CTA on the first line, the three links as a quiet row beneath */
  .nav .nav-inner {
    grid-template-columns: 1fr auto !important;
    row-gap: 10px !important;
    column-gap: 14px !important;
    align-items: center;
  }
  .nav .logo { grid-column: 1; grid-row: 1; }
  .nav .nav-cta { grid-column: 2; grid-row: 1; justify-self: end; }
  .nav .nav-links {
    display: flex !important;
    grid-column: 1 / -1; grid-row: 2;
    justify-self: stretch;
    justify-content: flex-start;
    gap: 26px !important;
    padding-top: 9px;
    border-top: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 18%, transparent);
  }
  .nav .nav-links a {
    display: inline-flex; align-items: center; min-height: 34px;
    font-size: 10.5px !important; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
  }
  /* The switcher rides on the first line, immediately left of the button. */
  .nav .nav-cta { gap: 12px; }
  .nav .nav-cta .lang {
    min-height: 34px; gap: 5px;
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em;
  }
  .nav-cta .btn { padding: 10px 15px 10px 17px !important; font-size: 11px !important; }

  /* Headline: the hero is the one thing that should feel large on a phone */
  html .nhero .nh-title {
    font-size: clamp(24px, 6.7vw, 30px) !important;
    line-height: 1.18 !important;
    max-width: 26ch;
  }

  /* Thumb-sized targets */
  .nh-bar a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-nav { gap: 0 24px !important; }
  .footer-icons { gap: 8px !important; }
  .footer-icons a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .oi-cta { display: inline-flex; align-items: center; min-height: 44px; }

  /* Offering tiles: CTA moves from the header row to the bottom of the tile,
     keeping its hairline-underline look; the header keeps its rule via the eyebrow */
  .oi-panel-top { display: contents; }
  .oi-panel-top .oi-panel-eyebrow {
    align-self: stretch; padding-bottom: 9px;
    border-bottom: 1px solid rgba(var(--oi-tint), 0.18);
  }
  .oi-panel-top .oi-cta {
    order: 99;
    align-self: flex-start;
    margin-top: 10px;
  }
  .oi-panel .oi-thread-note { order: 98; }

  /* Tile height follows its own content: inactive panels stop taking up space */
  .oi-panel:not([data-active]) { display: none; }

  /* Phone: the offerings split stacks - label, tiles, then the description */
  .oi-split { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .oi-split-label, .oi-list, .oi-detail { grid-column: 1; }
  .oi-list { grid-row: 2; }
  .oi-detail { grid-row: 3; margin-top: clamp(20px, 2.2vw, 28px); }
  
  

  /* Body copy a touch smaller on phones */
  .about-body p,
  .invitation-item p + p,
  .bridge p,
  .letter-form-side > p,
  .contact-cta-sub,
  .peek-line,
  .peek-note,
  .oi-panel-lead p,
  .oi-case p,
  .oi-sub p,
  .oi-note,
  .oi-get-row span,
  .oi-form-line,
  .oi-form-for,
  .letter-latest-card p,
  .oi-prin-lead,
  .oi-prin-list li,
  .ab-para p {
    font-size: 14.5px !important;
  }

  /* Tighter seam between the letters and "Where to start." */
  .letter { padding-bottom: 64px; }
  .contact-cta { min-height: 0; padding-top: 72px; padding-bottom: 80px; }

  /* About: the opening portrait slightly smaller */
  .ab-portrait img { aspect-ratio: 3 / 4.7; max-height: 500px; object-fit: cover; object-position: 50% 22%; }

  /* Testimonials: "Words from you." on one line */
  .testimonials-aside h2 br { display: none; }

  /* Hero: the strip of text under the bottom hairline goes; the line stays as a quiet base */
  .nh-bar .nh-bar-side { display: none; }

  /* The three-month arc, miniature: the same left-to-right journey as desktop,
     sized for a phone - one line, three stops, the sessions breathing between */
  .oi-path { padding: 12px 0 10px; }
  .oi-path-head { padding-bottom: 12px; gap: 8px 12px; }
  .oi-path-title { font-size: 9px; letter-spacing: 0.16em; }
  .oi-legend-keys { gap: 10px; }
  .oi-key { font-size: 8px; letter-spacing: 0.1em; gap: 4px; }
  .oi-key i { width: 5px; height: 5px; }
  .oi-arc-rail { display: block; left: 31px; right: 31px; top: 12px; }
  .oi-arc-row { flex-direction: row; align-items: flex-start; gap: 4px; }
  .oi-anchor { width: 62px; flex: none; flex-direction: column; align-items: center; gap: 7px; }
  .oi-anchor-node { width: 24px; height: 24px; font-size: 9px; }
  .oi-node-dash i, .oi-node-ring i { width: 6px; height: 6px; }
  .oi-anchor-copy { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .oi-anchor-copy b { font-size: 10px; line-height: 1.35; }
  .oi-anchor-copy small { font-size: 9px; line-height: 1.35; white-space: normal; }
  .oi-mid { margin-left: 0; flex: 1; min-width: 0; gap: 7px; }
  .oi-trace { height: 24px; justify-content: space-evenly; gap: 0; padding-left: 0; }
  .oi-stroke { width: 2.5px; }
  .oi-trace-note { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .oi-trace-note b { font-size: 10px; line-height: 1.35; }
  .oi-trace-note small { font-size: 9px; line-height: 1.35; white-space: normal; }

  /* Recent letters: small row items - orb shrinks to a mark beside the text */
  .letter-item .letter-item-inner {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 16px; row-gap: 0;
    align-items: center;
    padding: 16px 0;
  }
  .letter-orb { max-width: 42px; }
  .letter-body { gap: 4px; }
  .letter-meta-text { font-size: 10.5px !important; }
  .letter-body h3 { font-size: 18px; white-space: normal; }
  .letter-body p { font-size: 14px !important; line-height: 1.6; }
}
/* ---------- 14/13 ---------- */
/* Appended after the original thirteen blocks, which is the only safe place
   to add: those are ordered and later rules are meant to win, so anything
   inserted higher up would be overridden by design.

   Contact: a quieter third way in, beneath the two booking buttons, for
   people who are not ready to put something in a calendar. */
.contact-cta-mail {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-muted);
}
.contact-cta-mail a {
  color: var(--text-soft);
  border-bottom: 1px solid var(--divider);
  padding-bottom: 1px;
}
.contact-cta-mail a:hover {
  color: var(--text);
  border-bottom-color: var(--text-soft);
}


/* ---------- 15/13 ---------- */
/* The hero poster, moved out of the <video poster> attribute.

   An attribute cannot answer a media query, so a phone was being shown the
   16:9 still cropped to a quarter of itself. Here it can switch properly.

   This matters more than "a frame that flashes for an instant": main.js block
   9/10 gives anyone with prefers-reduced-motion `preload="none"` and no
   autoplay, deliberately, because a looping decorative background is the thing
   WCAG 2.2.2 asks us not to start unasked. For those visitors the poster is
   not a placeholder - it is the entire hero, permanently.

   Layered OVER the radial gradient defined further up, which stays as the base
   so there is still something warm on screen if the image itself is slow. */
/* The two conditions are MUTUALLY EXCLUSIVE - min-width 721 and max-width 720.
   An unconditional base rule plus a mobile override reads more naturally, but
   it makes the desktop still a background of every screen for as long as it
   takes the cascade to settle, and the browser fetches it. A phone was pulling
   1600x900 it would never show. Matching preloads sit in the <head>; change
   one and you must change the other. */
@media (min-width: 721px) {
  .hero-bg {
    background-image:
      url('../assets/img/hero-poster.jpg'),
      radial-gradient(120% 105% at 76% 44%, #b09876 0%, #6b5c46 36%, #2f2b25 74%, #26241F 100%);
    background-size: cover, cover;
    background-position: center right, center;
    background-repeat: no-repeat, no-repeat;
  }
}

@media (max-width: 720px) {
  .hero-bg {
    background-image:
      url('../assets/img/hero-poster-mobile.jpg'),
      radial-gradient(120% 105% at 76% 44%, #b09876 0%, #6b5c46 36%, #2f2b25 74%, #26241F 100%);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  }

  /* The desktop film is pushed right because the hand sits centre-right of a
     16:9 frame. The vertical film is already composed for this box, so pulling
     it right would undo the framing it was shot with. */
  .hero-bg video { object-position: center center; }
}

/* The vertical film is brighter than the horizontal one in its worst moments -
   sunlit curtains and white bedding where the other had a hand in shadow.
   Measured across all 174 frames, in the band the headline sits in: both films
   have the same median (108 vs 105 of 255), but the vertical one peaks at 187
   against 142. Behind the standard 0.40 scrim that is 4.38:1 contrast on the
   worst frame, against 6.52:1 on desktop.

   4.38:1 already passes - the headline is large text, so the bar is 3:1 - but
   it is visibly worse than every other screen size for no reason. At 0.46 the
   worst frame reaches 5.05:1, which clears even the stricter 4.5:1 bar meant
   for body text, and six percentage points of a centre-weighted radial is not
   something the eye reads as "darkened". Phones only. */
@media (max-width: 720px) {
  .nhero-scrim {
    background:
      radial-gradient(66% 56% at 50% 48%, rgba(15,23,32,0.46) 0%, rgba(15,23,32,0) 72%),
      linear-gradient(180deg, rgba(15,23,32,0.30) 0%, rgba(15,23,32,0) 16%),
      linear-gradient(0deg, rgba(15,23,32,0.38) 0%, rgba(15,23,32,0) 22%);
  }
}