/* ============================================================
   mobile.css — shared responsive overrides for all 12 pages
   Applied via <link> after each page's inline <style>.
   Uses !important to win against page-specific inline rules.
   ============================================================ */

/* Default: hide a hamburger button until needed at the breakpoint */
.nav-mobile-toggle { display: none; }

@media (max-width: 900px) {

  /* ───── Layout containers ───── */
  .wrap, .wrap-narrow {
    padding: 0 20px !important;
    max-width: 100% !important;
  }

  /* ───── Nav ───── */
  .nav {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .nav .logo b { font-size: 18px !important; }
  .nav .logo .yr { display: none !important; }
  .nav .gw-mark { width: 22px !important; height: 22px !important; }
  .nav-links {
    order: 3 !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
    margin: 0 -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    font-size: 10px !important;
    padding: 8px 10px !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .nav .btn,
  .nav a.btn-tomato,
  .nav a.btn-ink {
    padding: 8px 14px !important;
    font-size: 10px !important;
    margin-left: auto !important;
  }

  /* ───── Section spacing ───── */
  .sec { padding: 56px 0 !important; }

  /* ───── Hero ───── */
  .hero, .art-hero {
    padding: 110px 0 32px !important;
  }
  .hero-main { padding: 32px 0 !important; }
  .hero-cluster {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-top: 40px !important;
  }
  .hero-h1 { font-size: 56px !important; line-height: 1.02 !important; }
  .art-h1 { font-size: 52px !important; line-height: 1.05 !important; }
  .hero-h1 .out { -webkit-text-stroke: 2px var(--ink) !important; }
  .hero-stamp {
    width: 110px !important;
    height: 110px !important;
    font-size: 13px !important;
    top: 12px !important;
    right: 12px !important;
  }
  .hero-eyebrow .bar { width: 60px !important; }

  /* ───── Hero/Article meta bars (4-col → 2-col) ───── */
  .hero-meta-bar,
  .hero-meta,
  .art-meta-bar {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero-meta-bar > div,
  .hero-meta > div,
  .art-meta-bar > div {
    padding: 10px 14px !important;
    font-size: 10px !important;
  }
  .hero-meta-bar > div:nth-child(2n),
  .hero-meta > div:nth-child(2n),
  .art-meta-bar > div:nth-child(2n) {
    border-right: none !important;
  }
  .hero-meta-bar > div:nth-child(-n+2),
  .hero-meta > div:nth-child(-n+2),
  .art-meta-bar > div:nth-child(-n+2) {
    border-bottom: 1.5px solid var(--ink) !important;
  }
  .hero-meta-bar b, .hero-meta b, .art-meta-bar b { font-size: 14px !important; }

  /* Hero side columns stack */
  .hero-grid,
  .svc-hero-grid,
  .hero-cluster {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
  .hero-right,
  .svc-hero-right {
    border-left: none !important;
    border-top: 2px solid var(--ink) !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
  }
  .hero-info { padding-top: 16px !important; }
  .hero-cta { flex-wrap: wrap !important; }
  .hero-cta .btn { font-size: 11px !important; padding: 10px 16px !important; }

  /* ───── Marquees: smaller text ───── */
  .marquee { font-size: 28px !important; padding: 14px 0 !important; }
  .mq-divider-track { font-size: 18px !important; }

  /* ───── Section header (3-col → stacked) ───── */
  .sec-h {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 32px !important;
    padding-bottom: 16px !important;
  }
  .sec-num { font-size: 56px !important; }
  .sec-title { font-size: 38px !important; line-height: 1.08 !important; }

  /* ───── Service rows (TOP) ───── */
  .svc {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 28px 0 !important;
  }
  .svc:hover { padding: 28px 16px !important; }
  .svc-num { font-size: 56px !important; }
  .svc-title { font-size: 24px !important; }
  .svc-body { font-size: 14px !important; }
  .svc-go { width: 56px !important; height: 56px !important; font-size: 18px !important; margin-left: 0 !important; }

  /* ───── Strengths (3-col → 1-col) ───── */
  .str-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .str { min-height: 280px !important; padding: 28px 24px !important; }
  .str-num { font-size: 120px !important; }
  .str h3 { font-size: 22px !important; }
  .str .deco { font-size: 110px !important; }

  /* ───── Numbers band (4-col → 2-col) ───── */
  .nums-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .nm .v { font-size: 72px !important; }
  .nm .v sup { font-size: 22px !important; }

  /* 5-col Numbers (works.html) → 2-col */
  .nums-band .nums-grid:not(.cols-4) { grid-template-columns: 1fr 1fr !important; }

  /* ───── Voice (TOP) ───── */
  .voice-card {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .voice::before { font-size: 180px !important; left: 24px !important; }
  .voice-text q { font-size: 28px !important; line-height: 1.4 !important; }

  /* ───── CTA ───── */
  .cta, .art-cta { padding: 80px 0 !important; }
  .cta h2 { font-size: 44px !important; line-height: 1.05 !important; }
  .art-cta h2 { font-size: 38px !important; line-height: 1.1 !important; }
  .cta-mark { font-size: 200px !important; }
  .art-cta::before { font-size: 180px !important; }
  .cta-btns, .art-cta-btns { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .cta-btns .btn, .art-cta-btns .btn { justify-content: center !important; }

  /* ───── Footer ───── */
  .ftr-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .ftr-brand { grid-column: 1 / -1 !important; }
  .ftr-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* ───── Article hero (sub pages) ───── */
  .art-h1 .quote-mark, .art-h1 em { display: inline-block !important; }
  .art-sub { font-size: 16px !important; line-height: 1.7 !important; }

  /* ───── Greeting page ───── */
  .art-lead-grid, .lead-photo, .lead-text {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .lead-photo { max-width: 400px !important; }
  .lead-text .lt-pull { font-size: 22px !important; line-height: 1.55 !important; }
  .art-body p { font-size: 16px !important; line-height: 1.95 !important; }
  .pull-quote { padding: 28px 24px !important; font-size: 22px !important; line-height: 1.45 !important; }
  .pull-quote::before { font-size: 64px !important; left: 8px !important; }
  .pull-quote .inner { padding-left: 32px !important; }
  .signature { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }

  /* ───── Company page ───── */
  .philo-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .philo-statement { font-size: 36px !important; line-height: 1.2 !important; }
  .philo-body { font-size: 15px !important; line-height: 1.9 !important; }
  .outline-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 16px 0 !important;
  }
  .outline-row .lbl-en { text-align: left !important; }
  .outline-row dd { font-size: 15px !important; }

  /* Timeline (company) */
  .tl-list { margin-left: 0 !important; padding-left: 24px !important; }
  .tl-item {
    grid-template-columns: 80px 1fr !important;
    gap: 20px !important;
    padding: 24px 0 !important;
  }
  .tl-item::before { left: -31px !important; top: 28px !important; }
  .tl-year { font-size: 34px !important; }
  .tl-body h3 { font-size: 19px !important; }
  .tl-tag { grid-column: 1 / -1 !important; text-align: left !important; padding-top: 0 !important; }

  /* Access cards (company / contact) */
  .access-grid, .access-head { grid-template-columns: 1fr !important; gap: 16px !important; }
  .access-card { padding: 24px 24px !important; }
  .access-card h3 { font-size: 22px !important; }

  /* ───── Service detail pages: 4-card grids ───── */
  .offer-grid {
    grid-template-columns: 1fr !important;
  }
  .offer-card {
    border-right: none !important;
    border-bottom: 1.5px solid var(--ink) !important;
    padding: 32px 24px !important;
  }
  .offer-card:nth-child(2n) { border-right: none !important; }
  .offer-card:nth-child(n+3) { border-bottom: 1.5px solid var(--ink) !important; }
  .offer-card:last-child { border-bottom: none !important; }
  .offer-card .num { font-size: 56px !important; }
  .offer-card h3 { font-size: 24px !important; }
  .offer-card ul { grid-template-columns: 1fr !important; }

  /* Offer list rows (dx.html / tutoring.html / ec.html / training.html) */
  .offer, .approach {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 28px 0 !important;
  }
  .offer:hover { padding: 28px 16px !important; }
  .offer-num, .approach-num { font-size: 56px !important; }
  .offer-title h3, .approach-title h3 { font-size: 22px !important; }
  .offer-body, .approach-body { font-size: 14px !important; }
  .offer-arrow, .offer-go {
    width: 48px !important;
    height: 48px !important;
    font-size: 18px !important;
    margin-left: 0 !important;
  }

  /* Pain points (dx / tutoring / backoffice) */
  .pains-grid, .worry-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .pain {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 24px 24px !important;
  }
  .pain h3 { font-size: 18px !important; }

  /* Process (5-step) — stack vertically */
  .proc-row {
    grid-template-columns: 1fr !important;
  }
  .proc-step {
    border-right: none !important;
    border-bottom: 1.5px solid rgba(255,255,255,.18) !important;
    padding: 24px 20px !important;
  }
  .proc-step:last-child { border-bottom: none !important; }
  /* For light-background variants */
  .tutoring-process .proc-step,
  .sec[class*="process"] .proc-step { border-bottom-color: rgba(21,34,79,.18) !important; }

  /* Pricing (3-col → 1-col) */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .plan { padding: 28px 24px !important; }
  .plan h3 { font-size: 24px !important; }
  .plan .price { font-size: 48px !important; }

  /* Results / cases */
  .results-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .result-cell {
    padding: 20px 16px !important;
    border-right: none !important;
    border-bottom: 1.5px solid var(--ink) !important;
  }
  .result-cell .v { font-size: 56px !important; }

  /* Voices / cases (3-col → 1-col) */
  .voices-grid, .case-grid, .case-strip .case-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .voice-card { padding: 24px 20px !important; }
  .voice-card::before { font-size: 72px !important; }
  .voice-card h3 { font-size: 19px !important; }
  .case h3 { font-size: 19px !important; }

  /* Schools strip */
  .schools span { font-size: 13px !important; padding: 6px 12px !important; }

  /* ───── EC page ───── */
  .why-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .why-cell .v { font-size: 64px !important; }
  .why-cell h3 { font-size: 19px !important; }
  .platforms-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .platforms-head { grid-template-columns: 1fr !important; gap: 16px !important; }
  .pf { min-height: 90px !important; padding: 14px 14px 16px !important; }
  .pf h4 { font-size: 15px !important; }
  .case .case-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .case-title { font-size: 30px !important; line-height: 1.2 !important; }
  .case-stats { padding: 24px !important; grid-template-columns: 1fr 1fr !important; }
  .case-stat .v { font-size: 40px !important; }

  /* ───── Training page ───── */
  .teacher-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .teacher-photo { max-width: 400px !important; }
  .teacher-text h2 { font-size: 30px !important; line-height: 1.3 !important; }
  .teacher-creds { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
  .cred .v { font-size: 40px !important; }
  .insts-head, .topics-head { grid-template-columns: 1fr !important; gap: 12px !important; }
  .topics-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .topic { min-height: 140px !important; padding: 20px 22px !important; }
  .insts-block-head { gap: 12px !important; }
  .insts-block-head h3 { font-size: 19px !important; }

  /* ───── Tutoring page ───── */
  .worries-intro { font-size: 19px !important; line-height: 1.7 !important; }
  .worries-bridge { font-size: 22px !important; line-height: 1.5 !important; }
  .worry-grid { grid-template-columns: 1fr !important; }
  .worry .qm { font-size: 48px !important; }
  .worry .qt { font-size: 17px !important; line-height: 1.6 !important; }

  /* ───── FAQ ───── */
  .faq-item {
    grid-template-columns: 48px 1fr !important;
    gap: 16px !important;
    padding: 22px 0 !important;
  }
  .faq-q .num { font-size: 28px !important; }
  .faq-text h4 { font-size: 18px !important; line-height: 1.45 !important; }
  .faq-text .a { font-size: 14px !important; line-height: 1.85 !important; padding-left: 28px !important; }

  /* ───── Contact form ───── */
  .entries-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .entry { min-height: 0 !important; padding: 24px 24px !important; }
  .form-wrap { font-size: 14px !important; }
  .form-row {
    grid-template-columns: 1fr !important;
  }
  .form-row .lbl {
    border-right: none !important;
    border-bottom: 1.5px solid var(--ink) !important;
    padding: 16px 20px !important;
  }
  .form-row .field { padding: 20px !important; }
  .form-row .lbl .ja { font-size: 15px !important; }
  .cat-radios, .topic-checks { grid-template-columns: 1fr !important; gap: 8px !important; }
  .cat-radio label { padding: 12px 16px !important; }
  .consent { padding: 20px !important; }
  .submit-row {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 20px !important;
    gap: 14px !important;
  }
  .submit-btn { width: 100% !important; }
  .channels-grid { grid-template-columns: 1fr !important; }
  .channel {
    border-right: none !important;
    border-bottom: 1.5px solid rgba(255,255,255,.18) !important;
    padding: 24px 20px !important;
  }
  .channel:last-child { border-bottom: none !important; }

  /* ───── Works / News ───── */
  .filters {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 16px !important;
    margin: 0 -20px 24px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .filter { flex-shrink: 0 !important; font-size: 10px !important; padding: 8px 12px !important; }

  .works-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .work { min-height: 0 !important; padding: 24px 24px !important; }
  .work h3 { font-size: 19px !important; }

  .feed-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .feed-head { grid-template-columns: 1fr !important; gap: 12px !important; }
  .sidebar { position: static !important; }
  .item {
    grid-template-columns: 96px 76px 1fr !important;
    gap: 12px !important;
    padding: 16px 0 !important;
  }
  .item-arrow { display: none !important; }
  .item-title { font-size: 15px !important; line-height: 1.5 !important; }
  .item-date { font-size: 18px !important; }
  .item-tag { font-size: 8px !important; padding: 4px 6px !important; }

  /* Media cards */
  .media-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .media-card { min-height: 0 !important; padding: 18px 18px 20px !important; }
  .media-card .yr { font-size: 28px !important; }
  .media-card h4 { font-size: 15px !important; }

  /* Other services teaser */
  .os-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .os { min-height: 120px !important; padding: 18px 18px 20px !important; }

  /* ───── Privacy / generic intro / TOC ───── */
  .intro-grid, .toc-wrap { grid-template-columns: 1fr !important; gap: 16px !important; }
  .toc-list { grid-template-columns: 1fr !important; }
  .clause-head { gap: 14px !important; }
  .clause-num { font-size: 36px !important; }
  .clause h2 { font-size: 24px !important; line-height: 1.3 !important; }
  .clause p { font-size: 14px !important; line-height: 1.95 !important; }
  .sign-grid { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .sign-grid .rep { text-align: left !important; font-size: 20px !important; }
  .body-wrap { padding: 0 20px !important; }

  /* ───── Sitemap (sitemap.html) ───── */
  .head {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .head .r { text-align: left !important; max-width: 100% !important; }
  .branches {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .branches::before { display: none !important; }
  .branch::before { display: none !important; }
  .timeline { grid-template-columns: 1fr 1fr !important; }
  .stage { min-height: 0 !important; padding: 14px !important; }
  .goals { grid-template-columns: 1fr !important; }
}

/* ───── Narrower phones ───── */
@media (max-width: 480px) {
  .hero-h1 { font-size: 46px !important; }
  .art-h1 { font-size: 40px !important; }
  .sec-title { font-size: 32px !important; }
  .results-grid, .media-grid, .os-grid { grid-template-columns: 1fr !important; }
  .case-stats { grid-template-columns: 1fr !important; }
  .platforms-grid { grid-template-columns: 1fr !important; }
  .ftr-grid { grid-template-columns: 1fr !important; }
  .nav .btn { font-size: 9px !important; padding: 6px 10px !important; }
  .marquee { font-size: 22px !important; }
  .mq-divider-track { font-size: 14px !important; }
  .branches, .timeline { grid-template-columns: 1fr !important; }
  .teacher-creds { grid-template-columns: 1fr !important; }
}