/* ==========================================================================
   Grocer Box — "Open for orders"
   A market-editorial reimagining. Warm paper canvas (from brand #f8f5f0),
   high-contrast serif display, swing price-tag labels, a printed order
   receipt as the hero proof, and an order-journey narrative spine.
   Brand red is the single accent; green is "in stock" only.
   ========================================================================== */

:root {
  --paper:    oklch(96.5% 0.009 78);
  --paper-2:  oklch(94% 0.013 74);
  --card:     oklch(99% 0.005 85);
  --ink:      oklch(23% 0.014 48);
  --ink-soft: oklch(38% 0.012 50);
  --muted:    oklch(52% 0.012 55);
  --line:     oklch(85% 0.012 68);
  --rule:     oklch(26% 0.02 48);     /* strong editorial hairline */
  --accent:   oklch(57% 0.21 22);     /* brand red #e41f3b */
  --accent-deep: oklch(48% 0.20 23);  /* #c11a1a */
  --accent-soft: oklch(95% 0.035 28);
  --fresh:    oklch(55% 0.13 150);    /* semantic "in stock" only */
  --gold:     oklch(83% 0.11 78);     /* warm market light, gradient only */

  --font-display: 'Instrument Serif', 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --wrap: 1280px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-sans);
  font-size: 17px; line-height: 1.6;
  color: var(--ink-soft); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--paper); }

/* ---- display type ---- */
.display { font-family: var(--font-display); color: var(--ink); font-weight: 400; line-height: .94; letter-spacing: -0.015em; text-wrap: balance; }
h1.display { font-size: clamp(3.4rem, 9vw, 7.5rem); }
h2.display { font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: .98; }
h3.display { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.02; }
.display em { font-style: italic; color: var(--accent-deep); }
.serif-it { font-family: var(--font-display); font-style: italic; }

/* small-caps editorial label */
.kicker { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-deep); font-weight: 500; }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.32rem); line-height: 1.5; color: var(--ink-soft); max-width: 52ch; }
.muted { color: var(--muted); }
.measure { max-width: 60ch; }

/* ---- swing price-tag label ---- */
.tag {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--card);
  padding: .5em .9em .5em 1.95em; position: relative;
  border: 1.5px solid var(--rule); border-radius: 4px 999px 999px 4px;
}
.tag::before { content: ""; position: absolute; left: .7em; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--rule); }
.tag--red { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.tag--red::before { background: var(--accent-deep); border-color: var(--paper); }

/* ---- layout ---- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(72px, 11vw, 152px); }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }
.rule-top { border-top: 1.5px solid var(--rule); }
.rule-line { height: 1px; background: var(--line); border: 0; }

/* numbered editorial section header */
.shead { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.4rem); align-items: end; padding-top: 1.4rem; }
.shead__no { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; color: var(--accent-deep); padding-top: .6rem; }
.shead__t { }
.shead__t h2 { margin-top: .6rem; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: .6em; font-weight: 500; font-size: .98rem; padding: .9em 1.5em; border-radius: 999px; border: 1.5px solid transparent; transition: transform .18s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .25s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--accent); color: var(--paper); box-shadow: 0 8px 22px oklch(57% 0.21 22 / .26); }
.btn-red:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 12px 28px oklch(52% 0.21 22 / .32); }
.btn-ink { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ink:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.btn-lg { padding: 1.05em 1.8em; font-size: 1.04rem; }
.btn .arrow, .alink .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow, .alink:hover .arrow { transform: translateX(4px); }

.alink { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: .5em; border-bottom: 1.5px solid var(--accent); padding-bottom: .25em; }
.alink:hover { color: var(--accent-deep); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr { position: sticky; top: 0; z-index: 60; background: oklch(96.5% 0.009 78 / .60); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1.5px solid transparent; transition: border-color .25s, background .25s; }
.hdr.stuck { background: oklch(96.5% 0.009 78 / .80); }
.hdr.stuck { border-bottom-color: var(--rule); }
.nav { display: flex; align-items: center; gap: 1.6rem; height: 76px; }
.logo { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); letter-spacing: -0.01em; }
.logo__mark { width: 30px; height: 30px; flex: none; }
.logo__img { height: 30px; width: auto; display: block; }
.nav__links { display: flex; gap: .25rem; margin-left: 1rem; }
.nav__links a { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding: .55rem .7rem; border-radius: 6px; transition: color .15s, background .15s; }
.nav__links a:hover { color: var(--ink); background: var(--paper-2); }
.nav__links a[aria-current="page"] { color: var(--accent-deep); }
.nav__sp { flex: 1; }
.nav__cta { display: flex; align-items: center; gap: 1rem; }
.burger { display: none; width: 46px; height: 46px; border: 1.5px solid var(--rule); border-radius: 8px; background: var(--card); align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { content: ""; display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s; }
.burger span::before { transform: translateY(-6px); } .burger span::after { transform: translateY(4.5px); }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { transform: rotate(45deg); }
body.menu-open .burger span::after { transform: rotate(-45deg) translateY(-1.5px); }
.drawer { position: fixed; inset: 76px 0 0; z-index: 55; background: var(--paper); padding: 1.5rem var(--pad) 2.5rem; display: flex; flex-direction: column; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s, transform .25s var(--ease); overflow-y: auto; }
body.menu-open .drawer { opacity: 1; transform: none; pointer-events: auto; }
.drawer a { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); padding: .8rem 0; border-bottom: 1px solid var(--line); }
.drawer .btn { margin-top: 1.6rem; justify-content: center; }

/* ==========================================================================
   HERO — storefront + printed receipt
   ========================================================================== */
/* pull the hero (and its gradient glow) up under the sticky header so the
   warm mesh reads behind the translucent navbar; padding-top restores the
   original content position. 76px = .nav height. */
.hero { position: relative; overflow: hidden; margin-top: -76px; padding-top: 76px; }
.hero__glow { position: absolute; inset: -20% -10% auto -10%; height: 80%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 18%, oklch(83% 0.11 78 / .55), transparent 62%),
    radial-gradient(55% 65% at 92% 40%, oklch(72% 0.16 30 / .42), transparent 60%),
    radial-gradient(48% 60% at 70% 4%, oklch(70% 0.2 24 / .30), transparent 60%);
  filter: blur(8px); }
.hero__grain { position: absolute; inset: 0; z-index: 0; opacity: .045; pointer-events: none; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(56px, 9vw, 104px) clamp(40px, 6vw, 72px); }
.hero__open { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin-bottom: 1.6rem; }
.hero__open .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fresh); box-shadow: 0 0 0 0 oklch(55% 0.13 150 / .5); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 oklch(55% 0.13 150 / .5);} 70%{ box-shadow: 0 0 0 9px oklch(55% 0.13 150 / 0);} 100%{ box-shadow:0 0 0 0 oklch(55% 0.13 150 / 0);} }
@media (prefers-reduced-motion: reduce){ .hero__open .dot { animation: none; } }
.hero h1 { margin-bottom: 1.6rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; align-items: center; }
.hero__meta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--muted); }
.hero__meta span { display: inline-flex; align-items: center; gap: .5em; }
.hero__meta b { color: var(--ink); font-weight: 500; }

/* receipt / order ticket */
.receipt { position: relative; background: var(--card); width: min(360px, 100%); margin-inline: auto; padding: 1.6rem 1.5rem 1.9rem; box-shadow: 0 30px 60px rgba(50,12,12,.16); transform: rotate(1.4deg); font-family: var(--font-mono); color: var(--ink); --zig: 10px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/ calc(var(--zig)*2) var(--zig) repeat-x, linear-gradient(#000 0 0) top/100% calc(100% - var(--zig)) no-repeat;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/ calc(var(--zig)*2) var(--zig) repeat-x, linear-gradient(#000 0 0) top/100% calc(100% - var(--zig)) no-repeat; }
.receipt-wrap { perspective: 1000px; }
.receipt-wrap .receipt { animation: print 1s var(--ease) both; transform-origin: top; }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce){ .receipt-wrap .receipt { animation: none; } }
.rc__head { text-align: center; border-bottom: 1.5px dashed var(--line); padding-bottom: 1rem; margin-bottom: 1rem; }
.rc__head .store { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--ink); }
.rc__head small { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rc__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; padding: .28rem 0; }
.rc__row .q { color: var(--muted); }
.rc__div { border-top: 1.5px dashed var(--line); margin: 1rem 0; }
.rc__total { display: flex; justify-content: space-between; font-size: .95rem; color: var(--ink); font-weight: 500; }
.rc__stamp { margin-top: 1.1rem; text-align: center; }
.rc__stamp span { display: inline-block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); border: 1.5px solid var(--accent); border-radius: 6px; padding: .4em .9em; transform: rotate(-3deg); }
.rc__barcode { height: 38px; margin-top: 1.1rem; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px); opacity: .85; }

/* ==========================================================================
   MARQUEE (produce aisle)
   ========================================================================== */
.marquee { border-block: 1.5px solid var(--rule); background: var(--ink); color: var(--paper); overflow: hidden; padding-block: 1rem; }
.marquee__track { display: inline-flex; white-space: nowrap; will-change: transform; animation: marq 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.2rem); padding-inline: 1.4rem; display: inline-flex; align-items: center; gap: 1.4rem; }
.marquee__track span::after { content: "✶"; color: var(--accent); font-size: .7em; }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track { animation: none; } }

/* ==========================================================================
   ORDER JOURNEY (narrative spine)
   ========================================================================== */
.journey__intro { max-width: 60ch; }
.journey { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 0; }
.leg { display: grid; grid-template-columns: 110px 1fr 1fr; gap: clamp(1.4rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.4rem, 5vw, 4rem); border-top: 1.5px solid var(--rule); position: relative; }
.leg:last-child { border-bottom: 1.5px solid var(--rule); }
.leg__no { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); color: var(--accent); line-height: 1; }
.leg__no small { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: .5rem; }
.leg__body h3 { margin-bottom: .6rem; }
.leg__body p { color: var(--ink-soft); max-width: 40ch; }
.leg__body .feat { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border: 1.5px solid var(--line); border-radius: 999px; padding: .35em .8em; }
.leg__media { }
.scene { aspect-ratio: 4/3; border: 1.5px solid var(--rule); border-radius: 8px; background: var(--card); position: relative; overflow: hidden; display: grid; place-items: center; }
.scene .pl { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* mini visual props inside scenes */
.scene--shop { background: linear-gradient(180deg, var(--card), var(--paper-2)); }
.scene__grid { position: absolute; inset: 12% 10%; display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 1fr; gap: 8px; }
.scene__cell { border: 1.5px solid var(--line); border-radius: 6px; background: var(--paper); position: relative; display: grid; place-items: center; color: var(--muted); }
.scene__cell svg { width: 46%; height: 46%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.scene__cell.r { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.scene__cell.r::after { content: "✓"; position: absolute; top: 2px; right: 5px; font-size: .56rem; font-weight: 700; color: var(--accent); }
.scene__truck { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64%; }
.scene__route { position: absolute; inset: 0; }
.tab { display: inline-flex; align-items: center; gap: .5em; font-size: .82rem; color: var(--ink); }
.dotline { width: 100%; border-top: 2px dashed var(--accent); opacity: .6; }

/* ==========================================================================
   POS RECEIPT SECTION
   ========================================================================== */
.pos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.pos__ledger { background: var(--card); border: 1.5px solid var(--rule); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(40,10,10,.08); }
.ledger__bar { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.1rem; border-bottom: 1.5px solid var(--line); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* Fixed label column so every row's title/subtitle lines up regardless of the
   src label's width (REGISTER vs STOREFRONT vs CATALOGUE). */
.ledger__row { display: grid; grid-template-columns: 96px 1fr auto; gap: .9rem 1.1rem; align-items: center; padding: .95rem 1.1rem; border-bottom: 1px solid var(--line); }
.ledger__row .txt small { margin-top: 2px; }
@media (max-width: 480px) { .ledger__row { grid-template-columns: 78px 1fr auto; } }
.ledger__row:last-child { border-bottom: 0; }
.ledger__row .src { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ledger__row .txt { color: var(--ink); font-size: .92rem; }
.ledger__row .txt small { display: block; color: var(--muted); font-size: .76rem; }
.synced { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fresh); display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.synced::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fresh); }

/* ==========================================================================
   CONTROL (signage)
   ========================================================================== */
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); margin-top: clamp(2rem,4vw,3rem); }
.ctrl { border: 1.5px solid var(--rule); border-radius: 10px; padding: 1.4rem; background: var(--card); }
.ctrl__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.ctrl__label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.toggle { width: 46px; height: 26px; border-radius: 999px; background: var(--fresh); position: relative; flex: none; }
.toggle.off { background: var(--line); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle:not(.off)::after { transform: translateX(20px); }
.ctrl h4 { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); line-height: 1; }
.ctrl p { color: var(--muted); font-size: .9rem; margin-top: .5rem; }

/* ==========================================================================
   EDITORIAL INDEX (the shelf / contents)
   ========================================================================== */
.index-list { border-top: 1.5px solid var(--rule); margin-top: clamp(2rem,4vw,3rem); }
.ix { display: grid; grid-template-columns: 56px 1.1fr 1.5fr auto; gap: clamp(1rem, 3vw, 2.4rem); align-items: center; padding-block: 1.5rem; border-bottom: 1.5px solid var(--line); transition: background .2s; }
.ix:hover { background: var(--card); }
.ix__no { font-family: var(--font-mono); font-size: .82rem; color: var(--accent-deep); }
.ix__name { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink); line-height: 1.1; }
.ix__desc { color: var(--ink-soft); font-size: .95rem; }
.ix__page a { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border-bottom: 1.5px solid var(--accent); padding-bottom: .2em; white-space: nowrap; }
.ix__page a:hover { color: var(--accent-deep); }

/* ==========================================================================
   MANIFESTO (full-bleed pull quote)
   ========================================================================== */
.manifesto { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.manifesto__glow { position: absolute; inset: auto -10% -40% 30%; height: 120%; background: radial-gradient(50% 60% at 50% 50%, oklch(57% 0.21 22 / .5), transparent 65%); filter: blur(20px); }
.manifesto .wrap { position: relative; z-index: 1; }
.manifesto blockquote { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -0.01em; max-width: 18ch; text-wrap: balance; }
.manifesto blockquote em { font-style: italic; color: oklch(80% 0.13 32); }
.manifesto .by { margin-top: 2rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: oklch(75% 0.02 70); }

/* ==========================================================================
   CTA
   ========================================================================== */
.endcta { text-align: center; }
.endcta h2 { margin-bottom: 1.2rem; }
.endcta .cluster { display: inline-flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 1.4rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { border-top: 1.5px solid var(--rule); padding-block: clamp(48px, 7vw, 80px) 2.2rem; }
.foot__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.4rem; }
.foot__blurb { margin-top: 1rem; max-width: 36ch; color: var(--muted); font-size: .95rem; }
.foot__blurb a { color: var(--accent-deep); border-bottom: 1.5px solid oklch(88% 0.05 22); padding-bottom: 1px; transition: border-color .2s, color .2s; }
.foot__blurb a:hover { color: var(--accent); border-color: var(--accent); }

/* HDS lockup next to the nav wordmark */
.hds-lockup { display: inline-flex; align-items: center; margin-left: .8rem; padding-left: .85rem; border-left: 1.5px solid var(--line); font-family: var(--font-mono); font-size: .58rem; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); max-width: 13ch; transition: color .2s; }
.hds-lockup:hover { color: var(--accent-deep); }
@media (max-width: 620px) { .hds-lockup { display: none; } }

/* full case-study parts (Company / Challenge / Solution) */
.case-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.8rem); margin-top: clamp(2rem, 4vw, 3rem); }
.case-part__label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: .7rem; display: block; }
.case-part p { color: var(--ink-soft); font-size: .95rem; line-height: 1.62; }
@media (max-width: 860px) { .case-parts { grid-template-columns: 1fr; gap: 1.6rem; } }
.foot__col h5 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 1rem; }
.foot__col a { display: block; padding: .34rem 0; color: var(--ink-soft); font-size: .96rem; }
.foot__col a:hover { color: var(--accent-deep); }
.foot__news p { color: var(--muted); font-size: .92rem; margin-bottom: .9rem; }
.foot__news .row { display: flex; gap: .5rem; }
.foot__news input { flex: 1; background: var(--card); border: 1.5px solid var(--line); color: var(--ink); border-radius: 999px; padding: .7rem 1rem; font-size: .9rem; }
.foot__news input:focus { outline: none; border-color: var(--accent); }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; color: var(--muted); }
.foot__bottom .lg { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ==========================================================================
   REVEAL
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .js [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1020px) {
  .nav__links { display: none; }
  .burger { display: inline-flex; }
  .nav__cta .btn-red { display: none; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__news { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 360px; margin-inline: auto; }
  .receipt { transform: none; }
  .pos { grid-template-columns: 1fr; }
  .leg { grid-template-columns: 64px 1fr; }
  .leg__media { grid-column: 1 / -1; }
  .controls { grid-template-columns: 1fr; }
  .ix { grid-template-columns: 40px 1fr; }
  .ix__desc { grid-column: 2 / -1; }
  .ix__page { grid-column: 2 / -1; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .shead { grid-template-columns: 1fr; gap: .8rem; }
  .leg { grid-template-columns: 1fr; gap: 1rem; }
  .hero__meta { gap: .7rem 1.2rem; }
}

/* ==========================================================================
   WebGL mesh gradient (ShaderGradient / R3F) in the manifesto + anime gating
   ========================================================================== */
/* anime.js owns the hero entrance — hide those elements pre-animation, but
   ONLY when JS is on; if JS/anime fails to load they stay visible. */
.js [data-anim] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js [data-anim] { opacity: 1 !important; transform: none !important; } }

/* The manifesto already paints a dark ink base + red CSS glow as the
   fallback. The WebGL canvas layers on top of that; if esm.sh is blocked or
   WebGL is unavailable, the glow remains and nothing breaks. */
.manifesto__sg { position: absolute; inset: 0; z-index: 0; }
.manifesto__sg canvas { display: block; width: 100% !important; height: 100% !important; }
.manifesto__scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, oklch(20% 0.03 30 / .74) 0%, oklch(20% 0.03 30 / .40) 46%, oklch(20% 0.03 30 / .12) 100%); }
@media (prefers-reduced-motion: reduce) { .manifesto__sg { display: none; } }

/* ==========================================================================
   INNER-PAGE COMPONENTS (offering / integrations / contact / etc.)
   ========================================================================== */
.breadcrumb { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.4rem; }
.breadcrumb a:hover { color: var(--accent-deep); }
.page-hero { padding-block: clamp(48px, 8vw, 96px) clamp(28px, 5vw, 56px); }
.page-hero h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); margin: .8rem 0 0; }
.page-hero .lead { margin-top: 1.2rem; }
.page-hero__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 2-up content row */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split2--rev .split2__media { order: -1; }

/* tick feature list */
.feature-list { list-style: none; display: grid; gap: .9rem; margin-top: 1.5rem; }
.feature-list li { display: flex; gap: .7rem; align-items: flex-start; }
.feature-list b { color: var(--ink); font-weight: 600; }
.fl-tick { color: var(--fresh); flex: none; margin-top: .2rem; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* editorial cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: clamp(1.4rem, 2.6vw, 1.8rem); transition: transform .25s var(--ease), box-shadow .3s, border-color .25s; }
.card--hover:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(40, 12, 12, .08); border-color: var(--rule); }
.card__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-deep); margin-bottom: 1.1rem; }
.card h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.card p { color: var(--ink-soft); font-size: .97rem; }
.card .alink { margin-top: 1.1rem; }
.card__no { font-family: var(--font-mono); font-size: .76rem; color: var(--accent-deep); margin-bottom: .8rem; display: block; }

/* media panels */
.panel { background: var(--card); border: 1.5px solid var(--rule); border-radius: 14px; padding: clamp(1.3rem, 2.5vw, 1.9rem); box-shadow: 0 22px 50px rgba(40, 10, 10, .07); }
.panel--red { background: linear-gradient(155deg, oklch(40% 0.16 22), oklch(55% 0.21 20)); color: #fff; border: 0; box-shadow: 0 24px 60px rgba(120, 20, 24, .26); }
.panel--red h3, .panel--red b { color: #fff; }
.panel__label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.panel--red .panel__label { color: rgba(255,255,255,.78); }

/* honest placeholder */
.ph { background: repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 12px, var(--card) 12px, var(--card) 24px); border: 1.5px dashed var(--line); border-radius: 10px; color: var(--muted); display: grid; place-items: center; text-align: center; padding: 1.4rem; }
.ph small { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }

/* ==========================================================================
   Product tiles / storefront mocks (relevant graphics)
   ========================================================================== */
.prod { border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); display: grid; place-items: center; gap: .4rem; padding: .8rem .5rem; color: var(--ink-soft); aspect-ratio: 1; }
.prod svg { width: 32px; height: 32px; stroke: var(--accent-deep); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.prod span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.storemock { border: 1.5px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: 0 20px 50px rgba(40,10,10,.08); }
.storemock__bar { display: flex; align-items: center; gap: .35rem; padding: .6rem .8rem; border-bottom: 1.5px solid var(--line); background: var(--paper); }
.storemock__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: block; flex: none; }
.storemock__bar i:first-child { background: var(--coral); }
.storemock__url { margin-left: .5rem; font-family: var(--font-mono); font-size: .62rem; color: var(--muted); }
.storemock__hero { padding: 1.1rem 1rem; text-align: center; border-bottom: 1.5px solid var(--line); background: linear-gradient(160deg, var(--paper), var(--card)); }
.storemock__hero b { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .05em; color: var(--ink); display: block; line-height: 1; }
.storemock__hero small { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); display: block; margin-bottom: .35rem; }
.storemock__hero em { display: block; margin-top: .45rem; font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.15; letter-spacing: 0; color: var(--muted); }
.storemock__nav { display: flex; flex-wrap: wrap; gap: .3rem .85rem; padding: .55rem .85rem; border-bottom: 1.5px solid var(--line); font-family: var(--font-mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.storemock__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: .8rem; }
.storemock__grid .prod { border-radius: 8px; padding: .55rem .3rem; }
.storemock__grid .prod svg { width: 24px; height: 24px; }
.storemock__cred { display: flex; align-items: center; gap: .4rem; padding: .55rem .85rem; border-top: 1.5px solid var(--line); background: var(--paper); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; color: var(--muted); }
.storemock__cred svg { width: 13px; height: 13px; stroke: var(--accent-deep); stroke-width: 2; fill: none; flex: none; }

.logomark { border: 1.5px solid var(--rule); border-radius: 10px; background: linear-gradient(150deg, var(--paper), var(--card)); display: grid; place-items: center; text-align: center; }
.logomark b { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--ink); line-height: 1; letter-spacing: .02em; }
.logomark span { display: block; margin-top: .45rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* quote / testimonial */
.bigquote { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.1; color: var(--ink); letter-spacing: -.01em; text-wrap: balance; }
.bigquote .mk { color: var(--accent); }
.cite { margin-top: 1.6rem; display: flex; align-items: center; gap: .8rem; color: var(--muted); }
.cite .av { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--coral), var(--accent)); flex: none; }

/* metrics row */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.2rem); margin-top: 1.8rem; }
.metric b { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--ink); display: block; line-height: 1; }
.metric span { color: var(--muted); font-size: .9rem; margin-top: .5rem; display: block; }

/* forms */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 500; font-size: .9rem; color: var(--ink); }
.field .req { color: var(--accent-deep); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); width: 100%; transition: border-color .18s, box-shadow .18s; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field--bad input, .field--bad select, .field--bad textarea { border-color: var(--accent); }
.field__err { color: var(--accent-deep); font-size: .8rem; min-height: 1em; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form__note { font-size: .85rem; color: var(--muted); }
.form-ok { display: none; padding: 1.5rem; border-radius: 12px; background: oklch(95% 0.05 150); border: 1.5px solid oklch(82% 0.09 150); color: oklch(38% 0.12 150); }
.form-ok.show { display: block; }

@media (max-width: 860px) {
  .split2 { grid-template-columns: 1fr; gap: 2rem; }
  .split2--rev .split2__media { order: 0; }
  .cards, .cards.two { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; gap: 1.4rem; }
}
@media (max-width: 520px) {
  .row-2 { grid-template-columns: 1fr; }
}

/* numbered steps (contact "what to expect") */
.steps { display: grid; gap: 1.2rem; counter-reset: s; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.step__n { counter-increment: s; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: 1.25rem; flex: none; }
.step__n::before { content: counter(s, decimal-leading-zero); }
.step h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--ink); margin-bottom: .25rem; letter-spacing: -.01em; }
.step p { color: var(--muted); font-size: .95rem; }