/* =========================================================
   CO HAPPY SPACE CLINIC — corporate medical design
   Clean white · navy headings · blue→teal gradient accents
   ========================================================= */
:root {
  --navy: #16324a;
  --teal: #17a08e;
  --teal-dark: #128070;
  --blue: #3d92c6;
  --grad: linear-gradient(95deg, #2f7fc0 0%, #1aa88b 100%);
  --grad-soft: linear-gradient(95deg, rgba(47, 127, 192, .1), rgba(26, 168, 139, .1));
  --ink: #22384a;
  --body: #5c6f7d;
  --faint: #8fa2ad;
  --bg: #ffffff;
  --bg-soft: #f4f9fb;
  --line: #e3edf2;
  --r-lg: 18px;
  --r-md: 12px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(22, 50, 74, .04), 0 8px 22px -12px rgba(22, 50, 74, .18);
  --shadow-md: 0 10px 28px -14px rgba(22, 50, 74, .3);
  --shadow-lift: 0 18px 40px -20px rgba(23, 160, 142, .45);
  --hair: #e8eef2;
  --mint: #eafaf5;
  --sky: #eaf4fc;
  --sun: #fff4e2;
  --lilac: #f1eefc;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* editorial type scale */
  --fs-display: clamp(2.35rem, 12.4vw, 3.6rem);
  --fs-h2: clamp(1.65rem, 2.9vw, 2.4rem);
  --fs-h3: 1.12rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .72rem;
  /* vertical rhythm */
  --sp-section: clamp(5rem, 9vw, 8.5rem);
  --font-head: 'Kanit', sans-serif;
  --font-body: 'Kanit', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.85;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Thai has no inter-word spaces: let the browser break on phrase boundaries,
     never mid-word, and never hyphenate */
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: normal;
  hyphens: none;
}
p { max-width: 68ch; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--font-head); color: var(--navy); }
h1 { font-weight: 500; letter-spacing: 0; line-height: 1.32; }
h2 { font-weight: 500; letter-spacing: 0; line-height: 1.38; }
h3 { font-weight: 500; letter-spacing: 0; line-height: 1.55; }
h1, h2, h3 { text-wrap: pretty; }
strong { font-weight: 500; }
.prose strong, .checks strong, .split-copy strong { color: var(--ink); }

.wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 500; font-size: .92rem;
  letter-spacing: .01em;
  padding: .85rem 1.9rem; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: box-shadow .35s var(--ease), transform .3s var(--ease),
              background-color .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1em; height: 1em; }
.btn-grad {
  background: var(--grad); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(23, 160, 142, .8);
}
.btn-grad:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-white { background: #fff; color: var(--navy); border-color: var(--hair); box-shadow: var(--shadow-sm); }
.btn-white:hover { border-color: var(--teal); color: var(--teal-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-white svg { color: var(--teal); }
.btn-outline { border-color: var(--teal); color: var(--teal-dark); background: transparent; }
.btn-outline:hover { background: var(--teal); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-white-solid { background: #fff; color: var(--teal-dark); }
.btn-white-solid:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); }

.text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 500; font-size: .89rem;
  color: var(--navy); padding-bottom: 2px;
  border-bottom: 1px solid var(--hair);
  transition: border-color .25s ease, color .25s ease;
}
.text-link:hover { color: var(--teal-dark); border-bottom-color: var(--teal); }
.text-link svg { width: .95em; height: .95em; }

/* Two-tone headline */
.line-navy { color: var(--navy); }
.line-teal { color: var(--teal-dark); font-weight: 500; }

/* Underlined section heading */
.underlined { position: relative; }
.sec-head {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1.4rem;
  padding-bottom: 1.4rem; margin-bottom: 3.2rem;
  border-bottom: 1px solid var(--hair);
}
.sec-num {
  font-family: var(--font-head); font-size: .78rem; font-weight: 500;
  letter-spacing: .04em; color: #fff; background: var(--grad);
  width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center; align-self: center;
  box-shadow: 0 6px 14px -8px rgba(23,160,142,.9);
}
.sec-head h2 { font-size: var(--fs-h2); margin: 0; }
.sec-label {
  display: block; font-family: var(--font-head);
  font-size: .84rem; font-weight: 500; letter-spacing: .02em;
  color: var(--teal-dark); margin-bottom: .5rem;
}
.sec-head .text-link { border-bottom: 0; white-space: nowrap; }
@media (max-width: 700px) {
  .sec-head { grid-template-columns: auto 1fr; gap: 1rem; margin-bottom: 2.2rem; }
  .sec-head .text-link { grid-column: 2; margin-top: .8rem; }
}

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 74px; position: relative;
}
.brand img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav-link {
  font-family: var(--font-head); font-weight: 500; font-size: .93rem; color: var(--ink);
  padding: .4rem 0; position: relative;
  transition: color .2s ease;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2.5px; border-radius: 2px; background: var(--grad);
  transition: right .25s ease;
}
.nav-link:hover { color: var(--teal-dark); }
.nav-link.active { color: var(--teal-dark); }
.nav-link.active::after { right: 0; }
.header-right { display: flex; align-items: center; gap: .9rem; }
.header-phone {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--teal-dark);
  display: grid; place-items: center;
  transition: background-color .2s ease, color .2s ease;
}
.header-phone:hover { background: var(--teal); color: #fff; }
.header-phone svg { width: 17px; height: 17px; }
.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-toggle span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(680px 460px at 92% 0%, rgba(61, 146, 198, .16), transparent 68%),
    radial-gradient(520px 420px at 4% 88%, rgba(23, 160, 142, .12), transparent 70%),
    #fff;
  border-bottom: 1px solid var(--hair);
}
.hero-inner {
  display: grid; grid-template-columns: 6.6fr 5.4fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: end;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 0;
}
.hero-copy { padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.hero-copy h1 {
  font-size: var(--fs-display); font-weight: 500;
  line-height: 1.3; margin-bottom: 1.6rem;
}
.hero-copy > p { max-width: 48ch; font-size: 1.02rem; margin-bottom: 2.4rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-trust { display: flex; align-items: center; gap: 1.1rem; margin-top: 3.2rem; padding-top: 1.8rem; border-top: 1px solid var(--hair); }
.avatar-stack { display: flex; }
.avatar-stack img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top;
  background: var(--sky); border: 2.5px solid #fff; box-shadow: 0 2px 8px -4px rgba(22,50,74,.4);
  transition: transform .35s var(--ease);
}
.avatar-stack img + img { margin-left: -12px; }
.hero-trust p { display: flex; flex-direction: column; line-height: 1.5; }
.hero-trust strong { font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--navy); }
.hero-trust span { font-size: .84rem; color: var(--body); }

.hero-visual { position: relative; align-self: end; margin-bottom: 0; }
.hero-building {
  width: 100%; height: clamp(340px, 46vw, 520px); object-fit: cover; object-position: center top;
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.hero-building-tag {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.96); color: var(--navy); backdrop-filter: blur(6px);
  font-family: var(--font-head); font-weight: 500; font-size: .78rem;
  letter-spacing: .02em;
  padding: .6rem 1.1rem; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.hero-building-tag svg { width: 14px; height: 14px; color: var(--teal-dark); }

.hero-panel {
  display: none;
}
.panel-item {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.1rem;
}
.panel-item + .panel-item { border-top: 1px solid var(--line); }
.panel-ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--teal-dark);
  display: grid; place-items: center;
  background: var(--bg-soft);
}
.panel-ico svg { width: 20px; height: 20px; }
.panel-item > span:last-child {
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--navy);
  line-height: 1.35; display: flex; flex-direction: column;
}
.panel-item small { font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: var(--body); }

/* ---------- Mission ---------- */
.mission { padding: clamp(3.5rem, 6vw, 5.5rem) 0; margin-top: 0; border-bottom: 1px solid var(--hair); }
.mission-card {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}
.mission-item { padding: 0; text-align: left; }
.m-ico {
  width: 52px; height: 52px; border-radius: var(--r-md);
  border: 0; color: var(--teal-dark); display: grid; place-items: center; margin: 0 0 1.2rem;
  background: var(--mint);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.m-ico svg { width: 24px; height: 24px; stroke-width: 1.6; }
.mission-item:nth-child(2) .m-ico { background: var(--sky); color: var(--blue); }
.mission-item:nth-child(3) .m-ico { background: var(--lilac); color: #6d5fbf; }
.mission-item:nth-child(4) .m-ico { background: var(--sun); color: #d98324; }
.mission-item:hover .m-ico { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.mission-item h3 { font-size: 1.02rem; font-weight: 500; margin-bottom: .6rem; }
.mission-item p { font-size: .875rem; line-height: 1.75; }

/* ---------- Sections base ---------- */
.section-bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  padding-bottom: 1.4rem; margin-bottom: 3.2rem;
  border-bottom: 1px solid var(--hair);
}
.section-bar h2 { font-size: var(--fs-h2); font-weight: 500; padding-bottom: 0; }
.section-bar h2::after { display: none; }

/* ---------- Services ---------- */
.services { padding: var(--sp-section) 0; }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; border-top: 0; }
.svc-grid > .svc-card:nth-child(n+7) { transform: none; }
.svc-card {
  position: relative; background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-md); display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.3rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s ease;
}
.svc-card:hover {
  transform: translateY(-4px); border-color: transparent;
  box-shadow: 0 16px 34px -18px rgba(22, 50, 74, .45);
}
.svc-card figure {
  width: 56px; height: 56px; display: grid; place-items: center; flex: none;
  border-radius: var(--r-md);
  transition: transform .35s var(--ease);
}
.svc-card:hover figure { transform: scale(1.06) rotate(-2deg); }
.svc-card figure img { width: 38px; height: 38px; object-fit: contain; }
.tint-a { background: linear-gradient(160deg, #e8f3fb, #f4fafd); }
.tint-b { background: linear-gradient(160deg, #e6f6f2, #f2fbf8); }
.tint-c { background: linear-gradient(160deg, #efeefa, #f8f7fd); }
.tint-d { background: linear-gradient(160deg, #e9f5ee, #f5fbf7); }
.tint-e { background: linear-gradient(160deg, #fdf1e7, #fef9f3); }
.tint-f { background: linear-gradient(160deg, #e9f1fb, #f4f8fd); }
.svc-body {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  flex: 1; padding: 0;
}
.svc-body h3 { font-size: 1.02rem; font-weight: 500; }
.svc-arrow {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-pill);
  background: var(--bg-soft); color: var(--teal-dark); font-size: .85rem;
  display: grid; place-items: center;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s var(--ease), transform .35s var(--ease), background-color .3s ease, color .3s ease;
}
.svc-card:hover .svc-arrow { opacity: 1; transform: none; background: var(--grad); color: #fff; }

/* ---------- Band ---------- */
.band-wrap { padding: 0 0 var(--sp-section); }
.band {
  background: var(--grad); border-radius: var(--r-lg); color: #fff;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 2.4rem 2.4rem;
  box-shadow: 0 20px 44px -24px rgba(23, 160, 142, .8);
}
.band-item {
  display: flex; align-items: center; gap: .9rem;
  padding: .3rem 1.5rem;
}
.band-item + .band-item { border-left: 1px solid rgba(255, 255, 255, .16); }
.band-item svg { width: 26px; height: 26px; flex: none; opacity: .85; stroke-width: 1.5; }
.band-item strong { display: block; font-family: var(--font-head); font-weight: 500; font-size: 1rem; line-height: 1.5; }
.band-item span { font-size: .8rem; color: rgba(255, 255, 255, .78); line-height: 1.55; display: block; margin-top: .15rem; }

/* ---------- Approach ---------- */
.approach { padding: 0 0 var(--sp-section); }
.approach-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.approach-media, .standards-media {
  background: linear-gradient(150deg, var(--sky), var(--mint));
  border-radius: var(--r-lg); padding: 3rem;
  display: grid; place-items: center;
  min-height: 400px;
}
.approach-media img, .standards-media img { max-width: 340px; width: 100%; }
.approach-copy h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 500; margin-bottom: 1.4rem; }
.approach-copy > p { margin-bottom: 1.8rem; }
.checks { display: grid; gap: .7rem; margin-bottom: 1.7rem; }
.checks li { position: relative; padding-left: 2rem; font-weight: 500; color: var(--ink); font-size: .97rem; }
.checks li::before {
  content: ''; position: absolute; left: 0; top: .32em;
  width: 1.3em; height: 1.3em; border-radius: 50%;
  background: rgba(23, 160, 142, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128070' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/55% no-repeat;
}

/* ---------- Standards ---------- */
.standards { background: var(--bg-soft); border-block: 1px solid var(--hair); padding: var(--sp-section) 0; }
.standards-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.standards-copy h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 500; margin-bottom: 1.4rem; }
.standards-copy > p { margin-bottom: 1.3rem; }

/* ---------- Team ---------- */
.team { padding: var(--sp-section) 0; }
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem; }
.team-card {
  background: none; border: 0; border-radius: 0;
  overflow: hidden; display: flex; flex-direction: column;
}
.team-card figure {
  height: 240px; background: linear-gradient(170deg, var(--sky), var(--mint));
  border-radius: var(--r-lg);
  display: flex; align-items: flex-end; justify-content: center;
  padding-top: 1rem; overflow: hidden;
  transition: box-shadow .35s var(--ease);
}
.team-card figure img { transition: transform .5s ease; }
.team-card:hover figure img { transform: scale(1.05); }
.team-card:hover figure { box-shadow: 0 18px 36px -20px rgba(22,50,74,.5); }
.team-card figure img { max-height: 100%; width: auto; max-width: 90%; object-fit: contain; }
.team-body { padding: 1.1rem 0 0; display: flex; flex-direction: column; flex: 1; }
.team-body h3 { font-size: .98rem; font-weight: 500; line-height: 1.55; }
.team-body p { font-family: var(--font-head); font-size: .82rem; font-weight: 400; color: var(--body); margin: .3rem 0 .9rem; }
.team-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 400; font-size: .84rem; color: var(--navy);
  padding-bottom: 3px; border-bottom: 1px solid var(--hair); align-self: flex-start;
  transition: border-color .25s ease, color .25s ease;
}
.team-link span { background: none; color: inherit; width: auto; height: auto; }
.team-card:hover .team-link { color: var(--teal-dark); border-bottom-color: var(--teal); }
.team-link:hover { color: var(--teal-dark); }

/* ---------- Contact ---------- */
.contact { padding: var(--sp-section) 0; }
.contact-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.contact-copy h2 { font-size: clamp(1.6rem, 2.7vw, 2.3rem); font-weight: 500; margin-bottom: 1.3rem; }
.contact-copy > p { margin-bottom: 1.4rem; }
.contact-list { display: grid; gap: 1rem; margin-bottom: 1.7rem; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; font-size: .95rem; }
.contact-list a:hover { color: var(--teal-dark); }
.c-ico {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--mint); border: 0; color: var(--teal-dark);
  display: grid; place-items: center; margin-top: 0;
}
.c-ico svg { width: 18px; height: 18px; stroke-width: 1.4; }
.contact-map iframe {
  width: 100%; min-height: 430px; border: 1px solid var(--hair); display: block;
  border-radius: var(--r-lg);
}

/* ---------- CTA ---------- */
.cta-wrap { padding: 0 0 var(--sp-section); }
.cta {
  background: var(--grad); border-radius: var(--r-lg); color: #fff;
  padding: 3.2rem 3rem; position: relative; overflow: hidden;
  box-shadow: 0 24px 50px -28px rgba(23, 160, 142, .9);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.cta h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 500; margin-bottom: .5rem; }
.cta p { color: rgba(255, 255, 255, .82); font-size: .92rem; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-soft); border-top: 1px solid var(--hair); }
.footer-grid {
  display: grid; grid-template-columns: 4fr 2fr 2fr 3fr; gap: 3rem;
  padding: clamp(3rem, 5vw, 4.5rem) 0 2.8rem;
}
.footer-logo { height: 46px; width: auto; margin-bottom: 1rem; }
.footer-about p { font-size: .9rem; line-height: 1.8; max-width: 34ch; }
.footer-col { display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.footer-col h3 { font-size: .86rem; font-weight: 500; letter-spacing: .01em; color: var(--navy); margin-bottom: .9rem; }
.footer-col a:hover { color: var(--teal-dark); }
.footer-bottom { border-top: 1px solid var(--hair); padding: 1.4rem 0; font-size: .8rem; color: var(--faint); }
.footer-bottom-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-licence { opacity: .72; }
.footer-licence::before { content: ' · '; }
.footer-legal a { text-decoration: underline; }
.footer-hours { margin-bottom: .35rem; }
.footer-bottom strong { color: var(--navy); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav.open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md); padding: .6rem 1.4rem 1rem; z-index: 99;
  }
  .nav.open .nav-link { padding: .75rem .2rem; border-bottom: 1px solid var(--line); }
  .nav.open .nav-link::after { display: none; }
  .nav.open .nav-link:last-child { border-bottom: 0; }
  .menu-toggle { display: flex; }
  .hero-inner { grid-template-columns: 1.2fr 1fr; }
  .hero-panel { display: none; }
}

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 3rem; min-height: 0; }
  .hero-copy { padding-bottom: 0; text-align: center; }
  .hero-copy > p { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-trust { justify-content: center; text-align: left; }
  .hero-visual { margin-top: 1.5rem; }
  .hero-doctor { max-height: 320px; }
  .band { grid-template-columns: 1fr 1fr; gap: 1rem 0; padding: 1.6rem .6rem; }
  .band-item:nth-child(3) { border-left: 0; }
  .approach-grid, .standards-grid, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .approach-media, .standards-media { max-width: 460px; width: 100%; margin-inline: auto; min-height: 340px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .wrap { width: calc(100% - 32px); }
  .header-cta { display: none; }
  .hero-trust { flex-direction: row; align-items: center; gap: 1rem; }
  .hero-trust p { text-align: left; align-items: flex-start; }
  .brand img { height: 38px; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-card figure { height: 165px; }
  .band { grid-template-columns: 1fr; }
  .band-item { border-left: 0 !important; }
  .band-item + .band-item { border-top: 1px solid rgba(255,255,255,.25); padding-top: 1.1rem; }
  .section-bar { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .cta { padding: 2rem 1.6rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
}

@media (max-width: 400px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ---------- Blog ---------- */
.page-head { background: linear-gradient(100deg, #ffffff 40%, #eaf4fa 100%); border-bottom: 1px solid var(--line); padding: 3rem 0 2.6rem; }
.page-head h1 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 700; margin-bottom: .4rem; }
.page-head p { color: var(--body); max-width: 60ch; }
.crumbs { font-size: .84rem; color: var(--faint); margin-bottom: .9rem; font-family: var(--font-head); }
.crumbs a:hover { color: var(--teal-dark); }
.crumbs span { margin: 0 .35rem; }

.blog-list { padding: 3.5rem 0 4.5rem; }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.post-card {
  display: flex; flex-direction: column;
  background: #fff; border: 0; border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .35s var(--ease);
}
.post-card:hover { transform: translateY(-4px); }
.post-card figure { height: 150px; display: grid; place-items: center; }
.post-card figure img { width: 62px; height: 62px; object-fit: contain; }
.post-body { padding: 1.2rem 0 0; display: flex; flex-direction: column; flex: 1; }
.post-tag {
  align-self: flex-start; font-family: var(--font-head); font-weight: 500; font-size: .76rem;
  letter-spacing: .01em;
  color: var(--teal-dark); background: var(--mint);
  padding: .18rem .8rem; border-radius: var(--r-pill); margin-bottom: .75rem;
}
.post-body h2, .post-body h3 { font-size: 1.06rem; font-weight: 500; line-height: 1.6; margin-bottom: .55rem; }
.post-body p { font-size: .92rem; color: var(--body); margin-bottom: 1rem; }
.post-body .text-link { margin-top: auto; }
.post-meta { font-size: .78rem; color: var(--faint); font-family: var(--font-head); margin-bottom: .4rem; }

/* Article page */
.article-wrap { padding: 3rem 0 4rem; }
.article { max-width: 780px; margin-inline: auto; }
.article-head h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 500; margin-bottom: 1rem; }
.article-meta { display: flex; gap: 1rem; align-items: center; font-family: var(--font-head); font-size: .84rem; color: var(--faint); margin-bottom: 1.6rem; flex-wrap: wrap; }
.article-cover {
  border-radius: var(--r-lg); padding: 2.4rem;
  display: grid; place-items: center; margin-bottom: 2.2rem;
}
.article-cover img { width: 110px; height: 110px; object-fit: contain; }
.prose h2 { font-size: 1.45rem; font-weight: 500; margin: 2.8rem 0 1rem; padding-bottom: .6rem; position: relative; }
.prose h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 2px; background: var(--grad); }
.prose h3 { font-size: 1.05rem; font-weight: 500; margin: 1.8rem 0 .6rem; }
.prose p { margin-bottom: 1.1rem; font-size: 1.02rem; line-height: 1.85; }
.prose ul, .prose ol { margin: 0 0 1.1rem 1.4rem; }
.prose li { margin-bottom: .45rem; }
.prose strong { color: var(--ink); }
.callout {
  background: var(--mint); border: 0; border-left: 4px solid var(--teal);
  border-radius: var(--r-md); padding: 1.4rem 1.6rem; margin: 2rem 0;
}
.callout-danger { border-left-color: #c0392b; background: #fdf6f5; }
.callout h3 { margin-top: 0 !important; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.disclaimer { font-size: .84rem; color: var(--faint); border-top: 1px solid var(--line); padding-top: 1.2rem; margin-top: 2.4rem; }
.article-cta {
  background: var(--grad); border-radius: var(--r-lg); color: #fff;
  padding: 2rem 2.2rem; margin-top: 2.6rem;
  box-shadow: 0 20px 44px -24px rgba(23,160,142,.85);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.article-cta h2 { color: #fff; font-size: 1.2rem; font-weight: 600; margin: 0 0 .2rem; }
.article-cta p { color: rgba(255,255,255,.88); font-size: .9rem; margin: 0; }
.related { max-width: 780px; margin: 3rem auto 0; }
.related h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 1.1rem; }

/* มือถือ: การ์ดบทความและบริการวางสองคอลัมน์เหมือนกันทั้งเว็บ */
@media (max-width: 720px) {
  .post-grid { grid-template-columns: 1fr 1fr; gap: .85rem; }
  .post-body { padding: .9rem 0 0; }
  .post-body h2, .post-body h3 { font-size: .95rem; line-height: 1.55; margin-bottom: .5rem; }
  .post-body .text-link { font-size: .84rem; }

  /* หน้ารวมบทความ — พอบีบเหลือครึ่งจอ คำโปรยกับวันที่จะตัดเป็นสิบบรรทัดจนอ่านไม่ไหว
     ตัดออกให้เหลือ รูปปก + หมวด + หัวเรื่อง ซึ่งเป็นสิ่งที่คนใช้ตัดสินใจกดจริง ๆ */
  .blog-list .post-body p,
  .blog-list .post-meta { display: none; }
  .blog-list .post-card figure.post-cover { aspect-ratio: 1.7 / 1; }

  /* "บทความที่เกี่ยวข้อง" ท้ายบทความ — ไม่มีรูปและคำโปรยอยู่แล้ว */
  .related .post-body { padding: .8rem 0 0; }
}

/* Blog on homepage */
.blog-home { padding: 0 0 var(--sp-section); }
.post-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .post-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .post-grid-4 {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: min(82%, 320px);
    grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: .25rem .25rem 1rem;
    margin-inline: -.25rem;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
  .post-grid-4 .post-card { scroll-snap-align: start; }
  .post-grid-4::-webkit-scrollbar { height: 6px; }
  .post-grid-4::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  .post-grid-4::-webkit-scrollbar-track { background: transparent; }
}

/* Cover images */
.post-card figure.post-cover { position: relative; height: auto; aspect-ratio: 2.2 / 1; padding: 0; overflow: hidden; border-radius: var(--r-md); }
.post-card figure.post-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover figure.post-cover img { transform: scale(1.05); }
.article-cover { padding: 0; overflow: hidden; }
.article-cover img { width: 100%; height: 300px; object-fit: cover; }
@media (max-width: 620px) { .article-cover img { height: 200px; } }

/* ---------- Packages ---------- */
.packages { background: #fff; border-block: 1px solid var(--hair); padding: var(--sp-section) 0; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; border-top: 0; }
.pkg-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--hair);
  border-radius: var(--r-lg); padding: 2.4rem 2rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s ease;
}
.pkg-card:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 20px 44px -22px rgba(22,50,74,.42); }
.pkg-featured { border: 2px solid transparent; background:
  linear-gradient(#fff, #fff) padding-box,
  var(--grad) border-box; }
.pkg-badge {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff;
  font-family: var(--font-head); font-weight: 500; font-size: .76rem;
  letter-spacing: .02em; z-index: 2;
  padding: .25rem 1.1rem; border-radius: var(--r-pill);
  box-shadow: 0 8px 18px -10px rgba(23,160,142,.9);
}
.pkg-ico {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--mint); border: 0; color: var(--teal-dark);
  display: grid; place-items: center; margin-bottom: 1.4rem;
  transition: transform .35s var(--ease);
}
.pkg-ico svg { width: 26px; height: 26px; stroke-width: 1.5; }
.pkg-card:hover .pkg-ico { transform: translateY(-3px) rotate(-3deg); }
.pkg-head h3 { font-size: 1.2rem; font-weight: 500; margin-bottom: .5rem; }
.pkg-head p { font-size: .875rem; color: var(--faint); margin-bottom: 1.6rem; }
.pkg-list { margin-bottom: 1.5rem; }
.pkg-list li { font-size: .92rem; font-weight: 400; }
.pkg-foot {
  margin-top: auto; padding-top: 1.6rem; border-top: 1px solid var(--hair);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.pkg-price { font-family: var(--font-head); font-weight: 400; font-size: .9rem; color: var(--faint); }
.promo-strip {
  margin-top: 2rem;
  background: linear-gradient(120deg, var(--mint), var(--sky));
  border: 0; border-radius: var(--r-lg);
  padding: 2rem 2.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.promo-tag {
  display: inline-block; font-family: var(--font-head); font-weight: 500; font-size: .78rem;
  letter-spacing: .01em;
  color: var(--teal-dark); background: none;
  padding: 0; border-radius: 0; margin-bottom: .6rem;
}
.promo-copy h3 { font-size: 1.15rem; font-weight: 500; margin-bottom: .3rem; }
.promo-copy p { font-size: .92rem; color: var(--body); }
.promo-strip .btn svg { color: #06c755; }

@media (max-width: 900px) {
  .promo-strip { flex-direction: column; align-items: flex-start; }
}

/* Featured package emphasis */
.pkg-featured {
  position: relative; border: 0;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  border: 2px solid transparent;
  box-shadow: 0 16px 40px -22px rgba(23, 160, 142, .7);
}
.pkg-featured::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px 200px at 50% 0%, rgba(23,160,142,.09), transparent 70%);
}
.pkg-ico-featured { background: var(--grad); border: 0; color: #fff; box-shadow: 0 10px 20px -12px rgba(23,160,142,.9); }
.pkg-featured .pkg-head h3 { font-size: 1.2rem; }
@media (max-width: 900px) {
}

/* Package price display */
.pkg-price-num { display: flex; flex-direction: column; line-height: 1.25; font-size: 1.75rem; font-weight: 500; color: var(--teal-dark); }
.pkg-price-num small { font-family: var(--font-body); font-weight: 300; font-size: .75rem; color: var(--faint); margin-bottom: .2rem; }

/* ---------- Contact form ---------- */
.contact-form-card {
  background: linear-gradient(160deg, var(--sky), #fff 60%);
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: 2.4rem 2.4rem; box-shadow: var(--shadow-sm);
}
.contact-form-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .3rem; }
.form-sub { font-size: .88rem; color: var(--faint); margin-bottom: 1.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.form-field { margin-bottom: .9rem; display: flex; flex-direction: column; gap: .3rem; }
.form-field label { font-family: var(--font-head); font-weight: 500; font-size: .84rem; color: var(--navy); }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--r-md);
  padding: .7rem .9rem; background: #fff;
  outline: none; transition: border-color .2s ease, background-color .2s ease;
  width: 100%; resize: vertical;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px rgba(23,160,142,.12);
}
.form-field input.invalid, .form-field textarea.invalid { border-color: #e2574c; }
/* honeypot — ซ่อนจากคน แต่บอตยังเห็นและกรอก */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-consent {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .82rem; line-height: 1.6; color: var(--body);
  margin: .2rem 0 .9rem; cursor: pointer;
}
.form-consent input {
  width: 17px; height: 17px; flex: none; margin-top: .18rem;
  accent-color: var(--teal); cursor: pointer;
}
.form-consent a { color: var(--teal-dark); text-decoration: underline; }
.form-consent.invalid { color: #c0392b; }
.form-consent.invalid input { outline: 2px solid #e2574c; outline-offset: 2px; border-radius: 4px; }

.form-note {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; color: var(--faint); margin-bottom: 1.1rem;
}
.form-note svg { width: 14px; height: 14px; color: var(--teal); flex: none; }
.form-submit { width: 100%; margin-top: .6rem; }
.form-status { margin-top: .9rem; font-size: .85rem; color: var(--teal-dark); }
.form-status a { text-decoration: underline; }
.form-status.form-status-err { color: #c0392b; }
.contact-map-wide { margin-top: 2rem; }
.contact-map-wide iframe { min-height: 320px; }

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: 1.6rem 1.3rem; }
}

/* ---------- Service detail page ---------- */
.svc-hero {
  border-radius: var(--r-lg); padding: 3rem;
  display: grid; place-items: center; margin-bottom: 2.8rem;
}
.svc-hero img { width: 110px; height: 110px; object-fit: contain; }
.lead-text {
  font-size: 1.12rem; color: var(--ink); font-weight: 400; line-height: 1.9;
  padding-left: 0; border-left: 0; max-width: 62ch;
  margin-bottom: 2.4rem;
}
.svc-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.svc-related .svc-card figure { height: 84px; }
.svc-related .svc-card figure img { width: 42px; height: 42px; }
@media (max-width: 720px) { .svc-related { grid-template-columns: 1fr 1fr; } }
/* คงสองคอลัมน์ไว้จนถึงจอแคบสุด — การ์ดมีแค่ไอคอนกับชื่อ บีบได้สบาย
   เดิมยุบเป็นคอลัมน์เดียวที่ 420px ซึ่งมือถือ Android ส่วนใหญ่เข้าเงื่อนไขพอดี */
@media (max-width: 420px) {
  .svc-related { gap: .7rem; }
  .svc-related .svc-card figure { height: 72px; }
  .svc-related .svc-card figure img { width: 36px; height: 36px; }
}

/* Readable lists inside article & service content */
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul li, .prose ol li { padding-left: .2rem; }
.prose ul li::marker, .prose ol li::marker { color: var(--teal); }
.callout ul { list-style: disc; margin-left: 1.2rem; }


/* ---------- Editorial layout · responsive ---------- */
@media (max-width: 1080px) {
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 3rem; }
  .hero-copy { padding-bottom: 2.5rem; text-align: left; }
  .hero-copy > p { margin-inline: 0; }
  .hero-actions { justify-content: flex-start; }
  .hero-trust { justify-content: flex-start; }
  .band { grid-template-columns: 1fr 1fr; gap: 1.6rem 0; padding: 2rem 1.6rem; }
  .band-item:nth-child(3) { border-left: 0; }
  .band-item:nth-child(n+3) { padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.16); }
}
@media (max-width: 620px) {
  .band { grid-template-columns: 1fr; }
  .band-item, .band-item:nth-child(3) { border-left: 0; }
  .band-item + .band-item { padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.16); }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .cta { padding: 2.2rem 1.6rem; }
}

/* ---------- Thai text setting ---------- */
.nb { white-space: nowrap; }
h1, h2, .sec-head h2 { text-wrap: balance; }
.hero-copy > p, .lead-text, .approach-copy > p, .standards-copy > p { text-wrap: pretty; }
/* keep an easy reading measure so phrase breaks land naturally */
.hero-copy > p { max-width: 44ch; }
.approach-copy > p, .standards-copy > p, .contact-copy > p { max-width: 56ch; }
.prose p, .prose li { max-width: 70ch; }

/* hero trust row: never let the caption collide with the avatars */
.hero-trust .avatar-stack { flex: none; }
.hero-trust p { min-width: 0; flex: 1; }
@media (max-width: 560px) {
  .hero-trust { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .hero-trust p { text-align: left; }
}

.avatar-stack:hover img { transform: translateY(-3px); }


/* ---------- Scroll-in motion ----------
   Content is visible by default. Only when JS confirms support (html.js-anim)
   do elements start hidden, so a JS failure can never blank the page. */
html.js-anim .reveal { opacity: 0; transform: translateY(18px); }
html.js-anim .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html.js-anim .reveal-stagger > * { opacity: 0; transform: translateY(16px); }
html.js-anim .reveal-stagger.in > * {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.js-anim .reveal-stagger.in > *:nth-child(1) { transition-delay: .04s }
html.js-anim .reveal-stagger.in > *:nth-child(2) { transition-delay: .10s }
html.js-anim .reveal-stagger.in > *:nth-child(3) { transition-delay: .16s }
html.js-anim .reveal-stagger.in > *:nth-child(4) { transition-delay: .22s }
html.js-anim .reveal-stagger.in > *:nth-child(5) { transition-delay: .28s }
html.js-anim .reveal-stagger.in > *:nth-child(n+6) { transition-delay: .34s }

@media (prefers-reduced-motion: reduce) {
  html.js-anim .reveal, html.js-anim .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Short labels are protected as whole elements — wrapping single words in a
   <span> would create a break opportunity in Thai and split them instead. */
.band-item strong,
.mission-item h3,
.team-body h3,
.team-body p,
.pkg-price-num small,
.hero-building-tag,
.sec-label { white-space: nowrap; }

@media (max-width: 620px) {
  /* on a phone let long labels wrap rather than overflow */
  .mission-item h3, .team-body h3 { white-space: normal; }
}


/* ---------- Mission strip · column-aware dividers ----------
   Uses nth-child (not adjacent siblings) so the divider always belongs to the
   real grid column and every card starts on the same left edge. */
.mission-card { grid-template-columns: repeat(4, 1fr); gap: 0; }
.mission-item { padding: 0 2rem; text-align: left; border-left: 1px solid var(--hair); }
.mission-item:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.mission-item:nth-child(4n) { padding-right: 0; }

@media (max-width: 1080px) {
  .mission-card { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .mission-item { padding: 0 2rem; border-left: 1px solid var(--hair); }
  .mission-item:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .mission-item:nth-child(2n) { padding-right: 0; }
  .mission-item:nth-child(n + 3) { padding-top: 2.4rem; border-top: 1px solid var(--hair); }
}

@media (max-width: 620px) {
  /* two per row: keeps all four points on one screen instead of a long list */
  .mission-card { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .mission-item { padding: 0 0 0 1.1rem; border-left: 1px solid var(--hair); }
  .mission-item:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .mission-item:nth-child(n + 3) { padding-top: 1.6rem; border-top: 1px solid var(--hair); }
  .m-ico { width: 42px; height: 42px; margin-bottom: .85rem; }
  .m-ico svg { width: 21px; height: 21px; }
  .mission-item h3 { font-size: .92rem; margin-bottom: .4rem; }
  .mission-item p { font-size: .8rem; line-height: 1.7; }
}

/* ---------- Floating LINE button (mobile / tablet) ---------- */
.line-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: none;                 /* desktop uses the sticky header CTA instead */
  align-items: center; gap: .5rem;
  background: #06c755; color: #fff;
  font-family: var(--font-head); font-weight: 500; font-size: .92rem;
  padding: .82rem 1.25rem;
  border-radius: var(--r-pill);
  box-shadow: 0 10px 26px -8px rgba(6, 199, 85, .65), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.line-fab svg { width: 24px; height: 24px; flex: none; }
.line-fab:active { transform: scale(.96); }

@media (max-width: 900px) {
  .line-fab { display: inline-flex; }
  /* keep the last section clear of the floating button */
  .footer-bottom { padding-bottom: calc(1.4rem + 56px); }
}

/* only the smallest phones drop the label */
@media (max-width: 344px) {
  .line-fab { padding: .85rem; }
  .line-fab span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .line-fab { transition: none; }
}


/* ---------- Services grid · always 3 across ----------
   Phones keep the same 3 x 3 shape as desktop by stacking each card
   (icon above label) so nine items stay scannable at a glance.
   minmax(0,1fr) keeps all three columns exactly equal — plain 1fr lets a
   longer label stretch its own column. */
.svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .svc-grid { gap: .7rem; }
  .svc-card { padding: 1.1rem 1rem; gap: .8rem; }
  .svc-card figure { width: 48px; height: 48px; }
  .svc-card figure img { width: 32px; height: 32px; }
  .svc-body h3 { font-size: .95rem; }
}

@media (max-width: 620px) {
  .svc-grid { gap: .6rem; }
  .svc-card {
    flex-direction: column; align-items: center; text-align: center;
    gap: .6rem; padding: 1.1rem .5rem 1rem;
  }
  .svc-card figure { width: 44px; height: 44px; }
  .svc-card figure img { width: 30px; height: 30px; }
  .svc-body { flex-direction: column; justify-content: center; gap: 0; }
  .svc-body h3 { font-size: .82rem; line-height: 1.45; }
  .svc-arrow { display: none; }          /* the whole card is the tap target */
  .svc-card:hover { transform: none; }   /* no hover lift on touch */
}

@media (max-width: 380px) {
  .svc-card { padding: .95rem .35rem .9rem; }
  .svc-body h3 { font-size: .76rem; }
}

/* Links and buttons are flex containers with a gap; keep whole-label nowrap
   there instead of nesting spans (a nested span would inherit the gap). */
.text-link, .btn { white-space: nowrap; }


/* ---------- Programme cards · mobile ----------
   Three tall cards stacked would make a very long scroll, so phones get a
   swipeable row that snaps card-to-card — the same pattern as the articles.
   The recommended card is ordered first so the main offer is seen without
   swiping, and the row keeps top room for the badge that sits above the card. */
@media (max-width: 860px) {
  .pkg-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84%, 340px);
    grid-template-columns: none;
    gap: .9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 1.1rem .25rem 1.2rem;   /* top room for the "แนะนำ" badge */
    margin-inline: -.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--hair) transparent;
  }
  .pkg-grid::-webkit-scrollbar { height: 6px; }
  .pkg-grid::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 3px; }
  .pkg-grid::-webkit-scrollbar-track { background: transparent; }

  .pkg-card {
    scroll-snap-align: start;
    padding: 2rem 1.5rem;
    display: flex; flex-direction: column;
  }
  .pkg-card:hover { transform: none; box-shadow: none; }
  .pkg-featured { order: -1; }        /* main offer first */
  .pkg-featured:hover { transform: none; }

  .pkg-head h3, .pkg-featured .pkg-head h3 { font-size: 1.12rem; }
  .pkg-head p { font-size: .85rem; margin-bottom: 1.3rem; }
  .pkg-list li { font-size: .88rem; }
  .pkg-ico { width: 46px; height: 46px; margin-bottom: 1.1rem; }
  .pkg-foot { flex-direction: column; align-items: stretch; gap: .9rem; }
  .pkg-foot .btn { width: 100%; }
  .pkg-price, .pkg-price-num { align-items: flex-start; }
}

@media (max-width: 420px) {
  .pkg-grid { grid-auto-columns: 88%; }
  .pkg-card { padding: 1.8rem 1.3rem; }
}

/* Numbered badge for headings that sit inside a column (approach / standards /
   contact) — same badge as .sec-head, without the full-width rule above it. */
.sec-stack {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1rem;
}
.sec-stack .sec-num { flex: none; }
.sec-stack .sec-label { margin-bottom: 0; }
@media (max-width: 620px) {
  .sec-stack { gap: .6rem; margin-bottom: .9rem; }
  .sec-stack .sec-num { width: 30px; height: 30px; font-size: .72rem; }
}

/* ---------- Social icons ---------- */
.social-row { display: flex; gap: .6rem; margin-top: 1.2rem; }
.social-link {
  width: 40px; height: 40px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--hair); color: var(--navy);
  transition: transform .3s var(--ease), background-color .3s ease,
              color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.social-link svg { width: 19px; height: 19px; }
.social-link:hover { transform: translateY(-3px); border-color: transparent; color: #fff; box-shadow: var(--shadow-md); }
.social-link[data-social-facebook]:hover { background: #1877f2; }
.social-link[data-social-instagram]:hover { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.social-link[data-social-line]:hover { background: #06c755; }