/* Emerald Group — main stylesheet. Ported from the Claude Design handoff (Emerald Site.dc.html + Nocturne DS). */

/* ---------- Tokens ---------- */
:root{
  --color-bg:#F3F2EE;--color-surface:#FDFCF8;--color-text:#0F1A2E;
  --color-divider:color-mix(in srgb, #0F1A2E 12%, transparent);
  --color-accent:#0E4A38;
  --color-accent-100:#DDE6DC;--color-accent-200:#C6D5C4;--color-accent-300:#43B04A;
  --color-accent-400:#43B04A;--color-accent-500:#0E4A38;--color-accent-600:#0E4A38;
  --color-accent-700:#0E4A38;--color-accent-800:#0A3427;--color-accent-900:#072A20;
  --color-accent-2:#B4693C;
  --shadow-sm:0 1px 2px rgba(15,26,46,.06), 0 0 0 1px rgba(15,26,46,.07);
  --shadow-md:0 10px 30px rgba(15,26,46,.10), 0 0 0 1px rgba(15,26,46,.05);
  --shadow-lg:0 26px 60px rgba(15,26,46,.18), 0 0 0 1px rgba(15,26,46,.05);
  --font-heading:"Inter",system-ui,sans-serif;
  --font-heading-weight:500;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius-sm:4px;--radius-md:8px;--radius-lg:14px;
  --space-1:2.8px;--space-2:5.6px;--space-3:8.4px;--space-4:11.2px;--space-6:16.8px;--space-8:22.4px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:#0F1A2E;-webkit-font-smoothing:antialiased;font-family:var(--font-body);font-size:17px;line-height:1.6}
img{max-width:100%;height:auto}
a{color:#0E4A38;text-decoration:none}
a:hover{color:#0E4A38}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:var(--font-heading-weight)}
button{font-family:inherit}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ---------- Buttons (Nocturne base, Emerald overrides applied inline in markup) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:14px;line-height:1.2;color:var(--color-text);background:transparent;border:1px solid transparent;padding:var(--space-2) calc(var(--space-3) * 1.2);border-radius:var(--radius-md)}
.btn svg{display:block}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{color:var(--color-accent);border-color:var(--color-accent)}
.btn-secondary{border-color:var(--color-divider)}
.btn-secondary:hover{background:color-mix(in srgb, var(--color-text) 7%, transparent)}
.btn-ghost{color:var(--color-accent);padding-inline:var(--space-1)}
.btn-ghost:hover{background:color-mix(in srgb, var(--color-accent) 10%, transparent)}

/* ---------- Forms ---------- */
.field > label{display:block;font-size:15px;font-weight:500;margin-bottom:6px;color:var(--color-text)}
.input{width:100%;min-height:44px;padding:10px 14px;font:inherit;font-size:16px;color:var(--color-text);caret-color:var(--color-accent);background:var(--color-surface);border:1px solid color-mix(in srgb,#0F1A2E 14%, transparent);border-radius:10px}
.input:hover{border-color:color-mix(in srgb, var(--color-text) 45%, transparent)}
.input:focus-visible{border-color:var(--color-accent);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,#0E4A38 7%, transparent)}
textarea.input{min-height:150px;resize:vertical}
.input.is-error{border-color:#8F2A16}

/* ---------- Tags ---------- */
.tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:0.02em;padding:3px 10px;border-radius:6px}
.tag-neutral{background:color-mix(in srgb,#0F1A2E 6%, #F3F2EE);color:#0F1A2E}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal][data-d]{transform:translateY(16px)}
[data-reveal][data-shown]{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.06s}
[data-reveal][data-d="2"]{transition-delay:.12s}
[data-reveal][data-d="3"]{transition-delay:.18s}
[data-reveal][data-d="4"]{transition-delay:.24s}
[data-reveal][data-d="5"]{transition-delay:.3s}
[data-reveal][data-d="6"]{transition-delay:.36s}
[data-reveal][data-d="7"]{transition-delay:.42s}
[data-reveal][data-d="8"]{transition-delay:.48s}
/* No-JS and reduced motion degrade to visible */
html.no-js [data-reveal]{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- Industry line-art draw animation ---------- */
.ind-band svg .ind-draw{stroke-dasharray:420;stroke-dashoffset:420}
.ind-band svg .ind-fill{opacity:0}
[data-shown] .ind-band svg .ind-fill{animation:ind-fill .5s .6s ease-out forwards}
@keyframes ind-fill{to{opacity:1}}
.ind-band svg .ind-node{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
[data-shown] .ind-band svg .ind-draw{animation:ind-draw .9s cubic-bezier(.2,.7,.2,1) forwards}
[data-shown] .ind-band svg .ind-node{animation:ind-node .4s .8s cubic-bezier(.2,.9,.3,1.4) forwards}
@keyframes ind-draw{to{stroke-dashoffset:0}}
@keyframes ind-node{to{opacity:1;transform:scale(1)}}
html.no-js .ind-band svg .ind-draw{stroke-dasharray:none;stroke-dashoffset:0}
html.no-js .ind-band svg .ind-fill,html.no-js .ind-band svg .ind-node{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .ind-band svg .ind-draw{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .ind-band svg .ind-fill,.ind-band svg .ind-node{opacity:1;transform:none;animation:none}
}

.svc-card:hover .svc-num{color:#43B04A;transform:translateX(4px)}
.svc-num{transition:color .2s, transform .2s}

/* ---------- Keyframes ---------- */
@keyframes ecc-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes ecc-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ecc-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ecc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ecc-marquee-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes ecc-word{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .eg-anim,[style*="ecc-"]{animation:none !important}
}

/* ---------- Hover utility classes (ported from style-hover attributes) ---------- */
.hv-primary{transition:background .2s, transform .2s, box-shadow .2s}
.hv-primary:hover{background:#0A3427 !important;transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,#0E4A38 30%, transparent)}
.hv-bright:hover{background:#3A9A40 !important;transform:translateY(-2px)}
.hv-inverse:hover{background:color-mix(in srgb,#F3F2EE 10%, transparent) !important}
.hv-outline:hover{border-color:color-mix(in srgb,#F3F2EE 45%, transparent) !important;color:#F3F2EE}
.hv-outline-g:hover{border-color:#43B04A !important}
.hv-lift{transition:transform .22s, box-shadow .22s}
.hv-lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.hv-card{transition:border-color .22s, box-shadow .22s}
.hv-card:hover{border-color:color-mix(in srgb,#0E4A38 45%, transparent) !important;box-shadow:var(--shadow-md)}
.hv-project{transition:transform .22s, box-shadow .22s, border-color .22s}
.hv-project:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,#0E4A38 45%, transparent) !important}
.hv-gap{transition:gap .18s}
.hv-gap:hover{gap:12px !important}
.hv-green:hover{color:#43B04A !important}
.hv-forest:hover{color:#0E4A38 !important}
.hv-cream:hover{color:#FDFCF8 !important}
.hv-menu-item:hover{background:color-mix(in srgb,#F3F2EE 8%, transparent)}
.hv-lift2{transition:transform .2s}
.hv-lift2:hover{transform:translateY(-2px)}

/* ---------- Header nav ---------- */
.eg-nav-btn{cursor:pointer;border:0;white-space:nowrap;font-family:var(--font-heading);font-weight:500;font-size:14px;padding:8px 11px;border-radius:8px;transition:all .18s;background:transparent;color:color-mix(in srgb, #F3F2EE 74%, transparent);text-decoration:none;display:inline-block}
.eg-nav-btn:hover{color:#F3F2EE}
.eg-nav-btn.is-active{background:color-mix(in srgb,#43B04A 16%, transparent);color:#43B04A}
.eg-dropdown{position:absolute;top:100%;left:0;padding-top:10px;z-index:50;display:none}
.eg-has-menu.open .eg-dropdown{display:block}
.eg-dropdown-panel{min-width:290px;background:#0F1A2E;border:1px solid color-mix(in srgb,#43B04A 24%, transparent);border-radius:12px;box-shadow:0 26px 60px rgba(15,26,46,.35);padding:8px;display:flex;flex-direction:column;gap:2px;animation:ecc-fade .18s ease both}

/* ---------- Filter chips ---------- */
.eg-chip{cursor:pointer;font-size:14.5px;font-family:var(--font-heading);font-weight:500;padding:9px 15px;border-radius:999px;transition:all .18s;display:inline-flex;align-items:center;white-space:nowrap;line-height:1.2;border:1px solid color-mix(in srgb, #0F1A2E 16%, transparent);background:transparent;color:color-mix(in srgb, #0F1A2E 68%, transparent);text-decoration:none;gap:8px}
.eg-chip.is-active{border-color:#0E4A38;background:#DDE6DC;color:#0A3427}
.eg-chip .eg-count{opacity:.55;font-variant-numeric:tabular-nums}
.eg-darkchip{cursor:pointer;font-size:14.5px;font-family:var(--font-heading);font-weight:500;padding:9px 15px;border-radius:999px;transition:all .18s;display:inline-flex;align-items:center;white-space:nowrap;line-height:1.2;border:1px solid color-mix(in srgb,#F3F2EE 28%, transparent);background:transparent;color:color-mix(in srgb,#F3F2EE 72%, transparent);text-decoration:none}
.eg-darkchip.is-active{border-color:color-mix(in srgb,#43B04A 40%, transparent);background:color-mix(in srgb,#43B04A 16%, transparent);color:#43B04A}

/* ---------- Tab panels (stages, clients, AACE RPs) ---------- */
.eg-panel{display:none}
.eg-panel.is-active{display:flex;animation:ecc-fade .35s both}
.eg-panel-grid.is-active{display:grid}
html.no-js .eg-panel{display:flex}

/* Stage tab buttons (home) */
.eg-stage-btn{cursor:pointer;background:none;border:0;padding:12px 20px 14px;white-space:nowrap;transition:color .18s;font-family:var(--font-body);font-weight:400;font-size:15.5px;color:color-mix(in srgb,#F3F2EE 55%, transparent)}
.eg-stage-btn.is-active{font-family:var(--font-heading);font-weight:600;color:#FDFCF8;border-bottom:3px solid #43B04A;margin-bottom:-1px}

/* Client tabs */
.eg-client-tab{cursor:pointer;border:0;padding:18px 20px 16px;font-family:var(--font-heading);font-weight:500;font-size:15.5px;white-space:nowrap;transition:all .18s;background:transparent;color:color-mix(in srgb,#0F1A2E 58%, transparent);box-shadow:none}
.eg-client-tab.is-active{font-weight:600;background:var(--color-surface);color:#0A3427;box-shadow:inset 0 -3px 0 #43B04A}

/* AACE RP rail buttons */
.eg-rp-btn{cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:4px;padding:16px 20px;border:0;border-left:3px solid transparent;border-bottom:1px solid color-mix(in srgb,#0F1A2E 8%, transparent);transition:all .18s;background:transparent;color:color-mix(in srgb,#0F1A2E 62%, transparent);width:100%}
.eg-rp-btn.is-active{border-left-color:#43B04A;background:var(--color-surface);color:#0F1A2E}

/* Services rail */
.eg-svc-rail-btn{cursor:pointer;text-align:left;display:flex;gap:10px;align-items:baseline;padding:10px 14px;border:0;border-radius:9px;font-family:var(--font-heading);font-weight:500;font-size:15px;line-height:1.3;transition:all .18s;background:transparent;color:color-mix(in srgb,#0F1A2E 60%, transparent);width:100%}
.eg-svc-rail-btn.is-active{background:color-mix(in srgb,#0E4A38 9%, #F3F2EE);color:#0A3427;box-shadow:inset 3px 0 0 #43B04A}

/* Project spread segments */
.eg-spread-seg{border:0;padding:0;cursor:pointer;transition:background .2s;background:#0E4A38}
.eg-spread-seg.is-dim{background:color-mix(in srgb,#0F1A2E 14%, transparent)}
.eg-spread-seg.is-active{box-shadow:inset 0 -14px 0 #43B04A}

/* Legal side nav */
.eg-legal-link{cursor:pointer;width:fit-content;transition:color .18s;color:color-mix(in srgb,#0F1A2E 68%, transparent);text-decoration:none;display:block}
.eg-legal-link:hover{color:#0E4A38}
.eg-legal-link.is-active{color:#0E4A38}

/* ---------- Article body (rendered from post content) ---------- */
.eg-article-body p{margin:0 0 22px;font-size:17.5px;line-height:1.7;color:color-mix(in srgb,#0F1A2E 84%, transparent);text-wrap:pretty}
.eg-article-body h2{font-family:var(--font-heading);font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-0.02em;margin:36px 0 14px;color:#0F1A2E}
.eg-article-body ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px}
.eg-article-body ul li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.6;color:color-mix(in srgb,#0F1A2E 80%, transparent)}
.eg-article-body ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:#43B04A}
.eg-article-body blockquote{margin:32px 0;padding:22px 26px;border-left:3px solid #43B04A;background:color-mix(in srgb,#0E4A38 6%, #F3F2EE);border-radius:0 12px 12px 0;font-family:var(--font-heading);font-weight:500;font-size:21px;line-height:1.35;letter-spacing:-0.015em;color:#0E4A38;text-wrap:pretty}
.eg-article-body blockquote p{margin:0;font:inherit;color:inherit}

/* ---------- Responsive ---------- */
.eg-articles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width: 1000px){.eg-articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 700px){.eg-articles-grid{grid-template-columns:1fr}}
.eg-form-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
@media (max-width: 640px){.eg-form-cols{grid-template-columns:1fr}}
.eg-contact-cols{display:grid;grid-template-columns:minmax(0,640px) minmax(240px,1fr);gap:48px clamp(48px,6vw,88px);align-items:start}
@media (max-width: 900px){.eg-contact-cols{grid-template-columns:1fr}.eg-contact-aside{position:static !important}}
.eg-svc-cols{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:0 clamp(28px,4vw,56px);align-items:start}
@media (max-width: 860px){.eg-svc-cols{grid-template-columns:1fr}.eg-svc-rail{position:static !important;flex-direction:row !important;flex-wrap:wrap;margin-bottom:10px}}
.eg-rp-cols{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:0;border:1px solid color-mix(in srgb,#0F1A2E 10%, transparent);border-radius:18px;overflow:hidden;background:var(--color-surface)}
@media (max-width: 800px){.eg-rp-cols{grid-template-columns:1fr}.eg-rp-rail{border-right:0 !important;flex-direction:row !important;flex-wrap:wrap}}
@media (max-width: 800px){.eg-nav-wrap{gap:2px}}

/* WordPress admin bar offset for the sticky header */
body.admin-bar .eg-header{top:32px}
@media (max-width: 782px){body.admin-bar .eg-header{top:46px}}

/* Screen-reader text (WP a11y convention) */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}