/* Halal Meat Joint — neumorphic ("soft UI"), in the brand's own colours.
   The logo is a white wordmark on black and the shop is a black fascia on red
   brick, so the surface is a warm charcoal rather than the cream the brief
   started from. Shape still comes from paired shadows only — light top-left,
   dark bottom-right — with no borders and no flat colour blocks.

   Two reds, because on a dark ground one cannot do both jobs: the brand red
   fills buttons (white on it, 7.4:1) and a lifted tint carries red *text*
   (5.7:1 on the surface). The brand red as text would have been 2.3:1. */

:root{
  --surface:#211E1A;
  --surface-raised:#26231F;
  --surface-deep:#191612;
  --ink:#F5F0E8;
  --ink-muted:#B3A99B;
  --accent:#A3261F;          /* fills only */
  --accent-hover:#8A1F19;
  --accent-text:#EE7259;     /* red on the dark ground */
  --shadow-dark:#141210;
  --shadow-darker:#0D0B0A;
  --shadow-light:#312D28;

  --raised-lg: -12px -12px 24px var(--shadow-light), 12px 12px 24px var(--shadow-dark);
  --raised-md:  -8px  -8px 18px var(--shadow-light),  8px  8px 18px var(--shadow-dark);
  --raised-sm:  -5px  -5px 10px var(--shadow-light),  5px  5px 10px var(--shadow-dark);
  --inset-lg: inset 10px 10px 22px var(--shadow-dark), inset -10px -10px 22px var(--shadow-light);
  --inset-md: inset  6px  6px 12px var(--shadow-dark), inset  -6px  -6px 12px var(--shadow-light);
  --inset-sm: inset  4px  4px  8px var(--shadow-dark), inset  -4px  -4px  8px var(--shadow-light);
  --red-pressed: inset 4px 4px 10px #5E1511, inset -4px -4px 10px #C4372A;

  --display:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body:'Public Sans', system-ui, -apple-system, sans-serif;

  --gutter: clamp(16px, 5vw, 80px);
  --ease: cubic-bezier(.22,.61,.36,1);
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,.4vw + 14px,18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,video,iframe{ display:block; max-width:100%; }

h1,h2,h3{
  font-family:var(--display);
  text-transform:uppercase;
  line-height:.92;
  margin:0;
  letter-spacing:.005em;
}
/* Deliberately smaller than the brief's 112px. At that size the headline was
   the entire first screen and said nothing; the facts beside it do more work. */
h1{ font-size:clamp(38px,4.6vw,62px); font-weight:900; max-width:16ch; }
h2{ font-size:clamp(34px,4vw,54px); font-weight:800; }
.h2--sm{ font-size:clamp(30px,3.2vw,44px); }
p{ margin:0; }
a{ color:inherit; }

.wrap{ width:min(100% - (var(--gutter) * 2), 1280px); margin-inline:auto; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.sprite{ position:absolute; width:0; height:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#fff; padding:.8rem 1.2rem; border-radius:0 0 12px 0;
  font-weight:700; text-decoration:none;
}
.skip:focus{ left:0; }

a:focus-visible, button:focus-visible{
  outline:3px solid var(--accent-text); outline-offset:4px; border-radius:6px;
}

.eyebrow{
  font-size:clamp(12px,.2vw + 11px,13px); font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--accent-text); margin-bottom:.8rem;
}

.ico{ width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ico--accent{ color:var(--accent-text); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.9rem 1.5rem; border-radius:999px;
  background:var(--surface); color:var(--ink);
  font-family:var(--body); font-weight:600; font-size:.98rem; text-decoration:none;
  box-shadow:var(--raised-md);
  transition:box-shadow .15s ease;
}
.btn:hover,.btn:active{ box-shadow:var(--inset-md); }
.btn--red{ background:var(--accent); color:#fff;
  box-shadow:-8px -8px 18px var(--shadow-light), 8px 8px 18px var(--shadow-darker); }
.btn--red:hover,.btn--red:active{ background:var(--accent-hover); box-shadow:var(--red-pressed); }
.btn--red .ico{ color:#fff; }
.btn--red:focus-visible{ outline-color:var(--ink); }

.round{
  display:none; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; background:var(--surface);
  box-shadow:var(--raised-md); color:var(--accent-text);
  transition:box-shadow .15s ease;
}
.round:hover,.round:active{ box-shadow:var(--inset-md); }

@media (prefers-reduced-motion: reduce){
  .btn,.round,.card,.tile,.quote,.item{ transition:none; }
}

/* ---------- header ---------- */
.site{ padding:clamp(14px,2.2vw,26px) 0; }
.bar{
  display:flex; align-items:center; gap:1.1rem;
  padding:.7rem .8rem .7rem 1rem; border-radius:999px;
  box-shadow:var(--raised-lg);
}
.brand{ display:flex; align-items:center; gap:.85rem; text-decoration:none; margin-right:auto; }
/* The logo is already a black square, so it sits in a well rather than on a
   plate — the surface reads as its mount. */
.brand__mark{ width:46px; height:46px; border-radius:12px; box-shadow:var(--raised-sm); }
.brand__name{
  display:block; font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(18px,1.5vw,23px); line-height:1;
}
.brand__tag{ display:block; font-size:11.5px; color:var(--ink-muted); margin-top:.2rem;
  letter-spacing:.06em; text-transform:uppercase; }
.bar__nav{ display:flex; gap:.5rem; }
.pill{
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1rem;
  border-radius:999px; box-shadow:var(--raised-sm); text-decoration:none;
  font-size:.9rem; font-weight:500; transition:box-shadow .15s ease;
}
.pill:hover,.pill:active{ box-shadow:var(--inset-sm); }

/* ---------- hero ---------- */
.hero{ padding:clamp(24px,4vw,56px) 0 clamp(36px,5vw,76px); }
.hero__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4.5vw,64px); align-items:center; }
h1 em{ font-style:normal; color:var(--accent-text); }
.lede{ font-size:clamp(15.5px,.45vw + 14.5px,18px); color:var(--ink-muted); max-width:44ch; margin:1.4rem 0 0; }
.lede--sm{ font-size:1rem; margin-top:.6rem; }

/* Facts in place of the eyebrow label the brief opened with. A pill reading
   "HMC certified halal butcher" above a headline saying much the same is the
   template tell this design most needed to lose. */
.facts{ display:flex; gap:clamp(10px,1.4vw,18px); margin:2rem 0 0; padding:0; flex-wrap:wrap; }
.facts > div{ padding:.85rem 1.3rem .9rem; border-radius:20px; box-shadow:var(--inset-sm); min-width:104px; }
.facts dt{ font-size:10.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--ink-muted); }
.facts dd{ margin:.3rem 0 0; font-family:var(--display); font-weight:900;
  font-size:clamp(26px,2.4vw,34px); line-height:1; color:var(--accent-text); }
.facts__sub{ display:block; font-family:var(--body); font-weight:500; font-size:11.5px;
  letter-spacing:.02em; color:var(--ink-muted); margin-top:.35rem; text-transform:none; }

.acts{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

.frame{ border-radius:32px; padding:16px; box-shadow:var(--inset-lg); }
.frame img{ width:100%; height:auto; border-radius:20px; }
.hero__media{ position:relative; }
.frame__credit{ margin:.6rem 0 0; font-size:10.5px; color:var(--ink-muted); text-align:right; }
.hero__open{
  position:absolute; left:-10px; bottom:34px;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.15rem; border-radius:999px; background:var(--surface-raised);
  box-shadow:-8px -8px 18px var(--shadow-light), 10px 10px 22px var(--shadow-darker);
  font-weight:700; font-size:.9rem;
}
.hero__open::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink-muted); }
.hero__open.is-open{ color:var(--accent-text); }
.hero__open.is-open::before{ background:var(--accent-text); }

.stars{ display:flex; gap:.1rem; color:var(--accent-text); }
.stars .ico{ width:14px; height:14px; fill:currentColor; stroke-width:1; }
.stars--sm .ico{ width:13px; height:13px; }

/* ---------- trust strip ---------- */
.trust{ padding-bottom:clamp(36px,5vw,76px); }
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,20px); }
.tile{ padding:clamp(18px,1.9vw,28px); border-radius:26px; box-shadow:var(--raised-md);
  transition:box-shadow .15s ease; }
.tile:hover{ box-shadow:var(--inset-md); }
.well{
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  box-shadow:var(--inset-sm); color:var(--accent-text); margin-bottom:1rem;
}
.well .ico{ width:22px; height:22px; }
.well--num{ font-family:var(--display); font-weight:900; font-size:27px; line-height:1; }
.tile__h{ font-size:clamp(21px,1.7vw,27px); font-weight:800; margin-bottom:.4rem; }
.tile p{ font-size:.9rem; color:var(--ink-muted); }

/* ---------- sections ---------- */
.section{ padding:clamp(38px,5.5vw,88px) 0; }
.section--band{ background:var(--surface-deep); box-shadow:inset 0 14px 26px -14px #000,
  inset 0 -14px 26px -14px #000; }
.head{ display:flex; gap:clamp(20px,4vw,56px); align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:clamp(26px,3vw,46px); }
.head__note{ max-width:38ch; color:var(--ink-muted); font-size:.98rem; }

.cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,20px); }
.card{ display:block; height:100%; padding:clamp(20px,2vw,30px); border-radius:30px;
  box-shadow:var(--raised-lg); text-decoration:none; transition:box-shadow .15s ease; }
.card:hover,.card:active{ box-shadow:var(--inset-md); }
.num{
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  box-shadow:var(--inset-sm); font-family:var(--display); font-weight:800; font-size:18px;
  color:var(--accent-text); margin-bottom:1.2rem;
}
.card__h{ font-size:clamp(32px,3.4vw,48px); font-weight:900; margin-bottom:.45rem; }
.card p{ color:var(--ink-muted); font-size:.93rem; }
.card__cta{ display:inline-block; margin-top:1.2rem; color:var(--accent-text); font-weight:700; font-size:.92rem; }

/* ---------- own label ---------- */
.range{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,26px); }
.item{ padding:clamp(14px,1.4vw,18px); border-radius:28px; box-shadow:var(--raised-md);
  transition:box-shadow .15s ease; }
.item:hover{ box-shadow:var(--inset-md); }
.item__shot{ border-radius:20px; overflow:hidden; box-shadow:var(--inset-sm); padding:8px; }
.item__shot img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:14px; }
.item__h{ font-size:clamp(23px,2vw,30px); font-weight:800; margin:1.1rem 0 .35rem; }
.item p{ color:var(--ink-muted); font-size:.9rem; }
.range__note{ margin-top:clamp(20px,2.4vw,30px); color:var(--ink-muted); font-size:.93rem; }
.range__note a{ color:var(--accent-text); font-weight:600; text-underline-offset:3px; }

/* ---------- steps ---------- */
.steps{ list-style:none; margin:clamp(22px,2.6vw,36px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,20px); }
.step{ padding:clamp(20px,2vw,30px); border-radius:30px; box-shadow:var(--raised-md); }
.step__h{ font-size:clamp(23px,2vw,30px); font-weight:800; margin-bottom:.45rem; }
.step p{ color:var(--ink-muted); font-size:.93rem; }

/* ---------- reviews ---------- */
.quotes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,20px); }
.quote{ padding:clamp(18px,1.9vw,28px); border-radius:26px; box-shadow:var(--raised-md);
  transition:box-shadow .15s ease; }
.quote:hover{ box-shadow:var(--inset-md); }
.quote__by{ display:flex; align-items:center; gap:.85rem; margin-bottom:.9rem; }
.well--av{ width:46px; height:46px; margin:0; font-family:var(--display); font-weight:800;
  font-size:16px; color:var(--ink); }
.quote__name{ font-weight:700; font-size:.95rem; }
.quote blockquote{ margin:0; }
.quote blockquote p{ color:var(--ink-muted); font-size:.97rem; }

/* ---------- visit ---------- */
.visit__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,4vw,60px); align-items:start; }
.status{
  display:inline-flex; align-items:center; gap:.55rem; margin:1.4rem 0 1.1rem;
  padding:.65rem 1.15rem; border-radius:999px; box-shadow:var(--raised-sm);
  font-weight:700; font-size:.92rem;
}
.status::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink-muted); }
.status.is-open{ color:var(--accent-text); }
.status.is-open::before{ background:var(--accent-text); }

.hours{ padding:clamp(12px,1.4vw,20px); border-radius:30px; box-shadow:var(--inset-lg); }
.hours__t{ width:100%; border-collapse:separate; border-spacing:0 4px; }
.hours__t th, .hours__t td{ padding:.68rem 1rem; text-align:left; font-weight:500; font-size:.95rem; }
.hours__t td{ text-align:right; color:var(--ink-muted); }
.hours__t tr.is-today{ box-shadow:var(--raised-sm); border-radius:16px; }
.hours__t tr.is-today th, .hours__t tr.is-today td{ font-weight:700; color:var(--ink); }
.hours__t tr.is-today th::after{
  content:"Today"; margin-left:.65rem; padding:.16rem .5rem; border-radius:999px;
  background:var(--accent); color:#fff; font-family:var(--body);
  font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  vertical-align:middle;
}
.hours__t tr.is-today th{ border-radius:16px 0 0 16px; }
.hours__t tr.is-today td{ border-radius:0 16px 16px 0; }
.split{ display:inline; }
.split + .split::before{ content:" · "; }
.acts--visit{ margin-top:1.6rem; }

.frame--map{ padding:12px; }
.frame--map iframe{ width:100%; height:clamp(320px,36vw,440px); border:0; border-radius:20px; }
.maplink{ margin-top:.9rem; font-size:.93rem; }
.maplink a{ color:var(--accent-text); font-weight:600; }

/* ---------- footer ---------- */
.foot{
  background:var(--surface-deep);
  box-shadow:inset 0 14px 26px -14px #000;
  padding:clamp(34px,4.5vw,58px) 0 clamp(34px,4.5vw,50px);
  margin-top:clamp(20px,3vw,40px);
}
.foot__grid{ display:flex; gap:clamp(24px,4vw,56px); justify-content:space-between; flex-wrap:wrap; }
.foot__brand{ display:flex; align-items:center; gap:1rem; }
.foot__mark{ width:60px; height:60px; border-radius:14px; box-shadow:var(--raised-sm); }
.brand__name--foot{ font-size:clamp(20px,1.8vw,27px); }
.foot__line{ color:var(--ink-muted); margin-top:.25rem; }
.foot__details{ text-align:right; font-size:.94rem; color:var(--ink-muted); }
.foot__details a{ text-decoration:none; }
.foot__details a:hover{ text-decoration:underline; }
.foot__social{ display:flex; gap:1.1rem; justify-content:flex-end; margin-top:.7rem; }
.foot__social a{ display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  color:var(--accent-text); font-weight:600; }

/* ---------- sticky call bar (mobile) ---------- */
.callbar{
  display:none;
  position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:60; align-items:center; justify-content:center; gap:.6rem;
  min-height:56px; border-radius:999px; text-decoration:none;
  background:var(--accent); color:#fff; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.callbar:active{ background:var(--accent-hover); }
.callbar .ico{ color:#fff; }
.callbar:focus-visible{ outline-color:var(--ink); }

/* ---------- mobile ---------- */
@media (max-width: 900px){
  .range{ grid-template-columns:repeat(2,1fr); }
  .trust__grid,.cards{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 768px){
  .hero__grid,.visit__grid{ grid-template-columns:1fr; }
  .quotes,.steps{ grid-template-columns:1fr; }

  .bar__nav,.bar__call{ display:none; }
  .round{ display:inline-flex; }

  .hero__say{ display:contents; }
  #hero-title{ order:1; }
  .hero .lede{ order:2; }
  .hero__media{ order:3; margin:1.6rem 0 .4rem; }
  .hero .facts{ order:4; margin-top:1.2rem; }
  .hero .acts{ order:5; margin-top:1.1rem; }
  .hero .acts .btn{ width:100%; }
  .facts > div{ flex:1; min-width:0; text-align:center; }
  .hero__open{ left:auto; right:-4px; bottom:30px; }

  .card{ padding:18px; border-radius:24px; display:grid; grid-template-columns:auto 1fr; gap:0 .9rem; }
  .num{ width:42px; height:42px; margin-bottom:0; grid-row:1; }
  .card__h{ grid-column:2; align-self:center; margin-bottom:0; font-size:30px; }
  .card p{ grid-column:1 / -1; margin-top:.7rem; }
  .card__cta{ grid-column:1 / -1; margin-top:.8rem; }

  .steps{ padding:16px; border-radius:30px; box-shadow:var(--inset-lg); gap:0; }
  .step{ box-shadow:none; padding:16px 6px; display:grid; grid-template-columns:auto 1fr; gap:0 .9rem; }
  .step + .step{ box-shadow:inset 0 1px 0 var(--shadow-light); }
  .step .num{ width:38px; height:38px; box-shadow:var(--raised-sm); font-size:15px; }
  .step__h{ grid-column:2; align-self:center; margin-bottom:0; }
  .step p{ grid-column:1 / -1; margin-top:.5rem; }

  .quotes{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1); padding:6px var(--gutter) 18px; scrollbar-width:none; }
  .quotes::-webkit-scrollbar{ display:none; }
  .quote{ flex:0 0 300px; scroll-snap-align:start; }

  .hours__t th,.hours__t td{ padding:.56rem .7rem; font-size:.92rem; }
  .split{ display:block; }
  .split + .split::before{ content:none; }

  .foot{ padding-bottom:104px; }
  .foot__details{ text-align:left; }
  .foot__social{ justify-content:flex-start; }
  .callbar{ display:flex; }
}

@media (max-width: 460px){
  .trust__grid,.cards,.range{ grid-template-columns:1fr; }
  .brand__mark{ width:40px; height:40px; }
  .brand__name{ font-size:17px; }
}

/* ---------- arrival ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero__say > *, .hero__media{ animation: settle .7s var(--ease) both; }
  #hero-title{ animation-delay:.04s; }
  .hero .lede{ animation-delay:.09s; }
  .hero .facts{ animation-delay:.14s; }
  .hero .acts{ animation-delay:.19s; }
  .hero__media{ animation-delay:.1s; }
  @keyframes settle{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
}