/* ============================================================
   WHY DARTEE — MORE THAN A BELT.
   Lifestyle-first editorial brand moment between the demo and
   shopping. Photography dominant (~62%), copy secondary (~38%).
   Cream / Lowcountry green / restrained pink only.
   ============================================================ */

.wtdsec{
  background: var(--ch-cream, #f3efe6);
  color: var(--ch-green, #0b211b);
  overflow: hidden;
}
.wtdsec__inner{
  display: grid;
  grid-template-columns: 1fr;
}

/* ---------- photography: immersive, part of the architecture ---------- */
.wtdsec__media{
  margin: 0;
  position: relative;
  background: var(--ch-green, #0b211b);
}
.wtdsec__media img{
  display: block;
  width: 100%;
  height: clamp(540px, 150vw, 640px);
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---------- copy ---------- */
.wtdsec__eyebrow{
  display: block;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ch-pink, #e85190);
  margin: 0 0 12px;
}
.wtdsec__title{
  font-family: Anton, Archivo, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(42px, 13vw, 62px);
  line-height: .92;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--ch-green, #0b211b);
  margin: 0;
}
.wtdsec__lead{
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.5;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ch-body, #59645e);
  margin: 16px 0 0;
}
.wtdsec__lead::before{
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--ch-pink, #e85190);
  margin: 0 0 14px;
}

/* ---------- three understated editorial callouts ---------- */
.wtdsec__benefits{
  margin: 26px 0 0;
  display: grid;
  gap: 20px;
}
.wtdsec__btitle{
  font-family: Anton, Archivo, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 4.6vw, 20px);
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ch-green, #0b211b);
  margin: 0 0 4px;
}
.wtdsec__btext{
  font-family: Archivo, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ch-muted, #737d76);
  margin: 0;
}

/* ---------- CTA + handwritten Dartee aside ---------- */
.wtdsec__cta{
  display: inline-block;
  margin: 28px 0 0;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ch-green, #0b211b);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1.5px solid var(--ch-pink, #e85190);
}
.wtdsec__cta:hover{ color: var(--ch-pink, #e85190); }
.wtdsec__cta{ align-self: flex-start; }
.wtdsec__note{
  font-family: Allura, "Cormorant Garamond", serif;
  font-size: 26px;
  line-height: 1;
  color: var(--ch-pink, #e85190);
  opacity: .9;
  margin: 16px 0 0;
}

/* ============================================================
   MOBILE — headline first, then the photograph, then callouts
   ============================================================ */
@media (max-width: 980px){
  .wtdsec__inner{ padding: 34px 0 40px; }
  .wtdsec__inner{ --wtd-gutter: max(6vw, calc((100vw - 560px) / 2)); }
  .wtdsec__head,
  .wtdsec__copy > .wtdsec__benefits,
  .wtdsec__copy > .wtdsec__note{
    padding-left: var(--wtd-gutter);
    padding-right: var(--wtd-gutter);
  }
  .wtdsec__copy > .wtdsec__cta{
    align-self: flex-start;
    margin-left: var(--wtd-gutter);
  }
  .wtdsec__copy{ display: contents; }
  .wtdsec__media{
    order: 2;
    margin: 22px 0 24px;
  }
  .wtdsec__head{ order: 1; }
  .wtdsec__benefits{ order: 3; margin-top: 0; }
  .wtdsec__cta{ order: 4; }
  .wtdsec__note{ order: 5; }
  .wtdsec__inner{ display: flex; flex-direction: column; }
  .wtdsec__head .wtdsec__lead{ display: none; }
  .wtdsec__benefits::before{
    content: "Built for the way golf is actually played.";
    font-family: Archivo, system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ch-body, #59645e);
    padding-top: 16px;
    border-top: 2px solid var(--ch-pink, #e85190);
    max-width: 24ch;
  }
}

/* ============================================================
   DESKTOP — full-bleed 62/38 campaign split, photo to the edge
   ============================================================ */
@media (min-width: 981px){
  .wtdsec__inner{
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
  }
.wtdsec__media{
    border-radius: 0 18px 18px 0;
    overflow: hidden;
    min-height: clamp(700px, 76vw, 1080px);
  }
  .wtdsec__media img{
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-position: 45% 42%;
  }
  .wtdsec__copy{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(48px, 5vw, 76px) clamp(34px, 5vw, 72px);
    max-width: 520px;
  }
  .wtdsec__title{ font-size: clamp(48px, 4.4vw, 66px); }
  .wtdsec__benefits{ margin-top: 34px; gap: 22px; }
}