@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=Noto+Serif+TC:wght@500;600;700&display=swap');

:root{
  --cream:#f8f2e9;
  --paper:#faf4eb;
  --ink:#383838;
  --muted:#767574;
  --cocoa:#734f43;
  --cocoa-deep:#5a3d34;
  --clay:#c4785a;
  --clay-soft:#e8a89a;
  --sand:#fbefe6;
  --line:#e8e0d8;
  --sky:#8ec5d8;
  --sky-deep:#6aadc4;
  --sky-hover:#5a9cb4;
  --radius:4px;
  --max:960px;
  --sticky-h:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%}
body{
  font-family:'Noto Sans TC',sans-serif;
  color:var(--ink);
  background-color:#f8f2e9;
  background-image:url('images/paper-texture.png');
  background-repeat:repeat;
  background-size:420px 420px;
  line-height:1.75;
  font-weight:400;
  padding-bottom:calc(var(--sticky-h) + 28px + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  max-width:100%;
}
img{max-width:100%;display:block;height:auto}

/* Chinese line breaks: wrap on mobile-safe boundaries; use .nowrap to lock short phrases */
body, p, li, label, .grey-sub, .sub, .prose, .quote, .teacher-desc, .exp-card p, .why-item p, .course-row p, .course-row li, .course-facts, .course-facts li, .contact-list li, .hero-photo .sub, .page-hero .sub, .eyebrow, .nav-links a, .btn-cta, .btn-ghost, .sticky-cta .title, .sticky-cta .label, .teacher-tag, .form-group label, .brand-block-head p, .faq-item p, .faq-item h3, .lead, .suits p {
  word-break: normal;
  line-break: auto;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4, .brand-title .zh {
  word-break: normal;
  line-break: auto;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
@media (min-width: 681px) {
  body, p, li, label, .grey-sub, .sub, .prose, .quote, .teacher-desc, .exp-card p, .why-item p, .course-row p, .course-row li, .course-facts, .course-facts li, .contact-list li, .hero-photo .sub, .page-hero .sub, .eyebrow, .nav-links a, .btn-cta, .btn-ghost, .sticky-cta .title, .sticky-cta .label, .teacher-tag, .form-group label, .brand-block-head p, .faq-item p, .faq-item h3, .lead, .suits p,
  h1, h2, h3, h4, .brand-title .zh {
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: break-word;
  }
}
.nowrap { white-space: nowrap; }
.faq-item p .nowrap,
.course-facts .nowrap,
.brand-block-head .nowrap,
.lead .nowrap { white-space: nowrap; }

a{color:inherit}
button{font-family:inherit}

/* —— Nav —— */
.navbar{
  background:rgba(248,242,233,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:16px 20px 12px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  position:relative;z-index:1000;gap:10px;flex-wrap:nowrap;
}
.logo-container{display:flex;align-items:center;justify-content:center;gap:12px;text-decoration:none}
.logo-img{height:52px;width:auto}
.logo-pair{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;width:100%}
.logo-img--pair{height:96px;width:auto;max-width:min(520px,80vw);border-radius:10px}
@media(max-width:760px){
  .logo-pair{gap:8px}
  .logo-img--pair{height:70px;max-width:min(380px,82vw)}
}
.brand-title{display:flex;flex-direction:column}
.brand-title .zh{font-family:'Noto Serif TC',serif;font-size:1.1rem;font-weight:700;color:var(--cocoa-deep);letter-spacing:.06em}
.brand-title .en{font-size:.65rem;color:var(--clay);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.nav-links{display:flex;gap:2px;flex-wrap:wrap;align-items:center;justify-content:center;width:100%}
.nav-links a{
  text-decoration:none;font-weight:500;padding:8px 11px;
  color:var(--muted);font-size:.9rem;border-bottom:2px solid transparent;
}
.nav-links a.active,.nav-links a:hover{color:var(--sky-deep);border-bottom-color:var(--sky)}
.nav-tag{
  color:#fff!important;background:var(--sky)!important;
  font-weight:700!important;border-bottom:none!important;
  border-radius:999px;padding:8px 14px!important;margin-left:4px;
}
.nav-tag:hover{background:var(--sky-hover)!important;color:#fff!important;}

/* —— Full-bleed photo hero —— */
.hero-photo{
  position:relative;width:100%;
  aspect-ratio:4/5;max-height:72vh;
  overflow:hidden;background:var(--sand);
}
@media(min-width:700px){.hero-photo{aspect-ratio:16/9;max-height:560px}}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 35%;
}
.hero-photo .scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(90,61,52,.15) 0%,rgba(90,61,52,.55) 100%);
}
.hero-photo .hero-copy{
  position:absolute;left:0;right:0;bottom:0;
  padding:28px 22px 36px;color:var(--cream);text-align:left;
  max-width:calc(var(--max) + 44px);margin:0 auto;
}
.hero-photo .eyebrow{
  display:inline-block;background:rgba(253,246,241,.92);color:var(--cocoa-deep);
  font-size:.72rem;font-weight:700;letter-spacing:.12em;
  padding:6px 12px;border-radius:999px;margin-bottom:12px;
}
.hero-photo h1{
  font-family:'Noto Serif TC',serif;font-size:1.85rem;font-weight:700;
  line-height:1.3;letter-spacing:.01em;margin-bottom:8px;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
}
.hero-photo .sub{
  font-size:.98rem;opacity:.95;max-width:28em;font-weight:400;
  text-shadow:0 1px 6px rgba(0,0,0,.2);
}
.hero-paths{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;
  max-width:100%;
}
.btn-hero{
  display:inline-block;padding:10px 16px;
  color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;
  border:1.5px solid rgba(255,255,255,.7);border-radius:999px;
  background:rgba(110,173,196,.88);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  text-shadow:0 1px 4px rgba(0,0,0,.15);
}
.btn-hero:hover{background:rgba(90,156,180,.95);border-color:#fff}
@media(min-width:700px){
  .hero-photo h1{font-size:2.5rem}
  .hero-photo .hero-copy{padding:40px 28px 48px}
  .btn-hero{font-size:.95rem;padding:11px 20px}
}

/* Text-only page hero (courses/about) */
.page-hero{
  padding:48px 22px 28px;text-align:center;
  background:linear-gradient(180deg,rgba(250,244,235,.55) 0%,rgba(248,242,233,.35) 100%);
}
.page-hero h1{
  font-family:'Noto Serif TC',serif;font-size:2rem;font-weight:700;
  color:var(--cocoa-deep);margin:10px 0 10px;letter-spacing:.01em;
}
.page-hero .sub{color:var(--muted);max-width:26em;margin:0 auto;font-size:1.02rem}

/* —— Section rhythm —— */
.section{padding:56px 22px}
.section.alt{background:rgba(250,244,235,.45)}
.section-inner{max-width:var(--max);margin:0 auto;width:100%;min-width:0}
.eyebrow-pill{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  color:var(--clay);text-transform:uppercase;margin-bottom:10px;
}
.section-head{text-align:center;margin-bottom:36px}
.section-head h2{
  font-family:'Noto Serif TC',serif;font-size:1.55rem;font-weight:700;
  color:var(--cocoa-deep);letter-spacing:.01em;margin-bottom:10px;line-height:1.4;
}
.section-head .grey-sub{
  color:var(--muted);font-size:.98rem;max-width:28em;margin:0 auto;
}
.section-head.left{text-align:left}
.section-head.left .grey-sub{margin:0}

.prose{color:var(--muted);font-size:1.02rem}
.prose + .prose{margin-top:14px}
.prose strong{color:var(--cocoa-deep);font-weight:600}

/* —— Experience cards: image on top, no heavy boxes —— */
/* iOS Safari: img intrinsic width (~1200px) can inflate flex/grid min-content and
   push .photo past the content column. Use padding-bottom 1:1 box + absolute img
   so the image never contributes intrinsic size; minmax(0,1fr)+min-width:0 caps the track. */
.exp-grid{
  display:grid;gap:40px;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  max-width:100%;
}
@media(min-width:680px){
  .exp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .exp-grid.exp-grid--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:820px;margin:0 auto}
}
.path-secondary{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 20px;margin-top:32px;padding:16px 18px;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
}
.path-secondary-copy h3{
  font-family:'Noto Serif TC',serif;font-size:1.02rem;font-weight:700;
  color:var(--cocoa-deep);margin-bottom:4px;line-height:1.35;
}
.path-secondary-copy p{color:var(--muted);font-size:.9rem;margin:0}
.path-secondary .btn-ghost{flex-shrink:0;font-size:.92rem;padding:8px 4px}
.exp-card{
  text-align:left;
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  max-width:100%;
}
.exp-card .photo{
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
  height:0;
  padding-bottom:100%; /* 1:1 from width — in-flow, Safari-safe */
  overflow:hidden;border-radius:var(--radius);
  margin-bottom:16px;background:var(--sand);
  flex:0 0 auto;
  align-self:stretch;
  box-sizing:border-box;
}
.exp-card .photo img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  border:0;
  object-fit:cover;
  object-position:center;
}
.exp-card h3{
  font-family:'Noto Serif TC',serif;font-size:1.12rem;font-weight:700;
  color:var(--cocoa-deep);margin-bottom:8px;
  max-width:100%;
  overflow-wrap:anywhere;
}
.exp-card p{color:var(--muted);font-size:.94rem;max-width:100%}
.exp-card .exp-link{margin-top:auto;padding-top:12px}
@media(max-width:480px){
  .exp-card h3 .nowrap{white-space:normal}
}

/* Why / value strips */
.why-grid{
  display:grid;gap:32px;
}
@media(min-width:900px){
  .why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
}
.why-item{text-align:center;min-width:0;max-width:100%}
.why-item h3,.why-item p{max-width:100%;overflow-wrap:anywhere}
.why-item h3{
  font-family:'Noto Serif TC',serif;font-size:1.05rem;font-weight:700;
  color:var(--cocoa-deep);margin-bottom:8px;
}
.why-item p{color:var(--muted);font-size:.94rem}
@media(max-width:899px){
  .why-item p {
    word-break: normal;
    line-break: auto;
    overflow-wrap: anywhere;
  }
  .why-item .nowrap { white-space: normal; }
}

/* Gallery strip */
.gallery{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
@media(min-width:680px){.gallery{grid-template-columns:1fr 1fr 1fr;gap:12px}}
.gallery figure{
  margin:0;overflow:hidden;border-radius:var(--radius);background:var(--sand);
  aspect-ratio:1 / 1;
  position:relative;
  width:100%;
}
.gallery img{
  position:absolute;inset:0;
  width:100%;height:100%;
  max-width:none;
  object-fit:cover;object-position:center;
}
.gallery img.rose{object-position:center}
.gallery figure.phone-only{display:block}
@media(min-width:680px){.gallery figure.phone-only{display:none}}

/* Full-bleed mid photo */
.bleed-photo{
  width:100%;aspect-ratio:16/10;max-height:520px;overflow:hidden;background:var(--sand);
}
.bleed-photo img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Form */
.form-wrap{
  max-width:440px;margin:0 auto;
}
.form-group{margin-bottom:18px}
.form-group label{
  display:block;margin-bottom:6px;font-weight:600;
  color:var(--cocoa-deep);font-size:.88rem;
}
.form-group input,.form-group select{
  width:100%;padding:12px 0;border:none;
  border-bottom:1px solid var(--line);border-radius:0;
  font-size:1rem;background:transparent;color:var(--ink);
}
.form-group input:focus,.form-group select:focus{
  outline:none;border-bottom-color:var(--clay);
}

/* Buttons */
.btn-cta{
  display:inline-block;background:var(--sky);color:#fff;
  padding:13px 28px;text-decoration:none;font-size:1rem;font-weight:700;
  border-radius:999px;border:none;cursor:pointer;text-align:center;
}
.btn-cta:hover{background:var(--sky-hover)}
.btn-ghost{
  display:inline-block;padding:12px 4px;color:var(--sky-deep);
  text-decoration:none;font-weight:700;border-bottom:1px solid var(--sky);
}
.btn-block{width:100%;margin-top:8px}

/* Teacher / contact */
.meta-grid{
  display:grid;gap:36px;
}
@media(min-width:640px){.meta-grid{grid-template-columns:1fr 1fr;gap:40px}}
.meta-block h3{
  font-family:'Noto Serif TC',serif;font-size:1.1rem;font-weight:700;
  color:var(--cocoa-deep);margin-bottom:12px;
}
.teacher-row{display:flex;gap:14px;align-items:flex-start;min-width:0;max-width:100%}
.teacher-row > div{min-width:0;flex:1;overflow-wrap:anywhere}
.teacher-row .avatar-img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;
  background:var(--sand);
}
.teacher-name{font-weight:700;color:var(--cocoa-deep);font-size:1.02rem}
.teacher-tag{font-size:.82rem;color:var(--clay);font-weight:600;margin-bottom:6px}
.teacher-desc{font-size:.92rem;color:var(--muted)}
.contact-list{list-style:none}
.contact-list li{margin-bottom:8px;font-size:.95rem;color:var(--muted)}
.contact-list span{color:var(--cocoa-deep);font-weight:600}

/* Course list with image */
.course-list{display:grid;gap:40px}
/* iPad/Safari: 1600px intrinsic imgs inflate grid min-content and spill past the column.
   Cap tracks with minmax(0,…) + min-width:0; size .photo via padding-bottom + absolute img. */
.course-row{
  display:grid;gap:18px;align-items:center;
  width:100%;max-width:100%;min-width:0;
}
.course-row > *{min-width:0;max-width:100%}
@media(min-width:900px){
  .course-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px}
  .course-row.reverse{direction:rtl}
  .course-row.reverse > *{direction:ltr}
}
.course-row .photo{
  position:relative;
  width:100%;max-width:100%;min-width:0;
  height:0;padding-bottom:75%; /* 4:3 */
  overflow:hidden;border-radius:var(--radius);background:var(--sand);
  box-sizing:border-box;
}
.course-row .photo img{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;max-width:none;border:0;
  object-fit:cover;object-position:center;
}
.photo-stack{
  display:flex;flex-direction:column;gap:16px;
  align-self:start;width:100%;max-width:100%;min-width:0;
}
.photo-stack .photo{width:100%}
.course-row h3{
  font-family:'Noto Serif TC',serif;font-size:1.25rem;font-weight:700;
  color:var(--cocoa-deep);margin-bottom:8px;
}
.course-row p,.course-row li{color:var(--muted);font-size:.95rem}
.course-row p,
.course-row li,
.course-row .lead,
.course-track p,
.suits p,
.course-facts,
.course-facts li{
  word-break:break-all!important;
  overflow-wrap:anywhere!important;
  line-break:anywhere!important;
  white-space:normal!important;
  max-width:100%;
}
.course-row .course-track,
.course-row .split,
.course-row > div:not(.photo):not(.photo-stack){
  overflow-wrap:anywhere;
  word-break:break-all;
}

.course-row,
.course-row > *,
.course-track,
.split,
.suits,
.course-facts{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.section-inner,.course-list{min-width:0;max-width:100%;overflow-x:clip}

.course-row ul{margin:10px 0 0 1.1em}

footer{
  text-align:center;padding:36px 20px 24px;
  background:var(--sand);color:var(--muted);font-size:.85rem;
  border-top:1px solid var(--line);
}

/* Sticky bottom Book CTA */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:1100;
  background:rgba(248,242,233,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:100%;
}
.sticky-cta .sticky-info{min-width:0}
.sticky-cta .sticky-info .label{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--clay);
}
.sticky-cta .sticky-info .title{
  font-family:'Noto Serif TC',serif;font-size:.95rem;font-weight:700;
  color:var(--cocoa-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sticky-cta .btn-cta{padding:11px 20px;font-size:.92rem;flex-shrink:0}

.quote{
  text-align:center;color:var(--muted);font-size:1.08rem;
  max-width:34em;margin:0 auto;line-height:1.8;
}
.mid-cta{text-align:center;margin-top:28px}
.course-clarify{
  margin-top:12px;font-size:.88rem;color:var(--muted);line-height:1.55;
  padding:10px 12px;background:var(--sand);border-radius:var(--radius);
}

/* ===== Sub-pages (courses / about) ===== */
/* Shorter photo hero for inner pages */
.hero-photo.page{aspect-ratio:1/1;max-height:64vh}
@media(min-width:700px){.hero-photo.page{aspect-ratio:16/9;max-height:480px}}
.hero-photo.page img{object-position:center 45%}

/* Course rows: extra detail blocks */
.course-row .lead{color:var(--muted);font-size:.98rem}
.course-row h4{
  font-family:'Noto Serif TC',serif;font-size:.98rem;font-weight:700;
  color:var(--cocoa-deep);margin-bottom:4px;
}
.split{display:grid;gap:16px;margin-top:16px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:22px}}
.split p{font-size:.92rem}
.suits{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mini-label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  color:var(--clay);text-transform:uppercase;margin-bottom:4px;
}
.suits p{font-size:.92rem}
.course-meta{margin-top:10px;font-size:.85rem;color:var(--muted)}
.course-meta span{color:var(--cocoa-deep);font-weight:600}
.course-list.spaced{gap:56px}
@media(min-width:640px){.course-list.spaced{gap:72px}}

/* $99 trial 3-step strip */
.steps{display:grid;gap:32px}
@media(min-width:680px){.steps{grid-template-columns:repeat(3,1fr);gap:28px}}
.step{text-align:center;position:relative}
.step .num{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--clay-soft);color:var(--clay);
  font-family:'Noto Serif TC',serif;font-weight:700;font-size:1.1rem;
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;
  background:var(--cream);
}
.step h3{
  font-family:'Noto Serif TC',serif;font-size:1.05rem;font-weight:700;
  color:var(--cocoa-deep);margin-bottom:6px;
}
.step p{color:var(--muted);font-size:.93rem;max-width:18em;margin:0 auto;word-break:keep-all;line-break:strict;overflow-wrap:break-word}
@media(min-width:680px){
  .step:not(:last-child)::after{
    content:"⟶";position:absolute;top:10px;right:-24px;
    color:var(--clay-soft);font-size:1.1rem;
  }
}

/* CTA band */
.cta-row{
  display:flex;flex-wrap:wrap;gap:14px 26px;
  justify-content:center;align-items:center;
}

/* About: teacher facts */
.fact-list{list-style:none;margin-top:12px}
.fact-list li{
  color:var(--muted);font-size:.95rem;padding:8px 0;
  border-bottom:1px solid var(--line);
}
.fact-list li:last-child{border-bottom:none}
.fact-list span{color:var(--cocoa-deep);font-weight:600}
.placeholder{color:var(--clay);font-style:normal;font-weight:500}
.course-row ul.fact-list{margin:12px 0 0 0}
.hero-photo.page .scrim{
  background:linear-gradient(180deg,rgba(90,61,52,.10) 0%,rgba(90,61,52,.25) 45%,rgba(60,40,34,.70) 100%);
}

/* Timetable */
.timetable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.timetable{width:100%;min-width:680px;border-collapse:collapse;font-size:.92rem;color:var(--ink)}
.timetable th{font-family:'Noto Serif TC',serif;color:var(--cocoa-deep);font-weight:700;padding:12px 10px;border-bottom:2px solid var(--sky);text-align:left;white-space:nowrap}
.timetable td{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.timetable td.t{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.timetable td b{display:block;color:var(--cocoa-deep);font-weight:600;white-space:nowrap}
.timetable td span{display:block;color:var(--clay);font-size:.8rem;white-space:nowrap}
.timetable-note{margin-top:18px;color:var(--muted);font-size:.9rem;text-align:center}
.timetable-note b{color:var(--cocoa-deep);font-weight:600}
.timetable{table-layout:fixed}
.timetable th:first-child,.timetable td.t{width:108px}

/* Timetable: table on desktop, stacked day cards on mobile */
.timetable-mobile{display:none}
.timetable-mobile-hint{
  margin:4px 0 0;text-align:center;color:var(--muted);font-size:.85rem;
}
.tt-day{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin:0 0 12px;
}
.tt-day h3{
  font-family:'Noto Serif TC',serif;font-size:1.05rem;color:var(--cocoa-deep);
  font-weight:700;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--clay-soft);
  letter-spacing:.04em;
}
.tt-day ul{list-style:none;margin:0;padding:0}
.tt-day li{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 0;border-bottom:1px dashed var(--line);
}
.tt-day li:last-child{border-bottom:none;padding-bottom:0}
.tt-time{
  flex:0 0 6.6em;color:var(--muted);font-size:.88rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px;
}
.tt-class{flex:1;min-width:0}
.tt-class b{display:block;color:var(--cocoa-deep);font-weight:600;font-size:.95rem;line-height:1.4}
.tt-class span{display:block;color:var(--clay);font-size:.8rem;line-height:1.45;margin-top:2px}
@media(max-width:767px){
  .timetable-wrap{display:none}
  .timetable-mobile{display:block}
  .timetable-note{margin-top:8px}
}
@media(min-width:768px){
  .timetable-wrap{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .timetable-mobile{display:none}
}


/* Social links */
.social{display:flex;justify-content:center;gap:22px;margin-bottom:14px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:6px;color:var(--cocoa);text-decoration:none;font-size:.88rem}
.social a:hover{color:var(--clay)}
.social svg{width:22px;height:22px}

/* Branch badge (童畫室) */
.branch-badge{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.04em;
  color:var(--cocoa);background:var(--sand);border:1px solid var(--line);
  padding:4px 10px;border-radius:999px;text-decoration:none;margin:0 0 10px;
}
.branch-badge:hover{color:var(--sky-deep);border-color:var(--sky)}
.branch-badge.muted{cursor:default;pointer-events:none;opacity:.92}
/* Small accent only when badge links to 童畫室 (not muted calligraphy labels) */
a.branch-badge:not(.muted){
  color:#8b6b52;background:#faf3e4;border-color:#e5d4b0;
}
a.branch-badge:not(.muted):hover{color:#6a9aad;border-color:#c9957a;background:#f3e8cf}
.exp-link{margin-top:12px}


/* ============================================================
   Kids branch — 水滴童畫室
   Scoped to body.kids-branch only. Main brand :root untouched.
   Palette: peach cream + coral + soft teal + lilac + warm sun
   Bright & warm for ages 3–12 / parents; not kindergarten loud.
   ============================================================ */
body.kids-branch{
  /* Soft yellow literary-art palette (matched to kids-logo wash) */
  --kids-cream:#FAF6EC;
  --kids-peach:#CFE9FB;
  --kids-paper:#FAF6EC;
  --kids-coral:#c9957a;          /* soft clay — quieter than old coral */
  --kids-coral-deep:#8b6b52;     /* cocoa ink like logo type */
  --kids-teal:#6a9aad;           /* soft blue from droplet mascot */
  --kids-lilac:#a89bb8;
  --kids-sun:#e0c56a;            /* gold leaf accent */
  --kids-ink:#4a4038;
  --kids-muted:#71665c;
  --kids-line:#e8d9bc;
  --kids-radius:14px;
  background-color:var(--kids-cream);
  background-image:url('images/paper-texture.png');
  background-repeat:repeat;
  background-size:420px 420px;
  color:var(--kids-ink);
}
body.kids-branch .navbar{
  background:rgba(250,246,236,.78);
  border-bottom-color:var(--kids-line);
}
/* Kids logo: wide watercolor mark — keep mascot+文字 readable */
body.kids-branch .logo-img{
  height:54px;
  width:auto;
  max-width:min(220px,52vw);
  object-fit:contain;
  border-radius:8px;
}
body.kids-branch .nav-links a.active,
body.kids-branch .nav-links a:hover{
  color:var(--kids-coral-deep);
  border-bottom-color:var(--kids-coral);
}
body.kids-branch .nav-tag{
  background:var(--sky)!important;
  color:#fff!important;
}
body.kids-branch .nav-tag:hover{background:var(--sky-hover)!important}

/* Hero: warmer coral–peach scrim, livelier eyebrow */
body.kids-branch .hero-photo.page .scrim{
  background:linear-gradient(
    180deg,
    rgba(224,197,106,.10) 0%,
    rgba(106,154,173,.16) 42%,
    rgba(61,54,50,.70) 100%
  );
}
body.kids-branch .hero-photo .eyebrow{
  background:linear-gradient(90deg,#FAF6EC 0%,#FAF6EC 55%,#e8f2f5 100%);
  color:var(--kids-coral-deep);
  letter-spacing:.1em;
  box-shadow:0 2px 10px rgba(139,107,82,.12);
}
body.kids-branch .hero-photo h1{
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}

/* Sections */
body.kids-branch .section{background:rgba(250,246,236,.4)}
body.kids-branch .section.alt{background:rgba(250,246,236,.5)}
body.kids-branch .section-head h2{
  color:var(--kids-coral-deep);
  font-weight:700;
  letter-spacing:.02em;
}
body.kids-branch .section-head .grey-sub,
body.kids-branch .quote,
body.kids-branch .prose{color:var(--kids-muted)}
body.kids-branch .eyebrow-pill{
  color:var(--kids-teal);
  letter-spacing:.14em;
}
body.kids-branch .quote{
  background:linear-gradient(135deg,var(--kids-peach) 0%,#faf6eb 55%,#eef4f6 100%);
  border-radius:var(--kids-radius);
  padding:28px 24px;
  border:1px solid var(--kids-line);
  color:var(--kids-ink);
}

/* Why cards — soft rounded, tinted, not cartoon */
body.kids-branch .why-item{
  text-align:left;
  background:var(--kids-paper);
  border:1px solid var(--kids-line);
  border-radius:var(--kids-radius);
  padding:22px 20px 20px;
  box-shadow:0 6px 18px rgba(224,122,95,.06);
}
body.kids-branch .why-grid .why-item:nth-child(1){border-top:3px solid var(--kids-coral)}
body.kids-branch .why-grid .why-item:nth-child(2){border-top:3px solid var(--kids-teal)}
body.kids-branch .why-grid .why-item:nth-child(3){border-top:3px solid var(--kids-lilac)}
body.kids-branch .why-item h3{color:var(--kids-coral-deep);font-weight:700}
body.kids-branch .why-item p{color:var(--kids-muted)}

/* Course card */
body.kids-branch .course-row .photo{
  border-radius:var(--kids-radius);
  box-shadow:0 8px 24px rgba(79,168,160,.12);
}
body.kids-branch .course-row h3{color:var(--kids-coral-deep);font-weight:700}
body.kids-branch .course-row .lead,
body.kids-branch .course-row p,
body.kids-branch .suits p{color:var(--kids-muted)}
body.kids-branch .mini-label{color:var(--kids-teal)}
body.kids-branch .suits{border-top-color:var(--kids-line)}
body.kids-branch .course-meta{color:var(--kids-muted)}
body.kids-branch .course-meta span,
body.kids-branch .course-meta strong{color:var(--kids-coral-deep)}

/* CTAs */
body.kids-branch .btn-cta{
  background:var(--sky);
  color:#fff;
}
body.kids-branch .btn-cta:hover{background:var(--sky-hover)}
body.kids-branch .btn-ghost{
  color:var(--kids-coral-deep);
  border-bottom-color:var(--kids-sun);
}
body.kids-branch .cta-row .btn-ghost{border-bottom-color:var(--kids-teal)}

/* Footer + sticky */
body.kids-branch footer{
  background:linear-gradient(180deg,var(--kids-peach) 0%,#efe0b8 100%);
  border-top-color:var(--kids-line);
  color:var(--kids-muted);
}
body.kids-branch .social a{color:var(--kids-coral-deep)}
body.kids-branch .social a:hover{color:var(--kids-teal)}
body.kids-branch .sticky-cta{
  background:rgba(250,246,235,.97);
  border-top-color:var(--kids-line);
}
body.kids-branch .sticky-cta .label{color:var(--kids-teal)}
body.kids-branch .sticky-cta .title{color:var(--kids-coral-deep)}

/* Branch badge on kids page itself */
body.kids-branch .branch-badge{
  color:var(--kids-coral-deep);
  background:linear-gradient(90deg,#f3e8cf,#FAF6EC);
  border-color:#e5d4b0;
}


/* —— Kids branch: Lalla-inspired single-page sections —— */
body.kids-branch .kids-hero .hero-copy{padding-bottom:42px}
body.kids-branch .hero-cta{
  display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:18px;
}
body.kids-branch .hero-ghost{
  color:var(--cream)!important;border-bottom-color:rgba(255,250,246,.55)!important;
  text-shadow:0 1px 4px rgba(0,0,0,.25);
}
body.kids-branch .hero-ghost:hover{border-bottom-color:var(--kids-sun)!important}

/* Numbered philosophy strip */
body.kids-branch .kids-philosophy{
  display:grid;gap:18px;
}
@media(min-width:700px){
  body.kids-branch .kids-philosophy{grid-template-columns:repeat(3,1fr);gap:22px}
}
body.kids-branch .kids-philo-item{
  background:var(--kids-paper);
  border:1px solid var(--kids-line);
  border-radius:var(--kids-radius);
  padding:22px 20px 20px;
  box-shadow:0 6px 18px rgba(224,122,95,.06);
}
body.kids-branch .kids-philo-item:nth-child(1){border-top:3px solid var(--kids-coral)}
body.kids-branch .kids-philo-item:nth-child(2){border-top:3px solid var(--kids-teal)}
body.kids-branch .kids-philo-item:nth-child(3){border-top:3px solid var(--kids-lilac)}
body.kids-branch .kids-num{
  display:block;font-family:'Noto Serif TC',serif;font-size:.85rem;font-weight:700;
  color:var(--kids-teal);letter-spacing:.12em;margin-bottom:8px;
}
body.kids-branch .kids-philo-item h3{
  font-family:'Noto Serif TC',serif;font-size:1.08rem;font-weight:700;
  color:var(--kids-coral-deep);margin-bottom:8px;
}
body.kids-branch .kids-philo-item p{color:var(--kids-muted);font-size:.94rem}

/* Experience explore grid */
body.kids-branch .kids-exp-grid{
  display:grid;gap:28px;
}
@media(min-width:640px){
  body.kids-branch .kids-exp-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media(min-width:900px){
  body.kids-branch .kids-exp-grid{grid-template-columns:repeat(4,1fr);gap:20px}
}
body.kids-branch .kids-exp-card{text-align:left}
body.kids-branch .kids-exp-card .photo{
  aspect-ratio:1;overflow:hidden;border-radius:var(--kids-radius);
  margin-bottom:14px;background:var(--kids-peach);
  box-shadow:0 6px 16px rgba(79,168,160,.1);
}
body.kids-branch .kids-exp-card .photo img{width:100%;height:100%;object-fit:cover}
body.kids-branch .kids-exp-card h3{
  font-family:'Noto Serif TC',serif;font-size:1.05rem;font-weight:700;
  color:var(--kids-coral-deep);margin-bottom:6px;
}
body.kids-branch .kids-exp-card p{color:var(--kids-muted);font-size:.9rem}

/* Pricing / choose cards */
body.kids-branch .kids-price-grid{
  display:grid;gap:24px;max-width:820px;margin:0 auto;
}
@media(min-width:720px){
  body.kids-branch .kids-price-grid{grid-template-columns:1.15fr .95fr;gap:22px;align-items:stretch}
}
body.kids-branch .kids-price-card{
  background:var(--kids-paper);
  border:1px solid var(--kids-line);
  border-radius:var(--kids-radius);
  padding:26px 22px 24px;
  display:flex;flex-direction:column;
  box-shadow:0 8px 22px rgba(224,122,95,.07);
}
body.kids-branch .kids-price-card.featured{
  border-color:#e5d4b0;
  background:linear-gradient(180deg,#fffcf5 0%,#FAF6EC 100%);
}
body.kids-branch .kids-price-tag{
  display:inline-block;align-self:flex-start;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fffaf6;background:var(--kids-coral-deep);
  padding:5px 10px;border-radius:999px;margin-bottom:12px;
}
body.kids-branch .kids-price-tag.soft{
  background:var(--kids-teal);
}
body.kids-branch .kids-price-card h3{
  font-family:'Noto Serif TC',serif;font-size:1.28rem;font-weight:700;
  color:var(--kids-coral-deep);margin-bottom:10px;line-height:1.35;
}
body.kids-branch .kids-price-lead{
  color:var(--kids-muted);font-size:.95rem;margin-bottom:16px;flex-grow:0;
}
body.kids-branch .kids-price-facts{
  list-style:none;margin:0 0 14px;padding:0;
  border-top:1px solid var(--kids-line);
}
body.kids-branch .kids-price-facts li{
  color:var(--kids-muted);font-size:.9rem;padding:10px 0;
  border-bottom:1px solid var(--kids-line);
}
body.kids-branch .kids-price-facts strong{color:var(--kids-coral-deep);font-weight:600}
body.kids-branch .kids-price-facts em{
  font-style:normal;font-weight:700;color:var(--kids-coral-deep);
}
body.kids-branch .kids-price-note{
  font-size:.85rem;color:var(--kids-muted);margin-bottom:16px;
  padding:10px 12px;background:rgba(243,232,207,.7);
  border-radius:10px;border:1px solid var(--kids-line);
}
body.kids-branch .kids-price-cta{margin-top:auto}
body.kids-branch .kids-price-cta .btn-cta{width:100%;text-align:center}

/* Moments honesty note */
body.kids-branch .kids-honest-note{
  text-align:center;color:var(--kids-muted);font-size:.92rem;
  max-width:28em;margin:22px auto 0;
}
body.kids-branch .kids-gallery{margin-top:8px}

/* Visit grid */
body.kids-branch .kids-visit-grid{
  display:grid;gap:18px;
}
@media(min-width:640px){
  body.kids-branch .kids-visit-grid{grid-template-columns:1fr 1fr;gap:20px}
}
body.kids-branch .kids-visit-card{
  background:var(--kids-paper);
  border:1px solid var(--kids-line);
  border-radius:var(--kids-radius);
  padding:20px 18px;
}
body.kids-branch .kids-visit-card h3{
  font-family:'Noto Serif TC',serif;font-size:1.02rem;font-weight:700;
  color:var(--kids-coral-deep);margin-bottom:8px;
}
body.kids-branch .kids-visit-card p{color:var(--kids-muted);font-size:.94rem}
body.kids-branch .kids-visit-card a{color:var(--kids-coral-deep)}
body.kids-branch .kids-visit-card .teacher-tag{color:var(--kids-teal)}

/* kids gradient background (2026-10-14) */
body.kids-branch{background:linear-gradient(180deg,#FAF6EC 0%,#FAF6EC 30%,#FAF6EC 65%,#FAF6EC 100%) fixed!important}
body.kids-branch .section,body.kids-branch .section.alt{background:transparent!important}

/* kids header copied from Kayan's mock (2026-10-14) */
body.kids-branch .navbar{background:#fff0c8!important;min-height:112px;padding-top:14px;padding-bottom:14px;border-bottom:none}
body.kids-branch .logo-img{height:84px;max-width:min(320px,62vw);border-radius:0}
body.kids-branch .nav-links{gap:48px;align-items:center}
body.kids-branch .nav-links a{color:#2d2a26;border-bottom:none!important}
body.kids-branch .nav-tag{background:#cfe9fb!important;color:#2a7fd4!important;border-radius:6px;padding:6px 14px}
body.kids-branch .nav-tag:hover{background:#b9dff8!important}
body.kids-branch .kids-hero .scrim,body.kids-branch .kids-hero .hero-copy{display:none}
@media(max-width:760px){body.kids-branch .navbar{min-height:80px}body.kids-branch .logo-img{height:60px}body.kids-branch .nav-links{gap:18px}}
body.kids-branch .navbar{min-height:130px!important}
body.kids-branch .logo-img{height:110px!important;max-width:min(300px,62vw)!important}
@media(max-width:760px){body.kids-branch .navbar{min-height:90px!important}body.kids-branch .logo-img{height:72px!important}}
@media(max-width:760px){body.kids-branch .navbar{flex-direction:column;align-items:center!important;justify-content:center}body.kids-branch .logo-container{display:flex;justify-content:center;width:100%;margin:0 auto}body.kids-branch .nav-links{justify-content:center;width:100%}}
/* kids hero copy back (2026-10-14) */
body.kids-branch .kids-hero .hero-copy{display:block!important}
body.kids-branch .kids-hero .scrim{display:block!important;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(40,32,26,.55) 100%)!important}
body.kids-branch .kids-hero .eyebrow{background:#FAF6EC!important;color:#5a4636!important;border-radius:999px}
/* unified kids palette from Kayan (2026-10-14) */
body.kids-branch{
  --kids-cream:#FAF6EC;--kids-paper:#FAF6EC;--kids-peach:#CFE9FB;
  --kids-coral:#88BCEB;--kids-coral-deep:#8B6B52;--kids-teal:#80A8B6;
  --kids-lilac:#80A8B6;--kids-sun:#88BCEB;--kids-ink:#3D2F2B;--kids-muted:#8B6B52;
  --kids-line:#CFE9FB;
  background:#FAF6EC!important;color:#3D2F2B}
body.kids-branch .section,body.kids-branch .section.alt{background:#FAF6EC!important}
body.kids-branch .section.alt{background:#CFE9FB33!important}
body.kids-branch .nav-tag{background:#CFE9FB!important;color:#3d7fc0!important}
body.kids-branch .nav-tag:hover{background:#88BCEB!important;color:#fff!important}
body.kids-branch .section-head h2,body.kids-branch h3{color:#3D2F2B}
body.kids-branch .eyebrow-pill,body.kids-branch .section-head .eyebrow{color:#80A8B6}
body.kids-branch .btn-cta,body.kids-branch .sticky-cta a,body.kids-branch .sticky-bar a{background:var(--sky)!important;color:#fff!important}
body.kids-branch .btn-cta.btn-wa{background:#88BCEB!important;color:#fff!important}
body.kids-branch .btn-cta.btn-wa:hover{background:#80A8B6!important}
body.kids-branch .logo-img{height:80px!important;max-width:min(340px,70vw)!important}
@media(max-width:760px){body.kids-branch .logo-img{height:58px!important}}

/* ============================================================
   IA 2026-10 — brand blocks, FAQ, portfolio, merge banner
   ============================================================ */
.brand-jump{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:8px 0 28px;
}
.brand-jump a{
  display:inline-block;padding:10px 18px;border-radius:999px;
  background:var(--sand);border:1px solid var(--line);color:var(--cocoa-deep);
  text-decoration:none;font-size:.9rem;font-weight:600;letter-spacing:.02em;
}
.brand-jump a:hover{border-color:var(--clay-soft);background:#faf3e4}
.brand-block-head{
  text-align:center;margin:0 0 28px;padding:22px 18px;
  background:var(--sand);border:1px solid var(--line);border-radius:16px;
}
.brand-block-head .eyebrow-pill{margin-bottom:8px}
.brand-block-head h2{
  font-family:'Noto Serif TC',serif;font-size:clamp(1.35rem,3vw,1.75rem);
  color:var(--cocoa-deep);margin:0 0 8px;font-weight:700;letter-spacing:.04em;
}
.brand-block-head p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65}
.brand-block-head.kids-tone{background:#faf6ec;border-color:#e5d4b0}
.brand-block-head.kids-tone h2{color:#3D2F2B}
.brand-block-head .brand-block-logo{height:88px;width:auto;max-width:min(320px,100%);display:block;margin:0 auto 12px}
@media(max-width:760px){.brand-block-head .brand-block-logo{height:64px}}
.merge-banner{
  margin:0 auto;max-width:720px;padding:14px 18px;border-radius:12px;
  background:var(--sand);border:1px solid var(--line);text-align:center;
  color:var(--muted);font-size:.92rem;line-height:1.6;
}
.merge-banner a{color:var(--cocoa-deep);font-weight:600}
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
}
.faq-item h3{
  font-family:'Noto Serif TC',serif;font-size:1.05rem;color:var(--cocoa-deep);
  margin:0 0 8px;font-weight:700;
}
.faq-item p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.7}
.portfolio-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
@media(min-width:720px){.portfolio-grid{grid-template-columns:1fr 1fr 1fr;gap:14px}}
.portfolio-grid figure{
  margin:0;border-radius:14px;overflow:hidden;background:var(--sand);
  border:1px solid var(--line);aspect-ratio:1;position:relative;
}
.portfolio-grid img{width:100%;height:100%;object-fit:cover;display:block}
.portfolio-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  background:linear-gradient(transparent,rgba(45,36,28,.72));
  color:#faf6ec;font-size:.78rem;letter-spacing:.04em;
}
.course-track .track-thumbs{
  margin-top:10px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:#f7f1e8;aspect-ratio:4/3;max-height:140px;
}
.course-track .track-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.course-track .suits{margin-top:12px}
.course-track .course-facts{margin-top:10px}
@media(min-width:900px){.course-track .track-thumbs{max-height:160px}}

.course-facts{
  margin:14px 0 0;padding:0;list-style:none;
}
.course-facts li{
  color:var(--muted);font-size:.92rem;line-height:1.65;
  padding:6px 0;border-bottom:1px dashed var(--line);
}
.course-facts li:last-child{border-bottom:none}
.course-facts strong{color:var(--cocoa);font-weight:600;margin-right:6px}

.brand-block-head .brand-block-logo--droplets{height:72px;width:auto;max-width:min(280px,85%);display:block;margin:0 auto 14px;object-fit:contain}
@media(max-width:760px){.brand-block-head .brand-block-logo--droplets{height:56px}}

/* Kids artwork teaser (courses #kids) + compact kids portfolio row */
.portfolio-grid--kids{max-width:900px;margin:0 auto}
.kids-work-teaser{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.kids-work-teaser-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.kids-work-teaser-head a{font-size:.88rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.kids-work-teaser-head a:hover{border-bottom-color:var(--ink)}
.kids-work-teaser-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.kids-work-thumb{display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);background:var(--sand)}
.kids-work-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.faq-item p{overflow-wrap:break-word;word-break:keep-all;line-break:strict}
.faq-item p .nowrap{white-space:nowrap}

/* Avoid breaking just before CJK closing punctuation when a nowrap run ends the line */
.faq-item p, .course-facts li, .brand-block-head p, .lead, .grey-sub, .sub {
  hanging-punctuation: allow-end;
}


.dual-brand-title{text-align:center}
.dual-brand-title .nowrap{display:inline-block;max-width:100%}
@media(max-width:420px){
  .dual-brand-title{font-size:clamp(1.05rem,4.6vw,1.35rem);letter-spacing:0}
}

/* $99 trial signup modal */
.trial-modal{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;
}
.trial-modal[hidden]{display:none!important}
.trial-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(56,56,56,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.trial-modal__panel{
  position:relative;z-index:1;
  width:100%;max-width:440px;
  max-height:min(92vh,720px);
  overflow:auto;
  background:var(--paper);
  border-radius:20px 20px 0 0;
  padding:28px 22px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 40px rgba(90,61,52,.18);
  -webkit-overflow-scrolling:touch;
}
@media(min-width:520px){
  .trial-modal{align-items:center;padding:24px}
  .trial-modal__panel{
    border-radius:16px;
    padding:32px 28px 28px;
    max-height:min(88vh,680px);
  }
}
.trial-modal__close{
  position:absolute;top:12px;right:12px;
  width:40px;height:40px;border:none;border-radius:50%;
  background:var(--sand);color:var(--cocoa-deep);
  font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.trial-modal__close:hover{background:var(--line)}
.trial-modal__head{margin-bottom:18px;padding-right:36px}
.trial-modal__head h2{
  font-family:'Noto Serif TC',serif;font-size:1.35rem;font-weight:700;
  color:var(--cocoa-deep);margin:8px 0 10px;
}
.trial-modal__copy{
  font-size:.92rem;color:var(--muted);line-height:1.7;
}
.trial-modal__form .form-group select{
  font-size:.92rem;
}
.sticky-cta .sticky-info.js-open-trial{
  cursor:pointer;
}
html.trial-modal-open,
body.trial-modal-open{
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}


/* Mobile philosophy / section-head type */
@media (max-width: 680px) {
  .section-head { margin-bottom: 28px; }
  .section-head h2 { font-size: 1.4rem; margin-bottom: 12px; }
  .section-head .grey-sub {
    max-width: 100%;
    font-size: .95rem;
    line-height: 1.75;
    /* keep-all on iOS blocks CJK wrap → text runs off-screen */
    word-break: normal;
    line-break: auto;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }
  .why-grid { gap: 26px; }
  .why-item {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .why-item h3 { margin-bottom: 6px; }
  .why-item p {
    font-size: .92rem;
    line-height: 1.7;
    word-break: normal;
    line-break: auto;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    max-width: 100%;
  }
}


/* Mobile: never let body copy clip past the viewport */
@media (max-width: 680px) {
  .teacher-card,
  .teacher-card > *,
  .teacher-desc,
  .contact-list,
  .contact-list li,
  .section-inner,
  .signup-grid,
  .signup-grid > * {
    min-width: 0;
    max-width: 100%;
  }
  .teacher-desc,
  .contact-list li {
    word-break: normal;
    line-break: auto;
    overflow-wrap: anywhere;
  }
  /* Long nowrap phrases must yield on narrow screens */
  .nowrap {
    white-space: normal;
  }
}

/* Phone + iPad: long nowrap / keep-all must not clip past the column */
@media (max-width: 1400px) {
  .course-facts .nowrap,
  .course-row .nowrap,
  .lead .nowrap,
  .brand-block-head .nowrap,
  .grey-sub .nowrap,
  .timetable-note .nowrap,
  .course-clarify .nowrap,
  .path-secondary .nowrap {
    white-space: normal;
  }
  .course-facts li,
  .course-row .lead,
  .course-row p,
  .course-row li,
  .brand-block-head p,
  .suits p {
    overflow-wrap: anywhere;
    word-break: normal !important;
    line-break: auto;
  }
  .course-row,
  .course-row > *,
  .course-facts,
  .course-track,
  .split,
  .suits {
    min-width: 0;
    max-width: 100%;
  }
  .section-inner {
    overflow-x: clip;
  }
}


/* Visit / map */
.visit-grid{
  display:grid;gap:22px;align-items:start;
}
@media(min-width:720px){
  .visit-grid{grid-template-columns:1.15fr .85fr;gap:28px}
}
.visit-map{
  position:relative;width:100%;min-width:0;
  border-radius:var(--radius);overflow:hidden;
  background:var(--sand);
  aspect-ratio:4/3;
  box-shadow:0 1px 0 rgba(60,40,20,.06);
}
.visit-map iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.visit-steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:12px;
}
.visit-steps li{
  display:grid;grid-template-columns:28px 1fr;gap:10px;
  align-items:start;
  color:var(--muted);font-size:.95rem;line-height:1.65;
}
.visit-steps .n{
  width:28px;height:28px;border-radius:50%;
  background:var(--sky);color:var(--cocoa-deep);
  font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.visit-note{
  margin-top:14px;font-size:.9rem;color:var(--muted);line-height:1.65;
}
.visit-actions{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:680px){
  .visit-map{aspect-ratio:1/1}
  .visit-steps li{font-size:.92rem}
}

@media(max-width:760px){.cta-row{display:flex!important;flex-direction:column!important;align-items:center!important;gap:14px!important}.cta-row>a{width:min(300px,86vw)!important;text-align:center!important;justify-content:center!important;margin:0!important}}
.to-top{position:fixed;right:16px;bottom:calc(var(--sticky-h) + 14px + env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;background:#fff;color:#7fb3c9;border:none;box-shadow:0 3px 12px rgba(0,0,0,.15);font-size:22px;line-height:44px;text-align:center;cursor:pointer;z-index:1200;opacity:0;pointer-events:none;transition:opacity .25s}
.to-top.show{opacity:1;pointer-events:auto}

.moon-copy p{margin:0 0 8px}

.wa-inline{color:#1f8f4e;text-decoration:underline;font-weight:600}