/* ============================================================
   INCAPOTATO — TERRACE HILLSIDE theme — /css/style.css
   Light andean palette. Light theme only.
   ============================================================ */

/* ---- Root palette constants ---- */
:root{
  --terrace-day:#F1EEE1;
  --stone-ink:#2E2D26;
  --terra-ochre:#B5722F;
  --andean-stone:#909283;
  --field-panel:#2B2C24;
  --loom-cream:#FAF6E8;
  --chakana-black:#1F211B;
  --cap-ochre-light:#C9893F;
  --cap-ochre-deep:#945A22;
  --cap-stone-mid:#A7A999;
  --field-line:#E0DCCB;
}

/* ---- Base reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;
  line-height:1.7;
  color:var(--stone-ink);
  background:var(--terrace-day);
  overflow-x:hidden;
}

a{color:var(--terra-ochre);text-decoration:none;}
a:hover{color:var(--cap-ochre-deep);}

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

.wrap-h{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

.no-js-reveal{opacity:1;transform:none;}

/* ============================================================
   STAIR PATH HEADER — a horizontal band, NOT sticky
   ============================================================ */

.stairheader-band{
  width:100%;
  background:var(--stone-ink);
  border-bottom:4px solid var(--terra-ochre);
  position:relative;
}

.stairheader-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1120px;
  margin:0 auto;
  padding:18px 24px;
}

.wordmark-lockup{
  display:flex;
  align-items:center;
  gap:14px;
}

.stairglyph-descend{
  display:grid;
  grid-template-columns:22px 26px 32px;
  grid-template-rows:repeat(3,10px);
  gap:2px;
}

.stairglyph-descend .stair-step-a{
  grid-column:1;grid-row:3;
  background:var(--loom-cream);
}
.stairglyph-descend .stair-step-b{
  grid-column:2;grid-row:3;
  background:var(--andean-stone);
}
.stairglyph-descend .stair-step-c{
  grid-column:3;grid-row:3;
  background:var(--terra-ochre);
}

.wordmark-plate{
  font-family:Georgia,serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:2px;
  color:var(--loom-cream);
  background:var(--terra-ochre);
  padding:6px 14px;
  border-radius:3px;
  box-shadow:3px 3px 0 var(--andean-stone);
}

.wordmark-plate a{color:var(--loom-cream);}

.channel-links{
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
}

.channel-mark{
  position:relative;
  padding:6px 0;
  font-size:17px;
  color:var(--loom-cream);
  border-bottom:3px solid transparent;
}

.channel-mark::before{
  content:"";
  display:inline-block;
  width:14px;
  height:4px;
  background:var(--terra-ochre);
  margin-right:8px;
  vertical-align:middle;
  border-radius:1px;
}

.channel-mark a{color:var(--loom-cream);}
.channel-mark a:hover{color:var(--terra-ochre);}

.channel-mark--active a{
  color:var(--terra-ochre);
  border-bottom:2px solid var(--terra-ochre);
}

.cta-chip{
  font-family:Georgia,serif;
  background:var(--terra-ochre);
  color:var(--loom-cream);
  padding:9px 16px;
  border-radius:3px;
  white-space:nowrap;
  box-shadow:3px 3px 0 var(--andean-stone);
}

.cta-chip a{color:var(--loom-cream);}
.cta-chip:hover{background:var(--cap-ochre-deep);}

.chakana-glyph{
  flex-shrink:0;
  display:grid;
  grid-template-columns:repeat(5,6px);
  grid-template-rows:repeat(5,6px);
  gap:1px;
}

.chakana-one{background:var(--terra-ochre);}
.chakana-two{background:var(--loom-cream);}
.chakana-three{background:var(--andean-stone);}

/* ============================================================
   TERRACE DAY wrapper
   ============================================================ */

.terrace-range{
  background:var(--terrace-day);
}

/* ============================================================
   T1 THE VALLEY FLOOR — first screen hero
   ============================================================ */

.terrace-t1{
  padding:42px 0 10px;
  border-bottom:2px solid var(--field-line);
}

.valley-title-row{
  display:flex;
  align-items:flex-start;
  gap:30px;
  flex-wrap:wrap;
  max-width:1040px;
  margin:10px auto 18px;
  padding:0 24px;
}

.valley-glyph-lft{
  margin-top:16px;
  flex-shrink:0;
  display:grid;
  grid-template-columns:repeat(5,10px);
  grid-template-rows:repeat(5,10px);
  gap:2px;
}

.valley-glyph-lft .chakana-one{background:var(--terra-ochre);}
.valley-glyph-lft .chakana-two{background:var(--field-panel);}

.hillside-title{
  font-size:54px;
  line-height:1.05;
  font-weight:700;
  color:var(--stone-ink);
  max-width:760px;
}

.hillside-title .title-accent{
  color:var(--terra-ochre);
}

.valley-standfirst{
  margin-top:24px;
  font-size:21px;
  max-width:820px;
  color:var(--stone-ink);
  padding:0 24px;
}

.valley-standfirst .standfirst-plate{
  display:inline-block;
  background:var(--terra-ochre);
  color:var(--loom-cream);
  padding:1px 8px;
  border-radius:2px;
}

/* The ascent rule: a stepped line of four rises */
.ascent-rule{
  max-width:1080px;
  margin:30px auto 14px;
  padding:0 24px;
}

.ascent-steps{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:64px;
}

.ascent-tread{
  width:22%;
  background:var(--terra-ochre);
  border-radius:2px 2px 0 0;
}

.ascent-tread--d1{height:20px;}
.ascent-tread--d2{height:34px;}
.ascent-tread--d3{height:48px;}
.ascent-tread--d4{height:62px;}

.ascent-note{
  margin-top:8px;
  font-size:14px;
  color:var(--andean-stone);
}

/* ============================================================
   Genesis wall cap module (top edge of every terrace)
   ============================================================ */

.terrace-cap{
  width:100%;
  border-top:6px solid var(--andean-stone);
}

.cap-stones{
  display:grid;
  grid-template-columns:repeat(14,1fr);
  gap:3px;
  padding:5px 3px;
}

.cap-block{
  height:16px;
  border-radius:2px;
  background:var(--andean-stone);
}

.cap-block--o{background:var(--terra-ochre);}
.cap-block--c{background:var(--loom-cream);}
.cap-block--s{background:var(--andean-stone);}

.cap-label-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 18px;
  background:var(--chakana-black);
  color:var(--loom-cream);
}

.cap-numeral{
  font-family:Georgia,serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:3px;
  color:var(--terra-ochre);
}

.text-stone-label{
  font-family:Georgia,serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:4px;
  color:var(--andean-stone);
  text-transform:uppercase;
}

.channel-notch{
  width:34px;
  height:10px;
  background:var(--terra-ochre);
  border-radius:0 0 4px 4px;
}

/* ============================================================
   T2 THE CULTIVATED FIELDS — field plot grid
   ============================================================ */

.terrace-t2{
  padding:36px 0 26px;
}

.field-heading{
  margin-bottom:22px;
}

.field-heading .head-label{
  font-size:14px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--terra-ochre);
}

.field-heading h2{
  font-size:38px;
  color:var(--stone-ink);
  margin-top:4px;
}

.field-plot-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.field-plot{
  background:var(--loom-cream);
  border:1px solid var(--field-panel);
  border-radius:2px;
  box-shadow:6px 6px 0 var(--field-panel);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.field-plot-cap{
  height:12px;
  background:var(--terra-ochre);
}

.field-corners{
  display:flex;
  justify-content:space-between;
  padding:8px 10px;
}

.field-corner-block{
  width:10px;
  height:10px;
  background:var(--andean-stone);
  border-radius:2px;
}

.field-plot-body{
  padding:4px 22px 24px;
}

.field-plot-index{
  font-family:Georgia,serif;
  font-size:14px;
  letter-spacing:2px;
  color:var(--terra-ochre);
}

.field-plot-body h3 a{
  font-size:26px;
  color:var(--stone-ink);
  line-height:1.2;
}

.field-plot-body h3 a:hover{color:var(--terra-ochre);}

.field-plot-body p{
  margin-top:10px;
  font-size:16px;
  color:var(--stone-ink);
}

/* ============================================================
   T3 THE STAIR CHANNEL — prose beside drawn stair
   ============================================================ */

.terrace-t3{
  padding:36px 0 26px;
}

.stair-channel-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  align-items:start;
}

.stair-channel-prose .head-label{
  font-size:14px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--terra-ochre);
}

.stair-channel-prose h2{
  font-size:38px;
  margin-top:4px;
  color:var(--stone-ink);
}

.stair-channel-prose .prose-col{
  max-width:62ch;
  margin-top:18px;
  font-size:18px;
  color:var(--stone-ink);
}

.stair-channel-prose p{
  margin-bottom:16px;
}

.stair-channel-diagram{
  background:var(--chakana-black);
  border:6px solid var(--andean-stone);
  border-radius:4px;
  padding:26px 20px;
}

.diagram-caption{
  font-size:13px;
  letter-spacing:2px;
  color:var(--andean-stone);
  margin-bottom:18px;
  text-align:center;
  text-transform:uppercase;
}

.diagram-caption-key{
  font-size:13px;
  letter-spacing:2px;
  color:var(--andean-stone);
  text-align:center;
  margin-top:16px;
}

.stair-run{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}

.stair-tread-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

.stair-tread-align{
  font-family:Georgia,serif;
  width:38px;
  text-align:right;
  font-size:15px;
  color:var(--terra-ochre);
  flex-shrink:0;
}

.stair-tread-bar{
  height:22px;
  background:var(--terra-ochre);
  flex:0 0 auto;
  width:100%;
  border-radius:2px;
  box-shadow:0 4px 0 var(--cap-ochre-deep);
}

.stair-lead-block{
  width:100%;
  height:14px;
  background:var(--andean-stone);
  flex-shrink:0;
}

.stair-tread-row-ts{
  justify-content:flex-end;
}

.stair-tread-row-tx .stair-tread-bar{background:var(--chakana-black);}
.stair-tread-row-b .stair-tread-bar{width:90%;}
.stair-tread-row-t .stair-tread-bar{width:70%;}
.stair-tread-row-s .stair-tread-bar{width:55%;}

/* survey-ledger diagram lines used on the services page */
.survey-ledger{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.diagram-line{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:8px 10px;
  border-left:5px solid var(--terra-ochre);
}

.diagram-line strong{
  color:var(--terra-ochre);
  font-size:15px;
  letter-spacing:3px;
  text-transform:uppercase;
  white-space:nowrap;
}

.diagram-line span{
  color:var(--loom-cream);
  font-size:14px;
  line-height:1.5;
}

/* ============================================================
   T4 THE WATCH HUT — contact form & lintel plate
   ============================================================ */

.terrace-t4{
  padding:36px 0 6px;
}

.watch-hut-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:start;
}

.hut-heading .head-label{
  font-size:14px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--terra-ochre);
}

.hut-heading h2{
  font-size:38px;
  color:var(--stone-ink);
  margin-top:4px;
}

.harvest-sheet{
  background:var(--loom-cream);
  border:1px solid var(--field-panel);
  border-radius:3px;
  padding:26px 24px 30px;
  position:relative;
}

.harvest-sheet::before{
  content:url("");
  display:none;
}

.sheet-clip{
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  width:74px;
  height:18px;
  background:var(--terra-ochre);
  border-radius:4px;
  box-shadow:0 2px 0 var(--cap-ochre-deep);
}

.sheet-title{
  font-size:22px;
  color:var(--stone-ink);
  margin-top:10px;
  margin-bottom:20px;
}

.tally-field{
  margin-bottom:16px;
}

.tally-field label{
  display:block;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--stone-ink);
  margin-bottom:6px;
}

.tally-field input,
.tally-field textarea{
  width:100%;
  font-family:Georgia,serif;
  font-size:16px;
  color:var(--stone-ink);
  background:var(--field-line);
  border:1px solid var(--field-panel);
  border-radius:2px;
  padding:11px 12px;
}

.tally-field textarea{
  min-height:130px;
  resize:vertical;
}

.ochre-submit-btn{
  font-family:Georgia,serif;
  font-size:18px;
  font-weight:700;
  background:var(--terra-ochre);
  color:var(--loom-cream);
  border:none;
  border-radius:3px;
  padding:12px 22px;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--andean-stone);
}

.ochre-submit-btn:hover{background:var(--cap-ochre-deep);}

.stone-lintel{
  background:var(--andean-stone);
  border:3px solid var(--chakana-black);
  border-radius:3px;
  padding:24px 24px 20px;
  position:relative;
}

.stone-lintel .lintel-title{
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--loom-cream);
  margin-bottom:14px;
  border-bottom:3px solid var(--chakana-black);
  padding-bottom:8px;
}

.stone-lintel p{
  color:var(--chakana-black);
  font-size:16px;
  line-height:1.8;
  margin-bottom:6px;
}

.stone-lintel .key-line{
  font-weight:700;
}

.lintel-lower{
  margin-top:28px;
  background:var(--andean-stone);
}

.lintel-lower strong{
  color:var(--chakana-black);
}

/* ============================================================
   Go-to-top button (round, bottom-right)
   ============================================================ */

.go-top-btn{
  position:fixed;
  right:22px;
  bottom:22px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--terra-ochre);
  color:var(--loom-cream);
  border:4px solid var(--loom-cream);
  box-shadow:0 3px 0 var(--cap-ochre-deep);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s,transform .3s;
}

.go-top-btn:hover{background:var(--cap-ochre-deep);}

.go-top-btn.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

/* ---- harvest form status ---- */
.harvest-status{
  margin-top:12px;
  font-size:15px;
  color:var(--terra-ochre);
  min-height:20px;
}

.harvest-status.visible{
  color:var(--cap-ochre-deep);
}

/* ============================================================
   Bedrock footer
   ============================================================ */

.terrace-footer{
  margin-top:30px;
}

.bedrock-band{
  background:var(--chakana-black);
  color:var(--loom-cream);
}

.bedrock-cap{
  height:10px;
  background:var(--terra-ochre);
}

.footer-links-row{
  max-width:1120px;
  margin:0 auto;
  padding:30px 24px 8px;
  text-align:center;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.footer-links-row .foot-link{color:var(--loom-cream);font-size:17px;}
.footer-links-row .foot-link:hover{color:var(--terra-ochre);}
.footer-links-row .foot-sep{color:var(--andean-stone);}

.bedrock-text{
  position:relative;
  z-index:1;
  max-width:1120px;
  margin:0 auto;
  padding:10px 24px 34px;
  text-align:center;
  color:#D9D6C8;
  line-height:1.9;
  font-size:15px;
}

.bedrock-text .bedrock-fiener{color:var(--terra-ochre);}

/* ============================================================
   Services + Contact heading band
   ============================================================ */

.page-lead-band{
  padding:34px 0 6px;
}

.page-lead-band .head-label{
  font-size:14px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--terra-ochre);
}

.page-lead-band h1{
  font-size:44px;
  color:var(--stone-ink);
  margin-top:4px;
}

.page-lead-band .lead-prose{
  max-width:820px;
  margin-top:16px;
  font-size:19px;
  color:var(--stone-ink);
}

/* add word territory markers */
.add-word-land{
  font-family:inherit;
}

/* ============================================================
   Scroll reveal (CSS only; JS and noscript coexist)
   ============================================================ */

.hillside-reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s ease,transform .9s ease;
  will-change:opacity,transform;
}

.hillside-reveal.is-visible{
  opacity:1;
  transform:none;
}

.no-js .hillside-reveal{
  opacity:1;
  transform:none;
}

/* ============================================================
   Responsive adjustments
   ============================================================ */

@media(max-width:900px){
  .hillside-title{font-size:42px;}
  .field-plot-grid{grid-template-columns:1fr 1fr;}
  .stair-channel-grid{grid-template-columns:1fr;}
  .watch-hut-grid{grid-template-columns:1fr;}
  .stairheader-inner{flex-wrap:wrap;}
}

@media(max-width:600px){
  .hillside-title{font-size:34px;}
  .field-plot-grid{grid-template-columns:1fr;}
}