/* ==========================================================================
   Case 02 Page — 316L Drill Guide
   Visual identity: "Engineering Bulletin / Technical Drawing" (deliberately
   different from Case 01's product-hero gradient style)
   Scope: .gc-case only. Does not touch global header/nav/footer.
   ========================================================================== */

.gc-case {
  --gcc-ink: #1a2435;          /* deep ink */
  --gcc-ink-muted: #5a6878;    /* slate */
  --gcc-paper: #faf7f0;        /* warm cream */
  --gcc-paper-2: #f1ece0;      /* warmer alt */
  --gcc-rule: #c8c2b3;         /* faded tan rule */
  --gcc-rule-soft: #ddd7c5;    /* softer rule */
  --gcc-accent: #1d4f7a;       /* deep teal-blue (≠ brand blue) */
  --gcc-accent-soft: #e8eef4;
  --gcc-warm: #b87333;         /* copper — sparing callouts */
  --gcc-warm-soft: #f5ecdc;
  --gcc-mono: 'JetBrains Mono','SF Mono',Consolas,'Liberation Mono',monospace;
  --gcc-r: 0px;                /* sharp corners — engineering report feel */
  --gcc-sh: none;              /* no shadow — paper feel */
  font-family: inherit;
  line-height: 1.65;
  color: var(--gcc-ink);
  background: var(--gcc-paper);
}

/* ---- Reading progress (thinner, single colour) ---- */
.gc-case-prog {
  position: fixed; left: 0; right: 0; top: 0; height: 2px;
  z-index: 9990; background: transparent; pointer-events: none;
}
.gc-case-prog span {
  display: block; height: 100%; width: 0;
  background: var(--gcc-warm);
  transition: width .1s linear;
}

/* ==========================================================================
   1. HERO — split layout, blueprint cyanotype aesthetic
   ================================================================ */
.gc-case-hero {
  position: relative; overflow: hidden;
  padding: clamp(40px, 5vw, 68px) 0 clamp(28px, 3.5vw, 44px);
  background:
    linear-gradient(135deg, #14304d 0%, #1d4f7a 60%, #163d62 100%);
  color: #f0ead8;
  border-bottom: 1px solid #0a1d33;
}
.gc-case-hero__inner {
  position: relative;
  max-width: 1140px; margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
.gc-case-hero::after {
  /* faint grid lines */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .6;
}
.gc-case-hero__copy { position: relative; }
.gc-case-hero__art  {
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.18);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
}
.gc-case-hero__art img {
  display: block; width: 100%; height: auto; min-height: 200px; aspect-ratio: 16 / 10;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.22);
  object-fit: cover;
}
.gc-case-hero__art-cap {
  font-family: var(--gcc-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(240,234,216,.55); text-align: center;
}
@media (min-width: 900px) {
  .gc-case-hero__inner {
    grid-template-columns: 1fr 460px; align-items: center; gap: 36px;
  }
  .gc-case-hero__art { max-width: 460px; justify-self: start; width: 100%; }
}

.gc-case-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--gcc-mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; color: #d8b87a; margin: 0 0 16px;
}
.gc-case-hero__eyebrow::before {
  content: "▸"; color: var(--gcc-warm); font-size: 12px;
}
.gc-case-hero__title {
  margin: 0 0 18px; max-width: 580px;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.18; font-weight: 700; letter-spacing: -.012em;
  color: #faf7f0;
}
.gc-case-hero__title em {
  font-style: normal; color: #d8b87a; font-weight: 700;
}
.gc-case-hero__lede {
  margin: 0 0 26px; max-width: 560px;
  font-size: clamp(14.5px, 1.4vw, 16.5px);
  color: rgba(240, 234, 216, .8); line-height: 1.7;
}

/* hero facts — bordered table look */
.gc-case-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  margin: 4px 0 0; border: 1px solid rgba(255,255,255,.18);
  max-width: 720px;
}
@media (min-width: 760px) { .gc-case-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gc-case-facts > div {
  padding: 11px 12px; min-width: 0;
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.gc-case-facts > div:nth-child(2n) { border-right: none; }
@media (min-width: 760px) {
  .gc-case-facts > div:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.12); }
  .gc-case-facts > div:last-child { border-right: none; }
}
.gc-case-facts dt {
  font-family: var(--gcc-mono);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: rgba(240, 234, 216, .55); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-case-facts dd {
  margin: 4px 0 0;
  font-family: var(--gcc-mono); font-size: 12.5px;
  color: #faf7f0; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==========================================================================
   2. STICKY CONTENTS — sharp card, monospaced
   ================================================================ */
.gc-case-toc {
  position: fixed;
  left: min(calc(100% - 212px), calc(50% + 540px));
  top: 50%; transform: translateY(-50%);
  width: 196px; max-height: 76vh; overflow-y: auto;
  padding: 14px 14px 16px; z-index: 40;
  background: #ffffff;
  border: 1px solid var(--gcc-rule);
  border-radius: var(--gcc-r);
  box-shadow: none;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.gc-case-toc.is-on { opacity: 1; visibility: visible; }
@media (max-width: 1499px) { .gc-case-toc { display: none; } }
.gc-case-toc__t {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 0 10px; padding-bottom: 8px;
  font-family: var(--gcc-mono);
  font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700;
  color: var(--gcc-accent);
  border-bottom: 1px solid var(--gcc-rule);
}
.gc-case-toc__t::after { content: "[12]"; color: var(--gcc-warm); font-weight: 600; }
.gc-case-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.gc-case-toc li { counter-increment: toc; }
.gc-case-toc a {
  display: flex; gap: 8px; padding: 5px 0;
  font-family: var(--gcc-mono);
  font-size: 11.5px; line-height: 1.4; color: var(--gcc-ink-muted);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color .15s ease, border-color .15s ease;
}
.gc-case-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 10px; font-weight: 700; color: var(--gcc-rule); min-width: 22px;
}
.gc-case-toc a:hover { color: var(--gcc-ink); border-bottom-color: var(--gcc-rule); }
.gc-case-toc a.is-active {
  color: var(--gcc-warm); border-bottom-color: var(--gcc-warm); font-weight: 700;
}
.gc-case-toc a.is-active::before { color: var(--gcc-warm); }

/* ==========================================================================
   3. SECTION SHELL
   ================================================================ */
.gc-case__section {
  padding: clamp(44px, 5.5vw, 72px) clamp(18px, 4vw, 32px);
  scroll-margin-top: 110px;
}
.gc-case__section--alt {
  background: var(--gcc-paper-2);
  border-top: 1px solid var(--gcc-rule-soft);
  border-bottom: 1px solid var(--gcc-rule-soft);
}
.gc-case__inner { max-width: 1100px; margin: 0 auto; }
.gc-case__label {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--gcc-mono);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--gcc-warm); margin: 0 0 10px;
}
.gc-case__label::before {
  content: "§"; font-size: 15px; color: var(--gcc-accent); line-height: 1;
}
.gc-case__h2 {
  margin: 0 0 14px; max-width: 780px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.24; font-weight: 700; color: var(--gcc-ink); letter-spacing: -.01em;
}
.gc-case__h2 em { font-style: normal; color: var(--gcc-accent); }
.gc-case__sub {
  margin: 0 0 30px; font-size: 15.5px; color: var(--gcc-ink-muted);
  max-width: 780px; line-height: 1.7;
}
.gc-case__p { margin: 0 0 14px; font-size: 15px; line-height: 1.78; color: var(--gcc-ink); }
.gc-case__p:last-child { margin-bottom: 0; }
.gc-case__p strong { color: var(--gcc-accent); font-weight: 650; }
.gc-case__p a {
  color: var(--gcc-accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--gcc-accent-soft);
}
.gc-case__p a:hover { border-bottom-color: var(--gcc-accent); }
.gc-case__p code {
  font-family: var(--gcc-mono); font-size: .92em;
  background: var(--gcc-warm-soft); color: var(--gcc-warm);
  padding: 1px 5px; border-radius: 2px;
}

/* ==========================================================================
   4. REQUIREMENT TABLE — bordered grid
   ================================================================ */
.gc-case-req {
  margin: 0; border: 1px solid var(--gcc-rule);
  background: #ffffff;
}
.gc-case-req > div {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gcc-rule-soft);
}
.gc-case-req > div:last-child { border-bottom: none; }
.gc-case-req > div:hover { background: var(--gcc-paper-2); }
@media (min-width: 700px) {
  .gc-case-req > div { grid-template-columns: 220px 1fr; gap: 28px; align-items: baseline; }
}
.gc-case-req dt {
  font-family: var(--gcc-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--gcc-ink-muted); line-height: 1.5;
}
.gc-case-req dd { margin: 0; font-size: 15px; color: var(--gcc-ink); line-height: 1.65; }
.gc-case-req dd code {
  font-family: var(--gcc-mono); background: var(--gcc-warm-soft); color: var(--gcc-warm);
  padding: 1px 5px; border-radius: 2px;
}

/* ==========================================================================
   5. CHALLENGE / STRATEGY CARDS — flat with mono numerals
   ================================================================ */
.gc-case-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 860px) { .gc-case-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gc-case-item {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--gcc-rule);
  border-top: 3px solid var(--gcc-accent);
  padding: 22px 24px 22px 86px;
  transition: background .18s ease, border-color .18s ease;
}
.gc-case-item:hover { background: var(--gcc-accent-soft); border-color: var(--gcc-accent); }
.gc-case-item__num {
  position: absolute; left: 24px; top: 22px;
  width: auto; height: auto;
  display: block;
  font-family: var(--gcc-mono);
  font-size: 26px; font-weight: 700;
  background: none; box-shadow: none;
  color: var(--gcc-accent);
}
.gc-case-item__tag {
  position: absolute; right: 22px; top: 24px;
  font-family: var(--gcc-mono);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gcc-ink-muted); font-weight: 700;
}
.gc-case-item h3 {
  margin: 0 0 8px; font-size: 17px; font-weight: 700;
  color: var(--gcc-ink); line-height: 1.35;
}
.gc-case-item p { margin: 0; font-size: 14.5px; line-height: 1.72; color: var(--gcc-ink); }

/* Challenge variant — copper accent, "PROBLEM" tag */
.gc-case-item--challenge { border-top-color: var(--gcc-warm); }
.gc-case-item--challenge .gc-case-item__num { color: var(--gcc-warm); }
.gc-case-item--challenge .gc-case-item__tag { color: var(--gcc-warm); }
.gc-case-item--challenge:hover {
  background: var(--gcc-warm-soft);
  border-color: var(--gcc-warm);
}

/* ==========================================================================
   6. STRATEGY — process flow diagram (visually different from Case 01 list)
   ================================================================ */
.gc-case-flow {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  border: 1px solid var(--gcc-rule);
  background: #ffffff;
}
@media (min-width: 760px) { .gc-case-flow { grid-template-columns: repeat(5, 1fr); } }
.gc-case-flow__step {
  position: relative;
  padding: 22px 18px 20px;
  border-bottom: 1px solid var(--gcc-rule-soft);
}
@media (min-width: 760px) {
  .gc-case-flow__step {
    border-bottom: none;
    border-right: 1px solid var(--gcc-rule-soft);
  }
  .gc-case-flow__step:last-child { border-right: none; }
  .gc-case-flow__step::after {
    content: "›"; position: absolute; right: -10px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--gcc-mono); font-size: 22px; font-weight: 700;
    color: var(--gcc-warm); background: #ffffff;
    width: 20px; height: 20px; line-height: 18px; text-align: center;
    z-index: 1;
  }
  .gc-case-flow__step:last-child::after { display: none; }
}
.gc-case-flow__num {
  display: block; font-family: var(--gcc-mono);
  font-size: 13px; font-weight: 700;
  color: var(--gcc-warm); margin-bottom: 10px;
}
.gc-case-flow__num::before { content: "STEP "; opacity: .65; }
.gc-case-flow__t {
  font-size: 15px; font-weight: 700; color: var(--gcc-ink); line-height: 1.35; margin-bottom: 8px;
}
.gc-case-flow__d {
  font-size: 13px; color: var(--gcc-ink-muted); line-height: 1.65;
}
.gc-case-flow__d code {
  font-family: var(--gcc-mono); font-size: .9em;
  background: var(--gcc-accent-soft); color: var(--gcc-accent);
  padding: 1px 4px; border-radius: 2px;
}

/* ==========================================================================
   7. MATERIAL — composition strip + properties grid
   ================================================================ */
.gc-case-mat { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 880px) { .gc-case-mat { grid-template-columns: 1.1fr 1fr; gap: 36px; } }
.gc-case-mat__props {
  margin: 0; border: 1px solid var(--gcc-rule);
  background: #ffffff;
}
.gc-case-mat__props > div {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--gcc-rule-soft);
}
.gc-case-mat__props > div:last-child { border-bottom: none; }
@media (min-width: 480px) {
  .gc-case-mat__props > div { grid-template-columns: 150px 1fr; gap: 20px; align-items: baseline; }
}
.gc-case-mat__props dt {
  font-family: var(--gcc-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--gcc-ink-muted);
}
.gc-case-mat__props dd { margin: 0; font-size: 14.5px; color: var(--gcc-ink); line-height: 1.6; }
.gc-case-mat__props dd code {
  font-family: var(--gcc-mono); background: var(--gcc-accent-soft); color: var(--gcc-accent);
  padding: 1px 5px; border-radius: 2px;
}

/* composition bar — inline SVG-friendly CSS */
.gc-case-compo {
  margin: 22px 0 0; padding: 14px 16px;
  background: #ffffff; border: 1px solid var(--gcc-rule);
}
.gc-case-compo__t {
  font-family: var(--gcc-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gcc-ink-muted); margin: 0 0 10px;
}
.gc-case-compo__row {
  display: grid; grid-template-columns: 40px 1fr 60px; align-items: center; gap: 10px;
  margin-bottom: 6px; font-family: var(--gcc-mono); font-size: 12px;
}
.gc-case-compo__row:last-child { margin-bottom: 0; }
.gc-case-compo__bar { height: 8px; background: var(--gcc-rule-soft); position: relative; }
.gc-case-compo__bar i {
  position: absolute; left: 0; top: 0; bottom: 0; background: var(--gcc-accent);
}
.gc-case-compo__bar i.alt { background: var(--gcc-warm); }
.gc-case-compo__bar i.dark { background: var(--gcc-ink); }

/* ==========================================================================
   8. SPECIFICATIONS — engineering data table (not gradient cards)
   ================================================================ */
.gc-case-specs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--gcc-rule);
}
@media (min-width: 760px) { .gc-case-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gc-case-spec {
  position: relative; padding: 22px 18px 20px;
  background: #ffffff;
  border-right: 1px solid var(--gcc-rule-soft);
  border-bottom: 1px solid var(--gcc-rule-soft);
  transition: background .18s ease;
}
.gc-case-spec:nth-child(2n) { border-right: none; }
.gc-case-spec:nth-last-child(-n+2) { border-bottom: none; }
@media (min-width: 760px) {
  .gc-case-spec { border-bottom: none; }
  .gc-case-spec:nth-child(2n) { border-right: 1px solid var(--gcc-rule-soft); }
  .gc-case-spec:last-child { border-right: none; }
}
.gc-case-spec:hover { background: var(--gcc-accent-soft); }
.gc-case-spec__val {
  display: block; font-family: var(--gcc-mono);
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 700;
  line-height: 1.1; margin-bottom: 6px;
  letter-spacing: -.01em;
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--gcc-ink);
}
.gc-case-spec__lbl {
  display: block; font-family: var(--gcc-mono);
  font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
  color: var(--gcc-ink-muted); line-height: 1.45;
}
.gc-case-spec__lbl::before { content: "▸ "; color: var(--gcc-warm); }

/* ==========================================================================
   9. INSPECTION — numbered tag list (different from Case 01 checkmark)
   ================================================================ */
.gc-case-insp { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gc-case-insp li {
  position: relative; padding: 20px 22px 20px 96px;
  background: #ffffff; border: 1px solid var(--gcc-rule);
  border-left: 3px solid var(--gcc-accent);
  transition: background .18s ease, border-color .18s ease;
}
.gc-case-insp li:hover { background: var(--gcc-accent-soft); }
.gc-case-insp li::before {
  content: "INSPECTION \2014 " attr(data-stage);
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 76px; padding: 20px 12px;
  font-family: var(--gcc-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--gcc-accent);
  background: var(--gcc-accent-soft);
  border-right: 1px solid var(--gcc-rule-soft);
  line-height: 1.5;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}
.gc-case-insp h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--gcc-ink); }
.gc-case-insp p { margin: 0; font-size: 14.5px; line-height: 1.72; color: var(--gcc-ink); }

/* ==========================================================================
   10. RESULT — engineering inspection report (NOT dark navy panel)
   ================================================================ */
.gc-case-result {
  background: #ffffff;
  border: 1px solid var(--gcc-rule);
  border-radius: 0;
}
.gc-case-result__head {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--gcc-accent); color: #faf7f0;
  padding: 12px 22px;
  font-family: var(--gcc-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.gc-case-result__head span:last-child { color: rgba(250,247,240,.7); font-weight: 500; }
.gc-case-result__body { padding: 26px clamp(22px, 3vw, 32px); }
.gc-case-result__grid {
  margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--gcc-rule);
}
@media (min-width: 760px) { .gc-case-result__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gc-case-result__grid > div {
  padding: 14px 18px;
  border-right: 1px solid var(--gcc-rule-soft);
  border-bottom: 1px solid var(--gcc-rule-soft);
  display: flex; flex-direction: column; gap: 5px;
}
.gc-case-result__grid > div:nth-child(2n) { border-right: none; }
@media (min-width: 760px) {
  .gc-case-result__grid > div:nth-child(2n) { border-right: 1px solid var(--gcc-rule-soft); }
  .gc-case-result__grid > div:nth-child(3n) { border-right: none; }
}
.gc-case-result__grid dt {
  font-family: var(--gcc-mono);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--gcc-ink-muted);
}
.gc-case-result__grid dd {
  margin: 0; font-family: var(--gcc-mono);
  font-size: 14px; font-weight: 600; color: var(--gcc-ink); line-height: 1.45;
}
.gc-case-result__note {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px dashed var(--gcc-rule);
  font-size: 13.5px; line-height: 1.7; color: var(--gcc-ink-muted); font-style: italic;
}

/* ==========================================================================
   11. DEMONSTRATES — capability check sheet
   ================================================================ */
.gc-case-demo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  border: 1px solid var(--gcc-rule); background: #ffffff; }
@media (min-width: 860px) { .gc-case-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gc-case-demo li {
  padding: 18px 22px;
  border-bottom: 1px solid var(--gcc-rule-soft);
  border-right: 1px solid var(--gcc-rule-soft);
  display: grid; grid-template-columns: 36px 1fr; gap: 14px;
  transition: background .18s ease;
}
@media (min-width: 860px) {
  .gc-case-demo li:nth-child(2n) { border-right: none; }
  .gc-case-demo li:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 859px) {
  .gc-case-demo li { border-right: none; border-bottom: 1px solid var(--gcc-rule-soft); }
  .gc-case-demo li:last-child { border-bottom: none; }
}
.gc-case-demo li:hover { background: var(--gcc-accent-soft); }
.gc-case-demo__num {
  font-family: var(--gcc-mono); font-size: 22px; font-weight: 700;
  color: var(--gcc-warm); line-height: 1;
}
.gc-case-demo h3 {
  margin: 2px 0 5px; font-size: 15px; font-weight: 700;
  color: var(--gcc-ink); line-height: 1.35;
}
.gc-case-demo p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--gcc-ink-muted); }
.gc-case-demo a { color: var(--gcc-accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--gcc-accent-soft); }
.gc-case-demo a:hover { border-bottom-color: var(--gcc-accent); }

/* ==========================================================================
   12. RELATED CAPABILITIES — engineering index cards
   ================================================================ */
.gc-case-related { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--gcc-rule); background: #ffffff;
}
@media (min-width: 840px) { .gc-case-related { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gc-case-related li { display: flex; }
.gc-case-related a {
  flex: 1; padding: 20px 18px;
  border-right: 1px solid var(--gcc-rule-soft);
  border-bottom: 1px solid var(--gcc-rule-soft);
  background: #ffffff;
  text-decoration: none;
  display: flex; flex-direction: column; gap: 6px;
  transition: background .18s ease;
}
.gc-case-related a::before { display: none; }
.gc-case-related li:nth-child(2n) a { border-right: none; }
.gc-case-related li:nth-last-child(-n+2) a { border-bottom: none; }
@media (min-width: 840px) {
  .gc-case-related li:nth-child(2n) a { border-right: 1px solid var(--gcc-rule-soft); }
  .gc-case-related li:nth-child(4n) a { border-right: none; }
  .gc-case-related li:nth-last-child(-n+4) a { border-bottom: none; }
}
.gc-case-related a:hover { background: var(--gcc-accent-soft); }
.gc-case-related__num {
  font-family: var(--gcc-mono); font-size: 10px;
  color: var(--gcc-warm); letter-spacing: .12em;
}
.gc-case-related__t {
  font-size: 14.5px; font-weight: 700; color: var(--gcc-ink); line-height: 1.35;
}
.gc-case-related__d { font-size: 12.5px; color: var(--gcc-ink-muted); line-height: 1.55; }
.gc-case-related__go {
  font-family: var(--gcc-mono); font-size: 11px;
  color: var(--gcc-accent); margin-top: 4px;
}
.gc-case-related a:hover .gc-case-related__go { color: var(--gcc-warm); }

/* ==========================================================================
   13. FAQ — flat report style
   ================================================================ */
/* FAQ — engineering bulletin style: numbered, mono uppercase questions,
   hairline dividers, circular +/- toggle that rotates to × on open */
.gc-case .faq-wrap {
  border-top: 1px solid var(--gcc-rule);
  border-bottom: 1px solid var(--gcc-rule);
  counter-reset: gcfaq;
}
.gc-case .faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gcc-rule-soft);
  margin: 0; position: relative;
  transition: background .18s ease;
}
.gc-case .faq-item:last-child { border-bottom: 0; }
.gc-case .faq-item:hover { background: rgba(29,79,122,.025); }
.gc-case .faq-q {
  padding: 20px 64px 20px 84px;
  font-family: var(--gcc-mono);
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 650;
  color: var(--gcc-ink); cursor: pointer; position: relative; line-height: 1.55;
  transition: color .18s ease;
  counter-increment: gcfaq;
}
.gc-case .faq-q::before {
  content: "Q." counter(gcfaq);
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  font-family: var(--gcc-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--gcc-warm); font-weight: 700;
}
.gc-case .faq-q:hover { color: var(--gcc-accent); }
.gc-case .faq-q.open { color: var(--gcc-accent); }
.gc-case .faq-q .plus {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-family: var(--gcc-mono); font-size: 15px; line-height: 1;
  color: var(--gcc-warm); font-weight: 400;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gcc-warm); border-radius: 50%;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.gc-case .faq-q.open .plus {
  transform: translateY(-50%) rotate(45deg);
  background: var(--gcc-warm); color: #fff;
}

/* answer — fully overrides global 1.css max-height:300px that was clipping
   long answers; ours allows ~10 lines comfortably */
.gc-case .faq-a {
  max-height: 0; overflow: hidden;
  padding: 0 64px 0 84px;
  font-size: 14.5px; line-height: 1.78;
  color: var(--gcc-ink-muted);
  transition: max-height .35s ease, padding .35s ease;
}
.gc-case .faq-a.open {
  max-height: 800px;
  padding: 6px 64px 24px 84px;
  border-top: 1px dashed var(--gcc-rule-soft);
  margin-top: -1px;
}
.gc-case .faq-a::before {
  content: "A. ";
  font-family: var(--gcc-mono); font-size: 11px; font-weight: 700;
  color: var(--gcc-warm); letter-spacing: .08em;
}
.gc-case .faq-a strong { color: var(--gcc-accent); font-weight: 650; }

/* ==========================================================================
   14. DISCLAIMER & CTA
   ================================================================ */
.gc-case-note {
  margin: 0; padding: 14px 18px 14px 20px; font-size: 13px; line-height: 1.7;
  color: var(--gcc-warm); background: var(--gcc-warm-soft);
  border: 1px solid #ecd9b6;
  border-left: 3px solid var(--gcc-warm);
  font-family: inherit;
}
.gc-case-note code {
  font-family: var(--gcc-mono); background: #fff5e2;
  padding: 1px 5px; border-radius: 2px;
}

.gc-case-cta {
  text-align: center;
  padding: clamp(48px, 6vw, 80px) clamp(18px, 4vw, 32px);
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(29,79,122,.05) 22px 23px),
    var(--gcc-paper);
  border-top: 1px solid var(--gcc-rule);
}
.gc-case-cta__inner { max-width: 720px; margin: 0 auto; }
.gc-case-cta h2 {
  margin: 0 0 14px; font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700; color: var(--gcc-ink); line-height: 1.24;
}
.gc-case-cta p {
  margin: 0 0 28px; font-size: 15.5px; color: var(--gcc-ink-muted); line-height: 1.7;
}

/* ==========================================================================
   15. RESPONSIVE / MOTION
   ================================================================ */
@media (max-width: 700px) {
  .gc-case-item { padding: 20px 18px 18px 76px; }
  .gc-case-item__num { left: 18px; top: 18px; font-size: 22px; }
  .gc-case-item__tag { right: 16px; top: 18px; }
  .gc-case-insp li { padding-left: 88px; }
  .gc-case-specs { grid-template-columns: 1fr; }
  .gc-case-spec { border-right: none; border-bottom: 1px solid var(--gcc-rule-soft); }
  .gc-case-spec:last-child { border-bottom: none; }
  .gc-case-result__grid { grid-template-columns: 1fr; }
  .gc-case-result__grid > div { border-right: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-case-item, .gc-case-spec, .gc-case-insp li, .gc-case-demo li,
  .gc-case-related a, .gc-case-toc, .gc-case-prog span {
    transition: none !important;
  }
}