/* ─── Rinrada Thai Massage School Barcelona — design system ──────────
   Self-contained on purpose: this file must NOT import or depend on the root
   styles.css. Two live brands sharing one stylesheet means a Mantra tweak can
   silently break the school. See docs/PLAN-SCHOOL-SITE.md.

   Identity: taken straight off the Rinrada Thai Academy logo — the warm brown
   of the wordmark (clay), the sand disc behind the lotus, cream paper. Same
   type scale and component architecture as Mantra (Cormorant Garamond
   display, Inter body) so the two read as related, entirely different palette
   so the school reads as its own institution.

   Design brief (spec §18): professional, modern, calm, authentic, high
   quality, personal, clear, not overcrowded. Whitespace is doing real work
   here — resist tightening it.                                              */

:root {
  --clay: #6b4636;       /* the RINRADA wordmark */
  --clay-deep: #472e23;
  --clay-mid: #8a6350;
  --clay-soft: #e6d8cb;
  --clay-pale: #f7f0e9;

  --brass: #a8763f;      /* accent: warm ochre, sits between clay and sand */
  --brass-bright: #c99a5c;
  --brass-soft: #e8d5bf; /* the disc behind the lotus */
  --brass-pale: #faf2e7;

  --cream: #fcf9f4;
  --ink: #2a211c;
  --ink-soft: #6d5f56;
  --ink-faint: #9a8b80;
  --line: #ebe3da;
  --white: #ffffff;
  --warn: #a5442f;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --shadow: 0 12px 44px rgba(71, 46, 35, 0.10);
  --shadow-sm: 0 4px 18px rgba(71, 46, 35, 0.07);
  --shadow-lg: 0 24px 70px rgba(71, 46, 35, 0.14);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1140px;
  --wrap-narrow: 760px;
  --header-h: 76px;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--brass-soft); color: var(--clay-deep); }

:focus-visible {
  outline: 2.5px solid var(--brass);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Layout primitives ──────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding: clamp(64px, 9vw, 116px) 0; }
.section-tight { padding: clamp(44px, 6vw, 72px) 0; }
.section-clay { background: var(--clay-deep); color: var(--clay-soft); }
.section-pale { background: var(--clay-pale); }
.section-white { background: var(--white); }

.stack > * + * { margin-top: 1.1rem; }

/* ─── Typography ─────────────────────────────────────────────────────── */

.kicker {
  font-size: 0.74rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brass);
  margin-bottom: 1rem;
}
.section-clay .kicker { color: var(--brass-bright); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.008em;
  color: var(--clay-deep);
}
.section-clay h1,
.section-clay h2,
.section-clay h3,
.section-clay h4 { color: var(--cream); }

h1 { font-size: clamp(2.5rem, 6vw, 4.1rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
h4 { font-size: 1.16rem; line-height: 1.3; }

.lead {
  font-size: clamp(1.06rem, 1.7vw, 1.24rem);
  color: var(--ink-soft);
  line-height: 1.68;
  max-width: 62ch;
}
.section-clay .lead { color: rgba(252, 249, 244, 0.82); }

.section-head { max-width: 66ch; margin-bottom: clamp(38px, 5vw, 60px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lead { margin-inline: auto; }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: 0.93rem; }

.rule {
  width: 54px;
  height: 2px;
  background: var(--brass);
  border: 0;
  margin: 1.5rem 0;
}
.section-head.center .rule { margin-inline: auto; }

/* ─── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.92rem 1.7rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    border-color 0.18s ease, color 0.18s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--clay);
  color: var(--cream);
  box-shadow: 0 8px 26px rgba(107, 70, 54, 0.26);
}
.btn-primary:hover { background: var(--clay-deep); box-shadow: 0 12px 32px rgba(107, 70, 54, 0.32); }

.btn-brass {
  background: var(--brass);
  color: #fff;
  box-shadow: 0 8px 26px rgba(168, 118, 63, 0.28);
}
.btn-brass:hover { background: #8d6234; }

.btn-ghost {
  background: transparent;
  color: var(--clay-deep);
  border-color: var(--clay-soft);
}
.btn-ghost:hover { border-color: var(--clay); background: var(--white); }
.section-clay .btn-ghost { color: var(--cream); border-color: rgba(252, 249, 244, 0.34); }
.section-clay .btn-ghost:hover { background: rgba(252, 249, 244, 0.09); border-color: var(--cream); }

.btn-sm { padding: 0.68rem 1.2rem; font-size: 0.88rem; }
.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}
.section-head.center .btn-row { justify-content: center; }

/* ─── Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(252, 249, 244, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.02;
  color: var(--clay-deep);
  display: flex;
  flex-direction: column;
}
.brand-name small {
  font-family: var(--font-body);
  font-size: 0.575rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: 3px;
}

.site-nav { display: flex; align-items: center; gap: 1.9rem; }
.site-nav a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color 0.16s ease;
  white-space: nowrap;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--brass);
  transition: right 0.24s ease;
}
.site-nav a:hover { color: var(--clay-deep); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { right: 0; }
.site-nav a[aria-current="page"] { color: var(--clay-deep); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.6px;
  background: var(--clay-deep);
  transition: transform 0.24s ease, opacity 0.18s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* ─── Language selector ──────────────────────────────────────────────── */

.lang-picker { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.44rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--clay-deep);
  transition: border-color 0.16s ease;
}
.lang-btn:hover { border-color: var(--clay-soft); }
.lang-btn svg { width: 15px; height: 15px; opacity: 0.6; }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 178px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
  z-index: 70;
  max-height: 62vh;
  overflow-y: auto;
}
.lang-menu[data-open="true"] { display: block; }
.lang-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.52rem 0.72rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font-size: 0.88rem;
  text-align: left;
  color: var(--ink);
}
.lang-menu button:hover { background: var(--clay-pale); }
.lang-menu button[aria-current="true"] { color: var(--clay); font-weight: 600; }
.lang-menu button[aria-current="true"]::after { content: "✓"; color: var(--brass); }

/* ─── Hero ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(66px, 10vw, 122px) 0 clamp(58px, 8vw, 100px);
  background:
    radial-gradient(1100px 520px at 78% -8%, var(--clay-pale), transparent 66%),
    radial-gradient(760px 420px at 6% 104%, var(--brass-pale), transparent 62%),
    var(--cream);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(36px, 5.5vw, 76px);
  align-items: center;
}
.hero h1 { margin-bottom: 1.3rem; }
.hero h1 em {
  font-style: italic;
  color: var(--brass);
}
.hero-note {
  margin-top: 2.1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
}
.hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--clay-deep);
  line-height: 1.1;
}
.hero-stat span {
  font-size: 0.79rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}

/* ─── Image slots (placeholders until Koffy's photos arrive) ─────────── */

.shot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--clay-soft);
  box-shadow: var(--shadow-lg);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot-tall { aspect-ratio: 4 / 5; }
.shot-wide { aspect-ratio: 3 / 2; }
.shot-square { aspect-ratio: 1 / 1; }

/* typographic stand-in so the layout is honest about what is missing rather
   than shipping a grey box that looks like a bug */
.shot-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.6rem;
  text-align: center;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 13px,
      rgba(107, 70, 54, 0.035) 13px, rgba(107, 70, 54, 0.035) 26px),
    linear-gradient(160deg, var(--clay-soft), var(--brass-pale));
  color: var(--clay);
}
.shot-placeholder .lotus { width: 40px; height: 40px; opacity: 0.5; }
.shot-placeholder span {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.72;
}

/* ─── Cards ──────────────────────────────────────────────────────────── */

.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--ink-soft); }

.value-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.value-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--clay-soft);
}
.value-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--brass-pale);
  color: var(--brass);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.value-icon svg { width: 21px; height: 21px; }
.value-card h4 { color: var(--clay-deep); }
.value-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* ─── Course cards ───────────────────────────────────────────────────── */

.course-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--clay-soft);
}
.course-card.is-flagship { border-color: var(--brass-soft); background: linear-gradient(180deg, var(--brass-pale), var(--white) 30%); }

.course-top {
  padding: 26px 26px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.course-tag {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brass);
  background: var(--brass-pale);
  border-radius: 999px;
  padding: 0.3rem 0.72rem;
  white-space: nowrap;
}
.course-body { padding: 14px 26px 0; flex: 1; }
.course-body h3 { margin-bottom: 0.55rem; }
.course-body p { color: var(--ink-soft); font-size: 0.95rem; }

.course-facts {
  list-style: none;
  margin-top: 1.15rem;
  display: grid;
  gap: 0.42rem;
}
.course-facts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  padding-bottom: 0.42rem;
  border-bottom: 1px dashed var(--line);
}
.course-facts li:last-child { border-bottom: 0; }
.course-facts dt, .course-facts .k { color: var(--ink-faint); }
.course-facts .v { font-weight: 600; color: var(--clay-deep); text-align: right; }

.course-foot {
  padding: 22px 26px 26px;
  margin-top: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
.course-price {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--clay-deep);
  line-height: 1;
}
.course-price small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: 4px;
  text-transform: uppercase;
}

/* ─── Group seat status (spec §11) ───────────────────────────────────── */

.seat-status {
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  background: var(--clay-pale);
  border: 1px solid var(--clay-soft);
  margin-top: 1.1rem;
}
.seat-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--clay-deep);
  margin-bottom: 0.55rem;
}
.seat-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--white);
  overflow: hidden;
  border: 1px solid var(--clay-soft);
}
.seat-bar i {
  display: block;
  height: 100%;
  background: var(--brass);
  border-radius: 999px;
  transition: width 0.5s ease;
}
.seat-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.5rem; }
.seat-status.is-confirmed { background: var(--brass-pale); border-color: var(--brass-soft); }
.seat-status.is-confirmed .seat-bar i { background: var(--clay); }

/* ─── Instructors ────────────────────────────────────────────────────── */

.tutor {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tutor .shot { border-radius: 0; box-shadow: none; }
.tutor-body { padding: 26px; flex: 1; }
.tutor-role {
  font-size: 0.71rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.tutor-body h3 { margin-bottom: 0.7rem; }
.tutor-body p { color: var(--ink-soft); font-size: 0.95rem; }
.tutor-body p + p { margin-top: 0.75rem; }

.credential {
  margin-top: 1.1rem;
  padding: 0.9rem 1rem;
  border-left: 2.5px solid var(--brass);
  background: var(--brass-pale);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  color: var(--clay-deep);
}
.credential strong { display: block; font-weight: 600; }
.credential .thai {
  display: block;
  margin-top: 3px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

/* ─── Accordion (FAQ + student info) ─────────────────────────────────── */

.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: 1.25rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--clay-deep);
}
.acc-head:hover { color: var(--brass); }
.acc-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.acc-icon::before,
.acc-icon::after {
  content: "";
  position: absolute;
  background: var(--clay);
  border-radius: 2px;
}
.acc-icon::before { width: 11px; height: 1.6px; }
.acc-icon::after { width: 1.6px; height: 11px; transition: transform 0.24s ease, opacity 0.24s ease; }
.acc-head[aria-expanded="true"] .acc-icon { background: var(--brass-pale); border-color: var(--brass-soft); }
.acc-head[aria-expanded="true"] .acc-icon::after { transform: rotate(90deg); opacity: 0; }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.acc-panel > div { overflow: hidden; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p, .acc-panel ul { color: var(--ink-soft); font-size: 0.97rem; }
.acc-panel > div > *:last-child { padding-bottom: 1.4rem; }
.acc-panel ul { padding-left: 1.15rem; }
.acc-panel li + li { margin-top: 0.35rem; }

/* ─── Forms ──────────────────────────────────────────────────────────── */

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 42px);
  box-shadow: var(--shadow-sm);
}

.fieldset { border: 0; }
.fieldset + .fieldset { margin-top: 2.4rem; }

/* A <legend> is rendered outside its fieldset's box origin, which makes it
   unreliable to draw a divider around: border-top on the fieldset gets
   interrupted by the legend and pokes out to its right, and an absolutely
   positioned pseudo-element at top:0 lands UNDER the legend instead of above
   it. Floating the legend opts out of that special rendering entirely, so it
   behaves as a normal block and can carry its own border-bottom. Every
   section gets the same underline as a result, including the first one. */
.fieldset > legend {
  float: left;
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--clay-deep);
  padding: 0 0 0.6rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
/* the float above has to be cleared by whatever follows the legend, which is
   a .legend-note on most sections and a button on the last one */
.fieldset > legend + * { clear: both; }
.fieldset > .legend-note {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}

.field { margin-bottom: 1.15rem; }
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.1rem;
}
.field label,
.field .label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--clay-deep);
  margin-bottom: 0.4rem;
}
.field .req { color: var(--brass); }
.field .hint {
  font-size: 0.81rem;
  color: var(--ink-faint);
  font-weight: 400;
  margin-top: 0.3rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.78rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.96rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d5f56' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
  padding-right: 2.4rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(107, 70, 54, 0.11);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--warn);
  box-shadow: 0 0 0 3px rgba(165, 68, 47, 0.1);
}
.field-error {
  display: none;
  font-size: 0.82rem;
  color: var(--warn);
  margin-top: 0.35rem;
  font-weight: 500;
}
.field.has-error .field-error { display: block; }

/* checkbox / radio */
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
  font-size: 0.92rem;
  line-height: 1.55;
}
.check:hover { border-color: var(--clay-soft); background: var(--clay-pale); }
.check input { margin-top: 0.28rem; width: 17px; height: 17px; accent-color: var(--clay); flex-shrink: 0; }
.check-grid { display: grid; gap: 0.55rem; }
.check-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check:has(input:checked) { border-color: var(--clay); background: var(--clay-pale); }

/* selected-course summary */
.summary {
  background: var(--clay-pale);
  border: 1px solid var(--clay-soft);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
}
.summary h4 { margin-bottom: 0.8rem; }
.summary dl { display: grid; gap: 0.45rem; }
.summary .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.91rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--clay-soft);
}
.summary .row:last-child { border-bottom: 0; }
.summary .row dt { color: var(--ink-soft); }
.summary .row dd { font-weight: 600; color: var(--clay-deep); text-align: right; }
.summary .row.total dd { font-size: 1.05rem; }

.form-status {
  display: none;
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
}
.form-status[data-kind="error"] { display: block; background: #fbeee8; color: var(--warn); border: 1px solid #f0d3c6; }
.form-status[data-kind="working"] { display: block; background: var(--clay-pale); color: var(--clay); border: 1px solid var(--clay-soft); }

/* ─── Notices ────────────────────────────────────────────────────────── */

.notice {
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  font-size: 0.94rem;
  line-height: 1.65;
  border: 1px solid var(--clay-soft);
  background: var(--clay-pale);
  color: var(--ink-soft);
}
.notice strong { color: var(--clay-deep); }
.notice-brass { background: var(--brass-pale); border-color: var(--brass-soft); }
.notice-plain { background: var(--white); border-color: var(--line); }

.season-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  text-align: center;
  padding: 0.85rem 1.2rem;
  background: var(--clay-deep);
  color: var(--brass-soft);
  font-size: 0.88rem;
  font-weight: 500;
}
.season-strip svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── Quote / philosophy block ───────────────────────────────────────── */

.quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  line-height: 1.32;
  font-style: italic;
  color: var(--cream);
  max-width: 22ch;
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--brass-bright);
  display: block;
  margin-bottom: 0.6rem;
}

/* ─── Steps ──────────────────────────────────────────────────────────── */

.steps { counter-reset: step; display: grid; gap: 1.5rem; }
.step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1.1rem;
  align-items: start;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--brass-soft);
  color: var(--brass);
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.section-clay .step::before { background: transparent; border-color: rgba(201, 154, 92, 0.5); color: var(--brass-bright); }
.step h4 { margin-bottom: 0.28rem; }
.step p { color: var(--ink-soft); font-size: 0.95rem; }
.section-clay .step p { color: rgba(252, 249, 244, 0.75); }

/* ─── Table (course comparison) ──────────────────────────────────────── */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
}
.cmp th, .cmp td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th {
  background: var(--clay-pale);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 700;
  white-space: nowrap;
}
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr:hover { background: var(--clay-pale); }
.cmp td strong { color: var(--clay-deep); }

/* ─── Contact ────────────────────────────────────────────────────────── */

.contact-list { display: grid; gap: 1.15rem; }
.contact-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1rem;
  align-items: start;
}
.contact-row .value-icon { width: 42px; height: 42px; }
.contact-row a { color: var(--clay); text-decoration: none; font-weight: 600; word-break: break-word; }
.contact-row a:hover { text-decoration: underline; }
.contact-row .k {
  font-size: 0.73rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  background: var(--clay-soft);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ─── Footer ─────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--clay-deep);
  color: rgba(252, 249, 244, 0.72);
  padding: clamp(52px, 6vw, 78px) 0 32px;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 52px);
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(252, 249, 244, 0.13);
}
.site-footer .brand-name { color: var(--cream); }
.site-footer .brand-name small { color: var(--brass-bright); }
.footer-col h5 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brass-bright);
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.55rem; }
.footer-col a { text-decoration: none; transition: color 0.16s ease; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.83rem;
  color: rgba(252, 249, 244, 0.5);
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--cream); }

/* ─── Thanks page ────────────────────────────────────────────────────── */

.thanks {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  padding: 60px 0;
}
.thanks-card {
  max-width: 620px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 58px);
  box-shadow: var(--shadow);
}
.thanks-seal {
  width: 74px;
  height: 74px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--brass-pale);
  border: 1.5px solid var(--brass-soft);
  display: grid;
  place-items: center;
  color: var(--brass);
}
.thanks-seal svg { width: 32px; height: 32px; }

/* ─── Utilities ──────────────────────────────────────────────────────── */

.center { text-align: center; }
.hidden, [hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--clay-deep);
  color: var(--cream);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { left: 16px; }

/* ─── Reveal on scroll ───────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero .shot-tall { aspect-ratio: 3 / 2; max-height: 380px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px 22px;
    box-shadow: var(--shadow);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  body.nav-open .site-nav { opacity: 1; transform: none; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .site-nav a { padding: 0.95rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .site-nav a::after { display: none; }
  .site-nav a:last-child { border-bottom: 0; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .check-grid.cols-2, .check-grid.cols-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .btn-row .btn { width: 100%; }
  .course-foot { flex-direction: column; align-items: stretch; }
  .course-foot .btn { width: 100%; }
  .hero-note { gap: 1.2rem 1.8rem; }
  .fieldset + .fieldset { margin-top: 1.9rem; }

  /* ─── Course comparison: table -> stacked cards ────────────────────
     A six-column comparison table cannot work at 400px. Left as a
     horizontal scroller it clipped at three columns, hiding Price and
     Booking — the two cells a prospective student actually came for — with
     nothing on screen to suggest the rest existed. So below this breakpoint
     each row becomes a card and each cell carries its column heading.
     The headings come from data-label, which school.js copies out of the
     real <thead> after i18n has run, so they stay translated in all seven
     languages instead of being hard-coded English in the markup. */
  .table-scroll { overflow-x: visible; }
  .cmp { min-width: 0; display: block; background: transparent; }
  .cmp thead { display: none; }
  .cmp tbody, .cmp tbody tr, .cmp tbody td { display: block; width: 100%; }
  .cmp tbody tr {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
  }
  .cmp tbody tr + tr { margin-top: 14px; }
  .cmp tbody tr:hover { background: var(--white); }
  .cmp tbody td { border-bottom: 0; padding: 0; }
  .cmp tbody td:first-child {
    font-size: 1.04rem;
    line-height: 1.3;
    margin-bottom: 0.7rem;
  }
  .cmp tbody td:first-child a { text-decoration: none; }
  .cmp tbody td:not(:first-child) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.42rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clay-deep);
    text-align: right;
  }
  .cmp tbody td:not(:first-child)::before {
    content: attr(data-label);
    color: var(--ink-faint);
    font-weight: 500;
    text-align: left;
  }
  .cmp tbody td:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .btn-row, .nav-toggle { display: none; }
  body { background: #fff; }
}