/* ==========================================================
   Swarup Kumar — Site Design System
   Editorial / premium / engineering-literate
   One stylesheet, all pages.
   ========================================================== */

:root{
  /* Color tokens */
  --ink:        #14181F;
  --ink-2:      #5C5751;
  --ink-3:      #8A857C;
  --paper:      #F7F5F1;
  --paper-2:    #EEEAE0;
  --rule:       #DDD9D2;
  --rule-dark:  rgba(247,245,241,0.14);
  --signal:     #3B6FB8;
  --accent:     #C26847;

  /* Type */
  --f-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-text:    Helvetica, "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Size scale */
  --fs-display: clamp(48px, 6.4vw, 88px);
  --fs-h1:      clamp(40px, 5.2vw, 64px);
  --fs-h2:      clamp(28px, 3.2vw, 40px);
  --fs-h3:      22px;
  --fs-body:    16px;
  --fs-lede:    18px;
  --fs-mono:    11px;

  /* Layout */
  --maxw:    1180px;
  --pad-x:   56px;
  --pad-x-m: 24px;
  --radius:  3px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
ul,ol{margin:0; padding:0; list-style:none}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:400;
  margin:0;
  letter-spacing:-0.018em;
  line-height:1.04;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3); line-height:1.15}
h4{font-size:18px; line-height:1.2}
p{margin:0; text-wrap:pretty}
em{color:var(--accent); font-style:italic}
a.link{color:var(--signal); border-bottom:1px solid currentColor; padding-bottom:1px}
a.link:hover{color:var(--ink); border-color:var(--ink)}

.serif{font-family:var(--f-display)}
.mono{
  font-family:var(--f-mono);
  font-size:var(--fs-mono);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.kicker{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:var(--fs-mono);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:14px;
}
.eyebrow-rule{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--f-mono); font-size:var(--fs-mono);
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom:20px;
}
.eyebrow-rule::before{content:""; width:32px; height:1px; background:var(--ink-2)}

/* ---------- LAYOUT ---------- */
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x)}
section{padding:96px 0}
.section-title{max-width:680px; margin:0 auto 56px; text-align:center}
.section-title.left{text-align:left; margin-left:0}
.hairline{height:1px; background:var(--rule); width:100%}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(247,245,241,0.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
}
.nav-logo{display:flex; align-items:center; gap:12px}
.nav-logo .mark{
  height:32px; width:auto; display:block;
  /* Scale-motif mark (SK + ascending bars, terracotta tip) */
}
.nav-logo .word{
  font-family:var(--f-display);
  font-size:22px;
  letter-spacing:-0.01em;
  line-height:1;
}
.nav-logo .word small{
  display:block;
  font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-2);
  margin-top:4px;
}
.nav-links{display:flex; gap:28px; align-items:center}
.nav-links a{
  font-size:14px; color:var(--ink-2);
  padding:6px 0; position:relative;
  transition:color .15s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--accent);
}
.nav-cta{
  font-size:13px; padding:10px 18px;
  background:var(--ink); color:var(--paper);
  border-radius:var(--radius);
  transition:background .15s ease;
}
.nav-cta:hover{background:var(--accent)}
.nav-burger{display:none; padding:11px; margin:-11px -11px -11px 0; color:var(--ink)}
.nav-burger svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  font-family:var(--f-text);
  font-size:14px; font-weight:500;
  letter-spacing:0.01em;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--accent)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-outline:hover{background:var(--ink); color:var(--paper)}
.btn-on-ink{background:var(--paper); color:var(--ink)}
.btn-on-ink:hover{background:var(--accent); color:var(--paper)}
.btn-ghost{
  padding:6px 0; border-bottom:1px solid var(--ink);
  border-radius:0; color:var(--ink);
}
.btn-ghost:hover{color:var(--accent); border-color:var(--accent)}

/* ---------- HERO (HOME) ---------- */
.hero{padding:96px 0 80px}
.hero-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:end}
.hero-display{
  font-size:var(--fs-display);
  letter-spacing:-0.022em;
  line-height:1.04;
  margin-top:18px;
}
.hero-sub{
  font-size:var(--fs-lede);
  color:var(--ink-2);
  max-width:54ch;
  margin:52px 0 32px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-portrait{
  aspect-ratio:4/5;
  background:var(--ink);
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
.hero-portrait::after{
  content:""; position:absolute; inset:14px;
  border:1px solid rgba(247,245,241,0.18);
}
.hero-portrait .label{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:rgba(247,245,241,0.55);
  text-align:center; line-height:1.7;
}
.hero-portrait .corner{
  position:absolute; right:24px; bottom:24px;
  font-family:var(--f-display); font-size:32px; color:var(--paper);
  letter-spacing:-0.02em;
}

/* ---------- STATS STRIP ---------- */
.stats{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.stats-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
}
.stat{
  padding:36px 24px;
  border-left:1px solid var(--rule);
}
.stat:first-child{border-left:none}
.stat .v{
  font-family:var(--f-display);
  font-size:clamp(36px,4vw,52px);
  line-height:1; letter-spacing:-0.022em;
}
.stat .v sup{font-size:0.5em; color:var(--accent); font-style:italic; vertical-align:super; margin-left:2px}
.stat .l{
  margin-top:10px;
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-2);
  line-height:1.4;
}

/* ---------- CASE STUDIES ---------- */
.cases-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.case{
  border:1px solid var(--rule);
  background:var(--paper);
  padding:28px;
  display:flex; flex-direction:column; gap:18px;
  transition:transform .2s ease, border-color .2s ease;
}
.case:hover{transform:translateY(-2px); border-color:var(--ink)}
.case .meta{
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-2);
}
.case .metric{
  font-family:var(--f-display);
  font-size:42px; line-height:1; letter-spacing:-0.022em;
}
.case .metric em{color:var(--accent); font-style:italic; font-size:0.6em; vertical-align:super}
.case .outcome{
  font-size:15px; color:var(--ink);
  max-width:32ch;
  text-wrap:balance;
}
.case .rule{height:1px; background:var(--rule)}
.case .more{
  font-size:13px; font-weight:500;
  color:var(--signal);
  display:inline-flex; align-items:center; gap:6px;
}
.case .more::after{content:"→"; transition:transform .15s ease}
.case:hover .more::after{transform:translateX(3px)}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--ink); color:var(--paper)}
.cta-band .container{
  padding-top:80px; padding-bottom:80px;
  display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center;
}
.cta-band h2{color:var(--paper)}
.cta-band .kicker{color:rgba(247,245,241,0.55)}
.cta-band .actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}

/* ---------- SIGNATURE / PAGE FOOT ---------- */
.signature{
  text-align:center;
  padding:72px 0;
}
.signature .line{
  font-family:var(--f-display); font-size:24px;
  color:var(--ink); letter-spacing:-0.01em;
  max-width:48ch; margin:0 auto;
  line-height:1.3;
}
.signature .links{
  margin-top:22px;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-2);
}
.signature .links a{margin:0 8px}
.signature .links a:hover{color:var(--ink)}

/* ---------- PAGE HERO (subpages) ---------- */
.page-hero{
  padding:96px 0 64px;
  border-bottom:1px solid var(--rule);
}
.page-hero h1{
  font-size:clamp(40px,5.5vw,72px);
  letter-spacing:-0.022em; line-height:1.02;
  margin-top:14px; max-width:18ch;
}
.page-hero .lede{
  margin-top:24px;
  font-size:var(--fs-lede);
  color:var(--ink-2);
  max-width:60ch;
}

/* ---------- PROSE / ARTICLES ---------- */
.prose{max-width:68ch; margin:0 auto}
.prose p{margin:0 0 22px; font-size:17px; line-height:1.7; color:var(--ink)}
.prose h2{margin:56px 0 18px}
.prose h3{margin:36px 0 10px}
.prose ul{margin:0 0 22px}
.prose ul li{
  padding:8px 0 8px 22px;
  position:relative;
  font-size:16px; color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.prose ul li:last-child{border-bottom:none}
.prose ul li::before{
  content:""; position:absolute; left:0; top:18px;
  width:12px; height:1px; background:var(--accent);
}
.prose blockquote{
  margin:36px 0;
  padding:8px 0 8px 28px;
  border-left:2px solid var(--accent);
  font-family:var(--f-display);
  font-size:24px; line-height:1.35;
  color:var(--ink);
  font-style:italic;
}
.prose figure{margin:36px 0}
.prose figcaption{
  margin-top:10px;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-2);
}

/* ---------- TWO-COL EDITORIAL ---------- */
.two-col{display:grid; grid-template-columns:5fr 7fr; gap:64px}
.two-col-meta{display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:start}

/* ---------- LIST CARDS (about, patents) ---------- */
.entry{
  display:grid;
  grid-template-columns:140px 1fr 200px;
  gap:32px;
  padding:28px 0;
  border-top:1px solid var(--rule);
  align-items:start;
}
.entry:last-child{border-bottom:1px solid var(--rule)}
.entry .year{
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:0.08em;
  color:var(--ink-2);
}
.entry .body h3{margin-bottom:6px}
.entry .body p{color:var(--ink-2); font-size:15px}
.entry .body .tags{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px}
.entry .body .tag{
  font-family:var(--f-mono); font-size:10px;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-2);
  padding:3px 8px;
  border:1px solid var(--rule);
  border-radius:2px;
}
.entry .aside{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-2);
  text-align:right;
}

/* ---------- BLOG GRID ---------- */
.posts{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
}
.post{
  display:block;
  padding:32px 0;
  border-top:1px solid var(--rule);
}
.post .date{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:14px;
}
.post h3{font-size:24px; margin-bottom:10px}
.post p{color:var(--ink-2); font-size:15px}
.post .more{
  margin-top:14px; display:inline-flex; align-items:center;
  font-size:13px; color:var(--signal);
  border-bottom:1px solid currentColor; padding-bottom:1px;
}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:5fr 7fr; gap:64px}
.contact-card{
  background:var(--paper-2);
  padding:36px;
  border:1px solid var(--rule);
}
.contact-card h3{margin-bottom:14px}
.contact-card .row{
  padding:14px 0;
  border-top:1px solid var(--rule);
  font-size:14px; color:var(--ink-2);
}
.contact-card .row:first-of-type{border-top:none}
.contact-card .row strong{
  display:block; color:var(--ink);
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:4px;
}
form.contact label{
  display:block;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:8px;
}
form.contact input,
form.contact textarea,
form.contact select{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--rule);
  background:var(--paper);
  font:inherit; color:var(--ink);
  border-radius:var(--radius);
  outline:none;
  transition:border-color .15s ease;
}
form.contact input:focus,
form.contact textarea:focus,
form.contact select:focus{border-color:var(--ink)}
form.contact textarea{min-height:140px; resize:vertical}
form.contact .field{margin-bottom:22px}

/* ---------- PATENTS TABLE ---------- */
.patent{
  display:grid;
  grid-template-columns:120px 1fr 180px;
  gap:32px;
  padding:32px 0;
  border-top:1px solid var(--rule);
  align-items:start;
}
.patent:last-child{border-bottom:1px solid var(--rule)}
.patent .no{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:0.08em; color:var(--ink-2);
}
.patent .body h3{font-size:22px; margin-bottom:8px; max-width:42ch}
.patent .body p{font-size:14.5px; color:var(--ink-2); max-width:60ch}
.patent .status{
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-2);
  text-align:right;
}
.patent .status .pill{
  display:inline-block;
  padding:4px 10px;
  border:1px solid var(--rule);
  border-radius:999px;
}
.patent .status .pill.granted{color:var(--accent); border-color:var(--accent)}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--ink); color:var(--paper);
  padding:80px 0 32px;
  margin-top:0;
}
.footer .container{display:grid; gap:48px}
.footer-top{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
}
.footer-top h5{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(247,245,241,0.45);
  font-weight:500; margin:0 0 18px;
}
.footer-top ul li{padding:6px 0; font-size:14px}
.footer-top ul li a{color:rgba(247,245,241,0.78); transition:color .15s ease}
.footer-top ul li a:hover{color:var(--paper)}
.footer-brand .word{
  font-family:var(--f-display);
  font-size:32px; letter-spacing:-0.015em;
  color:var(--paper);
}
.footer-brand p{
  margin-top:14px;
  color:rgba(247,245,241,0.6);
  font-size:14px; max-width:34ch;
  line-height:1.6;
}
.footer-bot{
  border-top:1px solid var(--rule-dark);
  padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(247,245,241,0.5);
}

/* ---------- REVEAL ----------
   Content is always readable. Only translate is animated — if the
   transition is paused (background tab, hidden iframe) the page
   still renders correctly because opacity never drops below 1. */
.reveal{transform:translateY(10px); transition:transform .6s ease}
.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  :root{--pad-x:24px}
  section{padding:72px 0}
  .hero-grid{grid-template-columns:1fr; gap:48px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:none; border-top:1px solid var(--rule)}
  .stat:nth-child(1),.stat:nth-child(2){border-top:none}
  .stat:nth-child(odd){border-right:1px solid var(--rule)}
  .cases-grid{grid-template-columns:1fr}
  .cta-band .container{grid-template-columns:1fr; padding:64px 24px}
  .cta-band .actions{justify-content:flex-start}
  .two-col,.two-col-meta,.contact-grid{grid-template-columns:1fr; gap:36px}
  .posts{grid-template-columns:1fr; gap:0}
  .entry{grid-template-columns:1fr; gap:14px}
  .entry .aside{text-align:left}
  .patent{grid-template-columns:1fr; gap:10px}
  .patent .status{text-align:left}
  .footer-top{grid-template-columns:1fr 1fr; gap:32px}
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column;
    background:var(--paper);
    padding:24px var(--pad-x);
    border-bottom:1px solid var(--rule);
    gap:14px;
  }
  .nav-links.open{display:flex}
  .nav-links.open a{padding:13px 0; font-size:15px}
  .nav-burger{display:inline-flex; align-items:center; justify-content:center}
  .nav-cta{display:none}
}
@media (max-width:560px){
  .stats-grid{grid-template-columns:1fr}
  .stat{border-right:none !important; border-top:1px solid var(--rule)}
  .stat:first-child{border-top:none}
  .footer-top{grid-template-columns:1fr}
  .footer-bot{flex-direction:column; gap:12px; align-items:flex-start}
}

/* ============================================================
   JADE THEME — site-wide (current brand direction)
   Jade nav + footer · warm-coffee ink · terracotta accent.
   Mirrors Visiting-Cards-Jade / about-jade. Appended last so it
   wins the cascade without touching the base rules above.
   ============================================================ */
:root{
  --ink:#3F3024;                 /* warm coffee ink — headings + body */
  --ink-2:#6A6258;
  --ink-3:#948D82;
  --jade-1:#1E7A5E; --jade-2:#125C45; --jade-deep:#0F4634;
  --accent:#C26847;
  --accent-soft:#E8A98C;
}

/* ---- NAV → jade ---- */
.nav{
  background:linear-gradient(135deg,var(--jade-1),var(--jade-2));
  border-bottom:1px solid rgba(247,245,241,0.14);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.nav .mark text{fill:#F7F5F1}
.nav .mark rect{fill:#F7F5F1}
.nav .mark rect:last-of-type{fill:#C26847}
.nav-logo .word{color:var(--paper); font-weight:600}
.nav-logo .word small{color:rgba(247,245,241,0.62)}
.nav-links a{color:rgba(247,245,241,0.82); font-weight:600}
.nav-links a:hover,.nav-links a.active{color:var(--paper)}
.nav-links a.active::after{background:var(--accent-soft)}
.nav-cta{background:var(--accent); color:#fff; font-weight:600}
.nav-cta:hover{background:var(--paper); color:var(--jade-2)}
.nav-burger{color:var(--paper)}

/* ---- FOOTER → jade ---- */
.footer{background:linear-gradient(135deg,var(--jade-1),var(--jade-2)); margin-top:0}
.footer-brand svg text{fill:#F7F5F1}
.footer-brand svg rect{fill:#F7F5F1}
.footer-brand svg rect:last-of-type{fill:#C26847}
.footer-bot{border-top:1px solid rgba(247,245,241,0.16)}

/* ---- CTA BAND → light, clear of the jade footer ---- */
.cta-band{background:var(--paper-2); color:var(--ink); border-top:1px solid var(--rule)}
.cta-band h2{color:var(--ink)}
.cta-band .kicker{color:var(--accent)}
.cta-band em{color:var(--accent) !important}
.cta-band .btn-on-ink{background:var(--jade-2); color:#fff}
.cta-band .btn-on-ink:hover{background:var(--accent); color:#fff}

/* ---- accents that referenced cool ink ---- */
.nav-cta,.btn-primary{background:var(--ink)}
.btn-primary:hover{background:var(--accent)}
.case:hover{border-color:var(--jade-2)}
.case .metric em{color:var(--accent)}

/* ---- preserve the blog cover motifs as designed (deep, not brown) ---- */
.cover{background:#13201B}

/* ---- jade utility band (case-study outcomes, section accents) ---- */
.band-jade{background:linear-gradient(135deg,var(--jade-1),var(--jade-2)); color:var(--paper)}
.band-jade .kicker{color:rgba(247,245,241,0.7)}
.band-jade h2,.band-jade h3{color:var(--paper)}
.band-jade .prose p,.band-jade .prose li{color:rgba(247,245,241,0.88)}
.band-jade .prose ul li{border-bottom-color:rgba(247,245,241,0.16)}
.band-jade .prose ul li::before{background:var(--accent-soft)}
.band-jade .prose strong{color:var(--paper)}

/* ---- real portrait in hero / about ---- */
.hero-portrait{background:var(--jade-deep)}
.hero-portrait img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 18%;
}
.hero-portrait .corner{z-index:2; color:var(--paper)}
.portrait-frame{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border-radius:var(--radius); background:var(--jade-deep);
}
.portrait-frame img{width:100%; height:100%; object-fit:cover; object-position:center 16%; display:block}
.portrait-frame::after{content:""; position:absolute; inset:14px; border:1px solid rgba(247,245,241,0.25); pointer-events:none}

/* ---- credibility strip (industries / global reach) ---- */
.cred{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--paper)}
.cred .container{padding-top:30px; padding-bottom:30px; display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:space-between}
.cred .label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-2)}
.cred .row{display:flex; flex-wrap:wrap; gap:10px}
.cred .pill{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.04em;
  color:var(--ink); padding:7px 13px; border:1px solid var(--rule);
  border-radius:999px; background:var(--paper);
}
.cred .pill em{color:var(--accent); font-style:normal}

/* ---- "two ways to engage" duo cards (home) ---- */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px}
.engage-card{
  border:1px solid var(--rule); background:var(--paper); border-radius:var(--radius);
  padding:32px; display:flex; flex-direction:column; gap:16px;
  transition:border-color .2s ease, transform .2s ease;
}
.engage-card:hover{border-color:var(--jade-2); transform:translateY(-2px)}
.engage-card .tagrow{display:flex; align-items:center; gap:10px}
.engage-card .badge{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; color:#fff; background:var(--jade-2);
}
.engage-card .badge.alt{background:var(--accent)}
.engage-card h3{font-size:26px}
.engage-card p{color:var(--ink-2); font-size:15px; line-height:1.6}
.engage-card .tags{margin-top:2px; display:flex; flex-wrap:wrap; gap:6px}
.engage-card .terms{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--rule);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-2);
}

/* ---- process steps (home, differentiates from About) ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px}
.step{border-top:2px solid var(--jade-2); padding-top:20px}
.step .n{font-family:var(--f-mono); font-size:11px; letter-spacing:0.1em; color:var(--accent); margin-bottom:10px}
.step h3{font-size:21px; margin-bottom:8px}
.step p{font-size:14.5px; color:var(--ink-2); line-height:1.6}

/* ---- contact method cards ---- */
.methods{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px}
.method{
  border:1px solid var(--rule); border-radius:var(--radius); padding:26px; background:var(--paper);
  display:flex; flex-direction:column; gap:10px; transition:border-color .2s ease, transform .2s ease;
}
.method:hover{border-color:var(--jade-2); transform:translateY(-2px)}
.method .k{font-family:var(--f-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent)}
.method h3{font-size:21px}
.method p{font-size:14px; color:var(--ink-2); line-height:1.55; flex:1}
.method a.go{font-size:13px; font-weight:500; color:var(--signal); display:inline-flex; align-items:center; gap:6px}
.method a.go::after{content:"→"; transition:transform .15s ease}
.method:hover a.go::after{transform:translateX(3px)}

/* ---- patent cards (patents page) ---- */
.pat-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:8px}
.pat-card{
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; background:var(--paper);
  display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease;
}
.pat-card:hover{border-color:var(--jade-2); transform:translateY(-3px)}
.pat-card .motif{position:relative; aspect-ratio:16/7; background:#13201B; overflow:hidden}
.pat-card .motif svg{width:100%; height:100%; display:block}
.pat-card .motif::after{content:""; position:absolute; inset:12px; border:1px solid rgba(247,245,241,0.16); pointer-events:none}
.pat-card .motif .num{
  position:absolute; left:18px; bottom:14px; z-index:2;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; color:rgba(247,245,241,0.78);
}
.pat-card .pc-body{padding:26px; display:flex; flex-direction:column; gap:12px; flex:1}
.pat-card .pc-meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-2)}
.pat-card .pc-status{padding:4px 10px; border:1px solid var(--rule); border-radius:999px}
.pat-card .pc-status.granted{color:var(--jade-2); border-color:var(--jade-2)}
.pat-card .pc-status.filed{color:var(--accent); border-color:var(--accent)}
.pat-card h3{font-size:21px; line-height:1.18}
.pat-card p{font-size:14.5px; color:var(--ink-2); line-height:1.6}
.pat-card .tags{margin-top:auto; padding-top:6px; display:flex; flex-wrap:wrap; gap:6px}

/* ---- about: credentials (education + certs) ---- */
.cred-cols{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:8px}
.cred-list .ci{padding:16px 0; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:20px; align-items:baseline}
.cred-list .ci:first-child{border-top:none}
.cred-list .ci .nm{font-size:15px; color:var(--ink)}
.cred-list .ci .yr{font-family:var(--f-mono); font-size:11px; letter-spacing:0.06em; color:var(--ink-2); white-space:nowrap}
.cert-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.cert-row .cert{font-family:var(--f-mono); font-size:11px; letter-spacing:0.03em; color:var(--ink);
  padding:7px 12px; border:1px solid var(--rule); border-radius:4px; background:var(--paper)}

@media (max-width:980px){
  .duo{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .methods{grid-template-columns:1fr}
  .pat-grid{grid-template-columns:1fr}
  .cred-cols{grid-template-columns:1fr; gap:32px}
  .cred .container{flex-direction:column; align-items:flex-start; gap:16px}
}