/* Home cover: natural image geometry first, shared overlay second.
   Interior-page header, photo collage and quality section remain unchanged. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("/assets/fonts/Montserrat-Thin.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/Montserrat-Light.woff") format("woff");
}
.home-page {background: var(--paw-white);}
.home-page .site-main {max-width: none; padding: 0 0 var(--paw-section-space);}
.home-page .site-main > .shared-life,
.home-page .site-main > .brand-quality {
  width: min(var(--paw-width), calc(100% - 2 * var(--paw-gutter)));
  margin-inline: auto;
}
.home-hero {position: relative; isolation: isolate; width: 100%; margin: 0; font-family: var(--paw-font);}
.hero-slides {width: 100%;}
.hero-slide {position: relative; height: auto; background: #fff; overflow: visible;}
.hero-photo {display: block; width: 100%; height: auto;}
/* Common overlay: outside the slides, never fixed/sticky to the viewport. */
.home-hero .hero-chrome {position: absolute; inset: 0 0 auto; z-index: 3; background: transparent; border: 0;}
.hero-chrome .header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 0;
  max-width: none;
  padding: clamp(8px, .76vw, 16px) clamp(24px, 4.5vw, 96px) 0 clamp(24px, 7.4752vw, 144px);
}
.hero-brand-slot {padding: 0; min-width: 0;}
.hero-nav-slot {min-width: 0; justify-self: end;}
.home-hero .brand {width: clamp(112px, 10.7552vw, 206.5px); flex: none;}
.hero-chrome .main-navigation {gap: clamp(16px, 2vw, 32px);}
.hero-slogan-band {display: none;}
.home-hero .hero-slogan {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(24px, min(3.4vw, 7.6svh), 72px);
  font-weight: 100;
  font-synthesis: none;
  line-height: 1.08;
  letter-spacing: 0;
  color: #747A7D;
}
.hero-brand-introduction {
  width: calc(100% - 2 * var(--paw-gutter));
  max-width: 1600px;
  margin: 0 auto;
  padding-block: clamp(56px, 6vw, 96px);
  font: 300 clamp(28px, 2vw, 32px)/1.5 "Montserrat", var(--paw-font);
  color: var(--paw-ink);
  text-align: center;
}
@media (max-width: 760px) {
  /* Small canvases retain the existing phone composition. */
  .hero-slide {height: auto; display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible;}
  .hero-chrome .header-inner {display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 24px var(--paw-gutter) 0;}
  .hero-brand-slot {padding-top: 0; flex: 0 1 172px;}
  .hero-nav-slot {display: contents;}
  .home-hero .brand {width: 172px; flex: 0 1 172px;}
  .hero-chrome .main-navigation.is-open {padding: 12px 16px; background: rgba(255,255,255,.98); border: 1px solid var(--paw-line); border-radius: 8px;}
  .hero-slogan-band {position: static; padding: 8px var(--paw-gutter) 22px;}
  .home-hero .hero-slogan {padding: 0; font-size: clamp(24px, 5.5vw, 34px); line-height: 1.2;}
  .hero-brand-introduction {padding-block: 40px; font-size: clamp(22px, 4vw, 28px);}
}
/* Desktop overlay does not reserve flow height or intercept photo-area clicks.
   Phone composition and all approved header geometry stay unchanged. */
@media (min-width: 768px) {
  .home-page .home-hero > .hero-chrome {
    background: none;
    backdrop-filter: none;
    pointer-events: none;
  }
  .home-page .hero-chrome a,
  .home-page .hero-chrome button {pointer-events: auto;}
}
.home-page a:focus-visible {outline: 2px solid var(--paw-blue); outline-offset: 5px;}
.shared-life {font-family: var(--paw-font); color: var(--paw-ink); margin-bottom: var(--paw-section-space);}
.shared-intro {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: end;}
.shared-intro > div {grid-column: 1 / 9;}
.section-eyebrow {font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: 1.7px; color: var(--paw-action); margin: 0 0 20px;}
.shared-intro h2 {font-size: clamp(36px, 4.1vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; margin: 0; max-width: 19ch;}
.shared-description {grid-column: 10 / 13; min-width: 0; margin: 0; border-left: 7px solid #A8DCD9; padding-left: 18px; font-family: "Montserrat", var(--paw-font); font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--paw-muted);}
.shared-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr));
  gap: 20px;
  aspect-ratio: 2 / 1;
  isolation: isolate;
  margin-top: 48px;
}
.shared-photo {margin: 0; min-width: 0; min-height: 0; border-radius: 14px; overflow: hidden; background: var(--paw-surface);}
.shared-photo img {width: 100%; height: 100%; display: block; object-fit: cover;}
.shared-family {grid-column: 1 / 9; grid-row: 1 / 9;}
.shared-family img {object-position: 45% 68%;}
.shared-cat {grid-column: 6 / 10; grid-row: 6 / 11; z-index: 1; border: 6px solid white;}
.shared-cat img {object-position: 38% 45%;}
.shared-company {grid-column: 10 / 13; grid-row: 2 / 10;}
.shared-company img {object-position: 52% 60%;}
.brand-quality {background: var(--paw-deep); color: white; font-family: var(--paw-font); padding: clamp(32px, 5vw, 72px);}
.brand-quality .section-eyebrow {color: white; display: flex; align-items: center; gap: 12px;}
.brand-quality .section-eyebrow::before {content: ''; width: 22px; height: 3px; background: var(--paw-coral); flex-shrink: 0;}
.brand-quality h2 {font-size: clamp(36px, 4.4vw, 64px); font-weight: 500; letter-spacing: -.045em; line-height: 1.08; max-width: 19ch; margin: 0;}
.quality-description {font-size: 16px; line-height: 1.75; max-width: 59ch; margin: 24px 0 0; color: #e2f0f2;}
.quality-ideas {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px;}
.quality-idea {border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 22px;}
.quality-idea h3 {font-size: 12px; line-height: 1.5; font-weight: 600; letter-spacing: 1.5px; margin: 0 0 12px;}
.quality-idea p {font-size: 15px; line-height: 1.65; color: #e2f0f2; margin: 0; max-width: 31ch;}
@media (max-width: 1000px) {
  .shared-intro {gap: 14px;}
  .shared-description {font-size: 16px; padding-left: 14px;}
  .shared-intro h2 {font-size: 40px;}
  .shared-gallery {aspect-ratio: 1.65; gap: 14px;}
  .shared-family {grid-column: 1 / 9; grid-row: 1 / 8;}
  .shared-cat {grid-column: 7 / 10; grid-row: 7 / 11; border-width: 4px;}
  .shared-company {grid-column: 10 / 13; grid-row: 2 / 11;}
  .quality-ideas {gap: 24px;}
}
@media (max-width: 600px) {
  .shared-intro {grid-template-columns: minmax(0, 1fr); gap: 24px;}
  .shared-intro > div, .shared-description {grid-column: auto;}
  .section-eyebrow {font-size: 10px; margin-bottom: 16px;}
  .shared-intro h2 {font-size: 36px;}
  .shared-description {font-size: 15px; line-height: 1.7;}
  .shared-gallery {grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 20px; aspect-ratio: auto; margin-top: 32px;}
  .shared-family, .shared-cat, .shared-company {grid-column: auto; grid-row: auto; border: 0; border-radius: 12px;}
  .shared-family {aspect-ratio: 3 / 2;}
  .shared-cat {aspect-ratio: 3 / 2;}
  .shared-company {aspect-ratio: 2 / 3;}
  .brand-quality {padding: 32px 24px;}
  .brand-quality h2 {font-size: 36px;}
  .quality-description {font-size: 15px; margin-top: 20px;}
  .quality-ideas {grid-template-columns: 1fr; gap: 24px; margin-top: 36px;}
  .quality-idea {padding-top: 18px;}
  .quality-idea p {max-width: none; font-size: 14px;}
}

/* Phone Home: independent composition; every override stays below 768px.
   Supplied wood image complete. No duplicate slide or mobile timer. */
@media (max-width: 767px) {
  @font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("/assets/fonts/Montserrat-ExtraLight.woff") format("woff");
  }
  .home-page {--paw-gutter: 24px; --paw-section-space: 56px;}
  .home-hero .hero-chrome {position: static; background: var(--paw-white);}
  .home-page .hero-chrome .brand {width: 136px;}
  .home-page .hero-slide {height: auto; display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible;}
  .home-page .hero-slogan-band {display: block; position: static; padding: 20px 24px 20px;}
  .home-page .hero-slogan {font-size: 26px; line-height: 1.35; padding: 0; font-weight: 200; color: #747A7D; text-align: center;}
  .home-page .hero-slogan-period {display: none;}
  .home-page .hero-brand-introduction {max-width: 28ch; padding-block: 16px 48px; font-size: 22px; line-height: 1.55;}
  .home-page .shared-intro {grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start;}
  .home-page .shared-intro > div, .home-page .shared-description {grid-column: auto;}
  .home-page .section-eyebrow {font-size: 11px; margin-bottom: 16px;}
  .home-page .shared-intro h2 {font-size: 34px; line-height: 1.14; max-width: 19ch;}
  .home-page .shared-description {font-size: 16px; line-height: 1.8; padding-left: 16px; border-left: 7px solid #A8DCD9;}
  .home-page .shared-gallery {grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 16px; aspect-ratio: auto; margin-top: 32px; align-items: start;}
  .home-page .shared-photo {grid-column: auto; grid-row: auto; border: 0; border-radius: 12px; z-index: auto;}
  .home-page .shared-family {grid-column: 1 / -1; aspect-ratio: 3 / 2;}
  .home-page .shared-cat {aspect-ratio: 1200 / 783;}
  .home-page .shared-cat img {object-position: center;}
  .home-page .shared-company {aspect-ratio: 4 / 5;}
  .home-page .shared-company img {object-position: center bottom;}
  .home-page .brand-quality {padding: 32px 24px;}
  .home-page .brand-quality h2 {font-size: 34px; line-height: 1.14;}
  .home-page .quality-description {font-size: 16px; line-height: 1.75; margin-top: 20px;}
  .home-page .quality-ideas {grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px;}
  .home-page .quality-idea {padding-top: 18px;}
  .home-page .quality-idea p {font-size: 15px; max-width: none;}
}
/* Larger faces take precedence over a tiny diptych on phone-width canvases. */
@media (max-width: 430px) {
  .home-page .shared-gallery {grid-template-columns: minmax(0, 1fr); gap: 20px;}
  .home-page .shared-cat {aspect-ratio: 1200 / 783;}
  .home-page .shared-cat img {object-position: center;}
}
/* Desktop punctuation only; tablet keeps its approved rendering. */
@media (min-width: 1024px) {
  .home-page .hero-slogan-period {display: none;}
}