/* ============================================================
   OCTO LABS — Design system
   Palette from the logo: #0754EE blue · #141552 navy · #080733 dark
   Type: Montserrat (UI/headlines) + Alex Brush (script accent)
   ============================================================ */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('./montserrat.woff2') format('woff2');
}
@font-face {
    font-family: 'Alex Brush';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./alex-brush.woff2') format('woff2');
}

:root {
    --blue:       #0754EE;
    --blue-mid:   #0645c7;
    --navy:       #141552;
    --dark:       #080733;
    --white:      #FCFDFD;
    --off-white:  #F4F6FB;
    --muted:      #545a8a;
    --sky:        #ADD3F8;
    --border:     rgba(20, 21, 82, 0.10);
    --border-mid: rgba(20, 21, 82, 0.18);

    --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-script: 'Alex Brush', cursive;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    --nav-h: 72px;
    --container: 1200px;
    --gutter: clamp(1.25rem, 4vw, 2rem);
    --section-gap: clamp(4.5rem, 9vw, 7.5rem);
}

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    color: var(--dark);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Read by screen readers, not shown */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Focus (visible for keyboard users) ---- */
:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}
.on-dark :focus-visible, .footer :focus-visible { outline-color: var(--sky); }

.skip-link {
    position: absolute;
    left: 1rem; top: -4rem;
    z-index: 2000;
    background: var(--dark);
    color: var(--white);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.section-pad { padding-block: var(--section-gap); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.85rem 1.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    border: 2px solid var(--blue);
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s var(--ease), box-shadow 0.25s;
}
.btn svg { transition: transform 0.25s var(--ease); flex: none; }
.btn:hover svg { transform: translateX(4px); }

.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover {
    background: var(--blue-mid);
    border-color: var(--blue-mid);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(7, 84, 238, 0.28);
}

.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }

.on-dark .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.55); }
.on-dark .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

/* Press feedback — the only feedback touch devices get, since :hover never fires */
.btn:not([disabled]):active { transform: scale(0.96); transition-duration: 0.1s; }
.btn[disabled] { opacity: 0.7; cursor: progress; transform: none; box-shadow: none; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--blue);
    padding-block: 0.4rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s, gap 0.25s var(--ease), opacity 0.1s;
}
.link-arrow:hover { border-bottom-color: currentColor; gap: 0.8rem; }
.link-arrow:active { opacity: 0.6; }
.on-dark .link-arrow { color: var(--sky); }

/* ============================================================
   NAVBAR — always light, so the logo and links never fight the page
   ============================================================ */
.navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: var(--nav-h);
    z-index: 1000;
    background: rgba(252, 253, 253, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.navbar.scrolled { border-bottom-color: var(--border-mid); }

.nav-inner {
    max-width: var(--container);
    height: 100%;
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.nav-logo { display: flex; align-items: center; flex: none; padding-block: 0.5rem; }
.nav-logo img { height: 34px; width: auto; }
.nav-logo { transition: opacity 0.3s, visibility 0.3s; }
/* home page: the splash already shows the big logo, so the small one waits until it's gone */
.navbar.over-splash .nav-logo { opacity: 0; visibility: hidden; }

.nav-links { display: flex; align-items: center; gap: 2.25rem; }

.nav-link {
    position: relative;
    display: inline-block;
    padding-block: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    transition: color 0.2s;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0.2rem;
    width: 0; height: 2px;
    background: var(--blue);
    transition: width 0.3s var(--ease);
}
.nav-link:hover { color: var(--blue); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { width: 100%; }
.nav-link[aria-current="page"] { color: var(--blue); }
.nav-link:active { color: var(--blue); opacity: 0.7; }

.nav-cta { min-height: 44px; padding: 0.6rem 1.4rem; font-size: 0.78rem; letter-spacing: 0.08em; }
/* on the contact page the button is "you are here": outlined instead of filled */
.nav-cta[aria-current="page"] { background: transparent; color: var(--blue); box-shadow: none; }
.nav-cta[aria-current="page"]:hover { background: var(--blue); color: var(--white); }

.hamburger {
    display: none;
    width: 48px; height: 48px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    margin-right: -10px;
    transition: transform 0.1s;
}
.hamburger:active { transform: scale(0.88); }
.hamburger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--dark);
    transition: transform 0.3s var(--ease), opacity 0.2s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 1.1rem;
}
.eyebrow::before {
    content: '';
    width: 32px; height: 1px;
    background: currentColor;
    flex: none;
}
.on-dark .eyebrow { color: var(--sky); }

.h1, .h2 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--dark);
    text-wrap: balance;
}
.h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); }
.h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1.1rem; }

.h1 em, .h2 em {
    font-style: normal;
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 1.12em;
    letter-spacing: normal;
    color: var(--blue);
    line-height: 1;
}
.on-dark .h1, .on-dark .h2 { color: var(--white); }
.on-dark .h1 em, .on-dark .h2 em { color: var(--sky); }

.lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.75; color: var(--muted); max-width: 60ch; }
.body-text { font-size: 1.02rem; line-height: 1.8; color: var(--muted); max-width: 62ch; }
.body-text + .body-text { margin-top: 1.1rem; }
.body-text strong { color: var(--navy); }
.on-dark .lead, .on-dark .body-text { color: rgba(255,255,255,0.74); }

.section-header { max-width: 720px; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }

.bg-off { background: var(--off-white); }

/* ============================================================
   LOGO INTRO — full-bleed splash, homepage only.
   Desktop/tablet: the brand photo, full-bleed. Phone: a dedicated
   centred lockup on a gradient — cropping the wide photo into a
   phone-width sliver just mangles it, so this is art-directed
   separately rather than scaled down.
   ============================================================ */
.logo-intro {
    position: relative;
    height: 100vh;
    height: 100svh; /* phone browser bars never cut the splash off */
    overflow: hidden;
    background: var(--off-white);
}
.logo-intro picture { display: contents; }
.logo-intro-mark {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 15% 46%; /* keep the globe clear of the left edge */
    display: block;
}

.logo-intro-brand { display: none; }

.intro-cue {
    position: absolute;
    left: 50%; bottom: 1.25rem;
    transform: translateX(-50%);
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(20, 21, 82, 0.75);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: color 0.2s;
    animation: intro-cue-bounce 2s infinite;
}
.intro-cue:hover { color: var(--navy); animation-play-state: paused; } /* holds still under the pointer */
.intro-cue-line { width: 1px; height: 36px; background: linear-gradient(to bottom, rgba(20, 21, 82, 0.5), transparent); }
@keyframes intro-cue-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
    .intro-cue { animation: none; }
}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero:focus { outline: none; } /* focus lands here after the Scroll link, so keyboard users carry on from here */
.hero {
    position: relative;
    padding-top: var(--nav-h); /* content height: the heading follows the splash straight away */
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #ECF0FA 0%, var(--white) 100%);
    overflow: hidden;
}

.hero-visual {
    position: absolute;
    top: var(--nav-h); right: 0; bottom: 0;
    width: 52%;
    z-index: 0;
}
.hero-visual picture { display: contents; }
.hero-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 30% center;
    /* melt the left edge into the page so there is no hard photo box */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}

.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: clamp(3rem, 8vw, 6rem);
}
.hero-copy { max-width: 620px; }
.hero-copy .h1 { margin-bottom: 1.5rem; }
.hero-copy .lead { margin-bottom: 2.25rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }


/* Three brand pillars: APPAREL · AI · AUTOMATION */
.pillars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin-bottom: 2.25rem;
}
.pillars li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--navy);
}
.pillars li:not(:first-child) { position: relative; padding-left: 1.75rem; }
.pillars li:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 22px;
    background: var(--border-mid);
}
.pillars svg { color: var(--blue); flex: none; }

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.page-hero {
    padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem));
    padding-bottom: clamp(3rem, 7vw, 5rem);
    background: linear-gradient(180deg, #ECF0FA 0%, var(--white) 100%);
    border-bottom: 1px solid var(--border);
}
.page-hero .h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1.25rem; max-width: 18ch; }
.page-hero .h1-wide { font-size: clamp(2.2rem, 4vw, 3.1rem); max-width: none; } /* two full sentences, one line each on wide screens */
.page-hero .lead { max-width: 64ch; }

/* Small numbered badge, reused by the numbered card lists (About/Product) */

/* ============================================================
   GENERIC CONTENT BLOCKS
   ============================================================ */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}
.split.top { align-items: start; }

.col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border-mid);
    background: var(--white);
}
.col-3 > * { padding: clamp(1.75rem, 3vw, 2.5rem); border-right: 1px solid var(--border-mid); transition: background 0.2s; }
.col-3 > *:last-child { border-right: 0; }
.col-3 > *:hover, .col-3 > *:active { background: var(--off-white); }
.col-3 h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.col-3 p { font-size: 0.92rem; line-height: 1.7; color: var(--muted); }

.on-dark .col-3 { background: transparent; border-color: rgba(255,255,255,0.12); }
.on-dark .col-3 > * { border-color: rgba(255,255,255,0.12); }
.on-dark .col-3 > *:hover, .on-dark .col-3 > *:active { background: rgba(255,255,255,0.04); }
.on-dark .col-3 p { color: rgba(255,255,255,0.7); }
.on-dark .col-3 h3 { color: var(--white); }

/* Long-form text (privacy notice) */
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--dark); margin: 2.5rem 0 0.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.02rem; line-height: 1.8; color: var(--muted); }
.prose p + p { margin-top: 1rem; }
.prose a, .form-fineprint a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* Definition-style list (fault categories, challenges) */
.spec-list { border-top: 1px solid var(--border-mid); }
.spec-list li {
    display: grid;
    grid-template-columns: minmax(0, 14rem) 1fr;
    gap: 0.5rem 2rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-mid);
}
.spec-list strong { font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.spec-list span { font-size: 0.95rem; line-height: 1.7; color: var(--muted); }

/* Capability grid: "What We Do" (home teaser + product full version) */
.capability-grid {
    display: grid;
    grid-template-columns: 1fr;
    border: solid var(--border-mid);
    border-width: 1px 0 0 1px;
    background: var(--white);
}
.capability-grid > * {
    padding: clamp(1.75rem, 3vw, 2.25rem);
    border-right: 1px solid var(--border-mid);
    border-bottom: 1px solid var(--border-mid);
    transition: background 0.2s;
}
/* five capabilities: one row of five on wide screens; two columns with the
   last one spanning both in between, so no tile is ever left on its own */
@media (min-width: 600px) {
    .capability-grid { grid-template-columns: repeat(2, 1fr); }
    .capability-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    .capability-grid { grid-template-columns: repeat(5, 1fr); }
    .capability-grid > *:last-child:nth-child(odd) { grid-column: auto; }
}
.capability-grid > *:hover, .capability-grid > *:active { background: var(--off-white); }
.capability-grid svg { color: var(--blue); margin-bottom: 1rem; }
.capability-grid h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.capability-grid p { font-size: 0.9rem; line-height: 1.7; color: var(--muted); }

/* Advantage statement: big "10 → 1" numerals inside a .band */
.band.advantage .container > div { text-align: center; }
.stat-huge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--white);
    margin-bottom: 1.25rem;
}
.stat-huge > [aria-hidden] { display: inline-flex; align-items: center; gap: inherit; }
.stat-arrow { color: var(--sky); font-size: 0.5em; }

/* Five numbered steps in the capability grid (product page) */
ol.capability-grid { list-style: none; }
.process-num { display: block; margin-bottom: 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; color: var(--blue); }

/* Three-step diagram (product page; commented out in product.html for now) */
.flow { list-style: none; display: grid; gap: 3.5rem; }
.flow li { position: relative; }
.flow svg { display: block; width: 100%; max-width: 240px; height: auto; margin-bottom: 1.25rem; color: var(--navy); }
.flow-accent { stroke: var(--blue); }
.flow rect.flow-accent { fill: var(--white); }
.flow h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.flow p { font-size: 0.9rem; line-height: 1.7; color: var(--muted); max-width: 34ch; }
.flow li:not(:last-child)::after {
    content: '↓';
    content: '↓' / '';
    position: absolute;
    left: 0; bottom: -2.75rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--blue);
}
@media (min-width: 720px) {
    .flow { grid-template-columns: repeat(3, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
    .flow li:not(:last-child)::after {
        content: '→';
        content: '→' / '';
        left: auto; bottom: auto;
        right: calc(clamp(2.5rem, 5vw, 4.5rem) / -2 - 0.75rem);
        top: 3.25rem;
    }
}

/* Image CTA band */
.band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(4rem, 9vw, 6.5rem);
    background: var(--dark);
}
.band-img {
    position: absolute; inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
.band::after {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(8,7,51,0.94) 0%, rgba(8,7,51,0.78) 55%, rgba(8,7,51,0.45) 100%);
}
.band .h2 { max-width: 20ch; }
.band .lead { margin-bottom: 2rem; max-width: 52ch; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}
.contact-list { margin-top: 2rem; display: grid; gap: 1.25rem; }
.contact-item { display: flex; align-items: flex-start; gap: 0.9rem; font-size: 0.98rem; font-weight: 500; }
.contact-item svg { color: var(--blue); margin-top: 0.15rem; flex: none; }
.contact-item a { border-bottom: 1px solid var(--border-mid); transition: border-color 0.2s, color 0.2s; }
.contact-item a:hover { color: var(--blue); border-color: var(--blue); }

.contact-form {
    background: var(--white);
    border: 1px solid var(--border-mid);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    display: grid;
    gap: 1.4rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-group { display: grid; gap: 0.45rem; align-content: start; }
.form-group label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }

.form-group input,
.form-group textarea {
    width: 100%;
    font-size: 1rem; /* 16px+ prevents iOS zoom on focus */
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-mid);
    border-radius: 0;
    background: var(--off-white);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    resize: vertical;
}
.form-group textarea { min-height: 9rem; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #646a92; } /* --muted shade, 4.8:1 on the input */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(7,84,238,0.15);
}
.form-group [aria-invalid="true"] { border-color: #c0322b; background: #fff8f7; }
.field-error { font-size: 0.8rem; font-weight: 500; color: #b1271f; min-height: 0; }
.field-error:empty { display: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
    font-size: 0.92rem;
    line-height: 1.6;
    padding: 1rem 1.25rem;
    border: 1px solid;
}
.form-status[hidden] { display: none; }
.form-status.ok  { color: #0b5b3a; border-color: #8fd3b1; background: #effaf4; }
.form-status.err { color: #8a1f19; border-color: #f0b3ae; background: #fff4f3; }
.form-status a { text-decoration: underline; font-weight: 600; }
.form-fineprint { font-size: 0.78rem; color: var(--muted); line-height: 1.6; }

.spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--dark); color: var(--white); padding-block: 4.5rem 2rem; border-top: 1px solid rgba(255,255,255,0.12); }
.footer-top {
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: 3.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 2rem;
}
.footer-logo { height: 38px; width: auto; margin-bottom: 1.25rem; }
.footer-brand p { font-size: 0.9rem; line-height: 1.7; color: rgba(255,255,255,0.65); max-width: 34ch; }

.footer-reach { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.footer-reach a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.8);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s var(--ease);
}
.footer-reach a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); transform: translateY(-3px); }
.footer-reach a:active { transform: scale(0.9); }
.footer-reach svg { width: 19px; height: 19px; }

.footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.footer-col h2 {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--white); margin-bottom: 1.25rem;
}
.footer-col a {
    display: block;
    padding-block: 0.4rem;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    transition: color 0.2s;
    overflow-wrap: anywhere;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
    font-size: 0.8rem; color: rgba(255,255,255,0.72);
}
.footer-tagline { letter-spacing: 0.2em; font-weight: 600; color: var(--sky); }

/* ============================================================
   PIXEL SWAP — the splash's right half (on phones, the panel under
   the pillars) alternates between two images. main.js draws the
   changeover on a canvas: squares of the next image grow in a
   diagonal wave. The Octo Labs side is never touched.
   Without JS the splash stays as it is; with reduced motion the
   Zenovision version shows straight away.
   ============================================================ */
[data-zv-swap] .zv-to { opacity: 0; }
[data-zv-swap].is-swapped .zv-from { opacity: 0; }
[data-zv-swap].is-swapped .zv-to { opacity: 1; }
/* Desktop: same size and crop as the splash photo, laid over it */
.logo-intro-next { position: absolute; inset: 0; }
/* Desktop logo: main.js centres it in the right half */
.logo-intro-zv { position: absolute; left: 0; top: 0; width: 0; height: auto; }
/* Phone: a square panel under the pillars takes the place of the right half */
.logo-intro-panel { position: relative; aspect-ratio: 1; background: var(--off-white); }
.logo-intro-panel img { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-intro-panel .zv-from { object-fit: cover; object-position: 50% 60%; }
.logo-intro-panel .zv-to { object-fit: contain; padding: 6%; }
.zv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.logo-intro .intro-cue { z-index: 2; }
/* "coming soon" line under the Zenovision logo; fades in once the squares clear */
.logo-intro-caption {
    font-size: clamp(0.85rem, 1.1vw, 1.05rem);
    font-weight: 600;
    color: var(--navy);
    text-align: center;
}
/* fades in only: it has to be gone the moment the machine is back, or it sits on the photo */
[data-zv-swap].is-swapped .logo-intro-caption { transition: opacity 0.5s ease 0.1s; }
.logo-intro-caption-wide { position: absolute; left: 0; top: 0; width: 0; margin: 0; }
/* pause / play for the loop (WCAG 2.2.2) */
.logo-intro-pause {
    position: absolute;
    right: max(1rem, 2vw); bottom: max(1rem, 2vw);
    z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid rgba(20, 21, 82, 0.25);
    border-radius: 50%;
    background: rgba(252, 253, 253, 0.85);
    color: var(--navy);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.logo-intro-pause:hover { background: var(--white); border-color: var(--navy); }
.logo-intro-pause[hidden] { display: none; }
.logo-intro-pause .icon-play,
.logo-intro-pause[aria-pressed="true"] .icon-pause { display: none; }
.logo-intro-pause[aria-pressed="true"] .icon-play { display: block; }
.logo-intro-pause-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Stacked layout of the splash: narrow screens and any portrait screen (e.g. a tablet
   held upright), where the wide photo would crop the logo. The two <picture> sources in
   index.html use the same query, and main.js follows whichever layout is showing. */
@media (max-width: 900px), (orientation: portrait) {
    .logo-intro {
        display: grid;
        place-items: center;
        padding: var(--nav-h) 1.75rem 0; /* centre below the fixed nav, not under it */
        background: linear-gradient(180deg, #ECF0FA 0%, var(--white) 100%);
    }
    /* the <source> tags would otherwise become invisible grid rows above the content */
    .logo-intro picture, .logo-intro-mark, .logo-intro-zv, .logo-intro-caption-wide { display: none; }
    .logo-intro-brand {
        display: grid;
        justify-items: center;
        gap: clamp(1rem, 3svh, 2rem);
        padding-bottom: 4.5rem; /* room for the Scroll hint below */
    }
    .logo-intro-brand-mark { width: min(78vw, 520px); height: auto; }
    /* three equal columns, icon over label, no dividers: nothing wraps on its own */
    .logo-intro-brand .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; width: min(86vw, 520px); margin-bottom: 0; justify-content: center; }
    .logo-intro-brand .pillars li,
    .logo-intro-brand .pillars li:not(:first-child) { flex-direction: column; gap: 0.4rem; padding-left: 0; text-align: center; }
    .logo-intro-brand .pillars li:not(:first-child)::before { display: none; }
    .logo-intro-panel { width: min(70vw, 420px, 32svh); }
    .logo-intro-caption { margin-top: -0.5rem; }
}
/* Phones held sideways: too short to stack, so the logo and pillars sit beside the
   panel and everything fits on one screen. */
@media (max-width: 900px) and (max-height: 500px) {
    .logo-intro { padding-block: var(--nav-h) 0; }
    .logo-intro-brand { grid-template-columns: auto auto; align-items: center; column-gap: 2rem; row-gap: 0.75rem; padding-bottom: 0; }
    .logo-intro-brand-mark { width: min(42vw, 300px); }
    .logo-intro-brand .pillars { width: min(42vw, 300px); }
    .logo-intro-panel { grid-column: 2; grid-row: 1 / span 2; width: min(32vw, 52svh); }
    .logo-intro-caption { grid-column: 2; margin-top: 0; }
    .logo-intro .intro-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .js [data-zv-swap] .zv-from { opacity: 0; }
    .js [data-zv-swap] .zv-to { opacity: 1; }
}

/* ============================================================
   MOTION — reveal only when JS is present, and only if allowed
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; }
.js .reveal.d2 { transition-delay: 0.16s; }
.js .reveal.d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    /* Mobile navigation */
    .hamburger { display: flex; }
    .nav-links {
        display: none;
        position: fixed;
        top: var(--nav-h); left: 0;
        width: 100%; height: calc(100dvh - var(--nav-h));
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1.5rem var(--gutter) 2rem;
        background: var(--white);
        overflow-y: auto;
    }
    .nav-links.open { display: flex; }
    .nav-links li { border-bottom: 1px solid var(--border); }
    .nav-link { display: block; padding-block: 1.1rem; font-size: 1.05rem; }
    .nav-link::after { display: none; }
    .nav-links li:last-child { border-bottom: 0; padding-top: 1.5rem; }
    .nav-cta { width: 100%; min-height: 52px; font-size: 0.9rem; }

    /* Hero: image becomes a banner under the copy */
    .hero { display: block; min-height: 0; }
    .hero-content { padding-bottom: 2rem; }
    .hero-visual { position: relative; top: auto; width: 100%; height: clamp(260px, 60vw, 420px); }
    .hero-visual img {
        object-position: center 40%;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    }

    .split, .contact-wrap { grid-template-columns: 1fr; }
    .col-3 { grid-template-columns: 1fr; }
    .col-3 > * { border-right: 0; border-bottom: 1px solid var(--border-mid); }
    .col-3 > *:last-child { border-bottom: 0; }
    .on-dark .col-3 > * { border-bottom-color: rgba(255,255,255,0.12); }
    .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .spec-list li { grid-template-columns: 1fr; gap: 0.25rem; }
    .form-row { grid-template-columns: 1fr; }
    .footer-nav { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .hero-actions .btn { width: 100%; }
    .footer-nav { grid-template-columns: 1fr; }
    .band .btn { width: 100%; }
    .pillars { gap: 0.9rem 1.25rem; }
    .pillars li:not(:first-child) { padding-left: 1.25rem; }
}

/* The smallest phones: keeps the full stop after "manufacturing." on screen */
@media (max-width: 380px) {
    .hero .h1 { font-size: 2.1rem; }
}

/* Spec list on dark backgrounds */
.on-dark .spec-list { border-top-color: rgba(255,255,255,0.14); }
.on-dark .spec-list li { border-bottom-color: rgba(255,255,255,0.14); }
.on-dark .spec-list strong { color: var(--white); }
.on-dark .spec-list span { color: rgba(255,255,255,0.72); }