/* JIG—ME shared design system. */

:root{
  --paper:#fefef9;
  --ink:#111111;
  --green:#a8f522;
  --green-deep:#5f9f00;
  --charcoal:#2e2e2b;
  --line:rgba(17,17,17,.18);
  --line-soft:rgba(17,17,17,.1);
  --muted:#55554f;
  --soft:#f5f5f0;
  --max:1400px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Jost",Arial,sans-serif;font-size:21.6px;line-height:1.5;-webkit-font-smoothing:antialiased}
html,body{max-width:100%;overflow-x:clip}
button,a{font:inherit}
button{color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1{margin:0;font-weight:700}
h2{margin:0;font-weight:600}
h3{margin:0;font-weight:600}
h4{margin:0;font-weight:500}
p{margin:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px}

.shell{width:min(calc(100% - 64px),var(--max));margin-inline:auto}
.eyebrow{font-size:0.864rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:.82}

/* ---- header ---- */
.site-header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;z-index:30;background:rgba(254,254,248,.94);backdrop-filter:blur(10px)}
.site-header .shell{display:flex;align-items:center;width:min(calc(100% - 64px),var(--max))}
.brand{font-size:1.68rem;font-weight:500;letter-spacing:.02em;white-space:nowrap;color:var(--ink)}
.brand-dash{color:var(--green);vertical-align:baseline}
.nav{display:flex;align-items:center;gap:6px;margin:0 auto 0 48px}
.nav a{padding:8px 14px;border:1px solid transparent;font-size:1.104rem;transition:.18s ease}
.nav a:hover,.nav a.active{border-color:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border:1px solid var(--ink);background:var(--ink);color:var(--green);font-size:1.032rem;font-weight:500;letter-spacing:.01em;white-space:nowrap;transition:.18s ease}
.nav-cta:hover{background:var(--green);border-color:var(--green);color:var(--ink)}
.menu-toggle{display:none;width:40px;height:40px;flex:0 0 auto;margin-left:14px;padding:0;border:1px solid var(--line);background:transparent;color:var(--ink)}
.menu-toggle span,.menu-toggle:before,.menu-toggle:after{content:"";display:block;width:16px;height:1px;margin:4px auto;background:currentColor;transition:.2s ease}
.menu-toggle[aria-expanded=true] span{opacity:0}
.menu-toggle[aria-expanded=true]:before{transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded=true]:after{transform:translateY(-5px) rotate(-45deg)}
@media(max-width:960px){
  .nav{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 0;background:var(--paper);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s ease}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav a{padding:15px 32px;border:0;border-bottom:1px solid var(--line-soft)}
  .menu-toggle{display:block;order:3}
  .nav-cta{margin-left:auto}
}
@media(max-width:600px){
  .site-header{height:68px}
  .shell{width:calc(100% - 32px)}
  .brand{font-size:1.44rem}
  .nav-cta{height:38px;padding:0 10px;font-size:0.78rem}
}

/* ---- footer ---- */
footer{background:var(--ink);color:var(--paper);padding:40px 0}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.footer-row .brand{color:var(--paper)}
.footer-nav{display:flex;gap:26px;flex-wrap:wrap}
.footer-nav a{font-size:1.032rem}
.footer-nav a:hover{color:var(--green)}
.footer-row .eyebrow{color:rgba(255,255,255,.55)}
@media(max-width:700px){.footer-row{align-items:flex-start;flex-direction:column;gap:16px}}

/* ---- generic buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 26px;border:1px solid var(--ink);color:var(--ink);background:var(--paper);font-size:1.104rem;font-weight:500;white-space:nowrap;transition:.18s ease}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--ink);color:var(--green)}
.btn.primary:hover{background:var(--green);border-color:var(--green);color:var(--ink)}
.btn.ghost{background:transparent}
.btn.ghost.on-dark{border-color:rgba(255,255,255,.4);color:#fff}
.btn.ghost.on-dark:hover{background:#fff;color:var(--ink)}

/* ---- section rhythm ---- */
section.block{padding:150px 0;border-bottom:1px solid var(--line)}
section.block.tight{padding:100px 0}
section.block.soft{background:var(--soft)}
section.block.navy{background:var(--ink);color:#fff}
.section-title h2{font-size:clamp(2.64rem,4.8vw,5.52rem);letter-spacing:-.04em;line-height:.98;font-weight:600;margin:26px 0 0}
.lead{font-size:clamp(1.38rem,2.16vw,1.92rem);line-height:1.3;margin:0 0 44px;max-width:820px}
@media(max-width:900px){section.block{padding:90px 0}section.block.tight{padding:64px 0}}

/* ---- hero ---- */
.hero{position:relative;padding:150px 0 110px;border-bottom:1px solid var(--line)}
.hero.on-dark{background:var(--ink);color:#fff}
.hero h1{font-size:clamp(3.36rem,6.72vw,6.48rem);line-height:.98;letter-spacing:-.045em;font-weight:700;margin:30px 0 34px}
.hero .lead{max-width:720px;margin:0 0 34px;font-size:clamp(1.32rem,1.92vw,1.62rem);line-height:1.45}
@media(max-width:600px){.hero{padding:90px 0 64px}}
.modes{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ink)}
.mode{min-height:90px;padding:16px;text-align:left;background:transparent;border:0;border-right:1px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.mode:last-child{border-right:0}
.mode:hover,.mode.active{background:var(--ink);color:var(--paper)}
@media(max-width:900px){.modes{grid-template-columns:1fr 1fr}.mode{border-bottom:1px solid var(--ink)}.mode:nth-child(2){border-right:0}.mode:nth-child(4){border-right:0}}
@media(max-width:600px){.modes{grid-template-columns:1fr}.mode{border-right:0}}
@media(max-width:800px){}
@media(max-width:900px){}

/* ---- tiered ladder (Model / Connect / Project, or mechanism steps) ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);counter-reset:tier}
@media(max-width:900px){}
@media(max-width:700px){}
.rule{padding:28px 30px;background:var(--paper)}
.rule h3{margin:0 0 14px;font-size:1.38rem;font-weight:600;color:var(--charcoal)}
.rule.change h3{color:var(--green-deep)}
.rule ul{margin:0;padding-left:18px;color:var(--muted);font-size:1.104rem;line-height:1.8}
@media(max-width:800px){}
@media(max-width:800px){}
@media(max-width:700px){}
@media(max-width:700px){}
@media(max-width:900px){}
@media(max-width:800px){}

/* ---- shared section-note text style (stats caveat, demo captions, etc.) ---- */
.demo-caption{max-width:680px;margin:20px 0 0;color:var(--muted);font-size:1.08rem;line-height:1.6}

/* ---- full-screen hero, 50/50 split (index.html) ---- */
.hero.hero-full{padding:0;background:#fff;border-bottom:1px solid var(--line)}
.hero.hero-full .shell{width:min(100%,var(--max))}
@media(max-width:960px){
}
section[id]{scroll-margin-top:150px}
@media(max-width:960px){}

@media(max-width:1150px){
  .section-title h2{font-size:clamp(2.5rem,5vw,4.4rem)}
}
@media(max-width:960px){
  .section-title h2{max-width:800px}
}

/* ---- SMA "applied" callout ---- */
.applied{padding:30px 34px;border:2px solid var(--ink);background:#fff}
.applied p{margin:0 0 10px;font-size:1.128rem;line-height:1.6}
.applied p:last-child{margin-bottom:0}
.applied b{color:var(--green-deep)}

@media(max-width:600px){
  section.block,.hero,.close-cta{padding-left:0;padding-right:0}
}

/* ==========================================================================
   Compatibility aliases - v4/original tokens still referenced by page-level
   <style> blocks that were reskinned for header/nav/footer only this pass
   (case-studies.html, meaning-translator.html, expertise.html, pricing.html,
   about.html, ai-sma.html, contact.html) and were not otherwise rewritten,
   per instruction to preserve their existing internal content. These map
   each old token to the nearest role in the v5 palette so nothing in those
   pages renders broken or falls back to the browser default. Do not use
   these names in new v5 markup - use the tokens defined above instead.
   ========================================================================== */
:root{
  --font-display:"Jost",sans-serif;
  --font-body:"Noto Sans",sans-serif;
  --body:var(--muted);
  --navy:var(--ink);
  --clay:var(--muted);
  --blue:var(--green);
  --blue-deep:var(--green-deep);
  --cyan:var(--green);
  --orange:var(--green);
  --orange-2:var(--green-deep);
  --orange-soft:rgba(106,175,8,.12);
  --tan-50:var(--soft);
  --tan-100:var(--soft);
  --radius-lg:3px;
  --radius-md:2px;
  --space-section:110px;
}

/* .eyebrow.on-light - accent variant used by about.html, ai-sma.html,
   expertise.html and meaning-translator.html on light sections; base
   .eyebrow above carries no color of its own. */
.eyebrow.on-light{color:var(--green-deep)}

/* .sketch / .sketch-left / .sketch-right - the decorative hand-drawn
   corner doodles from the original v4 stylesheet, still referenced by
   case-studies.html, expertise.html and meaning-translator.html. Ported
   forward with v5's ink token in place of the old hardcoded black. */
.sketch{position:absolute;top:-6px;width:168px;height:168px;color:var(--ink);opacity:.4;pointer-events:none;z-index:0}
@media(max-width:900px){}

/* ---- developer consumption kit (agent-layer-offer.html, pricing.html) ---- */
.kit-block{max-width:1120px;margin:64px auto 0}
@media(max-width:900px){}

/* v24: annotated page refinements */
:root{--paper:#f6f6f2;--green-deep:#579202}
@media(max-width:850px){}
@media(min-width:901px){}

/* v25 annotated palette */
.eyebrow{color:var(--green-deep);opacity:1}
.hero.on-dark .eyebrow,.about-hero .eyebrow,.service-hero .eyebrow,.reuse .eyebrow,.sma-band .eyebrow,.pilot-band .eyebrow,.close-cta .eyebrow{color:var(--green)}