/* ==========================================================================
   DECG
   Layout and type follow marutiseismic.com; the palette is BLUE AND WHITE
   ONLY - no orange anywhere. --secondary is a bright blue despite its name,
   so older references convert without template edits. See tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-secondary);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 800;
  line-height: 1.2;
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: var(--text-base); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--space-2); max-width: 68ch; }

a { color: var(--primary-light); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary); }

:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section { padding-block: var(--space-12); }
.section--tight { padding-block: var(--space-8); }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--primary); color: rgba(255,255,255,.82); }
.section--navy h2, .section--navy h3 { color: #fff; }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

/* Section headers ---------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--secondary);
}
.eyebrow::before {
  content: "";
  width: 32px; height: 2px;
  background: var(--primary-light);
}
.section--navy .eyebrow { color: var(--secondary-light); }
.section--navy .eyebrow::before { background: rgba(255,255,255,.45); }

.section-head { max-width: 62ch; margin-bottom: var(--space-6); }
.section-head p { margin-top: var(--space-2); font-size: var(--text-lg); }

/* -------------------------------------------------------------- buttons -- */

/* Pill buttons with a navy gradient, matching the reference site. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: 14px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  /* A pill that wraps stops being a pill - and in the header it stretched the
     whole bar to 85px. Buttons stay on one line. */
  white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), color var(--transition), border-color var(--transition);
}
.btn--lg { padding: 18px 38px; font-size: 1.05rem; }

/* The header CTA is a compact version of the same pill. */
.header__cta { padding: 11px 24px; font-size: var(--text-sm); min-height: 44px; }

.btn--primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,58,92,.42); }

.btn--outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--outline:hover { background: var(--primary); color: #fff; }

/* Kept as an alias so existing templates need no edit. */
.btn--ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--ghost:hover { background: var(--primary); color: #fff; }

.btn--onnavy { background: #fff; color: var(--primary-dark); }
.btn--onnavy:hover { background: var(--bg-alt); color: var(--primary-dark); transform: translateY(-2px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-base); font-weight: 600;
  color: var(--primary-light); text-decoration: none;
}
.link-arrow:hover { color: var(--secondary); }
.link-arrow svg { transition: transform var(--transition); }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------- header -- */

.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-header);
}
.header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  min-height: 76px;
}
/* The DECG logo is red on transparent. A light blue panel behind it seats it
   in the blue palette and stops it floating on the white bar. */
.header__logo {
  display: inline-flex; align-items: center; flex: none;
  padding: 4px 0;
}
.header__logo img { height: 46px; width: auto; max-width: none; flex: none; object-fit: contain; }

.nav { display: flex; align-items: center; gap: 2px; }

.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-primary); text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.nav__link:hover { background: var(--bg-alt); color: var(--primary); }
.nav__item--active > .nav__link { color: var(--primary-light); font-weight: 600; }

/* The underline hangs off the LINK, not the item, so that a mega-menu item can
   drop position:relative (see .nav__item--mega) without losing it. */
.nav__link { position: relative; }
.nav__item--active > .nav__link::after {
  content: ""; position: absolute; inset-inline: var(--space-2); bottom: 2px;
  height: 2px; background: var(--primary-light);
}
.nav__item { position: relative; }

/* A mega panel is far wider than its trigger. Anchored to the nav item it runs
   off the left edge of the viewport, so the item goes static and the panel
   positions against the sticky header instead. */
.nav__item--mega { position: static; }

.nav__caret { width: 14px; height: 14px; opacity: .55; transition: transform var(--transition); }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); }

/* Dropdown / mega panel ---------------------------------------------------- */

.panel {
  position: absolute; top: 100%; left: 0;
  min-width: 260px;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: var(--z-dropdown);
}
.nav__item:hover > .panel,
.nav__item:focus-within > .panel { opacity: 1; visibility: visible; transform: translateY(0); }

.panel--mega {
  left: 50%; right: auto;
  transform: translateX(-50%) translateY(4px);
  width: min(var(--container), calc(100vw - var(--space-6)));
  display: grid;
  /* Column count comes from the real number of top-level children in THIS
     panel (set inline as --mega-cols by inc/nav.php, already clamped 1-4
     there in PHP - repeat() track counts computed via clamp()/min()/max()
     are not reliably supported across browsers, so the bound is applied
     before it ever reaches CSS). A hard-coded repeat(2, 1fr) here is what
     made a 3rd product category unable to fit. */
  grid-template-columns: repeat(var(--mega-cols, 2), 1fr);
  align-content: start;
  gap: var(--space-2) var(--space-8);
  padding: var(--space-4);
}
/* Keep the horizontal centring when the open state resets translateY. */
.nav__item:hover > .panel--mega,
.nav__item:focus-within > .panel--mega { transform: translateX(-50%) translateY(0); }
.panel__group + .panel__group { margin-top: 0; }
.panel__title {
  margin-bottom: var(--space-1);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--primary);
}
.panel__sub,
.panel a.panel__sub {
  margin: var(--space-2) 0 4px;
  padding: 7px var(--space-1);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary);
  border-bottom: 1px solid var(--border); border-radius: 0;
}
.panel a.panel__sub:hover { color: var(--primary-light); background: var(--bg-alt); }
.panel a {
  display: block; padding: 7px var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.panel a:hover { background: var(--bg-alt); color: var(--primary-light); }
.panel a[aria-current="page"] { color: var(--primary-light); font-weight: 600; }

/* Mobile drawer ------------------------------------------------------------ */

.burger {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; color: var(--text-primary);
}

.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--surface);
  padding: var(--space-3);
  overflow-y: auto;
  display: none;
}
.drawer[data-open="true"] { display: block; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.drawer details { border-bottom: 1px solid var(--border); }
.drawer summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; cursor: pointer;
  font-size: var(--text-base); font-weight: 600; color: var(--text-primary);
  list-style: none;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; font-weight: 400; font-size: 1.3rem; color: var(--primary-light); }
.drawer details[open] > summary::after { content: "\2212"; }
.drawer a {
  display: block; padding: 11px 0 11px var(--space-2);
  font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none;
}
.drawer > a { border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-primary); padding-left: 0; }
.drawer__nested { padding-left: var(--space-2); border-left: 2px solid var(--border); margin-bottom: var(--space-1); }

/* ----------------------------------------------------------------- hero -- */

/* ==========================================================================
   HERO - matched to marutiseismic.com
   Gradient ground, blurred radial shapes, a faint engineering grid, a floating
   product-portfolio card and two drifting credential chips.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-12) var(--space-12);
  background: var(--grad-hero);
  border-bottom: 1px solid var(--border);
}

/* Soft colour wash: navy top-right, orange bottom-left. */
.hero__shape { position: absolute; border-radius: 50%; pointer-events: none; }
.hero__shape--1 { width: 700px; height: 700px; top: -280px; right: -220px;
  background: radial-gradient(circle, rgba(37,99,168,.07) 0%, transparent 70%); }
.hero__shape--2 { width: 500px; height: 500px; bottom: -220px; left: -160px;
  background: radial-gradient(circle, rgba(74,154,232,.07) 0%, transparent 70%); }
.hero__shape--3 { width: 300px; height: 300px; top: 40%; left: 45%;
  background: radial-gradient(circle, rgba(37,99,168,.04) 0%, transparent 70%); }

/* Engineering drawing grid, barely there. */
.hero__gridlines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(26,58,92,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,58,92,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}

.hero .wrap { position: relative; z-index: 1; }
.hero__inner { grid-column: span 6; align-self: center; }
.hero h1 { margin-bottom: var(--space-3); }

/* Pill badge with a pulsing orange dot. */
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--space-3);
  padding: 7px 18px;
  border: 1px solid rgba(37,99,168,.15);
  border-radius: var(--radius-pill);
  background: var(--grad-badge);
  color: var(--primary);
  font-size: var(--text-xs); font-weight: 600;
}
.hero__badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--secondary);
  animation: pulse 2s ease-in-out infinite;
}

/* Gradient headline phrase - navy into orange, exactly as the reference. */
.hero__accent {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero__lede { font-size: 1.1rem; line-height: 1.65; max-width: 56ch; margin-bottom: var(--space-4); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------------------------------------------------- hero visual -------- */

.hero__visual { grid-column: span 6; position: relative; align-self: center; min-height: 420px; }

/* The product portfolio card - drifts slowly on a 5s cycle. */
.hero__card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: float 5s ease-in-out infinite;
}
.hero__card-head {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 26px;
  background: var(--grad-header);
  color: #fff;
}
.hero__card-head .icon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
}
.hero__card-head .title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.hero__card-head .sub   { font-size: var(--text-xs); opacity: .8; }
.hero__card-body { padding: 22px 26px; }

.hero__products { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero__product {
  display: flex; align-items: center; gap: 10px;
  padding: 13px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--transition);
}
.hero__product:hover {
  background: var(--surface);
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--primary);
}
.hero__product .pic {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  background: var(--grad-tint);
  border-radius: 8px;
  color: var(--primary-light);
}
.hero__product .name { font-size: var(--text-sm); font-weight: 600; line-height: 1.25; }

/* Two credential chips floating over the card, on offset cycles so they
   never move in lockstep. */
.hero__chip {
  position: absolute;
  display: flex; align-items: center; gap: 11px;
  padding: 13px 17px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.hero__chip--1 { top: -26px; right: -14px; animation: float2 7s ease-in-out infinite; }
.hero__chip--2 { bottom: -26px; left: -18px; animation: float 6s ease-in-out infinite; }
.hero__chip .pic {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
}
.hero__chip--1 .pic { background: linear-gradient(135deg, var(--sky-100), var(--sky-200)); color: var(--primary-light); }
.hero__chip--2 .pic { background: var(--grad-tint); color: var(--secondary); }
.hero__chip .value { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.hero__chip .desc  { font-size: var(--text-xs); color: var(--text-muted); }

/* Hero stat row beneath the copy. */
.hero__stats {
  grid-column: span 6;
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.hero__stat .num {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.hero__stat .num span { color: var(--secondary); }
.hero__stat .lbl { font-size: var(--text-sm); color: var(--text-muted); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes float2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.3); }
}

/* Reused on inner pages as a plain sidebar list. */
.hero__aside {
  align-self: start;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  background: var(--surface);
}
.hero__aside h2 {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--space-2);
}
.hero__aside ul { list-style: none; margin: 0; padding: 0; }
.hero__aside li + li { border-top: 1px solid var(--border); }
.hero__aside a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  padding: 11px 0;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-primary); text-decoration: none;
  transition: color var(--transition);
}
.hero__aside a:hover { color: var(--primary-light); }
.hero__aside .n { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.creds {
  grid-column: 1 / -1;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap);
}
.creds__item { display: flex; flex-direction: column; gap: 2px; }
.creds__label { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.creds__note  { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------------------------------------------------------------- cards -- */

.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--transition);
}
a.card:hover { border-color: var(--primary); }
a.card:hover .card__title { color: var(--primary-light); }

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__title { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); transition: color var(--transition); }
.card__text  { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.card__meta  { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }

/* Placeholder for genuinely missing photography ---------------------------- */
.ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--primary);
  color: var(--secondary-light);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}

/* ---------------------------------------------------------------- stats -- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.stat { padding-top: var(--space-2); border-top: 2px solid var(--primary-light); }
.stat__value {
  font-size: var(--text-4xl); font-weight: 800;
  letter-spacing: var(--tracking-display); color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.section--navy .stat__value { color: var(--secondary-light); }
.stat__label { font-size: var(--text-sm); color: var(--text-muted); }
.section--navy .stat__label { color: rgba(255,255,255,.72); }

/* ------------------------------------------------------------ logo wall -- */

.logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.logos__cell {
  display: grid; place-items: center;
  padding: var(--space-3);
  min-height: 104px;
  background: var(--surface);
}
.logos__cell img {
  max-height: 46px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter var(--transition), opacity var(--transition);
}
.logos__cell:hover img { filter: grayscale(0); opacity: 1; }

/* Authority logos: full colour (official marks are recognised by colour), laid out as separate cards that wrap */
.logos--authorities {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  background: none; border: 0; border-radius: 0; overflow: visible;
}
.logos--authorities .logos__cell {
  flex: 1 1 200px; min-height: 140px;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.logos--authorities .logos__cell--wide { flex-basis: 400px; }
.logos--authorities .logos__cell--text { flex-basis: 150px; }
.logos--authorities .logos__cell img {
  max-height: 80px; max-width: 100%; width: auto; height: auto;
  filter: none; opacity: 1;
}

/* ------------------------------------------------------------- CTA band -- */

.cta { text-align: left; }
.cta__inner {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.cta h2 { max-width: 22ch; }
.cta p { color: rgba(255,255,255,.75); margin: var(--space-1) 0 0; }

/* --------------------------------------------------------------- footer -- */

.footer { background: var(--primary-dark); color: rgba(255,255,255,.68); font-size: var(--text-sm); }
.footer a { color: rgba(255,255,255,.68); text-decoration: none; }
.footer a:hover { color: var(--secondary-light); }
.footer__grid { padding-block: var(--space-8); }
.footer__brand { grid-column: span 4; }
.footer__brand p { margin-top: var(--space-2); max-width: 38ch; line-height: 1.7; }
.footer__brand img { width: 260px; max-width: 100%; height: auto; margin-bottom: var(--space-2); background: #fff; padding: 12px 18px; border-radius: var(--radius); }
.footer__col { grid-column: span 4; }
.footer__col--narrow { grid-column: span 2; }
.footer__addr { color: rgba(255,255,255,.85); }
.footer h4 {
  color: #fff; margin-bottom: var(--space-2);
  font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer address { font-style: normal; line-height: 1.7; }
.footer__bar {
  padding-block: var(--space-3);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between;
  font-size: var(--text-xs);
}

/* ---------------------------------------------------------- page header -- */

.pagehead { padding-block: var(--space-8) var(--space-6); background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.pagehead h1 { font-size: var(--text-4xl); }
.pagehead p { margin-top: var(--space-2); font-size: var(--text-lg); }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary-light); }
.crumbs span[aria-current] { color: var(--text-primary); font-weight: 600; }

/* --------------------------------------------------------------- prose -- */

.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-6); margin-bottom: var(--space-2); }
.prose h3 { margin-top: var(--space-4); margin-bottom: var(--space-1); }
.prose ul { margin: 0 0 var(--space-3); padding-left: var(--space-3); }
.prose li { margin-bottom: 6px; }

.spec { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.spec th, .spec td { padding: 11px var(--space-2); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.spec th { width: 38%; font-weight: 600; color: var(--text-primary); }

.notice {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary-light);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------- utils -- */

.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: 1 / -1; }

.stack   { display: grid; gap: var(--space-3); }
.muted   { color: var(--text-muted); }
.mt-4    { margin-top: var(--space-4); }

/* ------------------------------------------------------------- top bar -- */

/* Blue contact strip above the sticky header. Not sticky itself, so it
   scrolls away and the header's top:0 needs no offset. */
.topbar { background: var(--grad-header); color: #fff; font-size: var(--text-sm); }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); min-height: 40px; padding-block: 6px;
}
.topbar__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); list-style: none; margin: 0; padding: 0; }
.topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.topbar a:hover, .topbar a:focus-visible { text-decoration: underline; }
.topbar svg { flex: none; opacity: .85; }
.topbar__brand { margin: 0; font-weight: 700; letter-spacing: .02em; text-align: right; }
@media (max-width: 860px) { .topbar__brand { display: none; } }

/* ------------------------------------------------------- RDSO steps/pager -- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.steps li + li { border-top: 1px solid var(--border); }
.steps a {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2);
  padding: 12px 0; text-decoration: none;
  font-size: var(--text-sm); font-weight: 500; color: var(--text-primary);
  transition: color var(--transition);
}
.steps a:hover { color: var(--primary-light); }
.steps .n {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sky-100); color: var(--primary);
  font-size: var(--text-xs); font-weight: 700;
}
.steps a[aria-current="page"] { color: var(--primary-light); font-weight: 600; }
.steps a[aria-current="page"] .n { background: var(--primary); color: #fff; }

.pager {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2);
  margin-top: var(--space-6); padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------ carousel -- */

.carousel { position: relative; }
.carousel__track {
  display: flex; gap: var(--grid-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}
.carousel__slide { flex: 0 0 calc((100% - 2 * var(--grid-gap)) / 3); scroll-snap-align: start; min-width: 220px; }
.carousel__controls { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); }
.carousel__btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--primary);
  font: inherit; font-size: var(--text-lg); line-height: 1; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.carousel__btn:hover, .carousel__btn:focus-visible { border-color: var(--primary); background: var(--sky-50); }
.carousel__btn[hidden] { display: none; }

/* -------------------------------------------------------------- slider -- */

.slider { position: relative; height: clamp(300px, 40vw, 540px); overflow: hidden; background: var(--primary-dark); }
.slider__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.slider__slide.is-active { opacity: 1; visibility: visible; }
.slider__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slider__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,35,64,.78) 0%, rgba(15,35,64,.35) 55%, rgba(15,35,64,0) 100%); }
.slider__caption { position: absolute; inset: auto 0 0 0; z-index: 2; padding-bottom: clamp(24px, 6vw, 64px); }
.slider__title { margin: 0; color: #fff; font-family: var(--font-display, inherit); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.75rem); line-height: 1.1; max-width: 18ch; }
.slider__sub { margin: var(--space-1) 0 var(--space-2); color: rgba(255,255,255,.88); max-width: 52ch; }
.slider__controls { position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 3; display: flex; gap: var(--space-1); }
.slider__controls .carousel__btn { background: rgba(255,255,255,.92); }
@media (prefers-reduced-motion: reduce) { .slider__slide { transition: none; } }

/* ------------------------------------------------------------- gallery -- */

.gallery__item { grid-column: span 3; margin: 0; }
.gallery__link { display: block; text-decoration: none; cursor: zoom-in; }
.gallery__link:hover .card__media img { transform: scale(1.03); }
.gallery__link .card__media img { transition: transform .35s ease; }

.lightbox {
  width: min(96vw, 1100px); max-height: 94vh; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: #fff; overflow: visible; box-shadow: none;
}
.lightbox::backdrop { background: rgba(8, 18, 33, .82); }
/* Transparent panel: only the picture, centred, over the dimmed page. The figure always sits in the middle
   column, so it stays centred whether or not the arrows are shown. */
.lightbox[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); }
.lightbox__figure { grid-column: 2; margin: 0; text-align: center; min-width: 0; }
.lightbox__img { max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 12px 48px rgba(0, 0, 0, .55); }
.lightbox__caption { margin-top: var(--space-2); font-size: var(--text-sm); color: rgba(255,255,255,.92); text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.lightbox__close {
  position: fixed; top: 14px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, .35); border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.lightbox__nav {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(0, 0, 0, .35); color: #fff; font-size: var(--text-lg); cursor: pointer;
}
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }
.lightbox__nav:hover, .lightbox__nav:focus-visible, .lightbox__close:hover, .lightbox__close:focus-visible { background: rgba(255,255,255,.2); outline: 2px solid #fff; }
.lightbox__nav[hidden] { display: none; }

/* Authority names as text tiles (reuses .logos / .logos__cell) */
.logos__cell--text { font-weight: 600; font-size: var(--text-sm); text-align: center; color: var(--primary); letter-spacing: .02em; }

/* ---------------------------------------------------------- preloader ---- */

/* Splash shown before the home screen: the client's animated logo (assets/video/loading.mp4, 3.6 s).
   Its background is a flat #fbfbfb, so the page behind the video matches it exactly.
   The fade-out is pure CSS with `forwards`, so the overlay clears itself after 4 s even if
   JavaScript never runs - it must never be able to trap the page behind it.
   main.js ends it sooner once the page has loaded (.is-leaving), removes the dead node and
   allows click-to-skip. */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: #fbfbfb;
  animation: preOut .5s ease 4s forwards;
}
.preloader.is-leaving { animation: preOut .45s ease 0s forwards; }
.preloader__video {
  display: block; width: min(100vw, 680px); height: auto;
  max-height: 100vh; object-fit: contain;
  background: #fbfbfb;
}

@keyframes preOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* No splash for anyone who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
}

/* ------------------------------------------------------------- reveal ---- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  /* The drawer carries its own quote button, so the header one only crowds the
     bar here - it wraps to two lines and squeezes out the burger. */
  .header__cta { display: none; }
  .header__bar { min-height: 64px; }
  .hero__inner, .hero__aside, .hero__visual { grid-column: 1 / -1; }
  .hero__aside { margin-top: var(--space-4); }
  /* Stacked, the visual needs room for the chips that hang off its corners. */
  .hero__visual { margin-top: var(--space-8); min-height: 0; }
}

@media (max-width: 860px) {
  :root { --grid-gap: 16px; }
  .section { padding-block: var(--space-8); }
  .hero { padding-block: var(--space-8); }
  .creds { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-3); }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-4); }
  .col-4, .col-5, .col-6, .col-7, .col-8, .footer__brand, .footer__col, .footer__col--narrow { grid-column: 1 / -1; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.625rem; }
  .pagehead h1 { font-size: 2rem; }
  .creds { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  /* Two product tiles per row is too tight below 560px. */
  .hero__products { grid-template-columns: 1fr; }
  /* Pull the floating chips inside the card so they cannot overhang the
     viewport edge and cause horizontal scroll. */
  .hero__chip--1 { top: -18px; right: 4px; }
  .hero__chip--2 { bottom: -18px; left: 4px; }
  .hero__chip { padding: 10px 13px; }
}

/* Body text never drops below 16px on mobile. */
@media (max-width: 1080px) {
  .gallery__item { grid-column: span 4; }
}
@media (max-width: 860px) {
  .carousel__slide { flex-basis: calc((100% - var(--grid-gap)) / 2); }
  .gallery__item { grid-column: span 6; }
  .lightbox[open] { grid-template-columns: 1fr; }
  .lightbox__nav--prev, .lightbox__nav--next { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .header__logo img { height: 36px; }
  .gallery__item { grid-column: 1 / -1; }
  .topbar__item--secondary { display: none; }
  .carousel__slide { flex-basis: 78%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .footer, .cta { display: none; }
}

/* ------------------------------------------------- phone with country ---- */

.phone-field { display: flex; gap: var(--space-1); }
.phone-field__country {
  flex: 0 1 12.5rem; min-width: 0;
  min-height: 48px; padding: 0 var(--space-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font: inherit; background: var(--surface);
}
.phone-field__number {
  flex: 1 1 auto; min-width: 0;
  min-height: 48px; padding: 0 var(--space-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font: inherit;
}
.phone-field__hint { margin: 6px 0 0; font-size: var(--text-xs); color: var(--text-muted); min-height: 1.2em; }
.phone-field__hint.is-error { color: var(--brand-red); font-weight: 600; }
.phone-field__number.is-invalid { border-color: var(--brand-red); }
@media (max-width: 480px) { .phone-field { flex-direction: column; } .phone-field__country { flex-basis: auto; } }

/* A main category's own photo in the header dropdown (shown only when one is set on the Products screen). */
.panel__thumb { display: block; aspect-ratio: 16 / 9; margin-bottom: 10px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.panel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Client update: product scroller, intact product images, and dropdown bounds. */
.product-scroll-controls { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.product-scroll-controls[hidden] { display: none; }
.product-scroll-controls button:disabled { opacity: .45; cursor: default; }
.product-scroll { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 4px 20px; scroll-padding-inline: 4px; overscroll-behavior-x: contain; }
.product-scroll > .card { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; scroll-snap-align: start; }
.product-scroll .card__media img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.product-scroll:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 4px; }
.logos__cell--placeholder { flex-direction: column; gap: 8px; text-align: center; padding: 16px; }
.logos__cell--placeholder small { font-size: 12px; color: var(--text-secondary); }
.header .panel { max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); overflow-y: auto; overscroll-behavior-y: contain; }
@media (min-width: 783px) { body.admin-bar .header { top: 32px; } }
@media (max-width: 900px) { .product-scroll > .card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 600px) { .product-scroll > .card { flex-basis: 86%; } }

.about-company-photo { margin: 0 0 var(--space-4); }
.about-company-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); }