/* v180 — requested services-page polish. Strong final overrides only. */

/* ---------------- Apps: centered title + route + dark map ---------------- */
@media (min-width:1101px){
  body.tt-apps-v180 .tt-apps-v173-hero{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:"intro intro" "selectors art"!important;
    column-gap:18px!important;
    row-gap:14px!important;
  }
  body.tt-apps-v180 .tt-apps-v179-intro{
    grid-area:intro!important;
    width:100%!important;
    max-width:1040px!important;
    justify-self:center!important;
    text-align:center!important;
    padding:0 16px 4px!important;
    margin:0 auto!important;
  }
  body.tt-apps-v180 .tt-apps-v179-intro .tt-apps-v173-eyebrow,
  body.tt-apps-v180 .tt-apps-v179-intro h1,
  body.tt-apps-v180 .tt-apps-v179-intro .tt-apps-v173-copy{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body.tt-apps-v180 .tt-apps-v179-intro h1{
    max-width:980px!important;
    font-size:clamp(34px,3vw,48px)!important;
    line-height:1.02!important;
    margin-bottom:9px!important;
  }
  body.tt-apps-v180 .tt-apps-v179-intro h1 span{
    display:block!important;
    white-space:nowrap!important;
  }
  body.tt-apps-v180 .tt-apps-v179-intro .tt-apps-v173-copy{
    max-width:760px!important;
  }

  body.tt-apps-v180 .tt-apps-v179-selectors{grid-area:selectors!important}
  body.tt-apps-v180 .tt-apps-v173-art{
    grid-area:art!important;
    align-self:stretch!important;
    min-height:300px!important;
    background-size:contain!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
}

/* Route is guaranteed to sit immediately over the map. */
body.tt-apps-v180 .tt-apps-v173-map-wrap{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:8px!important;
}
body.tt-apps-v180 .tt-apps-v173-route{
  display:flex!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  min-height:40px!important;
  height:40px!important;
  align-items:center!important;
  justify-content:center!important;
  visibility:visible!important;
  opacity:1!important;
  z-index:4!important;
  margin:0!important;
}
body.tt-apps-v180 .tt-apps-v173-map{
  display:block!important;
  overflow:hidden!important;
  background:#06101a!important;
}
body.tt-apps-v180 .tt-apps-v173-map iframe{
  display:block!important;
  width:100%!important;
  height:100%!important;
  /* Force a dark/night presentation for the embedded map without changing map behavior. */
  filter:invert(.88) hue-rotate(178deg) saturate(.75) brightness(.72) contrast(1.08)!important;
}

/* Mobile apps: no decorative hero art needed; keep content compact and readable. */
@media (max-width:1100px){
  body.tt-apps-v180 .tt-apps-v179-intro{
    text-align:center!important;
    padding:4px 10px 10px!important;
  }
  body.tt-apps-v180 .tt-apps-v179-intro h1,
  body.tt-apps-v180 .tt-apps-v179-intro .tt-apps-v173-copy,
  body.tt-apps-v180 .tt-apps-v173-eyebrow{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
  body.tt-apps-v180 .tt-apps-v179-intro h1 span{display:block!important}
  body.tt-apps-v180 .tt-apps-v173-art{display:none!important}
  body.tt-apps-v180 .tt-apps-v173-hero{display:block!important}
}

/* ---------------- Stage 1: same upper design logic as Apps ---------------- */
body.tt-stage-v180 .techtrim-hero.tt-v77-hero{display:none!important}
body.tt-stage-v180 .tt-stage-v180-top{
  padding:16px 0 14px!important;
  background:#02070d!important;
}
body.tt-stage-v180 .tt-stage-v180-top .stage-top-grid{
  width:min(1420px,calc(100% - 32px))!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:18px!important;
  box-sizing:border-box!important;
  background:#030911!important;
  border:1px solid rgba(44,139,205,.2)!important;
  border-radius:16px!important;
}
body.tt-stage-v180 .tt-stage-v180-intro{
  text-align:center!important;
}
body.tt-stage-v180 .tt-stage-v180-intro .eyebrow,
body.tt-stage-v180 .tt-stage-v180-intro h1,
body.tt-stage-v180 .tt-stage-v180-intro .lead{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.tt-stage-v180 .tt-stage-v180-intro h1 span{display:block!important;color:#159cff!important}
body.tt-stage-v180 .tt-stage-v180-intro .lead{max-width:760px!important}
body.tt-stage-v180 .tt-stage-v180-select-title{
  color:#159cff!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
  font-size:12px!important;
  margin:0 0 9px!important;
}
body.tt-stage-v180 .stage-top-selector{
  min-width:0!important;
  background:#040b12!important;
  border:1px solid rgba(44,139,205,.22)!important;
  border-radius:13px!important;
  padding:12px!important;
  box-sizing:border-box!important;
}
body.tt-stage-v180 .stage-brand-panel{
  margin-top:10px!important;
  background:#040b12!important;
  border:1px solid rgba(44,139,205,.16)!important;
  border-radius:12px!important;
  padding:10px!important;
}
body.tt-stage-v180 .stage-brand-copy{display:none!important}
body.tt-stage-v180 .stage-brand-grid,
body.tt-stage-v180 .stage-model-list{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;
}
body.tt-stage-v180 .stage-brand-grid .stage-brand,
body.tt-stage-v180 .stage-model-button{
  min-height:36px!important;
  height:36px!important;
  padding:0 7px!important;
  border-radius:8px!important;
  font-size:10.5px!important;
}
body.tt-stage-v180 .tt-stage-v180-art{
  border:1px solid rgba(44,139,205,.2)!important;
  border-radius:12px!important;
  overflow:hidden!important;
  min-height:300px!important;
  background:#02070d url('techtrim-apps-piter-hero-v173.webp') center center/contain no-repeat!important;
}

@media (min-width:1101px){
  body.tt-stage-v180 .tt-stage-v180-top .stage-top-grid{
    display:grid!important;
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:"intro intro" "selector art"!important;
    column-gap:18px!important;
    row-gap:14px!important;
    align-items:stretch!important;
  }
  body.tt-stage-v180 .tt-stage-v180-intro{grid-area:intro!important;padding:0 16px 4px!important}
  body.tt-stage-v180 .tt-stage-v180-intro h1{
    max-width:980px!important;
    font-size:clamp(34px,3vw,48px)!important;
    line-height:1.02!important;
    margin-bottom:9px!important;
  }
  body.tt-stage-v180 .stage-top-selector{grid-area:selector!important}
  body.tt-stage-v180 .tt-stage-v180-art{grid-area:art!important;align-self:stretch!important}
}

@media (max-width:1100px){
  body.tt-stage-v180 .tt-stage-v180-top .stage-top-grid{
    display:block!important;
    width:min(100% - 20px,760px)!important;
    padding:12px!important;
  }
  body.tt-stage-v180 .tt-stage-v180-intro{padding:4px 8px 10px!important}
  body.tt-stage-v180 .tt-stage-v180-intro h1{font-size:clamp(28px,8vw,38px)!important;line-height:1.02!important}
  body.tt-stage-v180 .tt-stage-v180-art{display:none!important}
  body.tt-stage-v180 .stage-brand-grid,
  body.tt-stage-v180 .stage-model-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.tt-stage-v180 .stage-brand-grid .stage-brand,
  body.tt-stage-v180 .stage-model-button{min-height:42px!important;height:auto!important;font-size:12px!important}
}