/* DITRP public homepage. Styles are isolated from the admin and legacy pages. */
:root {
    --navy:#142c3a;
    --deep:#102531;
    --gold:#efc475;
    --muted:#aebfc8;
    --ink:#19303d;
    --paper:#faf9f6
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:25px
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit;
    text-decoration:none
}
a:focus-visible {
    outline:3px solid #bf8430;
    outline-offset:6px
}
a,img {
    -webkit-tap-highlight-color:transparent
}
.shell {
    width:min(1280px,calc(100% - 96px));
    margin-inline:auto
}
.topbar {
    background:var(--deep);
    color:#d1dde2;
    font-size:12px
}
.topbar-inner {
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.topbar-inner>span {
    display:flex;
    align-items:center;
    gap:9px
}
.topbar a span {
    margin-left:12px
}
.status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    background:var(--gold);
    border-radius:50%
}
.site-header {
    background:#fff
}
.header-inner {
    min-height:104px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}
.brand img {
    width:174px;
    height:auto;
    display:block
}
nav {
    display:flex;
    align-items:center;
    gap:42px
}
.nav-contact {
    font-size:11px;
    color:#62727c
}
.nav-contact span {
    display:block;
    margin-top:6px;
    font-size:14px;
    font-weight:700;
    color:var(--ink)
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    min-height:49px;
    padding:15px 23px;
    border-radius:5px;
    font-size:13px;
    font-weight:700;
    transition:background .2s,transform .2s
}
.button:hover {
    transform:translateY(-2px)
}
.button-dark {
    background:var(--navy);
    color:#fff
}
.button-dark:hover {
    background:#264859
}
.button span,.text-link span {
    font-size:19px
}
.hero {
    background:var(--navy);
    color:#fff;
    overflow:hidden;
    position:relative
}
.hero:before {
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    border:1px solid #ffffff07;
    border-radius:50%;
    right:-270px;
    top:-200px;
    box-shadow:0 0 0 95px #ffffff02,0 0 0 190px #ffffff02;
    pointer-events:none
}
.hero-grid {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:65px;
    align-items:center;
    padding-block:76px 72px;
    position:relative
}
.eyebrow {
    font-size:10px;
    font-weight:700;
    letter-spacing:1.8px;
    line-height:1.7;
    margin:0 0 22px
}
.hero .eyebrow {
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:10px
}
.hero .eyebrow>span {
    height:1px;
    width:24px;
    background:var(--gold)
}
h1 {
    font-size:clamp(42px,4.5vw,66px);
    letter-spacing:-2.8px;
    line-height:1.08;
    margin:0 0 24px;
    font-weight:700
}
h1 em {
    font-family:Georgia,'Times New Roman',serif;
    color:var(--gold);
    font-weight:400;
    letter-spacing:-2px
}
.intro {
    font-size:15px;
    line-height:1.85;
    color:#c5d1d7;
    max-width:425px;
    margin:0 0 30px
}
.hero-actions {
    display:flex;
    align-items:center;
    gap:25px;
    flex-wrap:wrap
}
.button-gold {
    background:var(--gold);
    color:var(--deep)
}
.button-gold:hover {
    background:#ffda96
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:18px;
    font-size:12px;
    font-weight:700
}
.text-link:hover {
    text-decoration:underline;
    text-underline-offset:5px
}
.hero-note {
    display:flex;
    gap:13px;
    align-items:center;
    margin-top:38px
}
.note-icon {
    font-size:30px;
    color:var(--gold)
}
.hero-note p {
    font-size:11px;
    line-height:1.7;
    color:var(--muted);
    margin:0
}
.hero-note strong {
    font-weight:400;
    color:#e4eaee
}
.hero-visual {
    margin:0;
    border:1px solid #ffffff26;
    border-radius:10px;
    overflow:hidden;
    background:#1b3543;
    box-shadow:0 24px 60px #071a282e;
    transform:rotate(-1deg)
}
.photo-label {
    font-size:9px;
    font-weight:700;
    letter-spacing:1.7px;
    padding:20px 23px;
    display:flex;
    gap:9px;
    align-items:center
}
.hero-visual>img {
    width:100%;
    height:auto;
    aspect-ratio:1200/650;
    object-fit:cover;
    display:block
}
.hero-visual figcaption {
    padding:25px 27px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.caption-label {
    font-size:9px;
    letter-spacing:1.6px;
    color:var(--gold)
}
.hero-visual h2 {
    font-family:Georgia,'Times New Roman',serif;
    font-size:29px;
    font-weight:400;
    line-height:1.2;
    margin:10px 0 0;
    letter-spacing:-.4px
}
.award-mark {
    font-size:78px;
    line-height:1;
    color:var(--gold)
}
.photo-bottom {
    display:flex;
    justify-content:space-between;
    gap:12px;
    border-top:1px solid #ffffff12;
    padding:15px 27px;
    font-size:9px;
    color:#b7c9d2
}
.photo-bottom>span:last-child {
    letter-spacing:1.5px;
    color:var(--gold)
}
.network {
    display:grid;
    grid-template-columns:1.15fr 1fr 1fr 1fr;
    padding-block:52px;
    gap:28px
}
.network .eyebrow {
    color:#8b6631;
    font-size:9px;
    margin-bottom:12px
}
.network h2 {
    font-size:25px;
    letter-spacing:-.7px;
    line-height:1.3;
    margin:0
}
.feature {
    border-left:1px solid #dedfda;
    padding-left:25px
}
.feature-number {
    font-size:9px;
    font-weight:700;
    letter-spacing:1.5px;
    color:#777c79
}
.feature h3 {
    font-size:16px;
    line-height:1.4;
    margin:17px 0 10px
}
.feature p {
    font-size:12px;
    line-height:1.8;
    color:#647179;
    margin:0
}
.contact-strip {
    border-top:1px solid #dedfda;
    padding-block:26px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px
}
.contact-strip>div {
    display:flex;
    align-items:center;
    gap:19px
}
.contact-star {
    color:#9b783f;
    font-size:37px
}
.contact-strip p {
    font-size:12px;
    color:#647179;
    line-height:1.8;
    margin:0
}
.contact-strip strong {
    display:block;
    color:var(--ink);
    font-size:16px
}
.site-footer {
    background:#f0f0eb;
    border-top:1px solid #e4e5df
}
.footer-inner {
    min-height:69px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    font-size:10px;
    color:#62717a
}
.footer-inner p {
    margin:0
}
.footer-inner>a {
    font-weight:700;
    color:var(--ink)
}
.skip-link {
    position:absolute;
    top:-100px;
    left:20px;
    background:#fff;
    padding:15px;
    z-index:10
}
.skip-link:focus {
    top:10px
}
@media(min-width:1600px) {
    .hero-grid {
    padding-block:90px
}
.hero-visual>img {
    aspect-ratio:1200/700
}

}
@media(max-width:1100px) {
    .shell {
    width:calc(100% - 64px)
}
.hero-grid {
    gap:35px;
    padding-block:60px
}
h1 {
    font-size:49px
}
.hero-actions {
    gap:20px
}
.hero-visual h2 {
    font-size:25px
}
.network {
    gap:20px
}
.feature {
    padding-left:18px
}
.network h2 {
    font-size:22px
}

}
@media(max-width:800px) {
    .hero-grid {
    grid-template-columns:1fr;
    gap:40px
}
.hero-copy {
    max-width:600px
}
h1 {
    font-size:58px
}
.intro {
    max-width:500px
}
.hero-note {
    margin-top:25px
}
.hero-visual {
    transform:none;
    max-width:650px
}
.hero-visual>img {
    aspect-ratio:1200/539
}
.network {
    grid-template-columns:1fr 1fr;
    gap:30px
}
.network-heading {
    align-self:center
}
.footer-inner>span {
    display:none
}

}
@media(max-width:480px) {
    .shell {
    width:calc(100% - 36px)
}
.topbar-inner {
    font-size:10px;
    min-height:34px
}
.topbar a {
    font-size:9px
}
.topbar a span {
    display:none
}
.header-inner {
    min-height:85px;
    gap:14px
}
.brand img {
    width:132px
}
.nav-contact {
    display:none
}
nav {
    gap:0
}
.button {
    gap:18px;
    padding:13px 17px;
    font-size:12px;
    min-height:46px
}
.hero-grid {
    padding-block:43px
}
.eyebrow {
    font-size:8px;
    letter-spacing:1.3px
}
h1 {
    font-size:46px;
    letter-spacing:-2px
}
.intro {
    font-size:14px
}
.hero-actions {
    gap:23px
}
.photo-label {
    font-size:8px;
    padding:17px;
    letter-spacing:1px
}
.hero-visual figcaption {
    padding:22px 18px
}
.hero-visual h2 {
    font-size:24px
}
.caption-label {
    font-size:8px
}
.award-mark {
    font-size:57px
}
.photo-bottom {
    padding:14px 18px;
    font-size:8px
}
.network {
    padding-block:36px;
    gap:28px 18px
}
.network h2 {
    font-size:23px
}
.feature h3 {
    font-size:15px
}
.feature-number {
    font-size:8px;
    letter-spacing:.8px
}
.feature p {
    font-size:11px
}
.contact-strip {
    align-items:flex-start
}
.contact-star {
    display:none
}
.contact-strip strong {
    font-size:14px
}
.contact-strip .text-link {
    font-size:11px;
    gap:10px;
    white-space:nowrap;
    padding-top:8px
}
.footer-inner {
    font-size:9px;
    gap:10px;
    min-height:64px
}

}
@media(prefers-reduced-motion:reduce) {
    html {
    scroll-behavior:auto
}
.button {
    transition:none
}
.button:hover {
    transform:none
}

}