/* =================================================================
   SayangTeman
   Colours, spacing and type for the whole public site.
   ================================================================= */

:root {
  --ink:        #142424;
  --ink-2:      #334646;
  --muted:      #6b7f7f;
  --teal:       #0d6466;
  --teal-dark:  #094a4c;
  --teal-deep:  #063637;
  --teal-wash:  #e5f1f0;
  --teal-line:  #bddbd9;
  --gold:       #b07816;
  --gold-bright:#e6a830;
  --rose:       #e3365c;
  --rose-dark:  #c0244a;
  --rose-wash:  #fdecf0;
  --gold-wash:  #fdf2dd;
  --cream:      #fbf7f0;
  --cream-2:    #f5eee1;
  --surface:    #ffffff;
  --line:       #e7dfd0;
  --line-soft:  #f1ebde;

  /* The CJK families at the end are what Chinese text falls back to.
     Latin glyphs still come from Fraunces and Plus Jakarta Sans, which
     do not cover Chinese, so the browser only reaches for these when it
     hits a Chinese character. */
  --cjk: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Hiragino Sans TC', 'Heiti TC', sans-serif;
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Noto Serif TC', 'PingFang TC', serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', var(--cjk);

  --wrap: 1160px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(21, 36, 32, .05), 0 2px 8px rgba(21, 36, 32, .04);
  --shadow: 0 2px 4px rgba(21, 36, 32, .05), 0 12px 32px rgba(21, 36, 32, .07);
  --shadow-lg: 0 4px 10px rgba(21, 36, 32, .06), 0 26px 60px rgba(21, 36, 32, .12);
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
svg.ic { flex: none; vertical-align: -.2em; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.7rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: 1.24rem; letter-spacing: -.01em; }
h4 { font-size: 1.02rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }

/* Chinese has no word spaces and denser glyphs: it wants a little more
   room between lines and none of the negative letter-spacing that suits
   Latin headlines. */
html:lang(zh-Hant) body { line-height: 1.8; }
html:lang(zh-Hant) h1,
html:lang(zh-Hant) h2,
html:lang(zh-Hant) h3 { letter-spacing: 0; line-height: 1.35; }
html:lang(zh-Hant) h1 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.1rem); }
html:lang(zh-Hant) .eyebrow,
html:lang(zh-Hant) .site-foot h2 { letter-spacing: .08em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--teal); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 2px; border-radius: 3px; }

.lede { font-size: 1.16rem; color: var(--ink-2); }
.eyebrow {
  font-size: .77rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px; display: flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--gold-bright); flex: none; }
.eyebrow.centred { justify-content: center; }

/* ---------- buttons --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 .95rem/1 var(--font-body);
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: .17s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--rose); color: #fff; }
.btn-primary:hover { background: var(--rose-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-gold { background: var(--gold-bright); color: #2a1d05; }
.btn-gold:hover { background: #f0b03c; color: #2a1d05; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--teal-dark); border-color: var(--teal-line); }
.btn-ghost:hover { background: var(--teal-wash); color: var(--teal-dark); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-sm { padding: 11px 19px; font-size: .875rem; }
.btn-block { width: 100%; }

/* ---------- header ---------------------------------------------- */
/* Wide screens: the top row scrolls away and the menu row below it stays
   pinned. Narrow screens (see the 1000px rule further down) flip this:
   the top row is pinned and the menu becomes a drawer. */
.site-head {
  position: relative; z-index: 51;
  background: var(--cream);
}
.head-inner { display: flex; align-items: center; gap: 22px; min-height: 74px; }

.head-phone {
  display: inline-flex; align-items: center; gap: 7px; margin-right: 6px;
  font-size: .9rem; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.head-phone svg { color: var(--teal); }
.head-phone:hover { color: var(--teal-dark); }

.nav-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.nav-bar-inner { display: flex; align-items: center; gap: 18px; min-height: 52px; }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo-badge { width: 54px; height: 54px; display: block; flex: none; }
.logo-words {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 700;
  line-height: 1.05; letter-spacing: -.015em; display: block;
}
.logo-words .w-sayang { color: var(--rose); }
.logo-words .w-teman { color: var(--teal); }
.logo-words em {
  display: block; font-family: var(--font-body); font-style: normal;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  color: var(--gold); margin-top: 3px;
}

.nav { display: flex; gap: 2px; margin-left: -12px; flex-wrap: nowrap; min-width: 0; }
.nav a {
  padding: 8px 12px; border-radius: 8px; font-size: .93rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.head-cta { margin-left: auto; flex: none; }
.nav a:hover { background: var(--cream-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--teal-dark); font-weight: 700; background: var(--teal-wash); }
.nav-only-mobile { display: none; }
.nav a.nav-call {
  margin-top: 8px; border: 1px solid var(--teal-line); background: var(--teal-wash);
  color: var(--teal-dark); font-weight: 700; align-items: center; gap: 9px;
}
.nav a.nav-call svg { color: var(--teal); }

.head-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.lang-switch {
  display: inline-flex; align-items: stretch; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.lang-switch a {
  display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: var(--muted); text-decoration: none;
  letter-spacing: .03em; line-height: 1; transition: .15s ease; white-space: nowrap;
}
.lang-switch a:hover { color: var(--teal-dark); background: var(--cream-2); }
.lang-switch a.on { background: var(--teal); color: #fff; }
.lang-switch a.on:hover { background: var(--teal-dark); color: #fff; }

.burger { display: none; width: 44px; height: 40px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 10px; cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 4px auto; border-radius: 2px;
  transition: .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 420px at 88% -8%, var(--teal-wash), transparent 62%),
    radial-gradient(560px 380px at 4% 108%, var(--gold-wash), transparent 60%),
    var(--cream);
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 60px; align-items: center;
  padding: 74px 0 82px;
}
.hero h1 { margin-bottom: 22px; }
.hero h1 .accent { color: var(--teal); }
.hero-lede { font-size: 1.19rem; color: var(--ink-2); max-width: 33em; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; padding-top: 24px;
  border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { color: var(--teal); }

/* the day-plan card in the hero — this is the actual product */
/* The full logo sits in the hero on its own — nothing is laid over it. */
.hero-logo { display: grid; place-items: center; }
.hero-logo-img {
  width: 100%; max-width: 460px; height: auto; display: block;
  filter: drop-shadow(0 18px 36px rgba(6, 54, 55, .14));
}

/* "What a day looks like" — words on the left, the example card right. */
.plan-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.plan-split-grid .plan-card { transform: rotate(-.6deg); }

.plan-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; transform: rotate(-.7deg);
}
.plan-head {
  background: var(--teal-deep); color: #fff; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.plan-head strong { font-family: var(--font-display); font-size: 1.07rem; font-weight: 600; }
.plan-head span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #8fc6bb; }
.plan-body { padding: 8px 24px 22px; }
.plan-row { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.plan-row:last-child { border-bottom: 0; }
.plan-time {
  font-size: .78rem; font-weight: 700; color: var(--teal); letter-spacing: .03em;
  width: 60px; flex: none; padding-top: 2px;
}
.plan-what { font-size: .93rem; line-height: 1.5; }
.plan-what b { display: block; font-weight: 700; color: var(--ink); }
.plan-what em { font-style: normal; color: var(--muted); font-size: .85rem; }
.plan-foot {
  background: var(--gold-wash); border-top: 1px solid var(--line);
  padding: 15px 24px; font-size: .85rem; color: #6b4a0c;
  display: flex; align-items: center; gap: 10px;
}
.plan-foot svg { color: var(--gold); flex: none; }

/* ---------- sections -------------------------------------------- */
.section { padding: 78px 0; }
.section-tight { padding: 56px 0; }
.section-cream { background: var(--cream-2); }
.section-white { background: var(--surface); }
.section-teal { background: var(--teal-deep); color: #dcece8; }
.section-teal h2, .section-teal h3 { color: #fff; }

.section-head { max-width: 46rem; margin-bottom: 44px; }
.section-head.centred { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--ink-2); font-size: 1.06rem; }

/* ---------- promise strip --------------------------------------- */
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.promise { background: var(--surface); padding: 26px 24px; }
.promise .ic { color: var(--teal); margin-bottom: 12px; }
.promise h3 { font-size: 1rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; margin-bottom: 6px; }
.promise p { font-size: .9rem; color: var(--muted); line-height: 1.55; }

/* ---------- audience cards -------------------------------------- */
.audiences { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.audience {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 34px 32px 30px; text-decoration: none; color: inherit;
  transition: .2s ease; display: block; overflow: hidden;
}
.audience::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--teal); opacity: .85;
}
.audience:nth-child(2)::after { background: var(--gold-bright); }
.audience:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--teal-line); color: inherit; }
.audience .ic { color: var(--teal); margin-bottom: 14px; }
.audience:nth-child(2) .ic { color: var(--gold); }
.audience h3 { font-size: 1.42rem; margin-bottom: 10px; }
.audience p { color: var(--ink-2); font-size: .99rem; }
.audience .more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-weight: 700; font-size: .9rem; color: var(--teal-dark);
}
.audience:hover .more svg { transform: translateX(4px); }
.audience .more svg { transition: .18s ease; }

/* ---------- service cards --------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 26px; display: flex; flex-direction: column; transition: .18s ease;
}
.card:hover { box-shadow: var(--shadow); border-color: var(--teal-line); }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--teal-wash); color: var(--teal); margin-bottom: 16px;
}
.card h3 { font-size: 1.16rem; margin-bottom: 9px; }
.card p { color: var(--ink-2); font-size: .94rem; line-height: 1.6; }
.card-price {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.card-price .amount { font-family: var(--font-display); font-size: 1.42rem; font-weight: 600; color: var(--teal-dark); }
.card-price .unit { font-size: .8rem; color: var(--muted); }
.card-price .free { font-weight: 700; color: var(--teal); font-size: .95rem; }

/* ---------- long-form service list ------------------------------ */
.service-block {
  display: grid; grid-template-columns: 62px 1fr 220px; gap: 26px;
  padding: 34px 0; border-bottom: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.service-block:last-child { border-bottom: 0; }
.service-block .blk-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--teal-wash); color: var(--teal);
}
.service-block h3 { font-size: 1.4rem; }
.service-block .summary { font-size: 1.03rem; color: var(--ink-2); margin-bottom: 14px; }
.service-block .body { font-size: .96rem; color: var(--ink-2); }
.price-tag {
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; text-align: center; align-self: start;
}
.price-tag .from { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.price-tag .amount { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--teal-dark); display: block; margin: 4px 0 6px; }
.price-tag .unit { font-size: .82rem; color: var(--muted); line-height: 1.4; display: block; }

/* ---------- packages -------------------------------------------- */
.packages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.pkg {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 26px; display: flex; flex-direction: column; height: 100%; position: relative;
}
.pkg.featured { border-color: var(--teal); box-shadow: var(--shadow); }
.pkg-badge {
  position: absolute; top: -12px; left: 26px;
  background: var(--gold-bright); color: #2a1d05; font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px;
}
.pkg h3 { font-size: 1.32rem; margin-bottom: 6px; }
.pkg .sub { font-size: .92rem; color: var(--muted); min-height: 3em; }
.pkg .price {
  font-family: var(--font-display); font-size: 2.3rem; font-weight: 600; color: var(--teal-dark);
  margin: 18px 0 2px; line-height: 1;
}
.pkg .price-note { font-size: .82rem; color: var(--muted); margin-bottom: 20px; }
.pkg ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.pkg li { display: flex; gap: 10px; font-size: .91rem; line-height: 1.5; color: var(--ink-2); }
.pkg li svg { color: var(--teal); flex: none; margin-top: 3px; }
.pkg .btn { margin-top: auto; }

/* ---------- steps ----------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: s; }
.step { position: relative; padding-top: 8px; }
.step::before {
  counter-increment: s; content: counter(s);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal); color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: 16px;
}
.section-teal .step::before { background: var(--gold-bright); color: #2a1d05; }
.step h3 { font-size: 1.08rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; margin-bottom: 7px; }
.step p { font-size: .92rem; color: var(--muted); }
.section-teal .step p { color: #a7cdc5; }

/* ---------- stats ----------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.stat { text-align: center; padding: 28px 20px; border: 1px solid var(--teal-line); border-radius: var(--r);
  background: var(--surface); }
.stat b { display: block; font-family: var(--font-display); font-size: 2.35rem; font-weight: 600; color: var(--teal-dark); line-height: 1; }
.stat span { display: block; margin-top: 10px; font-size: .9rem; color: var(--muted); }

/* ---------- hospital rows --------------------------------------- */
.hosp {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 28px; margin-bottom: 16px;
}
.hosp-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-bottom: 10px; }
.hosp-top h3 { margin: 0; font-size: 1.26rem; }
.tag {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--teal-wash); color: var(--teal-dark);
}
.tag-private { background: var(--gold-wash); color: #7a5410; }
.tag-coming { background: #ece7f6; color: #4c3f75; }
.hosp .klia { margin-left: auto; font-size: .84rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.hosp .klia b { color: var(--teal-dark); }
.hosp .spec { font-size: .9rem; color: var(--muted); margin-bottom: 10px; }
.hosp .spec b { color: var(--ink-2); font-weight: 700; }
.hosp .note { font-size: .96rem; color: var(--ink-2); }
.hosp-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-soft); font-size: .87rem; }
.hosp-meta span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }

/* ---------- FAQ ------------------------------------------------- */
.faq-list { max-width: 46rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-weight: 600; font-size: 1.05rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 8px; top: 27px; width: 9px; height: 9px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg); transition: .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); top: 31px; }
.faq-item .answer { padding: 0 30px 22px 0; color: var(--ink-2); font-size: .98rem; }

/* ---------- quote / testimonial --------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.quote .stars { color: var(--gold-bright); display: flex; gap: 2px; margin-bottom: 14px; }
.quote blockquote { margin: 0 0 16px; font-size: 1rem; color: var(--ink-2); font-style: italic; }
.quote cite { font-style: normal; font-weight: 700; font-size: .92rem; }
.quote cite span { display: block; font-weight: 500; color: var(--muted); font-size: .85rem; }

/* ---------- page header ----------------------------------------- */
.page-head {
  position: relative;
  background: linear-gradient(180deg, var(--teal-wash), var(--cream));
  border-bottom: 1px solid var(--line); padding: 60px 0 54px;
}
.page-head .inner { max-width: 44rem; position: relative; z-index: 2; }
.page-head h1 { margin-bottom: 16px; }
.page-head .lede { font-size: 1.13rem; }

/* Without a photo, the header still carries the Minangkabau roofline of
   Negeri Sembilan as a faint watermark, so it never looks unfinished. */
.page-head::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M4 14C22 38 36 44 60 44C84 44 98 38 116 14' fill='none' stroke='%230d6466' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 120px 60px;
  mask-image: linear-gradient(105deg, transparent 42%, #000 100%);
  -webkit-mask-image: linear-gradient(105deg, transparent 42%, #000 100%);
}

/* With a photo, the same header becomes a banner. */
.page-head.has-banner { padding: 84px 0 74px; border-bottom: 0; }
.page-head.has-banner::after { display: none; }
.page-head.has-banner h1,
.page-head.has-banner .lede,
.page-head.has-banner .lede p { color: #fff; }
.page-head.has-banner .eyebrow { color: var(--gold-bright); }
.page-head.has-banner .eyebrow::before { background: var(--gold-bright); }
.banner-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.banner-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(6,54,55,.93) 0%, rgba(6,54,55,.78) 48%, rgba(6,54,55,.42) 100%);
}

/* ---------- the team -------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.member {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: .18s ease;
}
.member:hover { box-shadow: var(--shadow); border-color: var(--teal-line); }
.member-photo {
  aspect-ratio: 4 / 5; width: 100%; object-fit: cover; display: block;
  background: var(--cream-2);
}
.member-blank {
  aspect-ratio: 4 / 5; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--teal-wash), var(--cream-2));
}
.member-blank span {
  font-family: var(--font-display); font-size: 2.7rem; font-weight: 600;
  color: var(--teal); opacity: .55; letter-spacing: .02em;
}
.member-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.member h3 { font-size: 1.28rem; margin-bottom: 2px; }
.member .role {
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.member .bio { font-size: .95rem; color: var(--ink-2); }
.member .langs {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: .85rem; color: var(--muted); display: flex; gap: 8px; align-items: flex-start;
}
.member .langs svg { color: var(--teal); flex: none; margin-top: 2px; }

/* the small row of faces on the home page */
.team-strip { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.face { width: 116px; text-align: center; }
.face img, .face .face-blank {
  width: 116px; height: 116px; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid var(--surface); box-shadow: var(--shadow-sm);
}
.face .face-blank {
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--teal-wash), var(--cream-2));
  font-family: var(--font-display); font-size: 1.9rem; color: var(--teal); opacity: .8;
}
.face b { display: block; margin-top: 11px; font-size: .92rem; }
.face span { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; }

/* ---------- hospital photo -------------------------------------- */
.hosp { display: grid; grid-template-columns: 1fr; gap: 0; }
.hosp.with-photo { grid-template-columns: 230px 1fr; gap: 26px; align-items: start; }
.hosp-photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r);
  background: var(--cream-2); display: block;
}

/* ---------- full-width photo band ------------------------------- */
.photo-band { position: relative; min-height: 340px; display: grid; align-items: center; overflow: hidden; }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band .veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,54,55,.9) 0%, rgba(6,54,55,.6) 55%, rgba(6,54,55,.25) 100%);
}
.photo-band .wrap { position: relative; z-index: 2; padding-top: 54px; padding-bottom: 54px; }
.photo-band blockquote {
  margin: 0; max-width: 30em; color: #fff;
  font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  font-weight: 500; line-height: 1.32;
}
.photo-band cite { display: block; margin-top: 16px; font-style: normal; color: #9dd3c7; font-size: .92rem; }

/* ---------- prose ----------------------------------------------- */
.prose { max-width: 42rem; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .5em; }

.callout {
  background: var(--gold-wash); border: 1px solid #edd9ad; border-left: 4px solid var(--gold-bright);
  border-radius: var(--r-sm); padding: 20px 24px; margin: 26px 0; font-size: .96rem; color: #5c410b;
}
.callout strong { color: #3f2c05; }

.reg-line { font-size: .88rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }

.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.tick-list li { display: flex; gap: 12px; font-size: 1rem; color: var(--ink-2); }
.tick-list li svg { color: var(--teal); flex: none; margin-top: 4px; }

/* ---------- forms ----------------------------------------------- */
.form-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px; box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 19px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 7px; color: var(--ink); }
.field label .opt { font-weight: 500; color: var(--muted); font-size: .85rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; font: 400 1rem/1.4 var(--font-body); color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); background: var(--surface);
  box-shadow: 0 0 0 3px var(--teal-wash);
}
.field textarea { min-height: 130px; resize: vertical; }
.field.err input, .field.err select, .field.err textarea { border-color: #c2410c; background: #fff5f1; }
.field .msg { color: #9a3412; font-size: .85rem; margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: .85rem; color: var(--muted); margin-top: 18px; }

.alert { border-radius: var(--r); padding: 18px 22px; margin-bottom: 24px; font-size: .96rem; }
.alert-ok { background: var(--teal-wash); border: 1px solid var(--teal-line); color: #094a4c; }
.alert-bad { background: #fff1ec; border: 1px solid #f4c4ae; color: #9a3412; }

.success-card {
  background: var(--surface); border: 1px solid var(--teal-line); border-top: 5px solid var(--teal);
  border-radius: var(--r-lg); padding: 40px; text-align: center; box-shadow: var(--shadow);
}
.success-card .big-ref {
  display: inline-block; margin: 18px 0 8px; font-family: var(--font-display); font-size: 1.7rem;
  font-weight: 600; letter-spacing: .06em; color: var(--teal-dark);
  background: var(--teal-wash); padding: 10px 24px; border-radius: var(--r);
}

.contact-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: start; }
.contact-side { display: grid; gap: 16px; }
.contact-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.contact-box h3 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.contact-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: .94rem; }
.contact-box li { display: flex; gap: 11px; align-items: flex-start; }
.contact-box li svg { color: var(--teal); flex: none; margin-top: 3px; }

/* ---------- CTA strip ------------------------------------------- */
.cta-strip { background: var(--teal-deep); color: #dcece8; }
.cta-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding: 46px 24px;
}
.cta-words { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  font-weight: 500; color: #fff; margin: 0; max-width: 28em; line-height: 1.3; }
.cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }

/* ---------- footer ---------------------------------------------- */
.site-foot { background: #0a1f20; color: #9db8b1; font-size: .93rem; padding: 56px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 44px; }
.site-foot .foot-logo { width: 150px; height: auto; display: block; margin-bottom: 4px; }
.foot-tagline { margin: 14px 0 0; color: #f0c86a; font-weight: 600; font-size: .95rem; }
.foot-blurb { margin: 16px 0 6px; max-width: 28em; }
.foot-reg, .foot-social { font-size: .85rem; color: #7d9a93; margin: 4px 0 0; }
.site-foot h2 {
  font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #6fc2b2; margin-bottom: 16px;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-foot a { color: #c3d8d2; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.foot-contact li { display: flex; gap: 10px; align-items: center; }
.foot-contact svg { color: #6fc2b2; }
.foot-hours { margin-top: 18px; font-size: .87rem; color: #7d9a93; line-height: 1.8; }
.foot-hours strong { color: #c3d8d2; font-weight: 600; }
.foot-legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.disclaimer { display: flex; gap: 12px; font-size: .83rem; color: #7d9a93; max-width: 60em; line-height: 1.6; }
.disclaimer svg { color: #6fc2b2; flex: none; margin-top: 3px; }
.foot-fine { font-size: .83rem; color: #6b8781; margin: 16px 0 0; }

/* ---------- floating WhatsApp ----------------------------------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #1fa855; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: .18s ease;
}
.wa-float:hover { background: #178f46; color: #fff; transform: scale(1.06); }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; padding: 56px 0 64px; }
  .plan-card { transform: none; max-width: 520px; }
  .plan-split-grid { grid-template-columns: 1fr; gap: 32px; }
  .plan-split-grid .plan-card { transform: none; }
  .hero-logo-img { max-width: 340px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .packages { grid-template-columns: repeat(2, 1fr); }
  .promises { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .service-block { grid-template-columns: 52px 1fr; }
  .service-block .price-tag { grid-column: 2; max-width: 260px; }
}

/* Below 1000px the menu row would not fit in Bahasa Malaysia alongside
   the enquiry button, so the menu moves behind the burger. */
@media (max-width: 1000px) {
  .site-head {
    position: sticky; top: 0;
    background: rgba(251, 247, 240, .95);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  /* The menu row has no bar of its own here, only the drawer. It must not
     carry a backdrop-filter: that would trap the fixed drawer inside it. */
  .nav-bar { position: static; background: none; backdrop-filter: none; border: 0; }
  .nav-bar-inner { min-height: 0; padding: 0; }
  .nav {
    position: fixed; inset: 74px 0 auto; z-index: 60; background: var(--cream);
    border-bottom: 1px solid var(--line); flex-direction: column; gap: 2px;
    padding: 14px 24px 24px; margin: 0; display: none; box-shadow: var(--shadow);
    max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 14px; font-size: 1rem; }
  .nav-only-mobile { display: block; }
  .nav a.nav-call { display: flex; }
  .burger { display: block; }
  .head-cta { display: none; }
  .head-inner { gap: 12px; }
}

/* Phones. The top row has to fit 360px — the width of most Android
   phones — with the logo, all three languages and the menu button.
   Measured: about 337px with these sizes. */
@media (max-width: 640px) {
  .wrap.head-inner { padding: 0 12px; gap: 6px; }
  .head-actions { gap: 6px; }
  .logo { gap: 8px; }
  .logo-badge { width: 34px; height: 34px; }
  .head-inner .logo-words { font-size: .96rem; }
  .head-inner .logo-words em { display: none; }
  .lang-switch { padding: 2px; }
  .lang-switch a { padding: 6px 6px; font-size: .7rem; letter-spacing: .01em; }
  .burger { width: 38px; }
  .head-phone { margin-right: 0; width: 40px; height: 40px; justify-content: center;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .head-phone span { display: none; }
}
/* Below 480px there is no room for the call button in the top row; it
   moves into the menu instead, and the WhatsApp button stays on screen. */
@media (max-width: 480px) {
  .head-phone { display: none; }
}
@media (max-width: 350px) {
  .logo-badge { display: none; }
}

@media (max-width: 720px) {
  .hero-logo-img { max-width: 270px; }
  body { font-size: 16px; }
  .section { padding: 54px 0; }
  .wrap { padding: 0 18px; }
  .audiences { grid-template-columns: 1fr; }
  .cards, .packages, .quotes, .stats, .promises, .steps, .team-grid { grid-template-columns: 1fr; }
  .hosp.with-photo { grid-template-columns: 1fr; gap: 16px; }
  .page-head.has-banner { padding: 56px 0 48px; }
  .lang-switch a { padding: 6px 9px; font-size: .74rem; }
  .field-row { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-card { padding: 24px 20px; }
  .service-block { grid-template-columns: 1fr; gap: 14px; }
  .service-block .price-tag { grid-column: 1; max-width: none; }
  .hosp .klia { margin-left: 0; width: 100%; }
  .logo-words { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-head, .nav-bar, .cta-strip, .wa-float, .burger, .lang-switch { display: none; }
  body { background: #fff; }
}