:root {
  --tm-black: #000000;
  --tm-bg: #f6f7f9; /* off-white page background */
  --tm-text: #111315; /* near-black body text */
  --tm-muted: #5f6670;
  --tm-accent: #0f5965; /* navy-teal accent */
  --tm-gray: #6c757d; /* for back-to-top */
}
:root {
  /* ...your existing vars... */
  --tm-gray: #343a40; /* darker gray */
}

body {
  background: var(--tm-bg);
  color: var(--tm-text);
  padding-top: 56px;
}

/* Navbar stays black */
.navbar.bg-dark {
  background-color: var(--tm-black) !important;
}

/* Footer stays black – switch footer class to bg-dark in HTML OR keep tm-footer */
.tm-footer {
  background: var(--tm-black);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 1) Set a nav height var and use it for body offset */
:root {
  --nav-h: 80px;
} /* default mobile/tablet */
@media (min-width: 992px) {
  :root {
    --nav-h: 100px;
  }
} /* desktop */

body {
  padding-top: var(--nav-h);
} /* keep content below nav */

/* 2) Make the logo scale with viewport, with sane min/max */
.tm-nav .tm-logo {
  height: clamp(64px, 9vw, 100px); /* grows with screen */
  width: auto;
}

/* 3) Ensure the navbar is tall enough for the big logo */
.tm-nav.navbar {
  min-height: var(--nav-h);
}

/* 4) Add a bit more left padding so it’s not glued to the edge */
.tm-nav .container-fluid {
  padding-left: 3rem;
}
@media (min-width: 992px) {
  .tm-nav .container-fluid {
    padding-left: 4rem;
  }
}

/* Navbar text = white */
.tm-nav .navbar-brand,
.tm-nav .nav-link,
.tm-nav .navbar-toggler,
.tm-nav .navbar-toggler:focus,
.tm-nav .navbar-toggler-icon {
  color: #fff !important;
}

/* Explicit link color + hover/active states */
.tm-nav .nav-link {
  color: #ffffff !important;
  opacity: 0.92;
}
.tm-nav .nav-link:hover,
.tm-nav .nav-link:focus {
  color: #ffffff !important;
  opacity: 1;
  text-decoration: underline; /* optional; remove if you don't like it */
}
.tm-nav .nav-link.active {
  color: #ffffff !important;
  opacity: 1;
  text-decoration: underline;
}

/* Make sure the hamburger icon is visible on black */
.tm-nav .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
}
.tm-nav .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(1.8);
}

/* HERO + PARALLAX (image or video) */
.tm-hero {
  position: relative;
  height: 48vh;
  min-height: 360px;
  overflow: hidden;
}
.tm-parallax-media {
  /* image target */
  position: absolute;
  z-index: 1;
  inset: -10% -10% -10% -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
  display: block;
}
.tm-hero .tm-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* responsive */
@media (max-width: 991.98px) {
  .tm-hero {
    height: 42vh;
    min-height: 320px;
  }
}
@media (max-width: 575.98px) {
  .tm-hero {
    height: 38vh;
    min-height: 300px;
  }
}

.tm-hero .tm-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2; /* overlay ABOVE media */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65));
  padding-inline: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tm-parallax-media,             /* <img> fallback */
.tm-parallax-video {
  /* <video> version */
  position: absolute;
  z-index: 1; /* media BELOW overlay */
  inset: -10% -10% -10% -10%; /* overscan so edges are hidden */
  width: 120%;
  height: 120%;
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
  display: block; /* remove inline gap on <img> */
}
.tm-hero .tm-hero-overlay .lead {
  letter-spacing: 0.3px;
  font-weight: 500;
}

/* responsive adjustments */
@media (max-width: 991.98px) {
  .tm-hero {
    height: 60vh;
    min-height: 420px;
  }
}
@media (max-width: 575.98px) {
  .tm-hero {
    height: 55vh;
    min-height: 360px;
  }
}
/* Hero text color (on top of dark overlay) */
.tm-hero .tm-hero-overlay {
  color: #fff;
}

.tm-hero .tm-hero-overlay h1,
.tm-hero .tm-hero-overlay p,
.tm-hero .tm-hero-overlay a,
.tm-hero .tm-hero-overlay .btn {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); /* subtle lift */
}
/* Softer translucent callout */
.tm-hero-callout {
  background: rgba(52, 58, 64, 0.22); /* was .55 → much lighter */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: inline-block;
  max-width: 820px;
  backdrop-filter: blur(2px); /* was 4px → subtler */
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); /* softer + smaller */
}

/* keep small-screen tweak */
@media (max-width: 575.98px) {
  .tm-hero-callout {
    padding: 1rem 1.125rem;
    border-radius: 14px;
    margin: 0 0.5rem;
  }
}

/* Back to top — gray button */
/* Back to top — hidden by default, fades in when .show */
button#backToTop.tm-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  background: var(--tm-gray);
  border-color: var(--tm-gray);
  color: #fff;
}
button#backToTop.tm-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Hero CTA uses gray */
.tm-hero .btn-primary {
  background: var(--tm-gray);
  border-color: var(--tm-gray);
  color: #fff;
}
.tm-hero .btn-primary:hover,
.tm-hero .btn-primary:focus {
  background: #5a6268;
  border-color: #5a6268;
}
/* Fade-up on scroll */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.fade-up.in {
  opacity: 1;
  transform: none;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Mission image placeholder */
.tm-placeholder {
  width: 100%;
  max-width: 520px; /* keeps it from getting too wide */
  aspect-ratio: 16 / 9; /* nice landscape block */
  border: 2px dashed rgba(0, 0, 0, 0.25);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}

/* Dark footer/nav themes won’t affect this, keep text readable on off-white body */
body:not(.dark) .tm-placeholder {
  color: rgba(0, 0, 0, 0.55);
}
/* Larger mission paragraph */
#mission p {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.7;
  max-width: 60ch; /* keeps lines readable */
}
/* --- Services: flip cards --- */
.service-card {
  perspective: 1000px;
  border-radius: 14px;
  outline: none;
}
.service-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 89, 101, 0.4);
  border-radius: 14px;
}

.service-card .card-inner {
  position: relative;
  height: 180px; /* card height */
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  border-radius: 14px;
}
@media (min-width: 576px) {
  .service-card .card-inner {
    height: 200px;
  }
}
@media (min-width: 992px) {
  .service-card .card-inner {
    height: 220px;
  }
}

/* front & back faces */
.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
}
.card-front i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.9;
  color: var(--tm-text);
}
.card-front h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.card-front p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tm-muted);
}

/* back face */
.card-back {
  background: var(--tm-gray); /* gray on hover */
  border-color: var(--tm-gray);
  color: #fff;
  transform: rotateY(180deg);
}
.card-back span {
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* flip on hover/focus */
.service-card:hover .card-inner,
.service-card:focus .card-inner,
.service-card:focus-within .card-inner {
  transform: rotateY(180deg);
}

/* reduced motion fallback: no flip, just fade */
@media (prefers-reduced-motion: reduce) {
  .service-card .card-inner {
    transition: none;
  }
  .service-card:hover .card-inner,
  .service-card:focus .card-inner,
  .service-card:focus-within .card-inner {
    transform: none;
  }
  .service-card:hover .card-front,
  .service-card:focus .card-front,
  .service-card:focus-within .card-front {
    opacity: 0;
  }
  .service-card:hover .card-back,
  .service-card:focus .card-back,
  .service-card:focus-within .card-back {
    opacity: 1;
  }
}

/* Centered, stacked form */
.tm-center-form {
  max-width: 520px;
  margin: 0 auto; /* centers the form */
  text-align: left; /* labels left-align; change to center if you prefer */
}
.tm-center-form .form-control {
  border-radius: 10px;
}
.tm-center-form .btn {
  border-radius: 10px;
}
/* Newsletter button = same dark gray as hero CTA */
#newsletter .btn-primary {
  background: var(--tm-gray);
  border-color: var(--tm-gray);
  color: #fff;
}
#newsletter .btn-primary:hover,
#newsletter .btn-primary:focus {
  background: #2d3237;
  border-color: #2d3237;
}
/* Publishing link button (same dark gray as other CTAs) */
.tm-pub-btn {
  background: var(--tm-gray);
  border-color: var(--tm-gray);
  color: #fff;
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
}
.tm-pub-btn:hover,
.tm-pub-btn:focus {
  background: #2d3237;
  border-color: #2d3237;
}
/* Portfolio placeholders sizing */
.tm-portfolio {
  max-width: 420px; /* slightly smaller than mission image box */
  aspect-ratio: 16 / 9; /* same landscape shape */
}
/* Follow Us — big centered black icons */
.tm-social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.tm-social-icons .social {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  text-decoration: none;
  background: transparent;
  transition: transform 0.15s ease;
}
.tm-social-icons .social i {
  font-size: 2.25rem; /* large */
  color: #000; /* black */
  line-height: 1;
}
.tm-social-icons .social:hover {
  transform: translateY(-2px);
}
/* Contact button = same dark gray as other CTAs */
#contact .btn-primary {
  background: var(--tm-gray);
  border-color: var(--tm-gray);
  color: #fff;
}
#contact .btn-primary:hover,
#contact .btn-primary:focus {
  background: #2d3237;
  border-color: #2d3237;
}
/* Footer look to match Publishing site */
.tm-footer {
  background: #000; /* black */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tm-foot-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0;
  color: #e9ecef;
}
.tm-foot-list i {
  font-size: 1rem;
  opacity: 0.9;
}
.tm-foot-list a:hover {
  text-decoration: underline;
}
/* Footer must bleed edge-to-edge and avoid margin collapse */
.tm-footer {
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  display: block;
  overflow: hidden; /* prevents child margins creating a white bar */
}
.tm-footer p {
  margin-bottom: 0;
} /* no collapsing bottom margin */
.tm-footer .container-fluid {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* If the footer ever ends up inside a centered container, force full bleed */
.tm-footer.isolated {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
/* Centered, slightly larger copyright */
.tm-copy {
  font-size: 1.05rem; /* bump size */
  letter-spacing: 0.2px;
  color: #e9ecef;
  padding-top: 0.5rem;
}
/* --- Sticky footer that always reaches the bottom, no white bar --- */
html {
  height: 100%;
  background: #000;
} /* if anything peeks beyond body, it’s black */
body {
  min-height: 100vh; /* body at least full viewport */
  display: flex;
  flex-direction: column;
  background: var(--tm-bg); /* your off-white */
  margin: 0;
}
main {
  flex: 1 0 auto;
} /* push footer down */
.tm-footer {
  margin-top: 0;
  position: relative;
  z-index: 1;
}

/* belt-and-suspenders: kill stray bottom spacing on last section */
main > section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}