/* resources grid — mirrors ae/index.html .res-grid */
.resources { padding: 96px 0 88px; border-top: 1px solid var(--line-soft); }
.resources .sec-head { max-width: 720px; margin-bottom: 40px; }
.resources .sec-head h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; margin: 0 0 12px; color: var(--text); }
.resources .sec-head p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
/* BEGIN GENERATED banks-context CSS — tools/build-banks-context.py — do not edit */
      .banks-context { padding: 56px 0; border-top: 1px solid var(--line-soft); }
      /* Named areas, not two plain columns. The support line must sit on ONE line at desktop:
         it needs 790px, and while it shared a column with the CTA it could only ever get 757px
         (1124px inner width - 64 padding - 40 gap - 271 CTA). Spanning it across both columns
         gives 1060px. The CTA keeps its bottom-right position by sitting in the logos row. */
      .bc-inner { display: grid; grid-template-columns: 1fr auto; column-gap: 40px; row-gap: 0;
        grid-template-areas: "head head" "sub sub" "logos cta";
        align-items: end; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); }
      .bc-h { grid-area: head; }
      .bc-sub { grid-area: sub; }
      .bc-logos { grid-area: logos; }
      .bc-cta { grid-area: cta; }
      /* max-width raised from an arbitrary 600px so the grid column governs the measure
         rather than a hard cap. NOTE: this alone does not put the support line on one line at
         desktop - measured at 1440px, the line needs 790px and the column yields 757px, because
         the right-hand CTA reserves 271px + 40px gap out of the 1124px inner width. See the
         component note in banks-context.json. No white-space:nowrap is used anywhere. */
      .bc-h { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--text); margin: 0 0 10px; }
      .bc-sub { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
      .bc-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); color: var(--text); font-family: var(--mono,'JetBrains Mono',monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: border-color .2s, background .2s; white-space: nowrap; }
      .bc-cta:hover { border-color: rgba(120,140,150,.5); background: rgba(120,140,150,.08); }
      .bc-cta svg { width: 14px; height: 14px; }
      .bc-logos { display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; margin:20px 0 0; padding:22px 0 4px; border-top:1px solid var(--line-soft); }
      /* Logos are the proof element: full colour, full opacity, no grayscale, no tiles.
         Height-led with per-mark max-widths so a wide lockup and a compact wordmark
         read at the same optical weight; aspect ratios are never forced. */
      .bc-logos .bc-logo { height:34px; display:inline-flex; align-items:center; opacity:1; }
      .bc-logos .bc-logo-img { height:34px; width:auto; max-width:140px; object-fit:contain; display:block; filter:none; }
      .bc-logos .bc-logo[href*="wio"] .bc-logo-img { height:26px; max-width:96px; }
      .bc-logos .bc-logo:hover { opacity:.82; }
      .bc-logos span.bc-logo:hover { opacity:1; } /* non-linking marks (VN list) keep no hover affordance */
      .bc-logos .bc-logo:hover .bc-logo-img { filter:none; }
      .bc-logos .bc-logo svg { height:100%; width:auto; display:block; }
      .bc-logos .bc-logo b { font-family:var(--sans,'Inter',system-ui,sans-serif); font-size:21px; line-height:1; letter-spacing:-.01em; font-weight:600; text-transform:none; color:inherit; white-space:nowrap; }
      /* Height-balanced, not proportion-balanced: one family at one size gives every mark the
         same cap height, so the row reads level regardless of name length. Muted by opacity so
         it stays supporting detail under the heading and body. */
      .bc-logos .bc-logo i { font-style:normal; font-family:var(--mono,'JetBrains Mono',monospace); font-size:12px; letter-spacing:.02em; color:var(--faint); }
      @media (max-width:720px) { .bc-inner { grid-template-columns: 1fr; grid-template-areas:"head" "sub" "logos" "cta"; align-items:start; row-gap:0; } .bc-logos { gap:12px 16px; } }
      @media (max-width: 720px) {
        .bc-logos { flex-wrap:nowrap; overflow-x:auto; gap:28px; margin:0 -20px; padding:22px 20px 10px; scrollbar-width:none; }
        .bc-logos::-webkit-scrollbar { display:none; }
        .bc-logos .bc-logo, .bc-logos .bc-logo-img { height:30px; flex:0 0 auto; }
        /* BankIdentity marks (.bkid) are the strip's items since 2026-09-07; without this they shrank to fit the nowrap row
           and their logos overflowed onto each other (2026-09-21 fix). */
        .bc-logos .bkid { flex:0 0 auto; }
        .bc-logos .bc-logo[href*="wio"] .bc-logo-img { height:23px; }
        .bc-logos .bc-logo b { font-size:19px; }
      }
      /* END GENERATED banks-context CSS */
    /* BEGIN GENERATED consult CSS — tools/build-consult.py — do not edit */
      .svc-fields select { width:100%;padding:12px 14px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(255,255,255,.02);color:var(--text);font-family:inherit;font-size:14.5px;line-height:1.55;appearance:none;-webkit-appearance:none;cursor:pointer }
      .svc-fields select:focus-visible { outline:1px solid var(--mineral);outline-offset:-1px }
      /* Consultation intake — component-owned layout (2026-09-06). Two columns on desktop: copy (row 1) and the
         optional photograph (row 2) on the left, the intake card spanning both rows on the right; align-items:end
         puts the card's bottom edge on the photograph's bottom edge with no offsets. Stacks copy → card → photo.
         2026-09-18 (owner): row 2 is 1fr and the photograph STRETCHES to fill it, so a taller card (corporate.html adds a
         Country select) grows the photograph instead of opening a gap under the copy; 21/9 was the old fixed ratio. */
      :root .consult .consult-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,430px);grid-template-rows:auto 1fr;column-gap:clamp(40px,4vw,48px);row-gap:28px;align-items:end }
      :root .consult .consult-copy { grid-column:1;grid-row:1;align-self:start }
      :root .consult .consult-media { grid-column:1;grid-row:2;align-self:stretch;position:relative;overflow:hidden;isolation:isolate;margin:0;min-height:240px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2) }
      :root .consult .consult-card { grid-column:2;grid-row:1/3;align-self:end;box-sizing:border-box;width:100%;max-width:430px;min-height:412px;display:flex;flex-direction:column;padding:32px 28px 34px }
      :root .consult .consult-card .svc-fields { flex:1;align-content:start;gap:16px }
      :root .consult .consult-card h3 + .svc-fields { margin-top:18px }   /* 2026-09-18 (owner): a card with no SLA line and no sub-copy had the fields 6px under the heading; match the 20px the sub-copy leaves */
      :root .consult .consult-card .svc-fields textarea { min-height:82px;resize:vertical }
      :root .consult .consult-card .svc-fields .btn { min-height:44px }
      /* Intake-form legibility (2026-09-06). Labels: same 12px, tracking eased from .06em to .04em (no giant caps).
         Controls keep 14.5px on desktop and go to 16px under 520px so iOS Safari does not zoom. Placeholders use the
         theme's faint token at full opacity — subordinate, never clipped. The phone control gets the whole row (the
         catalogue marks `phone` and `company` wide), the selector is a fixed segment and the number takes the rest. */
      :root .consult .consult-card .svc-fields .fld span { font-size:12px;letter-spacing:.04em;line-height:1.3 }
      :root .consult .consult-card .svc-fields :is(input,textarea,select)::placeholder { color:var(--faint);opacity:1 }
      :root .consult .consult-card .svc-fields .pi-wrap { grid-template-columns:max-content minmax(0,1fr) }
      :root .consult .consult-card .svc-fields .pi-wrap > .pi-cc { padding:0 12px }
      :root .consult .consult-card .svc-fields .pi-wrap > input[type="tel"] { min-width:0;width:100%;max-width:none;padding-left:12px;padding-right:12px;text-overflow:clip;overflow:visible }
      @media (max-width:520px) {
        :root .consult .consult-card .svc-fields :is(input,textarea,select) { font-size:16px }
        :root .consult .consult-card .svc-fields .pi-wrap { --pi-font-size:16px }
      }
      .consult-media-img { position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;filter:saturate(.66) contrast(.92) brightness(.72) }
      .consult-media--top .consult-media-img { object-position:center 30% }
      .consult-media--bottom .consult-media-img { object-position:center 70% }
      :root[data-theme="light"] .consult-media-img { filter:saturate(.82) contrast(.94) brightness(1.01) }
      @media (max-width:900px) {
        :root .consult .consult-grid { grid-template-columns:1fr;grid-template-rows:none;row-gap:24px;align-items:start }
        :root .consult .consult-copy, :root .consult .consult-card, :root .consult .consult-media { grid-column:1;grid-row:auto }
        :root .consult .consult-card { max-width:none;min-height:0;padding:26px 22px 28px }
        :root .consult .consult-media { aspect-ratio:16/9 }
      }
      /* END GENERATED consult CSS */