/* ------------------------------------------------------------------
   Seven Stars - site styles
   Editorial / serif-led, modeled in the spirit of Thrive & Greenoaks.
------------------------------------------------------------------- */

:root {
  --bg:        #ECECE9;   /* neutral stone gray */
  --bg-deep:   #E0E0DC;   /* slightly deeper card surface */
  --ink:       #161616;   /* near-black ink */
  --ink-soft:  #353535;
  --ink-muted: #6E6E6B;
  --rule:      #C2C2BD;
  --rule-soft: #D4D4CF;

  /* Brand */
  --brand-dark:  #1F3B73; /* deep navy */
  --brand-light: #4A90E2; /* lighter blue */
  --accent:      #1F3B73; /* primary brand accent */
  --accent-hi:   #4A90E2; /* secondary brand accent */

  --max:       1240px;
  --gutter:    clamp(20px, 4vw, 56px);
  --serif:     "Figtree", "Inter", "Helvetica Neue", Arial, sans-serif;
  --sans:      "Figtree", "Inter", "Helvetica Neue", Arial, sans-serif;
  --brand-font: "Figtree", "Inter", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Prevent any accidental horizontal scroll when the viewport narrows.
   Use `clip` instead of `hidden` so it doesn't break sticky positioning
   on the header. (Falls back to hidden on very old browsers.) */
html, body { overflow-x: hidden; overflow-x: clip; }

/* Media never overflows its container */
img, svg, video { max-width: 100%; }

/* Grid + flex children should be allowed to shrink below their intrinsic
   content size — prevents long words / nowrap content from blowing out
   layouts at intermediate widths */
.section-head > *,
.about-block > *,
.cos-grid .co > *,
.team-grid .member > *,
.how-list > li > * { min-width: 0; }

html {
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.55;
  font-feature-settings: "kern" on, "liga" on;
}

/* subtle paper grain (very low opacity) */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(0,0,0,0.022) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  z-index: 1;
}

/* ----------------------------------------------------------------- */
/*   Typography                                                      */
/* ----------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.display {
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 600;
  
}

.display em {
  font-style: italic;
  font-weight: 600;
  
}

h2.section-title {
  font-size: clamp(36px, 5.5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
}

h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.012em;
}

p {
  margin: 0 0 1.1em;
  font-size: clamp(17px, 1.18vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
}

p.lede {
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 200ms ease, color 200ms ease;
}
a:hover { border-color: var(--accent-hi); color: var(--accent-hi); }
a.bare { border-bottom: none; }
a.bare:hover { color: var(--accent-hi); }

.eyebrow {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.smallcaps {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}

::selection { background: var(--ink); color: var(--bg); }

/* ----------------------------------------------------------------- */
/*   Layout                                                          */
/* ----------------------------------------------------------------- */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}

.divider { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.divider.soft { border-top-color: var(--rule-soft); }

section { padding: clamp(72px, 10.5vw, 160px) 0; }
section.tight { padding: clamp(38px, 5.5vw, 68px) 0; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 56px);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

@media (max-width: 800px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

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

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--brand-font);
  font-size: 18px;
  font-weight: 600; /* Figtree Semibold */
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--brand-dark);
  border: 0;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 320ms ease, transform 320ms ease, visibility 0s linear 320ms;
  pointer-events: none;
}
.brand.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 320ms ease, transform 320ms ease, visibility 0s linear 0s;
  pointer-events: auto;
}
.brand .mark { width: auto; height: 44px; display: inline-block; flex-shrink: 0; }
.brand .brand-img {
  height: 44px;
  width: auto;
  max-width: 60vw;
  display: inline-block;
  flex-shrink: 0;
  object-fit: contain;
}
@media (max-width: 720px) {
  .brand .brand-img { height: 36px; }
}
.brand .brand-fallback {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand .brand-words {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.95;
  gap: 2px;
}
.brand .word-1,
.brand .word-2 { color: var(--brand-dark); display: block; }
.brand:hover .word-1,
.brand:hover .word-2 { color: var(--brand-light); }
.brand:hover .mark g { fill: var(--brand-dark); }
.brand .mark g { transition: fill 200ms ease; }

nav.primary {
  display: flex;
  gap: 28px;
  align-items: center;
  margin: 0;
  padding: 0;
}
nav.primary a {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  word-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 0;
  padding: 6px 0;
  margin: 0;
  position: relative;
  white-space: nowrap;
}
nav.primary a:hover { color: var(--brand-light); }
nav.primary a.is-active { color: var(--brand-light); }
nav.primary a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--brand-light);
}
nav.primary a.nav-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--ink-soft);
  transition: color 200ms ease, transform 200ms ease;
}
nav.primary a.nav-email svg { width: 100%; height: 100%; display: block; }
nav.primary a.nav-email:hover { color: var(--brand-light); transform: translateY(-1px); }
nav.primary a.nav-email::after { display: none; }

/* ----- Mobile: hamburger menu ----- */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px;
  position: relative;
  z-index: 60;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--brand-dark);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 220ms ease, opacity 220ms ease;
  transform-origin: center;
}
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 720px) {
  .nav-toggle { display: block; z-index: 110; }

  nav.primary {
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    padding: 80px 32px 32px;
    transform: translateY(-100%);
    transition: transform 360ms cubic-bezier(.2,.85,.15,1);
    z-index: 55;
    visibility: hidden;
  }
  nav.primary.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  nav.primary a {
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 600;
    color: var(--brand-dark);
  }
  nav.primary a.is-active::after { display: none; }

  body.nav-open { overflow: hidden; }
}

.contact-cta {
  border: 1px solid var(--brand-dark) !important;
  border-radius: 999px;
  padding: 8px 16px !important;
  color: var(--brand-dark) !important;
  font-family: var(--brand-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  font-size: 13px !important;
}
.contact-cta:hover {
  background: var(--brand-dark);
  color: #fff !important;
}

/* ----------------------------------------------------------------- */
/*   Hero                                                            */
/* ----------------------------------------------------------------- */

.hero {
  padding: clamp(80px, 14vw, 200px) 0 clamp(60px, 10vw, 140px);
}

.hero .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}

.hero .display { max-width: 18ch; }
.hero .lede { max-width: 56ch; margin-top: clamp(28px, 4vw, 48px); }

/* ----------------------------------------------------------------- */
/*   Sections                                                        */
/* ----------------------------------------------------------------- */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 80px);
  align-items: start;
  margin-bottom: clamp(44px, 6vw, 88px);
  padding-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--rule);
}
/* Nudge the small label down a touch so its cap-height visually
   aligns with the top of the big title's first line */
.section-head .num {
  margin-top: clamp(4px, 0.6vw, 10px);
  line-height: 1.2;
}
/* About section uses the default section-head spacing (no override) so
   the top and bottom whitespace of the HOW WE WORK WITH FOUNDERS
   section matches every other section uniformly. */

@media (max-width: 900px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: clamp(28px, 4vw, 40px);
    margin-bottom: clamp(32px, 5vw, 56px);
  }
}

.section-head .num {
  font-family: var(--sans);
  font-size: 26px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--brand-light);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- */
/*   Cards & lists                                                   */
/* ----------------------------------------------------------------- */

.cos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.cos-grid .co {
  padding: clamp(20px, 2vw, 26px) clamp(18px, 1.8vw, 22px);
  border: 0;
  background: var(--bg);
  transition: background 200ms ease;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 200px;
  min-width: 0;
}
.cos-grid .co:hover { background: var(--bg-deep); }
.cos-grid .co .name {
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cos-grid .co .blurb {
  color: var(--ink-soft);
  font-size: 14px; line-height: 1.45;
  margin: 0;
}
.cos-grid .co .tag {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* portfolio card refinements */
.cos-grid a.co {
  text-decoration: none;
  border: 0;
  color: inherit;
}
.cos-grid .co-mark {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--brand-dark);
  color: var(--brand-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--brand-font);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
  flex-shrink: 0;
  transition: transform 220ms ease, background 220ms ease;
  position: relative;
  overflow: hidden;
}
.cos-grid .co-mark .logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  z-index: 1;
}
.cos-grid .co-mark .logo-img.favicon-fallback {
  padding: 8px;
}
.cos-grid .co-mark .letter {
  position: relative;
  z-index: 0;
}
.cos-grid a.co:hover .co-mark {
  transform: translateY(-2px) rotate(-2deg);
  background: var(--brand-light);
  color: #fff;
}
.cos-grid .co .founders {
  margin-top: auto;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.5;
}
.cos-grid .co.stealth { opacity: 0.85; }
.cos-grid .co.stealth .co-mark {
  background: transparent;
  color: var(--brand-light);
  border: 1px dashed var(--rule);
  font-size: 24px;
  padding: 0;
}
.cos-grid .co.stealth .co-mark svg {
  width: 60%;
  height: 60%;
  display: block;
}
@media (max-width: 1100px) { .cos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .cos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cos-grid { grid-template-columns: 1fr; } }

/* writing list */
.writing-list { border-top: 1px solid var(--rule); }
.writing-list .row {
  display: grid;
  grid-template-columns: clamp(110px, 12vw, 140px) minmax(0, 1fr) clamp(140px, 18vw, 220px);
  gap: clamp(16px, 2vw, 24px);
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition: background 180ms ease;
}
.writing-list .row:hover { background: var(--bg-deep); }
.writing-list .row .date {
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.writing-list .row .title {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.012em;
}
.writing-list .row .topic {
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: right;
}
@media (max-width: 720px) {
  .writing-list .row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .writing-list .row .topic { text-align: left; }
}

/* facts strip */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.facts .f {
  padding: 36px 28px;
  border-right: 1px solid var(--rule);
}
.facts .f:last-child { border-right: 0; }
.facts .f .k {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.facts .f .v {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.05;
}
@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts .f { border-bottom: 1px solid var(--rule); }
  .facts .f:nth-child(2n) { border-right: 0; }
  .facts .f:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 540px) {
  .facts { grid-template-columns: 1fr; }
  .facts .f { border-right: 0; border-bottom: 1px solid var(--rule); }
  .facts .f:last-child { border-bottom: 0; }
}

/* prose container for letter pages */
.prose {
  max-width: 64ch;
  margin: 0 auto;
}
.prose p { font-size: 19px; line-height: 1.7; color: var(--ink); }
.prose p + p { text-indent: 2em; }
.prose p.first { text-indent: 0; }
.prose p.first::first-letter {
  font-size: 4.4em;
  float: left;
  line-height: 0.88;
  padding: 6px 10px 0 0;
  font-weight: 600;
  font-style: italic;
}
.prose blockquote {
  border-left: 2px solid var(--ink);
  padding-left: 28px;
  margin: 36px 0;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
}
.prose .signature {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  font-style: italic;
  color: var(--ink-soft);
}

/* button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition: all 200ms ease;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn .arrow { transition: transform 200ms ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* link list */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.link-list li {
  border-bottom: 1px solid var(--rule);
}
.link-list li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 0;
  border: 0;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.link-list li a:hover { color: var(--accent); padding-left: 8px; transition: padding 220ms ease, color 220ms ease; }
.link-list li a .arrow { font-size: 14px; color: var(--ink-muted); }

/* ----------------------------------------------------------------- */
/*   Footer                                                          */
/* ----------------------------------------------------------------- */

.site-footer {
  padding: 0 0 20px;
  border-top: 1px solid var(--rule);
  background: var(--bg-deep);
}
.site-footer .top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(36px, 5vw, 60px);
}
@media (max-width: 800px) {
  .site-footer .top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .site-footer .top { grid-template-columns: 1fr; }
}
.site-footer h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer ul li a { border: 0; color: var(--ink-soft); font-size: 15px; }
.site-footer ul li a:hover { color: var(--ink); }

.footer-mark {
  font-family: var(--brand-font);
  font-size: clamp(64px, 11vw, 160px);
  letter-spacing: -0.045em;
  line-height: 0.9;
  font-weight: 600;
  margin: 32px 0 24px;
  display: flex; flex-wrap: wrap; gap: 0.18em;
}
.footer-mark .word-1,
.footer-mark .word-2 { color: var(--brand-dark); }
.footer-mark .word-2 { margin-left: 0.18em; }

/* Footer row: Seven Stars logo on the left (with even whitespace above
   and below it via padding on .footer-logo), social icons on the right
   but dropped to the bottom of the row so they sit just above the
   horizontal divider line above the "San Francisco, CA" text. */
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  flex-wrap: wrap;
}

/* Footer logo - Seven Stars logo image, medium size, with equal vertical
   whitespace above and below the logo image. The bottom padding is 4px
   shorter than the top to compensate for the copyright row's
   margin-top, so the visible whitespace above and below is the same. */
.footer-logo {
  display: flex;
  align-items: center;
  margin: 0;
  padding: clamp(20px, 2.6vw, 32px) 0 clamp(16px, 2.3vw, 28px);
  align-self: center;
}
.footer-logo .footer-logo-img {
  height: auto;
  width: auto;
  max-width: min(280px, 60vw);
  display: block;
  object-fit: contain;
}

.site-footer .footer-intro {
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 56ch;
  margin: 0 0 18px;
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 0;
  align-self: flex-end;
}
.site-footer .footer-links a {
  font-family: var(--brand-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border: 0;
  letter-spacing: -0.005em;
  transition: color 200ms ease;
}
.site-footer .footer-links a:hover { color: var(--brand-light); }
.site-footer .footer-links .sep {
  color: var(--rule);
  font-weight: 400;
  user-select: none;
}
.site-footer .footer-links a.footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  color: var(--brand-light);
  transition: color 200ms ease, transform 200ms ease;
}
.site-footer .footer-links a.footer-icon svg { width: 100%; height: 100%; display: block; }
.site-footer .footer-links a.footer-icon[aria-label="LinkedIn"] svg,
.site-footer .footer-links a.footer-icon[aria-label="X"] svg {
  width: 75%;
  height: 75%;
}
.site-footer .footer-links a.footer-icon:hover {
  color: var(--brand-dark);
  transform: translateY(-1px);
}

.site-footer .copyright {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--brand-font);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer .copyright .locale { display: inline-flex; align-items: baseline; gap: 6px; }
.site-footer .copyright #sf-clock {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" on;
  color: var(--brand-dark);
}

.site-footer .legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* ----------------------------------------------------------------- */
/*   Misc                                                            */
/* ----------------------------------------------------------------- */

.fade-in {
  opacity: 0;
  transform: translateY(8px);
  animation: fade .9s ease forwards;
}
.fade-in.d2 { animation-delay: .12s; }
.fade-in.d3 { animation-delay: .24s; }
@keyframes fade { to { opacity: 1; transform: translateY(0); } }

.kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-muted);
}

/* ================================================================= */
/*   HERO LOGO ANIMATION                                             */
/*   Thrive-style kinetic wordmark for "SEVEN STARS"                 */
/* ================================================================= */

.hero-logo {
  padding: clamp(20px, 3vw, 36px) 0 clamp(24px, 3vw, 40px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Constellation row of seven stars above the wordmark */
.stars-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  margin-bottom: clamp(28px, 4vw, 48px);
  height: clamp(28px, 4vw, 44px);
  perspective: 600px;
}

.stars-row .star {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--brand-light);
  line-height: 1;
  opacity: 0;
  transform: translateY(40px) scale(0.4) rotate(-90deg);
  animation:
    star-in 1.1s cubic-bezier(.2,.8,.2,1) forwards,
    star-float 6s ease-in-out infinite;
  animation-delay:
    calc(0.06s * var(--i)),
    calc(1.2s + 0.4s * var(--i));
  will-change: transform, opacity;
}
.stars-row .star:nth-child(odd) { color: var(--brand-dark); }

@keyframes star-in {
  0%   { opacity: 0; transform: translateY(40px) scale(0.4) rotate(-90deg); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.05) rotate(8deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes star-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-4px) rotate(20deg); }
  50%      { transform: translateY(2px) rotate(-10deg); }
  75%      { transform: translateY(-2px) rotate(15deg); }
}

/* Hero layout: full Seven Stars logo image, centered */
.logo-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vw, 64px);
}

.hero-logo-img {
  width: auto;
  height: auto;
  max-width: min(560px, 80vw);
  display: block;
  object-fit: contain;
}

.mark-cluster {
  width: clamp(40px, 7vw, 90px);
  height: auto;
  flex-shrink: 0;
}
.mark-cluster .cluster path {
  fill: var(--brand-light);
  opacity: 1;
}
@keyframes cluster-in {
  0%   { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes cluster-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* The wordmark itself - Figtree Semibold, brand navy */
.wordmark {
  font-family: var(--brand-font);
  font-size: clamp(36px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 600; /* Figtree Semibold */
  color: var(--brand-dark);
  display: block;
  margin: 0;
  text-align: left;
}

.wordmark .word {
  display: inline-block;
  margin: 0 0.16em;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  color: var(--brand-dark);
}

/* Stacked layout: each word on its own line */
.wordmark.stacked .word {
  display: block;
  margin: 0;
}

/* Both words in dark navy (matches the actual logo) */
.wordmark .word.italic { color: var(--brand-dark); }

.wordmark .ltr {
  display: inline-block;
  transform: none;
  opacity: 1;
}

@keyframes ltr-in {
  0%   { transform: translateY(110%) skewY(4deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) skewY(0); opacity: 1; }
}

@media (max-width: 640px) {
  .logo-block { gap: 18px; }
  .wordmark { font-size: clamp(48px, 16vw, 96px); }
}

/* Tagline beneath the wordmark - featured */
.hero-logo .tagline {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--ink);
  font-weight: 600;
  margin: clamp(38px, 5vw, 60px) auto 0;
  max-width: 56ch;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  animation: fade 0.14s ease forwards;
  animation-delay: 0.15s;
}
.hero-logo .tagline em {
  font-style: normal;
  color: var(--brand-dark);
}

/* ================================================================= */
/*   MARQUEE - scrolling wordmark band (very Thrive)                 */
/* ================================================================= */

.marquee {
  --speed: 38s;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  background: var(--bg);
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee .track {
  display: inline-flex;
  gap: 56px;
  white-space: nowrap;
  animation: scroll var(--speed) linear infinite;
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 48px);
  font-style: italic;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ink);
  align-items: center;
}

.marquee .track .star { font-style: normal; font-size: 0.65em; color: var(--ink-muted); }

.marquee.reverse .track { animation-direction: reverse; --speed: 52s; font-style: normal; }

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ================================================================= */
/*   TEAM GRID                                                       */
/* ================================================================= */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.team-grid .member {
  padding: 40px 32px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 18px;
}
.team-grid .member:nth-child(3n) { border-right: 0; }
.team-grid .avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.team-grid .avatar img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
}
.team-grid .avatar .initials {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--brand-font);
  font-size: 32px;
  color: var(--brand-dark);
  font-weight: 600;
  letter-spacing: -0.02em;
  z-index: 0;
}
.team-grid .name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--brand-dark);
}
.team-grid .name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.team-grid .socials {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.team-grid .socials a {
  width: 20px;
  height: 20px;
  color: var(--brand-light);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms ease, transform 180ms ease;
}
.team-grid .socials a:hover {
  color: var(--brand-dark);
  transform: translateY(-1px);
}
.team-grid .socials svg {
  width: 100%;
  height: 100%;
  display: block;
}
.team-grid .role {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0;
}
.team-grid .bio {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid .member:nth-child(3n) { border-right: 1px solid var(--rule); }
  .team-grid .member:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-grid .member { border-right: 0 !important; }
}

/* ================================================================= */
/*   JOBS LIST                                                       */
/* ================================================================= */

.jobs {
  border-top: 1px solid var(--rule);
}
.jobs .job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
  cursor: pointer;
  transition: padding 220ms ease;
}
.jobs .job:hover { padding-left: 12px; }
.jobs .job .meta {
  display: flex; align-items: baseline; gap: 24px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.jobs .job .title {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.jobs .job .arrow {
  font-family: var(--sans);
  font-size: 18px;
  color: var(--ink-muted);
  transition: transform 220ms ease, color 220ms ease;
}
.jobs .job:hover .arrow { transform: translateX(6px); color: var(--ink); }
.jobs .empty {
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-muted);
  font-style: italic;
}

/* ================================================================= */
/*   CONTACT                                                         */
/* ================================================================= */

.contact-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  padding-top: clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--rule);
}
@media (max-width: 800px) { .contact-block { grid-template-columns: 1fr; } }

/* FAQ accordion (replaces the old contact-grid) */
.faq {
  padding-top: clamp(6px, 0.95vw, 12px);
  padding-bottom: clamp(32px, 4vw, 60px);
  border-top: 0;
}
/* Tighten gap between section title and first FAQ */
#contact .section-head { margin-bottom: clamp(22px, 3vw, 40px); }
.faq .faq-heading {
  font-family: var(--brand-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 24px;
}
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-item:first-of-type { border-top: 0; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-family: var(--brand-font);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  color: var(--brand-dark);
  letter-spacing: -0.012em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 200ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand-light); }
.faq-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  position: relative;
  display: inline-block;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--brand-dark);
  border-radius: 1px;
  transition: transform 220ms ease, background 220ms ease;
}
.faq-icon::before { /* horizontal */
  top: 50%; left: 0; right: 0;
  height: 2px;
  transform: translateY(-50%);
}
.faq-icon::after { /* vertical */
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
}
.faq-item[open] .faq-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.faq-item summary:hover .faq-icon::before,
.faq-item summary:hover .faq-icon::after { background: var(--brand-light); }

.faq-answer {
  padding: 0 0 24px;
  max-width: 70ch;
}
.faq-answer p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.faq-answer a {
  color: var(--brand-dark);
  border-bottom: 1px solid var(--rule);
}
.faq-answer a:hover {
  color: var(--brand-light);
  border-bottom-color: var(--brand-light);
}

/* Smooth open animation */
.faq-item[open] summary { color: var(--brand-light); }
.faq-item[open] .faq-answer { animation: faq-open 280ms ease; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-grid .ch h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 14px;
}
.contact-grid .ch p {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 38ch;
}
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-block .channels { display: flex; flex-direction: column; gap: 28px; }
.contact-block .ch h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 10px;
}
.contact-block .ch p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.contact-block .ch a {
  border: 0;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.contact-block .ch a:hover { color: var(--accent); border-color: var(--accent); }

/* ================================================================= */
/*   LOGIN PAGE                                                      */
/* ================================================================= */

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .login-shell { grid-template-columns: 1fr; } }

.login-shell .panel {
  padding: clamp(40px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login-shell .panel.left {
  background: var(--ink);
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.login-shell .panel.left .brand { color: var(--bg); }
.login-shell .panel.left .brand:hover { color: var(--bg); }
.login-shell .panel.left h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1.04;
  font-weight: 600;
  color: var(--bg);
  max-width: 12ch;
}
.login-shell .panel.left p {
  color: color-mix(in srgb, var(--bg) 75%, transparent);
  max-width: 42ch;
  font-size: 17px;
}
.login-shell .panel.left .credits {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 50%, transparent);
}
.login-shell .panel.left .floating-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.login-shell .panel.left .floating-stars span {
  position: absolute;
  font-family: var(--serif);
  color: color-mix(in srgb, var(--bg) 16%, transparent);
  animation: star-float 8s ease-in-out infinite;
}

.login-shell .panel.right {
  background: var(--bg);
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 420px;
  margin: auto;
}
.login-card .eyebrow { margin-bottom: 14px; }
.login-card h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 36px;
}

.field { display: block; margin-bottom: 22px; }
.field label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.field input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms ease;
}
.field input::placeholder { color: var(--ink-muted); opacity: 0.6; }
.field input:focus { border-bottom-color: var(--ink); }

.login-card button {
  width: 100%;
  padding: 16px 24px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease;
  margin-top: 8px;
}
.login-card button:hover { background: var(--accent); }
.login-card .helper {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}
.login-card .helper a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.login-card .helper a:hover { color: var(--accent); border-color: var(--accent); }

/* ================================================================= */
/*   ABOUT BLOCK                                                     */
/* ================================================================= */

.about-block {
  display: block;
}
.about-block .left { margin-bottom: clamp(28px, 3vw, 44px); }
.about-block .left .eyebrow { margin-bottom: 18px; }
.about-block .left h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 18px;
}
.about-block .right p {
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 1.2em;
}
.about-block .right p:first-child { font-size: clamp(20px, 1.6vw, 24px); color: var(--ink); line-height: 1.5; }

/* anchor offset for sticky header */
/* All main content sections (About / How we work, Companies, Team, FAQ)
   have a single horizontal divider line at the END of each section
   (drawn by a pseudo-element inset by the same gutter as .wrap so it
   matches the section-head border-top's length). The first section's
   section-head border-top serves as its start divider; subsequent
   sections' start dividers are suppressed so each transition has
   only one visible line. Vertical padding is longhand to override
   .wrap's shorthand. */
.section-anchor {
  scroll-margin-top: 80px;
  position: relative;
  padding-top: clamp(36px, 5.25vw, 80px);
  padding-bottom: clamp(36px, 5.25vw, 80px);
  border-bottom: 0;
}

.section-anchor::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--rule);
}

/* Suppress the section-head border-top for any section that follows
   another .section-anchor — the previous section's end divider line
   already serves as the visual separator for this section. */
.section-anchor + .section-anchor .section-head {
  border-top: 0;
}

/* HOW WE WORK uses the same padding-top as COMPANIES / TEAM / FAQ. */
#about.section-anchor {
  padding-top: clamp(20px, 2.9vw, 45px);
}

/* HOW WE WORK has its own start divider line at the top of section-head,
   so its line-to-label gap = section-head padding-top alone. Bump that
   padding-top to equal section-padding-top + section-head-padding-top
   so the visible whitespace from the line to the label matches what
   COMPANIES / TEAM / FAQ have. */
#about .section-head {
  padding-top: clamp(60px, 7.9vw, 105px);
}

/* COMPANIES / TEAM / FAQ: tighter padding-top so they sit closer
   under the previous section's end divider. */
.section-anchor + .section-anchor {
  padding-top: clamp(20px, 2.9vw, 45px);
}

/* Press banner (above the team grid) */
.press-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(20px, 2.5vw, 28px) clamp(24px, 3vw, 36px);
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  margin: 0 0 clamp(32px, 4vw, 48px);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
  border-bottom: 1px solid var(--rule);
}
.press-banner .press-text { min-width: 0; }
.press-banner:hover {
  background: var(--bg);
  border-color: var(--brand-light);
  transform: translateY(-1px);
}
.press-banner .press-source {
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--ink);
  flex-shrink: 0;
  text-transform: uppercase;
  line-height: 1;
  border-right: 1px solid var(--rule);
  padding-right: clamp(20px, 3vw, 36px);
  display: inline-flex;
  align-items: center;
}
.press-banner .press-logo {
  width: auto;
  height: clamp(20px, 2.2vw, 28px);
  display: block;
  object-fit: contain;
}
.press-banner .press-text {
  flex: 1;
  font-family: var(--brand-font);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.press-banner .press-cta {
  font-family: var(--brand-font);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 600;
  color: var(--brand-light);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 220ms ease, transform 220ms ease;
}
.press-banner:hover .press-cta {
  color: var(--brand-dark);
  transform: translateX(2px);
}
@media (max-width: 700px) {
  .press-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .press-banner .press-source {
    border-right: 0;
    padding-right: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule);
    width: 100%;
  }
}

/* ----- Global mobile polish ----- */
@media (max-width: 600px) {
  html { font-size: 16px; }
  section { padding: 36px 0; }
  .section-head {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 24px;
    margin-bottom: 40px;
  }
  h2.section-title { font-size: 30px; line-height: 1.05; }
  .site-header .inner { padding: 14px 0; }

  /* Hero on mobile */
  .hero-logo { padding: 14px 0 24px; }
  .logo-block { gap: 14px; }
  .mark-cluster { width: 44px; }
  .wordmark { font-size: 44px; }
  .hero-logo .tagline { font-size: 18px; margin-top: 24px; }

  /* Footer copyright stacks cleanly */
  .site-footer .copyright {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Testimonials: tighter on small screens */
  .t-quote { font-size: 16px; line-height: 1.5; }
  .t-attr .t-logo { width: 40px; height: 40px; }
  .t-attr .t-name { font-size: 16px; }
  .t-attr .t-meta { font-size: 12px; }

  /* Team: avatar a bit smaller */
  .team-grid .avatar { width: 80px; height: 80px; }
  .team-grid .name { font-size: 22px; }
}

/* ================================================================= */
/*   TESTIMONIALS CAROUSEL                                           */
/* ================================================================= */

.testimonials {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: clamp(12px, 1.5vw, 20px);
  border-top: 0;
}

/* Testimonials sit in their own section right below the hero. Tight
   top padding keeps the carousel close to the "Early-stage partner..."
   tagline above it; zero padding-bottom keeps the carousel close to
   the next section's start divider line. */
.testimonials-section {
  padding-top: clamp(18px, 2.4vw, 34px);
  padding-bottom: 0;
}

.t-stage {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: clamp(12px, 2vw, 32px);
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.t-track {
  display: grid;
  position: relative;
  min-height: 240px;
  min-width: 0;
}
.t-slide {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 480ms ease, transform 480ms ease;
  transform: translateY(8px);
  pointer-events: none;
}
.t-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.t-quote {
  font-family: var(--brand-font);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  text-align: center;
  text-wrap: pretty;
}
/* Shorter quotes (Nico, Ben, Guillaume, Praneet) - bump so they fill Matt's slot */
.t-slide:nth-child(1) .t-quote,
.t-slide:nth-child(3) .t-quote,
.t-slide:nth-child(4) .t-quote,
.t-slide:nth-child(5) .t-quote {
  font-size: 19.5px;
  line-height: 1.5;
}

.t-attr {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--brand-font);
  font-weight: 600;
  text-align: left;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
  padding-left: 0;
}
.t-attr .t-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  border: 1px solid var(--rule);
  flex-shrink: 0;
  display: block;
}
.t-attr .t-attr-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}
.t-attr .t-name {
  color: var(--brand-dark);
  font-size: clamp(17px, 1.4vw, 20px);
  letter-spacing: -0.005em;
}
.t-attr .t-meta {
  font-size: clamp(13px, 1vw, 15px);
}
.t-attr .t-title,
.t-attr .t-company { color: var(--brand-light); }
.t-attr .t-source  {
  display: inline;
  margin-left: 4px;
  font-size: clamp(12px, 0.85vw, 13px);
  color: var(--ink-muted);
  font-weight: 600;
}
.t-attr .t-source a { color: var(--ink-muted); border-bottom: 1px solid var(--rule); }
.t-attr .t-source a:hover { color: var(--brand-light); border-color: var(--brand-light); }

/* Arrows */
.t-nav {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  padding: 0;
}
.t-nav:hover {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}
.t-nav svg { width: 20px; height: 20px; display: block; }

/* Dots */
.t-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: -5px;
}
.t-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0;
  background: var(--rule);
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease, transform 200ms ease;
}
.t-dot:hover { background: var(--ink-muted); }
.t-dot.is-active {
  background: var(--brand-dark);
  transform: scale(1.25);
}

@media (max-width: 900px) {
  .t-stage { grid-template-columns: 44px 1fr 44px; gap: 12px; }
  .t-track { min-height: 280px; }
}
@media (max-width: 720px) {
  .t-stage { grid-template-columns: 36px 1fr 36px; gap: 8px; }
  .t-nav { width: 36px; height: 36px; }
  .t-track { min-height: 320px; }
  .t-attr { padding-left: 0; flex-wrap: wrap; }
}

/* "How we work with founders" — three boxed cards, each click-to-expand
   to reveal full text. Visually mirrors the BoxGroup-style framed
   cards: thin black border, icon top-left, bold title, blurb below. */
.how-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 0.8vw, 12px);
  /* Each card is independent — when one expands the others stay at
     their natural collapsed height. */
  align-items: start;
}

.how-cards > li { display: flex; }

.how-card {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: transparent;
  border: 1px solid var(--ink);
  padding: clamp(14px, 1.5vw, 22px);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
  border-radius: 0;
  /* All cards share the same min-height so they look identical in
     their default (collapsed) state. When one is clicked the expanded
     card grows past this height; the other two stay at min-height. */
  min-height: clamp(220px, 24vw, 280px);
  position: relative;
}

/* Plus sign in the bottom-right corner — rotates 45° when the card
   is expanded, becoming an "x" to signal it can be closed. */
.how-card::after {
  content: "";
  position: absolute;
  right: clamp(10px, 1.2vw, 16px);
  bottom: clamp(10px, 1.2vw, 16px);
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  color: var(--ink);
  transition: transform 220ms ease, color 220ms ease;
}

.how-card:hover::after {
  color: var(--brand-dark);
}

.how-card[aria-expanded="true"]::after {
  transform: rotate(45deg);
  color: var(--brand-dark);
}

.how-card:hover {
  background: var(--bg-deep);
  border-color: var(--brand-dark);
}

.how-card:focus-visible {
  outline: 2px solid var(--brand-light);
  outline-offset: 4px;
}

.how-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(20px, 2.5vw, 36px);
  color: var(--ink);
}

.how-card-icon svg {
  width: clamp(40px, 3.6vw, 50px);
  height: clamp(40px, 3.6vw, 50px);
  display: block;
}

.how-card h3 {
  font-family: var(--brand-font);
  font-size: clamp(20px, 1.7vw, 23px);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--brand-dark);
  margin: 0 0 8px;
}

.how-card-blurb,
.how-card-full {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* By default show only the short blurb; the full text is hidden until
   the card is opened (aria-expanded="true"). */
.how-card-full { display: none; }
.how-card[aria-expanded="true"] .how-card-blurb { display: none; }
.how-card[aria-expanded="true"] .how-card-full { display: block; }

@media (max-width: 1000px) {
  .how-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .how-cards { grid-template-columns: 1fr; gap: 8px; }
  .how-card { min-height: 0; }
  .how-card-icon { margin-bottom: 16px; }
}

/* ================================================================= */
/*   MOBILE NAV — consolidated                                       */
/* ================================================================= */

@media (max-width: 720px) {
  /* Kill backdrop-filter on mobile so .site-header stops being a
     containing block for its fixed descendants. Nav.primary's
     inset:0 will then fill the viewport, not just the header. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
    z-index: 120;
  }

  .nav-toggle { z-index: 130; }

  /* Full-viewport opaque drawer */
  nav.primary {
    z-index: 110;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;  /* dynamic viewport — handles iOS URL bar */
    background: var(--bg);
    transition: transform 360ms cubic-bezier(.2,.85,.15,1),
                visibility 0s linear 360ms;
  }
  nav.primary.is-open {
    transition: transform 360ms cubic-bezier(.2,.85,.15,1),
                visibility 0s linear 0s;
  }

  /* Hero logo constrained on mobile */
  .hero-logo { overflow: visible; }
  .hero-logo-img {
    max-width: min(280px, 78vw);
  }
  .hero-logo .tagline {
    font-size: clamp(18px, 5vw, 24px);
    padding: 0 12px;
    margin-top: 20px;
  }

  /* Backdrop hidden — drawer is full-viewport opaque */
  .nav-backdrop.is-open { display: none; }
}

/* Backdrop element (kept for non-mobile widths if used elsewhere) */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}