/*
Theme Name: The BioChain
Theme URI: https://thebiochain.com
Author: The BioChain
Description: Marketing theme for The BioChain — trusted, audit-ready infrastructure for biological data. Classic theme; shared header/footer with the new design system applied site-wide.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: biochain
*/

:root {
    /* Brand palette */
    --ink:        #020119;  /* Deep Blue */
    --ink-2:      #0A3652;  /* Ink blue */
    --surface:    #0A3652;  /* Ink blue (cards) */
    --accent:     #00ED99;  /* Bold green */
    --accent-2:   #33F1AB;  /* Slightly brighter for hover states */
    --accent-dim: rgba(0, 237, 153, 0.10);
    /* Neutral text + borders */
    --line:       rgba(255, 255, 255, 0.08);
    --line-soft:  rgba(255, 255, 255, 0.05);
    --text:       #F2EFE8;
    --text-muted: #8A97A8;
    --text-dim:   #5A6577;
    --maxw:       1240px;
    --gutter:     32px;
    --radius:     6px;
    --radius-lg:  14px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--ink); color: var(--text);
    font-family: 'Raleway', -apple-system, sans-serif;
    font-weight: 500; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  ::selection { background: var(--accent); color: var(--ink); }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }
  .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; }

  /* ===== BANNER BACKGROUND — node network (hero + closing CTA only) ===== */
  .banner-bg { position: relative; isolation: isolate; }
  .banner-bg::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'><g stroke='%2300ED99' stroke-opacity='0.10' stroke-width='0.6' fill='none'><line x1='120' y1='180' x2='340' y2='240'/><line x1='340' y1='240' x2='560' y2='150'/><line x1='560' y1='150' x2='780' y2='280'/><line x1='780' y1='280' x2='1020' y2='200'/><line x1='1020' y1='200' x2='1280' y2='340'/><line x1='1280' y1='340' x2='1480' y2='220'/><line x1='340' y1='240' x2='460' y2='460'/><line x1='560' y1='150' x2='670' y2='400'/><line x1='780' y1='280' x2='720' y2='540'/><line x1='1020' y1='200' x2='1100' y2='480'/><line x1='1280' y1='340' x2='1180' y2='600'/><line x1='460' y1='460' x2='670' y2='400'/><line x1='670' y1='400' x2='720' y2='540'/><line x1='720' y1='540' x2='1100' y2='480'/><line x1='1100' y1='480' x2='1180' y2='600'/><line x1='460' y1='460' x2='280' y2='620'/><line x1='720' y1='540' x2='580' y2='720'/><line x1='1100' y1='480' x2='960' y2='720'/><line x1='1180' y1='600' x2='1340' y2='760'/><line x1='280' y1='620' x2='580' y2='720'/><line x1='580' y1='720' x2='960' y2='720'/><line x1='960' y1='720' x2='1340' y2='760'/><line x1='120' y1='180' x2='280' y2='620'/></g><g fill='%2300ED99'><circle cx='120' cy='180' r='1.6' opacity='0.6'/><circle cx='340' cy='240' r='2.2' opacity='0.7'/><circle cx='560' cy='150' r='1.8' opacity='0.55'/><circle cx='780' cy='280' r='3.4' opacity='0.9'/><circle cx='1020' cy='200' r='1.6' opacity='0.5'/><circle cx='1280' cy='340' r='2.8' opacity='0.75'/><circle cx='1480' cy='220' r='1.4' opacity='0.45'/><circle cx='460' cy='460' r='2.0' opacity='0.6'/><circle cx='670' cy='400' r='1.6' opacity='0.5'/><circle cx='720' cy='540' r='3.2' opacity='0.85'/><circle cx='1100' cy='480' r='1.8' opacity='0.55'/><circle cx='1180' cy='600' r='2.2' opacity='0.65'/><circle cx='280' cy='620' r='1.6' opacity='0.5'/><circle cx='580' cy='720' r='2.4' opacity='0.7'/><circle cx='960' cy='720' r='1.8' opacity='0.55'/><circle cx='1340' cy='760' r='2.0' opacity='0.6'/></g></svg>");
    background-size: cover; background-position: center; opacity: 0.85;
  }
  .banner-bg::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--ink);
  }

  /* ===== NAV ===== */
  .nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    background: rgba(2, 1, 25, 0.78);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
  .brand {
    display: inline-flex; align-items: center;
  }
  .brand-logo { height: 28px; width: auto; display: block; }
  .brand-logo-footer { height: 30px; }
  .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
  .nav-links a { font-size: 15px; font-weight: 500; color: var(--text); transition: color 0.2s; }
  .nav-links a:hover, .nav-links a.active { color: var(--text); }
  .nav-cta { display: flex; gap: 12px; align-items: center; }
  .nav-links li.has-dropdown > a { display: inline-flex; align-items: center; gap: 5px; }
  .nav-caret { width: 9px; height: 6px; flex-shrink: 0; transition: transform 0.15s ease; }
  .nav-links li.has-dropdown:hover .nav-caret,
  .nav-links li.has-dropdown:focus-within .nav-caret { transform: rotate(180deg); }
  .nav-dropdown {
    list-style: none; margin: 0; padding: 14px 10px 10px; position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    min-width: 260px; background: var(--ink-2); border: 1px solid var(--line-soft);
    border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    opacity: 0; visibility: hidden; transition: opacity 0.15s ease;
    z-index: 60;
  }
  .nav-links li.has-dropdown { position: relative; }
  .nav-links li.has-dropdown:hover .nav-dropdown,
  .nav-links li.has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; }
  .nav-dropdown a { display: block; padding: 10px 14px; font-size: 14px; border-radius: 6px; white-space: nowrap; }
  .nav-dropdown a:hover { background: rgba(255,255,255,0.06); color: var(--accent); }
  .pillar-link { margin-top: 14px !important; }
  .pillar-link a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--accent); }
  .pillar-link a:hover { text-decoration: underline; }

  /* ===== BUTTONS ===== */
  .btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 500;
    padding: 11px 20px; border-radius: var(--radius);
    border: 1px solid transparent; cursor: pointer;
    transition: all 0.2s ease; white-space: nowrap;
  }
  .btn-primary { background: var(--accent); color: var(--ink); }
  .btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
  .btn-ghost:hover { border-color: var(--text-muted); background: rgba(255,255,255,0.02); }
  .btn-large { padding: 15px 28px; font-size: 15px; }
  .btn .arrow { width: 13px; height: 13px; transition: transform 0.2s; }
  .btn:hover .arrow { transform: translateX(3px); }

  /* ===== TYPE ===== */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Raleway', sans-serif; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--accent); font-weight: 500;
  }
  .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); display: inline-block; }
  .display {
    font-family: 'Raleway', sans-serif; font-weight: 600;
    letter-spacing: -0.025em; line-height: 1.05; color: var(--text);
  }
  .display em { font-style: italic; font-weight: 600; color: var(--accent); }
  .lede { font-size: 18px; line-height: 1.6; color: var(--text); max-width: 85ch; }
  .section-title {
    font-family: 'Raleway', sans-serif; font-weight: 600;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1; letter-spacing: -0.02em;
    color: var(--text); max-width: 22ch;
  }
  .section-title em { font-style: italic; color: var(--accent); font-weight: 600; }

  /* ===== HERO ===== */
  .hero { padding: 80px 0 110px; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; }
  .hero-headline { font-size: clamp(40px, 5.2vw, 64px); margin-top: 26px; margin-bottom: 28px; }
  .hero-sub { margin-bottom: 38px; }
  .hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  .hero-credibility {
    margin-top: 28px; font-family: 'Raleway', sans-serif;
    font-size: 13px; color: var(--text);
    display: flex; align-items: center; gap: 10px;
  }
  .hero-credibility .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 8px var(--accent);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

  /* ===== Hero graphic (tablet mock image) ===== */
  .hero-graphic img {
    width: 100%; height: auto; display: block;
  }
  .dash-caption {
    margin-top: 14px; font-family: 'Raleway', sans-serif;
    font-size: 12px; color: var(--text-muted); text-align: center;
    letter-spacing: 0.02em;
  }

  /* ===== TRUST STRIP ===== */
  .trust-strip {
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 48px 0; background: var(--ink-2);
  }
  .trust-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: start; }
  .trust-item {
    display: flex; flex-direction: column; gap: 12px;
    padding-left: 18px;
    border-left: 2px solid var(--accent);
  }
  .trust-item-value {
    font-family: 'Raleway', sans-serif; font-size: 20px; font-weight: 600;
    color: var(--text); letter-spacing: -0.005em; line-height: 1.35;
  }
  .trust-item-label {
    font-family: 'Raleway', sans-serif; font-size: 13px;
    color: var(--text-muted); letter-spacing: 0.02em;
    font-weight: 500; line-height: 1.4;
  }

  /* ===== SECTIONS ===== */
  section { padding: 120px 0; position: relative; }
  .section-head {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; margin-bottom: 70px; align-items: end;
  }
  .section-head-right { padding-bottom: 4px; }

  /* ===== PROBLEM ===== */
  .problem .section-title { max-width: 18ch; }
  .problem-body { font-size: 17px; line-height: 1.65; color: var(--text); max-width: 75ch; }
  .problem-body p + p { margin-top: 22px; }
  .problem-callout {
    margin-top: 50px; padding: 36px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
  }
  .problem-item {
    padding-left: 14px;
    border-left: 2px solid var(--accent);
    font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 600;
    color: var(--text); letter-spacing: -0.005em; line-height: 1.3;
  }

  /* ===== PILLARS ===== */
  .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
  .pillar { padding: 44px 36px 44px 0; border-right: 1px solid var(--line); }
  .pillar:last-child { border-right: none; padding-right: 0; }
  .pillar:not(:first-child) { padding-left: 36px; }
  /* .pillar:not(:first-child) above only exempts the very first item in the
     whole list — correct for a single row of 3, but on a wrapping grid
     (e.g. 6 pillars = 2 rows) every row after the first gets the same
     left padding as row 1's non-first items, so row starts are misaligned.
     Reset per-row using the actual column count instead of DOM order. */
  .pillars-grid .pillar:nth-child(3n+1) { padding-left: 0; }
  .pillars-grid .pillar:nth-child(3n) { border-right: none; padding-right: 0; }
  .pillars-grid.cols-2 .pillar:nth-child(2n+1) { padding-left: 0 !important; }
  .pillars-grid.cols-2 .pillar:nth-child(2n) { padding-left: 36px !important; border-right: none !important; padding-right: 0 !important; }
  .pillars-grid.cols-4 .pillar:nth-child(4n+1) { padding-left: 0 !important; }
  .pillars-grid.cols-4 .pillar:nth-child(4n) { padding-left: 36px !important; border-right: none !important; padding-right: 0 !important; }
  .pillars-grid.cols-4 .pillar:nth-child(4n+1) { padding-left: 0; }
  .pillars-grid.cols-4 .pillar:nth-child(4n) { border-right: none; padding-right: 0; }
  .pillar-icon { width: 48px; height: 48px; display: block; margin-bottom: 24px; }
  .pillar-num {
    font-family: 'Raleway', sans-serif; font-size: 11px;
    color: var(--accent); margin-bottom: 22px; letter-spacing: 0.1em;
  }
  .pillar-title {
    font-family: 'Raleway', sans-serif; font-weight: 600;
    font-size: 24px; color: var(--text); margin-bottom: 14px; letter-spacing: -0.01em;
  }
  .pillar-title-fixed { min-height: 66px; }
  @media (max-width: 860px) { .pillar-title-fixed { min-height: 0; } }
  .pillar-body { font-size: 15px; color: var(--text); opacity:0.85; line-height: 1.6; }
  .pillars-cta { margin-top: 60px; }

  /* ===== ECOSYSTEM ===== */
  .ecosystem { background: var(--ink-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .eco-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 32px 28px;
    display: flex; flex-direction: column;
    transition: all 0.25s ease; position: relative; overflow: hidden;
  }
  .eco-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--accent);
    opacity: 0; transition: opacity 0.3s;
  }
  .eco-card:hover { transform: translateY(-3px); border-color: rgba(0, 237, 153, 0.2); }
  .eco-card:hover::before { opacity: 0.6; }
  .eco-tag {
    display: inline-flex; align-self: flex-start;
    font-family: 'Raleway', sans-serif; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 5px 10px; border-radius: 3px;
    background: var(--accent-dim); color: var(--accent); margin-bottom: 22px;
  }
  .eco-tag.gold { background: rgba(242, 239, 232, 0.08); color: var(--text); }
  .eco-tag.muted { background: rgba(138, 151, 168, 0.10); color: var(--text-muted); }
  .eco-name {
    font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 28px;
    color: var(--text); margin-bottom: 12px; letter-spacing: -0.015em;
  }
  .eco-desc { font-size: 15px; color: var(--text); line-height: 1.65; margin-bottom: 28px; flex: 1; }
  .eco-link {
    font-family: 'Raleway', sans-serif; font-size: 12px; color: var(--accent);
    display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s;
  }
  .eco-card:hover .eco-link { gap: 10px; }
  .sectors-hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .sector-hub-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 28px 24px;
    display: flex; flex-direction: column; text-decoration: none;
    transition: all 0.25s ease; position: relative; overflow: hidden;
  }
  .sector-hub-card:hover { transform: translateY(-3px); border-color: rgba(0, 237, 153, 0.2); }
  .sector-hub-card .eco-name { font-size: 20px; }
  @media (max-width: 900px) { .sectors-hub-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) { .sectors-hub-grid { grid-template-columns: 1fr; } }

  /* ===== USE CASES ===== */
  .uses-list { border-top: 1px solid var(--line); }
  .use-row {
    display: grid; grid-template-columns: 64px 1fr 2.5fr 30px;
    gap: 30px; padding: 36px 0;
    border-bottom: 1px solid var(--line);
    align-items: start; transition: background 0.2s; cursor: pointer;
  }
  .use-row:hover { background: rgba(0, 237, 153, 0.02); }
  .use-num {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    font-family: 'Raleway', sans-serif; font-size: 11px; color: var(--text-muted); padding-top: 2px;
  }
  .use-icon-badge {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--accent);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .use-icon {
    width: 28px; height: 28px; display: block;
  }
  .use-name {
    font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 22px;
    color: var(--text); line-height: 1.25; letter-spacing: -0.01em;
  }
  .use-desc { font-size: 15px; color: var(--text); opacity:0.85; line-height: 1.6; }
  .use-arrow { color: var(--text-muted); padding-top: 8px; transition: color 0.2s, transform 0.2s; }
  .use-row:hover .use-arrow { color: var(--accent); transform: translateX(4px); }
  .uses-cta { margin-top: 50px; }

  /* ===== TRUST STATEMENT ===== */
  .trust-section { background: var(--ink-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
  .trust-text { font-size: 17px; color: var(--text); opacity:0.85; line-height: 1.65; }
  .trust-text p + p { margin-top: 20px; }
  .trust-text strong { color: var(--text); font-weight: 600; }
  .trust-cta { margin-top: 36px; }

  /* ===== CLOSING ===== */
  .closing { padding: 130px 0; text-align: center; }
  .closing .container { max-width: 820px; }
  .closing .display { font-size: clamp(36px, 4.6vw, 56px); margin: 24px 0 26px; }
  .closing-sub { font-size: 18px; color: var(--text); line-height: 1.6; max-width: 50ch; margin: 0 auto 40px; }

  /* ===== FOOTER ===== */
  footer { border-top: 1px solid var(--line-soft); background: var(--ink-2); padding: 80px 0 40px; }
  .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 50px; }
  .foot-brand-tag {
    margin-top: 18px; font-family: 'Raleway', sans-serif; font-style: italic;
    font-size: 16px; color: var(--text); line-height: 1.5; max-width: 26ch;
  }
  .foot-col-label {
    font-family: 'Raleway', sans-serif; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--text-muted); margin-bottom: 18px;
  }
  .foot-office-name {
    font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 17px;
    color: var(--text); margin-bottom: 8px; letter-spacing: -0.01em;
  }
  .foot-office-addr { font-size: 14px; color: var(--text); line-height: 1.65; font-style: normal; }
.foot-nav-links { list-style:none; display:flex; flex-direction:column; gap:12px; }
.foot-nav-links a { font-size:14px; color:var(--text); transition:color 0.2s; }
.foot-nav-links a:hover { color:var(--accent); }
  .foot-contact { font-size: 14px; color: var(--text); line-height: 1.85; }
  .foot-contact a { transition: color 0.2s; }
  .foot-contact a:hover { color: var(--accent); }
  .foot-contact-label {
    color: var(--text-muted); font-family: 'Raleway', sans-serif;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
    display: block; margin-bottom: 2px;
  }
  .foot-bottom {
    border-top: 1px solid var(--line-soft); padding-top: 30px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 20px;
  }
  .foot-supported {
    border-top: 1px solid var(--line-soft);
    padding: 28px 0;
    display: flex; align-items: center; justify-content: center; gap: 32px;
    flex-wrap: wrap;
  }
  .foot-supported-label {
    font-family: 'Raleway', sans-serif; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--text-muted);
  }
  .foot-supporters { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
  .foot-supporter {
    display: inline-flex; align-items: center;
    transition: opacity 0.2s;
  }
  .foot-supporter img { height: 36px; width: auto; display: block; opacity: 0.85; }
  .foot-supporter:hover img { opacity: 1; }
  .foot-bottom-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .foot-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    transition: transform 0.2s;
  }
  .foot-social:hover { transform: translateY(-1px); }
  .foot-social img { width: 34px; height: 34px; display: block; }
  .foot-copy { font-family: 'Raleway', sans-serif; font-size: 12px; color: var(--text-muted); }
  .foot-bottom-links { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; }
  .foot-bottom-links a { font-size: 14px; color: var(--text); transition: color 0.2s; }
  .foot-bottom-links a:hover { color: var(--accent); }

  .nav-menu { display: flex; align-items: center; gap: 36px; }
  .nav-toggle {
    display: none;
    background: transparent; border: 1px solid var(--line);
    border-radius: var(--radius); width: 40px; height: 40px;
    align-items: center; justify-content: center;
    cursor: pointer; color: var(--text);
    transition: all 0.2s;
  }
  .nav-toggle:hover { border-color: var(--text-muted); }
  .nav-toggle svg { width: 18px; height: 18px; }
  .nav-toggle .icon-close { display: none; }
  body.menu-open .nav-toggle .icon-menu { display: none; }
  body.menu-open .nav-toggle .icon-close { display: block; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 980px) {
    /* backdrop-filter on .nav creates a new containing block for any
       position:fixed descendant (spec-mandated, not a bug) — that traps
       .nav-menu's fixed positioning inside the 70px header box instead of
       the viewport, on every browser. Drop the filter on mobile so the
       menu can position itself relative to the real viewport again. */
    .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .nav-toggle { display: inline-flex; }
    .nav-menu {
      position: fixed;
      top: 70px; right: 0; bottom: 0; left: 0;
      background: var(--ink);
      flex-direction: column;
      padding: 48px 32px 32px;
      align-items: stretch;
      gap: 0;
      transform: translateX(100%);
      transition: transform 0.35s ease;
      z-index: 49;
      border-top: 1px solid var(--line-soft);
      overflow-y: auto;
    }
    body.menu-open .nav-menu { transform: translateX(0); }
    body.menu-open { overflow: hidden; }
    .nav-links {
      flex-direction: column;
      align-items: flex-start;
      gap: 28px;
      margin-bottom: 40px;
    }
    .nav-links a {
      font-family: 'Raleway', sans-serif;
      font-size: 26px;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .nav-links li.has-dropdown { width: 100%; }
    .nav-caret { display: none; }
    .nav-dropdown {
      position: static; transform: none; opacity: 1; visibility: visible;
      box-shadow: none; border: none; background: transparent;
      min-width: 0; padding: 4px 0 0 4px; margin-top: 10px;
      display: flex; flex-direction: column; gap: 16px;
      border-left: 1px solid var(--line-soft);
    }
    .nav-dropdown a { padding: 0 0 0 20px; font-size: 17px; font-family: 'Raleway', sans-serif; }
    .nav-dropdown a:hover { background: transparent; }
    .nav-cta { padding-top: 32px; border-top: 1px solid var(--line-soft); }
    .nav-cta .btn { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }
    .hero-grid, .section-head, .trust-grid { grid-template-columns: 1fr; gap: 50px; }
    .pillars-grid, .eco-grid { grid-template-columns: 1fr; }
    .trust-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .problem-callout { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .pillar { border-right: none; border-bottom: 1px solid var(--line); padding: 36px 0 !important; }
    .use-row { grid-template-columns: 40px 1fr; gap: 16px; }
    .use-row .use-desc { grid-column: 2; }
    .use-row .use-arrow { display: none; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    section { padding: 80px 0; }
  }
  @media (max-width: 600px) {
    :root { --gutter: 20px; }
    .foot-grid { grid-template-columns: 1fr; }
    .hero { padding: 50px 0 70px; }
    .trust-strip-grid { grid-template-columns: 1fr; }
    .problem-callout { grid-template-columns: 1fr; }
  }

  /* ===== Entrance ===== */
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero > * > * { animation: rise 0.7s ease forwards; }
  .hero .hero-headline { animation-delay: 0.1s; }
  .hero .hero-sub { animation-delay: 0.2s; }
  .hero .hero-ctas { animation-delay: 0.3s; }
  .hero .hero-credibility { animation-delay: 0.4s; }
/* ---- Inner page templates (page.php / index.php / single.php) ---- */
.page-hero{padding:7rem 0 3rem;border-bottom:1px solid rgba(0,0,0,.06)}
.page-hero h1{margin:0;max-width:18ch}
.page-content{padding:4rem 0 6rem}
.page-content .container{max-width:760px}
.page-content h2{margin-top:2.5rem}
.page-content h3{margin-top:1.75rem}
.page-content p{margin:1rem 0;line-height:1.7}
.page-content ul,.page-content ol{margin:1rem 0 1rem 1.25rem;line-height:1.7}
.page-content img{max-width:100%;height:auto;border-radius:12px}

/* =====================================================================
   INNER-PAGE SYSTEM  (added for all non-homepage templates)
   Reuses the homepage tokens + component vocabulary.
   ===================================================================== */
.inner-hero { padding: 104px 0 56px; border-bottom: 1px solid var(--line); }
.inner-hero .eyebrow { margin-bottom: 26px; }
.inner-hero h1 { font-size: clamp(36px,4.6vw,58px); max-width: 20ch; margin: 0 0 26px; }
.inner-hero .lede { max-width: 85ch; font-size: 18px; }
.inner-hero-ctas { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

.section--alt { background: var(--ink-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.section-intro { max-width: 90ch; margin-bottom: 60px; }
.section-intro .section-title { margin-bottom: 22px; }
.section-intro p { font-size: 17px; line-height: 1.65; color: var(--text); margin: 0 0 1rem; }

/* split: heading left, prose right (mirrors .section-head grid) */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.split-body p { font-size:16px; line-height:1.7; color:var(--text); opacity:0.85; margin:0 0 1.1rem; }
.split-aside { display:flex; flex-direction:column; gap:18px; }
.split-aside .trust-item { padding-left:18px; border-left:2px solid var(--accent); }

/* column-count modifiers for the pillars grid */
.pillars-grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.pillars-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width:900px){
  .pillars-grid.cols-2,.pillars-grid.cols-4,.pillars-grid{grid-template-columns:1fr;}
  /* Single-column stack: neutralise the desktop divider rules at their own
     specificity (an !important tie is broken by specificity first, not
     source order, so these selectors must match the originals exactly). */
  .pillars-grid .pillar:not(:first-child),
  .pillars-grid .pillar:nth-child(3n+1),
  .pillars-grid .pillar:nth-child(3n),
  .pillars-grid.cols-2 .pillar:nth-child(2n+1),
  .pillars-grid.cols-2 .pillar:nth-child(2n),
  .pillars-grid.cols-4 .pillar:nth-child(4n+1),
  .pillars-grid.cols-4 .pillar:nth-child(4n)
  {padding-left:0 !important;border-right:none !important;padding-right:0 !important;}
}

/* generic feature list reusing use-row look but non-clickable */
.feature-list .use-row { cursor: default; grid-template-columns: 56px 1fr 2.2fr; }
.feature-list .use-row:hover { background: transparent; }

/* stat strip */
.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0; }
.stat-num { font-family:'Raleway',sans-serif; font-weight:600; font-size:34px; color:var(--accent); letter-spacing:-0.02em; }
.stat-label { font-size:14px; color:var(--text-muted); margin-top:8px; line-height:1.5; }
@media (max-width:760px){ .stat-strip{grid-template-columns:repeat(2,1fr);gap:30px;} }

/* team */
.team-group { margin-top: 56px; }
.team-role-label { font-family:'Raleway',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.16em; color:var(--accent); margin-bottom:24px; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.team-card { position:relative; background:var(--surface); border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius-lg); padding:28px; overflow:visible; box-shadow:0 8px 24px rgba(0,0,0,0.35); min-height:264px; }
@media (max-width:860px){ .team-card{min-height:0;} }
.team-photo {
  width:88px; height:88px; border-radius:50%; margin-top:4px; margin-bottom:18px;
  background:var(--accent); overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.team-photo svg { width:38px; height:38px; }
.team-photo img { width:calc(100% - 6px); height:calc(100% - 6px); object-fit:cover; border-radius:50%; }
.team-photo { width:72px; height:72px; border-radius:50%; object-fit:cover; display:block; margin-bottom:16px; border:2px solid var(--accent); }
.team-name { font-family:'Raleway',sans-serif; font-weight:600; font-size:19px; color:var(--text); margin-bottom:10px; }
.team-name:has(+ .team-role) { margin-bottom:2px; }
.team-role { font-size:12px; color:var(--text); opacity:0.65; letter-spacing:0.02em; margin-bottom:10px; }
.team-bio { font-size:14px; color:var(--text); opacity:0.8; line-height:1.6; }

/* Team card links: a linked name should look linkable, and a card may carry
   a small row of profile links (digital card, LinkedIn, ORCID). */
.team-name-link { color:inherit; text-decoration:none; border-bottom:1px solid rgba(0,237,153,.45); }
.team-name-link:hover { color:var(--accent); border-bottom-color:var(--accent); }
/* Cards in a row stretch to equal height, so making the card a column and
   pushing the button row to the bottom keeps the buttons on one line
   across the grid however long each bio runs. */
.team-card { display:flex; flex-direction:column; }
.team-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:18px; }
.team-links .btn { padding:8px 14px; font-size:12.5px; text-decoration:none; }
@media (max-width:860px){ .team-grid{grid-template-columns:1fr;} }

/* offices */
.offices { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.office { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; }
.office-name { font-family:'Raleway',sans-serif; font-weight:600; font-size:22px; color:var(--text); margin-bottom:14px; }
.office address { font-style:normal; color:var(--text); opacity:0.85; font-size:15px; line-height:1.7; }
@media (max-width:760px){ .offices{grid-template-columns:1fr;} }

/* contact inboxes */
.inbox-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.inbox-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; }
.inbox-label { font-family:'Raleway',sans-serif; font-weight:600; font-size:17px; color:var(--text); margin-bottom:8px; }
.inbox-desc { font-size:14px; color:var(--text); opacity:0.85; line-height:1.6; margin-bottom:16px; }
.inbox-card a { color:var(--accent); font-size:15px; }
@media (max-width:700px){ .inbox-grid{grid-template-columns:1fr;} }

/* article cards (insights / continue reading / press updates) */
.article-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.article-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:0; overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s,transform .25s; }
.article-card:hover { border-color:var(--accent); transform:translateY(-3px); }
.article-card-thumb { aspect-ratio:16/9; overflow:hidden; background:var(--ink); }
.article-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.article-card-thumb-fallback { display:flex; align-items:center; justify-content:center; }
.article-card-thumb-fallback .article-card-thumb-logo { width:auto; height:28px; object-fit:contain; opacity:0.85; }
.article-card-body { padding:30px; display:flex; flex-direction:column; flex:1; }
.article-card-title { font-family:'Raleway',sans-serif; font-weight:600; font-size:19px; line-height:1.3; color:var(--text); margin-bottom:12px; }
.article-card-desc { font-size:14px; color:var(--text-muted); line-height:1.6; }
.featured-article { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:0; overflow:hidden; margin-bottom:40px; }
.featured-article-thumb { aspect-ratio:21/9; overflow:hidden; background:var(--ink); }
.featured-article-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.featured-article-thumb-fallback { display:flex; align-items:center; justify-content:center; }
.featured-article-thumb-fallback .article-card-thumb-logo { width:auto; height:40px; object-fit:contain; opacity:0.85; }
.featured-article-body { padding:48px; }
@media (max-width:900px){ .featured-article-body{padding:32px;} }
.featured-article .section-title { font-size:clamp(26px,3vw,36px); margin-bottom:18px; }
.featured-article p { font-size:16px; color:var(--text); opacity:0.85; line-height:1.7; max-width:70ch; }
@media (max-width:900px){ .article-cards{grid-template-columns:1fr;} }

/* long-form prose (legal, article body) */
.prose { max-width: 760px; }
.prose h2 { font-family:'Raleway',sans-serif; font-weight:600; font-size:30px; color:var(--text); margin:0 0 8px; letter-spacing:-0.015em; }
.prose h3 { font-family:'Raleway',sans-serif; font-weight:600; font-size:19px; color:var(--text); margin:2rem 0 .6rem; }
.prose p { font-size:16px; line-height:1.75; color:var(--text); opacity:0.9; margin:1rem 0; }
.prose ul { margin:1rem 0 1rem 1.1rem; }
.prose li { font-size:16px; line-height:1.7; color:var(--text); opacity:0.9; margin:.5rem 0; }
.prose a { color:var(--accent); }
.prose blockquote { margin:2rem 0; padding:22px 28px; border-left:3px solid var(--accent); background:var(--accent-dim); font-size:19px; line-height:1.5; color:var(--text); }
.article-pull-quote { margin:0 0 2.5rem; padding:26px 30px; border-left:3px solid var(--accent); background:var(--accent-dim); font-size:22px; line-height:1.45; font-weight:500; color:var(--text); font-style:normal; }
.article-featured-image { border-radius:var(--radius-lg); overflow:hidden; margin-bottom:8px; max-height:420px; }
.article-featured-image img { width:100%; height:420px; object-fit:cover; display:block; }
@media (max-width:640px) { .article-featured-image, .article-featured-image img { max-height:240px; height:240px; } }
.article-layout { display:grid; grid-template-columns:1fr 280px; gap:60px; align-items:start; }
.article-layout.no-toc { grid-template-columns:1fr; }
.article-layout.no-toc .prose { max-width: 900px; margin: 0 auto; }

details.bc-qa {
  border:1px solid rgba(255,255,255,0.14); border-radius:8px;
  padding:0; margin:0 0 12px; background:rgba(255,255,255,0.03);
  overflow:hidden;
}
details.bc-qa summary{
  list-style:none; cursor:pointer; padding:16px 20px;
  font-family:'Raleway',sans-serif; font-weight:600; font-size:15.5px;
  color:var(--text); display:flex; justify-content:space-between; align-items:center; gap:16px;
}
details.bc-qa summary::-webkit-details-marker{ display:none; }
details.bc-qa summary::after{
  content:"+"; font-size:20px; font-weight:400; color:var(--accent); flex-shrink:0;
  transition:transform .15s ease;
}
details.bc-qa[open] summary::after{ content:"\2212"; }
details.bc-qa p{ margin:0; padding:0 20px 18px; }
/* Key Takeaways / intro-note boxes in article bodies use a light inline
   background, but .prose li/.prose p set their own light-on-dark colour
   with higher priority than an inherited value — so text on the light box
   was invisible. Target any light-background box inside .prose directly. */
.prose div[style*="F4F6F5"] li,
.prose div[style*="F4F6F5"] p { color:#2a3140 !important; opacity:1 !important; }
.prose div[style*="F4F6F5"] { border:1px solid #00ED99 !important; }
.prose div[style*="F4F6F5"] ul { list-style:none !important; padding-left:0 !important; margin:0 !important; }
.prose div[style*="F4F6F5"] li { padding-left:20px !important; position:relative; margin-bottom:10px !important; }
.prose div[style*="F4F6F5"] li:last-child { margin-bottom:0 !important; }
.prose div[style*="F4F6F5"] li::before { content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:#00ED99; }
.article-toc-rail { position:sticky; top:100px; max-height:calc(100vh - 130px); overflow-y:auto; }
@media (max-width:960px) { .article-layout { grid-template-columns:1fr; } .article-toc-rail { position:static; order:-1; } }
.article-toc { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius); padding:20px 24px; margin:0 0 2.5rem; }
.article-toc-label { font-family:'Raleway',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin:0 0 10px; }
.article-toc ol { margin:0; padding-left:1.2rem; }
.article-toc li { font-size:15px; margin-bottom:6px; }
.article-toc a { color:var(--text); }
.article-toc a:hover { color:var(--accent); }
.key-takeaways { margin-top:3rem; padding:24px 28px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-lg); }
.key-takeaways-label { font-family:'Raleway',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); margin:0 0 12px; }
.key-takeaways ul { margin:0; padding-left:1.2rem; }
.key-takeaways li { font-size:15px; line-height:1.6; color:var(--text); margin-bottom:8px; }
.legal-doc { padding-bottom:64px; margin-bottom:64px; border-bottom:1px solid var(--line); }
.legal-doc:last-child { border-bottom:none; }
.legal-nav { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px; }
.legal-nav a { font-family:'Raleway',sans-serif; font-size:13px; color:var(--accent); border:1px solid var(--line); border-radius:999px; padding:8px 18px; }
.article-meta { display:flex; gap:12px; align-items:center; font-size:14px; color:var(--text-muted); font-family:'Raleway',sans-serif; margin-bottom:28px; }
.article-meta-author { color:var(--text); font-weight:600; }
.author-avatar-placeholder, .author-avatar-img {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:var(--text-muted);
}
.author-avatar-placeholder svg { width:18px; height:18px; }
.author-avatar-img { object-fit:cover; }
.author-bio { margin-top:48px; padding-top:32px; border-top:1px solid var(--line); }
.author-bio .team-name { margin-bottom:8px; }

/* kit / decline simple lists */
.kit-list { columns:2; gap:40px; }
.kit-list li { font-size:15px; color:var(--text-muted); line-height:1.8; margin-bottom:6px; }
@media (max-width:700px){ .kit-list{columns:1;} }

/* ---- Blog (Posts) : filter bar, card meta, pagination ---- */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px; }
.filter-bar a { font-family:'Raleway',sans-serif; font-size:13px; color:var(--text-muted);
  border:1px solid var(--line); border-radius:999px; padding:8px 18px; transition:all .2s; }
.filter-bar a:hover { color:var(--text); border-color:var(--accent); }
.filter-bar a.active { color:var(--ink); background:var(--accent); border-color:var(--accent); }
.article-card .eco-tag { margin-bottom:18px; }
.article-card-meta { margin-top:auto; padding-top:16px; font-family:'Raleway',sans-serif; font-size:12px; color:var(--text-muted); }
.featured-article .article-card-meta { padding-top:20px; }
.blog-pagination { margin-top:56px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.blog-pagination .page-numbers { font-family:'Raleway',sans-serif; font-size:14px; color:var(--text-muted);
  border:1px solid var(--line); border-radius:8px; padding:8px 14px; }
.blog-pagination .page-numbers.current { color:var(--ink); background:var(--accent); border-color:var(--accent); }
.empty-state { color:var(--text-muted); font-size:16px; padding:40px 0; }

/* ===== FORMS (contact + newsletter) ===== */
.contact-form { display:grid; gap:20px; max-width:640px; margin-top:8px; }
.contact-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-form label { display:block; font-family:'Raleway',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:8px; }
.contact-form input, .contact-form textarea {
  width:100%; background:rgba(255,255,255,0.05); border:2px solid rgba(255,255,255,0.45); border-radius:var(--radius);
  padding:12px 14px; color:var(--text); font-family:inherit; font-size:15px; transition:border-color 0.2s, background 0.2s;
}
.contact-form input:hover, .contact-form textarea:hover { border-color:rgba(255,255,255,0.35); }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--accent); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:var(--text-muted); opacity:1; }
.contact-form textarea { min-height:150px; resize:vertical; }
.form-hp { position:absolute !important; left:-9999px !important; top:-9999px; }
.form-notice { padding:14px 18px; border-radius:var(--radius); margin-bottom:24px; font-size:14px; max-width:640px; }
.form-notice.success { background:rgba(0,237,153,0.10); border:1px solid var(--accent); color:var(--text); }
.form-notice.error { background:rgba(255,90,90,0.08); border:1px solid #ff5a5a; color:var(--text); }

.foot-newsletter-band {
  display:flex; align-items:center; justify-content:flex-end; gap:64px; flex-wrap:wrap;
  padding:36px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.foot-newsletter-band > div:first-child { flex:0 1 auto; min-width:260px; max-width:400px; }
.foot-newsletter-label { font-family:'Raleway',sans-serif; font-weight:600; font-size:19px; color:var(--text); display:block; margin-bottom:6px; }
.foot-newsletter-desc { font-size:14px; color:var(--text); opacity:0.75; max-width:44ch; }
.foot-newsletter-form-wrap { flex-shrink:0; }
.newsletter-form { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.newsletter-form input[type=email] {
  min-width:260px; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 16px; color:var(--text); font-family:inherit; font-size:14px; transition:border-color 0.2s;
}
.newsletter-form input[type=email]:focus { outline:none; border-color:var(--accent); }
.newsletter-form input[type=email]::placeholder { color:var(--text-muted); opacity:1; }
.newsletter-note { font-size:14px; color:var(--text); }
@media (max-width:640px) { .newsletter-form input[type=email] { min-width:0; width:100%; } .newsletter-form { width:100%; } .newsletter-form .btn { width:100%; text-align:center; } }
@media (max-width:640px) { .contact-form .form-row { grid-template-columns:1fr; } }
.foot-related-link { font-family:'Raleway',sans-serif; font-size:15px; font-weight:600; color:var(--text); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; transition:color 0.2s, border-color 0.2s; }
.foot-related-link:hover { color:var(--accent); border-color:var(--accent); }
.insights-newsletter-strip {
  display:flex; align-items:center; justify-content:flex-start; gap:20px; flex-wrap:wrap;
  padding:24px 28px; margin-bottom:60px; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-lg);
}
.insights-newsletter-strip div { font-size:16px; color:var(--text); }
@media (max-width:600px) { .insights-newsletter-strip { flex-direction:column; align-items:flex-start; } }

/* Long-form article content: reference tables and callout boxes
   (used by the EU evidence-governance white paper and similar pieces). */
.bc-wp-table-wrap{overflow-x:auto;margin:28px 0;}
.bc-wp-table{width:100%;border-collapse:collapse;font-size:15px;}
.bc-wp-table th,.bc-wp-table td{border:1px solid rgba(255,255,255,0.12);padding:12px 14px;text-align:left;vertical-align:top;}
.bc-wp-table thead th{background:rgba(0,237,153,0.08);color:var(--accent);font-weight:600;}
.bc-wp-callout{border:1px solid rgba(0,237,153,0.3);border-left:4px solid var(--accent);border-radius:6px;padding:20px 24px;margin:28px 0;background:rgba(0,237,153,0.04);}
.bc-wp-callout-label{font-weight:600;margin-bottom:10px;color:var(--accent);}
.bc-wp-callout ul{margin:0;padding-left:20px;}
.bc-wp-callout li{margin-bottom:8px;}
.bc-wp-meta{opacity:0.7;font-size:14px;}

/* Reading time badge, shown alongside the date on article cards and headers. */
.bc-read-time{white-space:nowrap;}
.bc-read-time::before{content:"\00b7";margin:0 6px;opacity:0.6;}

/* Policy & Regulatory Landscape: single-column entry list, jurisdiction
   cards, and per-entry meta/sources styling. */
.pillars-grid.cols-1{grid-template-columns:1fr;}
.pillars-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:860px){ .pillars-grid.cols-3{grid-template-columns:1fr;} }
.policy-entries .pillar{padding-left:0 !important;padding-right:0 !important;border-right:none !important;}
.policy-entry{border-top:1px solid var(--line);padding-top:36px !important;margin-top:36px;}
.policy-entry:first-child{border-top:none;margin-top:0;padding-top:0 !important;}
.policy-meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:16px;}
.policy-ref,.policy-reviewed{font-size:13px;color:var(--text-muted,#8A97A8);}
.policy-sources{margin-top:20px;font-size:14px;}
.policy-sources ul{margin:8px 0 0;padding-left:20px;}
.policy-sources li{margin-bottom:6px;}
.policy-jurisdiction-cards{gap:24px;}
.policy-card{text-decoration:none;display:block;border:1px solid var(--line);border-radius:var(--radius-lg,10px);padding:28px !important;transition:border-color .2s,transform .2s;}
.policy-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.policy-card .eco-tag{margin-bottom:12px;display:inline-block;}
.prose a.btn-primary,.bc-wp-callout a.btn-primary{color:var(--ink) !important;}

/* =====================================================================
   THE FIVE-STEP MODEL — 01 Connect / 02 Structure / 03 Link /
   04 Authenticate / 05 Verify. Used on the homepage, /technology/,
   /solutions/ and each solution page. Markup comes from
   biochain_five_step_visual() and biochain_render_five_steps() in
   functions.php. The strip below is the interim visual, to be replaced
   by the commissioned artwork; the step names stay as real text either
   way, so search and answer engines can read them.
   ================================================================== */

.bc-steps {
  display: flex; align-items: stretch; justify-content: center;
  flex-wrap: wrap; gap: 10px; margin: 0 0 56px;
}
.bc-step {
  flex: 1 1 150px; min-width: 132px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 18px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  transition: border-color .2s ease, background .2s ease;
}
.bc-step-num {
  font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: 0.1em; color: var(--accent);
}
.bc-step-name {
  font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text); line-height: 1.35;
}
/* 04 Authenticate carries the governance layer, so it is the emphasised
   step in every rendering of the model. */
.bc-step.is-emphasis {
  background: var(--accent-dim);
  border-color: rgba(0, 237, 153, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 237, 153, 0.12);
}
.bc-step-arrow {
  align-self: center; flex: 0 0 auto;
  width: 24px; color: var(--text-dim);
}
.bc-step-arrow svg { width: 24px; height: 12px; }

/* compact variant for the narrow solution-page column */
.bc-steps--compact { gap: 8px; margin-bottom: 32px; }
.bc-steps--compact .bc-step { padding: 14px 12px; min-width: 104px; flex-basis: 104px; gap: 5px; }
.bc-steps--compact .bc-step-num,
.bc-steps--compact .bc-step-name { font-size: 11px; letter-spacing: 0.1em; }
.bc-steps--compact .bc-step-arrow { width: 16px; }
.bc-steps--compact .bc-step-arrow svg { width: 16px; }

/* Stacked: the arrows turn downward so the sequence still reads as one. */
@media (max-width: 860px) {
  .bc-steps { flex-direction: column; align-items: stretch; gap: 8px; }
  .bc-step, .bc-steps--compact .bc-step { flex: 1 1 auto; min-width: 0; }
  .bc-step { flex-direction: row; align-items: baseline; gap: 12px; }
  .bc-step-arrow { transform: rotate(90deg); }
}

/* the five short definitions (homepage) */
.bc-step-defs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.bc-step-def { padding: 0 26px; border-left: 1px solid var(--line); }
.bc-step-def:first-child { padding-left: 0; border-left: none; }
.bc-step-def:last-child { padding-right: 0; }
.bc-step-def-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.bc-step-def-num {
  font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 0.1em; color: var(--accent);
}
.bc-step-def-name {
  font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}
.bc-step-def p { font-size: 14.5px; line-height: 1.65; color: var(--text); opacity: 0.85; margin: 0; }
.bc-step-def.is-emphasis .bc-step-def-name { color: var(--accent); }

@media (max-width: 1100px) {
  .bc-step-defs { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .bc-step-def:nth-child(odd) { padding-left: 0; border-left: none; }
}
@media (max-width: 680px) {
  .bc-step-defs { grid-template-columns: 1fr; gap: 28px; }
  .bc-step-def { padding: 0; border-left: none; }
}

/* the canonical long-form steps on /technology/ */
.bc-step-full { border-top: 1px solid var(--line); padding: 36px 0 0; margin-top: 36px; }
.bc-step-full:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.bc-step-full-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.bc-step-full-num {
  font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: 15px; letter-spacing: 0.1em; color: var(--accent);
}
.bc-step-full-name {
  font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text);
}
.bc-step-full p { font-size: 16px; line-height: 1.7; color: var(--text); opacity: 0.85; margin: 0 0 1.1rem; }
.bc-step-full .bc-step-records {
  font-size: 14.5px; opacity: 1; color: var(--text);
  border-left: 2px solid var(--accent); padding-left: 18px; margin-top: 4px;
}
.bc-step-full .bc-step-records strong { color: var(--accent); font-weight: 600; }

/* what verification proves — the five-way distinction */
.bc-proves { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 8px; }
.bc-proves-item { padding: 0 24px; border-left: 1px solid var(--line); }
.bc-proves-item:first-child { padding-left: 0; border-left: none; }
.bc-proves-term {
  font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--accent); margin-bottom: 4px;
}
.bc-proves-q { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.bc-proves-item p { font-size: 14.5px; line-height: 1.65; color: var(--text); opacity: 0.85; margin: 0; }
/* accuracy is the one The BioChain cannot evidence, and is marked as such */
.bc-proves-item.is-excluded .bc-proves-term { color: var(--text-muted); }
@media (max-width: 1100px) {
  .bc-proves { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .bc-proves-item:nth-child(odd) { padding-left: 0; border-left: none; }
}
@media (max-width: 680px) {
  .bc-proves { grid-template-columns: 1fr; gap: 26px; }
  .bc-proves-item { padding: 0; border-left: none; }
}

/* the line that gets repeated sitewide */
.bc-verify-line {
  font-size: 19px; line-height: 1.6; font-weight: 600; color: var(--text);
  border-left: 3px solid var(--accent); padding: 6px 0 6px 24px;
  max-width: 62ch; margin: 40px 0 0;
}
.bc-verify-line--centred { margin: 48px auto 0; }

/* what The BioChain does not require */
.bc-not-required { list-style: none; margin: 0; padding: 0; max-width: 90ch; }
.bc-not-required li {
  position: relative; padding: 16px 0 16px 34px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px; line-height: 1.65; color: var(--text); opacity: 0.9;
}
.bc-not-required li:last-child { border-bottom: none; }
.bc-not-required li::before {
  content: ""; position: absolute; left: 4px; top: 25px;
  width: 14px; height: 2px; background: var(--accent); border-radius: 2px;
}

/* per-sector block inside the solution pages' prose column */
.bc-sector-steps { margin: 44px 0; }
.bc-sector-steps h2 { font-size: 24px; margin: 0 0 12px; }
.bc-sector-lede { font-size: 15px; color: var(--text-muted); margin: 0 0 28px !important; }
.bc-sector-list { margin: 0; }
.bc-sector-term {
  font-family: 'Raleway', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text); margin-top: 22px;
}
.bc-sector-list dt:first-child { margin-top: 0; }
.bc-sector-num { color: var(--accent); margin-right: 4px; }
.bc-sector-term.is-emphasis { color: var(--accent); }
.bc-sector-list dd {
  margin: 7px 0 0; font-size: 15.5px; line-height: 1.7;
  color: var(--text); opacity: 0.85;
}
.bc-sector-note {
  font-size: 15px; border-left: 2px solid var(--accent);
  padding-left: 18px; margin: 28px 0 0 !important; color: var(--text);
}
.bc-sector-cta { margin: 24px 0 0 !important; font-size: 14px; }
.bc-sector-cta a { color: var(--accent); font-weight: 600; }
.bc-sector-cta a:hover { color: var(--accent-2); }

/* the connecting strip on the solutions index */
.bc-model-strip { text-align: center; margin-bottom: 64px; }
.bc-model-strip h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 28px; }
.bc-model-strip .bc-steps { margin-bottom: 28px; }
.bc-model-strip p {
  max-width: 78ch; margin: 0 auto; font-size: 16px;
  line-height: 1.7; color: var(--text); opacity: 0.85;
}

/* FAQ page */
.bc-faq-group { margin-top: 56px; }
.bc-faq-group:first-of-type { margin-top: 0; }
.bc-faq-label {
  font-family: 'Raleway', sans-serif; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent); margin-bottom: 20px;
}

/* "In practice" inset: the running ancient-DNA chain, shown against each
   step so the canonical explanation carries evidence inline. */
.bc-step-example {
  margin: 4px 0 8px; padding: 18px 22px;
  background: var(--accent-dim);
  border: 1px solid rgba(0, 237, 153, 0.28);
  border-radius: var(--radius-lg);
}
.bc-step-example-label {
  font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent); margin-bottom: 8px;
}
.bc-step-example p { font-size: 15px; line-height: 1.65; margin: 0 !important; opacity: 1 !important; }

/* ── Smart Data response reader ─────────────────────────────────────── */
.bc-reader-meta{display:flex;flex-wrap:wrap;gap:40px;margin:0 0 28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.bc-reader-meta span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}
.bc-reader-meta strong{font-weight:600;font-size:15px;color:var(--text)}
.bc-reader-note{max-width:70ch;color:var(--text-muted);font-size:16px;line-height:1.7;margin:0 0 32px}
.bc-reader-note a{color:var(--accent)}
.bc-reader{width:100%;min-height:760px;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.bc-reader-fallback{margin:18px 0 0;font-size:14px;color:var(--text-dim)}
.bc-reader-fallback a{color:var(--accent)}
@media(max-width:860px){.bc-reader{min-height:520px}.bc-reader-meta{gap:24px}}

/* The registration number is the thing a due-diligence reader checks, so
   it is shown in full and visibly linked to the Companies House record,
   rather than hidden behind the company name. */
.foot-company-no { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.foot-company-no:hover { color:var(--accent); }