/* ============================================================
     1. DESIGN TOKENS
     CHANGED: navy palette retired entirely (PRD: no dark blue band).
     60% white / 30% platinum structure / 10% cyan accent.

     ACCESSIBILITY NOTE: #00E5FF on white is 1.54:1 and fails WCAG
     as a text colour. It is therefore used ONLY as a fill or rule.
     Text sitting on cyan is --ink (12.2:1). Text on white is
     --ink (19:1) or --slate (8.9:1). Both pass AA and AAA.
     ============================================================ */
  :root{
    --white:#FFFFFF;          /* 60% — dominant background */
    --platinum:#E2E8F0;       /* 30% — borders, panel fills, structure */
    --wash:#F4F7FA;           /* derived tint — section separation without a band */
    --edge:#CBD5E1;           /* stronger rule for emphasis */
    --cyan:#00E5FF;           /* 10% — CTA + accent FILL only, never text on white */
    --cyan-deep:#00B8CC;      /* hover state, still reads as the accent */
    --ink:#0B1220;            /* headings + text on cyan */
    --slate:#475569;          /* body copy, 8.9:1 on white */
    --slate-soft:#64748B;     /* captions only, 5.7:1 on white */

    --serif:'IBM Plex Serif',Georgia,'Times New Roman',serif;
    --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

    --maxw:1080px;
    --pad:30px;
    --r:12px;                 /* single radius token — no ad-hoc values */
  }

  /* ============================================================
     2. RESET + BASE
     ============================================================ */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:80px}
  body{
    font-family:var(--sans);color:var(--slate);background:var(--white);
    line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  a{color:inherit;text-decoration:none}
  ul{list-style:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

  /* Screen-reader-only utility — used to announce new-tab links */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }

  /* ADDED: skip link — WCAG 2.4.1 bypass blocks */
  .skip{
    position:absolute;left:var(--pad);top:-100px;z-index:100;
    background:var(--cyan);color:var(--ink);font-weight:600;font-size:.9rem;
    padding:12px 20px;border-radius:0 0 var(--r) var(--r);transition:top .18s;
  }
  .skip:focus{top:0}

  /* CHANGED: two-tone focus ring. A cyan-only ring is invisible on white,
     so the visible ring is ink with a cyan halo — passes WCAG 2.4.11. */
  :focus-visible{
    outline:2px solid var(--ink);outline-offset:2px;
    box-shadow:0 0 0 5px rgba(0,229,255,.45);border-radius:4px;
  }

  /* ============================================================
     3. TYPOGRAPHY SCALE
     ============================================================ */
  .eyebrow{
    font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:10px;
  }
  /* The accent appears as a solid cyan bar, not as coloured text */
  .eyebrow::before{content:"";width:22px;height:3px;background:var(--cyan);flex:none}

  .h-display{
    font-family:var(--serif);font-weight:500;color:var(--ink);
    font-size:clamp(2.4rem,5.6vw,4.2rem);line-height:1.04;letter-spacing:-1.2px;
  }
  .h-section{
    font-family:var(--serif);font-weight:500;color:var(--ink);
    font-size:clamp(1.65rem,3.2vw,2.4rem);line-height:1.16;letter-spacing:-.5px;max-width:22ch;
  }
  .h-card{font-family:var(--serif);font-weight:500;font-size:1.28rem;color:var(--ink);line-height:1.25}
  .lead{font-size:1.15rem;line-height:1.58;color:var(--slate);max-width:44ch}
  .intro{color:var(--slate);max-width:60ch;margin-top:16px;font-size:1.04rem}
  strong{color:var(--ink);font-weight:600}

  /* ============================================================
     4. BUTTONS
     CHANGED: cyan fill + ink label. Was blue fill + white label.
     ============================================================ */
  .btn{
    display:inline-block;font-family:var(--sans);font-size:.93rem;font-weight:600;
    padding:13px 24px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;
    background:var(--cyan);color:var(--ink);transition:background .18s,border-color .18s;
  }
  .btn:hover{background:var(--cyan-deep)}
  .btn--ghost{background:transparent;color:var(--ink);border-color:var(--edge)}
  .btn--ghost:hover{background:var(--wash);border-color:var(--ink)}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

  /* ============================================================
     5. HEADER / NAV
     ============================================================ */
  header{
    position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--platinum);
  }
  nav{display:flex;align-items:center;justify-content:space-between;height:70px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand svg{display:block;width:34px;height:34px;flex:none} /* fixed box — no CLS */
  .brand-name{font-family:var(--serif);font-size:1.18rem;font-weight:500;color:var(--ink)}
  .navlinks{display:flex;align-items:center;gap:28px}
  .navlinks a{font-size:.91rem;color:var(--slate);transition:color .18s;position:relative}
  .navlinks a:hover{color:var(--ink)}
  .navlinks a:not(.btn)::after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
    background:var(--cyan);transform:scaleX(0);transition:transform .18s;
  }
  .navlinks a:not(.btn):hover::after{transform:scaleX(1)}

  .navtoggle{display:none;background:none;border:0;cursor:pointer;padding:10px}
  .navtoggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:transform .2s,opacity .2s}
  .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* ============================================================
     6. SECTION SHELL
     One padding rule, background applied by modifier only —
     prevents the specificity collisions that plague section CSS.
     ============================================================ */
  .section{padding:84px 0}
  .section--wash{background:var(--wash);border-block:1px solid var(--platinum)}
  .section-head{margin-bottom:48px}
  .section-head .eyebrow{margin-bottom:16px}

  /* ============================================================
     7. HERO
     ============================================================ */
  .hero{padding:92px 0 76px}
  .hero .eyebrow{margin-bottom:24px}
  .hero h1{max-width:15ch}
  /* Accent as a highlight sweep behind the word. Painted as the element's own
     background gradient rather than a negative-z-index pseudo-element, which
     would render behind the body background and vanish. */
  .hero h1 em{
    font-style:normal;white-space:nowrap;
    background:linear-gradient(to top,var(--cyan) 0,var(--cyan) .18em,transparent .18em);
  }
  .hero .lead{max-width:56ch;margin-top:28px;font-size:1.2rem}
  .hero-meta{
    display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:38px;padding-top:26px;
    border-top:1px solid var(--platinum);font-family:var(--mono);font-size:.72rem;
    letter-spacing:.12em;text-transform:uppercase;color:var(--slate-soft);
  }

  /* ============================================================
     8. CARD GRIDS
     ============================================================ */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}

  /* Stall cards — cyan rule on top replaces the old navy band's job */
  .card{background:var(--white);border:1px solid var(--platinum);border-radius:var(--r);padding:28px 26px}
  .card--rule{border-top:3px solid var(--cyan)}
  .card .k{
    font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--slate-soft);display:block;margin-bottom:14px;
  }
  .card p{font-size:.97rem;margin-top:10px}

  /* Cause list — CHANGED: numbers removed. These four are not a sequence,
     so numbering encoded nothing. Labels carry the meaning instead. */
  .causes{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
  .cause{padding:28px 0;border-top:1px solid var(--platinum)}
  .cause .tag{
    font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);background:var(--platinum);padding:4px 9px;border-radius:4px;display:inline-block;
  }
  .cause h3{margin:14px 0 8px}
  .cause p{font-size:.96rem}

  /* ============================================================
     9. APPROACH — numbering kept here, because order is real
     ============================================================ */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
  .step{background:var(--white);border:1px solid var(--platinum);border-radius:var(--r);padding:26px 22px}
  .step .num{
    counter-increment:step;font-family:var(--mono);font-size:.78rem;font-weight:500;
    color:var(--ink);background:var(--cyan);width:34px;height:34px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  }
  .step .num::before{content:"0" counter(step)}
  .step h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--ink);margin-bottom:9px}
  .step p{font-size:.93rem}

  /* Engagements — what a client actually buys */
  .engagements{margin-top:56px;border-top:1px solid var(--platinum);padding-top:40px}
  .eng{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid var(--platinum);align-items:flex-start}
  .eng:last-child{border-bottom:0}
  .eng .eng-name{flex:0 0 clamp(150px,26%,240px);font-family:var(--serif);font-size:1.1rem;color:var(--ink)}
  .eng p{font-size:.96rem}

  /* ============================================================
     10. PARTNERS
     ============================================================ */
  .partner{background:var(--white);border:1px solid var(--platinum);border-radius:var(--r);padding:32px 30px;display:flex;flex-direction:column}
  .partner-role{
    font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);background:var(--cyan);padding:5px 10px;border-radius:4px;align-self:flex-start;margin-bottom:18px;
  }
  .partner h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--ink);line-height:1.2}
  .partner .where{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-soft);margin-top:8px}
  .partner p{font-size:.96rem;margin-top:16px}
  .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .facts li{
    font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink);
    background:var(--platinum);padding:6px 10px;border-radius:5px;
  }
  .capabilities{margin-top:22px}
  .capabilities li{position:relative;padding-left:20px;font-size:.94rem;margin-bottom:7px}
  .capabilities li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:3px;background:var(--cyan)}
  .partner-links{margin-top:auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:18px}
  .partner-links a{
    font-size:.9rem;font-weight:600;color:var(--ink);
    border-bottom:2px solid var(--cyan);padding-bottom:2px;transition:border-color .18s;
  }
  .partner-links a:hover{border-bottom-color:var(--ink)}

  /* ============================================================
     11. SIGNATURE ELEMENT — the delivery lane map
     Three lanes joined by one cyan rail: who advises, who builds,
     who makes it stick. This is the PRD's "how partnerships deliver".
     ============================================================ */
  .lanes{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:12px}
  /* The rail: a single continuous cyan line threading all three lanes */
  .lanes::before{
    content:"";position:absolute;left:0;right:0;top:46px;height:3px;background:var(--cyan);
  }
  .lane{padding:0 26px;position:relative}
  .lane:first-child{padding-left:0}
  .lane:last-child{padding-right:0}
  .lane + .lane{border-left:1px solid var(--platinum)}
  .lane .stage{
    font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--slate-soft);display:block;height:46px;
  }
  /* Node sitting on the rail */
  .lane .node{
    display:block;width:15px;height:15px;border-radius:50%;background:var(--cyan);
    border:3px solid var(--white);box-shadow:0 0 0 1.5px var(--cyan);
    position:relative;top:-6px;margin-bottom:22px;
  }
  .lane h3{font-family:var(--serif);font-weight:500;font-size:1.2rem;color:var(--ink);margin-bottom:6px}
  .lane .who{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-soft);margin-bottom:14px}
  .lane p{font-size:.94rem}

  /* Operating rules under the map */
  .rules{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px;padding-top:36px;border-top:1px solid var(--platinum)}
  .rule .rule-k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:9px}
  .rule .rule-k::before{content:"";display:inline-block;width:14px;height:3px;background:var(--cyan);margin-right:9px;vertical-align:middle}
  .rule p{font-size:.93rem}

  /* ============================================================
     12. PROOF
     ============================================================ */
  .proof-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start}
  .stmt{font-family:var(--serif);font-size:1.4rem;line-height:1.45;color:var(--ink);font-weight:500}
  .stmt + p{margin-top:18px}
  .certs{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
  .certs li{
    font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink);
    border:1px solid var(--edge);padding:6px 11px;border-radius:5px;
  }
  .results{border-top:2px solid var(--cyan)}
  .result{padding:20px 0;border-bottom:1px solid var(--platinum)}
  .result:last-child{border-bottom:0}
  /* Metric in ink, not cyan — cyan text would fail contrast */
  .result .r-n{font-family:var(--serif);font-size:1.7rem;font-weight:500;color:var(--ink);display:block;line-height:1.1}
  .result .r-c{font-size:.91rem;color:var(--slate);display:block;margin-top:6px}

  /* ============================================================
     13. CONTACT + FOOTER
     CHANGED: contact was a navy band. Now white with a cyan frame.
     ============================================================ */
  .contact{padding:84px 0}
  .contact-inner{
    border:1px solid var(--platinum);border-top:4px solid var(--cyan);
    border-radius:var(--r);background:var(--wash);padding:64px 40px;text-align:center;
  }
  .contact .eyebrow{margin-bottom:18px}
  .contact-inner .eyebrow{justify-content:center}
  .contact h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.8vw,2.7rem);line-height:1.14;letter-spacing:-.6px;color:var(--ink);margin:0 auto 16px;max-width:18ch}
  .contact p{max-width:44ch;margin:0 auto;font-size:1.05rem}
  .contact .cta-row{justify-content:center}
  .contact .mail{
    display:inline-block;font-family:var(--serif);font-size:1.15rem;color:var(--ink);
    margin-top:30px;border-bottom:2px solid var(--cyan);padding-bottom:3px;
  }
  .contact .meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-soft);margin-top:28px}

  footer{border-top:1px solid var(--platinum);padding:32px 0;background:var(--white)}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--slate-soft)}
  footer .fname{color:var(--ink);font-size:1.02rem;font-family:var(--serif)}

  /* ============================================================
     14. MOTION
     ============================================================ */
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
  .reveal.in{opacity:1;transform:none}

  /* ============================================================
     15. RESPONSIVE
     ============================================================ */
  @media (max-width:980px){
    .steps{grid-template-columns:repeat(2,1fr)}
    .rules{grid-template-columns:repeat(2,1fr)}
    .proof-grid{grid-template-columns:1fr;gap:40px}
  }
  @media (max-width:860px){
    :root{--pad:22px}
    .section{padding:60px 0}
    .hero{padding:56px 0 48px}
    .grid-3,.grid-2{grid-template-columns:1fr;gap:16px}
    .causes{grid-template-columns:1fr;gap:0}
    .eng{flex-direction:column;gap:8px}
    .contact-inner{padding:46px 24px}

    /* Lane map rotates from horizontal rail to vertical rail on mobile */
    .lanes{grid-template-columns:1fr}
    .lanes::before{top:0;bottom:0;left:7px;right:auto;width:3px;height:auto}
    .lane{padding:0 0 0 34px}
    .lanes .lane + .lane{border-left:0;margin-top:34px}
    .lane .stage{height:auto;margin-bottom:10px}
    .lane .node{position:absolute;left:-34px;top:4px;margin:0}

    /* CHANGED: visibility:hidden so closed menu links are not keyboard-reachable */
    .navlinks{
      position:fixed;inset:70px 0 auto 0;background:var(--white);flex-direction:column;
      gap:0;border-bottom:1px solid var(--platinum);padding:6px 0;
      transform:translateY(-130%);visibility:hidden;
      transition:transform .26s ease,visibility .26s;
      box-shadow:0 18px 32px -22px rgba(11,18,32,.45);
    }
    .navlinks.open{transform:none;visibility:visible}
    .navlinks a{padding:15px var(--pad);width:100%}
    .navlinks a:not(.btn)::after{display:none}
    .navlinks .btn{margin:10px var(--pad) 14px;text-align:center}
    .navtoggle{display:block}
  }
  @media (max-width:520px){
    .steps{grid-template-columns:1fr}
    .rules{grid-template-columns:1fr;gap:24px}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
    .reveal{opacity:1;transform:none}
  }

  /* Print: strip chrome, keep content readable */
  @media print{
    header,.navtoggle,.cta-row{display:none}
    .section,.hero,.contact{padding:20px 0}
    .reveal{opacity:1;transform:none}
  }

  /* ============================================================
     16. MULTI-PAGE ADDITIONS
     New components for the page architecture. Built strictly from
     the tokens above — same palette, radius, type scale, spacing.
     Nothing here overrides existing rules.
     ============================================================ */

  /* Breadcrumbs — orient the visitor and feed BreadcrumbList schema */
  .crumbs{padding:22px 0 0}
  .crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--slate-soft)}
  .crumbs li{display:flex;align-items:center;gap:8px}
  .crumbs li+li::before{content:"";width:12px;height:2px;background:var(--edge)}
  .crumbs a{color:var(--slate)}
  .crumbs a:hover{color:var(--ink)}
  .crumbs [aria-current="page"]{color:var(--ink)}

  /* Inner-page header — lighter than the home hero */
  .page-head{padding:52px 0 8px}
  .page-head .eyebrow{margin-bottom:20px}
  .page-head h1{font-family:var(--serif);font-weight:500;color:var(--ink);
    font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;letter-spacing:-.8px;max-width:20ch}
  .page-head .lead{margin-top:22px}

  /* Prose — service/approach/about body copy and future articles */
  .prose{max-width:68ch}
  .prose h2{font-family:var(--serif);font-weight:500;color:var(--ink);
    font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.2;letter-spacing:-.4px;
    margin:44px 0 14px}
  .prose h3{font-family:var(--serif);font-weight:500;color:var(--ink);
    font-size:1.2rem;line-height:1.3;margin:28px 0 8px}
  .prose p{margin-top:14px}
  .prose p:first-child{margin-top:0}
  .prose ul{margin:16px 0 0}
  .prose ul li{position:relative;padding-left:22px;margin-bottom:9px;font-size:.98rem}
  .prose ul li::before{content:"";position:absolute;left:0;top:.62em;
    width:10px;height:3px;background:var(--cyan)}
  .prose strong{color:var(--ink)}
  /* Answer-first lede: the short direct answer AEO engines lift */
  .answer{font-size:1.12rem;line-height:1.55;color:var(--ink);
    border-left:3px solid var(--cyan);padding-left:20px;margin-bottom:8px}

  /* Two-column page body: prose + sticky aside */
  .page-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:56px;
    align-items:start;margin-top:8px}
  .aside{position:sticky;top:96px;background:var(--wash);
    border:1px solid var(--platinum);border-top:3px solid var(--cyan);
    border-radius:var(--r);padding:26px 24px}
  .aside h2{font-family:var(--serif);font-weight:500;font-size:1.15rem;
    color:var(--ink);margin-bottom:6px}
  .aside .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--slate-soft);display:block;margin-bottom:14px}
  .aside p{font-size:.94rem;margin-bottom:16px}
  .aside .btn{width:100%;text-align:center}

  /* FAQ — visible Q&A that mirrors the FAQPage schema (AEO) */
  .faq{margin-top:16px;border-top:1px solid var(--platinum)}
  .faq details{border-bottom:1px solid var(--platinum)}
  .faq summary{cursor:pointer;list-style:none;padding:20px 0;
    font-family:var(--serif);font-size:1.12rem;color:var(--ink);
    display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";flex:none;width:12px;height:12px;
    border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
    transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
  .faq details[open] summary::after{transform:rotate(-135deg);margin-top:2px}
  .faq details p{padding:0 0 22px;font-size:.98rem;max-width:68ch}

  /* Services index + cross-link cards reuse .grid-3/.card; add a link cap */
  .card--link{display:flex;flex-direction:column}
  .card--link .go{margin-top:auto;padding-top:18px;font-weight:600;
    color:var(--ink);font-size:.92rem}
  .card--link .go::after{content:" \2192"}
  .card--link:hover{border-color:var(--edge)}

  /* "Learn more" link used on condensed homepage sections */
  .more{display:inline-block;margin-top:26px;font-weight:600;color:var(--ink);
    border-bottom:2px solid var(--cyan);padding-bottom:2px}
  .more::after{content:" \2192"}
  .more:hover{border-bottom-color:var(--ink)}

  /* Insights hub list + empty state */
  .post-list{border-top:2px solid var(--cyan);margin-top:8px}
  .post{padding:26px 0;border-bottom:1px solid var(--platinum);
    display:grid;grid-template-columns:auto 1fr;gap:6px 24px}
  .post .p-date{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--slate-soft);padding-top:5px}
  .post h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--ink)}
  .post p{font-size:.96rem;margin-top:6px}
  .empty{border:1px dashed var(--edge);border-radius:var(--r);
    background:var(--wash);padding:40px 32px;margin-top:8px;max-width:60ch}
  .empty p{margin-top:10px}

  @media (max-width:860px){
    .page-grid{grid-template-columns:1fr;gap:32px}
    .aside{position:static}
    .post{grid-template-columns:1fr;gap:4px}
  }

  /* Footer nav (added with multi-page structure) */
  footer .foot-nav{display:flex;flex-wrap:wrap;gap:6px 20px;order:2;flex:1 1 100%;
    padding:14px 0;margin:2px 0;border-block:1px solid var(--platinum)}
  footer .foot-nav a{color:var(--slate)}
  footer .foot-nav a:hover{color:var(--ink)}
  @media (min-width:861px){
    footer .foot-nav{order:0;flex:0 1 auto;padding:0;margin:0;border:0;justify-content:center}
  }

  /* Article byline + source line (added with /insights/ articles) */
  .page-head .byline{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--slate-soft);margin-top:18px}
  .page-head .byline a{color:var(--slate);border-bottom:2px solid var(--cyan);padding-bottom:1px}
  .page-head .byline a:hover{color:var(--ink)}
  .prose .src{margin-top:38px;padding-top:18px;border-top:1px solid var(--platinum);
    font-size:.88rem;color:var(--slate-soft)}
  .prose .src a{color:var(--slate);border-bottom:1px solid var(--edge)}
  .prose .src a:hover{color:var(--ink)}