/* Different Dynamics site chrome: shared nav, footer, and a few common blocks. Page styles stay inline per page. */
:root { --navy:#50516f; --navy-deep:#434461; --navy-ink:#383954; --green:#94c022; --green-dark:#7ba31c; --green-soft:#e6efc9; --green-wash:#f4f8e6; --yellow:#f8ea0c; --ink:#33344a; --grey:#6d6d89; --line:#e6e6ee; --bg:#f6f6f4; --card:#fff; }
html { scroll-behavior:smooth; }
body { font-family:'Lato',sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
/* ---- nav ---- */
.sitenav { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.sitenav .sn-in { max-width:1180px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:18px; }
.sitenav .sn-logo img { height:40px; display:block; }
.sitenav .sn-links { margin-left:auto; display:flex; align-items:center; gap:4px; }
.sitenav .sn-links a { text-decoration:none; color:var(--navy); font-weight:700; font-size:13.5px; padding:9px 12px; border-radius:999px; transition:background .16s, color .16s; white-space:nowrap; }
.sitenav .sn-links a:hover { background:var(--green-wash); color:var(--navy-ink); }
.sitenav .sn-links a.on { background:var(--green-wash); color:var(--green-dark); }
.sitenav .sn-links a.sn-login { margin-left:6px; border:1.5px solid var(--line); }
.sitenav .sn-links a.sn-login:hover { border-color:var(--green); }
.sitenav .sn-links a.sn-cta { margin-left:8px; background:var(--navy); color:#fff; font-weight:900; padding:10px 18px; }
.sitenav .sn-links a.sn-cta:hover { background:var(--green); color:var(--navy-ink); }
.sitenav .sn-burger { display:none; margin-left:auto; width:42px; height:42px; border:1.5px solid var(--line); background:#fff; border-radius:12px; cursor:pointer; padding:10px; flex-direction:column; justify-content:space-between; }
.sitenav .sn-burger span { display:block; height:2px; background:var(--navy); border-radius:2px; }
@media (max-width:980px){
  .sitenav .sn-burger { display:flex; }
  .sitenav .sn-links { display:none; position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; padding:10px 14px 16px; gap:2px; box-shadow:0 20px 40px rgba(56,57,84,.12); }
  .sitenav .sn-links.open { display:flex; }
  .sitenav .sn-links a { padding:12px 14px; font-size:15px; }
  .sitenav .sn-links a.sn-login { margin-left:6px; border:1.5px solid var(--line); }
.sitenav .sn-links a.sn-login:hover { border-color:var(--green); }
.sitenav .sn-links a.sn-cta { margin:8px 0 0; text-align:center; }
}
/* ---- footer ---- */
footer.sitefoot { text-align:left; padding:56px 18px 30px; font-size:14px; letter-spacing:0; line-height:1.5; color:rgba(255,255,255,.8); }
footer.sitefoot .sf-brand img { height:36px; margin:0 0 14px; opacity:.92; }
footer.sitefoot b { color:var(--green); }
.sitefoot { background:var(--navy-ink); color:rgba(255,255,255,.8); padding:56px 18px 30px; margin-top:80px; }
.sitefoot .sf-in { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:28px; }
@media (max-width:860px){ .sitefoot .sf-in { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .sitefoot .sf-in { grid-template-columns:1fr; } }
.sitefoot .sf-brand img { height:36px; display:block; margin-bottom:14px; filter:brightness(0) invert(1); opacity:.92; }
.sitefoot .sf-brand p { font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.65); max-width:320px; }
.sitefoot .sf-col b { display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--green); margin-bottom:12px; font-weight:900; }
.sitefoot .sf-col a { display:block; color:rgba(255,255,255,.82); text-decoration:none; font-size:14px; padding:5px 0; }
.sitefoot .sf-col a:hover { color:#fff; text-decoration:underline; }
.sitefoot .sf-fine { max-width:1180px; margin:40px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:11.5px; color:rgba(255,255,255,.45); line-height:1.7; }
/* ---- shared blocks for the new pages ---- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } }
.wrap { max-width:1080px; margin:0 auto; padding:0 18px; }
.lead-tag { text-align:center; margin:84px auto 8px; font-size:10.5px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:var(--green-dark); }
h2.sec { font-size:clamp(24px,3.4vw,34px); font-weight:900; color:var(--navy); text-align:center; margin:0 0 8px; letter-spacing:-.01em; }
h2.sec span { color:var(--green); }
p.secsub { text-align:center; color:var(--grey); font-size:15.5px; max-width:640px; margin:0 auto 36px; line-height:1.6; }
.btn { display:inline-block; text-decoration:none; font-weight:900; font-size:14px; border-radius:999px; padding:14px 30px; transition:all .18s; }
.btn.primary { background:var(--green); color:var(--navy-ink); }
.btn.primary:hover { background:var(--yellow); }
.btn.ghost { background:rgba(255,255,255,.09); color:#fff; border:1px solid rgba(255,255,255,.3); }
.btn.ghost:hover { background:rgba(255,255,255,.18); }
.btn.navy { background:var(--navy); color:#fff; }
.btn.navy:hover { background:var(--green); color:var(--navy-ink); }

/* ===== motion layer ===== */
.reveal { transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { transition-delay: calc(var(--i, 0) * 70ms); }
h2.sec { position:relative; }
h2.sec::after { content:''; display:block; width:0; height:4px; margin:12px auto 0; border-radius:2px; background:linear-gradient(90deg, var(--green), var(--yellow)); transition:width .9s cubic-bezier(.22,1,.36,1) .25s; }
h2.sec.in::after { width:64px; }
/* card spotlight that follows the cursor */
.spot { position:relative; --mx:50%; --my:50%; }
.spot::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(360px circle at var(--mx) var(--my), rgba(148,192,34,.16), transparent 60%); }
.spot:hover::after { opacity:1; }
.lift { transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; will-change:transform; }
.lift:hover { transform:translateY(-6px) scale(1.01); box-shadow:0 28px 70px rgba(80,81,111,.18) !important; }
/* slow ken-burns on photo heroes */
.kb { position:relative; }
.kb::before, .kb .kb-bg { animation:kb 22s ease-in-out infinite alternate; }
@keyframes kb { from { background-position:center 48%; background-size:105%; } to { background-position:center 52%; background-size:118%; } }
/* stagger the hero text in */
.hero .in > * { animation:up .9s cubic-bezier(.22,1,.36,1) both; }
.hero .in > :nth-child(1) { animation-delay:.05s } .hero .in > :nth-child(2) { animation-delay:.15s } .hero .in > :nth-child(3) { animation-delay:.28s } .hero .in > :nth-child(4) { animation-delay:.42s } .hero .in > :nth-child(5) { animation-delay:.56s }
@keyframes up { from { opacity:0; transform:translateY(22px); } }
/* nav that tucks away on scroll down */
.sitenav { transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.sitenav.hide { transform:translateY(-100%); }
.sitenav.shadow { box-shadow:0 10px 30px rgba(56,57,84,.08); }
/* buttons with a soft press and a sheen */
.btn { position:relative; overflow:hidden; transform:translateZ(0); transition:transform .2s cubic-bezier(.22,1,.36,1), background .18s, color .18s, box-shadow .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(56,57,84,.18); }
.btn:active { transform:translateY(0) scale(.98); }
.btn::after { content:''; position:absolute; top:0; left:-120%; width:60%; height:100%; transform:skewX(-20deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition:left .6s; }
.btn:hover::after { left:140%; }
/* counters */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:760px){ .stats { grid-template-columns:repeat(2,1fr); } }
.stat { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 18px 18px; text-align:center; }
.stat b { display:block; font-size:clamp(30px,4vw,44px); font-weight:900; color:var(--navy); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.stat b small { font-size:.55em; color:var(--green-dark); }
.stat span { display:block; margin-top:8px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); }
/* route finder */
.finder { background:#fff; border:1px solid var(--line); border-radius:24px; padding:30px 30px 28px; box-shadow:0 1px 2px rgba(80,81,111,.05), 0 12px 40px rgba(80,81,111,.07); }
.finder h3 { font-size:22px; font-weight:900; color:var(--navy); text-align:center; letter-spacing:-.01em; }
.finder .fq { text-align:center; color:var(--grey); font-size:14px; margin:6px 0 18px; }
.finder .opts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:860px){ .finder .opts { grid-template-columns:repeat(2,1fr); } }
.finder .opt { border:1.5px solid var(--line); background:var(--bg); border-radius:16px; padding:16px 14px; cursor:pointer; text-align:left; font:inherit; transition:all .2s cubic-bezier(.22,1,.36,1); }
.finder .opt b { display:block; font-size:14px; color:var(--navy); font-weight:900; margin-bottom:3px; }
.finder .opt span { font-size:12.5px; color:var(--grey); line-height:1.45; }
.finder .opt:hover { border-color:var(--green); transform:translateY(-3px); background:#fff; }
.finder .opt.on { border-color:var(--green); background:var(--green-wash); box-shadow:0 8px 24px rgba(148,192,34,.2); }
.finder .res { margin-top:18px; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; background:var(--navy-ink); color:#fff; border-radius:18px; padding:22px 24px; opacity:0; transform:translateY(10px); transition:all .5s cubic-bezier(.22,1,.36,1); max-height:0; overflow:hidden; padding-top:0; padding-bottom:0; }
.finder .res.show { opacity:1; transform:none; max-height:300px; padding:22px 24px; }
@media (max-width:640px){ .finder .res { grid-template-columns:1fr; } }
.finder .res b { display:block; font-size:18px; font-weight:900; margin-bottom:4px; }
.finder .res b i { color:var(--yellow); font-style:normal; }
.finder .res p { font-size:13.5px; color:rgba(255,255,255,.78); line-height:1.55; }
@media (prefers-reduced-motion: reduce) { .kb::before, .kb .kb-bg, .hero .in > * { animation:none !important; } .lift:hover { transform:none; } .btn::after { display:none; } }