/* ============================================================ BrokerVerse — Global Stylesheet Design tokens, resets, and shared components used across every page. Page-specific variations live at the bottom, scoped to that page's class so nothing here needs to be duplicated or repeated per page. ============================================================ */ /* ---- Design tokens ---- */ :root { --navy: #1E2545; --navy-deep: #131828; --navy-2: #2A3158; --orange: #F26522; --orange-pale: #FCE9DC; --orange-50: #FEF3EC; --cream: #F4F1EA; --cream-2: #EBE6DB; --cream-3: #FBF9F4; --paper: #FFFFFF; --rule: #E0DACB; --rule-soft: #ECE6D8; --text: #3E4566; --muted: #7A839E; --serif: "Cormorant Garamond",Georgia,serif; --sans: "DM Sans",sans-serif; --max: 1280px; --pad: 64px; --green: #3CB371; } /* ---- Base & reset ---- */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html,body { background: var(--paper); font-family: var(--sans); color: var(--navy); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .nav-link.active { color: var(--orange); } .nav-link:hover::after, .nav-link.active::after { right: 0; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: var(--orange); display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ""; width: 32px; height: 1.5px; background: var(--orange); display: block; } .eyebrow.navy { color: var(--navy); } .eyebrow.navy::before { background: var(--navy); } .eyebrow.light { color: rgba(255,255,255,0.85); } .eyebrow.light::before { background: var(--orange); } .btn-primary { background: var(--orange); color: #fff; } .btn-primary:hover { background: #D9531A; } .btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); } .btn-ghost:hover { background: var(--navy); color: #fff; } .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); } .btn-ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; } .btn:hover .arr { transform: translateX(3px); } .nav { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule); } .nav::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--orange) 0%,var(--orange) 38%,var(--navy) 38%,var(--navy) 100%); } .nav-menu { display: flex; align-items: center; gap: 38px; } .nav-link:hover::after { right: 0; } .nav-link.has-caret::after { content: none; } .caret { display: inline-block; margin-left: 6px; font-size: 9px; color: var(--muted); transform: translateY(-1px); } .hero-eyebrow { margin-bottom: 18px; } .hero-ctas { display: flex; gap: 12px; align-items: center; margin-bottom: 26px; } .hero-meta { display: flex; gap: 28px; padding-top: 9px; border-top: 1px solid var(--rule); max-width: 500px; } .hero-meta-item .k { font-family: var(--sans); font-weight: 600; font-size: 21px; color: var(--navy); line-height: 1; } .hero-meta-item .k em { color: var(--orange); font-style: normal; } .hero-meta-item .l { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 1.6px; text-transform: uppercase; margin-top: 6px; } .hero-meta-item { border-right: 1px solid #e0dacb; padding: 0px 10px 0px 0px; } .hero-visual { position: relative; height: 652px; max-height: 72vh; } .hero-photo { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: var(--navy); box-shadow: 0 30px 80px -30px rgba(30,37,69,0.4); } .hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) brightness(1.02); } .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(30,37,69,0.06) 0%,rgba(30,37,69,0.35) 100%); } .hero-photo-tag { position: absolute; left: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; background: rgba(19,24,40,0.7); backdrop-filter: blur(8px); padding: 8px 12px; border-radius: 99px; font-size: 9.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #fff; } .hero-photo-tag .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(242,101,34,.25); } .hero-card { position: absolute; left: 32px; bottom: 28px; z-index: 3; background: #000000cc; border-radius: 6px; padding: 18px 22px; width: 240px; box-shadow: 0 18px 40px -10px rgba(30,37,69,0.28); border-top: 3px solid var(--orange); } .hero-card-eb { font-size: 18px; font-weight: 700; color: var(--orange); letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 8px; } .hero-card-n { font-family: var(--serif); font-weight: 700; font-size: 46px; line-height: 0.9; color: var(--navy); letter-spacing: -1.2px; } .hero-card-n .pct { font-size: 28px; color: var(--orange); vertical-align: top; margin-left: 2px; } .hero-card-l { font-size: 10.5px; color: var(--text); margin-top: 8px; line-height: 1.45; } .hero-card-2 { position: absolute; right: -28px; top: 36px; z-index: 3; background: var(--navy); color: #fff; border-radius: 6px; padding: 16px 20px; width: 210px; box-shadow: 0 16px 36px -10px rgba(19,24,40,0.4); } .hero-card-2 .lbl { font-size: 8.5px; color: rgba(255,255,255,0.5); letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 7px; } .hero-card-2 .qt { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.3; font-weight: 500; letter-spacing: -0.1px; } .hero-card-2 .qt em { color: var(--orange); font-weight: 700; } .hero-card-2 .auth { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 600; } .trust-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 48px; padding: 26px var(--pad); max-width: var(--max); margin: 0 auto; } .trust-lbl { font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: 2.2px; text-transform: uppercase; line-height: 1.4; max-width: 200px; } .trust-lbl em { color: var(--orange); font-style: normal; } .trust-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; align-items: center; } .trust-chip { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 17px; color: var(--navy); padding: 14px 6px; border-left: 1px solid var(--rule); letter-spacing: -0.3px; } .trust-chip:first-child { border-left: none; } .trust-chip .num { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 11px; color: var(--orange); letter-spacing: 1.5px; } .section { padding: 110px var(--pad); } .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 60px; align-items: end; } .section-head .h-r { padding-bottom: 6px; } .section-h { font-family: var(--serif); font-weight: 600; font-size: 54px; line-height: 1.05; color: var(--navy); letter-spacing: -0.8px; margin-top: 24px; } .section-h em { color: var(--orange); font-style: italic; font-weight: 700; } .section-lede { font-size: 16px; color: var(--text); line-height: 1.7; font-weight: 400; } .problem { background: var(--cream); } .prob-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .prob-card { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 30px 26px 28px; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .prob-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); } .prob-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(30,37,69,0.25); } .prob-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--orange-50); border: 1.5px solid var(--orange); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .prob-icon svg { width: 20px; height: 20px; } .prob-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; letter-spacing: 0.1px; } .prob-desc { font-size: 13.5px; line-height: 1.6; color: var(--text); } .prob-num { position: absolute; right: 18px; top: 14px; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 18px; color: var(--orange); opacity: 0.55; letter-spacing: -0.3px; } .model { background: var(--paper); position: relative; overflow: hidden; } .model::after { content: ""; position: absolute; right: -200px; bottom: -200px; width: 560px; height: 560px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.18); pointer-events: none; } .model::before { content: ""; position: absolute; right: -80px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle,rgba(242,101,34,0.06),transparent 70%); pointer-events: none; } .model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; z-index: 1; } .model-card { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 30px 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; position: relative; } .model-card-ico { width: 54px; height: 54px; border-radius: 10px; background: var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .model-card-ico svg { width: 24px; height: 24px; } .model-card-t { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 6px; letter-spacing: 0.1px; } .model-card-d { font-size: 13.5px; color: var(--text); line-height: 1.6; max-width: 420px; } .model-card-n { font-family: var(--sans); font-style: italic; font-weight: 600; font-size: 24px; color: var(--orange-pale); letter-spacing: 1px; line-height: 1; } .model-cta { margin-top: 60px; display: flex; justify-content: space-between; align-items: center; padding: 30px 36px; background: var(--navy-deep); border-radius: 6px; color: #fff; position: relative; z-index: 1; } .model-cta .t { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px; letter-spacing: -0.2px; } .model-cta .t em { color: var(--orange); font-weight: 700; } .cap { background: var(--cream); } .cap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } .cap-card { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 30px 26px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; min-height: 340px; } .cap-card::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; background: var(--orange); } .cap-ico { width: 46px; height: 46px; border-radius: 9px; background: var(--navy); display: flex; align-items: center; justify-content: center; margin-top: 8px; } .cap-ico svg { width: 20px; height: 20px; } .cap-t { font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: 0.1px; line-height: 1.25; } .cap-list { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; } .cap-li { font-size: 13px; line-height: 1.5; color: var(--text); padding-left: 14px; position: relative; } .cap-li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 1.5px; background: var(--orange); } .cap-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule-soft); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600; color: var(--orange); display: flex; align-items: center; gap: 6px; } .who { background: var(--paper); } .who-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .who-card { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 32px 28px 30px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; transition: background .25s ease, transform .25s ease; } .who-card:hover { background: var(--paper); transform: translateY(-3px); box-shadow: 0 16px 40px -22px rgba(30,37,69,.25); } .who-num { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 28px; color: var(--orange); line-height: 1; letter-spacing: 1px; } .who-t { font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.2; } .who-d { font-size: 13.5px; color: var(--text); line-height: 1.6; } .who-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; } .who-tag { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; color: var(--navy); background: var(--cream); padding: 6px 10px; border-radius: 99px; border: 1px solid var(--rule); } .impact { background: var(--navy); color: #fff; position: relative; overflow: hidden; } .impact::after { content: ""; position: absolute; right: -160px; top: -160px; width: 560px; height: 560px; border-radius: 50%; border: 1px solid rgba(242,101,34,0.12); } .impact::before { content: ""; position: absolute; left: -200px; bottom: -200px; width: 480px; height: 480px; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.06); } .impact .section-h { color: #fff; } .impact .section-lede { color: rgba(255,255,255,0.6); } .impact-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; position: relative; z-index: 1; } .impact-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-top: 2px solid var(--orange); border-radius: 6px; padding: 36px 22px 30px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } .impact-n { font-family: var(--sans); font-weight: 700; font-size: 39px; color: #fff; line-height: 0.85; } .impact-n .sm { font-size: 44px; color: var(--orange); margin-left: 2px; vertical-align: middle; } .impact-l { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #fff; line-height: 1.5; } .impact-bottom { margin-top: 18px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; position: relative; z-index: 1; } .impact-quote { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-left: 3px solid var(--orange); border-radius: 0 6px 6px 0; padding: 30px 36px; } .impact-quote-m { font-family: var(--serif); font-size: 48px; color: var(--orange); line-height: 0.5; font-weight: 700; } .impact-quote-t { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.35; letter-spacing: -0.2px; margin-top: 14px; } .impact-quote-t em { color: var(--orange); font-weight: 700; } .impact-quote-a { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; color: var(--orange); } .impact-quote-a span { display: block; margin-top: 4px; color: rgba(255,255,255,0.55); letter-spacing: 1.4px; font-weight: 500; } .impact-why { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 30px 32px; display: flex; flex-direction: column; gap: 18px; } .impact-why-row { display: flex; gap: 14px; align-items: flex-start; } .impact-why-d { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-top: 7px; flex-shrink: 0; } .impact-why-t { font-size: 13.5px; color: rgba(255,255,255,0.78); line-height: 1.55; } .impact-why-t b { color: #fff; font-weight: 700; } .founder-inner { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; } .founder-photo { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4/5; background: var(--cream-2); border: 1px solid var(--rule); box-shadow: 0 30px 60px -30px rgba(30,37,69,0.3); } .founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(0.95); } .founder-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to top,rgba(19,24,40,0.85),transparent); pointer-events: none; } .founder-cap { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 16px; color: #fff; } .founder-cap .role { font-size: 10px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255,255,255,0.7); } .founder-cap .nm { font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1; margin-top: 6px; letter-spacing: -0.4px; } .founder-cap .yrs { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 34px; color: var(--orange); letter-spacing: -0.5px; line-height: 1; } .founder-cap .yrs span { font-size: 14px; display: block; letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--sans); font-style: normal; color: rgba(255,255,255,0.65); font-weight: 500; margin-top: 6px; } .founder-h { font-family: var(--serif); font-weight: 600; font-size: 52px; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin: 18px 0 20px; } .founder-h em { color: var(--orange); font-style: italic; font-weight: 700; } .founder-bio { font-size: 16px; line-height: 1.75; color: var(--text); margin-bottom: 24px; max-width: 600px; } .founder-creds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; max-width: 580px; } .founder-cred { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 500; color: var(--navy); line-height: 1.45; } .founder-cred::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex-shrink: 0; margin-top: 7px; } .founder-quote em { color: var(--orange); font-weight: 700; } .cta { background: var(--orange); position: relative; overflow: hidden; } .cta::after { content: ""; position: absolute; right: -100px; top: -100px; width: 380px; height: 380px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.18); } .cta::before { content: ""; position: absolute; right: -40px; bottom: -160px; width: 300px; height: 300px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.14); } .cta-h em { font-style: italic; font-weight: 700; color: var(--navy); } .cta-r { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .cta-sub { font-size: 14.5px; color: rgba(255,255,255,0.92); line-height: 1.6; max-width: 380px; } .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; } .btn-cta-dark { background: var(--navy); color: #fff; border-color: var(--navy); } .btn-cta-dark:hover { background: var(--navy-deep); border-color: var(--navy-deep); } .btn-cta-light { background: #fff; color: var(--navy); border-color: #fff; } .btn-cta-light:hover { background: transparent; color: #fff; border-color: #fff; } .foot { background: var(--navy-deep); color: #fff; } .foot-top { padding: 72px var(--pad) 56px; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } .foot-brand .logo-mark { background: #fff; padding: 14px 18px; border-radius: 6px; display: inline-block; margin-bottom: 24px; } .foot-brand .tag { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.5; margin-bottom: 18px; max-width: 320px; } .foot-brand .tag em { color: var(--orange); font-weight: 700; } .foot-col-h { font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 16px; } .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .foot-col a:hover { color: #fff; } .foot-contact .row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.5; margin-bottom: 12px; } .foot-contact .row b { color: #fff; font-weight: 600; } .foot-contact .row em { color: var(--orange); font-style: normal; } .foot-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 24px var(--pad); display: flex; justify-content: space-between; align-items: center; gap: 24px; max-width: var(--max); margin: 0 auto; } .foot-bottom .links { display: flex; gap: 24px; } .foot-bottom .links a:hover { color: #fff; } .foot-tag { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 13px; color: var(--orange); letter-spacing: 0.3px; } .divline { display: block; width: 60px; height: 2px; background: var(--orange); margin: 14px 0 18px; } .nav-item { position: relative; } .nav-item.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown { position: absolute; top: calc(100% + 16px); left: -22px; width: 352px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 34px 70px -34px rgba(30,37,69,.40); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease,transform .2s ease,visibility .2s ease; z-index: 40; } .dropdown::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; } .dropdown::after { content: ""; position: absolute; top: -7px; left: 34px; width: 13px; height: 13px; background: var(--paper); border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); transform: rotate(45deg); } .dd-item { display: flex; align-items: flex-start; gap: 14px; padding: 13px 14px; border-radius: 8px; transition: background .16s ease; } .dd-item:hover { background: var(--cream); } .dd-item.active { background: var(--orange-50); } .dd-n { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 19px; color: var(--orange); line-height: 1; min-width: 22px; padding-top: 1px; } .dd-tx { display: flex; flex-direction: column; } .dd-t { font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.2; } .dd-d { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; } img,video,iframe { max-width: 100%; } * { min-width: 0; } .hamburger-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; padding: 0; flex-shrink: 0; order: 99; } .hamburger-btn span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s ease,opacity .25s ease; } .drawer-overlay { position: fixed; inset: 0; background: rgba(19,24,40,.55); opacity: 0; visibility: hidden; transition: opacity .3s ease,visibility .3s ease; z-index: 998; } .drawer-overlay.open { opacity: 1; visibility: visible; } .mobile-drawer { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(86vw,340px); background: var(--paper); z-index: 999; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: -24px 0 60px -20px rgba(19,24,40,.35); overflow-y: auto; } .mobile-drawer.open { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 2; } .drawer-logo { height: 36px; width: auto; } .drawer-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--navy); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease,color .2s ease,border-color .2s ease; flex-shrink: 0; } .drawer-close:hover { background: var(--navy); color: #fff; border-color: var(--navy); } .drawer-nav { display: flex; flex-direction: column; padding: 8px 0; flex: 1; } a.drawer-link,button.drawer-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 20px; font-size: 15px; font-weight: 500; color: var(--navy); border-bottom: 1px solid var(--rule-soft); background: transparent; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; cursor: pointer; font-family: var(--sans); } a.drawer-link.active { color: var(--orange); } .drawer-caret { font-size: 11px; color: var(--muted); transition: transform .25s ease; flex-shrink: 0; } .drawer-has-sub.open .drawer-caret { transform: rotate(180deg); } .drawer-sub { max-height: 0; overflow: hidden; background: var(--cream-3); transition: max-height .3s ease; } .drawer-has-sub.open .drawer-sub { max-height: 400px; } .drawer-sub a { display: block; padding: 12px 20px 12px 34px; font-size: 13.5px; color: var(--text); border-bottom: 1px solid var(--rule-soft); } .drawer-sub a:last-child { border-bottom: none; } .drawer-foot { padding: 16px 20px 24px; border-top: 1px solid var(--rule); } .drawer-foot .btn { width: 100%; justify-content: center; } body.drawer-open { overflow: hidden; } .nav-link:hover::after,.nav-link.active::after { right: 0; } .pillar-tag { display: inline-flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--rule); padding: 8px 14px 8px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--navy); margin-bottom: 18px; position: relative; z-index: 1; } .pillar-tag .n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0; } .hero-r::before { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle,rgba(242,101,34,0.10),transparent 70%); pointer-events: none; } .hero-r-h em { color: var(--orange); font-style: italic; font-weight: 700; } .overview { padding: 90px var(--pad); background: var(--paper); } .overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .overview-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .overview-h em { color: var(--orange); font-style: italic; font-weight: 700; } .overview-copy p { font-size: 15px; line-height: 1.75; color: var(--text); margin-bottom: 18px; } .overview-copy p:last-child { margin-bottom: 0; } .overview-copy p b { color: var(--navy); font-weight: 600; } .subs { padding: 90px var(--pad); background: var(--cream); } .subs-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 42px; align-items: end; } .subs-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .subs-h em { color: var(--orange); font-style: italic; font-weight: 700; } .subs-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .subs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .sub { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 34px 36px 32px; position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; } .sub::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); } .sub-ico { width: 54px; height: 54px; border-radius: 10px; background: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sub-ico svg { width: 24px; height: 24px; } .sub-t { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; letter-spacing: 0.1px; } .sub-d { font-size: 13.5px; color: var(--text); line-height: 1.65; margin-bottom: 14px; } .sub-list { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--rule); } .sub-li { font-size: 13px; color: var(--text); line-height: 1.5; padding-left: 14px; position: relative; } .sub-li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 1.5px; background: var(--orange); } .delivery { padding: 90px var(--pad); background: var(--paper); position: relative; overflow: hidden; } .delivery::after { content: ""; position: absolute; right: -160px; bottom: -160px; width: 460px; height: 460px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.16); pointer-events: none; } .delivery-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 42px; align-items: end; position: relative; z-index: 1; } .delivery-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .delivery-h em { color: var(--orange); font-style: italic; font-weight: 700; } .delivery-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; position: relative; z-index: 1; } .flow-step { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 30px 26px 24px; display: flex; flex-direction: column; gap: 12px; position: relative; min-height: 240px; } .flow-step::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; background: var(--orange); } .flow-eb { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; color: var(--orange); } .flow-t { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: 0.1px; line-height: 1.25; } .flow-d { font-size: 13px; color: var(--text); line-height: 1.55; } .flow-tag { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); font-weight: 600; } .outcomes { background: var(--navy); color: #fff; padding: 90px var(--pad); position: relative; overflow: hidden; } .outcomes::after { content: ""; position: absolute; left: -160px; top: -160px; width: 480px; height: 480px; border-radius: 50%; border: 1px solid rgba(242,101,34,0.1); pointer-events: none; } .outcomes::before { content: ""; position: absolute; right: -100px; bottom: -100px; width: 300px; height: 300px; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.06); pointer-events: none; } .outcomes-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 42px; align-items: end; position: relative; z-index: 1; } .outcomes-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: #fff; letter-spacing: -0.7px; margin-top: 18px; } .outcomes-h em { color: var(--orange); font-style: italic; font-weight: 700; } .outcomes-lede { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.7; padding-bottom: 4px; } .outcomes-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; position: relative; z-index: 1; } .outcomes-quote { margin-top: 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-left: 3px solid var(--orange); border-radius: 0 6px 6px 0; padding: 30px 36px; position: relative; z-index: 1; } .outcomes-quote .m { font-family: var(--serif); font-size: 44px; color: var(--orange); line-height: 0.5; font-weight: 700; } .outcomes-quote .t { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.35; letter-spacing: -0.2px; margin-top: 14px; max-width: 880px; } .outcomes-quote .t em { color: var(--orange); font-weight: 700; } .outcomes-quote .a { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; color: var(--orange); } .outcomes-quote .a span { display: block; margin-top: 4px; color: rgba(255,255,255,0.55); letter-spacing: 1.4px; font-weight: 500; } .fit { padding: 90px var(--pad); background: var(--cream-3); } .fit-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 42px; align-items: end; } .fit-h { font-family: var(--serif); font-size: 42px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.6px; margin-top: 18px; } .fit-h em { color: var(--orange); font-style: italic; font-weight: 700; } .fit-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .fit-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .fit-card { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 12px; } .fit-t { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.2; } .fit-d { font-size: 13px; color: var(--text); line-height: 1.6; } .related { padding: 90px var(--pad); background: var(--paper); } .related-head { margin-bottom: 30px; display: flex; justify-content: space-between; align-items: end; gap: 40px; } .related-h { font-family: var(--serif); font-size: 38px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.5px; margin-top: 14px; } .related-h em { color: var(--orange); font-style: italic; font-weight: 700; } .related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } .rel { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 28px 30px 26px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s ease, background .25s ease; position: relative; } .rel:hover { background: var(--paper); transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(30,37,69,0.25); } .rel-eb { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; color: var(--orange); } .rel-t { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--navy); line-height: 1.15; letter-spacing: -0.3px; } .rel-d { font-size: 13px; color: var(--text); line-height: 1.6; } .rel-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--rule-soft); margin-top: auto; } .rel-foot .lk { font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; color: var(--navy); } .rel-foot .arr { color: var(--orange); font-weight: 700; transition: transform .18s ease; } .rel:hover .rel-foot .arr { transform: translateX(4px); } .story { padding: 90px 0; background: var(--paper); } .story-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: start; } .story-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .story-h em { color: var(--orange); font-style: italic; font-weight: 700; } .story-copy p { font-size: 15px; line-height: 1.78; color: var(--text); margin-bottom: 18px; } .story-copy p:last-child { margin-bottom: 0; } .story-copy b { color: var(--navy); font-weight: 600; } .story-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 34px; } .ss { background: var(--cream-3); border: 1px solid var(--rule-soft); border-top: 2px solid var(--orange); border-radius: 8px; padding: 24px 22px; } .ss .k { font-family: var(--serif); font-weight: 700; font-size: 40px; line-height: 0.9; color: var(--navy); letter-spacing: -1px; } .ss .k span { color: var(--orange); } .ss .l { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 12px; line-height: 1.45; } .team { padding: 90px 0; background: var(--paper); } .team-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 40px; align-items: end; } .team-h { font-family: var(--serif); font-size: 42px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.6px; margin-top: 18px; } .team-h em { color: var(--orange); font-style: italic; font-weight: 700; } .team-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .tc { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .tc .ph { width: 100%; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--rule-soft); background: repeating-linear-gradient(135deg,var(--cream-2) 0 11px,var(--cream-3) 11px 22px); } .ph-label { font-size: 9.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); background: var(--paper); padding: 6px 12px; border-radius: 99px; border: 1px solid var(--rule); font-weight: 600; } .tc-info { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 0; } .tc-name { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--muted); letter-spacing: -0.2px; } .tc-role { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-top: 9px; } .tc-tag { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: 11px; letter-spacing: 0.4px; color: var(--muted); display: flex; align-items: center; gap: 8px; } .tc-tag .d { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); opacity: .5; } .board { padding: 90px 0; background: var(--cream-3); } .board-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 40px; align-items: end; } .board-h { font-family: var(--serif); font-size: 42px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.6px; margin-top: 18px; } .board-h em { color: var(--orange); font-style: italic; font-weight: 700; } .board-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .board-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .bc { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 10px; padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; } .bc .ph-circ { width: 60px; height: 60px; border-radius: 50%; background: repeating-linear-gradient(135deg,var(--cream-2) 0 9px,var(--cream-3) 9px 18px); border: 1px solid var(--rule); } .bc-name { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--muted); } .bc-role { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--orange); font-weight: 700; line-height: 1.5; } .bc-tag { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: 11px; color: var(--muted); } .tag-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--rule); padding: 8px 14px 8px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--navy); margin-bottom: 18px; position: relative; z-index: 1; } .tag-chip .n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0; } .why { padding: 90px var(--pad); background: var(--paper); } .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .why-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .why-h em { color: var(--orange); font-style: italic; font-weight: 700; } .why-copy p { font-size: 15px; line-height: 1.75; color: var(--text); margin-bottom: 18px; } .why-copy p:last-child { margin-bottom: 0; } .why-copy p b { color: var(--navy); font-weight: 600; } .principles { padding: 90px var(--pad); background: var(--cream); } .principles-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 48px; align-items: end; } .principles-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .principles-h em { color: var(--orange); font-style: italic; font-weight: 700; } .principles-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .princ-list { display: flex; flex-direction: column; gap: 18px; } .princ { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 10px; padding: 42px 48px; display: grid; grid-template-columns: 140px 1fr 280px; gap: 48px; align-items: start; position: relative; overflow: hidden; } .princ::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); } .princ-n { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 51px; color: var(--orange-pale); line-height: 0.85; letter-spacing: -2px; } .princ-eb { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 8px; } .princ-t { font-family: var(--serif); font-size: 32px; font-weight: 600; color: var(--navy); letter-spacing: -0.4px; line-height: 1.1; margin-bottom: 12px; } .princ-t em { color: var(--orange); font-style: italic; font-weight: 700; } .princ-d { font-size: 14.5px; color: var(--text); line-height: 1.7; max-width: 560px; } .princ-d b { color: var(--navy); font-weight: 600; } .princ-aside { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; } .princ-aside-eb { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); font-weight: 700; } .princ-aside-row { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text); line-height: 1.5; } .princ-aside-row::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; margin-top: 6px; } .princ-aside-row b { color: var(--navy); font-weight: 600; } .anatomy { padding: 90px var(--pad); background: var(--paper); position: relative; overflow: hidden; } .anatomy::after { content: ""; position: absolute; right: -200px; top: -100px; width: 520px; height: 520px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.14); pointer-events: none; } .anatomy-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 48px; align-items: end; position: relative; z-index: 1; } .anatomy-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .anatomy-h em { color: var(--orange); font-style: italic; font-weight: 700; } .anatomy-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .pod { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 10px; padding: 40px; position: relative; z-index: 1; } .pod-layer { display: flex; align-items: center; gap: 18px; padding: 14px 0; } .pod-layer + .pod-layer { border-top: 1px dashed var(--rule); } .pod-tier { font-family: var(--serif); font-style: italic; font-weight: 600; width: 120px; flex-shrink: 0; font-size: 13px; color: var(--muted); letter-spacing: 0.3px; } .pod-tier b { display: block; font-style: normal; color: var(--navy); font-weight: 700; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 3px; } .pod-roles { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; } .pod-role { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--navy); } .pod-role.lead { background: var(--orange); color: #fff; border-color: var(--orange); font-weight: 600; } .pod-role.lead .dot { background: #fff; } .pod-role .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); } .pod-role .ct { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: var(--muted); border-left: 1px solid var(--rule); padding-left: 8px; margin-left: 2px; } .pod-role.lead .ct { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); } .pod-foot { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; } .pod-foot-item .k { font-family: var(--sans); font-weight: 700; font-size: 30px; color: var(--navy); line-height: 1; letter-spacing: 1px; } .pod-foot-item .k em { color: var(--orange); font-style: normal; } .pod-foot-item .l { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin-top: 7px; font-weight: 600; line-height: 1.5; } .compare { padding: 90px var(--pad); background: var(--navy); color: #fff; position: relative; overflow: hidden; } .compare::after { content: ""; position: absolute; left: -160px; top: -160px; width: 480px; height: 480px; border-radius: 50%; border: 1px solid rgba(242,101,34,0.10); pointer-events: none; } .compare-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 42px; align-items: end; position: relative; z-index: 1; } .compare-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: #fff; letter-spacing: -0.7px; margin-top: 18px; } .compare-h em { color: var(--orange); font-style: italic; font-weight: 700; } .compare-lede { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.7; padding-bottom: 4px; } .cmp { display: grid; grid-template-columns: 1fr 1fr 1fr; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; position: relative; z-index: 1; } .cmp-row { display: contents; } .cmp-cell { padding: 18px 26px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 13.5px; color: rgba(255,255,255,0.78); line-height: 1.55; display: flex; align-items: center; gap: 10px; } .cmp-cell.head { font-family: var(--serif); font-size: 22px; font-weight: 600; color: #fff; letter-spacing: -0.2px; padding: 24px 26px; background: rgba(255,255,255,0.05); } .cmp-cell.head .lbl { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; color: var(--orange); margin-bottom: 4px; display: block; } .cmp-cell.head.bv { border-top: 3px solid var(--orange); background: rgba(242,101,34,0.08); } .cmp-cell.bv { background: rgba(242,101,34,0.04); color: #fff; } .cmp-cell.bv .tick { color: var(--orange); font-weight: 700; font-size: 16px; flex-shrink: 0; } .cmp-cell .xx { color: rgba(255,255,255,0.4); font-weight: 700; font-size: 16px; flex-shrink: 0; } .cmp-cell.dim { font-weight: 600; color: #fff; background: rgba(255,255,255,0.02); } .cmp-row:last-child .cmp-cell { border-bottom: none; } .cadence { padding: 90px var(--pad); background: var(--cream); } .cadence-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 42px; align-items: end; } .cadence-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .cadence-h em { color: var(--orange); font-style: italic; font-weight: 700; } .cadence-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .cadence-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .cad-card { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 12px; min-height: 230px; position: relative; } .cad-card::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; background: var(--orange); } .cad-when { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 32px; color: var(--orange); line-height: 0.9; letter-spacing: -0.4px; } .cad-eb { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--orange); font-weight: 700; } .cad-t { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.25; letter-spacing: 0.1px; } .cad-d { font-size: 13px; color: var(--text); line-height: 1.6; } .cad-tag { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); font-weight: 600; } .trust-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 42px; align-items: end; } .trust-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .trust-h em { color: var(--orange); font-style: italic; font-weight: 700; } .trust-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .trust-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } .trust-card { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 30px 30px; display: flex; flex-direction: column; gap: 16px; } .trust-ico { width: 50px; height: 50px; border-radius: 10px; background: var(--orange-50); border: 1.5px solid var(--orange); display: flex; align-items: center; justify-content: center; } .trust-ico svg { width: 22px; height: 22px; } .trust-t { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: 0.1px; line-height: 1.2; } .trust-d { font-size: 13px; color: var(--text); line-height: 1.65; } .trust-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px solid var(--rule-soft); margin-top: auto; } .trust-tag { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: var(--navy); background: var(--paper); padding: 6px 10px; border-radius: 99px; border: 1px solid var(--rule); } .philo { background: var(--navy-deep); color: #fff; padding: 90px var(--pad); position: relative; overflow: hidden; } .philo::after { content: ""; position: absolute; right: -180px; bottom: -180px; width: 520px; height: 520px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.18); } .philo::before { content: ""; position: absolute; left: -100px; top: -100px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle,rgba(242,101,34,0.06),transparent 70%); } .philo-inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .philo-eb { font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 12px; } .philo-eb::before { content: ""; width: 32px; height: 1.5px; background: var(--orange); display: block; } .philo-side .nm { font-family: var(--serif); font-weight: 700; font-size: 28px; letter-spacing: -0.3px; color: #fff; line-height: 1.05; } .philo-side .role { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 6px; font-weight: 600; } .philo-q { position: relative; } .philo-q .m { font-family: var(--serif); font-size: 90px; color: var(--orange); line-height: 0.5; font-weight: 700; display: block; margin-bottom: 8px; opacity: 0.85; } .philo-q .t { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 36px; line-height: 1.25; letter-spacing: -0.3px; max-width: 760px; } .philo-q .t em { color: var(--orange); font-weight: 700; } .hero::after { content: ""; position: absolute; right: -220px; top: -220px; width: 620px; height: 620px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.18); pointer-events: none; } .hero-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; padding-bottom: 50px; } .hero-r-block { border-left: 2px solid var(--orange); padding-left: 24px; } .hero-strip { border-top: 1px solid rgba(255,255,255,0.1); display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding: 42px 0 60px; position: relative; } .hero-stat:first-child { padding-left: 0; } .hero-stat:last-child { border-right: none; padding-right: 0; } .hs-eb { font-size: 9.5px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 700; color: var(--orange); display: flex; align-items: center; gap: 8px; } .hs-eb .arr-down { color: var(--green); font-size: 11px; } .hs-eb .arr-up { color: var(--orange); font-size: 11px; } .hs-n { font-family: var(--sans); font-weight: 700; font-size: 35px; line-height: 0.85; letter-spacing: -2px; color: #fff; } .hs-n span { font-size: 48px; color: var(--orange); vertical-align: middle; margin-left: 2px; } .hs-l { font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.5; font-weight: 400; max-width: 220px; } .hs-l b { color: #fff; font-weight: 600; } .dims { padding: 90px var(--pad); background: var(--paper); } .dims-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 48px; align-items: end; } .dims-h { font-family: var(--serif); font-size: 48px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .dims-h em { color: var(--orange); font-style: italic; font-weight: 700; } .dims-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .dim-list { display: flex; flex-direction: column; gap: 18px; } .dim { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 10px; padding: 42px 48px; display: grid; grid-template-columns: 200px 1fr 340px; gap: 48px; align-items: center; position: relative; overflow: hidden; } .dim::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); } .dim-n { font-family: var(--sans); font-weight: 700; font-size: 39px; line-height: 0.85; color: var(--navy); letter-spacing: 1px; } .dim-n span { font-size: 46px; color: var(--orange); vertical-align: top; margin-left: 2px; } .dim-eb { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 8px; } .dim-t { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--navy); letter-spacing: -0.4px; line-height: 1.1; margin-bottom: 12px; } .dim-t em { color: var(--orange); font-style: italic; font-weight: 700; } .dim-d { font-size: 14.5px; color: var(--text); line-height: 1.7; max-width: 520px; } .dim-d b { color: var(--navy); font-weight: 600; } .dim-aside { display: flex; flex-direction: column; gap: 10px; } .dim-row { display: flex; justify-content: space-between; align-items: center; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 14px 18px; } .dim-row .lbl { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); font-weight: 600; } .dim-row .v { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--navy); letter-spacing: -0.2px; } .dim-row.bv { background: var(--orange); border-color: var(--orange); } .dim-row.bv .lbl { color: rgba(255,255,255,0.85); } .dim-row.bv .v { color: #fff; } .dim-row .arr { font-size: 13px; color: #fff; font-weight: 700; } .timeline { padding: 90px var(--pad); background: var(--cream); position: relative; overflow: hidden; } .timeline::after { content: ""; position: absolute; right: -160px; bottom: -160px; width: 480px; height: 480px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.15); pointer-events: none; } .tl-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 48px; align-items: end; position: relative; z-index: 1; } .tl-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .tl-h em { color: var(--orange); font-style: italic; font-weight: 700; } .tl-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .tl { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 10px; padding: 40px 36px; position: relative; z-index: 1; } .tl-bar { position: relative; height: 6px; background: var(--cream-2); border-radius: 99px; margin: 32px 0 56px; } .tl-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg,rgba(242,101,34,0.2) 0%,var(--orange) 100%); border-radius: 99px; } .tl-step { position: absolute; top: -8px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; } .tl-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--orange); box-shadow: 0 0 0 4px rgba(242,101,34,0.12); } .tl-step.start .tl-dot { background: var(--orange); } .tl-step.end .tl-dot { background: var(--navy); border-color: var(--navy); box-shadow: 0 0 0 4px rgba(30,37,69,0.12); } .tl-label { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); text-align: center; width: 200px; } .tl-step.start .tl-label { left: 0; transform: none; text-align: left; width: 180px; } .tl-step.end .tl-label { left: auto; right: 0; transform: none; text-align: right; width: 180px; } .tl-when { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 6px; } .tl-t { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: 0.1px; line-height: 1.3; } .tl-d { font-size: 11.5px; color: var(--text); line-height: 1.5; margin-top: 6px; } .tl-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; padding-top: 90px; border-top: 1px solid var(--rule); } .tl-card { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; } .tl-card-eb { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); font-weight: 700; } .tl-card-n { font-family: var(--sans); font-weight: 700; font-size: 32px; color: var(--navy); line-height: 0.9; } .tl-card-n span { font-size: 20px; color: var(--orange); vertical-align: top; margin-left: 1px; } .tl-card-l { font-size: 11.5px; color: var(--text); line-height: 1.5; margin-top: 4px; } .cases { padding: 90px var(--pad); background: var(--paper); } .cases-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 48px; align-items: end; } .cases-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .cases-h em { color: var(--orange); font-style: italic; font-weight: 700; } .cases-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .case-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .case { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; } .case:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(30,37,69,0.28); } .case-img { position: relative; aspect-ratio: 16/10; background: repeating-linear-gradient(45deg,rgba(30,37,69,0.05) 0 12px,rgba(30,37,69,0.09) 12px 24px); border-bottom: 1px solid var(--rule-soft); overflow: hidden; } .case-img-tag { position: absolute; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; background: rgba(19,24,40,0.78); color: #fff; padding: 7px 12px; border-radius: 99px; font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; backdrop-filter: blur(6px); } .case-img-tag .d { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); } .case-img-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "DM Sans",sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(11,28,53,0.45); } .case-img-num { position: absolute; right: 24px; bottom: 18px; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 88px; color: rgba(30,37,69,0.10); line-height: 0.85; letter-spacing: -2px; } .case-body { padding: 28px 30px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .case-eb { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--orange); font-weight: 700; } .case-t { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--navy); letter-spacing: -0.3px; line-height: 1.15; } .case-d { font-size: 13.5px; color: var(--text); line-height: 1.6; } .case-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 18px; border-top: 1px dashed var(--rule); } .case-stat .k { font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--navy); line-height: 1; letter-spacing: -0.3px; } .case-stat .k span { font-size: 14px; color: var(--orange); margin-left: 1px; } .case-stat .l { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 5px; line-height: 1.4; } .case-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--rule-soft); margin-top: auto; } .case-foot .lk { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; color: var(--navy); } .case-foot .arr { color: var(--orange); font-weight: 700; transition: transform .18s; } .case:hover .case-foot .arr { transform: translateX(4px); } .method { padding: 90px var(--pad); background: var(--navy); color: #fff; position: relative; overflow: hidden; } .method::after { content: ""; position: absolute; left: -200px; top: -100px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(242,101,34,0.1); pointer-events: none; } .method-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 48px; align-items: end; position: relative; z-index: 1; } .method-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: #fff; letter-spacing: -0.7px; margin-top: 18px; } .method-h em { color: var(--orange); font-style: italic; font-weight: 700; } .method-lede { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.7; padding-bottom: 4px; } .method-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; position: relative; z-index: 1; } .method-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-top: 2px solid var(--orange); border-radius: 8px; padding: 30px 26px 26px; display: flex; flex-direction: column; gap: 14px; min-height: 240px; } .method-n { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 32px; color: var(--orange); line-height: 0.85; letter-spacing: -0.5px; } .method-eb { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--orange); font-weight: 700; } .method-t { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: 0.1px; line-height: 1.25; } .method-d { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.6; } .method-tag { margin-top: auto; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,0.12); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 600; } .testimonial { padding: 90px var(--pad); background: var(--cream); } .test-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 42px; align-items: end; } .test-h { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .test-h em { color: var(--orange); font-style: italic; font-weight: 700; } .test-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 4px; } .test-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .test-card { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 30px 32px 26px; display: flex; flex-direction: column; gap: 18px; position: relative; } .test-card::before { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 3px; background: var(--orange); } .test-mark { font-family: var(--serif); font-size: 42px; color: var(--orange); line-height: 0.4; font-weight: 700; opacity: 0.8; } .test-t { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--navy); letter-spacing: -0.1px; flex: 1; } .test-t em { color: var(--orange); font-weight: 700; } .test-a { padding-top: 14px; border-top: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 3px; } .test-name { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: 0.1px; } .test-role { font-size: 11px; color: var(--muted); letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; } .sub-body { } .s-sec { padding: 90px 0; } .s-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 44px; align-items: end; } .s-h { font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .s-h em { color: var(--orange); font-style: italic; font-weight: 700; } .s-lede { font-size: 15px; color: var(--text); line-height: 1.72; padding-bottom: 4px; } .s-ov { background: var(--paper); } .ov-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: start; } .ov-grid .s-h { margin-top: 18px; } .ov-copy p { font-size: 15px; line-height: 1.78; color: var(--text); margin-bottom: 18px; } .ov-copy p:last-child { margin-bottom: 0; } .ov-copy b { color: var(--navy); font-weight: 600; } .ov-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .ov-pill { font-size: 11px; letter-spacing: 0.6px; font-weight: 600; color: var(--navy); background: var(--cream); border: 1px solid var(--rule); border-radius: 99px; padding: 8px 14px; } .s-dom { background: var(--cream); } .dom-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .dc { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 10px; padding: 30px 28px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .dc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); } .dc-ico { width: 48px; height: 48px; border-radius: 10px; background: var(--navy); display: flex; align-items: center; justify-content: center; } .dc-ico svg { width: 22px; height: 22px; } .dc-t { font-size: 16.5px; font-weight: 700; color: var(--navy); letter-spacing: 0.1px; line-height: 1.25; } .dc-d { font-size: 13px; color: var(--text); line-height: 1.62; } .s-std { background: var(--navy); color: #fff; position: relative; overflow: hidden; } .s-std::after { content: ""; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.18); pointer-events: none; } .std-head { max-width: 680px; position: relative; z-index: 1; margin-bottom: 40px; } .std-head .s-h { color: #fff; } .std-head .s-lede { color: rgba(255,255,255,0.66); } .std-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; position: relative; z-index: 1; } .stile { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-top: 2px solid var(--orange); border-radius: 8px; padding: 26px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 150px; } .stile .nm { font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: -0.4px; line-height: 1; } .stile .ds { font-size: 11.5px; color: rgba(255,255,255,0.6); line-height: 1.5; margin-top: auto; } .std-note { margin-top: 22px; font-size: 12px; color: rgba(255,255,255,0.45); position: relative; z-index: 1; letter-spacing: 0.2px; } .s-gov { background: var(--paper); position: relative; overflow: hidden; } .s-gov::after { content: ""; position: absolute; left: -160px; bottom: -160px; width: 440px; height: 440px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.14); pointer-events: none; } .gov-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; position: relative; z-index: 1; } .gv { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 30px 26px 24px; display: flex; flex-direction: column; gap: 12px; position: relative; min-height: 230px; } .gv::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; background: var(--orange); } .gv-n { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 34px; color: var(--orange); line-height: 0.85; letter-spacing: 1px; } .gv-t { font-size: 16.5px; font-weight: 700; color: var(--navy); line-height: 1.25; } .gv-d { font-size: 12.5px; color: var(--text); line-height: 1.55; } .gv-tag { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); font-weight: 600; } .s-com { background: var(--cream-3); } .com-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; } .com-q { border-left: 3px solid var(--orange); padding: 6px 0 6px 28px; } .com-q .m { font-family: var(--serif); font-size: 46px; color: var(--orange); line-height: 0.4; font-weight: 700; } .com-q .t { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.32; color: var(--navy); letter-spacing: -0.2px; margin-top: 18px; } .com-q .t em { color: var(--orange); font-weight: 700; } .com-q .a { margin-top: 18px; font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; color: var(--navy); } .com-pts { display: flex; flex-direction: column; gap: 16px; } .com-pt { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--text); line-height: 1.55; } .com-pt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-top: 6px; flex-shrink: 0; } .com-pt b { color: var(--navy); font-weight: 600; } .page-hero { background: var(--cream); position: relative; overflow: hidden; padding: 50px var(--pad) 60px; } .page-hero::before { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.18); pointer-events: none; } .page-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle,rgba(242,101,34,0.07),transparent 70%); pointer-events: none; } .page-hero-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; position: relative; z-index: 1; } .page-h1 { font-family: var(--serif); font-size: 64px; font-weight: 600; line-height: 1; color: var(--navy); letter-spacing: -1px; margin-top: 14px; } .page-h1 em { font-style: italic; color: var(--orange); font-weight: 700; } .page-h1 .ul { font-style: italic; background: linear-gradient(180deg,transparent 72%,rgba(242,101,34,0.30) 72%); padding: 0 4px; } .page-lede { font-size: 16px; line-height: 1.7; color: var(--text); max-width: 480px; } .contact-section { padding: 80px var(--pad); } .contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; } .form-card { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 40px 44px; box-shadow: 0 24px 50px -32px rgba(30,37,69,0.2); } .form-eyebrow { margin-bottom: 14px; } .form-h { font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.1; color: var(--navy); letter-spacing: -0.5px; margin-bottom: 8px; } .form-h em { font-style: italic; color: var(--orange); font-weight: 700; } .form-sub { font-size: 13.5px; color: var(--text); line-height: 1.6; margin-bottom: 28px; max-width: 480px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .field { display: flex; flex-direction: column; gap: 7px; } .field.full { grid-column: 1/-1; } .field label { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--navy); } .field label .req { color: var(--orange); margin-left: 3px; } .field input,.field select,.field textarea { font-family: var(--sans); font-size: 14px; color: var(--navy); background: var(--cream-3); border: 1px solid var(--rule); border-radius: 5px; padding: 13px 14px; outline: none; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; width: 100%; } .field input:focus,.field select:focus,.field textarea:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(242,101,34,0.10); } .field textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--text); line-height: 1.5; grid-column: 1/-1; margin-top: 6px; } .consent input { margin-top: 3px; accent-color: var(--orange); width: 25px; height: 25px; } .consent a { color: var(--orange); text-decoration: underline; } .form-actions { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 16px; flex-wrap: wrap; } .form-actions .note { font-size: 11.5px; color: var(--muted); letter-spacing: 0.3px; } .form-actions .note b { color: var(--navy); font-weight: 600; } .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .btn[disabled] { opacity: 0.6; cursor: not-allowed; } .form-success { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; background: var(--cream); border: 1.5px solid var(--orange); border-radius: 8px; padding: 30px 28px; font-size: 14px; color: var(--navy); line-height: 1.6; } .form-success strong { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; margin-bottom: 4px; } .side { display: flex; flex-direction: column; gap: 18px; } .side-card { background: var(--cream-3); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 24px 26px; position: relative; overflow: hidden; } .side-card.dark { background: var(--navy); color: #fff; border: none; } .side-card.dark::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.3); pointer-events: none; } .side-card-eb { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; color: var(--orange); margin-bottom: 14px; } .side-card.dark .side-card-eb { color: var(--orange); } .side-card-h { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--navy); line-height: 1.2; letter-spacing: -0.2px; margin-bottom: 8px; } .side-card.dark .side-card-h { color: #fff; } .side-row { display: flex; gap: 14px; align-items: flex-start; font-size: 13.5px; color: var(--text); line-height: 1.55; margin-top: 14px; } .side-card.dark .side-row { color: rgba(255,255,255,0.8); } .side-row b { display: block; color: var(--navy); font-weight: 700; margin-bottom: 3px; letter-spacing: 0.1px; } .side-card.dark .side-row b { color: #fff; } .side-row em { font-style: normal; color: var(--orange); } .side-row svg { flex-shrink: 0; margin-top: 3px; } .book { background: var(--cream); padding: 80px var(--pad); position: relative; overflow: hidden; } .book::before { content: ""; position: absolute; left: -120px; bottom: -120px; width: 340px; height: 340px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.16); pointer-events: none; } .book-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 52px; align-items: start; position: relative; z-index: 1; } .book-copy { position: sticky; top: 100px; } .book-h { font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.6px; margin: 16px 0 14px; } .book-h em { color: var(--orange); font-style: italic; font-weight: 700; } .book-sub { font-size: 15px; line-height: 1.7; color: var(--text); max-width: 420px; } .book-points { list-style: none; display: flex; flex-direction: column; gap: 13px; margin: 26px 0 26px; } .book-points li { position: relative; padding-left: 30px; font-size: 14px; color: var(--navy); font-weight: 500; line-height: 1.4; } .book-points li svg { position: absolute; left: 0; top: 1px; } .book-fallback-note { font-size: 13px; color: var(--muted); line-height: 1.6; } .book-fallback-note a { color: var(--orange); font-weight: 600; text-decoration: underline; } .book-widget { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 12px; padding: 10px; box-shadow: 0 28px 56px -34px rgba(30,37,69,0.24); } .booking-embed { min-height: 640px; border-radius: 8px; overflow: hidden; } .booking-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 640px; padding: 44px; gap: 18px; border-radius: 8px; border: 1.5px dashed var(--rule); background: repeating-linear-gradient(135deg,var(--cream-3),var(--cream-3) 15px,#fff 15px,#fff 30px); } .booking-ph .ph-ico { width: 66px; height: 66px; border-radius: 50%; background: var(--orange-50); display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--orange); } .booking-ph h4 { font-family: var(--serif); font-size: 25px; color: var(--navy); font-weight: 600; letter-spacing: -0.3px; } .booking-ph p { font-size: 13.5px; color: var(--text); line-height: 1.65; max-width: 360px; } .booking-ph code { font-family: "DM Mono",ui-monospace,monospace; font-size: 12px; background: var(--navy); color: #fff; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.2px; } .booking-ph .btn { margin-top: 6px; } .offices { background: var(--paper); padding: 90px var(--pad); } .offices-grid.single { grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: stretch; } .offices-grid.single .office { justify-content: space-between; } .office-map { border-radius: 8px; border: 1px solid var(--rule-soft); position: relative; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; padding: 16px; } .office-map::before { display: none; content: ""; position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: 18px; height: 18px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--orange); box-shadow: 0 0 0 8px rgba(242,101,34,0.18),0 0 0 18px rgba(242,101,34,0.08); } .office-map .map-note { font-family: "DM Mono",ui-monospace,monospace; font-size: 11px; color: var(--muted); background: #fff; border: 1px solid var(--rule); padding: 6px 10px; border-radius: 5px; position: relative; z-index: 1; } .offices-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; margin-bottom: 38px; align-items: end; } .offices-h { font-family: var(--serif); font-size: 42px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.6px; margin-top: 16px; } .offices-h em { color: var(--orange); font-style: italic; font-weight: 700; } .offices-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .office { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .office:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(30,37,69,0.28); } .office::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 3px; background: var(--orange); } .office-flag { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .office-city { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--navy); letter-spacing: -0.4px; line-height: 1; } .office-tag { font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; color: var(--orange); background: var(--orange-50); padding: 6px 10px; border-radius: 99px; } .office-addr { font-size: 13px; color: var(--text); line-height: 1.6; } .office-addr b { color: var(--navy); display: block; font-weight: 600; margin-bottom: 4px; } .office-contact { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--rule-soft); margin-top: auto; font-size: 12.5px; color: var(--text); } .office-contact em { font-style: normal; color: var(--orange); } .office-contact .lead { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); letter-spacing: 0.3px; margin-top: 4px; } .office-contact .lead b { color: var(--navy); font-weight: 600; } .steps { background: var(--paper); padding: 90px var(--pad); } .steps-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 50px; align-items: end; } .steps-h { font-family: var(--serif); font-size: 48px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.7px; margin-top: 18px; } .steps-h em { color: var(--orange); font-style: italic; font-weight: 700; } .steps-lede { font-size: 15px; color: var(--text); line-height: 1.7; padding-bottom: 8px; } .steps-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid var(--rule-soft); border-radius: 8px; overflow: hidden; background: var(--cream-3); } .step { padding: 32px 30px; border-right: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 12px; background: var(--paper); position: relative; } .step:last-child { border-right: none; } .step-n { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 48px; color: var(--orange-pale); line-height: 0.85; letter-spacing: -0.5px; } .step-eb { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; color: var(--orange); } .step-t { font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: 0.1px; } .step-d { font-size: 13.5px; color: var(--text); line-height: 1.6; } .step-time { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--muted); margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--rule); } .faq { background: var(--cream-3); padding: 90px var(--pad); } .faq-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; } .faq-side { position: sticky; top: 100px; } .faq-h { font-family: var(--serif); font-size: 42px; font-weight: 600; line-height: 1.05; color: var(--navy); letter-spacing: -0.6px; margin: 16px 0 18px; } .faq-h em { color: var(--orange); font-style: italic; font-weight: 700; } .faq-sub { font-size: 14.5px; color: var(--text); line-height: 1.7; max-width: 340px; } .faq-list { display: flex; flex-direction: column; gap: 8px; } details { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 0; overflow: hidden; transition: background .18s; } details[open] { background: var(--paper); border-color: rgba(242,101,34,0.35); } summary { list-style: none; cursor: pointer; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 18px; font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.4; letter-spacing: -0.1px; } summary::-webkit-details-marker { display: none; } .sum-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: var(--orange); font-weight: 700; transition: transform .25s ease, background .25s ease; } details[open] .sum-ico { transform: rotate(45deg); background: var(--orange); color: #fff; } .det-body { padding: 0 24px 22px; font-size: 13.5px; color: var(--text); line-height: 1.7; max-width: 680px; } /* ============================================================ PAGE-SPECIFIC OVERRIDES Each block below only applies on the listed page(s), via the body.page-xxx class set in that page's tag. ============================================================ */ /* ---- Home (page-home) ---- */ /* .nav-link::after — Home, About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-home .nav-link::after, body.page-about .nav-link::after, body.page-e2e-ops .nav-link::after, body.page-data-mis .nav-link::after, body.page-sales-growth .nav-link::after, body.page-tech-transform .nav-link::after, body.page-security .nav-link::after, body.page-contact .nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--orange); transition: right .25s ease; } /* .btn — Home, About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-home .btn, body.page-about .btn, body.page-e2e-ops .btn, body.page-data-mis .btn, body.page-sales-growth .btn, body.page-tech-transform .btn, body.page-security .btn, body.page-contact .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.4px; border: 1.5px solid transparent; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } /* .btn .arr — Home, About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-home .btn .arr, body.page-about .btn .arr, body.page-e2e-ops .btn .arr, body.page-data-mis .btn .arr, body.page-sales-growth .btn .arr, body.page-tech-transform .btn .arr, body.page-security .btn .arr, body.page-contact .btn .arr { display: inline-block; transition: transform .18s ease; } /* .nav-inner — Home, Contact */ body.page-home .nav-inner, body.page-contact .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad); max-width: none; border-top: 3px solid transparent; } /* .nav-logo — Home, About Us, The Model, Impact, End-to-End Operations, Data, MIS & Analytics, Technology & Transformation, Security & Governance, Contact */ body.page-home .nav-logo, body.page-about .nav-logo, body.page-model .nav-logo, body.page-impact .nav-logo, body.page-e2e-ops .nav-logo, body.page-data-mis .nav-logo, body.page-tech-transform .nav-logo, body.page-security .nav-logo, body.page-contact .nav-logo { height: 54px; width: auto; } /* .nav-link — Home, About Us, The Model, Impact, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-home .nav-link, body.page-about .nav-link, body.page-model .nav-link, body.page-impact .nav-link, body.page-e2e-ops .nav-link, body.page-data-mis .nav-link, body.page-sales-growth .nav-link, body.page-tech-transform .nav-link, body.page-security .nav-link, body.page-contact .nav-link { font-size: 13px; font-weight: 500; color: var(--navy); position: relative; padding: 6px 0; letter-spacing: 0.2px; } /* .nav-cta — Home, About Us, The Model, Impact, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-home .nav-cta, body.page-about .nav-cta, body.page-model .nav-cta, body.page-impact .nav-cta, body.page-e2e-ops .nav-cta, body.page-data-mis .nav-cta, body.page-sales-growth .nav-cta, body.page-tech-transform .nav-cta, body.page-security .nav-cta, body.page-contact .nav-cta { display: flex; align-items: center; gap: 14px; } /* .nav-phone — Home, About Us, The Model, Impact, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-home .nav-phone, body.page-about .nav-phone, body.page-model .nav-phone, body.page-impact .nav-phone, body.page-e2e-ops .nav-phone, body.page-data-mis .nav-phone, body.page-sales-growth .nav-phone, body.page-tech-transform .nav-phone, body.page-security .nav-phone, body.page-contact .nav-phone { font-size: 12px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 8px; } /* .nav-phone .dot — Home, About Us, The Model, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-home .nav-phone .dot, body.page-about .nav-phone .dot, body.page-model .nav-phone .dot, body.page-e2e-ops .nav-phone .dot, body.page-data-mis .nav-phone .dot, body.page-sales-growth .nav-phone .dot, body.page-tech-transform .nav-phone .dot, body.page-security .nav-phone .dot, body.page-contact .nav-phone .dot { width: 6px; height: 6px; border-radius: 50%; background: #3CB371; box-shadow: 0 0 0 4px rgba(60,179,113,.15); } /* .hero — Home */ body.page-home .hero { position: relative; background: var(--cream); overflow: hidden; min-height: calc(100vh - 70px); display: flex; align-items: center; } /* .hero::before — Home */ body.page-home .hero::before { content: "BV"; position: absolute; right: -20px; top: -40px; font-family: var(--serif); font-weight: 700; font-style: italic; font-size: 280px; line-height: 1; color: rgba(30,37,69,0.045); pointer-events: none; letter-spacing: -10px; } /* .hero-inner — Home */ body.page-home .hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 36px var(--pad) 44px; max-width: var(--max); margin: 0 auto; width: 100%; position: relative; z-index: 1; align-items: center; } /* .hero-h1 — Home */ body.page-home .hero-h1 { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1.04; color: var(--navy); letter-spacing: -0.6px; margin-bottom: 18px; max-width: 600px; } /* .hero-h1 em — Home */ body.page-home .hero-h1 em { font-style: italic; color: var(--orange); font-weight: 600; } /* .hero-h1 .ul — Home */ body.page-home .hero-h1 .ul { font-style: italic; color: var(--navy); background: linear-gradient(180deg,transparent 72%,rgba(242,101,34,0.30) 72%); padding: 0 4px; } /* .hero-sub — Home */ body.page-home .hero-sub { font-size: 14px; line-height: 1.65; color: var(--text); max-width: 500px; margin-bottom: 22px; font-weight: 400; } /* .trust — Home */ body.page-home .trust { background: var(--paper); border-bottom: 1px solid var(--rule); } /* .founder — Home */ body.page-home .founder { background: var(--paper); } /* .founder-quote — Home */ body.page-home .founder-quote { border-left: 3px solid var(--orange); background: var(--cream-3); padding: 18px 24px; border-radius: 0 6px 6px 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; color: var(--navy); line-height: 1.4; letter-spacing: -0.2px; max-width: 600px; } /* .cta-inner — Home */ body.page-home .cta-inner { padding: 80px var(--pad); max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 1; } /* .cta-h — Home */ body.page-home .cta-h { font-family: var(--serif); font-weight: 600; font-size: 54px; line-height: 1.02; color: #fff; letter-spacing: -0.8px; } /* .foot-brand .logo-mark img — Home, The Model, Impact, End-to-End Operations */ body.page-home .foot-brand .logo-mark img, body.page-model .foot-brand .logo-mark img, body.page-impact .foot-brand .logo-mark img, body.page-e2e-ops .foot-brand .logo-mark img { height: 47px; width: auto; } /* .foot-brand .meta — Home, The Model, Impact, End-to-End Operations */ body.page-home .foot-brand .meta, body.page-model .foot-brand .meta, body.page-impact .foot-brand .meta, body.page-e2e-ops .foot-brand .meta { font-size: 12.5px; color: #fff; line-height: 1.7; } /* .foot-col a — Home, End-to-End Operations */ body.page-home .foot-col a, body.page-e2e-ops .foot-col a { font-size: 13.5px; color: #fff; font-weight: 400; transition: color .18s ease; } /* .foot-bottom .cr — Home, The Model, Impact, End-to-End Operations */ body.page-home .foot-bottom .cr, body.page-model .foot-bottom .cr, body.page-impact .foot-bottom .cr, body.page-e2e-ops .foot-bottom .cr { font-size: 11.5px; color: #fff; letter-spacing: 0.3px; } /* .foot-bottom .links a — Home, The Model, Impact, End-to-End Operations */ body.page-home .foot-bottom .links a, body.page-model .foot-bottom .links a, body.page-impact .foot-bottom .links a, body.page-e2e-ops .foot-bottom .links a { font-size: 11.5px; color: #fff; } /* html — Home, About Us, The Model, Impact, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-home, body.page-about, body.page-model, body.page-impact, body.page-e2e-ops, body.page-data-mis, body.page-sales-growth, body.page-tech-transform, body.page-security, body.page-contact { -webkit-text-size-adjust: 100%; } /* html — Home, About Us, The Model, Impact, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-home, body.page-about, body.page-model, body.page-impact, body.page-e2e-ops, body.page-data-mis, body.page-sales-growth, body.page-tech-transform, body.page-security, body.page-contact { max-width: 100%; } /* ---- About Us (page-about) ---- */ /* .nav-inner — About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .nav-inner, body.page-e2e-ops .nav-inner, body.page-data-mis .nav-inner, body.page-sales-growth .nav-inner, body.page-tech-transform .nav-inner, body.page-security .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad); max-width: none; } /* .nav-inner — About Us, Security & Governance */ body.page-about .nav-inner, body.page-security .nav-inner { gap: 20px; } /* .nav-link — About Us, Security & Governance, Contact */ body.page-about .nav-link, body.page-security .nav-link, body.page-contact .nav-link { white-space: nowrap; } /* .nav-cta — About Us, Security & Governance, Contact */ body.page-about .nav-cta, body.page-security .nav-cta, body.page-contact .nav-cta { gap: 0 !important; } /* .nav-phone — About Us, Security & Governance, Contact */ body.page-about .nav-phone, body.page-security .nav-phone, body.page-contact .nav-phone { display: none; } /* .nav-phone — About Us, Security & Governance, Contact */ body.page-about .nav-phone, body.page-security .nav-phone, body.page-contact .nav-phone { display: none !important; } /* .hero — About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero, body.page-e2e-ops .hero, body.page-data-mis .hero, body.page-sales-growth .hero, body.page-tech-transform .hero, body.page-security .hero { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 520px; position: relative; overflow: hidden; } /* .hero-h1 — About Us, The Model, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-h1, body.page-model .hero-h1, body.page-e2e-ops .hero-h1, body.page-data-mis .hero-h1, body.page-sales-growth .hero-h1, body.page-tech-transform .hero-h1, body.page-security .hero-h1 { font-family: var(--serif); font-size: 60px; font-weight: 600; line-height: 1.02; color: var(--navy); letter-spacing: -1px; margin-bottom: 22px; position: relative; z-index: 1; } /* .hero-h1 em — About Us, The Model, Impact, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-h1 em, body.page-model .hero-h1 em, body.page-impact .hero-h1 em, body.page-e2e-ops .hero-h1 em, body.page-data-mis .hero-h1 em, body.page-sales-growth .hero-h1 em, body.page-tech-transform .hero-h1 em, body.page-security .hero-h1 em { font-style: italic; color: var(--orange); font-weight: 700; } /* .hero-h1 .ul — About Us, The Model, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-h1 .ul, body.page-model .hero-h1 .ul, body.page-e2e-ops .hero-h1 .ul, body.page-data-mis .hero-h1 .ul, body.page-sales-growth .hero-h1 .ul, body.page-tech-transform .hero-h1 .ul, body.page-security .hero-h1 .ul { font-style: italic; background: linear-gradient(180deg,transparent 72%,rgba(242,101,34,0.30) 72%); padding: 0 4px; } /* .hero-sub — About Us, The Model, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-sub, body.page-model .hero-sub, body.page-e2e-ops .hero-sub, body.page-data-mis .hero-sub, body.page-sales-growth .hero-sub, body.page-tech-transform .hero-sub, body.page-security .hero-sub { font-size: 15.5px; line-height: 1.7; color: var(--text); max-width: 520px; margin-bottom: 28px; position: relative; z-index: 1; } /* .founder — About Us */ body.page-about .founder { background: var(--cream); } /* .founder-quote — About Us */ body.page-about .founder-quote { border-left: 3px solid var(--orange); background: var(--paper); padding: 18px 24px; border-radius: 0 6px 6px 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; color: var(--navy); line-height: 1.4; letter-spacing: -0.2px; max-width: 600px; } /* .cta-inner — About Us, The Model, Impact, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-about .cta-inner, body.page-model .cta-inner, body.page-impact .cta-inner, body.page-e2e-ops .cta-inner, body.page-data-mis .cta-inner, body.page-sales-growth .cta-inner, body.page-tech-transform .cta-inner, body.page-security .cta-inner, body.page-contact .cta-inner { padding: 70px var(--pad); max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 1; } /* .cta-h — About Us, The Model, Impact, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-about .cta-h, body.page-model .cta-h, body.page-impact .cta-h, body.page-e2e-ops .cta-h, body.page-data-mis .cta-h, body.page-sales-growth .cta-h, body.page-tech-transform .cta-h, body.page-security .cta-h, body.page-contact .cta-h { font-family: var(--serif); font-weight: 600; font-size: 46px; line-height: 1.02; color: #fff; letter-spacing: -0.7px; } /* .foot-brand .logo-mark img — About Us, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-about .foot-brand .logo-mark img, body.page-data-mis .foot-brand .logo-mark img, body.page-sales-growth .foot-brand .logo-mark img, body.page-tech-transform .foot-brand .logo-mark img, body.page-security .foot-brand .logo-mark img, body.page-contact .foot-brand .logo-mark img { height: 38px; width: auto; } /* .foot-brand .meta — About Us, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-about .foot-brand .meta, body.page-data-mis .foot-brand .meta, body.page-sales-growth .foot-brand .meta, body.page-tech-transform .foot-brand .meta, body.page-security .foot-brand .meta, body.page-contact .foot-brand .meta { font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.7; } /* .foot-col a — About Us, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-about .foot-col a, body.page-data-mis .foot-col a, body.page-sales-growth .foot-col a, body.page-tech-transform .foot-col a, body.page-security .foot-col a, body.page-contact .foot-col a { font-size: 13.5px; color: rgba(255,255,255,0.72); font-weight: 400; transition: color .18s ease; } /* .foot-bottom .cr — About Us, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-about .foot-bottom .cr, body.page-data-mis .foot-bottom .cr, body.page-sales-growth .foot-bottom .cr, body.page-tech-transform .foot-bottom .cr, body.page-security .foot-bottom .cr, body.page-contact .foot-bottom .cr { font-size: 11.5px; color: rgba(255,255,255,0.45); letter-spacing: 0.3px; } /* .foot-bottom .links a — About Us, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-about .foot-bottom .links a, body.page-data-mis .foot-bottom .links a, body.page-sales-growth .foot-bottom .links a, body.page-tech-transform .foot-bottom .links a, body.page-security .foot-bottom .links a, body.page-contact .foot-bottom .links a { font-size: 11.5px; color: rgba(255,255,255,0.55); } /* .hero-l — About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-l, body.page-e2e-ops .hero-l, body.page-data-mis .hero-l, body.page-sales-growth .hero-l, body.page-tech-transform .hero-l, body.page-security .hero-l { background: var(--cream); padding: 60px var(--pad) 64px; position: relative; display: flex; flex-direction: column; justify-content: center; } /* .hero-l::before — About Us, End-to-End Operations, Security & Governance */ body.page-about .hero-l::before, body.page-e2e-ops .hero-l::before, body.page-security .hero-l::before { content: "01"; position: absolute; left: 32px; top: 32px; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 140px; color: rgba(242,101,34,0.10); line-height: 0.85; letter-spacing: -3px; pointer-events: none; } /* .hero-l::before — About Us, Security & Governance */ body.page-about .hero-l::before, body.page-security .hero-l::before { content: ""; } /* .crumb — About Us, The Model, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .crumb, body.page-model .crumb, body.page-e2e-ops .crumb, body.page-data-mis .crumb, body.page-sales-growth .crumb, body.page-tech-transform .crumb, body.page-security .crumb { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; position: relative; z-index: 1; } /* .crumb a — About Us, The Model, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-about .crumb a, body.page-model .crumb a, body.page-e2e-ops .crumb a, body.page-data-mis .crumb a, body.page-sales-growth .crumb a, body.page-tech-transform .crumb a, body.page-security .crumb a, body.page-contact .crumb a { color: var(--muted); transition: color .18s; } /* .crumb a:hover — About Us, The Model, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-about .crumb a:hover, body.page-model .crumb a:hover, body.page-e2e-ops .crumb a:hover, body.page-data-mis .crumb a:hover, body.page-sales-growth .crumb a:hover, body.page-tech-transform .crumb a:hover, body.page-security .crumb a:hover, body.page-contact .crumb a:hover { color: var(--navy); } /* .crumb .sep — About Us, The Model, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-about .crumb .sep, body.page-model .crumb .sep, body.page-e2e-ops .crumb .sep, body.page-data-mis .crumb .sep, body.page-sales-growth .crumb .sep, body.page-tech-transform .crumb .sep, body.page-security .crumb .sep, body.page-contact .crumb .sep { color: var(--rule); } /* .crumb .cur — About Us, The Model, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance, Contact */ body.page-about .crumb .cur, body.page-model .crumb .cur, body.page-e2e-ops .crumb .cur, body.page-data-mis .crumb .cur, body.page-sales-growth .crumb .cur, body.page-tech-transform .crumb .cur, body.page-security .crumb .cur, body.page-contact .crumb .cur { color: var(--navy); } /* .hero-actions — About Us, The Model, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-actions, body.page-model .hero-actions, body.page-e2e-ops .hero-actions, body.page-data-mis .hero-actions, body.page-sales-growth .hero-actions, body.page-tech-transform .hero-actions, body.page-security .hero-actions { display: flex; gap: 12px; position: relative; z-index: 1; } /* .hero-r — About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-r, body.page-e2e-ops .hero-r, body.page-data-mis .hero-r, body.page-sales-growth .hero-r, body.page-tech-transform .hero-r, body.page-security .hero-r { background: var(--navy); color: #fff; padding: 60px var(--pad) 64px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 20px; } /* .hero-r::after — About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-r::after, body.page-e2e-ops .hero-r::after, body.page-data-mis .hero-r::after, body.page-sales-growth .hero-r::after, body.page-tech-transform .hero-r::after, body.page-security .hero-r::after { content: ""; position: absolute; right: -100px; top: -100px; width: 360px; height: 360px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.25); pointer-events: none; } /* .hero-r-eb — About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-r-eb, body.page-e2e-ops .hero-r-eb, body.page-data-mis .hero-r-eb, body.page-sales-growth .hero-r-eb, body.page-tech-transform .hero-r-eb, body.page-security .hero-r-eb { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--orange); font-weight: 700; position: relative; z-index: 1; } /* .hero-r-h — About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-r-h, body.page-e2e-ops .hero-r-h, body.page-data-mis .hero-r-h, body.page-sales-growth .hero-r-h, body.page-tech-transform .hero-r-h, body.page-security .hero-r-h { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; position: relative; z-index: 1; max-width: 380px; } /* .hero-stats — About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-stats, body.page-e2e-ops .hero-stats, body.page-data-mis .hero-stats, body.page-sales-growth .hero-stats, body.page-tech-transform .hero-stats, body.page-security .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; z-index: 1; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 4px; } /* .hero-stat — About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-stat, body.page-e2e-ops .hero-stat, body.page-data-mis .hero-stat, body.page-sales-growth .hero-stat, body.page-tech-transform .hero-stat, body.page-security .hero-stat { padding-top: 18px; } /* .hero-stat .k — About Us, Sales & Growth Enablement */ body.page-about .hero-stat .k, body.page-sales-growth .hero-stat .k { font-family: var(--serif); font-weight: 700; font-size: 46px; line-height: 0.9; letter-spacing: -1px; } /* .hero-stat .k span — About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-stat .k span, body.page-e2e-ops .hero-stat .k span, body.page-data-mis .hero-stat .k span, body.page-sales-growth .hero-stat .k span, body.page-tech-transform .hero-stat .k span, body.page-security .hero-stat .k span { font-size: 26px; color: var(--orange); vertical-align: top; margin-left: 2px; } /* .hero-stat .l — About Us, End-to-End Operations, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .hero-stat .l, body.page-e2e-ops .hero-stat .l, body.page-data-mis .hero-stat .l, body.page-sales-growth .hero-stat .l, body.page-tech-transform .hero-stat .l, body.page-security .hero-stat .l { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 10px; font-weight: 600; line-height: 1.4; } /* .sub-num — About Us, Sales & Growth Enablement, Security & Governance */ body.page-about .sub-num, body.page-sales-growth .sub-num, body.page-security .sub-num { position: absolute; right: 24px; top: 18px; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 32px; color: var(--orange-pale); letter-spacing: -0.5px; line-height: 1; } /* .flow-n — About Us, Sales & Growth Enablement, Security & Governance */ body.page-about .flow-n, body.page-sales-growth .flow-n, body.page-security .flow-n { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 42px; color: var(--orange); line-height: 0.85; letter-spacing: -0.5px; } /* .out-card — About Us, Sales & Growth Enablement, Security & Governance */ body.page-about .out-card, body.page-sales-growth .out-card, body.page-security .out-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-top: 2px solid var(--orange); border-radius: 6px; padding: 32px 26px 26px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } /* .out-n — About Us, Sales & Growth Enablement, Security & Governance */ body.page-about .out-n, body.page-sales-growth .out-n, body.page-security .out-n { font-family: var(--serif); font-weight: 700; font-size: 62px; line-height: 0.85; letter-spacing: -1.6px; } /* .out-n .sm — About Us, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .out-n .sm, body.page-data-mis .out-n .sm, body.page-sales-growth .out-n .sm, body.page-tech-transform .out-n .sm, body.page-security .out-n .sm { font-size: 34px; color: var(--orange); margin-left: 2px; vertical-align: top; } /* .out-l — About Us, Data, MIS & Analytics, Sales & Growth Enablement, Technology & Transformation, Security & Governance */ body.page-about .out-l, body.page-data-mis .out-l, body.page-sales-growth .out-l, body.page-tech-transform .out-l, body.page-security .out-l { font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.6); line-height: 1.5; } /* .fit-num — About Us, Sales & Growth Enablement, Security & Governance */ body.page-about .fit-num, body.page-sales-growth .fit-num, body.page-security .fit-num { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 34px; color: var(--orange); line-height: 1; letter-spacing: -0.5px; } /* ---- The Model (page-model) ---- */ /* .nav-link::after — The Model, Impact */ body.page-model .nav-link::after, body.page-impact .nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--orange); transition: right .25s; } /* .btn — The Model, Impact */ body.page-model .btn, body.page-impact .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.4px; border: 1.5px solid transparent; cursor: pointer; transition: background .18s,color .18s,border-color .18s,transform .18s; } /* .btn .arr — The Model, Impact */ body.page-model .btn .arr, body.page-impact .btn .arr { display: inline-block; transition: transform .18s; } /* .nav-inner — The Model, Impact */ body.page-model .nav-inner, body.page-impact .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad); } /* .hero — The Model */ body.page-model .hero { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 540px; } /* .trust — The Model */ body.page-model .trust { padding: 90px var(--pad); background: var(--paper); } /* .foot-col a — The Model, Impact */ body.page-model .foot-col a, body.page-impact .foot-col a { font-size: 13.5px; color: #fff; font-weight: 400; transition: color .18s; } /* .hero-l — The Model */ body.page-model .hero-l { background: var(--cream); padding: 60px var(--pad) 64px; position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } /* .hero-l::before — The Model */ body.page-model .hero-l::before { content: "GCC"; position: absolute; left: 34px; top: 26px; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 160px; color: rgba(242,101,34,0.07); line-height: 0.85; letter-spacing: -4px; pointer-events: none; } /* .hero-r — The Model */ body.page-model .hero-r { background: var(--navy); color: #fff; padding: 60px var(--pad) 64px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 24px; } /* .hero-r::after — The Model */ body.page-model .hero-r::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; border: 1px dashed rgba(242,101,34,0.25); pointer-events: none; } /* .hero-r-eb — The Model */ body.page-model .hero-r-eb { font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--orange); font-weight: 700; position: relative; z-index: 1; } /* .hero-r-h — The Model */ body.page-model .hero-r-h { font-family: var(--serif); font-size: 33px; font-weight: 600; line-height: 1.22; letter-spacing: -0.3px; position: relative; z-index: 1; max-width: 400px; } /* .hero-stats — The Model */ body.page-model .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; z-index: 1; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); } /* .hero-stat .k — The Model */ body.page-model .hero-stat .k { font-family: var(--sans); font-weight: 700; font-size: 37px; line-height: 0.9; letter-spacing: 1px; } /* .hero-stat .k span — The Model */ body.page-model .hero-stat .k span { font-size: 24px; color: var(--orange); vertical-align: middle; margin-left: 2px; } /* .hero-stat .l — The Model */ body.page-model .hero-stat .l { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: #fff; margin-top: 10px; font-weight: 600; line-height: 1.4; } /* ---- Impact (page-impact) ---- */ /* .nav-phone .dot — Impact */ body.page-impact .nav-phone .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(60,179,113,.15); } /* .hero — Impact */ body.page-impact .hero { background: var(--navy); color: #fff; padding: 60px var(--pad) 0; position: relative; overflow: hidden; } /* .hero::before — Impact */ body.page-impact .hero::before { content: ""; position: absolute; left: -100px; bottom: -100px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle,rgba(242,101,34,0.08),transparent 70%); pointer-events: none; } /* .hero-inner — Impact */ body.page-impact .hero-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; } /* .hero-h1 — Impact */ body.page-impact .hero-h1 { font-family: var(--serif); font-size: 72px; font-weight: 600; line-height: 0.98; letter-spacing: -1.2px; } /* .hero-h1 .ul — Impact */ body.page-impact .hero-h1 .ul { font-style: italic; background: linear-gradient(180deg,transparent 72%,rgba(242,101,34,0.35) 72%); padding: 0 4px; } /* .hero-sub — Impact */ body.page-impact .hero-sub { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,0.7); margin-bottom: 20px; max-width: 420px; } /* .crumb — Impact */ body.page-impact .crumb { display: flex; align-items: center; gap: 10px; font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; margin-bottom: 24px; } /* .crumb a — Impact */ body.page-impact .crumb a { color: rgba(255,255,255,0.5); transition: color .18s; } /* .crumb a:hover — Impact */ body.page-impact .crumb a:hover { color: #fff; } /* .crumb .sep — Impact */ body.page-impact .crumb .sep { color: rgba(255,255,255,0.2); } /* .crumb .cur — Impact */ body.page-impact .crumb .cur { color: #fff; } /* .hero-actions — Impact */ body.page-impact .hero-actions { display: flex; gap: 12px; } /* .hero-stat — Impact */ body.page-impact .hero-stat { padding: 0 30px; border-right: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 10px; } /* ---- End-to-End Operations (page-e2e-ops) ---- */ /* .hero-stat .k — End-to-End Operations, Data, MIS & Analytics */ body.page-e2e-ops .hero-stat .k, body.page-data-mis .hero-stat .k { font-family: var(--sans); font-weight: 700; font-size: 36px; line-height: 0.9; letter-spacing: 1px; } /* .sub-num — End-to-End Operations */ body.page-e2e-ops .sub-num { position: absolute; right: 24px; top: 18px; font-family: var(--sans); font-style: italic; font-weight: 600; font-size: 28px; color: var(--orange-pale); letter-spacing: -0.5px; line-height: 1; } /* .flow-n — End-to-End Operations */ body.page-e2e-ops .flow-n { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 36px; color: var(--orange); line-height: 0.85; letter-spacing: 1px; } /* .out-card — End-to-End Operations, Data, MIS & Analytics, Technology & Transformation */ body.page-e2e-ops .out-card, body.page-data-mis .out-card, body.page-tech-transform .out-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-top: 2px solid var(--orange); border-radius: 6px; padding: 32px 26px 26px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } /* .out-n — End-to-End Operations, Technology & Transformation */ body.page-e2e-ops .out-n, body.page-tech-transform .out-n { font-family: var(--sans); font-weight: 700; font-size: 41px; line-height: 0.85; letter-spacing: -1.6px; } /* .out-n .sm — End-to-End Operations */ body.page-e2e-ops .out-n .sm { font-size: 34px; color: var(--orange); margin-left: 2px; vertical-align: middle; } /* .out-l — End-to-End Operations */ body.page-e2e-ops .out-l { font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; line-height: 1.5; } /* .fit-num — End-to-End Operations */ body.page-e2e-ops .fit-num { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 34px; color: var(--orange); line-height: 1; letter-spacing: -0.5px; } /* ---- Data, MIS & Analytics (page-data-mis) ---- */ /* .hero-l::before — Data, MIS & Analytics */ body.page-data-mis .hero-l::before { content: "02"; position: absolute; left: 32px; top: 32px; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 140px; color: rgba(242,101,34,0.10); line-height: 0.85; letter-spacing: -3px; pointer-events: none; } /* .sub-num — Data, MIS & Analytics */ body.page-data-mis .sub-num { position: absolute; right: 24px; top: 18px; font-family: var(--sans); font-style: italic; font-weight: 600; font-size: 28px; color: var(--orange-pale); letter-spacing: 1px; line-height: 1; } /* .flow-n — Data, MIS & Analytics */ body.page-data-mis .flow-n { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 31px; color: var(--orange); line-height: 0.85; letter-spacing: 1px; } /* .out-n — Data, MIS & Analytics */ body.page-data-mis .out-n { font-family: var(--sans); font-weight: 700; font-size: 41px; line-height: 0.85; letter-spacing: 1px; } /* .fit-num — Data, MIS & Analytics */ body.page-data-mis .fit-num { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 28px; color: var(--orange); line-height: 1; letter-spacing: -0.5px; } /* ---- Sales & Growth Enablement (page-sales-growth) ---- */ /* .nav-logo — Sales & Growth Enablement */ body.page-sales-growth .nav-logo { height: 38px; width: auto; } /* .hero-l::before — Sales & Growth Enablement */ body.page-sales-growth .hero-l::before { content: "03"; position: absolute; left: 32px; top: 32px; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 140px; color: rgba(242,101,34,0.10); line-height: 0.85; letter-spacing: -3px; pointer-events: none; } /* ---- Technology & Transformation (page-tech-transform) ---- */ /* .hero-l::before — Technology & Transformation */ body.page-tech-transform .hero-l::before { content: "04"; position: absolute; left: 32px; top: 32px; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 140px; color: rgba(242,101,34,0.10); line-height: 0.85; letter-spacing: -3px; pointer-events: none; } /* .hero-stat .k — Technology & Transformation */ body.page-tech-transform .hero-stat .k { font-family: var(--sans); font-weight: 700; font-size: 41px; line-height: 0.9; letter-spacing: 1px; } /* .sub-num — Technology & Transformation */ body.page-tech-transform .sub-num { position: absolute; right: 24px; top: 18px; font-family: var(--sans); font-style: italic; font-weight: 600; font-size: 25px; color: var(--orange-pale); letter-spacing: 1px; line-height: 1; } /* .flow-n — Technology & Transformation */ body.page-tech-transform .flow-n { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 30px; color: var(--orange); line-height: 0.85; letter-spacing: 1px; } /* .fit-num — Technology & Transformation */ body.page-tech-transform .fit-num { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 28px; color: var(--orange); line-height: 1; letter-spacing: 1px; } /* ---- Security & Governance (page-security) ---- */ /* .hero-stat .k — Security & Governance */ body.page-security .hero-stat .k { font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 0.9; letter-spacing: 1px; } /* ---- Contact (page-contact) ---- */ /* .crumb — Contact */ body.page-contact .crumb { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; }