/* Shared styles for the service sheets: /advisory, /projects, /collaboration.
   Everything inside .sheet-page is sized in em, so .sheet-page's font-size
   scales the whole sheet while the nav stays matched to the homepage. */

html { scroll-behavior: smooth; }
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: inherit; font-size: inherit; }
.w-webflow-badge { display: none !important; }
*::selection { color: #f7f0cb; background: #000; }

/* Same viewport-scaled base as index.html and notes.html */
html, body {
  margin: 0;
  padding: 0;
  background-color: #f7f0cb;
  min-height: 100vh;
  font-size: 1vw;
  font-family: TeX Gyre Heros Condensed, sans-serif;
  line-height: 1.1;
  color: #000;
}

/* ---- Nav (mirrors index.html) ---- */
#lb-desktop-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr 20.2em 1fr;
  align-items: center;
  padding: 1.32em;
  /* Opaque so page content scrolls cleanly beneath it, as on the Notes page */
  background-color: #f7f0cb;
}
.lb-nav-left, .lb-nav-right { display: flex; align-items: center; gap: 5em; }
.lb-nav-left { justify-content: flex-start; }
.lb-nav-right { justify-content: flex-end; }
#lb-desktop-nav .nav-logo-center { justify-self: center; }
.lb-nav-link {
  text-transform: uppercase;
  font-family: "TeX Gyre Heros Condensed", sans-serif;
  font-size: .99em;
  line-height: 1.13;
  display: block;
}
.nav-logo-center { display: flex; align-items: center; gap: .84em; }
.nav-logo-svg-little, .nav-logo-svg-business {
  display: block;
  height: 2.621em;
  width: auto;
  flex-shrink: 0;
}

/* ---- Page ---- */
/* Everything below is sized in em, so this one value scales the whole sheet
   proportionally while the nav stays matched to the homepage */
.sheet-page {
  font-size: .82em;
  padding: 8em 3.6em 6em;
  box-sizing: border-box;
}

/* Oversized title in the About label's face, set a step below its size.
   1.02 clears the descenders in "Project" and "Integrated" when titles stack onto
   two lines. The margins offset the extra leading so the block sits where .85 put it. */
.sheet-word {
  font-family: "Larish Alte", sans-serif;
  font-size: 12.4em;
  font-weight: 600;
  line-height: 1.02;
  margin: -.085em 0 .035em -.04em;
}

/* Statement in the homepage hero heading's face, a step smaller; lede matches the capability paragraphs */
.sheet-statement {
  font-family: "ITC Garamond Std", sans-serif;
  font-size: 4.4em;
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 .35em;
  max-width: 11em;
  /* Even line lengths, so a short last word never sits alone */
  text-wrap: balance;
}
.sheet-lede {
  font-size: 2.2em;
  line-height: 1.2;
  margin: 0;
  max-width: 26em;
  text-wrap: pretty;
}

/* ---- Two-column sheet: scope left, offer right ---- */
.sheet-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4em;
  align-items: start;
  margin-top: 4em;
}
/* Section labels: identical to the nav links (.99em at page scale = 1.2em in here) */
.sheet-kicker, .sheet-offer dt {
  font-family: "TeX Gyre Heros Condensed", sans-serif;
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1.13;
  margin: 0;
}
.sheet-kicker { margin-bottom: .8em; }
/* Box heading: Larish Alte, same face as the display title */
.sheet-offer .sheet-kicker {
  font-family: "Larish Alte", sans-serif;
  font-weight: 600;
  text-transform: none;
  font-size: 3.2em;
  line-height: 1;
  margin-bottom: .35em;
}

/* Scope rows: same heading/paragraph pairing as the homepage capabilities list */
.sheet-scope { list-style: none; margin: 0; padding: 0; border-top: 2px solid #000; }
/* Heading column is wide enough for the longest heading on any sheet */
.sheet-scope li {
  display: grid;
  grid-template-columns: 13em 1fr;
  gap: 1em;
  align-items: center;
  border-bottom: 2px solid #000;
  padding: .8em 0;
}
.sheet-scope h3 {
  font-family: "ITC Garamond Std", sans-serif;
  font-size: 2.4em;
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
}
.sheet-scope p {
  font-size: 1.6em;
  line-height: 1.25;
  margin: 0;
  text-wrap: pretty;
}

/* Offer card: same border and radius as the homepage intro boxes */
.sheet-offer {
  position: sticky;
  top: 7em;
  border: 2px solid #000;
  border-radius: .66em;
  padding: 1.1em 1em 1.2em;
}
.sheet-offer dl { margin: 0; }
.sheet-offer .row { padding: .7em 0; }
.sheet-offer .row:last-child { padding-bottom: 0; }
.sheet-offer .row + .row { border-top: 1px solid #000; }
.sheet-offer dt { margin-bottom: .3em; }
/* Values: same treatment as the lede paragraph */
.sheet-offer dd {
  font-size: 2.2em;
  line-height: 1.2;
  margin: 0;
  text-wrap: pretty;
}

/* ---- CTA: same pairing as the homepage contact section ---- */
.sheet-cta {
  margin-top: 4.5em;
  padding-top: 1.4em;
  border-top: 2px solid #000;
}
.sheet-cta h2 {
  font-family: "Larish Alte", sans-serif;
  font-size: 4.8em;
  font-weight: 600;
  line-height: .91;
  margin: 0 0 .25em;
  text-wrap: balance;
}
.sheet-cta a {
  font-size: 3.2em;
  line-height: 1;
  word-break: break-all;
}
.sheet-cta a:hover { text-decoration: underline; }
.sheet-cta p {
  font-size: 1.6em;
  line-height: 1.25;
  margin: 1em 0 0;
  max-width: 28em;
}

/* ---- Links to the other sheets, in the nav link style ---- */
.sheet-more {
  display: flex;
  flex-wrap: wrap;
  gap: .6em 2.5em;
  margin-top: 5em;
  padding-top: 1em;
  border-top: 2px solid #000;
  font-family: "TeX Gyre Heros Condensed", sans-serif;
  text-transform: uppercase;
  font-size: 1.2em;
  line-height: 1.13;
}
/* Muted label, same treatment as the dates on the Notes page */
.sheet-more span { opacity: .6; }
.sheet-more a:hover { text-decoration: underline; }

/* ---- Responsive ----
   The viewport-scaled base shrinks at each breakpoint, so headings step down with it
   while small copy and labels step up to stay readable. */
@media screen and (max-width: 991px) {
  html, body { font-size: 1.25vw; }
  .sheet-page { padding-top: 9em; }
  .sheet-word { font-size: 9.4em; }
  .sheet-columns { grid-template-columns: 1fr; gap: 3em; }
  .sheet-scope li { grid-template-columns: 1fr; gap: .2em; }
  .sheet-offer { position: static; }
  .sheet-kicker, .sheet-offer dt, .sheet-more { font-size: 1.4em; }
  .sheet-scope p, .sheet-cta p { font-size: 1.9em; }
}
@media screen and (max-width: 767px) {
  html, body { font-size: 2vw; }
  #lb-desktop-nav { grid-template-columns: 1fr auto 1fr; }
  .lb-nav-left, .lb-nav-right { display: none; }
  .nav-logo-svg-little, .nav-logo-svg-business { height: 2em; }
  .sheet-page { padding: 8.5em 2.5em 5em; }
  .sheet-word { font-size: 6em; }
  .sheet-statement { font-size: 3.5em; }
  .sheet-lede, .sheet-offer dd { font-size: 1.9em; }
  .sheet-scope p, .sheet-cta p { font-size: 1.7em; }
  .sheet-kicker, .sheet-offer dt, .sheet-more { font-size: 1.3em; }
  .sheet-offer .sheet-kicker { font-size: 2.8em; }
  .sheet-cta h2 { font-size: 3.8em; }
  .sheet-cta a { font-size: 2.6em; }
}
@media screen and (max-width: 479px) {
  html, body { font-size: 3.5vw; }
  #lb-desktop-nav { padding: .76em; }
  .nav-logo-svg-little, .nav-logo-svg-business { height: 1.6em; }
  .sheet-page { padding: 6.5em 1.75em 4em; }
  .sheet-word { font-size: 3.7em; }
  .sheet-statement { font-size: 2.6em; }
  /* One size for everything a lead actually reads on a phone */
  .sheet-lede, .sheet-scope p, .sheet-offer dd, .sheet-cta p { font-size: 1.5em; }
  .sheet-kicker, .sheet-offer dt, .sheet-more { font-size: 1.2em; }
  .sheet-columns { margin-top: 3em; gap: 2.5em; }
  .sheet-scope li { padding: 1em 0; gap: .3em; }
  .sheet-scope h3 { font-size: 2em; }
  .sheet-offer { padding: 1.2em 1.1em; }
  .sheet-offer .sheet-kicker { font-size: 2.2em; }
  .sheet-cta { margin-top: 4em; }
  .sheet-cta h2 { font-size: 2.9em; }
  /* Taller tap target; the negative margin keeps the text where it was */
  .sheet-cta a { font-size: 2.2em; display: inline-block; padding: .3em 0; margin: -.3em 0; }
  /* Footer stacks into thumb-sized rows instead of wrapping mid-line */
  .sheet-more { flex-direction: column; gap: 0; margin-top: 3.5em; padding-top: .3em; }
  .sheet-more span, .sheet-more a { padding: 1em 0; }
}