/* OCI for UK Defence — RC 0.6
   Photography-led visual restoration. Non-destructive to application logic.
   All imagery is explicitly illustrative AI-generated material, not documentary photography. */
:root{--bg:#05111d;--sidebar:#06111c;--panel:#0b1d2c;--panel2:#102638;--line:#31536a;--text:#eef6fa;--muted:#bdcedb;--soft:#93acbd;--red:#f04a51;--aqua:#a3d5e5}
html{background:#05111b;scroll-padding-top:90px}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#05111d;color:#eaf3f8;line-height:1.56;font-size:15px}
a,button{transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
:focus-visible{outline:3px solid #fba5a9!important;outline-offset:4px!important}
.main{background:radial-gradient(ellipse at 76% 23%,#1c3d5422,transparent 40%),linear-gradient(160deg,#071826,#051420 88%);margin-left:234px}
.sidebar{width:234px;background:linear-gradient(180deg,#071521 0%,#04111d 76%);border-right:1px solid #264658;box-shadow:16px 0 40px #0000001f}
.logo{height:88px;padding:23px 19px;border-bottom:1px solid #1e384b}
.brandmark{width:33px;height:33px}.brandmark:after{inset:8px}
.logotext strong{font-size:28px}.logotext small{font-size:10px;letter-spacing:.055em}
.primary-nav{margin:14px 10px}.nav-link{font-size:13px;min-height:49px;padding:12px 13px;border-radius:5px;gap:13px}
.nav-link .ico{width:18px;height:18px}
.nav-link:hover{background:#172838;color:white}.nav-link.active{background:linear-gradient(90deg,#371c27,#201a2b)}
.sidebar-extras{margin:26px 21px 0;padding-top:22px}.sidebar-extras .nav-link{min-height:42px}
.uk-panel{margin:0 14px 26px;min-height:190px;padding:20px 14px;background:linear-gradient(140deg,#0a2536,#061725);border-color:#32607a}
.uk-panel b{font-size:13px}.uk-panel small{font-size:10.5px}.research{padding:17px}.research span,.research b{font-size:10px}.research small{font-size:9.5px}
/* Cinematic editorial hero — original generated photograph is used directly, no warping. */
.hero{height:466px;min-height:466px;display:flex;align-items:center;position:relative;overflow:hidden;isolation:isolate;background:#061725;border-bottom:1px solid #36556a}
.hero:before{content:"";position:absolute;z-index:-2;inset:0;background-image:url('./assets/photo-hero.webp');background-position:center 51%;background-size:cover;filter:brightness(.87) saturate(.96)}
.hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(4,16,26,.99) 0%,rgba(4,16,26,.98) 25%,rgba(4,16,26,.89) 40%,rgba(4,16,26,.5) 59%,rgba(4,16,26,.08) 100%),linear-gradient(0deg,#051621c4 0%,transparent 33%)}
.hero-text{padding:46px clamp(26px,4.4vw,78px);max-width:860px;position:relative}
.hero .overline{font-size:11px;color:#c7d9e5;letter-spacing:.18em}
.hero h1{font-size:clamp(48px,4.2vw,72px);line-height:1.01;letter-spacing:-.058em;font-weight:790;margin:18px 0 17px;text-wrap:balance;text-shadow:0 4px 28px #0007}
.hero-sub{max-width:575px;font-size:clamp(19px,1.65vw,25px);line-height:1.37;color:#f3f8fb;margin:0}
.scarlet-line{height:3px;width:70px;margin:22px 0 20px;background:#fa444b}
.hero-detail{max-width:490px;font-size:15px;line-height:1.65;color:#d6e5ef;margin:0 0 27px}
.hero .buttons{gap:13px}.hero .button{min-height:48px;padding:13px 19px;font-size:13px;letter-spacing:.002em;border-radius:5px}
.hero .button.primary{background:linear-gradient(135deg,#ff5256,#e3303a);border-color:#fa4b54;box-shadow:0 12px 28px #e12e3b29}
.hero .button.secondary{background:#071927ce;border-color:#69889e}
.hero-context{font-size:11px;letter-spacing:.045em;color:#b4ccda;margin-top:27px}.hero-context span{color:#e85c61;margin:0 10px}
.hero-photocredit{position:absolute;bottom:15px;right:23px;font-size:9px;letter-spacing:.14em;color:#d2e2e5b7;text-shadow:0 1px 5px #000}
/* Rhythmic editorial sections, not an over-compressed dashboard. */
.homepage{padding:24px clamp(16px,2.25vw,38px) 45px;gap:22px}
.panel{border:1px solid #31536b;border-radius:9px;padding:22px;background:linear-gradient(156deg,#0a2030,#081a29 80%);box-shadow:0 8px 25px #020c1526}
.panel-heading{padding:0 0 19px;min-height:0;align-items:center;gap:18px}
.panel-heading>div{gap:6px 17px;display:flex;align-items:baseline;flex-wrap:wrap}
.panel-heading h2{font-size:23px;font-weight:740;letter-spacing:-.035em;border-left:3px solid #f34952;padding-left:13px;white-space:normal;line-height:1.18}
.panel-heading span{color:#b5cbd9;font-size:12.5px;line-height:1.48}
.text-link{font-size:12px;color:#dcecf6;font-weight:690;white-space:nowrap}
/* Workload discovery */
.patterns-five{gap:13px;grid-template-columns:repeat(5,minmax(0,1fr))}
.pattern-card{min-height:180px;border:1px solid #315971;border-radius:7px;padding:18px 15px;gap:12px;align-items:flex-start;flex-direction:column;background:linear-gradient(145deg,#122d40,#0b2132);overflow:hidden}
.pattern-icon{min-width:0;width:56px;height:49px;justify-content:flex-start;align-items:center;color:#a3d7e8}
.pattern-icon svg{width:46px;height:46px}.pattern-card h3{font-size:15px;line-height:1.27;margin:2px 0 9px;padding-right:9px;font-weight:720}
.pattern-card p{font-size:12px;line-height:1.52;color:#c0d3df}.chevron{top:13px;right:11px}
.pattern-card:hover,.adv-card:hover,.sector-card:hover,.industry-tile:hover,.deep-three a:hover{transform:translateY(-3px);box-shadow:0 12px 26px #0006;border-color:#a6cfdd}
/* OCI mechanisms: valuable education content remains diagram-led. */
.advantages-six{gap:13px;grid-template-columns:repeat(6,minmax(0,1fr))}
.adv-card{min-height:272px;border-color:#355d75;border-radius:7px;background:linear-gradient(148deg,#10283a,#0b2030);padding:16px 14px}
.adv-no{width:25px;height:25px;font-size:12px;background:#f34b51}
.adv-card h3{margin:-23px 0 12px 34px;font-size:13.5px;font-weight:720;min-height:36px;line-height:1.28}
.technical-symbol{height:90px}.technical-symbol>svg{width:64px;height:64px;stroke-width:1.35}
.adv-card p{font-size:12px;line-height:1.52;color:#c9dbe6;margin:12px 0 12px}
.caption-stripe{font-size:11px;color:#a8c5d5;line-height:1.4;padding-top:11px}
.caption-stripe>span{width:47px;height:3px}
/* Architecture / evidence must remain legible */
.half-layout{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:19px}
.bottom-layout{grid-template-columns:1fr;gap:19px}
.mapping-grid{padding:5px 0;gap:9px;grid-template-columns:minmax(0,1fr) 17px minmax(0,1.18fr) 17px minmax(0,1fr)}
.mapping-column{padding:16px 12px;background:#112c3e}
.mapping-column small{font-size:10.5px;margin-bottom:10px}.mapping-column>div{font-size:11.5px;line-height:1.45;padding:8px 0;white-space:normal;overflow:visible;align-items:flex-start}
.map-arrows{line-height:45px}.metric-body{gap:12px;padding:3px 0}.metric-body>div{padding:16px 15px;min-height:213px}
.metric-body h4{font-size:13px}.metric-line{font-size:11.5px;padding:7px 0}.metric-explain strong{font-size:14px}.metric-explain p{font-size:12px;line-height:1.6}
.tabbar button{font-size:12px;padding:10px 4px;min-height:41px}
/* Photo sector cards: 3-column gallery is intentional, not a six-thumbnail strip. */
.sectors-six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.sector-card{height:245px;position:relative;padding:0;justify-content:space-between;align-items:stretch;text-align:left;border:1px solid #43697b;border-radius:8px;overflow:hidden;background:#0e2534;isolation:isolate}
.sector-card:before{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,rgba(5,18,29,.12) 0%,rgba(3,16,27,.06) 35%,rgba(3,13,24,.74) 75%,rgba(3,13,24,.99) 100%),var(--sector);background-position:center 49%;background-size:cover;filter:none;opacity:1;z-index:-1;transform:scale(1);transition:transform .45s ease,filter .25s ease}
.sector-card:hover:before{transform:scale(1.055);filter:brightness(1.09)}
.sector-eyebrow{padding:17px 17px 0;font-size:10px!important;letter-spacing:.16em;color:#e9f4fbe6;font-weight:750;text-shadow:0 2px 10px #000a;line-height:1.2}
.sector-content{display:flex;flex-direction:column;gap:6px;padding:31px 19px 20px;position:relative;z-index:1}
.sector-content strong{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:21px;line-height:1.15;font-weight:760;letter-spacing:-.028em;text-shadow:0 2px 16px #000d}
.sector-content strong svg{color:#f7a2a3;width:21px;height:21px}
.sector-content small{font-size:12px;line-height:1.43;color:#dae7ee;text-shadow:0 2px 10px #000c;max-width:280px;min-height:0}
.deep-three{gap:14px}.deep-three a{min-height:131px;padding:21px;border-radius:6px;border-color:#3b6077}.deep-three b{font-size:15px}.deep-three small{font-size:12px}.deep-three a .ico{width:32px;height:32px}
.foot{font-size:10px;letter-spacing:.075em;color:#93b0c2;line-height:1.6;padding:22px clamp(18px,2.25vw,38px)}
/* Detailed sector page: photos are full editorial elements, not faded thumbnails. */
.page-head{padding:46px clamp(24px,4vw,70px) 36px;background:radial-gradient(ellipse at 85% 5%,#21486044,transparent 60%)}
.page-head h1{font-size:clamp(39px,4vw,62px)}.page-head p{font-size:17px;max-width:880px}
.content-wrap{padding:25px clamp(16px,2.25vw,38px) 50px;gap:20px}
.industry-grid{gap:15px;grid-template-columns:repeat(3,minmax(0,1fr))}
.industry-tile{height:235px;border:1px solid #4d6f81;padding:21px;border-radius:8px}
.industry-tile:before{opacity:1;filter:none;background-image:linear-gradient(0deg,#041420f5,transparent 78%),var(--sector);background-position:center;background-size:cover;transition:transform .45s ease}
.industry-tile:hover:before{transform:scale(1.045)}
.industry-tile.selected{border:2px solid #fb6368;box-shadow:0 0 0 3px #e8495226}
.industry-tile b{font-size:23px;text-shadow:0 2px 12px #000}.industry-tile small{font-size:12px;line-height:1.4;color:#eef3f6;text-shadow:0 2px 7px #000}
.industry-detail{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,.8fr) minmax(0,.84fr);gap:25px;padding:22px;align-items:start}
.industry-feature-photo{min-width:0;overflow:hidden;border-radius:6px;border:1px solid #436476;aspect-ratio:16/10}
.industry-feature-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.industry-feature-summary{padding:10px 0}.industry-feature-summary h2{font-size:30px;margin:15px 0 11px}.industry-feature-summary p{font-size:14px;line-height:1.6}
.industry-feature-patterns{padding:7px 0}.industry-feature-patterns h3{font-size:16px}
.pattern-pill{font-size:13px;padding:12px;border-radius:5px}
/* Responsive: do not shrink text to force a compact desktop layout. */
@media (max-width:1600px){
  .patterns-five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .advantages-six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pattern-card{min-height:155px;flex-direction:row;align-items:flex-start;gap:18px}
  .pattern-icon{width:51px;min-width:51px}
  .adv-card{min-height:215px}
  .adv-card h3{min-height:0;font-size:15px}.adv-card p{font-size:13px}
  .technical-symbol{height:75px}
}
@media (max-width:1250px){
  .half-layout{grid-template-columns:1fr}
  .hero{height:440px;min-height:440px}.hero h1{font-size:53px}.hero-text{padding:40px}
  .sectors-six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sector-card{height:235px}
  .industry-detail{grid-template-columns:1fr 1fr}.industry-feature-photo{grid-row:span 2}
}
@media (max-width:1000px){
  .main{margin-left:210px}.sidebar{width:210px}.logo{padding:18px}.hero{height:410px;min-height:410px}
  .hero h1{font-size:46px}.hero-sub{font-size:19px}.hero-text{padding:32px}
  .patterns-five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .advantages-six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .main{margin-left:0}.sidebar{width:min(310px,86vw)}
  .mobile-bar{display:flex;position:sticky;top:0;z-index:15;height:68px;background:#061522eb;backdrop-filter:blur(15px);padding:0 18px;border-bottom:1px solid #294c60}
  .mobile-bar button{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #4e7589;border-radius:5px}
  .mobile-bar b{font-size:21px}.mobile-bar small{font-size:11px}
  .hero{height:440px;min-height:440px}.hero-text{padding:38px 38px}
}
@media (max-width:700px){
  .hero{height:auto;min-height:565px;align-items:flex-end}
  .hero:before{inset:0;background-position:54% top;background-size:auto 430px;filter:brightness(.88)}
  .hero:after{background:linear-gradient(0deg,#051522 0%,#051522 32%,#051522ed 48%,#05152249 73%,#05152200 100%)}
  .hero-text{max-width:none;width:100%;padding:245px 24px 54px}
  .hero .overline{font-size:9.5px;letter-spacing:.11em}.hero h1{font-size:clamp(37px,8.5vw,51px);line-height:1.02;margin:13px 0 13px}
  .hero-sub{font-size:17px;line-height:1.37}.hero-detail{font-size:13px;line-height:1.55;margin-bottom:20px}
  .scarlet-line{margin:17px 0 14px}.hero-context{margin-top:19px;font-size:10px;line-height:1.6}
  .hero-photocredit{top:12px;bottom:auto;right:12px;font-size:7.5px}
  .homepage{padding:15px 12px 35px;gap:15px}.panel{padding:16px}
  .panel-heading{align-items:flex-start;gap:8px;flex-wrap:wrap;padding-bottom:16px}
  .panel-heading>div{display:block}.panel-heading h2{font-size:21px}.panel-heading span{font-size:12.5px;display:block;margin:9px 0 0 16px}
  .panel-heading>.text-link{margin:3px 0 0 16px}
  .patterns-five{grid-template-columns:1fr;gap:10px}
  .patterns-five .pattern-card:last-child{grid-column:auto}
  .pattern-card{min-height:126px;flex-direction:row;gap:14px;padding:16px}
  .pattern-icon{height:52px;width:47px;min-width:47px}.pattern-icon svg{width:43px;height:43px}
  .pattern-card h3{font-size:15px}.pattern-card p{font-size:12.5px}
  .advantages-six{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .adv-card{min-height:252px;padding:14px 12px}.adv-card h3{font-size:13px;line-height:1.3;min-height:33px}
  .adv-card p{font-size:12px}.technical-symbol{height:70px}
  .mapping-grid{grid-template-columns:1fr}.mapping-column>div{font-size:13px}.metric-body{grid-template-columns:1fr}
  .sectors-six{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sector-card{height:190px}
  .sector-eyebrow{font-size:8px!important;padding:12px}.sector-content{padding:25px 13px 14px}
  .sector-content strong{font-size:19px}.sector-content small{font-size:11px}
  .deep-three{grid-template-columns:1fr}.deep-three a{min-height:105px}
  .page-head{padding:32px 24px}.page-head h1{font-size:clamp(35px,7vw,47px)}.page-head p{font-size:15px}
  .content-wrap{padding:17px 12px 36px}
  .industry-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.industry-tile{height:185px;padding:15px}.industry-tile b{font-size:19px}.industry-tile small{font-size:11px}
  .industry-detail{grid-template-columns:1fr;padding:16px;gap:13px}.industry-feature-photo{grid-row:auto;aspect-ratio:16/9}
  .foot{font-size:9.5px;padding:18px}
}
@media (max-width:430px){
  .hero{min-height:605px}.hero-text{padding:232px 20px 46px}.hero h1{font-size:38px}.hero .buttons{display:grid;grid-template-columns:1fr}.hero .button{width:100%}
  .hero-context{font-size:9px}.hero-context span{margin:0 4px}
  .panel{padding:14px}.panel-heading h2{font-size:20px}
  .advantages-six{grid-template-columns:1fr}.adv-card{min-height:0;padding:15px;display:grid;grid-template-columns:1fr 80px;column-gap:12px;align-items:start}
  .adv-card .adv-no{grid-column:1;grid-row:1}.adv-card h3{grid-column:1;grid-row:1;font-size:14px;min-height:0;margin:-23px 0 14px 35px}
  .adv-card .technical-symbol{grid-column:2;grid-row:1 / span 2;align-self:center;height:73px}.adv-card p{grid-column:1;grid-row:2;font-size:12.5px;line-height:1.5;margin:0 0 13px}
  .adv-card .caption-stripe{grid-column:1 / -1;grid-row:3}
  .sectors-six{grid-template-columns:1fr}.sector-card{height:215px}.sector-content strong{font-size:21px}.sector-content small{font-size:12px}
  .industry-grid{grid-template-columns:1fr}.industry-tile{height:235px}.industry-tile b{font-size:23px}
  .tabbar button{font-size:10px}
}
@media (prefers-reduced-motion:reduce){.sector-card:before,.industry-tile:before{transition:none!important}.pattern-card:hover,.adv-card:hover,.sector-card:hover,.industry-tile:hover{transform:none!important}}
/* Final visual acceptance refinements */
@media (min-width:1001px) and (max-width:1600px){
  .patterns-five{grid-template-columns:repeat(6,minmax(0,1fr))}
  .patterns-five .pattern-card{grid-column:span 2}
  .patterns-five .pattern-card:nth-last-child(-n+2){grid-column:span 3}
}
@media (min-width:701px) and (max-width:1000px){
  .patterns-five .pattern-card{grid-column:span 1}
  .patterns-five .pattern-card:last-child{grid-column:span 2}
}
@media (max-width:700px){.patterns-five .pattern-card:last-child{grid-column:span 1}}
.simulation-photo-ribbon{position:relative;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:30px clamp(24px,4vw,70px);background-image:linear-gradient(0deg,rgba(5,19,31,.97) 0%,rgba(5,19,31,.28) 77%),url('./assets/photo-engineering.webp');background-position:center 56%;background-size:cover;border-top:1px solid #2c546b;border-bottom:1px solid #37576a}
.simulation-photo-ribbon span{font-size:11px;letter-spacing:.16em;color:#d5e3ed;font-weight:650;text-shadow:0 2px 10px #000}
.simulation-photo-ribbon strong{font-size:clamp(22px,2.4vw,34px);font-weight:740;letter-spacing:-.03em;line-height:1.18;text-shadow:0 2px 15px #000}
@media (max-width:700px){.simulation-photo-ribbon{min-height:185px;padding:25px 24px;background-position:58% center}.simulation-photo-ribbon span{font-size:9px}.simulation-photo-ribbon strong{font-size:24px}}