/* ===== v6 overrides — smooth GPU hero cards, mobile parity, markets button ===== */

/* 1) Hero illustration cards: animate ONLY transform (compositor-driven, no layout
      thrash) exactly like the SVG panels behind them. Integer-pixel translate and no
      scale keeps every line of text perfectly sharp while it floats. */
.illo-card{
  will-change:transform!important;
  transform:translate3d(0,0,0);
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  margin-top:0!important;
  transition:box-shadow .35s cubic-bezier(.22,.61,.36,1)!important;
}
.illo-card span{transform:translateZ(0)}
@keyframes illoFloatSmooth{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
.illo-card-a,.illo-card-b{animation:illoFloatSmooth 6s ease-in-out infinite!important}
.illo-card-b{animation-delay:-3s!important}
.illo-card:hover{
  animation-play-state:paused!important;
  transform:translate3d(0,-6px,0);
  box-shadow:0 16px 30px rgba(19,36,40,.32);
}
@media (prefers-reduced-motion:reduce){
  .illo-card-a,.illo-card-b{animation:none!important;transform:none!important}
}

/* 2) Mobile: keep the exact desktop composition (cards floating over the graphic),
      just scaled proportionally instead of the old stacked mobile layout. */
@media (max-width:720px){
  .illo-stack{
    display:block!important;
    position:relative!important;
    max-width:640px!important;
    margin:0 auto!important;
  }
  .illo-stack .deal-illo{order:0!important;margin:0!important;width:100%!important;height:auto!important}
  .illo-card{
    position:absolute!important;
    box-sizing:border-box;
    width:calc(var(--illo-u) * 32.5)!important;
    min-height:calc(var(--illo-u) * 13)!important;
    padding:calc(var(--illo-u) * 1.4) calc(var(--illo-u) * 2.2)!important;
    border-left:none!important;
    border-radius:2px;
  }
  .illo-card:before{width:calc(var(--illo-u) * .62)!important}
  .illo-card-a{left:calc(var(--illo-u) * 7.14)!important;top:calc(var(--illo-u) * 57)!important}
  .illo-card-b{left:calc(var(--illo-u) * 60)!important;top:calc(var(--illo-u) * 10)!important}
  .illo-card-label{font-size:calc(var(--illo-u) * 1.5)!important;letter-spacing:calc(var(--illo-u) * .34)!important}
  .illo-card-title{font-size:calc(var(--illo-u) * 3.1)!important;margin-top:calc(var(--illo-u) * .75)!important}
  .illo-card-rule{width:calc(var(--illo-u) * 7.7)!important;margin:calc(var(--illo-u) * .75) 0!important}
  .illo-card-foot{font-size:calc(var(--illo-u) * 1.35)!important;letter-spacing:calc(var(--illo-u) * .24)!important}
  .hero-art{min-height:auto!important}
}

/* 3) "Our Markets" button: hover look becomes the default look. */
.btn-markets{
  background:var(--brass)!important;
  color:var(--teal-deep)!important;
  border:1.5px solid var(--brass)!important;
}
.btn-markets:hover,.btn-markets:focus-visible{
  background:var(--brass-light)!important;
  border-color:var(--brass-light)!important;
  color:var(--teal-deep)!important;
}

/* 4) Our Markets cards: identical vertical rhythm so the eyebrow, title, copy and the
      "See what we do here" footer line up across every card, whatever the copy length. */
.mk-index-body{display:flex!important;flex-direction:column!important;flex:1 1 auto!important}
.mk-index-card{display:flex!important;flex-direction:column!important}
.mk-index-card>img{flex:none!important}
.mk-index-body>.mk-eyebrow{min-height:1.2em}
.mk-index-body>h3{min-height:2.5em;display:flex;align-items:flex-start}
.mk-index-body>p{min-height:4.8em;margin-bottom:14px!important}
.mk-index-body>.mk-go{margin-top:auto!important}
@media (max-width:720px){
  .mk-index-body>h3,.mk-index-body>p,.mk-index-body>.mk-eyebrow{min-height:0}
}

/* Keep the injected mobile bar styled before route scripts run. */
header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:1100!important;
  background:rgba(237,227,208,.92)!important;
  border-bottom:1px solid rgba(32,24,17,.14)!important;
}
/* Dark mode: keep the pinned header dark so nav text (which switches to a
   light color in night mode) stays readable instead of sitting on the
   light cream background above. */
body.night header{
  background:rgba(10,20,28,.94)!important;
  border-bottom:1px solid rgba(242,206,133,.3)!important;
}
.page-scroll-wrap{padding-top:83px}
@media (max-width:900px){
  .page-scroll-wrap{padding-top:67px}
}
.mobile-offer-bar{
  display:none!important;
  box-sizing:border-box;
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:1000;
}
@media (max-width:900px){
  .mobile-offer-bar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    justify-items:stretch;
    min-height:72px!important;
    gap:12px;
    padding:8px 16px calc(8px + env(safe-area-inset-bottom))!important;
    background:var(--teal-deep,#092633);
    border-top:1px solid rgba(250,246,236,.24);
    box-shadow:0 -10px 24px rgba(0,0,0,.22);
    color:#201811!important;
    background:#f6f0e8!important;
  }
  .mobile-offer-phone,
  .mobile-offer-button{
    box-sizing:border-box;
    min-width:0;
    min-height:52px!important;
    font-family:var(--mono)!important;
    display:flex;
    align-items:center!important;
    justify-content:center!important;
  }
  .mobile-offer-phone{
    padding:0 14px;
    border:2px solid rgba(32,24,17,.22)!important;
    border-radius:18px;
    color:#201811!important;
    font-size:clamp(.88rem,2.8vw,1.06rem);
    font-weight:800;
    gap:8px;
    text-align:center;
  }
  .mobile-offer-phone span:last-child{white-space:nowrap}
  .mobile-offer-phone svg{width:14px;height:14px;flex:none}
  .mobile-offer-button{
    padding:0 18px!important;
    border:1px solid var(--brick-dark,#7a2e20)!important;
    border-radius:18px!important;
    background:#9c3e2c!important;
    color:#faf6ec!important;
    font-size:clamp(.82rem,2.8vw,1.05rem);
    font-weight:800;
    line-height:1.1;
    text-align:center;
    box-shadow:0 10px 20px -12px rgba(122,46,32,.9);
  }
  /* Dark mode: the bar above is hardcoded to light cream — give it the
     same dark navy treatment as the pinned header so the phone number
     and button stay readable at night. */
  body.night .mobile-offer-bar{
    background:#0a141c!important;
    color:#eaf0f6!important;
    border-top:1px solid rgba(242,206,133,.3);
    box-shadow:0 -10px 24px rgba(0,0,0,.4);
  }
  body.night .mobile-offer-phone{
    color:#eaf0f6!important;
    border:2px solid rgba(242,206,133,.35)!important;
  }
  body.night .mobile-offer-button{
    border-color:#f2ce85!important;
    color:#faf6ec!important;
  }
}
@media (max-width:420px){
  .mobile-offer-bar{gap:8px;padding-left:10px!important;padding-right:10px!important}
  .mobile-offer-phone,.mobile-offer-button{min-height:48px!important}
  .mobile-offer-phone{padding:0 8px;border-radius:14px;font-size:.76rem;gap:4px}
  .mobile-offer-button{padding:0 10px!important;border-radius:14px!important;font-size:.76rem}
}