/* ==========================================================================
   FINIX design tokens + component styles
   Source of truth: design_handoff_finix_website/README.md + FINIX Website.dc.html
   ========================================================================== */

:root {
  --finix-navy: #17324D;
  --finix-navy-footer: #12283E;
  --finix-charcoal: #252A2E;
  --finix-body: #454B52;
  --finix-muted: #5A6068;
  --finix-bg: #F7F5F1;
  --finix-white: #FFFDFA;
  --finix-warm: #F1EDE6;
  --finix-accent: #B48A4A;
  --finix-accent-hover: #C4A05F;
  --finix-border: #E4DFD6;
  --finix-border-2: #EDE8E0;
  --finix-form-border: #D8D2C8;
  --finix-placeholder-ink: #8A8378;

  --finix-font-heading: 'Manrope', sans-serif;
  --finix-font-body: 'Inter', system-ui, sans-serif;
  --finix-font-mono: 'IBM Plex Mono', monospace;

  --finix-max: 1320px;
  --finix-max-wide: 1560px;
  --finix-gutter: 40px;
}

/* WordPress's Group block wraps its content in an extra
   .wp-block-group__inner-container div. Our layout rules (flex/grid) are
   written for the Group's direct children, so make that wrapper transparent
   to layout rather than rewriting every selector to reach one level deeper. */
.finix .wp-block-group__inner-container { display: contents; }

/* ---------- reset / base ---------- */
.finix { font-family: var(--finix-font-body); color: var(--finix-charcoal); background: var(--finix-bg); width: 100%; overflow-x: hidden; }
.finix, .finix *, .finix *::before, .finix *::after { box-sizing: border-box; }
.finix img { max-width: 100%; display: block; }
.finix a { text-decoration: none; }
/* Only bare, unclassed links (e.g. inline links typed into a WYSIWYG field)
   get the default gold link colour. Anything with its own class (buttons,
   nav links, card links, footer links...) controls its own colour — this
   rule must never fight them on specificity. */
.finix a:not([class]) { color: var(--finix-accent); }
.finix a:not([class]):hover { color: var(--finix-navy); }
.finix input, .finix select, .finix textarea { font-family: var(--finix-font-body); }
.finix h1, .finix h2, .finix h3, .finix h4 { font-family: var(--finix-font-heading); margin: 0; }
.finix p { margin: 0; }
.finix ul { margin: 0; padding: 0; list-style: none; }
.finix button { font-family: inherit; cursor: pointer; }

.finix-container { max-width: var(--finix-max); width: 100%; margin: 0 auto; padding: 0 var(--finix-gutter); }
.finix-container--wide { max-width: var(--finix-max-wide); }

.finix-section { padding: 84px 0; }
.finix-section--inner { padding: 76px 0; }
.finix-section--sub { padding: 64px 0; }
.finix-section--trust { padding: 44px 0; }
.finix-section--white { background: var(--finix-white); }
.finix-section--warm { background: var(--finix-warm); }
.finix-section--bg { background: var(--finix-bg); }
.finix-section--navy { background: var(--finix-navy); color: #fff; }

.finix-eyebrow { font-family: var(--finix-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--finix-accent); margin-bottom: 16px; }

.finix-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.finix-section-head h2 { font-size: clamp(28px,3.2vw,42px); line-height: 1.12; font-weight: 700; letter-spacing: -.015em; color: var(--finix-navy); max-width: 20ch; }

.finix-link-arrow { font-family: var(--finix-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--finix-navy); display: inline-flex; gap: 10px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--finix-accent); }
.finix-link-arrow:hover { color: var(--finix-accent); }

/* ---------- buttons ---------- */
.finix-btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--finix-font-heading); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 19px 34px; border: 1px solid transparent; border-radius: 0; }
.finix-btn--compact { padding: 16px 28px; font-size: 13px; }
.finix-btn--primary { background: var(--finix-accent); color: #fff; }
.finix-btn--primary:hover { background: var(--finix-accent-hover); color: #fff; }
.finix-btn--secondary { border-color: rgba(255,255,255,.75); color: #fff; background: transparent; }
.finix-btn--secondary:hover { background: #fff; color: var(--finix-navy); }
.finix-btn--nav { background: var(--finix-accent); color: #fff; font-size: 12px; padding: 14px 24px; }
.finix-btn--nav:hover { background: var(--finix-accent-hover); color: #fff; }

/* ---------- header ---------- */
.finix-header { position: sticky; top: 0; z-index: 40; background: var(--finix-navy); color: #fff; }
.finix-header__inner { display: flex; align-items: center; gap: 28px; padding: 16px var(--finix-gutter); max-width: var(--finix-max-wide); width: 100%; margin: 0 auto; flex-wrap: wrap; }
.finix-logo { display: flex; align-items: center; gap: 13px; color: #fff; }
.finix-logo:hover { color: #fff; }
.finix-logo-slot { width: 42px; height: 42px; border: 1px dashed rgba(255,255,255,.45); display: flex; align-items: center; justify-content: center; font-family: var(--finix-font-mono); font-size: 8px; line-height: 1.2; text-align: center; color: rgba(255,255,255,.6); flex: 0 0 42px; }
.finix-logo img { max-height: 42px; width: auto; }
.finix-wordmark { font-family: var(--finix-font-heading); font-size: 25px; font-weight: 700; letter-spacing: .22em; }

.finix-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; flex-wrap: wrap; }
.finix-nav__link { color: rgba(255,255,255,.88); font-size: 14px; font-weight: 500; }
.finix-nav__link:hover { color: var(--finix-accent-hover); }

.finix-nav-toggle { display: none; background: transparent; border: none; color: #fff; padding: 8px; margin-left: auto; }
.finix-nav-toggle svg { width: 26px; height: 26px; }

/* ---------- hero (home) ---------- */
.finix-hero { position: relative; min-height: 660px; display: flex; align-items: center; color: #fff; overflow: hidden; }
.finix-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finix-hero__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,25,40,.92) 0%, rgba(11,25,40,.72) 45%, rgba(11,25,40,.25) 100%); }
.finix-hero__content { position: relative; z-index: 2; max-width: var(--finix-max-wide); width: 100%; margin: 0 auto; padding: 96px var(--finix-gutter); }
.finix-hero__services { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-family: var(--finix-font-heading); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 26px; }
.finix-hero__services span.sep { opacity: .4; }
.finix-hero__title { color: #fff; font-size: clamp(38px,5vw,64px); line-height: 1.06; font-weight: 700; letter-spacing: -.02em; margin: 0 0 22px; max-width: 15ch; }
.finix-hero__lead { font-size: 18px; line-height: 1.65; font-weight: 300; color: rgba(255,255,255,.9); margin: 0 0 38px; max-width: 56ch; }
.finix-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.finix-hero__trust { margin-top: 44px; font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.75); }

/* ---------- inner-page navy hero band ---------- */
.finix-page-hero { background: var(--finix-navy); color: #fff; padding: 76px 0; }
.finix-page-hero--tall { padding: 76px 0; }
.finix-breadcrumb { font-family: var(--finix-font-mono); font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.finix-page-hero h1 { color: #fff; font-size: clamp(32px,4.4vw,56px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; margin: 0 0 20px; max-width: 18ch; }
.finix-page-hero p { font-size: 18px; line-height: 1.68; font-weight: 300; color: rgba(255,255,255,.85); margin: 0; max-width: 62ch; }

/* image hero (About) */
.finix-image-hero { position: relative; color: #fff; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; }
.finix-image-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finix-image-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,25,40,.55), rgba(11,25,40,.9)); }
.finix-image-hero__content { position: relative; max-width: var(--finix-max); margin: 0 auto; padding: 0 var(--finix-gutter) 64px; width: 100%; }
.finix-image-hero__content .finix-breadcrumb { color: rgba(255,255,255,.65); }
.finix-image-hero__content h1 { color: #fff; font-size: clamp(32px,4.4vw,56px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; margin: 0 0 18px; max-width: 18ch; }
.finix-image-hero__content p { font-size: 18px; line-height: 1.68; font-weight: 300; color: rgba(255,255,255,.88); margin: 0; max-width: 62ch; }

/* ---------- trust strip ---------- */
.finix-trust-strip { background: var(--finix-bg); border-bottom: 1px solid var(--finix-border); }
.finix-trust-strip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 36px; }
.finix-trust-item { display: flex; gap: 16px; align-items: flex-start; }
.finix-trust-item__mark { width: 38px; height: 38px; flex: 0 0 38px; border: 1.5px solid var(--finix-accent); display: flex; align-items: center; justify-content: center; font-family: var(--finix-font-heading); font-size: 11px; font-weight: 700; color: var(--finix-accent); }
.finix-trust-item__mark--badge { width: 38px; height: 46px; border: none; padding: 0; overflow: hidden; }
.finix-trust-item__mark--badge img, .finix-trust-item__mark--badge svg { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.finix figure { margin: 0; }
.finix-trust-item__mark--diamond { transform: rotate(45deg); }
.finix-trust-item__mark--circle { border-radius: 50%; }
.finix-trust-item__title { font-family: var(--finix-font-heading); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--finix-navy); margin-bottom: 7px; }
.finix-trust-item__desc { font-size: 14px; line-height: 1.55; color: var(--finix-muted); }

/* ---------- services grid (home, 9-up) ---------- */
.finix-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px,1fr)); gap: 14px; }
.finix-service-card { display: block; color: inherit; }
.finix-service-card__img { aspect-ratio: 3/4; overflow: hidden; background: #E7E2DA; }
.finix-service-card__img > a { display: block !important; width: 100%; height: 100%; }
.finix-service-card__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.finix-service-card__label { padding-top: 12px; font-family: var(--finix-font-heading); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--finix-navy); }
.finix-service-card__label a { color: inherit; }
.finix-service-card__label .arrow { color: var(--finix-accent); }
.finix-service-card:hover .finix-service-card__label,
.finix-service-card:hover .finix-service-card__label a { color: var(--finix-accent); }

/* ---------- about split (home) ---------- */
.finix-about-split { background: var(--finix-warm); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
.finix-about-split__media { position: relative; min-height: 520px; }
.finix-about-split__media img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.finix-about-split__caption { position: absolute; left: 0; bottom: 72px; background: var(--finix-bg); padding: 18px 26px; font-family: var(--finix-font-heading); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--finix-navy); }
.finix-about-split__body { padding: 76px 56px; display: flex; flex-direction: column; justify-content: center; }
.finix-about-split__body h2 { font-size: clamp(26px,3vw,40px); line-height: 1.13; font-weight: 700; letter-spacing: -.015em; color: var(--finix-navy); margin: 0 0 22px; }
.finix-about-split__body > p { font-size: 17px; line-height: 1.7; color: var(--finix-body); margin: 0 0 20px; max-width: 58ch; }
.finix-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 24px; margin: 14px 0 34px; }
.finix-benefit__title { font-family: var(--finix-font-heading); font-size: 16px; font-weight: 700; color: var(--finix-navy); margin-bottom: 5px; }
.finix-benefit__desc { font-size: 14px; line-height: 1.55; color: var(--finix-muted); }

/* ---------- project cards (featured + listing shared look) ---------- */
.finix-projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 24px; }
.finix-project-card { display: block; color: inherit; }
.finix-project-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #E7E2DA; }
.finix-project-card__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.finix-project-card__tag { position: absolute; left: 14px; bottom: 14px; background: rgba(23,50,77,.92); color: #fff; font-family: var(--finix-font-heading); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 8px 13px; }
.finix-project-card__title { font-family: var(--finix-font-heading); font-size: 19px; font-weight: 600; color: var(--finix-navy); padding-top: 15px; }
.finix-project-card__meta { font-size: 14px; color: var(--finix-muted); padding-top: 5px; }

/* ---------- testimonials ---------- */
.finix-testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 52px; align-items: center; }
.finix-testimonials h2 { font-size: clamp(26px,3vw,40px); line-height: 1.13; font-weight: 700; letter-spacing: -.015em; color: var(--finix-navy); }
.finix-testimonial__mark { font-family: var(--finix-font-heading); font-size: 44px; line-height: 1; color: var(--finix-accent); margin-bottom: 10px; }
.finix-testimonial__quote { font-size: 18px; line-height: 1.68; color: #33383E; font-style: italic; margin: 0 0 20px; min-height: 110px; }
.finix-testimonial__author { font-family: var(--finix-font-heading); font-size: 15px; font-weight: 700; color: var(--finix-navy); }
.finix-testimonial__place { font-size: 14px; color: var(--finix-muted); padding-top: 3px; }
.finix-testimonial__nav { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.finix-testimonial__btn { width: 44px; height: 44px; border: 1px solid #C9C2B6; background: transparent; color: var(--finix-navy); font-size: 16px; }
.finix-testimonial__btn:hover { border-color: var(--finix-accent); color: var(--finix-accent); }
.finix-testimonial__dots { display: flex; gap: 8px; margin-left: 8px; }
.finix-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: #C9C2B6; }
.finix-dot.is-active { background: var(--finix-accent); }

/* ---------- areas covered ---------- */
.finix-areas .finix-container { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.finix-areas--bordered { border-top: 1px solid var(--finix-border); }
.finix-areas__list { font-family: var(--finix-font-heading); font-size: 24px; font-weight: 600; color: var(--finix-navy); }

/* ---------- global CTA ---------- */
.finix-cta { position: relative; color: #fff; overflow: hidden; }
.finix-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finix-cta__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,25,40,.95), rgba(11,25,40,.78)); }
.finix-cta__grid { position: relative; max-width: var(--finix-max); margin: 0 auto; padding: 76px var(--finix-gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 48px; align-items: center; }
.finix-cta h2 { color: #fff; font-size: clamp(26px,3vw,40px); line-height: 1.14; font-weight: 700; letter-spacing: -.015em; margin: 0 0 18px; }
.finix-cta p { font-size: 17px; line-height: 1.68; color: rgba(255,255,255,.86); margin: 0 0 32px; max-width: 52ch; }
.finix-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.finix-cta__features { display: grid; gap: 24px; }
.finix-cta__feature { display: flex; gap: 16px; align-items: flex-start; }
.finix-cta__feature-icon { width: 34px; height: 34px; flex: 0 0 34px; border: 1.5px solid var(--finix-accent-hover); }
.finix-cta__feature-title { font-family: var(--finix-font-heading); font-size: 16px; font-weight: 600; }
.finix-cta__feature-desc { font-size: 14px; color: rgba(255,255,255,.75); padding-top: 4px; }

/* ---------- footer ---------- */
.finix-footer { background: var(--finix-navy-footer); color: rgba(255,255,255,.78); }
.finix-footer__grid { max-width: var(--finix-max); margin: 0 auto; padding: 60px var(--finix-gutter) 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 44px; }
.finix-footer__brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.finix-footer__logo-slot { width: 40px; height: 40px; border: 1px dashed rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; font-family: var(--finix-font-mono); font-size: 7px; text-align: center; color: rgba(255,255,255,.55); line-height: 1.2; }
.finix-footer__wordmark { font-family: var(--finix-font-heading); font-size: 22px; font-weight: 700; letter-spacing: .22em; color: #fff; }
.finix-footer__blurb { font-size: 14px; line-height: 1.7; }
.finix-footer__blurb .dim { color: rgba(255,255,255,.55); }
.finix-footer__badge { margin-top: 20px; width: 56px; height: 88px; display: block; }
.finix-footer__heading { font-family: var(--finix-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.finix-footer__links { display: grid; gap: 10px; font-size: 14px; }
.finix-footer__links a { color: rgba(255,255,255,.78); }
.finix-footer__links a:hover { color: var(--finix-accent-hover); }
.finix-footer__placeholder-label { font-family: var(--finix-font-mono); font-size: 11px; color: rgba(255,255,255,.55); }
.finix-footer__bottom { border-top: 1px solid rgba(255,255,255,.14); }
.finix-footer__bottom-inner { max-width: var(--finix-max); margin: 0 auto; padding: 20px var(--finix-gutter); display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.55); }
.finix-footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.finix-footer__legal-links a { color: rgba(255,255,255,.55); }
.finix-footer__legal-links a:hover { color: var(--finix-accent-hover); }

/* ---------- sticky mobile CTA ---------- */
.finix-sticky-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--finix-navy); padding: 12px 16px; gap: 12px; align-items: center; border-top: 1px solid rgba(255,255,255,.15); }
.finix-sticky-cta a { flex: 0 0 auto; color: #fff; font-family: var(--finix-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 14px 16px; }
.finix-sticky-cta__call { border: 1px solid rgba(255,255,255,.5); }
.finix-sticky-cta__start { flex: 1 1 auto; background: var(--finix-accent); }
#finix-footer-pad { height: 0; }

/* ---------- services page ---------- */
.finix-service-row-wrap { padding: 20px 0 40px; background: var(--finix-white); }
.finix-service-row { padding: 52px var(--finix-gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 52px; align-items: center; border-bottom: 1px solid #E9E4DB; max-width: var(--finix-max); margin: 0 auto; }
.finix-service-row:nth-of-type(even) .finix-service-row__media { order: 2; }
.finix-service-row__media { aspect-ratio: 4/3; overflow: hidden; background: #E7E2DA; }
.finix-service-row__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.finix-service-row__body h2 { font-size: clamp(26px,3vw,38px); line-height: 1.14; font-weight: 700; letter-spacing: -.015em; color: var(--finix-navy); margin: 0 0 18px; }
.finix-service-row__body > p { font-size: 17px; line-height: 1.7; color: var(--finix-body); margin: 0 0 22px; max-width: 56ch; }
.finix-service-row__points { display: grid; gap: 10px; margin-bottom: 26px; }
.finix-service-row__point { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--finix-body); }
.finix-service-row__point .dash { color: var(--finix-accent); }

.finix-supporting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }
.finix-supporting-card { display: block; background: var(--finix-white); border: 1px solid var(--finix-border); padding: 26px; color: inherit; }
.finix-supporting-card:hover { border-color: var(--finix-accent); }
.finix-supporting-card__title { font-family: var(--finix-font-heading); font-size: 19px; font-weight: 600; color: var(--finix-navy); margin-bottom: 10px; }
.finix-supporting-card__desc { font-size: 15px; line-height: 1.6; color: var(--finix-muted); }

/* ---------- projects archive ---------- */
.finix-filters { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--finix-border); margin-bottom: 34px; }
.finix-filter-chip { font-family: var(--finix-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 14px 20px; border: 1px solid var(--finix-form-border); background: transparent; color: var(--finix-navy); }
.finix-filter-chip.is-active { border-color: var(--finix-accent); background: var(--finix-accent); color: #fff; }

.finix-listing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 28px; }
.finix-listing-card { display: block; color: inherit; background: #fff; border: 1px solid var(--finix-border-2); }
.finix-listing-card:hover { border-color: var(--finix-accent); }
.finix-listing-card__body { padding: 22px 24px 26px; }
.finix-listing-card__title { font-family: var(--finix-font-heading); font-size: 20px; font-weight: 600; color: var(--finix-navy); }
.finix-listing-card__meta { font-size: 14px; color: var(--finix-muted); padding: 6px 0 12px; }
.finix-listing-card__summary { font-size: 15px; line-height: 1.6; color: var(--finix-body); margin-bottom: 16px; }
.finix-listing-card__link { font-family: var(--finix-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--finix-accent); }

/* ---------- single project (case study) ---------- */
.finix-case-breadcrumb { background: var(--finix-bg); padding: 26px 0; border-bottom: 1px solid var(--finix-border); font-size: 13px; color: var(--finix-muted); }
.finix-case-breadcrumb a { color: var(--finix-muted); }
.finix-case-breadcrumb a:hover { color: var(--finix-accent); }
.finix-case-breadcrumb .sep { padding: 0 8px; }
.finix-case-breadcrumb .current { color: var(--finix-navy); }

.finix-case-intro { background: var(--finix-white); padding: 56px 0 0; }
.finix-case-intro h1 { font-size: clamp(32px,4.4vw,54px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: var(--finix-navy); margin: 0 0 22px; max-width: 20ch; }
.finix-case-intro__summary { font-size: 18px; line-height: 1.7; color: var(--finix-body); margin: 0 0 40px; max-width: 70ch; }
.finix-case-hero-img { aspect-ratio: 21/9; overflow: hidden; background: #E7E2DA; margin-bottom: 34px; }
.finix-case-hero-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.finix-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1px; background: var(--finix-border); border: 1px solid var(--finix-border); margin-bottom: 64px; }
.finix-spec-cell { background: var(--finix-bg); padding: 22px 24px; }
.finix-spec-cell__label { font-family: var(--finix-font-heading); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--finix-placeholder-ink); margin-bottom: 8px; }
.finix-spec-cell__value { font-family: var(--finix-font-heading); font-size: 18px; font-weight: 600; color: var(--finix-navy); }

.finix-two-col { background: var(--finix-white); padding: 0 0 64px; }
.finix-two-col__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 56px; }
.finix-two-col h2 { font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--finix-navy); margin: 0 0 16px; }
.finix-two-col p { font-size: 17px; line-height: 1.72; color: var(--finix-body); margin: 0 0 16px; }
.finix-two-col p:last-child { margin-bottom: 0; }

.finix-before-after { background: var(--finix-warm); padding: 64px 0; }
.finix-before-after h2, .finix-gallery h2, .finix-related h2 { font-size: clamp(24px,2.6vw,34px); font-weight: 700; color: var(--finix-navy); margin: 0 0 28px; }
.finix-before-after__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 24px; }
.finix-before-after__img { aspect-ratio: 4/3; overflow: hidden; background: #E7E2DA; }
.finix-before-after__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.finix-before-after__img--before img { filter: saturate(.55); }
.finix-before-after__label { font-family: var(--finix-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding-top: 12px; }
.finix-before-after__label--before { color: var(--finix-placeholder-ink); }
.finix-before-after__label--after { color: var(--finix-accent); }

.finix-gallery { background: var(--finix-white); padding: 64px 0; }
.finix-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 16px; }
.finix-gallery-grid__item { aspect-ratio: 4/3; overflow: hidden; background: #E7E2DA; cursor: zoom-in; }
.finix-gallery-grid__item img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.finix-back-link { padding-top: 36px; }

.finix-related { background: var(--finix-warm); padding: 64px 0; }

/* lightbox */
.finix-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(11,25,40,.94); display: none; align-items: center; justify-content: center; padding: 40px; }
.finix-lightbox.is-open { display: flex; }
.finix-lightbox img { max-width: 100%; max-height: 85vh; }
.finix-lightbox__close { position: absolute; top: 24px; right: 32px; color: #fff; font-size: 32px; background: none; border: none; line-height: 1; }
.finix-lightbox__prev, .finix-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 28px; background: none; border: none; padding: 12px 18px; }
.finix-lightbox__prev { left: 12px; }
.finix-lightbox__next { right: 12px; }

/* ---------- about page ---------- */
.finix-fmb-card { align-self: start; background: var(--finix-navy); color: #fff; padding: 40px; }
.finix-fmb-card__eyebrow { font-family: var(--finix-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--finix-accent-hover); margin-bottom: 20px; }
.finix-fmb-card__row { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.finix-fmb-card__badge { width: 88px; height: 60px; flex: 0 0 88px; border: 1px dashed rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; font-family: var(--finix-font-mono); font-size: 8px; color: rgba(255,255,255,.55); text-align: center; line-height: 1.3; }
.finix-fmb-card__copy { font-size: 15px; line-height: 1.68; color: rgba(255,255,255,.85); margin: 0; }
.finix-fmb-card__link { font-family: var(--finix-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--finix-accent-hover); border-bottom: 1px solid rgba(196,160,95,.5); padding-bottom: 5px; }

.finix-values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 28px; }
.finix-value-card { border-top: 2px solid var(--finix-accent); padding-top: 18px; }
.finix-value-card__title { font-family: var(--finix-font-heading); font-size: 19px; font-weight: 700; color: var(--finix-navy); margin-bottom: 8px; }
.finix-value-card__desc { font-size: 15px; line-height: 1.68; color: var(--finix-muted); }

.finix-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 24px; }
.finix-step-card { background: var(--finix-bg); padding: 28px 26px; border-left: 2px solid var(--finix-accent); }
.finix-step-card__n { font-family: var(--finix-font-heading); font-size: 13px; font-weight: 700; color: var(--finix-accent); margin-bottom: 10px; }
.finix-step-card__title { font-family: var(--finix-font-heading); font-size: 18px; font-weight: 600; color: var(--finix-navy); margin-bottom: 8px; }
.finix-step-card__desc { font-size: 15px; line-height: 1.65; color: var(--finix-muted); }

.finix-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 22px; }
.finix-team-card__photo { aspect-ratio: 1/1; background: repeating-linear-gradient(135deg,#E2DCD2 0 12px,#EAE4DA 12px 24px); display: flex; align-items: flex-end; padding: 12px; }
.finix-team-card__photo span { font-family: var(--finix-font-mono); font-size: 9px; color: var(--finix-placeholder-ink); }
.finix-team-card__name { font-family: var(--finix-font-heading); font-size: 17px; font-weight: 600; color: var(--finix-navy); padding-top: 14px; }
.finix-team-card__role { font-size: 14px; color: var(--finix-muted); padding-top: 4px; }

/* ---------- contact page ---------- */
.finix-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 56px; align-items: start; }
.finix-form { display: grid; gap: 20px; }
.finix-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; }
.finix-field { display: grid; gap: 8px; }
.finix-field label, .finix-field span.finix-field-label { font-family: var(--finix-font-heading); font-size: 13px; font-weight: 600; color: var(--finix-navy); }
.finix-field input, .finix-field select, .finix-field textarea { border: 1px solid var(--finix-form-border); background: #fff; padding: 14px 16px; font-size: 15px; color: var(--finix-charcoal); width: 100%; }
.finix-field input:focus, .finix-field select:focus, .finix-field textarea:focus { outline: 2px solid var(--finix-accent); outline-offset: 1px; }
.finix-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--finix-muted); }
.finix-consent input { margin-top: 3px; }
.finix-spam-slot { font-family: var(--finix-font-mono); font-size: 11px; color: var(--finix-placeholder-ink); border: 1px dashed var(--finix-form-border); padding: 12px 14px; }
.finix-form-note { font-size: 14px; color: var(--finix-muted); min-height: 20px; }

.finix-contact-card { background: var(--finix-warm); padding: 32px; }
.finix-contact-card__rows { display: grid; gap: 14px; font-size: 16px; line-height: 1.6; color: #33383E; }
.finix-contact-card__rows .placeholder-label { font-family: var(--finix-font-mono); font-size: 11px; color: var(--finix-placeholder-ink); display: block; margin-bottom: 3px; }
.finix-contact-card__rows .hours { padding-top: 6px; border-top: 1px solid #DFD9CF; }
.finix-map-slot { aspect-ratio: 4/3; background: repeating-linear-gradient(135deg,#E2DCD2 0 12px,#EAE4DA 12px 24px); display: flex; align-items: center; justify-content: center; font-family: var(--finix-font-mono); font-size: 11px; color: var(--finix-placeholder-ink); text-align: center; padding: 20px; }
.finix-areas-list { font-size: 16px; line-height: 1.8; color: #33383E; }

/* Fluent Forms visual alignment inside .finix-form-wrap */
.finix-form-wrap .ff-el-form-control { border: 1px solid var(--finix-form-border) !important; padding: 14px 16px !important; font-size: 15px !important; height: auto !important; border-radius: 0 !important; }
.finix-form-wrap .ff-el-form-control:focus { outline: 2px solid var(--finix-accent); outline-offset: 1px; box-shadow: none !important; border-color: var(--finix-form-border) !important; }
.finix-form-wrap label.ff-el-input--label { font-family: var(--finix-font-heading) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--finix-navy) !important; }
.finix-form-wrap .ff-btn-submit { background: var(--finix-accent) !important; border-radius: 0 !important; font-family: var(--finix-font-heading) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; padding: 19px 36px !important; border: none !important; }
.finix-form-wrap .ff-btn-submit:hover { background: var(--finix-accent-hover) !important; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .finix-sticky-cta { display: flex; }
  #finix-footer-pad { height: 76px; }
  .finix-nav { display: none; }
  .finix-nav.is-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--finix-navy); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px var(--finix-gutter) 20px; }
  .finix-nav.is-open .finix-nav__link { padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.1); }
  .finix-nav.is-open .finix-btn--nav { margin-top: 14px; }
  .finix-nav-toggle { display: block; }
  .finix-header__inner { position: relative; }
}
@media (min-width: 901px) {
  .finix-nav-toggle { display: none !important; }
}