/* =========================================================
   ARG PATHWAY PAGE - NEW FULL STYLESHEET
   Drop this in /maze/style.css or replace the pathway-page part.
   Uses your existing PHP markup/classes.
========================================================= */

/* =========================
   PATHWAY COLOR SYSTEM
========================= */

.pathway-belief-ritual{
    --path-color:#9b7cff;
    --path-color-soft:#c4b3ff;
    --path-glow:rgba(155,124,255,.48);
    --path-glow-strong:rgba(155,124,255,.72);
    --path-bg:#0e0a18;
    --path-bg-2:#171026;
    --path-accent-dark:#24173a;
}

.pathway-confidence-conviction{
    --path-color:#ff7a4d;
    --path-color-soft:#ffc1a8;
    --path-glow:rgba(255,122,77,.46);
    --path-glow-strong:rgba(255,122,77,.72);
    --path-bg:#170b07;
    --path-bg-2:#261007;
    --path-accent-dark:#37170b;
}

.pathway-creation-expression{
    --path-color:#ff4faa;
    --path-color-soft:#ffb3dc;
    --path-glow:rgba(255,79,170,.46);
    --path-glow-strong:rgba(255,79,170,.72);
    --path-bg:#170711;
    --path-bg-2:#280b1d;
    --path-accent-dark:#3a102a;
}

.pathway-curiosity-compassion{
    --path-color:#4ff0cc;
    --path-color-soft:#b5fff0;
    --path-glow:rgba(79,240,204,.42);
    --path-glow-strong:rgba(79,240,204,.68);
    --path-bg:#061513;
    --path-bg-2:#09231f;
    --path-accent-dark:#10362f;
}

.pathway-freedom-pleasure{
    --path-color:#ffbb52;
    --path-color-soft:#ffe0a8;
    --path-glow:rgba(255,187,82,.42);
    --path-glow-strong:rgba(255,187,82,.68);
    --path-bg:#161006;
    --path-bg-2:#251907;
    --path-accent-dark:#36240c;
}

.pathway-logic-philosophy{
    --path-color:#63bdff;
    --path-color-soft:#b9e2ff;
    --path-glow:rgba(99,189,255,.42);
    --path-glow-strong:rgba(99,189,255,.68);
    --path-bg:#06111a;
    --path-bg-2:#0a1b29;
    --path-accent-dark:#102b41;
}

.pathway-love-romance{
    --path-color:#ff5f94;
    --path-color-soft:#ffc0d3;
    --path-glow:rgba(255,95,148,.45);
    --path-glow-strong:rgba(255,95,148,.72);
    --path-bg:#18070e;
    --path-bg-2:#260a15;
    --path-accent-dark:#3a1020;
}

.pathway-order-justice{
    --path-color:#f2f2f2;
    --path-color-soft:#ffffff;
    --path-glow:rgba(242,242,242,.28);
    --path-glow-strong:rgba(242,242,242,.46);
    --path-bg:#090909;
    --path-bg-2:#151515;
    --path-accent-dark:#252525;
}

.pathway-science-nature{
    --path-color:#82ff7f;
    --path-color-soft:#caffc8;
    --path-glow:rgba(130,255,127,.38);
    --path-glow-strong:rgba(130,255,127,.62);
    --path-bg:#071407;
    --path-bg-2:#0d220c;
    --path-accent-dark:#153515;
}

.pathway-technology-communication{
    --path-color:#00fff7;
    --path-color-soft:#a7fffb;
    --path-glow:rgba(0,255,247,.45);
    --path-glow-strong:rgba(0,255,247,.75);
    --path-bg:#041415;
    --path-bg-2:#072527;
    --path-accent-dark:#0b393b;
}

.pathway-war-survival{
    --path-color:#ff4040;
    --path-color-soft:#ffadad;
    --path-glow:rgba(255,64,64,.45);
    --path-glow-strong:rgba(255,64,64,.72);
    --path-bg:#170606;
    --path-bg-2:#280909;
    --path-accent-dark:#3a1010;
}

.pathway-wisdom-knowledge{
    --path-color:#dcc87d;
    --path-color-soft:#fff0b7;
    --path-glow:rgba(220,200,125,.38);
    --path-glow-strong:rgba(220,200,125,.62);
    --path-bg:#151006;
    --path-bg-2:#211909;
    --path-accent-dark:#33270f;
}

/* =========================
   GLOBAL BASE
========================= */

:root{
    --page-max:1440px;
    --radius-xl:34px;
    --radius-lg:24px;
    --radius-md:18px;
    --text-main:rgba(255,255,255,.92);
    --text-soft:rgba(255,255,255,.72);
    --text-faint:rgba(255,255,255,.48);
    --line-soft:rgba(255,255,255,.13);
    --panel-dark:rgba(0,0,0,.54);
    --panel-darker:rgba(0,0,0,.72);
    --glass:rgba(255,255,255,.045);
    --glass-2:rgba(255,255,255,.075);
    --shadow-deep:0 28px 80px rgba(0,0,0,.62);
    --font-xs:clamp(.76rem, .75vw, .84rem);
    --font-sm:clamp(.9rem, .9vw, 1rem);
    --font-md:clamp(1rem, 1vw, 1.12rem);
    --font-lg:clamp(1.35rem, 1.8vw, 2rem);
    --font-xl:clamp(2.4rem, 6vw, 6.25rem);
}

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
    background:#030303;
}

body{
    margin:0;
    min-height:100vh;
    background:#030303;
    color:var(--text-main);
    font-family:"VCRMONO", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size:var(--font-md);
    line-height:1.75;
    letter-spacing:.015em;
    text-align:center;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
}

::selection{
    background:var(--path-color);
    color:#050505;
}

/* =========================
   PAGE ATMOSPHERE
========================= */

.pathway-page{
    min-height:100vh;
    isolation:isolate;
    position:relative;
    padding:clamp(1rem, 3vw, 3rem);
    background:
        radial-gradient(circle at 50% -8%, var(--path-glow), transparent 34rem),
        radial-gradient(circle at 0% 18%, rgba(255,255,255,.055), transparent 24rem),
        radial-gradient(circle at 100% 24%, var(--path-glow), transparent 28rem),
        linear-gradient(180deg, var(--path-bg), #030303 68%, #010101);
}

.pathway-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size:54px 54px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.82), transparent 88%);
    opacity:.24;
}

.pathway-page::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.035),
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 4px
        );
    opacity:.075;
    mix-blend-mode:screen;
}

.pathway-container{
    width:min(var(--page-max), 100%);
    margin:0 auto;
    position:relative;
}

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

.pathway-hero{
    position:relative;
    overflow:hidden;
    padding:clamp(1.1rem, 3vw, 2.8rem);
    border:1px solid var(--line-soft);
    border-radius:var(--radius-xl);
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.022) 34%, rgba(0,0,0,.55)),
        linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.68));
    box-shadow:
        var(--shadow-deep),
        0 0 46px var(--path-glow),
        inset 0 0 0 1px rgba(255,255,255,.045);
    backdrop-filter:blur(16px);
}

.pathway-hero::before{
    content:"// SIGNAL FOUND";
    position:absolute;
    top:1rem;
    left:1.2rem;
    z-index:3;
    font-family:"Pixellari", monospace;
    font-size:var(--font-xs);
    letter-spacing:.24em;
    color:var(--path-color);
    opacity:.66;
    text-shadow:0 0 15px var(--path-glow);
}

.pathway-hero::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
        linear-gradient(100deg, transparent 0%, rgba(255,255,255,.075) 45%, transparent 60%);
    transform:translateX(-120%);
    animation:heroSweep 9s ease-in-out infinite;
    opacity:.55;
}

@keyframes heroSweep{
    0%, 35%{ transform:translateX(-120%); }
    62%, 100%{ transform:translateX(120%); }
}

.pathway-hero > img{
    width:100%;
    height:clamp(260px, 42vw, 520px);
    object-fit:cover;
    object-position:center;
    border-radius:calc(var(--radius-xl) - 10px);
    border:1px solid rgba(255,255,255,.16);
    margin:0 0 clamp(1.5rem, 3vw, 2.4rem);
    filter:saturate(1.06) contrast(1.08) brightness(.84);
    box-shadow:
        0 0 38px rgba(0,0,0,.7),
        0 0 35px var(--path-glow),
        inset 0 0 20px rgba(255,255,255,.06);
}

.pathway-hero h1{
    position:relative;
    z-index:2;
    max-width:1100px;
    margin:0 auto;
    color:var(--path-color);
    font-family:"MadHacker", "NeonRave", monospace;
    font-size:var(--font-xl);
    line-height:.88;
    letter-spacing:.05em;
    text-transform:uppercase;
    text-wrap:balance;
    text-shadow:
        0 0 7px rgba(255,255,255,.2),
        0 0 18px var(--path-glow),
        0 0 46px var(--path-glow-strong);
}

.pathway-hero h1::before,
.pathway-hero h1::after{
    content:"";
    display:block;
    width:min(520px, 72vw);
    height:1px;
    margin:.35em auto;
    background:linear-gradient(90deg, transparent, var(--path-color), transparent);
    box-shadow:0 0 18px var(--path-glow);
    opacity:.8;
}

/* =========================
   INTRO PANEL
========================= */

.short-intro{
    position:relative;
    z-index:2;
    max-width:1040px;
    margin:clamp(1.3rem, 3vw, 2rem) auto 0;
    padding:clamp(1.2rem, 3vw, 2.25rem);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius-lg);
    background:
        radial-gradient(circle at top left, var(--path-glow), transparent 24rem),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.026)),
        rgba(0,0,0,.38);
    box-shadow:
        0 20px 50px rgba(0,0,0,.42),
        inset 0 0 30px rgba(255,255,255,.035);
    backdrop-filter:blur(12px);
}

.short-intro::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.04) 18px 19px),
        linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
    transform:translateX(-100%);
    animation:introScan 7.5s linear infinite;
    opacity:.45;
}

@keyframes introScan{
    from{ transform:translateX(-100%); }
    to{ transform:translateX(100%); }
}

.intro-quote{
    position:relative;
    z-index:2;
    margin:0 auto clamp(1.25rem, 3vw, 2rem);
    max-width:920px;
    color:#fff;
    font-family:"Phrygia", Georgia, serif;
    font-size:clamp(1.45rem, 3vw, 2.6rem);
    line-height:1.5;
    letter-spacing:.025em;
    text-shadow:
        0 0 16px rgba(255,255,255,.12),
        0 0 28px var(--path-glow);
    text-wrap:balance;
}

.intro-quote::before,
.intro-quote::after{
    color:var(--path-color);
    opacity:.8;
    text-shadow:0 0 18px var(--path-glow);
}

.intro-quote::before{ content:"“"; }
.intro-quote::after{ content:"”"; }

.intro-description{
    position:relative;
    z-index:2;
    max-width:820px;
    margin:0 auto;
    color:var(--path-color-soft);
    font-size:clamp(.92rem, 1.1vw, 1.08rem);
    line-height:1.9;
    letter-spacing:.065em;
    text-transform:uppercase;
    opacity:.9;
}

.intro-description::before{
    content:"[ PATHWAY ANALYSIS ]";
    display:block;
    margin:0 0 .9rem;
    color:var(--text-faint);
    font-family:"Pixellari", monospace;
    font-size:var(--font-xs);
    letter-spacing:.24em;
}

/* =========================
   HEADER IMAGE GRID
========================= */

.door-hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:.85fr 1.3fr .85fr;
    align-items:center;
    gap:clamp(.75rem, 2vw, 1.2rem);
    margin:clamp(1.2rem, 3vw, 2rem) auto;
}

.door-hero-grid img{
    width:100%;
    height:clamp(190px, 25vw, 390px);
    object-fit:cover;
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius-md);
    box-shadow:
        0 0 26px rgba(0,0,0,.62),
        0 0 26px var(--path-glow);
    filter:saturate(1.08) contrast(1.08) brightness(.9);
    transition:transform .3s ease, opacity .3s ease, filter .3s ease;
}

.door-hero-grid img:nth-child(1),
.door-hero-grid img:nth-child(3){
    opacity:.52;
    transform:scale(.92);
    filter:grayscale(.28) saturate(.8) contrast(1.05) brightness(.75);
}

.door-hero-grid img:nth-child(2){
    opacity:1;
    transform:scale(1.02);
}

.door-hero-grid img:hover{
    opacity:1;
    transform:scale(1.045);
    filter:saturate(1.15) contrast(1.1) brightness(.94);
}

/* =========================
   META PILLS
========================= */

.pathway-meta{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:.8rem;
    margin:clamp(1.3rem, 3vw, 2rem) auto 0;
}

.pathway-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:.72rem 1rem .66rem;
    border:1px solid color-mix(in srgb, var(--path-color) 72%, white 8%);
    border-radius:999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
        rgba(0,0,0,.34);
    color:var(--path-color);
    font-family:"Pixellari", monospace;
    font-size:var(--font-xs);
    line-height:1;
    letter-spacing:.15em;
    text-transform:uppercase;
    box-shadow:
        0 0 16px rgba(0,0,0,.38),
        0 0 16px var(--path-glow),
        inset 0 0 14px rgba(255,255,255,.035);
}

/* =========================
   DESCRIPTION PANEL
========================= */

.pathway-description-panel{
    position:relative;
    overflow:hidden;
    max-width:1180px;
    margin:clamp(1.4rem, 3vw, 2.2rem) auto 0;
    padding:clamp(1.3rem, 3vw, 2.5rem);
    border:1px solid rgba(255,255,255,.14);
    border-left:4px solid var(--path-color);
    border-radius:var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 48%, rgba(0,0,0,.5)),
        radial-gradient(circle at 12% 0%, var(--path-glow), transparent 22rem);
    box-shadow:
        0 22px 60px rgba(0,0,0,.46),
        0 0 32px rgba(0,0,0,.25),
        inset 0 0 26px rgba(255,255,255,.035);
    text-align:left;
}

.pathway-description-panel::before{
    content:"ARCHIVE // PRIMARY FILE";
    display:block;
    margin-bottom:.65rem;
    color:var(--text-faint);
    font-family:"Pixellari", monospace;
    font-size:var(--font-xs);
    letter-spacing:.22em;
}

.pathway-description-panel h2{
    margin:0 0 1rem;
    color:var(--path-color);
    font-family:"NeonRave", "MadHacker", monospace;
    font-size:clamp(1.55rem, 2.4vw, 2.5rem);
    line-height:1.05;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-shadow:0 0 18px var(--path-glow);
}

.pathway-description-panel p{
    margin:0;
    color:var(--text-main);
    font-size:clamp(1rem, 1.16vw, 1.18rem);
    line-height:1.95;
    text-wrap:pretty;
}

/* =========================
   CONTENT GRID + BOXES
========================= */

.pathway-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(1rem, 2vw, 1.5rem);
    margin:clamp(1.4rem, 3vw, 2.2rem) auto 0;
}

.pathway-box{
    position:relative;
    overflow:hidden;
    min-height:100%;
    padding:clamp(1.15rem, 2.4vw, 1.75rem);
    border:1px solid rgba(255,255,255,.13);
    border-radius:var(--radius-lg);
    background:
        linear-gradient(145deg, rgba(255,255,255,.062), rgba(255,255,255,.022) 42%, rgba(0,0,0,.45)),
        rgba(0,0,0,.36);
    box-shadow:
        0 20px 44px rgba(0,0,0,.34),
        inset 0 0 20px rgba(255,255,255,.028);
    text-align:left;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.pathway-box::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:linear-gradient(180deg, transparent, var(--path-color), transparent);
    opacity:.75;
    box-shadow:0 0 18px var(--path-glow);
}

.pathway-box::after{
    content:"";
    position:absolute;
    top:-40%;
    right:-20%;
    width:220px;
    height:220px;
    border-radius:50%;
    background:var(--path-glow);
    filter:blur(36px);
    opacity:.12;
    pointer-events:none;
}

.pathway-box:hover{
    transform:translateY(-5px);
    border-color:color-mix(in srgb, var(--path-color) 62%, white 12%);
    box-shadow:
        0 25px 58px rgba(0,0,0,.48),
        0 0 28px var(--path-glow),
        inset 0 0 24px rgba(255,255,255,.04);
    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.026) 44%, rgba(0,0,0,.5)),
        rgba(0,0,0,.4);
}

.pathway-box h2{
    position:relative;
    z-index:2;
    margin:0 0 .95rem;
    color:var(--path-color);
    font-family:"NeonRave", "Pixellari", monospace;
    font-size:clamp(1.1rem, 1.45vw, 1.65rem);
    line-height:1.15;
    letter-spacing:.13em;
    text-transform:uppercase;
    text-shadow:0 0 14px var(--path-glow);
}

.pathway-box h2::before{
    content:"< ";
    color:var(--text-faint);
    font-family:"Pixellari", monospace;
}

.pathway-box h2::after{
    content:" />";
    color:var(--text-faint);
    font-family:"Pixellari", monospace;
}

.pathway-box p{
    position:relative;
    z-index:2;
    margin:0;
    color:var(--text-soft);
    font-size:clamp(.96rem, 1vw, 1.08rem);
    line-height:1.82;
    text-wrap:pretty;
}

/* Make relationship/unlocks style readable despite plain text line breaks */
.pathway-box p br{
    line-height:2.1;
}

/* =========================
   NOTABLE FIGURES
========================= */

.notable-figures-box{
    max-width:1180px;
    margin:clamp(1.2rem, 2.6vw, 2rem) auto clamp(1.4rem, 3vw, 2.2rem);
    text-align:center;
}

.figure-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:clamp(.8rem, 1.8vw, 1.15rem);
    margin-top:1.2rem;
}

.figure-card{
    position:relative;
    overflow:hidden;
    padding:.85rem;
    border:1px solid rgba(255,255,255,.13);
    border-radius:var(--radius-md);
    background:
        linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02)),
        rgba(0,0,0,.42);
    box-shadow:
        0 18px 34px rgba(0,0,0,.34),
        inset 0 0 16px rgba(255,255,255,.028);
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.figure-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, transparent, var(--path-glow), transparent);
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
}

.figure-card:hover{
    transform:translateY(-5px) scale(1.015);
    border-color:var(--path-color);
    box-shadow:
        0 24px 46px rgba(0,0,0,.48),
        0 0 28px var(--path-glow);
}

.figure-card:hover::after{
    opacity:.14;
}

.figure-card img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border:1px solid rgba(255,255,255,.14);
    border-radius:calc(var(--radius-md) - 6px);
    margin:0 0 .8rem;
    filter:grayscale(.12) contrast(1.08) brightness(.9) saturate(1.03);
}

.figure-card span{
    position:relative;
    z-index:2;
    display:block;
    color:var(--path-color-soft);
    font-family:"Pixellari", monospace;
    font-size:clamp(.82rem, .9vw, .98rem);
    line-height:1.25;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-shadow:0 0 12px var(--path-glow);
}

/* =========================
   LOCK FORM + BUTTON
========================= */

.lock-form{
    margin:clamp(1.5rem, 4vw, 3.2rem) auto 0;
    padding:clamp(1rem, 2.5vw, 1.8rem);
    text-align:center;
}

.lock-btn{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    border:1px solid color-mix(in srgb, var(--path-color) 78%, white 10%);
    border-radius:999px;
    padding:1rem clamp(1.5rem, 5vw, 3rem);
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.28), transparent 1.8rem),
        linear-gradient(135deg, var(--path-color), var(--path-accent-dark) 58%, #050505);
    color:#fff;
    font-family:"PixelDigivolve", "Pixellari", monospace;
    font-size:clamp(.95rem, 1.2vw, 1.22rem);
    line-height:1;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:
        0 0 34px var(--path-glow),
        0 22px 50px rgba(0,0,0,.48),
        inset 0 0 20px rgba(255,255,255,.12);
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.lock-btn::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transform:translateX(-110%);
    transition:transform .45s ease;
}

.lock-btn::after{
    content:" ▸";
    color:rgba(255,255,255,.9);
}

.lock-btn:hover,
.lock-btn:focus-visible{
    transform:translateY(-4px);
    filter:saturate(1.08) brightness(1.08);
    box-shadow:
        0 0 48px var(--path-glow-strong),
        0 26px 62px rgba(0,0,0,.56),
        inset 0 0 24px rgba(255,255,255,.16);
}

.lock-btn:hover::before,
.lock-btn:focus-visible::before{
    transform:translateX(110%);
}

.lock-btn:focus-visible,
.back-link:focus-visible{
    outline:2px solid var(--path-color);
    outline-offset:5px;
}

.back-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:1.2rem;
    color:var(--path-color-soft);
    font-family:"8thCargo", "Pixellari", monospace;
    font-size:clamp(1rem, 1.4vw, 1.35rem);
    letter-spacing:.08em;
    text-decoration:none;
    opacity:.78;
    text-shadow:0 0 14px var(--path-glow);
    transition:opacity .2s ease, color .2s ease, transform .2s ease;
}

.back-link::before{
    content:"← ";
    color:var(--path-color);
    margin-right: .5rem !important;
}

.back-link:hover{
    opacity:1;
    color:#fff;
    transform:translateY(-2px);
}

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

@media(max-width:1100px){
    .pathway-grid{
        gap:1rem;
    }

    .figure-grid{
        grid-template-columns:repeat(auto-fit, minmax(135px, 1fr));
    }
}

@media(max-width:900px){
    .pathway-page{
        padding:1rem;
    }

    .pathway-hero::before{
        position:relative;
        display:block;
        top:auto;
        left:auto;
        margin:0 0 1rem;
    }

    .pathway-grid{
        grid-template-columns:1fr;
    }

    .door-hero-grid{
        grid-template-columns:1fr;
    }

    .door-hero-grid img,
    .door-hero-grid img:nth-child(1),
    .door-hero-grid img:nth-child(2),
    .door-hero-grid img:nth-child(3){
        height:auto;
        max-height:420px;
        opacity:1;
        transform:none;
    }

    .pathway-description-panel,
    .pathway-box{
        text-align:center;
    }
}

@media(max-width:560px){
    body{
        line-height:1.65;
    }

    .pathway-hero{
        border-radius:24px;
    }

    .pathway-hero > img{
        height:220px;
        border-radius:18px;
    }

    .short-intro,
    .pathway-description-panel,
    .pathway-box{
        border-radius:20px;
    }

    .pathway-hero h1{
        letter-spacing:.025em;
    }

    .intro-quote{
        line-height:1.42;
    }

    .intro-description{
        letter-spacing:.04em;
        text-transform:none;
    }

    .figure-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .lock-btn{
        width:100%;
        padding:1rem 1.15rem;
        letter-spacing:.09em;
    }
}

@media(max-width:380px){
    .figure-grid{
        grid-template-columns:1fr;
    }
}

/* =========================
   REDUCED MOTION
========================= */

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.001ms !important;
    }
}