/* Manufactory 1993: a factory spec sheet. Kraft paper, ink black, safety orange, steel grey, drafting grid.
   Motion: the rubber stamp slams onto the name plate, counters roll like odometers, gears follow the scroll,
   the conveyor carries pies and bottles, labels are applied like stickers, pages feed in like a printer.
   Rule: the base style is always the FINAL state; animations only describe the way there,
   so reduced motion (and no JS) shows a complete, static page. */

@font-face { font-family: "M93 Display"; src: url("/fonts/sofia-xcond-800.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0000-04FF, U+2000-206F, U+20BE, U+2116, U+2190-2193; }
@font-face { font-family: "M93 Sans"; src: url("/fonts/sofia-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-04FF, U+2000-206F, U+20BE, U+2116, U+2190-2193; }
@font-face { font-family: "M93 Mono"; src: url("/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-04FF, U+2000-206F, U+2116, U+2190-2193; }
@font-face { font-family: "M93 Stencil"; src: url("/fonts/stencil-800.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0020-005A, U+00B7, U+2013, U+2022, U+2116; }
@font-face { font-family: "Noto Sans Georgian"; src: url("/fonts/noto-sans-georgian.woff2") format("woff2"); font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }

:root {
  --kraft: #d9c3a0; --kraft-2: #cdb48b; --kraft-3: #bea27a; --label: #f3ead8;
  --ink: #161616; --ink-2: #262626; --orange: #ff5a1f; --steel: #6b737b; --steel-2: #3f464d; --muted: #4a4540;
  --display: "M93 Display", "Noto Sans Georgian", "Arial Narrow", sans-serif;
  --body: "M93 Sans", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "M93 Mono", "Noto Sans Georgian", ui-monospace, Menlo, Consolas, monospace;
  --stencil: "M93 Stencil", "M93 Display", "Arial Narrow", sans-serif;
  --wrap: 1240px; --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1); --snap: cubic-bezier(.7, 0, .2, 1);
  --hazard: repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--orange) 10px 20px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0; color: var(--ink); font: 400 1.0625rem/1.6 var(--body);
  background-color: var(--kraft);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .2  0 0 0 0 .08  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"),
    linear-gradient(rgba(70, 48, 18, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 48, 18, .1) 1px, transparent 1px),
    linear-gradient(rgba(70, 48, 18, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 48, 18, .05) 1px, transparent 1px);
  background-size: 220px 220px, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
main { overflow-x: clip; } /* the stamp flies in at 2.4x from off the plate: it must never widen the page */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--orange); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.strip :focus-visible, .site-footer :focus-visible, .rplate:focus-visible, .cta-bar :focus-visible, .map :focus-visible, .plate :focus-visible { outline-color: var(--orange); }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--kraft); padding: .6rem 1rem; z-index: 50; }
.skip:focus { top: 8px; }
.mono { font-family: var(--mono); font-weight: 500; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: .92; margin: 0; text-transform: uppercase; letter-spacing: .005em; }
h1 { font-size: clamp(3.1rem, 8.2vw, 7.2rem); line-height: .86; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h3 { font-size: 1.75rem; }
p { margin: 0 0 1rem; }
.lang-ka h1, .lang-ka h2, .lang-ka h3, .lang-ka .btn, .lang-ka .nav a, .lang-ka .label-title { text-transform: none; font-stretch: 75%; letter-spacing: 0; }
.lang-ka h1 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); line-height: 1.04; }
.lang-ka h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.1; }
.lang-ka h3 { font-size: 1.35rem; line-height: 1.15; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- top strip: the sheet's title line ---------- */
.strip { background: var(--ink); color: var(--kraft); font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.strip-in { display: flex; gap: 1.2rem; padding: .55rem 0; white-space: nowrap; overflow: hidden; }
.strip-in span + span::before { content: "/" / ""; margin-right: 1.2rem; color: var(--orange); }
.strip-id { color: var(--orange); }
.strip-sheet { margin-left: auto; }
.strip-sheet::before { display: none; }
@media (max-width: 420px) { .strip-id, .strip-in > span:nth-child(2) { display: none; } .strip-in > span:nth-child(3)::before { display: none; } .strip-in { gap: .8rem; } }

/* ---------- header ---------- */
.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; padding: 1rem 0 .9rem; border-bottom: 3px solid var(--ink); position: relative; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--ink); }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; line-height: 1; }
.logo img { display: block; width: auto; height: 56px; } /* the real lockup on its black ground, like a sign */
.nav { display: flex; gap: 1.4rem; margin-inline-start: auto; }
.nav a { position: relative; display: inline-flex; align-items: baseline; gap: .35rem; padding: .45rem 0; text-decoration: none; font: 800 1.2rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.nav-no { font: 500 .7rem/1 var(--mono); color: var(--muted); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--snap); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: none; }
.nav a[aria-current="page"] .nav-no { color: var(--ink); }
.lang { display: flex; border: 2px solid var(--ink); margin-inline-start: .4rem; }
.lang a { padding: .4rem .55rem; font: 500 .8rem/1 var(--mono); text-decoration: none; letter-spacing: .06em; }
.lang a + a { border-left: 2px solid var(--ink); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--kraft); }
.lang a:hover:not([aria-current]) { background: var(--label); }
@media (max-width: 760px) {
  .strip-in > span:nth-child(2) { display: none; }
  .site-header { gap: .7rem .6rem; }
  .site-header .head-call { display: none; }
  .logo { flex: 1 1 auto; gap: .4rem; }
  .logo img { height: 50px; }
  .lang { margin: 0; }
  .lang a { padding: .4rem .45rem; }
  .nav { flex: 1 0 100%; margin: 0; gap: 1.1rem; }
  .nav a { font-size: 1.1rem; }
  .nav-no { display: none; }
}

/* ---------- buttons: machine keys that press down ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px;
  padding: .8rem 1.35rem .7rem; font: 800 1.15rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; color: var(--kraft); background: var(--ink); border: 2px solid var(--ink);
  box-shadow: 0 5px 0 var(--steel-2); transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.btn-hot { background: var(--orange); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.btn-sub { font: 500 .85rem/1 var(--mono); letter-spacing: .02em; text-transform: none; }
.btn-sm { min-height: 42px; padding: .55rem 1rem .5rem; font-size: 1rem; box-shadow: 0 4px 0 var(--ink); }
@media (hover: hover) {
  .btn:hover { animation: buzz .2s steps(2, jump-none) 2; }
  .btn-ghost:hover { background: var(--label); }
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); animation: none; }
@keyframes buzz { 0%, 100% { translate: 0 0; } 33% { translate: 1px -1px; } 66% { translate: -1px 1px; } }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.1rem; margin: 1.6rem 0; }

/* ---------- hero ---------- */
.hero { display: grid; gap: 2.5rem 3rem; align-items: center; padding: clamp(1.75rem, 4.5vw, 3.75rem) 0 clamp(2rem, 4vw, 3rem); }
@media (min-width: 980px) { .hero { grid-template-columns: 1.12fr .88fr; } }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: 0 0 1rem; font: 500 .8rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tag { display: inline-block; padding: .3rem .45rem .25rem; background: var(--ink); color: var(--kraft); }
.hero h1 { max-width: 9.5em; }
.lang-ka .hero h1 { max-width: 12em; }
h1 .w { display: inline-block; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.25rem); max-width: 34em; margin: 1.4rem 0 0; }
.spec { display: grid; margin: .5rem 0 0; border-top: 2px solid var(--ink); max-width: 36rem; }
.spec > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed rgba(22, 22, 22, .5); }
.spec dt, .spec-k { font: 500 .74rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.spec dd { margin: 0; font-weight: 700; }
@media (max-width: 520px) { .spec > div { grid-template-columns: 1fr; gap: 0; } }

/* name plate + gears + stamp */
.hero-visual { position: relative; width: 100%; max-width: 540px; justify-self: center; aspect-ratio: 1 / .98; margin-bottom: 6%; }
.gears { position: absolute; width: 62%; top: -3%; right: -6%; overflow: visible; }
.plate {
  position: absolute; left: 0; right: 6%; top: 25%; padding: 1.7rem 1.7rem 1.3rem; color: var(--kraft);
  background: var(--ink) linear-gradient(160deg, rgba(255, 255, 255, .06), transparent 45%); border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--steel-2), inset 0 0 0 9px var(--ink), inset 0 0 0 10.5px rgba(217, 195, 160, .45), 12px 12px 0 rgba(22, 22, 22, .22);
}
.rivet { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c3c8cc, var(--steel) 55%, var(--steel-2)); }
.rivet:nth-child(1) { top: 9px; left: 9px; } .rivet:nth-child(2) { top: 9px; right: 9px; }
.rivet:nth-child(3) { bottom: 9px; left: 9px; } .rivet:nth-child(4) { bottom: 9px; right: 9px; }
/* the logo file keeps its black margin (12 of 277 units a side): widen it so the letters meet the plate's text edges;
   lighten melts its black ground into the plate's sheen */
.plate-logo { display: block; width: 109.5%; max-width: none; height: auto; margin: -.75rem 0 -1rem -4.75%; mix-blend-mode: lighten; }
.plate-sub { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 0; font: 500 .72rem/1 var(--mono); letter-spacing: .12em; opacity: .8; }
.plate-code { display: block; width: 100%; height: 30px; margin-top: .8rem; color: var(--kraft); opacity: .85; }
.stamp-wrap { position: absolute; width: 38%; right: 3%; bottom: -10%; color: var(--orange); transform: rotate(-12deg); }
@media (max-width: 760px) { .gears { right: 0; width: 56%; } .plate { right: 0; padding: 1.4rem 1.2rem 1.1rem; } .plate-sub span + span { display: none; } }
.stamp { display: block; width: 100%; height: auto; overflow: visible; }
.stamp-ring { font-family: var(--stencil); font-weight: 800; letter-spacing: 2px; }
.stamp-center { font-family: var(--stencil); font-weight: 800; letter-spacing: 1px; }
.ink-splash { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 90, 31, .55), rgba(255, 90, 31, 0) 68%); opacity: 0; }

/* odometer: the window shows one digit of a 0-9-0-9 strip; base transform = final digit */
.odo { display: inline-flex; align-items: center; line-height: 1; font-variant-numeric: tabular-nums; vertical-align: baseline; }
.odo-d { position: relative; display: inline-block; width: 1ch; height: 1em; overflow: hidden; }
.odo-d::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9" / "";
  display: block; white-space: pre; text-align: center; line-height: 1;
  transform: translateY(calc((10 + var(--d)) * -1em));
  transition: transform calc(1.2s + var(--k) * .3s) cubic-bezier(.3, .1, .15, 1.04);
}
html.js:not(.no-hide) .odo:not(.in) .odo-d::before { transform: translateY(0); }

/* ---------- conveyor line ---------- */
.line-wrap { margin-top: .5rem; }
.line { position: relative; overflow: hidden; border-top: 2px solid var(--ink); padding-top: 1.2rem; }
.ln-track { display: flex; width: max-content; animation: run 44s linear infinite; }
.ln-set { display: flex; margin: 0; padding: 0 0 16px; list-style: none; background: repeating-linear-gradient(90deg, var(--ink) 0 24px, #4a4a4a 24px 27px) left bottom / 100% 14px no-repeat; }
.ln-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 200px; padding-bottom: 8px; }
.ln-picto { width: 96px; height: 96px; }
.ln-tag { margin-top: .4rem; padding: .15rem .45rem; font: 500 .68rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--label); border: 1.5px solid var(--ink); transform: rotate(-2deg); }
.lang-ka .ln-tag { text-transform: none; }
.eyebrow [lang="ka"], .lede [lang="ka"] { text-transform: none; } /* never Mtavruli: Georgian in mixed ka, en, ru strings stays Mkhedruli */
.ln-item:nth-child(even) .ln-tag { transform: rotate(2deg); }
.ln-frame { height: 40px; background: var(--steel-2); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.ln-rollers { display: flex; justify-content: space-around; align-items: center; height: 100%; }
.roller { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ink); background: conic-gradient(var(--steel) 0 25%, var(--kraft-3) 0 50%, var(--steel) 0 75%, var(--kraft-3) 0); animation: spin 1.9s linear infinite; }
@keyframes run { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(-360deg); } }
.line.off .ln-track, .line.off .roller, html.paused .ln-track, html.paused .roller, html.line-stop .ln-track, html.line-stop .roller { animation-play-state: paused; }
.line-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; padding: .9rem 0 0; }
.line-cap { margin: 0; font: 500 .8rem/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.lang-ka .line-cap { text-transform: none; }
.estop { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: .35rem .9rem .35rem .4rem; font: 500 .78rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--label); border: 2px solid var(--ink); cursor: pointer; }
.estop-cap { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff8a5c, var(--orange) 55%, #c63d0c); box-shadow: 0 0 0 3px var(--ink), 0 4px 0 3px var(--ink); transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.estop[aria-pressed="true"] .estop-cap { transform: translateY(3px) scale(.94); box-shadow: 0 0 0 3px var(--ink), 0 1px 0 3px var(--ink); }
.estop[aria-pressed="true"] { background: var(--kraft-2); }
html:not(.js) .estop { display: none; }

/* ---------- sections ---------- */
.section { padding: clamp(2.75rem, 6vw, 4.75rem) 0; }
.section-band { position: relative; background: var(--kraft-2); border-block: 2px solid var(--ink); }
.section-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--hazard); border-bottom: 2px solid var(--ink); }
.section-intro { font-size: 1.15rem; max-width: 42em; margin-bottom: 1.6rem; }
.page-head { padding: clamp(1.75rem, 5vw, 3.75rem) 0 .5rem; }
.page-head h1 { font-size: clamp(2.8rem, 6.6vw, 5.8rem); max-width: 13em; }
.more { margin-top: 2rem; }
.note { color: var(--muted); font-size: .95rem; margin-top: 1.5rem; }
.small { font-size: .92rem; color: var(--muted); }
.center { text-align: center; }
.sub-title { margin: 3rem 0 1.25rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* numbered section heads: "01 / TITLE ......... M93-01.01" over a double rule */
.sec-head { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 1rem 1.2rem; padding-bottom: .8rem; margin-bottom: 1.6rem; }
.sec-head::before, .sec-head::after { content: ""; position: absolute; left: 0; right: 0; background: var(--ink); transform-origin: left; transition: transform .8s var(--snap); }
.sec-head::before { bottom: 0; height: 3px; }
.sec-head::after { bottom: -7px; height: 1px; transition-delay: .12s; }
.sec-no { font: 800 clamp(2.3rem, 4.6vw, 3.4rem)/1 var(--display); background: var(--orange); padding: .12em .16em .02em; transition: transform .45s cubic-bezier(.5, 0, .3, 1.4), opacity .2s; }
.sec-head h2 { transition: transform .6s var(--ease) .1s, opacity .5s .1s; }
.sec-code { font: 500 .72rem/1 var(--mono); letter-spacing: .08em; color: var(--muted); padding-bottom: .35rem; }
@media (max-width: 600px) { .sec-head { grid-template-columns: auto 1fr; } .sec-code { display: none; } }
html.js:not(.no-hide) .sec-head.reveal:not(.in) { opacity: 1; transform: none; clip-path: none; }
html.js:not(.no-hide) .sec-head:not(.in)::before, html.js:not(.no-hide) .sec-head:not(.in)::after { transform: scaleX(0); }
html.js:not(.no-hide) .sec-head:not(.in) .sec-no { transform: scale(1.7) rotate(-10deg); opacity: 0; }
html.js:not(.no-hide) .sec-head:not(.in) h2 { transform: translateY(.35em); opacity: 0; }

/* ---------- labels (stickers on the product) ---------- */
.labels { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.label { position: relative; display: flex; flex-direction: column; background: var(--label); border: 2px solid var(--ink); box-shadow: 7px 7px 0 rgba(22, 22, 22, .2); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.label-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem .7rem; background: var(--ink); color: var(--kraft); font: 500 .74rem/1 var(--mono); letter-spacing: .1em; }
.label-no { padding: .25rem .35rem .2rem; background: var(--orange); color: var(--ink); }
.label-top::after { content: ""; order: 3; width: 13px; height: 13px; border-radius: 50%; background: var(--kraft); box-shadow: inset 0 0 0 2px var(--steel-2); }
.label-body { flex: 1; padding: 1.1rem 1.2rem .6rem; }
.label .picto { display: block; margin-bottom: .7rem; }
.label-title { font-size: 1.95rem; margin-bottom: .55rem; }
.label-title a { text-decoration: none; }
.label-title a::after { content: ""; position: absolute; inset: 0; } /* whole sticker is the link target */
.label p { margin-bottom: .8rem; }
.qc-h { margin: .2rem 0 0; font: 500 .72rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lang-ka .qc-h { text-transform: none; }
.qc { list-style: none; margin: .25rem 0 0; padding: 0; border-top: 2px solid var(--ink); }
.qc li { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; padding: .4rem 0; border-bottom: 1px dashed rgba(22, 22, 22, .45); }
.qc-k { font-weight: 700; }
.qc-v { font: 800 1.35rem/1 var(--display); grid-row: span 2; align-self: center; background: var(--ink); color: var(--kraft); padding: .25rem .4rem .15rem; }
.qc-n { font: 500 .72rem/1.4 var(--mono); color: var(--muted); }
.label-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; padding: .7rem 1.2rem .8rem; border-top: 2px dashed rgba(22, 22, 22, .5); font: 500 .68rem/1 var(--mono); letter-spacing: .1em; }
.label-foot .barcode { width: 120px; height: 26px; color: var(--ink); }
@media (hover: hover) {
  .label:hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: 11px 11px 0 rgba(22, 22, 22, .24); }
  .label:hover .picto { animation: stamp-press .32s steps(3, jump-none) 1; }
}
@keyframes stamp-press { 0%, 100% { transform: none; } 40% { transform: translateY(3px) scaleY(.9); } 70% { transform: translateY(-1px) scaleY(1.03); } }
.labels-sheet { padding: clamp(.9rem, 2vw, 1.5rem); background: rgba(243, 234, 216, .4); outline: 2px dashed rgba(22, 22, 22, .4); outline-offset: -9px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); }
/* the free slot on the label sheet: a stamp and the way to the full menu */
.slot { display: grid; align-content: center; justify-items: center; gap: 1rem; padding: 1.5rem 1.2rem; text-align: center; border: 2px dashed rgba(22, 22, 22, .55); }
.slot-stamp { width: min(200px, 70%); color: var(--orange); transform: rotate(-12deg); }
.slot p { margin: 0; font-weight: 700; max-width: 16em; }
html.js .slot.in .slot-stamp { animation: slam .6s .35s backwards; }

/* reveal: labels are applied like stickers, peeling flat from the top-left corner */
.label.reveal { transform-origin: 0 0; transition: transform .7s var(--ease), box-shadow .25s var(--ease), clip-path .75s var(--snap), opacity .3s; transition-delay: calc(var(--i, 0) * .09s); }
html.js:not(.no-hide) .label.reveal:not(.in) { opacity: 1; transform: translate(-16px, -12px) rotate(-3.5deg); clip-path: inset(0 96% 0 0); }

/* formats */
.formats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.fmt { padding: 1.1rem 1.2rem 1.2rem; background: var(--label); border: 2px solid var(--ink); }
.fmt .picto { display: block; margin-bottom: .6rem; }
.fmt h3 { font-size: 1.6rem; margin-bottom: .45rem; }
.fmt p { margin: 0; }
@media (max-width: 560px) { .fmt { display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; align-items: start; } .fmt .picto { grid-row: span 2; width: 56px; height: 56px; margin: 0; } }

/* catering: the dark shop floor with a work order torn off the pad */
.section-ink { position: relative; background: var(--ink); color: var(--kraft); }
.section-ink::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--hazard); }
.section-ink .sec-head::before, .section-ink .sec-head::after { background: var(--kraft); }
.section-ink .sec-no { color: var(--ink); }
.section-ink .sec-code { color: #b9a888; }
.section-ink :focus-visible { outline-color: var(--orange); }
.section-ink .btn-hot { box-shadow: 0 5px 0 #8a2e0b; }
.section-ink .btn-ghost { color: var(--kraft); border-color: var(--kraft); box-shadow: 0 5px 0 var(--steel-2); }
@media (hover: hover) { .section-ink .btn-ghost:hover { background: var(--ink-2); } }
.order { display: grid; gap: 2.2rem 3.5rem; align-items: center; }
@media (min-width: 900px) { .order { grid-template-columns: 1fr minmax(0, 470px); } }
.order .section-intro { margin-bottom: 0; }
.ticket { position: relative; margin-right: 12px; color: var(--ink); background: var(--label); transform: rotate(1.2deg); box-shadow: 9px 9px 0 var(--orange); } /* margin: room for the shadow and the tilt */
.ticket::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 9px; background: radial-gradient(circle at 9px 0, var(--ink) 5.5px, transparent 6px) 0 0 / 18px 9px repeat-x; } /* perforation */
.ticket-top { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 1.3rem 1.3rem .75rem; font: 500 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; border-bottom: 3px solid var(--ink); }
.lang-ka .ticket-top { text-transform: none; letter-spacing: .04em; }
.ticket-list { list-style: none; margin: 0; padding: 0 1.3rem; }
.ticket-list li { display: grid; grid-template-columns: 52px auto 1fr 40px; align-items: center; gap: .9rem; padding: .7rem 0; border-bottom: 1px dashed rgba(22, 22, 22, .5); }
.tk-picto { width: 52px; height: 52px; }
.tk-no { font: 500 .8rem/1 var(--mono); color: var(--muted); }
.tk-k { font: 800 1.95rem/1 var(--display); text-transform: uppercase; }
.lang-ka .tk-k { font-size: 1.3rem; line-height: 1.15; text-transform: none; font-stretch: 75%; }
.tk-check { width: 40px; height: 40px; color: var(--orange); transform: rotate(-8deg); transition: transform .38s cubic-bezier(.5, 0, .3, 1.4), opacity .15s; transition-delay: calc(var(--i, 0) * .24s + .5s); }
html.js:not(.no-hide) .ticket:not(.in) .tk-check { opacity: 0; transform: scale(2.3) rotate(-26deg); }
.ticket-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: .9rem 1.3rem 1rem; font: 500 .7rem/1 var(--mono); letter-spacing: .1em; }
.ticket-foot .barcode { width: 150px; height: 28px; color: var(--ink); }
@media (max-width: 420px) {
  .ticket-list { padding: 0 1rem; }
  .ticket-list li { grid-template-columns: 42px auto 1fr 32px; gap: .65rem; }
  .tk-picto { width: 42px; height: 42px; }
  .tk-k { font-size: 1.5rem; }
  .tk-check { width: 32px; height: 32px; }
}

/* rating plates */
.rplates { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.rplate { position: relative; display: grid; gap: .55rem; justify-items: start; padding: 1.3rem 1.5rem 1.4rem; color: var(--kraft); text-decoration: none; background: var(--ink); border-radius: 5px; box-shadow: inset 0 0 0 8px var(--ink), inset 0 0 0 9.5px rgba(217, 195, 160, .4), 9px 9px 0 var(--orange); transition: transform .2s var(--ease), box-shadow .2s var(--ease), clip-path .8s var(--snap), opacity .4s; }
@media (hover: hover) { .rplate:hover { transform: translate(-3px, -3px); box-shadow: inset 0 0 0 8px var(--ink), inset 0 0 0 9.5px rgba(217, 195, 160, .4), 12px 12px 0 var(--orange); } }
.rplate-src { font: 500 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.rplate-num { display: flex; align-items: flex-end; gap: .4rem; font: 800 clamp(4.5rem, 9vw, 6.5rem)/1 var(--display); }
.rplate-num .odo-d { background: #050505; border-radius: 3px; box-shadow: inset 0 .15em .2em #000, inset 0 -.15em .2em #000; padding: 0 .06em; width: calc(1ch + .12em); height: 1em; }
.rplate-num .odo-sep { align-self: flex-end; padding: 0 .04em; }
.odo-gap { width: .22em; }
.rplate-max { font: 500 1rem/1 var(--mono); color: #b9a888; padding-bottom: .5rem; }
.rplate-count { display: flex; align-items: center; gap: .5rem; font: 500 1rem/1 var(--mono); }
.odo-sm { font: 800 1.5rem/1 var(--display); color: var(--orange); }
.rplate-open { margin-top: .3rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* gauges */
.gauges { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
@media (max-width: 560px) { .gauges { grid-template-columns: 1fr 1fr; gap: .8rem; } .gauge { padding: .8rem .6rem .9rem; } .g-val { font-size: 2.1rem; } .g-k { font-size: 1.1rem; } }
.gauge { padding: 1rem 1.1rem 1.1rem; background: var(--label); border: 2px solid var(--ink); text-align: center; }
.gauge-art { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto .3rem; }
.g-needle { transform: rotate(var(--a)); transform-origin: 100px 100px; transform-box: view-box; transition: transform 1.7s cubic-bezier(.3, 1.45, .45, 1) .25s; }
.g-arc { transition: stroke-dashoffset 1.5s var(--ease) .25s; }
html.js:not(.no-hide) .gauge:not(.in) .g-needle { transform: rotate(-90deg); }
html.js:not(.no-hide) .gauge:not(.in) .g-arc { stroke-dashoffset: var(--p); }
.g-val { margin: 0; font: 800 2.6rem/1 var(--display); }
.g-k { margin: .25rem 0 0; font: 800 1.35rem/1.1 var(--display); text-transform: uppercase; }
.lang-ka .g-k { text-transform: none; font-stretch: 75%; }
.g-n { margin: .3rem 0 0; font: 500 .74rem/1.4 var(--mono); color: var(--muted); }

/* where */
.where { display: grid; gap: 2rem 3rem; align-items: center; }
@media (min-width: 860px) { .where { grid-template-columns: 300px 1fr; } }
.where .crosshair { width: min(300px, 80%); justify-self: center; color: var(--ink); }
.spec-addr { display: grid; grid-template-columns: 9.5rem 1fr; gap: .2rem 1rem; font-style: normal; border-top: 2px solid var(--ink); padding-top: .7rem; max-width: 38rem; }
.spec-addr > span:nth-child(even) { font-weight: 700; }
@media (max-width: 520px) { .spec-addr { grid-template-columns: 1fr; } .spec-addr .spec-k { margin-top: .4rem; } }

/* FAQ */
.qa-list { display: grid; gap: .8rem; align-items: start; }
@media (min-width: 1000px) { .qa-list { grid-template-columns: 1fr 1fr; } }
.qa { background: var(--label); border: 2px solid var(--ink); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem .9rem 1.2rem; cursor: pointer; font-weight: 700; font-size: 1.08rem; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+" / ""; flex: none; display: grid; place-items: center; width: 32px; height: 32px; font: 500 1.3rem/1 var(--mono); background: var(--ink); color: var(--kraft); transition: transform .25s var(--snap); }
.qa[open] summary::after { transform: rotate(45deg); background: var(--orange); color: var(--ink); }
.qa p { margin: 0; padding: 0 1.2rem 1.1rem; }
.qa[open] p { animation: qa-open .3s var(--ease); }
@keyframes qa-open { from { opacity: 0; transform: translateY(-6px); } }
.faq-list { display: grid; gap: 1.3rem; align-items: start; }
@media (min-width: 1000px) { .faq-list { grid-template-columns: 1fr 1fr; } }
.qa-full { position: relative; padding: 1.2rem 1.4rem 1.2rem; background: var(--label); border: 2px solid var(--ink); box-shadow: 6px 6px 0 rgba(22, 22, 22, .16); }
.qa-no { display: inline-block; margin-bottom: .6rem; padding: .25rem .4rem .2rem; font: 500 .74rem/1 var(--mono); letter-spacing: .08em; background: var(--ink); color: var(--kraft); }
.qa-full h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .6rem; }
.lang-ka .qa-full h2 { font-size: 1.35rem; }
.qa-full p { margin: 0; }

/* menu page notice: a warning label with a hazard edge */
.notice { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; max-width: 56rem; margin-top: 1.8rem; padding: 1.1rem 1.3rem 1.1rem 2.3rem; background: var(--label); border: 2px solid var(--ink); }
.notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: var(--hazard); border-right: 2px solid var(--ink); }
.notice p { flex: 1 1 22rem; margin: 0; }

/* contacts */
.contact-grid { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.card { padding: 1.4rem 1.5rem 1.5rem; background: var(--label); border: 2px solid var(--ink); box-shadow: 7px 7px 0 rgba(22, 22, 22, .18); }
.card h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom: 1rem; }
.card h2.mt { margin-top: 2rem; }
.spec-lg { max-width: none; }
.spec-lg address { font-style: normal; }
.tel { font-weight: 700; white-space: nowrap; }
.hours { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
.hours th, .hours td { padding: .45rem 0; border-bottom: 1px dashed rgba(22, 22, 22, .5); text-align: start; font-weight: 500; }
.hours td { text-align: end; font: 500 1rem var(--mono); }
.rbadges { display: grid; gap: .7rem; }
.rbadge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: .6rem .8rem; color: var(--kraft); text-decoration: none; background: var(--ink); box-shadow: 5px 5px 0 var(--orange); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.rbadge:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--orange); }
.rbadge:focus-visible { outline-color: var(--orange); }
.rbadge-v { font: 800 2.1rem/1 var(--display); color: var(--orange); }
.rbadge-t { display: grid; font: 500 .8rem/1.4 var(--mono); }
.rbadge-t b { font: 700 1rem/1.3 var(--body); }
.link-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.link-list li { border-bottom: 1px dashed rgba(22, 22, 22, .5); }
.link-list a { display: flex; justify-content: space-between; padding: .6rem 0; font-weight: 700; text-decoration: none; }
.link-list a::after { content: "↗" / ""; font-family: var(--mono); color: var(--muted); }
.link-list a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); }

/* map: a dark drafting panel; the Google iframe replaces it on click */
.map {
  position: relative; display: grid; place-items: center; min-height: 340px; overflow: hidden; color: var(--kraft); border: 2px solid var(--ink);
  background: var(--ink) linear-gradient(rgba(217, 195, 160, .09) 1px, transparent 1px) 0 0 / 24px 24px;
  background-image: linear-gradient(rgba(217, 195, 160, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 195, 160, .09) 1px, transparent 1px);
  background-size: 24px 24px;
}
.map .crosshair { position: absolute; width: 300px; height: 300px; color: rgba(217, 195, 160, .45); }
.map-coords { position: absolute; left: 1rem; top: .9rem; margin: 0; font-size: .78rem; letter-spacing: .08em; color: var(--orange); }
.map-hint { position: relative; align-self: end; margin: 0 1rem 1.2rem; padding: .5rem .9rem; max-width: 24rem; text-align: center; font: 500 .85rem/1.5 var(--mono); background: var(--ink); border: 1px solid rgba(217, 195, 160, .35); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.map iframe[hidden] { display: none; }
.map-tabs { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }
.map-tab[aria-pressed="true"] { background: var(--ink); color: var(--kraft); box-shadow: 0 4px 0 var(--orange); }
.maps .cta-row { margin-bottom: 0; }
html:not(.js) .map-tabs, html:not(.js) .map { display: none; } /* without JS only the links to the maps stay */
.map-open { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0; font-weight: 700; }
.map-open a { padding: .3rem 0; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* delivery: one button per app */
.delivery { margin-top: 2rem; }
.delivery h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.delivery p { margin: .6rem 0 0; max-width: 40rem; }
.delivery .cta-row { margin: 1.1rem 0 0; }

/* ---------- footer: the drawing's title block ---------- */
.site-footer { margin-top: clamp(2rem, 6vw, 4rem); padding: 2.5rem 0; background: var(--ink); color: var(--kraft); overflow: hidden; }
.site-footer a { text-decoration-color: rgba(217, 195, 160, .5); }
.site-footer a:hover { text-decoration-color: var(--orange); }
.title-block { display: grid; border: 2px solid var(--kraft); }
.tb-cell { margin: 0; padding: 1rem 1.1rem; border: 1px solid rgba(217, 195, 160, .45); }
.tb-k { display: block; font: 500 .7rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #b9a888; }
.tb-brand { margin: .2rem 0 .4rem; }
.tb-brand img { display: block; width: auto; height: 84px; max-width: 100%; margin-left: -9px; } /* the lockup's own margin lines up with the cell */
.tb-s { margin: 0; }
.tb-nap { font-style: normal; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; align-items: baseline; }
.tb-links { list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); justify-content: start; gap: .1rem 1.6rem; font-weight: 700; } /* pages | own accounts */
.tb-links a { display: inline-block; padding: .2rem 0; }
.tb-big { display: block; font: 800 3rem/1 var(--display); color: var(--orange); }
.tb-meta { font-size: .92rem; }
.tb-meta a { display: inline-block; padding: .3rem 0; }
@media (min-width: 900px) {
  .title-block { grid-template-columns: 1.3fr 1.7fr 1fr .6fr; }
  .tb-name { grid-row: span 2; }
  .tb-links { grid-row: span 2; }
  .tb-meta { grid-column: 2; }
  .tb-sheet { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
}
@media (max-width: 520px) { .tb-nap { grid-template-columns: 1fr; gap: 0; } .tb-nap .tb-k { margin-top: .5rem; } }

/* mobile call bar slides up after the first screen */
.cta-bar { display: none; }
@media (max-width: 760px) {
  .site-footer { padding-bottom: 5.4rem; }
  .page-chooser, .page-404 { padding-bottom: 0; }
  .cta-bar { position: fixed; z-index: 20; inset: auto 0 0 0; display: flex; gap: .7rem; padding: .75rem 1rem calc(.85rem + env(safe-area-inset-bottom)); background: var(--ink); border-top: 3px solid var(--orange); transition: transform .4s var(--snap); }
  .cta-bar .btn { flex: 1; box-shadow: 0 4px 0 var(--steel-2); }
  .cta-bar .btn-ghost { color: var(--kraft); border-color: var(--kraft); }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: translateY(115%); }
  html.js .cta-bar:not(.show):focus-within { transform: none; }
  html { scroll-padding-bottom: 6rem; }
}

/* root language chooser and 404 */
.chooser { display: grid; gap: 2rem 4rem; align-items: center; min-height: 100svh; padding: clamp(1.5rem, 5vw, 3rem) 0; }
@media (min-width: 900px) { .page-chooser .chooser { grid-template-columns: 1fr 1fr; } }
.chooser h1 { font-size: clamp(3.2rem, 8vw, 6.6rem); }
.chooser .lede { margin-bottom: 1.6rem; }
.keys { display: flex; flex-wrap: wrap; gap: 1rem; }
.key { display: grid; gap: .35rem; min-width: 128px; padding: .9rem 1.1rem .8rem; text-decoration: none; background: var(--label); border: 2px solid var(--ink); box-shadow: 0 7px 0 var(--ink); transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.key-code { font: 800 2.6rem/1 var(--display); }
.key-name { font: 500 .8rem/1 var(--mono); letter-spacing: .06em; }
@media (hover: hover) { .key:hover { background: var(--orange); animation: buzz .2s steps(2, jump-none) 2; } }
.key:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--ink); }
.chooser-nap { margin-top: 1.8rem; font: 500 .82rem/1.5 var(--mono); letter-spacing: .04em; }
.page-404 .chooser { position: relative; justify-items: start; }
.gears-404 { width: min(46vw, 520px); top: 12%; right: 0; opacity: .9; }
@media (max-width: 760px) { .gears-404 { top: auto; bottom: 4%; width: 60vw; } }
.big-404 { font-size: 0; }
.odo-404 { display: flex; gap: .5rem; font: 800 clamp(6rem, 22vw, 13rem)/1 var(--display); color: var(--orange); }
.odo-404 .odo-d { width: auto; padding: 0 .08em; height: 1.04em; background: var(--ink); border-radius: 6px; }

/* ---------- motion ---------- */
/* generic reveal: blocks feed out of a slot from the top, like paper from a printer */
.reveal { transition: opacity .5s var(--ease), transform .7s var(--ease), clip-path .8s var(--snap); transition-delay: calc(var(--i, 0) * .08s); }
/* Not inset(... 100% ...): Chromium's IntersectionObserver honours the target's own clip-path, so a fully clipped block never intersects and never reveals. */
html.js:not(.no-hide) .reveal:not(.in) { opacity: 0; transform: translateY(-10px); clip-path: inset(0 0 96% 0); }
html.js .reveal.in { clip-path: inset(-24px -32px -32px -32px); }
.rplate.reveal { transition: transform .2s var(--ease), box-shadow .2s var(--ease), clip-path .8s var(--snap), opacity .4s; }

/* first load: headline words are pressed in, then the stamp slams onto the name plate */
html.js h1 .w { animation: press .55s var(--snap) backwards; animation-delay: calc(var(--i) * .08s + .1s); }
@keyframes press {
  0% { clip-path: inset(0 0 100% 0); transform: translateY(-.32em); }
  70% { clip-path: inset(-.2em -.1em); transform: translateY(.03em); }
  100% { clip-path: inset(-.2em -.1em); transform: none; }
}
html.js .stamp-wrap { animation: slam .7s 1.25s backwards; }
@keyframes slam {
  0% { transform: translate(30px, -70px) rotate(-34deg) scale(2.4); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  12% { opacity: 1; }
  62% { transform: rotate(-10deg) scale(.93); animation-timing-function: ease-out; }
  80% { transform: rotate(-12.6deg) scale(1.025); }
  100% { transform: rotate(-12deg) scale(1); }
}
html.js .stamp { animation: ink-bleed .9s 1.68s backwards; }
@keyframes ink-bleed { 0% { filter: blur(1.4px); } 100% { filter: blur(0); } }
html.js .ink-splash { animation: splash .9s 1.66s ease-out; }
@keyframes splash { 0% { opacity: 0; transform: scale(.7); } 15% { opacity: .9; } 100% { opacity: 0; transform: scale(1.35); } }
html.js .hero .plate { animation: thud .32s 1.68s; }
@keyframes thud { 0%, 100% { transform: none; } 30% { transform: translate(2px, 4px); } 60% { transform: translate(-1px, -1px); } }

/* page transitions (Chromium/Safari): the next sheet is printed top to bottom in steps */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-dim .45s steps(4) both; }
::view-transition-new(root) { animation: vt-feed .55s steps(9, end) both; }
@keyframes vt-feed { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } /* both ends: none does not interpolate with inset() */
@keyframes vt-dim { to { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js:not(.no-hide) .reveal:not(.in), html.js:not(.no-hide) .label.reveal:not(.in) { opacity: 1; transform: none; clip-path: none; }
  html.js:not(.no-hide) .odo:not(.in) .odo-d::before { transform: translateY(calc((10 + var(--d)) * -1em)); }
  html.js:not(.no-hide) .gauge:not(.in) .g-needle { transform: rotate(var(--a)); }
  html.js:not(.no-hide) .gauge:not(.in) .g-arc { stroke-dashoffset: 0; }
  html.js:not(.no-hide) .sec-head:not(.in)::before, html.js:not(.no-hide) .sec-head:not(.in)::after, html.js:not(.no-hide) .sec-head:not(.in) .sec-no, html.js:not(.no-hide) .sec-head:not(.in) h2 { transform: none; opacity: 1; }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: none; }
  html.js:not(.no-hide) .ticket:not(.in) .tk-check { opacity: 1; transform: rotate(-8deg); }
  .estop { display: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}