/* Kentucky Retaining Walls — "limestone triptych"
   Palette: limestone #E9E4D6 · ink #211E18 · moss #5C6B45 · cut-block tan #B08A52 */

:root{
  --limestone:#E9E4D6;
  --limestone-deep:#DCD4BF;
  --ink:#211E18;
  --ink-soft:#4A443A;
  --moss:#5C6B45;
  --moss-deep:#4A5738;
  --tan:#B08A52;
  --joint:rgba(33,30,24,.22);          /* mortar-joint lines */
  --display:"Bricolage Grotesque", "Arial Black", sans-serif;
  --body:"Public Sans", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; }

html{ scroll-behavior:smooth; }
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--limestone);
  line-height:1.6;
  padding-bottom:2.4rem;                /* room for fixed ribbon */
}

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

/* ---------- a11y ---------- */
.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--ink); color:var(--limestone); padding:.6rem 1rem;
}
.skip:focus{ left:0; }
a:focus-visible, .btn:focus-visible{
  outline:3px solid var(--tan); outline-offset:3px; border-radius:2px;
}

/* ---------- topbar ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.9rem clamp(1rem,3vw,2.2rem);
  transition:background .3s, box-shadow .3s, padding .3s;
}
.topbar.scrolled{
  background:var(--limestone);
  box-shadow:0 1px 0 var(--joint), 0 8px 24px rgba(33,30,24,.12);
  padding-top:.55rem; padding-bottom:.55rem;
}
.brand{
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  letter-spacing:.02em; text-decoration:none; color:var(--ink);
  background:var(--limestone); border:1px solid var(--joint);
  padding:.35rem .7rem;
}
.topbar nav{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.topbar nav a{
  font-weight:600; font-size:.85rem; text-decoration:none; color:var(--ink);
  background:var(--limestone); border:1px solid var(--joint);
  padding:.35rem .7rem;
}
.topbar nav a:hover{ background:var(--limestone-deep); }
.topbar nav .nav-call{
  background:var(--moss); border-color:var(--moss); color:#fff;
}
.topbar nav .nav-call:hover{ background:#4A5738; }

/* ---------- hero triptych ---------- */
.triptych{
  display:flex; min-height:100svh;
  border-bottom:6px solid var(--ink);
}
.panel{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  display:flex; align-items:flex-end;
  text-decoration:none; color:var(--limestone);
  border-right:2px solid var(--ink);     /* the "joints" between courses */
  transition:flex .55s cubic-bezier(.6,.05,.25,1);
}
.panel:last-child{ border-right:0; }
.panel:hover, .panel:focus-visible{ flex:2.1 1 0; }

.panel--walls{
  background:url("../img/wall_tree.jpg") center/cover no-repeat, var(--ink);
}
.panel-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(33,30,24,.88) 0%, rgba(33,30,24,.35) 45%, rgba(33,30,24,.15) 100%);
}

.panel--trees{
  background:url("../img/tree_rigging.jpg") center 30%/cover no-repeat, var(--ink);
}
.panel--land{
  background:url("../img/lawn_stripes.jpg") center 40%/cover no-repeat, var(--ink);
}

.panel-body{
  position:relative; z-index:1; display:block;
  padding:clamp(1.2rem,2.5vw,2.4rem);
  padding-bottom:clamp(3.2rem,6vh,4.6rem);  /* clear the fixed ribbon */
  width:100%;
}
.panel-kicker{
  display:block; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; opacity:.85;
  margin-bottom:.5rem;
}
.panel-title{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem,3.6vw,3.4rem); line-height:.95;
  letter-spacing:-.01em; margin-bottom:.65rem;
}
.panel-desc{
  display:block; max-width:34ch; font-size:.95rem;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s cubic-bezier(.6,.05,.25,1), opacity .4s .1s;
}
.panel:hover .panel-desc, .panel:focus-visible .panel-desc{
  max-height:9rem; opacity:1;
}
.panel-go{
  display:inline-block; margin-top:.8rem; font-weight:700; font-size:.85rem;
  border-bottom:2px solid var(--tan); padding-bottom:.15rem;
}
.ph-tag{
  display:inline-block; margin:.2rem 0 .3rem;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--limestone); background:var(--tan);
  padding:.3rem .65rem; border-radius:2px;
}

/* ---------- statement strip ---------- */
.statement{
  padding:clamp(3.5rem,9vw,7rem) clamp(1.2rem,5vw,4rem);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
  border-bottom:1px solid var(--joint);
}
.statement h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem,5.5vw,4.6rem); line-height:.95; letter-spacing:-.015em;
}
.statement-blurbs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,2.5vw,2.2rem);
}
.statement-blurbs h2{
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  margin-bottom:.5rem; padding-top:.7rem; border-top:3px solid var(--moss);
}
.statement-blurbs p{ font-size:.93rem; color:var(--ink-soft); }

/* ---------- gallery (ink band) ---------- */
.gallery{
  background:var(--ink); color:var(--limestone);
  padding:clamp(3.5rem,8vw,6.5rem) clamp(1.2rem,5vw,4rem);
}
.gallery-head{ max-width:60ch; margin-bottom:clamp(1.8rem,4vw,3rem); }
.gallery-head h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2rem,4.5vw,3.6rem); line-height:1; letter-spacing:-.01em;
  margin-bottom:.8rem;
}
.gallery-head p{ color:rgba(233,228,214,.75); }

.mosaic{
  display:grid; gap:10px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(140px,22vw,260px);
}
.cell{ position:relative; overflow:hidden; }
.cell img{ width:100%; height:100%; object-fit:cover; }
.cell--tall{ grid-row:span 2; }
.cell--wide{ grid-column:span 2; }
.cell figcaption{
  position:absolute; left:0; right:0; bottom:0;
  font-size:.78rem; font-weight:600; letter-spacing:.02em;
  padding:1.4rem .8rem .55rem;
  background:linear-gradient(to top, rgba(33,30,24,.85), transparent);
}

/* ---------- process ---------- */
.process{
  padding:clamp(3.5rem,8vw,6.5rem) clamp(1.2rem,5vw,4rem);
  border-bottom:1px solid var(--joint);
}
.process h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2rem,4.5vw,3.6rem); line-height:1; letter-spacing:-.01em;
  margin-bottom:clamp(1.8rem,4vw,3rem);
}
.steps{
  list-style:none; padding:0; counter-reset:step;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.5rem);
}
.steps li{ counter-increment:step; }
.steps li::before{
  content:counter(step,decimal-leading-zero);
  display:block; font-family:var(--display); font-weight:800;
  font-size:2.6rem; line-height:1; color:var(--tan); margin-bottom:.6rem;
}
.steps h3{
  font-family:var(--display); font-weight:700; font-size:1.15rem;
  margin-bottom:.4rem;
}
.steps p{ font-size:.93rem; color:var(--ink-soft); }

/* ---------- CTA band ---------- */
.cta{
  background:var(--moss); color:#fff; text-align:center;
  padding:clamp(3.5rem,8vw,6rem) clamp(1.2rem,5vw,4rem);
}
.cta h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem,4.5vw,3.4rem); line-height:1; letter-spacing:-.01em;
  margin-bottom:.7rem;
}
.cta p{ opacity:.9; margin-bottom:1.8rem; }
.cta-actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.btn{
  font-weight:700; font-size:1rem; text-decoration:none;
  padding:.85rem 1.7rem; border-radius:3px; border:2px solid transparent;
}
.btn--solid{ background:var(--limestone); color:var(--ink); }
.btn--solid:hover{ background:#fff; }
.btn--ghost{ border-color:rgba(255,255,255,.7); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); }

/* ---------- footer ---------- */
.footer{
  display:flex; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap;
  padding:1.6rem clamp(1.2rem,5vw,4rem) 2rem;
  font-size:.85rem; color:var(--ink-soft);
}
.footer div{ display:flex; flex-direction:column; gap:.2rem; }
.footer div:last-child{ text-align:right; }
.footer strong{ color:var(--ink); font-family:var(--display); }

/* ---------- concept ribbon ---------- */
.ribbon{
  position:fixed; inset:auto 0 0 0; z-index:60;
  background:var(--ink); color:rgba(233,228,214,.85);
  font-size:.75rem; letter-spacing:.03em; text-align:center;
  padding:.45rem .8rem;
}

/* ---------- reveal on scroll ---------- */
/* hidden state applies only once JS confirms an observer is running */
html.reveal-init .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s, transform .6s; }
html.reveal-init .reveal.in{ opacity:1; transform:none; }

/* ---------- stub pages ---------- */
.stub{
  min-height:70svh; display:grid; place-content:center; text-align:center;
  padding:6rem 1.2rem 3rem; gap:.8rem;
}
.stub h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem,6vw,4.5rem); line-height:.95;
}
.stub p{ max-width:44ch; color:var(--ink-soft); }
.stub .ph-tag{ justify-self:center; color:var(--limestone); }
.stub a.back{ font-weight:700; color:var(--moss); }

/* ---------- responsive ---------- */
@media (max-width:880px){
  .triptych{ flex-direction:column; min-height:auto; }
  .panel, .panel:hover, .panel:focus-visible{ flex:1 1 auto; }
  .panel{ border-right:0; border-bottom:2px solid var(--ink); min-height:52svh; }
  .panel:last-child{ border-bottom:0; }
  .panel-desc{ max-height:none; opacity:1; }        /* always visible on mobile */
  .panel-body{ padding-bottom:clamp(1.4rem,4vh,2.2rem); padding-top:34svh; }

  .statement{ grid-template-columns:1fr; }
  .statement-blurbs{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }

  .mosaic{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:clamp(130px,30vw,220px);
  }
  .cell--tall{ grid-row:span 2; }
  .cell--wide{ grid-column:span 2; }

  .footer div:last-child{ text-align:left; }
}

@media (max-width:600px){
  .topbar{ flex-direction:column; align-items:flex-start; gap:.45rem; }
  .topbar nav{ justify-content:flex-start; }
  .topbar nav a{ font-size:.78rem; padding:.3rem .55rem; }
  .brand{ font-size:.95rem; }
  .xs-hide{ display:none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .panel, .panel-desc, .reveal, .topbar{ transition:none; }
  .reveal{ opacity:1; transform:none; }
  .panel:hover, .panel:focus-visible{ flex:1 1 0; }  /* no widening animation */
  .panel-desc{ max-height:none; opacity:1; }
}

/* ================================================================
   INTERIOR PAGES — walls / trees / landscaping / contact
   Same limestone language as the front page; each page is one
   movement of the same piece.
   ================================================================ */

/* ---------- page hero ---------- */
.page-hero{
  padding:clamp(7rem,16vh,10rem) clamp(1.2rem,5vw,4rem) clamp(2.8rem,6vw,4.5rem);
}
.page-hero .kicker{
  display:block; font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--moss);
  margin-bottom:.9rem;
}
.page-hero h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,7vw,5.2rem); line-height:.95; letter-spacing:-.015em;
  max-width:20ch;
}
.page-hero .lede{
  margin-top:1.4rem; max-width:58ch;
  font-size:clamp(1rem,1.6vw,1.15rem); color:var(--ink-soft);
}

/* ---------- strata divider — a cut through Kentucky ground ----------
   sod · topsoil · clay · limestone. Used under every interior hero. */
.strata{
  height:clamp(26px,4.5vw,44px);
  background:linear-gradient(
    to bottom,
    var(--moss) 0 22%,
    #4A443A 22% 46%,
    #8A6B48 46% 68%,
    var(--limestone-deep) 68% 100%);
  border-top:2px solid var(--ink);
  border-bottom:6px solid var(--ink);
}

/* ---------- generic section bands ---------- */
.sect{ padding:clamp(3.2rem,8vw,6.5rem) clamp(1.2rem,5vw,4rem); }
.sect--ink{ background:var(--ink); color:var(--limestone); }
.sect--moss{ background:var(--moss); color:#fff; }
.sect--line{ border-bottom:1px solid var(--joint); }
.sect > h2, .sect-head h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem,4.5vw,3.4rem); line-height:1; letter-spacing:-.01em;
  margin-bottom:.9rem;
}
.sect-head{ max-width:62ch; margin-bottom:clamp(1.8rem,4vw,3rem); }
.sect-head p{ color:var(--ink-soft); }
.sect--ink .sect-head p{ color:rgba(233,228,214,.75); }

/* ---------- duo: photo + words ---------- */
.duo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center;
}
.duo + .duo{ margin-top:clamp(2.5rem,6vw,4.5rem); }
.duo--flip .duo-media{ order:2; }
.duo-media{ position:relative; border:1px solid var(--joint); }
.duo-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.duo-media figcaption{
  position:absolute; left:0; right:0; bottom:0;
  font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--limestone);
  padding:1.4rem .8rem .55rem;
  background:linear-gradient(to top, rgba(33,30,24,.85), transparent);
}
.duo-copy h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1; letter-spacing:-.01em;
  margin-bottom:.8rem;
}
.duo-copy p{ color:var(--ink-soft); margin-bottom:.8rem; }
.duo-copy p:last-child{ margin-bottom:0; }
.sect--ink .duo-copy p{ color:rgba(233,228,214,.78); }

/* ---------- speclist: the services, counted like courses ---------- */
.speclist{
  list-style:none; padding:0; counter-reset:spec;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,3.5vw,2.6rem);
}
.speclist li{
  counter-increment:spec;
  border-top:3px solid var(--moss); padding-top:.9rem;
}
.speclist li::before{
  content:counter(spec,decimal-leading-zero);
  display:block; font-family:var(--display); font-weight:800;
  font-size:2.2rem; line-height:1; color:var(--tan); margin-bottom:.5rem;
}
.speclist h3{
  font-family:var(--display); font-weight:700; font-size:1.2rem;
  margin-bottom:.4rem;
}
.speclist p{ font-size:.93rem; color:var(--ink-soft); }
.sect--ink .speclist p{ color:rgba(233,228,214,.75); }
.sect--ink .speclist li{ border-top-color:var(--tan); }

/* ---------- anatomy: what's under a wall (walls page) ---------- */
.anatomy{ display:grid; gap:2px; margin-top:clamp(1.8rem,4vw,3rem); }
.anatomy .layer{
  display:grid; grid-template-columns:clamp(110px,26vw,240px) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.2rem); align-items:center;
}
.anatomy .band{ align-self:stretch; border:1px solid rgba(233,228,214,.35); }
.anatomy .label{ padding:.55rem 0; }
.anatomy .label h3{
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  color:var(--limestone);
}
.anatomy .label p{
  font-size:.9rem; color:rgba(233,228,214,.72); max-width:52ch;
}
/* cap — squared and glued */
.layer--cap .band{ min-height:2.6rem; background:var(--limestone-deep); }
/* block courses — horizontal joints strong, verticals faint */
.layer--courses .band{
  min-height:8.5rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(33,30,24,.35) 44px 46px),
    repeating-linear-gradient(0deg, var(--tan) 0 26px, var(--ink) 26px 29px);
}
/* drain stone — clean rock, and the pipe running to daylight */
.layer--drain .band{
  position:relative; min-height:5.5rem;
  background:
    radial-gradient(circle 5px at 10px 12px, var(--limestone-deep) 92%, transparent),
    radial-gradient(circle 5px at 28px 30px, #C9BFA4 92%, transparent),
    radial-gradient(circle 5px at 44px 10px, var(--limestone-deep) 92%, transparent),
    radial-gradient(circle 5px at 20px 44px, #C9BFA4 92%, transparent),
    radial-gradient(circle 5px at 48px 40px, var(--limestone-deep) 92%, transparent);
  background-size:56px 56px; background-color:#3A362D;
}
.layer--drain .band::after{
  content:""; position:absolute; left:12%; bottom:8px;
  width:2rem; height:2rem; border-radius:50%;
  border:3px dashed var(--limestone); background:var(--ink);
}
/* base — crushed stone, compacted in lifts */
.layer--base .band{
  min-height:3.2rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(233,228,214,.28) 12px 13px),
    #6B5F49;
}
/* undisturbed ground */
.layer--ground .band{
  min-height:2.6rem;
  background:repeating-linear-gradient(45deg, transparent 0 7px, rgba(233,228,214,.3) 7px 8px);
}
.anatomy-note{
  margin-top:1.2rem; font-size:.8rem; color:rgba(233,228,214,.55);
}
/* the diagram, in the dirt — small proof shot beside/below it */
.anatomy-proof{
  margin-top:clamp(1.8rem,4vw,2.8rem); max-width:400px;
  border-color:rgba(233,228,214,.35);
}
.anatomy-proof img{ aspect-ratio:auto; height:auto; }

/* ---------- straight answers ---------- */
.qa{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.6rem,4vw,3rem);
}
.qa div{ border-left:3px solid var(--tan); padding-left:1.1rem; }
.qa h3{
  font-family:var(--display); font-weight:700; font-size:1.1rem;
  margin-bottom:.45rem;
}
.qa p{ font-size:.93rem; color:var(--ink-soft); }

/* ---------- trio: three photos in a row ---------- */
.trio{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
}
.trio figure{ position:relative; overflow:hidden; }
.trio img{ width:100%; height:clamp(180px,24vw,300px); object-fit:cover; }
.trio figcaption{
  position:absolute; left:0; right:0; bottom:0;
  font-size:.78rem; font-weight:600; color:var(--limestone);
  padding:1.4rem .8rem .55rem;
  background:linear-gradient(to top, rgba(33,30,24,.85), transparent);
}

/* ---------- contact page ---------- */
.contact-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
.talk-card{
  border:1px solid var(--joint); background:#fff9;
  padding:1.4rem 1.4rem 1.5rem; margin-bottom:1.1rem;
}
.talk-card h2{
  font-family:var(--display); font-weight:800; font-size:1.25rem;
  margin-bottom:.4rem;
}
.talk-card p{ font-size:.93rem; color:var(--ink-soft); }
.talk-card .big{
  display:inline-block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.5rem,3.5vw,2.1rem); color:var(--ink);
  text-decoration:none; border-bottom:3px solid var(--tan);
  margin:.35rem 0 .5rem;
}
.towns{
  list-style:none; padding:.4rem 0 0; columns:2; gap:1.5rem;
  font-size:.93rem; color:var(--ink-soft);
}
.towns li{ padding:.15rem 0; break-inside:avoid; }
.towns li::before{ content:"· "; color:var(--tan); font-weight:700; }

.cform label{
  display:block; font-weight:600; font-size:.88rem; margin:1rem 0 .3rem;
}
.cform input, .cform select, .cform textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink);
  background:#fff; border:1px solid var(--joint); border-radius:2px;
  padding:.65rem .75rem;
}
.cform textarea{ min-height:8.5rem; resize:vertical; }
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible{
  outline:3px solid var(--tan); outline-offset:1px;
}
.cform button{
  margin-top:1.3rem; cursor:pointer; border:2px solid var(--moss);
  background:var(--moss); color:#fff; font:inherit; font-weight:700;
  font-size:1rem; padding:.85rem 1.7rem; border-radius:3px;
}
.cform button:hover{ background:var(--moss-deep); }
.form-note{ margin-top:.8rem; font-size:.8rem; color:var(--ink-soft); }

.checklist{ list-style:none; padding:0; }
.checklist li{
  position:relative; padding:.3rem 0 .3rem 1.6rem;
  font-size:.93rem; color:var(--ink-soft);
}
.checklist li::before{
  content:""; position:absolute; left:0; top:.62rem;
  width:.8rem; height:.8rem; background:var(--tan);
}

/* current page in the nav */
.topbar nav a[aria-current="page"]{
  background:var(--limestone-deep); box-shadow:inset 0 -3px 0 var(--moss);
}

/* ---------- interior responsive ---------- */
@media (max-width:880px){
  .duo, .duo--flip{ grid-template-columns:1fr; }
  .duo--flip .duo-media{ order:0; }
  .speclist{ grid-template-columns:1fr; }
  .qa{ grid-template-columns:1fr; }
  .trio{ grid-template-columns:1fr; }
  .trio img{ height:clamp(200px,52vw,320px); }
  .contact-wrap{ grid-template-columns:1fr; }
  .anatomy .layer{ grid-template-columns:clamp(90px,30vw,140px) minmax(0,1fr); }
}