@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@400;500;600&family=Sarabun:wght@300;400;500&display=swap'); /* ── BILINGUAL HEADING — secondary (alt-language) line ── */ .bi-alt { display: block; font-weight: 400; color: var(--ink-muted); line-height: 1.35; margin-top: 0.55rem; letter-spacing: 0; } .hero-headline .bi-alt { font-size: 0.4em; } .page-title .bi-alt { font-size: 0.5em; } .col-heading .bi-alt { font-size: 0.62em; } .bi-alt.en { font-family: var(--font-serif); font-style: italic; } .bi-alt.th { font-family: 'Noto Serif Thai', serif; font-style: normal; } /* ── THAI-PAGE TYPOGRAPHY (scoped to ) ── */ html[lang="th"] body { font-family: 'Sarabun', sans-serif; } html[lang="th"] .hero-headline, html[lang="th"] .page-title, html[lang="th"] .col-heading, html[lang="th"] .th-serif { font-family: 'Noto Serif Thai', serif; font-weight: 500; } html[lang="th"] .hero-body, html[lang="th"] .prose, html[lang="th"] .bullet-list li, html[lang="th"] .engagement-value, html[lang="th"] .challenge p, html[lang="th"] .contact-signal p { font-family: 'Sarabun', sans-serif; } html[lang="th"] .contact-signal p { font-style: normal; font-weight: 400; } /* Thai has no DM Mono glyphs — restyle the mono micro-labels */ html[lang="th"] .section-label, html[lang="th"] .engagement-label { font-family: 'Sarabun', sans-serif; } html[lang="th"] .engagement-label { text-transform: none; letter-spacing: 0.04em; } html[lang="th"] .cta-link { font-family: 'Sarabun', sans-serif; text-transform: none; letter-spacing: 0.03em; font-size: 0.95rem; } /* keep the English secondary line in Cormorant even on Thai pages */ html[lang="th"] .bi-alt.en { font-family: var(--font-serif); font-style: italic; } html[lang="th"] .challenge-lead { font-family: 'Noto Serif Thai', serif; font-weight: 500; } /* ── CHALLENGE BLOCKS (Coaching — "Where coaching earns its place") ── */ .challenge { border-top: 1px solid var(--rule); padding: 1.6rem 0; } .challenge:last-child { border-bottom: 1px solid var(--rule); } .challenge-lead { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.4; color: var(--ink); margin-bottom: 0.5rem; } .challenge p { font-size: 1rem; line-height: 1.75; color: var(--ink-mid); } /* ── LANGUAGE SWITCH IN NAV ── */ .nav-right { display: flex; align-items: center; gap: 1.6rem; } .nav-lang { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .nav-lang a { color: var(--ink-faint); text-decoration: none; transition: color 0.2s; } .nav-lang a:hover { color: var(--ink); } .nav-lang .current { color: var(--red); } .nav-lang .sep { color: var(--ink-faint); } .nav-divider { width: 1px; height: 14px; background: rgba(26, 24, 20, 0.18); display: inline-block; } @media (max-width: 768px) { .nav-right { gap: 1rem; } .nav-divider { display: none; } } /* ══════════════════════════════════════════════════════════════════ HEROES + LEAD IMAGE (added 14 Aug 2026 — landing + resume rebuild) ══════════════════════════════════════════════════════════════════ */ /* ── Credo / voice hero (landing pull-quote + resume "A place to stand") ── */ .credo-hero{ border-left:2px solid var(--red); padding:0.2rem 0 0.3rem 2rem; margin:0 0 3.5rem; max-width:760px; } .credo-hero p{ font-family:var(--font-serif); font-weight:300; font-size:clamp(1.55rem,2.9vw,2.25rem); line-height:1.42; color:var(--ink); letter-spacing:-0.005em; margin:0; } .credo-hero p + p{margin-top:1.3rem;} .credo-hero .lift{color:var(--red);} .credo-eyebrow{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1.4rem; } .credo-eyebrow .alt-en{ display:block; font-family:var(--font-serif); font-style:italic; font-size:0.95rem; letter-spacing:0.01em; color:var(--ink-muted); text-transform:none; margin-top:0.4rem; } /* ── Resume hero: portrait beside the credo, bottom-aligned to its rule ── */ .hero-stand{ display:grid; grid-template-columns:270px 1fr; gap:3rem; align-items:end; margin-bottom:1.2rem; } .hero-stand .credo-hero{margin-bottom:0;max-width:640px;padding-left:1.8rem;} .hero-stand .credo-hero p{ font-size:clamp(1.3rem,2.1vw,1.72rem); line-height:1.55; color:var(--ink-mid); } .hero-portrait{width:270px;} .hero-portrait img{display:block;width:100%;height:auto;border-radius:3px;} .resume-resolve{height:1.2rem;} /* ── Landing lead image + quiet photographer credit ── */ .lead-figure{margin:0 0 3.5rem;} .lead-figure img{display:block;width:100%;height:auto;} .lead-cap{margin-top:0.75rem;padding-left:0.8rem;border-left:2px solid var(--red);} .lead-cap .by{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em; color:var(--ink-faint); text-transform:uppercase; } /* ── Thai typography for the new hero components ── */ html[lang="th"] .credo-hero p{font-family:'Noto Serif Thai',serif;font-weight:400;} /* Home hero (index layout rebuild) — uniform Thai serif, matching EN home-lead */ html[lang="th"] .home-lead h1, html[lang="th"] .home-lead p { font-family: 'Noto Serif Thai', serif; } html[lang="th"] .hero-stand .credo-hero p{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.75;} html[lang="th"] .credo-eyebrow{font-family:'Sarabun',sans-serif;} html[lang="th"] .lead-cap .by{font-family:'Sarabun',sans-serif;} /* ── ENQUIRY FORM — Thai typography (no DM Mono glyphs; restyle to Sarabun/Noto) ── */ html[lang="th"] .form-intro { font-family: 'Noto Serif Thai', serif; font-style: normal; font-weight: 400; font-size: 1.15rem; } html[lang="th"] .enquiry-form label, html[lang="th"] .enquiry-form .field-label { font-family: 'Sarabun', sans-serif; text-transform: none; letter-spacing: 0.02em; font-size: 0.9rem; color: var(--ink); } html[lang="th"] .enquiry-form .opt { font-size: 0.8rem; color: var(--ink-faint); } html[lang="th"] .enquiry-form input, html[lang="th"] .enquiry-form textarea, html[lang="th"] .enquiry-form .radio { font-family: 'Sarabun', sans-serif; } html[lang="th"] .enquiry-form .field-help { font-family: 'Sarabun', sans-serif; font-style: normal; font-size: 0.88rem; } html[lang="th"] .form-submit { font-family: 'Sarabun', sans-serif; text-transform: none; letter-spacing: 0.02em; font-size: 0.95rem; } html[lang="th"] .form-confirm p { font-family: 'Sarabun', sans-serif; font-style: normal; font-size: 1.05rem; } html[lang="th"] .form-confirm a { font-family: 'Sarabun', sans-serif; font-size: 0.9rem; } html[lang="th"] .form-status { font-family: 'Sarabun', sans-serif; font-style: normal; } /* DESIGN-CHANGE COMPONENTS Thai typography (8 Sep) */ html[lang="th"] .stand-block p { font-family: 'Noto Serif Thai', serif; font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.7; } html[lang="th"] .home-cta { font-family: 'Sarabun', sans-serif; text-transform: none; letter-spacing: 0.03em; font-size: 0.9rem; } /* ── Responsive ── */ @media (max-width:720px){ .hero-stand{grid-template-columns:1fr;gap:1.4rem;} .hero-portrait{width:190px;} .credo-hero{padding-left:1.3rem;} }