/* OWNERSHIP: Shared Alexandra public layout. CRITICAL PATH: every generated
   page uses these type, spacing, container, and navigation rules. DO NOT
   restore sticky header positioning or fixed-width mobile grid tracks.
   OWNERSHIP: English is the default root locale; Korean and Spanish use the
   same component geometry under /ko/ and /es/. Hangul must wrap by phrase
   without horizontal overflow. The language control is navigation, not decoration.
   Form-storage notices must remain visible and legible on narrow screens.
   Translated review disclosures must remain visible beneath the quotations.
   VALIDATION: render all routes at 320, 390, 768, 820, 1024, and 1440px;
   keep the footer tagline directly below the full lockup's name at narrow widths.
   Four service-price cards form two balanced columns above mobile width;
   never squeeze them into a three-plus-one orphan row.
   Practice Quest is an optional English response warm-up before the single
   timed exercise; DO NOT use color alone for answer feedback or override
   semantic hidden state. */

:root {
  /* ---- Color tokens ---- */
  --color-ink:        #14213a;   /* primary text — deep navy, not pure black */
  --color-ink-soft:    #45526b;  /* secondary text */
  --color-bg:          #fbfaf7;  /* warm off-white background */
  --color-surface:     #ffffff;  /* card/section surface */
  --color-surface-alt: #f2f0e9;  /* alternating section background */
  --color-border:      #e3e0d6;

  --color-primary:      #0f4c5c; /* deep teal — trust, competence */
  --color-primary-dark: #0a3540;
  --color-accent:        #d97a3f; /* warm terracotta — single CTA accent */
  --color-accent-dark:   #b8622f;

  --color-success: #2f6f4f;

  /* ---- Fibonacci anchors: 13 / 21 / 34 / 55px ---- */
  --font-size-sm:   0.8125rem;
  --font-size-base: 1.0625rem;
  --font-size-md:   1.3125rem;
  --font-size-lg:   1.3125rem;
  --font-size-xl:   clamp(1.625rem, 1.35rem + 1.35vw, 2.125rem);
  /* Interior H1s are page identifiers, not oversized editorial displays. */
  --font-size-2xl:  clamp(2.125rem, 1.75rem + 1.3vw, 2.75rem);

  --line-height-tight: 1.15;
  --line-height-body:  1.6;

  --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;

  /* ---- Fibonacci spacing: 8 / 13 / 21 / 34 / 55 / 89px ---- */
  --space-xs:  0.5rem;
  --space-sm:  0.8125rem;
  --space-md:  1.3125rem;
  --space-lg:  clamp(2.125rem, 1.8rem + 1.4vw, 3.4375rem);
  --space-xl:  clamp(3.4375rem, 2.7rem + 3vw, 5.5625rem);

  --radius-sm: 6px;
  --radius-md: 12px;
  --content-width: 1200px;
  --page-gutter: clamp(1.3125rem, 1rem + 1.5vw, 2.125rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* CRITICAL PATH: component display rules must never override semantic step
   state. Without this rule, grid/flex forms carrying the hidden attribute are
   still rendered and collapse the scheduler's ordered progression. */
[hidden] { display: none !important; }

/* OWNERSHIP: Hide explanatory text visually without removing it from the
   accessibility tree; used for the score table caption. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-sm);
  font-weight: 700;
  overflow-wrap: break-word;
  text-wrap: balance;
}
h1 { font-size: var(--font-size-2xl); max-width: 28ch; }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }

p { margin: 0 0 var(--space-sm); color: var(--color-ink-soft); }
p, li { overflow-wrap: break-word; }
a { color: var(--color-primary); }
strong { color: var(--color-ink); }

.container {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section { padding-block: var(--space-xl); }
.section--alt { background: var(--color-surface-alt); }
.section > .container > :is(h1, h2, h3, p, ul, ol) { max-width: 70ch; }
.lede { font-size: var(--font-size-md); max-width: 55ch; }

/* ---- Nav ---- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: relative;
  z-index: 2;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-md);
  gap: var(--space-md);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  color: var(--color-primary-dark);
  text-decoration: none;
  white-space: nowrap;
}
/* OWNERSHIP: Preserve option 04's whole lockup as one proportionate image;
   the 320px header must still leave room for its accessible Menu control. */
.brand img { display: block; flex: none; width: 16.5rem; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(0.5rem, 0.45rem + 0.5vw, 1.3125rem); }
.nav a {
  color: var(--color-ink-soft);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
}
.nav a:hover { color: var(--color-primary); }
.language-switcher {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  white-space: nowrap;
}
.language-switcher a { color: var(--color-ink-soft); font-weight: 600; text-decoration: none; }
.language-switcher a:hover { color: var(--color-primary); }
.language-switcher a[aria-current="page"] { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 0.2em; }
.language-switcher--mobile { display: none; }
.linkedin-link { display: inline-flex; align-items: center; gap: 0.4em; }
.linkedin-link__icon { width: 1em; height: 1em; flex: 0 0 auto; }
/* OWNERSHIP: WhatsApp icons identify only exact verified wa.me actions. Keep
   visible link text and align the decorative mark without changing booking
   semantics or presenting a stored request as a confirmed appointment. */
.whatsapp-link { display: inline-flex; align-items: center; gap: 0.4em; }
.whatsapp-link__icon { width: 1em; height: 1em; flex: 0 0 auto; }
.btn .whatsapp-link__icon { filter: brightness(0) invert(1); }
.mobile-menu { display: none; }
:is(.brand, .nav a, .language-switcher a, .mobile-menu summary, .mobile-menu a, .btn):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

/* ---- Hero and meaningful role-play category labels ---- */
.hero { padding-block: var(--space-xl) var(--space-lg); text-align: left; }
/* OWNERSHIP: Profession labels distinguish Nursing from Medicine practice
   cards; generic labels duplicating a nearby page heading are not needed. */
.roleplay-category {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-xs);
}
.hero h1 { max-width: 20ch; }
.hero p.lede {
  font-size: var(--font-size-md);
  max-width: 55ch;
  color: var(--color-ink-soft);
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

/* OWNERSHIP: The homepage presents a named professional and a concrete
   service. A two-column identity/portrait composition prevents the offer
   from reading like an anonymous article; the mobile stack keeps the offer
   and free-call action ahead of the portrait without clipping either. */
.hero--home {
  color: #fff;
  background: linear-gradient(125deg, #082b35 0%, #0f4c5c 100%);
  padding-block: clamp(3.4375rem, 2.8rem + 3vw, 5.5625rem);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(2.125rem, 3vw, 5.5625rem);
  align-items: center;
}
.hero--home h1 { color: #fff; max-width: 18ch; font-size: clamp(2.125rem, 1.65rem + 2vw, 3rem); }
.hero--home p.lede { color: #e0edf0; max-width: 48ch; }
.hero--home .btn-secondary { border-color: #c1d9de; color: #fff; }
.hero--home .btn-secondary:hover { background: #fff; color: var(--color-primary-dark); }
.hero-call-note { color: #c1d9de; font-size: var(--font-size-sm); margin: var(--space-sm) 0 0; }
.hero-portrait { margin: 0 auto; position: relative; width: min(100%, 370px); }
.hero-portrait__frame {
  position: relative;
  /* OWNERSHIP: The original 720×1046 portrait is displayed at full height.
     A 620×1046 window removes only 100px of empty left background, leaving
     the body pixels untouched and the side margins approximately equal. */
  aspect-ratio: 620 / 1046;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #f2f0e9;
}
.hero-portrait img {
  position: absolute;
  top: 0;
  left: -16.129%;
  display: block;
  width: 116.129%;
  height: 100%;
}
.hero-portrait figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  align-items: baseline;
  padding-top: var(--space-sm);
  color: #dce9eb;
  font-size: var(--font-size-sm);
}
.hero-portrait figcaption strong { color: #fff; font-size: var(--font-size-base); }
/* The linked, attributed quote carries trust evidence; it is not a decorative
   badge or a claim that Alexandra belongs to a larger organization. */
.proof-strip { background: #eef3f2; border-bottom: 1px solid var(--color-border); padding-block: var(--space-md); }
.proof-strip__inner { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.proof-strip__label { color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding-top: 0.4em; }
.proof-strip blockquote { margin: 0; }
.proof-strip blockquote p { color: var(--color-primary-dark); font-size: var(--font-size-md); line-height: 1.4; margin-bottom: var(--space-xs); }
.proof-strip blockquote footer { color: var(--color-ink-soft); font-size: var(--font-size-sm); }
.proof-strip blockquote a { margin-left: var(--space-xs); font-weight: 600; }
.offer-section__intro { max-width: 68ch; font-size: var(--font-size-md); }
.offer-grid { margin-top: var(--space-lg); }
.offer-grid .card { border-top: 3px solid var(--color-primary); }
/* DISCOVERY: a restrained second level of practice links belongs in the
   homepage content, not the primary header or another bulky card grid. */
.practice-feature-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); max-width: 1100px; margin: var(--space-lg) auto 0; text-align: left; }
.practice-feature-links a { display: block; min-width: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-sm); color: var(--color-primary); font-weight: 600; text-decoration: none; }
.practice-feature-links a:hover { text-decoration: underline; }
@media (max-width: 780px) { .practice-feature-links { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); } }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero--home h1 { max-width: 18ch; }
  .hero-portrait { max-width: 370px; }
  .proof-strip__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}
@media (max-width: 480px) {
  .hero--home .cta-row .btn { width: 100%; text-align: center; }
  .hero-portrait { max-width: 100%; }
  .hero-portrait figcaption { align-items: start; flex-direction: column; gap: 0; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-family: var(--font-body);
  line-height: 1.4;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-secondary { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary); color: #fff; }

/* ---- Pillars / cards ---- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-md);
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.card a.card-link { color: var(--color-primary); font-weight: 600; text-decoration: none; font-size: var(--font-size-sm); }

/* ---- Testimonials ---- */
.translation-note { display: block; margin-top: var(--space-xs); color: var(--color-ink-soft); font-size: var(--font-size-sm); }
.grid-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-md);
  align-items: start;
}
.testimonial-card p { margin-bottom: var(--space-sm); }
.testimonial-card p:last-of-type { margin-bottom: var(--space-sm); }

/* ---- Method steps ---- */
.steps { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.step-number {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-xs);
}

/* ---- Pricing ---- */
.pricing-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
/* OWNERSHIP: One free app offer and three private offers are one four-choice
   comparison. Two columns prevent a stranded fourth card on wide screens. */
.pricing-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .pricing-grid--four { grid-template-columns: minmax(0, 1fr); } }
.price-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
.price-card--highlight { border-color: var(--color-accent); box-shadow: 0 4px 24px rgba(217,122,63,0.12); }
.price-amount { font-family: var(--font-heading); font-size: var(--font-size-lg); color: var(--color-primary-dark); }
.price-card ul { padding-left: 1.1em; color: var(--color-ink-soft); font-size: var(--font-size-sm); }
.price-card li { margin-bottom: 0.4em; }
/* ORDERING: variable feature-copy length must not move package actions within
   their pricing row; each card's two choices stay grouped and full width. */
.price-card__action { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; min-height: 56px; padding-block: 0; margin-top: auto; text-align: center; }
.price-card__actions { display: grid; gap: var(--space-sm); margin-top: auto; }
.price-card__actions .price-card__action { height: auto; min-height: 56px; margin-top: 0; padding: 0.65em 1em; }
.price-card__payment-note { margin: var(--space-sm) 0 0; color: var(--color-ink-soft); font-size: var(--font-size-sm); }
.intro-call { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); margin-top: var(--space-lg); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.intro-call h2 { font-size: var(--font-size-lg); }
.intro-call p { margin-bottom: 0; }
.intro-call .btn { flex: none; text-align: center; }
@media (max-width: 720px) { .intro-call { flex-direction: column; align-items: stretch; } }

/* OWNERSHIP: Center the English communication introduction and service details
   as one polished page while keeping offer actions easy to scan on small screens. */
.english-communication-page { max-width: 1120px; }
.communication-hero { max-width: 780px; margin: 0 auto var(--space-xl); padding: clamp(2rem, 5vw, 4.25rem) var(--space-md); text-align: center; background: linear-gradient(145deg, #f2f0e9 0%, #f7f8f5 100%); border: 1px solid var(--color-border); border-radius: 20px; }
.communication-eyebrow { margin-bottom: var(--space-sm); color: var(--color-accent-dark); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.communication-hero h1 { max-width: 18ch; margin-inline: auto; }
.communication-hero__description { max-width: 62ch; margin: 0 auto; color: var(--color-ink-soft); font-size: clamp(1.15rem, 1rem + .55vw, 1.4rem); line-height: 1.65; }
.communication-focus { margin-bottom: var(--space-xl); text-align: center; }
.communication-focus h2 { margin-bottom: var(--space-md); }
.communication-help-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: 900px; margin: 0 auto; padding: 0; list-style: none; text-align: center; }
.communication-help-list li { display: flex; flex-direction: column; justify-content: center; min-height: 150px; padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(10, 53, 64, .045); }
.communication-help-list strong { margin-bottom: var(--space-xs); color: var(--color-primary-dark); font-family: var(--font-heading); font-size: var(--font-size-md); }
.communication-help-list span { max-width: 48ch; margin-inline: auto; color: var(--color-ink-soft); }
.communication-cta { max-width: 900px; margin: 0 auto var(--space-xl); padding: var(--space-md) var(--space-lg); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-align: center; }
.communication-cta p { margin: 0 auto; max-width: 70ch; }
.communication-cta a { color: var(--color-primary-dark); font-weight: 700; text-underline-offset: .18em; }
.communication-pricing { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; }
.communication-pricing .price-card { align-items: center; text-align: center; }
.communication-pricing .price-card h2 { max-width: 22ch; }
.communication-pricing .price-card__action { max-width: 26rem; }
.communication-pricing .english-package__billing { margin-bottom: var(--space-xs); font-size: var(--font-size-sm); }
.communication-pricing .english-package__tagline { color: var(--color-primary-dark); font-weight: 700; }
.communication-pricing .english-package__features { display: grid; gap: 0; width: 100%; margin: 0 0 var(--space-md); padding: 0; list-style: none; font-size: var(--font-size-sm); text-align: center; }
.communication-pricing .english-package__features li { margin: 0; padding: .55rem .25rem; color: var(--color-ink-soft); }
.communication-pricing .english-package__features li + li { border-top: 1px solid var(--color-border); }
.communication-pricing .english-package__features li::before { content: "•"; margin-right: .5rem; color: var(--color-accent-dark); font-weight: 700; }
@media (max-width: 640px) {
  .communication-hero { margin-bottom: var(--space-lg); padding-inline: var(--space-sm); }
  .communication-help-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .communication-help-list li { min-height: 0; padding: var(--space-md) var(--space-sm); }
  .communication-cta { margin-bottom: var(--space-lg); padding: var(--space-md); }
}

/* ---- FAQ direct-answer layout ---- */
.faq-item { border-bottom: 1px solid var(--color-border); padding-block: var(--space-sm); }
.faq-item h2 { font-size: var(--font-size-md); margin-bottom: var(--space-xs); }
.resource-card-title, .event-card-title { font-size: var(--font-size-md); }
.resource-card-title a { color: var(--color-primary-dark); text-decoration: none; }
.resource-card-title a:hover { text-decoration: underline; }

/* OWNERSHIP: D1-published event listing and detail pages use the established
   site grid, typography and form controls at every viewport. */
.event-empty { max-width: 60ch; }
.event-empty p { margin-bottom: 0; }
#event-list section + section { margin-top: var(--space-lg); }
.event-card { display: flex; flex-direction: column; min-width: 0; }
.event-card-title a { color: var(--color-primary-dark); text-decoration: none; }
.event-card-title a:hover, .event-card-title a:focus-visible { text-decoration: underline; }
.event-card-meta { color: var(--color-accent-dark); font-size: var(--font-size-sm); font-weight: 600; }
.event-card-link { margin-top: auto; padding-top: var(--space-sm); font-weight: 700; }
.event-detail { max-width: 960px; }
.event-detail h1 { max-width: 18ch; }
.event-card-image, .event-hero { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--color-surface); border-radius: var(--radius-md); }
.event-card-image { margin-bottom: var(--space-sm); }
.event-hero { max-height: 34rem; margin-block: var(--space-md); }
.event-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-lg) 0; }
.event-facts > div { padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.event-facts dt { color: var(--color-ink-soft); font-size: var(--font-size-sm); }
.event-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.event-description { max-width: 70ch; }
.event-enquiry { max-width: 960px; }
.event-enquiry .signup-form { max-width: 750px; }
.event-ended { font-weight: 700; }
@media (max-width: 600px) { .event-facts { grid-template-columns: minmax(0, 1fr); } }

/* ---- Grade table ---- */
table.grade-table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin-block: var(--space-md); font-size: var(--font-size-sm); }
table.grade-table th, table.grade-table td { text-align: left; padding: 0.6em 0.8em; border-bottom: 1px solid var(--color-border); }
table.grade-table th { color: var(--color-primary-dark); font-family: var(--font-heading); }

/* ---- Placeholder callouts (never shown as if real) ---- */
.placeholder-note {
  background: #fdf3e6;
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-accent-dark);
  margin-block: var(--space-md);
}

/* ---- About: professional identity, method, and attributed proof ---- */
/* OWNERSHIP: The About route explains Alexandra's client-facing practice.
   Keep the supplied OET Knowledge Teacher Training badge compact beside the
   portrait; do not turn the page into a credential gallery. */
.about-hero { background: #edf3f2; }
.about-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  gap: var(--space-xl);
  align-items: center;
}
.about-hero__copy h1 { margin-bottom: var(--space-md); }
.about-hero__copy p { max-width: 55ch; }
.about-hero__copy p:not(.lede) { font-size: var(--font-size-md); }
.about-hero__copy .btn { margin-top: var(--space-sm); }
.about-portrait { margin: 0 auto; width: min(100%, 320px); }
.about-portrait__frame {
  position: relative;
  /* OWNERSHIP: Share the full-height, left-background-only crop used on
     Home, so About does not present a different portrait composition. */
  aspect-ratio: 620 / 1046;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 24px rgba(20,33,58,0.12);
}
.about-portrait img {
  position: absolute;
  top: 0;
  left: -16.129%;
  display: block;
  width: 116.129%;
  height: 100%;
}
.about-portrait figcaption { color: var(--color-ink-soft); font-size: var(--font-size-sm); margin-top: var(--space-xs); }
.about-training { display: flex; align-items: center; gap: var(--space-sm); width: min(100%, 320px); margin: var(--space-md) auto 0; padding: var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 4px 18px rgba(20,33,58,.07); }
.about-training img { position: static; display: block; flex: 0 0 112px; width: 112px; height: 112px; border-radius: var(--radius-sm); background: #000; object-fit: contain; }
.about-training p { margin: 0; font-size: var(--font-size-sm); line-height: 1.45; }
.about-training strong { color: var(--color-primary-dark); font-size: var(--font-size-base); }
.about-section-intro { max-width: 65ch; font-size: var(--font-size-md); }
.about-approach { margin-top: var(--space-lg); }
.about-approach .card { border-top: 3px solid var(--color-primary); }
.about-proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: var(--space-xl); align-items: start; }
.about-proof-grid > div > p { max-width: 58ch; }
.about-recommendation { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); }
.about-recommendation blockquote { margin: 0 0 var(--space-sm); }
.about-recommendation blockquote p { color: var(--color-primary-dark); font-size: var(--font-size-md); line-height: 1.4; }
.about-recommendation blockquote footer { color: var(--color-ink-soft); font-size: var(--font-size-sm); }
.about-recommendation a { font-size: var(--font-size-sm); font-weight: 600; }
.about-close p { max-width: 64ch; }
.about-close .btn { margin-top: var(--space-sm); }
@media (max-width: 800px) {
  .about-hero__grid, .about-proof-grid { grid-template-columns: minmax(0, 1fr); }
  .about-portrait { max-width: 320px; }
}

/* ---- Lead forms ---- */
/* OWNERSHIP: workshop email consent is a separate, visible checkbox, not a
   full-width text field or a preselected hidden choice. VALIDATION: mobile
   and desktop event forms in all three locales. */
.signup-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  max-width: 750px;
  margin-top: var(--space-md);
}
.form-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.signup-form label, .contact-form label { font-size: var(--font-size-sm); font-weight: 600; }
.signup-form input {
  width: 100%;
  min-width: 0;
  padding: 0.8em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: var(--font-body);
}
.signup-form .workshop-opt-in { grid-column: 1 / -1; }
.signup-form .workshop-opt-in label { display: flex; align-items: flex-start; gap: 0.65rem; font-weight: 500; }
.signup-form .workshop-opt-in input { width: 1.2rem; min-width: 1.2rem; height: 1.2rem; padding: 0; margin: 0.15rem 0 0; accent-color: var(--color-primary); }
.signup-form .cf-turnstile { grid-column: 1 / -1; }
.signup-form button { justify-self: start; }
.signup-status { font-size: var(--font-size-sm); margin-top: var(--space-xs); }
/* OWNERSHIP: State what the protected form actually stores while the
   direct-email path and a full owner-approved privacy policy are separate. */
.form-data-note { max-width: 65ch; font-size: var(--font-size-sm); }
@media (max-width: 600px) { .signup-form { grid-template-columns: minmax(0, 1fr); } }

/* ---- Contact form ---- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.contact-intro h1 { font-size: var(--font-size-xl); max-width: 18ch; }
.contact-intro .lede { font-size: var(--font-size-base); max-width: 48ch; }
.contact-direct { display: flex; flex-direction: column; gap: 0.2rem; padding-block: var(--space-sm); border-top: 1px solid var(--color-border); }
.contact-direct:first-of-type { margin-top: var(--space-lg); }
.contact-direct a { overflow-wrap: anywhere; }
.contact-card { padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.contact-card h2 { font-size: var(--font-size-lg); }
.contact-card > p { font-size: var(--font-size-sm); }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  max-width: 520px;
}
.contact-form input,
.contact-form textarea {
  padding: 0.8em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: var(--font-body);
  width: 100%;
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form button { align-self: flex-start; }
@media (max-width: 800px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .contact-card { padding: var(--space-md); } }

/* OWNERSHIP: Native scheduler presentation. The layout distinguishes date,
   time, identity, inbox-proof and durable-receipt states without implying that
   a displayed or emailed slot is held. VALIDATION: 320-1440px EN/KO/ES flows. */
.booking-native { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: var(--space-xl); align-items: start; }
.schedule-card { padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 18px 45px rgba(11,54,64,.07); }
.schedule-card h2 { font-size: var(--font-size-lg); }
.schedule-zone { color: var(--color-ink-soft); font-size: var(--font-size-sm); }
.schedule-toolbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0; text-align: center; }
.schedule-toolbar .btn { min-width: 44px; padding: .55rem .85rem; }
.schedule-dates, .schedule-times { display: grid; gap: var(--space-xs); }
.schedule-dates { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.schedule-times { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-md); }
.schedule-date, .schedule-time, .text-button { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: white; color: var(--color-primary); padding: .75rem .5rem; font: inherit; cursor: pointer; }
.schedule-date:hover, .schedule-date:focus-visible, .schedule-time:hover, .schedule-time:focus-visible, .schedule-date.is-selected, .schedule-time.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(11,54,64,.12); }
.schedule-time-next { grid-column: 1 / -1; justify-self: end; margin-top: var(--space-xs); }
.schedule-selection { margin: 0; padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-bg); font-weight: 700; }
.schedule-verification { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.schedule-verification > p:first-child { margin-top: 0; }
.schedule-secondary-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: center; }
.schedule-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.schedule-actions .btn { margin-top: 0; }
.text-button { width: max-content; background: transparent; text-decoration: underline; }
.schedule-receipt { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-bg); }
.schedule-receipt h2 { margin-top: 0; }
@media (max-width: 900px) { .booking-native { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .schedule-card { padding: var(--space-md); } .schedule-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); } .schedule-times { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* OWNERSHIP: Receipt pages are the final visitor handoff, separate from the
   forms. Keep the message and next action together at every viewport. */
.receipt-page { min-height: min(64vh, 560px); display: flex; align-items: center; }
.receipt-panel { width: min(100%, 720px); margin-inline: auto; padding: var(--space-xl); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 12px 38px rgba(10, 53, 64, 0.07); }
.receipt-panel h1 { margin-bottom: var(--space-md); }
.receipt-panel p { max-width: 55ch; }
.receipt-panel .lede { font-size: var(--font-size-md); }
.receipt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }
.receipt-actions__secondary { color: var(--color-primary-dark); font-weight: 600; }
@media (max-width: 600px) { .receipt-page { min-height: 0; } .receipt-panel { padding: var(--space-lg); } .receipt-actions { align-items: stretch; flex-direction: column; } .receipt-actions .btn { text-align: center; } }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-lg);
  background: var(--color-surface-alt);
  color: var(--color-ink-soft);
  font-size: var(--font-size-sm);
}
.site-footer a { color: var(--color-primary-dark); }
.footer-cols { display: grid; grid-template-columns: minmax(250px, 2fr) repeat(3, minmax(130px, 1fr)); gap: var(--space-lg); }
.footer-brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-primary-dark); font-size: var(--font-size-base); text-decoration: none; }
.footer-brand img { display: block; width: 14.5rem; height: auto; }
/* OWNERSHIP: The shared 370-unit logo starts its name at x=82 but reserves
   image height below the wordmark for the badge. At 14.5rem display width,
   3.2rem aligns the tagline with the name and -1.5rem closes that otherwise
   visible gap. Keep it in normal flow so longer translations can wrap without
   covering the following footer links; leave the approved SVG unchanged. */
.footer-tagline { margin: -1.5rem 0 var(--space-sm) 3.2rem; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.footer-links strong { color: var(--color-primary-dark); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
/* OWNERSHIP: Keep messaging and identity links compact in the narrow footer
   column. Descriptive accessible names carry the full provider identity;
   visible labels must not split into awkward multi-line fragments. */
.footer-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.25rem; }
.footer-social-link { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.footer-bottom { border-top: 1px solid var(--color-border); margin-top: var(--space-lg); padding-top: var(--space-sm); }
@media (max-width: 980px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-cols > :first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-cols { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 800px) {
  .nav--desktop { display: none; }
  .language-switcher--desktop { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: 0.5rem 0.8125rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary::after { content: "+"; font-size: var(--font-size-md); line-height: 1; }
  .mobile-menu[open] summary::after { content: "−"; }
  .mobile-menu__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3125rem;
    padding: var(--space-sm) var(--page-gutter) var(--space-md);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 13px 21px rgba(20,33,58,0.1);
  }
  .mobile-menu__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
  }
  .mobile-menu__links a:hover { background: var(--color-surface-alt); }
  .language-switcher--mobile {
    display: flex;
    grid-column: 1 / -1;
    gap: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--color-border);
  }
  .mobile-menu__links .language-switcher--mobile a {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: 0.25rem;
  }
}
@media (max-width: 480px) {
  .mobile-menu__links { grid-template-columns: minmax(0, 1fr); }
  .site-header__inner { gap: var(--space-xs); }
  /* OWNERSHIP: the full provider name stays visible in the approved lockup;
     shrink proportionately so Menu remains usable at 320px. */
  .brand img { width: clamp(11rem, 60vw, 13rem); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* OWNERSHIP: the practice studio is progressive enhancement over visible,
   printable role-play cards. Keep speaking controls and prompts usable at
   phone width; neither recording nor JavaScript is required for the cards. */
.practice-studio { padding-block: var(--space-xl); }
.practice-studio > p { max-width: 72ch; }
/* OWNERSHIP: friendly progress and answer tiles are teaching interaction,
   not an OET score. Shapes, text and selected outlines remain legible without
   color or animation; the timed card below is still the authoritative task. */
.practice-mode { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: var(--space-md) 0; }
.practice-mode > span { flex-basis: 100%; font-weight: 700; }
.practice-mode button { border: 1px solid var(--color-border); border-radius: 999px; padding: .5rem .9rem; background: var(--color-surface); color: var(--color-primary); font: inherit; cursor: pointer; }
.practice-mode button[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary); color: white; }
.practice-mode button:focus-visible, .practice-quest__finish button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.practice-quest { margin-bottom: var(--space-md); padding: var(--space-md); border: 1px solid #e8d1a9; border-radius: 20px; background: linear-gradient(135deg, #fff8ea, #fffdf8); }
.practice-quest__intro { display: flex; align-items: center; gap: var(--space-md); }
.practice-quest__intro h3 { margin: 0 0 .2rem; font-size: var(--font-size-md); }
.practice-quest__intro p { margin: 0; max-width: 72ch; font-size: var(--font-size-sm); }
.practice-quest__friend { flex: 0 0 4.5rem; width: 4.5rem; fill: #f8cf71; stroke: #864c23; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-7deg); }
.practice-quest__path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.practice-quest__path li { display: flex; align-items: center; gap: .45rem; min-width: 0; border: 1px dashed #d6cbb8; border-radius: 14px; padding: .65rem .8rem; background: white; font-weight: 700; font-size: var(--font-size-sm); }
.practice-quest__path li span { display: inline-grid; flex: 0 0 1.7rem; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 50%; background: var(--color-surface-alt); color: var(--color-ink-soft); }
.practice-quest__path li.is-active { border-style: solid; border-color: var(--color-accent); }
.practice-quest__path li.is-complete { border-style: solid; border-color: var(--color-success); }
.practice-quest__path li.is-complete span { background: #dff1e4; color: #195d3c; }
.practice-quest__path li.is-complete span::after { content: '✓'; margin-left: .1rem; }
.practice-quest__progress { margin: .7rem 0 0; font-weight: 700; color: var(--color-primary); }
.practice-quest__game { margin-top: var(--space-md); overflow: hidden; border-radius: 20px; background: #0e4154; color: white; box-shadow: 0 13px 30px rgba(8, 54, 70, .15); }
.practice-quest__round-head { padding: var(--space-md) var(--space-md) 0; }
.practice-quest__round-head p { display: inline-block; margin: 0 0 .45rem; padding: .25rem .7rem; border-radius: 999px; background: #f9d46d; color: #3a2a10; font-weight: 800; font-size: var(--font-size-sm); }
.practice-quest__round-head h4 { margin: 0; color: white; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.practice-quest__game blockquote { margin: var(--space-md); padding: 1rem 1.2rem; border: 2px solid rgba(255,255,255,.35); border-radius: 16px; background: #fff; color: var(--color-primary-dark); font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 700; line-height: 1.35; }
.practice-quest__instruction { margin: 0 var(--space-md) var(--space-md); color: #f2f8fb; font-weight: 600; }
.practice-quest__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 0 var(--space-md) var(--space-md); }
.practice-quest__choice { display: flex; align-items: center; gap: .7rem; min-width: 0; min-height: 6.5rem; padding: .9rem 1rem; border: 3px solid transparent; border-radius: 15px; color: white; font: inherit; font-size: 1rem; font-weight: 750; line-height: 1.35; text-align: left; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.practice-quest__choice:nth-child(4n + 1) { background: #bc3051; }
.practice-quest__choice:nth-child(4n + 2) { background: #19549f; }
.practice-quest__choice:nth-child(4n + 3) { background: #a84c13; }
.practice-quest__choice:nth-child(4n + 4) { background: #17634c; }
.practice-quest__choice span { display: grid; flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; place-items: center; border: 2px solid currentColor; border-radius: .5rem; font-size: 1.3rem; }
.practice-quest__choice:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.practice-quest__choice:focus-visible { outline: 4px solid #f9d46d; outline-offset: 2px; }
.practice-quest__choice:disabled { cursor: default; opacity: .58; }
.practice-quest__choice.is-preferred, .practice-quest__choice.is-picked { opacity: 1; border-color: #fff; box-shadow: inset 0 0 0 2px #0e4154; }
.practice-quest__choice.is-preferred::after { content: '✓'; margin-left: auto; font-size: 1.5rem; }
.practice-quest__feedback { margin: 0 var(--space-md) var(--space-md); padding: .8rem 1rem; border-radius: 12px; background: #f9d46d; color: #302715; font-weight: 700; }
.practice-quest__game-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: 0 var(--space-md) var(--space-md); }
.practice-quest__game-actions .btn { margin: 0; background: #f9d46d; border-color: #f9d46d; color: #302715; }
.practice-quest__game-actions .text-button { color: white; }
.practice-quest__game-actions .text-button:hover { color: #f9d46d; }
.practice-quest__finish { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.practice-quest__finish p { margin: var(--space-sm) 0 0; color: var(--color-success); font-weight: 700; }
.practice-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-md); align-items: start; }
.practice-workspace, .practice-partner, .practice-review { min-width: 0; }
.practice-workspace label { display: block; font-weight: 700; margin-bottom: var(--space-xs); }
.practice-workspace select { display: block; width: 100%; max-width: 100%; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font: inherit; }
.practice-clock { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-block: var(--space-md); padding: .7rem 1rem; border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.practice-clock strong { font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 5vw, 2.3rem); color: var(--color-primary); }
.practice-step { margin-block: var(--space-sm); font-weight: 600; color: var(--color-primary); }
.practice-question-count { margin-bottom: 0; font-size: var(--font-size-sm); font-weight: 700; color: var(--color-ink-soft); }
.practice-partner-clock { display: none; float: right; font-variant-numeric: tabular-nums; font-size: var(--font-size-md); }
.practice-workspace h3 { margin-block: var(--space-sm); }
.practice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: var(--space-md); }
.practice-actions .btn, .practice-partner .btn { margin: 0; }
.practice-actions .text-button { padding: .7rem; }
.practice-partner blockquote { min-height: 6rem; margin: var(--space-md) 0; padding: var(--space-md); border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-surface-alt); font-size: var(--font-size-md); }
.practice-record { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.practice-review audio { display: block; max-width: 100%; margin-block: var(--space-sm); }
.practice-review audio[hidden] { display: none; }
.practice-record p { font-size: var(--font-size-sm); color: var(--color-ink-soft); }
.practice-review { margin-top: var(--space-md); }
.practice-review[hidden] { display: none; }
.practice-review label { display: block; font-weight: 700; }
.practice-review textarea { display: block; width: 100%; box-sizing: border-box; margin-top: var(--space-xs); padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }
.practice-prompt-list { margin-top: var(--space-md); }
.practice-prompt-list summary { cursor: pointer; font-weight: 700; }
.practice-prompt-list li { margin-top: .5rem; }
@media (max-width: 780px) {
  .practice-layout { grid-template-columns: minmax(0, 1fr); }
  .practice-partner-clock:not(:empty) { display: inline; }
  .practice-quest__path { grid-template-columns: 1fr; }
  .practice-quest__choices { grid-template-columns: 1fr; }
  .practice-quest__choice { min-height: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-quest__choice { transition: none; }
  .practice-quest__choice:not(:disabled):hover { transform: none; }
}