/* Alexander Construction & Landscaping — shared styles */
:root{
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --forest:#3c4a26; --forest-deep:#2b3618; --sage:#7f8c5a; --sage-soft:#9daa78;
  --brass:#b8924a; --brass-deep:#916e33; --cream:#f5f1e6; --paper:#fbfaf5;
  --bg:#ffffff; --ink:#20261a; --muted:#5d6350; --line:#e6e2d4; --card:#ffffff;
  --overlay: rgba(24,30,16,.52);
}
[data-theme="dark"]{
  --bg:#14170f; --paper:#191d12; --cream:#1e2214; --card:#1c2013;
  --ink:#eef0e6; --muted:#a9b096; --line:#2c3220; --overlay: rgba(10,14,6,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Geist',system-ui,sans-serif;font-size:18px;line-height:1.6;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);}
body.dys, body.dys *{font-family:'Lexend',sans-serif !important;letter-spacing:.01em}
h1,h2,h3{font-family:'Oswald',sans-serif;font-weight:600;line-height:1.02;margin:0;
  letter-spacing:.005em;text-wrap:balance}
p{text-wrap:pretty;margin:0}
a{color:var(--forest);text-decoration:none;transition:color .3s var(--ease)}
a:hover{color:var(--brass-deep)}
img{display:block;max-width:100%}
button{font-family:inherit}
::selection{background:var(--sage-soft);color:#12160c}

@keyframes kenburns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.14) translate(-1.5%,-2%)}}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
@keyframes growTrunk{to{stroke-dashoffset:0}}
@keyframes leafPop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* Reveal — visible by default so content shows without JS; JS adds the entrance */
.reveal{opacity:1}
.reveal.pre{opacity:0;transform:translateY(28px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* Nav / footer / mobile link underlines */
.navlink,.footlink,.moblink{position:relative}
.navlink::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.navlink:hover::after,.navlink.active::after{transform:scaleX(1)}
.navlink.active{font-weight:700}
.moblink::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.moblink:hover::after,.moblink.active::after{transform:scaleX(1)}
.footlink::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:2px;background:var(--sage-soft);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.footlink:hover::after{transform:scaleX(1)}

/* Hover utilities (replacing runtime style-hover) */
.h-forest:hover{background:var(--forest-deep)}
.h-forest-lift:hover{background:var(--forest-deep);transform:translateY(-1px)}
.h-brass:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(145,110,51,.6)}
.h-ghost:hover{background:rgba(255,255,255,.24)}
.h-ghost2:hover{background:rgba(255,255,255,.26)}
.icon-btn:hover{background:rgba(127,140,90,.25)}
.menu-item:hover{background:var(--cream)}
.contact-card:hover{background:var(--card)}
.sms-big:hover{transform:translateX(4px)}

/* Service preview cards */
.card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(20,26,12,.32);border-color:var(--brass-deep)}
.card .cardimg{transition:transform .7s var(--ease)}
.card:hover .cardimg{transform:scale(1.06)}
.card .arrow{transition:transform .3s var(--ease)}
.card:hover .arrow{transform:translateX(4px)}

/* FAQ icon */
.faq-ico{transition:transform .35s var(--ease)}

/* Responsive grids (mirrors original breakpoints) */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,80px)}
.about-story-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,72px);align-items:center}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,56px)}
.svc-detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.svc-detail.reverse .svc-media{order:2}

/* Header nav / burger visibility */
.site-nav{display:flex}
.burger{display:none}
.contact-wrap{display:block}

@media (max-width:900px){
  .about-story-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .site-nav{display:none}
  .burger{display:grid}
}
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .svc-detail{grid-template-columns:1fr}
  .svc-detail.reverse .svc-media{order:0}
}
@media (max-width:560px){
  .contact-wrap{display:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}