/* ============================================================
   REDEMPTION LANDSCAPING
   Light, photo-led. Warm granite neutrals, forest green, and the
   logo's gold. Display face is a Garamond so the page reads in the
   same voice as the engraved wordmark on the mark itself.
   ============================================================ */
:root{
  --paper:#FCFCFA;   --stone-50:#F3F3EE;  --stone-100:#E6E7E0;  --stone-200:#D3D5CB;
  --ink:#1A1F17;     --ink-2:#4C5548;     --ink-3:#77806F;
  --forest:#2C4A32;  --forest-deep:#1B3020;  --forest-fg:#EDF1E9;
  --gold:#8A6614;    --gold-mid:#A67C1E;  --gold-bright:#C9A44C;  --gold-pale:#E7D4A2;
  --leaf:#4E6B37;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --maxw:1220px;  --gut:clamp(1.25rem,5vw,4rem);
  --r:3px;
}
/* Deliberately single-theme. A landscaping brand should read bright and outdoor;
   a dark variant is a software-product convention and reads as exactly the "tech company"
   look this site is meant to avoid. Every colour is painted explicitly from the tokens
   above, so the page holds regardless of the visitor's system setting. */
*{box-sizing:border-box}
html{color-scheme:light}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Libre Franklin",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-size:clamp(1rem,.97rem + .16vw,1.0625rem); line-height:1.7; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"EB Garamond",ui-serif,Georgia,"Times New Roman",serif;
  font-weight:600; margin:0; line-height:1.08; letter-spacing:-.012em; text-wrap:balance;
}
h1{font-size:clamp(2.6rem,1.7rem + 4.3vw,5rem); line-height:1.02}
h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.35rem)}
h3{font-size:clamp(1.2rem,1.08rem + .5vw,1.5rem)}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--gold-mid); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.narrow{max-width:70ch}
.eyebrow{
  font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:1.1rem;
}
.lede{font-size:clamp(1.0625rem,1rem + .5vw,1.3rem); line-height:1.6; color:var(--ink-2)}
section{padding-block:clamp(4rem,9vw,8rem)}
.sec-head{margin-bottom:clamp(2.5rem,5vw,4rem); max-width:64ch}
.sec-head .lede{margin-top:1.35rem}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; cursor:pointer;
  font-size:.875rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  padding:.95rem 1.6rem; border-radius:var(--r); border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn svg{flex:none}
.btn-gold{background:var(--gold-mid); color:#201804; border-color:var(--gold-mid)}
.btn-gold:hover{background:var(--gold-bright); border-color:var(--gold-bright); transform:translateY(-2px)}
.btn-forest{background:var(--forest); color:var(--forest-fg); border-color:var(--forest)}
.btn-forest:hover{background:var(--forest-deep); border-color:var(--forest-deep); transform:translateY(-2px)}
.btn-line{border-color:currentColor; color:inherit}
.btn-line:hover{background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px)}
.on-photo .btn-line{color:#fff; border-color:rgba(255,255,255,.55)}
.on-photo .btn-line:hover{background:#fff; color:var(--ink); border-color:#fff}

/* ---- header ---- */
.site-head{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.5) blur(12px); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-head.stuck{border-bottom-color:var(--stone-100)}
.head-in{display:flex; align-items:center; gap:2.5rem; min-height:80px}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; margin-right:auto}
.brand img{height:46px; width:auto}
.foot-logo{width:190px; height:auto; margin-bottom:.4rem}
.brand-type{display:grid; gap:.2rem}
.brand-type .word{
  font-family:"Cinzel",ui-serif,Georgia,serif; font-weight:600; font-size:1.0625rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-mid); line-height:1;
}
.brand-type .sub{
  display:flex; align-items:center; gap:.45rem; font-size:.5rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--leaf); line-height:1;
}
.brand-type .sub::before,.brand-type .sub::after{content:""; flex:1; height:1px; background:var(--gold-pale)}
.nav{display:flex; gap:2rem; font-size:.875rem; font-weight:500}
.nav a{text-decoration:none; color:var(--ink-2); position:relative; padding:.3rem 0}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold-mid);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:var(--ink)}
.nav-toggle{
  display:none; width:42px; height:42px; padding:0; background:none; cursor:pointer;
  border:1px solid var(--stone-200); border-radius:var(--r); color:var(--ink);
}
.nav-toggle span{display:block; width:17px; height:1.5px; background:currentColor; margin:3.5px auto; transition:transform .3s var(--ease), opacity .2s}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (max-width:940px){
  .nav,.head-cta{display:none}
  .nav-toggle{display:block}
}
.nav-drawer{
  position:fixed; inset:80px 0 auto 0; z-index:59; background:var(--paper);
  border-bottom:1px solid var(--stone-100); display:grid; padding:.5rem var(--gut) 1.5rem;
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
body.nav-open .nav-drawer{opacity:1; transform:none; visibility:visible}
.nav-drawer a{
  text-decoration:none; color:var(--ink); font-size:1.05rem; padding:.85rem 0;
  border-bottom:1px solid var(--stone-100);
}
.nav-drawer .btn{margin-top:1.25rem; justify-content:center; border-bottom:0}
.nav-scrim{
  position:fixed; inset:0; z-index:58; background:rgba(20,26,18,.35); opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
body.nav-open .nav-scrim{opacity:1; visibility:visible}

/* ---- hero ---- */
.hero{position:relative; min-height:min(88vh,780px); display:grid; align-items:end; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,22,14,.52) 0%, rgba(16,22,14,.24) 26%, rgba(16,22,14,.58) 62%, rgba(16,22,14,.93) 100%);
}
.hero-in{position:relative; z-index:1; isolation:isolate; padding-block:clamp(3rem,10vw,6rem); color:#fff}
/* the hero photo is swappable, so text legibility can't depend on which one is in.
   A localized scrim behind the copy + shadows hold up over a bright sky or a dark treeline. */
.hero-in::before{
  content:""; position:absolute; inset:auto -10% -30% -10%; height:150%; z-index:-1;
  background:radial-gradient(120% 90% at 20% 100%, rgba(12,18,10,.72) 0%, rgba(12,18,10,.34) 45%, transparent 72%);
}
.hero .eyebrow{color:var(--gold-pale); text-shadow:0 1px 12px rgba(0,0,0,.75)}
.hero h1{color:#fff; max-width:15ch; text-shadow:0 2px 26px rgba(0,0,0,.45)}
.hero-sub{text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero h1 em{font-style:italic; font-weight:500; color:var(--gold-pale)}
.hero-sub{margin-top:1.6rem; max-width:52ch; font-size:clamp(1.05rem,1rem + .45vw,1.3rem); color:rgba(255,255,255,.9); line-height:1.6}
.btn-row{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.5rem}
.hero-scroll{
  position:absolute; left:50%; bottom:1.5rem; z-index:2; translate:-50% 0;
  width:1px; height:44px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.7));
}

/* ---- page banner (interior pages) ---- */
.banner{background:var(--forest); color:var(--forest-fg); padding-block:clamp(3.5rem,7vw,6rem)}
.banner .eyebrow{color:var(--gold-pale)}
.banner h1{color:#fff; font-size:clamp(2.2rem,1.6rem + 2.8vw,3.9rem)}
.banner .lede{color:rgba(237,241,233,.82); margin-top:1.2rem}

/* ---- surfaces ---- */
.tint{background:var(--stone-50)}
.forest{background:var(--forest); color:var(--forest-fg)}
.forest .eyebrow{color:var(--gold-pale)}
.forest h2,.forest h3{color:#fff}
.forest .lede,.forest p{color:rgba(237,241,233,.8)}

/* ---- cards ---- */
.grid{display:grid; gap:clamp(1rem,2vw,1.6rem)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .g2,.g3,.g4{grid-template-columns:1fr} }

.card{
  background:var(--paper); border:1px solid var(--stone-100); border-radius:var(--r);
  padding:2rem 1.85rem; display:flex; flex-direction:column; gap:1rem;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.card:hover{
  border-color:var(--gold-pale); transform:translateY(-4px);
  box-shadow:0 18px 40px -28px rgba(26,31,23,.4);
}
.card h3{letter-spacing:-.008em}
.card p{color:var(--ink-2); font-size:.95rem}
.card ul{margin:0; padding:0; list-style:none; display:grid; gap:.5rem; border-top:1px solid var(--stone-100); padding-top:1.1rem}
.card li{font-size:.875rem; color:var(--ink-2); padding-left:1.1rem; position:relative}
.card li::before{content:""; position:absolute; left:0; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--gold-pale)}
.card .num{font-size:.6875rem; font-weight:600; letter-spacing:.18em; color:var(--gold); text-transform:uppercase}

/* ---- photo tiles ----
   height:auto is required on every ratio-controlled image: the width/height HTML
   attributes map to a used height that otherwise beats the CSS aspect-ratio, which
   rendered a 4/3 slot at the photo's full 1600px height. */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,1.4vw,1.1rem)}
@media (max-width:900px){ .tiles{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .tiles{grid-template-columns:1fr} }
.tile{position:relative; overflow:hidden; border-radius:var(--r); background:var(--stone-100); margin:0}
.tile img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; transition:transform .9s var(--ease-expo)}
.tile:hover img{transform:scale(1.05)}
.tile figcaption{
  position:absolute; inset:auto 0 0 0; padding:2.6rem 1.15rem 1.05rem; color:#fff;
  font-size:.8125rem; font-weight:500; line-height:1.4;
  background:linear-gradient(180deg, transparent, rgba(14,20,12,.88));
  transform:translateY(6px); opacity:.9; transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.tile:hover figcaption{transform:none; opacity:1}
.tile.wide{grid-column:span 2}
@media (max-width:520px){ .tile.wide{grid-column:span 1} }

/* ---- split feature ---- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.split.flip .split-media{order:2}
@media (max-width:860px){ .split{grid-template-columns:1fr} .split.flip .split-media{order:0} }
.split-media{overflow:hidden; border-radius:var(--r)}
.split-media img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}

/* ---- stats / strip ---- */
.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--stone-100)}
@media (max-width:820px){ .strip{grid-template-columns:repeat(2,1fr)} }
.strip > div{background:var(--paper); padding:2rem 1.5rem}
.strip dt{font-size:.625rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.6rem}
.strip dd{margin:0; font-size:.95rem; color:var(--ink)}

/* ---- seasons ---- */
.season-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); overflow:hidden}
@media (max-width:900px){ .season-row{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .season-row{grid-template-columns:1fr} }
.season{background:var(--forest); padding:1.75rem 1.4rem; display:grid; gap:.8rem; align-content:start}
.season .mo{font-size:.625rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-pale)}
.season h3{font-size:1.15rem}
.season ul{margin:0; padding:0; list-style:none; display:grid; gap:.4rem}
.season li{font-size:.85rem; color:rgba(237,241,233,.78); padding-left:.9rem; position:relative}
.season li::before{content:""; position:absolute; left:0; top:.68em; width:4px; height:1px; background:var(--gold-pale)}

/* ---- people ---- */
/* align-content:start is load-bearing — .person is stretched to the tallest card in the row,
   and auto rows would otherwise share out the leftover space, so the partner with the longest
   bio got the least stretch and their name sat 9px higher than the others. */
.person{display:grid; gap:1rem; align-content:start}
.person img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r); background:var(--stone-100)}
.person .nm{font-family:"EB Garamond",serif; font-size:1.3rem; font-weight:600}
.person .role{font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.person p{font-size:.9rem; color:var(--ink-2)}
.bio{margin-top:-.2rem}
.bio summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); padding:.2rem 0;
}
.bio summary::-webkit-details-marker{display:none}
.bio summary::after{content:"+"; font-size:1rem; line-height:1; transition:transform .3s var(--ease)}
.bio[open] summary::after{transform:rotate(45deg)}
.bio summary:hover{color:var(--ink)}
.bio p{margin-top:.85rem}
.bio p + p{margin-top:.7rem}
.verse{
  border-left:2px solid var(--gold-pale); padding:.2rem 0 .2rem 1.2rem;
  font-family:"EB Garamond",serif; font-style:italic; font-size:1.05rem;
  line-height:1.5; color:var(--ink-2); max-width:46ch;
}
.verse cite{
  display:block; margin-top:.65rem; font-family:"Libre Franklin",sans-serif; font-style:normal;
  font-size:.65rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.forest .verse{border-left-color:var(--gold-pale); color:rgba(237,241,233,.85)}
.forest .verse cite{color:var(--gold-pale)}

/* ---- quote / verse ---- */
.pull{
  font-family:"EB Garamond",serif; font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);
  font-style:italic; line-height:1.4; color:var(--ink); max-width:26ch;
}
.pull cite{display:block; margin-top:1.1rem; font-family:"Libre Franklin",sans-serif; font-style:normal;
  font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.forest .pull{color:#fff}
.forest .pull cite{color:var(--gold-pale)}

/* ---- form ---- */
form{display:grid; gap:1.1rem}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:560px){ .row2{grid-template-columns:1fr} }
.field{display:grid; gap:.45rem}
label{font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
input,select,textarea{
  font-family:inherit; font-size:.95rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--stone-200); border-radius:var(--r); padding:.85rem .9rem; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--gold-mid); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold-mid) 16%, transparent);
}
textarea{resize:vertical; min-height:110px}
.checks{display:flex; flex-wrap:wrap; gap:.5rem}
.check{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.85rem; color:var(--ink-2);
  border:1px solid var(--stone-200); border-radius:100px; padding:.5rem .95rem; transition:all .25s var(--ease);
}
.check input{width:auto; margin:0; accent-color:var(--gold-mid)}
.check:has(input:checked){border-color:var(--gold-mid); color:var(--ink); background:color-mix(in srgb, var(--gold-mid) 8%, transparent)}
.form-status{font-size:.875rem; padding:.85rem 1rem; border-radius:var(--r); border:1px solid var(--gold-mid); background:color-mix(in srgb, var(--gold-mid) 8%, transparent)}
.form-status[hidden]{display:none}

/* ---- closing verse: one per page, always the last thing before the CTA ---- */
.verse-band{background:var(--paper); padding-block:clamp(3rem,6vw,4.5rem); border-top:1px solid var(--stone-100)}
.verse-band blockquote{
  margin:0 auto; max-width:38ch; text-align:center;
  font-family:"EB Garamond",ui-serif,Georgia,serif; font-style:italic;
  font-size:clamp(1.15rem,1rem + .8vw,1.5rem); line-height:1.5; color:var(--ink-2);
}
.verse-lead, .verse-tail{
  text-align:center; margin-inline:auto; max-width:46ch; color:var(--ink-3);
}
.verse-lead{
  font-size:.65rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.4rem;
}
.verse-tail{margin-top:1.6rem; font-size:.95rem; line-height:1.6}
.verse-band cite{
  display:block; margin-top:1rem; font-family:"Libre Franklin",sans-serif; font-style:normal;
  font-size:.65rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}

/* ---- CTA band ---- */
.cta-band{background:var(--forest-deep); color:var(--forest-fg); text-align:center}
.cta-band h2{color:#fff}
.cta-band .lede{color:rgba(237,241,233,.8); margin-inline:auto}
.cta-band .btn-row{justify-content:center}

/* ---- footer ---- */
.site-foot{background:var(--forest-deep); color:rgba(237,241,233,.72); padding-block:clamp(3rem,6vw,4.5rem) 2rem; font-size:.875rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,4vw,3.5rem); padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.12)}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }
.foot-grid h4{font-size:.625rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-pale); margin-bottom:1rem; font-family:"Libre Franklin",sans-serif}
.foot-grid a{color:rgba(237,241,233,.72); text-decoration:none; display:block; padding:.3rem 0}
.foot-grid a:hover{color:var(--gold-pale)}
.foot-brand .brand-type .word{color:var(--gold-pale)}
.foot-brand .brand-type .sub{color:rgba(237,241,233,.6)}
.foot-brand p{margin-top:1.1rem; max-width:34ch; color:rgba(237,241,233,.62); font-size:.85rem}
.foot-base{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-top:1.75rem; font-size:.78rem; color:rgba(237,241,233,.5)}
.foot-verse{font-family:"EB Garamond",serif; font-style:italic; font-size:.95rem; color:rgba(237,241,233,.62)}
.foot-verse em{font-style:normal; font-size:.7rem; letter-spacing:.1em; color:rgba(237,241,233,.42); margin-left:.5rem}

/* ============================================================
   MOTION — every hidden state is gated on .js so the page is
   readable if the script never runs, and collapses to static
   under prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0; transform:translateY(22px);
    transition:opacity .8s var(--ease) calc(var(--i,0) * 80ms), transform .8s var(--ease) calc(var(--i,0) * 80ms);}
  .js .reveal.inview{opacity:1; transform:none}

  .js .reveal-img{opacity:0; transform:translateY(18px) scale(1.02);
    transition:opacity .7s var(--ease) calc(var(--i,0) * 70ms), transform .9s var(--ease-expo) calc(var(--i,0) * 70ms);}
  .js .reveal-img.inview{opacity:1; transform:none}

  .js .hero .eyebrow{animation:rl-down .8s var(--ease) .15s both}
  .js .hero h1{animation:rl-rise 1s var(--ease-expo) .3s both}
  .js .hero-sub{animation:rl-rise .9s var(--ease) .55s both}
  .js .hero .btn-row{animation:rl-rise .9s var(--ease) .7s both}
  .js .hero-media img{animation:rl-zoom 1.8s var(--ease-expo) both}
  .js .hero-scroll{animation:rl-fade 1s var(--ease) 1.2s both}
}
@keyframes rl-rise{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
@keyframes rl-down{from{opacity:0; transform:translateY(-12px)} to{opacity:1; transform:none}}
@keyframes rl-fade{from{opacity:0} to{opacity:1}}
@keyframes rl-zoom{from{transform:scale(1.09)} to{transform:none}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .card:hover,.btn:hover{transform:none}
  .tile:hover img{transform:none}
}