
/* DESIGENETICS V6.12 — /learn/training/ */

.tk-page .desktop-links .active-link{color:#fff}
.tk-page .desktop-links .active-link:after{
  content:"";display:block;height:2px;background:var(--red);margin-top:7px
}

.tk-breadcrumb{
  position:absolute;z-index:20;top:88px;left:50%;
  width:min(calc(100% - (var(--pad)*2)),var(--max));transform:translateX(-50%);
  display:flex;gap:10px;align-items:center;
  color:#686868;font-size:7px;font-weight:900;letter-spacing:.15em
}
.tk-breadcrumb a:hover,.tk-breadcrumb strong{color:#fff}

.tk-hero{
  min-height:900px;position:relative;overflow:hidden;
  display:flex;align-items:center;border-bottom:1px solid #202020;
  background:
    radial-gradient(circle at 77% 37%,rgba(213,0,0,.15),transparent 24%),
    #000
}
.tk-grid{
  position:absolute;inset:0;opacity:.23;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:82px 82px;
  mask-image:linear-gradient(to bottom,#000 0 72%,transparent 100%)
}
.tk-hero:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,#000 0 49%,rgba(0,0,0,.68) 70%,rgba(0,0,0,.24) 100%),
    linear-gradient(0deg,#000 0,transparent 25%);
  pointer-events:none
}
.tk-hero-art{
  position:absolute;right:-3%;top:8%;width:min(58vw,890px);height:84%;
  display:flex;align-items:center;justify-content:center;opacity:.15;z-index:0
}
.tk-hero-art img{width:100%;max-height:100%;object-fit:contain;filter:grayscale(1) contrast(1.3)}
.tk-hero-inner{
  width:100%;max-width:var(--max);margin:auto;padding:150px var(--pad) 80px;
  position:relative;z-index:3;display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(230px,.55fr);
  gap:clamp(55px,8vw,120px);align-items:end
}
.tk-title{
  margin:25px 0 28px;
  font:900 clamp(85px,10.8vw,170px)/.77 Impact,"Arial Black",sans-serif;
  letter-spacing:-.035em;text-transform:uppercase
}
.tk-title span{display:block}
.tk-title .outline{
  color:transparent;-webkit-text-stroke:1.8px #fff;margin-left:8.2vw
}
.tk-title .red{color:var(--red);margin-left:2.2vw}
.tk-intro{max-width:690px;color:#969696;font-size:clamp(15px,1.4vw,19px);line-height:1.66}
.tk-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:29px}
.tk-side{
  border-left:1px solid #323232;padding-left:24px;padding-top:4px;margin-bottom:5px
}
.tk-side-label{font-size:7px;font-weight:900;letter-spacing:.16em;color:#707070}
.tk-side-stat{display:flex;align-items:end;gap:13px;margin:22px 0}
.tk-side-stat strong{font:900 82px/.75 Impact,sans-serif;color:#fff}
.tk-side-stat span{font-size:8px;font-weight:900;letter-spacing:.12em;line-height:1.5;color:var(--red)}
.tk-side p{margin:0;color:#666;font-size:9px;font-weight:900;line-height:1.8;letter-spacing:.12em}

.tk-strip{overflow:hidden;border-bottom:1px solid #202020;background:#050505}
.tk-strip-track{
  width:max-content;display:flex;align-items:center;gap:24px;padding:15px 0;
  animation:tk-marquee 32s linear infinite
}
.tk-strip-track span{color:#888;font-size:8px;font-weight:950;letter-spacing:.17em}
.tk-strip-track i{font-style:normal;color:var(--red);font-size:14px}
@keyframes tk-marquee{to{transform:translateX(-50%)}}

.tk-principle-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,.8fr);
  gap:clamp(60px,8vw,130px);align-items:start
}
.tk-principle-copy{padding-top:38px}
.tk-principle-copy>p{margin:0 0 17px;color:#969696;font-size:14px;line-height:1.72}
.tk-rule{margin-top:31px;padding:21px 22px;border-left:4px solid var(--red);background:#090909}
.tk-rule small{display:block;color:#676767;font-size:7px;font-weight:900;letter-spacing:.15em;margin-bottom:8px}
.tk-rule strong{font:900 clamp(26px,2.5vw,39px)/.95 Impact,sans-serif}

.tk-topics{background:#050505;border-top:1px solid #191919;border-bottom:1px solid #191919}
.tk-topic-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid #292929;border-left:1px solid #292929
}
.tk-topic{
  min-height:355px;padding:22px;border-right:1px solid #292929;border-bottom:1px solid #292929;
  background:#070707;display:flex;flex-direction:column;transition:background .2s,transform .2s
}
.tk-topic:hover{background:#0c0c0c;transform:translateY(-3px)}
.tk-topic>span{color:var(--red);font-size:8px;font-weight:900;letter-spacing:.12em}
.tk-topic>small{margin-top:7px;color:#666;font-size:7px;font-weight:900;letter-spacing:.13em}
.tk-topic h3{margin:auto 0 16px;font:900 clamp(32px,2.8vw,47px)/.85 Impact,sans-serif;letter-spacing:-.015em}
.tk-topic p{margin:0;color:#828282;font-size:11px;line-height:1.62;min-height:72px}
.tk-topic b{margin-top:22px;padding-top:15px;border-top:1px solid #292929;font-size:8px;letter-spacing:.12em}

.tk-start-head{
  display:flex;justify-content:space-between;gap:45px;align-items:end;margin:18px 0 43px
}
.tk-start-head .section-title span{color:var(--red)}
.tk-sequence{list-style:none;margin:0;padding:0;border-top:1px solid #292929}
.tk-sequence li{
  display:grid;grid-template-columns:55px minmax(0,1fr) auto;gap:28px;align-items:center;
  min-height:135px;padding:22px 0;border-bottom:1px solid #292929
}
.tk-sequence li>b{align-self:start;color:var(--red);font-size:8px;letter-spacing:.12em;padding-top:4px}
.tk-sequence small{display:block;color:#686868;font-size:7px;font-weight:900;letter-spacing:.15em;margin-bottom:7px}
.tk-sequence h3{margin:0;font:900 clamp(28px,2.65vw,43px)/.93 Impact,sans-serif;letter-spacing:-.01em}
.tk-sequence p{margin:8px 0 0;max-width:680px;color:#7e7e7e;font-size:11px;line-height:1.58}
.tk-sequence li>span{color:#555;font-size:7px;font-weight:900;letter-spacing:.14em}

.tk-featured{background:#f0f0f0;color:#070707}
.tk-featured .kicker{color:#555}
.tk-featured .side-copy{color:#555}
.tk-feature-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:12px}
.tk-feature-main{
  min-height:590px;padding:30px;background:#050505;color:#fff;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end
}
.tk-feature-main:after{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(213,0,0,.28),transparent 23%);
  pointer-events:none
}
.tk-feature-no{position:absolute;right:24px;top:12px;color:#131313;font:900 180px/.8 Impact,sans-serif}
.tk-feature-main small{position:relative;z-index:1;color:var(--red);font-size:8px;font-weight:900;letter-spacing:.14em}
.tk-feature-main h3{
  position:relative;z-index:1;margin:18px 0 20px;
  font:900 clamp(58px,6vw,96px)/.81 Impact,sans-serif;letter-spacing:-.025em
}
.tk-feature-main h3 em{font-style:normal;color:var(--red)}
.tk-feature-main p{position:relative;z-index:1;max-width:580px;margin:0;color:#8e8e8e;font-size:12px;line-height:1.65}
.tk-feature-main>b{position:relative;z-index:1;margin-top:27px;padding-top:16px;border-top:1px solid #2b2b2b;font-size:8px;letter-spacing:.13em}
.tk-feature-side{display:grid;grid-template-rows:repeat(3,1fr);gap:12px}
.tk-feature-row{
  min-height:180px;padding:22px;background:#fff;border:1px solid #d5d5d5;
  display:grid;grid-template-columns:40px 1fr auto;gap:17px;align-items:end
}
.tk-feature-row>span{align-self:start;color:var(--red);font-size:8px;font-weight:900}
.tk-feature-row small{display:block;color:#777;font-size:7px;font-weight:900;letter-spacing:.13em;margin-bottom:8px}
.tk-feature-row h3{margin:0;font:900 clamp(26px,2.2vw,37px)/.93 Impact,sans-serif}
.tk-feature-row>b{color:var(--red);font-size:18px}
.tk-coming{opacity:.65}

.tk-library-head{display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:33px}
.tk-search{display:block;width:min(100%,430px)}
.tk-search span{display:block;margin-bottom:8px;color:#6c6c6c;font-size:8px;font-weight:900;letter-spacing:.14em}
.tk-search input{
  width:100%;height:52px;background:#070707;border:1px solid #303030;color:#fff;
  padding:0 15px;outline:0;border-radius:0;font:600 12px/1 system-ui
}
.tk-search input:focus{border-color:#5c5c5c}
.tk-search input::placeholder{color:#646464}
.tk-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.tk-filters button{
  appearance:none;background:#070707;border:1px solid #303030;color:#838383;
  padding:10px 11px;font-size:7px;font-weight:900;letter-spacing:.11em;cursor:pointer
}
.tk-filters button:hover,.tk-filters button.active{background:var(--red);border-color:var(--red);color:#fff}
.tk-library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tk-library-card{
  min-height:285px;padding:22px;border:1px solid #292929;background:#070707;
  display:flex;flex-direction:column;transition:background .2s,transform .2s
}
a.tk-library-card:hover{background:#0c0c0c;transform:translateY(-3px)}
.tk-library-card>div{display:flex;justify-content:space-between;gap:14px;color:#6c6c6c;font-size:7px;font-weight:900;letter-spacing:.12em}
.tk-library-card>div span{color:var(--red)}
.tk-library-card h3{margin:55px 0 15px;font:900 clamp(28px,2.5vw,41px)/.9 Impact,sans-serif;letter-spacing:-.01em}
.tk-library-card p{margin:0;color:#7e7e7e;font-size:11px;line-height:1.62}
.tk-library-card>b{margin-top:auto;padding-top:20px;font-size:8px;letter-spacing:.12em}
.tk-library-card:not(a)>b{color:#5e5e5e}
.tk-empty{margin:12px 0 0;padding:30px;border:1px dashed #333;color:#777;text-align:center;font-size:11px}

.tk-practice{
  background:#050505;border-top:1px solid #191919;position:relative;overflow:hidden
}
.tk-practice:after{
  content:"TRAIN";position:absolute;right:-2vw;bottom:-7vw;color:#0a0a0a;
  font:900 32vw/.75 Impact,sans-serif;letter-spacing:-.05em;pointer-events:none
}
.tk-practice-grid{
  position:relative;z-index:1;display:grid;grid-template-columns:.28fr 1fr;gap:60px;align-items:start
}
.tk-practice-label{border-top:1px solid #313131;padding-top:13px;display:flex;justify-content:space-between;gap:20px}
.tk-practice-label small{color:#666;font-size:7px;font-weight:900;letter-spacing:.14em}
.tk-practice-label span{color:var(--red);font-size:8px;font-weight:900}
.tk-practice .section-title span{color:var(--red)}
.tk-practice-copy{max-width:700px;color:#888;font-size:13px;line-height:1.68;margin:24px 0 0}

@media(max-width:1100px){
  .tk-hero-inner{grid-template-columns:1fr}
  .tk-side{display:none}
  .tk-topic-grid{grid-template-columns:repeat(2,1fr)}
  .tk-feature-grid{grid-template-columns:1fr}
  .tk-feature-side{grid-template-columns:repeat(3,1fr);grid-template-rows:none}
  .tk-feature-row{min-height:230px;grid-template-columns:34px 1fr auto}
  .tk-library-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:780px){
  .tk-breadcrumb{top:80px;width:calc(100% - 40px)}
  .tk-hero{min-height:auto}
  .tk-grid{background-size:52px 52px}
  .tk-hero:after{
    background:
      linear-gradient(0deg,#000 0 25%,rgba(0,0,0,.61) 53%,rgba(0,0,0,.18) 100%),
      linear-gradient(90deg,#000 0 10%,transparent 80%)
  }
  .tk-hero-art{width:145vw;height:60%;right:-52%;top:12%;opacity:.14}
  .tk-hero-inner{display:block;padding:130px 20px 58px}
  .tk-title{font-size:clamp(72px,20vw,108px);line-height:.77;margin:23px 0 26px}
  .tk-title .outline,.tk-title .red{margin-left:0}
  .tk-title .outline{-webkit-text-stroke:1.35px #fff}
  .tk-intro{max-width:94%;font-size:14px}
  .tk-actions{width:100%}
  .tk-actions .btn{width:100%}

  .tk-principle-grid{grid-template-columns:1fr;gap:35px}
  .tk-principle-copy{padding-top:0}

  .tk-topic-grid{grid-template-columns:1fr;border:0;gap:10px}
  .tk-topic{min-height:290px;border:1px solid #292929}

  .tk-start-head,.tk-library-head{display:block}
  .tk-start-head .side-copy{margin-top:22px}
  .tk-sequence li{grid-template-columns:35px 1fr;padding:22px 0}
  .tk-sequence li>span{display:none}
  .tk-sequence p{max-width:95%}

  .tk-feature-main{min-height:500px;padding:22px}
  .tk-feature-main h3{font-size:clamp(50px,14vw,75px)}
  .tk-feature-no{font-size:125px}
  .tk-feature-side{grid-template-columns:1fr}
  .tk-feature-row{min-height:180px}

  .tk-search{margin-top:27px}
  .tk-library-grid{grid-template-columns:1fr}
  .tk-library-card{min-height:255px}
  .tk-library-card h3{margin-top:42px}

  .tk-practice-grid{grid-template-columns:1fr;gap:35px}
  .tk-practice-label{max-width:280px}
}

@media(max-width:500px){
  .tk-hero-inner{padding:125px 18px 50px}
  .tk-title{font-size:19.2vw}
  .tk-topic{min-height:275px}
  .tk-feature-main h3{font-size:13.6vw}
  .tk-library-card h3{font-size:10vw}
}

@media(prefers-reduced-motion:reduce){
  .tk-strip-track{animation:none}
}

/* V8.85 reduced-motion interaction completion */
@media(prefers-reduced-motion:reduce){
  .tk-topic,.tk-library-card{transition:none}
  .tk-topic:hover,a.tk-library-card:hover{transform:none}
}
