/* ==========================================================================
   Halocline case study — page-local components only.
   Everything structural (layout, nav, cards, flow, cta, footer, reveal) is
   inherited from ../portfolio.css. This file adds ONLY the Halocline brand
   accent tokens and the bespoke components the shared sheet does not provide.
   ========================================================================== */

:root{
  /* Halocline brand palette — accents only, never the page base */
  --hc-abyss:#063F46;
  --hc-current:#1F6F8B;
  --hc-copper:#B46A2A;
  --hc-gold:#D6A23A;
  --hc-marula:#2E8B57;
  --hc-ember:#B23A2E;
  --hc-salt:#F7F4EC;
  --hc-basalt:#2E3532;
}

/* --- Status pills (case-intro) ------------------------------------------- */
.hc-status{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.hc-pill{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:6px 14px;font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.hc-pill .dot{width:8px;height:8px;border-radius:50%;flex:none}
.hc-pill .dot.done{background:var(--hc-marula)}
.hc-pill .dot.baseline{background:var(--hc-gold)}
.hc-pill .dot.pending{background:var(--hc-basalt)}

/* --- Vitals metadata strip ----------------------------------------------- */
.hc-vitals{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.hc-vitals div{padding:18px 22px;border-right:1px solid var(--line)}
.hc-vitals div:last-child{border-right:0}
.hc-vitals .k{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.hc-vitals .v{font-family:'Fraunces',serif;font-size:1.02rem;font-weight:600;color:var(--hc-abyss);line-height:1.25}

/* --- Strata graphic (the hidden boundary) -------------------------------- */
.hc-strata{margin-top:34px;display:flex;flex-direction:column;gap:10px;max-width:760px}
.hc-band{display:flex;align-items:center;gap:16px;padding:15px 20px;border-radius:12px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--band,var(--hc-current))}
.hc-band .bx{font-family:'Fraunces',serif;font-size:1.02rem;font-weight:600;color:var(--ink);flex:0 0 40%}
.hc-band .bd{font-size:.86rem;color:var(--ink-soft);font-weight:500;line-height:1.45}
.hc-band.boundary{background:linear-gradient(100deg,var(--hc-gold),var(--sun-soft));border:1px solid var(--hc-gold);border-left:5px solid var(--hc-copper);box-shadow:0 6px 18px rgba(214,162,58,.22)}
.hc-band.boundary .bx{color:#7a5410}
.hc-band.boundary .bd{color:#6e4d13}

/* --- Evidence card (governed boundary) ----------------------------------- */
.hc-evidence{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-md);max-width:440px}
.hc-evidence .ev-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.hc-evidence .ev-label{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hc-current)}
.hc-evidence .ev-flag{font-size:.72rem;font-weight:800;border:1px solid var(--hc-gold);color:#7a5410;background:var(--sun-soft);border-radius:100px;padding:3px 11px}
.hc-evidence .ev-val{font-family:'Fraunces',serif;font-size:2.6rem;font-weight:600;color:var(--hc-abyss);line-height:1}
.hc-evidence .ev-val small{font-family:'Manrope',sans-serif;font-size:.8rem;font-weight:600;color:var(--ink-faint);display:block;margin-top:4px;letter-spacing:.02em}
.hc-evidence .ev-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.hc-evidence .ev-meta div{background:var(--bg-soft);border-radius:10px;padding:11px 13px}
.hc-evidence .ev-meta .mk{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.hc-evidence .ev-meta .mv{font-family:'SFMono-Regular',Consolas,monospace;font-size:.9rem;color:var(--hc-abyss);font-weight:600;margin-top:5px}
.hc-evidence .ev-boundary{display:flex;align-items:center;gap:10px;margin:16px 0;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7a5410}
.hc-evidence .ev-boundary::before,.hc-evidence .ev-boundary::after{content:"";height:2px;flex:1;background:var(--hc-gold)}
.hc-evidence .ev-disp{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--hc-salt);border:1px solid var(--line);border-radius:12px;padding:14px}
.hc-evidence .ev-disp .dl{font-size:.8rem;font-weight:700;color:var(--ink)}
.hc-evidence .ev-disp .dl span{display:block;font-size:.72rem;font-weight:500;color:var(--ink-faint);margin-top:3px}
.hc-evidence .ev-disp .dv{font-size:.74rem;font-weight:800;border-radius:100px;padding:5px 13px;background:var(--sun-soft);color:#7a5410;border:1px solid var(--hc-gold);white-space:nowrap}

/* --- Method packs reuse .cards/.card; academy sub-block ------------------ */
.hc-academy{margin-top:30px;background:var(--hc-abyss);color:var(--hc-salt);border-radius:var(--radius);padding:32px;position:relative;overflow:hidden}
.hc-academy h3{color:#fff;font-size:1.25rem;margin-bottom:8px}
.hc-academy>p{color:rgba(247,244,236,.82);font-weight:500;font-size:.95rem;max-width:62ch;line-height:1.65}
.hc-academy .tracks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 20px}
.hc-academy .track{background:rgba(247,244,236,.07);border:1px solid rgba(247,244,236,.16);border-radius:14px;padding:18px}
.hc-academy .track b{font-family:'Fraunces',serif;font-size:1.15rem;color:var(--hc-gold);display:block;line-height:1}
.hc-academy .track span{font-size:.8rem;color:rgba(247,244,236,.82);font-weight:500;margin-top:8px;display:block;line-height:1.4}
.hc-academy .rules{display:flex;flex-wrap:wrap;gap:8px}
.hc-academy .rule{background:rgba(46,139,87,.18);border:1px solid rgba(46,139,87,.45);color:#a7e6c4;border-radius:100px;padding:6px 14px;font-size:.78rem;font-weight:700}

/* --- Disposition chips --------------------------------------------------- */
.hc-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.hc-chip{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;border-top:4px solid var(--chip,var(--hc-basalt));transition:transform .35s,box-shadow .35s}
.hc-chip:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.hc-chip b{font-family:'Fraunces',serif;font-size:1.12rem;color:var(--ink);display:block;margin-bottom:5px}
.hc-chip span{font-size:.85rem;color:var(--ink-soft);font-weight:500;line-height:1.45}

/* --- Forecast (compression ledger) --------------------------------------- */
.hc-forecast{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-md);position:relative}
.hc-forecast .fc-badge{display:inline-flex;align-items:center;gap:8px;background:var(--hc-gold);color:#4a3308;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:100px;padding:7px 16px;margin-bottom:24px;box-shadow:0 6px 16px rgba(214,162,58,.32)}
.hc-forecast .fc-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#4a3308}
.hc-bar-row{margin-bottom:22px}
.hc-bar-row .bt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.hc-bar-row .bt b{font-family:'Fraunces',serif;font-size:1.02rem;color:var(--ink);font-weight:600}
.hc-bar-row .bt span{font-size:.82rem;color:var(--ink-faint);font-weight:600}
.hc-track{height:26px;background:var(--bg-soft);border-radius:100px;overflow:hidden}
.hc-fill{height:100%;border-radius:100px;display:flex;align-items:center;padding-left:16px;font-size:.78rem;font-weight:800;color:#fff}
.hc-fill.conv{width:100%;background:var(--hc-basalt);color:var(--hc-salt)}
.hc-fill.khula{width:16%;min-width:120px;background:linear-gradient(90deg,var(--hc-marula),var(--hc-gold))}
.hc-forecast .fc-note{font-size:.84rem;color:var(--ink-faint);font-style:italic;margin-top:6px;line-height:1.55;max-width:64ch}

/* --- Pricing tiers -------------------------------------------------------- */
.hc-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch}
.hc-tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s}
.hc-tier:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.hc-tier .tn{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--hc-current);margin-bottom:12px}
.hc-tier .tp{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;color:var(--hc-abyss);line-height:1.15}
.hc-tier .tp small{font-family:'Manrope',sans-serif;font-size:.8rem;font-weight:600;color:var(--ink-faint);display:block;margin-top:6px}
.hc-tier .tw{font-size:.9rem;color:var(--ink-soft);font-weight:500;margin-top:16px;line-height:1.55;border-top:1px solid var(--line);padding-top:16px}
.hc-tier.feature{background:linear-gradient(160deg,var(--hc-abyss),#0b525b);border-color:var(--hc-abyss);box-shadow:var(--shadow-lg)}
.hc-tier.feature .tn{color:var(--hc-gold)}
.hc-tier.feature .tp{color:#fff}
.hc-tier.feature .tp small,.hc-tier.feature .tw{color:rgba(247,244,236,.85)}
.hc-tier.feature .tw{border-top-color:rgba(247,244,236,.2)}
.hc-tier .tbadge{display:inline-block;align-self:flex-start;background:var(--hc-gold);color:#4a3308;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:100px;padding:4px 11px;margin-bottom:14px}

/* --- Media banner + brand mark (page helpers) ---------------------------- */
.media-banner{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);border:5px solid #fff;background:var(--hc-salt);margin-top:30px}
.media-banner img{width:100%;height:auto;display:block}
.media-cap{font-size:.82rem;color:var(--ink-faint);margin-top:12px;font-weight:500;max-width:64ch}
.hc-mark{width:132px;height:auto;margin-bottom:22px;opacity:.95}

/* --- Snippet cards (extracted, in-theme crops of the real interface) ----- */
.hc-snip{display:block;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);border:5px solid #fff;background:#fff;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.hc-snip:hover{box-shadow:var(--shadow-xl)}
.hc-snip img{display:block;width:100%;height:auto}
.hc-snip.tilt-l{transform:rotate(-2.4deg)}
.hc-snip.tilt-l:hover{transform:rotate(-1deg) translateY(-3px)}
.hc-snip.tilt-r{transform:rotate(2deg)}
.hc-snip.tilt-r:hover{transform:rotate(.8deg) translateY(-3px)}
.hc-snip-cap{font-size:.78rem;color:var(--ink-faint);font-weight:500;margin-top:14px;line-height:1.5}
.hc-snip-cap b{color:var(--ink);font-weight:700}

/* Hero — single-column stack + full-width photo band (matches SMP's pattern) */
.case-hero .hero-stack .hero-photo{aspect-ratio:16/10}
.case-hero .hero-stack .hc-vitals{margin-top:30px}

/* Snippet grid — loose two-up collage (device-gallery replacement) */
.hc-snip-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:44px;align-items:start}
.hc-snip-grid figure{margin:0}

/* --- Responsive ----------------------------------------------------------- */
@media(max-width:920px){
  .hc-vitals{grid-template-columns:1fr 1fr}
  .hc-vitals div:nth-child(2){border-right:0}
  .hc-academy .tracks{grid-template-columns:1fr 1fr}
  .hc-chips{grid-template-columns:1fr 1fr}
  .hc-pricing{grid-template-columns:1fr}
  .hc-snip-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:640px){
  .hc-vitals{grid-template-columns:1fr}
  .hc-vitals div{border-right:0;border-bottom:1px solid var(--line)}
  .hc-vitals div:last-child{border-bottom:0}
  .hc-band{flex-direction:column;align-items:flex-start;gap:6px}
  .hc-band .bx{flex:none}
  .hc-academy .tracks{grid-template-columns:1fr}
  .hc-chips{grid-template-columns:1fr}
  .hc-evidence .ev-meta{grid-template-columns:1fr}
}