/* Afortis "Company Registration" hub — self-contained styles (namespaced .chub-*).
   Layout = the banking hub (Figma 2301:6727) applied to company content. */

.chub {
	--chub-navy: #3a2a62;
	--chub-violet: #523f8a;
	--chub-muted-violet: #9674b5;
	--chub-ink: #262424;
	--chub-sec: #606060;
	--chub-muted: #968f8f;
	--chub-page: #f5f4f9;
	--chub-white: #ffffff;
	--chub-line: rgba(150, 116, 181, 0.3);
	/* wrap = 1280 content box + 2×24 gutter, so hub content sits at the SAME 1280 site-width
	   column as every normal page (and the embedded global chrome), not 100px narrower. */
	--chub-wrap: 1328px;
	--chub-pad: 24px;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--chub-ink);
	line-height: 1.5;
	box-sizing: border-box;
}
.chub *, .chub *::before, .chub *::after { box-sizing: inherit; }
.chub img { max-width: 100%; }

.chub-wrap { max-width: var(--chub-wrap); margin: 0 auto; padding-left: var(--chub-pad); padding-right: var(--chub-pad); }

/* ---- shared type ---- */
.chub-eyebrow { font-size: 14px; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; color: var(--chub-muted-violet); margin: 0 0 20px; }
/* Section headings are 44px (desktop) / 42px (mobile). Avada's global h2 typography (24/28px)
   otherwise wins over a single class, so scope + !important to beat it — covers both the hub's
   own `.chub-h2` (Choose Your Licence) and the reused `.afortis-awhy-head` (Why Clients Choose). */
.chub .chub-h2, .chub .afortis-awhy-head { font-family: "Arsenal", Georgia, serif; font-weight: 400; font-size: 44px !important; line-height: 1.05; color: var(--chub-ink); }
.chub-h2 { margin: 0 0 30px; }
/* Why-block spacing to match Figma 2376:5489: 40px below the heading (before the cards); the eyebrow
   baseline-aligns with the big heading (design puts it ~22px lower than the heading top), and the photo
   lines up with the top row of cards. */
.chub .afortis-awhy-head { margin: 0 0 40px; }
.chub .afortis-awhy-left .afortis-eyebrow { margin-top: 20px; margin-bottom: 48px; }
.chub-accent { color: var(--chub-violet); }
.chub-ic { flex: 0 0 auto; }

/* ---- buttons ---- */
.chub-btn-row { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.chub-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.2; text-decoration: none; padding: 15px 30px; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.chub-btn span { display: inline-block; }
.chub-btn-primary { background: var(--chub-navy); color: #fff; }
.chub-btn-primary:hover { background: var(--chub-violet); color: #fff; }
.chub-btn-outline { background: transparent; color: var(--chub-ink); border-color: var(--chub-violet); }
.chub-btn-outline:hover { background: var(--chub-violet); color: #fff; }
.chub-btn-onviolet { background: #fff; color: var(--chub-navy); }
.chub-btn-onviolet:hover { background: var(--chub-page); color: var(--chub-navy); }
.chub-btn:focus-visible { outline: 3px solid var(--chub-muted-violet); outline-offset: 2px; }

/* ================= Hero ================= */
.chub-hero { background: #fff; padding: 40px 0 60px; }
.chub-hero-grid { display: grid; grid-template-columns: 520px 1fr; gap: 60px; align-items: center; }
.chub-hero-media { align-self: stretch; min-height: 460px; background: linear-gradient(135deg, #d9d2e8, #b7a9d6); background-size: cover; background-position: center; }
.chub-crumbs { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--chub-muted); margin: 0 0 22px; }
.chub-crumbs a { color: var(--chub-muted); text-decoration: none; }
.chub-crumbs a:hover { color: var(--chub-violet); }
.chub-crumbs .chub-ic { width: 12px; height: 12px; }
.chub-hero-h1 { font-family: "Arsenal", Georgia, serif; font-weight: 400; font-size: 46px; line-height: 1.05; margin: 0 0 18px; color: var(--chub-ink); }
.chub-hero-intro { font-size: 16px; color: var(--chub-sec); margin: 0 0 28px; max-width: 520px; }
.chub-stats { display: flex; gap: 50px; margin: 0 0 28px; }
.chub-stat { display: flex; flex-direction: column; gap: 4px; }
.chub-stat-num { font-family: "Arsenal", Georgia, serif; font-weight: 400; font-size: 40px; line-height: 1; color: var(--chub-violet); }
.chub-stat-label { font-size: 14px; color: var(--chub-sec); }
.chub-hero-body { font-size: 14px; color: var(--chub-sec); margin: 0 0 28px; max-width: 540px; }

/* ============ Choose Your Licence (tabs + grid) ============ */
.chub-choose { background: var(--chub-page); padding: 60px 0; }
.chub-tabs { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--chub-line); padding-top: 30px; }
.chub-tab { font-family: inherit; font-size: 13px; line-height: 1.2; color: var(--chub-sec); background: #fff; border: 1px solid var(--chub-line); padding: 9px 18px; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.chub-tab:hover { border-color: var(--chub-violet); color: var(--chub-violet); }
.chub-tab.is-active { background: var(--chub-violet); border-color: var(--chub-violet); color: #fff; }
.chub-tab:focus-visible { outline: 3px solid var(--chub-muted-violet); outline-offset: 2px; }

.chub-filter-bar { border-top: 1px solid var(--chub-line); margin-top: 26px; padding-top: 16px; }
.chub-results { font-size: 14px; color: var(--chub-sec); margin: 0; }
.chub-results .chub-summary { color: var(--chub-ink); }

.chub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.chub-card { background: #fff; padding: 34px 30px; display: flex; flex-direction: column; }
.chub-card[hidden] { display: none; }
.chub-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.chub-card-title { font-family: "Arsenal", Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.12; color: var(--chub-navy); margin: 0; }
.chub-card-tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--chub-violet); background: var(--chub-page); padding: 5px 10px; white-space: nowrap; }
.chub-card-tag .chub-ic { width: 13px; height: 13px; }
.chub-card-auth { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--chub-sec); margin: 12px 0 0; }
.chub-card-auth .chub-ic { width: 16px; height: 16px; color: var(--chub-muted-violet); }
.chub-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.chub-chip { font-size: 12px; color: var(--chub-sec); border: 1px solid var(--chub-line); padding: 4px 10px; }
.chub-card-desc { font-size: 13px; color: var(--chub-sec); margin: 16px 0 0; }
.chub-card-facts { display: flex; gap: 30px; border-top: 1px solid var(--chub-line); margin-top: 20px; padding-top: 18px; }
.chub-fact { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.chub-fact .chub-ic { grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--chub-violet); }
.chub-fact-l { font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--chub-muted); }
.chub-fact-v { font-size: 14px; color: var(--chub-ink); }
.chub-card-foot { margin-top: auto; padding-top: 20px; }
.chub-card-link { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; color: var(--chub-violet); text-decoration: none; }
.chub-card-link .chub-ic { width: 16px; height: 16px; transition: transform .15s; }
.chub-card-link:hover { color: var(--chub-navy); text-decoration: underline; }
.chub-card-link:hover .chub-ic { transform: translateX(3px); }

.chub-empty { text-align: center; background: #fff; padding: 60px 30px; margin-top: 20px; }
.chub-empty-title { font-family: "Arsenal", Georgia, serif; font-weight: 400; font-size: 28px; color: var(--chub-navy); margin: 0 0 12px; }
.chub-empty-body { font-size: 15px; color: var(--chub-sec); max-width: 460px; margin: 0 auto 24px; }
.chub-empty .chub-btn-row { justify-content: center; }

/* ============ Why Clients Choose — the inner block is the site-wide `.afortis-awhy` skeleton
   (styled globally by apply_accounting_sections_css / apply_licence_sections_css). Only the
   section wrapper (band bg + padding) is hub-local. ============ */
.chub-why { background: var(--chub-white); padding: 60px 0; }

/* NB: the CTA strip + Reach-Out form are the site's GLOBAL chrome elements
   ([fusion_global] 5464/5465 + 5458/5459), styled by apply_cta_css / apply_form_css —
   no hub-local CSS for them here. */

/* ================= Responsive ================= */
@media (max-width: 1024px) {
	.chub { --chub-pad: 32px; }
	.chub-hero-grid { grid-template-columns: 1fr; gap: 32px; }
	.chub-hero-media { min-height: 280px; order: 2; }
	.chub-hero-h1 { font-size: 38px; }
}
@media (max-width: 760px) {
	.chub { --chub-pad: 20px; }
	.chub .chub-h2, .chub .afortis-awhy-head { font-size: 42px !important; }
	/* the desktop eyebrow offsets (for 2-col alignment) are just vertical space once stacked */
	.chub .afortis-awhy-left .afortis-eyebrow { margin-top: 0; margin-bottom: 16px; }
	.chub-hero-h1 { font-size: 32px; }
	.chub-eyebrow { margin-bottom: 14px; }
	.chub-hero, .chub-choose, .chub-why { padding: 40px 0; }
	.chub-stats { gap: 32px; }
	.chub-stat-num { font-size: 34px; }
	.chub-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
	.chub-card-facts { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.chub-btn, .chub-tab, .chub-card-link .chub-ic { transition: none; }
}

/* ---- Avada content-top band: the hidden page-title-bar exposes #main's top padding as a
   ~61px lilac strip above the hero. Zero it on the two hub pages (body-id + #main beats #main). ---- */
.page-id-1174 #main, .page-id-2287 #main { padding-top: 0; }

/* ---- Constrain the embedded global chrome (CTA strip + Reach-Out form) to the site container.
   On this 100-width template Avada sets `.fusion-row{max-width:100%}`, so the [fusion_global]
   content stretched edge-to-edge (unlike normal pages). Re-constrain the inner row to the 1280
   container with the same 50px gutter as .chub-wrap so its content lines up with the hub cards;
   the band background stays full-bleed (it sits on .fusion-fullwidth, not .fusion-row). ---- */
/* Constrain the embedded chrome to its NATURAL 1280 site width (the 100-width template otherwise
   lets it stretch edge-to-edge). 1280 = the same column the hub content now uses, so they align;
   and it's the width apply_cta_css designed the CTA button around, so the button stays flush with
   its heading (any other width shifts the button's 1/3 column out of line). Phones get the gutter. */
.page-id-1174 .afortis-cta .fusion-row, .page-id-2287 .afortis-cta .fusion-row,
.page-id-1174 .afortis-form-section .fusion-row, .page-id-2287 .afortis-form-section .fusion-row {
	max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important;
}
/* The CTA strip global (5465/5464) puts the heading/body in a 2_3 column whose left padding
   apply_cta_css never zeroes (it only zeroes the 1_3 button column) — so standalone here the
   heading sits ~23px right of the button. Zero the text column too so they line up (as on
   normal pages, where the strip is built without that column inset). */
.page-id-1174 .afortis-cta .fusion_builder_column_2_3,
.page-id-2287 .afortis-cta .fusion_builder_column_2_3 {
	--awb-spacing-left-large: 0% !important; --awb-spacing-right-large: 0% !important;
	--awb-spacing-left-medium: 0% !important; --awb-spacing-right-medium: 0% !important;
	--awb-spacing-left-small: 0% !important; --awb-spacing-right-small: 0% !important;
	padding-left: 0 !important;
}
@media (max-width: 1024px) {
	.page-id-1174 .afortis-cta .fusion-row, .page-id-2287 .afortis-cta .fusion-row,
	.page-id-1174 .afortis-form-section .fusion-row, .page-id-2287 .afortis-form-section .fusion-row {
		padding-left: 32px; padding-right: 32px; box-sizing: border-box;
	}
}
@media (max-width: 760px) {
	.page-id-1174 .afortis-cta .fusion-row, .page-id-2287 .afortis-cta .fusion-row,
	.page-id-1174 .afortis-form-section .fusion-row, .page-id-2287 .afortis-form-section .fusion-row {
		padding-left: 20px; padding-right: 20px;
	}
}