@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
:root {
    --navy: #0d2026;
    --red: #ee1527;
    --muted: #71808b;
}
* {
    box-sizing: border-box;
}
body {
    font-family: Inter, Arial, sans-serif;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.5;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    color: var(--red);
}
.container {
    max-width: 1140px;
}
.topbar {
    background: var(--navy);
    color: #fff;
    font-size: 10px;
    padding: 10px 0;
}
.separator {
    margin: 0 18px;
    opacity: 0.45;
}
.navbar {
    padding: 8px 0;
}
.navbar-brand {
    padding: 0;
}
.logo {
    display: block;
    width: 176px;
    height: 85px;
    background-image: url("design-reference.png");
    background-size: 1532.8px 2627.2px;
    background-position: -316px -46px;
    background-repeat: no-repeat;
}
.navbar .nav-link {
    font-size: 13px;
    font-weight: 500;
    position: relative;
}
.nav-link.active:after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--red);
}
.btn {
    border-radius: 0;
    padding: 14px 24px;
    font-size: 13px;
    font-weight: 700;
}
.btn-dark {
    background: var(--navy);
    border-color: var(--navy);
}
.hero {
    background-color: var(--navy);
    background-image: linear-gradient(#ffffff03 1px, transparent 1px),
        linear-gradient(90deg, #ffffff03 1px, transparent 1px);
    background-size: 40px 40px;
    color: white;
    padding: 70px 0 54px;
}
.hero-copy {
    max-width: 650px;
    margin: auto;
}
.eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--red);
    margin-bottom: 12px;
}
.hero .eyebrow {
    font-size: 13px;
}
.hero h1 {
    font-weight: 800;
    font-size: 54px;
    line-height: 1.04;
    letter-spacing: -1.8px;
    margin-bottom: 16px;
}
.hero-copy > p:last-child {
    color: #b6cbd3;
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
    max-width: 640px;
}
.section-space {
    padding: 44px 0;
}
.section-heading {
    text-align: center;
    margin-bottom: 30px;
}
.section-heading .eyebrow {
    margin-bottom: 7px;
}
h2 {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1px;
}
h3 {
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 1.16;
}
.featured-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 2/1;
    object-fit: cover;
}
.featured-title {
    font-size: 27px;
    margin-bottom: 20px;
}

.featured-section{
    max-width: 100%!important;    
}

.muted {
    color: var(--muted);
}
.article-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--red);
    font-weight: 600;
    font-size: 13px;
    text-align: left;
}
.article-link:hover {
    text-decoration: underline;
}
.recent {
    background: #f3f5f5;
}
.card {
    border: 1px solid #e0e6e8;
    border-radius: 0;
    overflow: hidden;
}
.article-photo {
    aspect-ratio: 224/107;
    background-image: url("design-reference.png");
    background-size: 427.678571% 1534.579439%;
    background-position: var(--x) var(--y);
    background-repeat: no-repeat;
}
.card-body {
    padding: 20px;
}
.card .eyebrow {
    font-size: 10px;
    letter-spacing: 1.6px;
    margin-bottom: 8px;
}
.card h3 {
    font-size: 19px;
    margin-bottom: 8px;
}
.description {
    color: #5e6b78;
    font-size: 14px;
    line-height: 1.35;
    margin-bottom: 26px;
}
.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.card-meta time {
    font-size: 12px;
    color: var(--muted);
}
.pagination-wrap {
    padding: 36px 0 7px;
}
.page-link {
    border-radius: 0 !important;
    color: var(--navy);
    font-size: 13px;
    background: white;
}
.page-item.active .page-link {
    background: var(--red);
    border-color: var(--red);
}
.page-link.border-0 {
    background: transparent;
}
.quote {
    background: var(--navy);
    color: white;
    padding: 30px 0 25px;
}
.quote h2 {
    font-size: 29px;
}
.quote p {
    color: #b7cdd4;
    max-width: 600px;
    margin: 0 auto 16px;
}
.btn-red {
    background: var(--red);
    color: white;
    border-color: var(--red);
}
.btn-red:hover {
    background: #c20c1b;
    color: white;
}
footer {
    background: #0a1a20;
    color: #b7cbd2;
    font-size: 13px;
}
.footer-main {
    padding: 20px 48px;
}
.footer-logo {
    width: 145px;
    height: 74px;
    background-size: 1532.8px 2627.2px;
    background-position: -242px -2334px;
}
.footer-description {
    margin-top: 8px;
}
.footer-heading {
    color: white;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    margin: 15px 0;
}
.footer-main .col-md-3 > a {
    display: block;
    margin: 6px 0;
}
.footer-bottom {
    border-top: 1px solid #24363a;
    padding: 18px 0 35px;
    font-size: 11px;
}
.skip-link {
    position: absolute;
    left: 12px;
    top: -100px;
    background: white;
    padding: 12px;
    z-index: 100;
}
.skip-link:focus {
    top: 10px;
}
:focus-visible {
    outline: 3px solid #ec5965;
    outline-offset: 4px;
}
@media (min-width: 992px) {
    .container {
        width: 77%;
    }
}
@media (max-width: 991px) {
    .hero h1 {
        font-size: 46px;
    }
    .hero {
        padding: 55px 0;
    }
    .navbar-collapse {
        padding: 15px 0;
    }
    .featured-title {
        font-size: 25px;
    }
    .topbar .separator {
        margin: 0 8px;
    }
    .footer-main {
        padding: 25px 12px;
    }
}
@media (max-width: 575px) {
    .container {
        padding-left: 22px;
        padding-right: 22px;
    }
    .topbar {
        font-size: 9px;
    }
    .topbar .separator {
        display: none;
    }
    .topbar a {
        display: inline-block;
        margin-left: 8px;
    }
    .topbar .container > span {
        display: none;
    }
    .hero h1 {
        font-size: 37px;
        letter-spacing: -1px;
    }
    .hero-copy > p:last-child {
        font-size: 16px;
    }
    .hero {
        padding: 44px 0;
    }
    h2 {
        font-size: 30px;
    }
    .section-space {
        padding: 36px 0;
    }
    .logo {
        transform: scale(0.85);
        transform-origin: left center;
        margin-right: -25px;
    }
    .card h3 {
        font-size: 21px;
    }
    .pagination {
        gap: 8px !important;
    }
    .page-link {
        font-size: 12px;
    }
    .quote h2 {
        font-size: 27px;
    }
}

:root{
  --ink:#101E22; --ink-2:#1C3239; --slate:#4F6B72; --line:#D8E0DE; --paper:#F4F6F4; --white:#FFFFFF;
  --signal:#d3131d; --signal-deep:#d3131d; --signal-text:#d3131d; --amber:#d3131d;
  --display:'Archivo',system-ui,sans-serif; --body:'Karla',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1180px; --gut:clamp(18px,4vw,48px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--white);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;letter-spacing:-0.025em;font-weight:800}
h1{font-size:clamp(2rem,5.4vw,3.5rem)}
h2{font-size:clamp(1.7rem,4.2vw,2.8rem)}
h3{font-size:1.12rem;line-height:1.28;letter-spacing:-0.01em;font-weight:700}
p{overflow-wrap:break-word}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--signal-text);font-weight:500;display:inline-block;margin-bottom:16px}
.kicker.on-dark{color:var(--signal)}
.lead{font-size:1.05rem;color:var(--slate);max-width:58ch}
.lead.on-dark{color:#A9C2C6}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:700;font-size:.94rem;padding:14px 26px;border-radius:2px;border:2px solid var(--ink);background:var(--ink);color:var(--white);cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease;min-height:48px}
.btn:hover{background:var(--signal-deep);border-color:var(--signal-deep);transform:translateY(-2px)}
.btn--signal{background:var(--signal);border-color:var(--signal)}
.btn--signal:hover{background:var(--signal-deep);border-color:var(--signal-deep)}

.page-hero{background:var(--ink);color:var(--white);position:relative;overflow:hidden;padding:clamp(56px,8vw,96px) 0}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:56px 56px}
.page-hero .wrap{position:relative;z-index:1;max-width:820px}
.page-hero h1{color:var(--white);margin-bottom:20px}
.page-hero p{color:#A9C2C6;font-size:1.1rem;max-width:60ch}

.sec{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px)}
.sec--paper{background:var(--paper)}
.sec--ink{background:var(--ink);color:var(--white)}
.sec--ink h2{color:var(--white)}
.sec-head{max-width:640px;margin-bottom:clamp(36px,5vw,52px)}



/* CTA + footer */
.cta-band{background:var(--ink);color:var(--white);padding:44px 0;text-align:center}
.cta-band h2{color:var(--white);margin-bottom:14px;font-size:clamp(1.4rem,3.6vw,2rem)}
.cta-band p{color:#A9C2C6;margin-bottom:26px;max-width:52ch;margin-left:auto;margin-right:auto}
.ftr{background:#0B171B;color:#8FAEB4;padding-top:60px;padding-bottom:24px;font-size:.92rem}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid #1E3238}
.ftr h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white);font-weight:500;margin-bottom:16px}
.ftr ul{list-style:none;display:grid;gap:9px}
.ftr a:hover{color:var(--signal)}
.ftr .logo{display:flex;align-items:center;gap:11px}
.ftr .logo-text{font-family:var(--display);font-weight:800;font-size:1.28rem;letter-spacing:-0.045em;line-height:1;color:var(--white)}
.ftr .logo-sub{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.24em;color:#8FAEB4;font-weight:500;margin-top:3px}
.ftr .blurb{margin-top:16px;max-width:34ch}
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:38px;height:38px;border:1px solid #23393F;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.7rem;color:#8FAEB4;border-radius:2px}
.social a:hover{border-color:var(--signal);color:var(--signal)}
.ftr-base{display:flex;justify-content:space-between;gap:20px;padding-top:22px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;flex-wrap:wrap}

/* responsive */
@media (max-width:1000px){
  .beliefs{grid-template-columns:1fr;gap:16px}
  .split{grid-template-columns:1fr;gap:32px}
  .props{grid-template-columns:repeat(5,1fr);gap:10px}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:640px){
  body{font-size:16px}
  .belief{padding:26px 22px}
  .callout{padding:36px 26px}
  .props{grid-template-columns:repeat(2,1fr);gap:10px}
  .props-note{padding:18px 20px;font-size:.9rem}
  .ftr-grid{grid-template-columns:1fr;gap:26px;padding-bottom:30px}
  .ftr{padding-top:44px}
  .ftr-base{flex-direction:column;gap:10px;text-align:center;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}


.hdr .nav a{
    text-decoration: none;
    color: #212529;
}

.ftr ul a{
    text-decoration: none;
    color: #8faeb4;
}