/* Yun Nam Ver3 — Elementor design system
 * Tokens + section styles extracted from Ver3 HTML prototypes.
 * Enqueued only on Ver3 pages.
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Open+Sans:wght@400;600&display=swap');

/* Hide BeTheme / Muffin chrome on Ver3 Elementor pages */
/* body.yunnam-ver3-page #Header_wrapper,
body.yunnam-ver3-page #Top_bar,
body.yunnam-ver3-page #Action_bar,
body.yunnam-ver3-page #Footer,
body.yunnam-ver3-page footer.mfn-footer,
body.yunnam-ver3-page .mfn-header-tmpl,
body.yunnam-ver3-page .mfn-footer-tmpl,
body.yunnam-ver3-page #mfn-header-template,
body.yunnam-ver3-page .footer_action,
body.yunnam-ver3-page .the_preloader {
  display: none !important;
} */

body.yunnam-ver3-page #Subheader {
  display: none !important;
}
body.yunnam-ver3-page #Content,
body.yunnam-ver3-page #Wrapper,
body.yunnam-ver3-page .content_wrapper,
body.yunnam-ver3-page .section_wrapper,
body.yunnam-ver3-page .mcb-section,
body.yunnam-ver3-page .elementor-section.elementor-section-boxed > .elementor-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}
body.yunnam-ver3-page #Content { padding-top: 0 !important; padding-bottom: 0 !important; }
body.yunnam-ver3-page .elementor-widget-html .elementor-widget-container { padding: 0; }
body.yunnam-ver3-page { overflow-x: hidden; }

/* Full-width only inside Ver3 widgets — do not touch other Elementor widgets. */
.yunnam-ver3 .hero,
.yunnam-ver3 .trustbar,
.yunnam-ver3 section.blk,
.yunnam-ver3 .cta-band {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
.yunnam-ver3-section > .elementor-container,
.elementor-widget[class*="elementor-widget-yunnam_ver3"] > .elementor-widget-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.elementor-section.yunnam-ver3-section {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  --widgets-spacing: 0px;
}
.yunnam-ver3-section > .elementor-container,
.yunnam-ver3-section .elementor-column-wrap,
.yunnam-ver3-section .elementor-widget-wrap,
.yunnam-ver3-section .elementor-element-populated {
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-widget[class*="elementor-widget-yunnam_ver3"] {
  margin: 0 !important;
}
.elementor-widget[class*="elementor-widget-yunnam_ver3"] > .elementor-widget-container {
  padding: 0 !important;
}

.yunnam-ver3 .yn-grid[data-yn-dir="row"] {
  display: grid;
  grid-template-columns: repeat(var(--yn-cols, 3), minmax(0, 1fr)) !important;
  gap: 24px;
}
.yunnam-ver3 .yn-grid[data-yn-dir="column"] {
  display: grid;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row;
}
.yn-grid-dir-column .yunnam-ver3 .yn-grid {
  grid-template-columns: 1fr !important;
}
/* Grid children must be allowed to shrink or long words force overflow. */
.yunnam-ver3 .yn-grid > * {
  min-width: 0;
  max-width: 100%;
}

/* Tablet / mobile: --yn-cols is a desktop value, so collapse it here.
   Elementor Style > Grid > Columns on the tablet/mobile device still wins. */
@media (max-width: 1024px) {
  .yunnam-ver3 .yn-grid[data-yn-dir="row"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px;
  }
}
@media (max-width: 767px) {
  .yunnam-ver3 .yn-grid[data-yn-dir="row"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
  }
  /* Short stat/award tiles stay 2-up rather than one tall column. */
  .yunnam-ver3 .trustbar .yn-grid[data-yn-dir="row"],
  .yunnam-ver3 .awardrow[data-yn-dir="row"],
  .yunnam-ver3 .tl[data-yn-dir="row"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Elementor canvas is an iframe — 100vw / reveal / sticky would hide widgets there. */
.elementor-editor-active .yunnam-ver3 .hero,
.elementor-editor-active .yunnam-ver3 .trustbar,
.elementor-editor-active .yunnam-ver3 section.blk,
.elementor-editor-active .yunnam-ver3 .cta-band,
.elementor-editor-preview .yunnam-ver3 .hero,
.elementor-editor-preview .yunnam-ver3 .trustbar,
.elementor-editor-preview .yunnam-ver3 section.blk,
.elementor-editor-preview .yunnam-ver3 .cta-band {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.elementor-editor-active .yunnam-ver3 .reveal,
.elementor-editor-preview .yunnam-ver3 .reveal {
  opacity: 1 !important;
  transform: none !important;
}
.elementor-editor-active .yunnam-ver3 .sticky-cta,
.elementor-editor-preview .yunnam-ver3 .sticky-cta {
  position: relative;
  transform: none;
  pointer-events: auto;
}
/* Scoped to .yunnam-ver3 so Elementor builder + other widgets keep their own styles. */
.yunnam-ver3 {
/* from yunnam-homepage.html */
/* ===== supplemental homepage-only styles (built on existing tokens) ===== */
  .concern{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:.25s;display:flex;flex-direction:column;height:100%}
  .concern:hover{box-shadow:var(--shadow-sm);transform:translateY(-3px)}
  .concern .ic{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--gold);margin-bottom:18px}
  .concern .ic svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.4;fill:none}
  .concern h3{font-family:var(--serif);color:var(--ink);font-size:21px;margin:0 0 10px}
  .concern p{font-size:14.5px;color:var(--body);margin:0 0 18px}
  .concern .cfoot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px}
  .concern .more{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:7px}
  .concern .more:hover{color:var(--ink)}
  .concern .more::after{content:"\2192";transition:transform .2s ease}
  .concern .more:hover::after{transform:translateX(4px)}
  .concern .fit{font-size:13px;color:var(--muted);line-height:1.5}
  .concern .fit a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--gold-soft)}
  .concern .fit a:hover{color:var(--gold)}
  /* programme decision aid */
  .progs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:14px}
  @media(max-width:760px){.progs{grid-template-columns:1fr}}
  .prog{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px;display:flex;flex-direction:column;position:relative}
  .prog .pill{position:absolute;top:26px;right:28px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft);border-radius:20px;padding:4px 11px}
  .prog .pname{font-family:var(--serif);font-size:26px;color:var(--ink);margin:0 0 5px;padding-right:96px}
  .prog .ptag{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold);margin:0 0 22px}
  .prog .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
  .prog .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
  .prog .chip{font-size:12.5px;background:var(--tint2);color:#4a4a4a;border-radius:20px;padding:5px 13px}
  .prog .how{font-size:14px;color:var(--body);margin:0 0 26px}
  .prog .plink{margin-top:auto;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:7px}
  .prog .plink::after{content:"\2192";transition:transform .2s ease}
  .prog:hover .plink::after{transform:translateX(4px)}
  .bestfit{display:inline-block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5a4d34;background:#fbf3e0;border:1px solid #e7d9b8;border-radius:4px;padding:2px 8px;font-weight:600;margin-right:6px}
  td .na{color:var(--gold-soft)}
  .pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
  @media(max-width:1040px){.pillars{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:820px){.pillars{grid-template-columns:1fr 1fr;gap:32px}}
  @media(max-width:480px){.pillars{grid-template-columns:1fr}}
  .pillars .feat .kick{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:6px}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  @media(max-width:820px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.grid3{grid-template-columns:1fr}}
  .awardrow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
  @media(max-width:680px){.awardrow{grid-template-columns:1fr 1fr}}
  .awd{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:22px 16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px}
.awd img{width:100%;max-width:92px;height:auto;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
.proc-media{max-width:940px;margin:0 auto 44px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.proc-media img{width:100%;height:auto;display:block}
.ba{max-width:640px;margin:36px auto 0}
.ba figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:#fff;border:1px solid var(--line)}
.ba img{width:100%;height:auto;display:block}
.ba figcaption{font-family:var(--serif);font-style:italic;font-size:13.5px;color:#5a4d34;text-align:center;padding:12px 16px}
.ba-slider{position:relative;aspect-ratio:8/5;overflow:hidden;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.ba-slider .hero-slide figure{position:absolute;inset:0;margin:0;border:none;box-shadow:none;background:transparent}
.ba-slider .hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.ba-slider .hero-slide figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(255,253,248,.92),transparent)}
  .awd .y{font-family:var(--serif);font-size:15px;color:var(--gold);margin-bottom:6px}
  .awd .n{font-family:var(--serif);font-size:18px;color:var(--ink);line-height:1.25}
  .outlets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px}
  @media(max-width:680px){.outlets{grid-template-columns:1fr 1fr}}
  @media(max-width:460px){.outlets{grid-template-columns:1fr}}
  .outlets .o{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--body);text-decoration:none;transition:color .2s ease}
  .outlets a.o:hover{color:var(--gold)}
  .outlets .o .unit{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
  .outlets .o .dot{color:var(--gold);flex:none;margin-top:2px}
  .reslink{display:flex;flex-direction:column;gap:8px;padding:26px 26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:.25s;height:100%}
  .reslink:hover{box-shadow:var(--shadow-sm);transform:translateY(-3px)}
  .reslink .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
  .reslink h4{font-size:18px}
  .reslink p{font-size:14px;color:var(--body);margin:0}
  .reslink .more{margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
  /* concern image cards (4-box grid) */
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  @media(max-width:900px){.grid4{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.grid4{grid-template-columns:1fr}}
  a.concern{padding:0;overflow:hidden;color:inherit}
  a.concern .cimg{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--tint2)}
  a.concern .cimg img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
  a.concern:hover .cimg img{transform:scale(1.05)}
  a.concern h3{margin:20px 26px 10px}
  a.concern p{margin:0 26px 18px;font-size:14.5px;color:var(--body)}
  a.concern .more{margin:auto 26px 26px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:7px}
  a.concern .more::after{content:"\2192";transition:transform .2s ease}
  a.concern:hover .more::after{transform:translateX(4px)}
  a.concern.no-img h3{margin-top:26px}
  a.concern .k{display:block;margin:18px 26px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
  a.concern .k + h3{margin-top:8px}
  /* card padding tightens with the viewport */
  @media(max-width:1024px){
    a.concern h3{margin:16px 18px 8px;font-size:19px}
    a.concern p{margin:0 18px 14px}
    a.concern .more{margin:auto 18px 18px}
    a.concern .k{margin:14px 18px 0}
    .reslink{padding:20px}
    .feat{padding:4px}
  }
  @media(max-width:767px){
    a.concern h3{margin:18px 20px 8px;font-size:21px}
    a.concern p{margin:0 20px 16px}
    a.concern .more{margin:auto 20px 22px}
    a.concern .k{margin:16px 20px 0}
  }
  /* generic chips + how (FASTGro section) */
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .chip{font-size:12.5px;background:var(--tint2);color:#5a5148;border-radius:20px;padding:5px 13px}
  .how{font-size:15px;color:var(--body)}
  /* media features row */
  .mediarow{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
  .mlogo{display:grid;place-items:center;min-width:150px;height:64px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--muted);font-family:var(--serif);font-size:15px;letter-spacing:.04em}

  .ctamicro{font-size:12.5px;color:var(--muted);margin:14px 0 0;letter-spacing:.02em}
  .ctamicro::before{content:"\2713";color:var(--gold);margin-right:6px;font-weight:700}
  .stp{transition:transform .25s ease}
  .stp:hover{transform:translateY(-4px)}
  .stp .num{transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
  .stp:hover .num{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 8px 20px -8px rgba(240,124,0,.5)}
  .stp h4{transition:color .2s ease}
  .stp:hover h4{color:var(--gold)}
  /* homepage process explorer (image + vertical step list) */
  .proc-explorer{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;max-width:1020px;margin:0 auto}
  @media(max-width:820px){.proc-explorer{grid-template-columns:1fr;gap:26px}}
  .pe-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10;background:var(--tint2)}
  .pe-img img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease}
  .pe-steps{display:flex;flex-direction:column;gap:12px}
  .pe-step{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
  .pe-step:hover,.pe-step.active{border-color:var(--gold-soft);box-shadow:var(--shadow-sm);transform:translateX(4px)}
  .pe-num{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--gold-soft);color:var(--gold);display:grid;place-items:center;font-family:var(--serif);font-size:18px;transition:.2s}
  .pe-step.active .pe-num{background:var(--gold);border-color:var(--gold);color:#fff}
  .pe-txt h4{margin:1px 0 4px;font-size:17px}
  .pe-txt p{margin:0;font-size:13.5px;color:var(--body)}

/* from yunnam-homepage.html */
/* ============ Yun Nam design system (mirrors live site: Orpheus Pro + Open Sans, 1220px, soft neutral) ============ */
  --serif:'orpheuspro','Orpheus Pro','Cormorant','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Open Sans','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --ink:#191919;
  --body:#544e46;
  --muted:#8c8377;
  --bg:#ffffff;
  --tint:#fdf8f0;
  --tint2:#f1ece7;
  --line:#ece4d6;
  --line-strong:#ddd0bd;
  --dark:#221d17;
  --gold:#f07c00;
  --gold-soft:#f0c79b;
  --star:#e2a02e;
  --radius:5px;
  --btn-primary:var(--gold);
  --btn-primary-hover:#d16200;
  --btn-primary-text:#fff;
  --hero-bg:linear-gradient(180deg,#fdf8f0,#f4ece0);
  --trustbar-bg:#1d1d1d;
  --cta-bg:linear-gradient(150deg,#2a241d,#1a1611);
  --shadow:0 18px 50px -24px rgba(40,36,28,.28);
  --shadow-sm:0 10px 30px -18px rgba(40,36,28,.22);
  --maxw:1180px;
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  &, & * { box-sizing:border-box; }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
  .narrow{max-width:820px;margin-left:auto;margin-right:auto}
  h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:500;margin:0;letter-spacing:.4px}
  h1{font-size:clamp(34px,4.4vw,54px);line-height:1.12}
  h2{font-size:clamp(28px,3.4vw,40px);line-height:1.18;letter-spacing:1px}
  h3{font-size:23px;line-height:1.3}
  h4{font-size:19px;letter-spacing:.6px}
  p{margin:0 0 18px}
  a{color:var(--ink);text-decoration:none}
  img{max-width:100%;display:block}
  strong{color:#3d3d3d;font-weight:600}

  .eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0}
  .rule{width:44px;height:1px;background:var(--gold);border:0;margin:20px 0}
  .rule.center{margin-left:auto;margin-right:auto}
  .lede{font-size:18px;line-height:1.75;color:#555}

  /* buttons */
  .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:16px 34px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;transition:all .25s ease;line-height:1}
  .btn-primary{background:var(--btn-primary, #ea6f00);color:var(--btn-primary-text, #fff);box-shadow:0 8px 22px -12px rgba(234,111,0,.6)}
  .btn-primary:hover{background:var(--btn-primary-hover, #d16200);color:var(--btn-primary-text, #fff);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
  .btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
  .btn-light{background:#fff;color:var(--ink)}
  .btn-light:hover{background:var(--gold);color:#fff}
  .btn-outline-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
  .btn-outline-light:hover{background:#fff;color:var(--ink)}
  /* button groups — one gap for every .cta wrapper */
  .cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--btn-gap,14px)}
  .cta.center{justify-content:center}
  /* Older markup centres two buttons in a plain div with no .cta class. */
  div:not(.cta):has(> .btn + .btn){display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--btn-gap,14px)}
  /* Phone: stack at equal width so neither button looks dominant. */
  @media(max-width:767px){
    .cta{flex-direction:column;align-items:stretch}
    .cta .btn{width:100%;justify-content:center;text-align:center}
    div:not(.cta):has(> .btn + .btn){flex-direction:column;align-items:stretch}
    div:not(.cta):has(> .btn + .btn) > .btn{width:100%;justify-content:center;text-align:center}
  }

  /* ============ top bar + header ============ */
  .topbar{background:#1d1d1d;color:#cfcabd;font-size:12.5px;letter-spacing:.03em}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 26px;flex-wrap:wrap}
  .topbar a{color:var(--gold-soft)}
  .topbar .tb-r{display:flex;gap:20px;flex-wrap:wrap}

  header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);transition:padding .25s ease}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 26px;transition:padding .25s ease}
  header.site.small .wrap{padding:12px 26px}
  .logo{display:flex;flex-direction:column;line-height:1;text-decoration:none}
  .logo .zh{font-family:var(--serif);font-size:12px;letter-spacing:.5em;color:var(--gold);margin-bottom:5px}
  .logo .en{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:.14em;color:var(--ink)}
  .logo .sub{font-family:var(--sans);font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);margin-top:4px}
  .logo-img{height:46px;width:auto;display:block;transition:height .25s ease}
  header.site.small .logo-img{height:40px}
  nav.main{display:flex;align-items:center;gap:30px}
  nav.main a{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;color:#4a4a4a;text-transform:uppercase;position:relative;padding:6px 0}
  nav.main a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .25s ease}
  nav.main a:hover{color:var(--ink)}
  nav.main a:hover::after{width:100%}
  nav.main a.has::before{content:"";}
  .navwrap{display:flex;align-items:center;gap:28px}
  .burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
  .burger span{width:24px;height:2px;background:var(--ink);display:block;transition:.25s}
  @media(max-width:1000px){
    nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:10px 26px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
    nav.main.open{display:flex}
    nav.main a{width:100%;padding:12px 0;border-bottom:1px solid var(--line)}
    .burger{display:flex}
    header.site .btn{display:none}
  }

  /* ============ hero ============ */
  .hero{position:relative;background:var(--hero-bg);overflow:hidden}
  .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(1000px 500px at 90% -20%,rgba(240,124,0,.10),transparent 60%);pointer-events:none}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:70px 26px 74px;position:relative;z-index:1}
  .crumb{font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:22px}
  .crumb a{color:var(--muted)}
  .hero h1{margin:14px 0 22px}
  .hero .lede{margin-bottom:30px;}
  .hero .cta{display:flex;gap:var(--btn-gap,14px);flex-wrap:wrap;margin-bottom:34px}
  .hero .assurance{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:#6a6a6a;letter-spacing:.02em}
  .hero .assurance span{display:flex;align-items:center;gap:8px}
  .hero .assurance .tick{color:var(--gold)}
  .hero-visual{position:relative}
  .hero-img{aspect-ratio:4/5;border-radius:var(--radius);background:
      linear-gradient(150deg,#e7ded0,#d8cbb6 60%,#cdbfa5);position:relative;overflow:hidden;box-shadow:var(--shadow)}
  .hero-img .cap{position:absolute;bottom:0;left:0;right:0;padding:22px;font-family:var(--serif);font-style:italic;font-size:15px;color:#5a4d34;background:linear-gradient(0deg,rgba(255,253,248,.9),transparent)}
  .hero-badge{position:absolute;top:-22px;left:-22px;background:#fff;border:1px solid var(--line);border-radius:50%;width:112px;height:112px;display:grid;place-items:center;text-align:center;box-shadow:var(--shadow-sm)}
  .hero-badge .n{font-family:var(--serif);font-size:30px;color:var(--ink);line-height:1}
  .hero-badge .t{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:4px}
  .hero-slider .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
  .hero-slider .hero-slide.is-active{opacity:1;pointer-events:auto}
  .hero-img .hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:22% 18%}
  .hero-slider .hero-slide img{object-fit:contain;object-position:center}
  .hero-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,253,248,.92);color:var(--ink);font-size:24px;line-height:1;line-height:8px;cursor:pointer;display:grid;place-items:center;z-index:3;box-shadow:var(--shadow-sm);backdrop-filter:blur(2px);transition:background .2s,color .2s,border-color .2s}
  .hero-nav:hover{background:var(--gold);border-color:var(--gold);color:#fff}
  .hero-nav.prev{left:14px}
  .hero-nav.next{right:14px}
  .hero-dots{display:flex;gap:9px;justify-content:center;margin-top:14px}
  .hero-dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:rgba(90,77,52,.3);cursor:pointer;transition:background .2s,transform .2s}
  .hero-dot.is-active{background:var(--gold);transform:scale(1.3)}
  @media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:36px;padding:48px 26px 54px}.hero-visual{max-width:380px}}

  /* ============ trust bar ============ */
  .trustbar{background:var(--trustbar-bg);color:#efece4}
  .trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:30px 26px;text-align:center}
  .trustbar .n{font-family:var(--serif);font-size:30px;color:#fff;line-height:1;font-weight:300}
  .trustbar .l{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#a49b86;margin-top:9px}
  .trustbar .div{position:relative}
  .trustbar .div:not(:last-child)::after{content:"";position:absolute;right:-12px;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.1)}
  @media(max-width:680px){.trustbar .wrap{grid-template-columns:1fr 1fr;gap:26px}}

  /* ============ sections ============ */
  section.blk{padding:92px 0}
  section.tint{background:var(--tint)}
  section.dark{background:var(--dark);color:#c9c4b8}
  section.dark h2,section.dark h3{color:#fff}
  .sec-head{text-align:center;max-width:680px;margin:0 auto 52px}
  .sec-head .eyebrow{margin-bottom:16px}
  .sec-head h2{margin-bottom:0}
  .sec-head .rule{margin:22px auto 22px}
  .sec-head p{margin:0;color:var(--body)}

  /* quick answer */
  .qa{max-width:900px;margin:-52px auto 0;position:relative;z-index:3;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:38px 44px;box-shadow:var(--shadow)}
  .qa .eyebrow{margin-bottom:12px}
  .qa p{font-size:19px;line-height:1.68;color:#4a4a4a;margin:0;font-family:var(--sans)}
  @media(max-width:600px){.qa{padding:26px 24px}.qa p{font-size:17px}}

  /* takeaways */
  .takeaways{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;max-width:940px;margin:0 auto}
  .takeaways .item{display:flex;gap:16px;padding:6px 0}
  .takeaways .num{font-family:var(--serif);font-size:20px;color:var(--gold);flex:none;line-height:1.4;min-width:26px}
  .takeaways .item p{margin:0;color:var(--body)}
  @media(max-width:700px){.takeaways{grid-template-columns:1fr;gap:6px}}

  /* split row */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .split.split--single{grid-template-columns:1fr}
  .split.rev .txt{order:2}
  .split .img{aspect-ratio:5/4;border-radius:var(--radius);background:linear-gradient(150deg,#ece5d8,#dcd0bb);position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
  .split .img .cap{position:absolute;bottom:16px;left:18px;font-family:var(--serif);font-style:italic;font-size:14px;color:#5a4d34}
  .blk.tint .cap { background-color: #ffffffb3; padding: 0 12px; border-radius: 5px; }
  .split h2{margin-bottom:8px}
  @media(max-width:820px){.split{grid-template-columns:1fr;gap:30px}.split.rev .txt{order:0}}

  /* images above table — 2 per row */
  .tbl-imgs{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:40px}
  .tbl-imgs .img{aspect-ratio:5/4;border-radius:var(--radius);background:linear-gradient(150deg,#ece5d8,#dcd0bb);position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
  .tbl-imgs .cap{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.4;color:var(--ink);margin-bottom:14px;text-align:center;}
  @media(max-width:560px){.tbl-imgs{grid-template-columns:1fr;gap:20px}}
  /* elegant table */
  .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
  table{border-collapse:collapse;width:100%;min-width:600px;font-size:15px}
  thead th{background:#fbfaf7;font-family:var(--serif);font-weight:400;font-size:16px;color:var(--ink);text-align:left;padding:18px 22px;border-bottom:1px solid var(--line-strong);letter-spacing:.3px}
  tbody td{padding:17px 22px;border-bottom:1px solid var(--line);color:var(--body);text-align:left;}
  tbody tr:last-child td{border-bottom:0}
  tbody tr.feature{background:#fbf8f1}
  tbody tr.feature td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
  td .lead{font-family:var(--serif);font-size:17px;color:var(--ink);display:block;margin-bottom:2px}
  .cell-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .own-tag{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft);padding:2px 8px;border-radius:20px;margin-left:8px}

  /* feature columns / causes */
  .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  @media(max-width:820px){.cols{grid-template-columns:1fr 1fr;gap:24px}}
  @media(max-width:520px){.cols{grid-template-columns:1fr}}
  .feat{text-align:center;padding:8px}
  .feat .ic{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--gold);overflow:hidden}
  .feat .ic svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.4;fill:none}
  .yunnam-ver3 .feat .ic img{width:100%;height:100%;object-fit:cover;display:block}
  .yunnam-ver3 .feat .ic i{font-size:24px;line-height:1}
  .feat h4{margin-bottom:8px}
  .feat p{font-size:14.5px;margin:0}

  /* herbs cards */
  .herbs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  @media(max-width:760px){.herbs{grid-template-columns:1fr}}
  .herb{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;text-align:center;transition:.25s}
  .herb:hover{box-shadow:var(--shadow-sm);transform:translateY(-3px)}
  .herb .zh{font-family:var(--serif);font-size:30px;color:var(--gold);margin-bottom:4px}
  .herb .en{font-family:var(--serif);font-size:21px;color:var(--ink)}
  .herb p{font-size:14px;margin:12px 0 0}

  /* process steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  @media(max-width:820px){.steps{grid-template-columns:1fr 1fr;gap:30px 0}}
  @media(max-width:460px){.steps{grid-template-columns:1fr}}
  .stp{text-align:center;padding:0 22px;position:relative}
  .stp:not(:last-child)::after{content:"";position:absolute;top:26px;right:-1px;width:100%;height:1px;background:var(--line-strong)}
  @media(max-width:820px){.stp::after{display:none!important}}
  .stp .num{width:54px;height:54px;margin:0 auto 18px;border-radius:50%;background:#fff;border:1px solid var(--gold-soft);color:var(--gold);display:grid;place-items:center;font-family:var(--serif);font-size:22px;position:relative;z-index:1}
  .stp h4{font-size:16px;margin-bottom:6px}
  .stp p{font-size:13.5px;margin:0}

  /* timeline */
  .tl{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
  @media(max-width:640px){.tl{grid-template-columns:1fr 1fr}}
  .tl .p{padding:26px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
  .tl .p.hi{border-color:var(--gold-soft);background:#fbf8f1}
  .tl .p .w{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
  .tl .p .d{font-family:var(--serif);font-size:16px;color:var(--ink)}

  /* callout */
  .callout{border:1px solid var(--line);border-left:3px solid var(--gold);background:#fbfaf7;border-radius:0 var(--radius) var(--radius) 0;padding:26px 30px}
  .callout .eyebrow{margin-bottom:10px}
  .callout p:last-child{margin-bottom:0}

  /* testimonials */
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  @media(max-width:860px){.quotes{grid-template-columns:1fr}}
  .quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;position:relative}
  .quote .stars{color:var(--star);letter-spacing:3px;font-size:14px;margin-bottom:14px}
  .quote p{font-family:var(--serif);font-size:17px;line-height:1.6;color:#3f3f3f;font-style:italic;margin:0 0 18px}
  .quote .who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
  .quote .av{width:40px;height:40px;border-radius:50%;background:var(--tint2);color:var(--gold);display:grid;place-items:center;font-family:var(--serif);font-size:18px;padding:10px 0;text-align:center;}
  .quote .who b{color:var(--ink);font-weight:600;font-size:14px;font-family:var(--sans)}
  .quote .who span{font-size:12px;color:var(--muted);display:block}

  /* FAQ */
  .faq{max-width:860px;margin:0 auto}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:24px 4px;font-family:var(--serif);font-size:20px;color:var(--ink);letter-spacing:.3px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .pm{flex:none;width:26px;height:26px;position:relative}
  .faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--gold);transition:.25s;top:50%;left:50%}
  .faq summary .pm::before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
  .faq summary .pm::after{width:1.5px;height:14px;transform:translate(-50%,-50%)}
  .faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
  .faq .a{padding:0 4px 26px;font-size:15.5px;color:var(--body);max-width:92%}

  /* eeat row */
  .eeat{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
  @media(max-width:760px){.eeat{grid-template-columns:1fr}}
  .eeat .box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
  .rating-lg{display:flex;align-items:center;gap:20px}
  .rating-lg .big{font-family:var(--serif);font-size:46px;color:var(--ink);line-height:1}
  .rating-lg .stars{color:var(--star);letter-spacing:3px}
  .rating-lg .sub{font-size:13px;color:var(--muted)}
  .author{display:flex;gap:16px;align-items:flex-start}
  .author .av{width:54px;height:54px;border-radius:50%;background:var(--tint2);border:1px solid var(--line);color:var(--gold);display:grid;place-items:center;font-family:var(--serif);font-size:22px;flex:none}
  .author b{color:var(--ink);font-family:var(--sans);font-weight:600;font-size:15px}
  .author .cred{font-size:12.5px;color:var(--muted);margin:2px 0 8px}
  .author p{font-size:13.5px;margin:0}
  .refs{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
  .refs .eyebrow{margin-bottom:12px}
  .refs ol{margin:0;padding-left:18px;font-size:13.5px;columns:2;column-gap:40px}
  .refs li{margin:5px 0;break-inside:avoid}
  @media(max-width:640px){.refs ol{columns:1}}

  /* final cta */
  .cta-band{background:var(--cta-bg);color:#e9e5db;text-align:center;position:relative;overflow:hidden}
  .cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 50% 120%,rgba(240,124,0,.20),transparent 60%)}
  .cta-band .wrap{position:relative;z-index:1;padding:84px 26px}
  .cta-band h2{color:#fff;margin-bottom:14px}
  .cta-band p{max-width:52ch;margin:0 auto 30px;color:#c9c4b8}
  .cta-band .cta{display:flex;gap:var(--btn-gap,14px);justify-content:center;flex-wrap:wrap}

  /* footer */
  footer.site{background:#171717;color:#8f897c;font-size:14px}
  footer.site .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding:64px 26px 46px;max-width:var(--maxw);margin:0 auto}
  @media(max-width:820px){footer.site .top{grid-template-columns:1fr 1fr;gap:32px}}
  @media(max-width:520px){footer.site .top{grid-template-columns:1fr}}
  footer .logo .en{color:#fff}
  footer .logo .sub{color:#8f897c}
  footer h5{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#cfc9bb;margin:0 0 18px;font-weight:600}
  footer ul{list-style:none;margin:0;padding:0}
  footer li{margin:9px 0}
  footer a{color:#8f897c}
  footer a:hover{color:var(--gold-soft)}
  footer .bottom{border-top:1px solid #2a2a2a;text-align:center;padding:22px 26px;font-size:12.5px;color:#6f6a5f}
  .footdesc{margin:16px 0 0;font-size:13.5px;line-height:1.7}

  /* reveal — progressive enhancement: only hidden when JS is active */
  &.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  &.js .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){&.js .reveal{opacity:1;transform:none;transition:none}}

  .note{font-size:12px;color:#a59f92;font-style:italic}
  .mt0{margin-top:0}

/* from yunnam-homepage.html */
/* ============================================================
     v2 client-comment refinements (Ver2 doc, 2026-08-12)
     ============================================================ */

  /* CTA parity — both hero buttons the same size (comment: homepage) */
  .hero .cta{gap:var(--btn-gap,16px)}
  .hero .cta .btn{min-width:264px;justify-content:center;text-align:center}
  @media(max-width:520px){.hero .cta{gap:var(--btn-gap,12px)}.hero .cta .btn{min-width:0;width:100%}}

  /* Hero trust ticks — one consistent size, colour and tick for every item,
     including "no obligation" (comment: homepage + scalp, all pages) */
  .hero .ctamicro{display:none}
  .hero .assurance{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:13px;color:#6a6a6a;letter-spacing:.02em;margin-top:20px}
  .hero .assurance span{display:flex;align-items:center;gap:8px;font-size:13px;color:#6a6a6a}
  .hero .assurance .tick{color:var(--gold);font-weight:700;font-size:13px;line-height:1}

  /* Herbal USP at the top of the page (comment: homepage) */
  .herb-strip{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;margin:24px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.62)}
  .herb-strip .hs-lbl{flex:0 0 auto;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);width:128px;line-height:1.5}
  .herb-strip .hs-i{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:13.5px;color:var(--ink);white-space:nowrap}
  .herb-strip .hs-i img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;border:1px solid var(--line);flex:0 0 40px}
  @media(max-width:900px){.herb-strip{max-width:600px}}
  @media(max-width:560px){
    .herb-strip{gap:10px;padding:12px}
    .herb-strip .hs-lbl{width:100%;flex:0 0 100%;margin-bottom:2px}
    .herb-strip{flex-wrap:wrap;justify-content:space-between}
    .herb-strip .hs-i{font-size:12px;gap:7px}
    .herb-strip .hs-i img{width:30px;height:30px;flex:0 0 30px}
  }

  /* Herb cards now carry a photo (comment: "herbs part also put images" — all pages) */
  .herb{padding:0 0 28px;overflow:hidden}
  .herb .herb-img{display:block;height:160px;overflow:hidden;background:var(--tint)}
  .herb .herb-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
  .herb:hover .herb-img img{transform:scale(1.04)}
  .herb .zh{padding:22px 24px 0}
  .herb .en{padding:0 24px}
  .herb p{padding:0 24px;margin:12px 0 0}
  @media(max-width:760px){.herb .herb-img{height:186px}}

  /* Backgrounds — softer, less plain/text-heavy (comment: all pages) */
  section.blk{position:relative}
  section.blk > .wrap{position:relative;z-index:1}
  section.blk.tint{background:linear-gradient(180deg,#fdf9f1 0%,#f6efe2 100%)}
  section.blk.tint::before,section.blk.botanical::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23c8a06a' stroke-width='1.1' opacity='.5'%3E%3Cpath d='M40 200c0-40 22-72 60-84'/%3E%3Cpath d='M62 172c-14-4-22-16-22-30 14-2 26 4 32 16z'/%3E%3Cpath d='M78 146c-10-11-11-25-4-37 12 6 18 18 16 31z'/%3E%3Cpath d='M92 124c-2-15 6-27 19-32 4 13 0 27-11 34z'/%3E%3Cpath d='M160 40c0 40-22 72-60 84'/%3E%3Cpath d='M138 68c14 4 22 16 22 30-14 2-26-4-32-16z'/%3E%3Cpath d='M122 94c10 11 11 25 4 37-12-6-18-18-16-31z'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat;background-size:240px 240px;opacity:.32}
  section.blk:not(.tint)::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(760px 380px at 88% -10%,rgba(240,124,0,.045),transparent 62%),
               radial-gradient(620px 320px at -6% 108%,rgba(200,160,106,.07),transparent 60%)}

  /* Mobile: close up the white space (comment: all pages) */
  @media(max-width:760px){
    section.blk{padding:56px 0}
    .wrap{padding:0 20px}
    .hero .wrap{padding:34px 20px 42px;gap:28px}
    .sec-head{margin-bottom:30px}
    .sec-head p{font-size:15px}
    h1{font-size:clamp(29px,7.6vw,36px)}
    h2{font-size:clamp(25px,6.2vw,31px)}
    .herbs,.grid4,.grid3,.cols,.progs{gap:16px}
    .herb{padding-bottom:22px}
    .trustbar .wrap{padding-top:26px;padding-bottom:26px}
    .quotes{gap:16px}
  }
  @media(max-width:460px){
    section.blk{padding:44px 0}
    .sec-head{margin-bottom:24px}
  }

  /* Mobile top bar — one tight row instead of three stacked lines */
  @media(max-width:760px){
    .topbar{font-size:11.5px}
    .topbar .wrap{padding:7px 20px;gap:0;flex-wrap:nowrap;justify-content:center}
    .topbar .wrap > span:not(.tb-r){display:none}
    .topbar .tb-r{gap:14px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
    .topbar .tb-r > span{display:none}
  }

/* from yunnam-hair-loss.html */
td .typeimg{display:block;width:100%;max-width:132px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;margin:0 0 9px;background:var(--tint2)}
  td .typeimg img{width:100%;height:100%;object-fit:cover;display:block}
  @media(max-width:600px){td .typeimg{max-width:92px}}
  .proc-media{max-width:560px;margin:0 auto 40px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
  .proc-media img{width:100%;height:auto;display:block}
  .stp{transition:transform .25s ease}
  .stp:hover{transform:translateY(-4px)}
  .stp .num{transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
  .stp:hover .num{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 8px 20px -8px rgba(240,124,0,.5)}
  .stp h4{transition:color .2s ease}
  .stp:hover h4{color:var(--gold)}
  .steps .stp{cursor:pointer}
  .stp.active .num{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 8px 20px -8px rgba(240,124,0,.5)}
  .stp.active h4{color:var(--gold)}
  .proc-media img{transition:opacity .3s ease}

/* from yunnam-hair-loss.html */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;justify-content:center;pointer-events:none;transform:translateY(130%);transition:transform .35s ease}
  .sticky-cta.show{transform:none}
  .sticky-cta .bar{pointer-events:auto;margin:0 auto 16px;display:flex;align-items:center;gap:16px;background:rgba(29,29,29,.97);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.10);border-radius:60px;padding:10px 12px 10px 26px;box-shadow:0 18px 50px -18px rgba(0,0,0,.55);max-width:calc(100% - 26px)}
  .sticky-cta .txt{color:#efece4;font-size:13px;letter-spacing:.02em;line-height:1.35}
  .sticky-cta .txt b{color:#fff;font-family:var(--serif);font-weight:500;font-size:15px;display:block;letter-spacing:.3px}
  .sticky-cta .call{color:var(--gold-soft);font-size:13px;font-weight:600;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
  .sticky-cta .call:hover{color:#fff}
  .sticky-cta .btn{white-space:nowrap;padding:14px 26px}
  @media(max-width:640px){.sticky-cta .txt{display:none}.sticky-cta .bar{width:calc(100% - 22px);justify-content:space-between;padding:9px 12px 9px 20px}}

/* from yunnam-grey-white-hair.html */
.proc-media{max-width:560px;margin:0 auto 40px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
  .proc-media img{width:100%;height:auto;display:block;transition:opacity .3s ease}
  .steps .stp{cursor:pointer}
  .stp{transition:transform .25s ease}
  .stp:hover{transform:translateY(-4px)}
  .stp .num{transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
  .stp:hover .num,.stp.active .num{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 8px 20px -8px rgba(240,124,0,.5)}
  .stp h4{transition:color .2s ease}
  .stp:hover h4,.stp.active h4{color:var(--gold)}

}

.customised .split .img .cap{color:#FFF;text-shadow:2px 2px 4px #000;}

.eeat .box > .eyebrow { margin: 0 0 16px; }

.eeat .rating-lg .stars {
  display: inline-block;
  background: linear-gradient(90deg, var(--gold) var(--fill, 100%), #e6dcc8 var(--fill, 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

body.yunnam-ver3-page .yn-top{
  position:fixed; right:32px; bottom:98px; z-index:998;
  width:44px; height:44px; border:0; border-radius:50%; padding:0;
  background:#fff; color:#222; box-shadow:0 2px 10px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s, transform .25s, visibility .25s;
}
body.yunnam-ver3-page .yn-top.show{ opacity:1; visibility:visible; transform:none; }
body.yunnam-ver3-page .yn-top svg{ width:22px; height:22px; }

@media screen and (max-width:767px){
  body.yunnam-ver3-page .yn-top{ bottom:163px; }
}

@media (max-width: 640px) {
  /* swap phone number for the consultation text */
  .yunnam-ver3 .sticky-cta .call { display: none; }
  .yunnam-ver3 .sticky-cta .txt {
    display: block; flex: 1 1 auto; min-width: 0;
    font-size: 0; line-height: 1.25;   /* hides the "First trial from $28" line */
  }
  .yunnam-ver3 .sticky-cta .txt b {
    font-size: 13px; line-height: 1.25; letter-spacing: .2px;
  }
  /* slimmer button to give the text room */
  .yunnam-ver3 .sticky-cta .btn {
    flex: 0 0 auto; padding: 11px 16px;
    font-size: 11.5px; letter-spacing: .08em; white-space: nowrap;
  }
  /* lift the reCAPTCHA badge above the bar */
  body.yunnam-ver3-page .grecaptcha-badge { bottom: 95px !important; }
}

.eeat .rating-lg .stars { letter-spacing: .2em; }

.eeat .box .rating-lg .stars {
  letter-spacing: .2em;
  background-image: linear-gradient(90deg, #f07c00 90%, #e6dcc8 91.7%);
}

.yunnam-ver3 .media-feat .awd img {
	width: auto;
	max-width: 100%;
	height: 64px;
	object-fit: contain;
}

/* Featured On: mobile "Show more" */
.yunnam-ver3 .media-feat .awd.yn-extra {
	display: none !important;
}
.yunnam-ver3 .yn-more {
	display: block;
	margin: 22px auto 0;
	padding: 10px 28px;
	border: 1px solid var(--gold, #c8a15a);
	border-radius: var(--radius, 5px);
	background: transparent;
	color: var(--ink, #2b2622);
	font: inherit;
	font-size: 14px;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.yunnam-ver3 .yn-more:hover,
.yunnam-ver3 .yn-more:focus-visible {
	background: var(--gold, #c8a15a);
	color: #fff;
}
.yunnam-ver3 .yn-more[hidden] {
	display: none;
}