:root { --brand-dark: #0B1D3A; --accent-color: #F5B301; --body-container: 1270px; --bg-light: #FAFAFA; --border-light: #ffbe0a3b; --bg-gradient: linear-gradient(126deg, #fff6ee 33.32%, #ffeded 100%); --text-dark: #0B1D3A; --text-light: #656565; --ease-in-1: all 0.1s ease-in; --ease-in-2: all 0.2s ease-in; } ::placeholder { opacity: 0.5; } html { scroll-behavior: smooth; scroll-padding-top: 78px; } body, html, * { margin: 0; font-family: "Open Sans", System-ui, sans-serif; } *::before, *::after { box-sizing: border-box; scroll-behavior: smooth; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } html { scroll-behavior: smooth; } /* 1) Global guard against accidental overflow */ *, *::before, *::after { box-sizing: border-box; } html, body { width: 100%; max-width: 100%; } /* 2) Media: small phones */ @media (max-width: 480px) { /* Big headings can push width on tiny screens */ .banner--text-wrapper h1 { font-size: clamp(1.75rem, 6.5vw, 2.25rem); padding: 0 12px; word-wrap: break-word; } /* Header menu is too wide for 360px */ .header--menu { display: none; /* quick fix; swap for hamburger later */ } } /* Prevent inline scrollers from expanding the page */ .platform-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; /* keeps body from being pulled sideways */ } /* Images & video never exceed viewport */ img, video { max-width: 100%; height: auto; display: block; } /* --- sticky stacking controls --- */ p { color: var(--text-dark); font-size: 1.075rem; font-weight: 300; line-height: 1.5; } p+p { margin-top: 1.25rem; } p strong { font-weight: 700; } h2 { color: var(--brand-dark); font-size: 3.25rem; } .outer-wrapper.header { position: fixed; top: 0; width: 100%; background: #0b1d3a00; padding: 4rem 10px; transition: padding 0.5s linear; z-index: 999; } .outer-wrapper.header.scrolled { background: #0b1d3af3; padding: 1.5rem 10px; transition: padding 0.5s linear; z-index: 99999; } .inner-wrapper { max-width: 1400px; margin: 0 auto; } .outer-wrapper.header .inner-wrapper { display: flex; align-items: flex-end; justify-content: space-between; } .header--menu { display: flex; } .header--menu>*+* { margin-left: 4rem; } ul.header--menu li a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-weight: 600; position: relative; } ul.header--menu li a::after { content: ""; position: absolute; bottom: -3px; left: 0; height: 2px; background: #f5b301; width: 0; transition: width 0.2s linear; } ul.header--menu li a:hover::after { width: 100%; } .outer-wrapper.banner { height: 100vh; background-color: var(--brand-dark); display: grid; position: relative; overflow: hidden; } .banner-bg { background: linear-gradient(180deg, #00000000 0%, #0000002e 50%, #000000 100%); width: 100%; height: 100vh; position: absolute; z-index: 99; } a.main-cta { background: var(--accent-color); color: #000; text-decoration: none; padding: 23px 10px; display: block; font-weight: 700; max-width: 300px; margin: 2rem 0 0; text-align: center; border-radius: 7px; outline: 3px solid rgba(0, 0, 0, 0); } a.banner--cta.main-cta { padding: 23px 10px; margin: 2rem auto 0px; } .banner--text-wrapper { position: absolute; top: 40%; left: 0; right: 0; margin: 0 auto; text-align: center; z-index: 999; } .banner--text-wrapper h1 { color: #fff; text-transform: uppercase; font-size: 5rem; font-weight: 700; max-width: 20ch; line-height: 120%; text-align: center; margin: 1rem auto; } .banner--text-wrapper p { color: #fff; font-size: 1.2rem; font-weight: 600; line-height: 150%; margin: 1rem auto; font-style: italic; } .scroll-wrapper { width: 100%; overflow: hidden; background-color: var(--contrast-1); padding: 20px 0; box-sizing: border-box; position: absolute; bottom: 0; z-index: 99; } .scroll-track { display: flex; width: max-content; animation: scroll-left 20s linear infinite; } .scroll-track>* { display: flex; } .scroll-item { margin: 0 50px; white-space: nowrap; font-size: 1.2em; } .scroll-item p { color: #ffffff; font-size: 1.25rem; font-weight: 500; font-style: italic; } @keyframes scroll-left { from { transform: translateX(0%); } to { transform: translateX(-50%); } } .platforms-we-work { padding: var(--large) 0; background: var(--bg-light); } .platform-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 2rem 10px; } .outer-wrapper.what-we-do { padding: 5rem 0; } .section-heading-wrapper h2::after { content: ""; height: 4px; width: 60%; background: var(--accent-color); display: block; } .section-content-wrapper { display: grid; align-items: center; justify-content: center; padding: 1rem 15px; grid-template-columns: 1fr 1fr; grid-gap: 4rem; } .section-heading-wrapper { display: flex; align-items: center; justify-content: space-between; padding: 1rem 15px; grid-gap: 8rem; } .section-content-wrapper img { border-radius: 2px; } video { width: 100%; max-width: 100%; } .section-sub-heading h3 { background: var(--accent-color); display: inline-block; padding: 2px 10px; font-weight: 500; font-size: 11px; border-radius: 50px; letter-spacing: 0.5px; } .section-sub-heading h4 { font-weight: 700; font-size: 14px; color: var(--text-dark); margin-top: 0.5rem; } .section-content-wrapper+.section-heading-wrapper { margin-top: 3rem; } .what-we-do--content { display: grid; grid-template-columns: 1fr 1fr; justify-content: center; grid-gap: 3rem; padding: 3rem 10px; } .what-we-do--item { display: grid; grid-gap: 2rem; align-items: center; background: var(--bg-light); border-radius: 5px; padding: 1rem 2rem; max-width: 560px; grid-template-columns: 65px 1fr; } .what-we-do--item--text h5 { font-size: 1.2rem; font-weight: 600; color: var(--brand-dark); } .outer-wrapper.how-it-works { padding: 5rem 10px; background-color: var(--brand-dark); } .how-it-works--item { border: 1px solid var(--border-light); border-radius: 2px; padding: 2rem; text-align: center; max-width: 370px; } .how-it-works--content { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); align-items: stretch; justify-content: space-between; grid-gap: 4rem; margin: 3rem 20px; } .outer-wrapper.how-it-works p, .outer-wrapper.how-it-works h2, .outer-wrapper.how-it-works h4, .outer-wrapper.how-it-works h5 { color: #fff; } .how-it-works--item h5 { font-size: 1.25rem; margin: 0.5rem auto 1.5rem; } .how-it-works--item p { margin: 2.5rem auto 1.5rem; max-width: 280px; } .how-it-works--item img { margin: 0 auto; } .how-it-works--cta-wrapper { text-align: center; margin-top: 6rem; } .how-it-works--cta-wrapper a.main-cta { margin: 2rem auto; } .outer-wrapper.how-it-works p, .outer-wrapper.footer h2, .outer-wrapper.footer h4, .outer-wrapper.footer h5 { color: #fff; } .outer-wrapper.who-we-are { padding: 5rem 20px; } .who-we-are--person { background: #f7f3eb; width: 100%; max-width: 360px; text-align: center; } .who-we-are--text h5 { font-size: 1.5rem; margin-bottom: 1rem; } .who-we-are--person p { font-weight: 500; padding: 1rem } .who-we-are--person img { width: 100%; display: flex; } .who-we-are--content { display: flex; margin: 3rem 10px; grid-gap: 2rem; text-align: center; } .cta-section-wrapper { background-image: url(../../assets/images/cta-bg-large.jpg); background-size: cover; text-align: center; padding: 5rem 20px; } .cta-section { display: flex; align-items: center; justify-content: center; } .cta-section-wrapper p { color: #fff; font-size: 1.25rem; font-style: italic; } .cta-section-wrapper a.main-cta { margin: 0 0 0 2rem; width: 100%; } .why-us { padding: 5rem 20px; background-color: #FBF9F5; } .why-us--list-wrapper { padding: 3rem 20px; } .why-us--list-item { display: grid; align-items: center; grid-template-columns: 100px 340px 1fr; padding: 2rem; background-color: #fff; position: sticky; top: 150px; box-shadow: 0 -5px 0 rgba(0, 0, 0, .02); } .why-us--list-item+.why-us--list-item { margin-top: 4rem; } .why-us--list-item h5 { font-size: 1.1rem; text-transform: uppercase; font-weight: 600; padding: 1rem 0 1rem 2rem; border-right: 1px solid; margin-right: 2rem; } .footer-contact-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); padding: 20px; margin-top: 3rem; } .footer { background: var(--brand-dark); background-image: url(../../assets/images/footer-bg.jpg); background-size: cover; padding: 5rem 10px 0; } .footer p, .footer a, .footer li, .footer label { color: #fff; } .footer-privacy-wrapper { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-top: 1px solid #F6FBFF; } .footer-nav ul { display: flex; gap: 20px; } .footer-contact-details h3 { font-size: 2rem; max-width: 22ch; font-weight: 400; margin-bottom: 2rem; } .contact-links { margin: 2rem 2rem 0 0; display: grid; grid-gap: 1rem; padding: 0rem; border-radius: 5px; } .contact-links h5 { font-size: 1.25rem; font-weight: 600; } .social-links { display: flex; gap: 1rem; } form#ambitiousAdsForm { border-radius: 10px; padding: 2rem; background: #0b1d3ac7; } form#ambitiousAdsForm>*+* { margin: 2rem 0 0 0; } .ls-form-row { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; grid-gap: 2rem; } .ls-form-input { display: -ms-grid; display: grid; } .ls-form-input>label, .ls-form-input legend { font-size: 1.0625rem; font-weight: 600; color: #fff; margin-bottom: 0.25rem; } fieldset { border: none; } input[type="text"], input[type="email"], input[type="tel"], select, textarea { font-size: 1rem; color: #fff; padding: 0.75rem 0.5rem; width: 100%; border: 1px solid #ffffff; border-radius: 8px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #ffffff00; } input[type="checkbox"] { height: 22px; width: 22px; border-radius: 4px; cursor: pointer; } span.checkbox-field-wrapper { display: flex; margin-top: 10px; } span.checkbox-field-wrapper>*+* { margin-left: 20px; } span.checkbox-field-item { display: flex; align-items: center; } span.checkbox-field-item label { font-weight: bold; display: inline-block; padding-left: 10px; cursor: pointer; } input:focus, select:focus, textarea:focus { border-color: var(--accent-color); } button.contact-cta { background: var(--accent-color); color: #000000; padding: 1rem 1.5rem; border-radius: 5px; font-weight: 700; transition: var(--ease-in-1); display: flex; align-items: center; gap: 3px; border: 2px solid var(--accent-color); cursor: pointer; width: 100%; text-align: center; justify-content: center; font-size: 1.25rem; } button.contact-cta:hover { background: transparent; color: #fff; transition: var(--ease-in-1); } .footer-disclaimer { text-align: center; margin-top: 3rem; padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid #fff; } .footer-disclaimer>img { margin-bottom: 1rem; } a.main-cta, a.banner--cta.main-cta { position: relative; will-change: transform, box-shadow, background; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* start flat */ } /* Hover */ a.main-cta:hover, a.banner--cta.main-cta:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 24px rgba(0, 0, 0, .05); } /* Active (click) */ a.main-cta:active, a.banner--cta.main-cta:active { transform: translateY(-1px) scale(0.995); box-shadow: 0 6px 16px rgba(0, 0, 0, .02); } /* Keyboard accessibility */ a.main-cta:focus-visible, a.banner--cta.main-cta:focus-visible { outline: 3px solid #fff; /* visible on dark */ outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-color), 0 10px 24px rgba(0, 0, 0, .05); } .footer-contact-details>p { margin-top: 1rem; font-style: italic; } .ls-form-row h5 { font-size: 1.5rem; } /* ============ HAMBURGER BASE ============ */ .hamburger { appearance: none; border: 0; background: transparent; padding: 12px; margin-left: auto; /* push to the right on mobile */ cursor: pointer; display: none; /* shown on mobile via media query */ z-index: 100001; /* above sliding panel */ } .hamburger-box { display: inline-block; width: 28px; height: 20px; position: relative; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { content: ""; position: absolute; left: 0; width: 28px; height: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease, top .2s ease; } .hamburger-inner { top: 9px; } .hamburger-inner::before { top: -8px; } .hamburger-inner::after { top: 8px; } /* X animation when active */ .hamburger.is-active .hamburger-inner { transform: rotate(45deg); } .hamburger.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); } .hamburger.is-active .hamburger-inner::after { top: 0; opacity: 0; } /* ============ NAV PANEL ============ */ .header--menu-wrapper { /* desktop default keeps your layout */ } @media (max-width: 960px) { /* show burger, hide desktop flex spacing */ .hamburger { display: inline-block; } /* make the panel slide in from right */ .header--menu-wrapper { position: fixed; inset: 0 0 0 auto; /* right side panel */ width: min(80vw, 320px); height: 100dvh; background: rgba(11, 29, 58, 0.98); transform: translateX(100%); transition: transform .25s ease; padding: 90px 20px 20px; /* room for fixed header */ box-shadow: -10px 0 30px rgba(0, 0, 0, .2); z-index: 100000; /* below button, above page */ overflow-y: auto; } /* when open */ .header--menu-wrapper.open { transform: translateX(0); } /* stack links vertically */ .header--menu { display: grid; gap: 16px; } .header--menu>*+* { margin-left: 0; } /* override desktop gap */ .header--menu a { display: block; padding: 12px 6px; font-size: 1.05rem; } /* keep logo + burger aligned */ .outer-wrapper.header .inner-wrapper { display: grid; grid-template-columns: 1fr auto; align-items: center; } /* prevent sideways and background scroll when menu open */ body.no-scroll { overflow: hidden; touch-action: none; } } .error-message { color: red; font-size: 0.9em; margin-top: 5px; } @media only screen and (max-width: 960px) { html, body { overflow-x: hidden; } p { color: var(--text-dark); font-size: 1rem; font-weight: 300; line-height: 1.6; } h2 { font-size: 2.25rem; } .section-sub-heading h4 { font-weight: 600; } .outer-wrapper.header { padding: 1rem 10px; } .outer-wrapper.header .header--logo img { width: 150px; margin-top: -23px; } /* Full-screen section that adapts to mobile browser UI changes */ .outer-wrapper.banner { position: relative; /* Use new viewport units with fallbacks for widest support */ height: 100svh; /* small viewport height (accounts for toolbars) */ height: 100dvh; /* dynamic viewport height (newer browsers) */ height: 100vh; /* fallback */ background-color: var(--brand-dark); overflow: hidden; } /* Make the