/* ============================================================
   ClearPath Analytics — website styles
   Schibsted Grotesk + IBM Plex Mono · green/mint brand
   ============================================================ */

:root{
  /* palette */
  --green:#05583D; --green-deep:#03402E; --green-mid:#0A6B49; --green-soft:#0A855D;
  --mint:#4DFFC5; --accent:#4DFFC5;
  --ink:#1C231F; --ink-soft:#44504A; --muted:#6E756F;
  --bone:#F5F1EC; --bone-2:#EFE9E1; --card:#FFFFFF; --line:#E4DCD1; --line-2:#ECE5DB;
  --on-green:#EAF6F0; --on-green-muted:#BAD6C9;
  --ok:#0A855D; --warn:#B0741F; --crit:#9B2D1F;
  --ok-soft:#E4F2EC; --warn-soft:#F7EEDD; --crit-soft:#F7E7E2;

  --font:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* rhythm (density tweakable) */
  --section-y:98px;
  --container:1320px;

  --nav-h:74px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--font); font-size:18px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.container{max-width:var(--container); margin:0 auto; padding:0 40px;}
section{scroll-margin-top:calc(var(--nav-h) + 20px);}

/* ---------- brand mark (open ring, CSS border trick) ---------- */
.mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:1em; height:1em; border-radius:.27em; flex:none;
  background:var(--green);
}
.mark::after{
  content:""; width:.423em; height:.423em; border-radius:50%;
  border:.115em solid var(--mint); border-right-color:transparent !important;
  transform:rotate(-45deg);
}
.mark.invert{background:var(--mint);} .mark.invert::after{border-color:var(--green) !important;border-right-color:transparent !important;}
.mark.line{background:transparent;border:.075em solid var(--green);} .mark.line::after{border-color:var(--green) !important;border-right-color:transparent !important;}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--mono); font-size:14px; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--green-soft);
  margin:0; display:inline-flex; align-items:center; gap:12px;
}
.on-dark .eyebrow, .s-green .eyebrow, .s-deep .eyebrow{color:var(--mint);}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-0.025em; line-height:1.05; text-wrap:balance;}
.h-xl{font-size:clamp(40px,4.4vw,62px);}
.h-lg{font-size:clamp(34px,4vw,58px);}
.h-md{font-size:clamp(26px,2.6vw,38px);}
.lead{font-size:clamp(18px,1.15vw,21px); line-height:1.5; color:var(--ink-soft); margin:0; text-wrap:pretty;}
.on-dark .lead, .s-green .lead, .s-deep .lead{color:#D2E8DF;}
.body-t{font-size:18px; line-height:1.55; color:var(--ink-soft); margin:0; text-wrap:pretty;}
.accent-t{color:var(--green-soft);}
.on-dark .accent-t, .s-green .accent-t, .s-deep .accent-t{color:var(--mint);}
.mint{color:var(--mint);}

/* section header block */
.sec-head{display:flex; flex-direction:column; gap:20px; max-width:none;}
.sec-lead{margin-top:6px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--font); font-size:16px; font-weight:600; letter-spacing:-0.01em;
  padding:15px 26px; border-radius:12px; border:1.5px solid transparent;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--green); color:#fff;}
.btn-primary:hover{background:var(--green-mid); box-shadow:0 16px 34px -18px rgba(5,88,61,.65);}
.btn-mint{background:var(--mint); color:var(--green-deep);}
.btn-mint:hover{box-shadow:0 16px 34px -16px rgba(77,255,197,.6);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--green); color:var(--green); background:rgba(5,88,61,.05);}
.on-dark .btn-ghost, .s-green .btn-ghost, .hero.tone-dark .btn-ghost{color:#fff; border-color:rgba(255,255,255,.28);}
.on-dark .btn-ghost:hover, .s-green .btn-ghost:hover, .hero.tone-dark .btn-ghost:hover{border-color:var(--mint); color:var(--mint); background:rgba(255,255,255,.06);}
.btn .arr{font-family:var(--mono); font-weight:500;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--bone) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s, background .2s;
}
.nav.scrolled{border-color:var(--line); background:color-mix(in srgb, var(--bone) 92%, transparent);}
.nav .container{display:flex; align-items:center; justify-content:space-between; width:100%;}
.brand{display:inline-flex; align-items:center; gap:12px; font-weight:700; font-size:22px; letter-spacing:-0.02em;}
.brand > span:last-child{display:inline;}
.brand .mark{font-size:30px;}
.brand small{font-family:var(--font); font-weight:500; font-size:0.94em; letter-spacing:-0.01em; text-transform:none; color:var(--muted); margin-left:.3em;}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{font-size:16px; font-weight:500; color:var(--ink-soft); transition:color .15s;}
.nav-links a:hover{color:var(--green);}
.nav-right{display:flex; align-items:center; gap:14px;}
.nav-toggle{display:none;}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; padding-top:76px; padding-bottom:96px;}
.hero.tone-dark{background:var(--green); color:#fff;}
.hero.tone-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 130% at 92% -18%, rgba(77,255,197,0.14), transparent 46%),
    radial-gradient(90% 120% at -6% 120%, rgba(3,64,46,0.9), transparent 60%);
}
.hero > .container{position:relative; z-index:2;}
.hero-arc{position:absolute; top:-160px; right:-140px; width:640px; height:640px; opacity:.12; z-index:1; pointer-events:none;}
.hero.tone-light .hero-arc{opacity:.06;}
.hero-arc circle{stroke:var(--mint);}
.hero.tone-light .hero-arc circle{stroke:var(--green);}

.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:66px; align-items:center;}
.hero-copy{display:flex; flex-direction:column; gap:26px;}
.hero.tone-light .lead{color:var(--ink-soft);}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px;}
.hero-badges{display:flex; gap:26px; flex-wrap:wrap; margin-top:10px;}
.hero-badge{display:flex; flex-direction:column; gap:4px;}
.hero-badge .v{font-family:var(--mono); font-size:30px; font-weight:600; color:var(--mint);}
.hero.tone-light .hero-badge .v{color:var(--green);}
.hero-badge .l{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-green-muted);}
.hero.tone-light .hero-badge .l{color:var(--muted);}

/* statement hero variant */
.hero.layout-statement .hero-grid{grid-template-columns:1fr; text-align:center; justify-items:center; gap:44px;}
.hero.layout-statement .hero-copy{align-items:center; max-width:24ch;}
.hero.layout-statement .hero-badges{justify-content:center;}
.hero.layout-statement .hero-visual{width:100%; max-width:980px;}
.hero.layout-statement .hero-ring{display:flex;}
.hero-ring{display:none; margin-bottom:6px;}
.hero-ring .mark{font-size:96px;}

/* ---------- LIVE label ---------- */
.livetag{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--mint);
  background:rgba(77,255,197,0.10); border:1px solid rgba(77,255,197,0.35);
  border-radius:999px; padding:7px 14px;
}
.hero.tone-light .livetag{color:var(--green-soft); background:rgba(10,133,93,.08); border-color:rgba(10,133,93,.24);}
.livedot{width:8px; height:8px; border-radius:50%; background:currentColor; animation:pulse 2.2s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(77,255,197,.5);}70%{box-shadow:0 0 0 8px rgba(77,255,197,0);}100%{box-shadow:0 0 0 0 rgba(77,255,197,0);}}
@media (prefers-reduced-motion:reduce){.livedot{animation:none;}}

/* ============================================================
   Power BI–style dashboard mockup (reused across sections)
   ============================================================ */
.dash{
  background:#fff; border-radius:16px; border:1.5px solid var(--line);
  box-shadow:0 50px 100px -55px rgba(5,88,61,.55); overflow:hidden;
  display:flex; flex-direction:column; width:100%; color:var(--ink);
}
.dash-top{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; background:var(--green); color:#fff;}
.dash-top .l{display:flex; align-items:center; gap:12px;}
.dash-top .dot{width:24px; height:24px; font-size:24px;}
.dash-top .ttl{font-weight:700; font-size:18px; letter-spacing:-0.01em;}
.dash-top .sub{font-family:var(--mono); font-size:12px; color:var(--on-green-muted);}
.dash-filters{display:flex; gap:8px;}
.dash-filters span{font-family:var(--mono); font-size:11px; padding:6px 11px; border-radius:7px; background:rgba(255,255,255,.12); color:#eafaf3;}
.dash-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:14px; background:#FBFAF8;}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.kpi{border:1.5px solid var(--line-2); border-radius:12px; background:#fff; padding:12px 15px; display:flex; flex-direction:column; gap:5px;}
.kpi .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.kpi .val{font-family:var(--mono); font-size:27px; font-weight:600; color:var(--green); line-height:1;}
.kpi .meta{font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; white-space:nowrap;}
.kpi .up{color:var(--green-soft); font-weight:600;} .kpi .dn{color:var(--crit); font-weight:600;}
.panels{display:grid; grid-template-columns:1.55fr 1fr; gap:14px;}
.panel{border:1.5px solid var(--line-2); border-radius:12px; background:#fff; padding:14px 16px; display:flex; flex-direction:column;}
.panel .ph{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.panel .ph .pt{font-weight:600; font-size:14px; color:var(--ink);}
.panel .ph .pn{font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap;}
.col-right{display:flex; flex-direction:column; gap:14px;}
.bars{display:flex; flex-direction:column; gap:9px;}
.bar-row{display:grid; grid-template-columns:74px 1fr 40px; align-items:center; gap:11px;}
.bar-row .bl{font-size:12px; color:var(--ink-soft);}
.bar-track{height:12px; border-radius:6px; background:var(--bone-2); overflow:hidden;}
.bar-fill{height:100%; border-radius:6px; background:var(--green-soft);}
.bar-row .bv{font-family:var(--mono); font-size:12px; color:var(--ink); text-align:right;}
.stack{display:flex; height:22px; border-radius:6px; overflow:hidden;}
.stack>div{height:100%;}
.legend{display:flex; flex-direction:column; gap:6px; margin-top:10px;}
.legend .lr{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ink-soft); white-space:nowrap;}
.legend .sw{width:11px; height:11px; border-radius:3px; flex:none;}
.legend .lv{margin-left:auto; font-family:var(--mono); color:var(--ink);}
.mono-axis{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:6px;}
.chart-legend{display:flex; gap:18px; margin-top:10px; font-size:12px; color:var(--ink-soft);}
.chart-legend span{display:flex; align-items:center; gap:7px;}
.chart-legend i{width:18px; height:4px; border-radius:2px; display:inline-block;}

/* ---------- STATS band ---------- */
.stats{background:var(--green-deep); color:#fff;}
.stats .container{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-top:64px; padding-bottom:64px;}
.stat{display:flex; flex-direction:column; gap:8px; padding:0 6px;}
.stat .v{font-family:var(--mono); font-size:clamp(48px,5vw,68px); font-weight:600; letter-spacing:-0.03em; color:var(--mint); line-height:1;}
.stat .l{font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-green-muted);}
.stat .d{font-size:16px; color:var(--on-green); max-width:32ch;}

/* ---------- generic card grids ---------- */
.card{background:var(--card); border:1.5px solid var(--line); border-radius:18px;}
.problem-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;}
.pcard{padding:30px 28px; display:flex; flex-direction:column; gap:14px;}
.pcard .pic{width:30px; height:30px; color:var(--crit); flex:none;}
.pcard .big{font-family:var(--mono); font-size:56px; font-weight:600; color:var(--green); line-height:1;}
.pcard .k{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.pcard hr{border:none; height:1.5px; background:var(--line-2); width:100%; margin:2px 0;}
.pcard h3{font-size:22px;}
.pcard p{font-size:16px; color:var(--ink-soft); margin:0;}

/* suite grid */
.suite{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.scard{padding:24px 22px; display:flex; flex-direction:column; gap:12px; min-height:186px; position:relative;}
.scard .num{font-family:var(--mono); font-size:15px; font-weight:600; color:var(--mint); background:var(--green); width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;}
.scard h4{font-size:20px; line-height:1.14;}
.scard .who{margin-top:auto; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--muted);}
.scard.star{border-color:var(--green); box-shadow:0 26px 54px -44px rgba(5,88,61,.6);}
.scard .star-tag{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--green); background:rgba(10,133,93,.12); padding:5px 10px; border-radius:999px; align-self:flex-start; white-space:nowrap;}

/* services list */
.services{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1.5px solid var(--line); border-radius:20px; overflow:hidden; background:var(--card);}
.svc{padding:38px 40px; display:flex; gap:26px; border-bottom:1.5px solid var(--line); position:relative;}
.svc:nth-child(odd){border-right:1.5px solid var(--line);}
.svc:nth-last-child(-n+1){border-bottom:none;}
.svc .n{font-family:var(--mono); font-size:14px; font-weight:600; color:var(--green-soft); padding-top:5px;}
.svc .c{display:flex; flex-direction:column; gap:11px;}
.svc h3{font-size:23px;}
.svc p{font-size:16px; color:var(--ink-soft); margin:0; max-width:44ch;}
.svc.full{grid-column:1 / -1; border-right:none;}
.svc:hover{background:var(--bone);}

/* industries */
.industries{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.ind{padding:30px 28px 32px; display:flex; flex-direction:column; gap:16px; min-height:250px;}
.ind .ic{width:46px; height:46px; border-radius:12px; background:var(--green); color:var(--mint); display:flex; align-items:center; justify-content:center;}
.ind .ic svg{width:24px; height:24px;}
.ind h3{font-size:22px;}
.ind p{font-size:15.5px; color:var(--ink-soft); margin:0;}
.ind .tag{margin-top:auto; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-soft);}

/* timeline */
.timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:34px; position:relative;}
.tstep{display:flex; flex-direction:column; gap:16px; background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:30px 28px; box-shadow:0 20px 44px -34px rgba(28,35,31,.16);}
.tstep .node{display:flex; align-items:center; gap:16px;}
.tstep .circle{width:56px; height:56px; border-radius:50%; background:var(--green); color:var(--mint); font-family:var(--mono); font-size:22px; font-weight:600; display:flex; align-items:center; justify-content:center; flex:none;}
.tstep .day{font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--green-soft);}
.tstep h4{font-size:26px;}
.tstep p{font-size:16px; color:var(--ink-soft); margin:0;}
.tstep .checks{display:flex; flex-direction:column; gap:9px; margin-top:auto; padding-top:18px; border-top:1.5px solid var(--line-2);}
.tstep .checks span{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13.5px; color:var(--ink-soft);}
.tstep .checks span::before{content:"✓"; color:var(--green-soft); font-weight:700;}
.how-note{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}
.how-chip{display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:14px; color:var(--ink-soft); background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:12px 20px;}
.how-chip svg{width:16px; height:16px; color:var(--green-soft); flex:none;}

/* hero — three real ClearPath dashboard screenshots, fanned (Hex-style) */
.hero-visual{position:relative;}
.shots{position:relative; width:100%; min-height:460px;}
.shot{position:absolute; width:74%; margin:0; transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease;}
.shot img{display:block; width:100%; border-radius:12px; border:1.5px solid var(--line); box-shadow:0 30px 64px -44px rgba(5,88,61,.5); background:#fff;}
.shot figcaption{position:absolute; top:-19px; left:6px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-soft); white-space:nowrap;}
.shot.s2{top:0; left:0; transform:rotate(-5deg); z-index:1;}
.shot.s3{top:150px; left:26%; transform:rotate(4deg); z-index:2;}
.shot.s1{top:70px; left:13%; z-index:3;}
.shot:hover{transform:translateY(-10px) rotate(0deg) scale(1.035); z-index:6;}
.shot:hover img{box-shadow:0 46px 90px -38px rgba(5,88,61,.62);}
@media (max-width:1080px){
  .shots{min-height:0;}
  .shot{position:relative; width:100%; transform:none !important; top:auto; left:auto; margin-bottom:26px; z-index:auto;}
  .shot figcaption{position:static; display:block; margin-bottom:8px;}
  .shot.s2, .shot.s3{display:none;}
}

/* ---------- hero load-in (staggered, pure-CSS keyframes) ---------- */
@keyframes heroIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
@keyframes shotIn{from{opacity:0; transform:translateY(48px) scale(.94);} to{opacity:1; transform:none;}}
.hero-copy > *{opacity:0; animation:heroIn .7s cubic-bezier(.2,.7,.2,1) both;}
.hero-copy > .hero-ring{animation-delay:.06s;}
.hero-copy > .eyebrow{animation-delay:.14s;}
.hero-copy > h1{animation-delay:.22s;}
.hero-copy > .lead{animation-delay:.34s;}
.hero-copy > .hero-cta{animation-delay:.46s;}
.hero-copy > .hero-badges{animation-delay:.56s;}
/* screenshots rise into the fan — animate the img so .shot rotation + hover stay intact */
.shots .shot img{opacity:0; animation:shotIn .9s cubic-bezier(.2,.75,.2,1) both;}
.shot.s2 img{animation-delay:.46s;}
.shot.s3 img{animation-delay:.62s;}
.shot.s1 img{animation-delay:.78s;}
@media (prefers-reduced-motion:reduce){
  .hero-copy > *, .shots .shot img{opacity:1 !important; transform:none !important; animation:none !important;}
}

/* work / case studies */
/* interactive stacked work showcase */
.work-show{display:grid; grid-template-columns:0.8fr 1fr; gap:60px; align-items:start;}
.ws-stage{align-self:start; margin-top:0;}
.ws-rail{display:flex; flex-direction:column;}
.ws-item{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; text-align:left; width:100%; background:none; border:none; border-top:1.5px solid var(--line); padding:22px 6px; cursor:pointer; font:inherit; color:inherit;}
.ws-rail .ws-item:last-child{border-bottom:1.5px solid var(--line);}
.ws-num{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--green-soft); opacity:.5; padding-top:4px; transition:opacity .25s;}
.ws-item.is-active .ws-num{opacity:1;}
.ws-main{display:flex; flex-direction:column; min-width:0;}
.ws-k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-soft); margin-bottom:7px;}
.ws-t{font-family:var(--font); font-size:21px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); line-height:1.2;}
.ws-item:not(.is-active){opacity:.46; transition:opacity .25s;}
.ws-item:not(.is-active):hover{opacity:.82;}
.ws-d{font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0; max-height:0; opacity:0; overflow:hidden; transition:max-height .45s ease, opacity .35s ease, margin .45s ease;}
.ws-item.is-active .ws-d{max-height:240px; opacity:1; margin:11px 0 13px;}
.ws-item .metric{align-self:flex-start; margin:0; display:none; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; color:var(--green); background:var(--ok-soft); padding:7px 13px; border-radius:999px;}
.ws-item.is-active .metric{display:inline-flex;}
.ws-stage{position:relative;}
.ws-deck{position:relative; height:432px;}
.ws-card{position:absolute; top:0; left:50%; width:min(560px,100%); margin:0; transform:translateX(-50%);}
.ws-card .mdash{height:344px; width:100%; transform-origin:center center; transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .5s ease, filter .5s ease; will-change:transform,opacity; box-shadow:0 44px 84px -46px rgba(5,88,61,.5); cursor:pointer;}
.ws-hint{position:absolute; left:2px; bottom:-32px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-soft); opacity:.7;}
.ws-dots{position:absolute; right:2px; bottom:-34px; display:flex; gap:9px;}
.ws-dot{width:9px; height:9px; border-radius:50%; border:none; background:#CBD3CC; cursor:pointer; padding:0; transition:background .25s, transform .25s;}
.ws-dot.is-active{background:var(--green); transform:scale(1.25);}
@media (prefers-reduced-motion: reduce){ .ws-card .mdash{transition:none;} }
@media (max-width:900px){
  .work-show{grid-template-columns:1fr; gap:38px;}
  .ws-stage{order:-1;}
  .ws-deck{height:334px;}
  .ws-card{width:min(440px,90%);}
  .ws-card .mdash{height:288px;}
}
/* real dashboard screenshots framed as app windows */
.mdash.shot{background:#fff; padding:0;}
.shot-bar{height:28px; flex:none; background:#F1EFE9; border-bottom:1px solid #E2E0D8; display:flex; align-items:center; gap:6px; padding:0 13px;}
.shot-bar span{width:8px; height:8px; border-radius:50%; background:#CBD3CD; flex:none;}
.shot-bar span:first-child{background:#D98C6F;}
.shot-bar span:nth-child(2){background:#D9B45C;}
.shot-bar span:nth-child(3){background:#6FB08C;}
.shot-bar em{font-family:var(--mono); font-size:9.5px; color:var(--muted); font-style:normal; margin-left:9px; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.shot img{flex:1; width:100%; min-height:0; object-fit:cover; object-position:left top; display:block;}

.wcard{padding:0; overflow:hidden; display:flex; flex-direction:column;}
.wcard .thumb{padding:16px; background:#EAF1ED; border-bottom:1.5px solid #D5DDD7;}
.wcard .wbody{padding:18px 22px 22px; display:flex; flex-direction:column; gap:8px;}
.wcard .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-soft);}
.wcard h3{font-size:19px;}
.wcard p{font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:0;}
.wcard .metric{margin-top:4px; display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; color:var(--green); background:var(--ok-soft); padding:7px 13px; border-radius:999px; align-self:flex-start;}

/* mini dashboard (for work thumbs) */
.mdash{width:100%; border-radius:10px; border:1.5px solid #D2DAD4; background:#FBFAF8; overflow:hidden; box-shadow:0 18px 36px -30px rgba(5,88,61,.45);}
.mdash .mtop{background:var(--green); color:#fff; padding:10px 14px; display:flex; justify-content:space-between; align-items:center;}
.mdash .mtop .mt{font-weight:700; font-size:13px;}
.mdash .mtop .mf{font-family:var(--mono); font-size:9.5px; color:var(--mint);}
.mdash .mbody{padding:12px 14px; display:flex; flex-direction:column; gap:9px;}
.mkpis{display:grid; grid-template-columns:repeat(4,1fr); gap:7px;}
.mkpi{background:#fff; border:1px solid var(--line-2); border-radius:7px; padding:7px 9px; display:flex; flex-direction:column; gap:2px;}
.mkpi .l{font-family:var(--mono); font-size:8px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);}
.mkpi .v{font-family:var(--mono); font-size:16px; font-weight:600; color:var(--green); line-height:1;}
.mrow{display:grid; grid-template-columns:1.5fr 1fr; gap:9px;}
.mpanel{background:#fff; border:1px solid var(--line-2); border-radius:7px; padding:9px 11px; display:flex; flex-direction:column; min-height:152px;}
.mpanel .ph2{font-size:10.5px; font-weight:600; color:var(--ink); margin-bottom:7px;}
.mbar{display:flex; align-items:center; gap:7px; margin-bottom:6px;}
.mbar .bl{font-size:9px; color:var(--ink-soft); width:46px;}
.mbar .bt{flex:1; height:7px; background:var(--bone-2); border-radius:4px; overflow:hidden;}
.mbar .bf{height:100%; background:var(--green-soft); border-radius:4px;}

/* distinct work mini-dashboards — shared chrome, unique bodies per use case */
.mdash{display:flex; flex-direction:column;}
.wcard .mdash{min-height:232px;}
.mdash .mbody{flex:1;}
.mcard{background:#fff; border:1px solid var(--line-2); border-radius:7px; padding:9px 11px;}
.mcard .ph2{font-size:10.5px; font-weight:600; color:var(--ink); margin-bottom:7px;}
.mlabel{font-family:var(--mono); font-size:8px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:400;}

/* reference-style KPI cards (Exec Summary / Revenue Bridge) */
.mfh{font-size:10px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; margin-bottom:1px;}
.mfh .mlabel{font-weight:400;}
.mkgrid{display:grid; grid-template-columns:1fr 1fr; gap:7px; flex:1;}
.kcard{background:#fff; border:1px solid var(--line-2); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:3px; min-width:0;}
.kcard .kl{font-family:var(--mono); font-size:8px; letter-spacing:.05em; text-transform:uppercase; color:var(--green-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.kcard .kv{font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.05;}
.kcard .ksp{width:100%; height:22px; display:block; margin-top:auto;}
.kcard .kf{font-family:var(--mono); font-size:7.5px; color:#8A948F; display:flex; justify-content:space-between; align-items:center; gap:4px; white-space:nowrap;}
.kcard .kf .up{color:var(--green);}
.kcard .kf .dn{color:#9B2D1F;}
.kcard.kc2{gap:2px; padding:7px 9px; justify-content:space-between;}
.kcard.kc2 .kv{font-size:14px;}
.kc2r{display:flex; align-items:flex-end; justify-content:space-between; gap:5px;}
.kc2r .ksp2{width:50%; height:15px; display:block;}
.dch{font-family:var(--mono); font-size:7.5px; padding:1px 5px; border-radius:4px; align-self:flex-start;}
.dch.up{background:var(--ok-soft); color:var(--green);}
.dch.dn{background:#F6E4E1; color:#9B2D1F;}

/* green utilization overview: donut + monthly billable bars + resource bars */
.uwrap{display:flex; gap:12px; align-items:center;}
.udonut{position:relative; width:98px; height:98px; flex:none;}
.udonut svg{width:100%; height:100%; transform:rotate(-90deg);}
.udonut .dc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;}
.udonut .dc b{font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.02em;}
.udonut .dc span{font-family:var(--mono); font-size:7.5px; color:var(--green-soft);}
.ucol-wrap{flex:1; min-width:0;}
.ustack{display:flex; align-items:flex-end; gap:5px; height:80px; margin-top:5px;}
.ustack .ucol{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; height:100%; justify-content:flex-end;}
.ustack .ub{width:100%; height:64px; background:#B7D4C6; border-radius:3px 3px 0 0; display:flex; align-items:flex-end; overflow:hidden;}
.ustack .ub i{display:block; width:100%; background:#05583D;}
.ustack em{font-family:var(--mono); font-size:7px; color:var(--green-soft); font-style:normal;}
.resbars{display:flex; flex-direction:column; gap:5px; margin-top:3px;}
.resbars .rb{display:flex; align-items:center; gap:8px;}
.resbars .rn{font-size:8.5px; color:var(--ink-soft); width:74px; flex:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.resbars .rt{flex:1; height:7px; border-radius:3px; background:var(--bone-2); overflow:hidden;}
.resbars .rt i{display:block; height:100%; background:#0A855D; border-radius:3px;}

/* #1 accounting: trend + segmented AR aging */
.mstack{display:flex; height:15px; border-radius:4px; overflow:hidden; margin-top:2px;}
.mstack i{height:100%;}
.msleg{display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:8px;}
.msleg span{display:flex; align-items:center; gap:5px; font-size:8.5px; color:var(--ink-soft); font-family:var(--mono);}
.msleg i{width:7px; height:7px; border-radius:2px; flex:none;}
/* #2 startup: hero metric + sparkline + 2x2 tiles + progress meter */
.mhero{display:flex; align-items:flex-end; justify-content:space-between; gap:10px;}
.mhero .lb{font-family:var(--mono); font-size:8px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px;}
.mhero .hv{font-family:var(--mono); font-weight:600; font-size:24px; color:var(--green); line-height:.95;}
.mhero .hd{font-family:var(--mono); font-size:10px; color:var(--ok); white-space:nowrap;}
.mspark{width:100%; height:32px; display:block; margin-top:9px;}
.mstat2{display:grid; grid-template-columns:repeat(2,1fr); gap:7px;}
.mprog{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:8.5px; color:var(--ink-soft);}
.mprog .pt{flex:1; height:8px; background:var(--bone-2); border-radius:4px; overflow:hidden;}
.mprog .pf{display:block; height:100%; background:var(--green-soft); border-radius:4px;}
/* #3 wealth: allocation donut + holdings list */
.mwrap{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:center;}
.mdonut{position:relative; width:86px; height:86px; flex:none;}
.mdonut svg{width:100%; height:100%; transform:rotate(-90deg);}
.mdonut .dc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.mdonut .dc b{font-family:var(--mono); font-size:15px; color:var(--green); line-height:1;}
.mdonut .dc span{font-family:var(--mono); font-size:7px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:2px;}
.mhold{display:flex; flex-direction:column; gap:8px;}
.mhold .hr{display:flex; align-items:center; gap:7px; font-size:9.5px;}
.mhold .hr i{width:8px; height:8px; border-radius:2px; flex:none;}
.mhold .hr .nm{color:var(--ink); flex:1;}
.mhold .hr .wt{font-family:var(--mono); color:var(--ink-soft);}
.mhold .hr .vl{font-family:var(--mono); color:var(--green); width:44px; text-align:right;}
/* #4 law: attorney data table */
.mtable{width:100%; border-collapse:collapse; font-size:9.5px;}
.mtable th{font-family:var(--mono); font-size:7.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); text-align:left; font-weight:500; padding:0 0 6px;}
.mtable td{padding:5px 0; border-top:1px solid var(--line-2); color:var(--ink);}
.mtable td.num{font-family:var(--mono); color:var(--ink-soft); text-align:right;}
.mtable .ut{display:flex; align-items:center; gap:6px; justify-content:flex-end;}
.mtable .ut .b{width:32px; height:6px; background:var(--bone-2); border-radius:3px; overflow:hidden; flex:none;}
.mtable .ut .b i{display:block; height:100%; background:var(--green-soft); border-radius:3px;}
.mtable .ut .p{font-family:var(--mono); width:24px; text-align:right; color:var(--ink-soft);}
.mtable .warn .p{color:var(--warning);}

/* testimonials */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.qcard{background:rgba(255,255,255,0.05); border:1.5px solid rgba(255,255,255,0.14); border-radius:18px; padding:32px 30px; display:flex; flex-direction:column; gap:20px;}
.qcard .qmark{font-family:var(--font); font-size:54px; line-height:.4; color:var(--mint); height:26px;}
.qcard p{font-size:18px; line-height:1.45; color:#fff; margin:0; text-wrap:pretty;}
.qcard .attr{margin-top:auto; font-family:var(--mono); font-size:13px; color:var(--on-green-muted); line-height:1.5;}
.qcard .attr b{color:var(--mint); font-weight:600; display:block; letter-spacing:.02em;}

/* what's next / AI chat */
.next-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.chat{background:var(--card); border:1.5px solid var(--line); border-radius:20px; padding:26px 28px; display:flex; flex-direction:column; gap:14px; box-shadow:0 44px 90px -60px rgba(5,88,61,.5);}
.chat .q{align-self:flex-end; background:var(--green); color:#fff; font-size:16px; padding:14px 18px; border-radius:16px 16px 4px 16px; max-width:82%; line-height:1.36;}
.chat .a{align-self:flex-start; background:var(--bone-2); color:var(--ink); font-size:16px; padding:14px 18px; border-radius:16px 16px 16px 4px; max-width:88%; line-height:1.36; display:flex; gap:11px;}
.chat .a .ai{font-family:var(--mono); font-size:11px; color:var(--green-soft); font-weight:600; flex:none; padding-top:2px;}
.chat .cbar{display:flex; align-items:center; gap:11px; border:1.5px solid var(--line); border-radius:12px; padding:13px 16px; color:var(--muted); font-size:15px;}
.chat .cbar .send{margin-left:auto; width:30px; height:30px; border-radius:8px; background:var(--green); color:var(--mint); display:flex; align-items:center; justify-content:center; font-size:16px;}
.chip{font-family:var(--mono); font-size:14px; font-weight:500; padding:11px 17px; border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--ink-soft); white-space:nowrap;}
.chip.solid{background:var(--green); color:#fff; border-color:var(--green);}

/* ---------- CONTACT ---------- */
.contact{background:var(--green); color:#fff; position:relative; overflow:hidden;}
.contact::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 130% at 90% -20%, rgba(77,255,197,.14), transparent 48%);}
.contact .container{position:relative; z-index:2;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start;}
.form{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form .full{grid-column:1 / -1;}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-green-muted);}
.field input, .field textarea{
  font-family:var(--font); font-size:16px; color:#fff; background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.18); border-radius:12px; padding:14px 16px; width:100%;
  transition:border-color .15s, background .15s;
}
.field textarea{min-height:120px; resize:vertical;}
.field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,.4);}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--mint); background:rgba(255,255,255,.1);}
.contact .lead{color:#D2E8DF;}
.contact-info{display:flex; flex-direction:column; gap:26px;}
.contact-info .row{display:flex; flex-direction:column; gap:5px;}
.contact-info .k{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-green-muted);}
.contact-info .v{font-size:19px; color:#fff;}
.contact-info .v.link{color:var(--mint);}

/* ---------- FOOTER ---------- */
.footer{background:var(--green-deep); color:var(--on-green); padding:56px 0 40px;}
.footer .container{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start;}
.footer .brand{color:#fff;}
.footer .brand small{color:rgba(255,255,255,.6);}
.footer-col{display:flex; flex-direction:column; gap:12px;}
.footer-col .h{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#CFE5DB; margin-bottom:4px;}
.footer-col a, .footer-col span{font-size:15px; color:var(--on-green); transition:color .15s;}
.footer-col a:hover{color:var(--mint);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:24px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:12.5px; color:var(--on-green-muted);}

/* ---------- section scaffolding ---------- */
.pad{padding-top:var(--section-y); padding-bottom:var(--section-y);}
.pad-sm{padding-top:calc(var(--section-y) * .62); padding-bottom:calc(var(--section-y) * .62);}
.s-green{background:var(--green); color:#fff;}
.s-deep{background:var(--green-deep); color:#fff;}
.s-bone2{background:var(--bone-2);}
.sec-gap{margin-bottom:38px;}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr; gap:48px;}
  .panels{grid-template-columns:1fr;}
  .suite{grid-template-columns:repeat(2,1fr);}
  .industries{grid-template-columns:repeat(2,1fr);}
  .next-grid{grid-template-columns:1fr; gap:44px;}
}
@media (max-width:820px){
  :root{--section-y:92px;}
  .container{padding:0 24px;}
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--bone); border-bottom:1px solid var(--line); padding:8px 24px 20px;
    transform:translateY(-120%); transition:transform .28s ease; z-index:55;
  }
  .nav-links.open{transform:none;}
  .nav-links a{padding:14px 0; width:100%; border-bottom:1px solid var(--line-2); font-size:18px;}
  .nav-toggle{display:inline-flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
  .nav-toggle span{width:22px; height:2px; background:var(--ink); border-radius:2px;}
  .nav-right .btn-ghost{display:none;}
  .stats .container{grid-template-columns:1fr; gap:30px;}
  .problem-grid, .work-grid, .quotes, .timeline{grid-template-columns:1fr;}
  .kpis, .mkpis{grid-template-columns:repeat(2,1fr);}
  .services{grid-template-columns:1fr;}
  .svc, .svc:nth-child(odd){border-right:none;}
  .industries{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr; gap:44px;}
  .form{grid-template-columns:1fr;}
  .dash{transform:none;}
  .h-xl{font-size:clamp(38px,10vw,54px);}
}
@media (max-width:520px){
  .suite{grid-template-columns:1fr;}
  .hero-badges{gap:18px;}
  .dash-filters{display:none;}
}

/* ============================================================
   Repositioning additions — pillars, icons, mint accents, showcase
   ============================================================ */

/* mint highlight swash (readable on light; softer on dark) */
.hl{background:linear-gradient(transparent 58%, rgba(77,255,197,.55) 58%); padding:0 .05em; border-radius:2px;}
.hl-bad{background:linear-gradient(transparent 58%, rgba(155,45,31,.28) 58%); padding:0 .05em; border-radius:2px;}
.sec-head .h-lg{max-width:none !important;}
.s-green .hl, .s-deep .hl, .contact .hl, .hero.tone-dark .hl{background:linear-gradient(transparent 58%, rgba(77,255,197,.30) 58%);}

/* reusable icon tile (green tile, mint glyph — echoes the mark) */
.icon-tile{width:54px; height:54px; border-radius:14px; background:var(--green); color:var(--mint); display:flex; align-items:center; justify-content:center; flex:none;}
.icon-tile svg{width:26px; height:26px;}
.s-green .icon-tile, .s-deep .icon-tile{background:var(--mint); color:var(--green);}

/* capability pillars */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.pillar{padding:32px 28px; display:flex; flex-direction:column; gap:16px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.pillar:hover{transform:translateY(-4px); box-shadow:0 30px 60px -46px rgba(5,88,61,.5); border-color:var(--green-soft);}
.pillar h3{font-size:21px; line-height:1.14;}
.pillar > p{font-size:15px; color:var(--ink-soft); margin:0;}
.pillar .plist{list-style:none; display:flex; flex-direction:column; gap:9px; margin:auto 0 0; padding:16px 0 0; border-top:1.5px solid var(--line-2);}
.pillar .plist li{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);}
.pillar .plist li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green-soft); flex:none;}

/* connected-sources strip */
.srcwrap{display:flex; flex-direction:column; gap:16px; margin-top:46px;}
.srcstrip{display:flex; flex-wrap:wrap; gap:11px;}
.srcchip{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:14px; color:var(--ink-soft); background:var(--card); border:1.5px solid var(--line); border-radius:11px; padding:9px 15px 9px 9px;}
.srcchip .b{width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; color:#fff; letter-spacing:-.02em; flex:none;}
.srcchip.more{border-style:dashed; color:var(--muted);}

/* showcase two-up */
.showcase-grid{display:grid; grid-template-columns:1.42fr 1fr; gap:24px; align-items:stretch;}
.showcase-grid .chat{box-shadow:0 40px 80px -55px rgba(0,0,0,.45);}
.showcase-cap{margin-top:30px; font-size:18px;}

/* showcase: compress to fit a laptop viewport */
#showcase{padding-top:74px; padding-bottom:78px;}
#showcase .sec-gap{margin-bottom:30px;}
#showcase .dash-body{padding:15px 17px 17px; gap:11px;}
#showcase .panels{gap:12px;}
#showcase .panel{padding:12px 14px;}
#showcase .panel svg{height:150px !important;}
#showcase .kpi{padding:10px 14px; gap:4px;}
#showcase .kpi .val{font-size:24px;}
#showcase .col-right{gap:11px;}
#showcase .bars{gap:7px;}
#showcase .legend{margin-top:8px; gap:5px;}

/* hover lifts */
.wcard{transition:transform .18s ease, box-shadow .18s ease; border-color:#D8CFC1; box-shadow:0 22px 48px -32px rgba(28,35,31,.18);}
.wcard:hover{transform:translateY(-4px); box-shadow:0 36px 70px -46px rgba(28,35,31,.30);}
.ind{transition:transform .18s ease, border-color .18s ease;}
.ind:hover{transform:translateY(-4px); border-color:var(--green-soft);}

@media (max-width:1080px){ .pillars{grid-template-columns:repeat(2,1fr);} .showcase-grid{grid-template-columns:1fr;} }
@media (max-width:1040px){ .nav-right .btn-ghost{display:none;} }
@media (max-width:820px){ .pillars{grid-template-columns:1fr;} }

/* ============================================================
   v2 variant — green nav bar + light hero (class-scoped, safe for v1)
   ============================================================ */
.nav.green{background:var(--green);}
.nav.green.scrolled{background:var(--green-deep); border-bottom-color:rgba(255,255,255,.14);}
.nav.green .brand{color:#fff;}
.nav.green .brand small{color:rgba(255,255,255,.62);}
.nav.green .nav-links a{color:rgba(255,255,255,.82);}
.nav.green .nav-links a:hover{color:#fff;}
.nav.green .btn-ghost{color:#fff; border-color:rgba(255,255,255,.34);}
.nav.green .btn-ghost:hover{color:var(--green-deep); background:var(--mint); border-color:var(--mint);}
.nav.green .btn-primary{background:var(--mint); color:var(--green-deep);}
.nav.green .btn-primary:hover{background:#fff; color:var(--green-deep); box-shadow:0 14px 30px -16px rgba(0,0,0,.35);}
.nav.green .nav-toggle span{background:#fff;}
/* compact nav buttons */
.nav-right .btn{padding:10px 20px; font-size:15px;}

.hero.tone-light .accent-t{color:var(--green-soft);}
.hero.tone-dark .accent-t{color:var(--mint);}
.hero.tone-light .hero-visual .dash{box-shadow:0 50px 100px -55px rgba(5,88,61,.4);}

@media (max-width:820px){
  .nav.green .nav-links{background:var(--green); border-bottom-color:rgba(255,255,255,.16);}
  .nav.green .nav-links a{color:#fff; border-bottom-color:rgba(255,255,255,.12);}
}