/* Better Technology — consolidated page styles.
   Header HTML: <header class="dark-nav fixed-top"> before <main>.
   Hero artwork is a single CSS background; no separate laptop markup is needed. */

/* Theme and assets */

:root {
    --hero-background-image: url("assets/hero-original.jpg");
    --navy: #0b2236;
    --blue: #0076e8;
    --cyan: #00aeef;
    --ink: #193247;
--bs-body-font-family: "Inter", sans-serif;
--bs-body-font-family: "Manrope", sans-serif;
--bs-body-font-family: "IBM Plex Sans", sans-serif;
--bs-body-font-family: "Source Sans 3", sans-serif;
}

/* Shared custom elements — Bootstrap controls typography, grid, buttons and forms. */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
}

.text-link:hover {
    color: var(--blue);
}

.brand {
    width: 190px;
}

.eyebrow {
    letter-spacing: .14em;
    color: #0877b9;
}

.section {
    padding: 85px 0;
}

.text-link {
    color: #0677bd;
}

.transformation-photo {
    aspect-ratio: 1.5;
}

/* Fixed header */

.dark-nav {
    background-color: rgba(11, 34, 54, 0.88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #ffffff18;
}

    .dark-nav .brand {
        width: 180px;
    }

/* Hero background and headline */

.hero {
    padding: 160px 0 70px;
    min-height: 760px;
    background: linear-gradient(90deg,#0b2236e8 0%,#0b2236c9 34%,#0b223655 59%,#0b223615 100%),var(--hero-background-image) center center/cover no-repeat;
}

    .hero h1 span {
        color: #48c5f1;
    }

.hero-detail {
    color: #c4d3dd;
    font-size: .95rem;
    max-width: 425px;
}

.hero h1 {
    font-size: clamp(3rem,4.25vw,4rem);
    line-height: 1.04;
}

/* Trust strip */

.trust-strip {
    background: #f8fbfd;
}

.trust-point strong {
    color: #183449;
}

.trust-point span {
    color: #6d8291;
}

.trust-flag {
    width: 48px;
    height: 30px;
}

.trust-microsoft {
    width: 36px;
    height: 36px;
}

.trust-cyber {
    width: 100px;
    height: 48px;
}

/* Before / after and integrations */

.comparison {
    background: #f1f4f6;
}

    .comparison.after {
        background: #edf9ff;
        border-color: #b9e5fa;
    }

    .comparison ul {
        list-style: none;
    }

    .comparison li {
        border-bottom: 1px solid #17324b15;
        font-size: .84rem;
    }

.after li:before {
    color: #0785bc;
    margin-right: 8px;
    content: none;
}

.comparison li > i {
    color: #8195a4;
    width: 17px;
}

.comparison.after li > i {
    color: #0785bc;
}

.hand-arrow {
    top: -5px;
    left: calc(50% - 65px);
    width: 130px;
    height: 60px;
    color: #009ddd;
    transform: rotate(8deg);
    z-index: 1;
}

.bullet-logo {
    width: 19px;
    height: 19px;
}

.familiar-note {
    color: #067eb6;
    background: #e9f7fd;
    transform: rotate(-3deg);
}

.solution-integrations {
    border-top: 1px solid #bdd8e766;
}

.integration-caption {
    letter-spacing: .1em;
    color: #809aa9;
}

.integration-marks > img {
    width: 100px;
   
}

 

/* Team photograph */

.people {
    background: linear-gradient(115deg,#e9f3f7 0%,#f8fbfc 64%,#eef8fc);
}

    .people > .container {
        z-index: 1;
    }

.workshop-photo {
    min-height: 440px;
    height: 440px;
}

    .workshop-photo > img {
        object-position: 50% 35%;
    }

.workshop-shade {
    inset: 0;
    background: linear-gradient(0deg,#071e32ed 0%,#071e32c0 22%,#071e3220 65%,transparent 100%);
}

.workshop-photo figcaption {
    bottom: 42px;
    left: 32px;
    right: 20px;
}

.workshop-photo .eyebrow {
    color: #80daff;
}

.workshop-photo h3 {
    font-size: 2.15rem;
    line-height: 1.12;
    text-shadow: 0 1px 8px #0003;
}

.workshop-stock-label {
    bottom: 12px;
    left: 32px;
    color: #d0dce5;
}

/* Case studies */

.case-photo-wrap {
    height: 275px;
}

.stock-note {
    bottom: 7px;
    right: 7px;
    background: #0b2236aa;
}

#work {
    background: radial-gradient(ellipse at 80% 90%,#e1f1f9 0,transparent 50%),#fff;
}

/* Testimonials */

.review-stars {
    color: #f4b400;
}

.testimonials {
    border-block: 1px solid #e2ecf2;
    background: radial-gradient(ellipse at 10% 0,#d3eee9 0,transparent 55%),linear-gradient(135deg,#f0f8f8,#eff5fc);
}

    .testimonials h2 {
        font-size: clamp(1.9rem,2.7vw,2.7rem);
    }

.review-source {
    color: #708999;
}

.testimonial-card .review-stars {
    font-size: 21px;
    letter-spacing: 4px;
}

.testimonial-card blockquote {
    line-height: 1.7;
    color: #60798a;
    flex: 1;
}

.testimonial-card figcaption small {
    color: #8a9da9;
}

.review-avatar {
    place-items: center;
    width: 35px;
    height: 35px;
    background: #eaf4fc;
    font-size: 16px;
    color: #4285f4;
}

.placeholder-note {
    color: #8b9da8;
}

/* AI section */

.ai {
    background: radial-gradient(ellipse at 95% 60%,#154c66,transparent 60%),repeating-linear-gradient(135deg,transparent,transparent 60px,#ffffff03 61px,#ffffff03 62px),#0b2236;
}

    .ai p:not(.eyebrow) {
        color: #d1e1eb;
    }

/* Contact and founder credentials */

@font-face {
    font-family: Caveat;
    src: url("assets/caveat.ttf") format("truetype");
    font-weight: 500;
    font-display: swap
}

.contact {
    background: radial-gradient(ellipse at 42% 35%,#d9f1fa 0,transparent 48%),linear-gradient(110deg,#f4f9fb,#e9f4fb);
    padding: 70px 0 0;
}

.contact-portrait figcaption {
    border-radius: 0 0 8px 8px;
}

.contact #enquiry {
    max-width: 350px;
    border-color: #d8e8f2;
}

.contact .contact-portrait {
    max-width: 325px;
}

    .contact .contact-portrait figcaption.handwritten-note {
        box-shadow: none;
        color: #087fae;
        inset: auto;
        transform: rotate(-5deg);
        padding: 0 0 70px;
    }

    .contact .contact-portrait .handwritten-note > span {
        font-family: Caveat,"Segoe Print",cursive;
        font-size: 1.9rem;
        line-height: 1.05;
        color: #087fae;
    }

.form-privacy {
    color: #8094a2;
    line-height: 1.5;
}

    .form-privacy a {
        color: #1782b9;
    }

.preview-notice {
    color: #98aab6;
}

.contact .contact-row {
    min-height: 540px;
}

.contact .contact-copy {
    padding-bottom: 65px;
}

.contact .contact-form-column {
    padding-bottom: 65px;
}

.contact .contact-portrait > img {
    max-height: none;
    mix-blend-mode: multiply;
}

.contact .handwritten-note svg {
    width: 84px;
    height: 75px;
    top: auto;
    bottom: -2px;
    left: 8px;
    right: auto;
    transform: rotate(0deg);
}

.contact .contact-row h2 {
    font-size: 2.2rem;
    line-height: 1.12;
}

.contact .form-heading {
    font-size: 1.12rem;
    line-height: 1.3;
    letter-spacing: -.02em;
}

.lee-credentials {
    border-top: 1px solid #12638420;
}

.lee-name {
    color: #18394f;
}

    .lee-name span {
        color: #6a8495;
    }

.office-qualification img {
    width: 56px;
    height: 37px;
}

.office-qualification > span {
    max-width: 85px;
    line-height: 1.4;
    color: #526f80;
}

.membership-tags > span {
    color: #23546b;
    border-left: 1px solid #b4cfdd;
}

.membership-tags small {
    color: #7891a0;
}

/* Footer */

.site-footer {
    background: #0b2236;
    color: #bfd0dc;
    display: flow-root;
}

.footer-main {
    padding-block: 52px 38px;
}

.site-footer h2 {
    letter-spacing: 0;
}

.footer-tagline {
    line-height: 1.6;
    color: #b9cfde;
}

.footer-company {
    line-height: 1.8;
    color: #c7d7e2;
}

    .footer-company span {
        color: #8ea8ba;
    }

.site-footer a {
    font-size: .76rem;
    color: #b9cfde;
}

    .site-footer a:hover {
        color: white;
        text-decoration: underline;
    }

.site-footer address {
    color: #b9cfde;
    line-height: 1.8;
}

.footer-cert i {
    color: #4dc9f3;
    font-size: 19px;
}

.footer-registration {
    border-top: 1px solid #ffffff17;
    line-height: 1.7;
    color: #91aaba;
}

    .footer-registration p {
        font-size: inherit;
    }

    .footer-registration a {
        font-size: inherit;
    }

    .footer-registration strong {
        color: #c2d2de;
    }

    .footer-registration .footer-draft {
        color: #a6bed0;
    }

.footer-bottom {
    border-top: 1px solid #ffffff17;
    color: #7f9aac;
}

    .footer-bottom a {
        font-size: inherit;
    }

/* Responsive layout */

@media (min-width: 992px) {

    .contact #enquiry {
        position: relative;
    }
}

/* Responsive layout */

@media (min-width: 992px) and (max-width: 1199px) {

    .hero h1 {
        font-size: 3.15rem;
    }

    .contact .contact-portrait-column {
        padding-inline: 12px;
    }

    .contact .contact-portrait .handwritten-note > span {
        font-size: 1.65rem;
    }

    .contact .contact-row h2 {
        font-size: 2rem;
    }
}

/* Responsive layout */

@media (max-width: 991px) {

    .hero {
        padding-top: 145px;
        min-height: 0;
        padding-block: 140px 55px;
        padding-bottom: 36px;
        background-position: 65% center;
    }

    .hero-detail {
        max-width: 620px;
    }

    .hero h1 {
        max-width: 650px;
        font-size: 3.5rem;
    }

    .trust-point {
        justify-content: flex-start;
    }

        .trust-point span {
            font-size: .66rem;
        }

    .comparison-wrap {
        margin-top: 32px;
    }

    .workshop-photo {
        height: 410px;
        min-height: 0;
    }

    .contact {
        padding-top: 55px;
    }

    .contact-portrait-column {
        justify-content: center;
    }

    .contact-portrait {
        max-width: 260px;
        padding-top: 0;
    }

    .contact #enquiry {
        max-width: 540px;
        margin-inline: auto;
    }

    .contact .contact-portrait {
        max-width: 290px;
        margin-top: 25px !important;
    }

    .contact .contact-portrait-column {
        order: 2;
        min-height: 0;
    }

    .contact .contact-portrait figcaption.handwritten-note {
        padding-bottom: 60px;
    }

    .handwritten-note svg {
        top: -16px;
        right: 0;
        transform: rotate(35deg);
    }

    .contact .contact-row {
        min-height: 0;
    }

    .contact .contact-copy {
        padding-bottom: 0;
    }

    .contact .contact-form-column {
        order: 1;
        padding-bottom: 0;
    }

    .contact .contact-copy h2 br {
        display: none;
    }

    .contact .contact-copy h2 {
        max-width: 600px;
    }

    .contact .contact-copy p {
        max-width: 650px;
    }

    .lee-credentials {
        margin-top: 14px;
    }

    .footer-main {
        padding-top: 40px;
    }
}

/* Responsive layout */

@media (max-width: 767px) {

    .brand {
        width: 150px;
    }

    .section {
        padding: 55px 0;
    }

    .contact {
        padding: 55px 0 0;
    }
}

/* Responsive layout */

@media (max-width: 575px) {

    .dark-nav .brand {
        width: 160px;
    }

    .hero {
        padding-top: 125px;
        padding-bottom: 24px;
    }

    .hero-detail {
        font-size: .92rem;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .trust-point {
        padding-left: 10px;
    }

    .trust-microsoft {
        margin-inline: 6px;
    }

    .trust-cyber {
        width: 48px;
    }

    .comparison li {
        font-size: .9rem;
    }

    .hand-arrow {
        top: calc(50% - 36px);
        left: auto;
        right: 20px;
        transform: rotate(90deg);
        width: 95px;
    }

    .integration-marks {
        gap: 20px;
    }

        .integration-marks > img {
            width: 58px;
        }

         

    .workshop-photo {
        height: 360px;
    }

        .workshop-photo figcaption {
            left: 24px;
        }

        .workshop-photo h3 {
            font-size: 1.85rem;
        }

    .workshop-stock-label {
        left: 24px;
        font-size: .51rem;
    }

    .case-photo-wrap {
        height: 195px;
    }

    .testimonials {
        padding-block: 55px;
    }

    .testimonial-card {
        padding: 24px;
    }

    .contact .contact-portrait .handwritten-note > span {
        font-size: 1.8rem;
    }

    .contact .contact-copy h2 {
        font-size: 2rem;
    }

    .contact .form-heading {
        font-size: 1.05rem;
    }

    .credential-details {
        gap: 20px;
    }

    .footer-main {
        padding-bottom: 30px;
    }

    .footer-nav {
        gap: 12px;
    }

    .footer-registration {
        font-size: .62rem;
    }

    .site-footer .brand {
        width: 180px;
    }
}

/* Header links sit on the dark translucent background. */

.header-contact a {
    color: inherit;
}