/* ============================================================
   DARTEE HOMEPAGE — CRO + BRAND REFINEMENT LAYER
   Loaded last on index.html. Reuses the editorial language set
   by .magsec / .glovesec / .fitsec (cream #f3efe6, green #0b211b,
   Dartee pink accent). Those three sections are untouched here.
   ============================================================ */

:root {
  --cro-cream: #f3efe6;
  --cro-green: #0b211b;
  --cro-pink: #e9a2bd;
}

/* ---------------- HERO ---------------- */
.hero h1 {
  font-size: clamp(30px, 4.4vw, 62px) !important;
  line-height: .96 !important;
  max-width: 14ch !important;
  margin: 0 0 42px !important;
  font-weight: 500 !important;
}
.hero__copy { max-width: 620px !important; }
.hero__lead {
  font-size: clamp(13px, 1.15vw, 16px) !important;
  max-width: 26em !important;
  margin-bottom: 22px !important;
}
.hero__cta { gap: 18px !important; align-items: center; flex-wrap: wrap; }
.hero__cta .hero__cta--primary {
  background: var(--cro-cream) !important;
  color: #14100c !important;
  border: 1px solid var(--cro-cream) !important;
  border-radius: 2px;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 15px 28px;
}
.hero__cta .hero__cta--primary:hover { background: var(--cro-pink) !important; border-color: var(--cro-pink) !important; }
.hero__cta .hero__cta--ghost {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--cro-cream) !important;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid rgba(243,239,230,.5) !important;
  border-radius: 0;
  padding-bottom: 3px !important;
}
.hero__cta .hero__cta--ghost:hover { color: var(--cro-pink) !important; border-bottom-color: var(--cro-pink) !important; }
.hero__proof {
  margin: 20px 0 0;
  color: rgba(243,239,230,.92);
  font-family: var(--ff-sans);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 6px 18px rgba(0,0,0,.45);
}
@media (max-width: 720px) {
  .hero h1 { font-size: clamp(30px, 10vw, 44px) !important; max-width: 12ch !important; }
  .hero__lead { display: block !important; font-size: 13px !important; }
  .hero__copy { padding-left: 0 !important; }
  .hero__cta { gap: 14px !important; }
  .hero__proof { font-size: 10.5px; letter-spacing: .14em; }
}

/* ---------------- OLD WAY vs DARTEE (3-second read) ---------------- */
.vs { background: var(--cro-green); padding: clamp(44px, 6vw, 68px) 20px; }
.vs__inner {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px);
}
.vs__col--new { position: relative; }
.vs__col--new::before {
  content: ""; position: absolute; left: calc(-1 * clamp(12px, 2.5vw, 32px)); top: 4px; bottom: 4px;
  width: 1px; background: rgba(243,239,230,.16);
}
.vs__label {
  display: block; font-family: var(--ff-sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase; margin-bottom: 18px;
  color: rgba(243,239,230,.5);
}
.vs__col--new .vs__label { color: var(--cro-pink); }
.vs ul { list-style: none; margin: 0; padding: 0; }
.vs li {
  font-family: var(--ff-display);
  font-size: clamp(19px, 2.5vw, 31px);
  line-height: 1.28;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: rgba(243,239,230,.42);
}
.vs__col--new li { color: var(--cro-cream); }
@media (max-width: 560px) {
  .vs__inner { gap: 28px; }
  .vs__col--new::before { display: none; }
}

/* ---------------- SHOP BY COLLECTION (editorial) ---------------- */
.collsec { background: var(--cro-cream); padding: clamp(56px, 7vw, 96px) 0; }
.collsec__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 34px);
}
.collsec__title {
  font-family: var(--ff-display); text-transform: uppercase;
  font-size: clamp(26px, 3.6vw, 46px); line-height: 1; margin: 0; color: var(--cro-green);
  letter-spacing: .01em; font-weight: 500;
}
.collsec__link {
  font-family: var(--ff-sans); font-size: 11.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cro-green); text-decoration: none;
  border-bottom: 2px solid var(--cro-pink); padding-bottom: 3px;
}
.collsec__link:hover { color: #123c31; }

.edcoll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(180px, 21vw, 290px);
  gap: 14px;
}
.edcoll__tile {
  position: relative; overflow: hidden; display: block; text-decoration: none;
  background: #0b211b;
}
.edcoll__tile--tall { grid-row: span 2; }
.edcoll__tile--wide { grid-column: span 2; }
.edcoll__tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.edcoll__tile:hover img { transform: scale(1.045); }
.edcoll__tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(8,20,16,.72) 0%, rgba(8,20,16,.18) 42%, rgba(8,20,16,0) 70%);
}
.edcoll__cap { position: absolute; left: clamp(16px, 2vw, 26px); bottom: clamp(14px, 2vw, 22px); z-index: 2; }
.edcoll__name {
  display: block; font-family: var(--ff-display); text-transform: uppercase;
  font-size: clamp(16px, 1.7vw, 24px); line-height: 1.05; color: var(--cro-cream); letter-spacing: .02em;
}
.edcoll__note {
  display: block; margin-top: 6px; font-family: var(--ff-sans); font-size: 10.5px;
  font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--cro-pink);
}
@media (max-width: 860px) {
  .edcoll { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; }
  .edcoll__tile--tall { grid-row: span 1; }
  .edcoll__tile--wide { grid-column: span 2; grid-auto-rows: 38vw; }
}

/* ---------------- LIFETIME WARRANTY ---------------- */
.warsec {
  background: var(--cro-green);
  padding: clamp(56px, 7vw, 92px) 20px;
  text-align: center;
}
.warsec__inner { max-width: 640px; margin: 0 auto; }
.warsec__eyebrow {
  display: block; font-family: var(--ff-sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase; color: var(--cro-pink); margin-bottom: 16px;
}
.warsec__title {
  font-family: var(--ff-display); text-transform: uppercase; margin: 0 0 16px;
  font-size: clamp(28px, 4.2vw, 54px); line-height: .98; color: var(--cro-cream); font-weight: 500;
}
.warsec__accent { color: var(--cro-pink); }
.warsec__sub {
  color: rgba(243,239,230,.8); font-family: var(--ff-sans);
  font-size: clamp(14px, 1.15vw, 16px); margin: 0 0 26px;
}
.warsec__cta, .storysec__cta, .closer__cta {
  display: inline-block; font-family: var(--ff-sans); font-size: 12px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  padding-bottom: 4px; border-bottom: 2px solid var(--cro-pink);
}
.warsec__cta, .closer__cta { color: var(--cro-cream); }
.warsec__cta:hover, .closer__cta:hover { color: var(--cro-pink); }

/* ---------------- BRAND STORY ---------------- */
.storysec {
  background: var(--cro-cream);
  display: grid; grid-template-columns: 50% 50%; align-items: stretch;
}
.storysec__media { margin: 0; overflow: hidden; min-height: clamp(320px, 42vw, 560px); }
.storysec__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.storysec__copy {
  padding: clamp(40px, 5vw, 76px) clamp(24px, 4vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
}
.storysec__eyebrow {
  font-family: var(--ff-sans); font-size: 10.5px; font-weight: 800; letter-spacing: .24em;
  text-transform: uppercase; color: #b4728f; margin-bottom: 16px;
}
.storysec__title {
  font-family: var(--ff-display); text-transform: uppercase; margin: 0 0 18px;
  font-size: clamp(26px, 3.3vw, 44px); line-height: 1; color: var(--cro-green); font-weight: 500;
}
.storysec__accent { color: #b4728f; }
.storysec__sub {
  font-family: var(--ff-folio, Georgia, serif); font-style: italic;
  font-size: clamp(17px, 1.5vw, 22px); color: #3c4a44; margin: 0 0 26px; max-width: 24em;
}
.storysec__cta { color: var(--cro-green); align-self: flex-start; }
.storysec__cta:hover { color: #b4728f; }
@media (max-width: 860px) {
  .storysec { grid-template-columns: 1fr; }
  .storysec__media { min-height: 62vw; }
}

/* ---------------- COMPLETE YOUR KIT ---------------- */
.kitsec { background: #fbf9f5; padding: clamp(56px, 7vw, 96px) 0; }
.kitsec__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 30px);
}
.kitsec__title {
  font-family: var(--ff-display); text-transform: uppercase; margin: 0;
  font-size: clamp(24px, 3.2vw, 42px); line-height: 1; color: var(--cro-green); font-weight: 500;
}
.kitsec__link {
  font-family: var(--ff-sans); font-size: 11.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cro-green); text-decoration: none;
  border-bottom: 2px solid var(--cro-pink); padding-bottom: 3px;
}

/* ---------------- FINAL CTA ---------------- */
.closer {
  position: relative;
  background: #0b1a16 url("assets/photos/course.webp") center 55% / cover no-repeat;
  padding: clamp(80px, 12vw, 160px) 20px;
  text-align: center;
}
.closer::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,20,16,.82) 0%, rgba(8,20,16,.5) 55%, rgba(8,20,16,.35) 100%);
}
.closer__inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.closer__title {
  font-family: var(--ff-display); text-transform: uppercase; margin: 0 0 18px;
  font-size: clamp(30px, 5.2vw, 68px); line-height: .95; color: var(--cro-cream); font-weight: 500;
}
.closer__accent { color: var(--cro-pink); }
.closer__sub {
  font-family: var(--ff-sans); color: rgba(243,239,230,.85);
  font-size: clamp(14px, 1.2vw, 17px); margin: 0 0 30px;
}
.closer__proof {
  margin: 26px 0 0; font-family: var(--ff-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(243,239,230,.7);
}

/* ---------------- readability polish ---------------- */
.hero::after {
  background:
    linear-gradient(90deg, rgba(8,14,11,.62) 0%, rgba(8,14,11,.3) 40%, rgba(8,14,11,0) 66%),
    linear-gradient(0deg, rgba(8,14,11,.68) 0%, rgba(8,14,11,.18) 42%, rgba(8,14,11,0) 66%) !important;
}
.closer::before {
  background: linear-gradient(0deg, rgba(8,20,16,.88) 0%, rgba(8,20,16,.66) 58%, rgba(8,20,16,.42) 100%);
}
@media (max-width: 720px) {
  .hero__copy { padding-left: 20px !important; padding-right: 20px !important; }
  .hero__lead { max-width: 24em !important; }
}

@media (max-width: 860px) {
  .edcoll__tile--tall { grid-column: span 2; }
}

@media (max-width: 860px) {
  /* keep the wide tile caption clear of the floating caddie chat button */
  .edcoll__tile--wide .edcoll__cap { left: auto; right: 18px; text-align: right; }
}

/* ---------------- MARK IT YOUR WAY (ball marker merch moment) ---------------- */
.marksec {
  background: var(--cro-cream);
  padding: clamp(56px, 7vw, 96px) 0;
}
.marksec__inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.marksec__media {
  position: relative;
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px -28px rgba(11,33,27,.28);
}
.marksec__media img {
  width: 100%;
  height: clamp(320px, 40vw, 520px);
  object-fit: cover;
  display: block;
}
.marksec__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: #fff;
  color: var(--cro-green);
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
}
.marksec__copy { padding: 8px 0; }
.marksec__eyebrow {
  display: block;
  font-family: var(--ff-sans);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cro-pink);
  margin-bottom: 14px;
}
.marksec__title {
  font-family: var(--ff-display);
  text-transform: uppercase;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: .98;
  letter-spacing: .01em;
  margin: 0 0 18px;
  color: var(--cro-green);
  font-weight: 500;
}
.marksec__accent { color: var(--cro-pink); }
.marksec__sub {
  font-family: var(--ff-sans);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.45;
  color: #2c3b35;
  max-width: 30ch;
  margin: 0 0 30px;
}
.marksec__cta {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cro-green);
  text-decoration: none;
  border-bottom: 2px solid var(--cro-pink);
  padding-bottom: 3px;
  margin-bottom: 26px;
}
.marksec__cta:hover { color: var(--cro-pink); }
.marksec__specs {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6d7b73;
  margin: 0;
}
@media (max-width: 860px) {
  .marksec__inner { grid-template-columns: 1fr; gap: 24px; }
  .marksec__media img { height: 300px; }
}

/* ---------------- DART (mascot) integrations ---------------- */
/* Collection tile: Dart's Pick insignia */
.edcoll__pick{
  position:absolute; top:14px; left:14px; z-index:3;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.94); color:var(--cro-green);
  font-family:var(--ff-sans); font-size:9.5px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase;
  padding:5px 10px 5px 6px; border-radius:999px;
}
.edcoll__pick img{ width:18px; height:18px; object-fit:contain; }

/* Mark it your way: Dart presenting the assortment */
.marksec__media{ overflow:visible; }
.marksec__media img.marksec__dart{
  position:absolute; right:-14px; bottom:-10px;
  width:clamp(96px,11vw,150px); height:clamp(96px,11vw,150px);
  object-fit:contain;
  filter:drop-shadow(0 14px 24px rgba(11,33,27,.28));
  pointer-events:none; z-index:2;
}
.marksec__badge{ z-index:3; }

/* Warranty: vintage quality stamp */
.warsec__inner{ position:relative; }
.dart-stamp{
  display:flex; width:fit-content; margin:28px auto 0;
  align-items:center; gap:8px; padding:6px 14px 6px 8px;
  color:var(--cro-cream,#f3efe6);
  border:1px solid rgba(240,214,224,.4); border-radius:999px;
  font-family:var(--ff-sans); font-size:9.5px; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; opacity:.8;
}
.dart-stamp img{ width:22px; height:22px; object-fit:contain; }
.dart-stamp b{ font-weight:800; font-size:9.5px; letter-spacing:.2em; color:inherit; }

/* Warranty: the single full-body Dart moment on the homepage */
.warsec{ position:relative; overflow:hidden; }
.warsec__dart{
  position:absolute; right:clamp(8px,4vw,80px); bottom:0;
  width:clamp(120px,15vw,240px); height:auto; object-fit:contain;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.34));
  pointer-events:none; z-index:1; opacity:.96;
}
.warsec__inner{ z-index:2; }
.warsec__stamp{
  display:block; width:fit-content; margin:22px auto 0;
  font-family:var(--ff-sans); font-size:9.5px; font-weight:800;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--cro-cream,#f3efe6); opacity:.6;
}
.storysec__meet{
  display:inline-block; width:fit-content; margin:16px 0 0;
  font-family:var(--ff-sans); font-size:11px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--cro-pink);
  border-bottom:1px solid rgba(240,214,224,.45); padding-bottom:3px;
}

.closer{ position:relative; overflow:hidden; }
.closer__inner{ position:relative; z-index:2; }

/* FAQ heading insignia */
.faq__dart{
  display:block; width:52px; height:52px; object-fit:contain;
  margin:0 auto 10px;
}

@media (max-width:860px){
  /* Product first, Dart second on mobile */
  .marksec__media img.marksec__dart{ width:84px; height:84px; right:-6px; bottom:-6px; }
  .warsec__dart{ width:104px; right:-2px; opacity:.9; }
  .faq__dart{ width:38px; height:38px; }
  .edcoll__pick{ font-size:8.5px; padding:4px 8px 4px 5px; }
}

/* ---------------- EDITORIAL LIFESTYLE MOMENT (Photo 1) ---------------- */
.lifesec{
  position:relative; overflow:hidden;
  min-height:clamp(600px,96vh,1080px);
  background:#0b211b;
}
.lifesec__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:62% 100%;
}

.lifesec__copy{
  position:relative; z-index:2;
  max-width:min(560px,44vw);
  padding:clamp(48px,7vw,110px) clamp(20px,6vw,96px);
}
.lifesec__eyebrow{
  display:block; font-family:var(--ff-sans); font-size:10px; font-weight:800;
  letter-spacing:.26em; text-transform:uppercase; color:var(--cro-pink);
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.lifesec__title{
  margin:14px 0 0; font-family:var(--ff-display);
  font-size:clamp(38px,5.4vw,86px); line-height:.94; text-transform:uppercase;
  color:var(--cro-cream,#f3efe6); text-shadow:0 4px 26px rgba(0,0,0,.5);
}
.lifesec__sub{
  margin:16px 0 0; max-width:22ch; font-size:15px; line-height:1.5;
  color:rgba(243,239,230,.86); text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.lifesec__cta{
  display:inline-block; margin-top:26px; font-family:var(--ff-sans);
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cro-cream,#f3efe6); text-decoration:none;
  border-bottom:1px solid var(--cro-pink); padding-bottom:4px;
}
/* Editorial belt-detail frame — same campaign, offset like a magazine spread */
.lifesec__detail{
  position:absolute; z-index:3; margin:0;
  right:clamp(20px,4vw,72px); bottom:clamp(28px,5vw,72px);
  width:clamp(220px,27vw,380px);
  border:6px solid var(--cro-cream,#f3efe5);
  background:var(--cro-cream,#f3efe5);
}
.lifesec__detail img{
  display:block; width:100%; height:clamp(240px,30vw,420px);
  object-fit:cover; object-position:46% 26%;
}
@media (max-width:860px){
  .lifesec{ min-height:0; display:grid; grid-template-columns:1fr; }
  .lifesec__img{ position:relative; order:3; height:clamp(420px,66vh,580px); object-position:58% 100%; }
  .lifesec__copy{ display:contents; }
  .lifesec__eyebrow{ order:1; margin:26px 20px 0; text-shadow:none !important; }
  .lifesec__title{ order:2; margin:10px 20px 18px; text-shadow:none; }
  .lifesec__detail{
    position:relative; order:4; right:auto; bottom:auto;
    width:auto; margin:14px 20px 0; border-width:5px;
  }
  .lifesec__detail img{ height:clamp(200px,34vh,260px); }
  .lifesec__sub{ order:5; margin:20px 20px 0; text-shadow:none; }
  .lifesec__cta{ order:6; width:fit-content; margin:16px 20px 30px; }
}


/* ============================================================
   HOMEPAGE COHESION LAYER — typography, color, spacing, CTAs
   One art-directed campaign: single palette, one type hierarchy,
   one CTA system. Loaded last so it governs every section.
   ============================================================ */
:root{
  --cro-pink: #e94b8b;          /* single Dartee pink */
  --cro-cream: #f3efe5;
  --cro-green: #0b211b;
  --cro-body: #59645e;          /* body copy on cream */
  --cro-muted: #737d76;         /* specs / metadata */
  --cro-body-dark: rgba(243,239,229,.84); /* body copy on green */
}

/* ---- EYEBROWS: one recurring element ---- */
.lifesec__eyebrow,.magsec__eyebrow,.glovesec__eyebrow,.fitsec__eyebrow,
.marksec__eyebrow,.wornsec__eyebrow,.warsec__eyebrow,.storysec__eyebrow,
.collsec .eyebrow,.videoband .eyebrow,.faq .eyebrow,.hero__kicker{
  font-family: var(--ff-sans) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: var(--cro-pink) !important;
  margin-bottom: 14px !important;
  text-shadow: none;
}
.lifesec__eyebrow{ text-shadow:0 2px 12px rgba(0,0,0,.55) !important; }

/* ---- HEADLINE HIERARCHY (display family, shared metrics) ---- */
.hero h1,.lifesec__title,.magsec__title,.glovesec__title,.fitsec__title,
.marksec__title,.wornsec__title,.warsec__title,.storysec__title,
.closer__title,.collsec__title,.kitsec__title,.faq__title{
  font-family: var(--ff-display) !important;
  text-transform: uppercase !important;
  letter-spacing: .01em !important;
  line-height: .96 !important;
  font-weight: 500 !important;
  text-wrap: balance;
}
/* tier 1 — hero + the closing statement */
.closer__title{ font-size:clamp(34px,5vw,66px) !important; }
/* tier 2 — major editorial lifestyle moments */
.lifesec__title{ font-size:clamp(38px,5.2vw,80px) !important; }
.wornsec__title{ font-size:clamp(32px,4vw,60px) !important; }
/* tier 3 — product feature stories */
.magsec__title,.glovesec__title,.fitsec__title,.warsec__title,.storysec__title{
  font-size:clamp(29px,3.8vw,52px) !important;
}
/* tier 4 — merchandising headers */
.marksec__title{ font-size:clamp(28px,3.5vw,48px) !important; }
.collsec__title,.kitsec__title{ font-size:clamp(24px,3vw,42px) !important; }

/* ---- PINK AS PUNCTUATION ---- */
.magsec__accent,.glovesec__accent,.fitsec__accent,.marksec__accent,
.wornsec__accent,.warsec__accent,.storysec__accent,.closer__accent{
  color: var(--cro-pink) !important;
}
.storysec__eyebrow{ color: var(--cro-pink) !important; }

/* ---- BODY COPY SYSTEM ---- */
.magsec__sub,.glovesec__sub,.fitsec__sub,.marksec__sub,.storysec__sub{
  font-family: var(--ff-sans) !important;
  font-size: clamp(15px,1.2vw,17px) !important;
  line-height: 1.55 !important;
  max-width: 34ch !important;
  color: var(--cro-body) !important;
  font-style: normal !important;
}
.lifesec__sub,.warsec__sub,.closer__sub{
  font-family: var(--ff-sans) !important;
  font-size: clamp(15px,1.2vw,17px) !important;
  line-height: 1.55 !important;
  max-width: 34ch !important;
  color: var(--cro-body-dark) !important;
}
.warsec__sub,.closer__sub{ margin-left:auto !important; margin-right:auto !important; }

/* ---- SPEC / METADATA LINES ---- */
.magsec__specs,.glovesec__specs,.fitsec__specs,.marksec__specs,
.edcoll__note,.closer__proof,.hero__proof{
  font-family: var(--ff-sans) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
.magsec__specs,.glovesec__specs,.fitsec__specs,.marksec__specs{ color: var(--cro-muted) !important; }
.edcoll__note{ color: var(--cro-pink) !important; }

/* ---- CTA SYSTEM: one editorial underline + arrow ---- */
.magsec__cta,.glovesec__cta,.fitsec__cta,.marksec__cta,.wornsec__cta,
.lifesec__cta,.warsec__cta,.storysec__cta,.closer__cta,
.collsec__link,.kitsec__link,.storysec__meet{
  display: inline-block;
  font-family: var(--ff-sans) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding-bottom: 4px !important;
  border-bottom: 2px solid var(--cro-pink) !important;
  border-radius: 0 !important;
  background: none !important;
  transition: color .18s ease, border-color .18s ease;
}
.magsec__cta,.glovesec__cta,.fitsec__cta,.marksec__cta,.wornsec__cta,
.collsec__link,.kitsec__link,.storysec__cta{ color: var(--cro-green) !important; }
.lifesec__cta,.warsec__cta,.closer__cta{ color: var(--cro-cream) !important; }
.magsec__cta:hover,.glovesec__cta:hover,.fitsec__cta:hover,.marksec__cta:hover,
.wornsec__cta:hover,.lifesec__cta:hover,.warsec__cta:hover,.storysec__cta:hover,
.closer__cta:hover,.collsec__link:hover,.kitsec__link:hover{ color: var(--cro-pink) !important; }
.storysec__meet{ color: var(--cro-pink) !important; border-bottom-color: rgba(233,75,139,.45) !important; }

/* ---- ENVIRONMENTS: cream, not stark white ---- */
.kitsec{ background: var(--cro-cream) !important; }
.collsec,.marksec,.storysec,.wornsec{ background: var(--cro-cream) !important; }
.marksec__media{ background: var(--cro-cream) !important; }
.marksec__badge{ background: var(--cro-cream) !important; color: var(--cro-green) !important; letter-spacing:.18em; }

/* ---- SPACING RHYTHM: editorial > merchandising > trust ---- */
.marksec,.collsec{ padding: clamp(58px,7vw,96px) 0 !important; }   /* merchandising */
.kitsec{ padding: clamp(50px,6vw,84px) 0 !important; }
.warsec{ padding: clamp(48px,5.5vw,78px) 20px !important; }        /* trust: compact */

/* ---- DART: one signature, tiny marks only ---- */
.closer__mark{ width:20px; height:20px; object-fit:contain; vertical-align:-5px; margin-right:8px; opacity:.85; }
.closer__signoff{ opacity:.8; }
.dboys-quote__mascot{ display:none !important; }

/* ---- MOBILE TYPE SCALE (deliberate, not shrunk) ---- */
@media (max-width:720px){
  .lifesec__title{ font-size:clamp(34px,9.6vw,46px) !important; }
  .wornsec__title,.closer__title{ font-size:clamp(30px,8.8vw,42px) !important; }
  .magsec__title,.glovesec__title,.fitsec__title,.warsec__title,.storysec__title,
  .marksec__title{ font-size:clamp(27px,8vw,38px) !important; }
  .collsec__title,.kitsec__title{ font-size:clamp(24px,7vw,34px) !important; }
  .magsec__sub,.glovesec__sub,.fitsec__sub,.marksec__sub,.storysec__sub,
  .lifesec__sub,.warsec__sub,.closer__sub{ font-size:15px !important; max-width:36ch !important; }
  .magsec__specs,.glovesec__specs,.fitsec__specs,.marksec__specs{ font-size:10px !important; letter-spacing:.12em !important; }
  .magsec__cta,.glovesec__cta,.fitsec__cta,.marksec__cta,.wornsec__cta,
  .lifesec__cta,.warsec__cta,.storysec__cta,.closer__cta{ font-size:11px !important; letter-spacing:.14em !important; }
}

/* story: tighter editorial proportion so the panel doesn't run empty */
.storysec__media{ min-height:clamp(320px,34vw,470px) !important; }
.storysec__copy{ padding:clamp(38px,4.5vw,64px) clamp(24px,4vw,60px) !important; }
.storysec__meet{ margin-top:14px !important; }

/* ---- HERO: editorial composition — product-safe zone, no tint over the buckle ---- */
.hero::after{ background: none !important; }            /* no scrim anywhere */

@media (min-width: 1201px){
  /* Keep the photograph crisp and anchor a compact copy group bottom-left. */
  .hero{
    align-items: flex-end !important;
    min-height: min(88vh, 860px) !important;
    background-position: 88% 100% !important;
    background-size: cover !important;
  }
  .hero::before{
    content:none !important;
  }
  .hero__grid{
    justify-items: start !important; align-items: end !important;
    padding: 0 72% clamp(30px, 5vh, 52px) clamp(22px, 3vw, 48px) !important;
  }
  .hero__copy{
    max-width: 300px !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .hero__copy > *{ text-align: left !important; }

  .hero__kicker{ color: var(--cro-pink) !important; text-shadow: 0 2px 12px rgba(0,0,0,.48) !important; margin-bottom: 6px !important; }
  .hero h1{
    color: var(--cro-cream) !important; text-shadow: 0 2px 16px rgba(0,0,0,.56) !important;
    font-size: clamp(25px, 2.3vw, 33px) !important; line-height: .98 !important;
    max-width: none !important; margin: 0 !important;
  }
  .hero__lead{ display: none !important; }

  .hero__cta{
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: flex-start !important; gap: 10px !important; margin-top: 44px !important;
  }
  .hero__cta .hero__cta--primary{
    background: #0B211B !important; border-color: #0B211B !important; color: var(--cro-cream, #F3EFE5) !important;
    padding: 11px 20px !important; font-size: 11px !important;
  }
  .hero__cta .hero__cta--primary:hover{ background: var(--cro-pink) !important; border-color: var(--cro-pink) !important; }
  .hero__cta .hero__cta--ghost{
    color: var(--cro-cream) !important; border-bottom-color: rgba(243,239,230,.58) !important;
    padding: 0 2px 2px !important; font-size: 11px !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.56) !important;
  }
  .hero__cta .hero__cta--ghost:hover{ color: var(--cro-pink) !important; border-bottom-color: var(--cro-pink) !important; }
  .hero__proof{
    color: rgba(243,239,230,.94) !important; text-shadow: 0 2px 12px rgba(0,0,0,.62) !important;
    margin-top: 9px !important; font-size: 9px !important; max-width: none !important; white-space: nowrap !important;
  }
}

/* ---- HERO mobile/tablet: photo stays whole, copy lives underneath it ---- */
@media (max-width: 1200px){
  .hero{
    display: block !important;
    background-image: none !important;
    background: var(--cro-cream, #F3EFE5) !important;
    min-height: 0 !important;
    padding: 0 0 clamp(28px, 7vw, 40px) !important;
  }
  .hero::before{
    content:"" !important; display:block !important; position:relative !important;
    width:100% !important; height: clamp(230px, 66vw, 380px) !important;
    background: #100c08 url("/__l5e/assets-v1/834df92f-d003-4f04-bcda-e17e76ae34db/dartee-weekend-warrior-banner.jpg") no-repeat 32% 62% !important;
    background-size: cover !important;
  }
  .hero__grid{ padding: clamp(20px, 6vw, 28px) 20px 0 !important; }
  .hero__copy{ max-width: 34ch !important; padding: 0 !important; text-align: left !important; }
  .hero__kicker{ color: var(--cro-pink) !important; }
  .hero h1{ color: #0B211B !important; text-shadow: none !important; }
  .hero__lead{ display: none !important; }
  .hero__cta{ display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-top: 16px !important; }
  .hero__cta .hero__cta--primary{ background: #0B211B !important; border-color: #0B211B !important; color: var(--cro-cream, #F3EFE5) !important; text-align: center !important; }
  .hero__cta .hero__cta--ghost{ color: #0B211B !important; align-self: flex-start !important; border-bottom-color: rgba(11,33,27,.42) !important; }
  .hero__proof{ color: rgba(11,33,27,.72) !important; text-shadow: none !important; margin-top: 12px !important; }
}

  /* Final image banner: keep the buckle, marker and hand completely unobstructed. */
  .closer{
    display: flex;
    align-items: flex-end;
    min-height: min(78vh, 720px);
    padding: clamp(300px, 42vh, 430px) clamp(44px, 6vw, 96px) clamp(48px, 7vh, 76px) !important;
    text-align: left;
  }
  .closer::before{
    background:
      linear-gradient(0deg, rgba(8,20,16,.9) 0%, rgba(8,20,16,.56) 37%, rgba(8,20,16,.08) 65%, rgba(8,20,16,0) 82%),
      linear-gradient(90deg, rgba(8,20,16,.48) 0%, rgba(8,20,16,.08) 48%, rgba(8,20,16,0) 72%) !important;
  }
  .closer__inner{
    width: 100%;
    max-width: 680px;
    margin: 0 auto 0 0;
    text-align: left;
  }
  .closer__title{
    font-size: clamp(34px, 4.2vw, 58px) !important;
    max-width: 12ch;
  }
}

/* FINAL PASS: keep the founders joke punchy on every width */
.founders__trim { display: none !important; }