/* Powers Plowing and Lawncare
   Palette sampled from the hero footage. Morning is the sunrise ending, Storm is the night opening. */

/* The two accents are the two seasons, sampled from the client's own logo and
   from the hero footage: blue is the night storm, green is the sunrise lawn. */
:root{
  --canvas:#EDF1F0;
  --canvas-deep:#DFE6E5;
  --panel:#F8FAF9;
  --line:#C3CFD6;
  --line-strong:#8B9BA6;
  --accent:#254397;          /* brand blue: CTAs, focus, winter */
  --accent-hover:#1A3170;
  --accent-muted:#C8D5EC;
  --summer:#0B7A2E;          /* brand green, darkened to carry text on pale */
  --summer-vivid:#13D349;
  --mark-1:#3C74C4;          /* the wordmark gradient, light to deep */
  --mark-2:#22509E;
  --mark-3:#16295E;
  --text-secondary:#46555F;
  --text-primary:#10161A;
  --stripe-a:rgba(16,22,26,.045);
  --stripe-b:rgba(16,22,26,.012);
  --shadow:0 1px 2px rgba(16,22,26,.06),0 8px 28px rgba(16,22,26,.08);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(5,8,12,.95),0 3px 12px rgba(5,8,12,.78),0 10px 44px rgba(5,8,12,.8);

  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --maxw:1240px;
  --gutter:clamp(16px,4vw,56px);
}

:root[data-theme="dark"]{
  --canvas:#0C1117;
  --canvas-deep:#080C11;
  --panel:#141C24;
  --line:#243039;
  --line-strong:#3D4E5A;
  --accent:#4E8FD6;          /* the brand blue lifted so it carries on dark */
  --accent-hover:#7BB0E8;
  --accent-muted:#16263D;
  --summer:#2FCB5E;
  --summer-vivid:#13D349;
  --mark-1:#8FC4F0;          /* lifted so the wordmark carries on the dark canvas */
  --mark-2:#4E8FD6;
  --mark-3:#2C5FA8;
  --text-secondary:#94A5B0;
  --text-primary:#E8EEF2;
  --stripe-a:rgba(232,238,242,.05);
  --stripe-b:rgba(232,238,242,.014);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 28px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background-color .5s var(--ease),color .5s var(--ease);
}

/* One fixed environment layer so scrolling feels like moving through a place */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}
.env::before{
  content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(ellipse 70% 50% at 18% 8%,var(--accent-muted) 0%,transparent 60%),
    radial-gradient(ellipse 80% 60% at 84% 78%,var(--accent-muted) 0%,transparent 62%);
  opacity:.28;
  animation:envdrift 80s ease-in-out -12s infinite alternate;
}
@keyframes envdrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2.5%,2%,0) scale(1.06)}
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  font-stretch:118%;
  line-height:.98;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}

p{margin:0}
a{color:inherit}

.mono{
  font-family:var(--mono);font-weight:500;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);position:relative;z-index:1}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}