/* ================================
   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);
}

.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:78px;
  width:auto;
}

/* ================================
   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
   ================================ */

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

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

  display:grid;
  grid-template-columns: max-content 1fr max-content;
  column-gap:22px;
  row-gap:16px;

  align-items:end; /* bottom-align all columns */
}

/* LEFT COLUMN – LOGO + TAGLINE (BOTTOM LEFT) */
/* Make the brand block hug its content (tagline width becomes the reference) */
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;     /* tagline stays left-aligned */
  justify-content:flex-end;
  text-align:left;

  width:max-content;          /* key: shrink to content width */
  justify-self:start;         /* keep the whole block left in the grid */
}

/* Ensure the tagline has a real measurable width box */
.footer-tagline{
  display:inline-block;       /* key: gives it a box */
  white-space:nowrap;         /* keep it on one line */
  margin:0;
}

/* Center emblem relative to footer-brand width (which is now the tagline width) */
.footer-emblem{
  width:96px;
  height:auto;
  display:block;
  margin:0 auto 6px auto;     /* centers inside footer-brand width */
  opacity:0.9;
}

/* CENTER COLUMN – ABOUT (BOTTOM ALIGNED) */
.footer-about{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  width:100%;          /* make middle column occupy full grid width */
  align-self:stretch;  /* ensures equal spacing left & right */
}

.footer-about p{
  font-size:14px;
  line-height:1.6;
  margin:0 0 8px 0;
  opacity:0.95;
}

.footer-address{
  font-size:13px;
  opacity:0.85;
}

/* RIGHT COLUMN – LINKS (BOTTOM RIGHT) */
.footer-links{
  display:flex;
  justify-content:flex-end;
  align-self:end;
  text-align:right;
}

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

.footer-links li{
  margin-bottom:4px;
}

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

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

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

/* ================================
   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 HALF ONLY GRADIENT
   (Clear image on right side)
   ===================================== */

/* Home video hero */
.hero-overlay{
  background: linear-gradient(
    to right,
    rgba(0,0,0,.82) 0%,
    rgba(5,20,45,.70) 28%,
    rgba(0,112,192,.35) 45%,
    rgba(0,0,0,0) 60%,
    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,.82) 0%,
    rgba(5,20,45,.70) 28%,
    rgba(0,112,192,.35) 45%,
    rgba(0,0,0,0) 60%,
    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 */
}