/* -----------------------------------------
   Sagewood — Elegant baseline
   - Zero dependencies (system font stack)
   - Fluid type with clamp()
   - Balanced line length & spacing
   - Accessible focus & contrast
----------------------------------------- */

:root {
  /* Brand accents: adjust as you like */
  --accent: #3FA766;     /* Sage green */
  --accent-gold: #D4AF37;/* Gold                */
  --fg: #EAEFED;         /* Main text           */
  --muted: #B9C7C0;      /* Secondary text      */
  --bg-0: #0B1210;       /* Background (deep)   */
  --bg-1: #0F1714;       /* Elevated surface    */

  /* Typography scale & rhythm */
  --max-line: 68ch;      /* Optimal line length */
  --leading: 1.6;        /* Base line-height    */
  --space: 1rem;         /* Base spacing unit   */
}

/* Fluid root size: ~16px on phones up to ~18px on large screens */
html { font-size: clamp(16px, 0.6vw + 15px, 18px); }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg);
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in hsl, var(--accent) 18%, transparent), transparent),
    radial-gradient(1200px 600px at 90% 110%, color-mix(in hsl, var(--accent-gold) 16%, transparent), transparent), center / cover no-repeat #0E1714;
    var(--bg-0);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Center your hero content nicely */
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--space) * 2);
  overflow: visible; /* remove hidden clipping */
}



/* Top art container */
.site-top {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(12px, 3vw, 28px) 0; /* vertical breathing room */
}

/* The SVG itself: responsive width, soft transparency */
.site-top-art {
  width: clamp(260px, 55vw, 900px); /* scales nicely from phones to desktops */
  height: auto;
  opacity: 0.85;                    /* gentle transparency */
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
  pointer-events: none;             /* avoids accidental selection */
  user-select: none;
  max-width: 100%;
}

input, select, textarea {
  font-size: 1rem;
  padding: 1rem;
}

.btn, .btn-ghost {
  padding: 1rem 1.25rem;
  font-size: 1rem;
}


h1.gradient-text {
  line-height: 1.15;       /* loosen slightly */
  padding-bottom: 0.15em;  /* extra space for descenders */
  display: inline-block;   /* ensures gradient paints correctly */
}


@supports (-webkit-text-fill-color: transparent) {
  h1.gradient-text {
    -webkit-text-stroke: 0.2px rgba(0,0,0,0); /* Safari/WebKit fix */
  }
}


/* Container to keep text measure elegant */
.main {
  max-width: var(--max-line);
  margin-inline: auto;
  outline: 1px dashed rgba(255,255,255,.15);
}

/* Headings */
h1, h2, h3 { margin: 0 0 calc(var(--space) * .75); font-weight: 800; letter-spacing: .2px; }
h1 { font-size: clamp(2.2rem, 3.2vw + 1rem, 3.8rem); line-height: 1.08; }
h2 { font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem);  line-height: 1.2; }
h3 { font-size: clamp(1.15rem, 0.9vw + .9rem, 1.35rem); }

/* Paragraphs */
p { 
  margin: 0 0 calc(var(--space) * .8);
  color: var(--muted);
}

/* Elegant gradient headline: green -> gold (gold dominant) */
.gradient-text {
  background: linear-gradient(90deg, var(--accent) 20%, var(--accent-gold) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Safari/iOS */
  color: transparent;                   /* Firefox/others */
  display: inline-block;
  text-shadow: 0 0 0 rgba(0,0,0,0); /* harmless, helps some builds */
}

/* Buttons (if you add later) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .8rem 1.1rem; border-radius: .7rem;
  font-weight: 700; text-decoration: none; border: 1px solid #2a342f;
  color: #0f1714;
  background: linear-gradient(135deg, var(--accent), var(--accent-gold));
  transition: transform .15s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* Accessibility niceties */
:focus-visible { outline: 3px solid color-mix(in hsl, var(--accent) 55%, white 0%); outline-offset: 2px; }
::selection { background: color-mix(in hsl, var(--accent) 45%, black 0%); color: #08110d; }

/* Small screens: breathing room below the hero */
@media (max-width: 768px) {
  .main {
    padding-inline: 1rem;
  }

  .site-top {
    flex-direction: column;
    text-align: center;
  }

  .contact-form {
    padding: 1rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}


/* Visually hidden, but accessible (for the form title) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Contact form layout */
.contact-form { 
  margin-top: 1.25rem; 
  background: var(--bg-1);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* 2-column grid that collapses on small screens */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 1.2vw, 1rem);
  margin-top: 1rem;
}
.field { display: grid; gap: .4rem; }
.field span { font-weight: 700; color: var(--fg); font-size: .95rem; }

.full { grid-column: 1 / -1; }

input, select, textarea {
  width: 100%;
  padding: .9rem 1rem;
  border-radius: .7rem;
  background: rgba(255,255,255,.04);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,.12);
  outline: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* Placeholder color */
::placeholder { color: rgba(233,239,237,.55); }

/* Focus state aligned with brand */
input:focus, select:focus, textarea:focus {
  border-color: color-mix(in hsl, var(--accent) 60%, white 0%);
  box-shadow: 0 0 0 3px color-mix(in hsl, var(--accent) 35%, transparent);
}

/* Button row */
.actions {
  display: flex; gap: .6rem; flex-wrap: wrap;
  margin-top: 1rem;
}

/* Ghost button that matches your brand */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .8rem 1.1rem; border-radius: .7rem;
  font-weight: 700; text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--fg);
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}
.btn-ghost:hover { transform: translateY(-1px); background: rgba(255,255,255,.07); }

/* Anti-bot honeypot (keep hidden) */
.hp { position: absolute; left: -9999px; opacity: 0; }


/* A vertical rhythm that just works */
.stack > * { margin: 0; }  /* neutralize default margins */
.stack > * + * {
  margin-top: clamp(.6rem, 1.2vw, 1rem); /* consistent spacing between siblings */
}

/* Give the button group a bit more air than body text */
.actions { 
  margin-top: clamp(.8rem, 2vw, 1.25rem); 
  display: flex; 
  justify-content: center; 
}

/* Optional: prettier multi-line breaks on the subhead */
p { text-wrap: balance; } /* Safe to keep; ignored by browsers that don't support it */