/* Konzept 08 — „Jadewasser" (Seladon)
   Porzellan als Grund, Glasur als Atmosphäre, Kiefertusche als Schrift und Linie.
   Alle Flächenglasuren liegen auf dem Canvas UNTER der Linie (Glasur läuft in
   die eingeritzte Linie, sie überdeckt sie nicht). Hier steht nur, was Material
   der Oberfläche ist: Craquelé, Korn, Rand, und die Typografie. */

:root {
  --porcelain: #F1F4EF;
  --porcelain-warm: #E9EDE4;
  --porcelain-light: #F8FAF6;
  --celadon: #A9C3B4;
  --glaze: #7FA391;
  --ink: #1C2823;
  --ink-soft: #35433C;
  --muted: #4E5A53;
  --hair: rgba(28, 40, 35, .14);
  --hair-soft: rgba(28, 40, 35, .09);
  --seal: #A23528;

  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-soft: cubic-bezier(.32, .72, .24, 1);

  --display: "Fraunces", Georgia, serif;
  --sans: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;

  --crackle-coarse: none;
  --crackle-fine: none;
  --glaze-tile: none;
  --grain-tile: none;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative;
  min-height: 100%;
  background: var(--porcelain);
  background-image: linear-gradient(to bottom, #F6F9F4 0%, #EFF3EC 30%, #E9EEE5 68%, #E2E9DE 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.74;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(127, 163, 145, .32); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- fixed material layers ---------- */

#ink {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 1;
  pointer-events: none;
}
.glaze {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: var(--glaze-tile);
  opacity: .9;
}
/* the craquelure belongs to the surface, so it scrolls with the piece rather
   than sitting over it like a scrim. Kept at a whisper: you should notice it
   only when you lean in, exactly like real crazing. */
.crackle {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.crackle-coarse { background-image: var(--crackle-coarse); opacity: .16; }
.crackle-fine   { background-image: var(--crackle-fine);   opacity: .1; }
.grain {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  background-image: var(--grain-tile);
  mix-blend-mode: soft-light;
  opacity: .42;
}
.rim {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 116% 100% at 50% 44%, transparent 56%, rgba(46, 72, 60, .11) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, .35), transparent 14%);
}

main, footer { position: relative; z-index: 4; }

/* ---------- 0 · Ladevorgang: die Marke ----------
   Dieselbe Materialschichtung wie die Seite (Porzellan, Glasur, Craquelé, Korn,
   Rand), damit der Übergang kein Wechsel der Oberfläche ist, sondern nur ein
   Auslaufen der Tusche. Die Schicht liegt über allem, nimmt aber keine Klicks. */

.intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
/* Beim Loslassen geht zuerst der Grund, die Seite steht also schon da, während
   die Tusche als Letztes in ihre Glasur ausläuft. Der Kreis blendet sich auf
   dem Canvas selbst aus, damit Ausbluten und Verschwinden dieselbe Bewegung
   sind. */
.intro-layer { transition: opacity .55s var(--ease-soft); }
.intro-lockup { transition: opacity .66s var(--ease-soft); }
.intro.out .intro-layer,
.intro.out .intro-lockup { opacity: 0; }
.intro.out-fast .intro-layer,
.intro.out-fast .intro-lockup { transition-duration: .2s; }

.intro-layer,
#intro-ink {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Solange die Marke läuft, liegen die Materialschichten der Seite ohnehin
   verdeckt darunter. Sie werden abgehängt, damit über dem zeichnenden Canvas
   nur eine einzige Soft-Light-Ebene liegt statt zwei: sonst kostet jeder Frame
   doppelt, und der Zug wird zäh. */
.intro-on .glaze,
.intro-on .crackle,
.intro-on .grain,
.intro-on .rim { display: none; }
.intro-ground { background-image: linear-gradient(to bottom, #F6F9F4 0%, #EFF3EC 30%, #E9EEE5 68%, #E2E9DE 100%); }
.intro-glaze { background-image: var(--glaze-tile); opacity: .9; }
.intro-crackle-a { background-image: var(--crackle-coarse); opacity: .16; }
.intro-crackle-b { background-image: var(--crackle-fine); opacity: .1; }
#intro-ink { width: 100%; height: 100%; }
.intro-grain {
  background-image: var(--grain-tile);
  mix-blend-mode: soft-light;
  opacity: .42;
}
.intro-rim {
  background:
    radial-gradient(ellipse 116% 100% at 50% 44%, transparent 56%, rgba(46, 72, 60, .11) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, .35), transparent 14%);
}

.intro-lockup {
  position: absolute;
  left: 0; right: 0;
  top: var(--lockup-top, 62%);
  padding: 0 1.2rem;
  text-align: center;
}
.intro-word {
  font-family: var(--display);
  font-optical-sizing: none;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 78, "WONK" 1;
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}
.intro-word.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .intro-layer, .intro-lockup, .intro-word { transition: none; }
}

/* ---------- appear choreography ---------- */

[data-appear] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.15s var(--ease), transform 1.15s var(--ease);
}
[data-appear].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-appear] { opacity: 1; transform: none; transition: none; }
}

/* ---------- shared ---------- */

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 5vw, 3.2rem);
}

.eyebrow {
  display: flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.7rem;
}
.eyebrow.centered { justify-content: center; }
.idx {
  margin-right: 1rem;
  padding-right: 1rem;
  border-right: 1px solid var(--hair);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .12em;
}

h1, h2, h3, .display {
  font-family: var(--display);
  font-optical-sizing: none;
  color: var(--ink);
}

h2 {
  font-weight: 400;
  font-size: clamp(2.05rem, 3.9vw, 3.35rem);
  font-variation-settings: "opsz" 96, "SOFT" 46, "WONK" 0;
  line-height: 1.1;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h3 {
  font-weight: 500;
  font-size: 1.3rem;
  font-variation-settings: "opsz" 30, "SOFT" 40, "WONK" 0;
  line-height: 1.26;
  letter-spacing: -.004em;
  margin-bottom: .6rem;
}

.section-intro {
  max-width: 33em;
  color: var(--ink-soft);
  margin-top: 1.5rem;
}

.text-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 40, 35, .34);
  padding-bottom: .12em;
  transition: border-color .4s var(--ease-soft), color .4s var(--ease-soft);
}
.text-link:hover, .text-link:focus-visible { border-color: var(--ink); }

.more { margin-top: 2.6rem; font-size: .94rem; }

.btn-solid {
  display: inline-block;
  background: var(--ink);
  color: var(--porcelain-light);
  text-decoration: none;
  padding: 1.05rem 2.2rem;
  border-radius: 2px;
  font-size: .93rem;
  font-weight: 400;
  letter-spacing: .015em;
  min-height: 44px;
  transition: background .4s var(--ease-soft), transform .5s var(--ease);
}
.btn-solid:hover, .btn-solid:focus-visible { background: #101913; transform: translateY(-1px); }
.btn-large { padding: 1.2rem 2.9rem; font-size: 1rem; }

.link-quiet {
  color: var(--muted);
  font-size: .93rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: .7rem 0;
  transition: color .4s var(--ease-soft), border-color .4s var(--ease-soft);
}
.link-quiet:hover, .link-quiet:focus-visible { color: var(--ink); border-color: var(--hair); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.3rem clamp(1.4rem, 5vw, 3.2rem) 1.1rem;
  background: linear-gradient(to bottom, rgba(245, 248, 243, .99) 0%, rgba(245, 248, 243, .97) 56%, rgba(245, 248, 243, 0));
}
.brand {
  display: flex;
  align-items: center;
  gap: .72rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.02rem;
  font-variation-settings: "opsz" 20, "SOFT" 30, "WONK" 0;
  letter-spacing: .012em;
  color: var(--ink);
  text-decoration: none;
  padding: .4rem 0;
}
.brand-mark {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.4px solid var(--ink);
  background: radial-gradient(circle at 34% 32%, rgba(255, 255, 255, .9), rgba(127, 163, 145, .55));
  flex: none;
}
.nav-links { display: flex; gap: 2.1rem; }
.nav-links a, .nav-cta {
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color .4s var(--ease-soft);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-cta {
  color: var(--ink);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 2px;
}
.nav-cta:hover, .nav-cta:focus-visible { border-color: var(--ink); }

/* ---------- 1 · Ankunft ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 0 7rem;
}
.hero .eyebrow { margin-bottom: 2.2rem; }

h1 {
  font-weight: 400;
  font-size: clamp(2.75rem, 7vw, 6.1rem);
  font-variation-settings: "opsz" 144, "SOFT" 52, "WONK" 0;
  line-height: 1.0;
  letter-spacing: -.024em;
}
.h1-a { display: block; color: rgba(28, 40, 35, .5); }
.h1-b { display: inline-block; }
.h1-b { font-variation-settings: "opsz" 144, "SOFT" 78, "WONK" 1; }

.hero-grid {
  margin-top: clamp(4.5rem, 11vh, 8.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2.4rem, 6vw, 6rem);
  align-items: end;
}
.lead {
  font-size: clamp(1.06rem, 1.35vw, 1.2rem);
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 34em;
}
.hero-side { padding-bottom: .2rem; }
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.meta {
  margin-top: 1.9rem;
  font-size: .74rem;
  line-height: 1.9;
  letter-spacing: .045em;
  color: var(--muted);
}

.scroll-hint {
  position: absolute;
  left: clamp(1.4rem, 5vw, 3.2rem);
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
  padding-left: calc((100vw - min(1180px, 100vw)) / 2);
}
.hint-rail {
  position: relative;
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, transparent, var(--hair) 20%, var(--hair) 80%, transparent);
}
.hint-drop {
  position: absolute;
  left: -2.5px; top: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--glaze);
  animation: drip 4.2s var(--ease-soft) infinite;
}
@keyframes drip {
  0%   { transform: translateY(0); opacity: 0; }
  18%  { opacity: .95; }
  76%  { transform: translateY(46px); opacity: .95; }
  100% { transform: translateY(52px); opacity: 0; }
}
.hint-word {
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .hint-drop { animation: none; transform: translateY(46px); opacity: .8; }
}

/* ---------- 2 · Die Methode ---------- */

.method { padding: 28vh 0 19vh; }

/* The knockout is masked, not switched: the headline turns porcelain exactly
   where the ink has already passed over it, so there is never a moment of
   dark type on dark ink. --ink-p is the ink front, written per frame. */
.knockout {
  --ink-p: 0;
  font-size: clamp(2.3rem, 5.3vw, 4.7rem);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
  line-height: 1.05;
  letter-spacing: -.022em;
  display: inline-block;
  padding: .2em .12em;
  background-image: linear-gradient(to right,
    var(--porcelain-light) 0,
    var(--porcelain-light) calc(var(--ink-p) * 100%),
    var(--ink) calc(var(--ink-p) * 100% + 2.4%),
    var(--ink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) { .knockout { --ink-p: 1; } }

.method-cols {
  margin-top: 4.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.6rem);
  max-width: 960px;
  color: var(--ink-soft);
}
.method-cols p:first-child::first-letter {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  font-size: 3.5em;
  line-height: .82;
  float: left;
  padding: .06em .1em 0 0;
  color: var(--ink);
}

/* ---------- 3 · Kurse ---------- */

.courses { padding: 10vh 0 14vh; }
.cards {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.2vw, 2rem);
}
/* Three glazed tiles. The glaze thins at the rim and runs to the foot, which
   is why the top edge is porcelain-bright and the bottom pools deep. */
.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(28, 40, 35, .1);
  border-bottom-color: rgba(255, 255, 255, .8);
  border-radius: 2px;
  padding: 2.1rem 1.8rem 2.8rem;
  background-color: rgba(252, 254, 250, .5);
  transition: transform .7s var(--ease), border-color .7s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .95) 35%, rgba(255, 255, 255, .95) 65%, transparent);
}
.card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(118, 156, 137, .46), rgba(127, 163, 145, .16) 44%, transparent);
}
.card > * { position: relative; z-index: 1; }
.card p { flex: 1; }
.card .text-link { align-self: flex-start; margin-top: auto; }
.card:hover { transform: translateY(-3px); border-color: var(--hair); }
.card-num {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 30, "SOFT" 40, "WONK" 0;
  font-size: 1.02rem;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 2.2rem;
}
.card p {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.72;
  margin-bottom: 1.7rem;
}
.card .text-link { font-size: .9rem; }

.starts {
  margin-top: 5.2rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(1.6rem, 5vw, 5rem);
}
.starts h3 { font-size: 1.5rem; margin-bottom: 0; }
.starts p { color: var(--ink-soft); font-size: .96rem; max-width: 40em; }
.starts .quiet { margin-top: 1rem; color: var(--muted); font-size: .88rem; }

/* ---------- 4 · Krankenkasse ---------- */

.zpp { padding: 12vh 0 16vh; }
.zpp-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
}
.zpp-head { grid-column: 1; grid-row: 1; max-width: 30em; }
.zpp-steps { grid-column: 2; grid-row: 1 / span 2; }
.zpp-foot { grid-column: 1; grid-row: 2; align-self: start; }
.zpp-steps { list-style: none; }
.zpp-step {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 1.4rem;
  padding: 1.9rem 0 2rem;
  border-top: 1px solid var(--hair);
}
/* the steps drift right like glaze running down a slope */
.zpp-step:nth-child(2) { margin-left: 1.3rem; }
.zpp-step:nth-child(3) { margin-left: 2.6rem; }
.zpp-step:nth-child(4) { margin-left: 3.9rem; border-bottom: 1px solid var(--hair); }
.step-num {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 60, "SOFT" 40, "WONK" 0;
  font-size: 1.75rem;
  line-height: 1;
  padding-top: .28rem;
  color: rgba(28, 40, 35, .3);
  font-variant-numeric: lining-nums tabular-nums;
}
.zpp-step h3 { font-size: 1.24rem; }
.zpp-step p { color: var(--ink-soft); font-size: .95rem; }

.zpp-foot { margin-top: 3.4rem; padding-top: 2rem; border-top: 1px solid var(--hair-soft); }
.zpp-foot .more { margin-top: 1.8rem; }
.disclaimer {
  max-width: 40em;
  font-size: .81rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 5 · Brennring ---------- */

.still { padding: 14vh 0 14vh; }
.still .eyebrow { margin-bottom: 0; }
.enso-wrap {
  position: relative;
  width: min(620px, 80vw);
  aspect-ratio: 1;
  margin: 1.2rem auto 0;
  display: grid;
  place-items: center;
}
.enso-statement {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 96, "SOFT" 70, "WONK" 1;
  font-size: clamp(1.42rem, 3vw, 2.3rem);
  line-height: 1.52;
  letter-spacing: -.008em;
  text-align: center;
  color: var(--ink);
  max-width: 74%;
}

.triad-wrap { margin-top: clamp(5rem, 12vh, 10rem); }
.triad-intro {
  max-width: 40em;
  margin: 0 auto;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.triad {
  margin-top: 4.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
}
.triad-item { border-top: 1px solid var(--hair); padding-top: 1.5rem; }
.triad-item h3 { font-size: 1.14rem; }
.triad-item p { color: var(--ink-soft); font-size: .93rem; }

/* ---------- 6 · Der Lehrer ---------- */

.about { padding: 12vh 0 14vh; }
.about-grid {
  margin-top: 3.4rem;
  display: grid;
  grid-template-columns: minmax(0, 4.2fr) minmax(0, 7fr);
  gap: clamp(2.4rem, 6vw, 5.4rem);
  align-items: start;
}
.portrait { position: relative; }
.glaze-frame {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 3 / 4;
  /* the piece: porcelain at the rim, glaze pooling toward the foot */
  background: linear-gradient(168deg, #F4F7F2 0%, #C6D9CC 42%, #8FAF9E 76%, #6A8E7D 100%);
}
.glaze-frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.04) brightness(1.07);
}
.glaze-frame::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: var(--crackle-fine);
  opacity: .22;
}
.glaze-frame::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .3), transparent 16%),
    linear-gradient(to top, rgba(40, 66, 55, .28), transparent 26%);
}
.portrait figcaption {
  margin-top: .9rem;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.about-text { max-width: 36em; color: var(--ink-soft); }
.about-quote {
  margin-top: 2.6rem;
  padding-left: 1.7rem;
  border-left: 2px solid rgba(28, 40, 35, .42);
}
.about-quote p {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 60, "SOFT" 70, "WONK" 0;
  font-size: clamp(1.24rem, 2vw, 1.6rem);
  line-height: 1.44;
  color: var(--ink);
}
.creds {
  list-style: none;
  margin-top: 2.8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(1.4rem, 3vw, 2.6rem);
}
.creds li {
  padding: .8rem 0;
  border-top: 1px solid var(--hair-soft);
  font-size: .86rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.creds li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--hair-soft); }

/* ---------- 7 · Abschluss ---------- */

.closing { padding: 20vh clamp(1.4rem, 5vw, 3.2rem) 20vh; }
.closing-inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.closing h2 { font-size: clamp(2.15rem, 4.6vw, 3.9rem); max-width: 15em; }
.closing-text { max-width: 33em; margin-top: 1.7rem; color: var(--ink-soft); }
.cta-row {
  margin-top: 3.4rem;
  display: flex;
  align-items: center;
  gap: clamp(2.6rem, 7vw, 5.5rem);
}
.closing-alt { margin-top: 4.6rem; font-size: .88rem; color: var(--muted); }

.seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  opacity: 0;
  transform: scale(.9) rotate(-6deg);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.seal.in { opacity: 1; transform: rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .seal { opacity: 1; transform: rotate(-3deg); transition: none; } }
.seal svg { width: 80px; height: 80px; display: block; }
.seal-glyph {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Songti SC", "Noto Serif SC", serif;
  font-size: 42px;
  fill: #F4F7F2;
  text-anchor: middle;
}
.seal-caption {
  font-size: .57rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--hair); padding: 3.4rem 0 3.2rem; }
.foot-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.foot-brand {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0;
  font-size: 1.02rem;
  letter-spacing: .012em;
}
.foot-line { margin-top: .35rem; font-size: .82rem; color: var(--muted); }
.foot-links { display: flex; gap: 1.9rem; }
.foot-links a {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.foot-links a:hover, .foot-links a:focus-visible { color: var(--ink); }
.foot-note {
  margin-top: 2.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair-soft);
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--muted);
}

/* ---------- Tablet ---------- */

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.6rem; align-items: start; }
  .hero-side { padding-bottom: 0; }
  .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .cards { grid-template-columns: 1fr 1fr; }
  .cards .card:last-child { grid-column: 1 / -1; }
  .triad { grid-template-columns: 1fr; gap: 0; }
  .triad-item { padding: 1.5rem 0 1.4rem; }
  .zpp-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 3.4rem; }
  .zpp-head, .zpp-steps, .zpp-foot { grid-column: 1; grid-row: auto; }
  .creds { grid-template-columns: 1fr; }
  .creds li:nth-last-child(-n + 2) { border-bottom: none; }
  .creds li:last-child { border-bottom: 1px solid var(--hair-soft); }
}

/* ---------- Mobil ---------- */

@media (max-width: 779px) {
  body { font-size: .98rem; }
  .nav { padding: .95rem 1.2rem .85rem; }
  .nav-links { display: none; }

  .hero { padding: 7rem 0 6rem; min-height: 92svh; }
  .hero-grid { margin-top: 3.4rem; }
  .hero-ctas { gap: 1.4rem; }
  .scroll-hint { display: none; }

  .method { padding: 20vh 0 14vh; }
  .method-cols { grid-template-columns: 1fr; margin-top: 3rem; gap: 1.6rem; }

  .courses { padding: 6vh 0 12vh; }
  .cards { grid-template-columns: 1fr; gap: 1rem; }
  .cards .card:last-child { grid-column: auto; }
  .card-num { margin-bottom: 1.3rem; }
  .starts { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 3.4rem; }

  .zpp { padding: 8vh 0 12vh; }
  .zpp .wrap { padding-left: 3.1rem; }
  .zpp-grid { gap: 2.6rem; }
  .zpp-step,
  .zpp-step:nth-child(2),
  .zpp-step:nth-child(3),
  .zpp-step:nth-child(4) { margin-left: 0; grid-template-columns: 44px 1fr; gap: 1rem; }
  .step-num { font-size: 1.4rem; }

  .still { padding: 8vh 0 10vh; }
  .enso-wrap { width: min(400px, 86vw); }
  .triad-wrap { margin-top: 4.5rem; }

  .about { padding: 6vh 0 12vh; }
  .about-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .portrait { max-width: 300px; }

  .closing { padding: 14vh 1.4rem 12vh; }
  .cta-row { flex-direction: column; gap: 3rem; }
  .closing-alt { margin-top: 3rem; }

  .foot-grid { flex-direction: column; gap: 1.4rem; }
  .foot-links { gap: 1.5rem; }
  .foot-note { flex-direction: column; gap: .4rem; }
}