/* about.html page styles.
 *
 * Renamed from about-video-intro.css. Was the stylesheet for a full-screen
 * autoplay video intro. The intro was
 * cut 2026-08-26: eight seconds of stock b-roll that said nothing about the
 * company, gating the page behind 12.0 MB (33.3 MB on mobile).
 *
 * What is left is what about.html actually uses. .container is kept
 * deliberately — this file loads after Tailwind and overrides Tailwind's
 * .container at the three places about.html uses it, so removing it moves
 * the layout.
 *
 * The body font was 'Inter' — not self-hosted, never loaded — so this page
 * alone rendered its body text in the system sans-serif. Fixed 2026-08-26 to
 * the self-hosted Montserrat stack. The link in about.html carries ?v=2:
 * .htaccess caches CSS for a week, so without a fresh cache key returning
 * visitors would keep the old rules until the TTL lapsed.
 */

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

body {
    /* Was 'Inter', which is neither self-hosted nor loaded, so this page alone
       rendered its body text in the system sans-serif while every other page
       used Montserrat. Measured before the change: a test string set in
       'Inter', in Montserrat and in bare sans-serif all came back at exactly
       1233.9px, and document.fonts held no Montserrat face at all. */
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #0a0a0a;
    color: #ffffff;
    overflow-x: hidden;
}

/* Content wrapper — nothing gates it. */
.content-wrapper {
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* The cap above is for this page's CONTENT, and it stays. But the site header
   uses .container too, so the cap also squeezed the nav into 1136px of usable
   width. With the "UK Market Entry" item added, the nav needs more than that:
   "Our Products" and "UK Market Entry" each broke onto two lines at >=1280px,
   which is where the desktop nav appears. Every other page renders the nav in
   a 1280px container, so restore exactly that inside the header only.

   Verified: content .container elements stay 1200px wide before and after this
   rule. The documented content layout is untouched; only the header changes. */
nav.fixed-nav .container {
    max-width: 1280px;
    padding: 0 1rem;
}

/* ---------------------------------------------------------------------------
   Logo strip and work strip. Added 2026-08-26.

   Both are below the fold and every photograph is loading="lazy", so none of
   the work strip is in the initial page load. Each image carries explicit
   width and height so the layout is reserved before the bytes arrive and
   nothing shifts.
   --------------------------------------------------------------------------- */

.brand-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 28px 24px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.brand-strip img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 150px;
    margin: 0 auto;
    opacity: 0.9;
}

.brand-note {
    max-width: 720px;
    margin: 28px auto 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #6b7280;
    text-align: center;
}

/* Same small type as the logo-strip note, but sitting under a left-aligned
   biography list rather than a centred strip. Type treatment is inherited; only
   the alignment and the strip's centring margins change. */
.brand-note--inline {
    margin: 16px 0 0;
    max-width: none;
    text-align: left;
}

.work-group + .work-group {
    margin-top: 40px;
}

.work-group h4 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0a1930;
    margin-bottom: 14px;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
}

.work-grid figure {
    margin: 0;
}

.work-grid img {
    display: block;
    width: 100%;
    height: 175px;
    object-fit: cover;
    border-radius: 8px;
    background: #f3f4f6;
}

.work-grid figcaption {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: #6b7280;
}

/* ---------------------------------------------------------------------------
   Section E — motion and step typography. Added 2026-08-26.

   THE RULE HERE: nothing is hidden by default.

   Every pre-reveal state lives inside BOTH a
   @media (prefers-reduced-motion: no-preference) block AND a .motion-ready
   class that only JavaScript adds. So:
     - JS off      -> no .motion-ready -> no opacity:0 -> content visible
     - reduced motion -> media query never matches -> content visible
     - both        -> still visible
   The content is never dependent on a script or an animation to be readable.
   motion-guard.css stays linked last and is not relied on for this.
   --------------------------------------------------------------------------- */

/* Large step numerals, set in the self-hosted display face. No new fonts. */
.step-num {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.25rem;
    line-height: 1;
    font-weight: 700;
    color: #D4A843;
    margin-bottom: 12px;
}

/* The rail the numerals sit on. Present and fully drawn by default. */
.step-row {
    position: relative;
}

.step-row .step {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .step-row::before {
        content: '';
        position: absolute;
        top: 50px;
        left: 12%;
        right: 12%;
        height: 2px;
        background: linear-gradient(90deg, rgba(212,168,67,0.15), #D4A843, rgba(212,168,67,0.15));
        transform-origin: left center;
        z-index: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* INVERTED, 2026-08-26. The first version pre-hid every card in CSS and
       relied on an IntersectionObserver to bring it back. That makes the
       content's visibility depend on an observer firing — and if it does not,
       the section is blank with no way back. Verifying it turned out to be
       impossible in the available browser, which is reason enough not to ship
       a pattern that can fail that way.
       Now nothing is hidden by a stylesheet. JavaScript marks an element .pre
       only if it is BELOW the fold when the script runs, and removes .pre to
       reveal it — on intersection, or on a 2.5s failsafe, whichever is first.
       Every failure mode lands on visible:
         JS off / errored     -> .pre never added        -> visible
         reduced motion       -> this block never applies -> visible
         observer never fires -> failsafe removes .pre    -> visible
         element already on screen -> never marked        -> visible */
    .motion-ready .pre {
        opacity: 0;
        transform: translateY(12px);
    }

    .motion-ready .reveal,
    .motion-ready .step {
        transition: opacity 300ms ease-out, transform 300ms ease-out;
    }

    /* Stagger, 60ms apart. Positional, so nothing has to be set at runtime. */
    .motion-ready .js-reveal-group > :nth-child(2) { transition-delay:  60ms; }
    .motion-ready .js-reveal-group > :nth-child(3) { transition-delay: 120ms; }
    .motion-ready .js-reveal-group > :nth-child(4) { transition-delay: 180ms; }

    /* The rail draws left to right. Same rule: .pre is the only hidden state. */
    .motion-ready .step-row.pre-rail::before {
        transform: scaleX(0);
    }

    .motion-ready .step-row::before {
        transition: transform 600ms ease-out 120ms;
    }
}