/* ==========================================================================
   The Gold Thread · One Bond Consulting direction prototype
   One stylesheet for every page. Tokens first, then the system, then pages.
   ========================================================================== */

/* Metric-matched fallbacks, measured in Chrome against the loaded faces (size-adjust from the
   advance width of the site's own copy; ascent and descent from the web fonts' metrics). */
@font-face { font-family: "Cormorant fb"; font-style: normal; font-weight: 300 700; src: local("Georgia"); size-adjust: 88.6%; ascent-override: 103.8%; descent-override: 32.7%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant fb"; font-style: italic; font-weight: 300 700; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 78.9%; ascent-override: 116.6%; descent-override: 36.8%; line-gap-override: 0%; }
@font-face { font-family: "Hanken fb"; font-style: normal; font-weight: 300 549; src: local("Arial"), local("ArialMT"); size-adjust: 100.8%; ascent-override: 99.2%; descent-override: 29.8%; line-gap-override: 0%; }
@font-face { font-family: "Hanken fb"; font-style: normal; font-weight: 550 800; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 94.2%; ascent-override: 106.2%; descent-override: 31.8%; line-gap-override: 0%; }

:root {
  /* Brand */
  --navy: #0D2331;
  --navy-deep: #091A25;
  --navy-2: #133041;
  --gold: #DFB02C;
  --gold-hi: #E9C24F;
  --gold-deep: #9C7410;          /* thread and rules on light grounds only, never text */
  --white: #FFFFFF;
  --grey: #EBEFF1;

  /* Ink per ground family */
  --ink-d: #F3F5F6;
  --soft-d: #A9B8C2;
  --rule-d: rgba(243, 245, 246, 0.16);
  --ink-l: #0D2331;
  --soft-l: #475A67;
  --rule-l: rgba(13, 35, 49, 0.14);

  /* Motion: one house ease, one in-out for travel */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-hover: .16s;
  --t-ui: .3s;
  --t-reveal: .9s;

  /* Type. Each face is followed by a metric-matched local fallback (below), so the swap from the
     fallback to the web font changes glyph shapes, not line breaks or the nav's positions. */
  --serif: "Cormorant Garamond", "Cormorant fb", Georgia, serif;
  --sans: "Hanken Grotesk", "Hanken fb", Arial, system-ui, sans-serif;

  /* Space */
  --m: clamp(20px, 5.5vw, 96px);            /* outer margin: the thread's lanes sit at half of it */
  --gap: clamp(16px, 2vw, 32px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 176px;
  --ch-pad: clamp(88px, 13vh, 168px);
  --head-h: 80px;

  /* Scale */
  --t-hero: clamp(2.9rem, 7.2vw, 7.1rem);
  --t-ch: clamp(2.35rem, 4.6vw, 4.5rem);
  --t-xl: clamp(2.6rem, 8.2vw, 8.4rem);
  --t-l: clamp(1.7rem, 2.5vw, 2.35rem);
  --t-m: clamp(1.4rem, 1.9vw, 1.8rem);
  --t-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --t-small: .8125rem;

  --ground: var(--navy);
  --ink: var(--ink-d);
  --soft: var(--soft-d);
  --rule: var(--rule-d);
  color-scheme: light dark;
}

/* Ground families. Restate color wherever the token changes (taste.md). */
.g-navy, .g-deep { --ground: var(--navy); --ink: var(--ink-d); --soft: var(--soft-d); --rule: var(--rule-d); --focus: var(--gold); color: var(--ink); }
.g-deep { --ground: var(--navy-deep); }
.g-white { --ground: var(--white); --ink: var(--ink-l); --soft: var(--soft-l); --rule: var(--rule-l); --focus: var(--navy); color: var(--ink); }
.g-grey { --ground: var(--grey); --ink: var(--ink-l); --soft: var(--soft-l); --rule: var(--rule-l); --focus: var(--navy); color: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--navy); -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--ink-d);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--gold); color: var(--navy); }
:focus-visible { outline: 2px solid var(--focus, var(--gold)); outline-offset: 4px; border-radius: 1px; }
html { scrollbar-color: rgba(223, 176, 44, .55) var(--navy-deep); }
input, textarea { caret-color: var(--gold); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 200; background: var(--gold); color: var(--navy); padding: 10px 16px; font-weight: 600; transform: translateY(-160%); transition: transform var(--t-ui) var(--ease); }
.skip:focus-visible { transform: none; }

.wrap { padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.serif { font-family: var(--serif); }
.h-hero, .ch__title, .close__title, .xl {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: .98;
  text-wrap: balance;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
.h-hero { font-size: var(--t-hero); }
.h-hero em, .close__title em, .ch__title em { font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.ch__title { font-size: var(--t-ch); line-height: 1.02; max-width: 15ch; }
.lede { font-family: var(--serif); font-weight: 500; font-size: var(--t-l); line-height: 1.22; letter-spacing: -0.006em; text-wrap: pretty; }
.body { font-size: var(--t-body); line-height: 1.62; color: var(--soft); max-width: 34em; text-wrap: pretty; }
.g-navy .body, .g-deep .body { line-height: 1.66; letter-spacing: .004em; }
.label {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
}
.eyebrow { color: var(--gold); font-size: .8125rem; letter-spacing: .24em; font-weight: 600; text-transform: uppercase; }
.nums { font-variant-numeric: tabular-nums lining-nums; }
.ph { color: var(--soft); font-style: normal; }    /* [bracketed placeholders] stay visible */

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  font: 600 .9375rem/1 var(--sans);
  letter-spacing: .01em;
  white-space: nowrap;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), transform .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-hi); }
.btn--ghost { border-color: color-mix(in srgb, var(--ink) 38%, transparent); color: var(--ink); }
.btn--ghost:hover { border-color: var(--gold); background: rgba(223, 176, 44, .08); }
.g-white .btn--ghost:hover, .g-grey .btn--ghost:hover { border-color: var(--navy); background: rgba(13, 35, 49, .04); }
.btn--navy { background: var(--navy); color: var(--ink-d); }
.btn--navy:hover { background: var(--navy-2); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: .875rem; }

.arrow { position: relative; display: inline-block; width: 22px; height: 10px; flex: none; }
.arrow::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transform-origin: 0 50%; transform: scaleX(.72); transition: transform var(--t-ui) var(--ease); }
.arrow::after { content: ""; position: absolute; right: 1px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateX(-6px) rotate(45deg); transition: transform var(--t-ui) var(--ease); }
a:hover .arrow::before, button:hover .arrow::before, a:focus-visible .arrow::before { transform: scaleX(1); }
a:hover .arrow::after, button:hover .arrow::after, a:focus-visible .arrow::after { transform: translateX(0) rotate(45deg); }

.tlink { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: .9375rem; padding-block: 8px; position: relative; }
.tlink::after { content: ""; position: absolute; left: 0; right: 34px; bottom: 2px; height: 1px; background: currentColor; opacity: .35; transform-origin: 0 50%; transition: transform var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease); }
.tlink:hover::after { opacity: 1; }
.g-navy .tlink::after, .g-deep .tlink::after { background: var(--gold); opacity: .6; }
.ext { font-size: .85em; margin-left: 2px; }

/* Pressed states, in the palette (the platform's tap highlight is off at the root). */
.sheet__list a:active, .sector__name a:active, .foot__nav a:active, .rh__nav a:not(.btn):active { color: var(--gold); }
.ledger__row a:active, .note a:active, .xrow:active { background: rgba(13, 35, 49, .045); }
.g-navy .note a:active, .g-navy .xrow:active, .g-deep .note a:active { background: rgba(223, 176, 44, .08); }
.case:active { background: #F6F8F9; }
.tlink:active::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Running head (masthead that becomes a book's running head)
   -------------------------------------------------------------------------- */
.rh { position: fixed; inset: 0 0 auto 0; height: var(--head-h); z-index: 50; pointer-events: none; }
.rh__skin {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 28px;
  padding-inline: var(--m);
  pointer-events: auto;
}
.rh__skin--light { clip-path: inset(0 100% 0 0); }
.rh[data-skin="light"] .rh__skin--light { clip-path: inset(0 0 0 0); }
.rh[data-skin="light"] .rh__skin--dark { pointer-events: none; }
.rh:not([data-skin="light"]) .rh__skin--light { pointer-events: none; }
.rh__fill { position: absolute; inset: 0; pointer-events: none; background: var(--ground); opacity: 0; transition: opacity .45s var(--ease); }
.rh__fill::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.rh.is-running .rh__fill { opacity: 1; }
.rh__logo { position: relative; display: block; flex: none; width: 88px; height: 46px; overflow: hidden; border-radius: 1px; }
.rh__logo img { width: 88px; height: 88px; max-width: none; margin-top: -21px; }
.rh__folio { position: relative; height: 28px; overflow: hidden; min-width: 0; flex: 1; font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 28px; color: var(--soft); }
.rh__folio span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.rh__folio span.is-out { transform: translateY(-110%); opacity: 0; }
.rh__folio span.is-in { transform: translateY(110%); opacity: 0; }
.rh__folio::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; }
.rh__nav { position: relative; display: flex; align-items: center; gap: clamp(16px, 1.9vw, 30px); }
.rh__nav a:not(.btn) { position: relative; font-size: .875rem; font-weight: 500; letter-spacing: .01em; padding-block: 8px; color: var(--ink); opacity: .82; transition: opacity var(--t-hover) var(--ease); }
.rh__nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-ui) var(--ease); }
.g-white .rh__nav a:not(.btn)::after, .g-grey .rh__nav a:not(.btn)::after { background: var(--gold-deep); }
.rh__nav a:not(.btn):hover, .rh__nav a[aria-current="page"] { opacity: 1; }
.rh__nav a:not(.btn):hover::after, .rh__nav a[aria-current="page"]::after { transform: scaleX(1); }
.rh__nav .btn { margin-left: 6px; }
.rh__menu { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; font-weight: 600; font-size: .9375rem; }
.rh__menu i { display: block; width: 22px; height: 8px; position: relative; }
.rh__menu i::before, .rh__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; }
.rh__menu i::before { top: 0; } .rh__menu i::after { bottom: 0; right: 7px; }
.rh__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; transform-origin: 0 50%; transform: scaleX(0); background: var(--gold); z-index: 1; }
.g-white .rh__progress, .g-grey .rh__progress { background: var(--gold-deep); }
.rh__seam { position: absolute; top: 0; bottom: 0; left: -.75px; width: 1.5px; background: var(--gold); opacity: 0; pointer-events: none; z-index: 2; transform-origin: 0 0; }

/* --------------------------------------------------------------------------
   Contents sheet (the nav on small screens)
   -------------------------------------------------------------------------- */
.sheet { position: fixed; inset: 0; z-index: 70; background: var(--navy); color: var(--ink-d); display: flex; flex-direction: column; padding: 18px var(--m) 28px; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease-io), visibility 0s linear .6s; }
.sheet.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--ease-io), visibility 0s; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.sheet__close { min-height: 44px; padding: 0 4px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.sheet__close i { width: 16px; height: 16px; position: relative; }
.sheet__close i::before, .sheet__close i::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.sheet__close i::after { transform: rotate(-45deg); }
.sheet__list { margin-top: auto; margin-bottom: auto; padding-block: 32px; }
.sheet__list li { border-bottom: 1px solid var(--rule-d); overflow: hidden; }
.sheet__list a { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.1; padding: 12px 0 10px; transform: translateY(105%); transition: transform .7s var(--ease); }
.sheet.is-open .sheet__list a { transform: none; }
.sheet__list a .arrow { color: var(--gold); }
.sheet__foot { display: grid; gap: 18px; font-size: .875rem; color: var(--soft-d); opacity: 0; transition: opacity .5s var(--ease) .35s; }
.sheet.is-open .sheet__foot { opacity: 1; }
.sheet__foot .btn { justify-self: start; }
.sheet__line { position: absolute; left: 0; right: 0; height: 1.5px; bottom: 0; background: var(--gold); }

/* --------------------------------------------------------------------------
   The thread canvas and the page-transition overlay
   -------------------------------------------------------------------------- */
.thread-cv { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.pt { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; }
html.pt-on .rh { z-index: 95; }   /* the running head stays in place over the cloth */
.pt.is-on { visibility: visible; pointer-events: auto; }
.pt canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* While the cloth fully covers the screen the page underneath is not drawn at all, so the swap and
   the jump to the top of the new page cost no raster work. */
html.pt-covered main, html.pt-covered footer.foot, html.pt-covered .thread-cv { visibility: hidden; }

/* --------------------------------------------------------------------------
   Chapters: hard grounds, opened from the thread
   -------------------------------------------------------------------------- */
.ch { position: relative; background: var(--ground); }
.ch__ground { position: absolute; inset: -1px 0; background: var(--ground); z-index: 0; }
.ch__in { position: relative; z-index: 2; padding-block: var(--ch-pad); }
/* Grounds wait closed only once the runtime is live; without it every chapter is simply its own ground. */
html.live .ch[data-base="navy"] { background: var(--navy); }
html.live .ch[data-base="white"] { background: var(--white); }
html.live .ch[data-base="grey"] { background: var(--grey); }
html.live .ch__ground { clip-path: inset(50% 0 50% 0); }
.ch__head { margin-bottom: clamp(56px, 8vh, 96px); }
.ch__head--tight { margin-bottom: clamp(10px, 2vh, 24px); }
.overture + .ch .ch__in { padding-top: clamp(64px, 9vh, 112px); }
.ch__head--trail { display: flex; justify-content: flex-end; text-align: right; }
.ch__head--trail .ch__title { margin-left: auto; }

/* --------------------------------------------------------------------------
   Reveals (JS adds html.js; the safety net shows everything after 3.2s)
   -------------------------------------------------------------------------- */
html.js.motion [data-r] { opacity: 0; }
html.js.motion [data-r="rise"] { transform: translateY(18px); }
html.js.motion [data-r].is-in { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay: var(--d, 0s); }
html.js.motion:not(.booted) [data-r], html.js.live:not(.booted) .ch__ground,
html.js.motion:not(.booted) .acc__u, html.js.motion:not(.booted) .credo__item,
html.js.motion:not(.booted) .globe__stage > * { animation: safety .01s linear 3.2s forwards; }
@keyframes safety { to { opacity: 1; transform: none; clip-path: none; } }
.lines .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.lines .ln > span { display: block; will-change: transform; }

/* --------------------------------------------------------------------------
   Overture: title page + the convergence (home)
   -------------------------------------------------------------------------- */
.overture { --home-stage: max(100svh, 760px); position: relative; background: var(--navy); }
.ov-back { position: absolute; inset: 0 0 auto 0; height: var(--home-stage); overflow: hidden; z-index: 1; }
.ov-back::before { content: ""; position: absolute; inset: 0; background: radial-gradient(52% 58% at 72% 64%, rgba(38, 76, 101, .5), rgba(13, 35, 49, 0) 72%); pointer-events: none; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The resting sheaf as static SVG: the first frame is never empty, and it is what a page without
   JavaScript keeps. The canvas takes over on its first frame and the ghost fades under it. */
.ghost { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; transition: opacity 1.3s var(--ease) .1s; }
.ghost.is-gone { opacity: 0; }
.ghost path { vector-effect: non-scaling-stroke; }
.ghost-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ihero:has(.portrait) .ghost { transition-duration: .5s; transition-delay: 0s; }   /* never seen through the portrait as it resolves */
.ghost--m { display: none; }
@media (max-width: 699px) { .ghost--d { display: none; } .ghost--m { display: block; } }
.ov-front { position: absolute; inset: 0 0 auto 0; height: var(--home-stage); pointer-events: none; z-index: 3; overflow: hidden; }
.ov-front canvas, .ihero__front canvas { filter: blur(.7px); }
@media (max-width: 699px) { .ov-front canvas, .ihero__front canvas { filter: none; } }
.hero {
  position: relative; height: var(--home-stage); z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--head-h) + 24px) var(--m) clamp(72px, 12vh, 120px);
}
.hero__copy { max-width: min(64vw, 1000px); }
.hero .eyebrow { margin-bottom: clamp(22px, 3.2vh, 34px); display: block; }
.hero .h-hero { margin-bottom: clamp(22px, 3.4vh, 34px); }
.hero__p { font-size: clamp(1.02rem, .92rem + .38vw, 1.2rem); line-height: 1.58; color: var(--soft-d); max-width: 33em; margin-bottom: clamp(26px, 4vh, 40px); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.acc { position: relative; display: inline-block; }
.acc__u { position: absolute; left: .02em; right: .06em; bottom: .02em; height: 1.5px; background: var(--gold); transform-origin: 0 50%; }
html.js.motion .acc__u { transform: scaleX(0); }

/* The credo. Printed (reduced motion, no JavaScript): the mark, the rule running out of it, and the
   four credentials set below. Live: the rule is the one the sheaf closed into, and the credentials
   stand on it two above and two below, at display scale. */
.credo { --mw: 100px; --mh: 52px; --rule-at: 29.5px; position: relative; z-index: 2; padding: clamp(56px, 9vh, 96px) var(--m) clamp(72px, 10vh, 112px); }
.credo__mark { position: absolute; left: var(--m); top: calc(clamp(56px, 9vh, 96px) - var(--rule-at) + .75px); width: var(--mw); height: var(--mh); overflow: hidden; border-radius: 1px; }
.credo__mark img { width: var(--mw); height: var(--mw); max-width: none; margin-top: calc(var(--mw) * -.24); }
.credo__rule { height: 1.5px; background: var(--gold); margin-left: calc(var(--mw) - 1px); margin-bottom: calc(var(--mh) - var(--rule-at) + 14px); }
.credo__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.credo__item { --k: 1; position: relative; padding: 20px 0 0 20px; font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 1.85vw, 1.75rem); line-height: 1.14; color: var(--ink-d); text-wrap: balance; display: flex; align-items: flex-start; }
.credo__item::before { content: ""; position: absolute; left: 0; top: 0; width: 1.5px; height: 14px; background: var(--gold); transform-origin: 50% 0; transform: scaleY(var(--k)); }

/* Live (the module has run): three sticky layers share the stage while the hero copy scrolls away. */
html.live .overture { height: calc(var(--home-stage) * 2.25); touch-action: pan-y pinch-zoom; }   /* 1.25 stages of pin */
html.live .ov-back { position: sticky; top: 0; }
html.live .hero { margin-top: calc(-1 * var(--home-stage)); }
html.live .credo { position: sticky; top: 0; height: var(--home-stage); margin-top: calc(-1 * var(--home-stage)); padding: 0; pointer-events: none; }
html.live .ov-front { position: sticky; top: 0; margin-top: calc(-1 * var(--home-stage)); }
html.live .credo__rule { display: none; }
html.live .credo__mark { top: calc(50% - var(--rule-at)); opacity: 0; clip-path: inset(var(--rule-at) 0 calc(var(--mh) - var(--rule-at)) 0); }
/* The peak's end frame: the credentials at display scale, set on the rule two above and two below;
   the ticks that bind them to it drop from the rule as it pulls taut (--k per item, from page.js). */
html.live .credo { --gap-r: clamp(34px, 5.6vh, 58px); }
html.live .credo__list { position: absolute; left: calc(var(--m) + var(--mw) + clamp(24px, 3vw, 48px)); right: var(--m); top: 0; bottom: 0; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); }
html.live .credo__item { font-size: clamp(2.25rem, 3.75vw, 3.9rem); line-height: 1.02; letter-spacing: -.012em; opacity: 0; --k: 0; }
html.live .credo__item:nth-child(-n+2) { align-items: flex-end; padding: 0 0 var(--gap-r) 24px; }
html.live .credo__item:nth-child(n+3) { align-items: flex-start; padding: var(--gap-r) 0 0 24px; }
html.live .credo__item::before { width: 1.5px; height: calc(var(--gap-r) - 6px); }
html.live .credo__item:nth-child(-n+2)::before { top: auto; bottom: 0; transform-origin: 50% 100%; }
html.live .credo__item:nth-child(n+3)::before { top: 0; bottom: auto; transform-origin: 50% 0; }

/* --------------------------------------------------------------------------
   What we do: the ledger
   -------------------------------------------------------------------------- */
.ledger { border-top: 0; }
.ledger__row { position: relative; }
.ledger__row a { display: grid; grid-template-columns: 5fr 6fr 48px; column-gap: var(--gap); align-items: baseline; padding: 34px 0 30px; }
.ledger__row h3 { font-family: var(--serif); font-weight: 500; font-size: var(--t-l); line-height: 1.08; letter-spacing: -.006em; transition: transform .45s var(--ease); }
.ledger__row p { color: var(--soft); max-width: 36em; transition: color var(--t-ui) var(--ease); }
.ledger__row .arrow { justify-self: end; align-self: center; color: var(--ink); opacity: .5; transition: opacity var(--t-ui) var(--ease); }
.ledger__row::before { content: ""; position: absolute; inset: 1px calc(var(--m) * -.5 + 10px) 3px; background: var(--grey); clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--ease); z-index: -1; }   /* stops 10px short of the thread's margin lanes */
.ledger__row:hover::before, .ledger__row:focus-within::before { clip-path: inset(0 0 0 0); }
.ledger__row:hover h3, .ledger__row:focus-within h3 { transform: translateX(12px); }
.ledger__row:hover p { color: var(--ink); }
.ledger__row:hover .arrow { opacity: 1; }
.ledger { position: relative; z-index: 0; isolation: isolate; }

/* --------------------------------------------------------------------------
   Sectors: words standing on the thread
   -------------------------------------------------------------------------- */
.sectors { display: grid; gap: clamp(36px, 6vh, 64px); }
.sector { position: relative; display: flex; align-items: flex-end; gap: var(--gap); }
.sector--trail { flex-direction: row-reverse; text-align: right; }
.sector__name { font-family: var(--serif); font-weight: 500; font-size: var(--t-xl); line-height: .9; letter-spacing: -.028em; white-space: nowrap; display: inline-block; will-change: transform; padding-bottom: .02em; }
.sector__name a { display: inline-block; transition: color var(--t-ui) var(--ease); }
.sector__name a:hover { color: var(--gold); }
.sector__bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.sector__subs { display: grid; gap: 4px; padding-bottom: .9em; font-size: .9375rem; color: var(--soft); flex: 1; min-width: 12em; }
.sector--trail .sector__subs { justify-items: end; }
.sector__subs li { transition: color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); }
.sector:hover .sector__subs li { color: var(--ink); }

/* --------------------------------------------------------------------------
   Experience: cards bound by the thread
   -------------------------------------------------------------------------- */
.cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(72px, 11vh, 112px); }
.case { position: relative; overflow: hidden; background: var(--white); color: var(--ink-l); padding: clamp(28px, 3vw, 44px); border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 22px 44px -30px rgba(13, 35, 49, .35), 0 2px 6px -2px rgba(13,35,49,.06); display: flex; flex-direction: column; gap: 18px; min-height: 260px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.case:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 32px 56px -30px rgba(13, 35, 49, .42), 0 2px 6px -2px rgba(13,35,49,.06); }
.case__meta { color: var(--soft-l); }
.case__meta b { color: var(--ink-l); font-weight: 600; }
.case h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: 1.1; letter-spacing: -.008em; max-width: 22ch; text-wrap: balance; }
.case p { color: var(--soft-l); max-width: 40em; }
.case .tlink { margin-top: auto; align-self: flex-start; }
.case .tlink::after { background: var(--gold-deep); opacity: .8; }
.case--a { grid-column: 1 / span 7; min-height: 340px; }
.case--b { grid-column: 6 / span 7; }
.case--c { grid-column: 2 / span 7; }
.case--d { grid-column: 6 / span 7; }
.case--e { grid-column: 1 / span 7; }
/* The region as a watermark: large, very quiet, cropped by the card, behind the copy. */
.case > :not(.case__region) { position: relative; z-index: 1; }
.case { container-type: inline-size; }
.case__region { position: absolute; right: clamp(18px, 3.4cqi, 36px); bottom: -.3em; z-index: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: min(6rem, 13cqi); line-height: 1; color: rgba(13, 35, 49, .06); white-space: nowrap; pointer-events: none; }   /* cropped by the card's foot only, never mid-glyph at its side */
.cases__more { grid-column: 1 / -1; margin-top: -24px; display: flex; justify-content: flex-end; }

/* --------------------------------------------------------------------------
   PolyMentIQ bridge
   -------------------------------------------------------------------------- */
.bridge { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.bridge__copy { grid-column: 1 / span 6; }
.bridge__copy .ch__title { max-width: 13ch; margin-bottom: clamp(28px, 4vh, 40px); }
.bridge__copy .body { margin-bottom: 36px; font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem); }
.bridge__sig { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.bridge__logo { width: 150px; height: auto; opacity: .92; }
.bridge__art { grid-column: 8 / span 5; min-height: clamp(460px, 62vh, 600px); position: relative; align-self: stretch; }   /* room for the fan to fray and gather inside its own chapter */

/* --------------------------------------------------------------------------
   Insights: knots on the thread
   -------------------------------------------------------------------------- */
.notes { border-top: 1px solid var(--rule); }
.note a { display: grid; grid-template-columns: 2fr 7fr 3fr; column-gap: var(--gap); align-items: baseline; padding: 30px 0 28px; border-bottom: 1px solid var(--rule); transition: background-color var(--t-ui) var(--ease); }
.note time { color: var(--soft); font-size: .9375rem; }
.note h3 { font-family: var(--serif); font-weight: 500; font-size: var(--t-m); line-height: 1.15; transition: transform .45s var(--ease); }
.note .tlink { justify-self: end; font-size: .875rem; }
.note a:hover h3 { transform: translateX(10px); }
.notes__more { margin-top: 36px; display: flex; justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Close: the thread ties off
   -------------------------------------------------------------------------- */
.close { position: relative; }
.close .ch__in { padding-bottom: clamp(104px, 13vh, 140px); }
main[data-field="stub"] .close__title { font-size: clamp(2.6rem, 5.8vw, 5.8rem); max-width: 16ch; }
.close__title { font-size: var(--t-hero); max-width: 23ch; text-wrap: balance; margin-bottom: clamp(36px, 5vh, 56px); }
.close__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.close__meta { color: var(--soft-d); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   Footer (colophon)
   -------------------------------------------------------------------------- */
.foot { position: relative; z-index: 2; background: var(--navy-deep); color: var(--soft-d); font-size: .875rem; }
.foot__in { padding-block: 64px 36px; display: grid; grid-template-columns: auto 1fr auto; gap: 40px 56px; align-items: start; }
.foot__logo { display: block; width: 88px; height: 46px; overflow: hidden; }   /* the header's size */
.foot__logo img { width: 88px; height: 88px; max-width: none; margin-top: -21px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 6px; }
.foot__nav a { color: var(--ink-d); opacity: .82; font-weight: 500; }
.foot__nav a:hover { opacity: 1; }
.foot__social { display: flex; gap: 12px; align-items: center; }
.foot__social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule-d); border-radius: 2px; color: var(--ink-d); transition: border-color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease); }
.foot__social a:hover { border-color: var(--gold); background: rgba(223,176,44,.08); }
.foot__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 26px; border-top: 1px solid var(--rule-d); }
.foot__base a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(223,176,44,.6); }
.foot__contact { display: flex; flex-wrap: wrap; gap: 6px 22px; }
/* The maker's credit: the end of the base row, set back until it is pointed at. */
.foot__base .foot__credit { margin-left: auto; text-decoration: none; opacity: .7; transition: opacity var(--t-hover) var(--ease); }   /* .7 keeps 4.9:1 on navy-deep */
.foot__base .foot__credit:hover, .foot__base .foot__credit:focus-visible { opacity: 1; text-decoration: underline; }
.foot__contact a { color: var(--ink-d); }

/* --------------------------------------------------------------------------
   Inner pages: title page + chapters
   -------------------------------------------------------------------------- */
.ihero { position: relative; min-height: 100svh; overflow: hidden; background: var(--navy); }
.ihero .field { z-index: 0; }
.ihero__front { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ihero__in { position: relative; z-index: 2; min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; padding: calc(var(--head-h) + 40px) var(--m) clamp(64px, 12vh, 132px); }
.ihero__copy { grid-column: 1 / span 6; padding-bottom: clamp(8px, 4vh, 48px); }
.ihero__copy .h-hero { margin-bottom: 26px; }
.ihero__sub { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.45rem, 2.2vw, 2.1rem); line-height: 1.2; color: var(--ink-d); max-width: 20ch; }
.ihero__intro { margin-top: 28px; }
.portrait { position: absolute; z-index: 1; right: calc(var(--m) * .2); bottom: 0; width: min(46vw, 740px); aspect-ratio: 4 / 5; pointer-events: none; }
.portrait img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(64% 58% at 54% 42%, #000 46%, transparent 80%), linear-gradient(#000 64%, transparent 92%); -webkit-mask-composite: source-in; mask-image: radial-gradient(64% 58% at 54% 42%, #000 46%, transparent 80%), linear-gradient(#000 64%, transparent 92%); mask-composite: intersect; }
html.js.live .ch:not(.is-open) .globe__stage > * { opacity: 0; }
.globe__stage > * { transition: opacity .7s var(--ease) .15s; }

.bio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; }
.bio__lede { grid-column: 1 / span 10; font-size: clamp(1.9rem, 3.4vw, 3.3rem); line-height: 1.12; }
.bio__lede.lede--long { font-size: clamp(1.6rem, 2.4vw, 2.35rem); line-height: 1.2; }
.bio__who { grid-column: 1 / span 4; }
.bio__who h2 { font-family: var(--serif); font-weight: 500; font-size: var(--t-l); line-height: 1.1; }
.bio__who p { color: var(--soft); margin-top: 6px; }
.bio__text { grid-column: 6 / span 6; display: grid; gap: 20px; }
.bio__text p { color: var(--soft); }
.bio__story { grid-column: 6 / span 6; border-top: 1px solid var(--rule); padding-top: 24px; display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); }

.roles { display: grid; row-gap: clamp(56px, 8vh, 88px); }
.roles__block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.roles__block > h3 { grid-column: 1 / span 3; color: var(--soft); padding-top: 26px; }
/* Sub-heads inside a chapter: sentence case, not another tracked uppercase label. */
.sub { font-family: var(--sans); font-size: .95rem; font-weight: 500; line-height: 1.3; letter-spacing: .005em; color: var(--soft); }
.roles__list { grid-column: 4 / span 9; }
.roles__list li { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.1vw, 3rem); line-height: 1.08; padding: 18px 0 16px; letter-spacing: -.01em; }
.roles__list--adv li { font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.18; }
.roles__note { grid-column: 1 / -1; color: var(--soft); font-size: .9375rem; }

.approach { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.approach__item { grid-column: span 3; border-top: 1px solid var(--rule); padding-top: 22px; font-family: var(--serif); font-weight: 500; font-size: var(--t-m); line-height: 1.15; }
.values { margin-top: clamp(80px, 12vh, 140px); }
.values h3 { color: var(--soft); margin-bottom: 26px; }
.values__rows { display: grid; gap: clamp(20px, 3vh, 34px); }
.values__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 clamp(22px, 3vw, 48px); font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 5.2vw, 5.2rem); line-height: 1.02; letter-spacing: -.02em; }
.values__row--trail { justify-content: flex-end; }
.values__row em { font-style: italic; }
.bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

.globe { position: relative; z-index: 2; }
.globe__tip { position: absolute; left: 0; top: 0; padding: 6px 10px; margin: -38px 0 0 10px; background: var(--navy-2); color: var(--ink-d); font-size: .8125rem; font-weight: 500; white-space: nowrap; border: 1px solid var(--rule-d); border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease); }
.globe__tip.is-on { opacity: 1; }
html.live .globe { height: 320svh; }
.globe__stage { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding: calc(var(--head-h) + 32px) var(--m) 48px; }
html.live .globe__stage { position: sticky; top: 0; height: 100svh; }
.globe__side { grid-column: 1 / span 3; align-self: center; }
.globe__side .ch__title { font-size: clamp(2.1rem, 3.4vw, 3.4rem); max-width: 10ch; margin-bottom: 36px; }
.regions li { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 7px 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.1; color: var(--soft-d); transition: color .45s var(--ease), transform .45s var(--ease); }
.regions li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .5s var(--ease); flex: none; align-self: center; }
.regions li.is-on { color: var(--ink-d); }
.regions li.is-on::before { transform: scale(1); }
.regions li.is-now { transform: translateX(6px); }
.globe__map { grid-column: 4 / span 9; position: relative; aspect-ratio: 1280 / 720; width: 100%; }
.globe__map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe__note { grid-column: 4 / span 9; color: var(--soft-d); font-size: .8125rem; margin-top: 14px; }

/* Stubs */
/* ---------- Lighter inner pages (services, sectors, experience, insights, PolyMentIQ, contact) ---------- */
.ihero--stub .ihero__copy { grid-column: 1 / span 10; }
.ihero--stub .h-hero { max-width: 15ch; }
/* Case study and article stubs: long titles, set smaller, with the tag or date as the sub line. */
.ihero--case .ihero__copy { grid-column: 1 / span 9; }
.ihero--case .h-hero { font-size: clamp(2.5rem, 5vw, 4.9rem); line-height: 1.02; max-width: 21ch; }
.ihero--case .ihero__sub { font-size: clamp(1.2rem, 1.7vw, 1.6rem); max-width: none; }
.ihero--long .h-hero { font-size: clamp(2.5rem, 5vw, 4.9rem); line-height: 1.02; max-width: 21ch; }
.stubnote { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 18px 40px; }
.stubnote__tbc { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--t-m); color: var(--soft); }
.xrow__link { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 96%; transition: background-size var(--t-ui) var(--ease); }
.xrow__link:hover, .xrow__link:focus-visible { background-size: 100% 1px; }
.note__read.tlink { display: inline-flex; align-self: baseline; }
.intro__lede { max-width: 30ch; font-size: clamp(1.9rem, 3.4vw, 3.3rem); line-height: 1.12; margin-bottom: clamp(64px, 10vh, 112px); }
.intro__lede.lede--long { max-width: 40ch; font-size: clamp(1.6rem, 2.4vw, 2.35rem); line-height: 1.2; }
.ledger__row > div { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--gap); align-items: baseline; padding: 34px 0 30px; }
.ledger__row:has(> div)::before { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(40px, 6vh, 64px); }
html:not(.js) .filters { display: none; }
.filters button { font: inherit; font-size: .875rem; font-weight: 600; min-height: 42px; padding: 0 18px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: transparent; color: var(--ink); cursor: pointer; transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.filters button:hover { border-color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
[data-filterable] > [hidden] { display: none; }

.xrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 10px; align-items: baseline; padding: 30px 0 28px; }
.xrow__meta { grid-column: 1 / span 3; color: var(--soft); }
.xrow__meta b { color: var(--ink); font-weight: 600; }
.xrow h3 { grid-column: 4 / span 8; font-family: var(--serif); font-weight: 500; font-size: var(--t-m); line-height: 1.15; }
.xrow > p:not(.xrow__meta) { grid-column: 4 / span 7; color: var(--soft); max-width: 44em; }

.note__in { display: grid; grid-template-columns: 2fr 7fr 3fr; column-gap: var(--gap); align-items: baseline; padding: 30px 0 28px; border-bottom: 1px solid var(--rule); }
.note__when { display: grid; gap: 8px; }
.note__when time { color: var(--soft); font-size: .9375rem; }
.note__when .label { color: var(--ink); }
.note__in .ph { margin-top: 8px; font-size: .9375rem; }
.note__read { justify-self: end; text-align: right; font-size: .875rem; font-weight: 600; display: grid; gap: 4px; }
.note__read .ph { font-weight: 400; margin: 0; }
.note__in h3 .ph { font-size: inherit; margin-top: 0; }

.adds { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; }
.adds__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; padding-bottom: 6px; }
.adds__title { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--t-m); line-height: 1.1; color: var(--soft); }   /* sentence case: PolyMentIQ is never set in capitals */
.adds__logo { width: min(200px, 100%); height: auto; }
.adds__list { grid-column: 1 / -1; }
.adds__list li { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: 1.08; padding: 24px 0 20px; letter-spacing: -.01em; }
.adds__list li:nth-child(even) { text-align: right; }

.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; }
.cform { grid-column: 1 / span 7; }
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px var(--gap); }
.fld { display: grid; gap: 8px; align-content: start; }
.fld--wide { grid-column: 1 / -1; }
.fld > span { font-size: .875rem; font-weight: 600; color: var(--ink); }
.fld input, .fld textarea { font: inherit; font-size: 1.0625rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 0; padding: 10px 0 12px; resize: vertical; transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease); }
.fld input:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--navy); box-shadow: 0 1px 0 var(--navy); }
.fld.is-bad input, .fld.is-bad textarea { border-bottom-color: var(--gold-deep); box-shadow: 0 1px 0 var(--gold-deep); }
.fld__err { font-size: .875rem; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.fld__err::before { content: ""; width: 14px; height: 2px; background: var(--gold-deep); flex: none; }
.cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 44px; }
.cform__privacy { font-size: .875rem; color: var(--soft); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cform__privacy .tlink { font-size: .875rem; padding-block: 4px; color: var(--ink); }
.cform__status { margin-top: 24px; font-family: var(--serif); font-size: var(--t-m); line-height: 1.2; }
.cform__status:empty { display: none; }
.cform.is-sending button[type="submit"] { opacity: .72; pointer-events: none; }
.cform.is-sent .cform__grid, .cform.is-sent .cform__foot { display: none; }
.cdetails { grid-column: 9 / span 4; display: grid; gap: 26px; align-content: start; padding-top: 4px; }
.cdetails dt { color: var(--soft); }
.cdetails dd { margin: 6px 0 0; font-size: 1.0625rem; overflow-wrap: anywhere; }
.cdetails a { border-bottom: 1px solid var(--rule); transition: border-color var(--t-hover) var(--ease); }
.cdetails a:hover { border-color: var(--ink); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .rh__nav a:not(.btn) { display: none; }
  .rh__menu { display: inline-flex; }
  .rh__nav { gap: 14px; }
}
@media (max-width: 960px) {
  .credo__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .case--a, .case--b, .case--c, .case--d, .case--e { grid-column: 1 / -1; }
  .bridge__copy { grid-column: 1 / -1; }
  .bridge__art { grid-column: 1 / -1; min-height: 260px; }
  .ledger__row a { grid-template-columns: 1fr 40px; row-gap: 10px; }
  .ledger__row p { grid-column: 1; grid-row: 2; }
  .ledger__row .arrow { grid-row: 1 / span 2; grid-column: 2; }
  .note a { grid-template-columns: 1fr auto; row-gap: 8px; }
  .note__in { grid-template-columns: 1fr auto; row-gap: 8px; }
  .note__when { grid-column: 1 / -1; display: flex; gap: 14px; align-items: baseline; }
  .xrow__meta { grid-column: 1 / -1; }
  .xrow h3, .xrow > p:not(.xrow__meta) { grid-column: 1 / -1; }
  .cform { grid-column: 1 / -1; }
  .cdetails { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note time { grid-column: 1 / -1; }
  .approach__item { grid-column: span 6; }
  .globe__side { grid-column: 1 / -1; }
  .globe__map, .globe__note { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  :root { --head-h: 64px; --ch-pad: 88px; --t-hero: clamp(2.55rem, 11.4vw, 3.4rem); --t-ch: clamp(2.1rem, 9.6vw, 2.7rem); --t-xl: clamp(2.7rem, 13.6vw, 4rem); }
  .rh__skin { gap: 14px; }
  .rh__logo { width: 74px; height: 38px; }
  .rh__logo img { width: 74px; height: 74px; margin-top: -18px; }
  .rh__folio { display: none; }
  .rh__nav { margin-left: auto; }
  .rh__nav .btn { min-height: 40px; padding: 0 14px; font-size: .8125rem; margin-left: 0; }
  /* The full introduction must fit below the header, including on shorter phones. Keep all
     three animation layers on the same stage so the credentials and thread still line up. */
  .overture { --home-stage: max(100svh, 820px); }
  .hero { justify-content: flex-end; padding-bottom: 40px; }
  .hero__copy { max-width: none; }
  .hero__p { font-size: 1rem; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  html.live .overture { height: calc(var(--home-stage) * 2); }
  .credo { --mw: 72px; --mh: 38px; --rule-at: 21.5px; }
  .credo__list { grid-template-columns: 1fr; row-gap: 0; }
  .credo__item { padding: 14px 0 14px 20px; font-size: 1.35rem; border-bottom: 1px solid var(--rule-d); }
  .credo__item::before { top: 18px; bottom: auto; height: 14px; transform-origin: 50% 0; }
  html.live .credo__mark { top: calc(38% - var(--rule-at)); }
  html.live .credo__list { top: calc(38% + 18px); bottom: auto; left: var(--m); right: var(--m); grid-template-columns: 1fr; grid-template-rows: none; }
  html.live .credo__item, html.live .credo__item:nth-child(-n+2), html.live .credo__item:nth-child(n+3) { font-size: clamp(1.65rem, 7.6vw, 2rem); line-height: 1.08; padding: 16px 0 18px 22px; align-items: flex-start; border-bottom: 1px solid var(--rule-d); }
  html.live .credo__item:nth-child(-n+2)::before, html.live .credo__item:nth-child(n+3)::before { top: 0; bottom: auto; height: 100%; width: 1px; transform-origin: 50% 0; opacity: .8; }
  .ch__head { margin-bottom: 44px; }
  .ch__head--trail { justify-content: flex-start; text-align: left; }
  .ch__head--trail .ch__title { margin-left: 0; }
  .ledger__row a { padding: 24px 0 22px; }
  .ledger__row h3 { font-size: 1.55rem; }
  .ledger__row p { font-size: .9375rem; }
  .sector, .sector--trail { flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; }
  .sector--trail .sector__subs { justify-items: start; }
  .sector__name { white-space: normal; }
  .sector__subs { display: flex; flex-wrap: wrap; gap: 2px 14px; padding-bottom: 0; order: 2; font-size: .875rem; }
  .case { padding: 26px 22px; min-height: 0; }
  .case--a { min-height: 0; }
  .cases { row-gap: 48px; }
  .cases__more { justify-content: flex-start; margin-top: -8px; }
  .bridge__art { min-height: 300px; margin-top: 32px; }
  .note a { padding: 24px 0 22px 20px; }
  .note h3 { font-size: 1.4rem; }
  .note .tlink { display: none; }
  .close__title { font-size: clamp(2.45rem, 11vw, 3.2rem); }
  main[data-field="stub"] .close__title { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .close__cta { flex-direction: column-reverse; align-items: flex-start; gap: 22px; }
  .foot__in { grid-template-columns: 1fr; gap: 28px; }
  .foot__base .foot__credit { margin-left: 0; }
  .ihero__in { grid-template-columns: 1fr; align-items: end; }
  .ihero__copy { grid-column: 1; }
  .portrait { width: 88vw; right: -6vw; bottom: auto; top: calc(var(--head-h) + 8px); }
  .bio__lede, .bio__who, .bio__text, .bio__story { grid-column: 1 / -1; }
  .bio__story { grid-template-columns: 1fr; }
  .roles__block > h3, .roles__list { grid-column: 1 / -1; }
  .roles__block > h3 { padding-top: 0; margin-bottom: 4px; }
  .approach__item { grid-column: 1 / -1; }
  /* The map plate on a phone: the map full bleed straight under the chapter's underline, the
     regions as a two-column list beneath it, and the arcs scrubbed over one screen, not three. */
  html.live .globe { height: 200svh; }
  .globe__stage { align-content: start; row-gap: 20px; padding-top: calc(var(--head-h) + 14px); }
  .globe__map { order: -1; margin-inline: calc(var(--m) * -1); width: auto; }
  .globe__side .ch__title { margin-bottom: 14px; font-size: 2.1rem; }
  /* One column at reading size: the list is the plate's running score, and it fills the frame
     under the map instead of leaving the lower half of the pinned screen empty. */
  .regions { display: grid; grid-template-columns: 1fr; gap: 0; }
  .regions li { font-size: clamp(1.35rem, 6.2vw, 1.6rem); padding: 9px 0 8px; border-bottom: 1px solid var(--rule-d); }
  .globe__note { margin-top: 0; }
  .ihero--stub .ihero__copy { grid-column: 1; }
  .ihero--case .ihero__copy { grid-column: 1; }
  .intro__lede { font-size: clamp(1.6rem, 7.2vw, 2.1rem); margin-bottom: 56px; }
  .intro__lede.lede--long { font-size: clamp(1.4rem, 5.6vw, 1.75rem); }
  .ledger__row > div { grid-template-columns: 1fr; row-gap: 8px; padding: 24px 0 22px; }
  .filters { gap: 8px; }
  .filters button { min-height: 40px; padding: 0 14px; }
  .xrow { grid-template-columns: 1fr; padding: 24px 0 22px 20px; }
  .xrow__meta, .xrow h3, .xrow > p:not(.xrow__meta) { grid-column: 1; }
  .xrow h3 { font-size: 1.4rem; }
  .note__in { grid-template-columns: 1fr; row-gap: 10px; padding: 24px 0 22px 20px; }
  .note__read { justify-self: start; text-align: left; }
  .adds__head, .adds__list { grid-column: 1 / -1; }
  .adds__head { align-items: center; }
  .adds__list li:nth-child(even) { text-align: left; }
  .adds__logo { width: 140px; }
  .adds__list li { font-size: 1.45rem; padding: 18px 0 16px; }
  .cform, .cdetails { grid-column: 1 / -1; }
  .cdetails { grid-template-columns: 1fr; gap: 20px; }
  .cform__grid { grid-template-columns: 1fr; gap: 26px; }
}

/* --------------------------------------------------------------------------
   Reduced motion: no pinning, no parallax, no scrubbing. Simple fades only.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
  html.js [data-r] { opacity: 1; transform: none; }
  .sheet { transition: visibility 0s !important; }
  .sheet__list a { transform: none; }
}

/* Hero type waits for its faces (and the intro); the field is already drawing underneath. */
html.js.motion:not(.booted) [data-intro] { opacity: 0; animation: safety .01s linear 3.2s forwards; }
html.js.motion:not(.booted) [data-intro="eyebrow"] { clip-path: inset(0 100% 0 0); }

/* ==========================================================================
   Production additions (the One Bond Consulting site)
   ========================================================================== */

/* A chapter opening out of the deep navy of the globe plate. */
html.live .ch[data-base="deep"] { background: var(--navy-deep); }

/* The section's link stays marked on every page beneath it. */
.rh__nav a[aria-current]:not(.btn) { opacity: 1; }
.rh__nav a[aria-current]:not(.btn)::after { transform: scaleX(1); }

/* The way back up, above a detail page's title. */
.ihero__up { margin-bottom: clamp(18px, 3vh, 30px); }
.ihero__up .tlink { gap: 10px; font-size: .875rem; color: var(--soft-d); transition: color var(--t-hover) var(--ease); }
.ihero__up .tlink:hover { color: var(--ink-d); }
.ihero__up .tlink::after { left: 28px; right: 0; }
.ihero__back { position: relative; display: inline-block; width: 18px; height: 10px; flex: none; }
.ihero__back::before { content: ""; position: absolute; left: 1px; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; }
.ihero__back::after { content: ""; position: absolute; left: 1px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }

/* A chapter's note under its title (Home, What we do). */
.ch__note { margin: clamp(30px, 4.4vh, 44px) 0 clamp(20px, 3vh, 36px); max-width: 38em; font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem); }

/* Sectors: the sub-sectors and, on the Sectors page, the way in. */
.sector__side { flex: 1; min-width: 12em; display: grid; gap: 12px; align-content: end; justify-items: start; padding-bottom: .9em; }
.sector__side .sector__subs { flex: none; min-width: 0; padding-bottom: 0; }
.sector--trail .sector__side { justify-items: end; }
.sector__more { font-size: .875rem; }

/* A service's approach: numbered steps, each ruled by the thread. */
.steps__title { margin: 0 0 6px; }
.steps__row { display: grid; grid-template-columns: clamp(52px, 6vw, 88px) minmax(0, 1fr); align-items: baseline; padding: 24px 0 20px; }
.steps__n { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--t-m); line-height: 1; color: var(--soft); }
.steps__row h3 { font-family: var(--serif); font-weight: 500; font-size: var(--t-l); line-height: 1.1; letter-spacing: -.006em; max-width: 26ch; }
.pmqnote { margin-top: clamp(56px, 8vh, 88px); display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; padding: 30px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pmqnote__logo { width: 100%; max-width: 190px; height: auto; }
.pmqnote .body { max-width: 40em; }

/* A sector's areas. */
.areas__title { margin: 0 0 6px; }
.areas__row { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--gap); align-items: baseline; padding: 30px 0 26px; }
.areas__row h3 { font-family: var(--serif); font-weight: 500; font-size: var(--t-l); line-height: 1.08; letter-spacing: -.006em; }
.areas__row p { color: var(--soft); max-width: 36em; }

/* Insights: the summary line and an undated sample. */
.note__sum { margin-top: 8px; font-size: .9375rem; color: var(--soft); }
.note__date { color: var(--soft); font-size: .9375rem; }

/* Plain copy, and long-form copy (privacy, case studies, articles). */
.copy { display: grid; gap: 18px; max-width: 40em; margin-top: clamp(36px, 5vh, 56px); }
.copy .body { max-width: none; font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem); }
.copy__cta { margin-top: 18px; }
.prose { max-width: 46rem; display: grid; gap: clamp(36px, 5vh, 56px); }
.prose__meta { color: var(--soft); }
.prose__block h2 { font-family: var(--serif); font-weight: 500; font-size: var(--t-m); line-height: 1.15; margin-bottom: 14px; }
.prose__block p { color: var(--soft); max-width: 40em; text-wrap: pretty; }
.prose__block p + p { margin-top: 14px; }
.prose__block ul { margin-top: 12px; display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; color: var(--soft); }
.prose__back { margin-top: clamp(48px, 7vh, 80px); }

/* Contact: the address itself is the call to action. */
.cmail { grid-column: 1 / span 7; display: grid; gap: 12px; align-content: start; }
.cmail .label { color: var(--soft); }
.cmail__link { justify-self: start; font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.01em; overflow-wrap: break-word; padding-bottom: 6px; border-bottom: 1px solid var(--rule); transition: border-color var(--t-hover) var(--ease); }
.cmail__link:hover { border-color: var(--ink); }
.cmail__note { margin: 6px 0 16px; }
.cmail .btn { justify-self: start; }
.cdetails__note { display: block; margin-top: 4px; font-size: .8125rem; }

/* Footer: company line, contact and the PolyMentIQ reference. */
.foot__mid { display: grid; gap: 14px; align-content: start; }
.foot__pmq a, .foot__contact a { color: var(--ink-d); }
.foot__pmq a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(223, 176, 44, .6); }
.foot__social-ph { display: inline-flex; gap: 10px; align-items: center; font-size: .8125rem; }

/* ---------- The globe plate (Experience, About) ---------- */
.globe__head { padding-bottom: 0; }
.globe__lede { margin-top: clamp(14px, 2.4vh, 26px); max-width: 36em; }
.globe--3d .globe__map { aspect-ratio: auto; height: min(calc(100svh - var(--head-h) - 120px), 58vw); }
.globe__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: opacity .9s var(--ease); }
.globe__map.is-live .globe__poster { opacity: 0; }
.globe--3d .globe__map canvas { touch-action: pan-y; }
.regions small { margin-left: auto; padding-left: 10px; font-family: var(--sans); font-size: .75rem; letter-spacing: .04em; color: var(--soft-d); opacity: .75; }
.globe__foot { position: relative; z-index: 2; display: grid; gap: 10px; padding: 8px var(--m) clamp(72px, 10vh, 112px); }
.globe__foot .globe__note { grid-column: auto; margin-top: 0; }
.globe__list summary { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; font-size: .9375rem; color: var(--ink); }
.globe__list summary::-webkit-details-marker { display: none; }
.globe__list summary::before { content: ""; width: 9px; height: 9px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: translateY(-2px) rotate(45deg); transition: transform var(--t-ui) var(--ease); }
.globe__list[open] summary::before { transform: translateY(2px) rotate(-135deg); }
.globe__list dl { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px var(--gap); }
.globe__list dt { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--ink); }
.globe__list dd { margin-top: 4px; font-size: .875rem; line-height: 1.55; color: var(--soft); }

/* Country exploration uses the same type, gold rule and open space as the page. */
.globe--explore .globe__side { grid-column: 1 / span 4; padding-right: clamp(0px, 2vw, 28px); }
.globe--explore .globe__map { grid-column: 5 / span 8; }
.globe__picker { margin-bottom: 24px; }
.globe .regions[hidden], .globe .globe__selection[hidden], .globe .globe__paging[hidden], .globe__matches > [hidden] { display: none; }
.globe__browse { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 48px; padding: 7px 0; border-bottom: 1px solid var(--gold); text-align: left; font-family: var(--serif); font-size: 1.65rem; line-height: 1.15; }
.globe__plus { font-family: var(--sans); font-size: 1.3rem; color: var(--gold); }
.globe__browse:hover, .globe__browse:focus-visible { color: var(--gold-hi); }
.globe__browse:active { transform: translateY(1px); }
.globe__help { margin-top: 12px; color: var(--soft-d); font-size: .8125rem; line-height: 1.5; max-width: 32ch; }
.globe.has-selection .globe__help { display: none; }
.globe.has-selection .globe__browse { font-family: var(--sans); font-size: .875rem; }
.globe__country { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.08; text-wrap: balance; }
.globe__status { margin-top: 8px; font-size: .8125rem; line-height: 1.5; color: var(--soft-d); }
.globe__matches { margin-top: 20px; }
.globe__matches a { display: block; padding: 0 0 14px; border-bottom: 1px solid var(--rule-d); font-family: var(--serif); font-size: clamp(1.2rem, 1.65vw, 1.55rem); line-height: 1.22; }
.globe__matches a::after { content: ' →'; color: var(--gold); white-space: nowrap; }
.globe__matches a:hover, .globe__matches a:focus-visible, .globe__directory a:hover { color: var(--gold-hi); }
.globe__paging { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.globe__paging button { min-height: 44px; min-width: 44px; font-size: 1.4rem; color: var(--gold); }
.globe__paging button:hover:not(:disabled) { color: var(--ink-d); }
.globe__paging button:disabled { opacity: .35; cursor: default; }
.globe__position { font-size: .8125rem; color: var(--soft-d); font-variant-numeric: tabular-nums; }
.globe__reset { min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--soft-d); font: inherit; font-size: .8125rem; cursor: pointer; }
.globe__reset:hover, .globe__reset:focus-visible { color: var(--gold-hi); }
.globe__directory li + li { margin-top: 12px; }
.globe__directory a { text-decoration: underline; text-underline-offset: 3px; }
html:not(.js) .globe__picker { display: none; }
.xrow[id] { scroll-margin-top: 100px; }
.xrow:target { outline: 1px solid var(--gold); outline-offset: 8px; }
.country-browser { inset: 0; margin: auto; width: min(900px, calc(100% - 48px)); max-height: 84svh; border: 1px solid var(--rule-d); padding: 0; background: var(--navy-deep); color: var(--ink-d); overscroll-behavior: contain; color-scheme: dark; }
.country-browser::backdrop { background: rgba(9, 26, 37, .82); }
.country-browser[open] { animation: country-in .22s var(--ease) both; }
@keyframes country-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.country-browser__in { padding: clamp(24px, 4vw, 48px); }
.country-browser__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 0; background: var(--navy-deep); }
.country-browser__head h2 { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; line-height: 1.1; }
.country-browser__close { min-height: 44px; padding: 0 4px; font-size: .875rem; color: var(--soft-d); white-space: nowrap; }
.country-browser__close span { margin-left: 12px; color: var(--gold); font-size: 1.3rem; }
.country-browser input { width: 100%; margin: 26px 0 30px; padding: 12px 0; min-height: 48px; border: 0; border-bottom: 1px solid var(--gold); border-radius: 0; background: transparent; color: var(--ink-d); font: inherit; font-size: 1rem; }
.country-browser input::placeholder { color: var(--soft-d); opacity: 1; }
.country-browser__groups { display: grid; gap: 24px; }
.country-browser__region ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.country-browser__region h3 { margin-bottom: 10px; color: var(--soft-d); font-size: .875rem; font-weight: 500; }
.country-browser__region button { display: block; min-height: 44px; width: 100%; padding: 8px 0; text-align: left; font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; }
.country-browser__region button:hover, .country-browser__region button[aria-pressed="true"] { color: var(--gold-hi); }
.country-browser [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .country-browser[open] { animation: none; } }
@media (max-width: 960px) {
  .globe--explore .globe__stage { row-gap: 12px; padding-top: calc(var(--head-h) + 8px); }
  .globe--explore .globe__side, .globe--explore .globe__map { grid-column: 1 / -1; }
  .globe--explore .globe__side { align-self: start; padding-right: 0; }
  .globe--explore .globe__picker { margin-bottom: 12px; }
  .globe--explore .globe__help { margin-top: 6px; max-width: none; }
  .globe--explore .regions { gap: 0 18px; }
  .globe--explore .regions li { font-size: 1rem; padding: 3px 0; }
  .globe--3d.globe--explore .globe__map { height: max(150px, min(calc(100svh - var(--head-h) - 400px), 70vw)); aspect-ratio: auto; }
  .globe__matches { margin-top: 12px; }
  .globe__matches a { font-size: 1.2rem; }
  .country-browser { width: calc(100% - 32px); }
  .country-browser__region ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
}
@media (max-width: 700px) and (max-height: 650px) {
  .globe--3d.globe--explore .globe__map { height: 120px; }
  .globe__country { font-size: 1.7rem; }
  .globe__matches a { font-size: 1.1rem; }
  .globe__paging { margin-top: 0; }
}

/* ---------- The cement works (Building Materials title page) ---------- */
.ihero--works .works { position: absolute; z-index: 0; left: var(--m); right: var(--m); top: calc(var(--head-h) + 2vh); height: min(54svh, 46vw); pointer-events: none; }
.ihero--works .ihero__in { padding-top: calc(var(--head-h) + 2vh + min(54svh, 46vw) + 28px); }
.ihero--works .ihero__copy { grid-column: 1 / span 10; }
.works__dwg { display: block; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.works__gl { fill: none; }
.works__gl--minor { stroke: rgba(235, 239, 241, .035); stroke-width: 1.2; }
.works__gl--major { stroke: rgba(235, 239, 241, .07); stroke-width: 1.8; }
.works__ghost path { fill: none; stroke: rgba(235, 239, 241, .09); stroke-width: 2.2; }
.works .k { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.works .w1 { stroke: rgba(235, 239, 241, .88); stroke-width: 3.75; }
.works .w2 { stroke: rgba(235, 239, 241, .6); stroke-width: 2.55; }
.works .w3 { stroke: rgba(235, 239, 241, .34); stroke-width: 1.8; }
.works .wc { stroke: rgba(160, 196, 222, .14); stroke-width: 1.8; }
.works .wd { stroke: var(--gold); stroke-width: 2.85; }
.works .wf { stroke: var(--gold); stroke-width: 5.7; }
.works .wz { stroke: rgba(223, 176, 44, .26); stroke-width: 1.8; }
.works text { font-family: var(--sans); letter-spacing: .08em; fill: rgba(235, 239, 241, .55); }
.works .tx-t { fill: rgba(235, 239, 241, .9); font-weight: 500; }
.works .tx-d { fill: var(--gold); }
/* With the runtime, the drawing waits undrawn for its intro (and shows anyway after 3.2s if the
   runtime never starts); without it, or with reduced motion, it is simply there. */
html.js.motion .works .k { visibility: hidden; }
html.js.motion .works text { opacity: 0; }
html.js.motion .works.is-inked .k { visibility: visible; }
html.js.motion .works.is-inked text { opacity: 1; }
html.js.motion:not(.booted) .works .k, html.js.motion:not(.booted) .works text { animation: works-safety .01s linear 3.2s forwards; }
@keyframes works-safety { to { visibility: visible; opacity: 1; } }

@media (max-width: 960px) {
  .pmqnote { grid-template-columns: 1fr; }
  .globe--3d .regions { display: flex; flex-wrap: wrap; gap: 2px 22px; }
  .globe--3d .globe__map { height: min(calc(100svh - var(--head-h) - 200px), 80vw); }
  .globe__list dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmail { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .sector__side { order: 2; padding-bottom: 0; }
  .sector__side .sector__subs { order: 0; }
  .sector--trail .sector__side { justify-items: start; }
  .steps__row { grid-template-columns: 44px minmax(0, 1fr); padding: 18px 0 16px; }
  .steps__row h3 { font-size: 1.45rem; }
  .areas__row { grid-template-columns: 1fr; row-gap: 8px; padding: 22px 0 20px; }
  .areas__row h3 { font-size: 1.55rem; }
  .globe--3d .globe__map { height: auto; aspect-ratio: 1 / 1; }
  .globe--3d .regions { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .globe__list dl { grid-template-columns: 1fr; }
  .ihero--works .works { left: 0; right: 0; height: 36svh; overflow: hidden; }
  .ihero--works .works__dwg { width: calc(36svh * 2.497); max-width: none; margin-left: calc(50% - 18svh * 2.497); }
  .ihero--works .ihero__in { padding-top: calc(var(--head-h) + 2vh + 36svh + 20px); }
  .ihero--works .ihero__copy { grid-column: 1; }
}