/* ============================================================
   FUNDORA SOLUTIONS — WORK SECTION STYLES
   Role: Page-specific styles for work/ hub and all case pages
   ============================================================ */

/* ══ WORK HUB (work/index.html) ══ */

    /* ─── NAV BRAND ─── */
    .nav__logo-text { display:flex; flex-direction:column; line-height:1.1; }
    .nav__logo-name { font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--c-text); letter-spacing:-0.01em; }
    .nav__logo-sub  { font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-text-4); }

    /* ─── HERO ─── */
    .work-hero {
      padding: calc(var(--nav-h) + var(--s-20)) var(--px) var(--s-16);
      background: var(--c-bg);
      border-bottom: 1px solid var(--c-border);
    }
    .work-hero__inner { max-width: var(--max-w); margin: 0 auto; }

    .work-hero__eyebrow {
      display: flex; align-items: center; gap: var(--s-3);
      margin-bottom: var(--s-8);
    }
    .live-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--c-green);
      animation: pulse-dot 2.4s ease-in-out infinite;
    }
    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.25} }
    .work-hero__eyebrow-text {
      font-family: var(--font-mono); font-size: var(--t-xs);
      color: var(--c-green); letter-spacing: .06em; text-transform: uppercase;
    }
    .work-hero__eyebrow-sep { width:1px; height:12px; background:var(--c-border-md); }
    .work-hero__eyebrow-ref {
      font-family: var(--font-mono); font-size: var(--t-xs);
      color: var(--c-text-4); letter-spacing: .05em;
    }

    .work-hero h1 {
      font-family: var(--font-head); font-size: var(--t-3xl); font-weight: 800;
      letter-spacing: -.03em; line-height: 1.05; max-width: 680px;
      margin-bottom: var(--s-5);
    }
    .work-hero__sub {
      font-size: var(--t-lg); color: var(--c-text-2); line-height: 1.6;
      max-width: 540px; margin-bottom: var(--s-10);
    }

    .work-hero__tally {
      display: flex; gap: var(--s-10); flex-wrap: wrap;
    }
    .tally-item { display:flex; flex-direction:column; gap:4px; }
    .tally-item__num {
      font-family: var(--font-head); font-size: var(--t-xl); font-weight: 800;
      letter-spacing: -.02em; color: var(--c-green);
    }
    .tally-item__label {
      font-family: var(--font-mono); font-size: var(--t-xs);
      color: var(--c-text-3); letter-spacing: .06em; text-transform: uppercase;
    }

    /* ─── SECTION DIVIDERS ─── */
    .work-section { padding: var(--s-20) var(--px); }
    .work-section--alt { background: var(--c-bg-1); }
    .work-section__inner { max-width: var(--max-w); margin: 0 auto; }

    .section-header {
      display: flex; align-items: flex-end; justify-content: space-between;
      padding-bottom: var(--s-6); border-bottom: 1px solid var(--c-border);
      margin-bottom: var(--s-10); gap: var(--s-8); flex-wrap: wrap;
    }
    .section-header__label {
      font-family: var(--font-mono); font-size: var(--t-xs);
      letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-4);
      margin-bottom: var(--s-2);
    }
    .section-header h2 {
      font-family: var(--font-head); font-size: var(--t-xl); font-weight: 800;
      letter-spacing: -.02em; color: var(--c-text);
    }
    .section-header__note {
      font-size: var(--t-sm); color: var(--c-text-3); line-height: 1.55;
      max-width: 38ch; text-align: right;
    }

    /* ─── CLIENT CARD ─── */
    .client-card {
      display: grid;
      grid-template-columns: 200px 1fr 160px;
      gap: var(--s-8);
      align-items: start;
      padding: var(--s-8) var(--s-6);
      background: var(--c-bg-2);
      border: 1px solid var(--c-border);
      border-radius: var(--r-lg);
      text-decoration: none;
      transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
      position: relative;
      overflow: hidden;
    }
    .client-card + .client-card { margin-top: var(--s-4); }
    .client-card:hover {
      border-color: var(--c-border-md);
      background: var(--c-bg-3);
    }
    .client-card::before {
      content: '';
      position: absolute; left:0; top:0; bottom:0; width:2px;
      background: transparent;
      transition: background var(--dur-base) var(--ease);
    }
    .client-card--live::before   { background: var(--c-green); }
    .client-card--build::before  { background: var(--c-blue); }
    .client-card--demo::before   { background: var(--c-text-3); }

    /* ID column */
    .cc-id { display:flex; flex-direction:column; gap:var(--s-2); padding-top:2px; }
    .cc-id__ref { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.05em; }
    .cc-id__name { font-family:var(--font-head); font-size:var(--t-md); font-weight:700; color:var(--c-text); letter-spacing:-.01em; }
    .cc-id__vertical { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-3); letter-spacing:.04em; }

    .cc-status-pill {
      display: inline-flex; align-items: center; gap:5px;
      padding: 3px 10px; border-radius:var(--r-full);
      font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.04em;
      margin-top: var(--s-3);
    }
    .cc-status-pill--live   { background:var(--c-green-dim); color:var(--c-green); border:1px solid rgba(76,185,68,.2); }
    .cc-status-pill--build  { background:var(--c-blue-dim); color:var(--c-blue); border:1px solid rgba(59,130,246,.2); }
    .cc-status-pill--demo   { background:rgba(255,255,255,.03); color:var(--c-text-3); border:1px solid var(--c-border-md); }
    .cc-status-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
    .cc-status-pill--live .cc-status-dot { background:var(--c-green); animation:pulse-dot 2.4s ease-in-out infinite; }
    .cc-status-pill--build .cc-status-dot { background:var(--c-blue); }
    .cc-status-pill--demo .cc-status-dot { background:var(--c-text-3); }

    /* Body column */
    .cc-body { display:flex; flex-direction:column; gap:var(--s-4); }
    .cc-body__summary { font-size:var(--t-sm); color:var(--c-text-2); line-height:1.65; }
    .cc-body__stack {
      display:flex; flex-wrap:wrap; gap:var(--s-2);
    }
    .stack-chip {
      font-family:var(--font-mono); font-size:var(--t-xs);
      color:var(--c-text-3); background:rgba(255,255,255,.04);
      border:1px solid var(--c-border-md); border-radius:var(--r-sm);
      padding:2px 8px; letter-spacing:.03em;
    }

    /* CTA column */
    .cc-cta {
      display:flex; flex-direction:column; align-items:flex-end; gap:var(--s-3);
      padding-top:4px;
    }
    .cc-cta__arrow {
      width:40px; height:40px; border-radius:50%;
      border:1px solid var(--c-border-md);
      display:flex; align-items:center; justify-content:center;
      font-size:1rem; color:var(--c-text-3);
      transition: all var(--dur-base) var(--ease);
    }
    .client-card--live:hover .cc-cta__arrow   { border-color:var(--c-green); color:var(--c-green); background:var(--c-green-dim); transform:translateX(3px); }
    .client-card--build:hover .cc-cta__arrow  { border-color:var(--c-blue); color:var(--c-blue); background:var(--c-blue-dim); transform:translateX(3px); }
    .client-card--demo:hover .cc-cta__arrow   { border-color:var(--c-border-md); color:var(--c-text-2); transform:translateX(3px); }
    .cc-cta__label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.05em; text-transform:uppercase; }

    /* ─── METHODOLOGY CLOSER ─── */
    .work-closer {
      padding: var(--s-20) var(--px);
      background: var(--c-bg);
      border-top: 1px solid var(--c-border);
      text-align: center;
    }
    .work-closer__inner { max-width: 640px; margin: 0 auto; }
    .work-closer h2 {
      font-family:var(--font-head); font-size:var(--t-2xl); font-weight:800;
      letter-spacing:-.03em; line-height:1.1; margin-bottom:var(--s-5);
    }
    .work-closer p {
      font-size:var(--t-md); color:var(--c-text-2); line-height:1.65;
      margin-bottom:var(--s-10);
    }
    .work-closer__actions {
      display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap;
    }

    /* ─── FOOTER BRAND ─── */
    .footer__brand-mark { display:flex; align-items:center; gap:var(--s-4); text-decoration:none; }
    .footer__wordmark { display:flex; flex-direction:column; gap:2px; }
    .footer__wordmark-name { font-family:var(--font-head); font-weight:800; font-size:var(--t-sm); color:var(--c-text); letter-spacing:-.01em; }
    .footer__wordmark-dba { font-family:var(--font-mono); font-size:.6rem; color:var(--c-text-3); letter-spacing:.06em; text-transform:uppercase; }
    .footer__identity { width:100%; border-top:1px solid var(--c-border); padding:var(--s-10) var(--px); display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap; }
    .footer__identity-tagline { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.05em; }
    .footer__identity-corp { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.04em; }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 960px) {
      .client-card { grid-template-columns: 1fr; gap:var(--s-5); }
      .cc-cta { flex-direction:row; align-items:center; }
      .section-header__note { text-align:left; max-width:100%; }
    }
    @media (max-width: 640px) {
      .work-hero__tally { gap:var(--s-6); }
      .section-header { flex-direction:column; align-items:flex-start; gap:var(--s-2); }
    }
  

/* ══ CASE STUDY SHARED STYLES ══ */

    .nav__logo-text { display:flex; flex-direction:column; line-height:1.1; }
    .nav__logo-name { font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--c-text); letter-spacing:-0.01em; }
    .nav__logo-sub  { font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-text-4); }

    /* ── HERO ── */
    .cs-hero {
      padding: calc(var(--nav-h) + var(--s-20)) var(--px) var(--s-16);
      background: var(--c-bg);
      border-bottom: 1px solid var(--c-border);
    }
    .cs-hero__inner { max-width: var(--max-w); margin: 0 auto; }
    .cs-hero__back {
      display: inline-flex; align-items: center; gap: var(--s-2);
      font-family: var(--font-mono); font-size: var(--t-xs);
      color: var(--c-text-3); letter-spacing: .05em;
      text-decoration: none; margin-bottom: var(--s-8);
      transition: color var(--dur-fast) var(--ease);
    }
    .cs-hero__back:hover { color: var(--c-text); }
    .cs-hero__meta { display:flex; align-items:center; gap:var(--s-4); margin-bottom:var(--s-5); flex-wrap:wrap; }
    .cs-hero__ref { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.05em; }
    .status-pill {
      display:inline-flex; align-items:center; gap:5px;
      padding:3px 10px; border-radius:var(--r-full);
      font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.04em;
    }
    .status-pill--live   { background:rgba(76,185,68,.08); color:var(--c-green); border:1px solid rgba(76,185,68,.2); }
    .status-pill--build  { background:rgba(59,130,246,.08); color:var(--c-blue);  border:1px solid rgba(59,130,246,.2); }
    .status-pill--demo   { background:rgba(255,255,255,.03); color:var(--c-text-3); border:1px solid var(--c-border-md); }
    .status-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
    .status-pill--live .status-dot { background:var(--c-green); animation:pulse 2.4s ease-in-out infinite; }
    .status-pill--build .status-dot { background:var(--c-blue); }
    .status-pill--demo .status-dot  { background:var(--c-text-3); }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

    .cs-hero h1 { font-family:var(--font-head); font-size:var(--t-3xl); font-weight:800; letter-spacing:-.03em; line-height:1.05; margin-bottom:var(--s-3); }
    .cs-hero__niche { font-family:var(--font-mono); font-size:var(--t-sm); color:var(--c-text-3); letter-spacing:.04em; }

    /* ── SECTION SHARED ── */
    .cs-section { padding: var(--s-16) var(--px); }
    .cs-section--alt { background: var(--c-bg-1); }
    .cs-section__inner { max-width: var(--max-w); margin: 0 auto; }

    .cs-section__label {
      font-family:var(--font-mono); font-size:var(--t-xs);
      color:var(--c-text-4); letter-spacing:.08em; text-transform:uppercase;
      margin-bottom:var(--s-4);
    }
    .cs-section h2 {
      font-family:var(--font-head); font-size:var(--t-xl); font-weight:800;
      letter-spacing:-.02em; color:var(--c-text); margin-bottom:var(--s-8);
    }

    /* ── WHAT FUNDORA DID ── */
    .work-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-10); }
    .work-item {
      padding: var(--s-6);
      background: var(--c-bg-2);
      border: 1px solid var(--c-border);
      border-radius: var(--r-md);
      display: flex; flex-direction: column; gap: var(--s-3);
    }
    .work-item__label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-green); letter-spacing:.06em; text-transform:uppercase; }
    .work-item__title { font-family:var(--font-head); font-size:var(--t-base); font-weight:700; color:var(--c-text); }
    .work-item__desc  { font-size:var(--t-sm); color:var(--c-text-2); line-height:1.65; }
    .work-item__stack { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:auto; padding-top:var(--s-3); }
    .chip { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-3); background:rgba(255,255,255,.04); border:1px solid var(--c-border-md); border-radius:var(--r-sm); padding:2px 8px; }

    /* ── LIVE PREVIEW ── */
    .preview-block {
      display:grid; grid-template-columns:1fr 360px; gap:var(--s-10); align-items:start;
    }
    .preview-frame {
      border: 1px solid var(--c-border);
      border-radius: var(--r-lg);
      overflow: hidden;
      background: var(--c-bg-2);
      aspect-ratio: 16/10;
      position: relative;
    }
    /* Slot for real screenshot — drop image as background-image here */
    .preview-frame__slot {
      width:100%; height:100%;
      display:flex; align-items:center; justify-content:center;
      flex-direction:column; gap:var(--s-3);
    }
    .preview-frame__slot-label {
      font-family:var(--font-mono); font-size:var(--t-xs);
      color:var(--c-text-4); letter-spacing:.06em; text-transform:uppercase;
    }
    /* Real screenshot applied via inline style */
    .preview-frame__img {
      width:100%; height:100%; object-fit:cover; object-position:top;
      display:block;
    }
    .preview-meta { display:flex; flex-direction:column; gap:var(--s-6); }
    .preview-meta__url {
      display:flex; flex-direction:column; gap:var(--s-2);
    }
    .preview-meta__url-label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.06em; text-transform:uppercase; }
    .preview-meta__url a {
      font-family:var(--font-mono); font-size:var(--t-sm); color:var(--c-green);
      text-decoration:none; word-break:break-all;
      transition: opacity var(--dur-fast) var(--ease);
    }
    .preview-meta__url a:hover { opacity:.7; }

    .preview-meta__note { font-size:var(--t-sm); color:var(--c-text-2); line-height:1.65; }

    /* ── ENGAGEMENT CONTEXT ── */
    .context-block {
      padding: var(--s-8);
      border: 1px solid var(--c-border);
      border-radius: var(--r-lg);
      background: var(--c-bg-2);
      max-width: 640px;
    }
    .context-block__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-5); }
    .context-block__title { font-family:var(--font-head); font-size:var(--t-md); font-weight:700; color:var(--c-text); }
    .context-block p { font-size:var(--t-sm); color:var(--c-text-2); line-height:1.7; }
    .context-block p + p { margin-top:var(--s-4); }

    /* ── FOOTER STRIP ── */
    .cs-footer-strip {
      padding: var(--s-10) var(--px);
      border-top: 1px solid var(--c-border);
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--s-6); flex-wrap: wrap;
    }
    .cs-footer-strip__nav { display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap; }
    .cs-footer-strip__nav a { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-3); text-decoration:none; letter-spacing:.04em; transition:color var(--dur-fast); }
    .cs-footer-strip__nav a:hover { color:var(--c-text); }
    .cs-footer-strip__sep { color:var(--c-border-md); }
    .cs-footer-strip__corp { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.04em; }

    @media (max-width: 960px) {
      .work-grid { grid-template-columns:1fr; }
      .preview-block { grid-template-columns:1fr; }
      .preview-frame { aspect-ratio:16/9; }
    }
  

/* ══ SEBASBLDR OVERRIDES ══ */

    .nav__logo-text { display:flex; flex-direction:column; line-height:1.1; }
    .nav__logo-name { font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--c-text); letter-spacing:-0.01em; }
    .nav__logo-sub  { font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-text-4); }

    .cs-hero { padding:calc(var(--nav-h) + var(--s-20)) var(--px) var(--s-16); background:var(--c-bg); border-bottom:1px solid var(--c-border); }
    .cs-hero__inner { max-width:var(--max-w); margin:0 auto; }
    .cs-hero__back { display:inline-flex; align-items:center; gap:var(--s-2); font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-3); letter-spacing:.05em; text-decoration:none; margin-bottom:var(--s-8); transition:color var(--dur-fast) var(--ease); }
    .cs-hero__back:hover { color:var(--c-text); }
    .cs-hero__meta { display:flex; align-items:center; gap:var(--s-4); margin-bottom:var(--s-5); flex-wrap:wrap; }
    .cs-hero__ref { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.05em; }

    .status-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-full); font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.04em; }
    .status-pill--build { background:rgba(59,130,246,.08); color:var(--c-blue); border:1px solid rgba(59,130,246,.2); }
    .status-dot-build { width:5px; height:5px; border-radius:50%; background:var(--c-blue); flex-shrink:0; }

    .cs-hero h1 { font-family:var(--font-head); font-size:var(--t-3xl); font-weight:800; letter-spacing:-.03em; line-height:1.05; margin-bottom:var(--s-3); }
    .cs-hero__niche { font-family:var(--font-mono); font-size:var(--t-sm); color:var(--c-text-3); letter-spacing:.04em; }

    .cs-section { padding:var(--s-16) var(--px); }
    .cs-section--alt { background:var(--c-bg-1); }
    .cs-section__inner { max-width:var(--max-w); margin:0 auto; }
    .cs-section__label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--s-4); }
    .cs-section h2 { font-family:var(--font-head); font-size:var(--t-xl); font-weight:800; letter-spacing:-.02em; color:var(--c-text); margin-bottom:var(--s-8); }

    .work-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-10); }
    .work-item { padding:var(--s-6); background:var(--c-bg-2); border:1px solid var(--c-border); border-radius:var(--r-md); display:flex; flex-direction:column; gap:var(--s-3); }
    .work-item__label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-blue); letter-spacing:.06em; text-transform:uppercase; }
    .work-item__title { font-family:var(--font-head); font-size:var(--t-base); font-weight:700; color:var(--c-text); }
    .work-item__desc  { font-size:var(--t-sm); color:var(--c-text-2); line-height:1.65; }
    .work-item__stack { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:auto; padding-top:var(--s-3); }
    .chip { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-3); background:rgba(255,255,255,.04); border:1px solid var(--c-border-md); border-radius:var(--r-sm); padding:2px 8px; }

    .preview-block { display:grid; grid-template-columns:1fr 360px; gap:var(--s-10); align-items:start; }
    .preview-frame { border:1px solid var(--c-border); border-radius:var(--r-lg); overflow:hidden; background:var(--c-bg-2); aspect-ratio:16/10; position:relative; }
    .preview-frame__slot { width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--s-3); }
    .preview-frame__slot-label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.06em; text-transform:uppercase; }
    .preview-frame__img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
    .preview-meta { display:flex; flex-direction:column; gap:var(--s-6); }
    .preview-meta__url-label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--s-2); display:block; }
    .preview-meta__url a { font-family:var(--font-mono); font-size:var(--t-sm); color:var(--c-blue); text-decoration:none; word-break:break-all; transition:opacity var(--dur-fast); }
    .preview-meta__url a:hover { opacity:.7; }
    .preview-meta__note { font-size:var(--t-sm); color:var(--c-text-2); line-height:1.65; }

    /* Proof image strip */
    .proof-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); margin-top:var(--s-8); }
    .proof-img { border-radius:var(--r-md); border:1px solid var(--c-border); overflow:hidden; aspect-ratio:4/3; background:var(--c-bg-2); }
    .proof-img img { width:100%; height:100%; object-fit:cover; display:block; }
    .proof-img__slot { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; color:var(--c-text-4); text-align:center; padding:var(--s-4); }

    .context-block { padding:var(--s-8); border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-bg-2); max-width:640px; }
    .context-block__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-5); flex-wrap:wrap; gap:var(--s-3); }
    .context-block__title { font-family:var(--font-head); font-size:var(--t-md); font-weight:700; color:var(--c-text); }
    .context-block p { font-size:var(--t-sm); color:var(--c-text-2); line-height:1.7; }
    .context-block p + p { margin-top:var(--s-4); }

    .cs-footer-strip { padding:var(--s-10) var(--px); border-top:1px solid var(--c-border); display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap; }
    .cs-footer-strip__nav { display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap; }
    .cs-footer-strip__nav a { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-3); text-decoration:none; letter-spacing:.04em; transition:color var(--dur-fast); }
    .cs-footer-strip__nav a:hover { color:var(--c-text); }
    .cs-footer-strip__sep { color:var(--c-border-md); }
    .cs-footer-strip__corp { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.04em; }

    @media (max-width:960px) {
      .work-grid { grid-template-columns:1fr; }
      .preview-block { grid-template-columns:1fr; }
      .proof-strip { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:640px) {
      .proof-strip { grid-template-columns:1fr; }
    }
  

/* ══ CHRISCUTZ OVERRIDES ══ */

    .nav__logo-text { display:flex; flex-direction:column; line-height:1.1; }
    .nav__logo-name { font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--c-text); letter-spacing:-0.01em; }
    .nav__logo-sub  { font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--c-text-4); }

    .cs-hero { padding:calc(var(--nav-h) + var(--s-20)) var(--px) var(--s-16); background:var(--c-bg); border-bottom:1px solid var(--c-border); }
    .cs-hero__inner { max-width:var(--max-w); margin:0 auto; }
    .cs-hero__back { display:inline-flex; align-items:center; gap:var(--s-2); font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-3); letter-spacing:.05em; text-decoration:none; margin-bottom:var(--s-8); transition:color var(--dur-fast) var(--ease); }
    .cs-hero__back:hover { color:var(--c-text); }
    .cs-hero__meta { display:flex; align-items:center; gap:var(--s-4); margin-bottom:var(--s-5); flex-wrap:wrap; }
    .cs-hero__ref { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.05em; }

    .status-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-full); font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.04em; }
    .status-pill--demo { background:rgba(255,255,255,.03); color:var(--c-text-3); border:1px solid var(--c-border-md); }
    .status-dot-demo { width:5px; height:5px; border-radius:50%; background:var(--c-text-3); flex-shrink:0; }

    .cs-hero h1 { font-family:var(--font-head); font-size:var(--t-3xl); font-weight:800; letter-spacing:-.03em; line-height:1.05; margin-bottom:var(--s-3); }
    .cs-hero__niche { font-family:var(--font-mono); font-size:var(--t-sm); color:var(--c-text-3); letter-spacing:.04em; }

    .cs-section { padding:var(--s-16) var(--px); }
    .cs-section--alt { background:var(--c-bg-1); }
    .cs-section__inner { max-width:var(--max-w); margin:0 auto; }
    .cs-section__label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--s-4); }
    .cs-section h2 { font-family:var(--font-head); font-size:var(--t-xl); font-weight:800; letter-spacing:-.02em; color:var(--c-text); margin-bottom:var(--s-8); }

    .work-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-10); }
    .work-item { padding:var(--s-6); background:var(--c-bg-2); border:1px solid var(--c-border); border-radius:var(--r-md); display:flex; flex-direction:column; gap:var(--s-3); }
    .work-item__label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-3); letter-spacing:.06em; text-transform:uppercase; }
    .work-item__label--active { color:var(--c-green); }
    .work-item__title { font-family:var(--font-head); font-size:var(--t-base); font-weight:700; color:var(--c-text); }
    .work-item__desc  { font-size:var(--t-sm); color:var(--c-text-2); line-height:1.65; }
    .work-item__stack { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:auto; padding-top:var(--s-3); }
    .chip { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-3); background:rgba(255,255,255,.04); border:1px solid var(--c-border-md); border-radius:var(--r-sm); padding:2px 8px; }
    .chip--active { color:var(--c-green); border-color:rgba(76,185,68,.25); background:rgba(76,185,68,.06); }

    /* Integration callout — the active webhook */
    .integration-callout {
      margin-top: var(--s-8);
      padding: var(--s-6) var(--s-8);
      background: rgba(76,185,68,.04);
      border: 1px solid rgba(76,185,68,.15);
      border-radius: var(--r-lg);
      display: flex; align-items: flex-start; gap: var(--s-5);
    }
    .integration-callout__dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--c-green); flex-shrink: 0; margin-top: 5px;
      animation: pulse 2.4s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
    .integration-callout__label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-green); letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--s-2); }
    .integration-callout__text { font-size:var(--t-sm); color:var(--c-text-2); line-height:1.65; }

    /* Preview — demo (no live URL) */
    .preview-block { display:grid; grid-template-columns:1fr 340px; gap:var(--s-10); align-items:start; }
    .preview-frame { border:1px solid var(--c-border); border-radius:var(--r-lg); overflow:hidden; background:var(--c-bg-2); aspect-ratio:16/10; }
    .preview-frame__slot { width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--s-3); }
    .preview-frame__slot-label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:0 var(--s-6); }
    .preview-frame__img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
    .preview-meta { display:flex; flex-direction:column; gap:var(--s-5); }
    .preview-meta__notice {
      padding: var(--s-4) var(--s-5);
      background: rgba(255,255,255,.03);
      border: 1px solid var(--c-border-md);
      border-radius: var(--r-md);
      font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-3); letter-spacing:.04em; line-height:1.6;
    }
    .preview-meta__note { font-size:var(--t-sm); color:var(--c-text-2); line-height:1.65; }

    /* Data sourced from */
    .data-source-row { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }
    .source-tag {
      display:inline-flex; align-items:center; gap:5px;
      font-family:var(--font-mono); font-size:var(--t-xs);
      color:var(--c-text-3); background:rgba(255,255,255,.03);
      border:1px solid var(--c-border-md); border-radius:var(--r-sm);
      padding:3px 10px; letter-spacing:.03em;
    }
    .source-tag::before { content:'↗'; font-size:.65rem; opacity:.5; }

    .context-block { padding:var(--s-8); border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-bg-2); max-width:640px; }
    .context-block__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-5); flex-wrap:wrap; gap:var(--s-3); }
    .context-block__title { font-family:var(--font-head); font-size:var(--t-md); font-weight:700; color:var(--c-text); }
    .context-block p { font-size:var(--t-sm); color:var(--c-text-2); line-height:1.7; }
    .context-block p + p { margin-top:var(--s-4); }

    .cs-footer-strip { padding:var(--s-10) var(--px); border-top:1px solid var(--c-border); display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap; }
    .cs-footer-strip__nav { display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap; }
    .cs-footer-strip__nav a { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-3); text-decoration:none; letter-spacing:.04em; transition:color var(--dur-fast); }
    .cs-footer-strip__nav a:hover { color:var(--c-text); }
    .cs-footer-strip__sep { color:var(--c-border-md); }
    .cs-footer-strip__corp { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-text-4); letter-spacing:.04em; }

    @media (max-width:960px) {
      .work-grid { grid-template-columns:1fr; }
      .preview-block { grid-template-columns:1fr; }
    }