/* ==========================================================================
   HOW IT WORKS — ROUND 2 (2026-10-29)
   Reference-matched rebuild:
   - pure-black hero with a two-route split CTA
   - horizontal 6-step path with a route fork under step 02
   - full-bleed dark NDA band (image left / copy right)
   - every container matches the 1380px navigation width
   Loaded AFTER style.css; overrides the earlier .hw-* rules.
   ========================================================================== */

/* Page width = navigation width */
.page-how .container{max-width:1380px;}

/* ---------------------------- 1. HERO ---------------------------- */
.page-how .hw-hero{background:#000000;}
.page-how .hw-hero__inner{
  min-height:clamp(520px,62vh,660px);
  padding:104px 0 96px;
}
.page-how .hw-hero__eyebrow{
  color:rgba(184,148,95,.9);
  letter-spacing:.34em;
  margin-bottom:30px;
}
.page-how .hw-hero__eyebrow::before,
.page-how .hw-hero__eyebrow::after{background:rgba(184,148,95,.42);width:44px;}
.page-how .hw-hero__title{
  max-width:1080px;
  font-size:clamp(34px,4.9vw,66px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.035em;
}
.page-how .hw-hero__sub{
  max-width:720px;
  margin-top:28px;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.75;
  color:rgba(245,243,239,.66);
}
.page-how .hw-hero__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:44px;
}
.page-how .btn--outline-light{
  background:transparent;
  color:var(--ivory);
  border-color:rgba(245,243,239,.34);
}
.page-how .btn--outline-light:hover{
  background:var(--ivory);
  border-color:var(--ivory);
  color:#000000;
}


/* keep every section headline on this page at one optical scale */
.page-how .hw-faq .sec-title,
.page-how .hw-inquiry .sec-title{
  max-width:none;
  font-size:clamp(27px,2.75vw,42px);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.18;
}

/* ------------------------- 2. THE WORKFLOW ------------------------ */
.page-how .hw-tl{padding:96px 0 104px;background:var(--ivory);}
.page-how .hw-tl__head{max-width:820px;margin:0 auto 76px;}
.page-how .hw-tl__head .sec-title{
  font-size:clamp(27px,2.8vw,40px);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.2;
}
.page-how .hw-tl__head .sec-sub{
  margin-top:18px;
  font-size:15px;
  color:#8b8074;
}

.hw-flow{position:relative;}
.hw-flow__steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
}
/* continuous path line, running edge to edge behind the nodes */
.hw-flow__steps::before{
  content:"";
  position:absolute;
  top:23px;left:0;right:0;height:1px;
  background:#D8D0C2;
  z-index:0;
}
.hw-flow__step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 10px;
}
.hw-flow__num{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:46px;height:46px;
  border-radius:50%;
  background:#3B3A32;
  color:#F7F4EF;
  font-family:var(--font-ui);
  font-size:16.5px;font-weight:600;
  line-height:1;
  letter-spacing:.02em;
}
.hw-flow__label{
  margin:28px 0 0;
  max-width:198px;
  font-family:var(--font-ui);
  font-size:18.5px;
  font-weight:600;
  line-height:1.38;
  letter-spacing:0;
  color:#2B2A26;
}
.hw-flow__media{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:24px;
}
.hw-flow__icon{display:block;color:#2B2A26;}
.hw-flow__icon svg{width:40px;height:40px;display:block;}
.hw-flow__icon--shoe svg{width:50px;height:25px;}
.hw-flow__time{
  margin-top:18px;
  font-family:var(--font-ui);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9E9385;
  white-space:nowrap;
}

/* route fork under step 02 */
.hw-flow__branch{
  position:relative;
  display:grid;
  gap:12px;
  width:fit-content;
  max-width:250px;
  margin-top:24px;
  padding-left:38px;
}
/* vertical bracket: starts just above row 1, ends at the centre of row 2 */
.hw-flow__branch::before{
  content:"";
  position:absolute;
  left:14px;
  top:-20px;
  bottom:31px;
  width:1px;
  background:#D8D0C2;
}
.hw-route-opt{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  height:62px;
  text-align:left;
  transition:opacity .25s var(--ease);
}
/* horizontal stub from the bracket into each row */
.hw-route-opt::before{
  content:"";
  position:absolute;
  left:-24px;
  top:50%;
  width:24px;height:1px;
  background:#D8D0C2;
}
.hw-route-opt:hover{opacity:.62;}
.hw-route-opt__thumb{
  flex:0 0 54px;
  width:54px;height:54px;
  display:grid;
  place-items:center;
  background:#EAE5DC;
  color:#3B3A32;
}
.hw-route-opt__thumb svg{width:40px;height:20px;display:block;}
.hw-route-opt__txt{display:flex;flex-direction:column;line-height:1.25;}
.hw-route-opt__txt b{
  font-family:var(--font-ui);
  font-size:15px;font-weight:600;
  color:#2B2A26;
  white-space:nowrap;
}
.hw-route-opt__txt i{
  font-style:normal;
  font-family:var(--font-ui);
  font-size:12.5px;font-weight:400;
  color:#9A9084;
  margin-top:4px;
  white-space:nowrap;
}

/* -------------------------- 3. NDA BAND -------------------------- */
.hw-nda{
  display:grid;
  grid-template-columns:1.04fr 1fr;
  background:#131311;
  color:var(--ivory);
  overflow:hidden;
}
.hw-nda__media{
  position:relative;
  min-height:clamp(380px,37vw,470px);
  background:#0B0B0A;
  overflow:hidden;
}
.hw-nda__media img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:52% 46%;
  filter:saturate(.4) sepia(.18) brightness(.4) contrast(1.12);
}
.hw-nda__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(19,19,17,.56) 0%,rgba(19,19,17,.14) 44%,rgba(19,19,17,.62) 100%),
    linear-gradient(180deg,rgba(19,19,17,.18) 0%,rgba(19,19,17,0) 35%,rgba(19,19,17,.35) 100%);
}
.hw-nda__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:56px 24px 56px 64px;
  padding-right:max(24px, calc((100vw - 1380px) / 2 + 24px));
}
.hw-nda__title{
  max-width:560px;
  font-family:var(--font-display);
  font-size:clamp(27px,2.75vw,42px);
  font-weight:500;
  line-height:1.22;
  letter-spacing:-.015em;
  color:#F7F4EF;
}
.hw-nda__text{
  max-width:520px;
  margin-top:22px;
  font-size:15.5px;
  line-height:1.78;
  color:rgba(245,243,239,.62);
}
.hw-nda__points{
  display:flex;
  flex-wrap:wrap;
  margin:26px 0 0;
  padding:0;
  list-style:none;
}
.hw-nda__points li{
  position:relative;
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(184,148,95,.85);
  padding:0 16px 0 0;
  margin:0 16px 8px 0;
}
.hw-nda__points li::after{
  content:"";
  position:absolute;
  right:0;top:50%;
  width:1px;height:9px;
  margin-top:-5px;
  background:rgba(245,243,239,.2);
}
.hw-nda__points li:last-child{padding-right:0;margin-right:0;}
.hw-nda__points li:last-child::after{display:none;}
.hw-nda .btn{
  margin-top:34px;
  padding:16px 30px;
  font-size:11.5px;
  letter-spacing:.14em;
}

/* --------------------------- RESPONSIVE -------------------------- */
@media (max-width:1200px){
  .hw-flow__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 0;}
  /* with two rows the single continuous line would cut through the second row */
  .hw-flow__steps::before{display:none;}
  .hw-flow__step::after{
    content:"";
    position:absolute;
    top:23px;left:0;right:0;height:1px;
    background:#D8D0C2;
    z-index:0;
  }
  .hw-flow__step:nth-child(1)::after{left:50%;}
  .hw-flow__step:nth-child(3)::after{right:50%;}
  .hw-flow__step:nth-child(4)::after{left:50%;}
  .hw-flow__step:nth-child(6)::after{right:50%;}
}

@media (max-width:900px){
  .hw-nda{grid-template-columns:1fr;}
  .hw-nda__media{min-height:300px;}
  .hw-nda__copy{padding:48px 24px 56px;padding-right:24px;}
  .hw-nda__title{max-width:none;}
  .hw-nda__text{max-width:none;}
}

@media (max-width:760px){
  .page-how .hw-tl{padding:72px 0 80px;}
  .page-how .hw-tl__head{margin-bottom:52px;}
  .hw-flow__steps{grid-template-columns:1fr;gap:0;}
  .hw-flow__step{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    grid-template-areas:"num label" "line media";
    column-gap:20px;
    align-items:start;
    text-align:left;
    padding:0;
  }
  .hw-flow__step::after{display:none;}
  .hw-flow__num{grid-area:num;margin-top:0;}
  .hw-flow__label{grid-area:label;margin:0;max-width:none;padding-top:8px;font-size:17px;}
  .hw-flow__label br{display:none;}
  .hw-flow__media{grid-area:media;flex-direction:row;align-items:center;gap:14px;margin:16px 0 34px;}
  .hw-flow__branch{grid-area:media;margin:18px 0 34px;padding-left:22px;max-width:260px;}
  .hw-flow__step:not(:last-child)::before{
    content:"";
    position:absolute;
    left:23px;
    top:52px;
    bottom:-34px;
    width:1px;
    background:#D8D0C2;
  }
  .hw-route-opt__txt b,.hw-route-opt__txt i{white-space:normal;}
}

@media (max-width:640px){
  .page-how .hw-hero__inner{padding:88px 0 76px;}
  .page-how .hw-hero__actions{flex-direction:column;align-items:stretch;gap:12px;}
  .page-how .hw-hero__actions .btn{width:100%;}
  .page-how .hw-hero__eyebrow{letter-spacing:.26em;margin-bottom:24px;}
  .hw-nda__copy{padding:40px 20px 48px;}
}