/* Our Story: the approved Creative Workbench approach layout. */
.story-approach-workbench {
  --approach-ink: #142024;
  --approach-muted: #607178;
  --approach-blue: #00aeef;
  --approach-label: #007fa9;
  --approach-line: #d8e4e8;
  --approach-soft: #f5f9fa;
  --approach-wash: #e8f6fb;
  background: #fff;
  color: var(--approach-ink);
  scroll-margin-top: 100px;
}
.story-approach-workbench .section-tag { color: var(--approach-ink); }
.story-approach-heading h2 {
  max-width: 1100px;
  margin: 28px 0 34px;
  /* Inherit the shared section-heading typography from styles.css. */
}
.story-approach-intro {
  max-width: 1050px;
  margin: 0;
  color: var(--approach-muted);
  font-size: 19px;
  line-height: 1.65;
}
.story-approach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 34px;
  margin-top: 54px;
}
.story-approach-card {
  min-width: 0;
  padding-top: 25px;
  border-top: 1px solid var(--approach-line);
}
.story-approach-art {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2.14;
  min-height: 220px;
  padding: 30px;
  margin-bottom: 30px;
  background: var(--approach-soft);
}
.story-approach-grid-paper {
  background-color: #f7fafb;
  background-image: linear-gradient(#e7eff2 1px, transparent 1px), linear-gradient(90deg, #e7eff2 1px, transparent 1px);
  background-size: 28px 28px;
}
.story-approach-number {
  margin: 0;
  color: var(--approach-label);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.story-approach-card h3 {
  margin: 16px 0 20px;
  font-family: Georgia, serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.story-approach-copy { margin: 0; color: var(--approach-muted); font-size: 17px; line-height: 1.65; }
.story-approach-paper { background: #fff; border: 1px solid #c8dbe2; border-radius: 7px; box-shadow: 0 10px 28px #19313b07; }
.story-approach-art svg { width: 23px; height: 23px; flex-shrink: 0; color: var(--approach-label); }
.story-approach-brief { width: 100%; max-width: 320px; padding: 19px; transform: rotate(-3deg); }
.story-approach-brief-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
.story-approach-brief-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--approach-line); color: var(--approach-muted); font-size: 13px; }
.story-approach-brief-row svg { width: 17px; height: 17px; }
.story-approach-mini-browser { width: 100%; max-width: 330px; transform: rotate(2deg); }
.story-approach-window-bar { display: flex; align-items: center; gap: 6px; height: 37px; padding: 0 16px; border-bottom: 1px solid var(--approach-line); border-radius: 7px 7px 0 0; background: var(--approach-soft); }
.story-approach-window-bar i { width: 5px; height: 5px; border-radius: 50%; background: #96b8c6; }
.story-approach-window-main { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; padding: 23px 19px; }
.story-approach-mini-heading { margin: 0; font: 400 28px/1.1 Georgia, serif; color: var(--approach-ink); }
.story-approach-line { height: 6px; margin-top: 9px; border-radius: 3px; background: #d1e0e6; }
.story-approach-line-short { width: 66%; }
.story-approach-mini-action { display: block; width: 80px; height: 21px; margin-top: 15px; border-radius: 999px; background: var(--approach-blue); }
.story-approach-mini-visual { display: grid; place-items: center; border-radius: 4px; background: var(--approach-wash); }
.story-approach-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 330px; }
.story-approach-channels > span { padding: 13px 10px; border: 1px solid var(--approach-line); background: #fff; color: var(--approach-ink); text-align: center; font-size: 13px; }
.story-approach-channels .story-approach-channel-site { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 11px; border-color: #c6e5ef; background: var(--approach-wash); color: #315d70; }
.story-approach-channel-site svg { width: 18px; height: 18px; }
.story-approach-chat { display: grid; gap: 17px; width: 100%; max-width: 335px; }
.story-approach-chat p { max-width: 90%; margin: 0; padding: 16px 20px; border: 1px solid var(--approach-line); border-radius: 14px 14px 14px 2px; background: #fff; color: #526a73; font-size: 14px; line-height: 1.5; }
.story-approach-chat p:last-child { justify-self: end; border-color: #c6e5ef; border-radius: 14px 14px 2px 14px; background: var(--approach-wash); }
.story-approach-actions { margin-top: 42px; }

@media (max-width: 800px) {
  .story-approach-workbench { padding-block: 75px; }
  .story-approach-grid { gap: 38px 24px; margin-top: 42px; }
  .story-approach-art { padding: 24px; margin-bottom: 24px; }
  .story-approach-card h3 { font-size: 34px; }
  .story-approach-brief { padding: 15px; }
  .story-approach-brief-heading { font-size: 11px; }
  .story-approach-brief-row { font-size: 12px; }
  .story-approach-window-main { padding: 19px 15px; gap: 14px; }
  .story-approach-mini-heading { font-size: 24px; }
  .story-approach-channels > span { padding: 11px 8px; font-size: 12px; }
  .story-approach-chat p { padding: 13px 16px; font-size: 12px; }
}
@media (max-width: 600px) {
  .story-approach-workbench { padding-block: 60px; }
  .story-approach-heading h2 { margin: 22px 0; }
  .story-approach-intro { font-size: 17px; }
  .story-approach-grid { grid-template-columns: 1fr; margin-top: 38px; }
  .story-approach-art { min-height: 225px; }
  .story-approach-card h3 { margin: 13px 0 16px; }
  .story-approach-number { font-size: 11px; }
  .story-approach-copy { font-size: 16px; }
  .story-approach-actions { margin-top: 32px; }
}