:root {
  /* Surfaces. Warmer than the previous #FDFCFA so the page reads as paper rather
     than a lit screen — the cheapest way to make a health site feel less clinical. */
  --bg: #FBF9F5;
  --card: #FFFFFF;
  --tint: #F1F5F2;

  /* One brand colour, one accent. Terracotta is punctuation, never a second brand
     colour. Both text values verified >= 4.5:1 against --bg. */
  --sage-d: #1F6F5C;        /* 5.85:1 */
  --sage-deep: #14503F;
  --sage: #4FA88C;
  --sage-wash: rgba(31,111,92,.07);
  --terra: #A85A2E;         /* 4.81:1 — darkened from #C97B4A, which failed AA at label sizes */
  --terra-bright: #C97B4A;  /* decorative marks only, never text */

  --ink: #1A211C;           /* headlines */
  --body: #4A544B;          /* 7.48:1 — long-form reading */
  --muted: #6B756C;         /* 4.68:1 — secondary only */
  --line: rgba(26,33,28,.09);

  /* Shadows carry the page hue instead of neutral black. Black shadows over warm
     cream read as dirt; green-tinted ones read as depth. */
  --sh-sm: 0 1px 2px rgba(26,45,36,.05), 0 2px 8px rgba(26,45,36,.04);
  --sh-md: 0 4px 14px rgba(26,45,36,.07), 0 14px 34px rgba(26,45,36,.05);
  --sh-lg: 0 10px 28px rgba(26,45,36,.09), 0 28px 64px rgba(26,45,36,.07);

  /* Type scale. Thai needs more leading than Latin at the same size, hence body
     line-height 1.78 rather than the usual 1.5-1.6. */
  --fs-display: clamp(40px, 6vw, 74px);
  --fs-h2: clamp(29px, 3.8vw, 46px);
  --fs-h3: clamp(20px, 1.5vw, 23px);
  --fs-lead: clamp(19px, 1.5vw, 22px);
  --fs-body: 19px;
  --fs-label: 14.5px;

  /* --- 2026-09-02 ดึงมาจาก design-system/styles.css ให้ตรงระบบ เจ้าของสั่งยึดระบบเป็นหลัก --- */
  --font-display: 'Sarabun', sans-serif;
  --font-body: 'Sarabun', sans-serif;
  --radius: 22px;
  /* ทอง ใช้บนพื้นเข้มเท่านั้น --gold บนครีมได้ 1.34:1 อ่านไม่ออก */
  --gold: #E8D9A8;            /* 6.63:1 บน --sage-deep */
  --gold-text: #8A6614;       /* 5.00:1 บน --bg ใช้เมื่อจำเป็นต้องมีทองบนพื้นสว่าง */
  --success: #2F7D3F; --warning: #8F6310;
  --error: #B3261E;   --info: #2B6A8F;
  /* สเกลความลึก 4 ระดับของระบบ --sh-* ยังอยู่เพื่อความเข้ากันได้ย้อนหลัง */
  --e1: 0 1px 2px rgba(26,45,36,.05);
  --e2: 0 2px 6px rgba(26,45,36,.06), 0 6px 16px rgba(26,45,36,.05);
  --e3: 0 4px 14px rgba(26,45,36,.07), 0 14px 34px rgba(26,45,36,.06);
  --e4: 0 10px 28px rgba(26,45,36,.10), 0 30px 68px rgba(26,45,36,.08);
  --motion-dur: 620ms; --motion-ease: cubic-bezier(.22,.61,.36,1);


  /* Spacing scale. Every vertical gap below is drawn from this list. */
  --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { text-wrap: balance; color: var(--ink); }
p { text-wrap: pretty; }
.price-num { font-variant-numeric: tabular-nums; }
section, #about, #services, #contact { scroll-margin-top: 90px; }
h1, h2, h3, h4, .kicker, .price-num { font-family: var(--font-body); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Header + site nav */
header.site { position: sticky; top: 0; z-index: 50; width: 100%; background: var(--card); box-shadow: 0 1px 0 var(--line), 0 4px 16px rgba(42,51,44,.06); }
header.site .top { display: flex; justify-content: space-between; align-items: center; padding: 20px 48px; width: 100%; }
header.site .logo-row { display: flex; align-items: center; gap: 14px; }
header.site .logo-row img { height: 48px; width: auto; }
header.site .brand { font-family: var(--font-body); font-weight: 600; font-size: 22px; color: var(--sage-d); }
header.site .brand small { display: block; font-family: var(--font-body); font-weight: 300; font-size: 14.5px; color: var(--muted); }
header.site .phone { font-family: var(--font-body); font-weight: 600; font-size: 19px; color: var(--sage-d); text-decoration: none; display: block; }
header.site .phone small { display: block; font-weight: 400; font-size: 13.5px; color: var(--muted); }
header.site .right { display: flex; align-items: center; gap: 20px; }
@media (max-width: 900px) { header.site .top { padding: 18px 24px; } nav.site-nav { padding: 0 24px 14px; gap: 20px; } }
@media (max-width: 640px) { header.site .logo-row img { height: 38px; } }
nav.site-nav { width: 100%; padding: 0 48px 14px; display: flex; gap: 28px; flex-wrap: wrap; }
nav.site-nav a { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; }
nav.site-nav a:hover, nav.site-nav a.active { color: var(--sage-d); border-bottom-color: var(--terra); }

/* Hero — crossfading photo backdrop, text overlaid on top.
   Flat brand field, no photo layer. See the note on .hs-1 below. */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 56px 24px;
  overflow: hidden;
  background: #2A332C; /* holds the tint colour until the first photo decodes */
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center 62%; }

/* Slide 1 is the baseline poster: always visible, needs no JS.
   Slide 2 stacks ON TOP and fades in and out over it, so slide 1 never has to
   animate its own opacity — that removes any chance of a flash when the crossfade
   switches on, and keeps the two photos independent. */
.hs-1, .hs-2 { display: none; }

/* 2026-08-22: the crossfading photo hero is gone. Slide 1 and 2 were AI-generated;
   the only real photographs of the branches are 380x280 and 390x320, which cannot
   fill a 1440px hero without a 3.8x upscale. Those two now live at native size in
   the gallery, where they are sharp. Until real wide photographs exist the hero is
   a flat brand field: it claims nothing, and it is crisp on every screen. */
/* 2026-08-26: ได้รูปถ่ายจริงของศูนย์แล้ว (จาก video-pipeline/assets/photos/center)
   จึงกลับมาใช้รูปในฮีโร่ได้ ต่างจากรอบ AI ตรงที่นี่คือสถานที่จริง
   ม่านเขียวไล่สีทับอยู่บนรูปในกองเดียวกัน ไม่ต้องใช้ JS ไม่มีชั้นซ้อน
   ค่าความทึบมาจากการวัด dual-render ให้ตัวอักษรขาวผ่านเกณฑ์ทุกบรรทัด */
.hero {
  /* ม่านเดิมทึบ 88-94% จนรูปแทบไม่เหลือ ของเก่าเห็นรูปชัดกว่ามากและอุ่นกว่า
     รอบนี้เปิดให้บางลงและเติมโทนอุ่นเล็กน้อย แล้ววัดคอนทราสต์ซ้ำทุกบรรทัด */
  /* ม่านบางแบบเดียวกับเวอร์ชันเก่า (ดำโปร่ง ไม่ใช่เขียวทึบ) เพราะไฟล์รูปถูกแต่งให้
     เข้มและอิ่มมาแล้ว หน้าตาจึงอ่านเป็น "ภาพลานกลางจริง" ไม่ใช่ "พื้นสีเขียว" */
  /* 2026-09-16 รูปฮีโร่เวอร์ชันแต่งใหม่สว่างขึ้น (ตัวแบบ 158 -> 209) ทำให้ kicker
     ตกเกณฑ์ที่ 3.95 วัดสีพื้นจริงหลังตัวอักษรได้ 104,131,146 คำนวณว่าต้องเพิ่ม
     ม่านอีก .10 ตรงแถบนั้นจึงจะถึง 4.6 จึงเติมม่านบางเฉพาะแถบบนแบบเดียวกับมือถือ */
  background:
    linear-gradient(180deg, rgba(12,32,24,.18) 0%, rgba(12,32,24,.08) 26%,
                            rgba(12,32,24,0) 46%),
    linear-gradient(172deg, rgba(14,34,26,.34) 0%, rgba(14,34,26,.52) 42%,
                            rgba(12,40,30,.66) 100%),
    linear-gradient(200deg, rgba(201,169,97,.10) 0%, rgba(201,169,97,0) 62%),
    url('assets/site-photos/center_courtyard.webp') center 58% / cover no-repeat;
}
/* One hairline of terracotta along the bottom edge so the hero ends on the accent
   colour rather than just stopping. */
.hero::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: var(--terra-bright);
}

.hero-text { position: relative; z-index: 2; display: flex; flex-direction: column; max-width: 620px; margin: 0 auto; width: 100%; }
.kicker {
  font-weight: 600; font-size: var(--fs-label); letter-spacing: .14em;
  /* Was #F3C89A: terracotta over a photo measured under 2:1 and was unreadable
     at both breakpoints. White + a dark halo reads on any frame of the crossfade. */
  color: #F3C89A;   /* warm accent, now on a controlled flat field not a photo */
}
/* Display type: large, tight tracking, tight leading. The size jump between h1 and
   body is what separates an editorial page from a template — a timid h1 is the most
   common reason a competent layout still reads as generic. */
.hero h1 {
  font-weight: 700; font-size: var(--fs-display); color: #fff;
  line-height: 1.12; letter-spacing: -.025em; margin-top: var(--s4);
  text-shadow: 0 2px 20px rgba(0,0,0,.32);
}
.hero p.sub {
  font-size: var(--fs-lead); color: #E9EFEA; max-width: 46ch;
  margin-top: var(--s5); line-height: 1.78;
  text-shadow: 0 1px 10px rgba(0,0,0,.28);
}
.hero .cta-row { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.hero .btn-secondary { background: #fff; border-color: #fff; }
.hero .btn-secondary:hover { background: rgba(255,255,255,.85); }
.btn { display: inline-block; padding: 16px 30px; border-radius: 24px; font-family: var(--font-body); font-weight: 600; font-size: 18px; text-decoration: none; border: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background-color .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(42,51,44,.16); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
@media (max-width: 640px) { .hero { min-height: 520px; padding: 40px 20px; } }

/* Skip-to-content link — hidden until keyboard-focused */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--sage-d); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 0;
  font-family: var(--font-body); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Visible keyboard focus — required for keyboard/screen-reader users navigating a healthcare site */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--terra);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Floating call/LINE CTA — stays reachable while scrolling through long sections */
.floating-cta { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.floating-cta a {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(42,51,44,.22); transition: transform .2s;
}
.floating-cta a:hover, .floating-cta a:focus-visible { transform: scale(1.08); }
.floating-cta .fc-call { background: var(--sage-d); }
.floating-cta .fc-line { background: #06C755; }
.floating-cta svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; }
@media (max-width: 640px) { .floating-cta { right: 14px; bottom: 14px; } .floating-cta a { width: 50px; height: 50px; } }
.btn-primary { background: var(--sage-d); color: #fff; }
.btn-secondary { background: transparent; color: var(--sage-d); border: 1.5px solid var(--sage-d); }
.btn-secondary:hover { background: rgba(255,255,255,.9); }

/* Quick overview — compact "at a glance" summary right after the hero, before the deep-dive sections */
.quick-overview { padding: 8px 0 56px; }
.quick-card { background: var(--card); border: 0; border-radius: 22px; padding: var(--s7); box-shadow: var(--sh-md); }
.quick-cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { .quick-grid { grid-template-columns: 1fr; } }
.quick-col h2 { font-size: var(--fs-h3); color: var(--sage-d); font-weight: 600; margin-bottom: 14px; }
.quick-services-list { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-services-list span { background: rgba(31,111,92,.08); color: var(--sage-d); font-size: 15.5px; padding: 7px 14px; border-radius: 16px; }
.quick-branch p { font-size: var(--fs-body); color: var(--muted); line-height: 1.55; margin-bottom: 3px; }
.quick-map-link { display: inline-block; margin-top: 24px; font-size: 17px; color: var(--sage-d); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--terra); }

/* Combined contact block — one shared line for both branch phone numbers, instead of repeating per-card (owner revision 2026-07-22) */
.combined-contact { margin-top: 24px; padding: 20px 24px 4px; border-top: 1px solid var(--line); text-align: center; }
.combined-contact p { font-size: var(--fs-body); color: var(--muted); }
#contact .combined-contact { background: rgba(253,252,250,.55); border-radius: 16px; padding: 24px; border-top: none; }
.combined-contact a { font-family: var(--font-body); font-weight: 600; color: var(--sage-d); font-size: 19px; text-decoration: none; }

/* Trust band */
.trust-band { background: var(--sage-d); color: #fff; padding: 28px 0; }
.trust-band .wrap { display: grid; grid-template-columns: repeat(4, auto); gap: 20px 28px; justify-content: space-between; align-items: center; }
@media (max-width: 900px) { .trust-band .wrap { grid-template-columns: repeat(2, 1fr); } }
.trust-item { display: flex; align-items: center; gap: 12px; font-size: 19px; }
.trust-item .dot {
  width: 20px; height: 20px; border-radius: 50%; background: var(--terra); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.trust-item .dot::before { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; }

/* Section shell */
section { padding: 68px 0; }
/* Section heading. The kicker sits on a short rule instead of floating above the
   title, so it reads as a deliberate label rather than an orphaned line.
   Note: text-transform:uppercase is a no-op on Thai (the script has no letter case),
   so the label is distinguished by weight, colour and tracking instead. */
section .section-kicker {
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-label); letter-spacing: .14em;
  color: var(--terra);
  display: inline-flex; align-items: center; gap: 12px;
}
section .section-kicker::before {
  content: ''; width: 28px; height: 2px; background: var(--terra-bright); border-radius: 2px;
}
section h2 {
  font-weight: 700; font-size: var(--fs-h2); color: var(--ink);
  margin-top: var(--s4); margin-bottom: var(--s7);
  line-height: 1.22; letter-spacing: -.015em;
  max-width: 20ch;
}

/* Glow only where a heading sits directly on a photo background (not inside a solid-color band like pricing) */
.bg-services > .wrap > section > .section-kicker, .bg-about > .wrap > section > .section-kicker, .bg-contact > .wrap > section > .section-kicker,
.bg-services > .wrap > section > h2, .bg-about > .wrap > section > h2, .bg-contact > .wrap > section > h2 {
  text-shadow: 0 1px 3px rgba(253,252,250,.9), 0 1px 8px rgba(253,252,250,.6);
}

/* Services grid — fixed 3 columns so 6 cards read as 3+3, not an uneven 4+2 */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }
/* Cards carry no border and no shadow at rest. Border + shadow + white on every
   card is the flattest, most template-like pattern there is; separation here comes
   from a tinted top hairline, and elevation is reserved for hover. */
.service-card {
  background: var(--card); border: 0; border-top: 2px solid var(--sage-wash);
  border-radius: 14px; padding: var(--s6) var(--s5);
}
.service-card h3, .service-card h4 {
  font-size: var(--fs-h3); color: var(--ink); font-weight: 600;
  margin-bottom: var(--s3); line-height: 1.35; letter-spacing: -.01em;
}
.service-card p { font-size: var(--fs-body); color: var(--muted); line-height: 1.7; }
.service-card .tag { display: inline-block; font-size: 15px; color: var(--terra); font-family: var(--font-body); font-weight: 500; letter-spacing: 1px; margin-bottom: 8px; }

.license-card { display: block; text-decoration: none; cursor: pointer; transition: box-shadow .2s, transform .2s, border-color .2s; }
.license-card:hover { box-shadow: 0 8px 24px rgba(42,51,44,.12); transform: translateY(-2px); border-color: var(--sage); }
.license-card .license-link-hint { display: inline-block; margin-top: 12px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--terra); }

/* Pricing */
/* Deep-teal panel, deliberately inset and heavily rounded so it reads as an
   intentional emphasis card. A full-bleed dark strip across a cream page looks like
   a section that lost its styling; price is what visitors came for, so this is the
   one place that earns a colour inversion. */
.pricing-band {
  background: linear-gradient(158deg, var(--sage-d), var(--sage-deep));
  border-radius: 28px; padding: var(--s8) var(--s7); color: #fff;
  box-shadow: var(--sh-lg);
}
.pricing-band .section-kicker { color: #F8E4CE; } /* 4.87:1 — #F0CFAE was 4.08 and failed AA */
.pricing-band .section-kicker::before { background: #F8E4CE; opacity: .75; }
.pricing-band h2 { color: #fff; margin-bottom: var(--s6); }
@media (max-width: 640px) { .pricing-band { padding: var(--s7) var(--s5); border-radius: 22px; } }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-bottom: 28px; }
.price-card {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; padding: var(--s6);
}
.price-card .branch-name { font-size: 17px; color: #EAF3EE; margin-bottom: var(--s3); } /* วัดจริงบนการ์ดใน (ขาว 10% ทับเขียว) ได้ 4.48 ต่ำกว่าเกณฑ์ 4.5 นิดเดียว
     #DCEAE1 -> #EAF3EE ค่าที่คำนวณบนพื้นเขียวล้วนใช้ไม่ได้ เพราะการ์ดในสว่างกว่า */
.price-num { font-size: clamp(42px, 5vw, 58px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.price-num span { font-size: 21px; font-weight: 400; opacity: .85; }
.pricing-note { font-size: var(--fs-body); color: #DCEAE1; border-top: 1px solid rgba(255,255,255,.2); padding-top: 20px; line-height: 1.6; }
.pricing-note strong { color: #fff; }

/* Branches */
.branch-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.branch-card { background: var(--card); border: 0; border-radius: 18px; padding: var(--s7); box-shadow: var(--sh-sm); }
.branch-card h4 { color: var(--sage-d); font-size: 24px; font-weight: 600; margin-bottom: 11px; }
.branch-card p { font-size: 19px; color: var(--muted); margin-bottom: 4px; line-height: 1.6; }

/* Map */
.map-embed { width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; margin-top: 16px; border: 1px solid var(--line); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Gallery (real photos — placeholders until owner supplies files) */
/* Photo wall — printed snapshots taped to the wall (owner request 2026-07-28).
   The tilt is decorative; hover straightens the print so the photo is easy to read. */
/* max 320px: the real branch photos are ~380px wide, so a column wider than this
   upscales them. Left-aligned rather than stretched -- two sharp photos beat four
   soft ones, and beat any number of invented ones. */
/* 4 ใบต่อแถวแบบเวอร์ชันเก่า (เจ้าของขอกลับ 2026-09-01)
   เคยจำกัดที่ 320px เพราะกลัวรูป 380px ถูกขยาย แต่พอเรียง 4 ใบในกรอบ 1080px
   แต่ละใบกว้างราว 235px ซึ่งเล็กกว่าไฟล์ต้นฉบับอยู่แล้ว จึงไม่มีปัญหาการขยาย */

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.gallery-grid.large .gallery-slot { aspect-ratio: 1 / 1; }
.gallery-slot { aspect-ratio: 4 / 3; border-radius: 16px; border: 1.5px dashed var(--line); background: #F7F9F8;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.gallery-slot span { font-size: 16px; color: var(--muted); }
.gallery-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.gallery-category { margin-top: 44px; }
.gallery-category:first-child { margin-top: 0; }
.gallery-category h3 { color: var(--sage-d); font-size: 20px; font-weight: 600; margin-bottom: 18px; text-shadow: 0 1px 3px rgba(253,252,250,.9), 0 1px 8px rgba(253,252,250,.6); }
.gallery-note { font-size: var(--fs-label); color: var(--muted); margin-top: 12px; }

/* Team / about cards — icon placeholder (no real people yet) */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { background: var(--card); border: 0; border-radius: 14px; padding: var(--s6) var(--s5); text-align: center; }
.team-card .role-icon {
  width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(160deg, rgba(31,111,92,.12), rgba(31,111,92,.06));
  margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
}
.team-card .role-icon svg { width: 36px; height: 36px; stroke: var(--sage-d); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.team-card h4 { font-size: 20px; color: var(--sage-d); font-weight: 600; }
.team-card p { font-size: var(--fs-body); color: var(--muted); margin-top: 4px; }
.team-note { margin-top: 20px; font-size: var(--fs-body); color: var(--muted); background: rgba(253,252,250,.55); border-radius: 12px; padding: 14px 18px; display: inline-block; }

/* Feature photo band — foreground imagery inside a section (not a background).
   Sits at full section width so the photo's own composition is preserved. */
  width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: center 45%;
  display: block; border-radius: 20px; box-shadow: 0 10px 30px rgba(42,51,44,.14);
}
  margin-top: 14px; font-size: 17px; color: var(--muted); text-align: center;
  background: rgba(253,252,250,.55); border-radius: 10px; padding: 8px 16px; display: inline-block;
}

.pain-point-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.pain-point { border-left: 3px solid var(--terra); padding: 4px 0 4px 18px; }
.pain-point p { font-size: var(--fs-body); color: var(--muted); }

/* Contact / quote form */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.contact-cta { background: var(--tint); border: 0; border-radius: 22px; padding: var(--s7); }
.contact-cta h3, .contact-cta p { font-size: 19px; color: var(--muted); max-width: 480px; margin: 0 0 24px; line-height: 1.6; }

/* Careers strip (contact page) */
.careers-strip { border: 1.5px dashed var(--line); border-radius: 20px; padding: 30px 34px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: rgba(253,252,250,.55); }
.careers-strip h4 { color: var(--sage-d); font-size: var(--fs-h3); font-weight: 600; }
.careers-strip p { color: var(--muted); font-size: var(--fs-body); margin-top: 4px; }

footer { padding: 44px 0 60px; text-align: center; color: var(--muted); font-size: 17.5px; border-top: 1px solid var(--line); margin-top: 20px; }
footer .license { margin-top: 8px; font-size: 16px; opacity: .8; }
footer nav { display: flex; justify-content: center; gap: 20px; margin-top: 16px; flex-wrap: wrap; }
footer nav a { color: var(--muted); font-size: 16px; text-decoration: none; }
footer nav a:hover { color: var(--sage-d); }

@media (max-width: 640px) {
  header.site .top { flex-direction: column; gap: 8px; text-align: center; }
  .trust-band .wrap { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
}

/* Section background textures — full-bleed, heavily overlaid with cream so text/cards stay readable. See BACKGROUND_IMAGE_PLAN.md */
/* Optical asymmetry: bottom padding slightly exceeds top so a section reads as
   settled rather than floating. Equal padding is mathematically tidy but looks off. */
.section-bg { background-position: center top; }
/* tile แทน cover เพราะ section สูงหลายพันพิกเซล ถ้าใช้ cover รูปจะถูกซูมจนเหลือจุดเดียว
   แล้วอ่านเป็นสีพื้นแทนที่จะเป็นใบไม้ ไฟล์พื้นผิวถูกทำให้ต่อกันไร้รอยแล้ว (สะท้อนกระจก 2x2)
   880px คือขนาดที่ใบไม้ยังอ่านออกว่าเป็นใบไม้ ไม่ใหญ่จนเห็นเป็นภาพถ่ายของสถานที่ */
.bg-services, .bg-about, .bg-contact {
  /* เจ้าของสั่ง 2026-09-01 ไม่เอารูปซ้ำ ๆ ต่อกัน ขอรูปเดียวพอ ยืดได้
     repeat-y ทำให้เห็นรูปเดิมวนลงไปเรื่อย ๆ · cover ก็ไม่ได้ เพราะ section สูงหลายพันพิกเซล
     cover จะซูมจนเหลือจุดเดียวแล้วอ่านเป็นสีพื้น
     100% 100% คือรูปเดียวยืดเต็ม section พอดี ไม่ซ้ำ ไม่ซูม
     ภาพเบลออยู่แล้วจึงมองไม่ออกว่าถูกยืด */
  background-repeat: no-repeat, no-repeat;
  background-size: auto, 100% 100%;
}
section { padding: var(--s9) 0 var(--s10); }
@media (max-width: 640px) { section { padding: var(--s8) 0 var(--s9); } }
/* No photographic backgrounds. Removed 2026-08-22: the three files here were
   AI-generated scenes, not texture, and a care home cannot show invented places.
   The cream wash below is now the whole treatment. Original note follows.
   Texture backgrounds only — people-photos were trialled here 2026-07-22 and reverted:
   tall sections force `cover` to zoom ~2x and crop to a narrow centre strip, which
   destroys any photo with a subject in it. Texture crops gracefully at any height. */
/* The cream wash ships in CSS so text contrast is correct from the first paint and
   stays correct even if JS never runs. Only the photo underneath is deferred: the
   .bg-loaded class is added by an IntersectionObserver shortly before the section
   scrolls into view, which keeps ~420 KB off the initial load. */
.bg-services, .bg-about, .bg-contact {
  background-image: linear-gradient(rgba(253,252,250,.55), rgba(253,252,250,.55));
}
/* 2026-09-01 คืนพื้นผิวใบไม้ที่ถอดออกไปเมื่อ 22 ส.ค.
   ตอนนั้นถอดเพราะไฟล์ทั้งสามเป็นภาพที่ AI สร้างขึ้น ไม่ใช่เพราะแนวคิดผิด
   คอมเมนต์เดิมด้านบนเขียนกฎไว้เองแล้วว่าพื้นหลังต้องเป็น "พื้นผิว" ไม่ใช่ "ภาพสถานที่"
   สามใบนี้มาจากพุ่มไม้จริงในลานกลางของศูนย์ เบลอ 24-30px จนอ่านไม่ออกว่าเป็นที่ไหน
   เหลือแค่โทนสีกับจังหวะแสง ซึ่งคือคุณสมบัติที่ทำให้เวอร์ชันเก่าดูอบอุ่นและมีความลึก
   ไฟล์ละ 2-3KB จึงโหลดตรง ๆ ได้ ไม่ต้องเลื่อนโหลดทีหลังเหมือนของเดิมที่หนัก 420KB */
.bg-services { background-image:
  linear-gradient(rgba(253,250,244,.30), rgba(253,250,244,.30)),
  url('assets/textures/tex_services.webp'); }
.bg-about { background-image:
  linear-gradient(rgba(253,250,244,.30), rgba(253,250,244,.30)),
  url('assets/textures/tex_about.webp'); }
.bg-contact { background-image:
  linear-gradient(rgba(253,250,244,.30), rgba(253,250,244,.30)),
  url('assets/textures/tex_contact.webp'); }

/* Green variants — kept for reference/comparison only, see DESIGN.md. Not linked from any page nav. */
[data-theme="original"] { --sage-d: #375940; --sage: #4C7A5E; }
[data-theme="mint"]     { --sage-d: #2E7D52; --sage: #5FB080; }
[data-theme="olive"]    { --sage-d: #55703C; --sage: #869F5E; }
[data-theme="bright"]   { --sage-d: #3E7A50; --sage: #6BA07C; }

.contact-email { margin-top: 6px; }
.contact-email a { color: var(--sage-d); }

/* Operator card — the named, credentialed person behind the business.
   Deliberately given more visual weight than a normal team card: for a YMYL
   (health) business this is the strongest trust signal on the page. */
.operator-card {
  display: flex; gap: var(--s6); align-items: flex-start; flex-wrap: wrap;
  background: var(--card); border: 0; border-left: 3px solid var(--sage-d);
  border-radius: 4px 18px 18px 4px; padding: var(--s7);
  box-shadow: var(--sh-md);
}
.operator-photo {
  flex: 0 0 132px; width: 132px; height: 132px; border-radius: 50%;
  background: #F7F9F8; border: 1.5px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 14.5px; text-align: center;
}
.operator-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.operator-detail { flex: 1 1 300px; min-width: 0; }
.operator-detail h4 { font-family: var(--font-body); font-size: 23px; font-weight: 600; color: var(--sage-d); }
.operator-role { font-size: 16.5px; color: var(--terra); font-family: var(--font-body); font-weight: 500; margin: 4px 0 12px; }
.operator-detail p { font-size: var(--fs-body); color: var(--muted); line-height: 1.65; }
@media (max-width: 560px) { .operator-card { padding: 22px; gap: 18px; } }

/* ============================================================
   Scroll reveal
   ============================================================
   Motion brief for this site: the visitor is usually an adult child deciding where
   to place a parent — anxious, guilty, not in a hurry. Motion here should read as
   "this place is careful", not "this startup is exciting". So: slower than normal UI
   (620ms vs the usual ~250ms), a soft ease-out with no bounce, and only ~18px of
   travel — a settling, not a swoop.

   Everything below is gated on `.reveal-on`, which an inline <head> script adds ONLY
   when IntersectionObserver exists and reduced motion is not requested. No class =
   no rules = plain visible page. Content can never be stranded invisible. */
:root {
  --reveal-dur: 620ms;
  --reveal-ease: cubic-bezier(.22, .61, .36, 1);
}

.reveal-on .trust-item,
.reveal-on .pain-point,
.reveal-on .service-card,
.reveal-on .price-card,
.reveal-on .team-card,
.reveal-on .quick-card,
.reveal-on .operator-card,
.reveal-on .section-kicker,
.reveal-on section > h2 {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms),
              transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms);
}

.reveal-on .is-revealed { opacity: 1; transform: none; }

/* Card lift on hover. Must sit after the reveal rules — equal specificity, later wins. */
.service-card, .team-card {
  transition: transform .28s var(--reveal-ease), box-shadow .28s var(--reveal-ease);
}
.service-card:hover, .team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.service-card:hover { border-top-color: var(--sage); }

/* Motion safety net. Vestibular disorders and motion sensitivity are common in this
   site's audience (older visitors and their adult children), so every moving thing
   above must come to rest when the OS asks for reduced motion. Any new animation
   added later must also be disabled here. */
@media (prefers-reduced-motion: reduce) {
  .service-card, .team-card { transition: none; }
  .service-card:hover, .team-card:hover { transform: none; }
}


/* ---------------------------------------------------------------------------
   2026-08-22 anti-slop pass. Everything below replaces something that was
   carrying an AI-generated image or an unusable mobile layout.
   --------------------------------------------------------------------------- */

/* Replaces the AI "family on a veranda" photo in #about. The sentence was the only
   real content in that figure, so it stays -- as type, which cannot be fabricated. */
.pull-quote {
  margin: var(--s7) auto; max-width: 700px; padding: 0 0 0 22px;
  border-left: 3px solid var(--terra);
  font-size: clamp(21px, 2.1vw, 27px); line-height: 1.62; font-weight: 500;
  color: var(--sage-d);
}

/* Equipment was 5 more identical cards on top of 13. A spec list is the honest
   shape for "things we own" and drops ~900px of scroll on mobile. */
.equip-list { list-style: none; display: grid; gap: 0; max-width: 760px; }
.equip-list li {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  padding: 15px 2px; border-bottom: 1px solid var(--line);
}
.equip-list li:first-child { border-top: 1px solid var(--line); }
.equip-list strong { color: var(--ink); font-weight: 600; font-size: 19px; flex: 0 0 auto; }
.equip-list span   { color: var(--muted); font-size: var(--fs-body); }

/* Mobile header was 272px -- 32% of an 844px screen before any content. Single row,
   nav scrolls sideways instead of wrapping onto a second and third line. */
@media (max-width: 640px) {
  header.site .top { padding: 10px 16px; }
  header.site .logo-row img { height: 34px; }
  header.site .brand { font-size: 17px; line-height: 1.25; }
  header.site .brand small { display: none; }
  header.site .phone { font-size: 17px; }
  header.site .phone small { font-size: 12px; }
  nav.site-nav {
    padding: 0 16px 8px; gap: 18px; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  nav.site-nav::-webkit-scrollbar { display: none; }
  nav.site-nav a { white-space: nowrap; font-size: var(--fs-label); }
  section, #about, #services, #contact { scroll-margin-top: 108px; }
}

/* The two round floating buttons sat on top of card text all the way down the page.
   Docked as a bottom bar they cover nothing, and they are the standard shape for a
   phone-first business. body padding reserves the space so nothing hides behind it. */
@media (max-width: 640px) {
  body { padding-bottom: 68px; }
  .floating-cta {
    right: 0; left: 0; bottom: 0; flex-direction: row; gap: 10px;
    background: var(--card); box-shadow: 0 -2px 14px rgba(26,45,36,.14);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .floating-cta a {
    flex: 1; width: auto; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 600; font-size: 16px; color: #fff; text-decoration: none;
  }
  .floating-cta .fc-call::after { content: 'โทร 083-896-9987'; }
  .floating-cta .fc-line::after { content: 'แชท LINE'; }
  /* ข้อความใน content: ไม่ผ่าน i18n.js ต้องแปลที่นี่ */
  html[lang="en"] .floating-cta .fc-call::after { content: 'Call 083-896-9987'; }
  html[lang="en"] .floating-cta .fc-line::after { content: 'Chat on LINE'; }
  .floating-cta a:hover, .floating-cta a:focus-visible { transform: none; }
}

/* Language switch (2026-09-11). Thai in the HTML stays the source; i18n.js swaps text in
   place. The filled side is the current language; aria-pressed carries the same state for
   screen readers. On phones the header is already a centred column (brand, then phone), so
   the switch sits beside the phone number: stacking it below added 40px to a sticky header. */
.lang-switch {
  display: inline-flex; flex-shrink: 0; overflow: hidden;
  border: 1.5px solid var(--sage-d); border-radius: 999px; background: var(--card);
}
.lang-switch button {
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600; line-height: 1;
  min-width: 48px; min-height: 40px; padding: 0 14px; border: 0; background: transparent;
  color: var(--sage-d); cursor: pointer; transition: background-color .2s, color .2s;
}
.lang-switch button[aria-pressed="true"] { background: var(--sage-d); color: #fff; cursor: default; }
.lang-switch button:not([aria-pressed="true"]):hover { background: var(--sage-wash); }
.lang-switch button:focus-visible { outline: 3px solid var(--terra); outline-offset: -3px; }
/* Set by the <head> script only when the page opens in English; i18n.js removes it right
   after swapping the text, and a 1.5s timeout removes it if i18n.js never arrives. */
html.lang-pending body { visibility: hidden; }
@media (max-width: 640px) {
  header.site .right { justify-content: center; gap: 14px; }
  .lang-switch button { min-width: 40px; min-height: 30px; padding: 0 10px; }
}


/* ===========================================================================
   2026-08-22 · polish pass
   ตัดฟอร์มใบเสนอราคาออกตามคำสั่งเจ้าของ และดึงภาษาการตกแต่งจากงานโปสเตอร์
   (LAYOUT_STANDARD.md + Design Knowledge 2026-08-19) มาใช้บนเว็บ
   =========================================================================== */

/* --- เรื่องสีทอง -----------------------------------------------------------
   DESIGN.md ตั้งกฎว่า "สีแบรนด์หนึ่ง สีเน้นหนึ่ง เทอร์ราคอตตาเป็นเครื่องหมายวรรคตอน
   ไม่ใช่สีแบรนด์ตัวที่สอง" ซึ่งยังใช้อยู่ทุกตัวอักษรบนพื้นครีม
   สีทอง #C9A961 ที่เพิ่มเข้ามานี้มาจากกรอบไทยในชุดโปสเตอร์วันแม่/วันพ่อ
   และถูกจำกัดไว้เฉพาะ **ลายกนกกับเส้นกรอบบนพื้นเขียวเข้มเท่านั้น**
   ห้ามใช้กับตัวอักษร ห้ามใช้บนพื้นครีม กฎเดิมจึงไม่ถูกละเมิด */
:root { --gold: #C9A961; }

/* --- Hero: ลายกนกจาง ๆ มุมขวาล่าง ------------------------------------------
   พื้นเขียวเรียบล้วนอ่านว่า "ยังทำไม่เสร็จ" ลายกนกตัวเดียวขนาดใหญ่ที่ความทึบต่ำ
   ทำให้ผืนมีที่มา โดยไม่กลายเป็นเกรเดียนต์ตกแต่งแบบที่ AI ชอบใส่
   วางไว้นอกคอลัมน์ข้อความ (max-width 620px กลางจอ) จึงไม่แย่งการอ่าน */
.hero { position: relative; overflow: hidden; }
.hero .kanok-watermark {
  position: absolute; right: -40px; bottom: -30px; width: 340px; height: 480px;
  z-index: 1; pointer-events: none; opacity: .085;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-4%20-36%2040%2062%22%3E%3Cg%20transform%3D%22rotate%28-8%29%22%20fill%3D%22%23C9A961%22%20opacity%3D%221%22%3E%3Cpath%20d%3D%22M0%2C0%20C0%2C-16%206%2C-27%2019%2C-33%20C10%2C-27%206%2C-18%206%2C-7%20Z%20M2%2C-2%20C4%2C-16%2013%2C-25%2027%2C-28%20C16%2C-22%2011%2C-13%209%2C-3%20Z%20M0%2C4%20C14%2C4%2026%2C10%2033%2C22%20C26%2C13%2015%2C9%203%2C9%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
@media (max-width: 900px) { .hero .kanok-watermark { width: 210px; height: 300px; opacity: .07; } }

/* --- เส้นคั่น section แบบไทย ------------------------------------------------
   กนกเล็กขนาบด้วยเส้นบาง ใช้แทนช่องว่างเปล่าระหว่างบล็อกใหญ่ */
.thai-rule {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: var(--s8) auto; max-width: 420px;
}
.thai-rule::before, .thai-rule::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,90,46,.32), transparent);
}
.thai-rule i {
  width: 22px; height: 32px; display: block;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-4%20-36%2040%2062%22%3E%3Cg%20transform%3D%22rotate%280%29%22%20fill%3D%22%23A85A2E%22%20opacity%3D%221%22%3E%3Cpath%20d%3D%22M0%2C0%20C0%2C-16%206%2C-27%2019%2C-33%20C10%2C-27%206%2C-18%206%2C-7%20Z%20M2%2C-2%20C4%2C-16%2013%2C-25%2027%2C-28%20C16%2C-22%2011%2C-13%209%2C-3%20Z%20M0%2C4%20C14%2C4%2026%2C10%2033%2C22%20C26%2C13%2015%2C9%203%2C9%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

/* --- แถบราคา: กรอบทองสองเส้น + กนกสี่มุม -----------------------------------
   ยกมาจากโครง thai_frame() ใน fathersday.py ตรง ๆ ย่อให้พอดีการ์ดเว็บ
   นี่คือบล็อกที่ LAYOUT_STANDARD เรียกว่า "แถบราคา สีเขียวเข้ม ตัวดึงให้ติดต่อ" */
.price-card { position: relative; }
.price-card::before {
  content: ''; position: absolute; inset: 14px; pointer-events: none;
  border: 1px solid rgba(201,169,97,.42); border-radius: 12px;
}
.price-card::after {
  content: ''; position: absolute; inset: 20px; pointer-events: none;
  border: 1px solid rgba(201,169,97,.20); border-radius: 9px;
}

/* --- บล็อกติดต่อที่มาแทนฟอร์ม ----------------------------------------------
   เจ้าของสั่งตัดใบเสนอราคาออก 2026-08-22 ("วุ่นวาย") งานของฟอร์มคือกระตุ้นให้คนเริ่มคุย
   การ์ด "โทรมาถามอะไรได้บ้าง" ทำหน้าที่เดียวกันโดยไม่ต้องเก็บข้อมูลส่วนบุคคลเลย
   ผลพลอยได้คือภาระ PDPA หายไปทั้งก้อน */
.contact-cta h3, .ask-card h3 { font-size: 20px; color: var(--sage-d); font-weight: 600; margin-bottom: 10px; }

/* เบอร์โทรคือชิ้นที่ใหญ่ที่สุดในบล็อกนี้ ตามลำดับสายตาของ LAYOUT_STANDARD
   (เบอร์หลัก 74px บนผืน 1080 = ชิ้นใหญ่ที่สุดรองจากพาดหัว) */
.phone-big {
  display: inline-block; margin: 18px 0 6px;
  font-size: clamp(34px, 4.4vw, 50px); font-weight: 700; letter-spacing: .5px;
  color: var(--sage-d); text-decoration: none; line-height: 1.25;
  border-bottom: 3px solid transparent;
  transition: border-color .2s var(--reveal-ease), color .2s var(--reveal-ease);
}
.phone-big:hover, .phone-big:focus-visible { color: var(--sage-deep); border-bottom-color: var(--terra); }

.ask-card {
  background: var(--card); border-radius: 20px; padding: var(--s7);
  box-shadow: var(--sh-md); border-top: 3px solid var(--terra);
}
.ask-list { list-style: none; margin: 4px 0 0; padding: 0; }
.ask-list li {
  position: relative; padding: 11px 0 11px 30px; font-size: 18px; color: var(--body);
  border-bottom: 1px solid var(--line); line-height: 1.6;
}
.ask-list li:last-child { border-bottom: 0; }
/* เครื่องหมายคำถามแทนจุด บอกว่าเป็นคำถามที่โทรมาถามได้ ไม่ใช่รายการบริการ */
.ask-list li::before {
  content: '?'; position: absolute; left: 0; top: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--sage-wash); color: var(--sage-d);
  font-size: 13px; font-weight: 700; line-height: 20px; text-align: center;
}
.ask-note { margin-top: 16px; font-size: 16px; color: var(--muted); }

/* --- Micro-interactions ----------------------------------------------------
   ทุกอันสั้นกว่า reveal มาก (150-280ms) เพราะเป็นการตอบสนองการกด ไม่ใช่การเล่าเรื่อง
   ตามหลัก exit เร็วกว่า enter และการกดต้องเห็นผลภายใน 100ms */
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary:hover, .btn-primary:focus-visible { box-shadow: var(--sh-md); transform: translateY(-2px); }
.ask-list li { transition: padding-left .18s var(--reveal-ease), color .18s var(--reveal-ease); }
.ask-list li:hover { padding-left: 36px; color: var(--ink); }
.equip-list li { transition: background-color .18s var(--reveal-ease); }
.equip-list li:hover { background: var(--sage-wash); }
.branch-card { transition: transform .24s var(--reveal-ease), box-shadow .24s var(--reveal-ease); }
.branch-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

/* --- ชิ้นใหม่ต้องเข้าคิว reveal ด้วย ไม่งั้นจะโผล่ทันทีขณะที่ชิ้นข้าง ๆ ค่อย ๆ ขึ้น --- */
.reveal-on .equip-list li,
.reveal-on .ask-card,
.reveal-on .pull-quote,
.reveal-on .branch-card,
.reveal-on .license-card,
.reveal-on .thai-rule {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms),
              transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms);
}

/* --- ตาข่ายนิรภัยของ motion ------------------------------------------------
   กฎเดิมด้านบนครอบเฉพาะของที่มีอยู่ตอนนั้น ทุกอย่างที่เพิ่มรอบนี้ต้องมาหยุดที่นี่ด้วย */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:active, .btn-primary:hover, .btn-primary:focus-visible,
  .branch-card, .branch-card:hover, .ask-list li, .ask-list li:hover,
  .equip-list li, .phone-big { transition: none; transform: none; }
  .ask-list li:hover { padding-left: 30px; }
}

/* --- กฎเปิดให้เห็น ต้องอยู่ท้ายสุดของไฟล์เสมอ -------------------------------
   บั๊กที่เพิ่งเจอ 2026-08-22: กฎซ่อน `.reveal-on .equip-list li` มีน้ำหนัก (0,2,1)
   ส่วน `.reveal-on .is-revealed` มีแค่ (0,2,0) กฎซ่อนจึงชนะ และการ์ดติดต่อกับ
   รายการอุปกรณ์หายถาวร ไม่มีวันโผล่ ส่วน `.reveal-on .ask-card` น้ำหนักเท่ากัน
   แต่ประกาศทีหลังจึงชนะเช่นกัน
   ทั้งสองกรณีคือสิ่งที่คอมเมนต์เดิมด้านบนเตือนไว้ว่า "เนื้อหาต้องไม่มีวันค้างล่องหน"
   กฎด้านล่างจึงต้องมีน้ำหนักสูงกว่าและอยู่ท้ายไฟล์
   ถ้าเพิ่มกฎ reveal ใหม่ที่มี element selector ต้องเพิ่มคู่ของมันที่นี่ด้วย */
.reveal-on .is-revealed,
.reveal-on .equip-list li.is-revealed,
.reveal-on .ask-list li.is-revealed { opacity: 1; transform: none; }


/* บล็อกติดต่อห้ามใช้สีเทา --muted (LAYOUT_STANDARD.md ข้อ 2)
   วัดด้วย dual-render ได้ 4.35:1 บนพื้น .contact-cta ซึ่งต่ำกว่าเกณฑ์ 4.5 ของเนื้อความ
   --body ให้ 7.4:1 บนพื้นเดียวกัน */
.contact-cta p, .ask-note { color: var(--body); }

/* ===========================================================================
   Print
   ครอบครัวที่กำลังเลือกศูนย์มักพิมพ์หน้าเว็บออกมาเทียบกันหลายที่ หรือให้ผู้สูงอายุอ่านเอง
   สิ่งที่ต้องติดกระดาษไปคือ ชื่อ ที่อยู่ เบอร์ ราคา บริการ
   สิ่งที่ไม่ต้องคือ เมนู ปุ่มลอย ลายตกแต่ง และพื้นสีเข้มที่กินหมึก
   =========================================================================== */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; color: #000 !important; font-size: 12pt; }

  /* พื้นเขียวเข้มบนกระดาษ = หมึกดำเต็มหน้าและอ่านไม่ออก พลิกเป็นขาวพร้อมกรอบแทน */
  .hero, .price-card, .pricing-band, .trust-band {
    background: #fff !important; color: #000 !important;
    border: 1px solid #999; box-shadow: none !important;
  }
  .hero { min-height: auto; padding: 10mm 0; }
  .hero h1, .hero .sub, .kicker, .price-num, .trust-item { color: #000 !important; text-shadow: none !important; }
  .hero::before, .price-card::before, .price-card::after { display: none !important; }

  /* ของที่ไม่มีความหมายบนกระดาษ */
  header.site, nav.site-nav, .floating-cta, .kanok-watermark, .thai-rule,
  .quick-map-link, .btn, .branch-map, iframe { display: none !important; }

  /* ลิงก์บนกระดาษคลิกไม่ได้ ต้องพิมพ์ปลายทางออกมา */
  a[href^="tel:"]::after { content: " (" attr(href) ")"; }
  a[href^="http"]::after { content: " [" attr(href) "]"; font-size: 9pt; word-break: break-all; }
  a[href^="tel:"]::after { font-size: 10pt; }
  a { color: #000 !important; text-decoration: underline; }

  /* ห้ามให้การ์ดถูกตัดครึ่งคาบหน้ากระดาษ */
  .service-card, .team-card, .branch-card, .ask-card,
  .equip-list li, .operator-card, section > h2 { break-inside: avoid; page-break-inside: avoid; }
  section > h2, h3 { break-after: avoid; page-break-after: avoid; }
  section { padding: 6mm 0; }

  /* ทุกอย่างต้องนิ่งและมองเห็น reveal ต้องไม่ทำให้พิมพ์ออกมาเป็นหน้าว่าง */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-on *, .service-card, .ask-card, .branch-card,
  .equip-list li, .pull-quote, .license-card { opacity: 1 !important; transform: none !important; }

  .card, .service-card, .team-card, .ask-card, .branch-card { box-shadow: none !important; border: 1px solid #ccc; }
}

/* ===========================================================================
   2026-08-26 · วิธีเดินทาง + ช่องทางติดตาม
   =========================================================================== */

/* --- วิธีเดินทางมาศูนย์ ----------------------------------------------------
   แผนที่กินครึ่งซ้าย ปุ่มนำทางครึ่งขวา เพราะสิ่งที่คนต้องการจากส่วนนี้คือ
   "กดแล้วไปได้เลย" ไม่ใช่ "อ่านแล้วจำ" ปุ่มจึงใหญ่กว่าที่อยู่ */
.route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s5); }
.route-card {
  display: grid; grid-template-columns: 1fr; background: var(--card);
  border-radius: 20px; overflow: hidden; box-shadow: var(--sh-sm);
  border-top: 3px solid var(--sage);
  transition: box-shadow .24s var(--reveal-ease), transform .24s var(--reveal-ease);
}
.route-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.route-card .map-embed { aspect-ratio: 16 / 9; width: 100%; }
.route-card .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.route-body { padding: var(--s5) var(--s5) var(--s6); }
.route-body h4 { font-size: 22px; color: var(--sage-d); font-weight: 600; margin-bottom: 8px; }
.route-addr { font-size: var(--fs-body); color: var(--body); line-height: 1.6; }
.route-mark { font-size: 16.5px; color: var(--terra); font-weight: 500; margin-top: 6px; }
.route-lead { font-size: 16px; color: var(--body); margin: 14px 0 12px; }

.route-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.route-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 14px; text-decoration: none;
  font-size: 17px; font-weight: 600; color: var(--sage-d);
  background: var(--sage-wash); border: 1px solid rgba(31,111,92,.18);
  transition: background-color .18s var(--reveal-ease), transform .18s var(--reveal-ease);
}
.route-btn:hover, .route-btn:focus-visible { background: #E3EFE9; transform: translateY(-1px); }
.route-btn-call { background: var(--sage-d); color: #fff; border-color: var(--sage-d); }
.route-btn-call:hover, .route-btn-call:focus-visible { background: var(--sage-deep); }

/* --- ช่องทางติดตาม ---------------------------------------------------------
   แถวเลื่อนแนวนอนบนจอเล็ก เป็นรูปทรงเดียวในหน้าที่ไม่ใช่กริดเรียงลงล่าง
   ตั้งใจให้ต่างจากจังหวะของทั้งหน้า เพื่อไม่ให้ส่วนนี้กลายเป็นอีกหนึ่งบล็อกที่เหมือนกันหมด */
.social-lead { font-size: var(--fs-lead); color: var(--body); max-width: 640px; margin-bottom: var(--s6); }
.social-rail { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--s5); align-items: start; }
.social-card {
  background: var(--card); border-radius: 20px; box-shadow: var(--sh-sm);
  overflow: hidden; display: flex; flex-direction: column;
}
.social-head { display: flex; align-items: center; gap: 14px; padding: var(--s5); border-bottom: 1px solid var(--line); }
.social-head h3 { font-size: 20px; color: var(--ink); font-weight: 600; }
.social-head p { font-size: 15.5px; color: var(--muted); margin-top: 2px; }
.social-mark {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 22px; line-height: 1;
}
.social-mark-fb { background: #1877F2; }
.social-mark-ig { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.social-mark-gg { background: var(--sage-d); }
.social-body { padding: var(--s5); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.social-body p { font-size: var(--fs-body); color: var(--body); line-height: 1.6; }
.social-second { font-size: 16px; color: var(--sage-d); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--terra); }

/* ช่องฟีด สูงคงที่และเลื่อนดูข้างในได้ตามที่เจ้าของขอ */
.social-slot { height: 560px; position: relative; background: var(--tint); }
.social-slot iframe { width: 100%; height: 100%; border: 0; display: block; }
.social-consent { padding: var(--s6) var(--s5); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; height: 100%; justify-content: center; }
.sc-title { font-size: 20px; font-weight: 600; color: var(--ink); }
.sc-note { font-size: 15.5px; color: var(--body); line-height: 1.62; }
.sc-alt { font-size: 16px; color: var(--sage-d); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--terra); }

@media (max-width: 900px) {
  /* แถวเลื่อนแนวนอนจริง ๆ บนจอเล็ก ไม่ใช่กองซ้อนกันลงล่างเหมือนทุกส่วน */
  .social-rail {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 10px; margin-inline: -24px; padding-inline: 24px;
    scrollbar-width: none;
  }
  .social-rail::-webkit-scrollbar { display: none; }
  .social-card { flex: 0 0 84%; scroll-snap-align: start; }
  .social-slot { height: 480px; }
}

.reveal-on .route-card,
.reveal-on .social-card {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms),
              transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .route-card, .route-card:hover, .route-btn, .route-btn:hover { transition: none; transform: none; }
}

@media print {
  /* บนกระดาษ แผนที่กับฟีดไม่มีความหมาย แต่ที่อยู่กับเบอร์มี */
  .map-embed, .social-slot, .social-rail { display: none !important; }
  .route-actions a[href^="http"]::after { content: ""; }
}

/* กฎเปิดให้เห็นต้องอยู่ท้ายสุดเสมอ ดูเหตุผลในบล็อกเดียวกันด้านบน */
.reveal-on .is-revealed { opacity: 1; transform: none; }

/* --- แก้รอบประเมินที่ 1 (2026-08-26) ---------------------------------------
   1. อิโมจิเป็นไอคอน คือข้อที่งานวิจัย AI slop ระบุตรง ๆ ว่าห้ามทำ เปลี่ยนเป็น SVG หมดแล้ว
   2. การ์ดในแถวติดตามสูงไม่เท่ากันมาก ฟีด 560px ข้าง ๆ 200px ดูเหมือนวางไม่เสร็จ
      แก้เป็นสองคอลัมน์ ฟีดสูงเต็มซ้าย อีกสองใบซ้อนกันขวา ซึ่งเป็นจังหวะที่ไม่ซ้ำกับ
      กริดสามช่องเท่ากันที่ใช้อยู่ทุกส่วนในหน้านี้
   3. ปุ่มนำทางตกบรรทัดเป็น 2+1 จัดให้เท่ากันสามช่อง */

.ri { width: 20px; height: 20px; flex: 0 0 20px; }
.route-mark .ri { width: 17px; height: 17px; flex: 0 0 17px; vertical-align: -3px; margin-right: 4px; }

/* ปุ่มนำทางสามปุ่มกว้างเท่ากัน ไม่ตกบรรทัดเป็น 2+1 */
.route-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.route-btn { justify-content: center; padding: 13px 10px; font-size: 16.5px; }
@media (max-width: 420px) { .route-actions { grid-template-columns: 1fr 1fr; }
  .route-btn-call { grid-column: 1 / -1; } }

/* ฟีดสูงเต็มคอลัมน์ซ้าย อีกสองใบซ้อนขวา */
.social-rail { grid-template-columns: minmax(340px, 1.15fr) minmax(280px, .85fr); align-items: stretch; }
.social-fb { grid-row: span 2; }
.social-fb .social-slot { flex: 1; height: auto; min-height: 520px; }
.social-consent { justify-content: flex-start; padding-top: var(--s6); }
.sc-note { max-width: 34ch; }

.social-mark svg { width: 24px; height: 24px; }
.social-mark-gg { background: #EA4335; }

/* การ์ดขวาสองใบให้เนื้อความดันปุ่มลงล่าง ขอบล่างจะได้ตรงกัน */
.social-rail > .social-card:not(.social-fb) .social-body { flex: 1; justify-content: space-between; }

@media (max-width: 900px) {
  .social-fb { grid-row: auto; }
  .social-fb .social-slot { min-height: 460px; }
}

/* 2026-09-20 ถอดรายการ "ตามแล้วจะเห็นอะไร" (.sc-what) ออก เจ้าของสั่งให้เอาฟีดจริงมาแทน
   ลิงก์เปิดแอปย้ายออกมานอกกล่องฟีด จะได้ยังอยู่หลังฟีดโหลดทับ .social-slot แล้ว */
.social-cardfoot {
  padding: 14px var(--s5); border-top: 1px solid var(--line);
  display: flex; align-items: center; min-height: 54px;
}

/* ปลั๊กอินเพจกว้างได้สูงสุด 500px ถ้าคอลัมน์กว้างกว่านั้นจะเหลือพื้นว่างข้าง ๆ
   จึงคุมคอลัมน์ซ้ายไม่ให้เกิน แล้วจัดกึ่งกลางเผื่อจอกว้างมาก */
.social-rail { grid-template-columns: minmax(320px, 520px) minmax(280px, 1fr); }
.social-slot { display: flex; }
.social-slot iframe { margin: 0 auto; }

/* ===========================================================================
   2026-08-26 · รื้อส่วนบริการ
   เดิมเป็นการ์ดหน้าตาเดียวกัน 13 ใบเรียงต่อกันสามกลุ่ม ซึ่งเป็นก้อนที่ซ้ำที่สุดในหน้า
   และเป็นแพตเทิร์นที่เทมเพลตทุกตัวใช้ ตอนนี้แต่ละกลุ่มมีรูปทรงของตัวเอง
   โดยน้ำหนักสายตาไล่ลงตามความสำคัญต่อการตัดสินใจ ไม่ใช่ไล่ตามความสวย

     ดูแลทั่วไป      การ์ด        ทุกคนได้รับ เป็นด่านแรกที่ต้องเข้าใจ
     ฟื้นฟูเฉพาะทาง  รายการมีเลข  กลุ่มที่ครอบครัวอ่านละเอียดที่สุดก่อนตัดสินใจ
     สุขภาพจิต       แถบเตี้ย     ส่วนเสริม รู้ว่ามีก็พอ
     อุปกรณ์         สเปกลิสต์    ข้อมูลอ้างอิง ไม่ต้องอ่านทุกบรรทัด
   =========================================================================== */

.group-lead { font-size: var(--fs-body); color: var(--muted); margin: -6px 0 var(--s5); max-width: 60ch; }

/* --- ฟื้นฟูเฉพาะทาง: รายการมีเลขกำกับ --- */
.rehab-list { list-style: none; counter-reset: none; padding: 0; max-width: 900px; }
.rehab-list li {
  display: grid; grid-template-columns: 74px 1fr; gap: var(--s4);
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
.rehab-list li:first-child { border-top: 1px solid var(--line); }
.rehab-num {
  font-size: 34px; font-weight: 700; line-height: 1; color: #8F4A22;
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.rehab-body h4 { font-size: 21px; color: var(--ink); font-weight: 600; line-height: 1.45; margin-bottom: 8px; }
.rehab-body p { font-size: var(--fs-body); color: var(--body); line-height: 1.7; max-width: 58ch; }
@media (max-width: 640px) {
  .rehab-list li { grid-template-columns: 46px 1fr; gap: var(--s3); padding: var(--s4) 0; }
  .rehab-num { font-size: 25px; }
  .rehab-body h4 { font-size: 19px; }
}

/* --- สุขภาพจิตและกิจกรรม: แถบเตี้ย ไม่มีกรอบการ์ด --- */
.wellbeing-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s5) var(--s6); padding-top: var(--s4); border-top: 2px solid var(--sage-wash);
}
.wellbeing-item h4 {
  font-size: var(--fs-h3); color: var(--sage-d); font-weight: 600; line-height: 1.45; margin-bottom: 6px;
}
.wellbeing-item p { font-size: var(--fs-body); color: var(--body); line-height: 1.62; }

/* --- ไม่มี .tag ในส่วนบริการแล้ว แท็กเดิมซ้ำกับหัวกลุ่มและชื่อการ์ด --- */
.service-card h4 { margin-top: 0; }

.reveal-on .rehab-list li,
.reveal-on .wellbeing-item {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms),
              transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms);
}

@media print {
  .rehab-list li, .wellbeing-item { break-inside: avoid; page-break-inside: avoid; }
}

/* กฎเปิดให้เห็นต้องอยู่ท้ายไฟล์และชนะกฎซ่อนที่มี element selector (ดูกติกาข้อ 9) */
.reveal-on .is-revealed,
.reveal-on .rehab-list li.is-revealed { opacity: 1; transform: none; }

/* --- ปรับสีชิ้นที่พลาดเกณฑ์แบบเฉียดฉิว หลังคืนพื้นผิวใต้ section -------------
   ทั้งหมดพลาดอยู่ที่ 4.27-4.46 จากเกณฑ์ 4.5 คือหลักร้อยละเดียว
   แก้ที่สีตัวอักษรถูกกว่าไปลดพื้นผิวลงอีก เพราะพื้นผิวคือสิ่งที่เพิ่งอุตส่าห์เอากลับมา
   --muted (#6B756C) ใช้ได้บนครีมล้วน แต่บนแถบที่มีพื้นผิวอยู่ข้างหลังยังไม่พอ */
.equip-list span, .group-lead { color: var(--body); }
section .section-kicker { color: var(--terra); }
/* ฮีโร่: ม่านที่เพิ่งเปิดให้บางลงทำให้ kicker สีอ่อนตกเกณฑ์บนมือถือ
   เติมเงาให้ตัวอักษรแทนการปิดม่านกลับ จะได้ยังเห็นรูปเหมือนเดิม */
.hero .kicker { text-shadow: 0 1px 4px rgba(12,32,24,.55); }


/* ฮีโร่: เงาตัวอักษรช่วยเรื่องการอ่านจริง แต่ WCAG ไม่นับให้
   จึงต้องดันสี kicker ให้สว่างขึ้นด้วย ไม่ใช่พึ่งเงาอย่างเดียว */
.hero .kicker { color: #FFFFFF; }


/* --- ตัวอักษรที่วางบนพื้น section โดยตรง ต้องเข้มพอสำหรับพื้นที่มีลาย ---------
   นี่คือจุดที่เวอร์ชันเก่าพลาด ไม่ใช่ที่ตัวพื้นผิว
   ของเก่าใช้ --muted (#6B756C) กับ --sage-d บนพื้นใบไม้ ซึ่งวัดแล้วตกเกณฑ์หลายสิบจุด
   แต่ไม่เคยมีใครวัด จึงไม่มีใครเห็น
   ข้อความที่อยู่ในการ์ดขาวไม่ต้องแก้ เพราะพื้นหลังมันคือการ์ด ไม่ใช่พื้น section
   พอเปลี่ยนเฉพาะชิ้นที่วางบนพื้นจริง ๆ ให้เข้มขึ้น พื้นผิวก็อยู่ได้เต็มผืนเหมือนเดิม */
.bg-services .gallery-category > h3,
.bg-about .gallery-category > h3,
.bg-contact .gallery-category > h3,
.wellbeing-item h4 { color: var(--sage-deep); }

.group-lead,
.wellbeing-item p,
.equip-list span,
.team-note,
.combined-contact p,
.careers-strip p,
.gallery-note { color: var(--ink); }

.equip-list strong, .rehab-body h4, .rehab-body p { color: var(--ink); }
/* (ลบ 2026-09-04) section .section-kicker #8F4A22 — กฎซ้ำที่ถูกทับอยู่แล้ว */

/* ป้ายหัวข้อกับบรรทัดนำ เป็นชิ้นเล็กที่วางบนพื้นใบไม้โดยตรง
   ม่านบางลงเหลือ .44 เพื่อให้เห็นใบไม้ชัด สองชิ้นนี้จึงต้องเข้มขึ้นอีกขั้น */
/* (ลบ 2026-09-04) section .section-kicker #6E3617 — กฎซ้ำที่ถูกทับอยู่แล้ว */
.social-lead { color: var(--ink); }

/* บนมือถือ รูปถูกครอปแคบจนตรงหัวฮีโร่ไปโดนส่วนสว่างของภาพ (ท้องฟ้า/ผนังขาว)
   ม่านชุดเดสก์ท็อปจึงไม่พอสำหรับ kicker ที่ตัวเล็ก เติมความเข้มเฉพาะแถบบน
   ส่วนกลางกับล่างยังบางเท่าเดิม ภาพจึงยังเห็นชัดไม่ต่างจากจอใหญ่ */
@media (max-width: 640px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(12,32,24,.52) 0%, rgba(12,32,24,.20) 26%,
                              rgba(12,32,24,0) 44%),
      linear-gradient(172deg, rgba(14,34,26,.34) 0%, rgba(14,34,26,.52) 42%,
                              rgba(12,40,30,.66) 100%),
      linear-gradient(200deg, rgba(201,169,97,.10) 0%, rgba(201,169,97,0) 62%),
      url('assets/site-photos/center_courtyard.webp') center 58% / cover no-repeat;
  }
}

/* ===========================================================================
   แผงขาวรองข้อความที่วางบนพื้นใบไม้
   เวอร์ชันเก่าข้อความเกือบทั้งหมดอยู่บนการ์ดขาว พื้นใบไม้จึงเข้มได้เต็มที่
   ตอนรื้อส่วนบริการรอบ 26 ส.ค. ผมแปลงการ์ดเป็นลิสต์เปล่าไปสามกลุ่ม
   ข้อความจึงไปนอนบนพื้นตรง ๆ และกลายเป็นตัวบังคับให้พื้นต้องจาง
   คืนแผงขาวให้ลิสต์เหล่านั้น พื้นก็กลับไปเข้มได้ และรูปทรงสี่แบบยังอยู่ครบ
   =========================================================================== */
.rehab-list, .equip-list, .wellbeing-strip {
  background: rgba(255,255,255,.90);
  border-radius: 20px;
  padding: var(--s5) var(--s6);
  box-shadow: var(--sh-sm);
}
.rehab-list { max-width: none; }
.equip-list { max-width: none; }
.wellbeing-strip { border-top: 0; padding-top: var(--s5); }
.rehab-list li:first-child { border-top: 0; padding-top: 4px; }
.equip-list li:first-child { border-top: 0; }
.rehab-list li:last-child, .equip-list li:last-child { border-bottom: 0; padding-bottom: 4px; }
@media (max-width: 640px) {
  .rehab-list, .equip-list, .wellbeing-strip { padding: var(--s5) var(--s4); border-radius: 16px; }
}

/* 2026-09-04 · ม่านครีมกลับไปหนา .65 เท่าของ 4 ส.ค. ตามที่เจ้าของเลือก
   วัดแล้วความ "ฟุ้งสวย" ของเวอร์ชัน 4 ส.ค. มาจากม่านหนา ไม่ได้มาจากตัวรูป
   (ภาพเดิม + ม่านบาง วัดได้แย่กว่าปัจจุบันอีก) จึงคงรูปใบไม้จริงของศูนย์ไว้
   แล้วหนาม่านอย่างเดียว ได้ค่าดีกว่าทั้งของเดิมและของปัจจุบันทุกตัว
   ความแปรปรวนพื้นหลัง .27 -> .17 · จุดมืดสุด .10 -> .41 */
.bg-services, .bg-about, .bg-contact {
  background-image:
    linear-gradient(rgba(253,250,244,.65), rgba(253,250,244,.65)), var(--tex);
}
.bg-services { --tex: url('assets/textures/tex_services.webp'); }
.bg-about    { --tex: url('assets/textures/tex_about.webp'); }
.bg-contact  { --tex: url('assets/textures/tex_contact.webp'); }

/* 2026-09-04 · คืนสีตามโทเคนของ design system
   สามบรรทัดนี้เคยถูกดันให้เข้มกว่าโทเคน เพราะพื้นใบไม้ตอนม่านบางมันสว่างและมีลาย
   ม่าน .65 ทำให้พื้นเรียบพอจะใช้ค่าจริงจากระบบได้แล้ว ตรวจคอนทราสต์ผ่านทั้งสองจอ */
.bg-services .gallery-category > h3,
.bg-about .gallery-category > h3,
.bg-contact .gallery-category > h3 { color: var(--ink); }
/* --terra (4.8:1 บนครีมล้วน) ยังไม่พอเมื่อวางบนพื้นใบไม้ วัดได้ 3.42-4.42 ตกเกณฑ์ 4.5
   เฉพาะสาม section ที่มีพื้นใบไม้จึงใช้เฉดเข้มกว่า ที่พื้นครีมล้วนใช้ --terra ตามระบบ */
.bg-services .section-kicker,
.bg-about .section-kicker,
.bg-contact .section-kicker { color: #5E2D12; }
.combined-contact a { color: var(--sage-deep); }
/* ปุ่มโปร่งบนพื้นใบไม้อ่านยาก ให้พื้นขาวไปเลย ขอบเขียวยังอยู่ */
.careers-strip .btn-secondary { background: #fff; }
/* "ติดตามเรา" ตกอยู่ตรงจุดที่ลายใบไม้สว่างที่สุดพอดี เข้มขึ้นอีกขั้นเฉพาะตัวนี้ */
/* แถบร่วมงานกับเราวางบนพื้นใบไม้ ไม่ได้อยู่ในแผงขาว ให้พื้นขาวโปร่งรองเหมือนลิสต์อื่น */
.careers-strip { background: rgba(255,255,255,.90); border-radius: 20px; padding: var(--s5) var(--s6); }


/* ===========================================================================
   2026-09-01 · ส่วนติดตามเรา จัดใหม่ตามที่เจ้าของสั่ง
   แถวบน Facebook + Instagram · แถวล่าง Google Maps แยกสองสาขา
   =========================================================================== */
.social-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;   /* การ์ดฟีดสูงกว่าเพื่อนเสมอ ปล่อยให้แต่ละใบสูงตามเนื้อหาจริง */
}
.social-fb { grid-row: auto; }                 /* เลิกกินสองแถว จะได้อยู่แถวเดียวกับ IG */
.social-fb .social-slot { min-height: 520px; }
.social-foot { margin-top: var(--s6); }
.social-foot a {
  font-size: 17px; font-weight: 600; color: var(--sage-deep);
  text-decoration: none; border-bottom: 1px solid var(--terra);
}
.social-mark-gg { background: #EA4335; }

@media (max-width: 900px) {
  /* แถวเลื่อนแนวนอนบนจอเล็กเหมือนเดิม แต่ตอนนี้มี 4 ใบ */
  .social-rail { display: flex; }
  .social-card { flex: 0 0 84%; }
  .social-fb .social-slot { min-height: 440px; }
}

/* ===========================================================================
   2026-09-02 · ส่วนติดตามเรา รอบที่เจ้าของขอฟีดจริงและกล่องเท่ากัน
   1. เฟซบุ๊กและไอจีเป็นกล่องฟีดเลื่อนดูได้ทั้งคู่ สูงเท่ากันเป๊ะ
   2. ไอจีไม่มีปลั๊กอินฟีดทั้งโปรไฟล์ จึงฝังโพสต์ทีละชิ้นซ้อนกันในกล่องที่เลื่อนได้
   3. การ์ดแผนที่ฝังแผนที่จริง ไม่ใช่แค่ลิงก์
   =========================================================================== */
.social-rail { align-items: stretch; }          /* ทุกใบในแถวเดียวกันสูงเท่ากัน */

.social-feedcard .social-slot {
  /* ต้องเป็นความสูงตายตัว ไม่ใช่ min-height ไม่งั้นกล่องจะยืดตามฟีดจนไม่มีอะไรให้เลื่อน */
  flex: 0 0 640px; height: 640px;
  display: flex; flex-direction: column; background: var(--tint);
}
.social-feedcard .social-slot > iframe { flex: 1; min-height: 0; height: auto; }
/* ปลั๊กอินเพจเรนเดอร์กว้างสุด 500px ถ้าปล่อยเต็มคอลัมน์จะเหลือขาวข้าง ๆ ไม่เท่ากัน */
.social-fb .social-slot > iframe { max-width: 500px; margin: 0 auto; }

/* กล่องไถ่ดูของไอจี โพสต์เรียงลงล่าง เลื่อนอยู่ในกล่องไม่ลากหน้าเว็บไปด้วย */
.social-feed {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 14px; padding: 14px;
}
.social-feed iframe {
  flex: 0 0 auto; width: 100%; max-width: 460px; margin: 0 auto;
  border: 0; border-radius: 14px; background: #fff; display: block;
}

/* การ์ดแผนที่ ปุ่มชิดล่างเสมอ ขอบล่างสองใบจะได้ตรงกัน */
.social-mapcard .social-body { flex: 1; }
.social-mapcard .map-embed { margin-top: 0; aspect-ratio: 16 / 10; align-self: stretch; }
.social-mapcard .btn { margin-top: auto; }

@media (max-width: 900px) {
  .social-feedcard .social-slot { flex-basis: 560px; height: 560px; }
  .social-feed iframe { max-width: none; }
}

/* ===========================================================================
   2026-09-02 · แก้พื้นหลังยืด — ปัญหาที่เจ้าของจับได้
   วัดจริง: ไฟล์พื้นผิว 1500x1000 (1.5:1) ถูกยืดลงกล่องสูง
     desktop  1440x2054 = 0.70:1  (แบนลง 2.1 เท่า)
     desktop  1440x3940 = 0.37:1  (แบนลง 4.1 เท่า)
     mobile    390x4566 = 0.09:1  (แบนลง 17 เท่า)  <- ที่เห็นว่าเละ
   ฮีโร่ไม่พังเพราะกล่องมันเตี้ย สัดส่วนใกล้ไฟล์อยู่แล้ว

   ทางแก้: เลิกให้ section เป็นคนอุ้มรูป ย้ายรูปไปอยู่บนชั้น sticky สูงเท่าจอ
   ชั้นนี้ค้างอยู่กับที่ขณะเนื้อหาเลื่อนผ่าน กรอบของรูปจึงเท่ากับ "จอ" ไม่ใช่ "ความสูง section"
   ผลคือ cover ทำงานถูกต้อง: รูปเดียว ไม่ซ้ำ ไม่ยืด ไม่ซูม ไม่ว่า section จะยาวแค่ไหน
   ใช้ sticky ไม่ใช่ background-attachment:fixed เพราะ Safari บน iOS ไม่รองรับ fixed
   =========================================================================== */
/* ชั้น sticky สูง 100vh เคยใช้ตรงนี้ ถอดออกแล้ว 2026-09-02
   มันแก้เรื่องรูปยืดได้จริง แต่คู่กับ `.wrap { margin-top: -100vh }` ทำให้เบราว์เซอร์บางตัว
   วาดหน้าไม่ออกเลยกลางหน้า (เจอในแถบพรีวิว: DOM มีของครบ แต่เฟรมที่วาดออกมาว่างเปล่า)
   เปลี่ยนมาใช้ background-attachment: fixed แทน ได้ผลเหมือนกันทุกอย่าง
   คือกรอบของรูปเท่ากับ "จอ" ไม่ใช่ "ความสูง section" แต่ไม่ต้องแตะเลย์เอาต์เลย */
.bg-services, .bg-about, .bg-contact {
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
  background-position: center, center;
  background-size: auto, cover;
}
/* iOS Safari ไม่รองรับ background-attachment: fixed (ปฏิบัติเหมือน scroll)
   ถ้าปล่อยไว้ cover จะซูมรูปบนกล่องสูงหลายพันพิกเซลจนอ่านเป็นสีพื้น
   เฉพาะ iOS จึงวางรูปเดียวสูงเท่าจอไว้ด้านบน ไม่ซ้ำ ไม่ยืด ที่เหลือเป็นครีม */
@supports (-webkit-touch-callout: none) {
  .bg-services, .bg-about, .bg-contact {
    background-attachment: scroll, scroll;
    background-position: center, center top;
    background-size: auto, auto 100vh;
  }
}

}

/* ===========================================================================
   2026-09-02 · ส่วนติดต่อเรา รอบที่เจ้าของขอ
   1. ตัดการ์ด "โทรมาถามอะไรได้บ้าง" ออก เหลือช่องเดียวเต็มแถว
   2. หัวข้อบนพื้นใบไม้อ่านยากกว่าเวอร์ชันเก่า เพราะเวอร์ชันเก่าตัวอักษรนอนบนพื้นเรียบ
      ส่วนอันนี้นอนบนใบไม้ที่มีทั้งจุดสว่างและเงาเข้มสลับกันหลังตัวอักษรพอดี
      text-shadow ครีมช่วยได้แค่ตรงที่พื้นเข้ม ตรงที่พื้นสว่างมันหายไปเลย
      แก้ด้วยการปูแสงครีมนุ่ม ๆ ไว้หลังบล็อกหัวข้อ ให้พื้นตรงนั้นเรียบพอจะอ่านสระและวรรณยุกต์ออก
      ใช้ radial ขอบฟุ้ง ไม่ใช่กล่องทึบ จะได้อ่านเป็นแสงตกกระทบ ไม่ใช่แผ่นป้ายแปะทับ
   =========================================================================== */
.contact-grid { grid-template-columns: 1fr; }
.contact-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s6) var(--s8); align-items: center;
}
.contact-cta .cc-text h3 { margin-bottom: 10px; }
.contact-cta .cc-text p { margin: 0; max-width: 46ch; }
.cc-act { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cc-act .phone-big { margin: 0; }
.cc-act .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }
@media (max-width: 760px) {
  .contact-cta { grid-template-columns: 1fr; align-items: start; }
  /* .cc-act เป็นคอลัมน์ที่หดตามเนื้อหา ปุ่มสองใบเลยตกบรรทัดทั้งที่กว้างพอ */
  .cc-act { align-self: stretch; }
  .cc-act .cta-row { width: 100%; }
}
@media (max-width: 480px) {
  /* padding 48px สองข้างเหลือที่ให้ปุ่ม 246px แต่ปุ่มสองใบรวมช่องไฟกิน 268px
     ลด padding ลงแทนที่จะปล่อยให้ปุ่มตกบรรทัด */
  .contact-cta { padding: 30px 28px; }
}

/* 2026-09-04 · ถอดแสงครีมฟุ้งหลังหัวข้อออก (เคยใส่ไว้รอบ 13)
   มันมีไว้ชดเชยม่านบาง .30 ที่ทำให้ใบไม้มีจุดสว่าง-เงาเข้มสลับกันหลังตัวอักษร
   พอม่านกลับไปหนา .65 พื้นเรียบพอแล้ว ไม่ต้องปูแสงรองอีกชั้น
   text-shadow ก็ถอดออกด้วยเหตุผลเดียวกัน */
}

/* ภาพระเบียงมีจุดสว่างจัดตรงที่ป้ายหัวข้ออยู่พอดี ม่านครีมหนากว่าเพื่อนเฉพาะใบนี้ */
.bg-about {
  background-image:
    linear-gradient(rgba(253,250,244,.42), rgba(253,250,244,.42)), var(--tex);
}

/* ===========================================================================
   2026-09-20 รอบที่ 26 · หัวเว็บตัวใหญ่ขึ้น + ฮีโร่โชว์ภาพเต็มใบ
   เจ้าของอนุมัติจากสเกตช์ก่อนลงมือ ตัวเลขทุกตัวมาจากการวัดของจริงที่จอ 1440
   =========================================================================== */

/* --- 1. หัวเว็บ: กล่องขวากินสูงทั้งสองแถว ---------------------------------
   เดิม .right อยู่ในแถวบนแถวเดียว ข้างเมนูจึงเหลือขาวว่าง 800x24px
   ตอนนี้ .top ยืดลูกทั้งสองให้สูงเท่ากัน (.head-left ถือโลโก้+เมนู)
   แล้ว .right จัดกึ่งกลางแนวตั้งของความสูงนั้น */
header.site .top { align-items: stretch; padding: 0; }
.head-left { flex: 1; min-width: 0; padding: 18px 0 0 48px; }
header.site .right { align-items: center; gap: 24px; padding: 0 48px; }

/* ขนาดตัวอักษรชุดใหม่ (เจ้าของเลือก "ตามสเกตช์" 2026-09-20) */
header.site .logo-row img { height: 64px; }
header.site .brand { font-size: 28px; }
header.site .brand small { font-size: 17px; }
header.site .phone { font-size: 32px; line-height: 1.1; }
header.site .phone small { font-size: 16px; margin-top: 2px; }
nav.site-nav { width: auto; padding: 14px 0 16px; }
nav.site-nav a { font-size: 17px; }
.lang-switch button { min-height: 52px; min-width: 58px; font-size: 17px; }

@media (max-width: 900px) {
  .head-left { padding: 16px 0 0 24px; }
  header.site .right { padding: 0 24px; gap: 16px; }
  header.site .phone { font-size: 26px; }
  nav.site-nav { padding: 12px 0 14px; }
}

/* จอมือถือกลับไปเป็นคอลัมน์เหมือนเดิมทุกอย่าง เจ้าของสั่ง "มือถือคงเดิม" */
@media (max-width: 640px) {
  header.site .top { flex-direction: column; align-items: center; padding: 10px 0; }
  .head-left { flex: none; width: 100%; padding: 0; text-align: center; }
  header.site .logo-row { justify-content: center; }
  header.site .logo-row img { height: 34px; }
  header.site .brand { font-size: 17px; }
  header.site .right { padding: 0 16px; gap: 14px; }
  header.site .phone { font-size: 17px; }
  header.site .phone small { font-size: 12px; }
  nav.site-nav { width: 100%; padding: 8px 16px 0; }
  nav.site-nav a { font-size: var(--fs-label); }
  .lang-switch button { min-width: 40px; min-height: 30px; font-size: var(--fs-label); }
}

/* --- 2. ฮีโร่: สัดส่วนกรอบ = สัดส่วนไฟล์ภาพ จึงไม่ถูกครอป ------------------
   ไฟล์ assets/site-photos/center_courtyard.webp = 1760x927 (อัตราส่วน 1.8986)
   เดิมกรอบสูง 640px ที่จอ 1440 แต่ background-size:cover ย่อภาพเป็น 1440x758
   ส่วนเกิน 118px จึงถูกตัดทิ้ง (บน 68 ล่าง 50 = 16% ของภาพ)
   ตั้ง aspect-ratio ให้ตรงกับไฟล์ cover จึงพอดีเป๊ะ ไม่เหลือส่วนเกินให้ตัด
   min-height กันไว้เป็นพื้น เผื่อจอแคบที่ความสูงตามสัดส่วนน้อยกว่าตัวข้อความ
   ต่ำกว่า 1100px ภาพเต็มบน-ล่างอยู่แล้ว (โดนตัดซ้าย-ขวาแทน) จึงไม่แตะ */
@media (min-width: 1101px) {
  .hero { aspect-ratio: 1760 / 927; min-height: 640px; }
}

/* --- 3. หักความสูงคืนจากช่องว่างใต้ฮีโร่ รวม -52px ------------------------- */
.trust-band { padding: 22px 0; }        /* 28 -> 22 = -12 */
.quick-overview { padding: 8px 0 32px; } /* ล่าง 56 -> 32 = -24 */
.quick-card { padding: 40px; }           /* var(--s7)=48 -> 40 = -16 */
@media (max-width: 640px) {
  .quick-card { padding: 28px 20px; }
}