/* Colours and type from the Occasy brand guide (Inkpot, Oct 2026). Retro Voice replaces --heading once licensed. */
@font-face { font-family: "Gantari"; src: url("/fonts/Gantari-VariableFont_wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --velvet: #420b28;
  --dusk: #0e2d49;
  --blush: #f2bfc3;
  --marshmallow: #eee2e0;
  --watermelon: #ef5e5e;
  --error: #a3192b;
  --heading: "Poppins", system-ui, sans-serif;
  --body: "Gantari", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--velvet); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--marshmallow); font: 400 1.0625rem/1.5 var(--body); -webkit-font-smoothing: antialiased; }

.page {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr minmax(320px, 430px);
  grid-template-rows: auto 1fr;
  gap: clamp(32px, 5vw, 56px) clamp(40px, 7vw, 88px);
}
.logo { grid-column: 1 / -1; display: block; width: clamp(180px, 22vw, 260px); height: auto; }
.pitch { align-self: center; }
.eyebrow { margin: 0 0 16px; font: 700 .8125rem/1.2 var(--heading); letter-spacing: .14em; text-transform: uppercase; color: var(--blush); }
h1 { margin: 0; font: 700 clamp(2.25rem, 5.2vw, 3.75rem)/1.08 var(--heading); letter-spacing: -.01em; color: var(--marshmallow); }
.lede { margin: 22px 0 0; max-width: 30em; font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.45; }

.card { align-self: center; background: var(--marshmallow); color: var(--dusk); border-radius: 14px; padding: clamp(24px, 3.5vw, 36px); }
.card h2 { margin: 0 0 18px; font: 700 1.375rem/1.2 var(--heading); color: var(--velvet); }
#thanks h2 { margin-bottom: 10px; }
#thanks p { margin: 0; }
#thanks:focus { outline: none; }

.field { margin-bottom: 14px; }
label { display: block; margin-bottom: 5px; font-weight: 600; font-size: .9375rem; }
.optional { font-weight: 400; }
input, select {
  width: 100%;
  height: 48px;
  padding: 10px 12px;
  border: 1.5px solid #8a7f85;
  border-radius: 8px;
  background: #fff;
  color: var(--dusk);
  font: inherit;
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5l6 6 6-6' stroke='%230e2d49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
}
input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid var(--dusk); outline-offset: 2px; }
[aria-invalid="true"] { border-color: var(--error); }
.check { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile:not(:empty) { margin-bottom: 14px; }

button {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: 8px;
  background: var(--dusk);
  color: #fff;
  font: 700 .875rem/1 var(--heading);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
button:hover { background: #1d4166; }
button:disabled { opacity: .65; cursor: progress; }
.error { margin: 0 0 12px; color: var(--error); font-weight: 600; font-size: .9375rem; }
.fine { margin: 12px 0 0; font-size: .875rem; text-align: center; }

@media (max-width: 820px) {
  .page { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .logo { grid-column: auto; }
}