:root{
  --bg-deep:#171310;
  --bg-mid:#241c17;
  --bg-glow:#3c2c21;
  --card:#f6eee0;
  --ink:#241c18;
  --ink-soft:rgba(36,28,24,0.72);
  --ink-faint:rgba(36,28,24,0.46);
  --gold:#c89a4a;
  --sage:#57623f;
  --rust:#a6503b;
  --line:rgba(36,28,24,0.14);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  min-height:100vh;
  background:
    radial-gradient(ellipse 900px 500px at 50% -8%, var(--bg-glow) 0%, transparent 60%),
    radial-gradient(ellipse 1200px 800px at 50% 110%, var(--bg-mid) 0%, var(--bg-deep) 70%);
  background-color:var(--bg-deep);
  font-family:'Inter', -apple-system, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}

.stage{ width:100%; display:flex; justify-content:center; }

.card{
  position:relative;
  width:100%;
  max-width:440px;
  background:var(--card);
  border-radius:3px;
  padding:clamp(40px, 8vw, 60px) clamp(32px, 7vw, 52px) clamp(36px, 7vw, 48px);
  text-align:center;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),
    0 24px 60px -20px rgba(0,0,0,0.55),
    0 8px 24px -8px rgba(0,0,0,0.35);
  opacity:0;
  transform:translateY(14px);
  animation:rise 0.9s cubic-bezier(.19,1,.22,1) 0.15s forwards;
}

.card::after{
  content:"";
  position:absolute;
  top:6%; bottom:6%; left:50%; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(36,28,24,0.13) 20%, rgba(36,28,24,0.13) 80%, transparent);
  pointer-events:none;
}

@keyframes rise{ to{opacity:1; transform:translateY(0);} }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--sage);
  margin:0 0 26px;
}

.motif{
  width:132px; height:auto; margin:0 auto 26px; display:block;
  stroke:var(--sage); fill:none; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; opacity:0.85;
}

.title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(2rem, 6vw, 2.6rem);
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0;
  line-height:1.08;
}

.services{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin:12px 0 0;
}

.tagline{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:460;
  font-size:1.02rem;
  color:var(--sage);
  margin:10px 0 0;
}

.rule{
  width:44px; height:1px; background:var(--line); border:none;
  margin:26px auto;
}

.body{
  font-size:0.95rem; line-height:1.65; color:var(--ink-soft);
  max-width:32ch; margin:0 auto;
}

/* ---- Enquiry form ---- */
.enquiry{
  text-align:left;
  margin-top:26px;
}

.field{ margin-bottom:18px; }

.field label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sage);
  margin-bottom:7px;
}

.field input,
.field textarea{
  width:100%;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  font-family:'Inter', sans-serif;
  font-size:0.95rem;
  color:var(--ink);
  padding:6px 2px 8px;
  outline:none;
  transition:border-color 0.2s ease;
}

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

.field textarea{ resize:vertical; min-height:64px; }

/* honeypot — hidden from humans, visible to bots */
.hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.form-error{
  font-size:0.85rem;
  color:var(--rust);
  margin:-6px 0 16px;
}

.cta{
  display:inline-block;
  margin-top:6px;
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:0.92rem;
  color:var(--ink);
  text-decoration:none;
  background:none;
  border:none;
  border-bottom:1.5px solid var(--gold);
  padding:4px 2px 5px;
  cursor:pointer;
  transition:opacity 0.2s ease;
}
.cta:hover{ opacity:0.72; }
.cta:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:2px; }

.footer{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:34px 0 0;
  text-align:center;
}

@media (prefers-reduced-motion: reduce){
  .card{ animation:none; opacity:1; transform:none; }
  .cta{ transition:none; }
}