/* assets/css/bootstrap-overrides.css — minimal, mobile-first, no gaps */

/* Global */
:root{
  --tmc-navy:#0a1637;
  --tmc-navy-900:#11224b;
  --tmc-gold:#E6B24E;
  --tmc-gold-1:#e5b04a;
  --tmc-gold-2:#b8872f;
  --bs-font-sans-serif: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  
  font-optical-sizing: auto; /* works with the variable font */ 
}

.text-tmc-orange{ color:#F26A22 !important; }


/* === Gold slab utility (uses existing brand variables) === */
.bg-tmc-gold {
    background: linear-gradient(180deg,var(--tmc-gold-1),var(--tmc-gold-2));
    color: #fff; /* default text color on gold */
}

    /* Keep links and subtle text readable on gold */
    .bg-tmc-gold a {
        color: #fff;
        text-decoration: underline;
    }

    .bg-tmc-gold .text-muted {
        color: rgba(255,255,255,.85) !important;
    }


/* ===================== Global lead-* helpers (non-breaking) ===================== */
.lead-1 { font-size: 1.25rem; line-height: 1.8; }     /* ~20px */
.lead-2 { font-size: 1.125rem; line-height: 1.8; }    /* ~18px — matches your slab sizing */
.lead-3 { font-size: 1.0625rem; line-height: 1.75; }  /* ~17px */
.lead-4 { font-size: 1rem; line-height: 1.7; }        /* base size with nicer leading */


.hide {
    display: none;
}


.form-control.is-invalid {
    border-color: #F26A22; /* your tmc orange-red */
    box-shadow: 0 0 0 0.2rem rgba(242,106,34,.25);
}


.home-final{min-width:0}

/* Header */
.logo{max-height:48px;height:auto}


/* HERO (no variables, direct background) */
.tmc-hero{
  position: relative;
  display: flow-root;                    /* prevents margin-collapsing */
  background: url('../img/hero.jpg') center / cover no-repeat;
  margin: 0;
  padding: 24px 0 36px;
}
@media (min-width:992px){ .tmc-hero{ padding: 0 80px 72px; } }
.tmc-hero-mark{ max-width: min(70vw, 420px); height: auto; }

/* Layer 2: soft light wash to increase legibility (white, like the reference) */
.tmc-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.60) 0%,
    rgba(255,255,255,.64) 35%,
    rgba(255,255,255,.70) 100%
  );
  z-index:0;
  pointer-events:none;
}

/* Keep hero content above overlays and crisp */
.tmc-hero > *{
  position: relative;
  z-index: 1;
}

/* Hero overlay styles */
.tmc-hero__caption {
    /* keep caption inside rounded container and off the very edge */
    max-width: 95%;
}

.tmc-hero__title {
    /* responsive, readable size across breakpoints */
    font-size: clamp(1.125rem, 1.5vw + 0.75rem, 2.75rem);
    line-height: 1.1;
    /* keep white text readable on any photo */
    text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.35);
    /* optional subtle backdrop for extreme cases; comment out if not desired */
    /* background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); 
     padding: .25rem .5rem; 
     border-radius: .5rem; */
}

/* Ensure the hero wrapper always clips to rounded corners */
.tmc-hero {
    overflow: hidden;
}

.tmc-submenu-photo .tmc-hero__caption {
    z-index: 1;
    max-width: 95%;
}



/* ACCELERATE SECTION (navy overlay + image, no variables) */
.tmc-accelerate{
  position: relative;
  display: flow-root;
  background:
    linear-gradient(rgba(10,22,55,.82), rgba(10,22,55,.82)),
    url('../img/accelerate-bg.jpg') center / cover no-repeat;
  margin: 0;
  padding: 40px 0;
}
@media (min-width:992px){ .tmc-accelerate{ padding: 100px 0; } }



/* Gold CTA — consistent grey hover across all buttons */
.tmc-btn-gold{
  /* base + interactive text colors via Bootstrap button vars */
  --bs-btn-color: #fff;
  --bs-btn-hover-color: rgba(255,255,255,.75);   /* soft grey on hover */
  --bs-btn-active-color: rgba(255,255,255,.75);

  color: var(--bs-btn-color);
  background: linear-gradient(180deg,var(--tmc-gold-1),var(--tmc-gold-2));
  border: none;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  transition: color .15s ease-in-out;
}
.tmc-btn-gold:hover,
.tmc-btn-gold:focus{
  color: var(--bs-btn-hover-color);
  text-decoration: none;
}

/* Tiles */
.tmc-tile{ border-radius:1rem; background:rgba(12,33,70,.85); /* existing shade OK */ }
.tmc-tile-body{ 
  padding:1.25rem 1.25rem; 
  /* 22px icon + .me-4 (1.5rem) = exact left indent under the title text */
  --icon-indent: calc(32px + 1.5rem);
  /* vertical gap used both Title→Sub and Sub→Arrow */
  --tile-gap: .375rem;
}
.tmc-tile-title{
  display:flex; align-items:center;
  color:#fff; text-transform:uppercase; font-weight:800; letter-spacing:.02em;
  margin: 0 0 var(--tile-gap) 0;   /* first gap */
}
.tmc-tile-sub{ 
  color:rgba(255,255,255,.9); 
  font-size:1.0625rem; 
  padding-left: var(--icon-indent);
  margin: 0;                       /* no extra gap */  
}
.tmc-tile-sep{
  height:4px; background:var(--tmc-gold); border-radius:2px; margin-top:.75rem;
}
.tmc-tile-cta{
  padding-top:.75rem; color:#fff; opacity:.9;
  padding-left: var(--icon-indent);
  margin: var(--tile-gap) 0 0 0;   /* same gap as above */
  line-height: 1;
  font-size: 1.25rem;
  /* hard reset in case an older rule remains */
  padding-top: 0 !important; 
}
.tmc-tile-sub,
.tmc-tile-cta{
  padding-left: var(--icon-indent);
}


/* Utilities */
.fw-extrabold{font-weight:800}


.tmc-icon{
  width:32px; height:32px; display:inline-block; vertical-align:middle; flex:0 0 32px;
  transform:scale(var(--icon-scale,1)); transform-origin:left center;
}


/* ======================= TOOLS v2 (self-contained) ======================= */
.tmc-tools2{ --band-w:14px; margin:0; }
.tmc-tools2 .row + .row{ margin-top:0; }        /* no gap between rows */
.tmc-tools2 .img-col{ min-height:320px; }
@media (min-width:992px){ .tmc-tools2 .img-col{ min-height:520px; } }
.tmc-tools2 .img-col > img{ display:block; }

.tmc-tools2 .slab{
  position:relative;
  display:flex;
  align-items:center;
  background:#fff;
}
.tmc-tools2 .slab .lead-2{ font-size:1.125rem; line-height:1.7; }

.tmc-tools2 .slab--navy{
  background:var(--tmc-navy);
  color:#fff;
  /* OUTER-LEFT gold band (top section) */
}
.tmc-tools2 .slab--navy::before{
  content:""; position:absolute; top:0; bottom:0; left:0;
  width:var(--band-w); background:var(--tmc-gold);
}
.tmc-tools2 .slab--navy .lead-2{ color:rgba(255,255,255,.9); }

/* CENTER-SEAM gold band (bottom section): sits on the left edge of the white slab,
   overlapping half into the adjacent image for a true seam effect. */
.tmc-tools2 .slab--white{ background:#fff; }
.tmc-tools2 .slab--white::before{
  content:""; position:absolute; top:0; bottom:0; left:0;
  width:var(--band-w); background:var(--tmc-gold); transform:translateX(-50%);
}




/* =============================== FOOTER =============================== */
.tmc-footer{
  background: var(--tmc-navy-900);
  color: rgba(255,255,255,.9);
  padding: 64px 0 40px;
}
.tmc-footer-logo{ max-height:64px; height:auto; }
.tmc-footer .footer-title{
  color:#fff;
  font-weight:600;
  margin-bottom:1rem;
}
.tmc-footer .nav-link{
  color: rgba(255,255,255,.85);
  text-decoration: none;
}
.tmc-footer .nav-link:hover{
  color: var(--tmc-gold);
}
.tmc-footer-copy{ padding-top: 28px; }



/* Tiles — center the left icon across title + sub + arrow (whole card height) */
.tmc-tile-body{ 
  position: relative;                 /* anchor for absolute icon */
}

.tmc-tile-title{
  padding-left: var(--icon-indent);   /* keep text aligned with sub/cta */
}

.tmc-icon{
  position: absolute;                 /* pull out of title flow */
  left: 1.25rem;                      /* matches .tmc-tile-body horizontal padding */
  top: 40%;                           /* vertical center of the whole tile body */
  transform: translateY(-50%) scale(var(--icon-scale,1));
  transform-origin: left center;
}



/* TOOLS v2: offset width (handled by .container) + gentle overlap upward */
.tmc-tools2{ position: relative; z-index: 2; }          /* sit above the section above */
.tmc-tools2 .tmc-tools2-inner{ max-width: 1140px; }     /* optional: cap width a touch */

@media (min-width: 992px){
  .tmc-tools2{ margin-top: -56px; }                     /* extend up onto previous section */
}
/* Adjust -56px as desired (-40px to -80px range works well) */


/* TOOLS v2 width cap — make it a bit wider on large screens */
.tmc-tools2 .tmc-tools2-inner{ max-width: 1320px; } /* was 1140px */




/* ========================= SUBMENU (internal page header) ========================= */
.tmc-submenu{
  background: var(--tmc-navy-900);
  color: rgba(255,255,255,.95);
  padding: 48px 0 88px;               /* extra bottom space for the overlap */
  position: relative;
}
@media (min-width: 992px){
  .tmc-submenu{ padding: 72px 0 120px; }
}
.tmc-submenu-title{
  color:#fff;
  font-weight:800;                     /* matches fw-extrabold weight */
  letter-spacing:.01em;
}
.tmc-submenu-text{
  color: rgba(255,255,255,.9);
  font-size: 1.125rem;                 /* same scale as lead-2 used elsewhere */
  line-height: 1.7;
}

/* Overlapping/indented photo: full-bleed on mobile, indented + overlaps on desktop */
.tmc-submenu-photo{
  position: relative;
  z-index: 2;                          /* sits visually above the band below */
  margin-top: 0;                       /* normal stack on mobile */
  /* default desktop photo height (adjust as needed) */
  --submenu-photo-h: clamp(240px, 34vh, 380px);
}
@media (min-width: 992px){
  .tmc-submenu-photo{ margin-top: -72px; }   /* pull upward into the navy band */
}
.tmc-submenu-photo-inner{ margin: 0; }       /* full-bleed on mobile */
@media (min-width: 992px){
  .tmc-submenu-photo-inner{
    /* create the “indented” look on desktop */
    margin-left: clamp(24px, 5vw, 56px);
    margin-right: clamp(24px, 5vw, 56px);
  }
  /* crop the image to a shorter height on desktop while keeping cover fit */
  .tmc-submenu-photo .img-frame{ height: var(--submenu-photo-h); }
  .tmc-submenu-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;           /* tweak if you want a different focal point */
  }
}

.tmc-submenu-photo .img-frame{
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

.tmc-submenu-photo .img-frame > img {
    display: block;
}


/* Optional: black & white utility for the photo shown in the comp */
.tmc-img-bw{ filter: grayscale(100%); }



/* ================== SUBMENU PHOTO — Height & Crop Tuning Utilities ================== */
/* Add this once. Then adjust per page with a class OR an inline CSS variable.        */
/* These do NOT remove or change your existing rules; they only override when used.   */

/* 1) Fixed height presets (desktop+ only) */
@media (min-width: 992px){
  .tmc-submenu-photo--h220{ --submenu-photo-h: 220px; }
  .tmc-submenu-photo--h260{ --submenu-photo-h: 260px; }
  .tmc-submenu-photo--h300{ --submenu-photo-h: 300px; }
  .tmc-submenu-photo--h340{ --submenu-photo-h: 340px; }
  .tmc-submenu-photo--h380{ --submenu-photo-h: 380px; }
}

/* 2) Overlap amount presets (how far the photo pulls up into the navy band) */
@media (min-width: 992px){
  .tmc-submenu-photo--overlap-48{ margin-top: -48px !important; }
  .tmc-submenu-photo--overlap-64{ margin-top: -64px !important; }
  .tmc-submenu-photo--overlap-72{ margin-top: -72px !important; } /* current default */
  .tmc-submenu-photo--overlap-96{ margin-top: -96px !important; }
}

/* 3) Focal point helpers (control which part of the image stays visible when cropped) */
@media (min-width: 992px){
  .tmc-submenu-photo--focus-top    img{ object-position: center top; }
  .tmc-submenu-photo--focus-bottom img{ object-position: center bottom; }
  .tmc-submenu-photo--focus-middle img { object-position: center center; width: 100%; height: 180%; }
  .tmc-submenu-photo--focus-left   img{ object-position: left center; }
  .tmc-submenu-photo--focus-right  img{ object-position: right center; }
}





/* ============================== WHAT WE DO ============================== */
/* Gold gradient band with center highlight using existing brand golds */
.tmc-wwd{
  background: var(--tmc-gold);
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, var(--tmc-gold-2) 0%, var(--tmc-gold-1) 50%, var(--tmc-gold-2) 100%);
  color: #fff;
  padding: 64px 0;
}
@media (min-width: 992px){
  .tmc-wwd{ padding: 88px 0; }
}

.tmc-wwd-title{
  color:#fff;
  font-weight:800;               /* align with fw-extrabold scale */
  letter-spacing:.01em;
}

.tmc-wwd-item{ text-align:center; padding: 12px 8px; }

.tmc-wwd-icon{
  width: 56px; height: 56px; object-fit: contain; display:block; margin: 0 auto 16px;
  /* force white look for outline/solid icons without editing source files */
  filter: brightness(0) invert(1);
  opacity: .95;
}

.tmc-wwd-h{
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .01em;
  color:#fff;
  margin-bottom: .25rem;
  font-size: 0.9375rem;
}

.tmc-wwd-sub{
  color: rgba(255,255,255,.9);
  margin-bottom: .5rem;
}

.tmc-wwd-arrow{
  font-size: 1.5rem;
  line-height: 1;
  color:#fff;
  opacity:.9;
}



/* ============================== SPLIT BAND (2 rows) ============================== */
/* Full-width alternating image/text rows that stack on mobile using standard grid */
.tmc-split{ margin:0; }

.tmc-split .media{
  min-height: 320px;                 /* mobile height */
  position: relative;
}
@media (min-width:992px){
  .tmc-split .media{ min-height: 520px; }   /* desktop height */
}
.tmc-split .media > img{
  width:100%; height:100%;
  object-fit: cover; display:block;
}

.tmc-split .copy{
  background: #f6f7f9;               /* light panel similar to the comp */
  height: 100%;
  display: flex;
  align-items: center;
}
.tmc-split .copy-inner{
  padding: 24px;
}
@media (min-width:992px){
  .tmc-split .copy-inner{ padding: 56px; }
}

.tmc-split-title{
  color: var(--tmc-navy-900);
  font-weight: 800;                   /* matches fw-extrabold */
  letter-spacing: .01em;
}



/* ============================== TEAM GRID ============================== */
.tmc-team{ padding:48px 0; }
@media (min-width:992px){ .tmc-team{ padding:72px 0; } }

/* Full-bleed width on desktop with gentle gutters */
.tmc-team .container{
  max-width:100%;
  padding-left:1rem;
  padding-right:1rem;
}
@media (min-width:1200px){
  .tmc-team .container{
    padding-left:2rem;
    padding-right:2rem;
  }
}

.tmc-team-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:.5rem;
  background:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.03);
  height:100%;
}
.tmc-team-card .tmc-team-body{ padding:1rem; }
@media (min-width:992px){ .tmc-team-card .tmc-team-body{ padding:1.25rem; } }

/* Ensure right column can shrink/wrap inside the card */
.tmc-team-card .col-md-8{ min-width:0; }

.tmc-team-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .25rem;
    min-height: 200px;
}

@media (min-width:992px) {
    .tmc-team-photo {
        min-height: 220px;
    }
}
}

.tmc-team-name{
  color: var(--tmc-navy-900);
  font-weight:800;
  letter-spacing:.01em;
  margin-bottom:.125rem;
}
.tmc-team-role{
  color:#6c757d;
  margin-bottom:.5rem;
}

/* Contact details: smaller type + robust wrapping for long emails/URLs/phones */
.tmc-team-list{ list-style:none; margin:0; padding:0; font-size:.9375rem; line-height:1.6; }
.tmc-team-list li{
  display:flex; align-items:baseline; gap:.5rem;
  padding:.25rem 0;
}
.tmc-team-list .bi{ opacity:.9; }
.tmc-team-list li span{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.tmc-team-bio-row{
  border-top:1px solid rgba(0,0,0,.12);
  margin-top:.5rem; padding-top:.5rem;
}
.tmc-team-bio{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; font-weight:600;
}
.tmc-team-bio:hover{ text-decoration:underline; }



#nmtc-diagram .node { cursor: help; }
#nmtc-diagram g:has(> title) { cursor: help; }






/* === PERSON BIO PAGE (COMPLETE REPLACEMENT FOR THIS SECTION ONLY) =============== */
/* Portrait sizing for bio page (tall crop on large screens, fully fluid below) */
.tmc-bio .tmc-bio-photo {
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
}

@media (min-width:992px) {
    .tmc-bio .tmc-bio-photo {
        height: 520px; /* consistent tall crop on lg+ */
        max-height: none;
    }
}

/* Bio card + speech-notch arrow */
.tmc-bio .tmc-bio-card {
    position: relative; /* anchor for the notch */
}

@media (min-width:992px) {
    .tmc-bio .tmc-bio-card::before {
        content: "";
        position: absolute;
        left: -12px; /* sits outside card edge, pointing left */
        top: 50%; /* ALWAYS vertically centered to the card */
        transform: translateY(-50%) rotate(45deg);
        width: 24px;
        height: 24px;
        background: inherit; /* same subtle grey as the card */
        border-radius: .5rem 0 0 0;
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    }
}

/* Round social icon buttons to consistent size (used for LinkedIn button) */
.tmc-bio .tmc-bio-social {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    line-height: 1; /* make the icon truly centered */
}





/* =========================================================
   PROJECT LIST — CLEAN, MINIMAL CSS (Bootstrap utilities first)
   Behavior:
   - Image visible by default; slight zoom on hover
   - Title always visible at the top
   - Summary + button fade in on hover
   - Spacing below title handled by a single CSS variable
========================================================= */

/* Scaffold */
.proj-overlay-parent {
    position: relative;
}

/* Image zoom (no blur) */
.proj-zoom img {
    transition: transform .35s ease;
    transform-origin: center;
}

.proj-overlay-parent:hover img {
    transform: scale(1.03);
}

/* Teal tint overlay (hidden until hover) */
.proj-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.proj-overlay--tint {
    background: rgba(0,87,98,.72);
}

.proj-overlay-parent:hover .proj-overlay {
    opacity: 1;
}

/* Title: always visible at top with subtle fade-to-transparent bg */
.proj-title {
    z-index: 3;
    pointer-events: none; /* allow button/link clicks beneath */
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
}

/* Hover content (summary + button) */
.proj-reveal {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: var(--proj-title-space, 7rem); /* single source of truth */
    gap: .75rem;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.proj-overlay-parent:hover .proj-reveal {
    opacity: 1;
    pointer-events: auto;
}

/* Avoid margin-collapsing inside reveal */
.proj-reveal > * {
    margin-top: 0;
}

.proj-reveal .mx-auto > * + * {
    margin-top: .75rem;
}

/* Tile height */
.proj-tile {
    min-height: 520px;
}

@media (max-width: 991.98px) {
    .proj-tile {
        min-height: 420px;
    }
}

/* Compact modifier (shorter tile) */
.proj-tile--compact {
    min-height: clamp(300px, 38vh, 420px);
}

/* Responsive title spacing (affects .proj-reveal padding-top) */
.proj-overlay-parent {
    --proj-title-space: 7rem;
}
/* default */
@media (min-width: 1400px) {
    .proj-overlay-parent {
        --proj-title-space: 8rem;
    }
}

@media (max-width: 991.98px) {
    .proj-overlay-parent {
        --proj-title-space: 9rem;
    }
}

@media (max-width: 575.98px) {
    .proj-overlay-parent {
        --proj-title-space: 10.5rem;
    }

    .proj-tile--compact {
        min-height: 420px;
    }
    /* ensure room for stacked content */
}


@media (min-width: 768px) and (max-width: 991.98px) {
    .proj-tile--compact {
        min-height: 520px;
    }
}


.hover-opacity-100:hover {
    opacity: 1 !important;
}

.transition {
    transition: opacity .35s ease-in-out;
}


.proj-overlay-parent:hover .proj-reveal {
    opacity: 1;
    pointer-events: auto;
}

.proj-reveal {
    opacity: 0;
    pointer-events: none;
}


@media (max-width: 575.98px) {
    .proj-reveal {
        padding-top: 3rem !important;
    }
}


@media (max-width: 400px) {
    .proj-reveal {
        padding-top: 3rem !important;
    }
}