/* Grange & Field Estate Liquidations — site styles
   Palette: barn red, charcoal, wheat, field tan, paper cream */

:root{
  --red:#8c2b1d;
  --red-dark:#6f2015;
  --charcoal:#26221e;
  --charcoal-soft:#3a352e;
  --wheat:#d9b878;
  --wheat-light:#ecd9a8;
  --tan:#c9b896;
  --paper:#f5efe2;
  --paper-dark:#ece3cf;
  --ink:#2b2620;
  --line:#d8cdb2;
  --radius:6px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:"Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
}

h1,h2,h3,.slab{
  font-family:"Rockwell","Zilla Slab","Roboto Slab",Georgia,"Times New Roman",serif;
  font-weight:700;
  line-height:1.15;
  color:var(--charcoal);
  letter-spacing:.01em;
}

h1{font-size:2.6rem}
h2{font-size:1.9rem;margin-bottom:.6em}
h3{font-size:1.25rem;margin-bottom:.4em}

p{margin-bottom:1em}
a{color:var(--red)}
a:hover{color:var(--red-dark)}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- Header ---------- */
.site-header{
  background:var(--charcoal);
  border-bottom:5px solid var(--red);
  position:sticky;top:0;z-index:50;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 20px;max-width:1080px;margin:0 auto;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{flex:none}
.brand-name{
  font-family:"Rockwell","Zilla Slab","Roboto Slab",Georgia,serif;
  font-size:1.45rem;font-weight:700;color:#f5efe2;line-height:1.1;
}
.brand-name span{color:var(--wheat)}
.brand-tag{display:block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#b9ac8f;font-family:"Segoe UI",Arial,sans-serif;font-weight:600}

.main-nav{display:flex;gap:4px;flex-wrap:wrap}
.main-nav a{
  color:#e9e0c9;text-decoration:none;font-weight:600;font-size:.95rem;
  padding:8px 12px;border-radius:4px;
}
.main-nav a:hover{background:var(--charcoal-soft);color:#fff}
.main-nav a.active{background:var(--red);color:#fff}
.nav-toggle{
  display:none;background:var(--red);color:#fff;border:0;border-radius:4px;
  font-size:1rem;font-weight:700;padding:9px 14px;cursor:pointer;
}

/* ---------- Hero ---------- */
.hero{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 46px),
    linear-gradient(160deg, var(--red) 0%, var(--red-dark) 70%);
  color:#fdf6e3;
  padding:64px 0 56px;
  border-bottom:6px solid var(--charcoal);
}
.hero h1{color:#fdf6e3;font-size:3rem;max-width:16em}
.hero .kicker{
  display:inline-block;background:var(--charcoal);color:var(--wheat);
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.75rem;
  padding:6px 12px;border-radius:3px;margin-bottom:18px;
}
.hero p{font-size:1.15rem;max-width:38em;color:#f3e7c8}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  padding:13px 24px;border-radius:var(--radius);font-size:1rem;border:2px solid transparent;
}
.btn-wheat{background:var(--wheat);color:var(--charcoal)}
.btn-wheat:hover{background:var(--wheat-light);color:var(--charcoal)}
.btn-outline{border-color:#f3e7c8;color:#fdf6e3;background:transparent}
.btn-outline:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);color:#fff}

/* ---------- Bands & sections ---------- */
.section{padding:56px 0}
.section.alt{background:var(--paper-dark)}
.section.dark{background:var(--charcoal);color:#e9e0c9}
.section.dark h2,.section.dark h3{color:#f5efe2}
.section-head{max-width:44em;margin-bottom:34px}
.section-head .rule{width:64px;height:5px;background:var(--red);margin:14px 0 0}

.page-head{
  background:var(--charcoal);color:#f5efe2;padding:48px 0 40px;
  border-bottom:6px solid var(--red);
}
.page-head h1{color:#f5efe2}
.page-head p{color:#cfc3a4;max-width:42em;font-size:1.08rem}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fffdf7;border:1px solid var(--line);border-top:5px solid var(--red);
  border-radius:var(--radius);padding:26px 24px;
  box-shadow:0 2px 6px rgba(38,34,30,.06);
}
.card .icon{
  width:52px;height:52px;border-radius:50%;
  background:var(--paper-dark);display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.card ul{margin:0 0 0 1.1em}
.card li{margin-bottom:.35em}

.chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip-list li{
  background:#fffdf7;border:1px solid var(--line);border-left:5px solid var(--wheat);
  padding:8px 14px;border-radius:4px;font-weight:600;
}

/* ---------- Steps ---------- */
.steps{counter-reset:step;display:grid;gap:22px;grid-template-columns:repeat(4,1fr)}
.step{
  background:#fffdf7;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 20px;position:relative;
}
.step-num{
  counter-increment:step;
  width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;
  font-family:"Rockwell",Georgia,serif;font-weight:700;font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.step-num::after{content:counter(step)}

/* ---------- Lists ---------- */
.tick-list{list-style:none}
.tick-list li{padding:7px 0 7px 30px;position:relative;border-bottom:1px dashed var(--line)}
.tick-list li:last-child{border-bottom:0}
.tick-list li::before{
  content:"";position:absolute;left:2px;top:13px;width:14px;height:8px;
  border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg);
}

/* ---------- FAQ ---------- */
.faq-item{background:#fffdf7;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px}
.faq-item summary{
  cursor:pointer;padding:18px 22px;font-weight:700;font-size:1.05rem;
  font-family:"Rockwell","Zilla Slab",Georgia,serif;color:var(--charcoal);list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;color:var(--red);font-size:1.4rem;line-height:1}
.faq-item[open ] summary::after{content:"–"}
.faq-item .faq-body{padding:0 22px 18px}

/* ---------- Form ---------- */
.form-card{
  background:#fffdf7;border:1px solid var(--line);border-top:6px solid var(--red);
  border-radius:var(--radius);padding:32px 28px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field.full{grid-column:1/-1}
.form-field label{font-weight:700;font-size:.92rem;color:var(--charcoal)}
.form-field input,.form-field select,.form-field textarea{
  font:inherit;padding:11px 12px;border:1px solid #bfb28d;border-radius:4px;background:#fff;
  color:var(--ink);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:2px solid var(--wheat);border-color:var(--red);
}
.checks{display:flex;flex-wrap:wrap;gap:8px 20px}
.checks label{font-weight:400;display:flex;gap:8px;align-items:center}
.form-note{font-size:.88rem;color:#6b6151}

/* ---------- CTA strip ---------- */
.cta-strip{background:var(--red);color:#fdf6e3;padding:44px 0}
.cta-strip h2{color:#fdf6e3}
.cta-strip p{color:#f3e7c8;max-width:40em}
.cta-flex{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}

/* ---------- Footer ---------- */
.site-footer{background:var(--charcoal);color:#cfc3a4;padding:44px 0 30px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-bottom:30px}
.site-footer h3{color:#f5efe2;font-size:1.05rem}
.site-footer a{color:#e9e0c9;text-decoration:none}
.site-footer a:hover{color:var(--wheat)}
.footer-nav{list-style:none}
.footer-nav li{margin-bottom:8px}
.footer-bottom{
  border-top:1px solid var(--charcoal-soft);padding-top:18px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.9rem;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid-4,.steps{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr 1fr}
  .hero h1{font-size:2.3rem}
  h1{font-size:2.1rem}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4,.steps,.form-grid,.footer-grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .main-nav{display:none;width:100%;flex-direction:column;padding-top:10px}
  .main-nav.open{display:flex}
  .main-nav a{padding:10px 8px}
  .hero{padding:44px 0 40px}
  .section{padding:42px 0}
  body{font-size:16px}
}