/* ═══════════════════════════════════════════
   TrussPoint Equity Partners
   Navy / Blue color scheme
═══════════════════════════════════════════ */
:root {
  --tp-navy: #1b2a4a;
  --tp-navy-deep: #111d35;
  --tp-navy-mid: #1e3155;
  --tp-blue: #3a7bd5;
  --tp-blue-light: #5a9cf5;
  --tp-blue-muted: rgba(58,123,213,0.12);
  --tp-text: #2d3748;
  --tp-text-light: #5a6577;
  --tp-bg-light: #f5f6f8;
  --tp-white: #ffffff;
  --tp-border: rgba(27,42,74,0.08);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--tp-text);
  background: var(--tp-white);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; transition: color 0.3s; }

/* ─── UTILITY ─── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
[id] { scroll-margin-top: 90px; }

/* ─── TOPBAR ─── */
.topbar {
  background: var(--tp-navy-deep);
  padding: 7px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.3px;
}
.topbar .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}
.topbar a {
  color: rgba(255,255,255,0.7);
}
.topbar a:hover { color: var(--tp-blue-light); }

/* ─── NAVIGATION ─── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--tp-white);
  border-bottom: 1px solid var(--tp-border);
  transition: box-shadow 0.3s;
}
.site-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.1); }
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}
.site-logo img {
  height: 38px;
  width: auto;
}
.main-nav {
  display: flex;
  list-style: none;
  gap: 2px;
}
.main-nav a {
  color: var(--tp-text);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--tp-navy);
  background: rgba(58,123,213,0.08);
}
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--tp-navy);
  margin: 5px 0;
  transition: 0.3s;
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 14px 30px;
  border-radius: 4px;
  transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--tp-blue);
  color: var(--tp-white);
}
.btn-primary:hover {
  background: var(--tp-blue-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(58,123,213,0.3);
}
.btn-outline {
  background: transparent;
  color: var(--tp-blue-light);
  border: 1.5px solid rgba(90,156,245,0.4);
}
.btn-outline:hover {
  background: var(--tp-blue);
  color: var(--tp-white);
  border-color: var(--tp-blue);
}

/* ─── SECTION COMMONS ─── */
.tp-section { padding: 96px 0; }
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--tp-blue);
  margin-bottom: 14px;
}
.section-tag::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--tp-blue);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  color: var(--tp-navy);
  line-height: 1.25;
  margin-bottom: 18px;
}
.section-subtitle {
  font-size: 16.5px;
  color: var(--tp-text-light);
  max-width: 620px;
  line-height: 1.8;
}

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  background: linear-gradient(145deg, var(--tp-navy-deep) 0%, var(--tp-navy) 50%, var(--tp-navy-mid) 100%);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 25%, rgba(58,123,213,0.1) 0%, transparent 55%),
    radial-gradient(ellipse at 25% 75%, rgba(58,123,213,0.05) 0%, transparent 50%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(58,123,213,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,123,213,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 80px 0;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--tp-blue-light);
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.2s forwards;
}
.hero-tag::before {
  content: '';
  width: 36px;
  height: 1.5px;
  background: var(--tp-blue);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 54px);
  font-weight: 500;
  color: var(--tp-white);
  line-height: 1.2;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.4s forwards;
}
.hero h1 em {
  font-style: italic;
  color: var(--tp-blue-light);
}
.hero p {
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 560px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.6s forwards;
}
.hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.8s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── ABOUT ─── */
.about-section { background: var(--tp-bg-light); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.about-content .lead {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  font-style: italic;
  color: var(--tp-navy);
  line-height: 1.6;
  margin-bottom: 24px;
  padding-left: 24px;
  border-left: 3px solid var(--tp-blue);
}
.about-content p {
  color: var(--tp-text-light);
  margin-bottom: 14px;
  font-size: 15.5px;
}
.truss-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.truss-visual svg { width: 100%; max-width: 400px; }

/* ─── VALUES ─── */
.values-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.value-card {
  background: var(--tp-white);
  border: 1px solid var(--tp-border);
  border-radius: 8px;
  padding: 30px 22px;
  text-align: center;
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
}
.value-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tp-blue);
  transform: scaleX(0);
  transition: transform 0.4s;
}
.value-card:hover::before { transform: scaleX(1); }
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(27,42,74,0.08);
}
.value-num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--tp-blue);
  opacity: 0.25;
  margin-bottom: 10px;
}
.value-card h4 {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tp-navy);
  margin-bottom: 8px;
}
.value-card p {
  font-size: 13.5px;
  color: var(--tp-text-light);
  line-height: 1.6;
}

/* ─── CRITERIA ─── */
.criteria-section {
  background: var(--tp-navy);
  color: var(--tp-white);
  position: relative;
  overflow: hidden;
}
.criteria-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 90% 10%, rgba(58,123,213,0.08) 0%, transparent 55%);
}
.criteria-section .section-tag { color: var(--tp-blue-light); }
.criteria-section .section-tag::before { background: var(--tp-blue-light); }
.criteria-section .section-title { color: var(--tp-white); }
.criteria-section .section-subtitle { color: rgba(255,255,255,0.55); }

.criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 52px;
  position: relative;
  z-index: 1;
}
.criteria-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(58,123,213,0.12);
  border-radius: 8px;
  padding: 32px 26px;
  transition: all 0.4s;
}
.criteria-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(58,123,213,0.3);
  transform: translateY(-3px);
}
.criteria-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--tp-blue-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 19px;
}
.criteria-card h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--tp-white);
  margin-bottom: 10px;
}
.criteria-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}
.criteria-card ul { list-style: none; margin-top: 10px; }
.criteria-card li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.55);
}
.criteria-card li::before {
  content: '\203A';
  position: absolute;
  left: 0;
  color: var(--tp-blue-light);
  font-weight: bold;
}

/* ─── PORTFOLIO ─── */
.portfolio-section { background: var(--tp-bg-light); }
.portfolio-intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
}
.portfolio-intro .section-tag { justify-content: center; }
.portfolio-intro .section-subtitle { margin: 0 auto; }

.portfolio-company { margin-bottom: 56px; }
.portfolio-company:last-child { margin-bottom: 0; }

.portfolio-parent {
  background: var(--tp-white);
  border-radius: 12px;
  border: 1px solid var(--tp-border);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(27,42,74,0.04);
}
.parent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 40px;
  background: linear-gradient(135deg, var(--tp-navy) 0%, #1a3a6a 50%, var(--tp-navy-mid) 100%);
  cursor: pointer;
  transition: background 0.3s;
  gap: 20px;
  min-height: 120px;
}
.parent-header:hover {
  background: linear-gradient(135deg, var(--tp-navy-mid) 0%, #1a3a6a 50%, var(--tp-navy) 100%);
}
.parent-header-logo {
  height: 48px;
  margin-bottom: 10px;
}
.parent-header-logo img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}
.jdi-logo-text {
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #2196F3 0%, #64B5F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.parent-info h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--tp-white);
  margin-bottom: 3px;
}
.parent-info p {
  color: rgba(255,255,255,0.5);
  font-size: 13.5px;
}
.parent-meta {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-shrink: 0;
}
.meta-item { text-align: right; }
.meta-item label {
  display: block;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tp-blue-light);
  margin-bottom: 2px;
}
.meta-item span {
  font-size: 13.5px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}
.parent-toggle {
  color: var(--tp-blue-light);
  font-size: 22px;
  margin-left: 16px;
  transition: transform 0.3s;
}
.parent-toggle.open { transform: rotate(180deg); }

.subsidiaries { padding: 28px 36px 36px; }
.subsidiaries h4 {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tp-text-light);
  margin-bottom: 22px;
  font-weight: 600;
}
.sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 18px;
}
.sub-card {
  border: 1px solid var(--tp-border);
  border-radius: 8px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.3s;
  background: var(--tp-bg-light);
  color: inherit;
}
.sub-card:hover {
  border-color: var(--tp-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(27,42,74,0.07);
}
.sub-logo {
  height: 48px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}
.sub-logo img {
  max-height: 48px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
}
.sub-logo img.dark-bg-logo {
  background: #111;
  border-radius: 6px;
  padding: 6px 12px;
}
.sub-industry {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--tp-blue);
  margin-bottom: 8px;
}
.sub-desc {
  font-size: 13.5px;
  color: var(--tp-text-light);
  line-height: 1.6;
  margin-bottom: 12px;
  flex: 1;
}
.sub-location {
  font-size: 12.5px;
  color: rgba(90,101,119,0.7);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ─── TEAM ─── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 52px;
}
.team-card {
  background: var(--tp-white);
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.4s;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(27,42,74,0.08);
}
.team-photo {
  height: 300px;
  background: linear-gradient(135deg, var(--tp-navy) 0%, var(--tp-navy-mid) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.team-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(58,123,213,0.12), transparent 70%);
  z-index: 1;
  pointer-events: none;
}
.team-initials {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  color: rgba(255,255,255,0.12);
  z-index: 1;
}
.team-body { padding: 26px; }
.team-body h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--tp-navy);
  margin-bottom: 3px;
}
.team-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--tp-blue);
  margin-bottom: 12px;
}
.team-body p {
  font-size: 13.5px;
  color: var(--tp-text-light);
  line-height: 1.7;
}
.team-links {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.team-links a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--tp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--tp-navy);
}
.team-links a:hover {
  background: var(--tp-blue);
  border-color: var(--tp-blue);
  color: var(--tp-white);
}

/* ─── CONTACT ─── */
.contact-section { background-image: linear-gradient(145deg, rgba(30,51,88,0.50), rgba(36,61,102,0.45)), url('images/contact-bg.jpg'); background-size: cover; background-position: center;
  background: var(--tp-navy);
  position: relative;
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 5% 95%, rgba(58,123,213,0.08) 0%, transparent 55%);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  position: relative;
  z-index: 1;
}
.contact-info .section-title { color: var(--tp-white); }
.contact-info .section-tag { color: var(--tp-blue-light); }
.contact-info .section-tag::before { background: var(--tp-blue-light); }
.contact-info p {
  color: rgba(255,255,255,0.55);
  font-size: 15.5px;
  margin-bottom: 32px;
}
.contact-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.contact-detail-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--tp-blue-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.contact-detail span { color: rgba(255,255,255,0.75); font-size: 14.5px; }
.contact-detail a { color: var(--tp-blue-light); }
.contact-detail a:hover { text-decoration: underline; }

.contact-form-wrap {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(58,123,213,0.12);
  border-radius: 12px;
  padding: 36px;
}
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tp-blue-light);
  margin-bottom: 7px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(58,123,213,0.15);
  border-radius: 5px;
  color: var(--tp-white);
  font-family: var(--font-body);
  font-size: 14.5px;
  transition: border-color 0.3s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.25); }
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--tp-blue);
}
.form-group textarea { height: 110px; resize: vertical; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ─── FOOTER ─── */
.site-footer {
  background: var(--tp-navy-deep);
  padding: 44px 0 22px;
  border-top: 1px solid rgba(58,123,213,0.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.footer-brand .site-logo img { height: 180px; }
.footer-brand p {
  color: rgba(255,255,255,0.75);
  font-size: 13.5px;
  line-height: 1.7;
  margin-top: 12px;
}
.footer-col h5 {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tp-blue-light);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,0.45);
  font-size: 13.5px;
  margin-bottom: 7px;
}
.footer-col a:hover { color: var(--tp-blue-light); }
.footer-bottom {
  background: rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 16px 0;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom p {
  color: rgba(255,255,255,0.75);
  font-size: 12.5px;
}

/* ─── SCROLL REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .criteria-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .hamburger { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 80px;
    left: 0; right: 0;
    background: var(--tp-white);
    flex-direction: column;
    padding: 16px 24px;
    border-top: 1px solid var(--tp-border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .main-nav.open { display: flex; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .truss-visual { display: none; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .criteria-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .parent-header { flex-direction: column; align-items: flex-start; padding: 24px; }
  .parent-meta { align-self: stretch; flex-wrap: wrap; }
  .meta-item { text-align: left; }
  .subsidiaries { padding: 20px 24px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}

/* ─── NEWS SECTION ─── */
.news-section { background: var(--tp-white); }
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
  margin-top: 48px;
}
.news-card {
  background: var(--tp-bg-light);
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  padding: 32px;
  transition: all 0.4s;
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(27,42,74,0.07);
  border-color: var(--tp-blue);
}
.news-date {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tp-blue);
  margin-bottom: 12px;
}
.news-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--tp-navy);
  margin-bottom: 12px;
  line-height: 1.4;
}
.news-card p {
  font-size: 14px;
  color: var(--tp-text-light);
  line-height: 1.7;
  margin-bottom: 16px;
}
.news-link {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tp-blue);
}
.news-link:hover { color: var(--tp-navy); }

/* ─── LIGHTER OVERRIDES ─── */
/* Item 11: Lighter overall colouring */
.hero {
  background: linear-gradient(145deg, #1e3358 0%, #243d66 50%, #2a4874 100%) !important;
}
.criteria-section {
  background: linear-gradient(135deg, #1e3358 0%, #243d66 100%) !important;
}

/* Item 10: Contact section - lighter form, visible icons */
.contact-section { background-image: linear-gradient(145deg, rgba(30,51,88,0.50), rgba(36,61,102,0.45)), url('images/contact-bg.jpg'); background-size: cover; background-position: center;
  
}
.contact-form-wrap {
  background: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(26,41,66,0.15) !important;
}
.contact-detail-icon {
  background: rgba(90,156,245,0.15) !important;
  border: 1px solid rgba(90,156,245,0.2);
}
.form-group input,
.form-group textarea {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Item 4: SVG icons for criteria cards */
.criteria-icon {
  color: var(--tp-blue-light);
}
.criteria-icon svg {
  width: 22px;
  height: 22px;
}

/* Remove dark-bg-logo class since SparkleTeam now has transparent bg */
.sub-logo img.dark-bg-logo {
  background: transparent !important;
  border-radius: 0;
  padding: 0;
}

/* Portfolio headers - lighter gradient */
.parent-header {
  background: linear-gradient(135deg, #1e3358 0%, #2a4874 50%, #2f5080 100%) !important;
}
.parent-header:hover {
  background: linear-gradient(135deg, #2a4874 0%, #2f5080 50%, #1e3358 100%) !important;
}

@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; }
}


/* === LOGO SIZE FIXES === */
.sub-logo {
  height: 80px !important;
  margin-bottom: 18px !important;
}
.sub-logo img {
  max-height: 80px !important;
  max-width: 300px !important;
}
.jdi-lp-header-logo {
  display: inline-block;
  margin-bottom: 14px;
  border-radius: 10px;
  overflow: hidden;
}
.jdi-lp-header-logo img {
  height: 110px;
  width: auto;
  display: block;
}
.parent-header-logo img {
  max-height: 64px !important;
}

/* Portfolio imagery */
.portfolio-imagery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.portfolio-imagery img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 4px;
}
@media (max-width: 768px) {
  .portfolio-imagery { grid-template-columns: 1fr 1fr; }
}


/* Overrides */
.sub-logo { height:80px !important; margin-bottom:18px !important; }
.sub-logo img { max-height:60px !important; max-width:160px !important; width:auto; object-fit:contain; }
.jdi-lp-header-logo { display:inline-block; margin-bottom:14px; background:white; border-radius:10px; padding:8px 16px; }
.jdi-lp-header-logo img { height:100px; width:auto; display:block; }
.parent-header-logo img { max-height:64px !important; border-radius:10px; }
.portfolio-imagery { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }
.portfolio-imagery img { width:100%; height:200px; object-fit:cover; border-radius:14px; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9999; align-items:center; justify-content:center; padding:24px; }
.modal-overlay.active { display:flex; }
.modal-content { background:white; border-radius:12px; max-width:700px; width:100%; max-height:85vh; overflow-y:auto; padding:40px; position:relative; }
.modal-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:28px; cursor:pointer; color:#5a6577; }
.modal-close:hover { color:#1b2a4a; }
.modal-content h3 { font-family:'Playfair Display',serif; font-size:24px; color:#1b2a4a; margin-bottom:4px; }
.modal-content .team-role { margin-bottom:16px; }
.modal-content p { color:#5a6577; font-size:15px; line-height:1.8; margin-bottom:12px; }
.modal-content h4 { font-family:'Playfair Display',serif; font-size:16px; color:#1b2a4a; margin:18px 0 8px; }
.modal-content ul { list-style:none; padding:0; }
.modal-content li { padding-left:16px; margin-bottom:5px; font-size:14px; color:#5a6577; position:relative; }
.modal-content li::before { content:'\203A'; position:absolute; left:0; color:#3a7bd5; font-weight:bold; }
.team-card { cursor:pointer; }

/* Hero with truss background */
.hero { background: linear-gradient(145deg, rgba(17,29,53,0.82) 0%, rgba(22,37,66,0.80) 50%, rgba(27,42,74,0.82) 100%), url('../images/hero-bg.jpg') center/cover !important; }

/* Why section with truss accent */
.about-section { position:relative; }
.truss-accent { position:absolute; right:0; top:0; bottom:0; width:40%; opacity:0.06; background: url('images/truss-accent.jpg') center/cover; pointer-events:none; }

/* Value creation image strip */
.value-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:48px; border-radius:12px; overflow:hidden; }
.value-strip img { width:100%; height:140px; object-fit:cover; border-radius:8px; }

/* Footer logo bigger */
.footer-brand .site-logo img { height:180px !important; }

@media (max-width:768px) {
  .hamburger { display:block !important; }
  .main-nav { display:none; }
  .main-nav.open { display:flex !important; position:absolute; top:80px; left:0; right:0; background:white; flex-direction:column; padding:16px 24px; border-top:1px solid rgba(27,42,74,0.08); box-shadow:0 8px 24px rgba(0,0,0,0.08); z-index:999; }
  .main-nav.open a { padding:12px 0; border-bottom:1px solid rgba(27,42,74,0.05); }
  .hero h1 { font-size:28px !important; }
  .about-grid { grid-template-columns:1fr !important; }
  .truss-visual,.truss-accent { display:none !important; }
  .values-grid { grid-template-columns:1fr !important; }
  .criteria-grid { grid-template-columns:1fr !important; }
  .team-grid { grid-template-columns:1fr !important; }
  .contact-grid { grid-template-columns:1fr !important; gap:32px !important; }
  .parent-header { flex-direction:column !important; align-items:flex-start !important; padding:24px !important; }
  .parent-meta { flex-wrap:wrap; gap:16px !important; }
  .meta-item { text-align:left !important; }
  .form-row { grid-template-columns:1fr !important; }
  .footer-grid { grid-template-columns:1fr !important; gap:24px !important; }
  .footer-bottom { flex-direction:column; gap:8px; text-align:center; }
  .news-grid { grid-template-columns:1fr !important; }
  .portfolio-imagery { grid-template-columns:1fr !important; }
  .portfolio-imagery img { height:200px; }
  .sub-grid { grid-template-columns:1fr !important; }
  .modal-content { padding:24px; margin:12px; }
  .section-title { font-size:26px !important; }
  .site-logo img { height:30px !important; }
  .jdi-lp-header-logo img { height:70px !important; }
  .value-strip { grid-template-columns:1fr 1fr; }
  [style*='grid-template-columns:repeat(6'] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*='grid-template-columns:1fr 1fr;gap:8px 20px'] { grid-template-columns: 1fr !important; }
}


/* ── Core Values Flip Cards ── */
.values-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
}
/* Compact cards for single-row layout */
.value-card-wrapper { min-height: 280px; }
.value-card-inner   { min-height: 280px; }
@media (max-width: 1100px) {
  .values-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 680px) {
  .values-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

.value-card-wrapper {
  perspective: 1000px;
  cursor: pointer;
  min-height: 320px;
}

.value-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.value-card-wrapper.flipped .value-card-inner {
  transform: rotateY(180deg);
}

.value-card-front,
.value-card-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
}

.value-card-front {
  background: linear-gradient(145deg, #1e3358 0%, #2a4874 100%);
  border: 1px solid rgba(58, 123, 213, 0.2);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.value-card-front .value-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 300;
  color: rgba(58, 123, 213, 0.35);
  line-height: 1;
  margin-bottom: 12px;
}

.value-card-front h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 14px 0;
}

.value-card-front p {
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 16px 0;
}

.value-card-front .flip-hint {
  margin-top: auto;
  font-size: 12px;
  color: rgba(58, 123, 213, 0.6);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.value-card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 0;
}

.value-card-back .back-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(0.8);
}

.value-card-back .back-overlay {
  position: relative;
  z-index: 2;
  padding: 28px;
  width: 100%;
  background: linear-gradient(transparent, rgba(10, 20, 40, 0.92) 40%);
}

.value-card-back h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px 0;
}

.value-card-back .back-quote {
  color: rgba(255,255,255,0.75);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.value-card-back .flip-back-hint {
  font-size: 11px;
  color: rgba(58, 123, 213, 0.7);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

@media (max-width: 768px) {
  .value-card-wrapper { min-height: 280px; }
  .value-card-inner { min-height: 280px; }
}


/* ── DDL header logo – same size as JDI ── */
.ddl-header-logo {
  display: inline-block;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 10px;
  padding: 4px 8px;
}
.ddl-header-logo img {
  height: 110px !important;
  width: auto !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* ── Portfolio imagery – uniform rounded corners on all 3 images ── */
.portfolio-imagery {
  overflow: visible !important;
  border-radius: 0 !important;
}
.portfolio-imagery img {
  height: 200px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}

/* ── Truss visual cells in 2×2 grid ── */
.truss-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.truss-visual img {
  width: 100%;
  max-width: 500px;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(27,42,74,0.12);
}

/* ── DDL portfolio: force middle image to fill its rounded box ── */
.portfolio-company:last-child .portfolio-imagery {
  overflow: hidden;
}
.portfolio-company:last-child .portfolio-imagery img {
  height: 200px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
}

/* ── Core values: compact front face so all 5 fit in a single row ── */
.value-card-wrapper,
.value-card-inner   { min-height: 420px !important; }
.value-card-front {
  justify-content: flex-start !important;
  padding: 28px 22px !important;
}
.value-card-front .value-num {
  font-size: 44px !important;
  margin-bottom: 8px !important;
  color: #5a9cf5 !important;
  opacity: 1 !important;
}
.value-card-front h4 {
  font-size: 24px !important;
  line-height: 1.15 !important;
  margin-bottom: 12px !important;
}
.value-card-front p {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 10px 0 !important;
  color: rgba(255,255,255,0.75) !important;
}
.value-card-front .flip-hint {
  margin-top: auto !important;
  font-size: 11.5px !important;
}

/* ── DDL portfolio imagery: equal-height cells, all images fill box ── */
.portfolio-company:last-child .portfolio-imagery {
  align-items: stretch !important;
  overflow: hidden !important;
}
.portfolio-company:last-child .portfolio-imagery img {
  width: 100% !important;
  height: 100% !important;
  min-height: 200px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 14px !important;
  display: block !important;
}

/* ── Team card bio hint ── */
.team-bio-hint {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--tp-blue);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s;
}
.team-card:hover .team-bio-hint {
  gap: 9px;
  color: var(--tp-navy);
}
/* Reinforce pointer cursor */
.team-card { cursor: pointer; }


/* ═══════════════════════════════════════════════════════════════
   WordPress Theme Additions
   (footer, nav fallback classes, WP alignment helpers, CF7 styling)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Site Footer ─── */
.site-footer {
  background: var(--tp-navy-deep);
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: #ffffff;
  padding: 16px 24px;
  border-radius: 4px;
  margin-top: 12px;
}
.footer-copy p {
  color: #1b2a4a;
  font-size: 13px;
  margin: 0;
}
.footer-links {
  display: flex;
  gap: 20px;
}
.footer-links a {
  color: #1b2a4a;
  font-size: 13px;
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--tp-blue); }
.footer-logo {
  color: #1b2a4a;
}

/* ─── WordPress nav menu override ─── */
.main-nav.menu { list-style: none; }
.main-nav li { display: inline-block; }
.main-nav li a {
  color: var(--tp-text);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  display: block;
}
.main-nav li a:hover,
.main-nav li.current-menu-item > a {
  color: var(--tp-navy);
  background: rgba(58,123,213,0.08);
}

/* ─── Portfolio sub-link ─── */
.sub-link {
  font-size: 12px;
  color: var(--tp-blue);
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
}
.sub-link:hover { color: var(--tp-blue-light); }

/* ─── Contact Form 7 styling ─── */
.wpcf7 form { width: 100%; }
.wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 13px 18px;
  border: 1.5px solid rgba(27,42,74,0.12);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.07);
  transition: border-color 0.3s, background 0.3s;
  outline: none;
  margin-bottom: 4px;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
  border-color: var(--tp-blue);
  background: rgba(255,255,255,0.1);
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: rgba(255,255,255,0.3);
}
.wpcf7 textarea { resize: vertical; min-height: 130px; }
.wpcf7 input[type="submit"] {
  background: var(--tp-blue);
  color: var(--tp-white);
  border: none;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  margin-top: 8px;
}
.wpcf7 input[type="submit"]:hover {
  background: var(--tp-blue-light);
  transform: translateY(-2px);
}
.wpcf7-not-valid-tip { color: #ff6b6b; font-size: 13px; }
.wpcf7-response-output {
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  margin-top: 12px;
}
.wpcf7-mail-sent-ok {
  background: rgba(58,123,213,0.15);
  border-color: rgba(58,123,213,0.3) !important;
  color: var(--tp-blue-light);
}
.wpcf7-mail-sent-ng,
.wpcf7-aborted,
.wpcf7-validation-errors,
.wpcf7-spam-blocked {
  background: rgba(255,107,107,0.1);
  border-color: rgba(255,107,107,0.3) !important;
  color: #ff6b6b;
}

/* ─── WP alignment helpers ─── */
.wp-block-image.aligncenter { text-align: center; }
img.aligncenter { display: block; margin: 0 auto; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.alignright { float: right; margin: 0 0 1em 1em; }

/* ─── Screen reader text ─── */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ─── Mobile nav open state (WP menu) ─── */
@media (max-width: 768px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--tp-white);
    border-bottom: 1px solid var(--tp-border);
    padding: 12px 0;
    z-index: 999;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .main-nav.open,
  .main-nav li { display: block; }
  .main-nav li a { padding: 12px 24px; }
  .hamburger { display: block; }
}


/* Remove hero logo watermark */
.hero::after { display: none !important; }

/* ================================================
   Core Values - Logo Watermark
   ================================================ */
#values {
  position: relative;
  overflow: hidden;
}

/* === Values Section Watermarks === */
#values {
  position: relative;
  overflow: hidden;
}
#values::before,
#values::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 480px;
  height: 480px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTAwMDAiIGhlaWdodD0iNjAwNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHZlcnNpb249IjEuMSIgdmlld0JveD0iNS42MTE5OTk5ODg1NTU5MDggMjIuNzc2OTk4NTE5ODk3NDYgOTAuMDM2OTk0OTM0MDgyMDMgNTQuMTU2MDEzNDg4NzY5NTMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHN0eWxlPi5hRDZ6MW5Za2hjb2xvciB7ZmlsbDojMEM1RDdCO2ZpbGwtb3BhY2l0eToxO30uYUxnT2FWM3pSY29sb3JzLTAge2ZpbGw6IzBDNUQ3QjtmaWxsLW9wYWNpdHk6MTt9LmFxUDVOSWt2NHpjb2xvciB7ZmlsbDojNzVCREQ3O2ZpbGwtb3BhY2l0eToxO30uYVI5VGF2b1hZZmlsbENvbG9yIHtmaWxsOiMwQzVEN0I7ZmlsbC1vcGFjaXR5OjE7fS5hc3IxQnRJeGxmaWxsQ29sb3Ige2ZpbGw6IzBDNUQ3QjtmaWxsLW9wYWNpdHk6MTt9LnNoYXBlU3Ryb2tlLXN0ciB7c3Ryb2tlOiMyQzNDNUI7c3Ryb2tlLW9wYWNpdHk6MTt9PC9zdHlsZT48ZyBjbGFzcz0iYUxnT2FWM3pSY29sb3JzLTAiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgMCAwKSI+PHBhdGggZD0iTTQ5LjYzNCwyNy4wNThjLTAuMDI0LDAuMDAxLTAuMDQyLDAuMDE3LTAuMDY0LDAuMDI2Yy0wLjAyNiwwLjAxMi0wLjA1MywwLjAxNy0wLjA3MiwwLjAzOCAgYy0wLjAwMiwwLjAwMi0wLjAwNiwwLjAwMi0wLjAwOSwwLjAwNGwtMTguOTU0LDIyLjc1djBsLTAuODUsMWMwLDAuMDAxLDAsMC4wMDItMC4wMDEsMC4wMDJjMCwwLjAwMS0wLjAwMiwwLTAuMDAyLDAuMDAxICBsLTEuMjcxLDEuNTc2bC0xLjAwMSwxLjE1MWMwLDAuMDAxLDAsMC4wMDEtMC4wMDEsMC4wMDNjMCwwLTAuMDAxLDAtMC4wMDIsMGwtNy42MjQsOS4xNzRsLTEuMjc0LDEuNTE5YzAsMCwwLDAsMCwwLjAwMWgwICBMOS45MTEsNzQuNjMxYy0wLjAxNiwwLjAyLTAuMDEyLDAuMDQzLTAuMDIsMC4wNjRjLTAuMDA4LDAuMDIyLTAuMDI2LDAuMDM5LTAuMDI2LDAuMDY0YzAsMC4wMDMsMC4wMDMsMC4wMDUsMC4wMDQsMC4wMDkgIGMwLjAwMSwwLjAyNSwwLjAxOCwwLjA0NSwwLjAyOCwwLjA2OWMwLjAxMiwwLjAyMywwLjAxNiwwLjA0OSwwLjAzNiwwLjA2NmMwLjAwMiwwLjAwMiwwLjAwMSwwLjAwNiwwLjAwNCwwLjAwOSAgYzAuMDM3LDAuMDMxLDAuMDgzLDAuMDQ2LDAuMTI4LDAuMDQ2aDE2LjI1aDEuMjQ2aDEuOTc1aDE3LjQ5N2gyLjYxMmgxLjk3NGgyLjU4MmgxNy40OTZoMi4wMDRoMS4yNDZoMTYuMjUxICBjMC4wNDYsMCwwLjA5MS0wLjAxNSwwLjEyOC0wLjA0NmMwLjAwMy0wLjAwMywwLjAwMi0wLjAwNywwLjAwNC0wLjAwOWMwLjAyLTAuMDE4LDAuMDI0LTAuMDQzLDAuMDM2LTAuMDY2ICBjMC4wMTEtMC4wMjQsMC4wMjctMC4wNDQsMC4wMjgtMC4wNjljMC0wLjAwNCwwLjAwNC0wLjAwNiwwLjAwNC0wLjAwOWMwLTAuMDI1LTAuMDE4LTAuMDQyLTAuMDI2LTAuMDY0ICBjLTAuMDA4LTAuMDIxLTAuMDA1LTAuMDQ1LTAuMDIxLTAuMDY0bC04LjU5NS0xMC4zMjZsLTEuMzA4LTEuNThsMCwwbDAsMGwtNy41OTQtOS4xMTNjMCwwLTAuMDAyLDAtMC4wMDItMC4wMDEgIGMtMC4wMDEsMCwwLTAuMDAxLTAuMDAxLTAuMDAxbC0wLjk5OC0xLjE1Yy0wLjAwMSwwLTAuMDAxLTAuMDAxLTAuMDAxLTAuMDAxbC0xLjMwNi0xLjU3OWMwLDAtMC4wMDEsMC0wLjAwMSwwbC0wLjgxOC0xICBjMCwwLDAsMCwwLDBjLTAuMDAxLDAtMC4wMDEsMC0wLjAwMS0wLjAwMWwtMTguOTU0LTIyLjc1Yy0wLjAwMy0wLjAwMy0wLjAwNy0wLjAwMi0wLjAwOS0wLjAwNCAgYy0wLjAxOS0wLjAyMS0wLjA0Ni0wLjAyNi0wLjA3MS0wLjAzN2MtMC4wMjItMC4wMS0wLjA0MS0wLjAyNS0wLjA2NC0wLjAyN2MtMC4wMDQsMC0wLjAwNi0wLjAwNC0wLjAxLTAuMDA0aC0xLjk3NCAgQzQ5LjYzOSwyNy4wNTQsNDkuNjM3LDI3LjA1OCw0OS42MzQsMjcuMDU4eiBNMTAuNDkxLDc0LjU1OWw4LjE2MS05LjgwM2w3LjI2NSw5LjgwM0gxMC40OTF6IE0yNy4zNiw3NC41NTloLTAuOTQ1bC03LjQ5OS0xMC4xMTkgIGwxLjAxNS0xLjIwOWw3LjQyOSw5LjQ3MlY3NC41NTl6IE0yNy4zNiw3Mi4wNTVsLTcuMTY3LTkuMTM3bDcuMTY3LTguNjI1VjcyLjA1NXogTTI5LjMzNCw3NC41NTlIMjcuNzZ2LTEuOTI2VjUzLjgxNGwwLjgwMS0wLjkyMiAgbDAuNzczLDAuOTJWNzQuNTU5eiBNMjkuNzM1LDc0LjU1OVY1NC4yOTNsMTYuODcsMjAuMjY2SDI5LjczNXogTTQ3LjEyNSw3NC41NTlMMjkuNjg4LDUzLjYxMWMwLDAsMCwwLTAuMDAxLDBsMCwwbC0wLjg2NS0xLjAyOCAgbDEuMDE5LTEuMjYzbDAuNjk0LDAuODE2bDAsMGwxOC42OCwyMi40MjJINDcuMTI1eiBNNDkuNDQzLDc0LjIwN0wzMS4xMTcsNTIuMjA5aDE4LjMyNlY3NC4yMDd6IE00OS40NDMsNTEuODA5SDMwLjc4MkwzMC4xLDUxLjAwNiAgbDAuNjgyLTAuODAxaDE4LjY2MVY1MS44MDl6IE00OS40NDMsNDkuODA0SDMxLjExN2wxOC4zMjYtMjEuOTk4VjQ5LjgwNHogTTkwLjc3LDc0LjU1OUg3NS4zNDNsNy4yNjctOS44MDNMOTAuNzcsNzQuNTU5eiAgIE03My45LDU0LjI5M2w3LjEzOSw4LjU2Nkw3My45LDcyLjQ4M1Y1NC4yOTN6IE03My45LDczLjE1NGw3LjQwMS05Ljk3OWwxLjA0NSwxLjI2NGwtNy41MDIsMTAuMTE5SDczLjlWNzMuMTU0eiBNNzEuNDk2LDc0LjU1OSAgSDU0LjYyN2wxNi44NjktMjAuMjY2Vjc0LjU1OXogTTczLjUsNTMuODE0djE5LjI3NHYxLjQ3aC0xLjYwNFY1My44MTRsMC44MDEtMC45MjRMNzMuNSw1My44MTR6IE03Mi40MzYsNTIuNTgybC0wLjg5MSwxLjAyN3YwLjAwMSAgYy0wLjAwMSwwLjAwMS0wLjAwMiwwLjAwMS0wLjAwMywwLjAwMUw1NC4xMDUsNzQuNTU5aC0yLjA2MWwxOC42ODEtMjIuNDIyYzAuMDAxLDAsMC0wLjAwMSwwLjAwMS0wLjAwMWMwLTAuMDAxLDAtMC4wMDEsMC0wLjAwMSAgbDAuNjY2LTAuODEzTDcyLjQzNiw1Mi41ODJ6IE01MS44MTcsMjcuODA3bDE4LjMyNywyMS45OThINTEuODE3VjI3LjgwN3ogTTUxLjgxNyw1MC4yMDVoMTguNjZsMC42NTUsMC44MDFsLTAuNjU1LDAuODAzaC0xOC42NiAgVjUwLjIwNXogTTUxLjgxNyw1Mi4yMDloMTguMzI3TDUxLjgxNyw3NC4yMDdWNTIuMjA5eiBNNDkuODQzLDI3LjQ1NGgxLjU3NHYyMi4zNWgtMS41NzRWMjcuNDU0eiBNNDkuODQzLDUwLjIwNWgxLjU3NHYxLjYwNCAgaC0xLjU3NFY1MC4yMDV6IE00OS44NDMsNTIuMjA5aDEuNTc0djIyLjM1aC0xLjU3NFY1Mi4yMDl6Ii8+PHBhdGggZD0iTTk1LjYwMiw3Ni42MDZMNTAuNzY4LDIyLjg0MmMtMC4wMDQtMC4wMDUtMC4wMTItMC4wMDQtMC4wMTctMC4wMDljLTAuMDA0LTAuMDA1LTAuMDAzLTAuMDEzLTAuMDA5LTAuMDE3ICBjLTAuMDE3LTAuMDE0LTAuMDM5LTAuMDEtMC4wNTktMC4wMThjLTAuMDI0LTAuMDA5LTAuMDQzLTAuMDIxLTAuMDY5LTAuMDIxYy0wLjAyNSwwLTAuMDQ1LDAuMDEyLTAuMDY5LDAuMDIxICBjLTAuMDIsMC4wMDctMC4wNDIsMC4wMDQtMC4wNTksMC4wMThjLTAuMDA1LDAuMDA0LTAuMDA0LDAuMDEyLTAuMDA5LDAuMDE3Yy0wLjAwNSwwLjAwNS0wLjAxMywwLjAwMy0wLjAxNywwLjAwOUw1LjY1OCw3Ni42MDYgIGMtMC4wMTUsMC4wMTktMC4wMTIsMC4wNDItMC4wMiwwLjA2M2MtMC4wMDgsMC4wMjItMC4wMjYsMC4wMzktMC4wMjYsMC4wNjRjMCwwLjAwNCwwLjAwNCwwLjAwNiwwLjAwNCwwLjAxICBjMC4wMDEsMC4wMjUsMC4wMTgsMC4wNDQsMC4wMjgsMC4wNjdjMC4wMTEsMC4wMjQsMC4wMTYsMC4wNSwwLjAzNiwwLjA2OGMwLjAwMiwwLjAwMiwwLjAwMSwwLjAwNiwwLjAwNCwwLjAwOSAgYzAuMDM3LDAuMDMsMC4wODMsMC4wNDYsMC4xMjgsMC4wNDZoODkuNjM3YzAuMDQ2LDAsMC4wOTEtMC4wMTYsMC4xMjgtMC4wNDZjMC4wMDMtMC4wMDMsMC4wMDItMC4wMDcsMC4wMDQtMC4wMDkgIGMwLjAyMS0wLjAxOSwwLjAyNS0wLjA0NCwwLjAzNy0wLjA2OWMwLjAxLTAuMDIzLDAuMDI2LTAuMDQyLDAuMDI3LTAuMDY2YzAtMC4wMDQsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSAgYzAtMC4wMjUtMC4wMTgtMC4wNDItMC4wMjYtMC4wNjRDOTUuNjE0LDc2LjY0OCw5NS42MTcsNzYuNjI1LDk1LjYwMiw3Ni42MDZ6IE02LjIzOSw3Ni41MzRsNDQuMzc1LTUzLjI1Mmw0NC40MDcsNTMuMjUySDYuMjM5eiIvPjwvZz48L3N2Zz4=');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}
#values::before {
  left: 30px;
  transform: translateY(-50%);
}
#values::after {
  right: 30px;
  transform: translateY(-50%);
}
#values .container {
  position: relative;
  z-index: 1;
}
.values-truss-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTAwMDAiIGhlaWdodD0iNjAwNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHZlcnNpb249IjEuMSIgdmlld0JveD0iNS42MTE5OTk5ODg1NTU5MDggMjIuNzc2OTk4NTE5ODk3NDYgOTAuMDM2OTk0OTM0MDgyMDMgNTQuMTU2MDEzNDg4NzY5NTMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHN0eWxlPi5hRDZ6MW5Za2hjb2xvciB7ZmlsbDojMEM1RDdCO2ZpbGwtb3BhY2l0eToxO30uYUxnT2FWM3pSY29sb3JzLTAge2ZpbGw6IzBDNUQ3QjtmaWxsLW9wYWNpdHk6MTt9LmFxUDVOSWt2NHpjb2xvciB7ZmlsbDojNzVCREQ3O2ZpbGwtb3BhY2l0eToxO30uYVI5VGF2b1hZZmlsbENvbG9yIHtmaWxsOiMwQzVEN0I7ZmlsbC1vcGFjaXR5OjE7fS5hc3IxQnRJeGxmaWxsQ29sb3Ige2ZpbGw6IzBDNUQ3QjtmaWxsLW9wYWNpdHk6MTt9LnNoYXBlU3Ryb2tlLXN0ciB7c3Ryb2tlOiMyQzNDNUI7c3Ryb2tlLW9wYWNpdHk6MTt9PC9zdHlsZT48ZyBjbGFzcz0iYUxnT2FWM3pSY29sb3JzLTAiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgMCAwKSI+PHBhdGggZD0iTTQ5LjYzNCwyNy4wNThjLTAuMDI0LDAuMDAxLTAuMDQyLDAuMDE3LTAuMDY0LDAuMDI2Yy0wLjAyNiwwLjAxMi0wLjA1MywwLjAxNy0wLjA3MiwwLjAzOCAgYy0wLjAwMiwwLjAwMi0wLjAwNiwwLjAwMi0wLjAwOSwwLjAwNGwtMTguOTU0LDIyLjc1djBsLTAuODUsMWMwLDAuMDAxLDAsMC4wMDItMC4wMDEsMC4wMDJjMCwwLjAwMS0wLjAwMiwwLTAuMDAyLDAuMDAxICBsLTEuMjcxLDEuNTc2bC0xLjAwMSwxLjE1MWMwLDAuMDAxLDAsMC4wMDEtMC4wMDEsMC4wMDNjMCwwLTAuMDAxLDAtMC4wMDIsMGwtNy42MjQsOS4xNzRsLTEuMjc0LDEuNTE5YzAsMCwwLDAsMCwwLjAwMWgwICBMOS45MTEsNzQuNjMxYy0wLjAxNiwwLjAyLTAuMDEyLDAuMDQzLTAuMDIsMC4wNjRjLTAuMDA4LDAuMDIyLTAuMDI2LDAuMDM5LTAuMDI2LDAuMDY0YzAsMC4wMDMsMC4wMDMsMC4wMDUsMC4wMDQsMC4wMDkgIGMwLjAwMSwwLjAyNSwwLjAxOCwwLjA0NSwwLjAyOCwwLjA2OWMwLjAxMiwwLjAyMywwLjAxNiwwLjA0OSwwLjAzNiwwLjA2NmMwLjAwMiwwLjAwMiwwLjAwMSwwLjAwNiwwLjAwNCwwLjAwOSAgYzAuMDM3LDAuMDMxLDAuMDgzLDAuMDQ2LDAuMTI4LDAuMDQ2aDE2LjI1aDEuMjQ2aDEuOTc1aDE3LjQ5N2gyLjYxMmgxLjk3NGgyLjU4MmgxNy40OTZoMi4wMDRoMS4yNDZoMTYuMjUxICBjMC4wNDYsMCwwLjA5MS0wLjAxNSwwLjEyOC0wLjA0NmMwLjAwMy0wLjAwMywwLjAwMi0wLjAwNywwLjAwNC0wLjAwOWMwLjAyLTAuMDE4LDAuMDI0LTAuMDQzLDAuMDM2LTAuMDY2ICBjMC4wMTEtMC4wMjQsMC4wMjctMC4wNDQsMC4wMjgtMC4wNjljMC0wLjAwNCwwLjAwNC0wLjAwNiwwLjAwNC0wLjAwOWMwLTAuMDI1LTAuMDE4LTAuMDQyLTAuMDI2LTAuMDY0ICBjLTAuMDA4LTAuMDIxLTAuMDA1LTAuMDQ1LTAuMDIxLTAuMDY0bC04LjU5NS0xMC4zMjZsLTEuMzA4LTEuNThsMCwwbDAsMGwtNy41OTQtOS4xMTNjMCwwLTAuMDAyLDAtMC4wMDItMC4wMDEgIGMtMC4wMDEsMCwwLTAuMDAxLTAuMDAxLTAuMDAxbC0wLjk5OC0xLjE1Yy0wLjAwMSwwLTAuMDAxLTAuMDAxLTAuMDAxLTAuMDAxbC0xLjMwNi0xLjU3OWMwLDAtMC4wMDEsMC0wLjAwMSwwbC0wLjgxOC0xICBjMCwwLDAsMCwwLDBjLTAuMDAxLDAtMC4wMDEsMC0wLjAwMS0wLjAwMWwtMTguOTU0LTIyLjc1Yy0wLjAwMy0wLjAwMy0wLjAwNy0wLjAwMi0wLjAwOS0wLjAwNCAgYy0wLjAxOS0wLjAyMS0wLjA0Ni0wLjAyNi0wLjA3MS0wLjAzN2MtMC4wMjItMC4wMS0wLjA0MS0wLjAyNS0wLjA2NC0wLjAyN2MtMC4wMDQsMC0wLjAwNi0wLjAwNC0wLjAxLTAuMDA0aC0xLjk3NCAgQzQ5LjYzOSwyNy4wNTQsNDkuNjM3LDI3LjA1OCw0OS42MzQsMjcuMDU4eiBNMTAuNDkxLDc0LjU1OWw4LjE2MS05LjgwM2w3LjI2NSw5LjgwM0gxMC40OTF6IE0yNy4zNiw3NC41NTloLTAuOTQ1bC03LjQ5OS0xMC4xMTkgIGwxLjAxNS0xLjIwOWw3LjQyOSw5LjQ3MlY3NC41NTl6IE0yNy4zNiw3Mi4wNTVsLTcuMTY3LTkuMTM3bDcuMTY3LTguNjI1VjcyLjA1NXogTTI5LjMzNCw3NC41NTlIMjcuNzZ2LTEuOTI2VjUzLjgxNGwwLjgwMS0wLjkyMiAgbDAuNzczLDAuOTJWNzQuNTU5eiBNMjkuNzM1LDc0LjU1OVY1NC4yOTNsMTYuODcsMjAuMjY2SDI5LjczNXogTTQ3LjEyNSw3NC41NTlMMjkuNjg4LDUzLjYxMWMwLDAsMCwwLTAuMDAxLDBsMCwwbC0wLjg2NS0xLjAyOCAgbDEuMDE5LTEuMjYzbDAuNjk0LDAuODE2bDAsMGwxOC42OCwyMi40MjJINDcuMTI1eiBNNDkuNDQzLDc0LjIwN0wzMS4xMTcsNTIuMjA5aDE4LjMyNlY3NC4yMDd6IE00OS40NDMsNTEuODA5SDMwLjc4MkwzMC4xLDUxLjAwNiAgbDAuNjgyLTAuODAxaDE4LjY2MVY1MS44MDl6IE00OS40NDMsNDkuODA0SDMxLjExN2wxOC4zMjYtMjEuOTk4VjQ5LjgwNHogTTkwLjc3LDc0LjU1OUg3NS4zNDNsNy4yNjctOS44MDNMOTAuNzcsNzQuNTU5eiAgIE03My45LDU0LjI5M2w3LjEzOSw4LjU2Nkw3My45LDcyLjQ4M1Y1NC4yOTN6IE03My45LDczLjE1NGw3LjQwMS05Ljk3OWwxLjA0NSwxLjI2NGwtNy41MDIsMTAuMTE5SDczLjlWNzMuMTU0eiBNNzEuNDk2LDc0LjU1OSAgSDU0LjYyN2wxNi44NjktMjAuMjY2Vjc0LjU1OXogTTczLjUsNTMuODE0djE5LjI3NHYxLjQ3aC0xLjYwNFY1My44MTRsMC44MDEtMC45MjRMNzMuNSw1My44MTR6IE03Mi40MzYsNTIuNTgybC0wLjg5MSwxLjAyN3YwLjAwMSAgYy0wLjAwMSwwLjAwMS0wLjAwMiwwLjAwMS0wLjAwMywwLjAwMUw1NC4xMDUsNzQuNTU5aC0yLjA2MWwxOC42ODEtMjIuNDIyYzAuMDAxLDAsMC0wLjAwMSwwLjAwMS0wLjAwMWMwLTAuMDAxLDAtMC4wMDEsMC0wLjAwMSAgbDAuNjY2LTAuODEzTDcyLjQzNiw1Mi41ODJ6IE01MS44MTcsMjcuODA3bDE4LjMyNywyMS45OThINTEuODE3VjI3LjgwN3ogTTUxLjgxNyw1MC4yMDVoMTguNjZsMC42NTUsMC44MDFsLTAuNjU1LDAuODAzaC0xOC42NiAgVjUwLjIwNXogTTUxLjgxNyw1Mi4yMDloMTguMzI3TDUxLjgxNyw3NC4yMDdWNTIuMjA5eiBNNDkuODQzLDI3LjQ1NGgxLjU3NHYyMi4zNWgtMS41NzRWMjcuNDU0eiBNNDkuODQzLDUwLjIwNWgxLjU3NHYxLjYwNCAgaC0xLjU3NFY1MC4yMDV6IE00OS44NDMsNTIuMjA5aDEuNTc0djIyLjM1aC0xLjU3NFY1Mi4yMDl6Ii8+PHBhdGggZD0iTTk1LjYwMiw3Ni42MDZMNTAuNzY4LDIyLjg0MmMtMC4wMDQtMC4wMDUtMC4wMTItMC4wMDQtMC4wMTctMC4wMDljLTAuMDA0LTAuMDA1LTAuMDAzLTAuMDEzLTAuMDA5LTAuMDE3ICBjLTAuMDE3LTAuMDE0LTAuMDM5LTAuMDEtMC4wNTktMC4wMThjLTAuMDI0LTAuMDA5LTAuMDQzLTAuMDIxLTAuMDY5LTAuMDIxYy0wLjAyNSwwLTAuMDQ1LDAuMDEyLTAuMDY5LDAuMDIxICBjLTAuMDIsMC4wMDctMC4wNDIsMC4wMDQtMC4wNTksMC4wMThjLTAuMDA1LDAuMDA0LTAuMDA0LDAuMDEyLTAuMDA5LDAuMDE3Yy0wLjAwNSwwLjAwNS0wLjAxMywwLjAwMy0wLjAxNywwLjAwOUw1LjY1OCw3Ni42MDYgIGMtMC4wMTUsMC4wMTktMC4wMTIsMC4wNDItMC4wMiwwLjA2M2MtMC4wMDgsMC4wMjItMC4wMjYsMC4wMzktMC4wMjYsMC4wNjRjMCwwLjAwNCwwLjAwNCwwLjAwNiwwLjAwNCwwLjAxICBjMC4wMDEsMC4wMjUsMC4wMTgsMC4wNDQsMC4wMjgsMC4wNjdjMC4wMTEsMC4wMjQsMC4wMTYsMC4wNSwwLjAzNiwwLjA2OGMwLjAwMiwwLjAwMiwwLjAwMSwwLjAwNiwwLjAwNCwwLjAwOSAgYzAuMDM3LDAuMDMsMC4wODMsMC4wNDYsMC4xMjgsMC4wNDZoODkuNjM3YzAuMDQ2LDAsMC4wOTEtMC4wMTYsMC4xMjgtMC4wNDZjMC4wMDMtMC4wMDMsMC4wMDItMC4wMDcsMC4wMDQtMC4wMDkgIGMwLjAyMS0wLjAxOSwwLjAyNS0wLjA0NCwwLjAzNy0wLjA2OWMwLjAxLTAuMDIzLDAuMDI2LTAuMDQyLDAuMDI3LTAuMDY2YzAtMC4wMDQsMC4wMDQtMC4wMDYsMC4wMDQtMC4wMSAgYzAtMC4wMjUtMC4wMTgtMC4wNDItMC4wMjYtMC4wNjRDOTUuNjE0LDc2LjY0OCw5NS42MTcsNzYuNjI1LDk1LjYwMiw3Ni42MDZ6IE02LjIzOSw3Ni41MzRsNDQuMzc1LTUzLjI1Mmw0NC40MDcsNTMuMjUySDYuMjM5eiIvPjwvZz48L3N2Zz4=');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

/* ================================================
   Hero - Stacked Logo Watermark (behind blue)
   ================================================ */
#home::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/trusspoint-logo-stacked.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 28% auto;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
#home > * {
  position: relative;
  z-index: 1;
}

/* ================================================
   Who We Work With - Metal Truss Watermark
   ================================================ */
#criteria::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/metal-truss.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
#criteria > * {
  position: relative;
  z-index: 1;
}

/* ================================================
   Who We Work With - Make industry images pop
   ================================================ */
#criteria img {
  opacity: 1 !important;
}

/* ================================================
   Core Values - Reduce watermark opacity
   ================================================ */

/* =====================================================================
   TP mobile: stack core values + trusses (added 2026-06-05)
   ===================================================================== */
@media (max-width: 768px) {
  /* Stack the five Core Values cards in a single column */
  #values .values-grid { grid-template-columns: 1fr !important; }

  /* Stack the three background trusses vertically, centered */
  #values::before,
  #values::after,
  #values .values-truss-center {
    width: 240px !important;
    height: 240px !important;
    left: 50% !important;
    right: auto !important;
  }
  #values::before              { top: 8%  !important; transform: translateX(-50%) !important; }
  #values .values-truss-center { top: 42% !important; transform: translateX(-50%) !important; }
  #values::after               { top: 76% !important; transform: translateX(-50%) !important; }
}