/* ========================================== NAVIGATION ========================================== */ /* Sticky positioning lives on

, not .navbar: header's own parent is (full page height), giving the sticky mechanism room to work. .navbar's parent is header itself — same height as .navbar — which left zero "slack" for it to stick within, so it just scrolled away despite position:sticky being set correctly. */ header{ position:sticky; top:0; z-index:1000; } .navbar{ background:var(--color-background); box-shadow:0 10px 30px rgba(0,0,0,.25); } .navbar__wrapper{ display:flex; justify-content:space-between; align-items:center; min-height:90px; } .navbar__logo img{ width:190px; height:auto; display:block; border-radius:var(--radius-sm); } .navbar__links{ display:flex; align-items:center; gap:40px; } .navbar__link{ color:var(--color-white); font-size:var(--fs-md); font-weight:500; transition:.3s; display:inline-flex; align-items:center; gap:6px; } .navbar__link:hover{ color:var(--color-gold); } .navbar__link.is-active{ color:var(--color-gold); } /* Dropdowns */ .navbar__dropdown{ position:relative; display:flex; align-items:center; } .navbar__dropdown-toggle{ background:none; border:none; } /* Caret sits as its own hit target next to a real link (e.g. Industries) so tapping the label navigates while tapping the caret opens the menu on touch devices. */ .navbar__dropdown-caret{ display:inline-flex; align-items:center; justify-content:center; background:none; border:none; color:var(--color-white); padding:6px 2px 6px 4px; cursor:pointer; transition:color .3s; } .navbar__dropdown-caret:hover{ color:var(--color-gold); } .navbar__caret{ width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-4px; transition:transform .25s ease; } .navbar__dropdown.is-open .navbar__caret, .navbar__dropdown:hover .navbar__caret{ transform:rotate(225deg); margin-top:4px; } .navbar__dropdown-bridge{ position:absolute; top:100%; left:0; width:100%; height:16px; } .navbar__dropdown-menu{ position:absolute; top:calc(100% + 16px); left:50%; transform:translate(-50%,8px); min-width:260px; background:var(--color-card); border-radius:var(--radius-md); padding:10px; box-shadow:var(--shadow-card); opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s ease; z-index:100; } .navbar__dropdown.is-open .navbar__dropdown-menu, .navbar__dropdown:hover .navbar__dropdown-menu{ opacity:1; visibility:visible; transform:translate(-50%,0); } .navbar__dropdown-menu li a{ display:block; padding:12px 16px; border-radius:var(--radius-sm); color:var(--color-text); font-size:var(--fs-sm); font-weight:500; white-space:nowrap; transition:.2s ease; } .navbar__dropdown-menu li a:hover{ background:rgba(216,177,75,.1); color:var(--color-gold); } /* ========================================== MOBILE NAV TOGGLE (hamburger) Hidden above 1024px, where the horizontal nav fits comfortably. At/below it, .navbar__menu and .navbar__actions collapse and only reappear — stacked, full-width, pushed into normal flow via flex-wrap — once .navbar carries .is-nav-open (toggled by js/app.js). ========================================== */ .navbar__toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; flex:none; } .navbar__toggle-bar{ display:block; width:100%; height:2px; background:var(--color-white); border-radius:2px; transition:transform .25s ease, opacity .25s ease; } .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); } .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2){ opacity:0; } .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media (max-width:1024px){ .navbar__wrapper{ flex-wrap:wrap; min-height:0; padding-block:18px; } .navbar__logo{ order:1; } .navbar__toggle{ display:flex; order:2; } .navbar__menu, .navbar__actions{ display:none; flex-basis:100%; width:100%; } .navbar.is-nav-open .navbar__menu, .navbar.is-nav-open .navbar__actions{ display:flex; } .navbar__menu{ order:3; margin-top:16px; } .navbar__actions{ order:4; margin-top:16px; padding-bottom:20px; } .navbar__actions .btn{ width:100%; min-width:0; } .navbar__links{ flex-direction:column; align-items:stretch; gap:0; /* .navbar__menu is a row-direction flex container, so its "stretch" only affects its child's height, not width — .navbar__links was defaulting to shrink-to-fit (as narrow as its widest single-line item, ~320-350px) and leaving the rest of the open menu's width empty. This is the real source of that dead space, not the dropdown specifically — fill the menu's full width instead. */ width:100%; } .navbar__link{ width:100%; padding:14px 34px 14px 4px; border-bottom:1px solid rgba(255,255,255,.08); position:relative; } .navbar__links > li:last-child .navbar__link{ border-bottom:none; } .navbar__dropdown{ flex-direction:column; align-items:stretch; position:relative; } .navbar__dropdown-caret{ position:absolute; right:0; top:10px; } .navbar__dropdown-bridge{ display:none; } .navbar__dropdown-menu{ position:static; transform:none; opacity:1; visibility:visible; width:100%; min-width:0; max-height:0; overflow:hidden; padding:0; box-shadow:none; background:transparent; transition:max-height .25s ease, padding .25s ease; } .navbar__dropdown.is-open .navbar__dropdown-menu{ max-height:600px; padding:4px 0 10px; /* The desktop hover/open rule (.navbar__dropdown.is-open .navbar__dropdown-menu earlier in the cascade) sets transform:translate(-50%,0) to center its absolutely positioned popup. That selector has the same specificity as this one, so on mobile — where the menu is static and full-width, not centered — it still wins by source order and shoves the whole submenu half its own width off-screen to the left. Reassert transform:none here, after it. */ transform:none; } .navbar__dropdown-menu li a{ color:var(--color-text); padding:10px 8px 10px 20px; font-size:var(--fs-sm); } } /* Between phone and the 1024px hamburger cutoff there's enough width (foldables unfolded, small tablets) to lay long dropdown lists — Industries has 10 items — out in two columns instead of one long single-file list with empty space down the right half. */ @media (min-width:700px) and (max-width:1024px){ .navbar__dropdown-menu{ display:grid; grid-template-columns:1fr 1fr; column-gap:24px; } } /* ========================================== HERO — the original two assets (network/plexus background photo + circular logo mark), restructured: full-bleed photo, a left-to-right scrim so copy stays legible on the left while the photo's own gold light burst on the right stays visible, and the logo reset as a deliberate floating medallion (glow halo + slow orbiting nodes echoing the plexus motif) instead of a flat boxed image. ========================================== */ .home-hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding:150px 0 90px; } .home-hero__media{ position:absolute; inset:0; z-index:0; } .home-hero__media img, .home-hero__media video{ width:100%; height:100%; object-fit:cover; object-position:center; } .home-hero__scrim{ position:absolute; inset:0; z-index:0; background: linear-gradient(115deg, rgba(8,21,45,.9) 0%, rgba(8,21,45,.68) 34%, rgba(8,21,45,.32) 58%, rgba(8,21,45,.18) 100%), linear-gradient(180deg, rgba(8,21,45,.4) 0%, rgba(8,21,45,0) 20%, rgba(8,21,45,0) 74%, rgba(8,21,45,.6) 100%); } .home-hero__wrapper{ position:relative; z-index:1; display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:60px; } .home-hero__copy{ max-width:720px; margin-top:-96px; min-width:0; } .home-hero__tag{ text-shadow:0 0 20px rgba(230,193,90,.35); } .home-hero__copy h1{ font-family:var(--font-heading); font-weight:600; font-size:clamp(2.6rem, 4vw, 4rem); line-height:1.14; color:var(--color-white); letter-spacing:-1px; text-shadow:0 10px 34px rgba(0,0,0,.5); margin-bottom:28px; } .hero__line-nowrap{ white-space:nowrap; } .hero__gold{ color:var(--color-gold); } .hero__dash{ color:var(--color-white); margin-left:.18em; margin-right:.18em; } .home-hero__copy p{ font-size:1.25rem; line-height:1.85; color:var(--color-text); max-width:600px; letter-spacing:.2px; font-weight:300; margin-bottom:40px; } .hero__buttons{ display:flex; align-items:center; justify-content:flex-start; gap:28px; flex-wrap:wrap; } /* The medallion itself (.home-hero__mark and its glow/ orbit/img rules) was removed from the home hero — it's now the About hero's medallion instead (.ab-hero__mark in about-page.css), so the home video shows through unobstructed on the right. These two keyframes stay here rather than moving, though: about-page.css references them by name (markOrbitSpin / markFloat) rather than duplicating them, since homepage.css is already loaded on the About page. Don't remove these without checking about-page.css first. */ @keyframes markOrbitSpin{ to{ transform:rotate(360deg); } } @keyframes markFloat{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } } /* Staggered fade-up entrance */ .home-hero__tag, .home-hero__copy h1, .home-hero__copy p, .home-hero .hero__buttons{ opacity:0; animation:homeHeroFadeUp .85s cubic-bezier(.22,.68,0,1) forwards; } .home-hero__tag{ animation-delay:.15s; } .home-hero__copy h1{ animation-delay:.32s; } .home-hero__copy p{ animation-delay:.5s; } .home-hero .hero__buttons{ animation-delay:.68s; } @keyframes homeHeroFadeUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } } @media (max-width:900px){ .home-hero__wrapper{ grid-template-columns:1fr; text-align:center; } .home-hero__copy{ max-width:640px; margin-inline:auto; } .home-hero .hero__buttons{ justify-content:center; } } @media (max-width:700px){ /* "Are They Finding You —" is kept on one line on larger screens for the visual effect, but at phone widths the fixed 2.6rem min font-size makes it wider than the viewport — force it to wrap like the rest of the headline instead of overflowing. */ .hero__line-nowrap{ white-space:normal; } } @media (prefers-reduced-motion: reduce){ .home-hero__tag, .home-hero__copy h1, .home-hero__copy p, .home-hero .hero__buttons{ animation:none; opacity:1; } } /* ========================================== TAGLINE / VALUE PROP ========================================== */ .tagline{ background:var(--color-background-alt); padding:80px 0 70px; text-align:center; } .tagline__text{ font-family:var(--font-heading); font-size:2rem; line-height:1.55; color:var(--color-white); max-width:920px; margin-inline:auto; font-weight:500; } .tagline__gold{ color:var(--color-gold); } /* ========================================== PILLARS (Be Found / Be Chosen / Keep Growing) ========================================== */ .pillars{ display:flex; justify-content:center; align-items:flex-start; gap:110px; margin-top:56px; flex-wrap:wrap; } .pillars__item{ display:flex; flex-direction:column; align-items:center; gap:16px; } .pillars__icon{ height:100px; width:auto; object-fit:contain; } .pillars__label{ font-weight:700; color:var(--color-white); font-size:var(--fs-md); } /* ========================================== PROBLEM / SOLUTION ========================================== */ .problem-solution{ background:var(--color-background); padding:var(--space-3xl) 0; } .problem-solution__grid{ display:grid; grid-template-columns:620px 620px; gap:48px; justify-content:center; align-items:start; } .problem-solution__problem{ padding-top:var(--space-xl); } .problem-solution__problem h2{ font-family:var(--font-heading); font-size:var(--fs-2xl); line-height:1.3; color:var(--color-white); margin-bottom:24px; max-width:620px; } .problem-solution__problem p{ font-size:var(--fs-md); line-height:1.8; color:var(--color-text); max-width:620px; } .problem-checklist{ display:flex; flex-direction:column; gap:20px; margin-top:32px; max-width:620px; } .problem-checklist li{ display:flex; align-items:flex-start; gap:16px; } .problem-checklist__icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:2px solid var(--color-gold); color:var(--color-gold); font-size:.9rem; font-weight:700; margin-top:2px; } .problem-checklist p{ font-size:var(--fs-md); line-height:1.6; color:var(--color-text); } .problem-solution__solution{ background:var(--color-card); border-radius:var(--radius-lg); padding:var(--space-xl); box-shadow:var(--shadow-card); } .problem-solution__solution h3{ font-family:var(--font-heading); font-size:var(--fs-xl); line-height:1.35; color:var(--color-white); margin-bottom:28px; max-width:480px; } .solution-list{ display:flex; flex-direction:column; gap:28px; } .solution-list li{ display:flex; align-items:flex-start; gap:18px; } .solution-list__icon{ flex-shrink:0; height:32px; width:32px; object-fit:contain; margin-top:2px; } .solution-list h4{ font-size:var(--fs-md); color:var(--color-white); font-weight:700; margin-bottom:6px; } .solution-list p{ font-size:var(--fs-sm); line-height:1.7; color:var(--color-text); } /* Fixed 620px+620px columns never wrapped below a ~1300px viewport, forcing the whole page to scroll horizontally on anything smaller than a wide desktop (tablets and phones included). */ @media (max-width:1310px){ .problem-solution__grid{ grid-template-columns:1fr; max-width:620px; margin-inline:auto; } } /* ========================================== SERVICES (What We Do) ========================================== */ .services{ background:var(--color-background); padding:var(--space-3xl) 0; } .services__heading{ text-align:center; max-width:1500px; margin-inline:auto; margin-bottom:var(--space-2xl); } .services__heading h2{ font-family:var(--font-heading); font-size:var(--fs-2xl); line-height:1.3; color:var(--color-white); } .services__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; } .service-card{ background:var(--color-card); border-radius:var(--radius-lg); padding:var(--space-lg); box-shadow:var(--shadow-card); } .service-card h3{ font-size:var(--fs-lg); color:var(--color-white); line-height:1.3; margin-bottom:14px; } .service-card p{ font-size:var(--fs-sm); line-height:1.7; color:var(--color-text); } @media (max-width:900px){ .services__grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .services__grid{ grid-template-columns:1fr; } } /* ========================================== AI SEARCH REVOLUTION ========================================== */ .ai-revolution{ background:var(--color-background); padding:var(--space-3xl) 0; } .ai-revolution__grid{ display:grid; grid-template-columns:35fr 65fr; gap:60px; align-items:center; } .ai-revolution__content h2{ font-family:var(--font-heading); font-size:var(--fs-2xl); line-height:1.25; color:var(--color-white); margin-bottom:24px; max-width:640px; } .ai-revolution__gold{ color:var(--color-gold); } .ai-revolution__content p{ font-size:var(--fs-md); line-height:1.8; color:var(--color-text); max-width:600px; margin-bottom:20px; } .ai-revolution__quote-line{ min-height:98px; } .ai-revolution__content em{ color:var(--color-white); font-style:italic; } .ai-revolution__content .btn{ margin-top:16px; } /* Comparison cards */ .ai-revolution__compare{ display:flex; flex-direction:row; align-items:flex-start; gap:24px; } .compare-card{ flex:1 1 0; } .compare-card{ background:var(--color-card); border-radius:var(--radius-lg); padding:var(--space-md); box-shadow:var(--shadow-card); } .compare-card--ai{ border:1px solid rgba(216,177,75,.35); } .compare-card__label{ display:inline-block; font-size:var(--fs-xs); font-weight:700; color:var(--color-text); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; } .compare-card__label--gold{ color:var(--color-gold); } .compare-card__search{ background:var(--color-background); border-radius:var(--radius-sm); padding:12px 16px; font-size:var(--fs-sm); color:var(--color-text); margin-bottom:14px; } .search-results{ display:flex; flex-direction:column; gap:16px; } .search-result__tag{ display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; font-weight:700; color:var(--color-text); background:rgba(255,255,255,.08); padding:2px 7px; border-radius:4px; margin-bottom:5px; } .search-result__title{ color:#8ab4f8; font-size:var(--fs-sm); font-weight:500; margin-bottom:2px; } .search-result__url{ color:#7fbf7f; font-size:.75rem; margin-bottom:4px; } .search-result__desc{ color:var(--color-text); font-size:.8rem; line-height:1.55; } .compare-card__bubble{ background:var(--color-background); border-radius:var(--radius-sm); padding:14px 16px; font-size:var(--fs-sm); line-height:1.6; color:var(--color-text); margin-bottom:12px; } .compare-card__bubble--answer{ background:rgba(216,177,75,.1); border:1px solid rgba(216,177,75,.3); color:var(--color-white); } .compare-card__bubble--answer strong{ color:var(--color-gold); } @media (max-width:900px){ .ai-revolution__grid{ grid-template-columns:1fr; } } @media (max-width:560px){ .ai-revolution__compare{ flex-direction:column; } } /* ========================================== ROTATING QUOTE (AI Search Revolution) ========================================== */ .rotating-quote, .swipe-text{ display:inline-block; transition:transform .4s ease, opacity .4s ease; } .rotating-quote{ color:var(--color-gold); font-weight:700; font-size:1.08em; } .swipe-text.is-swiping{ transform:translateY(-10px); opacity:0; } .compare-card__search.swipe-text, .compare-card__bubble.swipe-text{ display:block; } .search-results.swipe-text{ display:flex; } /* ========================================== INDUSTRIES WE SERVE ========================================== */ .industries{ background:var(--color-background); padding:var(--space-3xl) 0; } .industries__heading{ text-align:center; max-width:1000px; margin-inline:auto; margin-bottom:var(--space-2xl); } .industries__heading h2{ font-family:var(--font-heading); font-size:var(--fs-2xl); line-height:1.3; color:var(--color-white); } .industries__grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; } .industry-card{ position:relative; aspect-ratio:4 / 5; border-radius:var(--radius-md); overflow:hidden; display:flex; align-items:flex-end; padding:18px; transition:transform .4s ease, box-shadow .4s ease; } .industry-card:hover{ transform:scale(1.07); z-index:5; box-shadow:0 30px 60px rgba(0,0,0,.5); } .industry-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; transition:transform .5s ease; } .industry-card:hover .industry-card__img{ transform:scale(1.12); } .industry-card::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%); } .industry-card__label{ position:relative; z-index:2; color:var(--color-white); font-size:var(--fs-md); font-weight:700; line-height:1.3; transition:font-size .35s ease; } .industry-card:hover .industry-card__label{ font-size:1.3rem; } @media (max-width:1024px){ .industries__grid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:700px){ .industries__grid{ grid-template-columns:1fr 1fr; } } @media (max-width:420px){ .industries__grid{ grid-template-columns:1fr; } } /* ========================================== OUR PROCESS ========================================== */ .process{ background:var(--color-background); padding:var(--space-3xl) 0; } .process__heading{ text-align:center; max-width:1000px; margin-inline:auto; margin-bottom:var(--space-2xl); } .process__heading h2{ font-family:var(--font-heading); font-size:var(--fs-2xl); line-height:1.3; color:var(--color-white); } .process__timeline{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; } .process__timeline::before{ content:""; position:absolute; top:32px; left:12.5%; right:12.5%; height:2px; background:linear-gradient(to right, rgba(216,177,75,.5), rgba(216,177,75,.5)); z-index:0; } .process-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding-inline:12px; } .process-step__badge{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--color-background); border:2px solid var(--color-gold); color:var(--color-gold); font-family:var(--font-heading); font-size:var(--fs-lg); font-weight:700; margin-bottom:24px; } .process-step h3{ font-size:var(--fs-md); color:var(--color-white); line-height:1.3; margin-bottom:12px; } .process-step p{ font-size:var(--fs-sm); line-height:1.7; color:var(--color-text); max-width:300px; } @media (max-width:760px){ .process__timeline{ grid-template-columns:1fr 1fr; } /* The connecting line is positioned for a single row of 4 — with two rows of 2 it would just cut across both awkwardly. */ .process__timeline::before{ display:none; } } @media (max-width:460px){ .process__timeline{ grid-template-columns:1fr; } } /* ========================================== STATS ========================================== */ .differentiators{ background:var(--color-background); padding:var(--space-3xl) 0; } .differentiators__grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; } .differentiators__content h2{ font-family:var(--font-heading); font-size:var(--fs-2xl); line-height:1.3; color:var(--color-white); margin-bottom:20px; max-width:600px; white-space:nowrap; } .differentiators__content p{ font-size:var(--fs-md); line-height:1.8; color:var(--color-text); max-width:480px; } .differentiators__list{ display:grid; grid-template-columns:1fr 1fr; gap:22px 32px; } .differentiators__list li{ display:flex; align-items:center; gap:14px; } .differentiators__check{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:2px solid var(--color-gold); color:var(--color-gold); font-size:.9rem; font-weight:700; } .differentiators__list span:last-child{ font-size:var(--fs-md); color:var(--color-white); font-weight:600; } @media (max-width:900px){ .differentiators__grid{ grid-template-columns:1fr; } .differentiators__content h2{ white-space:normal; } .differentiators__content p{ max-width:none; } } @media (max-width:560px){ .differentiators__list{ grid-template-columns:1fr; } } /* ========================================== FINAL CTA ========================================== */ .final-cta{ background:var(--color-background-alt); padding:var(--space-3xl) 0; } .final-cta__content{ text-align:center; max-width:900px; margin-inline:auto; } .final-cta__logo{ display:block; width:180px; height:180px; margin:0 auto 12px; mix-blend-mode:lighten; pointer-events:none; } .final-cta__content h2{ font-family:var(--font-heading); font-size:var(--fs-2xl); line-height:1.3; color:var(--color-white); margin-bottom:20px; } .final-cta__content p{ font-size:var(--fs-md); line-height:1.8; color:var(--color-text); margin-bottom:36px; } /* ========================================== FOOTER ========================================== */ .footer__main{ background:var(--color-background); padding:var(--space-xl) 0 var(--space-2xl); } .footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; } @media (max-width:900px){ .footer__main{ padding-bottom:var(--space-lg); } .footer__grid{ grid-template-columns:1fr 1fr; gap:36px; } .footer__brand{ grid-column:1 / -1; } } @media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } } .footer__logo{ width:170px; height:auto; margin-bottom:20px; border-radius:var(--radius-sm); } .footer__brand p{ font-size:var(--fs-sm); line-height:1.7; color:var(--color-text); max-width:340px; } .footer__column h4{ color:var(--color-white); font-size:var(--fs-md); margin-bottom:20px; } .footer__column ul{ display:flex; flex-direction:column; gap:12px; } .footer__column ul a{ font-size:var(--fs-sm); color:var(--color-text); transition:.2s ease; } .footer__contact-link{ font-size:var(--fs-md); } .footer__column ul a:hover{ color:var(--color-gold); } .footer__column p{ font-size:var(--fs-sm); color:var(--color-text); margin-bottom:20px; } .footer__bottom{ background:var(--color-background); border-top:1px solid rgba(255,255,255,.08); padding:24px 0; } .footer__bottom-wrapper{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; } .footer__legal{ display:flex; align-items:center; flex-wrap:wrap; gap:20px; } .footer__legal span{ font-size:var(--fs-xs); color:var(--color-text); } .footer__legal a{ font-size:var(--fs-xs); color:var(--color-text); transition:.2s ease; } .footer__legal a:hover{ color:var(--color-gold); } .footer__social{ display:flex; gap:14px; } .footer__social-icon{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--color-card); color:var(--color-text); transition:.2s ease; } .footer__social-icon svg{ width:16px; height:16px; } .footer__social-icon:hover{ background:var(--color-gold); color:var(--color-background); } /* ========================================== LIGHT SECTIONS (alternating background rhythm) ========================================== */ .section-light{ background:#ffffff !important; } /* When two section-light blocks land back to back (process -> differentiators, here), there's no background change to read as a boundary, so their top/bottom padding just stacks into one big blank white gap — worse the less horizontal space there is to fill (phones, foldables, even tablet-width screens). Collapse the second section's top padding so the visible gap is one section's worth of spacing instead of two, at every viewport size. */ .section-light + .section-light{ padding-top:0; } /* Problem/Solution — section goes light, solution card stays dark */ .section-light .problem-solution__problem h2{ color:#0B1D3A; } .section-light .problem-solution__problem p{ color:#5B6472; } .section-light .problem-checklist p{ color:#5B6472; } .section-light .problem-solution__problem .eyebrow{ color:var(--color-gold); } /* AI Search Revolution — content goes light, compare cards stay dark */ .section-light .ai-revolution__content .eyebrow{ color:var(--color-gold); } .section-light .ai-revolution__content h2{ color:#0B1D3A; } .section-light .ai-revolution__gold{ color:var(--color-gold); } .section-light .ai-revolution__content p{ color:#5B6472; } .section-light .ai-revolution__content em{ color:#0B1D3A; } .section-light .rotating-quote{ color:var(--color-gold); } /* Our Process */ .section-light .process__heading h2{ color:#0B1D3A; } .section-light .process-step h3{ color:#0B1D3A; } .section-light .process-step p{ color:#5B6472; } .section-light .process__timeline::before{ background:rgba(169,121,31,.35); } /* Differentiators */ .section-light .differentiators__content h2{ color:#0B1D3A; } .section-light .differentiators__content p{ color:#5B6472; } .section-light .differentiators__list span:last-child{ color:#0B1D3A; }