/* ================================
   Trinity Solutions LLC
   Master Stylesheet
   ================================ */

/* ================================
   BRAND VARIABLES
   ================================ */

:root{
  --ts-blue:#0070C0;
  --ts-blue-dark:#005A9E;
  --ts-red:#D62828;
  --ts-white:#F3F1EE;

  --ink:#0f172a;
  --muted:#475569;
  --border:#dbe3ef;
  --maxw:1120px;
}

/* ================================
   GLOBAL RESET
   ================================ */

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:"Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  line-height:1.6;
  color:var(--ink);
  background:#ffffff;
}

/* ================================
   SHARED WRAPPER
   ================================ */

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

/* ================================
   HEADER
   ================================ */

.topbar{
  background:#ffffff;
  border-bottom:1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
}


.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand img{
  height:44px;
  width:auto;
  max-width:160px;
  object-fit:contain;
}


/* ================================
   NAVIGATION (IBM STYLE)
   ================================ */

.nav{ margin-left:auto; }

.nav ul{
  list-style:none;
  display:flex;
  gap:22px;
  padding:0;
  margin:0;
  align-items:center;
}

.nav a{
  position:relative;
  display:inline-block;
  padding:10px 10px;
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  letter-spacing:0.02em;
  border-radius:6px;
  transition:background 160ms ease, color 160ms ease;
}

.nav a::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:-6px;
  height:5px;
  background:var(--ts-blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 160ms ease;
}

.nav a.active::after{
  transform:scaleX(1);
}

.nav a:hover{
  background:rgba(0,112,192,0.12);
}

/* ================================
   TAGLINE BAND
   ================================ */
/* ================================
   FULL-WIDTH HERO
   ================================ */

.hero-full{
  width:100%;
  margin:0;
  padding:0;
}

.hero-full img{
  width:100%;
  height:360px;        /* consistent hero height */
  display:block;
  object-fit:cover;
}

.tagline-band{
  background:var(--ts-blue);
}

.tagline-inner{
  color:#fff;
  text-align:center;
  padding:9px 0;
  font-size:16px;
  font-weight:600;
  letter-spacing:0.12em;
}

/* ================================
   FOOTER (compact layout like v2 image)
   ================================ */

.site-footer{
  background: var(--ts-blue);
  color: #fff;
  margin-top: 80px;
  border-top: 4px solid var(--ts-red);
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px 14px;

  display: grid;
  grid-template-columns: 1fr max-content;  /* about + links */
  column-gap: 28px;
  row-gap: 12px;
  align-items: start;
}

/* LEFT: About */
.footer-about p{
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.95;
  max-width: 700px; /* keeps the paragraph from stretching too wide */
}

/* RIGHT: Links */
.footer-links{
  text-align: left;
}

.footer-links ul{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(3, max-content); /* 3 compact columns */
  column-gap: 40px;
  row-gap: 4px;  /* tighter spacing (desktop) */
}

/* Tighten the line box (applies to desktop + mobile) */
.footer-links li{
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.footer-links a{
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  opacity: 0.95;
  white-space: nowrap;
}

.footer-links a:hover{
  opacity: 1;
  text-decoration: underline;
}

/* COPYRIGHT BAR */
.footer-bottom{
  text-align: center;
  font-size: 11px;
  padding: 10px 12px;
  background: var(--ts-blue-dark);
  letter-spacing: 0.04em;
}

/* Mobile: stack and make links 2 columns (compact) */
@media (max-width: 820px){

  .footer-inner{
    grid-template-columns: 1fr;
    padding: 16px 16px 12px;
    row-gap: 12px;
  }

  /* keep footer links centered on mobile */
  .footer-links{
    text-align: center;
    justify-content: center;
  }

  .footer-links ul{
    grid-template-columns: repeat(2, max-content);
    column-gap: 28px;
    row-gap: 4px; /* compact rows on mobile */
  }

}

/* ================================
   RESPONSIVE
   ================================ */

@media(max-width:900px){

  .topbar-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .nav ul{
    flex-wrap:wrap;
    gap:10px;
  }

  .footer-inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-brand,
  .footer-about,
  .footer-links{
    align-items:center;
    text-align:center;
  }

  .footer-links{
    justify-content:center;
  }
}

/* Better rendering for responsive images */
img{max-width:100%;height:auto;}

.header-accent{height:0;}

/* ================================
   APPROACH PAGE – Readability upgrades
   ================================ */

.approach-page .lead{
  font-size: 1.05rem;
  line-height: 1.75;
  margin-top: 0.25rem;
}

.soft-divider{
  height: 1px;
  width: 100%;
  background: rgba(0,0,0,0.08);
  margin: 22px 0;
}

/* Highlight box for Guiding Principles */
.highlight-box{
  background: rgba(0,112,192,0.06);
  border: 1px solid rgba(0,112,192,0.18);
  border-radius: 14px;
  padding: 18px 18px;
}

.principles-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}

.principle{
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.06);
}

.principle h3{
  margin: 0 0 6px 0;
  font-size: 1.02rem;
}

.principle p{
  margin: 0;
  line-height: 1.65;
  opacity: 0.95;
}

/* 5-step model as numbered cards */
.step-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.step-card{
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.step-num{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--ts-blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 2px;
}

.step-body h3{
  margin: 0 0 6px 0;
}

.step-body p{
  margin: 0 0 8px 0;
  line-height: 1.65;
  opacity: 0.95;
}

/* Better list scan-ability inside cards */
.step-body ul{
  margin: 0;
  padding-left: 18px;
}

.spaced-list li{
  margin-bottom: 10px;
  line-height: 1.6;
}

.spaced-list li:last-child{
  margin-bottom: 0;
}

/* Mobile tweaks */
@media (max-width: 820px){
  .principles-grid{
    grid-template-columns: 1fr;
  }
  .step-card{
    grid-template-columns: 1fr;
  }
  .step-num{
    margin-bottom: 6px;
  }
}

/* ================================
   SERVICES PAGE – Readability upgrades
   ================================ */

.services-page .lead{
  font-size: 1.05rem;
  line-height: 1.75;
  margin-top: 0.25rem;
}

.services-page h2{
  margin-top: 28px;
}

.services-page p{
  line-height: 1.7;
  opacity: 0.95;
}

.services-page ul{
  padding-left: 20px;
}

.services-page .spaced-list li{
  margin-bottom: 10px;
  line-height: 1.6;
}

.services-page .soft-divider{
  height: 1px;
  width: 100%;
  background: rgba(0,0,0,0.08);
  margin: 26px 0;
}


/* Container-style cards for Services page sections (match Approach visual system) */
.service-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.service-card{
  padding:18px 18px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
}

.services-page .service-card h2{
  margin:0 0 10px 0;
}

.services-page .service-card p{
  margin:0 0 10px 0;
}

.services-page .service-card p:last-child{
  margin-bottom:0;
}

.services-page .service-card ul{
  margin:0;
  padding-left:20px;
}

/* Footer meta baseline row — full width white strip, unified blue text */
/* Footer meta baseline row — same blue as footer */
.footer-meta{
  grid-column: 1 / -1;
  width:100%;
  max-width:1200px;
  margin:10px auto 0;
  padding:0 24px;

  display:grid;
  grid-template-columns: max-content 1fr max-content;
  align-items:center;
padding:6px 0;

  background:transparent;   /* remove white band */
  color:#ffffff;

  font-size:14px;
  font-weight:600;
  opacity:0.95;
}

/* make all text + links white */
.footer-meta,
.footer-meta div,
.footer-meta a{
  color:#ffffff !important;
}

.footer-meta-left{ justify-self:start; }
.footer-meta-center{ justify-self:center; }
.footer-meta-right{ justify-self:end; }

.footer-meta a{
  text-decoration:none;
}

.footer-meta a:hover{
  text-decoration:underline;
}

/* Accessibility: Skip link (hidden until keyboard focus) */
.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 12px;
  background:#ffffff;
  color:var(--ts-blue);
  border:2px solid var(--ts-blue);
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  transform:translateY(-140%);
  transition:transform 160ms ease;
  z-index:9999;
}
.skip-link:focus{
  transform:translateY(0);
}

/* ===== Global Heading Color Facelift (Trinity standard) ===== */
h2{
  color:#0B3C5D;
}

h3{
  color:#1F5FAF;
}
/* ===== Global Primary Heading Color ===== */

h1{
  color:#0B3C5D;
}
/* ================================
   HOME PAGE – Containers & styling (match Approach/Services pattern)
   ================================ */

.home-page .lead{
  font-size: 1.05rem;
  line-height: 1.75;
  margin-top: 0.25rem;
}

.home-page .sub-lead{
  margin-top: 6px;
  opacity: 0.9;
}

.home-page .soft-divider{
  height: 1px;
  width: 100%;
  background: rgba(0,0,0,0.08);
  margin: 22px 0;
}

.home-hero-copy h1{
  margin-top: 0;
}

.home-benefits{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  margin-top: 14px;
}

.home-pillars{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px 18px;
  margin-top: 14px;
}

.home-card{
  padding: 18px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

.home-card h3{
  margin-top: 0;
}

.home-card p{
  line-height: 1.65;
  opacity: 0.95;
  margin-bottom: 0;
}

.home-link{
  margin-top: 12px;
}

.tight-list{
  margin: 10px 0 0 0;
  padding-left: 18px;
}

.tight-list li{
  margin-bottom: 8px;
  line-height: 1.6;
}

.tight-list li:last-child{
  margin-bottom: 0;
}

.home-flow{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 8px 0;
}

.flow-step{
  padding: 10px 14px;
  border-radius: 999px;

  background: linear-gradient(
    to bottom,
    #ffffff,
    #f3f6fa
  );

  border: 1px solid rgba(0,0,0,0.12);

  font-weight: 600;

  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);

  transition: all 0.18s ease;
}

.flow-step:hover{
  transform: translateY(-2px);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.95);
}


.home-center{
  text-align: center;
}

.highlight-box{
  background: rgba(0,112,192,0.06);
  border: 1px solid rgba(0,112,192,0.18);
  border-radius: 14px;
  padding: 18px 18px;
}

.ecosystem-flow{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.eco-chip{
  padding: 10px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  font-weight: 600;
}

.eco-arrow{
  opacity: 0.6;
  font-weight: 700;
}

.home-industries{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.industry-chip{
  padding: 10px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  font-weight: 600;
}

.cta-band{
  margin-top: 16px;
  padding: 18px 18px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 18px;
  align-items: center;
}

.cta-band h2{
  margin: 0 0 6px 0;
}

.cta-band p{
  margin: 0;
  line-height: 1.65;
  opacity: 0.95;
}

/* =========================
   Standard Buttons – Trinity Style
   ========================= */

.btn-primary,
.btn-secondary{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;

  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;

  background: var(--ts-blue);
  color: #ffffff;
  border: none;

  box-shadow: 0 6px 16px rgba(0,0,0,0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary:hover,
.btn-secondary:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}


/* Responsive */
@media (max-width: 980px){
  .home-pillars{
    grid-template-columns: 1fr;
  }
  .home-benefits{
    grid-template-columns: 1fr;
  }
  .cta-band{
    grid-template-columns: 1fr;
  }
}
/* ================================
   MICROSOFT ECOSYSTEM BLOCK – Microsoft-accent refresh
   Paste this at the VERY BOTTOM of css/style.css
   (It will override earlier styles safely.)
   ================================ */

/* Container */
.highlight-box{
  background: linear-gradient(to bottom, #f3f7fc, #e8f1fb);
  border: 1px solid rgba(0,112,192,0.22);
  border-radius: 14px;
  padding: 18px 18px;
}

/* Flow row */
.ecosystem-flow{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

/* Chips (soft 3D) */
.eco-chip{
  padding: 10px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Microsoft-style accents (thin left bar) */
.eco-chip:nth-of-type(1){ border-left: 4px solid #F2C811; } /* Data / Power BI */
.eco-chip:nth-of-type(2){ border-left: 4px solid #0078D4; } /* Automate */
.eco-chip:nth-of-type(3){ border-left: 4px solid #742774; } /* App / Power Apps */
.eco-chip:nth-of-type(4){ border-left: 4px solid #2E7D32; } /* Insight */

/* Arrows */
.eco-arrow{
  opacity: 0.55;
  font-weight: 800;
}

/* Button polish (optional – keeps your brand blue) */
.btn-secondary{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  background: #ffffff;
  color: var(--ts-blue);
  border: 1px solid rgba(0,112,192,0.35);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-secondary:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* =====================================
   HOME – Final visual corrections
   ===================================== */

/* --- Microsoft ecosystem container: neutral card --- */
.highlight-box{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
  padding: 18px 18px;
}

/* --- Ecosystem chips — correct Microsoft accents --- */
/* chips are odd children because arrows sit between them */

.ecosystem-flow .eco-chip:nth-child(1){
  border-left: 4px solid #F2C811; /* Data / Power BI */
}

.ecosystem-flow .eco-chip:nth-child(3){
  border-left: 4px solid #0078D4; /* Automate */
}

.ecosystem-flow .eco-chip:nth-child(5){
  border-left: 4px solid #742774; /* App */
}

.ecosystem-flow .eco-chip:nth-child(7){
  border-left: 4px solid #2E7D32; /* Insight */
}

/* --- Standardize primary buttons --- */

.btn-primary{
  background: var(--ts-blue);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}

.btn-primary:hover{
  transform: translateY(-1px);
}

/* --- Secondary (outline) button — used for Ecosystem --- */

.btn-secondary{
  background: #ffffff;
  color: var(--ts-blue);
  border: 2px solid var(--ts-blue);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.btn-secondary:hover{
  background: rgba(0,112,192,0.06);
  transform: translateY(-1px);
}

/* --- CTA band layout — button bottom aligned --- */

.cta-band{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
}

.cta-actions{
  display: flex;
  align-items: end;
}

/* =====================================
   HOME – Button standardization + CTA centering
   ===================================== */

/* 1) Make ALL buttons look the same (blue filled, white text) */
.btn-primary,
.btn-secondary{
  background: var(--ts-blue) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0,0,0,0.14);
  text-decoration: none;
  display: inline-block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary:hover,
.btn-secondary:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* 2) Center the Contact button BELOW the CTA text */
.cta-band{
  grid-template-columns: 1fr !important;  /* stack */
  text-align: left;
}

.cta-actions{
  justify-content: center !important;
  margin-top: 12px;
}
/* Home – industries bullet list */

.simple-bullets{
  margin: 4px 0 0 0;
  padding-left: 22px;
  line-height: 1.8;
  font-size: 15px;
}

.simple-bullets li{
  margin: 6px 0;
}
.simple-bullets li{
  font-weight: 600;
}

/* ===== HOME HERO VIDEO ===== */
.hero-video-wrap{
  position:relative;
  width:100%;
  height:360px;              /* match existing hero height */
  overflow:hidden;
  background:#000;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.03);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 70% 50%, rgba(0,112,192,.22) 0%, rgba(0,0,0,0) 42%),
    linear-gradient(to right,
      rgba(5,20,45,.78) 0%,
      rgba(5,20,45,.55) 45%,
      rgba(0,0,0,.20) 100%);
}


.hero-content{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:0 8%;
  z-index:2;
}

.hero-caption{
  max-width:760px;
  color:#fff;
  font-family:"Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  font-weight:600;
  letter-spacing:0.01em;
  text-shadow:0 10px 30px rgba(0,0,0,.55);
}

.cap-line{
  font-size:28px;
  line-height:1.35;
  margin:10px 0;
  opacity:0.98;
  animation:capFadeUp 900ms ease both;
}

.cap-line:nth-child(2){ animation-delay:120ms; }
.cap-line:nth-child(3){ animation-delay:240ms; }

@keyframes capFadeUp{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:0.98; transform:translateY(0); }
}

.hero-tagline{
  margin-top:14px;
  font-size:14px;
  letter-spacing:0.08em;
  font-weight:700;
  opacity:0.92;
}


@media (max-width: 992px){
  .hero-video-wrap{ height:320px; }
  .cap-line{ font-size:22px; margin:8px 0; }
}

@media (max-width: 640px){
  .hero-video-wrap{ height:300px; }
  .hero-content{ padding:0 6%; }
  .cap-line{ font-size:18px; }
  .hero-overlay{
    background: linear-gradient(to right,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.55) 65%,
      rgba(0,0,0,.25) 100%);
  }
}
/* =====================================
   APPROACH HERO — same system as Home hero
   ===================================== */

.hero-approach-wrap{
  position:relative;
  width:100%;
  height:360px;
  overflow:hidden;
  background:#000;
}

.hero-approach-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.78) contrast(1.12) saturate(.95);
}


/* dark + Trinity blue gradient like Home */
.hero-approach-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,.78) 0%,
    rgba(5,20,45,.55) 45%,
    rgba(0,0,0,0) 100%
  );
}


.hero-approach-content{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:0 8%;
  z-index:2;
}

/* reuse SAME caption system as Home hero */
.hero-approach-wrap .hero-caption{
  max-width:760px;
  color:#fff;
  font-family:"Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  font-weight:600;
  letter-spacing:0.01em;
  text-shadow:0 10px 30px rgba(0,0,0,.55);
}

.hero-approach-wrap .cap-line{
  font-size:28px;
  line-height:1.35;
  margin:10px 0;
}

/* responsive — match Home */
@media (max-width: 992px){
  .hero-approach-wrap{ height:320px; }
  .hero-approach-wrap .cap-line{ font-size:22px; }
}

@media (max-width: 640px){
  .hero-approach-wrap{ height:300px; }
  .hero-approach-content{ padding:0 6%; }
  .hero-approach-wrap .cap-line{ font-size:18px; }
}
/* =====================================
   HERO OVERLAY — LEFT THIRD GRADIENT
   (Keeps copy readable on left; preserves image clarity on right)
   ===================================== */

/* Home video hero */
.hero-overlay{
  background: linear-gradient(
    to right,
    rgba(0,0,0,.86) 0%,
    rgba(5,20,45,.78) 14%,
    rgba(0,112,192,.38) 28%,
    rgba(0,0,0,0) 33%,
    rgba(0,0,0,0) 100%
  );
}

/* Approach / Services / Ecosystem / About / Contact image heroes */
.hero-approach-overlay{
  background: linear-gradient(
    to right,
    rgba(0,0,0,.86) 0%,
    rgba(5,20,45,.78) 14%,
    rgba(0,112,192,.38) 28%,
    rgba(0,0,0,0) 33%,
    rgba(0,0,0,0) 100%
  );
}

/* Slightly reduce image darkening so right side stays vivid */
.hero-approach-img{
  filter: brightness(.92) contrast(1.08) saturate(1.02);
}

/* ===== Footer baseline alignment fix (Trinity standard) ===== */
.footer-about .footer-address{
  margin:0;              /* remove inherited p bottom margin */
}

.footer-links li:last-child{
  margin-bottom:0;       /* remove extra drop below baseline */
}
/* ===== Footer middle baseline — centered text ===== */
.footer-about .footer-address{
  margin:0;
  text-align:center;
  width:100%;
}
/* ===== Global Content Font Size Increase (exclude header & footer) ===== */

/* ===== Global Content Font Size Increase — TEST (exclude header & footer) ===== */

/* ===== Global Content Font Size Increase (exclude header & footer) ===== */

main{
  font-size: 1.08rem;
}

main p,
main li{
  font-size: 1em;
}

main .lead{
  font-size: 1.12em;
}

/* ===== Services cards: more breathing room + blue emphasis ===== */

/* 1) Increase readability inside content cards */
.service-card,
.highlight-box{
  line-height: 1.75;
}

/* 2) More spacing between bullet lines inside cards */
.service-card li,
.highlight-box li{
  line-height: 1.8;
  margin: 10px 0;
}

/* 3) Make bold emphasis match Trinity blue (content only) */
.service-card strong,
.service-card b,
.highlight-box strong,
.highlight-box b{
  color: var(--ts-blue);
}

/* ===== Home — Industries list in brand blue ===== */

.simple-bullets{
  color: var(--ts-blue);
}

.simple-bullets li{
  color: var(--ts-blue);
}

/* ===== Services lists — blue emphasis without bold weight ===== */

.service-card li strong,
.service-card li b,
.highlight-box li strong,
.highlight-box li b{
  font-weight:500;   /* normal/medium instead of bold */
}

/* =========================================================
   FINAL MOBILE FIX — Trinity Solutions
   Compact header + tight mobile nav + contact hero fix
   ========================================================= */

@media (max-width: 768px){

  /* Header row */
  .topbar-inner{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 0;
  }

  .brand img{
    height:44px;
  }

  /* Hamburger */
  .nav-toggle{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    background:transparent;
    border:0;
    padding:6px;
    cursor:pointer;
  }

  .nav-toggle-bar{
    width:20px;
    height:2px;
    margin:3px 0;
    background:#0b2d4a;
    border-radius:2px;
    display:block;
  }

  /* Nav behavior */
  .nav{
    display:none;
    width:100%;
    margin-top:8px;
  }

  .nav.is-open{
    display:block;
  }

  .nav ul{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:6px 0 0 0;
    margin:0;
  }

  .nav a{
    display:block;
    font-size:12px;
    font-weight:700;
    padding:6px 8px;
    line-height:1.2;
    letter-spacing:0.01em;
  }

  .nav a::after{
    display:none;
  }

  /* Tagline band */
  .tagline-inner{
    font-size:13px;
    letter-spacing:0.10em;
    padding:8px 0;
  }
}

/* Contact hero mobile fix — CONTACT ONLY (no impact to other pages) */
@media (max-width: 768px){
  /* TARGETING THE CORRECT HERO CLASSES FROM CONTACT.HTML */
  body.contact-page .hero-approach-wrap {
    height: clamp(240px, 60vw, 340px);
  }
  
  body.contact-page .hero-approach-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center; /* prioritizes the right side of the image */
  }
}

/* ===== MOBILE NAV (Hamburger) ===== */
@media (max-width: 768px){

  /* show hamburger */
  .nav-toggle{
    display:flex;
  }

  /* stack header nicely */
  .site-header .wrap{
    flex-wrap:wrap;
  }

  /* mobile nav panel */
  #site-nav{
    width:100%;
    order:3;
    display:none;
    flex-direction:column;
    gap:10px;
    padding:10px 0 6px 0;
  }

  /* show when opened */
  #site-nav.is-open{
    display:flex;
  }

  /* compact mobile links */
  #site-nav a{
    font-size:14px;
    padding:6px 0;
  }

  /* keep logo correct */
  .logo img{
    height:44px;
    width:auto;
  }

  /* tighten tagline band on mobile */
  .tagline-band{
    font-size:13px;
    letter-spacing:1px;
    padding:8px 10px;
  }
}

/* ===== MOBILE FOOTER ALIGNMENT FIX ===== */
@media (max-width: 768px) {
  /* Force footer columns and meta-info to stack vertically */
  .footer-inner, .footer-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 30px !important;
  }

  /* Ensure columns take full width and don't squeeze */
  .footer-col {
    width: 100% !important;
    flex: none !important;
  }

  /* Reset meta row for mobile stacking */
  .footer-meta {
    margin-top: 30px !important;
    padding-top: 20px !important;
    gap: 15px !important;
  }

  .footer-meta-left, 
  .footer-meta-center, 
  .footer-meta-right {
    width: 100% !important;
    text-align: center !important;
  }
}

/* =========================================================
   DESKTOP HEADER FIX (Public site)
   1) Remove the small "pill/mark" near the logo:
      Hide the hamburger button (.nav-toggle) on desktop.
   2) Increase logo size by 20% on desktop only.
   ========================================================= */
@media (min-width: 769px){

  /* Hide hamburger toggle on desktop to remove the stray mark */
  .nav-toggle{
    display: none !important;
  }

  /* Logo +20% on desktop only (safe scaling) */
  .brand img{
    transform: scale(1.20);
    transform-origin: left center;
  }
}



/* =========================================================
   FIX: Mobile dropdown menu (restore: logo stays, dropdown panel)
   - Overrides older mobile nav blocks that were stacking/pushing header
   ========================================================= */
@media (max-width: 768px){

  /* keep header row stable */
  .topbar .topbar-inner{
    position: relative !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* hamburger visible on mobile */
  .nav-toggle{
    display: inline-flex !important;
  }

  /* turn nav into dropdown panel (not full-width, not pushing logo) */
  #site-nav.nav{
    position: absolute !important;
    top: 100% !important;
    right: 16px !important;
    left: auto !important;

    width: max-content !important;
    max-width: 92vw !important;

    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.18) !important;

    margin-top: 8px !important;

    /* hidden by default */
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    /* cancel older layout pushes */
    display: block !important;
    order: unset !important;
    flex-direction: unset !important;
    gap: 0 !important;
    padding: 0 !important;

    transition: max-height .25s ease, opacity .18s ease !important;
  }

  /* open state (toggled by JS) */
  .topbar.menu-open #site-nav.nav,
  #site-nav.nav.is-open{
    max-height: 80vh !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* list layout */
  #site-nav.nav ul{
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 16px 6px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    align-items: flex-start !important;
  }

  /* menu items: smaller + normal weight */
  #site-nav.nav a{
    display: block !important;
    padding: 8px 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
  }

  /* remove desktop underline indicator inside dropdown */
  #site-nav.nav a::after{
    display: none !important;
  }

  /* CTA inside dropdown */
  #site-nav .nav-cta{
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    padding: 10px 16px 14px 16px !important;
  }

  #site-nav .nav-cta .nav-cta-btn{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-weight: 600 !important; /* slightly stronger like Contact button */
    color: #ffffff !important;
    text-decoration: none !important;
  }

  #site-nav .nav-cta .nav-cta-btn:visited,
  #site-nav .nav-cta .nav-cta-btn:hover,
  #site-nav .nav-cta .nav-cta-btn:active{
    color: #ffffff !important;
  }

  /* ensure any older full-width nav rules don't show */
  .nav.is-open{
    display: block !important; /* keep, but dropdown is absolute so doesn't push */
    width: auto !important;
    margin-top: 0 !important;
  }
}
/* =====================================
   DESKTOP ONLY NAV OVERRIDES — SAFE PATCH
   ===================================== */

@media (min-width: 769px){

  /* 1️⃣ Hide Schedule button in desktop nav */
  .nav-cta{
    display: none !important;
  }

  /* 2️⃣ Desktop menu items — normal weight */
  .nav ul li a{
    font-weight: 400 !important;
  }

}


/* ================================
   TRINITY FRAMEWORK – Card layout
   Restores blue circle badges + container cards (Approach page)
   ================================ */

.trinity-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  margin-top: 14px;
}

.trinity-card{
  display:grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.trinity-badge{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ts-blue);
  color: #ffffff;
  display:grid;
  place-items:center;
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 2px;
  flex: 0 0 auto;
}

.trinity-body h3{
  margin: 0 0 6px 0;
}

.trinity-body p{
  margin: 0;
  line-height: 1.65;
  opacity: 0.95;
}

/* Last row "Y" card: keep same look as others */
.trinity-card-highlight{
  border-color: rgba(0,0,0,0.08);
}

@media (max-width: 820px){
  .trinity-cards{
    grid-template-columns: 1fr;
  }
  .trinity-card{
    grid-template-columns: 1fr;
  }
  .trinity-badge{
    margin-bottom: 6px;
  }
}

/* =====================================
   Force long links to wrap inside cards
   ===================================== */

.service-card a,
.contact-card a,
.wrap a{
  overflow-wrap: anywhere;
  word-break: break-word;
}



/* =====================================
   Insights / Whitepaper formatting
   ===================================== */

.insight-article{
  max-width: 980px;
  margin: 0 auto;
}

.insight-back{
  display: inline-block;
  margin-bottom: 24px; /* more space below Back to Insights */
}

.insight-series{
  font-style: italic;
  margin-top: 24px;   /* space below Back link */
  margin-bottom: 12px;
  color: #6b7280;
  font-size: 0.95rem;
}

.insight-article > header{
  margin-bottom: 18px;
}

.insight-article > section{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  margin: 16px 0;
}

.insight-article > section h2{
  margin-top: 0;
}

.insight-article ul,
.insight-article ol{
  margin-top: 10px;
}

.insight-article li{
  margin: 8px 0;
  line-height: 1.55;
}

.insight-article p{
  line-height: 1.7;
}

@media (max-width: 820px){
  .insight-article > section{
    padding: 18px 18px;
    border-radius: 14px;
  }
}
/* =====================================
   Whitepaper Image Layout
   ===================================== */

.article-image-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  margin: 24px 0;
  align-items: flex-start;
}

.insight-figure {
  margin: 0;
  text-align: center;
  width: auto;
}

.insight-figure img {
  width: 220px;
  height: 160px;
  object-fit: contain;
  background: #f4f7fb;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  display: block;
}

.insight-figure img:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0.92;
}

.insight-figure figcaption {
  margin-top: 14px;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
  font-weight: 500;
  width: 220px;
  text-align: center;
  word-wrap: break-word;
}

/* Mobile Tweak */
@media (max-width: 820px) {
  .article-image-container {
    gap: 16px;
    margin: 16px 0;
  }
  .insight-figure img {
    width: 150px;
    height: 110px;
    object-fit: contain;
  }
}

/* ── Two-column section: text left, thumbnail right ── */
.section-two-col {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.section-text {
  flex: 1;
  min-width: 0;
}

.section-thumbnail {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 640px) {
  .section-two-col {
    flex-direction: column;
  }
  .section-thumbnail {
    align-items: flex-start;
  }
}

/* ================================
   INSIGHTS ENHANCEMENTS (Series #002)
   ================================ */

.insight-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Premium blue callout */
.ts-callout{
  border: 1px solid rgba(0,112,192,0.20);
  background: linear-gradient(180deg, rgba(0,112,192,0.10), rgba(0,112,192,0.04));
  border-left: 6px solid var(--ts-blue);
  border-radius: 14px;
  padding: 18px 18px;
  margin: 18px 0 22px;
}

.ts-callout__title{
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 0 0 8px;
}

.ts-callout__icon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,112,192,0.14);
  border: 1px solid rgba(0,112,192,0.22);
}

.ts-callout p{ margin: 0 0 10px; }
.ts-callout p:last-child{ margin-bottom: 0; }

.ts-callout ul{
  margin: 8px 0 0 18px;
}

/* ADAPTIVE model cards */
.adaptive-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
  margin-top: 14px;
}

.adaptive-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 16px 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

.adaptive-top{
  display: flex;
  gap: 12px;
  align-items: center;
}

.adaptive-letter{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--ts-blue);
  background: rgba(0,112,192,0.12);
  border: 1px solid rgba(0,112,192,0.22);
}

.adaptive-card h3{
  margin: 0;
  font-size: 1.05rem;
}

.adaptive-card p{
  margin: 10px 0 0;
  color: var(--muted);
}

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

/* Whitepaper cover image (Series pages) */
.whitepaper-cover-image{
  margin: 18px 0 10px;
}
.whitepaper-cover-image img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14);
  display: block;
}

/* ================================
   INSIGHTS PAGE – Series kicker spacing
   Adds a blank line above the "Biweekly Insights Series #00X" lines
   ================================ */
.insight-kicker{
  margin-top: 16px;
}


/* ================================
   INSIGHTS PAGE – Professional publishing tweaks
   ================================ */

.insight-meta{
  margin: 6px 0 10px 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
}

/* Secondary outlined button (used for "Contact Us" in CTA) */
.btn-outline{
  display: inline-block !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  text-decoration: none !important;

  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.2px !important;

  background: #ffffff !important;
  color: var(--ts-blue) !important;
  border: 2px solid var(--ts-blue) !important;

  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.btn-outline:hover{
  background: rgba(0,112,192,0.06) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12) !important;
}

/* Keep CTA buttons nicely spaced */
.cta-actions{
  gap: 12px;
}

/* --- Force "Back to Insights" button to LEFT (all whitepaper pages) --- */
.back-to-insights,
.back-to-insights-wrap,
.back-to-insights-container,
.back-btn-wrap,
.insight-back,
.insight-back-wrap {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
}

.back-to-insights a,
.back-to-insights button,
.back-to-insights-wrap a,
.back-to-insights-container a,
.insight-back a {
  float: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}