/* ============================================================
   TLD Extranet — Industrial/Aviation refresh
   Bootstrap 5 base, token overrides + new component layer.
   ============================================================ */

:root {
  /* Brand */
  --tld-blue-950: #061230;
  --tld-blue-900: #0c1d4a;
  --tld-blue-800: #14306b;
  --tld-blue-700: #1c4193;
  --tld-blue:     #2555a8;
  --tld-blue-500: #4775c7;
  --tld-blue-300: #91addf;
  --tld-blue-100: #dfe8f6;
  --tld-blue-50:  #f1f5fb;

  /* Neutral (cool slate) */
  --ink-950: #060a14;
  --ink-900: #0b1220;
  --ink-800: #14213a;
  --ink-700: #1f2c45;
  --ink-600: #3c485c;
  --ink-500: #5b6677;
  --ink-400: #7d8898;
  --ink-300: #aeb6c2;
  --ink-200: #cfd5de;
  --ink-100: #e4e8ee;
  --ink-50:  #f3f5f8;
  --surface: #f6f7fa;
  --bg:      #ffffff;

  /* Accent (locked: aviation green) */
  --accent:        #1b8a52;
  --accent-strong: #0f5d36;
  --accent-soft:   #dcefe2;

  /* State */
  --ok:    #1b8a52;
  --warn:  #d97706;
  --err:   #c0322c;

  /* Type */
  --font-display: "Barlow Condensed", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Radii */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  /* Density */
  --pad-card: 1.5rem;
  --gap-row:  1.25rem;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(10,20,40,.05), 0 1px 1px rgba(10,20,40,.04);
  --shadow-md: 0 4px 14px -2px rgba(10,20,40,.08), 0 2px 6px rgba(10,20,40,.05);
  --shadow-lg: 0 18px 40px -12px rgba(10,20,40,.18), 0 6px 14px rgba(10,20,40,.06);

  /* Bootstrap overrides */
  --bs-primary: var(--tld-blue);
  --bs-primary-rgb: 37, 85, 168;
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink-800);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--ink-100);
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
}

[data-density="compact"] {
  --pad-card: 1.1rem;
  --gap-row:  0.9rem;
}

/* ============================================================
   Card style variants — applied to every card-like surface
   bordered (default) · elevated · flat
   ============================================================ */
.quick-tile,
.rep-card,
.hub-card,
.finder,
.dochub,
.contact-form {
  transition: box-shadow .15s, border-color .15s, border-radius .15s;
}

/* bordered: subtle border + soft shadow (default) */
[data-card-style="bordered"] .quick-tile,
[data-card-style="bordered"] .rep-card,
[data-card-style="bordered"] .hub-card,
[data-card-style="bordered"] .finder,
[data-card-style="bordered"] .dochub,
[data-card-style="bordered"] .contact-form {
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}
[data-card-style="bordered"] .finder { box-shadow: var(--shadow-lg); }

/* elevated: no border, prominent shadow */
[data-card-style="elevated"] .quick-tile,
[data-card-style="elevated"] .rep-card,
[data-card-style="elevated"] .hub-card,
[data-card-style="elevated"] .finder,
[data-card-style="elevated"] .dochub,
[data-card-style="elevated"] .contact-form {
  border: 1px solid transparent !important;
  box-shadow: var(--shadow-md) !important;
  background: #fff;
}
[data-card-style="elevated"] .finder { box-shadow: var(--shadow-lg) !important; }
[data-card-style="elevated"] .quick-tile:hover,
[data-card-style="elevated"] .rep-card:hover {
  box-shadow: var(--shadow-lg) !important;
}

/* flat: square corners, hairline border, NO shadow — industrial spec-sheet feel */
[data-card-style="flat"] .quick-tile,
[data-card-style="flat"] .rep-card,
[data-card-style="flat"] .hub-card,
[data-card-style="flat"] .finder,
[data-card-style="flat"] .dochub,
[data-card-style="flat"] .contact-form {
  border: 1px solid var(--ink-200) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
[data-card-style="flat"] .quick-tile .qt-ico,
[data-card-style="flat"] .doc-row .doc-tag,
[data-card-style="flat"] .chip,
[data-card-style="flat"] .find-tabs,
[data-card-style="flat"] .find-tabs button,
[data-card-style="flat"] .find-input-group .field input,
[data-card-style="flat"] .btn-find,
[data-card-style="flat"] .cf-dept,
[data-card-style="flat"] .cf-input,
[data-card-style="flat"] .doc-row .doc-ico {
  border-radius: 0 !important;
}
[data-card-style="flat"] .rep-card .rep-avatar,
[data-card-style="flat"] .rep-card .rep-avatar::after,
[data-card-style="flat"] .user-pill,
[data-card-style="flat"] .user-pill .avatar {
  border-radius: 0 !important;
}
[data-card-style="flat"] .chip {
  border-radius: 2px !important;
}
[data-card-style="flat"] .hub-card .hub-map {
  border-bottom: 1px solid var(--ink-200);
}
[data-card-style="flat"] .doc-row:hover {
  background: var(--ink-50);
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
html, body {
  background: var(--surface);
  color: var(--ink-800);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .display, .h-display {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.005em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-500);
}
.eyebrow .accent { color: var(--accent); }

.section-title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink-900);
  margin: 0;
}
.section-sub {
  color: var(--ink-500);
  font-size: 0.95rem;
  margin: .35rem 0 0;
  max-width: 56ch;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.section-head .titles { min-width: 0; }
.section-head .actions { flex-shrink: 0; }

/* ------------------------------------------------------------
   Top bar + header
   ------------------------------------------------------------ */
.topbar {
  background: var(--ink-950);
  color: var(--ink-300);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.topbar a { color: var(--ink-200); text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar .sep { color: var(--ink-700); margin: 0 .65rem; }

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--ink-100);
}
.site-header .nav-link {
  color: var(--ink-700);
  font-weight: 500;
  font-size: 0.94rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-sm);
  position: relative;
}
.site-header .nav-link:hover { color: var(--tld-blue); }
.site-header .nav-link.active {
  color: var(--tld-blue);
}
.site-header .nav-link.active::after {
  content: "";
  position: absolute;
  left: .9rem; right: .9rem; bottom: -1.05rem; height: 2px;
  background: var(--accent);
}

.brand-mark img { height: 36px; }

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .4rem .55rem .4rem .4rem;
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  background: #fff;
  font-size: 0.85rem;
  color: var(--ink-800);
  cursor: pointer;
  transition: border-color .15s;
}
.user-pill:hover { border-color: var(--ink-300); }
.user-pill .avatar {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--tld-blue-700), var(--tld-blue));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  display: grid; place-items: center;
  font-size: .85rem;
  letter-spacing: 0.02em;
}
.user-pill .meta { line-height: 1.1; text-align: left; }
.user-pill .meta .name { font-weight: 600; color: var(--ink-900); }
.user-pill .meta .org { font-size: .72rem; color: var(--ink-500); }
.user-pill .chev { color: var(--ink-400); margin-left: .15rem; }

/* ------------------------------------------------------------
   Mega menu (Services dropdown)
   ------------------------------------------------------------ */
.has-mega {
  position: relative;
}
.mega-menu {
  position: absolute;
  top: calc(100% + 1.05rem);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem 2rem 1.5rem;
  min-width: 760px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  z-index: 1000;
  transition: opacity .15s, transform .15s;
}
.mega-menu::before {
  content: "";
  position: absolute;
  top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: #fff;
  border-top: 1px solid var(--ink-100);
  border-left: 1px solid var(--ink-100);
}
.has-mega .mega-menu.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-chev { transition: transform .15s; }
.has-mega .dropdown-toggle[aria-expanded="true"] .mega-chev { transform: rotate(180deg); opacity: 1 !important; }

/* Parts menu: 3 link cols */
.mega-menu.mega-parts {
  grid-template-columns: repeat(3, 1fr);
  min-width: 860px;
  gap: 1.75rem;
}
@media (max-width: 1200px) {
  .mega-menu.mega-parts { min-width: 720px; gap: 1.25rem; }
}
.mega-col h6 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--tld-blue);
  margin: 0 0 1rem;
  padding-bottom: .65rem;
  border-bottom: 2px solid var(--tld-blue);
  letter-spacing: -0.005em;
}
.mega-col ul { list-style: none; padding: 0; margin: 0; }
.mega-col li { margin-bottom: .35rem; }
.mega-col a {
  color: var(--ink-800);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  padding: .4rem 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  transition: color .12s, padding .12s;
}
.mega-col a:hover {
  color: var(--tld-blue);
  padding-left: .25rem;
}
.mega-col a .ico {
  width: 18px; color: var(--ink-300);
  flex-shrink: 0;
  transition: color .12s;
}
.mega-col a:hover .ico { color: var(--accent); }

/* ------------------------------------------------------------
   BANNER CAROUSEL (cycling photo banners)
   ------------------------------------------------------------ */
.banner-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0f1f;
  aspect-ratio: 4 / 1;
  max-height: 420px;
}
.banner-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .7s cubic-bezier(.7,.0,.2,1);
}
.banner-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}
.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.banner-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(10,15,31,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s, background .15s, border-color .15s;
  z-index: 3;
  font-size: 1.1rem;
}
.banner-nav.prev { left: 1.25rem; }
.banner-nav.next { right: 1.25rem; }
.banner-carousel:hover .banner-nav { opacity: 1; }
.banner-nav:hover {
  background: rgba(10,15,31,0.7);
  border-color: rgba(255,255,255,0.5);
}

.banner-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 3;
}
.banner-dot {
  width: 38px;
  height: 4px;
  background: rgba(255,255,255,0.25);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: background .15s, height .15s;
}
.banner-dot:hover { background: rgba(255,255,255,0.4); }
.banner-dot.active { background: rgba(255,255,255,0.3); }
.banner-dot-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}
.banner-dot.active .banner-dot-fill {
  width: 100%;
  animation-name: banner-fill;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes banner-fill {
  from { width: 0; }
  to   { width: 100%; }
}

/* ------------------------------------------------------------
   WELCOME STRIP (dark band below the banner — welcome + finder)
   ------------------------------------------------------------ */
.welcome-strip {
  position: relative;
  background:
    linear-gradient(135deg, var(--tld-blue-950) 0%, var(--tld-blue-900) 55%, var(--tld-blue-800) 100%);
  color: #fff;
  padding: 2.75rem 0 6rem;
  overflow: hidden;
}
.welcome-pattern {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 30%, transparent 85%);
  pointer-events: none;
}
.welcome-strip::after {
  content: "";
  position: absolute;
  bottom: 0; right: 0;
  width: 180px; height: 180px;
  background: linear-gradient(45deg, var(--accent) 0%, var(--accent) 32%, transparent 32%);
  opacity: .92;
}
.welcome-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 1rem 0 0;
  text-wrap: pretty;
}
.welcome-title em {
  font-style: normal;
  color: var(--accent);
}
.welcome-sub {
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
  margin: .9rem 0 0;
  max-width: 58ch;
}

/* welcome-strip pattern variants (reuse hero-pattern tweak) */
[data-hero-pattern="diagonal"] .welcome-pattern {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.12) 0px,
    rgba(255,255,255,0.12) 2px,
    transparent 2px,
    transparent 16px
  );
  background-size: auto;
}
[data-hero-pattern="dots"] .welcome-pattern {
  background-image: radial-gradient(circle, rgba(255,255,255,0.22) 1.5px, transparent 1.8px);
  background-size: 28px 28px;
}
[data-hero-pattern="caution"] .welcome-pattern {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--accent) 0px,
    var(--accent) 22px,
    #0a0f1f 22px,
    #0a0f1f 44px
  );
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 6%, transparent 14%, transparent 86%, #000 94%, #000 100%);
          mask-image:
    linear-gradient(180deg, #000 0%, #000 6%, transparent 14%, transparent 86%, #000 94%, #000 100%);
  opacity: .85;
}
[data-hero-pattern="solid"] .welcome-pattern { display: none; }

/* finder-wrap should still overlap into next white section */
.finder-wrap {
  margin-top: -4.5rem;
  position: relative;
  z-index: 3;
}


.hero .container { position: relative; z-index: 2; }

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; background: var(--accent); border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(232, 119, 34, 0.25);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 1rem 0 0;
  text-wrap: pretty;
}
.hero-title em {
  font-style: normal;
  color: var(--accent);
}
.hero-sub {
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
  margin: 1rem 0 0;
  max-width: 58ch;
}

.tail-numbers {
  position: absolute;
  left: 2rem;
  bottom: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.16em;
  z-index: 1;
}

/* Equipment finder card (overlaps hero) */
.finder-wrap {
  margin-top: -4.5rem;
  position: relative;
  z-index: 3;
}
.finder {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: var(--shadow-lg);
}
.finder .label-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .75rem;
}
.finder .label-row .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.finder .fleet-stat {
  font-size: 0.85rem;
  color: var(--ink-600);
}
.finder .fleet-stat strong {
  color: var(--ink-900);
  font-weight: 600;
}

.find-tabs {
  display: inline-flex;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
.find-tabs button {
  background: transparent;
  border: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-600);
  padding: .4rem .8rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-body);
}
.find-tabs button.active {
  background: #fff;
  color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}

.find-input-group {
  display: flex;
  align-items: stretch;
  gap: .65rem;
  margin-top: .25rem;
}
.find-input-group .field {
  flex: 1;
  position: relative;
}
.find-input-group .field input {
  width: 100%;
  height: 52px;
  padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: 0.98rem;
  font-family: var(--font-body);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.find-input-group .field input:focus {
  outline: none;
  border-color: var(--tld-blue);
  box-shadow: 0 0 0 3px rgba(37, 85, 168, 0.15);
}
.find-input-group .field .icon {
  position: absolute;
  left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
}
.btn-find {
  background: var(--tld-blue);
  color: #fff;
  border: 0;
  border-radius: var(--r-md);
  padding: 0 1.6rem;
  height: 52px;
  font-weight: 600;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.btn-find:hover { background: var(--tld-blue-700); }
.btn-find .arrow {
  transition: transform .15s;
}
.btn-find:hover .arrow { transform: translateX(2px); }

.finder-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--ink-100);
  font-size: 0.85rem;
  color: var(--ink-500);
}
.finder-foot a {
  color: var(--tld-blue);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
}
.finder-foot a:hover { color: var(--tld-blue-700); }

/* ------------------------------------------------------------
   Quick access tiles
   ------------------------------------------------------------ */
.quick-tile {
  display: block;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--pad-card);
  text-decoration: none;
  color: inherit;
  height: 100%;
  position: relative;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  overflow: hidden;
}
.quick-tile:hover {
  border-color: var(--tld-blue-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: inherit;
}
.quick-tile .qt-ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--tld-blue-50);
  color: var(--tld-blue);
  border-radius: var(--r-sm);
  margin-bottom: 1rem;
}
.quick-tile.is-accent .qt-ico {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.quick-tile .qt-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink-900);
  margin: 0 0 .15rem;
  line-height: 1.1;
}
.quick-tile .qt-sub {
  font-size: 0.86rem;
  color: var(--ink-500);
  line-height: 1.35;
  margin: 0;
}
.quick-tile .qt-arrow {
  position: absolute;
  top: var(--pad-card); right: var(--pad-card);
  color: var(--ink-300);
  transition: transform .15s, color .15s;
}
.quick-tile:hover .qt-arrow {
  color: var(--tld-blue);
  transform: translateX(3px);
}
.quick-tile.is-accent:hover .qt-arrow { color: var(--accent); }

.quick-tile .qt-tag {
  position: absolute;
  bottom: var(--pad-card);
  right: var(--pad-card);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ------------------------------------------------------------
   Document Hub
   ------------------------------------------------------------ */
.dochub {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.dochub-head {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--ink-100);
  background: linear-gradient(180deg, #fff, var(--ink-50));
}
.dochub-search {
  display: flex;
  align-items: stretch;
  gap: .65rem;
  margin: 1rem 0 1.1rem;
}
.dochub-search .field {
  flex: 1;
  position: relative;
}
.dochub-search input {
  width: 100%;
  height: 48px;
  padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  font-family: var(--font-body);
  background: #fff;
}
.dochub-search input:focus {
  outline: none;
  border-color: var(--tld-blue);
  box-shadow: 0 0 0 3px rgba(37, 85, 168, 0.12);
}
.dochub-search .icon {
  position: absolute;
  left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border: 1px solid var(--ink-200);
  background: #fff;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  transition: all .12s;
}
.chip:hover { border-color: var(--tld-blue-300); color: var(--tld-blue); }
.chip.active {
  background: var(--tld-blue);
  border-color: var(--tld-blue);
  color: #fff;
}
.chip .count {
  font-family: var(--font-mono);
  font-size: .7rem;
  opacity: .7;
}

.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.doc-row {
  display: grid;
  grid-template-columns: 44px 1.5fr 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid var(--ink-100);
  transition: background .12s;
  text-decoration: none;
  color: inherit;
}
.doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: var(--tld-blue-50); color: inherit; }

.doc-row .doc-ico {
  width: 40px; height: 50px;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #f1f3f7);
  border: 1px solid var(--ink-200);
  position: relative;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-700);
}
.doc-row .doc-ico::before {
  /* dog-ear */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 9px; height: 9px;
  background:
    linear-gradient(225deg, var(--ink-200) 0%, var(--ink-200) 50%, transparent 50%);
}
.doc-row .doc-ico.is-pdf { color: #b3261e; }
.doc-row .doc-ico.is-sb  { color: var(--accent-strong); }

.doc-row .doc-title {
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.25;
  font-size: 0.95rem;
}
.doc-row .doc-sub {
  font-size: 0.78rem;
  color: var(--ink-500);
  font-family: var(--font-mono);
  margin-top: 2px;
}

.doc-row .doc-meta {
  font-size: 0.85rem;
  color: var(--ink-600);
}
.doc-row .doc-meta .label {
  font-size: 0.7rem;
  color: var(--ink-400);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
}

.doc-row .doc-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: .25rem .55rem;
  border-radius: 3px;
  background: var(--ink-50);
  color: var(--ink-700);
  border: 1px solid var(--ink-100);
}
.doc-row .doc-tag.tag-manual    { background: var(--tld-blue-50);  color: var(--tld-blue-700); border-color: var(--tld-blue-100); }
.doc-row .doc-tag.tag-schematic { background: #f3f0ff;             color: #4f3cc9;             border-color: #e2dcfb; }
.doc-row .doc-tag.tag-bulletin  { background: var(--accent-soft);  color: var(--accent-strong);border-color: #f7d6b4; }
.doc-row .doc-tag.tag-datasheet { background: #e7f5ec;             color: #1b8a52;             border-color: #c9e9d4; }
.doc-row .doc-tag.tag-public {
  background: var(--tld-blue-50);
  color: var(--tld-blue-700);
  border-color: var(--tld-blue-100);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* download-list row: visible download button instead of icon-only */
.dl-row { grid-template-columns: 44px 1.6fr 1fr auto auto; }
.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border-radius: var(--r-md);
  background: var(--tld-blue);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s;
}
.doc-row.dl-row:hover .dl-btn { background: var(--tld-blue-700); }

.dl-empty {
  padding: 2.5rem 1.75rem;
  text-align: center;
  color: var(--ink-400);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

/* numbered process steps (returns page) */
.proc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  counter-reset: step;
}
@media (max-width: 900px) { .proc-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .proc-steps { grid-template-columns: 1fr; } }
.proc-step {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: 1.5rem 1.25rem 1.25rem;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.proc-step .step-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--tld-blue);
  color: #fff;
  border-radius: var(--r-sm);
  margin-bottom: .9rem;
}
.proc-step:nth-child(1) .step-num { background: var(--tld-blue); }
.proc-step .step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink-900);
  margin: 0 0 .35rem;
  line-height: 1.1;
}
.proc-step .step-text {
  font-size: 0.88rem;
  color: var(--ink-600);
  line-height: 1.45;
  margin: 0;
}
.proc-step .step-arrow {
  position: absolute;
  top: 1.9rem; right: -0.7rem;
  color: var(--ink-200);
  z-index: 2;
  background: var(--surface);
}
@media (max-width: 900px) { .proc-step .step-arrow { display: none; } }

.doc-row .doc-action {
  color: var(--ink-400);
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  transition: background .12s, color .12s;
}
.doc-row:hover .doc-action {
  color: var(--tld-blue);
  background: #fff;
}

.dochub-foot {
  padding: 1rem 1.75rem;
  background: var(--ink-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--ink-500);
  border-top: 1px solid var(--ink-100);
}
.dochub-foot a {
  font-weight: 600; color: var(--tld-blue); text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
}

/* ------------------------------------------------------------
   Team rep cards
   ------------------------------------------------------------ */
.rep-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.rep-card:hover {
  border-color: var(--tld-blue-300);
  box-shadow: var(--shadow-md);
}
.rep-card .rep-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: var(--pad-card);
  border-bottom: 1px solid var(--ink-100);
  position: relative;
}
.rep-card .rep-head::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 4px; height: 100%;
  background: var(--tld-blue);
}
.rep-card.rep-service .rep-head::before { background: var(--accent); }
.rep-card.rep-parts   .rep-head::before { background: var(--tld-blue-500); }

.rep-card .rep-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--tld-blue-700), var(--tld-blue));
  position: relative;
}
.rep-card .rep-avatar::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px dashed var(--ink-200);
  border-radius: 50%;
}
.rep-card.rep-service .rep-avatar { background: linear-gradient(135deg, #c75d10, var(--accent)); }
.rep-card.rep-parts   .rep-avatar { background: linear-gradient(135deg, var(--tld-blue-500), #6e92d4); }

.rep-card .rep-role-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: .25rem;
}
.rep-card .rep-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink-900);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.005em;
}
.rep-card .rep-bu {
  font-size: 0.84rem;
  color: var(--ink-500);
  margin-top: .15rem;
}

.rep-card .rep-body {
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
}
.rep-card .rep-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 0.88rem;
  color: var(--ink-800);
  text-decoration: none;
  transition: color .12s;
  word-break: break-word;
}
.rep-card .rep-item:hover { color: var(--tld-blue); }
.rep-card .rep-item .ri-ico {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--ink-50);
  border-radius: var(--r-sm);
  color: var(--ink-500);
  flex-shrink: 0;
}

.rep-card .rep-cta {
  margin-top: auto;
  border-top: 1px solid var(--ink-100);
  padding: .9rem var(--pad-card);
  background: var(--ink-50);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-600);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.rep-card .rep-cta:hover {
  background: var(--tld-blue);
  color: #fff;
}

/* ------------------------------------------------------------
   Hub address cards
   ------------------------------------------------------------ */
.hub-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.hub-card .hub-map {
  height: 100px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.9) 100%),
    repeating-linear-gradient(0deg, rgba(37,85,168,.07) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(37,85,168,.07) 0 1px, transparent 1px 28px),
    var(--tld-blue-50);
  position: relative;
  border-bottom: 1px solid var(--ink-100);
}
.hub-card .hub-map::after {
  /* fake road */
  content: "";
  position: absolute;
  left: 14%; right: -10%;
  top: 60%;
  height: 5px;
  background: var(--ink-200);
  transform: rotate(-12deg);
  border-radius: 999px;
}
.hub-card .hub-pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  width: 28px; height: 28px;
  background: var(--accent);
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  box-shadow: 0 4px 10px rgba(232,119,34,.5);
}
.hub-card .hub-pin::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: #fff;
  border-radius: 50%;
}

.hub-card .hub-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 1rem var(--pad-card) .75rem;
  gap: 1rem;
}
.hub-card .hub-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.1;
}
.hub-card .hub-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .25rem;
}

.hub-card .hub-body {
  padding: 0 var(--pad-card) 1rem;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: .5rem .75rem;
  font-size: 0.86rem;
  flex: 1;
}
.hub-card .hub-body dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 500;
  padding-top: 2px;
}
.hub-card .hub-body dd {
  margin: 0;
  color: var(--ink-800);
  font-weight: 500;
}
.hub-card .hub-body dd.muted { color: var(--ink-500); font-weight: 400; }

.hub-card .hub-foot {
  border-top: 1px solid var(--ink-100);
  padding: .75rem var(--pad-card);
  background: var(--ink-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86rem;
}
.hub-card .hub-foot a {
  color: var(--tld-blue);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.mega-col a.is-current {
  color: var(--accent-strong);
  font-weight: 600;
}
.mega-col a.is-current .ico { color: var(--accent); }

/* ------------------------------------------------------------
   MAJOR COMPONENT REPAIRS page
   ------------------------------------------------------------ */
.repairs-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.repairs-lead .accent { color: var(--accent-strong); }
.repairs-body p {
  color: var(--ink-700);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
  max-width: 60ch;
}
.repairs-body strong { color: var(--ink-900); font-weight: 600; }

/* component-type chips */
.comp-types {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 .5rem;
}
.comp-type {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-800);
}
.comp-type .ct-ico { color: var(--tld-blue); display: grid; place-items: center; }
.comp-type.more {
  background: var(--tld-blue-50);
  border-color: var(--tld-blue-100);
  color: var(--tld-blue-700);
}

/* priority benefit list */
.priority-block {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
  margin-top: .5rem;
}
.priority-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink-900);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.priority-head .ph-bar {
  width: 4px; height: 24px; background: var(--accent); border-radius: 2px;
}
.priority-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem 1.5rem;
}
@media (max-width: 700px) { .priority-list { grid-template-columns: 1fr; } }
.priority-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: 0.96rem;
  color: var(--ink-800);
  line-height: 1.4;
}
.priority-list .pl-ico {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: grid; place-items: center;
  font-size: .8rem;
  margin-top: 1px;
}

/* ------------------------------------------------------------
   BEFORE / AFTER comparison slider
   ------------------------------------------------------------ */
.ba-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: sticky;
  top: 1.5rem;
}
.ba-head {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--ink-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ba-head .ba-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink-900);
  margin: 0;
}
.ba-head .ba-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.ba-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--ink-100);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.ba-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ba-layer image-slot,
.ba-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-layer.after {
  /* clipped from the left by the handle position */
  clip-path: inset(0 0 0 var(--split, 50%));
}
.ba-layer.before {
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
}
.ba-badge {
  position: absolute;
  top: .85rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding: .3rem .7rem;
  border-radius: 3px;
  z-index: 4;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.ba-badge.before { left: .85rem; background: rgba(10,15,31,0.72); }
.ba-badge.after  { right: .85rem; background: var(--accent); }

.ba-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10,15,31,0.15);
  z-index: 5;
  pointer-events: none;
}
.ba-knob {
  position: absolute;
  top: 50%;
  left: var(--split, 50%);
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-md);
  z-index: 6;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
  gap: 0;
}
.ba-foot {
  padding: 1rem 1.5rem;
  background: var(--ink-50);
  border-top: 1px solid var(--ink-100);
  font-size: 0.84rem;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* CTA band */
.repairs-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--tld-blue-900) 0%, var(--tld-blue-800) 100%);
  border-radius: var(--r-lg);
  padding: 2.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.repairs-cta::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 160px; height: 160px;
  background: linear-gradient(225deg, var(--accent) 0%, var(--accent) 32%, transparent 32%);
  opacity: .9;
}
.repairs-cta .cta-text { position: relative; z-index: 2; max-width: 60ch; }
.repairs-cta h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  color: #fff;
  margin: 0 0 .5rem;
}
.repairs-cta p { color: rgba(255,255,255,0.8); margin: 0; font-size: 1rem; }
.repairs-cta .btn-cta {
  position: relative;
  z-index: 2;
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: .9rem 1.6rem;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  white-space: nowrap;
  transition: background .15s, transform .15s;
}
.repairs-cta .btn-cta:hover { background: var(--accent-strong); transform: translateX(2px); }
/* ------------------------------------------------------------
   DATA TABLE (Equipment's)
   ------------------------------------------------------------ */
.dt-wrap {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dt-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ink-100);
  background: linear-gradient(180deg, #fff, var(--ink-50));
  flex-wrap: wrap;
}
.dt-search {
  position: relative;
  flex: 1;
  min-width: 240px;
}
.dt-search input {
  width: 100%;
  height: 44px;
  padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  font-family: var(--font-body);
  background: #fff;
}
.dt-search input:focus {
  outline: none;
  border-color: var(--tld-blue);
  box-shadow: 0 0 0 3px rgba(37,85,168,0.12);
}
.dt-search .icon {
  position: absolute;
  left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-400);
}
.dt-toolbar .dt-count {
  font-size: 0.86rem;
  color: var(--ink-500);
  white-space: nowrap;
}
.dt-toolbar .dt-count strong { color: var(--ink-900); font-weight: 600; }

.dt-result-count {
  font-size: 0.84rem;
  color: var(--ink-500);
  white-space: nowrap;
}
.dt-result-count strong { color: var(--ink-900); font-weight: 600; }

.dt-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--ink-200);
  background: #fff;
  border-radius: var(--r-md);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.dt-btn:hover { border-color: var(--tld-blue-300); color: var(--tld-blue); }
.dt-btn.active {
  background: var(--tld-blue);
  border-color: var(--tld-blue);
  color: #fff;
}
.dt-btn .badge-n {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .68rem;
  padding: .05rem .4rem;
}

.dt-scroll { overflow-x: auto; }
table.dt {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 980px;
}
table.dt thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: .8rem 1rem;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
  white-space: nowrap;
}
table.dt thead th.sortable { cursor: pointer; user-select: none; }
table.dt thead th.sortable:hover { color: var(--tld-blue); }
table.dt thead th .th-inner { display: inline-flex; align-items: center; gap: .4rem; }
table.dt thead th .sort-ico { color: var(--ink-300); font-size: .7rem; }
table.dt thead th.sorted .sort-ico { color: var(--accent); }
table.dt thead th.sorted { color: var(--ink-900); }

/* filter row */
table.dt thead tr.dt-filters th {
  background: #fff;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--ink-100);
}
table.dt thead tr.dt-filters input {
  width: 100%;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  padding: .4rem .55rem;
  font-size: 0.82rem;
  font-family: var(--font-body);
  background: var(--ink-50);
}
table.dt thead tr.dt-filters input:focus {
  outline: none;
  border-color: var(--tld-blue);
  background: #fff;
}

table.dt tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--ink-100);
  color: var(--ink-800);
  vertical-align: middle;
}
table.dt tbody tr { transition: background .12s; }
table.dt tbody tr:hover { background: var(--tld-blue-50); }
table.dt tbody tr:last-child td { border-bottom: 0; }

.dt-mono {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--ink-900);
  font-weight: 500;
}
.dt-sub { font-size: 0.76rem; color: var(--ink-500); }
.dt-type-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-700);
}
.dt-type-chip .tc-dot {
  width: 8px; height: 8px; border-radius: 2px; background: var(--tld-blue);
}
.dt-airport {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.dt-airport .iata {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--tld-blue-700);
  background: var(--tld-blue-50);
  border: 1px solid var(--tld-blue-100);
  border-radius: 3px;
  padding: .1rem .4rem;
}

.dt-view {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tld-blue);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
table.dt tbody tr:hover .dt-view {
  background: var(--tld-blue);
  border-color: var(--tld-blue);
  color: #fff;
}

.dt-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ink-400);
}
.dt-empty .ico { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--ink-300); }
.dt-empty-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 .75rem;
}
.dt-empty .btn-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--tld-blue);
  color: #fff;
  border: 0;
  padding: .7rem 1.4rem;
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.dt-empty .btn-cta:hover { background: var(--tld-blue-700); transform: translateX(2px); }

/* footer / pagination */
.dt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.25rem;
  background: var(--ink-50);
  border-top: 1px solid var(--ink-100);
  flex-wrap: wrap;
  gap: .75rem;
}
.dt-foot .dt-per {
  font-size: 0.84rem;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.dt-foot .dt-per select {
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  padding: .25rem 1.5rem .25rem .5rem;
  font-size: 0.84rem;
  background: #fff;
}
.dt-pages { display: flex; align-items: center; gap: .25rem; }
.dt-page {
  min-width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--ink-200);
  background: #fff;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  padding: 0 .5rem;
  font-family: var(--font-mono);
  text-decoration: none;
}
.dt-page:hover:not(:disabled) { border-color: var(--tld-blue-300); color: var(--tld-blue); text-decoration: none; }
.dt-page.active {
  background: var(--tld-blue);
  border-color: var(--tld-blue);
  color: #fff;
  cursor: default;
}
.dt-page:disabled { opacity: .4; cursor: not-allowed; }

/* ------------------------------------------------------------
   CONTENT PAGE prose (returns instructions etc.)
   ------------------------------------------------------------ */
.doc-prose p {
  color: var(--ink-700);
  font-size: 1.02rem;
  line-height: 1.62;
  margin: 0 0 1.1rem;
  max-width: 70ch;
}
.doc-prose p strong { color: var(--ink-900); font-weight: 600; }
.doc-prose .prose-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink-900);
  margin: 2rem 0 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.doc-prose .prose-h .ph-bar { width: 4px; height: 22px; background: var(--accent); border-radius: 2px; }

.note-list { list-style: none; margin: 0 0 1rem; padding: 0; max-width: 72ch; }
.note-list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--ink-100);
  color: var(--ink-700);
  font-size: 0.95rem;
  line-height: 1.45;
}
.note-list li:last-child { border-bottom: 0; }
.note-list .n-ico {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%;
  background: var(--tld-blue-50);
  color: var(--tld-blue);
  display: grid; place-items: center;
  font-size: .68rem;
}

.callout {
  border: 1px solid var(--ink-200);
  border-left: 4px solid var(--accent);
  background: var(--ink-50);
  border-radius: var(--r-md);
  padding: 1.25rem 1.4rem;
  margin: 1.25rem 0 0;
  max-width: 72ch;
}
.callout .callout-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: 500;
  margin-bottom: .5rem;
  display: flex; align-items: center; gap: .45rem;
}
.callout p { margin: 0; font-size: 0.92rem; color: var(--ink-700); line-height: 1.55; }

/* image rail for content pages */
.return-rail {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.return-rail image-slot {
  width: 100%;
  height: 230px;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}

/* worldwide region contact cards */
.region-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 1100px) { .region-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .region-grid { grid-template-columns: 1fr; } }
.region-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.region-card:hover { border-color: var(--tld-blue-300); box-shadow: var(--shadow-md); }
.region-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tld-blue);
}
.region-card .reg-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink-900);
  display: flex; align-items: center; gap: .5rem;
}
.region-card .reg-flag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  background: var(--tld-blue-50);
  color: var(--tld-blue-700);
  border: 1px solid var(--tld-blue-100);
  border-radius: 3px;
  padding: .1rem .35rem;
}
.region-card a, .region-card .reg-line {
  display: flex; align-items: center; gap: .55rem;
  font-size: 0.86rem;
  color: var(--ink-700);
  text-decoration: none;
  word-break: break-word;
}
.region-card a:hover { color: var(--tld-blue); }
.region-card .reg-line .ri {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--ink-50);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--ink-500);
}

/* ------------------------------------------------------------
   CATALOGUE (Products) — drill-down cards
   ------------------------------------------------------------ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  position: relative;
}
.cat-card:hover { border-color: var(--tld-blue-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cat-media {
  height: 260px;
  position: relative;
  background:
    linear-gradient(180deg, #fff 0%, var(--ink-50) 100%),
    repeating-linear-gradient(0deg, rgba(37,85,168,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(37,85,168,.05) 0 1px, transparent 1px 26px);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--ink-100);
  overflow: hidden;
}
.cat-media .cat-ico {
  font-size: 3.4rem;
  color: var(--tld-blue);
  opacity: .85;
}
.cat-media img { max-width: 80%; max-height: 200px; width: auto; height: auto; object-fit: contain; display: block; margin: auto; }
.cat-media image-slot { width: 100%; height: 100%; display: block; }
.cat-media .cat-count {
  position: absolute;
  top: .75rem; right: .75rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--ink-100);
  color: var(--ink-600);
  padding: .25rem .55rem;
  border-radius: 999px;
}
.cat-foot {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.cat-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink-900);
  line-height: 1.1;
  margin: 0;
}
.cat-foot .cat-arrow {
  color: var(--ink-300);
  transition: transform .15s, color .15s;
  flex-shrink: 0;
}
.cat-card:hover .cat-arrow { color: var(--tld-blue); transform: translateX(3px); }

/* inline breadcrumb trail (within catalogue) */
.cat-trail {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}
.cat-trail button, .cat-trail a {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--tld-blue);
  font-weight: 600;
  font-size: 0.92rem;
  font-family: var(--font-body);
  text-decoration: none;
}
.cat-trail button:hover { color: var(--tld-blue-700); text-decoration: underline; }
.cat-trail .sep { color: var(--ink-300); }
.cat-trail .current { color: var(--ink-700); font-weight: 600; }

/* family detail */
.fam-detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 820px) { .fam-detail { grid-template-columns: 1fr; } }
.fam-desc { color: var(--ink-700); font-size: 1rem; line-height: 1.6; }
.fam-media {
  background:
    linear-gradient(180deg, #fff 0%, var(--ink-50) 100%),
    repeating-linear-gradient(0deg, rgba(37,85,168,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(37,85,168,.05) 0 1px, transparent 1px 26px);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  min-height: 260px;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.fam-media .cat-ico { font-size: 4.5rem; color: var(--tld-blue); opacity: .85; }
.fam-media img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  padding: 1rem;
}

.ds-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink-900);
  margin: 2rem 0 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.ds-title .ph-bar { width: 4px; height: 22px; background: var(--accent); border-radius: 2px; }

/* ------------------------------------------------------------
   COMING SOON
   ------------------------------------------------------------ */
.coming-wrap {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 1rem;
  position: relative;
  overflow: hidden;
}
.coming-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(37,85,168,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,85,168,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 20%, transparent 75%);
  pointer-events: none;
}
.coming-inner { position: relative; z-index: 2; max-width: 560px; }
.coming-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid #c9e9d4;
  padding: .4rem .85rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.coming-badge .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(27,138,82,0.5);
  animation: coming-pulse 1.8s infinite;
}
@keyframes coming-pulse {
  0% { box-shadow: 0 0 0 0 rgba(27,138,82,0.5); }
  70% { box-shadow: 0 0 0 10px rgba(27,138,82,0); }
  100% { box-shadow: 0 0 0 0 rgba(27,138,82,0); }
}
.coming-icon {
  width: 96px; height: 96px;
  margin: 0 auto 1.5rem;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--tld-blue-900), var(--tld-blue-700));
  color: #fff;
  font-size: 2.5rem;
  position: relative;
}
.coming-icon::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 36px; height: 36px;
  background: linear-gradient(225deg, var(--accent) 0%, var(--accent) 36%, transparent 36%);
  border-top-right-radius: var(--r-lg);
}
.coming-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--ink-900);
  line-height: 1.05;
  margin: 0 0 .85rem;
}
.coming-sub {
  font-size: 1.05rem;
  color: var(--ink-600);
  line-height: 1.6;
  margin: 0 auto 2rem;
  max-width: 46ch;
}
.coming-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.coming-progress {
  margin: 2.25rem auto 0;
  max-width: 320px;
}
.coming-progress .bar {
  height: 6px;
  border-radius: 999px;
  background: var(--ink-100);
  overflow: hidden;
}
.coming-progress .bar span {
  display: block; height: 100%; width: 45%;
  background: linear-gradient(90deg, var(--tld-blue), var(--accent));
  border-radius: 999px;
}
.coming-progress .label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: .5rem;
  display: flex; justify-content: space-between;
}

/* ------------------------------------------------------------
   TRAININGS — offer rows
   ------------------------------------------------------------ */
.train-list { display: flex; flex-direction: column; gap: 1rem; }
.train-row {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.train-row:hover { border-color: var(--tld-blue-300); box-shadow: var(--shadow-md); transform: translateX(2px); }
.train-row::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--tld-blue);
}
.train-row:nth-child(2)::before { background: var(--tld-blue-500); }
.train-row:nth-child(3)::before { background: var(--accent); }
.train-ico {
  width: 54px; height: 54px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--tld-blue-50);
  color: var(--tld-blue);
  font-size: 1.5rem;
}
.train-row:nth-child(3) .train-ico { background: var(--accent-soft); color: var(--accent-strong); }
.train-body { flex: 1; }
.train-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink-900);
  margin: 0 0 .15rem;
  line-height: 1.1;
}
.train-sub { font-size: 0.9rem; color: var(--ink-600); margin: 0; }
.train-level {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}

.train-rail { position: sticky; top: 1.5rem; }
.train-rail image-slot {
  width: 100%; height: 300px; display: block;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--ink-100); box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------
   TELEMETRY — action paths
   ------------------------------------------------------------ */
.tele-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 820px) { .tele-grid { grid-template-columns: 1fr; } }
.tele-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.85rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tele-card:hover { border-color: var(--tld-blue-300); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tele-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tld-blue);
}
.tele-card.is-new::before { background: var(--accent); }
.tele-ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--tld-blue-50);
  color: var(--tld-blue);
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
}
.tele-card.is-new .tele-ico { background: var(--accent-soft); color: var(--accent-strong); }
.tele-step {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: .4rem;
}
.tele-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--ink-900);
  line-height: 1.1;
  margin: 0 0 .6rem;
}
.tele-desc {
  font-size: 0.95rem;
  color: var(--ink-600);
  line-height: 1.55;
  margin: 0 0 1.5rem;
}
.tele-desc strong { color: var(--ink-900); font-weight: 600; }
.tele-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.3rem;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  width: fit-content;
  transition: background .15s, transform .15s;
}
.tele-cta.primary { background: var(--tld-blue); color: #fff; }
.tele-cta.primary:hover { background: var(--tld-blue-700); transform: translateX(2px); }
.tele-cta.accent { background: var(--accent); color: #fff; }
.tele-cta.accent:hover { background: var(--accent-strong); transform: translateX(2px); }

/* learn-more banner */
.tele-learn {
  margin-top: 1.25rem;
  background: linear-gradient(135deg, var(--tld-blue-900), var(--tld-blue-800));
  border-radius: var(--r-lg);
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.tele-learn::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 140px; height: 140px;
  background: linear-gradient(225deg, var(--accent) 0%, var(--accent) 32%, transparent 32%);
  opacity: .9;
}
.tele-learn .tl-text { position: relative; z-index: 2; }
.tele-learn .tl-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: .35rem;
}
.tele-learn h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: #fff;
  margin: 0;
}
.tele-learn p { color: rgba(255,255,255,0.75); margin: .35rem 0 0; font-size: .95rem; }
.tele-learn .tl-btn {
  position: relative;
  z-index: 2;
  background: #fff;
  color: var(--tld-blue-900);
  border-radius: var(--r-md);
  padding: .8rem 1.4rem;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  transition: transform .15s;
}
.tele-learn .tl-btn:hover { transform: translateX(2px); }

/* ------------------------------------------------------------
   RSPL — P/M/O/C category cards
   ------------------------------------------------------------ */
.pmoc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 1000px) { .pmoc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px)  { .pmoc-grid { grid-template-columns: 1fr; } }
.pmoc-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.35rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pmoc-card:hover { border-color: var(--tld-blue-300); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pmoc-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  color: #fff;
  margin-bottom: 1rem;
}
.pmoc-card.p .pmoc-letter { background: linear-gradient(135deg, var(--tld-blue-500), var(--tld-blue)); }
.pmoc-card.m .pmoc-letter { background: linear-gradient(135deg, var(--tld-blue), var(--tld-blue-700)); }
.pmoc-card.o .pmoc-letter { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); }
.pmoc-card.c .pmoc-letter { background: linear-gradient(135deg, #c0322c, #8f221d); }
.pmoc-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.pmoc-card.p::before { background: var(--tld-blue-500); }
.pmoc-card.m::before { background: var(--tld-blue-700); }
.pmoc-card.o::before { background: var(--accent); }
.pmoc-card.c::before { background: #c0322c; }
.pmoc-kind {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink-900);
  line-height: 1.1;
  margin: 0 0 .5rem;
}
.pmoc-eg {
  font-size: 0.86rem;
  color: var(--ink-600);
  line-height: 1.45;
  margin: 0;
}
.pmoc-eg .eg-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  display: block;
  margin-bottom: .25rem;
}

/* RSPL hero side image slot */
.rspl-rail { position: sticky; top: 1.5rem; }
.rspl-rail image-slot {
  width: 100%;
  height: 300px;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}


.page-hero {
  position: relative;
  background:
    linear-gradient(135deg, var(--tld-blue-950) 0%, var(--tld-blue-900) 55%, var(--tld-blue-800) 100%);
  color: #fff;
  padding: 2.25rem 0 3rem;
  overflow: hidden;
}
.page-hero-pattern {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 25%, transparent 80%);
  pointer-events: none;
  opacity: .9;
}
.page-hero::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 180px; height: 180px;
  background: linear-gradient(225deg, var(--accent) 0%, var(--accent) 32%, transparent 32%);
  opacity: .95;
}
.page-crumbs {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.page-crumbs a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}
.page-crumbs a:hover { color: var(--accent); }
.page-crumbs .sep { color: rgba(255,255,255,0.3); }
.page-crumbs .current { color: #fff; }
.page-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 1rem 0 0;
}
.page-hero-sub {
  color: rgba(255,255,255,0.78);
  font-size: 1.02rem;
  margin: .85rem 0 0;
  max-width: 64ch;
}

/* ------------------------------------------------------------
   CONTACT FORM
   ------------------------------------------------------------ */
.contact-form {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cf-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
}
@media (max-width: 900px) {
  .cf-grid { grid-template-columns: 1fr; }
}

.cf-side {
  background: var(--ink-50);
  padding: 1.5rem 1.25rem;
  border-right: 1px solid var(--ink-100);
}
.cf-side-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 0 .25rem;
  margin-bottom: .75rem;
}
.cf-dept-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.cf-dept {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem .9rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  width: 100%;
  font-family: var(--font-body);
}
.cf-dept:hover { background: #fff; border-color: var(--ink-100); }
.cf-dept.active {
  background: #fff;
  border-color: var(--tld-blue-300);
  box-shadow: var(--shadow-sm);
}
.cf-dept-ico {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--tld-blue-50);
  color: var(--tld-blue);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.cf-dept.active .cf-dept-ico {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.cf-dept-body { display: flex; flex-direction: column; flex: 1; line-height: 1.2; }
.cf-dept-name {
  font-weight: 600;
  color: var(--ink-900);
  font-size: 0.92rem;
}
.cf-dept-sub {
  font-size: 0.76rem;
  color: var(--ink-500);
  margin-top: 2px;
}
.cf-dept-mark { color: var(--ink-300); font-size: 1.05rem; }
.cf-dept.active .cf-dept-mark { color: var(--accent); }

.cf-main {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cf-row { display: flex; flex-direction: column; gap: .4rem; }
.cf-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) {
  .cf-row.two { grid-template-columns: 1fr; }
}
.cf-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: flex;
  justify-content: space-between;
}
.cf-label .muted { color: var(--ink-400); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: .78rem; }
.cf-counter { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-400); letter-spacing: 0.06em; }

.cf-input {
  width: 100%;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: .75rem .9rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  color: var(--ink-900);
}
.cf-input:focus {
  outline: none;
  border-color: var(--tld-blue);
  box-shadow: 0 0 0 3px rgba(37,85,168,0.12);
}
textarea.cf-input {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.cf-attach {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border: 1px dashed var(--ink-300);
  border-radius: var(--r-md);
  color: var(--ink-600);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  width: fit-content;
}
.cf-attach:hover {
  border-color: var(--tld-blue);
  color: var(--tld-blue);
  background: var(--tld-blue-50);
}

.cf-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--ink-100);
  margin: .5rem -1.75rem -1.75rem;
  padding: 1.25rem 1.75rem;
  background: var(--ink-50);
  flex-wrap: wrap;
  gap: 1rem;
}
.cf-promise {
  font-size: 0.86rem;
  color: var(--ink-600);
}
.cf-promise strong { color: var(--ink-900); font-weight: 600; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.site-footer {
  background: var(--ink-950);
  color: var(--ink-300);
  padding: 3rem 0 1.5rem;
  margin-top: 5rem;
}
.site-footer h6 {
  font-family: var(--font-display);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.site-footer a {
  color: var(--ink-300);
  text-decoration: none;
  font-size: .88rem;
  display: block;
  padding: .25rem 0;
}
.site-footer a:hover { color: #fff; }
.site-footer .footer-brand {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.site-footer .footer-brand .accent { color: var(--accent); }
.site-footer .footer-tag {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: .25rem;
}
.site-footer .legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-800);
  font-size: 0.8rem;
  color: var(--ink-500);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-footer .locale-select {
  background: transparent;
  color: var(--ink-200);
  border: 1px solid var(--ink-800);
  border-radius: var(--r-sm);
  padding: .35rem .75rem;
  font-size: 0.82rem;
}
.site-footer .locale-select option { background: var(--ink-950); }

/* ------------------------------------------------------------
   Utility
   ------------------------------------------------------------ */
.divider-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.divider-label::before,
.divider-label::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--ink-100);
}

.btn-outline-tld {
  background: transparent;
  border: 1px solid var(--ink-200);
  color: var(--ink-800);
  padding: .55rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: border-color .15s, color .15s, background .15s;
  cursor: pointer;
}
.btn-outline-tld:hover {
  border-color: var(--tld-blue);
  color: var(--tld-blue);
  background: var(--tld-blue-50);
}
/* ============================================================
   extranet-theme.css — ADDITIONS for the account + accessories pages
   Append these blocks to your existing assets/styles/extranet-theme.css.
   They only use existing design tokens (--tld-blue*, --ink*, --accent*,
   --r-*, --shadow-*, --font-*) already defined in :root — nothing else
   to add. Safe to paste at the end of the file.
   ============================================================ */

/* ------------------------------------------------------------
   MY ACCOUNT
   ------------------------------------------------------------ */
.acct-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.75rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.acct-header::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0; width: 5px;
  background: var(--tld-blue);
}
.acct-avatar {
  width: 84px; height: 84px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--tld-blue-700), var(--tld-blue));
  position: relative;
}
.acct-avatar::after {
  content: ""; position: absolute; inset: -4px;
  border: 1px dashed var(--ink-200); border-radius: 50%;
}
.acct-id { flex: 1; min-width: 220px; }
.acct-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.85rem;
  line-height: 1.05;
  color: var(--ink-900);
  margin: 0;
}
.acct-mail {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-500);
  margin: .3rem 0 .65rem;
}
.acct-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.acct-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 0.8rem; font-weight: 500;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--tld-blue-50);
  color: var(--tld-blue-700);
  border: 1px solid var(--tld-blue-100);
}
.acct-badge.org { background: var(--accent-soft); color: var(--accent-strong); border-color: #c9e9d4; }
.acct-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (max-width: 760px) { .info-grid { grid-template-columns: 1fr; } }
.info-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.info-card.span-2 { grid-column: 1 / -1; }
.info-card .info-head {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--ink-100);
  background: var(--ink-50);
}
.info-card .info-head .ph-bar { width: 4px; height: 20px; background: var(--accent); border-radius: 2px; }
.info-card .info-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink-900);
  margin: 0;
}
.info-list {
  margin: 0; padding: .5rem 1.4rem 1rem;
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
}
.info-list dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 500;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--ink-100);
  align-self: center;
}
.info-list dd {
  margin: 0;
  padding: .7rem 0;
  color: var(--ink-900);
  font-size: 0.95rem;
  border-bottom: 1px dashed var(--ink-100);
  align-self: center;
}
.info-list dt:last-of-type, .info-list dd:last-of-type { border-bottom: 0; }
.info-list dd.empty { color: var(--ink-300); }

/* edit-details form variant */
.info-card .info-body { padding: 1.4rem; }
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}
.field-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .field-grid { grid-template-columns: 1fr; } }
.field-block { display: flex; flex-direction: column; gap: .4rem; }
.field-block label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.acct-savebar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------
   ACCESSORIES
   ------------------------------------------------------------ */
.acc-strip {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: .75rem;
  margin-bottom: 2.25rem;
}
@media (max-width: 1000px) { .acc-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .acc-strip { grid-template-columns: repeat(2, 1fr); } }
.acc-strip image-slot,
.acc-strip .acc-cell {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: block;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, #fff 0%, var(--ink-50) 100%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.acc-cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.95rem;
}
.acc-cta-links a {
  color: var(--tld-blue);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.acc-cta-links a:hover { color: var(--tld-blue-700); text-decoration: underline; }/* ============================================================
   extranet-theme.css — ADDITIONS for the Login + Contact form pages
   Append these blocks to your existing assets/styles/extranet-theme.css.
   They only use design tokens already defined in :root
   (--tld-blue*, --ink*, --accent*, --r-*, --shadow-*, --font-*).
   ============================================================ */

/* ===== LOGIN (split-screen, standalone) ===== */

/* ------------------------------------------------------------
   LOGIN (split-screen, standalone — no nav)
   ------------------------------------------------------------ */
.login-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--bg);
}
@media (max-width: 860px) { .login-shell { grid-template-columns: 1fr; } }

/* LEFT brand panel */
.login-brand {
  position: relative;
  background: linear-gradient(135deg, var(--tld-blue-950) 0%, var(--tld-blue-900) 55%, var(--tld-blue-800) 100%);
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
}
@media (max-width: 860px) { .login-brand { min-height: 240px; padding: 2rem; } }
.login-brand-photo {
  position: absolute; inset: 0;
  opacity: .28;
  filter: grayscale(1) contrast(1.05);
}
.login-brand-photo image-slot,
.login-brand-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.login-brand-pattern {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 25%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 25%, transparent 85%);
  pointer-events: none;
}
.login-brand::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 200px; height: 200px;
  background: linear-gradient(225deg, var(--accent) 0%, var(--accent) 30%, transparent 30%);
  opacity: .95;
}
.login-brand > * { position: relative; z-index: 2; }
.login-brand-logo {
  height: 40px;
  filter: brightness(0) invert(1);
}
.login-brand-copy { max-width: 30ch; }
.login-brand-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 1rem;
}
.login-brand-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(27,138,82,.25);
}
.login-brand-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  color: #fff;
}
.login-brand-sub {
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  margin: 1rem 0 0;
}
.login-brand-foot {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.4);
}

/* RIGHT form panel */
.login-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
@media (max-width: 860px) { .login-form-side { padding: 2.5rem 1.5rem; } }
.login-card {
  width: 100%;
  max-width: 400px;
}
.login-card .login-head { margin-bottom: 2rem; }
.login-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: .6rem;
}
.login-card h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.05;
}
.login-card .login-welcome {
  color: var(--ink-500);
  font-size: 0.95rem;
  margin: .5rem 0 0;
}
.login-field { margin-bottom: 1.1rem; }
.login-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: .45rem;
}
.login-field .input-wrap { position: relative; }
.login-field .input-wrap .ico {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
}
.login-field input {
  width: 100%;
  height: 50px;
  padding: 0 1rem 0 2.6rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: 0.98rem;
  font-family: var(--font-body);
  background: #fff;
  color: var(--ink-900);
  transition: border-color .15s, box-shadow .15s;
}
.login-field input:focus {
  outline: none;
  border-color: var(--tld-blue);
  box-shadow: 0 0 0 3px rgba(37,85,168,0.15);
}
.login-field .pw-toggle {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  color: var(--ink-400);
  padding: .4rem;
  display: grid; place-items: center;
}
.login-field .pw-toggle:hover { color: var(--tld-blue); }

.login-error {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fdeceb;
  border: 1px solid #f5c6c2;
  color: var(--err);
  border-radius: var(--r-md);
  padding: .75rem .9rem;
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}

.login-submit {
  width: 100%;
  height: 50px;
  background: var(--tld-blue);
  color: #fff;
  border: 0;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 1rem;
  font-family: var(--font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  transition: background .15s;
  margin-top: .35rem;
}
.login-submit:hover { background: var(--tld-blue-700); }
.login-submit .arrow { transition: transform .15s; }
.login-submit:hover .arrow { transform: translateX(2px); }

.login-links {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  text-align: center;
}
.login-links a {
  color: var(--tld-blue);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.login-links a:hover { color: var(--tld-blue-700); text-decoration: underline; }
.login-links .signin-row {
  font-size: 0.88rem;
  color: var(--ink-500);
}
.login-links .signin-row a { display: inline; font-weight: 600; }


/* ===== CONTACT FORM (department + message) ===== */

/* ------------------------------------------------------------
   CONTACT FORM
   ------------------------------------------------------------ */
.contact-form {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cf-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
}
@media (max-width: 900px) {
  .cf-grid { grid-template-columns: 1fr; }
}

.cf-side {
  background: var(--ink-50);
  padding: 1.5rem 1.25rem;
  border-right: 1px solid var(--ink-100);
}
.cf-side-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 0 .25rem;
  margin-bottom: .75rem;
}
.cf-dept-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.cf-dept {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem .9rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  width: 100%;
  font-family: var(--font-body);
}
.cf-dept:hover { background: #fff; border-color: var(--ink-100); }
.cf-dept.active {
  background: #fff;
  border-color: var(--tld-blue-300);
  box-shadow: var(--shadow-sm);
}
.cf-dept-ico {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--tld-blue-50);
  color: var(--tld-blue);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.cf-dept.active .cf-dept-ico {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.cf-dept-body { display: flex; flex-direction: column; flex: 1; line-height: 1.2; }
.cf-dept-name {
  font-weight: 600;
  color: var(--ink-900);
  font-size: 0.92rem;
}
.cf-dept-sub {
  font-size: 0.76rem;
  color: var(--ink-500);
  margin-top: 2px;
}
.cf-dept-mark { color: var(--ink-300); font-size: 1.05rem; }
.cf-dept.active .cf-dept-mark { color: var(--accent); }

.cf-main {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cf-row { display: flex; flex-direction: column; gap: .4rem; }
.cf-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) {
  .cf-row.two { grid-template-columns: 1fr; }
}
.cf-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: flex;
  justify-content: space-between;
}
.cf-label .muted { color: var(--ink-400); text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: .78rem; }
.cf-counter { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-400); letter-spacing: 0.06em; }

.cf-input {
  width: 100%;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: .75rem .9rem;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  color: var(--ink-900);
}
.cf-input:focus {
  outline: none;
  border-color: var(--tld-blue);
  box-shadow: 0 0 0 3px rgba(37,85,168,0.12);
}
textarea.cf-input {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.cf-attach {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border: 1px dashed var(--ink-300);
  border-radius: var(--r-md);
  color: var(--ink-600);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  width: fit-content;
}
.cf-attach:hover {
  border-color: var(--tld-blue);
  color: var(--tld-blue);
  background: var(--tld-blue-50);
}

.cf-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--ink-100);
  margin: .5rem -1.75rem -1.75rem;
  padding: 1.25rem 1.75rem;
  background: var(--ink-50);
  flex-wrap: wrap;
  gap: 1rem;
}
.cf-promise {
  font-size: 0.86rem;
  color: var(--ink-600);
}
.cf-promise strong { color: var(--ink-900); font-weight: 600; }

/* ============================================================
   Bootstrap 5 button token overrides — align btn-primary with
   TLD brand blue. Bootstrap pre-compiles button colours in Sass
   so --bs-primary alone is not enough; we must override the
   per-component custom properties (Bootstrap >= 5.2).
   ============================================================ */
.btn-primary {
  --bs-btn-bg:                  var(--tld-blue);
  --bs-btn-border-color:        var(--tld-blue);
  --bs-btn-hover-bg:            var(--tld-blue-700);
  --bs-btn-hover-border-color:  var(--tld-blue-700);
  --bs-btn-active-bg:           var(--tld-blue-800);
  --bs-btn-active-border-color: var(--tld-blue-800);
  --bs-btn-disabled-bg:         var(--tld-blue-300);
  --bs-btn-disabled-border-color: var(--tld-blue-300);
  --bs-btn-color:               #fff;
  --bs-btn-hover-color:         #fff;
  --bs-btn-active-color:        #fff;
}

/* Datatable row-action buttons use "btn-outline btn-primary" (two
   separate classes, not Bootstrap's combined btn-outline-primary).
   Render these as a proper outline variant of the TLD blue. */
.btn-outline.btn-primary {
  --bs-btn-bg:                  transparent;
  --bs-btn-color:               var(--tld-blue);
  --bs-btn-border-color:        var(--tld-blue);
  --bs-btn-hover-bg:            var(--tld-blue);
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-border-color:  var(--tld-blue);
  --bs-btn-active-bg:           var(--tld-blue-700);
  --bs-btn-active-color:        #fff;
  --bs-btn-active-border-color: var(--tld-blue-700);
}

/* btn-xs: compact size used on datatable row action buttons */
.btn-xs {
  --bs-btn-padding-y:     0.2rem;
  --bs-btn-padding-x:     0.5rem;
  --bs-btn-font-size:     0.75rem;
  --bs-btn-border-radius: var(--r-sm);
}

/* btn-outline-primary: override Bootstrap's Sass-compiled outline colour */
.btn-outline-primary {
  --bs-btn-color:               var(--tld-blue);
  --bs-btn-border-color:        var(--tld-blue);
  --bs-btn-hover-bg:            var(--tld-blue);
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-border-color:  var(--tld-blue);
  --bs-btn-active-bg:           var(--tld-blue-700);
  --bs-btn-active-color:        #fff;
  --bs-btn-active-border-color: var(--tld-blue-700);
  --bs-btn-disabled-color:      var(--tld-blue-300);
  --bs-btn-disabled-border-color: var(--tld-blue-300);
}

/* ============================================================
   Kreyu datatable bridge — maps the .dt-* design onto Kreyu's
   rendered Bootstrap markup without touching vendor code.
   Scoped to .dt-wrap so other Bootstrap tables are unaffected.
   ============================================================ */

/* Strip Bootstrap card chrome; .dt-wrap provides the shell */
.dt-wrap .card           { border: none; box-shadow: none; border-radius: 0; background: transparent; }
.dt-wrap .card-header    { background: #fff; border-bottom: 1px solid var(--ink-100); padding: .85rem 1.25rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.dt-wrap .card-header h5 { font-size: .82rem; font-weight: 600; color: var(--ink-700); margin: 0; letter-spacing: .01em; }
.dt-wrap .card-body      { padding: 0; background: #fff; }

/* Table */
.dt-wrap table.table { border-collapse: collapse; font-size: .9rem; width: 100%; margin-bottom: 0; }
.dt-wrap table.table thead th {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500);
  background: var(--ink-50); border-bottom: 1px solid var(--ink-200);
  border-top: none; padding: .8rem 1rem; white-space: nowrap;
}
.dt-wrap table.table tbody td {
  padding: .8rem 1rem; border-bottom: 1px solid var(--ink-100);
  color: var(--ink-800); vertical-align: middle; border-top: none; background: #fff;
}
.dt-wrap table.table tbody tr { transition: background .12s; }
.dt-wrap table.table tbody tr:hover td { background: var(--tld-blue-50) !important; }
.dt-wrap table.table tbody tr:last-child td { border-bottom: 0; }

/* Column header sort links */
.dt-wrap table.table thead th a { color: var(--ink-500); text-decoration: none; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.dt-wrap table.table thead th a:hover { color: var(--tld-blue); }
.dt-wrap table.table thead th.active a { color: var(--ink-900); }

/* Row-action view button: fills when its row is hovered */
.dt-wrap table.table tbody tr:hover a.btn-outline.btn-primary {
  background-color: var(--tld-blue) !important;
  border-color:     var(--tld-blue) !important;
  color:            #fff !important;
}

/* Pagination footer */
.dt-wrap .pagination {
  padding: .85rem 1.25rem; background: #fff;
  border-top: 1px solid var(--ink-100);
  font-size: .84rem; color: var(--ink-600);
  align-items: center; flex-wrap: wrap;
}

/* dt-pages: flex row wrapping the .dt-page buttons */
.dt-wrap .pagination .dt-pages { display: flex; gap: 3px; }

/* .dt-page.disabled (span elements for non-clickable ends) */
.dt-page.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* Per-page select */
.dt-wrap .pagination .form-select,
.dt-wrap .pagination select {
  border: 1px solid var(--ink-200); border-radius: var(--r-sm);
  font-size: .84rem; padding: .2rem 1.5rem .2rem .5rem; background: #fff;
}

/* Filter/search inputs: grey background per mockup spec */
.dt-wrap .collapse .form-control,
.dt-wrap .collapse .form-control-sm,
.dt-wrap .collapse .form-select,
.dt-wrap .card-header .form-control,
.dt-wrap .card-header .form-control-sm {
  background-color: var(--ink-50);
  border-color: var(--ink-200);
}
.dt-wrap .collapse .form-control:focus,
.dt-wrap .collapse .form-control-sm:focus,
.dt-wrap .card-header .form-control-sm:focus {
  background-color: #fff;
  border-color: var(--tld-blue);
  box-shadow: 0 0 0 3px rgba(37,85,168,.1);
}

/* Font baseline: ensure all td content inherits the same base */
.dt-wrap table.table tbody td,
.dt-wrap table.table tbody td span:not([class]) {
  font-size: .9rem;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-800);
}

/* ============================================================
   Datatable toolbar search box
   ============================================================ */
.dt-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
}
.dt-search-ico {
  position: absolute;
  left: .75rem;
  color: var(--ink-400);
  pointer-events: none;
  flex-shrink: 0;
}
.dt-search-input {
  width: 100%;
  height: 38px;
  padding: 0 5rem 0 2.2rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  font-size: .88rem;
  font-family: var(--font-body);
  background: var(--ink-50);
  color: var(--ink-900);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.dt-search-input:focus {
  border-color: var(--tld-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,85,168,.1);
}
.dt-search-btn {
  position: absolute;
  right: 0;
  height: 38px;
  padding: 0 .85rem;
  background: var(--tld-blue);
  border: none;
  border-left: none;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: #fff;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.dt-search-btn:hover { background: var(--tld-blue-700); }

.dt-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 38px;
  padding: 0 .85rem;
  background: var(--tld-blue);
  border: none;
  border-radius: var(--r-md);
  color: #fff;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
  white-space: nowrap;
}
.dt-filter-toggle:hover,
.dt-filter-toggle:focus { background: var(--tld-blue-700); color: #fff; text-decoration: none; }

/* ============================================================
   Datatable filter panel (collapsible below toolbar)
   ============================================================ */
.dt-filter-panel {
  background: #fff;
  border-bottom: 1px solid var(--ink-100);
  padding: 1rem 1.25rem;
}
.dt-filter-panel .row { margin: 0 -.5rem; }
.dt-filter-panel .col-12,
.dt-filter-panel [class*="col-"] { padding: 0 .5rem; }

/* Filter field labels */
.dt-filter-panel label,
.dt-filter-panel .col-form-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .3rem;
}

/* Filter inputs: grey on white panel */
.dt-filter-panel .form-control,
.dt-filter-panel .form-control-sm,
.dt-filter-panel .form-select {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  font-size: .85rem;
  color: var(--ink-900);
  height: 36px;
  padding: .3rem .65rem;
}
.dt-filter-panel .form-control:focus,
.dt-filter-panel .form-control-sm:focus,
.dt-filter-panel .form-select:focus {
  border-color: var(--tld-blue);
  box-shadow: 0 0 0 2px rgba(37,85,168,.1);
  outline: none;
}

/* ============================================================
   Datatable loading — progress bar + skeleton rows
   ============================================================ */

/* Progress bar: sweeps left→right at top of card-body */
.dt-progress-bar {
  height: 3px;
  overflow: hidden;
  position: relative;
  background: var(--ink-100);
}
.dt-progress-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 35%;
  left: -35%;
  background: var(--tld-blue);
  animation: dt-progress-sweep 1.1s ease-in-out infinite;
}
@keyframes dt-progress-sweep {
  0%   { left: -35%; }
  100% { left: 110%; }
}

/* Skeleton rows: hide real content, overlay shimmer bars */
.dt-wrap turbo-frame[aria-busy] table.table tbody tr td {
  position: relative;
  color: transparent !important;
}
.dt-wrap turbo-frame[aria-busy] table.table tbody tr td > * {
  visibility: hidden;
}
.dt-wrap turbo-frame[aria-busy] table.table tbody tr td::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 1rem; right: 1.5rem;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-50) 50%, var(--ink-100) 75%);
  background-size: 400% 100%;
  animation: dt-skeleton-shimmer 1.4s ease-in-out infinite;
}
/* Vary widths per column so bars look like real content */
.dt-wrap turbo-frame[aria-busy] table.table tbody tr td:nth-child(2)::after { right: 3.5rem; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr td:nth-child(3)::after { right: 2rem; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr td:nth-child(4)::after { right: 4rem; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr td:nth-child(5)::after { right: 2.5rem; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr td:nth-child(6)::after { right: 5rem; }
/* Stagger shimmer per row for a wave effect */
.dt-wrap turbo-frame[aria-busy] table.table tbody tr:nth-child(2) td::after { animation-delay: .07s; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr:nth-child(3) td::after { animation-delay: .14s; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr:nth-child(4) td::after { animation-delay: .21s; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr:nth-child(5) td::after { animation-delay: .28s; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr:nth-child(6) td::after { animation-delay: .35s; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr:nth-child(7) td::after { animation-delay: .42s; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr:nth-child(8) td::after { animation-delay: .49s; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr:nth-child(9) td::after { animation-delay: .56s; }
.dt-wrap turbo-frame[aria-busy] table.table tbody tr:nth-child(10) td::after { animation-delay: .63s; }
@keyframes dt-skeleton-shimmer {
  0%   { background-position:  150% 0; }
  100% { background-position: -150% 0; }
}

/* Active filters bar */
.dt-active-filters {
  padding: .6rem 1.25rem;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-100);
  font-size: .84rem;
}

/* Active filter chips */
.dt-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  padding: .22rem .35rem .22rem .65rem;
  font-size: .8rem;
  color: var(--ink-900);
  white-space: nowrap;
}
.dt-fc-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-500);
}
.dt-fc-sep { color: var(--ink-300); }
.dt-fc-value { font-weight: 500; color: var(--ink-900); }
.dt-fc-clear {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink-100);
  color: var(--ink-500);
  text-decoration: none;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.dt-fc-clear:hover { background: var(--ink-800); color: #fff; }

/* Clear-all button */
.dt-clear-all {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  padding: .22rem .75rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s;
}
.dt-clear-all:hover { border-color: var(--ink-400); color: var(--ink-900); background: var(--ink-50); }

/* ============================================================
   Equipment detail — classic tables restyled to match datatable
   Scoped to .et-tables so other pages are unaffected.
   ============================================================ */
.et-tables .card {
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 0 !important;
}
.et-tables .card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--ink-100) !important;
  border-top: none;
  padding: .75rem 1rem !important;
}
.et-tables .card-header h3 {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-500) !important;
  margin: 0;
}
.et-tables .card-header { display: none !important; }
.et-tables .card-body { padding: 0 !important; background: #fff; }

.et-tables .table {
  border-collapse: collapse;
  font-size: .88rem;
  font-family: var(--font-body);
  margin-bottom: 0 !important;
  width: 100%;
  /* Bootstrap 5 CSS-variable overrides: kill striped, set hover colour */
  --bs-table-bg: #fff;
  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: inherit;
  --bs-table-accent-bg: transparent;
}
.et-tables .table thead th {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-500) !important;
  background-color: var(--ink-50) !important;
  border-bottom: 1px solid var(--ink-200) !important;
  border-top: none !important;
  padding: .65rem 1rem;
  white-space: nowrap;
  box-shadow: none !important;
}
.et-tables .table tbody td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--ink-100) !important;
  border-top: none !important;
  color: var(--ink-800);
  vertical-align: middle;
  background-color: #fff;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 400;
  box-shadow: none !important;
}
.et-tables .table tbody tr:last-child td { border-bottom: 0 !important; }
/* Hover: override Bootstrap's box-shadow accent mechanism */
.et-tables .table tbody tr:hover > td {
  --bs-table-accent-bg: var(--tld-blue-50);
  background-color: var(--tld-blue-50) !important;
  box-shadow: none !important;
}
/* Neutralise striped box-shadow on odd rows */
.et-tables .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  box-shadow: none !important;
  background-color: #fff !important;
}

/* Options description expand/collapse */
.et-expand-wrap { display: flex; flex-direction: column; gap: .4rem; }
.et-expand-body {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--ink-800);
  white-space: pre-line;
}
.et-expand-body.is-expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.et-expand-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tld-blue);
  text-align: left;
  font-family: var(--font-body);
}
.et-expand-btn:hover { color: var(--tld-blue-700); }

.error-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo-white {
  filter: brightness(0) invert(1);
}