/* AUSUN Finance landing — DESIGN.md token contract (single source: :root) */
:root{
  --gold:#E5AA56; --gold-hover:#C8923F;
  --ink:#3F3F3F; --body:#635D5A; --muted:#6E6862; --gold-text:#96601A; --btn-ink:#241E16;
  --bg:#FFFFFF; --cream:#FAF6EF; --cream-2:#F3EDE2; --line:#EAE3D6;
  --dark:#37332F; --on-dark:#FAF6EF;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:40px; --s7:64px; --s8:96px;
  --section-y:96px; --gutter:24px; --container:1180px;
  --r-sm:6px; --r-md:12px; --r-lg:20px; --pill:40px;
  --ring:0 0 0 1px var(--line); --raise:0 14px 34px rgba(63,63,63,.10);
  --fast:150ms; --ease:cubic-bezier(0.2,0,0,1);
}
@media (max-width:1199px){ :root{ --section-y:64px; } }
@media (max-width:767px){ :root{ --section-y:52px; --gutter:16px; } }

html[data-theme="dark"]{
  --ink:#F5EFE5; --body:#D6CEC3; --muted:#BDB4A8; --gold-text:#EBBA6E;
  --bg:#17140F; --cream:#1F1B15; --cream-2:#2A241C; --line:#3A332A;
  --dark:#1F1B15; --on-dark:#F5EFE5;
  --gold-hover:#EBBA6E;
  --ring:0 0 0 1px var(--line); --raise:0 14px 34px rgba(0,0,0,.42);
  color-scheme:dark;
}
html[data-theme="dark"] body{ background:var(--bg); color:var(--body); }
html[data-theme="dark"] .tgl--on{ background:var(--cream-2); box-shadow:none; }
html[data-theme="dark"] .lang-switch{ background:var(--cream-2); }
html[data-theme="dark"] .hero-art::before{ background:var(--cream); }
html[data-theme="dark"] .wall-item--logo img{ background:#FFFFFF; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem; line-height:1.65;
}
html[lang^="zh"] body{ font-family:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--gold),0 0 0 5px rgba(229,170,86,.25); border-radius:var(--r-sm); }

.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

h1,h2,h3{ color:var(--ink); font-family:"Fraunces",Georgia,"Songti SC","Noto Serif CJK SC",serif; margin:0 0 var(--s4); }
h1{ font-size:clamp(2.6rem,4.6vw + .8rem,4.2rem); font-weight:700; line-height:1.06; letter-spacing:-.018em; text-wrap:balance; }
h2{ font-size:clamp(1.7rem,2.2vw + .8rem,2.4rem); font-weight:600; line-height:1.14; text-wrap:balance; }
h3{ font-size:1.1rem; font-family:"Inter","PingFang SC",sans-serif; font-weight:600; }
p{ margin:0 0 var(--s4); max-width:78ch; }
.stack-lg{ margin-top:var(--s7); }
.gap-lg{ margin-bottom:var(--s6); }
.lead{ font-size:1.22rem; line-height:1.55; color:var(--ink); max-width:64ch; }
.eyebrow{ font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text); margin:0 0 var(--s3); }
html[lang^="zh"] .eyebrow{ letter-spacing:.05em; }

/* ------- header: single row ------- */
.site-header{ background:var(--bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.header-in{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center; gap:clamp(16px,2vw,32px); min-height:86px; }
.brand{ display:flex; align-items:center; gap:var(--s3); min-width:0; justify-self:start; }
.brand__logo{ height:42px; width:auto; }
.brand__mark{ font-family:"Fraunces",Georgia,"Songti SC",serif; font-weight:700; font-size:1.3rem; color:var(--ink); letter-spacing:-.01em; }
.brand__tag{ display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  font-size:.7rem; line-height:1.32; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border-left:1px solid var(--line); padding-left:var(--s3); white-space:nowrap; }
.brand__tag span{ display:block; }
.main-nav{ justify-self:center; }
/* four equal fixed slots: item geometry is byte-identical in en / zh-cn / zh-hk,
   so nothing shifts sideways when the language changes. */
.main-nav ul{ list-style:none; display:grid; grid-template-columns:repeat(4,7rem); margin:0; padding:0; }
.main-nav a{ font-size:.94rem; font-weight:500; letter-spacing:.004em; text-align:center;
  color:var(--ink); padding:30px 0 28px; border-bottom:3px solid transparent; display:block;
  white-space:nowrap; transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease); }
.main-nav a:hover{ color:var(--gold-text); border-bottom-color:var(--cream-2); }
.main-nav a[aria-current="page"]{ color:var(--ink); font-weight:600; border-bottom-color:var(--gold); }
.main-nav a:focus-visible{ border-bottom-color:var(--gold); }
.header-actions{ display:inline-flex; align-items:center; gap:10px; justify-self:end; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 14px; font:inherit; color:var(--ink); cursor:pointer; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--gold); color:var(--ink);
  border-radius:var(--pill); padding:12px 24px; font-weight:600; font-size:.95rem; line-height:1.2; min-height:44px;
  transition:background var(--fast) var(--ease); }
.btn:hover{ background:var(--gold-hover); }
.btn--sm{ padding:8px 16px; min-height:36px; font-size:.85rem; }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.btn--ghost:hover{ background:var(--cream); }
.btn--on-dark{ background:var(--gold); color:var(--dark); }
.btn--line-dark{ background:transparent; color:var(--on-dark); box-shadow:inset 0 0 0 1px rgba(250,246,239,.45); }
.btn--line-dark:hover{ background:rgba(250,246,239,.1); color:var(--on-dark); }

.tgl{ font:inherit; font-size:.74rem; font-weight:500; letter-spacing:.04em; color:var(--muted); background:transparent; border:0; border-radius:var(--pill); padding:6px 11px; white-space:nowrap; cursor:pointer; }
.tgl:hover{ color:var(--ink); }
.tgl--on{ background:var(--bg); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(63,63,63,.12); }
.tgl--tel{ border:1px solid var(--line); padding:7px 13px; font-size:.8rem; color:var(--ink); font-weight:500; }
.tgl--tel:hover{ border-color:var(--gold); }

/* language switch lives inside the header actions row */
.lang-switch{ display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:var(--pill); background:var(--cream); }

/* theme toggle: one button, sun in light mode / moon in dark mode */
.theme-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid var(--line); border-radius:var(--pill); background:var(--bg); color:var(--ink); cursor:pointer;
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease); }
.theme-btn:hover{ border-color:var(--gold); background:var(--cream); }
.theme-btn svg{ display:block; width:20px; height:20px; }
.theme-btn .moon{ display:none; }
html[data-theme="dark"] .theme-btn svg{ display:none; }
html[data-theme="dark"] .theme-btn .moon{ display:block; }

/* ------- hero ------- */
.hero{ padding-block:var(--section-y) calc(var(--section-y) - 24px); }
.hero-in{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:var(--s7); align-items:center; }
.hero h1{ margin-bottom:var(--s4); }
.hero .lead{ margin-bottom:var(--s5); }
.hero-art{ position:relative; }
.hero-art::before{ content:""; position:absolute; inset:14px -14px -14px 14px; background:var(--cream); border-radius:var(--r-lg); z-index:0; }
.hero-art img{ position:relative; z-index:1; border-radius:var(--r-lg); box-shadow:var(--raise); width:100%; aspect-ratio:20/9; object-fit:cover; }
.hero-art--portrait img{ aspect-ratio:10/11; object-position:center 18%; }
.cta-row{ display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center; }
.stars{ color:var(--gold-text); letter-spacing:.06em; }

/* ------- stats ------- */
.stats{ background:var(--cream); border-block:1px solid var(--line); }
.stats-in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--s5); padding-block:var(--s6); }
.stat__num{ display:block; font-family:"Fraunces",Georgia,"Songti SC",serif; font-weight:700; font-size:clamp(1.9rem,3vw,2.5rem); color:var(--ink); line-height:1.05; }
.stat__lab{ display:block; margin-top:var(--s1); font-size:.85rem; color:var(--muted); }

/* ------- logo strip ------- */
.logos{ padding-block:var(--s5); }
.logos-in{ display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); align-items:center; justify-content:space-between; }
.logo{ font-weight:600; font-size:.9rem; letter-spacing:.02em; color:var(--muted); }

/* ------- sections ------- */
.sec{ padding-block:var(--section-y); }
.sec--cream{ background:var(--cream); }
.sec-head{ margin-bottom:var(--s6); max-width:70ch; }
.two-col{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:var(--s6); align-items:start; }
.prose p{ max-width:78ch; }
.prose h2{ margin-top:var(--s6); }
.prose h3{ margin-top:var(--s5); }
.prose ul{ padding-left:1.15rem; margin:0 0 var(--s4); max-width:78ch; }
.prose li{ margin-bottom:var(--s2); }
.side img{ border-radius:var(--r-md); box-shadow:var(--ring); width:100%; object-fit:cover; }
.side--portrait img{ aspect-ratio:10/11; object-position:center 18%; }
.band{ border-radius:var(--r-md); box-shadow:var(--ring); width:100%; margin:var(--s6) 0 0; height:auto; }

/* photo wall */
.wall-item{ margin:0; }
.wall-item img{ display:block; width:100%; height:auto; border-radius:var(--r-md); box-shadow:var(--ring); background:var(--surface-2); }
.wall-item figcaption{ font-size:.8rem; letter-spacing:.06em; color:var(--muted); padding-top:var(--s2); }
.wall-item--logo img{ background:#fff; }

.grid{ display:grid; gap:var(--s5); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
/* pages whose last block is a grid or a bare prose column sit directly above the dark
   footer; without this the content butts flush against it (measured gaps 0–16px). */
main > .grid:last-child, main > .prose:last-child{ padding-bottom:calc(var(--section-y) / 2); }
/* four client quotes on one row (home page Recognition) */
.grid-rev{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

.card{ display:flex; flex-direction:column; gap:var(--s2); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease); }
.card:hover{ transform:translateY(-3px); box-shadow:var(--raise); }
.card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.card__body{ display:flex; flex-direction:column; gap:var(--s2); padding:var(--s5) var(--s5) var(--s6); flex:1 1 auto; }
.card h3{ margin:0; font-size:1.02rem; letter-spacing:-.005em; }
.card p{ margin:0; font-size:.93rem; line-height:1.62; }
.card .more-in{ margin-top:auto; padding-top:var(--s4); color:var(--gold-text); font-weight:600; font-size:.85rem; letter-spacing:.01em; }

.why-item{ background:var(--bg); border-radius:var(--r-md); padding:var(--s5); box-shadow:var(--ring); }
.why-item h3{ margin-bottom:var(--s2); }
.why-item p{ margin:0; font-size:.93rem; }

.val{ display:grid; grid-template-columns:2.4rem minmax(0,1fr); column-gap:var(--s4); row-gap:3px;
  align-content:start; border-top:1px solid var(--line); padding-top:var(--s4); }
.prose .val + .val{ margin-top:var(--s5); }
.val__no{ grid-column:1; grid-row:1 / span 2; align-self:start; font-family:"Fraunces",Georgia,serif;
  font-weight:700; font-size:1.1rem; line-height:1.35; color:var(--gold-text); }
.val h3{ grid-column:2; grid-row:1; margin:0; font-family:"Fraunces",Georgia,"Songti SC",serif; font-size:1.16rem; }
.val p{ grid-column:2; grid-row:2; margin:0; font-size:.93rem; line-height:1.6; }

/* team */
.team-list{ list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--s3) var(--s5); }
.tm{ display:flex; flex-direction:column; padding-bottom:var(--s2); border-bottom:1px solid var(--line); }
.tm strong{ color:var(--ink); font-weight:600; }
.tm span{ font-size:.83rem; color:var(--muted); }

/* enquiry form + inline more links */
.fld{ font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; min-height:44px; width:min(100%,380px); }
.fld:focus-visible{ border-color:var(--gold); }
.more{ margin-top:var(--s4); }
.more a{ color:var(--gold-text); font-weight:600; font-size:.93rem; }
.more a:hover{ color:var(--ink); }
.tm strong{ color:var(--ink); font-weight:600; }
.tm span{ font-size:.83rem; color:var(--muted); }

/* awards chips */
.badge-wall{ list-style:none; margin:var(--s5) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s2); }
.badge-wall li{ border:1px solid var(--line); border-radius:var(--pill); padding:7px 16px; font-size:.82rem; color:var(--ink); background:var(--bg); }

/* reviews */
.rev{ margin:0; padding:var(--s5); background:var(--bg); border-radius:var(--r-md); box-shadow:var(--ring); display:flex; flex-direction:column; gap:var(--s3); }
.rev blockquote{ margin:0; }
.rev p{ margin:0; color:var(--ink); font-size:1rem; }
.rev figcaption{ display:grid; gap:5px; font-size:.85rem; }
.rev figcaption .stars{ color:var(--gold-text); letter-spacing:.06em; }
.rev-who{ color:var(--gold-text); font-weight:600; }
.rev-via{ color:var(--muted); font-weight:400; }

/* insights */
.post-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s4); }
.post a{ display:grid; gap:var(--s1); padding-bottom:var(--s4); border-bottom:1px solid var(--line); }
.post a:hover strong{ color:var(--gold-text); }
.post strong{ color:var(--ink); font-weight:600; }
.post .date{ font-size:.8rem; color:var(--muted); }
.post p{ margin:0; color:var(--muted); font-size:.92rem; }

/* faq */
.faq-list details{ border-bottom:1px solid var(--line); padding-block:var(--s4); }
.faq-list summary{ cursor:pointer; font-weight:600; color:var(--ink); display:flex; gap:var(--s3); align-items:baseline; list-style:none; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; margin-left:auto; color:var(--gold-text); font-weight:700; }
.faq-list details[open] summary::after{ content:"\2212"; }
.faq-list details p{ margin:var(--s3) 0 0; }

/* cta band */
.ctaband{ background:var(--dark); color:var(--on-dark); padding-block:var(--section-y); }
.ctaband-in{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s6); align-items:center; }
.ctaband h2{ color:var(--on-dark); margin-bottom:var(--s2); }
.ctaband p{ color:rgba(250,246,239,.88); margin:0; }

/* inner pages */
main > .page-head, main > .inner-cols, main > .grid, main > .prose{ max-width:calc(var(--container) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.page-head{ padding-block:var(--s6) var(--s5); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:var(--s6); align-items:center; }
.page-head .side img{ aspect-ratio:16/9; }
.crumbs{ font-size:.8rem; color:var(--muted); padding-block:var(--s3) 0; }
.crumbs a:hover{ color:var(--gold-text); }
.loc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--s5); }
.loc-grid .card span.more-in{ margin-top:0; }
.help-list li{ margin-bottom:var(--s3); }

/* contact: office details + map */
.office{ display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:var(--s2) var(--s4); margin:0 0 var(--s5); }
.office dt{ color:var(--muted); font-size:.88rem; }
.office dd{ margin:0; color:var(--ink); }
.map{ display:block; width:100%; height:350px; border:0; border-radius:var(--r-md); box-shadow:var(--ring); margin-bottom:var(--s4); }
.help-list strong{ color:var(--ink); }

/* rail */
.inner-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,280px); gap:var(--s6); padding-bottom:var(--section-y); align-items:start; }
.rail{ position:sticky; top:96px; display:grid; gap:var(--s6); }
.rail h2{ font-size:.78rem; font-family:"Inter",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text); padding-bottom:var(--s3); border-bottom:1px solid var(--line); margin:0 0 var(--s3); }
html[lang^="zh"] .rail h2.rail-cta__t{ letter-spacing:.05em; }
.rail ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.rail a{ font-size:.92rem; color:var(--body); }
.rail a:hover{ color:var(--gold-text); }
.rail a[aria-current="page"]{ color:var(--gold-text); font-weight:600; }
.rail-cta p{ font-size:.9rem; margin-bottom:var(--s3); }
.rail-tel{ font-size:.88rem; color:var(--muted); }

/* footer */
.site-footer{ background:var(--dark); color:rgba(250,246,239,.78); padding-block:var(--s6) var(--s6); }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) repeat(auto-fit,minmax(150px,1fr)); gap:var(--s6) var(--s5); }
@media (min-width:1000px){
  /* explicit tracks: Services needs real width so no label wraps, and Location +
     Contact share the last column so every column ends at a similar depth. */
  .footer-grid{ grid-template-columns:minmax(190px,1.25fr) minmax(96px,.7fr) minmax(360px,2.5fr) minmax(210px,1.35fr);
    gap:var(--s6) var(--s6); }
  .footer-col--svc ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px var(--s6); }
}
.footer-logo{ height:40px; width:auto; margin-bottom:var(--s4); }
.footer-brand p{ font-size:.9rem; line-height:1.6; color:rgba(250,246,239,.78); max-width:32ch; }
.site-footer h3{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(250,246,239,.72);
  margin:0 0 var(--s4); padding-bottom:var(--s2); border-bottom:1px solid rgba(250,246,239,.14); }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.site-footer a{ color:var(--on-dark); font-size:.92rem; line-height:1.5; }
.site-footer a:hover{ color:var(--gold); }
.site-footer .li-sub{ display:block; font-size:.88rem; line-height:1.5; color:rgba(250,246,239,.68); max-width:24ch; }
.footer-loc{ margin-bottom:0; }
.footer-loc .office-name a{ font-weight:600; }
.footer-copy{ margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid rgba(250,246,239,.18); font-size:.83rem; line-height:1.6; color:rgba(250,246,239,.74); }

/* responsive */
@media (max-width:1099px){ .brand__tag{ display:none; } }
@media (max-width:1129px){ .header-actions{ margin-left:var(--s2); } }
@media (max-width:999px){
  .hero-in,.two-col,.page-head,.inner-cols,.ctaband-in{ grid-template-columns:minmax(0,1fr); }
  .hero-art::before{ display:none; }
  .rail{ position:static; }
  .header-in{ display:flex; flex-wrap:wrap; min-height:64px; gap:var(--s2); padding-block:var(--s3); }
  .brand__logo{ height:36px; }
  .brand__tag{ display:block; }
  .nav-toggle{ display:inline-block; order:2; margin-left:auto; }
  .main-nav{ order:3; width:100%; justify-self:stretch; }
  .main-nav ul{ display:none; flex-wrap:wrap; grid-template-columns:none; gap:var(--s4); padding-block:var(--s3); }
  .main-nav.main-nav--open ul{ display:flex; }
  .main-nav a{ padding:6px 0; text-align:left; }
  .header-actions{ order:4; width:100%; justify-content:flex-start; flex-wrap:wrap;
    padding-top:var(--s3); border-top:1px solid var(--line); }
}
@media (max-width:767px){
  h1{ font-size:clamp(2rem,8vw,2.6rem); }
  .stats-in{ gap:var(--s4); padding-block:var(--s5); }
  .hero-art img{ aspect-ratio:16/9; }
  .brand__tag{ display:none; }
  .btn--sm{ padding:8px 14px; }
}

/* ------- button text contract (must win over contextual link colours) ------- */
a.btn, button.btn, .btn{ color:var(--btn-ink); }
a.btn--ghost, button.btn--ghost{ color:var(--ink); }
a.btn--line-dark{ color:var(--on-dark); }
a.btn--ghost:hover{ color:var(--ink); }
a.btn--line-dark:hover{ color:var(--on-dark); }