/* Design tweaks Jason asked for after launch (24 Oct 2026). Loaded after the theme CSS by mu-plugins/wyld-tweaks.php. */

/* Field Reports hero: eagle moved up 20% and left 30% of its frame; the photo's edges fade so no hard line shows */
.mk img[src*="59345d0f5008664e2e45da80ea5eac7f"]{
  transform:translate(-30%,-20%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%,#000 80%,transparent 100%),linear-gradient(180deg,#000 0%,#000 75%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 40%,#000 80%,transparent 100%),linear-gradient(180deg,#000 0%,#000 75%,transparent 100%)!important;
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* Wyld Chart: the MediaWyld compass in the centre of the ring, 200% larger (3x), still centred */
.mk svg image[href*="compass-pale"]{transform-box:fill-box;transform-origin:center;transform:scale(3)}

/* Home hero only: the large compass moved 30% of its own width to the right (still vertically centred) */
.page-home .mk .mk-instrument{transform:translate(22%,calc(-50% - 36px))}

/* The six wildlife photos: dark-blue frame, a thin cyan chart line just outside it, a deep blue lift shadow,
   and a cool survey-chart grade that clears to full colour on hover */
body .mk img[src*="/wyld-assets/img/p/"][style*="height:230px"]{
  border:2px solid #0a2d6e!important;
  box-shadow:0 0 0 1px rgba(25,195,230,.45),0 14px 28px -10px rgba(8,40,96,.55);
  filter:saturate(.88) contrast(1.06) brightness(.97) hue-rotate(-4deg);
  transition:filter .35s ease,box-shadow .35s ease}
body .mk img[src*="/wyld-assets/img/p/"][style*="height:230px"]:hover{
  filter:none;
  box-shadow:0 0 0 1px #19c3e6,0 18px 34px -10px rgba(25,195,230,.45)}
@media (prefers-reduced-motion:reduce){body .mk img[src*="/wyld-assets/img/p/"][style*="height:230px"]{transition:none}}

/* Business pages built as stacked full-width sections (Brokerages, What we do, the AI answers guide):
   keep the backgrounds full width but hold the content on the same frame as the header and every other page */
@media (min-width:901px){
  body .mk > div[style^="position:relative"] > div[style*="padding:"]:not(.mk-band){
    padding-left:max(56px,calc((100% - 1328px)/2))!important;
    padding-right:max(56px,calc((100% - 1328px)/2))!important}
}

/* Buttons: every word capitalised (Get My Quote). The menu bar's own labels keep their wording. */
.mk-pill,.btn,.hbtn,button,input[type="submit"],.q-form .q-go{text-transform:capitalize!important}
.site-head button,.mnav button{text-transform:none!important}

/* Industry landing pages: cyan bullet markers on the dark long-form band */
.ind .bl li:before{border-color:#19c3e6!important}