/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 82% -10%, rgba(201,154,75,0.18), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream) 100%);
  padding: 68px 0 40px;
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items:center; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap: 10px; padding: 9px 16px 9px 10px; border-radius: 999px; background: var(--parchment); box-shadow: var(--shadow-sm); font-size: 0.82rem; font-weight: 700; color: var(--bark); margin-bottom: 26px; }
.hero-eyebrow .dot{ width: 22px; height: 22px; border-radius: 50%; background: var(--moss); display:flex; align-items:center; justify-content:center; }
.hero-eyebrow .dot svg{ width: 12px; height: 12px; color: var(--white); }
.hero h1{ font-size: clamp(2.6rem, 5vw, 4.15rem); line-height: 1.04; letter-spacing: -0.02em; }
.hero h1 em{ font-style: italic; color: var(--terracotta); font-weight: 500; }
.hero-sub{ margin-top: 24px; font-size: 1.18rem; color: var(--text-muted); max-width: 50ch; line-height: 1.65; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 36px; }
.hero-trust{ display:flex; align-items:center; gap: 22px; margin-top: 44px; flex-wrap: wrap; }
.hero-trust-item{ display:flex; align-items:center; gap: 10px; }
.hero-trust-item .num{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height:1; }
.hero-trust-item .lbl{ font-size: 0.78rem; color: var(--text-muted); max-width: 11ch; line-height: 1.25; }
.hero-trust-divider{ width: 1px; height: 34px; background: var(--line); }

.hero-visual{ position: relative; height: 560px; }
.hero-stack{ position:absolute; inset:0; }
.hero-stack .story-card{ position:absolute; width: 220px; }
.hero-stack .sc-1{ top: 0; left: 18%; transform: rotate(-6deg); z-index: 2; }
.hero-stack .sc-2{ top: 60px; right: 4%; width: 250px; transform: rotate(5deg); z-index: 3; }
.hero-stack .sc-3{ bottom: 0; left: 0; width: 190px; transform: rotate(4deg); z-index: 1; }
.hero-badge{
  position:absolute; z-index:4; left: 42%; bottom: 30px; background: var(--espresso); color: var(--parchment);
  padding: 16px 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-width: 210px;
  display:flex; gap: 12px; align-items:flex-start;
}
.hero-badge svg{ width: 26px; height:26px; color: var(--gold); flex:none; margin-top:2px; }
.hero-badge .t{ font-weight: 700; font-size: 0.92rem; line-height:1.3; }
.hero-badge .s{ font-size: 0.76rem; color: var(--tan-soft); margin-top:2px; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ height: 420px; margin-top: 8px; }
  .hero-stack .sc-1{ width: 160px; }
  .hero-stack .sc-2{ width: 190px; }
  .hero-stack .sc-3{ width: 140px; }
  .hero-badge{ left: 50%; transform: translateX(-50%); bottom: 8px; }
}
@media (max-width: 560px){
  .hero{ padding-top: 40px; }
  .hero-actions{ flex-direction: column; }
  .hero-actions .btn{ width: 100%; }
  .hero-visual{ height: 380px; }
}

/* ============================================================
   TRUST MARQUEE
   ============================================================ */
.marquee-band{ background: var(--espresso); overflow: hidden; padding: 20px 0; }
.marquee-track{ display:flex; gap: 56px; width: max-content; animation: marquee 32s linear infinite; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.marquee-item{ display:flex; align-items:center; gap: 14px; color: var(--tan-soft); font-family: var(--font-display); font-size: 1.15rem; white-space: nowrap; }
.marquee-item svg{ width: 20px; height:20px; color: var(--gold); flex:none; }
.marquee-band:hover .marquee-track{ animation-play-state: paused; }

/* ============================================================
   ABOUT SPLIT
   ============================================================ */
.about-split{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items:center; }
.about-visual{ position: relative; }
.about-visual .frame-main{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.about-visual .frame-main img{ width:100%; height:100%; object-fit: cover; }
.about-visual .frame-float{ position:absolute; width: 44%; aspect-ratio: 9/15.6; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-lg); border: 6px solid var(--parchment); bottom: -34px; right: -30px; }
.about-visual .frame-float img{ width:100%; height:100%; object-fit:cover; }
.about-copy p{ font-size: 1.05rem; color: var(--text-muted); margin-top: 20px; line-height: 1.75; }
.about-list{ margin-top: 30px; display:flex; flex-direction:column; gap: 16px; }
.about-list li{ display:flex; gap: 14px; align-items:flex-start; }
.about-list .ic{ width: 38px; height:38px; border-radius: 50%; background: rgba(85,107,59,0.12); display:flex; align-items:center; justify-content:center; flex:none; }
.about-list .ic svg{ width:19px; height:19px; color: var(--moss-dk); }
.about-list .tx b{ display:block; font-weight: 700; font-size: 1rem; }
.about-list .tx span{ font-size: 0.92rem; color: var(--text-muted); }
@media (max-width: 900px){
  .about-split{ grid-template-columns: 1fr; gap: 40px; }
  .about-visual .frame-float{ right: 0; bottom: -24px; width: 40%; }
}

/* ============================================================
   BREED GRID
   ============================================================ */
.breed-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.breed-card{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 3/4.3; box-shadow: var(--shadow-sm); transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.breed-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.breed-card img{ width:100%; height:100%; object-fit:cover; transition: transform var(--dur-slow) var(--ease-out); }
.breed-card:hover img{ transform: scale(1.06); }
.breed-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(36,24,17,0.92) 0%, rgba(36,24,17,0.15) 55%, rgba(36,24,17,0) 75%); }
.breed-card-label{ position:absolute; left:0; right:0; bottom:0; padding: 20px 18px; z-index:2; color: var(--parchment); }
.breed-card-label .name{ font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; }
.breed-card-label .meta{ font-size: 0.78rem; color: var(--tan-soft); margin-top: 4px; display:flex; align-items:center; gap:6px; }
.breed-card-label .meta svg{ width:13px; height:13px; }
@media (max-width: 1100px){ .breed-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .breed-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; } .breed-card-label .name{ font-size: 1.02rem; } }

/* ============================================================
   SERVICES GRID (intentionally asymmetric — not equal icon cards)
   ============================================================ */
.services-bento{
  display:grid; gap: 22px;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "tall a" "tall b" "tall c";
}
.service-tile{ position:relative; border-radius: var(--radius-lg); overflow:hidden; padding: 34px; display:flex; flex-direction:column; justify-content:flex-end; min-height: 190px; box-shadow: var(--shadow-sm); }
.service-tile.area-tall{ grid-area: tall; }
.service-tile.area-a{ grid-area: a; }
.service-tile.area-b{ grid-area: b; }
.service-tile.area-c{ grid-area: c; }
.service-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform var(--dur-slow) var(--ease-out); }
.service-tile::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(36,24,17,0.05) 0%, rgba(36,24,17,0.86) 100%); z-index:1; }
.service-tile:hover img{ transform: scale(1.05); }
.service-tile.tile-tall{ min-height: 100%; }
.service-tile .tt{ position:relative; z-index:2; color: var(--parchment); }
.service-tile .tt h3{ color: var(--parchment); font-size: 1.5rem; }
.service-tile .tt p{ color: var(--tan-soft); margin-top: 10px; font-size: 0.95rem; max-width: 32ch; }
.service-tile .tt .btn{ margin-top: 18px; }
.service-tile.tile-flat{ background: var(--moss); min-height: 140px; justify-content: center; }
.service-tile.tile-flat.tile-flat-alt{ background: var(--bark); }
.service-tile.tile-flat::after{ display:none; }
.service-tile.tile-flat .tt{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.service-tile.tile-flat svg{ width: 34px; height:34px; color: var(--gold); flex:none; }
@media (max-width: 980px){
  .services-bento{ grid-template-columns: 1fr 1fr; grid-template-areas: "tall tall" "a b" "c c"; }
  .service-tile.area-tall{ min-height: 320px; }
  .service-tile.area-c{ min-height: 140px; }
}
@media (max-width: 640px){
  .services-bento{ grid-template-columns: 1fr; grid-template-areas: "tall" "a" "b" "c"; }
}

/* ============================================================
   PROCESS
   ============================================================ */
.process-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.process-row::before{ content:""; position:absolute; top: 26px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 20px); }
.process-step{ position: relative; padding-right: 24px; }
.process-dot{ width: 54px; height: 54px; border-radius: 50%; background: var(--parchment); border: 2px solid var(--terracotta); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-sm); position: relative; z-index: 2; }
.process-dot svg{ width: 24px; height:24px; color: var(--terracotta-dk); }
.process-step h4{ margin-top: 20px; font-size: 1.12rem; }
.process-step p{ margin-top: 8px; color: var(--text-muted); font-size: 0.92rem; line-height:1.6; }
@media (max-width: 900px){
  .process-row{ grid-template-columns: 1fr; gap: 32px; }
  .process-row::before{ display:none; }
}

/* ============================================================
   TESTIMONIAL / STORY SCROLLER
   ============================================================ */
.story-scroll-wrap{ position: relative; }
.story-scroll{ display:flex; gap: 20px; overflow-x: auto; padding: 6px 6px 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.story-scroll::-webkit-scrollbar{ display:none; }
.story-scroll .story-card{ width: 235px; scroll-snap-align: start; }
.scroll-nav{ display:flex; gap: 10px; margin-top: 6px; justify-content:flex-end; }
.scroll-btn{ width: 46px; height:46px; border-radius: 50%; background: var(--parchment); box-shadow: var(--shadow-sm); display:flex; align-items:center; justify-content:center; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.scroll-btn:hover{ background: var(--cream-2); transform: translateY(-2px); }
.scroll-btn svg{ width: 19px; height:19px; }

.quote-card{ background: var(--parchment); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); display:flex; flex-direction: column; gap: 16px; height: 100%; }
.quote-card .stars{ display:flex; gap:4px; }
.quote-card .stars svg{ width:16px; height:16px; color: var(--gold); }
.quote-card p{ font-family: var(--font-display); font-size: 1.14rem; line-height: 1.55; font-style: italic; color: var(--ink); flex:1; }
.quote-who{ display:flex; align-items:center; gap: 12px; }
.quote-avatar{ width: 44px; height:44px; border-radius: 50%; overflow:hidden; flex:none; background: var(--cream-2); }
.quote-avatar img{ width:100%; height:100%; object-fit:cover; }
.quote-who .n{ font-weight: 700; font-size: 0.94rem; }
.quote-who .s{ font-size: 0.8rem; color: var(--text-muted); }
.quote-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px){ .quote-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .quote-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{ position: relative; overflow:hidden; border-radius: var(--radius-lg); background: var(--espresso); padding: 64px 56px; display:flex; align-items:center; justify-content:space-between; gap: 32px; }
.cta-banner::before{ content:""; position:absolute; right:-60px; top:-60px; width: 260px; height:260px; border-radius:50%; background: radial-gradient(circle, rgba(201,154,75,0.28), transparent 70%); }
.cta-banner-copy h2{ color: var(--parchment); font-size: clamp(1.8rem, 3vw, 2.5rem); max-width: 16ch; }
.cta-banner-copy p{ color: var(--tan-soft); margin-top: 12px; max-width: 46ch; }
.cta-banner-actions{ display:flex; gap: 14px; flex: none; position: relative; z-index: 1; }
@media (max-width: 820px){
  .cta-banner{ flex-direction: column; align-items:flex-start; padding: 42px 28px; }
  .cta-banner-actions{ flex-direction: column; width: 100%; }
  .cta-banner-actions .btn{ width:100%; }
}

/* ============================================================
   HOME FAQ layout
   ============================================================ */
.faq-layout{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
@media (max-width: 900px){ .faq-layout{ grid-template-columns: 1fr; gap: 24px; } }