/* Swiss/grotesque minimal system */

@font-face {
  font-family: 'InterTight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('InterTight.woff2') format('woff2');
}

:root {
  /* Palette (light — default) */
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #2a2a2a;
  /*--ink-3: #8a8a8a;*/
  --ink-3: #767676;
  --rule: #e6e6e6;
  --accent: #0a0a0a;

  /* Type */
  --font-sans: "InterTight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;*/
  --font-display: "InterTight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Density */
  --pad-x: clamp(32px, 6vw, 120px);
  --pad-y: 32px;
  --gap: 48px;
  --maxw: 1280px;

  /* Sizes */
  --t-micro: 11px;
  --t-body: 16px;
  --t-lede: 20px;
  --t-h3: 22px;
  --t-h2: 34px;
  --t-h1: clamp(44px, 7vw, 88px);
  --t-display: clamp(72px, 14vw, 200px);
}


/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*font-feature-settings: "ss01", "cv11";*/
  letter-spacing: +0.01em;
}
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 600; }

/* ---- Shell ---- */
.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ---- Header ---- */
.site-header {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  font-family: var(--font-display);
  font-size: 32px;
  /*font-weight: 600;*/
  font-weight: 500;
  /*letter-spacing: -0.035em;*/
  letter-spacing: -0.015em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}


/* Nav */
.nav {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav a {
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 60px;
  padding: 20px 0 28px;
  color: var(--ink-2);
  font-size: 13px;
}
.site-footer .shell {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
}

/* ---- Privacy / legal page ---- */
.page-privacy {
  padding: var(--pad-y) 0 0;
}

.privacy-eyebrow { margin: 0 0 32px; }

.page-privacy .article {
  max-width: 68ch;
  margin: 0 auto;
}

.article-title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--ink);
}

.page-privacy .article-byline {
  margin: 0 0 28px;
}

.article-meta-line {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.article-body {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
}
.article-body p {
  margin: 0 0 0.9em;
}
.article-body p:last-child {
  margin-bottom: 0;
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 28px 0 8px;
}
.article-body h2:first-child {
  margin-top: 0;
}

.article-list {
  margin: 0 0 0.9em;
  padding-left: 1.4em;
  color: var(--ink-2);
}
.article-list li {
  margin: 0 0 0.3em;
}

.accent-link {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule);
}
.accent-link:hover {
  text-decoration-color: var(--ink-3);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-contact .label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.footer-contact a {
  font-size: 18px;
  color: var(--ink);
  letter-spacing: 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color 0.15s;
  align-self: start;
}
.footer-contact a:hover { border-bottom-color: var(--ink); }
.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  justify-self: end;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.footer-meta a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.footer-meta a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}
/* ---- Utility / typography ---- */

.eyebrow {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin: 0 0 16px;
  font-weight: 400;     /* NEW */
  line-height: 1.55;    /* NEW */
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; font-weight: 500; }
h1 { font-size: var(--t-h1); line-height: 0.96; letter-spacing: -0.02em; }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.005em; }


/* ---- Page layouts ---- */

/* Home — split */
.page-home {
  padding: var(--pad-y) 0 0;
}
.home-hero {
  display: grid;
  grid-template-columns: 3.5fr 8.5fr;
  gap: var(--gap);
  align-items: start;
  padding-bottom: var(--pad-y);
}
.home-hero .tagline {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}

.home-hero .prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 54ch;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.6;
}
.home-hero .prose p:first-child::first-line {
  color: var(--ink);
}


/* Bio page */
.page-bio { padding: var(--pad-y) 0 0; }
.portrait {
  display: block;
  width: 90%;
  height: auto;
}

.portrait-frame {
  margin: 0;
}

.bio-body {
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: 32px;
  align-items: start;
}

.bio-prose {
  max-width: 56ch;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.6;
}
.bio-prose p + p { margin-top: 1.1em; }

/* Engage page */

/*.page-engage {
  padding: var(--pad-y) 0 0;
  --overview-left: 330px;
  --overview-gap: calc(clamp(32px, 4vw, 64px) - 30px);
  --area-index: 56px;
  --area-divider: 24px;
  --content-max: 720px;
  --engage-section-gap: 12px;
  --solution-grid-offset: 44px;
  --right-content-inset: 24px;
}*/
.page-engage {
  padding: var(--pad-y) 0 0;

  --overview-left: 380px;
  --overview-gap: 34px;

  --area-index: 56px;
  --area-divider: 24px;
  --content-max: 720px;
  --engage-section-gap: 16px;
  --solution-grid-offset: 44px;
  --right-content-inset: 26px;
}

/* ---- Responsive ---- */
@media (max-width: 840px) {
  :root {
    --gap: 32px;
  }
  .home-hero, .bio-body {
    grid-template-columns: 1fr;
  }
  .article-body {              /* ← NEW */
    font-size: 16px;            /* ← NEW */
  }  
  .site-footer .shell {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .site-header {
    position: static;
  }
  .site-header .shell {
    flex-wrap: wrap;
    row-gap: 14px;
  }
  .portrait {
    max-width: 320px;
  }
  .wordmark {
    flex: 0 0 100%;
  }
  .nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 12px 20px;
  }
  .nav a {
    font-size: 14px;
    padding: 10px 4px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .cta-button {
  padding: 14px 24px;
}
}


/* ==== Lavender accents + logo mark ==== */
/*:root { --lav: #8371BB; }*/

/* ==== Lavender + teal accents + logo mark ==== */
/*:root { --lav: #8371BB; }*/
:root {
  --lav-logo: #8371BB;
  --lav-text: #7661B0;
  --lav: var(--lav-logo);

  --teal-logo: #00A6A6;   /* exact logo teal — ~3.0:1 contrast on white */
  --teal-text: #008B8B;   /* slightly darker — ~4.1:1, matches the lavender's AA margin */
  --teal: var(--teal-logo);

  /* === TOGGLE: navigation underline color ===
     Comment one of the two lines below to switch.        */
  /*--nav-accent: var(--lav);  */        /* purple (current)  */
   --nav-accent: var(--teal);    /* teal              */
}

.brand-mark {
  width: 26px;
  height: auto;
  display: block;
  flex: none;
}

/* Eyebrow accent color (page titles: ABOUT, BIO, SOLUTION AREAS, WHY NOW) */
.eyebrow.accent {
  color: var(--lav);
  letter-spacing: 0.18em;
  display: inline-block;
  font-size: 13px;
}
.eyebrow.accent::after {
  content: "";
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--lav);
  margin-top: 10px;
}

/* Nav active underline in lavender */
/*.nav a.active { border-bottom: 2px solid var(--lav); padding-bottom: 2px; }*/
.nav a.active { border-bottom: 2px solid var(--nav-accent); padding-bottom: 2px; }

/* Bio: name + FOUNDER line */
.bio-name {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 500;
  margin: -4px 0 10px;
}
.bio-role {
  color: var(--lav);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 28px;
  font-weight: 500;
}


/* Engage: Reach out CTA button */
.engage-cta-row {
  margin: 20px 0 0;
  padding-left: calc(
    var(--overview-left) + var(--overview-gap) + var(--right-content-inset) +
    var(--area-index) + var(--area-divider) + 36px
  );
  text-align: left;
}

a.accent-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--lav);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness 0.15s ease;
}
a.accent-link:hover {
  text-decoration-thickness: 2.5px;
}

.bio-linkedin {
  margin: 28px 0 0;
}
.linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.linkedin-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.cta-button {
  display: inline-block;
  background: transparent;
  color: var(--lav);
  padding: 12px 22px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  border: 1.5px solid var(--lav);
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.cta-button:hover {
  background: var(--lav);
  color: #ffffff;
}






.engage-list {
  list-style: none;
  margin: var(--engage-section-gap) 0 0;
  padding: 0;
  margin-left: calc(
    var(--overview-left) + var(--overview-gap) + var(--right-content-inset)
  );
  max-width: calc(760px - var(--right-content-inset));
}


/* Detail items: same marker col structure as the header */

.engage-item:first-of-type {
  border-top: 0;
}

.engage-item .engage-item-index {
  grid-area: index;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  color: var(--lav);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0;
  justify-self: end;
}

.engage-item h2 {
  grid-area: head;
  margin: 0;
  padding-left: 0;
  border-left: 0;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.015em;
  font-weight: 600;
  color: var(--ink);
  max-width: var(--content-max);
  align-self: center;
}
.engage-item::before {
  content: "";
  grid-area: divider;
  width: 1.5px;
  height: 22px;
  background: var(--lav);
  justify-self: center;
  align-self: center;
  /*align-self: baseline;
  transform: translateY(2px);*/
}

.engage-item {
  display: grid;
  grid-template-columns: var(--area-index) var(--area-divider) minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 10px;
  grid-template-areas:
    "index divider head"
    ".     .       body";
  /*align-items: baseline;*/
  align-items: start;
  padding: 24px 0 28px;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 96px;
}

.engage-item p {
  grid-area: body;
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
  max-width: 64ch;
}


.footer-contact .label.accent {
  color: var(--lav);
  letter-spacing: 0.22em;
}

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--lav);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness 0.15s ease;
}
.prose a:hover {
  text-decoration-thickness: 2.5px;
}

/* Why Now — article page */
.page-why-now { padding: var(--pad-y) 0 0; --article-measure: 67ch; }
.why-now-eyebrow { margin: 0 0 6px; }

.page-why-now .article {
  max-width: var(--article-measure);
  margin: 0 auto;
}

.page-why-now .article-title {
  font-size: clamp(30px, 4vw, 34px);
  line-height: 1.2;
  /*letter-spacing: -0.025em;*/
  letter-spacing: -0.005em;
  font-weight: 500;
  margin: 0 0 28px;
}

.page-why-now .article-byline {
  margin: 0 0 42px;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-why-now .article-deck {
  margin: 0 0 34px;
  color: var(--ink);
  font-size: clamp(18px, 1.6vw, 18px);
  line-height: 1.48;
  letter-spacing: 0;
  font-weight: 400;
  max-width: 58ch;
}

.page-why-now .article-author {
  color: var(--ink-2);
  font-size: 15px;
  letter-spacing: 0.01em;
}

.page-why-now .article-date {
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-why-now .article-body {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.65;
}
.page-why-now .article-body p { margin: 0 0 1.4em; }
.page-why-now .article-body p:last-child { margin-bottom: 0; }

/* Solution Areas — top overview */

.engage-overview {
  display: grid;
  grid-template-columns: var(--overview-left) minmax(0, 1fr);
  column-gap: var(--overview-gap);
  align-items: start;
  margin: 0 0 var(--engage-section-gap);
}

.engage-intro {
  /*max-width: 280px;*/
  /*max-width: 300px;*/
  max-width: none;
}


.engage-lede {
  margin: 0;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
  max-width: 38ch;
}

/* Solution list */
.solution-grid {
  list-style: none;
  margin: 0 0 0 var(--right-content-inset);
  padding: 0;
  border-top: 0;
  max-width: calc(760px - var(--right-content-inset));
}

@media (min-width: 841px) {
  .solution-grid {
    margin-top: var(--solution-grid-offset);
  }
}

.solution-grid li {
  margin: 0;
  border-bottom: 1px solid var(--rule);
}

.solution-grid li:first-child {
  border-top: 0;
}

.solution-grid a {
  position: relative;
  display: grid;
  grid-template-columns: var(--area-index) var(--area-divider) minmax(0, 1fr) 32px;
  column-gap: 18px;
  align-items: center;
  padding: 12.5px 0;
  color: inherit;
  text-decoration: none;
}

.solution-grid .index {
  justify-self: end;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--lav);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.solution-grid .divider {
  width: 1.5px;
  height: 22px;
  background: var(--lav);
  justify-self: center;
}

.solution-grid .title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 0;
}

.solution-grid .title::before {
  content: none;
}

.solution-grid a::after {
  content: "→";
  justify-self: end;
  color: var(--lav);
  font-size: 18px;
  line-height: 1;
  position: static;
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.solution-grid a:hover .title {
  color: var(--lav);
}

.solution-grid a:hover::after {
  opacity: 1;
  transform: translateX(3px);
}

.solution-grid a:focus-visible {
  outline: 1px solid var(--lav);
  outline-offset: 6px;
}
@media (max-width: 840px) {
  .engage-overview {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .engage-intro {
    max-width: none;
  }

  .engage-lede {
    max-width: none;
  }

  .engage-list {
    margin-left: 0;
    max-width: none;
    margin-top: 40px; 
  }

  .engage-cta-row {
    padding-left: calc(var(--area-index) + var(--area-divider) + 36px);
  }

  .engage-item {
    grid-template-columns: var(--area-index) var(--area-divider) minmax(0, 1fr);
    grid-template-areas:
      "index divider head"
      ".     .       body";
    column-gap: 18px;
    row-gap: 10px;
  }

  .solution-grid {
    margin-left: 0;
    max-width: none;
  }
  .why-now-eyebrow {
    margin: 0 0 24px;
  }
  .footer-contact a {
    padding-top: 13px;
  }
  .footer-meta a {
    padding: 10px 0;
    display: inline-block;
  }
}

@media (max-width: 480px) {
  .page-engage {
    --area-index: 36px;
    --area-divider: 16px;
  }
  .engage-item {
    column-gap: 10px;
  }
  .solution-grid a {
    column-gap: 10px;
  }
  .engage-cta-row {                                                       /* ← NEW */
    padding-left: calc(var(--area-index) + var(--area-divider) + 20px);  /* ← NEW */
  }
}

@media (max-width: 840px) {
  .nav a {
    font-size: 14px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  .nav a.active {
    padding: 10px 12px;
    border-bottom: 2px solid transparent;
    text-decoration: underline;
    /*text-decoration-color: var(--lav);*/
    text-decoration-color: var(--nav-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}

/* Use darker lavender for text only */
.eyebrow.accent,
.bio-role,
.cta-button,
.engage-item .engage-item-index,
.solution-grid .index,
.solution-grid a::after,
.solution-grid a:hover .title {
  color: var(--lav-text);
}

.cta-button {
  border-color: var(--lav-text);
}

.cta-button:hover {
  background: var(--lav-text);
  color: #ffffff;
}

@media (max-width: 840px) {
  .nav { gap: 12px 8px; }
  .nav a,
  .nav a.active {
    font-size: 14px;
    padding: 10px 11px;
    min-width: 44px;
    min-height: 44px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  :root { --pad-x: 28px; }
}