/* ==========================================================================
   Compliance Network International — site.css
   Apple product-page grammar: one accent colour, large quiet type, generous
   space, and one orchestrated moment (the globe drawing itself in).
   Order: tokens, fonts, base, layout, type roles, components in page order,
   motion. No inline styles anywhere: the page ships a strict CSP.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --bg-dark: #000000;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-inv: #f5f5f7;
  --text-inv-2: #a1a1a6;
  --brand: #0364b8;
  --brand-hover: #1670c4;
  --brand-light: #4f9be8;
  --hairline: rgba(0, 0, 0, .1);
  --hairline-inv: rgba(255, 255, 255, .14);
  --radius-lg: 28px;
  --radius-md: 20px;
  --col: 1120px;
  --gutter: 22px;
  --nav-h: 58px;   /* tall enough to carry the brand mark with air around it */
  --section-pad: clamp(80px, 11vw, 140px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (max-width: 734px) { :root { --gutter: 20px; } }
@media (max-width: 399px) { :root { --gutter: 16px; } }

/* 2. Fonts (Inter, SIL OFL, self-hosted) ----------------------------------- */
/* Google serves Inter as one variable font, so a single face covers every weight. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-var.woff2") format("woff2"); }

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.47 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol { margin: 0; }
p { text-wrap: pretty; } /* fewer one-word last lines where supported */
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .15em; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.section--dark :focus-visible { outline-color: var(--brand-light); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip {
  position: absolute; top: -100px; left: 16px; z-index: 100;
  padding: 10px 18px; border-radius: 980px;
  background: var(--brand); color: #fff; font-weight: 600;
}
.skip:focus { top: 12px; }

/* 4. Layout ---------------------------------------------------------------- */
.wrap { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow > * { max-width: 62ch; }
.section { padding-block: var(--section-pad); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--text-inv); }

/* 5. Type roles ------------------------------------------------------------ */
/* Used for the hero kicker and the country label on each member card. The hero
   sits under an 80px headline and needs more weight of its own, so it scales up
   separately below. */
.eyebrow { color: var(--brand); font-size: 15px; font-weight: 600; line-height: 1.2; }
.section__title {
  max-width: 24ch;
  font-size: clamp(32px, 1.4rem + 2.4vw, 56px);
  font-weight: 600; line-height: 1.08; letter-spacing: -.02em;
  text-wrap: balance;
}
.lede {
  margin-top: 20px; max-width: 30em;
  font-size: clamp(19px, 1rem + .6vw, 24px); line-height: 1.35;
  color: var(--text-2);
}
.lede p + p { margin-top: 1em; }
.section--dark .section__title { color: #fff; }
.section--dark .lede { color: var(--text-inv-2); }
.note {
  max-width: 44em; margin-top: clamp(32px, 4vw, 48px);
  font-size: 15px; line-height: 1.5; color: var(--text-inv-2);
}
.link-arrow { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: 17px; font-weight: 500; }
.link-arrow::after {
  content: ""; width: 7px; height: 7px; margin-left: 1px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(3px) rotate(45deg); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 980px;
  background: var(--brand); color: #fff; font-size: 17px; font-weight: 500;
  transition: background .2s var(--ease);
}
.btn:hover { background: var(--brand-hover); text-decoration: none; }
.btn:focus-visible { outline-offset: 4px; }

/* 6. Nav ------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(var(--col), 100% - 2 * var(--gutter)); min-height: var(--nav-h); margin-inline: auto;
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -.012em; white-space: nowrap;
}
.nav__brand:hover { text-decoration: none; }
.nav__mark { width: 38px; height: auto; }
.nav__name { padding-top: 1px; }
.nav__menu ul { display: flex; gap: 28px; }
.nav__menu a { display: inline-block; padding-block: 14px; color: var(--text); font-size: 13px; font-weight: 500; opacity: .8; transition: opacity .2s var(--ease); }
.nav__menu a:hover { opacity: 1; text-decoration: none; }
.nav__toggle { display: none; }
@media (max-width: 734px) {
  .nav__inner { flex-wrap: wrap; }
  .nav__menu { flex-basis: 100%; }
  .nav__menu ul { flex-direction: column; gap: 0; padding: 4px 0 12px; }
  .nav__menu a { display: block; padding: 12px 0; font-size: 17px; opacity: 1; border-bottom: 1px solid var(--hairline); }
  .nav__menu li:last-child a { border-bottom: 0; }
  html.js .nav__inner { flex-wrap: nowrap; }
  html.js .nav__toggle {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: none;
    color: var(--text); font: 500 13px/1 var(--font); cursor: pointer;
  }
  .nav__toggle-icon { position: relative; display: block; width: 18px; height: 12px; }
  .nav__toggle-icon::before, .nav__toggle-icon::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor;
    transition: transform .3s var(--ease), top .3s var(--ease);
  }
  .nav__toggle-icon::before { top: 0; }
  .nav__toggle-icon::after { top: 10.5px; }
  .nav[data-open="true"] .nav__toggle-icon::before { top: 5px; transform: rotate(45deg); }
  .nav[data-open="true"] .nav__toggle-icon::after { top: 5px; transform: rotate(-45deg); }
  html.js .nav__menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    padding: 0 var(--gutter);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hairline);
  }
  html.js .nav[data-open="true"] .nav__menu { display: block; }
}
@media (max-width: 399px) {
  .nav__brand { font-size: 13px; gap: 8px; }
  .nav__mark { width: 32px; }
  /* Hide the label visually but keep it as the button's accessible name. */
  .nav__toggle-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* 7. Hero, statement, band ------------------------------------------------- */
.hero { padding-top: clamp(56px, 8vw, 112px); text-align: center; }
.hero__copy { display: flex; flex-direction: column; align-items: center; }
.hero .eyebrow { font-size: clamp(16px, .85rem + .5vw, 20px); letter-spacing: -.01em; }
.hero__title {
  margin-top: 16px; max-width: 20ch;
  font-size: clamp(40px, 1.6rem + 4.2vw, 80px);
  font-weight: 600; line-height: 1.05; letter-spacing: -.028em;
  text-wrap: balance;
}
.hero__line { display: block; } /* each sentence balances on its own; a <br> would defeat balancing */
.hero__standfirst {
  margin-top: 24px; max-width: 34em;
  font-size: clamp(19px, 1rem + .6vw, 24px); line-height: 1.35; color: var(--text-2);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px; margin-top: 28px; }
.hero__globe { display: flex; justify-content: center; margin-top: clamp(40px, 6vw, 72px); }
.globe-mount { position: relative; width: min(100%, 720px); aspect-ratio: 1; }
.globe { width: 100%; height: auto; overflow: visible; }
/* While the WebGL globe is prepared (and once it is ready) the SVG steps aside;
   a soft disc the size of the sphere holds the space so nothing jumps. */
.globe-mount.is-loading .globe, .globe-mount.is-ready .globe { display: none; }
.globe-mount.is-loading::before {
  content: ""; position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #f3f7ff 0%, #e2ecfb 60%, #d4e3fa 100%);
  box-shadow: 0 0 40px rgba(3, 100, 184, .12);
}
.globe-canvas {
  display: block; width: 100%; height: 100%; opacity: 0;
  border-radius: 50%; cursor: grab; touch-action: pan-y;
}
.globe-canvas.is-dragging { cursor: grabbing; }
.globe-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.globe-mount.is-ready .globe-canvas, .globe-mount.is-ready .globe-overlay { opacity: 1; }
.globe-canvas:focus-visible { outline-offset: 8px; }
.g-glow { pointer-events: none; }
.g-rim { fill: none; stroke: var(--brand); stroke-opacity: .35; stroke-width: 1.5; }
.g-grat { fill: none; stroke: var(--brand); stroke-opacity: .18; stroke-width: 1; }
.g-arc { fill: none; stroke: var(--brand); stroke-opacity: .7; stroke-width: 1.5; stroke-linecap: round; }
.g-flow { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 30; opacity: 0; }
.g-node { fill: var(--brand); stroke: #fff; stroke-width: 3; }
.g-label { font: 500 15px var(--font); fill: var(--text); letter-spacing: -.01em; }
@media (max-width: 734px) { .g-label { display: none; } }

.statement { padding-top: clamp(72px, 9vw, 120px); text-align: center; }
.statement__text {
  max-width: 26em; margin-inline: auto;
  font-size: clamp(24px, 1.1rem + 1.4vw, 34px);
  font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--text-2);
}
.statement__lead { color: var(--text); }

.band { margin-top: clamp(72px, 9vw, 120px); padding-block: clamp(48px, 6vw, 72px); background: var(--bg-alt); }
.band__list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.band__list::before {
  content: ""; position: absolute; top: 7px; left: 12.5%; right: 12.5%; height: 1px;
  background: var(--brand); opacity: .35;
}
.band__item { display: flex; flex-direction: column; align-items: center; }
.band__node {
  position: relative; width: 15px; height: 15px; margin-bottom: 18px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px var(--bg-alt);
}
.band__place { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.band__firm { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--text-2); }
@media (max-width: 734px) {
  .band__list { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .band__list::before { display: none; }
  .band__node { margin-bottom: 12px; }
  .band__place { font-size: 19px; }
}

/* 8. What the network is: four commitments as a ruled list ---------------- */
.commitments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: clamp(40px, 5vw, 64px); }
.commitment { position: relative; padding-top: 22px; border-top: 1px solid var(--hairline); }
.commitment::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--brand); }
.commitment__title { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.commitment p { margin-top: 10px; color: var(--text-2); }
@media (max-width: 1068px) { .commitments { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 734px) { .commitments { grid-template-columns: 1fr; gap: 28px; } }

/* shared tile base, used by the service tiles below */
.tile { display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius-md); background: var(--bg-alt); }
.tile__title { font-size: clamp(26px, 1.2rem + 1vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }

/* 9. How a referral works: the dark sequence ------------------------------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: clamp(40px, 5vw, 64px); }
.steps::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hairline-inv); }
.step { position: relative; padding-top: 28px; }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--brand-light); }
.step__num {
  display: block; font-size: clamp(40px, 2rem + 1.5vw, 56px); line-height: 1;
  font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--brand-light);
}
.step p { margin-top: 14px; color: var(--text-inv-2); }
@media (max-width: 1068px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 48px; } }
@media (max-width: 734px) {
  .steps { grid-template-columns: 1fr; gap: 0; padding-left: 28px; }
  .steps::before { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .step { padding: 0 0 40px; }
  .step:last-child { padding-bottom: 0; }
  .step::before { top: 6px; left: -28px; width: 2px; height: 36px; }
}

/* 10. What member firms do: service tiles ---------------------------------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.tile--service { gap: 18px; }
.icon { width: 28px; height: 28px; color: var(--brand); }
.tile__title--small { font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
@media (max-width: 1068px) { .services { grid-template-columns: 1fr 1fr; } }
@media (max-width: 734px) { .services { grid-template-columns: 1fr; } }

/* 11. Member firms, governance, contact, footer ---------------------------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }   /* all four cards the same height */
.card {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(28px, 3.5vw, 40px); border-radius: var(--radius-lg); background: #fff;
}
.card__title { font-size: clamp(22px, 1.1rem + .6vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.card__scope { color: var(--text-2); }
.card .link-arrow { align-self: flex-start; margin-top: 14px; }
@media (max-width: 734px) { .cards { grid-template-columns: 1fr; } }

/* Governance and contact are both white, so they share one section's worth of space rather than two. */
#governance { padding-bottom: calc(var(--section-pad) / 2); }
#contact { padding-top: calc(var(--section-pad) / 2); }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: clamp(40px, 5vw, 64px); }
.col__title { font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.col p { margin-top: 12px; color: var(--text-2); }
@media (max-width: 1068px) { .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 734px) { .cols { grid-template-columns: 1fr; gap: 32px; } }

.panel { padding: clamp(36px, 5vw, 72px); border-radius: var(--radius-lg); background: var(--bg-alt); }
.panel__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: clamp(32px, 4vw, 48px); }
.panel__cols p { margin-top: 12px; color: var(--text-2); }
.panel__cols .link-arrow { margin-top: 10px; }
@media (max-width: 734px) { .panel__cols { grid-template-columns: 1fr; gap: 32px; } }

.footer { padding: clamp(32px, 4vw, 44px) 0 clamp(40px, 5vw, 56px); background: var(--bg-alt); font-size: 12px; line-height: 1.5; color: var(--text-2); }
.footer__top { display: flex; align-items: center; gap: 36px; }   /* logo beside the notice */
.footer__logo { flex: none; width: 160px; height: auto; }
.footer__notice { flex: 1; min-width: 0; }
@media (max-width: 734px) {
  .footer__top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__logo { width: 140px; }
}
.footer__notice p + p { margin-top: 10px; }
.footer__notice strong { color: var(--text); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--hairline); }
.footer__links a { display: inline-block; padding-block: 13px; color: var(--text); }
.footer__colophon { margin-top: 6px; text-align: center; }

/* 12. Motion (all of it lives behind the no-preference query) -------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
  html.js .reveal.is-in { opacity: 1; transform: none; }
  html.js .reveal:nth-child(2) { transition-delay: .06s; }
  html.js .reveal:nth-child(3) { transition-delay: .12s; }
  html.js .reveal:nth-child(4) { transition-delay: .18s; }
  html.js .reveal:nth-child(5) { transition-delay: .24s; }
  html.js .reveal:nth-child(6) { transition-delay: .3s; }

  .globe-canvas, .globe-overlay { transition: opacity .7s var(--ease); }

  .g-rim, .g-grats path, .g-glow { animation: g-fade .9s var(--ease) both; }
  /* One dash longer than any arc (build_globe.ARC_DASH) hides each arc at offset 360 and
     reveals it fully at 0, without relying on pathLength support. */
  .g-arcs path { stroke-dasharray: 360; stroke-dashoffset: 360; animation: g-draw 1.2s var(--ease) .3s forwards; }
  .g-arcs path:nth-child(2) { animation-delay: .42s; }
  .g-arcs path:nth-child(3) { animation-delay: .54s; }
  .g-arcs path:nth-child(4) { animation-delay: .66s; }
  .g-arcs path:nth-child(5) { animation-delay: .78s; }
  .g-arcs path:nth-child(6) { animation-delay: .9s; }
  .g-node { transform-box: fill-box; transform-origin: center; animation: g-pop .5s var(--ease) 1s both; }
  .g-nodes circle:nth-child(2) { animation-delay: 1.1s; }
  .g-nodes circle:nth-child(3) { animation-delay: 1.2s; }
  .g-nodes circle:nth-child(4) { animation-delay: 1.3s; }
  .g-labels text { animation: g-fade .6s var(--ease) 1.5s both; }
  .g-flows path { animation: g-fade .8s var(--ease) 2.2s both, g-flow 12s linear 2.2s infinite; }
}
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-draw { to { stroke-dashoffset: 0; } }
@keyframes g-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes g-flow { to { stroke-dashoffset: -350; } } /* ten 35-unit dash periods: a seamless loop */