/* ============================================================
   Linkstone Holdings — institutional terminal
   One system: mint-ivory paper, deep pine chapters, emerald accent,
   gold hairlines. Sora display / Manrope body / Azeret Mono labels.
   ============================================================ */

:root {
  /* palette */
  --pine-950: #06120d;
  --pine-900: #081711;
  --pine-800: #0f231b;
  --ink:      #0a1a13;
  --ink-soft: #4a5f54;
  --emerald:  #12805c;   /* the accent on light */
  --emerald-deep: #0d6448;
  --emerald-hi: #2fd592; /* highlights on dark */
  --sage:     #b7cfc2;   /* secondary text on dark */
  --ivory:    #f2f7f1;   /* warm mint-ivory paper */
  --paper:    #fbfdfa;
  --gold:     #3f8f5f;   /* moss green accent on light */
  --gold-hi:  #9fe3c0;   /* soft mint accent on dark */

  /* hairlines + glass */
  --line:        rgba(10, 26, 19, .1);
  --line-strong: rgba(10, 26, 19, .16);
  --line-dark:   rgba(255, 255, 255, .1);
  --line-gold:   rgba(63, 143, 95, .38);
  --line-gold-dark: rgba(159, 227, 192, .32);
  --glass-light: rgba(255, 255, 255, .72);
  --glass-dark:  rgba(255, 255, 255, .05);
  --shadow-light: 0 1px 2px rgba(6, 18, 13, .04), 0 24px 72px -46px rgba(6, 18, 13, .5);
  --shadow-dark:  0 24px 54px -36px rgba(0, 0, 0, .9);

  /* type */
  --font-display: "Sora", "Manrope", Verdana, sans-serif;
  --font-body: "Manrope", Verdana, Geneva, sans-serif;
  --font-mono: "Azeret Mono", "SFMono-Regular", Menlo, monospace;
  --text-hero: clamp(2.85rem, 6.1vw, 5.7rem);
  --text-h2: clamp(2rem, 4vw, 3.4rem);
  --text-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --text-body: clamp(1rem, 1.15vw, 1.125rem);
  --text-eyebrow: .6875rem;
  --text-stat: clamp(2.9rem, 5vw, 4.8rem);

  /* motion */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-ios:  cubic-bezier(0.32, 0.72, 0, 1);
  --dur-micro: 120ms;
  --dur-ui: 260ms;
  --dur-reveal: 480ms;
  --dur-draw: 1200ms;

  /* surface + rhythm */
  --radius-lg: 1.25rem;
  --radius-inner: .85rem;
  --section-pad: clamp(5rem, 10vh, 8rem);
  --container: min(100% - clamp(2.5rem, 7vw, 7rem), 76rem);
  --container-wide: min(100% - clamp(2.5rem, 5vw, 5rem), 88rem);
  --nav-height: 4.25rem;
}

/* ---------------- base ---------------- */

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

html {
  min-width: 320px;
  overflow-x: clip;
  background:
    radial-gradient(52rem 30rem at 16% -4%, rgba(18, 128, 92, .1), transparent 70%),
    radial-gradient(44rem 26rem at 92% 10%, rgba(63, 143, 95, .07), transparent 70%),
    linear-gradient(180deg, #f6faf4 0%, #eef5ee 48%, #f4f9f3 100%);
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* faint 44px paper grid, faded at both ends */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(10, 26, 19, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 26, 19, .04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, transparent 0, #000 7rem, #000 62%, transparent 96%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7rem, #000 62%, transparent 96%);
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

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

.chapter-dark :focus-visible,
.page-header :focus-visible,
.portfolio-vault :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible {
  outline-color: var(--emerald-hi);
}

::selection {
  color: var(--pine-950);
  background: rgba(159, 227, 192, .5);
}

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

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  color: var(--ivory);
  background: var(--pine-950);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-ui) var(--ease-ios);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Static, GPU-cheap texture. No mix-blend-mode: a fixed full-viewport
   blend layer forces a whole-page composite on every scroll frame. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

/* ---------------- nav ---------------- */

.site-nav {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  z-index: 100;
  width: min(calc(100% - 2rem), 75rem);
  min-height: var(--nav-height);
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: rgba(252, 254, 251, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 18px 60px -42px rgba(6, 18, 13, .55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    background var(--dur-ui) var(--ease-soft),
    border-color var(--dur-ui) var(--ease-soft),
    box-shadow var(--dur-ui) var(--ease-soft);
}

.site-nav.is-dark {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(8, 23, 17, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 22px 70px -38px rgba(0, 0, 0, .65);
}

.nav-inner {
  display: flex;
  min-height: calc(var(--nav-height) - 2px);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem .58rem .5rem 1.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .22em;
  transition: color var(--dur-ui) var(--ease-soft);
}

.site-nav.is-dark .wordmark {
  color: var(--ivory);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.3vw, 1.4rem);
}

.nav-link {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-ios);
}

.site-nav.is-dark .nav-link {
  color: var(--sage);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--ink);
}

.site-nav.is-dark .nav-link:hover,
.site-nav.is-dark .nav-link[aria-current="page"] {
  color: var(--ivory);
}

.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: .08em;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--gold);
}

.site-nav.is-dark .nav-link[aria-current="page"]::after {
  background: var(--gold-hi);
}

.hamburger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 26, 19, .06);
}

.site-nav.is-dark .hamburger {
  background: rgba(242, 247, 241, .09);
}

.hamburger span {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 18px;
  height: 1.5px;
  background: var(--ink);
  transform-origin: center;
  transition:
    transform var(--dur-ui) var(--ease-ios),
    top var(--dur-ui) var(--ease-ios),
    background var(--dur-ui) var(--ease-ios);
}

.site-nav.is-dark .hamburger span {
  background: var(--ivory);
}

.hamburger span:last-child {
  top: 25px;
}

.hamburger[aria-expanded="true"] span:first-child {
  top: 22px;
  transform: rotate(45deg);
}

.hamburger[aria-expanded="true"] span:last-child {
  top: 22px;
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 7rem 1.25rem 2rem;
  color: var(--ivory);
  background: rgba(8, 23, 17, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-1.5rem);
  transition:
    opacity var(--dur-ui) var(--ease-soft),
    transform var(--dur-ui) var(--ease-ios);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-menu nav {
  display: grid;
  width: min(100%, 28rem);
  gap: .85rem;
}

.mobile-menu a {
  display: block;
  overflow: hidden;
  min-height: 54px;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.mobile-menu a span {
  display: block;
  transform: translateY(110%);
  transition: transform 600ms var(--ease-expo);
}

.mobile-menu.is-open a span {
  transform: translateY(0);
  transition-delay: calc(var(--i) * 60ms);
}

/* ---------------- buttons ---------------- */

.nav-cta,
.button-primary,
.button-secondary,
.button-ghost,
.footer-cta,
.contact-submit,
.ghost-gold {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transform: translateZ(0);
  transition:
    color var(--dur-micro) var(--ease-ios),
    background var(--dur-micro) var(--ease-ios),
    border-color var(--dur-micro) var(--ease-ios),
    box-shadow var(--dur-micro) var(--ease-ios),
    transform var(--dur-micro) var(--ease-ios);
}

.nav-cta:hover,
.button-primary:hover,
.button-secondary:hover,
.button-ghost:hover,
.footer-cta:hover,
.contact-submit:hover,
.ghost-gold:hover {
  transform: translateY(-1px);
}

.nav-cta:active,
.button-primary:active,
.button-secondary:active,
.button-ghost:active,
.footer-cta:active,
.contact-submit:active,
.ghost-gold:active,
.hamburger:active,
.accordion-trigger:active {
  transform: scale(.98);
}

/* the one signature: diagonal shine sweep on hover (background-position
   based so buttons don't need overflow:hidden — the glow lives outside) */
.nav-cta::before,
.button-primary::before,
.button-secondary::before,
.button-ghost::before,
.footer-cta::before,
.contact-submit::before,
.ghost-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%) no-repeat;
  background-size: 300% 100%;
  background-position: 130% 0;
}

.nav-cta:hover::before,
.button-primary:hover::before,
.button-secondary:hover::before,
.button-ghost:hover::before,
.footer-cta:hover::before,
.contact-submit:hover::before,
.ghost-gold:hover::before {
  background-position: -130% 0;
  transition: background-position 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ambient aura on the primary CTAs: emerald-gold conic glow behind the
   pill, rotating on hover */
@property --glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.button-primary::after,
.footer-cta::after,
.contact-submit::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--glow-angle),
    rgba(47, 213, 146, .6),
    rgba(159, 227, 192, .5),
    rgba(18, 128, 92, .65),
    rgba(159, 227, 192, .45),
    rgba(47, 213, 146, .6));
  filter: blur(14px);
  opacity: .38;
  transition: opacity 320ms var(--ease-soft);
}

.button-primary:hover::after,
.footer-cta:hover::after,
.contact-submit:hover::after {
  opacity: .7;
  animation: glow-rotate 4s linear infinite;
}

@keyframes glow-rotate {
  to { --glow-angle: 1turn; }
}

.nav-cta,
.button-primary,
.contact-submit {
  padding: .4rem .45rem .4rem 1.3rem;
  color: var(--ivory);
  background: var(--pine-950);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px -26px rgba(6, 18, 13, .85);
}

.nav-cta:hover,
.button-primary:hover,
.contact-submit:hover {
  background: #0c2119;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 52px -26px rgba(6, 18, 13, .95);
}

.chip {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  color: #f6faf5;
  background: var(--emerald);
}

/* arrow swap: the resting arrow exits up-right, its twin enters from
   down-left. One shared grid cell, transform-only. */
.chip-a,
.chip-b {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 4px 4px 0 0; /* optical: the arrow glyph's ink sits high-right in its em box */
  line-height: 1;
  transition: transform 340ms var(--ease-expo);
}

.chip-b {
  transform: translate(-130%, 130%);
}

.nav-cta:hover .chip-a,
.button-primary:hover .chip-a,
.footer-cta:hover .chip-a,
.contact-submit:hover .chip-a {
  transform: translate(130%, -130%);
}

.nav-cta:hover .chip-b,
.button-primary:hover .chip-b,
.footer-cta:hover .chip-b,
.contact-submit:hover .chip-b {
  transform: translate(0, 0);
}

/* inverted primary on dark bands */
.footer-cta {
  padding: .4rem .45rem .4rem 1.3rem;
  color: var(--pine-950);
  background: var(--ivory);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 40px -26px rgba(0, 0, 0, .8);
}

.footer-cta:hover {
  background: #fdfefc;
}

.footer-cta::before {
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
}

.button-secondary,
.button-ghost {
  padding: .6rem 1.4rem;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.button-secondary:hover,
.button-ghost:hover {
  border-color: rgba(18, 128, 92, .45);
  background: rgba(255, 255, 255, .8);
}

.ghost-gold {
  margin-top: 2rem;
  padding: .6rem 1.5rem;
  color: var(--ivory);
  border: 1px solid var(--line-gold-dark);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.ghost-gold::before {
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .12) 50%, transparent 68%);
}

.ghost-gold:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

/* ---------------- layout + sections ---------------- */

.page {
  min-height: 100dvh;
}

.section {
  position: relative;
  padding-block: var(--section-pad);
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.container-wide {
  width: var(--container-wide);
  margin-inline: auto;
}

.chapter-dark,
.page-header,
.portfolio-vault {
  position: relative;
  color: var(--ivory);
  background:
    radial-gradient(56rem 28rem at 84% -8%, rgba(47, 213, 146, .07), transparent 62%),
    var(--pine-900);
}

/* faint grid inside dark chapters, faded at both ends */
.chapter-dark::before,
.page-header::before,
.portfolio-vault::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
}

.chapter-dark > *,
.page-header > *,
.portfolio-vault > * {
  position: relative;
}

/* ---------------- type ---------------- */

.eyebrow {
  margin: 0 0 1rem;
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1.4;
  text-transform: uppercase;
}

.chapter-dark .eyebrow,
.page-header .eyebrow,
.portfolio-vault .eyebrow,
.site-footer .eyebrow {
  color: var(--gold-hi);
}

h1,
h2,
h3,
.pull-line,
.stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.03em;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-hero);
  line-height: 1.02;
}

h2 {
  max-width: 18ch;
  font-size: var(--text-h2);
  line-height: 1.06;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: -.02em;
}

p {
  margin: 0;
  max-width: 62ch;
}

.lead {
  margin-top: 1.35rem;
  color: var(--ink-soft);
  font-size: var(--text-body);
}

.chapter-dark .lead,
.chapter-dark p,
.page-header p,
.portfolio-vault p {
  color: var(--sage);
}

/* two-column section header: title left, lead right */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

.section-head .lead {
  margin-top: 0;
  justify-self: end;
}

/* ---------------- reveal system (fail-safe) ----------------
   Content is visible by default. The hidden state exists ONLY on
   .reveal-pending, a class JS adds at observe time. */

html.js .reveal-pending {
  opacity: 0;
  transform: translateY(18px) scale(.98);
}

html.js .reveal-pending.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-reveal) var(--ease-expo),
    transform var(--dur-reveal) var(--ease-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

.draw-path {
  fill: none;
}

html.js .draw-path {
  stroke-dasharray: var(--path-length, 700);
  stroke-dashoffset: var(--path-length, 700);
}

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  overflow: clip;
  padding: calc(var(--nav-height) + 4.5rem) 0 4rem;
}

.hero-stage {
  width: var(--container-wide);
  margin-inline: auto;
}

.hero-copy {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}

.hero-copy .eyebrow {
  color: var(--emerald);
}

.hero-title {
  letter-spacing: -.035em;
}

.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
  margin-bottom: -.06em;
}

.line-mask > span {
  display: block;
}

html.js .hero:not(.is-ready) .line-mask > span {
  transform: translateY(110%);
}

.hero.is-ready .line-mask > span {
  transform: translateY(0);
  transition: transform 700ms var(--ease-expo);
  transition-delay: calc(var(--i) * 90ms);
}

.underline-wrap {
  position: relative;
  display: inline-block;
}

.hero-underline {
  position: absolute;
  right: -.08em;
  bottom: -.14em;
  width: 103%;
  height: .2em;
  color: var(--emerald);
}

.hero-subline {
  margin: 1.6rem auto 0;
  max-width: 44rem;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
  margin-top: 2rem;
}

/* the atlas panel — static flow by default; the pinned scrub
   layout only applies when JS enables it */
.hero-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(1400px, 96vw);
  min-height: clamp(26rem, 56vh, 34rem);
  margin: 3.5rem auto 0;
  padding: 1.1rem 1.3rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 1.5rem;
  color: var(--ivory);
  background:
    radial-gradient(46rem 24rem at 50% 12%, rgba(47, 213, 146, .1), transparent 68%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    var(--pine-900);
  background-size: auto, 54px 54px, 54px 54px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 34px 90px -48px rgba(4, 14, 10, .85);
}

.hero.is-pinned .hero-stage {
  position: relative;
  height: calc(100dvh - var(--nav-height) - 8.5rem);
  min-height: 34rem;
}

.hero.is-pinned .hero-copy {
  position: relative;
  z-index: 2;
}

.hero.is-pinned .hero-panel {
  position: absolute;
  left: 50%;
  top: 24rem;
  height: min(78vh, 46rem);
  margin: 0;
  transform: translateX(-50%);
  will-change: transform;
}

.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.panel-top span:last-child {
  color: var(--gold-hi);
}

.panel-canvas {
  position: relative;
  display: grid;
  place-content: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
}

.atlas-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.atlas-ghost {
  fill: none;
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 1;
  stroke-dasharray: 5 7;
}

.atlas-live {
  fill: none;
  stroke: url(#atlas-grad);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(47, 213, 146, .35));
}

.atlas-svg-m {
  display: none;
}

.atlas-live-m {
  fill: none;
  stroke: url(#atlas-grad-m);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(47, 213, 146, .35));
}

.atlas-dot {
  fill: var(--emerald-hi);
  stroke: rgba(159, 227, 192, .6);
  stroke-width: 1.5;
}

.atlas-label {
  fill: var(--gold-hi);
  font-family: "Azeret Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
}

.atlas-ring {
  fill: none;
  stroke: rgba(255, 255, 255, .07);
  stroke-width: 1;
}

.atlas-coord {
  fill: rgba(183, 207, 194, .5);
  font-family: "Azeret Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .12em;
}

.atlas-runner {
  fill: var(--emerald-hi);
  opacity: 0;
}

.panel-stat {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .55rem;
  text-align: center;
}

.panel-stat-label {
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.panel-stat strong {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}

.panel-stat-rule {
  width: 4rem;
  height: 1px;
  background: var(--line-gold-dark);
}

.panel-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel-chips li {
  padding: .55rem .95rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--sage);
  font-size: .82rem;
  font-weight: 600;
}

.panel-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.panel-metrics > div {
  display: grid;
  gap: .3rem;
  padding: .35rem 1.2rem;
}

.panel-metrics > div + div {
  border-left: 1px solid rgba(255, 255, 255, .07);
}

.panel-metrics dt {
  order: 2;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.panel-metrics dd {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ---------------- figures (hairline border-grid) ---------------- */

.figures {
  padding-top: clamp(3.5rem, 7vh, 5rem);
}

.figures-grid {
  counter-reset: fig;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
  box-shadow: var(--shadow-light);
}

.figure {
  position: relative;
  min-height: 15rem;
  padding: 1.6rem 1.5rem 1.5rem;
  background: var(--paper);
}

.figure::before {
  counter-increment: fig;
  content: "0" counter(fig);
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
}

.stat-value {
  display: flex;
  min-height: 5.4rem;
  align-items: center;
  color: var(--ink);
  font-size: var(--text-stat);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.stat-label {
  display: block;
  margin: .8rem 0 .55rem;
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.stat-caption {
  color: var(--ink-soft);
  font-size: .95rem;
}

.infinity-svg {
  width: min(7.6rem, 100%);
  height: auto;
}

.infinity-main,
.infinity-glint {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.infinity-main {
  stroke: var(--ink);
  stroke-width: 8;
}

.infinity-glint {
  stroke: var(--gold);
  stroke-width: 9;
  stroke-dasharray: 26 260;
  opacity: .55;
  animation: infinity-glint 9s var(--ease-soft) infinite;
}

@keyframes infinity-glint {
  from { stroke-dashoffset: 290; opacity: .05; }
  18% { opacity: .55; }
  42% { opacity: .2; }
  to { stroke-dashoffset: -290; opacity: .05; }
}

/* ---------------- approach + pillars ---------------- */

.pillars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3.4rem;
  padding-top: 2.2rem;
}

.pillar-line {
  position: absolute;
  top: .55rem;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(159, 227, 192, .2);
}

.pillar-line span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-hi), var(--emerald-hi));
  transform: scaleX(0);
  transform-origin: left;
}

.pillar {
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--shadow-dark);
}

.pillar h3 {
  color: var(--ivory);
}

html.js .pillar h3 {
  opacity: .4;
}

.pillar p {
  margin-top: .85rem;
  color: var(--sage);
  font-size: .98rem;
}

/* ---------------- bento sectors ---------------- */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.sector-card {
  grid-column: span 4;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  transition:
    border-color var(--dur-ui) var(--ease-ios),
    box-shadow var(--dur-ui) var(--ease-ios),
    transform var(--dur-ui) var(--ease-ios);
}

.sector-card.feature {
  grid-column: span 8;
}

.sector-card:hover {
  border-color: var(--line-gold);
}

.sector-card.feature:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow-light);
}

.sector-inner {
  display: grid;
  min-height: 100%;
  align-content: space-between;
  gap: 2.2rem;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  border-radius: var(--radius-inner);
  background: var(--paper);
  box-shadow: var(--shadow-light);
}

.glyph {
  width: 4.2rem;
  height: 4.2rem;
  color: var(--emerald);
}

.sector-card h3 {
  margin-top: .9rem;
}

.sector-card p {
  margin-top: .7rem;
  color: var(--ink-soft);
  font-size: .98rem;
}

/* ---------------- criteria ledger ---------------- */

.ledger-card {
  margin-top: 3rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.ledger-card-inner {
  overflow: hidden;
  border-radius: var(--radius-inner);
  background: var(--paper);
  box-shadow: var(--shadow-light);
}

.criteria-table {
  width: 100%;
  border-collapse: collapse;
}

.criteria-table th,
.criteria-table td {
  padding: 1.15rem clamp(1rem, 2vw, 1.6rem);
  text-align: left;
  vertical-align: top;
}

.criteria-table th {
  width: 26%;
  color: var(--emerald-deep);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.criteria-table td {
  color: var(--ink);
}

.criteria-table tr {
  position: relative;
}

.criteria-table tr + tr th,
.criteria-table tr + tr td {
  border-top: 1px solid var(--line);
}

.criteria-table tr::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent 82%);
  transform: scaleX(var(--row-scale, 0));
  transform-origin: left;
}

/* ---------------- presence ---------------- */

.presence-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(20rem, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.office-block {
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line-gold-dark);
  color: var(--sage);
  font-style: normal;
  font-size: .95rem;
}

.presence-card {
  position: relative;
  overflow: hidden;
  min-height: clamp(22rem, 40vw, 30rem);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    rgba(255, 255, 255, .04);
  background-size: 52px 52px, 52px 52px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* registry visual: two arcs complete into one ring on hover while the
   count flips 2 -> 1, and six chips scatter out from the center */

.registry-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.registry-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 52% at 50% 46%, rgba(47, 213, 146, .13), transparent 72%);
}

.registry-donut {
  position: relative;
  z-index: 1;
  width: clamp(9.5rem, 16vw, 12rem);
}

.registry-donut svg {
  width: 100%;
  height: auto;
  transform: rotate(0deg);
}

.donut-track {
  fill: none;
  stroke: rgba(255, 255, 255, .1);
  stroke-width: 7;
}

.donut-arc {
  fill: none;
  stroke-width: 10;
  stroke-linecap: butt;
  stroke-dasharray: 289.03;
  stroke-dashoffset: 167.03; /* resting: 122 of 289 shown per arc */
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke-dashoffset 700ms var(--ease-expo);
}

.donut-us {
  stroke: var(--emerald-hi);
  transform: rotate(-90deg);
}

.donut-uk {
  stroke: var(--gold-hi);
  transform: rotate(90deg);
}

.presence-card:hover .donut-arc,
.presence-card.is-active .donut-arc {
  stroke-dashoffset: 144.52; /* exactly half each: the ring closes */
}

.donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.donut-count {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  gap: .15rem;
  transition: opacity 400ms var(--ease-soft), transform 400ms var(--ease-expo);
}

.donut-count strong {
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
}

.donut-count small {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.donut-count-one {
  opacity: 0;
  transform: translateY(10px);
}

.presence-card:hover .donut-count-two,
.presence-card.is-active .donut-count-two {
  opacity: 0;
  transform: translateY(-10px);
}

.presence-card:hover .donut-count-one,
.presence-card.is-active .donut-count-one {
  opacity: 1;
  transform: translateY(0);
}

.registry-chips {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.registry-chips li {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(8, 23, 17, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--sage);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(0, 0) scale(.85);
  transition: transform 550ms var(--ease-expo), opacity 380ms var(--ease-soft);
}

.registry-chips li:nth-child(2),
.registry-chips li:nth-child(5) {
  transition-delay: 45ms;
}

.registry-chips li:nth-child(3),
.registry-chips li:nth-child(6) {
  transition-delay: 90ms;
}

.presence-card:hover .registry-chips li,
.presence-card.is-active .registry-chips li {
  opacity: 1;
  transform: translate(var(--tx), var(--ty)) scale(1);
}

.registry-chips .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.dot-us {
  background: var(--emerald-hi);
}

.dot-uk {
  background: var(--gold-hi);
}

.registry-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.1rem;
  z-index: 1;
  color: rgba(183, 207, 194, .55);
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
  transition: opacity 300ms var(--ease-soft);
}

.presence-card:hover .registry-hint,
.presence-card.is-active .registry-hint {
  opacity: 0;
}

.registry-rise {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(47, 213, 146, .13));
  transform: translateY(100%);
  transition: transform 650ms var(--ease-expo);
}

.presence-card:hover .registry-rise,
.presence-card.is-active .registry-rise {
  transform: translateY(0);
}

/* ---------------- inner page header ---------------- */

.page-header {
  display: grid;
  align-items: end;
  min-height: 50dvh;
  padding: calc(var(--nav-height) + 5rem) 0 4rem;
  overflow: hidden;
}

.page-header h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 7.5vw, 6rem);
  line-height: .98;
}

.page-header p {
  margin-top: 1.1rem;
  max-width: 52ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-style: italic;
  line-height: 1.5;
}

/* ---------------- editorial split (who we are) ---------------- */

.editorial-split {
  display: grid;
  grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.sticky-note {
  position: sticky;
  top: calc(var(--nav-height) + 2.5rem);
  padding-left: 1.2rem;
  border-left: 2px solid var(--line-gold);
}

.pull-line {
  color: var(--ink);
  font-size: clamp(1.55rem, 2.6vw, 2.3rem);
  line-height: 1.16;
}

.prose-stack {
  display: grid;
  gap: 1.2rem;
}

.prose-stack p {
  color: var(--ink-soft);
}

/* ---------------- legal / privacy ---------------- */

.legal-shell {
  padding-block: clamp(2.5rem, 5vh, 4rem) var(--section-pad);
}

.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
}

.legal-aside {
  align-self: start;
}

.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .8rem;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  color: var(--emerald-deep);
  background: rgba(18, 128, 92, .06);
  font-family: var(--font-mono);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.legal-updated::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(18, 128, 92, .16);
}

.legal-toc-title {
  margin: 1.9rem 0 .85rem;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: .67rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.legal-toc {
  display: grid;
  gap: .05rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.legal-toc a {
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: .35rem;
  padding: .34rem .5rem;
  border-radius: .55rem;
  color: var(--ink-soft);
  font-size: .875rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-soft), background var(--dur-ui) var(--ease-soft);
}

.legal-toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .02em;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: var(--ink);
  background: rgba(18, 128, 92, .07);
  outline: none;
}

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

.legal-intro > p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}

.legal-intro > p + p {
  margin-top: 1rem;
}

.legal-doc section {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-height) + 1.5rem);
}

.legal-doc section h2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: baseline;
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  font-weight: 600;
  line-height: 1.16;
}

.legal-num {
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  transform: translateY(-.12em);
}

.legal-doc p {
  color: var(--ink-soft);
}

.legal-doc p + p {
  margin-top: .9rem;
}

.legal-list {
  display: grid;
  gap: .58rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.legal-list li {
  position: relative;
  padding-left: 1.45rem;
  color: var(--ink-soft);
}

.legal-list li::before {
  content: "";
  position: absolute;
  left: .12rem;
  top: .62em;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(63, 143, 95, .14);
}

.legal-list li strong {
  color: var(--ink);
  font-weight: 600;
}

.legal-address {
  margin-top: 1.2rem;
  padding: 1.25rem 1.45rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-gold);
  border-radius: var(--radius-inner);
  background: var(--glass-light);
  font-style: normal;
  line-height: 1.72;
}

.legal-address strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--ink);
  font-weight: 600;
}

.legal-address a {
  color: var(--emerald-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--line-gold);
}

.legal-address a:hover {
  color: var(--emerald);
}

@media (min-width: 62rem) {
  .legal-grid {
    grid-template-columns: 15.5rem minmax(0, 1fr);
  }
  .legal-aside {
    position: sticky;
    top: calc(var(--nav-height) + 2rem);
  }
}

/* ---------------- values (dark 2x2) ---------------- */

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.value-card {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--shadow-dark);
}

.value-inner {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 15rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
}

.value-number {
  color: var(--gold-hi);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.value-card h3 {
  margin-top: 1.2rem;
  color: var(--ivory);
}

.value-card p {
  margin-top: .8rem;
  color: var(--sage);
  font-size: .98rem;
}

/* ---------------- timeline ---------------- */

.timeline {
  position: relative;
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-left: clamp(2.2rem, 4vw, 3.6rem);
}

.timeline-spine {
  position: absolute;
  top: .4rem;
  bottom: .4rem;
  left: .55rem;
  width: 1px;
  background: rgba(63, 143, 95, .25);
}

.timeline-spine span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--emerald), var(--gold));
  transform: scaleY(0);
  transform-origin: top;
}

.timeline-item {
  position: relative;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(clamp(2.2rem, 4vw, 3.6rem) * -1 - .01rem);
  top: 1.55rem;
  width: .9rem;
  height: .9rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--ivory);
}

.timeline-item p {
  margin-top: .6rem;
  color: var(--ink-soft);
}

/* ---------------- testimonials masonry ---------------- */

.masonry {
  columns: 2 21rem;
  column-gap: 1rem;
  margin-top: 3rem;
}

.quote-card {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 1rem;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), var(--shadow-light);
  break-inside: avoid;
  transition:
    border-color var(--dur-ui) var(--ease-ios),
    transform var(--dur-ui) var(--ease-ios);
}

.quote-card:hover {
  border-color: var(--line-gold);
  transform: translateY(-3px);
}

.quote-card::before {
  content: "\201C";
  position: absolute;
  top: -.6rem;
  left: .9rem;
  color: rgba(18, 128, 92, .1);
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 1;
}

.quote-card.dark {
  border-color: rgba(255, 255, 255, .1);
  color: var(--ivory);
  background: var(--pine-900);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow-dark);
}

.quote-card.dark::before {
  color: rgba(159, 227, 192, .14);
}

.quote-card blockquote {
  position: relative;
  margin: 0;
}

.quote-card blockquote p {
  max-width: none;
}

.quote-card.dark blockquote p {
  color: var(--sage);
}

.quote-meta {
  position: relative;
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-gold);
}

.quote-card.dark .quote-meta {
  border-top-color: var(--line-gold-dark);
}

.quote-name {
  display: block;
  color: var(--emerald-deep);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.quote-card.dark .quote-name {
  color: var(--gold-hi);
}

.quote-role {
  display: block;
  margin-top: .3rem;
  color: var(--ink-soft);
  font-size: .92rem;
}

.quote-card.dark .quote-role {
  color: var(--sage);
}

/* ---------------- accordion ---------------- */

.accordion {
  display: grid;
  gap: .8rem;
  margin-top: 3rem;
}

.accordion-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: border-color var(--dur-ui) var(--ease-ios);
}

.accordion-item:hover {
  border-color: rgba(18, 128, 92, .35);
}

.accordion-trigger {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 2.75rem;
  gap: 1rem;
  align-items: center;
  min-height: 4.4rem;
  padding: 1.1rem 1.25rem;
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -.01em;
  transition: color var(--dur-micro) var(--ease-ios);
}

.accordion-trigger:hover {
  color: var(--emerald-deep);
}

.accordion-icon {
  position: relative;
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgba(18, 128, 92, .25);
  border-radius: 999px;
  background: rgba(18, 128, 92, .07);
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  width: .95rem;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-ui) var(--ease-ios);
}

.accordion-icon::after {
  transform: rotate(90deg);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon::after {
  transform: rotate(45deg);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon::before {
  transform: rotate(-45deg);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-ui) var(--ease-ios);
}

.accordion-trigger[aria-expanded="true"] + .accordion-panel {
  grid-template-rows: 1fr;
}

.accordion-panel > div {
  overflow: hidden;
}

.accordion-panel p {
  padding: 0 1.25rem 1.3rem;
  color: var(--ink-soft);
}

/* ---------------- contact ---------------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, .72fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-top: 3rem;
}

.form-shell {
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.contact-form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  border-radius: var(--radius-inner);
  background: var(--paper);
  box-shadow: var(--shadow-light);
}

.field {
  display: grid;
  gap: .45rem;
}

.field label {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: .8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: .7rem;
  color: var(--ink);
  background: #fff;
  transition:
    border-color var(--dur-micro) var(--ease-ios),
    box-shadow var(--dur-micro) var(--ease-ios);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 4px rgba(18, 128, 92, .12);
  outline: none;
}

.form-note,
.form-status {
  color: var(--ink-soft);
  font-size: .92rem;
}

.form-status {
  min-height: 1.4rem;
}

.details-list {
  display: grid;
}

.detail-row {
  padding: 1.2rem 0;
  border-top: 1px solid var(--line-gold);
}

.detail-row:first-child {
  border-top: 0;
  padding-top: .4rem;
}

.detail-label {
  display: block;
  color: var(--emerald-deep);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.detail-row p,
.detail-row a {
  display: block;
  margin-top: .35rem;
  color: var(--ink-soft);
}

.detail-row a:hover {
  color: var(--emerald-deep);
}

/* ---------------- portfolio vault ---------------- */

.portfolio-vault {
  display: grid;
  place-items: center;
  min-height: 88dvh;
  padding-block: clamp(7rem, 13vh, 10rem);
  overflow: hidden;
}

.seal {
  position: absolute;
  width: min(64vw, 36rem);
  color: var(--gold-hi);
  opacity: .16;
}

.portfolio-content {
  position: relative;
  width: min(100% - 2.5rem, 66ch);
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow-dark);
  text-align: center;
}

.portfolio-content h2 {
  max-width: none;
  margin-inline: auto;
}

.portfolio-content p {
  margin: 1.3rem auto 0;
}

/* ---------------- footer ---------------- */

.site-footer {
  position: relative;
  padding-block: clamp(4.5rem, 9vh, 7rem) 2.5rem;
  color: var(--ivory);
  background:
    radial-gradient(50rem 26rem at 82% 118%, rgba(47, 213, 146, .1), transparent 62%),
    var(--pine-950);
}

.site-footer h2 {
  max-width: 16ch;
  color: var(--ivory);
}

.site-footer em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-hi);
}

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}

.footer-rule {
  height: 1px;
  margin: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
  background: linear-gradient(90deg, rgba(159, 227, 192, .55), rgba(159, 227, 192, .08));
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem 2rem;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .02em;
}

.footer-meta a {
  color: var(--gold-hi);
  text-decoration: none;
  border-bottom: 1px solid rgba(159, 227, 192, .32);
  transition: color var(--dur-ui) var(--ease-soft), border-color var(--dur-ui) var(--ease-soft);
}

.footer-meta a:hover,
.footer-meta a:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}

/* ---------------- enquiry dialog ---------------- */

.enquiry-dialog {
  width: min(94vw, 34rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 40px 120px -40px rgba(6, 18, 13, .55);
}

.enquiry-dialog::backdrop {
  background: rgba(6, 18, 13, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.enquiry-dialog[open] {
  animation: dialog-in 320ms var(--ease-expo);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.97);
  }
}

.enquiry-inner {
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.enquiry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.enquiry-head .eyebrow {
  margin-bottom: .6rem;
}

.enquiry-title {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  max-width: none;
}

.enquiry-close {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  transition: border-color var(--dur-micro) var(--ease-ios), color var(--dur-micro) var(--ease-ios);
}

.enquiry-close:hover {
  border-color: var(--emerald);
  color: var(--emerald-deep);
}

.enquiry-progress {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.4rem 0 1.5rem;
}

.enquiry-step-label {
  color: var(--emerald-deep);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.enquiry-bar {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: rgba(10, 26, 19, .12);
}

.enquiry-bar span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
  transform-origin: left;
  transform: scaleX(.5);
  transition: transform 450ms var(--ease-expo);
}

.enquiry-dialog[data-step="2"] .enquiry-bar span {
  transform: scaleX(1);
}

.enquiry-form {
  display: grid;
  gap: 1rem;
}

.enquiry-pane[hidden] {
  display: none;
}

.enquiry-pane {
  display: grid;
  gap: 1rem;
}

.enquiry-actions {
  display: flex;
  justify-content: space-between;
  gap: .85rem;
  margin-top: .5rem;
}

.enquiry-actions .button-primary,
.enquiry-actions .contact-submit {
  flex: 1;
}

.enquiry-back {
  padding: .6rem 1.4rem;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
  transition: border-color var(--dur-micro) var(--ease-ios);
}

.enquiry-back:hover {
  border-color: var(--emerald);
}

.enquiry-foot {
  margin-top: 1.2rem;
  color: var(--ink-soft);
  font-size: .85rem;
}

.enquiry-foot a {
  color: var(--emerald-deep);
  font-weight: 600;
}

.enquiry-foot a:hover {
  text-decoration: underline;
}

/* ---------------- responsive ---------------- */

@media (max-width: 1080px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: inline-grid;
  }

  .nav-inner {
    padding-right: .5rem;
  }

  .section-head,
  .approach-grid,
  .presence-layout,
  .editorial-split,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .section-head .lead {
    justify-self: start;
  }

  .sticky-note {
    position: relative;
    top: auto;
  }

  .figures-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pillars {
    grid-template-columns: 1fr;
  }

  .pillar-line {
    top: 0;
    bottom: 0;
    left: -.4rem;
    right: auto;
    width: 1px;
    height: auto;
  }

  .pillar-line span {
    transform: scaleY(0);
    transform-origin: top;
  }
}

@media (max-width: 768px) {
  :root {
    --section-pad: clamp(4rem, 9vh, 6rem);
  }

  .site-nav {
    top: .75rem;
    width: calc(100% - 1rem);
  }

  .hero {
    padding-top: calc(var(--nav-height) + 3.5rem);
  }

  .hero-panel {
    min-height: 0;
    padding: 1rem;
  }

  /* mobile scroll-expand: copy fades out up top, panel rises from the
     bottom to fill the pinned stage (transforms come from GSAP) */
  .hero.is-pinned .hero-stage {
    height: calc(100dvh - var(--nav-height) - 1rem);
    min-height: 30rem;
  }

  .hero.is-pinned .hero-copy {
    position: absolute;
    left: 0;
    right: 0;
    top: 2%;
    z-index: 2;
  }

  .hero.is-pinned .hero-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
    will-change: transform;
  }

  .panel-canvas {
    position: relative;
    min-height: 25rem;
    padding: 2rem .5rem;
  }

  .atlas-svg {
    display: none;
  }

  .atlas-svg-m {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .panel-stat,
  .panel-chips {
    z-index: 1;
  }

  .panel-chips {
    margin-top: 1.4rem;
  }

  .panel-metrics {
    grid-template-columns: 1fr;
    gap: .6rem;
  }

  .panel-metrics > div {
    padding: .5rem .2rem;
  }

  .panel-metrics > div + div {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }

  .figures-grid {
    grid-template-columns: 1fr;
  }

  .figure {
    min-height: 0;
  }

  .bento-grid {
    grid-template-columns: 1fr;
  }

  .sector-card,
  .sector-card.feature {
    grid-column: auto;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .criteria-table,
  .criteria-table tbody,
  .criteria-table tr,
  .criteria-table th,
  .criteria-table td {
    display: block;
    width: 100%;
  }

  .criteria-table th {
    padding-bottom: .2rem;
  }

  .criteria-table td {
    padding-top: 0;
  }

  .masonry {
    columns: 1;
  }

  .registry-chips li {
    font-size: .72rem;
  }

  .presence-card:hover .registry-chips li,
  .presence-card.is-active .registry-chips li {
    transform: translate(calc(var(--tx) * .62), calc(var(--ty) * .9)) scale(1);
  }

  .footer-meta {
    display: grid;
  }
}

@media (max-width: 480px) {
  .hero-actions,
  .footer-actions {
    display: grid;
    width: 100%;
  }

  .button-primary,
  .button-secondary,
  .footer-cta,
  .contact-submit {
    width: 100%;
  }

  .panel-chips {
    flex-direction: column;
    align-items: center;
  }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  html.js .hero:not(.is-ready) .line-mask > span,
  html.js .reveal-pending,
  html.js .pillar h3 {
    opacity: 1 !important;
    transform: none !important;
  }

  html.js .draw-path {
    stroke-dashoffset: 0 !important;
  }

  .criteria-table tr::after {
    transform: scaleX(1) !important;
  }

  .pillar-line span,
  .timeline-spine span {
    transform: none !important;
  }
}

/* ---------------- print ---------------- */

@media print {
  .site-nav,
  .mobile-menu,
  .grain,
  .skip-link,
  .hero-actions,
  .footer-actions {
    display: none !important;
  }

  html,
  body,
  .chapter-dark,
  .page-header,
  .portfolio-vault,
  .site-footer,
  .hero-panel,
  .quote-card.dark {
    color: #0a1a13 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .chapter-dark p,
  .chapter-dark .lead,
  .page-header p,
  .portfolio-vault p,
  .pillar p,
  .value-card p,
  .quote-card.dark blockquote p,
  .footer-meta,
  .office-block {
    color: #0a1a13 !important;
  }

  .pillar h3,
  .value-card h3,
  .site-footer h2,
  .quote-card.dark .quote-name {
    color: #0a1a13 !important;
  }

  a {
    text-decoration: underline;
  }
}