/* ============================================================
   BENOIT BULLDOGS — FRONT PAGE
   Ported from the approved homepage prototype. Loaded only on the
   front page. Uses the theme tokens via the aliases below.
   ============================================================ */
.home{
  --container-max:1360px;
  --paper:var(--color-background); --paper-alt:var(--color-background-alt); --surface:var(--color-surface);
  --ink:var(--color-text); --ink-2:var(--color-text-secondary); --border:var(--color-border);
  --gold:var(--color-accent); --gold-deep:var(--color-accent-text);
  --blue:var(--color-primary); --blue-deep:var(--color-primary-hover);
  --hero-bg:#1B1916; --hero-ink:#F9F7F3; --hero-ink-soft:rgba(249,247,243,.78);
  --serif:var(--font-display); --sans:var(--font-body); --ease:var(--ease-out);
}
.home .site-main{padding:0}
/* The dark closing CTA flows straight into the footer — no paper gap on the homepage */
.home .site-footer{margin-block-start:0}

/* Header over the hero: fixed + transparent, paper once the hero has passed */
.home .site-header{position:fixed;inset-inline:0;top:0;background:transparent;border-bottom-color:transparent;color:var(--hero-ink);
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),translate .3s var(--ease)}
.home .site-header.is-scrolled{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.home .site-header .site-nav__cta{border-color:currentColor;color:inherit}
.home .site-header:not(.is-past-hero) .site-header__apply,
.home .site-header:not(.is-past-hero) .site-header__apply:hover{background:var(--hero-ink);color:var(--ink)}
.home .site-header:not(.is-past-hero) .site-nav__apply,
.home .site-header:not(.is-past-hero) .site-nav__apply:hover{background:var(--hero-ink);color:var(--ink)}
.home .site-header:not(.is-past-hero) .site-nav__apply:hover{background:var(--gold)}
.home .site-header .site-nav__cta:hover{border-color:var(--gold);color:var(--gold)}
.home .site-header.is-past-hero{background:rgba(251,250,247,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--color-text);border-bottom-color:var(--color-border-strong);box-shadow:0 1px 16px rgba(51,49,46,.06)}
/* Over the hero the menu button is a light outline; on paper it returns to the default */
.home .site-header:not(.is-past-hero) .site-header__toggle{color:var(--hero-ink)}
.home .site-header:not(.is-past-hero) .site-header__toggle:hover{color:var(--gold)}
.home .site-header.is-past-hero .site-nav__cta{border-color:var(--color-text);color:var(--color-text)}
.home .site-header.is-past-hero .site-nav__cta:hover{border-color:var(--blue-deep);color:var(--blue-deep)}
.home .site-header .site-nav__list .current-menu-item a{box-shadow:none}
.home .site-header:not(.is-past-hero) .site-header__mark--dark{display:none}
.home .site-header:not(.is-past-hero) .site-header__mark--light{display:block}

/* ---------- Hero · desktop: full-bleed, bottom-anchored ---------- */
.hero{position:relative;background:var(--hero-bg);color:var(--hero-ink)}
.hero__media{overflow:hidden;transform-style:preserve-3d}
.hero__plate{position:relative;width:100%;height:100%;transform-origin:50% 55%;will-change:transform;backface-visibility:hidden;transform:translateZ(0);
  --mx:160;--my:160;--mi:100;
  -webkit-mask-image:radial-gradient(ellipse calc(var(--mx)*1%) calc(var(--my)*1%) at 52% 48%,#000 0%,#000 calc(var(--mi)*1%),transparent 100%);
          mask-image:radial-gradient(ellipse calc(var(--mx)*1%) calc(var(--my)*1%) at 52% 48%,#000 0%,#000 calc(var(--mi)*1%),transparent 100%);}
.hero__media img{width:100%;height:100%;object-fit:cover;will-change:transform;backface-visibility:hidden}
/* darkening is an opacity-only overlay (composited), never a filter */
.hero__shade{position:absolute;inset:0;background:#1B1916;opacity:0;pointer-events:none;will-change:opacity}
/* soft depth glow behind the plate: a blurred echo of the portrait */
.hero__glow{position:absolute;inset:-12%;pointer-events:none;opacity:0;will-change:opacity;transform:translateZ(0);
  background:url("https://benoitbulldogs.com/wp-content/uploads/2026/08/Benoit-Bulldogs-homepage-hero-.png") 70% 32%/cover no-repeat;
  filter:blur(34px) saturate(1.15) brightness(.9)}
/* one light sweep across the portrait as it lands */
.hero__sheen{position:absolute;inset:-30% -40%;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:linear-gradient(104deg,transparent 40%,rgba(249,247,243,.16) 50%,transparent 60%);
  transform:translateX(-70%) skewX(-10deg)}
.hero__eyebrow{
  font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.3rem;
}
.hero__title{
  font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(2.9rem,7.4vw,5.9rem);color:var(--hero-ink);text-wrap:balance;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__title .line>span{display:inline-block;will-change:transform}
.hero__title em{font-style:italic;font-weight:500}
.hero__title .dot{color:var(--gold)}
.hero__lead{
  max-width:34em;margin-top:1.5rem;font-size:clamp(1.0625rem,1.4vw,1.1875rem);
  line-height:1.65;color:var(--hero-ink-soft);
}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-top:2.1rem}
.hero__actions .label-short{display:none} /* short labels are mobile-only */
.hero .link-arrow,.close .link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--hero-ink)}
.hero .link-arrow svg,.close .link-arrow svg{width:1.15em;height:1.15em}
.hero .link-arrow:hover,.close .link-arrow:hover{color:var(--gold)}

/* The fact line — quiet small caps under a hairline, no boxes, no icons */
/* Brand marquee — one slow, seamless line of the program's truths */
.hero__bandwrap{position:relative;z-index:2;width:100%;max-width:1360px;margin-inline:auto;
  padding:0 clamp(1.25rem,4vw,3rem) 2.2rem}
.marquee{
  overflow:hidden;padding-top:1.4rem;border-top:1px solid rgba(249,247,243,.22);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{
  display:flex;align-items:center;gap:3.25rem;width:max-content;
  list-style:none;margin:0;padding:0;
  animation:bb-marquee 46s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track li{
  display:flex;align-items:center;gap:.7rem;white-space:nowrap;
  font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hero-ink-soft);
}
.marquee__track svg{width:1.05rem;height:1.05rem;flex:none;color:var(--gold)}
@keyframes bb-marquee{to{transform:translateX(calc(-50% - 1.625rem))}}

@media(min-width:900px){
  /* Content top-left under the header; marquee pinned to the bottom; photo nudged right */
  .hero{height:100svh;min-height:680px;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;perspective:1500px}
  .hero__media{position:absolute;top:0;bottom:0;left:0;right:-9%}
  .hero__plate{position:absolute;inset:0}
  .hero__media img{transform:scale(1.16);object-position:70% 32%}
  .hero__scrim{position:absolute;inset:0;background:
    linear-gradient(to right,rgba(27,25,22,1) 0%,rgba(27,25,22,.78) 14%,rgba(27,25,22,.38) 36%,rgba(27,25,22,0) 56%),
    linear-gradient(to bottom,rgba(27,25,22,.7) 0%,rgba(27,25,22,.25) 30%,rgba(27,25,22,0) 50%),
    linear-gradient(to top,rgba(27,25,22,.88) 0%,rgba(27,25,22,.3) 26%,rgba(27,25,22,0) 46%)}
  .hero__inner{
    position:relative;z-index:2;width:100%;max-width:1360px;margin-inline:auto;
    padding:8.75rem clamp(1.25rem,4vw,3rem) 0;
  }
  .hero__bandwrap{margin-top:auto;padding-top:3.2rem}
  .hero__band{column-gap:2.75rem}
  .hero__band span{gap:2.75rem}
}

/* ---------- Hero · mobile: words on charcoal, photograph whole, marquee last ---------- */
@media(max-width:899px){
  .hero{display:flex;flex-direction:column}
  .hero__scrim{display:none}
  .hero__inner{order:1;padding:7.5rem clamp(1.25rem,5vw,2rem) 2.75rem}
  .hero__media{order:2;aspect-ratio:3/2}
  .hero__plate{position:absolute;inset:0}
  .hero__media{position:relative}
  .hero__media img{height:100%}
  .hero__bandwrap{order:3;padding:0 0 1.9rem;max-width:none}
  .marquee{padding-top:1.7rem;border-top:0}
  .marquee__track{gap:2.5rem}
  .marquee__track li{font-size:.85rem}
  @keyframes bb-marquee{to{transform:translateX(calc(-50% - 1.25rem))}}
  .hero__lead{max-width:32em}
  /* CTAs side by side on small screens: equal pair, short labels, link styled as outline button */
  .hero__actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.9rem}
  .hero__actions .btn{padding-inline:.75rem;font-size:.9375rem;min-height:52px;text-align:center;white-space:nowrap}
  .hero__actions .link-arrow{
    justify-content:center;border:1.5px solid rgba(249,247,243,.55);border-radius:2px;
    min-height:52px;padding:.6rem .75rem;font-size:.9375rem;text-align:center;white-space:nowrap;
  }
  .hero__actions .link-arrow svg{display:none}
  .hero__actions .label-full{display:none}
  .hero__actions .label-short{display:inline}
}
/* Reduced motion: the line holds still and wraps into view */
@media(prefers-reduced-motion:reduce){
  .marquee__track{animation:none;flex-wrap:wrap;width:auto;row-gap:.7rem}
  .marquee__track li{white-space:normal}
  .marquee__track li[aria-hidden]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---------- Below-hero stub ---------- */
.intro{padding:clamp(5rem,12vw,8rem) 0;background:var(--paper);min-height:120vh}
.intro__inner{max-width:820px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.intro h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.2;margin:.9rem 0 1.1rem;text-wrap:balance}
.intro p{color:var(--ink-2);max-width:60ch}
.proto-note{
  margin-top:3.5rem;padding:1rem 1.4rem;border-left:3px solid var(--gold);
  background:var(--paper-alt);font-size:.875rem;color:var(--ink-2);
}

/* ---------- Entrance hidden states (armed only when JS + motion allowed) ---------- */
html.motion .hero__eyebrow,html.motion .hero__lead,html.motion .hero__actions,
html.motion .hero__bandwrap{opacity:0}
html.motion .hero__title .line>span{transform:translateY(112%)}
@media(prefers-reduced-motion:reduce){
  html.motion .hero__eyebrow,html.motion .hero__lead,html.motion .hero__actions,
  html.motion .hero__bandwrap{opacity:1}
  html.motion .hero__title .line>span{transform:none}
  .hero__media img{transform:none!important}
  .hero__glow,.hero__sheen,.hero__shade{display:none}
  *{animation:none!important;transition:none!important}
}

/* ================= HOMEPAGE SECTIONS ================= */
.section{padding-block:clamp(4.5rem,9vw,8rem)}
.eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.h2{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.01em;font-size:clamp(2rem,3.6vw,3.1rem);text-wrap:balance;margin:.9rem 0 0}
.lead{font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.65;color:var(--ink-2)}
.prose p{margin-top:1rem;color:var(--ink-2)}
.prose p:first-child{margin-top:0}
.link-more{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--blue-deep);white-space:nowrap}
.link-more svg{width:1.1em;height:1.1em;transition:translate .15s var(--ease)}
.link-more:hover{color:var(--gold-deep)}
.link-more:hover svg{translate:3px 0}
.media{display:block;overflow:hidden;background:var(--surface);border-radius:3px}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.accent{font-family:'Merienda',cursive;font-weight:400;color:var(--gold-deep)}

/* Who we are: quiet, typographic */
.who{background:var(--paper)}
.who__grid{display:grid;gap:3rem;align-items:center}
@media(min-width:900px){.who__grid{grid-template-columns:5fr 6fr;gap:clamp(3rem,7vw,7rem)}}
.who__photo{aspect-ratio:4/5;max-width:520px}
.who__photo img{object-position:50% 25%}
.who__caption{margin-top:.9rem;font-size:.875rem;color:var(--ink-2)}
.who__caption .accent{font-size:1.05rem;margin-right:.4rem}
.words{display:grid;gap:1.4rem;margin-top:2.6rem;padding-top:2.2rem;border-top:1px solid var(--border)}
@media(min-width:640px){.words{grid-template-columns:repeat(3,1fr);gap:2rem}}
.words h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,2.8vw,2.5rem);line-height:1;letter-spacing:-.01em}
.words h3 .dot{color:var(--gold)}
.words p{margin-top:.55rem;font-size:.9375rem;color:var(--ink-2);line-height:1.55}

/* Family life: warm, alternating rows */
.family{background:var(--paper-alt)}
.family__head{max-width:44em;margin-bottom:clamp(2.5rem,5vw,4rem)}
.row{display:grid;gap:2rem;align-items:center}
.row+.row{margin-top:clamp(3rem,7vw,6rem)}
@media(min-width:900px){
  .row{grid-template-columns:7fr 5fr;gap:clamp(3rem,6vw,6rem)}
  .row--flip{grid-template-columns:5fr 7fr}
  .row--flip .row__media{order:2}
}
.row__media{aspect-ratio:3/2}
.row--tall .row__media{aspect-ratio:4/5;max-width:560px;justify-self:end}
.row h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.18;text-wrap:balance}
.row p{margin-top:1rem;color:var(--ink-2)}
.row .accent{display:block;margin-top:1.3rem;font-size:1.15rem}

/* Puppies: bright mosaic */
.pups{background:var(--paper)}
.pups__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.2rem 2rem;margin-bottom:clamp(2rem,4vw,3rem)}
.mosaic{display:grid;gap:.9rem;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(72px,8.6vw,124px);grid-auto-flow:dense}
.mosaic .tile{grid-column:span 3;grid-row:span 2;border-radius:3px;overflow:hidden;background:var(--surface);margin:0}
.mosaic .tile img{width:100%;height:100%;object-fit:cover;display:block;transition:scale .6s var(--ease)}
.mosaic .tile:hover img{scale:1.04}
.mosaic .t-a{grid-column:span 4;grid-row:span 4}
.mosaic .t-b{grid-column:span 3;grid-row:span 3}
.mosaic .t-c{grid-column:span 2;grid-row:span 2}
.mosaic .t-d{grid-column:span 5;grid-row:span 3}
.mosaic .t-e{grid-column:span 3;grid-row:span 4}
@media(max-width:899px){
  .mosaic{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;margin-inline:calc(-1*var(--container-pad));padding-inline:var(--container-pad);-webkit-overflow-scrolling:touch}
  .mosaic .tile{flex:0 0 68vw;aspect-ratio:4/5;scroll-snap-align:start}
  .mosaic .t-small{flex-basis:46vw}
}

/* Health: deep, serious, glossary */
.health{background:var(--ink);color:var(--paper)}
.health .eyebrow{color:var(--gold)}
.health .h2{color:var(--paper)}
.health .lead{color:rgba(249,247,243,.78)}
.health__grid{display:grid;gap:3rem}
@media(min-width:900px){.health__grid{grid-template-columns:5fr 7fr;gap:clamp(3rem,7vw,7rem);align-items:start}.health__intro{position:sticky;top:6.5rem}}
.gloss{list-style:none;margin:0;padding:0}
.gloss > div{position:relative;padding:1.9rem 0;border-top:1px solid rgba(249,247,243,.16)}
.gloss > div::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.gloss > div.is-in::before{transform:scaleX(1);transition:transform 1.2s var(--ease)}
.gloss > div:last-child{border-bottom:1px solid rgba(249,247,243,.16)}
.gloss dt{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.15}
.gloss dt small{display:block;font-family:var(--sans);font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.gloss dd{margin:.8rem 0 0;max-width:52ch;color:rgba(249,247,243,.78);line-height:1.65}
.health__note{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(249,247,243,.16);font-size:.9375rem;color:rgba(249,247,243,.7);max-width:44ch}
.health__note .accent{color:var(--gold);font-size:1.05rem;margin-right:.3rem}


/* Our dogs */
.dogs{background:var(--surface)}
.dogs__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.2rem 2rem;margin-bottom:clamp(2rem,4vw,3rem)}
.dogs__grid{display:grid;gap:2rem}
@media(min-width:700px){.dogs__grid{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem)}}
.dogcard__media{aspect-ratio:4/5}
.dogcard__body{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1rem}
.dogcard h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,2.4vw,2.2rem);line-height:1.1}
.dogcard h3 a:hover{color:var(--blue-deep)}
.dogcard__role{font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.dogcard p{margin-top:.5rem;color:var(--ink-2);font-size:.9375rem}

/* After they come home */
.after{background:var(--paper)}
.after__panel{display:grid;gap:2.5rem;align-items:center;padding:clamp(1.6rem,4vw,3.5rem);background:var(--paper-alt);border-radius:4px}
@media(min-width:900px){.after__panel{grid-template-columns:6fr 5fr;gap:clamp(2.5rem,5vw,5rem)}}
.after__media{aspect-ratio:3/2}
.after ul{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.7rem}
.after li{display:flex;gap:.8rem;align-items:flex-start;color:var(--ink-2)}
.after li svg{width:1.1rem;height:1.1rem;flex:none;color:var(--gold-deep);margin-top:.3rem}
.after .sig{margin-top:1.6rem;font-size:1.2rem}

/* FAQ teaser */
.faq{background:var(--paper-alt)}
.faq__grid{display:grid;gap:2.5rem}
@media(min-width:900px){.faq__grid{grid-template-columns:4fr 7fr;gap:clamp(3rem,7vw,7rem)}}
/* Closing CTA: outdoor light */
.close{position:relative;color:var(--paper);overflow:hidden;background:var(--hero-bg)}
.close__bg{position:absolute;inset:-10% 0}
.close__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.close__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(27,25,22,.92) 0%,rgba(27,25,22,.75) 45%,rgba(27,25,22,.4) 100%)}
.close__inner{position:relative;z-index:1;padding-block:clamp(5rem,11vw,9rem);max-width:40em}
.close .eyebrow{color:var(--gold)}
.close .h2{color:var(--paper)}
.close p{margin-top:1.1rem;color:rgba(249,247,243,.8);font-size:clamp(1.0625rem,1.35vw,1.1875rem)}
.close__actions{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:2rem}
.close .link-arrow{color:var(--paper)}
.close .link-arrow svg{width:1.05em;height:1.05em}

/* Scroll reveal states (armed only with JS + motion) */
html.motion [data-reveal]{opacity:0;transform:translateY(26px)}
html.motion [data-reveal-img]{opacity:0}
html.motion [data-reveal-img] img{scale:1.1}
@media(prefers-reduced-motion:reduce){
  html.motion [data-reveal]{opacity:1;transform:none}
  html.motion [data-reveal-img]{opacity:1}
  html.motion [data-reveal-img] img{scale:1}
  .gloss > div::before{transform:scaleX(1)}
}
.after__media{aspect-ratio:4/5;max-width:440px;justify-self:center}
.close__grid{display:grid;gap:3rem;align-items:center;position:relative;z-index:1}
@media(min-width:900px){.close__grid{grid-template-columns:7fr 5fr;gap:clamp(3rem,7vw,7rem)}}
.close__media{aspect-ratio:4/5;max-width:460px;justify-self:end}
.close__inner{padding-block:0}

/* explicit mosaic placement: a clean 12x8 rectangle on desktop */
@media(min-width:900px){
  .mosaic{grid-template-rows:repeat(8,clamp(64px,7.6vw,108px));grid-auto-flow:row}
  .mosaic .tile{grid-column:auto;grid-row:auto}
  .mosaic .m-a{grid-area:1/1/6/5}  .mosaic .m-g{grid-area:6/1/9/5}
  .mosaic .m-b{grid-area:1/5/4/8}  .mosaic .m-f{grid-area:4/5/7/8}  .mosaic .m-i{grid-area:7/5/9/8}
  .mosaic .m-c{grid-area:1/8/5/11} .mosaic .m-h{grid-area:5/8/9/11}
  .mosaic .m-d{grid-area:1/11/3/13} .mosaic .m-e{grid-area:3/11/5/13} .mosaic .m-j{grid-area:5/11/7/13} .mosaic .m-k{grid-area:7/11/9/13}
}
@media(max-width:899px){.mosaic .tile[data-small]{flex-basis:46vw}}

/* ---- v0.3.1 polish ---- */
/* parallax photos are oversized so the drift never exposes the box edge */
.home [data-parallax] img{position:relative;top:-6%;height:112%}
/* quiet links where the theme default (blue, underlined) is not wanted */
.home .dogcard h3 a{color:inherit;text-decoration:none}
.home .dogcard h3 a:hover{color:var(--blue-deep)}
.home .link-more,.home .link-more:hover{text-decoration:none}