/* =========================================================
   DPT THEORY PAGE
   Monochrome Scientific / Editorial Interface
========================================================= */

:root {

    --theory-black: #080808;
    --theory-black-soft: #0d0c0b;
    --theory-charcoal: #131313;

    --theory-paper: #f5f4f1;
    --theory-white: #ffffff;

    --theory-ink: #141414;
    --theory-muted: #747474;

    --theory-border-dark:
        rgba(255,255,255,.12);

    --theory-border-light:
        rgba(20,20,20,.13);

    --theory-shadow:
        0 28px 80px
        rgba(0,0,0,.08);

}


/* =========================================================
   HERO
========================================================= */

.theory-hero {

    position: relative;

    min-height: 100vh;

    padding:
        145px 20px 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    text-align: center;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 50% 40%,
            rgba(255,255,255,.07),
            transparent 31%
        ),

        linear-gradient(
            145deg,
            #080808 0%,
            #0c0b0a 58%,
            #070707 100%
        );

}


/* STATIC scientific grid */

.theory-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .9;

   background:
        linear-gradient(
            rgba(5,5,5,.72),
            rgba(5,5,5,.902)
        ),
        url("../assets/images/newtont.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}


/* vignette */

.theory-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at center,
            transparent 45%,
            rgba(0,0,0,.46) 100%
        );

}


.theory-hero .hero-container {

    position: relative;

    z-index: 2;

    width:
        min(
            1050px,
            100%
        );

    margin: auto;

}


/* =========================================================
   HERO TAG
========================================================= */

.hero-tag,
.section-tag {

    color: currentColor;

    opacity: .6;

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .22em;

    text-transform: uppercase;

}


.hero-tag {

    display: inline-flex;

    align-items: center;

    gap: 14px;

}


.hero-tag::before,
.hero-tag::after {

    content: "";

    width: 40px;
    height: 1px;

    background:
        rgba(255,255,255,.22);

}


/* =========================================================
   HERO TYPOGRAPHY
========================================================= */

.theory-hero h1 {

    margin:
        28px 0 10px;

    font:
        700
        clamp(4.2rem,9vw,8rem)
        /.9
        var(--display-font);

    letter-spacing:
        -.065em;

    text-shadow:

        0 2px 12px
        rgba(255,255,255,.07),

        0 0 45px
        rgba(255,255,255,.025);

}


.theory-hero h2 {

    font:
        500
        clamp(1.2rem,2.5vw,2.2rem)
        var(--display-font);

    letter-spacing: .18em;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.64);

}


.theory-hero .hero-description {

    max-width: 760px;

    margin:
        38px auto 0;

    color:
        rgba(255,255,255,.61);

    font-size: 1.02rem;

}


.theory-hero blockquote {

    position: relative;

    width: fit-content;

    max-width: 100%;

    margin:
        42px auto;

    padding:
        0 28px;

    color:
        rgba(255,255,255,.73);

    font:
        500 1.1rem
        var(--display-font);

    font-style: normal;

}


.theory-hero blockquote::before,
.theory-hero blockquote::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 15px;
    height: 1px;

    background:
        rgba(255,255,255,.3);

}


.theory-hero blockquote::before {

    left: 0;

}


.theory-hero blockquote::after {

    right: 0;

}


/* =========================================================
   BEGIN BUTTON
========================================================= */

.begin-button {

    position: relative;

    min-height: 49px;

    padding:
        0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    color: #111111;

    background: #ffffff;

    border:
        1px solid #ffffff;

    border-radius: 5px;

    font-size: .8rem;

    font-weight: 800;

    transition:

        transform .25s ease,
        background .25s ease,
        color .25s ease;

}


.begin-button::after {

    content: "↓";

    margin-left: 10px;

    transition:
        transform .25s ease;

}


.begin-button:hover {

    transform:
        translateY(-3px);

    color: #ffffff;

    background: transparent;

}


.begin-button:hover::after {

    transform:
        translateY(3px);

}


/* =========================================================
   GLOBAL SECTION SPACING
========================================================= */

.overview,
.why-dpt,
.dimensions,
.concepts,
.principles,
.relationships,
.roadmap,
.continue {

    position: relative;

    padding:
        112px 0;

    overflow: hidden;

}


/* =========================================================
   SUBTLE STATIC LIGHT GRID
========================================================= */

.section-light,
.section-white {

    position: relative;

}


.section-light::before,
.section-white::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .52;

    background-image:

        linear-gradient(
            rgba(0,0,0,.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0,0,0,.018) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

}


/* =========================================================
   SECTION TITLES
========================================================= */

.section-title {

    position: relative;

    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin:
        0 auto 54px;

    text-align: left;

}


.section-title h2 {

    max-width: 850px;

    margin-top: 8px;

    font:
        700
        clamp(2.5rem,5vw,4.7rem)
        /.98
        var(--display-font);

    letter-spacing:
        -.055em;

}


.section-title h2::after {

    content: "";

    display: block;

    width: 0;
    height: 2px;

    margin-top: 22px;

    background:
        currentColor;

    opacity: .18;

    transition:
        width .8s ease;

}


.section-visible
.section-title h2::after {

    width: 80px;

}


/* =========================================================
   COMMON CONTENT WIDTH
========================================================= */

.overview-grid,
.characteristics,
.why-grid,
.timeline,
.concept-diagram,
.concept-grid,
.principles-list,
.relationship-list,
.roadmap-line,
.continue-grid,
.continue-buttons,
.why-introduction,
.dimensions-intro,
.concept-intro,
.principles-intro,
.relationships-intro,
.roadmap-intro,
.continue-intro,
.continue-links {

    position: relative;

    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin-left: auto;

    margin-right: auto;

}


.overview-text p,
.why-introduction,
.dimensions-intro,
.concept-intro,
.principles-intro,
.relationships-intro,
.roadmap-intro,
.continue-intro {

    color: inherit;

    opacity: .66;

}


/* =========================================================
   SECTION WATERMARK NUMBERS
========================================================= */

.content-section::after {

    position: absolute;

    top: 95px;

    right:
        max(
            20px,
            calc(
                (100vw - 1180px) / 2
            )
        );

    color: currentColor;

    opacity: .04;

    font:
        700
        clamp(5rem,10vw,9rem)
        var(--display-font);

    pointer-events: none;

}


.overview::after {
    content: "01";
}

.why-dpt::after {
    content: "02";
}

.dimensions::after {
    content: "03";
}

.concepts::after {
    content: "04";
}

.principles::after {
    content: "05";
}

.relationships::after {
    content: "06";
}

.roadmap::after {
    content: "07";
}

.continue::after {
    content: "08";
}


/* =========================================================
   OVERVIEW
========================================================= */

.overview-grid {

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    gap: 70px;

    align-items: center;

}


.overview-text {

    display: grid;

    gap: 22px;

}


/* =========================================================
   DPT INTERACTIVE DIAGRAM
========================================================= */

.diagram-placeholder {

    position: relative;

    min-height: 440px;

    display: grid;

    place-items: center;

    overflow: hidden;

    opacity: 1;

    color: inherit;

    background:
        rgba(255,255,255,.64);

    border:
        1px solid
        rgba(20,20,20,.13);

}


.dpt-theory-diagram {

    position: relative;

    width: 100%;
    height: 440px;

}


.dpt-core {

    position: absolute;

    z-index: 5;

    left: 50%;
    top: 50%;

    width: 90px;
    height: 90px;

    display: grid;

    place-items: center;

    transform:
        translate(-50%,-50%);

    color: #ffffff;

    background: #111111;

    border-radius: 50%;

    font:
        700 1.25rem
        var(--display-font);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.17);

}


.dpt-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid
        rgba(20,20,20,.15);

    border-radius: 50%;

    transform:
        translate(-50%,-50%);

    transition:
        border-color .3s ease,
        transform .4s ease;

}


.dpt-orbit.one {

    width: 190px;
    height: 190px;

}


.dpt-orbit.two {

    width: 290px;
    height: 290px;

}


.dpt-orbit.three {

    width: 390px;
    height: 390px;

}


.dpt-node {

    position: absolute;

    z-index: 6;

    min-width: 82px;

    padding:
        9px 12px;

    color: #111111;

    background: #ffffff;

    border:
        1px solid
        rgba(20,20,20,.2);

    text-align: center;

    cursor: pointer;

    font-size: .68rem;

    font-weight: 800;

    transition:

        transform .25s ease,
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;

}


.dpt-node:hover,
.dpt-node.active {

    color: #ffffff;

    background: #111111;

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.14);

}


.dpt-node.space {

    left: 50%;
    top: 10%;

    transform:
        translateX(-50%);

}


.dpt-node.space:hover {

    transform:
        translateX(-50%)
        translateY(-4px);

}


.dpt-node.time {

    left: 8%;
    top: 47%;

}


.dpt-node.energy {

    right: 8%;
    top: 47%;

}


.dpt-node.force {

    left: 50%;
    bottom: 9%;

    transform:
        translateX(-50%);

}


.dpt-node.force:hover {

    transform:
        translateX(-50%)
        translateY(-4px);

}


.diagram-status {

    position: absolute;

    left: 50%;
    bottom: 18px;

    z-index: 8;

    width: 90%;

    transform:
        translateX(-50%);

    color: #666666;

    font-size: .68rem;

    text-align: center;

    letter-spacing: .04em;

}


/* =========================================================
   COMMON CARDS
========================================================= */

.characteristic,
.why-card,
.concept-card,
.continue-card,
.timeline-content,
.relationship,
.roadmap-stage {

    position: relative;

    overflow: hidden;

    padding: 30px;

    border:
        1px solid currentColor;

    background: transparent;

    transition:

        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease,
        opacity .28s ease;

}


/* spotlight */

.characteristic::before,
.why-card::before,
.concept-card::before,
.timeline-content::before,
.relationship::before,
.roadmap-stage::before,
.continue-card::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:

        radial-gradient(
            350px circle
            at var(--mouse-x,50%)
            var(--mouse-y,50%),

            rgba(255,255,255,.10),

            transparent 46%
        );

    transition:
        opacity .25s ease;

}


.section-light
.characteristic::before,
.section-white
.characteristic::before,
.section-light
.why-card::before,
.section-white
.why-card::before,
.section-light
.concept-card::before,
.section-white
.concept-card::before,
.section-light
.timeline-content::before,
.section-white
.timeline-content::before,
.section-light
.relationship::before,
.section-white
.relationship::before,
.section-light
.roadmap-stage::before,
.section-white
.roadmap-stage::before {

    background:

        radial-gradient(
            350px circle
            at var(--mouse-x,50%)
            var(--mouse-y,50%),

            rgba(0,0,0,.05),

            transparent 46%
        );

}


.characteristic:hover::before,
.why-card:hover::before,
.concept-card:hover::before,
.timeline-content:hover::before,
.relationship:hover::before,
.roadmap-stage:hover::before,
.continue-card:hover::before {

    opacity: 1;

}


/* light */

.section-light .characteristic,
.section-light .why-card,
.section-light .concept-card,
.section-light .timeline-content,
.section-light .relationship,
.section-light .roadmap-stage,

.section-white .characteristic,
.section-white .why-card,
.section-white .concept-card,
.section-white .timeline-content,
.section-white .relationship,
.section-white .roadmap-stage {

    border-color:
        rgba(20,20,20,.13);

    background:
        rgba(255,255,255,.94);

}


/* dark */

.section-dark .characteristic,
.section-dark .why-card,
.section-dark .concept-card,
.section-dark .timeline-content,
.section-dark .relationship,
.section-dark .roadmap-stage,

.section-black .characteristic,
.section-black .why-card,
.section-black .concept-card,
.section-black .timeline-content,
.section-black .relationship,
.section-black .roadmap-stage {

    border-color:
        rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.035);

}


.characteristic:hover,
.why-card:hover,
.concept-card:hover,
.continue-card:hover,
.timeline-content:hover,
.relationship:hover,
.roadmap-stage:hover {

    transform:
        translateY(-6px);

}


.section-light
.characteristic:hover,

.section-light
.why-card:hover,

.section-light
.concept-card:hover,

.section-light
.timeline-content:hover,

.section-light
.relationship:hover,

.section-light
.roadmap-stage:hover,

.section-white
.characteristic:hover,

.section-white
.why-card:hover,

.section-white
.concept-card:hover,

.section-white
.timeline-content:hover,

.section-white
.relationship:hover,

.section-white
.roadmap-stage:hover {

    border-color:
        rgba(20,20,20,.34);

    box-shadow:
        var(--theory-shadow);

}


.section-dark
.characteristic:hover,

.section-dark
.why-card:hover,

.section-dark
.concept-card:hover,

.section-dark
.timeline-content:hover,

.section-dark
.relationship:hover,

.section-dark
.roadmap-stage:hover,

.section-black
.characteristic:hover,

.section-black
.why-card:hover,

.section-black
.concept-card:hover,

.section-black
.timeline-content:hover,

.section-black
.relationship:hover,

.section-black
.roadmap-stage:hover {

    border-color:
        rgba(255,255,255,.3);

}


/* =========================================================
   CHARACTERISTICS + WHY GRID
========================================================= */

.characteristics,
.why-grid,
.concept-grid,
.continue-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

    margin-top: 65px;

}


.characteristic {

    min-height: 280px;

}


.characteristic i,
.why-card i {

    font-size: 1.4rem;

    transition:
        transform .35s ease;

}


.characteristic:hover i,
.why-card:hover i {

    transform:
        scale(1.12)
        rotate(-5deg);

}


.characteristic h3,
.why-card h3,
.concept-card h3,
.timeline-content h3,
.principle h3,
.relationship h3,
.roadmap-stage h3,
.continue-card h3 {

    margin:
        38px 0 10px;

    font:
        700 1.35rem
        var(--display-font);

}


.characteristic p,
.why-card p,
.concept-card p,
.timeline-content p,
.principle p,
.relationship p,
.roadmap-stage p,
.continue-card p {

    color: inherit;

    opacity: .62;

    font-size: .88rem;

}


/* =========================================================
   FIVE DIMENSIONS TIMELINE
========================================================= */

.timeline {

    position: relative;

    max-width: 900px;

    padding-left: 2px;

}


.timeline::before {

    content: "";

    position: absolute;

    left: 18px;
    top: 0;

    width: 1px;
    height: 100%;

    background:
        currentColor;

    opacity: .15;

}


.timeline-progress {

    position: absolute;

    z-index: 2;

    left: 18px;
    top: 0;

    width: 1px;
    height: 0;

    background:
        currentColor;

    opacity: .65;

    pointer-events: none;

}


.timeline-item {

    position: relative;

    z-index: 3;

    display: flex;

    align-items:
        flex-start;

    margin-bottom: 34px;

}


.timeline-dot {

    position: relative;

    z-index: 4;

    width: 38px;
    height: 38px;

    flex:
        0 0 auto;

    margin-right: 24px;

    border-radius: 50%;

    border:
        5px solid #ffffff;

    box-shadow:
        0 0 0 1px
        rgba(0,0,0,.12);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.timeline-item:hover
.timeline-dot {

    transform:
        scale(1.18);

}


/* These colors remain because they belong to
   the five actual DPT dimensions */

.red {
    background: #ff3b24;
}

.yellow {
    background: #ffd54d;
}

.green {
    background: #3cff76;
}

.blue {
    background: #49a4ff;
}

.purple {
    background: #b168ff;
}


.timeline-content {

    flex: 1;

}


.timeline-item:hover
.timeline-content {

    transform:
        translateX(5px);

}


.dimension-number {

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;

    opacity: .5;

}


/* =========================================================
   CONCEPT DIAGRAM
========================================================= */

.concept-diagram {

    position: relative;

    max-width: 700px;

    min-height: 410px;

    padding:
        20px 0;

}


.top-box,
.left-box,
.right-box,
.bottom-box {

    position: relative;

    z-index: 4;

    padding: 24px;

    text-align: center;

    border:
        1px solid currentColor;

    cursor: pointer;

    transition:

        transform .3s ease,
        color .3s ease,
        background .3s ease,
        opacity .3s ease;

}


.top-box,
.bottom-box {

    width: 240px;

    margin: auto;

}


.middle-row {

    display: flex;

    justify-content:
        space-between;

    margin:
        55px 0;

}


.left-box,
.right-box {

    width: 240px;

}


.top-box:hover,
.left-box:hover,
.right-box:hover,
.bottom-box:hover,
.concept-box-active {

    color: #111111;

    background: #ffffff;

    transform:
        translateY(-5px);

}


.concept-line {

    position: absolute;

    z-index: 1;

    height: 1px;

    background:
        currentColor;

    opacity: .14;

    transform-origin:
        left center;

    transition:
        opacity .3s ease;

}


.concept-line.active {

    opacity: .65;

}


/* =========================================================
   PRINCIPLES
========================================================= */

.principles-list {

    max-width: 1000px;

}


.principle {

    position: relative;

    display: grid;

    grid-template-columns:
        80px 1fr;

    gap: 30px;

    padding:
        34px 0;

    border-bottom:
        1px solid currentColor;

    cursor: pointer;

    transition:

        padding-left .3s ease,
        opacity .3s ease;

}


.principle:hover {

    padding-left: 12px;

}


.principle-number {

    font:
        700 2rem
        var(--display-font);

    opacity: .35;

    transition:

        opacity .3s ease,
        transform .3s ease;

}


.principle:hover
.principle-number {

    opacity: 1;

    transform:
        translateX(4px);

}


.principle h3 {

    margin-top: 0;

}


.principle p {

    max-width: 730px;

}


/* =========================================================
   RELATIONSHIPS
========================================================= */

.relationship {

    margin-bottom: 16px;

    cursor: pointer;

}


.relationship h3 {

    margin-top: 0;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

}


.relationship h3::after {

    content: "+";

    opacity: .45;

    font:
        400 1.5rem
        var(--display-font);

    transition:
        transform .3s ease,
        opacity .3s ease;

}


.relationship.active h3::after {

    transform:
        rotate(45deg);

    opacity: 1;

}


.relationship p {

    max-height: 0;

    margin: 0;

    overflow: hidden;

    opacity: 0;

    transition:

        max-height .45s ease,
        margin .3s ease,
        opacity .3s ease;

}


.relationship.active p {

    max-height: 180px;

    margin-top: 13px;

    opacity: .62;

}


/* =========================================================
   BUTTONS
========================================================= */

.math-button,
.continue-buttons {

    margin-top: 55px;

    text-align: center;

}


.math-button a,
.continue-buttons a {

    min-height: 48px;

    padding:
        0 22px;

    display: inline-flex;

    align-items: center;

    color: #111111;

    background: #ffffff;

    border:
        1px solid #ffffff;

    border-radius: 5px;

    font-weight: 800;

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease;

}


.math-button a:hover,
.continue-buttons a:hover {

    transform:
        translateY(-3px);

    color: #ffffff;

    background: transparent;

}


.section-white
.math-button a,

.section-light
.math-button a {

    color: #ffffff;

    background: #111111;

    border-color: #111111;

}


.section-white
.math-button a:hover,

.section-light
.math-button a:hover {

    color: #111111;

    background: transparent;

}


/* =========================================================
   ROADMAP
========================================================= */

.roadmap-line {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(5,1fr);

    gap: 14px;

}


/* line behind cards */

.roadmap-line::before {

    content: "";

    position: absolute;

    left: 5%;
    right: 5%;

    top: 29px;

    z-index: 0;

    height: 1px;

    background:
        rgba(0,0,0,.12);

}


.roadmap-stage {

    position: relative;

    z-index: 2;

    min-height: 300px;

    text-align: center;

}


.circle {

    width: 58px;
    height: 58px;

    margin:
        0 auto 20px;

    display: grid;

    place-items: center;

    border:
        1px solid currentColor;

    border-radius: 50%;

    background:
        inherit;

    transition:

        transform .3s ease,
        background .3s ease,
        color .3s ease;

}


.roadmap-stage:hover
.circle {

    transform:
        scale(1.09);

}


.completed .circle {

    color: #111111;

    background: #ffffff;

}


.section-white
.completed .circle,

.section-light
.completed .circle {

    color: #ffffff;

    background: #111111;

}


.current {

    border-width: 2px;

}


.current .circle {

    box-shadow:
        0 0 0 6px
        rgba(0,0,0,.05);

}


.future {

    opacity: .63;

}


.future:hover {

    opacity: 1;

}


/* =========================================================
   CONTINUE
========================================================= */

.continue-card {

    min-height: 310px;

    color: #ffffff;

    border:
        1px solid
        rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.035);

}


.continue-card h3 {

    margin-top: 0;

}


.continue-card > span {

    display: block;

    margin-bottom: 25px;

    color:
        rgba(255,255,255,.42);

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;

}


.continue-card a {

    display: inline-block;

    margin-top: 20px;

    color: #ffffff;

    font-size: .76rem;

    font-weight: 800;

    transition:
        transform .25s ease,
        opacity .25s ease;

}


.continue-card a:hover {

    transform:
        translateX(5px);

}


.continue-links {

    margin-top: 55px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

}


.continue-links a {

    padding:
        11px 17px;

    color: #ffffff;

    border:
        1px solid
        rgba(255,255,255,.16);

    font-size: .72rem;

    font-weight: 700;

    transition:
        background .25s ease,
        transform .25s ease;

}


.continue-links a:hover {

    transform:
        translateY(-3px);

    background:
        rgba(255,255,255,.07);

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.theory-reveal {

    opacity: 0;

    transform:
        translateY(22px);

    transition:

        opacity .7s ease,
        transform .7s ease;

}


.theory-reveal.theory-visible {

    opacity: 1;

    transform: none;

}


/* =========================================================
   PAGE PROGRESS
========================================================= */

.theory-progress {

    position: fixed;

    top: 0;
    right: 0;

    z-index: 1600;

    width: 3px;
    height: 0;

    pointer-events: none;

    background:
        rgba(255,255,255,.8);

    mix-blend-mode:
        difference;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .overview-grid {

        grid-template-columns:
            1fr;

    }


    .characteristics,
    .why-grid,
    .concept-grid,
    .continue-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .roadmap-line {

        grid-template-columns:
            1fr 1fr;

    }


    .roadmap-line::before {

        display: none;

    }


    .content-section::after {

        display: none;

    }

}


@media (max-width: 600px) {

    .theory-hero {

        padding-top: 125px;

    }


    .characteristics,
    .why-grid,
    .concept-grid,
    .continue-grid,
    .roadmap-line {

        grid-template-columns:
            1fr;

    }


    .middle-row {

        flex-direction: column;

        gap: 14px;

        margin:
            14px 0;

    }


    .left-box,
    .right-box,
    .top-box,
    .bottom-box {

        width: 100%;

    }


    .principle {

        grid-template-columns:
            55px 1fr;

        gap: 15px;

    }


    .timeline-content {

        padding: 22px;

    }


    .dpt-orbit.three {

        width: 330px;
        height: 330px;

    }


    .dpt-orbit.two {

        width: 240px;
        height: 240px;

    }


    .dpt-node {

        min-width: 67px;

        padding:
            7px 8px;

        font-size: .58rem;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media
(prefers-reduced-motion: reduce) {

    .theory-reveal {

        opacity: 1;

        transform: none;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;

    }

}