/* Typefaces are stored with this site (SIL Open Font License 1.1, see assets/fonts). Nothing is loaded from other companies. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../assets/fonts/newsreader-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../assets/fonts/hanken-grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------------------------
   Nexus Equity Management
   Tokens are overridden per site from js/site.config.js
------------------------------------------------------------------- */
:root {
  --paper: #E3E7E4;      /* cool mineral grey, not warm white */
  --paper2: #D4DAD6;
  --ink: #0D1511;        /* green-black */
  --ink2: #435049;
  --rule: rgba(13, 21, 17, .2);
  --accent: #C4401B;     /* oxide. used for the node, the mark and interaction only */
  --deep: #0D1511;
  --deepText: #E3E7E4;
  --deepMuted: #98A59E;
  --deepRule: rgba(227, 231, 228, .2);
  --deepSoft: #C2CCC6;   /* body copy on the dark sections */

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1480px;        /* width of the content block; the header still runs edge to edge */
  --hh: 64px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hh); scroll-snap-type: y proximity; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { overflow-x: clip; }
h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }

/* ---------------- header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 20; height: var(--hh);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter);   /* logo and menu sit at the window's edges */
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: 14px; padding-block: 12px; margin-block: -12px; }   /* the padding makes the link a comfortable touch target; the equal negative margin keeps the layout exactly as it was */
.brand-name { font-weight: 600; font-size: .9375rem; letter-spacing: .01em; }

/* logo: two alpha masks (letters, X) so each can take a theme colour */
.logo { position: relative; display: block; height: 20px; aspect-ratio: 1200 / 273; flex: none; }
.logo i { position: absolute; inset: 0; -webkit-mask: center / 100% 100% no-repeat; mask: center / 100% 100% no-repeat; }
.logo .logo-a { background: var(--logo, var(--ink)); -webkit-mask-image: url(../assets/logo-letters.png); mask-image: url(../assets/logo-letters.png); }
.logo .logo-x { background: var(--logoX, #929C96); -webkit-mask-image: url(../assets/logo-x.png); mask-image: url(../assets/logo-x.png); }
.deep .logo .logo-a { background: var(--deepText); }
.deep .logo .logo-x { background: var(--deepMuted); }
.brand-sub { padding-left: 12px; border-left: 1px solid var(--rule); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); line-height: 1.2; }
.deep .brand-sub { border-color: var(--deepRule); color: var(--deepSoft); }
/* sites without a logo fall back to the plain name */
.has-logo .brand-name { display: none; }
body:not(.has-logo) .logo, body:not(.has-logo) .brand-sub { display: none; }
.nav { display: flex; gap: clamp(18px, 3vw, 40px); font-size: .9375rem; }

/* text link with an accent line that draws in */
.tl { position: relative; padding-block: 4px; }
.tl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.tl:hover::after, .tl:focus-visible::after { transform: scaleX(1); }
.tl-strong { font-weight: 600; }

/* ---------------- hero ---------------- */
.hero {
  max-width: var(--maxw); margin-inline: auto; padding: clamp(40px, 7vh, 88px) var(--gutter);
  min-height: calc(100svh - var(--hh)); display: flex; flex-direction: column; justify-content: center;   /* same space above and below */
}
.hero-in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; grid-template-rows: auto 1fr; align-items: start; }
.display {
  grid-column: 1 / span 7; grid-row: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--serif); font-weight: 300; font-optical-sizing: auto;
  font-size: clamp(3.4rem, 8.6vw, 8.5rem); line-height: .94; letter-spacing: -.035em;
  margin-left: -.04em;
}
/* the mask must be taller than the glyphs, or the O and the dots on the i get cut off */
.hl { display: block; overflow: hidden; padding-block: .2em .42em; margin-block: -.2em -.42em; }
.hl.done { overflow: visible; }   /* once the reveal has finished nothing can be clipped */
.hl > span { display: block; transform: translateY(108%); animation: up 1.1s var(--ease) forwards; }
.hl:nth-child(2) > span { animation-delay: .12s; }
.hl:nth-child(3) > span { animation-delay: .24s; }
@keyframes up { to { transform: none; } }

.hero-copy { grid-column: 1 / span 6; grid-row: 2; align-self: end; margin-top: clamp(28px, 4.5vh, 52px); position: relative; z-index: 1; }

/* one photograph, cropped to the column; it wipes in once */
.hero-img { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: stretch; position: relative; margin: 0; overflow: hidden; background: var(--paper2);
  justify-self: end; width: 100%; max-width: 560px;
  min-height: clamp(440px, calc(100svh - var(--hh) - 300px), 620px); animation: wipe 1.3s var(--ease) .25s both; }
.hero-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@keyframes wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
html.rv .hero-img.is-late { animation: none; }   /* too slow or failed: no wipe, the frame is simply shown and the picture appears when it arrives */
html.rv .hero-img:not(.is-ready) { animation-play-state: paused; }   /* js/reveal.js: the wipe starts when the photograph is decoded */
.lede { max-width: 30rem; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.5; color: var(--ink); }
.rise { opacity: 0; transform: translateY(10px); animation: rise .9s var(--ease) .7s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* the one call to action: a sentence and a line that runs on to a point */
.cta { display: inline-flex; align-items: center; gap: 18px; margin-top: 28px; font-weight: 600; font-size: 1.1875rem; padding-block: 8px; }
.hero-copy .cta { display: flex; width: fit-content; margin-bottom: -17px; }   /* the text's baseline, not its padding box, sits on the image's bottom edge */
.hero-copy .cta-line { width: 80px; }
.hero-copy .cta-line::after { width: 10px; height: 10px; top: -4.5px; right: -5px; }
.hero-copy .cta:hover .cta-line, .hero-copy .cta:focus-visible .cta-line { width: 148px; }
.cta-line { position: relative; display: block; width: 56px; height: 1px; background: currentColor; transition: width .6s var(--ease); }
.cta-line::after { content: ""; position: absolute; right: -4px; top: -3.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cta:hover .cta-line, .cta:focus-visible .cta-line, .mail:hover .cta-line, .mail:focus-visible .cta-line { width: 120px; }


/* ---------------- sections ---------------- */
.sec { padding-block: clamp(88px, 13vw, 190px); }
.hero, .position, .practice, .method, .whofor, .contact { scroll-snap-align: start; }   /* only the one-screen sections snap; tall ones scroll freely */
.position { min-height: calc(100svh - var(--hh)); display: flex; align-items: center; }
.position .wrap, .practice .wrap { width: 100%; }
.whofor { min-height: calc(100svh - var(--hh)); display: flex; align-items: center; padding-block: clamp(56px, 8vh, 110px); box-shadow: inset 0 1px 0 var(--deepRule); }   /* near-black green, type only; a hairline separates it from the Method section above */
.whofor .wrap { width: 100%; }
.whofor .statement { font-weight: 400; color: var(--deepText); line-height: 1.18; }
.whofor .statement em { font-weight: inherit; }   /* the underlined phrases are the same weight as the words around them */   /* light type on dark reads thinner, so a step heavier than the light statement above */
@media (min-width: 901px) { .whofor .statement .ln { display: block; white-space: nowrap; } }   /* deliberate line breaks: five short lines, none of them split */
.practice { min-height: calc(100svh - var(--hh)); display: flex; align-items: center; padding-block: clamp(56px, 8vh, 110px); }

.statement {
  grid-column: 1 / span 9;
  font-family: var(--serif); font-weight: 300; font-optical-sizing: auto;
  font-size: clamp(1.9rem, 3.7vw, 3.7rem); line-height: 1.14; letter-spacing: -.02em;
  text-wrap: pretty;
}
.statement em { font-style: italic; font-weight: 300; }
.position .statement em, .whofor .statement em { font-style: normal; background: linear-gradient(var(--accent), var(--accent)) 0 96% / 100% 2px no-repeat; }
/* section 2 is the one centred statement */
.position .statement, .whofor .statement { grid-column: 2 / span 10; text-align: center; text-wrap: balance; }
.position .statement > span { display: block; text-wrap: balance; }
.position .statement .closing { margin-top: .55em; }
@media (min-width: 901px) { .position .statement em { white-space: nowrap; } }   /* a highlighted phrase never splits across lines */

.head { align-items: start; margin-bottom: clamp(28px, 5vh, 56px); }
.h2 { grid-column: 1 / -1; font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 3.7vw, 3.7rem); line-height: 1.08; letter-spacing: -.02em; }

/* markets: the list on the left drives the photograph on the right */
.practice .h2 { text-align: center; }
.markets { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: stretch; }
.ledger { grid-column: 1 / span 6; border-bottom: 1px solid var(--rule); }
.row { position: relative; border-top: 1px solid var(--rule); }
.row::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.row.is-active::before { transform: scaleX(1); }
/* the whole row is one link: title, description and the action are its content */
.row-link { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; row-gap: 10px; align-items: baseline; padding-block: clamp(20px, 3.2vh, 30px); color: inherit; }
.row-t { grid-column: 1; grid-row: 1; font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.5rem); letter-spacing: -.02em; line-height: 1.05; transition: transform .6s var(--ease); }
.row.is-active .row-t { transform: translateX(14px); }
.row-d { grid-column: 1 / -1; grid-row: 2; font-size: .9375rem; color: var(--ink); }
/* the action is always visible: strong dark text, one restrained orange arrow */
.row-cta { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.row-arrow { flex: none; display: block; color: var(--accent); transition: transform .45s var(--ease); }
.row-link:hover .row-arrow, .row-link:focus-visible .row-arrow { transform: translateX(6px); }
.row-link:hover .row-cta-t, .row-link:focus-visible .row-cta-t { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.row-img { display: none; }
picture > source { display: none; }   /* inside a display: contents picture a <source> would otherwise become an empty grid item (an extra row) */
.row-link picture, .market-panel picture { display: contents; }   /* the picture wrapper takes no box: the photograph keeps its place in the grid / the panel */
/* a row without a page (another client's site) is plain text, with no action */
.row-link:not([href]) .row-cta { display: none; }
.row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.market-panel { grid-column: 8 / span 5; position: relative; margin: 0; overflow: hidden; background: var(--paper2); }
.market-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity .9s var(--ease), transform 1.8s var(--ease);
}
.market-panel img.on { opacity: 1; transform: none; }
body:not(.has-market-images) .market-panel, body:not(.has-market-images) .row-img { display: none; }
body:not(.has-market-images) .ledger { grid-column: 1 / -1; }

/* method */
.deep { background: var(--deep); color: var(--deepText); }
.method { min-height: calc(100svh - var(--hh)); display: flex; align-items: center; padding-block: clamp(56px, 8vh, 110px); }
.method .wrap { width: 100%; }
.method .h2 { margin-bottom: clamp(32px, 6vh, 72px); }
.principles { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 112px); border-bottom: 1px solid var(--deepRule); }
.principles article { position: relative; padding-block: clamp(28px, 6.4vh, 68px); border-top: 1px solid var(--deepRule); }
.principles article::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.principles article:hover::before { transform: scaleX(1); }
.principles h3::after, .method .h2::after { content: "."; color: var(--accent); }   /* the full stop is the accent */
.principles h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 3.5vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; }
.principles p { margin-top: 16px; max-width: 31rem; font-size: 1.125rem; line-height: 1.55; color: var(--deepText); }

/* contact */
.contact { background: var(--paper2); }
.contact .grid > div { grid-column: 1 / -1; }
.mega { font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 7vw, 7rem); line-height: .96; letter-spacing: -.035em; }
.mail { display: inline-flex; align-items: center; gap: 16px; margin-top: clamp(28px, 4vw, 52px); font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 500; padding-block: 8px; }
.small { margin-top: 20px; font-size: .9rem; color: var(--ink); }

/* contact: one email address, large; no form */
.contact { display: flex; align-items: center; min-height: calc(100svh - var(--hh) - var(--footer-h, 0px)); padding-block: clamp(36px, 5.2svh, 110px); }
.contact .wrap { width: 100%; }
.mail-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 32px; margin-top: clamp(24px, min(4vw, 4svh), 52px); }
.mail-row .mail { margin-top: 0; font-size: clamp(1.4rem, 3vw, 2.6rem); }

/* footer */
.site-footer { padding-block: clamp(36px, 5vh, 64px) clamp(24px, 3.5vh, 40px); }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: clamp(20px, 3vh, 32px); border-bottom: 1px solid var(--deepRule); }
.foot-nav { display: flex; gap: clamp(18px, 3vw, 40px); font-size: .9375rem; }
.details { display: flex; flex-wrap: wrap; gap: 14px clamp(32px, 5vw, 80px); padding-block: clamp(20px, 3vh, 32px); border-bottom: 1px solid var(--deepRule); }
.details dt { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--deepSoft); margin-bottom: 4px; }
.details dd { font-size: .9375rem; color: var(--deepText); font-variant-numeric: tabular-nums; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 2.4vw, 32px); padding-block: clamp(16px, 2.4vh, 24px); font-size: .875rem; }
.legal-links a { color: var(--deepSoft); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .3s, border-color .3s; }
.legal-links a:hover, .legal-links a:focus-visible { color: var(--deepText); border-color: var(--accent); }
.foot-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.legal { max-width: 52rem; font-size: .8125rem; line-height: 1.65; color: var(--deepSoft); }
.copy { white-space: nowrap; font-size: .8125rem; color: var(--deepSoft); }

/* the legal documents */
.legal-page { min-height: calc(100svh - var(--hh) - var(--footer-h, 0px)); padding-block: clamp(56px, 9vh, 120px); }
.legal-page h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 5vw, 4.6rem); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 14px; }
.legal-page .legal-meta { margin-bottom: clamp(28px, 5vh, 52px); font-size: .875rem; color: var(--ink2); }
.legal-page h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -.01em; line-height: 1.2; margin: 40px 0 12px; }
.legal-page p, .legal-page li { max-width: 44rem; line-height: 1.65; color: var(--ink); }
.legal-page p { margin-bottom: 16px; }
.legal-page ul { margin: 0 0 16px 1.2em; padding: 0; list-style: disc; }
.legal-page li { margin-bottom: 8px; padding-left: 4px; }
.legal-page li::marker { color: var(--accent); }
.legal-page p a, .legal-page li a { border-bottom: 1px solid var(--accent); }
.legal-page .legal-back { margin-top: 48px; }

/* skip link, current page, mobile menu */
.skip { position: absolute; left: 12px; top: -64px; z-index: 60; padding: 12px 18px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: .9375rem; transition: top .2s; }
.skip:focus { top: 12px; }
.nav a[aria-current]::after { transform: scaleX(1); }
.guide { margin-top: 16px; max-width: 40rem; color: var(--ink); text-wrap: balance; }
.guide + .small { margin-top: 12px; }
.ch-link { color: var(--deepText); border-bottom: 1px solid var(--deepRule); padding-bottom: 2px; transition: border-color .3s; }
.ch-link:hover, .ch-link:focus-visible { border-color: var(--accent); }

.menu-btn { display: none; font: 600 .8125rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--accent); padding: 8px 0; cursor: pointer; }
.menu {
  position: fixed; inset: var(--hh) 0 0 0; z-index: 19; background: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between; padding: clamp(20px, 5vh, 48px) var(--gutter) 32px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.menu.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu .big { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 12vw, 3.8rem); line-height: 1.15; letter-spacing: -.02em; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.menu .big::after { content: "."; color: var(--accent); }
.menu-foot { font-size: .875rem; color: var(--ink2); }
html.menu-open { overflow: hidden; }
@media (min-width: 901px) { .menu { display: none; } }


/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .hero { padding-top: 44px; min-height: 0; }
  .hero-in { display: block; }
  .hero-copy { margin-top: 28px; padding-bottom: 0; }
  .hero-img { margin-top: 40px; min-height: 0; aspect-ratio: 4 / 5; }
  .display { font-size: clamp(3.2rem, 17vw, 6rem); }
  .statement, .position .statement, .whofor .statement, .h2, .contact .grid > div { grid-column: 1 / -1; }
  .markets { display: block; }
  .market-panel { display: none; }
  .row.is-active .row-t { transform: none; }
  .row.is-active::before { transform: scaleX(0); }
  .row-t { grid-column: 1 / -1; }
  .row-d { grid-row: 2; }
  .row-cta { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 4px; padding-block: 6px; }
  body.has-market-images .row-img { display: block; grid-column: 1 / -1; grid-row: 4; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 12px; background: var(--paper2); }
  .method { min-height: 0; }
  .whofor .statement { font-size: 1.7rem; }
  .principles { grid-template-columns: 1fr; }
  .foot-top { flex-direction: column; align-items: flex-start; }
  .foot-nav { flex-wrap: wrap; }
  .details { flex-direction: column; }
  .foot-bottom { flex-direction: column; gap: 14px; }
  .contact { min-height: 0; }
  .nav { display: none; }
  .menu-btn { display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hl > span, .rise { animation: none; transform: none; opacity: 1; }
  .hl { overflow: visible; }
  .hero-img { animation: none; }
  /* everything else that moves: no fades, slides or draws */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}