/* ==========================================================================
   Garden City Equity — Edition 2026
   Type:  Source Serif 4 is the ONE typeface on the site (client decision 2026-09-23:
          "use it everywhere") — headlines, body, nav, buttons, labels, captions, forms,
          footer, 404. It is a variable font (wght 200–900, opsz 8–60): with
          font-optical-sizing:auto every size picks its own cut — the sharp display cut on
          headlines, the text cut in body copy, and the wider, sturdier caption cut on
          12–15px labels. The founder letter's handwriting (Oooh Baby, about.css) is the only
          other face. Source Sans 3 is no longer loaded (its files stay in assets/fonts).
   ========================================================================== */

/* ---------- fonts ---------- */
/* Source Serif 4 (Adobe, OFL-1.1) */
@font-face{font-family:'Source Serif 4';src:url('../fonts/source-serif-4-var.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('../fonts/source-serif-4-var-italic.woff2') format('woff2');font-weight:200 900;font-style:italic;font-display:swap}

/* ---------- tokens ---------- */
:root{
  /* surface */
  --paper:#F7F5F0;          /* warm off-white — primary */
  --paper-2:#F1EDE5;        /* alt band */
  --bone:#E8E2D6;           /* accent surface */
  --card:#FDFCFA;

  /* ink */
  --ink:#14181A;            /* near-black display + body */
  --ink-soft:#5A6462;
  --ink-faint:#8C9694;

  /* brand greens */
  --pine:#123F3C;
  --pine-deep:#0D2F2D;
  --teal:#287972;
  --sage:#809F9F;
  --mist:#CFDCDC;
  --pop:#8FD9CB;            /* bright tint of brand teal — "The People Equity Firm" on dark */

  /* lines */
  --line:rgba(20,24,26,.13);
  --line-soft:rgba(20,24,26,.075);
  --line-dark:rgba(247,245,240,.16);

  /* metrics */
  --gutter:clamp(1.25rem,4.4vw,4.5rem);
  --wide:1800px;
  --mid:1440px;
  --text:760px;
  --sect:clamp(3.5rem,7vw,7rem);
  --sect-half:clamp(2.2rem,3.8vw,3.8rem);

  --r-sm:0;
  --r:0;
  --r-lg:0;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --hdr:78px;

  /* type — one serif for everything */
  --f-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  /* retired: the site used to set UI text in Source Sans 3. Kept only as an alias so any
     rule still written against it resolves to the serif — use --f-serif in new CSS. */
  --f-sans:var(--f-serif);
  /* the weight scale. Body 400; headlines 460. A serif semibold at 14–16px reads heavy and
     bookish, so small UI text sits lighter than the old sans 600. Use these, not literals. */
  --w-btn:460;         /* buttons (.btn, the Menu button, fund-list rows) and large menu caps — the headline weight */
  --w-ui:520;          /* small labels: link-arrows, eyebrows, captions, footer/404 links */
  --w-caps:540;        /* the header's ALL-CAPS section links */
  --w-name:580;        /* names, small card titles, emphasised figures */

  /* the header bar's side padding — the phone menu sheet uses it too, so its links sit under the logo */
  --bar-x:clamp(1.1rem,1.8vw,2.1rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-serif);
  font-optical-sizing:auto;
  font-size:clamp(1.0625rem,1rem + .2vw,1.125rem);
  line-height:1.6;
  font-weight:400;
  font-kerning:normal;
  /* Source Serif's default figures are tabular (a wide, gapped "1"), so running text asks for
     proportional ones: "2021", "$51M", "10,000+" set tight. Anything that must line up in a
     column or hold its width while counting sets tabular-nums itself. */
  font-variant-numeric:proportional-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}

img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
/* form hints sit quieter than typed text */
::placeholder{color:var(--ink-faint);opacity:1}
::selection{background:var(--pine);color:var(--paper)}
.on-dark ::selection,.on-darker ::selection,.hero--video ::selection,.photo-hero ::selection,.gv-band ::selection,.nf ::selection{background:var(--pop);color:var(--pine-deep)}

/* keyboard focus: one on-palette ring everywhere (teal on paper, pop on the greens) */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
.on-dark :focus-visible,.on-darker :focus-visible,.hero--video :focus-visible,.photo-hero :focus-visible,.gv-band :focus-visible,.nf :focus-visible,
body.dark-top .site-header:not(.is-stuck) :focus-visible,.on-dark-page .site-header:not(.is-stuck) :focus-visible{outline-color:var(--pop)}
main:focus{outline:none}
.skip-link{
  position:fixed;left:1rem;top:1rem;z-index:10000;padding:.8rem 1.2rem;
  background:var(--pine-deep);color:var(--paper);font-weight:var(--w-ui);font-size:1rem;line-height:1.2;
  transform:translateY(calc(-100% - 1.5rem));transition:transform .35s var(--ease-out),opacity .2s var(--ease);
  /* also invisible (not just off the top) until focused: full-page captures and zoomed or
     scrolled-past viewports could otherwise catch it */
  opacity:0;pointer-events:none;
}
.skip-link:focus{transform:none;opacity:1;pointer-events:auto;outline:2px solid var(--pop);outline-offset:2px}

/* paper grain — kills the flat "generated" look */
body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.container{max-width:var(--mid);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}

.section{padding-block:var(--sect);position:relative}
.section--tight{padding-block:var(--sect-half)}

.on-alt{background:var(--paper-2)}

.on-dark{background:var(--pine);color:var(--paper)}
.on-darker{background:var(--pine-deep);color:var(--paper)}
.on-dark a:not(.btn),.on-darker a:not(.btn){color:inherit}
a.btn{color:var(--fg)}
.on-dark .lede,.on-darker .lede{color:rgba(247,245,240,.72)}
.on-dark .eyebrow,.on-darker .eyebrow{color:var(--sage)}

/* ---------- type scale ---------- */
.d1,.d2,.d3,h1,h2,h3{margin:0;font-weight:400}

/* headlines: Source Serif 4, optical sizing on (display cut at large sizes), balanced wraps */
.d1,.d2,.d3,h1,h2{
  font-family:var(--f-serif);
  font-optical-sizing:auto;
  text-wrap:balance;
}
.d1,h1{
  font-weight:460;
  font-size:clamp(2.6rem,5.9vw,6.1rem);
  line-height:1.06;
  letter-spacing:-.024em;
}
.d2,h2{
  font-weight:460;
  font-size:clamp(2.05rem,3.75vw,3.45rem);
  line-height:1.09;
  letter-spacing:-.02em;
}
.d3{
  font-weight:460;
  font-size:clamp(1.75rem,2.75vw,2.5rem);
  line-height:1.13;
  letter-spacing:-.015em;
}
.d1 em,.d2 em,.d3 em,h1 em,h2 em{
  font-style:italic;
  color:var(--teal);
  letter-spacing:-.012em;
}
.on-dark .d1 em,.on-dark .d2 em,.on-darker .d2 em,.on-darker .d1 em,.on-dark .d3 em{color:var(--sage)}

h3{font-family:var(--f-serif);font-optical-sizing:auto;font-weight:var(--w-name);letter-spacing:-.008em;line-height:1.25}

.lede{
  margin:0;
  font-size:clamp(1.125rem,1rem + .5vw,1.375rem);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:56ch;
  font-weight:400;
}

.eyebrow,.mono{
  font-family:var(--f-serif);
  font-weight:var(--w-ui);
  font-size:1rem;
  letter-spacing:.004em;
}
.eyebrow{
  margin:0;color:var(--teal);
  display:flex;align-items:flex-start;gap:.85rem;
}
.eyebrow::before{
  content:'';width:clamp(20px,3vw,44px);height:0;border-top:1px solid currentColor;flex:none;margin-top:.78em;
}
/* No page sets an eyebrow at present (they were taken out of the markup). .eyebrow (with its
   on-dark colour) is kept as the site's label component for future use; the centred two-dash
   variant and the per-hero eyebrow rules (page hero, giving, shareholders, team) went with them. */

/* section heads */
.section-head{display:grid;gap:clamp(1rem,1.5vw,1.4rem);max-width:900px;margin-bottom:clamp(1.9rem,3.2vw,3.25rem)}
.section-head--center{justify-items:center;text-align:center;margin-inline:auto}
.section-head--center .lede{text-align:center}

/* ---------- buttons ---------- */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:var(--line);
  display:inline-flex;align-items:center;gap:.62rem;
  padding:1rem 1.65rem;border-radius:0;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-size:1.02rem;font-weight:var(--w-btn);letter-spacing:.008em;line-height:1.25;white-space:nowrap;
  cursor:pointer;position:relative;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .45s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn__t{display:inline-flex;align-items:center;gap:.62rem}
.btn:hover{--bg:var(--ink);--fg:var(--paper);--bd:var(--ink)}
.btn--solid{--bg:var(--pine);--fg:var(--paper);--bd:var(--pine)}
.btn--solid:hover{--bg:var(--teal);--fg:var(--paper);--bd:var(--teal)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn--ghost:hover{--bg:var(--ink);--fg:var(--paper);--bd:var(--ink)}
.on-dark .btn--ghost,.on-darker .btn--ghost{--fg:var(--paper);--bd:rgba(247,245,240,.28)}
.on-dark .btn--ghost:hover,.on-darker .btn--ghost:hover{--bg:var(--paper);--fg:var(--pine-deep);--bd:var(--paper)}
.on-darker .btn--solid{--bg:var(--paper);--fg:var(--pine-deep);--bd:var(--paper)}
.on-darker .btn--solid:hover{--bg:var(--sage);--fg:var(--pine-deep);--bd:var(--sage)}
/* the narrowest phones (320px: iPhone SE, or any phone on Display Zoom): a long label wraps inside its
   button instead of running off the column ("Meet the shareholder network" on the homepage) */
@media (max-width:379.98px){.btn{max-width:100%;white-space:normal}}

.link-arrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-serif);font-weight:var(--w-ui);font-size:.98rem;letter-spacing:.004em;
  color:var(--ink);padding-bottom:.42rem;border-bottom:1px solid var(--line);
  transition:color .35s var(--ease),border-color .35s var(--ease);
  white-space:nowrap;
}
.link-arrow svg{width:13px;height:13px;flex:none;transition:transform .45s var(--ease-out)}
.link-arrow:hover{color:var(--teal);border-color:var(--teal)}
.link-arrow:hover svg{transform:translateX(4px)}
.on-dark .link-arrow,.on-darker .link-arrow{border-color:var(--line-dark)}
.on-dark .link-arrow:hover,.on-darker .link-arrow:hover{color:var(--sage);border-color:var(--sage)}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto;z-index:900;
  transition:transform .55s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid var(--line-soft);
}
.site-header .bar{
  max-width:none;padding:.95rem var(--bar-x);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  transition:padding .45s var(--ease);
}
.site-header.is-stuck{background:rgba(247,245,240,.82);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom-color:var(--line-soft)}
.site-header.is-stuck .bar{padding-block:.72rem}
.site-header.is-hidden{transform:translateY(-105%)}
.brand{display:block;flex:none}
.brand img{width:clamp(172px,15vw,208px);height:auto}
.logo-light{display:none}
.on-dark-page .logo-dark{display:none}
.on-dark-page .logo-light{display:block}
/* 404: the bar sits on the dark page until it frosts — keep the section links legible, and the dark logo once frosted */
.on-dark-page .site-header:not(.is-stuck) .bar-nav a{color:var(--paper)}
.on-dark-page .site-header.is-stuck .logo-dark{display:block}
.on-dark-page .site-header.is-stuck .logo-light{display:none}

/* header links (Pamlico-style): the six sections, ALL CAPS, at the right — the one place the
   site sets capitals. Serif capitals want more air than sans ones and read heavy at a sans
   semibold, so they sit at a medium weight with open tracking. */
.bar-nav{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.3rem)}
.bar-nav a{
  position:relative;padding-block:.3rem;color:inherit;
  font-weight:var(--w-btn);font-size:clamp(1.02rem,1.3vw,1.36rem);
  letter-spacing:.012em;white-space:nowrap;   /* sentence case (client, 2026-10-01): Team, not TEAM */
  transition:color .3s var(--ease);
}
/* six links: just above the Menu-button width they sit a little closer and smaller so the row holds beside the logo */
@media (min-width:821px) and (max-width:980px){
  .bar-nav{gap:.85rem}
  .bar-nav a{font-size:.96rem;letter-spacing:.005em}
}
.bar-nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease-out);
}
.bar-nav a:hover::after,.bar-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.bar-nav a[aria-current="page"]{color:var(--teal)}

.menu-btn,.menu-sheet{display:none}
:root{--logo-w:clamp(172px,15vw,208px)}
/* every width (client, 2026-10-01): the bar is the logo and a "MENU" button; the section links live in
   the full-screen sheet it opens. Without JS the links stay in the bar as before. */
.js .site-header .bar-cta{display:none}
.js .site-header .bar{flex-wrap:nowrap}
/* the button: two drawn lines (the lower one shorter, set to the right) and the word in the nav's
   capitals; no box. Open, the lines cross and the word reads CLOSE. */
.js .menu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.85rem;
  min-height:44px;margin:0 0 0 auto;padding:.55rem 0 .55rem .6rem;
  border:0;border-radius:0;background:transparent;color:var(--ink);
  font-family:var(--f-serif);font-optical-sizing:auto;font-weight:600;font-size:1.02rem;line-height:1;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .35s var(--ease);
}
.menu-btn__i{position:relative;flex:none;width:30px;height:10px}
.menu-btn__i::before,.menu-btn__i::after{
  content:'';position:absolute;right:0;height:2px;background:currentColor;
  transition:transform .45s var(--ease-out),top .45s var(--ease-out),width .45s var(--ease-out);
}
.menu-btn__i::before{top:0;width:100%}
.menu-btn__i::after{top:8px;width:66%}
.menu-btn[aria-expanded="true"] .menu-btn__i::before{top:4px;width:80%;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__i::after{top:4px;width:80%;transform:rotate(-45deg)}
/* over a dark hero, the 404, and the open sheet: paper on the greens */
body.dark-top .site-header:not(.is-stuck) .menu-btn,
.on-dark-page .site-header:not(.is-stuck) .menu-btn,
.site-header.is-menu-open .menu-btn{color:var(--paper)}
@media (hover:hover){.js .menu-btn:hover{color:var(--teal)}.site-header.is-menu-open .menu-btn:hover,body.dark-top .site-header:not(.is-stuck) .menu-btn:hover{color:var(--mist)}}

/* the sheet: pine-deep, full screen, the header (logo + Close) stays on top of it. Its sides
   match the bar's padding, so the links start directly under the logo. */
.js .menu-sheet{
  display:flex;flex-direction:column;
  position:fixed;inset:0;z-index:899;
  padding:calc(var(--hdr) + clamp(1.4rem,6vh,3rem)) var(--bar-x) max(1.6rem,env(safe-area-inset-bottom));
  background:var(--pine-deep);color:var(--paper);
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;
  transition:opacity .4s var(--ease),visibility 0s linear .4s;
}
.js .menu-sheet.is-open{visibility:visible;opacity:1;transition:opacity .4s var(--ease),visibility 0s}
/* one centred block: the links large on the left, the firm's address and contact lines on the right
   behind a hairline (stacked on phones, the details under the links) */
.menu-sheet__in{
  width:100%;max-width:1080px;margin:auto;padding-bottom:clamp(1rem,6vh,4rem);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;column-gap:clamp(2.5rem,7vw,7rem);
}
.menu-sheet__info{
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(2.5rem,7vw,7rem);border-left:1px solid var(--line-dark);
  font-family:var(--f-serif);font-size:clamp(1.05rem,1.25vw,1.25rem);line-height:1.7;color:rgba(247,245,240,.82);
  opacity:0;transition:opacity .6s var(--ease) .25s;
}
.menu-sheet.is-open .menu-sheet__info{opacity:1}
.menu-sheet__info p{margin:0}
.menu-sheet__info .menu-sheet__h{font-style:italic;color:var(--pop);font-size:1.02em;margin-top:1.9rem}
.menu-sheet__info .menu-sheet__h:first-child{margin-top:0}
.menu-sheet__info a{color:inherit;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.menu-sheet__info a:hover{color:var(--paper);border-color:currentColor}
@media (max-width:820px){
  .menu-sheet__in{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.6rem,5vh,2.6rem);max-width:30rem;padding-bottom:0}
  .menu-sheet__info{padding:clamp(1.4rem,4vh,2rem) 0 0;border-left:0;border-top:1px solid var(--line-dark);font-size:1rem;line-height:1.65}
  .menu-sheet__info .menu-sheet__h{margin-top:1.1rem}
}
.menu-sheet ul{list-style:none;margin:0;padding:0}
.menu-sheet li a{
  display:inline-block;min-height:44px;padding:.42rem 0;color:var(--paper);
  font-family:var(--f-serif);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(2.3rem,10.5vw,3.6rem);line-height:1.08;letter-spacing:-.018em;
  opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .7s var(--ease-out),color .3s var(--ease);
}
.menu-sheet.is-open li a{opacity:1;transform:none}
.menu-sheet.is-open li:nth-child(2) a{transition-delay:.04s}
.menu-sheet.is-open li:nth-child(3) a{transition-delay:.08s}
.menu-sheet.is-open li:nth-child(4) a{transition-delay:.12s}
.menu-sheet.is-open li:nth-child(5) a{transition-delay:.16s}
.menu-sheet.is-open li:nth-child(6) a{transition-delay:.2s}
/* where you are: pop, in italic */
.menu-sheet li a[aria-current="page"]{color:var(--pop);font-style:italic}
@media (hover:hover){.menu-sheet li a:hover{color:var(--mist)}}
/* no boxes in the menu (client: "tacky"). Opening it puts focus on the sheet itself, not the first link;
   a keyboard user's place shows as the lighter green with an underline instead of an outline. */
.menu-sheet:focus,.menu-sheet :focus,.menu-sheet :focus-visible{outline:none}
.menu-sheet li a:focus-visible{color:var(--mist);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
.menu-sheet__info a:focus-visible{color:var(--paper);border-color:currentColor}
.menu-sheet ::selection{background:var(--pop);color:var(--pine-deep)}
/* while the sheet is up the bar takes the sheet's own pine (so on a short screen the links
   scroll under it, not through the logo): light logo, no frost, never slid away. The bar's
   .45s background change runs with the sheet's .4s fade. */
.site-header.is-menu-open{background:var(--pine-deep);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;transform:none}
.site-header.is-menu-open{border-bottom-color:transparent!important}   /* no rule under the bar while the sheet is up (the dark-top rule further down would otherwise win) */
.site-header.is-menu-open .brand .logo-dark{display:none}
.site-header.is-menu-open .brand .logo-light{display:block}
/* logo-white.png carries ~28% empty canvas on its right, so at the colour logo's width its mark
   draws smaller. Opened from the frosted bar (colour logo showing), the white one is drawn in
   the colour logo's box at the colour logo's height, clipped to its artwork — same size, no jump.
   (At the top of a page the white logo is already showing, so it is left as it is.) */
.site-header.is-stuck.is-menu-open .brand .logo-light{
  height:calc(var(--logo-w)*.382);object-fit:cover;object-position:left center;
}
.site-header .menu-btn:focus,.site-header .menu-btn:focus-visible{outline:none}
.site-header .menu-btn:focus-visible .menu-btn__t{text-decoration:underline;text-underline-offset:.3em}
.site-header.is-menu-open :focus-visible{outline-color:var(--pop)}
/* the page behind can't scroll; the bar keeps its place where a scrollbar disappears */
html.menu-open body{padding-right:var(--lock-gap,0px)}
html.menu-open .site-header{right:var(--lock-gap,0px)}

/* wider screens: a larger button and larger links */
@media (min-width:821px){
  .js .menu-btn{font-size:1.1rem;gap:1rem}
  .menu-btn__i{width:34px}
  .menu-sheet li a{font-size:clamp(3rem,5.2vw,4.6rem);padding:.3rem 0}
}
/* phones + tablet portrait: a smaller logo and a shorter bar */
@media (max-width:820px){
  :root{--logo-w:clamp(136px,38vw,172px)}
  .brand img{width:clamp(136px,38vw,172px)}
  /* no-JS fallback: the links on a row (or two) under the logo */
  :root{--hdr:156px}
  .site-header .bar{gap:.2rem 1rem;padding-block:.7rem .35rem}
  .bar-cta{width:100%}
  .bar-nav{flex-wrap:wrap;gap:0 1.15rem}
  .bar-nav a{font-size:.95rem;letter-spacing:.07em;padding-block:.6rem}

  /* with JS: one row — the header is the colour logo's height plus its padding */
  html.js{--hdr:calc(clamp(136px,38vw,172px)*.382 + 1.4rem + 1px)}
  /* one height in every state (the white logo is shorter than the colour one), so nothing jumps
     when the bar frosts or the sheet opens */
  .js .site-header .bar{flex-wrap:nowrap;padding-block:.7rem;min-height:calc(var(--hdr) - 1px)}
  .js .site-header.is-stuck .bar{padding-block:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .js .menu-sheet,.js .menu-sheet.is-open,.menu-sheet li a,.menu-sheet__info,.menu-btn__i::before,.menu-btn__i::after{transition:none!important}
}
/* a short, wide screen (a phone on its side): the six links in two columns and a size down, so the whole
   menu shows at once instead of scrolling under the bar */
@media (orientation:landscape) and (max-height:500px){
  .js .menu-sheet{padding-top:calc(var(--hdr) + .4rem)}
  .menu-sheet__in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);max-width:none;padding-bottom:0;column-gap:1.6rem}
  .menu-sheet__info{padding:0 0 0 1.6rem;border-top:0;border-left:1px solid var(--line-dark);font-size:.9rem;line-height:1.5}
  .menu-sheet__info .menu-sheet__h{margin-top:.6rem}
  .menu-sheet ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.6rem,4vw,3rem)}
  .menu-sheet li a{padding:.3rem 0;font-size:clamp(1.7rem,4.6vw,2.2rem)}
}

/* ---------- hero ---------- */
.hero{
  min-height:min(96svh,940px);
}
.hero--video{
  min-height:100svh;
  padding-top:calc(var(--hdr) + clamp(2rem,5.5vh,4.4rem));
  padding-bottom:clamp(1.4rem,3vh,2.4rem);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.hero .d1{max-width:16ch}

.hero-foot{
  margin-top:auto;padding-top:clamp(1.4rem,3vh,2.4rem);
  max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter);width:100%;
}
.hero-foot .row{
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-family:var(--f-serif);font-weight:var(--w-ui);font-size:.94rem;letter-spacing:.004em;color:var(--ink-faint);
}
.scroll-hint{display:inline-flex;align-items:center;gap:.6rem}
.scroll-hint .dot{width:5px;height:5px;border-radius:50%;background:var(--teal);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.32;transform:scale(.6)}}

/* page hero (inner pages) */
.page-hero{
  padding-top:calc(var(--hdr) + clamp(3rem,8vh,6rem));
  padding-bottom:clamp(2.6rem,6vw,5rem);
  position:relative;
}
.page-hero .lede{margin-top:clamp(1.4rem,2.6vw,2.1rem)}

/* ---------- masked line reveal ---------- */
/* the mask clips overflow for the slide-up reveal; pad the bottom so descenders (g, p, y) aren't cut off */
/* Source Serif italics lean past their advance width, so the mask also gets a little room on the right */
.line-mask{display:block;overflow:hidden;padding:0 .12em .16em 0;margin:0 -.12em -.16em 0}
.js .line-mask>span{
  display:block;transform:translateY(105%);opacity:0;
  transition:transform 1.05s var(--ease-out),opacity .8s var(--ease);
}
.line-mask>span{display:block}
.is-in .line-mask>span,.line-mask.is-in>span{transform:none;opacity:1}

/* display headings are set line by line by main.js; hold them until then so they don't
   flash in full and then drop out of sight. The animation is a failsafe if the script never runs. */
@media (prefers-reduced-motion:no-preference){
  .js .d1:not([data-split]),.js .d2:not([data-split]),.js .d3:not([data-split]){visibility:hidden;animation:gce-unhide 0s 2.4s forwards}
}
@keyframes gce-unhide{to{visibility:visible}}

/* generic reveals — only armed once JS is running, so no-JS never hides content */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform 1s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}

/* curtain wipe: the box stays full-size so IntersectionObserver still sees it */
.js .reveal-scale{position:relative;overflow:hidden;isolation:isolate}
.js .reveal-scale::after{
  content:'';position:absolute;inset:-1px;background:var(--paper);z-index:3;
  transform:translateY(0);transition:transform 1.15s var(--ease-out);
}
.js .reveal-scale.is-in::after{transform:translateY(-101.5%)}
.js .on-alt .reveal-scale::after{background:var(--paper-2)}
.js .reveal-scale img{transform:scale(1.08);transition:transform 1.6s var(--ease-out)}
.js .reveal-scale.is-in img{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.reveal-scale,.line-mask>span{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .reveal-scale::after{display:none}
}

.ic{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.ic svg{width:11px;height:11px}

/* ---------- team ---------- */

.team-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,1.8vw,1.7rem);margin-top:clamp(2.4rem,4.5vw,4rem);
}
@media (max-width:860px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.team-group{margin-top:clamp(3rem,5.5vw,5rem)}
.team-group .team-grid{margin-top:clamp(1.2rem,2vw,1.8rem)}
.team-group__title{font-size:clamp(1.65rem,2.5vw,2.25rem);letter-spacing:-.016em;padding-bottom:clamp(.8rem,1.2vw,1rem);border-bottom:1px solid var(--line)}
.person{margin:0;display:grid;gap:.9rem;cursor:default}
.person[data-bio]{cursor:pointer}
.person .ph{border-radius:var(--r);overflow:hidden;background:var(--bone);aspect-ratio:4/5}
.person .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(0);transition:transform 1.2s var(--ease-out),filter .6s var(--ease)}
.person[data-bio]:hover .ph img{transform:scale(1.055)}
.person:hover .ph img{filter:saturate(1)}
.person .nm{margin:0;font-weight:var(--w-name);font-size:1.08rem;letter-spacing:-.004em;line-height:1.3}
.person .tl{margin:.2rem 0 0;font-family:var(--f-serif);font-weight:400;font-size:.94rem;letter-spacing:0;color:var(--ink-soft);line-height:1.45}
/* the smallest phones (2-up columns ~132px): "Strategic Advisor &" is kept together and would
   otherwise run 3px past its column */
@media (max-width:360px){.person .tl{font-size:.88rem}}
.person .more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;
  font-family:var(--f-serif);font-weight:var(--w-ui);font-size:.94rem;letter-spacing:.004em;color:var(--teal);
  opacity:0;transform:translateY(-4px);transition:opacity .45s var(--ease),transform .45s var(--ease-out);
}
.person .more svg{width:11px;height:11px}
.person[data-bio]:hover .more{opacity:1;transform:none}

.bio-dialog{
  border:0;padding:0;background:transparent;max-width:min(720px,92vw);width:100%;
  margin:auto;color:var(--ink);
}
.bio-dialog::backdrop{background:rgba(13,47,45,.55);backdrop-filter:blur(7px)}
.bio-dialog .inner{
  background:var(--paper);border-radius:var(--r-lg);padding:clamp(1.9rem,4vw,3.2rem);position:relative;
  max-height:86vh;overflow:auto;
}
.bio-dialog .close{
  position:absolute;top:1.1rem;right:1.1rem;width:38px;height:38px;border-radius:0;
  border:1px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer;
  transition:background .35s,color .35s
}
.bio-dialog .close:hover{background:var(--ink);color:var(--paper)}
.bio-dialog .tl{margin:0;font-family:var(--f-serif);font-weight:var(--w-ui);font-size:1rem;letter-spacing:.004em;color:var(--teal)}
.bio-dialog h3{font-family:var(--f-serif);font-optical-sizing:auto;font-weight:460;font-size:clamp(2rem,3.3vw,2.7rem);letter-spacing:-.02em;line-height:1.05;margin:.6rem 0 1.3rem;text-wrap:balance}
.bio-dialog .bio{color:var(--ink-soft);line-height:1.68;display:grid;gap:1rem}
.bio-dialog .bio p{margin:0}

/* ---------- investors ---------- */

.inv-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(178px,100%),1fr));
  gap:clamp(.9rem,1.5vw,1.5rem);
}
.inv-card{display:grid;gap:.65rem;align-content:start}
.inv-card .ph{border-radius:var(--r-sm);overflow:hidden;background:var(--bone);aspect-ratio:11/13}
/* one tone for the whole set: the grey portraits are multiplied onto bone, so pure-white studio
   backdrops turn warm paper and dark ones stay deep; hover still brings the colour back */
.inv-card .ph img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.04);transition:transform 1.1s var(--ease-out),filter .6s var(--ease)}
.inv-card:hover .ph img{transform:scale(1.05);filter:grayscale(0) contrast(1)}
.inv-card .nm{margin:0;font-weight:var(--w-name);font-size:1.03rem;line-height:1.3;letter-spacing:-.004em}
.inv-card .tl{margin:.2rem 0 0;font-size:.9rem;color:var(--ink-soft);line-height:1.42}

/* ---------- video facade ---------- */
.video-facade{
  display:block;width:100%;position:relative;border:0;padding:0;cursor:pointer;
  border-radius:var(--r-lg);overflow:hidden;background:var(--pine-deep);
}
.video-facade img{width:100%;height:auto;transition:transform 1.4s var(--ease-out),opacity .6s;opacity:.94}
.video-facade:hover img{transform:scale(1.035);opacity:1}
.video-facade .play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.video-facade .ring{
  width:clamp(62px,7vw,88px);height:clamp(62px,7vw,88px);border-radius:50%;
  background:rgba(247,245,240,.92);color:var(--pine);display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(247,245,240,.22);
  transition:transform .55s var(--ease-out),background .4s,box-shadow .7s var(--ease-out);
}
/* the play glyph (viewBox 24, triangle x 6–19, a hair right of centre for balance) is drawn centred;
   no extra margin — it pushed the triangle visibly off-centre (client, 2026-09-24) */
.video-facade .ring svg{width:26%;height:26%}
.video-facade:hover .ring,.video-facade:focus-visible .ring{transform:scale(1.06);background:var(--paper);box-shadow:0 0 0 14px rgba(247,245,240,.16)}
/* its wrapper clips (reveal curtain), so the focus ring is drawn inside the frame, paper over the still */
.video-facade:focus-visible{outline:2px solid var(--paper);outline-offset:-8px}
.video-facade .vtitle{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(1rem,2vw,1.7rem);
  text-align:left;color:var(--paper);font-family:var(--f-serif);font-weight:var(--w-ui);font-size:1rem;
  letter-spacing:0;
  background:linear-gradient(transparent,rgba(13,47,45,.72));
}
.video-facade iframe,.video-frame{width:100%;aspect-ratio:16/9;border:0;display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--pine-deep)}

/* ---------- values ---------- */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:clamp(1rem,1.8vw,1.6rem)}
.value{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.9rem,3.4vw,3rem);
  display:grid;gap:1.3rem;align-content:center;min-height:clamp(180px,22vw,250px);background:var(--card);
  transition:background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease);
}
/* hover fills only where there is hover — a tap on a phone would leave the card stuck green */
@media (hover:hover){.value:hover{background:var(--pine);color:var(--paper);border-color:var(--pine)}}
.value .idx{font-family:var(--f-serif);font-weight:var(--w-btn);font-size:1.15rem;line-height:1;letter-spacing:.02em;color:var(--teal);font-variant-numeric:tabular-nums;transition:color .55s}
@media (hover:hover){.value:hover .idx{color:var(--sage)}}
.value h3{font-family:var(--f-serif);font-optical-sizing:auto;font-weight:460;font-size:clamp(1.85rem,2.75vw,2.5rem);letter-spacing:-.02em;line-height:1.05}

/* ---------- referrals ---------- */

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));gap:clamp(1rem,1.8vw,1.6rem)}
.step{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.7rem,2.8vw,2.5rem);display:grid;gap:.8rem;align-content:start;background:var(--card)}
.step .n{
  font-family:var(--f-serif);font-optical-sizing:auto;font-weight:420;font-size:2.8rem;line-height:1;color:var(--teal);
  font-variant-numeric:tabular-nums;margin-bottom:.4rem
}
.step h3{font-family:var(--f-serif);font-optical-sizing:auto;font-weight:460;font-size:clamp(1.4rem,1.9vw,1.7rem);line-height:1.15;letter-spacing:-.014em;text-wrap:balance}
.step p{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.6}

/* ---------- contact ---------- */
.big-mail{
  font-family:var(--f-serif);font-optical-sizing:auto;font-weight:420;font-size:clamp(1.5rem,4.2vw,3rem);letter-spacing:-.01em;
  line-height:1.1;justify-self:start;position:relative;padding-bottom:.35rem;color:var(--teal);
  word-break:break-word;
}
/* a quiet hairline at rest says "link" (touch never sees the hover); hover draws the full line over it */
.big-mail{background:linear-gradient(color-mix(in srgb,currentColor 38%,transparent),color-mix(in srgb,currentColor 38%,transparent)) left bottom/100% 1px no-repeat}
.big-mail::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .65s var(--ease-out)}
.big-mail:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- newsletter ---------- */
.newsletter{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.6rem,3.4vw,3.4rem);align-items:center;
  padding:clamp(1.9rem,4vw,3.4rem);border-radius:var(--r-lg);
  background:var(--bone);border:1px solid rgba(20,24,26,.07);
}
.newsletter h3{font-family:var(--f-serif);font-optical-sizing:auto;font-weight:460;font-size:clamp(1.75rem,2.8vw,2.5rem);letter-spacing:-.02em;line-height:1.08;margin-bottom:.8rem;text-wrap:balance}
/* the one-line pitch ("10,000+ subscribers get our favorite reads and updates.") stays on one line
   wherever it fits (client request 2026-09-23); it only wraps on narrow phones */
.newsletter p{margin:0;color:var(--ink-soft);font-size:1.05rem;line-height:1.6;max-width:none;text-wrap:pretty}
@media (min-width:600px){.newsletter p{white-space:nowrap;font-size:clamp(.95rem,1.25vw,1.05rem)}}
.nl-form{display:flex;gap:.6rem;flex-wrap:wrap;position:relative}
.nl-form input[type=email]{
  flex:1 1 220px;min-width:0;padding:.92rem 1.25rem;border-radius:0;
  border:1px solid rgba(20,24,26,.16);background:var(--paper);color:var(--ink);font:inherit;font-size:1rem;
  transition:border-color .4s,box-shadow .4s
}
.nl-form input[type=email]:focus{outline:none;border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
@media (max-width:860px){.newsletter{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden}
.cta-band .vine,.nf .vine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.42}
.cta-band .vine path,.nf .vine path{fill:none;stroke:var(--sage);stroke-width:1;opacity:.34;stroke-linecap:round}
.cta-band .inner{position:relative;display:grid;gap:clamp(1.2rem,2.2vw,1.8rem);justify-items:center;text-align:center;max-width:900px;margin-inline:auto}
.cta-band .lede{text-align:center;max-width:60ch}
.cta-band .actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.7rem}

/* ---------- footer ---------- */
/* ---------- footer: engraved garden ---------- */
/* Plate: James McNeill Whistler, "Greenwich Park", 1859, etching. Met Museum Open Access
   (public domain), recoloured to --pine on --paper. The FULL plate is used, sky included:
   its upper ~58% is faded to a whisper so the brand, nav and disclaimer sit on open sky,
   and the trees rise from the footer's bottom edge with no cut line anywhere. Two things
   move — the whole plate sways from its base, and the foreground grass (its own transparent
   sheet, cut from the same plate) sways faster on a different phase — which is what makes
   it read as a breeze rather than a wobble. A speckle tile runs over plate and paper alike
   so they are one sheet. Plate and grass are both width:100%/height:auto and bottom-anchored
   so they always scale identically and the grass stays registered to the plate. */
.site-footer{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--paper);color:var(--ink);
  border-top:1px solid var(--line);
  min-height:max(560px,62.5vw);
  padding:0 0 34vw;
}
.site-footer::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('../img/footer-grain.png');background-repeat:repeat;opacity:.9;
}
.site-footer > *{position:relative;z-index:1}
.site-footer .f-scene{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.site-footer .f-plate,.site-footer .f-grass{
  position:absolute;left:0;bottom:0;width:100%;height:auto;display:block;
  transform-origin:center bottom;will-change:transform;
}
/* the plate's washed-out sky is a shade greyer than the paper; fade its top edge out so there is no seam */
.site-footer .f-plate{
  animation:gc-wind 13s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 12%,#000 26%);
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 12%,#000 26%);
}
.site-footer .f-grass{animation:gc-breeze 5.5s ease-in-out -2s infinite alternate}
@keyframes gc-wind{from{transform:scale(1.035) skewX(-0.34deg)}to{transform:scale(1.035) skewX(0.34deg)}}
@keyframes gc-breeze{from{transform:skewX(-1.1deg) scaleX(1.012)}to{transform:skewX(1.1deg) scaleX(1.012)}}
@media (prefers-reduced-motion:reduce){.site-footer .f-plate,.site-footer .f-grass{animation:none;transform:none}}
.site-footer .top{
  display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:clamp(1.8rem,3vw,3rem);
  padding-top:clamp(3.4rem,6vw,6rem);padding-bottom:clamp(2.6rem,4.5vw,4rem);
  border-bottom:1px solid var(--line);
}
.site-footer .fbrand img{width:clamp(150px,14vw,186px)}
.site-footer .tag{margin:1.1rem 0 0;font-family:var(--f-serif);font-optical-sizing:auto;font-weight:420;font-style:italic;font-size:1.35rem;line-height:1.3;letter-spacing:-.005em;color:var(--teal)}
.site-footer h4{margin:0 0 1.1rem;font-family:var(--f-serif);font-weight:var(--w-name);font-size:1.02rem;letter-spacing:.004em;color:var(--ink)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.78rem}
/* the item sets the line pitch (not the body's 1.6), so a wrapped headline reads as one link */
.site-footer li{line-height:1.38;text-wrap:pretty}
.site-footer li a{font-size:.97rem;line-height:inherit;color:var(--ink-soft);transition:color .35s}
/* the contact address carries an inline paper-white colour from the old dark footer; the footer is paper now */
.site-footer .col li>span[style]{display:inline-block;color:var(--ink-soft)!important;font-size:.97rem!important;line-height:1.45}
.site-footer li a:hover{color:var(--ink)}
.site-footer li a:focus-visible{color:var(--ink)}
/* touch screens: each footer link's tap area grows to fill the list's gaps. Vertical padding on an inline
   link never moves the lines; it only widens where a tap lands. */
@media (pointer:coarse){.site-footer li a{padding-block:.38rem}}
.site-footer .legal{padding-top:1.8rem;display:grid;gap:1.1rem}
.site-footer .legal .row{display:flex;justify-content:space-between;gap:.4rem 1.5rem;flex-wrap:wrap;font-family:var(--f-serif);font-weight:400;font-size:.92rem;letter-spacing:0;color:var(--ink-soft)}
/* legal disclaimer: one text on every page, folded away under a "Disclaimer" toggle (client request 2026-10-08,
   after frontiergrowth.com). A native <details>, so it opens without JS and with the keyboard; the chevron turns. */
.site-footer .disclaimer{margin:0;border-top:1px solid var(--line-soft)}
.site-footer .disclaimer>summary{
  display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 0 .2rem;
  list-style:none;cursor:pointer;font-family:var(--f-serif);font-size:.92rem;color:var(--ink-soft);transition:color .3s;
}
.site-footer .disclaimer>summary::-webkit-details-marker{display:none}
.site-footer .disclaimer>summary:hover,.site-footer .disclaimer>summary:focus-visible{color:var(--ink)}
.site-footer .disclaimer>summary svg{width:.8rem;height:.8rem;flex:none;transition:transform .35s var(--ease)}
.site-footer .disclaimer[open]>summary svg{transform:rotate(180deg)}
.site-footer .disclaimer__body{display:grid;gap:.8rem;max-width:1100px;margin:1rem auto 0}
.site-footer .disclaimer__body p{margin:0;font-size:.8rem;line-height:1.62;color:var(--ink-soft);max-width:none;text-align:center;text-wrap:pretty}
/* screen-reader-only text (e.g. the founder letter's heading) */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Narrower screens: content would otherwise run down into the trunks, so reserve the
   dense lower part of the plate and let the copy sit only on the faint sky above it. */
/* tablet: brand on its own row (tagline under the logo, as on desktop and phone), the four link
   columns side by side. The columns are weighted: Explore/Engage are short, Contact must hold the
   unbreakable email (~182px) on one line, and News gets the most room so its headlines stay at
   two lines. The tracks keep their auto minimum, so a column can never be narrower than its
   longest word — nothing runs into its neighbour. */
@media (max-width:1100px){
  .site-footer .top{grid-template-columns:.84fr .84fr 1fr 1.32fr;row-gap:clamp(2rem,4vw,2.6rem)}
  .site-footer .fbrand{grid-column:1/-1}
  .site-footer .fbrand .tag{margin-top:1rem}
}
/* below ~920px four columns can't hold the email and the headlines: two columns (Explore | Engage, Contact | News) */
@media (max-width:920px){.site-footer .top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.site-footer{padding-bottom:40vw;min-height:0}}
/* phone: Explore and Engage are short, so they pair up; Contact and News run full width */
@media (max-width:520px){
  .site-footer .top{column-gap:1.25rem;row-gap:2.1rem;padding-top:3rem}
  .site-footer .top>.col:nth-child(4),.site-footer .top>.f-news{grid-column:1/-1}
  .site-footer .legal .row{flex-direction:column;gap:.35rem}
}

/* ---------- 404 ---------- */
/* the whole viewport is one dark band: a drawn seedling behind, the message centred, the sections underneath */
.nf{
  min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate;
  padding:calc(var(--hdr) + clamp(2.5rem,7vh,5rem)) var(--gutter) clamp(3rem,8vh,5rem);
  background:radial-gradient(120% 80% at 50% 110%,rgba(40,121,114,.28),transparent 60%),var(--pine-deep);color:var(--paper);
}
.nf .vine{z-index:-1}
.nf .inner{display:grid;gap:clamp(1.2rem,2.2vw,1.6rem);justify-items:center;text-align:center;max-width:720px;position:relative}
.nf .nf__code{margin:0;color:var(--sage);font-size:1rem;letter-spacing:0}
.nf h1{font-size:clamp(2.5rem,5.4vw,4.9rem);line-height:1.04;letter-spacing:-.026em}
.nf .lede{text-align:center;max-width:46ch;color:rgba(247,245,240,.74)}
.nf__actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem}
/* each link is a 44px-tall target (the phone menu's size); the padding does the row spacing */
.nf__links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(1.1rem,2.4vw,2rem);
  margin-top:clamp(1.6rem,4vh,2.8rem);padding-top:clamp(.65rem,2vh,1.05rem);border-top:1px solid var(--line-dark);
  font-weight:var(--w-ui);font-size:1.02rem;
}
.nf__links a{display:inline-flex;align-items:center;min-height:44px;padding-block:.55rem;color:rgba(247,245,240,.72);transition:color .3s var(--ease)}
.nf__links a:hover{color:var(--paper)}

/* ---------- page transition veil ---------- */
.veil{
  position:fixed;inset:0;z-index:9990;background:var(--pine-deep);pointer-events:none;
  transform:translateY(100%);
}
.veil.is-out{transform:translateY(0);transition:transform .62s var(--ease-out)}
.veil.is-in{transform:translateY(-100%);transition:transform .78s var(--ease-out)}

/* ---------- video hero (home) ---------- */
.hero--video{color:var(--paper)}
.hero--video .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--pine-deep)}
.hero--video .hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;z-index:0}
.hero--video .hero-bg iframe{position:absolute;top:50%;left:50%;width:max(100vw,178svh);height:max(100svh,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
.hero--video .hero-bg.is-live iframe{opacity:1}
.hero--video .hero-bg::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(13,47,45,.42) 0%,rgba(13,47,45,.16) 48%,rgba(13,47,45,.55) 100%)}
.hero--video>.container--wide,.hero--video .hero-foot{position:relative;z-index:1}

.hero--video .hero-foot .row{color:rgba(247,245,240,.68)}

/* light header while at the top of a dark-hero page */
body.dark-top .site-header:not(.is-stuck) .logo-dark{display:none}
body.dark-top .site-header:not(.is-stuck) .logo-light{display:block}

body.dark-top .site-header:not(.is-stuck) .btn--ghost{--fg:var(--paper);--bd:rgba(247,245,240,.32)}
body.dark-top .site-header:not(.is-stuck){border-bottom-color:rgba(247,245,240,.3)}
body.dark-top .site-header:not(.is-stuck) .bar-nav a{color:var(--paper)}
body.dark-top .site-header:not(.is-stuck) .bar-nav a[aria-current="page"]{color:var(--mist)}

/* ---------- hero slogan (The People Equity Firm) ---------- */
.hero--video .d1{max-width:14ch;text-shadow:0 2px 28px rgba(13,47,45,.45)}

/* ---------- slogan as hero headline ---------- */
/* hero title: Source Serif 4 at its display optical size, upright, centred.
   No text-shadow here: .line-mask clips overflow, so a blurred shadow renders as a dark box behind each line (visible in Safari). */
.d1--slogan{font-family:var(--f-serif);font-optical-sizing:auto;font-style:normal;font-weight:500;font-size:clamp(3.3rem,8.4vw,8.6rem);line-height:1.02;letter-spacing:-.03em;max-width:none;color:var(--paper);text-align:center;margin-inline:auto;text-shadow:none}
/* an indent the width of the mark (.15em glyph + .3em gap, at .15em ≈ .16em of the line) balances it,
   so "Equity Firm" itself sits on the centre line */
.d1 .tm{font-family:var(--f-serif);font-weight:400;font-size:.3em;vertical-align:super;letter-spacing:0;opacity:.92}
.d1--slogan .line-mask:last-child>span{text-indent:.16em}
.hero--video .d1--slogan{max-width:none}
/* the slogan's mark: small and light, hung at cap height. (.d1.d1--slogan outranks .d1 .tm above —
   it used to lose to it on source order and render twice this size.) */
.d1.d1--slogan .tm{font-family:var(--f-serif);font-optical-sizing:auto;font-weight:400;font-size:.15em;vertical-align:2.7em;line-height:0;letter-spacing:0;margin-left:.3em;opacity:.85}

/* self-hosted hero reel */
.hero--video .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease);z-index:0}
.hero--video .hero-bg.is-live video{opacity:1}

/* header nav wrapper */
.bar-cta{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.5rem)}

/* photo hero (Ridgemont-style full-bleed page top) — currently on About */
.photo-hero{
  position:relative;min-height:min(72svh,820px);
  display:flex;align-items:flex-end;
  background:var(--pine-deep);color:var(--paper);overflow:hidden;
}
.photo-hero .ph-bg{position:absolute;inset:0}
.photo-hero .ph-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.photo-hero::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(13,47,45,.5) 0%,rgba(13,47,45,.18) 46%,rgba(13,47,45,.78) 100%);
}
.photo-hero .inner{
  position:relative;z-index:1;width:100%;
  padding-top:calc(var(--hdr) + clamp(2.4rem,6vh,4rem));
  padding-bottom:clamp(2.4rem,5.5vh,4rem);
  display:grid;gap:clamp(1rem,2.2vh,1.6rem);justify-items:start;
}
.photo-hero h1{max-width:34ch;text-shadow:0 2px 26px rgba(13,47,45,.4)}
.photo-hero h1 em{color:var(--mist)}

/* ---------- 8/4 PM-3: map-spot — floating HQ card + pulse on the logo pin ---------- */
.map-spot{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bone)}
.map-spot>img{width:100%;height:auto;display:block}
.map-pulse{position:absolute;left:50%;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);pointer-events:none}
.map-pulse::before,.map-pulse::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--teal);opacity:0;
  animation:map-ring 3.2s var(--ease) infinite;
}
.map-pulse::after{animation-delay:1.6s}
@keyframes map-ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(8);opacity:0}}
.map-card{
  position:absolute;left:clamp(.9rem,2.4vw,2.2rem);bottom:clamp(.9rem,2.4vw,2.2rem);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.05rem,2vw,1.6rem) clamp(1.15rem,2.2vw,1.9rem);
  display:grid;gap:.55rem;justify-items:start;
  box-shadow:0 28px 60px -30px rgba(20,24,26,.38);
  max-width:min(340px,72%);
}
.map-card .mc-label{
  font-family:var(--f-serif);font-weight:var(--w-ui);
  font-size:.98rem;letter-spacing:.004em;color:var(--teal);
}
.map-card .mc-addr{margin:0;font-weight:420;font-size:1.08rem;line-height:1.5;letter-spacing:0}
.map-card .link-arrow{margin-top:.2rem}
@media (max-width:700px){
  .map-spot>img{aspect-ratio:5/4;object-fit:cover}
  .map-card{max-width:calc(100% - 1.8rem)}
}

/* ---------- 8/4 PM-4: About founding-story heading beside the video ---------- */
.story-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:clamp(1.8rem,4.5vw,4.5rem);align-items:center}
.story-side{display:grid;gap:clamp(.9rem,1.8vw,1.4rem);justify-items:start}
.story-grid .video-facade .vtitle{display:none}
@media (max-width:860px){.story-grid{grid-template-columns:1fr;gap:1.4rem}}

/* ---------- 9/17: homepage founder film — plays by itself, click for sound ---------- */
.film-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:clamp(1.6rem,3vw,2.8rem);align-items:center}
.film-side{display:grid;gap:clamp(.9rem,1.8vw,1.4rem);justify-items:start}
.film-side .d2{font-size:clamp(1.9rem,2.85vw,3.15rem)}
.film{position:relative;margin:0;overflow:hidden;background:var(--pine-deep)}
.film__v{display:block;width:100%;height:auto;aspect-ratio:1280/546;max-height:min(78svh,720px);object-fit:cover;background:var(--pine-deep)}
.film__sound{
  position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:clamp(.65rem,1.1vw,1rem);
  margin:0;padding:clamp(1rem,2vw,1.7rem);border:0;background:none;color:var(--paper);font:inherit;
  cursor:pointer;text-align:left;transition:opacity .5s var(--ease-out);
}
.film__sound::before{
  content:'';position:absolute;inset:auto 0 0 0;height:220%;z-index:-1;
  background:linear-gradient(transparent,rgba(13,47,45,.84));pointer-events:none;
}
.film__sound .ring{
  width:clamp(44px,3.6vw,56px);height:clamp(44px,3.6vw,56px);border-radius:50%;flex:none;
  background:rgba(247,245,240,.92);color:var(--pine);display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(247,245,240,.22);
  transition:transform .5s var(--ease-out),background .4s,box-shadow .7s var(--ease-out);
}
.film__sound .ring svg{width:26%;height:26%}
.film:hover .film__sound .ring,.film__sound:focus-visible .ring{transform:scale(1.06);background:var(--paper);box-shadow:0 0 0 10px rgba(247,245,240,.16)}
/* the preview is mostly a bright brick wall from 9s: a soft pine halo keeps the serif's thin strokes whole on it */
.film__label{font-family:var(--f-serif);font-weight:var(--w-ui);font-size:clamp(.98rem,1.05vw,1.08rem);letter-spacing:.004em;text-shadow:0 1px 14px rgba(13,47,45,.6)}
.film.is-sound .film__sound{opacity:0;pointer-events:none}
@media (max-width:860px){.film-grid{grid-template-columns:1fr;gap:1.4rem;align-items:start}}

/* ---------- 8/4 PM-6: CTA bands carry the email instead of page buttons ---------- */
.cta-band .cta-mail{color:var(--mist);font-size:clamp(1.25rem,2.4vw,2rem)}

/* ---------- 8/5 PM: GIVING — full-bleed editorial rhythm (Patagonia-inspired) ---------- */
/* hero: photo-hero, but centred and taller — the page opens on an image, not type */
.gv-hero{min-height:100svh;align-items:center;position:sticky;top:0;z-index:0}
.gv-hero::after{background:linear-gradient(180deg,rgba(13,47,45,.52) 0%,rgba(13,47,45,.26) 42%,rgba(13,47,45,.66) 100%)}
.gv-hero .inner{justify-items:center;text-align:center;padding-bottom:clamp(4.5rem,11vh,7.5rem);gap:clamp(1.1rem,2.6vh,1.9rem)}
.gv-hero h1{max-width:none;text-align:center;text-wrap:balance}

/* scroll cue — bobs, then stills for reduced-motion */
.gv-cue{
  position:absolute;left:50%;bottom:clamp(1.6rem,4vh,2.8rem);z-index:2;
  transform:translateX(-50%);color:var(--paper);opacity:.85;pointer-events:none;
}
.gv-cue svg{display:block;width:26px;height:26px;animation:gv-bob 2.6s var(--ease) infinite}
@keyframes gv-bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}

/* full-bleed photo band — quote, or a titled block */
.gv-band{
  position:relative;min-height:min(84svh,880px);
  display:grid;place-items:center;overflow:hidden;
  background:var(--pine-deep);color:var(--paper);
}
.gv-band-bg{position:absolute;inset:0}
.gv-band-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.gv-band::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(13,47,45,.5) 0%,rgba(13,47,45,.34) 50%,rgba(13,47,45,.62) 100%);
}
.gv-band .inner{
  position:relative;z-index:1;width:100%;max-width:var(--mid);
  margin-inline:auto;padding:clamp(3rem,8vh,5rem) var(--gutter);
  display:grid;gap:clamp(.9rem,2.2vh,1.5rem);justify-items:center;text-align:center;
}

.gv-band--city .d2{max-width:24ch;text-wrap:balance;text-shadow:0 2px 30px rgba(13,47,45,.42)}
.gv-band--city .d2 em{color:var(--mist)}
.gv-band--city .lede{color:rgba(247,245,240,.86);max-width:52ch;margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  .gv-cue svg{animation:none}
}

/* ---------- 8/5 PM-10: home hero pins, page scrolls up over it (Patagonia move) ---------- */
.hero--video{position:sticky;top:0;z-index:0}
.hero-reveal{position:relative;z-index:1;background:var(--paper)}

/* ---------- 8/5 PM-12: giving hero locked to 3 lines ---------- */
/* the count-up (0→10) changed the number's width and reflowed the headline
   between 3 and 4 lines mid-animation — reserve a fixed, centred box for it. */
.gv-pct{
  display:inline-block;min-width:3.15ch;text-align:center;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
}
/* each masked span is its own line and must not wrap on desktop */
@media (min-width:700px){.gv-hero h1 .line-mask>span{white-space:nowrap}}

/* ---------- 8/5 PM-14: number+title step cards take the .value ("Relentless Passion") hover ---------- */
.steps--plain .step{
  align-content:center;min-height:clamp(170px,20vw,230px);
  transition:background .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease);
}
.steps--plain .step .n{transition:color .55s var(--ease)}
@media (hover:hover){
  .steps--plain .step:hover{background:var(--pine);color:var(--paper);border-color:var(--pine)}
  .steps--plain .step:hover .n{color:var(--sage)}
}

/* ---------- logo tiles (Pamlico-style): logo up front, details on hover ---------- */
.logo-tiles{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.6rem)}
/* the tile's one column is pinned to the tile (minmax) and the tile is a size container, so its
   hidden hover text can never widen it past its grid column */
.logo-tile{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-column:span 2;min-height:clamp(240px,16vw,310px);color:var(--ink);container-type:inline-size}
/* every tile is the same size; an incomplete last row (1-3 tiles) is centred */
.logo-tile:nth-child(4n+1):nth-last-child(3){grid-column:2/span 2}
.logo-tile:nth-child(4n+1):nth-last-child(2){grid-column:3/span 2}
.logo-tile:nth-child(4n+1):nth-last-child(1){grid-column:4/span 2}
.logo-tile>*{grid-area:1/1}
.logo-tile__logo{display:grid;place-items:center;background:#EBE7DF;transition:opacity .45s var(--ease)}
.on-alt .logo-tile__logo{background:var(--card)}
.logo-tile__logo img{width:auto;height:auto;max-width:min(66%,260px);max-height:42%;object-fit:contain}
.logo-tile__text{
  display:flex;flex-direction:column;gap:.7rem;
  padding:clamp(1.2rem,1.9vw,1.9rem);background:var(--card);border:1px solid var(--line);
  opacity:0;transition:opacity .45s var(--ease);
}
.logo-tile__name{font-weight:var(--w-name);font-size:1.04rem;line-height:1.3;color:var(--teal)}
.logo-tile__title{font-weight:var(--w-name);font-size:clamp(1.1rem,1.3vw,1.24rem);line-height:1.25;letter-spacing:-.005em}
.logo-tile__desc{font-family:var(--f-serif);font-optical-sizing:auto;font-weight:420;font-size:clamp(1.1rem,1.3vw,1.3rem);line-height:1.38;letter-spacing:-.006em}
.logo-tile__desc--sm{font-family:var(--f-serif);font-weight:400;font-size:1rem;line-height:1.5;letter-spacing:0;color:var(--ink-soft)}
.logo-tile__foot{margin-top:auto;padding-top:.3rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem .8rem;font-size:.94rem;color:var(--ink-soft)}
.logo-tile__go{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;color:var(--ink);white-space:nowrap}
/* a four-up tile is too narrow for place + "Visit site" on one line: the round arrow stands alone */
@container (max-width:349px){.logo-tile__go{font-size:0;gap:0}}
.logo-tile__go .ic{width:1.9rem;height:1.9rem;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.logo-tile__go svg{width:13px;height:13px}
.logo-tile:hover .logo-tile__go .ic{background:var(--pine);border-color:var(--pine);color:var(--paper)}
.logo-tile:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
@media (hover:hover){
  .logo-tile:hover .logo-tile__text,.logo-tile:focus-visible .logo-tile__text{opacity:1}
  .logo-tile:hover .logo-tile__logo,.logo-tile:focus-visible .logo-tile__logo{opacity:0}
}
/* touch screens can't hover, so the details sit under each logo */
@media (hover:none){
  /* the logo box keeps its 16/10 and the text row takes the spare height, so logo boxes in a row line up */
  .logo-tile{min-height:0;grid-template-rows:auto 1fr}
  .logo-tile>*{grid-area:auto}
  .logo-tile__logo{aspect-ratio:16/10}
  .logo-tile__text{opacity:1;background:transparent;border:0;padding:1rem 0 0}
}
@media (max-width:1100px){.logo-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-tiles>.logo-tile{grid-column:auto!important}}
@media (max-width:560px){.logo-tiles{grid-template-columns:1fr}}

/* ---------- giving: fund explorer (12 ways, grouped; featured panel follows hover/focus) ---------- */
.gv-fund__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5.5rem);align-items:start}
.gv-fund__side{display:grid;gap:clamp(1.4rem,2.4vw,2rem);position:sticky;top:calc(var(--hdr) + 1.5rem)}
.gv-fund__side .section-head{margin-bottom:0}
.gv-fund__panel{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(330px,31vw,420px);padding:clamp(1.6rem,3vw,2.8rem);background:var(--pine);color:var(--paper)}
.gv-fund__bg{position:absolute;right:-.03em;bottom:-.2em;font-family:var(--f-serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(9rem,17vw,15rem);line-height:1;letter-spacing:-.04em;color:rgba(247,245,240,.06);pointer-events:none}
.gv-fund__panel-top{position:relative;display:flex;justify-content:space-between;gap:1rem;font-size:1rem;font-weight:var(--w-ui);color:var(--sage);font-variant-numeric:tabular-nums}
.gv-fund__panel-top b{font-weight:var(--w-name);color:var(--paper)}
.gv-fund__panel-body{position:relative;margin-top:auto;display:grid;gap:.9rem;transition:opacity .3s var(--ease),transform .5s var(--ease-out)}
.gv-fund__panel-body.is-swapping{opacity:0;transform:translateY(8px)}
.gv-fund__panel h3{font-family:var(--f-serif);font-optical-sizing:auto;font-weight:460;font-size:clamp(1.7rem,2.5vw,2.3rem);line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
.gv-fund__panel p{margin:0;max-width:40ch;font-size:clamp(1.05rem,1.2vw,1.15rem);line-height:1.55;color:rgba(247,245,240,.8)}

.gv-fund__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.8rem,3vw,2.8rem) clamp(1.2rem,2.4vw,2.2rem)}
.gv-fund__glabel{margin:0;padding-bottom:.65rem;border-bottom:2px solid var(--ink);font-weight:var(--w-name);font-size:1.04rem;color:var(--ink)}
.gv-fund__group ul{list-style:none;margin:0;padding:0}
.gv-fund__item{
  position:relative;width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.85rem;
  padding:1.05rem .7rem 1.05rem 0;background:transparent;border:0;border-bottom:1px solid var(--line);
  text-align:left;color:var(--ink);cursor:pointer;
  transition:padding .45s var(--ease-out),background .35s var(--ease),box-shadow .35s var(--ease);
}
.gv-fund__item .t{font-weight:var(--w-btn);font-size:1.08rem;line-height:1.35}
.gv-fund__item .d{display:none}
.gv-fund__item::after{content:'→';color:var(--teal);opacity:0;transform:translateX(-6px);transition:opacity .35s var(--ease),transform .45s var(--ease-out)}
.gv-fund__item:hover,.gv-fund__item.is-active{padding-left:.85rem;background:var(--card)}
.gv-fund__item.is-active{box-shadow:inset 3px 0 0 var(--teal)}
.gv-fund__item:hover::after,.gv-fund__item.is-active::after{opacity:1;transform:none}
.gv-fund__item:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (max-width:980px){
  .gv-fund__grid{grid-template-columns:1fr}
  .gv-fund__side{position:static}
  .gv-fund__panel{display:none}
  .gv-fund__item{grid-template-columns:1fr;align-items:start;gap:.4rem;cursor:default}
  .gv-fund__item::after{display:none}
  .gv-fund__item .d{display:block;grid-column:1;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
  .gv-fund__item:hover,.gv-fund__item.is-active{padding-left:0;background:transparent;box-shadow:none}
}
@media (max-width:620px){.gv-fund__list{grid-template-columns:1fr}}

/* ---------- home: owner testimonials ---------- */
.tq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.8rem)}
.tq-card{margin:0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);background:var(--card);color:var(--ink);border:1px solid var(--line-soft)}
.tq-card img{width:100%;height:100%;min-height:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;background:var(--bone)}
.tq-body{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:clamp(1.4rem,2.6vw,2.6rem)}
.tq-body blockquote{margin:0;font-family:var(--f-serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(1.12rem,1.35vw,1.3rem);line-height:1.5;letter-spacing:-.004em;color:var(--ink);hanging-punctuation:first}
.tq-mark{width:clamp(24px,2.2vw,30px);height:auto;color:var(--teal);flex:none}
.tq-mark--end{align-self:flex-end;transform:rotate(180deg);margin-top:-.4rem}
.tq-body figcaption{display:grid;gap:.15rem;margin-top:.2rem}
.tq-body .who{font-weight:var(--w-name);font-size:1.05rem}
.tq-body .role{font-size:.97rem;color:var(--ink-soft)}
@media (max-width:1060px){.tq-grid{grid-template-columns:1fr;max-width:760px;margin-inline:auto}}
@media (max-width:560px){.tq-card{grid-template-columns:1fr}.tq-card img{aspect-ratio:4/3;object-position:center 25%}}

/* ---------- giving hero: Charlotte skyline reel (same muted-loop setup as home + companies) ---------- */
.gv-hero .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.gv-hero .hero-bg.is-live video{opacity:1}

/* ---------- investors hero: 2026 summit reel (unused shots), headline bottom-left ---------- */
.ix-hero{justify-content:flex-end;padding-bottom:clamp(2.6rem,7vh,5.5rem)}
/* flex column + margin-inline:auto would shrink-wrap and centre the container; keep it full width so text sits bottom-left */
.ix-hero>.container--wide,.cx-vhero>.container--wide,.tm-hero>.container--wide{width:100%}
.ix-hero .hero-bg::after{background:linear-gradient(180deg,rgba(13,47,45,.62) 0%,rgba(13,47,45,.42) 45%,rgba(13,47,45,.86) 100%)}
.ix-hero .d1{max-width:none;text-shadow:0 2px 28px rgba(13,47,45,.5)}
.ix-hero .d1 em{color:var(--mist)}

/* ---------- team hero: group photo full-bleed, headline bottom-left ---------- */
.tm-hero{justify-content:flex-end;padding-bottom:clamp(2.6rem,7vh,5.5rem)}
.tm-hero .hero-bg img{opacity:.72;object-position:center 35%}
.tm-hero .hero-bg::after{background:linear-gradient(180deg,rgba(13,47,45,.5) 0%,rgba(13,47,45,.08) 38%,rgba(13,47,45,.82) 100%)}
.tm-hero .d1{max-width:none;text-shadow:0 2px 28px rgba(13,47,45,.5)}
.tm-hero .d1 em{color:var(--mist)}

/* ---------- about hero: statement only (team photo lives on the Team page) ---------- */
.ab-hero{padding-bottom:clamp(1.6rem,3vw,2.4rem)}
/* page breaks: the footer's hairline above and below the headline inside the dark band */
.ab-hero>.container--wide::before,.ab-hero>.container--wide::after{content:'';display:block;height:1px;background:var(--line-dark)}
.ab-hero>.container--wide::before{margin-bottom:clamp(3rem,6vw,5rem)}
.ab-hero>.container--wide::after{margin-top:clamp(3rem,6vw,5rem)}
.ab-hero{padding-top:calc(var(--hdr) + clamp(1.6rem,3vw,2.4rem))}
.ab-hero .ab-statement em{color:var(--pop)}
.ab-statement{max-width:30ch;text-wrap:balance}

/* ---------- home: mission statement + representative shareholders ---------- */
.mission-words{
  margin:0 auto;max-width:min(1560px,92%);text-align:center;text-wrap:balance;
  font-family:var(--f-serif);font-optical-sizing:auto;font-weight:420;
  font-size:clamp(1.7rem,3.2vw,3.1rem);line-height:1.22;letter-spacing:-.016em;
}
.mission-words em{font-style:italic;color:var(--teal);letter-spacing:-.008em}
.on-dark .mission-words{color:var(--paper)}
.on-dark .mission-words em{color:var(--pop)}
.section-head--wide{max-width:none}
.mission-inner{display:grid}
.mission-sig{
  margin:clamp(1.6rem,2.8vw,2.6rem) 0 0;justify-self:end;
  display:flex;align-items:center;gap:clamp(.7rem,1.2vw,1.1rem);
}
.mission-sig .rule{display:block;width:clamp(14px,1.5vw,22px);height:1px;background:var(--ink);opacity:.55;flex:none}
.mission-sig img{width:clamp(180px,21vw,290px);height:auto;display:block;opacity:.92}
.mission-band{position:relative;overflow:hidden}
.mission-inner{position:relative;z-index:1}
@media (max-width:640px){.mission-sig{justify-self:center}}
.mission-band{padding-block:clamp(4rem,7vw,7.5rem)}
.home-inv{grid-template-columns:repeat(5,minmax(0,1fr))}
.home-inv__cta{margin-top:clamp(1.6rem,2.6vw,2.4rem)}
@media (max-width:900px){.home-inv{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.home-inv{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- header: slogan appears in the bar once it frosts on scroll ---------- */
.site-header .bar{position:relative}
/* set beside the logo as a lockup (hairline between), so it never drifts toward TEAM as the width changes */
.bar-slogan{
  flex:none;margin-right:auto;padding-left:clamp(1.1rem,1.5vw,1.5rem);border-left:1px solid var(--line);
  font-family:var(--f-serif);font-optical-sizing:auto;font-weight:500;font-size:1.15rem;line-height:1.5;letter-spacing:-.008em;white-space:nowrap;color:var(--pine);
  opacity:0;transform:translateX(-6px);pointer-events:none;transition:opacity .45s var(--ease),transform .6s var(--ease-out);
}
.site-header.is-stuck .bar-slogan{opacity:1;transform:none}
@media (max-width:1350px){.bar-slogan{display:none}}
.site-header.is-menu-open .bar-slogan{opacity:0}   /* not behind the open menu */

/* ---------- giving: "Charlotte is home" pins while the next sections slide up over it (same move as the home hero) ---------- */
.gv-band--city{position:sticky;top:0;z-index:0}
.gv-band--city~section{position:relative;z-index:1}
.gv-band--city~.section:not(.on-darker){background:var(--paper)}

/* ---------- section breaks: a hairline across the top of each content section (same line as the footer's) ---------- */
.section::before{
  content:'';position:absolute;top:0;left:0;
  width:100%;height:1px;background:var(--line);pointer-events:none;
}
.section.on-dark::before,.section.on-darker::before{background:var(--line-dark)}
/* no line on the dark closing band, on a section continuing the one above it, or directly under a hero */
.section.cta-band::before,
.section[style*="padding-top:0"]::before,
.hero-reveal>.section:first-child::before,
.page-hero+.section::before{display:none}

/* ---------- 9/17: the slogan set as a printed page behind a band ---------- */
.page-band{position:relative;overflow:hidden;isolation:isolate}
.page-band>.container--wide{position:relative;z-index:1}
/* the block is wider and taller than the band and gets clipped by it, so every
   line runs off one edge and picks up again on the next — no margins anywhere */
.pagetext{
  position:absolute;top:-1.7em;left:-9%;width:118%;height:calc(100% + 3.4em);
  z-index:-1;margin:0;padding:0;overflow:hidden;
  pointer-events:none;user-select:none;
  /* set like a finely printed page: serif italic at its text optical size, tight even leading,
     justified with ligatures + kerning, in pine ink (the footer etching's colour) */
  font-family:var(--f-serif);font-style:italic;font-weight:400;font-optical-sizing:auto;
  font-size:clamp(.95rem,1.02vw,1.08rem);line-height:1.62;letter-spacing:.006em;word-spacing:.02em;
  font-kerning:normal;font-variant-ligatures:common-ligatures;hyphens:none;
  text-align:justify;color:var(--pine);opacity:.07;
}
@media (max-width:860px){.pagetext{font-size:.86rem;line-height:1.6;opacity:.065;left:-14%;width:128%}}


/* ---------- home: returned by the page agent, scoped to that page ---------- */
/* ---------- 9/21 home: shareholders at 25 (5×5; the odd card out centres itself at narrower column counts) ---------- */
.home-inv{--g:clamp(.8rem,1.25vw,1.35rem);gap:var(--g)}
@media (max-width:900px){.home-inv .inv-card:nth-child(3n+1):last-child{grid-column:1/-1;width:calc((100% - 2*var(--g))/3);justify-self:center}}
@media (max-width:560px){.home-inv .inv-card:nth-child(3n+1):last-child{width:auto;justify-self:stretch}.home-inv .inv-card:nth-child(odd):last-child{grid-column:1/-1;width:calc((100% - var(--g))/2);justify-self:center}}

/* ---------- 9/21 home: closing band split — CTA left, Service Report sign-up right ---------- */
.cta-band--split .inner{max-width:1240px;grid-template-columns:1.05fr .95fr;gap:0;align-items:center;justify-items:stretch;text-align:left}
.cta-band--split .cta-split__copy{display:grid;gap:clamp(1.2rem,2.2vw,1.8rem);justify-items:start;padding-right:clamp(2rem,4.5vw,5rem)}
.cta-band--split .actions{justify-content:flex-start;margin-top:.2rem}
.cta-band--split .cta-split__nl{
  grid-template-columns:1fr;gap:1.4rem;
  padding:0 0 0 clamp(2rem,4.5vw,5rem);border:0;border-left:1px solid var(--line-dark);border-radius:0;background:transparent;
}
/* the split column is narrower than the centred band: size the headline so "Own a business you love?" holds one line */
.cta-band--split .d2{font-size:clamp(1.9rem,3.3vw,3.05rem)}
.cta-band--split .cta-split__nl h3{color:var(--paper);font-size:clamp(1.5rem,2.3vw,2.1rem)}
.cta-band--split .cta-split__nl p{color:rgba(247,245,240,.72)}
.cta-band--split .nl-form input[type=email]{background:transparent;color:var(--paper);border-color:rgba(247,245,240,.28)}
.cta-band--split .nl-form input[type=email]::placeholder{color:rgba(247,245,240,.5)}
.cta-band--split .nl-form input[type=email]:focus{border-color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper)}
@media (max-width:880px){
  .cta-band--split .inner{grid-template-columns:1fr;gap:clamp(2rem,6vw,3rem)}
  .cta-band--split .cta-split__copy{padding-right:0}
  .cta-band--split .cta-split__nl{padding:clamp(2rem,6vw,3rem) 0 0;border-left:0;border-top:1px solid var(--line-dark)}
}

/* ---------- about: returned by the page agent, scoped to that page ---------- */
/* ---------- about: investment criteria ---------- */
.ab-criteria__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.9rem,1.4vw,1.4rem)}
.ab-criteria .ab-crit{
  display:grid;gap:.75rem;align-content:start;
  padding:clamp(1.4rem,2vw,1.9rem);background:var(--card);border:1px solid var(--line);border-radius:0;
}
.ab-criteria .ab-crit h3{font-family:var(--f-serif);font-weight:var(--w-name);font-size:1.16rem;letter-spacing:-.005em;line-height:1.3;color:var(--ink)}
.ab-criteria .ab-crit p{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.58}
.ab-criteria .ab-crit ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;color:var(--ink-soft);font-size:1rem;line-height:1.5}
.ab-criteria .ab-crit li{position:relative;padding-left:1rem}
.ab-criteria .ab-crit li::before{content:'';position:absolute;left:0;top:.68em;width:6px;height:1px;background:var(--teal)}
@media (max-width:1100px){.ab-criteria__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ab-criteria__grid{grid-template-columns:1fr}}

/* ---------- companies: returned by the page agent, scoped to that page ---------- */