/*
          =========================================
          Base / Reset
          =========================================
          - Keep CSS lightweight for performance
          - Use system fonts for speed (SEO/UX)
        */
        *, *::before, *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            /* Safari on iOS inflates text inside any block wider than the viewport,
               so a page carrying a wide diagram gets larger body copy than a page
               without one — which is why Barcrest and OneFile did not match Software
               Creations on a phone despite identical type rules. The diagrams still
               scroll sideways inside their own figure; only the automatic inflation
               is switched off, so every page now sizes text the same way. */
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            margin: 0;
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            line-height: 1.5;
            color: #111;
            background: #fff;
        }

        img {
            max-width: 100%;
            /* Paired with the width/height attributes on every <img>. Those reserve
               the right box before the bytes arrive, which stops the page jumping as
               it loads; without height:auto here they would also fix the height and
               squash anything the max-width has scaled down. */
            height: auto;
            display: block;
        }

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

        a:focus-visible {
            outline: 3px solid #111;
            outline-offset: 2px;
        }

        /*
          =========================================
          Layout helpers
          =========================================
        */
        .container {
            width: min(1100px, 100% - 2rem);
            margin-inline: auto;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /*
          =========================================
          Parallax background layers
          =========================================
          Implementation detail:
          - We use fixed, full-viewport layers
          - JS moves them slightly based on scroll
          - This makes images appear to move as you scroll
          NOTE: Some mobile browsers treat background-attachment: fixed differently.
          This JS approach is more consistent.
        */
        .parallax-layer {
            position: fixed;
            inset: 0;
            z-index: -3;
            background-size: cover;
            background-position: center;
            transform: translate3d(0, 0, 0);
            will-change: transform;
            filter: saturate(1.05);
        }

        .parallax-layer.layer-1 {
            z-index: -3;
            opacity: 0.75;
        }

        .parallax-layer.layer-2 {
            z-index: -2;
            opacity: 0.35;
            mix-blend-mode: multiply;
        }

        .parallax-layer.layer-3 {
            z-index: -1;
            opacity: 0.20;
            mix-blend-mode: overlay;
        }

        /* Dark overlay for legibility */
        .page-overlay {
            position: fixed;
            inset: 0;
            z-index: -1;
            background: linear-gradient(180deg, rgba(0, 0, 0, .50), rgba(0, 0, 0, .15) 45%, rgba(255, 255, 255, .85) 78%, rgba(255, 255, 255, .98));
            pointer-events: none;
        }

        /*
          =========================================
          Header / Hero image (full width)
          =========================================
          - Use an <img> with loading="eager" for LCP (Largest Contentful Paint)
          - Use alt text for accessibility + SEO
        */
        header.hero {
            padding-top: 1rem;
        }

        .hero-card {
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(6px);
        }

        .hero-media {
            position: relative;
            min-height: 260px;
        }

        .hero-media img {
            width: 100%;
            height: clamp(260px, 42vw, 420px);
            object-fit: cover;
            display: block;
        }

        /* Overlay image on hero header */
        .hero-media .hero-overlay-img {
            position: absolute;
            top: 1.2rem;
            left: 1.2rem;
            width: auto;
            height: 60%;
            object-fit: contain;
            background: #fff;
            border-radius: 16px;
            padding: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
            pointer-events: none;
            z-index: 2;
            opacity: 0.98;
            border: 1px solid #eee;
            transition: width 0.2s, height 0.2s, top 0.2s, left 0.2s;
        }

        /* Prevent overlay from covering hero-badge */
        .hero-media {
            display: flex;
            align-items: flex-start;
            position: relative;
        }

        .hero-media img:not(.hero-overlay-img) {
            flex: 1 1 0%;
            min-width: 0;
        }

        .hero-badge {
            position: absolute;
            right: 1rem;
            bottom: 1rem;
            left: unset;
            z-index: 3;
            /* Add top margin to ensure badge sits below logo */
            margin-top: 110px;
        }

        @media (max-width: 900px) {
            .hero-media .hero-overlay-img {
                max-width: 38%;
                padding: 10px 10px 10px 10px;
                min-width: 54px;
            }
        }

        @media (max-width: 560px) {
            .hero-media .hero-overlay-img {
                max-width: 44%;
                padding: 4px 4px 4px 4px;
                min-width: 36px;
            }
        }

        @media (max-width: 900px) {
            .hero-media .hero-overlay-img {
                width: 68px;
                height: 68px;
                top: 0.7rem;
                left: 0.7rem;
                padding: 7px;
            }
        }

        @media (max-width: 560px) {
            .hero-media .hero-overlay-img {
                width: 48px;
                height: 48px;
                top: 0.4rem;
                left: 0.4rem;
                padding: 4px;
            }
        }

        .hero-badge {
            position: absolute;
            inset: auto 1rem 1rem 1rem;
            color: #fff;
            background: rgba(0, 0, 0, .55);
            padding: .85rem 1rem;
            border-radius: 14px;
            max-width: 70ch;
            box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
        }

        .hero-badge h1 {
            margin: 0 0 .35rem;
            font-size: clamp(1.25rem, 2.2vw + .6rem, 2.4rem);
            line-height: 1.15;
        }

        .hero-badge p {
            margin: 0;
            opacity: .95;
        }

        /*
          =========================================
          Link bar: 10 links wide on desktop
          =========================================
          - On mobile, it becomes horizontally scrollable chips
          - Good for UX, avoids tiny links
        */
        nav.primary-links {
            background: rgba(255, 255, 255, .92);
            border-top: 1px solid rgba(0, 0, 0, .08);
            padding: .75rem;
        }

        .link-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
            gap: .5rem;
        }

        .link-grid a {
            display: grid;
            place-items: center;
            text-align: center;
            line-height: 1.25;
            padding: .55rem .4rem;
            border-radius: 12px;
            background: rgba(0, 0, 0, .04);
            font-size: .9rem;
            transition: transform .12s ease, background .12s ease;
        }

        /* The second line of a menu item: what the page is, for anybody who cannot tell from a
           one-word label. Small and quiet, so the label still reads as the link. */
        .link-grid a small {
            display: block;
            font-size: .72rem;
            font-weight: 400;
            opacity: .62;
            margin-top: .1rem;
        }


        .link-grid a:hover {
            background: rgba(0, 0, 0, .07);
            transform: translateY(-1px);
        }

        .link-grid a[aria-current="page"] {
            background: #111;
            color: #fff;
        }

        /*
          =========================================
          Main content cards
          =========================================
        */
        main {
            padding: 1.25rem 0 2.5rem;
        }

        .section {
            margin-top: 1.1rem;
            background: rgba(255, 255, 255, .92);
            border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
        }

        .section-inner {
            padding: 1.25rem;
        }

        .section h2 {
            margin: 0 0 .10rem;
            font-size: 1.35rem;
            line-height: 1.2;
        }

        .muted {
            color: rgba(0, 0, 0, .72);
        }

        /*
          =========================================
          Offers banner image section
          =========================================
        */
        .offers {
            display: grid;
            grid-template-columns: 1.3fr 1fr;
            gap: 1rem;
            align-items: stretch;
        }

        .offers-media {
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, .08);
        }

        .offers-media img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .offers-copy {
            border-radius: 14px;
            border: 1px solid rgba(0, 0, 0, .08);
            padding: 1rem;
            background: rgba(0, 0, 0, .03);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: .75rem;
        }

        .pill-row {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
        }

        .pill {
            font-size: .85rem;
            padding: .35rem .55rem;
            border-radius: 999px;
            background: rgba(0, 0, 0, .06);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            padding: .7rem 1rem;
            border-radius: 14px;
            background: #111;
            color: #fff;
            font-weight: 600;
            border: 1px solid rgba(0, 0, 0, .18);
            width: fit-content;
        }

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

        /*
          =========================================
          Featured posts (4 small posts with image links)
          =========================================
          - Use <article> for semantics (SEO)
          - Use descriptive alt text
        */
        .post-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }

        .post {
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, .08);
            background: #fff;
            transition: transform .12s ease, box-shadow .12s ease;
        }

        .post:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 30px rgba(0, 0, 0, .14);
        }

        .post a {
            display: grid;
            height: 100%;
        }

        .post img {
            height: 140px;
            width: 100%;
            object-fit: cover;
        }

        .post .post-body {
            padding: .85rem .85rem 1rem;
        }

        .post h3 {
            margin: 0 0 .25rem;
            font-size: 1rem;
            line-height: 1.2;
        }

        .post p {
            margin: 0;
            font-size: .92rem;
            color: rgba(0, 0, 0, .72);
        }

        /*
          =========================================
          Services text section
          =========================================
        */
        .service-columns {
            display: grid;
            grid-template-columns: 1.2fr;
            gap: 1rem;
            align-items: start;
        }

        /* A grid item defaults to min-width:auto, which is a refusal to shrink below
           its own content. The diagrams are deliberately wider than a phone, so that
           default made the whole column as wide as the widest diagram, and the
           section's overflow:hidden clipped the lot instead of letting the figure
           scroll. Letting the item shrink is what lets .diagram's own overflow-x do
           the job it was added for. Harmless on pages with nothing wide on them. */
        .service-columns > * {
            min-width: 0;
        }

        .service-list {
            border-radius: 14px;
            border: 1px solid rgba(0, 0, 0, .08);
            background: rgba(0, 0, 0, .03);
            padding: 1rem;
        }

        .service-list ul {
            margin: .5rem 0 0;
            padding-left: 1.15rem;
        }

        /*
          =========================================
          Footer block 1: 6 footer images + text
          =========================================
        */
        footer.site-footer {
            padding: 1.25rem 0 2rem;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: .75rem;
        }

        .footer-tile {
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, .08);
            background: rgba(255, 255, 255, .92);
            box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
        }

        .footer-tile img {
            height: 90px;
            width: 100%;
            object-fit: cover;
        }

        .footer-tile .tile-body {
            padding: .7rem .75rem .85rem;
        }

        .footer-tile strong {
            display: block;
            font-size: .92rem;
        }

        .footer-tile span {
            display: block;
            font-size: .85rem;
            color: rgba(0, 0, 0, .70);
        }

        .footer-links {
            margin-top: 1rem;
            background: rgba(255, 255, 255, .92);
            border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 18px;
            box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
            overflow: hidden;
        }

        .footer-links .section-inner {
            padding: 1rem 1.25rem 1.2rem;
        }

        .all-links {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: .65rem;
            margin-top: .75rem;
        }

        .all-links a {
            display: block;
            padding: .5rem .6rem;
            border-radius: 12px;
            background: rgba(0, 0, 0, .04);
            font-size: .92rem;
        }

        .all-links a:hover {
            background: rgba(0, 0, 0, .07);
        }

        /*
          =========================================
          Mobile responsiveness
          =========================================
          - Make tap targets bigger
          - Avoid 10-column tiny links; switch to scrollable row
        */
        @media (max-width: 900px) {
            .link-grid {
                grid-template-columns: repeat(5, 1fr);
            }

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

            .offers {
                grid-template-columns: 1fr;
            }

            .service-columns {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .all-links {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 560px) {
            /* Convert link bar to horizontal chips for small screens */
            .link-grid {
                display: flex;
                overflow-x: auto;
                gap: .5rem;
                padding-bottom: .25rem;
                scroll-snap-type: x mandatory;
            }

            .link-grid a {
                flex: 0 0 auto;
                min-width: 120px;
                scroll-snap-align: start;
                padding: .7rem .8rem;
                font-size: .95rem;
            }

            .post-grid {
                grid-template-columns: 1fr;
            }

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

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

        /* Reduce motion preference */
        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            .parallax-layer {
                will-change: auto;
            }

            .post, .link-grid a, .btn {
                transition: none;
            }
        }

        /* Company address banner overlay */
        .company-address-banner {
            position: absolute;
            top: 2.2rem;
            right: 2.2rem;
            background: #fff;
            color: #111;
            padding: 16px 28px;
            border-radius: 14px;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
            font-size: 1.08rem;
            line-height: 1.5;
            text-align: right;
            z-index: 10;
            min-width: 220px;
            max-width: 90vw;
        }

        .company-address-banner strong {
            font-weight: bold;
            color: #111;
            font-size: 1.15em;
        }

        @media (max-width: 700px) {
            .company-address-banner {
                font-size: 0.97rem;
                padding: 8px 10px;
                min-width: 120px;
                right: 0.7rem;
                top: 0.7rem;
            }
        }

        /* =====================================================
           Breadcrumb - sits under the primary links in the header
           ===================================================== */
        nav.breadcrumb {
            background: rgba(255, 255, 255, .92);
            border-top: 1px solid rgba(0, 0, 0, .08);
            padding: .55rem .9rem;
        }

        nav.breadcrumb ol {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .1rem .45rem;
            font-size: .88rem;
        }

        nav.breadcrumb li {
            display: flex;
            align-items: center;
            gap: .45rem;
            color: rgba(0, 0, 0, .62);
        }

        nav.breadcrumb li + li::before {
            content: "/";
            color: rgba(0, 0, 0, .3);
        }

        nav.breadcrumb a:hover {
            text-decoration: underline;
        }

        nav.breadcrumb [aria-current="page"] {
            color: #111;
            font-weight: 600;
        }


        /* =====================================================
           Game screenshots
           All normalised to 640x400, the C64's own 320x200 at
           twice the size, so every shot in the grid matches.
           ===================================================== */
        .shots-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin: 1.4rem 0 .4rem;
        }

        .shots-grid img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, .12);
            box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
        }

        .shots-grid figure {
            margin: 0;
        }

        .shots-grid figcaption {
            font-size: .85rem;
            color: rgba(0, 0, 0, .66);
            padding-top: .4rem;
        }

        @media (max-width: 640px) {
            .shots-grid {
                grid-template-columns: 1fr;
            }
        }


        /* =====================================================
           DIAGRAMS
           Drawn rather than photographed. There is no photograph of these
           machines I have the right to put here, and a schematic says the
           thing the prose is saying better than a picture of a cabinet
           would. Monochrome, like the rest of the page, and inline so it
           scales and prints rather than pixelating.
           ===================================================== */
        .diagram {
            margin: 1.4rem 0 .4rem;
        }

        .diagram svg {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, .12);
            background: #fff;
        }

        .diagram figcaption {
            font-size: .85rem;
            color: rgba(0, 0, 0, .66);
            padding-top: .5rem;
        }

        /* Scrolls sideways rather than shrinking, at every width rather than
           below a breakpoint. Measured before this was written: in a 760px
           window the diagram scaled to 0.68 and its smallest label rendered at
           6.8px, which is not readable by anybody. Holding the SVG at its own
           natural width keeps every label at 11px or over and puts a scrollbar
           on the figure instead — the page itself still never scrolls
           horizontally, and the <desc> says the whole thing in words for
           anybody who cannot see it either way. */
        .diagram {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .diagram svg {
            min-width: 660px;
        }

        .diagram-wide svg {
            min-width: 990px;
        }

        .person {
            border-left: 3px solid rgba(0, 0, 0, .12);
            padding: .1rem 0 .1rem 1.1rem;
            margin: 1.4rem 0;
        }

        .person h3 {
            margin: 0 0 .1rem;
            font-size: 1.08rem;
        }

        .person-role {
            display: block;
            font-size: .78rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: rgba(0, 0, 0, .55);
            margin-bottom: .5rem;
        }

        .person p {
            margin: 0 0 .6rem;
        }

        .section-rule {
            margin-top: 2.2rem;
            padding-top: 1.2rem;
            border-top: 1px solid rgba(0, 0, 0, .12);
            font-size: 1.25rem;
        }