/* ============================================================
   MYG GROUP — myggroup.us
   Design system: deep navy ink, warm ivory paper, muted brass.
   ============================================================ */

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

:root{
  --ink:#15233A;
  --ink-2:#1E3048;
  --paper:#FBF9F4;
  --paper-2:#F2EEE2;
  --card:#FFFFFF;
  --text:#2B313B;
  --soft:#5B6472;
  --accent:#937544;
  --accent-dk:#7C6135;
  --accent-lt:#C8A86C;
  --line:#E5DECB;
  --line-2:#EDE8DA;
  --maxw:1180px;
  --pad:clamp(1.25rem,5vw,2.75rem);
  --sp:clamp(3.75rem,7vw,6.25rem);
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper); color:var(--text);
  font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased;
}
html[lang="zh"] body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans CJK SC",sans-serif;
  font-size:16.5px; line-height:1.9;
}

h1,h2,h3,h4{ font-family:"Lora",Georgia,"Times New Roman",serif; font-weight:600; color:var(--ink); line-height:1.24 }
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3,html[lang="zh"] h4{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif; font-weight:700; letter-spacing:.012em;
}
p{ margin:0 0 1.1rem }
p:last-child{ margin-bottom:0 }
a{ color:var(--accent-dk); text-decoration:none; transition:color .15s }
a:hover{ color:var(--accent) }
strong{ font-weight:600; color:var(--ink) }
::selection{ background:var(--accent-lt); color:var(--ink) }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) }
.narrow{ max-width:760px }

/* ---------- eyebrow ---------- */
.eyebrow{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); margin-bottom:1rem;
}
html[lang="zh"] .eyebrow{ letter-spacing:.16em; font-size:.76rem }
.on-ink .eyebrow,.eyebrow.on-ink{ color:var(--accent-lt) }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(251,249,244,.93); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:76px }
.brand{ display:flex; align-items:baseline; gap:.52rem; color:var(--ink); white-space:nowrap }
.brand:hover{ color:var(--ink) }
.brand b{ font-family:"Lora",Georgia,serif; font-weight:600; font-size:1.34rem; letter-spacing:.03em }
.brand i{
  font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:var(--soft);
}
.nav-right{ display:flex; align-items:center; gap:1.9rem }
nav.main{ display:flex; align-items:center; gap:1.9rem }
nav.main a{ position:relative; color:var(--text); font-size:.92rem; font-weight:500; padding:.4rem 0 }
nav.main a:hover{ color:var(--ink) }
nav.main a.active{ color:var(--ink) }
nav.main a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent);
}
.lang{
  display:flex; align-items:center; gap:.4rem; font-size:.82rem;
  padding-left:1.5rem; border-left:1px solid var(--line); color:var(--soft);
}
.lang a.cur{ color:var(--ink); font-weight:700 }
.menu-btn{
  display:none; background:none; border:1px solid var(--line); border-radius:3px;
  width:42px; height:38px; cursor:pointer; position:relative;
}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  content:""; position:absolute; left:50%; width:18px; height:1.5px; background:var(--ink);
  transform:translateX(-50%);
}
.menu-btn span{ top:50% }
.menu-btn span::before{ top:-6px }
.menu-btn span::after{ top:6px }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-size:.9rem; font-weight:600; letter-spacing:.02em;
  padding:.92rem 1.7rem; border-radius:2px; border:1px solid transparent;
  cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.btn-primary{ background:var(--ink); color:#fff }
.btn-primary:hover{ background:var(--accent-dk); color:#fff }
.btn-ghost{ background:transparent; border-color:var(--ink); color:var(--ink) }
.btn-ghost:hover{ background:var(--ink); color:#fff }
.on-ink .btn-primary{ background:var(--accent); color:#fff }
.on-ink .btn-primary:hover{ background:var(--accent-lt); color:var(--ink) }
.on-ink .btn-ghost{ border-color:rgba(255,255,255,.45); color:#fff }
.on-ink .btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.9rem }

/* ---------- hero / page header ---------- */
.hero{ background:var(--ink); color:#EAE3D4 }
.hero .wrap{ padding-top:clamp(4rem,9vw,7rem); padding-bottom:clamp(4rem,9vw,7rem) }
.hero-inner{ max-width:760px }
.hero h1{
  color:#FCFAF4; font-size:clamp(2.35rem,4.6vw,3.5rem); margin:.2rem 0 1.4rem; letter-spacing:.004em;
}
.hero .lead{ font-size:1.16rem; color:#CFC7B4; max-width:620px }
html[lang="zh"] .hero .lead{ font-size:1.08rem }
.hero-tag{
  margin-top:2.4rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.16);
  font-family:"Lora",Georgia,serif; font-style:italic; color:var(--accent-lt); font-size:1.05rem;
}

.pagehead{ background:var(--ink); color:#EAE3D4 }
.pagehead .wrap{ padding-top:clamp(3.1rem,6vw,4.6rem); padding-bottom:clamp(3.1rem,6vw,4.6rem) }
.pagehead h1{ color:#FCFAF4; font-size:clamp(2rem,3.6vw,2.9rem); max-width:760px }
.pagehead p{ color:#CFC7B4; max-width:640px; margin-top:1rem }
.pagehead .meta{ margin-top:1.1rem; font-size:.9rem; color:#9AA2AF }

/* ---------- sections ---------- */
.section{ padding:var(--sp) 0 }
.section--alt{ background:var(--paper-2) }
.section--ink{ background:var(--ink); color:#D9D2C2 }
.section--tight{ padding:clamp(2.5rem,5vw,3.75rem) 0 }
.sec-head{ max-width:720px; margin-bottom:2.6rem }
.sec-head h2{ font-size:clamp(1.65rem,2.8vw,2.25rem) }
.sec-head p{ margin-top:.9rem; color:var(--soft) }
.section--ink h2{ color:#FCFAF4 }
.section--ink .sec-head p{ color:#B7BECB }

/* feature: label column + content */
.feature{ display:grid; grid-template-columns:200px 1fr; gap:clamp(1.5rem,4vw,3.5rem) }
.feature + .feature{ margin-top:3.25rem; padding-top:3.25rem; border-top:1px solid var(--line) }
.feature .flabel{ font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); padding-top:.4rem }
.feature .fbody h3{ font-size:1.45rem; margin-bottom:.85rem }
.feature .fbody > p{ color:var(--text) }

/* ---------- cards ---------- */
.grid{ display:grid; gap:1.5rem }
.grid-2{ grid-template-columns:repeat(2,1fr) }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:3px;
  padding:2.1rem 2rem; transition:border-color .18s,transform .18s;
}
.card .num{ font-family:"Lora",Georgia,serif; font-size:1rem; color:var(--accent); font-weight:600 }
.card h3{ font-size:1.32rem; margin:.5rem 0 .7rem }
.card p{ color:var(--soft); font-size:.99rem }
.card.linked:hover{ border-color:var(--accent); transform:translateY(-3px) }
.card-link{ display:inline-block; margin-top:1rem; font-size:.88rem; font-weight:600; letter-spacing:.02em }

/* ---------- itemised list ---------- */
.ilist{ list-style:none; margin:1.15rem 0 0 }
.ilist li{
  position:relative; padding:.62rem 0 .62rem 1.6rem; border-top:1px solid var(--line-2);
  color:var(--text);
}
.ilist li:first-child{ border-top:0 }
.ilist li::before{
  content:""; position:absolute; left:0; top:1.15rem; width:9px; height:1.5px; background:var(--accent);
}

/* ---------- note / callout ---------- */
.note{
  border-left:3px solid var(--accent); background:var(--card);
  padding:1.6rem 1.8rem; border-radius:0 3px 3px 0;
}
.note.on-paper2{ background:#fff }
.note h3{ font-size:1.15rem; margin-bottom:.55rem }
.note p{ color:var(--soft); font-size:.99rem }

/* ---------- facts strip ---------- */
.facts{ display:flex; flex-wrap:wrap; gap:.4rem 2.4rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.5rem 0 }
.facts div{ display:flex; flex-direction:column }
.facts dt{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700 }
.facts dd{ font-family:"Lora",Georgia,serif; font-size:1.1rem; color:var(--ink); margin-top:.2rem }
html[lang="zh"] .facts dd{ font-family:inherit; font-weight:600 }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:.5rem }
.contact-card{ background:var(--card); border:1px solid var(--line); border-radius:3px; padding:1.9rem }
.contact-card .eyebrow{ margin-bottom:.7rem }
.contact-card p{ font-size:1.02rem; color:var(--text) }
.contact-card a{ font-weight:600 }

/* ---------- legal pages ---------- */
.legal{ padding:var(--sp) 0 }
.legal .wrap{ max-width:820px }
.legal h2{
  font-size:1.3rem; margin:2.5rem 0 .9rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.legal h2:first-of-type{ border-top:0; padding-top:0; margin-top:0 }
.legal h3{ font-size:1.06rem; margin:1.5rem 0 .5rem }
.legal p{ color:var(--text); font-size:1.02rem }
.legal ul{ margin:0 0 1.1rem 1.1rem }
.legal li{ margin:.35rem 0; padding-left:.3rem }
.legal .lead-block{
  background:var(--paper-2); border:1px solid var(--line); border-radius:3px;
  padding:1.5rem 1.7rem; margin-bottom:2.4rem; font-size:.97rem; color:var(--soft);
}
.legal .lead-block strong{ color:var(--ink) }

/* ---------- closing CTA ---------- */
.cta{ background:var(--ink); color:#D9D2C2 }
.cta .wrap{ padding:var(--sp) var(--pad); text-align:center }
.cta h2{ color:#FCFAF4; font-size:clamp(1.7rem,3vw,2.3rem); max-width:620px; margin:0 auto }
.cta p{ max-width:540px; margin:1rem auto 0; color:#B7BECB }
.cta .btn-row{ justify-content:center }
.cta .cta-line{ margin-top:1.7rem; font-size:.9rem; color:#9AA2AF }

/* ---------- footer ---------- */
.site-foot{ background:var(--ink-2); color:#AEB6C2; font-size:.92rem }
.foot-top{ padding:clamp(3rem,6vw,4.5rem) 0 2.6rem; border-bottom:1px solid rgba(255,255,255,.1) }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:2.2rem }
.foot-brand b{ font-family:"Lora",Georgia,serif; color:#FCFAF4; font-size:1.3rem; letter-spacing:.03em; display:block }
.foot-brand .tag{ font-family:"Lora",Georgia,serif; font-style:italic; color:var(--accent-lt); margin-top:.5rem }
html[lang="zh"] .foot-brand .tag{ font-family:"Lora",Georgia,serif }
.foot-brand p{ margin-top:.8rem; color:#9AA2AF; font-size:.9rem; max-width:280px }
.foot-col h4{ color:#FCFAF4; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:1rem }
.foot-col a{ display:block; color:#AEB6C2; padding:.27rem 0; font-size:.92rem }
.foot-col a:hover{ color:#fff }
.foot-col address{ font-style:normal; color:#AEB6C2; line-height:1.85 }
.foot-col address a{ display:inline }
.foot-bottom{ padding:1.4rem 0 2rem }
.foot-bottom .wrap{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between }
.foot-bottom p{ margin:0; color:#838C9A; font-size:.83rem }

/* ---------- responsive ---------- */
@media(max-width:880px){
  .menu-btn{ display:block }
  .nav-right{
    position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    gap:0; background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1.4rem; display:none;
  }
  .nav-right.open{ display:flex }
  nav.main{ flex-direction:column; align-items:stretch; gap:0 }
  nav.main a{ padding:.85rem 0; border-bottom:1px solid var(--line-2) }
  nav.main a.active::after{ display:none }
  .lang{ border-left:0; padding-left:0; padding-top:1rem }
  .feature{ grid-template-columns:1fr; gap:.6rem }
  .feature .flabel{ padding-top:0 }
  .grid-2,.grid-3,.contact-grid{ grid-template-columns:1fr }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:2rem }
}
@media(max-width:560px){
  body{ font-size:16.5px }
  .foot-grid{ grid-template-columns:1fr }
  .btn{ width:100%; text-align:center }
  .brand i{ display:none }
}