/* ============================================================
   Future Advisory — marketing sub-pages (Services hub, Service detail,
   Pricing). Layered ON TOP of homepage/homepage.css (container, header,
   footer, buttons, bands, type scale, tokens). Only adds what those pages
   need: nav dropdowns + mobile drawer, page heroes, pillar grid, service-
   detail sections, pricing tiers, FAQ accordion, proof-strip + teaser bands.
   Square edges, flat colour, inset-shadow borders — brand-consistent.
   ============================================================ */

/* ---- Shared helpers ---- */
.fa-eyebrow--ondark { color: var(--fa-yellow); }
.fa-confirm { background: rgba(89,57,245,0.12); color: var(--fa-purple); padding: 0 5px; font-weight: 600; white-space: nowrap; }
.fa-linkarrow { display: inline-flex; align-items: center; gap: 8px; font: var(--fw-halbfett) 16px/1 var(--font-display); letter-spacing: -0.16px; color: var(--fa-ink); text-decoration: none; }
.fa-linkarrow__icon { display: block; transition: transform 200ms var(--ease-standard); }
.fa-linkarrow:hover .fa-linkarrow__icon { transform: translateX(3px); }
.fa-linkarrow--ondark { color: var(--fa-white); }

/* Generic section rhythm for sub-pages */
.pg-section { padding: 120px 0; }
.pg-section--tight { padding: 88px 0; }
.pg-h2 { margin: 0; font: var(--fw-halbfett) 48px/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--fa-ink); }
.pg-h2--ondark { color: var(--fa-white); }
.pg-lead { margin: 0; font: var(--fw-kraftig) 20px/1.4 var(--font-body); letter-spacing: -0.02em; color: var(--fa-ink); max-width: 720px; }
.pg-lead--ondark { color: var(--fa-white); }

/* Striped image placeholder (real photography TBD) */
.ph-square { position: relative; width: 100%; aspect-ratio: 1/1; background: repeating-linear-gradient(45deg, rgba(5,14,30,0.05) 0 14px, rgba(5,14,30,0.10) 14px 28px); outline: 1px dashed rgba(5,14,30,0.3); outline-offset: -1px; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.ph-square__label { font: 400 13px/1.4 "Epilogue", var(--font-body); letter-spacing: 0.02em; color: rgba(5,14,30,0.55); text-align: center; }

/* ============================================================
   Header — nav dropdowns + mega-menu + mobile drawer
   ============================================================ */
.fa-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px; font: var(--fw-kraftig) 16px/1.4 var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; transition: opacity 200ms var(--ease-standard); }
.fa-nav__link:hover { opacity: 0.7; }
.fa-nav__caret { display: block; transition: transform 200ms var(--ease-standard); }
.fa-nav-item { position: relative; display: inline-flex; align-items: center; height: 80px; }
.fa-nav-item:hover .fa-nav__caret, .fa-nav-item:focus-within .fa-nav__caret { transform: rotate(180deg); }

.fa-dropdown { position: absolute; top: 100%; left: -8px; min-width: 260px; background: var(--fa-white); box-shadow: 0 18px 40px rgba(5,14,30,0.14), inset 0 0 0 1px rgba(5,14,30,0.1); padding: 8px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard), visibility 180ms; z-index: 120; }
.fa-dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.fa-nav-item:hover .fa-dropdown, .fa-nav-item:focus-within .fa-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.fa-dropdown--mega { min-width: 340px; }
.fa-dropdown__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; font: var(--fw-kraftig) 16px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--fa-ink); text-decoration: none; transition: background 160ms var(--ease-standard), color 160ms var(--ease-standard); }
.fa-dropdown__link:hover { background: var(--fa-grey-95); color: var(--fa-purple); }
.fa-dropdown__link--all { margin-top: 4px; color: var(--fa-purple); box-shadow: inset 0 1px 0 rgba(5,14,30,0.1); font-weight: var(--fw-halbfett); }
.fa-dropdown__arrow { display: block; transition: transform 180ms var(--ease-standard); }
.fa-dropdown__link--all:hover .fa-dropdown__arrow { transform: translateX(3px); }

/* Mobile drawer */
.fa-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.fa-drawer.is-open { visibility: visible; }
.fa-drawer__scrim { position: absolute; inset: 0; background: rgba(5,14,30,0.5); opacity: 0; transition: opacity 240ms var(--ease-standard); }
.fa-drawer.is-open .fa-drawer__scrim { opacity: 1; }
.fa-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 88vw); background: var(--fa-white); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 280ms var(--ease-standard); box-sizing: border-box; overflow-y: auto; }
.fa-drawer.is-open .fa-drawer__panel { transform: translateX(0); }
.fa-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; box-shadow: inset 0 -1px 0 rgba(5,14,30,0.1); position: sticky; top: 0; background: var(--fa-white); }
.fa-drawer__logo { display: inline-flex; color: var(--fa-ink); }
.fa-drawer__logo svg { height: 34px; width: auto; display: block; }
.fa-drawer__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--fa-ink); cursor: pointer; }
.fa-drawer__nav { display: flex; flex-direction: column; padding: 12px 8px; }
.fa-drawer__link, .fa-drawer__parent { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 12px; font: var(--fw-kraftig) 20px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--fa-ink); text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; box-shadow: inset 0 -1px 0 rgba(5,14,30,0.08); }
.fa-drawer__parent svg { transition: transform 200ms var(--ease-standard); }
.fa-drawer__parent.is-open svg { transform: rotate(180deg); }
.fa-drawer__sub { display: flex; flex-direction: column; padding: 4px 0 12px; background: var(--fa-grey-95); }
.fa-drawer__sublink { padding: 12px 20px; font: var(--fw-kraftig) 16px/1.3 var(--font-body); letter-spacing: -0.01em; color: var(--fa-ink); text-decoration: none; }
.fa-drawer__sublink:hover { color: var(--fa-purple); }
.fa-drawer__foot { margin-top: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 1px 0 rgba(5,14,30,0.1); }
.fa-drawer__phone { text-align: center; font: var(--fw-halbfett) 18px/1 var(--font-display); color: var(--fa-ink); text-decoration: none; }

/* ============================================================
   Page hero — centred (hub, pricing)
   ============================================================ */
.pg-hero { background: var(--fa-white); padding: 176px 0 96px; }
.pg-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; max-width: 1000px; margin: 0 auto; }
.pg-hero__h1 { margin: 0; font: var(--fw-halbfett) 60px/0.95 var(--font-display); letter-spacing: -0.03em; color: var(--fa-ink); max-width: 15ch; }
.pg-hero__intro { margin: 0; font: var(--fw-kraftig) 20px/1.4 var(--font-body); letter-spacing: -0.02em; color: var(--fa-ink); max-width: 680px; opacity: 0.85; }
.pg-hero__cta { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }

/* Coming-soon page (shared) */
.cs-hero { background: var(--fa-white); padding: 200px 0 160px; min-height: 62vh; display: flex; align-items: center; }
.cs-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; max-width: 640px; margin: 0 auto; }
.cs-mark { display: inline-flex; color: var(--fa-ink); margin-bottom: 8px; }
.cs-mark svg { height: 56px; width: auto; display: block; }
.cs-h1 { margin: 0; font: var(--fw-halbfett) 48px/1 var(--font-display); letter-spacing: -0.03em; color: var(--fa-ink); }
.cs-body { margin: 0; font: var(--fw-kraftig) 18px/1.5 var(--font-body); letter-spacing: -0.01em; color: var(--fa-ink); opacity: 0.8; }
.cs-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
@media (max-width: 599px) { .cs-hero { padding: 140px 0 80px; } .cs-h1 { font-size: 34px; } }

/* Ghost / outline secondary CTA (square, fills on hover) */
.fa-btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 15px 20px; background: transparent; box-shadow: inset 0 0 0 1px var(--fa-ink); border: 0; border-radius: 0; color: var(--fa-ink); font: var(--fw-halbfett) 18px/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard); }
.fa-btn-ghost:hover { background: var(--fa-ink); color: var(--fa-white); }
.fa-btn-ghost--ondark { box-shadow: inset 0 0 0 1px var(--fa-white); color: var(--fa-white); }
.fa-btn-ghost--ondark:hover { background: var(--fa-white); color: var(--fa-ink); }

/* ============================================================
   Detail hero — eyebrow + H1 + promise + CTA, square image on side
   ============================================================ */
.dt-hero { background: var(--fa-white); padding: 168px 0 96px; }
.dt-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: center; }
.dt-hero__grid--noimg { grid-template-columns: 1fr; max-width: 900px; }
.dt-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.dt-hero__h1 { margin: 0; font: var(--fw-halbfett) 56px/0.98 var(--font-display); letter-spacing: -0.03em; color: var(--fa-ink); }
.dt-hero__promise { margin: 0; font: var(--fw-kraftig) 20px/1.45 var(--font-body); letter-spacing: -0.02em; color: var(--fa-ink); opacity: 0.85; max-width: 560px; }
.dt-hero__cta { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.dt-hero__media { width: 100%; }
.dt-hero__media .ph-square { box-shadow: inset 0 0 0 1px rgba(5,14,30,0.1); }

/* ============================================================
   Pillar grid (Services hub S3) — weighted hierarchy
   ============================================================ */
.pillars { display: flex; flex-direction: column; gap: 20px; }
.pillars__row { display: grid; gap: 20px; }
.pillars__row--heroes { grid-template-columns: 1fr 1fr; }
.pillars__row--mid { grid-template-columns: 1fr 1fr; }
.pillar { display: flex; flex-direction: column; gap: 16px; padding: 36px; box-sizing: border-box; text-decoration: none; transition: transform 200ms var(--ease-standard); }
.pillar__tag { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-halbfett) 13px/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--fa-ink); opacity: 0.65; }
.pillar__title { margin: 0; font: var(--fw-kraftig) 28px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--fa-ink); }
.pillar__promise { margin: 0; font: 500 16px/1.45 "Epilogue", var(--font-body); letter-spacing: -0.01em; color: var(--fa-ink); }
.pillar .fa-linkarrow { margin-top: auto; }
.pillar__arrow { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border-radius: 9999px; background: transparent; color: var(--fa-ink); transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard); }
.pillar:hover .pillar__arrow { background: var(--fa-ink); color: var(--fa-white); }

/* Hero pillars (1 & 2) — big, flat colour grounds */
.pillar--hero { min-height: 300px; }
.pillar--hero.pillar--yellow { background: var(--fa-yellow); }
.pillar--hero.pillar--mint { background: var(--fa-mint); }
.pillar--hero .pillar__title { font-size: 34px; }
/* Mid pillars (3 & 4) — white with inset border */
.pillar--mid { background: var(--fa-white); box-shadow: inset 0 0 0 1px rgba(5,14,30,0.14); min-height: 220px; }
/* Support pillar (5) — demoted: slim, muted, full width, horizontal */
.pillar--support { background: var(--fa-grey-95); box-shadow: inset 0 0 0 1px rgba(5,14,30,0.08); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 24px 36px; }
.pillar--support .pillar__title { font-size: 22px; }
.pillar--support .pillar__promise { max-width: 640px; }
.pillar--support .fa-linkarrow { margin-top: 0; }
.pillar--support .pillar__tag { opacity: 0.5; }
.pillar--support .pillar__head { display: flex; flex-direction: column; gap: 6px; }

/* ============================================================
   Who it's for — qualifier chips
   ============================================================ */
.who { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 48px; align-items: start; }
.who__body { display: flex; flex-direction: column; gap: 24px; }
.who__text { margin: 0; font: var(--fw-kraftig) 20px/1.45 var(--font-body); letter-spacing: -0.02em; color: var(--fa-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; padding: 10px 16px; background: var(--fa-white); box-shadow: inset 0 0 0 1px rgba(5,14,30,0.16); font: var(--fw-kraftig) 15px/1.2 var(--font-body); letter-spacing: -0.01em; color: var(--fa-ink); }

/* ============================================================
   What's included — outcome grid
   ============================================================ */
.incl { background: var(--fa-grey-95); }
.incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.incl-card { background: var(--fa-white); box-shadow: inset 0 0 0 1px rgba(5,14,30,0.1); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.incl-card__mark { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: var(--fa-mint); color: var(--fa-ink); flex-shrink: 0; }
.incl-card__mark svg { display: block; width: 18px; height: 18px; }
.incl-card__text { margin: 0; font: var(--fw-kraftig) 17px/1.4 var(--font-body); letter-spacing: -0.01em; color: var(--fa-ink); }

/* ============================================================
   Why Future Advisory — proof
   ============================================================ */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.why__col { display: flex; flex-direction: column; gap: 24px; }
.why__points { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.why__point { display: flex; gap: 14px; align-items: flex-start; }
.why__point svg { flex-shrink: 0; margin-top: 3px; color: var(--fa-purple); }
.why__point span { font: var(--fw-kraftig) 17px/1.4 var(--font-body); letter-spacing: -0.01em; color: var(--fa-ink); }
/* Case study card (placeholder client) */
.why__case { background: var(--fa-ink); color: var(--fa-white); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.why__case-eyebrow { font: var(--fw-halbfett) 13px/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fa-yellow); }
.why__case-quote { margin: 0; font: 400 22px/1.35 var(--font-display); letter-spacing: -0.01em; color: var(--fa-white); }
.why__case-name { font: var(--fw-halbfett) 16px/1.3 var(--font-display); color: var(--fa-white); }
.why__case-role { font: 400 14px/1.3 "Epilogue", var(--font-body); color: var(--fa-white-60); }
.why__case-badge { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/1.3 "Epilogue", var(--font-body); color: var(--fa-white-60); }
.why__case-badge::before { content: "🟡"; }

/* ============================================================
   Pricing pointer — slim band
   ============================================================ */
.pp-pointer { background: var(--fa-purple); }
.pp-pointer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 40px 0; }
.pp-pointer__text { margin: 0; font: var(--fw-halbfett) 26px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--fa-white); }
.pp-pointer__text .fa-confirm { background: rgba(255,255,255,0.18); color: var(--fa-white); }

/* Related insights (tax pillar) */
.related { background: var(--fa-white); }
.related__box { box-shadow: inset 0 0 0 1px rgba(5,14,30,0.14); padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.related__label { margin: 0; font: var(--fw-kraftig) 18px/1.4 var(--font-body); color: var(--fa-ink); max-width: 640px; }

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq { background: var(--fa-white); }
.faq__wrap { max-width: 880px; margin: 0 auto; }
.faq__list { display: flex; flex-direction: column; }
.faq__item { box-shadow: inset 0 -1px 0 rgba(5,14,30,0.14); }
.faq__item:first-child { box-shadow: inset 0 1px 0 rgba(5,14,30,0.14), inset 0 -1px 0 rgba(5,14,30,0.14); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 8px; background: none; border: 0; text-align: left; cursor: pointer; font: var(--fw-kraftig) 22px/1.3 var(--font-display); letter-spacing: -0.02em; color: var(--fa-ink); }
.faq__icon { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--fa-ink); transition: transform 220ms var(--ease-standard), opacity 220ms var(--ease-standard); }
.faq__icon::before { left: 0; top: 10px; width: 22px; height: 2px; }
.faq__icon::after { left: 10px; top: 0; width: 2px; height: 22px; }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__a { overflow: hidden; max-height: 0; transition: max-height 260ms var(--ease-standard); }
.faq__a-inner { padding: 0 8px 28px; font: var(--fw-kraftig) 17px/1.5 var(--font-body); letter-spacing: -0.01em; color: var(--fa-ink); opacity: 0.82; max-width: 720px; }

/* ============================================================
   FAQ accordion — SHARED source (blog single + pricing).
   Layout wrappers are per-page; these rules style the accordion
   itself so both pages stay visually/behaviourally identical.
   ============================================================ */
.as-faq__list{display:flex;flex-direction:column}
.as-faq__item{border-bottom:1px solid rgba(5,14,30,.1)}
.as-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 24px;background:none;border:0;text-align:left;cursor:pointer}
.as-faq__item:not(:first-child) .as-faq__q{padding-top:24px}
.as-faq__q span{font:var(--fw-halbfett) 16px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--fa-ink)}
.as-faq__tri{flex-shrink:0;width:8px;height:5px;transition:transform 220ms var(--ease-standard)}
.as-faq__item.is-open .as-faq__tri{transform:rotate(180deg)}
.as-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 280ms ease}
.as-faq__item.is-open .as-faq__a{grid-template-rows:1fr}
.as-faq__a-inner{overflow:hidden;min-height:0}
.as-faq__a-pad{padding:0 0 24px;font:var(--fw-kraftig) 16px/1.5 var(--font-body);letter-spacing:-.02em;color:var(--fa-ink)}

/* ============================================================
   Proof strip band override (allow wrap on desktop for longer copy)
   ============================================================ */
.fa-proofstrip .fa-trustbar__row { flex-wrap: wrap; justify-content: center; gap: 10px 40px; }
@media (min-width: 1200px) {
  .fa-proofstrip .fa-trustbar__row { flex-wrap: wrap; }
  .fa-proofstrip .fa-trustbar__item { font-size: 15px; white-space: normal; }
}

/* ============================================================
   Pricing teaser band (reused across hub + detail pages)
   ============================================================ */
.fa-ptease { background: var(--fa-white); padding: 60px 0 120px; }
.fa-ptease__band { background: var(--fa-yellow); padding: 64px 80px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.fa-ptease__title { margin: 0; font: var(--fw-halbfett) 40px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--fa-ink); }
.fa-ptease__body { margin: 0; font: var(--fw-kraftig) 18px/1.5 var(--font-body); letter-spacing: -0.01em; color: var(--fa-ink); max-width: 720px; }
.fa-ptease__body .fa-confirm { background: rgba(5,14,30,0.1); color: var(--fa-ink); }
.fa-ptease__btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; padding: 15px 22px; background: transparent; box-shadow: inset 0 0 0 1px var(--fa-ink); border-radius: 0; color: var(--fa-ink); font: var(--fw-halbfett) 18px/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard); }
.fa-ptease__btn:hover { background: var(--fa-ink); color: var(--fa-white); }

/* ============================================================
   Final CTA phone line (added to shared band)
   ============================================================ */
.fa-finalcta__phone { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font: var(--fw-halbfett) 18px/1 var(--font-display); letter-spacing: -0.01em; color: var(--fa-white); text-decoration: none; }
.fa-finalcta__phone:hover { opacity: 0.85; }
.fa-finalcta__btn2 { text-decoration: none; }
@media (min-width: 1200px) { .fa-finalcta__btn2 { display: inline-flex; align-items: center; justify-content: center; padding: 15px 20px; background: transparent; box-shadow: inset 0 0 0 1px var(--fa-white); color: var(--fa-white); font: var(--fw-halbfett) 18px/1 var(--font-display); letter-spacing: -0.18px; transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard); } .fa-finalcta__btn2:hover { background: var(--fa-white); color: var(--fa-ink); } }

/* ============================================================
   Pricing page — tiers, vCFO block, honest filter
   ============================================================ */
.tiers-note { text-align: center; font: 400 14px/1.4 "Epilogue", var(--font-body); color: rgba(5,14,30,0.55); margin: 0 0 32px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier { background: var(--fa-white); box-shadow: inset 0 0 0 1px rgba(5,14,30,0.14); padding: 36px; display: flex; flex-direction: column; gap: 24px; }
.tier--featured { background: var(--fa-ink); box-shadow: none; }
.tier__name { display: flex; align-items: baseline; gap: 10px; }
.tier__name h3 { margin: 0; font: var(--fw-halbfett) 28px/1 var(--font-display); letter-spacing: -0.02em; color: var(--fa-ink); }
.tier--featured .tier__name h3 { color: var(--fa-white); }
.tier__badge { font: var(--fw-halbfett) 11px/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 8px; background: var(--fa-mint); color: var(--fa-ink); }
.tier__price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.tier__price .fa-confirm { font-size: 15px; }
.tier__price-plain { font: var(--fw-kraftig) 16px/1.4 var(--font-body); color: rgba(5,14,30,0.6); }
.tier--featured .tier__price-plain { color: var(--fa-white-60); }
.tier__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tier__list li { display: flex; gap: 12px; align-items: flex-start; font: var(--fw-kraftig) 16px/1.4 var(--font-body); letter-spacing: -0.01em; color: var(--fa-ink); }
.tier--featured .tier__list li { color: var(--fa-white); }
.tier__list svg { flex-shrink: 0; margin-top: 3px; color: var(--fa-purple); }
.tier--featured .tier__list svg { color: var(--fa-mint); }
.tier__cta { margin-top: auto; }

/* vCFO block — distinct lane */
.vcfo { background: var(--fa-purple); }
.vcfo__box { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.vcfo__text { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.vcfo__eyebrow { font: var(--fw-halbfett) 13px/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fa-yellow); }
.vcfo__title { margin: 0; font: var(--fw-halbfett) 34px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--fa-white); }
.vcfo__body { margin: 0; font: var(--fw-kraftig) 18px/1.45 var(--font-body); letter-spacing: -0.01em; color: var(--fa-white); }

/* Honest-filter line */
.filter-line { background: var(--fa-grey-95); }
.filter-line__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.filter-line__text { margin: 0; font: var(--fw-kraftig) 24px/1.4 var(--font-display); letter-spacing: -0.02em; color: var(--fa-ink); text-wrap: balance; }

/* Pricing — section head */
.pg-sec-head { text-align: center; max-width: 760px; margin: 0 auto 44px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.pg-sec-sub { margin: 0; font: var(--fw-kraftig) 18px/1.5 var(--font-body); letter-spacing: -0.01em; color: rgba(5,14,30,0.7); text-wrap: pretty; }

/* Tier blurb + confirmed price amount */
.tier__blurb { margin: 0; font: var(--fw-kraftig) 15px/1.45 var(--font-body); letter-spacing: -0.01em; color: rgba(5,14,30,0.65); }
.tier--featured .tier__blurb { color: var(--fa-white-60); }
.tier__price-amt { font: var(--fw-halbfett) 40px/1 var(--font-display); letter-spacing: -0.02em; color: var(--fa-ink); }
.tier--featured .tier__price-amt { color: var(--fa-white); }

/* Reassurance strip — what you get with every package */
.reassure { background: var(--fa-white); }
.reassure__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.reassure__card { background: var(--fa-grey-95); padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: inset 0 0 0 1px rgba(5,14,30,0.06); }
.reassure__mark { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--fa-mint); color: var(--fa-ink); flex-shrink: 0; }
.reassure__text { margin: 0; font: var(--fw-kraftig) 16px/1.4 var(--font-body); letter-spacing: -0.01em; color: var(--fa-ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 600px) and (max-width: 1199px) {
  .pg-section { padding: 80px 0; }
  .pg-h2 { font-size: 36px; }
  .pg-hero { padding: 148px 0 72px; }
  .pg-hero__h1 { font-size: 46px; }
  .dt-hero { padding: 140px 0 72px; }
  .dt-hero__grid { gap: 40px; }
  .dt-hero__h1 { font-size: 42px; }
  .incl-grid { grid-template-columns: repeat(2, 1fr); }
  .fa-ptease__band { padding: 48px 40px; }
  .fa-ptease__title { font-size: 32px; }
}
@media (max-width: 899px) {
  .pillars__row--heroes, .pillars__row--mid { grid-template-columns: 1fr; }
  .pillar--support { grid-template-columns: 1fr; gap: 16px; }
  .who { grid-template-columns: 1fr; gap: 24px; }
  .why { grid-template-columns: 1fr; gap: 40px; }
  .dt-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .dt-hero__media { max-width: 440px; }
  .tiers { grid-template-columns: 1fr; }
  .reassure__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .pg-section { padding: 60px 0; }
  .pg-h2 { font-size: 28px; letter-spacing: -0.02em; }
  .pg-hero { padding: 120px 0 56px; }
  .pg-hero__h1 { font-size: 36px; }
  .pg-hero__intro, .pg-lead, .who__text { font-size: 18px; }
  .dt-hero { padding: 116px 0 56px; }
  .dt-hero__h1 { font-size: 34px; }
  .incl-grid { grid-template-columns: 1fr; }
  .fa-ptease { padding: 40px 0 60px; }
  .fa-ptease__band { padding: 36px 20px; }
  .fa-ptease__title { font-size: 26px; }
  .pp-pointer__text { font-size: 20px; }
  .faq__q { font-size: 18px; padding: 22px 4px; }
  .vcfo__title { font-size: 26px; }
  .filter-line__text { font-size: 19px; }
  .tier { padding: 28px; }
  .reassure__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Reviews + client-logo trust strip — SHARED source (pricing + case-studies).
   Rating line above a grayscale logo marquee. The fa-marquee-scroll keyframe
   lives in homepage/homepage.css (loaded on every page that uses this).
   ============================================================ */
.fa-tstrip{background:#FFFFFF;padding:0 0 80px}
.fa-tstrip__wrap{display:flex;flex-direction:column;gap:20px}
.fa-tstrip__rating{display:flex;align-items:baseline;justify-content:center;gap:12px}
.fa-tstrip__score{font-family:var(--font-body);font-weight:600;font-size:18px;letter-spacing:-0.18px;color:#050E1E}
.fa-tstrip__by{font-family:var(--font-body);font-weight:500;font-size:16px;letter-spacing:-0.18px;color:#050E1E}
.fa-tstrip__star{align-self:center;flex-shrink:0;display:block}
.fa-tstrip__marquee{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.fa-tstrip__track{display:flex;align-items:center;gap:80px;width:max-content;animation:fa-marquee-scroll var(--fa-marquee-dur,40s) linear infinite;will-change:transform}
.fa-tstrip__marquee:hover .fa-tstrip__track{animation-play-state:paused}
.fa-tstrip__logo{flex-shrink:0;display:inline-flex;align-items:center;opacity:0.6;transition:opacity 200ms ease}
.fa-tstrip__track .fa-tstrip__logo:hover{opacity:1}
.fa-tstrip__mark{display:block;background-color:#050E1E;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
@media (prefers-reduced-motion: reduce){.fa-tstrip__track{animation:none}}

/* ============================================================
   "More case studies" carousel — SHARED source (case-study detail pages).
   Heading + view-all (left/right), ONE feature card at a time (text left,
   client image right), prev/next arrows bottom-left. Flat, no shadows.
   ============================================================ */
.fa-morecs{background:#F2F2F2;padding:80px 0}
.fa-morecs__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.fa-morecs__title{margin:0;font:var(--fw-halbfett) 48px/1.1 var(--font-display);letter-spacing:-1.44px;color:#050E1E}
.fa-morecs__all{font:var(--fw-halbfett) 16px/1 var(--font-display);letter-spacing:-0.16px;color:#050E1E;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color 150ms ease}
.fa-morecs__all:hover{color:#5939F5}
.fa-morecs__all svg{transition:transform 200ms var(--ease-standard)}
.fa-morecs__all:hover svg{transform:translateX(3px)}
.fa-morecs__body{display:flex;align-items:stretch;justify-content:space-between;gap:60px;flex-wrap:wrap}
.fa-morecs__left{flex:1 1 572px;max-width:572px;min-width:0;display:flex;flex-direction:column}
.fa-morecs__name{margin:0 0 20px;font:var(--fw-halbfett) 32px/1.1 var(--font-display);letter-spacing:-0.64px;color:#050E1E}
.fa-morecs__desc{margin:0 0 24px;font:400 20px/1.45 "Epilogue",var(--font-body);letter-spacing:-0.2px;color:#050E1E}
.fa-morecs__view{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font:var(--fw-halbfett) 16px/1 var(--font-display);letter-spacing:-0.16px;color:#050E1E;text-decoration:none}
.fa-morecs__view svg{transition:transform 200ms var(--ease-standard)}
.fa-morecs__view:hover svg{transform:translateX(3px)}
.fa-morecs__spacer{flex:1 1 auto;min-height:40px}
.fa-morecs__nav{display:flex;gap:10px;margin-top:40px}
.fa-morecs__btn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:#050E1E;color:#fff;border:0;border-radius:0;cursor:pointer;transition:background 150ms ease,color 150ms ease}
.fa-morecs__btn:hover{background:#FBEB4F;color:#050E1E}
.fa-morecs__btn:disabled{opacity:0.4;cursor:default}
.fa-morecs__media{flex:1 1 572px;max-width:572px;min-width:0;height:400px;overflow:hidden;background:#e2e5e8}
.fa-morecs__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 400ms var(--ease-standard,ease)}
.fa-morecs__media:hover img{transform:scale(1.05)}
@media (max-width:767px){
  .fa-morecs{padding:72px 0}
  .fa-morecs__title{font-size:36px;letter-spacing:-1px}
  .fa-morecs__body{flex-direction:column;gap:24px}
  .fa-morecs__left,.fa-morecs__media{flex-basis:100%;max-width:100%}
  .fa-morecs__name{font-size:24px;letter-spacing:-0.48px}
  .fa-morecs__media{height:auto;aspect-ratio:3/2}
}

/* ============================================================
   Category filter bar — SHARED source (our-team + blog).
   Navy full-width bar, centered tag row; yellow active pill.
   Same markup/behaviour on every page: .ot-filter > .fa-container
   > .ot-filter__row > button.ot-tag(.is-active).
   ============================================================ */
.ot-filter{flex:0 0 auto;background:var(--fa-ink);padding:0}
.ot-filter__row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ot-tag{font-family:var(--font-display);font-weight:var(--fw-halbfett);font-size:18px;line-height:1;padding:20px;border:0;background:transparent;color:var(--fa-white);border-radius:100px;cursor:pointer;transition:background .15s ease,color .15s ease}
.ot-tag:hover{background:rgba(255,255,255,.12)}
.ot-tag.is-active{background:#FCEB4E;color:var(--fa-ink);border-radius:0}
@media (max-width:1199px){
  .ot-filter__row{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
  .ot-filter__row::-webkit-scrollbar{display:none}
  .ot-tag{flex:0 0 auto;white-space:nowrap}
}