/* ------------------------------------------------------------------
   Aalixer - identity drawn from the mark.

   The logo is an alchemical elixir: midnight navy, antique gold, a
   high-contrast serif wordmark. The page follows it rather than the
   other way round. Gold is the only accent and is spent sparingly, so
   the emblem stays the brightest thing on the page.
   ------------------------------------------------------------------ */

:root {
  --midnight:  #0b1024;
  --deep:      #070b18;
  --panel:     #111a34;
  --raise:     #16203e;
  --line:      #26314f;

  --cream:     #ece6d7;
  --muted:     #97a3c2;

  --gold:      #c9a227;
  --gold-lt:   #e8c766;
  --gold-pale: #f3e6bd;
  --elixir:    #7fb3e8;

  --shell: min(1120px, 100% - 3rem);
  --step:  clamp(4.5rem, 9vw, 8rem);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--midnight);
  color: var(--cream);
  font: 400 1.0625rem/1.7 Karla, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Light from behind the bottle, as if the elixir is lit. */
body::before {
  content: "";
  position: fixed;
  inset: -15% -10% auto -10%;
  height: 75vh;
  background:
    radial-gradient(46% 55% at 50% 0%, rgba(201, 162, 39, .13), transparent 68%),
    radial-gradient(60% 50% at 78% 12%, rgba(127, 179, 232, .08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.005em;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-lt);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 20;
  padding: .6rem 1rem;
  background: var(--cream);
  color: var(--midnight);
  border-radius: 4px;
}

/* --- top bar ---------------------------------------------------- */

.bar {
  position: relative;
  z-index: 3;
  width: var(--shell);
  margin: 0 auto;
  padding: 1.35rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.bar__mark {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}

.bar__mark img { display: block; width: auto; height: 38px; }

/* The wordmark is live text, not the baked-in one - at this size the
   original lettering would be an illegible smudge. */
.bar__word {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--cream);
}

.bar__nav {
  display: flex;
  gap: 1.9rem;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bar__nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color .18s ease;
}
.bar__nav a:hover { color: var(--gold-lt); }

/* --- hero ------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) 0 var(--step);
  text-align: center;
}

.hero__motes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__emblem {
  position: relative;
  display: inline-block;
  width: clamp(150px, 27vw, 260px);
  height: auto;
  /* The artwork carries its own glow; this just seats it on the navy. */
  filter: drop-shadow(0 12px 40px rgba(201, 162, 39, .22));
}

.eyebrow {
  position: relative;
  margin: 1.9rem 0 1.1rem;
  font-size: .76rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero__title {
  position: relative;
  font-size: clamp(2.6rem, 6.5vw, 4.9rem);
  max-width: 18ch;
  margin: 0 auto;
}

.hero__title em {
  font-style: italic;
  color: var(--gold-lt);
}

.hero__lede {
  position: relative;
  margin: 1.6rem auto 0;
  max-width: 50ch;
  color: var(--muted);
  font-size: 1.06rem;
  text-wrap: pretty;
}

.hero__actions {
  position: relative;
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
}

.btn {
  display: inline-block;
  padding: .85rem 1.9rem;
  border-radius: 2px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn--solid {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  color: #1c1503;
}
.btn--solid:hover { background: var(--gold-pale); }

.btn--ghost {
  border-color: var(--line);
  color: var(--cream);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-lt); }

/* --- fleuron divider -------------------------------------------- */
/* Echoes the diamond finial and flourishes in the mark, and gives the
   page its own punctuation between sections. */

.fleuron {
  width: var(--shell);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  color: var(--gold);
}

.fleuron::before,
.fleuron::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.fleuron span {
  font-size: .8rem;
  letter-spacing: .5em;
  color: var(--gold-lt);
  /* The glyph carries a trailing letter-space; nudge it back to centre. */
  transform: translateX(.25em);
}

/* --- sections --------------------------------------------------- */

/* Sections carry roughly half the rhythm each, so the gap either side of a
   fleuron adds up to one step rather than two. */
.section {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin: 0 auto;
  padding: calc(var(--step) * .6) 0;
}

.section__title {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  margin-bottom: 2.8rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2.1rem 1.8rem 2.2rem;
  transition: border-color .22s ease, background .22s ease;
}
.card:hover { border-color: var(--gold); background: var(--raise); }

.card__title {
  font-size: 1.75rem;
  margin-bottom: .7rem;
  color: var(--gold-pale);
}

.card p { color: var(--muted); }

/* Numbered because the process genuinely runs in order. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.4rem 2rem;
}

.step { border-top: 1px solid var(--line); padding-top: 1.3rem; }

.step__num {
  display: block;
  margin-bottom: .8rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  color: var(--gold);
}

.step__title { font-size: 1.45rem; margin-bottom: .5rem; }

.step p { color: var(--muted); font-size: .98rem; }

/* --- contact ---------------------------------------------------- */

.contact {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(1.6rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .contact {
    display: grid;
    grid-template-columns: .85fr 1fr;
    gap: 3.5rem;
    align-items: start;
  }
  .contact > .notice { grid-column: 2; }
  .contact__intro { margin-bottom: 0; }
}

.contact__intro { max-width: 42ch; margin-bottom: 2.2rem; }
.contact__intro p { color: var(--muted); }
.contact__intro .section__title { margin-bottom: 1.2rem; }

.contact__alt { margin-top: 1rem; }
.contact__alt a { color: var(--gold-lt); text-underline-offset: 3px; }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem;
}

.field--wide, .field--captcha, .field--submit { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: .5rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field textarea {
  width: 100%;
  padding: .8rem .9rem;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
  transition: border-color .18s ease;
}

.field input:focus,
.field textarea:focus { border-color: var(--gold); }

.field textarea { resize: vertical; }

.field--captcha input { max-width: 9rem; }

.field__error { margin-top: .45rem; font-size: .88rem; color: #f0a5a5; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  padding: 1rem 1.2rem;
  border-radius: 2px;
  font-size: .98rem;
  margin-bottom: 1.5rem;
}

.notice--ok {
  background: rgba(201, 162, 39, .09);
  border: 1px solid rgba(201, 162, 39, .4);
}

.notice--bad {
  background: rgba(240, 165, 165, .07);
  border: 1px solid rgba(240, 165, 165, .35);
}

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

.foot {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin: 0 auto;
  padding: 2rem 0 3rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--muted);
}

.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--gold-lt); }

/* --- narrow ----------------------------------------------------- */

@media (max-width: 860px) {
  .form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  :root {
    --shell: min(1120px, 100% - 2.5rem);
    --step: clamp(3.5rem, 12vw, 5rem);
  }

  .bar { padding: 1.1rem 0; }
  .bar__mark img { height: 32px; }
  .bar__word { font-size: 1.1rem; letter-spacing: .16em; }
  .bar__nav { gap: 1.1rem; font-size: .7rem; letter-spacing: .08em; }
  .bar__nav a:first-child { display: none; }

  .hero__lede { font-size: 1.01rem; }

  .hero__actions { gap: .7rem; }
  .hero__actions .btn { flex: 1 1 100%; text-align: center; }
  .btn { padding: .95rem 1.5rem; }

  .card { padding: 1.7rem 1.4rem 1.8rem; }
  .steps { gap: 1.9rem; }
}

@media (max-width: 460px) {
  :root { --shell: min(1120px, 100% - 2rem); }

  .bar__nav { display: none; }

  .hero__title { font-size: clamp(2.2rem, 11vw, 3rem); }

  .contact { padding: 1.5rem 1.25rem 1.7rem; }
  .field--captcha input { max-width: 100%; }
  .field--submit .btn { display: block; width: 100%; text-align: center; }

  .foot { flex-direction: column; align-items: flex-start; gap: .55rem; }
}

@media (hover: none) {
  .btn:hover { background: linear-gradient(180deg, var(--gold-lt), var(--gold)); }
  .btn--ghost:hover { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}