/* ============================================================
   Noels Family Butchers — Ystrad Mynach
   Palette taken from the brand itself:
   - Ink:   the black fascia and logo background
   - Bone:  the white serif lettering
   - Slate: the painted shopfront
   - Stripe: the red in the aprons, used sparingly
   ============================================================ */

:root{
  --ink:#121417;
  --coal:#1b1e22;
  --slate:#3e4d57;
  --slate-deep:#2c3942;
  --bone:#f6f3ed;
  --paper:#fcfbf8;
  --stripe:#9e2f2a;
  --line:rgba(18,20,23,.12);
  --line-light:rgba(246,243,237,.18);
  --serif:'Cinzel',serif;
  --sans:'Inter',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,.brand-word,.kicker{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.15;
}
h2{font-size:clamp(1.75rem,4vw,2.75rem)}
h3{font-size:1.05rem;letter-spacing:.12em}
.center{text-align:center}
.lede{max-width:46rem;margin:1rem auto 0;font-size:1.06rem;color:rgba(18,20,23,.75)}
.section-dark .lede{color:rgba(246,243,237,.72)}

.kicker{
  font-size:.78rem;
  letter-spacing:.3em;
  color:var(--stripe);
  text-align:center;
  margin-bottom:.75rem;
}
.section-dark .kicker,.section-slate .kicker{color:#cf6a60}
.split .kicker{text-align:left}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--ink);
  color:var(--bone);
  font-size:.8rem;
  letter-spacing:.05em;
  text-align:center;
  padding:.45rem 1rem;
}
.topbar a{color:var(--bone);text-decoration:none;font-weight:600}
.topbar .star{letter-spacing:.2em;font-size:.7rem;vertical-align:1px}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:2rem;
  padding:1rem clamp(1rem,4vw,3rem);
  background:rgba(252,251,248,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.nav.scrolled{box-shadow:0 6px 24px rgba(18,20,23,.08)}
.nav-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand-mark{width:54px;height:34px;color:var(--ink)}
.brand-word{font-size:.95rem;letter-spacing:.14em;white-space:nowrap}
.brand-word em{font-style:normal;color:var(--slate)}
.nav nav{display:flex;gap:1.6rem;margin-left:auto}
.nav nav a{
  text-decoration:none;font-size:.82rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding-bottom:2px;border-bottom:2px solid transparent;
  transition:border-color .2s;
}
.nav nav a:hover{border-color:var(--stripe)}
.nav-call{margin-left:.5rem}
.nav-toggle{display:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);font-weight:600;font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:.85rem 1.7rem;border:2px solid transparent;
  transition:all .25s;
}
.btn-solid{background:var(--ink);color:var(--bone)}
.btn-solid:hover{background:var(--slate)}
.btn-dark{background:var(--ink);color:var(--bone)}
.btn-dark:hover{background:var(--stripe)}
.btn-light{background:var(--bone);color:var(--ink)}
.btn-light:hover{background:var(--stripe);color:var(--bone)}
.btn-ghost{border-color:var(--bone);color:var(--bone)}
.btn-ghost:hover{background:var(--bone);color:var(--ink)}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--bone)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:92vh;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--bone);
  text-align:center;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center 30%;
  opacity:.22;filter:grayscale(60%) contrast(1.1);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(18,20,23,.85) 100%);
}
.hero-inner{position:relative;z-index:2;padding:4rem 1.5rem;max-width:60rem}
.hero-logo{
  width:clamp(170px,24vw,260px);height:auto;margin:0 auto 1.5rem;
  mix-blend-mode:lighten;
  animation:fadeUp 1s ease both;
}
.eyebrow{
  font-size:.78rem;letter-spacing:.35em;text-transform:uppercase;
  color:rgba(246,243,237,.65);margin-bottom:1.2rem;
  animation:fadeUp 1s .15s ease both;
}
.hero h1{
  font-size:clamp(1.9rem,4.5vw,3.2rem);
  max-width:24ch;margin:0 auto;text-wrap:balance;
  animation:fadeUp 1s .3s ease both;
}
.hero-sub{
  max-width:38rem;margin:1.4rem auto 2.2rem;
  font-size:1.08rem;color:rgba(246,243,237,.78);
  animation:fadeUp 1s .45s ease both;
}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fadeUp 1s .6s ease both}
.scroll-cue{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  color:rgba(246,243,237,.6);text-decoration:none;font-size:1.4rem;z-index:2;
  animation:bob 2s ease-in-out infinite;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- Ticker ---------- */
.ticker{
  background:var(--stripe);color:var(--bone);
  overflow:hidden;white-space:nowrap;
  border-top:1px solid rgba(0,0,0,.2);
}
.ticker-track{
  display:inline-flex;gap:3.5rem;padding:.7rem 0;
  font-family:var(--serif);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  animation:ticker 36s linear infinite;
}
.ticker-track span{flex:none}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:clamp(4rem,9vw,7.5rem) clamp(1.25rem,5vw,4rem)}
.section-dark{background:var(--ink);color:var(--bone)}
.section-slate{background:var(--slate);color:var(--bone)}
.container{max-width:72rem;margin:0 auto}

/* split layout */
.split{
  max-width:74rem;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.split-flip .split-media{order:2}
.split-media img{
  width:100%;aspect-ratio:4/3.4;object-fit:cover;
  box-shadow:18px 18px 0 var(--slate);
}
.section-slate .split-media img{box-shadow:18px 18px 0 var(--slate-deep)}
.split-media figcaption{
  font-size:.82rem;color:inherit;opacity:.6;margin-top:1.6rem;font-style:italic;
}
.split-copy h2{margin-bottom:1.2rem}
.split-copy p{margin-bottom:1rem;font-size:1.02rem}
.section-slate .split-copy p{color:rgba(246,243,237,.85)}

.checks{list-style:none;margin-top:1.4rem}
.checks li{
  padding-left:1.7rem;position:relative;margin-bottom:.6rem;font-weight:500;
}
.checks li::before{
  content:"★";position:absolute;left:0;color:var(--stripe);font-size:.85rem;top:.15rem;
}

/* ---------- Cards ---------- */
.grid{display:grid;gap:1.25rem;margin-top:3rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  border:1px solid var(--line-light);
  padding:2rem 1.6rem;position:relative;
  transition:transform .3s,border-color .3s,background .3s;
}
.card:hover{transform:translateY(-6px);border-color:var(--bone);background:rgba(246,243,237,.04)}
.card-num{
  font-family:var(--serif);font-size:.75rem;letter-spacing:.25em;
  color:#cf6a60;display:block;margin-bottom:1rem;
}
.card h3{margin-bottom:.7rem}
.card p{font-size:.95rem;color:rgba(246,243,237,.7)}

.pack{
  background:var(--bone);border-top:4px solid var(--ink);
  padding:2rem 1.5rem;
  transition:transform .3s,border-color .3s;
}
.pack:hover{transform:translateY(-6px);border-top-color:var(--stripe)}
.pack h3{margin-bottom:.7rem}
.pack p{font-size:.93rem;color:rgba(18,20,23,.72)}
.cta-row{margin-top:3rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---------- Photo band ---------- */
.band{max-height:440px;overflow:hidden;background:var(--ink)}
.band img{width:100%;height:440px;object-fit:cover;object-position:center}

/* ---------- Quotes ---------- */
.quote{
  border:1px solid var(--line-light);padding:2.2rem 1.8rem;
  display:flex;flex-direction:column;gap:1.2rem;
}
.quote p{
  font-family:var(--serif);font-size:1.05rem;text-transform:none;
  letter-spacing:.02em;line-height:1.5;
}
.quote cite{
  font-style:normal;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:#cf6a60;margin-top:auto;
}
.quote cite::before{content:"★★★★★  ";color:var(--bone);letter-spacing:.1em}

/* ---------- Visit ---------- */
.visit-grid{
  display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:1.25rem;margin-top:3rem;
}
.visit-card{background:var(--bone);padding:2rem 1.8rem;border-top:4px solid var(--ink)}
.visit-card h3{margin-bottom:1.2rem}
.hours{width:100%;border-collapse:collapse;font-size:.95rem}
.hours td{padding:.45rem 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-weight:500}
.hours tr.today td{font-weight:700;color:var(--stripe)}
address{font-style:normal;margin-bottom:1rem;line-height:1.7}
.big-link{
  font-family:var(--serif);font-size:1.4rem;text-decoration:none;
  display:inline-block;margin:.3rem 0;
}
.big-link:hover{color:var(--stripe)}
.visit-card p a{color:var(--ink)}
.visit-map iframe{width:100%;height:100%;min-height:320px;border:0;filter:grayscale(35%)}

/* ---------- Footer ---------- */
.footer{
  background:var(--ink);color:rgba(246,243,237,.75);
  text-align:center;padding:4rem 1.5rem 3rem;font-size:.9rem;
}
.footer-logo{margin:0 auto 1rem;mix-blend-mode:lighten;width:110px;height:auto}
.footer-stars{letter-spacing:.35em;color:var(--bone);margin-bottom:1rem;font-size:.8rem}
.footer a{color:var(--bone)}
.footer-small{margin-top:.5rem;font-size:.8rem;opacity:.7}

/* ---------- Reveal on scroll ---------- */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-logo,.eyebrow,.hero h1,.hero-sub,.hero-cta{animation:none}
  .ticker-track{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .visit-grid{grid-template-columns:1fr 1fr}
  .visit-map{grid-column:1/-1}
  .nav nav{display:none}
  .nav-call{margin-left:auto}
  .nav-toggle{
    display:flex;flex-direction:column;gap:5px;
    background:none;border:0;cursor:pointer;padding:.4rem;
  }
  .nav-toggle span{width:24px;height:2px;background:var(--ink)}
  .nav.open nav{
    display:flex;flex-direction:column;gap:1.1rem;
    position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:1.5rem clamp(1rem,4vw,3rem);
  }
}
@media (max-width:760px){
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split-flip .split-media{order:0}
  .split-media img{box-shadow:10px 10px 0 var(--slate)}
  .band img{height:280px}
  .visit-grid{grid-template-columns:1fr}
  .brand-word{font-size:.8rem}
}
@media (max-width:520px){
  .grid-4{grid-template-columns:1fr}
  .topbar{font-size:.7rem}
  .nav-call{display:none}
}