/* ============================================================
   cedarvalleystumps.com — foundation
   Derived from the PROVEN reference build, stumpservicesnearme.com:
   tokens extracted from its live computed styles, then contrast-verified.
   Every pair we ship measures AA or better.
   ============================================================ */

:root {
  /* --- colour ------------------------------------------------
     HIS BRAND, read from the Squarespace site's own theme tokens
     (--accent-hsl / --darkAccent-hsl on the rendered page), not sampled
     from photos. The previous orange traced back to the RED RENTAL he
     asked us to de-emphasise, which is exactly the wrong source. */
  --tan:      #c2b180;   /* --accent — his primary. Also his page background */
  --olive:    #546a2f;   /* --darkAccent — his secondary */
  --olive-d:  #405123;   /* darkened olive: carries white text at 8.68:1 */
  --ink:      #14120f;   /* near-black text, warm */
  --char:     #241f18;   /* the dark stage */
  --cream:    #f7f3ea;   /* page ground — a light wash of his tan */
  --cream2:   #efe8d8;   /* alternate band */
  --line:     #d8cdb4;   /* hairlines, borders, inputs */
  --mut:      #5f5747;   /* secondary text */
  --white:    #fdfbf6;   /* card + input fill */

  /* CTA colour. Black on tan measures 9.89:1 — his own button treatment,
     and it beats what we had. --olive-d is the text-bearing alternative. */
  --btn-bg:    var(--tan);
  --btn-label: var(--ink);

  /* --- type --------------------------------------------------
     System stack, no webfont (a webfont was the largest CLS
     contributor on a previous build; best fix is not having it). */
  --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --step--1: .8rem;
  --step-0:  1rem;
  --step-1:  1.3rem;
  --step-2:  clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-3:  clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --step-4:  clamp(2.2rem, 1.5rem + 3.4vw, 3.6rem);

  /* --- space --- */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem;  --s6:4.5rem; --s7:6rem;

  /* Retired orange tokens, aliased so no rule silently falls back to
     an inherited colour. Remove once every reference is migrated. */
  --orange:   var(--tan);
  --orange-d: var(--olive-d);

  --wrap: 1150px;
  --radius:    0;   /* 90-degree corners — owner's call */
  --radius-sm: 0;
  --radius-lg: 0;
  --hard: 4px 4px 0 0 var(--olive-d);  /* THE signature: a hard offset, not a blur */
  --shadow: 0 1px 2px rgba(27,24,19,.08), 0 8px 24px rgba(27,24,19,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:var(--step-0)/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{margin:0 0 var(--s2); line-height:1.08; font-weight:800; letter-spacing:-.02em}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1)}
h5,h6{font-size:var(--step-0)}
p{margin:0 0 var(--s2)}
p:last-child{margin-bottom:0}

a{color:var(--orange-d); text-underline-offset:.15em}
a:hover{color:var(--ink)}

img,video{max-width:100%; height:auto; display:block}

/* --- layout ------------------------------------------------- */
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.section{padding-block:var(--s6)}
.section--alt{background:var(--cream2)}
.section--dark{background:var(--char); color:var(--cream)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--cream)}
.section--ink{background:var(--ink); color:var(--cream)}

.stack > * + *{margin-top:var(--s2)}
.grid{display:grid; gap:var(--s4)}
@media (min-width:820px){ .grid--2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:640px){ .grid--auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} }

/* --- THE EYEBROW — the reference's typographic signature ----- */
.eyebrow{
  font-size:var(--step--1); font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--orange); margin:0 0 var(--s2);
}
.section--dark .eyebrow,.section--ink .eyebrow{color:var(--orange)}

/* --- buttons: bright orange, near-black label, HARD shadow --- */
.btn{
  display:inline-block; border:0; border-radius:0;
  background:var(--btn-bg); color:var(--btn-label);
  font:800 var(--step-0)/1.2 var(--font);
  letter-spacing:.05em; text-transform:uppercase;
  padding:.95em 1.6em; text-decoration:none; cursor:pointer;
  box-shadow:var(--hard);
  transition:transform .1s ease, box-shadow .1s ease;
}
.btn:hover{color:var(--btn-label); transform:translate(1px,1px); box-shadow:3px 3px 0 0 var(--orange-d)}
.btn:active{transform:translate(4px,4px); box-shadow:0 0 0 0 var(--orange-d)}
.btn:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.btn--block{display:block; width:100%; text-align:center}
.btn--ghost{
  background:transparent; color:var(--cream);
  box-shadow:inset 0 0 0 2px var(--orange);
}
.btn--ghost:hover{background:var(--orange); color:var(--btn-label); transform:none}
.section--alt .btn--ghost,.section:not(.section--dark) .btn--ghost{color:var(--ink)}

/* --- cards: bordered and square, not soft ------------------- */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3)}
.card--accent{border-left:5px solid var(--orange)}

/* --- utility --- */
.muted{color:var(--mut)}
.center{text-align:center}
.lede{font-size:var(--step-1); line-height:1.5}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}