/* ============================================================
   GO BEYOND WHY — Main site (Visitenkarte) page styles
   Builds on base.css. Forest / Moss alternating rhythm.
   ============================================================ */

.wrap { max-width: 1500px; margin: 0 auto; }
.wrap-narrow { max-width: 1080px; margin: 0 auto; }
body { background: var(--forest); }

/* shared section heads */
.sec-head { max-width: 60ch; }
.sec-head .eyebrow { display: block; margin-bottom: 1.1rem; }
.sec-head h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }

/* alternating tone */
.tone-moss { background: var(--moss); }
.tone-forest { background: var(--forest); }
/* stone editorial tone — light warm panel, dark ink */
.tone-stone {
  background: var(--stone);
  color: var(--forest);
  --ink-on-dark: var(--forest);
  --ink-on-dark-2: #4a4a3c;
  --sage-soft: #6a6450;
  --line-dark: rgba(30,42,26,0.16);
}
/* light editorial tone — remaps the dark-on-dark tokens so children flip cleanly */
.tone-parchment {
  background: var(--parchment);
  color: #2B2A26;
  --ink-on-light: #2B2A26;
  --ink-on-light-2: #57544D;
  --ink-on-dark: #2B2A26;
  --ink-on-dark-2: #57544D;
  --stone: #3A3833;
  --sage-soft: #6B675E;
  --sage: #6B675E;
  --line-dark: var(--line-light);
}

/* ===== NAV link cluster ===== */
.nav-links { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); }
.nav-links a { position: relative; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-on-dark-2); transition: color .3s ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--sage-soft); transform: scaleX(0); transform-origin: center; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.nav-links a:hover { color: var(--ink-on-dark); }
.has-active-nav .nav-links a.is-current { color: var(--ink-on-dark); }
.has-active-nav .nav-links a.is-current::after { transform: scaleX(1); }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ============================================================
   SECTION 1 — HERO  (full-width video background)
   ============================================================ */
.s-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 9rem var(--gutter) clamp(5rem, 9vw, 7rem); overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; background: var(--forest); }
.hero-bg video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
/* hero poster — responsive still, LCP element; video fades in after load */
.hero-bg .hero-poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bg video.hero-video { opacity: 0; transition: opacity .9s ease; }
.hero-bg video.hero-video.is-live { opacity: 1; }

/* placeholder shown until a real video is dropped in (sits behind the video) */
.hero-ph { position: absolute; inset: 0; z-index: 0; background-image:
    linear-gradient(rgba(30,42,26,0.18), rgba(20,28,15,0.32)),
    url("../assets/hero-poster.webp");
  background-size: cover; background-position: center; }
.hero-ph .ph-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(200,192,168,0.42); }
.hero-tint { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(120% 100% at 50% 45%, rgba(20,28,15,0.30) 0%, rgba(20,28,15,0.55) 55%, rgba(15,20,11,0.82) 100%); }
.s-hero .wrap { width: 100%; }
.hero-spark { width: 26px; margin: 0 auto clamp(1.6rem, 3.5vw, 2.6rem); }
.hero-spark path { fill: var(--stone); }
.hero-title { font-size: clamp(2.8rem, 7vw, 6.6rem); max-width: 18ch; margin: 0 auto; color: var(--ink-on-dark); }
.hero-title .soft { color: var(--sage-soft); }
.s-hero .lede { margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; max-width: 42ch; color: var(--ink-on-dark); font-weight: 300; }
.scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage-soft); display: flex; align-items: center; gap: 0.7rem; z-index: 1; }
.scroll-hint .ln { width: 46px; height: 1px; background: var(--sage-soft); display: inline-block; transform-origin: left; animation: pull 2.6s ease-in-out infinite; }
@keyframes pull { 0%,100%{ transform: scaleX(.55); opacity:.5 } 50%{ transform: scaleX(1); opacity:1 } }
@media (prefers-reduced-motion: reduce) { .scroll-hint .ln { animation: none; } }

/* ============================================================
   SECTION 2 — INTRO
   ============================================================ */
.s-intro .intro-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.s-intro h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
.s-intro .intro-body { margin-top: clamp(1.5rem, 2.6vw, 2.1rem); }
.s-intro .intro-body p { color: var(--ink-on-dark-2); font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.7; max-width: 46ch; }
.s-intro .intro-body p + p { margin-top: 1.4rem; }
.s-intro .closer { margin-top: clamp(1.8rem, 3vw, 2.6rem); font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.3; color: var(--stone); }

/* north-star definition card */
.northstar { position: relative; overflow: hidden; margin: 0; background: var(--forest); border: 1px solid rgba(138,154,128,0.22); border-radius: 22px; padding: clamp(2rem, 3.6vw, 3.4rem); box-shadow: 0 44px 90px -50px rgba(20,28,15,0.6);
  /* card sits on parchment but is dark — restore the on-dark palette inside it */
  --ink-on-dark: #F0EDE6; --ink-on-dark-2: #C8C0A8; --stone: #C8C0A8; --sage: #6E7D62; --sage-soft: #8A9A80; --line-dark: rgba(138,154,128,0.22);
}
.ns-watermark { position: absolute; right: clamp(-0.5rem, 0vw, 0.5rem); top: clamp(-1.6rem, -2vw, -0.8rem); font-family: var(--serif); font-style: italic; font-size: clamp(11rem, 20vw, 17rem); line-height: 1; color: var(--sage); opacity: 0.13; pointer-events: none; user-select: none; }
.ns-eyebrow { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sage-soft); position: relative; }
.ns-headword { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); position: relative; }
.ns-word { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 4.4vw, 3.9rem); line-height: 1; letter-spacing: -0.01em; color: var(--ink-on-dark); }
.ns-phon { font-family: var(--sans); font-size: clamp(0.85rem, 1vw, 1rem); color: var(--sage-soft); letter-spacing: 0.01em; }
.ns-pos { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.2vw, 1.25rem); color: var(--stone); }
.ns-def { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.1vw, 1.95rem); line-height: 1.32; color: var(--ink-on-dark); margin-top: clamp(1.4rem, 2.6vw, 2.1rem); max-width: 26ch; text-wrap: balance; position: relative; }
.ns-def em { font-style: italic; color: var(--sage-soft); }
.ns-rule { display: block; height: 1px; background: var(--line-dark); margin: clamp(1.6rem, 2.8vw, 2.2rem) 0 clamp(1.1rem, 2vw, 1.5rem); position: relative; }
.ns-foot { font-family: var(--sans); font-size: clamp(0.82rem, 0.95vw, 0.92rem); letter-spacing: 0.04em; color: var(--sage-soft); position: relative; }
@media (max-width: 860px) { .s-intro .intro-grid { grid-template-columns: 1fr; gap: clamp(2rem, 7vw, 3rem); align-items: start; } }

/* ============================================================
   SECTION 3 — WHAT WE DO · hairline Venn (title left / venn right)
   ============================================================ */
.s-what .grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(1.8rem, 3.5vw, 3.5rem); align-items: start; }
.s-what .sec-head { margin: 0; text-align: left; max-width: 38ch; }
.s-what .sec-head .eyebrow { color: var(--sage-soft); }
.s-what .sec-head .sub { margin-top: 1.4rem; font-family: var(--sans); font-size: clamp(0.98rem, 1.1vw, 1.1rem); line-height: 1.6; color: var(--ink-on-dark-2); max-width: 40ch; }
.s-what .sec-head .title-star { display: inline-block; width: 0.46em; height: auto; margin-left: 0.12em; vertical-align: 0.12em; }
.s-what .sec-head .title-star path { fill: var(--sage-soft); }

.venn-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.venn { position: relative; width: min(98%, 540px); aspect-ratio: 1 / 0.92; }
.venn .ring { position: absolute; width: 62%; aspect-ratio: 1; appearance: none; -webkit-appearance: none; background: none; padding: 0; cursor: pointer; font-family: inherit; border-radius: 50%; border: 1px solid rgba(138,154,128,0.45); display: flex; align-items: center; justify-content: center; transition: border-color .5s ease, background .5s ease; }
.venn .ring:focus-visible { outline: none; border-color: var(--stone); }
.venn .ring:nth-child(1) { top: 0; left: 19%; }
.venn .ring:nth-child(2) { bottom: 0; left: 0; }
.venn .ring:nth-child(3) { bottom: 0; right: 0; }
.venn .ring span { font-family: var(--sans); font-size: clamp(0.78rem, 0.9vw, 0.92rem); letter-spacing: 0.02em; color: var(--ink-on-dark-2); text-align: center; max-width: 9ch; line-height: 1.3; transition: color .4s ease; }
.venn .ring:nth-child(1) span { transform: translateY(-58%); }
.venn .ring:nth-child(2) span { transform: translate(-30%, 58%); }
.venn .ring:nth-child(3) span { transform: translate(30%, 58%); }
.venn .core { position: absolute; top: 53%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.venn .core-star { width: clamp(20px, 2.4vw, 28px); height: auto; }
.venn .core-star path { fill: var(--stone); transition: fill .4s ease; }
.venn-wrap[data-active] .core-star path { fill: var(--sage-soft); }
.venn .ring:hover { border-color: var(--stone); background: radial-gradient(circle, rgba(200,192,168,0.06), transparent 72%); }
.venn .ring:hover span { color: var(--stone); }
/* tap / keyboard active state (mobile + a11y) */
.venn .ring.is-on { border-color: var(--stone); background: radial-gradient(circle, rgba(200,192,168,0.06), transparent 72%); }
.venn .ring.is-on span { color: var(--stone); }
.venn-wrap[data-active] .core { color: var(--sage-soft); }

.venn-caption { margin-top: clamp(1.6rem, 3vw, 2.4rem); position: relative; width: 100%; max-width: 44ch; min-height: 4.6rem; display: flex; align-items: flex-start; justify-content: center; text-align: center; }
.venn-cap { position: absolute; font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.4; color: var(--ink-on-dark); opacity: 0; transition: opacity .45s ease; max-width: 40ch; }
.venn-cap.cap-idle { font-style: italic; color: var(--sage-soft); }
/* captions: JS toggles .cap-show on the active caption (robust across engines) */
.venn-cap.cap-show { opacity: 1; }

@media (max-width: 860px) {
  .s-what .grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 7vw, 3.5rem); }
  .s-what .sec-head { text-align: center; margin: 0 auto; max-width: 30ch; }
  .s-what .sec-head .sub { margin-left: auto; margin-right: auto; }
  .venn { width: min(86%, 380px); }
}

/* ============================================================
   SECTION 4 — VALUES · editorial index (stone panel)
   ============================================================ */
.s-values .sec-head { text-align: center; max-width: none; margin: 0 auto clamp(2.4rem, 5vw, 3.5rem); }
.s-values .sec-head .eyebrow { color: #6a6450; }
.s-values .sec-head h2 { color: var(--forest); }
.values-index { max-width: 980px; margin: 0 auto; }
.vrow { display: grid; grid-template-columns: 3.2rem 1fr minmax(0, 0.9fr); align-items: center; gap: 1.2rem 1.8rem; padding: clamp(1.1rem, 2vw, 1.5rem) clamp(0.4rem, 1vw, 0.8rem); border-top: 1px solid rgba(30,42,26,0.16); transition: background .45s ease, padding-left .45s ease; }
.vrow:last-child { border-bottom: 1px solid rgba(30,42,26,0.16); }
.vrow .vn { font-family: var(--serif); font-size: 1rem; color: #6a6450; }
.vrow .vt { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--forest); }
.vrow .vd { font-family: var(--sans); font-size: clamp(0.9rem, 1vw, 1rem); line-height: 1.5; color: #4a4a3c; opacity: 0.6; transition: opacity .4s ease; text-wrap: pretty; }
.vrow:hover { background: rgba(30,42,26,0.045); padding-left: clamp(0.8rem, 1.6vw, 1.3rem); }
.vrow:hover .vd { opacity: 1; }
@media (max-width: 760px) {
  .vrow { grid-template-columns: 2.4rem 1fr; row-gap: 0.5rem; align-items: start; }
  .vrow .vd { grid-column: 2; opacity: 1; }
}


/* ============================================================
   SECTION 5 — PROCESS · drawing journey line
   ============================================================ */
.s-process .sec-head { margin: 0 auto clamp(3rem, 6vw, 5rem); text-align: center; max-width: none; }
.s-process .sec-head h2 .ln { display: block; white-space: nowrap; }
.s-process .sec-head h2 { font-size: clamp(1.55rem, 3.6vw, 3rem); }
.journey { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }
/* the connecting line that draws on scroll */
.journey-line { position: absolute; top: 28px; left: 12%; right: 12%; height: 2px; background: var(--line-dark); overflow: hidden; }
.journey-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sage), var(--sage-soft)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.45,.05,.2,1); }
.s-process.is-revealed .journey-line::after { transform: scaleX(1); }

.step { position: relative; text-align: center; }
.step .dot { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1.5rem; background: var(--forest); border: 1px solid var(--sage-soft); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.2rem; color: var(--stone); position: relative; z-index: 1; transition: background .45s cubic-bezier(.2,.7,.3,1), color .45s ease, border-color .45s ease, transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease; }
.step .dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--sage-soft); opacity: 0; transform: scale(0.8); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
.step:focus-within .dot, .step.reveal .dot { background: var(--sage-soft); color: var(--forest); border-color: transparent; transform: scale(1.08); box-shadow: 0 18px 34px -18px rgba(0,0,0,0.6); }
.step:focus-within .dot::after, .step.reveal .dot::after { opacity: 0.6; transform: scale(1); }
.step:focus-within h3, .step.reveal h3 { color: var(--stone); }
.step h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink-on-dark); margin-bottom: 0.7rem; transition: color .45s ease; }
.step p { font-family: var(--sans); font-size: clamp(0.95rem, 1.05vw, 1.1rem); line-height: 1.6; color: var(--ink-on-dark-2); max-width: 26ch; margin: 0 auto; text-wrap: pretty; }

/* star-bulleted lists under each step, revealed in sequence on scroll (JS adds .is-staged + .reveal) */
.step-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: inline-flex; flex-direction: column; gap: 0.7rem; text-align: left; }
.step-list li { position: relative; padding-left: 1.7rem; font-family: var(--sans); font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.4; color: var(--ink-on-dark-2); max-width: 25ch; text-wrap: pretty; }
.step-list li::before { content: ""; position: absolute; left: 0; top: 0.18em; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='13%20-1%2020%2013'%3E%3Cpath%20fill='%238A9A80'%20d='M22.05,6.37c.65-.55,1.58-.89,3.04-1.15-1.39-.25-2.31-.56-2.95-1.07.21-.4.53-.85.95-1.41-.59.39-1.07.67-1.49.86-.59-.78-.87-1.91-1.17-3.6-.29,1.62-.55,2.72-1.09,3.5-.4-.21-.84-.52-1.39-.93.39.6.68,1.08.86,1.51-.65.55-1.58.89-3.04,1.15,1.39.25,2.31.56,2.95,1.07-.21.4-.53.85-.95,1.41.59-.39,1.07-.67,1.49-.86.59.78.87,1.91,1.17,3.6.29-1.62.55-2.72,1.09-3.5.4.21.84.52,1.39.93-.39-.6-.68-1.08-.86-1.51Z'/%3E%3C/svg%3E") no-repeat center / contain; }
/* collapse only once JS stages the section; without JS every list stays visible */
.s-process.is-staged .step-list { opacity: 0; transform: translateY(8px); max-height: 0; margin-top: 0; overflow: hidden; pointer-events: none; transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.3,1), max-height .6s ease, margin-top .5s ease; }
.s-process.is-staged .step.reveal .step-list, .s-process.is-staged .step:focus-within .step-list { opacity: 1; transform: none; max-height: 22rem; margin-top: 0.9rem; pointer-events: auto; }

/* closing statement under the process, revealed last */
.proc-closer { text-align: center; max-width: 32ch; margin: clamp(3rem, 6vw, 5rem) auto 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.32; color: var(--ink-on-dark); text-wrap: balance; }
.s-process.is-staged .proc-closer { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.s-process.is-staged .proc-closer.reveal { opacity: 1; transform: none; }
@media (max-width: 820px) {
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey-line { top: 0; bottom: 0; left: 27px; right: auto; width: 2px; height: auto; }
  .journey-line::after { background: linear-gradient(180deg, var(--sage), var(--sage-soft)); transform: scaleY(0); transform-origin: top; transition: transform 1.8s cubic-bezier(.45,.05,.2,1); }
  .s-process.is-revealed .journey-line::after { transform: scaleY(1); }
  .step { display: grid; grid-template-columns: 56px 1fr; column-gap: 1.6rem; text-align: left; padding-bottom: clamp(2.5rem, 6vw, 3.5rem); }
  .step:last-child { padding-bottom: 0; }
  .step .dot { margin: 0; }
  .step .step-body { padding-top: 0.6rem; }
  .step p { margin: 0; max-width: 38ch; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-line::after { transform: scaleX(1); }
}

/* ============================================================
   SECTION 6 — VISION / MISSION  (centered statement)
   ============================================================ */
.s-vision { text-align: center; padding-top: clamp(6.5rem, 13vw, 11rem); padding-bottom: clamp(6.5rem, 13vw, 11rem); background-image: linear-gradient(rgba(20,28,15,0.5), rgba(22,30,16,0.62)), url("../assets/mission-bg.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }
.s-vision .vis-spark { width: 22px; height: auto; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); display: block; }
.s-vision .vis-spark path { fill: var(--stone); }
.s-vision .vis-eyebrow { display: block; color: var(--sage-soft); margin-bottom: clamp(1.3rem, 2.4vw, 1.9rem); }
.s-vision .spark { width: 22px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); display: block; }
.s-vision .spark path { fill: var(--sage); }
/* light divider fold — separates yet connects to “Our approach” below */
.mission-fold { display: flex; align-items: center; gap: 1.4rem; width: 100%; max-width: 720px; margin: clamp(3rem, 6vw, 5rem) auto 0; padding: 0 var(--gutter); }
.mission-fold .fold-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(240,237,230,0.4), transparent); }
.mission-fold .fold-star { width: 17px; flex: none; }
.mission-fold .fold-star path { fill: var(--stone); }
.vision-stmt { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.7vw, 2.5rem); line-height: 1.28; letter-spacing: -0.015em; max-width: 42ch; margin: 0 auto; color: var(--ink-on-dark); text-wrap: balance; }
.vision-stmt .lbl { display: block; font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage-soft); margin-bottom: 1.3rem; }
/* the section that follows the mission sits closer, so the fold reads as one connected dark expanse */
.s-vision + .s-what { padding-top: clamp(3rem, 6vw, 5rem); }
.vision-stmt + .vision-stmt { margin-top: clamp(3.5rem, 8vw, 6.5rem); }

/* ============================================================
   SECTION 7 — THE HONEST CONVERSATION  (entry point)
   ============================================================ */
/* ===== THE WORK — three offer cards ===== */
.s-entry .entry-head { text-align: center; max-width: 30ch; margin: 0 auto clamp(2.6rem, 5vw, 4rem); }
.s-entry .entry-head h2 { font-size: clamp(2.4rem, 5vw, 4rem); margin-top: 1.1rem; }
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2vw, 1.8rem); align-items: stretch; }
.offer-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-light); border-radius: 20px; padding: clamp(1.7rem, 2.6vw, 2.4rem); box-shadow: 0 34px 64px -42px rgba(30,42,26,0.30); transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease, background .5s ease, border-color .5s ease; }
.offer-card:hover { transform: translateY(-6px); background: var(--onyx); border-color: var(--onyx); box-shadow: 0 46px 84px -38px rgba(15,15,12,0.6); }
.offer-card:hover .o-num { color: var(--sage-soft); }
.offer-card:hover h3 { color: #fff; }
.offer-card:hover p { color: rgba(255,255,255,0.82); }
.offer-card:hover .offer-meta { color: #fff; border-color: rgba(255,255,255,0.18); }
.offer-card .o-num { font-family: var(--serif); font-size: 1rem; color: #A39C8C; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); transition: color .5s ease; }
.offer-card h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem, 1.9vw, 1.9rem); line-height: 1.1; letter-spacing: -0.01em; color: #25241F; transition: color .5s ease; }
.offer-card p { font-family: var(--sans); font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.6; color: #57544D; margin-top: 0.8rem; text-wrap: pretty; transition: color .5s ease; }
.offer-meta { margin-top: auto; padding-top: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--line-light); display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.45rem; font-family: var(--sans); font-size: clamp(0.74rem, 0.82vw, 0.8rem); letter-spacing: 0.01em; color: #8A857A; transition: color .5s ease, border-color .5s ease; }
.offer-card { /* keep meta pinned to the bottom */ }
.offer-card > p { flex: 1; }
.offer-meta .sep { width: 9px; height: 9px; flex: none; opacity: 0.85; }
.offer-meta .sep path { fill: currentColor; }
.entry-cta { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; justify-content: center; }

@media (max-width: 860px) {
  .offers { grid-template-columns: 1fr; gap: clamp(1rem, 4vw, 1.4rem); }
  .s-entry .entry-head { margin-bottom: clamp(2rem, 6vw, 2.6rem); }
}

/* ============================================================
   SECTION 8 — THE BRIDGE COLLECTIVE  (portrait row)
   ============================================================ */
.s-bridge .sec-head { max-width: 56ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.s-bridge .sec-head .body { margin-top: 1.3rem; }

/* static grid — 4 per row */
.collective { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2vw, 1.8rem); }
.expert { display: flex; flex-direction: column; }
.expert-ph { position: relative; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-dark); background:
    repeating-linear-gradient(135deg, rgba(138,154,128,0.08) 0 2px, transparent 2px 12px),
    radial-gradient(120% 90% at 50% 25%, #33422c, var(--moss-2)); }
.expert-ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.97) contrast(1.01); transition: filter .65s ease, transform .65s ease; }
.expert:hover .expert-ph img, .expert:focus-within .expert-ph img { filter: saturate(0.99) contrast(1.02) brightness(1.03); transform: scale(1.03); }

/* placeholder card (no photo yet) */
.expert-ph--ph { display: flex; align-items: center; justify-content: center; }
.expert-ph--ph .ph-mono { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--sage-soft); opacity: 0.55; }

/* static caption — name + discipline below the photo */
.expert-cap { padding-top: clamp(0.85rem, 1.4vw, 1.15rem); }
.expert-cap h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.12; color: var(--parchment); }
.expert-cap .role { display: block; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); margin-top: 0.5rem; }
.expert { outline: none; }

/* open seats — by invitation only, no hover */
.expert.open .expert-ph { display: flex; align-items: center; justify-content: center; background: rgba(240,237,230,0.018); border-color: rgba(138,154,128,0.28); }
.expert.open .oin { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; opacity: 0.6; }
.expert.open .oin .ostar { width: 22px; height: auto; }
.expert.open .oin .ostar path { fill: var(--sage-soft); }
.expert.open .oin span { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-soft); }

@media (prefers-reduced-motion: reduce) {
  .expert-ph img { transition: none; }
}
@media (max-width: 900px) { .collective { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.1rem; } }
@media (max-width: 520px) { .collective { grid-template-columns: 1fr 1fr; } .expert-cap { text-align: center; } }

/* ============================================================
   SECTION 9 — ABOUT THE FOUNDER
   ============================================================ */
.s-founder .grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.s-founder .portrait { border-radius: 14px; overflow: hidden; aspect-ratio: 3/4; }
.s-founder .portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.02); }
.s-founder h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin: 1.1rem 0 1.6rem; }
.s-founder .body { font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.75; color: var(--ink-on-dark-2); max-width: 54ch; }
.s-founder .body .em { color: var(--stone); font-family: var(--serif); font-style: italic; }

/* availability block — quiet signal of exclusivity */
.availability { margin-top: clamp(2rem, 3.5vw, 2.8rem); padding-top: clamp(1.8rem, 3vw, 2.4rem); border-top: 1px solid var(--line-dark); max-width: 54ch; }
.avail-label { display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-soft); margin-bottom: 1.1rem; }
.avail-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem 1.4rem; }
.avail-slots { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.7rem; }
.avail-slots .slot { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; }
.avail-slots .slot.is-taken { background: var(--sage); border: 1px solid var(--sage); }
.avail-slots .slot.is-open { background: transparent; border: 1px solid var(--stone); position: relative; }
.avail-slots .slot.is-open::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--stone); opacity: 0; transition: opacity .4s ease; }
.availability:hover .slot.is-open::after { opacity: 0.55; }
.avail-copy { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.3; color: var(--stone); margin: 0; }
.avail-cta { display: inline-flex; align-items: center; gap: 0.5em; margin-top: clamp(1.2rem, 2vw, 1.6rem); font-family: var(--sans); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-on-dark); border-bottom: 1px solid var(--sage-soft); padding-bottom: 0.3rem; transition: color .3s ease, border-color .3s ease, gap .3s ease; }
.avail-cta:hover { color: var(--stone); border-color: var(--stone); gap: 0.85em; }
.avail-cta .arrow { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.avail-cta:hover .arrow { transform: translateX(3px); }

@media (max-width: 860px) { .s-founder .grid { grid-template-columns: 1fr; gap: 2rem; } .s-founder .portrait { max-width: 360px; } }

/* ============================================================
   SECTION 10 — NEWSLETTER
   ============================================================ */
.s-news { text-align: center; border-top: 1px solid var(--line-dark); padding-top: clamp(5rem, 10vw, 9rem); padding-bottom: clamp(5rem, 10vw, 9rem); }
/* envelope emblem — hairline lines, glow + opens to reveal the star on hover (echoes the Venn) */
.news-emblem { position: relative; display: inline-flex; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.news-emblem::after { content: ""; position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(circle, rgba(200,192,168,0.16), transparent 68%); opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.news-emblem:hover::after { opacity: 1; }
.news-icon { width: clamp(60px, 7vw, 86px); height: auto; display: block; overflow: visible; }
.news-icon .env-body { fill: none; stroke: var(--sage-soft); stroke-width: 1.2; stroke-linejoin: round; transition: stroke .45s ease; }
.news-icon .env-flap { fill: none; stroke: var(--sage-soft); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center top; transition: transform .6s cubic-bezier(.2,.7,.3,1), stroke .45s ease; }
.news-icon .env-star path { fill: var(--stone); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.6); transition: opacity .5s ease .1s, transform .55s cubic-bezier(.2,.7,.3,1) .1s; }
.news-emblem:hover .env-body { stroke: var(--stone); }
.news-emblem:hover .env-flap { stroke: var(--stone); transform: scaleY(-1); }
.news-emblem:hover .env-star path { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .news-emblem:hover .env-flap { transform: none; } }
.news-h { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.12; letter-spacing: -0.012em; color: var(--ink-on-dark); max-width: 18ch; margin: 0 auto; text-wrap: balance; }
.news-sub { font-family: var(--sans); font-weight: 300; font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.6; color: var(--ink-on-dark-2); max-width: 50ch; margin: clamp(1.4rem, 2.4vw, 2rem) auto 0; }
.news-form { display: flex; align-items: center; gap: 0.4rem; max-width: 480px; margin: clamp(2.2rem, 4vw, 3rem) auto 0; background: var(--moss); border: 1px solid var(--line-dark); border-radius: 999px; padding: 0.4rem 0.4rem 0.4rem 1.5rem; transition: border-color .35s ease; }
.news-form:focus-within { border-color: var(--sage-soft); }
.news-form input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-family: var(--sans); font-size: 0.98rem; color: var(--ink-on-dark); }
.news-form input::placeholder { color: var(--sage-soft); }
.news-submit { flex: none; appearance: none; border: 0; cursor: pointer; font-family: var(--sans); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.01em; color: var(--forest); background: var(--sage-soft); border-radius: 999px; padding: 0.85em 1.6em; display: inline-flex; align-items: center; gap: 0.5em; transition: background .35s ease, transform .35s cubic-bezier(.2,.7,.3,1); }
.news-submit:hover { background: var(--stone); transform: translateX(2px); }
.news-fine { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--sage); margin-top: 1.2rem; }
.news-done { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--stone); margin-top: clamp(2.2rem, 4vw, 3rem); min-height: 1.4em; }

/* ============================================================
   SECTION 11 — FOOTER
   ============================================================ */
.site-footer { position: relative; overflow: hidden; padding: clamp(4.5rem, 9vw, 7rem) var(--gutter) clamp(3.5rem, 6vw, 5rem); border-top: 1px solid var(--line-dark); background: var(--forest); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1.6rem, 3vw, 2.4rem); }
.footer-glow { position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 60%; height: 90%; background: radial-gradient(ellipse at center, rgba(138,154,128,0.10), transparent 70%); pointer-events: none; }
.footer-stamp { position: relative; display: block; width: clamp(47px, 5.9vw, 64px); }
.footer-stamp img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
/* footer mark — vector, ring rotates, y + star stay still */
.footer-stamp .stamp-mark { display: block; width: 100%; height: auto; }
.footer-stamp .stamp-mark .cls-1 { fill: var(--parchment); }
.footer-stamp .stamp-mark .ring { transform-box: fill-box; transform-origin: center; animation: stampSpin 42s linear infinite; }
@keyframes stampSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .footer-stamp .stamp-mark .ring { animation: none; } }

.footer-stmt { position: relative; font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.8vw, 1.55rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-on-dark); }
.footer-meta { position: relative; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--sage); margin-top: -0.6rem; }
.footer-links { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.8rem, 4vw, 3rem); }
.footer-links a { font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink-on-dark-2); border-bottom: 1px solid var(--sage-soft); padding-bottom: 0.3rem; transition: color .3s ease, border-color .3s ease; }
.footer-links a:hover { color: var(--ink-on-dark); border-color: var(--stone); }