/* -----------------------------------------------------------------------------
   SPONTE PRODUCTIONS — SERVICES V2 DRAFT STYLESHEET
   -----------------------------------------------------------------------------
   Scoped styles for public/services-draft.html only.

   This stylesheet is additive. It piggybacks on:
     - site.css       (base tokens: --bg, --text, --font-body, --font-display,
                       --font-mono, --border, --wrap, --gutter, .wrap, .eyebrow,
                       .brand, .site-header, nav.primary, footer)
     - case-study.css (draft-banner, internal-band, media placeholders — reused
                       verbatim so the draft chrome matches the case-study drafts)

   All services-specific classes are prefixed .sv- to avoid collision with
   site.css and case-study.css.

   No em-dashes in body copy. Copy discipline lives in the data file.
   ------------------------------------------------------------------------- */

/* ---- Top pending band (small strip under the draft banner) ---------------- */
/* Sticks directly under .draft-banner (which is position:sticky;top:0;z-index:120).
   Banner height is roughly 2.5rem; sv-top-pending sits under it at z-index:119
   so it clears the fixed .site-header (z-index:100). */
.sv-top-pending{
  position:sticky;
  top:2.5rem;
  z-index:119;
  background:#1a1509;
  border-bottom:1px solid #3a2f1a;
  color:#d9c088;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.55rem 0;
  line-height:1.5;
}
.sv-top-pending .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .75rem;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.sv-top-pending-label{
  color:#f4d9b0;
  letter-spacing:.22em;
  font-weight:500;
}
.sv-top-pending-item{opacity:.9}
.sv-top-pending-sep{opacity:.4}

/* ---- Hero ----------------------------------------------------------------- */
/* Extra top padding accounts for the fixed site header + sticky draft banner
   + sticky top-pending strip stack above the hero. */
.sv-hero{
  padding-top:clamp(4rem, 3rem + 3vw, 6rem);
  padding-bottom:clamp(3rem, 2rem + 3vw, 5rem);
  border-bottom:1px solid var(--border);
}
.sv-hero .top-eyebrow{
  display:inline-block;
  margin-bottom:2rem;
  color:var(--text-muted);
}
.sv-hero h1{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(2.2rem, 1.3rem + 3.2vw, 4.4rem);
  letter-spacing:-.028em;
  line-height:1;
  max-width:22ch;
  margin-bottom:1.5rem;
  color:var(--text);
}
.sv-hero .subtitle{
  font-size:clamp(1.05rem, .95rem + .5vw, 1.3rem);
  color:var(--text);
  line-height:1.5;
  max-width:58ch;
  margin-bottom:1.5rem;
  opacity:.95;
}
.sv-hero .positioning{
  font-size:clamp(.98rem, .9rem + .35vw, 1.1rem);
  color:var(--text-muted);
  line-height:1.65;
  max-width:64ch;
  margin-bottom:2.5rem;
}
.sv-hero .hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.5rem;
  align-items:center;
}
.sv-hero .cta-primary{
  display:inline-block;
  background:var(--text);
  color:var(--bg);
  padding:.85rem 1.4rem;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.9rem;
  letter-spacing:.04em;
  text-decoration:none;
  transition:opacity .2s var(--ease-out);
}
.sv-hero .cta-primary:hover{opacity:.85}
.sv-hero .cta-secondary{
  font-family:var(--font-body);
  font-size:.9rem;
  color:var(--text-muted);
  text-decoration:none;
  border-bottom:1px solid var(--border-2);
  padding-bottom:.15rem;
  transition:color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.sv-hero .cta-secondary:hover{color:var(--text);border-bottom-color:var(--text)}

/* ---- Generic section chrome ---------------------------------------------- */
.sv-section{
  padding-block:clamp(3rem, 2rem + 3vw, 5rem);
  border-bottom:1px solid var(--border);
}
.sv-section:last-of-type{border-bottom:none}
.sv-head{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:clamp(1.75rem, 4vw, 4rem);
  align-items:baseline;
  margin-bottom:clamp(1.5rem, 3vw, 2.5rem);
}
.sv-num{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.sv-section h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem);
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--text);
  margin-bottom:.9rem;
}
.sv-intro{
  font-size:1.02rem;
  line-height:1.6;
  color:var(--text-muted);
  max-width:60ch;
}

@media (max-width:720px){
  .sv-head{grid-template-columns:1fr;gap:.75rem}
}

/* ---- Who this is for ------------------------------------------------------ */
.sv-who-list{
  list-style:none;
  padding:0;
  margin:0 0 2rem 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.25rem 2rem;
  max-width:none;
}
.sv-who-list li{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:1.1rem 1.25rem;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
}
.cat-label{
  font-family:var(--font-body);
  font-weight:500;
  font-size:1rem;
  color:var(--text);
  letter-spacing:-.005em;
}
.cat-note{
  font-family:var(--font-body);
  font-size:.9rem;
  color:var(--text-muted);
  line-height:1.5;
}
.sv-filter{
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--text-muted);
  line-height:1.6;
  max-width:64ch;
  padding-top:1rem;
  border-top:1px solid var(--border);
}

/* ---- The four engagement models ------------------------------------------ */
.sv-engagement-list{
  display:flex;
  flex-direction:column;
  gap:clamp(2rem, 3vw, 3.25rem);
}
.sv-engagement{
  padding:clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
}
.sv-eng-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.1rem 1.5rem;
  align-items:baseline;
  padding-bottom:1.25rem;
  margin-bottom:1.5rem;
  border-bottom:1px solid var(--border);
}
.sv-eng-num{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.18em;
  color:var(--text-faint);
}
.sv-engagement h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  letter-spacing:-.015em;
  line-height:1.15;
  color:var(--text);
  margin-bottom:.4rem;
}
.sv-eng-oneline{
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--text-muted);
  line-height:1.5;
  max-width:64ch;
}

.sv-eng-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.4rem 2rem;
  margin-bottom:1.5rem;
}
@media (max-width:860px){
  .sv-eng-grid{grid-template-columns:1fr;gap:1.25rem}
}
.sv-eng-block h4{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:.5rem;
}
.sv-eng-block p{
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--text-muted);
  line-height:1.65;
  margin:0;
}

.sv-list{
  list-style:none;
  padding:0;
  margin:0;
}
.sv-list li{
  position:relative;
  padding-left:1.2rem;
  font-size:.92rem;
  line-height:1.55;
  color:var(--text-muted);
  margin-bottom:.4rem;
}
.sv-list li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--text-faint);
  font-family:var(--font-mono);
}
.sv-list-inline li{margin-bottom:.35rem}

/* Proof anchor block (inside an engagement card) */
.sv-proof{
  padding:1.25rem 1.4rem;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:6px;
  margin-bottom:1rem;
}
.sv-proof-row + .sv-proof-row{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
}
.sv-proof-row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:1rem 1.5rem;
  align-items:baseline;
}
@media (max-width:640px){
  .sv-proof-row{grid-template-columns:1fr;gap:.35rem}
}
.sv-proof-label{
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d9c088;
}
.sv-proof-name{
  font-family:var(--font-body);
  font-weight:600;
  font-size:1rem;
  color:var(--text);
  margin-bottom:.35rem;
}
.sv-proof-role{
  font-family:var(--font-body);
  font-size:.9rem;
  color:var(--text-muted);
  line-height:1.55;
  margin:0 0 .35rem 0;
}
.sv-proof-line{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:0;
  line-height:1.55;
}

.sv-eng-pending{
  margin-top:1rem;
  padding:1rem 1.25rem;
  border:1px dashed var(--border-2);
  border-radius:6px;
  background:transparent;
}
.sv-pending-label{
  display:block;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:.55rem;
}

.sv-eng-cta{
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--border);
}
.sv-eng-cta-link{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.9rem;
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--text);
  padding-bottom:.15rem;
  transition:opacity .2s var(--ease-out);
}
.sv-eng-cta-link:hover{opacity:.7}

/* ---- How Sponte works ---------------------------------------------------- */
.sv-steps{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.5rem 2rem;
}
.sv-steps > li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.85rem 1.25rem;
  align-items:baseline;
  padding:1rem 1.1rem;
  border-left:1px solid var(--border);
}
.sv-step-num{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.12em;
  color:var(--text-faint);
}
.sv-step-body{display:flex;flex-direction:column;gap:.35rem}
.sv-step-label{
  font-family:var(--font-body);
  font-weight:500;
  font-size:1rem;
  color:var(--text);
}
.sv-steps p{
  font-family:var(--font-body);
  font-size:.9rem;
  color:var(--text-muted);
  line-height:1.55;
  margin:0;
}

/* ---- Proof anchors section (site-level) ---------------------------------- */
.sv-anchor-list{
  list-style:none;
  padding:0;
  margin:0 0 1.5rem 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.25rem 1.75rem;
}
.sv-anchor-list li{
  padding:1.1rem 1.25rem;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.sv-anchor-name{
  font-family:var(--font-body);
  font-weight:600;
  font-size:1rem;
  color:var(--text);
  letter-spacing:-.005em;
}
.sv-anchor-role{
  font-family:var(--font-body);
  font-size:.9rem;
  color:var(--text-muted);
  line-height:1.55;
  margin:0;
}
.sv-anchor-line{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:0;
  line-height:1.55;
}
.sv-anchor-closer{
  font-family:var(--font-body);
  font-size:.9rem;
  color:var(--text-muted);
  padding-top:1rem;
  border-top:1px solid var(--border);
}

/* ---- Selective studio capabilities (visually secondary) ------------------ */
.sv-selective{background:transparent}
.sv-selective .sv-head h2{
  /* One step down from primary section heads to keep this secondary */
  font-size:clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
}
.sv-sel-list{
  list-style:none;
  padding:0;
  margin:0 0 1rem 0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:.85rem 1.5rem;
}
.sv-sel-list li{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:.85rem 1rem;
  border-bottom:1px solid var(--border);
}
.sv-sel-label{
  font-family:var(--font-body);
  font-weight:500;
  font-size:.95rem;
  color:var(--text);
}
.sv-sel-note{
  font-family:var(--font-body);
  font-size:.85rem;
  color:var(--text-muted);
  line-height:1.55;
}
.sv-sel-closer{
  font-family:var(--font-body);
  font-size:.9rem;
  color:var(--text-muted);
  padding-top:.75rem;
}

/* ---- Investment & fit ---------------------------------------------------- */
.sv-invest-list{
  list-style:none;
  padding:0;
  margin:0 0 1rem 0;
  max-width:64ch;
}
.sv-invest-list li{
  position:relative;
  padding:.55rem 0 .55rem 1.5rem;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.sv-invest-list li:last-child{border-bottom:none}
.sv-invest-list li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--text-faint);
  font-family:var(--font-mono);
}
.sv-invest-closer{
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--text-muted);
  padding-top:.75rem;
  max-width:64ch;
}

/* ---- Contact CTA --------------------------------------------------------- */
.sv-cta-head{margin-bottom:2rem}
.sv-cta-head h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.9rem, 1.4rem + 2vw, 3rem);
  letter-spacing:-.025em;
  line-height:1;
  color:var(--text);
  max-width:24ch;
}
.sv-cta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.5rem 2rem;
  margin-bottom:1.5rem;
}
.sv-cta-card{
  padding:1.5rem 1.6rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.sv-cta-primary{background:#141414}
.sv-cta-btn{
  display:inline-block;
  align-self:flex-start;
  background:var(--text);
  color:var(--bg);
  padding:.85rem 1.4rem;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.9rem;
  letter-spacing:.04em;
  text-decoration:none;
  transition:opacity .2s var(--ease-out);
}
.sv-cta-btn:hover{opacity:.85}
.sv-cta-btn-soft{
  background:transparent;
  color:var(--text);
  border:1px solid var(--text);
}
.sv-cta-btn-soft:hover{background:var(--text);color:var(--bg);opacity:1}
.sv-cta-card p{
  font-family:var(--font-body);
  font-size:.92rem;
  color:var(--text-muted);
  line-height:1.6;
  margin:0;
}
.sv-cta-direct{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-faint);
  padding-top:1rem;
  border-top:1px solid var(--border);
}

/* ---- Internal band (bottom of draft) ------------------------------------- */
/* Case-study CSS sets an ::before pill reading "Internal draft notes — not
   part of the public case study". Override for the services draft so the pill
   reads correctly on this surface. */
.internal-band::before{
  content:"Internal draft notes — not part of the public services page";
}
.internal-band .sv-head h2{
  font-size:clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  color:var(--text);
}
.sv-internal-callout{
  padding:1.1rem 1.25rem;
  border:1px solid #3a2f1a;
  background:rgba(217,192,136,.04);
  border-radius:6px;
}
.sv-internal-callout-title{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d9c088;
  margin-bottom:.75rem;
}
.sv-internal-callout ul,
.sv-internal-notes ul{
  list-style:none;
  padding:0;
  margin:0;
}
.sv-internal-callout li,
.sv-internal-notes li{
  position:relative;
  padding:.35rem 0 .35rem 1.25rem;
  font-family:var(--font-body);
  font-size:.92rem;
  color:var(--text-muted);
  line-height:1.55;
}
.sv-internal-callout li::before,
.sv-internal-notes li::before{
  content:"—";
  position:absolute;
  left:0;
  color:#d9c088;
  font-family:var(--font-mono);
}
.sv-internal-notes{
  margin-top:1.5rem;
  padding:1.1rem 1.25rem;
  border:1px dashed #3a2f1a;
  border-radius:6px;
}

/* ---- Safety: prevent horizontal overflow --------------------------------- */
main img, main video{max-width:100%;height:auto}
.sv-engagement, .sv-cta-card, .sv-anchor-list li, .sv-who-list li{
  min-width:0;
}

/* ---- Phase 7A polish: mobile hero clears fixed 71px site header ---------- */
/* Base .sv-hero uses clamp(4rem, 3rem + 3vw, 6rem) which resolves to roughly
   59–64px of padding-top at 375px, letting the fixed top nav clip the top of
   the Fraunces headline. Scoped mobile bump keeps the fix Services-only.     */
@media (max-width:640px){
  .sv-hero{padding-top:128px}
}