/* === contact.css — Contact PAGE variant (ported from the reference) ===
   Every rule scoped under .yh-contact-page so the HOME contact section
   (same widget, layout "home") keeps its shared.css styling untouched. */

/* === contact.css — styles specific to the Contact page (extracted) ===
   Globals, navbar, footer, fonts, reveal stay in css/style.css *//* =====================================================================
   CONTACT
   ===================================================================== */.yh-contact-page .contact {
  background: var(--c-cream);
  padding: 8rem 0;
  position: relative;
}/* On the contact page the .page-hero handles the top heading + nav clearance */.yh-contact-page .contact { padding-top: clamp(1rem, 3vw, 2.5rem); }.yh-contact-page .contact__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: stretch;
}.yh-contact-page .contact__intro { padding-top: 1rem; }.yh-contact-page .contact__eyebrow {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-rust);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}.yh-contact-page .contact__eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--c-rust);
}.yh-contact-page .contact__title {
  font-family: var(--font-en-serif);
  font-size: clamp(1.75rem, 2.6vw + 0.5rem, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
}.yh-contact-page .contact__title em { font-style: italic; }.yh-contact-page .contact__title-th {
  font-family: var(--font-th-serif);
  font-size: clamp(1.5rem, 2.3vw + 0.4rem, 3rem);
  line-height: 1.1;
}.yh-contact-page .contact__text {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--ink-muted);
  margin-bottom: 2.5rem;
  font-weight: 300;
}/* Spread the rows evenly so the form fills the full column height
   (top row stays at the top, SEND lands at the bottom) */.yh-contact-page .contact__form, .yh-contact-page form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: space-between;
}.yh-contact-page .contact__form .btn-submit { margin-top: 0; }.yh-contact-page .field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}.yh-contact-page .field__label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}.yh-contact-page .field__input, .yh-contact-page .field__select, .yh-contact-page .field__textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.75rem 0;
  font-family: var(--font-en-serif);
  font-size: 1.125rem;
  color: var(--ink);
  outline: none;
  transition: border-color var(--t-base) var(--ease);
  appearance: none;
  border-radius: 0;
  width: 100%;
}.yh-contact-page .field__textarea { resize: vertical; min-height: 100px; font-family: var(--font-sans); font-weight: 300; }.yh-contact-page .field__input:focus, .yh-contact-page .field__select:focus, .yh-contact-page .field__textarea:focus { border-bottom-color: var(--c-rust); }.yh-contact-page .field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}.yh-contact-page .btn-submit {
  background: var(--c-rust);
  color: var(--c-cream);
  border: none;
  padding: 1.25rem 2rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 1rem;
  transition: background var(--t-base) var(--ease);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  border-radius: 0;
}.yh-contact-page .btn-submit:hover,.yh-contact-page .btn-submit:focus { background: var(--c-black); box-shadow:none;}.yh-contact-page .btn-submit__arrow { transition: transform var(--t-base) var(--ease); }.yh-contact-page .btn-submit:hover .btn-submit__arrow { transform: translateX(4px); }/* =====================================================================
   FLOATING ACTION BUTTONS — Social contact (bottom-right)
   ===================================================================== */.yh-contact-page .fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 90;
}/* === TYPOGRAPHY OVERRIDES (Headline / Sub-headline / Body) === *//* Headline  → Old Standard TT / Regular 400 (EN & TH)
   Sub-head  → Anuphan / Medium 500 (EN & TH) — eyebrows, leads, taglines
   Body      → Anuphan / Light 300 (EN & TH)  — paragraphs & card bodies   *//* --- HEADLINES → split by language --- *//* EN: Old Standard TT Regular 400 */.yh-contact-page .hero__display, .yh-contact-page .advantages__title, .yh-contact-page .services__title, .yh-contact-page .services__title-line, .yh-contact-page .journal__title, .yh-contact-page .article__title, .yh-contact-page .contact__title, .yh-contact-page .team__title, .yh-contact-page .gallery__title, .yh-contact-page .testimonials__title, .yh-contact-page .advantage__name, .yh-contact-page .gcard__name, .yh-contact-page .service-card__name, .yh-contact-page .team-card__name, .yh-contact-page .spread__name {
  font-family: "Old Standard TT", Georgia, serif !important;
  font-weight: 400 !important;
}/* TH: JS Pumpuang Regular 400 */.yh-contact-page .hero__display-th, .yh-contact-page .advantages__title-th, .yh-contact-page .services__title-th, .yh-contact-page .journal__title-th, .yh-contact-page .article__title-th, .yh-contact-page .contact__title-th, .yh-contact-page .team__title-th, .yh-contact-page .gallery__title-th, .yh-contact-page .testimonials__title-th, .yh-contact-page .advantage__name-th, .yh-contact-page .gcard__name-th, .yh-contact-page .service-card__name-th, .yh-contact-page .team-card__name-th {
  font-family: "JS Pumpuang", "Old Standard TT", serif !important;
  font-weight: 400 !important;
}/* --- SUB-HEADLINES → Anuphan Medium 500 (both EN and TH), upright --- */.yh-contact-page .eyebrow, .yh-contact-page .advantages__eyebrow, .yh-contact-page .services__eyebrow, .yh-contact-page .journal__eyebrow, .yh-contact-page .contact__eyebrow, .yh-contact-page .team__eyebrow, .yh-contact-page .testimonials__eyebrow, .yh-contact-page .footer__connect-eyebrow, .yh-contact-page .prologue__label-text, .yh-contact-page .show-th.prologue__label-text, .yh-contact-page .hero__tagline, .yh-contact-page .services__lead, .yh-contact-page .services__lead-th, .yh-contact-page .footer__tagline {
  font-family: "Anuphan" !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  
}/* --- CONTACT DETAILS (phone / email / office) --- */.yh-contact-page .contact__details {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  border-top: 1px solid rgba(24,23,21,0.12);
  padding-top: 2rem;
}.yh-contact-page .contact__details li {
  display: grid;
  gap: 0.35rem;
  font-family: "Anuphan", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}.yh-contact-page .contact__details-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}.yh-contact-page .contact__details a {
  color: var(--c-rust, #9c5a3c);
  text-decoration: none;
}.yh-contact-page .contact__details a:hover { text-decoration: underline; }/* --- CONTACT SOCIAL --- */.yh-contact-page .contact__social {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}.yh-contact-page .contact__social-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}.yh-contact-page .contact__social-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}.yh-contact-page .contact__social-row a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(24,23,21,0.18);
  border-radius: 50%;
  color: var(--c-black);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}.yh-contact-page .contact__social-row a svg { width: 19px; height: 19px; }.yh-contact-page .contact__social-row a:hover {
  background: var(--c-rust);
  border-color: var(--c-rust);
  color: var(--c-cream);
}/* --- CONTACT MAP (full-width, spans both columns at the bottom) --- */.yh-contact-page .contact__map {
  grid-column: 1 / -1;
  margin-top: 4rem;
  border-top: 1px solid rgba(24,23,21,0.12);
  padding-top: 2.5rem;
}.yh-contact-page .contact__map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 2px;
}

@media (max-width: 1240px) { .yh-contact-page .contact__inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 9vw, 3.5rem);}}
@media (max-width: 720px) {.yh-contact-page .contact__map { margin-top: 2.5rem; }.yh-contact-page .contact__map iframe { height: 260px; }
}/* --- BODY TEXT → Anuphan Light 300 (both EN and TH) --- */.yh-contact-page .advantage__body, .yh-contact-page .advantage__text, .yh-contact-page .prologue__body, .yh-contact-page .prologue__text, .yh-contact-page .contact__text, .yh-contact-page .spread__body, .yh-contact-page .article__excerpt, .yh-contact-page .article__excerpt-th, .yh-contact-page .service-card__body, .yh-contact-page .service-card__desc, .yh-contact-page .field__input, .yh-contact-page .field__textarea {
  font-family: "Anuphan", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 300 !important;
}/* Specific 16px size for body paragraphs (16 / Light 300) */.yh-contact-page .contact__text, .yh-contact-page .spread__body, .yh-contact-page .spread__body.show-en, .yh-contact-page .spread__body.show-th, .yh-contact-page .service-card__desc, .yh-contact-page .service-card__desc.show-en, .yh-contact-page .service-card__desc.show-th, .yh-contact-page .prologue__text, .yh-contact-page .prologue__text.show-en, .yh-contact-page .prologue__text.show-th, .yh-contact-page .services__lead, .yh-contact-page .services__lead.show-en, .yh-contact-page .services__lead-th, .yh-contact-page .services__lead.show-th {
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
}/* Drop the form down so its first row lines up with the headline (not the eyebrow) */.yh-contact-page .contact__inner > .contact__form { padding-top: 4.5rem; }@media (max-width: 720px) {/* มือถือ: ยุบเป็นคอลัมน์เดียว ฟอร์มลงมาต่อจากข้อมูลติดต่อ */.yh-contact-page .contact__inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 9vw, 3.5rem); }.yh-contact-page .contact__inner > .contact__form { padding-top: 0; }.yh-contact-page .field__row { grid-template-columns: 1fr; }
}/* =====================================================================
   PDF REVISIONS (2026-06) — Anuphan Medium for requested Thai headings,
   About stats, team arrows, article follow, contact + footer additions
   ===================================================================== *//* Thai headings → Anuphan Medium 500 (Team, "people behind", Why YH) */.yh-contact-page .team__title-th, .yh-contact-page .team-card__name-th, .yh-contact-page .team-card__role-th, .yh-contact-page .advantages__title-th, .yh-contact-page .advantage__name-th, .yh-contact-page .team__title-th em, .yh-contact-page .advantages__title-th em, .yh-contact-page .advantage__name-th em {
  font-family: "Anuphan", system-ui, "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
}/* Contact — subtitle, email, map link */.yh-contact-page .contact__subtitle {
  font-family: var(--font-en-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  margin: 0.5rem 0 1.25rem;
  opacity: 0.9;
}.yh-contact-page .contact__subtitle .show-th { font-family: "Anuphan", sans-serif; font-style: normal; }.yh-contact-page .contact__email {
  margin-top: 1.25rem;
  font-family: "Anuphan", system-ui, sans-serif;
  font-weight: 500;
}.yh-contact-page .contact__email a {
  color: var(--c-rust, #9c5a3c);
  text-decoration: none;
}.yh-contact-page .contact__email a:hover { text-decoration: underline; }.yh-contact-page .contact__map-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: "Anuphan", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--c-rust, #9c5a3c);
  text-decoration: none;
}.yh-contact-page .contact__map-link:hover { text-decoration: underline; }/* Thai headings follow the SAME format/size as their English counterparts —
   inherit size/line-height/letter-spacing from the shared heading; only the
   font is Anuphan + upright. Services Thai heading is kept on a single line. */.yh-contact-page .prologue__quote-th, .yh-contact-page .team__title-th, .yh-contact-page .advantages__title-th, .yh-contact-page .services__title-th, .yh-contact-page .gallery__title-th, .yh-contact-page .journal__title-th, .yh-contact-page .testimonials__title-th, .yh-contact-page .contact__title-th {
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-weight: inherit !important;
}/* Contact intro paragraph spans the full intro width */.yh-contact-page .contact__intro .contact__text { max-width: 100% !important; }/* Thai headings use JS Pumpuang (loaded from assets/fonts/) */.yh-contact-page .hero__display-th, .yh-contact-page .hero__display-th em, .yh-contact-page .prologue__quote-th, .yh-contact-page .prologue__quote-th em, .yh-contact-page .team__title-th, .yh-contact-page .team__title-th em, .yh-contact-page .advantages__title-th, .yh-contact-page .advantages__title-th em, .yh-contact-page .services__title-th, .yh-contact-page .services__title-th em, .yh-contact-page .gallery__title-th, .yh-contact-page .gallery__title-th em, .yh-contact-page .journal__title-th, .yh-contact-page .journal__title-th em, .yh-contact-page .testimonials__title-th, .yh-contact-page .testimonials__title-th em, .yh-contact-page .contact__title-th, .yh-contact-page .contact__title-th em {
  font-family: "JS Pumpuang", "Old Standard TT", serif !important;
}