/* Matt Robb's Biscuits — biscuit-grounded warm craft palette */
:root{
  --crust:#2A1C12;        /* deep roasted brown, body text on cream */
  --crust-2:#3C2A1A;      /* dark section bg */
  --crust-soft:#5A4329;   /* muted brown text */
  --cream:#F5EAD7;        /* buttermilk paper bg */
  --cream-2:#EFE1C8;      /* panel */
  --cream-3:#E7D5B6;      /* hairline / deeper panel */
  --honey:#D89A3F;        /* bright honey, decorative / on dark / large */
  --honey-ink:#8A5618;    /* deep honey, accent TEXT on cream (5.15:1) */
  --honey-bright:#E0A23A; /* butter gold, accents on dark */
  --jam:#9E3324;          /* strawberry jam, sparing secondary (5.97:1 on cream) */
  --paper-muted:#6B543A;  /* muted text on cream (>4.5) */
  --line:rgba(42,28,18,.14);
  --maxw:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Zilla Slab",Georgia,serif;
  --sans:"Hanken Grotesk",-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--crust);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%}
a{color:inherit;text-decoration:none}
img,svg{display:block}
h1,h2,h3{font-family:var(--serif);line-height:1.04;font-weight:700;letter-spacing:-.01em}

.skip{position:absolute;left:-999px;top:0;background:var(--crust);color:var(--cream);padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}

.eyebrow{
  font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--honey-ink);margin-bottom:18px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:700;font-size:.95rem;
  padding:14px 26px;border:2px solid transparent;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn.sm{padding:11px 20px;font-size:.88rem}
.btn.full{width:100%}
.btn-solid{background:var(--crust);color:var(--cream);border-color:var(--crust)}
.btn-solid:hover{background:var(--jam);border-color:var(--jam);color:var(--cream)}
.btn-ghost{background:transparent;color:var(--crust);border-color:var(--crust)}
.btn-ghost:hover{background:var(--crust);color:var(--cream)}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.hdr::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(42,28,18,.55),transparent);pointer-events:none;transition:opacity .3s}
.hdr.solid{background:var(--cream);box-shadow:0 1px 0 var(--line)}
.hdr.solid::before{opacity:0}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:74px;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:11px;color:var(--cream)}
.hdr.solid .brand{color:var(--crust)}
.brand-mark{color:var(--honey-bright);flex:none}
.hdr.solid .brand-mark{color:var(--honey)}
.brand-txt{font-family:var(--serif);font-weight:700;font-size:1.18rem;line-height:1;display:flex;flex-direction:column}
.brand-txt em{font-style:normal;font-weight:500;font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--honey-bright)}
.hdr.solid .brand-txt em{color:var(--honey-ink)}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-weight:600;font-size:.95rem;color:var(--cream);position:relative;padding:4px 0}
.hdr.solid .nav a{color:var(--crust)}
.nav a:not(.callbtn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--honey-bright);transition:right .3s var(--ease)}
.nav a:not(.callbtn):hover::after{right:0}
.nav a.callbtn{padding:10px 18px;border:2px solid var(--cream);color:var(--cream);font-weight:700}
.nav a.callbtn span{opacity:.85;font-weight:600}
.nav a.callbtn:hover{background:var(--cream);color:var(--crust)}
.hdr.solid .nav a.callbtn{border-color:var(--crust);color:var(--crust)}
.hdr.solid .nav a.callbtn:hover{background:var(--crust);color:var(--cream)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:120}
.burger span{width:26px;height:2.5px;background:var(--cream);transition:.3s var(--ease)}
.hdr.solid .burger span,.mopen .burger span{background:var(--crust)}
.mopen .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.mopen .burger span:nth-child(2){opacity:0}
.mopen .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mpanel{position:fixed;top:74px;left:0;right:0;background:var(--cream);border-top:1px solid var(--line);padding:14px 28px 26px;display:flex;flex-direction:column;z-index:90}
.mpanel a{padding:15px 4px;font-family:var(--serif);font-weight:600;font-size:1.3rem;border-bottom:1px solid var(--line);color:var(--crust)}
.mpanel a.m-call{color:var(--jam);border-bottom:0;margin-top:6px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  background:radial-gradient(120% 90% at 78% 18%,#4A3422 0%,var(--crust-2) 42%,var(--crust) 100%);
  color:var(--cream);overflow:hidden;padding:120px 0 70px}
.hero-grain{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(216,154,63,.10) 1px,transparent 1.4px);background-size:22px 22px}
.hero-in{position:relative;z-index:3;max-width:760px}
.hero-eye{color:var(--honey-bright)}
.hero-h{font-size:clamp(3rem,9vw,6.2rem);font-weight:700;letter-spacing:-.025em;margin-bottom:24px}
.hero-h .hl{color:var(--honey-bright)}
.hero-sub{font-size:clamp(1.08rem,2.1vw,1.32rem);max-width:34ch;color:#EBDCC2;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero .btn-solid{background:var(--honey);border-color:var(--honey);color:var(--crust)}
.hero .btn-solid:hover{background:var(--cream);border-color:var(--cream);color:var(--crust)}
.hero .btn-ghost{color:var(--cream);border-color:rgba(245,234,215,.5)}
.hero .btn-ghost:hover{background:var(--cream);color:var(--crust);border-color:var(--cream)}
.hero-note{font-size:.95rem;color:#C9B696;font-weight:500}
.hero-art{position:absolute;right:4%;top:50%;transform:translateY(-50%);z-index:2;opacity:.95;pointer-events:none}
@media (max-width:900px){.hero-art{opacity:.16;right:-30px}}

/* hero biscuit self-draw */
.biscuit-draw .body,.biscuit-draw .crack,.biscuit-draw .flakes,.biscuit-draw .steam path{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js-ready .biscuit-draw .body{animation:draw 1.5s var(--ease) .25s forwards}
.js-ready .biscuit-draw .crack{animation:draw 1s var(--ease) 1.05s forwards}
.js-ready .biscuit-draw .flakes{animation:draw .7s var(--ease) 1.3s forwards}
.js-ready .biscuit-draw .steam path{animation:draw 1.4s var(--ease) 1.5s forwards,float 4s ease-in-out 2.9s infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- trust strip ---------- */
.trust{background:var(--crust);color:var(--cream);border-top:3px solid var(--honey)}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:32px 22px;text-align:center;border-left:1px solid rgba(245,234,215,.12);transition:background .3s var(--ease)}
.stat:first-child{border-left:0}
.stat:hover{background:rgba(216,154,63,.08)}
.num{display:flex;align-items:center;justify-content:center;gap:.3em;font-family:var(--serif);font-weight:700;font-size:1.7rem;color:var(--honey-bright)}
.lab{display:block;font-size:.86rem;color:#C9B696;margin-top:6px;letter-spacing:.01em}
.star{width:18px;height:18px;background:var(--honey-bright);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ---------- sections ---------- */
.sec{padding:clamp(70px,9vw,118px) 0}
.sec-head{max-width:720px;margin-bottom:54px}
.sec-h{font-size:clamp(2rem,4.6vw,3.3rem);margin-bottom:20px}
.sec-h.light{color:var(--cream)}
.sec-lede{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--paper-muted);max-width:60ch}
.sec-lede.light{color:#E0CFB2}

/* biscuits / menu */
.biscuits{background:var(--cream)}
.menu-grid{display:grid;grid-template-columns:.9fr 1fr 1fr;gap:26px;align-items:start}
.menu-card.base{background:var(--crust);color:var(--cream);padding:38px 32px;align-self:stretch}
.card-kicker{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--honey-bright);font-weight:700;margin-bottom:14px}
.menu-card.base h3{font-size:2rem;color:var(--cream);margin-bottom:16px}
.card-note{color:#D7C5A8;font-size:1rem}
.menu-block-h{font-size:1.32rem;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--crust)}
.menu-block-h.sub{margin-top:34px}
.menu-list{list-style:none}
.menu-list li{display:flex;align-items:baseline;gap:10px;padding:11px 8px 11px 14px;position:relative;transition:color .25s var(--ease),background .25s var(--ease)}
.menu-list li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:3px;height:60%;background:var(--honey);transition:transform .25s var(--ease)}
.menu-list li:hover{background:var(--cream-2);color:var(--honey-ink)}
.menu-list li:hover::before{transform:translateY(-50%) scaleY(1)}
.mi{font-weight:600;font-size:1.02rem}
.mi em{display:block;font-style:normal;font-weight:500;font-size:.8rem;color:var(--paper-muted);letter-spacing:.02em;margin-top:1px}
.dots{flex:1;border-bottom:2px dotted var(--cream-3);transform:translateY(-4px)}
.mp{font-weight:600;font-size:.82rem;color:var(--paper-muted);letter-spacing:.04em;white-space:nowrap}
.menu-foot{margin-top:44px;text-align:center;font-size:1.05rem;color:var(--paper-muted)}
.menu-foot a{color:var(--jam);font-weight:700;border-bottom:2px solid transparent;transition:border-color .25s}
.menu-foot a:hover{border-color:var(--jam)}

/* find us */
.find{background:var(--crust-2);color:var(--cream)}
.find-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hours{margin:30px 0 16px;border-top:1px solid rgba(245,234,215,.14)}
.hrow{display:flex;justify-content:space-between;padding:14px 10px;border-bottom:1px solid rgba(245,234,215,.14);transition:background .25s var(--ease)}
.hrow:hover{background:rgba(216,154,63,.1)}
.hrow .day{font-weight:600}
.hrow .time{color:var(--honey-bright);font-weight:600}
.hrow.off .time{color:#A88E6A}
.find-tag{font-size:.95rem;color:#C9B696}
.find-panel{background:var(--cream);color:var(--crust);padding:0;overflow:hidden;border:3px solid var(--honey)}
.map{position:relative;height:230px;background:var(--cream-2);overflow:hidden}
.map-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px}
.map-street{position:absolute;top:50%;left:-10%;right:-10%;height:34px;transform:translateY(-50%) rotate(-7deg);
  background:var(--cream-3);display:flex;align-items:center;justify-content:center}
.map-street span{font-family:var(--serif);font-weight:600;letter-spacing:.3em;font-size:.78rem;color:var(--paper-muted)}
.map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-78%);filter:drop-shadow(0 6px 10px rgba(42,28,18,.3))}
.addr{padding:26px 28px 30px}
.addr-name{font-family:var(--serif);font-weight:700;font-size:1.3rem;margin-bottom:8px}
.addr-line{font-weight:600;margin-bottom:10px}
.addr-sub{font-size:.92rem;color:var(--paper-muted);margin-bottom:18px}

/* about */
.about{background:var(--cream)}
.about-in{display:grid;grid-template-columns:auto 1fr;gap:46px;align-items:start;max-width:920px}
.about-mark{flex:none}
.about-copy p{margin-top:18px;font-size:1.1rem;color:var(--crust-soft);max-width:60ch}
.about-copy p:first-of-type{color:var(--crust)}

/* reviews */
.reviews{background:var(--crust);color:var(--cream)}
.rev-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:46px}
.rev-score{display:flex;flex-direction:column;gap:4px}
.rev-num{font-family:var(--serif);font-weight:700;font-size:4.4rem;line-height:.9;color:var(--honey-bright)}
.rev-stars{position:relative;width:140px;height:24px;display:block}
.rev-stars::before{content:"";position:absolute;inset:0;background:var(--honey-bright);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='24' viewBox='0 0 140 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 1l3 7 7 .5-5.5 4.5 1.8 7L12 17l-6.3 3 1.8-7L2 8.5 9 8z'/%3E%3Cpath d='M41 1l3 7 7 .5-5.5 4.5 1.8 7L41 17l-6.3 3 1.8-7L31 8.5 38 8z'/%3E%3Cpath d='M70 1l3 7 7 .5-5.5 4.5 1.8 7L70 17l-6.3 3 1.8-7L60 8.5 67 8z'/%3E%3Cpath d='M99 1l3 7 7 .5-5.5 4.5 1.8 7L99 17l-6.3 3 1.8-7L89 8.5 96 8z'/%3E%3Cpath d='M128 1l3 7 7 .5-5.5 4.5 1.8 7L128 17l-6.3 3 1.8-7L118 8.5 125 8z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='24' viewBox='0 0 140 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 1l3 7 7 .5-5.5 4.5 1.8 7L12 17l-6.3 3 1.8-7L2 8.5 9 8z'/%3E%3Cpath d='M41 1l3 7 7 .5-5.5 4.5 1.8 7L41 17l-6.3 3 1.8-7L31 8.5 38 8z'/%3E%3Cpath d='M70 1l3 7 7 .5-5.5 4.5 1.8 7L70 17l-6.3 3 1.8-7L60 8.5 67 8z'/%3E%3Cpath d='M99 1l3 7 7 .5-5.5 4.5 1.8 7L99 17l-6.3 3 1.8-7L89 8.5 96 8z'/%3E%3Cpath d='M128 1l3 7 7 .5-5.5 4.5 1.8 7L128 17l-6.3 3 1.8-7L118 8.5 125 8z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.rev-count{font-size:.92rem;color:#C9B696;margin-top:8px}
.rev-lede{max-width:34ch;color:#E0CFB2;font-size:1.08rem}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev-card{padding:32px 28px;background:var(--crust-2);border-left:3px solid var(--honey);transition:background .3s var(--ease),transform .3s var(--ease)}
.rev-card:hover{background:#46331f}
.rev-card p{font-family:var(--serif);font-weight:500;font-size:1.16rem;line-height:1.4;color:var(--cream);margin-bottom:18px}
.rev-card cite{font-style:normal;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--honey-bright);font-weight:700}

/* faq */
.faq{background:var(--cream)}
.faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:start}
.faq-head{position:sticky;top:100px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:var(--serif);font-weight:600;font-size:1.22rem;transition:color .25s var(--ease)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--honey-ink)}
.faq-list summary::after{content:"";position:absolute;right:4px;top:30px;width:13px;height:13px;
  border-right:2.5px solid var(--honey-ink);border-bottom:2.5px solid var(--honey-ink);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(-135deg)}
.faq-list details[open] summary{color:var(--honey-ink)}
.faq-list p{padding:0 30px 24px 0;color:var(--paper-muted);max-width:60ch}

/* contact */
.contact{background:var(--crust-2);color:var(--cream)}
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-links{list-style:none;margin-top:34px}
.contact-links li{display:flex;align-items:baseline;gap:18px;padding:15px 0;border-bottom:1px solid rgba(245,234,215,.14)}
.cl-k{flex:none;width:96px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--honey-bright);font-weight:700}
.contact-links a{font-weight:600;font-size:1.05rem;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.contact-links a:hover{color:var(--honey-bright);border-color:var(--honey-bright)}
.form{background:var(--cream);color:var(--crust);padding:34px 32px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:8px}
.field input,.field textarea{width:100%;font-family:var(--sans);font-size:1rem;color:var(--crust);
  background:var(--cream-2);border:2px solid var(--cream-3);padding:13px 14px;transition:border-color .25s var(--ease)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--honey-ink)}
.field textarea{resize:vertical}
.field.invalid input,.field.invalid textarea{border-color:var(--jam)}
.err{display:none;color:var(--jam);font-size:.82rem;font-weight:600;margin-top:6px}
.field.invalid .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-ok{margin-top:18px;background:var(--crust);color:var(--cream);padding:16px 18px;font-weight:600;border-left:3px solid var(--honey)}

/* footer */
.footer{background:var(--crust);color:var(--cream);padding:64px 0 28px}
.foot-in{display:grid;grid-template-columns:1.3fr 2fr;gap:50px;padding-bottom:44px;border-bottom:1px solid rgba(245,234,215,.14)}
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-name{font-family:var(--serif);font-weight:700;font-size:1.5rem}
.foot-tag{color:#C9B696;font-size:.95rem;max-width:30ch}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.fc-h{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--honey-bright);font-weight:700;margin-bottom:14px}
.foot-col p{color:#D7C5A8;font-size:.95rem;margin-bottom:10px;line-height:1.7}
.foot-col a{display:block;color:var(--cream);font-weight:600;margin-bottom:8px;width:fit-content;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.foot-col a:hover{color:var(--honey-bright);border-color:var(--honey-bright)}
.foot-base{display:flex;justify-content:space-between;padding-top:24px;color:#A88E6A;font-size:.84rem;flex-wrap:wrap;gap:10px}

/* ---------- reveals ---------- */
.js-ready .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-ready .reveal.in{opacity:1;transform:none}
.js-ready .hero-eye,.js-ready .hero-h,.js-ready .hero-sub,.js-ready .hero-cta,.js-ready .hero-note{opacity:0;transform:translateY(20px)}
.js-ready .hero.lit .hero-eye{animation:rise .8s var(--ease) .1s forwards}
.js-ready .hero.lit .hero-h{animation:rise .9s var(--ease) .24s forwards}
.js-ready .hero.lit .hero-sub{animation:rise .8s var(--ease) .42s forwards}
.js-ready .hero.lit .hero-cta{animation:rise .8s var(--ease) .56s forwards}
.js-ready .hero.lit .hero-note{animation:rise .8s var(--ease) .7s forwards}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js-ready .reveal,.js-ready .hero-eye,.js-ready .hero-h,.js-ready .hero-sub,.js-ready .hero-cta,.js-ready .hero-note{opacity:1!important;transform:none!important;animation:none!important}
  .biscuit-draw .body,.biscuit-draw .crack,.biscuit-draw .flakes,.biscuit-draw .steam path{stroke-dashoffset:0!important;animation:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .menu-grid{grid-template-columns:1fr 1fr}
  .menu-card.base{grid-column:1/-1}
  .faq-in{grid-template-columns:1fr;gap:28px}
  .faq-head{position:static}
  .rev-grid{grid-template-columns:1fr}
}
@media (max-width:840px){
  .nav{display:none}
  .burger{display:flex}
  .find-in,.contact-in{grid-template-columns:1fr;gap:38px}
  .foot-in{grid-template-columns:1fr;gap:34px}
}
@media (max-width:680px){
  .trust-in{grid-template-columns:1fr 1fr}
  .stat{border-left:0;border-top:1px solid rgba(245,234,215,.12)}
  .stat:nth-child(2n){border-left:1px solid rgba(245,234,215,.12)}
  .stat:nth-child(-n+2){border-top:0}
  .menu-grid{grid-template-columns:1fr}
  .about-in{grid-template-columns:1fr;gap:24px}
  .rev-head{flex-direction:column;align-items:flex-start;gap:20px}
}
@media (max-width:480px){
  .wrap{padding:0 20px}
  .sec{padding:62px 0}
  .hero{padding:104px 0 56px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-base{flex-direction:column}
  .btn{width:100%}
  .hero-cta .btn{width:auto;flex:1}
}