/* ==========================================================================
   HOW IT WORKS — editorial product story
   Applies the established Dartee homepage system to this page only.
   Cream #F4F0E6 · Soft cream #EAE4D8 · Deep green #082A24 · Pink #EC4D8B
   ========================================================================== */

.hw{
  --cream: #F4F0E6;
  --cream-2: #EAE4D8;
  --green: #082A24;
  --green-soft: #0d3a31;
  --pink: #EC4D8B;
  background: var(--cream);
  color: var(--green);
  overflow-x: hidden;
}
.hw *{ box-sizing: border-box; }
.hw__wrap{ width: min(1240px, 92vw); margin: 0 auto; }

/* ---------- shared type ---------- */
.hw-eyebrow{
  display: block;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 16px;
}
.hw-h{
  font-family: Anton, Archivo, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: 1.0;
  letter-spacing: .012em;
  text-transform: uppercase;
  margin: 0;
  color: var(--green);
}
.hw-p{
  font-family: Archivo, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  color: rgba(8,42,36,.74);
  max-width: 42ch;
  margin: 20px 0 0;
}
.hw-cta{
  display: inline-block;
  margin-top: 30px;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1.5px solid var(--pink);
}
.hw-cta:hover{ color: var(--pink); }
.hw-btn{
  display: inline-block;
  margin-top: 30px;
  padding: 16px 30px;
  border-radius: 3px;
  background: var(--green);
  color: var(--cream);
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
.hw-btn:hover{ background: #0d3a31; }

/* ==================== 1. HERO ==================== */
.hwhero{ position: relative; background: var(--green); }
.hwhero__media{ position: relative; height: clamp(460px, 72vh, 760px); }
.hwhero__media img{
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 38%;
}
.hwhero__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,42,36,.82) 0%, rgba(8,42,36,.34) 42%, rgba(8,42,36,0) 72%);
}
.hwhero__copy{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 0 clamp(34px, 5vw, 66px);
}
.hwhero__copy .hw-eyebrow{ color: var(--pink); }
.hwhero h1{
  font-family: Anton, Archivo, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(42px, 6.6vw, 96px);
  line-height: .94;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  text-shadow: 0 2px 22px rgba(0,0,0,.34);
}
.hwhero__sub{
  font-family: Archivo, system-ui, sans-serif;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: rgba(244,240,230,.9);
  max-width: 40ch;
  margin: 18px 0 0;
}

/* feature rail */
.hwrail{ background: var(--green); border-top: 1px solid rgba(244,240,230,.16); }
.hwrail__row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.hwrail__item{
  padding: 26px 10px;
  text-align: center;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244,240,230,.9);
}
.hwrail__item + .hwrail__item{ border-left: 1px solid rgba(244,240,230,.16); }
.hwrail__item b{ color: var(--pink); font-weight: 700; }

/* ==================== 2 & 3. SPLIT PRODUCT MOMENTS ==================== */
.hwsplit{ padding: clamp(64px, 8vw, 118px) 0; }
.hwsplit--soft{ background: var(--cream-2); }
.hwsplit__grid{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
.hwsplit--rev .hwsplit__grid{ grid-template-columns: 1fr 1.35fr; }
.hwsplit--rev .hwsplit__media{ order: 2; }
.hwsplit__media{ position: relative; }
.hwsplit__media img{
  display: block; width: 100%;
  height: clamp(320px, 46vw, 620px);
  object-fit: cover;
  border-radius: 4px;
}
.hwsplit__media::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 42%;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(to top, rgba(8,42,36,.72) 0%, rgba(8,42,36,.18) 55%, rgba(8,42,36,0) 100%);
  pointer-events: none;
}
.hwsplit__callout{
  z-index: 2;
  position: absolute;
  left: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 30px);
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(8,42,36,.85);
}
.hwsplit__callout::before{
  content: "";
  display: block; width: 34px; height: 1.5px;
  background: var(--pink);
  margin-bottom: 10px;
}

/* ratchet click scale */
.hwclick{
  margin: 30px 0 0;
  display: flex; align-items: center; gap: 12px;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(8,42,36,.6);
}
.hwclick__ticks{
  flex: 1;
  height: 14px;
  background-image: repeating-linear-gradient(90deg,
    rgba(8,42,36,.5) 0 1px, rgba(8,42,36,0) 1px 9px);
}
.hwclick__mid{ color: var(--pink); letter-spacing: .14em; }

/* ==================== 4. GOLF UTILITY ==================== */
.hwutil{ background: var(--green); color: var(--cream); padding: clamp(60px, 7vw, 104px) 0 0; }
.hwutil .hw-h{ color: var(--cream); }
.hwutil .hw-p{ color: rgba(244,240,230,.78); }
.hwutil__head{ max-width: 720px; }
.hwutil__media{
  position: relative;
  margin-top: clamp(34px, 5vw, 62px);
}
.hwutil__media img{
  display: block; width: 100%;
  height: clamp(380px, 62vw, 760px);
  object-fit: cover;
}
.hwutil__tags{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(244,240,230,.18);
}
.hwutil__tag{
  padding: 24px 4px 30px;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700; font-size: 11.5px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream);
}
.hwutil__tag span{
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  color: rgba(244,240,230,.62);
}
.hwutil__tag + .hwutil__tag{ border-left: 1px solid rgba(244,240,230,.18); padding-left: 22px; }
.hwutil__tag::before{
  content:""; display:block; width: 26px; height: 1.5px;
  background: var(--pink); margin-bottom: 12px;
}

/* ==================== 5. CUSTOMIZATION ==================== */
.hwsig{ padding: clamp(64px, 8vw, 118px) 0; }
.hwsig__grid{
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.hwsig__media img{
  display: block; width: 100%;
  height: clamp(300px, 44vw, 580px);
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* ==================== 6. SETUP SEQUENCE ==================== */
.hwsetup{ background: var(--cream-2); padding: clamp(60px, 7.5vw, 108px) 0; }
.hwsetup__head{ max-width: 620px; }
.hwsetup__seq{
  margin-top: clamp(36px, 5vw, 62px);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(18px, 2.6vw, 38px);
  align-items: start;
}
.hwstep__num{
  font-family: Anton, Archivo, system-ui, sans-serif;
  font-size: 15px; letter-spacing: .14em;
  color: var(--pink);
  display: block; margin-bottom: 14px;
}
.hwstep__shot{ overflow: hidden; border-radius: 3px; margin-bottom: 16px; background: var(--cream); }
.hwstep__shot img{ display: block; width: 100%; height: clamp(150px, 15vw, 210px); object-fit: cover; }
.hwstep h3{
  font-family: Anton, Archivo, system-ui, sans-serif;
  font-weight: 400; font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: .05em; text-transform: uppercase;
  margin: 0 0 8px;
}
.hwstep p{
  font-family: Archivo, system-ui, sans-serif;
  font-size: 14px; line-height: 1.58;
  color: rgba(8,42,36,.7);
  margin: 0; max-width: 26ch;
}
.hwseq__arrow{
  align-self: center;
  color: rgba(8,42,36,.34);
  font-size: 18px;
  padding-top: 40px;
}
.hwsetup__rail{
  margin-top: clamp(34px, 4vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 22px;
  border-top: 1px solid rgba(8,42,36,.16);
  padding-top: 20px;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(8,42,36,.66);
}
.hwsetup__rail span.dot{ color: var(--pink); }
.hwdetails{ margin-top: 30px; max-width: 780px; }
.hwdetails > summary{
  cursor: pointer; list-style: none;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--green);
  border-bottom: 1.5px solid var(--pink);
  display: inline-block;
  padding-bottom: 7px;
}
.hwdetails > summary::-webkit-details-marker{ display:none; }
.hwdetails[open] > summary{ color: var(--pink); }
.hwdetails__body{ margin-top: 22px; }
.hwdetails__body h4{
  font-family: Archivo, system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin: 20px 0 8px;
}
.hwdetails__body p, .hwdetails__body li{
  font-family: Archivo, system-ui, sans-serif;
  font-size: 14.5px; line-height: 1.62; color: rgba(8,42,36,.76);
}
.hwdetails__body ul{ margin: 0; padding-left: 18px; }

/* ==================== 7. PAYOFF ==================== */
.hwpayoff{ position: relative; background: var(--green); }
.hwpayoff img{
  display: block; width: 100%;
  height: clamp(420px, 68vh, 720px);
  object-fit: cover; object-position: 50% 42%;
}
.hwpayoff__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,42,36,.8) 0%, rgba(8,42,36,.28) 46%, rgba(8,42,36,0) 74%);
}
.hwpayoff__copy{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-bottom: clamp(32px, 4.5vw, 62px);
}
.hwpayoff__copy h2{
  font-family: Anton, Archivo, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 76px);
  line-height: .96; letter-spacing: .012em; text-transform: uppercase;
  color: var(--cream); margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.hwpayoff__rail{
  margin-top: 18px;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244,240,230,.86);
}
.hwpayoff__rail i{ color: var(--pink); font-style: normal; }

/* ==================== 8. WARRANTY / CLOSER ==================== */
.hwpromise{
  position: relative;
  background: var(--green);
  color: var(--cream);
  padding: clamp(62px, 7.5vw, 110px) 0 clamp(62px, 7.5vw, 110px);
  border-top: 1px solid rgba(244,240,230,.14);
  overflow: hidden;
}
.hwpromise__grid{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px;
  align-items: end;
}
.hwpromise .hw-h{ color: var(--cream); }
.hwpromise .hw-p{ color: rgba(244,240,230,.8); }
.hwpromise__badge{
  display: block; margin-top: 22px;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--pink);
}
.hwpromise__btn{
  display: inline-block; margin-top: 30px;
  padding: 16px 30px; border-radius: 3px;
  background: var(--cream); color: var(--green);
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700; font-size: 12.5px;
  letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
}
.hwpromise__btn:hover{ background: #fff; }
.hwpromise__mascot{
  justify-self: end;
  width: clamp(120px, 15vw, 200px);
  opacity: .92;
}
.hwpromise__mascot img{ display: block; width: 100%; height: auto; }

/* ==================== FAQ ==================== */
.hwfaq{ background: var(--cream); padding: clamp(56px, 7vw, 100px) 0; }
.hwfaq__head{ max-width: 620px; margin-bottom: clamp(28px, 4vw, 46px); }
.hwfaq__list{ border-top: 1px solid rgba(8,42,36,.16); max-width: 900px; }
.hwfaq__item{ border-bottom: 1px solid rgba(8,42,36,.16); }
.hwfaq__item > summary{
  cursor: pointer; list-style: none;
  padding: 20px 34px 20px 0;
  position: relative;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700; font-size: 14.5px;
  letter-spacing: .01em; color: var(--green);
}
.hwfaq__item > summary::-webkit-details-marker{ display: none; }
.hwfaq__item > summary::after{
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 19px; color: var(--pink); font-weight: 500;
}
.hwfaq__item[open] > summary::after{ content: "–"; }
.hwfaq__item p{
  margin: 0 0 22px;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 14.5px; line-height: 1.66;
  color: rgba(8,42,36,.74);
  max-width: 72ch;
}

/* ==========================================================================
   MOBILE — recomposed, not shrunk
   ========================================================================== */
@media (max-width: 900px){
  .hw__wrap{ width: min(560px, 90vw); }

  .hwhero__media{ height: 78vh; max-height: 620px; }
  .hwhero__media img{ object-position: 52% 32%; }
  .hwhero h1{ font-size: clamp(38px, 11vw, 56px); }
  .hwhero__sub{ font-size: 15px; max-width: 30ch; }
  .hwhero__scrim{
    background: linear-gradient(to top, rgba(8,42,36,.88) 0%, rgba(8,42,36,.4) 46%, rgba(8,42,36,0) 78%);
  }

  .hwrail__row{ grid-template-columns: 1fr 1fr; }
  .hwrail__item{ padding: 18px 8px; font-size: 10.5px; letter-spacing: .16em; }
  .hwrail__item + .hwrail__item{ border-left: none; }
  .hwrail__item:nth-child(even){ border-left: 1px solid rgba(244,240,230,.16); }
  .hwrail__item:nth-child(n+3){ border-top: 1px solid rgba(244,240,230,.16); }

  .hwsplit{ padding: 54px 0; }
  .hwsplit__grid,
  .hwsplit--rev .hwsplit__grid,
  .hwsig__grid{ grid-template-columns: 1fr; gap: 24px; }
  .hwsplit--rev .hwsplit__media{ order: 0; }
  .hwsplit__media img{ height: 60vw; min-height: 280px; }
  .hw-h{ font-size: clamp(30px, 9vw, 42px); }
  .hw-p{ font-size: 15px; max-width: 34ch; }

  .hwutil{ padding-top: 54px; }
  .hwutil__media img{ height: 92vw; max-height: 560px; }
  .hwutil__tags{ grid-template-columns: 1fr; }
  .hwutil__tag{ padding: 18px 0 18px; }
  .hwutil__tag + .hwutil__tag{ border-left: none; border-top: 1px solid rgba(244,240,230,.16); padding-left: 0; }

  .hwsig{ padding: 54px 0; }
  .hwsig__media img{ height: 66vw; min-height: 260px; }

  .hwsetup{ padding: 54px 0; }
  .hwsetup__seq{ grid-template-columns: 1fr; gap: 26px; }
  .hwseq__arrow{
    padding: 0; text-align: center; transform: rotate(90deg);
    justify-self: center;
  }
  .hwstep__shot img{ height: 46vw; min-height: 170px; }
  .hwstep p{ max-width: 34ch; }
  .hwsetup__rail{ font-size: 10.5px; gap: 8px 14px; }

  .hwpayoff img{ height: 74vh; max-height: 560px; }
  .hwpayoff__copy h2{ font-size: clamp(30px, 10vw, 44px); }
  .hwpayoff__rail{ font-size: 10.5px; letter-spacing: .16em; }

  .hwpromise{ padding: 54px 0 40px; }
  .hwpromise__grid{ grid-template-columns: 1fr; gap: 8px; }
  .hwpromise__mascot{ justify-self: end; width: 118px; margin-top: 6px; }
  .hwpromise__btn{ width: 100%; text-align: center; padding: 18px 24px; }

  .hwfaq{ padding: 48px 0; }
  .hwfaq__item > summary{ font-size: 14px; padding: 18px 30px 18px 0; }
}