/* ISGI PAPER OPS — responsive kinetic military editorial website
   Artwork supplied by ISGI; individual transparent layered WebP assets.
   Official owl silhouette remains the original file, palette is CSS styling.
*/
:root{
 --coal:#171715;--ink:#111210;--olive:#515246;--khaki:#756e57;--paper:#e7dcc8;--cream:#eddfc6;--red:#a61f26;--red-bright:#c72b32;--line:rgba(241,223,190,.28);
 --head:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
 --mono:"IBM Plex Mono",Consolas,monospace;
 color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{margin:0;background:var(--coal);color:var(--cream);font-family:var(--mono);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #fff0cb;outline-offset:5px}
::selection{background:var(--red);color:#fff}
.skip{position:fixed;top:-130px;left:10px;padding:12px;z-index:999;background:var(--red);color:white}.skip:focus{top:10px}
.site-header{position:fixed;left:0;right:0;top:0;z-index:1000;height:79px;background:linear-gradient(180deg,rgba(16,16,15,.97),rgba(16,16,15,.92));border-bottom:1px solid #847d6936;backdrop-filter:blur(14px);padding:0 clamp(24px,5vw,90px);display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}.brand-name{font:900 32px/.82 var(--head);letter-spacing:.01em;color:var(--cream);white-space:nowrap}.brand-full{font:700 10px var(--mono);letter-spacing:.12em;color:#c5b79e;vertical-align:middle}.brand-shield{width:44px;height:54px;position:relative;display:grid;place-items:center;flex-shrink:0;isolation:isolate;filter:drop-shadow(0 3px 1px #050505bb)}
.brand-shield:before{content:"";position:absolute;inset:0;background:#b9252b;clip-path:polygon(49% 0,96% 14%,96% 67%,51% 99%,4% 67%,4% 14%);z-index:-2}
.brand-shield:after{content:"";position:absolute;inset:3px;background:#171a18;clip-path:polygon(49% 0,96% 14%,96% 67%,51% 99%,4% 67%,4% 14%);z-index:-1}
.brand-shield img{width:37px;height:39px;object-fit:contain;filter:grayscale(1) brightness(0) invert(.9) sepia(.12);margin-bottom:4px}
.nav{display:flex;align-items:center;gap:clamp(22px,2.9vw,48px);margin-left:auto}
.nav>a{font:700 11px var(--mono);letter-spacing:.08em;color:#dfd2bd;position:relative;white-space:nowrap;transition:color .2s}
.nav>a:hover,.nav>a.active{color:#fff7e7}
.nav>a:after{content:"";position:absolute;left:0;right:100%;bottom:-11px;height:2px;background:var(--red-bright);transition:right .2s}
.nav>a.active:after,.nav>a:hover:after{right:0}
.header-right{display:flex;gap:12px;align-items:center}.header-cta{min-height:50px;min-width:174px;padding:12px 18px;display:flex;justify-content:center;align-items:center;gap:12px;background:var(--red);font:800 12px var(--mono);letter-spacing:.06em;color:white;transition:background .2s,transform .2s}
.header-cta img{width:21px;height:21px;filter:brightness(0) invert(1)}.header-cta:hover{background:#d33139;transform:translateY(-2px)}
.menu-toggle{display:none;width:45px;height:44px;background:transparent;border:1px solid #a3947b;align-items:center;justify-content:center;flex-direction:column;gap:7px}.menu-toggle span{height:2px;width:23px;background:var(--cream)}
.section{min-height:720px;height:clamp(720px,78vw,860px);position:relative;overflow:hidden;isolation:isolate}
.theme-dark{background:#171715;color:var(--cream)}
.theme-paper{background:#e7dcc8;color:var(--ink)}
.grain-layer{position:absolute;inset:0;pointer-events:none;z-index:8;background:url("/assets/textures/grain-deep.jpg") center/900px auto repeat;mix-blend-mode:screen;opacity:.18}
.grain-layer.paper{background-image:url("/assets/textures/grain-paper.jpg");mix-blend-mode:multiply;opacity:.26}
.content-layer{position:relative;z-index:10}
.visual{position:absolute;display:block;pointer-events:none;z-index:4;object-fit:contain;filter:drop-shadow(0 22px 20px #08070560);will-change:transform;transform:translate3d(0,var(--parallax,0px),0)}
.eyebrow{font:600 11px/1.8 var(--mono);letter-spacing:.17em}.eyebrow span{color:var(--red-bright);padding:0 10px;font-weight:700}
.section-index{font:700 11px var(--mono);letter-spacing:.2em;display:flex;align-items:center;gap:18px;margin-bottom:28px}
.section-index>span{display:inline-block;width:52px;height:2px;background:var(--red)}
.section-title,.hero-title{font-family:var(--head);font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.82;margin:0;position:relative;width:max-content;max-width:100%}
.section-title{font-size:clamp(90px,11vw,176px)}
.red-word,.red-punct{color:var(--red)}
.section-sub{margin:23px 0 32px;white-space:nowrap;font-size:11px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;background:var(--red);color:#fff;min-height:69px;min-width:258px;padding:17px 22px;font:800 16px var(--head);letter-spacing:.07em;text-transform:uppercase;box-shadow:0 9px 13px #130f0d29;border:1px solid #c84b4a26;transition:transform .2s,background .2s,box-shadow .2s}
.btn:hover{background:#cd2d35;transform:translateY(-3px);box-shadow:0 14px 23px #19060830}
.btn img{width:27px;height:27px;filter:brightness(0) invert(1)}
.btn span{white-space:nowrap}.btn b{font:600 27px/1 var(--head);margin-left:auto}.btn:active{transform:translateY(0)}
/* The reference hero is an asymmetrical military editorial poster. */
.hero{height:clamp(720px,75vw,850px);background:radial-gradient(ellipse at 34% 30%,#292824,#151615 68%,#111211)}
.terrain{position:absolute;inset:0;pointer-events:none;z-index:0}
.terrain-hero{background-image:linear-gradient(102deg,transparent 0 60%,#e0d1b9 61% 100%),repeating-linear-gradient(120deg,transparent 0 80px,#c7b18e13 81px 82px);opacity:.98}
.hero-strike{position:absolute;top:12%;right:21%;height:130%;width:15%;background:#a12527;transform:skew(-41deg) rotate(-11deg);z-index:1;filter:drop-shadow(10px 0 5px #0008)}
.hero-paper-edge{position:absolute;top:-13%;right:0;width:38%;height:100%;background:#daccb4;clip-path:polygon(50% 0,100% 0,100% 100%,0 100%,38% 36%);z-index:1;opacity:.83}
.mountains{position:absolute;bottom:-2px;left:0;right:0;height:32%;z-index:1;background:linear-gradient(170deg,#514d3f,#171916 66%);clip-path:polygon(0 57%,6% 47%,13% 76%,23% 21%,32% 67%,42% 34%,52% 78%,63% 44%,73% 70%,84% 30%,93% 56%,100% 37%,100% 100%,0 100%)}
.hero-copy{position:absolute;top:25%;left:clamp(26px,6vw,95px);z-index:7;width:49%;text-shadow:0 2px 12px #0006}
.hero-copy .eyebrow{color:#e6d8c3}
.hero-title{font-size:clamp(110px,12.7vw,197px);margin:28px 0 22px}
.hero-title .red-word{display:inline-block;color:#b72a2b}.hero-title i{color:#e8d4b1;font-style:normal;font-size:.62em}
.hero-tag{font:600 11px var(--mono);letter-spacing:.15em;margin:0 0 27px;color:#e6d4b9}
.hero-tag span{color:var(--red-bright);padding:0 11px}
.hero-art-wrap{right:8%;bottom:-15%;width:min(49vw,670px);z-index:5;filter:drop-shadow(0 24px 32px #0009)}
.hero-soldier{width:100%;height:auto;display:block}
.hero-helicopter{z-index:2;width:29%;right:-7%;top:28%;opacity:.21;filter:grayscale(1) brightness(.35) drop-shadow(0 13px 10px #0003)}
.hero-side-note{position:absolute;z-index:6;right:4.5%;top:31%;text-align:right;color:#302e28;font:600 11px/2 var(--mono);letter-spacing:.1em}
.hero-side-note b{font-weight:800}
.scroll-indicator{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:16px;font:600 10px var(--mono);letter-spacing:.17em;color:#ecdec5}
.scroll-indicator span:last-child{font:700 24px var(--head);color:#c73538;animation:scrollTick 1.8s ease-in-out infinite}
@keyframes scrollTick{50%{transform:translateY(7px)}}
/* Vault: cream paper with three original material cutouts. */
.vault-section{min-height:680px;height:720px}
.paper-slasher{position:absolute;z-index:1;inset:0;pointer-events:none}
.paper-slasher-top{background:#282a25;clip-path:polygon(76% 0,100% 0,100% 52%,94% 44%,89% 21%)}
.paper-slasher-bottom{background:#434535;clip-path:polygon(0 87%,19% 100%,0 100%)}
.vault-medkit{width:39%;left:-7%;bottom:-14%;transform:translate3d(0,var(--parallax,0px),0) rotate(-7deg);z-index:4}
.vault-missile{width:38%;right:-10%;bottom:-25%;transform:translate3d(0,var(--parallax,0px),0) rotate(4deg);z-index:5}
.vault-grenade{width:18%;right:22%;bottom:-13%;transform:translate3d(0,var(--parallax,0px),0) rotate(4deg);z-index:6}
.vault-copy{position:absolute;left:34%;top:20%;width:53%}.vault-copy .section-title{font-size:clamp(80px,10.8vw,166px);white-space:nowrap}
.vault-copy .section-index{color:#615c4c}
.vault-copy .btn{margin-top:5px}
/* Parliament: dark banners, wedge-shaped concrete architecture and guards. */
.parliament-section{height:790px;background:radial-gradient(ellipse at 60% 50%,#38352e,#141513 64%)}
.parliament-architecture{position:absolute;inset:0;display:flex;gap:6%;align-items:end;justify-content:center;pointer-events:none;z-index:1;opacity:.68;overflow:hidden}
.parliament-architecture span{height:78%;width:14%;background:linear-gradient(90deg,#111311,#4d4535 55%,#121412);clip-path:polygon(17% 0,82% 0,100% 100%,0 100%)}
.parliament-architecture span:nth-child(2){height:88%;opacity:.8}.parliament-architecture span:nth-child(3){height:95%;opacity:.7}.parliament-architecture span:nth-child(4){height:76%}
.parliament-banners{position:absolute;top:0;right:20%;height:72%;width:26%;z-index:2;background:linear-gradient(90deg,#6c191b 0 22%,#181b18 22% 66%,#7f2527 66%);clip-path:polygon(0 0,100% 0,100% 78%,80% 95%,51% 76%,25% 96%,0 79%);opacity:.8;filter:drop-shadow(0 17px 15px #000)}
.parliament-banner-mark{position:absolute;top:19%;right:30%;z-index:3;opacity:.68}.shield-large{width:140px;height:170px}.shield-large img{width:116px;height:130px}
.parliament-guard{bottom:-23%;filter:brightness(.72) drop-shadow(0 30px 16px #000);z-index:5}
.guard-left{width:21%;left:36%;bottom:-26%}.guard-centre{width:34%;left:49%;bottom:-38%;z-index:6}.guard-right{width:24%;right:-5%;bottom:-34%}
.parliament-copy{position:absolute;top:22%;left:6%;z-index:9;max-width:65%}
.parliament-copy .section-title{font-size:clamp(97px,12.3vw,191px);text-shadow:0 4px 9px #0303038a}
.parliament-copy .section-sub{color:#e2d2b7}
/* Events: paper plate with mountain battlefield and helicopter. */
.events-section{height:780px;background:linear-gradient(135deg,#e7d9bf 0%,#d1c1a4 100%)}
.events-mountains{position:absolute;inset:0;z-index:1;background:#766d55;clip-path:polygon(0 90%,10% 70%,17% 78%,28% 52%,39% 82%,53% 39%,66% 69%,79% 42%,92% 72%,100% 59%,100% 100%,0 100%);opacity:.48}
.events-mountains:after{content:"";position:absolute;inset:0;background:linear-gradient(#f8ebd5,#444d3b)}
.events-slash{position:absolute;top:-10%;left:38%;width:18%;height:90%;transform:rotate(-50deg);background:#343b2c;clip-path:polygon(0 0,100% 7%,100% 100%,0 94%);opacity:.58}
.events-helicopter{width:64%;right:-6%;bottom:-13%;z-index:5;filter:drop-shadow(0 18px 14px #1a19177d)}
.events-tank{width:35%;left:-9%;bottom:-25%;z-index:3;filter:brightness(.73) drop-shadow(0 12px 9px #0005)}
.events-operator{width:22%;right:14%;bottom:-38%;z-index:6;filter:brightness(.58) drop-shadow(0 17px 11px #0007)}
.events-copy{position:absolute;left:6%;top:15%;z-index:8}.events-copy .section-index{color:#4d493f}.events-copy .section-title{font-size:clamp(122px,16vw,230px);color:#171716}.events-copy .section-sub{color:#555142}
/* Final card: the cropped pilot on the right, cream and red typography on left. */
.community-section{height:760px;background:radial-gradient(ellipse at 80% 50%,#31312a 0%,#161615 60%)}
.community-slash{position:absolute;inset:0;z-index:1;background:linear-gradient(133deg,transparent 54%,#b6a183 54.3% 55%,transparent 55.3%),linear-gradient(149deg,transparent 72%,#6e1b1c 72.4% 80%,transparent 81%)}
.community-pilot{width:41%;right:10%;bottom:-25%;z-index:5;filter:drop-shadow(0 23px 20px #000b)}
.community-soldier{width:24%;right:-9%;bottom:-38%;z-index:3;filter:brightness(.47)}
.community-copy{position:absolute;left:6%;top:25%;max-width:76%;z-index:9}
.community-copy .section-title{font-size:clamp(97px,13.1vw,185px)}
.community-side-note{position:absolute;right:4%;top:33%;z-index:6;text-align:right;color:#e2d3b8;line-height:2.1;font-size:11px;letter-spacing:.2em}
.site-footer{min-height:140px;display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap;padding:24px clamp(22px,6vw,95px);background:#0d0e0d;border-top:1px solid #4d3d32}
.footer-brand{display:flex;align-items:center;gap:10px;font:700 11px var(--mono)}.footer-brand .brand-shield{width:28px;height:35px}.footer-brand .brand-shield img{width:23px;height:25px}
.footer-links{display:flex;align-items:center;gap:30px}.footer-links a{font:700 10px var(--mono);letter-spacing:.09em;color:#ddc8a8}
.footer-links a:hover{color:#f9f3e7}.service-status{font:600 9px var(--mono);display:inline-flex;align-items:center;gap:7px;color:#b6a58f}
.status-dot{width:7px;height:7px;border-radius:50%;background:#83857a}.status-dot.online{background:#6caa84}.status-dot.offline{background:#c43c3c}
.copyright{font-size:10px;color:#bbaa8c}
/* Scroll-reveal and motion. Offscreen items do not translate for a reduced-motion user. */
.js .fade-in{transition:opacity .65s ease,translate .8s cubic-bezier(.18,.7,.25,1);opacity:0;translate:0 32px}
.js .fade-in.in-view{opacity:1;translate:0 0}
.glitch-heading{will-change:filter;isolation:isolate}
.glitch-heading[data-glitch-phase="1"]{font-family:Impact,"Arial Narrow",sans-serif;filter:contrast(1.5) drop-shadow(4px 0 #9e1d24)}
.glitch-heading[data-glitch-phase="2"]{font-family:"IBM Plex Mono",monospace;letter-spacing:-.11em;filter:contrast(1.2) drop-shadow(-4px 2px #e7d5b5)}
.glitch-heading[data-glitch-phase="3"]{font-family:"Arial Black",Arial,sans-serif;letter-spacing:-.07em;filter:contrast(1.4) drop-shadow(3px -2px #a5262d)}
.glitch-heading[data-glitch-phase="4"]{font-family:Impact,Arial,sans-serif;letter-spacing:-.06em;filter:brightness(1.2)}
.glitch-heading.is-glitching{text-shadow:-2px 0 var(--red),2px 0 #d5bf97}
/* Desktop / tablet. */
@media(max-width:1150px){
 .site-header{padding:0 25px;gap:16px}
 .brand-full{display:none}
 .nav{gap:20px}
 .hero-copy{top:29%}
 .hero-title{font-size:clamp(100px,13vw,165px)}
 .hero-art-wrap{right:0;width:57vw}
 .hero-side-note{display:none}
 .vault-copy{left:30%;top:22%}.vault-medkit{width:41%}
 .parliament-copy{left:5%;max-width:77%}.parliament-copy .section-title{font-size:12vw}
 .community-copy .section-title{font-size:12vw}
}
@media(max-width:760px){
 .site-header{height:70px;padding:0 17px}
 .brand-name{font-size:27px}.brand-shield{width:38px;height:45px}.brand-shield img{width:31px;height:33px}
 .menu-toggle{display:flex}
 .nav{display:none;position:absolute;top:70px;left:0;right:0;padding:15px 24px 22px;flex-direction:column;align-items:stretch;gap:0;background:#191917;border-bottom:2px solid var(--red);box-shadow:0 20px 30px #0008}
 .nav.is-open{display:flex}
 .nav a{padding:15px 5px;border-bottom:1px solid #5b5144;font-size:13px}
 .nav a:after{display:none}
 .header-cta{min-width:0;min-height:42px;padding:8px 12px;font-size:10px}.header-cta img{width:17px;height:17px}
 .section{height:760px;min-height:660px}
 .hero{height:780px}
 .hero-copy{top:22%;left:7%;width:90%}
 .hero-title{font-size:clamp(96px,15.6vw,142px)}
 .hero-art-wrap{width:min(72vw,560px);right:-8%;bottom:-8%;opacity:.95}
 .hero-paper-edge{width:43%}.hero-strike{right:13%;width:22%}
 .hero-helicopter{display:none}
 .hero-copy .eyebrow{font-size:9px}
 .hero-tag{font-size:9px}
 .hero-side-note{display:none}
 .vault-section{height:700px}
 .vault-copy{top:13%;left:8%;width:90%}
 .vault-copy .section-title{font-size:clamp(90px,14vw,140px)}
 .vault-medkit{width:55%;bottom:-10%;left:-10%}
 .vault-missile{width:55%;right:-19%;bottom:-13%}
 .vault-grenade{width:29%;right:24%;bottom:-18%}
 .parliament-section{height:710px}
 .parliament-copy{top:14%;left:7%;max-width:90%}
 .parliament-copy .section-title{font-size:clamp(77px,12.7vw,120px)}
 .guard-left{width:36%;left:13%;bottom:-22%}.guard-centre{width:52%;left:37%;bottom:-34%}.guard-right{width:34%;right:-12%;bottom:-27%}
 .events-section{height:730px}
 .events-copy{left:8%;top:13%}.events-copy .section-title{font-size:clamp(105px,18vw,171px)}
 .events-helicopter{width:86%;right:-13%;bottom:-6%}
 .events-tank{width:49%;left:-18%;bottom:-19%}
 .events-operator{width:33%;right:6%;bottom:-28%}
 .community-section{height:720px}
 .community-copy{left:7%;top:16%;max-width:90%}
 .community-copy .section-title{font-size:clamp(77px,12vw,122px)}
 .community-pilot{width:58%;right:8%;bottom:-12%}
 .community-soldier{width:32%;right:-12%;bottom:-24%}
 .community-side-note{display:none}
 .btn{min-height:64px;min-width:244px}
 .footer-links{gap:15px}
}
@media(max-width:440px){
 .site-header{gap:7px}
 .header-cta{padding:7px 9px;min-height:40px;font-size:9px;gap:6px}
 .header-cta img{width:16px;height:16px}
 .brand-name{font-size:24px}
 .brand{gap:6px}
 .menu-toggle{width:40px;height:40px}
 .section{height:680px;min-height:0}
 .hero{height:750px}
 .hero-copy{left:6%;top:18%}
 .hero-title{font-size:clamp(81px,18.8vw,106px);margin:24px 0 12px}
 .hero-copy .eyebrow{font-size:8px;letter-spacing:.11em}
 .hero-tag{font-size:7px;letter-spacing:.04em}
 .hero-art-wrap{width:92vw;right:-28%;bottom:-3%}
 .hero-paper-edge{width:48%}
 .scroll-indicator{font-size:8px}
 .vault-section{height:650px}
 .vault-copy{top:10%;left:6%}.vault-copy .section-title{font-size:clamp(69px,16.8vw,100px)}
 .vault-medkit{width:73%;left:-18%;bottom:-14%}
 .vault-missile{width:74%;right:-30%;bottom:-21%}
 .vault-grenade{width:29%;right:29%;bottom:-15%}
 .parliament-section{height:650px}
 .parliament-copy{top:12%;left:6%}.parliament-copy .section-title{font-size:clamp(57px,14.5vw,83px)}
 .parliament-guard{bottom:-26%}.guard-centre{width:62%;left:26%;bottom:-37%}.guard-left{width:44%;left:3%;bottom:-31%}
 .parliament-banner-mark{right:14%;top:38%;opacity:.4}
 .events-section{height:670px}
 .events-copy{left:6%;top:10%}.events-copy .section-title{font-size:clamp(94px,21vw,133px)}
 .events-helicopter{width:114%;right:-33%;bottom:-8%}
 .events-tank{width:66%;left:-28%;bottom:-14%}.events-operator{width:45%;right:-4%;bottom:-27%}
 .community-section{height:690px}
 .community-copy{left:6%;top:14%}.community-copy .section-title{font-size:clamp(60px,15vw,83px)}
 .community-pilot{width:79%;right:-11%;bottom:-15%}.community-soldier{width:45%;right:-26%;bottom:-26%}
 .section-index{font-size:9px;margin-bottom:24px}
 .eyebrow.section-sub{font-size:8px;letter-spacing:.08em;white-space:normal;margin:18px 0 25px}
 .eyebrow.section-sub span{padding:0 4px}
 .btn{min-width:225px;min-height:59px;padding:12px 17px;gap:16px;font-size:15px}
 .btn b{font-size:23px}
 .site-footer{align-items:flex-start;justify-content:flex-start;gap:18px 25px}.footer-brand{width:100%}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
 .js .fade-in{opacity:1!important;translate:none!important}
 .visual{transform:none!important}
 .glitch-heading{filter:none!important;text-shadow:none!important}
}
