/* RiseCon site tokens — self-contained so the deployed pages need no other
   stylesheet. Values match the Nocturne design system the site was built on. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=optional');

:root {
  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --color-bg: #05080C;
  --color-surface: #111820;
  --color-text: #F4F5F6;
  --color-accent: #C99A24;
  --color-accent-2: #E0B43D;
  --color-divider: color-mix(in srgb, #B8BEC6 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #FBF3DC;
  --color-accent-200: #F5E4B4;
  --color-accent-300: #F0DA9C;
  --color-accent-400: #E0B43D;
  --color-accent-500: #C99A24;
  --color-accent-600: #A87F1C;
  --color-accent-700: #7E5F15;
  --color-accent-800: #55400E;
  --color-accent-900: #2E2105;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
}

body {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}

.lighten { mix-blend-mode: lighten; background-color: transparent; }

/* — form fields (Free Estimate, Contact) — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 6px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.input {
  width: 100%; min-height: 44px; padding: 10px 14px; font: inherit;
  font-size: 14.5px; color: var(--color-text); caret-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-bg) 65%, var(--color-surface));
  border: 1px solid var(--color-divider); border-radius: 3px;
  transition: border-color .25s ease, background-color .25s ease;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.input:focus, .input:focus-visible {
  border-color: var(--color-accent); outline: none;
  background: color-mix(in srgb, var(--color-bg) 45%, var(--color-surface));
}
textarea.input { min-height: 110px; resize: vertical; line-height: 1.55; }
select.input { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23C99A24' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
select.input option { background: #111820; color: var(--color-text); }
.input::placeholder { color: color-mix(in srgb, var(--color-text) 38%, transparent); }
::selection { background: color-mix(in srgb, #C99A24 30%, transparent); }