:root {
    --ink: #152a46;
    --ink-soft: #2D3C56;
    --ink-deep: #0C1B35;
    --accent: #5c73af;
    --accent-dark: #4A5F96;
    --accent-light: #85bfe7;
    --accent-wash: #E8EEF4;
    --muted: #3D4D68;
    --bg: #FFFFFF;
    --bg-alt: #F4F7FB;
    --card: #FAFBFD;
    --line: #D4DDE7;
    --line-soft: #E8EEF4;
    --matrix-tint: #C9DBF0;
    --matrix-services-bg: #EEF2F8;
    --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
    --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --shadow-sm: 0 1px 2px rgba(12,27,53,.04), 0 2px 8px rgba(12,27,53,.04);
    --shadow-md: 0 2px 6px rgba(12,27,53,.06), 0 12px 40px rgba(12,27,53,.08);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
  body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    font-size: 17px;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }

  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
    display: inline-block;
  }
  .eyebrow::before { content: "— "; color: var(--muted); }
  /* Centered section headers get a matching dash on the right */
  .section-head.center .eyebrow::after,
  .levers-head .eyebrow::after,
  .howitworks-head .eyebrow::after {
    content: " —";
    color: var(--muted);
  }
  /* Right-aligned eyebrows: dash only on the right */
  .eyebrow.right::before { content: none; }
  .eyebrow.right::after { content: " —"; color: var(--muted); }
  h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.08; color: var(--ink); text-wrap: balance; }
  h1 { font-size: clamp(2.2rem, 4.6vw, 4.1rem); }
  h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
  h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }

  /* Lead style — italic removed, stays as refined serif but upright */
  .lead {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    line-height: 1.45;
    color: var(--ink-soft);
  }

  .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
  .container-narrow { max-width: 960px; margin: 0 auto; padding: 0 28px; }

  /* Nav */
  .nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
  .logo-img { height: 36px; width: auto; display: block; }
  .nav-links { display: flex; gap: 28px; align-items: center; font-size: 14.5px; }
  .nav-links > a, .nav-links > .nav-group > span { color: var(--ink-soft); transition: color .2s; cursor: pointer; }
  .nav-links > a:hover, .nav-links > .nav-group > span:hover { color: var(--accent); }
  .nav-group { position: relative; }
  .nav-group > span { display: inline-flex; align-items: center; gap: 4px; }
  .nav-group > span::after {
    content: ""; width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
  }
  .nav-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: white;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    padding: 10px;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav-group:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .nav-dropdown a { display: block; padding: 10px 14px; font-size: 14px; color: var(--ink-soft); border-radius: 3px; transition: all .15s; }
  .nav-dropdown a:hover { background: var(--accent-wash); color: var(--accent); }
  .nav-cta { background: transparent; color: var(--ink) !important; padding: 10px 20px; border-radius: 100px; font-weight: 500; transition: all .2s; border: 1px solid var(--ink); }
  .nav-cta:hover { background: var(--ink); color: white !important; }
  .lang-switch {
    display: flex; gap: 2px; font-size: 12px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
    padding: 0 14px;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    margin: 0 4px;
  }
  .lang-switch a { padding: 4px 6px; }
  .lang-switch a.active { color: var(--ink); font-weight: 600; }
  .menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--ink); }
  @media (max-width: 960px) {
    .nav-links > a:not(.nav-cta), .nav-group, .lang-switch { display: none; }
    .menu-btn { display: block; }
  }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px; border-radius: 100px;
    font-weight: 500; font-size: 15px;
    transition: all .2s ease; cursor: pointer;
    border: 1px solid transparent;
    font-family: var(--sans);
  }
  .btn-primary { background: transparent; color: var(--ink); border-color: var(--ink); }
  .btn-primary:hover { background: var(--ink); color: white; transform: translateY(-1px); }
  .btn-dark { background: var(--ink); color: white; }
  .btn-dark:hover { background: var(--accent); }
  .btn-light { background: transparent; color: white; border-color: rgba(255,255,255,.5); }
  .btn-light:hover { background: white; color: var(--ink); border-color: white; }

  .arrow-circle {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent-light); color: var(--ink);
    display: grid; place-items: center;
    transition: all .2s;
    margin-left: 4px; margin-right: -8px;
  }
  .btn:hover .arrow-circle { transform: translateX(3px); }

  /* Hero */
  .hero { padding: clamp(56px, 8vw, 100px) 0 clamp(56px, 7vw, 90px); position: relative; overflow: hidden; }
  .hero::before {
    content: ""; position: absolute;
    top: -180px; right: -100px;
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(92,115,175,.10) 0%, transparent 65%);
    pointer-events: none;
  }
  .hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; gap: 44px; } }
  .hero h1 { margin-bottom: 30px; }
  .hero-sub {
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    color: var(--ink-soft);
    line-height: 1.55;
    max-width: 52ch;
    margin-bottom: 18px;
  }
  .hero-sub-small {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
    max-width: 52ch;
    margin-bottom: 36px;
  }
  .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

  /* Hero image — displays the video thumbnail (eventual: <video>) */
  .hero-media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
  }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; }

  /* CRG badge — "A [logo] Business" inline */
  .crg-badge {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .crg-badge img {
    height: 20px;
    width: auto;
    display: block;
  }

  section { padding: clamp(72px, 9vw, 120px) 0; }
  .section-head { max-width: 760px; margin-bottom: 56px; }
  .section-head h2 { margin: 16px 0 18px; }
  .section-head .lead { max-width: 68ch; }
  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  /* Compact modifier — opt in for smaller, accent-blue sub-section headings (Tier B). */
  .section-head.compact h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    color: var(--accent);
    letter-spacing: -0.005em;
    line-height: 1.2;
  }
  .section-head.center .lead { margin-left: auto; margin-right: auto; }

  /* Matrix */
  .approach { background: var(--bg-alt); }
  .matrix { background: transparent; border: none; box-shadow: none; overflow: visible; }

  /* Column headers — mid-blue band edge-to-edge including over rail corner */
  .matrix-headers { display: grid; grid-template-columns: 32px repeat(4, 1fr); gap: 8px; margin-bottom: 8px; background: transparent; }
  .matrix-headers > div { color: white; padding: 14px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: center; }
  .matrix-headers .matrix-headers-corner { padding: 0; background: transparent; }
  .matrix-headers > div:not(.matrix-headers-corner) { background: var(--accent); border-radius: 8px; }

  /* Challenges row — navy rail (rotated label) starts here */
  .matrix-challenges { display: grid; grid-template-columns: 32px repeat(4, 1fr); gap: 8px; margin-bottom: 8px; background: transparent; }
  .matrix-challenges > div:not(.matrix-rowlabel) { padding: 16px 14px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); background: white; border-radius: 8px; }

  /* Shared rotated rail label — dark navy default (used by OUR SERVICES) */
  .matrix-rowlabel {
    background: var(--ink-deep);
    color: white;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-right: none;
  }
  /* CHALLENGES rail — slightly darker than the header band for visual separation */
  .matrix-challenges .matrix-rowlabel { background: var(--accent-dark); }

  /* Services area — single grid: navy rail spans 4 rows, 4 service columns */
  .matrix-services { display: grid; grid-template-columns: 32px repeat(4, 1fr); gap: 8px; background: transparent; }
  .matrix-services .matrix-rowlabel-tall { grid-row: span 4; }

  .matrix-cell {
    position: relative;
    background: white;
    border-radius: 8px;
    margin: 8px;
    background: white;
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 12px;
    font-size: 12.5px;
    text-align: center;
    line-height: 1.3;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Anchor resets — matrix-cell is now <a>, links to a service / product. */
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
  }
  .matrix-cell:hover {
    background: var(--matrix-tint);
    border-color: var(--ink);
    transform: translateY(-1px);
  }
  .matrix-cell:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  .matrix-cell-tint {
    background: var(--matrix-tint);
    font-weight: 600;
  }
  .matrix-cell-span2 { grid-column: span 2; }
  .matrix-cell-empty { /* placeholder col 4 row 4 */ }

  .matrix-legend {
    margin: 8px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-soft);
  }
  .matrix-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--matrix-tint);
    border: 1px solid var(--accent);
    border-radius: 3px;
    flex-shrink: 0;
  }

  /* Matrix summary — italic removed */
  .matrix-summary {
    margin-top: 36px;
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 68ch;
  }
  .matrix-summary strong { color: var(--accent); font-family: var(--sans); font-weight: 700; font-size: 1.05rem; }

  @media (max-width: 900px) {
    .matrix { border: none; background: transparent; box-shadow: none; }
    .matrix-headers, .matrix-challenges, .matrix-services { display: none; }
    .matrix-body { display: flex; flex-direction: column; gap: 18px; }
    .matrix-col { background: white; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
    .matrix-col-header { background: var(--accent); color: white; padding: 18px 22px; font-size: 14px; font-weight: 600; line-height: 1.3; }
    .matrix-col-challenge { padding: 18px 22px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
    .matrix-col-services { padding: 18px 22px; background: var(--accent-wash); }
    .matrix-col-services-label { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
    .matrix-col-services ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .matrix-col-services li { font-size: 14.5px; padding-left: 14px; position: relative; }
    .matrix-col-services li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
    .matrix-col-services li.quick-win { font-weight: 700; }
    /* List items wrap a link to the corresponding service/product page. */
    .matrix-col-services li a {
      color: inherit;
      text-decoration: none;
      transition: color .15s ease;
    }
    .matrix-col-services li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
    .matrix-col-services li a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
    .matrix-mobile-extras { display: flex; flex-direction: column; gap: 10px; padding: 16px 22px; background: white; border: 1px solid var(--line); border-radius: 6px; margin-top: 6px; }
    .matrix-mobile-extras .legend { font-size: 13px; color: var(--ink-soft); }
    .matrix-desktop { display: none; }
  }
  @media (min-width: 901px) { .matrix-mobile { display: none; } }

  /* Modules */
  .modules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  @media (max-width: 1000px) { .modules-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .modules-grid { grid-template-columns: 1fr; } }
  .module { background: white; padding: 34px 28px 30px; display: flex; flex-direction: column; gap: 18px; transition: background .25s; position: relative; }
  .module:hover { background: var(--bg-alt); }
  .module-icon { width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 6px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); }
  .module h3 { font-size: 1.12rem; color: var(--ink); }
  .module p { font-size: 14.5px; color: var(--muted); line-height: 1.55; flex-grow: 1; }
  .module-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--line-soft); padding-top: 14px; transition: color .2s; }
  .module-link:hover { color: var(--accent); }
  .module-link .arrow-circle { width: 22px; height: 22px; background: var(--accent-light); margin: 0; }
  /* Module number — italic removed */
  .module-num {
    position: absolute; top: 18px; right: 22px;
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--muted);
    opacity: .55;
  }

  /* Marquee */
  .marquee {
    position: relative;
    overflow: hidden;
    margin-bottom: 64px;
    padding: 8px 0;
    background: var(--bg-alt);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .marquee-track { display: flex; gap: 72px; width: max-content; animation: marquee-scroll 48s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .marquee { -webkit-mask-image: none; mask-image: none; }
  }
  .marquee-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 50px; min-width: 120px; padding: 0 8px; background: var(--bg-alt); }
  .marquee-item img { max-height: 100%; max-width: 160px; width: auto; height: auto; object-fit: contain; display: block; mix-blend-mode: multiply; }
  .marquee-item.tall img { max-height: 48px; }
  .marquee-item.medium img { max-height: 38px; }

  /* Testimonials */
  .testimonials { padding-top: clamp(64px, 8vw, 100px); background: var(--bg-alt); }
  .quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 900px) { .quotes-grid { grid-template-columns: 1fr; } }
  .quote { background: white; border: 1px solid var(--line); border-radius: 6px; position: relative; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
  .quote-illustration {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-bottom: 1px solid var(--line-soft);
    overflow: hidden;
    background: var(--accent-wash);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .quote-illustration img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.1); }
  .quote-body { padding: 76px 30px 28px; position: relative; display: flex; flex-direction: column; flex-grow: 1; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
  .quote-body::before { content: "\201C"; position: absolute; top: 14px; left: 22px; font-family: Georgia, "Times New Roman", serif; font-size: 4.2rem; color: var(--accent); line-height: 1; opacity: .6; }
  /* Testimonial quote — italic KEPT (only place with italics) */
  .quote p {
    font-family: var(--serif);
    font-size: 1.1rem;
    line-height: 1.45;
    color: var(--ink);
    margin-bottom: 24px;
    flex-grow: 1;
    font-style: italic;
  }
  .quote-author { padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--muted); }
  .quote-author strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 3px; font-size: 14px; }

  /* Lead magnet */
  .guide { background: var(--bg); }
  .guide-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
  @media (max-width: 900px) { .guide-inner { grid-template-columns: 1fr; gap: 48px; } }
  .guide-text h2 { margin: 16px 0 22px; }
  .guide-text p { color: var(--ink-soft); margin-bottom: 22px; font-size: 1rem; line-height: 1.6; max-width: 52ch; }
  .guide-text .btn { margin-top: 12px; }
  .guide-visual { display: grid; place-items: center; position: relative; min-height: 360px; }
  .guide-book {
    width: 320px;
    max-width: 100%;
    aspect-ratio: 806 / 1076;
    border-radius: 3px 6px 6px 3px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(12,27,53,.20), 0 10px 25px rgba(12,27,53,.10);
    transform: rotate(-1.5deg);
    transition: transform .4s ease;
  }
  .guide-book img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .guide-book:hover { transform: rotate(0deg) scale(1.03); }

  /* FAQ */
  .faq-section { background: var(--accent-wash); }
  .faq-list { border-top: 1px solid var(--line); }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item summary { padding: 26px 0; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: baseline; list-style: none; transition: color .2s; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { color: var(--accent); }
  /* FAQ number — italic removed */
  .faq-num {
    font-family: var(--serif);
    color: var(--accent);
    font-size: 1.3rem;
    min-width: 30px;
  }
  .faq-q { font-family: var(--serif); font-size: clamp(1.18rem, 1.8vw, 1.45rem); line-height: 1.3; color: var(--ink); transition: color .2s; }
  .faq-item summary:hover .faq-q { color: var(--accent); }
  .faq-plus { width: 22px; height: 22px; position: relative; flex-shrink: 0; transition: transform .3s; }
  .faq-plus::before, .faq-plus::after { content: ""; position: absolute; background: var(--ink); top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .faq-plus::before { width: 16px; height: 1.5px; }
  .faq-plus::after { width: 1.5px; height: 16px; transition: transform .3s; }
  .faq-item[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
  .faq-a { padding: 0 24px 30px 54px; color: var(--ink-soft); line-height: 1.65; max-width: 76ch; font-size: 1rem; }
  @media (max-width: 600px) {
    .faq-item summary { grid-template-columns: auto 1fr auto; gap: 12px; }
    .faq-a { padding-left: 44px; padding-right: 0; }
  }

  /* Final CTA */
  .final-cta { background: var(--ink-deep); color: white; position: relative; overflow: hidden; }
  .final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 30%, rgba(92,115,175,.3) 0%, transparent 50%), radial-gradient(circle at 15% 80%, rgba(133,191,231,.18) 0%, transparent 50%); pointer-events: none; }
  .final-cta-inner { position: relative; text-align: center; max-width: 780px; margin: 0 auto; }
  .final-cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .final-cta h2 { color: white; margin-bottom: 24px; }
  .final-cta p { color: rgba(255,255,255,.75); font-size: 1.1rem; margin-bottom: 36px; line-height: 1.55; }

  /* Footer */
  footer { padding: 56px 0 38px; background: white; border-top: 1px solid var(--line); }
  .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
  .footer-links { display: flex; gap: 28px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
  .footer-links a:hover { color: var(--accent); }
  .footer-copy { font-size: 13px; color: var(--muted); }

  @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  .hero h1, .hero-sub, .hero-sub-small, .hero-ctas, .hero-media, .crg-badge { animation: riseIn .8s ease both; }
  .hero-sub { animation-delay: .08s; }
  .hero-sub-small { animation-delay: .14s; }
  .hero-ctas { animation-delay: .22s; }
  .hero-media { animation-delay: .18s; }
  .crg-badge { animation-delay: .32s; }

  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }
/* ==========================================================================
   PRODUCT PAGE STYLES — added for interchange-tracking, interchange-for-
   issuers, and interchange-for-acquirers pages. Safe to add: nothing above
   this line was modified.
   ========================================================================== */

/* Banner hero — illustrated background image with page title overlay.
   Used on Interchange Tracking (splitter), Issuers page, Acquirers page.
   The image is set via inline style on the element so each page can
   specify its own banner. Falls back to a navy gradient if missing. */
.banner-hero {
  position: relative;
  height: clamp(180px, 22vw, 280px);
  background: linear-gradient(135deg, var(--accent) 0%, var(--ink) 60%, var(--ink-deep) 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 0 0 36px 0;
  overflow: hidden;
}
.banner-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(12,27,53,.55) 0%, rgba(12,27,53,.15) 60%, transparent 100%);
  pointer-events: none;
}
.banner-hero-dark::after {
  background: linear-gradient(to right, rgba(12,27,53,.78) 0%, rgba(12,27,53,.5) 60%, rgba(12,27,53,.3) 100%);
}
.banner-hero .container { position: relative; z-index: 1; width: 100%; }
.banner-hero h1 {
  color: white;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 400;
  line-height: 1.05;
  text-shadow: 0 2px 20px rgba(12,27,53,.3);
}
/* Banner placeholder label — shows in placeholders until real image is added */
.banner-hero.placeholder::before {
  content: "[ banner image placeholder ]";
  position: absolute;
  top: 14px; right: 18px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  z-index: 2;
}

/* Intro block — headline + bullets + bold closer, two-column on desktop */
.intro-block {
  padding: clamp(56px, 7vw, 100px) 0;
}
.intro-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 820px) { .intro-inner { grid-template-columns: 1fr; } }
.intro-headline {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.2;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.intro-body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.intro-body li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.intro-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.intro-body .closer,
.intro-text .closer {
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}
.intro-text ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0 24px;
}
.intro-text li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.intro-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* Economics of Interchange Fees diagram (issuer/acquirer pages) */
.economics-diagram {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px 28px 30px;
  box-shadow: var(--shadow-sm);
}
.economics-header {
  text-align: center;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
}
.economics-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  display: block;
  line-height: 1.2;
}
.economics-sub {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.economics-body {
  display: grid;
  grid-template-columns: 130px 70px 1fr;
  gap: 6px;
  align-items: start;
}
@media (max-width: 720px) {
  .economics-body { grid-template-columns: 1fr; gap: 24px; }
  .economics-connectors { display: none; }
  .economics-points { height: auto !important; }
}
.economics-stack { display: flex; flex-direction: column; align-items: center; }
.stack-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 120px;
  border-radius: 4px;
  overflow: hidden;
}
.stack-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.stack-margin    { background: var(--accent-light); color: var(--ink-deep); height: 40px; }
.stack-network   { background: var(--accent);       color: white;            height: 80px; }
.stack-interchange { background: var(--ink);        color: white;            height: 260px; }
.stack-caption {
  margin-top: 16px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  font-weight: 600;
  max-width: 120px;
}
.economics-connectors {
  width: 100%;
  height: 380px;
  align-self: start;
}
.economics-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 380px;
  gap: 10px;
}
.economics-points li {
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 12px 14px;
  flex: 1;
  display: flex;
  align-items: center;
}
.economics-points p {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}

/* Splitter page — two large cards side by side */
.splitter-section { padding: clamp(56px, 7vw, 100px) 0; }
.splitter-section .section-head { text-align: center; margin-left: auto; margin-right: auto; }
.splitter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 720px) { .splitter-grid { grid-template-columns: 1fr; } }
.splitter-card {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all .25s ease;
}
.splitter-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-light);
}
.splitter-card-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
}
.splitter-card-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--accent-wash);
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  margin-bottom: 24px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.splitter-card-image::after { content: "[ illustration ]"; opacity: .6; }
.splitter-card-image[style*="background-image"]::after { display: none; }
.splitter-card p {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

/* 6-tile dark grid — used on both Issuers and Acquirers (and Network Compliance later) */
.levers-section { padding: clamp(56px, 7vw, 100px) 0 clamp(32px, 4vw, 56px); background: var(--bg-alt); }
.levers-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}
.levers-head .eyebrow { display: inline-block; }
.levers-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  color: var(--accent);
  line-height: 1.2;
  margin-top: 14px;
}
.levers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .levers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .levers-grid { grid-template-columns: 1fr; } }
.lever-tile {
  background: var(--ink-deep);
  color: white;
  padding: 32px 28px;
  min-height: 300px;
  border-radius: 6px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background-color .3s ease;
  cursor: default;
}
.lever-tile:hover { background: var(--accent); }
.lever-num {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.9);
  margin-bottom: 16px;
}
.lever-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  color: white;
}
.lever-desc {
  margin-top: auto;
  padding-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: white;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.lever-tile:hover .lever-desc { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .lever-tile { background: var(--accent); }
  .lever-desc { opacity: 1; transform: none; }
}

/* Platform / "How it works" block — image placeholder + copy + bullets + button */
.platform-section { padding: clamp(56px, 7vw, 100px) 0; background: var(--bg); }
.platform-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .platform-inner { grid-template-columns: 1fr; } }
.platform-visual {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #cfdef3 0%, #e8f2fb 100%);
  background-size: cover;
  background-position: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
}
.platform-visual::after { content: "[ platform screenshot placeholder ]"; opacity: .7; }
.platform-visual[style*="background-image"] { border: none; padding: 0; }
.platform-visual[style*="background-image"]::after { display: none; }
.platform-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--accent);
  margin-bottom: 22px;
}
.platform-text > p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 22px;
}
.platform-text ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}
.platform-text li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.platform-text li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.platform-text li strong { color: var(--ink); font-weight: 600; }

/* "How It Works" sub-heading — appears below platform section on Issuer/Acquirer */
.howitworks-section { padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 56px); background: var(--bg-alt); }
.howitworks-head {
  text-align: center;
  margin-bottom: 48px;
}
.howitworks-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 400;
  color: var(--accent);
  line-height: 1.2;
  margin-top: 14px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.howitworks-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .howitworks-inner { grid-template-columns: 1fr; } }
.howitworks-text h3 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
}
.howitworks-text ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.howitworks-text li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.howitworks-text li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.howitworks-visual {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #cfdef3 0%, #e8f2fb 100%);
  background-size: cover;
  background-position: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
}
.howitworks-visual::after { content: "[ dashboard screenshot placeholder ]"; opacity: .7; }
.howitworks-visual[style*="background-image"] { border: none; padding: 0; }
.howitworks-visual[style*="background-image"]::after { display: none; }

/* "Our Team" block — shared across product pages (illustration + copy + button) */
.team-block { padding: clamp(56px, 7vw, 100px) 0; }
.team-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .team-inner { grid-template-columns: 1fr; } }
.team-text .eyebrow { margin-bottom: 18px; }
.team-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--accent);
  margin-bottom: 28px;
}
.team-text p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.team-image {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.team-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Final CTA section reused on product pages — same as homepage .final-cta but available to all pages. No new rule needed; existing .final-cta class covers it. */

/* ==========================================================================
   Network Fee Tracking page — page-specific components
   ========================================================================== */

/* Story in Numbers diagram (intro block, right column) */
.story-numbers {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 28px 32px;
  box-shadow: var(--shadow-sm);
}
.story-numbers-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink);
  text-align: center;
  margin-bottom: 22px;
  letter-spacing: -0.005em;
}
.story-stat {
  background: var(--bg-alt);
  border-radius: 6px;
  padding: 22px 18px;
  text-align: center;
}
.story-stat-value {
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 6px;
}
.story-stat-suffix {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
  margin-top: 4px;
}
.story-stat-label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
.story-stat-result {
  background: var(--ink);
  color: white;
}
.story-stat-result .story-stat-value { color: white; }
.story-stat-result .story-stat-label { color: white; opacity: 0.92; }
.story-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--accent);
  margin: 8px 0;
  opacity: 0.7;
}

/* 4-Stage Workflow ("The Solution") — open columns with donut visuals */
.workflow-section { padding: clamp(56px, 7vw, 100px) 0; background: var(--bg-alt); }
.workflow-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}
.workflow-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  color: var(--accent);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 1100px) { .workflow-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (max-width: 600px)  { .workflow-grid { grid-template-columns: 1fr; gap: 36px; } }
.workflow-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.workflow-donut {
  width: 88px;
  height: 88px;
  display: block;
  margin: 0 auto;
}
.workflow-title {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-align: center;
  margin-bottom: 4px;
}
.workflow-lead {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--accent);
  font-weight: 500;
}
.workflow-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  flex: 1;
}
.workflow-stat {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.workflow-stat em {
  font-style: italic;
}

/* Sample Benefits grid */
.benefits-section { padding: clamp(56px, 7vw, 100px) 0; background: var(--bg-alt); }
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 600px)  { .benefits-grid { grid-template-columns: 1fr; } }
.benefit-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px 24px;
  border-top: 3px solid var(--accent);
}
/* Animated chart visual at top of each benefit card */
.benefit-chart {
  margin: -10px -8px 18px;
  padding: 8px;
  background: #f8fafd;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.benefit-chart svg { width: 100%; height: auto; display: block; }
.chart-axis {
  font-family: var(--sans);
  font-size: 8px;
  fill: var(--muted);
}
.chart-x-labels text {
  font-family: var(--sans);
  font-size: 8px;
  fill: var(--ink-soft);
  text-anchor: middle;
}
.chart-value {
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
}
/* Bar growth animation — sequential, then hold, then reset and loop */
.chart-bar-item {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: chart-bar-grow 7s ease-out infinite;
  animation-delay: var(--bar-delay, 0s);
}
@keyframes chart-bar-grow {
  0%, 4%   { transform: scaleY(0); }
  22%      { transform: scaleY(1); }
  85%      { transform: scaleY(1); }
  100%     { transform: scaleY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .chart-bar-item { transform: scaleY(1); animation: none; }
}

/* === Fee Movements Detail (table) === */
.chart-th {
  font-family: var(--sans);
  font-size: 7.5px;
  font-weight: 700;
  fill: white;
  letter-spacing: 0.02em;
}
.chart-td {
  font-family: var(--sans);
  font-size: 8px;
  fill: var(--ink);
}
.chart-td-pos { fill: #1f8a4c; font-weight: 700; }
.chart-td-neg { fill: #c0392b; font-weight: 700; }
/* Inline blue bars in the table grow left-to-right, staggered top-to-bottom */
.chart-table-bar {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transform: scaleX(0);
  animation: chart-table-bar-grow 7s ease-out infinite;
  animation-delay: var(--bar-delay, 0s);
}
@keyframes chart-table-bar-grow {
  0%, 4%   { transform: scaleX(0); }
  22%      { transform: scaleX(1); }
  85%      { transform: scaleX(1); }
  100%     { transform: scaleX(0); }
}

/* === Fee Decomposition (tree) — pill bars + text labels below === */
.chart-tree-text-dark {
  font-family: var(--sans);
  font-size: 7.5px;
  font-weight: 500;
  fill: var(--ink);
}
.chart-tree-amt { font-size: 7.5px; font-weight: 600; }
/* Legacy dark-bg text style still used by reduced-motion / fallback — keep until cleanup */
.chart-tree-text-light {
  font-family: var(--sans);
  font-size: 7.5px;
  font-weight: 500;
  fill: var(--ink);
}
/* Tree: gray tracks always visible; only blue fills (.tree-bar) animate, growing left-to-right
   inside their tracks. Connector lines also draw out. Both are staggered when `.is-built` is on
   the SVG; when removed, transition-delay reverts to 0 so all collapse simultaneously. */
.tree-track {
  fill: #e5e9ef;
}
.tree-bar {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transform: scaleX(0);
  transition: transform 0.45s ease-out;
}
.chart-tree-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.45s ease-out;
}
.chart-tree.is-built .tree-bar {
  transform: scaleX(1);
  transition-delay: var(--bar-delay, 0s);
}
.chart-tree.is-built .chart-tree-line {
  stroke-dashoffset: 0;
  transition-delay: var(--line-delay, 0s);
}

/* === Period-on-Period (bar chart with %change labels) === */
.chart-pop-pct {
  font-family: var(--sans);
  font-size: 7.5px;
  font-weight: 700;
}
.chart-pop-pos { fill: #1f8a4c; }
.chart-pop-neg { fill: #c0392b; }
.chart-pop-val {
  font-family: var(--sans);
  font-size: 7.5px;
  font-weight: 600;
  fill: var(--ink);
}
.chart-pop-val-light { fill: white; }

/* Reduced-motion fallback for new chart types */
@media (prefers-reduced-motion: reduce) {
  .chart-table-bar,
  .tree-bar { transform: scaleX(1); animation: none; transition: none; }
  .chart-tree-line { stroke-dashoffset: 0; animation: none; transition: none; }
}
.benefit-title {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.25;
}
.benefit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.benefit-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
}

/* Case Studies grid */
.case-studies-section { padding: clamp(56px, 7vw, 100px) 0; background: var(--bg); }
/* Network Fee Tracking page — scoped section bg overrides for clean alternation.
   Sequence (post-Forecasting addition): intro → workflow(alt) → platform → benefits(alt)
   → case-studies → forecasting(alt) → lead-magnet → team(alt) → final-cta.
   Each rule targets a specific section ID/class so they alternate cleanly
   regardless of HTML order. */
.page-network-fee-tracking #forecasting-accruals { background: var(--bg-alt); }
.page-network-fee-tracking .team-block { background: var(--bg-alt); }
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 760px) { .case-studies-grid { grid-template-columns: 1fr; } }
.case-card {
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.case-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.case-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.case-metric {
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 14px 18px;
}
.case-metric-value {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.01em;
}
.case-metric-suffix {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 4px;
}
.case-metric-pct {
  font-size: 13px;
  margin-top: 6px;
  color: var(--ink);
  font-weight: 600;
}
.case-stats {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Stats callout — sits below case studies */
.stats-callout {
  margin-top: 40px;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 90ch;
  margin-left: auto;
  margin-right: auto;
}
.stats-callout strong {
  color: var(--accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
}

/* Card Network Fees Explained — pre-footer link section */
.explainer-link-section { padding: clamp(48px, 6vw, 80px) 0; }
.explainer-link {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.explainer-link h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  color: var(--accent);
  letter-spacing: -0.005em;
  margin: 14px 0 16px;
}
.explainer-link p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.explainer-link p a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s;
}
.explainer-link p a:hover { color: var(--ink); }

/* ==========================================================================
   Our Team page — components
   ========================================================================== */

/* Team members grid — 4×2 on desktop, 2×4 on tablet, 1 column on mobile */
.team-grid-section {
  padding: clamp(56px, 7vw, 100px) 0;
  background: var(--bg-alt);
}
.team-members-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1000px) { .team-members-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .team-members-grid { grid-template-columns: 1fr; } }

.team-member {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.team-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 8px;
  background: var(--bg-alt);
}
.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Per-photo composition fixes — the source headshots were cropped
   inconsistently (men tight to the head; Emelie/Martha/Max framed
   wider). These transforms equalise the apparent face size and
   centring across the team grid. Scoped to .team-avatar so the
   blog byline avatars and author-bio photo aren't affected. */
.team-avatar img[src*="team-steven"] { transform: scale(1.12) translateX(-3%); }
.team-avatar img[src*="team-emelie"] { transform: scale(1.14); transform-origin: center top; }
.team-avatar img[src*="team-martha"] { transform: scale(1.08) translateX(3%); transform-origin: center top; }
.team-avatar img[src*="team-max"]    { transform: scale(1.65) translateY(-8%); transform-origin: center top; }
.team-avatar img[src*="team-ben"]    { transform: scale(1.25) translateY(-8%); transform-origin: center top; }
.team-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  font-family: var(--sans);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.team-name {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}
.team-role {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}
.team-bio {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Story section — heading + 2 paragraphs, centered text block.
   On Our Team page this is the de-facto hero, so it gets bigger padding,
   a large display headline, and a sizeable knot illustration. */
.story-section {
  padding: clamp(72px, 9vw, 130px) 0 clamp(64px, 8vw, 110px);
  background: var(--bg);
}
.story-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.story-icon {
  display: block;
  width: clamp(280px, 38vw, 480px);
  height: auto;
  margin: 0 auto 28px;
  user-select: none;
  pointer-events: none;
}
.story-headline {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 28px;
}
.story-inner p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 16px;
}
.story-inner p:last-child { margin-bottom: 0; }

/* Global engagements map section (Our Team page) */
.engagements-section {
  padding: clamp(56px, 7vw, 100px) 0;
  background: var(--bg);
}
.engagements-map {
  max-width: 1000px;
  margin: 0 auto;
}
.engagements-map img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* ============================================================
   Contact Us page
   ============================================================ */

/* Two-column contact intro + form */
.contact-section {
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--bg);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(48px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Left column: copy + phone */
.contact-info .eyebrow { margin-bottom: 18px; }
.contact-info h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 24px;
}
.contact-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 52ch;
}
.contact-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  transition: background .2s, border-color .2s, transform .2s;
}
.contact-phone:hover {
  background: white;
  border-color: var(--accent);
  transform: translateY(-1px);
}
.contact-phone-icon {
  color: var(--accent);
  flex-shrink: 0;
}

/* Right column: form */
.contact-form-wrap {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(28px, 4vw, 44px);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.field input,
.field textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(92, 115, 175, 0.18);
}
.contact-submit {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 16px;
  padding: 14px 26px;
}

/* Offices chips — sit inside the contact-info column under the phone.
   US gets the dark "Headquarters" treatment, satellites are pale. */
.contact-offices {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}
.contact-offices-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.contact-offices-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px) {
  .contact-offices-row { grid-template-columns: 1fr; }
}
.contact-office {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 14px;
}
.contact-office.hq {
  background: var(--ink);
  border-color: var(--ink);
}
.contact-office-tag {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.contact-office.hq .contact-office-tag { color: var(--accent-light); }
.contact-office-place {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.15;
  margin: 0;
}
.contact-office.hq .contact-office-place { color: white; font-size: 1.2rem; }
.contact-office-meta {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.contact-office.hq .contact-office-meta { color: var(--accent-light); }

/* Commitment band */
.commitment-section {
  padding: clamp(64px, 8vw, 110px) 0;
  background: var(--bg);
}
.commitment-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.commitment-headline {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 24px;
}
.commitment-statement {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 400;
  color: var(--accent);
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
}
/* Dark variant — matches the live page screenshot */
.commitment-section.commitment-dark {
  background: var(--ink);
}
.commitment-section.commitment-dark .commitment-headline { color: white; }
.commitment-section.commitment-dark .commitment-statement {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  max-width: 68ch;
  margin: 0 auto;
}

/* ============================================================
   Network Compliance Tracking page (Kajo)
   ============================================================ */

/* Intro hero — 2-col with body+CTA on left, screenshot+partnership logo on right */
.ncl-intro {
  padding: clamp(64px, 8vw, 110px) 0;
  background: var(--bg);
}
.ncl-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 980px) {
  .ncl-intro-grid { grid-template-columns: 1fr; gap: 48px; }
}
.ncl-intro-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 24px;
}
.ncl-intro-text p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 18px;
}
.ncl-intro-text p strong { color: var(--ink); font-weight: 700; }
.ncl-intro-tagline {
  font-size: 17px !important;
  color: var(--ink) !important;
}
.ncl-intro-cta {
  margin-top: 16px;
  font-size: 16px;
  padding: 14px 26px;
}
.ncl-intro-visual {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  align-items: center;
}
.ncl-intro-screen {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.ncl-intro-logo {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
}

/* Why It Matters — 2-col text+image */
.ncl-why {
  padding: clamp(64px, 8vw, 110px) 0;
  background: var(--bg-alt);
}
.ncl-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) {
  .ncl-why-grid { grid-template-columns: 1fr; }
  .ncl-why-image { order: -1; max-width: 360px; margin: 0 auto; }
}
.ncl-why-text .section-head { margin-bottom: 28px; max-width: none; }
.ncl-why-text .section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  color: var(--accent);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 14px 0 0;
}
.ncl-why-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Shared bulleted list — used in Why It Matters, The Result, Partnership */
.ncl-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ncl-bullets li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.ncl-bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.ncl-bullets li:last-child { margin-bottom: 0; }

/* What We Offer — 6 numbered cards in a 3x2 grid */
.ncl-offer {
  padding: clamp(64px, 8vw, 110px) 0;
  background: var(--bg);
}
.ncl-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: clamp(40px, 5vw, 64px);
}
@media (max-width: 980px) { .ncl-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ncl-features { grid-template-columns: 1fr; } }
.ncl-feature {
  background: var(--ink-deep);
  color: white;
  padding: 32px 28px;
  min-height: 260px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background-color .3s ease;
  cursor: default;
}
.ncl-feature:hover { background: var(--accent); }
.ncl-feature-num {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
}
.ncl-feature-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  color: white;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
}
.ncl-feature p {
  margin-top: auto;
  padding-top: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: white;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.ncl-feature:hover p { opacity: 1; transform: translateY(0); }
/* Touch-device fallback: show description by default since there's no hover */
@media (hover: none) {
  .ncl-feature { background: var(--accent); }
  .ncl-feature p { opacity: 1; transform: none; }
}

/* Designed For — now a sub-block at the bottom of "What We Offer" */
.ncl-designed-subblock {
  margin-top: clamp(48px, 6vw, 80px);
  text-align: center;
}
.ncl-designed-subblock .eyebrow {
  display: inline-block;
  margin-bottom: 20px;
}
/* Match the centered-eyebrow dash pattern (both sides) */
.ncl-designed-subblock .eyebrow::after {
  content: " —";
  color: var(--muted);
}
.ncl-audience {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.ncl-audience-chip {
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 24px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.005em;
}

/* The Result — 2-col image+text, image LEFT */
.ncl-result {
  padding: clamp(64px, 8vw, 110px) 0;
  background: var(--bg-alt);
}
.ncl-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) {
  .ncl-result-grid { grid-template-columns: 1fr; }
  .ncl-result-image { max-width: 420px; margin: 0 auto; order: -1; }
}
.ncl-result-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.ncl-result-text .section-head { margin-bottom: 28px; max-width: none; }
.ncl-result-text .section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  color: var(--accent);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 14px 0 0;
}

/* Partnership — CRG x Rivero */
.ncl-partnership {
  padding: clamp(64px, 8vw, 110px) 0;
  background: var(--bg);
}
/* Logo lives inside the left text column, top-aligned with the right image */
.ncl-partnership-logo-inline {
  display: block;
  max-width: 260px;
  width: 100%;
  height: auto;
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.ncl-partnership-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .ncl-partnership-grid { grid-template-columns: 1fr; }
  .ncl-partnership-image { max-width: 480px; margin: 0 auto; }
}
.ncl-partnership-text p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 16px;
}
.ncl-partnership-sub {
  font-family: var(--sans);
  font-size: 14px;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  color: var(--ink);
}
.ncl-partnership-close {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
  margin-top: 24px !important;
}
.ncl-partnership-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ============================================================
   Services page
   ============================================================ */

/* Intro hero — dark, flows seamlessly out of the banner above */
.svc-intro {
  padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 8vw, 100px);
  background: var(--bg);
}
.svc-intro.svc-intro-dark {
  background: var(--ink);
}
.svc-intro-headline {
  max-width: 1100px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  color: white;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Horizontal services menu — 6 cells, vertical separators, hover-underline */
/* Services side-nav menu — two independent rows.
   Row 1 (5 items) spans full width.
   Row 2 (4 items) sits centered at ~80% width below a horizontal divider.
   Vertical dividers in each row stop at the row boundary — they do NOT
   continue across rows. */
.svc-menu {
  display: flex;
  flex-direction: column;
}
.svc-menu-row {
  display: grid;
  align-items: stretch;
}
.svc-menu-row-top {
  grid-template-columns: repeat(5, 1fr);
}
.svc-menu-row-bottom {
  grid-template-columns: repeat(4, 1fr);
  width: 80%;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 24px;
  margin-top: 24px;
}
.svc-menu-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 4px 18px 14px;
  gap: 8px;
  text-decoration: none;
  color: white;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  transition: opacity .2s ease;
}
/* Last item in each row has no border-right (right edge of the row). */
.svc-menu-row > .svc-menu-item:last-child { border-right: none; }
.svc-menu-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  line-height: 1.2;
  color: white;
  letter-spacing: -0.005em;
  /* Balance the line breaks so "Network Incentive Agreement Support"
     wraps to 2 even lines (Network Incentive / Agreement Support)
     instead of stacking one word per line. */
  text-wrap: balance;
}
.svc-menu-aud {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(0.78rem, 0.9vw, 0.88rem);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}
/* Animated underline on hover */
.svc-menu-item::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1.5px;
  background: white;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.svc-menu-item:hover::after,
.svc-menu-item:focus-visible::after { transform: scaleX(1); }

/* Responsive: collapse the two-row structure at narrower widths.
   The .svc-menu-row wrappers become display:contents so items flow as a
   single grid; the bottom-row container's width/border styling is reset
   so the horizontal divider doesn't appear in the wrong place. */
@media (max-width: 1100px) {
  .svc-menu { display: grid; grid-template-columns: repeat(3, 1fr); }
  .svc-menu-row { display: contents; }
  .svc-menu-row-bottom {
    width: auto;
    margin: 0;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
  .svc-menu-item:nth-child(3n) { border-right: none; }
  /* Items in row 2+ of the 3-col grid (items 4, 5, 6, 7, 8, 9) get top divider */
  .svc-menu-item:nth-child(n+4) {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
}
@media (max-width: 700px) {
  .svc-menu { grid-template-columns: repeat(2, 1fr); }
  .svc-menu-item {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 24px;
  }
  .svc-menu-item:nth-child(2n) { border-right: none; }
  .svc-menu-item:nth-child(-n+2) { border-top: none; padding-top: 4px; }
}
@media (max-width: 480px) {
  .svc-menu { grid-template-columns: 1fr; }
  .svc-menu-item {
    border-right: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 18px;
  }
  .svc-menu-item:first-child { border-top: none; padding-top: 4px; }
}

/* Service sections — alternating image left/right */
.svc-section {
  padding: clamp(64px, 8vw, 100px) 0;
  background: var(--bg);
  scroll-margin-top: 88px; /* anchor jumps clear the sticky nav */
}
.svc-section:nth-of-type(even) { background: var(--bg-alt); }
.svc-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.svc-flip .svc-grid {
  grid-template-columns: 1.1fr 1fr;
}
.svc-flip .svc-image { order: 2; }
.svc-flip .svc-text { order: 1; }
@media (max-width: 900px) {
  .svc-grid, .svc-flip .svc-grid { grid-template-columns: 1fr; }
  .svc-flip .svc-image { order: -1; max-width: 480px; margin: 0 auto; }
  .svc-flip .svc-text { order: 0; }
  .svc-image { max-width: 480px; margin: 0 auto; }
}

.svc-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.svc-num {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 8px;
}
.svc-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 6px;
}
.svc-audience {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 22px;
}
.svc-overview,
.svc-benefits {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 18px;
}
.svc-stat {
  margin-top: 8px;
  padding: 14px 20px;
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
.svc-stat strong { color: var(--ink); font-weight: 700; }

/* FAQs */
.svc-faqs {
  padding: clamp(64px, 8vw, 100px) 0;
  background: var(--bg-alt);
}
.faq-list {
  max-width: 880px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  transition: color .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-q { color: var(--accent); }
.faq-q { flex: 1; }
.faq-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform .25s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--accent);
  border-radius: 1px;
}
.faq-icon::before {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}
.faq-icon::after {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.faq-item[open] .faq-icon::before { transform: translate(-50%, -50%) scaleY(0); }
.faq-a {
  padding: 0 4px 24px;
}
.faq-a p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  max-width: 70ch;
}

/* ============================================================
   Banner animation — Option E (Ken Burns + text reveal on load)
   Opt-in via .banner-anim modifier on .banner-hero.
   Requires <div class="banner-img-layer"> as first child of the header
   (the bg image goes on this layer so it can be transformed).
   ============================================================ */
@keyframes bannerKenBurns {
  0%   { transform: scale(1.0)  translate(0, 0); }
  50%  { transform: scale(1.18) translate(-3%, -2%); }
  100% { transform: scale(1.0)  translate(0, 0); }
}
@keyframes bannerTextReveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.94);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.banner-anim .banner-img-layer {
  position: absolute;
  inset: -6%;
  background-size: cover;
  animation: bannerKenBurns 22s ease-in-out infinite;
  will-change: transform;
  z-index: 0;
}
.banner-anim h1 {
  animation: bannerTextReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .banner-anim .banner-img-layer,
  .banner-anim h1 { animation: none !important; }
}

/* ============================================================
   Network Fee Explainer (lead magnet page)
   ============================================================ */

/* Visually hidden — for accessible labels */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lead capture — 2 col: text+form on left, cover image on right */
.explainer-capture {
  padding: clamp(56px, 7vw, 100px) 0;
  background: var(--bg);
}
.explainer-capture-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) {
  .explainer-capture-grid { grid-template-columns: 1fr; gap: 40px; }
  .explainer-capture-cover { max-width: 360px; margin: 0 auto; }
}
.explainer-lead {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 60ch;
}
.explainer-capture-cta-text {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.explainer-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.explainer-submit {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 16px;
  padding: 14px 26px;
}
.explainer-consent {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 4px 0 0;
  max-width: 56ch;
}
.explainer-capture-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(12, 27, 53, 0.18), 0 4px 16px rgba(12, 27, 53, 0.08);
}

/* Long-form explainer article */
.explainer-article {
  padding: clamp(56px, 7vw, 100px) 0;
  background: var(--bg-alt);
}
.explainer-article-inner {
  max-width: 760px;
  margin: 0 auto;
}
.explainer-article-inner > .eyebrow {
  display: block;
  margin-bottom: 14px;
}
.explainer-article-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 44px;
}
.explainer-article h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
  margin: 56px 0 18px;
}
.explainer-article h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 32px 0 12px;
}
.explainer-article p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 18px;
}
.explainer-article p strong { font-weight: 700; color: var(--ink); }
.explainer-article ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.explainer-article ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
}
.explainer-article ul li::before {
  content: "";
  position: absolute;
  left: 6px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.explainer-article ul li strong { font-weight: 700; color: var(--ink); }
/* Pull-quote style for the "readiness test" question in the intro */
.explainer-pull {
  font-family: var(--serif) !important;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem) !important;
  font-weight: 400;
  line-height: 1.35 !important;
  color: var(--accent) !important;
  border-left: 3px solid var(--accent);
  padding-left: 22px;
  margin: 24px 0 28px !important;
  text-wrap: balance;
}
/* Accuracy/clarification notes */
.explainer-note {
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  padding: 14px 20px !important;
  border-radius: 4px;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
  margin: 24px 0 !important;
}
.explainer-figure {
  margin: 32px 0;
}
.explainer-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
}

/* FAQ section spacing override for this page */
.explainer-faqs {
  background: var(--bg) !important;
}
.explainer-faqs .section-head { margin-bottom: clamp(32px, 4vw, 48px); }

/* FAQ answers — render multi-paragraph and lists nicely */
.faq-a p { margin-bottom: 12px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a ul { list-style: none; padding: 0; margin: 12px 0; }
.faq-a ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.faq-a ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ============================================================
   Glossary page
   ============================================================ */
.glossary-list-section {
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--bg);
}
.glossary-list {
  max-width: 800px;
  margin: 0;  /* left-align with banner title; right side gets whitespace at wider widths */
  display: flex;
  flex-direction: column;
}
.glossary-term {
  padding: 32px 0;
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 96px;
}
.glossary-term:first-child { padding-top: 0; }
.glossary-term:last-child { border-bottom: none; }
.glossary-term-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 12px;
}
.glossary-term-def {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}

/* ============================================================
   Legal pages (Privacy Policy, Terms and Conditions)
   ============================================================ */
.legal-article {
  padding: clamp(56px, 7vw, 100px) 0 clamp(72px, 9vw, 120px);
  background: var(--bg);
}
.legal-article-inner {
  max-width: 760px;
  margin: 0;  /* left-align with banner title; right side gets whitespace at wider widths */
}
.legal-article h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 48px 0 14px;
}
.legal-article h2:first-child { margin-top: 0; }
.legal-article p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 16px;
}
.legal-article ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.legal-article ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.legal-article ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 10px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.legal-article a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(92, 115, 175, 0.4);
  text-underline-offset: 2px;
}
.legal-article a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* ============================================================
   Thank-you pages (Contact, Explainer)
   ============================================================ */
.thanks-section {
  padding: clamp(72px, 9vw, 130px) 0 clamp(80px, 10vw, 140px);
  background: var(--bg);
}
.thanks-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.thanks-lead {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 36px;
}
.thanks-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 20px;
}
.thanks-sub a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.thanks-sub a:hover { color: var(--ink); }
.thanks-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
}
.thanks-buttons .btn { font-size: 15px; padding: 13px 24px; }
.thanks-download-wrap {
  margin: 8px 0 28px;
  text-align: center;
}
.thanks-download-btn {
  font-size: 17px !important;
  padding: 18px 32px !important;
  background: var(--ink) !important;
  color: white !important;
  border-color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}
.thanks-download-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px);
}
.thanks-download-icon {
  flex-shrink: 0;
  color: white;
}
.thanks-divider {
  border: none;
  border-top: 1px solid var(--line-soft);
  margin: 48px 0 32px;
}

/* ============================================================
   Blog (index + post)
   ============================================================ */

/* === Blog index === */
.blog-index-section {
  padding: clamp(56px, 7vw, 100px) 0;
  background: var(--bg);
}
.blog-index-inner {
  max-width: 800px;
  margin: 0 auto;
}
.blog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.blog-list-item {
  border-bottom: 1px solid var(--line-soft);
  padding: 28px 0;
}
.blog-list-item:first-child { padding-top: 0; }
.blog-list-item:last-child { border-bottom: none; }
.blog-list-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.blog-list-meta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.blog-list-meta-dot { margin: 0 8px; opacity: 0.6; }
.blog-list-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
  transition: color .2s;
}
.blog-list-link:hover .blog-list-title { color: var(--accent); }
.blog-list-excerpt {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.blog-list-readmore {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
  transition: color .2s;
}
.blog-list-link:hover .blog-list-readmore { color: var(--ink); }
.blog-empty {
  text-align: center;
  color: var(--muted);
  padding: 60px 0;
}

/* === Pagination === */
.blog-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 40px 0 0;
  margin-top: 32px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--sans);
  font-size: 14px;
}
.blog-pagination-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.blog-pagination-link:hover:not(.blog-pagination-disabled) {
  background: var(--accent-wash);
  color: var(--ink);
}
.blog-pagination-disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: default;
}
.blog-pagination-pageinfo { color: var(--muted); font-size: 13px; }

/* === Single blog post === */
.blog-post-article {
  padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 8vw, 100px);
  background: var(--bg);
}
.blog-post-inner {
  max-width: 720px;
  margin: 0 auto;
}
.blog-post-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
.blog-post-meta-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.blog-post-meta-dot { margin: 0 6px; opacity: 0.6; }
.blog-post-meta a {
  color: var(--accent);
  text-decoration: none;
}
.blog-post-meta a:hover { color: var(--ink); text-decoration: underline; }
.blog-post-backlink {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.blog-post-backlink:hover { color: var(--ink); }

.blog-post-cover {
  margin: 0 0 36px;
}
.blog-post-cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.blog-post-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
}
.blog-post-body p { margin: 0 0 22px; }
.blog-post-body strong { font-weight: 700; }
.blog-post-body em { font-style: italic; }
.blog-post-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 48px 0 16px;
}
.blog-post-body h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 32px 0 12px;
}
.blog-post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(92, 115, 175, 0.4);
  text-underline-offset: 2px;
}
.blog-post-body a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.blog-post-body ul,
.blog-post-body ol {
  margin: 0 0 22px;
  padding: 0 0 0 24px;
}
.blog-post-body ul li,
.blog-post-body ol li {
  margin-bottom: 10px;
  line-height: 1.7;
}
.blog-post-body ul { list-style: none; padding-left: 0; }
.blog-post-body ul li {
  position: relative;
  padding-left: 24px;
}
.blog-post-body ul li::before {
  content: "";
  position: absolute;
  left: 6px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.blog-post-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin: 28px 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--accent);
}
.blog-post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--ink);
}
.blog-post-body pre {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 24px 0;
  overflow-x: auto;
}
.blog-post-body pre code {
  background: none;
  padding: 0;
  font-size: 14px;
}
.blog-post-body img {
  width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border-radius: 6px;
}
.blog-post-body hr {
  border: none;
  border-top: 1px solid var(--line-soft);
  margin: 36px 0;
}

/* ============================================================
   Homepage video intro section ("A two-minute tour of CardTraq")
   Sits between MODULES and TESTIMONIALS. Click-to-play with
   custom play-button overlay; native browser controls appear
   after first click.
   ============================================================ */
.home-video-section {
  padding: clamp(72px, 9vw, 130px) 0;
  background: var(--ink-deep);
}
.home-video-inner { text-align: center; }
.home-video-section .section-head h2 { color: white; }
.home-video-section .section-head .eyebrow { color: var(--accent-light); }
.home-video-section .section-head .eyebrow::before,
.home-video-section .section-head .eyebrow::after {
  color: var(--accent-light);
}
.home-video-player {
  position: relative;
  max-width: 960px;
  margin: clamp(32px, 4vw, 56px) auto 0;
  aspect-ratio: 16 / 9;
  background: black;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.home-video-player video {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.home-video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  padding-left: 6px;  /* visual centering for play triangle */
  transition: transform .2s ease, background .2s ease;
}
.home-video-play:hover {
  background: white;
  transform: translate(-50%, -50%) scale(1.08);
}
.home-video-play svg { width: 38px; height: 38px; }
@media (max-width: 600px) {
  .home-video-play { width: 64px; height: 64px; }
  .home-video-play svg { width: 28px; height: 28px; }
}

/* LinkedIn icon on team cards — sits at the bottom of each card, pushes
   itself to the bottom so cards with shorter bios still align nicely. */
.team-linkedin {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--accent);
  background: var(--bg-alt);
  transition: background .15s ease, color .15s ease, transform .15s ease;
  padding: 6px;
  box-sizing: border-box;
}
.team-linkedin:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-1px);
}
.team-linkedin svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   Mobile accessibility tweaks (Steven feedback #11, #13)
   - Bumps logo for better visibility at phone sizes (#13)
   - Bumps interactive elements to 44x44 minimum tap target (#11)
     per WCAG 2.5.5 — applies only at mobile widths since desktop
     mouse pointers don't need the same hit area.
   ============================================================ */
@media (max-width: 600px) {
  /* #13: logo gradient looks washed out at small sizes — slightly bigger
     makes the strokes more substantial */
  .logo-img { height: 40px; }
}

@media (max-width: 960px) {
  /* #11: tap targets ≥44×44 px (WCAG 2.5.5) */
  .nav-cta { padding: 13px 20px; }
  .module-link {
    padding: 14px 0;
    min-height: 44px;
    box-sizing: border-box;
    align-items: center;
  }
  .team-linkedin { width: 44px; height: 44px; }
}

/* ============================================================
   Matrix v3 — Product vs Service distinction + Quick win star
   (Steven feedback #2 — supports product/service alignment with /services)
   ============================================================ */
.matrix-cell.is-product {
  background: var(--accent-light);
  color: var(--ink);
  font-weight: 600;
}
.matrix-cell.is-quickwin::after {
  content: "★";
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}
/* Darker star on the light-blue product cells, for contrast */
.matrix-cell.is-product.is-quickwin::after {
  color: var(--ink);
}

/* Legend — no cell chrome, just floats as a 3-item key */
.matrix-legend {
  background: transparent !important;
  border: none;
  padding-left: 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--ink-soft);
  font-size: 12px;
}
.matrix-legend-swatch { display: none; }
.matrix-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}
.matrix-legend-item .sw {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
}
.matrix-legend-item .sw.product { background: var(--accent-light); }
.matrix-legend-item .sw.service { background: white; border: 1px solid var(--line); }
.matrix-legend-item .sw.star {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 14px;
  width: auto; height: auto;
  line-height: 1;
}

/* Mobile matrix — same product/quickwin treatment on the stacked list version */
.matrix-mobile .matrix-col-services li.is-product {
  font-weight: 600;
  color: var(--ink);
  background: var(--accent-light);
  padding: 6px 10px 6px 24px;
  border-radius: 4px;
}
.matrix-mobile .matrix-col-services li.is-product::before {
  background: var(--ink);
  left: 10px;
}

/* ============================================================
   Stub service sections — placeholder copy awaiting Steven sign-off.
   Visual marker: subtle "placeholder" feel via lighter benefits text.
   Single-column (no image grid since these stubs have no images).
   ============================================================ */
.svc-section-stub {
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--bg);
}
.svc-section-stub.svc-flip { background: var(--bg-alt); }
.svc-text-stub {
  max-width: 760px;
  margin: 0 auto;
}
.svc-benefits-stub {
  color: var(--ink-soft);
  font-style: italic;
}

/* Client Benefits intro on Network Fee Tracking page (Steven feedback #5)
   — restored from the original Squarespace version that was lost in migration */
.client-benefits-section {
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--bg);
}
.client-benefits-lead {
  max-width: 1100px;                              /* wider so text wraps to 2 lines on desktop */
  margin: clamp(8px, 1.2vw, 14px) auto clamp(40px, 5vw, 64px);  /* tighter to h2 above, more breathing room before charts below */
  text-align: center;
  text-wrap: balance;                             /* even line lengths */
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
}

/* ============================================================
   Blog post — author byline avatar + bottom "About the Author" block
   (Steven feedback #7 — author profile critical for E-E-A-T + AI search)
   ============================================================ */

/* Top byline — small avatar next to author name */
.blog-post-byline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.blog-post-byline-avatar {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-alt);
}
.blog-post-byline-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-post-byline-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.35;
}
.blog-post-byline-text > span { color: var(--ink); font-weight: 600; }
.blog-post-byline-text > span a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.blog-post-byline-text > span a:hover { border-bottom-color: var(--accent); }
.blog-post-byline-text time { color: var(--muted); font-size: 13px; }

/* Bottom "About the Author" bio block */
.blog-author-bio {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(36px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  .blog-author-bio {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .blog-author-bio-photo { max-width: 96px; }
}
.blog-author-bio-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-alt);
}
.blog-author-bio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-author-bio-content .eyebrow {
  display: inline-block;
  margin-bottom: 8px;
}
.blog-author-bio-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.2;
}
.blog-author-bio-role {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 18px;
}
.blog-author-bio-body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 14px;
}
.blog-author-bio-body p:last-child { margin-bottom: 0; }
.blog-author-bio-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 18px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
}
.blog-author-bio-linkedin:hover {
  background: white;
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.blog-author-bio-linkedin svg {
  flex-shrink: 0;
  color: var(--accent);
}
.blog-author-bio-linkedin:hover svg { color: var(--accent); }

/* ============================================================
   Forecast diagram — rebuilt from PNG as accessible HTML
   (Steven feedback #10 — text-in-image → live HTML for screen readers,
    zoom scaling, high-contrast modes, search/AI indexability)
   Sits inline in the network-fee-explainer.html article body.
   ============================================================ */
.forecast-diagram {
  margin: 0;
  padding: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--sans);
  color: var(--ink);
}
.forecast-diagram-head {
  position: relative;
  padding: 26px 28px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.forecast-diagram-head h2 {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  max-width: 460px;
}
.forecast-diagram-head h2::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: var(--accent);
  margin-top: 10px;
}
.forecast-diagram-tagline {
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 12px 0 0;
  max-width: 460px;
}
.forecast-diagram-example {
  position: absolute;
  top: 32px;
  right: 28px;
  font-size: 12px;
  color: var(--accent);
  margin: 0;
}
.forecast-diagram-columns {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.4fr;
  border-bottom: 1px solid var(--line-soft);
}
.forecast-col {
  padding: 22px 22px 26px;
  border-right: 1px solid var(--line-soft);
}
.forecast-col:last-child { border-right: none; }
.forecast-col-num {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px;
}
.forecast-col-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.forecast-col-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 12px;
}
.forecast-col-desc.italic-meta {
  font-style: italic;
  color: var(--ink-soft);
}
.forecast-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.forecast-col ul li {
  font-size: 13.5px;
  color: var(--ink);
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.forecast-col ul li:first-child { border-top: none; padding-top: 0; }
/* Kill the inherited bullet-dot from .explainer-article ul li::before
   — the forecast diagram uses border separators, not dots */
.forecast-diagram ul li::before { content: none; }
.forecast-diagram ul li { padding-left: 0; margin-bottom: 0; }
.forecast-buckets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.forecast-bucket-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
}
.forecast-bucket-meta {
  font-style: italic;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.forecast-bucket ul li {
  font-size: 13px;
  padding: 8px 0;
}
.forecast-divider {
  text-align: center;
  padding: 14px 0 12px;
  background: white;
}
.forecast-divider-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  position: relative;
  display: inline-block;
}
.forecast-divider-label::before,
.forecast-divider-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}
.forecast-divider-label::before { right: calc(100% + 12px); }
.forecast-divider-label::after  { left:  calc(100% + 12px); }
.forecast-output {
  background: var(--bg-alt);
  padding: 22px 28px 24px;
}
.forecast-output-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.forecast-output-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--ink);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.forecast-output-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.forecast-output-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.forecast-output-col {
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 14px 16px;
}
.forecast-output-col-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.forecast-output-col p {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 800px) {
  .forecast-diagram-columns { grid-template-columns: 1fr; }
  .forecast-col { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .forecast-col:last-child { border-bottom: none; }
  .forecast-diagram-example { position: static; margin-top: 8px; }
  .forecast-output-cols { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .forecast-buckets { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   Image accessibility supplements (Steven feedback #10 follow-on)
   - .engagements-locations: text list of clients below the world map
     on /our-team — makes the labels accessible to screen readers,
     search engines, AI engines, and zoom users.
   - .kajo-caption: short HTML caption below the Kajo product
     screenshot on /network-compliance-tracking — same purpose.
   Both keep the original image (visual is still the hero) and
   supplement it with accessible HTML text underneath.
   ============================================================ */
.engagements-locations {
  margin-top: clamp(20px, 3vw, 32px);
}
.engagements-locations-label {
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.engagements-locations-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) { .engagements-locations-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .engagements-locations-list { grid-template-columns: 1fr; } }
.engagements-locations-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.35;
}
.engagements-locations-list .flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.kajo-caption {
  margin-top: clamp(10px, 1.5vw, 16px);
  padding: 0;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
}
.kajo-caption strong {
  font-weight: 600;
  color: var(--ink);
  margin-right: 2px;
}

/* ============================================================
   .guide-flat-img — a sibling of .guide-book for the alternate
   "flat watercolor illustration" treatment used by the
   Forecasting & Accruals Accounting block on /network-fee-tracking.
   Whereas .guide-book wraps a 3D-rotated book mockup, this is a
   plain illustration sized to roughly fill the .guide-visual column.
   ============================================================ */
.guide-flat-img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ============================================================
   LANGUAGE PICKER — globe icon → dropdown menu
   Markup is the same on all pages; lang-detect.js sets the
   "active" class and rewrites hrefs at page load based on URL.
   ============================================================ */
.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
}
.lang-switch-trigger {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: inherit;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease;
  min-width: 44px;
  min-height: 44px;  /* WCAG tap target */
}
.lang-switch-trigger:hover,
.lang-switch-trigger:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  outline: none;
}
.lang-switch-trigger svg { display: block; }
.lang-switch-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  min-width: 220px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1000;
  font-family: var(--sans);
  font-size: 14px;
}
/* The base rule's `display: flex` overrides the HTML `hidden` attribute
   (which is just `display: none`), so JS toggling menu.hidden wouldn't
   actually hide the menu. This rule honours hidden explicitly. */
.lang-switch-menu[hidden] { display: none; }
.lang-switch-menu a,
.lang-switch-menu .lang-switch-disabled {
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .12s ease;
}
.lang-switch-menu a:hover,
.lang-switch-menu a:focus-visible {
  background: var(--bg-alt);
  outline: none;
}
.lang-switch-menu a.active {
  font-weight: 700;
  background: var(--bg-alt);
}
.lang-switch-menu a.active::before {
  content: "✓ ";
  color: var(--accent);
  font-weight: 700;
}
.lang-switch-disabled {
  color: var(--muted);
  cursor: not-allowed;
}
.lang-switch-disabled em {
  font-style: normal;
  font-size: 11px;
  margin-left: 6px;
  color: var(--muted);
  opacity: 0.75;
}

/* ============================================================
   LANGUAGE BANNER — non-blocking suggestion shown to visitors
   whose browser language doesn't match the current page locale.
   Injected at the top of <body> by lang-detect.js. Dismissible
   via the "No thanks" button (state stored in localStorage).
   ============================================================ */
.lang-banner {
  position: relative;
  background: var(--ink-deep);
  color: white;
  font-family: var(--sans);
  font-size: 14px;
  z-index: 100;
  padding: 12px 0;
}
.lang-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lang-banner-msg { flex: 1 1 auto; min-width: 200px; line-height: 1.45; }
.lang-banner-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.lang-banner-switch {
  background: white;
  color: var(--ink);
  padding: 8px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  transition: background-color .15s ease;
}
.lang-banner-switch:hover { background: var(--accent-light); }
.lang-banner-dismiss {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  transition: background-color .15s ease, border-color .15s ease;
}
.lang-banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Inline error message shown by /forms.js when a form submission fails
   (e.g. network error, validation error returned from Formspree). The box
   is appended to the form by JS, hidden by default, shown on error. */
.form-error {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #fbeaea;
  border: 1px solid #f1c2c2;
  color: #b22d2d;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
}