/* KMSS website – Bootstrap 5 theme. Layout follows the original Photon template;
   colours follow the SPOCS 32 exhibition branding (navy, cyan, SPOCS green). */

:root {
  --kmss-navy: #1b3560;        /* header band, footer */
  --kmss-navy-light: #24477e;  /* logo block, slider side, testimonials */
  --kmss-navy-deep: #122746;   /* contact box, slide backdrop */
  --kmss-accent: #1479bd;      /* buttons, links, active states (white text passes AA) */
  --kmss-accent-dark: #0e5f96;
  --kmss-cyan: #2aa9e0;        /* headings / icons on navy, decorative icons */
  --kmss-green: #2f9e44;       /* SPOCS "32" green, small highlights */
  --kmss-steel: #a3a8ad;       /* SPOCS lettering grey */
  --kmss-text: #686868;
  --kmss-muted: #9b9b9b;
  --kmss-grey-bg: #eeeeee;
  --kmss-panel: #f0f0f0;
  --kmss-line: rgba(136, 136, 136, 0.25);
  --kmss-container: 1150px;
  --font-body: "Open Sans", Helvetica, Tahoma, Geneva, Arial, sans-serif;
  --font-head: "Dosis", Helvetica, Tahoma, Geneva, Arial, sans-serif;

  --bs-primary: var(--kmss-accent);
  --bs-primary-rgb: 20, 121, 189;
  --bs-link-color: var(--kmss-accent);
  --bs-link-color-rgb: 20, 121, 189;
  --bs-link-hover-color: var(--kmss-accent-dark);
  --bs-link-hover-color-rgb: 14, 95, 150;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--kmss-text);
  background: var(--kmss-grey-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-family: var(--font-head); color: #555; }
h1 { font-weight: 300; font-size: 2.25rem; margin-bottom: 1.25rem; }
h2 { font-weight: 600; font-size: 1.9rem; margin: 2rem 0 1rem; }
h3 { font-weight: 600; font-size: 1.45rem; margin: 1.5rem 0 .75rem; }
h4 { font-weight: 600; font-size: 1.2rem; }
p { margin: 0 0 1.3rem; }
a { color: var(--kmss-accent); text-decoration: none; }
a:hover { color: var(--kmss-accent-dark); }
img { max-width: 100%; height: auto; }
hr { border-color: var(--kmss-line); opacity: 1; margin: 2.5rem 0; }

.container-kmss {
  max-width: var(--kmss-container);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1200px) { .container-kmss { padding: 0; } }

/* ---------- Buttons ---------- */
.btn-kmss {
  display: inline-block;
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .02rem;
  color: #fff;
  background: var(--kmss-accent);
  border: 2px solid transparent;
  border-radius: 0;
  padding: .5rem 1rem;
  transition: background .2s;
}
.btn-kmss:hover, .btn-kmss:focus { background: var(--kmss-accent-dark); color: #fff; }
.btn-primary {
  --bs-btn-bg: var(--kmss-accent); --bs-btn-border-color: var(--kmss-accent);
  --bs-btn-hover-bg: var(--kmss-accent-dark); --bs-btn-hover-border-color: var(--kmss-accent-dark);
  --bs-btn-active-bg: var(--kmss-accent-dark); --bs-btn-active-border-color: var(--kmss-accent-dark);
  border-radius: 0;
}

/* ---------- Header / navigation ---------- */
.site-top {
  background: var(--kmss-navy);
  color: #fff;
  position: relative;
  z-index: 1030;
}
.site-top .container-kmss { position: relative; display: flex; align-items: flex-start; min-height: 100px; }

.brand-block {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;                /* the logo's grey SPOCS lettering needs a light background */
  padding: 1rem 1.6rem 1.1rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, .45);
  z-index: 10;
  line-height: 0;
}
.brand-block img { height: 118px; width: auto; }

.main-nav {
  margin-left: 220px;
  display: flex;
  align-items: center;
  flex: 1;
  padding-top: 1.85rem;
}
.main-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.main-nav > ul > li { position: relative; margin: 0 .5rem; }
.main-nav > ul > li > a,
.main-nav > ul > li > button {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  background: none;
  border: 0;
  padding: 0 0 .9rem;
  border-bottom: 2px solid transparent;
  transition: color .3s, border-color .6s;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li > button:hover,
.main-nav > ul > li:hover > button { color: #fff; }
.main-nav > ul > li.active > a,
.main-nav > ul > li.active > button { color: #fff; border-bottom-color: #fff; }
.main-nav .caret { font-size: .6rem; margin-left: .35rem; opacity: .75; }

.main-nav .dropdown-panel {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 200px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  padding: .4rem 1rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.main-nav .dropdown-panel::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 1.5rem;
  border: 7px solid transparent;
  border-top: 0;
  border-bottom-color: #fff;
}
.main-nav li:hover > .dropdown-panel,
.main-nav li:focus-within > .dropdown-panel,
.main-nav li.open > .dropdown-panel { opacity: 1; visibility: visible; transform: none; }
.main-nav .dropdown-panel a {
  display: block;
  padding: .55rem 0;
  font-size: .85rem;
  color: var(--kmss-text);
  border-bottom: 1px solid var(--kmss-line);
}
.main-nav .dropdown-panel li:last-child a { border-bottom: 0; }
.main-nav .dropdown-panel a:hover,
.main-nav .dropdown-panel a.current { color: var(--kmss-accent); }

.social-link {
  margin-left: auto;
  margin-top: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  font-size: .9rem;
  color: var(--kmss-navy);
  background: rgba(255, 255, 255, .35);
}
.social-link:hover { background: var(--kmss-cyan); color: #fff; }

.nav-toggle {
  display: none;
  margin-left: auto;
  margin-top: 1.5rem;
  background: none;
  border: 0;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}

/* Mobile offcanvas menu */
.offcanvas.kmss-offcanvas { background: var(--kmss-navy-light); color: #fff; width: 280px; }
.kmss-offcanvas .offcanvas-header .btn-close { filter: invert(1); opacity: .8; }
.kmss-offcanvas ul { list-style: none; padding: 0; margin: 0; }
.kmss-offcanvas a {
  display: block;
  color: #fff;
  padding: .7rem 0;
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.kmss-offcanvas a.active { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.kmss-offcanvas .sub a { text-transform: none; font-weight: 400; padding-left: 1rem; color: rgba(255, 255, 255, .85); }
.kmss-offcanvas .sub-label {
  padding: .7rem 0; font-weight: 700; font-size: .85rem; text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

@media (max-width: 991.98px) {
  .main-nav, .social-link { display: none; }
  .nav-toggle { display: block; }
  .site-top .container-kmss { min-height: 70px; }
  .brand-block { padding: .5rem .9rem .6rem; }
  .brand-block img { height: 60px; }
}

/* ---------- Page header (title band) ---------- */
.page-header-band {
  background: linear-gradient(var(--kmss-navy) 0, var(--kmss-navy) calc(100% - 25px), transparent calc(100% - 25px));
  padding-top: 0;
}
.page-header-box {
  background: var(--kmss-panel);
  text-align: center;
  padding: 2.75rem 2rem 2.5rem;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .05);
}
.page-header-box h1 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 2.6rem;
  color: var(--kmss-navy);
  margin: 0 0 1.4rem;
}
.page-header-box p {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--kmss-muted);
  max-width: 820px;
  margin: 0 auto;
}
.page-header-box p a { color: var(--kmss-accent); }
@media (max-width: 991.98px) {
  .page-header-band { padding-top: 1.5rem; }
  .page-header-box h1 { font-size: 2rem; }
}

/* ---------- Main content box ---------- */
.page-body {
  position: relative;
  z-index: 2;
  margin-top: 25px;
  margin-bottom: -6rem;
}
.content-box {
  background: #fff;
  padding: 2.5rem 2.2rem;
}
.content-box + .content-box { margin-top: 25px; }
.content-box > h1:first-child,
.content-box .article-body > h1:first-child { margin-top: 0; }
.content-box h1 { color: var(--kmss-text); }
.content-box ul { padding-left: 1.4rem; margin-bottom: 1.3rem; }
.content-box li { margin-bottom: .25rem; }
.img-center { display: block; margin: 1.5rem auto 2rem; }
.w-80 { width: 80%; }
.w-60 { width: 60%; }
.w-50 { width: 50%; }
@media (max-width: 767.98px) {
  .content-box { padding: 1.75rem 1.1rem; }
  .w-80, .w-60, .w-50 { width: 100%; }
}

.ratio-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 1.5rem; }
.ratio-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Sidebar for product pages with an info pack */
.aside-media img { width: 100%; border-radius: 4px; }
.download-card {
  display: block;
  border: 1px solid #e5e5e5;
  text-align: center;
  padding: 2rem 1rem 1.75rem;
  margin-top: 2rem;
  color: var(--kmss-accent);
  font-size: .85rem;
  transition: box-shadow .2s;
}
.download-card i { font-size: 2.6rem; display: block; margin-bottom: 1.1rem; }
.download-card:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, .08); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--kmss-navy);
  color: rgba(255, 255, 255, .75);
  padding: 9rem 0 0;          /* the page's white box overlaps the top 6rem */
  font-size: .875rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.footer-brand p { margin: 1rem 0 1.25rem; max-width: 260px; line-height: 1.6; }
.footer-logo { display: inline-block; background: #fff; padding: .75rem 1rem; border-radius: 6px; line-height: 0; }
.footer-logo img { height: 84px; width: auto; }
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background .2s;
}
.footer-social:hover { background: var(--kmss-cyan); color: #fff; }
.footer-heading {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kmss-cyan);
  margin: .25rem 0 1rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .45rem; }
.site-footer a { color: rgba(255, 255, 255, .85); }
.site-footer a:hover { color: #fff; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-contact p { display: flex; gap: .7rem; margin: 0 0 .8rem; line-height: 1.5; }
.footer-contact i { color: var(--kmss-cyan); width: 1rem; margin-top: .25rem; flex-shrink: 0; text-align: center; }

.footer-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: .75rem 1.25rem;
  background: #fff;
  border-radius: 6px;
  transition: transform .2s, box-shadow .2s;
}
a.footer-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.footer-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
}

@media (max-width: 991.98px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-badges { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
  .footer-brand, .footer-contact { grid-column: 1 / -1; }   /* Products and Company side by side */
  .footer-badge { height: 76px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ---------- Home: slideshow ---------- */
.home-hero {
  background: linear-gradient(var(--kmss-navy) 0, var(--kmss-navy) calc(100% - 35px), transparent calc(100% - 35px));
}
.hero-slider { display: flex; position: relative; }
.hero-main { flex: 0 0 68%; position: relative; overflow: hidden; background: var(--kmss-navy-deep); }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 39, 70, .1), rgba(18, 39, 70, .65));
}
.hero-stage { position: relative; height: 510px; }
.hero-caption {
  position: absolute;
  left: 1.6rem;
  right: 1.6rem;
  bottom: 2.2rem;
  z-index: 2;
  color: #fff;
}
.hero-caption h2 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 .25rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.hero-caption p { font-size: .95rem; margin: 0 0 1rem; max-width: 560px; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }

.hero-pager {
  display: flex;
  background: var(--kmss-navy);
  padding-left: 1.6rem;
  height: 45px;
}
.hero-pager button {
  width: 31px;
  border: 0;
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
}
.hero-pager button.active { background: var(--kmss-green); }

.hero-side {
  flex: 0 0 32%;
  display: flex;
  flex-direction: column;
  background: var(--kmss-navy-light);
}
.hero-headlines { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
.hero-headlines li {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  color: rgba(255, 255, 255, .4);
  font-size: .9rem;
  cursor: pointer;
  position: relative;
  transition: color .3s, background .3s, margin .3s, box-shadow .3s;
}
.hero-headlines li i { width: 1.6rem; font-size: .75rem; }
.hero-headlines li:hover { color: rgba(255, 255, 255, .8); }
.hero-headlines li.active {
  background: var(--kmss-accent);
  color: #fff;
  margin-left: -1.5rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, .35);
  z-index: 2;
}
.hero-nav { display: flex; height: 45px; }
.hero-nav button {
  flex: 1;
  border: 0;
  background: var(--kmss-accent);
  color: #fff;
}
.hero-nav button + button { background: var(--kmss-navy); }
.hero-nav button:hover { background: var(--kmss-accent-dark); }

@media (max-width: 991.98px) {
  .home-hero { padding-top: 1.5rem; }
  .hero-main { flex-basis: 100%; }
  .hero-side { display: none; }
  .hero-stage { height: 380px; }
  .hero-caption h2 { font-size: 2.1rem; }
}

/* ---------- Home: showcase ---------- */
.showcase { display: flex; flex-wrap: wrap; background: #fff; }
.showcase-left { flex: 0 0 68%; padding: 2.4rem 1.6rem 1rem; }
.showcase-right { flex: 0 0 32%; display: flex; flex-direction: column; }
.showcase-title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 2.5rem;
  color: var(--kmss-navy);
  margin: 0 0 1.4rem;
}
.lead-text { font-size: 1.05rem; color: var(--kmss-muted); line-height: 1.4; margin-bottom: 2.5rem; }

.strip-title {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kmss-text);
  background: var(--kmss-grey-bg);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
  padding: .65rem .9rem;
  border-left: 4px solid var(--kmss-green);
  margin: 0 -.9rem 2rem;
}
.infolist-item { display: flex; gap: 1rem; margin-bottom: 2rem; }
.infolist-item .icon { font-size: 1.6rem; color: var(--kmss-cyan); width: 2rem; flex-shrink: 0; text-align: center; }
.infolist-item h3 { font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; color: #555; margin: 0 0 .5rem; }
.infolist-item p { font-size: .8rem; margin: 0; }

.contact-box {
  background: var(--kmss-navy-deep);
  color: #fff;
  padding: 1.5rem 1.6rem 1.25rem;
}
.contact-box h4 {
  font-family: var(--font-head);
  color: var(--kmss-cyan);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.contact-box .phone { font-size: 1.4rem; margin-bottom: 1rem; }
.contact-box .email { color: var(--kmss-cyan); font-size: .8rem; font-weight: 700; }
.contact-box .email:hover { color: #fff; }
.contact-box address { margin: 1rem 0 0; font-size: .9rem; }
.map-embed { flex: 1; min-height: 340px; }
.map-embed iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

@media (max-width: 991.98px) {
  .showcase-left, .showcase-right { flex-basis: 100%; }
}

/* ---------- Home: testimonials ---------- */
.testimonials {
  background: var(--kmss-navy-light);
  color: #fff;
  margin-top: 2rem;
  padding: 1.1rem 1.6rem 1.5rem;
  box-shadow: 2px 1px 15px rgba(0, 0, 0, .05);
}
.testimonials h2 {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kmss-cyan);
  margin: 0;
}
.testimonials blockquote {
  text-align: center;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  max-width: 1000px;
  margin: 0 auto;
  padding: 3rem 1rem 1rem;
}
.testimonial-dots { display: flex; justify-content: center; align-items: center; gap: .6rem; min-height: 70px; }
.testimonial-dots button,
.carousel-indicators.testimonial-dots [data-bs-target] {
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0;
  text-indent: 0;
  background-clip: border-box;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  opacity: .5;
  padding: 0;
  transition: all .2s ease-out;
}
.carousel-indicators.testimonial-dots .active { width: 45px; height: 45px; opacity: 1; }
.carousel-fade .carousel-item { transition-duration: .6s; }

/* ---------- About ---------- */
.content-box h2 i, .content-box h3 i { margin-right: 8px; }
.about-body h2 { font-size: 1.7rem; margin-top: 1.25rem; }
.about-body h3 { font-size: 1.3rem; margin-top: 1.25rem; }
.about-body p { font-size: .85rem; }
.sdg-item img { width: 140px; margin-bottom: .4rem; }
.sdg-item h4 { font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; color: #555; margin: 0 0 .2rem; }
.sdg-item p { font-size: .85rem; }
.team-title { font-family: var(--font-head); font-weight: 400; font-size: 1.8rem; margin: 0 0 1.5rem; }
.team-card { text-align: center; }
.team-card .photo { width: 100%; max-width: 250px; aspect-ratio: 250 / 385; object-fit: cover; margin-bottom: 1rem; }
.team-card h4 { margin-bottom: .1rem; }
.team-card .role { color: var(--kmss-accent); font-size: .85rem; font-weight: 700; text-transform: uppercase; margin-bottom: .8rem; }
.team-card p { font-size: .85rem; }

/* ---------- Pallet Scan events block ---------- */
.block-label {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kmss-text);
  padding-bottom: .9rem;
  margin: 0 0 .6rem;
}
.block-headline { font-family: var(--font-head); font-weight: 400; font-size: 1.75rem; margin: 0 0 1rem; }
.subcontent img { margin-bottom: 1rem; }
.subcontent h4 { margin-bottom: .5rem; }

/* ---------- Contact / forms ---------- */
.form-control { border-radius: 0; border-color: #ddd; }
.form-control:focus { border-color: var(--kmss-accent); box-shadow: 0 0 0 .2rem rgba(20, 121, 189, .2); }
.form-label { font-size: .9rem; margin-bottom: .3rem; }
.form-check-input:checked { background-color: var(--kmss-accent); border-color: var(--kmss-accent); }
.contact-aside h2 { font-family: var(--font-head); font-weight: 300; font-size: 2rem; margin: 0 0 1rem; }
.contact-aside p { margin-bottom: 1rem; }
.contact-aside i { width: 1.1rem; color: var(--kmss-accent); }
.contact-aside .map-embed iframe { min-height: 340px; }
.form-legend { font-family: var(--font-head); font-weight: 600; font-size: 1.3rem; color: #555; }
.required-star { color: var(--kmss-accent); }
.login-links .list-group-item { border-radius: 0; color: var(--kmss-accent); }
.login-links .list-group-item:hover { background: #fafafa; }

/* ---------- Articles ---------- */
.article-card { padding-bottom: 2.25rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--kmss-line); }
.article-card:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.article-card h2 { margin-top: 0; font-size: 1.7rem; }
.article-card h2 a { color: #555; }
.article-card h2 a:hover { color: var(--kmss-accent); }
.article-card .thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.article-body h2 { font-size: 1.5rem; }
.article-figure-left { float: left; width: 300px; margin: 0 1.5rem 1rem 0; }
@media (max-width: 575.98px) { .article-figure-left { float: none; width: 100%; margin: 0 0 1rem; } }
.back-link { display: inline-block; margin-top: 1.5rem; font-size: .85rem; font-weight: 700; text-transform: uppercase; }

/* Detrack iframe */
.wrapper-iframe { width: 100%; height: 1000px; border: 0; display: block; }

/* ---------- Client area ---------- */
.ca-account {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: #f5f8fc;
  border: 1px solid #e3eaf3;
  border-radius: 10px;
}
.ca-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--kmss-navy);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  flex-shrink: 0;
}
.ca-account-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; }
.ca-account-text strong { color: var(--kmss-navy); font-size: 1rem; }
.ca-account-text span { color: var(--kmss-text); font-size: .8rem; overflow-wrap: anywhere; }
.ca-account-meta { display: flex; gap: .25rem 1.5rem; font-size: .8rem; color: var(--kmss-muted); flex-wrap: wrap; }
.ca-account-meta b { color: var(--kmss-text); font-weight: 600; }
.ca-logout { border-radius: 6px; }

.ca-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.25rem 0 2.25rem;
}
.ca-card {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  border: 1px solid #e3eaf3;
  border-radius: 10px;
  background: #fff;
  color: var(--kmss-text);
  transition: box-shadow .2s, transform .2s;
}
a.ca-card:hover { box-shadow: 0 6px 18px rgba(27, 53, 96, .12); transform: translateY(-2px); color: var(--kmss-text); }
.ca-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  background: #e8f4fb;
  color: var(--kmss-accent);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ca-card-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ca-card-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kmss-muted); }
.ca-card-title { color: var(--kmss-navy); font-size: .95rem; }
.ca-card-link { color: var(--kmss-accent); font-size: .82rem; font-weight: 600; margin-top: .3rem; }
.ca-card-latest { background: linear-gradient(135deg, var(--kmss-navy) 0%, var(--kmss-navy-light) 100%); border-color: transparent; color: #fff; }
.ca-card-latest .ca-card-icon { background: rgba(255, 255, 255, .15); color: #ffd25e; }
.ca-card-latest .ca-card-label { color: var(--kmss-cyan); }
.ca-card-latest .ca-card-title { color: #fff; font-size: 1.15rem; }
.ca-card-actions { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.ca-card-actions .btn { border-radius: 6px; font-weight: 600; font-size: .78rem; }

.ca-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.ca-library-head h2 { margin: 0; font-size: 1.6rem; color: var(--kmss-navy); }
.ca-search { position: relative; flex: 0 1 380px; }
.ca-search > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--kmss-muted); }
.ca-search .form-control { padding: .6rem 2.4rem .6rem 2.5rem; border-radius: 8px; }
.ca-search-key {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  background: #f1f3f5; color: var(--kmss-muted); border: 1px solid #dee2e6; font-size: .7rem; padding: .05rem .4rem;
}
.ca-search .form-control:focus ~ .ca-search-key { display: none; }

.content-box ul.ca-tabs { padding-left: 0; margin: 0 0 1.25rem; }
.ca-tabs { gap: .5rem; border-bottom: 1px solid #e3eaf3; }
.ca-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--kmss-text);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: .6rem .9rem;
  margin-bottom: -1px;
}
.ca-tabs .nav-link:hover { color: var(--kmss-accent); }
.ca-tabs .nav-link.active { color: var(--kmss-navy); border-bottom-color: var(--kmss-cyan); background: none; }
.ca-count {
  display: inline-block;
  min-width: 1.6rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: #eef2f6;
  color: var(--kmss-text);
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
}
.ca-tabs .nav-link.active .ca-count { background: #e1f2fb; color: var(--kmss-accent); }

/* document rows */
.ca-doc-list { display: flex; flex-direction: column; }
.ca-doc {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem .75rem;
  border-bottom: 1px solid #eef2f6;
  border-radius: 6px;
}
.ca-doc:hover { background: #f5f8fc; }
.ca-doc:last-child { border-bottom: 0; }
.ca-doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 8px;
  background: #fdecec;
  color: #d93a32;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.ca-doc-icon.ext-zip { background: #e9f6ec; color: var(--kmss-green); }
.ca-doc-icon.ext-doc, .ca-doc-icon.ext-docx { background: #e8f0fb; color: #2b5797; }
.ca-doc-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; row-gap: .1rem; flex: 1; min-width: 0; }
.ca-version { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--kmss-navy); }
.ca-doc-title { color: #3d4650; font-weight: 600; font-size: .9rem; }
.ca-version + .ca-doc-title { color: var(--kmss-muted); font-weight: 400; font-size: .8rem; }
.ca-doc-path { flex-basis: 100%; color: var(--kmss-accent); font-size: .75rem; }
.ca-doc-meta { flex-basis: 100%; color: var(--kmss-muted); font-size: .72rem; letter-spacing: .02em; }
.ca-doc-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.ca-doc-actions .btn { border-radius: 6px; font-weight: 600; font-size: .78rem; padding: .3rem .7rem; white-space: nowrap; }
.ca-unavailable { font-size: .75rem; color: var(--kmss-muted); font-style: italic; }
.ca-doc.is-missing .ca-doc-icon { filter: grayscale(1); opacity: .5; }

/* release note groups */
.ca-group { border: 1px solid #e3eaf3; border-radius: 10px; margin-bottom: .6rem; background: #fff; overflow: hidden; }
.ca-group > summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ca-group > summary::-webkit-details-marker { display: none; }
.ca-group > summary::after {
  content: "\f078"; /* chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .75rem;
  color: var(--kmss-muted);
  margin-left: auto;
  transition: transform .2s;
}
.ca-group[open] > summary { background: #f5f8fc; border-bottom: 1px solid #e3eaf3; }
.ca-group[open] > summary::after { transform: rotate(180deg); }
.ca-group > summary:hover .ca-group-title { color: var(--kmss-accent); }
.ca-group-title { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--kmss-navy); }
.ca-group-count { font-size: .78rem; color: var(--kmss-muted); }
.ca-badge-latest {
  background: var(--kmss-green);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 999px;
}
.ca-group .ca-doc-list { padding: .35rem .4rem; }

/* release notes archive: older builds as chips */
.ca-archive { margin-top: 1.25rem; background: #fafbfd; }
.ca-archive > summary > i { color: var(--kmss-muted); }
.ca-archive-body { padding: .5rem 1rem 1rem; }
.ca-archive-hint { font-size: .78rem; color: var(--kmss-muted); margin: .25rem 0 .5rem; }
.ca-archive-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid #eef2f6;
}
.ca-archive-row:last-child { border-bottom: 0; }
@media (min-width: 992px) {
  .ca-archive-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .ca-archive-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }   /* last row of the left column */
}
.ca-archive-version {
  flex: 0 0 6.5rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--kmss-navy);
}
.ca-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ca-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  padding: .25rem .65rem;
  border: 1px solid #d5e3f0;
  border-radius: 999px;
  background: #fff;
  color: var(--kmss-accent);
  font-size: .8rem;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.ca-chip:hover { background: var(--kmss-accent); border-color: var(--kmss-accent); color: #fff; }
.ca-chip:disabled { color: var(--kmss-muted); border-style: dashed; background: transparent; cursor: not-allowed; }
.ca-chip .spinner-border { width: .8rem; height: .8rem; border-width: .15em; }
@media (max-width: 575.98px) {
  .ca-archive-row { flex-direction: column; gap: .4rem; }
  .ca-archive-version { flex-basis: auto; }
}

/* written guides: category menu + documents */
.ca-guides { display: grid; grid-template-columns: 250px 1fr; gap: 1.75rem; align-items: start; }
.ca-cat-nav { position: sticky; top: 1rem; }
.ca-cat-nav ul { list-style: none; padding: 0; margin: 0; border: 1px solid #e3eaf3; border-radius: 10px; overflow: hidden; }
.ca-cat-nav li + li { border-top: 1px solid #eef2f6; }
.ca-cat-nav button {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .65rem .9rem;
  background: #fff;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  color: var(--kmss-text);
  font-size: .88rem;
}
.ca-cat-nav button i { color: var(--kmss-cyan); width: 1rem; text-align: center; }
.ca-cat-nav button:hover { background: #f5f8fc; color: var(--kmss-accent); }
.ca-cat-nav button.active { background: #eef6fc; border-left-color: var(--kmss-accent); color: var(--kmss-navy); font-weight: 600; }
.ca-cat-name { flex: 1; }
.ca-cat-title { font-family: var(--font-head); font-weight: 600; font-size: 1.35rem; color: var(--kmss-navy); margin: 0 0 .5rem; }
.ca-subheading {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--kmss-navy);
  margin: 1.25rem 0 .35rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid #eef2f6;
}
.ca-subheading i { color: var(--kmss-cyan); }
.ca-subheading-top { font-size: 1.15rem; margin-top: 1.75rem; }
.ca-cat-section.is-nested { padding-left: .25rem; }

.ca-results-title { display: flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--kmss-navy); margin: 1rem 0 .4rem; }

.ca-empty { text-align: center; color: var(--kmss-muted); padding: 2.5rem 1rem; }
.ca-empty i { font-size: 2rem; color: #cfd8e3; display: block; margin-bottom: .75rem; }
.ca-empty p { margin: 0; }

@media (max-width: 991.98px) {
  .ca-quick { grid-template-columns: 1fr; }
  .ca-account-meta { width: 100%; order: 3; padding-left: 3.75rem; }
}
@media (max-width: 767.98px) {
  .ca-guides { grid-template-columns: 1fr; gap: 1rem; }
  .ca-cat-nav { position: static; }
  .ca-search { flex-basis: 100%; }
  .ca-search-key { display: none; }
}
@media (max-width: 575.98px) {
  .ca-btn-text { display: none; }
  .ca-tabs { flex-wrap: nowrap; gap: 0; }
  .ca-tabs .nav-item { flex: 1; }
  .ca-tabs .nav-link { width: 100%; justify-content: center; font-size: .95rem; padding: .6rem .3rem; gap: .35rem; }
  .ca-account-meta { padding-left: 0; }
  .ca-doc { padding: .65rem .35rem; gap: .65rem; }
  .ca-doc-actions .btn { padding: .35rem .6rem; }
}

/* ---------- Account request / confirmation ---------- */
.acct-result { text-align: center; padding: 2rem 1rem; }
.acct-result h2 { font-size: 1.6rem; color: var(--kmss-navy); margin: .75rem 0; }
.acct-result p { max-width: 520px; margin-left: auto; margin-right: auto; }
.acct-result-icon { display: inline-flex; font-size: 3rem; color: var(--kmss-green); }
.acct-result.is-error .acct-result-icon { color: #d93a32; }
.acct-steps { background: #f5f8fc; border: 1px solid #e3eaf3; border-radius: 10px; padding: 1.4rem 1.5rem; }
.acct-steps h2 { font-size: 1.25rem; color: var(--kmss-navy); margin: 0 0 .75rem; }
.acct-steps ol { padding-left: 1.2rem; margin-bottom: 1rem; font-size: .9rem; }
.acct-steps li { margin-bottom: .5rem; }
.content-box ul.pw-rules, .pw-rules { list-style: none; padding: 0; margin: .9rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .8rem; color: var(--kmss-muted); }
.pw-rules i { font-size: .45rem; vertical-align: middle; margin-right: .45rem; }
.pw-rules li.met { color: var(--kmss-green); }
.pw-rules li.met i::before { content: "\f00c"; font-size: .7rem; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1080;
  max-width: 960px;
  margin: 0 auto;
  background: var(--kmss-navy);
  color: rgba(255, 255, 255, .9);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  transform: translateY(calc(100% + 32px));
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.cookie-banner.is-open { transform: none; opacity: 1; }
.cookie-banner-inner { display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem 1.4rem; }
.cookie-banner-text { flex: 1; font-size: .85rem; }
.cookie-banner-text strong { display: block; color: #fff; font-size: .95rem; margin-bottom: .2rem; }
.cookie-banner-text p { margin: 0; line-height: 1.5; }
.cookie-banner-text a { color: var(--kmss-cyan); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: .6rem; flex-shrink: 0; }
.cookie-banner-actions .btn { min-width: 6.5rem; border-radius: 6px; font-weight: 600; }
@media (max-width: 767.98px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; gap: .9rem; }
  .cookie-banner-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

.footer-bottom-links { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.footer-cookie-settings {
  background: none;
  border: 0;
  padding: 0;
  color: rgba(255, 255, 255, .85);
  font-size: inherit;
}
.footer-cookie-settings:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: #f5f8fc;
  border: 1px solid #e3eaf3;
  border-radius: 10px;
}
.cookie-choice strong { display: block; color: var(--kmss-navy); }
.cookie-choice span { font-size: .9rem; }
.cookie-table { font-size: .85rem; }
.cookie-table th { color: var(--kmss-navy); font-weight: 600; white-space: nowrap; }

/* ALTCHA captcha on the contact form */
altcha-widget {
  --altcha-max-width: 320px;
  --altcha-border-radius: 6px;
  --altcha-color-border: #ced4da;
  --altcha-color-border-focus: var(--kmss-accent);
  --altcha-color-text: var(--kmss-text);
  --altcha-color-error-text: #d93a32;
  --altcha-color-footer-bg: #f5f8fc;
  display: block;
  font-family: var(--font-body);
}