/* =========================================================================
   636 Promotions — Landing Page
   Static CSS · custom properties · @layer for cascade discipline
   ========================================================================= */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/outfit-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('assets/fonts/big-shoulders-display-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Trirong';
  src: url('assets/fonts/trirong-300-latin.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --bg: #09090b;
  --bg-elev: #0e0e10;
  --bg-elev-2: #131316;

  --text: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-dim: #52525b;

  --accent: #1a8a8a;
  --accent-soft: rgba(26, 138, 138, 0.18);
  --accent-rok: #EA580C;
  --accent-dev: #d4a843;
  --danger: #f87171;

  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --hairline-bright: rgba(255, 255, 255, 0.28);

  --font-display: 'Big Shoulders Display', 'Outfit', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-italic: 'Trirong', Georgia, serif;

  --max-width: 1320px;
  --gutter: clamp(24px, 4vw, 56px);
  --header-h: 72px;
  --section-pad: clamp(96px, 12vh, 144px);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Always reserve space for the vertical scrollbar so layout doesn't shift
     between long pages (home, has scrollbar) and short pages (terms /
     privacy, no scrollbar). Without this, the body content was ~15px wider
     on subpages, throwing off header/footer alignment. */
  scrollbar-gutter: stable;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--accent); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

/* --- Utility primitives -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.mono-label--dim { color: var(--text-dim); }
.mono-label--accent { color: var(--accent); }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.section-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 28px;
}

/* Status dot pulse */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  display: inline-block;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

/* Fade-in (JS adds .is-visible) */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in.is-visible {
  opacity: 1;
  transform: none;
}
.fade-in.stagger-1 { transition-delay: 80ms; }
.fade-in.stagger-2 { transition-delay: 160ms; }
.fade-in.stagger-3 { transition-delay: 240ms; }
.fade-in.stagger-4 { transition-delay: 320ms; }

/* CTA buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 220ms ease;
  white-space: nowrap;
  background: transparent;
  color: var(--text);
}
.btn--primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}
.btn--secondary {
  border-color: var(--hairline-strong);
  color: var(--text);
}
.btn--secondary:hover {
  border-color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.btn--ghost {
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--text);
  border-radius: 0;
  color: var(--text);
}
.btn--ghost:hover { color: var(--accent); border-color: var(--accent); }

.btn .arrow { font-size: 12px; line-height: 1; transition: transform 220ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 220ms ease, border-color 220ms ease, transform 300ms ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(9, 9, 11, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--hairline);
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
.site-header__inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-header__brand img { height: 34px; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.site-nav a:not(.btn) {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 200ms ease;
}
.site-nav a:not(.btn):hover { color: var(--text); }

.site-nav .btn {
  padding: 9px 16px;
  font-size: 10.5px;
  white-space: nowrap;
  flex-shrink: 0;
  gap: 10px;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  z-index: 110;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: transform 300ms ease, opacity 300ms ease;
}
.is-menu-open .hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.is-menu-open .hamburger span:nth-child(2) { opacity: 0; }
.is-menu-open .hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =========================================================================
   Hero — Cinematic Manifesto (Direction 3)
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 32px) var(--gutter) var(--section-pad);
  overflow: hidden;
  isolation: isolate;
}

/* Right-side zen circle anchor — slowly rotating, breathing illumination */
.hero__anchor {
  position: absolute;
  top: 50%;
  right: clamp(-360px, -18vw, -200px);
  transform: translateY(-50%);
  width: clamp(520px, 64vw, 980px);
  height: clamp(520px, 64vw, 980px);
  pointer-events: none;
  z-index: -1;
}
.hero__anchor img {
  width: 100%;
  height: 100%;
  opacity: 0.32;
  filter: contrast(1.05) brightness(1.15);
  transform-origin: center;
  animation:
    zen-rotate 180s linear infinite,
    zen-image-breathe 9s ease-in-out infinite;
}
.hero__anchor-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(26, 138, 138, 0.18) 0%, transparent 55%);
  filter: blur(28px);
  transform-origin: center;
  animation: zen-glow-breathe 9s ease-in-out infinite;
}
/* Inner brighter core — counter-rhythm so the light feels alive */
.hero__anchor::after {
  content: '';
  position: absolute;
  inset: 22%;
  background: radial-gradient(circle at center, rgba(26, 138, 138, 0.30) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  animation: zen-core-pulse 6s ease-in-out infinite;
}

@keyframes zen-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes zen-image-breathe {
  0%, 100% { opacity: 0.28; filter: contrast(1.05) brightness(1.05); }
  50%      { opacity: 0.40; filter: contrast(1.15) brightness(1.3); }
}
@keyframes zen-glow-breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes zen-core-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.95); }
  50%      { opacity: 0.95; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__anchor img,
  .hero__anchor-glow,
  .hero__anchor::after { animation: none; }
}

/* Left-side vignette so type stays legible over the circle */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    rgba(9, 9, 11, 0.85) 30%,
    rgba(9, 9, 11, 0.5) 55%,
    transparent 80%
  );
  z-index: -1;
  pointer-events: none;
}

/* Optional grain overlay */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.hero__top-meta {
  position: absolute;
  top: calc(var(--header-h) + 24px);
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero__top-meta::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--text-dim);
}
.hero__top-meta span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hero__ledger {
  position: absolute;
  top: calc(var(--header-h) + 24px);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.hero__content {
  position: relative;
  max-width: 1080px;
  z-index: 2;
}

.hero__brandline {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 32px;
}

.hero__quote {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 5.4vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--text);
  max-width: 980px;
  text-wrap: pretty;
}
.hero__quote-mark {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  font-size: 0.55em;
  color: var(--text-dim);
  vertical-align: top;
  margin-right: 0.18em;
  display: inline-block;
  transform: translateY(0.05em);
}
.hero__quote-emphasis {
  color: var(--accent);
}

.hero__signature {
  margin-top: clamp(36px, 5vh, 64px);
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero__signature::before {
  content: '';
  width: 48px;
  height: 1px;
  background: var(--hairline-strong);
}
.hero__signature span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hero__ctas {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.hero__bottom {
  position: absolute;
  bottom: 28px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
.hero__scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero__scroll-cue svg circle {
  animation: scroll-dot 2.4s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(5px); opacity: 0.3; }
}

/* =========================================================================
   About
   ========================================================================= */
.about {
  position: relative;
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--hairline);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}

.about__principles {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}
.principle__n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.principle__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}
.principle__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.about__body p {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 640px;
  text-wrap: pretty;
}
.about__body p + p { margin-top: 20px; }
.about__body strong {
  color: var(--text);
  font-weight: 400;
}

/* =========================================================================
   Products — Direction 4 board, expanded full-width rows
   ========================================================================= */
.products {
  position: relative;
  padding: var(--section-pad) 0;
  border-top: 1px solid var(--hairline);
}

.products__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.products__header-text {
  max-width: 720px;
}
.products__header .section-heading { margin-bottom: 0; }
.products__count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  align-self: flex-end;
}

/* -----------------------------------------------------------------------
   Product panel — full-width spec sheet
   Three vertical bands: top bar / hero (visual + content) / feature strip.
   ----------------------------------------------------------------------- */
.product-panel {
  --accent-product: var(--accent);
  position: relative;
  border-top: 1px solid var(--hairline);
}
.product-panel:last-child { border-bottom: 1px solid var(--hairline); }

/* Per-product accent */
.product-panel--rok { --accent-product: var(--accent-rok); }
.product-panel--impactcheck { --accent-product: var(--accent-dev); }

/* -- Top bar ---------------------------------------------------------- */
.product-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.product-panel__bar-left,
.product-panel__bar-right {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.product-panel__index {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--accent-product);
}
.product-panel__kind {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  position: relative;
}
.product-panel__kind::before {
  content: '·';
  margin-right: 18px;
  color: var(--text-dim);
}
.product-panel__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.product-panel__status .status-dot { color: var(--accent-product); }
.product-panel__status span:last-child {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
}
.product-panel__cta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--hairline-strong);
  transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
}
.product-panel__cta:hover {
  color: var(--accent-product);
  border-color: var(--accent-product);
  background: color-mix(in srgb, var(--accent-product) 8%, transparent);
}
.product-panel__cta .arrow { transition: transform 220ms ease; }
.product-panel__cta:hover .arrow { transform: translateX(4px); }

/* -- Hero row: visual + content ------------------------------------- */
.product-panel__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 440px;
}
.product-panel--reversed .product-panel__hero {
  grid-template-columns: 1fr 1fr;
}

/* Visual is a borderless ambient surface — the logo lives directly on
   the page, lit by a radial glow. No card. No box. The vertical hairline
   between visual and content stays as a quiet structural element. */
.product-panel__visual {
  position: relative;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--hairline);
}
.product-panel--reversed .product-panel__visual {
  border-right: none;
  border-left: 1px solid var(--hairline);
}
.product-panel__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--accent-product) 0%, transparent 65%);
  opacity: 0.20;
  transition: opacity 700ms ease;
}
.product-panel__visual::after {
  /* Very faint dotted plane — only where the glow is. */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 12%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 12%, transparent 65%);
  pointer-events: none;
}
.product-panel:hover .product-panel__visual::before { opacity: 0.32; }
.product-panel__visual img,
.product-panel__visual svg {
  position: relative;
  z-index: 1;
  max-width: 58%;
  max-height: 62%;
  width: auto;
  height: auto;
  transition: transform 800ms ease;
  filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.7));
}
.product-panel:hover .product-panel__visual img,
.product-panel:hover .product-panel__visual svg { transform: scale(1.04); }

/* Hide the bordered-card chrome — corner ticks and version label belong
   to a framed treatment, not this ambient one. */
.product-panel__visual span.tick,
.product-panel__visual-label {
  display: none;
}

/* Content side */
.product-panel__content {
  padding: 36px clamp(36px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.product-panel__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.75rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 0.95;
  margin: 0 0 20px;
}
.product-panel__tagline {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.35;
  color: var(--text);
  margin: 0 0 22px;
  padding-left: 16px;
  border-left: 2px solid var(--accent-product);
}
.product-panel__desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 28px;
  max-width: 540px;
}

.product-panel__meta {
  display: flex;
  gap: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  margin: 0;
  flex-wrap: wrap;
}
.product-panel__meta > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.product-panel__meta dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.product-panel__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

/* -- Feature strip --------------------------------------------------- */
.product-panel__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
}
.feature-cell {
  padding: 30px clamp(20px, 2.5vw, 36px) 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--hairline);
  position: relative;
  transition: background 280ms ease;
}
.feature-cell:last-child { border-right: none; }
.feature-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 2px;
  background: var(--accent-product);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 360ms ease;
}
.feature-cell:hover { background: rgba(255,255,255,0.012); }
.feature-cell:hover::before { transform: scaleX(1); }

.feature-cell__n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.feature-cell__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.15;
  margin: 0;
}
.feature-cell__body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* =========================================================================
   Contact
   ========================================================================= */
.contact {
  position: relative;
  padding: var(--section-pad) 0;
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}
.contact__intro p:not(.section-label) {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 420px;
}
.contact__details {
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact__detail-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: baseline;
}
.contact__detail-row dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.contact__detail-row dd {
  font-size: 14px;
  color: var(--text);
  margin: 0;
}
.contact__detail-row dd a {
  color: var(--text);
  border-bottom: 1px solid var(--text-dim);
  transition: color 200ms ease, border-color 200ms ease;
}
.contact__detail-row dd a:hover { color: var(--accent); border-color: var(--accent); }

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field input,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  transition: border-color 220ms ease;
  font-weight: 300;
}
/* Defeat Chrome/Safari autofill's forced opaque background so atmospheric
   paths stay visible behind the form. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active,
.field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 600000s 0s, color 600000s 0s;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-dim);
  font-weight: 300;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
  /* Hide the UA resize handle's chrome lines so they don't read as an
     overlay on top of the atmospheric path thread. */
  background-image: none;
}
.field.is-invalid input,
.field.is-invalid textarea {
  border-bottom-color: var(--danger);
}
.field__error {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--danger);
}
.field.is-invalid .field__error { display: block; }

.contact-form__actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.contact-form__msg {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  display: none;
}
.contact-form__msg--success { color: var(--accent); }
.contact-form__msg--error { color: var(--danger); }
.contact-form__msg.is-visible { display: inline-flex; align-items: center; gap: 10px; }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================================
   Contact bottom mark — large watermark as the BACKGROUND of the lower
   portion of contact. The form sits on top; the mark band is tied to the
   form by a soft fade so there is no hard line between them.
   ========================================================================= */
.contact {
  /* Tighter bottom padding so the form ends closer to the mark band. */
  padding-bottom: clamp(48px, 6vh, 80px);
}
.contact__mark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(340px, 38vh, 440px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
/* Halo is centered behind the mark; its radial fade carries the glow into
   the surrounding page without a hard edge at the top of contact. */
.contact__mark-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(420px, 48vw, 600px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.02) 35%,
    transparent 70%
  );
  filter: blur(10px);
}
.contact__mark img {
  position: relative;
  height: clamp(220px, 28vw, 320px);
  width: auto;
  opacity: 0.16;
  filter: contrast(1.1) brightness(1.55);
}
.contact .container { position: relative; z-index: 1; }

/* =========================================================================
   Footer — single-row ledger
   ========================================================================= */
.site-footer {
  position: relative;
  border-top: 1px solid var(--hairline);
  padding: 22px 0;
  background: var(--bg);
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px 40px;
  flex-wrap: nowrap;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.site-footer__copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 0;
  white-space: nowrap;
}
.site-footer__loc {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
  white-space: nowrap;
  padding-left: 18px;
  border-left: 1px solid var(--hairline);
}
.site-footer__links {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: nowrap;
}
.site-footer__links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease;
}
.site-footer__links a:hover { color: var(--text); }

@media (max-width: 860px) {
  .site-footer__inner { flex-wrap: wrap; }
  .site-footer__loc {
    padding-left: 0;
    border-left: none;
  }
}

/* =========================================================================
   Page flow — a single thread of elegant wavy lines drifting down the page
   below the hero. Sits behind all post-hero content via z-index: 0; section
   contents (.container, etc.) sit on top via z-index: 1.
   ========================================================================= */
.about, .contact, .products { position: relative; overflow: hidden; }
.about__container,
.contact .container,
.products .container { position: relative; z-index: 1; }

.page-flow {
  position: absolute;
  left: 0;
  right: 0;
  /* top + height set by JS — runs from the bottom of the hero to the bottom
     of the page so the thread feels continuous across every section. */
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.page-flow::after {
  /* Soft fade at the very far left/right edges so the thread softly enters
     and exits the canvas rather than touching the bezel. */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    transparent 6%,
    transparent 94%,
    var(--bg) 100%
  );
}
.page-flow__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--text);
  display: block;
}

@keyframes flow-drift {
  to { stroke-dashoffset: -2; }
}

@media (prefers-reduced-motion: reduce) {
  .page-flow__svg { animation: none !important; }
  .page-flow__svg path { animation: none !important; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 960px) {
  .about__grid,
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .about__principles { grid-template-columns: 1fr; gap: 24px; }

  /* Product feature cells stay horizontal at narrow widths, scrolling
     instead of stacking. Each cell is 80% of viewport so the next one
     peeks at the right edge as a "more" cue. Scroll-snap makes the
     swipe feel intentional. */
  .product-panel__features {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-panel__features::-webkit-scrollbar { display: none; }
  .feature-cell {
    flex: 0 0 80%;
    scroll-snap-align: start;
    /* keep the desktop's vertical hairlines between cells */
  }
}

/* Product panel stays side-by-side down to ~720px,
   then stacks (logo on top, content below). */
@media (max-width: 720px) {
  .product-panel__hero,
  .product-panel--reversed .product-panel__hero {
    grid-template-columns: 1fr;
  }
  .product-panel__visual {
    aspect-ratio: 16 / 10;
    min-height: 0;
    width: 100%;
    margin: 0;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
  .product-panel--reversed .product-panel__visual {
    order: -1;
    border-left: none;
    border-bottom: 1px solid var(--hairline);
  }
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }

  /* Hero no longer forces full-viewport height on phones. min-height:100vh
     on tall Android phones left huge empty space above/below the short
     quote+signature block; sizing to content reads correctly. */
  .hero { min-height: auto; }

  /* Zen circle anchor: keep large enough to extend past the viewport
     edge (matches the desktop "scales off-screen" feel). The teal
     radial gradient gets its alpha dropped instead, so the green
     tint stays subtle without shrinking the circle. */
  .hero__anchor {
    width: clamp(440px, 120vw, 600px);
    height: clamp(440px, 120vw, 600px);
    right: clamp(-220px, -30vw, -100px);
  }
  .hero__anchor-glow {
    background: radial-gradient(circle at center, rgba(26, 138, 138, 0.08) 0%, transparent 55%);
  }

  /* Page-flow paths run nearly vertical on narrow viewports (the
     horizontal span is fixed but vertical span scales with content
     height). Keep them visible but quiet so they don't compete
     with reading. */
  .page-flow { opacity: 0.45; }

  /* Footer: stack vertically and let the copy wrap so the full
     "All rights reserved." text fits on narrow phones. */
  .site-footer__brand { flex-direction: column; gap: 8px; text-align: center; }
  .site-footer__copy { white-space: normal; line-height: 1.5; }

  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(9, 9, 11, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    z-index: 90;
  }
  .site-nav.is-open a:not(.btn) { font-size: 14px; }
  .hamburger { display: flex; }

  .hero__top-meta,
  .hero__ledger { display: none; }
  .hero { padding-top: calc(var(--header-h) + 48px); padding-bottom: 96px; }
  .hero__quote { font-size: 2.1rem; line-height: 1.12; }
  .hero__bottom { position: static; margin-top: 48px; }
  .hero__bottom .hero__scroll-cue { display: none; }

  .products__header { margin-bottom: 48px; }
  .product-panel__bar { padding: 18px 0; gap: 12px; }
  .product-panel__bar-left,
  .product-panel__bar-right { gap: 16px; }
  .product-panel__kind::before { display: none; }
  .product-panel__content { padding: 36px 24px; }
  .product-panel__tagline { font-size: 1.125rem; }
  .feature-cell { padding: 24px 20px 26px; }

  .contact__detail-row { grid-template-columns: 1fr; gap: 4px; }
  .contact__detail-row dt { margin-bottom: 0; }

  .site-footer__inner { flex-direction: column; text-align: center; }
}