/* TengenJP V7.6.3 — exclusively for services.html and news.html.
   Existing home, about and contact content/styles are not changed. */

/* 1) Remove the hard left image boundary on the Services hero.
   Mask's start is completely transparent and transitions gradually rightward. */
.hero-services .hero-visual {
  inset: 0;
  background-image: url('service-hero.webp');
  background-position: 64% 48%;
  background-size: cover;
  opacity: .83;
  filter: saturate(.84) contrast(.97) brightness(1.04);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 17%, rgba(0,0,0,.12) 29%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.84) 63%, #000 80%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 17%, rgba(0,0,0,.12) 29%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.84) 63%, #000 80%);
}
.hero-services .hero-gradient {
  background: linear-gradient(90deg, #faf9f5 0%, rgba(250,249,245,.98) 20%, rgba(250,249,245,.89) 35%, rgba(250,249,245,.48) 56%, rgba(250,249,245,.10) 82%);
}

/* 2) Small, tasteful 3-card hover motion; touch and reduced motion remain steady. */
.scenario-grid article {
  position: relative;
  transform: translateZ(0);
  transition: transform .30s ease-out, box-shadow .30s ease-out, border-color .30s ease-out;
  will-change: auto;
}
@media (hover:hover) and (pointer:fine) {
  .scenario-grid article:hover {
    z-index: 2;
    transform: scale(1.025);
    box-shadow: 0 16px 38px rgba(42,38,34,.09);
    border-color: rgba(183,25,32,.22);
  }
}
@media (prefers-reduced-motion:reduce) {
  .scenario-grid article {transition:none !important;transform:none !important;}
}

/* 3) News header: hand-picked photo, matching the seamless fade used on Home. */
.hero-news .hero-visual {
  inset:0;
  background-image:url('news-hero-v763.webp');
  background-size:cover;
  background-position:58% center;
  filter:saturate(.76) brightness(1.04) contrast(.96);
  opacity:.77;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 14%,rgba(0,0,0,.16) 27%,rgba(0,0,0,.62) 51%,#000 77%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 14%,rgba(0,0,0,.16) 27%,rgba(0,0,0,.62) 51%,#000 77%);
}
.hero-news .hero-gradient {
  background:linear-gradient(90deg,#faf9f5 0%,rgba(250,249,245,.98) 23%,rgba(250,249,245,.87) 41%,rgba(250,249,245,.37) 65%,rgba(250,249,245,.07) 95%);
}

/* Corporate renewal photo is an actual preview image in addition to its modal cover. */
.renewal-preview-visual {margin:36px 0 28px;overflow:hidden;aspect-ratio: 2.15 / 1;background:#eae9e4;}
.renewal-preview-visual img {display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:saturate(.75) contrast(.97);}

/* Common restrained treatment — keep photos recognizable and crisp. */
.featured-image img {filter:saturate(.82) contrast(.98);}
.mini-story-thumb img {filter:saturate(.81) contrast(.98);}
.news-thumb img {filter:saturate(.81) contrast(.98);}
.modal-hero-photo img {filter:saturate(.84) contrast(.98);}
.news-feature-strip:before {
  background-image:url('news-wide-v763.webp');
  background-position:55% center;
  filter:saturate(.62) contrast(.96);
  opacity:.48;
}

@media (max-width:980px) {
  .hero-services .hero-visual {inset:0;background-position:60% 50%;opacity:.70;}
  .hero-news .hero-visual {inset:0;background-position:65% center;opacity:.70;}
}
@media (max-width:650px) {
  .hero-services .hero-visual {
    inset:0;
    background-position:59% center;
    opacity:.52;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 19%,rgba(0,0,0,.20) 47%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0%,transparent 19%,rgba(0,0,0,.20) 47%,#000 100%);
  }
  .hero-services .hero-gradient {
    background:linear-gradient(180deg,#faf9f5 0%,rgba(250,249,245,.98) 28%,rgba(250,249,245,.80) 53%,rgba(250,249,245,.25) 100%);
  }
  .hero-news .hero-visual {
    inset:0;background-position:63% center;opacity:.51;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.10) 25%,rgba(0,0,0,.55) 55%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.10) 25%,rgba(0,0,0,.55) 55%,#000 100%);
  }
  .hero-news .hero-gradient {
    background:linear-gradient(180deg,#faf9f5 0%,rgba(250,249,245,.97) 31%,rgba(250,249,245,.75) 56%,rgba(250,249,245,.22) 100%);
  }
  .renewal-preview-visual {aspect-ratio:1.85/1;margin:30px 0 25px;}
}