.home-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f5f5ef;
  padding: 130px 0 150px;
}
.home-intro-scene { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.home-intro-scene::before,
.home-intro-scene::after { content: ""; position: absolute; top: 0; bottom: 0; width: 70%; background-size: cover; }
.home-intro-scene::before { left: 0; background-image: url('../../images/home-petaluma-river.jpg'); background-position: 35% center; }
.home-intro-scene::after { right: 0; background-image: url('../../images/home-petaluma-neighborhood.jpg'); background-position: center; -webkit-mask-image: linear-gradient(to right, transparent, #000 55%); mask-image: linear-gradient(to right, transparent, #000 55%); }
.home-intro::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,.88), rgba(255,255,255,.94) 32%, rgba(255,255,255,.89) 65%, rgba(255,255,255,.22)); }
.home-intro-logo { display: block; width: 60%; max-width: 680px; height: auto; margin: 0 auto 40px; }
.home-intro-title { font-family: 'Montserrat', sans-serif; font-size: clamp(26px, 3vw, 38px); font-weight: 500; text-align: center; line-height: 1.3; margin: 0 0 44px; color: #292725; }
.home-intro-copy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; max-width: 1080px; margin: 0 auto; }
.home-intro-copy h2 { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 600; margin: 0 0 14px; color: #59443a; }
.home-intro-copy p { font-size: 17px; line-height: 1.8; color: #333; margin: 0; }
@media (max-width: 767px) {
  .home-intro { padding: 100px 0 95px; }
  .home-intro-logo { width: 90%; margin-bottom: 28px; }
  .home-intro-title { font-size: 26px; margin-bottom: 32px; }
  .home-intro-copy { grid-template-columns: 1fr; gap: 26px; padding: 0 12px; }
  .home-intro-copy h2 { margin-bottom: 8px; }
  .home-intro-copy p { font-size: 16px; line-height: 1.7; }
  .home-intro-scene::before, .home-intro-scene::after { width: 100%; }
  .home-intro-scene::after { -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 90%); mask-image: linear-gradient(to bottom, transparent 20%, #000 90%); }
  .home-intro::after { background: linear-gradient(to bottom, rgba(255,255,255,.91), rgba(255,255,255,.94) 78%, rgba(255,255,255,.55)); }
}

/* Shared mobile styling for the rest of the homepage. */
@media (max-width: 767px) {
  .sub-image { width: 40% !important; margin: 0 20px 20px 0 !important; }
  .petaluma-rooster { width: 30% !important; }
}

/* Bridge and clinic composite with Erick in the foreground. */
.home-intro { padding: 115px 0 80px; }
.home-intro-scene::before { width: 75%; background-position: left center; }
.home-intro-scene::after { width: 65%; background-image: url('../../images/office.png'); background-position: center; }
.home-intro::after { background: linear-gradient(90deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.84) 10%, rgba(255,255,255,.93) 20%, rgba(255,255,255,.91) 51%, rgba(255,255,255,.4) 73%, rgba(255,255,255,.18) 100%); }
.home-intro > .container { position: relative; z-index: 1; }
.home-intro-logo { width: 58%; max-width: 650px; margin: 0 0 30px; }
.home-intro-title { width: 58%; text-align: left; font-size: clamp(26px, 2.8vw, 36px); margin-bottom: 30px; }
.home-intro-copy { display: grid; grid-template-columns: 1fr; width: 55%; margin: 0; gap: 23px; }
.home-intro-copy h2 { margin-bottom: 8px; }
.home-intro-portrait { position: absolute; right: 1%; bottom: -80px; width: 40%; max-height: 720px; object-fit: contain; object-position: bottom; pointer-events: none; }
@media (max-width: 767px) {
  .home-intro { padding: 95px 0 45px; }
  .home-intro-scene::before { width: 100%; background-position: 20% center; }
  .home-intro-scene::after { display: none; }
  .home-intro::after { background: linear-gradient(90deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.93) 12%, rgba(255,255,255,.91) 55%, rgba(255,255,255,.72) 65%, rgba(255,255,255,.38) 100%); }
  .home-intro-logo { width: 95%; margin: 0 auto 25px; }
  .home-intro-title { width: 100%; font-size: 25px; margin-bottom: 26px; }
  .home-intro-copy { width: 64%; padding: 0; gap: 23px; }
  .home-intro-copy h2 { font-size: 16px; }
  .home-intro-copy p { font-size: 15px; line-height: 1.65; }
  .home-intro-portrait { right: -15px; top: 190px; bottom: auto; width: 37%; max-height: none; }
}

/* Keep the portrait within the intro's text track while scrolling. */
.home-intro { overflow: clip; }
.home-intro > .container { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 40fr); column-gap: 2%; align-items: start; }
.home-intro-logo { grid-column: 1; grid-row: 1; width: 100%; }
.home-intro-title { grid-column: 1; grid-row: 2; width: 100%; }
.home-intro-copy { grid-column: 1; grid-row: 3; width: 100%; }
.home-intro-portrait { grid-column: 2; grid-row: 1 / 4; position: sticky; top: 90px; right: auto; bottom: auto; align-self: start; width: 100%; max-height: min(560px, calc(100svh - 110px)); object-position: top; }
.home-announcements { position: relative; isolation: isolate; background: radial-gradient(ellipse at top right, #574138 0%, #302a27 40%, #222 80%); }
.home-announcements::before { content: ""; position: absolute; top: 22px; right: max(20px, calc((100% - 1140px) / 2)); width: 210px; height: 210px; background: url('../../images/rose-gold-compass.png') center / contain no-repeat; opacity: 1; pointer-events: none; z-index: -1; }
.home-announcements #header3-m .container { padding-right: 220px; }
.home-announcements #content1-n .container { position: relative; }
@media (max-width: 767px) {
  .home-intro > .container { grid-template-columns: minmax(0, 64fr) minmax(0, 34fr); }
  .home-intro-logo { grid-column: 1 / -1; grid-row: 1; width: 95%; }
  .home-intro-title { grid-column: 1 / -1; grid-row: 2; }
  .home-intro-copy { grid-column: 1; grid-row: 3; }
  .home-intro-portrait { grid-column: 2; grid-row: 3; top: 85px; right: auto; width: 100%; max-height: calc(100svh - 105px); }
  .home-announcements::before { width: 115px; height: 115px; top: 25px; right: 12px; opacity: 1; }
  .home-announcements #header3-m .container { padding-right: 120px; }
}

/* Oversized compass blends into the announcements background. */
.home-announcements { overflow: hidden; }
.home-announcements::before { width: 560px; height: 560px; top: -125px; right: -120px; opacity: .16; }
.home-announcements #header3-m .container { padding-right: 15px; }
.clinic-gallery { position: relative; width: 100%; max-width: none; height: var(--gallery-height, 60vh); margin: 0; overflow: hidden; background: #d8c8b8; }
.clinic-gallery img { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; transform: translate3d(0, var(--gallery-offset, 0px), 0); will-change: transform; }
@media (max-width: 767px) {
  .home-announcements::before { width: 370px; height: 370px; top: -90px; right: -100px; opacity: .13; }
  .clinic-gallery { margin: 0; }
}

/* Keep announcement links readable against the dark background. */
.home-announcements a,
.home-announcements a:visited,
.home-announcements a:hover,
.home-announcements a:focus {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Keep the portrait's lower edge on the viewport, bounded by the intro. */
.home-intro-portrait {
  position: absolute;
  grid-area: auto;
  top: auto;
  bottom: -80px;
  right: 15px;
  width: calc((100% - 30px) * .4);
  height: auto;
  max-height: 720px;
  object-position: bottom;
}

@media (max-width: 767px) {
  .home-intro-portrait { width: calc((100% - 30px) * .34); bottom: -45px; max-height: none; }
}

/* A broad bronze wash connects the compass to the whole panel. */
.home-announcements {
  background: radial-gradient(ellipse at 100% 10%, #92715e 0%, #6c5144 32%, #463a33 63%, #292725 100%);
}
.home-announcements::before {
  width: 600px;
  height: 600px;
  top: -138px;
  right: -113px;
  opacity: .22;
  mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(135deg, transparent 8%, #000 45%, #000 70%, transparent 96%);
  mask-image: linear-gradient(135deg, transparent 8%, #000 45%, #000 70%, transparent 96%);
}
@media (max-width: 767px) {
  .home-announcements::before { width: 425px; height: 425px; top: -100px; right: -146px; opacity: .17; }
}


@media (prefers-reduced-motion: reduce) {
  .clinic-gallery { height: auto; }
  .clinic-gallery img { transform: none; will-change: auto; }
}

/* Mobile intro: portrait, background, and contoured copy scroll together. */
@media (max-width: 767px) {
  .home-intro { padding: 0; background: #fff; }
  .home-intro > .container { grid-template-columns: minmax(0, 55fr) minmax(0, 43fr); column-gap: 2%; padding-top: 76px; padding-bottom: 40px; }
  .home-intro-logo { width: 94%; margin: 0 auto 24px; }
  .home-intro-title { font-size: 21px; line-height: 1.3; margin-bottom: 28px; }
  .home-intro-copy { gap: 24px; }
  .home-intro-copy h2 { font-size: 15px; line-height: 1.35; }
  .home-intro-copy p { font-size: 14px; line-height: 1.65; }
  .home-intro::after { display: none; }
  .home-intro-scene {
    position: absolute;
    top: 0;
    bottom: auto;
    height: max(100svh, calc(var(--mobile-title-clearance, 260px) + var(--mobile-portrait-height, 340px)));
    margin-bottom: 0;
    z-index: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), transparent 100%);
  }
  .home-intro-scene::before { z-index: 0; }
  .home-intro-scene::after { display: block; inset: 0; width: 100%; z-index: 1; -webkit-mask-image: none; mask-image: none; background: linear-gradient(90deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.93) 12%, rgba(255,255,255,.91) 55%, rgba(255,255,255,.72) 65%, rgba(255,255,255,.38) 100%); }
  .home-intro-portrait { width: 72%; right: calc(-24% + 13px); max-height: none; }
  .home-intro-scene .home-intro-portrait { z-index: 2; top: max(var(--mobile-title-clearance, 260px), calc(100svh - var(--mobile-portrait-height, 340px))); bottom: auto; }
}

/* Mobile editorial wrapping follows the visible portrait silhouette. */
@media (max-width: 767px) {
  .home-intro-copy { display: flow-root; grid-column: 1 / -1; width: 100%; }
  .home-intro-copy::before {
    content: "";
    float: right;
    width: 100%;
    height: var(--intro-contour-height, 1600px);
    shape-outside: var(--intro-contour, inset(0 0 0 58%));
    shape-margin: 12px;
    pointer-events: none;
  }
  .home-intro-copy > div + div { margin-top: 24px; }
}

/* Match the mobile homepage typography to the compact intro. */
@media (max-width: 767px) {
  #content1-j .lead,
  #content1-j .lead p,
  #content1-n .lead,
  #content1-n .lead p {
    font-size: 15px;
    line-height: 1.65;
  }
  #header3-i .mbr-section-title,
  #header3-m .mbr-section-title,
  #msg-box8-o .mbr-section-title {
    font-size: 24px;
    line-height: 1.3;
  }
  #msg-box8-o .mbr-section-title { font-size: 21px; }
  #header3-i .mbr-section-subtitle { font-size: 17px; line-height: 1.5; }
  #contacts1-h p { font-size: 14px; line-height: 1.65; }
  #buttons1-g .btn { font-size: 12px; }
}

/* Keep the mobile headline in two balanced lines and lift the portrait slightly. */
.home-intro-mobile-break { display: none; }
@media (max-width: 767px) {
  .home-intro-mobile-break { display: block; }
  .home-intro-scene .home-intro-portrait { transform: translateY(-16px); }
}

/* Inset mobile copy toward the logo without shifting the scene or portrait. */
@media (max-width: 767px) {
  .home-intro > .container > .home-intro-title,
  .home-intro > .container > .home-intro-copy {
    margin-left: 20px;
    padding-left: 0;
    width: calc(100% - 20px);
    box-sizing: border-box;
  }
  /* Fade at the portrait's own edge, including after its upward offset. */
  .home-intro-scene .home-intro-portrait {
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, rgba(0,0,0,.95) 73%, rgba(0,0,0,.65) 84%, rgba(0,0,0,.2) 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 65%, rgba(0,0,0,.95) 73%, rgba(0,0,0,.65) 84%, rgba(0,0,0,.2) 94%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

/* Fine bronze separator between the intro and Welcome section. */
#header3-i { position: relative; }
#header3-i::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(110deg, #ad7b6a 0%, #cd9987 28%, #f3c3b0 42%, #cd9987 65%, #ad7b6a 100%);
  pointer-events: none;
}

/* Comfortable mobile spacing within the Welcome block. */
@media (max-width: 767px) {
  #header3-i { padding-top: 36px !important; }
  #header3-i > .container,
  #content1-j > .container,
  #buttons1-g > .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}