/* NeoMacro (BR): the restaurant story. Shared system lives in brand.css.
   The small house where the hosts greet you, versus the assembly line. */

/* ---------- Language switch ---------- */
.lang { display: inline-flex; padding: 5px; border-radius: 99px; margin-left: 4px; flex: none; }
.lang button { border: 0; background: none; cursor: pointer; padding: .4em .75em; border-radius: 99px; font: 600 .78rem/1 var(--display); letter-spacing: .06em; opacity: .6; transition: background .3s, color .3s, opacity .3s; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); opacity: 1; }
.on-dark .lang button[aria-pressed="true"], .menu-open .lang button[aria-pressed="true"] { background: var(--y); color: var(--ink); }
.nav + .lang { margin-left: 8px; }

body::after { opacity: .04; }
.blobs--soft i { opacity: .16; filter: blur(100px); }
.blobs--soft i:nth-child(2) { background: var(--r); left: auto; right: 5%; top: 20%; opacity: .1; }

/* ---------- Hero ---------- */
.hero__art { padding-bottom: 0; }

/* ---------- Story blocks ---------- */
.story { max-width: 880px; }
.story--center { margin-inline: auto; text-align: center; }
.story--center .kicker { justify-content: center; }
.story .title { margin-bottom: .5em; }
.story__text { font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.6; color: var(--ink-2); max-width: 36em; margin: 0 0 1.2em; }
.story__text strong { color: var(--ink); font-weight: 700; }
.chap { display: inline-grid; place-items: center; padding: .45em .65em; border-radius: 99px; background: var(--ink); color: var(--y); letter-spacing: .06em; }
.kicker:has(.chap)::before { display: none; }
/* Words light up one by one while the paragraph crosses the screen (br.js marks .is-lit) */
.lit { font: 600 clamp(1.35rem, 2.4vw, 2.1rem)/1.38 var(--display); letter-spacing: -.025em; color: var(--ink); max-width: 30em; }
.lit .w { opacity: .16; transition: opacity .35s; }
.lit .w.is-lit { opacity: 1; }
.lit strong { background: linear-gradient(100deg, var(--y), var(--o) 45%, var(--r)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 01 · Assembly line vs. the house ---------- */
.compare { display: grid; grid-template-columns: 1fr 1.08fr; gap: 22px; align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.compare__col { position: relative; padding: clamp(28px, 3.4vw, 48px); border-radius: var(--radius); }
.compare__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.compare__col li { position: relative; padding-left: 34px; line-height: 1.45; }
.compare__tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; font: 700 .78rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.compare__col--line { border: 1.5px dashed rgba(19, 30, 41, .22); color: var(--ink-2); }
.compare__col--line li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 16px; height: 2px; border-radius: 2px; background: rgba(19, 30, 41, .3); }
/* The conveyor belt: identical boxes, forever */
.belt { overflow: hidden; margin: 0 0 26px; padding: 12px 0; border-radius: 14px; background: rgba(19, 30, 41, .05); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.belt__track { display: flex; gap: 12px; width: max-content; animation: marquee 8s linear infinite; }
.belt i { flex: none; width: 46px; height: 32px; border-radius: 6px; background: #fff linear-gradient(rgba(19, 30, 41, .18), rgba(19, 30, 41, .18)) center 9px / 60% 3px no-repeat; border: 1.5px solid rgba(19, 30, 41, .14); }
.compare__col--chef { background: var(--ink); color: #fff; box-shadow: 0 40px 80px rgba(19, 30, 41, .22); font-size: 1.05rem; }
.compare__col--chef .compare__tag { color: var(--y); }
.chef-mark { position: absolute; right: clamp(24px, 3vw, 40px); top: clamp(22px, 3vw, 36px); width: 86px; overflow: visible; }
.cm { opacity: .94; animation: breathe 4.5s ease-in-out infinite; }
.cm--y { --bx: -14px; --by: 24px; }
.cm--o { --bx: 0; --by: -22px; animation-delay: -.6s; }
.cm--r { --bx: 14px; --by: -24px; animation-delay: -1.2s; }
.cm--d { --bx: 0; --by: -46px; animation-delay: -1.8s; }
@keyframes breathe { 50% { transform: translate(var(--bx), var(--by)); } }
.compare__col--chef li::before { content: ""; position: absolute; left: 6px; top: .18em; width: 10px; height: 20px; border-radius: 99px; background: var(--y); transform: rotate(30deg); }
.compare__col--chef li:nth-child(2)::before { background: var(--o); transform: rotate(-30deg); }
.compare__col--chef li:nth-child(3)::before { background: var(--r); }
.compare__col--chef li:nth-child(4)::before { width: 14px; height: 14px; top: .3em; left: 4px; border-radius: 50%; background: var(--w); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.js .compare__col--chef li { opacity: 0; transform: translateX(-16px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.js .compare__col--chef li:nth-child(2) { transition-delay: .12s; }
.js .compare__col--chef li:nth-child(3) { transition-delay: .24s; }
.js .compare__col--chef li:nth-child(4) { transition-delay: .36s; }
.compare__col--chef li.is-in { opacity: 1; transform: none; }

/* ---------- 02 · Two doors ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: clamp(48px, 6vw, 80px); }
.door { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: #fff; text-decoration: none; transition: box-shadow .6s var(--ease), opacity 1s var(--ease), transform .8s var(--ease); }
.door:hover { box-shadow: 0 34px 70px rgba(19, 30, 41, .12); transform: translateY(-6px); }
.door__img { margin: 0; aspect-ratio: 16 / 8; overflow: hidden; }
.door__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.door:hover .door__img img { transform: scale(1); }
.door__body { position: relative; flex: 1; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); }
.door__n { position: absolute; top: -30px; right: 32px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--y); font: 800 1.3rem/1 var(--display); box-shadow: 0 10px 24px rgba(19, 30, 41, .15); transition: transform .7s var(--spring); }
.door:hover .door__n { transform: rotate(-12deg) scale(1.08); }
.door:nth-child(2) .door__n { background: var(--r); color: #fff; }
.door__eyebrow { margin: 0 0 10px; font: 700 .74rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--r); }
.door h3 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); margin-bottom: .55em; padding-right: 60px; }
.door p:not(.door__eyebrow) { color: var(--ink-2); margin: 0 0 28px; }
.door__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 12px; font: 700 .98rem/1 var(--display); }
.door__cta i { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); transition: transform .6s var(--ease); }
.door__cta i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -6px; border-top: 2px solid var(--paper); border-right: 2px solid var(--paper); transform: rotate(45deg); }
.door:hover .door__cta i { transform: translateX(6px); }

/* ---------- 03 · The menu card: each dish is served as it scrolls into view ---------- */
.incluso { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.incluso__head { position: sticky; top: 130px; }
.carte { position: relative; padding: clamp(32px, 4vw, 58px); border-radius: var(--radius); background: #fff; box-shadow: 0 30px 70px rgba(19, 30, 41, .08); }
.carte::before { content: ""; position: absolute; inset: 14px; border: 1px solid var(--line); border-radius: 20px; pointer-events: none; }
.carte__title { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 34px; font: 700 clamp(1.3rem, 2vw, 1.7rem)/1 var(--display); letter-spacing: -.03em; }
.carte__title img { width: 38px; height: auto; }
.carte__group + .carte__group { margin-top: 30px; }
.carte__course { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font: 700 .76rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--r); }
.carte__course::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.carte ul { list-style: none; margin: 0; padding: 0; }
.carte__item, .carte__bill { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; font: 600 clamp(1rem, 1.4vw, 1.14rem)/1.35 var(--display); letter-spacing: -.015em; }
.carte__item i, .carte__bill i { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(19, 30, 41, .25); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .1s; }
.carte__item b { flex: none; font: 700 .72rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: .55em .85em; border-radius: 99px; background: var(--ink); color: var(--y); transform: scale(0) rotate(-8deg); transition: transform .7s var(--spring) .45s; }
.js .carte__item span, .js .carte__bill span { opacity: .3; transform: translateX(-10px); display: inline-block; transition: opacity .6s, transform .8s var(--ease); }
.carte__item.is-in span, .carte__bill.is-in span { opacity: 1; transform: none; }
.carte__item.is-in i, .carte__bill.is-in i { transform: none; }
.carte__item.is-in b { transform: none; }
.carte__bill { margin-top: 26px; padding-top: 22px; border-top: 1.5px dashed var(--line); }
.carte__bill b { flex: none; font: 700 1rem/1 var(--display); color: var(--w); }
.carte__sign { margin: 26px 0 0; text-align: right; font-style: italic; color: var(--ink-2); font-size: .92rem; }

/* ---------- 05 · Guests: two rows of logos gliding in opposite directions ---------- */
.guests { display: grid; gap: 18px; margin-top: clamp(44px, 5vw, 72px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.guests__row { overflow: hidden; }
.guests__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.guests__row--rev .guests__track { animation-direction: reverse; animation-duration: 48s; }
.guests:hover .guests__track { animation-play-state: paused; }
.guests__set { display: flex; gap: 18px; padding: 10px 18px 14px 0; margin: 0; list-style: none; }
.guests__set li { flex: none; display: grid; place-items: center; width: clamp(200px, 19vw, 260px); height: clamp(104px, 9vw, 126px); border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(19, 30, 41, .05); transition: transform .6s var(--ease), box-shadow .6s; }
.guests__set li:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(19, 30, 41, .1); }
.guests__set li.is-star { border: 2px solid var(--y); }
.guests__set img { height: 38px; width: auto; max-width: 68%; object-fit: contain; }
.guests__set img.is-tall { height: 60px; }
.guests__word { font: 800 1.7rem/1 var(--display); letter-spacing: -.05em; color: var(--ink); }

/* ---------- Story rail ---------- */
.rail { position: fixed; right: 22px; top: 50%; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translateY(-50%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.rail.is-on { opacity: 1; }
.rail__track { position: relative; width: 8px; height: 150px; border-radius: 99px; background: rgba(19, 30, 41, .1); }
.rail__dot { position: absolute; left: -3px; top: calc(var(--rp, 0) * (150px - 14px)); width: 14px; height: 14px; border-radius: 50%; background: var(--w); box-shadow: 0 0 0 4px rgba(144, 12, 63, .15); }
.rail__label { font: 700 .7rem/1 var(--display); letter-spacing: .08em; color: var(--ink-2); font-variant-numeric: tabular-nums; writing-mode: vertical-rl; }
.rail.on-dark .rail__track { background: rgba(255, 255, 255, .18); }
.rail.on-dark .rail__dot { background: var(--y); }
.rail.on-dark .rail__label { color: rgba(255, 255, 255, .7); }

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
  .lang { margin-left: auto; }
  .header__cta { margin-left: 8px; }
  .rail { display: none; }
}
@media (max-width: 1000px) {
  .compare, .doors, .incluso { grid-template-columns: 1fr; }
  .incluso__head { position: static; }
}
@media (max-width: 640px) {
  .lang { margin-left: auto; }
  .burger { margin-left: 4px; }
  .chef-mark { width: 64px; }
  .carte { padding: 32px 22px; }
  .carte::before { inset: 8px; }
  .carte__item { flex-wrap: wrap; }
  .guests__set li { width: 170px; height: 92px; }
  .guests__set img { height: 30px; }
  .guests__set img.is-tall { height: 46px; }
}

/* ---------- 02 · A coffee with the founders: steam rises in the logo colours ---------- */
.cup { width: clamp(96px, 9vw, 124px); margin: 0 auto 22px; }
.cup svg { width: 100%; height: auto; overflow: visible; }
.cup__set { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s var(--spring); }
.cup:hover .cup__set { transform: rotate(-6deg); }
.cup__saucer, .cup__body { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.cup__handle { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.cup__coffee { fill: #5b3420; }
.cup__shine { fill: rgba(255, 255, 255, .35); animation: shine 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cup__dot { fill: var(--w); }
.cup__steam { animation: sway 4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.cup .s { fill: none; stroke-width: 5; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: steam 3.4s ease-out infinite; }
.cup .s1 { stroke: var(--y); }
.cup .s2 { stroke: var(--o); animation-delay: 1.1s; }
.cup .s3 { stroke: var(--r); animation-delay: 2.2s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(16px) scaleY(.5); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-24px) scaleY(1.15); } }
@keyframes sway { from { transform: skewX(-6deg); } to { transform: skewX(6deg); } }
@keyframes shine { 0%, 100% { transform: translateX(0); opacity: .35; } 50% { transform: translateX(26px); opacity: .1; } }

/* Door photos drift slowly so the section never sits still */
.door__img img { animation: drift-photo 16s ease-in-out infinite alternate; }
.door:nth-child(2) .door__img img { animation-delay: -8s; }
@keyframes drift-photo { to { scale: 1.1; translate: -2% -1.5%; } }

/* Smaller client capsules */
.guests { gap: 14px; }
.guests__set { gap: 14px; padding-right: 14px; }
.guests__set li { width: clamp(150px, 13vw, 184px); height: clamp(72px, 6.4vw, 88px); }
.guests__set img { height: 26px; max-width: 70%; }
.guests__set img.is-tall { height: 42px; }
.guests__word { font-size: 1.25rem; }
@media (max-width: 640px) {
  .guests__set li { width: 136px; height: 68px; }
  .guests__set img { height: 22px; }
  .guests__set img.is-tall { height: 36px; }
}

/* ---------- Reception bell: rings now and then, leads to the contact form ---------- */
.bell { position: fixed; right: 24px; bottom: 24px; z-index: 95; display: flex; align-items: center; gap: 12px; text-decoration: none; transition: opacity .4s, transform .6s var(--ease); }
.bell.is-hidden { opacity: 0; transform: translateY(24px); pointer-events: none; }
.bell__icon { flex: none; width: 64px; height: 64px; padding: 13px; border-radius: 50%; background: var(--ink); box-shadow: 0 14px 30px rgba(19, 30, 41, .28); overflow: visible; transition: transform .5s var(--spring); }
.bell:hover .bell__icon { transform: scale(1.08); }
.bell__body { fill: var(--y); transform-box: view-box; transform-origin: 32px 46px; animation: ring 7s ease-in-out 2s infinite; }
.bell:hover .bell__body { animation: ring-now .9s ease-in-out; }
.bell__base { fill: var(--o); }
.bell__ding path { fill: none; stroke: var(--y); stroke-width: 3; stroke-linecap: round; opacity: 0; animation: ding 7s 2s infinite; }
.bell:hover .bell__ding path { animation: ding-now .9s; }
.bell__tip { padding: .75em 1.15em; border-radius: 99px; background: #fff; color: var(--ink); font: 600 .86rem/1 var(--display); white-space: nowrap; box-shadow: 0 12px 30px rgba(19, 30, 41, .14); opacity: 0; transform: translateX(10px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; animation: tip-peek 5s 3.5s both; }
.bell:hover .bell__tip, .bell:focus-visible .bell__tip { opacity: 1; transform: none; animation: none; }
@keyframes ring { 0%, 84%, 100% { transform: none; } 87% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 93% { transform: rotate(-7deg); } 96% { transform: rotate(3deg); } }
@keyframes ring-now { 20% { transform: rotate(-14deg); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-6deg); } 100% { transform: none; } }
@keyframes ding { 0%, 85%, 100% { opacity: 0; } 88%, 95% { opacity: 1; } }
@keyframes ding-now { 0%, 100% { opacity: 0; } 25%, 75% { opacity: 1; } }
@keyframes tip-peek { 0% { opacity: 0; transform: translateX(10px); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(10px); } }
@media (max-width: 640px) {
  .bell { right: 16px; bottom: 16px; }
  .bell__icon { width: 56px; height: 56px; padding: 11px; }
  .bell__tip { display: none; }
}

/* ---------- 04 · The service journey ----------
   brand.js writes --p on .serve-wrap; br.js marks the course the dot has reached as .is-active,
   and only the active course's illustration plays. */
.serve-wrap { margin-top: clamp(10px, 2vw, 24px); }
.serve__track { position: relative; height: 8px; margin: 0 0 40px; border-radius: 99px; background: rgba(19, 30, 41, .1); }
.serve__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: 99px; background: linear-gradient(90deg, var(--y), var(--o), var(--r)); }
.serve__dot { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--w); box-shadow: 0 0 0 7px rgba(144, 12, 63, .14); }
.serve { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
.serve .serve__card { position: relative; overflow: hidden; padding: 30px 28px 34px; border-radius: var(--radius); background: #fff; transition: background .6s, color .6s, transform .7s var(--ease), box-shadow .7s, opacity 1s var(--ease); }
.serve .serve__card.is-active { background: var(--ink); color: #fff; transform: translateY(-12px); box-shadow: 0 34px 70px rgba(19, 30, 41, .22); }
.serve__card h3 { margin-bottom: .5em; }
.serve__card p { margin: 0; color: var(--ink-2); transition: color .6s; }
.serve__card.is-active p { color: rgba(255, 255, 255, .74); }
.serve__num { position: absolute; right: 18px; top: 10px; font: 800 4.6rem/1 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(19, 30, 41, .13); transition: -webkit-text-stroke-color .6s; }
.serve__card.is-active .serve__num { -webkit-text-stroke-color: rgba(255, 195, 0, .55); }
.serve__plate { display: grid; place-items: center; width: 100px; height: 100px; margin-bottom: 26px; border-radius: 50%; background: var(--paper); transition: transform .8s var(--spring), box-shadow .6s; }
.serve__card.is-active .serve__plate { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 0 8px rgba(255, 195, 0, .18); }

.ico { width: 74px; height: 74px; overflow: visible; }
.ico .ln { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* 1 · cup */
.ico .st { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .45; transform-box: fill-box; transform-origin: 50% 100%; }
.ico .st1 { stroke: var(--y); }
.ico .st2 { stroke: var(--o); }
.ico .st3 { stroke: var(--r); }
.serve__card.is-active .st { animation: steam 2.8s ease-out infinite; }
.serve__card.is-active .st2 { animation-delay: .9s; }
.serve__card.is-active .st3 { animation-delay: 1.8s; }
/* 2 · recipe being written */
.ico .wr { fill: none; stroke: var(--o); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ico .pencil { transform-box: view-box; }
.serve__card.is-active .wr { animation: write 3.6s ease-in-out infinite; }
.serve__card.is-active .wr2 { animation-delay: .5s; }
.serve__card.is-active .wr3 { animation-delay: 1s; }
.serve__card.is-active .pencil { animation: pencil 3.6s ease-in-out infinite; }
@keyframes write { 0% { stroke-dashoffset: 1; opacity: 1; } 35% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pencil { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-10px, 4px); } 50% { transform: translate(-6px, 14px); } 75% { transform: translate(-12px, 22px); } }
/* 3 · pot bubbling in the logo colours */
.ico .bb { transform-box: fill-box; transform-origin: center; }
.ico .bb1 { fill: var(--y); }
.ico .bb2 { fill: var(--o); }
.ico .bb3 { fill: var(--r); }
.serve__card.is-active .bb { animation: bubble 2.1s ease-out infinite; }
.serve__card.is-active .bb2 { animation-delay: .7s; }
.serve__card.is-active .bb3 { animation-delay: 1.4s; }
@keyframes bubble { 0% { transform: translateY(12px) scale(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-16px) scale(1); opacity: 0; } }
/* 4 · the cloche lifts to reveal the NeoMacro mark */
.ico .dome { transform-box: fill-box; transform-origin: 0% 100%; }
.serve__card.is-active .dome { animation: lift 3.2s var(--ease) infinite; }
@keyframes lift { 0%, 15%, 100% { transform: none; } 40%, 75% { transform: translate(-6px, -18px) rotate(-16deg); } }

@media (max-width: 1000px) {
  .serve { grid-template-columns: 1fr 1fr; }
  .serve__track { display: none; }
}
@media (max-width: 640px) {
  .serve { grid-template-columns: 1fr; }
  .serve .serve__card.is-active { transform: none; }
}