/* Self-hosted subset of Manrope + Inter (latin, latin-ext).
   Downloaded from Google Fonts; SIL Open Font License 1.1. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   Loto Group — landing.
   One screen: what we do, one proof point, a contact form. Nothing else.
   Shares the brand tokens and contrast rules of styles.css; see that file
   and docs/LOTO_LANDING.md for why the amber is never text on a light
   surface (1.93:1) and #835500 is used instead (6.13:1).
   ========================================================================== */

:root {
  --amber: #f5a623;
  --amber-ink: #835500;
  --amber-wash: #fef6e9;
  --charcoal: #2f3336;
  --ink: #1b1c1c;
  --ink-muted: #524534;
  --teal: #02687b;
  --surface: #fbf9f8;
  --line: #e6ded4;
  --line-strong: #d7c3ae;

  --font-heading: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* The page is one screen: a column that fills the viewport and centres its
     content, so on a laptop there is nothing below the fold to scroll to. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 5vw, 3.5rem);
  gap: clamp(1.5rem, 3vh, 2.5rem);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Decorative amber wash, bottom-left, behind everything. */
body::before {
  content: '';
  position: fixed;
  left: -12vw;
  bottom: -18vw;
  width: 46vw;
  height: 46vw;
  max-width: 560px;
  max-height: 560px;
  background: radial-gradient(circle at 50% 50%, rgb(245 166 35 / 15%), transparent 64%);
  pointer-events: none;
  z-index: -1;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--teal); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 10;
  padding: 0.6rem 1.1rem;
  background: var(--charcoal);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* -------------------------------------------------------------- header -- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
}
.top img { width: 116px; height: 39px; object-fit: contain; }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
}
.lang:hover { color: var(--ink); border-color: var(--charcoal); }

/* ---------------------------------------------------------------- main -- */

main {
  flex: 1;
  display: grid;
  /* Pitch on the left, form on the right — side by side so both are on
     screen at once rather than stacked into a scroll. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  align-content: center;
  max-width: 1120px;
  width: 100%;
  margin-inline: auto;
}

/* --------------------------------------------------------------- pitch -- */

h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 800;
}
h1 em { font-style: normal; color: var(--amber-ink); }

.what {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
  padding: 0;
  list-style: none;
}
.what li {
  padding: 0.3rem 0.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ------------------------------------------------------------- proof ---- */

.proof {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.proof__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber-ink);
}

.proof__lead { margin-top: 0.5rem; font-size: 0.97rem; color: var(--ink-muted); }
.proof__lead strong {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink);
}

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.figures div {
  font-family: var(--font-heading);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.figures span { font-size: 0.78rem; color: var(--ink-muted); }

/* ---------------------------------------------------------------- form -- */

.form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  box-shadow: 0 4px 14px rgb(27 28 28 / 6%), 0 20px 44px rgb(27 28 28 / 7%);
}
.form h2 { font-size: 1.3rem; font-weight: 800; }
.form__intro { margin-top: 0.35rem; font-size: 0.88rem; color: var(--ink-muted); }

.field { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.9rem; }
.field label { font-size: 0.83rem; font-weight: 600; }

.field input,
.field textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:hover, .field textarea:hover { border-color: var(--charcoal); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgb(2 104 123 / 18%);
}
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: #ba1a1a;
  box-shadow: 0 0 0 3px rgb(186 26 26 / 14%);
}
.field__error { font-size: 0.79rem; font-weight: 500; color: #93000a; }
.field__error:empty { display: none; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.submit {
  width: 100%;
  margin-top: 1.2rem;
  padding: 0.78rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--charcoal);
  color: #fff;               /* 12.75:1 */
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.submit:hover { background: #1f2325; }
.submit:disabled { opacity: 0.6; cursor: progress; }

.form__status { margin-top: 0.8rem; font-size: 0.87rem; font-weight: 500; }
.form__status:empty { display: none; }
.form__status[data-state='ok'] { color: #14532d; }
.form__status[data-state='error'] { color: #93000a; }

/* -------------------------------------------------------------- footer -- */

.foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--ink-muted);
}
.foot a { color: var(--ink-muted); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

/* ---------------------------------------------------------- responsive -- */

/* Below this the two columns cannot both be readable, so they stack. The
   page then scrolls — unavoidable on a phone, but it is still only about
   one and a half screens. */
@media (max-width: 880px) {
  main { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2rem; }
  body { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------ 404 page -- */

.notfound h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; margin-top: 0.6rem; }
.notfound p { margin-top: 0.9rem; color: var(--ink-muted); }
.notfound .lang { margin-top: 1.6rem; }
.notfound main { grid-template-columns: minmax(0, 1fr); }

/* Brand names that must never break across a line. The hyphen in "Bre-B"
   is a normal hyphen so the text stays searchable; only the wrap is blocked. */
.nb { white-space: nowrap; }

/* Short labels are single tokens conceptually; never break them. */
.what li, .figures div { white-space: nowrap; }