@charset "UTF-8";
:root {
  --bg:#141412;
  --surface:#1b1b18;
  --text:#f6f4ed;
  --muted:#b4b2a9;
  --orange:#ff861c;
  --line:#42423a;
  --display:'Barlow Condensed',Impact,sans-serif;
  --body:'DM Sans',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:105px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img {
  display:block;
  max-width:100%
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:var(--display);
  line-height:1;
  font-weight:700
}
h2 {
  font-size:clamp(42px,4.7vw,68px);
  letter-spacing:-.015em
}
h3 {
  font-size:26px
}
p {
  color:var(--muted)
}
.wrap {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.section {
  padding-block:104px
}
.orange {
  color:var(--orange)
}
.header {
  height:80px;
  padding:0 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:sticky;
  top:0;
  z-index:10;
  background:#141412f5;
  border-bottom:1px solid #ffffff15
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-size:36px;
  font-weight:700;
  white-space:nowrap;
  line-height:1
}
.brand-dot {
  color:var(--orange)
}
.bull {
  display:block;
  width:48px;
  height:48px;
  flex-shrink:0;
  background-image:url('assets/menu-reference.jpg');
  background-size:390px auto;
  background-position:-172px -75px;
  border-radius:50%
}
.header nav {
  display:flex;
  gap:40px;
  font-size:14px;
  font-weight:600
}
.header nav a {
  padding:13px 0;
  position:relative
}
.header nav a::after {
  content:'';
  position:absolute;
  bottom:7px;
  left:0;
  right:0;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease)
}
.header nav a:hover::after {
  transform:scaleX(1)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:54px;
  padding:14px 24px;
  background:var(--orange);
  border:1px solid var(--orange);
  border-radius:3px;
  color:var(--bg);
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  transition:background .25s var(--ease),transform .25s var(--ease),color .25s var(--ease)
}
.button span[aria-hidden] {
  font-size:23px;
  line-height:1;
  transition:transform .25s var(--ease)
}
.button:hover {
  background:#ffad52;
  transform:translateY(-2px)
}
.button:hover span[aria-hidden] {
  transform:translate(2px,-2px)
}
.button:active {
  transform:translateY(0) scale(.98)
}
.nav-call {
  min-height:44px;
  padding:10px 18px;
  gap:25px
}
.outline {
  background:transparent;
  border-color:#6b6a60;
  color:var(--text)
}
.outline:hover {
  background:var(--text);
  color:var(--bg)
}
:focus-visible {
  outline:3px solid #ffd29b;
  outline-offset:5px
}
.skip {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:20;
  background:var(--orange);
  color:var(--bg);
  padding:12px
}
.skip:focus {
  top:12px
}
.hero {
  min-height:650px;
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  padding-block:65px 85px
}
.hero-copy {
  position:relative;
  z-index:2;
  pointer-events:none
}
.hero-copy a {
  pointer-events:auto
}
.eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:1.7px;
  color:var(--text);
  margin-bottom:28px
}
.eyebrow span {
  color:var(--orange);
  margin-left:18px
}
.hero h1 {
  font-size:clamp(68px,6.65vw,100px);
  font-weight:800;
  letter-spacing:-1.5px;
  line-height:1.04;
  white-space:nowrap
}
.brush {
  position:relative;
  display:inline-block;
  color:var(--bg);
  padding:0 15px 8px 9px;
  margin-left:-9px;
  isolation:isolate
}
.brush::before {
  content:'';
  position:absolute;
  inset:4px -7px 0 -6px;
  z-index:-1;
  background:var(--orange);
  clip-path:polygon(1% 7%,96% 0,94% 8%,100% 6%,96% 19%,99% 23%,96% 36%,99% 40%,96% 52%,99% 59%,96% 68%,98% 80%,94% 82%,96% 91%,1% 100%,3% 89%,0 87%,2% 73%,0 64%,2% 49%,0 37%,3% 30%,0 24%);
  transform:rotate(-1deg)
}
.hero-copy>p:not(.eyebrow) {
  margin-top:28px;
  max-width:440px;
  font-size:16px
}
.actions {
  display:flex;
  gap:12px;
  margin-top:32px
}
.hero-photo {
  position:absolute;
  right:-48px;
  top:0;
  bottom:0;
  width:65%;
  overflow:hidden
}
.hero-photo img {
  height:100%;
  width:100%;
  max-width:none;
  object-fit:cover;
  object-position:60% center
}
.hero-photo::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--bg),transparent 28%),linear-gradient(0deg,var(--bg),transparent 22%)
}
.mobile-break {
  display:none
}
.brand-line {
  border-block:1px solid var(--line);
  overflow:hidden
}
.brand-line .wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-block:17px;
  font-family:var(--display);
  font-size:22px;
  letter-spacing:1px;
  font-weight:600;
  white-space:nowrap
}
.line-star {
  font-size:29px;
  color:var(--orange)
}
.about {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}
.about-heading>p {
  max-width:420px;
  margin-top:28px
}
.text-link {
  display:inline-block;
  font-size:14px;
  margin-top:28px;
  border-bottom:1px solid var(--orange);
  padding-bottom:5px
}
.text-link:hover {
  color:var(--orange)
}
.qualities {
  display:grid;
  gap:24px
}
.qualities article {
  display:grid;
  grid-template-columns:38px 1fr;
  gap:18px
}
.quality-no {
  font-family:var(--display);
  font-size:22px;
  color:var(--orange)
}
.qualities h3 {
  font-size:24px;
  margin-bottom:8px
}
.qualities p {
  font-size:14px
}
.menu-section {
  background:#1a1a17;
  border-top:1px solid #ffffff0d
}
.menu-heading {
  text-align:center
}
.menu-heading .eyebrow {
  color:var(--muted);
  margin-bottom:18px
}
.menu-heading>p:last-child {
  margin-top:18px
}
.category-nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin:38px 0 42px
}
.category-nav a {
  font-size:14px;
  font-weight:600;
  padding:10px 20px;
  border:1px solid transparent;
  border-radius:3px;
  transition:background .2s,color .2s
}
.category-nav a:hover,.category-nav a.active {
  background:var(--orange);
  color:var(--bg)
}
.menu-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:20px
}
.menu-card {
  grid-column:span 3;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
  scroll-margin-top:110px;
  position:relative
}
.menu-content {
  padding:30px 32px
}
.menu-content h3 {
  font-size:35px;
  display:flex;
  align-items:center;
  gap:14px
}
.menu-content h3>span {
  font-size:19px;
  color:var(--orange);
  border-right:1px solid var(--line);
  padding-right:14px
}
.category-description {
  font-size:13px;
  margin:12px 0 20px
}
.menu-list {
  margin:20px 0 0
}
.menu-list>div {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:18px;
  padding:12px 0;
  border-bottom:1px solid #ffffff13
}
.menu-list>div:last-child {
  border:0
}
.menu-list dt {
  font-size:16px;
  font-weight:500;
  line-height:1.45
}
.menu-list dd {
  margin:0;
  color:var(--orange);
  font-family:var(--display);
  font-size:27px;
  font-weight:600;
  white-space:nowrap;
  line-height:1.2
}
.menu-list dd small {
  font-size:17px
}
.menu-list dt>small {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
  font-weight:400
}
.pick {
  display:inline-block;
  color:var(--orange);
  font-size:9px;
  font-weight:700;
  border:1px solid #ff861c65;
  letter-spacing:.5px;
  padding:2px 5px;
  vertical-align:middle;
  margin-left:6px
}
.kebab-card {
  grid-row:span 2
}
.menu-food {
  height:250px;
  overflow:hidden
}
.menu-food img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease)
}
.menu-card:hover .menu-food img {
  transform:scale(1.04)
}
.burger-photo,.langosz-photo {
  position:absolute;
  width:155px;
  height:155px;
  right:-26px;
  bottom:-60px;
  background-image:url('assets/menu-reference.jpg');
  background-size:950px auto;
  background-position:-23px -379px;
  opacity:.22;
  pointer-events:none;
  border-radius:50%
}
.langosz-photo {
  background-position:-343px -405px
}
.menu-card:not(.kebab-card) .menu-content {
  position:relative;
  z-index:1
}
.zap-card {
  grid-column:span 6
}
.zap-card .menu-content {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  column-gap:45px
}
.zap-card h3 {
  grid-column:1;
  align-self:start
}
.zap-card .category-description {
  grid-column:1;
  grid-row:2
}
.zap-card .two-prices {
  grid-column:2;
  grid-row:2 / span 3;
  margin-top:0
}
.size-label {
  grid-column:2;
  grid-row:1;
  display:flex;
  justify-content:flex-end;
  gap:35px;
  align-items:center;
  color:var(--muted);
  font-size:11px;
  font-weight:600
}
.two-prices>div {
  grid-template-columns:1fr 55px 55px
}
.two-prices dd {
  text-align:right
}
.compact {
  grid-column:span 2
}
.compact .menu-content {
  padding:26px 23px
}
.compact h3 {
  font-size:29px;
  gap:10px
}
.compact .menu-list dt {
  font-size:14px
}
.compact .menu-list>div {
  min-height:58px
}
.menu-note {
  font-size:12px;
  margin-top:22px;
  text-align:center
}
.order-section {
  background:var(--orange);
  color:var(--bg);
  padding:66px 0
}
.order-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.order-inner h2 {
  font-size:clamp(44px,4.7vw,68px)
}
.order-inner p {
  color:#352211;
  margin-top:20px;
  font-size:14px
}
.dark {
  background:var(--bg);
  color:var(--text);
  border-color:var(--bg);
  padding:20px 27px;
  min-width:290px
}
.dark>span:first-child {
  font-size:30px
}
.dark small {
  display:block;
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--orange);
  margin-bottom:5px
}
.dark:hover {
  background:#30302a
}
.contact {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px
}
.contact address {
  font-style:normal;
  font-size:18px;
  margin:25px 0 16px
}
.contact-phone {
  font-size:24px;
  font-weight:600
}
.contact-phone span {
  color:var(--orange);
  margin-left:15px
}
.hours {
  margin-block:33px
}
.hours h3 {
  font-size:23px;
  margin-bottom:16px
}
.hours dl {
  margin:0
}
.hours dl>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:7px 0;
  font-size:14px
}
.hours dd {
  margin:0;
  font-variant-numeric:tabular-nums
}
.hours p {
  font-size:12px;
  margin-top:12px
}
.map-panel {
  align-self:stretch;
  min-height:480px;
  border:1px solid var(--line);
  border-radius:5px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#22231e
}
.map-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 25px;
  background:var(--surface);
  font-family:var(--display);
  font-size:29px
}
.map-caption small {
  display:block;
  font-family:var(--body);
  font-size:12px;
  color:var(--muted);
  margin-top:3px
}
.map-caption>span:last-child {
  color:var(--orange)
}
footer {
  border-top:1px solid var(--line);
  padding-top:32px;
  padding-bottom:25px
}
.footer-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.footer-main p {
  font-size:14px
}
.footer-main>a:last-child {
  font-size:13px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
  margin-top:32px
}
.social-placeholder {
  border:0;
  background:none;
  color:inherit;
  padding:0;
  cursor:pointer;
  font-size:12px
}
.social-placeholder:hover,footer a:hover {
  color:var(--orange)
}
.concept-note {
  font-size:10px;
  margin-top:20px;
  opacity:.8
}
dialog {
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:5px;
  width:min(500px,calc(100% - 32px));
  padding:42px
}
dialog::backdrop {
  background:#000b
}
dialog h2 {
  font-size:40px
}
dialog p {
  margin:24px 0
}
dialog .button {
  gap:15px
}
.dialog-close {
  position:absolute;
  right:12px;
  top:8px;
  background:none;
  border:0;
  color:var(--text);
  font-size:28px;
  cursor:pointer;
  width:40px;
  height:40px
}
@media(min-width:1600px) {
  .hero-photo {
    right:-80px
  }
  .hero {
    min-height:700px
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .header {
    padding-inline:32px;
    height:78px
  }
  .hero {
    min-height:600px
  }
  .hero-photo {
    right:-32px
  }
  .header nav {
    gap:25px
  }
  .about {
    gap:50px
  }
  .contact {
    gap:45px
  }
  .compact .menu-content {
    padding:23px 18px
  }
  .compact h3 {
    font-size:25px
  }
  .compact h3>span {
    padding-right:8px
  }
  .menu-content {
    padding:25px
  }
  .hero h1 {
    font-size:7.3vw
  }
  .hero-copy>p:not(.eyebrow) {
    max-width:355px
  }
  .hero .actions {
    gap:9px
  }
  .hero .button {
    padding:14px 18px;
    gap:18px
  }
  .order-inner .dark {
    min-width:250px
  }
}
@media(max-width:767px) {
  html {
    scroll-padding-top:90px
  }
  .wrap {
    width:calc(100% - 40px)
  }
  .section {
    padding-block:64px
  }
  .header {
    height:72px;
    padding:0 20px;
    gap:15px
  }
  .brand {
    font-size:29px;
    gap:5px
  }
  .bull {
    width:36px;
    height:40px;
    background-size:325px auto;
    background-position:-145px -63px
  }
  .header nav {
    gap:16px;
    margin-left:auto
  }
  .header nav a {
    font-size:12px
  }
  .nav-call {
    display:none
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-top:40px;
    padding-bottom:0;
    min-height:0
  }
  .hero-copy {
    pointer-events:auto
  }
  .hero h1 {
    font-size:clamp(48px,10vw,76px);
    letter-spacing:-1px
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:1px;
    margin-bottom:24px
  }
  .eyebrow span {
    margin-left:8px
  }
  .hero-copy>p:not(.eyebrow) {
    font-size:14px;
    margin-top:22px;
    max-width:100%
  }
  .hero .actions {
    margin-top:25px;
    gap:10px
  }
  .hero .button {
    min-height:50px;
    flex:1;
    gap:12px;
    font-size:12px;
    padding:13px 15px
  }
  .hero-photo {
    position:relative;
    right:auto;
    top:auto;
    bottom:auto;
    width:calc(100% + 40px);
    margin:18px -20px 0;
    height:310px
  }
  .hero-photo img {
    object-position:50% 55%
  }
  .hero-photo::after {
    background:linear-gradient(180deg,var(--bg),transparent 23%),linear-gradient(0deg,var(--bg),transparent 16%)
  }
  .brand-line .wrap {
    font-size:16px;
    justify-content:center;
    gap:23px;
    padding:13px 0
  }
  .brand-line .wrap>span:nth-child(n+3) {
    display:none
  }
  .line-star {
    font-size:21px
  }
  .about {
    grid-template-columns:1fr;
    gap:40px
  }
  .about-heading>p {
    font-size:15px
  }
  .qualities {
    gap:25px
  }
  .qualities h3 {
    font-size:23px
  }
  .qualities p {
    font-size:13px
  }
  .menu-heading {
    text-align:left
  }
  .menu-heading h2 {
    font-size:45px
  }
  .menu-heading h2 .orange {
    display:block
  }
  .category-nav {
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow:auto;
    margin:28px -20px;
    padding:0 20px 12px;
    scrollbar-width:thin;
    scrollbar-color:var(--orange) transparent
  }
  .category-nav a {
    flex-shrink:0;
    padding:9px 15px;
    font-size:13px
  }
  .menu-grid {
    grid-template-columns:1fr;
    gap:18px
  }
  .menu-card,.kebab-card,.zap-card,.compact {
    grid-column:auto;
    grid-row:auto
  }
  .menu-content,.compact .menu-content {
    padding:25px 22px
  }
  .menu-content h3,.compact h3 {
    font-size:32px
  }
  .menu-food {
    height:210px
  }
  .menu-list dt,.compact .menu-list dt {
    font-size:15px
  }
  .menu-list dd {
    font-size:26px
  }
  .menu-list>div {
    gap:10px;
    padding-block:13px
  }
  .pick {
    font-size:8px;
    margin-left:4px
  }
  .zap-card .menu-content {
    display:block
  }
  .size-label {
    gap:29px;
    margin-top:20px
  }
  .two-prices>div {
    grid-template-columns:1fr 46px 46px
  }
  .two-prices dt {
    font-size:13px
  }
  .two-prices dd {
    font-size:23px
  }
  .menu-note {
    text-align:left;
    font-size:11px
  }
  .order-section {
    padding:47px 0
  }
  .order-inner {
    flex-direction:column;
    align-items:stretch;
    gap:28px
  }
  .order-inner h2 {
    font-size:43px
  }
  .order-inner p {
    max-width:270px
  }
  .order-inner .dark {
    min-width:0;
    align-self:flex-start;
    gap:40px
  }
  .contact {
    grid-template-columns:1fr;
    gap:36px
  }
  .contact-info>h2 {
    font-size:49px
  }
  .hours {
    max-width:430px
  }
  .map-panel {
    min-height:350px
  }
  .footer-main {
    flex-wrap:wrap;
    gap:20px
  }
  .footer-main p {
    display:none
  }
  .footer-main>a:last-child {
    font-size:11px
  }
  .footer-bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    font-size:11px
  }
  .social-placeholder {
    text-align:left;
    font-size:11px
  }
  .concept-note {
    font-size:9px
  }
  .desktop-break {
    display:none
  }
}
@media(max-width:359px) {
  .header {
    padding-inline:15px;
    gap:8px
  }
  .header nav {
    gap:12px
  }
  .brand {
    font-size:25px
  }
  .bull {
    display:none
  }
  .hero h1 {
    font-size:45px
  }
  .hero .button {
    gap:8px;
    padding-inline:10px;
    font-size:11px
  }
  .hero .button span[aria-hidden] {
    font-size:18px
  }
  .hero-photo {
    height:260px
  }
  .eyebrow {
    font-size:9px
  }
  .menu-content,.compact .menu-content {
    padding:23px 17px
  }
  .pick {
    display:table;
    margin:4px 0 0
  }
  .order-inner h2 {
    font-size:37px
  }
}
.map-panel {
  position:relative
}
.map-fallback {
  display:flex;
  flex:1;
  min-height:410px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:20px;
  text-align:center;
  background:#20211c
}
.map-fallback .location-mark {
  font-family:var(--display);
  font-size:130px;
  font-weight:700;
  line-height:1;
  color:var(--orange);
  letter-spacing:-4px
}
.map-fallback p {
  font-family:var(--display);
  font-size:30px;
  color:var(--text);
  margin:16px 0 25px
}
.map-fallback .button {
  gap:25px
}
.hero .button {
  white-space:nowrap
}
@media(max-width:767px) {
  .header {
    height:72px
  }
  .hero .button {
    gap:8px;
    padding-inline:12px;
    font-size:11px
  }
  .map-fallback {
    min-height:310px;
    padding:30px
  }
  .map-fallback .location-mark {
    font-size:90px
  }
  .map-fallback p {
    font-size:25px
  }
  .header nav a {
    min-height:44px;
    display:flex;
    align-items:center
  }
  .footer-bottom a,.social-placeholder {
    min-height:36px;
    display:flex;
    align-items:center
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}

/* Motion system: entrances, interaction feedback and selected menu destination. */
.menu-card {
  isolation: isolate;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.menu-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--orange);
  box-shadow: inset 0 0 24px #ff861c25;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity .5s var(--ease);
}
.menu-card.category-selected, .menu-card:target {
  border-color: var(--orange);
  background-color: #1c1914;
  box-shadow: 0 0 0 1px #ff861c35, 0 0 26px #ff861c22;
}
.menu-card.category-selected::after, .menu-card:target::after {
  opacity: .7;
}
.category-nav a {
  transition: background .25s var(--ease), color .25s var(--ease), transform .3s var(--ease);
}
.category-nav a:active { transform: scale(.94); }
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::after {
  content: '';
  position: absolute;
  inset: -70% -30%;
  background: linear-gradient(110deg, transparent 40%, #ffffff28 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: -1;
}
.brand .bull, .brand-dot, .quality-no, .menu-list dd, .text-link span,
.contact-phone span, .map-caption > span:last-child, .location-mark {
  display: inline-block;
  transition: transform .45s var(--ease), color .3s var(--ease);
}
.qualities article { transition: transform .4s var(--ease); }
.menu-list > div { transition: background-color .3s var(--ease); }
.menu-list dt { transition: color .3s var(--ease); }
.footer-main a, .footer-bottom a, .social-placeholder { transition: color .3s var(--ease); }

@media (prefers-reduced-motion: no-preference) {
  .motion-ready {
    transition: opacity .75s var(--ease) var(--entrance-delay, 0ms),
      transform .85s var(--ease) var(--entrance-delay, 0ms),
      border-color .35s var(--ease), background-color .35s var(--ease);
  }
  .motion-ready:not(.is-visible) { opacity: 0; transform: translateY(28px); }
  .motion-ready.is-visible { opacity: 1; transform: translateY(0); }
  .hero-photo img { animation: food-drift 12s ease-in-out infinite alternate; }
  .hero-photo:not(.is-visible) img { animation-play-state: paused; }
  .hero-copy .brush::before { animation: brush-arrive .9s var(--ease) .15s both; transform-origin: left; }
  .brand-line .line-star { animation: grill-turn 16s linear infinite; }
  .menu-card.is-visible .menu-list > div { animation: row-arrive .55s var(--ease) both; }
  .menu-card.is-visible .menu-list > div:nth-child(2) { animation-delay: 60ms; }
  .menu-card.is-visible .menu-list > div:nth-child(3) { animation-delay: 120ms; }
  .menu-card.is-visible .menu-list > div:nth-child(4) { animation-delay: 180ms; }
  .menu-card.is-visible .menu-list > div:nth-child(5) { animation-delay: 240ms; }
  .menu-card.is-visible .menu-list > div:nth-child(6) { animation-delay: 300ms; }
  .category-arrival::after { animation: category-pulse 1.8s var(--ease) .45s both; }
  dialog[open] { animation: dialog-arrive .4s var(--ease) both; }
  dialog[open]::backdrop { animation: backdrop-arrive .3s var(--ease) both; }
  @keyframes food-drift { from { transform: scale(1); } to { transform: scale(1.045); } }
  @keyframes brush-arrive { from { transform: rotate(-1deg) scaleX(.12); opacity: 0; } to { transform: rotate(-1deg) scaleX(1); opacity: 1; } }
  @keyframes grill-turn { to { transform: rotate(360deg); } }
  @keyframes row-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes category-pulse { 0% { opacity: .4; } 25%, 65% { opacity: 1; } 45% { opacity: .35; } 100% { opacity: .7; } }
  @keyframes dialog-arrive { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover::after { transform: translateX(100%); transition: transform .8s var(--ease); }
  .brand:hover .bull { transform: rotate(-9deg) scale(1.08); }
  .brand:hover .brand-dot { transform: translateY(-4px); }
  .category-nav a:hover { transform: translateY(-3px); }
  .qualities article:hover { transform: translateX(5px); }
  .qualities article:hover .quality-no { transform: scale(1.18); }
  .menu-card:hover:not(.category-selected):not(:target) { border-color: #ff861c80; }
  .menu-list > div:hover { background-color: #ff861c08; }
  .menu-list > div:hover dt { color: #ffb367; }
  .menu-list > div:hover dd { transform: translateX(-4px); }
  .text-link:hover span, .contact-phone:hover span, .map-caption:hover > span:last-child { transform: translate(3px, -3px); }
  .map-panel:hover .location-mark { transform: translateY(-6px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready { opacity: 1 !important; transform: none !important; }
}


/* Zapiekanka: photograph beside prices, stacked on phones. */
.zap-card .menu-content { grid-template-rows: auto auto 1fr; }
.zap-card .two-prices { grid-row: 2 / span 2; }
.zap-photo { grid-column: 1; grid-row: 3; margin: 0; align-self: start; overflow: hidden; border-radius: 3px; aspect-ratio: 3 / 2; }
.zap-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .zap-photo:hover img { transform: scale(1.045); } }
@media (max-width: 767px) { .zap-photo { margin: 20px 0 24px; } }

/* Mobile layout fixes */
@media (max-width: 767px) {
  .map-fallback iframe {
    width: 100%;
    max-width: 100%;
    height: clamp(310px, 72vw, 450px);
  }
}

@media (max-width: 359px) {
  .brand .bull {
    display: none;
  }
  .header nav {
    flex-shrink: 0;
  }
  .header nav a {
    white-space: nowrap;
  }
  .hero h1 {
    white-space: normal;
    font-size: clamp(40px, 12.5vw, 45px);
  }
  .mobile-break {
    display: block;
  }
}

@media (max-width: 767px) {
  .map-fallback {
    padding: 0;
  }
}