/* =========================================
   BTECH DIGITAL
   ========================================= */

:root {
    --yellow: #f4bd20;
    --yellow-soft: #fff7dd;

    --black: #111318;
    --charcoal: #20242c;

    --text: #20242d;
    --muted: #68707d;

    --background: #f7f7f4;
    --white: #ffffff;
    --border: #e7e6e1;

    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 13px;

    --shadow:
        0 20px 55px rgba(23, 28, 38, 0.08);

    --container: 1180px;
}


/* RESET */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);
    background: var(--background);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}

html,
body {
    max-width: 100%;
}

/* Hides sideways overflow. On "html" only, so the sticky
   header still works on desktop. */
html {
    overflow-x: hidden;
}

section[id] {
    scroll-margin-top: 90px;
}

@media (max-width: 700px) {

    /* Phones: the header isn't sticky here, so the original
       stricter rule is safe and removes the sideways scroll */
    html,
    body {
        overflow-x: hidden;
    }

    section[id] {
        scroll-margin-top: 0;
    }

}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}


/* GLOBAL */

.container {
    width: min(var(--container), calc(100% - 48px));
    margin: 0 auto;
}

.section {
    padding: 110px 0;
}

.eyebrow {
    display: inline-flex;

    font-size: 12px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: 1.7px;

    color: #424955;

    margin-bottom: 22px;
}

.yellow-eyebrow {
    color: var(--yellow);
}

h1,
h2,
h3 {
    line-height: 1.08;
    letter-spacing: -0.035em;
}

h1 {
    font-size: clamp(50px, 6vw, 76px);
}

h2 {
    font-size: clamp(38px, 4.5vw, 58px);
}

h3 {
    font-size: 23px;
}

h1 span,
h2 span {
    color: #878b92;
}

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 24px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 750;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--yellow);
    color: #171717;

    box-shadow:
        0 10px 25px rgba(244, 189, 32, 0.25);
}

.btn-primary:hover {
    background: #f7c83e;
}

.btn-dark {
    background: var(--black);
    color: var(--white);
}

.btn-dark:hover {
    background: #2a2c31;
}

.btn-full {
    width: 100%;
}


/* NAVIGATION */

.site-header {
    position: sticky;
    top: 0;

    z-index: 50;

    background:
        rgba(247, 247, 244, 0.92);

    backdrop-filter: blur(18px);

    border-bottom:
        1px solid rgba(0, 0, 0, 0.055);
}

.nav-wrap {
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.brand {
    display: flex;
    align-items: center;

    gap: 11px;
}

.brand-mark {
    width: 34px;
    height: 34px;

    position: relative;

    display: block;
}

.brand-mark span {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--yellow);
}

.brand-mark span:nth-child(1) {
    left: 2px;
    top: 13px;
}

.brand-mark span:nth-child(2) {
    left: 13px;
    top: 6px;
}

.brand-mark span:nth-child(3) {
    left: 24px;
    top: 13px;
}

.brand-mark::before,
.brand-mark::after {
    content: "";

    position: absolute;

    height: 2px;
    width: 14px;

    background: var(--yellow);

    top: 16px;
}

.brand-mark::before {
    left: 7px;
    transform: rotate(-30deg);
}

.brand-mark::after {
    right: 7px;
    transform: rotate(30deg);
}

.brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.brand-text strong {
    font-size: 15px;
    letter-spacing: 0.5px;
}

.brand-text small {
    font-size: 10px;

    letter-spacing: 2.6px;

    margin-top: 4px;
}

.nav-links {
    display: flex;
    align-items: center;

    gap: 32px;
}

.nav-links a {
    font-size: 14px;
    font-weight: 600;

    color: #545a64;
}

.nav-links a:hover {
    color: var(--black);
}


/* =========================================
   HERO
   ========================================= */

.hero {
    position: relative;

    min-height: calc(100vh - 82px);

    display: flex;
    align-items: center;

    padding: 22px 0 28px;

    overflow: hidden;

    background: var(--background);
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image: url("/static/images/btech-hero.webp");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;

    z-index: 0;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(247, 247, 244, 1) 0%,
        rgba(247, 247, 244, 1) 30%,
        rgba(247, 247, 244, 0.96) 38%,
        rgba(247, 247, 244, 0.72) 44%,
        rgba(247, 247, 244, 0.25) 49%,
        rgba(247, 247, 244, 0) 55%
    );

    z-index: 1;
    pointer-events: none;
}


.hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(570px, 1fr);

    align-items: center;

    gap: 38px;
}


/* HERO LEFT */

.hero-copy {
    position: relative;
    z-index: 2;
}

/* Sentence-case kicker instead of a tracked all-caps label */
.hero-eyebrow {
    margin-bottom: 18px;

    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0;

    color: #4c535e;
}

.hero-copy h1 {
    max-width: 620px;

    font-size: clamp(46px, 3.8vw, 56px);
    line-height: 1.02;

    letter-spacing: -0.045em;
}

/* Yellow accent text, same yellow as the icons (#e6a600) */
.hero-copy h1 .hero-highlight {
    color: #e6a600;

    background-image: none;
    

    padding: 0 0.05em;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.hero-lead {
    max-width: 540px;

    margin-top: 24px;

    font-size: 17px;
    line-height: 1.55;
    font-weight: 500;

    color: #3f4650;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px 24px;

    margin-top: 29px;
}

.hero-actions .btn {
    min-height: 52px;

    padding-left: 22px;
    padding-right: 19px;
}

.btn-arrow {
    margin-left: 12px;

    font-size: 18px;
}

.text-link {
    white-space: nowrap;

    font-size: 13px;
    font-weight: 750;
}

.text-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-proof {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px 26px;

    margin-top: 22px;

    color: #3f4650;

    font-size: 13.5px;
    font-weight: 600;
}

.hero-proof-item {
    display: flex;
    align-items: center;

    gap: 8px;

    white-space: nowrap;
}

.proof-icon {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #e7a400;

    background: none;
    border: none;
    border-radius: 0;
}

.proof-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* HERO RIGHT PROCESS */

.hero-process {
    position: relative;

    padding-top: 45px;
}

/* Dark backdrop behind the step text.
   Same box and gradient as before; the mask fades all four
   edges so the hard-edged rectangle is gone.
   Raise 5% / 20% / 85% if the edges still look sharp. */
.hero-process::before {
    content: "";

    position: absolute;

    left: -30px;
    right: -30px;
    top: 105px;
    bottom: -35px;

    background: radial-gradient(
        ellipse at center bottom,
        rgba(17, 19, 24, 0.58) 0%,
        rgba(17, 19, 24, 0.38) 40%,
        rgba(17, 19, 24, 0.12) 70%,
        rgba(17, 19, 24, 0) 100%
    );

    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 20%, #000 85%, transparent 100%);
    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 20%, #000 85%, transparent 100%);
    mask-composite: intersect;

    pointer-events: none;
    z-index: 1;
}

.hero-process-row {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 28px
        1fr 28px
        1fr 28px
        1fr;

    align-items: start;
}

.hero-step {
    min-width: 0;

    text-align: center;
}

.hero-step-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid #f4bd20;
    box-shadow: 0 8px 22px rgba(17, 19, 24, 0.14);
    color: #dda500;
}

.hero-step-icon svg {
    width: 30px;
    height: 30px;
}

.hero-step-title {
    display: block;

    margin-bottom: 8px;

    font-size: 17px;
    font-weight: 750;
    line-height: 1.2;

    letter-spacing: -0.02em;

    color: #ffffff;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.75);
}

.hero-step-text {
    max-width: 150px;

    margin: 0 auto;

    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 500;

    color: rgba(255, 255, 255, 0.98);

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8);
}

.hero-step-arrow {
    position: relative;
    z-index: 2;

    padding-top: 28px;

    text-align: center;

    color: #f4bd20;

    font-size: 27px;
    font-weight: 700;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, 0.25);
}


/* =========================================
   HERO TABLET
   ========================================= */

@media (max-width: 1100px) {

    .hero {
        min-height: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .hero-copy {
        max-width: 720px;
    }

    .hero-process {
        max-width: 820px;

        padding-top: 45px;
    }

}


/* =========================================
   HERO MOBILE
   ========================================= */

@media (max-width: 820px) {

    .hero {
        padding: 34px 0 28px;
    }

    /* Stack the hero copy so the proof items can sit
       above the button on mobile (trust right before the click) */
    .hero-copy {
        display: flex;
        flex-direction: column;
    }

    .hero-eyebrow   { order: 1; }
    .hero-copy h1   { order: 2; }
    .hero-lead      { order: 3; }
    .hero-proof     { order: 4; }
    .hero-actions   { order: 5; }

    /* Proof items on mobile, one per line.
       The faint light backing blends into the page, but stops
       the photo from ever showing through behind the text.
       Negative side margins keep the icons aligned with the text above. */
    .hero-proof {
        flex-direction: column;
        align-items: flex-start;

        gap: 8px;

        margin: 16px -12px 0;

        padding: 10px 12px;

        border-radius: 12px;

        background: rgba(247, 247, 244, 0.85);

        font-size: 13.5px;
    }

    .hero-proof-item {
        white-space: normal;
    }

    .hero-grid,
    .hero-copy,
    .hero-process {
        max-width: 100%;
        min-width: 0;
    }

    .hero-eyebrow {
        max-width: 100%;
        white-space: normal;
        flex-wrap: wrap;

        font-size: 13px;
        line-height: 1.35;
        letter-spacing: 0;
    }

    .hero::before {
        background-image: url("/static/images/btech-hero-mobile.webp");
        background-size: cover;
        background-position: 58% center;
        background-repeat: no-repeat;
        opacity: 1;
    }

    /* Light wash at the top for the text.
       The old dark wash at the bottom is removed,
       because the steps now sit on a light panel. */
    .hero::after {
        content: "";
        position: absolute;
        inset: 0;

        background: linear-gradient(
            180deg,
            rgba(247, 247, 244, 0.96) 0%,
            rgba(247, 247, 244, 0.92) 28%,
            rgba(247, 247, 244, 0.82) 40%,
            rgba(247, 247, 244, 0.58) 47%,
            rgba(247, 247, 244, 0.18) 55%,
            rgba(247, 247, 244, 0) 62%
        );

        z-index: 1;
        pointer-events: none;
    }

    .hero-grid {
        gap: 22px;
    }

    .hero-copy h1 {
        max-width: 100%;

        font-size: clamp(36px, 9vw, 44px);
        line-height: 1.03;

        letter-spacing: -0.045em;
    }

    /* Let the first two lines flow; keep
       "then we build it." starting on its own line */
    .hero-copy h1 br:first-of-type {
        display: none;
    }

    .hero-copy h1 .hero-highlight {
        display: inline;
    }

    .hero-lead {
        font-size: 15px;
    }

    .hero-actions {
        align-items: stretch;

        flex-direction: column;

        gap: 14px;
        margin-top: 18px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    /* Case study link on its own light background,
       so the photo behind it can never hide it */
    .hero-actions .text-link {
        display: block;
        align-self: center;

        padding: 10px 14px;

        border-radius: 10px;

        background: rgba(247, 247, 244, 0.95);

        text-align: center;
        white-space: normal;
    }

    .hero-process::before {
        content: none;
    }

    .hero-process {
        padding-top: 0;
    }

    /* Light frosted panel behind the four steps */
    .hero-process-row {
        grid-template-columns: 1fr;

        gap: 0;

        padding: 20px 18px 4px;

        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 18px;

        background: rgba(255, 255, 255, 0.9);

        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);

        box-shadow: 0 12px 30px rgba(17, 19, 24, 0.12);
    }

    .hero-step {
        position: relative;

        display: grid;

        grid-template-columns: 56px 1fr;

        grid-template-rows: auto auto;

        column-gap: 16px;

        text-align: left;

        padding: 0 0 18px;
    }

    /* Thin yellow line joining the circles
       (replaces the rotated arrows) */
    .hero-step:not(:last-child)::after {
        content: "";

        position: absolute;

        left: 27px;
        top: 60px;
        bottom: 2px;

        width: 2px;

        border-radius: 2px;

        background: rgba(244, 189, 32, 0.85);
    }

    .hero-step-arrow {
        display: none;
    }

    .hero-step-icon {
        grid-row: 1 / 3;

        width: 56px;
        height: 56px;

        margin: 0;

        background: var(--yellow-soft);

        box-shadow: none;
    }

    .hero-step-icon svg {
        width: 24px;
        height: 24px;
    }

    .hero-step-title {
        margin: 6px 0 4px;

        font-size: 16px;
        font-weight: 800;
        line-height: 1.15;

        color: var(--text);

        text-shadow: none;
    }

    .hero-step-text {
        max-width: none;
        margin: 0;

        font-size: 14px;
        line-height: 1.4;
        font-weight: 500;

        color: #4f5661;

        text-shadow: none;
    }

}
/* TRUST */

.trust-strip {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background: #f1f1ed;
}

.trust-inner {
    min-height: 86px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.trust-inner > p {
    font-size: 13px;
    font-weight: 700;

    color: #515761;
}

.trust-items {
    display: flex;
    align-items: center;

    gap: 28px;
}

.trust-items span {
    font-size: 12px;

    font-weight: 700;

    color: #8a8e96;
}


/* SECTION HEADING */

.section-heading {
    margin-bottom: 58px;
}

.section-heading.narrow {
    max-width: 760px;
}

.section-heading p {
    margin-top: 22px;

    max-width: 700px;

    font-size: 17px;
    line-height: 1.75;

    color: var(--muted);
}

.split-heading {
    display: grid;
    grid-template-columns: 1fr 0.75fr;

    gap: 80px;
    align-items: end;
}

.split-heading p {
    margin: 0;
}


/* =========================================
   OUTCOMES + WHAT WE BUILD (merged section)
   ========================================= */

/* ".section.problem-section" is deliberately stronger than the
   global ".section" rule, so the global mobile spacing further
   down the file can't override this section's padding. */
.section.problem-section {
    background: var(--white);

    padding: 38px 0 40px;
}


/* HEADING */

.problem-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(560px, 0.9fr);

    align-items: center;

    gap: 28px;

    margin-bottom: 28px;
}

.problem-heading-main h2 {
    max-width: 720px;

    font-size: clamp(38px, 3.35vw, 48px);
    line-height: 1.04;

    letter-spacing: -0.045em;
}

/* Second line in the same yellow as the hero headline */
.problem-heading-main h2 span {
    color: #e6a600;

    background-image: none;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.problem-heading-main h2 span::before {
    content: "\A";
    white-space: pre;
}
.problem-heading-copy {
    max-width: 570px;

    font-size: 16px;
    line-height: 1.45;
    font-weight: 500;

    color: #444b55;
}


/* CARDS */

.problem-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}

.problem-card {
    min-width: 0;

    padding: 20px 24px 22px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: #fbfbf9;

    box-shadow:
        0 8px 24px rgba(17, 19, 24, 0.035);
}


/* CARD ICON */

.problem-card-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    border-radius: 50%;

    background: var(--yellow-soft);

    color: #e6a600;
}

.problem-card-icon svg {
    width: 26px;
    height: 26px;

    display: block;

    fill: none;
    stroke: currentColor;
}


/* CARD TEXT */

.problem-card h3 {
    margin-bottom: 7px;

    font-size: 18px;
    line-height: 1.18;
    font-weight: 800;

    letter-spacing: -0.025em;

    color: var(--text);
}

/* min-height = 3 lines, so the "What we build" lines
   start at the same height in all four cards */
.problem-card p {
    min-height: 4.5em;

    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;

    color: var(--muted);
}


/* "WHAT WE BUILD" LIST INSIDE EACH CARD */

.problem-card-services {
    width: 100%;

    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid var(--border);
}

.problem-card-label {
    display: block;

    margin-bottom: 6px;

    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;

    color: var(--muted);
}

.problem-card-services ul {
    list-style: none;

    margin: 0;
    padding: 0;
}

.problem-card-services li {
    position: relative;

    padding: 4px 0 4px 22px;

    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 600;

    color: var(--text);
}

/* Small yellow tick */
.problem-card-services li::before {
    content: "";

    position: absolute;

    left: 3px;
    top: 8px;

    width: 9px;
    height: 5px;

    border-left: 2px solid #e6a600;
    border-bottom: 2px solid #e6a600;

    transform: rotate(-45deg);
}


/* CLOSING LINE UNDER THE CARDS */

.problem-footnote {
    margin-top: 22px;

    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;

    color: #444b55;
}

.problem-footnote a {
    font-weight: 750;

    color: var(--text);

    text-decoration: underline;
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.problem-footnote a:hover {
    text-decoration-color: var(--text);
}


/* =========================================
   OUTCOMES — TABLET
   ========================================= */

@media (max-width: 1000px) {

    .section.problem-section {
        padding: 46px 0 52px;
    }

    .problem-heading {
        grid-template-columns: 1fr;

        gap: 16px;

        margin-bottom: 28px;
    }

    .problem-heading-copy {
        max-width: 650px;
    }

    .problem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .problem-card p {
        min-height: 0;
    }

}


/* =========================================
   OUTCOMES — MOBILE
   Compact cards: icon on the left, title and
   description on the right, list underneath.
   ========================================= */

@media (max-width: 700px) {

    .section.problem-section {
        padding: 36px 0 30px;
    }

    .problem-heading {
        margin-bottom: 22px;
    }

    .problem-heading-main h2 {
        font-size: clamp(32px, 9vw, 40px);
    }

    .problem-heading-copy {
        font-size: 15px;
    }

    .problem-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .problem-card {
        display: grid;

        grid-template-columns: 40px minmax(0, 1fr);

        column-gap: 14px;

        align-items: start;

        padding: 16px 16px 14px;
    }

    .problem-card-icon {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 40px;
        height: 40px;

        margin: 0;
    }

    .problem-card-icon svg {
        width: 22px;
        height: 22px;
    }

    .problem-card h3 {
        grid-column: 2;

        margin: 2px 0 4px;

        font-size: 16.5px;
    }

    .problem-card p {
        grid-column: 2;

        min-height: 0;

        font-size: 13.5px;
    }

    .problem-card-services {
        grid-column: 1 / -1;

        margin-top: 12px;
        padding-top: 10px;
    }

    .problem-card-label {
        margin-bottom: 4px;
    }

    .problem-card-services li {
        padding-top: 3px;
        padding-bottom: 3px;

        font-size: 13px;
    }

    .problem-card-services li::before {
        top: 7px;
    }

    .problem-footnote {
        margin-top: 18px;

        font-size: 14px;
    }

}
/* =========================================
   SERVICES
   ========================================= */

.services-section {
    background: var(--background);

    /* tighter than global section spacing */
    padding: 46px 0 54px;
}


/* Heading */

.services-section .section-heading {
    margin-bottom: 28px;
}

.services-section .split-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(380px, 0.85fr);

    gap: 55px;

    align-items: end;
}

.services-section .eyebrow {
    margin-bottom: 14px;
}

.services-section .section-heading h2 {
    max-width: 700px;

    font-size: clamp(38px, 3.5vw, 50px);
    line-height: 1.04;

    letter-spacing: -0.045em;
}

.services-section .section-heading h2 span {
    color: var(--yellow);
}

.services-section .split-heading > p {
    max-width: 500px;

    margin: 0 0 5px;

    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;

    color: #4f5661;
}


/* Six cards */

.services-grid {
    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 14px;
}


/* Individual service card */

.service-card {
    min-width: 0;
    min-height: 205px;

    padding: 20px 18px 22px;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: var(--white);

    box-shadow:
        0 8px 24px rgba(17, 19, 24, 0.035);
}


/* Service icon */

.service-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    margin-bottom: 16px;

    border-radius: 50%;

    background: transparent;

    color: #f2a900;
}

.service-icon svg {
    width: 31px;
    height: 31px;

    display: block;

    fill: none;
    stroke: currentColor;
}


/* Card text */

.service-card h3 {
    margin-bottom: 10px;

    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;

    letter-spacing: -0.025em;

    color: var(--text);
}

.service-card p {
    margin: 0;

    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;

    color: var(--muted);
}


/* Old large-card styling no longer used */

.service-large {
    background: var(--white);
    color: var(--text);
}

.service-tags {
    display: none;
}


/* =========================================
   SERVICES — TABLET
   ========================================= */

@media (max-width: 1100px) {

    .services-section .split-heading {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .services-section .split-heading > p {
        max-width: 680px;
    }

    .services-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 16px;
    }

}


/* =========================================
   SERVICES — SMALL TABLET
   ========================================= */

@media (max-width: 760px) {

    .services-section {
        padding: 42px 0 48px;
    }

    .services-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================
   SERVICES — MOBILE
   ========================================= */

@media (max-width: 520px) {

    .services-section {
        padding: 38px 0 42px;
    }

    .services-section .section-heading {
        margin-bottom: 24px;
    }

    .services-section .section-heading h2 {
        font-size: 34px;
        line-height: 1.05;
    }

    .services-section .split-heading > p {
        font-size: 14px;
        line-height: 1.55;
    }


    /* ONE SERVICE PER ROW */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }


    /* COMPACT HORIZONTAL MOBILE CARD */
    .service-card {
        min-height: 0;

        display: grid;

        grid-template-columns: 46px minmax(0, 1fr);
        grid-template-rows: auto auto;

        column-gap: 14px;
        row-gap: 4px;

        align-items: start;

        padding: 16px 17px;

        border-radius: 11px;
    }


    /* ICON LEFT */
    .service-icon {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 38px;
        height: 38px;

        margin: 1px 0 0;

        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .service-icon svg {
        width: 28px;
        height: 28px;
    }


    /* TITLE RIGHT */
    .service-card h3 {
        grid-column: 2;
        grid-row: 1;

        margin: 0;

        font-size: 15px;
        line-height: 1.2;
        font-weight: 800;
    }


    /* DESCRIPTION RIGHT */
    .service-card p {
        grid-column: 2;
        grid-row: 2;

        margin: 0;

        font-size: 12.5px;
        line-height: 1.45;
    }

}

/* =========================================
   CASE STUDY
   ========================================= */

/* ".section.case-section" is stronger than the global ".section"
   rule, so the global mobile spacing can't add the big gap back */
.section.case-section {
    background: var(--white);

    padding: 42px 0;
}

@media (max-width: 1000px) {

    .section.case-section {
        padding: 34px 0;
    }

}

@media (max-width: 700px) {

    .section.case-section {
        padding: 24px 0;
    }

}


/* MAIN CASE STUDY SHELL */

.case-shell {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(430px, 1.1fr);

    gap: 70px;

    padding: 60px;

    border: 1px solid var(--border);
    border-radius: 28px;

    background: #f1f1ed;

    color: var(--text);

    box-shadow:
        0 16px 45px rgba(17, 19, 24, 0.05);
}


/* =========================================
   CASE LEFT
   ========================================= */

.case-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Sentence-case label, same style as the hero */
.case-kicker {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    gap: 8px;

    margin-bottom: 18px;
    padding: 7px 14px;

    border-radius: 999px;

    background: #20242c;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;

    color: #ffffff;
}

.case-kicker::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--yellow);
}

.case-copy h2 {
    max-width: 560px;

    color: var(--text);
}

/* Dark: the yellow accent stays on the hero and outcomes headlines */
.case-copy h2 span {
    color: #e6a600;
}

.case-intro {
    margin-top: 27px;

    max-width: 520px;

    font-size: 16px;
    line-height: 1.75;

    color: #515864;
}


/* CASE LINK: same style as "Book a Diagnostic" */

.case-link {
    display: inline-block;

    width: fit-content;

    margin-top: 30px;

    color: var(--text);

    font-size: 14px;
    font-weight: 800;

    text-decoration: underline;
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;

    transition:
        transform 0.2s ease,
        text-decoration-color 0.2s ease;
}

.case-link:hover {
    text-decoration-color: var(--text);

    transform: translateX(3px);
}


/* =========================================
   CASE RIGHT — DIGITAL SYSTEM
   (same look, larger text: labels were 8-10px)
   ========================================= */

.case-system {
    padding: 28px;

    border:
        1px solid #383d45;

    border-radius: 22px;

    background: #20242c;

    color: var(--white);

    box-shadow:
        0 14px 35px rgba(17, 19, 24, 0.12);
}

.case-system-title {
    margin-bottom: 22px;

    font-size: 13px;
    font-weight: 700;

    color: #ffffff;
}


/* SYSTEM ROW */

.case-row {
    display: grid;

    grid-template-columns:
        1fr 35px 1fr;

    align-items: center;
}


/* SYSTEM NODE */

.case-node {
    padding: 20px;

    border:
        1px solid rgba(255, 255, 255, 0.035);

    border-radius: 13px;

    background: #2a2f37;
}

.case-node small {
    display: block;

    margin-bottom: 10px;

    color: var(--yellow);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.case-node strong {
    display: block;

    margin-bottom: 4px;

    font-size: 15px;

    color: var(--white);
}

.case-node span {
    font-size: 12.5px;

    color: #b9bec6;
}


/* ARROWS */

.case-arrow {
    text-align: center;

    color: #848b95;
}

.case-down {
    height: 32px;

    line-height: 32px;

    text-align: center;

    color: #848b95;
}


/* CONNECTED DATA RESULT */

.case-result {
    padding: 17px;

    text-align: center;

    border-radius: 12px;

    background: var(--yellow);

    color: var(--black);

    font-size: 13px;
    font-weight: 750;
}

.case-result span {
    display: block;

    margin-bottom: 4px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


/* CASE STUDY — MOBILE TEXT SIZES */

@media (max-width: 700px) {

    .case-kicker {
        margin-bottom: 14px;

        font-size: 13px;
    }

    .case-intro {
        margin-top: 20px;

        font-size: 15px;
        line-height: 1.65;
    }

    .case-link {
        margin-top: 22px;

        font-size: 13.5px;
    }

    .case-system {
        padding: 22px 18px;
    }

}


/* =========================================
   CASE METRICS
   ========================================= */

.case-metrics {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin-top: 20px;
}


.case-metrics div {
    padding: 25px;

    border:
        1px solid var(--border);

    border-radius: 15px;

    background: var(--white);
}


.case-metrics strong {
    display: block;

    margin-bottom: 7px;

    font-size: 18px;

    color: var(--text);
}


.case-metrics span {
    font-size: 11px;

    color: var(--muted);
}

/* PROCESS */

.process-section {
    background: var(--background);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.process-step {
    position: relative;

    padding-right: 30px;
}

.process-number {
    width: 42px;
    height: 42px;

    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 30px;

    border-radius: 50%;

    background: var(--yellow);

    font-size: 11px;
    font-weight: 800;
}

.process-line {
    position: absolute;

    top: 20px;
    left: 42px;
    right: 0;

    height: 1px;

    background: #d8d8d3;
}

.process-step h3 {
    margin-bottom: 14px;

    font-size: 20px;
}

.process-step p {
    color: var(--muted);

    font-size: 13px;
    line-height: 1.7;
}


/* DIAGNOSTIC */

.diagnostic-section {
    padding-top: 50px;

    background: var(--background);
}

.diagnostic-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(390px, 0.9fr);

    gap: 70px;

    padding: 70px;

    border-radius: 30px;

    background: var(--black);

    color: white;
}

.diagnostic-copy h2 {
    max-width: 640px;
}

.diagnostic-copy p {
    margin-top: 24px;

    max-width: 590px;

    font-size: 16px;
    line-height: 1.8;

    color: #aeb2ba;
}

.diagnostic-note {
    margin-top: 30px;

    padding: 17px 19px;

    max-width: 540px;

    border-left: 3px solid var(--yellow);

    background: #181b20;

    color: #c6c9cf;

    font-size: 12px;
    line-height: 1.65;
}

.diagnostic-box {
    padding: 32px;

    border-radius: 20px;

    background: white;

    color: var(--text);
}

.diagnostic-box h3 {
    margin-bottom: 25px;
}

.diagnostic-box ul {
    list-style: none;

    margin-bottom: 28px;
}

.diagnostic-box li {
    position: relative;

    padding: 10px 0 10px 24px;

    border-bottom: 1px solid #ededE8;

    font-size: 13px;
    color: #626872;
}

.diagnostic-box li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: var(--yellow);

    font-weight: 900;
}

.diagnostic-box small {
    display: block;

    margin-top: 15px;

    text-align: center;

    color: #8c929b;

    font-size: 10px;
    line-height: 1.55;
}


/* FINAL CTA */

.final-cta {
    padding: 100px 0;

    background: var(--white);
}

.final-cta-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;
}

.final-cta h2 {
    max-width: 830px;
}


/* FOOTER */

.site-footer {
    padding: 52px 0;

    border-top: 1px solid var(--border);

    background: #f1f1ed;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 40px;
}

.footer-brand p {
    max-width: 390px;

    margin-top: 18px;

    font-size: 12px;

    color: var(--muted);
}

.footer-right {
    font-size: 11px;

    color: #888e97;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1000px) {

    .nav-links {
        display: none;
    }

    .trust-inner {
        padding: 25px 0;

        flex-direction: column;
        align-items: flex-start;
    }

    .trust-items {
        flex-wrap: wrap;
    }

    .split-heading {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .case-shell {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .case-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 50px 20px;
    }

    .diagnostic-card {
        grid-template-columns: 1fr;

        gap: 45px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

    .case-section {
        padding-top: 24px;
        padding-bottom: 56px;
    }

    .container {
        width: min(100% - 32px, var(--container));
    }

    .section {
        padding: 78px 0;
    }

    .site-header {
        position: relative;
    }

    .nav-wrap {
        height: 72px;
    }

    .nav-cta {
        display: none;
    }

    .trust-items {
        gap: 16px 20px;
    }

    .problem-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

    .problem-card {
        min-height: auto;
    }

    .card-number {
        margin-bottom: 36px;
    }

    .case-shell {
        padding: 36px 24px;

        border-radius: 23px;
    }

    .case-row {
        grid-template-columns: 1fr;
    }

    .case-arrow {
        padding: 8px;

        transform: rotate(90deg);
    }

    .case-metrics {
        grid-template-columns: 1fr;
    }

    .process-grid {
        grid-template-columns: 1fr;

        gap: 48px;
    }

    .process-line {
        display: none;
    }

    .diagnostic-card {
        padding: 36px 23px;

        border-radius: 23px;
    }

    .diagnostic-box {
        padding: 25px 20px;
    }

    .final-cta {
        padding: 75px 0;
    }

    .final-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .final-cta-inner .btn {
        width: 100%;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================
   FINAL MOBILE SERVICES OVERRIDE
   ========================================= */

@media (max-width: 520px) {

    .services-section {
        padding: 32px 0 38px;
    }

    .services-section .section-heading {
        margin-bottom: 22px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .service-card {
        min-height: 0;

        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        grid-template-rows: auto auto;

        column-gap: 12px;
        row-gap: 3px;

        padding: 14px 15px;

        align-items: start;
    }

    .service-icon {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 30px;
        height: 30px;

        margin: 1px 0 0;
    }

    .service-icon svg {
        width: 25px;
        height: 25px;
    }

    .service-card h3 {
        grid-column: 2;
        grid-row: 1;

        margin: 0;

        font-size: 14px;
        line-height: 1.2;
    }

    .service-card p {
        grid-column: 2;
        grid-row: 2;

        margin: 0;

        font-size: 12px;
        line-height: 1.4;
    }

}

/* =========================================
   MOBILE SECTION SPACING FIX
   ========================================= */

@media (max-width: 520px) {

    .problem-section {
        padding-bottom: 22px;
    }

    .services-section {
        padding-top: 22px;
    }

}

/* =========================================
   CASE STUDY — VISUAL PROOF + RESULTS
   ========================================= */

.case-proof {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(380px, 0.92fr);

    gap: 32px;

    align-items: stretch;

    margin-top: 28px;
}


/* PROOF IMAGE */

.case-proof-image {
    display: block;

    width: 100%;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 22px;

    background: var(--white);

    box-shadow:
        0 14px 38px rgba(17, 19, 24, 0.06);
}

.case-proof-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* RESULTS SIDE */

.case-proof-content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding: 34px 32px;

    border: 1px solid var(--border);
    border-radius: 22px;

    background: #f7f7f4;
}

.case-proof-content h3 {
    max-width: 420px;

    margin: 0 0 12px;

    font-size: 30px;
    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -0.035em;

    color: var(--text);
}
.case-proof-content h3 span {
    color: #e6a600;
}

.case-proof-content h3 span::before {
    content: "\A";
    white-space: pre;
}


/* REAL WEBSITE LINK */

.case-proof-site {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    width: fit-content;

    margin-bottom: 22px;

    font-size: 13px;
    line-height: 1;

    font-weight: 700;

    color: var(--muted);
}

.case-proof-site:hover {
    color: var(--text);
}


/* BEFORE / NOW CARDS */

.case-proof-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 10px;
}

.case-proof-card {
    display: grid;

    grid-template-columns:
        92px minmax(0, 1fr);

    align-items: start;

    gap: 16px;

    padding: 16px 18px;

    border: 1px solid var(--border);
    border-radius: 13px;

    background: var(--white);

    box-shadow:
        0 7px 20px rgba(17, 19, 24, 0.025);
}

.case-proof-card strong {
    display: block;

    padding-top: 2px;

    font-size: 15px;
    line-height: 1.3;

    font-weight: 800;

    letter-spacing: -0.01em;

    color: var(--text);
}

.case-change {
    display: flex;
    align-items: baseline;

    gap: 8px;

    margin: 0;

    font-size: 13.5px;
    line-height: 1.45;
}

.case-change + .case-change {
    margin-top: 6px;
}

/* "Before" / "Now" tags */
.case-change span {
    flex: 0 0 auto;

    min-width: 54px;

    padding: 2px 8px;

    border-radius: 999px;

    text-align: center;

    font-size: 11px;
    line-height: 1.5;
    font-weight: 800;
}

.case-before {
    color: var(--muted);
}

.case-before span {
    background: #eeeee9;

    color: #5b616b;
}

.case-after {
    font-weight: 600;

    color: var(--text);
}

.case-after span {
    background: var(--yellow);

    color: var(--text);
}


/* =========================================
   CASE PROOF — TABLET
   ========================================= */

@media (max-width: 1000px) {

    .case-proof {
        grid-template-columns: 1fr;

        gap: 20px;
    }

     .case-proof-image img {
        height: auto;
        max-height: 560px;

        object-fit: cover;
        object-position: center;
    }

}


/* =========================================
   CASE PROOF — MOBILE
   ========================================= */

@media (max-width: 700px) {

    .case-proof {
        gap: 14px;

        margin-top: 18px;
    }

    .case-proof-image {
        border-radius: 16px;
    }

    .case-proof-image img {
        width: 100%;
        height: auto;
    }

    .case-proof-content {
        padding: 22px 18px;

        border-radius: 16px;
    }

    .case-proof-content h3 {
        margin-bottom: 9px;

        font-size: 23px;
        line-height: 1.08;
    }

    .case-proof-site {
        margin-bottom: 16px;
    }

    .case-proof-grid {
        gap: 8px;
    }

    /* Label on top, before/now underneath */
    .case-proof-card {
        grid-template-columns: 1fr;

        gap: 8px;

        padding: 14px;
    }

    .case-change {
        font-size: 13px;
    }

}

/* =========================================
   HOW WE WORK + DIAGNOSTIC CTA
   Paste this in place of the old block: everything from the
   "PROCESS + FINAL DIAGNOSTIC CTA / FINAL OVERRIDES" comment
   down to, but not including, the "NAVBAR REAL LOGO" comment.
   (The old .case-section spacing lines in that block are dropped:
   the case study block now sets its own spacing.)
   ========================================= */


/* -----------------------------------------
   SECTION LABEL PILLS (reusable)
   Same look as the case study label.
   ----------------------------------------- */

.section-pill {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 18px;
    padding: 7px 14px;

    border-radius: 999px;

    background: #20242c;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;

    color: #ffffff;
}

.section-pill::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--yellow);
}

/* Version for dark backgrounds (diagnostic section) */
.section-pill-on-dark {
    border: 1px solid rgba(255, 255, 255, 0.14);

    background: rgba(255, 255, 255, 0.08);
}


/* -----------------------------------------
   HOW WE WORK
   ----------------------------------------- */

/* Stronger than the global ".section" rule on purpose */
.section.process-section {
    padding: 55px 0 65px;

    background: var(--background);
}

.process-section .section-heading {
    margin-bottom: 62px;
}

/* Same yellow as the other headlines on light backgrounds */
.process-section .section-heading h2 span {
    color: #e6a600;
}

/* Slightly larger text (was 11px and 13px) */
.process-number {
    font-size: 13px;
}

.process-step p {
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================
   COMPACT DIAGNOSTIC CTA
   ========================================= */

.diagnostic-cta {
    padding: 0 0 58px;

    background: var(--background);
}


.diagnostic-cta-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(390px, 0.88fr);

    align-items: center;

    gap: 65px;

    padding: 48px 56px;

    border-radius: 26px;

    background: #20242c;

    color: var(--white);

    box-shadow:
        0 16px 40px rgba(17, 19, 24, 0.08);
}


/* CTA LEFT */

.diagnostic-cta-copy {
    min-width: 0;
}


.diagnostic-cta-copy h2 {
    max-width: 650px;

    margin: 0;

    font-size: clamp(34px, 3.5vw, 52px);
    line-height: 1.04;

    font-weight: 800;

    letter-spacing: -0.045em;

    color: var(--white);
}


/* Bright yellow reads well on the dark background */
.diagnostic-cta-copy h2 span {
    color: var(--yellow);
}


.diagnostic-cta-copy p {
    max-width: 650px;

    margin: 20px 0 0;

    font-size: 15px;
    line-height: 1.65;

    color: #c5c9d0;
}


/* CTA RIGHT */

.diagnostic-cta-action {
    min-width: 0;

    padding: 28px;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 18px;

    background: #292e36;
}


/* Main button */

.diagnostic-cta-button {
    width: 100%;

    justify-content: space-between;

    min-height: 56px;

    padding-left: 22px;
    padding-right: 20px;

    font-size: 14px;
}


/* Three short proof points (was 12.5px) */

.diagnostic-cta-points {
    display: grid;

    gap: 0;

    margin-top: 17px;
}


.diagnostic-cta-points span {
    display: block;

    padding: 11px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    font-size: 14px;
    line-height: 1.4;

    font-weight: 600;

    color: #e0e3e7;
}


.diagnostic-cta-points span:last-child {
    border-bottom: 0;
}


/* Fee note (was 10.5px) */

.diagnostic-cta-action small {
    display: block;

    margin-top: 15px;

    font-size: 12.5px;
    line-height: 1.5;

    color: #a9afb8;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1000px) {

    .section.process-section {
        padding: 48px 0 55px;
    }


    .process-section .section-heading {
        margin-bottom: 50px;
    }


    .diagnostic-cta {
        padding-bottom: 48px;
    }


    .diagnostic-cta-inner {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 42px;
    }


    .diagnostic-cta-copy h2 {
        max-width: 720px;
    }


    .diagnostic-cta-copy p {
        max-width: 720px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

    .section-pill {
        margin-bottom: 14px;

        font-size: 13px;
    }


    .section.process-section {
        padding: 36px 0 42px;
    }


    .process-section .section-heading {
        margin-bottom: 38px;
    }


    .process-grid {
        gap: 32px;
    }


    .diagnostic-cta {
        padding: 0 0 32px;
    }


    .diagnostic-cta-inner {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 30px 22px;

        border-radius: 20px;
    }


    .diagnostic-cta-copy h2 {
        font-size: 31px;
        line-height: 1.05;
    }


    .diagnostic-cta-copy p {
        margin-top: 16px;

        font-size: 14px;
        line-height: 1.55;
    }


    .diagnostic-cta-action {
        padding: 18px;

        border-radius: 15px;
    }


    .diagnostic-cta-button {
        min-height: 52px;

        padding: 14px 16px;

        font-size: 13px;
    }


    .diagnostic-cta-points {
        margin-top: 13px;
    }


    .diagnostic-cta-points span {
        padding: 9px 0;

        font-size: 13px;
    }


    .diagnostic-cta-action small {
        margin-top: 12px;

        font-size: 12px;
    }

}



/* =========================================
   NAVBAR REAL LOGO
   ========================================= */

.brand {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.brand-logo {
    display: block;

    width: 132px;
    height: auto;

    object-fit: contain;
}


/* NAV LINKS */

.nav-links {
    display: flex;
    align-items: center;

    gap: 34px;
}

.nav-links a {
    font-size: 14px;
    font-weight: 700;

    color: #171a1f;

    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--yellow);
}


/* MOBILE */

@media (max-width: 700px) {

    .brand-logo {
        width: 108px;
    }

}

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 25px;

    border-radius: 11px;

    background: #171a1f;
    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.nav-cta:hover {
    background: #242830;
    color: #ffffff;
    transform: translateY(-1px);
}

/* =========================================
   FINAL MOBILE NAVIGATION
   ========================================= */

.mobile-menu-toggle,
.mobile-nav {
    display: none;
}


@media (max-width: 700px) {

    /* HEADER */

    .site-header {
        position: relative;
        z-index: 1000;
    }


    .nav-wrap {
        height: 64px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 15px;
    }


    /* LOGO */

    .brand-logo {
        width: 105px;
        height: auto;
    }


    /* FORCE DESKTOP ITEMS OFF */

    .nav-links {
        display: none !important;
    }


    .nav-cta {
        display: none !important;
    }


    /* HAMBURGER */

    .mobile-menu-toggle {
        display: flex;

        width: 42px;
        height: 42px;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 5px;

        padding: 0;

        border: 1px solid var(--border);
        border-radius: 10px;

        background: var(--white);

        cursor: pointer;
    }


    .mobile-menu-toggle span {
        display: block;

        width: 19px;
        height: 2px;

        border-radius: 5px;

        background: #171a1f;
    }


    /* DROPDOWN */

    .mobile-nav {
        display: none;

        position: absolute;

        top: 64px;
        left: 0;
        right: 0;

        padding: 12px 16px 18px;

        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);

        background: #ffffff;

        box-shadow:
            0 14px 30px rgba(17, 19, 24, 0.08);
    }


    .mobile-nav.is-open {
        display: grid;

        gap: 3px;
    }


    .mobile-nav a {
        display: block;

        padding: 12px 10px;

        font-size: 14px;
        font-weight: 700;

        color: #171a1f;

        border-radius: 8px;
    }


    .mobile-nav a:hover {
        background: #f5f5f2;

        color: var(--yellow);
    }


    /* MOBILE CTA */

    .mobile-nav .mobile-nav-cta {
        margin-top: 7px;

        padding: 14px 16px;

        text-align: center;

        border-radius: 9px;

        background: #171a1f;
        color: #ffffff;
    }


    .mobile-nav .mobile-nav-cta:hover {
        background: var(--yellow);
        color: #171a1f;
    }

}

/* =========================================
   FINAL FOOTER
   Paste this in place of the old block: everything from the
   "FINAL FOOTER" comment down to the end of style.css.
   ========================================= */

.site-footer {
    padding: 38px 0;

    border-top: 1px solid var(--border);

    background: #f7f7f4;
}


.footer-inner {
    display: grid;

    grid-template-columns:
        minmax(250px, 1fr)
        auto
        minmax(180px, 1fr);

    align-items: center;

    gap: 45px;
}


/* BRAND */

.footer-brand {
    min-width: 0;
}


.footer-logo-link {
    display: inline-flex;
}


.footer-logo {
    display: block;

    width: 125px;
    height: auto;
}


.footer-brand p {
    max-width: 360px;

    margin: 13px 0 0;

    font-size: 13px;
    line-height: 1.55;

    color: var(--muted);
}


/* NAV */

.footer-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 26px;
}


.footer-nav a {
    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    color: #444a53;

    transition: color 0.2s ease;
}


.footer-nav a:hover {
    color: var(--text);

    text-decoration: underline;
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


/* RIGHT: SOCIAL ICONS, COPYRIGHT, LEGAL LINKS */

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 10px;

    text-align: right;
}


.footer-social {
    display: flex;

    gap: 10px;
}


.footer-social a {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--white);

    color: #20242c;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.footer-social a:hover {
    border-color: var(--yellow);

    background: var(--yellow);
}


.footer-social svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}


/* Copyright (was 11px light grey, hard to read) */
.footer-right p {
    margin: 0;

    font-size: 12px;

    color: var(--muted);
}


.footer-legal {
    display: flex;

    gap: 16px;
}


.footer-legal a {
    font-size: 12px;
    font-weight: 600;

    color: #444a53;
}


.footer-legal a:hover {
    color: var(--text);

    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================================
   FOOTER — TABLET
   ========================================= */

@media (max-width: 900px) {

    .footer-inner {
        grid-template-columns: 1fr auto;
    }


    .footer-nav {
        grid-column: 1 / -1;
        grid-row: 2;

        justify-content: flex-start;
    }

}


/* =========================================
   FOOTER — MOBILE (centred)
   ========================================= */

@media (max-width: 700px) {

    .site-footer {
        padding: 30px 0;
    }


    .footer-inner {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 22px;

        text-align: center;
    }


    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .footer-logo {
        width: 110px;
    }


    .footer-brand p {
        max-width: 290px;

        margin: 10px auto 0;

        font-size: 12.5px;
    }


    .footer-nav {
        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 12px 20px;
    }


    .footer-nav a {
        font-size: 12.5px;
    }


    .footer-right {
        width: 100%;

        align-items: center;

        padding-top: 18px;

        border-top: 1px solid var(--border);

        text-align: center;
    }


    .footer-social,
    .footer-legal {
        justify-content: center;
    }

}

/* =========================================
   MOBILE FIXES: How We Work timeline + compact diagram
   ========================================= */

@media (max-width: 700px) {

    /* HOW WE WORK: vertical timeline */

    .process-grid {
        gap: 0;
    }

    .process-step {
        position: relative;

        display: grid;

        grid-template-columns: 42px minmax(0, 1fr);

        column-gap: 16px;

        padding: 0 0 24px;
    }

    .process-number {
        grid-row: 1 / 3;

        margin: 0;
    }

    .process-step h3 {
        grid-column: 2;

        margin: 9px 0 6px;
    }

    .process-step p {
        grid-column: 2;
    }

    .process-step:not(:last-child)::after {
        content: "";

        position: absolute;

        left: 20px;
        top: 48px;
        bottom: 6px;

        width: 2px;

        border-radius: 2px;

        background: rgba(244, 189, 32, 0.85);
    }


    /* CASE STUDY: wider content, shorter diagram */

    .case-shell {
        padding: 28px 16px;
    }

    .case-system {
        padding: 18px 14px;
    }

    .case-system-title {
        margin-bottom: 14px;
    }

    .case-node {
        padding: 12px 14px;
    }

    .case-node small {
        margin-bottom: 4px;
    }

    .case-arrow {
        padding: 2px 0;
    }

    .case-down {
        height: 22px;

        line-height: 22px;
    }

}

/* HOW WE WORK: fully centred on desktop */

@media (min-width: 1001px) {

    .process-section .section-heading {
        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }

    .process-section .section-heading p {
        margin-left: auto;
        margin-right: auto;
    }

    .process-step {
        padding: 0 14px;

        text-align: center;
    }

    .process-number {
        margin: 0 auto 30px;
    }

    /* Line runs from the edge of this circle to the edge of the next */
    .process-line {
        left: calc(50% + 21px);
        right: calc(-50% + 21px);
    }

}

/* =========================================
   HERO (phones): no steps, text on top,
   buttons at the bottom over the photo
   ========================================= */

@media (max-width: 820px) {

    /* Steps are shown in How We Work instead */
    .hero-process {
        display: none;
    }

    /* Hero fills the first screen */
    .hero {
        min-height: calc(100vh - 64px);
        min-height: calc(100svh - 64px);

        align-items: stretch;
    }

    /* Text column fills the full hero height */
    .hero-grid {
        align-items: stretch;
    }

    .hero-copy {
        align-self: stretch;
    }

    /* Buttons pushed to the bottom, over the photo */
    .hero-actions {
        margin-top: auto;
        padding-top: 28px;
    }

    /* Slide the photo down so his head sits in the open space.
       Change 130px to move it: bigger = lower. */
    .hero::before {
        transform: translateY(130px);
    }

    /* Solid background behind all the text,
       then a short fade into the photo */
    .hero::after {
        background: linear-gradient(
            180deg,
            rgba(247, 247, 244, 0.97) 0px,
            rgba(247, 247, 244, 0.95) 390px,
            rgba(247, 247, 244, 0.5) 440px,
            rgba(247, 247, 244, 0) 490px
        );
    }

}

/* Actual WhatsApp footer button */

.footer-social .footer-whatsapp {
    background: #25D366;
    border-color: #25D366;
    color: #ffffff;
}

.footer-social .footer-whatsapp svg {
    width: 19px;
    height: 19px;
    fill: #ffffff;
}

.footer-social .footer-whatsapp:hover {
    background: #20bd5a;
    border-color: #20bd5a;
    color: #ffffff;
}