/* ===== FONTS ===== Self-hosted from R2 rather than fetched from a third party, the same way every other template here does it now. The source pulled Mona Sans from fonts.cdnfonts.com, which is both an uncontrolled dependency and a second DNS lookup and TLS handshake before the first paint. These are the WOFF2 files Google serves, with the same unicode-range splits, copied to c21-branding/fonts/mona-sans/. ONE FAMILY, NOT TWO. The source asked for "Mona Sans Expanded" as a separate family. Mona Sans is a variable font with a width axis, so the expanded cut is this same face at font-stretch:125% - which is what the rule near the end of this file sets on everything that used --fd. Naming a family that does not exist fails silently as a fallback face. ================= */ @font-face { font-family: 'Mona Sans'; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url(https://library.c21masters.com/c21-branding/fonts/mona-sans/mona-sans-normal-200-900-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Mona Sans'; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url(https://library.c21masters.com/c21-branding/fonts/mona-sans/mona-sans-normal-200-900-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ===================================================================== BEACON — the lending template. A glass dashboard on a dot-grid ground, blue into cyan, Mona Sans throughout. Converted from the "LoanOfficer-T1" source pair. beacon-dark.css and beacon-light.css are this same file; the light one appends a token remap at the end, exactly as the source did. Both are generated - do not hand-edit one twin, edit the source and regenerate both. What the conversion removed, and why it had to: - EVERY RATE FIGURE. The source shipped a scrolling rate ticker, a "today's indicative rates" panel with a sparkline and a live slider printing "4.62% p.a.". Those are quoted prices. We hold no rate feed, 21stcenturylending.com publishes none, and a stale number on a licensed originator's page is a compliance problem rather than a stale number. The rules for .t-rates, .rate-row, .spark, .slider-row and .repay went with the markup. - The invented performance figures: "$2.3B settled", "4,000+ loans", "60+ lenders", "98% would refer", "4.9 from 2,300+ reviews", "14 days to approval". Nothing behind any of them. - The lender wall named real Australian banks. The marquee survives - it is a signature of the design - carrying the loan programs 21st Century Lending actually offers instead. - Testimonials, both FAQ ledgers, the milestone timeline, the certifications and awards grids, and the fake booking calendar. See section 1e of ADDING-A-TEMPLATE.md. - The source's own footer. footer.js owns that, and it carries the NMLS and Equal Housing Lender disclosures a lending site is required to show. - The AU market throughout: offset accounts, SMSF lending, the First Home Guarantee, "p.a.", "fortnight", "organisation". Fonts come from Google rather than fonts.cdnfonts.com. Mona Sans is one variable family there with a width axis, so "Mona Sans Expanded" is the same family at font-stretch:125%. ===================================================================== */ :root { --eigengrau:#171A1F; --dark-void:#12151A; --black-knight:#00050D; --vapor:#F3FFFF; --lighthouse:#F2F5F7; --bluetiful:#4353FF; --sky:#197BFF; --hadfield:#2563EB; --bluetiful2:#4284F3; --caribbean:#06B6D4; --success:#2BC54D; --warning:#FFB542; --white:#FFFFFF; --t2:#D6DAE4; --t-dark:#444B57; --muted:#888888; --body:#555555; --b-subtle:rgba(255,255,255,.06); --b-mid:rgba(255,255,255,.13); --b-strong:rgba(255,255,255,.3); --cy-soft:rgba(6,182,212,.3); --cy-bg:rgba(6,182,212,.06); --fd:'Mona Sans',sans-serif; --f:'Mona Sans',sans-serif; --maxw:1280px; --ease:cubic-bezier(.22,.61,.36,1); } * {margin:0;padding:0;box-sizing:border-box} html {scroll-behavior:smooth} body {font-family:var(--f);font-weight:400;background:var(--eigengrau);color:var(--t2); line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden; background-image:radial-gradient(rgba(255,255,255,.022) 1px,transparent 1px);background-size:26px 26px} a {color:inherit;text-decoration:none} img {max-width:100%;display:block} .wrap {max-width:var(--maxw);margin:0 auto;padding:0 34px} .disp {font-family:var(--fd);font-weight:300;line-height:1.0;letter-spacing:-.015em;color:var(--white)} .cy {color:var(--caribbean)} .lede {font-size:18px;line-height:1.7;color:var(--t2);font-weight:300;max-width:60ch} /* boxed section tag */ .tag {display:inline-flex;align-items:center;gap:10px;font-family:var(--f);font-weight:600;font-size:11.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--caribbean);border:1px solid var(--cy-soft); border-radius:999px;padding:7px 15px 7px 13px;background:var(--cy-bg)} .tag i {width:7px;height:7px;background:var(--caribbean);transform:rotate(45deg);display:block;flex-shrink:0} /* buttons */ .btn {display:inline-flex;align-items:center;gap:9px;font-family:var(--f);font-weight:600;font-size:15px; padding:14px 24px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:.26s var(--ease);white-space:nowrap} .btn-primary {background:var(--bluetiful);color:#fff;box-shadow:0 10px 34px -10px rgba(67,83,255,.75)} .btn-primary:hover {background:var(--sky);transform:translateY(-2px)} .btn-ghost {border:1px solid var(--b-strong);color:#fff} .btn-ghost:hover {border-color:var(--caribbean);color:var(--caribbean);background:var(--cy-bg)} .btn-sm {padding:11px 17px;font-size:14px} .btn svg {transition:transform .26s var(--ease)} .btn:hover svg {transform:translateX(4px)} /* ticker */ .ticker {background:var(--black-knight);border-bottom:1px solid var(--b-subtle);overflow:hidden;white-space:nowrap} .ticker-track {display:inline-flex;gap:44px;padding:9px 0;animation:tick 38s linear infinite;font-size:12.5px; color:var(--muted);font-weight:500;will-change:transform} .ticker-track span {display:inline-flex;align-items:center;gap:10px} .ticker-track b {color:var(--t2);font-weight:600} .ticker-track em {color:var(--caribbean);font-style:normal} .ticker-track .d {width:5px;height:5px;border-radius:50%;background:var(--caribbean)} @keyframes tick {to {transform:translateX(-50%)} } /* nav */ .nav {position:sticky;top:0;z-index:120;background:rgba(18,21,26,.78);backdrop-filter:blur(18px); border-bottom:1px solid var(--b-subtle);transition:.3s} .nav-in {max-width:var(--maxw);margin:0 auto;padding:15px 34px;display:flex;align-items:center;gap:26px} .nav-logo {display:inline-flex} .nav-logo svg.brandmark {height:26px;width:auto;display:block} .nav-seg {margin:0 auto;display:flex;gap:4px;background:rgba(255,255,255,.03);border:1px solid var(--b-subtle);border-radius:12px;padding:5px} .nav-seg a {font-weight:500;font-size:14.5px;color:var(--t2);padding:9px 18px;border-radius:8px;transition:.2s} .nav-seg a:hover {color:#fff;background:rgba(255,255,255,.05)} .nav-seg a.active {color:#fff;background:rgba(67,83,255,.16);box-shadow:inset 0 0 0 1px rgba(67,83,255,.4)} .nav-r {display:flex;align-items:center;gap:16px} .nav-phone {font-weight:600;font-size:14px;color:#fff;display:flex;align-items:center;gap:8px} .nav-phone svg {color:var(--caribbean)} /* page hero (inner pages) */ .pg-hero {position:relative;padding:84px 0 72px;overflow:hidden;border-bottom:1px solid var(--b-subtle)} .pg-hero .orb {position:absolute;border-radius:50%;filter:blur(10px);z-index:0} .pg-hero .o1 {width:560px;height:560px;background:radial-gradient(circle,rgba(67,83,255,.2),transparent 60%);top:-220px;left:-120px} .pg-hero .o2 {width:480px;height:480px;background:radial-gradient(circle,rgba(6,182,212,.14),transparent 62%);top:-120px;right:-120px} .pg-hero .wm {position:absolute;right:-20px;top:-30px;font-family:var(--fd);font-weight:300;font-size:380px;line-height:.8; color:rgba(255,255,255,.018);z-index:0;pointer-events:none} .pg-hero-in {position:relative;z-index:2} /* generic section */ .sec {padding:120px 0;position:relative} .sec-deep {background:var(--dark-void)} .sec-black {background:var(--black-knight)} .sec-head {max-width:760px;margin-bottom:56px} .sec-head h2 {font-size:clamp(32px,4.5vw,54px);margin:20px 0 18px} /* lender wall */ .lw {display:grid;grid-template-columns:.85fr 1.15fr;gap:0;border:1px solid var(--b-mid);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.02)} .lw-l {padding:48px;border-right:1px solid var(--b-mid)} .lw-l h2 {font-size:clamp(26px,3vw,40px);margin:18px 0 14px} .lw-l p {font-size:15px;color:var(--t2)} .lw-r {padding:40px 0;display:flex;flex-direction:column;gap:18px;justify-content:center;overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .lw-row {display:flex;gap:14px;white-space:nowrap;width:max-content} .lw-row.a {animation:slL 34s linear infinite} .lw-row.b {animation:slR 30s linear infinite} @keyframes slL {to {transform:translateX(-50%)} } @keyframes slR {from {transform:translateX(-50%)} to {transform:translateX(0)} } .lchip {display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border:1px solid var(--b-subtle);border-radius:11px; background:rgba(255,255,255,.025);font-weight:600;font-size:15px;color:var(--t2)} .lchip .dot {width:8px;height:8px;border-radius:2px;background:var(--caribbean);transform:rotate(45deg)} /* bento */ .bento {display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto);gap:14px} .bx {background:rgba(255,255,255,.026);border:1px solid var(--b-subtle);border-radius:18px;padding:30px;position:relative; overflow:hidden;transition:.32s var(--ease);display:flex;flex-direction:column} .bx::before {content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--caribbean),transparent); transform:scaleX(0);transform-origin:left;transition:.4s var(--ease)} .bx:hover {border-color:var(--b-mid);transform:translateY(-4px);background:rgba(255,255,255,.045)} .bx:hover::before {transform:scaleX(1)} .bx .ic {width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center; background:rgba(6,182,212,.1);border:1px solid var(--cy-soft);color:var(--caribbean);margin-bottom:auto} .bx h3 {font-size:21px;color:#fff;font-weight:600;margin:22px 0 8px} .bx p {font-size:14.5px;color:var(--t2)} .bx .go {margin-top:16px;color:var(--caribbean);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:7px} .bx-feat {grid-column:span 3;grid-row:span 2;background:linear-gradient(165deg,rgba(67,83,255,.16),rgba(6,182,212,.04));border-color:rgba(67,83,255,.32)} .bx-feat h3 {font-size:30px} .bx-feat .ic {background:rgba(67,83,255,.2);border-color:rgba(67,83,255,.4);color:#fff} .bx-sm {grid-column:span 3} .bx-wide {grid-column:span 6;flex-direction:row;align-items:center;gap:26px} .bx-wide .ic {margin-bottom:0} .bx-wide .txt h3 {margin-top:0} /* process rail */ .rail {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;margin-top:20px} .rail::before {content:"";position:absolute;top:40px;left:6%;right:6%;height:0;border-top:1px dashed rgba(6,182,212,.45);z-index:0} .rail.on-deep .rnum {background:var(--dark-void)} .rstep {position:relative;z-index:1} .rnum {font-family:var(--fd);font-weight:300;font-size:74px;line-height:.8;color:#fff;display:inline-block;background:var(--eigengrau);padding-right:18px} .rnum .u {color:var(--caribbean)} .rstep h3 {font-size:19px;color:#fff;font-weight:600;margin:22px 0 8px} .rstep p {font-size:14px;color:var(--t2);max-width:30ch} /* sticky split */ .why {display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start} .why-l {position:sticky;top:120px} .why-l h2 {font-size:clamp(30px,3.6vw,46px);margin:20px 0 18px} .why-l .idx {font-family:var(--fd);font-weight:300;font-size:15px;color:var(--caribbean);margin-top:30px} .why-r {display:flex;flex-direction:column;gap:16px} .wf {display:flex;gap:24px;padding:32px;border:1px solid var(--b-subtle);border-radius:18px;background:rgba(255,255,255,.025);transition:.3s var(--ease)} .wf:hover {border-color:var(--cy-soft);background:var(--cy-bg)} .wf .n {font-family:var(--fd);font-weight:300;font-size:30px;color:var(--caribbean);line-height:1;flex-shrink:0;width:54px} .wf h3 {font-size:20px;color:#fff;font-weight:600;margin-bottom:8px} .wf p {font-size:14.5px;color:var(--t2)} /* manifesto */ .mani {background:var(--vapor);color:var(--t-dark);text-align:center} .mani .tag {color:var(--hadfield);border-color:rgba(37,99,235,.25);background:rgba(37,99,235,.05)} .mani .tag i {background:var(--hadfield)} .mani h2 {font-family:var(--fd);font-weight:300;font-size:clamp(28px,4.4vw,56px);color:#0c1016;line-height:1.14;max-width:20ch;margin:26px auto 0;letter-spacing:-.015em} .mani .who {margin-top:32px;color:var(--hadfield);font-weight:600} .mani .who span {color:var(--muted);font-weight:500} /* bracket CTA */ .bcta {position:relative;border:1px solid var(--b-mid);border-radius:24px;padding:78px 40px;text-align:center;overflow:hidden; background:radial-gradient(circle at 50% 120%,rgba(67,83,255,.16),transparent 60%)} .bcta .wm {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--fd);font-weight:300;font-size:360px; color:rgba(255,255,255,.02);z-index:0;line-height:1;pointer-events:none} .corner {position:absolute;width:34px;height:34px;border-color:var(--caribbean);z-index:2} .corner.tl {top:18px;left:18px;border-top:2px solid;border-left:2px solid;border-radius:6px 0 0 0} .corner.tr {top:18px;right:18px;border-top:2px solid;border-right:2px solid;border-radius:0 6px 0 0} .corner.bl {bottom:18px;left:18px;border-bottom:2px solid;border-left:2px solid;border-radius:0 0 0 6px} .corner.br {bottom:18px;right:18px;border-bottom:2px solid;border-right:2px solid;border-radius:0 0 6px 0} .bcta .in {position:relative;z-index:3} .bcta h2 {font-size:clamp(32px,5vw,60px);margin:22px 0 18px} .bcta p {font-size:18px;color:var(--t2);max-width:52ch;margin:0 auto 32px} .bcta-cta {display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* stock images + avatars (graceful fallback to gradient underneath) */ .ph {position:relative;overflow:hidden;background:linear-gradient(155deg,#1d2530,#0c0f14)} .ph img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .ph.duo img {filter:grayscale(1) contrast(1.05)} .ph.duo::after {content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(150deg,rgba(67,83,255,.62),rgba(6,182,212,.42));mix-blend-mode:color} .ph.duo::before {content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(160deg,rgba(10,13,18,.12),rgba(10,13,18,.5))} .av img, .avatar img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block} .avatar {position:relative;overflow:hidden;background:linear-gradient(150deg,#2a3340,#12161d)} .reveal {opacity:0;transform:translateY(28px);transition:.8s var(--ease)} .reveal.in {opacity:1;transform:none} @media(max-width:1024px) {.bento {grid-template-columns:repeat(4,1fr)} .bx-feat {grid-column:span 2;grid-row:span 2} .bx-sm {grid-column:span 2} .bx-wide {grid-column:span 4} } @media(max-width:920px) {.nav-phone {display:none} .lw {grid-template-columns:1fr} .lw-l {border-right:none;border-bottom:1px solid var(--b-mid)} .bento {grid-template-columns:repeat(2,1fr)} .bx-feat, .bx-sm, .bx-wide {grid-column:span 2;grid-row:auto} .bx-wide {flex-direction:column;align-items:flex-start} .rail {grid-template-columns:1fr 1fr;gap:40px 24px} .rail::before {display:none} .why {grid-template-columns:1fr;gap:34px} .why-l {position:static} .sec {padding:84px 0} } @media(max-width:560px) {.wrap {padding:0 20px} .nav-in {padding:14px 20px} .bento {grid-template-columns:1fr} .bx-feat, .bx-sm, .bx-wide {grid-column:span 1} .pg-hero .wm {font-size:240px} } .hero {position:relative;padding:88px 0 0;overflow:hidden} .hero .orb {position:absolute;border-radius:50%;filter:blur(10px);z-index:0} .hero .o1 {width:600px;height:600px;background:radial-gradient(circle,rgba(67,83,255,.22),transparent 60%);top:-200px;left:-120px} .hero .o2 {width:520px;height:520px;background:radial-gradient(circle,rgba(6,182,212,.16),transparent 62%);top:-80px;right:-140px} .hero .wm {position:absolute;right:-30px;top:30px;font-family:var(--fd);font-weight:300;font-size:500px;line-height:.8;color:rgba(255,255,255,.018);z-index:0;pointer-events:none} .hero-in {position:relative;z-index:2;text-align:center;max-width:1000px;margin:0 auto} .hero h1 {font-size:clamp(42px,6.6vw,90px);margin:26px 0 24px} .hero .lede {margin:0 auto;font-size:20px} .hero-cta {display:flex;gap:14px;justify-content:center;margin:34px 0 18px;flex-wrap:wrap} .dash {position:relative;z-index:2;margin-top:60px;display:grid;grid-template-columns:repeat(12,1fr);gap:14px} .tile {background:rgba(255,255,255,.028);border:1px solid var(--b-subtle);border-radius:18px;padding:24px;position:relative;overflow:hidden;transition:.3s var(--ease)} .tile:hover {border-color:var(--b-mid)} .tile .tl {font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px} .tile .tl .live {width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(43,197,77,.2)} .t-adv {grid-column:span 4;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,rgba(6,182,212,.12),rgba(67,83,255,.04));border-color:var(--cy-soft)} .t-adv .who {display:flex;align-items:center;gap:14px;margin:14px 0 12px} .t-adv .av {width:54px;height:54px;border-radius:50%;background:linear-gradient(150deg,#2a3340,#12161d);border:1px solid var(--b-mid);overflow:hidden;flex-shrink:0;display:flex;align-items:flex-end;justify-content:center} .t-adv .av svg {width:80%;height:88%;opacity:.92} .t-adv .nm {font-weight:600;color:#fff;font-size:17px} .t-adv .rl {font-size:13px;color:var(--caribbean)} .t-adv .sub {font-size:13px;color:var(--t2);margin-top:4px} /* selector (find your fit) */ .sel-wrap {border:1px solid var(--b-mid);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.02)} .sel-tabs {display:flex;border-bottom:1px solid var(--b-mid)} .sel-tab {flex:1;padding:22px;text-align:center;cursor:pointer;font-weight:600;font-size:15px;color:var(--muted);border-right:1px solid var(--b-subtle);transition:.25s;position:relative} .sel-tab:last-child {border-right:none} .sel-tab:hover {color:var(--t2)} .sel-tab.on {color:#fff;background:rgba(67,83,255,.1)} .sel-tab.on::after {content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--caribbean)} .sel-body {display:grid;grid-template-columns:1.1fr .9fr;gap:0} .sel-info {padding:44px;border-right:1px solid var(--b-mid)} .sel-info h3 {font-size:clamp(24px,3vw,34px);margin-bottom:14px} .sel-info p {font-size:15px;color:var(--t2);margin-bottom:24px} .sel-bul {display:flex;flex-direction:column;gap:12px} .sel-bul div {display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--t2)} .sel-bul svg {color:var(--caribbean);flex-shrink:0;margin-top:3px} .sel-calc {padding:44px;background:linear-gradient(165deg,rgba(67,83,255,.08),transparent)} input[type=range] {-webkit-appearance:none;width:100%;height:5px;border-radius:5px;background:rgba(255,255,255,.12);outline:none} input[type=range]::-webkit-slider-thumb {-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--bluetiful);cursor:pointer;border:3px solid #fff;box-shadow:0 4px 14px -2px rgba(67,83,255,.7)} input[type=range]::-moz-range-thumb {width:18px;height:18px;border-radius:50%;background:var(--bluetiful);cursor:pointer;border:3px solid #fff} @media(max-width:1024px) {.dash {grid-template-columns:repeat(6,1fr)} .t-adv {grid-column:span 3} } @media(max-width:920px) {.sel-body {grid-template-columns:1fr} .sel-info {border-right:none;border-bottom:1px solid var(--b-mid)} .dash {grid-template-columns:1fr 1fr} .t-adv {grid-column:span 2} } @media(max-width:560px) {.sel-tab {padding:16px 8px;font-size:13px} .dash {grid-template-columns:1fr} .t-adv {grid-column:span 1} .hero .wm {font-size:280px} } .bx-feat {position:relative} .bx-feat .bx-bg {position:absolute;inset:0;opacity:.28;z-index:0} .bx-feat .bx-bg::after {content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(20,24,32,.55),rgba(12,15,20,.94))} .bx-feat>*:not(.bx-bg) {position:relative;z-index:1} .ab-hero {display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center} .ab-hero h1 {font-size:clamp(40px,5.6vw,76px);margin:24px 0 22px} .ab-portrait {position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;border:1px solid var(--b-mid);background:linear-gradient(160deg,#1d222b,#0c0f14)} .ab-portrait .fig {position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center} .ab-portrait svg {width:82%;height:92%;opacity:.92} .ab-portrait::after {content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,11,16,.6),transparent 40%)} .ab-portrait .stamp {position:absolute;left:24px;bottom:22px;z-index:3} .ab-portrait .stamp .nm {font-family:var(--fd);font-weight:300;font-size:28px;color:#fff} .ab-portrait .stamp .rl {color:var(--caribbean);font-weight:600;font-size:13.5px;margin-top:3px} .story-2 {display:grid;grid-template-columns:1fr 1fr;gap:56px} .story-2 p {font-size:17px;line-height:1.8;color:var(--t2);margin-bottom:20px;font-weight:300} .story-2 p.drop:first-letter {font-family:var(--fd);font-weight:300;font-size:62px;float:left;line-height:.8;margin:6px 14px 0 0;color:var(--caribbean)} .pull {font-family:var(--fd);font-weight:300;font-size:clamp(23px,3vw,32px);color:#fff;line-height:1.25;padding-left:26px;border-left:2px solid var(--caribbean)} .philo {position:relative;border:1px solid var(--cy-soft);border-radius:26px;padding:64px;text-align:center;background:radial-gradient(circle at 50% 0%,rgba(6,182,212,.1),transparent 60%)} .philo .q {font-family:var(--fd);font-weight:300;font-size:clamp(26px,3.6vw,44px);color:#fff;line-height:1.25;max-width:22ch;margin:18px auto 0} .philo .who {margin-top:26px;color:var(--caribbean);font-weight:600} .sec-light {background:var(--vapor);color:var(--body)} .sec-light .disp {color:#0c1016} .sec-light .lede {color:var(--body)} .sec-light .tag {color:var(--hadfield);border-color:rgba(37,99,235,.25);background:rgba(37,99,235,.05)} .sec-light .tag i {background:var(--hadfield)} @media(max-width:920px) {.ab-hero, .story-2 {grid-template-columns:1fr;gap:34px} } @media(max-width:560px) {.philo {padding:44px 26px} } .pg-hero h1 {font-size:clamp(40px,5.4vw,74px);margin:24px 0 20px} /* filter tabs */ .filters {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px} .filt {padding:11px 18px;border-radius:999px;border:1px solid var(--b-mid);background:rgba(255,255,255,.03);color:var(--t2);font-weight:600;font-size:14px;cursor:pointer;transition:.2s} .filt:hover {color:#fff;border-color:var(--b-strong)} .filt.on {background:rgba(67,83,255,.16);border-color:rgba(67,83,255,.5);color:#fff} /* service accordion */ .svcs {display:flex;flex-direction:column;gap:12px} .svc {border:1px solid var(--b-subtle);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.025);transition:.3s var(--ease);position:relative} .svc::before {content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--caribbean),transparent);transform:scaleX(0);transform-origin:left;transition:.4s var(--ease)} .svc.open::before, .svc:hover::before {transform:scaleX(1)} .svc.open {border-color:var(--cy-soft);background:rgba(6,182,212,.04)} .svc-h {display:flex;align-items:center;gap:20px;padding:24px 28px;cursor:pointer} .svc-h .ic {width:48px;height:48px;border-radius:13px;background:rgba(6,182,212,.1);border:1px solid var(--cy-soft);color:var(--caribbean);display:flex;align-items:center;justify-content:center;flex-shrink:0} .svc-h .ti {flex:1} .svc-h h3 {font-size:19px;color:#fff;font-weight:600} .svc-h p {font-size:14px;color:var(--muted)} .svc-h .pm {width:32px;height:32px;border-radius:50%;border:1px solid var(--b-mid);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--caribbean);transition:.3s var(--ease);flex-shrink:0} .svc.open .pm {transform:rotate(45deg);background:var(--bluetiful);border-color:var(--bluetiful);color:#fff} .svc-body {max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .svc.open .svc-body {max-height:720px} .svc-in {padding:4px 28px 30px;display:grid;grid-template-columns:1.3fr 1fr;gap:34px} .svc-in .ov {font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:20px} .svc-in h4 {font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--caribbean);font-weight:600;margin-bottom:12px} .svc-ben div {display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--t2);margin-bottom:9px} .svc-ben svg {color:var(--caribbean);flex-shrink:0;margin-top:3px} .svc-side {border-left:1px solid var(--b-subtle);padding-left:30px} .svc-side .who {font-size:14px;color:var(--t2);margin-bottom:22px} .svc-steps {counter-reset:s;margin-bottom:22px} .svc-steps div {position:relative;padding-left:34px;font-size:13.5px;color:var(--t2);margin-bottom:11px;counter-increment:s} .svc-steps div::before {content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-1px;font-family:var(--fd);font-weight:300;color:var(--caribbean);font-size:15px} input[type=range] {-webkit-appearance:none;width:100%;height:5px;border-radius:5px;background:rgba(255,255,255,.12);outline:none} input[type=range]::-webkit-slider-thumb {-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--bluetiful);cursor:pointer;border:3px solid #fff;box-shadow:0 4px 14px -2px rgba(67,83,255,.7)} @media(max-width:920px) {.svc-in {grid-template-columns:1fr;gap:22px} .svc-side {border-left:none;padding-left:0;border-top:1px solid var(--b-subtle);padding-top:20px} } .pg-hero h1 {font-size:clamp(40px,5.6vw,76px);margin:24px 0 20px} .chan-rail {display:flex;flex-direction:column;gap:12px} .chan {display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid var(--b-subtle);transition:.3s var(--ease)} .chan:hover {border-color:var(--cy-soft);background:var(--cy-bg);transform:translateX(4px)} .chan .ic {width:46px;height:46px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(67,83,255,.12);border:1px solid rgba(67,83,255,.3);color:#fff} .chan .k {font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600} .chan .v {font-size:17px;color:#fff;font-weight:600;margin-top:2px} .chan .a {margin-left:auto;color:var(--caribbean);opacity:.7;transition:.3s} .chan:hover .a {opacity:1;transform:translateX(3px)} .meth {padding:30px} .meth .ic {width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(6,182,212,.1);border:1px solid var(--cy-soft);color:var(--caribbean);margin-bottom:auto} .meth h3 {font-size:18px;color:#fff;font-weight:600;margin:20px 0 7px} .meth p {font-size:14px;color:var(--t2)} .meth .go {margin-top:14px} /* form */ .cf-wrap {display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start} .cf-card {padding:40px;border:1px solid var(--b-subtle);border-radius:20px;background:rgba(255,255,255,.025)} .cf-aside .ab {padding:26px;margin-bottom:14px;border:1px solid var(--b-subtle);border-radius:18px;background:rgba(255,255,255,.025)} .cf-aside .ab .ic {width:42px;height:42px;border-radius:11px;background:rgba(6,182,212,.1);border:1px solid var(--cy-soft);color:var(--caribbean);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .cf-aside .ab h4 {color:#fff;font-size:16px;font-weight:600;margin-bottom:8px} .cf-aside .ab p {font-size:13.5px;color:var(--t2)} .cf-aside .ab .big {font-family:var(--fd);font-weight:300;font-size:34px;color:#fff;line-height:1} /* office/map */ .office-grid {display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--b-mid);border-radius:24px;overflow:hidden} .office-info {padding:44px} .office-info h2 {font-size:clamp(26px,3vw,38px);margin:14px 0 16px} .oi-row {display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--b-subtle)} .oi-row:last-child {border-bottom:none} .oi-row .ic {width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid var(--b-mid);color:var(--caribbean)} .oi-row .k {font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px} .oi-row .v {font-size:15px;color:#fff;font-weight:500;line-height:1.5} .oi-row .v a:hover {color:var(--caribbean)} .alt-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .alt {padding:26px;display:flex;gap:16px;align-items:flex-start;border:1px solid var(--b-subtle);border-radius:16px;background:rgba(255,255,255,.025);transition:.3s var(--ease)} .alt:hover {border-color:var(--cy-soft);transform:translateY(-3px)} .alt .ic {width:46px;height:46px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(67,83,255,.12);border:1px solid rgba(67,83,255,.3);color:#fff} .alt h3 {font-size:16px;color:#fff;font-weight:600;margin-bottom:6px} .alt p {font-size:13.5px;color:var(--t2)} .alt a {color:var(--caribbean);font-weight:600} @media(max-width:920px) {.cf-wrap, .office-grid {grid-template-columns:1fr;gap:34px} .alt-grid {grid-template-columns:1fr} } /* ===================================================================== Everything below is this project's, not the source's. ===================================================================== */ /* Mona Sans on Google Fonts is one variable family with a width axis, so the source's separate "Mona Sans Expanded" face is this family at 125%. Every selector that asked for --fd wanted the expanded cut. */ .disp, .pg-hero .wm, .hero .wm, .bcta .wm, .rnum, .why-l .idx, .wf .n, .mani h2, .ab-portrait .stamp .nm, .story-2 p.drop:first-letter, .pull, .philo .q, .svc-steps div::before, .cf-aside .ab .big, .t-calc .big, .nav-logo {font-stretch:125%} .skip-link {position:absolute;left:-9999px;top:0;z-index:400;padding:14px 20px; background:var(--bluetiful);color:#fff;font-weight:600;border-radius:0 0 10px 0} .skip-link:focus {left:0} /* ── Nav ─────────────────────────────────────────────────────────────── The source's wordmark was an SVG of an invented brand. Section 1e: the wordmark is the person, and the company identity lives in the injected footer where an agent cannot remove the licence disclosures. */ .nav-logo {font-weight:300;font-size:19px;letter-spacing:.06em;text-transform:uppercase; color:#fff;white-space:nowrap;font-family:var(--fd)} /* nav-fit.js measures each row child. A flex item that may shrink reports the width it was squeezed to rather than the one it needs, so the row reads as fitting while the capsule overlaps the phone number. */ .nav-in > * {flex:0 0 auto} .nav-seg {list-style:none;margin:0 auto} .nav-seg li {display:block} /* data-nav-fit="all": the segmented capsule is the signature of this nav and half of one reads as a broken menu rather than a decision, so it is whole or it is the burger. See global-js/nav-fit.js. */ .nav-toggle {display:inline-flex;align-items:center;justify-content:center; background:none;border:1px solid var(--b-mid);border-radius:9px;padding:9px; color:#fff;cursor:pointer;transition:.2s} .nav-toggle:hover {border-color:var(--b-strong)} [data-nav-overflow="false"] .nav-toggle {display:none} .nav-toggle .icon-close {display:none} body.nav-open .nav-toggle .icon-open {display:none} body.nav-open .nav-toggle .icon-close {display:block} body.nav-open {overflow:hidden} /* Outside the header in the markup, because .nav carries backdrop-filter and an element with backdrop-filter becomes the containing block for its position:fixed descendants - nested in there this collapses to the height of the bar. */ .nav-panel {position:fixed;inset:0 0 0 auto;z-index:200; display:flex;flex-direction:column;gap:6px; width:min(86vw,21rem);padding:26px 20px;overflow-y:auto; background:var(--dark-void);border-left:1px solid var(--b-mid); box-shadow:-40px 0 80px -40px rgba(0,0,0,.7); transform:translateX(100%);transition:transform .3s var(--ease); /* Off-screen rather than hidden so it can animate; visibility is what keeps its links out of the tab order while it is closed. */ visibility:hidden} .nav-panel.is-open {transform:translateX(0);visibility:visible} .nav-panel .nav-seg {display:flex;flex-direction:column;gap:2px;margin:0; background:none;border:none;padding:0;border-radius:0} .nav-panel .nav-seg a {display:flex;align-items:center;min-height:44px; padding:12px 16px;border-radius:10px;font-size:16px} .nav-panel .nav-cta {margin-top:auto;justify-content:center} @media (prefers-reduced-motion:reduce) {.nav-panel {transition:none}} /* ── Hero dashboard ──────────────────────────────────────────────────── Three tiles, not six. The source's other three were a live rate panel, a borrowing-power figure and a bank of invented statistics. */ .t-prog {grid-column:span 5} .t-prog .chips {display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .t-prog .chips span {padding:7px 13px;border-radius:9px;font-size:13px;font-weight:600; color:var(--t2);background:rgba(255,255,255,.04);border:1px solid var(--b-subtle)} .t-calc {grid-column:span 3;display:flex;flex-direction:column;justify-content:center; background:linear-gradient(155deg,rgba(67,83,255,.16),rgba(6,182,212,.04)); border-color:rgba(67,83,255,.3)} .t-calc .big {font-family:var(--fd);font-weight:300;font-size:clamp(24px,2.6vw,32px); color:#fff;line-height:1.1;margin:12px 0 8px} .t-calc .go {color:var(--caribbean);font-weight:600;font-size:14px; display:inline-flex;align-items:center;gap:7px} @media(max-width:1024px) {.t-prog {grid-column:span 3}.t-calc {grid-column:span 6}} @media(max-width:920px) {.t-prog, .t-calc {grid-column:span 2}} @media(max-width:560px) {.t-prog, .t-calc {grid-column:span 1}} /* ── "Find your fit" ─────────────────────────────────────────────────── The right half of this panel printed a rate and a repayment from a slider. It sends people to the real calculator now. */ .sel-calc {display:flex;flex-direction:column;justify-content:center} .sel-calc .k {font-size:13px;color:var(--muted);font-weight:600; letter-spacing:.06em;text-transform:uppercase} .sel-calc .h {font-family:var(--fd);font-stretch:125%;font-weight:300; font-size:clamp(26px,3vw,34px);color:#fff;line-height:1.15;margin:10px 0 14px} .sel-calc p {font-size:14.5px;color:var(--t2);margin-bottom:26px} /* ── Widget slots ────────────────────────────────────────────────────── The embedded form and the calculator are injected, and the reviews feed is not connected yet. Section 1c. */ .frs-form .form-notice, .wslot {padding:44px;text-align:center; border:1px dashed var(--b-mid);border-radius:18px; background:rgba(255,255,255,.02);color:var(--muted);font-size:14.5px} .calc-slot {min-height:420px} /* The map pane went with the fake pin it was drawn around. */ .office-grid {grid-template-columns:1fr} /* The source's scroll handler wrote an inline background, which the light twin then had to beat with !important. A class does the same job and leaves both themes in the stylesheet. */ .nav--scrolled {background:rgba(18,21,26,.94)} /* ── Services accordion ──────────────────────────────────────────────── The source made the whole header row a clickable
, which is not focusable and not announced. It is a