/* =====================================================
   THE RASPBERRY COMPANY — styles
   ===================================================== */

:root {
  --bg: #0d060a;
  --bg-2: #150a10;
  --surface: #1a0d14;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f6eef2;
  --muted: #a8949d;
  --accent: #e8265e;
  --accent-soft: #ff5c8a;
  --accent-dim: rgba(232, 38, 94, 0.14);
  /* filled surfaces carrying white text — darker so they clear WCAG AA (5.0:1 / 6.0:1) */
  --accent-btn: #d81b52;
  --accent-btn-hover: #c41146;
  --green: #3e9b5f;
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: "Geist", system-ui, sans-serif;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --radius: 20px;
  /* Content shell — two named steps of one scale, because the site has two
     layout archetypes and forcing one number makes one of them wrong:

       --shell        a single column of centred sections (the homepage). This
                      was already the de-facto value, hardcoded in nine places
                      before it was given a name.
       --shell-stage  pages that pair a content column with a canvas column
                      (/raspberry-iq/). At 1400 its tiles fall to 365px and the
                      form is squeezed into a column with dead space outside
                      the shell — the exact problem the shell was added to fix.

     What is actually consistent between the pages is the ALIGNMENT rule and
     the token scale, not the number. Sections stay FULL-BLEED (scrims and
     backgrounds still span the window); only inner content is capped. */
  --shell: 1400px;
  --shell-stage: 1680px;
}

/* the shell, without needing a wrapper element in every section */
.shell-pad { padding-inline: max(var(--pad), calc((100% - var(--shell)) / 2)); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.lenis { height: auto; scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: italic; }

:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

/* visible to assistive tech only — restores a heading level without a visual duplicate */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* skip link — hidden until keyboard-focused */
.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 300; padding: 0.85rem 1.5rem; border-radius: 0 0 12px 12px;
  background: var(--accent-btn); color: #fff; font-weight: 700; font-size: 0.95rem;
  transition: transform 0.25s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 9990;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}

/* ---------- cursor ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
  .cursor--on { opacity: 1; }
  .cursor__dot {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-soft); transform: translate(-50%, -50%);
  }
  .cursor__ring {
    position: absolute; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255, 92, 138, 0.5); transform: translate(-50%, -50%);
    transition: width 0.25s ease, height 0.25s ease, background 0.25s ease;
  }
  .cursor--hover .cursor__ring { width: 56px; height: 56px; background: rgba(232, 38, 94, 0.12); }
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.1rem var(--pad);
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}
.nav--scrolled {
  background: rgba(13, 6, 10, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.nav__logo { display: flex; align-items: center; margin-right: auto; }
.nav__logo-img { height: clamp(30px, 3vw, 38px); width: auto; display: block; transition: height 0.4s ease; }
.nav--scrolled .nav__logo-img { height: clamp(26px, 2.6vw, 32px); }
.nav__links { display: flex; gap: 1.9rem; }
.nav__links > a,
.nav__trigger {
  font-size: 0.92rem; font-weight: 500; color: var(--muted);
  position: relative; transition: color 0.25s ease; letter-spacing: 0.02em;
}
.nav__links > a::after,
.nav__trigger::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 0;
  background: var(--accent); transition: width 0.3s ease;
}
.nav__links > a:hover,
.nav__trigger:hover { color: var(--text); }
.nav__links > a:hover::after,
.nav__trigger:hover::after { width: 100%; }
.nav__links > a.is-current { color: var(--text); }
.nav__links > a.is-current::after { width: 100%; }
.nav__cta {
  font-size: 0.88rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.6rem 1.25rem; border-radius: 99px;
  border: 1px solid rgba(232, 38, 94, 0.55); color: var(--text);
  transition: background 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}
.nav__cta:hover { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; }
.nav__burger {
  display: none; width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line);
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
}
.nav__burger span { display: block; width: 18px; height: 1.8px; background: var(--text); transition: transform 0.3s ease; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }


/* =====================================================
   THE SYSTEMS MENU — the site's one dropdown
   Replaces three flat nav items with one grouped panel.
   Everything inside is a PRODUCT, so the nav reads on a
   single axis; Practice stays top-level beside it.

   Accents are per-product and come from each product's own
   material: Labour Matrix's logo mint, Raspberry IQ's brand
   pink, Raspberry Compass' beacon amber. They are carried as
   an "R, G, B" triple rather than a colour so rgba() can
   take them — color-mix() would be tidier but this has no
   support floor at all.
   ===================================================== */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 0.42rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; line-height: inherit;
}
.nav__trigger svg {
  width: 9px; height: 9px; opacity: 0.65;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.nav__group.is-open .nav__trigger { color: var(--text); }
.nav__group.is-open .nav__trigger::after { width: 100%; }
.nav__group.is-open .nav__trigger svg { transform: rotate(180deg); opacity: 1; }
/* the section spy still marks the panel's footer link; mirror it onto the
   trigger so "Systems" keeps lighting up on the homepage as it used to */
.nav__group:has(.sysmenu__all.is-current) .nav__trigger { color: var(--text); }
.nav__group:has(.sysmenu__all.is-current) .nav__trigger::after { width: 100%; }

.sysmenu {
  --sys-accent: 255, 92, 138;
  position: absolute; top: calc(100% + 0.85rem); left: -1.1rem;
  width: 24rem; max-width: calc(100vw - 2 * var(--pad));
  padding: 0.5rem; z-index: 5;
  border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(32, 16, 24, 0.97), rgba(19, 10, 15, 0.98));
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 26px 64px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px) scale(0.975); transform-origin: 18% 0;
  filter: blur(5px);
  transition: opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.34s;
}
/* Bridges the gap between trigger and panel. Without it the pointer
   crosses dead space on the way down and hover-out fires. */
.sysmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.85rem; height: 0.85rem; }
/* ambient wash that takes the hovered product's colour */
.sysmenu::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 86% at 14% 0%, rgba(var(--sys-accent), 0.15), transparent 60%);
  transition: background 0.45s ease;
}
.nav__group.is-open .sysmenu {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition-delay: 0s, 0s, 0s, 0s;
}

/* the travelling highlight — ONE element that moves between rows, which is
   the difference between a menu that feels built and one that feels styled */
.sysmenu__hl {
  position: absolute; left: 0.5rem; right: 0.5rem; top: 0;
  height: var(--hl-h, 0px); transform: translateY(var(--hl-y, 0px));
  border-radius: 13px; z-index: 1; pointer-events: none; opacity: 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
}
.sysmenu__hl.is-on { opacity: 1; }

.sysmenu__item {
  --i: 0;
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 0.16rem 0.75rem; padding: 0.72rem 0.9rem 0.75rem 1.05rem;
  border-radius: 13px;
  opacity: 0; transform: translateY(7px);
  transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__group.is-open .sysmenu__item {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i) * 52ms + 45ms);
}
.sysmenu__item::before {
  content: ""; position: absolute; left: 0.4rem; top: 50%;
  width: 2px; height: 0; border-radius: 2px;
  background: rgb(var(--acc)); transform: translateY(-50%);
  transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.sysmenu__item:hover::before, .sysmenu__item:focus-visible::before { height: 58%; }
.sysmenu__item:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; }
.sysmenu__name {
  font-size: 0.95rem; font-weight: 600; color: var(--text); letter-spacing: 0.01em;
}
.sysmenu__desc {
  grid-column: 1 / -1; font-size: 0.775rem; line-height: 1.4; color: var(--muted);
}
.sysmenu__chip {
  display: inline-flex; align-items: center; gap: 0.38rem; white-space: nowrap;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.sysmenu__chip--live { color: #5ee39a; }
.sysmenu__chip--live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: sysPulse 2.6s ease-out infinite;
}
@keyframes sysPulse {
  0%   { box-shadow: 0 0 0 0 rgba(94, 227, 154, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(94, 227, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 227, 154, 0); }
}
.sysmenu__item[aria-current="page"] .sysmenu__name { color: var(--accent-soft); }

.sysmenu__all {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0.4rem 0.35rem 0.1rem; padding: 0.72rem 0.7rem 0.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem; font-weight: 500; color: var(--muted);
  opacity: 0; transform: translateY(7px);
  transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}
.nav__group.is-open .sysmenu__all { opacity: 1; transform: none; transition-delay: 0.2s; }
.sysmenu__all:hover { color: var(--text); }
.sysmenu__all span:last-child { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.sysmenu__all:hover span:last-child { transform: translateX(4px); }

/* NO-JS FALLBACK — js/nav-systems.js stamps .nav-js on <html> and takes
   over. Until (or unless) it does, hover and focus still open the panel,
   so the products are never unreachable. */
html:not(.nav-js) .nav__group:hover .sysmenu,
html:not(.nav-js) .nav__group:focus-within .sysmenu {
  opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s;
}
html:not(.nav-js) .nav__group:hover .sysmenu__item,
html:not(.nav-js) .nav__group:hover .sysmenu__all,
html:not(.nav-js) .nav__group:focus-within .sysmenu__item,
html:not(.nav-js) .nav__group:focus-within .sysmenu__all { opacity: 1; transform: none; }

/* ---------- the products inside the mobile menu ---------- */
.menu__subs {
  display: flex; flex-direction: column; gap: 0.15rem;
  margin: 0.35rem 0 0.75rem 1.1rem;
  padding-left: 1.05rem; border-left: 1px solid var(--line);
  transform: translateY(30px); opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.menu__subs a {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: clamp(1rem, 4.2vw, 1.2rem); font-weight: 500; color: var(--muted);
}
.menu__subs a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--acc)); flex: none;
}
.menu__subs a[aria-current="page"] { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .sysmenu, .sysmenu__item, .sysmenu__all, .sysmenu__hl,
  .sysmenu::after, .nav__trigger svg, .menu__subs { transition-duration: 0.01ms !important; }
  .sysmenu__chip--live::before { animation: none; }
  .sysmenu { filter: none; transform: none; }
}

/* ---------- mobile menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(13, 6, 10, 0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad);
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
}
.menu.open { opacity: 1; visibility: visible; }
.menu__links { display: flex; flex-direction: column; gap: 0.4rem; }
.menu__links > a {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.25;
  display: flex; align-items: baseline; gap: 1rem;
  transform: translateY(30px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease;
}
.menu.open .menu__links > a,
.menu.open .menu__subs { transform: translateY(0); opacity: 1; }
.menu.open .menu__links > *:nth-child(2) { transition-delay: 0.06s; }
.menu.open .menu__links > *:nth-child(3) { transition-delay: 0.12s; }
.menu.open .menu__links > *:nth-child(4) { transition-delay: 0.18s; }
.menu.open .menu__links > *:nth-child(5) { transition-delay: 0.24s; }
.menu.open .menu__links > *:nth-child(6) { transition-delay: 0.30s; }
.menu__links > a small { font-family: var(--font-body); font-size: 0.85rem; color: var(--accent-soft); font-weight: 500; }
.menu__foot { position: absolute; bottom: 2.2rem; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; color: var(--muted); font-size: 0.9rem; flex-wrap: wrap; gap: 0.5rem; }
.menu__foot a { color: var(--text); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.9rem; border-radius: 99px;
  /* load-bearing: <a class="btn"> inherits Geist from body, but a <button>
     falls back to the UA's form-control font — the contact form's submit
     button rendered in Arial against every other button's Geist. */
  font-family: inherit;
  font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}
.btn--primary {
  background: var(--accent-btn); color: #fff;
  box-shadow: 0 8px 32px rgba(232, 38, 94, 0.35);
}
.btn--primary:hover { background: var(--accent-btn-hover); box-shadow: 0 10px 40px rgba(232, 38, 94, 0.5); }
.btn--ghost { border: 1px solid var(--line); color: var(--text); }
.btn--ghost:hover { border-color: rgba(255, 92, 138, 0.6); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem var(--pad) 8rem;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 38%, rgba(232, 38, 94, 0.16), transparent 70%),
    radial-gradient(45% 40% at 15% 85%, rgba(120, 20, 60, 0.22), transparent 70%);
}
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1;
}
.hero__fallback {
  display: none;
  position: absolute; z-index: 1;
  top: 50%; right: 4vw; transform: translateY(-52%) rotate(-8deg);
  width: clamp(260px, 34vw, 520px); aspect-ratio: 1;
  color: var(--accent);
  filter: drop-shadow(0 0 90px rgba(232, 38, 94, 0.35));
  pointer-events: none;
}
.hero__fallback img { width: 100%; height: 100%; opacity: 0.9; }
html.no-berry .hero__canvas { display: none; }
html.no-berry .hero__fallback { display: block; }
@media (max-width: 960px) {
  .hero__fallback { top: 18%; right: -10vw; opacity: 0.4; transform: rotate(-8deg); }
}
.hero__inner { position: relative; z-index: 2; max-width: 850px; margin-left: clamp(0px, 4.5vw, 92px); }
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  /* ⚠ the middle term is min(vw, vh), not vw. A vw-only clamp sizes a
     headline by the viewport dimension that is NOT scarce: at 1366x640 this
     was 131px x 3 lines = 70% of the screen with the CTA 114px below the
     fold, while measuring as "correct" because the computed size matched
     the ceiling exactly. 12vh is what the three lines can afford. */
  font-size: clamp(3.2rem, min(10.5vw, 12vh), 8.2rem);
  line-height: 0.98; letter-spacing: -0.02em;
  margin-bottom: 2.2rem;
}
.line { display: block; overflow: hidden; padding-bottom: 0.5em; margin-bottom: -0.5em; }
/* ⚠ The DESCENDER FIX — and it is not the mask above.
   `.line--accent` paints a gradient and sets -webkit-text-fill-color:transparent,
   so a glyph is visible ONLY where the element's BACKGROUND BOX covers it. The
   hero's line-height (0.98) is SMALLER than the font's content area, so the
   background box is ~0.1em shorter than the ink: the tail of the "g" in
   "engineered." fell outside the painted box and rendered as nothing — a flat
   horizontal slice through the bowl.
   `.line`'s overflow:hidden was NOT the culprit (it already clears 0.5em), which
   is why padding THAT element never fixed it. Extend the background box downward
   here and cancel it in layout, so nothing moves.
   0.22em covers the font's full descent (0.335em) at the tightest line-height. */
.line__inner {
  display: inline-block; will-change: transform;
  padding-bottom: 0.22em; margin-bottom: -0.22em;
}
.line--accent .line__inner {
  background: linear-gradient(100deg, var(--accent) 10%, var(--accent-soft) 55%, #ff9db9 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__sub {
  max-width: 33rem; color: var(--muted); font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  margin-bottom: 2.6rem;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__foot {
  position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: 1.8rem;
  display: flex; justify-content: flex-end; align-items: flex-end; gap: 1rem;
}
.hero__scroll {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.hero__scroll span {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, var(--accent-soft));
  animation: drop 2s ease-in-out infinite;
}
@keyframes drop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- marquee ---------- */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.3rem 0; overflow: hidden; background: var(--bg-2);
}
.marquee__track { display: flex; white-space: nowrap; width: max-content; }
.marquee__track span {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem); letter-spacing: 0.04em;
  color: var(--muted);
}
.marquee__track i { color: var(--accent); font-style: normal; margin: 0 1rem; }

/* ---------- ethos ---------- */
/* ⚠ SECTION SPACING FOLLOWS THE DISPLAY SCALE. The vertical padding of each
   top-level section is min(vw, vh) with the same anchor (max / 10), so it is
   unchanged from 1000px of height up and shrinks with the type below that. At
   1366x640 the manifesto section was 60% padding around 181px of text once its
   type was right-sized. Component padding (cards, panels, the form) stays
   width-based on purpose: it belongs to the component, not the screen. */
.ethos { padding: clamp(6rem, min(14vw, 19.2vh), 12rem) var(--pad); max-width: 1200px; margin: 0 auto; }
.ethos__kicker, .section-head__kicker, .contact__kicker, .premise__kicker {
  font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-soft); font-weight: 700; margin-bottom: 2rem;
}
.ethos__text {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, min(4.2vw, 5.3vh), 3.3rem); line-height: 1.25; letter-spacing: -0.01em;
  text-wrap: balance;
}
.ethos__text .w { opacity: 0.13; display: inline-block; }

/* ---------- section head ---------- */
.section-head { padding: 0 var(--pad); max-width: var(--shell); margin: 0 auto 4rem; }
/* ⚠ THE DISPLAY SCALE IS SIZED BY min(vw, vh), not vw. Every display-size rule
   on the site (anything that reaches ~48px) takes min(Avw, Bvh) as its middle
   term, with B = the rule's own maximum / 10. So each one is exactly its full
   size from 1000px of viewport height up, and below that ALL of them shrink in
   the same proportion -- shrinking only the biggest would invert the hierarchy
   (section titles smaller than the card names and numerals inside them).
   Measured 2026-10-01 at 1366x640, before: the Raspberry IQ premise ran to
   101% of the screen, the manifesto 52%, "Let's build better work." 51%. A new
   display rule should follow the same pattern; .hero__title explains why. */
.section-head__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, min(7vw, 8.7vh), 5.4rem); line-height: 1.02; letter-spacing: -0.02em;
}
.section-head__title .dot { color: var(--accent); }
.section-head__sub { color: var(--muted); max-width: 34rem; margin-top: 1.6rem; font-size: 1.08rem; }

/* ---------- systems / stacked cards ---------- */
.systems { padding: clamp(4rem, min(8vw, 12.8vh), 8rem) 0 clamp(5rem, min(10vw, 14.4vh), 9rem); }
.stack { padding: 0 var(--pad); max-width: var(--shell); margin: 0 auto; }
.sys-card {
  position: sticky; top: 90px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  background: linear-gradient(150deg, var(--surface), var(--bg-2) 70%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 3.5rem);
  margin-bottom: 3rem;
  min-height: min(72vh, 640px);
  will-change: transform;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.45);
}
/* real product palettes, pulled from each product's own stylesheet */
.sys-card[data-tint="matrix"] { --card-accent: #10b981; --brand-hi: #57faab; --mock-bg: #0e1526; }
.sys-card[data-tint="rw"]     { --card-accent: #ff5c93; --brand-hi: #ff5c93; --mock-bg: #14090f; }
.sys-card[data-tint="arb"]    { --card-accent: #c4954a; --brand-hi: #edcb8b; --mock-bg: #0e1e35; }
/* Raspberry IQ — the house brand (#e2185e) lifted to #ff5c93 so it clears AA
   on the card surface, the same fix Tech IQ needed. */
.sys-card[data-tint="riq"]    { --card-accent: #ff5c93; --brand-hi: #ff5c93; --mock-bg: #1a0a12; }
.sys-card__meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
/* card numbers are generated — insert/remove/reorder cards and they renumber themselves */
.stack { counter-reset: syscard; }
.sys-card { counter-increment: syscard; }
.sys-card__num {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--card-accent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 45%, transparent);
  border-radius: 99px; padding: 0.3rem 0.85rem;
}
.sys-card__num::before { content: counter(syscard, decimal-leading-zero); }
.sys-card__status {
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.sys-card__status--live { color: #5ee39a; }
.sys-card__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, min(4.6vw, 5.8vh), 3.6rem); letter-spacing: -0.015em; line-height: 1.05;
  margin-bottom: 0.9rem;
}
.sys-card__name--logo { line-height: 0; }
.sys-card__logo { display: block; width: auto; }
.sys-card__logo--wide { height: clamp(2.1rem, 3.4vw, 2.8rem); }   /* Labour Matrix lockup (wide) */
.sys-card__logo--rect { height: clamp(3.6rem, 6vw, 4.9rem); }     /* IQ window-frame logos */

/* brand display typography, matching each product's own site */
.sys-card[data-tint="matrix"] .sys-card__tag { font-family: 'Source Serif 4', Georgia, serif; font-weight: 500; }
.sys-card[data-tint="matrix"] .mock,
.sys-card[data-tint="matrix"] .stat u { font-family: 'Geist', system-ui, sans-serif; }
/* the IQ family serif — now carried by the one Raspberry IQ card that stands
   for all seven (the per-product cards moved to /raspberry-iq/) */
.sys-card[data-tint="riq"] .sys-card__tag { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; }
.sys-card[data-tint="arb"] .sys-card__tag { font-family: 'Fraunces', Georgia, serif; font-weight: 600; }

/* Raspberry Compass: icon + wordmark row, Outfit (its default UI face) */
.sys-card__name--row {
  display: flex; align-items: center; gap: 0.9rem; line-height: 1;
  font-size: clamp(2.1rem, min(4.6vw, 5.8vh), 3.6rem);
}
.sys-card__logo--icon { height: 1.15em; width: auto; }
.sys-card[data-tint="rw"] .sys-card__name,
.sys-card[data-tint="rw"] .sys-card__tag,
.sys-card[data-tint="rw"] .mock,
.sys-card[data-tint="rw"] .stat u { font-family: 'Outfit', system-ui, sans-serif; font-weight: 600; }
.sys-card__tag { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--card-accent); font-weight: 500; margin-bottom: 1.1rem; }
.sys-card__desc { color: var(--muted); max-width: 30rem; margin-bottom: 1.8rem; }
.sys-card__chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.sys-card__chips li {
  font-size: 0.82rem; font-weight: 500; color: var(--text);
  padding: 0.42rem 0.9rem; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
}
.sys-card__link {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.6rem;
  font-weight: 700; font-size: 0.95rem; color: var(--card-accent);
  padding-bottom: 0.3rem; border-bottom: 1px solid color-mix(in srgb, var(--card-accent) 35%, transparent);
  transition: gap 0.3s ease, border-color 0.3s ease;
}
.sys-card__link span { transition: transform 0.3s ease; }
.sys-card__link:hover { border-color: var(--card-accent); }
.sys-card__link:hover span { transform: translateX(4px); }

/* ---- faux UI mockups ---- */
.sys-card__visual { perspective: 1200px; }
.mock {
  position: relative;
  background: var(--mock-bg, #120910); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: rotateY(-6deg) rotateX(3deg);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
  will-change: transform;
}
/* moving glare that tracks the pointer (Pass #2 parallax) */
.mock::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.1), transparent 62%);
  opacity: 0; transition: opacity 0.4s ease;
}
/* no-JS / touch fallback: straighten + lift on hover */
.sys-card:hover .mock { transform: rotateY(0deg) rotateX(0deg); box-shadow: 0 42px 100px rgba(0, 0, 0, 0.62); }
.sys-card:hover .mock::after { opacity: 1; }
.mock__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
}
.mock__bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.mock__bar > i:first-child { background: color-mix(in srgb, var(--card-accent) 75%, transparent); }
.mock__bar span { margin-left: 0.6rem; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.05em; }
.mock__bar b { font-weight: 700; color: #f2eef4; }
.mock__bar em { font-style: normal; }
.mock__bar b .iq, .mock__bar b .tld { color: var(--brand-hi); }
.sys-card[data-tint="matrix"] .mock__bar b { color: #57faab; }
.sys-card[data-tint="arb"] .mock__bar b { color: #f0ebe1; }
.sys-card__name .tld { color: #c4954a; }
.mock__body { display: flex; gap: 1rem; padding: 1.1rem; min-height: 270px; }
/* Raspberry Compass — floor-plan request heatmap */
.mock__body--rw { flex-direction: column; gap: 0.8rem; }
.rw-chips { display: flex; gap: 0.4rem; }
.rw-chips span {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.28rem 0.62rem; border-radius: 99px;
  border: 1px solid var(--line); color: var(--muted);
}
.rw-chips span.on { background: rgba(255, 92, 138, 0.16); border-color: rgba(255, 92, 138, 0.5); color: #ffd5e2; }
.rw-plan { width: 100%; flex: 1; min-height: 0; display: block; }
.rw-wall { fill: none; stroke: rgba(236, 180, 200, 0.20); stroke-width: 1.5; }
.rw-room { stroke: rgba(236, 180, 200, 0.26); stroke-width: 1; transition: filter 0.4s ease; transform-box: fill-box; transform-origin: center; }
.rw-h1 { fill: rgba(140, 110, 126, 0.20); }
.rw-h2 { fill: rgba(196, 60, 110, 0.44); }
.rw-h3 { fill: rgba(232, 38, 94, 0.60); }
.rw-h4 { fill: rgba(255, 122, 162, 0.80); }
.rw-room--hot { animation: lhPulse 2.4s ease-in-out infinite; }
/* glow-only pulse (no opacity) so the reveal animation can control opacity freely */
@keyframes lhPulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 92, 138, 0.45)); }
  50% { filter: drop-shadow(0 0 9px rgba(255, 92, 138, 0.9)); }
}
.sys-card:hover .rw-room:not(.rw-room--hot) { filter: brightness(1.18); }
.rw-legend { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6rem; color: var(--muted); letter-spacing: 0.04em; }
.rw-scale { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(140, 110, 126, 0.55), rgba(232, 38, 94, 0.75), rgba(255, 157, 185, 0.9)); }

/* Labour Matrix — command centre + deadline horizon */
.mock__body--lm { flex-direction: column; gap: 1rem; }
.lm-stats { display: flex; gap: 0.7rem; }
.lm-stat { flex: 1; padding: 0.7rem 0.8rem; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); }
.lm-stat u { display: block; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: #e8f6ef; font-variant-numeric: tabular-nums; }
.lm-stat s { text-decoration: none; font-size: 0.58rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.lm-stat--hot u { color: #57faab; }
.lm-horizon { border: 1px solid var(--line); border-radius: 10px; padding: 0.85rem 0.9rem 1rem; background: rgba(255,255,255,0.02); }
.lm-horizon__label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.lm-track { position: relative; height: 30px; margin-top: 0.7rem; }
.lm-track::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: rgba(255,255,255,0.08); }
.lm-today { position: absolute; top: -2px; bottom: -2px; left: 8%; width: 2px; background: #57faab; box-shadow: 0 0 10px #57faab; }
.lm-dot { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); }
.lm-dot--ok { background: #16a34a; }
.lm-dot--soon { background: #d97706; }
.lm-dot--over { background: #dc2626; animation: lhPulse 2s ease-in-out infinite; }
.lm-cases { display: flex; flex-direction: column; gap: 0.5rem; }
.lm-case { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; border-radius: 8px; background: rgba(255,255,255,0.025); }
.lm-pill { width: 26px; height: 8px; border-radius: 4px; flex-shrink: 0; }
.lm-pill--ok { background: #57faab; }
.lm-pill--soon { background: rgba(217,119,6,0.85); }
.lm-case em { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.09); }
.lm-case b { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }

/* Raspberry IQ — seven domains sitting on one shared core.
   Deliberately unlike every other mock: those are single-product UIs, this one
   is the relationship between them, which is what the card claims. */
.mock__body--riq { flex-direction: column; gap: 0.95rem; justify-content: center; }
.riq-doms { display: flex; flex-wrap: wrap; gap: 0.38rem; }
.riq-dom { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; font-weight: 600; padding: 0.28rem 0.6rem; border-radius: 99px; border: 1px solid var(--line); color: #efe3ea; }
.riq-dom i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex-shrink: 0; }
.riq-dom--on { border-color: rgba(255,92,147,0.55); background: rgba(255,92,147,0.14); animation: lhPulse 2s ease-in-out infinite; }
.riq-core { border-top: 1px solid var(--line); padding-top: 0.75rem; }
.riq-core__label { display: block; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.55rem; }
.riq-core__rows { display: flex; flex-direction: column; gap: 0.48rem; }
.riq-row { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 0.7rem; }
.riq-row s { text-decoration: none; font-size: 0.68rem; color: #cbb9c3; }
.riq-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.07); position: relative; overflow: hidden; }
.riq-bar::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, #b81c53, #ff5c93); }

/* Arbitrating.ca — award analytics */
.mock__body--arb { flex-direction: column; gap: 1.2rem; justify-content: center; }
.arb-profile { display: flex; align-items: center; gap: 0.9rem; }
.arb-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 35% 30%, #edcb8b, #c4954a 72%); }
.arb-profile__t b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #f0ebe1; }
.arb-profile__t s { text-decoration: none; font-size: 0.68rem; color: var(--muted); }
.arb-bars { display: flex; flex-direction: column; gap: 0.75rem; }
.arb-bar { display: grid; grid-template-columns: 92px 1fr 36px; align-items: center; gap: 0.7rem; }
.arb-bar s { text-decoration: none; font-size: 0.7rem; color: var(--muted); }
.arb-bar b { height: 10px; border-radius: 5px; background: rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.arb-bar b::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, #a8792f, #deb97b); }
.arb-bar u { text-decoration: none; text-align: right; font-size: 0.72rem; font-weight: 700; color: #deb97b; font-variant-numeric: tabular-nums; }

/* ---------- statement (breath) ---------- */
.statement {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(6rem, min(14vw, 17.6vh), 11rem) var(--pad);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.statement::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 65% at 50% 50%, rgba(232, 38, 94, 0.13), transparent 72%);
}
.statement__line {
  position: relative; max-width: 22ch; margin: 0 auto;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, min(5.2vw, 6vh), 3.7rem); line-height: 1.16; letter-spacing: -0.01em;
  text-wrap: balance;
}
.statement__em { color: var(--accent-soft); }
.statement__dot { color: var(--accent); }

/* ---------- practice ---------- */
.practice { padding: clamp(5rem, min(10vw, 14.4vh), 9rem) 0; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.practice__grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 2.5vw, 2.4rem);
  align-items: stretch;
  padding: 0 var(--pad); max-width: var(--shell); margin: 0 auto;
}
.practice__col {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  background: linear-gradient(160deg, rgba(232, 38, 94, 0.05), transparent 55%);
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.practice__col:hover {
  border-color: rgba(232, 38, 94, 0.4); transform: translateY(-5px);
  box-shadow: 0 24px 60px -30px rgba(232, 38, 94, 0.5);
}
.practice__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--accent-dim); color: var(--accent-soft); margin-bottom: 1.5rem;
  transition: transform 0.4s ease, background 0.4s ease;
}
.practice__icon svg { width: 27px; height: 27px; }
.practice__col:hover .practice__icon { transform: translateY(-2px) scale(1.05); background: rgba(232, 38, 94, 0.2); }
.practice__col h3 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.12; margin-bottom: 1rem;
}
.practice__col p { color: var(--muted); margin-bottom: 1.8rem; }
.practice__list { display: flex; flex-direction: column; }
.practice__list li {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0; border-top: 1px solid var(--line);
  font-weight: 500; font-size: 0.98rem;
}
.practice__list li:first-child { border-top: none; }
.practice__ic { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; transition: transform 0.3s ease; }
.practice__list li:hover .practice__ic { transform: translateX(3px); }

/* the loop connector — advisory ⇄ product feed each other */
.practice__loop { display: flex; align-items: center; justify-content: center; }
.practice__loop-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px dashed rgba(232, 38, 94, 0.4);
  background: rgba(232, 38, 94, 0.06);
}
.practice__loop-ic { width: 26px; height: 26px; color: var(--accent-soft); animation: loopspin 9s linear infinite; }
@keyframes loopspin { to { transform: rotate(360deg); } }

/* ---------- how we work (process) ---------- */
.process { padding: clamp(5rem, min(10vw, 14.4vh), 9rem) 0; }
.process .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.process__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3.5rem);
  padding: 0 var(--pad); max-width: var(--shell); margin: 0 auto;
}
.step { position: relative; padding-top: 2rem; border-top: 1px solid var(--line); }
.step::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 42px; height: 2px; background: var(--accent);
}
.step__num {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, min(5vw, 6.4vh), 4rem); line-height: 1; color: var(--accent);
  margin-bottom: 1.2rem; font-variant-numeric: tabular-nums;
}
.step__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 0.8rem; line-height: 1.15;
}
.step__desc { color: var(--muted); }
@media (max-width: 760px) {
  .process__grid { grid-template-columns: 1fr; gap: 2.4rem; }
}

/* ---------- sticky mobile CTA ---------- */
.mobile-cta { display: none; }
@media (max-width: 960px) {
  .mobile-cta {
    display: flex; align-items: center; gap: 0.7rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    padding: 0.8rem var(--pad) calc(0.8rem + env(safe-area-inset-bottom, 0px));
    background: rgba(13, 6, 10, 0.82);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(120%); visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
  }
  .mobile-cta.is-visible { transform: translateY(0); visibility: visible; }
  .menu.open ~ .mobile-cta { transform: translateY(120%); visibility: hidden; }
}
.mobile-cta__btn {
  flex: 1; text-align: center; font-weight: 700; font-size: 0.98rem;
  color: #fff; background: var(--accent-btn); border-radius: 99px; padding: 0.9rem 1.2rem;
  box-shadow: 0 8px 28px -8px rgba(232, 38, 94, 0.6);
}
.mobile-cta__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--text); background: rgba(255, 255, 255, 0.03);
}
.mobile-cta__icon svg { width: 22px; height: 22px; }

/* ---------- interactive demo ---------- */
.demo { padding: clamp(4rem, min(8vw, 11.2vh), 7rem) 0 clamp(5rem, min(10vw, 12.8vh), 8rem); }
.demo .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* The frame used to cap at 1100 and centre itself while the section head above
   capped at the shell — so the head's text started 86px left of the frame's
   edge. Two width systems in one section, the same fault the Raspberry IQ hero
   had. One system now: the frame shares the shell and the head's left edge. */
.demo__frame {
  /* the shell MINUS the pad: .section-head and .sys-card carry --pad inside
     their 1400 box, so their content starts at 644 (@2560). Matching the raw
     shell would have put the frame's border 64px left of the card edges. */
  max-width: calc(var(--shell) - 2 * var(--pad)); margin: 0 auto;
  width: calc(100% - 2 * var(--pad));
  background: linear-gradient(150deg, var(--surface), var(--bg-2) 70%);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.demo__body { padding: clamp(1.6rem, 4vw, 3rem); }

.demo__track { display: flex; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.demo__stage {
  flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; color: var(--muted);
}
.demo__stage:not(:last-child)::after {
  content: ""; position: absolute; top: 10px; left: 50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0; transition: background 0.5s ease;
}
.demo__stage.is-past::after { background: var(--accent); }
.demo__dot {
  position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--bg-2);
  display: flex; align-items: center; justify-content: center; transition: all 0.4s ease;
}
.demo__stage.is-past .demo__dot { background: var(--accent); border-color: var(--accent); }
.demo__stage.is-past .demo__dot::after {
  content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.demo__stage.is-active .demo__dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-dim), 0 0 18px 2px rgba(232, 38, 94, 0.5);
}
.demo__stage-name { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; text-align: center; transition: color 0.3s ease; }
.demo__stage.is-active .demo__stage-name, .demo__stage.is-past .demo__stage-name, .demo__stage:hover .demo__stage-name { color: var(--text); }

.demo__detail {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, 0.02); margin-bottom: 1.6rem; min-height: 168px;
}
.demo__detail-num { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); font-weight: 700; }
.demo__detail-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0.5rem 0 0.6rem; }
.demo__detail-desc { color: var(--muted); }
.demo__sys { border-left: 1px solid var(--line); padding-left: clamp(1.2rem, 3vw, 2rem); }
.demo__sys-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.demo__sys-text { margin: 0.5rem 0 1rem; font-size: 0.96rem; }
.demo__meta {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600;
  color: var(--accent-soft); background: var(--accent-dim); border: 1px solid rgba(232, 38, 94, 0.3);
  border-radius: 99px; padding: 0.4rem 0.9rem;
}
.demo__meta svg { flex-shrink: 0; }
@keyframes demoSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.demo__detail.swap { animation: demoSwap 0.4s ease; }

.demo__controls { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.demo__btn {
  font-family: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  padding: 0.7rem 1.3rem; border-radius: 99px; border: 1px solid var(--line);
  background: transparent; color: var(--text); transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.demo__btn:hover:not(:disabled) { border-color: rgba(255, 92, 138, 0.6); }
.demo__btn--primary { background: var(--accent-btn); border-color: var(--accent-btn); color: #fff; box-shadow: 0 8px 24px -8px rgba(232, 38, 94, 0.6); }
.demo__btn--primary:hover:not(:disabled) { background: var(--accent-btn-hover); border-color: var(--accent-btn-hover); }
.demo__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.demo__note { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 1.5rem; padding: 0 var(--pad); }

@media (max-width: 640px) {
  .demo__track { flex-direction: column; align-items: stretch; }
  .demo__stage { flex-direction: row; gap: 0.9rem; align-items: center; padding: 0.5rem 0; }
  .demo__stage:not(:last-child)::after { top: 50%; left: 10px; width: 2px; height: 100%; }
  .demo__stage-name { text-align: left; }
  .demo__detail { grid-template-columns: 1fr; }
  .demo__sys { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.2rem; }
}

/* ---------- contact ---------- */
.contact { padding: clamp(6rem, min(13vw, 17.6vh), 11rem) var(--pad); max-width: var(--shell); margin: 0 auto; }
.contact__big {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3rem, min(10vw, 12.8vh), 8rem); line-height: 1.02; letter-spacing: -0.02em;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  width: fit-content;
}
.contact__big:hover .line--accent .line__inner {
  background: linear-gradient(100deg, #ff9db9, var(--accent-soft) 50%, var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.contact__body {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line); padding-top: clamp(2.4rem, 4vw, 3.4rem);
  align-items: start;
}
.contact__aside { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2rem; align-content: start; }
.contact__aside h3 {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.5rem; font-weight: 700;
}
.contact__aside a, .contact__aside span { font-weight: 500; font-size: 1.05rem; }
.contact__aside a { border-bottom: 1px solid transparent; transition: border-color 0.25s ease, color 0.25s ease; }
.contact__aside a:hover { color: var(--accent-soft); border-color: var(--accent-soft); }

/* ---------- contact form ---------- */
.cform { display: flex; flex-direction: column; gap: 1.1rem; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.cform__field { display: flex; flex-direction: column; gap: 0.5rem; }
.cform__field label {
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.cform__field label span { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.7; }
.cform__field input, .cform__field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--text);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  border-radius: 12px; padding: 0.85rem 1rem;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.cform__field textarea { resize: vertical; min-height: 7rem; }
.cform__field input::placeholder, .cform__field textarea::placeholder { color: var(--muted); }
.cform__field input:focus, .cform__field textarea:focus {
  outline: none; border-color: rgba(255, 92, 138, 0.6);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.cform__field input:user-invalid, .cform__field textarea:user-invalid { border-color: rgba(232, 38, 94, 0.55); }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__foot { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.3rem; }
.cform__submit { border: none; cursor: pointer; }
.cform.is-sending .cform__submit { opacity: 0.6; pointer-events: none; }
.cform__status { font-size: 0.95rem; color: var(--muted); margin: 0; }
.cform__privacy { font-size: 0.82rem; color: var(--muted); margin-top: 1.1rem; max-width: 34rem; line-height: 1.5; }
.cform__status.is-ok { color: #5ee39a; }
.cform__status.is-err { color: var(--accent-soft); }

/* ---------- proof / by the numbers ---------- */
.proof {
  padding: clamp(3rem, min(6vw, 8vh), 5rem) var(--pad);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.proof__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
}
.proof__stat {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding-left: 1.4rem; position: relative;
}
.proof__stat::before {
  content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 2px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  border-radius: 2px;
}
.proof__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, min(5.5vw, 6.8vh), 4.2rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.proof__label {
  font-size: 0.9rem; color: var(--muted); font-weight: 500; letter-spacing: 0.02em;
}

/* ---------- scroll progress bar ---------- */
.scrollbar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: rgba(255, 255, 255, 0.04); pointer-events: none;
}
.scrollbar__fill {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft) 60%, #ff9db9);
  box-shadow: 0 0 12px rgba(232, 38, 94, 0.6);
}

/* ---------- founder / about ---------- */
.founder { padding: clamp(5rem, min(10vw, 14.4vh), 9rem) var(--pad); background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.founder__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: minmax(240px, 0.75fr) 1.25fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.founder__frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, rgba(232, 38, 94, 0.16), rgba(21, 10, 16, 0.9) 65%);
  display: grid; place-items: center;
}
.founder__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder__initials {
  display: none; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3rem, 7vw, 5rem); color: var(--accent-soft); letter-spacing: 0.02em;
}
.founder__frame.is-empty .founder__initials { display: block; }
.founder__caption { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.founder__caption strong { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.founder__caption span { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.founder__lede { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--text); margin: 1.6rem 0 1.2rem; max-width: 40rem; }
.founder__text { color: var(--muted); margin-bottom: 1.1rem; max-width: 40rem; }
.founder__facts {
  display: grid; grid-template-columns: repeat(3, auto); gap: 1.6rem 2.6rem; justify-content: start;
  margin: 2rem 0; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.founder__facts li { display: flex; flex-direction: column; gap: 0.25rem; }
.founder__facts b { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--accent-soft); }
.founder__facts span { font-size: 0.82rem; color: var(--muted); max-width: 14rem; }
.founder__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: clamp(2.6rem, 5vw, 4rem) var(--pad) 2rem;
  color: var(--muted); font-size: 0.88rem;
}
.footer__top {
  max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr repeat(3, minmax(140px, 0.8fr)); gap: 2.4rem;
  padding-bottom: 2.4rem; border-bottom: 1px solid var(--line);
}
.footer__brand { display: flex; flex-direction: column; gap: 0.9rem; }
.footer__mark { width: 34px; height: 34px; display: block; }
.footer__blurb { max-width: 20rem; }
.footer__col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer__col-label {
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text); font-weight: 700; margin-bottom: 0.35rem;
}
.footer__col a { transition: color 0.25s ease; width: fit-content; }
.footer__col a:hover { color: var(--accent-soft); }
.footer__bottom {
  max-width: var(--shell); margin: 0 auto; padding-top: 1.6rem;
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; font-size: 0.82rem;
}
.footer__fine { margin-left: auto; font-style: italic; }

/* ---------- reveal helper ---------- */
.reveal { opacity: 0; transform: translateY(40px); }
html.no-js .reveal, html.reduced .reveal { opacity: 1; transform: none; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 960px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .sys-card { grid-template-columns: 1fr; min-height: 0; gap: 1.8rem; top: 76px; }
  /* info (logo + description) first, example mock below it */
  .mock { transform: none; }
  .mock__body { min-height: 200px; }
  .practice__grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .founder__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .founder__portrait { max-width: 280px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .practice__loop { padding: 0.4rem 0; }
  .hero__inner { margin-left: 0; }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .hero__scroll { display: none; }
  .hero__canvas { opacity: 0.55; }
  .proof__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .contact__body { grid-template-columns: 1fr; gap: 2.4rem; }
}

@media (max-width: 520px) {
  body { font-size: 1rem; }
  .founder__facts { grid-template-columns: 1fr; gap: 1.1rem; }
  .footer__top { grid-template-columns: 1fr; gap: 1.8rem; }
  .stat { min-width: 40%; }
  .cell:nth-child(n+10) { display: none; }
  .sys-card { padding: 1.3rem; margin-bottom: 2rem; }
  .cform__row { grid-template-columns: 1fr; }
  .contact__aside { gap: 1.4rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .grain { animation: none; }
  html { scroll-behavior: auto; }
}