/* Established site styles consolidated from Additional CSS, 2026-09-10.
 * Preserve existing appearance; future releases must retain this stylesheet.
 */
.hero__title { font-size:clamp(34px,3.8vw,10px); }
@media(max-width:760px) { .hero__title { font-size:30px; } }
@media(max-width:390px) { .hero__title { font-size:27px; } }
.hero__desc { max-width:250px; font-size:9px; }
.hero__card { min-height:400px !important; }
.hero__media { background-position:20% center !important; }

/* Existing service pages: retain one visible main heading. */
.post-11 .tdv6-head-copy > h2,
.post-13 .religion-form-wrap > h2,
.post-14 .religion-form-wrap > h2,
.post-15 .religion-contact-box > h2 { display:none; }
pre:has(.tdv6), code:has(.tdv6) {
  white-space:normal; font:inherit; background:transparent;
  border:0; padding:0; margin:0; overflow:visible;
}
code:has(.tdv6) { display:block; }
.tdv6 { white-space:normal; }
.tdv6 .tdv6-note {
  box-sizing:border-box; display:block; width:100%; max-width:100%;
  min-width:0; height:auto; border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; text-align:start; line-height:1.9;
}
.tdv6 .tdv6-note, .tdv6 .tdv6-note * {
  white-space:normal !important; overflow-wrap:anywhere !important;
  word-break:normal;
}
.tdv6 .tdv6-note > strong { display:block; margin-bottom:6px; }

/* Mobile site header: red background, white title and menu bars. */
@media(max-width:760px) {
  #masthead.site-header {
    background:var(--puji-red,#931714);
    border-bottom-color:var(--puji-red,#931714);
  }
  #masthead .site-title, #masthead .site-title a,
  #masthead .site-title a:hover, #masthead .site-title a:focus,
  #masthead .menu-toggle { color:#fff; }
  #masthead .menu-toggle__bars {
    background:currentColor;
    box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor;
  }
  #masthead .menu-toggle:focus-visible,
  #masthead .site-title a:focus-visible {
    outline:2px solid #fff; outline-offset:4px;
  }
}

/* Desktop hero artwork: move 200px right from the established 20% position. */
@media(min-width:761px) {
  .hero .hero__card .hero__media {
    background-position:calc(20% + 200px) center !important;
    background-repeat:no-repeat;
  }
}

/* Blend the shifted artwork's leading edge into the white text area. */
@media(min-width:761px) {
  .hero .hero__card .hero__media::after {
    background:linear-gradient(90deg,#fff 0px,#fff 200px,rgba(255,255,255,.94) 30%,rgba(255,255,255,.48) 48%,rgba(255,255,255,.03) 72%);
  }
}