/* Insight & strategy page: same quiet language as the rest of the site */
.strategy { overflow-x: clip; }
.strategy h1, .strategy h2, .strategy h3 { margin: 0; font-weight: 400; }

/* Section headings: small spaced capitals, like the menu */
.strategy h2 {
  font-size: var(--s-small);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.st-intro,
.st-cases,
.st-help,
.st-experience,
.st-contact { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* Intro */
.st-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(8px, 2vw, 24px);
  margin-bottom: clamp(96px, 12vw, 160px);
}
.st-intro-photo { margin: 0; }
.st-intro-photo img { width: 100%; filter: grayscale(1); }
.st-intro-photo figcaption { margin-top: 14px; font-size: var(--s-body); }
.st-intro-text { display: grid; gap: 18px; max-width: 58ch; }
.st-intro h1 {
  font-size: var(--s-small);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
@media (max-width: 820px) {
  .st-intro { grid-template-columns: minmax(0, 1fr); }
  .st-intro-photo { max-width: 460px; }
}

/* Case studies: a row you scroll sideways */
.st-cases { margin-bottom: clamp(96px, 12vw, 160px); }
.st-rail-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.st-rail-controls { display: flex; gap: 4px; }
.st-rail-btn {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  transition: opacity .2s;
}
.st-rail-btn:disabled { opacity: .25; cursor: default; }

.st-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(340px, 78vw);
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--m), calc((100vw - 1180px) / 2));
  padding: 0 max(var(--m), calc((100vw - 1180px) / 2)) 16px;
  margin: 0 calc(50% - 50vw);
  scrollbar-width: none;
  cursor: grab;
}
.st-rail::-webkit-scrollbar { display: none; }
.st-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.st-rail:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.st-case { scroll-snap-align: start; min-width: 0; }
.st-open {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.st-case-img { display: block; overflow: hidden; background: var(--plaster); }
.st-case-img img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; pointer-events: none; transition: transform 1.2s var(--ease); }
.st-open:hover .st-case-img img { transform: scale(1.03); }
.st-case-title { display: grid; gap: 2px; }
.st-client { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.05rem; line-height: 1.1; }
.st-project { font-size: var(--s-small); color: var(--muted); }
.js .st-full { display: none; }
.st-full { display: grid; gap: 14px; }
.st-text { display: grid; gap: 14px; }
.st-link a { text-underline-offset: 4px; }

/* Reading panel */
html.st-reading { overflow: hidden; }
.st-reader {
  width: min(760px, 100vw);
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--stone);
  color: var(--ink);
}
.st-reader::backdrop { background: rgba(21, 20, 18, .45); }
.st-reader[open] { display: grid; grid-template-rows: auto 1fr; }
.st-reader-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px clamp(12px, 3vw, 28px); }
.st-reader-bar button { min-height: 44px; padding: 0 10px; border: 0; background: none; font: inherit; font-size: var(--s-small); color: var(--muted); cursor: pointer; }
.st-reader-bar button:hover { color: var(--ink); }
.st-reader-scroll { overflow-y: auto; overscroll-behavior: contain; }
.st-reader-inner { display: grid; gap: 20px; padding: 8px clamp(16px, 5vw, 56px) 80px; }
.st-reader-inner .st-open { cursor: default; gap: 18px; }
.st-reader-inner .st-case-img img { aspect-ratio: 3 / 2; }
.st-reader-inner .st-client { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); }
.st-reader-inner .st-project { font-size: var(--s-body); }
.st-reader-inner .st-full { display: grid; }
.st-reader-inner .st-text { max-width: 62ch; }

/* How I can help */
.st-help { margin-bottom: clamp(96px, 12vw, 160px); }
.st-help > h2 { margin-bottom: 32px; }
.st-help-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.st-help-grid > div { display: grid; gap: 12px; align-content: start; }
.st-help h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.05rem; }
.st-help ul { margin: 0; padding-left: 1em; display: grid; gap: 8px; font-size: var(--s-small); }
.st-help p { font-size: var(--s-small); }
@media (max-width: 980px) { .st-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .st-help-grid { grid-template-columns: minmax(0, 1fr); } }

/* Experience */
.st-experience { margin-bottom: clamp(80px, 10vw, 128px); }
.st-experience > h2 { margin-bottom: 32px; }
.st-roles { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(40px, 5vw, 64px); }
.st-roles > li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr); gap: clamp(16px, 4vw, 56px); }
.st-years { font-size: var(--s-small); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.st-roles > li > div { display: grid; gap: 12px; max-width: 68ch; }
.st-roles h3 { display: grid; gap: 2px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.05rem; }
.st-roles h3 span { font-family: var(--text); text-transform: none; font-weight: 400; font-size: var(--s-small); letter-spacing: 0; color: var(--muted); }
.st-roles p { font-size: var(--s-small); }
.st-roles ul { list-style: disc; margin: 0; padding-left: 1em; display: grid; gap: 6px; font-size: var(--s-small); }
.st-sub { font-style: italic; }
@media (max-width: 640px) { .st-roles > li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Contact */
.st-contact { margin-bottom: clamp(48px, 6vw, 80px); }
.st-contact a { text-underline-offset: 4px; }