/* Fybr · How it works: three beats on the thread, no motion of its own. Loads after base.css. */

.hiw-hero{padding:calc(var(--header-h) + clamp(50px,8vw,110px)) 0 clamp(60px,8vw,110px);background:radial-gradient(90% 80% at 75% 40%,#0F151C 0%,var(--deep) 65%)}
.hiw-hero h1{font-size:clamp(3rem,6vw,5.8rem);line-height:.98;letter-spacing:-.035em;margin:22px 0 24px}
.hiw-hero .deck{font-size:clamp(1.05rem,1.3vw,1.2rem);color:#D6DEE7;max-width:40rem;line-height:1.55}
/* the three sentences, said once, in the serif */
.hiw-sum{margin:30px 0 28px;padding-left:16px;border-left:2px solid var(--brass);max-width:40rem;font-family:var(--serif);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.45;color:var(--ink)}

/* one beat per step: the number and heading left, the words right */
.hiw-beat{padding:clamp(70px,8vw,120px) 0;background:var(--ground);border-top:1px solid var(--line-soft)}
.hiw-beat--fix{background:var(--deep)}
.hiw-beat__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,100px);align-items:start}
.hiw-beat__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.hiw-beat--fix .hiw-beat__n{color:#C9B584}
.hiw-beat--keep .hiw-beat__n{color:var(--brass)}
.hiw-beat h2{font-size:clamp(2.2rem,4vw,3.8rem);line-height:1;letter-spacing:-.03em}
.hiw-beat__copy p{color:var(--ink-mid);max-width:36rem;line-height:1.7;margin-bottom:18px}
.hiw-beat__copy p:first-child{color:var(--ink);font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.45}
.hiw-beat__copy p:last-child{margin-bottom:0}

/* how it starts */
.hiw-start{padding:clamp(80px,9vw,140px) 0;background:var(--deep);border-top:1px solid var(--line-soft)}
.hiw-start__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,100px);align-items:start}
.hiw-start h2{font-size:clamp(2.2rem,3.8vw,3.6rem);line-height:1;letter-spacing:-.03em;margin:18px 0 0}
.hiw-start__copy p{color:var(--ink);font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.45;max-width:36rem}
.hiw-start .actions{margin-top:30px}

@media (max-width:1080px){
  .hiw-beat__grid,.hiw-start__grid{grid-template-columns:1fr;gap:22px}
}
@media (max-width:760px){
  .hiw-hero h1{font-size:clamp(2.8rem,12.5vw,4rem)}
  .hiw-sum{font-size:1.1rem}
}