/* OSG shared design system.
   Page-specific chrome (nav, hero, calculators, pricing, cfo, contact, etc.)
   stays inline in each page. This file holds the tokens, primitives, the
   accent-themed service-card system, and the page atmosphere.

   Accent theming: cards/icons read from --accent-* custom properties. River is
   the default; the contractor page overrides them to forest, and the .green
   card overrides them locally. */

:root {
  --river: #1e3a5f;
  --river-deep: #132841;
  --river-light: #2a6496;
  --forest: #2c5e3f;
  --forest-light: #3a7a52;
  --stone: #d4c5a9;
  --stone-light: #f0ead6;
  --stone-dark: #b8a88a;
  --slate: #4a5568;
  --cream: #faf8f4;
  --white: #ffffff;
  --text: #1a202c;
  --text-light: #64748b;

  /* Card/icon accent — river by default. */
  --accent-bar: var(--river-light);
  --accent-line: rgba(30,58,95,.22);
  --accent-fill: var(--river);
  --accent-tint: rgba(30,58,95,.07);
  --accent-ring: rgba(30,58,95,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Libre Franklin',sans-serif;color:var(--text);background:var(--cream)}

/* Fine film grain — gives every section, light or dark, a little tactile depth. */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:180px 180px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--river-deep);color:white;
  padding:12px 18px;border-radius:0 0 8px 0;font-weight:600;z-index:2000}
.skip-link:focus{left:0}

/* NAV groups — destinations on the left, actions (phone/login/sign-up) split off
   to the right behind a divider. Item styling (.nav-cta/.nav-login/.nav-phone)
   stays per page. */
.nav-menu{display:flex;gap:28px;align-items:center}
.nav-actions{display:flex;gap:18px;align-items:center;padding-left:28px;
  border-left:1px solid rgba(255,255,255,.18)}
@media(max-width:900px){
  .nav-menu,.nav-actions{flex-direction:column;gap:20px;padding-left:0;border-left:none}
}

/* BUTTONS */
.btn{display:inline-block;padding:14px 28px;border-radius:8px;font-size:15px;font-weight:600;
  text-decoration:none;transition:all .2s;border:none;cursor:pointer}
.btn-primary{background:var(--stone);color:var(--river-deep)}
.btn-primary:hover{background:var(--white);transform:translateY(-1px)}
.btn-outline{border:1.5px solid rgba(255,255,255,.4);color:white;background:none}
.btn-outline:hover{border-color:var(--stone);color:var(--stone)}
.btn-green{background:var(--forest);color:white}
.btn-green:hover{background:var(--forest-light);transform:translateY(-1px)}

/* SECTIONS */
section{padding:80px 24px}
.section-inner{max-width:1100px;margin:0 auto}
.section-label{display:inline-block;color:var(--forest);font-size:12px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.section-title{font-family:'Playfair Display',serif;font-size:36px;font-weight:700;
  line-height:1.2;margin-bottom:16px;color:var(--river-deep)}
.section-desc{font-size:17px;line-height:1.7;color:var(--text-light);max-width:640px;margin-bottom:40px}

/* SERVICES GRID + accent-themed card/icon system */
.services{background:var(--white)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{background:var(--cream);border:1px solid rgba(0,0,0,.06);border-radius:12px;
  padding:32px 28px;position:relative;overflow:hidden;
  transition:border-color .25s ease,background .25s ease}
.service-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent-bar);transform:scaleY(0);transform-origin:top;
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.service-card:hover{border-color:var(--accent-line)}
.service-card:hover::before{transform:scaleY(1)}
.service-icon{width:48px;height:48px;background:var(--accent-tint);
  border:1px solid var(--accent-ring);border-radius:12px;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  color:var(--accent-fill);font-size:22px;
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.service-card:hover .service-icon{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.service-card h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--river-deep)}
.service-card p{font-size:14px;line-height:1.6;color:var(--text-light)}
.service-icon svg{width:24px;height:24px}
/* Green service card: forest accent within an otherwise river page. */
.service-card.green{--accent-bar:var(--forest-light);--accent-line:rgba(44,94,63,.22);
  --accent-fill:var(--forest);--accent-tint:rgba(44,94,63,.08);--accent-ring:rgba(44,94,63,.18)}

/* FOOTER */
.footer{background:#0d1b2e;color:rgba(255,255,255,.5);padding:32px 24px;text-align:center;font-size:13px}
.footer a{color:var(--stone);text-decoration:none}

/* SCROLL + ENTRANCE ANIMATIONS */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.9);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.stagger-children .reveal{transition-delay:0s}
.stagger-children .reveal:nth-child(1){transition-delay:.05s}
.stagger-children .reveal:nth-child(2){transition-delay:.1s}
.stagger-children .reveal:nth-child(3){transition-delay:.15s}
.stagger-children .reveal:nth-child(4){transition-delay:.2s}
.stagger-children .reveal:nth-child(5){transition-delay:.25s}
.stagger-children .reveal:nth-child(6){transition-delay:.3s}
.hero-enter{opacity:0;transform:translateY(30px);animation:heroIn .9s cubic-bezier(.16,1,.3,1) forwards}
.hero-badge-enter{animation-delay:.1s}
.hero-h1-enter{animation-delay:.25s}
.hero-p-enter{animation-delay:.4s}
.hero-btns-enter{animation-delay:.55s}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}