/* KC Stump — kcstump.com
   Warm paper, rust, hi-vis amber. Archivo over Newsreader.
   Geometry is tight and square to agree with the grotesque display face. */

:root{
  --paper:#F6F1E8;
  --paper-2:#FFFDF8;
  --sand:#EFE7D9;
  --ink:#201A13;
  --ink-2:#3D342A;
  --muted:#6E6153;
  --line:#DFD5C4;
  --rust:#A8380F;
  --rust-dk:#7E2A0B;
  --amber:#E0A020;
  --moss:#3E5730;

  --r:6px;
  --r-lg:10px;
  --wrap:1180px;
  --sans:"Archivo",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:150px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--rust)}
h1,h2,h3,.mark,.btn,.tel,.rate,.lbl,.foot-h,label,input,textarea,button,.towns,.price,.ex dd{
  font-family:var(--sans);
}
h1,h2,h3{color:var(--ink); line-height:1.06; margin:0; letter-spacing:-.022em}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}

/* ── Buttons ─────────────────────────────────────────── */
.btn{
  display:inline-block; border:1px solid transparent; border-radius:var(--r);
  font-weight:700; font-size:.9rem; letter-spacing:.005em;
  padding:.65rem 1.05rem; text-decoration:none; cursor:pointer;
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-solid{background:var(--rust); color:#FFF7F0; box-shadow:0 1px 0 rgba(32,26,19,.18)}
.btn-solid:hover{background:var(--rust-dk); transform:translateY(-1px); box-shadow:0 4px 14px rgba(126,42,11,.28)}
.btn-lg{font-size:1.02rem; padding:.9rem 1.5rem; border-radius:var(--r)}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px}

/* ── Top stack: for-sale banner + header ─────────────── */
.topstack{position:sticky; top:0; z-index:60}

.forsale{background:var(--ink); color:#F3EADC; border-bottom:2px solid var(--amber)}
.forsale-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.5rem 0; font-family:var(--sans); font-size:.8rem;
}
.forsale p{margin:0}
.forsale-txt strong{color:#fff; font-weight:700}
.forsale-detail{color:#B3A691}
.forsale-buy{display:flex; align-items:center; gap:.7rem; white-space:nowrap}
.price{
  font-weight:800; font-size:1rem; color:var(--ink);
  background:var(--amber); border-radius:var(--r); padding:.1rem .5rem;
  letter-spacing:-.01em;
}
.forsale-buy a{
  color:#F3EADC; text-decoration:none;
  border-bottom:1px solid rgba(224,160,32,.6); padding-bottom:1px;
}
.forsale-buy a:hover{color:var(--amber); border-bottom-color:var(--amber)}

.site-head{
  background:rgba(246,241,232,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex; align-items:center; gap:1.5rem; min-height:66px}
.mark{
  display:flex; align-items:center; gap:.55rem; color:var(--ink);
  font-weight:800; font-size:1.12rem; letter-spacing:-.03em;
  text-decoration:none; margin-right:auto;
}
.mark svg{color:var(--rust); flex:none}
.nav{display:flex; gap:1.35rem}
.nav a{
  font-family:var(--sans); font-size:.86rem; font-weight:600;
  color:var(--ink-2); text-decoration:none; padding:.2rem 0;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.nav a:hover{color:var(--rust); border-bottom-color:var(--rust)}
.head-cta{display:flex; align-items:center; gap:.85rem}
.tel{
  font-weight:700; font-size:.98rem; color:var(--ink);
  text-decoration:none; letter-spacing:-.01em; white-space:nowrap;
}
.tel:hover{color:var(--rust)}
.menu{display:none; background:none; border:0; padding:.4rem; cursor:pointer}
.menu span{display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; transition:.2s}
.menu[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Hero ────────────────────────────────────────────── */
.hero{position:relative; background:var(--ink)}
.hero-img{
  width:100%; height:clamp(360px,58vh,600px); object-fit:cover;
  object-position:50% 42%; opacity:.92;
}
.hero-body{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  padding-bottom:clamp(1.75rem,4vw,3.25rem);
  background:linear-gradient(178deg,rgba(32,26,19,.34) 0%,rgba(32,26,19,0) 34%,rgba(32,26,19,.5) 62%,rgba(32,26,19,.9) 100%);
}
.hero h1{
  color:#FFFCF6; font-size:clamp(2.4rem,6.2vw,4.6rem); font-weight:800;
  letter-spacing:-.035em; text-shadow:0 2px 24px rgba(0,0,0,.5);
  max-width:16ch;
}
.hero .lede{
  color:#EDE2D2; max-width:47ch; margin:1.05rem 0 0;
  font-size:clamp(1.02rem,1.55vw,1.22rem); line-height:1.55;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.hero-act{margin:1.5rem 0 0}
.hero-trust{
  margin:1rem 0 0; font-family:var(--sans); font-size:.82rem; font-weight:600;
  color:#D6C7AF; letter-spacing:.005em;
}

/* ── Section frame ───────────────────────────────────── */
.sec{padding:clamp(3.5rem,7vw,6.5rem) 0}
.sec-alt{background:var(--sand); border-block:1px solid var(--line)}
.sec-ink{background:var(--ink); color:#D8CCBA}
.sec-ink h2,.sec-ink strong{color:#FFFCF6}

.lbl{
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rust); margin:0 0 2.2rem;
  display:flex; align-items:center; gap:.9rem;
}
.lbl::after{content:""; flex:1; height:1px; background:var(--line)}
.sec-ink .lbl{color:var(--amber)}
.sec-ink .lbl::after{background:rgba(255,255,255,.16)}

.big{
  font-size:clamp(1.85rem,3.5vw,2.9rem); font-weight:800; letter-spacing:-.035em;
  max-width:17ch; line-height:1.04;
}

/* ── Services ────────────────────────────────────────── */
/* Six services: 3 x 2 or 2 x 3 or 1 x 6, never a grid with dead cells in it. */
.svc{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:repeat(3,1fr);
}
.svc li{background:var(--paper-2); padding:1.6rem 1.6rem 1.5rem; display:flex; flex-direction:column}
.svc h3{font-size:1.24rem; font-weight:700; letter-spacing:-.024em}
.svc p{margin:.7rem 0 0; font-size:1rem; color:var(--muted)}
.rate{
  margin-top:auto !important; padding-top:1.1rem;
  font-weight:700; font-size:.94rem; color:var(--ink) !important;
  letter-spacing:-.012em;
}
.rate::before{
  content:""; display:block; width:26px; height:3px;
  background:var(--amber); margin-bottom:.75rem; border-radius:2px;
}

/* ── Pricing ─────────────────────────────────────────── */
.price-grid{display:grid; gap:clamp(2rem,4vw,4rem); grid-template-columns:1.15fr .85fr; align-items:start}
.price-copy p{margin:0 0 1.05rem; font-size:1.08rem; max-width:56ch}
.price-copy .lbl{max-width:none}
.fine{font-size:.95rem !important; color:var(--muted)}
.price-example{
  background:var(--ink); color:#E4D9C7; border-radius:var(--r-lg);
  padding:1.9rem 1.75rem; box-shadow:0 14px 40px -22px rgba(32,26,19,.75);
}
.ex-h{
  margin:0 0 1.2rem; font-family:var(--sans); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--amber);
}
.ex{margin:0}
.ex > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.72rem 0; border-bottom:1px solid rgba(255,255,255,.11);
}
.ex dt{font-size:.98rem; color:#C6B8A3}
.ex dd{margin:0; font-weight:700; white-space:nowrap; color:#FFFCF6; font-size:1rem}
.ex-tot{border-bottom:0 !important; padding-top:1rem !important}
.ex-tot dt{color:#FFFCF6 !important; font-weight:600}
.ex-tot dd{color:var(--amber) !important; font-size:1.5rem !important; letter-spacing:-.03em}
.ex-note{margin:1.2rem 0 0; font-size:.94rem; color:#A99883}

/* ── Gallery ─────────────────────────────────────────── */
.gal{display:grid; gap:1.6rem 1.5rem; grid-template-columns:repeat(3,1fr)}
.gal figure{margin:0}
.g-lead{grid-column:1 / -1}
.gal img{
  width:100%; border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--sand);
}
.g-lead img{aspect-ratio:16/8; object-fit:cover}
.gal figure:not(.g-lead) img{aspect-ratio:4/3; object-fit:cover}
.gal figcaption{
  margin-top:.85rem; font-size:.98rem; color:var(--muted); max-width:52ch;
}

/* ── Before we arrive ────────────────────────────────── */
.prep-grid{display:grid; gap:clamp(1.5rem,4vw,4rem); grid-template-columns:minmax(210px,.42fr) 1fr; align-items:start}
.prep-grid .lbl{margin:0 0 1.15rem}
.prep-head p{margin:0; font-size:1.02rem; color:#A99883; max-width:30ch}
.prep{list-style:none; margin:0; padding:0; display:grid; gap:1.35rem}
.prep li{
  padding-left:1.5rem; position:relative; font-size:1.05rem; max-width:64ch;
}
.prep li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--amber);
}
.prep strong{font-family:var(--sans); font-weight:700; letter-spacing:-.012em}

/* ── Service area ────────────────────────────────────── */
.area-lede{margin:-1rem 0 2rem; font-size:1.14rem; max-width:44ch; color:var(--ink-2)}
.towns{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(142px,1fr));
  gap:.1rem 1.5rem;
}
.towns li{
  font-size:.95rem; font-weight:600; color:var(--ink-2);
  padding:.55rem 0; border-bottom:1px solid var(--line);
}
.area-note{margin:2rem 0 0; font-size:1rem; color:var(--muted); max-width:50ch}

/* ── Contact ─────────────────────────────────────────── */
.contact-grid{display:grid; gap:clamp(2.25rem,5vw,4.5rem); grid-template-columns:1fr .9fr; align-items:start}
.contact-lede{margin:1.35rem 0 0; font-size:1.1rem; max-width:46ch}
.bigtel{margin:1.9rem 0 0}
.bigtel a{
  font-family:var(--sans); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(1.9rem,4.2vw,2.8rem); color:var(--ink); text-decoration:none;
  border-bottom:4px solid var(--amber); padding-bottom:.1rem;
  transition:color .18s, border-color .18s;
}
.bigtel a:hover{color:var(--rust); border-bottom-color:var(--rust)}
.meta{margin:2.1rem 0 0; display:grid; gap:.1rem}
.meta > div{display:flex; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line)}
.meta dt{font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); flex:0 0 92px; padding-top:.18em}
.meta dd{margin:0; font-size:1rem}

.form{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.75rem; box-shadow:0 10px 34px -26px rgba(32,26,19,.5);
}
.f-row{margin:0 0 1.1rem; display:flex; flex-direction:column; gap:.42rem}
.f-row label{font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.f-row input,.f-row textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:.72rem .85rem; width:100%; transition:border-color .15s, background .15s;
}
.f-row textarea{resize:vertical; line-height:1.5}
.f-row input:focus,.f-row textarea:focus{border-color:var(--rust); background:#fff; outline:none}
.f-row ::placeholder{color:#A2937F}
.f-act{margin:.4rem 0 0}
.f-act .btn{width:100%; text-align:center}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ── Footer ──────────────────────────────────────────── */
.site-foot{background:var(--ink); color:#B3A691; padding:clamp(3rem,5vw,4.25rem) 0 2rem;
  font-size:.98rem}
.foot-in{display:grid; gap:2.25rem; grid-template-columns:2fr 1fr 1fr}
.foot-in p{margin:0 0 .45rem}
.mark-foot{color:#FFFCF6; margin-bottom:.9rem !important}
.mark-foot svg{color:var(--amber)}
.foot-brand p:last-child{max-width:42ch}
.foot-h{
  font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--amber); margin-bottom:.9rem !important;
}
.site-foot a{color:#E4D9C7; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.18)}
.site-foot a:hover{color:var(--amber); border-bottom-color:var(--amber)}
.foot-fine{
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.13);
  display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  font-size:.8rem; color:#8E8170;
}
.foot-fine p{margin:0}
.credits{max-width:72ch; text-align:right}

/* ── Motion ──────────────────────────────────────────── */
[data-rise]{opacity:0; transform:translateY(18px)}
.is-in[data-rise],[data-rise].is-in{
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:1080px){
  .svc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .price-grid,.contact-grid,.prep-grid{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  .credits{text-align:left}
  .prep-grid .lbl{margin-bottom:1.6rem}
}
/* Collapse the nav before the links start wrapping, not at phone width. */
@media (max-width:920px){
  html{scroll-padding-top:120px}
  .site-head{position:relative}
  .menu{display:block}
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:var(--paper-2);
    border-bottom:1px solid var(--line); padding:.5rem 1.25rem 1rem;
    box-shadow:0 18px 30px -22px rgba(32,26,19,.6);
  }
  .nav.open{display:flex}
  .nav a{padding:.8rem 0; border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .head-in{min-height:60px; gap:.75rem}
}
@media (max-width:760px){
  .svc{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .g-lead img{aspect-ratio:16/10}
  .btn-solid.btn:not(.btn-lg){display:none}
  .tel{font-size:.95rem}
  .head-in{min-height:58px}
  .forsale-in{flex-direction:column; align-items:flex-start; gap:.35rem; padding:.45rem 0}
  .forsale-detail{display:none}
  .forsale-txt{font-size:.78rem}
  .hero-img{height:clamp(400px,68vh,540px)}
  .hero-body{background:linear-gradient(178deg,rgba(32,26,19,.4) 0%,rgba(32,26,19,.1) 26%,rgba(32,26,19,.6) 55%,rgba(32,26,19,.93) 100%)}
  .foot-fine{flex-direction:column; gap:.9rem}
  .meta dt{flex-basis:78px}
}
@media (max-width:420px){
  .foot-in{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  [data-rise]{opacity:1 !important; transform:none !important}
}