/* ========================================================= BS ALLIANCE — DESIGN SYSTEM Palette: Ledger Navy + Warm Gold (drawn from the brand mark) Type: Fraunces (display, editorial serif) + Inter (body/UI) Signature: the "Recover · Resolve · Rebuild" ledger line — a rising, hand-ruled recovery curve that threads through the hero and section dividers, echoing a financial ledger. ========================================================= */ :root{ --navy-950:#0a1626; --navy-900:#0e1f38; --navy-800:#152b4d; --navy-700:#1f3c68; --navy-600:#2c5188; --gold-600:#a97a2f; --gold-500:#c8963f; --gold-400:#dcb46a; --gold-100:#f4e6c9; --ivory-100:#faf8f4; --ivory-200:#f2ede2; --paper:#ffffff; --ink-900:#12181f; --ink-700:#3c4552; --ink-500:#6b7480; --line:#e4ded0; --line-dark:#2a3a57; --green-600:#2f6f4e; --radius-sm:4px; --radius-md:10px; --shadow-card:0 1px 2px rgba(10,22,38,.06), 0 8px 24px -12px rgba(10,22,38,.18); --shadow-lift:0 20px 40px -18px rgba(10,22,38,.35); --maxw:1200px; --space-section:clamp(64px,9vw,128px); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} html,body{overflow-x:hidden;max-width:100%} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } body{ margin:0; background:var(--ivory-100); color:var(--ink-900); font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} button{font:inherit;cursor:pointer} input,textarea,select{font:inherit} h1,h2,h3,h4{ font-family:'Fraunces',Georgia,serif; font-weight:600; line-height:1.12; margin:0 0 .5em; color:var(--navy-950); letter-spacing:-.01em; } h1{font-size:clamp(2.4rem,4.6vw,4.1rem);font-weight:560} h2{font-size:clamp(1.9rem,3.1vw,2.7rem)} h3{font-size:clamp(1.25rem,1.6vw,1.5rem)} p{margin:0 0 1em;color:var(--ink-700)} .lede{font-size:1.2rem;color:var(--ink-700);max-width:56ch} :focus-visible{outline:3px solid var(--gold-500);outline-offset:3px} .container{max-width:var(--maxw);margin:0 auto;padding:0 24px} .section{padding:var(--space-section) 0} .section--tight{padding:calc(var(--space-section)*.6) 0} .section--navy{background:var(--navy-950);color:var(--ivory-100)} .section--navy h2,.section--navy h3{color:var(--paper)} .section--navy p{color:#c3cee0} .section--ivory2{background:var(--ivory-200)} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:'Inter',sans-serif; font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--gold-600);margin-bottom:16px; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--gold-500)} .section--navy .eyebrow{color:var(--gold-400)} .section-head{max-width:720px;margin-bottom:48px} .section-head--center{margin-left:auto;margin-right:auto;text-align:center} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; padding:14px 28px;border-radius:2px; font-weight:600;font-size:.95rem;letter-spacing:.01em; border:1px solid transparent;transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; white-space:nowrap; } .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--gold-500);color:var(--navy-950);border-color:var(--gold-500)} .btn-primary:hover{background:var(--gold-600)} .btn-outline{background:transparent;color:var(--paper);border-color:rgba(250,248,244,.4)} .btn-outline:hover{border-color:var(--gold-400);color:var(--gold-400)} .btn-dark{background:var(--navy-950);color:var(--paper);border-color:var(--navy-950)} .btn-dark:hover{background:var(--navy-800)} .btn-ghost{background:transparent;color:var(--navy-950);border-color:var(--line-dark)} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:100; background:rgba(10,22,38,.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(220,180,106,.18); } /* Anchor targets (About / Our Clients / Infrastructure submenu links) — offset so the sticky header never covers the section heading on jump. */ #about-bsalliance,#vision-mission,#what-we-are-working-on,#clients,#infrastructure{ scroll-margin-top:96px; } .site-header__row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:8px;flex-wrap:nowrap} .container--header{max-width:2000px} /* Logo: fixed, never grows/shrinks with the row, capped height regardless of the source image's real dimensions (fixes oversized/custom-logo uploads blowing out the header height). */ .site-logo{display:flex;align-items:center;gap:12px;color:var(--paper);flex-shrink:0;max-height:54px} .site-logo img, .site-logo .custom-logo{height:38px;width:auto;max-width:180px;object-fit:contain;display:block} .site-logo .custom-logo-link, .site-logo__mark-link{display:flex;align-items:center} .site-logo__mark{ display:flex;align-items:center;background:#fff; padding:6px 14px;border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,.18); transition:transform .2s ease, box-shadow .2s ease; } .site-logo:hover .site-logo__mark{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.24)} .site-logo__mark img{height:34px;width:auto;max-width:160px} .site-logo__text{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;color:var(--paper);line-height:1.1} .site-logo__text small{display:block;font-family:'Inter',sans-serif;font-size:.6rem;letter-spacing:.2em;color:var(--gold-400);font-weight:600;margin-top:2px} /* Right-hand cluster: nav + CTA grouped and pushed to the right edge, so with .site-header__row's space-between the logo sits alone on the left instead of the nav appearing to float in the middle. */ .header-right{display:flex;align-items:center;gap:20px;min-width:0} /* Nav: 6 top-level items now fit on one line at normal desktop widths, so the nav no longer needs a horizontal-scroll safety net. (That net used to clip the dropdown too — overflow-x:auto implicitly sets overflow-y to auto as well, which cut off the absolutely-positioned .sub-menu. Keeping this overflow:visible is what makes hover dropdowns show at all.) */ .primary-nav{min-width:0;overflow:visible} .primary-nav > ul{display:flex;gap:2px;align-items:center;flex-wrap:nowrap} .primary-nav a{ display:block;padding:9px 12px;font-size:.85rem;font-weight:500;color:#dfe6f0; border-radius:2px;white-space:nowrap;transition:color .15s ease,background .15s ease; } .primary-nav a:hover, .primary-nav .current-menu-item > a{color:var(--gold-400);background:rgba(220,180,106,.08)} /* ---------- Dropdown / mega-menu (desktop hover) ---------- */ .primary-nav li{position:relative} .primary-nav .menu-item-has-children > a{display:flex;align-items:center;gap:6px} .primary-nav .menu-item-has-children > a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px;opacity:.7;transition:transform .2s ease} .primary-nav .sub-menu{ display:block;list-style:none;margin:0;padding:10px;position:absolute;top:100%;left:0; width:260px;background:var(--navy-950);border:1px solid rgba(220,180,106,.22); border-radius:6px;box-shadow:0 20px 40px -14px rgba(10,22,38,.5); opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:200; } .primary-nav .sub-menu li{width:100%} .primary-nav .sub-menu a{display:block;padding:10px 14px;font-size:.86rem;border-radius:4px;white-space:nowrap;color:#dfe6f0} .primary-nav .sub-menu a:hover, .primary-nav .sub-menu .current-menu-item > a{color:var(--gold-400);background:rgba(220,180,106,.08)} .primary-nav .sub-menu .menu-item-has-children > a::after{transform:rotate(-45deg);margin-top:0} /* "Company" has 8 links — lay it out in two columns so the dropdown grows sideways instead of into an oversized single-column list. */ .primary-nav .sub-menu--wide{width:420px;column-count:2;column-gap:4px} .primary-nav .sub-menu--wide li{break-inside:avoid} /* Grouped dropdown (Debt Collection > Domestic Collections / International Collections): a stacked list of clickable group rows. Each group's own services only reveal in a flyout when that specific row is hovered/focused — kept in the same dark navy/gold palette as every other dropdown on the site, instead of a mismatched white panel. */ .primary-nav .sub-menu--vertical-groups{width:280px} .primary-nav .sub-menu--vertical-groups > li > a{font-weight:700} /* Nested (flyout) dropdowns open to the right of their parent row. */ .primary-nav .sub-menu .sub-menu{top:0;left:100%;margin-left:6px;transform:translate(-6px,0)} .primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translate(0,0)} /* Keep dropdowns (and their flyouts) from spilling off the right edge of the viewport — scoped to the last two top-level items. */ .primary-nav > ul > li:nth-last-child(-n+2) > .sub-menu{left:auto;right:0} .primary-nav > ul > li:nth-last-child(-n+2) > .sub-menu .sub-menu{left:auto;right:100%;margin-left:0;margin-right:6px;transform:translate(6px,0)} .primary-nav > ul > li:nth-last-child(-n+2) li:hover > .sub-menu, .primary-nav > ul > li:nth-last-child(-n+2) li:focus-within > .sub-menu{transform:translate(0,0)} .header-cta{display:flex;align-items:center;gap:8px;flex-shrink:0} .header-cta .btn{padding:9px 15px;font-size:.8rem} .nav-toggle{display:none;background:none;border:1px solid rgba(250,248,244,.3);color:var(--paper);padding:8px 10px;border-radius:2px} .nav-toggle span{display:block;width:20px;height:2px;background:var(--paper);margin:4px 0} /* ---------- Hero ---------- */ .hero{ position:relative; background:radial-gradient(120% 140% at 85% -10%, #1c3a63 0%, var(--navy-950) 55%); color:var(--paper); overflow:hidden; padding:76px 0 0; } .hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-bottom:60px} .hero__kicker{color:var(--gold-400);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.75rem;margin-bottom:18px;display:flex;align-items:center;gap:10px} .hero__kicker::before{content:"";width:22px;height:1px;background:var(--gold-500)} .hero h1{color:var(--paper);margin-bottom:22px} .hero h1 em{font-style:normal;color:var(--gold-400)} .hero p.lede{color:#c3cee0;margin-bottom:34px} .hero__actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:44px} .hero__stats{display:flex;gap:36px;flex-wrap:wrap;border-top:1px solid rgba(220,180,106,.2);padding-top:28px} .hero__stat b{display:block;font-family:'Fraunces',serif;font-size:1.9rem;color:var(--gold-400);font-weight:600} .hero__stat span{font-size:.8rem;color:#a9b7cc;letter-spacing:.02em} /* Ledger curve signature graphic */ .ledger{position:relative;background:rgba(255,255,255,.03);border:1px solid rgba(220,180,106,.22);border-radius:2px;padding:28px 24px 20px} .ledger__title{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#9bb0cc;margin-bottom:18px} .ledger svg{width:100%;height:auto;display:block} .ledger__path{stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 2.4s ease forwards .3s} @keyframes draw{to{stroke-dashoffset:0}} .ledger__labels{display:flex;justify-content:space-between;margin-top:14px} .ledger__labels span{font-family:'Fraunces',serif;font-size:.95rem;color:var(--paper);position:relative;padding-left:16px} .ledger__labels span::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:var(--gold-500)} .ledger__labels small{display:block;color:#8fa0ba;font-family:'Inter',sans-serif;font-weight:400;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;padding-left:16px;margin-top:2px} /* ---------- Trust / client strip ---------- */ .trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);padding:32px 0} .trust-strip__label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);font-weight:700;margin-bottom:20px;text-align:center} .logo-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:36px 48px} .logo-grid__item{font-family:'Fraunces',serif;font-weight:600;color:var(--ink-500);font-size:1.05rem;opacity:.85;letter-spacing:.01em;transition:opacity .2s, color .2s} .logo-grid__item:hover{opacity:1;color:var(--navy-900)} .logo-grid--img{gap:30px 44px} .logo-grid__logo{height:34px;width:auto;max-width:130px;object-fit:contain;opacity:.85;transition:opacity .2s, transform .2s} .logo-grid__logo:hover{opacity:1;transform:translateY(-2px)} /* Auto-scrolling logo marquee (single line, full colour, pauses on hover) */ .logo-marquee{ overflow:hidden;position:relative;width:100%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); } .logo-track{display:flex;align-items:center;gap:72px;width:max-content;animation:logo-scroll 32s linear infinite} .logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track{animation-play-state:paused} .logo-track__logo{ height:52px;width:auto;max-width:190px;object-fit:contain;flex:0 0 auto; opacity:.88;filter:none;transition:opacity .25s ease, transform .25s ease, filter .25s ease; } .logo-track__logo:hover{opacity:1;transform:scale(1.08);filter:drop-shadow(0 6px 14px rgba(10,22,38,.15))} @keyframes logo-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @media (prefers-reduced-motion: reduce){ .logo-track{animation:none} } /* ---------- Process (Recover / Resolve / Rebuild) ---------- */ .process{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .process--six{grid-template-columns:repeat(6,1fr)} @media (max-width:980px){.process--six{grid-template-columns:repeat(3,1fr)}} @media (max-width:600px){.process--six{grid-template-columns:repeat(2,1fr)}} .process--four{grid-template-columns:repeat(4,1fr)} @media (max-width:900px){.process--four{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.process--four{grid-template-columns:1fr}} .process--five{grid-template-columns:repeat(5,1fr)} @media (max-width:980px){.process--five{grid-template-columns:repeat(3,1fr)}} @media (max-width:600px){.process--five{grid-template-columns:repeat(2,1fr)}} .process__item{background:var(--paper);padding:40px 34px;position:relative} .process__index{font-family:'Fraunces',serif;font-size:.85rem;color:var(--gold-600);letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;display:block} .process__item h3{margin-bottom:12px} .process__item p{margin:0;font-size:.95rem} /* ---------- Cards ---------- */ .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .industry-grid{grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} @media (max-width:980px){.industry-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:600px){.industry-grid{grid-template-columns:repeat(2,1fr)}} .service-card{ background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md); padding:34px 30px;box-shadow:var(--shadow-card);height:100%; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--gold-400)} .service-card__icon{width:46px;height:46px;border-radius:50%;background:var(--navy-950);color:var(--gold-400);display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-family:'Fraunces',serif;font-weight:600} .service-card h3{margin-bottom:10px;font-size:1.2rem} .service-card p{font-size:.94rem;margin-bottom:0} /* ---------- Two column feature ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .split--reverse .split__media{order:2} .split__media{position:relative} .split__media img{border-radius:var(--radius-md);box-shadow:var(--shadow-card);width:100%;aspect-ratio:4/3.4;object-fit:cover} .split__frame{position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold-500);border-radius:var(--radius-md);z-index:-1} .check-list li{position:relative;padding-left:30px;margin-bottom:14px;color:var(--ink-700);font-size:.98rem} .check-list li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;background:var(--gold-100);border:1px solid var(--gold-500)} .check-list li::after{content:"";position:absolute;left:5px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold-600)} /* ---------- Stats band ---------- */ .stat-band{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(220,180,106,.22);border-bottom:1px solid rgba(220,180,106,.22)} .stat-band__item{padding:36px 24px;border-right:1px solid rgba(220,180,106,.14)} .stat-band__item:last-child{border-right:none} .stat-band__item b{display:block;font-family:'Fraunces',serif;font-size:2.4rem;color:var(--gold-400);font-weight:600} .stat-band__item span{font-size:.82rem;color:#a9b7cc;text-transform:uppercase;letter-spacing:.08em} /* ---------- Territory / map list ---------- */ .territory-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px} .territory-block{border-left:2px solid var(--gold-500);padding-left:26px} .territory-block h3{margin-bottom:4px} .territory-block .territory-sub{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);margin-bottom:20px} .territory-list{columns:2;column-gap:24px} .territory-list li{padding:9px 0;border-bottom:1px dashed var(--line);font-weight:500;break-inside:avoid} /* ---------- Infrastructure ---------- */ .infra-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px} .infra-grid__item{background:var(--paper);padding:28px 24px} .infra-grid__item b{display:block;font-family:'Fraunces',serif;font-size:1.7rem;color:var(--navy-950)} .infra-grid__item span{font-size:.82rem;color:var(--ink-500);text-transform:uppercase;letter-spacing:.06em} .infra-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px} .infra-photos img{width:100%;height:190px;object-fit:cover;border-radius:var(--radius-sm)} /* ---------- Testimonial / CTA band ---------- */ .cta-band{background:var(--navy-950);color:var(--paper);border-radius:var(--radius-md);padding:56px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;position:relative;overflow:hidden} .cta-band::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border:1px solid rgba(220,180,106,.3);border-radius:50%} .cta-band h2{color:var(--paper);margin-bottom:8px} .cta-band p{color:#c3cee0;margin:0;max-width:46ch} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px} .contact-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:28px;margin-bottom:20px;box-shadow:var(--shadow-card)} .contact-card h4{font-family:'Inter',sans-serif;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-600);margin-bottom:12px;font-weight:700} .contact-card p{margin-bottom:4px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .form-field{display:flex;flex-direction:column;gap:8px} .form-field label{font-size:.8rem;font-weight:600;color:var(--navy-900)} .form-field input,.form-field textarea{ border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 14px;background:var(--paper); color:var(--ink-900);width:100%; } .form-field input:focus,.form-field textarea:focus{border-color:var(--gold-500)} .contact-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:40px;box-shadow:var(--shadow-card)} .form-note{font-size:.8rem;color:var(--ink-500);margin-top:10px} /* ---------- Footer ---------- */ .site-footer{background:var(--navy-950);color:#c3cee0;padding:72px 0 28px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(220,180,106,.16)} .footer-brand__text{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--paper);margin-bottom:6px} .footer-logo-mark{display:inline-flex;align-items:center;background:#fff;padding:10px 20px;border-radius:8px} .footer-logo-mark img{height:44px;width:auto;display:block} .footer-brand small{display:block;color:var(--gold-400);letter-spacing:.18em;font-size:.65rem;text-transform:uppercase;margin-bottom:16px} .footer-col h5{color:var(--paper);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;font-weight:700} .footer-col li{margin-bottom:11px;font-size:.92rem} .footer-col a:hover{color:var(--gold-400)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:.82rem;color:#8091ab;flex-wrap:wrap;gap:12px} .footer-social{display:flex;gap:14px} .footer-social a{width:34px;height:34px;border:1px solid rgba(220,180,106,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem} /* ---------- Entry content (WP editor output on Standard Page template) ---------- */ .entry-content{color:var(--ink-700);font-size:1.02rem} .entry-content > *:first-child{margin-top:0} .entry-content h2{margin-top:1.1em} .entry-content h3{margin-top:1em} .entry-content p{margin-bottom:1.1em} .entry-content ul,.entry-content ol{margin:0 0 1.4em;padding-left:1.4em} .entry-content ul{list-style:none} .entry-content ul li{position:relative;padding-left:22px;margin-bottom:12px} .entry-content ul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--gold-500)} .entry-content ol li{margin-bottom:12px;padding-left:6px} .entry-content a{color:var(--gold-600);text-decoration:underline;text-underline-offset:3px} .entry-content a:hover{color:var(--gold-500)} .entry-content blockquote{border-left:3px solid var(--gold-500);padding:4px 0 4px 22px;margin:1.6em 0;font-family:'Fraunces',serif;font-size:1.15rem;color:var(--navy-900)} .entry-content img{border-radius:var(--radius-md);margin:1.4em 0;box-shadow:var(--shadow-card)} .entry-content table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem} .entry-content table th,.entry-content table td{border:1px solid var(--line);padding:12px 14px;text-align:left} .entry-content table th{background:var(--ivory-200);font-weight:700} .entry-content hr{border:none;border-top:1px solid var(--line);margin:2em 0} /* ---------- Page header (interior pages) ---------- */ .page-hero{background:var(--navy-950);color:var(--paper);padding:150px 0 64px;position:relative;overflow:hidden} .page-hero::before{content:"";position:absolute;right:-100px;bottom:-140px;width:340px;height:340px;border:1px solid rgba(220,180,106,.2);border-radius:50%} .page-hero .eyebrow{color:var(--gold-400)} .page-hero h1{color:var(--paper);margin-bottom:14px} .breadcrumbs{font-size:.82rem;color:#9bb0cc;margin-bottom:18px} .breadcrumbs a:hover{color:var(--gold-400)} /* ---------- Scroll-reveal animation system ---------- */ .reveal-up,.reveal-left,.reveal-right,.reveal-fade,.reveal-scale{ opacity:0;transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1); will-change:transform,opacity; } .reveal-up{transform:translateY(40px)} .reveal-left{transform:translateX(-56px)} .reveal-right{transform:translateX(56px)} .reveal-scale{transform:scale(.94)} .reveal-fade{transform:none} .reveal-up.is-visible,.reveal-left.is-visible,.reveal-right.is-visible, .reveal-fade.is-visible,.reveal-scale.is-visible{opacity:1;transform:none} /* Staggered children — direct children fade up in sequence */ .reveal-stagger > *{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1)} .reveal-stagger.is-visible > *{opacity:1;transform:none} .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s} .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.15s} .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.25s} .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.35s} .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.45s} .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.55s} @media (prefers-reduced-motion: reduce){ .reveal-up,.reveal-left,.reveal-right,.reveal-fade,.reveal-scale,.reveal-stagger > *{ opacity:1 !important;transform:none !important;transition:none !important; } } /* Subtle hover lift used across interactive homepage elements */ .hover-lift{transition:transform .25s ease, box-shadow .25s ease} .hover-lift:hover{transform:translateY(-5px)} /* ---------- Utility ---------- */ .text-center{text-align:center} .mt-0{margin-top:0} .divider{height:1px;background:var(--line);margin:var(--space-section) 0 0} /* ---------- Responsive ---------- */ @media (max-width: 980px){ .hero__grid{grid-template-columns:1fr;gap:40px} .split{grid-template-columns:1fr;gap:36px} .split--reverse .split__media{order:0} .card-grid{grid-template-columns:repeat(2,1fr)} .process{grid-template-columns:1fr} .stat-band{grid-template-columns:repeat(2,1fr)} .stat-band__item:nth-child(2n){border-right:none} .infra-grid{grid-template-columns:repeat(2,1fr)} .infra-photos{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr;gap:32px} .territory-cols{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} } /* The current sitemap has only 6 top-level items (Home / About / Debt Collection / B2B / BPO / Company) plus the logo and two CTA buttons — that comfortably fits inline on ordinary laptop widths (1280px+), so the hamburger only needs to take over below ~1150px, close to where the general tablet/mobile breakpoints elsewhere on the site already sit. (This used to be 1310px, from an earlier draft of the menu that had far more top-level items — left over after the nav was consolidated into hub pages, it was needlessly forcing laptops into the drawer.) */ @media (max-width: 1150px){ .primary-nav,.header-cta .btn-outline{display:none} .nav-toggle{display:block} } @media (max-width: 760px){ .card-grid{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .stat-band{grid-template-columns:1fr 1fr} .infra-photos{grid-template-columns:1fr 1fr} .cta-band{padding:36px 26px;flex-direction:column;text-align:left} .footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column;align-items:flex-start} .territory-list{columns:1} } /* Mobile nav drawer NOTE: the drawer (and its scrim) must sit ABOVE .site-header in the stacking order. .site-header is position:sticky with z-index:100 — if the drawer's z-index is lower than that, the header's own background paints over the top of the open drawer and hides whichever menu items happen to sit underneath it, and taps in that area land on the header instead of the drawer. Both z-indexes below are set with that in mind: drawer > scrim > header. Every row that has children (menu-item-has-children) is laid out as a flex row of exactly two items — the link and the round toggle button — with `order` pinning them in place regardless of DOM position. The nested