/* ==========================================================================
   Shirley Sourcing — site stylesheet
   Simplified system: navy/ivory, one accent at a time, flat surfaces,
   editorial rows over cards, photographs at natural aspect ratios.
   1. Tokens        4. Header / menu     7. Forms & contact
   2. Base          5. Hero & sections   8. Footer & mobile bar
   3. Type          6. Rows, stages,     9. Breakpoints
                       quotes, markets
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --ink: #0f1d2d;
  --ink-2: #16293c;
  --ivory: #fbf8f3;
  --ivory-2: #f3ede3;
  --paper: #ffffff;
  --jade: #1e6a57;
  --jade-2: #17513f;
  --gold: #c08a2e;
  --gold-2: #d9a441;
  --gold-btn: #8f6a20;   /* filled buttons: deep bronze — cream text passes AA (4.68) */
  --gold-btn-2: #806020;
  --gold-text: #8a5c10;   /* gold for TEXT on light grounds — AA at body sizes */

  --text: #1b2a38;
  --muted: #566b7d;
  --muted-dark: #a9bccb;
  --hero-lead: #cddae5;
  --line: rgb(15 29 45 / 14%);
  --line-strong: rgb(15 29 45 / 24%);
  --line-dark: rgb(251 248 243 / 16%);
  --red: #a8352b;

  --wa: #25d366;
  --wa-text: #04301c;
  --wechat: #07c160;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.4rem, 1.5rem + 3.8vw, 4.3rem);
  --fs-h1: clamp(2.05rem, 1.45rem + 2.5vw, 3.4rem);
  --fs-h2: clamp(1.55rem, 1.25rem + 1.3vw, 2.2rem);
  --fs-h3: clamp(1.1rem, 1.03rem + .35vw, 1.3rem);
  --fs-lead: clamp(1.04rem, .98rem + .3vw, 1.2rem);
  --fs-body: 1.0625rem;
  --fs-sm: .935rem;
  --fs-xs: .8rem;

  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 6vw, 5.5rem);   /* ~25% tighter than before */
  --r-sm: 6px;
  --r: 8px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg, video { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.12; letter-spacing: -.016em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:target { scroll-margin-top: 6rem; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--ink); color: var(--ivory);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none; font-size: var(--fs-sm); font-weight: 500;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }
main:focus { outline: none; }

/* 3. Type ------------------------------------------------------------------ */
.eyebrow {
  margin: 0 0 .8rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jade);
}
.on-dark .eyebrow { color: var(--gold-2); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--ivory-2); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }

.section-head { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__title { font-size: var(--fs-h2); }
.section-head__lead { margin-top: .9rem; font-size: var(--fs-lead); color: var(--muted); }
.on-dark .section-head__lead { color: var(--muted-dark); }

.prose { max-width: 66ch; }
.prose h2 { font-size: var(--fs-h2); margin-top: 2.2rem; margin-bottom: .6rem; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.7rem; margin-bottom: .45rem; }
.prose > :first-child { margin-top: 0; }
.prose .lead { font-size: var(--fs-lead); color: var(--muted); }
.prose a { color: var(--jade); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--jade-2); }

.link-out {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--ink); font-weight: 550; font-size: var(--fs-sm);
  text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.link-out:hover { color: var(--jade-2); border-bottom-color: var(--jade-2); }
.on-dark .link-out { color: var(--ivory); }

/* 4. Header / menu --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(251 248 243 / 92%);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 70px; }

.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); flex: 0 1 auto; min-width: 0; }
.brand__mark { width: 32px; height: 32px; flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__name {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* never paints under the header icons */
}
.brand__tag { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; white-space: nowrap; }
.brand--light { color: var(--ivory); }
.brand--light .brand__tag { color: var(--muted-dark); }

.site-nav { margin-inline: auto; }
.site-nav ul { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.3rem); }
.site-nav__link {
  display: inline-block; padding: .45rem .15rem; text-decoration: none;
  font-size: .94rem; font-weight: 500; color: var(--text); position: relative;
  white-space: nowrap;
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .08rem; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.site-nav__link:hover::after, .site-nav__link.is-current::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex: 0 0 auto; }
/* channel buttons are logo-only everywhere; aria-labels carry the names */
.site-header__wa span, .site-header__wechat span { display: none; }
.site-header__wa, .site-header__wechat {
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
}
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--ink); cursor: pointer;
}
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline-flex; }

.site-menu { border-top: 1px solid var(--line); background: var(--ivory); }
.site-menu[hidden] { display: none; }
.site-menu__inner { padding-block: .9rem 1.3rem; }
.site-menu__inner ul { display: grid; }
.site-menu__link {
  display: block; padding: .72rem .25rem; text-decoration: none;
  font-size: 1.05rem; font-weight: 500; border-bottom: 1px solid var(--line);
}
.site-menu__link.is-current { color: var(--jade); }
.site-menu__reach { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; }
.site-menu__number {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 650; font-size: 1.05rem; color: var(--ink); text-decoration: none;
  letter-spacing: .01em; margin-right: auto;
  font-variant-numeric: tabular-nums;
}
.site-menu__number-icon { color: #128c7e; flex: 0 0 auto; }
.site-menu__number:hover { color: var(--jade); }

/* 5. Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .9rem 1.5rem; border-radius: var(--r); border: 1px solid transparent;
  font-size: .96rem; font-weight: 550; line-height: 1.2; text-decoration: none;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
/* the WhatsApp glyph keeps its brand green inside otherwise-neutral buttons */
.btn .icon--wa-glyph { color: #25d366; }
.btn--light .icon--wa-glyph, .btn--gold .icon--wa-glyph { color: #128c7e; }
.btn__icon { flex: 0 0 auto; }
.btn--sm { padding: .55rem 1rem; font-size: .88rem; }
.btn--block { width: 100%; }

.btn--primary { background: var(--ink); color: var(--ivory); }
.btn--primary:hover { background: var(--ink-2); }
.btn--whatsapp { background: var(--wa); color: var(--wa-text); }
.btn--whatsapp:hover { background: #1ec15b; }
.site-header__wa.btn--whatsapp, .site-header__wechat.btn--wechat {
  background: transparent; border-color: var(--line-strong); border-radius: 50%;
}
.site-header__wa.btn--whatsapp { color: #128c7e; }
.site-header__wechat.btn--wechat { color: var(--wechat); }
.site-header__wa.btn--whatsapp:hover, .site-header__wechat.btn--wechat:hover {
  background: rgb(15 29 45 / 4%); border-color: var(--ink);
}
/* premium equivalents: navy on light surfaces, ivory/gold on dark ones */
.btn--light { background: var(--ivory); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--gold { background: var(--gold-btn); color: #fff8ec; }
.btn--gold:hover { background: var(--gold-btn-2); }
.btn--gold .icon--wa-glyph { color: #6fe39a; }
.btn--wechat { background: var(--wechat); color: var(--wa-text); }
.btn--wechat:hover { background: #06ad56; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-light { background: transparent; color: var(--ivory); border-color: var(--line-dark); }
.btn--ghost-light:hover { border-color: var(--gold-2); color: var(--gold-2); }

/* 6. Hero & page hero ------------------------------------------------------ */
.hero { background: var(--ink); color: var(--ivory); }
.hero__inner {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  padding-block: clamp(2.25rem, 5vw, 4.5rem) clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}
.hero__title { font-size: var(--fs-display); letter-spacing: -.022em; line-height: 1.05; }
.hero__lead { margin-top: 1.1rem; max-width: 52ch; font-size: var(--fs-lead); color: var(--hero-lead); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.hero__meta {
  margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line-dark);
  font-size: var(--fs-sm); color: var(--muted-dark);
}
.hero__media .photo { margin: 0; }
.hero__media img { border-radius: var(--r); }
.hero__media .photo__caption { color: var(--muted-dark); }

.page-hero { background: var(--ink); color: var(--ivory); }
.page-hero__inner { padding-block: clamp(2rem, 4.5vw, 3.4rem); }
.page-hero__title { font-size: var(--fs-h1); margin-top: .25rem; max-width: 24ch; }
.page-hero__lead { margin-top: 1rem; font-size: var(--fs-lead); color: var(--hero-lead); max-width: 60ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* 6b. Homepage: hero details, authority strip, flagship, phases, guides ---- */
.hero__contact-line { margin-top: 1.1rem; font-size: var(--fs-sm); color: var(--muted-dark); letter-spacing: .02em; }
.hero__media .photo { max-width: 460px; margin-left: auto; }
.hero__media img { border: 1px solid rgb(251 248 243 / 14%); }

.authority { border-bottom: 1px solid var(--line); background: var(--ivory); }
.authority__inner {
  display: flex; flex-wrap: wrap; gap: .55rem 1.2rem;
  padding-block: 1.1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.authority__inner span { display: inline-flex; align-items: baseline; white-space: nowrap; }
@media (max-width: 560px) {
  /* inline-flex cannot wrap its own text; plain inline lets long facts break lines */
  .authority__inner span { display: inline; white-space: normal; }
}
.authority__inner span + span::before {
  content: "\00B7"; color: var(--gold); font-size: 1.3em; line-height: 1;
  margin-right: 1.2rem;
}

.flagship__strip { display: grid; gap: clamp(.9rem, 2vw, 1.4rem); }
.flagship__strip img { aspect-ratio: 4 / 3; object-fit: cover; }
.flagship__foot {
  display: grid; gap: 1.1rem; margin-top: clamp(1.4rem, 3vw, 2rem);
  align-items: center; justify-items: start;
}
.flagship__result { margin: 0; max-width: 62ch; color: var(--muted); }

.phase-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.phase { border-top: 2px solid var(--gold); padding-top: 1rem; }
.phase__num {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 600;
  color: var(--gold); line-height: 1; display: block; margin-bottom: .5rem;
}
.phase__title { font-size: var(--fs-h3); margin-bottom: .45rem; }
.phase__body { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

.serif-list { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin-top: 1rem; }

.feature-guides { display: grid; border-top: 1px solid var(--line); }
.feature-guide {
  display: block; text-decoration: none; color: var(--ink);
  padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
  border-bottom: 1px solid var(--line);
}
.feature-guide:hover .feature-guide__title { color: var(--jade-2); }
.feature-guide .eyebrow { margin-bottom: .35rem; font-size: .72rem; }
.feature-guide__title { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem); transition: color .2s var(--ease); }
.feature-guide__meta { margin: .5rem 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* 7. Layout blocks --------------------------------------------------------- */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.split--center { align-items: center; }
.split--reverse .split__media { order: -1; }

.photo { margin: 0; }
/* a definite width plus the per-photo aspect-ratio rules (generated in
   build.mjs from images.json) reserve the box before any image decodes */
.pic { display: block; }
.pic img { width: 100%; height: auto; }
.photo img { border-radius: var(--r); }
.photo__caption { margin-top: .6rem; font-size: var(--fs-xs); color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.actions--mt { margin-top: 1.4rem; }

/* editorial rows: heading left, text right */
.rows { display: grid; border-top: 1px solid var(--line); }
.row {
  display: grid; gap: .35rem 2.5rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  border-bottom: 1px solid var(--line);
}
.row__title { font-size: var(--fs-h3); }
.row__body p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.row__link { margin-top: .5rem !important; }

/* the numbered process — services page only */
.stages { display: grid; counter-reset: stage; border-top: 1px solid var(--line); max-width: 76ch; }
.stage { padding-block: clamp(1.2rem, 2.4vw, 1.7rem); border-bottom: 1px solid var(--line); }
.stage__head { display: flex; align-items: baseline; gap: .9rem; }
.stage__num {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  color: var(--gold-text); font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.stage__title { font-size: var(--fs-h3); }
.stage__body { margin: .5rem 0 0 2.55rem; color: var(--muted); font-size: var(--fs-sm); }
.stage__deliverable { margin: .45rem 0 0 2.55rem; font-size: var(--fs-sm); }
.stage__deliverable strong { color: var(--jade); font-weight: 600; }

/* plain lists */
.plainlist { display: grid; gap: .45rem; list-style: disc; padding-left: 1.2rem; }
.plainlist li { font-size: var(--fs-sm); }
.plainlist li::marker { color: var(--gold-text); }
.plainlist--tight { gap: .3rem; }

/* responsibility columns */
.scope { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.scope__col h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.scope__col--partner h3 { color: var(--jade); }

/* markets table */
.market-group { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.market-group:first-of-type { margin-top: 0; }
.market-group__title { font-size: var(--fs-h3); margin-bottom: .7rem; }
.markets { border-top: 1px solid var(--line); }
.market {
  display: grid; grid-template-columns: 1fr; gap: .15rem 1.5rem;
  padding-block: .8rem; border-bottom: 1px solid var(--line);
}
.market__name { font-weight: 600; font-size: var(--fs-sm); }
.market__focus { color: var(--muted); font-size: var(--fs-sm); }

/* quotes — the one card grid on the projects page */
.quote-grid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.quote {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0;
  display: flex; flex-direction: column; gap: 1rem;
}
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: var(--font-display); font-size: 1.05rem;
  line-height: 1.6; color: var(--text);
}
.quote blockquote p::before { content: "“"; color: var(--gold); }
.quote blockquote p::after { content: "”"; color: var(--gold); }
.quote figcaption { margin-top: auto; display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.quote__name { font-weight: 600; font-size: var(--fs-sm); }
.quote__detail { font-size: var(--fs-xs); color: var(--muted); }
.quote-note { margin-top: 1.2rem; font-size: var(--fs-xs); color: var(--muted); }

.quote-lead .quote { max-width: 900px; margin-inline: auto; }
.quote-lead .quote blockquote p { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
.quote-grid.quote-grid--2 { max-width: 900px; margin-inline: auto; }
@media (min-width: 900px) { .quote-grid.quote-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* featured testimonial — one big editorial quote */
.quote-feature { margin: 0; max-width: 56ch; }
.quote-feature blockquote { margin: 0; }
.quote-feature blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.4; letter-spacing: -.01em; color: var(--text);
}
.quote-feature blockquote p::before { content: "\201C"; color: var(--gold); margin-right: .1em; }
.quote-feature blockquote p::after { content: "\201D"; color: var(--gold); margin-left: .05em; }
.quote-feature figcaption { margin-top: 1.2rem; display: flex; gap: .7rem; align-items: baseline; }
.quote-feature .quote__name { font-weight: 650; }

/* case studies */
.case { display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); }
.case__facts { display: grid; gap: .2rem; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1rem; }
.case__facts strong { color: var(--text); font-weight: 600; }
.case h3 { font-size: var(--fs-h3); margin: 1.3rem 0 .5rem; }

/* case-study gallery (clinic project) */
.case-gallery { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--line); }
.case-gallery--bare { margin-top: 0; padding-top: 0; border-top: 0; }
.case-gallery__title { font-size: var(--fs-h2); }
.case-gallery__intro { margin-top: .8rem; color: var(--muted); max-width: 62ch; }
.case-gallery__stage { margin-top: clamp(1.6rem, 3.2vw, 2.5rem); }
.case-gallery__label {
  display: flex; align-items: baseline; gap: .7rem; margin: 0 0 .9rem;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3);
}
.case-gallery__grid { display: grid; gap: clamp(.9rem, 2vw, 1.4rem); }
.case-gallery__grid--feature { max-width: 820px; }
.case-gallery__grid--feature img { border: 1px solid var(--line); background: var(--paper); }
@media (min-width: 720px) {
  .case-gallery__grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-gallery__grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-gallery__grid--pair-lead { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

/* breadcrumbs */
.crumbs { padding-block: 1rem .25rem; font-size: var(--fs-xs); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--jade); }
.crumbs [aria-current] { color: var(--text); }

/* CTA band */
.cta-band { background: var(--ink); color: var(--ivory); }
.cta-band__inner {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  grid-template-columns: 1fr;
}
.cta-band__title { font-size: var(--fs-h2); }
.cta-band__body { margin-top: .7rem; color: var(--hero-lead); max-width: 52ch; }
.cta-band__actions { display: grid; gap: .8rem; justify-items: start; }
.cta-band__alt { margin: 0; font-size: var(--fs-sm); color: var(--muted-dark); }
.cta-band__alt a { color: var(--gold-2); }

/* 8. Forms & contact ------------------------------------------------------- */
.form-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2.25rem); max-width: 720px;
}
.form-grid { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field__label { font-size: var(--fs-sm); font-weight: 550; }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.field__req { color: var(--red); }
.field input, .field textarea {
  width: 100%; padding: .75rem .9rem; font: inherit; font-size: var(--fs-sm);
  color: var(--text); background: var(--ivory);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; background: var(--paper);
  border-color: var(--jade); box-shadow: 0 0 0 3px rgb(30 106 87 / 15%);
}
.field textarea { resize: vertical; min-height: 90px; }
.form__foot { margin-top: 1.4rem; display: grid; gap: .8rem; }
.form__note { font-size: var(--fs-xs); color: var(--muted); }
.form__error { color: var(--red); font-size: var(--fs-sm); font-weight: 500; }
.noscript-contact {
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--r-sm); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
  font-size: var(--fs-sm);
}
[hidden] { display: none !important; }

.channel-list { display: grid; gap: .9rem; max-width: 560px; }
.channel {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem;
  padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
}
.channel__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
}
.channel__icon--wa { background: var(--wa); color: var(--wa-text); }
.channel__icon--wechat { background: var(--wechat); color: var(--wa-text); }
.channel__icon--mail { background: var(--ink); color: var(--ivory); }
.channel__text { display: grid; line-height: 1.4; }
.channel__title { font-weight: 600; font-size: var(--fs-sm); font-family: var(--font-sans); }
.channel__value { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.channel .btn { margin-left: auto; }

.qr-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.qr-card {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  padding: clamp(1.1rem, 2.2vw, 1.5rem); text-align: center;
}
.qr-card figure { margin: 0; display: grid; gap: .7rem; justify-items: center; }
.qr-card img { width: min(216px, 100%); height: auto; aspect-ratio: 1 / 1; border-radius: 6px; }
.qr-card figcaption { display: grid; gap: .15rem; }
.qr-card__title { font-weight: 600; font-size: 1rem; display: inline-flex; align-items: center; gap: .45rem; justify-content: center; }
.qr-card__title .icon--wa { color: #128c7e; }
.qr-card__title .icon--wechat { color: var(--wechat); }
.qr-card__meta { font-size: var(--fs-sm); color: var(--muted); }
.qr-card__action { margin-top: .9rem; }

/* 9. Footer & mobile bar --------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--muted-dark); padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.site-footer__grid {
  display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.site-footer__blurb { margin-top: 1rem; font-size: var(--fs-sm); max-width: 44ch; }
.site-footer__line { margin: .35rem 0 0; font-size: var(--fs-sm); }
.site-footer__heading {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ivory); margin-bottom: .9rem;
}
.site-footer__col ul { display: grid; gap: .5rem; font-size: var(--fs-sm); }
.site-footer__col a { text-decoration: none; }
.site-footer__col a:hover { color: var(--gold-2); }
/* icon-only quick actions: identical size, spacing and focus behaviour —
   the brand glyph and its official colour are the only differences */
.icon-row, .site-footer__col ul.icon-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.icon-row--social { margin-top: .1rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid transparent; text-decoration: none;
  transition: filter .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.icon-btn:hover { filter: brightness(1.08); }
.icon-btn--wa { background: var(--wa); color: #fff; }
.icon-btn--wechat { background: var(--wechat); color: #fff; }
.icon-btn--mail { background: var(--ivory); color: var(--ink); }
.icon-btn--plain { border-color: var(--line-dark); color: var(--muted-dark); }
.icon-btn--plain:hover { color: var(--gold-2); border-color: var(--gold-2); filter: none; }
.site-footer__heading--follow { margin-top: 1.4rem; }
.site-footer__base {
  border-top: 1px solid var(--line-dark); padding-block: 1.2rem 6.25rem;
  font-size: var(--fs-xs);
}
.site-footer__base p { margin: 0; }

.wa-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: .45rem;
  padding: .45rem .6rem calc(.45rem + env(safe-area-inset-bottom));
  background: rgb(251 248 243 / 96%); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.wa-bar__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem .6rem; border-radius: var(--r); text-decoration: none;
  font-weight: 570; font-size: .9rem;
}
.wa-bar__btn--wa { background: var(--ink); color: var(--ivory); }
.wa-bar__btn--wa .icon { color: #25d366; }
.wa-bar__btn--form { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.wa-bar--waiting { transform: translateY(115%); }
.wa-bar { transition: transform .25s var(--ease); }

/* no-JavaScript fallbacks: the boot script removes .no-js before first paint.
   Without scripting the menu toggle is dead, so the menu links render open, and
   the WhatsApp form (which needs scripting) gives way to the noscript block. */
.no-js .menu-toggle { display: none !important; }
.no-js [data-wa-form] { display: none; }
@media (max-width: 1080px) {
  .no-js .site-menu[hidden] { display: block !important; }
}

/* no-js / script-failure fallbacks (html.no-js is removed by the site script) */
.js-fallback { display: none; }
.no-js .js-fallback { display: block; }
.no-js [data-wa-form] { display: none; }
@media (max-width: 1080px) {
  .no-js .site-menu[hidden] { display: block !important; }
  .no-js .menu-toggle { display: none !important; }
}

/* guides hub — editorial index */
.guide-featured-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.guide-entry { display: block; text-decoration: none; color: var(--ink); }
.guide-entry__media { margin-bottom: .9rem; }
.guide-entry__media img { border-radius: var(--r); aspect-ratio: 3 / 2; object-fit: cover; }
.guide-entry .eyebrow { margin-bottom: .3rem; font-size: .72rem; }
.guide-entry__title { font-size: clamp(1.15rem, 1.02rem + .6vw, 1.5rem); line-height: 1.25; transition: color .2s var(--ease); }
.guide-entry:hover .guide-entry__title { color: var(--jade-2); }
.guide-entry__summary { color: var(--muted); font-size: var(--fs-sm); margin: .45rem 0 0; }
.guide-entry__meta { margin: .55rem 0 0; font-size: var(--fs-xs); color: var(--muted); letter-spacing: .02em; }
.guide-index { display: grid; }
.guide-index .guide-entry { padding-block: clamp(1rem, 2vw, 1.4rem); border-bottom: 1px solid var(--line); }
.guide-index .guide-entry:last-child { border-bottom: 0; }

/* guide articles */
.page-hero__title--article { max-width: 30ch; }
.article-meta { margin-top: 1rem; font-size: var(--fs-sm); color: var(--muted-dark); }
.article .wrap { max-width: 860px; }
.article__media { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.article__media .photo--portrait { max-width: 540px; }
.article__prose { max-width: none; }
.article__prose h2 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.8rem); }
.article__foot { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line); }
.icon--flip { transform: scaleX(-1); }

/* toast — confirmation for the WeChat copy action */
.toast {
  position: fixed; left: 50%; bottom: calc(5.4rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px); z-index: 120;
  max-width: min(92vw, 420px);
  background: var(--ink); color: var(--ivory);
  font-size: var(--fs-sm); line-height: 1.45; text-align: center;
  padding: .7rem 1.1rem; border-radius: 10px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 768px) {
  .toast { bottom: 1.5rem; }
}

/* motion system — states exist only once the observer is running
   (.motion-ready), so content is visible by default, with or without
   JavaScript. Opacity and transform only: no layout, no CLS. */
.motion-ready [data-motion],
.motion-ready [data-motion-group] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.motion-ready [data-motion].in-view,
.motion-ready [data-motion-group].in-view > * {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* small stagger, capped so nothing queues behind long waits */
.motion-ready [data-motion-group].in-view > :nth-child(2) { transition-delay: 70ms; }
.motion-ready [data-motion-group].in-view > :nth-child(3) { transition-delay: 140ms; }
.motion-ready [data-motion-group].in-view > :nth-child(n+4) { transition-delay: 200ms; }
/* photographs settle from a slight scale; ratio untouched */
.motion-ready figure.photo[data-motion] img { transform: scale(1.02); transition: transform .65s cubic-bezier(.22, .61, .36, 1); }
.motion-ready figure.photo[data-motion].in-view img { transform: scale(1); }
/* the hero gets one short coordinated entrance; H1 stays readable immediately */
.motion-ready .hero .eyebrow,
.motion-ready .hero .hero__lead,
.motion-ready .hero .hero__actions {
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1);
}
.motion-ready .hero.in-view .eyebrow,
.motion-ready .hero.in-view .hero__lead,
.motion-ready .hero.in-view .hero__actions { opacity: 1; transform: none; }
.motion-ready .hero.in-view .hero__lead { transition-delay: 90ms; }
.motion-ready .hero.in-view .hero__actions { transition-delay: 170ms; }
/* pressed feedback on buttons */
.btn:active { transform: translateY(1px); }
@media (max-width: 560px) {
  /* less movement on phones */
  .motion-ready [data-motion],
  .motion-ready [data-motion-group] > * { transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-motion],
  .motion-ready [data-motion-group] > *,
  .motion-ready figure.photo[data-motion] img,
  .motion-ready .hero .eyebrow,
  .motion-ready .hero .hero__lead,
  .motion-ready .hero .hero__actions {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* fine dividers */
.rule { border: 0; height: 1px; background: var(--line); margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.rule--gold { background: rgb(192 138 46 / 45%); }

/* utilities */
.on-dark { color: var(--ivory); }
.text-center { text-align: center; }
.mt-lg { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.mt-md { margin-top: 1.1rem; }
.small-note { font-size: var(--fs-sm); color: var(--muted); }

/* 10. Breakpoints ---------------------------------------------------------- */
@media (min-width: 1081px) {
  /* with the full nav on screen, the brand never yields — the nav gaps flex instead */
  .brand { flex: 0 0 auto; }
}
@media (min-width: 640px) {
  .row { grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); }
  .market { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .qr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .guide-featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flagship__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flagship__foot { grid-template-columns: 1.5fr auto; }
  .phase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr 1fr; }
  .cta-band__inner { grid-template-columns: 1.4fr auto; }
  .scope { grid-template-columns: repeat(3, 1fr); }
  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case { grid-template-columns: 1.15fr .85fr; }
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.2fr .8fr; }
  .phase-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1.3fr; }
  .quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .wa-bar { display: none; }
  .site-footer__base { padding-bottom: 1.6rem; }
}
@media (max-width: 767px) {
  body { padding-bottom: 4.4rem; }
}
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header__contact { display: none; }
}
@media (max-width: 560px) {
  .site-header__inner { gap: .6rem; min-height: 64px; }
  /* keep the primary action inside the first viewport on small phones */
  .hero__inner { padding-block: 1.9rem 2rem; gap: 1.4rem; }
  .hero__lead { margin-top: .85rem; }
  .hero__actions { margin-top: 1.15rem; }
}
@media (max-width: 430px) {
  .brand__name { font-size: 1.1rem; }
  .brand__mark { width: 29px; height: 29px; }
}
@media (max-width: 360px) {
  /* Shirley's fuller hero paragraph: keep the primary action inside 320x568 */
  .hero__inner { padding-block: 1.5rem 1.75rem; }
  .hero__title { font-size: 1.9rem; }
  .hero__lead { font-size: .97rem; line-height: 1.58; margin-top: .7rem; }
  .eyebrow { margin-bottom: .55rem; }
  .hero__actions { margin-top: 1rem; }
}
@media (max-width: 560px) {
  /* narrow mobile: wordmark + menu only — the channels live in the opened
     menu and the sticky contact bar */
  .site-header__wa, .site-header__wechat { display: none; }
  .site-header__inner { gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
@media print {
  .site-header, .wa-bar, .cta-band { display: none; }
  body { background: #fff; }
}

/* per-photo aspect ratios and focal points, generated from images.json */
.pic--canton-fair-banner img { aspect-ratio: 810 / 1080; object-position: 50% 35%; }
.pic--canton-fair-hall img { aspect-ratio: 858 / 1280; object-position: 50% 45%; }
.pic--canton-fair-buyer img { aspect-ratio: 848 / 1280; object-position: 50% 30%; }
.pic--appliance-exhibition img { aspect-ratio: 1080 / 962; object-position: 50% 40%; }
.pic--furniture-showroom img { aspect-ratio: 960 / 846; object-position: 50% 35%; }
.pic--hotel-lobby img { aspect-ratio: 960 / 1280; object-position: 50% 45%; }
.pic--clothing-showroom img { aspect-ratio: 810 / 1080; object-position: 50% 35%; }
.pic--flower-exhibition img { aspect-ratio: 810 / 1080; object-position: 50% 30%; }
.pic--clients-guangzhou img { aspect-ratio: 810 / 1080; object-position: 50% 30%; }
.pic--laptop-lobby img { aspect-ratio: 1024 / 1536; object-position: 50% 40%; }
.pic--laptop-work img { aspect-ratio: 1024 / 1536; object-position: 50% 35%; }
.pic--laptop-desk img { aspect-ratio: 1024 / 1536; object-position: 50% 35%; }
.pic--cambodia-group img { aspect-ratio: 1080 / 628; object-position: 50% 55%; }
.pic--clinic-moodboard img { aspect-ratio: 1085 / 933; }
.pic--clinic-chairs-front img { aspect-ratio: 1080 / 810; }
.pic--clinic-chairs-rear img { aspect-ratio: 1080 / 810; }
.pic--clinic-treatment-chairs img { aspect-ratio: 1080 / 810; }
.pic--clinic-loading img { aspect-ratio: 810 / 1080; }
.pic--clinic-port img { aspect-ratio: 810 / 1080; }
.pic--clinic-container-australia img { aspect-ratio: 810 / 1080; }
.pic--clinic-warehouse img { aspect-ratio: 1080 / 810; }