/* ==========================================================
   RedSky — main.css (mobile-first)
   Light background + gold accents + charcoal text
   ========================================================== */

/* --------------------------
   0) Theme tokens
--------------------------- */
:root{
  --bg: #f7f4ee;          /* cream background */
  --surface: #ffffff;
  --surface2:#faf7f1;

  --ink: #2c2c2c;         /* charcoal text */
  --muted: #5e5e5e;

  --gold: #d6a75c;
  --gold2:#c69547;

  --line: rgba(0,0,0,.08);

  --radius: 14px;
  --shadow: 0 10px 28px rgba(0,0,0,.08);
  --shadow2: 0 6px 18px rgba(0,0,0,.06);

  --wrap: min(1120px, 92vw);
  --pad: clamp(18px, 2.2vw, 28px);

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* --------------------------
   1) Reset
--------------------------- */
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, Inter, Arial;
  color: var(--ink);
  background: var(--bg);
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
p{ color: var(--muted); }

.container{
  width: var(--wrap);
  margin: 0 auto;
}

/* --------------------------
   2) Sections
--------------------------- */
.section{
  padding: 56px 0;
}
.band-a{ background: transparent; }
.band-b{ background: var(--surface2); }
.band-c{ background: #ffffff; }

/* --------------------------
   3) Cards
--------------------------- */
.card{
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: var(--pad);
  box-shadow: var(--shadow2);
}
.card.soft{
  background: var(--surface2);
}

/* --------------------------
   4) Grid
--------------------------- */
.grid{ display:grid; gap:18px; }
@media(min-width:860px){
  .cols-2{ grid-template-columns: 1fr 1fr; }
  .cols-3{ grid-template-columns: repeat(3,1fr); }
}

/* --------------------------
   5) Buttons
--------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--line);
  background:#fff;
  transition:.15s var(--ease);
}
.btn:hover{
  transform:translateY(-1px);
}

.btn-primary{
  background: var(--gold);
  color:#fff;
  border:none;
}
.btn-primary:hover{
  background: var(--gold2);
}

.btn-outline{
  background:transparent;
}

/* --------------------------
   6) Header
--------------------------- */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo{ width:34px; }
.brand-name{ font-weight:700; }

/* Mobile menu */
.nav{ display:none; }
.nav.active{
  display:flex;
  flex-direction:column;
  position:absolute;
  top:60px;
  left:0;
  width:100%;
  background:#fff;
  border-top:1px solid var(--line);
}
.nav a{
  padding:14px;
  border-bottom:1px solid var(--line);
}

/* --------------------------
   7) Hero
--------------------------- */
.hero h1{
  font-size: clamp(30px, 4vw, 42px);
  margin-bottom:10px;
}
.lead{
  font-size:18px;
}

/* --------------------------
   8) Forms
--------------------------- */
label{ font-weight:600; }
input,textarea,select{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
}

/* --------------------------
   9) Footer
--------------------------- */
.site-footer{
  background:#fff;
  border-top:1px solid var(--line);
  margin-top:40px;
}
.footer-grid{
  display:grid;
  gap:20px;
  padding:40px 0;
}
@media(min-width:860px){
  .footer-grid{
    grid-template-columns:1.3fr .7fr 1fr;
  }
}
.footer-bottom{
  padding:18px 0 30px;
  border-top:1px solid var(--line);
}

/* --------------------------
   10) Floating call
--------------------------- */
.float-call{
  position:fixed;
  right:14px;
  bottom:14px;
  background:var(--gold);
  color:#fff;
  padding:14px 18px;
  border-radius:999px;
  font-weight:700;
}
@media(min-width:860px){
  .float-call{ display:none; }
}
.badge-row .badge{
  border-bottom: 2px solid #d6a75c; /* gold accent */
  padding-bottom: 4px;
}
.nav-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  cursor:pointer;
  font-weight:700;
  color:var(--ink);
}

.menu-text{
  font-size:14px;
  letter-spacing:.3px;
}

.hamburger-lines{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.hamburger-lines span{
  width:20px;
  height:2px;
  background:var(--ink);
  display:block;
  border-radius:2px;
}