/* ==========================================================================
   Zyntellix — base styles
   Design tokens, reset, typography, nav, buttons, footer.
   Shared by every page; page-specific styles live in home.css / match.css.
   ========================================================================== */

:root{
  --paper: #f7f4ea;
  --paper-2: #eee7d3;
  --card: #ffffff;
  --forest: #223a2f;
  --forest-2: #1a2e25;
  --moss: #4f6f5b;
  --sage: #8fac91;
  --sage-light: #dfe8de;
  --sage-lighter: #eef3ec;
  --honey: #c99a58;
  --honey-light: #ecd7ac;
  --text-hi: #20321f;
  --text-mid: #56695a;
  --text-low: #8b998c;
  --line: #dcd8c6;
  --line-on-dark: #35493f;
  --radius-sm: 8px;
  --radius-md: 18px;
  --maxw: 1180px;

  /* Refined elevation — soft, warm-tinted shadows instead of flat borders alone */
  --shadow-xs: 0 1px 2px rgba(32,44,29,0.045);
  --shadow-sm: 0 2px 6px rgba(32,44,29,0.05), 0 1px 2px rgba(32,44,29,0.04);
  --shadow-md: 0 10px 24px rgba(32,44,29,0.08), 0 2px 6px rgba(32,44,29,0.05);
  --shadow-lg: 0 20px 45px rgba(24,38,26,0.14), 0 6px 16px rgba(24,38,26,0.07);
  --shadow-inset-focus: inset 0 0 0 3px var(--card);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text-hi);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:400;
  margin:0;
  letter-spacing:-0.01em;
  color:var(--forest);
}
.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--moss);
}
.lede{
  color:var(--text-mid);
  font-size:18px;
  line-height:1.7;
  max-width:52ch;
}

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

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
@media (min-width:640px){.wrap{padding:0 32px;}}

/* ---------- NAV ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(247,244,234,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;max-width:var(--maxw);margin:0 auto;
  position:relative;
}
@media (min-width:640px){.navbar{padding:18px 32px;}}

.logo{
  display:flex;align-items:center;gap:9px;
  font-family:'Fraunces',serif;font-size:20px;font-weight:500;letter-spacing:0.01em;
  color:var(--forest);
  z-index:2;
}
.logo-mark{width:26px;height:26px;flex:none;}

.navlinks{display:flex;gap:34px;align-items:center;}
.navlinks a{
  font-size:14.5px;color:var(--text-mid);font-weight:500;
  transition:color .15s ease;
}
.navlinks a:hover{color:var(--forest);}

.nav-back{font-size:14.5px;color:var(--text-mid);font-weight:500;}
.nav-back:hover{color:var(--forest);}

.nav-cta{
  font-size:14px;font-weight:600;
  background:var(--forest);color:var(--paper);
  padding:11px 20px;border-radius:100px;
  border:1px solid var(--forest);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--forest-2);transform:translateY(-1px);box-shadow:var(--shadow-sm);}

.navtoggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;z-index:2;
}
.navtoggle span{
  width:22px;height:2px;background:var(--forest);
  transition:transform .2s ease, opacity .2s ease;
}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.desktop-only{display:flex;}
@media (max-width:900px){
  .desktop-only{display:none;}
  .navtoggle{display:flex;}
}
@media (min-width:901px){
  .navtoggle{display:none;}
}

.mobile-panel{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:8px 24px 22px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.mobile-panel.open{display:flex;}
.mobile-panel a{
  padding:13px 4px;font-size:16px;color:var(--text-hi);font-weight:500;
  border-bottom:1px solid var(--line);
}
.mobile-panel .nav-cta{margin-top:14px;text-align:center;}

/* ---------- BUTTONS ---------- */
.btn-primary{
  background:var(--forest);color:var(--paper);
  padding:14px 26px;border-radius:100px;
  font-size:15px;font-weight:600;
  border:1px solid var(--forest);
  cursor:pointer;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  display:inline-block;
}
.btn-primary:hover{background:var(--forest-2);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}

.btn-secondary{
  padding:14px 26px;border-radius:100px;
  font-size:15px;font-weight:600;
  border:1px solid var(--line);color:var(--forest);
  background:transparent;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  display:inline-block;
}
.btn-secondary:hover{border-color:var(--moss);background:var(--sage-lighter);box-shadow:var(--shadow-xs);}

/* ---------- FOOTER (full site footer, used on index) ---------- */
footer.site-footer{border-top:1px solid var(--line);padding:48px 0 32px;}
.footer-top{
  display:flex;flex-direction:column;gap:36px;margin-bottom:40px;
}
@media (min-width:760px){
  .footer-top{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:40px;}
}
.footer-brand .logo{margin-bottom:14px;}
.footer-brand p{font-size:14px;color:var(--text-mid);max-width:34ch;}
.footer-cols{display:flex;gap:20px 56px;flex-wrap:wrap;}
.footer-col h4{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-low);margin-bottom:14px;
}
.footer-col a{display:block;font-size:14px;color:var(--text-mid);margin-bottom:10px;transition:color .15s;}
.footer-col a:hover{color:var(--forest);}
.footer-bottom{
  display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--line);padding-top:22px;
  font-size:13px;color:var(--text-low);
}
@media (min-width:640px){
  .footer-bottom{flex-direction:row;justify-content:space-between;}
}

/* ---------- FOOTER (simple, used on match.html) ---------- */
footer.simple-footer{border-top:1px solid var(--line);padding:32px 0;text-align:center;font-size:13px;color:var(--text-low);}
footer.simple-footer a{color:var(--moss);font-weight:600;}