/* ==========================================================================
   EK Studio — Terms, Payments & Project Information page styles
   Extends styles.css (shared tokens, header, footer, buttons, final CTA, seal).
   Calm, scannable editorial layout — no imagery, mockups, or galleries.
   ========================================================================== */

/* ---------- 1. HERO ---------- */
.tm-hero{padding-block:clamp(44px,6vw,84px) clamp(40px,5vw,64px)}
.tm-hero-inner{max-width:760px}
.tm-hero-inner h1{margin:0 0 22px}
.tm-hero-inner h1 em{font-style:italic;color:var(--burgundy)}
.tm-hero .lead{font-size:1.18rem;line-height:1.6;color:var(--body);max-width:60ch}
.tm-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* ---------- 2–6. INFORMATION ROWS ---------- */
.tm-info{padding-block:clamp(20px,3vw,40px) var(--section-y)}
.tm-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(24px,4vw,64px);align-items:start;
  padding-block:clamp(30px,4vw,48px);border-top:1px solid var(--divider);
}
.tm-row:first-child{border-top:1.5px solid var(--burgundy)}
.tm-row-head{min-width:0}
.tm-row-head .eyebrow{margin-bottom:14px}
.tm-row-head h2{
  font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.018em;
  font-size:clamp(1.6rem,2.6vw,2.15rem);color:var(--espresso);margin:0;
}
.tm-row-body{min-width:0}
.tm-row-body p{font-size:1.08rem;line-height:1.65;color:var(--body);max-width:56ch}

/* client responsibilities — numbered list */
.tm-resp{display:flex;flex-direction:column;gap:0}
.tm-resp li{
  display:flex;align-items:baseline;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--divider);
  font-size:1.05rem;line-height:1.5;color:var(--body);
}
.tm-resp li:first-child{padding-top:0}
.tm-resp li:last-child{border-bottom:0}
.tm-resp-num{
  font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  color:var(--signal);flex:none;
}

/* ---------- 7. NEXT STEP reuses shared .final-cta (espresso) ---------- */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:768px){
  .tm-hero-actions .btn{width:100%}
  .tm-hero-actions{align-items:stretch}
  .tm-row{grid-template-columns:1fr;gap:16px}
  .tm-row-head h2{font-size:1.5rem}
}