/* =========================================================
   Elly Kukk — Reiki Master Teacher & Energy Guide
   Apple-inspired, minimalist styling.
   ========================================================= */

:root {
  /* Lock browser-painted UI (scrollbars, form controls, native widgets)
     to a dark palette so the theme is identical on every device,
     regardless of the visitor's system "Appearance" setting. */
  color-scheme: dark;

  /* type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Cormorant Garamond", "Iowan Old Style", "Georgia", serif;

  /* color — locked dark theme for a consistent look across all devices. */
  --bg: #0a0a0d;
  --bg-deep: #0f0f14;
  --ink: #f3f3f5;
  --ink-soft: #c6c6cd;
  --ink-faint: #86868b;
  --hair: rgba(255, 255, 255, 0.10);
  --hair-soft: rgba(255, 255, 255, 0.06);

  /* rainbow */
  --c1: #ff3b30;
  --c2: #ff9500;
  --c3: #ffcc00;
  --c4: #34c759;
  --c5: #00c7ff;
  --c6: #5e5ce6;
  --c7: #bf5af2;

  /* scroll-progress driven (0..1) — updated by main.js */
  --p: 0;
  --p-pre: 0;     /* before-prism progress 0..1 */
  --p-post: 0;    /* after-prism progress 0..1 */
  --prism-pop: 0; /* near-prism focus 0..1 */

  /* prism geometry shared between the prism wrap and the rainbow origin */
  --prism-size: clamp(140px, 18vw, 200px);

  /* layout */
  --max: 1120px;
  --pad: clamp(20px, 4vw, 48px);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Lock horizontal scroll at the root so rotated rainbow rays can't
     create a sideways "rubber band" gesture on mobile. */
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  letter-spacing: -0.005em;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  /* Only allow vertical panning and pinch-zoom — no horizontal pan. */
  touch-action: pan-y pinch-zoom;
}

img { max-width: 100%; display: block; }
a  { color: inherit; text-decoration: none; }

::selection { background: rgba(94, 92, 230, 0.22); }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hair-soft);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav-mark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: opacity 0.2s ease;
}
.nav-mark img {
  height: clamp(24px, 3.4vw, 34px);
  width: auto;
  display: block;
  /* The logo PNG is rainbow on transparent. Drop a faint shadow so it
     reads on both light and dark navs without losing color fidelity. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
}
.nav-mark:hover { opacity: 0.85; }
.nav-links {
  display: flex;
  gap: clamp(14px, 2.2vw, 28px);
}
.nav-links a {
  position: relative;
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: color 0.25s ease;
}
/* Each link carries its own rainbow accent (--hover-c). Both the text and
   the animated underline pick that color up on hover or keyboard focus. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background: var(--hover-c, currentColor);
  box-shadow: 0 0 10px
    color-mix(in oklab, var(--hover-c, currentColor) 55%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--hover-c, var(--ink));
  outline: none;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

/* Rainbow palette assignment by destination — robust to nav re-ordering. */
.nav-links a[href="#testimonials"] { --hover-c: #ff3b30; }  /* red    */
.nav-links a[href="#sessions"]     { --hover-c: #ff9500; }  /* orange */
.nav-links a[href="#classes"]      { --hover-c: #34c759; }  /* green  */
.nav-links a[href="#about"]        { --hover-c: #5e5ce6; }  /* indigo */
.nav-links a[href="#contact"]      { --hover-c: #bf5af2; }  /* violet */

@media (max-width: 640px) {
  .nav-links a:nth-child(4) { display: none; }
}

/* ---------- shared section ---------- */
.section {
  position: relative;
  padding: clamp(90px, 14vh, 160px) 0;
  z-index: 2;
}
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.container.narrow { max-width: 720px; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.section-title {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.section-title.quote { font-style: italic; }

.section-lead {
  margin: 0 0 48px;
  max-width: 640px;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--ink-soft);
}

/* "Panel" — a soft framed surface used in sections that the descending
   white beam passes through (About, Mission). The opaque background
   visually occludes the beam, so it reads as a beam passing *behind*
   the text rather than glowing through it. */
.panel {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--hair-soft);
  border-radius: 28px;
  padding: clamp(36px, 5.5vw, 64px) clamp(28px, 4.5vw, 56px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 60px -38px rgba(0, 0, 0, 0.7),
    0 6px 20px -16px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   FIXED STAGE — beam, prism, rainbow
   The stage is fixed full-viewport. Its children's positions
   and dimensions are driven by --p-pre, --p-post, --prism-pop
   which are written from main.js based on scroll position.
   ============================================================ */
.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Clip the beam/prism/rays at the viewport edges so rotated rays
     can't extend past the screen and cause horizontal scroll on mobile. */
  overflow: hidden;
}

/* --- THE WHITE BEAM --- */
.beam {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 26px;
  /* Grows downward toward the prism (viewport center). */
  height: calc(var(--p-pre) * 50vh);
  /* Fades out after the prism — the rainbow takes over. */
  opacity: calc(1 - var(--p-post) * 1.2);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.beam::before {
  /* outer soft halo */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    50% 100% at 50% 50%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.0) 70%
  );
  filter: blur(2px);
}
/* The white beam — pure white core with a luminous halo. */
.beam-core {
  position: relative;
  width: 2.5px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.95) 18%,
    rgba(255, 255, 255, 1) 100%
  );
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.9),
    0 0 28px rgba(220, 220, 255, 0.55);
}

/* --- THE PRISM ---
   The triangle's apex (at viewBox y=-30) sits at 20% from the element's
   top. We anchor that exact point to viewport center (top: 50vh) so the
   white beam (which ends at 50vh) lands precisely on the apex.
   transform-origin is also the apex, so scaling grows the prism downward
   from the apex point. */
.prism-wrap {
  position: absolute;
  left: 50%;
  top: 50vh;
  width: var(--prism-size);
  aspect-ratio: 1;
  transform: translate(-50%, -20%) scale(calc(0.35 + var(--prism-pop) * 0.85));
  transform-origin: 50% 20%;
  opacity: var(--prism-pop);
  filter: drop-shadow(0 12px 36px rgba(120, 120, 220, 0.35));
  transition: opacity 0.2s ease;
}
/* Flare where the beam meets the prism's apex. */
.prism-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 20%; /* exactly the apex */
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%) scale(calc(0.4 + var(--prism-pop) * 1.6));
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.45) 22%,
    rgba(255, 255, 255, 0.0) 60%
  );
  filter: blur(5px);
  opacity: var(--prism-pop);
  pointer-events: none;
}
.prism { width: 100%; height: 100%; display: block; overflow: visible; }
.prism-shape {
  /* slow shimmer rotation – very subtle */
  transform-origin: 0 0;
  animation: prismShimmer 8s ease-in-out infinite;
}
.prism-base { filter: blur(0.5px); }

@keyframes prismShimmer {
  0%, 100% { filter: none; }
  50%      { filter: brightness(1.15); }
}

/* --- THE RAINBOW FAN ---
   Origin sits at the prism base when --p-post is 0. As you scroll past
   the prism, the origin floats upward so the rainbow eventually fills
   the page. The prism's apex is at 50vh and its base is 0.72 * prism-size
   below that at full scale. */
.rainbow {
  position: absolute;
  left: 50%;
  top: calc(
    50vh + var(--prism-size) * 0.72 - var(--p-post) * 64vh
  );
  width: 0;
  height: 0;
  opacity: calc(var(--p-post) * 1.2);
}
/* Rainbow rays — screen blend lifts the colors against the dark background. */
.ray {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  margin-left: -1.5px;
  /* Each ray has its own angle (set inline) and grows length with --p-post */
  height: calc(40vh + var(--p-post) * 110vh);
  transform: rotate(var(--a));
  transform-origin: top center;
  background: linear-gradient(
    to bottom,
    var(--c) 0%,
    var(--c) 50%,
    color-mix(in oklab, var(--c) 40%, transparent) 85%,
    transparent 100%
  );
  border-radius: 999px;
  mix-blend-mode: screen;
  opacity: 0.78;
  filter: blur(0.6px) drop-shadow(0 0 6px var(--c));
}

/* Subtle "rainbow wash" that becomes visible behind content after the prism */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 100%, rgba(191, 90, 242, 0.06), transparent 60%),
    radial-gradient(40% 60% at 30% 70%, rgba(94, 92, 230, 0.05), transparent 60%),
    radial-gradient(40% 60% at 70% 60%, rgba(255, 149, 0, 0.04), transparent 60%);
  opacity: var(--p-post);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 100px var(--pad) 60px;
  z-index: 3; /* above the stage initially */
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portrait {
  position: relative;
  width: clamp(260px, 31.7vw, 374px);
  aspect-ratio: 1;
  margin-bottom: 32px;
}
.portrait-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(255, 255, 255, 0.85),
      rgba(255, 255, 255, 0) 60%
    );
}
.portrait-photo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  /* This gradient becomes the soft halo visible behind Elly through the
     transparent PNG, so it reads as the radiant source of the beam. */
  background:
    radial-gradient(
      circle at 50% 35%,
      #2a2a32 0%,
      #1a1a20 45%,
      #101015 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.portrait-photo img {
  width: 100%;
  height: 100%;
  /* Cover the circle and bias the crop slightly upward so the face stays
     well-framed even though the portrait is taller than it is wide. */
  object-fit: cover;
  object-position: 50% 18%;
}
.portrait-monogram {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: clamp(48px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(230, 230, 240, 0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.portrait-photo.portrait-empty .portrait-monogram { opacity: 1; }

/* Soft glow halo behind portrait — intensifies near top of scroll */
.portrait-glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.0) 60%
    );
  filter: blur(20px);
  z-index: -1;
  opacity: calc(1 - var(--p-pre) * 0.6);
  pointer-events: none;
}

.hero-name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(54px, 8vw, 96px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-title {
  margin: 14px 0 24px;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-title .dot { margin: 0 8px; opacity: 0.5; }

.hero-tagline {
  margin: 0 auto 32px;
  max-width: 480px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-soft);
  line-height: 1.5;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  box-shadow: 0 12px 30px -12px rgba(20, 20, 35, 0.35);
}
.hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -14px rgba(20, 20, 35, 0.4);
}
.hero-cta svg { transition: transform 0.3s ease; }
.hero-cta:hover svg { transform: translateX(3px); }

/* scroll hint */
.scroll-hint {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--ink-faint);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: calc(1 - var(--p-pre) * 4);
}
.scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--ink-faint), transparent);
  animation: scrollHint 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about .prose p {
  margin: 0 0 1.2em;
  font-size: clamp(17px, 1.45vw, 20px);
  color: var(--ink-soft);
  line-height: 1.7;
}
.about .prose p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 2.4em;
  font-weight: 500;
  float: left;
  line-height: 0.95;
  padding: 0.06em 0.12em 0 0;
  color: var(--ink);
}

/* ============================================================
   MISSION
   ============================================================ */
.mission .section-title {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.25;
  color: var(--ink);
  max-width: 720px;
}
.mission-sub {
  margin: 24px 0 64px;
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--ink-soft);
  max-width: 640px;
}

.values {
  list-style: none;
  margin: 36px 0 0;
  padding: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid var(--hair);
  /* Equal-height columns so different text lengths don't create an uneven
     bottom edge. align-items: stretch is the grid default — we make it
     explicit for clarity. */
  align-items: stretch;
}
.values li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px 22px;
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  border: 1px solid var(--hair-soft);
  border-radius: 16px;
  transition: transform 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.values li:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--hair-soft));
  box-shadow: 0 18px 36px -28px
    color-mix(in oklab, var(--accent) 55%, transparent);
}
.value-mark {
  display: block;
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
  /* a subtle glow so the rainbow color reads even on light backgrounds */
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 55%, transparent);
}
.values li h3 {
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.values li p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
}
.values li em {
  font-style: italic;
  color: var(--ink);
}
@media (max-width: 720px) {
  .values {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
    padding-top: 28px;
  }
}

/* ============================================================
   PRISM TRANSITION
   ============================================================ */
.prism-section {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.prism-caption {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 40px);
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: var(--prism-pop);
  transition: opacity 0.3s ease;
}

/* ============================================================
   SESSIONS / CARDS
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative;
  padding: 36px 32px 32px;
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--hair));
  box-shadow: 0 30px 60px -36px color-mix(in oklab, var(--accent) 60%, transparent);
}
.card-accent {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--accent),
    color-mix(in oklab, var(--accent) 50%, white)
  );
  opacity: 0.85;
}
.card-title {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
}
.card-body {
  margin: 0 0 24px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}
.card-meta {
  margin: 0;
  display: flex;
  gap: 24px;
  border-top: 1px solid var(--hair);
  padding-top: 18px;
}
.card-meta div { display: flex; flex-direction: column; }
.card-meta dt {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 4px;
}
.card-meta dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}

/* ============================================================
   CLASSES
   ============================================================ */
.subhead {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 64px 0 28px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
}
.subhead-rule {
  flex: 1;
  height: 1px;
  background: var(--hair);
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 820px) { .class-grid { grid-template-columns: 1fr; } }

.class-card {
  position: relative;
  padding: 28px 26px;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--bg);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.class-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.85;
}
.class-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--hair));
  box-shadow: 0 22px 48px -32px color-mix(in oklab, var(--accent) 55%, transparent);
}
.class-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 12px;
}
.class-card h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
}
.class-meta {
  margin: 0;
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-faint);
}
.class-meta span:last-child {
  color: var(--ink);
  font-weight: 500;
}
.class-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

/* Credentials & affiliations block — two parallel cards at the end of the
   Classes section: Usui lineage on one side, IARP membership on the other.
   Stacks to one column under ~720px. */
.credentials {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Base credential-card look — shared between the Usui (photo) and
   IARP (logo) variants so they read as a pair. */
.usui,
.iarp-card {
  padding: 24px 26px;
  display: flex;
  align-items: center;
  gap: 22px;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--bg);
}
.usui img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  filter: saturate(0.85);
}
.usui-eyebrow {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.usui-body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* IARP variant — rectangular logo (not a circular portrait) and the
   whole card is a link to iarp.org with a quiet hover. */
.iarp-card {
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.iarp-card img {
  /* Icon-only mark with transparent background — sized to feel
     balanced next to the 84×84 circular Usui portrait. */
  width: 92px;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}
.iarp-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, #5e5ce6 28%, var(--hair));
  box-shadow: 0 20px 40px -28px rgba(94, 92, 230, 0.32);
}

@media (max-width: 720px) {
  .credentials { gap: 12px; }
  .usui,
  .iarp-card { padding: 20px 22px; }
  .usui img { width: 72px; height: 72px; }
  .iarp-card img { width: 80px; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 980px) { .quote-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .quote-grid { grid-template-columns: 1fr; } }

.testimonials .quote {
  margin: 0;
  padding: 28px;
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 18px;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.testimonials .quote::before {
  content: "“";
  position: absolute;
  top: 6px;
  left: 18px;
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.4;
}
.testimonials .quote:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 25%, var(--hair));
  box-shadow: 0 22px 48px -32px color-mix(in oklab, var(--accent) 45%, transparent);
}
.testimonials .quote blockquote {
  margin: 18px 0 16px;
  font-family: var(--font-serif);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink);
}
.testimonials .quote figcaption {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.testimonials .quote figcaption span {
  color: var(--ink-faint);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  display: block;
  padding: 24px 28px;
  border: 1px solid var(--hair);
  border-radius: 18px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  background: var(--bg);
}
.contact-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--c6) 30%, var(--hair));
  box-shadow: 0 22px 48px -32px rgba(94, 92, 230, 0.35);
}
.contact-label {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-value {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 36px 0 56px;
  border-top: 1px solid var(--hair);
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
  position: relative;
  z-index: 2;
  background: var(--bg);
}
.footer .container { display: flex; flex-direction: column; gap: 6px; }
.footer-sub { font-size: 11.5px; opacity: 0.8; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Hide the stage when user prefers reduced motion: still beautiful, just static */
@media (prefers-reduced-motion: reduce) {
  .stage { display: none; }
  html { scroll-behavior: auto; }
  .scroll-line { animation: none; }
}