/* ============================================================
   DESIGN TOKENS
============================================================ */
:root{
  /* Base */
  --bg:#f7f9fc;
  --surface:#ffffff;
  --border:#e5e9f0;

  --text:#0f172a;

  /* =========================================================
     BRAND COLORS — NateCrandell.online
     Trustworthy • Confident • Welcoming
  ========================================================== */
  --brand-primary:#1f4fd8;   /* Nate */
  --brand-secondary:#0d9488; /* Crandell */
  --brand-accent:#60a5fa;    /* .online */
  --brand-muted:#475569;

  /* =========================================================
     TOPIC COLORS — Semantic meaning
  ========================================================== */
  --buying:#2563eb;
  --selling:#0f766e;
  --renting:#334155;
  --financing:#4338ca;
  --vendors:#b45309;

  /* Soft topic backgrounds (tiles only) */
  --buying-bg:#eef2ff;
  --selling-bg:#edf7f5;
  --renting-bg:#f1f5f9;
  --financing-bg:#eef2ff;
  --vendors-bg:#fff7ed;

  --band:#f8fafc;
  --maxw:1120px;
}

/* ============================================================
   RESET + BASE
============================================================ */
*{
  box-sizing:border-box;
  border-radius:0 !important;
}

html, body{
  height:100%;
}

html {
    hyphens: auto;
}

p {
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: break-word;
  word-break: normal;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  background:var(--bg);
  color:var(--text);
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(var(--maxw), calc(100% - 40px));
  margin:0 auto;
}

/* ============================================================
   HEADER / BRAND
============================================================ */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;                
  padding:18px 1.5rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-name{
  font-weight:600;
  letter-spacing:-0.01em;
}

.brand-nate{
  color:var(--brand-primary);
}

.brand-crandell{
  color:var(--brand-secondary);
}

.brand-online{
  color:var(--brand-accent);
  font-weight:500;
}

/* ============================================================
   NAVIGATION — DESKTOP
============================================================ */
.nav{
  display:flex;
  gap:18px;
}

.nav-link{
  font-size:14px;
  color:var(--brand-muted);
  padding-bottom:4px;
  border-bottom:3px solid transparent;
  transition:
    color 160ms ease,
    border-color 160ms ease;
}

/* Brand hover */
.nav-link:hover,
.nav-link:focus-visible{
  color:var(--brand-primary);
  border-bottom-color:var(--brand-accent);
}

/* Topic hovers */
.nav-link.buying:hover{ color:var(--buying); border-bottom-color:var(--buying); }
.nav-link.selling:hover{ color:var(--selling); border-bottom-color:var(--selling); }
.nav-link.renting:hover{ color:var(--renting); border-bottom-color:var(--renting); }
.nav-link.financing:hover{ color:var(--financing); border-bottom-color:var(--financing); }
.nav-link.vendors:hover{ color:var(--vendors); border-bottom-color:var(--vendors); }

/* Active states */
.nav-link.active{
  font-weight:600;
  color:var(--brand-primary);
  border-bottom-color:var(--brand-primary);
}

.nav-link.active.buying{ color:var(--buying); border-bottom-color:var(--buying); }
.nav-link.active.selling{ color:var(--selling); border-bottom-color:var(--selling); }
.nav-link.active.renting{ color:var(--renting); border-bottom-color:var(--renting); }
.nav-link.active.financing{ color:var(--financing); border-bottom-color:var(--financing); }
.nav-link.active.vendors{ color:var(--vendors); border-bottom-color:var(--vendors); }

/* ============================================================
   MOBILE NAV TOGGLE
============================================================ */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
}

.nav-toggle span{
  width:22px;
  height:2px;
  background:var(--brand-muted);
  display:block;
}

/* Mobile Nav Container */
.nav-mobile{
  display:none;
  flex-direction:column;
  background:#fff;
  border-top:1px solid var(--border);
}

.nav-mobile .nav-link{
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  font-size:15px;
}

/* ============================================================
   MAIN
============================================================ */
main.container{
  flex:1 0 auto;
  padding:48px 0;
}

/* ============================================================
   TYPOGRAPHY
============================================================ */
h1{
  font-size:clamp(34px,4vw,46px);
  letter-spacing:-0.02em;
  margin:0 0 14px;
}

h2{
  font-size:20px;
  margin:0 0 10px;
}

p{
  margin:0 0 14px;
  color:var(--brand-muted);
}

.lead{
  font-size:18px;
  line-height:1.6;
}

/* ============================================================
   SECTIONS
============================================================ */
.section{
  padding:48px 0;
  background:var(--band);
}

.section.white{
  background:#fff;
}

/* ============================================================
   TOPIC BUTTONS
============================================================ */
.topic-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:24px;
  justify-content:center;
}

.topic-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:140px;
  padding:12px 18px;
  font-size:14px;
  font-weight:600;
  border:2px solid;
  background:#fff;
}

.topic-btn.buying{ color:var(--buying); border-color:var(--buying); }
.topic-btn.buying:hover{ background:var(--buying); color:#fff; }

.topic-btn.selling{ color:var(--selling); border-color:var(--selling); }
.topic-btn.selling:hover{ background:var(--selling); color:#fff; }

.topic-btn.renting{ color:var(--renting); border-color:var(--renting); }
.topic-btn.renting:hover{ background:var(--renting); color:#fff; }

.topic-btn.financing{ color:var(--financing); border-color:var(--financing); }
.topic-btn.financing:hover{ background:var(--financing); color:#fff; }

.topic-btn.vendors{ color:var(--vendors); border-color:var(--vendors); }
.topic-btn.vendors:hover{ background:var(--vendors); color:#fff; }

/* ============================================================
   SERVICE GRID
============================================================ */
.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}

.service-tile{
  position:relative;
  border:1px solid var(--border);
  padding:22px;
  background:#fff;
}

.service-tile::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
}

.service-tile.buying{ background:var(--buying-bg); }
.service-tile.buying::before{ background:var(--buying); }

.service-tile.selling{ background:var(--selling-bg); }
.service-tile.selling::before{ background:var(--selling); }

.service-tile.renting{ background:var(--renting-bg); }
.service-tile.renting::before{ background:var(--renting); }

.service-tile.financing{ background:var(--financing-bg); }
.service-tile.financing::before{ background:var(--financing); }

.service-tile.vendors{ background:var(--vendors-bg); }
.service-tile.vendors::before{ background:var(--vendors); }

/* ============================================================
   FOOTER
============================================================ */
.site-footer{
  margin-top:auto;
  background:#fff;
  border-top:1px solid var(--border);
}

.footer-inner{
  padding:20px 0;
  font-size:13px;
  color:var(--brand-muted);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:900px){

  .nav-desktop{
    display:none;
  }

  .nav-toggle{
    display:flex;
  }

  .nav-mobile.open{
    display:flex;
  }
}

@media(max-width:600px){
  .topic-btn{
    min-width:100%;
  }
}