/* ============================================================
   site.css — SHARED CORE STYLES
   Loaded by every standard page (not our-work.html / review.html,
   which are standalone designs with their own tokens).
   Page-specific styles stay in each page's inline <style> block,
   which comes AFTER this link so page rules win the cascade.
   ============================================================ */

:root {
  --ink:    #FFFFFF;
  --paper:  #16191B;
  --void:   #F4F7F0;
  --gold:   #6CADCA;
  --amber:  #6C9B95;
  --ember:  #5E8A3F;
  --signal: #7FB53A;
  --logo-a: #5E8A3F;
  --logo-b: #7FB53A;
  --fire:   linear-gradient(135deg, #5E8A3F, #7FB53A, #5E8A3F, #6CADCA);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--ink);
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  line-height: 1.7;
  margin: 0;
}

.font-display { font-family: 'Quicksand', sans-serif; font-weight: 700; }
.font-heading  { font-family: 'Quicksand', sans-serif; font-weight: 700; }
.font-mono     { font-family: 'Quicksand', sans-serif; font-weight: 600; }

.text-fire   { background: var(--fire); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-signal { color: var(--signal); }
.text-body   { color: rgba(22,25,27,.65); }

.card {
  background: rgba(22,25,27,.03);
  border: 1px solid rgba(22,25,27,.07);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.divider { border-bottom: 1px solid rgba(22,25,27,.06); }

.btn {
  display: inline-block;
  font-family: 'Quicksand', monospace;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .65rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
  text-decoration: none;
}
.btn:hover  { transform: translateY(-1px); opacity: .92; }
.btn:active { transform: translateY(0); opacity: 1; }
.btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.btn-primary { background: var(--signal); color: var(--paper); border: none; }
.btn-ghost   { background: transparent; color: var(--paper); border: 1px solid rgba(22,25,27,.25); }
.btn-ghost:hover { border-color: var(--signal); color: var(--signal); }

.nav-dropdown { display: none; }
.nav-item:focus-within .nav-dropdown { display: block; }

#mobile-menu { display: none; }
#mobile-menu.open { display: flex; flex-direction: column; gap: 1rem; }

.field {
  width: 100%;
  background: rgba(22,25,27,.05);
  border: 1px solid rgba(22,25,27,.12);
  border-radius: 4px;
  color: var(--paper);
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  padding: .75rem 1rem;
  transition: border-color .15s ease;
  outline: none;
}
.field::placeholder { color: rgba(22,25,27,.3); }
.field:focus { border-color: var(--signal); }

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* Responsive — navbar collapse.
   Full desktop nav (logo lockup + 7 items + phone + BOOK NOW) only fits comfortably
   above ~1100px; below that switch to the hamburger so tablets (iPad Pro portrait = 1024)
   don't get a cramped, wrapping nav bar. */
@media (max-width: 1100px) {
  #navbar nav, #navbar .nav-phone { display: none !important; }
  #hamburger { display: block !important; }
}

/* Native select dropdown panels: render light so options stay readable on the light theme */
select { color-scheme: light; }
select option { background-color: var(--ink); color: var(--paper); }