/* =================================================================
   Precision Dynamic Training
   Design system clones the 5.11 Tactical visual language:
   condensed uppercase display type, signature red on charcoal,
   full-bleed lifestyle imagery, sharp solid CTAs, dark footer.
   ================================================================= */

/* Self-hosted fonts (latin) - no external CDN, no render-blocking, no CLS */
@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/barlow-300.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlowcondensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlowcondensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlowcondensed-800.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700 900;font-display:swap;src:url(../fonts/bigshoulders.woff2) format('woff2')}

:root{
  --ink:#141414;
  --ink-90:#1b1b1c;
  --ink-80:#242427;
  --ink-70:#2e2e31;
  --red:#e4002b;          /* 5.11 signature red, matches the PDT logo reticle */
  --red-600:#c10024;
  --paper:#ffffff;
  --mist:#f3f3f4;
  --smoke:#e8e8ea;
  --line:rgba(20,20,20,.12);
  --line-light:rgba(255,255,255,.14);
  --muted:#666669;
  --muted-light:rgba(255,255,255,.66);

  --display:'Big Shoulders Display', system-ui, sans-serif;
  --condensed:'Barlow Condensed', system-ui, sans-serif;
  --sans:'Barlow', system-ui, -apple-system, sans-serif;

  --wrap:1240px;
  --pad:24px;
  --header-h:72px;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.02;text-transform:uppercase;letter-spacing:.01em}

.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--condensed);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:.74rem;color:var(--red);margin-bottom:14px;
}
.eyebrow--light{color:#ff3355}
.section--dark .eyebrow{color:#ff3355}

.section{padding:clamp(64px,9vw,120px) 0}
.section--mist{background:var(--mist)}
.section--dark{background:var(--ink);color:#fff}

.section__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
  margin-bottom:clamp(36px,5vw,60px);flex-wrap:wrap;
}
.section__head--center{justify-content:center;text-align:center}
.section__title{font-size:clamp(2.1rem,5vw,3.4rem)}
.section__title--light{color:#fff}
.section__lead{max-width:46ch;color:var(--muted);font-size:1.02rem}
.section--dark .section__lead{color:var(--muted-light)}
.section__lead--center{margin-inline:auto;text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--condensed);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.92rem;
  padding:16px 32px;border:2px solid transparent;border-radius:2px;
  cursor:pointer;transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn--sm{padding:11px 20px;font-size:.82rem}
.btn--red{background:var(--red);color:#fff;border-color:var(--red)}
.btn--red:hover{background:var(--red-600);border-color:var(--red-600);transform:translateY(-2px)}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px)}
.btn--ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--ink:hover{background:#000;transform:translateY(-2px)}

/* ---------- announcement ---------- */
.announce{background:var(--red);color:#fff;overflow:hidden}
.announce__track{
  display:flex;align-items:center;justify-content:center;gap:18px;
  font-family:var(--condensed);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.72rem;padding:8px var(--pad);flex-wrap:wrap;
}
.announce .dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.7);flex:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--line);
}
.site-header::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:0 8px 30px rgba(0,0,0,.10);
  opacity:0;transition:opacity .25s ease;z-index:-1;
}
.site-header.scrolled::after{opacity:1}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);gap:24px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:46px;height:46px;flex:none}
.brand__name{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.02rem;line-height:.98;letter-spacing:.02em;color:var(--ink);
}
.brand__sub{color:var(--red);letter-spacing:.18em;font-size:.86em}
.footer .brand__sub{color:#ff3355}

.nav{display:flex;gap:30px}
.nav a{
  font-family:var(--condensed);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.86rem;color:var(--ink);position:relative;padding:6px 0;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);
  transition:width .22s ease;
}
.nav a:hover::after{width:100%}

.header__actions{display:flex;align-items:center;gap:14px}

.hamburger{
  display:none;width:42px;height:42px;background:var(--ink);border:none;border-radius:2px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;
}
.hamburger span{width:20px;height:2px;background:#fff;transition:transform .25s ease, opacity .2s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
/* A normal single-viewport hero: the ambient <video id="hero-vid"> just
   autoplays and loops behind the content, same on every device. */
.hero{position:relative;min-height:clamp(560px,90vh,860px);color:#fff;overflow:hidden}
.hero__pin{position:relative;min-height:clamp(560px,90vh,860px);display:flex;align-items:center;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hero__media video{width:100%;height:100%;object-fit:cover;object-position:left center;display:block}
.hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.18) 100%),
    linear-gradient(0deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,0) 40%);
}
.hero__content{position:relative;z-index:2;padding-block:80px}
.hero__title{font-size:clamp(3rem,9vw,6.6rem);letter-spacing:.005em;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.hero__title-sub{
  display:block;font-family:var(--sans);font-weight:500;text-transform:none;
  letter-spacing:normal;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.4;
  color:var(--muted-light);margin-top:14px;max-width:44ch;text-shadow:none;
}
.hero__lead{max-width:50ch;margin:22px 0 34px;font-size:clamp(1rem,1.4vw,1.18rem);color:rgba(255,255,255,.88)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--condensed);font-weight:700;text-transform:uppercase;letter-spacing:.3em;font-size:.66rem;
  color:rgba(255,255,255,.7);writing-mode:vertical-rl;
}
.hero__scroll::after{content:"";display:block;width:1px;height:34px;background:rgba(255,255,255,.5);margin:8px auto 0}

/* ---------- stats ---------- */
.stats{background:var(--ink);color:#fff;border-bottom:3px solid var(--red)}
.stats__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:34px 24px;text-align:center;border-right:1px solid var(--line-light);
  display:flex;flex-direction:column;gap:6px;
}
.stat:last-child{border-right:none}
.stat__num{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;color:#fff}
.stat__plus{color:var(--red)}
.stat__label{font-size:.8rem;letter-spacing:.04em;color:var(--muted-light);text-transform:uppercase;font-family:var(--condensed);font-weight:700}

/* ---------- cinematic video section ---------- */
.cinematic{
  background:var(--ink);padding:clamp(56px,8vw,100px) 0 0;
  border-bottom:3px solid var(--red);overflow:hidden;
}
.cinematic__head{text-align:center;margin-bottom:clamp(32px,5vw,56px)}
.cinematic__title{
  font-size:clamp(2rem,5vw,3.4rem);color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.cinematic__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  max-width:900px;margin-inline:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%),
    linear-gradient(to bottom,#000 60%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%),
    linear-gradient(to bottom,#000 60%,transparent 100%);
  mask-composite:intersect;
}
.cinematic__cell{
  overflow:hidden;aspect-ratio:9/16;background:#000;
}
.cinematic__vid{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .5s ease;
}
.cinematic__vid.playing{opacity:1}

/* ---------- course cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--smoke)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease, opacity .3s ease}
.card__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.card__media video.playing{opacity:1}
.card:hover .card__media img{transform:scale(1.05)}
.card.has-video:hover .card__media img{opacity:0}
.tag{
  position:absolute;top:12px;left:12px;background:var(--red);color:#fff;
  font-family:var(--condensed);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.66rem;padding:6px 12px;border-radius:2px;
}
.card__body{padding:24px;display:flex;flex-direction:column;flex:1;gap:12px}
.card__title{font-size:1.32rem}
.card__desc{color:var(--muted);font-size:.92rem;flex:1}
.card__meta{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--ink);font-weight:500}
.card__meta li{position:relative;padding-left:16px}
.card__meta li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--red);border-radius:1px}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.price{font-family:var(--display);font-weight:700;font-size:1.6rem}
.price--quote{font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.cards__note{margin-top:34px;text-align:center;color:var(--muted);font-size:.95rem}
.cards__note a{color:var(--red);font-weight:600}

/* ---------- why ---------- */
.why__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,80px);align-items:center}
.why__lead{color:var(--muted-light);font-size:1.05rem;max-width:52ch;margin-bottom:36px}
.why__list{display:grid;gap:26px}
.why__item{display:flex;gap:18px}
.why__ico{
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--red);
  border:2px solid var(--red);border-radius:2px;width:46px;height:46px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.why__item h3{font-size:1.18rem;color:#fff;margin-bottom:6px}
.why__item p{color:var(--muted-light);font-size:.94rem}
.why__media{border-radius:3px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line-light)}
.why__media img{width:100%;height:100%;object-fit:cover}

/* ---------- instructors ---------- */
.instructors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px)}
.instructor{display:flex;flex-direction:column}
.instructor__photo{border-radius:3px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--smoke)}
.instructor__photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.instructor__body{padding-top:22px}
.bio__name{font-size:1.7rem}
.bio__role{font-family:var(--condensed);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--red);margin:4px 0 12px}
.bio__text{color:var(--muted);font-size:.98rem}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery__item{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:4/5;background:var(--ink-80);border:1px solid var(--line-light)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery__item:hover img{transform:scale(1.06)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:3px;padding:30px 26px;position:relative}
.step__num{
  font-family:var(--display);font-weight:700;font-size:1.1rem;color:#fff;background:var(--ink);
  width:42px;height:42px;border-radius:2px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.step h3{font-size:1.18rem;margin-bottom:8px;color:var(--ink)}
.step p{color:var(--muted);font-size:.92rem}

/* ---------- church security program ---------- */
.church-phases{margin-top:56px}
.church-steps{grid-template-columns:repeat(3,1fr)}
.step__list{margin-top:14px;display:flex;flex-direction:column;gap:8px;font-size:.88rem;color:var(--ink)}
.step__list li{position:relative;padding-left:16px;line-height:1.5}
.step__list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--red);border-radius:1px}
.church-cta{text-align:center;margin-top:48px}
.church-cta__lead{max-width:44ch;margin:0 auto 24px;color:var(--muted-light);font-size:1.02rem}

/* ---------- catalog ---------- */
.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cat{
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:26px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .2s ease, transform .2s ease;
}
.cat:hover{border-color:var(--ink);transform:translateY(-3px)}
.cat__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cat__head h3{font-size:1.18rem}
.cat__price{font-family:var(--display);font-weight:700;color:var(--red);font-size:1.05rem;white-space:nowrap}
.cat p{color:var(--muted);font-size:.9rem;flex:1}
.cat__cta{font-family:var(--condensed);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--ink)}
.cat:hover .cat__cta{color:var(--red)}

/* ---------- affiliates ---------- */
.affiliates__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:780px;margin-inline:auto}
.affiliate{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:36px 28px;border:1px solid var(--line-light);border-radius:3px;
  text-align:center;transition:border-color .2s ease, transform .2s ease;
}
.affiliate:hover{border-color:var(--red);transform:translateY(-3px)}
.affiliate__logo{display:flex;align-items:center;justify-content:center;height:64px}
.affiliate__logo img{max-height:64px;max-width:280px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.9;transition:opacity .2s ease}
.affiliate:hover .affiliate__logo img{opacity:1}
.affiliate__body{display:flex;flex-direction:column;gap:6px}
.affiliate__url{font-family:var(--condensed);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--muted-light)}
.affiliate__code{font-family:var(--display);font-size:1rem;color:#fff}
.affiliate__code strong{color:#ff3355;letter-spacing:.06em}
.affiliate__tagline{font-size:.88rem;color:var(--muted-light);font-style:italic}

/* ---------- credibility ---------- */
.creds{background:var(--ink);color:#fff;padding:clamp(56px,8vw,90px) 0;border-top:3px solid var(--red)}
.creds__inner{text-align:center}
.creds__title{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:40px}
.creds__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cred{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line-light);border-radius:3px}
.cred strong{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;color:var(--red)}
.cred span{color:var(--muted-light);font-size:.88rem}

/* ---------- faq ---------- */
.faq__wrap{max-width:820px;margin-inline:auto}
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  font-size:1.02rem;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:400;font-size:1.7rem;color:var(--red);transition:transform .2s ease;line-height:1;
}
.qa[open] summary::after{content:"\2212"}
.qa p{padding:0 44px 24px 0;color:var(--muted);font-size:.96rem}

/* ---------- final cta ---------- */
.cta{position:relative;color:#fff;overflow:hidden;padding:clamp(70px,11vw,130px) 0;text-align:center}
.cta__media{position:absolute;inset:0;z-index:0}
.cta__media img{width:100%;height:100%;object-fit:cover}
.cta::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(12,12,12,.78)}
.cta__inner{position:relative;z-index:2}
.cta__title{font-size:clamp(2.4rem,6vw,4.4rem)}
.cta__lead{max-width:44ch;margin:18px auto 32px;color:rgba(255,255,255,.85)}
.cta__buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.footer{background:var(--ink-90);color:#fff}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;padding:clamp(50px,7vw,80px) var(--pad)}
.brand--footer img{width:56px;height:56px}
.brand--footer .brand__name{color:#fff}
.footer__tag{color:var(--muted-light);font-size:.92rem;margin-top:18px;max-width:34ch}
.footer__col h3{font-size:.86rem;letter-spacing:.16em;color:#fff;margin-bottom:18px}
.footer__col a, .footer__contact p{display:block;color:var(--muted-light);font-size:.92rem;padding:6px 0;transition:color .18s ease}
.footer__col a:hover{color:#fff}
.footer__contact a{color:var(--muted-light)}
.footer__social{display:flex;gap:18px;margin-top:14px}
.footer__social a{
  font-family:var(--condensed);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:.78rem;color:#fff;padding:0;
}
.footer__social a:hover{color:var(--red)}
.footer__bar{border-top:1px solid var(--line-light)}
.footer__bar-inner{display:flex;justify-content:space-between;gap:16px;padding:20px var(--pad);flex-wrap:wrap}
.footer__bar p{font-size:.78rem;color:var(--muted-light)}
.footer__legal{max-width:52ch}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* =========================================================
   Course detail modal
   ========================================================= */
#cd-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;padding:20px var(--pad);
  opacity:0;transition:opacity .22s ease;pointer-events:none;
}
#cd-overlay:not([hidden]){opacity:1;pointer-events:all}
.cd-modal{
  position:relative;width:100%;max-width:620px;max-height:90vh;
  overflow-y:auto;background:#fff;border-radius:4px;
  animation:cd-in .22s ease;
}
@keyframes cd-in{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.cd-img-wrap{position:relative}
.cd-img-wrap img{width:100%;height:220px;object-fit:cover;display:block}
.cd-tag-row{position:absolute;top:12px;left:12px;display:flex;gap:8px}
.tag--soldout{background:#555 !important}
.cd-close{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.55);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:10;color:#fff;
  transition:background .18s;
}
.cd-close:hover{background:rgba(0,0,0,.85)}
.cd-body{padding:24px 28px 16px}
.cd-meta{font-family:var(--sans);font-size:.82rem;color:var(--muted);margin-bottom:8px}
.cd-title{font-family:var(--display);font-weight:700;font-size:1.65rem;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);line-height:1.1;margin-bottom:14px}
.cd-desc{font-size:.94rem;line-height:1.72;color:var(--ink);margin-bottom:20px}
.cd-sold-note{background:#f5f5f6;border-left:3px solid #aaa;padding:10px 14px;font-size:.84rem;color:#555;margin-bottom:18px}
.cd-section-title{font-family:var(--condensed);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:#888;margin-bottom:10px}
.cd-list{margin:0 0 20px;padding-left:18px}
.cd-list li{font-size:.88rem;line-height:1.65;color:var(--ink);margin-bottom:5px}
.cd-foot{
  padding:16px 28px 24px;border-top:1px solid var(--smoke);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.cd-foot-price{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--ink)}
.cd-cta .btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn--outline-dark{
  height:46px;padding:0 24px;background:#fff;border:2px solid var(--ink);border-radius:2px;
  font-family:var(--condensed);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.8rem;color:var(--ink);cursor:pointer;transition:background .18s,color .18s;
}
.btn--outline-dark:hover{background:var(--ink);color:#fff}

/* catalog tiles -- clickable divs */
.cat[data-cd]{cursor:pointer}

/* ---------- products ---------- */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.product{
  background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease;
}
.product:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.10)}
.product__media{
  aspect-ratio:1/1;overflow:hidden;background:var(--mist);
  display:flex;align-items:center;justify-content:center;
}
.product__media img{width:100%;height:100%;object-fit:contain;padding:20px;transition:transform .4s ease}
.product:hover .product__media img{transform:scale(1.04)}
.product__body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.product__name{font-size:1.2rem}
.product__price{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--red)}
.product__desc{color:var(--muted);font-size:.9rem;flex:1}

/* sold-out card state */
.card--soldout .btn--red{
  background:#bbb;pointer-events:none;
  cursor:default;
}
.card--soldout .btn--red::after{content:" (Sold Out)";font-size:.7em;opacity:.8}

@media (max-width:560px){
  .cd-body{padding:18px 20px 12px}
  .cd-foot{padding:14px 20px 20px}
  .cd-title{font-size:1.35rem}
  .cd-img-wrap img{height:175px}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .catalog{grid-template-columns:repeat(2,1fr)}
  .products{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line-light)}
  .creds__grid{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:1fr}
  .why__media{aspect-ratio:16/10;order:-1}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  /* collapse nav to hamburger across the whole tablet range */
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;background:#fff;
    flex-direction:column;gap:0;padding:8px var(--pad) 20px;
    border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(0,0,0,.12);
    transform:translateY(-130%);transition:transform .3s ease;visibility:hidden;
  }
  .nav.open{transform:translateY(0);visibility:visible}
  .nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:1rem;width:100%}
  .nav a:last-child{border-bottom:none}
  .nav a::after{display:none}
  .hamburger{display:flex}
}

@media (max-width:560px){
  .affiliates__grid{grid-template-columns:1fr}
  .cinematic__grid{grid-template-columns:1fr;max-width:320px}
  .cinematic__cell{aspect-ratio:9/16}
  .gallery{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  :root{--header-h:64px}
  .header__actions .btn--sm{display:none}
  .brand__name{font-size:.92rem}
  .brand img{width:40px;height:40px}

  .cards{grid-template-columns:1fr}
  .catalog{grid-template-columns:1fr}
  .products{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .instructors{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .footer__grid{grid-template-columns:1fr}
  .section__head{flex-direction:column;align-items:flex-start}
  .section__head--center{align-items:center}
  .hero__scroll{display:none}
  .hero__media video{object-position:40% center}
  .footer__bar-inner{flex-direction:column;gap:8px}
}

@media (max-width:430px){
  .stats__grid{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--line-light)}
  .stat:last-child{border-bottom:none}
  .creds__grid{grid-template-columns:1fr}
  .announce__track span:nth-child(n+4){display:none}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important;transition:none}
  .card:hover{transform:none}
  .card:hover .card__media img{transform:none}
}