:root {
    --ink:#111316;
    --coal:#191b1e;
    --charcoal:#25272b;
    --red:#c92b2e;
    --paper:#f2f1ee;
    --white:#fff;
    --muted:#74787d;
    --line:#d9d9d8
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:16px/1.55 Arial,Helvetica,sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit
}
img {
    max-width:100%;
    display:block
}
.wrap {
    width:min(1180px,calc(100% - 64px));
    margin-inline:auto
}
.skip {
    position:absolute;
    top:-100px;
    left:12px;
    background:white;
    padding:12px;
    z-index:100
}
.skip:focus {
    top:10px
}
.site-header {
    background:#0e1012;
    color:#fff;
    border-bottom:1px solid #333;
    position:relative;
    z-index:10
}
.header-inner {
    width:min(1320px,calc(100% - 64px));
    margin:auto;
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}
.brand {
    display:flex;
    flex-direction:column;
    line-height:1
}
.brand-name {
    font-weight:900;
    font-size:29px;
    letter-spacing:0px
}
.brand-name span,.footer-brand span {
    color:#e33a3d
}
.brand-name small {
    font-size:15px;
    letter-spacing:-.3px
}
.brand-caption {
    font-size:9px;
    letter-spacing:2.3px;
    margin-top:9px;
    color:#a9adb1;
    font-weight:700
}
.site-nav {
    display:flex;
    align-items:center;
    gap:27px
}
.site-nav a {
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:color .2s
}
.site-nav a:hover,.site-nav a:focus-visible {
    color:#f35c60
}
.menu-toggle {
    display:none;
    background:none;
    color:white;
    border:1px solid #555;
    padding:9px 14px;
    font-size:12px;
    font-weight:bold;
    letter-spacing:1px
}
.menu-toggle span {
    padding-left:12px
}
.hero {
    background:#0d0f10;
    position:relative;
    color:#fff;
    overflow:hidden
}
.hero:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#101214 5%,rgba(16,18,20,.97) 32%,rgba(16,18,20,.62) 65%,rgba(16,18,20,.35)),url('../images/header1.jpg') center right/cover no-repeat;
    opacity:.95
}
.hero:after {
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.035) 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.035) 40px);
    pointer-events:none
}
.hero-inner {
    width:min(1180px,calc(100% - 64px));
    margin:auto;
    min-height:525px;
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:80px 0 70px
}
.hero-copy {
    max-width:740px
}
.eyebrow {
    font-size:11px;
    font-weight:900;
    letter-spacing:2.4px;
    text-transform:uppercase;
    color:var(--red)
}
.hero .eyebrow {
    color:#f36b6b;
    display:flex;
    align-items:center;
    gap:12px
}
.red-line {
    width:25px;
    height:2px;
    background:#e43e42
}
.hero h1,.section h2,.tool-section h2 {
    font-family:Impact,'Arial Narrow',Arial,sans-serif;
    font-stretch:condensed;
    letter-spacing:1.1px;
    font-weight:800
}
.hero h1 {
    font-size:clamp(54px,7.2vw,102px);
    line-height:.98;
    margin:27px 0 23px
}
.hero h1 em {
    font-style:normal;
    color:#e54043
}
.hero-copy>p {
    max-width:520px;
    color:#c4c6c8;
    font-size:17px;
    line-height:1.75
}
.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    padding:15px 21px;
    font-size:12px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    font-weight:900;
    border:1px solid #666;
    transition:background .2s,transform .2s
}
.btn:hover {
    transform:translateY(-2px)
}
.btn.primary {
    background:var(--red);
    border-color:var(--red);
    color:white
}
.btn.primary:hover {
    background:#a91d21
}
.btn.secondary {
    color:white;
    background:#ffffff0a
}
.btn.secondary:hover {
    background:#ffffff22
}
.hero-index {
    position:absolute;
    bottom:20px;
    left:0;
    right:0;
    display:flex;
    justify-content:space-between;
    color:#7e858a;
    font-size:10px;
    letter-spacing:2px
}
.quick-strip {
    background:#1b1d20;
    color:white
}
.quick-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr)
}
.quick-grid a {
    display:flex;
    align-items:center;
    gap:13px;
    padding:24px 17px;
    border-right:1px solid #3b3d40;
    transition:background .2s
}
.quick-grid a:first-child {
    border-left:1px solid #3b3d40
}
.quick-grid a:hover {
    background:#303338
}
.quick-grid b {
    color:#e04447;
    font-size:12px
}
.quick-grid span {
    font-size:11px;
    letter-spacing:1px;
    font-weight:800
}
.quick-grid strong {
    margin-left:auto;
    font-size:17px;
    font-weight:400
}
.section {
    padding:82px 0 90px
}
.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:34px
}
.section h2,.tool-section h2 {
    font-size:clamp(39px,5vw,62px);
    line-height:1.06;
    margin:11px 0 14px
}
.section h2 span {
    color:#9d9fa2
}
.section-heading p {
    color:#686b70;
    margin:0;
    max-width:650px
}
.section-number {
    color:#999;
    font-size:12px;
    font-weight:bold;
    letter-spacing:2px;
    white-space:nowrap
}
.caliber-layout {
    display:grid;
    grid-template-columns:265px minmax(0,1fr);
    border:1px solid var(--line);
    background:white
}
.caliber-intro {
    background:#222529;
    color:white;
    padding:30px;
    display:flex;
    flex-direction:column;
    align-items:start
}
.intro-mark {
    font-family:Impact,Arial,sans-serif;
    font-size:54px;
    line-height:1;
    color:white
}
.intro-mark span {
    color:var(--red)
}
.caliber-intro h3 {
    font-size:25px;
    line-height:1.2;
    margin:32px 0 12px
}
.caliber-intro p {
    color:#b9bcbf;
    font-size:13px;
    line-height:1.7
}
.small-rule {
    height:2px;
    width:35px;
    background:var(--red);
    margin-top:auto;
    margin-bottom:17px
}
.caliber-intro small {
    font-size:10px;
    letter-spacing:2px;
    color:#8f9397
}
.caliber-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-content:start;
    padding:17px
}
.caliber-grid a {
    padding:16px 11px;
    border-bottom:1px solid #e7e7e7;
    color:#282a2c;
    font-size:13px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:15px;
    transition:background .2s,color .2s;
}
.caliber-grid a:after {
    content:'↗';
    color:#c92b2e;
    font-size:13px
}
.caliber-grid a:hover {
    background:#f4f4f4;
    color:#a71d21
}
.rifle-section {
    background:#e9e9e7
}
.tool-section {
    background:#151719;
    color:white;
    padding:84px 0
}
.tool-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:75px;
    align-items:center
}
.tool-section h2 {
    font-size:clamp(42px,5vw,66px);
    margin:16px 0 21px
}
.tool-section h2 span {
    color:#e13a3d
}
.tool-section p {
    max-width:450px;
    color:#b8b9ba;
    line-height:1.8;
    margin-bottom:28px
}
.tool-graphic {
    border:1px solid #414449;
    padding:32px;
    background:linear-gradient(135deg,#22262a,#121416);
    min-height:285px;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}
.tool-label,.tool-bottom {
    font-size:10px;
    letter-spacing:2px;
    color:#92979b;
    font-weight:800
}
.tool-readout {
    font-size:clamp(36px,5vw,65px);
    font-weight:900;
    letter-spacing:-3px;
    color:#f4f4f4
}
.tool-bars {
    display:flex;
    align-items:end;
    gap:9px;
    height:66px;
    border-bottom:1px solid #5d6166
}
.tool-bars i {
    flex:1;
    background:#ba292e;
    height:30%
}
.tool-bars i:nth-child(2) {
    height:45%
}
.tool-bars i:nth-child(3) {
    height:40%
}
.tool-bars i:nth-child(4) {
    height:65%
}
.tool-bars i:nth-child(5) {
    height:52%
}
.tool-bars i:nth-child(6) {
    height:80%
}
.tool-bars i:nth-child(7) {
    height:70%
}
.tool-bars i:nth-child(8) {
    height:92%
}
.tool-bars i:nth-child(9) {
    height:100%
}
.tool-bottom {
    display:flex;
    justify-content:space-between;
    margin-top:16px
}
.text-link {
    color:var(--red);
    font-weight:900;
    font-size:12px;
    letter-spacing:1px;
    white-space:nowrap
}
.story-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}
.story-card {
    background:white;
    border:1px solid #dedede;
    transition:transform .2s,box-shadow .2s;
    overflow:hidden
}
.story-card:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 28px #00000016
}
.story-card img {
    width:100%;
    height:185px;
    object-fit:cover;
    background:#ccc
}
.story-card>div {
    padding:24px
}
.story-card small {
    font-size:10px;
    color:var(--red);
    font-weight:900;
    letter-spacing:1.7px
}
.story-card h3 {
    font-size:23px;
    line-height:1.2;
    margin:13px 0 24px
}
.story-card span {
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px
}
.resource-links {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:35px;
    border-top:1px solid #d3d3d3;
    border-bottom:1px solid #d3d3d3
}
.resource-links a {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:18px 14px;
    font-size:12px;
    font-weight:800;
    border-right:1px solid #d3d3d3
}
.resource-links a:first-child {
    padding-left:0
}
.resource-links a:last-child {
    border:0
}
.resource-links span {
    color:var(--red)
}
.site-footer {
    background:#111315;
    color:#fff;
    padding:54px 0 22px
}
.footer-grid {
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:start
}
.footer-brand {
    font-size:26px;
    font-weight:900;
    letter-spacing:0px
    line-height:1.2;
}
.footer-brand small {
    font-size:12px
}
.footer-grid p {
    font-size:12px;
    color:#999
}
.footer-links {
    display:flex;
    gap:25px;
    flex-wrap:wrap;
    font-size:12px;
    color:#bbb
}
.footer-links a:hover {
    color:white
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    border-top:1px solid #36383a;
    margin-top:40px;
    padding-top:20px;
    color:#777;
    font-size:10px;
    letter-spacing:1px
}
@media(max-width:950px) {
    .header-inner {
        width:calc(100% - 36px)
    }
    .site-nav {
        gap:13px
    }
    .site-nav a {
        font-size:10px
    }
    .wrap,.hero-inner {
        width:calc(100% - 40px)
    }
    .quick-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .caliber-layout {
        grid-template-columns:210px 1fr
    }
    .caliber-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .tool-layout {
        gap:30px
    }
    .resource-links {
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:650px) {
    .header-inner {
        min-height:74px
    }
    .brand-name {
        font-size:25px
    }
    .menu-toggle {
        display:block
    }
    .site-nav {
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#17191b;
        padding:12px 20px 20px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        border-bottom:2px solid var(--red)
    }
    .site-nav.is-open {
        display:flex
    }
    .site-nav a {
        padding:12px 8px;
        font-size:13px;
        border-bottom:1px solid #333
    }
    .hero-inner {
        min-height:470px;
        padding:64px 0 60px
    }
    .hero:before {
        background:linear-gradient(90deg,#101214ed,#101214b0),url('../images/header1.jpg') 62% center/cover no-repeat
    }
    .hero h1 {
        font-size:clamp(48px,12vw,72px)
    }
    .hero-copy>p {
        font-size:15px
    }
    .hero-index {
        font-size:8px
    }
    .quick-grid a {
        padding:17px 10px
    }
    .quick-grid span {
        font-size:10px
    }
    .quick-grid strong {
        display:none
    }
    .section {
        padding:60px 0
    }
    .section-heading {
        align-items:start
    }
    .section-number {
        display:none
    }
    .caliber-layout {
        display:block
    }
    .caliber-intro {
        padding:23px
    }
    .intro-mark {
        font-size:38px
    }
    .caliber-intro h3 {
        margin:13px 0 6px;
        font-size:23px
    }
    .caliber-intro p {
        margin:4px 0 10px
    }
    .small-rule,.caliber-intro small {
        display:none
    }
    .caliber-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:10px
    }
    .caliber-grid a {
        font-size:12px;
        padding:14px 9px
    }
    .tool-layout {
        grid-template-columns:1fr
    }
    .tool-section {
        padding:60px 0
    }
    .tool-graphic {
        min-height:235px
    }
    .story-grid {
        grid-template-columns:1fr
    }
    .story-card img {
        height:220px
    }
    .resource-links {
        grid-template-columns:1fr
    }
    .resource-links a,.resource-links a:first-child {
        padding:14px 2px;
        border-right:0;
        border-bottom:1px solid #ddd
    }
    .footer-grid,.footer-bottom {
        flex-direction:column;
        gap:16px
    }
    .footer-links {
        gap:14px 22px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *:not(.hero-slide),*:before,*:after {
        transition:none!important
    }
}
/* ==============================================================
   Ballistics101 homepage: rotating high-resolution hero images
   Image files live at /redesign/images/wpaper/ on the server.
   Desktop and mobile share the same fade rotation and dark overlay.
   ============================================================== */
.hero {
    position: relative;
    isolation: isolate;
    background: #0d0f10;
}
.hero-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 1.6s ease-in-out;
    will-change: opacity;
}
.hero-slide.is-active {
    opacity: 1;
}
/* Replace the original static image with a legibility gradient. */
.hero::before {
    z-index: 1;
    opacity: 1;
    background: linear-gradient(90deg,
        rgba(10,12,15,.88) 0%,
        rgba(10,12,15,.71) 38%,
        rgba(10,12,15,.27) 72%,
        rgba(10,12,15,.12) 100%);
}
.hero::after {
    z-index: 2;
}
.hero-inner {
    z-index: 3;
}
@media (max-width: 650px) {
    .hero::before {
        background: linear-gradient(90deg,
            rgba(10,12,15,.90), rgba(10,12,15,.67));
    }
    .hero-slide {
        background-position: center center;
    }
}
/* Keep the slideshow crossfade active even when the site's general
   reduced-motion rule disables other transitions. */
.hero .hero-slideshow .hero-slide {
    transition: opacity 1.8s ease-in-out !important;
}
/* Homepage only: align the logo with the hero content, not the wider header. */
.site-header .header-inner {
    width: min(1180px, calc(100% - 64px));
}
/* Arrow icons: CSS/SVG shapes instead of font glyphs. */
.css-arrow,
.caliber-grid a::after {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    vertical-align: -2px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13L13 3M5 3h8v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13L13 3M5 3h8v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.css-arrow-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}
.caliber-grid a::after {
    content: "";
    color: #c92b2e;
}
.quick-grid .css-arrow {
    color: #e04447;
    margin-left: auto;
}
@media (max-width: 650px) {
    .quick-grid .css-arrow {
        display: inline-block;
    }
}
@media (max-width: 650px) {
    .menu-toggle {
        display: inline-flex;
        align-items: center;
        width: auto;
        height: 28px;
        padding: 3px 7px;
        font-size: 10px;
        line-height: 1;
        gap: 5px;
    }

    .menu-toggle span {
        padding-left: 0;
    }
}