/* Shared stylesheet for all case study pages (shopify-marketing.html, course-hero.html).
   Page-specific overrides (hero gradient colors, title) live in a small
   inline <style> block in each page, loaded after this file. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black: #0e0e0e;
  --grey: #666666;
  --grey-mid: #6a7282;
  --grey-light: #f9fafb;
  --accent: #d4a373;
  --border: rgba(0,0,0,0.08);
  --border-subtle: rgba(0,0,0,0.2);
  --max-width: 1000px;
  --hero-gradient: linear-gradient(135deg, #eff6ff 0%, #faf5ff 100%);
  --hero-placeholder-gradient: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--black);
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.fraunces {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-weight: 400;
}

/* ── HEADER ── */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid var(--border);
  height: 53px; display: flex; align-items: center; padding: 0 96px;
}
.header-inner {
  max-width: var(--max-width); width: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
}
.logo { font-size: 14px; letter-spacing: 1.95px; text-transform: uppercase; color: var(--black); text-decoration: none; }
nav { display: flex; gap: 24px; }
.header-inner nav a { font-size: 14px; color: var(--black); text-decoration: none; letter-spacing: -0.15px; position: relative; padding-bottom: 2px; }
.header-inner nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.2s ease; }
.header-inner nav a:hover::after { width: 100%; }

/* ── HERO ── */
.cs-hero {
  background: var(--hero-gradient);
  background-attachment: fixed;
  padding: 100px 24px; display: flex; justify-content: center;
}
.cs-hero-inner { max-width: var(--max-width); width: 100%; display: flex; flex-direction: column; gap: 36px; }
/* align-items: flex-start on both the row and each link so "Back"/"Next" line up at the
   same top edge even when one side's title wraps to more lines than the other. */
.cs-nav { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.cs-nav-link {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; color: var(--grey-mid); text-decoration: none;
  letter-spacing: 0.55px; text-transform: uppercase; transition: color 0.15s;
  max-width: 50%; min-width: 0;
}
.cs-nav-link:hover { color: var(--black); }
.cs-nav-next-stack { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; min-width: 0; }
.cs-nav-next-stack.cs-nav-stack-left { align-items: flex-start; text-align: left; }
.cs-nav-next-label { font-size: 11px; letter-spacing: 0.55px; text-transform: uppercase; color: var(--grey-mid); }
.cs-nav-next-name { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 0, 'WONK' 1; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--black); font-weight: 450; }
.cs-intro { display: flex; flex-direction: column; gap: 14px; }
.cs-title { font-size: 56px; line-height: 1.1; color: var(--black); }
.cs-subtitle { font-size: 19px; line-height: 1.6; color: var(--grey); letter-spacing: 0.07px; }
/* Frame keeps a fixed footprint and paints the hero gradient behind the image at all
   times, so if the image's aspect ratio doesn't fill the frame exactly, the gradient
   (not empty space) shows around it. The image itself shrinks to its own contain-fit
   size (rather than staying at the frame's full box) so its border-radius rounds the
   actual visible photo edges, not just the outer frame. */
.cs-hero-image-frame {
  width: 100%; height: 510px; border-radius: 10px;
  background: var(--hero-gradient);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cs-hero-image {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  display: block; border-radius: 10px; object-fit: contain;
}
.cs-meta { font-size: 14px; color: var(--grey); letter-spacing: -0.15px; }

/* ── SECTIONS ── */
.section-white { background: #fff; padding: 80px 24px; }
.section-grey  { background: var(--grey-light); padding: 80px 24px; }
.section-inner { max-width: var(--max-width); margin: 0 auto; }
.cs-section-title { font-size: 32px; line-height: 1.5; color: var(--black); margin-bottom: 32px; }
.cs-body { font-size: 16px; line-height: 1.7; color: var(--black); letter-spacing: -0.31px; margin-bottom: 24px; }
.cs-body:last-child { margin-bottom: 0; }

/* Callout */
.callout { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 33px; margin-top: 8px; text-wrap: pretty; }
.callout-label { font-size: 18px; color: var(--accent); margin-bottom: 16px; }
.callout-text { font-size: 16px; line-height: 1.7; color: var(--black); letter-spacing: -0.31px; }

/* Card grid: callout sidebar + content column (Context, Key Insights) */
.card-grid { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; margin-bottom: 40px; }
.card-grid .callout {
  margin-top: 0; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-grid .callout:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07);
}
.callout-text-lg { font-size: 21px; line-height: 1.4; font-weight: 500; letter-spacing: -0.3px; }
.context-copy { column-count: 1; max-width: 600px; }
.context-copy .cs-body { break-inside: avoid-column; }

/* Insights list (no table) */
.insights-list { display: flex; flex-direction: column; gap: 24px; counter-reset: insight; }
.insight-item { border-bottom: 1px solid var(--border); padding-bottom: 20px; counter-increment: insight; }
.insight-item:last-child { border-bottom: none; padding-bottom: 0; }
.insight-finding { position: relative; padding-left: 28px; font-size: 16px; color: var(--black); font-weight: 500; line-height: 1.5; letter-spacing: -0.31px; margin-bottom: 8px; }
.insight-finding::before {
  content: "0" counter(insight); position: absolute; left: 0; top: 2px; font-size: 12px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.5px;
}
.insight-change { padding-left: 28px; font-size: 15px; color: var(--grey); line-height: 1.5; letter-spacing: -0.2px; }

/* Role */
.role-intro { font-size: 16px; line-height: 1.7; color: var(--black); letter-spacing: -0.31px; margin-bottom: 48px; text-wrap: pretty; }

/* Row list — used for "impact that's harder to measure" and Reflection */
.measure-list { display: flex; flex-direction: column; gap: 28px; margin-bottom: 56px; }
.measure-item { display: flex; gap: 32px; align-items: flex-start; padding-top: 20px; border-top: 1px solid var(--border); }
.measure-item:first-child { padding-top: 0; border-top: none; }
.measure-title { flex: 0 0 320px; font-size: 17px; color: var(--black); line-height: 1.4; text-wrap: pretty; }
.measure-body { flex: 1; font-size: 15px; color: var(--grey); line-height: 1.6; letter-spacing: -0.2px; }

/* Qualitative impact bullets — used under the stat-banner where there's a short list of
   outcomes that don't need the full measure-list row treatment */
.impact-list { display: flex; flex-direction: column; gap: 4px; }
.impact-item { font-size: 16px; line-height: 1.7; color: var(--black); letter-spacing: -0.31px; padding: 8px 0 8px 20px; position: relative; }
.impact-item::before { content: '→'; position: absolute; left: 0; color: var(--accent); }

/* Role & Impact */
.stat-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; margin-bottom: 16px; }
.stat-card { background: var(--grey-light); border-radius: 10px; padding: 28px 22px; text-align: center; }
.stat-number { font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 0, 'WONK' 1; font-weight: 600; font-size: 42px; line-height: 1; color: #008060; margin-bottom: 10px; }
.stat-label { font-size: 13px; color: var(--grey); line-height: 1.5; letter-spacing: -0.1px; }
.stat-source { font-size: 12px; color: var(--grey-mid); text-align: center; letter-spacing: -0.1px; }
.outcomes-label { font-size: 11px; letter-spacing: 2.26px; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: block; }

/* ── PHASES / SOLUTION (two-column, alternating) ── */
.phases-list { display: flex; flex-direction: column; gap: 80px; }

.phase { display: flex; flex-direction: column; gap: 32px; padding-bottom: 80px; border-bottom: 1px solid var(--border); min-width: 0; }
.phase:last-child { border-bottom: none; padding-bottom: 0; }

.phase-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.phase-label { font-size: 11px; letter-spacing: 2.26px; text-transform: uppercase; color: var(--accent); }
.phase-title { font-size: 24px; line-height: 1.4; color: var(--black); }
.phase-body { font-size: 16px; line-height: 1.7; color: var(--black); letter-spacing: -0.31px; margin-bottom: 16px; }
.phase-body:last-child { margin-bottom: 0; }

/* min-width: 0 here matters as much as on .phase-copy/.phase-visual below: without it,
   this flex item (itself nested inside the column-direction .phase/.phases-list chain
   on mobile, where .phase-content also switches to column) inherits flexbox's default
   "automatic minimum size" behavior and stretches to fit its widest descendant — one of
   the hand-built phase mockups — which then forced .phase-visual (and the whole page)
   wider than the viewport even though .phase-visual itself already had min-width: 0. */
.phase-content { display: flex; gap: 48px; align-items: flex-start; min-width: 0; }
.phase-copy { flex: 1; min-width: 0; }
/* overflow: hidden + the inner wrapper's top-left transform-origin support
   phase-visual-scale.js's shrink-to-fit. These are unconditional (not just
   mobile) because several of the hand-built mockups are wider than even the
   ~500px desktop column and get scaled down there too — scoping them to a
   mobile media query left desktop scaling using the browser's default center
   transform-origin, which shrinks toward the middle instead of the top-left
   and visibly shifts/misaligns the mockup within its column. */
.phase-visual { flex: 1.1; min-width: 0; overflow: hidden; }
.phase-visual-scale-inner { transform-origin: top left; }
.phase:nth-child(even) .phase-copy { order: 2; }
.phase:nth-child(even) .phase-visual { order: 1; }

/* Narrative callouts that sit between groups of phases inside "Building the Platform" —
   styled to match .closing-line, the case study's pull-quote treatment */
.phase-transition { margin: 80px 0; padding: 56px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; }
.phase-transition-label { font-size: 11px; letter-spacing: 2.26px; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.phase-transition-text {
  font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 0, 'WONK' 1; font-weight: 400;
  font-size: 24px; line-height: 1.5; color: var(--black); letter-spacing: -0.3px;
  max-width: 820px; margin: 0 auto; text-wrap: pretty;
}
@media (max-width: 640px) {
  .phase-transition { margin: 56px 0; padding: 40px 0; }
  .phase-transition-text { font-size: 19px; }
}

/* ── TIMELINE (Evolution timeline, "Building the Platform") ──
   Desktop: horizontal row of nodes with a horizontal connecting line, min-width
   isn't fixed — it just lays out at its natural width and lets .timeline-wrap
   scroll in the rare case a desktop viewport is narrower than that (≥641px this
   essentially never triggers). Mobile (≤640px, below): stays horizontal — nodes
   shrink to equal-width flex columns (flex: 1 1 0, no min-width row) so all 7 fit
   the viewport with no scroll, rather than switching to a vertical stack. */
.timeline-wrap { margin-bottom: 56px; overflow-x: auto; }
.timeline { position: relative; min-width: 760px; }
.timeline-line {
  position: absolute; top: 24px; left: 44px; right: 44px; height: 2px;
  background: linear-gradient(90deg,#003d2b 0%,#008060 35%,#38b88a 60%,#5297c8 100%);
}
.timeline-nodes { display: flex; justify-content: space-between; position: relative; z-index: 1; }
.timeline-node { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100px; }
.timeline-node-icon {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px var(--grey-light);
}
.timeline-node-label { text-align: center; font-size: 11px; font-weight: 500; color: var(--black); line-height: 1.4; }
.timeline-caption { margin-top: 24px; font-size: 12px; color: var(--grey-mid); text-align: center; letter-spacing: -0.1px; }

@media (max-width: 640px) {
  .timeline-wrap { overflow-x: visible; }
  .timeline { min-width: 0; }
  /* Inset as a fraction (1/14 = half of one equal-width column) rather than a
     fixed px value, so the line's ends stay aligned with the first/last icon's
     center at every mobile width instead of just one tested size. */
  .timeline-line { top: 12px; left: calc(100% / 14); right: calc(100% / 14); }
  .timeline-node { width: auto; flex: 1 1 0; min-width: 0; gap: 5px; }
  .timeline-node-icon { width: 24px; height: 24px; box-shadow: 0 0 0 3px var(--grey-light); }
  .timeline-node-icon svg { width: 11px; height: 11px; }
  .timeline-node-label {
    font-size: 7.5px; line-height: 1.25; letter-spacing: -0.1px; padding: 0 1px;
    /* At this size every label (including single long words like
       "Automations") fits its ~41px column at the narrowest supported
       width (320px) without needing a mid-word break. hyphens: auto is a
       belt-and-suspenders fallback for anything that still doesn't fit
       (a longer label added later, a narrower device) — it hyphenates at
       syllable boundaries where the browser has a dictionary, and
       overflow-wrap/word-break: break-word guarantees no overflow even
       where it doesn't. */
    overflow-wrap: break-word; word-break: break-word;
    hyphens: auto; -webkit-hyphens: auto;
  }
}

/* ── VISUAL PLACEHOLDER ── */
.visual-placeholder {
  width: 100%;
  border-radius: 10px;
  border: 1.5px dashed rgba(0,0,0,0.15);
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  text-align: center;
}

.visual-placeholder-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  max-width: 420px;
}

.visual-placeholder-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-placeholder-icon svg { opacity: 0.4; }

.visual-placeholder-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  letter-spacing: -0.15px;
}

.visual-placeholder-desc {
  font-size: 13px;
  color: var(--grey);
  line-height: 1.5;
  letter-spacing: -0.15px;
}

.visual-placeholder-sm {
  min-height: 280px;
  flex: 1 0 276px;
}

/* Closing line — the case study's final statement */
.closing-line {
  margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--border);
  text-align: center;
}
.closing-line p {
  font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 0, 'WONK' 1; font-weight: 400;
  font-size: 32px; line-height: 1.4; color: var(--black); letter-spacing: -0.5px;
  max-width: 720px; margin: 0 auto;
}

/* Bottom nav — the horizontal gutter lives on `.bottom-nav-section` (the wrapping
   <section>), matching how every other section on the page splits its gutter (outer
   element) from its centering (inner element: max-width + margin:auto). Previously both
   lived on `.bottom-nav` itself, which double-counted the gutter once the viewport
   exceeded max-width (padding was applied *inside* the already-centered 1000px column,
   not to the page edge), and also hardcoded 24px year-round instead of dropping to 16px
   on mobile like everything else. align-items: flex-start (not center) so "Back"/"Next"
   line up with the top nav, not just with each other. */
.bottom-nav-section { padding: 32px 24px 40px; }
.bottom-nav { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; max-width: var(--max-width); margin: 0 auto; }

/* Contact */
.contact-section { border-top: 1px solid var(--border); text-align: center; padding: 80px 24px; }
.contact-label { font-size: 11px; letter-spacing: 2.26px; text-transform: uppercase; color: var(--grey); margin-bottom: 40px; }
.contact-heading { font-size: 40px; line-height: 1.5; color: var(--black); margin-bottom: 40px; }
.contact-sub { font-size: 16px; color: var(--grey); line-height: 1.7; max-width: 500px; margin: 0 auto 40px; letter-spacing: -0.31px; }
.contact-actions { display: flex; gap: 24px; justify-content: center; margin-bottom: 40px; }
.btn-primary { background: #0a0a0a; color: #fff; border: none; border-radius: 32px; padding: 13px 24px; font-size: 16px; font-family: 'Inter', sans-serif; letter-spacing: -0.31px; cursor: pointer; text-decoration: none; display: inline-block; transition: opacity 0.15s; }
.btn-primary:hover { opacity: 0.85; }
.btn-secondary { color: var(--black); border: 1px solid var(--border-subtle); border-radius: 42px; padding: 13px 24px; font-size: 16px; font-family: 'Inter', sans-serif; letter-spacing: -0.31px; cursor: pointer; text-decoration: none; display: inline-block; background: transparent; transition: background 0.15s; }
.btn-secondary:hover { background: rgba(0,0,0,0.03); }
.contact-info { font-size: 14px; color: var(--grey); letter-spacing: -0.15px; display: flex; gap: 24px; justify-content: center; }
footer { border-top: 1px solid var(--border); padding: 25px 24px; text-align: center; }
footer p { font-size: 14px; color: var(--grey); letter-spacing: -0.15px; }

/* ── SIDE NAV ── */
.sidenav {
  position: fixed;
  top: 200px;
  left: max(20px, calc((100vw - var(--max-width)) / 2 - 148px));
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 50;
}
@media (max-width: 1260px) { .sidenav { display: none; } }

.sidenav-track {
  position: absolute;
  left: 3px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--border);
}
.sidenav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  text-decoration: none;
  color: var(--grey-mid);
  font-size: 11px;
  letter-spacing: -0.1px;
  transition: color 0.2s;
  position: relative;
  white-space: nowrap;
}
.sidenav-item::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--grey-mid);
  background: #fff;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  position: relative;
  z-index: 1;
}
.sidenav-item:hover { color: var(--black); }
.sidenav-item:hover::before { border-color: var(--black); }
.sidenav-item.active { color: var(--black); font-weight: 500; }
.sidenav-item.active::before {
  background: var(--black);
  border-color: var(--black);
  transform: scale(1.2);
}

/* Reading progress bar — shown at every screen size, pinned to the header's own bottom
   edge (header is already `position: sticky`, which gives it a positioning context, so
   this just rides along as a thin strip on the header's bottom border). This replaces
   the old horizontal "subnav-bar" section-jump nav that used to stand in for the sidenav
   below 1260px (removed 2026-08-18 — it was still showing up at tablet/iPad widths after
   the reading-progress bar had already taken over the mobile case, which was confusing;
   the progress bar is now the only section-position indicator below the desktop sidenav's
   1260px breakpoint). */
.reading-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--border);
  z-index: 1;
}
.reading-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) { header { padding: 0 24px; } }
@media (max-width: 860px) {
  .card-grid { grid-template-columns: 1fr; }
  .context-copy { column-count: 1; }
  .stat-banner { gap: 12px; }
  .stat-card { padding: 20px 12px; }
  .stat-number { font-size: 32px; }
}
@media (max-width: 900px) {
  .phase-content { flex-direction: column; }
  .phase-copy, .phase:nth-child(even) .phase-copy { order: 0; }
  .phase-visual, .phase:nth-child(even) .phase-visual { order: 0; }
  /* .phase-content uses align-items: flex-start for the desktop row layout (so the
     copy/visual columns don't stretch to match each other's height). Stacked in a
     column here, flex-start instead sizes each child to its own content's max-content
     width — for .phase-visual that's the mockup's natural (unshrunk) width, which
     overflows the viewport. align-self: stretch makes them fill the column's full
     width like every other stacked element on the page. */
  .phase-copy, .phase-visual { align-self: stretch; }
  /* .phase-visual's desktop `flex: 1.1` (flex-basis: 0%, flex-grow: 1.1) is only
     meaningful for the row layout's *width* distribution. Once .phase-content stacks
     into a column here, height becomes the flex main axis, and that same flex-basis/
     grow combination pulls .phase-visual's height back up to its unscaled content
     size (the phase-visual-scale-inner wrapper's transform:scale doesn't shrink its
     contribution to layout, only its rendered appearance) — silently overriding the
     explicit height phase-visual-scale.js sets, and leaving a block of empty space
     below the visibly-smaller scaled mockup. `flex: none` takes it out of flex
     grow/shrink entirely on mobile, so its own explicit height (or natural height,
     when unscaled) is what's actually rendered. */
  .phase-visual { flex: none; }
}
@media (max-width: 640px) {
  header { padding: 0 16px; } .header-inner { padding: 0; }
  .logo { font-size: 12px; letter-spacing: 1px; }
  nav { gap: 11px; }
  .header-inner nav a { font-size: 13px; }
  .cs-hero { padding: 60px 16px; } .cs-title { font-size: 36px; } .cs-subtitle { font-size: 18px; }
  .cs-hero-image-frame { height: auto; }
  .section-white, .section-grey { padding: 60px 16px; } .cs-section-title { font-size: 26px; }
  .bottom-nav-section { padding: 32px 16px 40px; }
  .contact-actions { flex-direction: column; align-items: center; }
  .stat-banner { grid-template-columns: 1fr; gap: 16px; }
  .measure-item { flex-direction: column; gap: 8px; }
  .measure-title { flex-basis: auto; }
  .measure-body { max-width: none; }
  .closing-line p { font-size: 24px; }
  /* Back/Next case-study titles: truncate to one line instead of wrapping,
     which was pushing the icon/label out of alignment and eating vertical space.
     Gap is also reduced from the desktop 24px here (still enough to keep the two
     titles from visually running into each other, without eating too much of the
     ~343px row). */
  .cs-nav, .bottom-nav { gap: 16px; }
  .cs-nav-next-stack { width: 100%; min-width: 0; }
  .cs-nav-next-name { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── PROJECT-SPECIFIC (used by course-hero.html) ── */
.problem-layers { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.problem-layer { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
.problem-layer:last-child { border-bottom: none; }
.problem-layer-num { font-size: 48px; font-family: 'Fraunces', serif; font-variation-settings: 'SOFT' 0, 'WONK' 1; color: var(--accent); padding: 32px 24px; border-right: 1px solid var(--border); min-width: 90px; display: flex; align-items: flex-start; line-height: 1; }
.problem-layer-content { padding: 32px 24px; flex: 1; }
.problem-layer-title { font-size: 18px; color: var(--black); line-height: 1.5; margin-bottom: 12px; }
.problem-layer-body { font-size: 16px; color: var(--grey); line-height: 1.7; letter-spacing: -0.31px; }
@media (max-width: 640px) {
  .problem-layer { flex-direction: column; }
  .problem-layer-num { border-right: none; border-bottom: 1px solid var(--border); padding: 16px 24px; min-width: unset; }
}

.inline-image-group { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
.inline-image { width: 100%; border-radius: 10px; display: block; border: 1px solid var(--border); }
.inline-image-caption { font-size: 14px; color: var(--grey); letter-spacing: -0.15px; margin-top: 12px; line-height: 1.5; }

/* Inline images wired up as lightbox triggers (see js/lightbox.js) */
.flow-shot { cursor: zoom-in; }
.flow-shot .inline-image { transition: opacity 0.15s ease; }
.flow-shot:hover .inline-image { opacity: 0.92; }
.flow-shot .inline-image-caption { text-align: center; }

.solution-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch; }
.solution-img { flex: 1 0 276px; min-height: 280px; border-radius: 10px; overflow: hidden; background: #f3f4f6; }
.solution-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.solution-text { flex: 1 0 276px; display: flex; flex-direction: column; gap: 16px; padding: 32px; }

/* ── MINI CASE STUDIES (kinetic, nascent, grocers-plus): shared building blocks ── */

/* Role / "What I did" grid */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.role-grid-item { display: flex; flex-direction: column; gap: 10px; }
.role-grid-title { font-size: 18px; color: var(--black); line-height: 1.5; }
.role-grid-body { font-size: 16px; color: var(--grey); line-height: 1.6; letter-spacing: -0.31px; }

/* Tags */
.tags-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { border: 1px solid var(--border-subtle); border-radius: 9999px; padding: 4px 12px; font-size: 14px; color: var(--black); }

/* Multi-project pages (nascent.html) */
.project-list { display: flex; flex-direction: column; }
.project-block { padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--border); }
.project-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.project-label { font-size: 12px; color: var(--grey); letter-spacing: -0.1px; margin-bottom: 8px; }
.project-title { font-size: 24px; line-height: 1.3; color: var(--black); margin-bottom: 12px; }
.project-body { font-size: 16px; line-height: 1.7; color: var(--grey); letter-spacing: -0.31px; max-width: 720px; margin-bottom: 20px; }
.project-block .tags-row { margin-bottom: 28px; }

/* Work gallery — bigger, click-to-zoom tiles that feed the lightbox */
.gallery-grid { display: flex; flex-direction: column; gap: 20px; }
.gallery-row { display: grid; gap: 20px; }
.gallery-row-1 { grid-template-columns: 1fr; }
.gallery-row-2 { grid-template-columns: 1fr 1fr; }
.gallery-row-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-item {
  position: relative; height: 440px; border-radius: 10px; overflow: hidden;
  background: var(--grey-light); border: 1px solid var(--border); cursor: zoom-in;
}
.gallery-row-1 .gallery-item { height: 560px; }
.gallery-row-3 .gallery-item { height: 300px; }
.gallery-item img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.35s ease; }
.gallery-item:hover img { transform: scale(1.02); }
.gallery-zoom-hint {
  position: absolute; bottom: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(14,14,14,0.65); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.gallery-item:hover .gallery-zoom-hint { opacity: 1; }

@media (max-width: 900px) {
  .gallery-row-2, .gallery-row-3 { grid-template-columns: 1fr; }
  .gallery-item, .gallery-row-3 .gallery-item { height: 320px; }
  .gallery-row-1 .gallery-item { height: 360px; }
  .role-grid { grid-template-columns: 1fr; }
}

/* ── LIGHTBOX (click-to-zoom overlay for gallery images, with prev/next through the group) ── */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,10,0.94);
  display: flex; align-items: center; justify-content: center; padding: 56px 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-figure { max-width: 1200px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lightbox-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 64px rgba(0,0,0,0.45); }
.lightbox-caption { color: rgba(255,255,255,0.72); font-size: 14px; letter-spacing: -0.1px; text-align: center; max-width: 640px; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; border: none; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.2); }
.lightbox-close { top: 24px; right: 32px; width: 40px; height: 40px; font-size: 20px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-counter {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85);
  border-radius: 9999px; padding: 9px 16px; font-size: 13px; letter-spacing: -0.1px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .lightbox-overlay { padding: 32px 12px; }
  .lightbox-close { top: 16px; right: 16px; width: 36px; height: 36px; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
  .lightbox-counter { top: 16px; padding: 7px 14px; font-size: 12px; }
}