/* Shared UI system. All page generators compose these same components.
   Keystone-inspired proportions; Yanmai brand, content and existing photography. */
:root {
  --ks-ink: #112033;
  --ks-ink-deep: #081320;
  --ks-navy: #213d64;
  --ks-gold: #c5a483;
  --ks-gold-text: #a07c58;
  --ks-cream: #f8f7f4;
  --ks-white: #fff;
  --ks-grey: #6b6b6b;
  --ks-line: rgb(33 61 100 / .14);
  --ks-line-dark: rgb(255 255 255 / .2);
  --ks-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif;
  --ks-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ks-gutter: clamp(20px, 4vw, 64px);
  --ks-section-y: clamp(64px, 6.5vw, 104px);
  --ks-ease: cubic-bezier(.135,.9,.15,1);
  --ks-copy: #50575f;
}
.ks-site { background: var(--ks-cream); color: var(--ks-ink); font: 16px/1.8 var(--ks-sans); -webkit-font-smoothing: antialiased; }
.ks-site * { box-sizing: border-box; }
.ks-site :focus-visible { outline: 2px solid var(--ks-gold-text); outline-offset: 4px; }
.ks-site a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ks-site img { max-width: 100%; }
.ks-site main#main-content { max-width: none; width: 100%; padding: 0; margin: 0; }
.ks-container { width: 100%; max-width: 1536px; margin-inline: auto; padding-inline: var(--ks-gutter); }
.ks-site .ks-container > .max-w-7xl { max-width: none; }
.ks-site h1, .ks-site h2, .ks-site h3, .ks-site h4 { color: inherit; }
.ks-site h1, .ks-site h2 { font-family: var(--ks-serif); font-weight: 400; letter-spacing: 0; text-wrap: balance; }
.ks-site h1 { font-size: clamp(36px, 1.35rem + 3.4vw, 75px); line-height: 1.2; }
.ks-site h2 { font-size: clamp(32px, 1.3rem + 2.6vw, 61px); line-height: 1.2; }
.ks-site h3 { font-size: clamp(20px, 1vw + 12px, 26px); line-height: 1.4; font-weight: 500; }
.ks-site h4 { font-size: 18px; line-height: 1.5; font-weight: 500; }
.ks-site :is(h1,h2):lang(en) { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.035em; line-height: 1.08; }
.ks-site p { line-height: 1.8; }
.ks-muted { color: var(--ks-copy); }
.ks-site .ks-accent { color: var(--ks-gold-text); }
.ks-site .ks-surface-subtle { background-color: var(--ks-cream); color: var(--ks-ink); --ks-copy: #50575f; }
.ks-site .ks-surface-white { background-color: #fff; color: var(--ks-ink); --ks-copy: #50575f; }
.ks-site .ks-surface-ink { background-color: var(--ks-ink); color: #fff; --ks-copy: rgb(255 255 255 / .8); }
.ks-section { padding-block: var(--ks-section-y); scroll-margin-top: 110px; }
.ks-section--white { background: #fff; }
.ks-section--cream { background: var(--ks-cream); }
.ks-section--ink, .ks-hero, .ks-contact { background: var(--ks-ink); color: #fff; --ks-copy: rgb(255 255 255 / .8); }
.ks-site :is(.ks-section--ink,.ks-hero,.ks-contact) .ks-accent { color: var(--ks-gold); }
.ks-head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 40px; max-width: 1000px; }
.ks-head h2 { margin: 0; }
.ks-head--center { align-items: center; text-align: center; margin-inline: auto; }
.ks-eyebrow { display: inline-flex; align-items: center; gap: 8px; width: fit-content; border-radius: 999px; background: rgb(33 61 100 / .07); color: var(--ks-ink); padding: 5px 12px; font: 500 12px/1.4 var(--ks-sans); letter-spacing: .08em; }
.ks-eyebrow::before { content: ''; height: 3px; width: 3px; border-radius: 50%; background: currentColor; flex: none; }
.ks-site :is(.ks-hero,.ks-section--ink,.ks-contact) .ks-eyebrow { background: rgb(255 255 255 / .12); color: #fff; }
.ks-site h2 + p { margin-top: 18px; }
.ks-site p.ks-eyebrow { line-height: 1.4; margin-bottom: 18px; }
.ks-head > p.ks-eyebrow { margin-bottom: 0; }
.ks-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.ks-actions--center { justify-content: center; }
.ks-site .ks-btn { display: inline-flex; justify-content: center; align-items: center; gap: 14px; width: fit-content; min-height: 44px; padding: 11px 22px; border: 1px solid currentColor; border-radius: 999px; font: 500 13px/1.5 var(--ks-sans); letter-spacing: .025em; color: inherit; background: transparent; box-shadow: none; text-decoration: none; cursor: pointer; transition: background 1s var(--ks-ease),color 1s var(--ks-ease),border-color 1s var(--ks-ease); }
.ks-site .ks-btn:hover { background: var(--ks-ink); color: #fff; border-color: var(--ks-ink); transform: none; }
.ks-site .ks-btn > span[aria-hidden] { transition: transform 1s var(--ks-ease); }
.ks-site .ks-btn:hover > span[aria-hidden] { transform: translate(2px,-2px); }
.ks-site .ks-btn--solid { color: #fff; background: var(--ks-navy); border-color: var(--ks-navy); }
.ks-site :is(.ks-section--ink,.ks-hero,.ks-contact) .ks-btn:hover { background: #fff; color: var(--ks-ink); border-color: #fff; }
.ks-site :is(.ks-section--ink,.ks-hero,.ks-contact) .ks-btn--solid { background: #fff; color: var(--ks-ink); border-color: #fff; }
.ks-site .ks-card { border: 1px solid var(--ks-line); border-radius: 24px; box-shadow: none; background: #fff; color: var(--ks-ink); --ks-copy: #50575f; backdrop-filter: none; transition: border-color 1s var(--ks-ease); }
.ks-site .ks-card:hover { box-shadow: none; transform: none; border-color: rgb(33 61 100 / .35); }
.ks-site .ks-card :is(h2,h3) { font-family: var(--ks-sans); font-size: 22px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.ks-site .ks-card .ks-accent { color: var(--ks-ink); }
.ks-site .ks-card p { line-height: 1.8; }
.ks-site .ks-card .ks-eyebrow { background: var(--ks-cream); color: var(--ks-ink); }
.ks-site .ks-card .ks-btn:hover { background: var(--ks-ink); color: #fff; }
.ks-site .ks-card .ks-surface-subtle { background: var(--ks-cream); }
.ks-prose { max-width: 960px; margin-inline: auto; padding: clamp(24px,4vw,56px); border: 1px solid var(--ks-line); border-radius: 24px; background: #fff; color: var(--ks-ink); --ks-copy: #50575f; }
.ks-site .ks-prose > h2 { font-size: clamp(26px,2.2vw,36px); }
.ks-prose > h2:first-child { margin-top: 0; }
.ks-path-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.ks-path-card { display: flex; align-items: center; justify-content: space-between; padding: 24px; gap: 24px; font-size: 17px; }
.ks-site .glass-effect { backdrop-filter: none; box-shadow: none; }
.ks-site .ks-breadcrumb { color: rgb(255 255 255 / .7); font-size: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 32px; }
.ks-breadcrumb a:hover { color: #fff; }
.ks-hero { border-radius: 0 0 32px 32px; padding-block: clamp(46px,5vw,80px) clamp(56px,6vw,88px); }
.ks-hero-layout { display: grid; align-items: center; gap: 48px; }
.ks-hero--split .ks-hero-layout { grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,80px); }
.ks-hero-copy { max-width: 960px; }
.ks-hero--split .ks-hero-copy { max-width: 660px; }
.ks-site .ks-hero .ks-display { margin: 22px 0; }
.ks-hero .ks-lead { max-width: 760px; font-size: 17px; color: rgb(255 255 255 / .8); line-height: 1.85; }
.ks-hero .ks-lead p { color: inherit; font-size: inherit; line-height: inherit; margin: 0; max-width: none; }
.ks-hero .ks-lead p + p { margin-top: 12px; font-size: 13px; opacity: .8; }
.ks-hero .ks-actions:empty { display: none; }
.ks-hero-media { position: relative; height: clamp(420px,38vw,600px); margin: 0; border-radius: 24px; overflow: hidden; }
.ks-hero-media img { height: 100%; width: 100%; object-fit: cover; object-position: 42% center; }
.ks-hero-media::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent,rgb(8 19 32 / .7)); }
.ks-hero-media figcaption { position: absolute; bottom: 32px; left: 32px; right: 24px; z-index: 1; font-size: 14px; letter-spacing: .06em; }
.ks-facts { display: grid; grid-template-columns: .9fr 1.7fr 1fr; gap: clamp(24px,4vw,58px); border-top: 1px solid var(--ks-line-dark); margin-top: 42px; padding-top: 24px; }
.ks-facts dt { color: var(--ks-gold); font: 400 clamp(26px,2.5vw,38px)/1.2 Georgia,"Songti SC",serif; }
.ks-fact--tutors dt { font: 500 clamp(14px,1.2vw,18px)/1.6 var(--ks-sans); }
.ks-facts dd { margin-top: 7px; font-size: 12px; color: rgb(255 255 255 / .7); }
.ks-intro { max-width: 1100px; text-align: center; }
.ks-intro-text { max-width: 800px; margin: 0 auto; font-size: 18px; color: var(--ks-copy); }
.ks-people-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.ks-person { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #fff; color: var(--ks-ink); border: 1px solid var(--ks-line); --ks-copy: #50575f; }
.ks-person-photo { position: relative; overflow: hidden; }
.ks-person-photo img { width: 100%; height: clamp(260px,25vw,390px); object-fit: cover; object-position: center 24%; filter: grayscale(1); transition: filter 1s var(--ks-ease),transform 1s var(--ks-ease); }
.ks-person:hover img { filter: grayscale(0); transform: scale(1.02); }
.ks-person-tag { position: absolute; bottom: 18px; left: 18px; right: 18px; width: fit-content; max-width: calc(100% - 36px); border-radius: 999px; padding: 5px 12px; background: rgb(17 32 51 / .85); color: #fff; font-size: 12px; line-height: 1.5; }
.ks-person-copy { padding: 26px; }
.ks-person-copy h3 { margin: 0 0 12px; font-size: 22px; }
.ks-person-copy p, .ks-person-copy li { font-size: 14px; color: #50575f; }
.ks-person-copy ul { list-style: none; margin-top: 20px; border-top: 1px solid var(--ks-line); padding-top: 18px; }
.ks-person-copy li + li { margin-top: 6px; }
.ks-services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 60px 40px; margin-top: 56px; }
.ks-service { text-align: center; padding-inline: 18px; }
.ks-service img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin: 0 auto 24px; }
.ks-service h3 { margin-bottom: 14px; }
.ks-service p { color: #50575f; max-width: 360px; margin: 0 auto 24px; font-size: 15px; min-height: 54px; }
.ks-steps { max-width: 1000px; margin: 52px auto 0; list-style: none; }
.ks-steps li { display: grid; grid-template-columns: 90px 1fr; gap: 30px; border-top: 1px solid var(--ks-line); padding-block: 34px; }
.ks-step-number { font: 400 42px/1.3 Georgia,serif; color: var(--ks-gold-text); }
.ks-steps h3 { font-family: var(--ks-serif); font-size: clamp(26px,2.5vw,36px); font-weight: 400; margin-bottom: 12px; }
.ks-steps p { max-width: 650px; color: #50575f; }
.ks-fees { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ks-fee-card { background: #fff; border: 1px solid var(--ks-line); padding: clamp(28px,4vw,56px); border-radius: 24px; }
.ks-price { font: 400 clamp(48px,5vw,72px)/1.3 Georgia,serif; margin-block: 24px; }
.ks-price span { font: 400 14px/1.5 var(--ks-sans); color: #50575f; }
.ks-fee-card > p:last-of-type { margin-bottom: 28px; color: #50575f; }
.ks-site .ks-table-wrap { overflow-x: auto; border: 1px solid var(--ks-line); border-radius: 20px; background: #fff; color: var(--ks-ink); --ks-copy: #50575f; box-shadow: none; }
.ks-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14px; }
.ks-table thead { background: var(--ks-cream); color: var(--ks-ink); }
.ks-table th { font-weight: 500; text-align: left; }
.ks-table td, .ks-table th { padding: 18px 24px; border-bottom: 1px solid var(--ks-line); vertical-align: top; }
.ks-table tr:last-child td { border-bottom: none; }
.ks-table tbody tr:hover { background: var(--ks-cream); }
.ks-site .ks-faq { background: transparent; border: 0; border-bottom: 1px solid var(--ks-line); border-radius: 0; padding: 25px 0; color: inherit; }
.ks-faq summary { display: flex; justify-content: space-between; gap: 24px; align-items: center; font-size: 17px; font-weight: 500; cursor: pointer; list-style: none; }
.ks-faq summary::-webkit-details-marker { display: none; }
.ks-faq summary::marker { content: ""; }
.ks-faq summary::after { content: '+'; flex: none; font: 400 24px/1 Georgia,serif; }
.ks-faq[open] summary::after { content: '−'; }
.ks-faq summary + * { padding-top: 16px; max-width: 800px; color: var(--ks-copy); }
.ks-site .ks-contact { border-radius: 32px 32px 0 0; padding-block: var(--ks-section-y) 64px; }
.ks-contact-lead { margin: 0 auto; max-width: 660px; text-align: center; color: rgb(255 255 255 / .8); }
.ks-contact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 48px; }
.ks-contact-card { padding: 32px; border: 1px solid var(--ks-line-dark); border-radius: 20px; text-align: center; }
.ks-contact-card > p { font: 400 30px/1.3 var(--ks-serif); }
.ks-contact-card > span { display: block; color: rgb(255 255 255 / .7); font-size: 14px; margin: 18px 0 24px; }
.ks-contact-card .ks-btn { width: 100%; }
.ks-footer { padding: 0 0 24px; background: var(--ks-ink); color: rgb(255 255 255 / .75); font-size: 14px; }
.ks-footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1.2fr; gap: 48px; border-top: 1px solid var(--ks-line-dark); padding-block: 64px; }
.ks-footer .ks-brand { margin-bottom: 24px; color: #fff; }
.ks-site .ks-footer h2 { font: 500 12px/1.5 var(--ks-sans); letter-spacing: .08em; color: var(--ks-gold); margin: 0 0 24px; }
.ks-footer li + li { margin-top: 10px; }
.ks-footer a:hover { color: #fff; }
.ks-footer address { display: flex; flex-direction: column; gap: 10px; font-style: normal; margin-bottom: 18px; }
.ks-footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; border-top: 1px solid var(--ks-line-dark); padding-top: 24px; font-size: 12px; color: rgb(255 255 255 / .65); }
.ks-footer-bottom > :first-child { margin-right: auto; }
.ks-site .footer-version { opacity: 1; }
.ks-brand { display: inline-flex; flex-direction: column; gap: 4px; white-space: nowrap; flex-shrink: 0; color: inherit; }
.ks-brand-name { font: 400 25px/1.2 var(--ks-serif); letter-spacing: .28em; }
.ks-brand-sub { font: 400 8px/1.3 var(--ks-sans); letter-spacing: .28em; }
.ks-site #header-placeholder { position: sticky; top: 0; z-index: 60; background: var(--ks-ink); color: #fff; transition: background .5s var(--ks-ease),color .5s var(--ks-ease); }
.ks-navigation { padding: 22px var(--ks-gutter); font-size: 13px; }
.ks-nav-inner { max-width: 1408px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ks-nav-links { align-items: center; gap: 4px; }
.ks-site .ks-nav-links > a { padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: inherit; white-space: nowrap; border: none; }
.ks-site .ks-nav-links :is(a,button)[aria-current="page"], .ks-site .ks-nav-links > div > button[aria-expanded="true"], .ks-site .ks-nav-links .border-b-2 { background: rgb(255 255 255 / .12); border: none; }
.ks-site .ks-nav-links > a:hover, .ks-site .ks-nav-links > div > button:hover { background: rgb(255 255 255 / .08); }
.ks-site .ks-nav-trial { padding: 9px 16px; min-height: 38px; font-size: 12px; }
.ks-lang-switch { font-size: 12px; color: inherit; padding: 8px; }
.ks-site #header-placeholder.is-scrolled { background: var(--ks-cream); color: var(--ks-ink); box-shadow: 0 1px 0 var(--ks-line); }
.ks-site #header-placeholder.is-scrolled .ks-nav-links :is(a,button)[aria-current="page"], .ks-site #header-placeholder.is-scrolled .ks-nav-links .border-b-2 { background: rgb(33 61 100 / .08); }
.ks-site .ks-mobile-menu { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 90px); overflow-y: auto; margin: 0; padding: 20px var(--ks-gutter) 32px; background: var(--ks-cream); color: var(--ks-ink); border-bottom: 1px solid var(--ks-line); border-radius: 0 0 24px 24px; }
.ks-site .ks-mobile-menu > a, .ks-site .ks-mobile-menu > details > summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--ks-line); font-size: 16px; }
.ks-site .ks-mobile-menu details a { color: var(--ks-ink); font-size: 14px; padding-block: 5px; }
.ks-mobile-menu .ks-lang-switch { margin-top: 12px; }
.ks-site .ks-mobile-menu .ks-nav-trial { margin-top: 20px; width: 100%; background: var(--ks-ink); color: #fff; }
.ks-site #mobile-menu-button { color: inherit; }
.ks-site .case-carousel-button { background: transparent; color: inherit; border: 1px solid currentColor; box-shadow: none; }
.ks-site .case-carousel-button:hover:not(:disabled) { background: var(--ks-ink); color: #fff; border-color: var(--ks-ink); }
.ks-site .case-carousel-hint { color: var(--ks-copy); }
.ks-site :is(.seg-btn,.pick-btn) { border-radius: 999px; box-shadow: none; }
.ks-site .seg-btn[aria-pressed="true"], .ks-site .pick-btn[aria-pressed="true"] { background: var(--ks-ink); color: #fff; }
.ks-site :is(.seg-btn,.pick-btn)[aria-pressed="false"] { background: transparent; color: var(--ks-ink); }
.ks-site #my-plan h2 { font-family: var(--ks-sans); font-size: 24px; }
.ks-site #my-plan { border: 1px solid var(--ks-gold-text); box-shadow: none; }
.ks-site .scroll-timeline.is-ready .scroll-timeline-step:not(.is-active) .scroll-timeline-stage { color: var(--ks-copy); }
.ks-site .subject-group h3 { font-family: var(--ks-serif); font-size: 30px; font-weight: 400; }
.ks-site .ks-person-legacy { perspective: none; height: auto; cursor: auto; padding: 0; }
.ks-person-legacy .card-inner { height: auto; transform: none !important; text-align: left; }
.ks-person-legacy :is(.card-front,.card-back) { position: static; height: auto; transform: none; backface-visibility: visible; }
.ks-person-legacy .card-front { border: none; }
.ks-person-legacy .card-back { border: none; border-top: 1px solid var(--ks-line); }
.ks-site .animate-scroll, .ks-site .animate-scroll-reverse { animation: none; }
.ks-site .scroll-container { overflow-x: auto; }
.ks-site .scroll-content { width: max-content; max-width: none; }
.ks-site blockquote { background: var(--ks-cream); border-left: 1px solid var(--ks-gold-text); border-radius: 0 20px 20px 0; }
.ks-reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ks-ease),transform 1s var(--ks-ease); }
.ks-reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 1179px) {
  .ks-site #desktop-nav { display: none; }
  .ks-nav-inner > div:has(#mobile-menu-button) { display: block; }
  .ks-nav-inner > div:has(#header-trial-button) { display: none; }
  .ks-site #mobile-menu:not(.hidden) { display: block; }
}
@media (min-width: 1180px) { .ks-site #mobile-menu { display: none; } }
@media (max-width: 900px) {
  .ks-hero--split .ks-hero-layout { grid-template-columns: 1fr; }
  .ks-hero--split .ks-hero-copy { max-width: 720px; }
  .ks-hero-media { height: 420px; }
  .ks-people-grid, .ks-services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ks-fees { gap: 36px; }
  .ks-contact-card { padding: 24px 16px; }
  .ks-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 639px) {
  .ks-navigation { padding-block: 20px; }
  .ks-brand-name { font-size: 22px; }
  .ks-brand-sub { font-size: 7px; }
  .ks-site .ks-hero { border-radius: 0 0 24px 24px; }
  .ks-hero .ks-lead { font-size: 16px; }
  .ks-hero-media { height: 350px; }
  .ks-hero-media figcaption { left: 24px; bottom: 24px; }
  .ks-people-grid, .ks-services-grid, .ks-fees, .ks-contact-grid { grid-template-columns: 1fr; }
  .ks-path-grid { grid-template-columns: 1fr; }
  .ks-person-photo img { height: 340px; }
  .ks-service { padding-inline: 0; }
  .ks-services-grid { gap: 48px; }
  .ks-contact-card { padding: 28px; }
  .ks-facts { justify-content: space-between; gap: 16px; }
  .ks-steps li { grid-template-columns: 48px 1fr; gap: 16px; padding-block: 28px; }
  .ks-step-number { font-size: 30px; }
  .ks-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .ks-footer-grid > :first-child, .ks-footer-grid > :last-child { grid-column: 1 / -1; }
  .ks-site .ks-card { border-radius: 20px; }
  .ks-hero .ks-breadcrumb { font-size: 12px; margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-site *, .ks-site *::before, .ks-site *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .ks-reveal { opacity: 1; transform: none; }
}