/* Akbar Indian Restaurant, concept C "The Garden".
   Daylight: the teal walls and red door frames of their shopfront, the covered garden terrace,
   and the checked tablecloths (a gingham band, used twice). Mobile first; 600, 900 and 1000 px steps.
   Smallest text anywhere: 13 px. Hidden reveal states exist only under html.js. */

:root {
  --paper: #FBF7EF;
  --sand: #F3EBDD;
  --card: #FFFDF8;
  --ink: #1E2422;
  --dim: #4D5551;
  --line: rgba(30, 36, 34, .14);
  --teal: #3FB0AE;
  --teal-ink: #1D6F6D;
  --teal-deep: #14504F;
  --teal-night: #0F3B3A;
  --red: #C8352E;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --e: cubic-bezier(.16, 1, .3, 1);
  --gutter: 16px;
  --hdr: 64px;
  --max: 1240px;
  --pad-l: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1000px) { :root { --gutter: 40px; --hdr: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 8px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); overflow-x: clip; }
@media (min-width: 600px) { body { font-size: 17px; } }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, ul, dl, dd, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--teal-ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:focus-visible, button:focus-visible, .rail:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--teal-ink); color: #fff; border-radius: 8px; }
.skip:focus { top: 8px; }

/* Type */
.h1 { font: 500 clamp(35px, 6vw, 72px)/1.04 var(--serif); letter-spacing: -.012em; font-variation-settings: "opsz" 144; }
.h1 .l1, .h1 .l2 { display: block; text-wrap: balance; }
.h1 .l2 { font-style: italic; font-weight: 400; color: var(--teal-ink); }
.h2 { font: 500 clamp(32px, 4.3vw, 56px)/1.08 var(--serif); text-wrap: balance; letter-spacing: -.01em; font-variation-settings: "opsz" 144; }
.h2 em { display: block; font-style: italic; font-weight: 400; color: var(--teal-ink); }

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px;
  font: 600 16px/1.1 var(--sans); text-decoration: none; border: 1.5px solid var(--teal-ink); transition: background-color .35s var(--e), color .35s var(--e), transform .5s var(--e); }
.btn-primary { background: var(--teal-ink); color: #fff; }
.btn-primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn-ghost { background: transparent; color: var(--teal-ink); }
.btn-ghost:hover { background: var(--teal-ink); color: #fff; }
.text-link { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* Header: one compact sticky bar */
.hdr { position: sticky; top: 0; z-index: 30; height: var(--hdr); background: rgba(251, 247, 239, .96); border-bottom: 1px solid transparent; transition: border-color .5s var(--e), box-shadow .5s var(--e); }
.hdr.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(30, 36, 34, .06); }
.hdr-in { height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 8px; }
.hdr-logo { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.hdr-logo img { height: 31px; width: auto; }
.hdr-nav { display: none; }
.hdr-menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; color: var(--ink); text-decoration: none; border: 1.5px solid var(--line); }
.hdr-menu:hover { border-color: var(--teal-ink); color: var(--teal-ink); }
.btn-call { min-height: 44px; padding: 0 16px; background: var(--teal-ink); color: #fff; }
.btn-call:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
.btn-call .call-long { display: none; }
@media (min-width: 600px) {
  .hdr-logo img { height: 36px; }
  .btn-call .call-long { display: inline; }
  .btn-call .call-short { display: none; }
}
@media (min-width: 1000px) {
  .hdr-in { gap: 6px; }
  .hdr-logo img { height: 44px; }
  .hdr-nav { display: flex; gap: 2px; margin-right: 10px; }
  .hdr-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--ink); text-decoration: none; font-weight: 500; position: relative; }
  .hdr-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 1.5px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
  .hdr-nav a:hover::after { transform: scaleX(1); }
  .hdr-menu { margin-right: 6px; }
}

/* Hero: copy on paper, and the terrace photo opening through an arched window (their tent roof is a barrel arch) */
.hero { display: grid; padding-bottom: clamp(48px, 7vw, 72px); }
.hero-media { order: -1; padding: 12px var(--gutter) 0; }
.hero-win { position: relative; overflow: hidden; aspect-ratio: 4 / 3; clip-path: inset(0 round 50% 50% 18px 18px / 26% 26% 18px 18px); background: var(--sand); }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero-text { padding: 28px var(--gutter) 0; display: grid; gap: 18px; align-content: center; }
.lede { font-size: 18px; line-height: 1.55; max-width: 34em; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--dim); font-weight: 500; font-size: 16px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.hero .btns { margin-top: 6px; }
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); min-height: clamp(600px, calc(100svh - var(--hdr)), 900px); padding-bottom: 0; }
  .hero-media { order: 0; padding: 16px 0 24px; }
  .hero-win { aspect-ratio: auto; height: 100%; clip-path: inset(0 round 50% 0 0 0 / 30% 0 0 0); }
  .hero-text { padding: 40px 48px 64px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); gap: 22px; }
  .lede { font-size: 19px; }
}
/* the opening: from a small arched window to the full frame, while the photo settles from 1.12 to 1 */
.js .hero-win { clip-path: inset(14% 16% 14% 16% round 50% 50% 18px 18px / 26% 26% 18px 18px); transition: clip-path 1300ms var(--e) 120ms; }
.js .hero-img { transform: scale(1.12); transition: transform 4500ms var(--e) 120ms; }
.js.hero-go .hero-win { clip-path: inset(0 round 50% 50% 18px 18px / 26% 26% 18px 18px); }
.js.hero-go .hero-img { transform: none; }
@media (min-width: 1000px) {
  .js .hero-win { clip-path: inset(16% 14% 16% 18% round 50% 0 0 0 / 30% 0 0 0); }
  .js.hero-go .hero-win { clip-path: inset(0 round 50% 0 0 0 / 30% 0 0 0); }
}
.js .hero-text > * { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 900ms var(--e), transform 900ms var(--e); }
.js .hero-text .h1 { opacity: 1; transform: none; }
.js .hero .h1 .l1, .js .hero .h1 .l2 { opacity: 0; transform: translate3d(0, .5em, 0); transition: opacity 900ms var(--e), transform 1000ms var(--e); }
.js.hero-go .hero-text > *, .js.hero-go .hero .h1 .l1, .js.hero-go .hero .h1 .l2 { opacity: 1; transform: none; }
.js .hero .h1 .l1 { transition-delay: 200ms; }
.js .hero .h1 .l2 { transition-delay: 320ms; }
.js .hero .lede { transition-delay: 460ms; }
.js .hero .hero-meta { transition-delay: 540ms; }
.js .hero .btns { transition-delay: 620ms; }

/* Sections, the filament at their top, and the generic reveal */
main > section { position: relative; }
.fil::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(200, 53, 46, .55), transparent); transition: width 1400ms var(--e); }
.fil.fil-in::before { width: 70%; }
.js .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1100ms var(--e), transform 1100ms var(--e); transition-delay: var(--rd, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .au-word { display: inline-block; opacity: 0; transform: translate3d(0, .55em, 0); transition: opacity 900ms var(--e), transform 900ms var(--e); transition-delay: var(--wd, 0ms); }
.js .au-word.in { opacity: 1; transform: none; }

/* Food: a rail of dishes, captions under the photos */
.food { padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 7vw, 96px); }
.food-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
.food-head p { max-width: 36em; color: var(--dim); font-size: 18px; }
@media (min-width: 1000px) { .food-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; } }
.rail { position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: var(--pad-l); padding: 8px var(--pad-l) 28px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail-in { display: flex; gap: 18px; width: max-content; padding-right: var(--pad-l); }
.card { flex: none; width: min(72vw, 300px); scroll-snap-align: start; transform-origin: 50% 50%; will-change: transform; }
.card-img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; background: var(--sand); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card figcaption { display: grid; gap: 2px; padding: 14px 4px 0; }
.card figcaption b { font: 500 21px/1.25 var(--serif); }
.card figcaption span { color: var(--dim); font-size: 15px; }
@media (min-width: 1000px) {
  .rail-in { gap: 28px; }
  .card { width: clamp(280px, 25vw, 360px); }
  .card:nth-child(even) { margin-top: 44px; }
}
.rail-ctl { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.rbtn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--teal-ink); background: transparent; color: var(--teal-ink); cursor: pointer; transition: background-color .35s var(--e), color .35s var(--e); }
.rbtn:hover { background: var(--teal-ink); color: #fff; }
.rail-ctl .text-link { margin-left: 10px; }

/* Gingham: their tablecloths, as a thin band */
.gingham { height: 24px; background-color: #fff;
  background-image: linear-gradient(90deg, rgba(200, 53, 46, .45) 50%, transparent 50%), linear-gradient(rgba(200, 53, 46, .45) 50%, transparent 50%);
  background-size: 16px 16px; }

/* Set meals for one */
.sets { background: var(--sand); padding-bottom: clamp(64px, 9vw, 112px); }
.sets .wrap { padding-top: clamp(56px, 8vw, 104px); }
.sets-head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); }
.sets-head p { max-width: 38em; color: var(--dim); font-size: 18px; }
@media (min-width: 1000px) { .sets-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; } }
.set-grid { display: grid; gap: 14px; margin-bottom: 28px; }
@media (min-width: 600px) { .set-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
@media (min-width: 1100px) { .set-grid { grid-template-columns: repeat(4, 1fr); } }
.set { display: grid; grid-template-rows: auto 1fr auto; gap: 4px; padding: 18px 20px 16px; background: var(--card); border-radius: 20px; border: 1px solid rgba(30, 36, 34, .08); }
.set-name { font: 500 23px/1.2 var(--serif); }
.set-with { color: var(--dim); font-size: 16px; }
.set-price { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(30, 36, 34, .18); color: var(--dim); font-size: 16px; }
.set-price b { font: 500 clamp(32px, 3vw, 38px)/1 var(--serif); color: var(--teal-ink); margin-right: 4px; font-variant-numeric: lining-nums; }

/* Eat in the garden, or at home */
.garden { padding: clamp(64px, 9vw, 128px) 0; }
.garden-grid { display: grid; gap: 36px; }
.garden-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gp { overflow: hidden; border-radius: 20px; aspect-ratio: 3 / 4; background: var(--sand); }
.gp img { width: 100%; height: 100%; object-fit: cover; }
.gp2 { margin-top: 40px; }
.js .gp { clip-path: inset(12% 10% 12% 10% round 20px); transition: clip-path 1500ms var(--e); }
.js .gp2 { transition-delay: 200ms; }
.js .gp.in { clip-path: inset(0 round 20px); }
.garden-text { display: grid; gap: 28px; align-content: center; }
.split { display: grid; gap: 28px; }
.split-col { display: grid; gap: 8px; align-content: start; }
.split-col h3 { font: 500 24px/1.25 var(--serif); display: flex; align-items: center; gap: 10px; }
.split-col h3::before { content: ""; width: 18px; height: 2px; background: var(--red); }
.split-col p { color: var(--dim); }
.big-tel { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--teal-ink); color: #fff; text-decoration: none; font: 500 24px/1 var(--serif); font-variant-numeric: lining-nums; transition: background-color .35s var(--e); }
.big-tel:hover { background: var(--teal-deep); }
@media (min-width: 900px) {
  .garden-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
  .gp2 { margin-top: 72px; }
  .split { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.px { transform: scale(1.12); will-change: transform; }

/* Find us */
.visit { background: var(--sand); padding: clamp(64px, 9vw, 120px) 0; }
.visit-grid { display: grid; gap: 32px; }
.visit-text { display: grid; gap: 18px; align-content: start; }
.visit-text > p { color: var(--dim); font-size: 18px; max-width: 30em; }
.facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--dim); font-size: 15px; padding-top: 1px; }
.facts dd { font-weight: 500; }
.facts dd a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.visit .btns { margin-top: 6px; }
.visit-media { display: grid; gap: 14px; }
.visit-photo { overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 9; background: var(--paper); }
.visit-photo img { width: 100%; height: 100%; object-fit: cover; }
.map { border-radius: 20px; overflow: hidden; background: var(--paper); height: 280px; border: 1px solid var(--line); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) {
  .visit-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
  .map { height: 260px; }
}

/* Guests' words */
.words { padding: clamp(64px, 9vw, 112px) 0 clamp(40px, 6vw, 72px); }
.words .h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.quotes { display: grid; gap: 28px; }
.quotes li { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 2px solid var(--teal); }
.quotes blockquote p { font: italic 400 clamp(21px, 2vw, 25px)/1.4 var(--serif); }
.quotes .who { color: var(--dim); font-size: 15px; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* Closing: four plates drift past the call to action (desktop); two plates above it on phones */
.close { padding: clamp(40px, 6vw, 64px) var(--gutter) clamp(64px, 9vw, 96px); display: grid; gap: 28px; overflow: hidden; }
.cimg { overflow: hidden; border-radius: 18px; background: var(--sand); }
.cimg img { width: 100%; height: 100%; object-fit: cover; }
.close .c1, .close .c2 { aspect-ratio: 3 / 4; }
.close { grid-template-columns: 1fr 1fr; }
.close .c2 { margin-top: 32px; }
.close .c3, .close .c4 { display: none; }
.close-text { grid-column: 1 / -1; display: grid; gap: 16px; justify-items: center; text-align: center; }
.close-text p { color: var(--dim); font-size: 18px; max-width: 26em; }
.close-text .btns { justify-content: center; }
@media (min-width: 900px) {
  .close { display: grid; place-items: center; grid-template-columns: 1fr; min-height: 780px; padding: 96px var(--gutter); }
  .cimg { position: absolute; transform: translate3d(0, var(--ty, 0), 0); will-change: transform; }
  .close .c1, .close .c2, .close .c3, .close .c4 { display: block; margin: 0; }
  .close .c1 { left: max(24px, calc(50vw - 620px)); top: 64px; width: min(19vw, 250px); aspect-ratio: 3 / 4; }
  .close .c3 { left: max(64px, calc(50vw - 500px)); bottom: 56px; width: min(14vw, 200px); aspect-ratio: 1; }
  .close .c2 { right: max(24px, calc(50vw - 620px)); top: 104px; width: min(16vw, 220px); aspect-ratio: 3 / 4; }
  .close .c4 { right: max(72px, calc(50vw - 540px)); bottom: 40px; width: min(17vw, 230px); aspect-ratio: 4 / 5; }
  .close-text { max-width: 520px; position: relative; z-index: 1; }
  .close-text .h2 { font-size: clamp(44px, 5vw, 68px); }
}

/* Footer */
.foot { background: var(--teal-night); color: #E9F1EF; }
.foot-in { padding-top: clamp(48px, 7vw, 88px); padding-bottom: 32px; display: grid; gap: 36px; }
.foot-logo { width: min(100%, 560px); height: auto; }
.foot-cols { display: grid; gap: 22px; }
.foot-cols div { display: grid; gap: 6px; align-content: start; }
.foot a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.foot a:focus-visible { outline-color: #fff; }
.foot-small { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(233, 241, 239, .78); font-size: 14px; }
@media (min-width: 900px) { .foot-cols { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* The menu: a modal dialog. Full screen on phones; a centred popup over the dimmed page from 901 px. */
html.menu-open { overflow: hidden; }
.mpop { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow: hidden; }
.mpop[open] { display: flex; flex-direction: column; animation: mpop-in .32s var(--e); }
.mpop::backdrop { background: var(--paper); }
@keyframes mpop-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mpop-bar { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px var(--gutter); background: var(--teal-deep); color: #fff; }
.mpop-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 10px; border-radius: 999px; background: var(--paper); color: var(--teal-deep); font-weight: 700; text-decoration: none; }
.mpop-back:hover { background: #fff; }
.mpop-logo { justify-self: center; height: 30px; width: auto; visibility: hidden; }
.mpop-switch { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.mpop-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; }
.mpop-switch a[aria-current] { background: var(--paper); color: var(--teal-deep); }
.mpop-back:focus-visible, .mpop-switch a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mpop-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mpop-wrap { max-width: 980px; margin: 0 auto; padding: 28px var(--gutter) 48px; }
.mpop-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mpop-title { font: 500 clamp(34px, 5vw, 52px)/1.05 var(--serif); }
.mpop-sub { color: var(--dim); font-size: 16px; }
.mgroup-note { color: var(--dim); font-size: 16px; margin-bottom: 22px; column-span: all; max-width: 44em; }
.msec { break-inside: avoid; margin-bottom: 30px; }
.msec h3 { font: 500 24px/1.2 var(--serif); color: var(--teal-ink); padding-bottom: 8px; margin-bottom: 4px; border-bottom: 2px solid var(--teal); }
.msec-note { color: var(--dim); font-size: 15px; margin: 6px 0 2px; }
.mitem { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 11px 0; border-bottom: 1px solid rgba(30, 36, 34, .09); }
.mname { font-weight: 600; font-size: 17px; line-height: 1.35; }
.mprice { font-weight: 600; font-size: 17px; color: var(--teal-ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mdesc { grid-column: 1 / -1; color: var(--dim); font-size: 15px; line-height: 1.45; }
.mitem-noprice .mprice { display: none; }
.mpop-foot { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 16px; color: var(--dim); }
.mpop-foot > a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.mpop-foot span a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 520px) { .mpop-logo { visibility: visible; } .mpop-switch a { padding: 0 16px; font-size: 16px; } }
@media (min-width: 760px) {
  .mcols { columns: 2; column-gap: 48px; }
  .mpop-wrap { padding: 36px 40px 56px; }
}
@media (min-width: 901px) {
  .mpop { inset: 0; margin: auto; width: min(1060px, calc(100% - 160px)); height: min(860px, calc(100% - 112px)); border-radius: 24px; box-shadow: 0 40px 100px rgba(15, 59, 58, .45); }
  .mpop::backdrop { background: rgba(15, 59, 58, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .mpop[open] { animation-name: mpop-pop; }
  .mpop-bar { padding: 12px 20px; }
  .mpop-logo { height: 34px; }
}
@keyframes mpop-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
/* No script: the links still show the right menu panel */
html:not(.js) .mpop:has(.mpop-menu:target) { display: flex; flex-direction: column; z-index: 50; }
html:not(.js) .mpop-menu:not(:target) { display: none; }
html:not(.js) .mpop-back, html:not(.js) .mpop-switch { visibility: visible; }

/* Failsafe and reduced motion: everything in its resting place */
html.no-fx .rv, html.no-fx .au-word, html.no-fx .hero-text > *, html.no-fx .hero .h1 .l1, html.no-fx .hero .h1 .l2 { opacity: 1 !important; transform: none !important; transition: none !important; }
html.no-fx .hero-win, html.no-fx .gp { clip-path: none !important; transition: none !important; }
html.no-fx .hero-img { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .au-word, .js .hero-text > *, .js .hero .h1 .l1, .js .hero .h1 .l2 { opacity: 1; transform: none; transition: none; }
  .js .hero-win { clip-path: inset(0 round 50% 50% 18px 18px / 26% 26% 18px 18px); transition: none; }
  .js .hero-img, .px { transform: none; transition: none; }
  .js .gp { clip-path: none; transition: none; }
  .fil::before { width: 70%; transition: none; }
  .btn, .rbtn, .big-tel, .hdr, .hdr-nav a::after { transition: none; }
  .mpop[open] { animation: none; }
  .cimg { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1000px) {
  .js .hero-win { clip-path: inset(0 round 50% 0 0 0 / 30% 0 0 0); }
}