/* ============================================================
   Davis Digital Studio — how-we-work.css
   HOW-WE-WORK-PAGE-ONLY layer, scoped under body[data-page="how"].
   Loaded after styles.css.

   Full visual redesign pass. Copy unchanged.

   This page and Growth Partnership are both chronological, so
   they deliberately do NOT share a device. Growth Partnership got
   a horizontal timeline (three points, a wide rail). This page
   gets a vertical zig-zag narrative — five steps, alternating
   left/right down a central guide line — a genuinely different
   rhythm for a genuinely different pace (five steps in a single
   engagement, not three stages of a multi-year drift).
   ============================================================ */

body[data-page="how"] .hww-shot{
  box-shadow:0 28px 56px -34px rgba(27,21,37,.24);
  border-radius:16px;
}
body[data-page="how"] .hww-shot img{ border:none; border-radius:16px; }

/* ---------------------------------------------------------------
   FIVE STEPS — vertical zig-zag
   --------------------------------------------------------------- */
body[data-page="how"] .hww-steps-section{
  position:relative;
  background:
    radial-gradient(ellipse 800px 500px at 90% 20%, rgba(91,63,160,.045), transparent 60%),
    var(--paper);
}

body[data-page="how"] .hww-steps{
  position:relative;
  display:flex; flex-direction:column;
  gap:36px;
}
body[data-page="how"] .hww-rail{
  position:absolute; left:50%; top:8px; bottom:8px; width:2px;
  transform:translateX(-50%);
  background:linear-gradient(var(--p),var(--brass) 50%,var(--hair));
  opacity:.35;
}

body[data-page="how"] .hww-step{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:22px;
  width:56%;
}
body[data-page="how"] .hww-step-l{ margin-right:auto; flex-direction:row; }
body[data-page="how"] .hww-step-r{ margin-left:auto; flex-direction:row-reverse; text-align:right; }
body[data-page="how"] .hww-step-r .feel{ justify-content:flex-end; }

body[data-page="how"] .hww-num{
  flex-shrink:0;
  font-family:var(--serif); font-weight:340; font-size:44px; line-height:1;
  color:var(--brass-deep); opacity:.7;
  padding-top:4px;
}

body[data-page="how"] .hww-step-card{
  background:#fff;
  border-radius:20px;
  padding:28px 26px 24px;
  box-shadow:0 22px 46px -32px rgba(27,21,37,.2);
}
body[data-page="how"] .hww-step-card h2{ font-size:21px; margin-bottom:10px; }
body[data-page="how"] .hww-step-card p{ color:var(--muted); font-size:15px; }
body[data-page="how"] .hww-step-card .feel{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--brass-deep); text-transform:uppercase;
}
body[data-page="how"] .hww-step-card .feel::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--brass);
}

@media(max-width:760px){
  body[data-page="how"] .hww-rail{ left:24px; transform:none; }
  body[data-page="how"] .hww-step,
  body[data-page="how"] .hww-step-l,
  body[data-page="how"] .hww-step-r{
    width:100%; margin:0; flex-direction:row; text-align:left;
  }
  body[data-page="how"] .hww-step-r .feel{ justify-content:flex-start; }
  body[data-page="how"] .hww-num{ font-size:32px; width:48px; }
  body[data-page="how"] .hww-step-card{ padding:22px 20px 20px; }
}