:root {
  --ink: #142033;
  --ink-soft: #405066;
  --muted: #6f7a89;
  --line: #e5e8ec;
  --paper: #ffffff;
  --wash: #f7f9fb;
  --indigo: #0d2746;
  --indigo-2: #163a64;
  --crimson: #b51f2d;
  --crimson-dark: #901622;
  --sakura: #f7dce0;
  --gold: #bd9855;
  --shadow: 0 24px 70px rgba(18, 32, 51, 0.12);
  --radius: 8px;
  --serif: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  /* v5: Japanese typography tuning */
  --tracking-body: 0.012em;
  --tracking-head: 0.04em;
  --tracking-label: 0.02em;
  --leading-body: 1.85;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 92px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  overflow-x: hidden;
  line-break: strict;
  word-break: normal;
  /* v5: proportional kana/punctuation + crisper rendering */
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.modal-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* v5: visible keyboard focus (mouse clicks stay clean via :focus-visible) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
}

/* === v3: Japanese line-break quality (kinsoku / balanced headings) === */
h1,
h2,
h3 {
  text-wrap: balance;
  letter-spacing: var(--tracking-head);
}

p,
li,
dt,
dd,
.hero-lead,
summary {
  text-wrap: pretty;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 78px;
  padding: 14px clamp(18px, 4vw, 64px);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(229, 232, 236, 0.86);
  backdrop-filter: blur(18px);
}

.brand img {
  width: 188px;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 34px);
  color: var(--ink-soft);
  font-size: 0.9rem;
  white-space: nowrap;
}

.site-nav a {
  position: relative;
  padding: 6px 0;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--gold);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  background: var(--crimson);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}

.header-cta .cta-short {
  display: none;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
  min-height: calc(100svh - 78px);
  padding: clamp(52px, 8vw, 104px) clamp(20px, 5vw, 78px) clamp(42px, 5vw, 72px);
  overflow: hidden;
  background: #f4f1ee;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 28%, rgba(255, 255, 255, 0.38) 42%, rgba(255, 255, 255, 0.08) 54%, rgba(255, 255, 255, 0) 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 24%);
}

.hero-copy {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  max-width: 500px;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0 0 18px;
  padding: 0;
  border-left: 3px solid var(--crimson);
  padding-left: 12px;
  background: transparent;
  color: var(--crimson);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.4;
}

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.9rem, 4.8vw, 4.9rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0;
}

.hero-lead {
  max-width: 440px;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.03rem, 1.35vw, 1.2rem);
  line-height: 1.95;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--crimson);
  color: #fff;
  border-color: var(--crimson);
}

.btn-primary:hover {
  background: var(--crimson-dark);
  border-color: var(--crimson-dark);
}

.btn-secondary {
  background: #fff;
  color: var(--indigo);
  border-color: #ccd4dd;
}

.btn-large {
  width: 100%;
  min-height: 60px;
  font-size: 1.05rem;
}

.hero-facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: repeat(4, 1fr);
  max-width: 520px;
  margin: 42px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero-facts div {
  padding: 22px 18px;
  border-right: 1px solid var(--line);
}

.hero-facts div:last-child {
  border-right: 0;
}

.hero-facts dt {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.86rem);
  line-height: 1.1;
}

.hero-facts dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* v6: full-bleed portrait; desktop copy sits on the left, mobile copy follows the photo. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-figure {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f1f0ee;
}

.hero-figure img {
  width: 130%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
}

.booking-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 clamp(20px, 5vw, 78px);
  padding: 28px clamp(22px, 4vw, 48px);
  background: var(--indigo);
  color: #fff;
}

.strip-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.5;
}

.strip-copy {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.mid-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  margin: 0 clamp(20px, 5vw, 78px) clamp(78px, 10vw, 128px);
  padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 46px rgba(18, 32, 51, 0.07);
}

.mid-cta p {
  margin: 0 0 8px;
  color: var(--crimson);
  font-size: 0.88rem;
  font-weight: 800;
}

.mid-cta h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.55rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.section {
  padding: clamp(76px, 10vw, 136px) clamp(20px, 5vw, 78px);
}

.section-heading {
  max-width: 780px;
  margin: 0 auto clamp(34px, 5vw, 64px);
  text-align: center;
}

.section-number {
  margin: 0 0 12px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}

.section h2,
.section-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.7vw, 4.4rem);
  font-weight: 500;
  line-height: 1.24;
  /* optical sizing: tighten tracking on large display headings */
  letter-spacing: 0.02em;
}

.section-heading p:not(.section-number) {
  margin: 22px auto 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.95;
}

.schedule-section-wrapper {
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.schedule-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 46px);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.schedule-loading {
  display: grid;
  place-items: center;
  min-height: 180px;
  color: var(--muted);
  text-align: center;
}

.spinner-border {
  width: 34px;
  height: 34px;
  border: 3px solid #d8dfe8;
  border-top-color: var(--crimson);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.d-none {
  display: none !important;
}

.nav-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.nav-link {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-weight: 700;
}

.nav-link.active {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
}

.tab-pane {
  display: none;
}

.tab-pane.show,
.tab-pane.active {
  display: block;
}

.campus-detail-card {
  margin-bottom: 22px;
  padding: 22px;
  background: var(--wash);
  border: 1px solid var(--line);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

.row > * {
  padding: 10px;
}

.col-md-4 {
  width: 33.3333%;
}

.col-md-8 {
  width: 66.6667%;
}

.col-6 {
  width: 50%;
}

.campus-detail-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.campus-detail-card h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 1.4rem;
}

.campus-detail-card p {
  margin: 0 0 8px;
  color: var(--ink-soft);
}

.btn-outline-primary {
  min-height: 38px;
  padding: 0 14px;
  background: #fff;
  color: var(--indigo);
  border: 1px solid #b9c5d3;
}

/* v5: date-grouped available slots — one row per date, start times as chips */
.schedule-day-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.schedule-day {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
}

.schedule-day-head {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.schedule-day-times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.schedule-time-chip {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.schedule-time-chip:hover {
  border-color: var(--crimson);
  background: #fff8f8;
  color: var(--crimson);
}

.schedule-time-chip.active {
  border-color: var(--crimson);
  background: var(--crimson);
  color: #fff;
}

.list-group-item {
  display: block;
  width: 100%;
  min-height: 78px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
}

.list-group-item.active,
.list-group-item:hover {
  border-color: var(--crimson);
  background: #fff8f8;
}

.story-section {
  background: #fff;
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

.story-copy p:not(.section-number) {
  margin: 28px 0 0;
  color: var(--ink-soft);
}

.quiet-list {
  display: grid;
  gap: 12px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.quiet-list li {
  padding: 14px 0 14px 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.quiet-list li::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 14px 1px -22px;
  background: var(--crimson);
  content: "";
}

.story-image {
  margin: 0;
}

.story-image img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 36%;
  box-shadow: var(--shadow);
}

.proof-section {
  padding-top: 0;
}

.proof-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
  gap: clamp(28px, 5vw, 72px);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 64px);
  background: var(--indigo);
  color: #fff;
}

.proof-text h2 {
  font-size: clamp(2rem, 3.7vw, 3.4rem);
}

.proof-text p:not(.section-number) {
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.72);
}

.proof-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.proof-items article {
  padding: clamp(22px, 3vw, 34px);
  background: var(--indigo);
}

.proof-items span {
  color: var(--gold);
  font-size: 0.82rem;
}

.proof-items strong {
  display: block;
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
}

.proof-items p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

.teachers-section {
  background: var(--wash);
}

.teacher-visuals {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

.teacher-visuals figure {
  margin: 0;
  background: #fff;
  box-shadow: var(--shadow);
}

.teacher-visuals img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fff;
  object-fit: contain;
  object-position: center center;
}

.teacher-note {
  position: absolute;
  right: clamp(18px, 5vw, 68px);
  bottom: -38px;
  width: min(460px, calc(100% - 36px));
  padding: 26px 28px;
  background: #fff;
  border-left: 3px solid var(--crimson);
  box-shadow: var(--shadow);
}

.teacher-note p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.75;
}

.teacher-note span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.85rem;
}

.transformation-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.transformation-copy p:not(.section-number) {
  margin: 24px 0 0;
  color: var(--ink-soft);
}

.before-after {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.before-after article {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--line);
  background: #fff;
}

.before-after article:last-child {
  background: #fff9fa;
  border-color: #f0cfd4;
}

.before-after span {
  display: block;
  margin-bottom: 18px;
  color: var(--crimson);
  font-family: var(--serif);
  font-size: 1.55rem;
}

.before-after ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 1.1em;
  color: var(--ink-soft);
}

.image-rhythm {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr 0.85fr;
  gap: 14px;
  max-width: 1180px;
  margin: clamp(34px, 6vw, 72px) auto 0;
}

.image-rhythm img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}

.image-rhythm img:nth-child(1),
.image-rhythm img:nth-child(3) {
  height: 300px;
  margin-top: 34px;
}

.soft-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 920px;
  margin: clamp(30px, 5vw, 56px) auto 0;
  padding: 22px 26px;
  background: var(--wash);
  border: 1px solid var(--line);
}

.soft-cta p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 700;
}

.outing-section {
  padding-top: clamp(76px, 8vw, 104px);
  padding-right: 0;
  padding-left: 0;
  background: #fff;
  overflow: hidden;
}

.outing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 78px);
}

.outing-eyecatch {
  position: relative;
  min-height: 440px;
  margin: 0;
  overflow: hidden;
  background: var(--wash);
  box-shadow: var(--shadow);
}

.outing-eyecatch::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 39, 70, 0) 45%, rgba(13, 39, 70, 0.42) 100%);
  content: "";
}

.outing-eyecatch img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
}

.outing-copy {
  padding-right: clamp(0px, 2vw, 24px);
}

.outing-copy h2 {
  font-size: clamp(2.2rem, 4.4vw, 4rem);
}

.outing-copy p:not(.section-number) {
  margin: 24px 0 28px;
  color: var(--ink-soft);
}

.outing-marquee {
  position: relative;
  margin-top: clamp(32px, 5vw, 56px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.outing-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: outing-scroll 58s linear infinite;
}

.outing-marquee:hover .outing-track {
  animation-play-state: paused;
}

.outing-set {
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
}

.outing-set figure {
  position: relative;
  width: clamp(230px, 22vw, 320px);
  margin: 0;
  overflow: hidden;
  background: var(--wash);
}

.outing-set img {
  width: 100%;
  height: clamp(260px, 27vw, 380px);
  object-fit: cover;
}

.outing-set figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 11px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--indigo);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

@keyframes outing-scroll {
  to {
    transform: translateX(calc(-50% - 8px));
  }
}

.price-section {
  background: linear-gradient(180deg, #fff 0%, #f7f9fb 100%);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}

.price-card {
  padding: clamp(30px, 5vw, 58px);
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
  box-shadow: 0 16px 46px rgba(18, 32, 51, 0.06);
}

.price-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 500;
}

.price {
  margin: 22px 0 12px;
  color: var(--crimson);
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 5.8rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price span {
  margin-left: 4px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
}

.price-card p:not(.price) {
  margin: 0 auto 24px;
  color: var(--ink-soft);
}

.price-card-dark {
  background: var(--indigo);
  color: #fff;
}

.price-card-dark .price {
  color: #fff;
}

/* v5: raise specificity so the dark card's description isn't overridden by
   `.price-card p:not(.price)` (was rendering as low-contrast slate on navy). */
.price-card.price-card-dark p:not(.price) {
  color: rgba(255, 255, 255, 0.82);
}

.locations-section {
  background: #fff;
}

.location-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
}

.location-card {
  background: #fff;
  border: 1px solid var(--line);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.location-card:hover,
.location-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(18, 32, 51, 0.12);
}

.location-card:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
}

.location-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.location-card h3 {
  margin: 16px 16px 2px;
  font-size: 1rem;
}

.location-card p {
  margin: 0 16px 18px;
  color: var(--muted);
  font-size: 0.86rem;
}

.voices-section {
  background: var(--wash);
}

.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}

.voices-grid article {
  min-height: 240px;
  padding: 34px 30px;
  background: #fff;
  border-top: 3px solid var(--gold);
  box-shadow: 0 12px 34px rgba(18, 32, 51, 0.06);
}

.voices-grid p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.26rem;
  line-height: 1.85;
}

.voices-grid span {
  display: block;
  margin-top: 24px;
  color: var(--muted);
  font-size: 0.86rem;
}

.faq-list {
  max-width: 940px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.faq-list summary::after {
  color: var(--crimson);
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "-";
}

.faq-list p {
  margin: 0 0 24px;
  color: var(--ink-soft);
}

.preform-assurance {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: stretch;
  max-width: 1180px;
  margin: clamp(34px, 5vw, 58px) auto 0;
  padding: 18px;
  background: var(--wash);
  border: 1px solid var(--line);
}

.preform-assurance div {
  padding: 18px 16px;
  background: #fff;
  border: 1px solid var(--line);
}

.preform-assurance span {
  display: block;
  color: var(--crimson);
  font-weight: 800;
}

.preform-assurance p {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.65;
}

.preform-assurance .btn {
  min-width: 190px;
  min-height: 100%;
}

.form-section {
  background: var(--indigo);
  color: #fff;
}

.form-intro {
  max-width: 940px;
  margin: 0 auto 42px;
}

.form-intro p:not(.section-number) {
  color: rgba(255, 255, 255, 0.74);
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(22px, 4vw, 44px);
  max-width: 1180px;
  margin: 0 auto;
  min-width: 0;
}

.form-side {
  background: #fff;
  color: var(--ink);
}

.form-side img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.form-side-copy {
  padding: 24px;
}

.form-side h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 1.6rem;
}

.form-side ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--ink-soft);
}

.trial-form {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.form-block {
  margin: 0;
  padding: clamp(22px, 4vw, 34px);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--ink);
  min-width: 0;
}

.form-block legend,
.form-block > h3 {
  margin: 0 0 18px;
  padding: 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  letter-spacing: 0.02em;
}

/* v5: a <legend> straddles the fieldset's top border by default, so its upper
   half sat on the navy section behind the white card and looked clipped. Float
   it into normal flow (and clear the following field) so it sits inside the card. */
.form-block legend {
  float: left;
  width: 100%;
}

.form-block legend + * {
  clear: left;
}

.campus-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  min-width: 0;
}

.campus-options label {
  position: relative;
  min-width: 0;
}

.campus-options input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.campus-options span {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.campus-options input:checked + span {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
}

.form-help {
  display: inline-block;
  margin-top: 14px;
  color: var(--crimson);
  font-size: 0.9rem;
  font-weight: 700;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.calendar-header h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.45rem;
}

.calendar-nav {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 1.55rem;
  line-height: 1;
}

.calendar-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.calendar-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}

.calendar-table th {
  padding: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.calendar-table td {
  height: 48px;
  border: 1px solid var(--line);
}

.calendar-day {
  display: grid;
  place-items: center;
  width: 100%;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.calendar-day.available {
  color: var(--crimson);
  font-weight: 800;
}

.calendar-day.available:hover,
.calendar-day.selected {
  background: var(--crimson);
  color: #fff;
}

.calendar-day.disabled {
  color: #c3cad3;
}

.form-text {
  margin: 14px 0 8px;
  font-size: 0.9rem;
}

.text-muted {
  color: var(--muted);
}

.text-danger {
  color: var(--crimson);
}

.time-slot-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.time-slot-container .position-relative {
  position: relative;
}

.time-slot-container input {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

.time-slot-container label {
  padding-right: 44px;
}

.time-slot-container input:checked + label {
  border-color: var(--crimson);
  background: #fff8f8;
}

.input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.input-grid label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

/* v5: caption + required mark on one line (was: ＊ dropped to its own row
   because the bare text node and <span> became separate grid items). */
.input-grid .field-label {
  letter-spacing: var(--tracking-label);
}

.input-grid .field-label em {
  margin-left: 3px;
  color: var(--crimson);
  font-style: normal;
}

.input-grid input,
.input-grid textarea {
  width: 100%;
  border: 1px solid #cfd6df;
  background: #fff;
  color: var(--ink);
  padding: 13px 14px;
  font-size: 1rem;
}

.input-grid input:focus,
.input-grid textarea:focus {
  outline: 2px solid rgba(181, 31, 45, 0.24);
  border-color: var(--crimson);
}

.input-wide {
  grid-column: 1 / -1;
}

.was-validated input:invalid,
.was-validated textarea:invalid {
  border-color: var(--crimson);
}

.submit-panel {
  padding: 24px;
  background: #fff;
  color: var(--ink);
}

.submit-panel p {
  margin: 0 0 16px;
  color: var(--ink-soft);
}

.submit-panel small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  text-align: center;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 42px clamp(20px, 5vw, 78px) 112px;
  background: #071b31;
  color: #fff;
}

.site-footer img {
  width: 190px;
  filter: brightness(0) invert(1);
}

.site-footer p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.84rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: rgba(255, 255, 255, 0.78);
}

.sticky-footer {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 28;
  display: none;
  grid-template-columns: 0.34fr 0.66fr;
  max-width: 520px;
  min-height: 62px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 50px rgba(18, 32, 51, 0.22);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.sticky-footer {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
}

body.has-scrolled .sticky-footer {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sticky-footer.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.line-link,
.sticky-main {
  display: grid;
  place-items: center;
  font-weight: 800;
}

.line-link {
  background: #fff;
  color: var(--indigo);
  border: 1px solid var(--line);
}

.sticky-main {
  background: var(--crimson);
  color: #fff;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 20, 34, 0.62);
}

.modal.show {
  display: flex;
}

.modal-dialog {
  width: min(760px, 100%);
}

.modal-content {
  position: relative;
  padding: clamp(22px, 4vw, 38px);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.modal-content h3 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 2rem;
}

.modal-content img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.modal-content p {
  margin: 18px 0 0;
  color: var(--ink-soft);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
}

.toast-container {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 70;
}

.custom-toast {
  padding: 12px 16px;
  background: var(--indigo);
  color: #fff;
}

.small {
  font-size: 0.88rem;
}

.fw-semibold,
.fw-bold {
  font-weight: 700;
}

.d-block {
  display: block;
}

.opacity-75 {
  opacity: 0.75;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-3 {
  margin-bottom: 12px;
}

.mb-4 {
  margin-bottom: 18px;
}

.mt-3 {
  margin-top: 12px;
}

.text-start {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-primary {
  color: var(--crimson);
}

@media (max-width: 1100px) {
  .site-nav {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 0 0 56px;
    background: #fff;
  }

  .hero::before {
    display: none;
  }

  .hero-copy,
  .hero-facts {
    grid-column: 1;
    grid-row: auto;
  }

  .hero-copy {
    width: min(100%, 680px);
    max-width: none;
    margin-inline: auto;
    padding: 44px 28px 0;
  }

  /* tablet and phone: show the full-body photo first, then place text below. */
  .hero-media {
    position: relative;
    inset: auto;
    z-index: 0;
    grid-column: 1;
    grid-row: 1;
    height: clamp(520px, 68svh, 720px);
  }

  .hero-figure {
    height: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .hero-figure img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    object-position: center center;
  }

  .hero-facts {
    width: min(calc(100% - 56px), 680px);
    max-width: none;
    margin: 34px auto 0;
  }

  .story-grid,
  .proof-panel,
  .transformation-grid,
  .form-layout {
    grid-template-columns: 1fr;
  }

  .location-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .br-pc {
    display: none;
  }

  .site-header {
    min-height: 66px;
    padding: 10px 16px;
  }

  .brand img {
    width: 144px;
  }

  .header-cta {
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.85rem;
  }

  .header-cta .cta-full {
    display: none;
  }

  .header-cta .cta-short {
    display: inline;
  }

  .hero {
    padding: 0 0 48px;
  }

  .hero-media {
    height: clamp(460px, 66svh, 620px);
  }

  .hero-copy {
    padding: 36px 18px 0;
  }

  .hero h1 {
    font-size: clamp(2.45rem, 10.5vw, 3.5rem);
    line-height: 1.12;
  }

  .hero-lead {
    margin-top: 22px;
  }

  .hero-actions {
    display: grid;
  }

  .hero-facts {
    grid-template-columns: repeat(2, 1fr);
    width: calc(100% - 36px);
    margin-top: 32px;
  }

  .hero-facts div {
    padding: 16px 8px;
  }

  .hero-facts div:nth-child(2n) {
    border-right: 0;
  }

  .hero-facts div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .booking-strip {
    display: grid;
    margin: 0 18px;
  }

  .mid-cta,
  .soft-cta {
    display: grid;
    margin-right: 18px;
    margin-left: 18px;
  }

  .section {
    padding: 72px 18px;
  }

  .section h2,
  .section-heading h2 {
    font-size: clamp(1.95rem, 7.4vw, 2.7rem);
    line-height: 1.3;
  }

  .schedule-shell {
    padding: 16px;
  }

  .proof-items,
  .before-after,
  .price-grid,
  .voices-grid,
  .input-grid,
  .time-slot-container,
  .preform-assurance {
    grid-template-columns: 1fr;
  }

  .preform-assurance .btn {
    min-height: 54px;
  }

  /* v5: campus selectors wrap to ~2 rows of chips instead of 5 tall buttons */
  .schedule-tabs.nav-tabs,
  .campus-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .schedule-tabs .nav-item,
  .campus-options label {
    flex: 1 1 30%;
  }

  .schedule-tabs .nav-link {
    width: 100%;
    min-height: 46px;
    padding: 0 5px;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
  }

  .campus-options span {
    min-height: 48px;
    padding: 8px 4px;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
  }

  .col-md-4,
  .col-md-8 {
    width: 100%;
  }

  .teacher-note {
    position: static;
    width: auto;
    margin: 0;
  }

  .image-rhythm {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
  }

  .image-rhythm img,
  .image-rhythm img:nth-child(1),
  .image-rhythm img:nth-child(3) {
    width: 100%;
    height: 300px;
    margin-top: 0;
  }

  .outing-hero {
    grid-template-columns: 1fr;
    padding: 0 18px;
  }

  .outing-eyecatch,
  .outing-eyecatch img {
    min-height: 390px;
  }

  .outing-copy {
    padding-right: 0;
  }

  .outing-marquee {
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }

  .outing-track {
    gap: 12px;
    animation-duration: 48s;
  }

  .outing-set {
    gap: 12px;
  }

  .outing-set figure {
    width: 245px;
  }

  .outing-set img {
    height: 300px;
  }

  .location-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
  }

  .location-card {
    width: 100%;
  }

  /* v5: testimonials shouldn't force tall empty cards on mobile */
  .voices-grid article {
    min-height: 0;
    padding: 26px 22px;
  }

  .form-side {
    display: none;
  }

  .site-footer {
    display: grid;
  }

  .sticky-footer {
    display: grid;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 15px;
  }

  .site-header {
    gap: 12px;
  }

  .brand img {
    width: 118px;
  }

  .hero-facts dt {
    font-size: 1.55rem;
  }

  .hero-facts dd {
    font-size: 0.78rem;
  }

  .hero-facts div {
    padding: 14px 6px;
  }

  .hero-kicker {
    margin-bottom: 14px;
    font-size: 0.78rem;
  }

  .hero {
    padding-top: 0;
    padding-bottom: 34px;
  }

  .hero-media {
    height: clamp(430px, 63svh, 560px);
  }

  .hero h1 {
    font-size: 2.48rem;
    line-height: 1.2;
  }

  .hero-lead {
    margin-top: 20px;
    line-height: 1.85;
  }

  .hero-actions {
    margin-top: 28px;
  }

  .hero-figure {
    height: 100%;
    aspect-ratio: auto;
    max-width: none;
  }

  .hero-figure img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    object-position: center center;
  }

  .calendar-table td,
  .calendar-day {
    height: 42px;
  }

  .calendar-table th {
    padding: 6px 2px;
  }

  .form-block {
    padding: 20px 16px;
  }

  /* v5: stack date heading above its time chips on small phones */
  .schedule-day {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 14px;
  }

  .schedule-time-chip {
    flex: 1 1 30%;
    padding: 0 10px;
  }
}

/* v5: gentle scroll-reveal for top-level sections only. form.js tags every
   section/div with .scroll-animate and toggles .is-visible via IntersectionObserver
   (adding it immediately when IO/JS is unavailable). We scope the hidden state to
   `main > section` so arbitrary nested divs are never accidentally hidden, exclude
   the hero (above the fold / LCP), and gate everything on no-preference so
   reduced-motion users always see content. */
@media (prefers-reduced-motion: no-preference) {
  main > section.scroll-animate {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
  }

  main > section.scroll-animate.is-visible {
    opacity: 1;
    transform: none;
  }

  /* hero must not start hidden (avoids first-paint flash / LCP penalty) */
  main > section.hero.scroll-animate {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .outing-track {
    animation: none;
  }
}

/* === v3: compatibility utilities for JS-generated markup === */
/* form.js / ui.js emit Bootstrap-style class names. The custom stylesheet only
   reimplemented a subset, leaving the calendar, schedule cards, confirmation
   dialog and toast partially unstyled. These fill the remaining gaps. */
.p-0 {
  padding: 0 !important;
}

.calendar-day.btn {
  min-height: 0;
}

.py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-4 {
  padding-top: 18px;
  padding-bottom: 18px;
}

.pe-5 {
  padding-right: 40px;
}

.col-4 {
  width: 33.3333%;
}

.col-8 {
  width: 66.6667%;
}

.g-2 {
  margin: -4px;
}

.g-2 > * {
  padding: 4px;
}

.g-3 {
  margin: -6px;
}

.g-3 > * {
  padding: 6px;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.align-items-center {
  align-items: center;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.m-auto {
  margin: auto;
}

.me-2 {
  margin-right: 8px;
}

.me-3 {
  margin-right: 12px;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.rounded-3 {
  border-radius: 8px;
}

.shadow-sm {
  box-shadow: 0 6px 18px rgba(18, 32, 51, 0.08);
}

.btn-sm {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.85rem;
}

.toast-body {
  padding: 4px 4px 4px 8px;
}

.btn-close {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0.85;
}

.btn-close::before {
  content: "\00d7";
}

.btn-close-white {
  color: #fff;
}

/* v5: clean numerals on the form's start-time cards */
.time-slot-container strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* === v5: brand-align the SweetAlert2 confirmation dialog ===
   The vendor default uses rounded corners and a blue/teal palette that clashes
   with the LP's sharp-edged crimson/navy/Mincho language. Restyle via the
   stable swal2-* hooks (no JS change). */
.swal2-popup {
  border-radius: 0;
  font-family: var(--sans);
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--shadow);
}

.swal2-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

.swal2-html-container {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.8;
}

.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
  border-color: var(--indigo);
  color: var(--indigo);
}

.swal2-icon.swal2-success {
  border-color: var(--gold);
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--gold);
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(189, 152, 85, 0.3);
}

.swal2-actions {
  gap: 10px;
}

.swal2-styled.swal2-confirm {
  border-radius: 0;
  background: var(--crimson);
  color: #fff;
  font-weight: 700;
  padding: 12px 26px;
  box-shadow: none;
}

.swal2-styled.swal2-confirm:hover {
  background: var(--crimson-dark);
}

.swal2-styled.swal2-cancel {
  border-radius: 0;
  background: #fff;
  color: var(--indigo);
  border: 1px solid #ccd4dd;
  font-weight: 700;
  padding: 12px 26px;
  box-shadow: none;
}

.swal2-styled:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
  box-shadow: none;
}

/* confirmation summary reads as aligned label : value rows. Override the
   bootstrap-style col-4/col-8 grid, which wraps inside swal2 due to its
   box-sizing reset; a 2-col CSS grid is robust and tidy. */
.swal2-html-container dl.row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0;
}

.swal2-html-container dl.row dt,
.swal2-html-container dl.row dd {
  width: auto;
  margin: 0;
  padding: 0;
}

.swal2-html-container dt {
  color: var(--ink);
  white-space: nowrap;
}

.swal2-html-container dd {
  color: var(--ink-soft);
}

@media (max-width: 520px) {
  
}