/* almond Desk: one-page site. Brand: Almond Orange #F16125, Charcoal #222222, Slate Gray #5A5A5A, White #FFFFFF. Inter (self-hosted, OFL). */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
:root {
  --orange: #F16125;
  --charcoal: #222222;
  --slate: #5A5A5A;
  --white: #FFFFFF;
  --light: #F5F5F5;
  --font: "Inter", "Segoe UI", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--charcoal); color: var(--white); padding: .5rem 1rem; z-index: 10;
}
.skip:focus { left: .5rem; top: .5rem; }

/* Header: wordmark with clear space around it */
.site-header { padding: 1.25rem 0; border-bottom: 1px solid #E6E6E6; }
.brand-link { display: inline-block; padding: .5rem 0; }
.wordmark { height: 40px; width: auto; }

/* Hero */
.hero { padding: 3rem 0 2.5rem; text-align: center; }
.hero-mark { width: 96px; height: 96px; margin: 0 auto 1.5rem; }
h1, h2 { font-weight: 600; line-height: 1.2; margin: 0 0 .75rem; }
h1 { font-size: 2.5rem; letter-spacing: -0.01em; }
h1.wm { font-weight: 500; font-size: 3rem; }
.wm-almond { color: var(--orange); }
.wm-desk { color: var(--charcoal); }
.subhead { font-size: 1.375rem; font-weight: 600; margin: 0 0 1rem; }
.intro { color: var(--slate); font-size: 1.125rem; margin: 0 auto 1.75rem; max-width: 34rem; }

/* Primary button: charcoal text on orange (4.9:1 contrast) */
.btn {
  display: inline-block;
  background: var(--orange);
  color: var(--charcoal);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  padding: .875rem 1.5rem;
  border-radius: 8px;
  min-height: 44px;
}
.btn:hover { background: #E2551B; }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }

/* Sections */
.band { padding: 2.25rem 0; border-top: 1px solid #E6E6E6; }
h2 { font-size: 1.5rem; }
.band p { margin: 0 0 1rem; }
.steps { margin: 0; padding-left: 1.5rem; }
.steps li { margin: 0 0 .6rem; padding-left: .25rem; }
.steps li::marker { color: var(--slate); font-weight: 600; }

.contact { background: var(--light); text-align: center; }
.mail { color: var(--charcoal); font-weight: 600; font-size: 1.25rem; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Footer on charcoal: almond stays orange, Desk goes white */
.site-footer { background: var(--charcoal); color: var(--white); padding: 1.5rem 0; text-align: center; font-size: .9375rem; }
.site-footer p { margin: 0; }
.site-footer .wm-desk { color: var(--white); }

@media (min-width: 48rem) {
  .hero { padding: 4.5rem 0 3.5rem; }
  h1.wm { font-size: 3.75rem; }
  .subhead { font-size: 1.625rem; }
  .wordmark { height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .15s ease; }
}