/* ================================================================
   SHIROYAGI JUKU — Premium Design System
   Color: Deep Navy + Gold Accent + Warm Cream
   Typography: Zen Old Mincho (serif) + Noto Sans JP (sans)
   Mobile-first responsive design
================================================================ */

/* ── DESIGN TOKENS ── */
:root {
  --ink:       #0A1628;
  --ink-2:     #2C3E50;
  --ink-3:     #6B7B8D;
  --ink-4:     #9EAAB6;
  --bg:        #F8F6F2;
  --bg-2:      #F0ECE4;
  --bg-dark:   #0A1628;
  --cream:     #EDE9DF;
  --gold:      #C4A265;
  --gold-lt:   #D4B87A;
  --gold-dk:   #A8884D;
  --blue:      #1B3A5C;
  --blue-lt:   #EAF0F5;
  --white:     #FFFFFF;
  --rule:      rgba(10,22,40,.08);
  --rule-gold: rgba(196,162,101,.25);
  --azure:     #0091EA;

  --serif:     'Zen Old Mincho', 'Georgia', serif;
  --sans:      'Noto Sans JP', sans-serif;
  --display:   'Cormorant Garamond', 'Zen Old Mincho', serif;
  --ease:      cubic-bezier(0.22,1,0.36,1);

  --nav-h:     80px;
  --container:  1200px;
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:var(--sans); color:var(--ink); background:var(--bg); overflow-x:hidden; line-height:1.9; }
img  { display:block; max-width:100%; height:auto; }
a    { text-decoration:none; color:inherit; }
button { font-family:inherit; }
ul, ol { list-style:none; }


/* ================================================================
   UTILITY
================================================================ */
.container { max-width:var(--container); margin:0 auto; padding:0 24px; }
@media(min-width:768px) { .container { padding:0 48px; } }

.sec { padding:80px 0; }
@media(min-width:768px) { .sec { padding:80px 0; } }
@media(min-width:1024px) { .sec { padding:120px 0; } }

.sec-eyebrow {
  display:block;
  font-family:var(--display);
  font-size:.7rem; letter-spacing:.35em; color:var(--gold);
  margin-bottom:20px;
  text-transform:uppercase;
}
.sec-title {
  font-family:var(--serif);
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  font-weight:900; line-height:1.6; letter-spacing:.04em;
  color:var(--ink);
}
.sec-lead {
  font-size:.88rem; color:var(--ink-3);
  line-height:2.3; font-weight:300;
  max-width:540px; margin-top:18px;
}
.text-center { text-align:center; }
.text-center .sec-lead { margin-left:auto; margin-right:auto; }


/* ================================================================
   NAVIGATION
================================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:12px 0;
  background:rgba(248,246,242,.98);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  box-shadow:0 1px 0 var(--rule);
  transition:all .5s var(--ease);
}
.nav-inner {
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
}
@media(min-width:768px) { .nav-inner { padding:0 48px; } }

.nav-logo {
  display:flex; align-items:center; gap:12px;
}
.nav-logo-img {
  width:36px; height:36px; object-fit:contain;
}
.nav-logo-text { display:flex; flex-direction:column; }
.nav-logo-name {
  font-family:var(--serif); font-size:.95rem; font-weight:700;
  color:var(--ink); letter-spacing:.12em; line-height:1.2;
}
.nav-logo-sub {
  font-size:.55rem; color:var(--ink-4);
  letter-spacing:.08em; margin-top:1px;
}

.nav-links {
  display:none; align-items:center; gap:32px;
}
@media(min-width:960px) { .nav-links { display:flex; } }

.nav-links a {
  font-size:.72rem; color:var(--ink); font-weight:500;
  letter-spacing:.06em; transition:color .3s;
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--gold);
  transition:width .3s var(--ease);
}
.nav-links a:hover { color:var(--ink); }
.nav-links a:hover::after { width:100%; }

.nav-links a.nav-cta {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:600;
  color:var(--white); background:var(--azure);
  padding:10px 28px; border-radius:100px;
  letter-spacing:.06em;
  transition:all .3s;
  border:none; cursor:pointer;
}
.nav-links a.nav-cta:hover { background:#0077c2; color:var(--white); }
.nav-links a.nav-cta::after { display:none; }

/* Hamburger */
.hamburger {
  display:flex; flex-direction:column; justify-content:center;
  background:none; border:none; cursor:pointer; padding:6px;
  gap:5px; width:36px; height:36px;
}
@media(min-width:960px) { .hamburger { display:none; } }
.hamburger span {
  display:block; width:20px; height:1.5px; background:var(--ink);
  border-radius:2px; transition:all .3s var(--ease);
  margin:0 auto;
}

/* Mobile menu */
.mob {
  position:fixed; inset:0; background:var(--bg); z-index:99;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease);
}
.mob.active { opacity:1; pointer-events:all; }
.mob-links { text-align:center; }
.mob-links li { margin-bottom:28px; }
.mob-links a {
  font-family:var(--serif); font-size:1.1rem; color:var(--ink);
  font-weight:700; letter-spacing:.1em;
}
.mob-cta { margin-top:40px; }


/* ================================================================
   HERO — Editorial / Magazine Cover (Final Version)
   方眼ノート背景 ＋ 斜め帯 ＋ 5枚コラージュ ＋ オレンジマーカー
================================================================ */

/* ── Utility (sp/pc display toggle) ── */
.sp-only { display:inline; }
@media(min-width:768px) { .sp-only { display:none; } }
.pc-only { display:none; }
@media(min-width:768px) { .pc-only { display:inline; } }

/* ── Hero base ── */
.hero-ed {
  --azure:      #0091EA;
  --azure-lt:   #40C4FF;
  --azure-dk:   #0068B7;
  --azure-bg:   rgba(0,145,234,.06);
  --accent:     #FF7A00;
  --accent-lt:  #FFB347;
  --accent-dk:  #E06800;
  --charcoal:   #2A2A2A;
  --charcoal-m: #4A4A4A;
  --charcoal-l: #777;

  position:relative;
  background:#FAFCFF;
  overflow:hidden;
  min-height:100vh;
  display:flex;
  align-items:center;
}

/* ── 方眼ノート背景 ── */
.ed-grid-bg {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(0,145,234,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,145,234,.15) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}

/* ── 装飾：アジュール円（大小散らす） ── */
.ed-deco { position:absolute; pointer-events:none; z-index:0; }

.ed-circle-1 {
  width:clamp(320px,42vw,620px); height:clamp(320px,42vw,620px);
  border-radius:50%;
  background:var(--azure);
  opacity:.18;
  top:-12%; right:-8%;
  animation:edFloat 12s ease-in-out infinite;
}
.ed-circle-2 {
  width:120px; height:120px;
  border-radius:50%;
  background:var(--azure);
  opacity:.22;
  bottom:8%; left:6%;
  animation:edFloat 8s ease-in-out infinite reverse;
}
.ed-circle-3 {
  width:60px; height:60px;
  border-radius:50%;
  background:var(--azure);
  opacity:.14;
  top:35%; left:48%;
  animation:edFloat 10s 2s ease-in-out infinite;
}

@keyframes edFloat {
  0%,100% { transform:translate(0,0); }
  50%     { transform:translate(10px,-14px); }
}

/* ── Inner wrapper ── */
.hero-ed-inner {
  max-width:var(--container); margin:0 auto;
  padding:calc(var(--nav-h) + 48px) 20px 48px;
  position:relative; z-index:2; width:100%;
}
@media(min-width:768px)  { .hero-ed-inner { padding:calc(var(--nav-h) + 56px) 48px 56px; } }
@media(min-width:1200px) { .hero-ed-inner { padding:calc(var(--nav-h) + 72px) 48px 72px; } }

/* ── Grid layout ── */
.hero-ed-grid {
  display:grid; grid-template-columns:1fr;
  gap:40px; align-items:center;
}
@media(min-width:960px) {
  .hero-ed-grid { grid-template-columns:1.1fr 1fr; gap:36px; }
}

/* ================================================================
   LEFT: テキストコンテンツ（全体を斜めに）
================================================================ */
.hero-ed-content {
  position:relative; z-index:3;
  transform:rotate(-5deg);
  transform-origin:left center;
  animation:edUpTilt .7s .1s both;
}

.hero-ed-kicker {
  font-family:var(--sans);
  font-size:.72rem; font-weight:500;
  letter-spacing:.1em; color:var(--azure);
  margin-bottom:18px; display:block;
  font-style:italic;
  animation:edUp .7s .15s both;
}

/* ── ヘッドライン ── */
.hero-ed-title {
  font-family:var(--sans);
  font-weight:900;
  color:var(--charcoal);
  margin-bottom:24px;
  animation:edUp .7s .25s both;
}

/* 「答えを教える塾じゃない。」＝ アジュール斜め帯＋白抜き */
.ed-title-band {
  display:block;
  background:var(--azure);
  color:#fff;
  font-size:clamp(1.4rem, 3.6vw, 2.8rem);
  font-weight:900;
  padding:10px 28px 10px 20px;
  margin-bottom:14px;
  width:fit-content;
  white-space:nowrap;
  letter-spacing:.04em;
  line-height:1.3;
  box-shadow:4px 4px 0 rgba(0,0,0,.06);
}

/* メインコピー各行：ブロック表示で1行ずつ */
.ed-title-line {
  display:block;
  font-size:clamp(2rem, 5.5vw, 3.8rem);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.3;
}

/* 「自分はできる」＝ オレンジマーカー線 */
.em-marker {
  position:relative; display:inline;
  color:var(--charcoal);
}
.em-marker::after {
  content:''; position:absolute;
  left:-2px; right:-2px; bottom:.05em;
  height:.35em;
  background:var(--accent);
  opacity:.35;
  z-index:-1;
  transform:skewX(-3deg);
  border-radius:2px;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s cubic-bezier(.22,1,.36,1);
}
.em-marker.active::after {
  clip-path:inset(0 0 0 0);
}

/* ── CTAエリア ── */
.hero-ed-actions {
  display:flex; align-items:center;
  gap:14px; flex-wrap:wrap;
  position:relative;
  transform:rotate(5deg);
  transform-origin:left center;
  animation:edUpStraight .7s .45s both;
}

/* 手書き風矢印（タイトル→ボタン間） */
.hero-arrow-svg {
  display:block;
  color:var(--accent);
  margin:14px 0 6px;
  transform:rotate(5deg);
  animation:edArrowBob 2.5s ease-in-out infinite;
}
@media(max-width:959px) { .hero-arrow-svg { width:36px; height:42px; } }

@keyframes edArrowBob {
  0%,100% { transform:translate(0,0) rotate(0deg); }
  50%     { transform:translate(4px,-6px) rotate(-5deg); }
}

/* ── CTAボタン ── */
.btn-ed-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:#fff;
  padding:16px 38px; border-radius:60px;
  font-family:var(--sans);
  font-size:.84rem; font-weight:700; letter-spacing:.04em;
  border:none; cursor:pointer;
  transition:all .4s var(--ease);
  box-shadow:0 6px 24px rgba(255,122,0,.3);
  position:relative; overflow:hidden;
}
.btn-ed-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent, rgba(255,255,255,.25), transparent);
  transform:translateX(-100%);
  transition:transform .6s var(--ease);
}
.btn-ed-primary:hover::before { transform:translateX(100%); }
.btn-ed-primary:hover {
  background:var(--accent-dk);
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(255,122,0,.4);
}
.btn-ed-primary .arrow { transition:transform .3s; font-weight:300; }
.btn-ed-primary:hover .arrow { transform:translateX(5px); }

.btn-ed-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--accent);
  padding:15px 30px; border-radius:60px;
  font-family:var(--sans);
  font-size:.78rem; font-weight:600; letter-spacing:.03em;
  border:2px solid var(--accent);
  cursor:pointer; transition:all .4s var(--ease);
}
.btn-ed-ghost:hover {
  background:var(--accent);
  color:#fff;
}


/* ================================================================
   RIGHT: 写真コラージュ（3枚・メリハリ配置）
================================================================ */
.hero-ed-collage {
  position:relative;
  width:100%;
  aspect-ratio:1/0.85;
  transform:rotate(-5deg);
  transform-origin:center center;
  animation:edUpTiltCollage .8s .4s both;
  z-index:2;
}

/* 共通：写真カード */
.collage-photo {
  position:absolute;
  padding:0;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.12);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.collage-photo:hover {
  z-index:10 !important;
  transform:scale(1.03) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.18);
}
.collage-photo img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ── 写真① メイン（大・中央上） ── */
.cp-1 {
  width:72%; aspect-ratio:3/2;
  top:0; left:14%;
  transform:rotate(2deg);
  z-index:3;
  animation:edPhoto .7s .5s both;
}

/* ── 写真② 左下（小・メインに重なる） ── */
.cp-2 {
  width:46%; aspect-ratio:4/3;
  bottom:0; left:0;
  transform:rotate(-4deg);
  z-index:4;
  animation:edPhoto .7s .7s both;
}

/* ── 写真③ 右下（小・メインに重なる） ── */
.cp-3 {
  width:46%; aspect-ratio:4/3;
  bottom:4%; right:0;
  transform:rotate(3deg);
  z-index:5;
  animation:edPhoto .7s .9s both;
}

/* ── オレンジアクセントマーク ── */
.collage-accent {
  position:absolute; pointer-events:none; z-index:10;
  width:22px; height:22px;
}
.collage-accent::before,
.collage-accent::after {
  content:''; position:absolute;
  background:var(--accent); border-radius:1px;
}
.ca-1 { top:-8px; right:10%; }
.ca-1::before { width:3px; height:16px; transform:rotate(-25deg); }
.ca-1::after { width:3px; height:12px; left:10px; top:3px; transform:rotate(20deg); }
.ca-2 { top:2%; right:-4px; }
.ca-2::before { width:3px; height:14px; transform:rotate(-10deg); }
.ca-2::after { width:3px; height:10px; left:8px; top:2px; transform:rotate(30deg); }

/* モバイル：コラージュ */
@media(max-width:959px) {
  .hero-ed-collage {
    aspect-ratio:1/0.82;
    transform:rotate(-3deg);
  }
  .cp-1 {
    width:78%; left:11%; top:0;
  }
  .cp-2 {
    width:50%; bottom:-4%; left:-2%;
  }
  .cp-3 {
    width:50%; bottom:0; right:-2%;
  }
  .collage-accent { display:none; }
}


/* ── ロゴスタンプ（右下） ── */
.hero-ed-stamp {
  position:absolute;
  bottom:28px; right:36px; z-index:6;
  animation:edPop .5s 1.4s both;
  transition:transform .4s var(--ease);
}
.hero-ed-stamp:hover { transform:rotate(-8deg) scale(1.1); }
.stamp-logo {
  width:64px; height:64px;
  object-fit:contain;
  background:#fff; border-radius:50%;
  padding:6px;
  box-shadow:0 4px 20px rgba(0,0,0,.12), 0 0 0 3px var(--azure);
}
@media(max-width:767px) {
  .hero-ed-stamp { bottom:16px; right:16px; }
  .stamp-logo { width:48px; height:48px; }
}


/* ── Keyframes ── */
@keyframes edUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes edUpTilt {
  from { opacity:0; transform:translateY(28px) rotate(-5deg); }
  to   { opacity:1; transform:translateY(0) rotate(-5deg); }
}
@keyframes edUpTiltCollage {
  from { opacity:0; transform:translateY(28px) rotate(-5deg); }
  to   { opacity:1; transform:translateY(0) rotate(-5deg); }
}
@keyframes edUpStraight {
  from { opacity:0; transform:translateY(28px) rotate(5deg); }
  to   { opacity:1; transform:translateY(0) rotate(5deg); }
}
@keyframes edPhoto {
  from { opacity:0; transform:scale(.9); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes edPop {
  0%   { opacity:0; transform:scale(0); }
  70%  { transform:scale(1.2); }
  100% { opacity:1; transform:scale(1); }
}

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold); color:var(--white);
  padding:16px 40px; border-radius:2px;
  font-size:.8rem; font-weight:700; letter-spacing:.08em;
  transition:all .4s var(--ease);
  border:none; cursor:pointer;
}
.btn-primary:hover { background:var(--gold-dk); transform:translateY(-2px); box-shadow:0 16px 48px rgba(196,162,101,.3); }
.btn-primary .arrow { transition:transform .3s; font-weight:300; }
.btn-primary:hover .arrow { transform:translateX(4px); }

.btn-outline {
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--ink-3);
  padding:15px 36px; border-radius:2px;
  font-size:.78rem; font-weight:400; letter-spacing:.06em;
  border:1px solid var(--rule);
  transition:all .3s;
  cursor:pointer;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

/* White variant for dark backgrounds (hero, CTA sections etc.) */
.hero .btn-outline,
.cta-section .btn-outline { color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.2); }
.hero .btn-outline:hover,
.cta-section .btn-outline:hover { border-color:var(--gold-lt); color:var(--gold-lt); }

.btn-dark {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--white);
  padding:16px 40px; border-radius:2px;
  font-size:.8rem; font-weight:700; letter-spacing:.08em;
  transition:all .4s var(--ease);
  border:none; cursor:pointer;
}
.btn-dark:hover { background:var(--gold-dk); transform:translateY(-2px); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--ink-2);
  padding:12px 0;
  font-size:.76rem; font-weight:500; letter-spacing:.05em;
  border:none; border-bottom:1px solid var(--rule);
  cursor:pointer; transition:all .3s;
}
.btn-ghost:hover { color:var(--gold); border-color:var(--gold); }


/* ================================================================
   FACTS BAR (with gold line-art icons)
================================================================ */
.facts {
  background:var(--white);
  border-bottom:1px solid var(--rule);
}
.facts-inner {
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr;
}
@media(min-width:768px) {
  .facts-inner { padding:0 48px; grid-template-columns:repeat(4,1fr); }
}

.fact-icon {
  width:40px; height:40px;
  color:var(--gold);
  margin:0 auto 14px;
  opacity:.7;
  transition:opacity .3s, transform .3s var(--ease);
}
.fact-item:hover .fact-icon { opacity:1; transform:scale(1.1); }
.fact-icon svg { width:100%; height:100%; }

.fact-item {
  padding:36px 12px; text-align:center;
  border-bottom:1px solid var(--rule);
}
@media(min-width:768px) {
  .fact-item {
    padding:48px 0; border-bottom:none;
    border-right:1px solid var(--rule);
  }
  .fact-item:last-child { border-right:none; }
}
.fact-num {
  font-family:var(--display);
  font-size:2rem; font-weight:300;
  color:var(--ink); line-height:1;
  margin-bottom:8px; letter-spacing:-.02em;
}
@media(min-width:768px) { .fact-num { font-size:2.6rem; } }
.fact-label {
  font-size:.72rem; font-weight:600; color:var(--ink);
  letter-spacing:.06em; margin-bottom:3px;
}
.fact-sub { font-size:.62rem; color:var(--ink-4); letter-spacing:.04em; }


/* ================================================================
   PROBLEMS (Pain Points)
================================================================ */
.problems { background:var(--white); padding-top:24px; }
.problems-header { text-align:center; margin-bottom:36px; }
@media(min-width:768px) { .problems { padding-top:48px; } .problems-header { margin-bottom:56px; } }
.problems-header .sec-lead { margin:18px auto 0; }

.prob-list { border-top:1px solid var(--rule); margin-bottom:60px; }
@media(min-width:768px) { .prob-list { margin-bottom:100px; } }

.prob-row {
  display:grid; grid-template-columns:44px 1fr;
  border-bottom:1px solid var(--rule);
  padding:32px 0; gap:0;
  transition:background .3s;
}
@media(min-width:768px) {
  .prob-row { grid-template-columns:72px 1fr 1fr; padding:48px 0; }
}
.prob-row:hover { background:var(--bg); }

.prob-n {
  font-family:var(--display);
  font-size:.9rem; font-weight:300; letter-spacing:.2em;
  color:var(--gold); padding-top:4px;
}
.prob-q {
  font-family:var(--serif);
  font-size:.95rem; font-weight:700;
  line-height:1.7; color:var(--ink);
  margin-bottom:12px;
}
@media(min-width:768px) {
  .prob-q { font-size:1.05rem; padding-right:48px; margin-bottom:0; }
}
.prob-a {
  font-size:.83rem; color:var(--ink-3);
  line-height:2.1; font-weight:300;
  grid-column:1 / -1;
  padding-top:8px;
}
@media(min-width:768px) { .prob-a { grid-column:auto; padding-top:0; } }

.prob-answer {
  background:var(--bg-dark);
  color:var(--white);
  border-radius:2px;
  padding:48px 24px;
  text-align:center;
  position:relative; overflow:hidden;
}
@media(min-width:768px) { .prob-answer { padding:72px; } }

.prob-answer::before {
  content:''; position:absolute;
  top:-120px; right:-80px;
  width:360px; height:360px; border-radius:50%;
  background:rgba(196,162,101,.08); pointer-events:none;
}
.prob-answer-title {
  font-family:var(--serif);
  font-size:clamp(1rem,2vw,1.35rem);
  font-weight:700; line-height:1.85;
  margin-bottom:18px; position:relative;
}
.prob-answer-body {
  font-size:.82rem; color:rgba(255,255,255,.5);
  line-height:2.2; max-width:520px;
  margin:0 auto; font-weight:300; position:relative;
}


/* ================================================================
   FEATURES
================================================================ */
.features { background:var(--bg); padding:0; }

.feat {
  display:grid; grid-template-columns:1fr;
  border-bottom:1px solid var(--rule);
}
@media(min-width:768px) {
  .feat { grid-template-columns:1fr 1fr; min-height:520px; }
  .feat:nth-child(even) { direction:rtl; }
  .feat:nth-child(even) > * { direction:ltr; }
}

.feat-img {
  position:relative; overflow:hidden;
  min-height:260px;
}
@media(min-width:768px) { .feat-img { min-height:0; } }
.feat-img img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 10s var(--ease);
}
.feat:hover .feat-img img { transform:scale(1.04); }

.feat-body {
  display:flex; flex-direction:column; justify-content:center;
  padding:40px 24px;
  background:var(--white);
}
@media(min-width:768px) { .feat-body { padding:72px 64px; } }

.feat-point {
  font-family:var(--display);
  font-size:.7rem; letter-spacing:.3em; color:var(--gold);
  margin-bottom:28px; display:block;
}
.feat-title {
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.9vw,1.3rem);
  font-weight:700; line-height:1.8;
  color:var(--ink); margin-bottom:28px;
}
.feat-text {
  font-size:.84rem; color:var(--ink-3);
  line-height:2.3; margin-bottom:14px; font-weight:300;
}
.feat-text:last-of-type { margin-bottom:0; }
.feat-tag {
  display:inline-block; margin-top:32px;
  padding:8px 0;
  border-top:1px solid var(--rule-gold);
  font-size:.72rem; color:var(--gold-dk);
  font-weight:500; letter-spacing:.05em;
}


/* ================================================================
   COMPARISON TABLE
================================================================ */
.comparison { background:var(--white); }
.comparison-header { text-align:center; margin-bottom:48px; }
@media(min-width:768px) { .comparison-header { margin-bottom:72px; } }
.comparison-header .sec-lead { margin:18px auto 0; }

.comp-wrap {
  max-width:800px; margin:0 auto;
  border:1px solid var(--rule);
  border-radius:2px; overflow-x:auto;
}
.comp-row {
  display:grid; grid-template-columns:80px 1fr 1fr;
  border-bottom:1px solid var(--rule);
  min-width:480px;
}
@media(min-width:768px) { .comp-row { grid-template-columns:160px 1fr 1fr; } }
.comp-row:last-child { border-bottom:none; }
.comp-row.head { background:var(--bg-dark); }
.comp-cell {
  padding:14px 12px;
  font-size:.75rem; line-height:1.7;
  border-right:1px solid var(--rule);
}
@media(min-width:768px) { .comp-cell { padding:20px 28px; font-size:.8rem; } }
.comp-cell:last-child { border-right:none; }
.comp-row.head .comp-cell {
  color:rgba(255,255,255,.6);
  font-size:.62rem; font-weight:600;
  letter-spacing:.1em; border-color:rgba(255,255,255,.06);
}
.comp-cell.lbl {
  background:var(--bg); font-weight:600;
  color:var(--ink); font-size:.72rem;
}
.comp-cell.ours { color:var(--gold-dk); font-weight:600; }
.comp-cell.theirs { color:var(--ink-4); font-weight:300; }


/* ================================================================
   TEACHER / INSTRUCTOR
================================================================ */
.teacher { background:var(--bg); padding:0; }

.teacher-intro {
  display:grid; grid-template-columns:1fr;
  border-bottom:1px solid var(--rule);
}
@media(min-width:768px) {
  .teacher-intro { grid-template-columns:35% 65%; min-height:340px; }
}
.teacher-photo {
  position:relative; overflow:hidden; aspect-ratio:1045/1296;
}
@media(min-width:768px) { .teacher-photo { aspect-ratio:unset; min-height:0; max-height:none; } }
.teacher-photo img {
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  transition:transform 8s var(--ease);
}
.teacher-photo:hover img { transform:scale(1.03); }

.teacher-id {
  display:flex; flex-direction:column;
  justify-content:flex-end;
  padding:40px 24px;
  background:var(--white);
}
@media(min-width:768px) { .teacher-id { padding:40px 48px; } }

.teacher-id-role {
  font-family:var(--display);
  font-size:.7rem; letter-spacing:.3em; color:var(--gold);
  margin-bottom:20px; display:block;
}
.teacher-id-name {
  font-family:var(--serif);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:900; line-height:1.25;
  letter-spacing:.06em; color:var(--ink);
  margin-bottom:16px;
}
@media(max-width:767px) {
  .teacher-id-name { white-space:nowrap; }
  .teacher-id-name br { display:none; }
}
.teacher-id-univ {
  display:inline-block;
  font-size:.72rem; color:var(--ink-3);
  letter-spacing:.08em; padding:10px 0;
  border-top:1px solid var(--rule-gold);
  font-weight:400;
}
.teacher-id-desc {
  font-size:.84rem; color:var(--ink-3);
  line-height:2.2; font-weight:300;
  margin-top:24px; max-width:380px;
}

/* Quote section */
.teacher-quote-section {
  background:var(--bg-dark);
  padding:40px 24px;
  text-align:center;
}
@media(min-width:768px) { .teacher-quote-section { padding:56px 48px; } }

.teacher-quote-mark {
  font-family:var(--display);
  font-size:3rem; color:var(--gold); opacity:.3;
  line-height:1; margin-bottom:20px; display:block;
}
.teacher-quote-text {
  font-family:var(--serif);
  font-size:clamp(1.2rem,2.6vw,2rem);
  font-weight:700; line-height:1.9;
  color:var(--white);
  max-width:700px; margin:0 auto 24px;
  letter-spacing:.04em;
}
.teacher-quote-src {
  font-size:.7rem; color:var(--gold); opacity:.5;
  letter-spacing:.2em; font-weight:300;
}

/* Story */
.teacher-story { background:var(--white); padding:48px 0; }
@media(min-width:768px) { .teacher-story { padding:72px 0; } }

.teacher-story-inner {
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr;
  gap:48px; align-items:start;
}
@media(min-width:768px) {
  .teacher-story-inner { padding:0 48px; grid-template-columns:260px 1fr; gap:80px; }
}

.teacher-story-sidebar-head {
  font-family:var(--display);
  font-size:.68rem; letter-spacing:.3em; color:var(--gold);
  padding-bottom:16px; border-bottom:1px solid var(--rule-gold);
  margin-bottom:24px; display:block;
}
.teacher-story-sidebar p {
  font-size:.78rem; color:var(--ink-3);
  line-height:2; font-weight:300; margin-bottom:12px;
}
.teacher-story-tags {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:32px;
}
.teacher-story-tag {
  font-size:.66rem; color:var(--ink-3);
  padding:6px 14px;
  border:1px solid var(--rule);
  border-radius:2px; font-weight:400;
  letter-spacing:.03em;
}

.teacher-story-main p {
  font-size:.9rem; color:var(--ink-2);
  line-height:2.5; margin-bottom:28px;
  font-weight:300;
}
.teacher-story-main p:last-child { margin-bottom:0; }
.teacher-story-quote2 {
  font-family:var(--serif);
  font-size:1.1rem; font-weight:700;
  line-height:2.1; color:var(--ink);
  padding:20px 0; margin:20px 0;
  border-top:1px solid var(--rule-gold);
  border-bottom:1px solid var(--rule-gold);
  letter-spacing:.02em;
}


/* ================================================================
   VOICES
================================================================ */
.voices { background:var(--bg); }
.voices-header { margin-bottom:60px; }
@media(min-width:768px) { .voices-header { margin-bottom:80px; } }

.voices-grid {
  display:grid; grid-template-columns:1fr;
  gap:16px;
}
@media(min-width:768px) {
  .voices-grid { grid-template-columns:1fr 1fr; gap:2px; background:var(--rule); border-radius:2px; overflow:hidden; }
}
.voice-card {
  background:var(--white);
  padding:36px 24px;
  transition:background .3s;
  border:1px solid var(--rule);
  border-radius:2px;
}
@media(min-width:768px) {
  .voice-card { padding:52px 44px; border:none; border-radius:0; }
}
.voice-card:hover { background:var(--bg); }
.voice-type {
  font-family:var(--display);
  font-size:.65rem; letter-spacing:.25em; color:var(--gold);
  margin-bottom:24px; display:block;
}
.voice-q {
  font-size:.63rem; font-weight:600; color:var(--ink-4);
  letter-spacing:.08em; margin-bottom:6px; margin-top:18px;
}
.voice-q:first-of-type { margin-top:0; }
.voice-a {
  font-size:.87rem; color:var(--ink-2);
  line-height:1.95; font-weight:400;
}
.voice-author {
  font-size:.68rem; color:var(--ink-4);
  text-align:right; margin-top:24px;
  padding-top:16px; border-top:1px solid var(--rule);
}


/* ================================================================
   CAMPAIGN
================================================================ */
.campaign { background:var(--white); }
.camp-card {
  max-width:840px; margin:0 auto;
  background:var(--bg-dark);
  border-radius:2px;
  padding:48px 24px;
  text-align:center;
  position:relative; overflow:hidden;
}
@media(min-width:768px) { .camp-card { padding:80px; } }

.camp-card::before {
  content:''; position:absolute;
  top:-100px; right:-80px;
  width:400px; height:400px; border-radius:50%;
  background:rgba(196,162,101,.06); pointer-events:none;
}
.camp-kicker {
  font-family:var(--display);
  font-size:.68rem; letter-spacing:.35em;
  color:var(--gold); opacity:.5;
  margin-bottom:28px; display:block; position:relative;
}
.camp-title {
  font-family:var(--serif);
  font-size:clamp(1rem,2vw,1.35rem);
  font-weight:700; line-height:1.85;
  color:var(--white); margin-bottom:40px; position:relative;
}
.camp-boxes {
  display:grid; grid-template-columns:1fr;
  gap:16px; margin-bottom:24px; position:relative;
}
@media(min-width:600px) { .camp-boxes { grid-template-columns:1fr 1fr; } }

.camp-box {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(196,162,101,.15);
  padding:28px 24px; border-radius:2px;
}
.camp-box-lbl { font-size:.65rem; color:var(--gold); opacity:.6; margin-bottom:10px; }
.camp-box-val {
  font-family:var(--serif);
  font-size:1.2rem; font-weight:700; color:var(--white);
}
.camp-box-sub { font-size:.62rem; color:rgba(255,255,255,.3); margin-top:8px; }
.camp-note { font-size:.65rem; color:rgba(255,255,255,.25); position:relative; }


/* ================================================================
   PRICING
================================================================ */
.pricing { background:var(--bg); }
.pricing-header { text-align:center; margin-bottom:60px; }
@media(min-width:768px) { .pricing-header { margin-bottom:80px; } }
.pricing-header .sec-lead { margin:18px auto 0; }

.price-grid {
  display:grid; grid-template-columns:1fr;
  gap:0; max-width:880px; margin:0 auto 48px;
  border:1px solid var(--rule);
  border-radius:2px; overflow:hidden;
  background:var(--rule);
}
@media(min-width:768px) { .price-grid { grid-template-columns:repeat(3,1fr); } }

.price-col {
  background:var(--white);
  padding:44px 28px;
  position:relative;
  transition:background .3s;
}
@media(min-width:768px) { .price-col { padding:52px 36px; } }
.price-col:hover { background:var(--bg); }
.price-col.pop { background:var(--bg-dark); color:var(--white); }
.price-col.pop:hover { background:#0d1d33; }

.price-pop-badge {
  display:none;
  position:absolute; top:20px; right:20px;
  font-size:.58rem; font-weight:700;
  color:var(--white); background:var(--gold);
  padding:4px 14px; border-radius:2px;
  letter-spacing:.06em;
}
.price-col.pop .price-pop-badge { display:block; }

.price-grade {
  font-family:var(--serif);
  font-size:1rem; font-weight:700;
  margin-bottom:4px;
}
.price-col.pop .price-grade { color:var(--white); }
.price-minute {
  font-size:.65rem; color:var(--ink-4); margin-bottom:32px;
}
.price-col.pop .price-minute { color:rgba(255,255,255,.4); }

.price-amt {
  font-family:var(--display);
  font-size:2.4rem; font-weight:300;
  color:var(--ink); line-height:1;
}
@media(min-width:768px) { .price-amt { font-size:2.6rem; } }
.price-col.pop .price-amt { color:var(--gold-lt); }
.price-amt span { font-size:.75rem; font-weight:400; color:var(--ink-4); }
.price-col.pop .price-amt span { color:rgba(255,255,255,.4); }
.price-freq {
  font-size:.65rem; color:var(--ink-4);
  margin:10px 0 28px;
}
.price-col.pop .price-freq { color:rgba(255,255,255,.3); }

.price-divider { height:1px; background:var(--rule); margin-bottom:24px; }
.price-col.pop .price-divider { background:rgba(255,255,255,.08); }

.price-list { list-style:none; }
.price-list li {
  font-size:.78rem; color:var(--ink-3);
  padding:5px 0; display:flex; align-items:center; gap:12px;
  font-weight:300;
}
.price-col.pop .price-list li { color:rgba(255,255,255,.5); }
.price-list li::before {
  content:''; width:3px; height:3px;
  background:var(--gold); border-radius:50%; flex-shrink:0;
}

/* ── STACKED PRICING (pricing sub-page) ── */
.price-stack {
  max-width:720px; margin:0 auto 48px;
  display:flex; flex-direction:column; gap:0;
}
.price-row {
  position:relative;
  border:1px solid var(--rule);
  border-bottom:none;
  background:var(--white);
  transition:background .3s;
}
.price-row:last-child { border-bottom:1px solid var(--rule); }
.price-row:first-child { border-radius:2px 2px 0 0; }
.price-row:last-child { border-radius:0 0 2px 2px; }
.price-row:hover { background:var(--bg); }

.price-row--pop {
  background:var(--bg-dark);
  border-color:rgba(196,162,101,.2);
}
.price-row--pop:hover { background:#0d1d33; }

.price-row-badge {
  position:absolute; top:16px; right:16px;
  font-size:.58rem; font-weight:700;
  color:var(--white); background:var(--gold);
  padding:4px 14px; border-radius:2px;
  letter-spacing:.06em;
}

.price-row-head {
  padding:28px 28px 0;
  display:flex; align-items:baseline; gap:16px;
}
@media(min-width:640px) { .price-row-head { padding:32px 36px 0; } }

.price-row-grade {
  font-family:var(--serif);
  font-size:1.15rem; font-weight:700;
  color:var(--ink);
}
.price-row--pop .price-row-grade { color:var(--white); }

.price-row-sub {
  font-size:.68rem; color:var(--ink-4); letter-spacing:.04em;
}
.price-row--pop .price-row-sub { color:rgba(255,255,255,.35); }

.price-row-body {
  padding:16px 28px 28px;
  display:flex; flex-direction:column; gap:16px;
}
@media(min-width:640px) {
  .price-row-body {
    flex-direction:row; align-items:flex-start; gap:36px;
    padding:16px 36px 32px;
  }
}

.price-row-main { flex-shrink:0; }
.price-row-amt {
  font-family:var(--display);
  font-size:2rem; font-weight:300;
  color:var(--ink); line-height:1;
  margin-bottom:8px;
}
.price-row--pop .price-row-amt { color:var(--gold-lt); }
.price-row-per { font-size:.72rem; font-weight:400; color:var(--ink-4); }
.price-row--pop .price-row-per { color:rgba(255,255,255,.35); }

.price-row-freq {
  display:flex; flex-direction:column; gap:2px;
  font-size:.7rem; color:var(--ink-4); line-height:1.6;
}
.price-row-freq strong { color:var(--ink-2); font-weight:600; }
.price-row--pop .price-row-freq { color:rgba(255,255,255,.3); }
.price-row--pop .price-row-freq strong { color:var(--gold-lt); }

.price-row-list {
  flex:1; list-style:none;
  display:flex; flex-wrap:wrap; gap:4px 20px;
}
.price-row-list li {
  font-size:.76rem; color:var(--ink-3); font-weight:300;
  display:flex; align-items:center; gap:8px;
}
.price-row--pop .price-row-list li { color:rgba(255,255,255,.5); }
.price-row-list li::before {
  content:''; width:3px; height:3px;
  background:var(--gold); border-radius:50%; flex-shrink:0;
}

.pricing-note {
  text-align:center; font-size:.74rem; color:var(--ink-4);
  line-height:2;
}

/* Timetable */
.timetable {
  max-width:480px; margin:48px auto 0;
  border:1px solid var(--rule); border-radius:2px; overflow:hidden;
}
.tt-row {
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--rule);
}
.tt-row:last-child { border-bottom:none; }
.tt-row.head { background:var(--bg-dark); }
.tt-row.head .tt-cell {
  color:rgba(255,255,255,.6); font-size:.65rem;
  font-weight:600; letter-spacing:.1em;
}
.tt-cell { padding:14px 20px; font-size:.8rem; background:var(--white); }
.tt-note { text-align:center; font-size:.7rem; color:var(--ink-4); margin-top:14px; }


/* ================================================================
   FAQ
================================================================ */
.faq { background:var(--white); }
.faq-header { text-align:center; margin-bottom:48px; }
@media(min-width:768px) { .faq-header { margin-bottom:80px; } }
.faq-list { max-width:640px; margin:0 auto; }

.faq-item { border-bottom:1px solid var(--rule); }
.faq-btn {
  width:100%; text-align:left; background:none; border:none;
  padding:28px 0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--sans); font-size:.85rem; font-weight:500;
  color:var(--ink); line-height:1.6; transition:color .3s;
}
.faq-btn:hover { color:var(--gold-dk); }
.faq-ico {
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:300; color:var(--ink-4);
  flex-shrink:0; transition:all .3s;
}
.faq-item.open .faq-ico {
  background:var(--ink); color:var(--white); border-color:var(--ink);
  transform:rotate(45deg);
}
.faq-ans { max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq-ans-in {
  padding:0 0 28px;
  font-size:.84rem; color:var(--ink-3);
  line-height:2.2; font-weight:300;
}


/* ================================================================
   ACCESS
================================================================ */
.access { background:var(--bg); }
.access-grid {
  display:grid; grid-template-columns:1fr;
  gap:48px; align-items:start; margin-top:48px;
}
@media(min-width:768px) {
  .access-grid { grid-template-columns:1fr 1fr; gap:72px; margin-top:72px; }
}

.access-row {
  display:flex; flex-direction:column; gap:4px;
  padding:18px 0; border-bottom:1px solid var(--rule);
}
@media(min-width:480px) { .access-row { flex-direction:row; gap:24px; } }
.access-row:first-child { border-top:1px solid var(--rule); }
.access-lbl {
  font-size:.62rem; font-weight:600; color:var(--gold);
  letter-spacing:.14em; min-width:80px; padding-top:3px;
}
.access-val { font-size:.84rem; line-height:1.9; color:var(--ink-2); }
.access-val small { font-size:.72rem; color:var(--ink-4); display:block; margin-top:3px; }
.access-map {
  border-radius:2px; overflow:hidden; min-height:300px;
  border:1px solid var(--rule);
}
@media(min-width:768px) { .access-map { min-height:400px; } }
.access-map iframe { width:100%; height:100%; min-height:300px; border:0; }
@media(min-width:768px) { .access-map iframe { min-height:400px; } }


/* ================================================================
   CTA SECTION
================================================================ */
.cta-section {
  position:relative; padding:100px 24px;
  text-align:center; overflow:hidden;
}
@media(min-width:768px) { .cta-section { padding:160px 48px; } }

.cta-bg {
  position:absolute; inset:0;
  background:var(--bg);
}
.cta-section > * { position:relative; z-index:1; }
.cta-section .sec-eyebrow { color:var(--gold); opacity:.6; }
.cta-section .sec-title { color:var(--ink); max-width:480px; margin:0 auto 20px; }
.cta-section .sec-lead { color:var(--ink-3); margin:0 auto 56px; text-align:center; }

.cta-steps {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:20px; margin-bottom:56px;
}
@media(min-width:768px) { .cta-steps { flex-direction:row; gap:28px; } }

.cta-step { text-align:center; }
.cta-step-n {
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(196,162,101,.35);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:1rem; font-weight:300;
  color:var(--gold); margin:0 auto 10px;
}
.cta-step-t { font-size:.68rem; color:var(--ink-3); }
.cta-step-t strong { display:block; color:var(--ink); font-weight:600; font-size:.73rem; margin-top:2px; }
.cta-arr { color:var(--gold); opacity:.4; font-size:.9rem; }
@media(max-width:767px) { .cta-arr { transform:rotate(90deg); } }

.cta-note { font-size:.65rem; color:var(--ink-3); margin-top:20px; }


/* ================================================================
   CONTACT FORM
================================================================ */
.contact-form {
  background:var(--white);
  padding:28px 20px;
  border-radius:2px;
  border:1px solid var(--rule);
}
@media(min-width:768px) { .contact-form { padding:40px 40px; } }
.contact-form-inner {
  max-width:640px; margin:0 auto;
}
.contact-form .form-label { color:var(--ink); }
.contact-form .form-input,
.contact-form .form-textarea,
.contact-form .form-select { color:var(--ink); background:var(--bg); }
.form-group { margin-bottom:18px; }
.form-label {
  display:block; font-size:.76rem; font-weight:600;
  color:var(--ink); letter-spacing:.04em; margin-bottom:8px;
}
.form-label .req {
  font-size:.6rem; color:var(--gold); font-weight:700;
  margin-left:8px; letter-spacing:.05em;
}
.form-input,
.form-textarea,
.form-select {
  width:100%; padding:14px 16px;
  font-size:.88rem; font-family:var(--sans);
  color:var(--ink); background:var(--bg);
  border:1px solid var(--rule);
  border-radius:2px;
  transition:border-color .3s;
  -webkit-appearance:none;
  appearance:none;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline:none;
  border-color:var(--gold);
}
.form-textarea { min-height:100px; resize:vertical; line-height:1.8; }
.form-select { cursor:pointer; }
.form-note {
  font-size:.7rem; color:var(--ink-4); margin-top:6px;
}
.form-submit-wrap { text-align:center; margin-top:20px; }
.form-privacy {
  font-size:.68rem; color:var(--ink-4); margin-top:16px;
  line-height:1.8;
}


/* ================================================================
   PAGE HEADER (sub pages)
================================================================ */
.page-header {
  padding-top:calc(var(--nav-h) + 60px);
  padding-bottom:60px;
  background:var(--bg-dark);
  text-align:center;
}
@media(min-width:768px) {
  .page-header { padding-top:calc(var(--nav-h) + 80px); padding-bottom:80px; }
}

.page-header .sec-eyebrow { color:var(--gold); opacity:.5; }
.page-header .sec-title { color:var(--white); }
.page-header .sec-lead { color:rgba(255,255,255,.4); margin:12px auto 0; }

.page-header--compact {
  padding-top:calc(var(--nav-h) + 28px);
  padding-bottom:20px;
}
@media(min-width:768px) {
  .page-header--compact { padding-top:calc(var(--nav-h) + 36px); padding-bottom:28px; }
}

/* ── Compact section padding ── */
.sec--compact { padding:20px 0; }
@media(min-width:768px) { .sec--compact { padding:32px 0; } }

/* ── LINE CTA button on contact page ── */
.contact-quick-options {
  text-align:center;
}
.contact-line-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:#06C755; color:var(--white);
  padding:16px 40px; border-radius:6px;
  font-size:.88rem; font-weight:700; letter-spacing:.04em;
  transition:all .3s var(--ease);
  border:none; cursor:pointer;
}
.contact-line-btn svg { flex-shrink:0; }
.contact-line-btn:hover {
  background:#05b34c; transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(6,199,85,.25);
}
.contact-or {
  margin-top:16px;
  font-size:.75rem; color:var(--ink-4);
  position:relative;
}
.contact-or::before,
.contact-or::after {
  content:''; position:absolute; top:50%;
  width:40px; height:1px; background:var(--rule);
}
.contact-or::before { right:calc(50% + 80px); }
.contact-or::after  { left:calc(50% + 80px); }


/* ================================================================
   FOOTER
================================================================ */
.footer { background:var(--bg-dark); padding:60px 0 32px; }
@media(min-width:768px) { .footer { padding:80px 0 36px; } }
.footer-inner { max-width:var(--container); margin:0 auto; padding:0 24px; }
@media(min-width:768px) { .footer-inner { padding:0 48px; } }

.footer-grid {
  display:grid; grid-template-columns:1fr;
  gap:36px; margin-bottom:48px;
}
@media(min-width:768px) {
  .footer-grid { grid-template-columns:1.6fr 1fr 1fr; gap:72px; }
}

.f-logo-wrap {
  display:inline-block;
  background:#fff;
  border-radius:4px;
  padding:6px 10px;
  margin-bottom:14px;
}
.f-logo { display:block; height:36px; width:auto; }
.f-brand {
  font-family:var(--serif); font-size:1rem; color:var(--white);
  font-weight:700; letter-spacing:.1em; margin-bottom:14px;
}
.f-desc { font-size:.7rem; color:rgba(255,255,255,.8); line-height:2.1; font-weight:300; }
.f-col-t {
  font-size:.58rem; font-weight:600; color:var(--gold); opacity:.5;
  letter-spacing:.18em; margin-bottom:18px; text-transform:uppercase;
}
.f-links li { margin-bottom:10px; }
.f-links a { font-size:.74rem; color:rgba(255,255,255,.8); font-weight:300; transition:color .3s; }
.f-links a:hover { color:var(--gold-lt); }
.f-addr { font-size:.7rem; color:rgba(255,255,255,.75); line-height:2; margin-top:24px; }

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.15); padding-top:24px;
  display:flex; flex-direction:column; gap:10px;
  align-items:center; text-align:center;
  font-size:.63rem; color:rgba(255,255,255,.75);
}
@media(min-width:768px) {
  .footer-bottom { flex-direction:row; justify-content:space-between; }
}
.f-ig { color:rgba(255,255,255,.75); font-size:.7rem; transition:color .3s; }
.f-ig:hover { color:var(--gold-lt); }


/* ================================================================
   ANIMATIONS
================================================================ */
.reveal {
  opacity:0; transform:translateY(32px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.vis { opacity:1; transform:translateY(0); }
.rd1 { transition-delay:.1s; }
.rd2 { transition-delay:.2s; }
.rd3 { transition-delay:.3s; }

@keyframes heroUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Gold line separator */
.gold-line {
  width:40px; height:1px; background:var(--gold); margin:24px 0;
}
.text-center .gold-line { margin:24px auto; }


/* ================================================================
   GALLERY (instructor page)
================================================================ */
.gallery-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4px;
}
@media(min-width:768px) { .gallery-grid { grid-template-columns:1fr 1fr 1fr; gap:6px; } }
.gallery-grid img {
  width:100%; height:200px; object-fit:cover;
  border-radius:2px;
  transition:transform .6s var(--ease);
}
@media(min-width:768px) { .gallery-grid img { height:200px; } }
.gallery-grid img:hover { transform:scale(1.02); }


/* ================================================================
   EPISODE (instructor page)
================================================================ */
.episode-card {
  background:var(--bg);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:24px 20px;
  margin-bottom:16px;
}
@media(min-width:768px) { .episode-card { padding:32px; } }

.episode-num {
  font-family:var(--display);
  font-size:.68rem; letter-spacing:.3em; color:var(--gold);
  margin-bottom:16px; display:block;
}
.episode-title {
  font-family:var(--serif);
  font-size:1.05rem; font-weight:700;
  line-height:1.7; color:var(--ink);
  margin-bottom:16px;
}
.episode-text {
  font-size:.85rem; color:var(--ink-3);
  line-height:2.3; font-weight:300;
}


/* ================================================================
   PREMIUM ENHANCEMENTS — 100-point upgrade
================================================================ */

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold-dk); }
html { scrollbar-width:thin; scrollbar-color:var(--gold) var(--bg); }

/* ── Grain Texture (disabled) ── */

/* ── Smooth page entrance ── */
body { animation:pageIn .7s ease-out; }
@keyframes pageIn {
  from { opacity:0; }
  to   { opacity:1; }
}

/* ── Floating Mobile CTA ── */
.float-cta {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px);
  z-index:90;
  display:flex; align-items:center; gap:10px;
  background:var(--gold); color:var(--white);
  padding:16px 32px; border-radius:60px;
  font-size:.78rem; font-weight:700; letter-spacing:.06em;
  box-shadow:0 8px 32px rgba(196,162,101,.4), 0 2px 8px rgba(0,0,0,.12);
  transition:all .5s var(--ease);
  text-align:center;
  white-space:nowrap;
  opacity:0; pointer-events:none;
}
.float-cta.visible {
  transform:translateX(-50%) translateY(0);
  opacity:1; pointer-events:all;
}
.float-cta:hover {
  background:var(--gold-dk);
  box-shadow:0 12px 40px rgba(196,162,101,.5), 0 4px 12px rgba(0,0,0,.15);
  transform:translateX(-50%) translateY(-2px);
}
.float-cta .float-cta-pulse {
  width:8px; height:8px; border-radius:50%; background:var(--white);
  animation:pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.5; transform:scale(1.5); }
}
@media(min-width:960px) { .float-cta { display:none; } }

/* ── Breadcrumbs (sub-pages) ── */
.breadcrumb {
  display:flex; align-items:center; gap:8px;
  justify-content:center;
  margin-top:20px;
}
.breadcrumb a {
  font-size:.65rem; color:rgba(255,255,255,.3);
  letter-spacing:.04em; transition:color .3s;
}
.breadcrumb a:hover { color:var(--gold-lt); }
.breadcrumb span {
  font-size:.65rem; color:rgba(255,255,255,.5);
  letter-spacing:.04em;
}
.breadcrumb .sep { color:rgba(255,255,255,.15); font-size:.55rem; }

/* ── Enhanced reveal animations ── */
.reveal-left {
  opacity:0; transform:translateX(-40px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-left.vis { opacity:1; transform:translateX(0); }

.reveal-right {
  opacity:0; transform:translateX(40px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-right.vis { opacity:1; transform:translateX(0); }

.reveal-scale {
  opacity:0; transform:scale(.95);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-scale.vis { opacity:1; transform:scale(1); }

/* Stagger delays */
.rd4 { transition-delay:.4s; }
.rd5 { transition-delay:.5s; }

/* ── Hero enhancements ── */
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(196,162,101,.08); border:1px solid rgba(196,162,101,.2);
  padding:8px 20px; border-radius:60px;
  font-size:.68rem; color:var(--gold-lt); letter-spacing:.06em;
  margin-bottom:20px;
  animation:heroUp .7s .05s both;
}
.hero-badge-dot {
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.hero-title .hero-em {
  color:var(--gold-lt);
  position:relative;
}

/* ── Gold decorative dot separator ── */
.dot-sep {
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:40px auto;
}
.dot-sep span {
  width:4px; height:4px; background:var(--gold); border-radius:50%;
  opacity:.4;
}
.dot-sep span:nth-child(2) { opacity:.7; width:6px; height:6px; }

/* ── Philosophy section ── */
.philosophy {
  background:var(--white);
  position:relative; overflow:hidden;
  padding:56px 0;
}
@media(min-width:768px) { .philosophy { padding:80px 0; } }
@media(min-width:1024px) { .philosophy { padding:96px 0; } }
.philosophy::before {
  content:''; position:absolute;
  top:-200px; left:-200px;
  width:600px; height:600px; border-radius:50%;
  border:1px solid rgba(196,162,101,.06);
  pointer-events:none;
}
.philosophy::after {
  content:''; position:absolute;
  bottom:-150px; right:-150px;
  width:400px; height:400px; border-radius:50%;
  border:1px solid rgba(196,162,101,.06);
  pointer-events:none;
}
.philosophy-inner {
  max-width:720px; margin:0 auto; text-align:center;
  position:relative;
}
.philosophy-kanji {
  font-family:var(--serif);
  font-size:clamp(2.4rem,6vw,4rem);
  font-weight:900; color:var(--ink);
  letter-spacing:.2em; line-height:1;
  margin-bottom:20px; opacity:.08;
}
.philosophy-statement {
  font-family:var(--serif);
  font-size:clamp(1.05rem,2vw,1.35rem);
  font-weight:700; line-height:2;
  color:var(--ink);
  margin-bottom:20px;
  letter-spacing:.04em;
}
.philosophy-body {
  font-size:.84rem; color:var(--ink-3);
  line-height:2.3; font-weight:300;
  max-width:560px; margin:0 auto;
}

/* ── Counter animation styling ── */
.fact-num[data-count] {
  font-variant-numeric:tabular-nums;
}

/* ── Enhanced comparison glow ── */
.comp-cell.ours {
  position:relative;
}
.comp-cell.ours::before {
  content:''; position:absolute;
  left:0; top:50%; transform:translateY(-50%);
  width:2px; height:60%; background:var(--gold); opacity:.4;
}

/* ── Enhanced voice cards ── */
.voice-card {
  position:relative;
}
.voice-card::before {
  content:''; position:absolute;
  top:0; left:0; width:2px; height:0;
  background:var(--gold);
  transition:height .6s var(--ease);
}
.voice-card:hover::before { height:100%; }

/* ── Premium form styling ── */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(196,162,101,.1);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color:var(--ink-4); opacity:.6;
}
.form-group {
  position:relative;
}
.form-group.error .form-input,
.form-group.error .form-textarea,
.form-group.error .form-select {
  border-color:#c0392b;
  box-shadow:0 0 0 3px rgba(192,57,43,.08);
}
.form-error-msg {
  font-size:.68rem; color:#c0392b;
  margin-top:6px; display:none;
}
.form-group.error .form-error-msg { display:block; }

/* ── Success animation for submit button ── */
.btn-primary.sent {
  background:#2ecc71; pointer-events:none;
}
.btn-primary.sending {
  opacity:.7; pointer-events:none;
}

/* ── Form result message ── */
.form-result {
  margin-top:16px; padding:14px 20px;
  border-radius:6px; font-size:.9rem;
  line-height:1.6; display:none;
}
.form-result--success {
  background:#eafaf1; color:#1a7a42;
  border:1px solid #b2dfcc;
}
.form-result--error {
  background:#fdf0ef; color:#b33a30;
  border:1px solid #f0c7c3;
}

/* ── Honeypot (must stay invisible) ── */
.hp-field { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* ── Trust badge row ── */
.trust-badges {
  display:flex; align-items:center; justify-content:center;
  gap:32px; flex-wrap:wrap;
  padding:40px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin:0 auto 56px;
  max-width:600px;
}
.trust-badge {
  text-align:center;
}
.trust-badge-val {
  font-family:var(--display);
  font-size:1.6rem; font-weight:300; color:var(--gold);
  line-height:1; margin-bottom:6px;
}
.trust-badge-lbl {
  font-size:.62rem; color:var(--ink-3); letter-spacing:.06em; font-weight:500;
}

/* ── Episode card hover ── */
.episode-card {
  transition:all .4s var(--ease);
  position:relative;
  overflow:hidden;
}
.episode-card::before {
  content:''; position:absolute;
  top:0; left:0; width:0; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-lt));
  transition:width .6s var(--ease);
}
.episode-card:hover::before { width:100%; }
.episode-card:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(10,22,40,.06);
}

/* ── Gallery hover ── */
.gallery-grid img {
  position:relative;
}
.gallery-grid a {
  position:relative; display:block; overflow:hidden;
  border-radius:2px;
}
.gallery-grid a::after {
  content:''; position:absolute; inset:0;
  background:rgba(10,22,40,0);
  transition:background .4s;
}
.gallery-grid a:hover::after {
  background:rgba(10,22,40,.12);
}

/* ── Pricing card hover glow ── */
.price-col {
  transition:all .4s var(--ease);
}
.price-col:hover {
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(10,22,40,.06);
}
.price-col.pop:hover {
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(10,22,40,.2);
}
.price-row { transition:all .3s var(--ease); }
.price-row:hover { box-shadow:0 8px 32px rgba(10,22,40,.06); z-index:1; }
.price-row--pop:hover { box-shadow:0 8px 32px rgba(10,22,40,.2); }

/* ── Nav always solid (no transparent hero state) ── */

/* ── Sub-page nav (inherits base solid nav now) ── */

/* ── Section number decoration ── */
.sec-num {
  font-family:var(--display);
  font-size:5rem; font-weight:300; color:var(--rule);
  line-height:1; position:absolute;
  top:-20px; left:-10px; pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}
@media(min-width:768px) { .sec-num { font-size:7rem; top:-30px; left:-20px; } }

/* ── Campaign shimmer ── */
.camp-card::after {
  content:''; position:absolute;
  top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(196,162,101,.04), transparent);
  animation:shimmer 4s infinite;
}
@keyframes shimmer {
  0%   { left:-100%; }
  100% { left:200%; }
}

/* ── Access info row icon ── */
.access-lbl {
  position:relative; padding-left:0;
}

/* ── Responsive image aspect ratio ── */
.feat-img { aspect-ratio:4/3; }
@media(min-width:768px) { .feat-img { aspect-ratio:auto; } }

/* ── Loading state ── */
.skeleton {
  background:linear-gradient(90deg, var(--bg) 25%, var(--bg-2) 50%, var(--bg) 75%);
  background-size:200% 100%;
  animation:skeleton 1.5s infinite;
}
@keyframes skeleton {
  0% { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ── Print styles ── */
@media print {
  .nav, .mob, .float-cta, .cta-section, .hamburger { display:none !important; }
  body::after { display:none; }
  .reveal { opacity:1 !important; transform:none !important; }
  .hero { min-height:0; }
}

/* ── Selection color ── */
::selection { background:rgba(196,162,101,.2); color:var(--ink); }
::-moz-selection { background:rgba(196,162,101,.2); color:var(--ink); }

/* ── Helper classes for removing inline styles ── */
.teacher-link-wrap { margin-top:32px; }
.pricing-link-wrap { text-align:center; margin-top:36px; }
.btn-arrow { font-size:.85em; }
.f-addr-loc { margin-top:24px; }

/* ── Pricing sub-page helpers ── */
.pricing-intro { margin-bottom:80px; }
.pricing-intro-title {
  font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.4rem);
  font-weight:700; line-height:1.8; color:var(--ink); margin-bottom:16px;
}
.pricing-intro-lead { margin:0 auto; }
.pricing-note-top { margin-top:48px; }
.pricing-included {
  max-width:640px; margin:64px auto 0;
}
.pricing-included .gold-line { margin:0 auto 32px; }
.pricing-included-title {
  font-family:var(--serif); font-size:1.05rem; font-weight:700;
  text-align:center; margin-bottom:24px;
}
.included-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.included-item {
  padding:16px 0; border-bottom:1px solid var(--rule);
}
.included-item-name {
  font-size:.76rem; font-weight:600; color:var(--ink); margin-bottom:4px;
}
.included-item-desc {
  font-size:.72rem; color:var(--ink-3); font-weight:300;
}
.timetable-wrap { margin-top:80px; }
.timetable-header { margin-bottom:32px; }
.timetable-title {
  font-family:var(--serif); font-size:1.15rem; font-weight:700;
}
.campaign-bg-alt { background:var(--bg); }

/* ── Instructor breadcrumb variant ── */
.breadcrumb--light {
  justify-content:flex-start; margin-bottom:24px;
}
.breadcrumb--light a { color:var(--ink-4); }
.breadcrumb--light .sep { color:var(--ink-4); }
.breadcrumb--light span:last-child { color:var(--ink-3); }

/* ── Flow steps (contact page) ── */
.flow-steps {
  display:flex; flex-direction:column; align-items:center;
  gap:0; max-width:480px; margin:48px auto 0;
}
.flow-step {
  display:flex; align-items:flex-start; gap:20px; width:100%;
}
.flow-step-num {
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  background:var(--gold); color:var(--white);
  font-family:var(--display); font-weight:600; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
.flow-step-body { flex:1; padding-top:4px; }
.flow-step-title {
  font-family:var(--serif); font-size:.95rem; font-weight:700;
  color:var(--ink); margin-bottom:4px;
}
.flow-step-desc { font-size:.78rem; color:var(--ink-3); font-weight:300; line-height:1.9; }
.flow-connector {
  width:1px; height:28px; background:var(--gold); opacity:.25;
  margin-left:22px;
}

/* ── Form row (side-by-side on desktop) ── */
.form-row {
  display:grid; grid-template-columns:1fr; gap:0;
}
@media(min-width:640px) { .form-row { grid-template-columns:1fr 1fr; gap:24px; } }

/* ── Button outline variant ── */
.btn-primary--outline {
  background:transparent; border:1px solid var(--gold); color:var(--gold);
}
.btn-primary--outline:hover {
  background:var(--gold); color:var(--white);
}

/* ── Thanks page ── */
.thanks-wrap {
  text-align:center;
  max-width:600px;
  margin:0 auto;
  padding:48px 24px 64px;
}
.thanks-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:72px; height:72px;
  border-radius:50%;
  background:#2ecc71;
  color:#fff;
  font-size:2rem;
  font-weight:700;
  margin-bottom:24px;
}
.thanks-heading {
  font-family:'Zen Old Mincho', serif;
  font-size:1.5rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:16px;
}
.thanks-text {
  font-size:.92rem;
  color:var(--ink-2);
  line-height:1.9;
  margin-bottom:24px;
}
.thanks-info {
  background:var(--bg-2, #f0ede8);
  border-radius:8px;
  padding:20px 24px;
  margin-bottom:32px;
}
.thanks-info p {
  font-size:.85rem;
  color:var(--ink-3);
  margin-bottom:12px;
  line-height:1.7;
}
.thanks-line-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#06C755;
  color:#fff;
  padding:10px 24px;
  border-radius:6px;
  font-size:.88rem;
  font-weight:500;
  text-decoration:none;
  transition:opacity .2s;
}
.thanks-line-btn:hover { opacity:.85; }
.thanks-actions {
  margin-top:8px;
}