/* OCI Defence RC 0.5 — visual quality and responsive experience layer.
   RC 0.4 architecture, text, interactions and navigation remain intact. */
:root{
  --text:#eef6fc;
  --muted:#c5d6e2;
  --soft:#9cbacd;
  --line:#30546a;
  --panel:#09202e;
  --red:#f1474e;
  --aqua:#acdcef;
  --font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
html{scroll-padding-top:30px}
body{font-size:15px;line-height:1.55;background:#06131d}
:focus-visible{scroll-margin:14px}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ff8991;outline-offset:3px}
h1,h2,h3{letter-spacing:-.035em}
.main{margin-left:236px;background:radial-gradient(ellipse at 80% 18%,rgba(22,64,85,.16),transparent 44%),linear-gradient(160deg,#071b28,#061622 70%,#051420)}
.sidebar{width:236px;border-right-color:#24465b;box-shadow:14px 0 45px #00000024}
.logo{height:91px;padding:24px 20px;gap:14px}
.brandmark{width:33px;height:33px}
.brandmark:after{inset:8px}
.logotext strong{font-size:27px}
.logotext small{font-size:10px;letter-spacing:.045em}
.primary-nav{margin:2px 10px}
.nav-link{font-size:13px;min-height:49px;gap:14px;padding:12px 14px;border-radius:6px;transition:color .18s,background .18s}
.nav-link .ico{width:19px;height:19px}
.sidebar-extras{margin:29px 21px 0;padding-top:21px}
.sidebar-extras .nav-link{margin:5px -9px;padding:10px 10px;min-height:44px}
.overline{font-size:10px;letter-spacing:.15em}
.uk-panel{min-height:202px;margin:0 15px 28px;padding:18px;gap:17px}
.uk-panel b{font-size:13px;line-height:1.22}
.uk-panel small{font-size:11px;line-height:1.45}
.research{padding:13px 17px 17px}
.research span,.research b{font-size:10px}
.research small{font-size:10px;color:#90adbf}
.hero{height:345px;min-height:345px;border-bottom:1px solid #28516a}
.hero:before{inset:0 0 0 29%;background-position:center center;background-size:cover;filter:saturate(.94) brightness(.96)}
.hero:after{background:linear-gradient(90deg,#051522 0%,#051522 19%,rgba(5,21,34,.97) 29%,rgba(5,21,34,.82) 42%,rgba(5,21,34,.16) 80%,rgba(5,21,34,.09) 100%)}
.hero-text{padding:38px clamp(25px,3vw,50px);max-width:785px}
.hero .overline{font-size:11px;color:#bed5e4;letter-spacing:.15em}
.hero h1{font-size:clamp(43px,3.8vw,64px);letter-spacing:-.055em;line-height:1.03;margin:14px 0 12px;text-shadow:0 2px 24px #020b16b0}
.hero-sub{max-width:565px;font-size:clamp(16px,1.3vw,19px);line-height:1.4;margin-bottom:11px;color:#ecf4fa}
.scarlet-line{width:56px;margin:16px 0 14px;height:3px}
.hero-detail{font-size:14px;line-height:1.5;max-width:485px;margin-bottom:22px;color:#d4e3ed}
.buttons{gap:12px}
.button{padding:12px 18px;min-height:46px;font-size:13px;border-radius:5px;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.button:hover:not(:disabled){transform:translateY(-2px)}
.button.primary{background:linear-gradient(130deg,#fa4d53,#dc2933);box-shadow:0 11px 20px #c3324026}
.button.secondary{border-color:#608096;background:#051522e8}
.homepage{padding:17px clamp(14px,1.9vw,28px) 28px;gap:17px}
.panel{border-color:#2c5369;border-radius:8px;padding:17px;background:linear-gradient(145deg,#0a2030 0%,#081c2a 85%);box-shadow:0 5px 20px #00101b2b}
.panel-heading{padding:0 2px 15px;min-height:auto;align-items:start;gap:17px}
.panel-heading>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.panel-heading h2{font-size:21px;line-height:1.23;padding-left:12px;border-left-width:3px;white-space:normal;font-weight:760}
.panel-heading span{font-size:12px;line-height:1.45;color:#aec6d6}
.text-link{font-size:12px;line-height:1.4;color:#d9eaf7;font-weight:600;white-space:nowrap}
.patterns-five{gap:12px}
.pattern-card{min-height:156px;padding:18px 15px;gap:13px;border-color:#355c73;background:linear-gradient(145deg,#102b3e,#091d2d);border-radius:6px;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s}
.pattern-card:hover,.adv-card:hover,.sector-card:hover,.deep-three a:hover,.industry-tile:hover{transform:translateY(-3px);box-shadow:0 12px 25px #00000038;border-color:#95c3d8}
.pattern-icon{width:55px;min-width:55px;color:#9bcce1}
.pattern-icon svg{width:46px;height:46px;stroke-width:1.4}
.pattern-card h3{font-size:14px;line-height:1.3;margin:0 0 10px;padding-right:9px}
.pattern-card p{font-size:12px;line-height:1.5;color:#c4d6e4}
.chevron{top:14px;right:13px}
.advantages-six{gap:12px}
.adv-card{min-height:251px;padding:15px 13px 13px;border-color:#355c73;border-radius:6px;transition:border-color .2s,transform .2s,box-shadow .2s}
.adv-no{width:24px;height:24px;font-size:12px}
.adv-card h3{margin:-23px 0 8px 31px;font-size:13px;line-height:1.27;min-height:34px}
.technical-symbol{height:86px;flex-shrink:0;color:#a1d8eb}
.technical-symbol>svg{width:62px;height:62px;stroke-width:1.35}
.technical-symbol span{width:95px;height:22px;background:#14405c42}
.adv-card p{font-size:12px;line-height:1.46;color:#cedeea;margin:8px 0 11px}
.caption-stripe{padding-top:9px;font-size:11px;line-height:1.3;color:#a6c4d5}
.caption-stripe>span{width:46px;height:3px}
.half-layout,.bottom-layout{gap:16px}
.half-layout{grid-template-columns:1.04fr 1fr}
.bottom-layout{grid-template-columns:1.35fr .95fr}
.mapping-grid{padding:4px 1px;gap:8px;grid-template-columns:minmax(0,1fr) 17px minmax(0,1.17fr) 17px minmax(0,1fr)}
.mapping-column{padding:13px 11px;border-color:#31576e;border-radius:5px}
.mapping-column small{font-size:10px;letter-spacing:.03em;margin-bottom:9px}
.mapping-column>div{font-size:11px;line-height:1.3;white-space:normal;overflow:visible;padding:6px 0;align-items:start;gap:7px}
.mapping-column>div .ico{width:14px;height:14px}
.map-arrows{font-size:18px;line-height:42px}
.metrics .tabbar{padding:3px 2px 11px}
.tabbar button{font-size:11px;padding:10px 5px;line-height:1.2;transition:background .2s}
.metric-body{padding:0 2px;gap:11px;grid-template-columns:1.05fr .95fr}
.metric-body>div{padding:15px 14px;min-height:195px;border-radius:5px;border-color:#31576e}
.metric-body h4{font-size:12px;margin:0 0 12px}
.metric-line{font-size:11px;padding:6px 0;gap:9px}
.metric-track{width:62px;height:6px}
.metric-explain>.ico{height:32px;width:32px}
.metric-explain strong{font-size:13px;line-height:1.3}
.metric-explain p{font-size:11px;line-height:1.5;margin:9px 0}
.more{font-size:12px}
.sectors-six{gap:11px}
.sector-card{height:156px;border-radius:6px;padding:13px 12px;border-color:#3b6077;background-color:#092338;transition:transform .2s,border-color .2s,box-shadow .2s;justify-content:flex-end}
.sector-card:before,.industry-tile:before{opacity:1;filter:none;background-image:linear-gradient(0deg,rgba(3,15,27,.96) 0%,rgba(3,15,27,.35) 36%,rgba(3,15,27,.02) 82%),var(--sector);background-position:center;background-size:cover;transition:transform .38s}
.sector-card:hover:before,.industry-tile:hover:before{transform:scale(1.06)}
.sector-card span{font-size:14px;text-shadow:0 1px 5px #00101b}
.sector-card small{font-size:10px;line-height:1.37;color:#d8e5ef;min-height:27px;text-shadow:0 2px 5px #00101be0}
.deep-three{gap:12px}
.deep-three a{min-height:156px;padding:18px 14px;transition:transform .2s,box-shadow .2s,border-color .2s;border-radius:6px}
.deep-three a .ico{width:31px;height:31px}
.deep-three b{font-size:13px;line-height:1.3}
.deep-three small{font-size:11px;line-height:1.43;color:#c4d8e8}
.foot{font-size:10px;letter-spacing:.08em;line-height:1.5;padding:20px 30px;color:#87a9bf}
/* Interior page polish preserves existing information architecture. */
.page-head{padding:40px clamp(24px,3vw,46px) 32px}
.page-head h1{font-size:clamp(37px,3.5vw,57px)}
.page-head p{font-size:16px;max-width:920px}
.content-wrap{padding:23px clamp(14px,1.9vw,28px) 35px;gap:17px}
.catalogue-card,.adv-detail-card{border-radius:7px}
.catalogue-card p,.adv-detail-card p{font-size:13px;line-height:1.56}
.industry-tile{height:205px}
.industry-tile small{font-size:13px}
.lesson-heading p{font-size:15px}
.prose p,.prose li{font-size:14px}
/* Medium displays: keep cards legible rather than forcing microscopic grids. */
@media (max-width:1620px){
  .main{margin-left:224px}
  .sidebar{width:224px}
  .pattern-card{padding:14px 11px;gap:8px}
  .pattern-icon{width:43px;min-width:43px}
  .pattern-icon svg{width:36px;height:36px}
  .adv-card{padding:13px 11px}
  .adv-card h3{font-size:12.5px}
}
@media (max-width:1370px){
  .hero{height:325px;min-height:325px}
  .patterns-five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .advantages-six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pattern-card{min-height:132px;padding:18px}
  .pattern-icon{width:58px;min-width:58px}
  .pattern-icon svg{width:45px;height:45px}
  .adv-card{min-height:215px;padding:16px}
  .adv-card h3{font-size:14px}
  .adv-card p{font-size:13px}
  .half-layout{grid-template-columns:1fr}
  .bottom-layout{grid-template-columns:1fr}
  .sectors-six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sector-card{height:160px}
}
@media (max-width:1050px){
  .main{margin-left:210px}
  .sidebar{width:210px}
  .logo{padding:18px}
  .nav-link{font-size:12.5px}
  .hero h1{font-size:clamp(41px,4.2vw,51px)}
  .patterns-five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .patterns-five .pattern-card:last-child{grid-column:span 2}
  .panel-heading>div{display:block}
  .panel-heading span{display:block;margin:7px 0 0 15px}
}
@media (max-width:900px){
  .sidebar{width:min(310px,86vw);box-shadow:15px 0 40px #0008}
  .main{margin-left:0}
  .mobile-bar{height:67px;padding:0 22px;gap:17px;position:sticky;top:0;z-index:15;background:rgba(5,19,31,.97);backdrop-filter:blur(14px);border-bottom-color:#2b5067}
  .mobile-bar button{min-height:42px;min-width:42px;display:flex;align-items:center;justify-content:center;border:1px solid #426277;border-radius:5px}
  .mobile-bar b{font-size:21px}
  .mobile-bar small{font-size:11px}
  .hero{height:330px;min-height:330px}
  .hero-text{padding:32px}
  .hero:before{inset:0 0 0 25%}
  .hero:after{background:linear-gradient(90deg,#051522 0%,rgba(5,21,34,.97) 20%,rgba(5,21,34,.77) 48%,rgba(5,21,34,.13) 100%)}
  .patterns-five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .advantages-six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .panel-heading>div{display:flex;align-items:baseline;flex-wrap:wrap}
  .panel-heading span{display:inline;margin:0}
  .industry-tile{height:170px}
}
@media (max-width:700px){
  .hero{height:auto;min-height:405px;align-items:flex-start}
  .hero-text{padding:36px 24px 45px}
  .hero h1{font-size:clamp(35px,7.4vw,50px)}
  .hero-sub{font-size:17px;max-width:510px}
  .hero-detail{font-size:13px;max-width:390px}
  .hero:before{inset:0;opacity:.65;background-position:60% center}
  .hero:after{background:linear-gradient(90deg,#051522 0%,rgba(5,21,34,.94) 59%,rgba(5,21,34,.52) 100%)}
  .homepage{padding:13px 12px 28px;gap:14px}
  .panel{padding:15px}
  .panel-heading{flex-wrap:wrap;gap:11px;padding-bottom:16px}
  .panel-heading>div{display:block}
  .panel-heading h2{font-size:20px}
  .panel-heading span{font-size:12px;display:block;margin:8px 0 0 15px}
  .panel-heading>.text-link{font-size:12px;margin-left:15px;margin-top:0}
  .patterns-five{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .patterns-five .pattern-card:last-child{grid-column:auto}
  .pattern-card{min-height:188px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px}
  .pattern-icon{height:43px;width:48px;min-width:48px}
  .pattern-card h3{font-size:14px}
  .pattern-card p{font-size:12px;line-height:1.42}
  .advantages-six{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .adv-card{min-height:263px;padding:13px 12px}
  .adv-card h3{font-size:13px;min-height:38px}
  .technical-symbol{height:72px}
  .technical-symbol>svg{width:53px;height:53px}
  .adv-card p{font-size:12px;line-height:1.45}
  .caption-stripe{font-size:10px}
  .mapping-grid{grid-template-columns:1fr;gap:9px}
  .mapping-column{padding:15px}
  .mapping-column>div{font-size:13px;padding:6px 0}
  .mapping-column small{font-size:11px}
  .map-arrows{height:23px;line-height:17px;transform:rotate(90deg);font-size:20px;overflow:hidden}
  .metric-body{grid-template-columns:1fr}
  .metric-body>div{min-height:auto}
  .metric-body h4{font-size:13px}
  .metric-line{font-size:12px}
  .metric-explain p{font-size:12px}
  .sectors-six{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sector-card{height:168px}
  .sector-card span{font-size:14px}
  .sector-card small{font-size:11px}
  .deep-three{grid-template-columns:1fr;gap:9px}
  .deep-three a{min-height:95px;padding:15px 17px}
  .deep-three b{font-size:14px}
  .deep-three small{font-size:12px}
  .foot{padding:21px 18px;font-size:10px}
  .page-head{padding:34px 24px}
  .page-head h1{font-size:clamp(33px,6vw,43px)}
  .page-head p{font-size:14px}
  .content-wrap{padding:14px 12px 30px}
  .prose p,.prose li{font-size:14px}
}
@media (max-width:420px){
  .hero{min-height:430px}
  .hero .overline{font-size:10px}
  .hero-text{padding:31px 18px 39px}
  .hero h1{font-size:38px}
  .hero-sub{font-size:16px}
  .button{font-size:12px;min-height:45px;padding:12px 14px}
  .panel{padding:12px}
  .panel-heading h2{font-size:19px}
  .pattern-card{min-height:190px;padding:12px}
  .pattern-card h3{font-size:13px}
  .pattern-card p{font-size:11.5px;line-height:1.42}
  .adv-card{min-height:279px;padding:12px 10px}
  .adv-card h3{font-size:12px}
  .adv-card p{font-size:11.5px}
  .sector-card{height:148px;padding:11px}
  .tabbar button{font-size:10px;padding:10px 2px}
}
@media (max-width:340px){
  .patterns-five,.advantages-six,.sectors-six{grid-template-columns:1fr}
  .pattern-card{min-height:120px;flex-direction:row;align-items:center}
  .adv-card{min-height:185px}
  .sector-card{height:150px}
  .hero h1{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pattern-card,.adv-card,.sector-card,.deep-three a,.button{transition:none}
  .pattern-card:hover,.adv-card:hover,.sector-card:hover,.deep-three a:hover,.industry-tile:hover,.button:hover:not(:disabled){transform:none}
}
/* Imagery needs usable width: six sector scenes should never be reduced to tiny strips. */
.bottom-layout{grid-template-columns:minmax(0,1fr)}
.sector-card{height:190px}
.deep-three a{min-height:125px}
@media (max-width:1370px){.sector-card{height:184px}}
@media (max-width:700px){.sector-card{height:158px}.deep-three a{min-height:95px}}