@font-face {
  font-family: Geist;
  src: url('/assets/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Serentra / shadcn neutral dark tokens; red is the J.A.B brand accent.
   Anchor buttons adapt Serentra's base-nova Button styles without a JS runtime. */
:root {
  color-scheme: dark;
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --border: oklch(1 0 0 / 10%);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --ring: oklch(0.556 0 0);
  --brand: #b91c1c;
  --radius: .625rem;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--foreground); font: 400 14px/1.5 Geist, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; border-radius: var(--radius); }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.page { position: relative; z-index: 1; max-width: 1440px; margin: auto; min-height: 100svh; padding: 0 64px; display: flex; flex-direction: column; }
.header { display: flex; align-items: center; justify-content: space-between; min-height: 104px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
.brand-mark { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius); background: #fafafa; }
.button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background-color 150ms; }
.button-outline { border-color: var(--border); background: var(--card); }
.button-outline:hover { background: var(--muted); }
.button-primary { background: var(--primary); color: var(--primary-foreground); }
.button-primary:hover { background: color-mix(in oklch, var(--primary) 80%, transparent); }
main { flex: 1; display: flex; align-items: center; padding: 40px 0; }
.intro { max-width: 560px; }
.eyebrow { margin: 0 0 20px; color: var(--muted-foreground); font-size: 14px; }
h1 { margin: 0; font-size: 80px; line-height: .98; font-weight: 650; letter-spacing: -.045em; overflow-wrap: anywhere; }
.description { max-width: 360px; color: var(--muted-foreground); font-size: 16px; line-height: 1.75; margin: 24px 0 32px; }
.actions { display: flex; align-items: center; gap: 8px; }
footer { padding: 20px 0 24px; color: var(--muted-foreground); font-size: 12px; }
.contact-links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.contact-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.contact-links a:hover { color: var(--foreground); }
.copyright { display: flex; justify-content: space-between; gap: 16px; margin: 12px 0 0; font-size: 12px; }
.skip-link { position: absolute; top: 8px; left: 8px; padding: 12px; background: var(--foreground); color: var(--background); transform: translateY(-150%); z-index: 1; }
.skip-link:focus { transform: translateY(0); }
@media (min-width: 1440px) { h1 { font-size: 96px; } }
@media (max-width: 900px) {
  .page { padding: 0 32px; }
  main { gap: 32px; }
  h1 { font-size: 48px; }

}
@media (max-width: 640px) {
  .page { padding: 0 24px; }
  .header { min-height: 80px; }
  main { display: flex; align-items: center; padding: 32px 0; }

  h1 { font-size: 48px; }
  .description { margin: 20px 0 24px; }
  .contact-links { gap: 0 20px; }
  .copyright { margin-top: 12px; }
  .copyright span { display: none; }
  footer { padding: 12px 0 20px; }
}
@media (max-width: 360px) { h1 { font-size: 36px; } .page { padding: 0 20px; } }
/* Decorative layers stay behind content and cannot intercept links.
   The entrance settles within five seconds; no perpetual distraction. */
.atmosphere { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.glow { position: absolute; inset: -15%; background: radial-gradient(ellipse at 80% 40%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 55%), radial-gradient(ellipse at 10% 95%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 45%); animation: ambient-arrive 4.5s ease-out both; }
.grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 80px 80px; opacity: .22; mask-image: radial-gradient(ellipse at 75% 45%, black, transparent 70%); }
.intro { animation: content-arrive 900ms ease-out both; }
@keyframes ambient-arrive { from { opacity: 0; transform: translate(4%, 3%) scale(.95); } to { opacity: 1; transform: translate(0) scale(1); } }
@keyframes content-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } .glow, .intro { animation: none; } }

/* Full-bleed product artwork, with a quiet reading area on the left. */
.product-visual { position: fixed; inset: 0 0 0 28%; overflow: hidden; pointer-events: none;
  /* Fade the whole layer, including its overlays, into the shared red glow.
     An opaque overlay alone leaves a visible seam at the image boundary. */
  mask-image: linear-gradient(90deg, transparent, black 48%), linear-gradient(180deg, transparent, black 22%, black 74%, transparent);
  mask-composite: intersect;
}
.product-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.product-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--background), transparent 65%), linear-gradient(180deg, var(--background) 14%, transparent 40%, transparent 72%, var(--background) 100%); }
.header { position: relative; }
.description { max-width: 325px; margin-bottom: 20px; }
.product-types { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0 0 28px; color: var(--muted-foreground); font-size: 12px; }
.product-types li { display: flex; align-items: center; gap: 8px; }
.product-types li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }

@media (min-width: 641px) and (max-height: 780px) { h1 { font-size: 64px; } .eyebrow { margin-bottom: 12px; } main { padding: 24px 0; } }
@media (max-width: 900px) { .product-visual { left: 25%; opacity: .8; } }
@media (max-width: 640px) {
  .product-visual { left: 0; opacity: .6; mask-image: linear-gradient(180deg, transparent, black 35%, black 75%, transparent); mask-composite: add; }
  .product-visual img { object-position: 65% center; }
  .product-visual::after { background: linear-gradient(90deg, var(--background), color-mix(in srgb, var(--background) 40%, transparent)), linear-gradient(180deg, var(--background) 28%, transparent 52%, var(--background)); }
  h1 { font-size: 60px; }
  .description { max-width: 285px; font-size: 14px; }
  .eyebrow { margin-bottom: 16px; }
  main { padding: 24px 0; }
  .product-types { margin-bottom: 24px; }
}
@media (max-width: 360px), (max-height: 650px) {
  h1 { font-size: 44px; }
  .eyebrow { display: none; }
  .description { margin: 16px 0; }
  .product-types { margin-bottom: 20px; }
  main { padding: 20px 0; }
}