/* ==========================================================================
   johnhepburn.com — static rebuild
   Type: sofia-pro / brandon-grotesque / proxima-soft / ltc-bodoni-175 were the
   original Adobe Fonts. Stacks below list them first, so adding an Adobe Fonts
   kit restores the originals pixel-for-pixel; Google fallbacks load otherwise.
   ========================================================================== */

:root {
  --ink: #1a1a1a;
  --body: #4a4a4a;
  --muted: #8a8a8a;
  --hairline: rgba(0, 0, 0, 0.12);
  --tint: #f7f7f6;
  --dark: #101010;
  --display: "sofia-pro", "Helvetica Neue", Arial, sans-serif;
  --text: "proxima-soft", "Helvetica Neue", Arial, sans-serif;
  --serif: "HN LT", "Helvetica Neue", Arial, sans-serif;
  --header-h: 84px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
section[id], footer[id] { scroll-margin-top: 72px; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }   /* no accidental horizontal scroll / side-to-side drift */
body {
  font-family: var(--text);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.85;
  color: var(--body);
  background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px 48px;
  transition: padding 0.4s ease;
}
.brand { color: #fff; transition: color 0.4s ease; }
.brand svg { height: 36px; width: auto; display: block; }
.site-header--solid .brand, .site-header.scrolled .brand { color: #444; }
/* optically-corrected logo: wider-gutter variant only in the solid (white-J) state */
.brand-mark { display: block; }
.brand-mark--solid { display: none; }
.site-header--solid .brand-mark--over, .site-header.scrolled .brand-mark--over { display: none; }
.site-header--solid .brand-mark--solid, .site-header.scrolled .brand-mark--solid { display: block; }
body.menu-open .brand { opacity: 0; pointer-events: none; }   /* logo hidden while menu open — just the X */
body.menu-open { overflow: hidden; }                          /* lock the page behind the menu */
.main-nav { display: flex; gap: 34px; }
.main-nav a {
  font-family: var(--display);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; color: #fff;
  transition: opacity 0.2s;
}
.main-nav a:hover { opacity: 0.6; }
.main-nav a[aria-current="page"] { opacity: 0.85; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* Work dropdown */
.nav-work { position: relative; }
.nav-work-btn {
  font-family: var(--display);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: none; border: 0; cursor: pointer; padding: 0;
  color: #fff; display: flex; align-items: center; gap: 4px;
  transition: opacity 0.2s;
}
.site-header--solid .nav-work-btn, .site-header.scrolled .nav-work-btn { color: #000; }
.nav-work-btn:hover { opacity: 0.6; }
.nav-work-btn[aria-current="page"] { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.nav-work-btn svg { width: 16px; height: 16px; fill: currentColor; transition: transform 0.25s; }
.nav-work:hover .nav-work-btn svg, .nav-work.open .nav-work-btn svg { transform: rotate(180deg); }
.nav-drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 14px;   /* hover bridge */
  z-index: 110;
  visibility: hidden; transition: visibility 0s linear 0.95s;   /* stay visible through the slower reverse-close */
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.22));
}
.nav-work:hover .nav-drop, .nav-work.open .nav-drop { visibility: visible; transition: visibility 0s; }
/* each item cascades in one-by-one; reverses (last-first) on close */
.nav-drop > a {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 264px; padding: 12px 16px;
  background: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc((var(--n, 6) - 1 - var(--i, 0)) * 0.08s);   /* reverse stagger on close */
}
.nav-work:hover .nav-drop > a, .nav-work.open .nav-drop > a {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 0.08s);                       /* forward stagger on open */
}
.nav-drop > a:last-child { border-bottom: 0; }
/* BASE transition = the ROLLOUT (exit) — long, decelerating ease-out so it drifts
   back and settles slowly. That trailing glide is the "tasty" part. */
.nav-drop > a > * { position: relative; z-index: 2;
  transition: transform 1.3s cubic-bezier(0.19, 1, 0.22, 1); }
.nav-drop > a > img {
  transition: transform 1.3s cubic-bezier(0.19, 1, 0.22, 1), filter 1.3s cubic-bezier(0.19, 1, 0.22, 1); }
.nav-drop .drop-co { transition: color 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.nav-drop > a::before {
  content: ""; position: absolute; inset: 0; background: #e7e6e2;
  opacity: 0; transition: opacity 1.3s cubic-bezier(0.19, 1, 0.22, 1); z-index: 0;
}
/* HOVER transition = the ROLLOVER (enter) — quick & responsive; the ROLLOUT above
   is what lingers, ~3x slower, so the glide home is unmistakable */
.nav-drop > a:hover > *, .nav-drop > a:hover .drop-co,
.nav-drop > a:hover::before {
  transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* hover-state values: content glides right (bigger shift), thumbnail pops, title deepens */
.nav-drop > a:hover::before { opacity: 1; }
.nav-drop > a:hover > img { transform: translateX(12px); filter: brightness(1.06) saturate(1.08); }
.nav-drop > a:hover > .drop-txt { transform: translateX(12px); }
.nav-drop > a:hover .drop-co { color: #000; }
.nav-drop img { width: 56px; height: 34px; object-fit: cover; flex-shrink: 0; }
.drop-txt { display: flex; flex-direction: column; gap: 2px; }
.drop-co {
  font-family: var(--display);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: #1a1a1a;
}
.drop-role {
  font-family: var(--display);
  font-size: 9.5px; font-weight: 300;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.nav-drop > a.drop-cur .drop-co { border-bottom: 1px solid #1a1a1a; align-self: flex-start; }

/* scrolled / solid state — white bar, dark text */
.site-header--solid, .site-header.scrolled {
  background: #fff;
  box-shadow: 0 10px 33px rgba(0, 0, 0, 0.1);
}
.site-header--solid .header-inner, .site-header.scrolled .header-inner { padding: 14px 48px; }
.site-header--solid .main-nav a, .site-header.scrolled .main-nav a { color: #000; }

/* mobile nav */
.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
  flex-direction: column; justify-content: center; gap: 6px;
  z-index: 102;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: #fff; transition: transform 0.3s, opacity 0.3s, background 0.3s;
}
.site-header--solid .nav-toggle span, .site-header.scrolled .nav-toggle span { background: #000; }
body.menu-open .nav-toggle span { background: #fff; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 101;
  background: rgba(10, 10, 10, 0.97);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow-y: auto; -webkit-overflow-scrolling: touch;   /* the MENU scrolls when it's tall */
  padding: 84px 20px 48px;
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
/* keep the header (logo + the X) ABOVE the open menu so both are visible & tappable */
body.menu-open .site-header { z-index: 102; background: transparent; box-shadow: none; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 22px; text-align: center; margin: auto 0; }
.mobile-menu a {
  font-family: var(--display);
  font-size: 22px; font-weight: 300;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: #fff; text-decoration: none;
}
.mobile-menu .m-label {
  font-family: var(--display);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 10px 0 -14px;
}
.mobile-menu .m-work { font-size: 17px; letter-spacing: 0.18em; }
.mobile-menu .m-role {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 300;
  letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.5);
}
/* Résumé sits apart at the bottom — quieter, with a small divider above it */
.mobile-menu .m-resume {
  margin-top: 20px; font-size: 15px; font-weight: 400;
  letter-spacing: 0.28em; color: rgba(255, 255, 255, 0.6);
}
.mobile-menu .m-resume::before {
  content: ""; display: block;
  width: 40px; height: 1px; background: rgba(255, 255, 255, 0.18);
  margin: 0 auto 22px;
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: 57% 30%;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.45) 100%);
}
.hero-content { position: relative; text-align: center; padding: 0 24px 20vh; color: #fff; }
.display {
  font-family: var(--display);
  font-weight: 200; text-transform: uppercase;
  letter-spacing: 0.12em; line-height: 1.15;
  color: #fff;
  font-size: clamp(24px, 4.6vw, 58px);
}
.display-xl { font-size: clamp(27px, 7.6vw, 72px); }
.hero-sub {
  font-family: var(--display);
  font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.32em; font-size: clamp(11px, 2.9vw, 19px);
  margin-top: 26px;
  white-space: nowrap;
}
.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; opacity: 0.85; text-decoration: none;
  animation: cue 2.2s ease-in-out infinite;
}
.cue-txt {
  font-family: var(--display);
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.34em; text-transform: uppercase;
  padding-left: 0.34em;   /* optically recenters tracked text */
}
.scroll-cue svg { width: 34px; height: 34px; fill: currentColor; }
@keyframes cue { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }

/* ---------------------------------------------------------------- banners */
.banner {
  position: relative; min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
}
.banner-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.banner--tall { min-height: 88vh; }
.banner-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); }
/* smart-home hero: keep the clock in frame; deep scrim carries the diffusion */
.banner--grid .banner-bg { background-position: center top; }
.banner--grid .banner-scrim { background: rgba(0, 0, 0, 0.55); }

/* Office Lens hero: source image has its own baked-in headline — favor the phone
   side of the frame and knock the image back harder so our title owns the space */
.banner--lens .banner-scrim { background: rgba(0, 0, 0, 0.42); }

/* ambient video banner (Transmethod) — video sits over the poster bg, under the scrim */
.banner-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.banner-video.playing { opacity: 1; }
.banner-scrim--video { background: rgba(0, 0, 0, 0.48); }   /* original site used 50% black */
/* video now plays on mobile too (muted + playsinline autoplay) */
.banner-content { position: relative; padding: 140px 24px 60px; color: #fff; max-width: 900px; }
.banner-sub {
  font-family: var(--display);
  font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.24em; font-size: clamp(12px, 1.5vw, 16px);
  line-height: 2.1; margin-top: 22px;
}
.btn-ghost {
  display: inline-block; margin-top: 40px;
  font-family: var(--display);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.85);
  padding: 15px 46px;
  transition: background 0.25s, color 0.25s;
}
.btn-ghost:hover { background: #fff; color: #111; }
.btn-ghost--dark { color: #1a1a1a; border-color: rgba(0, 0, 0, 0.65); }
.btn-ghost--dark:hover { background: #111; color: #fff; }

/* white kicker band between banners */
.band { text-align: center; padding: 72px 24px 64px; }
.band-kicker {
  font-family: var(--display);
  font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.3em; font-size: 15px; color: var(--ink);
}
.band-sub {
  font-family: var(--display);
  font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 12px; color: var(--muted);
  margin-top: 14px;
}

/* ---------------------------------------------------------------- content */
.content {
  max-width: 760px; margin: 0 auto;
  padding: 96px 28px;
}
.content--wide { max-width: 1160px; }
.content--tint { max-width: none; background: var(--tint); }
.content--tint > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.content--first { padding-top: calc(var(--header-h) + 72px); }
.content p + p { margin-top: 1.4em; }
.content ul { margin: 1.2em 0 1.6em 1.3em; }
.content li { margin-bottom: 0.9em; }

.lede {
  font-family: var(--display);
  font-weight: 300; font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.75; color: var(--ink);
  text-align: center; text-transform: uppercase; letter-spacing: 0.06em;
}

.h-line {
  font-family: var(--display);
  font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: clamp(20px, 3vw, 28px);
  color: var(--ink);
  margin: 2.4em auto 1.1em;   /* auto sides — stays centered inside tint sections too */
  text-align: center;
}
.content > .h-line:first-child, .intro-block .h-line { margin-top: 0; }
.h-line::after {
  content: ""; display: block;
  width: 56px; height: 1px; background: var(--hairline);
  margin: 22px auto 0;
}
.h-page { font-size: clamp(26px, 4vw, 38px); }
.h-sub {
  font-family: var(--display);
  font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 15px; color: var(--ink);
  margin: 2.2em 0 0.9em; text-align: center;
}
.kicker {
  font-family: var(--display);
  font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.26em; font-size: 12px; color: var(--muted);
  text-align: center; margin-bottom: 1.6em;
}
.kicker--light { color: rgba(255, 255, 255, 0.55); }

.intro-block { margin-top: 84px; }
.intro-icon { width: 64px; margin: 0 auto 26px; }
.intro-num {
  display: block; text-align: center;
  font-family: var(--display);
  font-weight: 200; font-size: clamp(34px, 4.4vw, 46px);
  letter-spacing: 0.04em; line-height: 1;
  color: var(--muted);
  margin: 0 auto 20px;
}
.intro-num::after {
  content: ""; display: block;
  width: 30px; height: 2px; background: var(--ink);
  margin: 14px auto 0;
}

.values-line {
  font-family: var(--display);
  font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 14px; line-height: 2.4;
  color: var(--ink); text-align: center;
}
.values-note { text-align: center; margin-top: 1.6em; }

.brands-img { margin: 44px auto 0; }
.content-img { margin: 10px auto 0; }

.testimonial { margin-top: 56px; text-align: center; }
.testimonial:first-of-type { margin-top: 0; }
.content--tint .testimonial:first-of-type { margin-top: 48px; }
.testimonial p { font-style: italic; }
.testimonial cite {
  display: block; margin-top: 20px;
  font-family: var(--display); font-style: normal;
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted);
}

.quote-section { text-align: center; padding: 120px 28px; max-width: 980px; margin: 0 auto; }
.quote-section--tint { max-width: none; background: var(--tint); }
.quote-section blockquote {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.35; color: var(--ink);
  max-width: 880px; margin: 0 auto;
}
.quote-cite {
  font-family: var(--display);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin-top: 30px;
}

figure.product-fig { margin: 0 0 56px; }
figure.product-fig figcaption {
  font-family: var(--display);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-top: 16px;
}

.back-row { text-align: center; margin-top: 72px; }

/* case-study components (Docs.com pilot) */
.glance {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 64px;
  padding: 36px 24px;
  border-bottom: 1px solid var(--hairline);
}
.glance > div { text-align: center; }
.g-label {
  font-family: var(--display);
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
}
.g-value {
  font-family: var(--display);
  font-size: 14px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  margin-top: 6px;
}
.ps {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--hairline);
  margin: 44px auto; max-width: 980px;
  text-align: left;
}
@media (min-width: 820px) { .ps { grid-template-columns: 1fr 1fr; } }
.ps-col { padding: 32px 36px; }
.ps-col--problem { background: var(--tint); }
@media (min-width: 820px) { .ps-col + .ps-col { border-left: 1px solid var(--hairline); } }
@media (max-width: 819px) { .ps-col + .ps-col { border-top: 1px solid var(--hairline); } }
.ps-h {
  font-family: var(--display);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 16px;
}
.ps ul { list-style: none; margin: 0; }
.ps li {
  padding: 7px 0 7px 20px; position: relative;
  font-size: 15px;
  border-bottom: 1px solid var(--hairline);
}
.ps li:last-child { border-bottom: 0; }
.ps li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
}
.ps-col p + p { margin-top: 1em; }
.ps-payoff {
  margin-top: 1.4em !important;
  font-family: var(--display);
  font-size: 13px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  border-left: 2px solid var(--ink); padding-left: 14px;
}
.stat-row {
  display: grid; grid-template-columns: 1fr; gap: 36px;
  margin: 48px auto 56px; max-width: 860px; text-align: center;
}
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat-n {
  font-family: var(--display);
  font-weight: 200; font-size: clamp(38px, 5vw, 58px);
  letter-spacing: 0.02em; color: var(--ink); line-height: 1;
}
.stat-l {
  font-family: var(--display);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
  margin-top: 10px;
}

/* screenshot placeholders (smart-home case study — John backfills) */
.ph {
  border: 1px dashed rgba(0, 0, 0, 0.25);
  background: var(--tint);
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  margin: 34px auto 0; max-width: 980px;
}
.ph span {
  font-family: var(--display);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
  padding: 0 20px; text-align: center;
}

/* Transmethod service-band gradients — the original site's ::before washes */
/* the live homepage's exact ::before washes (style2.css) */
.tm-grad-consulting .banner-scrim { background: linear-gradient(150deg, rgba(224, 49, 0, 0.20), rgba(0, 37, 76, 0.40)); }
.tm-grad-strategy .banner-scrim { background: linear-gradient(135deg, rgba(46, 81, 5, 0.35), rgba(11, 119, 164, 0.60)); }
.tm-grad-solutions .banner-scrim { background: linear-gradient(135deg, rgba(213, 7, 170, 0.40), rgba(135, 18, 63, 0.40)); }
.tm-grad-design .banner-scrim { background: linear-gradient(135deg, rgba(20, 74, 84, 0.40), rgba(92, 35, 7, 0.40)); }

/* jmonky chapter */
.banner--lower .display { text-transform: none; letter-spacing: 0.06em; font-weight: 300; }
.creed { margin-top: 48px; text-align: center; }
.creed p {
  font-family: var(--display);
  font-size: 15px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); line-height: 2.6;
  margin: 0 !important;
}

/* Transmethod chapter */
.tm-diagram { display: block; margin: 0 auto 40px; width: 100%; max-width: 480px; height: auto; }
.deliv {
  columns: 2; column-gap: 44px;
  margin: 1.6em auto 0.6em; max-width: 560px;
  list-style: none;
}
.deliv li {
  padding: 8px 0 8px 20px; position: relative;
  border-bottom: 1px solid var(--hairline);
  break-inside: avoid;
  font-size: 15px;
}
.deliv li::before {
  content: ""; position: absolute; left: 2px; top: 17px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
}
.quote-inline { text-align: center; margin-top: 54px; }
.quote-inline blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.45; color: var(--ink);
  max-width: 640px; margin: 0 auto;
}
.quote-inline .quote-cite { margin-top: 14px; }
.founder-grid {
  display: grid; grid-template-columns: 1fr; gap: 48px;
  margin-top: 56px; text-align: left;
}
@media (min-width: 820px) { .founder-grid { grid-template-columns: 1fr 1fr; } }
.founder-card img { width: 100%; }
.founder-card .h-sub { text-align: left; margin: 1.4em 0 0.2em; }
.founder-card .kicker { text-align: left; margin-bottom: 1.2em; }
.founder-card p + p { margin-top: 1.1em; }
.founder-quote {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--ink);
  border-left: 2px solid var(--hairline); padding-left: 18px;
  margin-top: 1.4em !important;
}
.client-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 48px; margin-top: 48px;
}
.client-row img { height: 34px; width: auto; opacity: 0.75; }

/* breadcrumb eyebrow + office product sub-nav (case pages) */
.crumb {
  font-family: var(--display);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); text-align: center;
  margin-bottom: 34px;
}
.crumb a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }
.crumb a:hover { border-color: var(--ink); }
.crumb-sep { margin: 0 10px; opacity: 0.5; }
.crumb-n { margin-left: 10px; opacity: 0.7; }
.subnav {
  display: flex; justify-content: center; gap: 28px;
  margin: -10px 0 40px;
}
.subnav a {
  font-family: var(--display);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding-bottom: 3px;
  transition: color 0.2s;
}
.subnav a:hover { color: var(--ink); }
.subnav a.subnav-cur { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* case-study pages (Docs.com, Office Lens, OneNote, MSN projects) */
.content--case { max-width: 900px; }
.content--case p { max-width: 760px; margin-left: auto; margin-right: auto; }
.content--case .h-line { margin-top: 2.8em; }
.content--case .h-line.h-page { margin-top: 0; }
.p-label { margin-top: 2em; color: var(--ink); }
.p-label + p { margin-top: 0.5em !important; }
.case-img { display: block; }
.img-narrow img { max-width: 540px; margin-left: auto; margin-right: auto; }
.case-img img { margin: 0 auto; box-shadow: 0 2px 22px rgba(0,0,0,0.08); }
.fig-cap {
  font-family: var(--display); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-top: 12px;
}
/* a sub-heading that follows a figure caption starts a new thought — give it air */
.fig-cap + .h-sub { margin-top: 5em; }
/* image blocks breathe like the text does: generous space between stacked figures */
.fig-cap + .case-img,
.fig-cap + .grid,
.fig-cap + .carousel { margin-top: 72px; }
p + .grid { margin-top: 48px; }
figure.product-fig .fig-link { display: block; transition: opacity 0.25s; }
figure.product-fig .fig-link:hover { opacity: 0.85; }
figure.product-fig figcaption a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }
figure.product-fig figcaption a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- galleries */
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.g-item { display: block; overflow: hidden; background: #eee; }
.g-item img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.g-item:hover img { transform: scale(1.04); opacity: 0.92; }
.grid-2 .g-item img, .grid--tall .g-item img { aspect-ratio: auto; }
/* tall grids: never stretch-and-crop a shorter item to match its neighbors */
.grid--tall .g-item { align-self: start; }
.grid--tall .g-item img { height: auto; object-fit: unset; }
/* center a lone dangler in a 3-col tall grid (7th item) */
@media (min-width: 1024px) { .grid--tall .g-item:last-child:nth-child(3n + 1) { grid-column: 2; } }

/* things-i-like tiles */
.tiles { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 48px; }
.tile { position: relative; display: block; overflow: hidden; text-decoration: none; }
.tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.6s ease; }
.tile:hover img { transform: scale(1.05); }
.tile-label {
  position: absolute; inset: auto 0 0 0;
  padding: 70px 26px 26px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  color: #fff;
}
.tile-label h3 {
  font-family: var(--display);
  font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 17px;
}
.tile-label p { font-size: 14px; opacity: 0.85; margin-top: 6px; }

/* current tile in the Things-I-Like cross-nav (gallery pages) */
.tile--current { cursor: default; }
.tile--current img { opacity: 0.45; filter: grayscale(0.4); }
.tile--current:hover img { transform: none; }
.tile-now {
  font-family: var(--display);
  font-size: 11px !important; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  opacity: 1 !important;
}
.tile-now::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; margin-right: 8px; vertical-align: 1px;
}

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--dark); color: #d5d5d5; text-align: center; }
.footer-inner { max-width: 860px; margin: 0 auto; padding: 90px 28px 60px; }
.footer-contact { font-size: 16px; }
.footer-contact a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
.footer-contact .sep { margin: 0 14px; opacity: 0.35; }
.footer-address { margin-top: 10px; font-size: 14px; opacity: 0.65; }
.footer-social { display: flex; justify-content: center; gap: 26px; margin-top: 40px; }
.footer-social a { opacity: 0.7; transition: opacity 0.2s; }
.footer-social a:hover { opacity: 1; }
.footer-social svg { width: 22px; height: 22px; fill: #fff; }
.footer-copy {
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px; letter-spacing: 0.08em; opacity: 0.55;
}
.footer-colophon {
  margin-top: 8px;
  font-size: 11px; letter-spacing: 0.06em; opacity: 0.4;
}
.footer-colophon a { color: inherit; border-bottom: 1px solid rgba(255, 255, 255, 0.25); text-decoration: none; }
.footer-colophon a:hover { opacity: 0.9; }

/* ---------------------------------------------- project slideshow (MSN) */
.carousel { position: relative; margin: 44px auto 0; width: min(94vw, 1500px); margin-left: 50%; transform: translateX(-50%); }
.car-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; }
.car-slide a { display: block; position: relative; }
/* mobile-only affordance: desktop comps shrink to a short band on phones — tap opens full-res */
@media (max-width: 640px) {
  .car-slide a::after {
    content: "Tap to enlarge";
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(0, 0, 0, 0.62); color: #fff;
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 4px; pointer-events: none;
    backdrop-filter: blur(2px);
  }
}
.car-slide img {
  width: 100%; max-width: 100%; max-height: 88vh;
  margin: 0 auto; object-fit: contain;
  box-shadow: 0 2px 22px rgba(0, 0, 0, 0.08);
}
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25); background: rgba(255, 255, 255, 0.88);
  color: #1a1a1a; font-size: 30px; line-height: 1; cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: flex; align-items: center; justify-content: center; padding-bottom: 4px;
}
.car-btn:hover { background: #111; color: #fff; }
.car-prev { left: -10px; }
.car-next { right: -10px; }
.car-count {
  font-family: var(--display); font-size: 12px;
  letter-spacing: 0.22em; color: var(--muted);
  text-align: center; margin-top: 18px;
}

/* previous / next project pager */
.proj-pager {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 84px; padding-top: 40px;
  border-top: 1px solid var(--hairline);
}
.pp { text-decoration: none; max-width: 46%; }
.pp-next { text-align: right; margin-left: auto; }
.pp-dir {
  display: block;
  font-family: var(--display); font-size: 11px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.pp-title {
  display: block; margin-top: 8px;
  font-family: var(--display); font-size: 17px; font-weight: 300;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  transition: opacity 0.2s;
}
.pp:hover .pp-title { opacity: 0.55; }

/* ---------------------------------------------- lightbox (gallery pages) */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 8, 8, 0.95);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
body.lb-open { overflow: hidden; }
.lb-fig { margin: 0; max-width: calc(100vw - 140px); max-height: 88vh; }
.lb-fig img { max-width: 100%; max-height: 88vh; width: auto; height: auto; object-fit: contain; }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 201;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); background: transparent;
  color: #fff; font-size: 32px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding-bottom: 4px;
  transition: background 0.2s;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.15); }
.lb-prev { left: 26px; }
.lb-next { right: 26px; }
.lb-close {
  position: absolute; top: 18px; right: 24px; z-index: 201;
  background: none; border: 0; color: #fff;
  font-size: 44px; font-weight: 200; line-height: 1; cursor: pointer; opacity: 0.8;
}
.lb-close:hover { opacity: 1; }
.lb-count {
  position: absolute; bottom: 22px; left: 0; right: 0;
  text-align: center;
  font-family: var(--display); font-size: 12px;
  letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 640px) {
  .lb-fig { max-width: 100vw; }
  .lb-btn { width: 44px; height: 44px; font-size: 26px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

/* ---------------------------------------------- section rail (About page, desktop) */
.rail {
  position: fixed; left: 34px; top: 50%; transform: translateY(-50%);
  z-index: 95;
  display: flex; flex-direction: column; gap: 17px;
  padding-left: 15px;
  color: #1a1a1a;
  transition: color 0.4s ease;
}
.rail--light { color: #fff; }
.rail-line {
  position: absolute; left: 2px; top: 4px; bottom: 4px;
  width: 1px; background: currentColor; opacity: 0.25;
}
.rail-puck {
  position: absolute; left: -1.5px; top: 0;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid currentColor; background: transparent;
  transform: translateY(2px);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);   /* glide between dots */
}
.rail-item {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  opacity: 0.45; transition: opacity 0.25s;
}
.rail-item:hover, .rail-item.active { opacity: 1; }
.rail-dot {
  position: absolute; left: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  transition: transform 0.25s;
}
.rail-item.active .rail-dot { transform: scale(1.5); }
.rail-label {
  font-family: var(--display);
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 1180px) { .rail { display: none; } }

/* ---------------------------------------------- first-visit loader */
/* Shown only when the inline <head> script adds html.loading (no session flag).
   No-JS never gets the class, so content is never trapped behind it. */
.loader {
  position: fixed; inset: 0; z-index: 300;
  background: #0f0f0f;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  transition: transform 0.75s cubic-bezier(0.7, 0, 0.3, 1);
  will-change: transform;
}
html.loading .loader { display: flex; }
.loader.loader-out { transform: translateY(-101%); }
.loader-mark { color: #fff; animation: loaderIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.loader-mark svg { height: 40px; width: auto; display: block; }
.loader-bar {
  width: 140px; height: 1px;
  background: rgba(255, 255, 255, 0.16);
  position: relative; overflow: hidden;
  animation: loaderIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.loader-bar::after {
  content: ""; position: absolute; inset: 0;
  background: #fff; transform: translateX(-100%);
  animation: loadbar 2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s infinite;
}
@keyframes loaderIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes loadbar { 0% { transform: translateX(-100%); } 55% { transform: translateX(-12%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .loader { transition: opacity 0.4s ease; }
  .loader.loader-out { transform: none; opacity: 0; }
  .loader-mark, .loader-bar { animation: none; }
  .loader-bar::after { animation: none; transform: none; }
}

/* ---------------------------------------------- Tron digitization intro (home) */
.intro {
  position: fixed; inset: 0; z-index: 300;
  background: #000; display: none; overflow: hidden;
}
html.loading .intro { display: block; }
.intro.intro--out { opacity: 0; transition: opacity 0.6s ease; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* --- authentic CRT layer (square corners for the site) --- */
.intro-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: .55;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.34) 3px, rgba(0,0,0,0) 4px);
  transition: opacity 1.2s ease;
}
.intro-vig {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.30) 80%, rgba(0,0,0,.7) 100%);
  box-shadow: inset 0 0 160px 40px rgba(0,0,0,.55);
  transition: opacity 1.2s ease;
}
.intro-roll {
  position: absolute; left: 0; right: 0; height: 34%; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(120,255,160,0), rgba(120,255,160,.05) 50%, rgba(120,255,160,0));
  animation: introRoll 7s linear infinite;
}
@keyframes introRoll { 0% { top: -40%; } 100% { top: 120%; } }
.intro-flicker {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: rgba(90,255,140,.03); mix-blend-mode: screen; animation: introFlick 110ms steps(2) infinite;
}
@keyframes introFlick { 0%,100% { opacity: .9; } 50% { opacity: 1; } }
.intro.calm .intro-scan { opacity: .18; }
.intro.calm .intro-vig { opacity: .5; }
.intro.calm .intro-flicker { display: none; }
.intro-cap {
  position: absolute; left: 6vw; top: 7vh; z-index: 8; pointer-events: none; margin: 0;
  font: 13px/1.7 Menlo, Consolas, monospace; letter-spacing: .06em;
  color: #7df0a6; text-shadow: 0 0 6px rgba(120,240,166,.5); white-space: pre;
  transition: opacity .5s ease;
}
.intro-status {
  position: absolute; right: 6vw; top: 7vh; z-index: 8; pointer-events: none; margin: 0;
  font: 13px/1.7 Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase;
  color: #bfffd6; text-shadow: 0 0 8px rgba(150,255,190,.6); text-align: right; white-space: pre;
}
/* skip + replay, side by side, anchored to the hero (auto-hide on scroll) */
.intro-controls {          /* lives inside the hero, scrolls away with it */
  position: absolute; right: 22px; bottom: 22px; z-index: 20;
  display: flex; gap: 10px; align-items: center;
}
/* while the intro is playing it floats above the full-screen overlay */
html.intro-playing .intro-controls { position: fixed; z-index: 310; }
.intro-skip, .intro-replay {
  display: inline-flex; align-items: center;
  font-family: var(--text); font-size: 12px; font-weight: 500; letter-spacing: 0.03em;
  color: #fff; background: none; border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 16px; border-radius: 0; cursor: pointer; opacity: 0.85;
  transition: opacity 0.2s, border-color 0.2s;
}
.intro-skip:hover, .intro-replay:hover { opacity: 1; border-color: #fff; }
.intro-skip { display: none; }                       /* only while the intro is playing */
html.intro-playing .intro-skip { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .intro, .intro-controls { display: none !important; } }

/* back to top */
.to-top {
  position: fixed; bottom: 22px; right: 26px; z-index: 90;
  width: 50px; height: 50px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: #2e2e2e; color: #fff; font-size: 20px;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, background 0.2s;
}
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { background: #aeaeae; }

/* ================================================================ tablet ≥640 */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================ desktop ≥1024 */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .tiles { gap: 18px; }
}

/* ================================================================ mobile ≤820 nav */
@media (max-width: 820px) {
  .header-inner { padding: 18px 20px; }
  .site-header--solid .header-inner, .site-header.scrolled .header-inner { padding: 12px 20px; }
  .brand svg { height: 30px; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .content { padding: 72px 22px; }
  .content--first { padding-top: calc(72px + 48px); }
  .quote-section { padding: 84px 24px; }
  .banner { min-height: 62vh; }
  .banner--tall { min-height: 70vh; }
  .hero-content { padding-bottom: 16vh; }
  .band { padding: 56px 22px 48px; }
  .footer-contact .sep { display: block; height: 8px; overflow: hidden; margin: 0; opacity: 0; }
}

/* small phones */
@media (max-width: 420px) {
  body { font-size: 16px; }
  .footer-contact { font-size: 15px; }
}

/* ---- "Crafted for desktop" one-time card (mobile only, shown by JS) ---- */
.desk-nudge {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px;
  background: rgba(8, 8, 8, 0.97);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.desk-nudge.show { opacity: 1; visibility: visible; }
.desk-nudge[hidden] { display: none; }
.dn-card {
  width: 100%; max-width: 360px; min-width: 0; box-sizing: border-box;
  text-align: center; color: #fff;
  transform: translateY(14px); transition: transform 0.6s var(--ease-out, ease);
}
.dn-title, .dn-copy { overflow-wrap: break-word; }
.desk-nudge.show .dn-card { transform: none; }
.dn-mark { display: block; font-size: 20px; color: rgba(255,255,255,0.55); margin-bottom: 22px; letter-spacing: 0.2em; }
.dn-title {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(19px, 5.4vw, 25px); letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; margin-bottom: 18px;
}
.dn-copy { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.72); margin-bottom: 30px; }
.dn-btn {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #fff; background: none; border: 1px solid rgba(255,255,255,0.5);
  border-radius: 2px; padding: 13px 36px; cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.dn-btn:hover, .dn-btn:active { background: #fff; color: #111; }

/* mobile menu cascade — items unfold on open, reverse-fold on close (motion only) */
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu { transition: opacity 0.4s ease 0.5s, visibility 0s 0.9s; }        /* closing: linger for the cascade-out */
  body.menu-open .mobile-menu { transition: opacity 0.3s ease 0s, visibility 0s 0s; } /* opening: immediate */
  .mobile-menu nav > * {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.55s var(--ease-out);
    transition-delay: calc((var(--n, 13) - 1 - var(--i, 0)) * 0.035s);            /* reverse order on close */
  }
  body.menu-open .mobile-menu nav > * {
    opacity: 1; transform: none;
    transition-delay: calc(var(--i, 0) * 0.05s + 0.12s);                          /* forward stagger on open */
  }
}

/* ================================================================ motion
   All classes below are added by JS only — with JS off (or
   prefers-reduced-motion) the page renders fully static and visible. */
@media (prefers-reduced-motion: no-preference) {
  :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

  /* scroll reveal: fade + rise, staggered via --rvd set by JS */
  .rv {
    opacity: 0; transform: translateY(26px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out),
                filter 0.9s var(--ease-out);
    transition-delay: var(--rvd, 0s);
    will-change: opacity, transform;
  }
  .rv.in { opacity: 1; transform: none; }

  /* quotes: sharpen from a soft blur */
  .rv-blur { filter: blur(7px); }
  .rv-blur.in { filter: blur(0); }

  /* heading hairlines draw themselves out */
  .rv .h-line::after, .rv.h-line::after { width: 0; transition: width 0.8s var(--ease-out) 0.4s; }
  .rv.in .h-line::after, .rv.h-line.in::after { width: 56px; }

  /* banner photo zoom-settle */
  .banner .banner-bg { transform: scale(1.06); transition: transform 1.9s var(--ease-out); }
  .banner.in .banner-bg { transform: scale(1); }
  /* banner title tracks in */
  .banner .display { letter-spacing: 0.3em; opacity: 0; transition: letter-spacing 1.2s var(--ease-out), opacity 1.2s var(--ease-out); }
  .banner.in .display { letter-spacing: 0.12em; opacity: 1; }

  /* values cascade */
  .val { display: inline-block; }

  /* hero entrance (classes flipped on load; .js guard = never hidden without JS).
     NOTE: restore rules below must MATCH the pre-hide specificity (html.js …) and
     come after it — otherwise the pre-hide wins and the hero never appears. */
  html.js .hero .hero-content, html.js .hero .scroll-cue { opacity: 0; }
  html.js .hero-go .hero-content { opacity: 1; }
  html.js .hero-go .scroll-cue { opacity: 0.85; }
  .hero-go .hero-bg { animation: kenburns 12s var(--ease-out) both; }
  .hero-go .hero-content .display-xl { animation: heroTitle 1.2s var(--ease-out) both; }
  .hero-go .hero-content .hero-sub { animation: heroSub 1.1s var(--ease-out) 0.4s both; }
  .hero-go .scroll-cue { animation: cueIn 1s ease 1.2s backwards, cue 2.2s ease-in-out 2.2s infinite; }

  /* page-top banners get the same entrance as the About hero */
  .banner-go .display { animation: heroTitle 1.2s var(--ease-out) both; }
  .banner-go .banner-sub { animation: heroSub 1.1s var(--ease-out) 0.4s both; }

  @keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1); } }
  @keyframes heroTitle {
    from { opacity: 0; transform: translateY(34px); letter-spacing: 0.3em; }
    to   { opacity: 1; transform: none; letter-spacing: 0.12em; }
  }
  @keyframes heroSub {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes cueIn { from { opacity: 0; } to { opacity: 0.85; } }
}
.vsep { margin: 0 10px; opacity: 0.4; }

/* ---------------------------------------------- embedded project video */
.proj-video { position: relative; width: min(94vw, 1500px); margin: 48px auto 0; margin-left: 50%; transform: translateX(-50%); aspect-ratio: 16 / 9; }
.proj-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; box-shadow: 0 2px 22px rgba(0,0,0,0.12); }
.proj-video-label { text-align: center; margin-top: 40px; }

/* video as a carousel slide */
.car-slide--video { display: flex; align-items: center; justify-content: center; }
.car-video { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 88vh; }
.car-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; box-shadow: 0 2px 22px rgba(0,0,0,0.08); }

/* ============================================================
   HN LT TYPOGRAPHY + TEAL PALETTE — applied site-wide 2026-07-30
   (ported from _typepreview.html; MENU/dropdown animation excluded)
   Self-hosted webfont (desktop-license source; web license needed
   before public launch). URLs relative to /css/style.css.
   ============================================================ */
@font-face{font-family:"HN LT";src:url("../assets/fonts/HelveticaNeueLTCom-UltLt.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap;}
@font-face{font-family:"HN LT";src:url("../assets/fonts/HelveticaNeueLTCom-Th.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:"HN LT";src:url("../assets/fonts/HelveticaNeueLTCom-Lt.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"HN LT";src:url("../assets/fonts/HelveticaNeueLTCom-Roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"HN LT";src:url("../assets/fonts/HelveticaNeueLTCom-Md.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"HN LT";src:url("../assets/fonts/HelveticaNeueLTCom-Bd.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"HN LT";src:url("../assets/fonts/HelveticaNeueLTCom-Hv.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"HN LT";src:url("../assets/fonts/HelveticaNeueLTCom-Blk.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;}

:root{--display:"HN LT","Helvetica Neue",Arial,sans-serif !important;--text:"HN LT","Helvetica Neue",Arial,sans-serif !important;--serif:"HN LT","Helvetica Neue",Arial,sans-serif !important;--accent:#2C708C;}
body{font-family:"HN LT","Helvetica Neue",Arial,sans-serif !important;font-weight:400;}
p,.body,li{font-family:"HN LT","Helvetica Neue",Arial,sans-serif !important;font-weight:400;}
.lede{font-weight:300 !important;}
/* hero — signature thin/thick */
.hero-content .display-xl{font-size:clamp(44px,7vw,104px);line-height:.9;font-weight:900;}
.hn-thin{font-weight:200;letter-spacing:.01em;}
.hn-black{font-weight:500;letter-spacing:-.025em;}
.hero-sub{font-family:"HN LT",sans-serif;font-weight:300;letter-spacing:.42em;text-transform:uppercase;}
/* section headings + nav */
.band .display,.h-line,.display{font-weight:900;letter-spacing:-.02em;}
.main-nav a,.nav-work-btn{font-family:"HN LT",sans-serif;font-weight:500;}
/* eyebrows in accent teal */
.kicker,.eyebrow,.band-eyebrow{color:var(--accent) !important;font-weight:500 !important;letter-spacing:.2em !important;}
/* interactive accent */
a.btn-ghost:hover,.car-slide a:hover{border-color:var(--accent) !important;}
/* rail: brighter/heavier + brighter teal active */
.rail-item{opacity:.72 !important;}
.rail-item:hover,.rail-item.active{opacity:1 !important;}
.rail-label{font-weight:500 !important;font-size:11px !important;letter-spacing:.22em !important;}
.rail-item.active .rail-label{color:#55ACC9 !important;}
.rail-item.active .rail-dot{background:#55ACC9 !important;}
.rail-puck{border-color:#55ACC9 !important;}
/* work-band photo titles: tight thin/thick */
.banner-content .display{font-weight:500 !important;letter-spacing:-.035em !important;}
.banner-content .display .hn-thin{font-weight:200;letter-spacing:-.005em;}
.banner-content .display .hn-black{font-weight:500;letter-spacing:-.04em;}
/* between-project type base */
.band-kicker{font-family:"HN LT",sans-serif !important;color:var(--accent) !important;font-weight:500 !important;letter-spacing:.22em !important;text-transform:uppercase;}
.band-sub{font-family:"HN LT",sans-serif !important;font-weight:300 !important;letter-spacing:.03em;color:#6B6563 !important;}
/* top-nav underline: white over dark hero, teal when header solid/scrolled; aligned */
.main-nav{align-items:center !important;}
.main-nav > a,.nav-work-btn{border-bottom:2px solid transparent !important;padding-bottom:3px !important;}
.main-nav a[aria-current="page"]{border-bottom-color:#fff !important;}
.site-header.scrolled .main-nav a[aria-current="page"],.site-header--solid .main-nav a[aria-current="page"]{border-bottom-color:#2C708C !important;}

/* pull-quotes: OFF Bodoni italic -> current HN LT face, upright (2026-07-30) */
.quote-section blockquote,.quote-inline blockquote,.founder-quote{
  font-family:"HN LT","Helvetica Neue",Arial,sans-serif !important;
  font-style:normal !important;
  font-weight:300 !important;
  letter-spacing:-.01em !important;
}

/* ============================================================
   WORK DROPDOWN — ROLLOVER = INVERSION + piano-keys (2026-07-30)
   Replaces the slide-right hover. Open/close cascade (lines ~91-103)
   left untouched. Inversion is driven by the JS .hov class (main.js)
   so each tile's in/out completes even on a fast sweep.
   ============================================================ */
/* neutralize the old slide-right + light overlay + :hover color */
.nav-drop > a:hover > img       { transform:none !important; filter:none !important; }
.nav-drop > a:hover > .drop-txt { transform:none !important; }
.nav-drop > a:hover .drop-co    { color:inherit !important; }
.nav-drop > a:hover::before     { opacity:0 !important; }        /* old :hover trigger off */
/* repurpose ::before as the DARK inversion fill, triggered by .hov */
.nav-drop > a::before   { background:#3E3E3E !important; transition:opacity .45s cubic-bezier(.33,0,.2,1) !important; }
.nav-drop > a.hov::before { opacity:1 !important; }
/* text inverts: company -> white, role -> teal; smooth ~.45s each way */
.nav-drop .drop-co, .nav-drop .drop-role { transition:color .45s cubic-bezier(.33,0,.2,1) !important; }
.nav-drop > a.hov .drop-co   { color:#fff !important; }
.nav-drop > a.hov .drop-role { color:#55ACC9 !important; }
.nav-drop > a.hov > img      { filter:brightness(1.05) saturate(1.05) !important; transition:filter .45s !important; }

/* ===== CASE-STUDY LAYOUT SYSTEM 2026-07-31 — tight measure, structured, image-forward ===== */
.cs-eyebrow{font-family:"HN LT",sans-serif !important;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-size:12px;margin:0 0 16px;}
.cs-h{font-family:"HN LT",sans-serif !important;font-weight:900;letter-spacing:-.02em;font-size:clamp(26px,3.2vw,42px);line-height:1.05;margin:0 0 26px;max-width:28ch;}
.cs-copy{max-width:60ch;}
.cs-copy p{margin:0 0 18px;line-height:1.62;}
.cs-copy p:last-child{margin-bottom:0;}
.cs-list{max-width:66ch;list-style:none;padding:0;margin:26px 0 0;}
.cs-list li{padding:18px 0;border-top:1px solid rgba(0,0,0,.12);line-height:1.55;}
.cs-list li:last-child{border-bottom:1px solid rgba(0,0,0,.12);}
.cs-list li strong{display:block;margin-bottom:5px;font-weight:700;}
.cs-spread{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;margin-top:10px;}
.cs-spread img{width:100%;height:auto;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.12);}
.cs-spread .cs-copy{max-width:48ch;}
.cs-pull{max-width:22ch;margin:12px auto;text-align:center;font-family:"HN LT",sans-serif !important;font-weight:200;font-size:clamp(30px,4.6vw,54px);line-height:1.07;letter-spacing:-.02em;color:#1a1a1a;}
.cs-pull .cs-pull-sub{display:block;margin:20px auto 0;max-width:42ch;font-size:15px;font-weight:400;letter-spacing:.01em;line-height:1.5;color:#6B6563;}
@media(max-width:720px){.cs-spread{grid-template-columns:1fr;gap:26px;}.cs-h{font-size:26px;max-width:none;}}
/* case-study centered column wrapper (fixes tint-section child alignment vs the fixed rail) */
.cs-wrap{max-width:760px;margin:0 auto;}
/* CASE-STUDY PAGE (.cs-page) — one consistent LEFT-aligned system, no centered headings.
   Only text-align changes (no margin changes) so centered blocks still clear the fixed rail. */
.cs-page .h-line{text-align:left;}
.cs-page .h-line::after{margin-left:0;}
.cs-page .h-sub{text-align:left;}
.cs-page .kicker{text-align:left;}
/* align tint-section content with plain-section content (704 = .content 760 minus 28+28 padding) */
.cs-page .content--tint > *{max-width:704px;}
/* ===== IMAGE-FORWARD CASE-STUDY COMPONENTS (2026-07-31) ===== */
/* text + image side by side */
.cs-page .cs-spread{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:56px;align-items:center;max-width:1180px;margin:0 auto;padding:96px 28px;}
.cs-page .cs-spread--tint{background:var(--tint);max-width:none;}
.cs-page .cs-spread--tint > *{max-width:none;}
.cs-page .cs-spread--tint .cs-spread-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:56px;align-items:center;}
.cs-page .cs-spread-txt{max-width:48ch;}
.cs-page .cs-spread-txt .cs-copy{max-width:none;}
.cs-page .cs-spread img{width:100%;height:auto;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.16);display:block;}
.cs-page .cs-spread--rev .cs-spread-txt{order:2;}
/* full-bleed feature: the master flow, a real centerpiece */
.cs-page .cs-flow{background:var(--tint);padding:84px 28px;margin:0;text-align:center;}
.cs-page .cs-flow img{max-width:860px;width:100%;height:auto;box-shadow:0 34px 80px rgba(0,0,0,.2);border-radius:4px;}
.cs-page .cs-flow figcaption{max-width:680px;margin:26px auto 0;font-size:14px;line-height:1.55;color:#6B6563;text-align:left;}
/* image gallery row */
.cs-page .cs-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1180px;margin:34px auto 0;padding:0 28px;}
.cs-page .cs-gallery img{width:100%;height:auto;border-radius:6px;display:block;box-shadow:0 18px 44px rgba(0,0,0,.14);}
/* large product screen */
.cs-page .cs-shot{max-width:1180px;margin:26px auto 0;padding:0 28px;}
.cs-page .cs-shot img{width:100%;height:auto;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.14);display:block;}
.cs-page .cs-shot figcaption{margin:12px 2px 0;font-size:14px;color:#6B6563;}
@media(max-width:760px){.cs-page .cs-spread,.cs-page .cs-spread--tint .cs-spread-inner{grid-template-columns:1fr;gap:28px;}.cs-page .cs-gallery{grid-template-columns:1fr;}.cs-page .cs-spread--rev .cs-spread-txt{order:0;}}
/* real-screen flow band — phone screens floating on neutral, one soft shadow, consistent frame */
.cs-page .cs-screens{background:#f3f3f1;padding:82px 28px;margin:0;}
.cs-page .cs-screens-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:44px;align-items:start;}
.cs-page .cs-screens figure{margin:0;}
.cs-page .cs-screens img{width:100%;height:auto;border-radius:16px;box-shadow:0 22px 48px rgba(0,0,0,.18);display:block;}
.cs-page .cs-screens figcaption{margin-top:18px;font-family:"HN LT",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500;}
.cs-page .cs-screens .cs-sc-note{margin-top:6px;font-size:14px;line-height:1.5;color:#6B6563;max-width:26ch;}
.cs-page .cs-screens .cs-sc-arrow{align-self:center;text-align:center;color:#c9c9c9;font-size:22px;}
@media(max-width:760px){.cs-page .cs-screens-inner{grid-template-columns:1fr;gap:34px;max-width:320px;}}
/* ===== CLEAN CASE-STUDY BLOCK SYSTEM (2026-07-31 rebuild) — one left-aligned column, no old components ===== */
.cs-page .cs-block{max-width:760px;margin:0 auto;padding:112px 28px 0;}
.cs-page .cs-block + .cs-block{padding-top:64px;}
.cs-page .cs-block .cs-copy{max-width:62ch;}
.cs-page .cs-block .cs-h{margin-bottom:30px;}
/* the user quotes as a clean typographic list — replaces the hated two-box */
.cs-page .cs-quotes{max-width:62ch;list-style:none;padding:0;margin:34px 0 0;}
.cs-page .cs-quotes li{font-family:"HN LT",sans-serif;font-weight:300;font-size:clamp(19px,2vw,24px);line-height:1.4;color:#2a2a2a;padding:22px 0;border-top:1px solid rgba(0,0,0,.1);}
.cs-page .cs-quotes li:last-child{border-bottom:1px solid rgba(0,0,0,.1);}
/* full-width pull-quote band (whitespace, its own moment) */
.cs-page .cs-quoteband{padding:120px 28px;}
/* full-bleed image feature (breaks the column) */
.cs-page .cs-feature{margin:96px 0 0;padding:0;}
.cs-page .cs-feature img{width:100%;height:auto;display:block;}
.cs-page .cs-feature figcaption{max-width:760px;margin:16px auto 0;padding:0 28px;font-size:14px;color:#6B6563;text-align:center;}
.cs-page .cs-feature--pad{background:#f3f3f1;padding:72px 28px;}
.cs-page .cs-feature--pad img{max-width:1080px;margin:0 auto;border-radius:6px;box-shadow:0 18px 44px rgba(0,0,0,.14);}
.cs-page .cs-feature--pad figcaption{padding:0;}
/* the master flow — the centerpiece: tall, on tint, big */
.cs-page .cs-flowband{background:#f3f3f1;padding:96px 28px;margin-top:96px;text-align:center;}
.cs-page .cs-flowband img{max-width:820px;width:100%;height:auto;box-shadow:0 34px 80px rgba(0,0,0,.22);border-radius:3px;}
.cs-page .cs-flowband figcaption{max-width:680px;margin:28px auto 0;font-size:14px;line-height:1.55;color:#6B6563;text-align:left;}
/* pull-quotes left-aligned to the grid (no more centered/left mixing) */
.cs-page .cs-quoteband{max-width:760px;margin:0 auto;}
.cs-page .cs-pull{max-width:18ch;margin:0;text-align:left;}
.cs-page .cs-pull .cs-pull-sub{margin:22px 0 0;margin-left:0;margin-right:0;text-align:left;}

/* ===== User journey map ===== */
.cs-page .cs-journey{max-width:1080px;margin:44px auto 0;padding:0 28px;}
.cs-page .cs-journey-arc{width:100%;height:84px;display:block;overflow:visible;margin-bottom:-2px;}
.cs-page .cs-journey-arc path{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.85;}
.cs-page .cs-journey-arc circle{fill:#fff;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;}
.cs-page .cs-journey-arc circle.low{fill:var(--accent);}
.cs-page .cj-grid{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid rgba(0,0,0,.16);}
.cs-page .cj-stage{padding:20px 18px 24px 18px;border-right:1px solid rgba(0,0,0,.07);}
.cs-page .cj-stage:first-child{padding-left:0;}
.cs-page .cj-stage:last-child{border-right:0;padding-right:0;}
.cs-page .cj-num{font-family:"HN LT",sans-serif;font-size:10.5px;letter-spacing:.1em;color:var(--accent);font-weight:600;margin:0 0 8px;text-transform:uppercase;}
.cs-page .cj-phase{font-weight:600;font-size:14px;line-height:1.25;margin:0 0 11px;color:#2b2b2b;}
.cs-page .cj-do{font-size:12.5px;line-height:1.48;color:#555;margin:0 0 11px;}
.cs-page .cj-think{font-size:13px;line-height:1.4;color:#8a8480;font-style:italic;margin:0;}
.cs-page .cj-stage.cj-friction{background:rgba(44,112,140,.055);}
.cs-page .cj-pain{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--accent);}
.cs-page .cj-pain span{font-weight:700;margin-right:2px;}
.cs-page .cj-pain strong{font-weight:600;}
.cs-page .cj-take{max-width:none;margin:30px 0 0;font-size:17px;line-height:1.6;color:#2b2b2b;font-weight:300;}
.cs-page .cj-take strong{color:var(--accent);font-weight:500;}
@media(max-width:760px){
  .cs-page .cs-journey-arc{display:none;}
  .cs-page .cj-grid{grid-template-columns:1fr;border-top:0;}
  .cs-page .cj-stage{border-right:0;border-top:1px solid rgba(0,0,0,.12);padding:20px 0;}
  .cs-page .cj-stage:last-child{padding-bottom:0;}
}

/* ===== Before / after pair ===== */
.cs-page .cs-beforeafter{max-width:820px;margin:34px auto 0;padding:0 28px;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:end;}
.cs-page .cs-beforeafter figure{margin:0;}
.cs-page .cs-beforeafter img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 18px 44px rgba(0,0,0,.14);}
.cs-page .cs-beforeafter figcaption{margin-top:14px;font-size:13.5px;line-height:1.5;color:#6B6563;}
.cs-page .cs-beforeafter .ba-tag{display:block;font-family:"HN LT",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:5px;}
@media(max-width:600px){.cs-page .cs-beforeafter{grid-template-columns:1fr;gap:30px;max-width:340px;}}

/* ===== Keep wide media clear of the fixed left rail ===== */
@media(min-width:1181px){
  .cs-page .cs-feature{max-width:min(1040px,calc(100vw - 360px));margin-left:auto;margin-right:auto;padding:0;}
  .cs-page .cs-feature--pad{max-width:min(1040px,calc(100vw - 360px));}
  .cs-page .cs-screens-inner{max-width:min(1040px,calc(100vw - 360px));}
  .cs-page .cs-flowband img{max-width:min(860px,calc(100vw - 360px));}
  .cs-page .cs-gallery{max-width:min(1120px,calc(100vw - 360px));}
  .cs-page .cs-journey{max-width:min(1080px,calc(100vw - 360px));}
  .cs-page .cs-beforeafter{max-width:min(820px,calc(100vw - 360px));}
}

/* ===== Primary persona card ===== */
.cs-page .cs-persona{max-width:1080px;margin:36px auto 0;padding:42px;background:var(--tint);border-radius:12px;display:grid;grid-template-columns:290px 1fr;gap:46px;}
.cs-page .pc-id{border-right:1px solid rgba(0,0,0,.1);padding-right:38px;}
.cs-page .pc-avatar{width:86px;height:86px;border-radius:50%;background:linear-gradient(150deg,#3a89a6,#2C708C);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"HN LT",sans-serif;font-weight:600;font-size:29px;letter-spacing:.03em;margin-bottom:20px;box-shadow:0 8px 22px rgba(44,112,140,.28);}
.cs-page .pc-name{font-weight:600;font-size:22px;margin:0 0 3px;color:#222;}
.cs-page .pc-role{font-size:13.5px;color:#6B6563;margin:0 0 18px;letter-spacing:.02em;}
.cs-page .pc-tag{font-style:italic;font-size:16px;line-height:1.5;color:var(--accent);margin:0 0 22px;font-weight:300;}
.cs-page .pc-meta{list-style:none;margin:0;padding:0;}
.cs-page .pc-meta li{font-size:13px;line-height:1.45;color:#555;padding:8px 0;border-top:1px solid rgba(0,0,0,.08);}
.cs-page .pc-meta li span{display:block;font-family:"HN LT",sans-serif;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#9a938f;margin-bottom:2px;}
.cs-page .pc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;align-content:start;}
.cs-page .pc-h{font-family:"HN LT",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:2px 0 15px;}
.cs-page .pc-col ul{list-style:none;margin:0;padding:0 0 0 14px;}
.cs-page .pc-col li{font-size:14px;line-height:1.5;color:#444;padding:0 0 13px;position:relative;}
.cs-page .pc-col li::before{content:"";position:absolute;left:-14px;top:8px;width:5px;height:5px;border-radius:50%;background:rgba(44,112,140,.55);}
@media(max-width:860px){
  .cs-page .cs-persona{grid-template-columns:1fr;gap:26px;padding:28px;}
  .cs-page .pc-id{border-right:0;border-bottom:1px solid rgba(0,0,0,.1);padding-right:0;padding-bottom:24px;}
  .cs-page .pc-cols{grid-template-columns:1fr;gap:22px;}
}

/* ===== Simplified happy-path flow ===== */
.cs-page .cs-happyflow{max-width:1080px;margin:32px auto 0;padding:0 28px;}
.cs-page .hf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.cs-page .hf li{position:relative;padding:18px 16px;border:1px solid rgba(0,0,0,.1);border-radius:6px;}
.cs-page .hf li::after{content:"\203A";position:absolute;top:50%;right:-11px;transform:translateY(-50%);color:#c4beb9;font-size:18px;z-index:2;}
.cs-page .hf li:last-child::after{display:none;}
.cs-page .hf-n{display:block;font-family:"HN LT",sans-serif;font-size:10.5px;letter-spacing:.14em;color:#b0a9a5;font-weight:600;margin-bottom:9px;}
.cs-page .hf-t{display:block;font-weight:600;font-size:14.5px;line-height:1.2;color:#2b2b2b;margin-bottom:5px;}
.cs-page .hf-d{display:block;font-size:12px;line-height:1.4;color:#7a746f;}
.cs-page .hf-key{background:rgba(44,112,140,.07);border-color:rgba(44,112,140,.35);}
.cs-page .hf-key .hf-t{color:var(--accent);}
.cs-page .cs-happyflow-cap{max-width:1080px;margin:16px auto 0;padding:0 28px;font-size:13.5px;color:#6B6563;}
@media(max-width:760px){.cs-page .hf{grid-template-columns:1fr 1fr;gap:12px;}.cs-page .hf li::after{display:none;}}

/* ===== Pull-quote as a designed moment ===== */
.cs-page .cs-quoteband{max-width:760px;margin:0 auto;padding:104px 28px;}
.cs-page .cs-pull{position:relative;max-width:19ch;margin:0;padding-left:0;font-weight:300;line-height:1.08;font-size:clamp(34px,5vw,58px);color:#1f1f1f;text-align:left;}
.cs-page .cs-pull::before{content:"\201C";position:absolute;left:-.62em;top:-.16em;font-size:1.15em;line-height:1;color:var(--accent);opacity:.45;font-weight:400;}
.cs-page .cs-pull .cs-pull-sub{display:block;margin-top:26px;padding-left:0;font-size:16px;line-height:1.55;font-weight:400;color:#6B6563;max-width:38ch;}

/* ===== Flow band: robust centering + demoted full artifact ===== */
.cs-page .cs-flowband a.fig-link,.cs-page .cs-flowband img{display:block;margin-left:auto;margin-right:auto;}
.cs-page .cs-flowband--full{padding-top:64px;}
/* (dead rule removed — the master-flow image is styled by .fb-img below) */

@media(min-width:1181px){
  .cs-page .cs-persona{max-width:min(1080px,calc(100vw - 360px));}
  .cs-page .cs-happyflow,.cs-page .cs-happyflow-cap{max-width:min(1080px,calc(100vw - 360px));}
}

/* journey persona label */
.cs-page .cj-who{display:flex;align-items:center;gap:11px;margin:0 0 22px;font-weight:600;font-size:15px;color:#2b2b2b;}
.cs-page .cj-who-av{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg,#3a89a6,#2C708C);color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em;}
.cs-page .cj-who-role{font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9a938f;padding-left:11px;margin-left:4px;border-left:1px solid rgba(0,0,0,.14);}

/* journey per-stage feeling tag (the felt experience, moment to moment) */
.cs-page .cj-feel{display:inline-block;font-family:"HN LT",sans-serif;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:3px 8px;border-radius:2px;margin:0 0 11px;}
.cs-page .cj-feel--low{color:#a35a4e;background:rgba(163,90,78,.10);}
.cs-page .cj-feel--up{color:#2f7d6b;background:rgba(47,125,107,.11);}

/* persona: explicit "definition of amazing" line */
.cs-page .pc-amazing{margin:14px 0 4px;font-size:13.5px;line-height:1.5;color:#2b2b2b;}
.cs-page .pc-amazing span{display:block;font-family:"HN LT",sans-serif;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:3px;}
/* the loop-back beat */
.cs-page .cs-loop-cap{max-width:1080px;margin:16px auto 0;padding:0 28px;font-size:14px;line-height:1.6;color:#6B6563;}
@media(min-width:1181px){.cs-page .cs-loop-cap{max-width:min(1080px,calc(100vw - 360px));}}
.cs-page .cs-copy--afterquotes{margin-top:24px;}
.cs-page .hf--tri{grid-template-columns:repeat(3,1fr);}
.cs-page .cs-quotes-label{font-family:"HN LT",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:20px 0 12px;}

/* master-flow showcase — the marquee artifact, sold as a hero */
.cs-page .cs-flowband--full{background:#141414;padding:88px 28px 72px;margin-top:60px;text-align:center;}
.cs-page .fb-eyebrow{font-family:"HN LT","Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7ec4dd;font-weight:600;margin:0 0 14px;}
.cs-page .fb-h{font-family:"HN LT","Helvetica Neue",Arial,sans-serif;color:#fff;font-weight:700;font-size:clamp(30px,3.6vw,46px);line-height:1.05;margin:0 0 18px;}
.cs-page .fb-sub{color:#b7b2ad;font-size:16px;line-height:1.55;max-width:600px;margin:0 auto 48px;}
.cs-page .cs-flowband--full .fb-fig{margin:0;}
.cs-page .cs-flowband--full .fb-img{max-width:min(1180px,calc(100vw - 160px));width:100%;height:auto;border-radius:6px;box-shadow:0 40px 120px rgba(0,0,0,.6);}
.cs-page .cs-flowband--full figcaption{color:#9a958f;font-size:14px;line-height:1.55;max-width:620px;margin:30px auto 0;text-align:center;}
.cs-page .cs-flowband--full figcaption a{color:#fff;text-decoration:none;}
.cs-page .cs-flowband--full figcaption a:hover{color:#111;text-decoration:none;}
@media(max-width:700px){.cs-page .cs-flowband--full .fb-img{max-width:100%;}.cs-page .cs-flowband--full{padding:56px 20px 48px;}}

/* --- reviewer sell/fix pass (v149) --- */
.cs-page .cs-quoteband{padding:76px 28px;}
.cs-page .cs-pull{max-width:none;}
.cs-page .cs-pull .cs-pull-head{display:block;max-width:16ch;}
.cs-page .cs-pull .cs-pull-sub{display:block;max-width:44ch;margin-top:26px;}
.cs-page .banner-deck{max-width:660px;margin:16px auto 0;color:rgba(255,255,255,.92);font-size:clamp(15px,1.5vw,18px);line-height:1.5;font-weight:300;}
.cs-page .fb-btn{display:inline-block;border:1px solid rgba(126,196,221,.6);color:#7ec4dd;padding:12px 24px;border-radius:100px;font-family:"HN LT","Helvetica Neue",Arial,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-decoration:none;transition:background .2s,color .2s;}
.cs-page .fb-btn:hover{background:#7ec4dd;color:#141414;}
.cs-page .cs-flowband--full figcaption a.fb-btn{text-decoration:none;}

/* --- reviewer batch 2 --- */
.cs-page .cs-beforeafter{align-items:start;}
.cs-page .cs-beforeafter img{height:auto;}
.cs-page .cs-verdict{max-width:760px;margin:56px auto 6px;padding:2px 28px;position:relative;font-weight:300;font-size:clamp(24px,3vw,34px);line-height:1.22;color:#1f1f1f;}
.cs-page .cs-verdict::before{content:"";position:absolute;left:6px;top:.18em;bottom:.18em;width:3px;background:var(--accent);}
.cs-page .pc-cols{grid-template-columns:1fr 1fr;}
.cs-page .pc-col:nth-child(3){grid-column:1 / -1;margin-top:8px;border-top:1px solid rgba(0,0,0,.08);padding-top:18px;}

/* --- verdict between before/after, centered pull-quote, back-button padding --- */
.cs-page .cs-beforeafter--3{max-width:min(1000px,calc(100vw - 320px));grid-template-columns:1fr 1.15fr 1fr;align-items:center;}
.cs-page .cs-verdict{max-width:none;margin:0;padding:0 10px;position:static;text-align:center;font-weight:300;font-size:clamp(18px,1.9vw,25px);line-height:1.3;color:#1f1f1f;}
.cs-page .cs-verdict::before{content:none;}
@media(max-width:640px){.cs-page .cs-beforeafter--3{grid-template-columns:1fr;}.cs-page .cs-verdict{padding:12px 0;}}
.cs-page .cs-quoteband{text-align:center;}
.cs-page .cs-pull{text-align:center;max-width:none;}
.cs-page .cs-pull .cs-pull-head{display:block;max-width:18ch;margin:0 auto;}
.cs-page .cs-pull .cs-pull-sub{display:block;max-width:40ch;margin:26px auto 0;}
.cs-page .cs-pull::before{left:50%;top:-.5em;transform:translateX(-50%);}
.cs-page .back-row{margin-bottom:84px;}

/* standalone centered quote after the verify redline */
.cs-page .cs-quote-mid{max-width:660px;margin:60px auto;padding:0 28px;text-align:center;font-weight:300;font-size:clamp(23px,2.8vw,33px);line-height:1.26;color:#1f1f1f;border:0;}
.cs-page .cs-quote-mid::before{content:"\201C";display:block;color:var(--accent);opacity:.5;font-size:2.1em;line-height:.1;margin-bottom:.26em;font-weight:400;}

/* case-study images open in the shared lightbox */
.cs-page .case-img{display:block;cursor:zoom-in;}
.cs-page .case-img:hover{opacity:.93;transition:opacity .2s;}

/* modern browser frame for Docs.com screenshots (replaces dated iMac mockups) */
.cs-page .browser-frame{border-radius:8px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.14);border:1px solid rgba(0,0,0,.08);background:#fff;}
.cs-page .browser-frame .bf-bar{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#efefec;border-bottom:1px solid rgba(0,0,0,.07);}
.cs-page .browser-frame .bf-dots{display:inline-flex;gap:6px;flex:0 0 auto;}
.cs-page .browser-frame .bf-dots span{width:10px;height:10px;border-radius:50%;background:#cfccc6;display:block;}
.cs-page .browser-frame .bf-url{font-family:"HN LT","Helvetica Neue",Arial,sans-serif;font-size:11px;color:#8a857f;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:6px;padding:5px 14px;letter-spacing:.03em;min-width:180px;}
.cs-page .browser-frame img{display:block;width:100%;height:auto;}

/* A/B results component (Docs.com hub) — replaces the low-res spreadsheet image */
.cs-page .ab-results{max-width:680px;margin:34px auto 0;padding:0 28px;}
.cs-page .ab-lead{font-size:15px;line-height:1.55;color:#6B6563;margin:0 0 24px;}
.cs-page .ab-lead strong{color:var(--accent);font-weight:600;}
.cs-page .ab-row{display:grid;grid-template-columns:138px 1fr 48px;align-items:center;gap:14px;margin:0 0 11px;}
.cs-page .ab-label{font-size:12.5px;color:#555;text-align:right;line-height:1.2;}
.cs-page .ab-track{display:block;background:#ececea;border-radius:3px;height:20px;overflow:hidden;}
.cs-page .ab-bar{display:block;height:100%;background:var(--accent);border-radius:3px;}
.cs-page .ab-val{font-family:"HN LT","Helvetica Neue",Arial,sans-serif;font-size:12.5px;font-weight:600;color:#2b2b2b;}
.cs-page .ab-row--base .ab-bar{background:#c9c4be;}
.cs-page .ab-row--base .ab-label,.cs-page .ab-row--base .ab-val{color:#9a938f;}
.cs-page .ab-row--win .ab-val{color:var(--accent);}
.cs-page .ab-cap{font-size:13px;color:#8a857f;margin:18px 0 0;}
@media(max-width:600px){.cs-page .ab-row{grid-template-columns:92px 1fr 44px;}.cs-page .ab-label{font-size:11px;}}

/* smart-home persona cards (Option A — matches the case-study light theme) */
.persona-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:32px auto 0;padding:0 28px;}
.persona-card .pw{margin-bottom:14px;}
.persona-card .pw + ul{margin-top:0;}
@media(max-width:819px){.persona-row{grid-template-columns:1fr;}}
.persona-card{border:1px solid var(--hairline);border-radius:12px;padding:26px;background:var(--tint);}
.persona-card .pk{font-family:"HN LT",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 12px;}
.persona-card .pn{font-size:19px;font-weight:600;margin:0 0 3px;}
.persona-card .pr{color:#8a8f98;font-size:13px;margin:0 0 16px;}
.persona-card .pw{font-size:15px;line-height:1.55;margin:0 0 6px;}
.persona-card .pw b{color:var(--accent);font-weight:600;}
.persona-card .pl{font-family:"HN LT",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a8f98;margin:18px 0 8px;font-weight:500;}
.persona-card ul{margin:0;padding-left:18px;}
.persona-card li{font-size:14px;line-height:1.5;margin:0 0 7px;}



/* tall-image gallery variant (phone screenshots / vertical wireframes) */
.cs-page .cs-gallery--tall{grid-template-columns:repeat(3,1fr);}
@media(max-width:760px){.cs-page .cs-gallery--tall{grid-template-columns:repeat(2,1fr);}}




/* smart-home fixes: narrow phone-comparison feature + top-align galleries */
.cs-page .cs-feature--narrow{max-width:760px;margin-left:auto;margin-right:auto;}
.cs-page .cs-gallery{align-items:start;}


/* long-press detail pair — force identical framing so they can't misalign */
/* ROOT-CAUSE FIX: old .case-img margins (52px first / 18px rest) staggered grid items */
.cs-page .cs-gallery .case-img,
.cs-page .cs-feature .case-img{margin:0;}