/* How it works — sticky progress rail, 5-step timeline */

.page-head { max-width:720px; margin:0 auto; padding:80px 24px 0; text-align:center; }
.page-head .eyebrow { margin:0 0 16px; }
.page-head h1 { font-family:'Newsreader',serif; font-weight:500; font-size:40px; line-height:1.2; margin:0 0 18px; letter-spacing:-.01em; }
.page-head .lede { font-size:16px; line-height:1.65; color:var(--ink-soft); margin:0 auto; max-width:560px; }

.progress-rail { position:fixed; top:50%; right:32px; transform:translateY(-50%); z-index:50; display:flex; flex-direction:column; gap:14px; }
.progress-dot { width:8px; height:8px; border-radius:50%; background:transparent; border:1px solid var(--line-soft); cursor:pointer; position:relative; transition:all .3s ease; }
.progress-dot.active { background:var(--gold); border-color:var(--gold); transform:scale(1.35); }
.progress-dot::after { content:attr(data-label); position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; opacity:0; transition:opacity .3s ease; pointer-events:none; }
.progress-dot:hover::after, .progress-dot.active::after { opacity:1; }
@media (max-width:1100px){ .progress-rail { display:none; } }

.intro-block { max-width:720px; margin:0 auto; padding:56px 24px 0; }
.intro-block p { font-family:'Newsreader',serif; font-weight:500; font-style:italic; font-size:20px; line-height:1.55; color:var(--ink-soft); margin:0; text-align:center; }
.intro-block p em { color:var(--gold); font-style:normal; }

.steps { max-width:920px; margin:0 auto; padding:80px 24px 0; }
.step { display:grid; grid-template-columns:120px 1fr; gap:48px; padding-bottom:96px; position:relative; scroll-margin-top:80px; }
.step:last-of-type { padding-bottom:0; }

.step-rail { position:relative; }
.step-num { font-family:'Newsreader',serif; font-weight:500; font-style:italic; font-size:56px; color:var(--gold); line-height:1; }
.step-num-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:8px; font-weight:500; }
.step:not(:last-of-type) .step-rail::after { content:''; position:absolute; top:80px; bottom:-96px; left:14px; width:1px; background:linear-gradient(180deg, var(--line) 0%, var(--line) 90%, transparent 100%); }

.step-content { padding-top:8px; }
.step-concern { font-family:'Newsreader',serif; font-style:italic; font-size:15px; color:var(--muted); margin:0 0 10px; }
.step-concern::before { content:'"'; margin-right:2px; }
.step-concern::after { content:'"'; margin-left:2px; }
.step-title { font-family:'Newsreader',serif; font-weight:500; font-size:32px; line-height:1.2; margin:0 0 20px; letter-spacing:-.01em; }
.step-body { font-size:15.5px; line-height:1.7; color:#3D3A34; margin:0 0 28px; }
.step-body p { margin:0 0 14px; }
.step-body p:last-child { margin-bottom:0; }
.step-body strong { color:var(--ink); font-weight:500; }

.deliverable { background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:20px 22px; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; }
.deliverable-visual { width:80px; height:80px; border-radius:2px; background:var(--line); position:relative; overflow:hidden; }
.deliverable-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.deliverable-text { min-width:0; }
.deliverable-label { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--wine); font-weight:500; margin-bottom:6px; }
.deliverable-item { font-family:'Newsreader',serif; font-style:italic; font-weight:500; font-size:15px; color:var(--ink); margin:0 0 4px; }
.deliverable-caption { font-size:12.5px; color:var(--muted); margin:0; line-height:1.5; }

.visual-break { max-width:720px; margin:-40px auto 60px; padding:0 24px; }
.visual-break-inner { height:200px; border-radius:4px; overflow:hidden; position:relative; background:var(--line); }
.visual-break-inner img { width:100%; height:100%; object-fit:cover; display:block; }
.visual-break-caption { font-family:'Newsreader',serif; font-style:italic; font-size:13px; color:var(--muted); text-align:center; margin-top:14px; }

@media (max-width:768px){
  .step { grid-template-columns:1fr; gap:24px; padding-bottom:64px; }
  .step-rail::after { display:none !important; }
  .step-num { font-size:44px; }
  .step-title { font-size:26px; }
  .deliverable { grid-template-columns:1fr; }
  .deliverable-visual { width:100%; height:120px; }
  .visual-break { margin:-20px auto 40px; }
  .visual-break-inner { height:160px; }
}

.summary-block { max-width:820px; margin:0 auto; padding:40px 24px 0; text-align:center; }
.summary-block .rule-mini { width:40px; height:1px; background:var(--ink); margin:0 auto 24px; }
.summary-block p { font-family:'Newsreader',serif; font-weight:500; font-size:22px; line-height:1.5; color:var(--ink); margin:0 0 16px; }

@media (max-width:900px){ .page-head h1 { font-size:32px; } }

.quote-cta { margin-top:96px; }