/* ==========================================================================
   Anchor Business Advisory Limited — design system
   Brand navy #2B2D53 sampled from the ABA monogram.
   Near-monochrome + one warm accent, in the manner of the established
   HK practices (Acclime, Hawksford) rather than the venture-funded
   platforms (Sleek, Osome).
   ========================================================================== */

:root {
  /* --- brand ---------------------------------------------------------- */
  --navy:        #2B2D53;   /* the monogram navy, exact */
  --navy-deep:   #1D1F3A;   /* darker panel */
  --navy-soft:   #4A4D78;
  --navy-pale:   #E8E9F0;

  --brass:       #856439;   /* single accent. Darkened from #8C6D3F: that only
                               reached 4.40:1 on --paper-warm, under AA for the
                               small uppercase eyebrow labels it is used for. */
  --brass-light: #B8935A;

  /* --- neutrals ------------------------------------------------------- */
  --paper:       #FCFCFD;
  --paper-warm:  #F5F5F2;   /* alternating band */
  --ink:         #16181F;
  --ink-soft:    #545A66;
  --ink-faint:   #8A909C;
  --rule:        #E2E4E9;

  /* --- type ----------------------------------------------------------- */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Songti TC", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "PingFang HK", "Hiragino Sans HK", "Microsoft JhengHei", sans-serif;

  --measure: 38rem;   /* comfortable reading width */
  --max:     73rem;   /* page gutter width */
  --max-narrow: 60rem;

  --step: clamp(1rem, 0.5rem + 1.2vw, 1.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #101219;
    --paper-warm: #161923;
    --ink:        #EDEEF2;
    --ink-soft:   #A5ABB8;
    --ink-faint:  #6E7482;
    --rule:       #262A36;
    --navy:       #A9AEE0;   /* lift for contrast on dark */
    --navy-deep:  #0B0C14;
    --navy-soft:  #8085B8;
    --navy-pale:  #1C1F2E;
    --brass:      #C9A46B;
    --brass-light:#D9BA8B;
  }
}

/* ==========================================================================
   reset + base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  /* No smooth scrolling: on a page this long a hijacked anchor jump is
     disorienting, and it makes deep links land unpredictably. */
  scroll-padding-top: 5rem;   /* clear the sticky masthead on anchor jumps */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff;
  padding: .75rem 1.25rem; z-index: 200;
  font-size: .9rem; font-weight: 600;
}
.skip:focus { left: 0; }

.wrap  { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--step); }
.narrow{ max-width: var(--max-narrow); }
.measure { max-width: var(--measure); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   typography scale
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.1vw, 2.7rem); }
h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); letter-spacing: -0.006em; }

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.1rem;
}

.lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 1.5rem 0 0;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.prose { max-width: var(--measure); }
.prose p { color: var(--ink-soft); }

/* ==========================================================================
   buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans);
  font-size: .95rem; font-weight: 550;
  padding: .82rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;                 /* square-ish: professional, not consumer-app */
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); }
@media (prefers-color-scheme: dark) {
  .btn-primary { background: var(--navy); color: #0F1118; }
  .btn-primary:hover { background: #C3C7EE; }
}

.btn-ghost { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }

.btn-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.32); }
.btn-light:hover { background: rgba(255,255,255,.2); }

.btn-arrow::after { content: "→"; font-size: 1.05em; line-height: 1; }

.btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* text link with rule */
.tlink {
  font-size: .92rem; font-weight: 550; color: var(--navy);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color .18s ease;
}
.tlink:hover { border-bottom-color: var(--navy); }
.tlink::after { content: " →"; }

/* ==========================================================================
   masthead
   ========================================================================== */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
@supports not (backdrop-filter: blur(1px)) {
  .masthead { background: var(--paper); }
}

.masthead-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .85rem;
}

.brand { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.brand-mark { width: 38px; height: 34px; color: var(--navy); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-en {
  font-family: var(--serif); font-size: 1.02rem; letter-spacing: -.008em;
  white-space: nowrap;
}
.brand-zh {
  font-size: .72rem; color: var(--ink-faint); letter-spacing: .04em;
  white-space: nowrap;
}
@media (max-width: 26rem) { .brand-en { font-size: .92rem; } }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  font-size: .93rem; font-weight: 500; color: var(--ink-soft);
  transition: color .16s ease;
}
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
/* `.nav a` (0-1-1) out-specifies `.btn-primary` (0-1-0), so without this the
   masthead CTA renders --ink-soft text on its navy fill. */
.nav .btn { font-size: .88rem; padding: .62rem 1.15rem; }
.nav a.btn-primary { color: #fff; }
@media (prefers-color-scheme: dark) { .nav a.btn-primary { color: #0F1118; } }

.nav-links { display: flex; gap: 1.75rem; }
@media (max-width: 56rem) {
  .nav-links { display: none; }
}

/* Landline in the masthead. Hidden on narrower desktops before the nav links
   are, because on a phone the mobile menu carries a tap-to-call row instead. */
.nav-tel {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: .01em;
}
.nav-tel:hover { color: var(--navy) !important; }
@media (max-width: 68rem) { .nav-tel { display: none; } }

/* mobile menu: pure CSS, no JS dependency.
   Both the toggle and the panel are hidden by default at every width — the
   media query is the only thing that may reveal them. */
.menu-toggle { display: none; }
.mobile-nav  { display: none; }
@media (max-width: 56rem) {
  /* The header CTA goes away here: the mobile panel already carries both
     "Get in touch" and a tap-to-call row, and at 375px the button crowds the
     firm name off the masthead. */
  .masthead .nav > .btn { display: none; }
  .brand-en { font-size: .95rem; }
  .masthead-in { gap: .75rem; }

  .menu-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    background: none; border: 1px solid var(--rule); border-radius: 2px;
    padding: .55rem .85rem; font: 500 .88rem var(--sans); color: var(--ink);
    cursor: pointer;
  }
  .mobile-nav {
    display: none; border-top: 1px solid var(--rule);
    padding: 1rem 0 1.5rem;
  }
  .mobile-nav a {
    display: block; padding: .7rem 0; font-size: 1rem;
    border-bottom: 1px solid var(--rule); color: var(--ink);
  }
  .mobile-nav a:last-of-type { border-bottom: 0; }
  #mnav:checked ~ .mobile-nav { display: block; }
}

/* ==========================================================================
   hero — a layered harbour scene

   Order, back to front: CSS plate (the fallback) · WebGL pass that draws the
   plate with drifting sky and moving water, and the land untouched · the
   legibility scrim · the text.

   The plate is set as a CSS background so the hero is correct before any
   script runs and stays correct if none ever does. data-time is written by
   hero.js from the visitor's clock; the day plate is the default in markup so
   the no-JS case is a bright, recognisable harbour rather than a dark one.
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(84vh, 46rem);
  display: grid; align-items: center;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero-scene {
  position: absolute; inset: 0; z-index: -3;
  background-image: url("/assets/img/hero/plate-day.jpg");
  background-size: cover;
  background-position: 50% 100%;      /* bottom-anchored: keeps the waterline put */
  background-repeat: no-repeat;
}
[data-time="night"] .hero-scene { background-image: url("/assets/img/hero/plate-night.jpg"); }

/* The canvas draws the same plate plus moving water. Hidden until its texture
   has decoded, so it never flashes as a black rectangle over a good photo. */
.hero-gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .5s ease;
}
.hero-gl.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-gl { transition: none; } }

/* Legibility scrim. Stronger on the day plate, which is much brighter. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(16,18,32,.90) 0%,
                                      rgba(16,18,32,.62) 46%,
                                      rgba(16,18,32,.26) 100%);
}
[data-time="night"] .hero::after {
  background: linear-gradient(100deg, rgba(10,11,22,.86) 0%,
                                      rgba(10,11,22,.52) 48%,
                                      rgba(10,11,22,.16) 100%);
}

.hero-in { padding-block: clamp(5rem, 12vh, 9rem); position: relative; }
.hero h1 { color: #fff; max-width: 24ch; }
.hero .eyebrow { color: var(--brass-light); }
.hero .lead { color: rgba(255,255,255,.82); }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .86rem; color: rgba(255,255,255,.74);
}
.hero-facts strong { color: #fff; font-weight: 600; }

/* ==========================================================================
   sections
   ========================================================================== */

section { padding-block: clamp(3.5rem, 8vh, 6.5rem); }
.band-warm { background: var(--paper-warm); }
.band-navy { background: var(--navy-deep); color: #fff; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy .lead, .band-navy p { color: rgba(255,255,255,.76); }
.band-navy .eyebrow { color: var(--brass-light); }
.band-rule { border-top: 1px solid var(--rule); }

.sec-head { max-width: var(--measure); margin-bottom: clamp(2.5rem, 5vh, 4rem); }

/* two-column: heading left, content right */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   value props
   ========================================================================== */

.props { display: grid; gap: 2.25rem 2.75rem; }
@media (min-width: 44rem) { .props { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.prop { padding-top: 1.25rem; border-top: 2px solid var(--navy); }
.band-navy .prop { border-top-color: var(--brass); }
.prop h3 { margin-bottom: .5rem; }
.prop p { color: var(--ink-soft); font-size: .97rem; margin: 0; }
.band-navy .prop p { color: rgba(255,255,255,.72); }

/* ==========================================================================
   services
   ========================================================================== */

.svc-groups { display: grid; gap: 2.5rem; }
@media (min-width: 50rem) { .svc-groups { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 74rem) { .svc-groups { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.svc-group {
  display: flex; flex-direction: column;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  transition: border-color .2s ease, transform .2s ease;
}
.band-warm .svc-group { background: var(--paper); }
.svc-group:hover { border-color: var(--navy-soft); }
@media (prefers-reduced-motion: no-preference) {
  .svc-group:hover { transform: translateY(-2px); }
}

.svc-group > .eyebrow { margin-bottom: .5rem; }
.svc-group h3 {
  font-size: 1.4rem; margin-bottom: .9rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--rule);
}
.svc-group p { font-size: .95rem; color: var(--ink-soft); }

.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li { border-bottom: 1px solid var(--rule); }
.svc-list li:last-child { border-bottom: 0; }
.svc-list a, .svc-list span {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .72rem 0; font-size: .96rem; color: var(--ink);
}
.svc-list a::after { content: "→"; color: var(--navy-soft); font-size: .9em; }
.svc-list a:hover { color: var(--navy); }
.svc-note { font-size: .82rem; color: var(--ink-faint); }

/* ==========================================================================
   process
   ========================================================================== */

.steps { counter-reset: s; display: grid; gap: 1px; background: var(--rule); }
.band-navy .steps { background: rgba(255,255,255,.16); }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.step {
  counter-increment: s;
  background: var(--paper); padding: 1.9rem 1.6rem;
}
.band-warm .step { background: var(--paper-warm); }
.band-navy .step { background: var(--navy-deep); }
.band-navy .step::before { color: var(--brass-light); }
/* Must out-specify `.step p`, which otherwise wins on source order and puts
   dark body copy on the dark band. */
.band-navy .steps .step p { color: rgba(255,255,255,.76); }
.step::before {
  content: counter(s, decimal-leading-zero);
  display: block; font-family: var(--serif); font-size: 1.9rem;
  color: var(--brass); line-height: 1; margin-bottom: 1rem;
}
.step h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.step p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* ==========================================================================
   figures
   ========================================================================== */

figure { margin: 0; }
.fig img { width: 100%; border-radius: 3px; }
.fig figcaption {
  margin-top: .7rem; font-size: .8rem; color: var(--ink-faint);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { max-width: var(--max-narrow); }
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 1rem;
  font-family: var(--sans); font-size: 1.4rem; color: var(--brass);
  line-height: 1; transition: transform .2s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 0 1.4rem; max-width: var(--measure); }
.faq .answer p { font-size: .97rem; color: var(--ink-soft); }

/* ==========================================================================
   contact
   ========================================================================== */

.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .contact-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.band-navy .contact-block .label { color: var(--brass-light); }
.contact-block .label {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 .7rem;
}
address { font-style: normal; line-height: 1.75; color: var(--ink-soft); }
.band-navy address { color: rgba(255,255,255,.76); }
.contact-block a { border-bottom: 1px solid currentColor; }

/* ==========================================================================
   footer
   ========================================================================== */

footer {
  background: var(--navy-deep); color: rgba(255,255,255,.68);
  padding-block: 3.5rem 2.5rem;
  font-size: .88rem;
}
footer a { color: rgba(255,255,255,.82); }
footer a:hover { color: #fff; }
footer address, footer p { color: rgba(255,255,255,.7); }

.foot-grid { display: grid; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.foot-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.foot-brand svg { width: 32px; height: 29px; color: #fff; }
.foot-brand .brand-en { color: #fff; font-size: .98rem; }

.foot-h {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin: 0 0 .9rem;
}
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { margin-bottom: .5rem; }

.foot-base {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  justify-content: space-between;
  padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem; color: rgba(255,255,255,.55);
}
.foot-base nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ==========================================================================
   long-form legal documents (terms, privacy)

   These pages are read, not scanned, so the measure is tighter than the rest
   of the site and the section headings are numbered — here the numbering is
   load-bearing, because clauses get cited by number.
   ========================================================================== */

.doc {
  max-width: var(--measure);
  padding-block: clamp(3rem, 7vh, 5rem);
}
.doc h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem); }
.doc .effective {
  /* the shorthand zeroes the bottom margin `.doc p` would otherwise give it,
     so state it explicitly or the date collides with the opening paragraph */
  margin: 1rem 0 2.25rem;
  font-size: .88rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.doc h2 {
  margin: 2.8rem 0 .9rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1.5;
}
.doc p, .doc li { color: var(--ink-soft); }
.doc p { margin: 0 0 1.05rem; }
.doc ul { padding-left: 1.25rem; margin: 0 0 1.05rem; }
.doc li { margin-bottom: .55rem; }
.doc li::marker { color: var(--brass); }
.doc address { margin-top: .5rem; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--navy); border-bottom: 1px solid var(--rule); }
.doc a:hover { border-bottom-color: var(--navy); }

/* a contents rail on wider screens: these documents are long */
.doc-toc {
  margin: 2.5rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--rule);
}
.doc-toc p {
  font-size: .72rem; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .8rem;
}
.doc-toc ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .35rem .5rem;
  font-size: .92rem;
  counter-reset: toc;
}
@media (min-width: 44rem) { .doc-toc ol { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.doc-toc a { color: var(--ink-soft); border: 0; }
.doc-toc a:hover { color: var(--navy); }

/* ==========================================================================
   scroll reveal

   Deliberately CSS-only, via a scroll-driven view() timeline. The default
   state is VISIBLE — the animation is the only thing that ever hides an
   element, and only in a browser that has already proven it can drive it to
   completion. No JS, no IntersectionObserver, and therefore no way for a
   script failure, a blocked observer or an aggressive privacy extension to
   leave real content stuck at opacity 0.

   Browsers without animation-timeline simply show the content. That is the
   correct outcome, not a degraded one.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}