/* ============================================================
   Silver Lake Waterman, Website (multi-page)
   Shared styles. Links ../styles.css for tokens first.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-sans); color: var(--text-primary);
  background: var(--surface-page); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
a { color: var(--slw-blue); text-decoration: none; }
a:hover { color: var(--slw-blue-ocean); }
img { max-width: 100%; }

/* ---- Scroll progress ---- */
.scroll-bar { position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--slw-blue), var(--slw-teal));
  transform: scaleX(0); transform-origin: 0 50%; z-index: 200; transition: transform 90ms linear; }

/* ============ HEADER / NAV ============ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150; height: 76px;
  background: rgba(255,255,255,0.74); backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  /* the hairline is an inset shadow, not a border: a border would come out of
     the 76px box and leave everything inside it sitting on a half pixel */
  box-shadow: inset 0 -1px 0 transparent;
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
/* The bar sits bare over the top of a page and earns its edge once the page
   starts moving underneath it. */
.site-header.scrolled {
  background: rgba(255,255,255,0.94);
  box-shadow: inset 0 -1px 0 var(--slw-gray-200), 0 1px 14px rgba(11,38,71,0.055);
}
/* Same measure and gutter as .wrap, so the mark lines up with the copy below
   it rather than floating out in the page margin. */
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; width: 100%; max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-gutter);
}
.site-header .logo { display: flex; align-items: center; }
/* The mark is Proxima Nova Bold at default tracking — matched against the
   original artwork at 0.976 IoU, with the ink aspect 2.8225 against its 2.8306
   — so it is set as live type rather than shipped as a picture of type.
   43.5px puts the ink at the 30px the image occupied; the nudge centres the
   glyphs in the bar rather than the line box they sit in. */
.site-header .logo-type { display: block; font-family: var(--font-sans);
  font-weight: var(--weight-bold); font-size: 43.5px; line-height: 1;
  letter-spacing: 0; color: #008CC6; transform: translateY(-0.5px); }
.nav { display: flex; align-items: center; gap: 0; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 26px clamp(0.55rem, 1.05vw, 0.95rem);
  font-size: 0.9375rem; font-weight: var(--weight-medium); letter-spacing: 0.004em;
  color: var(--slw-navy-deep); cursor: pointer; background: none; border: 0;
  font-family: inherit; white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.nav-link:hover { color: var(--slw-blue); }
/* The page you are on holds the dark colour and takes weight and a rule,
   rather than going pale blue like a link you have not visited. */
.nav-item.active > .nav-link { color: var(--slw-navy-deep); font-weight: var(--weight-semibold); }
.nav-link .caret { width: 8px; height: 8px; opacity: 0.45; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.nav-link:hover .caret, .nav-item.open .caret, .nav-item.active .caret { opacity: 1; }
.nav-item.open .nav-link .caret { transform: rotate(180deg); }
.nav-item.active > .nav-link::after {
  content: ""; position: absolute;
  left: clamp(0.55rem, 1.05vw, 0.95rem); right: clamp(0.55rem, 1.05vw, 0.95rem);
  bottom: 21px; height: 2px; border-radius: 1px; background: var(--slw-blue);
}
.dropdown {
  position: absolute; top: 68px; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 210px; background: #fff; border: 1px solid var(--slw-gray-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav-item:hover .dropdown, .nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: block; padding: 11px 14px; border-radius: var(--radius-md);
  font-size: 0.9rem; font-weight: var(--weight-semibold); color: var(--slw-ink); }
.dropdown a:hover { background: var(--slw-blue-mist); color: var(--slw-blue-mid); font-weight: var(--weight-semibold); }
.nav-cta {
  margin-left: clamp(0.9rem, 1.8vw, 1.75rem); padding: 11px 22px;
  border-radius: var(--radius-pill); background: var(--slw-blue-mid);
  color: #fff !important; font-size: 0.875rem; font-weight: var(--weight-semibold);
  letter-spacing: 0.012em; box-shadow: 0 1px 2px rgba(11,38,71,0.10);
  transition: background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav-cta:hover { background: var(--slw-blue-navy); color: #fff !important;
  box-shadow: 0 5px 16px rgba(11,38,71,0.17); transform: translateY(-1px); }
.nav-toggle { display: none; }
@media (max-width: 1080px) {
  .nav { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--slw-gray-200);
    padding: 8px var(--container-gutter) 24px;
    transform: translateY(-120%); transition: transform var(--dur-base) var(--ease-out); max-height: calc(100vh - 76px); overflow:auto; }
  .site-header.nav-open .nav { transform: none; }
  .nav-link { padding: 15px 0; font-size: 1rem; }
  /* the pill is a row of its own down here, not something trailing the list */
  .nav-cta { margin: 18px 0 6px; text-align: center; }
  .nav-item.active > .nav-link::after { display: none; }
  .dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
    border: 0; border-left: 2px solid var(--slw-blue-mist); border-radius: 0; padding: 0 0 8px 12px; min-width: 0; margin: -4px 0 8px; display: none; }
  .nav-item.open .dropdown { display: block; transform: none; }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
  .nav-toggle span { width: 24px; height: 2px; background: var(--slw-navy-deep); display: block; border-radius: 1px; }
}

/* ============ LAYOUT ============ */
main { display: block; }
.wrap { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-gutter); }
.section { padding: var(--section-pad-y) 0; }
.section-tint { background: var(--surface-subtle); }
.section-mist { background: linear-gradient(180deg, #fff 0%, var(--slw-blue-mist) 100%); }

/* full-viewport hero + panels */
.panel { position: relative; min-height: 92vh; display: flex; align-items: center;
  padding: clamp(6rem, 10vh, 9rem) 0 var(--section-pad-y); }
.panel-inner { width: 100%; max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-gutter); }
.split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split.rev { grid-template-columns: 1.08fr 0.92fr; }
.split.rev .copy { order: 2; }
@media (max-width: 900px) { .split, .split.rev { grid-template-columns: 1fr; gap: 2.5rem; } .split.rev .copy { order: 0; } }

/* page hero (shorter than homepage hero) */
.page-hero { padding-top: clamp(8rem, 16vh, 12rem); padding-bottom: var(--section-pad-y); }
.page-hero .lead { max-width: 60ch; }
/* On the portfolio page the wall is the content, not a separate section, so
   it sits nearer the line above it than a full section break would allow. */
body[data-page="portfolio"] .page-hero { padding-bottom: clamp(2rem, 4vw, 3.75rem); }

/* ============ COPY ============ */
/* An eyebrow is a label, not a second headline: 17px uppercase was competing
   with the display type above it. */
.kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 0.875rem;
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  color: var(--slw-blue-mid); margin: 0 0 20px; }
.kicker .kmark { width: 26px; height: 10px; overflow: visible; flex: none; }
.kicker .kmark path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  vector-effect: non-scaling-stroke; transform: scaleY(0.04); transform-box: fill-box; transform-origin: center;
  transition: transform 0.5s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { .kicker:hover .kmark path { transform: scaleY(1); } }
h1.head { font-size: var(--text-display-xl); }
h2.head { font-size: var(--text-display-lg); }
h3.head { font-size: var(--text-display-md); }
.head { font-weight: var(--weight-light); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight);
  color: var(--slw-ink); margin: 0 0 22px; text-wrap: balance; }
.head em, .head strong { font-style: normal; font-weight: var(--weight-semibold); color: var(--slw-blue-mid); }
.lead { font-size: var(--lead-size); line-height: 1.6; color: var(--slw-ink);
  font-weight: var(--weight-light); max-width: 48ch; margin: 0 0 30px; }
.prose { max-width: 68ch; }
.prose p { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--slw-ink); margin: 0 0 20px; }
.prose strong { color: var(--slw-ink); font-weight: var(--weight-semibold); }
.cta { display: inline-flex; align-items: center; gap: 9px; font-weight: var(--weight-semibold);
  font-size: var(--text-small); letter-spacing: 0.02em; color: var(--slw-blue-mid);
  transition: color var(--dur-base) var(--ease-out); }
.cta:hover { color: var(--slw-blue-ocean); }
.cta svg { position: relative; top: 1px; transition: transform var(--dur-base) var(--ease-out); }
.cta:hover svg { transform: translateX(5px); }

/* ============ REVEAL + GRAPHIC SYSTEM ============ */
[data-animate] .rise { opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-animate].in .rise { opacity: 1; transform: none; }
[data-animate].in .rise:nth-child(2) { transition-delay: 90ms; }
[data-animate].in .rise:nth-child(3) { transition-delay: 180ms; }
[data-animate].in .rise:nth-child(4) { transition-delay: 270ms; }
[data-animate].in .rise:nth-child(5) { transition-delay: 360ms; }
.fig { width: 100%; height: auto; overflow: visible; }
.draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset var(--dur-draw) var(--ease-out); }
[data-animate].in .draw { stroke-dashoffset: 0; }
.fade { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
[data-animate].in .fade { opacity: 1; }
.pop { opacity: 0; transform: scale(0.4); transform-box: fill-box; transform-origin: center;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
[data-animate].in .pop { opacity: 1; transform: none; }
.fill-in { opacity: 0; transition: opacity var(--dur-draw) var(--ease-out); transition-delay: 500ms; }
[data-animate].in .fill-in { opacity: 1; }
.lbl-svg { font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: 0.02em; }
.lbl-mut { fill: var(--slw-gray-500); } .lbl-blue { fill: var(--slw-blue); } .lbl-slate { fill: var(--slw-slate); }
.lbl-cap { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--weight-semibold); }
.pulse { offset-rotate: 0deg; }
@media (prefers-reduced-motion: no-preference) { [data-animate].in .pulse { animation: travel 6s var(--ease-in-out) 1.4s infinite; } }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.glow-hero { position: absolute; inset: -10% -10% auto -10%; height: 90%; background: var(--glow-blue); pointer-events: none; z-index: 0; }
.panel-inner, .copy, .figwrap { position: relative; z-index: 1; }

/* ============ STATS / PILLARS / GRIDS ============ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; gap: 2.5rem; } }
.stat .fig-num { font-size: var(--text-stat); font-weight: var(--weight-light); color: var(--slw-slate); line-height: 1; letter-spacing: -0.02em; }
.stat .fig-num b { font-weight: var(--weight-semibold); color: var(--slw-blue); }
.stat .fig-lbl { margin-top: 12px; font-size: var(--text-small); color: var(--text-secondary); }
.stat .rule { width: 40px; height: 2px; background: var(--slw-blue); margin-top: 18px; opacity: 0.5; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }
.pcard { background: #fff; border: var(--border-card); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); }
.pcard .motif { width: 120px; height: 60px; display: block; overflow: visible; }
.pcard h3 { font-size: var(--text-title); font-weight: var(--weight-semibold); color: var(--slw-slate); margin: 16px 0 10px; }
.pcard p { font-size: var(--text-small); line-height: var(--leading-normal); color: var(--slw-ink); margin: 0; }

.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: 0.04em;
  color: var(--slw-blue-navy); background: var(--slw-blue-mist); padding: 7px 14px; border-radius: var(--radius-pill); }

.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--slw-gray-200);
  border: 1px solid var(--slw-gray-200); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 820px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
.logo-grid .cell { background: #fff; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 20px; }
.logo-grid img { max-width: 100%; max-height: 40px; object-fit: contain; opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-animate].in .logo-grid img { opacity: 0.72; transform: none; }
.logo-grid .cell:hover img { opacity: 1; }

.insights { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 820px) { .insights { grid-template-columns: 1fr; } }
.icard { border: var(--border-card); border-radius: var(--radius-lg); padding: 32px; background: #fff; box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); display: block; }
.icard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.icard .etype { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.14em; color: var(--slw-blue); font-weight: var(--weight-semibold); }
.icard h3 { font-size: var(--text-title); font-weight: var(--weight-regular); color: var(--slw-slate); margin: 14px 0 0; line-height: var(--leading-snug); }
.icard .arrow { margin-top: 22px; color: var(--slw-blue); display: inline-flex; }

.callout { display: flex; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; margin: 4px 0 30px; padding: 22px 28px; background: var(--slw-blue-mist); border-radius: var(--radius-lg); }
.callout .cn { font-size: 1.8rem; font-weight: var(--weight-light); color: var(--slw-ink); line-height: 1; }
.callout .cn b { font-weight: var(--weight-semibold); color: var(--slw-blue-mid); }
.callout .cl { font-size: var(--text-caption); color: var(--slw-ink); margin-top: 7px; max-width: 18ch; }

/* reusable soft CTA box (e.g. "explore case studies") */
.cta-box { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 24px 30px; background: var(--slw-blue-mist); border-radius: var(--radius-lg); color: var(--slw-slate);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.cta-box:hover { background: var(--slw-blue-pale); color: var(--slw-slate); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cta-box .eyebrow { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.14em; font-weight: var(--weight-semibold); color: var(--slw-blue-mid); margin-bottom: 6px; }
.cta-box .t { font-size: var(--text-title); font-weight: var(--weight-regular); color: var(--slw-ink); line-height: var(--leading-snug); }
.cta-box .arrow { color: var(--slw-blue-mid); flex: none; display: inline-flex; transition: transform var(--dur-base) var(--ease-out); }
.cta-box:hover .arrow { transform: translateX(5px); }

.tf { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-top: 26px; }
@media (max-width: 980px) { .tf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .tf { grid-template-columns: 1fr; } }
.tf .col { padding: 20px 22px; border-radius: var(--radius-md); }
.tf .today { background: var(--slw-blue-mist); } .tf .future { background: var(--slw-gray-100); }
.tf .lab { font-size: var(--text-kicker); text-transform: uppercase; letter-spacing: 0.14em; font-weight: var(--weight-semibold); color: var(--slw-blue-mid); margin-bottom: 8px; }
.tf .future .lab { color: var(--slw-ink); }
.tf p { margin: 0; font-size: var(--text-small); color: var(--slw-ink); line-height: var(--leading-normal); }
.tf .outcome { background: var(--slw-blue-navy); position: relative; }
@media (max-width: 980px) { .tf .outcome { grid-column: 1 / -1; } }
.tf .outcome .lab { color: var(--slw-blue-sky); display: flex; align-items: center; gap: 6px; }
.tf .outcome .lab::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--slw-blue-sky); flex: none; }
.tf .outcome p { color: var(--slw-white); }

/* generic card grid for firm/values/people */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }
.vcard { background: #fff; border: var(--border-card); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.vcard .n { font-size: 1.6rem; font-weight: var(--weight-light); color: var(--slw-blue-mid); }
.vcard h3 { font-size: var(--text-title); font-weight: var(--weight-semibold); color: var(--slw-ink); margin: 8px 0 10px; }
.vcard p { font-size: var(--text-small); line-height: var(--leading-normal); color: var(--slw-ink); margin: 0; }


/* timeline (history) */
/* The spine is drawn per event rather than down the whole column, so it ends
   at the last dot instead of running on past Today into empty space. */
.tl { position: relative; }
.tl .ev { position: relative; padding: 0 0 38px 34px; }
.tl .ev:last-child { padding-bottom: 0; }
.tl .ev::before { content: ""; position: absolute; left: 0; top: 2px;
  width: 13px; height: 13px; border-radius: 50%; background: var(--slw-blue);
  box-shadow: 0 0 0 4px var(--slw-blue-mist); }
/* starts clear of its own dot's ring and runs to the top of the next one */
.tl .ev::after { content: ""; position: absolute; left: 5.5px; top: 24px; bottom: -2px;
  width: 2px; background: var(--slw-blue-pale); }
.tl .ev:last-child::after { content: none; }
/* the same eyebrow treatment every other small blue label on the site gets */
.tl .yr { font-weight: var(--weight-semibold); color: var(--slw-blue-mid);
  font-size: 0.8125rem; letter-spacing: var(--tracking-kicker); text-transform: uppercase; }
.tl h3 { margin: 7px 0 8px; font-size: var(--text-title);
  font-weight: var(--weight-regular); color: var(--slw-slate); }
.tl p { margin: 0; font-size: var(--text-small); color: var(--text-secondary);
  line-height: var(--leading-normal); max-width: 56ch; }

/* contact form */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 640px; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-size: var(--text-caption); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--slw-gray-500); margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--slw-gray-300);
  border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-body); color: var(--slw-slate); background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--slw-blue); box-shadow: 0 0 0 3px var(--focus-ring); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: var(--radius-pill);
  background: var(--slw-blue-mid); color: #fff; font-weight: var(--weight-semibold); border: 0; font-family: inherit;
  font-size: var(--text-small); cursor: pointer; transition: background var(--dur-base) var(--ease-out); }
.btn:hover { background: var(--slw-blue-navy); color: #fff; }

/* ============ FOOTER ============ */
.site-footer { background: var(--slw-navy-deep); color: rgba(255,255,255,0.74);
  padding: clamp(2.75rem,5vw,4.25rem) 0 1.75rem; }
/* The columns size to their own content and sit together at the left, so the
   block reads as one tight group rather than four columns stretched over the
   full measure. The rule above the legal line still spans it. */
.foot-top { display: grid; grid-template-columns: auto auto auto;
  justify-content: start; gap: 2rem clamp(3rem, 6vw, 6rem); }
.foot-brand { max-width: 26ch; }
/* narrow: the brand takes a row of its own and the two link columns sit
   side by side, rather than the whole thing stacking into a tall strip */
@media (max-width: 720px) {
  .foot-top { grid-template-columns: auto auto; gap: 1.75rem clamp(2.5rem, 12vw, 4rem); }
  .foot-brand { grid-column: 1 / -1; }
}
.site-footer h4 { color: #fff; font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: 0.16em; font-weight: var(--weight-semibold); margin: 0 0 12px; }
.site-footer a { display: block; color: rgba(255,255,255,0.74); font-size: var(--text-small);
  font-weight: var(--weight-light); padding: 4px 0; transition: color var(--dur-base) var(--ease-out); }
.site-footer a:hover { color: #fff; }
.site-footer .brand { font-size: 1.5rem; font-weight: var(--weight-bold); color: #fff;
  letter-spacing: 0.02em; line-height: 1; }
.site-footer .tagline { font-size: var(--text-small); font-weight: var(--weight-light);
  margin-top: 12px; line-height: var(--leading-normal); color: rgba(255,255,255,0.72); }
.site-footer .legal { border-top: 1px solid rgba(255,255,255,0.16);
  margin-top: clamp(2rem, 3.5vw, 2.75rem); padding-top: 1.25rem;
  font-size: var(--text-caption); font-weight: var(--weight-light);
  color: rgba(255,255,255,0.5); line-height: var(--leading-normal); }

/* ============ FLOATING CTA (site-wide, bottom-right) ============ */
.float-cta { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 140;
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: var(--radius-pill);
  background: var(--slw-slate); color: #fff; font-weight: var(--weight-semibold); font-size: var(--text-small);
  box-shadow: var(--shadow-lg); transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.float-cta:hover { background: var(--slw-blue); color: #fff; transform: translateY(-2px); }
@media (max-width: 640px) { .float-cta { padding: 11px 16px; font-size: var(--text-caption); } }

/* ============ HOMEPAGE EDGE RAIL (right edge, links to Why SLW) ============ */
.edge-rail { position: fixed; top: 50%; right: 0; z-index: 130; transform: translateY(-50%) translateX(0);
  display: flex; align-items: center; background: var(--slw-blue); color: #fff; border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 16px 10px; box-shadow: var(--shadow-md); opacity: 1; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.edge-rail span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--text-caption); font-weight: var(--weight-semibold);
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.edge-rail:hover { background: var(--slw-blue-ocean); }
@media (max-width: 900px) { .edge-rail { display: none; } }

/* ============================================================
   HOMEPAGE HERO
   Matches the investor deck's typographic system: Proxima Nova
   Light carries the line, Semibold marks the one phrase that
   matters. Colour stays structural — the eyebrow, the CTA rule
   and the diagram — so emphasis reads as weight, not hue,
   exactly as it does on the slides.
   ============================================================ */
.panel.hero { align-items: center;
  /* exactly one screen: the tinted section below must not show under the fold */
  min-height: 100vh; min-height: 100dvh;
  /* +4.75rem on top: the site header is position:fixed and overlays the hero,
     so true centring has to discount the height it covers. */
  padding-block: calc(clamp(5rem, 9vh, 7rem) + 4.75rem) clamp(5rem, 9vh, 7rem); }
.hero-split { display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }

/* deck-style outlined eyebrow */
.eyebrow { display: inline-block; padding: 8px 18px 7px;
  border: 1px solid var(--slw-blue-pale); border-radius: 999px;
  font-size: var(--text-kicker); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  color: var(--slw-blue); background: var(--slw-white); margin: 0 0 30px; }

.hero-head { font-size: clamp(2.5rem, 4.6vw, 4rem); font-weight: var(--weight-light);
  line-height: 1.03; letter-spacing: -0.028em; color: var(--slw-ink);
  margin: 0 0 26px; }
.hero-head strong { font-weight: var(--weight-semibold); color: var(--slw-blue-mid); }

.hero-lead { font-size: var(--lead-size); font-weight: var(--weight-light);
  line-height: 1.62; color: var(--slw-ink); max-width: 44ch; margin: 0 0 34px; }
.hero-lead strong { font-weight: var(--weight-semibold); }

.hero-cta { display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--text-small); font-weight: var(--weight-semibold);
  letter-spacing: 0.02em; color: var(--hero-accent);
  transition: color var(--dur-base) var(--ease-out); }
.hero-cta:hover { color: var(--slw-blue-ocean); }
.hero-cta svg { position: relative; top: 1px; /* shaft sits between the cap-height and x-height centres */
  transition: transform var(--dur-base) var(--ease-out); }
.hero-cta:hover svg { transform: translateX(5px); }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: 2.75rem; }
  .panel.hero { padding-block: clamp(4.5rem, 10vh, 6rem) 3rem; }
  .hero-lead { max-width: 100%; }
}

/* Phase labels under the hero chart — set like the deck's section heads
   ("ORIGINAL INVESTMENT" / "FOLLOW ON"): wide tracking, regular weight, ink. */
.lbl-phase { font-family: var(--font-sans); font-size: 11px; font-weight: var(--weight-regular);
  text-transform: uppercase; letter-spacing: 0.18em; fill: var(--slw-ink); }

/* Touchpoint marks, set like the SLW wordmark: heavier, tight, logo blue. */
.lbl-slw { font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-bold);
  letter-spacing: 0.01em; fill: var(--slw-blue); }

/* ============================================================
   BY THE NUMBERS
   Open three-up, no rules — the figures carry it. No tabular
   figures here on purpose: Proxima pads a "1" by ~76% of its
   width to match a "0", which opens a visible gap in "$1.5B".
   The count-up jitters very slightly without them; the gap at
   rest is the worse of the two.
   ============================================================ */
.section-eyebrow { font-size: 0.875rem; font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--slw-blue-mid);
  margin: 0 0 20px; }
.section-lead { font-size: var(--lead-size); font-weight: var(--weight-light);
  line-height: 1.6; color: var(--slw-ink); max-width: 72ch; margin: 0; text-wrap: balance; }
.section-lead strong { font-weight: var(--weight-semibold); }

.stats-band { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(3.25rem, 6vw, 5rem); }
.stats-band .stat .fig-num { font-size: var(--text-stat); line-height: 1; letter-spacing: -0.025em; }
.stats-band .stat .fig-num b { font-weight: var(--weight-semibold); color: var(--slw-blue-mid); }
.stats-band .stat .fig-lbl { margin-top: 12px; font-size: var(--text-body);
  font-weight: var(--weight-regular); color: var(--slw-ink); line-height: 1.5; }

@media (max-width: 720px) { .stats-band { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Both lead paragraphs — hero and section — read from one value so they
   can't drift apart. Bumped up from 1.3125rem. */
:root { --lead-size: clamp(1.1875rem, 1.4vw, 1.375rem); }

/* Accent for the hero and the stats band. One line switches every
   blue in both sections:
     var(--slw-blue)      #0093D0  logo blue — the "no innovation" emphasis
     var(--slw-blue-mid)  #297DB3  the deeper mid blue
   ------------------------------------------------------------ */
:root { --hero-accent: var(--slw-blue); }

/* ============================================================
   SECTION FORMATTING
   Same system as the hero and the stats band: Light carries the
   line, Semibold marks the phrase that matters, colour stays
   structural. The hero uses the bright logo blue; everything
   below it uses the deeper #297DB3.
   ============================================================ */
.section-head { font-size: var(--text-display-lg); font-weight: var(--weight-light);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight);
  color: var(--slw-ink); margin: 0 0 22px; }
.section-head em, .section-head strong { font-style: normal;
  font-weight: var(--weight-semibold); color: var(--slw-blue-mid); }

.section-cta { display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--text-small); font-weight: var(--weight-semibold);
  letter-spacing: 0.02em; color: var(--slw-blue-mid);
  transition: color var(--dur-base) var(--ease-out); }
.section-cta:hover { color: var(--slw-blue-ocean); }
.section-cta svg { position: relative; top: 1px;
  transition: transform var(--dur-base) var(--ease-out); }
.section-cta:hover svg { transform: translateX(5px); }

/* section lead inside a split column needs a tighter measure than a full-width one */
.split .section-lead, .copy .section-lead { max-width: 46ch; }
.copy .section-lead { margin-bottom: 30px; }


/* Problem section: the diagram is the point, so it takes the wider column. */
@media (min-width: 901px) { .split.split-figwide { grid-template-columns: 1.18fr 0.82fr; } }
/* ...and the mirror of it, for a section whose figure sits on the right.
   A section can retune the divide with --copy-col / --fig-col when its copy
   reads better narrow and its figure wants the width. */
@media (min-width: 901px) {
  .split.split-figwide-end { grid-template-columns: var(--copy-col, 0.82fr) var(--fig-col, 1.18fr); }
}

/* ------------------------------------------------------------
   A/B/Cs diagram — slide 9 of the 3.24.26 deck, rendered.
   viewBox units are the slide image's own pixels.
   ------------------------------------------------------------ */
.abc-fig text { font-family: var(--font-sans); }
.abc-ring  { font-size: 22px; font-weight: var(--weight-regular); fill: var(--slw-ink); letter-spacing: 0.01em; }
.abc-pct   { font-size: 32px; font-weight: var(--weight-regular); fill: var(--slw-ink); }
.abc-repeat{ font-size: 31px; font-weight: var(--weight-bold);    fill: #0897A2; letter-spacing: 0.01em; }
.abc-round { font-size: 36px; font-weight: var(--weight-bold);    fill: #fff; }
.abc-exit  { font-size: 30px; font-weight: var(--weight-bold);    fill: #fff; letter-spacing: 0.01em; }
.abc-phase { font-size: 26px; font-weight: var(--weight-regular); fill: var(--slw-ink); letter-spacing: 0.12em; }
.abc-tag   { font-size: 14px; font-weight: var(--weight-bold);    fill: var(--slw-ink); }

/* ------------------------------------------------------------
   Flex cost-of-capital chart — slide 14 of the 3.24.26 deck.
   ------------------------------------------------------------ */
.flex-fig text { font-family: var(--font-sans); }
.flex-ytick  { font-size: 24px; font-weight: var(--weight-semibold); fill: var(--slw-ink); }
.flex-xtick  { font-size: 24px; font-weight: var(--weight-regular);  fill: var(--slw-gray-500); }
.flex-axis   { font-size: 31px; font-weight: var(--weight-semibold); fill: var(--slw-ink); }
.flex-point  { font-size: 27px; font-weight: var(--weight-regular);  fill: var(--slw-gray-700); }
.flex-end    { font-size: 26px; font-weight: var(--weight-semibold); fill: var(--slw-ink); }
.flex-glyph  { font-size: 38px; font-weight: var(--weight-bold); font-style: italic; fill: #fff; }
.flex-note   { font-size: 23px; font-weight: var(--weight-semibold); fill: var(--slw-slate); letter-spacing: 0.02em; }
.flex-savings{ font-size: 15px; font-weight: var(--weight-semibold); fill: #fff; letter-spacing: 0.14em; }

/* ============================================================
   SELECT PORTFOLIO
   An open wall rather than a boxed grid. Fifteen marks fill three
   rows of five exactly, so there is no ragged last row. They keep
   their own colours; hover lifts and softens them slightly so the
   grid still responds to the pointer.
   ============================================================ */
/* a heading on the left with its supporting line on the right */
.split-head { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 5vw, 4.5rem); align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
/* the supporting line carries a bottom margin of its own, which pushed its text
   up off the heading's baseline once the row was bottom-aligned */
.split-head > p { margin-bottom: 0; }
@media (max-width: 880px) { .split-head { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; } }

/* the supporting line sits in the right column; an even split gives it about
   500px, and it needs roughly 480px to hold two lines at the largest size the
   type clamps to. Balanced, so the two come out even. */
.port-stat { max-width: 34rem; margin: 0; text-wrap: balance; }
.port-stat strong { font-weight: var(--weight-semibold); color: var(--slw-blue-mid); }

.logo-wall { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(2.5rem, 4.5vw, 4rem) clamp(2rem, 3.5vw, 3.25rem); }
/* the cell carries the box, so a logo works with or without a link round it */
.logo-wall li, .logo-wall a { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 64px; border-radius: var(--radius-sm); }
.logo-wall img { max-width: 88%; max-height: 54px; object-fit: contain;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.logo-wall a:hover img, .logo-wall a:focus-visible img { transform: translateY(-4px); opacity: .82; }

/* reveal sweeps column by column rather than all at once */
[data-animate] .logo-wall li { opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-animate].in .logo-wall li { opacity: 1; transform: none; }
.logo-wall li:nth-child(5n+1) { transition-delay: 0ms }
.logo-wall li:nth-child(5n+2) { transition-delay: 70ms }
.logo-wall li:nth-child(5n+3) { transition-delay: 140ms }
.logo-wall li:nth-child(5n+4) { transition-delay: 210ms }
.logo-wall li:nth-child(5n+5) { transition-delay: 280ms }

@media (max-width: 1040px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .logo-wall { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .logo-wall li { transition: none; transition-delay: 0s !important; } }

/* These files differ wildly in how much of their canvas the mark actually fills
   — 22% for Nex, 33% for Postscript, 100% for UJET — so one max-height renders
   some as specks and others oversized. Measured the ink in each and tuned the
   cap per file so every mark lands near 30px of visible height. */
/* Cap tuned per file against its measured ink ratio — the share of the canvas
   the mark actually fills, which runs from 22% (Nex) to 100% (Hammerspace).
   A single max-height renders some as specks and others oversized. */
.logo-wall img[src$="nex.png"]        { max-height: 130px; }
.logo-wall img[src$="postscript.png"] { max-height: 94px; }
.logo-wall img[src$="hypr.png"]       { max-height: 79px; }
.logo-wall img[src$="verkada.png"]    { max-height: 64px; }
.logo-wall img[src$="alembic.png"]    { max-height: 56px; }
.logo-wall img[src$="wander.png"]     { max-height: 56px; }
.logo-wall img[src$="netomi.png"]     { max-height: 53px; }
.logo-wall img[src$="ujet.png"]       { max-height: 34px; }
.logo-wall img[src$="bonusly.jpg"]    { max-height: 32px; }
.logo-wall img[src$="paragon.png"]    { max-height: 34px; }
.logo-wall img[src$="tapcart.png"]    { max-height: 34px; }
.logo-wall img[src$="rinsed.jpg"]     { max-height: 34px; }

/* Closing CTA is centred, so its lead needs to centre too rather than
   inherit the left-aligned measure the split columns use. */
.section-mist .section-lead { margin-left: auto; margin-right: auto; max-width: 54ch; }

/* ============================================================
   SITE-WIDE SYSTEM
   The global .kicker / .head / .lead / .cta classes carry the
   treatment built on the homepage, so every page inherits it.
   ============================================================ */
.kicker .kmark { display: none; }
.lead strong { font-weight: var(--weight-semibold); }
/* A lead set in a narrow column beside a figure strands its last word: at 1200
   and 1366 this one broke to "or M&A." alone. Balance evens the lines instead,
   without changing how many there are. */
.lead-balanced { text-wrap: balance; }
/* the boxed grid used on portfolio pages: drop the cell borders and the
   desaturation so it reads like the homepage wall */
.logo-grid { gap: clamp(1.75rem, 3vw, 2.75rem); background: transparent; border: 0; border-radius: 0; overflow: visible; }
.logo-grid .cell { background: transparent; aspect-ratio: auto; padding: 8px 0; min-height: 64px; }
.logo-grid img { max-height: 40px; max-width: 86%; }
[data-animate].in .logo-grid img { opacity: 1; }

/* ------------------------------------------------------------
   Hub-and-spoke on Our Approach — slide 11 of the 11.18.25 deck.
   Slide type is 23pt; 1 viewBox unit here is 0.78pt, so that
   lands at 29.5.
   ------------------------------------------------------------ */
.hub-fig text { font-family: var(--font-sans); }
.hub-lbl { font-size: 32px; font-weight: var(--weight-semibold); fill: var(--slw-ink); }

/* ------------------------------------------------------------
   "Could we find a better way" — rebuilt from the graphic on the
   live site (slw.vc/img/cwfwt.png, 1225x913). The original is set
   in Proxima Nova Semibold; sizes below are the measured ones, so
   one viewBox unit is one pixel of that image.
   ------------------------------------------------------------ */
.cwfw-fig text { font-family: var(--font-sans); }
.cwfw-lbl      { font-size: 39.2px; font-weight: var(--weight-semibold); fill: #2F2F2F; }
.cwfw-q        { font-size: 103px;  font-weight: var(--weight-semibold); fill: #4D4D4D; }
.cwfw-round    { font-size: 40px;   font-weight: var(--weight-semibold); fill: #fff; }
.cwfw-round-sm { font-size: 30.5px; font-weight: var(--weight-semibold); fill: #fff; }

/* ------------------------------------------------------------
   "We create value at every stage" — slide 20 of the 2.4.25 deck.
   EMU converted at 9525 per unit, so one viewBox unit is one slide
   pixel and the deck's 20pt type becomes 26.67 units. That lands at
   17px on screen, the same as the other two figures on this page.
   ------------------------------------------------------------ */
.stage-fig text { font-family: var(--font-sans); fill: #424242; }
.stage-lbl      { font-size: 26.67px; font-weight: var(--weight-semibold); }
/* REVENUE is an axis label, not a figure: much smaller than the deck sets it,
   tracked like the site's other small caps, and on the figures' own baseline. */
.stage-rev      { font-size: 16px; font-weight: var(--weight-semibold); letter-spacing: 1.92px; }

/* Headshots from slw.vc/team. They are palette PNGs already masked to a circle,
   so the frame is a circle too and clips whatever ground each one carries. */

/* ------------------------------------------------------------
   The team. Faces are small and the type is centred under each
   one; a card opens that person's bio, the way slw.vc serves it.
   ------------------------------------------------------------ */
/* The row of five fills the width exactly, so centring leaves it flush to
   both edges and only pulls the short last row in under it. */
.people { --team-gap: clamp(1.5rem, 2.9vw, 2.4rem);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(2.25rem, 3.8vw, 3.25rem) var(--team-gap); }
/* five to a row, so nine sits as five over a centred four */
.person { flex: 0 0 calc((100% - 4 * var(--team-gap)) / 5);
  display: block; text-align: center; cursor: pointer;
  margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; }
@media (max-width: 900px) { .person { flex-basis: calc((100% - 2 * var(--team-gap)) / 3); } }
@media (max-width: 560px) { .person { flex-basis: calc((100% - var(--team-gap)) / 2); } }
.person .avatar { display: block; width: 140px; max-width: 100%; aspect-ratio: 1; height: auto; margin: 0 auto;
  border-radius: 50%; background: var(--slw-gray-100); overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.person .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person:hover .avatar { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.person:focus-visible .avatar { outline: 2px solid var(--slw-blue-mid); outline-offset: 3px; }
.person .pn { display: block; margin-top: 18px; font-size: 1rem;
  font-weight: var(--weight-semibold); color: var(--slw-ink); line-height: 1.35;
  letter-spacing: -0.004em; transition: color var(--dur-base) var(--ease-out); }
/* the role carries the brand navy, so it reads as a title rather than a caption */
.person .pr { display: block; margin-top: 4px; font-size: 0.875rem; line-height: 1.45;
  font-weight: var(--weight-medium); color: var(--slw-blue-navy); }
/* a card opens a bio, so it answers on hover */
.person:hover .pn { color: var(--slw-blue-mid); }

/* the bio itself */
.bio { width: min(620px, calc(100vw - 2.5rem)); max-height: 86vh; overflow-y: auto;
  padding: 0 0 clamp(1.75rem, 4vw, 2.25rem); border: 0; border-radius: var(--radius-lg);
  background: #fff; color: var(--slw-ink); box-shadow: var(--shadow-lg); }
.bio::backdrop { background: rgba(11, 38, 71, 0.55); }
.bio-x { position: sticky; top: 14px; z-index: 2; display: block; width: 32px; height: 32px;
  margin: 14px 14px -22px auto; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--slw-gray-100); color: var(--slw-gray-700); font-size: 19px; line-height: 1; }
.bio-x:hover { background: var(--slw-gray-200); color: var(--slw-ink); }
.bio-head { display: flex; gap: 20px; align-items: center;
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2.25rem) 0; }
.bio-head img { flex: none; width: 84px; height: 84px; border-radius: 50%; background: var(--slw-gray-100); }
.bio-head h3 { margin: 0; font-size: var(--text-title); font-weight: var(--weight-semibold); color: var(--slw-ink); }
.bio-role { margin: 3px 0 0; font-size: var(--text-caption); color: var(--slw-gray-700); }
.bio-li { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  color: var(--slw-blue-mid); text-decoration: none; }
.bio-li:hover { color: var(--slw-blue-ocean); }
.bio > p { margin: 18px 0 0; padding-inline: clamp(1.5rem, 4vw, 2.25rem);
  font-size: var(--text-small); line-height: var(--leading-relaxed); }
@media (max-width: 520px) { .bio-head { flex-direction: column; text-align: center; gap: 14px; }
  .bio-li { margin-inline: auto; } }

/* The team's intro stacks: heading, then its supporting line beneath. The
   portfolio keeps .split-head, where the line sits beside the heading. */
.team-head { margin-bottom: clamp(2.75rem, 5vw, 4rem); }
.team-head .head { margin-bottom: 18px; }
.team-head .lead { margin-bottom: 0; max-width: 46rem; }

/* someone whose photo has not arrived yet, and who therefore has no bio to open */
.person-flat { cursor: default; }
.person-flat:hover .avatar { transform: none; box-shadow: none; }
.person-flat:hover .pn { color: var(--slw-ink); }
.avatar-mono { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--slw-blue-mist), var(--slw-blue-pale));
  font-size: 1.5rem; font-weight: var(--weight-semibold); color: var(--slw-blue-navy);
  letter-spacing: 0.02em; }

/* The rest of the wall. Each cap is the height at which that mark's ink lands
   near 30px, from an alpha and luminance scan of the file. Very wide marks hit
   the 88% width cap first and simply sit shorter. */
.logo-wall img[src$="adaptive-insights.png"] { max-height: 46px; }
.logo-wall img[src$="boundless.png"] { max-height: 178px; }
.logo-wall img[src$="chef.png"] { max-height: 30px; }
.logo-wall img[src$="crisp.png"] { max-height: 30px; }
.logo-wall img[src$="datarobot.png"] { max-height: 173px; }
.logo-wall img[src$="eko.png"] { max-height: 30px; }
.logo-wall img[src$="kabam.png"] { max-height: 31px; }
.logo-wall img[src$="kasa.png"] { max-height: 38px; }
.logo-wall img[src$="krux.png"] { max-height: 47px; }
.logo-wall img[src$="logrhythm.png"] { max-height: 35px; }
.logo-wall img[src$="marketshare.png"] { max-height: 60px; }
.logo-wall img[src$="meraki.png"] { max-height: 30px; }
.logo-wall img[src$="onelogin.png"] { max-height: 105px; }
.logo-wall img[src$="signalfx.png"] { max-height: 32px; }
.logo-wall img[src$="spredfast.png"] { max-height: 44px; }
.logo-wall img[src$="stackoverflow.png"] { max-height: 30px; }
.logo-wall img[src$="tealium.png"] { max-height: 30px; }
.logo-wall img[src$="thoughtspot.png"] { max-height: 30px; }
.logo-wall img[src$="upwork.png"] { max-height: 32px; }
.logo-wall img[src$="vectra.png"] { max-height: 85px; }

/* Second batch, measured the same way. */
.logo-wall img[src$="360learning.png"] { max-height: 30px; }
.logo-wall img[src$="aera.png"] { max-height: 40px; }
.logo-wall img[src$="axonius.png"] { max-height: 30px; }
.logo-wall img[src$="big-switch-networks.png"] { max-height: 59px; }
.logo-wall img[src$="bigid.png"] { max-height: 34px; }
.logo-wall img[src$="bluecore.png"] { max-height: 52px; }
.logo-wall img[src$="brightroll.png"] { max-height: 30px; }
.logo-wall img[src$="bromium.png"] { max-height: 63px; }
.logo-wall img[src$="centric.png"] { max-height: 30px; }
.logo-wall img[src$="creatoriq.png"] { max-height: 30px; }
.logo-wall img[src$="delphix.png"] { max-height: 41px; }
.logo-wall img[src$="demandbase.png"] { max-height: 30px; }
.logo-wall img[src$="dock.png"] { max-height: 56px; }
.logo-wall img[src$="everyday-health.png"] { max-height: 87px; }
.logo-wall img[src$="flurry.png"] { max-height: 30px; }
.logo-wall img[src$="flyr.png"] { max-height: 106px; }
.logo-wall img[src$="foursquare.png"] { max-height: 30px; }
.logo-wall img[src$="graylog.png"] { max-height: 37px; }
.logo-wall img[src$="invoca.png"] { max-height: 30px; }
.logo-wall img[src$="leagueapps.png"] { max-height: 119px; }
.logo-wall img[src$="loft.png"] { max-height: 44px; }
.logo-wall img[src$="mavenir.png"] { max-height: 67px; }
.logo-wall img[src$="metropolis.png"] { max-height: 71px; }
.logo-wall img[src$="movableink.png"] { max-height: 31px; }
.logo-wall img[src$="odaseva.png"] { max-height: 55px; }
.logo-wall img[src$="oyster.png"] { max-height: 30px; }
.logo-wall img[src$="pendo.png"] { max-height: 39px; }
.logo-wall img[src$="schoology.png"] { max-height: 35px; }
.logo-wall img[src$="sciencelogic.png"] { max-height: 30px; }
.logo-wall img[src$="securityscorecard.png"] { max-height: 34px; }
.logo-wall img[src$="smartrecruiters.png"] { max-height: 61px; }
.logo-wall img[src$="sojern.png"] { max-height: 31px; }
.logo-wall img[src$="venafi.png"] { max-height: 64px; }
.logo-wall img[src$="vestwell.png"] { max-height: 50px; }
.logo-wall img[src$="vidyo.png"] { max-height: 30px; }
.logo-wall img[src$="voxmedia.png"] { max-height: 30px; }
.logo-wall img[src$="workjam.png"] { max-height: 30px; }
.logo-wall img[src$="zerofox.png"] { max-height: 30px; }

/* Third batch. Hammerspace joins the list because its refreshed file is a
   tight crop — without a cap the base 54px would oversize it. */
.logo-wall img[src$="airship.jpg"] { max-height: 30px; }
.logo-wall img[src$="damballa.png"] { max-height: 33px; }
.logo-wall img[src$="digital-guardian.png"] { max-height: 30px; }
.logo-wall img[src$="findem.png"] { max-height: 30px; }
.logo-wall img[src$="hammerspace.png"] { max-height: 30px; }
.logo-wall img[src$="lucidworks.png"] { max-height: 30px; }
.logo-wall img[src$="popsugar.jpg"] { max-height: 58px; }
.logo-wall img[src$="robin.png"] { max-height: 30px; }
.logo-wall img[src$="snaplogic.png"] { max-height: 30px; }

/* The last two without a cap. Both files are 100% ink, so the 88% width limit
   was holding them down; at the wider measure it lets go and they need one. */
.logo-wall img[src$="afresh.webp"] { max-height: 30px; }
.logo-wall img[src$="nexla.webp"] { max-height: 30px; }

/* Sparrow. A 3840x2160 export where the mark fills 38% of the height. */
.logo-wall img[src$="sparrow.png"] { max-height: 79px; }

/* ============ THE FIGURES BAND ============
   It carries no heading — its eyebrow and the statement under it ARE the
   heading, and at 14px and 20px they were losing to 71px numerals. Both step
   up here and nowhere else. */
.section-figures .section-eyebrow { font-size: 1rem; margin-bottom: 24px; }
.section-figures .section-lead { font-size: clamp(1.375rem, 1.95vw, 1.75rem);
  font-weight: var(--weight-light); line-height: 1.34; letter-spacing: -0.01em;
  max-width: 52ch; }
.section-figures .section-lead strong { color: var(--slw-blue-mid); }

/* The three read as one set rather than three loose columns: a rule between
   each. The figures take the same blue as the emphasis above them, and the
   labels sit in the statement's own ink at semibold, so they hold their own
   under a 71px numeral. */
/* Even thirds put each rule hard against the figure after it and 260px from
   the one before, because the figures are left aligned and far narrower than
   the column holding them. So the columns size to their own content and the
   rules are real items: space-between then splits the slack into four equal
   gaps, which is the same air on both sides of every rule. */
.section-figures .stats-band { display: flex; align-items: stretch;
  justify-content: space-between; gap: 0; margin-top: clamp(2.75rem, 5vw, 4.25rem); }
.section-figures .stats-band .stat { flex: 0 0 auto; }
.section-figures .stats-band .stat-rule { flex: 0 0 1px; align-self: stretch;
  background: var(--slw-gray-300); }
.section-figures .stats-band .fig-num,
.section-figures .stats-band .fig-num b { color: var(--slw-blue-mid); }
.section-figures .stats-band .fig-lbl { margin-top: 16px; font-size: 1.125rem;
  font-weight: var(--weight-semibold); color: var(--slw-ink);
  line-height: 1.5; max-width: 22ch; }
/* stacked, the rules turn horizontal */
/* stacked, the rules lie down and run the width */
@media (max-width: 720px) {
  .section-figures .stats-band { flex-direction: column; gap: 1.75rem;
    justify-content: flex-start; }
  .section-figures .stats-band .stat-rule { flex: 0 0 1px; width: 100%; }
}

/* The two approach figures now build over about five seconds. Someone who has
   asked their system for less motion should get the finished picture at once,
   not a slower trickle of it — reveal() adds .in immediately for them, but the
   delays on these primitives would still play out one by one. */
@media (prefers-reduced-motion: reduce) {
  .rise, .fade, .pop, .draw, .fill-in,
  .tl .ev::before, .tl .ev::after, .tl .ev > * {
    transition: none !important; transition-delay: 0s !important;
    opacity: 1 !important; transform: none !important;
  }
}

/* Each piece of the two approach figures also lands quicker than the site's
   default fade, so the shorter gaps between steps do not overlap into mush. */
.cwfw-fig .fade, .stage-fig .fade { transition-duration: 620ms; }
.cwfw-fig .pop { transition-duration: 420ms; }

/* A hub label appears with its own disc, so it should land in the same beat —
   .fade's 900ms against .pop's 520ms would leave the text trailing the circle. */
.hub-fig .fade { transition-duration: 520ms; }

/* ============ THE TIMELINE BUILDS ============
   It used to arrive as one block. Now each event lands in turn and in the
   order it happened: the dot appears, its text follows, then the spine grows
   down from it to reach the next dot — so the line is drawn by the history
   rather than waiting behind it. 0.62s a step, which is the time a segment
   takes to travel, so the next dot arrives exactly as the line reaches it. */
[data-animate] .tl .ev::before { transform: scale(0);
  transition: transform 380ms var(--ease-out); }
[data-animate].in .tl .ev::before { transform: scale(1); }

[data-animate] .tl .ev::after { transform: scaleY(0); transform-origin: top center;
  transition: transform 420ms var(--ease-out); }
[data-animate].in .tl .ev::after { transform: scaleY(1); }

[data-animate] .tl .ev > * { opacity: 0; transform: translateY(8px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
[data-animate].in .tl .ev > * { opacity: 1; transform: none; }

.tl .ev:nth-child(1)::before { transition-delay: 0s }
.tl .ev:nth-child(1) > *   { transition-delay: 0.14s }
.tl .ev:nth-child(1)::after { transition-delay: 0.20s }
.tl .ev:nth-child(2)::before { transition-delay: 0.62s }
.tl .ev:nth-child(2) > *   { transition-delay: 0.76s }
.tl .ev:nth-child(2)::after { transition-delay: 0.82s }
.tl .ev:nth-child(3)::before { transition-delay: 1.24s }
.tl .ev:nth-child(3) > *   { transition-delay: 1.38s }
.tl .ev:nth-child(3)::after { transition-delay: 1.44s }
.tl .ev:nth-child(4)::before { transition-delay: 1.86s }
.tl .ev:nth-child(4) > *   { transition-delay: 2.00s }