:root {

                --midnight: #020814;

                --navy: #06122b;

                --navy2: #0a1f49;

                --royal: #2459c7;

                --electric: #72c7ff;

                --ice: #d9f5ff;

                --gold: #f3cf78;

                --rose: #ff6b8a;

                --violet: #8a6dff;

                --paper: #f8f7f2;

                --paper2: #eff5fb;

                --ink: #06122b;

                --muted: #66758b;

                --line: rgba(139, 201, 255, .28);

                --glass: rgba(255, 255, 255, .10);

                --shadow: 0 30px 100px rgba(3, 10, 32, .18);

}

 

* {

                box-sizing: border-box

}

 

html {

                scroll-behavior: smooth

}

 

body {

                margin: 0;

                font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;

                background:

                                radial-gradient(circle at 30% -10%, #eaf7ff 0, #f8f7f2 34%, #f6f4ee 100%);

                color: #101827;

                line-height: 1.65;

 

                overflow-x: hidden;

 

                position: relative;

                z-index: 0;

}

 

/* GRID OVERLAY */

body::after {

                z-index: 0;

                opacity: 0.25;

}

 

/* CONTENT ABOVE BACKGROUND */

.site-header,

.hero,

.section,

.page-hero,

.site-footer {

                position: relative;

                z-index: 2;

}

 

@keyframes aurora {

                from {

                                transform: translate3d(-2%, 1%, 0) rotate(0deg) scale(1)

                }

 

                to {

                                transform: translate3d(2%, -1%, 0) rotate(6deg) scale(1.08)

                }

}

 

a {

                color: inherit

}

 

.site-header {

                position: sticky;

                top: 0;

                z-index: 1000;

                display: flex;

                align-items: center;

                justify-content: space-between;

                padding: 18px 6vw;

                background: linear-gradient(90deg, rgba(2, 8, 20, .86), rgba(8, 22, 51, .76));

                backdrop-filter: blur(22px) saturate(145%);

                -webkit-backdrop-filter: blur(22px) saturate(145%);

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

                color: white;

                box-shadow: 0 15px 55px rgba(2, 8, 20, .35)

}

 

.site-header:before {

                content: "";

                position: absolute;

                inset: auto 0 -1px;

                height: 1px;

                background: linear-gradient(90deg, transparent, var(--electric), var(--gold), transparent);

                opacity: .8

}

 

.brand {

                position: relative;

                display: flex;

                align-items: center;

                gap: 18px;

                text-decoration: none;

                font-weight: 950;

                letter-spacing: -.02em

}

 

.brand span:last-child {

                filter: drop-shadow(0 0 18px rgba(114, 199, 255, .22))

}

 

.mark {

                display: grid;

                width: 112px;

                height: 61px;

                background: linear-gradient(135deg, #668fd0, #4d78bd);

                border: 2px solid white;

                box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 0 6px rgba(114, 199, 255, .05);

                text-align: center;

                place-items: center;

                transition: transform .35s ease, box-shadow .35s ease

}

 

.brand:hover .mark {

                transform: perspective(500px) rotateY(-10deg) translateY(-2px);

                box-shadow: 0 18px 60px rgba(114, 199, 255, .25), 0 0 0 6px rgba(114, 199, 255, .08)

}

 

.mark b {

                font-family: Libre Baskerville, Georgia, serif;

                font-size: 37px;

                line-height: .9;

                text-shadow: 0 2px 12px rgba(0, 0, 0, .2)

}

 

.mark small {

                font-family: Libre Baskerville, Georgia, serif;

                font-size: 9px;

                display: block;

                background: #333;

                width: 100%;

                padding: 1px

}

 

nav {

                display: flex;

                gap: 7px;

                font-weight: 900;

                align-items: center

}

 

nav a {

                position: relative;

                text-decoration: none;

                color: #eaf4ff;

                opacity: .86;

                padding: 12px 15px;

                border-radius: 999px;

                transition: .25s ease

}

 

nav a:before {

                content: "";

                position: absolute;

                inset: 0;

                border-radius: inherit;

                background: linear-gradient(135deg, rgba(114, 199, 255, .22), rgba(243, 207, 120, .14));

                opacity: 0;

                transform: scale(.9);

                transition: .25s ease

}

 

nav a:hover:before,

nav a.active:before {

                opacity: 1;

                transform: scale(1)

}

 

nav a.active,

nav a:hover {

                opacity: 1;

                color: white;

                text-shadow: 0 0 18px rgba(114, 199, 255, .6)

}

 

nav a {

                z-index: 1

}

 

.menu-toggle {

                display: none

}

 

.hero {

                position: relative;

                min-height: 92vh;

                padding: 7vw;

                display: grid;

                grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr);

                gap: 7vw;

                align-items: center;

                color: white;

 

                background:

                                linear-gradient(rgba(2, 8, 20, .72), rgba(2, 8, 20, .82));

 

                overflow: hidden;

                isolation: isolate;

}

 

.hero::after {

                content: "";

                position: absolute;

                inset: 0;

                z-index: -1;

                background:

                                radial-gradient(circle at 72% 40%, rgba(36,89,199,.45), transparent 35%),

                                linear-gradient(135deg, #020814 0%, #06122b 45%, #102e62 100%);

                opacity: 1;

}

 

.hero:before {

                content: "";

                position: absolute;

                inset: 0;

                background: conic-gradient(from 220deg at 72% 46%, transparent 0 15%, rgba(114, 199, 255, .16) 19%, transparent 27%, rgba(243, 207, 120, .12) 35%, transparent 50%);

                mix-blend-mode: screen;

                animation: spinGlow 18s linear infinite

}

 

 

.blueprint {

                position: absolute;

                inset: 0;

                background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px), radial-gradient(circle at 22% 34%, rgba(114, 199, 255, .18), transparent 16%);

                background-size: 64px 64px, 64px 64px, 100% 100%;

                opacity: .46;

                mask-image: linear-gradient(to bottom, black, black 70%, transparent)

}

 

.blueprint:before,

.blueprint:after {

                content: "";

                position: absolute;

                border: 2px solid rgba(114, 199, 255, .16);

                border-radius: 50%;

                width: 46vw;

                height: 46vw;

                right: 12vw;

                top: 18%;

                animation: float 12s ease-in-out infinite

}

 

.blueprint:after {

                width: 28vw;

                height: 28vw;

                right: 23vw;

                top: 31%;

                animation-delay: -5s

}

 

.hero-copy,

.hero-panel {

                position: relative

}

 

.eyebrow {

                text-transform: uppercase;

                letter-spacing: .08em;

                color: #a7e1ff;

                font-weight: 1000;

                font-size: clamp(.72rem, 1.25vw, 1.05rem);

                text-shadow: 0 0 20px rgba(114, 199, 255, .55);

                white-space: nowrap;

}

 

.hero h1 {

                font-family: Libre Baskerville, Georgia, serif;

                font-size: clamp(2.4rem, 3.5vw, 3.7rem);

                line-height: .88;

                margin: .11em 0;

                letter-spacing: -.075em;

                text-wrap: balance;

                text-shadow: 0 10px 45px rgba(0, 0, 0, .42);

                max-width: 620px;

}

 

.gold-text {

                background: linear-gradient(135deg,

                                                #fff6cc 0%,

                                                #f3cf78 20%,

                                                #ffd86b 40%,

                                                #fff0b2 55%,

                                                #d6a63a 75%,

                                                #fff4c7 100%);

 

                -webkit-background-clip: text;

                -webkit-text-fill-color: transparent;

 

                text-shadow:

                                0 0 18px rgba(243, 207, 120, 0.35),

                                0 0 38px rgba(243, 207, 120, 0.18);

 

                position: relative;

}

 

.hero h1::selection {

                background: var(--gold);

                color: #06122b

}

 

.hero h2 {

                font-size: clamp(1.15rem, 1.9vw, 1.7rem);

                max-width: 800px;

                text-shadow: 0 0 25px rgba(114, 199, 255, .25)

}

 

.hero p {

                max-width: 850px;

                color: #dbeaff;

                font-size: 1.08rem

}

 

.btn {

                position: relative;

                display: inline-flex;

                align-items: center;

                gap: 10px;

                padding: 15px 22px;

                border-radius: 999px;

                text-decoration: none;

                font-weight: 1000;

                margin: 8px 12px 0 0;

                overflow: hidden;

                transition: transform .25s ease, box-shadow .25s ease

}

 

.btn:after {

                content: "";

                position: absolute;

                inset: 0;

                background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .55) 48%, transparent 70%);

                transform: translateX(-120%);

                transition: .65s ease

}

 

.btn:hover:after {

                transform: translateX(120%)

}

 

.btn:hover {

                transform: translateY(-3px)

}

 

.primary {

                background: linear-gradient(135deg, #effbff, #77ccff 52%, #f3cf78);

                color: #07142d;

                box-shadow: 0 18px 45px rgba(114, 199, 255, .30)

}

 

.ghost {

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

                color: white;

                background: rgba(255, 255, 255, .06)

}

 

.hero-panel {

                background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(114, 199, 255, .07));

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

                padding: 36px;

                border-radius: 34px;

                box-shadow: 0 40px 110px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16);

                display: grid;

                gap: 20px;

                transform-style: preserve-3d;

                animation: panelRise .9s ease both

}

 

.hero-panel span,

.hero-panel small {

                letter-spacing: .22em;

                color: #c6d9f1;

                text-transform: uppercase;

                font-weight: 900

}

 

.hero-panel b {

                position: relative;

                padding: 23px;

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

                border-radius: 20px;

                background: linear-gradient(135deg, rgba(6, 27, 63, .9), rgba(9, 23, 50, .78));

                box-shadow: inset 0 0 30px rgba(114, 199, 255, .05);

                overflow: hidden

}

 

.hero-panel b:before {

                content: "";

                display: inline-block;

                width: 12px;

                height: 12px;

                border-radius: 50%;

                background: var(--electric);

                box-shadow: 0 0 28px var(--electric);

                margin-right: 14px

}

 

.hero-panel b:after {

                content: "";

                position: absolute;

                left: -30%;

                top: 0;

                width: 20%;

                height: 100%;

                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);

                transform: skewX(-20deg);

                animation: scan 4s ease-in-out infinite

}

 

.section {

                position: relative;

                padding: 100px 7vw

}

 

.section-head {

                max-width: 980px;

                margin: 0 auto 44px;

                text-align: center

}

 

.section h2,

.page-hero h1 {

                font-size: clamp(2.6rem, 5vw, 5.2rem);

                line-height: .98;

                color: var(--ink);

                margin: .2em 0;

                letter-spacing: -.055em

}

 

.page-hero {

                position: relative;

                overflow: hidden;

 

                min-height: 500px;

 

                display: flex;

                align-items: center;

 

                padding: 130px 7vw 60px;

 

                background:

                radial-gradient(circle at 78% 10%,

                                rgba(114,199,255,.28),

                                transparent 34%),

 

                linear-gradient(

                                120deg,

                                #f8f7f2 0%,

                                #eff7ff 55%,

                                #fff7cf 100%);

}

 

.page-hero::before {

                content: "";

 

                position: absolute;

                inset: 0;

 

                background-image:

                                linear-gradient(rgba(114, 199, 255, .08) 1px, transparent 1px),

                                linear-gradient(90deg, rgba(114, 199, 255, .08) 1px, transparent 1px);

 

                background-size: 48px 48px;

 

                mask-image:

                                linear-gradient(to bottom,

                                                transparent,

                                                black 18%,

                                                black 82%,

                                                transparent);

 

                pointer-events: none;

}

 

.page-hero::after {

                content: "";

 

                position: absolute;

 

                width: 520px;

                height: 520px;

 

                right: -120px;

                top: -120px;

 

                border-radius: 50%;

 

                background:

                                radial-gradient(circle,

                                                rgba(114, 199, 255, .22),

                                                transparent 68%);

 

                filter: blur(8px);

}

 

.page-hero-inner {

                position: relative;

                z-index: 2;

 

                width: 100%;

                max-width: 1400px;

 

                margin: 0 auto;

 

                display: grid;

 

                grid-template-columns: 1.2fr .8fr;

 

                gap: 70px;

 

                align-items: center;

}

 

.page-hero-copy {

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

                backdrop-filter: blur(14px);

                padding: 28px;

                border-radius: 20px;

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

}

 

.page-hero .eyebrow {

                color: #9bdcff;

                font-weight: 900;

                letter-spacing: .35em;

                text-transform: uppercase;

                font-size: clamp(.85rem, 1.5vw, 1.15rem);

                margin-bottom: 26px;

                text-shadow: 0 0 22px rgba(114, 199, 255, .5);

}

 

.page-hero h1 {

                color: #061632;

                font-size: clamp(3rem, 6vw, 6.4rem);

                line-height: .94;

                letter-spacing: -.07em;

                margin: 0;

}

 

.page-hero p {

                max-width: 980px;

                font-size: clamp(1rem, 1.5vw, 1.25rem);

                line-height: 1.7;

                color: #0b1730;

                margin-top: 24px;

}

 

.page-hero:before {

                content: "";

                position: absolute;

                inset: 0;

                background-image: linear-gradient(#0b2a5a0d 1px, transparent 1px), linear-gradient(90deg, #0b2a5a0d 1px, transparent 1px);

                background-size: 44px 44px

}

 

.page-hero:after {

                content: "";

                position: absolute;

                width: 420px;

                height: 420px;

                border-radius: 50%;

                right: -120px;

                top: -120px;

                background: radial-gradient(circle, rgba(114, 199, 255, .32), transparent 65%)

}

 

.page-hero>* {

                position: relative

}

 

.subpage-hero-card {

                position: relative;

                z-index: 3;

                padding: 34px;

                border-radius: 32px;

                background:

                                linear-gradient(145deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .25));

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

                box-shadow:

                                0 30px 90px rgba(8, 24, 50, .18),

                                inset 0 1px 0 rgba(255, 255, 255, .9);

                backdrop-filter: blur(18px);

}

 

.subpage-hero-card::before {

                content: "";

                position: absolute;

                inset: -1px;

                border-radius: inherit;

                padding: 1px;

                background: linear-gradient(135deg, rgba(114, 199, 255, .9), rgba(255, 213, 118, .8), transparent);

                -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

                -webkit-mask-composite: xor;

                mask-composite: exclude;

                pointer-events: none;

}

 

.subpage-hero-card .card-label {

                color: #6b7890;

                font-size: .78rem;

                font-weight: 900;

                letter-spacing: .25em;

                text-transform: uppercase;

                margin-bottom: 22px;

}

 

.subpage-hero-card ul {

                list-style: none;

                padding: 0;

                margin: 0;

                display: grid;

                gap: 14px;

}

 

.subpage-hero-card li {

                display: flex;

                align-items: center;

                gap: 14px;

                padding: 18px 20px;

                border-radius: 18px;

                background: rgba(6, 22, 50, .92);

                color: white;

                font-weight: 850;

                box-shadow: 0 12px 34px rgba(6, 22, 50, .18);

}

 

.subpage-hero-card li::before {

                content: "";

                width: 11px;

                height: 11px;

                border-radius: 50%;

                background: #83d3ff;

                box-shadow: 0 0 22px rgba(114, 199, 255, .85);

}

 

.subpage-hero-card .card-footer {

                margin-top: 22px;

                color: #6b7890;

                font-size: .78rem;

                font-weight: 900;

                letter-spacing: .22em;

                text-transform: uppercase;

}

 

 

.narrow {

                max-width: 1120px;

                margin: auto

}

 

.dark {

                background: radial-gradient(circle at 72% 12%, #173f82, #06122b 42%, #020814);

                color: white

}

 

.dark h2 {

                color: white

}

 

.pill-grid {

                display: grid;

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

                gap: 18px

}

 

.service-pill,

.service-card,

.article-card,

.person-card,

.staff-card,

.honor,

.contact-card,

.profile-side {

                position: relative;

                border: 1px solid rgba(12, 45, 95, .10);

                background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .72));

                backdrop-filter: blur(18px);

                border-radius: 28px;

                padding: 30px;

                text-decoration: none;

                box-shadow: var(--shadow);

                overflow: hidden

}

 

.service-pill:before,

.service-card:before,

.article-card:before,

.person-card:before,

.honor:before,

.contact-card:before,

.profile-side:before {

                content: "";

                position: absolute;

                inset: 0;

                border-radius: inherit;

                padding: 1px;

                background: linear-gradient(135deg, rgba(114, 199, 255, .75), rgba(243, 207, 120, .42), transparent 55%);

                -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

                -webkit-mask-composite: xor;

                mask-composite: exclude;

                pointer-events: none;

                opacity: .6

}

 

.service-pill {

                font-size: 1.18rem;

                font-weight: 1000;

                min-height: 140px;

                display: flex;

                gap: 14px;

                align-items: end;

                transition: .35s ease

}

 

.service-pill:hover {

                transform: translateY(-8px) rotateX(4deg);

                box-shadow: 0 35px 95px rgba(6, 18, 43, .22)

}

 

.service-pill span,

.service-card span {

                color: #397bd6;

                font-weight: 1000

}

 

.service-stack {

                display: grid;

                gap: 26px

}

 

.service-card {

                display: grid;

                grid-template-columns: 86px 280px 1fr auto;

                gap: 28px;

                align-items: center;

                transition: .35s ease

}

 

.service-card h2 {

                font-size: 2rem;

                margin: 0;

                color: var(--ink)

}

 

.service-card a {

                font-weight: 1000;

                color: #356fc8;

                text-decoration: none

}

 

.split {

                display: grid;

                grid-template-columns: 1fr 1fr;

                gap: 56px

}

 

.stat-grid {

                display: grid;

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

                gap: 20px

}

 

.stat-grid div {

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

                padding: 28px;

                border-radius: 26px;

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

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

}

 

.stat-grid strong {

                display: block;

                font-size: 4.5rem;

                line-height: 1;

                color: #fff;

                text-shadow: 0 0 35px rgba(114, 199, 255, .35)

}

 

.team-grid {

                display: grid;

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

                gap: 30px

}

 

.person-card {

                color: var(--ink);

                transition: transform .35s ease, box-shadow .35s ease

}

 

.person-card:hover,

.article-card:hover,

.service-card:hover {

                transform: translateY(-10px);

                box-shadow: 0 40px 100px rgba(6, 18, 43, .22)

}

 

.portrait {

                height: 355px;

                border-radius: 24px;

                background: radial-gradient(circle at 40% 20%, #dff7ff, #4778ae 45%, #06122b 82%);

                display: grid;

                place-items: center;

                color: white;

                font-size: 5rem;

                font-weight: 1000;

                box-shadow: inset 0 0 80px rgba(255, 255, 255, .12);

                position: relative;

                overflow: hidden

}

 

.portrait:after,

.staff-photo:after {

                content: "";

                position: absolute;

                inset: 0;

                background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .22), transparent 60%);

                transform: translateX(-120%);

                animation: photoSheen 7s ease-in-out infinite

}

 

.staff-grid {

                display: grid;

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

                gap: 22px

}

 

.staff-photo {

                height: 190px;

                border-radius: 20px;

                background: linear-gradient(135deg, #d2f3ff, #183b72);

                display: grid;

                place-items: center;

                color: white;

                font-weight: 1000;

                font-size: 2.5rem;

                position: relative;

                overflow: hidden

}

 

.article-grid {

                display: grid;

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

                gap: 30px

}

 

.article-card {

                overflow: hidden;

                padding: 0;

                transition: .35s ease

}

 

.article-card>div {

                padding: 28px

}

 

.article-card h3 {

                font-size: 1.55rem;

                line-height: 1.12;

                color: var(--ink);

                letter-spacing: -.035em

}

 

.article-card a,

.post-nav a {

                font-weight: 1000;

                color: #356fc8;

                text-transform: uppercase;

                text-decoration: none

}

 

.date {

                font-weight: 1000;

                color: #64748b

}

 

.patent-art {

                height: 245px;

                background: radial-gradient(circle at 45% 45%, #eef8ff, #9fd4ff 60%, #173d84);

                position: relative;

                overflow: hidden

}

 

.patent-art:before {

                content: "";

                position: absolute;

                inset: 0;

                background-image: linear-gradient(120deg, transparent 30%, #fff8 31%, transparent 32%), linear-gradient(#07142d22 1px, transparent 1px), linear-gradient(90deg, #07142d22 1px, transparent 1px);

                background-size: 140px 100%, 28px 28px, 28px 28px;

                animation: bgDrift 14s linear infinite

}

 

.art-label {

                position: absolute;

                bottom: 16px;

                left: 18px;

                background: #06122bdd;

                color: #fff;

                padding: 8px 13px;

                border-radius: 999px;

                font-weight: 1000;

                text-transform: uppercase;

                font-size: .75rem;

                letter-spacing: .14em

}

 

.art-line {

                position: absolute;

                height: 6px;

                background: #ff2f4c;

                border-radius: 99px;

                box-shadow: 0 0 30px #ff2f4c

}

 

.art-line.a {

                width: 60%;

                top: 48%;

                left: 20%;

                transform: rotate(-5deg)

}

 

.art-line.b {

                width: 38%;

                top: 55%;

                left: 32%;

                transform: rotate(28deg);

                opacity: .35

}

 

.art-orb {

                position: absolute;

                width: 74px;

                height: 74px;

                border-radius: 50%;

                right: 12%;

                top: 36%;

                background: radial-gradient(circle at 30% 30%, #ffe3a0, #e7bb54 60%, #895617);

                box-shadow: inset 0 0 0 6px #8a591c66, 0 0 45px rgba(243, 207, 120, .45)

}

 

.art-diagram {

                position: absolute;

                left: 12%;

                top: 25%;

                width: 120px;

                height: 90px;

                border: 3px solid #06122b77;

                border-radius: 8px;

                transform: skew(-12deg)

}

 

.article-hero {

                padding: 95px 7vw 24px

}

 

.article-hero h1 {

                font-size: clamp(3rem, 6.5vw, 6.4rem);

                line-height: .96;

                color: var(--ink);

                max-width: 1050px;

                letter-spacing: -.06em

}

 

.article-body {

                position: relative;

                max-width: 1000px;

                font-size: 1.15rem

}

 

.article-body p {

                margin-bottom: 1.45em

}

 

.article-body:before {

                content: "";

                position: absolute;

                left: -34px;

                top: 6px;

                bottom: 0;

                width: 4px;

                background: linear-gradient(var(--electric), var(--gold), transparent);

                border-radius: 999px

}

 

.post-nav {

                display: flex;

                justify-content: space-between;

                border-top: 1px solid #d5dde8;

                margin-top: 48px;

                padding-top: 28px

}

 

.article-side {

                margin-top: 40px;

                padding: 22px;

                border-left: 4px solid #7cbcff;

                color: #64748b;

                background: white;

                border-radius: 0 18px 18px 0

}

 

.resource-tools {

                display: flex;

                gap: 22px;

                align-items: center;

                margin-bottom: 30px

}

 

.resource-tools input,

.article-side input,

.contact-form input,

.contact-form textarea {

                width: 100%;

                padding: 18px 18px;

                border: 1px solid #d7dfeb;

                border-radius: 16px;

                font: inherit;

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

                box-shadow: 0 12px 40px rgba(6, 18, 43, .06)

}

 

.resource-tools input {

                max-width: 300px

}

 

.load {

                margin: 42px auto 0;

                display: block;

                background: linear-gradient(135deg, #06122b, #2459c7);

                color: white;

                border: 0;

                padding: 17px 26px;

                border-radius: 99px;

                font-weight: 1000;

                box-shadow: 0 16px 45px rgba(36, 89, 199, .28)

}

 

.profile-hero {

                position: relative;

                padding: 105px 7vw;

                display: grid;

                grid-template-columns: 340px 1fr;

                gap: 64px;

                align-items: center;

                background: radial-gradient(circle at 75% 25%, #2459c7, #102e62 34%, #06122b 66%, #020814);

                color: white;

                overflow: hidden

}

 

.profile-hero:before {

                content: "";

                position: absolute;

                inset: 0;

                z-index: 0;

 

                background-image:

                                linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),

                                linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);

 

                background-size: 46px 46px;

                opacity: .6;

}

 

.profile-hero>* {

                position: relative;

                z-index: 1;

}

 

.profile-hero h1 {

                font-size: clamp(3.2rem, 7vw, 7.3rem);

                margin: 0;

                font-family: Libre Baskerville, serif;

                letter-spacing: -.07em;

                line-height: .95

}

 

.profile-hero p {

                font-size: 1.15rem;

                color: #dcecff

}

 

.profile-photo {

                width: 100%;

                max-width: 340px;

                height: 420px;

 

                object-fit: cover;

                display: block;

 

                border-radius: 32px;

 

                box-shadow:

                                0 40px 100px rgba(0, 0, 0, .35);

 

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

 

                position: relative;

                z-index: 2;

}

 

.contact-strip {

                display: flex;

                gap: 16px;

                flex-wrap: wrap;

                margin-top: 22px

}

 

.contact-strip>* {

                background: #fff1;

                border: 1px solid var(--line);

                padding: 10px 14px;

                border-radius: 999px;

                text-decoration: none

}

 

.profile-layout {

                display: grid;

                grid-template-columns: 320px 1fr;

                gap: 62px

}

 

.profile-side {

                position: sticky;

                top: 105px;

                height: max-content

}

 

.profile-main h2 {

                font-size: 2.15rem;

                color: var(--ink);

                margin-top: 42px;

                letter-spacing: -.035em

}

 

.profile-main li {

                margin-bottom: 10px

}

 

.honors-grid {

                display: grid;

                gap: 20px;

                max-width: 1020px;

                margin: auto

}

 

.honor {

                display: flex;

                gap: 20px;

                align-items: flex-start;

                font-weight: 850

}

 

.honor span {

                color: #c59c3d;

                font-size: 1.5rem

}

 

.contact-layout {

                display: grid;

                grid-template-columns: 1.15fr .85fr;

                gap: 56px

}

 

.contact-form {

                display: grid;

                gap: 16px

}

 

.contact-form textarea {

                height: 180px

}

 

.map {

                height: 320px;

                border-radius: 28px;

                background: linear-gradient(135deg, #d9f2e9, #9dc5ff);

                display: grid;

                place-items: center;

                text-align: center;

                font-weight: 1000;

                color: #0b3a69;

                margin-top: 26px;

                box-shadow: var(--shadow);

                position: relative;

                overflow: hidden

}

 

.map:before {

                content: "";

                position: absolute;

                inset: 0;

                background-image: radial-gradient(circle at 38% 52%, #ff3d56 0 12px, transparent 13px), linear-gradient(90deg, rgba(11, 58, 105, .12) 1px, transparent 1px), linear-gradient(rgba(11, 58, 105, .12) 1px, transparent 1px);

                background-size: 100% 100%, 46px 46px, 46px 46px

}

 

.map>* {

                position: relative;

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

                padding: 12px 16px;

                border-radius: 999px

}

 

.footer-map-link {

                color: #6882a7;

                text-decoration: none;

                line-height: 1.7;

                display: inline-block;

                transition:

                                color .3s ease,

                                text-shadow .3s ease,

                                transform .3s ease;

}

 

.footer-map-link:hover {

                color: #16496b;

                text-shadow: 0 0 18px rgba(114, 199, 255, .35);

                transform: translateX(2px);

}

 

.map {

                text-decoration: none;

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

}

 

.map:hover {

                transform: translateY(-4px) scale(1.01);

                box-shadow:

                                0 30px 70px rgba(36, 89, 199, .25),

                                0 0 45px rgba(114, 199, 255, .18);

}

 

 

.site-footer {

                position: relative;

                background: radial-gradient(circle at 72% 0, #102b5d, #05070d 44%);

                color: #d5dceb;

                padding: 76px 7vw;

                overflow: hidden

}

 

.site-footer:before {

                content: "";

                position: absolute;

                inset: 0;

                background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);

                background-size: 52px 52px

}

 

.footer-inner {

                position: relative;

                display: grid;

                grid-template-columns: 1.3fr .8fr 1fr 1fr;

                gap: 40px

}

 

.footer-inner a {

                display: block;

                color: #a7b3c5;

                text-decoration: none;

                margin: 8px 0

}

 

.footer-inner a:hover {

                color: #9bd7ff

}

 

.footer-mark {

                font-family: Libre Baskerville, serif;

                font-size: 3.2rem;

                color: white;

                letter-spacing: -.06em

}

 

.muted {

                color: #8b97a7

}

 

.mobile-call {

                display: none

}

 

.sitemap-list {

                font-size: 1.2rem;

                columns: 2

}

 

.reveal {

                opacity: 0;

                transform: translateY(28px) scale(.985);

                transition: .9s cubic-bezier(.2, .8, .2, 1)

}

 

.reveal.visible {

                opacity: 1;

                transform: none

}

 

.rkm-cursor {

                position: fixed;

                width: 34px;

                height: 34px;

                border: 1px solid rgba(114, 199, 255, .65);

                border-radius: 50%;

                pointer-events: none;

                z-index: 5000;

                mix-blend-mode: difference;

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

                transition: width .2s, height .2s, border-color .2s

}

 

.rkm-cursor.hot {

                width: 58px;

                height: 58px;

                border-color: rgba(243, 207, 120, .8)

}

 

@keyframes spinGlow {

                to {

                                transform: rotate(360deg)

                }

}

 

@keyframes float {

 

                0%,

                100% {

                                transform: translateY(0) rotate(0)

                }

 

                50% {

                                transform: translateY(-22px) rotate(4deg)

                }

}

 

@keyframes panelRise {

                from {

                                opacity: 0;

                                transform: translateY(30px) rotateX(12deg)

                }

 

                to {

                                opacity: 1;

                                transform: none

                }

}

 

@keyframes scan {

 

                0%,

                60% {

                                left: -30%

                }

 

                100% {

                                left: 120%

                }

}

 

@keyframes photoSheen {

 

                0%,

                55% {

                                transform: translateX(-120%)

                }

 

                75% {

                                transform: translateX(120%)

                }

 

                100% {

                                transform: translateX(120%)

                }

}

 

@keyframes bgDrift {

                to {

                                background-position: 140px 0, 28px 28px, 28px 28px

                }

}

 

@media(max-width:1000px) {

                .site-header {

                                padding: 14px 18px

                }

 

                .eyebrow {

                font-size: clamp(.58rem, 2.2vw, .82rem);

                letter-spacing: .045em;

                white-space: nowrap;

}

 

                .brand span:last-child {

                                display: none

                }

 

                nav {

                                position: fixed;

                                inset: 86px 16px auto 16px;

                                background: #06122bf2;

                                border: 1px solid var(--line);

                                border-radius: 24px;

                                padding: 20px;

                                display: none;

                                flex-direction: column;

                                box-shadow: 0 30px 90px rgba(0, 0, 0, .45)

                }

 

                .menu-open nav {

                                display: flex

                }

 

                .menu-toggle {

                                display: grid;

                                gap: 5px;

                                background: transparent;

                                border: 0

                }

 

                .menu-toggle span {

                                display: block;

                                width: 24px;

                                height: 2px;

                                background: white

                }

 

                .hero,

                .split,

                .profile-hero,

                .profile-layout,

                .contact-layout {

                                grid-template-columns: 1fr

                }

 

                .hero {

                                padding: 110px 22px 64px

                }

 

                .section,

                .page-hero,

                .article-hero {

                                padding-left: 22px;

                                padding-right: 22px

                }

 

                .pill-grid,

                .team-grid,

                .staff-grid,

                .article-grid,

                .footer-inner {

                                grid-template-columns: 1fr

                }

 

                .service-card {

                                grid-template-columns: 1fr

                }

 

                .profile-side {

                                position: static

                }

 

                .mobile-call {

                                display: block;

                                position: fixed;

                                bottom: 14px;

                                left: 14px;

                                right: 14px;

                                z-index: 1000;

                                background: linear-gradient(135deg, #e8fbff, #7ec9ff, #f3cf78);

                                color: #06122b;

                                text-align: center;

                                padding: 15px;

                                border-radius: 999px;

                                text-decoration: none;

                                font-weight: 1000;

                                box-shadow: 0 18px 45px rgba(6, 18, 43, .28)

                }

 

                .hero h1 {

                                font-size: 3.35rem

                }

 

                .sitemap-list {

                                columns: 1

                }

 

                .article-body:before {

                                display: none

                }

 

                .rkm-cursor {

                                display: none

                }

 

                .resource-tools {

                                display: block

                }

 

                .resource-tools input {

                                max-width: none;

                                margin-top: 12px

                }

}

 

.premium-section {

                position: relative;

                padding: 90px 7vw;

}

 

.premium-card {

                position: relative;

                display: grid;

                grid-template-columns: 120px 1fr auto;

                gap: 34px;

                align-items: center;

                padding: 44px;

                margin-bottom: 34px;

                border-radius: 34px;

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

                border: 1px solid rgba(11, 23, 48, .08);

                box-shadow: 0 28px 80px rgba(8, 24, 50, .12);

                overflow: hidden;

}

 

.premium-card::after {

                content: "";

                position: absolute;

                width: 220px;

                height: 220px;

                right: -80px;

                top: -80px;

                background: radial-gradient(circle, rgba(114, 199, 255, .28), transparent 70%);

}

 

.premium-number {

                color: #7ccfff;

                font-weight: 1000;

                font-size: 1.2rem;

                letter-spacing: .12em;

}

 

.premium-card h2 {

                margin: 0 0 12px;

                color: #061632;

                font-size: clamp(1.8rem, 3vw, 3.2rem);

                letter-spacing: -.055em;

}

 

.premium-card p {

                margin: 0;

                color: #14213d;

                line-height: 1.75;

                font-size: 1.05rem;

}

 

.premium-link {

                position: relative;

                z-index: 2;

                color: #2b78d4;

                font-weight: 900;

                text-decoration: none;

                white-space: nowrap;

}

 

@media (max-width: 950px) {

                .page-hero {

                                padding: 110px 6vw 70px;

                }

 

                .page-hero-inner {

                                grid-template-columns: 1fr;

                                gap: 40px;

                }

 

                .subpage-hero-card {

                                max-width: 100%;

                }

 

                .premium-card {

                                grid-template-columns: 1fr;

                                gap: 20px;

                }

 

                .premium-link {

                                white-space: normal;

                }

}

 

/* =========================

   PREMIUM SERVICE EXPANSIONS

========================= */

 

.service-expanded {

                grid-column: 1 / -1;

                margin-top: 1.8rem;

}

 

.service-expanded summary {

                position: relative;

                cursor: pointer;

                display: inline-flex;

                align-items: center;

                gap: .75rem;

 

                padding: 1rem 1.5rem;

                border-radius: 999px;

 

                background:

                                linear-gradient(135deg,

                                                #06122b,

                                                #163d82 52%,

                                                #2459c7);

 

                color: white;

                font-weight: 1000;

                letter-spacing: .02em;

 

                list-style: none;

                overflow: hidden;

 

                border: 1px solid rgba(114, 199, 255, .18);

 

                box-shadow:

                                0 18px 40px rgba(36, 89, 199, .22),

                                inset 0 1px 0 rgba(255, 255, 255, .08);

 

                transition:

                                transform .3s ease,

                                box-shadow .3s ease,

                                background .3s ease;

}

 

.service-expanded summary::-webkit-details-marker {

                display: none;

}

 

.service-expanded summary::before {

                content: "";

 

                position: absolute;

                inset: 0;

 

                background:

                                linear-gradient(120deg,

                                                transparent 20%,

                                                rgba(255, 255, 255, .16) 48%,

                                                transparent 72%);

 

                transform: translateX(-130%);

                transition: transform .8s ease;

}

 

.service-expanded summary:hover::before {

                transform: translateX(130%);

}

 

.service-expanded summary:hover {

                transform: translateY(-2px);

 

                box-shadow:

                                0 26px 60px rgba(36, 89, 199, .32),

                                0 0 35px rgba(114, 199, 255, .18);

}

 

.service-expanded summary::after {

                content: "+";

                font-size: 1.25rem;

                font-weight: 700;

                margin-left: .25rem;

}

 

.service-expanded[open] summary::after {

                content: "–";

}

 

.service-expanded-content {

                position: relative;

 

                margin-top: 1.6rem;

                padding: 2.4rem;

 

                border-radius: 30px;

 

                background:

                                linear-gradient(180deg,

                                                rgba(255, 255, 255, .94),

                                                rgba(247, 251, 255, .88));

 

                border: 1px solid rgba(11, 23, 48, .08);

 

                backdrop-filter: blur(20px);

 

                box-shadow:

                                0 28px 80px rgba(8, 24, 50, .12),

                                inset 0 1px 0 rgba(255, 255, 255, .92);

 

                overflow: hidden;

}

 

.service-expanded-content::before {

                content: "";

 

                position: absolute;

                top: -120px;

                right: -120px;

 

                width: 280px;

                height: 280px;

 

                border-radius: 50%;

 

                background:

                                radial-gradient(circle,

                                                rgba(114, 199, 255, .18),

                                                transparent 70%);

}

 

.service-expanded-content p {

                position: relative;

                z-index: 2;

 

                margin-top: 0;

                margin-bottom: 1.4rem;

 

                color: #10213f;

                line-height: 1.82;

                font-size: 1.03rem;

}

 

.service-expanded-content ul {

                position: relative;

                z-index: 2;

 

                columns: 2;

                column-gap: 3rem;

 

                padding-left: 1.2rem;

                margin-top: 2rem;

}

 

.service-expanded-content li {

                margin-bottom: .85rem;

                color: #10213f;

                break-inside: avoid;

}

 

.service-expanded-content h3 {

                position: relative;

                z-index: 2;

 

                margin-top: 2.3rem;

                margin-bottom: .85rem;

 

                color: #06122b;

 

                font-size: 1.45rem;

                letter-spacing: -.03em;

}

 

.service-expanded-content h3::after {

                content: "";

 

                display: block;

 

                width: 64px;

                height: 3px;

 

                margin-top: .65rem;

 

                border-radius: 999px;

 

                background:

                                linear-gradient(90deg,

                                                #72c7ff,

                                                #f3cf78);

}

 

/* Smooth open animation */

 

.service-expanded[open] .service-expanded-content {

                animation: serviceReveal .45s ease;

}

 

@keyframes serviceReveal {

                from {

                                opacity: 0;

                                transform: translateY(10px) scale(.985);

                }

 

                to {

                                opacity: 1;

                                transform: none;

                }

}

 

/* Mobile */

 

@media (max-width: 850px) {

 

                .service-expanded-content {

                                padding: 1.7rem;

                }

 

                .service-expanded-content ul {

                                columns: 1;

                }

 

                .service-expanded summary {

                                width: 100%;

                                justify-content: center;

                }

 

}

 

/* SERVICES PAGE ONLY */

 

body.services-page .page-hero {

                background:

                                linear-gradient(rgba(2, 8, 20, .62), rgba(2, 8, 20, .72)),

                                url(https://www.rkmiplaw.com/wp-content/uploads/2021/08/homepage-header-3.jpg)

                                50% center / cover no-repeat !important;

}

 

body.services-page .page-hero h1,

body.services-page .page-hero p,

body.services-page .page-hero .eyebrow {

                color: white !important;

}

 

body.services-page .page-hero-copy {

    max-width: 550px;

    min-height: 340px;

 

    display: flex;

    flex-direction: column;

    justify-content: center;

 

    padding: 60px;

 

    backdrop-filter: blur(20px);

}

 

body.services-page .page-hero h1 {

                font-size: 2.5rem !important;

                line-height: 1.05;

                max-width: 900px;

}

 

/* ONE-BOX SERVICES HERO */

 

body.services-page .subpage-hero-card {

                display: none;

}

 

body.services-page .page-hero-inner {

                grid-template-columns: 620px 1fr;

}

 

body.services-page .page-hero-copy {

                max-width: 500px;

    min-height: 450px;

 

    margin-left: -40px;

 

    padding: 60px;

}

 

body.services-page .page-hero h1 {

                font-size: 4rem;

                line-height: .95;

                max-width: 900px;

}

 

body.services-page .page-hero-copy::after {

                content: "Patents. Trademarks. Copyrights. Trade Secrets. USPTO Trial Practice.";

                display: block;

                margin-top: 28px;

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

                font-size: 1.15rem;

                line-height: 1.6;

                font-weight: 700;

}

 

/* TEAM PAGE ONLY */

 

body.team-page .page-hero {

                background:

                                linear-gradient(rgba(2, 8, 20, .62), rgba(2, 8, 20, .72)),

                                url(https://www.rkmiplaw.com/wp-content/uploads/2021/08/homepage-header-4.jpg)

                                center center / cover no-repeat !important;

}

 

body.team-page .page-hero h1,

body.team-page .page-hero p,

body.team-page .page-hero .eyebrow {

                color: white !important;

}

 

body.team-page .subpage-hero-card {

                display: none;

}

 

body.team-page .page-hero-inner {

                grid-template-columns: 620px 1fr;

}

 

body.team-page .page-hero-copy {

                max-width: 500px;

                min-height: 450px;

                margin-left: -40px;

                padding: 60px;

                backdrop-filter: blur(20px);

}

 

body.team-page .page-hero h1 {

                font-size: 4rem;

                line-height: .95;

                max-width: 520px;

}

 

 

 

body:not(.services-page):not(.team-page) .subpage-hero-card {

 

                background:

                                linear-gradient(

                                                145deg,

                                                rgba(6,18,43,.92),

                                                rgba(10,31,73,.88)

                                );

 

                border: 1px solid rgba(114,199,255,.18);

 

                box-shadow:

                                0 30px 90px rgba(2,8,20,.35);

 

                color: white;

}

 

body:not(.services-page):not(.team-page) .subpage-hero-card .card-label,

body:not(.services-page):not(.team-page) .subpage-hero-card .card-footer {

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

}

 

body:not(.services-page):not(.team-page) .subpage-hero-card .card-footer {

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

}

 

/* PREMIUM LEFT HERO BOXES */

 

.page-hero-copy {

                border: 1px solid rgba(232,189,87,.35);

 

                box-shadow:

                                0 25px 60px rgba(0,0,0,.18),

                                0 0 0 1px rgba(232,189,87,.15),

                                0 0 40px rgba(232,189,87,.08);

 

                position: relative;

}

 

/* Gold corner accents */

.page-hero-copy {

                border: 1px solid rgba(232,189,87,.35);

 

                box-shadow:

                                0 25px 60px rgba(0,0,0,.18),

                                0 0 0 1px rgba(232,189,87,.15),

                                0 0 40px rgba(232,189,87,.08);

}

 

/* ==========================================

   GOLD FEATURE CARDS

   RESOURCES / HONORS / CONTACT ONLY

========================================== */

 

body.resources-page .page-hero-copy,

body.honors-page .page-hero-copy,

body.contact-page .page-hero-copy {

 

                border: 1px solid rgba(232,189,87,.45);

 

                box-shadow:

                                0 0 0 1px rgba(232,189,87,.15),

                                0 20px 60px rgba(0,0,0,.12),

                                0 0 40px rgba(232,189,87,.12);

 

                position: relative;

 

                overflow: hidden;

}

 

/* animated gold glow strip */

 

body.resources-page .page-hero-copy::before,

body.honors-page .page-hero-copy::before,

body.contact-page .page-hero-copy::before {

 

                content: "";

 

                position: absolute;

 

                top: 0;

                left: 0;

 

                width: 100%;

                height: 4px;

 

                background:

                                linear-gradient(

                                                90deg,

                                                transparent,

                                                rgba(232,189,87,.9),

                                                transparent

                                );

}

 

/* CLEANER HOME PAGE HERO */

 

.home-page .hero {

                grid-template-columns: 1fr;

                min-height: 84vh;

                padding: 9vw 7vw 7vw;

}

 

.home-page .hero-copy {

                max-width: 920px;

}

 

.home-page .hero-panel {

                display: none;

}

 

.home-page .hero h1 {

                font-size: clamp(4rem, 6.2vw, 6.8rem);

                line-height: .88;

                max-width: 900px;

}

 

.home-page .hero h2 {

                font-size: clamp(1.25rem, 1.9vw, 1.75rem);

                max-width: 780px;

}

 

.home-page .hero p {

                max-width: 760px;

                font-size: 1.05rem;

}

 

/* HOME FIRM BRIEF CARD */

 

.home-page .hero {

                grid-template-columns: minmax(0, 1.1fr) 470px;

                gap: 6vw;

}

 

.home-page .hero-copy {

                max-width: 860px;

}

 

.home-page .hero-panel.firm-brief {

                display: block;

                max-width: 470px;

                padding: 38px;

}

 

.home-page .hero-panel.firm-brief p {

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

                font-size: 1rem;

                line-height: 1.75;

                margin: 0 0 18px;

}

 

.home-page .hero-panel.firm-brief small {

                display: block;

                margin-top: 22px;

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

}

/* FINAL MOBILE FIXES */

@media (max-width: 850px) {

	.home-page .hero {
		display: block !important;
		min-height: auto !important;
		padding: 70px 24px 110px !important;
	}

	.home-page .hero-panel,
	.home-page .hero-panel.firm-brief {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		overflow: hidden !important;
	}

	.home-page .hero-copy {
		max-width: 100% !important;
	}

	.home-page .eyebrow {
		font-size: .72rem !important;
		letter-spacing: .04em !important;
		white-space: normal !important;
	}

	.home-page .hero h1 {
		font-size: clamp(2.9rem, 14vw, 4.1rem) !important;
		line-height: .9 !important;
		max-width: 100% !important;
		letter-spacing: -.055em !important;
	}

	.home-page .hero-actions {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin-top: 28px;
	}

	.home-page .btn {
		width: 100%;
		justify-content: center;
		margin: 0;
	}

	.stat-grid {
		grid-template-columns: 1fr !important;
		gap: 18px;
	}

	.stat-grid div {
		width: 100%;
		padding: 28px 22px;
	}

	.stat-grid strong {
		font-size: clamp(3.5rem, 18vw, 5.2rem);
	}

	.dark,
	.section,
	.hero {
		overflow-x: hidden;
	}
}

/* DESKTOP SUBPAGE HERO TIGHTENING */

@media (min-width: 901px) {

	body.resources-page .page-hero,
	body.honors-page .page-hero,
	body.contact-page .page-hero {
		min-height: 500px;
		padding-top: 85px;
		padding-bottom: 55px;
	}

	body.resources-page .page-hero-copy,
	body.honors-page .page-hero-copy,
	body.contact-page .page-hero-copy,
	body.resources-page .subpage-hero-card,
	body.honors-page .subpage-hero-card,
	body.contact-page .subpage-hero-card {
		transform: translateY(-25px);
	}
}

/* GOLD TRANSITION DIVIDER */

.page-transition {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;

	padding: 26px 7vw 10px;

	background: linear-gradient(
		180deg,
		#f8f7f2 0%,
		#ffffff 100%
	);
}

.page-transition span {
	height: 1px;
	width: min(180px, 22vw);

	background: linear-gradient(
		90deg,
		transparent,
		rgba(232,189,87,.9),
		transparent
	);
}

.page-transition p {
	margin: 0;
	color: #0a1f49;
	font-size: .78rem;
	font-weight: 900;
	letter-spacing: .22em;
	text-transform: uppercase;
}

/* POLISHED SUBPAGE HERO CARDS */

body.resources-page .page-hero-copy,
body.honors-page .page-hero-copy,
body.contact-page .page-hero-copy {
	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.88),
			rgba(226,238,255,.78)
		) !important;

	border: 1px solid rgba(102,143,208,.38) !important;

	box-shadow:
		0 28px 75px rgba(6,18,43,.14),
		0 0 0 1px rgba(255,255,255,.55) inset !important;

	color: #06122b !important;
}

body.resources-page .subpage-hero-card,
body.honors-page .subpage-hero-card,
body.contact-page .subpage-hero-card {
	background:
		linear-gradient(
			145deg,
			#183472 0%,
			#8e9eb9 58%,
			#668fd0 140%
		) !important;

	border: 1px solid rgba(243,207,120,.28) !important;

	box-shadow:
		0 30px 85px rgba(6,18,43,.28),
		inset 0 1px 0 rgba(255,255,255,.12) !important;

	color: white !important;
}

body.resources-page .page-hero h1,
body.honors-page .page-hero h1,
body.contact-page .page-hero h1,
body.resources-page .page-hero p,
body.honors-page .page-hero p,
body.contact-page .page-hero p {
	color: #0a142a !important;
}

body.resources-page .page-hero .eyebrow,
body.honors-page .page-hero .eyebrow,
body.contact-page .page-hero .eyebrow {
	color: #668fd0 !important;
}

body.resources-page .subpage-hero-card .card-label,
body.honors-page .subpage-hero-card .card-label,
body.contact-page .subpage-hero-card .card-label,
body.resources-page .subpage-hero-card .card-footer,
body.honors-page .subpage-hero-card .card-footer,
body.contact-page .subpage-hero-card .card-footer {
	color: rgba(255,255,255,.78) !important;
}

body.resources-page .subpage-hero-card li,
body.honors-page .subpage-hero-card li,
body.contact-page .subpage-hero-card li {
	background: rgba(2,8,20,.48) !important;
	color: white !important;
}

.cookie-banner {
position: fixed;
bottom: 24px;
left: 24px;
width: 420px;
z-index: 9999;

background: rgba(8,18,40,.95);

border: 1px solid rgba(243,207,120,.35);

border-radius: 18px;

padding: 24px;

box-shadow:
0 20px 50px rgba(0,0,0,.35);

color: white;
}

.cookie-content p {
margin: 0 0 16px 0;
line-height: 1.6;
}

.cookie-buttons {
display: flex;
gap: 12px;
align-items: center;
}

.cookie-buttons a {
color: #9fd4ff;
text-decoration: none;
}

.cookie-buttons button {
border: none;
cursor: pointer;

padding: 10px 20px;

border-radius: 999px;

background: linear-gradient(
90deg,
#9fd4ff,
#f3cf78
);

font-weight: 700;
}