/*
 * RB音楽教室 — Noir Editorial
 * Main stylesheet
 * -----------------------------------------------------------------
 * 配色パレット (CSS Custom Properties)
 *   --bg / --bg-2      : 背景色 (深いノワール)
 *   --ink / --ink-2    : 文字色 (ウォームアイボリー)
 *   --brass / --accent : ゴールドアクセント
 *   --line / --line-2  : ヘアライン
 * -----------------------------------------------------------------
 */

:root{
  /* Dark editorial: deep noir + warm brass */
  --bg: #0B0908;         /* base noir (near-black w/ warm undertone) */
  --bg-2: #131110;       /* slight lift for alt sections */
  --bg-3: #F5EFE3;       /* inverse card / form panel — warm ivory */
  --ink: #F5EFE3;        /* primary text on noir */
  --ink-2: #D9CFBD;      /* secondary */
  --ink-3: #8A8072;      /* tertiary / captions */
  --ink-inv: #0B0908;    /* text for use on ivory panels */
  --line: #2A2622;       /* hairlines on noir */
  --line-2: #3A342E;     /* stronger hairline */
  --brass: #C9A063;      /* primary accent — brass */
  --brass-2: #A8834B;    /* brass hover / secondary */
  --accent: #E5C58A;     /* highlight brass */
  --serif: 'Noto Serif JP', serif;
  --sans: 'Noto Sans JP', -apple-system, sans-serif;
  --display: 'Cormorant Garamond', 'Noto Serif JP', serif;
  --pad: clamp(20px, 4vw, 72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--brass);color:#fff}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.6;mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.75 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* vignette removed per user request */

/* ---------- Editorial header (sidebar-style) ---------- */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:64px;z-index:99;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:24px 0;background:var(--bg);
}
.rail-mark{
  width:36px;height:36px;display:grid;place-items:center;
  background:var(--brass);color:var(--bg);border-radius:2px;
  font-family:var(--display);font-style:italic;font-size:18px;font-weight:500;
  box-shadow: 0 0 0 1px rgba(201,160,99,.35), 0 0 24px rgba(201,160,99,.2);
}
.rail-vertical{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--display);font-style:italic;font-size:11px;letter-spacing:.5em;
  color:var(--brass);text-transform:uppercase;opacity:.75;
}
.rail-social{display:flex;flex-direction:column;gap:14px;}
.rail-social a{
  font-family:var(--display);font-style:italic;font-size:11px;color:var(--ink-3);
  writing-mode:vertical-rl;letter-spacing:.24em;text-transform:uppercase;
}
.rail-social a:hover{color:var(--brass);}

.topbar{
  position:fixed;left:64px;right:0;top:0;z-index:98;
  padding: 20px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition: background .4s, backdrop-filter .4s, border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
}
.topbar.scrolled{
  background:rgba(11,9,8,.78);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);border-bottom-color:var(--line);
  padding:14px var(--pad);
}
.masthead{
  font-family:var(--display);font-style:italic;font-size:14px;letter-spacing:.32em;
  color:var(--ink-3);text-transform:uppercase;
}
.masthead strong{
  font-family:var(--serif);font-style:normal;font-weight:500;color:var(--ink);letter-spacing:.24em;font-size:13.5px;
  margin-right:14px;
}
.masthead{color:var(--ink-3);}
.topbar nav ul{display:flex;list-style:none;gap:30px;}
.topbar nav a{
  font-family:var(--serif);font-size:13px;font-weight:400;letter-spacing:.18em;color:var(--ink-2);
  position:relative;padding:6px 0;
}
.topbar nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;background:var(--brass);width:0;transition:width .35s;}
.topbar nav a:hover::after{width:100%;}
.top-cta{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.22em;color:var(--bg);
  padding:12px 22px;border-radius:2px;background:var(--brass);transition:background .35s, color .35s;
  font-weight:500;
}
.top-cta:hover{background:var(--accent);color:var(--bg);}

main{margin-left:64px;}

/* ---------- HERO — asymmetric editorial ---------- */
.hero{
  position:relative;min-height:100vh;padding: 130px var(--pad) 40px;
  display:grid;grid-template-columns: 1.15fr 1fr;gap:60px;
  align-items:end;overflow:hidden;
}
.hero-issue{
  position:absolute;top:110px;left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;font-family:var(--display);font-style:italic;
  font-size:12.5px;color:var(--ink-3);letter-spacing:.24em;text-transform:uppercase;
}
.hero-issue span:nth-child(2){color:var(--brass-2);}
.hero-main{position:relative;z-index:2;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--display);font-style:italic;font-size:14px;letter-spacing:.36em;
  color:var(--brass-2);text-transform:uppercase;
  padding:8px 16px 8px 0;margin-bottom:32px;
}
.hero-eyebrow::before{content:"";width:36px;height:1px;background:var(--brass);}
.hero-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(52px, 8vw, 128px);line-height:1.02;letter-spacing:.02em;color:var(--ink);
  margin-bottom:36px;
}
.hero-title em{
  font-family:var(--display);font-style:italic;font-weight:400;color:var(--brass-2);
  font-size:.85em;
}
.hero-lede-block{
  display:grid;grid-template-columns: 44px 1fr;gap:24px;max-width:520px;
  margin-bottom:56px;
}
.hero-lede-block::before{content:"";display:block;width:32px;height:1px;background:var(--ink);margin-top:14px;}
.hero-lede{
  font-family:var(--serif);font-weight:300;font-size:16px;line-height:2;color:var(--ink-2);letter-spacing:.02em;
}
.hero-cta{display:flex;gap:32px;align-items:center;flex-wrap:wrap;}
.btn-primary{
  display:inline-flex;align-items:center;gap:16px;
  padding: 22px 36px;background:var(--brass);color:var(--bg);
  font-family:var(--serif);font-size:13.5px;letter-spacing:.24em;font-weight:500;
  border-radius:2px;transition:all .4s;position:relative;overflow:hidden;
  box-shadow: 0 0 0 1px rgba(201,160,99,.4), 0 12px 32px -14px rgba(201,160,99,.5);
}
.btn-primary::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.3,1);}
.btn-primary span{position:relative;z-index:1;}
.btn-primary:hover::before{transform:translateY(0);}
.btn-ghost{
  font-family:var(--serif);font-size:13px;letter-spacing:.22em;color:var(--ink-2);
  padding:14px 4px;border-bottom:1px solid var(--ink-3);
  display:inline-flex;gap:12px;transition:all .3s;
}
.btn-ghost:hover{color:var(--brass);border-bottom-color:var(--brass);}

.hero-side{
  position:relative;height:min(72vh, 640px);
  display:flex;flex-direction:column;justify-content:space-between;
}
.hero-visual{
  position:relative;flex:1;background:radial-gradient(ellipse at 30% 40%, #1a1613 0%, #0B0908 70%);
  overflow:hidden;border:1px solid var(--line-2);
}
.hero-visual canvas{position:absolute;inset:0;width:100%;height:100%;}
.hero-visual::after{
  content:"№ 001";position:absolute;top:20px;right:24px;
  font-family:var(--display);font-style:italic;font-size:13px;color:var(--ink);letter-spacing:.2em;
}
.hero-caption{
  margin-top:20px;font-family:var(--display);font-style:italic;
  font-size:13.5px;color:var(--ink-3);letter-spacing:.06em;line-height:1.7;
  display:grid;grid-template-columns: 32px 1fr;gap:16px;align-items:start;
}
.hero-caption::before{content:"";display:block;width:24px;height:1px;background:var(--brass);margin-top:12px;}
.hero-caption strong{
  display:block;font-family:var(--serif);font-style:normal;font-weight:500;font-size:12px;
  letter-spacing:.24em;color:var(--ink);margin-bottom:4px;text-transform:uppercase;
}

.hero-marquee{
  position:absolute;left:0;right:0;bottom:0;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2);
  padding:14px 0;
}
.hero-marquee-track{
  display:flex;gap:60px;white-space:nowrap;animation: mq 40s linear infinite;
  font-family:var(--display);font-style:italic;font-size:16px;color:var(--ink-2);letter-spacing:.18em;
}
.hero-marquee-track span::before{content:"◆ ";color:var(--brass);margin-right:12px;}
@keyframes mq{to{transform:translateX(-50%);}}

/* ---------- Concept ---------- */
.concept{padding: clamp(80px,12vw,160px) var(--pad);background:var(--bg-2);position:relative;}
.concept::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(to right, transparent, var(--line-2), transparent);}
.concept-head{
  display:grid;grid-template-columns: 200px 1fr;gap:60px;margin-bottom:80px;align-items:start;
}
.chapter{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:96px;line-height:.9;color:var(--brass);letter-spacing:0;
}
.chapter small{
  display:block;font-family:var(--serif);font-style:normal;font-weight:400;
  font-size:11.5px;color:var(--ink-3);letter-spacing:.36em;text-transform:uppercase;margin-top:16px;
}
.section-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,4vw,56px);line-height:1.4;letter-spacing:.02em;color:var(--ink);
}
.concept-body{
  display:grid;grid-template-columns: repeat(12, 1fr);gap:24px;
}
.concept-quote{
  grid-column: 1 / span 5;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:28px;line-height:1.5;color:var(--ink);letter-spacing:.01em;
  padding-top:20px;border-top:1px solid var(--brass);
}
.concept-quote::before{content:"“";font-size:64px;color:var(--brass);line-height:0;vertical-align:-14px;margin-right:8px;}
.concept-text{
  grid-column: 7 / span 6;
  font-family:var(--serif);font-weight:300;font-size:15.5px;line-height:2.1;color:var(--ink-2);letter-spacing:.03em;
}
.concept-text p{margin-bottom:22px;}
.concept-text p:last-child{margin-bottom:0;}
.concept-sign{
  margin-top:24px;font-family:var(--display);font-style:italic;color:var(--brass);font-size:14px;letter-spacing:.14em;
}

/* ---------- Services grid ---------- */
.services{padding: clamp(80px,12vw,160px) var(--pad);}
.services-head{
  display:grid;grid-template-columns: 200px 1fr auto;gap:60px;margin-bottom:70px;align-items:end;
}
.services-head .btn-ghost{white-space:nowrap;}
.services-grid{
  display:grid;grid-template-columns: 1fr 1fr;gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);
}
.service-card{
  background:var(--bg);padding:56px 48px;position:relative;
  transition: background .5s;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;overflow:hidden;
}
.service-card::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--brass);
  transition: width .6s cubic-bezier(.7,0,.3,1);
}
.service-card:hover{background:var(--bg-2);}
.service-card:hover::after{width:100%;}
.service-card .no{
  position:absolute;top:32px;right:36px;
  font-family:var(--display);font-style:italic;font-size:80px;color:var(--brass);opacity:.35;line-height:1;
}
.service-tag{
  font-family:var(--display);font-style:italic;font-size:12px;letter-spacing:.28em;
  color:var(--brass);text-transform:uppercase;margin-bottom:20px;
}
.service-title{
  font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:.06em;color:var(--ink);line-height:1.5;
  margin-bottom:20px;max-width:340px;
}
.service-body{
  font-family:var(--serif);font-weight:300;font-size:14.5px;line-height:2;color:var(--ink-2);letter-spacing:.03em;max-width:400px;
}
.service-more{
  margin-top:32px;font-family:var(--serif);font-size:12.5px;letter-spacing:.24em;color:var(--ink);
  display:inline-flex;align-items:center;gap:12px;padding-bottom:6px;
  border-bottom:1px solid var(--ink-3);width:fit-content;
  transition:all .3s;
}
.service-card:hover .service-more{color:var(--brass);border-bottom-color:var(--brass);gap:20px;}

/* ---------- Steps ---------- */
.steps{padding: clamp(80px,12vw,160px) var(--pad);background:var(--bg);color:var(--ink);position:relative;}
.steps::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(to right, transparent, var(--line-2), transparent);}
.steps-head{
  display:grid;grid-template-columns: 200px 1fr;gap:60px;margin-bottom:70px;
}
.steps-intro{
  font-family:var(--serif);font-weight:300;font-size:16px;line-height:2;
  color:var(--ink-2);max-width:520px;margin-top:16px;letter-spacing:.03em;
}
.steps-timeline{
  display:grid;grid-template-columns: repeat(4, 1fr);gap:0;position:relative;
}
.steps-timeline::before{
  content:"";position:absolute;top:48px;left:60px;right:60px;height:1px;
  background: repeating-linear-gradient(to right, var(--brass) 0 6px, transparent 6px 12px);
  opacity:.5;
}
.step{
  padding:0 24px;position:relative;
}
.step-num-big{
  width:96px;height:96px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line-2);
  display:grid;place-items:center;
  font-family:var(--display);font-style:italic;font-size:44px;color:var(--brass);font-weight:400;
  margin-bottom:36px;position:relative;z-index:1;transition:all .4s;
  box-shadow: 0 0 0 6px var(--bg);
}
.step:hover .step-num-big{background:var(--brass);color:var(--bg);border-color:var(--brass);box-shadow: 0 0 0 6px var(--bg), 0 0 40px rgba(201,160,99,.35);}
.step-label{
  font-family:var(--display);font-style:italic;font-size:12px;letter-spacing:.28em;color:var(--brass);
  text-transform:uppercase;margin-bottom:14px;
}
.step-title{
  font-family:var(--serif);font-weight:500;font-size:20px;color:var(--ink);letter-spacing:.06em;margin-bottom:14px;line-height:1.5;
}
.step-desc{
  font-family:var(--serif);font-weight:300;font-size:14px;line-height:1.95;color:var(--ink-2);letter-spacing:.03em;
}
.steps-reassure{
  margin-top:80px;padding:36px 40px;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;
  background: linear-gradient(180deg, rgba(201,160,99,.04), transparent);
}
.steps-reassure-tags{display:flex;gap:14px;flex-wrap:wrap;}
.tag{
  padding:8px 18px;border:1px solid var(--brass);border-radius:100px;
  font-family:var(--serif);font-size:12.5px;letter-spacing:.14em;color:var(--brass);
}
.steps-reassure .btn-primary{background:var(--brass);color:var(--bg);}
.steps-reassure .btn-primary::before{background:var(--accent);}

/* ---------- Pricing ---------- */
.pricing{padding: clamp(80px,12vw,160px) var(--pad);}
.pricing-head{
  display:grid;grid-template-columns: 200px 1fr;gap:60px;margin-bottom:70px;
}
.pricing-table{
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
.price-row{
  display:grid;grid-template-columns: 60px 2fr 3fr 2fr 200px;gap:32px;
  padding:44px 0;border-top:1px solid var(--line);align-items:center;
  transition:background .4s, padding .4s;
}
.price-row:first-child{border-top:none;}
.price-row:hover{background:var(--bg-2);padding-left:20px;padding-right:20px;}
.price-row.featured{background:linear-gradient(90deg, rgba(201,160,99,.06), transparent 70%);}
.price-row.featured .price-name-r{color:var(--brass);}
.price-no{
  font-family:var(--display);font-style:italic;font-size:32px;color:var(--brass);font-weight:300;
}
.price-name-r{
  font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.1em;color:var(--ink);line-height:1.5;
}
.price-name-r small{
  display:block;font-family:var(--display);font-style:italic;font-weight:400;font-size:12.5px;color:var(--brass);
  letter-spacing:.22em;margin-top:6px;text-transform:uppercase;
}
.price-desc-r{
  font-family:var(--serif);font-weight:300;font-size:14px;line-height:1.9;color:var(--ink-2);letter-spacing:.02em;
}
.price-num{
  font-family:var(--display);font-style:400;font-weight:400;font-size:42px;color:var(--brass);letter-spacing:0;
  line-height:1;
}
.price-num .yen{font-size:18px;font-family:var(--serif);vertical-align:8px;margin-right:2px;}
.price-num small{
  display:block;font-family:var(--serif);font-style:normal;font-size:12px;color:var(--ink-3);letter-spacing:.16em;margin-top:8px;text-transform:uppercase;
}
.price-cta-r{
  padding:14px 24px;font-family:var(--serif);font-size:12px;letter-spacing:.24em;font-weight:500;
  background:transparent;color:var(--ink);border:1px solid var(--brass);text-align:center;transition:all .3s;
}
.price-row.featured .price-cta-r{background:var(--brass);color:var(--bg);border-color:var(--brass);}
.price-cta-r:hover{background:var(--brass);color:var(--bg);}

.pricing-note{
  margin-top:36px;font-family:var(--serif);font-weight:300;font-size:13px;color:var(--ink-3);
  letter-spacing:.06em;line-height:2;
}

/* ---------- Teacher ---------- */
.teacher{padding: clamp(80px,12vw,160px) var(--pad);background:var(--bg-2);position:relative;overflow:hidden;}
.teacher::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(to right, transparent, var(--line-2), transparent);}
.teacher-huge{
  position:absolute;top:60px;right:-40px;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(120px, 22vw, 340px);line-height:.85;color:var(--brass);opacity:.09;
  letter-spacing:-.02em;pointer-events:none;
}
.teacher-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns: 200px 1.2fr 1.4fr;gap:60px;align-items:start;
}
.teacher-portrait{
  aspect-ratio:3/4;background:linear-gradient(135deg, #1a1613, #0B0908);border:1px solid var(--line-2);position:relative;overflow:hidden;
}
.teacher-portrait::before{content:"Portrait";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-style:italic;color:var(--ink-3);font-size:15px;letter-spacing:.2em;opacity:.55;}
.teacher-portrait::after{content:"";position:absolute;inset:16px;border:1px solid var(--line-2);}
.teacher-side{grid-column: 3;}
.teacher-role-tag{
  font-family:var(--display);font-style:italic;font-size:12px;letter-spacing:.32em;
  color:var(--brass);text-transform:uppercase;margin-bottom:20px;
}
.teacher-name{
  font-family:var(--serif);font-weight:500;font-size:44px;letter-spacing:.06em;color:var(--ink);
  line-height:1.3;margin-bottom:8px;
}
.teacher-name small{
  display:block;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:20px;letter-spacing:.06em;color:var(--brass);margin-top:8px;
}
.teacher-bio{
  margin-top:36px;font-family:var(--serif);font-weight:300;font-size:15.5px;line-height:2.1;color:var(--ink-2);
  letter-spacing:.03em;
}
.teacher-bio p{margin-bottom:20px;}
.teacher-quote{
  margin-top:40px;padding:28px 32px;border-left:2px solid var(--brass);background:var(--bg);
  font-family:var(--display);font-style:italic;font-size:20px;line-height:1.7;color:var(--accent);letter-spacing:.02em;
}
.teacher-cred{
  margin-top:40px;display:grid;grid-template-columns: 1fr 1fr;gap:32px;
  padding-top:32px;border-top:1px solid var(--line-2);
}
.cred-label{
  font-family:var(--display);font-style:italic;font-size:11.5px;letter-spacing:.28em;
  color:var(--brass);text-transform:uppercase;margin-bottom:12px;
}
.cred-value{
  font-family:var(--serif);font-weight:400;font-size:14px;color:var(--ink-2);line-height:1.9;letter-spacing:.02em;
}

/* ---------- FAQ ---------- */
.faq{padding: clamp(80px,12vw,160px) var(--pad);}
.faq-head{display:grid;grid-template-columns: 200px 1fr;gap:60px;margin-bottom:60px;}
.faq-list{border-top:1px solid var(--line-2);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line-2);}
.faq-q{
  width:100%;padding:36px 0;display:grid;grid-template-columns: 80px 1fr 40px;gap:32px;
  text-align:left;align-items:center;transition:color .3s;
}
.faq-q:hover .faq-q-text{color:var(--brass);}
.faq-q-num{
  font-family:var(--display);font-style:italic;font-size:24px;color:var(--brass);letter-spacing:.04em;
}
.faq-q-text{
  font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.06em;color:var(--ink);line-height:1.6;
  transition:color .3s;
}
.faq-toggle{
  width:36px;height:36px;border:1px solid var(--ink-3);border-radius:50%;
  display:grid;place-items:center;position:relative;transition:all .4s;
}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;background:var(--ink);}
.faq-toggle::before{width:14px;height:1px;}
.faq-toggle::after{width:1px;height:14px;transition:transform .4s;}
.faq-item.open .faq-toggle{background:var(--brass);border-color:var(--brass);}
.faq-item.open .faq-toggle::before,.faq-item.open .faq-toggle::after{background:var(--bg);}
.faq-item.open .faq-toggle::after{transform:rotate(90deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .55s ease, padding .55s ease;padding-left:112px;padding-right:72px;}
.faq-item.open .faq-a{max-height:400px;padding-bottom:36px;}
.faq-a p{font-family:var(--serif);font-weight:300;font-size:15px;line-height:2;color:var(--ink-2);letter-spacing:.03em;}

/* ---------- CTA + Contact ---------- */
.cta-contact{
  padding: clamp(100px,14vw,180px) var(--pad);
  background:var(--bg);color:var(--ink);position:relative;overflow:hidden;
}
.cta-contact::before{
  content:"";position:absolute;inset:0;
  background: radial-gradient(ellipse at 15% 25%, rgba(201,160,99,.08), transparent 60%);
}
.cta-contact::after{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(to right, transparent, var(--line-2), transparent);}
.cc-inner{position:relative;z-index:1;display:grid;grid-template-columns: 1fr 1.3fr;gap:80px;align-items:start;}
.cc-left{}
.cc-eyebrow{
  font-family:var(--display);font-style:italic;font-size:14px;letter-spacing:.4em;color:var(--brass);text-transform:uppercase;
  margin-bottom:32px;display:inline-flex;align-items:center;gap:14px;
}
.cc-eyebrow::before{content:"";width:36px;height:1px;background:var(--brass);}
.cc-title{
  font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.5vw,64px);line-height:1.35;letter-spacing:.04em;
  color:var(--ink);margin-bottom:36px;
}
.cc-title em{font-family:var(--display);font-style:italic;color:var(--brass);}
.cc-lede{
  font-family:var(--serif);font-weight:300;font-size:15.5px;line-height:2.1;color:var(--ink-2);
  letter-spacing:.03em;margin-bottom:44px;max-width:440px;
}
.cc-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px;padding-top:36px;border-top:1px solid var(--line-2);}
.cc-info h5{font-family:var(--display);font-style:italic;font-size:11px;letter-spacing:.32em;color:var(--brass);text-transform:uppercase;margin-bottom:12px;}
.cc-info p{font-family:var(--serif);font-weight:400;font-size:14.5px;line-height:1.9;color:var(--ink);letter-spacing:.03em;}
.cc-info p small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:4px;}

.cc-form{
  background:linear-gradient(180deg, #14100D, #0F0C0A);
  color:var(--ink);padding:56px 56px 48px;
  border:1px solid var(--line-2);position:relative;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(201,160,99,.08);
}
.cc-form::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right, transparent, var(--brass), transparent);opacity:.5;
}
.cc-form h3{
  font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.1em;color:var(--ink);margin-bottom:8px;
}
.cc-form h3 small{display:block;font-family:var(--display);font-style:italic;font-size:13px;color:var(--brass);letter-spacing:.2em;text-transform:uppercase;margin-top:6px;}
.cc-form .divider{width:32px;height:1px;background:var(--brass);margin:24px 0 32px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.form-field{margin-bottom:24px;}
.form-field label{display:block;font-family:var(--display);font-style:italic;font-size:11.5px;letter-spacing:.24em;color:var(--brass);text-transform:uppercase;margin-bottom:10px;}
.form-field label .req{color:var(--accent);}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:12px 4px;font-family:var(--serif);font-size:14.5px;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--line-2);
  letter-spacing:.02em;transition:border-color .3s;
}
.form-field select option{background:#14100D;color:var(--ink);}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--ink-3);opacity:.7;}
.form-field textarea{min-height:100px;resize:vertical;}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-bottom-color:var(--brass);}
.form-submit{
  margin-top:24px;padding:20px 32px;background:var(--brass);color:var(--bg);width:100%;
  font-family:var(--serif);font-size:13px;letter-spacing:.28em;font-weight:500;transition:all .3s;
  border:1px solid var(--brass);
  box-shadow: 0 12px 32px -12px rgba(201,160,99,.5);
}
.form-submit:hover{background:var(--accent);border-color:var(--accent);}
.form-consent{
  font-family:var(--serif);font-weight:300;font-size:12px;color:var(--ink-3);margin-top:18px;line-height:1.8;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--bg);border-top:1px solid var(--line-2);
  padding: 80px var(--pad) 32px;
}
.footer-top{
  display:grid;grid-template-columns: 2fr 1fr 1fr 1fr;gap:56px;padding-bottom:56px;border-bottom:1px solid var(--line-2);
}
.footer-brand-name{
  font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.14em;color:var(--ink);margin-bottom:6px;
}
.footer-brand-name small{display:block;font-family:var(--display);font-style:italic;font-size:12px;letter-spacing:.28em;color:var(--brass);margin-top:6px;text-transform:uppercase;}
.footer-brand p{margin-top:24px;font-family:var(--serif);font-weight:300;font-size:14px;line-height:2;color:var(--ink-2);max-width:340px;letter-spacing:.03em;}
.footer-col h5{font-family:var(--display);font-style:italic;font-size:12px;letter-spacing:.32em;color:var(--brass);text-transform:uppercase;margin-bottom:20px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;}
.footer-col a{font-family:var(--serif);font-weight:300;font-size:14px;color:var(--ink-2);letter-spacing:.03em;transition:color .3s;}
.footer-col a:hover{color:var(--brass);}
.footer-bottom{padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-family:var(--display);font-style:italic;font-size:12px;color:var(--ink-3);letter-spacing:.1em;}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.reveal-1{transition-delay:.08s}.reveal-2{transition-delay:.16s}.reveal-3{transition-delay:.24s}.reveal-4{transition-delay:.32s}

/* Responsive */
@media (max-width: 1100px){
  .services-grid{grid-template-columns:1fr;}
  .concept-head, .steps-head, .pricing-head, .faq-head, .services-head{grid-template-columns:1fr;gap:32px;}
  .concept-body{grid-template-columns:1fr;}
  .concept-quote, .concept-text{grid-column:1/-1;}
  .teacher-grid{grid-template-columns:1fr;}
  .teacher-side{grid-column:1;}
  .cc-inner{grid-template-columns:1fr;}
  .price-row{grid-template-columns:40px 1fr 140px;gap:16px;padding:24px 0;}
  .price-desc-r, .price-cta-r{grid-column:2 / span 2;}
  .price-cta-r{margin-top:12px;}
}
@media (max-width: 780px){
  .rail{display:none;}
  main{margin-left:0;}
  .topbar{left:0;}
  .topbar nav ul{display:none;}
  .hero{grid-template-columns:1fr;padding-top:120px;}
  .hero-side{height:60vh;}
  .steps-timeline{grid-template-columns:1fr 1fr;gap:32px;}
  .steps-timeline::before{display:none;}
  .form-row{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .teacher-huge{font-size:120px;}
  .cc-form{padding:32px 24px;}
}