/* ============================================================
   AMO chrome.css — header / footer / mobile drawer / back-to-top
   Light & cheerful. Brand colors from official logo.
   Only chrome styles here (no page-content styles). No section-sign markers.
   ============================================================ */
:root{
  --amo-navy:#1B2A3C; --amo-orange:#E8731C; --amo-orange-dk:#CC5F12;
  --amo-teal:#1E9BB8; --amo-red:#E25744; --amo-purple:#8A45A0;
  --amo-ink:#1B2A3C; --amo-body:#4E4842; --amo-muted:#8A8077;
  --amo-bg:#FFFCF8; --amo-surface:#FFFFFF; --amo-border:#EFE7DC; --amo-foot:#FBF6EF;
  --amo-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --amo-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Microsoft YaHei',sans-serif;
  --amo-header-h:70px;
}

/* content clears the fixed header */
html,body{ overflow-x:hidden; max-width:100%; }
body{ padding-top:var(--amo-header-h); background:var(--amo-bg); }
html.amo-noscroll{ overflow:hidden; }

/* ---------- HEADER ---------- */
.amo-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(255,252,248,.92); backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--amo-border); box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.amo-header-inner{
  max-width:1280px; margin:0 auto; padding:0 clamp(16px,4vw,40px);
  height:var(--amo-header-h); display:flex; align-items:center; gap:24px;
}
.amo-brand{ display:flex; flex-direction:row; align-items:center; gap:11px; text-decoration:none; line-height:1; flex:none; }
.amo-brand-mark{ width:44px; height:44px; display:block; object-fit:contain; flex:none; }
.amo-brand-tx{ display:flex; flex-direction:column; line-height:1; gap:4px; }
.amo-brand-name{ font-family:var(--amo-serif); font-weight:800; font-size:23px; color:var(--amo-navy); letter-spacing:-.01em; }
.amo-brand-full{ font-family:var(--amo-sans); font-size:8.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--amo-muted); }
.amo-drawer-brand{ display:flex; align-items:center; gap:9px; }
.amo-drawer-brand img{ width:32px; height:32px; object-fit:contain; }
@media (max-width:768px){ .amo-brand-mark{ width:38px; height:38px; } .amo-brand-name{ font-size:21px; } }

/* Option B · pill nav group: links live inside a soft rounded container */
.amo-nav-desktop{
  margin-left:auto; display:flex; align-items:center; gap:4px;
  background:#F4ECE0; border:1px solid var(--amo-border); border-radius:999px; padding:5px;
}
.amo-nav-desktop a{
  font-family:var(--amo-sans); font-size:13.5px; font-weight:600; color:var(--amo-navy);
  text-decoration:none; opacity:.85; white-space:nowrap;
  padding:8px 15px; border-radius:999px; transition:background .15s,color .15s,opacity .15s;
}
.amo-nav-desktop a:hover{ opacity:1; background:rgba(255,255,255,.75); }
.amo-nav-desktop a[aria-current="page"], .amo-nav-desktop a.is-current{
  opacity:1; color:#fff; background:var(--amo-orange); box-shadow:0 3px 8px rgba(232,115,28,.3);
}

.amo-header-right{ display:flex; align-items:center; gap:14px; }
/* Option B · CTA = outlined pill */
.amo-cta{
  font-family:var(--amo-sans); font-size:13px; font-weight:700; color:var(--amo-orange) !important;
  background:#fff; border:1.6px solid var(--amo-orange); padding:9px 17px; border-radius:999px; text-decoration:none;
  transition:background .15s,color .15s,transform .1s; white-space:nowrap;
}
.amo-cta:hover{ background:var(--amo-orange); color:#fff !important; }
.amo-cta:active{ transform:translateY(1px); }
/* drawer CTA stays solid orange for prominence on mobile */
.amo-drawer-cta{ background:var(--amo-orange) !important; color:#fff !important; border-color:var(--amo-orange) !important; }

/* hamburger */
.amo-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.amo-burger span{ display:block; width:24px; height:2.5px; background:var(--amo-navy); border-radius:2px; }

/* drawer — display:none when closed so an off-screen fixed element can't extend the
   scrollable area on mobile (the cause of the extra half-screen of blank scroll). */
.amo-drawer{
  display:none;
  position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(86vw,320px); background:var(--amo-surface);
  box-shadow:-12px 0 36px rgba(0,0,0,.18); transform:translateX(100%); transition:transform .3s ease;
  z-index:70; padding:18px 20px; overflow-y:auto;
}
.amo-drawer.amo-open{ display:block; transform:translateX(0); }
.amo-drawer-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.amo-drawer-top .amo-brand-name{ font-size:22px; }
.amo-drawer-close{ background:none; border:none; font-size:30px; line-height:1; color:var(--amo-navy); cursor:pointer; padding:0 4px; }
.amo-drawer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.amo-drawer ul li a, .amo-drawer-nav a{
  display:block; font-family:var(--amo-sans); font-size:15px; font-weight:600; color:var(--amo-navy); text-decoration:none;
  padding:13px 2px; border-bottom:1px solid var(--amo-border);
}
.amo-drawer ul li a:hover{ color:var(--amo-orange); }
.amo-drawer-cta{ display:block; text-align:center; margin-top:18px; }
.amo-drawer-scrim{
  position:fixed; inset:0; background:rgba(27,42,60,.42); z-index:69;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
html.amo-noscroll .amo-drawer-scrim{ opacity:1; pointer-events:auto; }

/* ---------- FOOTER (light, redesigned) ---------- */
.amo-footer{ background:var(--amo-foot); border-top:3px solid var(--amo-orange); margin-top:0; }

/* top CTA strip */
.amo-foot-cta{ border-bottom:1px solid var(--amo-border); }
.amo-foot-cta-in{
  max-width:1180px; margin:0 auto; padding:24px clamp(16px,4vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.amo-foot-cta-tx{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 180px; }
.amo-foot-cta-k{ font-family:var(--amo-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--amo-orange); }
.amo-foot-cta-h{ font-family:var(--amo-serif); font-weight:700; font-size:clamp(18px,2vw,22px); color:var(--amo-ink); word-break:break-word; }
.amo-foot-cta-btn{
  font-family:var(--amo-sans); font-size:13.5px; font-weight:700; color:#fff !important;
  background:var(--amo-orange); padding:12px 22px; border-radius:999px; text-decoration:none;
  box-shadow:0 5px 14px rgba(232,115,28,.28); transition:background .15s; flex-shrink:0;
}
.amo-foot-cta-btn:hover{ background:var(--amo-orange-dk); }

/* main grid */
.amo-footer-inner{
  max-width:1180px; margin:0 auto; padding:clamp(34px,4.5vw,52px) clamp(16px,4vw,40px) 30px;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:clamp(24px,3vw,44px);
}
.amo-foot-h{ font-family:var(--amo-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--amo-navy); margin:0 0 16px; }

/* brand zone */
.amo-foot-logo{ display:flex; flex-direction:row; align-items:center; gap:11px; line-height:1; text-decoration:none; margin-bottom:14px; }
.amo-foot-logo-mark{ width:40px; height:40px; object-fit:contain; flex:none; }
.amo-foot-logo-tx{ display:flex; flex-direction:column; gap:5px; }
.amo-foot-logo-name{ font-family:var(--amo-serif); font-weight:800; font-size:23px; color:var(--amo-navy); letter-spacing:-.01em; }
.amo-foot-logo-full{ font-family:var(--amo-sans); font-size:8.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--amo-muted); }
.amo-foot-tag{ font-family:var(--amo-sans); font-size:13.5px; line-height:1.6; color:var(--amo-body); margin:0 0 12px; max-width:38ch; }
.amo-foot-disc{ font-family:var(--amo-sans); font-size:12px; line-height:1.6; color:var(--amo-muted); margin:0; max-width:40ch; }

/* nav lists */
.amo-foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.amo-foot-col ul li a{ font-family:var(--amo-sans); font-size:13.5px; color:#6b6259; text-decoration:none; transition:color .15s; }
.amo-foot-col ul li a:hover{ color:var(--amo-orange); }

/* connect / QR — dual (WhatsApp + WeChat) */
.amo-foot-qrcard{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.amo-foot-qrpair{ display:flex; gap:16px; }
.amo-foot-qrcell{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.amo-foot-qrcell .amo-foot-qrtext{ font-size:11.5px; font-weight:700; color:var(--amo-navy); }
.amo-foot-qrcell2:not(:has(img)){ display:none; }
.amo-foot-qrbox{
  position:relative; width:104px; height:104px; background:#fff;
  border:1px solid var(--amo-border); border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.amo-foot-qrbox .amo-foot-qr, .amo-foot-qrbox img{ position:relative; z-index:2; width:100%; height:100%; border-radius:14px; object-fit:cover; background:#fff; display:block; }
.amo-foot-qr-ph{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:#bcae98; font-family:var(--amo-sans); font-size:11px; font-weight:600; text-align:center;
}
.amo-foot-qrbox:has(img) .amo-foot-qr-ph{ display:none; }
.amo-foot-qrtext{ font-family:var(--amo-sans); font-size:12.5px; color:#6b6259; margin:0; }

/* bottom bar */
.amo-foot-bar{
  max-width:1180px; margin:0 auto; padding:16px clamp(16px,4vw,40px) 24px;
  border-top:1px solid var(--amo-border);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-family:var(--amo-sans); font-size:12px; color:var(--amo-muted);
}
.amo-foot-bar a{ color:var(--amo-muted); text-decoration:none; }
.amo-foot-bar a:hover{ color:var(--amo-orange); }
.amo-foot-beian{ color:var(--amo-muted); }
.amo-foot-sep{ color:#cfc6b8; }

/* ---------- BACK TO TOP ---------- */
.amo-to-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:var(--amo-orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(232,115,28,.36);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s, transform .25s, visibility .25s, background .15s;
}
.amo-to-top:hover{ background:var(--amo-orange-dk); }
.amo-to-top.amo-visible{ opacity:1; visibility:visible; transform:translateY(0); }
@media (max-width:768px){ .amo-to-top{ right:16px; bottom:16px; width:42px; height:42px; } }

/* ---------- RESPONSIVE ---------- */
@media (min-width:769px){
  .amo-burger, .amo-drawer, .amo-drawer-scrim{ display:none; }
  .amo-nav-desktop{ display:flex; align-items:center; gap:4px; }
}
@media (max-width:768px){
  :root{ --amo-header-h:60px; }
  /* ① tighter edge padding so logo/burger sit closer to the screen edges */
  .amo-header-inner{ padding:0 16px; gap:12px; }
  .amo-nav-desktop{ display:none; }
  .amo-header-right{ margin-left:auto; gap:0; }      /* ② push the right group (burger) to the far right */
  .amo-header-right .amo-cta{ display:none; }
  .amo-burger{ display:flex; margin-left:0; padding:8px; margin-right:-8px; } /* optical-align burger to edge */
  .amo-foot-bar{ justify-content:flex-start; }
  /* footer top CTA strip: stack tightly; tx must NOT stretch vertically (fixes big gap) */
  .amo-foot-cta-in{ flex-direction:column; align-items:stretch; gap:12px; padding-left:20px; padding-right:20px; }
  .amo-foot-cta-tx{ flex:0 0 auto; gap:4px; }
  .amo-foot-cta-h{ font-size:19px; line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
  .amo-foot-cta-btn{ width:100%; box-sizing:border-box; text-align:center; white-space:normal; }
}
/* ③ footer mobile re-layout: brand (full) / Explore | Information (2 cols) / Connect (full) */
@media (max-width:880px){
  .amo-footer-inner{ grid-template-columns:1fr 1fr; row-gap:28px; column-gap:24px; padding-left:20px; padding-right:20px; }
  .amo-foot-brand{ grid-column:1 / -1; }
  .amo-foot-connect{ grid-column:1 / -1; }
}
/* keep Explore + Information side-by-side even on phones (do NOT collapse to 1 col) */
@media (max-width:560px){
  .amo-footer-inner{ grid-template-columns:1fr 1fr; row-gap:26px; column-gap:18px; }
  .amo-foot-tag{ max-width:none; }
  .amo-foot-disc{ max-width:none; }
  .amo-foot-bar{ font-size:11.5px; gap:8px; }
}