/* Care Resort Chiang Mai — Lake and Terracotta
   Spec: /DESIGN.md. Variance 4 / Motion 3 / Density 4. */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/Newsreader.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/Newsreader-Italic.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3.woff2') format('woff2-variations');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('../fonts/NotoSansThai.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0E01-0E5B, U+200B;
}

/* ---------- tokens ---------- */
:root {
  --paper:      #FBF8F2;
  --surface:    #F1EADC;
  --ink:        #1A1712;

  /* the dark zone is canopy, not brown. this is the page's value anchor. */
  --canopy:     #0E2A1F;
  --canopy-2:   #143528;
  --leaf:       #6FA53C;   /* living green, used at full strength */
  --leaf-bright:#8FC94F;

  --terracotta: #A65733;   /* roof tile. CTA warmth against the green */
  --terracotta-deep: #7F3F22;
  --lake:       #2F6E79;
  --teal:       #2F6E79;   /* focus ring color, same as lake */
  --muted:      #5C5247;
  --keyline:    #DED3C4;

  --sans: 'Source Sans 3', 'Noto Sans Thai', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, serif;

  --step--1: clamp(1rem,     0.96rem + 0.20vw, 1.125rem);
  --step-0:  clamp(1.25rem,  1.20rem + 0.25vw, 1.375rem);
  --step-1:  clamp(1.5rem,   1.40rem + 0.50vw, 1.875rem);
  --step-2:  clamp(1.875rem, 1.70rem + 0.90vw, 2.5rem);
  --step-3:  clamp(2.375rem, 2.05rem + 1.60vw, 3.5rem);

  --wrap: 1200px;
  --measure: 66ch;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --band: clamp(4rem, 10vw, 8rem);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-mid: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
}
:lang(th) { line-height: 1.85; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p, li { max-width: var(--measure); }
a { color: var(--terracotta-deep); text-underline-offset: .2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto; }
.band { padding-block: var(--band); }
.band--surface { background: var(--surface); }
.lede { font-size: var(--step-1); font-family: var(--serif); color: var(--muted); line-height: 1.4; }
.eyebrow {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; color: #4A7A2E; margin: 0 0 1rem;
}
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper);
  padding: 1rem 1.5rem; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.site-head { border-bottom: 1px solid var(--keyline); background: var(--paper); }
.site-head__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  padding-block: 1rem;
}
@media (min-width: 1100px) { .site-head__in { flex-wrap: nowrap; } }
.brand { font-family: var(--serif); font-size: 1.5rem; white-space: nowrap; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.1; }
.brand span { display: block; font-family: var(--sans); font-size: .55em; font-weight: 400; color: var(--muted); letter-spacing: .04em; }
.site-nav { margin-left: auto; }
.site-head__in > .btn--sm { margin-left: .25rem; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.15rem; list-style: none; margin: 0; padding: 0; }
.site-nav li { max-width: none; }
.site-nav a {
  display: block; padding: .6rem .25rem; font-size: var(--step--1); font-weight: 600;
  color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent;
  min-height: 44px; display: flex; align-items: center;
}
.site-nav a[aria-current="page"] { border-bottom-color: var(--terracotta); }
.head-tel {
  white-space: nowrap; font-weight: 600; font-size: var(--step--1); color: var(--terracotta-deep);
  min-height: 44px; display: inline-flex; align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { border-bottom-color: var(--keyline); color: var(--terracotta-deep); }
}

/* ---------- hero: full-bleed, type over image ---------- */
.hero { position: relative; isolation: isolate; background: var(--canopy); }
.hero picture { position: absolute; inset: 0; z-index: -2; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(8,26,19,.90) 0%, rgba(8,26,19,.66) 40%, rgba(8,26,19,.10) 74%, rgba(8,26,19,0) 100%),
    linear-gradient(to top, rgba(8,26,19,.60) 0%, rgba(8,26,19,0) 42%);
}
.hero__panel {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(520px, 76vh, 760px);
  padding-block: clamp(3rem, 8vw, 5.5rem);
}
.hero h1 {
  color: #fff; max-width: 17ch; margin-bottom: .3em;
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  line-height: 1.02; letter-spacing: -.015em; font-weight: 600;
  text-wrap: balance;
}
.hero .lede { color: #F0E7DA; max-width: 44ch; font-family: var(--sans); font-size: var(--step-0); line-height: 1.5; }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.85); }
@media (hover: hover) and (pointer: fine) {
  .hero .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
}

/* trust bar, directly under the hero */
.trust { background: var(--canopy); color: #EAF3E4; border-bottom: 3px solid var(--leaf); }
.trust__in { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; padding-block: 1.1rem; align-items: center; }
.trust p { margin: 0; font-size: var(--step--1); font-weight: 600; max-width: none; }
.trust p b { font-weight: 700; color: var(--leaf-bright); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: .75rem 1.75rem;
  font-family: var(--sans); font-size: var(--step-0); font-weight: 600;
  border-radius: 4px; border: 2px solid var(--terracotta); text-decoration: none;
  background: var(--terracotta); color: #fff;
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.btn--ghost { background: transparent; color: var(--terracotta-deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.btn--sm { min-height: 44px; padding: .5rem 1.15rem; font-size: var(--step--1); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); color: #fff; }
}

/* ---------- split sections (variance 4: 5/7, alternating) ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; }
  .split--flip > *:first-child { order: 2; }
}

/* ---------- figures: mats, never full-bleed (see DESIGN.md §7) ---------- */
figure { margin: 0; }
.shot { max-width: 480px; }
.shot--wide { max-width: 680px; }
.shot img { border: 1px solid var(--keyline); background: var(--paper); }
.shot figcaption {
  font-size: var(--step--1); color: var(--muted); margin-top: .75rem;
  line-height: 1.45; max-width: 46ch;
}

/* ---------- care tiers ---------- */
.tiers { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 820px) { .tiers { grid-template-columns: 1fr 1fr; } }
.tier {
  border: 1px solid var(--keyline); border-top: 5px solid var(--leaf);
  background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem);
  container-type: inline-size;
}
.tier--close { border-top-color: var(--terracotta); }
.tier h3 { margin-bottom: .25em; }
.tier__who { font-weight: 600; color: #4A7A2E; margin: 0 0 1rem; font-size: var(--step--1); }
.tier ul { padding-left: 1.25em; margin: 0; }
.tier li { margin-bottom: .5rem; }

/* ---------- facts ---------- */
.facts { display: grid; gap: 1px; background: var(--keyline); border: 1px solid var(--keyline); margin-top: 3rem; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--paper); padding: 1.75rem 1.5rem; }
.fact b { display: block; font-family: var(--serif); font-size: var(--step-2); line-height: 1; color: var(--terracotta-deep); margin-bottom: .35rem; }
.fact span { font-size: var(--step--1); color: var(--muted); display: block; max-width: 22ch; }

/* ---------- FAQ ---------- */
.faq { max-width: 46rem; margin-top: 2.5rem; }
.faq details { border-bottom: 1px solid var(--keyline); }
.faq summary {
  font-family: var(--serif); font-size: var(--step-1); font-weight: 600;
  padding: 1.25rem 3rem 1.25rem 0; cursor: pointer; position: relative;
  min-height: 56px; display: flex; align-items: center; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: .5rem; font-size: 1.5em;
  color: var(--terracotta); font-family: var(--sans); font-weight: 400;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details > div { padding-bottom: 1.5rem; }
.faq p { margin-top: 0; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--terracotta-deep); } }

/* ---------- quote ---------- */
.pull {
  border-left: 4px solid var(--terracotta); padding: .25rem 0 .25rem 1.75rem;
  margin: 2.5rem 0; font-family: var(--serif); font-size: var(--step-1);
  font-style: italic; line-height: 1.4; max-width: 44ch;
}
.pull cite { display: block; font-size: var(--step--1); font-style: normal; font-family: var(--sans); color: var(--muted); margin-top: .75rem; }

/* ---------- footer ---------- */
.site-foot { background: var(--canopy); color: var(--surface); padding-block: var(--band) 3rem; margin-top: var(--band); }
.site-foot a { color: var(--surface); }
.site-foot__grid { display: grid; gap: 2.5rem; padding-bottom: 52px; }
@media (min-width: 760px) { .site-foot__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-foot h2 { font-size: var(--step-1); color: var(--paper); }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: .6rem; }
.site-foot__grid ul { padding-bottom: 1rem; }
.site-foot .fine { border-top: 1px solid rgba(255,255,255,.18); margin-top: 3rem; padding-top: 1.5rem; font-size: var(--step--1); color: #C9BEB0; }

/* ---------- motion (intensity 3) ----------
   Deliberately minimal: state transitions only, no scroll reveals.
   Reasoning in DESIGN.md §6. Section fade-ins were tried and removed: they hide
   content at opacity 0 until a scroll position is reached, and for an audience
   that includes residents on older devices, "content you cannot see" is a worse
   failure than "content that does not animate". Nothing on this site is hidden
   by default; every section renders at full opacity with CSS or without it. */
@media (prefers-reduced-motion: no-preference) {
  .faq details > div { transition: opacity 200ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- full-bleed feature band: dark canopy, image at strength ---------- */
.feature { position: relative; isolation: isolate; background: var(--canopy); color: #EDF3E7; }
.feature picture { position: absolute; inset: 0; z-index: -2; }
.feature__img { width: 100%; height: 100%; object-fit: cover; }
.feature::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to left, rgba(8,26,19,.94) 0%, rgba(8,26,19,.80) 42%, rgba(8,26,19,.25) 78%, rgba(8,26,19,.05) 100%);
}
.feature__in { min-height: clamp(440px, 58vh, 620px); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(3rem, 7vw, 5rem); }
.feature__body { max-width: 46ch; margin-left: auto; margin-right: 0; }
.feature h2 { color: #fff; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.06; }
.feature p { color: #D9E5D2; }
.feature .eyebrow { color: var(--leaf-bright); }
.feature .btn--ghost { color: #fff; border-color: rgba(255,255,255,.8); }
@media (hover: hover) and (pointer: fine) {
  .feature .btn--ghost:hover { background: #fff; color: var(--canopy); border-color: #fff; }
}

/* inverted band: solid canopy, no image */
.band--dark { background: var(--canopy); color: #EDF3E7; }
.band--dark h2 { color: #fff; }
.band--dark p { color: #D9E5D2; }
.band--dark .eyebrow,
.statement .eyebrow { color: var(--leaf-bright); }
.band--dark .pull { border-left-color: var(--leaf); color: #fff; }
.band--dark .pull cite { color: #A9BFA0; }

/* band color variation: alternate dark sections with canopy-2 to break monotony */
.band--dark--alt { background: var(--canopy-2); }
.feature--alt { background: var(--canopy-2); }
.feature--alt::after { background: linear-gradient(to left, rgba(20,53,40,.94) 0%, rgba(20,53,40,.80) 42%, rgba(20,53,40,.25) 78%, rgba(20,53,40,.05) 100%); }
.feature--alt.feature--left::after { background: linear-gradient(to right, rgba(20,53,40,.96) 0%, rgba(20,53,40,.92) 34%, rgba(20,53,40,.55) 58%, rgba(20,53,40,.12) 85%, rgba(20,53,40,0) 100%); }
.closer--alt { background: var(--canopy-2); }
.closer--alt::after { background: radial-gradient(120% 90% at 50% 45%, rgba(20,53,40,.78) 0%, rgba(20,53,40,.88) 60%, rgba(20,53,40,.94) 100%); }

/* facts on canopy */
.facts--dark { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.facts--dark .fact { background: var(--canopy-2); }
.facts--dark .fact b { color: var(--leaf-bright); }
.facts--dark .fact span { color: #C3D3BA; }

/* ---------- closing CTA: full-bleed, centred, the strongest band on the page ---------- */
.closer { position: relative; isolation: isolate; background: var(--canopy); color: #EDF3E7; text-align: center; margin-top: var(--band); }
.closer picture { position: absolute; inset: 0; z-index: -2; }
.closer__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.closer::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(8,26,19,.86) 0%, rgba(8,26,19,.78) 100%);
}
.closer__in { min-height: clamp(380px, 48vh, 520px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: clamp(3.5rem, 8vw, 6rem); }
.closer .eyebrow { color: var(--leaf-bright); }
.closer h2 { color: #fff; font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem); line-height: 1.05; max-width: 20ch; }
.closer p { color: #D9E5D2; max-width: 52ch; margin-inline: auto; }
.closer .btn-row { justify-content: center; }
.closer .btn--ghost { color: #fff; border-color: rgba(255,255,255,.8); }
@media (hover: hover) and (pointer: fine) {
  .closer .btn--ghost:hover { background: #fff; color: var(--canopy); border-color: #fff; }
}
.closer + .site-foot { margin-top: 0; }

/* feature image: favour the faces */
.feature__img { object-position: 62% 38%; }

/* footer sits flush under the closing band */
main:has(.closer) + .site-foot { margin-top: 0; }

/* feature variant: image sits right, copy left */
.feature--left .feature__body { margin-left: 0; margin-right: auto; }
.feature--left::after {
  background: linear-gradient(to right, rgba(8,26,19,.94) 0%, rgba(8,26,19,.80) 42%, rgba(8,26,19,.25) 78%, rgba(8,26,19,.05) 100%);
}
.feature--left .feature__img { object-position: 34% 42%; }

/* feature copy column needs real width at desktop */
@media (min-width: 900px) {
  .feature__body { width: min(46ch, 46%); max-width: none; }
  .feature--left .feature__img { object-position: 34% 40%; }
}

.feature--left::after {
  background: linear-gradient(to right, rgba(8,26,19,.96) 0%, rgba(8,26,19,.92) 34%, rgba(8,26,19,.55) 58%, rgba(8,26,19,.12) 85%, rgba(8,26,19,0) 100%);
}

/* ============================================================
   SIGNATURE: kalae (กาแล)
   The crossed gable finials of Lanna houses, the architectural
   mark of Northern Thailand. Used three ways only: as the eyebrow
   mark, as tiered-eave rules under section headings, and once at
   scale in the closing band. Restraint is the point.
   ============================================================ */

:root {
  --kalae: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 2 L15.5 21'/%3E%3Cpath d='M21 2 L8.5 21'/%3E%3C/g%3E%3C/svg%3E");
  --kalae-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M2.4 2.9 L4.6 1.9 L15.6 21.2 L13.1 22.1 Z'/%3E%3Cpath d='M21.6 2.9 L19.4 1.9 L8.4 21.2 L10.9 22.1 Z'/%3E%3C/g%3E%3C/svg%3E");
}

.eyebrow { display: flex; align-items: center; gap: .6rem; }
.eyebrow::before {
  content: ''; width: 1.15em; height: 1.15em; flex: none;
  background: currentColor;
  -webkit-mask: var(--kalae) center / contain no-repeat;
          mask: var(--kalae) center / contain no-repeat;
}

.press-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 20px;
  margin-top: 2.5rem;
  padding: 0 200px;
  width: 100%;
}
.press-tile {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.press-tile::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,26,18,.75) 0%, rgba(10,26,18,.15) 38%, rgba(10,26,18,0) 60%);
}
.press-tile--guardian { grid-column: 1 / 2; grid-row: 1 / 3; }
.press-tile--telegraph { grid-column: 2 / 3; grid-row: 1 / 2; }
.press-tile--edgeservices { grid-column: 2 / 3; grid-row: 2 / 3; }
.press-tile--eliteplus { grid-column: 3 / 4; grid-row: 1 / 3; }
.press-tile--voa { grid-column: 1 / 2; grid-row: 3 / 4; }
.press-tile--theitem { grid-column: 2 / 3; grid-row: 3 / 4; }
.press-tile--thelady { grid-column: 3 / 4; grid-row: 3 / 4; }
.press-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.press-tile__tag {
  position: absolute; left: 1.1rem; bottom: 1rem; right: 1.1rem; z-index: 2;
  color: #fff;
  font-family: var(--serif); font-size: clamp(1.05rem, 1.4vw, 1.4rem); font-weight: 600;
  line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.press-tile--guardian .press-tile__tag { font-size: clamp(1.3rem, 2vw, 1.85rem); }
.press-tile--voa img { object-position: top center; object-position: center 12%; }
.press-tile--guardian img,
.press-tile--eliteplus img { object-fit: contain; object-position: top center; background: var(--canopy); }
@media (hover: hover) and (pointer: fine) {
  .press-tile:hover img { transform: scale(1.06); }
}
@media (max-width: 1000px) {
  .press-mosaic { padding: 0 clamp(20px, 6vw, 100px); }
}
@media (max-width: 720px) {
  .press-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; padding: 0 24px; gap: 16px; }
  .press-tile--guardian,
  .press-tile--telegraph,
  .press-tile--edgeservices,
  .press-tile--eliteplus,
  .press-tile--voa,
  .press-tile--theitem,
  .press-tile--thelady { grid-column: auto; grid-row: auto; }
  .press-tile { aspect-ratio: 16 / 10; }
}

/* tiered eave rule: two stacked lines of unequal length, the way
   Lanna roofs step down in tiers */
.eave { margin: 1.5rem 0 2rem; }
.eave::before, .eave::after { content: ''; display: block; height: 2px; border-radius: 2px; }
.eave::before { width: 108px; background: var(--terracotta); }
.eave::after  { width: 56px; background: var(--leaf); margin-top: 6px; }
.band--dark .eave::before, .feature .eave::before, .closer .eave::before { background: var(--leaf); }
.band--dark .eave::after,  .feature .eave::after,  .closer .eave::after  { background: rgba(255,255,255,.5); }

/* the one large statement of the motif */
.closer__mark {
  position: absolute; z-index: -1; right: clamp(-40px, -2vw, 0px); bottom: -6%;
  width: clamp(260px, 34vw, 520px); aspect-ratio: 1;
  background: rgba(143,201,79,.16);
  -webkit-mask: var(--kalae) center / contain no-repeat;
          mask: var(--kalae) center / contain no-repeat;
  pointer-events: none;
}

/* ---------- motion: selective scroll-in ----------
   Only on bands that benefit. Guarded by @supports so unsupported
   browsers render everything immediately, and the range completes
   early so content is never held invisible for long. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tiers > .tier,
    .feature__body,
    .closer__in > *,
    .facts > .fact {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 32%;
    }
    .tiers > .tier:nth-child(2),
    .facts > .fact:nth-child(2) { animation-range: entry 8% entry 36%; }
    .facts > .fact:nth-child(3) { animation-range: entry 11% entry 40%; }
    .facts > .fact:nth-child(4) { animation-range: entry 14% entry 44%; }
  }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* closer: centre the eave, lighten the scrim, make the motif actually visible */
.closer .eyebrow { justify-content: center; }
.closer .eave::before, .closer .eave::after { margin-inline: auto; }
.closer::after {
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(8,26,19,.78) 0%, rgba(8,26,19,.88) 60%, rgba(8,26,19,.94) 100%);
}
.closer__mark {
  right: auto; left: 50%; bottom: auto; top: 50%;
  translate: -50% -50%;
  width: clamp(420px, 52vw, 760px);
  background: rgba(143,201,79,.10);
}
@media (min-width: 900px) {
  .closer__mark { left: auto; right: -4%; translate: 0 -50%; width: clamp(380px, 40vw, 620px); background: rgba(143,201,79,.13); }
}

/* the one large statement of the motif, on a clean dark ground */
.band--dark { position: relative; isolation: isolate; overflow: hidden; }
.kalae-mark {
  position: absolute; z-index: -1; top: 50%; right: -3%; translate: 0 -50%;
  width: clamp(300px, 34vw, 520px); aspect-ratio: 1;
  background: rgba(143,201,79,.14);
  -webkit-mask: var(--kalae-solid) center / contain no-repeat;
          mask: var(--kalae-solid) center / contain no-repeat;
  pointer-events: none;
}
.eave { margin: 1.15rem 0 1.5rem; }

/* ---------- fixes ---------- */
/* the closing band butts straight onto the section above it; the 128px
   margin was leaving an empty strip of paper with nothing in it */
.closer { margin-top: 0; }

/* full-bleed bands carry decorative elements that deliberately sit past the
   right edge (.kalae-mark). Each parent clips them, but this stops a single
   missed overflow:hidden from putting a scrollbar across the whole page.
   clip, not hidden, so it never creates a scroll container. */
html, body { overflow-x: clip; }

/* skip link: move it off-screen without parking it 9999px to the left */
.skip { left: 0; transform: translateY(-120%); }
.skip:focus { transform: none; }

/* ---------- sticky header, shrinks on scroll ----------
   Scroll-driven, CSS only, no JS. @property lets the padding and brand size
   interpolate smoothly. This does animate layout, which the motion rules
   otherwise forbid, but the reflow is contained inside the header and the
   pattern is worth the exception. Unsupported browsers get a static sticky
   header, which is fine. */
@property --head-pad { syntax: '<length>'; inherits: true; initial-value: 1rem; }
@property --brand-size { syntax: '<length>'; inherits: true; initial-value: 1.5rem; }

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  transition: box-shadow 160ms var(--ease-out);
}
.site-head__in { padding-block: var(--head-pad); }
.brand { font-size: var(--brand-size); }
.brand span {
  overflow: hidden;
  max-height: var(--brand-sub, 2em);
  opacity: var(--brand-sub-o, 1);
}
html { scroll-padding-top: 6.5rem; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .site-head {
      animation: headshrink linear both;
      animation-timeline: scroll(root);
      animation-range: 0 180px;
    }
  }
}
@keyframes headshrink {
  from { --head-pad: 1rem;    --brand-size: 1.5rem;  --brand-sub: 2em; --brand-sub-o: 1;
         box-shadow: 0 0 0 rgba(36,30,24,0); }
  to   { --head-pad: .45rem;  --brand-size: 1.2rem;  --brand-sub: 0em; --brand-sub-o: 0;
         box-shadow: 0 2px 14px rgba(36,30,24,.16); }
}

/* ---------- footer fine bar: halved, with legal links inline ---------- */
.site-foot { padding-block: 76px 1.5rem; }
.site-foot .fine {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 2rem; justify-content: space-between;
  margin-top: 1.5rem; padding-top: .85rem;
  font-size: .9375rem;
}
.site-foot .fine p { margin: 0; max-width: none; }
.legal { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.legal li { margin: 0; max-width: none; }
.legal a { color: #C9BEB0; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); padding-block: .2rem; }
@media (hover: hover) and (pointer: fine) {
  .legal a:hover { color: #fff; border-bottom-color: var(--leaf); }
}

/* ---------- interior page header + long-form prose ---------- */
.page-head { background: var(--canopy); color: #EDF3E7; padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 3.5rem); }
.page-head h1 { color: #fff; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.05; max-width: 22ch; }
.page-head .eyebrow { color: var(--leaf-bright); }
.page-head .updated { color: #A9BFA0; font-size: var(--step--1); margin: 0; }
.prose { padding-block: clamp(3rem, 7vw, 5rem); }
.prose h2 { font-size: var(--step-1); margin-top: 2.5em; }
.prose h2:first-of-type { margin-top: 0; }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: .5rem; }
.notice {
  border-left: 4px solid var(--terracotta); background: var(--surface);
  padding: 1.25rem 1.5rem; margin: 2rem 0; max-width: var(--measure);
}
.notice p { margin: 0; }
.notice p + p { margin-top: .75rem; }

/* ============================================================
   SPLIT: the two care levels, expressed as two halves of the page.
   Light half is independence, dark half is nursing. The value
   break down the middle does the explaining before the words do.
   ============================================================ */
.duo { display: grid; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }

.duo__half { display: flex; flex-direction: column; }
.duo__half--light { background: var(--surface); color: var(--ink); }
.duo__half--dark  { background: var(--canopy);  color: #EDF3E7; }

.duo__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.duo__img img { width: 100%; height: 100%; object-fit: cover; }
.duo__half--dark .duo__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,26,19,.15), rgba(8,26,19,.72));
}

.duo__body { padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.25rem) clamp(2.5rem, 5vw, 4rem); flex: 1; display: flex; flex-direction: column; }
.duo__body > .btn { margin-top: auto; align-self: flex-start; }
.duo h3 { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.1; margin-bottom: .2em; }
.duo__half--dark h3 { color: #fff; }
.duo__who { font-weight: 600; font-size: var(--step--1); margin: 0 0 1.5rem; letter-spacing: .01em; }
.duo__half--light .duo__who { color: #4A7A2E; }
.duo__half--dark  .duo__who { color: var(--leaf-bright); }

.duo ul { list-style: none; padding: 0; margin: 0 0 2rem; }
.duo li { position: relative; padding-left: 1.6rem; margin-bottom: .85rem; max-width: 40ch; }
.duo li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: .6rem; height: 1px;
  background: var(--terracotta);
}
.duo__half--dark li::before { background: var(--leaf); }
.duo__half--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.8); }
@media (hover: hover) and (pointer: fine) {
  .duo__half--dark .btn--ghost:hover { background: #fff; color: var(--canopy); border-color: #fff; }
}

/* ============================================================
   STATEMENT: the one line the whole place is built on, at size.
   ============================================================ */
.statement { background: var(--canopy); color: #EDF3E7; position: relative; isolation: isolate; overflow: hidden; }
.statement__in { padding-block: clamp(4rem, 9vw, 7rem); }
.statement blockquote {
  margin: 0; max-width: 24ch;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 4rem); line-height: 1.08;
  color: #fff; letter-spacing: -.01em;
}
.statement blockquote span { color: var(--leaf-bright); font-style: normal; }
.statement cite {
  display: block; margin-top: 2rem; font-style: normal; font-family: var(--sans);
  font-size: var(--step--1); color: #A9BFA0; max-width: 40ch;
}
.statement__note { margin-top: 2.5rem; max-width: 52ch; color: #D9E5D2; }
.statement .kalae-mark { top: 50%; right: -6%; width: clamp(280px, 30vw, 460px); }

/* ============================================================
   FAQ: sticky rail left, questions right, wider column.
   ============================================================ */
.qa { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 900px) {
  .qa { grid-template-columns: 5fr 7fr; align-items: start; }
  .qa__rail { position: sticky; top: 7rem; }
}
.qa__rail p:not(.eyebrow) { color: var(--muted); }
.faq { max-width: none; margin-top: 0; }
.faq summary { font-size: clamp(1.25rem, 1.05rem + .55vw, 1.6rem); }
.faq details[open] summary { color: var(--terracotta-deep); }

/* copy that should run the full container rather than the 66ch measure */
.wide, .wide p { max-width: none; }

/* ============================================================
   HAMBURGER
   Progressive enhancement: the nav is plain visible markup. The
   inline script in <head> adds .js to <html>, and only then does
   the collapse apply. No JS means a fully visible nav, never a
   dead button.
   ============================================================ */
.nav-toggle { display: none; }

.js .nav-toggle {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .5rem .9rem;
  margin-left: auto;
  background: transparent; border: 1px solid var(--keyline); border-radius: 4px;
  font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 20px; height: 2px; background: currentColor; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
  transition: transform 180ms var(--ease-out), opacity 120ms linear;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1100px) { .js .nav-toggle { display: none; } }

@media (max-width: 1099px) {
  .js .site-nav,
  .js .head-tel,
  .js .site-head__in > .btn--sm { display: none; }
  .js .site-head__in.is-open .site-nav,
  .js .site-head__in.is-open .head-tel,
  .js .site-head__in.is-open .btn--sm { display: flex; }
  .js .site-head__in.is-open {
    flex-wrap: wrap; row-gap: .25rem;
  }
  .js .site-head__in.is-open .site-nav { flex-basis: 100%; margin: .5rem 0 0; }
  .js .site-head__in.is-open .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-head__in.is-open .site-nav a {
    padding: .35rem 0; border-bottom: 1px solid var(--keyline); border-radius: 0;
  }
  .js .site-head__in.is-open .head-tel { flex-basis: 100%; }
  .js .site-head__in.is-open .btn--sm { margin: .5rem 0 .25rem; }
}

/* ---------- statement: quote left, the motif explained right ---------- */
.statement__in { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: stretch; }
@media (min-width: 1000px) { .statement__in { grid-template-columns: 7fr 4fr; } }

.kalae-plate {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--surface);
  border-radius: 3px;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}
.kalae-plate figcaption { position: relative; z-index: 1; }
.kalae-plate__mark {
  position: absolute; z-index: 0;
  top: 1.5rem; left: 1.5rem; right: 1.5rem; bottom: 42%;
  background: #3F6B26;
  -webkit-mask: var(--kalae-solid) center / contain no-repeat;
          mask: var(--kalae-solid) center / contain no-repeat;
  opacity: .92;
}
.kalae-plate figcaption { padding: 0; align-self: stretch; }
.kalae-plate b { display: block; color: var(--ink); font-family: var(--serif); font-weight: 700; }
.kalae-plate b[lang="th"] { font-family: var(--sans); font-size: 1.6rem; color: #3F6B26; line-height: 1.4; font-weight: 700; }
.kalae-plate b + b { font-size: var(--step-1); margin-bottom: .5rem; letter-spacing: .01em; }
.kalae-plate span { display: block; color: var(--muted); font-size: var(--step--1); line-height: 1.55; max-width: none; font-weight: 500; }
@media (max-width: 999px) { .kalae-plate { min-height: 505px; } }

@media (min-width: 1000px) { .statement blockquote { max-width: 18ch; } }

/* the box stretches to the copy column, so the column must end exactly at the
   last line of text, not 22px below it on a trailing paragraph margin */
.statement__copy > *:last-child { margin-bottom: 0; }

/* ---------- contact form ---------- */
form { max-width: 640px; margin-top: 2.5rem; }
.form-group { margin-bottom: 1.75rem; position: relative; }
.form-group label {
  display: block; font-family: var(--serif); font-size: var(--step--1);
  font-weight: 600; color: var(--ink); margin-bottom: .5rem; letter-spacing: .01em;
}
.form-group label span[aria-label="required"] { color: var(--terracotta-deep); margin-left: .15em; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; display: block; appearance: none;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--keyline); border-radius: 3px;
  padding: .85rem 1rem; min-height: 52px;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background 160ms var(--ease-out);
}
.form-group textarea { min-height: auto; padding-top: .9rem; line-height: 1.55; resize: vertical; }
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235C5247' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--muted); opacity: .75; }
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: #C7B9A2; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--teal); background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);
}
.form-note { font-size: .875rem; color: var(--muted); margin: .5rem 0 0; line-height: 1.5; }
.form-actions { margin-top: 2.25rem; }
.form-actions .btn { min-width: 220px; }
.form-privacy {
  max-width: 640px; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--keyline);
  font-size: .875rem; color: var(--muted); line-height: 1.6;
}
.form-privacy a { color: var(--terracotta-deep); }