/* Shared stylesheet for the Plantwide marketing site (index + service pages).
   Extracted from the former inline block in index.html so all pages share it.
   No em dashes anywhere (brand rule). */
:root{
  --sky:#2a8fba; --sky-deep:#206588; --sky-soft:#eaf5fb; --sky-line:#cfe6f2;
  --ink:#0f2733; --ink-2:#3c5360; --paper:#ffffff; --paper-2:#f6fafc;
  --line:#e2ebf0; --amber:#e08a1e;
  --shadow:0 18px 50px -28px rgba(15,39,51,.35);
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;
  line-height:1.04;letter-spacing:-.02em;margin:0;color:var(--ink);font-weight:700}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sky-deep)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;
  padding:.78rem 1.4rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn--primary{background:var(--sky);color:#fff;box-shadow:0 10px 24px -12px rgba(42,143,186,.8)}
.btn--primary:hover{background:var(--sky-deep);transform:translateY(-2px)}
.btn--ghost{background:#fff;border-color:var(--sky-line);color:var(--sky-deep)}
.btn--ghost:hover{border-color:var(--sky);transform:translateY(-2px)}

/* blueprint backdrop */
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;opacity:.5;
  -webkit-mask-image:radial-gradient(circle at 70% 8%,#000,transparent 60%);
  mask-image:radial-gradient(circle at 70% 8%,#000,transparent 60%)}
#app,main.page{position:relative;z-index:1}

/* header */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;font-size:1.18rem;letter-spacing:-.02em}
.brand img{height:34px;width:auto;display:block}
.brand b{color:var(--sky-deep)}
.nav__links{display:flex;align-items:center;gap:1.6rem;font-size:.93rem;font-weight:500}
.nav__links a.lnk{color:var(--ink-2)}
.nav__links a.lnk:hover{color:var(--sky-deep)}
@media(max-width:820px){.nav__links .hide-sm{display:none}}

/* hero */
.hero{padding:88px 0 70px;position:relative}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr;gap:36px}}
.hero h1{font-size:clamp(2.6rem,6vw,4.3rem);font-weight:800}
.hero h1 .hl{color:var(--sky-deep);position:relative;white-space:nowrap}
.hero p.lead{font-size:1.18rem;color:var(--ink-2);margin:1.3rem 0 0;max-width:33ch}
.hero .cta{display:flex;gap:.8rem;margin-top:2rem;flex-wrap:wrap}
.hero .eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;
  padding:.4rem .8rem;border:1px solid var(--sky-line);border-radius:999px;background:var(--sky-soft)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(42,143,186,.18)}

/* hub-and-spoke UNS visual */
.uns{aspect-ratio:1/1;width:100%;max-width:430px;margin-inline:auto}
.uns text{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--ink-2)}
.uns .ring{fill:none;stroke:var(--sky-line);stroke-width:1.4}
.uns .spoke{stroke:var(--sky-line);stroke-width:1.6}
.uns .pulse{stroke:var(--sky);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:6 220;animation:flow 3.4s linear infinite}
.uns .pulse-in{stroke:var(--sky);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:6 220;animation:flow 3.4s linear infinite reverse}
.uns .pulse-ai{stroke:var(--amber);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:6 210;animation:flow 3s linear infinite reverse}
.uns .node{fill:#fff;stroke:var(--sky-line);stroke-width:1.5}
.uns .node.core{fill:var(--sky);stroke:var(--sky-deep)}
.uns .node.ai{stroke:var(--amber);stroke-width:1.8}
.uns .nlabel{fill:var(--ink);font-weight:500}
@keyframes flow{to{stroke-dashoffset:-226}}

/* sections */
section.band{padding:78px 0;position:relative}
.band--soft{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:60ch;margin-bottom:40px}
.sec-head h2{font-size:clamp(2rem,4vw,2.9rem);margin-top:.5rem}
.sec-head p{color:var(--ink-2);margin:.9rem 0 0}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;
  transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--sky-line)}
.card h3{font-size:1.22rem}
.card h3 a:hover{color:var(--sky-deep)}
.card p{color:var(--ink-2);font-size:.98rem;margin:.5rem 0 0}
.card .more{display:inline-block;margin-top:.7rem;font-size:.88rem;font-weight:600;color:var(--sky-deep)}

/* approach steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
.step{padding:24px;border-left:2px solid var(--sky-line);position:relative}
.step .num{font-family:"IBM Plex Mono",monospace;color:var(--sky);font-size:.85rem;font-weight:500}
.step h3{font-size:1.08rem;margin:.4rem 0 .35rem}
.step p{color:var(--ink-2);font-size:.92rem;margin:0}

/* about / split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:30px}}
.stat-row{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.stat b{font-family:"Bricolage Grotesque",sans-serif;font-size:2.1rem;color:var(--sky-deep);display:block;line-height:1}
.stat span{font-size:.86rem;color:var(--ink-2)}
.panel{background:linear-gradient(160deg,var(--sky-soft),#fff);border:1px solid var(--sky-line);
  border-radius:20px;padding:30px}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{display:flex;gap:.7rem;padding:.55rem 0;border-bottom:1px dashed var(--sky-line);font-size:.98rem}
.panel li:last-child{border-bottom:none}
.panel li svg{flex:none;margin-top:3px;color:var(--sky)}

/* AI / software-dev (YokeDev) callout */
.aidev{display:grid;grid-template-columns:1.4fr .9fr;gap:36px;align-items:center;
  background:linear-gradient(160deg,var(--sky-soft),#fff);border:1px solid var(--sky-line);
  border-radius:20px;padding:clamp(26px,4vw,40px)}
.aidev h2{font-size:clamp(1.6rem,3.5vw,2.3rem);margin-top:.5rem}
.aidev p{color:var(--ink-2);margin-top:.8rem;max-width:54ch}
@media(max-width:760px){.aidev{grid-template-columns:1fr;gap:22px;text-align:center}
  .aidev p{margin-inline:auto}}

/* CTA */
.cta-band{background:linear-gradient(135deg,var(--sky-deep),var(--sky));color:#fff;
  border-radius:24px;padding:54px;text-align:center;box-shadow:var(--shadow)}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,4vw,2.7rem)}
.cta-band p{color:rgba(255,255,255,.9);max-width:48ch;margin:1rem auto 0}
.cta-band .btn--primary{background:#fff;color:var(--sky-deep)}
.cta-band .btn--primary:hover{background:#eaf5fb}

/* footer */
footer{padding:54px 0 40px;border-top:1px solid var(--line);background:var(--paper-2)}
.foot__grid{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.foot__links{display:flex;gap:40px;flex-wrap:wrap}
.foot__col h4{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 12px}
.foot__col a{display:block;color:var(--ink-2);font-size:.92rem;padding:.2rem 0}
.foot__col a:hover{color:var(--sky-deep)}
.foot__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink-2)}
.yokedev{color:var(--sky-deep);font-weight:600}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* Content must never be invisible without JS (crawlers, noscript). */
.no-js .reveal{opacity:1;transform:none}

/* robot loader */
#loader{position:fixed;inset:0;z-index:200;background:#fff;display:grid;place-items:center;
  transition:opacity .5s ease}
#loader.gone{opacity:0;pointer-events:none}
.no-js #loader{display:none}
.robot{width:74px;height:74px}
.robot .eye{animation:blink 2.4s infinite}
.robot .arm{transform-origin:center;animation:wave 1.6s ease-in-out infinite}
@keyframes blink{0%,92%,100%{opacity:1}95%{opacity:.15}}
@keyframes wave{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
.robot__txt{margin-top:14px;text-align:center}

/* service subpages */
.page-hero{padding:72px 0 40px}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800}
.page-hero p.lead{font-size:1.15rem;color:var(--ink-2);margin:1.1rem 0 0;max-width:60ch}
.crumb{display:inline-block;margin-bottom:1rem;font-size:.85rem;color:var(--sky-deep);font-weight:600}
.prose{max-width:72ch;color:var(--ink-2)}
.prose h2{font-size:1.55rem;margin:2.3rem 0 .6rem;color:var(--ink)}
.prose p{margin:.7rem 0}
.prose ul{padding-left:1.25rem;margin:.7rem 0}
.prose li{margin:.4rem 0}
.prose strong{color:var(--ink)}
.page-cta{margin:3rem 0 4rem}