/* ==========================================================================
   Stephanie Cacheo — Portfolio shared stylesheet
   Common case-study layout: hero, snapshot, confidentiality note, process
   phases, callouts, impact cards, closing. Identical across all 7 case
   studies before this consolidation, so it lives here once.
   Each case study keeps its own small <style> block for the one thing
   that genuinely varies page to page: the feedback-grid layout (the
   number and shape of testimonial cards) and minor hero font sizing.
   ========================================================================== */

body{ font-size:16px; line-height:1.7; }

main .wrap{ max-width:760px; }

/* Hero */
.hero{ padding:56px 0 32px; }
.badges{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.badge{ font-size:11px; padding:3px 10px; border-radius:4px; background:#eee9e0; color:#57503f; letter-spacing:0.02em; }
.badge.nda{ background:#f3e3da; color:var(--clay-dark); }
h1.display{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  font-size:clamp(30px, 5vw, 46px); letter-spacing:-0.3px; line-height:1.08; margin:0 0 14px;
}
.hook{ font-size:18px; font-weight:500; color:#57503f; margin:0 0 10px; max-width:580px; }
.lede{ font-size:15px; color:var(--muted); max-width:620px; margin:0; }

/* Case-study section nav (in-page jump links) */
.case-subnav{ border-bottom:0.5px solid var(--border); padding:14px 0; }
.case-subnav nav{ display:flex; gap:14px; flex-wrap:wrap; max-width:760px; margin:0 auto; padding:0 24px; }
.case-subnav nav a{ font-size:12px; color:var(--muted); text-decoration:none; letter-spacing:0.02em; }
.case-subnav nav a:hover{ color:var(--carbon); }

/* Snapshot */
.snapshot{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:10px; margin:32px 0 8px;
}
.snap-card{ background:var(--card); border:0.5px solid var(--border); border-radius:8px; padding:12px 14px; }
.snap-card .label{ font-size:11px; color:var(--muted); margin:0 0 3px; text-transform:uppercase; letter-spacing:0.03em; }
.snap-card .value{ font-size:13px; margin:0; font-weight:500; }

/* Section rhythm */
main section{ padding:72px 0; border-top:0.5px solid var(--border); }
main section:first-of-type{ border-top:none; }
h2.section-title{ font-family:'Inter',sans-serif; font-weight:600; font-size:22px; margin:0 0 20px; }
h3.sub-title{ font-family:'Inter',sans-serif; font-weight:600; font-size:16px; margin:28px 0 12px; }
main p{ margin:0 0 16px; max-width:640px; }
main ul{ margin:0 0 16px; padding-left:20px; }
main li{ margin-bottom:8px; max-width:620px; }

/* Confidentiality note */
.confidential{
  background:#fff; border:0.5px solid var(--border); border-left:3px solid var(--clay);
  border-radius:0 8px 8px 0; padding:16px 18px; margin:0 0 8px;
}
.confidential p{ margin:0; font-size:14px; color:#57503f; }
.confidential .cap{ font-size:12px; color:var(--muted); margin-top:8px; font-style:italic; }

/* Callout box */
.why{ background:#fff; border:0.5px solid var(--border); border-radius:8px; padding:16px 18px; margin:16px 0; }
.why .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); margin:0 0 6px; }
.why p{ margin:0; font-size:14px; }

.problem{ background:#fff; border:0.5px solid var(--border); border-radius:8px; padding:18px 20px; margin:16px 0; }
.problem .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); margin:0 0 8px; }
.problem p{ margin:0; font-size:15px; font-weight:500; font-style:italic; color:var(--carbon); }

/* Goals grid */
.goals-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:20px; margin-top:8px; }
.goals-col .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); margin-bottom:10px; }
.goals-col ul{ padding-left:16px; }
.goals-col li{ font-size:14px; margin-bottom:6px; }

/* Process pills */
.process-pills{ display:flex; gap:6px; margin:20px 0 40px; flex-wrap:wrap; }
.pill{
  flex:1; min-width:110px; text-align:center; background:#fff; border:0.5px solid var(--border);
  border-radius:6px; padding:10px 6px; font-family:'Oswald',sans-serif; font-weight:500;
  font-size:12px; letter-spacing:0.03em; text-transform:uppercase; color:#57503f; text-decoration:none;
}
.pill.active{ background:var(--carbon); color:var(--bone); border-color:var(--carbon); }

.phase{ padding:36px 0; border-top:0.5px dashed var(--border); }
.phase:first-of-type{ border-top:none; padding-top:0; }
.phase-label{
  font-family:'Oswald',sans-serif; font-weight:500; font-size:12px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--clay-dark); margin:0 0 6px;
}
.phase h3{ font-family:'Inter',sans-serif; font-weight:600; font-size:18px; margin:0 0 14px; }

.ai-callout{
  background:var(--sage-bg); border-left:3px solid var(--sage); border-radius:0 8px 8px 0;
  padding:14px 16px; margin:16px 0;
}
.ai-callout .eyebrow{
  font-family:'Oswald',sans-serif; font-size:11px; font-weight:500; color:var(--sage-text);
  text-transform:uppercase; letter-spacing:0.03em; margin:0 0 6px;
}
.ai-callout p{ margin:0; font-size:13px; color:var(--sage-text); }

.artifact{
  border:0.5px solid var(--border); border-radius:8px; background:linear-gradient(180deg,#f7f4ee,#f2ede4);
  padding:34px 16px; text-align:center; margin:18px 0 6px;
}
.artifact .pending-icon{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:999px; background:var(--card); border:0.5px solid var(--border); margin-bottom:10px;
  color:var(--clay-dark); font-size:14px;
}
.artifact .pending-label{
  font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--clay-dark); margin:0 0 4px;
}
.artifact .pending-sub{ font-size:13px; color:var(--muted); margin:0; }
.caption{ font-size:13px; color:var(--muted); margin:0 0 16px; font-style:italic; }

/* Pillars */
.pillars{ display:grid; gap:14px; margin-top:8px; }
.pillar{ background:#fff; border:0.5px solid var(--border); border-radius:8px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; }
.pillar .num{ font-family:'Oswald',sans-serif; font-weight:600; font-size:22px; color:var(--clay); line-height:1; }
.pillar h4{ margin:0 0 4px; font-size:15px; font-weight:600; }
.pillar p{ margin:0; font-size:14px; color:#57503f; }

/* Impact cards */
.impact-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:12px; margin-top:8px; }
.impact-card{ background:#fff; border:0.5px solid var(--border); border-radius:8px; padding:16px; }
.impact-card .eyebrow{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; margin:0 0 8px; }
.impact-card p{ margin:0; font-size:14px; font-weight:500; }

/* Before / after */
.before-after{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0; }
.ba-col{ background:#fff; border:0.5px solid var(--border); border-radius:8px; padding:16px; }
.ba-col .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); margin:0 0 8px; }
.ba-col p{ font-size:14px; margin:0; }
@media (max-width:520px){ .before-after{ grid-template-columns:1fr; } }

/* Feedback base (per-page style block sets .feedback-grid column layout) */
.quote-card{ background:#fff; border:0.5px solid var(--border); border-radius:8px; padding:20px; display:flex; flex-direction:column; height:100%; }
.quote-card.featured{ padding:28px; border-left:3px solid var(--clay); }
.quote-mark{ font-family:'Fraunces',serif; font-style:italic; font-weight:600; font-size:30px; color:var(--clay); line-height:1; margin-bottom:6px; display:block; }
.quote-card.featured .quote-mark{ font-size:40px; }
.quote-card .quote{ font-size:14px; font-style:italic; line-height:1.6; margin:0 0 14px; flex-grow:1; color:var(--carbon); }
.quote-card.featured .quote{ font-size:19px; font-weight:500; line-height:1.55; }
.quote-card.supporting .quote{ font-size:14px; }
.quote-who{ font-size:12px; color:var(--muted); margin:0; }
.quote-card.featured .quote-who{ font-size:13px; font-weight:500; color:var(--carbon); }
@media (max-width:700px){ .feedback-grid{ grid-template-columns:1fr; } }

.closing{ padding:56px 0 80px; }
.closing p{ font-size:16px; max-width:600px; }
.closing .signoff{ font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); margin-top:24px; }

@media (max-width:640px){
  .snapshot{ margin-top:24px; }
  .goals-grid{ gap:16px; }
}