/* ====== MK Job Show — shared styles (dev style, guide spectrum) ====== */
:root {
--navy:#0f243f;
--navy-2:#13315a;
--navy-deep:#0c1d34;
--teal:#1b5d72;
--royal:#2f6fb0;
--royal-deep:#235c97;
--sky:#3b7d9f;
--skylt:#8abbd7;
--indigo:#434d95;
--violet:#595eb0;
--purple:#71649b;
--purple-deep:#5d5286;
--cyan:#23a3c4;
--seg-scan:#004C8A;
--seg-record:#5157AF;
--seg-export:#7E61BB;
--ink:#1c2c44;
--muted:#5c6883;
--paper:#ffffff;
--pale:#eef3f8;
--line:rgba(15,36,63,.12);
--display:'Oswald',sans-serif;
--body:'Open Sans',system-ui,sans-serif;
--slant:14deg;
--maxw:1280px;
--spectrum:linear-gradient(100deg,#143a5e 0%,#1b5d72 16%,#2f6fb0 36%,#3b7d9f 50%,#434d95 70%,#595eb0 84%,#71649b 100%);
}

/*----Ninja forms styles ----*/
.field-wrap input[type="submit"] {
	width: 100% !important;
 background: var(--royal);
  color: #fff;
  border: none;
  font-size: 16px;
  color: white;
	padding: 5px;
	cursor: pointer;
	display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 1rem;
  padding: .85rem 1.6rem;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s,transform .2s;
  white-space: nowrap;
}
.nf-field-container {
	margin-bottom: 5px !important;
}
.nf-field {
	font-size: 19px !important;
	
}

.nf-field  {
  width: 100%;
  margin-bottom: 10px;
}
.nf-field-label label {
	display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--navy);
  margin-bottom: 6px;
	text-align: left;
	
}
.nf-field-element select {
	color: gray;
	  background-color: white;
	  border: none;
}
.nf-response-msg a {
	color: #fff !important;
	text-decoration: underline !important;
}
.nf-field-element input, .nf-field-element select, .nf-field-element textarea {
	padding: 5px;
    font-size: 15px !important;
	width: 100%;
  padding: .8rem .95rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-family: var(--body);
  font-size: .98rem;
  color: var(--ink);
  background: var(--pale);
}
.nf-field-element textarea {
	height: 100px !important;
}
.listimage-wrap li label img {
	max-width: 150px !important;
	margin: 0 auto;
}
.listimage-wrap li label {
	font-size: 15px !important;
}

.nf-form-fields-required {
	display: none !important;
}
.padding-right .list-radio-wrap .nf-field-element li {
	margin: 0 15px 0 0 !important;
	display: inline-block;
	font-size: 15px !important;
}
.label-right .field-wrap {
	align-items: center;
}
.label-right .nf-field-label {
	padding-left: 5px !important;
}
.listimage-wrap li label img:hover {
	cursor: pointer;
}


.header-sponsor-logo {
	position: relative !important;
	right: auto !important;
	margin-left: 20px;
}

.header-sponsor-logo img {
	max-width: 220px !important;
	height: auto;
}

* {
margin:0;
padding:0;
box-sizing:border-box}

html {
scroll-behavior:smooth}

body {
font-family:var(--body);
color:var(--ink);
background:var(--paper);
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:hidden}

img {
max-width:100%;
display:block}

a {
color:inherit;
text-decoration:none}

.wrap {
max-width:var(--maxw);
margin:0 auto;
padding:0 28px}

h1,h2,h3,h4 {
font-family:var(--display);
font-weight:700;
line-height:1.05;
text-transform:uppercase;
letter-spacing:.01em;
color:var(--navy)}

/* ---- buttons ---- */
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
letter-spacing:.03em;
font-size:1rem;
padding:.85rem 1.6rem;
border:0;
border-radius:3px;
cursor:pointer;
transition:background .2s,transform .2s;
white-space:nowrap}

.btn-white {
background:#fff;
color:var(--navy)}

.btn-white:hover {
background:var(--seg-export);
color: white; 
transform:translateY(-1px)}

.btn-blue {
background:var(--royal);
color:#fff
}

.btn-blue:hover {
background: white;
color: #3a7ec2;
transform:translateY(-1px)}

.btn-purple {
background:var(--seg-export);
color:#fff}

.btn-purple:hover {
background: white;
color: #6a4fa3;
transform:translateY(-1px)}

.btn-ghost {
background:transparent;
color:#fff;
border:2px solid rgba(255,255,255,.6)}

.btn-ghost:hover {
background:#3a7ec2;
color:#fff; }

.hero .btn-ghost {
background:rgba(15,36,63,.55);
border-color:#fff;
backdrop-filter:blur(2px)}

.hero .btn-ghost:hover {
background:#3a7ec2;
color:#fff; }

.btn-lg {
font-size:1.05rem;
padding:1rem 1.9rem}

/* ---- header ---- */
header {
position:fixed;
top:0;
left:0;
right:0;
z-index:100;
background:linear-gradient(90deg,#1c3a63 0%,#22518a 55%,#2a64a8 100%);
box-shadow:0 1px 0 rgba(0,0,0,.18)}

.nav {
display:flex;
align-items:center;
gap:26px;
padding:14px 28px;
width:1400px;
margin:0 auto}

.logo-mark img {
height:42px;
width:auto;
display:block}

/* roles 'ticks' list icons (visit page) — give the inline SVGs an explicit size so they render */
.ticks li>span {
flex:none;
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
margin-top:2px}

.ticks li>span svg {
width:20px;
height:20px}

/* split logo lockup: MK JOB SHOW (left) | centre:mk MILTON KEYNES (right), like the London sites */
.logo-lockup {
display:flex;
align-items:center;
gap:13px}

.logo-lockup .lm-name {
height:40px;
width:auto;
display:block}

.logo-lockup .lm-venue {
height:30px;
width:auto;
display:block}
@media(max-width:600px) {
.logo-lockup .lm-venue {
display:none}

.logo-lockup .lm-name {
height:36px}
}

.nav-date {
font-family:var(--display);
font-weight:600;
font-size:1.15rem;
color:#fff;
letter-spacing:.02em;
white-space:nowrap}
@media(max-width:820px) {
.nav-date {
display:none}
}

.nav-spacer {
flex:1}

.nav-cta {
display:flex;
align-items:center;
gap:12px}
@media(max-width:560px) {
.nav-cta .btn {
padding:.7rem 1.05rem;
font-size:.88rem;
min-height:44px}
}

.menu-btn {
display:flex;
flex-direction:column;
justify-content:center;
gap:5px;
background:none;
border:0;
cursor:pointer;
padding:8px;
margin-left:2px;
border-radius:5px;
min-width:44px;
min-height:44px;
transition:background .18s}

.menu-btn:hover {
background:rgba(255,255,255,.12)}

.menu-btn span {
width:26px;
height:3px;
background:#fff;
border-radius:2px;
transition:background .18s}

header {
transition:box-shadow .25s}

header.scrolled {
box-shadow:0 6px 22px -8px rgba(8,20,38,.55)}

/* ---- mega-menu ---- */
.megamenu {
position:fixed;
inset:0;
z-index:300;
opacity:0;
pointer-events:none;
transition:opacity .3s}

.megamenu.open {
opacity:1;
pointer-events:auto}

.mm-overlay {
position:absolute;
inset:0;
background:rgba(10,20,45,.6)}

.mm-panel {
position:absolute;
top:0;
right:0;
height:100%;
width:min(520px,100%);
background:linear-gradient(160deg,var(--navy-deep),var(--navy-2));
transform:translateX(100%);
transition:transform .4s cubic-bezier(.2,.85,.25,1);
display:flex;
flex-direction:column;
padding:28px 38px;
overflow-y:auto}

.megamenu.open .mm-panel {
transform:none}

.mm-top {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:26px}

.mm-top img {
height:40px}

.mm-close {
background:rgba(255,255,255,.1);
border:0;
color:#fff;
width:42px;
height:42px;
border-radius:4px;
font-size:1.6rem;
cursor:pointer;
line-height:1}

.mm-col {
margin-bottom:22px}

.mm-col h4 {
font-family:var(--display);
font-weight:600;
font-size:.85rem;
letter-spacing:.12em;
color:var(--skylt);
margin-bottom:8px}

.mm-col a {
display:block;
font-family:var(--display);
font-weight:500;
text-transform:uppercase;
font-size:1.05rem;
color:rgba(255,255,255,.9);
padding:9px 0 9px 0;
border-bottom:1px solid rgba(255,255,255,.1);
border-left:3px solid transparent;
transition:color .18s,padding .18s,border-color .18s}

.mm-col a:hover {
color:#fff;
padding-left:12px;
border-left-color:var(--skylt)}

.mm-cta {
display:flex;
gap:12px;
margin-top:6px}

.mm-cta .btn {
flex:1}

/* ---- hero (shared) ---- */
.hero {
position:relative;
min-height:88vh;
display:flex;
align-items:center;
background:var(--navy);
overflow:hidden}

.hero.short {
min-height:70vh}

.hero-bg {
position:absolute;
inset:0;
z-index:0}

.hero-bg img {
width:100%;
height:100%;
object-fit:cover}

.hero-bg video {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 1s}

.hero-bg video.ready {
opacity:1}
@media(max-width:760px) {
.hero-bg video {
display:none}
}

.hero-bg::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(15,36,63,.66) 0%,rgba(15,36,63,.28) 50%,rgba(31,77,128,.16) 100%),linear-gradient(180deg,rgba(15,36,63,.14),rgba(15,36,63,.32))}

.vh-bg img {
object-position:center 72%}

.vh-bg::after {
background:linear-gradient(90deg,rgba(12,29,52,.88) 0%,rgba(12,29,52,.6) 48%,rgba(31,77,128,.34) 100%),linear-gradient(180deg,rgba(12,29,52,.3),rgba(12,29,52,.4))}

.hero-inner {
position:relative;
z-index:2;
width:100%;
padding:130px 0 70px}

.hero.center .hero-inner {
text-align:center}

.hero h1 {
color:#fff;
font-size:clamp(2.4rem,6vw,5rem);
line-height:1.0;
letter-spacing:.005em;
text-shadow:0 2px 24px rgba(0,0,0,.4);
max-width:20ch}

.hero.center h1 {
margin:0 auto}

.hero h1 .pl {
color:var(--skylt)}

.hero .sub {
color:rgba(255,255,255,.92);
font-size:clamp(1.05rem,1.6vw,1.3rem);
margin-top:16px;
max-width:52ch;
text-shadow:0 1px 12px rgba(0,0,0,.4)}

.hero.center .sub {
margin-left:auto;
margin-right:auto}

.hero-actions {
display:flex;
gap:16px;
flex-wrap:wrap;
margin-top:34px}

.hero.center .hero-actions {
justify-content:center}

/* ---- angled stat/journey band ---- */
.statband {
display:flex;
position:relative;
background:var(--pale);
overflow:hidden}

.statband .cell {
flex:1;
min-width:0;
padding:26px 48px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
min-height:150px}

.statband .cell::before {
content:"";
position:absolute;
top:0;
bottom:0;
left:-10px;
right:-50px;
transform:skewX(calc(-1 * var(--slant)));
z-index:0}

.statband .cell>* {
position:relative;
z-index:1;
width:100%;
max-width:280px;
margin:0 auto}

.cell.label::before {
background:var(--pale)}

.cell.s1::before {
background:var(--seg-scan)}

.cell.s2::before {
background:var(--seg-record)}

.cell.s3::before {
background:var(--seg-export)}

/* label cell */
.cell.label .lt {
display:block;
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
color:var(--navy);
font-size:clamp(1.05rem,1.25vw,1.3rem);
line-height:1.2;
text-align:center}

.statband.center .cell.label {
justify-content:center}

/* numbered step cells: a single centred row, number inline with wrapped label */
.cell.s1,.cell.s2,.cell.s3 {
color:#fff}

.statband .jstep {
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
text-align:center;
justify-content:center}

.statband.center .cell.s1,.statband.center .cell.s2,.statband.center .cell.s3 {
justify-content:center}

.statband .jn {
flex:none;
font-family:var(--display);
font-weight:700;
font-size:clamp(1.4rem,1.8vw,1.85rem);
line-height:1.05;
opacity:.5}

.statband .jt {
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
font-size:clamp(1.02rem,1.25vw,1.32rem);
line-height:1.18;
max-width:15ch}

/* legacy big-number variant (exhibit page uses .numbox now, but keep safe) */
.statband .bn {
font-family:var(--display);
font-weight:700;
font-size:clamp(2rem,4vw,3.1rem);
line-height:1}

.statband .bl {
font-size:.98rem;
opacity:.95;
margin-top:4px}
@media(max-width:820px) {
.statband {
flex-wrap:wrap}

.statband .cell {
flex:1 1 50%;
min-height:112px;
padding:22px 24px}

.statband .cell::before {
transform:none;
left:0;
right:0}

.cell.label {
flex:1 1 100%}

.statband.center .cell.label {
justify-content:center}

.cell.label .lt {
text-align:center}

.statband.center .cell.s1,.statband.center .cell.s2,.statband.center .cell.s3 {
justify-content:center}
}

@media(max-width:520px) {
.statband .cell {
flex:1 1 100%;
min-height:78px}
}

/* ---- info strip ---- */
.infobar {
background:linear-gradient(90deg,#0f243f 0%,#1b4a78 55%,#2f6fb0 100%);
color:#fff}

.infobar .row {
display:flex;
flex-wrap:wrap;
gap:12px 40px;
justify-content:center;
align-items:center;
padding:16px 24px;
font-family:var(--display);
font-weight:500;
text-transform:uppercase;
letter-spacing:.02em;
font-size:1rem}

.infobar span {
display:inline-flex;
align-items:center;
gap:9px}

.infobar svg {
width:18px;
height:18px;
flex-shrink:0;
opacity:.9}

/* ---- generic section ---- */
.sec {
padding:clamp(54px,7vw,92px) 0}

.sec.pale {
background:var(--pale)}

.sec.spectrum {
background:var(--spectrum);
color:#fff}

.sec.navy {
background:linear-gradient(120deg,var(--navy-deep),var(--navy-2));
color:#fff}

.sec.navy.cta-band {
position:relative;
background:linear-gradient(120deg,var(--navy-2) 0%,var(--royal-deep) 100%);
overflow:hidden}

.sec.navy.cta-band.has-img {
background:#0c1d34}

.sec.navy.cta-band.has-img::before {
content:"";
position:absolute;
inset:0;
background-image:url("/wp-content/themes/MKJobshow2026/images/cta-mk.jpg");
background-size:cover;
background-position:center 85%;
z-index:0}

.sec.navy.cta-band.has-img::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(12,29,52,.9) 0%,rgba(13,33,60,.82) 55%,rgba(20,49,84,.78) 100%),linear-gradient(120deg,rgba(12,29,52,.5),rgba(35,92,151,.2));
z-index:1}

.sec.navy.cta-band.has-img>.wrap {
position:relative;
z-index:2}

.sec.navy.cta-band.has-img h2 {
text-shadow:0 2px 18px rgba(8,20,38,.55)}

.sec.navy.cta-band.has-img2 {
background:#0c1d34}

.sec.navy.cta-band.has-img2::before {
content:"";
position:absolute;
inset:0;
background-image:url("/wp-content/themes/MKJobshow2026/images/cta-visit.jpg");
background-size:cover;
background-position:center 60%;
z-index:0}

.sec.navy.cta-band.has-img2::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(12,29,52,.9) 0%,rgba(13,33,60,.82) 55%,rgba(20,49,84,.78) 100%),linear-gradient(120deg,rgba(12,29,52,.5),rgba(35,92,151,.2));
z-index:1}

.sec.navy.cta-band.has-img2>.wrap {
position:relative;
z-index:2}

.sec.navy.cta-band.has-img2 h2 {
text-shadow:0 2px 18px rgba(8,20,38,.55)}

.callcta {
display:flex;
align-items:center;
gap:28px;
max-width:1000px;
margin:0 auto;
background:linear-gradient(120deg,var(--royal),var(--indigo));
border-radius:20px;
padding:34px 40px;
box-shadow:0 30px 70px -34px rgba(47,111,176,.7);
color:#fff}

.callcta-icon {
flex:0 0 auto;
width:62px;
height:62px;
border-radius:16px;
background:rgba(255,255,255,.18);
display:flex;
align-items:center;
justify-content:center}

.callcta-icon svg {
width:32px;
height:32px;
color:#fff}

.callcta-text {
flex:1 1 auto}

.callcta-text h3 {
color:#fff;
font-family:var(--display);
font-weight:700;
text-transform:uppercase;
font-size:clamp(1.25rem,2.2vw,1.65rem);
line-height:1.12}

.callcta-text p {
color:rgba(255,255,255,.9);
margin-top:8px;
font-size:.98rem;
line-height:1.5}

.callcta-actions {
flex:0 0 auto;
display:flex;
flex-direction:column;
align-items:center;
gap:12px}

.callcta-actions .btn-blue {
background:#fff;
color:var(--royal)}

.callcta-actions .btn-blue:hover {
background:#eaf1f9}

.callcta-alt {
color:#fff;
font-family:var(--display);
font-weight:600;
font-size:.95rem;
text-decoration:none;
opacity:.92;
border-bottom:1px solid rgba(255,255,255,.5);
padding-bottom:2px}

.callcta-alt:hover {
opacity:1}
@media(max-width:820px) {
.callcta {
flex-direction:column;
text-align:center;
gap:20px;
padding:32px 26px}

.callcta-actions {
width:100%}

.callcta-actions .btn {
width:100%}
}

.sec-head {
max-width:820px;
margin:0 auto 44px;
text-align:center}

.sec-head h2 {
font-size:clamp(1.9rem,4.2vw,3rem)}

.sec.spectrum .sec-head h2,.sec.navy .sec-head h2 {
color:#fff}

.sec.navy h2,.sec.navy h3,.sec.navy h4,.sec.spectrum h2,.sec.spectrum h3,.sec.spectrum h4 {
color:#fff}

.sec-head p {
margin-top:12px;
font-size:1.1rem;
color:var(--muted)}
@media(min-width:980px) {
.sec-head p.oneline-lg {
max-width:none;
white-space:nowrap}
}

.sec.spectrum .sec-head p,.sec.navy .sec-head p {
color:rgba(255,255,255,.85)}

.eyebrow {
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
letter-spacing:.14em;
font-size:.82rem;
color:var(--royal);
display:inline-block;
margin-bottom:10px}

.sec.spectrum .eyebrow,.sec.navy .eyebrow {
color:var(--skylt)}

/* ---- dual path split (angled photo panels) ---- */
.split-wrap {
padding:clamp(40px,6vw,80px) 0;
background:#fff}

.split-card {
max-width:var(--maxw);
margin:0 auto;
border-radius:16px;
overflow:hidden;
box-shadow:0 30px 80px -40px rgba(8,30,74,.35)}

.split {
display:grid;
grid-template-columns:1fr 1fr;
gap:0;
border-radius:16px;
overflow:hidden}

.path {
position:relative;
min-height:560px;
display:flex;
flex-direction:column;
justify-content:center;
padding:56px 52px;
overflow:hidden;
color:#fff}

.path .pbg {
position:absolute;
inset:0;
z-index:0}

.path .pbg img {
width:100%;
height:100%;
object-fit:cover}

.path.emp .pbg::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(160deg,rgba(0,76,138,.8),rgba(15,36,63,.72))}

.path.job .pbg::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(160deg,rgba(126,97,187,.78),rgba(67,77,149,.74))}

.path>* {
position:relative;
z-index:1}

.path .ptag {
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
letter-spacing:.14em;
font-size:.85rem;
color:rgba(255,255,255,.85);
margin-bottom:12px}

.path h3 {
color:#fff;
font-size:clamp(2rem,3.6vw,3rem);
line-height:1}

.path .pd {
font-size:1.08rem;
margin:16px 0 22px;
max-width:42ch;
color:rgba(255,255,255,.92)}

.path ul {
list-style:none;
display:flex;
flex-direction:column;
gap:11px;
margin-bottom:28px}

.path li {
display:flex;
gap:11px;
align-items:flex-start;
font-size:1.02rem}

.path li svg {
width:21px;
height:21px;
flex-shrink:0;
margin-top:3px;
color:#fff;
opacity:.9}

.path .pacts {
display:flex;
gap:12px;
flex-wrap:wrap}
@media(max-width:860px) {
.split {
grid-template-columns:1fr}

.path {
min-height:auto;
padding:46px 32px}
}

/* ---- icon grid (how it works) ---- */
.howgrid {
display:grid;
grid-template-columns:repeat(6,1fr);
gap:22px}

.howcell {
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
gap:14px}

.howcell .hi {
width:96px;
height:96px;
border-radius:50%;
border:3px solid var(--royal);
display:flex;
align-items:center;
justify-content:center;
background:#fff}

.howcell .hi svg {
width:44px;
height:44px;
color:var(--seg-record)}

.howcell .ht {
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
font-size:1rem;
color:var(--navy);
line-height:1.15}

.howcell.accent .hi {
border-color:var(--seg-export)}
@media(max-width:980px) {
.howgrid {
grid-template-columns:repeat(3,1fr);
gap:28px}
}

@media(max-width:520px) {
.howgrid {
grid-template-columns:repeat(2,1fr)}
}

.reasons {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
max-width:1000px;
margin:36px auto 0}

.rcard {
background:#fff;
border:1px solid var(--line);
border-radius:14px;
padding:28px;
box-shadow:0 16px 44px -30px rgba(8,30,74,.45)}

.rcard .ricon {
width:50px;
height:50px;
border-radius:12px;
background:rgba(47,111,176,.1);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:16px}

.rcard .ricon svg {
width:26px;
height:26px;
color:var(--royal)}

.rcard h4 {
font-family:var(--display);
font-weight:700;
font-size:1.2rem;
color:var(--navy);
line-height:1.15;
margin-bottom:8px}

.rcard p {
font-size:.98rem;
color:var(--muted);
line-height:1.5}
@media(max-width:680px) {
.reasons {
grid-template-columns:1fr}
}

/* ---- feature split (image + copy) ---- */
.feat {
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(34px,5vw,72px);
align-items:center}

.feat.rev .feat-media {
order:2}

.feat-media {
position:relative;
overflow:hidden;
border-radius:6px;
box-shadow:0 24px 60px -30px rgba(8,30,74,.5);
aspect-ratio:4/3}

.feat-media img {
width:100%;
height:100%;
object-fit:cover}

.feat-body h3 {
font-size:clamp(1.7rem,3.2vw,2.5rem);
margin-bottom:16px}

.feat-body h3.h3-1line {
font-size:clamp(1.7rem,2.7vw,2.25rem)}
@media(min-width:760px) {
.feat-body h3.h3-1line {
white-space:nowrap}
}

.sec.spectrum .feat-body h3,.sec.navy .feat-body h3 {
color:#fff}

.feat-body p {
margin-bottom:14px;
font-size:1.05rem}

.feat-actions {
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:22px}
@media(max-width:860px) {
.feat {
grid-template-columns:1fr;
gap:30px}

.feat.rev .feat-media {
order:0}
}

/* ---- capability row (scan/access/rank/record/export style) ---- */
.caps {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:14px;
margin-top:30px}

.cap {
position:relative;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.22);
border-radius:14px;
padding:24px 16px 20px;
text-align:center;
backdrop-filter:blur(3px)}

.cap .cnum {
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%);
width:26px;
height:26px;
border-radius:50%;
background:#fff;
color:var(--royal);
font-family:var(--display);
font-weight:700;
font-size:.85rem;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}

.cap .cicon {
width:46px;
height:46px;
margin:6px auto 14px;
border-radius:12px;
background:rgba(255,255,255,.16);
display:flex;
align-items:center;
justify-content:center}

.cap .cicon svg {
width:24px;
height:24px;
color:#fff}

.cap .ct {
font-family:var(--display);
font-weight:700;
text-transform:uppercase;
font-size:1.12rem;
color:#fff;
letter-spacing:.02em}

.cap .cd {
font-size:.86rem;
color:rgba(255,255,255,.82);
margin-top:5px;
line-height:1.35}
@media(max-width:880px) {
.caps {
grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px) {
.caps {
grid-template-columns:1fr}
}

.incl-strip {
max-width:1000px;
margin:40px auto 0;
background:#fff;
border:1px solid var(--line);
border-radius:18px;
padding:28px 30px;
box-shadow:0 20px 50px -30px rgba(8,30,74,.45)}

.incl-strip .is-lead {
display:flex;
align-items:center;
justify-content:center;
gap:12px;
text-align:center;
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
letter-spacing:.04em;
font-size:.95rem;
line-height:1.3;
color:var(--navy);
padding-bottom:22px;
margin-bottom:22px;
border-bottom:1px solid var(--line)}

.incl-strip .is-lead svg {
width:30px;
height:30px;
flex-shrink:0;
color:var(--royal)}

.incl-strip .is-lead strong {
color:var(--royal);
font-weight:700}

.incl-strip .is-items {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px 14px}

.incl-strip .is-items .ii {
display:flex;
align-items:center;
gap:10px;
font-family:var(--display);
font-weight:600;
font-size:.92rem;
color:var(--navy);
line-height:1.2}

.incl-strip .is-items .ii svg {
width:30px;
height:30px;
flex-shrink:0;
color:var(--royal);
background:rgba(47,111,176,.1);
border-radius:8px;
padding:6px}
@media(max-width:760px) {
.incl-strip .is-items {
grid-template-columns:repeat(2,1fr)}

.incl-strip .is-lead {
flex-direction:column;
gap:8px}
}

@media(max-width:420px) {
.incl-strip .is-items {
grid-template-columns:1fr}
}

.incl-lead {
max-width:760px;
margin:0 auto 30px;
text-align:center}

.incl-lead p {
font-size:1.12rem;
color:var(--muted);
margin-top:12px}

.incl {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
max-width:1080px;
margin:0 auto}

.incl-item {
background:#fff;
border:1px solid var(--line);
border-radius:12px;
padding:22px 20px;
display:flex;
gap:13px;
align-items:flex-start;
box-shadow:0 16px 40px -30px rgba(8,30,74,.4)}

.incl-item svg {
width:24px;
height:24px;
color:var(--royal);
flex-shrink:0;
margin-top:1px}

.incl-item .it {
font-family:var(--display);
font-weight:600;
font-size:1.02rem;
color:var(--navy);
line-height:1.2}

.incl-item .id {
display:block;
font-size:.92rem;
color:var(--muted);
margin-top:4px;
line-height:1.4}

.incl-hi {
grid-column:1/-1;
background:linear-gradient(120deg,var(--royal),var(--indigo));
color:#fff;
border:0;
border-radius:14px;
padding:30px 34px;
display:flex;
gap:18px;
align-items:center;
box-shadow:0 26px 60px -30px rgba(47,111,176,.6)}

.incl-hi svg {
width:40px;
height:40px;
color:#fff;
flex-shrink:0}

.incl-hi .it {
font-family:var(--display);
font-weight:700;
text-transform:uppercase;
font-size:1.3rem;
line-height:1.1;
color:#fff}

.incl-hi .id {
display:block;
font-size:1rem;
opacity:.92;
margin-top:6px;
text-transform:none;
font-family:var(--body);
font-weight:400;
color:#fff}
@media(max-width:920px) {
.incl {
grid-template-columns:repeat(2,1fr)}
}

@media(max-width:520px) {
.incl {
grid-template-columns:1fr}

.incl-hi {
flex-direction:column;
text-align:center}
}

.cap .cd {
font-size:.92rem;
color:rgba(255,255,255,.82);
margin-top:6px}

/* ---- numbers (square stat boxes, exhibitor) ---- */
.funnel {
display:flex;
align-items:stretch;
justify-content:center;
gap:14px;
max-width:1060px;
margin:0 auto;
flex-wrap:nowrap}

.fbox {
flex:1 1 0;
color:#fff;
border-radius:12px;
padding:34px 22px;
text-align:center;
display:flex;
flex-direction:column;
justify-content:center;
box-shadow:0 24px 60px -30px rgba(0,0,0,.55);
position:relative}

.fbox .fstep {
display:block;
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
letter-spacing:.16em;
font-size:.74rem;
opacity:.82;
margin-bottom:10px}

.fbox .nn {
display:block;
font-family:var(--display);
font-weight:700;
font-size:clamp(1.9rem,3.6vw,3rem);
line-height:1}

.fbox .nl {
display:block;
font-size:.98rem;
margin-top:9px;
opacity:.95}

.fbox.s1 {
background:linear-gradient(160deg,var(--teal),var(--sky))}

.fbox.s2 {
background:linear-gradient(160deg,var(--royal),var(--indigo))}

.fbox.s3 {
background:linear-gradient(160deg,var(--violet),var(--seg-export));
transform:scale(1.06);
box-shadow:0 28px 70px -26px rgba(126,97,187,.7);
z-index:1}

.farrow {
flex:0 0 auto;
display:flex;
align-items:center;
color:var(--skylt)}

.farrow svg {
width:30px;
height:30px}
@media(max-width:780px) {
.funnel {
flex-direction:column;
align-items:stretch;
max-width:380px;
gap:10px}

.fbox.s3 {
transform:none}

.farrow {
justify-content:center;
transform:rotate(90deg)}
}

/* ---- trust trio ---- */
.trio {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:980px;
margin:0 auto;
text-align:center}

.trio .tn {
font-family:var(--display);
font-weight:700;
font-size:clamp(2.4rem,4.6vw,3.6rem);
color:var(--seg-record);
line-height:1}

.sec.navy .trio .tn,.sec.spectrum .trio .tn {
color:var(--skylt)}

.trio .tl {
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
font-size:1.05rem;
margin-top:8px;
color:var(--navy)}

.sec.navy .trio .tl,.sec.spectrum .trio .tl {
color:#fff}
@media(max-width:720px) {
.trio {
grid-template-columns:1fr;
gap:26px}
}

/* ---- marquee ---- */
.trust {
background:linear-gradient(120deg,var(--navy-2),var(--royal-deep));
padding:38px 0;
overflow:hidden}

.trust .lead-mini {
text-align:center;
color:#fff;
font-family:var(--display);
font-weight:600;
font-size:.8rem;
letter-spacing:.16em;
text-transform:uppercase;
margin-bottom:22px}

.lead-mini-note {
color:var(--skylt)}

.ec-marquee {
display:flex;
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

.ec-track {
display:flex;
gap:14px;
align-items:center;
padding-right:14px;
animation:scrollX 90s linear infinite;
flex-shrink:0}

.ec-marquee:hover .ec-track {
animation-play-state:paused}

.ec-chip {
display:inline-flex;
align-items:center;
gap:11px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
border-radius:30px;
padding:10px 12px 10px 20px;
white-space:nowrap;
box-shadow:0 6px 18px -10px rgba(0,0,0,.35)}

.ec-chip .ec-name {
font-family:var(--display);
font-weight:600;
font-size:1rem;
color:#fff}

.ec-chip .ec-num {
font-family:var(--display);
font-weight:700;
font-size:.9rem;
color:var(--navy-deep);
background:var(--skylt);
border-radius:30px;
padding:3px 10px;
line-height:1.15;
min-width:24px;
text-align:center}
@keyframes scrollX {
to {
transform:translateX(-100%)}
}

/* ---- gallery (stand inspiration) ---- */
.gallery {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}

.gcard {
position:relative;
overflow:hidden;
border-radius:6px;
aspect-ratio:4/3;
box-shadow:0 16px 40px -26px rgba(8,30,74,.5)}

.gcard img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s}

.gcard:hover img {
transform:scale(1.06)}

.gcard .gcap {
position:absolute;
left:0;
right:0;
bottom:0;
padding:14px 16px;
background:linear-gradient(0deg,rgba(12,29,52,.9),transparent);
color:#fff;
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
font-size:.92rem;
letter-spacing:.02em}
@media(max-width:860px) {
.gallery {
grid-template-columns:repeat(2,1fr)}
}

@media(max-width:520px) {
.gallery {
grid-template-columns:1fr}
}

/* ---- sectors ---- */
.sectors {
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
max-width:1000px;
margin:0 auto}

.sectors span {
background:#fff;
border:1px solid var(--line);
border-radius:4px;
padding:8px 14px;
font-size:.92rem;
color:var(--ink);
font-weight:600}

.sec.pale .sectors span {
background:#fff}

/* regional reach band (MK-specific) */
.region {
text-align:center}

.region .counties {
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
max-width:980px;
margin:26px auto 0}

.region .county {
display:inline-flex;
align-items:center;
gap:9px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.28);
border-radius:5px;
padding:11px 18px;
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
letter-spacing:.04em;
font-size:clamp(.95rem,1.3vw,1.12rem);
color:#fff;
backdrop-filter:blur(2px)}

.region .county svg {
width:18px;
height:18px;
flex:none;
color:var(--skylt)}

.region .region-note {
color:rgba(255,255,255,.9);
max-width:680px;
margin:18px auto 0;
font-size:1.05rem}

/* ---- enquiry form ---- */
.enq-panel {
position:relative;
background:var(--spectrum);
border-radius:32px;
padding:clamp(30px,4.5vw,60px);
box-shadow:0 30px 80px -30px rgba(8,20,38,.5);
overflow:hidden}

.enq-panel .form-copy .eyebrow {
color:var(--skylt)}

.enq-panel .form-copy h2 {
color:#fff}

.enq-panel .form-copy .opt svg {
color:var(--skylt)}

.enq-callbtn {
margin-top:22px;
margin-bottom:6px}

.bk-overlay {
position:fixed;
inset:0;
background:rgba(8,20,38,.72);
z-index:1000;
display:none;
align-items:center;
justify-content:center;
padding:20px;
backdrop-filter:blur(3px)}

.bk-overlay.open {
display:flex}

.bk-modal {
position:relative;
background:#fff;
border-radius:16px;
width:100%;
max-width:900px;
height:min(86vh,820px);
box-shadow:0 40px 100px -30px rgba(8,20,38,.7);
overflow:hidden;
display:flex;
flex-direction:column}

.bk-head {
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 22px;
border-bottom:1px solid var(--line);
flex:0 0 auto}

.bk-head h4 {
font-family:var(--display);
font-weight:700;
text-transform:uppercase;
font-size:1.1rem;
color:var(--navy)}

.bk-close {
background:none;
border:0;
cursor:pointer;
width:36px;
height:36px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--muted)}

.bk-close:hover {
background:var(--pale);
color:var(--navy)}

.bk-close svg {
width:22px;
height:22px}

.bk-body {
flex:1 1 auto;
position:relative}

.bk-body iframe {
width:100%;
height:100%;
border:0}

.bk-loading {
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
color:var(--muted);
font-family:var(--display);
font-size:.95rem}

.reg-overlay {
position:fixed;
inset:0;
background:rgba(8,20,38,.72);
z-index:1000;
display:none;
align-items:center;
justify-content:center;
padding:24px;
backdrop-filter:blur(3px)}

.reg-overlay.open {
display:flex}

.reg-modal {
position:relative;
background:#fff;
border-radius:16px;
width:100%;
max-width:960px;
height:min(90vh,900px);
box-shadow:0 40px 100px -30px rgba(8,20,38,.7);
overflow:hidden;
display:flex;
flex-direction:column}

.reg-head {
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 22px;
border-bottom:1px solid var(--line);
flex:0 0 auto}

.reg-head h4 {
font-family:var(--display);
font-weight:700;
text-transform:uppercase;
font-size:1.1rem;
color:var(--navy)}

.reg-close {
background:none;
border:0;
cursor:pointer;
width:36px;
height:36px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--muted)}

.reg-close:hover {
background:var(--pale);
color:var(--navy)}

.reg-close svg {
width:22px;
height:22px}

.reg-body {
flex:1 1 auto;
position:relative}

.reg-body iframe {
width:100%;
height:100%;
border:0}

.reg-loading {
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
color:var(--muted);
font-family:var(--display);
font-size:.95rem}

.formwrap {
display:grid;
grid-template-columns:1fr 1fr;
gap:48px;
align-items:start;
max-width:1060px;
margin:0 auto}

.form-copy h2 {
font-size:clamp(1.9rem,3.6vw,2.8rem);
color:#fff}

.form-copy p {
color:rgba(255,255,255,.86);
margin-top:14px;
font-size:1.06rem}

.form-copy .opt {
display:flex;
gap:12px;
align-items:flex-start;
margin-top:18px;
color:#fff}

.form-copy .opt svg {
width:22px;
height:22px;
color:var(--skylt);
flex-shrink:0;
margin-top:3px}

.form-card {
background:#fff;
border-radius:18px;
padding:32px;
box-shadow:0 16px 40px -16px rgba(8,20,38,.35)}

.jobseeker-redirect {
display:block;
background:var(--pale,#eef3f8);
border:1px solid var(--line);
border-radius:12px;
padding:12px 14px;
margin-bottom:20px;
font-size:.92rem;
color:var(--navy);
text-decoration:none;
line-height:1.4}

.jobseeker-redirect strong {
color:var(--royal);
white-space:nowrap}

.jobseeker-redirect:hover {
border-color:var(--royal)}

.form-card h3 {
font-size:1.4rem;
color:var(--navy);
margin-bottom:6px}

.form-card .fsub {
color:var(--muted);
font-size:.95rem;
margin-bottom:20px}

.field {
margin-bottom:15px}

.field label {
display:block;
font-family:var(--display);
font-weight:600;
font-size:.82rem;
text-transform:uppercase;
letter-spacing:.02em;
color:var(--navy);
margin-bottom:6px}

.field input,.field textarea {
width:100%;
padding:.8rem .95rem;
border:1.5px solid var(--line);
border-radius:12px;
font-family:var(--body);
font-size:.98rem;
color:var(--ink);
background:var(--pale)}

.field input:focus,.field textarea:focus {
outline:none;
border-color:var(--royal);
background:#fff}

.field textarea {
resize:vertical;
min-height:90px}

.frow {
display:grid;
grid-template-columns:1fr 1fr;
gap:13px}

.form-card .btn {
width:100%;
margin-top:6px}

.form-card .callbar {
margin-top:16px;
padding-top:16px;
border-top:1px solid var(--line);
text-align:center;
font-size:.95rem;
color:var(--muted)}

.form-card .callbar a {
color:var(--royal);
font-weight:700}
@media(max-width:860px) {
.formwrap {
grid-template-columns:1fr;
gap:30px}
}

/* ---- testimonials ---- */
.quotes {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px}

.quote {
background:#fff;
border:1px solid var(--line);
border-radius:8px;
padding:30px;
display:flex;
flex-direction:column;
gap:16px;
box-shadow:0 16px 40px -30px rgba(8,30,74,.4)}

.quote .qm {
font-family:var(--display);
font-weight:700;
font-size:3rem;
color:var(--seg-export);
line-height:.6;
height:26px}

.quote p {
color:var(--ink);
font-size:1.02rem}
@media(max-width:860px) {
.quotes {
grid-template-columns:1fr}
}

/* ---- exhibitor testimonials ---- */
.etestis {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px}

.etesti {
background:#fff;
border:1px solid var(--line);
border-radius:8px;
padding:30px;
margin:0;
display:flex;
flex-direction:column;
gap:18px;
box-shadow:0 16px 40px -30px rgba(8,30,74,.4);
position:relative}

.etesti::before {
content:"\201C";
font-family:var(--display);
font-weight:700;
font-size:3rem;
color:var(--seg-export);
line-height:.6;
height:24px}

.etesti blockquote {
margin:0;
color:var(--ink);
font-size:1.04rem;
line-height:1.5;
flex:1}
@media(max-width:860px) {
.etestis {
grid-template-columns:1fr}
}

/* ---- BSL / info callout ---- */
.callout {
display:grid;
grid-template-columns:1fr 1fr;
gap:48px;
align-items:center}

.callout-media {
border-radius:8px;
overflow:hidden;
aspect-ratio:16/10;
box-shadow:0 24px 60px -34px rgba(8,30,74,.5)}

.callout-media img {
width:100%;
height:100%;
object-fit:cover}

.callout h3 {
font-size:clamp(1.6rem,3vw,2.3rem);
margin-bottom:14px}

.callout p {
margin-bottom:12px;
font-size:1.04rem}
@media(max-width:860px) {
.callout {
grid-template-columns:1fr;
gap:28px}
}

/* ---- footer ---- */
footer {
background:linear-gradient(120deg,var(--navy-deep),var(--navy-2));
color:#fff;
padding:60px 0 30px}

.foot-grid {
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1.4fr;
gap:40px;
padding-bottom:40px;
border-bottom:1px solid rgba(255,255,255,.14)}

.foot-brand img {
height:38px;
margin-bottom:16px}

.foot-brand p {
color:rgba(255,255,255,.66);
font-size:.95rem;
max-width:32ch}

.foot-col h5 {
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
letter-spacing:.1em;
font-size:.82rem;
color:var(--skylt);
margin-bottom:14px}

.foot-col a {
display:block;
color:rgba(255,255,255,.82);
font-size:.95rem;
margin-bottom:10px}

.foot-col a:hover {
color:#fff}

.shows-row {
display:flex;
gap:12px;
flex-wrap:wrap}

.show-card {
flex:1 1 0;
min-width:84px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
border-radius:6px;
padding:14px 10px;
transition:background .2s,transform .2s}

.show-card:hover {
background:rgba(255,255,255,.12);
transform:translateY(-2px)}

.show-card img {
height:48px;
width:auto;
object-fit:contain;
opacity:.92}

.foot-bottom {
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
flex-wrap:wrap;
padding-top:22px}

.foot-bottom p {
color:rgba(255,255,255,.5);
font-size:.85rem}

.socials {
display:flex;
gap:11px}

.socials a {
width:38px;
height:38px;
border-radius:5px;
background:rgba(255,255,255,.08);
display:flex;
align-items:center;
justify-content:center;
transition:background .2s,transform .2s}

.socials a:hover {
background:var(--seg-export);
transform:translateY(-2px)}

.socials svg {
width:18px;
height:18px;
color:#fff}
@media(max-width:860px) {
.foot-grid {
grid-template-columns:1fr 1fr;
gap:30px}
}

@media(max-width:520px) {
.foot-grid {
grid-template-columns:1fr}
}

/* ---- reveal ---- */
.reveal {
opacity:0;
transform:translateY(26px);
transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}

.reveal.in {
opacity:1;
transform:none}

.reveal.d1 {
transition-delay:.07s}

.reveal.d2 {
transition-delay:.14s}

.reveal.d3 {
transition-delay:.21s}
@media(prefers-reduced-motion:reduce) {
.reveal {
opacity:1;
transform:none;
transition:none}

.ec-track {
animation:none}
}

/* ---- micro-interactions ---- */
.rcard,.gcard,.fbox {
transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}

.rcard:hover {
transform:translateY(-6px);
box-shadow:0 18px 40px -18px rgba(8,20,38,.4)}

.gcard:hover {
transform:translateY(-5px);
box-shadow:0 20px 44px -18px rgba(8,20,38,.45)}

.fbox:hover {
transform:translateY(-5px)}

.sec.spectrum {
background:var(--spectrum);
background-size:220% 220%;
animation:specDrift 26s ease infinite}
@keyframes specDrift {
0% {
background-position:0% 50%}

50% {
background-position:100% 50%}

100% {
background-position:0% 50%}
}

.count-flip {
display:inline-block}

.funnel-note {
margin-top:18px;
text-align:center;
font-size:.85rem;
color:rgba(255,255,255,.7);
max-width:680px;
margin-left:auto;
margin-right:auto}

.funnel-frame {
text-align:center;
font-size:1.08rem;
color:rgba(255,255,255,.92);
max-width:760px;
margin:0 auto 28px}

.funnel-frame strong {
color:#fff;
font-weight:700}

.mid-reg {
margin-top:36px;
text-align:center}

.br-desk {
display:none}
@media(min-width:720px) {
.br-desk {
display:inline}
}

@media(prefers-reduced-motion:reduce) {
.sec.spectrum {
animation:none;
background-size:auto}
}

/* ===== Sector section (replaces old exhibitor marquee) ===== */
.secx {
position:relative;
background:linear-gradient(120deg,var(--navy-deep),var(--navy-2));
color:#fff;
padding:clamp(58px,7vw,96px) 0;
overflow:hidden}

.secx::before {
content:"";
position:absolute;
inset:0;
background:radial-gradient(1200px 500px at 80% -10%,rgba(47,111,176,.28),transparent 60%);
z-index:0}

.secx .wrap {
position:relative;
z-index:1}

.secx-head {
max-width:none;
margin:0 auto 22px;
text-align:center}

.secx-eyebrow {
font-family:var(--display);
font-weight:600;
text-transform:uppercase;
letter-spacing:.18em;
font-size:.8rem;
color:var(--skylt)}

.secx-head h2 {
font-family:var(--display);
font-weight:700;
font-size:clamp(1.15rem,4.4vw,3.2rem);
line-height:1.04;
margin:.32em 0 .3em;
color:#fff;
white-space:nowrap}

.secx-legend {
display:flex;
align-items:center;
justify-content:center;
gap:9px;
margin:16px auto 30px;
font-size:.85rem;
color:rgba(255,255,255,.62);
text-align:center}

.secx-lg {
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--royal);
color:#fff;
border-radius:30px;
padding:3px 11px;
font-family:var(--display);
font-weight:600;
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.03em;
white-space:nowrap}

.secx-tabs {
display:flex;
flex-wrap:wrap;
gap:8px;
justify-content:center;
max-width:1080px;
margin:0 auto 32px}

.secx-tab {
font-family:var(--display);
font-weight:500;
font-size:.85rem;
letter-spacing:.02em;
text-transform:uppercase;
color:rgba(255,255,255,.74);
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
border-radius:30px;
padding:9px 16px;
cursor:pointer;
transition:.18s;
line-height:1.1}

.secx-tab:hover {
background:rgba(255,255,255,.13);
color:#fff}

.secx-tab.on {
background:#fff;
color:var(--navy);
border-color:#fff;
box-shadow:0 4px 14px rgba(4,12,26,.3)}

.secx-panel {
animation:secxf .25s ease}
@keyframes secxf {
from {
opacity:0;
transform:translateY(6px)}

to {
opacity:1;
transform:none}
}

.secx-grid {
display:grid;
grid-template-columns:repeat(9,1fr);
gap:9px;
margin:0 auto}

.secx-grid[hidden] {
display:none}

.secx-more {
margin-top:9px}

.secx-tile {
width:100%;
position:relative;
display:flex;
flex-direction:column;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 10px rgba(4,12,26,.26);
transition:transform .15s,box-shadow .15s;
padding-bottom:30px}

.secx-tile:hover {
transform:translateY(-3px);
box-shadow:0 8px 22px rgba(4,12,26,.4)}

.secx-logo {
width:100%;
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:2/1;
padding:11px 12px 7px}

.secx-logo img {
max-width:100%;
max-height:100%;
object-fit:contain}

.secx-badge {
position:absolute;
left:8px;
right:8px;
bottom:8px;
display:block;
text-align:center;
background:var(--royal);
color:#fff;
font-family:var(--display);
font-weight:600;
font-size:.6rem;
letter-spacing:.03em;
text-transform:uppercase;
padding:4px 3px;
line-height:1.1;
border-radius:4px}

.secx-chip {
background:linear-gradient(150deg,#193a64,#21508a);
border:1px solid rgba(255,255,255,.16);
box-shadow:none}

.secx-chip:hover {
transform:translateY(-3px)}

.secx-chip .secx-logo {
padding:10px 8px;
min-height:0}

.secx-chip-name {
font-family:var(--display);
font-weight:500;
font-size:.74rem;
color:#fff;
line-height:1.18;
text-align:center}

.secx-chip .secx-badge {
background:rgba(255,255,255,.16)}

.secx-morewrap {
text-align:center;
margin-top:22px}

.secx-morebtn {
display:inline-flex;
align-items:center;
gap:9px;
font-family:var(--display);
font-weight:500;
font-size:.9rem;
letter-spacing:.03em;
text-transform:uppercase;
color:#fff;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.22);
border-radius:30px;
padding:11px 22px;
cursor:pointer;
transition:.18s}

.secx-morebtn:hover {
background:rgba(255,255,255,.16)}

.secx-plus {
color:var(--skylt);
font-weight:600}

.secx-quotes {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:18px;
max-width:1000px;
margin:36px auto 0}

.secx-q {
margin:0;
background:rgba(255,255,255,.06);
border-left:3px solid var(--skylt);
border-radius:0 10px 10px 0;
padding:22px 26px}

.secx-q p {
margin:0 0 12px;
font-size:1.02rem;
line-height:1.55;
color:#fff}

.secx-q cite {
font-family:var(--display);
font-style:normal;
font-weight:500;
font-size:.8rem;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--skylt)}

.secx-qcount {
color:rgba(255,255,255,.5);
font-weight:400}
@media(max-width:1100px) {
.secx-grid {
grid-template-columns:repeat(7,1fr)}
}

@media(max-width:860px) {
.secx-grid {
grid-template-columns:repeat(5,1fr)}
}

@media(max-width:640px) {
.secx-grid {
grid-template-columns:repeat(4,1fr);
gap:8px}

.secx .wrap {
padding:0 16px}

.secx-head h2 {
font-size:4.5vw}
}

@media(max-width:480px) {
.secx-grid {
grid-template-columns:repeat(3,1fr)}

.secx-chip-name {
font-size:.7rem}

.secx-head h2 {
font-size:4.5vw}
}

@media(max-width:360px) {
.secx-grid {
grid-template-columns:repeat(2,1fr)}
}