body.page { overflow:auto; }
body.page main { display:block; height:auto; }
.hero { min-height:clamp(640px,82svh,820px); }
.hero .hero__inner { width:100%; max-width:none; margin:0; padding:135px clamp(24px,4vw,58px) 70px; }
.hero .hero__copy { max-width:390px; }
.hero h1 { font-size:clamp(36px,3.8vw,50px); line-height:1.08; }
.hero .hero__intro { color:#f5f5f5; font-size:1rem; }
.hero .hero__shade { background:linear-gradient(90deg, rgb(2 19 32 / 94%) 0%, rgb(2 19 32 / 90%) 20%, rgb(2 19 32 / 64%) 38%, rgb(2 19 32 / 12%) 57%, transparent 72%); }

/* Separate the reading area from the clear side of each photograph. */
.split-hero { isolation:isolate; overflow:hidden; display:flex; align-items:center; margin-top:0; min-height:clamp(640px,82svh,820px); padding:72px clamp(24px,4vw,58px); }
.split-hero__layout { display:block; width:100%; max-width:none; min-height:0; }
.split-hero__content { position:relative; z-index:2; width:min(100%,410px); max-width:410px; margin:0; padding:0; }
.split-hero__content h1 { font-size:clamp(35px,3.8vw,49px); line-height:1.1; margin-bottom:16px; }
.split-hero__content .subtitle { color:#f5f5f5; font-size:1rem; max-width:390px; }
.split-hero__visual { position:absolute; inset:0; z-index:0; width:100%; height:100%; margin:0; }
.split-hero__visual::after { background:linear-gradient(90deg, rgb(3 17 29 / 94%) 0%, rgb(3 17 29 / 88%) 21%, rgb(3 17 29 / 64%) 39%, rgb(3 17 29 / 12%) 57%, transparent 72%); }
.split-hero__highlights, .split-hero__highlights--two-column { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; margin-top:28px; }
.split-hero__highlight { color:#fff; font-size:.875rem; letter-spacing:.025em; gap:9px; }
.split-hero__highlight .line-icon { flex-basis:30px; width:30px; height:30px; }
.split-hero__badge { display:none; }
.split-hero__link { margin-top:22px; }


@media (max-width:800px) {
  .split-hero { display:flex; min-height:0; padding:72px 24px; }
  .split-hero__visual { position:absolute; inset:0; width:100%; height:100%; margin:0; }
  .split-hero__visual::after { background:linear-gradient(90deg, rgb(3 17 29 / 90%) 0%, rgb(3 17 29 / 72%) 40%, rgb(3 17 29 / 24%) 73%, transparent 100%); }
  .split-hero__content { max-width:390px; margin:0; padding:0; }
  .split-hero__content h1 { font-size:clamp(34px,6vw,44px); }
}
@media (max-width:560px) {
  .hero { min-height:720px; overflow:hidden; align-items:flex-end; }
  .hero .hero__media { display:contents; }
  .hero .hero__media::after { display:none; }
  .hero .hero__shade { display:block; background:linear-gradient(90deg, rgb(2 19 32 / 89%) 0%, rgb(2 19 32 / 65%) 48%, rgb(2 19 32 / 22%) 82%, transparent 100%),linear-gradient(0deg, rgb(2 19 32 / 78%), transparent 72%); }
  .hero .hero__inner { padding:260px 20px 42px; }
  .hero .hero__copy { max-width:320px; }
  .hero h1 { font-size:clamp(32px,8vw,39px); }
  .hero .hero__image { object-position:62% center; }
  .hero .hero__eyebrow { letter-spacing:.1em; }
  .split-hero { min-height:650px; align-items:flex-end; padding:220px 20px 38px; }
  .split-hero__visual::after { background:linear-gradient(0deg, rgb(3 17 29 / 90%) 0%, rgb(3 17 29 / 62%) 45%, transparent 88%),linear-gradient(90deg, rgb(3 17 29 / 52%), transparent 84%); }
  .split-hero__content { width:min(100%,330px); }
  .split-hero__content h1 { font-size:clamp(32px,8vw,39px); }
  .split-hero__highlights, .split-hero__highlights--two-column { grid-template-columns:1fr; gap:12px; margin-top:22px; }
}
/* The letter artwork has its own alpha channel; no dark tile is needed. */
.site-nav .brand,
main > header.has-navbar-hero:not(.is-past-hero) .brand {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Gallery uses the shared responsive hero layout; keep the photograph clear. */
.gallery-hero .split-hero__content { min-width: 0; overflow-wrap: break-word; }
.gallery-hero .split-hero__visual::after {
  background: linear-gradient(90deg, rgb(3 17 29 / 94%) 0%, rgb(3 17 29 / 86%) 22%, rgb(3 17 29 / 48%) 37%, transparent 55%);
}
@media (max-width: 560px) {
  .gallery-hero .split-hero__visual::after {
    background: linear-gradient(0deg, rgb(3 17 29 / 92%), rgb(3 17 29 / 38%) 38%, transparent 72%);
  }
}

/* Reserve a clear area for the dogs, with a short, seamless edge fade. */
.hero, .split-hero, .contact-hero {
  background: #03111d;
  position: relative;
  isolation: isolate;
  min-height: 660px;
  overflow: hidden;
}
.hero .hero__inner, .split-hero, .contact-hero {
  padding: 100px clamp(24px, 4vw, 58px) 64px;
}
.hero .hero__copy, .split-hero__content, .contact-hero__content {
  position: relative;
  z-index: 2;
  width: 34%;
  max-width: 390px;
  min-width: 0;
  padding: 0;
  overflow-wrap: break-word;
}
.hero h1, .split-hero__content h1, .contact-hero h1 {
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.12;
  margin-bottom: 20px;
}
.hero .hero__media, .split-hero__visual, .contact-hero__visual {
  display: block;
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  z-index: 0;
}
.hero .hero__media::after, .split-hero__visual::after,
.gallery-hero .split-hero__visual::after, .contact-hero__visual::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #03111d, rgb(3 17 29 / 30%) 9%, transparent 20%);
}
.hero .hero__shade { display: none; }
.hero .hero__image { z-index: 0; }
.contact-hero__visual img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}
.about-hero .split-hero__visual img, .reviews-hero .split-hero__visual img {
  object-fit: cover;
  object-position: center;
}
.split-hero__highlights, .split-hero__highlights--two-column {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
}
.service-card > .service-photo--boarding { object-position: center 75%; }
.service-card > .service-photo--behaviour { object-position: center 75%; }
.service-card > .service-photo--vet { object-position: center 60%; }
.service-card > .service-photo--reiki { object-position: center 48%; }

@media (max-width: 900px) {
  .hero, .split-hero, .contact-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0;
  }
  .hero { padding-top: 90px; }
  .contact-hero { margin-block-start: 0; }
  .hero .hero__media, .split-hero__visual, .contact-hero__visual {
    position: relative;
    inset: auto;
    flex: none;
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 560px;
  }
  .hero .hero__media::after, .split-hero__visual::after,
  .gallery-hero .split-hero__visual::after, .contact-hero__visual::after {
    background: linear-gradient(0deg, #03111d, transparent 12%);
  }
  .hero .hero__inner, .split-hero__layout, .contact-hero__content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px clamp(20px, 5vw, 40px) 40px;
  }
  .hero .hero__copy, .split-hero__content {
    width: 100%; max-width: 620px; margin: 0; padding: 0;
  }
  .hero h1, .split-hero__content h1, .contact-hero h1 {
    font-size: clamp(30px, 5vw, 40px);
  }
  .hero .hero__intro, .split-hero__content .subtitle, .contact-hero__copy {
    max-width: 600px;
  }
  .hero .hero__image { object-position: center 70%; }
  .split-hero__highlights, .split-hero__highlights--two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .split-hero__highlights, .split-hero__highlights--two-column { grid-template-columns: 1fr; }
}

/* Portrait-specific framing keeps the hero photographs edge-to-edge. */
.about-hero .split-hero__visual img { object-position: center 68%; }
.reviews-hero .split-hero__visual img { object-position: center 35%; }
.about-hero .split-hero__highlights,
.reviews-hero .split-hero__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-card > .service-photo--behaviour { object-position: center 43%; }
.service-card > .service-photo--vet { object-position: center 55%; }

/* Mobile copy overlaps the photograph's lower edge, over a soft dark fade. */
@media (max-width: 900px) {
  .hero, .split-hero, .contact-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding: clamp(310px, 57vw, 410px) 0 0;
    min-height: 680px;
    background: #03111d;
  }
  .hero { padding-top: clamp(370px, 64vw, 470px); }
  .hero .hero__media, .split-hero__visual, .contact-hero__visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    border: 0;
  }
  .hero .hero__image, .split-hero__visual img, .contact-hero__visual img {
    height: clamp(490px, 87vw, 650px);
    width: 100%;
    object-fit: cover;
    mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  }
  .hero .hero__image { height: clamp(560px, 94vw, 710px); }
  .hero .hero__image.image--one { object-position: center 72%; }
  .hero .hero__image.image--two { object-position: 32% 70%; }
  .hero .hero__image.image--three { object-position: center 55%; }
  .about-hero .split-hero__visual img { object-position: center 80%; }
  .reviews-hero .split-hero__visual img { object-position: center 35%; }
  .gallery-hero .split-hero__visual img { object-position: center 62%; }
  .services-hero .split-hero__visual img { object-position: 42% center; }
  .contact-hero__visual img { object-position: 65% 60%; }
  .hero .hero__media::after, .split-hero__visual::after,
  .gallery-hero .split-hero__visual::after, .contact-hero__visual::after {
    background: linear-gradient(90deg, rgb(3 17 29 / 18%), transparent 70%);
  }
  .hero .hero__inner, .split-hero__layout, .contact-hero__content {
    position: relative;
    z-index: 2;
    padding: 20px clamp(20px, 5vw, 40px) 36px;
  }
  .hero .hero__copy, .split-hero__content, .contact-hero__content { max-width: 600px; }
  .hero h1, .split-hero__content h1, .contact-hero h1 {
    font-size: clamp(28px, 6.5vw, 36px);
    line-height: 1.12;
  }
  .hero .hero__intro, .split-hero__content .subtitle, .contact-hero__copy { font-size: .94rem; }
  .split-hero__highlights, .about-hero .split-hero__highlights,
  .reviews-hero .split-hero__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .split-hero__highlight { font-size: .8rem; }
}

/* Keep the snow dog visible in the first Home slide. */
.hero .hero__image.image--one { object-position: 70% 50%; }

/* Match Contact: photography continues beneath the shared fading navbar. */
main > :is(.services-hero, .about-hero, .gallery-hero, .reviews-hero) {
  margin-block-start: clamp(-106px, calc(-66px - 4vw), -90px);
}