/* ==========================================================================
   Child Safe Friendly Tourism
   Palette derived from the programme's own mark: the navy shield and the cyan
   check. One warm colour (--signal) is reserved exclusively for the report and
   helpline channel; its scarcity is what makes it register as urgent.
   ========================================================================== */

:root {
  /* Palette sampled from the programme's own logo: the cyan wordmark and the
     green / teal / sun / blossom circles of the family emblem. Warm and
     child-facing by design, not institutional.
     --signal is reserved EXCLUSIVELY for the report and helpline channel. */
  --ink:        #123A4E;
  --ink-soft:   #4A6B7C;
  --sky:        #00A0E0;
  --sky-ink:    #00719F;
  --sky-deep:   #0B5C7D;
  --teal:       #4FC0C0;
  --leaf:       #9ECB5A;
  --sun:        #F5C544;
  --blossom:    #EC6B93;
  --sky-soft:   #D7F0FB;
  --porcelain:  #EEF7FB;
  --paper:      #FFFFFF;
  --signal:     #C23A1E;
  --signal-dk:  #962C15;
  --line:       rgba(18, 58, 78, .13);
  --line-soft:  rgba(18, 58, 78, .07);

  --display: "Anuphan", "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;
  --body:    "IBM Plex Sans Thai Looped", "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;

  --wrap: 1180px;
  --gut: clamp(1.1rem, 4vw, 2.5rem);
  --r: 18px;
  --r-lg: 28px;
  --sec-y: clamp(3.4rem, 8vw, 7rem);
  --shadow: 0 2px 4px rgba(18,58,78,.04), 0 12px 34px rgba(18,58,78,.09);
  --shadow-lg: 0 4px 10px rgba(18,58,78,.06), 0 26px 60px rgba(18,58,78,.15);

}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--porcelain);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 0;
}

img { max-width: 100%; height: auto; display: block; -webkit-user-drag: none; user-drag: none; }
a { color: var(--sky-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sky); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.18; letter-spacing: -.012em; margin: 0; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--sky-ink); color: #fff; padding: .85rem 1.2rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; color: #fff; }

/* ---------- Layout ------------------------------------------------------- */
.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - var(--gut) * 2); }
.wrap--center { text-align: center; }
.sec { padding-block: var(--sec-y); }
.sec__head { max-width: 46ch; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.sec__head--center { margin-inline: auto; text-align: center; max-width: 60ch; }
.sec__lead { color: var(--ink-soft); font-size: 1.05em; margin: 0; }

.wrap--split {
  width: min(var(--wrap), 100% - var(--gut) * 2);
  margin-inline: auto;
  display: grid; gap: clamp(1.6rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
}

.eyebrow {
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sky);
  margin: 0 0 .8rem;
}
.lang-th .eyebrow { letter-spacing: .06em; text-transform: none; font-size: .92rem; }

.h2 { font-size: clamp(1.65rem, 1.1rem + 2vw, 2.6rem); margin-bottom: .7em; }
.h3 { font-family: var(--display); font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); font-weight: 600; margin: 2rem 0 .6rem; }
.prose p { color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }

/* ---------- Buttons ------------------------------------------------------ */
.btnrow { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; }
.btn {
  --btn-bg: var(--sky-ink); --btn-fg: #fff; --btn-bd: var(--sky-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.6rem;
  background-color: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd); border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn--primary:hover { --btn-bg: var(--sky-deep); --btn-bd: var(--sky-deep); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--sky-ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bd: var(--sky-ink); --btn-fg: var(--sky-ink); }
.btn--ghostlight { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.45); }
.btn--ghostlight:hover { --btn-bd: #fff; --btn-fg: #fff; }
.btn--signal { --btn-bg: var(--signal); --btn-fg: #fff; --btn-bd: var(--signal); }
.btn--signal:hover { --btn-bg: var(--signal-dk); --btn-bd: var(--signal-dk); }
.btn--wide { width: 100%; }

/* ---------- Header ------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background-color: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.hdr__in {
  width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 96px;
}
.hdr__logo { display: block; flex: 0 0 auto; }
.hdr__logo img { height: 72px; width: auto; }

.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; }
.nav__link {
  display: block; padding: .55rem .7rem; border-radius: 10px;
  font-family: var(--display); font-weight: 500; font-size: .95rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav__link:hover { background-color: var(--sky-soft); color: var(--sky-ink); }
.nav__link.is-on { color: var(--sky-ink); box-shadow: inset 0 -2px 0 var(--sky); border-radius: 0; }
.nav__link--report { background-color: var(--signal); color: #fff; padding-inline: 1.1rem; border-radius: 999px; }
.nav__link--report:hover { background-color: var(--signal-dk); color: #fff; }

.langsw { display: flex; align-items: center; gap: .3rem; padding-left: 1rem; border-left: 1px solid var(--line); }
.langsw__opt { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; }
.langsw__opt:hover { background-color: var(--sky-soft); }
.langsw__opt.is-on { background-color: var(--porcelain); }
.flag { display: block; width: 30px; height: 20px; border-radius: 3px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18,58,78,.14); }

.navtoggle { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.navtoggle:focus-visible ~ .navbtn { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.navbtn { display: none; }

/* ---------- Hero --------------------------------------------------------- */
.hero { padding-block: clamp(2.2rem, 5vw, 4.6rem) clamp(2.4rem, 5vw, 4rem); }
.hero__in {
  width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto;
  display: grid; gap: clamp(1.8rem, 4vw, 3.6rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
}
.hero__title { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4rem); margin-bottom: .5em; }
.hero__t1, .hero__t2, .hero__t3 { display: block; }
.hero__t2 {
  color: var(--sky-ink);
  position: relative; width: max-content; max-width: 100%;
  padding-bottom: .12em;
}
/* Signature motif: the check stroke from the mark, drawn under the key phrase. */
.hero__t2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: .14em; width: 100%;
  background-color: var(--sky); border-radius: 999px;
  transform-origin: left center;
  animation: swipe 1.1s .35s cubic-bezier(.2,.7,.2,1) both;
}
.hero__lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); color: var(--ink-soft); max-width: 46ch; }

.hero__media { display: grid; gap: 1.1rem; }
.hero__figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background-color: var(--sky-ink); box-shadow: var(--shadow-lg); }
.hero__figure img, .hero__figure .slot { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }

/* Trust card. Deliberately BELOW the photo at every breakpoint so it can never
   cross a person's face. No decorative frame extends past the figure. */
.trust {
  background-color: var(--paper); border-radius: var(--r);
  padding: clamp(1.1rem, 3vw, 1.6rem); box-shadow: var(--shadow);
  border-left: 4px solid var(--sky);
}
.trust__kicker { font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin: 0 0 .35rem; }
.lang-th .trust__kicker { text-transform: none; letter-spacing: .04em; font-size: .95rem; }
.trust__figure { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .5rem; }
.trust__num { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; color: var(--sky-ink); }
.trust__lbl { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.trust__note { font-size: .93rem; color: var(--ink-soft); margin: 0; }

/* ---------- Photo slot (renders when the file exists, motif when it doesn't) */
.slot { display: grid; place-items: center; background-color: var(--sky-ink); position: relative; }
.slot--empty { background-color: var(--sky-ink); background-image: radial-gradient(120% 100% at 20% 10%, #4FC0C0 0%, #0B5C7D 55%, #0B5C7D 100%); }
.slot--card { aspect-ratio: 16 / 10; border-radius: var(--r); }
.slot--wide { aspect-ratio: 21 / 9; border-radius: var(--r-lg); }
.slot__motif { width: 44%; max-width: 190px; height: auto; opacity: .9; }
.slot__shield { fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.34); stroke-width: 3; }
.slot__head { fill: #fff; }
.slot__check { fill: none; stroke: var(--sky); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.slot__img { width: 100%; height: 100%; object-fit: cover; }
.slot__img--card { aspect-ratio: 16 / 10; border-radius: var(--r); }
.slot__img--wide { aspect-ratio: 21 / 9; border-radius: var(--r-lg); }

/* ---------- Marquees (the duplicate group stays off-screen, never wraps) --- */
.mq { overflow: hidden; width: 100%; }
.mq__track { display: flex; width: max-content; flex-wrap: nowrap; animation: slide 42s linear infinite; }
.mq__track--slow { animation-duration: 72s; }
.mq__grp { display: flex; align-items: center; flex-wrap: nowrap; flex: 0 0 auto; }
.mq--mission { background-color: var(--sky-ink); color: #fff; padding-block: .95rem; }
.mq__item { font-family: var(--display); font-weight: 600; font-size: clamp(.95rem, .9rem + .3vw, 1.15rem); white-space: nowrap; padding-inline: 1.1rem; }
.mq__dot { width: 7px; height: 7px; border-radius: 50%; background-color: var(--sky); flex: 0 0 auto; }
.mq--logos { padding-block: 1.4rem; }
.orgchip {
  white-space: nowrap; margin-inline: .45rem; padding: .6rem 1.15rem;
  background-color: var(--paper); border: 1px solid var(--line-soft); border-radius: 999px;
  font-size: .9rem; color: var(--ink-soft);
}

/* ---------- Cards, bento, ticks ------------------------------------------ */
.cards { list-style: none; display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background-color: var(--paper); border-radius: var(--r); padding: clamp(1.3rem, 3vw, 1.9rem); box-shadow: var(--shadow); }
.card__seal { width: 46px; height: 46px; margin-bottom: .9rem; }
.seal__box { fill: var(--sky-soft); stroke: none; }
.card:nth-child(2) .seal__box { fill: #E9F5D6; }
.card:nth-child(3) .seal__box { fill: #FDF0CE; }
.seal__check { fill: none; stroke: var(--sky-ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.card__h { font-size: 1.2rem; margin-bottom: .4rem; }
.card__b { color: var(--ink-soft); font-size: .97rem; margin: 0; }

.bento { list-style: none; display: grid; gap: 1.1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento__i { background-color: var(--paper); border-radius: var(--r); padding: clamp(1.3rem, 3vw, 1.9rem); box-shadow: var(--shadow); border-top: 3px solid var(--sky); }
.bento__i--wide { grid-column: span 2; }
.bento__i--tall { grid-column: span 2; }
.bento__i--std { grid-column: span 2; }
.bento__h { font-family: var(--display); font-size: 1.12rem; font-weight: 600; margin: 0 0 .4rem; }
.bento__b { color: var(--ink-soft); font-size: .95rem; margin: 0; }

.ticks { list-style: none; display: grid; gap: .75rem; margin: 1.2rem 0 0; }
.ticks li { position: relative; padding-left: 2.2rem; color: var(--ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.35rem; height: 1.35rem; border-radius: 7px;
  background-color: var(--sky-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 L10 16.5 L18 7' fill='none' stroke='%2300719F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 80%; background-position: center; background-repeat: no-repeat;
}
.ticks--warn li::before { background-color: #FBE3DD; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6 v7 M12 17 v.5' fill='none' stroke='%23A8331D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }

.numlist { padding-left: 1.4rem; display: grid; gap: .7rem; color: var(--ink-soft); }
.callout { background-color: var(--sky-soft); border-radius: var(--r); padding: 1.1rem 1.3rem; margin-top: 1.5rem; color: var(--sky-deep); }
.empty { color: var(--ink-soft); }


/* Alternating image/text sections (about page) */
.sec--alt .wrap--split { align-items: center; }
.wrap--split-rev > :first-child { order: 2; }
.secfig { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.secfig .slot__img, .secfig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-lg); }
@media (max-width: 940px) { .wrap--split-rev > :first-child { order: 0; } }

/* ---------- Timeline ----------------------------------------------------- */
.tl { list-style: none; display: grid; gap: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 9px; top: .6rem; bottom: .6rem; width: 2px; background-color: var(--line); }
.tl__i { position: relative; padding: 0 0 2.1rem 3rem; }
.tl__i:last-child { padding-bottom: 0; }
.tl__node { position: absolute; left: 0; top: .35rem; width: 20px; height: 20px; border-radius: 50%; background-color: var(--paper); border: 3px solid var(--sky); }
.tl__i:nth-child(2) .tl__node { border-color: var(--leaf); }
.tl__i:nth-child(3) .tl__node { border-color: var(--sun); }
.tl__i:nth-child(4) .tl__node { border-color: var(--blossom); }
.tl__date { font-family: var(--display); font-weight: 600; font-size: .88rem; letter-spacing: .04em; color: var(--sky); margin: 0 0 .2rem; }
.tl__h { font-size: 1.18rem; margin-bottom: .35rem; }
.tl__b { color: var(--ink-soft); font-size: .97rem; margin: 0; }

/* ---------- Steps -------------------------------------------------------- */
.steps { list-style: none; display: grid; gap: 1rem; margin-top: 1.4rem; }
.steps__i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; background-color: var(--paper); border-radius: var(--r); padding: 1.2rem 1.4rem; box-shadow: var(--shadow); }
.steps__n { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--sky); line-height: 1.2; }
.steps__h { font-family: var(--display); font-size: 1.1rem; font-weight: 600; margin: 0 0 .25rem; }
.steps__b { color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* ---------- Page head, articles, posts ----------------------------------- */
.phead { padding-block: clamp(2.4rem, 6vw, 4.4rem) clamp(1.4rem, 3vw, 2.2rem); }
.phead__h { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); margin-bottom: .4em; }
.phead__lead { font-size: clamp(1.02rem, 1rem + .3vw, 1.15rem); color: var(--ink-soft); max-width: 58ch; }

.posts { list-style: none; display: grid; gap: 1.4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.posts__link { display: block; background-color: var(--paper); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; height: 100%; transition: transform .2s ease; }
.posts__link:hover { transform: translateY(-4px); color: inherit; }
.posts__fig { margin: 0; }
.posts__body { padding: 1.2rem 1.3rem 1.5rem; }
.posts__date { font-family: var(--display); font-weight: 600; font-size: .82rem; letter-spacing: .05em; color: var(--sky); margin: 0 0 .35rem; }
.posts__h { font-size: 1.14rem; margin-bottom: .45rem; }
.posts__sum { color: var(--ink-soft); font-size: .94rem; margin-bottom: .8rem; }
.posts__more { font-family: var(--display); font-weight: 600; color: var(--sky-ink); font-size: .93rem; }
.posts__more::after { content: " \2192"; }

.art { padding-block: clamp(1.8rem, 4vw, 3rem) var(--sec-y); }
.crumbs { font-size: .9rem; margin-bottom: 1.4rem; }
.art__date { font-family: var(--display); font-weight: 600; color: var(--sky); letter-spacing: .05em; margin: 0 0 .4rem; }
.art__h { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.7rem); margin-bottom: .5em; }
.art__sum { font-size: 1.1rem; color: var(--ink-soft); }
.art__fig { margin: 2rem auto; }
.art__back { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }

/* ---------- FAQ ---------------------------------------------------------- */
.faq { list-style: none; display: grid; gap: .75rem; }
.faq__i { background-color: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 3.2rem 1.1rem 1.4rem; position: relative; font-family: var(--display); font-weight: 600; font-size: 1.05rem; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 50%; width: 13px; height: 13px;
  border-right: 2.5px solid var(--sky); border-bottom: 2.5px solid var(--sky);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s ease;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq__a { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); }
.faq__a p { margin: 0; }

/* ---------- Network ------------------------------------------------------ */
.orgs { list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.orgs__link { display: flex; align-items: center; gap: 1rem; background-color: var(--paper); border-radius: var(--r); padding: 1rem 1.2rem; box-shadow: var(--shadow); min-height: 88px; text-decoration: none; color: inherit; height: 100%; transition: transform .18s ease; }
a.orgs__link:hover { transform: translateY(-3px); color: inherit; }
.orgs__logo { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.orgs__mark { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; border-radius: 14px; background-color: var(--sky-soft); color: var(--sky-ink); font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.orgs__name { font-size: .95rem; font-weight: 500; line-height: 1.45; }

/* ---------- Bands -------------------------------------------------------- */
.band { background-color: var(--sky-deep); background-image: linear-gradient(120deg, #0B5C7D 0%, #00A0E0 55%, #1D3karma 100%); color: #fff; padding-block: clamp(2.4rem, 5vw, 3.8rem); }
.band { background-image: linear-gradient(120deg, #0B5C7D 0%, #00A0E0 60%, #00719F 100%); }
.band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; }
.band__h { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); margin-bottom: .35em; }
.band__b { color: rgba(255,255,255,.82); margin: 0; max-width: 52ch; }
.band--soft { background-color: var(--sky-soft); background-image: none; color: var(--sky-deep); }
.band--soft .band__b { color: var(--ink-soft); }
.band .btnrow { margin: 0; }

/* ---------- Urgent block ------------------------------------------------- */
.urgent { background-color: var(--paper); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.4rem); box-shadow: var(--shadow-lg); border-top: 5px solid var(--signal); text-align: center; }
.urgent__lbl { font-family: var(--display); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; color: var(--signal); margin: 0 0 .5rem; }
.lang-th .urgent__lbl { text-transform: none; letter-spacing: .04em; font-size: .98rem; }
.urgent__num { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 2rem + 6vw, 5rem); line-height: 1; color: var(--signal); text-decoration: none; display: inline-block; animation: pulse 3.4s ease-in-out infinite; }
.urgent__num:hover { color: var(--signal-dk); }
.urgent__who { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: .5rem 0 .2rem; }
.urgent__note { color: var(--ink-soft); margin: 0; font-size: .95rem; }

/* ---------- Contact and form --------------------------------------------- */
.contact { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
.contact__info .h3:first-child { margin-top: 0; }
.contact__addr { color: var(--ink-soft); }
.contact__tel a { font-family: var(--display); font-weight: 700; font-size: 1.45rem; text-decoration: none; }
.contact__urgent { margin-top: 2rem; padding: 1.3rem; border-radius: var(--r); background-color: #FBE3DD; }
.contact__urgent .h3 { margin-top: 0; color: var(--signal-dk); }
.contact__form { background-color: var(--paper); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow); }
.contact__form .h3:first-child { margin-top: 0; }
.form__intro { color: var(--ink-soft); font-size: .96rem; }
.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-family: var(--display); font-weight: 600; font-size: .95rem; }
.req { color: var(--ink-soft); font-weight: 400; font-size: .82rem; }
.field input, .field textarea {
  font: inherit; font-family: var(--body); color: var(--ink);
  background-color: var(--porcelain); border: 2px solid transparent; border-radius: 12px;
  padding: .75rem .9rem; min-height: 48px; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--sky); background-color: #fff; outline: none; }
.field input:invalid:not(:placeholder-shown) { border-color: var(--signal); }
.cf-turnstile { margin-bottom: 1.1rem; min-height: 65px; }
.fallback { list-style: none; display: grid; gap: .6rem; margin: 1rem 0 0; padding: 0; }
.form__note { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { border-radius: 12px; padding: .85rem 1.1rem; font-size: .95rem; }
.alert--ok { background-color: #DFF3E4; color: #1B5E32; }
.alert--bad { background-color: #FBE3DD; color: var(--signal-dk); }
.alert--info { background-color: var(--sky-soft); color: var(--sky-deep); }
.cf-turnstile { margin-bottom: 1.1rem; }

/* ---------- Social ------------------------------------------------------- */
.social { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 0; }
.social__btn, .social__pill {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .6rem 1.1rem; border-radius: 999px;
  font-family: var(--display); font-weight: 600; font-size: .93rem; text-decoration: none;
}
.social__btn { color: #fff; }
.social__btn svg { fill: currentColor; }
.social__btn--facebook { background-color: #1877F2; }
.social__btn--tiktok   { background-color: #111111; }
.social__btn--line     { background-color: #06C755; }
.social__btn:hover { color: #fff; filter: brightness(1.08); }
.social__pill { color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.28); }
.social__pill svg { fill: currentColor; }
.social__pill:hover { color: #fff; border-color: #fff; background-color: rgba(255,255,255,.08); }

/* ---------- Footer ------------------------------------------------------- */
.ftr { background-color: var(--sky-deep); color: rgba(255,255,255,.78); padding-top: clamp(2.6rem, 6vw, 4.4rem); }
.ftr__in {
  width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto;
  display: grid; gap: clamp(1.6rem, 4vw, 2.8rem);
  grid-template-columns: 1.5fr 1fr 1.3fr 1fr;
}
.ftr__logo { height: 54px; width: auto; margin-bottom: 1rem; }
.ftr__h { font-family: var(--display); font-size: .82rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--sky); margin: 0 0 .8rem; }
.lang-th .ftr__h { text-transform: none; letter-spacing: .04em; font-size: .97rem; }
.ftr__h--sp { margin-top: 1.6rem; }
.ftr__org { margin-bottom: .6rem; }
.ftr__orglabel { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.lang-th .ftr__orglabel { text-transform: none; letter-spacing: .03em; font-size: .9rem; }
.ftr__orgname { font-family: var(--display); font-weight: 600; color: #fff; }
.ftr__mandate { font-size: .86rem; color: rgba(255,255,255,.55); max-width: 44ch; }
.ftr__links { list-style: none; display: grid; gap: .5rem; }
.ftr__links a, .ftr__tel a { color: rgba(255,255,255,.82); text-decoration: none; }
.ftr__links a:hover, .ftr__tel a:hover { color: var(--sky); }
.ftr__tel a { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: #fff; }
.ftr__hours, .ftr__addr { font-size: .89rem; color: rgba(255,255,255,.6); }
.ftr__help { display: block; text-decoration: none; }
.ftr__helpnum { display: block; font-family: var(--display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--signal); }
.ftr__help:hover .ftr__helpnum { color: #E8674B; }
.ftr__helplbl { display: block; font-family: var(--display); font-weight: 600; color: #fff; margin-top: .2rem; }
.ftr__helpnote { font-size: .85rem; color: rgba(255,255,255,.55); margin-top: .4rem; }
.ftr__base {
  width: min(var(--wrap), 100% - var(--gut) * 2); margin: clamp(2rem, 5vw, 3.2rem) auto 0;
  border-top: 1px solid rgba(255,255,255,.14); padding-block: 1.3rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem;
  font-size: .84rem; color: rgba(255,255,255,.5);
}
.ftr__base p { margin: 0; }

/* ---------- Mobile action bar (hidden on desktop) ------------------------ */
.abar { display: none; }

/* ==========================================================================
   Motion. Every animation below is CSS-only, runs with JavaScript disabled,
   and is SOFTENED rather than removed under prefers-reduced-motion.
   ========================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(9px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes swipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kenburns { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .74; } }
@keyframes drawline { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }

.rise { animation: rise .85s cubic-bezier(.2,.7,.2,1) both; }
.rise--d1 { animation-delay: .1s; }
.rise--d2 { animation-delay: .2s; }
.rise--d3 { animation-delay: .3s; }

/* Scroll-driven where supported; the on-load animation above is the fallback. */
@supports (animation-timeline: view()) {
  .rise { animation-timeline: view(); animation-range: entry 0% cover 26%; animation-delay: 0s; }
}

.kb .slot__img, .kb .slot { animation: kenburns 26s ease-in-out infinite alternate; }
.draw { stroke-dasharray: 60; animation: drawline 1.3s .3s cubic-bezier(.2,.7,.2,1) both; }
@supports (animation-timeline: view()) {
  .draw { animation-timeline: view(); animation-range: entry 10% cover 34%; animation-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Softened, not disabled: shorter travel, no blur, slower loops. */
  @keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.02); } }
  .rise { animation-duration: .5s; }
  .mq__track { animation-duration: 120s; }
  .mq__track--slow { animation-duration: 190s; }
  .kb .slot__img, .kb .slot { animation-duration: 70s; }
  .urgent__num { animation-duration: 8s; }
  .btn:hover, .posts__link:hover, a.orgs__link:hover { transform: none; }
}

/* ==========================================================================
   Responsive. Mobile is a designed pass, not a squeeze.
   ========================================================================== */
@media (max-width: 1080px) {
  .nav__list { gap: 0; }
  .nav__link { padding-inline: .5rem; font-size: .9rem; }
  .ftr__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  .hero__in, .wrap--split, .contact { grid-template-columns: minmax(0, 1fr); }
  /* Copy first on mobile: headline and CTAs before the photograph. */
  .hero__copy { order: 1; }
  .hero__media { order: 2; }
  .cards, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__i--wide, .bento__i--tall, .bento__i--std { grid-column: span 1; }
}

@media (max-width: 1279px) {
  body { padding-bottom: 76px; } /* room for the fixed action bar */

  .hdr__in { min-height: 72px; }
  .hdr__logo img { height: 50px; }

  .navbtn {
    display: grid; align-content: center; gap: 5px;
    width: 48px; height: 48px; padding: 12px 11px; cursor: pointer; border-radius: 12px;
  }
  .navbtn__bar { display: block; height: 2.5px; width: 100%; background-color: var(--ink); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; }
  .navtoggle:checked ~ .navbtn .navbtn__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .navtoggle:checked ~ .navbtn .navbtn__bar:nth-child(2) { opacity: 0; }
  .navtoggle:checked ~ .navbtn .navbtn__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .nav {
    position: fixed; inset: 72px 0 auto; z-index: 80;
    display: block; background-color: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .3s ease, visibility 0s .3s;
  }
  .navtoggle:checked ~ .nav { max-height: calc(100dvh - 72px); overflow-y: auto; visibility: visible; transition: max-height .3s ease, visibility 0s; }
  .nav__list { display: block; padding: .6rem var(--gut) 1rem; }
  .nav__link { display: block; padding: .95rem .6rem; min-height: 48px; font-size: 1.05rem; border-radius: 10px; border-bottom: 1px solid var(--line-soft); }
  .nav__link.is-on { box-shadow: none; background-color: var(--sky-soft); border-left: 4px solid var(--sky); border-radius: 0 10px 10px 0; }
  .nav__link--report { text-align: center; margin-top: .7rem; border-bottom: 0; }
  .langsw { padding: 0 var(--gut) 1.2rem; border-left: 0; border-top: 1px solid var(--line-soft); margin-top: .4rem; padding-top: 1rem; }
  .langsw__opt { width: 56px; height: 48px; }
  .flag { width: 32px; height: 22px; }

  .cards, .posts, .bento, .orgs, .steps { grid-template-columns: minmax(0, 1fr); }
  .tl__i { padding-left: 2.6rem; }
  .btnrow .btn { width: 100%; }
  .band__in { flex-direction: column; align-items: flex-start; }
  .band .btnrow { width: 100%; }
  .ftr__in { grid-template-columns: minmax(0, 1fr); }
  .ftr__base { flex-direction: column; }

  /* Fixed bottom action bar. Primary action is the helpline. */
  .abar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: grid; grid-template-columns: 1.35fr 1fr; gap: .5rem;
    padding: .5rem var(--gut) calc(.5rem + env(safe-area-inset-bottom));
    background-color: rgba(255,255,255,.96);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
  }
  .abar__btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 52px; padding: .4rem .6rem; border-radius: 14px;
    font-family: var(--display); font-weight: 600; text-decoration: none; line-height: 1.2;
  }
  .abar__btn--primary { background-color: var(--signal); color: #fff; }
  .abar__btn--primary:hover { color: #fff; }
  .abar__num { font-size: 1.15rem; font-weight: 700; }
  .abar__lbl { font-size: .72rem; opacity: .92; }
  .abar__btn--ghost { background-color: var(--porcelain); color: var(--sky-ink); font-size: .88rem; text-align: center; line-height: 1.25; }
}

@media (max-width: 560px) {
  .hero__title { font-size: clamp(1.9rem, 1.1rem + 5.4vw, 2.6rem); }
  .trust__figure { flex-direction: column; gap: .1rem; }
  .steps__i { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .urgent__num { font-size: clamp(2.8rem, 14vw, 4rem); }
}

@media print {
  .hdr, .abar, .mq, .band, .contact__channels { display: none; }
  body { background: #fff; padding-bottom: 0; }
}

/* ---------- Rhythm corrections -------------------------------------------
   A .phead followed immediately by a .sec was stacking two full section
   paddings, which left a large dead band under every page heading. */
.phead + .sec { padding-top: clamp(1rem, 2.5vw, 2rem); }
.sec + .sec { padding-top: clamp(2rem, 5vw, 4rem); }
.sec--urgent { padding-block: clamp(1.5rem, 4vw, 2.6rem); }
.sec--urgent + .sec { padding-top: clamp(2rem, 5vw, 3.4rem); }
.band + .ftr { margin-top: 0; }
.wrap--narrow > .h2:first-child,
.wrap--narrow > .prose > .h2:first-child { margin-top: 0; }
.sec:last-of-type { padding-bottom: clamp(2.6rem, 6vw, 4.5rem); }

/* ---------- Additional motion --------------------------------------------
   All CSS-only, all functional without JavaScript, all softened (never
   disabled) under prefers-reduced-motion. */

@keyframes floaty     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sheen      { 0% { background-position: -180% 0; } 100% { background-position: 280% 0; } }
@keyframes seal-pop   { from { transform: scale(.82) rotate(-7deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tl-grow    { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes node-ring  { 0%,100% { box-shadow: 0 0 0 0 rgba(0,160,224,.45); } 50% { box-shadow: 0 0 0 7px rgba(0,160,224,0); } }
@keyframes underline  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bar-in     { from { transform: translateY(100%); } to { transform: none; } }

/* Trust card drifts gently, so the hero never feels static */
.trust { animation: floaty 7s ease-in-out infinite; }

/* Light sweeps across the mission marquee */
.mq--mission { position: relative; overflow: hidden; }
.mq--mission::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: sheen 7s linear infinite;
}

/* Commitment seals pop in as their card arrives */
.card__seal { animation: seal-pop .7s cubic-bezier(.2,.8,.25,1) both; }
@supports (animation-timeline: view()) {
  .card__seal { animation-timeline: view(); animation-range: entry 0% cover 30%; }
}

/* The timeline spine draws itself downward */
.tl::before { transform-origin: top center; animation: tl-grow 1.4s cubic-bezier(.3,.7,.3,1) both; }
@supports (animation-timeline: view()) {
  .tl::before { animation-timeline: view(); animation-range: entry 0% cover 55%; }
}
.tl__i:first-child .tl__node { animation: node-ring 3.2s ease-out infinite; }

/* Nav links grow an underline on hover/focus */
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .3rem; height: 2px;
  background: var(--sky); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.8,.25,1);
}
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }
.nav__link--report::after { display: none; }

/* Section headings get a short accent rule that draws in */
.sec__head .h2::after, .phead__h::after {
  content: ""; display: block; width: 62px; height: 3px; margin-top: .55rem;
  background: var(--sky); border-radius: 3px;
  transform-origin: left; animation: underline .9s .15s cubic-bezier(.2,.8,.25,1) both;
}
.sec__head--center .h2::after { margin-inline: auto; transform-origin: center; }
@supports (animation-timeline: view()) {
  .sec__head .h2::after { animation-timeline: view(); animation-range: entry 0% cover 28%; animation-delay: 0s; }
}

/* Cards and org tiles lift on hover */
.card, .bento__i, .steps__i { transition: transform .22s ease, box-shadow .22s ease; }
.card:hover, .bento__i:hover, .steps__i:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Mobile action bar slides up on arrival */
@media (max-width: 1279px) { .abar { animation: bar-in .5s .2s cubic-bezier(.2,.8,.25,1) both; } }

@media (prefers-reduced-motion: reduce) {
  /* Softened, never removed: less travel, slower loops, no sweep. */
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
  @keyframes seal-pop { from { opacity: 0; } to { opacity: 1; } }
  .trust { animation-duration: 18s; }
  .mq--mission::after { animation-duration: 26s; opacity: .5; }
  .tl::before { animation-duration: 2.4s; }
  .tl__i:first-child .tl__node { animation-duration: 9s; }
  .card:hover, .bento__i:hover, .steps__i:hover { transform: none; }
  .abar { animation-duration: 1s; }
}

/* ---------- Mobile tap targets -------------------------------------------
   Footer links, the phone link and social pills all reach the 44px minimum
   on touch viewports. Audited at 390px. */
@media (max-width: 1279px) {
  .ftr__links { gap: 0; }
  .ftr__links a {
    display: flex; align-items: center; min-height: 48px;
    padding: .2rem 0; border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .ftr__links li:last-child a { border-bottom: 0; }
  .ftr__tel a, .contact__tel a { display: inline-flex; align-items: center; min-height: 48px; }
  .ftr__help { display: block; padding-block: .4rem; min-height: 48px; }
  .social__pill, .social__btn { min-height: 48px; padding-inline: 1.2rem; }
  .social--brand li, .social--brand { width: 100%; }
  .social--brand .social__btn { width: 100%; justify-content: center; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .posts__more { display: inline-flex; align-items: center; min-height: 44px; }
  .faq summary { min-height: 56px; align-items: center; display: flex; }
}

/* ==========================================================================
   MOTION IS NEVER DISABLED
   Animation runs in every browser and for every visitor, including those who
   have asked the OS for reduced motion. For them it is SOFTENED - shorter
   travel, no blur, slower loops - but it always plays.

   Under reduced motion we also switch scroll-driven timelines back to the
   document timeline. Scroll-linked motion is the part that actually causes
   discomfort, and it is also the only thing that could leave content stuck
   invisible if a browser implements view() partially. Turning it off there
   gives those visitors motion AND guarantees nothing stays hidden.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rise, .draw, .card__seal, .tl::before,
  .sec__head .h2::after, .phead__h::after {
    animation-timeline: auto !important;
    animation-range: normal !important;
    animation-play-state: running !important;
  }
  .rise { animation-delay: 0s !important; }
}

/* Last-resort safety: if an engine advertises animation-timeline but never
   drives it, these elements would sit at opacity 0. Anything still invisible
   two seconds in is forced visible. */
@keyframes failsafe-show { to { opacity: 1; filter: none; transform: none; } }
.rise { animation-composition: replace; }
@supports (animation-timeline: view()) {
  .rise { animation-fill-mode: both; }
}

/* ---------- Video embeds -------------------------------------------------- */
.video {
  position: relative; margin: 1.8rem 0 1rem;
  aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--r); overflow: hidden;
  background-color: var(--sky-deep); box-shadow: var(--shadow);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__fallback { font-size: .9rem; }
.video__fallback a { color: var(--ink-soft); }

/* ---------- Contact page: tidier two-column rhythm ------------------------ */
.contact { align-items: start; gap: clamp(1.6rem, 3vw, 3rem); }
.contact__info > .h3:first-child { margin-top: 0; }
.contact__info .h3 { margin-top: 1.8rem; margin-bottom: .35rem; }
.contact__addr { margin-bottom: .9rem; line-height: 1.65; }
.contact__tel { margin-bottom: 0; }
.contact__tel a { font-size: 1.35rem; text-decoration: none; }
.contact__urgent { margin-top: 2rem; }
.contact__urgent .btn { margin-top: .8rem; }
.contact__form { position: sticky; top: 112px; }
.contact__form .form__intro { margin-bottom: 1.2rem; }
.social--brand { gap: .5rem; margin-top: .55rem; }
@media (max-width: 940px) { .contact__form { position: static; } }

/* Group the office details so the column reads as blocks, not a loose list */
.infoblock {
  background-color: var(--paper); border-radius: var(--r);
  padding: clamp(1.1rem, 2.6vw, 1.5rem); box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.infoblock .h3:first-child { margin-top: 0; }
.infoblock p:last-child { margin-bottom: 0; }
.contact__hours { font-size: .92rem; color: var(--ink-soft); margin: .3rem 0 0; }

/* Video fallback link is a real tap target on touch viewports */
@media (max-width: 1279px) {
  .video__fallback a { display: inline-flex; align-items: center; min-height: 48px; }
  .video { margin-top: 1.4rem; }
  .art__back a { display: inline-flex; align-items: center; min-height: 48px; }
  .numlist li, .ticks li { line-height: 1.7; }
}

/* Secondary helpline, shown beneath the primary 1155 */
.urgent__alt { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.urgent__altlbl { font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--ink-soft); margin: 0 0 .2rem; }
.urgent__altnum { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); color: var(--signal); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
.urgent__altnum:hover { color: var(--signal-dk); }

/* LINE QR */
.lineqr { margin: 1.1rem 0 0; text-align: center; }
.lineqr img { width: 168px; height: auto; margin: 0 auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 6px; }
.lineqr figcaption { font-size: .86rem; color: var(--ink-soft); margin-top: .5rem; }
.social__btn--youtube { background-color: #FF0000; }

/* WCAG 2.2 SC 2.5.8 Target Size (Minimum): every interactive target is at
   least 24x24 CSS px on ALL viewports, not just touch ones. Footer links were
   20px tall on desktop. Touch viewports get 48px via the mobile block below. */
.ftr__links a { display: inline-flex; align-items: center; min-height: 28px; }
.ftr__base a { display: inline-flex; align-items: center; min-height: 28px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 28px; }
.art__back a { display: inline-flex; align-items: center; min-height: 28px; }
.video__fallback a { display: inline-flex; align-items: center; min-height: 28px; }
.posts__more { display: inline-flex; align-items: center; min-height: 28px; }
/* Powered by Movaci */
.ftr__by { margin: 0; }
.ftr__by a { color: rgba(255,255,255,.75); text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 28px; border-bottom: 1px solid rgba(255,255,255,.28); }
.ftr__by a:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 1279px) { .ftr__by a { min-height: 44px; } }

/* ==========================================================================
   CONTRAST CORRECTIONS (WCAG 2.1 AA: 4.5:1 body, 3:1 large text and UI)
   The brand cyan #00A0E0 is a fill colour, not a text colour. At small sizes
   it measured 2.5-2.96 against both the light ground and the dark footer.
   Small text now uses the deeper tones; the cyan is retained for rules,
   borders, icons and fills where the 3:1 non-text threshold applies.
   ========================================================================== */
.eyebrow            { color: var(--sky-deep); }      /* was --sky, 2.72:1 */
.trust__kicker      { color: var(--sky-deep); }      /* was --sky, 2.96:1 */
.tl__date           { color: var(--sky-deep); }      /* was --sky, 2.72:1 */
.posts__date        { color: var(--sky-deep); }
.art__date          { color: var(--sky-deep); }
.steps__n           { color: var(--sky-deep); }

/* On the dark footer the cyan drops to 2.5:1. Use a light tint instead. */
.ftr__h             { color: #8FD9F0; }              /* was --sky, 2.50:1 */
.ftr__helpnum       { color: #FF9E85; }              /* was --signal, 1.67:1 */
.ftr__help:hover .ftr__helpnum { color: #FFC0B0; }
.ftr__links a, .ftr__tel a { color: rgba(255,255,255,.88); }
.ftr__hours, .ftr__addr, .ftr__helpnote, .ftr__mandate { color: rgba(255,255,255,.72); }
.ftr__orglabel      { color: rgba(255,255,255,.68); }
.ftr__base          { color: rgba(255,255,255,.68); }
.ftr__by a          { color: rgba(255,255,255,.88); }

/* Brand social colours: white text failed on Facebook, YouTube and LINE.
   Facebook and YouTube are darkened within brand range; LINE green cannot be
   darkened enough without leaving the brand, so it takes dark text instead. */
.social__btn--facebook { background-color: #0C63D6; }
.social__btn--youtube  { background-color: #CC0000; }
.social__btn--line     { background-color: #06C755; color: #0B2B18; }
.social__btn--line svg { fill: #0B2B18; }
.social__btn--line:hover { color: #0B2B18; }

/* Entry points to the bot from FAQ and contact */
.botcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem; margin-top: 1.8rem; padding: 1.3rem 1.5rem; border-radius: var(--r);
  background-color: var(--sky-soft); }
.botcta .h3 { margin: 0 0 .3rem; }
.botcta p { margin: 0; color: var(--ink-soft); font-size: .95rem; max-width: 52ch; }
.bot__hint { font-size: .92rem; color: var(--ink-soft); background-color: var(--sky-soft);
  border-radius: 12px; padding: .8rem 1rem; margin-bottom: 1.2rem; }
.bot__hint a { display: inline-flex; align-items: center; min-height: 28px; font-weight: 600; }
@media (max-width: 1279px) { .botcta .btn { width: 100%; } .bot__hint a { min-height: 44px; } }
/* Safety controls and crisis response */
.bot__tools { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end;
  padding: .7rem 1.2rem 0; }
.bot__clear, .bot__exit { font: inherit; font-family: var(--display); font-weight: 600;
  font-size: .84rem; cursor: pointer; border-radius: 999px; padding: .45rem 1rem;
  min-height: 36px; border: 1px solid var(--line); background-color: var(--paper); color: var(--ink-soft); }
.bot__clear:hover { border-color: var(--sky); color: var(--sky-ink); }
.bot__exit { background-color: var(--signal); border-color: var(--signal); color: #fff; }
.bot__exit:hover { background-color: var(--signal-dk); border-color: var(--signal-dk); }

.bot__line { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  background-color: var(--paper); border-radius: 12px; padding: .7rem .85rem; margin: .55rem 0;
  border-left: 4px solid var(--signal); }
.bot__call { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 54px; min-width: 118px; padding: .4rem 1rem; border-radius: 12px;
  background-color: var(--signal); color: #fff; text-decoration: none; flex: 0 0 auto; }
.bot__call:hover { background-color: var(--signal-dk); color: #fff; }
.bot__callnum { font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.1; }
.bot__calllbl { font-size: .72rem; opacity: .95; }
.bot__linemeta { flex: 1 1 190px; min-width: 0; }
.bot__linename { font-family: var(--display); font-weight: 600; font-size: .92rem; margin: 0; }
.bot__linenote { font-size: .85rem; color: var(--ink-soft); margin: .15rem 0 0; }
.bot__note--warn { color: var(--signal-dk); font-weight: 600; }
.bot__safety-warn { font-size: .9rem; }
@media (max-width: 1024px) {
  .bot__clear, .bot__exit { min-height: 44px; flex: 1 1 auto; }
  .bot__line { flex-direction: column; align-items: stretch; }
  .bot__call { width: 100%; }
}
.bot--degraded .bot__tools { display: none; }
.bot--degraded .bot__bubble { background-color: #FBE3DD; }
/* Bot entry points */

.sec--bot { padding-block: 0 var(--sec-y); }
.botpanel { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap;
  background-color: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: clamp(1.3rem, 3vw, 2rem); border-left: 5px solid var(--sky); }
.botpanel__avatar { display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 auto;
  background-color: var(--sky-soft); border-radius: 18px; }
.botpanel__copy { flex: 1 1 300px; min-width: 0; }
.botpanel__copy .h3 { margin: 0 0 .3rem; }
.botpanel__copy p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
@media (max-width: 1279px) {
  .botpanel { flex-direction: column; align-items: flex-start; }
  .botpanel .btn { width: 100%; }
}

/* ==========================================================================
   Child Safe Bot - floating widget, present on every page
   ========================================================================== */
.bot__shield { fill: var(--sky); }
.bot__eye { fill: #fff; }
.bot__smile { stroke: #fff; stroke-width: 3; }

.csb-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  display: flex; align-items: center; gap: 10px;
  background-color: var(--sky-deep); color: #fff; border: 2px solid rgba(255,255,255,.5);
  cursor: pointer; border-radius: 999px; padding: 13px 22px 13px 16px;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  box-shadow: 0 10px 28px rgba(18,58,78,.35);
  transition: transform .18s ease, background-color .18s ease;
}
.csb-toggle:hover { background-color: var(--sky-ink); transform: translateY(-2px); }
.csb-mark rect { fill: #fff; }
.csb-eye { fill: var(--sky-deep); }
.csb-smile { stroke: var(--sky-deep); stroke-width: 3; }

.csb-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 150;
  width: 380px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 130px);
  background-color: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 18px 50px rgba(18,58,78,.28);
  display: flex; flex-direction: column; overflow: hidden;
}
.csb-panel[hidden] { display: none; }
.csb-head { display: flex; align-items: flex-start; gap: 10px;
  background-color: var(--sky-deep); color: #fff; padding: 13px 16px; }
.csb-headtext { flex: 1; min-width: 0; }
.csb-headtext strong { font-family: var(--display); font-weight: 700; display: block; }
.csb-headsub { display: block; font-size: .76rem; color: rgba(255,255,255,.85); margin-top: .15rem; }
.csb-close { background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1;
  cursor: pointer; padding: 2px 6px; min-height: 32px; }

.csb-tools { display: flex; gap: .4rem; justify-content: flex-end;
  padding: .5rem .8rem 0; }
.csb-tool { font: inherit; font-family: var(--display); font-weight: 600; font-size: .76rem;
  cursor: pointer; border-radius: 999px; padding: .3rem .75rem; min-height: 30px;
  border: 1px solid var(--line); background-color: var(--paper); color: var(--ink-soft); }
.csb-tool:hover { border-color: var(--sky); color: var(--sky-ink); }
.csb-tool--exit { background-color: var(--signal); border-color: var(--signal); color: #fff; }
.csb-tool--exit:hover { background-color: var(--signal-dk); border-color: var(--signal-dk); color: #fff; }

.csb-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex;
  flex-direction: column; gap: 10px; }
.csb-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px;
  font-size: .92rem; line-height: 1.6; }
.csb-msg--bot { background-color: var(--porcelain); align-self: flex-start; border-bottom-left-radius: 4px; }
.csb-msg--you { background-color: var(--sky-deep); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.csb-msg p { margin: 0 0 .45rem; }
.csb-msg p:last-child { margin-bottom: 0; }
.csb-lead { font-weight: 600; }
.csb-card { background-color: var(--paper); border-radius: 10px; padding: .7rem .8rem;
  margin: .5rem 0; border-left: 3px solid var(--sky); }
.csb-cardtitle { font-family: var(--display); font-weight: 600; font-size: .9rem; }
.csb-cardtext { font-size: .88rem; color: var(--ink-soft); }
.csb-link { display: inline-flex; align-items: center; min-height: 28px;
  font-weight: 600; font-size: .88rem; color: var(--sky-ink); }
.csb-link::after { content: " \2192"; }
.csb-note { font-size: .8rem; color: var(--ink-soft); }
.csb-note--warn { color: var(--signal-dk); font-weight: 600; }
.csb-urgent { font-family: var(--display); font-weight: 700; color: var(--signal-dk); font-size: 1rem; }
.csb-line { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background-color: var(--paper); border-radius: 10px; padding: .6rem .7rem; margin: .45rem 0;
  border-left: 4px solid var(--signal); }
.csb-call { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 50px; min-width: 104px; padding: .35rem .8rem; border-radius: 10px;
  background-color: var(--signal); color: #fff; text-decoration: none; flex: 0 0 auto; }
.csb-call:hover { background-color: var(--signal-dk); color: #fff; }
.csb-callnum { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.csb-calllbl { font-size: .68rem; }
.csb-linemeta { flex: 1 1 150px; min-width: 0; }
.csb-linename { font-family: var(--display); font-weight: 600; font-size: .86rem; margin: 0; }
.csb-linenote { font-size: .8rem; color: var(--ink-soft); margin: .1rem 0 0; }
.csb-typing { display: inline-flex; gap: 5px; align-self: flex-start; }
.csb-dot { font-size: 9px; line-height: 1; color: var(--sky-ink); }

.csb-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 8px; }
.csb-chip { font: inherit; font-family: var(--body); font-size: .8rem; cursor: pointer;
  background: none; border: 1px solid var(--sky); color: var(--sky-ink);
  border-radius: 999px; padding: .4rem .8rem; min-height: 34px; }
.csb-chip:hover { background-color: var(--sky-soft); }

.csb-form { display: flex; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--line); }
.csb-input { flex: 1; min-width: 0; font-size: 16px; font-family: var(--body); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1rem;
  background-color: var(--porcelain); min-height: 44px; }
.csb-input:focus { border-color: var(--sky); background-color: #fff; outline: none; }
.csb-send { background-color: var(--sky-ink); color: #fff; border: 0; cursor: pointer;
  border-radius: 999px; padding: .6rem 1.1rem; min-height: 44px;
  font-family: var(--display); font-weight: 600; font-size: .9rem; }
.csb-send:hover { background-color: var(--sky-deep); }

/* The fixed action bar on mobile sits at the bottom, so lift the launcher. */
@media (max-width: 1279px) {
  .csb-toggle { padding: 0; width: 56px; height: 56px; border-radius: 50%;
    justify-content: center; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .csb-toggle-label { display: none; }
  .csb-panel { left: 12px; right: 12px; bottom: calc(148px + env(safe-area-inset-bottom, 0px));
    width: auto; height: min(64dvh, 520px); max-height: calc(100dvh - 220px); }
}

/* Prompt on the ask page that opens the widget */
.askbox { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background-color: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: clamp(1.3rem, 3vw, 2rem); border-left: 5px solid var(--sky); }
.askbox__avatar { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 auto;
  background-color: var(--sky-soft); border-radius: 18px; }
.askbox__copy { flex: 1 1 280px; min-width: 0; }
.askbox__copy .h3 { margin: 0 0 .3rem; }
.askbox__copy p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
@media (max-width: 1279px) { .askbox .btn { width: 100%; } }
.linkbtn { font: inherit; font-family: var(--body); font-weight: 600; color: var(--sky-ink);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 28px; }
.linkbtn:hover { color: var(--sky); }
@media (max-width: 1279px) { .linkbtn { min-height: 44px; } }