/* about-fx.css: the About and trust group on the redesign layer (27 Oct 2026).
   Pages: who-we-are, contact, verification, case-study-family-business, partners, ventures,
   as-seen, pledge, trust, security, status. Load after page-fx.css.
   Every rule is scoped by the group body class .fx-ab (each page also carries fx-<page>).
   Solid content only, colours from the fx tokens, 16px body minimum, 44px targets. */

/* ---------- Shared bits ---------- */
.fx-ab .pg-hero--solo .pg-lede{margin-bottom:28px}
.fx-ab .pg-hero--solo .pg-lede:last-child{margin-bottom:0}
.fx-ab .ab-tiles-note{margin:22px 0 0}
.fx-ab .fx-tile ul{margin:0;padding-left:1.2em;color:var(--fx-muted);font-size:16.5px;line-height:1.55}
.fx-ab .fx-tile a:not([class]){color:var(--fx-ink);text-decoration:underline;text-decoration-color:var(--fx-line-strong);text-underline-offset:4px}

/* "The detail" disclosure inside tiles and rows */
.fx-ab .ab-more{margin-top:4px}
.fx-ab .ab-more summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;
  font-size:16px;font-weight:600;color:var(--fx-ink);text-decoration:underline;text-decoration-color:var(--fx-line-strong);text-underline-offset:4px}
.fx-ab .ab-more summary::-webkit-details-marker{display:none}
.fx-ab .ab-more summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--fx-accent);border-bottom:2px solid var(--fx-accent);transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--fx-ease)}
.fx-ab .ab-more[open] summary::after{transform:rotate(225deg) translate(-2px,-1px)}
.fx-ab .ab-more summary:hover{text-decoration-color:var(--fx-accent)}
.fx-ab .ab-more>p{margin:6px 0 0;font-size:16.5px;line-height:1.6;color:var(--fx-muted)}
.fx-ab .ab-more>p+p{margin-top:10px}

/* Label and value rows on a solid tile (security, case study) */
.fx-ab .ab-rows{margin:0;padding:6px 28px;border:1px solid var(--fx-line);border-radius:var(--fx-radius);background:var(--fx-surface);box-shadow:var(--fx-shadow-soft);max-width:960px}
.fx-ab .ab-rows>div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:8px 28px;padding:20px 0;border-bottom:1px solid var(--fx-line)}
.fx-ab .ab-rows>div:last-child{border-bottom:0}
.fx-ab .ab-rows dt{margin:0;font-size:17px;line-height:1.4;font-weight:600;color:var(--fx-ink)}
.fx-ab .ab-rows dd{margin:0;font-size:16.5px;line-height:1.6;color:var(--fx-muted);min-width:0}
.fx-ab .ab-rows dd>b:first-child{color:var(--fx-ink)}
@media (max-width:700px){.fx-ab .ab-rows{padding:4px 20px}.fx-ab .ab-rows>div{grid-template-columns:1fr;padding:18px 0}}

/* Plain chips row (kinds of work, compliance posture) */
.fx-ab .ab-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.fx-ab .ab-chips li{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--fx-line-strong);border-radius:999px;
  background:var(--fx-surface);font-size:16px;line-height:1.35;color:var(--fx-muted)}
.fx-ab .ab-chips b{color:var(--fx-ink);font-weight:600;margin-right:.3em}

/* The hub list the footer tool writes between the more-from-feerasta markers (unclassed section) */
.fx-ab main>section:not([class]){padding-block:clamp(48px,6vw,72px);border-top:1px solid var(--fx-line)}
.fx-ab main>section:not([class])>.wrap{width:min(var(--fx-maxw),calc(100% - 48px));margin-inline:auto;padding:0}
.fx-ab main>section:not([class]) h2{margin:0 0 18px;font:500 13px/1.3 var(--fx-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fx-muted)}
.fx-ab main>section:not([class]) ul{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:4px 24px!important}
.fx-ab main>section:not([class]) li a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--fx-ink);text-decoration:underline;text-decoration-color:var(--fx-line-strong);text-underline-offset:4px}
.fx-ab main>section:not([class]) li a:hover{text-decoration-color:var(--fx-accent)}
@media (max-width:600px){.fx-ab main>section:not([class])>.wrap{width:calc(100% - 32px)}}

/* ---------- Forms (contact, partners, ventures) ---------- */
.fx-ab .pg-form .ab-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.fx-ab .pg-form label{margin:0}
.fx-ab .pg-form label>:is(input,select,textarea){margin-top:8px}
.fx-ab .pg-form .ab-full{grid-column:1 / -1}
.fx-ab .pg-form select{appearance:auto}
/* lead-form.js writes its "How did you hear about us?" select with inline styles meant for the old navy page */
.fx-ab .pg-form select[name=heard]{width:100%!important;min-height:48px!important;padding:10px 14px!important;border-radius:10px!important;
  border:1px solid var(--fx-line-strong)!important;background:var(--fx-ground)!important;color:var(--fx-ink)!important;font:400 16px/1.4 var(--font-body,system-ui)!important;margin-top:8px!important}
.fx-ab .pg-form .ab-check{display:flex!important;gap:12px;align-items:flex-start;font-size:16px!important;font-weight:400!important;line-height:1.5;color:var(--fx-muted)!important;cursor:pointer}
.fx-ab .pg-form .ab-check input{flex:none;width:22px;height:22px;min-height:0;margin:1px 0 0;accent-color:var(--fx-accent)}
.fx-ab .pg-form .ab-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fx-ab .pg-form .lf-status,.fx-ab .pg-form .vf-status{margin:0;min-height:1.5em;font-size:16px;line-height:1.5;font-weight:500;color:var(--fx-muted)}
.fx-ab .pg-form .lf-status.ok{color:var(--fx-ink)}
.fx-ab .pg-form .lf-status.err{color:var(--fx-accent)}
.fx-ab .pg-form .ab-fine{margin:0;font-size:15px;line-height:1.55;color:var(--fx-muted)}
.fx-ab .pg-form .ab-fine a{color:var(--fx-ink);text-decoration:underline;text-underline-offset:3px}
.fx-ab .pg-form button.fx-btn{border:0;cursor:pointer;font:inherit}
.fx-ab .pg-form button.fx-btn:disabled{opacity:.6;cursor:progress}
.fx-ab .lf-note,.fx-ab .lf-checklist{font-size:16px!important}
@media (max-width:640px){.fx-ab .pg-form .ab-row{grid-template-columns:1fr}}

/* The form beside a short aside */
.fx-ab .ab-form-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.fx-ab .ab-aside{display:grid;gap:20px;align-content:start}
.fx-ab .ab-aside h2{margin:0;font-size:clamp(24px,2.4vw,30px);line-height:1.2;letter-spacing:-.015em;font-weight:500;color:var(--fx-ink)}
.fx-ab .ab-aside p{margin:0;font-size:17px;line-height:1.6;color:var(--fx-muted)}
.fx-ab .ab-aside .ab-line{padding-top:20px;border-top:1px solid var(--fx-line)}
.fx-ab .ab-aside .ab-line .pg-k{margin-bottom:8px}
.fx-ab .ab-aside a:not([class]){color:var(--fx-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--fx-accent);text-underline-offset:4px}
@media (max-width:900px){.fx-ab .ab-form-grid{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.fx-contact .ab-meer{display:flex;gap:16px;align-items:center}
.fx-contact .ab-meer img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;outline:1px solid var(--fx-line-strong);outline-offset:-1px;background:var(--fx-surface)}
.fx-contact .ab-meer p{font-size:17px}
.fx-contact .contact-book{margin:0;display:grid;gap:12px;justify-items:start}
.fx-contact .contact-alt{margin:0}

/* ---------- Who we are ---------- */
.fx-who-we-are .ab-founder{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.fx-who-we-are .ab-photo{margin:0}
.fx-who-we-are .ab-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--fx-radius);
  outline:1px solid var(--fx-line);outline-offset:-1px;background:var(--fx-surface)}
.fx-who-we-are .ab-photo figcaption{margin-top:12px;font-size:15px;color:var(--fx-muted)}
.fx-who-we-are .ab-story{max-width:64ch;font-size:18px;line-height:1.7;color:var(--fx-muted)}
.fx-who-we-are .ab-story p{margin:0 0 1em}
.fx-who-we-are .ab-sign{font-size:19px;font-weight:600;color:var(--fx-ink)}
.fx-who-we-are .ab-proof-n{margin:0;font-size:clamp(52px,6vw,76px);line-height:1;font-weight:500;letter-spacing:-.03em;color:var(--fx-ink);font-variant-numeric:tabular-nums}
@media (max-width:820px){.fx-who-we-are .ab-founder{grid-template-columns:1fr}.fx-who-we-are .ab-photo{max-width:280px}}

/* ---------- Verification and the case study ---------- */
.fx-ab .ab-gate{margin:0;max-width:62ch}
.fx-ab .ab-limits{counter-reset:none}

/* ---------- Pledge ---------- */
.fx-pledge .ab-clauses{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:880px;border:1px solid var(--fx-line);border-radius:var(--fx-radius);
  background:var(--fx-surface);box-shadow:var(--fx-shadow-soft)}
.fx-pledge .ab-clauses>li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 20px;padding:26px 30px;border-bottom:1px solid var(--fx-line)}
.fx-pledge .ab-clauses>li:last-child{border-bottom:0}
.fx-pledge .ab-n{margin:0;font:500 15px/1.6 var(--fx-mono);color:var(--fx-accent);font-variant-numeric:tabular-nums}
.fx-pledge .ab-clauses h2{margin:0 0 6px;font-size:clamp(21px,2vw,24px);line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--fx-ink)}
.fx-pledge .ab-clauses p{margin:0;font-size:17px;line-height:1.6;color:var(--fx-muted)}
.fx-pledge .ab-clauses a{color:var(--fx-ink);text-decoration:underline;text-decoration-color:var(--fx-line-strong);text-underline-offset:4px}
.fx-pledge .ab-sig{margin:0;font-size:24px;font-weight:600;color:var(--fx-ink)}
.fx-pledge .ab-who{margin:-8px 0 0;font:500 13px/1.4 var(--fx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fx-muted)}
@media (max-width:600px){.fx-pledge .ab-clauses>li{grid-template-columns:1fr;padding:22px 20px}}

/* ---------- Trust and status (long reading) ---------- */
.fx-ab .ab-updated{margin:0;font-size:16px;color:var(--fx-muted)}
.fx-ab .pg-prose .ab-docs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:2px 24px}
.fx-ab .pg-prose .ab-docs li{margin:0}
.fx-ab .pg-prose .ab-docs a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- As seen ---------- */
.fx-as-seen .ab-call{font-variant-numeric:tabular-nums}
.fx-as-seen .ab-call a{color:var(--fx-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--fx-accent);text-underline-offset:4px;white-space:nowrap}
.fx-as-seen .ab-feat{display:flex;flex-wrap:wrap;gap:12px}

@media (forced-colors:active){.fx-ab .ab-rows,.fx-pledge .ab-clauses{border:1px solid CanvasText}}
.fx-ab .ab-form-k{margin:0 0 14px}
/* page-fx.css sets .pg-form label{display:block}, which beats the hidden attribute on the labels lead-form.js hides */
.fx-ab .pg-form [hidden]{display:none!important}
.fx-ab .ab-gate+.fx-actions{margin-top:28px}
.fx-ab .ab-tiles-note+.fx-actions{margin-top:18px}
.fx-ab .ab-form-grid--aside-first{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
@media (max-width:900px){.fx-ab .ab-form-grid--aside-first{grid-template-columns:1fr}}
/* page-fx.css styles tr:first-child>th as a header row, which also catches the first body row of a table with row headers */
.fx-ab .pg-table-wrap tbody tr:first-child>th{font:600 15.5px/1.5 var(--font-body,system-ui);letter-spacing:0;text-transform:none;color:var(--fx-ink);background:none}
.fx-ab .pg-table-wrap tbody th{font-weight:600}
.fx-partners .pg-table-wrap td:nth-child(3),.fx-partners .pg-table-wrap td:nth-child(4){white-space:nowrap}
.fx-ab .pg-form label+:is(input,textarea,select){margin-top:8px}
.fx-ab .pg-form .vf-status.ok{color:var(--fx-ink)}
.fx-ab .pg-form .vf-status.err{color:var(--fx-accent)}
.fx-as-seen .pg-amount.ab-call{font-size:clamp(30px,4vw,48px)}