/* Tech-Bar (טק-בר) — www.tech-bar.net
   Layout: Hebrew RTL marketing site. Light "mist" pages in the logo's slate-teal, dark photo bands
   for the bar itself, brass (from the bar photos) only for calls to action and the order ticket. */
:root {
  /* Redesign 2026-10-05, against gofersfoamer.com and flamwinery.com.
     What changed and why:
     - Headings were the brand teal. Both references set headings in near-black
       and spend colour only on the one thing they want clicked; brand-coloured
       headlines are what made this read as a template.
     - The page was a cold mist (#eef2f2). Warm paper reads as print, which is
       the register both references work in.
     - One typeface, not two. Gofer's runs a single humanist Hebrew sans at
       every size and gets its contrast from weight and scale. The serif/sans
       pairing here was doing the opposite. */
  --ink: #16181c;        /* headings and body — near-black, warm */
  --ink-2: #3f454c;      /* secondary text */
  --muted: #6b7279;      /* captions, 4.6:1 on paper */
  --teal: #294752;       /* the logo colour — brand, no longer the headline colour */
  --teal-2: #3d6574;
  --mist: #f7f5f2;       /* page background — warm paper, not cold mist */
  --paper: #ffffff;
  --line: #e4e0d9;
  --night: #121316;      /* dark bands — neutral, so photos keep their own colour */
  --night-ink: #f2f0ec;
  --night-muted: #a7a49d;
  --brass: #b4571f;      /* CTA — 4.8:1 on paper. Warmer and hotter than the old
                            #a8692b, taking the reference's one-hot-accent cue
                            without borrowing its orange outright. */
  --brass-hi: #e08a4a;   /* CTA on dark */
  --brass-soft: #f6ece1;
  --ok: #2e7d4f;
  --bad: #b3261e;
  --font-body: "Heebo", "Assistant", "Arial Hebrew", Arial, sans-serif;
  --font-display: "Heebo", "Assistant", "Arial Hebrew", Arial, sans-serif;
  --head-h: 72px;
  --wrap: 1160px;
  --radius: 10px;        /* surfaces: cards, panels, images */
  /* One decision, one place. Actions are pills; set this to 10px and every
     button on the site becomes a soft rectangle together — no hunting. */
  --btn-radius: 999px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--mist); color: var(--ink-2);
  font-family: var(--font-body); font-size: 18px; line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-2); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
/* Display sizes go up and weight comes down — the reference's headlines are
   large and light, and that is what reads as confident rather than loud. */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.14; margin: 0; text-wrap: balance; color: var(--ink); letter-spacing: -0.015em; }
h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 400; }
h2 { font-size: clamp(30px, 4.2vw, 52px); font-weight: 400; }
h3 { font-size: 21px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.lede { font-size: 20px; line-height: 1.65; color: var(--ink-2); max-width: 58ch; }
/* Letterspaced small caps above the headline — Flam's one borrowed habit; it
   gives a section a label without a second type size competing with the h2. */
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; color: var(--brass); text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* skip link */
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--teal); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; font-weight: 700; }
.skip:focus { top: 12px; color: #fff; }

/* header */
/* The header floats over the page rather than sitting above it: transparent on
   a page that opens with a hero, picking up a background once you scroll past
   it. Pages with no hero keep the solid bar from the first pixel, or the links
   would be invisible on paper. `fixed`, not `sticky`, is what lets the hero run
   up underneath it. */
.site-head {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  background: rgba(247, 245, 242, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
main { padding-top: var(--head-h); }
body.has-hero main { padding-top: 0; }
body.has-hero .site-head {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
body.has-hero .site-head .brand,
body.has-hero .site-head .nav a { color: #fff; }
body.has-hero .site-head .nav a.lang { border-color: rgba(255, 255, 255, .45); color: #fff; }
body.has-hero .site-head .nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
body.has-hero .site-head .menu-btn { color: #fff; border-color: rgba(255, 255, 255, .45); }
/* Past the hero it behaves like the solid header again. */
body.has-hero .site-head.scrolled {
  background: rgba(247, 245, 242, .92);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
}
body.has-hero .site-head.scrolled .brand,
body.has-hero .site-head.scrolled .nav a { color: var(--ink); }
body.has-hero .site-head.scrolled .nav a.lang { border-color: var(--line); color: var(--teal); }
body.has-hero .site-head.scrolled .nav a:hover { background: var(--paper); color: var(--teal); }
body.has-hero .site-head.scrolled .menu-btn { color: var(--teal); border-color: var(--line); }
/* The CTA keeps its brass fill in both states — it is the one thing that should
   not change appearance as you scroll. */
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; color: var(--teal); flex: none; }
.brand svg { width: 150px; height: auto; direction: ltr; overflow: visible; }
/* The links sit centred in the bar, with the logo at one end and the language
   switch plus the call to action at the other. One auto margin (the old rule)
   pushed the whole nav to one side and left a hole across the middle; two auto
   margins split the free space either side of the link group instead. */
.nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }

.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16.5px; padding: 8px 12px; border-radius: 8px; }
.nav a:hover { background: var(--paper); color: var(--teal); }
.nav a[aria-current="page"]:not(.btn) { color: var(--teal); box-shadow: inset 0 -2px 0 var(--brass); border-radius: 0; }
.menu-btn { display: none; margin-inline-start: auto; background: none; border: 1px solid var(--line); border-radius: var(--btn-radius); padding: 8px 12px; font: inherit; font-weight: 700; color: var(--teal); cursor: pointer; min-height: 44px; }
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; }
  .nav { display: none; flex: none; position: absolute; inset-inline: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px 20px 20px; gap: 2px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px; font-size: 18px; }
  .nav .btn { margin-top: 8px; text-align: center; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 28px; border-radius: var(--btn-radius); font: inherit; font-weight: 600; font-size: 16.5px; letter-spacing: .01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.btn-primary { background: var(--brass); color: #fff; --fill: #8e5822; }
.btn-ghost { border-color: var(--teal); color: var(--teal); background: transparent; --fill: var(--teal); }
.btn-ghost:hover { color: #fff; }
.on-dark .btn-primary { background: var(--brass-hi); color: var(--night); --fill: #ddA060; }
.on-dark .btn-ghost { border-color: var(--night-ink); color: var(--night-ink); --fill: var(--night-ink); }
.on-dark .btn-ghost:hover { color: var(--night); }

/* The hover colour arrives as a circle growing out from wherever the pointer
   is, rather than the whole button changing at once. The script writes --mx and
   --my; with no script the circle simply opens from the middle, which is the
   ordinary effect and still reads fine.

   The label's colour has a small delay on it, so it flips once the fill has
   actually reached it rather than going pale over a half-filled button. */
.btn { position: relative; overflow: hidden; isolation: isolate;
       transition: color .2s ease .12s, border-color .4s ease; }
.btn::before {
  content: ""; position: absolute;
  top: var(--my, 50%); left: var(--mx, 50%);
  /* Of the button's own width — buttons here are wide and short, so a circle
     this size covers the corners from any starting point. */
  width: 260%; aspect-ratio: 1; border-radius: 50%;
  background: var(--fill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 1.1s cubic-bezier(.35, .5, .3, 1);
  z-index: -1;                      /* behind the label, inside the button's own
                                       stacking context thanks to isolation */
  pointer-events: none;
}
.btn:hover::before, .btn:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: color .2s ease, border-color .2s ease; }
  .btn::before { transition: none; }
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* sections */
.section { padding-block: clamp(72px, 10vw, 136px); }
.section-head { display: grid; gap: 16px; margin-bottom: 48px; max-width: 780px; }
.dark { background: var(--night); color: var(--night-ink); }
.dark h1, .dark h2, .dark h3 { color: var(--night-ink); }
.dark .lede, .dark .muted { color: var(--night-muted); }
.paper { background: var(--paper); }

/* hero with photo */
.hero { position: relative; color: #fff; background: var(--night); overflow: hidden; }
.hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(8, 18, 22, .92) 0%, rgba(8, 18, 22, .72) 45%, rgba(8, 18, 22, .15) 100%); }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; padding-block: clamp(64px, 10vw, 128px); }

/* Video hero (2026-10-05). The reference runs the footage full height with the
   words sitting on it low on the reading side — no panel, no box, just a soft
   rise of shade at the foot so the type stays legible over moving picture. */
/* Full screen. svh, not vh: on a phone vh counts the space behind the browser
   chrome, so a 100vh hero is taller than the screen and the CTAs sit below the
   fold. dvh would reflow as the chrome hides; svh just fits. */
.hero-video { min-height: 100vh; min-height: 100svh; display: grid; }
.hero-video__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-video::after {
  background: linear-gradient(to top, rgba(8, 12, 14, .88) 0%, rgba(8, 12, 14, .55) 34%, rgba(8, 12, 14, .12) 62%, rgba(8, 12, 14, .3) 100%);
}
/* The copy sits against the reading-side edge of the screen, not inside the
   centred 1160 container — penned into the middle of a wide viewport it read
   as floating. The reference hugs the edge with a generous margin. */
.hero-video .wrap {
  /* .wrap carries `margin-inline: auto`, and inside a grid parent that shrinks
     the box to its content instead of stretching it — which is what kept the
     copy away from the edge however the alignment was set. */
  max-width: none;
  width: 100%;
  margin-inline: 0;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;   /* logical: `start` is the right edge in RTL, the
                             reading side. `end` put it on the left. */
  align-items: end;       /* block axis — bottom of the hero */
  padding-inline: clamp(24px, 6vw, 110px);
  padding-block: clamp(120px, 16vw, 200px) clamp(56px, 7vw, 92px);
}
.hero-video .hero-copy { max-width: 54ch; justify-self: start; }
.hero-video h1 { font-weight: 300; letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.hero-video .lede { color: #efece6; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
/* The eyebrow was the page's brass (#b4571f) — a colour chosen to pass on
   paper, which disappears over footage. On any dark band it takes the lighter
   brass, and over video it also gets a shadow, because the frame behind it
   changes brightness as the clip plays. */
.on-dark .eyebrow, .dark .eyebrow { color: var(--brass-hi); }
.hero-video .eyebrow { color: #f3c293; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) { .hero-video__media { display: none; } }
.hero h1 { color: #fff; }
.hero .lede { color: #d6e1e4; }
.hero-copy { display: grid; gap: 22px; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } .hero::after { background: rgba(8, 18, 22, .78); } }
.page-hero .wrap { padding-block: clamp(56px, 8vw, 104px); grid-template-columns: minmax(0, 1fr); }
.page-hero .hero-copy { max-width: 720px; }

/* the order ticket — the product's core moment */
.ticket { justify-self: center; width: min(340px, 100%); background: #fbf8f2; color: var(--ink); border-radius: 6px; padding: 20px 22px 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); position: relative; font-size: 16px; transform: rotate(-2deg); }
.ticket::after { content: ""; position: absolute; inset-inline: 0; bottom: -9px; height: 18px; background: radial-gradient(circle at 9px 0, transparent 8px, #fbf8f2 8.5px) repeat-x; background-size: 18px 18px; }
.ticket-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #c9c2b3; padding-bottom: 10px; margin-bottom: 12px; }
.ticket-top b { font-size: 20px; }
.ring { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--brass); }
.ring::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.5); } }
.ticket dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.ticket dt { color: #6b6457; }
.ticket dd { margin: 0; font-weight: 700; }
.ticket .take { margin-top: 16px; display: block; text-align: center; background: var(--teal); color: #fff; border-radius: var(--btn-radius); padding: 9px; font-weight: 700; }
.ticket .small { margin-top: 8px; text-align: center; color: #6b6457; font-size: 13px; }

/* grids and cards */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: grid; gap: 10px; align-content: start; min-width: 0;
        transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, border-color .4s ease; }
/* Every card on the site answers to the pointer the same way: a small lift and
   a soft shadow. One rule, so a grid added later gets it without being asked. */
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(22, 24, 28, .09); border-color: #d9d3c9; }
.dark .card:hover, .on-dark .card:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .16); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card a.more { font-weight: 700; text-decoration: none; }
.card a.more::after { content: " ←"; }
.service-card { text-decoration: none; color: var(--ink); }
.service-card:hover { color: var(--ink); }
.service-card h3 { font-size: 20px; }
.icon { width: 44px; height: 44px; border-radius: 10px; background: var(--brass-soft); color: var(--brass); display: grid; place-items: center; }
.icon svg { width: 24px; height: 24px; }
.product { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; }
.product img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.product .body { padding: 24px; display: grid; gap: 10px; align-content: start; }
.tag { display: inline-block; font-size: 14px; font-weight: 700; color: var(--teal); background: var(--mist); border-radius: 999px; padding: 2px 12px; justify-self: start; }

/* lists */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-inline-start: 30px; }
.checks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: 16px; height: 9px; border-inline-start: 2.5px solid var(--brass); border-bottom: 2.5px solid var(--brass); transform: rotate(-45deg) scaleX(-1); }
.pains { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.pains li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; font-size: 19px; }

/* split image + text */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.split .text { display: grid; gap: 16px; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* steps — a real sequence */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 16px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.steps h3 { font-size: 20px; margin-bottom: 4px; }
.steps.compact li { background: transparent; border: 0; padding: 0; }
.dark .steps.compact li::before { background: var(--brass-hi); color: var(--night); }

/* services page blocks */
.service { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding-block: 32px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.service:last-child { border-bottom: 0; }
.service .icon { width: 56px; height: 56px; }
.service .body { display: grid; gap: 12px; }
@media (max-width: 600px) { .service { grid-template-columns: minmax(0, 1fr); } }
.badge-soon { display: inline-block; font-size: 13px; font-weight: 700; color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: 0 10px; margin-inline-start: 6px; }

/* closing band (2026-10-05)
   Was a white panel with a flat button, which made the last thing on the page
   the quietest. It is a dark band now, lit from behind, with the call to action
   as the only bright object in it. */
.closing { text-align: center; }
.closing.paper, .closing {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--night-ink);
}
/* The glow sits behind the words, warm, falling off to nothing at the edges. */
.closing::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 72% at 50% 34%, rgba(180, 87, 31, .26) 0%, rgba(180, 87, 31, .08) 42%, transparent 72%);
  pointer-events: none;
}
.closing .wrap { position: relative; display: grid; gap: 22px; justify-items: center; }
.closing h2 { color: var(--night-ink); font-weight: 300; max-width: 18ch; }
.closing .lede { margin-inline: auto; color: var(--night-muted); }
.closing .eyebrow { color: var(--brass-hi); }

/* The call to action — an outlined pill that glows, rather than a flat fill.
   The glow is slow and low-contrast on purpose: it should read as lit, not as
   something flashing for attention. */
.closing .btn-primary {
  background: rgba(180, 87, 31, .14);
  border: 1px solid rgba(224, 138, 74, .6);
  color: var(--brass-hi);
  padding-inline: 38px;
  min-height: 56px;
  font-size: 17.5px;
  box-shadow: 0 0 0 0 rgba(224, 138, 74, .35);
  animation: cta-glow 3.2s ease-in-out infinite;
}
.closing .btn-primary:hover {
  background: rgba(224, 138, 74, .22);
  border-color: var(--brass-hi);
  color: #ffd9b5;
  animation-play-state: paused;
}
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 138, 74, .3), 0 0 18px rgba(224, 138, 74, .14); }
  50%      { box-shadow: 0 0 0 7px rgba(224, 138, 74, 0), 0 0 30px rgba(224, 138, 74, .3); }
}
@media (prefers-reduced-motion: reduce) { .closing .btn-primary { animation: none; } }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-list li { display: grid; gap: 2px; }
.contact-list .k { color: var(--muted); font-size: 15px; }
.contact-list .v { font-size: 20px; font-weight: 700; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
form.lead { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; }
.field .req { color: var(--bad); }
.field input, .field select, .field textarea { font: inherit; font-size: 18px; color: var(--ink); background: var(--paper); border: 1.5px solid #9fb0b6; border-radius: 8px; padding: 12px 14px; min-height: 48px; width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--brass); outline-offset: 1px; border-color: var(--teal); }
.field .err { color: var(--bad); font-size: 15px; font-weight: 600; }
.field [aria-invalid="true"] { border-color: var(--bad); }
.consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.consent input { width: 22px; height: 22px; margin-top: 4px; accent-color: var(--teal); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: 8px; padding: 14px 16px; font-weight: 700; }
.form-status.ok { background: #e3f2e9; color: #1d5a37; }
.form-status.bad { background: #fbe9e7; color: #8c1d16; }

/* legal pages */
.prose { max-width: 760px; display: grid; gap: 14px; }
.prose h2 { font-size: 30px; margin-top: 28px; }
.prose h3 { font-size: 21px; margin-top: 10px; }
.prose ul { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; }
.toc-inline { display: flex; flex-wrap: wrap; gap: 10px; }

/* footer */
.site-foot { background: var(--night); color: var(--night-muted); font-size: 16px; padding-block: 48px 28px; }
.site-foot .wrap { display: grid; gap: 28px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 760px) { .foot-top { grid-template-columns: minmax(0, 1fr); } }
.site-foot .brand { color: #fff; }
.site-foot h2 { font-family: var(--font-body); font-size: 15px; letter-spacing: .06em; color: #fff; margin-bottom: 10px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-foot a { color: var(--night-ink); text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.partner { color: var(--night-ink); }
.foot-legal { border-top: 1px solid #22343c; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 14px; }

/* floating WhatsApp */
.wa { position: fixed; z-index: 60; inset-inline-end: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px; background: #1f7a4a; color: #fff; text-decoration: none; font-weight: 700; padding: 12px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); min-height: 48px; }
.wa:hover { background: #17633b; color: #fff; }
.wa svg { width: 22px; height: 22px; }
@media (max-width: 600px) { .wa span { display: none; } .wa { padding: 13px; } }

/* language switch (header) */
.nav a.lang { font-weight: 700; color: var(--teal); border: 1px solid var(--line); border-radius: var(--btn-radius); padding: 6px 14px; margin-inline: 4px; }
.nav a.lang:hover { background: var(--paper); border-color: var(--teal-2); }

/* English (left-to-right) — the few rules that are not already logical properties */
[dir="ltr"] .hero::after { background: linear-gradient(90deg, rgba(8, 18, 22, .92) 0%, rgba(8, 18, 22, .72) 45%, rgba(8, 18, 22, .15) 100%); }
@media (max-width: 860px) { [dir="ltr"] .hero::after { background: rgba(8, 18, 22, .78); } }
[dir="ltr"] .checks li::before { transform: rotate(-45deg); }
[dir="ltr"] .card a.more::after { content: " →"; }
[dir="ltr"] .ticket { transform: rotate(2deg); }
[dir="ltr"] body { line-height: 1.6; }

/* Centring the nav links (2026-10-05)
   Lives at the end of the file on purpose: `.nav a.lang` above sets
   `margin-inline: 4px`, which silently cancelled an auto margin set earlier and
   left all the slack on one side. Two auto margins — one before the links, one
   before the language switch — split the free space so the links sit centred
   between the logo and the CTA. */
@media (min-width: 961px) {
  .nav > a:first-of-type { margin-inline-start: auto; }
  .nav a.lang { margin-inline-start: auto; margin-inline-end: 4px; }
}

/* Header CTA — a light runs the border while the closing band is on screen
   (2026-10-05)
   The same idea as the Reserve pill on the SmartBarIQ site: once the reader has
   reached the part of the page that asks them to act, the button in the header
   stops being a label and starts asking too. A conic gradient spun by an
   animated custom property, masked to the border only so the fill stays clean. */
@property --tb-cta-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.site-head .nav a.btn-primary { position: relative; }
.site-head .nav a.btn-primary.is-live::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--tb-cta-angle),
      rgba(224, 138, 74, 0) 0deg,
      rgba(224, 138, 74, 0) 200deg,
      rgba(224, 138, 74, .4) 288deg,
      rgba(255, 206, 150, .9) 340deg,
      rgba(255, 238, 220, 1) 357deg,
      #ffffff 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(255, 196, 130, .85));
  pointer-events: none;
  animation: tb-cta-orbit 2s linear infinite;
}
@keyframes tb-cta-orbit { to { --tb-cta-angle: 360deg; } }
/* Motion off: keep the cue, lose the movement. */
@media (prefers-reduced-motion: reduce) {
  .site-head .nav a.btn-primary.is-live::before { animation: none; }
  .site-head .nav a.btn-primary.is-live { box-shadow: 0 0 0 2px rgba(255, 206, 150, .7); }
}

/* The header's call to action keeps the button's own styling (2026-10-05)
   `.nav a` (0,1,1) out-ranks `.btn` and `.btn-primary` (0,1,0), so inside the
   header the CTA was being given the nav's near-black text and the nav's tight
   12px padding — dark letters on brass, in a squat pill. These restore the
   button, in both header states. */
.site-head .nav a.btn-primary,
body.has-hero .site-head .nav a.btn-primary,
body.has-hero .site-head.scrolled .nav a.btn-primary {
  color: #fff;
  padding: 10px 26px;
  border-radius: var(--btn-radius);
}
.site-head .nav a.btn-primary:hover,
body.has-hero .site-head .nav a.btn-primary:hover,
body.has-hero .site-head.scrolled .nav a.btn-primary:hover {
  background: #96491a;
  color: #fff;
}

/* Social accounts (2026-10-06)
   A band at the end of every page and a compact row in the footer. Square
   tiles, because the icon is the whole content — no label to read, and the
   shape gives a big, obvious target on a phone. */
/* Social — five photographs, one per network. The picture is the face of the
   tile; the mark that appears on hover says where it goes. The small boxed row
   is the footer's alone — they used to be the same row twice. */
.socials { background: var(--night); color: var(--night-ink); padding-block: clamp(44px, 5vw, 64px) 0; text-align: center; }
.socials__eyebrow { font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); margin: 0 0 10px; }
.socials__h { color: var(--night-ink); font-weight: 300; font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0 0 30px; }

/* Full-bleed on purpose: the strip sits outside .wrap. */
.ig-strip { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 0; padding: 0; }
.ig { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #000; }
.ig img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Slow and eased: a quick zoom reads as a jump, not as a hover. */
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}
.ig__veil { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
            gap: 12px; opacity: 0; transition: opacity .45s ease; }
.ig__veil svg { width: 34px; height: 34px; fill: #fff; display: block; }
/* The name, because five different marks at 34px are not all obvious. */
.ig__veil span { font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.ig:hover img, .ig:focus-visible img { transform: scale(1.05); filter: brightness(.45); }
.ig:hover .ig__veil, .ig:focus-visible .ig__veil { opacity: 1; }
.ig:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }

/* A touch screen has no hover, so the mark has to be there already — on a
   gradient, not a dimmed photograph: five permanently dark frames would undo
   the point of showing photographs at all. */
@media (hover: none) {
  .ig__veil { opacity: 1; align-content: end; padding-bottom: 14px; gap: 8px;
              background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent 52%); }
  .ig__veil svg { width: 26px; height: 26px; }
  .ig__veil span { font-size: .6rem; }
}

/* Below 1024px five across is too narrow to read, so the strip scrolls and
   snaps instead of wrapping to an orphaned row. */
@media (max-width: 1024px) {
  .ig-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
              -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ig-strip::-webkit-scrollbar { display: none; }
  .ig-strip > li { flex: 0 0 38%; scroll-snap-align: center; }
}
@media (max-width: 620px) { .ig-strip > li { flex: 0 0 62%; } }
@media (prefers-reduced-motion: reduce) {
  .ig img { transition: filter .3s ease; }
  .ig:hover img, .ig:focus-visible img { transform: none; }
}

/* The footer's row — the only boxed one left. */
.soc-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.soc {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;                     /* a square, softened — not a pill:
                                              these are destinations, not actions */
  border: 1px solid rgba(224, 138, 74, .35);
  background: rgba(255, 255, 255, .04);
  color: var(--night-ink);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.soc svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.soc:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.soc:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
@media (max-width: 420px) { .soc-row { gap: 8px; } .soc { width: 42px; height: 42px; } }

/* ── Circle cursor ─────────────────────────────────────────────────────────
   The arrow becomes a thin ring that follows the pointer and opens up over
   anything clickable. .has-cursor is set by script, so the native cursor is
   only taken away once there is something to replace it with. */
html.has-cursor,
html.has-cursor * { cursor: none; }
/* Text fields keep their I-beam — it says where the caret will land, which a
   ring cannot. The ring hides itself over these too. */
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select,
html.has-cursor [contenteditable="true"] { cursor: auto; }

/* A 0x0 positioner carrying the transform, with the visible ring centred on it.
   Keeping them apart lets the ring scale on its own: the standalone `scale`
   property composes before `transform`, so scaling the positioner would drag it
   toward the top-left of the viewport instead of growing in place. */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.cursor__ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  /* Dark by default: this site is paper, not night. */
  border: 1px solid rgba(22, 24, 28, .45);
  opacity: 0;
  transition: opacity .25s ease,
              transform .3s cubic-bezier(.22, 1, .36, 1),
              border-color .25s ease,
              background-color .25s ease;
}
.cursor.is-live .cursor__ring { opacity: 1; }
/* Off the window, or over something with its own idea of a cursor. */
.cursor.is-out .cursor__ring,
.cursor.is-off .cursor__ring { opacity: 0; }
/* Over a night band a dark ring vanishes, so it flips. */
.cursor.is-dark .cursor__ring { border-color: rgba(242, 240, 236, .55); }

.cursor.is-over .cursor__ring {
  transform: scale(1.9);
  border-color: var(--brass);
  background: rgba(180, 87, 31, .12);
}
.cursor.is-dark.is-over .cursor__ring {
  border-color: var(--brass-hi);
  background: rgba(224, 138, 74, .14);
}
.cursor.is-down .cursor__ring { transform: scale(.78); }
.cursor.is-over.is-down .cursor__ring { transform: scale(1.65); }

@media (prefers-reduced-motion: reduce) {
  .cursor__ring { transition: opacity .25s ease, border-color .25s ease; }
}

/* ── Guest Mode ────────────────────────────────────────────────────────────
   A photograph with the copy over it and the phone beside it. The scrim is a
   gradient from the text side, not a flat wash: a flat one dulls the whole
   picture to make one corner readable. */
.guest-mode { position: relative; overflow: hidden; background: var(--night); }
/* The photo and scrim are absolute children, so they already paint over the
   .dark background colour; the band keeps that colour for the moment before
   the photograph loads. */
.guest-mode__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Gradients take physical directions only — `to inline-start` is not a value,
   and an invalid one drops the whole declaration, which left the copy sitting on
   bare photograph. So the two writing directions get a rule each: the dark end
   always sits under the text column. */
.guest-mode__scrim { position: absolute; inset: 0; background: rgba(18,19,22,.55); }
[dir="rtl"] .guest-mode__scrim {
  background: linear-gradient(to left, rgba(18,19,22,.96) 0%, rgba(18,19,22,.9) 38%, rgba(18,19,22,.5) 72%, rgba(18,19,22,.35) 100%);
}
[dir="ltr"] .guest-mode__scrim {
  background: linear-gradient(to right, rgba(18,19,22,.96) 0%, rgba(18,19,22,.9) 38%, rgba(18,19,22,.5) 72%, rgba(18,19,22,.35) 100%);
}
.guest-mode__inner {
  position: relative;
  display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.gm-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
.gm-steps li { display: flex; gap: 16px; align-items: flex-start; }
.gm-steps__num {
  font-variant-numeric: tabular-nums; font-size: .8rem; letter-spacing: .14em;
  color: var(--brass-hi); padding-top: .3em; flex: none;
}
.gm-steps h3 { font-size: 1.02rem; margin: 0 0 4px; color: var(--night-ink); }
.gm-steps p { margin: 0; color: var(--night-muted); font-size: .94rem; }
/* Phone and table card side by side, the way they sit on the table. An earlier
   version floated the card over the phone's corner and it covered the menu it
   was meant to introduce. */
.guest-mode__visual { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
.gm-phone img {
  width: min(230px, 46vw); height: auto; display: block; border-radius: 26px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.gm-qr {
  flex: none;
  background: var(--night); border: 1px solid rgba(224,138,74,.3); border-radius: 14px;
  padding: 14px; text-align: center; box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.gm-qr img { width: 92px; height: 92px; display: block; margin: 8px auto; }
.gm-qr__label, .gm-qr__foot {
  margin: 0; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--night-muted);
}
@media (max-width: 900px) {
  .guest-mode__inner { grid-template-columns: 1fr; }
  .guest-mode__scrim,
  [dir="rtl"] .guest-mode__scrim,
  [dir="ltr"] .guest-mode__scrim { background: rgba(18,19,22,.86); }
}

/* ── Order alerts ──────────────────────────────────────────────────────────
   The flow first, then the three things the one event produces: an alert on a
   phone, a state the guest can see, and a line in a log. */
.alerts .section-head, .pour .section-head { text-align: center; margin-inline: auto; }
.alerts .lede, .pour .lede { margin-inline: auto; max-width: 62ch; }

.afl {
  list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}
.afl__step { position: relative; }
/* A hairline from each icon to the next, so the five read as one sequence
   rather than five cards. It runs from just past the icon to just past the grid
   gap, at the icon's own centre line.

   `:not(:last-child)` and `content: none` rather than a negated selector alone:
   the last step has nothing to point at, and a line running off the end of the
   row is what made this read as broken. */
.afl__step::after {
  content: ""; position: absolute; top: 20px; height: 1px;
  background: rgba(224,138,74,.28);
  inset-inline-start: 52px;   /* 40px icon + 12 */
  inset-inline-end: -12px;    /* 24px gap - 12, so both ends clear by 12 */
}
.afl__step:last-child::after { content: none; }
.afl__ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: rgba(224,138,74,.1); border: 1px solid rgba(224,138,74,.26);
  color: var(--brass-hi); margin-bottom: 14px;
}
.afl__ico svg { width: 20px; height: 20px; }
.afl__t { margin: 0 0 6px; font-weight: 600; color: var(--night-ink); }
.afl__d { margin: 0; font-size: .9rem; color: var(--night-muted); }

.alerts-split {
  margin-block-start: clamp(36px, 5vw, 56px);
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: start;
}
.alerts-right { display: grid; gap: 20px; }
.acard {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding: 22px;
}
.acard__label {
  margin: 0 0 16px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-hi);
}
.acard__foot { margin: 16px 0 0; font-size: .88rem; color: var(--night-muted); }
.anote {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 14px;
}
/* The artwork already draws its own rounded square with a stroke on it, so a
   border-radius here cuts that corner off rather than rounding anything. */
.anote__icon { width: 30px; height: 30px; flex: none; }
.anote__app { margin: 0; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--night-muted); }
.anote__title { margin: 2px 0 0; font-weight: 600; color: var(--night-ink); }
.anote__body { margin: 0; color: var(--night-muted); font-size: .9rem; }
.ashot { margin-block-start: 18px; border-radius: 12px; overflow: hidden; }
.ashot img { width: 100%; height: auto; display: block; }

.aavail { display: grid; gap: 10px; }
.aavail__row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.04); border-radius: 10px; padding: 12px 14px;
  color: var(--night-ink);
}
.aavail__row em { margin-inline-start: auto; font-style: normal; font-size: .84rem; color: var(--brass-hi); }
.aavail__row.is-off { color: var(--night-muted); }
.aavail__row.is-off em { color: var(--night-muted); }
.adot { width: 8px; height: 8px; border-radius: 50%; background: var(--night-muted); flex: none; }
.adot.is-open { background: #4ea97a; box-shadow: 0 0 0 3px rgba(78,169,122,.18); }

.alog { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.alog li { display: flex; align-items: baseline; gap: 14px; position: relative; padding-inline-start: 18px; }
.alog li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .45em;
  width: 7px; height: 7px; border-radius: 50%; background: rgba(224,138,74,.5);
}
.alog li.is-done::before { background: #4ea97a; }
.alog__time { font-variant-numeric: tabular-nums; color: var(--night-muted); font-size: .86rem; }
.alog__ev { color: var(--night-ink); }
.alog__gap { margin-inline-start: auto; font-size: .82rem; color: var(--night-muted); }

.aba { margin-block-start: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.aba__col { border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 22px; }
.aba__col--now { border-color: rgba(224,138,74,.35); background: rgba(224,138,74,.06); }
.aba__tag {
  margin: 0 0 10px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--night-muted);
}
.aba__col--now .aba__tag { color: var(--brass-hi); }
.aba__col p:last-child { margin: 0; color: var(--night-muted); }
.alerts__line {
  margin: clamp(28px, 4vw, 40px) 0 0; text-align: center; font-size: 1.05rem; color: var(--night-ink);
}

@media (max-width: 1000px) {
  .afl { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .afl__step::after { display: none; }
  .alerts-split, .aba { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .afl { grid-template-columns: 1fr; } }

/* ── Pour control ──────────────────────────────────────────────────────────
   Six cards; two carry a readout, because a claim about grams is worth more
   with the number beside it. */
.pgrid {
  margin-block-start: clamp(36px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start;
}
.pcard {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding: 24px;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, border-color .4s ease;
}
/* Same lift as every other card. The alert cards next door deliberately do not
   get it: those are readouts of a live screen, not things to browse. */
.pour .pcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(22, 24, 28, .09); border-color: #d9d3c9; }
@media (prefers-reduced-motion: reduce) { .pcard:hover { transform: none; } }
.pcard__ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: rgba(224,138,74,.1); border: 1px solid rgba(224,138,74,.26);
  color: var(--brass-hi); margin-bottom: 16px;
}
.pcard__ico svg { width: 20px; height: 20px; }
.pcard h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--night-ink); }
.pcard p { margin: 0; color: var(--night-muted); font-size: .94rem; }
/* The readout is a machine talking, so it is set in a mono face and pinned LTR —
   grams and times are Latin even on a Hebrew page. */
/* The readout is a quiet panel inside the card, not a screen: the band is paper
   and a black box in the middle of it was the only dark thing on the page. Mono
   is applied to the numbers alone — Hebrew in a monospace face is unreadable. */
.pcread {
  margin-block-start: 18px; background: var(--mist);
  border: 1px solid var(--line); border-radius: 10px; padding: 16px;
}
.pcread__v, .pcread__t, .pcread [dir="ltr"] {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.pcread__k { margin: 0 0 10px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--night-muted); }
.pcread__v { margin: 0; font-size: 1.5rem; color: var(--night-ink); }
.pcread__t { margin: 2px 0 0; font-size: .82rem; color: var(--night-muted); }
.pcread__f { margin: 10px 0 0; font-size: .78rem; color: var(--brass-hi); }
.pcbar { display: block; position: relative; height: 1px; background: rgba(255,255,255,.14); margin-block-start: 16px; }
.pcbar i {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brass-hi); transform: translate(-50%, -50%);
}
.pcspread { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-block-start: 6px; }
.pcspread i { flex: 1; background: rgba(224,138,74,.55); border-radius: 2px 2px 0 0; }

@media (max-width: 1000px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pgrid { grid-template-columns: 1fr; } }

/* Pour Control sits on paper, so the cards invert — white surfaces, ink text.
   The readout stays dark on purpose: it is a machine display quoted inside the
   page, and it reads as one. */
.pour .pcard { background: var(--paper); border-color: var(--line); }
.pour .pcard__ico { background: var(--brass-soft); border-color: rgba(180,87,31,.22); color: var(--brass); }
.pour .pcard h3 { color: var(--ink); }
.pour .pcard p { color: var(--ink-2); }
.pour .pcread__k, .pour .pcread__t { color: var(--muted); }
.pour .pcread__v { color: var(--ink); }
.pour .pcread__f { color: var(--brass); }
.pour .pcbar { background: rgba(22,24,28,.16); }
.pour .pcbar i { background: var(--brass); }
.pour .pcspread i { background: rgba(180,87,31,.45); }

/* ── Reveal on scroll ──────────────────────────────────────────────────────
   Everything the observer tags starts slightly low and transparent and settles
   as it comes into view. --i staggers siblings so a grid arrives as a sequence
   rather than a single block. Nothing here is required to read the page: with
   scripting off, .in is never added and the fallback below leaves it visible. */
/* An animation, not a transition. A `transition` declared here would win over
   every component's own — same specificity, later in the file — so a card got
   the reveal's 0.7s transform transition and nothing at all for its hover
   shadow. `backwards` fill means the element holds the opening frame through
   its stagger delay and then falls back to its own styles when the animation
   ends, leaving transform free for hover. */
[data-reveal] { opacity: 0; }
[data-reveal].in {
  opacity: 1;
  animation: reveal-in .7s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
html:not(.js) [data-reveal] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; }
  [data-reveal].in { animation: none; }
}

/* ── Services: a card that turns over to the photograph ────────────────────
   Eight rectangles of text all the same shape is what made this hard to read.
   The front still carries the words — the turn is a reward for looking, not
   the only way to get the information, and the whole card is one link. */
.services-band .section-head { text-align: center; margin-inline: auto; }
.services-band .lede { margin-inline: auto; max-width: 52ch; }
.svc-grid {
  margin-block-start: clamp(32px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.svc { perspective: 1200px; display: block; min-height: 250px; }
.svc__inner {
  position: relative; display: block; width: 100%; height: 100%; min-height: inherit;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.22, 1, .36, 1);
}
/* RTL turns the other way, so the motion runs with the reading direction. */
.svc:hover .svc__inner, .svc:focus-visible .svc__inner { transform: rotateY(180deg); }
[dir="rtl"] .svc:hover .svc__inner, [dir="rtl"] .svc:focus-visible .svc__inner { transform: rotateY(-180deg); }
.svc__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
/* The band stays paper and the front stays a white card — only the turn is
   dark, because the photograph behind it is. */
.svc__front {
  background: var(--paper); border: 1px solid var(--line);
  padding: 22px;
}
.svc__ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--brass-soft); border: 1px solid rgba(180,87,31,.22);
  color: var(--brass); margin-bottom: 14px; flex: none;
}
.svc__ico svg { width: 19px; height: 19px; }
.svc__front h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--ink); }
.svc__front p { margin: 0; font-size: .9rem; color: var(--ink-2); }
/* A card that lifts a little on hover says it is about to do something. */
.svc__front { transition: box-shadow .4s ease; }
.svc:hover .svc__front { box-shadow: 0 16px 36px rgba(22,24,28,.1); }
.svc__back { transform: rotateY(180deg); background: #000; }
[dir="rtl"] .svc__back { transform: rotateY(-180deg); }
.svc__back img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc__cap {
  position: relative; margin-block-start: auto; padding: 18px;
  background: linear-gradient(to top, rgba(0,0,0,.82), transparent);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.svc__cap-t { color: #fff; font-weight: 600; }
.svc__go { color: var(--brass-hi); font-size: .86rem; margin-inline-start: auto; }
.svc:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: var(--radius); }
/* No hover on a touch screen, so there is no turn to wait for: both faces would
   be unreachable. The grid falls back to the front face alone. */
@media (hover: none) {
  .svc__inner, [dir="rtl"] .svc:hover .svc__inner { transform: none !important; }
  .svc__back { display: none; }
  .svc__face { position: static; }
}
@media (prefers-reduced-motion: reduce) { .svc__inner { transition: none; } }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } .svc { min-height: 210px; } }

/* ── Drop seam ─────────────────────────────────────────────────────────────
   A brass droplet falls out of the band above and dissolves into the one below,
   so the join between two sections is an event rather than an edge. */
.seam { position: relative; height: 0; z-index: 3; color: var(--brass-hi); }
.seam__drop {
  position: absolute; inset-inline-start: 50%; top: -84px; transform: translateX(-50%);
  filter: drop-shadow(0 0 6px rgba(224,138,74,.5));
  animation: seam-fall 1.8s linear infinite;
}
.seam__drop svg { display: block; }
@keyframes seam-fall {
  0%   { top: -150px; opacity: 0; }
  16%  { opacity: 1; }
  66%  { opacity: 1; }
  100% { top: 30px; opacity: 0; }
}
.seam__ripple {
  position: absolute; inset-inline-start: 50%; top: 56px;
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--brass-hi);
  transform: translate(-50%, -50%) scale(.3); opacity: 0;
  animation: seam-ripple 1.8s linear infinite;
}
@keyframes seam-ripple {
  0%, 74% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  84%     { opacity: .35; }
  100%    { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .seam__drop, .seam__ripple { animation: none; }
  .seam__drop { top: -40px; }
  .seam__ripple { opacity: 0; }
}

/* ── Photo that opens as you scroll ────────────────────────────────────────
   Sized at its final size and scaled *down* to start, so it lands at native
   resolution instead of being upscaled into place — and scale is a compositor
   job where width would be a layout one. The tall section is what gives the
   sticky pin something to travel through. */
/* Paper, not night: the photograph is dark enough on its own, and a dark band
   around it made the frame disappear into the page instead of sitting on it. */
.xpand { position: relative; height: 200vh; background: var(--mist); }
.xpand__pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.xpand__frame {
  /* Capped at the photograph's own width. The frame grows to fill the viewport,
     and past 1749px it was stretching a 1749px image — which is what made it
     look pixelated at the end of the scroll, exactly when it is largest. */
  width: 100%; max-width: 1749px; aspect-ratio: 16 / 9; max-height: 88vh; margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r, 16px); overflow: hidden; background: #000;
  box-shadow: 0 30px 70px rgba(22, 24, 28, .14);
  transform: scale(var(--s, .66));
  will-change: transform;
}
.xpand__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .xpand { height: 140vh; } }
@media (prefers-reduced-motion: reduce) {
  .xpand { height: auto; }
  .xpand__pin { position: static; height: auto; padding: 80px 0; }
  .xpand__frame { transform: none; border-radius: 0; }
}

/* ── Moving photo row ──────────────────────────────────────────────────────
   Two identical copies side by side; the track travels exactly one copy's width
   and restarts on a frame that looks the same, so the loop has no seam. */
.mq { overflow: hidden; }
.mq__track { display: flex; width: max-content; animation: mq-run 48s linear infinite; }
.mq:hover .mq__track { animation-play-state: paused; }
.mq__row { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0 7px; }
.mq__row li { flex: none; }
/* The caption sits on the photograph, so the tile is one object rather than a
   picture with a line of text loose underneath it. */
.mqt { position: relative; width: 320px; margin: 0; border-radius: var(--radius); overflow: hidden; }
.mqt img { width: 100%; height: 214px; object-fit: cover; display: block; filter: saturate(.92); }
.mqt__cap {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: 34px 18px 14px;
  /* A gradient rather than a bar: the photograph keeps its bottom edge and the
     words still have something solid under them. */
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .45) 45%, transparent);
  color: #fff; font-size: .88rem; font-weight: 500;
}
@keyframes mq-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* The track is laid out left-to-right whatever the page direction, so the
   animation does not need mirroring — but the start edge does. */
[dir="rtl"] .mq__track { animation-name: mq-run-rtl; }
@keyframes mq-run-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none; }
  .mq { overflow-x: auto; }
}
@media (max-width: 620px) {
  .mqt { width: 240px; }
  .mqt img { height: 162px; }
  .mqt__cap { font-size: .8rem; padding: 28px 14px 12px; }
}

/* ── Steps that light up as you reach them ─────────────────────────────────
   The process page was a stack of identical cards, so nothing said where you
   were in it. The rail fills as you scroll and the step you have reached comes
   forward; the rest stay legible, just quieter. */
.steps-live { position: relative; }
.steps-live li { transition: opacity .45s ease, transform .45s ease; }
.steps-live li:not(.is-near) { opacity: .5; }
.steps-live li.is-near { opacity: 1; }



/* The process page was a stack of identical cards, so nothing told you where
   you were in it. The step you have scrolled to comes forward; the others stay
   perfectly legible, just quieter — this is emphasis, not hiding. */
.steps-live li {
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
html.js .steps-live li { opacity: .55; }
html.js .steps-live li.is-near { opacity: 1; transform: translateX(0); }
[dir="rtl"] html.js .steps-live li:not(.is-near) { transform: translateX(6px); }
[dir="ltr"] html.js .steps-live li:not(.is-near) { transform: translateX(-6px); }
/* The marker is what the eye lands on, so it carries the state most strongly. */
.steps-live li::before { transition: background .5s ease, color .5s ease, transform .5s ease; }
.steps-live li.is-near::before { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  html.js .steps-live li { opacity: 1; transform: none; }
}

/* ── The three rules ───────────────────────────────────────────────────────
   They were three identical text cards, and the one thing on that page we most
   want read went past unnoticed. Each now has a drawn icon and a motion that
   means what the rule says — the glass lands, the bell rings, the needle finds
   its mark. The motion plays once when the card arrives and again on hover; it
   is never the only way to get the point, which is in the words. */
.rules { margin-block-start: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rule {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; transition: box-shadow .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.rule:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(22, 24, 28, .09); border-color: #d9d3c9; }
.rule__ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: var(--brass-soft); border: 1px solid rgba(180,87,31,.22);
  color: var(--brass); margin-bottom: 16px;
}
.rule__ico svg { width: 24px; height: 24px; overflow: visible; }
.rule h3 { margin: 0 0 8px; font-size: 1.08rem; }
.rule p { margin: 0; color: var(--ink-2); }

/* Each part starts in its resting state and is moved only while playing, so a
   card that never animates still looks finished. */
.r-glass, .r-bell, .r-needle { transform-origin: 50% 70%; }
.r-wave { opacity: 0; }
.rule.play .r-glass { animation: r-land .9s cubic-bezier(.3, 1.4, .5, 1) both; }
.rule.play .r-bar   { animation: r-settle .9s ease-out both; }
.rule.play .r-bell  { animation: r-ring 1s ease-in-out both; transform-origin: 50% 18%; }
.rule.play .r-wave--1 { animation: r-wave .9s ease-out .1s both; }
.rule.play .r-wave--2 { animation: r-wave .9s ease-out .18s both; }
.rule.play .r-needle { animation: r-sweep 1.1s cubic-bezier(.3, 1.3, .4, 1) both; transform-origin: 50% 68%; }

@keyframes r-land {
  0%   { transform: translateY(-7px); }
  70%  { transform: translateY(0); }
  82%  { transform: translateY(-1.5px); }
  100% { transform: translateY(0); }
}
@keyframes r-settle {
  0%, 60% { opacity: .45; }
  72%     { opacity: 1; stroke-width: 2.4; }
  100%    { opacity: 1; stroke-width: 1.5; }
}
@keyframes r-ring {
  0%, 100% { transform: rotate(0); }
  18%  { transform: rotate(10deg); }
  38%  { transform: rotate(-8deg); }
  58%  { transform: rotate(5deg); }
  78%  { transform: rotate(-3deg); }
}
@keyframes r-wave {
  0%   { opacity: 0; transform: scale(.7); }
  40%  { opacity: .9; }
  100% { opacity: 0; transform: scale(1.15); }
}
@keyframes r-sweep {
  0%   { transform: rotate(-62deg); }
  100% { transform: rotate(0); }
}
@media (max-width: 860px) { .rules { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .rule.play * { animation: none !important; }
  .r-wave { opacity: .55; }
}

/* ── The ticket keeps its distance ─────────────────────────────────────────
   Hadar asked for it to dodge the pointer, as a game. It drifts away as you get
   close and drifts back when you leave — nothing on the card is clickable (the
   "take the order" line is a drawn span, not a control), so there is no action
   being moved out from under anyone. */
.ticket {
  translate: var(--dx, 0px) var(--dy, 0px);
  rotate: var(--rot, 0deg);
  transition: translate .45s cubic-bezier(.22, 1, .36, 1),
              rotate .45s cubic-bezier(.22, 1, .36, 1),
              box-shadow .4s ease;
  will-change: translate;
}
.ticket.is-near { transition-duration: .22s, .22s, .4s; }
@media (prefers-reduced-motion: reduce) {
  .ticket { translate: none; rotate: none; }
}

/* ── Guidance on the screen ────────────────────────────────────────────────
   A recipe mid-pour: two steps done, one live, the scale closing on its mark. */
.gcard {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius); padding: 22px;
}
.gcard__t { margin: 0 0 16px; font-weight: 600; color: var(--night-ink); }
.gsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gstep {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: 9px; background: rgba(255,255,255,.03);
  color: var(--night-muted); font-size: .92rem;
}
.gstep__n {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18); font-size: .72rem;
}
.gstep.is-done { color: var(--night-muted); }
.gstep.is-done .gstep__n { background: rgba(255,255,255,.14); border-color: transparent; }
/* The live step is the only lit thing on the card, the way it is on the bar. */
.gstep.is-now {
  background: rgba(224,138,74,.14); border: 1px solid rgba(224,138,74,.4);
  color: var(--night-ink);
}
.gstep.is-now .gstep__n { background: var(--brass-hi); border-color: transparent; color: var(--night); }
.gscale { margin-block-start: 18px; display: grid; gap: 8px; }
.gscale__k { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--night-muted); }
.gscale__v {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.4rem; color: var(--night-ink);
}
.gscale__v em { font-style: normal; font-size: .9rem; color: var(--night-muted); }
.gscale__bar { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.gscale__bar i { display: block; height: 100%; width: 99%; background: var(--brass-hi); }

/* ── Fast Mode ─────────────────────────────────────────────────────────────
   The two screens are both in the markup and one is shown at a time, so the
   comparison is a control rather than a claim. */
.fswitch {
  margin: clamp(24px, 3vw, 36px) auto 20px; display: flex; justify-content: center; gap: 6px;
  background: var(--mist); border: 1px solid var(--line); border-radius: 999px; padding: 5px;
  width: max-content;
}
.fswitch__b {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: .92rem;
  padding: 9px 20px; border-radius: 999px; color: var(--ink-2);
  transition: background .3s ease, color .3s ease;
}
.fswitch__b.is-on { background: var(--ink); color: var(--mist); }
.fswitch__b:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.fscreen {
  max-width: 560px; margin-inline: auto;
  background: var(--night); border-radius: var(--radius); padding: 24px;
  display: grid;
}
/* Both panes sit in the same grid cell so the box keeps the height of the taller
   one and does not jump as they swap; a box that leaps a hundred pixels reads as
   a bug rather than a comparison. */
.fpane { grid-area: 1 / 1; transition: opacity .35s ease; }
.fscreen[data-mode="calm"] .fpane--rush,
.fscreen[data-mode="rush"] .fpane--calm { opacity: 0; pointer-events: none; }
.fpane__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px; color: var(--night-ink); font-weight: 600;
}
.fpane__head em { font-style: normal; font-size: .82rem; font-weight: 500; color: var(--brass-hi); }
/* The one line fast mode keeps of everything that is not a pour. */
.fpane__before {
  margin: 0 0 12px; font-size: .86rem; font-weight: 600; color: var(--night-muted);
}
.fsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fstep {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 9px;
  background: rgba(255, 255, 255, .035); color: var(--night-muted); font-size: .9rem;
}
.fstep__n {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); font-size: .72rem;
}
.fstep.is-done .fstep__n { background: rgba(255, 255, 255, .16); border-color: transparent; }
/* The live step is the only lit thing on the screen, as it is on the bar. */
.fstep.is-now {
  background: rgba(224, 138, 74, .14); border: 1px solid rgba(224, 138, 74, .42);
  color: var(--night-ink);
}
.fstep.is-now .fstep__n { background: var(--brass-hi); border-color: transparent; color: var(--night); }
.fnote { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .fpane { transition: none; } }

/* ── Anywhere ──────────────────────────────────────────────────────────────
   Gradients take physical directions only, so the two writing directions get a
   rule each and the dark end stays under the copy. */
.anywhere { position: relative; overflow: hidden; }
.anywhere__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anywhere__scrim { position: absolute; inset: 0; background: rgba(18,19,22,.6); }
[dir="rtl"] .anywhere__scrim { background: linear-gradient(to left, rgba(18,19,22,.95) 0%, rgba(18,19,22,.85) 42%, rgba(18,19,22,.45) 100%); }
[dir="ltr"] .anywhere__scrim { background: linear-gradient(to right, rgba(18,19,22,.95) 0%, rgba(18,19,22,.85) 42%, rgba(18,19,22,.45) 100%); }
.anywhere__inner { position: relative; max-width: 58ch; }
.spots { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.spots li {
  padding: 9px 18px; border-radius: 999px; font-size: .9rem;
  border: 1px solid rgba(224,138,74,.4); color: var(--night-ink);
  background: rgba(224,138,74,.08);
}

/* ── The command centre ────────────────────────────────────────────────────
   The band is paper and the card is night: it is a screen, and it reads as one
   only because the page around it is not. */
.hubcard {
  background: var(--night); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius); padding: 22px;
  box-shadow: 0 24px 54px rgba(22,24,28,.14);
}
.hub__top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--night-muted); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
}
.hub__live { color: var(--brass-hi); }
.hub__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.hub__row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; color: var(--night-ink); }
.hub__row + .hub__row { border-top: 1px solid rgba(255,255,255,.06); }
.hub__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hub__dot.is-ok { background: #4ea97a; box-shadow: 0 0 0 3px rgba(78,169,122,.16); }
.hub__dot.is-warn { background: var(--brass-hi); box-shadow: 0 0 0 3px rgba(224,138,74,.16); }
.hub__name { flex: 1; }
.hub__v { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--night-muted); }
.hub__foot { margin: 16px 0 0; font-size: .84rem; color: var(--night-muted); }

/* ── What it is worth ──────────────────────────────────────────────────────*/
.gains { margin-block-start: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gain {
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.gain:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(22, 24, 28, .09); border-color: #d9d3c9; }
.gain__ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: var(--brass-soft); border: 1px solid rgba(180,87,31,.22); color: var(--brass);
  margin-bottom: 16px;
}
.gain__ico svg { width: 24px; height: 24px; }
.gain h3 { margin: 0 0 8px; font-size: 1.08rem; }
.gain p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .gains { grid-template-columns: 1fr; } }

/* ── The film ──────────────────────────────────────────────────────────────
   preload="none": it is a 17MB file and nobody pays for it until they ask. */
.film { position: relative; margin-block-start: clamp(28px, 4vw, 40px); border-radius: var(--radius); overflow: hidden; background: #000; }
.film__v { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
/* The whole frame is the button; the ring inside it chases the pointer, the way
   the player on the SmartBarIQ site does. The native cursor goes away over the
   frame — the ring replaces it — and the global circle cursor stands down here
   so there is never one ring inside another. */
.film__play {
  position: absolute; inset: 0; border: 0; padding: 0; font: inherit;
  background: rgba(18,19,22,.26);
  transition: background .3s ease, opacity .3s ease;
}
html.has-cursor .film__play, .film__play { cursor: none; }
.film__play:hover { background: rgba(18,19,22,.12); }
.film.is-playing .film__play { opacity: 0; pointer-events: none; }
.film__play:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: -4px; }
.film__ring {
  position: absolute; top: 0; left: 0;
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18,19,22,.28);
  border: 1px solid rgba(224,138,74,.85);
  color: var(--brass-hi);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  pointer-events: none; opacity: 0;
  /* Position is written by script every frame and deliberately carries no
     transition — a transition restarts on every mousemove, which is what makes
     the movement step instead of glide. The easing happens in the script, as a
     continuous chase toward the pointer. The hover pop rides inside this same
     transform rather than in the separate `scale` property, which composes
     before `transform` and would shrink the ring toward the frame's corner
     instead of its own centre. */
  transform: translate3d(0, 0, 0) translate(-50%, -50%) scale(.82);
  transition: opacity .22s ease;
  will-change: transform;
}
.film__ring svg { width: 26px; height: 26px; display: block; fill: currentColor; }
.film.is-hover .film__ring { opacity: 1; }
/* Touch has no pointer to follow: the ring goes back to the middle and stays. */
@media (hover: none) {
  .film__play { cursor: pointer; }
  .film__ring {
    top: 50%; left: 50%; opacity: 1;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 900px) {
  .guide .split, .hub .split { grid-template-columns: 1fr; }
}

/* ── End-of-day count ──────────────────────────────────────────────────────
   The card is the terminal's own screen quoted on a paper band, the same
   treatment as the command centre: it reads as a screen because the page
   around it is not one. */
.cntcard {
  background: var(--night); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius); padding: 22px;
  box-shadow: 0 24px 54px rgba(22, 24, 28, .14);
}
.cnt-top {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: var(--night-ink); font-weight: 600;
}
.cnt-top em { font-style: normal; font-size: .78rem; font-weight: 500; color: var(--brass-hi); }
.cnt-group {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 10px; font-size: .76rem; color: var(--brass-hi);
}
.cnt-group b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
/* The second group is the one you do not have to do anything about. */
.cnt-group.is-quiet { color: var(--night-muted); margin-block-start: 18px; }
.cnt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cnt-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 13px; border-radius: 9px;
  background: rgba(255, 255, 255, .035); color: var(--night-ink); font-size: .9rem;
}
.cnt-name { flex: 1; min-width: 0; }
.cnt-val { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cnt-read { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.cnt-exp { font-size: .78rem; color: var(--night-muted); }
.cnt-off { font-style: normal; font-size: .76rem; color: #e2705c; }
.cnt-row.is-off { border: 1px solid rgba(226, 112, 92, .4); background: rgba(226, 112, 92, .08); }
.cnt-row.is-todo { color: var(--night-muted); }
.cnt-weigh {
  padding: 6px 16px; border-radius: 999px; font-size: .8rem;
  border: 1px solid rgba(224, 138, 74, .45); color: var(--brass-hi);
}
.cnt-done {
  display: block; margin-block-start: 18px; padding: 12px; border-radius: 999px;
  background: var(--brass-hi); color: var(--night); font-weight: 600; text-align: center;
}
@media (max-width: 900px) { .count .split { grid-template-columns: 1fr; } }

/* ── The numbers band ──────────────────────────────────────────────────────*/
.stats .section-head { text-align: center; margin-inline: auto; }
.stats-grid {
  list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.stat { text-align: center; padding: 8px 10px; }
/* A hairline between the figures rather than four boxes: the numbers are the
   object here, and a card around each one buries them. */
.stat + .stat { border-inline-start: 1px solid rgba(255, 255, 255, .1); }
.stat__v {
  margin: 0 0 10px; display: flex; align-items: baseline; justify-content: center; gap: 2px;
  font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 300; line-height: 1;
  color: var(--night-ink);
  /* Tabular figures so the number does not jostle sideways while it counts. */
  font-variant-numeric: tabular-nums;
}
.stat__v em { font-style: normal; font-size: .5em; color: var(--brass-hi); }
.stat__l { margin: 0; font-size: .92rem; color: var(--night-muted); max-width: 22ch; margin-inline: auto; }
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  /* With two per row the vertical rule would fall in the middle of the block. */
  .stat + .stat { border-inline-start: 0; }
}
@media (max-width: 420px) { .stats-grid { grid-template-columns: 1fr; } }