/* Engineering Build Stories: editorial storytelling + architectural flow maps.
   No image dependencies, runtime frameworks, or third-party scripts. */
.build-stories { padding-top:7rem; padding-bottom:7rem; }
.build-stories .section-head { max-width:1070px; margin-bottom:36px; }
.build-stories .section-title { max-width:1000px; }
.case-jump-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin:0 0 30px; }
.case-jump-links a {
  --case-hover:var(--cyan); position:relative; display:grid; gap:8px;
  padding:20px 22px 22px; border:1px solid rgba(255,255,255,.17);
  background:rgba(255,255,255,.04); border-radius:20px;
  color:#fbfcff; transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s;
  overflow:hidden; min-width:0;
}
.case-jump-links a:nth-child(2) { --case-hover:var(--gold); }
.case-jump-links a:nth-child(3) { --case-hover:var(--pink); }
.case-jump-links a:nth-child(4) { --case-hover:var(--mint); }
.case-jump-links a::after {
  content:""; position:absolute; height:2px; bottom:0; left:24px; right:24px; opacity:.55;
  background:linear-gradient(90deg,var(--case-hover),transparent 90%); transform-origin:left;
  transform:scaleX(.2); transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s;
}
.case-jump-links a:hover,.case-jump-links a:focus-visible {
  transform:translateY(-4px); border-color:var(--case-hover);
  background:rgba(255,255,255,.075); outline:none;
}
.case-jump-links a:hover::after,.case-jump-links a:focus-visible::after { transform:scaleX(1); opacity:1; }
.case-jump-index {
  font:800 11px "SFMono-Regular",Consolas,monospace; color:var(--case-hover);
  letter-spacing:.12em;
}
.case-jump-links strong { font-size:clamp(16px,1.75vw,21px); line-height:1.25; letter-spacing:-.03em; }
.case-jump-arrow { position:absolute; right:22px; top:20px; color:var(--case-hover); transition:transform .3s; }
.case-jump-links a:hover .case-jump-arrow { transform:translate(4px,-4px); }
.case-stories-list { display:grid; gap:30px; }
.case-study {
  --case-accent:var(--cyan); --case-glow:rgba(97,243,255,.12);
  position:relative; isolation:isolate;
  border:1px solid rgba(255,255,255,.2); border-radius:28px;
  background:linear-gradient(160deg,rgba(20,26,48,.97),rgba(7,10,27,.97) 65%,rgba(16,13,33,.97));
  box-shadow:0 30px 90px rgba(0,0,0,.28); overflow:visible;
  scroll-margin-top:135px;
}
.case-study--dinnerradar { --case-accent:var(--gold); --case-glow:rgba(255,228,138,.12); }
.case-study--titan { --case-accent:var(--pink); --case-glow:rgba(255,139,212,.13); }
.case-study--hoag { --case-accent:var(--mint); --case-glow:rgba(140,255,193,.1); }
.case-study::before {
  content:""; position:absolute; z-index:-1; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(ellipse at 95% -15%,var(--case-glow),transparent 49%),
    linear-gradient(180deg,rgba(255,255,255,.032),transparent 36%);
}
.case-study-intro { padding:clamp(25px,3.8vw,54px) clamp(24px,4vw,56px) 30px; }
.case-study-meta {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  color:rgba(228,236,255,.68);
  font:700 11px "SFMono-Regular",Consolas,monospace; letter-spacing:.08em; text-transform:uppercase;
}
.case-study-count { color:var(--case-accent); font-weight:900; }
.case-study-meta>span:nth-child(2) { padding-left:13px; border-left:1px solid rgba(255,255,255,.18); }
.case-status { display:inline-flex; align-items:center; gap:7px; border-radius:999px;
  border:1px solid rgba(255,255,255,.13); padding:7px 10px; font-size:10px; color:rgba(235,244,255,.75);
}
.case-status::before { content:""; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); }
.case-status--live { border-color:rgba(140,255,193,.24); color:#a7ffcf; }
.case-status--live::before { background:var(--mint); box-shadow:0 0 12px rgba(140,255,193,.55); }
.case-study-title-row { display:flex; align-items:flex-end; gap:28px; justify-content:space-between; margin-top:31px; }
.case-study-title-row>div { min-width:0; max-width:850px; }
.case-study-overline { color:var(--case-accent); font:800 12px "SFMono-Regular",Consolas,monospace;
  letter-spacing:.19em; text-transform:uppercase;
}
.case-study-title { margin-top:15px; color:#fbfcff; font-size:clamp(30px,3.35vw,49px); line-height:1.08;
  letter-spacing:-.055em; text-wrap:balance; max-width:880px;
}
.case-study-deck { margin-top:19px; max-width:820px; color:rgba(240,246,255,.78);
  font-size:clamp(16px,1.6vw,19px); line-height:1.6; text-wrap:pretty;
}
.case-primary-link,.case-secondary-link {
  display:inline-flex; justify-content:center; align-items:center; text-align:center;
  gap:13px; flex-shrink:0; min-height:49px; padding:12px 18px;
  border-radius:999px; font:800 12px "SFMono-Regular",Consolas,monospace;
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s,border-color .25s;
}
.case-primary-link { background:#fbfcff; color:#06101d; }
.case-secondary-link { color:#fff; border:1px solid rgba(255,255,255,.27); background:rgba(255,255,255,.07); }
.case-primary-link:hover,.case-secondary-link:hover,.case-primary-link:focus-visible,.case-secondary-link:focus-visible {
  transform:translateY(-3px); outline:2px solid var(--case-accent); outline-offset:3px;
}
.case-primary-link span,.case-secondary-link span { font-size:19px; color:inherit; }
.case-study-body {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:clamp(25px,4vw,50px); padding:0 clamp(24px,4vw,56px) clamp(25px,3.8vw,50px);
  align-items:start;
}
.case-story-copy { display:grid; gap:28px; padding-top:12px; min-width:0; }
.case-story-block { position:relative; padding-left:22px; border-left:1px solid rgba(255,255,255,.16); }
.case-story-block::before { content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  top:7px; left:-4px; background:var(--case-accent); box-shadow:0 0 12px var(--case-glow);
}
.case-story-block h4 {
  font-size:clamp(18px,1.65vw,23px); font-weight:800; letter-spacing:-.035em; color:#f8fbff;
  display:flex; align-items:baseline; gap:12px;
}
.case-story-block h4 span { color:var(--case-accent); font:800 11px "SFMono-Regular",Consolas,monospace; letter-spacing:.08em; }
.case-story-block p { margin-top:10px; color:rgba(229,236,249,.79); font-size:15.5px; line-height:1.73; }
.case-story-block p strong { color:#fff; font-weight:800; }
.case-story-takeaway { padding:18px 20px; border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(120deg,var(--case-glow),rgba(255,255,255,.03)); color:rgba(241,247,255,.89);
  font-size:14px; line-height:1.7; font-weight:600;
}
.case-architecture {
  position:relative; margin:0; padding:21px;
  border:1px solid rgba(255,255,255,.17); border-radius:22px;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    rgba(2,5,19,.69);
  background-size:32px 32px;
  box-shadow:0 30px 58px rgba(0,0,0,.21);
}
.case-architecture-top { display:flex; gap:8px; align-items:center;
  font:800 10px "SFMono-Regular",Consolas,monospace; letter-spacing:.12em;
  color:rgba(242,247,255,.88); text-transform:uppercase; margin-bottom:22px;
}
.case-architecture-top span:last-child { margin-left:auto; text-align:right; color:rgba(231,243,255,.4); letter-spacing:.05em; }
.case-diagram-indicator { width:8px; height:8px; border-radius:50%; background:var(--case-accent);
  box-shadow:0 0 16px var(--case-glow);
  animation:case-indicator-breathe 2.4s ease-in-out infinite;
}
.case-flow { display:grid; gap:23px; padding:0 4px 4px 14px; }
.case-flow-step {
  position:relative; display:grid; gap:7px; padding:17px 19px; min-height:104px;
  border:1px solid rgba(255,255,255,.15); border-radius:15px;
  background:rgba(12,19,40,.92);
  transition:transform .33s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,box-shadow .3s;
}
.case-flow-step::before {
  content:""; position:absolute; top:21px; left:-19px; height:9px; width:9px;
  border:1px solid var(--case-accent); background:#061021; border-radius:50%;
  box-shadow:0 0 12px var(--case-glow);
}
.case-flow-step::after {
  content:""; position:absolute; left:-15px; top:33px; height:calc(100% + 12px); width:1px;
  background:linear-gradient(to bottom,var(--case-accent),rgba(255,255,255,.12),var(--case-accent));
  opacity:.66; transform-origin:top; animation:case-signal 3.5s linear infinite;
}
.case-flow-step:last-child::after { display:none; }
.case-flow-step:hover { transform:translateX(4px); border-color:var(--case-accent);
  background:rgba(19,30,55,.98); box-shadow:0 10px 38px var(--case-glow);
}
.case-flow-index { color:var(--case-accent); font:800 10px "SFMono-Regular",Consolas,monospace; letter-spacing:.14em; }
.case-flow-step strong { color:#fff; font-size:clamp(15px,1.4vw,18px); line-height:1.32; letter-spacing:-.02em; }
.case-flow-step small { color:rgba(224,235,255,.67); font-size:12px; line-height:1.48; }
.case-architecture figcaption { padding:18px 6px 1px; color:rgba(231,239,255,.54);
  font:500 11px/1.7 "SFMono-Regular",Consolas,monospace;
}
.case-architecture figcaption a { color:var(--case-accent); text-decoration:underline; text-underline-offset:3px; }
.case-stack {
  display:flex; align-items:flex-start; gap:20px; padding:21px clamp(24px,4vw,56px) 26px;
  border-top:1px solid rgba(255,255,255,.12);
}
.case-stack-label { flex-shrink:0; padding-top:9px; color:var(--case-accent);
  font:800 11px "SFMono-Regular",Consolas,monospace; letter-spacing:.12em;
}
.case-stack ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.case-stack li { display:inline-flex; align-items:center; padding:8px 11px;
  border:1px solid rgba(255,255,255,.17); border-radius:999px; background:rgba(255,255,255,.055);
  color:#e1ecff; font:700 11.5px "SFMono-Regular",Consolas,monospace;
}
.case-confidentiality-note {
  margin:23px auto 0; padding:0 18px; color:rgba(236,244,255,.48);
  max-width:910px; text-align:center; font:600 12px/1.7 "SFMono-Regular",Consolas,monospace;
}
@keyframes case-indicator-breathe { 50% { opacity:.55; transform:scale(1.35); } }
@keyframes case-signal { 0%,100% { opacity:.3; } 50% { opacity:.9; } }
@media(max-width:1100px) {
  .case-study-title-row { align-items:flex-start; flex-direction:column; gap:20px; }
  .case-study-body { grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); gap:25px; }
  .case-story-block p { font-size:14.5px; }
}
@media(max-width:860px) {
  .case-study-body { grid-template-columns:minmax(0,1fr); }
  .case-architecture { width:100%; }
  .case-flow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0; }
  .case-flow-step { min-height:116px; }
  .case-flow-step::before,.case-flow-step::after { display:none; }
  .case-stack { flex-direction:column; gap:13px; }
  .case-stack-label { padding:0; }
}
@media(max-width:650px) {
  .build-stories { padding-block:5.3rem; }
  .case-jump-links { grid-template-columns:1fr; gap:9px; }
  .case-jump-links a { padding:14px 19px; gap:5px; }
  .case-jump-links strong { font-size:18px; }
  .case-study { border-radius:21px; }
  .case-study-intro { padding:25px 20px 23px; }
  .case-study-body { padding:0 20px 25px; gap:26px; }
  .case-study-meta { gap:7px; font-size:10px; }
  .case-study-meta>span:nth-child(2) { max-width:210px; padding-left:9px; }
  .case-study-title { font-size:clamp(29px,8vw,39px); }
  .case-story-copy { gap:22px; }
  .case-story-block { padding-left:17px; }
  .case-story-block h4 { font-size:20px; }
  .case-story-block p { font-size:15px; }
  .case-study-deck { font-size:16px; }
  .case-architecture { padding:17px; }
  .case-flow { grid-template-columns:1fr; gap:11px; padding:0; }
  .case-flow-step { min-height:auto; padding:14px 16px; }
  .case-stack { padding:18px 20px 25px; }
  .case-primary-link,.case-secondary-link { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .case-diagram-indicator,.case-flow-step::after { animation:none!important; }
  .case-jump-links a,.case-flow-step,.case-primary-link,.case-secondary-link { transition:none!important; }
}

/* Titan engineering practice matrix. Clear signals for technical reviewers. */
.case-engineering-practices {
  padding:26px clamp(24px,4vw,56px) 31px;
  border-top:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,139,212,.045),transparent 90%);
}
.case-engineering-practices-heading { display:flex; gap:10px 24px; align-items:baseline; flex-wrap:wrap; margin-bottom:19px; }
.case-engineering-practices-heading span {
  font:800 10px "SFMono-Regular",Consolas,monospace;
  letter-spacing:.14em; color:var(--case-accent);
}
.case-engineering-practices-heading h4 {
  color:#f9fbff; font-size:clamp(18px,1.9vw,23px);
  font-weight:800; letter-spacing:-.035em;
}
.case-practice-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.case-practice {
  display:flex; flex-direction:column; gap:10px; min-width:0; padding:18px;
  border:1px solid rgba(255,255,255,.14); border-radius:17px;
  background:rgba(4,9,27,.67);
  transition:border-color .3s,background .3s,transform .35s cubic-bezier(.16,1,.3,1);
}
.case-practice:hover {
  transform:translateY(-3px);
  border-color:rgba(255,139,212,.45);
  background:rgba(255,139,212,.07);
}
.case-practice>span {
  color:var(--case-accent); font:800 10px "SFMono-Regular",Consolas,monospace;
  letter-spacing:.1em; text-transform:uppercase;
}
.case-practice strong { color:#fbfcff; font-size:16px; line-height:1.32; letter-spacing:-.02em; }
.case-practice p { color:rgba(230,239,255,.72); font-size:13px; line-height:1.65; }
@media(max-width:1050px) {
  .case-practice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .case-engineering-practices { padding:22px 20px 26px; }
  .case-practice-grid { grid-template-columns:minmax(0,1fr); gap:9px; }
  .case-practice { padding:17px; }
}
@media(prefers-reduced-motion:reduce) {
  .case-practice { transition:none!important; }
  .case-practice:hover { transform:none!important; }
}

/* Two actual DinnerRadar experiences, shown side by side as product decisions. */
.case-dinner-modes {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
  margin:28px 0 0;
}
.case-dinner-mode {
  position:relative; isolation:isolate; overflow:hidden;
  padding:21px 24px 23px; border-radius:17px;
  border:1px solid rgba(255,228,138,.22);
  background:linear-gradient(130deg,rgba(255,228,138,.075),rgba(7,13,34,.58) 72%);
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .26s,background .26s;
}
.case-dinner-mode:nth-child(2) {
  border-color:rgba(97,243,255,.23);
  background:linear-gradient(130deg,rgba(97,243,255,.06),rgba(7,13,34,.58) 72%);
}
.case-dinner-mode:hover {
  transform:translateY(-3px); border-color:rgba(255,228,138,.56);
}
.case-dinner-mode:nth-child(2):hover { border-color:rgba(97,243,255,.52); }
.case-dinner-mode-label {
  display:block; color:var(--gold);
  font:800 11px "SFMono-Regular",Consolas,monospace; letter-spacing:.14em; margin-bottom:12px;
}
.case-dinner-mode:nth-child(2) .case-dinner-mode-label { color:var(--cyan); }
.case-dinner-mode strong {
  color:#fbfcff; display:block; font-size:clamp(18px,2vw,25px);
  letter-spacing:-.035em; line-height:1.2;
}
.case-dinner-mode p { margin-top:10px; color:rgba(228,236,251,.76); font-size:14px; line-height:1.64; }
@media(max-width:1100px) and (min-width:651px) {
  .case-jump-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .case-dinner-modes { grid-template-columns:minmax(0,1fr); gap:9px; margin-top:22px; }
  .case-dinner-mode { padding:17px 18px 19px; }
}
@media(prefers-reduced-motion:reduce) {
  .case-dinner-mode { transition:none!important; }
  .case-dinner-mode:hover { transform:none!important; }
}