/* Approved corporate design, promoted from demo2. Selectors remain scoped. */
.demo-stories .nav-pill {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: .7rem 1.1rem; border: 1px solid var(--note-ink); border-radius: 999px;
  color: var(--note-ink); font-size: .82rem; font-weight: 750; text-decoration: none;
}
.demo-stories .nav-pill:hover { background: var(--note-ink); color: white; }
.demo-stories .note-nav-links { flex-wrap: wrap; gap: .65rem; }
.demo-stories .note-nav-links a:first-child { display: inline-flex; }
.demo-stories .story-hero { position: relative; isolation: isolate; overflow: hidden; background: #102826; color: white; padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.demo-stories .story-hero-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.demo-stories .story-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8,28,27,.91), rgba(8,28,27,.73)); }
.demo-stories .story-hero .note-meta,
.demo-stories .story-hero .note-kicker { color: #b2ded4; }
.demo-stories .story-hero .article-deck,
.demo-stories .story-hero .article-facts,
.demo-stories .story-hero .work-hero-copy > p:last-child,
.demo-stories .story-hero .work-proof span,
.demo-stories .story-hero .work-proof > p { color: #e0e9e5; }
.demo-stories .article-hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.65rem); max-width: 60rem; }
.demo-stories .article-deck { margin-top: 1.2rem; max-width: 52rem; }
.demo-stories .article-facts { margin-top: 1.4rem; }
.demo-stories .article-layout { width: min(100%, 76rem); padding-top: clamp(2rem, 4vw, 3.5rem); gap: clamp(2rem, 5vw, 4rem); }
.demo-stories .article-body { max-width: 48rem; }
.demo-stories .article-body h2 { font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.12; }
.demo-stories .story-figure { margin: 2.2rem 0; }
.demo-stories .story-figure img { display: block; width: 100%; height: auto; border-radius: 16px; }
.demo-stories .story-figure figcaption { margin-top: .65rem; color: #5d6966; font-size: .75rem; line-height: 1.5; }
.demo-stories .article-body .story-expansion h2 { margin-top: 2rem; }
.demo-stories .notes-hero h1 { font-size: clamp(2.7rem, 5.6vw, 4.8rem); }
.demo-stories .work-hero-layout { gap: 3rem; }
.demo-stories .notes-index { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.demo-stories .notes-index-head { margin-bottom: 2rem; gap: 2rem; }
.demo-stories .notes-grid { gap: 1.25rem; border: 0; }
.demo-stories .notes-grid .note-card,
.demo-stories .notes-grid.is-filtered .note-card { grid-column: auto; min-height: 0; padding: clamp(1.3rem, 2.5vw, 2rem); border: 1px solid var(--note-line); border-radius: 20px; background: #fff; color: var(--note-ink); isolation: isolate; }
.demo-stories .notes-grid .note-card::before { display: none; }
.demo-stories .notes-grid .note-card h2,
.demo-stories .notes-grid.is-filtered .note-card h2 { font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.08; max-width: none; }
.demo-stories .story-card-image { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .13; }
.demo-stories .notes-grid .note-card:hover { background: #fff; }
.demo-stories .work-number { margin-bottom: .6rem; color: #52635e; font-size: .85rem; }
.demo-stories .note-card .note-meta { margin-bottom: .8rem; color: #075e59; }
.demo-stories .note-card > p:not(.note-meta),
.demo-stories .note-card .work-stack,
.demo-stories .note-card .note-card-footer { color: #34413f; }
.demo-stories .note-card .work-stack strong { color: #52635e; }
.demo-stories .note-card .note-card-footer span:last-child { color: #075e59; }
.demo-stories .note-card .work-stack { margin-top: 1.2rem; padding-top: 1rem; border-color: var(--note-line); }
.demo-stories .note-card-footer { padding-top: 1.4rem; }
.demo-stories .work-search input, .demo-stories .work-search button { border-radius: 12px; }
.demo-service .service-hero h1 { max-width: 58rem; font: 400 clamp(2.7rem, 6vw, 5.3rem)/1.04 "Cardo", serif; letter-spacing: -.04em; margin: .8rem 0 1.5rem; }
.demo-service .service-lead { max-width: 49rem; color: #e0e9e5; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.75; }
.demo-service .service-hero-link { color: #fff; margin-left: 1.2rem; font-weight: 700; }
.demo-service .service-audience { max-width: 48rem; color: #d3e0dc; font-size: .9rem; margin-top: 1.6rem; }
.demo-service .service-hero .button { background: #f5f0e5; color: #10201f; }
.demo-service .section { padding: clamp(3rem, 6vw, 5rem) 0; }
.demo-service .section-title { max-width: 58rem; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.12; }
.demo-service .service-problem-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.demo-service .service-problems article { padding: 1.4rem 0; border-bottom: 1px solid var(--note-line); }
.demo-service .service-problems h3 { font-size: 1.16rem; margin: 0; }
.demo-service .service-problems p { color: #52635e; margin: .7rem 0; }
.demo-service .planning-example { margin-top: 2rem; }
.demo-service .service-capabilities { background: #edf1eb; }
.demo-service .service-section-intro { max-width: 54rem; margin: 1.4rem 0 2.5rem; color: #52635e; font-size: 1.08rem; }
.demo-service .service-capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem 3rem; }
.demo-service .service-capability-grid article { padding-top: 1.5rem; border-top: 1px solid #b9cbc3; }
.demo-service .service-capability-grid h3 { font-size: 1.2rem; margin: 0; }
.demo-service .service-capability-grid p { color: #43554e; }
.demo-service .home-approach { background: #fbfaf6; }
.demo-service .service-work-group { margin: 2.5rem 0; }
.demo-service .service-work-group > h3 { font-size: 1.4rem; margin-bottom: 1.3rem; }
.demo-service .service-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.demo-service .service-case { display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid var(--note-line); border-radius: 16px; background: white; text-decoration: none; }
.demo-service .service-case:hover { border-color: #0c6661; background: #f0f6f1; }
.demo-service .service-case h3 { font: 400 1.65rem/1.16 "Cardo", serif; margin: 0 0 .8rem; }
.demo-service .service-case-stack { font-size: .82rem; color: #43554e; }
.demo-service .service-case-status { font-size: .75rem; color: #5d6966; margin-top: auto; padding-top: .7rem; }
.demo-service .service-case .text-link { font-size: .85rem; }
.demo-service .service-crosslink { background: #e4eee8; padding: 2.5rem 0; }
.demo-service .service-crosslink h2 { margin: 0; font: 400 2.3rem/1.12 "Cardo", serif; }
.demo-service .service-crosslink p { margin: 1rem 0; }
.demo-service #contact .section-title { font-size: clamp(2.3rem, 4vw, 3.5rem); }
@media (max-width: 900px) {
  .demo-service .service-case-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .demo-service .service-problem-layout { grid-template-columns: 1fr; }
  .demo-service .planning-example { margin-top: 0; }
}
@media (max-width: 760px) {
  .demo-stories .work-hero-layout { gap: 2rem; }
  .demo-stories .article-layout { gap: 1.8rem; }
  .demo-stories .article-aside { border-bottom: 1px solid var(--note-line); padding-bottom: 1.4rem; }
  .demo-stories .note-nav-links { gap: .5rem; }
  .demo-stories .nav-pill { font-size: .76rem; padding: .65rem .9rem; }
  .demo-service .service-case-grid, .demo-service .service-capability-grid { grid-template-columns: 1fr; }
  .demo-service .service-hero-link { display: inline-flex; margin: 1rem 0 0; }
  .demo-service .hero-actions { display: flex; flex-direction: column; align-items: flex-start; }
}