/* ============================================================
   INTERMEDIATE ASIA — SHARED STYLESHEET
   Brand tokens carried over from the existing team page.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   FONTS — self-hosted
   Served from this origin rather than fonts.gstatic.com, so no
   visitor IP reaches a third party before they have consented
   to anything. Both families are SIL Open Font License 1.1;
   the licences travel with them in assets/fonts/.
   latin-ext only downloads if a character in that range is
   actually used, so the usual cost is the latin subsets alone.
   ════════════════════════════════════════════════════════════ */

/* DM Sans 400 — latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Sans 400 — latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans 500 — latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Sans 500 — latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans 600 — latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Sans 600 — latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans 700 — latin-ext */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Sans 700 — latin */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Serif Display 400 italic — latin-ext */
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Serif Display 400 italic — latin */
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Serif Display 400 — latin-ext */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Serif Display 400 — latin */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────────────────── */


:root {
  /* Brand */
  --color-primary:        #008080;
  --color-primary-hover:  #006666;
  --color-primary-soft:   rgba(0, 128, 128, 0.08);
  --color-primary-line:   rgba(0, 128, 128, 0.18);
  /* Lighter teal for accents on dark photography — #008080 goes muddy there. */
  --color-primary-light:  #4cb8ae;

  /* Neutrals */
  --color-dark:           #101828;
  --color-text:           #272626;
  --color-body:           #2e3443;
  --color-muted:          #5a6172;
  --color-bg-light:       #f6f7f9;
  --color-white:          #ffffff;
  --color-border:         #e8eaed;
  --color-card-border:    #d0d5dd;
  --color-footer-text:    #3a3a3a;

  /* Type */
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max-width:      1200px;
  --section-pad-v:  120px;
  --section-pad-h:  40px;

  /* Elevation — layered, colour-tinted */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.03),
               0 6px 18px rgba(16, 24, 40, 0.045);
  --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.04),
               0 16px 40px rgba(16, 24, 40, 0.065);
  --shadow-lg: 0 4px 14px rgba(16, 24, 40, 0.05),
               0 28px 64px rgba(16, 24, 40, 0.09);
  --shadow-teal: 0 2px 8px rgba(0, 128, 128, 0.14),
                 0 14px 32px rgba(0, 128, 128, 0.16);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:   cubic-bezier(0.40, 0, 0.20, 1);
  --ease-spring: cubic-bezier(0.34, 1.28, 0.64, 1);

  /* Fine grain, keeps large flat areas from banding */
  --grain: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.8%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%270.055%27/%3E%3C/svg%3E");
}

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

html { font-size: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65em;
  color: var(--color-text);
  background-color: var(--color-white);
  /* clip, not hidden: hidden would make body a scroll container and
     break position:sticky for every descendant. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Measured from the live site: DM Serif Display 400, line-height 1.1,
   letter-spacing normal. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: normal;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover, a:focus { color: var(--color-text); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--color-primary); color: #fff; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 5px;
  z-index: 999;
}
.skip-link:focus { left: 20px; color: #fff; }

/* ─── HEADER ──────────────────────────────────────────────── */
/* Every page uses the --overlay variant: the bar floats over the hero so
   the photograph runs edge to edge from the top of the viewport, then
   resolves to frosted white once the page scrolls. The plain .site-header
   below is the solid-bar fallback for any page without a hero image. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease-soft),
              box-shadow 0.5s var(--ease-soft),
              border-color 0.5s var(--ease-soft);
}

.site-header--overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
}

.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom-color: rgba(16, 24, 40, 0.07);
  box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px var(--section-pad-h);
  gap: 20px;
  transition: padding 0.5s var(--ease-soft);
}
.site-header.is-stuck .header-inner { padding-top: 11px; padding-bottom: 11px; }

.site-logo img {
  width: 62px;
  height: auto;
  display: block;
  border-radius: 5px;
  transition: width 0.5s var(--ease-soft), transform 0.5s var(--ease-spring);
}
.site-header.is-stuck .site-logo img { width: 50px; }
.site-logo:hover img { transform: translateY(-1px) scale(1.03); }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  flex: 1;
  justify-content: center;
}

/* Uppercase, wide-tracked, small — the label set is short so it reads as
   one clean line rather than a sentence. */
.primary-nav a {
  position: relative;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 17px;
  display: block;
  text-decoration: none;
  transition: color 0.35s var(--ease-soft);
}

.site-header--overlay .primary-nav a { color: rgba(255, 255, 255, 0.86); }
.site-header--overlay.is-stuck .primary-nav a { color: var(--color-text); }

.primary-nav a::after {
  content: '';
  position: absolute;
  left: 17px; right: 17px; bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.45s var(--ease-out);
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a.active { color: var(--color-primary); }
.site-header--overlay:not(.is-stuck) .primary-nav a:hover,
.site-header--overlay:not(.is-stuck) .primary-nav a:focus-visible,
.site-header--overlay:not(.is-stuck) .primary-nav a.active { color: #ffffff; }

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a.active::after { transform: scaleX(1); }

/* Hairline outline, square corners to echo the square-edged hero.
   Doubled class beats the later .btn block on cascade order. */
.btn.header-contact-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 12px 26px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  color: var(--color-primary) !important;
  transition: color 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft);
}

/* Fill rises from the bottom edge on hover. */
.btn.header-contact-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-primary);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-out);
}
.btn.header-contact-btn:hover::before,
.btn.header-contact-btn:focus-visible::before { transform: translateY(0); }

.btn.header-contact-btn:hover,
.btn.header-contact-btn:focus-visible {
  color: #ffffff !important;
  transform: none;
  box-shadow: none;
}

/* Over the dark hero the outline reads white, and inverts on fill. */
.site-header--overlay:not(.is-stuck) .btn.header-contact-btn {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff !important;
}
.site-header--overlay:not(.is-stuck) .btn.header-contact-btn::before { background: #ffffff; }
.site-header--overlay:not(.is-stuck) .btn.header-contact-btn:hover,
.site-header--overlay:not(.is-stuck) .btn.header-contact-btn:focus-visible {
  border-color: #ffffff;
  color: var(--color-primary) !important;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
  width: 44px;
  height: 44px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-text);
  margin: 5px 0;
  transition: transform 0.45s var(--ease-out), opacity 0.3s var(--ease-soft), background-color 0.4s var(--ease-soft);
}
.site-header--overlay:not(.is-stuck) .nav-toggle span { background: #fff; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 17px 34px;
  border-radius: 5px;
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
  background-image: linear-gradient(115deg,
    var(--color-primary) 0%, var(--color-primary) 50%,
    var(--color-text) 50%, var(--color-text) 100%);
  background-size: 230% 100%;
  background-position: 0% 0;
  color: #ffffff !important;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-position 0.62s var(--ease-out),
              border-color 0.45s var(--ease-soft),
              transform 0.45s var(--ease-spring),
              box-shadow 0.45s var(--ease-soft);
}
.btn:hover, .btn:focus-visible {
  background-position: -100% 0;
  border-color: var(--color-text);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn--light {
  background-color: #ffffff;
  background-image: none;
  border-color: #ffffff;
  color: var(--color-primary) !important;
}
.btn--light:hover, .btn--light:focus-visible {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff !important;
}

/* ─── HERO ────────────────────────────────────────────────── */
/* Full-bleed, square-edged. Legibility comes from a directional scrim
   anchored to the text side, so the skyline stays vivid on the right
   instead of sitting under a flat grey wash. */
.hero {
  position: relative;
  padding: 240px var(--section-pad-h) 200px;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 60%;
  transform: scale(1.08);
  z-index: -2;
  animation: heroDrift 2.6s var(--ease-out) forwards;
}

@keyframes heroDrift {
  to { transform: scale(1); }
}

/* Layered: grain → directional scrim → teal glow → base vignette */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    var(--grain),
    linear-gradient(101deg,
      rgba(4, 18, 22, 0.93) 0%,
      rgba(4, 18, 22, 0.80) 30%,
      rgba(4, 18, 22, 0.40) 58%,
      rgba(4, 18, 22, 0.22) 100%),
    radial-gradient(75% 130% at 0% 105%, rgba(0, 128, 128, 0.48) 0%, transparent 62%),
    linear-gradient(to top, rgba(4, 18, 22, 0.62) 0%, rgba(4, 18, 22, 0) 34%);
  background-size: 180px 180px, cover, cover, cover;
}

.hero--home::before { background-image: url('../img/hero-hongkong.jpg'); background-position: 50% 66%; }
.hero--about::before   { background-image: url('../img/hk-harbour.jpg'); }
.hero--services::before{ background-image: url('../img/hk-peak.jpg'); }
.hero--contact::before { background-image: url('../img/hk-night.jpg'); }
.hero--team::before    { background-image: url('../img/hk-harbour.jpg'); }

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}

/* Kicker: a teal rule that draws itself, then the label fades in. */
/* Plain tracked label — no leading rule. */
.hero-kicker { margin-bottom: 26px; }
.hero-kicker span {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.hero h1 {
  color: #ffffff;
  font-size: clamp(2.15rem, 5.4vw, 4.125rem);
  line-height: 1.06;
  margin-bottom: 0;
  max-width: 900px;
  text-shadow: 0 2px 44px rgba(0, 0, 0, 0.32);
}

/* The emphasised phrase — italic serif in the lighter brand teal, so the
   headline reads as typography rather than a flat block of white. */
.hero h1 em {
  font-style: italic;
  color: var(--color-primary-light);
}

.hero-lede {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  max-width: 540px;
  margin-top: 26px;
}

/* Inner-page hero: same system, shorter. */
.hero--inner {
  padding: 220px var(--section-pad-h) 180px;
}
.hero--inner h1 { max-width: none; }
.hero--inner .hero-lede { margin-top: 24px; }

/* Staggered entrance */
.hero-fade {
  opacity: 0;
  transform: translateY(26px);
  animation: heroFade 1.1s var(--ease-out) forwards;
}
.hero-fade:nth-child(1) { animation-delay: 0.15s; }
.hero-fade:nth-child(2) { animation-delay: 0.30s; }
.hero-fade:nth-child(3) { animation-delay: 0.45s; }
.hero-fade:nth-child(4) { animation-delay: 0.60s; }

@keyframes heroFade {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── SECTION SHELL ───────────────────────────────────────── */
.section { width: 100%; position: relative; }
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-pad-v) var(--section-pad-h);
}

.bg-light { background-color: var(--color-bg-light); }
.bg-white { background-color: var(--color-white); }

.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: 56px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--color-card-border);
}

/* Deliberate pauses keep the centred treatment. */
.section-intro--center {
  display: block;
  text-align: center;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 45px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}

.section-intro h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.625rem);
  color: var(--color-primary);
  margin-bottom: 0;
  text-wrap: balance;
}
.section-intro--center h2 { margin-bottom: 16px; }

.section-intro p {
  font-size: 1rem;
  color: var(--color-body);
  line-height: 1.75;
  max-width: 46ch;
  margin: 0;
  padding-bottom: 4px;
}
.section-intro--center p { max-width: 62ch; margin: 16px auto 0; }

.rule {
  width: 48px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

/* ─── PLAIN TEXT COLUMNS (4-up, no card) ──────────────────
   Reference: 255px columns, 60px gutters, centred, transparent. */
.col-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  text-align: center;
}

.col-item h3 {
  font-size: 1.625rem;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.col-item p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-body);
}

/* ─── FEATURE COLUMNS (image on top, 3-up) ────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}


.feature-item h3 {
  font-size: 1.625rem;
  color: var(--color-primary);
  margin-bottom: 10px;
}
.feature-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 14px;
}
.feature-item p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-body);
}

/* ─── INSET PANELS (dark image panel / solid teal band) ───── */
.inset-panel {
  max-width: var(--max-width);
  margin: 0 auto;
  border-radius: 10px;
  padding: 60px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.inset-panel--image { background-color: var(--color-dark); }
.inset-panel--image::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background-image: url('../img/hk-peak.jpg');
  background-size: cover;
  background-position: 50% 55%;
}
.inset-panel--image::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: rgba(16, 24, 40, 0.74);
}

.inset-panel--teal { background-color: var(--color-primary); }

.inset-panel h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  color: #ffffff;
  margin-bottom: 26px;
}
.inset-panel .eyebrow { color: rgba(255, 255, 255, 0.78); }

/* ─── OUTLINE BUTTON (Active Mandates) ────────────────────── */
.btn--outline {
  background-color: transparent;
  background-image: linear-gradient(115deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%,
    var(--color-dark) 50%, var(--color-dark) 100%);
  background-size: 230% 100%;
  background-position: 0% 0;
  border-color: var(--color-dark);
  color: var(--color-dark) !important;
}
.btn--outline:hover, .btn--outline:focus-visible {
  background-position: -100% 0;
  border-color: var(--color-dark);
  color: #ffffff !important;
}

.card-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  transition: transform 0.45s var(--ease-spring), background-color 0.4s var(--ease-out);
}
.card-icon svg { width: 26px; height: 26px; }

/* ─── SPLIT / FEATURE BLOCK ───────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split--top { align-items: start; }
.split--reverse .split-media { order: 2; }
.split--reverse .split-body  { order: 1; }

.split-media {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  isolation: isolate;
}
.split-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.9s var(--ease-out);
}
.split-media:hover img { transform: scale(1.06); }

.split-body h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.625rem);
  color: var(--color-primary);
  margin-bottom: 18px;
}
.split-body h3 {
  font-size: 1.625rem;
  color: var(--color-dark);
  margin-bottom: 10px;
}
.split-body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-body);
}
.split-body .stack > * + * { margin-top: 14px; }

/* ─── ALTERNATING SERVICE ROWS (services page) ────────────── */
.svc-row {
  display: grid;
  grid-template-columns: 88px minmax(210px, 0.9fr) 1.5fr;
  gap: 48px;
  align-items: start;
  padding: 52px 0;
  margin-bottom: 0;
  border-top: 1px solid var(--color-border);
  transition: border-color 0.5s var(--ease-soft);
}
.svc-row:last-child { border-bottom: 1px solid var(--color-border); }
.svc-row:hover { border-top-color: var(--color-primary-line); }

.svc-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.32;
  transition: opacity 0.5s var(--ease-soft), transform 0.6s var(--ease-out);
}
.svc-row:hover .svc-num { opacity: 1; transform: translateX(4px); }
.svc-row h3 {
  font-size: 1.75rem;
  color: var(--color-primary);
  margin-bottom: 0;
}
.svc-row p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-body);
}

/* ─── CENTRED PROSE COLUMN (about intro) ──────────────────── */
.prose-center {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}
.prose-center p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-body);
}
.prose-center p + p { margin-top: 22px; }

/* ─── SECTOR CARDS (image-led) ────────────────────────────── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ─── VALUES LIST (about) ─────────────────────────────────── */
.values-list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.values-list li {
  position: relative;
  padding-left: 40px;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-body);
}
.values-list li strong { color: var(--color-dark); font-weight: 600; }
.values-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
}
.values-list li::after {
  content: '';
  position: absolute;
  left: 7px; top: 15px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}

.panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  padding: 36px 34px;
  box-shadow: var(--shadow-sm);
}
.panel h3 {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.panel p { font-size: 1rem; line-height: 1.78; color: var(--color-body); }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-items: center;
}
.cta-email {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 30px;
}
.cta-email span {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.cta-email a {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: #ffffff;
  position: relative;
  transition: color 0.3s var(--ease-out);
}
.cta-email a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}
.cta-email a:hover { color: #fff; }
.cta-email a:hover::after, .cta-email a:focus-visible::after { transform: scaleX(1); }

/* ─── CONTACT ─────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: start;
}

.contact-aside h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.625rem);
  color: var(--color-primary);
  margin-bottom: 16px;
}
.contact-aside > p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-body);
  margin-bottom: 32px;
}

.contact-detail {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
}
.contact-detail:last-of-type { border-bottom: 1px solid var(--color-border); }
.contact-detail .card-icon { width: 44px; height: 44px; margin: 0; border-radius: 10px; }
.contact-detail .card-icon svg { width: 20px; height: 20px; }
.contact-detail dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}
.contact-detail dd { font-size: 1.0625rem; color: var(--color-dark); }
.contact-detail dd a { color: var(--color-primary); transition: color 0.25s var(--ease-out); }

/* ─── FOOTER ──────────────────────────────────────────────── */
.site-footer { background-color: var(--color-bg-light); }

.footer-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 70px var(--section-pad-h) 50px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 48px;
  align-items: start;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.footer-col p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-footer-text);
}

.footer-nav { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-nav a {
  font-size: 0.9375rem;
  color: var(--color-footer-text);
  text-decoration: none;
  display: inline-block;
  transition: color 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
.footer-nav a:hover, .footer-nav a:focus-visible {
  color: var(--color-primary);
  transform: translateX(4px);
}

.footer-logo { width: 96px; border-radius: 6px; box-shadow: var(--shadow-sm); }

.footer-below { border-top: 1px solid var(--color-border); }
.footer-below-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px var(--section-pad-h);
  text-align: center;
}
.footer-below p { font-size: 0.875rem; color: var(--color-muted); }

/* ─── SCROLL TO TOP ───────────────────────────────────────── */
#scroll-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-teal);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  z-index: 200;
  transition: opacity 0.35s var(--ease-out),
              transform 0.35s var(--ease-spring),
              background-color 0.3s var(--ease-out);
}
#scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#scroll-top:hover { background: var(--color-text); color: #fff; transform: translateY(-3px); }
#scroll-top svg { width: 18px; height: 18px; }

/* ─── SCROLL REVEAL ───────────────────────────────────────── */
/* Scoped to .js so content stays visible if scripting is unavailable. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1080px) {
  .grid-4, .col-grid { grid-template-columns: repeat(2, 1fr); }
  .col-grid { gap: 44px; }
  .footer-main { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-main .footer-logo-col { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --section-pad-v: 72px; --section-pad-h: 24px; }

  .nav-toggle { display: block; }
  .primary-nav {
    position: absolute;
    top: 100%; left: 24px; right: 24px;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 10px;
    gap: 2px;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  }
  .primary-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .site-header--overlay .primary-nav a { color: var(--color-text); }
  .primary-nav a { padding: 12px 16px; border-radius: 8px; }
  .primary-nav a::after { display: none; }
  .primary-nav a:hover { background: var(--color-primary-soft); }

  .header-inner { position: relative; }
  .header-contact-btn { display: none; }

  .hero { padding: 150px var(--section-pad-h) 96px; }
  .hero--inner { padding: 150px var(--section-pad-h) 96px; }
  .hero-kicker { margin-bottom: 20px; }
  .hero h1 { font-size: clamp(1.85rem, 7vw, 2.5rem); }
  .hero p { font-size: 1.0625rem; }

  .split, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .split-media, .split--reverse .split-body { order: initial; }
  .grid-3, .feature-grid, .col-grid { grid-template-columns: 1fr; gap: 40px; }
  .inset-panel { padding: 44px 24px; }
  .service-row { grid-template-columns: 1fr; gap: 14px; padding: 34px 0; }
  .service-num { font-size: 2rem; }
  .footer-main { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 560px) {
  .grid-4, .col-grid { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .cta-email a { font-size: 1.2rem; }
}

/* ─── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Must match .js .reveal specificity (0,2,0) or it silently loses. */
  .js .reveal, .js .hero-fade,
  .js .reveal--slow, .js .reveal--row, .js .reveal--rule {
    opacity: 1;
    transform: none;
  }
}

/* ─── INSET PANEL DETAILS ─────────────────────────────────── */
/* Thin divider above "OR EMAIL AT:", as on the reference band. */
.inset-panel .cta-email {
  position: relative;
  padding-top: 26px;
  margin-top: 26px;
}
.inset-panel .cta-email::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 1px;
  background: rgba(255, 255, 255, 0.45);
}
.inset-panel .cta-email span { color: rgba(255, 255, 255, 0.75); }
.inset-panel .cta-email a { color: #ffffff; }

@media (max-width: 900px) {
  .svc-row { grid-template-columns: 1fr; gap: 12px; padding: 34px 0; }
  .svc-num { font-size: 1.75rem; }
}

/* ─── TEAM PHOTOS ─────────────────────────────────────────── */
.member-photo { aspect-ratio: 4 / 5; }
.member-photo img { object-position: top center; }


/* Vertical rhythm between blocks that share one section. */
.block-gap { margin-top: 90px; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM POLISH
   Slower, softer motion and a little atmosphere on flat areas.
   Colours, fonts and layout are unchanged.
   ═══════════════════════════════════════════════════════════ */

/* Light sections get the same fine grain as the hero, so large flat
   fills read as paper rather than blank canvas. */
.bg-light { position: relative; isolation: isolate; }
.bg-light::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 180px 180px;
  pointer-events: none;
}

/* Photography: longer, gentler zoom */
.split-media img { transition: transform 1.4s var(--ease-out); }
.split-media:hover img { transform: scale(1.045); }

/* Cards: shallower lift, longer settle */

/* Inset panels sit on a soft ambient shadow */
.inset-panel { box-shadow: 0 20px 60px rgba(16, 24, 40, 0.10); }
.inset-panel--teal { box-shadow: 0 20px 60px rgba(0, 128, 128, 0.22); }

/* Teal band gets depth instead of reading as a flat rectangle */
.inset-panel--teal {
  background-image:
    var(--grain),
    radial-gradient(90% 140% at 12% 0%, rgba(255, 255, 255, 0.14) 0%, transparent 58%);
  background-size: 180px 180px, cover;
}

/* Body links: underline grows rather than blinking on */
.prose-center a,
.contact-aside > p a {
  position: relative;
  color: var(--color-primary);
  transition: color 0.35s var(--ease-soft);
}
.prose-center a::after,
.contact-aside > p a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.prose-center a:hover::after,
.contact-aside > p a:hover::after,
.prose-center a:focus-visible::after,
.contact-aside > p a:focus-visible::after { transform: scaleX(1); }

/* Footer links already slide; smooth the curve */
.footer-nav a { transition: color 0.35s var(--ease-soft), transform 0.45s var(--ease-out); }

/* Form fields settle more gently */
/* Reveal: longer travel time, gentler curve */
.js .reveal {
  transform: translateY(22px);
  transition: opacity 0.95s var(--ease-out), transform 0.95s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

/* Scroll-to-top matches the new easing */
#scroll-top {
  transition: opacity 0.45s var(--ease-soft),
              transform 0.5s var(--ease-spring),
              background-color 0.4s var(--ease-soft);
}

/* ═══════════════════════════════════════════════════════════
   TEXT-ONLY LAYOUTS
   Sections that previously leaned on a photograph.
   ═══════════════════════════════════════════════════════════ */

/* Two balanced text columns, each opened by a full-width hairline. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}
.duo-item h3 {
  font-size: 1.625rem;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.duo-item p {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--color-body);
}

/* Centred statement block — carries a section on typography alone. */
.statement {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.statement h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  color: var(--color-primary);
  margin-bottom: 18px;
}
.statement p {
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--color-body);
}
.statement .btn { margin-top: 34px; }

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BACKGROUND IMAGERY
   Phones get ~1000px crops instead of the full-width files —
   roughly a third of the bytes for the same apparent quality.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero--home::before     { background-image: url('../img/hero-hongkong-sm.jpg'); }
  .hero--about::before    { background-image: url('../img/hk-harbour-sm.jpg'); }
  .hero--services::before { background-image: url('../img/hk-peak-sm.jpg'); }
  .hero--contact::before  { background-image: url('../img/hk-night-sm.jpg'); }
  .hero--team::before     { background-image: url('../img/hk-harbour-sm.jpg'); }
  .inset-panel--image::before { background-image: url('../img/hk-peak-sm.jpg'); }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL RHYTHM
   The firm's whole proposition is 25 years in Hong Kong, but the
   harbour appeared once at the top and then vanished. These
   components put it back as structural punctuation, and break the
   centred-heading-then-columns cadence that repeated all the way down.
   ═══════════════════════════════════════════════════════════ */

/* ─── VISTA — full-bleed photographic interlude ─────────────
   Real Pexels photography we already licence. One per page. */
.vista {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 62vh;
  display: grid;
  align-items: center;
  padding: clamp(90px, 12vw, 150px) var(--section-pad-h);
}

.vista::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -2;
  background-size: cover;
  background-position: 50% 55%;
  background-repeat: no-repeat;
}

.vista::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    var(--grain),
    linear-gradient(96deg,
      rgba(4, 18, 22, 0.90) 0%,
      rgba(4, 18, 22, 0.70) 34%,
      rgba(4, 18, 22, 0.34) 66%,
      rgba(4, 18, 22, 0.20) 100%),
    radial-gradient(70% 120% at 2% 100%, rgba(0, 128, 128, 0.42) 0%, transparent 62%);
  background-size: 180px 180px, cover, cover;
}

/* Parallax only where it is smooth: pointer devices, wide viewports. */
@media (min-width: 901px) and (hover: hover) {
  .vista::before { background-attachment: fixed; }
}

.vista--harbour::before { background-image: url('../img/hk-harbour.jpg'); }
.vista--peak::before    { background-image: url('../img/hk-peak.jpg'); }
.vista--night::before   { background-image: url('../img/hk-night.jpg'); }

.vista-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.vista blockquote {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  line-height: 1.12;
  color: #ffffff;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.vista blockquote em { font-style: italic; color: var(--color-primary-light); }

.vista cite {
  display: block;
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-style: normal;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  max-width: 42ch;
}

/* ─── VERTICAL RHYTHM ───────────────────────────────────────
   Uniform padding on every section is what made the scroll feel
   metronomic. These vary the beat. */
.section-inner--close { padding-top: 68px; }
.section-inner--open  { padding-top: 150px; padding-bottom: 150px; }

@media (max-width: 900px) {
  .section-intro {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 14px;
    margin-bottom: 40px;
  }
  .section-intro p { max-width: none; }
  .vista { min-height: 0; }
  .vista blockquote { max-width: 16ch; }
  .section-inner--open { padding-top: 90px; padding-bottom: 90px; }
}

/* ─── MOTION VARIANTS ───────────────────────────────────────
   One identical fade-rise on every block is the tell. Each reveal
   should suit what it reveals. */

/* The vista quote arrives slower and from further, like the camera
   settling, rather than snapping up like a list item. */
.js .reveal--slow {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  transition: opacity 1.25s var(--ease-out), transform 1.25s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal--slow.is-visible { opacity: 1; transform: none; }

/* Rules draw themselves left to right instead of fading in. */
.js .reveal--rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  opacity: 1;
}
.js .reveal--rule.is-visible { transform: scaleX(1); }

/* Ledger rows come in tighter and quicker — they are a list, not a statement. */
.js .reveal--row {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal--row.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal--slow,
  .js .reveal--row,
  .js .reveal--rule { opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════
   PARTNER MARQUEE
   A slim band under the hero: a fixed label, then a seamless
   loop of partner marks. Assets arrive in four different
   palettes and two different background treatments, so the bar
   normalises everything to one ink and lets colour return on
   hover — the only way a mixed-provenance logo set reads as
   one row rather than a ransom note.
   ═══════════════════════════════════════════════════════════ */

.partners {
  background: var(--color-white);
  border-block: 1px solid var(--color-border);
}

.partners-inner {
  max-width: none;
  margin: 0;
  padding: 28px 0 28px var(--section-pad-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.partners-label {
  position: relative;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.1;
  color: var(--color-dark);
  white-space: nowrap;
  padding-right: clamp(24px, 3vw, 44px);
}

/* Hairline that divides the fixed label from the moving track. */
.partners-label::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
  background: var(--color-card-border);
}

/* Edge fade so marks resolve in and out rather than clipping */
.partners-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 96px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 96px), transparent 100%);
}

/* No flex `gap` here on purpose: gap would add (2n−1) gaps across the
   doubled set, so translateX(-50%) would land half a gap out and the
   loop would visibly jump. Trailing margin on each item keeps both
   halves exactly equal. */
.partners-track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: partnersFlow 46s linear infinite;
}

@keyframes partnersFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-right: clamp(48px, 6vw, 88px);
  flex: none;
}

.partner img {
  height: 27px;
  width: auto;
  max-width: none;
  /* multiply keys ZeroWatt's white plate out against the white band;
     it is a no-op on the transparent PNGs. */
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.12);
  opacity: 0.74;
  transition: opacity 0.45s var(--ease-soft), filter 0.45s var(--ease-soft);
}

/* Wordmarks for partners with no usable logo asset — set to sit at the
   same optical weight and ink as the greyscale marks. */
.partner span {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--color-muted);
  opacity: 0.78;
  white-space: nowrap;
  transition: color 0.45s var(--ease-soft), opacity 0.45s var(--ease-soft);
}

.partner:hover img { opacity: 1; filter: grayscale(0) contrast(1); }
.partner:hover span { color: var(--color-primary); opacity: 1; }

@media (max-width: 900px) {
  .partners-inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0 24px var(--section-pad-h);
  }
  .partners-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
  .partners-label { padding-right: 0; }
  .partners-label::after { display: none; }
  .partner { margin-right: 44px; height: 34px; }
  .partner img { height: 23px; }
  .partner span { font-size: 0.9375rem; }
}

/* A continuously moving strip is a WCAG 2.2.2 concern: stop it, drop the
   duplicated half, and let the row wrap so every partner stays readable. */
@media (prefers-reduced-motion: reduce) {
  .partners-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    row-gap: 18px;
  }
  .partners-track [aria-hidden="true"] { display: none; }
  .partners-viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   CLOSING STATEMENT BAND
   Was a centred stack: heading, button, rule, "OR EMAIL AT:",
   address. Now an asymmetric pairing — the line carries the left,
   the two ways to act sit together on the right — on a teal that
   has some depth in it rather than one flat fill.
   ═══════════════════════════════════════════════════════════ */

.inset-panel--teal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  text-align: left;
  padding: clamp(46px, 5vw, 66px) clamp(34px, 5vw, 72px);
  background-color: var(--color-primary);
  background-image:
    var(--grain),
    linear-gradient(118deg, #00918d 0%, #008080 44%, #00605e 100%);
  background-size: 180px 180px, cover;
  box-shadow: 0 24px 64px rgba(0, 128, 128, 0.24);
}

.inset-panel--teal h2 {
  text-align: left;
  margin-bottom: 0;
  font-size: clamp(1.75rem, 3.3vw, 2.5rem);
  max-width: 24ch;
  text-wrap: balance;
}

.cta-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.cta-mail {
  position: relative;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: #ffffff;
  white-space: nowrap;
  transition: color 0.35s var(--ease-soft);
}
.cta-mail::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  transition: background-color 0.4s var(--ease-soft);
}
.cta-mail:hover,
.cta-mail:focus-visible { color: #ffffff; }
.cta-mail:hover::after,
.cta-mail:focus-visible::after { background: #ffffff; }

@media (max-width: 900px) {
  .inset-panel--teal {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 42px 26px;
  }
  .inset-panel--teal h2 { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════
   ASIA PACIFIC MAP  (about page)
   The supplied region map, resampled into a dot matrix in the
   brand teal: highlighted countries carry the colour, the rest
   of the landmass stays as faint context. The map draws itself
   in on a diagonal sweep; Hong Kong keeps a slow pulse.
   ═══════════════════════════════════════════════════════════ */

.ap-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(34px, 4.5vw, 68px);
  align-items: start;
}

.ap-copy p {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--color-body);
}
.ap-copy p + p { margin-top: 22px; }

.ap-map { margin: 0; }
.ap-map-frame { position: relative; }
.ap-map img { width: 100%; height: auto; display: block; }

/* The line that used to sit above the section now labels the graphic
   it actually describes. */
.ap-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(16px, 2.2vw, 26px);
  padding-top: 2px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.4;
  color: var(--color-dark);
}
.ap-label::before {
  content: "";
  flex: none;
  width: clamp(24px, 3vw, 40px);
  height: 1px;
  transform: translateY(-0.35em);
  background: var(--color-primary);
}

/* Hong Kong marker */
.ap-pin {
  position: absolute;
  left: 45.39%;
  top: 30.95%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.16);
}
.ap-pin::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  animation: apPulse 3.4s var(--ease-out) infinite;
}

@keyframes apPulse {
  0%   { transform: scale(0.55); opacity: 0.6; }
  70%  { transform: scale(2.1);  opacity: 0; }
  100% { transform: scale(2.1);  opacity: 0; }
}

.ap-pin-label {
  position: absolute;
  left: calc(45.39% + 15px);
  top: 30.95%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.88);
  padding: 3px 7px;
  border-radius: 3px;
}

/* Diagonal sweep reveal — replaces the standard fade-up for this figure. */
.js .reveal--map { opacity: 1; transform: none; }
.js .reveal--map img {
  -webkit-mask-image: linear-gradient(103deg, #000 0 62%, rgba(0,0,0,0.35) 74%, transparent 84%);
  mask-image: linear-gradient(103deg, #000 0 62%, rgba(0,0,0,0.35) 74%, transparent 84%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: -100% 0;
  mask-position: -100% 0;
  transition: -webkit-mask-position 2.2s var(--ease-out), mask-position 2.2s var(--ease-out);
}
.js .reveal--map.is-visible img {
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;
}

/* The pin should not appear before the map has swept past it. */
.js .reveal--map .ap-pin,
.js .reveal--map .ap-pin-label {
  opacity: 0;
  transition: opacity 0.7s var(--ease-soft) 1.25s;
}
.js .reveal--map.is-visible .ap-pin,
.js .reveal--map.is-visible .ap-pin-label { opacity: 1; }

/* ─── SECTION DIVIDER ───────────────────────────────────────
   A rule that fades at both ends, so it reads as a break in the
   page rather than the edge of a container. */
.section-divider {
  border: 0;
  height: 1px;
  margin: clamp(58px, 7vw, 96px) 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-card-border) 14%,
    var(--color-card-border) 86%,
    transparent 100%);
}

@media (max-width: 900px) {
  .ap-split { grid-template-columns: 1fr; gap: 36px; }
  .ap-map { max-width: 440px; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-pin::after { animation: none; opacity: 0; }
  .js .reveal--map img {
    -webkit-mask-image: none;
    mask-image: none;
    transition: none;
  }
  .js .reveal--map .ap-pin,
  .js .reveal--map .ap-pin-label { opacity: 1; transition: none; }
}


/* ═══════════════════════════════════════════════════════════
   CHALLENGES  (Navigating Complex Business Landscapes)
   Was a heading parked beside a short list, which left a tall
   column of nothing. The heading now runs the full width with
   its lede set against it, and the four challenges sit as one
   tight horizontal register beneath — no dead vertical space,
   and only one order of hairline so the rules read as a ledger
   rather than as two competing systems.
   ═══════════════════════════════════════════════════════════ */

.challenges-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 56px);
  align-items: end;
  margin-bottom: clamp(44px, 5vw, 64px);
}

.challenges-head h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.625rem);
  color: var(--color-primary);
  max-width: 21ch;
  text-wrap: balance;
}

.challenges-head p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-body);
  padding-bottom: 8px;
}

.challenge-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.challenge-grid li {
  position: relative;
  padding-top: 24px;
  border-top: 1px solid var(--color-card-border);
}

/* A teal segment that draws across the hairline on hover. */
.challenge-grid li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-out);
}
.challenge-grid li:hover::before { transform: scaleX(1); }

.challenge-num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  opacity: 0.55;
  margin-bottom: 14px;
  transition: opacity 0.6s var(--ease-soft);
}
.challenge-grid li:hover .challenge-num { opacity: 1; }

.challenge-grid h3 {
  font-size: 1.3125rem;
  color: var(--color-primary);
  margin-bottom: 10px;
  text-wrap: balance;
}

.challenge-grid p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-body);
}


/* ═══════════════════════════════════════════════════════════
   SECTORS OF EXPERTISE
   Three alternating editorial spreads. The photograph is the
   anchor: raised on a layered, teal-tinted shadow, keyed with a
   multiply wash so three stock frames of different provenance
   read as one set, and released to full colour on hover.
   ═══════════════════════════════════════════════════════════ */

.sectors {
  display: grid;
  gap: clamp(56px, 7vw, 104px);
}

.sector {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 78px);
  align-items: center;
}

/* Alternating sides give the scroll a rhythm instead of a column. */
.sector:nth-child(even) > .sector-figure { order: 2; }

.sector-figure {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg-light);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 14px 32px rgba(16, 24, 40, 0.10),
    0 36px 72px rgba(0, 128, 128, 0.10);
  transition:
    transform 0.8s var(--ease-out),
    box-shadow 0.8s var(--ease-soft);
}

/* Hairline containing the photograph, drawn over it so the radius holds. */
.sector-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.08);
  pointer-events: none;
}

/* Colour treatment — pulls three different stock palettes onto
   one teal axis, then steps back on hover. */
.sector-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(202deg,
    rgba(0, 128, 128, 0.26) 0%,
    rgba(0, 96, 94, 0.10) 52%,
    rgba(16, 24, 40, 0.20) 100%);
  mix-blend-mode: multiply;
  opacity: 0.52;
  transition: opacity 0.8s var(--ease-soft);
  pointer-events: none;
}

.sector-figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transform-origin: center;
  transition: transform 1.6s var(--ease-out);
}

.sector:hover .sector-figure {
  transform: translateY(-5px);
  box-shadow:
    0 2px 4px rgba(16, 24, 40, 0.05),
    0 20px 44px rgba(16, 24, 40, 0.13),
    0 48px 92px rgba(0, 128, 128, 0.16);
}
.sector:hover .sector-figure img { transform: scale(1.045); }
.sector:hover .sector-figure::after { opacity: 0.24; }

.sector-index {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  margin-bottom: 20px;
}
.sector-index::after {
  content: "";
  height: 1px;
  width: clamp(36px, 5vw, 64px);
  background: var(--color-primary-line);
  transition: width 0.8s var(--ease-out), background-color 0.6s var(--ease-soft);
}
.sector:hover .sector-index::after {
  width: clamp(56px, 8vw, 100px);
  background: var(--color-primary);
}

.sector-text h3 {
  font-size: clamp(1.625rem, 3.1vw, 2.25rem);
  color: var(--color-primary);
  margin-bottom: 12px;
  text-wrap: balance;
}

.sector-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.sector-text p {
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--color-body);
  max-width: 56ch;
}


/* ═══════════════════════════════════════════════════════════
   UNLOCK YOUR BUSINESS POTENTIAL
   The closing argument on every page it appears on, so it is
   given weight: a white panel lifted off a lightly washed band,
   three cells divided by hairlines that fade out at both ends,
   each opening with an oversized serif numeral.
   ═══════════════════════════════════════════════════════════ */

.section--unlock { position: relative; isolation: isolate; }

.section--unlock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(74% 82% at 50% 0%, rgba(0, 128, 128, 0.06), transparent 68%),
    radial-gradient(52% 64% at 88% 100%, rgba(0, 128, 128, 0.04), transparent 70%);
}

.benefit-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}

.benefit-cell {
  position: relative;
  padding: clamp(38px, 4vw, 56px) clamp(26px, 3vw, 44px);
  transition: background-color 0.6s var(--ease-soft);
}
.benefit-cell:hover { background-color: rgba(0, 128, 128, 0.028); }

/* Dividers that fade out top and bottom rather than butting the edges. */
.benefit-cell + .benefit-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--color-card-border) 20%,
    var(--color-card-border) 80%,
    transparent 100%);
}

/* Teal edge that draws in along the top of the cell on hover. */
.benefit-cell::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-out);
}
.benefit-cell:hover::after { transform: scaleX(1); }

.benefit-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.2;
  margin-bottom: 22px;
  transition: opacity 0.6s var(--ease-soft), transform 0.7s var(--ease-out);
}
.benefit-cell:hover .benefit-num { opacity: 0.44; transform: translateY(-2px); }

.benefit-panel h3 {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 12px;
  text-wrap: balance;
}

.benefit-panel p {
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--color-body);
}


/* ─── RESPONSIVE (new components) ─────────────────────────── */
@media (max-width: 1080px) {
  .challenge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(26px, 4vw, 44px); }
  .challenge-grid li { padding-top: 22px; margin-top: 22px; }
}

@media (max-width: 900px) {
  .challenges-head { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .challenges-head h2 { max-width: none; }
  .challenges-head p { padding-bottom: 0; }

  .sector { grid-template-columns: 1fr; gap: 26px; }
  .sector:nth-child(even) > .sector-figure { order: 0; }
  .sector-text p { max-width: none; }

  .benefit-panel { grid-template-columns: 1fr; }
  .benefit-cell + .benefit-cell::before {
    top: 0; bottom: auto;
    left: clamp(26px, 3vw, 44px); right: clamp(26px, 3vw, 44px);
    width: auto; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%, var(--color-card-border) 18%,
      var(--color-card-border) 82%, transparent 100%);
  }
}

@media (max-width: 560px) {
  .challenge-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sector-figure,
  .sector-figure img,
  .sector:hover .sector-figure,
  .sector:hover .sector-figure img { transform: none; }
}


/* ─── KEYED-OUT PORTRAIT ───────────────────────────────────
   One associate portrait arrives as a studio cutout rather than
   a photograph with its own setting. Dropped straight onto the
   page it would read as a white rectangle, so it is given a
   surface to stand on: a soft brand-tinted wash, the figure set
   on the bottom edge, lifting slightly on hover. */
.member-photo--cutout {
  background-color: #eef2f3;
  background-image:
    var(--grain),
    radial-gradient(86% 66% at 50% 16%, rgba(0, 128, 128, 0.13), transparent 64%),
    linear-gradient(168deg, #f4f7f7 0%, #e9eff0 56%, #dde5e6 100%);
  background-size: 180px 180px, cover, cover;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.07);
}
.member-photo--cutout img {
  object-fit: contain;
  object-position: bottom center;
  transform: none;
  transition: transform 0.9s var(--ease-out);
}
.member-photo--cutout:hover img { transform: translateY(-7px); }

@media (prefers-reduced-motion: reduce) {
  .member-photo--cutout img,
  .member-photo--cutout:hover img { transform: none; }
}


/* ═══════════════════════════════════════════════════════════
   PROSE TEXTURE
   Advisory copy runs long, and every paragraph on the site was
   set at one size, one weight, one colour — which reads as a
   wall of grey however good the writing is. These give the text
   internal structure: an opening paragraph that carries more
   ink and a marginal rule, figures set in the display face so
   the numbers that carry the argument are findable, and
   emphasis that uses the brand rather than plain bold.
   Nothing here changes a word — only how the words sit.
   ═══════════════════════════════════════════════════════════ */

/* ── Lede: the first paragraph of a multi-paragraph block ──── */
.stack > p:first-of-type,
.ap-copy > p:first-of-type,
.prose-center > p:first-of-type,
.duo-item > p,
.split--top .split-body > p {
  position: relative;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--color-dark);
  padding-left: clamp(18px, 2vw, 26px);
}

/* A teal rule in the margin, falling away down the paragraph. */
.stack > p:first-of-type::before,
.ap-copy > p:first-of-type::before,
.prose-center > p:first-of-type::before,
.duo-item > p::before,
.split--top .split-body > p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  bottom: 0.3em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--color-primary) 0%,
    rgba(0, 128, 128, 0.42) 46%,
    rgba(0, 128, 128, 0) 100%);
}
.prose-center > p:first-of-type { text-align: left; }

/* ── Figures ────────────────────────────────────────────────
   Track record on this site is carried by numbers. Set in the
   display face they read as evidence rather than as filler. */
.figure {
  font-family: var(--font-heading);
  font-size: 1.075em;
  font-weight: 400;
  color: var(--color-primary);
  letter-spacing: 0.005em;
  white-space: nowrap;
}

/* ── Emphasis ───────────────────────────────────────────────
   Plain bold in body copy is the flattest possible signal.
   A brand-tinted wash under the term does the same job and
   belongs to the palette. */
.stack strong,
.ap-copy strong,
.svc-row strong,
.sector-text strong,
.duo-item strong,
.challenge-grid strong {
  font-weight: 600;
  color: var(--color-dark);
  background-image: linear-gradient(180deg,
    transparent 64%, rgba(0, 128, 128, 0.18) 64%);
  padding-bottom: 0.04em;
}

.stack em,
.ap-copy em,
.svc-row em,
.sector-text em,
.duo-item em {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05em;
  color: var(--color-primary);
}

/* ── Inline links in prose ──────────────────────────────────
   An underline that grows from the left rather than a
   permanently underlined word. */
.stack a:not(.btn),
.ap-copy a:not(.btn),
.svc-row a:not(.btn),
.duo-item a:not(.btn) {
  position: relative;
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}
.stack a:not(.btn)::after,
.ap-copy a:not(.btn)::after,
.svc-row a:not(.btn)::after,
.duo-item a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}
.stack a:not(.btn):hover::after,
.ap-copy a:not(.btn):hover::after,
.svc-row a:not(.btn):hover::after,
.duo-item a:not(.btn):hover::after,
.stack a:not(.btn):focus-visible::after,
.ap-copy a:not(.btn):focus-visible::after { transform: scaleX(1); }

@media (max-width: 600px) {
  .stack > p:first-of-type,
  .ap-copy > p:first-of-type,
  .prose-center > p:first-of-type,
  .duo-item > p,
  .split--top .split-body > p { padding-left: 14px; }
}


/* ═══════════════════════════════════════════════════════════
   STRATEGIC APPROACH  (about)
   Was a centred heading with three ruled columns loose beneath
   it — four separate things sharing a band. It is one idea, so
   it is now one element: a single panel holding the heading and
   the three stages, threaded on one spine with a node above
   each. One order of rule only, which is what the earlier
   heading-rule-plus-column-rules arrangement got wrong.
   ═══════════════════════════════════════════════════════════ */

.approach {
  position: relative;
  border-radius: 14px;
  padding: clamp(40px, 4.5vw, 68px) clamp(28px, 4vw, 62px);
  background-color: #f4f7f7;
  background-image:
    var(--grain),
    radial-gradient(78% 120% at 6% 0%, rgba(0, 128, 128, 0.09), transparent 58%),
    linear-gradient(160deg, #f7fafa 0%, #edf3f3 62%, #e6eeee 100%);
  background-size: 180px 180px, cover, cover;
  box-shadow:
    inset 0 0 0 1px rgba(0, 128, 128, 0.13),
    0 18px 46px rgba(16, 24, 40, 0.055);
}

.approach-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 54px);
  align-items: end;
  margin-bottom: clamp(40px, 4.6vw, 60px);
}
.approach-head h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  color: var(--color-primary);
  max-width: 14ch;
  text-wrap: balance;
}
.approach-head p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-body);
  padding-bottom: 6px;
}

.approach-steps {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 54px);
}

/* The spine: one continuous rule the three stages hang from,
   drawn left to right when the panel arrives. */
.approach-steps::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0, 128, 128, 0.12) 0%,
    rgba(0, 128, 128, 0.42) 14%,
    rgba(0, 128, 128, 0.42) 86%,
    rgba(0, 128, 128, 0.12) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.5s var(--ease-out);
}
.js .approach.is-visible .approach-steps::before { transform: scaleX(1); }

.approach-step {
  position: relative;
  padding-top: 38px;
}

/* Node sitting on the spine above each stage. */
.approach-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 4px rgba(244, 247, 247, 0.9);
}
.js .approach .approach-step::before {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-spring);
}
.js .approach.is-visible .approach-step::before { opacity: 1; transform: scale(1); }
.js .approach.is-visible .approach-step:nth-child(1)::before { transition-delay: 0.45s; }
.js .approach.is-visible .approach-step:nth-child(2)::before { transition-delay: 0.78s; }
.js .approach.is-visible .approach-step:nth-child(3)::before { transition-delay: 1.11s; }

.approach-num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  opacity: 0.6;
  margin-bottom: 12px;
}

.approach-step h3 {
  font-size: 1.375rem;
  color: var(--color-primary);
  margin-bottom: 10px;
  text-wrap: balance;
}
.approach-step p {
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--color-body);
}

@media (max-width: 900px) {
  .approach-head { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .approach-head h2 { max-width: none; }
  .approach-head p { padding-bottom: 0; }

  .approach-steps { grid-template-columns: 1fr; gap: 0; }
  /* Vertical spine on narrow screens. */
  .approach-steps::before {
    top: 6px; bottom: 6px; left: 6px; right: auto;
    width: 1px; height: auto;
    background: linear-gradient(180deg,
      rgba(0, 128, 128, 0.42) 0%,
      rgba(0, 128, 128, 0.42) 88%,
      rgba(0, 128, 128, 0.1) 100%);
    transform-origin: center top;
    transform: scaleY(0);
  }
  .js .approach.is-visible .approach-steps::before { transform: scaleY(1); }
  .approach-step { padding: 0 0 30px 34px; }
  .approach-step:last-child { padding-bottom: 0; }
  .approach-step::before { top: 2px; }

  .ap-map { max-width: 520px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .js .approach .approach-step::before,
  .js .approach.is-visible .approach-step::before { opacity: 1; transform: none; }
  .approach-steps::before,
  .js .approach.is-visible .approach-steps::before { transform: none; }
}

/* Core values read as label-then-definition; the label now carries the
   same brand wash as emphasis everywhere else rather than plain bold. */
.values-list li strong {
  color: var(--color-dark);
  font-weight: 600;
  background-image: linear-gradient(180deg,
    transparent 64%, rgba(0, 128, 128, 0.18) 64%);
  padding-bottom: 0.04em;
}


/* ═══════════════════════════════════════════════════════════
   LEGAL PAGES  (privacy, terms)
   Utility documents, so they get a single readable measure and
   numbered sections rather than the editorial layouts used
   elsewhere. The one loud element is the outstanding-item
   marker: these pages must not go live with blanks in them, so
   the blanks are deliberately conspicuous.
   ═══════════════════════════════════════════════════════════ */

.legal-doc { max-width: 74ch; }

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding-bottom: 22px;
  margin-bottom: clamp(34px, 4vw, 48px);
  border-bottom: 1px solid var(--color-card-border);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
}
.legal-meta span { color: var(--color-primary); }

.legal-section + .legal-section { margin-top: clamp(34px, 4vw, 50px); }

.legal-section h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  color: var(--color-primary);
  margin-bottom: 14px;
}
.legal-section h2::before {
  content: counter(legal-counter, decimal-leading-zero);
  counter-increment: legal-counter;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  opacity: 0.55;
}
.legal-doc { counter-reset: legal-counter; }

.legal-section p,
.legal-section li {
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--color-body);
}
.legal-section p + p,
.legal-section ul,
.legal-section ul + p { margin-top: 14px; }

.legal-section ul {
  list-style: none;
  display: grid;
  gap: 10px;
  padding-left: 2px;
}
.legal-section ul li {
  position: relative;
  padding-left: 22px;
}
.legal-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 1px;
  background: var(--color-primary);
}

.legal-section strong {
  font-weight: 600;
  color: var(--color-dark);
  background-image: linear-gradient(180deg,
    transparent 64%, rgba(0, 128, 128, 0.18) 64%);
}

/* Footer legal row */
.footer-below-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
}
.footer-legal a {
  position: relative;
  font-size: 0.875rem;
  color: var(--color-footer-text);
  transition: color 0.4s var(--ease-soft);
}
.footer-legal a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--color-primary); }
.footer-legal a:hover::after,
.footer-legal a:focus-visible::after { transform: scaleX(1); }

@media (max-width: 600px) {
  .footer-below-inner { justify-content: flex-start; }
}


/* ─── PORTRAIT NOT YET SUPPLIED ────────────────────────────
   Holds a place in the alternating rhythm while a portrait
   is awaited. */
.member-photo--awaiting {
  display: grid;
  place-items: center;
  background-color: #eef2f3;
  background-image:
    var(--grain),
    linear-gradient(168deg, #f4f7f7 0%, #e9eff0 56%, #dde5e6 100%);
  background-size: 180px 180px, cover;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.07);
}
.member-photo--awaiting .awaiting-mark { position: relative; z-index: 1; }


/* ─── CONTACT DETAILS PANEL ────────────────────────────────
   The two direct routes to the firm: email and the office. */
.contact-panel {
  align-self: start;
  padding: clamp(28px, 3.4vw, 46px) clamp(24px, 3vw, 40px);
  border-radius: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.contact-panel dl { display: grid; }
.contact-panel .card-icon { margin: 0; width: 46px; height: 46px; border-radius: 10px; }
.contact-panel .card-icon svg { width: 22px; height: 22px; }
.contact-panel .contact-detail:first-child { border-top: 0; padding-top: 0; }
/* The old aside closed its list with a bottom rule; inside a bordered
   panel that reads as a stray line. */
.contact-panel .contact-detail:last-child { padding-bottom: 0; border-bottom: 0; }
.contact-panel dd { line-height: 1.7; }

/* Monogram on the same tinted ground the keyed-out portrait uses. */
.awaiting-mark {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 7vw, 6rem);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.22;
  user-select: none;
}