/* Spicy Dogs homepage — visual flow and section grouping */

/* Overall homepage rhythm */
.home-intro{
  padding:0 0 82px;
  background:var(--cream);
  overflow:hidden;
}
.home-section{position:relative}
.home-section .container{position:relative}

/* Full-width homepage video hero */
.home-intro .hero-stacked{gap:42px}
.home-intro .hero-photo-wide{
  order:-1;
  width:100vw;
  max-width:none;
  height:clamp(430px,56vw,720px);
  min-height:0;
  margin-left:calc(50% - 50vw);
  border-radius:0;
  background:#eaded6;
}
.home-intro .hero-photo-wide video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 68%;
  display:block;
}
.home-intro .hero-video-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(33,19,62,.40) 0%,rgba(33,19,62,.18) 34%,rgba(33,19,62,.04) 62%,rgba(33,19,62,0) 100%);
}
.home-intro .hero-video-tagline-wrap{
  position:absolute;
  z-index:2;
  top:clamp(48px,7vw,92px);
  left:50%;
  width:min(calc(100% - 64px),1180px);
  transform:translateX(-50%);
  text-align:center;
}
.home-intro .hero-video-tagline{
  max-width:1080px;
  margin:0 auto;
  color:var(--cream);
  font-size:clamp(1.65rem,3.15vw,3.45rem);
  line-height:1.08;
  font-weight:650;
  letter-spacing:-.025em;
  text-wrap:balance;
  text-shadow:0 2px 18px rgba(33,19,62,.30);
}
.home-intro .hero-video-cta{
  margin-top:26px;
  display:flex;
  justify-content:center;
}
.home-intro .hero-video-cta .btn{
  min-height:48px;
  padding:12px 24px;
  box-shadow:0 8px 24px rgba(33,19,62,.16);
}

/* Match the intro heading hierarchy used by the sections below. */
.home-intro .hero-stacked-copy h1{
  font-size:clamp(2.15rem,4.2vw,3.7rem);
  line-height:1.07;
  font-weight:700;
  letter-spacing:-.025em;
  color:var(--coral);
  max-width:900px;
  margin:0 0 18px;
}

/* Use colour changes to mark chapters, not every individual block. */
.home-think:first-of-type,
.home-difference:first-of-type,
.home-work:first-of-type,
.home-proof:first-of-type,
.home-next-step{
  border-top:1px solid rgba(33,19,62,.055);
}

/* Chapter 1 — how I think */
.home-think{
  background:var(--surface-warm);
}
.home-think.home-principles{
  padding-top:58px;
  background:var(--cream);
  border-top:0;
}
.home-think .quote{max-width:720px}
.home-principles .pillars{margin-top:38px!important}

/* Welfare principles heading */
.home-principles h2{
  font-size:0;
  margin-bottom:8px;
  max-width:none;
}
.home-principles h2::before{
  content:"Welfare first";
  display:block;
  font-size:clamp(2.15rem,4.2vw,3.7rem);
  line-height:1.07;
  font-weight:700;
  letter-spacing:-.025em;
  color:var(--coral);
}
.home-principles h2::after{
  content:"For both the human and the dog.";
  display:block;
  margin-top:12px;
  font-size:clamp(1.3rem,2.2vw,1.75rem);
  line-height:1.35;
  font-style:italic;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--navy);
}

/* Principle photos */
.home-principles .pillar-circle{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
.home-principles .pillar-circle img{
  opacity:0;
}
.home-principles .pillar:nth-child(1) .pillar-circle{
  background-image:url("assets/Me dogs hug.jpeg");
  background-position:center 52%;
}
.home-principles .pillar:nth-child(2) .pillar-circle{
  background-image:url("assets/Me dogs snack.jpeg");
  background-position:center 42%;
}
.home-principles .pillar:nth-child(3) .pillar-circle{
  background-image:url("assets/beach mum5.JPG");
  background-position:center 50%;
}

/* Chapter 2 — why I am different */
.home-difference{
  background:var(--lavender);
}
.home-difference.home-about{
  padding-top:64px;
  background:#FBF8FC;
  border-top:0;
}
.home-difference .grid-2{align-items:center}
.home-about .photo-frame{box-shadow:none}

/* Keep Vanessa's face in frame in the free-living section */
.home-difference:not(.home-about) .photo-frame.free-living img{
  object-position:center 28%;
}

/* Chapter 3 — ways to work together */
.home-work{
  background:var(--cream);
}
.home-work.home-resource{
  padding-top:52px;
  background:var(--surface-warm);
  border-top:0;
}
.home-work .services-preview{margin-top:36px}
.home-work .notice{margin-top:24px!important}
.home-resource .email-box{max-width:1040px;margin-inline:auto}

/* Chapter 4 — proof and ongoing thinking */
.home-proof{
  background:var(--lavender);
}
.home-proof.home-writing{
  padding-top:58px;
  background:var(--cream);
  border-top:0;
}
.home-proof .reviews-grid{margin-top:30px}
.home-writing #posts-grid,
.home-writing #fallback-posts{margin-top:30px!important}

/* Google review ratings */
.review-stars{margin:-2px 0 12px;color:var(--coral);font-size:1.05rem;letter-spacing:.12em;line-height:1}

/* Expandable review cards */
.review-details{margin-top:14px}
.review-details summary{
  display:inline-block;
  cursor:pointer;
  list-style:none;
  font-weight:700;
  color:var(--coral);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
}
.review-details summary::-webkit-details-marker{display:none}
.review-details summary::after{content:" +"}
.review-details[open] summary::after{content:" −"}
.review-details[open] summary{margin-bottom:12px}
.review-full p{margin:0 0 12px}
.review-full p:last-child{margin-bottom:0}
.review-source{margin-top:18px;font-size:.9rem;color:rgba(33,19,62,.68);font-weight:600}

/* Clear final step */
.home-next-step{
  background:var(--surface-warm);
  padding-top:76px;
  padding-bottom:84px;
}
.home-next-step .container{max-width:880px}
.home-next-step h2{max-width:760px;margin-inline:auto}
.home-next-step .kicker{max-width:680px}

/* Soft chapter transitions: related sections feel connected without becoming one long block. */
.home-think.home-principles::before,
.home-difference.home-about::before,
.home-work.home-resource::before,
.home-proof.home-writing::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(calc(100% - 40px),1180px);
  height:1px;
  transform:translateX(-50%);
  background:rgba(33,19,62,.045);
}

/* Organic chapter dividers — the outgoing section flows into the next colour. */
.home-principles,
.home-about,
.home-resource{
  z-index:2;
  overflow:visible;
}
.home-principles::after,
.home-about::after,
.home-resource::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-46px;
  height:92px;
  pointer-events:none;
  z-index:4;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 10C180 72 330 96 495 62C660 28 742 4 900 34C1070 66 1225 92 1440 34V0H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 10C180 72 330 96 495 62C660 28 742 4 900 34C1070 66 1225 92 1440 34V0H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.home-principles::after{background:var(--cream)}
.home-about::after{background:#FBF8FC}
.home-resource::after{background:var(--surface-warm)}

/* Give the incoming chapters enough breathing room beneath each wave. */
.home-principles + .home-difference,
.home-about + .home-work,
.home-resource + .home-proof{
  padding-top:128px;
  border-top:0!important;
}

/* Homepage motion system */
.home-motion .nav{
  transition:padding .3s ease,box-shadow .3s ease,background-color .3s ease,backdrop-filter .3s ease;
}
.home-motion .nav.nav-scrolled{
  box-shadow:0 10px 30px rgba(33,19,62,.08);
  background:rgba(255,249,242,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.home-motion .nav.nav-scrolled .nav-inner{
  min-height:68px;
}
.home-motion .nav .nav-inner{
  transition:min-height .3s ease;
}
.home-motion .brand-logo img{
  transition:transform .3s ease;
}
.home-motion .nav.nav-scrolled .brand-logo img{
  transform:scale(.93);
}

/* Scroll reveals are only hidden once JS confirms motion is active. */
.home-motion .motion-reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.home-motion .motion-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.home-motion .motion-delay-1{transition-delay:.07s}
.home-motion .motion-delay-2{transition-delay:.14s}
.home-motion .motion-delay-3{transition-delay:.21s}

/* Hero copy arrives softly rather than all at once. */
.home-motion .hero-stacked-copy .eyebrow,
.home-motion .hero-stacked-copy h1,
.home-motion .hero-stacked-copy .lead,
.home-motion .hero-stacked-copy .hero-actions{
  opacity:0;
  transform:translateY(18px);
  animation:heroFadeUp .75s cubic-bezier(.22,.61,.36,1) forwards;
}
.home-motion .hero-stacked-copy h1{animation-delay:.09s}
.home-motion .hero-stacked-copy .lead{animation-delay:.18s}
.home-motion .hero-stacked-copy .hero-actions{animation-delay:.27s}
@keyframes heroFadeUp{
  to{opacity:1;transform:translateY(0)}
}

/* Photographs feel slightly dimensional without becoming distracting. */
.home-motion .photo-frame,
.home-motion .hero-photo{
  overflow:hidden;
}
.home-motion .photo-frame img,
.home-motion .hero-photo img,
.home-motion .hero-photo video{
  transform:translate3d(0,var(--parallax-y,0px),0) scale(1.035);
  transition:transform .18s linear;
  will-change:transform;
}

/* Cards: very small lift only. */
.home-motion .service-card,
.home-motion .quote-card,
.home-motion .card,
.home-motion .pillar,
.home-motion .email-box{
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
@media(hover:hover){
  .home-motion .service-card:hover,
  .home-motion .quote-card:hover,
  .home-motion .card:hover,
  .home-motion .pillar:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 34px rgba(33,19,62,.08);
  }
}

/* Text links get a restrained directional cue. */
.home-motion a.link{
  display:inline-flex;
  align-items:center;
  gap:3px;
  transition:transform .22s ease,color .22s ease;
}
@media(hover:hover){
  .home-motion a.link:hover{
    transform:translateX(4px);
  }
}

@media(max-width:860px){
  .home-intro{padding-bottom:58px}
  .home-intro .hero-photo-wide{
    height:58vh;
    min-height:360px;
  }
  .home-intro .hero-photo-wide video{object-position:center 70%}
  .home-intro .hero-video-tagline-wrap{
    top:clamp(34px,8vw,58px);
    width:calc(100% - 36px);
  }
  .home-intro .hero-video-tagline{
    max-width:720px;
    font-size:clamp(1.45rem,5.3vw,2.45rem);
    line-height:1.1;
  }
  .home-intro .hero-video-cta{margin-top:20px}
  .home-intro .hero-video-cta .btn{
    min-height:44px;
    padding:10px 18px;
    font-size:.92rem;
  }
  .home-think.home-principles,
  .home-difference.home-about,
  .home-work.home-resource,
  .home-proof.home-writing{padding-top:44px}
  .home-principles .pillars{margin-top:28px!important}
  .home-next-step{padding-top:58px;padding-bottom:64px}
  .home-motion .nav.nav-scrolled .nav-inner{min-height:62px}
  .home-principles::after,
  .home-about::after,
  .home-resource::after{
    bottom:-34px;
    height:68px;
  }
  .home-principles + .home-difference,
  .home-about + .home-work,
  .home-resource + .home-proof{
    padding-top:100px;
  }
}

@media(max-width:600px){
  .home-resource .email-box{border-radius:20px}
  .home-think.home-principles::before,
  .home-difference.home-about::before,
  .home-work.home-resource::before,
  .home-proof.home-writing::before{
    width:calc(100% - 40px);
  }
}

/* Accessibility: motion disappears completely when the visitor asks for less motion. */
@media(prefers-reduced-motion:reduce){
  .home-motion .motion-reveal,
  .home-motion .hero-stacked-copy .eyebrow,
  .home-motion .hero-stacked-copy h1,
  .home-motion .hero-stacked-copy .lead,
  .home-motion .hero-stacked-copy .hero-actions{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    transition:none!important;
  }
  .home-motion .photo-frame img,
  .home-motion .hero-photo img,
  .home-motion .hero-photo video,
  .home-motion .service-card,
  .home-motion .quote-card,
  .home-motion .card,
  .home-motion .pillar,
  .home-motion a.link,
  .home-motion .nav,
  .home-motion .nav .nav-inner,
  .home-motion .brand-logo img{
    transform:none!important;
    transition:none!important;
  }
}