/* مجموعة الشاهد — v2 "the turning label".
   The page sits on the saturated grounds of the brand's own packshots (the
   tomato-red of its hero photo, olive, mustard, ink) and moves like the
   products: lids roll, labels flip, the route draws itself.
   Motion is transform/opacity only. html.still (prefers-reduced-motion) and
   pages without JS get a complete static version with per-section colours. */

:root {
  /* Palette "the Al Shahed pantry" — every hue is sampled from the client's
     own packaging photos, then darkened until cream body text passes WCAG AA
     on the ground and on its highlight. Names stay tied to the data-ground
     keys used in the HTML and site.js. */
  --red: #6b1a16;      /* oxblood: the backdrop of the hero packshot (kept exact so the photo melts in) */
  --olive: #0f3d2b;    /* label green: the dark band on the tomato cans and badges */
  --mustard: #5c3d07;  /* saffron: the tuna label yellow, taken down to a ground */
  --tomato: #8a1d18;   /* tomato: the paste can red */
  --ink: #1c1210;      /* black olive */
  --brown: #3a2117;    /* walnut: the wooden table under the range photo */
  --glow-red: #8c3a24; --glow-olive: #2a4e33; --glow-mustard: #6e4e13;
  --glow-tomato: #973222; --glow-ink: #36281b; --glow-brown: #503521;
  --cream-rgb: 251 240 218;
  --cream: rgb(var(--cream-rgb));
  --cream-2: rgb(var(--cream-rgb) / .8);
  --line: rgb(var(--cream-rgb) / .22);
  --gold-rgb: 232 195 90;  /* the brass lettering on the labels */
  --gold: rgb(var(--gold-rgb));
  --gold-deep: #b8912a;
  --lid-g: #357050;    /* sage green lid */
  --lid-y: #e7c93e;    /* yellow lid */
  --lid-r: #c63b34;    /* brick red lid */
  --display: "Jomhuria", "Mada", "Noto Naskh Arabic", "Segoe UI", Tahoma, serif;
  --text: "Mada", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
  --wrap: 1140px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
html.still { scroll-behavior: auto; }
body {
  margin: 0; overflow-x: clip;
  background: var(--red); color: var(--cream);
  font: 500 1.2rem/1.75 var(--text); letter-spacing: normal;
}
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: normal; }
p { margin: 0 0 1em; }
[dir="ltr"] { unicode-bidi: isolate; }
span[lang="en"][dir="ltr"] { white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 700px) { .wrap { padding-inline: 28px; } }

.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--gold); color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 60; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-inline-end: .35em; vertical-align: .02em; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.dot.g { background: var(--lid-g); } .dot.y { background: var(--lid-y); } .dot.r { background: var(--lid-r); }

/* ---------- Grounds: static colours by default, cross-fading layers in motion mode ---------- */
.grounds { display: none; }
[data-ground="red"] { background: var(--red); background-image: radial-gradient(ellipse 80% 70% at 50% 70%, var(--glow-red), var(--red) 72%); }
[data-ground="olive"] { background: var(--olive); background-image: radial-gradient(ellipse 80% 70% at 50% 40%, var(--glow-olive), var(--olive) 72%); }
[data-ground="mustard"] { background: var(--mustard); background-image: radial-gradient(ellipse 80% 70% at 50% 40%, var(--glow-mustard), var(--mustard) 72%); }
[data-ground="tomato"] { background: var(--tomato); background-image: radial-gradient(ellipse 80% 70% at 50% 40%, var(--glow-tomato), var(--tomato) 72%); }
[data-ground="ink"] { background: var(--ink); background-image: radial-gradient(ellipse 80% 70% at 50% 40%, var(--glow-ink), var(--ink) 72%); }
[data-ground="brown"] { background: var(--brown); background-image: radial-gradient(ellipse 80% 70% at 50% 40%, var(--glow-brown), var(--brown) 72%); }
.scene { background: var(--olive); }

.live-grounds [data-ground], .live-grounds .scene { background: transparent; background-image: none; }
.live-grounds .grounds { display: block; position: fixed; inset: 0; z-index: -1; }
.grounds i { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.grounds i.on { opacity: 1; }
.grounds [data-g="red"] { background: radial-gradient(ellipse 80% 70% at 50% 70%, var(--glow-red), var(--red) 72%); }
.grounds [data-g="olive"] { background: radial-gradient(ellipse 80% 70% at 50% 40%, var(--glow-olive), var(--olive) 72%); }
.grounds [data-g="mustard"] { background: radial-gradient(ellipse 80% 70% at 50% 40%, var(--glow-mustard), var(--mustard) 72%); }
.grounds [data-g="tomato"] { background: radial-gradient(ellipse 80% 70% at 50% 40%, var(--glow-tomato), var(--tomato) 72%); }
.grounds [data-g="ink"] { background: radial-gradient(ellipse 80% 70% at 50% 40%, var(--glow-ink), var(--ink) 72%); }
.grounds [data-g="brown"] { background: radial-gradient(ellipse 80% 70% at 50% 40%, var(--glow-brown), var(--brown) 72%); }

/* ---------- Buttons: a fill that sweeps in, a press that gives ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: .3em 1.5em; border-radius: 999px;
  font: 700 1.08rem/1.3 var(--text); text-decoration: none; cursor: pointer;
  border: 2px solid var(--gold); transition: transform .18s var(--ease), color .3s ease;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
[dir="ltr"] .btn::before { transform-origin: left; }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: scale(.95); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold::before { background: var(--cream); }
.btn--line { color: var(--cream); border-color: var(--cream-2); }
.btn--line::before { background: var(--cream); }
.btn--line:hover, .btn--line:focus-visible { color: var(--ink); }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 30; }
.top::before { content: ""; position: absolute; inset: 0; background: rgb(28 18 16 / .78); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s ease; }
.top.is-solid::before { opacity: 1; }
.still .top::before, html:not(.js-ready) .top::before { opacity: 1; }
.top__row { position: relative; display: flex; align-items: center; gap: 16px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-inline-end: auto; }
.brand__mark { display: block; width: 62px; }
.brand__name { font: 400 2.3rem/1 var(--display); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { position: relative; text-decoration: none; padding: .35em .8em; font-weight: 700; }
.nav a::after { content: ""; position: absolute; inset-inline: .8em; bottom: .15em; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav__lang { border: 1.5px solid var(--line); border-radius: 999px; margin-inline-start: 6px; }
.nav__lang::after { display: none; }
.menu-btn { display: none; }
@media (max-width: 899px) {
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px;
    border: 1.5px solid var(--cream-2); background: rgba(0,0,0,.2); color: var(--cream); font: 700 1rem/1 var(--text); cursor: pointer;
  }
  .menu-btn__bars, .menu-btn__bars::before { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .3s var(--ease); }
  .menu-btn__bars::before { content: ""; position: absolute; top: 6px; }
  .menu-btn[aria-expanded="true"] .menu-btn__bars { transform: translateY(3px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(-6px) rotate(-90deg); }
  .nav {
    position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: rgb(28 18 16 / .96); padding: 6px 16px 16px; border-bottom: 2px solid var(--gold);
    transform-origin: top; transform: scaleY(.6); opacity: 0; visibility: hidden;
    transition: transform .3s var(--ease), opacity .25s ease, visibility 0s linear .3s;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .3s var(--ease), opacity .25s ease; }
  .nav a { padding: .7em .2em; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .nav__lang { border: 0; border-radius: 0; margin: 0; }
}

/* ---------- Hero stage ---------- */
.stage { position: relative; padding: 26px 0 40px; text-align: center; overflow: hidden; }
.stage__copy { position: relative; z-index: 2; max-width: 980px; }
.stage__where { color: var(--gold); font-weight: 700; margin-bottom: .4em; }
.stage h1 { font-size: clamp(3.8rem, 14vw, 8.8rem); line-height: 1; }
.w { display: inline-block; overflow: hidden; padding: .12em .04em .22em; margin-block: -.12em -.22em; vertical-align: bottom; }
.w > span { display: inline-block; }
.stage__lede { max-width: 36em; margin: .6em auto 0; color: var(--cream-2); font-size: 1.3rem; }
@media (max-width: 560px) { .stage__lede { font-size: 1.12rem; } }
.stage__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 1.3em; }
.stage__shot { position: relative; z-index: 1; margin: 6px auto 0; max-width: 940px; }
.stage__shot::before { content: ""; position: absolute; inset: 8% 12% 10%; background: radial-gradient(ellipse at 50% 60%, rgb(var(--gold-rgb) / .45), transparent 70%); filter: blur(30px); z-index: -1; }
.stage__shot img {
  width: 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}
.lids { position: relative; z-index: 3; display: flex; justify-content: center; gap: clamp(12px, 4vw, 40px); margin-top: clamp(-80px, -6vw, -30px); }
.lid {
  --c: var(--lid-g); --t: var(--cream);
  position: relative; display: grid; place-items: center; text-decoration: none;
  width: clamp(92px, 24vw, 120px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.42), transparent 42%), var(--c);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.2), inset 0 0 0 10px rgba(255,255,255,.14), 0 14px 26px rgba(0,0,0,.4);
  color: var(--t); font: 400 clamp(1.3rem, 5vw, 2rem)/.95 var(--display); padding: 12px; transition: transform .25s var(--ease);
}
.lid::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px dashed rgb(var(--gold-rgb) / .7); opacity: 0; transition: opacity .3s ease, transform .9s var(--ease); }
.lid:hover::before, .lid:focus-visible::before { opacity: 1; transform: rotate(120deg); }
.lid:active .lid__face { transform: scale(.92); }
.lid__face { transition: transform .2s var(--ease); }
.lid--y { --c: var(--lid-y); --t: var(--ink); }
.lid--r { --c: var(--lid-r); }

/* Entrance (CSS only, so it runs before site.js) */
@keyframes rise-word { from { transform: translateY(115%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes shot-in { from { opacity: 0; transform: translateY(70px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes roll-in { from { opacity: 0; transform: translateX(-60vw) rotate(-540deg); } to { opacity: 1; transform: none; } }
@keyframes mark-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.motion .w > span { transform: translateY(115%); animation: rise-word .9s var(--ease) forwards; animation-delay: calc(var(--i) * 85ms + 150ms); }
.motion .rise { opacity: 0; animation: rise .8s var(--ease) forwards; animation-delay: calc(var(--i) * 85ms + 250ms); }
.motion .stage__shot picture { display: block; opacity: 0; animation: shot-in 1.3s var(--ease) .45s forwards; }
.motion .lid { opacity: 0; animation: roll-in 1.2s var(--ease) forwards; animation-delay: calc(var(--i) * 140ms + 1s); }
.motion .brand__mark { animation: mark-in 1s var(--ease) .1s both; }
.stage__copy, .stage__shot { will-change: transform; }

/* ---------- Label ticker ---------- */
.ticker { direction: ltr; overflow: hidden; background: var(--ink); color: var(--gold); border-block: 2px solid var(--gold); padding: 10px 0; position: relative; z-index: 2; }
.ticker__track { display: flex; width: max-content; }
.ticker__track > span { direction: rtl; white-space: nowrap; font: 400 clamp(2.1rem, 5.8vw, 3.1rem)/1.1 var(--display); padding-inline-end: .4em; }
.motion .ticker__track { animation: tick 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.still .ticker__track > span + span { display: none; }
.still .ticker { text-align: center; } .still .ticker__track { margin-inline: auto; }

/* ---------- Generic reveal ---------- */
.js-ready.motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.js-ready.motion .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Products: the turning-label scene ---------- */
.scene { padding: 80px 0 40px; }
.scene__head { text-align: center; margin-bottom: 40px; padding: 8px 0; }
.scene__head h2, .route h2, .reach h2 { font-size: clamp(3.4rem, 9.5vw, 5.8rem); }
.scene__head p { color: var(--cream-2); }
.pane { display: grid; gap: 22px; padding: 28px 16px 44px; border-radius: 28px; margin-bottom: 18px; align-items: center; }
@media (min-width: 760px) { .pane { grid-template-columns: minmax(0, 420px) 1fr; gap: 48px; padding: 40px; } }
.pane__lid { position: relative; isolation: isolate; margin: 0 auto; width: min(72vw, 420px); }
.pane__lid img, .stage-lid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.pane__lid::before, .stage-lid::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 10px solid var(--rim, var(--lid-g)); box-shadow: 0 0 0 3px rgba(0,0,0,.25), 0 24px 50px rgba(0,0,0,.45); z-index: -1; }
.pane[data-rim="g"], .stage-lid[data-rim="g"] { --rim: var(--lid-g); }
.pane[data-rim="y"], .stage-lid[data-rim="y"] { --rim: var(--lid-y); }
.pane[data-rim="r"], .stage-lid[data-rim="r"] { --rim: var(--lid-r); }
.pane__band, .stage-label {
  position: absolute; inset-inline: -6%; bottom: 14%; text-align: center;
  background: var(--ink); color: var(--gold); border-block: 3px solid var(--gold);
  font: 400 clamp(2.4rem, 7.5vw, 3.4rem)/1.15 var(--display); padding: 2px 10px; box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.pane__from { color: var(--gold); font-weight: 700; margin-bottom: .2em; }
.pane h3 { font-size: clamp(3.2rem, 8vw, 4.8rem); margin-bottom: .1em; }
.pane__text > p:not(.pane__from) { color: var(--cream-2); font-size: 1.18rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ticks li { border: 1.5px solid var(--line); border-radius: 999px; padding: .1em .9em; font-weight: 700; transition: transform .2s var(--ease), border-color .2s; }
.ticks li:hover { transform: translateY(-3px); border-color: var(--gold); }

/* Phone / non-sticky motion: each lid rolls in, then its label flips down */
.js-ready.motion .pane__lid { opacity: 0; transform: translateX(-55%) rotate(-200deg); transition: opacity .6s ease, transform 1.1s var(--ease); }
.js-ready.motion .pane__band { transform: perspective(500px) rotateX(-95deg); transform-origin: top; opacity: 0; transition: transform .7s var(--ease) .65s, opacity .3s ease .65s; }
.js-ready.motion .pane.is-in .pane__lid { opacity: 1; transform: none; }
.js-ready.motion .pane.is-in .pane__band { opacity: 1; transform: none; }
.js-ready.motion .pane__text > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s var(--ease); }
.js-ready.motion .pane.is-in .pane__text > * { opacity: 1; transform: none; }
.js-ready.motion .pane.is-in .pane__text > :nth-child(2) { transition-delay: .1s; }
.js-ready.motion .pane.is-in .pane__text > :nth-child(3) { transition-delay: .2s; }
.js-ready.motion .pane.is-in .pane__text > :nth-child(4) { transition-delay: .3s; }

.scene__stage { display: none; }

/* Desktop sticky scene (site.js adds .scene--live) */
@media (min-width: 960px) {
  .scene--live .scene__body { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
  .scene--live .scene__stage { display: block; position: sticky; top: calc(50vh - 250px); height: 500px; perspective: 900px; }
  .scene--live .pane { min-height: 92vh; grid-template-columns: 1fr; padding: 0; margin: 0; background: transparent; }
  .scene--live .pane__lid { display: none; }
  .scene--live .pane__text { max-width: 30em; }
  .spin-ring { position: absolute; inset: 10px 30px; margin: auto; width: 480px; height: 480px; border-radius: 50%; border: 2px dashed rgb(var(--gold-rgb) / .45); animation: spin 40s linear infinite; }
  .stage-lids { position: absolute; inset: 0; display: grid; place-items: center; }
  .stage-lid { position: absolute; width: 400px; transition: transform 1.1s var(--ease), opacity .7s ease; transform: translateX(-130%) rotate(-260deg); opacity: 0; }
  .stage-lid[data-state="after"] { transform: translateX(130%) rotate(260deg); opacity: 0; }
  .stage-lid[data-state="active"] { transform: none; opacity: 1; }
  .stage-labels { position: absolute; inset-inline: 40px; bottom: 70px; height: 70px; transform-style: preserve-3d; }
  .stage-label { inset-inline: 0; bottom: 0; transform-origin: 50% 50% -35px; transform: rotateX(90deg); opacity: 0; transition: transform .8s var(--ease) .15s, opacity .4s ease .15s; }
  .stage-label[data-state="after"] { transform: rotateX(-90deg); }
  .stage-label[data-state="active"] { transform: none; opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Route ---------- */
.route { padding: 90px 0; }
.route h2, .route__sub { text-align: center; }
.route__sub { color: var(--cream-2); }
.route__map { margin: 28px auto 0; max-width: 1000px; }
.route__map svg { width: 100%; height: auto; overflow: visible; }
.route text { fill: var(--cream); font: 400 56px var(--display); }
.route .sea { fill: rgb(var(--cream-rgb) / .35); font: 500 26px var(--text); }
@media (max-width: 600px) { .route text { font-size: 84px; } .route .sea { font-size: 40px; } .route__map svg { overflow: visible; padding-inline: 20px; } }
.coast { fill: none; stroke: rgb(var(--cream-rgb) / .16); stroke-width: 2; }
.leg { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.leg--e { stroke: var(--gold-deep); }
.pin circle { fill: var(--ink); stroke: var(--gold); stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.pin--home circle { fill: var(--gold); stroke: var(--cream); }
.runner { fill: var(--cream); opacity: 0; }
.js-ready.motion .route .leg { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) .3s; }
.js-ready.motion .route .pin circle { transform: scale(0); transition: transform .6s var(--ease); }
.js-ready.motion .route .pin--home circle { transition-delay: 1.8s; }
.js-ready.motion .route.is-in .leg { stroke-dashoffset: 0; }
.js-ready.motion .route.is-in .pin circle { transform: none; }
.js-ready.motion .route.is-run .runner { opacity: 1; transition: opacity .4s ease; }
.route__stops { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; direction: ltr; }
@media (min-width: 760px) { .route__stops { grid-template-columns: repeat(3, 1fr); } }
.route__stops li { direction: rtl; display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border: 1.5px solid var(--line); border-radius: 18px; text-align: center; transition: transform .25s var(--ease), border-color .25s; }
[lang="en"] .route__stops li { direction: ltr; }
.route__stops li:hover { transform: translateY(-4px); border-color: var(--gold); }
.route__stops b { font: 400 2.9rem/1.05 var(--display); color: var(--gold); }
.route__stops em { font-style: normal; color: var(--cream-2); }
.route__home { background: rgb(var(--gold-rgb) / .1); border-color: var(--gold) !important; }

/* ---------- About ---------- */
.about { padding: 90px 0 70px; }
.about__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .about__grid { grid-template-columns: minmax(0, 480px) 1fr; gap: 64px; } }
.about h2 { font-size: clamp(3rem, 7.5vw, 4.6rem); margin-bottom: .25em; }
.about__text p { color: var(--cream-2); }
.about__photo { margin: 0; }
.about__photo img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 0 10px rgb(var(--gold-rgb) / .9), 0 0 0 14px rgba(0,0,0,.25), 0 30px 60px rgba(0,0,0,.5); }
.js-ready.motion .about__photo img { transform: scale(.6) rotate(-30deg); opacity: 0; transition: transform 1.2s var(--ease), opacity .8s ease; }
.js-ready.motion .about__photo.is-in img { transform: none; opacity: 1; }
.vision { margin: 64px 0 0; text-align: center; }
.vision p { margin: 0 auto; max-width: 22em; font: 400 clamp(2.9rem, 7.4vw, 4.8rem)/1.15 var(--display); }
.vw { opacity: .22; transition: opacity .35s ease; }
.vw.lit { opacity: 1; }

/* ---------- Reach: three lids to order ---------- */
.reach { padding: 90px 0; }
.reach h2, .reach__sub { text-align: center; }
.reach__sub { color: var(--cream-2); }
.reach__lids { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 34px 0 40px; }
.big-lid { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; text-decoration: none; padding: 24px 12px; border-radius: 26px; background: rgba(0, 0, 0, .22); border: 1.5px solid var(--line); transition: border-color .25s, transform .2s var(--ease); }
.big-lid:hover { border-color: var(--gold); }
.big-lid:active { transform: scale(.97); }
.big-lid b { font: 400 2.7rem/1.05 var(--display); margin-top: 10px; }
.big-lid > span:last-child { color: var(--cream-2); font-weight: 700; overflow-wrap: anywhere; }
.big-lid__disc {
  --c: var(--lid-g); display: grid; place-items: center; width: 108px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.42), transparent 42%), var(--c);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.2), inset 0 0 0 10px rgba(255,255,255,.14), 0 14px 26px rgba(0,0,0,.4);
  transition: transform .5s var(--ease);
}
.big-lid__disc svg { width: 44px; height: 44px; fill: var(--cream); }
.big-lid--y .big-lid__disc { --c: var(--lid-y); } .big-lid--y svg { fill: var(--ink); }
.big-lid--r .big-lid__disc { --c: var(--lid-r); }
.big-lid:hover .big-lid__disc, .big-lid:focus-visible .big-lid__disc { transform: rotate(-24deg) scale(1.06); }
.big-lid:active .big-lid__disc { transform: rotate(-24deg) scale(.94); }

.reach__grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .reach__grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--gold); font-weight: 700; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts a { text-decoration-color: var(--gold); text-underline-offset: 4px; }
.map { position: relative; min-height: 280px; border-radius: 26px; overflow: hidden; background: rgba(0,0,0,.25); border: 1.5px solid var(--line); display: grid; place-items: center; text-align: center; padding: 20px; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__load { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--gold); background: transparent; color: var(--cream); font: 700 1.1rem/1 var(--text); cursor: pointer; transition: transform .2s var(--ease); }
.map__load:hover { transform: translateY(-2px); } .map__load:active { transform: scale(.95); }
.map__pin { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; background: var(--gold); transform: rotate(-45deg); }
.map__note { margin: 10px 0 0; color: var(--cream-2); font-size: .95rem; }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: var(--cream-2); border-top: 3px solid var(--gold); padding: 28px 0 32px; position: relative; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.foot__brand { display: flex; align-items: center; gap: 10px; margin-inline-end: auto; color: var(--gold); font: 400 2.2rem/1 var(--display); }
.foot__brand img { width: 58px; }
.foot__copy { margin: 0; }
/* "built by Nivo IT" mark: the NIVO IT character seated on a cream lid */
.nivo-it { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); }
.nivo-it__disc {
  display: grid; place-items: center; width: 56px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fffaf0, var(--cream) 60%);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.12), 0 0 0 2px var(--gold), 0 8px 18px rgba(0,0,0,.4);
  transition: transform .5s var(--ease);
}
.nivo-it__disc img { width: 44px; height: 44px; transition: transform .45s var(--ease); }
.nivo-it__text { font-weight: 700; font-size: 1.02rem; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.nivo-it:hover .nivo-it__disc, .nivo-it:focus-visible .nivo-it__disc { transform: rotate(-24deg); }
.nivo-it:hover .nivo-it__disc img, .nivo-it:focus-visible .nivo-it__disc img { transform: rotate(24deg) translateY(-3px) scale(1.08); }
.nivo-it:hover .nivo-it__text, .nivo-it:focus-visible .nivo-it__text { color: var(--gold); border-color: currentColor; }
.nivo-it:active .nivo-it__disc { transform: rotate(-24deg) scale(.92); }

/* ---------- 404 ---------- */
.lost { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 48px 16px; }
.lost h1 { font-size: clamp(3.8rem, 13vw, 6.4rem); }
.lost p { color: var(--cream-2); }
.lost .stage__cta { justify-content: center; }
.lost .lid { margin: 0 auto 20px; }
.motion .lost .lid { animation: roll-in 1.2s var(--ease) .1s both; }

/* ---------- Reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
.still .vw { opacity: 1; }