/* Absolute Baits / shared design system / v24 unified turquoise palette
   Every page loads this file BEFORE styles.css. See DESIGN-SYSTEM.md. */
/* Local fallback keeps headings bold while the webfont is unavailable.
   Self-hosted webfont declarations and SIL OFL files: fonts.css, assets/fonts/. */
@font-face {
  font-family: "AB Heading Fallback";
  src: local("Arial Black"), local("DejaVu Sans Bold");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --font-heading: "Russo One", "AB Heading Fallback", "Arial Black", sans-serif;
  --font-body: "Manrope", Arial, sans-serif;
  --text-h1: clamp(2.5rem, 1.611rem + 2.222vw, 4.5rem);
  --text-h2: clamp(2rem, 1.556rem + 1.111vw, 3rem);
  --text-h3: 1.25rem;
  --text-lead: clamp(1.125rem, 1.069rem + .139vw, 1.25rem);
  --text-body: 1rem;
  --text-small: .875rem;
  --text-label: .875rem;
  --text-eyebrow: .75rem;
  --text-button: .875rem;
  --text-price: 1.5rem;
  /* Shared motion tokens, all later pages use these exact timings. */
  --motion-duration: 520ms;
  --motion-distance: 20px;
  --motion-stagger: 65ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --line-heading: 1.14;
  --line-body: 1.6;
  --ink: #061015;
  --ink-deep: #020a0d;
  --white: #f8fbfc;
  --surface: #f4f7f8;
  --muted: #b7c5cb;
  --text-on-light: #102127;
  --text-muted-on-light: #46565e;
  /* v24: one turquoise accent palette for all pages, captions, navigation and controls. */
  --accent: #00e4e4;
  --accent-soft: #89ffff;
  --accent-on-light: #006e77;
  --accent-rgb: 0 228 228;
  --accent-on-light-rgb: 0 110 119;
  /* Headings and other accent roles share the same palette. */
  --heading-accent: var(--accent);
  --heading-accent-on-light: var(--accent-on-light);
  --cyan: var(--accent);
  --cyan-soft: var(--accent-soft);
  --cyan-on-light: var(--accent-on-light);
  --amber: #ffac12;
  --amber-on-light: #946000;
  --border-light: #d8e2e5;
  --container-max: 1760px;
  --gutter: clamp(1.25rem, 4.167vw, 5rem);
  --container-size: min(var(--container-max), calc(100% - 2 * var(--gutter)));
  --section-space: clamp(3.5rem, 2.389rem + 2.778vw, 6rem);
  --grid-gap: 1.5rem;
  --card-padding: 1.5rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-card: 1rem;
  --radius-control: .5rem;
  --button-height: 3.25rem;
  --header-height: 104px;
  --shadow-card: 0 12px 32px rgb(3 21 28 / 8%);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  scrollbar-color: var(--accent) var(--ink);
}
html::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: var(--radius-card); }
html::-webkit-scrollbar-track { background-color: var(--ink); }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--white); font: 500 var(--text-body) / var(--line-body) var(--font-body); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; line-height: var(--line-heading); letter-spacing: -.025em; }
h1, .display-title { font-size: var(--text-h1); }
h2, .section-title { font-size: var(--text-h2); }
h3, .card-title { font-size: var(--text-h3); }
.section-title, .card-title { text-transform: uppercase; }
em { font-style: normal; }
h1 em, h2 em { color: var(--heading-accent); }
.container { width: var(--container-size); margin-inline: auto; }
.section-pad { padding-block: var(--section-space); }
.lead { max-width: 48ch; font-size: var(--text-lead); line-height: 1.55; }
.eyebrow { font: 800 var(--text-eyebrow) / 1.5 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
.button {
  --button-accent: var(--cyan);
  display: inline-flex; align-items: center; justify-content: center; gap: 20px;
  min-height: var(--button-height); max-width: 100%; padding: 12px 24px;
  border: 1.5px solid var(--button-accent); border-radius: 999px;
  background: rgb(3 16 21 / 94%); color: var(--white);
  box-shadow: 0 0 18px rgb(var(--accent-rgb) / 12%);
  font: 800 var(--text-button) / 1.35 var(--font-body); text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.button:hover { background: #103039; box-shadow: 0 0 22px rgb(var(--accent-rgb) / 20%); transform: translateY(-2px); }
.button--amber { --button-accent: var(--amber); box-shadow: 0 0 18px rgb(255 172 18 / 10%); }
.button--secondary { --button-accent: #70878f; box-shadow: none; background: rgb(3 16 21 / 54%); }
.arrow { position: relative; display: inline-block; flex: 0 0 25px; width: 25px; height: 16px; color: var(--button-accent, currentColor); }
.arrow::before { content: ""; position: absolute; width: 24px; height: 2px; top: 7px; right: 0; background: currentColor; }
.arrow::after { content: ""; position: absolute; width: 8px; height: 8px; top: 4px; right: 0; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
@media (max-width: 767px) {
  :root { --gutter: 1.25rem; --grid-gap: 1rem; --card-padding: 1.25rem; --header-height: 80px; --button-height: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

[hidden] { display: none !important; }