/* =============================================================
   Prana Mfg LLC — styles.css
   Grounded, industrial restyle. Forest green carries real structural
   weight, orange is the sparing action accent, charcoal Hanken Grotesk
   type is solid and engineered. Defined color bands, not one endless
   light scroll.

   Contents:
     0.  Design tokens (:root)  ← retune colors/font here
     1.  Reset & base (+ type weight map)
     2.  Utilities
     3.  Header / nav  (solid forest-green bar)
     4.  Hero  (light + faint blueprint grid)
     5.  Sections — shared rhythm + type
     6.  The moment
     7.  Why Prana  (full deep-green band)
     8.  Who we are  (light)
     9.  Approach / capabilities  (carded)
     10. Contact / close  (orange CTA button)
     11. Footer  (full green block)
     12. Motion & reduced-motion
     13. Responsive

   TYPE WEIGHT MAP (Hanken Grotesk 400/600/800):
     H1 hero headline 800 · H2 section headings 800 · H3 capability 600
     body 400 · lead/subhead 400 (larger, not heavier) · nav 600
     CTA/email 600 · footer 400
   ============================================================= */


/* =============================================================
   0. DESIGN TOKENS  — the knobs to retune the whole site
   ============================================================= */
:root {
  /* --- Brand colors: roles taken from the logo direction --- */
  --color-green:        #0F5C3F; /* deep forest green — STRUCTURAL anchor    */
  --color-green-deep:   #0A4A31; /* darker green — footer depth / hovers      */
  --color-orange:       #F47C00; /* ACTION / energy accent — use sparingly    */
  --color-orange-deep:  #D96A00; /* orange hover / active                     */
  --color-ink:          #2E3A3F; /* charcoal — ALL headings & body text       */
  --color-ink-soft:     #566268; /* muted charcoal — secondary text           */
  --color-bg:           #EEF0EA; /* light canvas — cooler/cleaner than cream  */
  --color-surface:      #E4E7DE; /* slightly deeper light — capability cards  */
  --color-line:         rgba(46, 58, 63, 0.14);  /* charcoal hairline         */
  --color-green-line:   rgba(15, 92, 63, 0.07);  /* faint grid on light       */

  /* --- Text colors on the green bands --- */
  --color-on-green:      #EDF3EE; /* near-white text on green                 */
  --color-on-green-soft: #C2D8CC; /* muted light text on green (AA-safe)      */
  --color-on-green-line: rgba(237, 243, 238, 0.18);
  --color-on-orange:     #22282B; /* near-black label on the orange button    */

  /* --- Typography: one family, Hanken Grotesk (swappable) --- */
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale */
  --step-hero:  clamp(2.5rem, 5vw, 4rem);                /* H1 hero headline */
  --step-h2:    clamp(1.85rem, 1.25rem + 2.6vw, 2.9rem); /* H2 section title */
  --step-lead:  clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);  /* lead / subhead   */
  --step-body:  1.125rem;                                /* body text        */

  --leading-body:  1.65;  /* comfortable body line-height */
  --leading-tight: 1.1;   /* headings                     */

  /* --- Layout --- */
  --measure:        46rem;  /* comfortable content column                */
  --measure-narrow: 34rem;  /* narrow column for intimate text blocks    */
  --measure-text:   65ch;   /* cap on running-text line length           */
  --gutter:         clamp(1.25rem, 5vw, 2.5rem); /* horizontal page pad   */
  --section-space:  clamp(5rem, 4rem + 9vh, 9rem); /* vertical section pad */
  --header-h:       4.5rem; /* fixed header height (scroll offset)        */

  /* --- Motion (kept slow + calm) --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-shift: 1.5rem;
}


/* =============================================================
   1. RESET & BASE  (+ heading weight map)
   ============================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;              /* CSS-only smooth anchor scrolling */
  scroll-padding-top: var(--header-h);  /* keep fixed header off targets    */
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--step-body);       /* 1.125rem */
  line-height: var(--leading-body);  /* 1.65     */
  font-weight: 400;                  /* body = 400 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Heavy, engineered headings (H1/H2 = 800; H3 dropped to 600 below) */
h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--color-ink);
  text-wrap: balance;
}

p { max-width: var(--measure-text); } /* ~65ch readable line length */

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: 2px;
}


/* =============================================================
   2. UTILITIES
   ============================================================= */
.measure {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure--narrow { max-width: var(--measure-narrow); }

.center { text-align: center; }
.center p { margin-inline: auto; }

/* Lead / intro paragraphs — larger, NOT heavier (weight 400) */
.lead {
  font-size: var(--step-lead);
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1.5;
}

/* Running-text blocks */
.prose > * + * { margin-top: 1.4em; }
.prose p { color: var(--color-ink-soft); }

/* Accessible-only text */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Skip link (orange so it's obviously actionable) */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  background: var(--color-orange);
  color: var(--color-on-orange);
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  z-index: 1000;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }


/* =============================================================
   3. HEADER / NAV  — solid forest-green bar
   ============================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--color-green);
  /* Always-defined edge so it reads over both light and green sections */
  box-shadow: 0 1px 0 var(--color-green-deep), 0 6px 20px rgba(10, 74, 49, 0.18);
}

.site-header__inner {
  height: 100%;
  max-width: var(--measure); /* line the wordmark up with section content */
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Wordmark — cube mark + heavy uppercase logotype */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-on-green);
}
/* Cube mark on the green bar: light faces + orange top (light logo variant) */
.wordmark__mark {
  height: 1.9rem;
  width: auto;
  flex: none;
  display: block;
}
.wordmark__mark .mark-face { fill: var(--color-on-green); }
.wordmark__mark .mark-top  { fill: var(--color-orange); }

.primary-nav ul {
  list-style: none;
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: 0;
}
.primary-nav a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;              /* nav = 600 */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-on-green-soft);
  padding: 0.35rem 0;
  position: relative;
  transition: color 0.2s var(--ease);
}
/* Orange underline on hover/focus — "this is a link, act on it" */
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--color-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.primary-nav a:hover,
.primary-nav a:focus-visible { color: var(--color-on-green); }
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { transform: scaleX(1); }

/* Mobile hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  margin-right: -0.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle__bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-on-green);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}


/* =============================================================
   4. HERO  — light, grounded, faint engineering grid
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 6rem;
  isolation: isolate;
  overflow: hidden;
}

/* Faint blueprint grid — reinforces "digital twin / engineering",
   fades out toward the edges. Pure CSS, no image. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--color-green-line) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, var(--color-green-line) 1px, transparent 1px) 0 0 / 3rem 3rem,
    var(--color-bg);
  -webkit-mask-image: radial-gradient(120% 85% at 50% 30%, #000 38%, transparent 76%);
  mask-image: radial-gradient(120% 85% at 50% 30%, #000 38%, transparent 76%);
}

.hero__content {
  max-width: 54rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hero cube mark — the real logo on the light background (green faces, orange top) */
.hero__mark {
  height: clamp(4.5rem, 4rem + 6vw, 7rem);
  width: auto;
  display: block;
  margin: 0 auto 2rem;
}
.hero__mark .hero-mark-face { fill: var(--color-green); }
.hero__mark .hero-mark-top  { fill: var(--color-orange); }

.hero__headline {
  font-size: var(--step-hero);   /* clamp(2.5rem, 5vw, 4rem) */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

.hero__subhead {
  font-size: var(--step-lead);
  font-weight: 400;              /* larger, not heavier */
  color: var(--color-ink-soft);
  max-width: 46ch;
  line-height: 1.5;
}

/* Scroll cue — orange (an invitation to act) */
.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-orange);
}
.scroll-cue__line {
  width: 2px;
  height: 2.75rem;
  background: var(--color-orange);
  animation: cue-drift 2.4s var(--ease) infinite;
}


/* =============================================================
   5. SECTIONS — shared rhythm + type
   ============================================================= */
.section {
  padding-block: var(--section-space);
}
.section__title {
  font-size: var(--step-h2);
  margin-bottom: 1.5rem;
}
/* Orange highlight rule under key headings — the one heading accent */
.section__title::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: 1.1rem;
  background: var(--color-orange);
  border-radius: 2px;
}
/* Spacing between a lead and the paragraph that follows it */
.lead + p { margin-top: 1.25rem; }


/* =============================================================
   6. THE MOMENT  (narrow, centered — large calm opening statement)
   ============================================================= */
.section--moment {
  padding-block: calc(var(--section-space) * 1.05);
}
.section--moment p + p { margin-top: 1.4rem; }
/* Larger, not heavier (weight 400) — a calm, substantial opener */
.section--moment .lead {
  font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.35;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}


/* =============================================================
   7. WHY PRANA  — full deep-green band (the philosophical anchor)
   ============================================================= */
.section--green {
  background: var(--color-green);
  color: var(--color-on-green);
  padding-block: calc(var(--section-space) * 1.2);
}
.section--green .section__title { color: var(--color-on-green); }
.section--green .prose p { color: var(--color-on-green-soft); }
.section--green em { color: var(--color-on-green); font-style: italic; }


/* =============================================================
   8. WHO WE ARE  — light (uses shared .section styles)
   ============================================================= */
/* (No section-specific rules needed; kept for the section map.) */


/* =============================================================
   9. APPROACH / CAPABILITIES  — cleanly carded, green-anchored
   ============================================================= */
.capabilities {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2×2 for four capabilities */
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Defined card: light surface + a solid green top rule (structure) */
.capability {
  padding: 1.75rem 1.5rem;
  background: var(--color-surface);
  border-top: 4px solid var(--color-green);
}
.capability__title {
  font-size: 1.2rem;
  font-weight: 600;              /* H3 = 600 */
  letter-spacing: -0.005em;
  margin-bottom: 0.6rem;
  color: var(--color-ink);
}
.capability__body {
  color: var(--color-ink-soft);
  font-size: var(--step-body);
  line-height: 1.55;
}

/* Quiet tech-stack paragraph beneath the capabilities */
.tech-line {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}


/* =============================================================
   10. CONTACT / CLOSE  — heavy close + orange CTA button
   ============================================================= */
.section--contact {
  padding-block: calc(var(--section-space) * 1.15);
}
.section--contact .lead {
  color: var(--color-ink);
}

/* Emotional closing line ("We'll navigate it together.") */
.closing-line {
  margin: 2.25rem 0 2rem;
  font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
}

/* Primary CTA — orange email button, near-black label (industrial signage) */
.email-link {
  display: inline-block;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);
  font-weight: 600;             /* CTA = 600 */
  letter-spacing: 0.01em;
  color: var(--color-on-orange);
  background: var(--color-orange);
  text-decoration: none;
  padding: 0.85em 1.7em;
  border-radius: 4px;
  box-shadow: 0 2px 0 var(--color-orange-deep);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.2s var(--ease);
}
.email-link:hover,
.email-link:focus-visible {
  background: var(--color-orange-deep);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--color-green-deep);
}


/* =============================================================
   11. FOOTER  — full forest-green block
   ============================================================= */
.site-footer {
  background: var(--color-green);
  color: var(--color-on-green);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
.site-footer p { max-width: none; }
.site-footer__org {
  font-size: 1.1rem;
  font-weight: 400;             /* footer = 400 */
  color: var(--color-on-green);
  margin-bottom: 0.5rem;
}
.site-footer__copy {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-on-green-soft);
}


/* =============================================================
   12. MOTION — scroll-in reveals + hero cue
   ============================================================= */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes cue-drift {
  0%   { opacity: 0; transform: translateY(-40%); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(60%); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  .scroll-cue__line { animation: none; }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* =============================================================
   13. RESPONSIVE — mobile nav + tablet/phone scaling
   ============================================================= */

/* Capabilities: 2×2 → single column on phones */
@media (max-width: 40rem) {
  .capabilities { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Mobile nav: collapse links behind the hamburger (green panel) */
@media (max-width: 40rem) {
  .nav-toggle { display: flex; }

  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--color-green);
    box-shadow: 0 12px 24px rgba(10, 74, 49, 0.25);
    /* Collapsed by default */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
      max-height 0.32s var(--ease),
      opacity 0.24s var(--ease),
      visibility 0.32s var(--ease);
  }
  .site-header.is-open .primary-nav {
    max-height: 70vh;
    opacity: 1;
    visibility: visible;
  }
  .primary-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .primary-nav li { border-bottom: 1px solid var(--color-on-green-line); }
  .primary-nav li:last-child { border-bottom: 0; }
  .primary-nav a {
    display: block;
    padding: 1rem 0;
    font-size: 1rem;
  }
  .primary-nav a::after { display: none; }

  /* Hamburger → X when open */
  .site-header.is-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(3.5px) rotate(45deg);
  }
  .site-header.is-open .nav-toggle__bar:nth-child(2) {
    transform: translateY(-3.5px) rotate(-45deg);
  }
}


/* =============================================================
   14. DESIGN ENHANCEMENTS
       Illustration, icons, split layouts, eyebrows, chips,
       textured green bands, footer mark, calm motion.
       All pure inline SVG/CSS — no images, no framework.
   ============================================================= */

/* --- Eyebrow kicker (orange bar + charcoal label = accessible) --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-orange);
}
.eyebrow--on-green { color: var(--color-on-green-soft); }

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 4px;
  padding: 0.8em 1.6em;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.2s var(--ease);
}
.btn--primary {
  color: var(--color-on-orange);
  background: var(--color-orange);
  box-shadow: 0 2px 0 var(--color-orange-deep);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-orange-deep);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--color-green-deep);
}

/* --- Wider container + split (two-column) layouts --- */
.measure--wide { max-width: 66rem; }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--aside { grid-template-columns: 15rem 1fr; align-items: start; }
.split--aside .split__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 48rem) {
  .split, .split--aside { grid-template-columns: 1fr; gap: 2rem; }
  .split--aside .split__aside { position: static; }
}

/* --- HERO: two columns (text + illustration) --- */
.hero { text-align: left; }
.hero__inner {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__content {
  max-width: none;
  align-items: flex-start;
  text-align: left;
}
.hero__content .btn { margin-top: 2rem; }
.hero__subhead { max-width: 36ch; }
.hero__visual { width: 100%; }
.twin-scene { width: 100%; height: auto; display: block; overflow: visible; }
@media (max-width: 52rem) {
  .hero { text-align: center; }
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__content { align-items: center; text-align: center; }
  .hero__subhead { max-width: 46ch; }
  .hero__visual { max-width: 20rem; margin-inline: auto; order: -1; }
}

/* --- Twin-scene illustration --- */
.ts-floor { fill: rgba(15, 92, 63, 0.05); stroke: rgba(15, 92, 63, 0.22); stroke-width: 1; }
.ts-grid  { fill: none; stroke: rgba(15, 92, 63, 0.14); stroke-width: 1; }
.ts-link  { fill: none; stroke: var(--color-orange); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.45; }
.ts-face-t { fill: var(--color-orange); }
.ts-face-r { fill: var(--color-green); }
.ts-face-l { fill: var(--color-green-deep); }
.ts-conn { stroke: var(--color-orange); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.7; }
.ts-twin-top  { fill: rgba(244, 124, 0, 0.12); stroke: var(--color-orange); stroke-width: 1.5; stroke-linejoin: round; }
.ts-twin-edge { fill: none; stroke: var(--color-orange); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ts-node { fill: var(--color-orange); transform-box: fill-box; transform-origin: center; animation: ts-pulse 2.8s var(--ease) infinite; }
.ts-node--2 { animation-delay: 0.9s; }
.ts-node--3 { animation-delay: 1.8s; }
.ts-flow { fill: var(--color-orange); animation: ts-flow 3s var(--ease) infinite; }
@keyframes ts-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.7); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@keyframes ts-flow {
  0%   { transform: translateY(0);    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(-88px); opacity: 0; }
}

/* --- Capability cards: icons + hover lift --- */
.capability { transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.capability:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(46, 58, 63, 0.10);
}
.capability__icon {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  padding: 0.55rem;
  border-radius: 8px;
  background: rgba(15, 92, 63, 0.08);
}
.capability__icon .icn {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--color-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.capability__icon .icn-accent { stroke: var(--color-orange); }

/* --- "Works with" chips --- */
.stack-chips {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.stack-chips li {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}

/* --- Blueprint texture inside the green bands --- */
.section--green, .site-footer { position: relative; isolation: isolate; }
.section--green::before, .site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(237, 243, 238, 0.05) 1px, transparent 1px) 0 0 / 2.75rem 2.75rem,
    linear-gradient(90deg, rgba(237, 243, 238, 0.05) 1px, transparent 1px) 0 0 / 2.75rem 2.75rem;
  pointer-events: none;
}

/* --- Breathing-seam cube (Why Prana) --- */
.bcube {
  width: 100%;
  max-width: 17rem;
  height: auto;
  display: block;
  margin-inline: auto;
  animation: bcube-float 6s ease-in-out infinite;
}
.bcube-face   { fill: var(--color-on-green); }
.bcube-top    { fill: var(--color-orange); }
.bcube-breath { fill: #FBB04A; }
@keyframes bcube-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* --- Footer cube mark --- */
.site-footer__mark {
  height: 2.4rem;
  width: auto;
  display: block;
  margin: 0 auto 1.25rem;
}
.site-footer__mark .mark-face { fill: var(--color-on-green); }
.site-footer__mark .mark-top  { fill: var(--color-orange); }

/* --- Reduced motion: freeze illustration + float --- */
@media (prefers-reduced-motion: reduce) {
  .ts-node, .ts-flow, .bcube { animation: none; }
  .ts-flow { opacity: 0.85; }
}