/* fonts:start — generated by build/fonts.mjs, do not edit by hand */
/* Self-hosted so that no visitor's browser has to contact Google to read this
   site. Regenerate with: npm run fonts */

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/dm-sans-latin-ext-a5d38fe9.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/dm-sans-latin-9fea608a.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/dm-sans-latin-ext-a5d38fe9.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/dm-sans-latin-9fea608a.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-latin-ext-6bc0f226.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-latin-08949f72.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-latin-ext-6bb06407.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-latin-01d28544.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/space-grotesk-latin-ext-952dddb4.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/space-grotesk-latin-06408904.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/space-grotesk-latin-ext-952dddb4.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/space-grotesk-latin-06408904.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/space-grotesk-latin-ext-952dddb4.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    /* swap: show the fallback immediately rather than invisible text while
       the file loads. The alternative is a blank page on a slow connection. */
    font-display: swap;
    src: url('/fonts/space-grotesk-latin-06408904.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* fonts:end */

/* ============================================================
   IMG.VENTURES — one-pager (1:1 palette from reference)
   Tokens (oklch, extracted from reference):
     --background oklch(13% .01 270)   --foreground oklch(97% .005 260)
     --muted-fg   oklch(72% .02 260)   --card oklch(17% .012 270)
     --border     white/8%             panels white/4%
     gradient: 120deg, oklch(0.68 0.22 290) 0%,
               oklch(0.82 0.14 210) 55%, oklch(0.85 0.15 165) 100%
     mint dot oklch(0.85 0.15 165) · cyan dot oklch(0.82 0.14 210)
   Type: Space Grotesk (display 600) · DM Sans (body) · mono (labels)
   ============================================================ */

:root {
    --night: oklch(0.13 0.01 270);
    --card-bg: oklch(0.17 0.012 270);
    --fog: oklch(0.97 0.005 260);
    --slate: oklch(0.72 0.02 260);
    --mint: oklch(0.85 0.15 165);
    --cyan: oklch(0.82 0.14 210);
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.1);
    --panel: rgba(255, 255, 255, 0.04);
    --grad: linear-gradient(120deg, oklch(0.68 0.22 290) 0%, oklch(0.82 0.14 210) 55%, oklch(0.85 0.15 165) 100%);
    --ring: oklch(0.7 0.12 285);
    --font-display: "Space Grotesk", sans-serif;
    --font-body: "DM Sans", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --wrap: 74rem;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

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

/* The browser hides [hidden] with a user-agent rule, which any class that
   sets display silently defeats — .form-success{display:flex} did exactly
   that, so the "message is on its way" panel showed on page load. Stating it
   here with !important makes the attribute mean what it says, for every
   element, including ones added later. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.65;
    color: var(--fog);
    background: var(--night);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

ul { list-style: none; }

a { color: var(--fog); }

:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--mint); color: var(--night); }

.wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.025em;
    text-wrap: balance;
    color: var(--fog);
}

h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-top: 0.9rem; }

/* gradient words in headings — the signature element */
.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* small mono section labels: 01 / SERVICES */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--slate);
}

/* hero glass pill: · IMG · Dublin ... */
.eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.38rem 0.85rem;
    font-size: 0.95rem;
    color: var(--fog);
}

.dot-mint, .dot-cyan {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex: none;
}
.dot-mint { background: var(--mint); }
.dot-cyan { background: var(--cyan); width: 4px; height: 4px; }

.pill-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--mint);
    flex: none;
}

.section { padding-block: clamp(4rem, 9vw, 7rem); }

.section-sub {
    margin-top: 1.1rem;
    max-width: 44rem;
    color: var(--slate);
    font-size: 1.05rem;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    background: var(--fog);
    color: var(--night);
    padding: 0.6rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- buttons ---------- */

.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.875rem 1.5rem;
    border-radius: 999px;
    line-height: 1.2;
}

.btn-primary {
    background: var(--grad);
    color: var(--night);
}
.btn-primary:hover { filter: brightness(1.07); }

.btn-ghost {
    background: var(--panel);
    color: var(--fog);
    border: 1px solid var(--line-strong);
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.25); }

/* ---------- header ---------- */

.site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 10;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
}

.wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.01em;
    color: var(--fog);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
}

.wordmark-dot {
    width: 0.42em;
    height: 0.42em;
    margin-left: 0.18em;
    background: var(--mint);
    display: inline-block;
    border-radius: 999px;
}

.logo-img {
    height: 1.6rem;
    width: auto;
    display: block;
    /* logo artwork is black raster embedded in the SVG — tint it to the
       site's white while preserving transparency */
    filter: brightness(0) invert(1);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2.5vw, 1.8rem);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.site-nav a {
    font-size: 0.88rem;
    text-decoration: none;
    color: var(--slate);
}
.site-nav a:hover { color: var(--fog); }

.site-nav .nav-cta {
    background: var(--panel);
    border: 1px solid var(--line-strong);
    color: var(--fog);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.88rem;
}
.site-nav .nav-cta:hover { border-color: rgba(255, 255, 255, 0.25); color: var(--fog); }

@media (max-width: 40rem) {
    .site-nav a:not(.nav-cta) { display: none; }
}

/* ---------- hero ---------- */

.hero {
    position: relative;
    padding-block: clamp(8rem, 18vh, 12rem) clamp(3.5rem, 7vw, 5.5rem);
    background:
        radial-gradient(46rem 30rem at 82% -10%, oklch(0.68 0.22 290 / 0.10), transparent 65%),
        radial-gradient(40rem 26rem at -10% 30%, oklch(0.82 0.14 210 / 0.06), transparent 60%),
        var(--night);
    overflow: hidden;
}

.hero h1 {
    margin-top: 1.4rem;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    letter-spacing: -0.025em;
}

.hero-sub {
    max-width: 42rem;
    margin-top: 1.5rem;
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
    color: var(--slate);
}

.hero-cta-row {
    margin-top: 2.4rem;
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}

/* ---------- stats ---------- */

.stat-grid {
    display: grid;
    gap: 1rem;
}

.hero-stats {
    grid-template-columns: repeat(3, 1fr);
    margin-top: clamp(3rem, 7vw, 4.5rem);
}

.stat {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.15rem 1.2rem 1.2rem;
}

.stat-value {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--fog);
}

.stat-name {
    display: block;
    margin-top: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
}

@media (max-width: 56rem) { .hero-stats { grid-template-columns: 1fr; } }

/* ---------- tech ticker ---------- */

.ticker {
    overflow: hidden;
    padding-block: 0.9rem;
}

.ticker-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: ticker 36s linear infinite;
}

.ticker-track span {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    color: var(--slate);
    white-space: nowrap;
}

.ticker-track span::after {
    content: "·";
    color: var(--mint);
    margin-left: 3rem;
}

@keyframes ticker {
    to { transform: translateX(-50%); }
}

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

/* ---------- cards (shared) ---------- */

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.7rem 1.6rem 1.8rem;
}

.card-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--slate);
    letter-spacing: 0.15em;
}

/* feature list with cyan dot bullets (reference style) */
.card-tags {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.45rem;
}

.card-tags li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: rgba(244, 246, 250, 0.85);
}

.card-tags li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--cyan);
    flex: none;
}

/* ---------- services ---------- */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: clamp(1.8rem, 4vw, 2.8rem);
}

.service-tile {
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
}

.service-tile h3 { font-size: 1.35rem; margin-top: 0.8rem; min-height: 2.12em; }

.service-tile > p {
    margin-top: 0.6rem;
    font-size: 0.94rem;
    color: var(--slate);
}

.service-tile .card-tags { margin-top: auto; padding-top: 1.3rem; }

@media (max-width: 56rem) { .services-grid { grid-template-columns: 1fr; } }

/* ---------- selected work ---------- */

.work-walkthrough { margin-top: 1.6rem; }

.work-walkthrough a {
    display: inline-block;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.65rem 1.1rem;
    font-size: 0.88rem;
    text-decoration: none;
    color: var(--fog);
}
.work-walkthrough a:hover { border-color: rgba(255, 255, 255, 0.25); }

.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: clamp(1.8rem, 4vw, 2.6rem);
}

.work-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
}

.work-card h3 { font-size: 1.35rem; }

.work-card > p { color: var(--slate); font-size: 0.94rem; }

.client-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.client-name {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate);
}

.chip-coming {
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.18rem 0.65rem;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

/* push the tags + link to the bottom so the three cards align */
.work-card .card-tags { margin-top: auto; padding-top: 0.4rem; }

.card-link {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--mint);
}
.card-link:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 56rem) { .work-grid { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */

.contact-panel {
    margin-top: clamp(2rem, 5vw, 3rem);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 32px;
    padding: clamp(1.8rem, 5vw, 3.5rem);
}

.contact-mail {
    display: inline-block;
    background: var(--grad);
    color: var(--night);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.875rem 1.5rem;
    border-radius: 999px;
}
.contact-mail:hover { filter: brightness(1.07); }

.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;
}

.contact-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

@media (max-width: 56rem) { .contact-split { grid-template-columns: 1fr; } }

.contact-aside h3 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.aside-text {
    margin-top: 1rem;
    color: var(--slate);
    font-size: 0.98rem;
}

.aside-divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin-block: 1.6rem;
}

.aside-note {
    color: var(--slate);
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
}

.aside-note--support { margin-top: 1.5rem; }

.aside-contact {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--fog);
    text-decoration: none;
    font-size: 1.02rem;
    margin-top: 0.55rem;
}
.aside-contact { text-decoration: none; }
.aside-contact .aside-ico { color: var(--mint); }
.aside-contact:hover .aside-label { text-decoration: underline; text-underline-offset: 4px; }

.contact-form {
    display: grid;
    gap: 1.1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

@media (max-width: 40rem) { .form-row { grid-template-columns: 1fr; } }

.form-field { display: grid; gap: 0.4rem; position: relative; }

.form-field label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--slate);
}

.label-optional { text-transform: none; letter-spacing: 0.04em; opacity: 0.7; }

.form-field input,
.form-field select,
.form-field textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--fog);
    width: 100%;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: oklch(0.55 0.02 260); }

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 0;
    border-color: transparent;
}

.form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23A2ABB8" stroke-width="2" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.6rem;
    cursor: pointer;
}

.form-field select:invalid { color: oklch(0.55 0.02 260); }
.form-field select option { background: #14161d; color: var(--fog); }

/* ---------- custom dropdown (JS enhancement over native select) ---------- */

.custom-select { position: relative; }

/* native select stays in the tree for form submission + validation,
   visually replaced by the button */
.custom-select select.enhanced {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.select-btn {
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: 0.8rem 2.6rem 0.8rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--fog);
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23A2ABB8" stroke-width="2" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    transition: border-color 0.12s ease;
}

.select-btn.is-placeholder { color: oklch(0.55 0.02 260); }

.select-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.25); }

.select-btn:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 0;
    border-color: transparent;
}

.select-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #14161D;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: 0.35rem;
    max-height: min(60vh, 26rem);
    overflow-y: auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    display: none;
}

.select-menu.open { display: block; }

/* in the contact form the menu covers the submit button behind it */
.contact-form .select-menu { padding-bottom: 1.4rem; }

.select-menu [role="option"] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--fog);
    cursor: pointer;
}

.select-menu [role="option"]::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    flex: none;
    transition: background 0.1s ease;
}

.select-menu [role="option"]:hover,
.select-menu [role="option"].active {
    background: rgba(255, 255, 255, 0.06);
}

.select-menu [role="option"][aria-selected="true"] { color: var(--fog); }
.select-menu [role="option"][aria-selected="true"]::before { background: var(--mint); }

.form-consent {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--slate);
    cursor: pointer;
}

.form-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
    margin-top: 0.15rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    cursor: pointer;
    display: grid;
    place-content: center;
}

.form-consent input[type="checkbox"]::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 2px;
    transform: scale(0);
    background: var(--grad);
    transition: transform 0.12s ease;
}

.form-consent input[type="checkbox"]:checked::before { transform: scale(1); }

.form-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.form-consent a { color: var(--fog); }

.btn-block {
    width: 100%;
    text-align: center;
    padding-block: 1rem;
}

/* ---------- form success / error states ---------- */

.form-success {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: rgba(92, 229, 176, 0.06);
    border: 1px solid rgba(92, 229, 176, 0.3);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
}

.form-success-ico {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-content: center;
    border-radius: 999px;
    background: var(--mint);
    color: var(--night);
    font-size: 0.9rem;
    font-weight: 700;
}

.form-success-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--fog);
}

.form-success-text {
    margin-top: 0.3rem;
    color: var(--slate);
    font-size: 0.92rem;
    line-height: 1.5;
}

.form-banner {
    background: rgba(232, 163, 61, 0.1);
    border: 1px solid rgba(232, 163, 61, 0.4);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--fog);
}

/* ---------- custom validation bubble ---------- */

.field-error {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: min(280px, 100%);
    background: #14161D;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--fog);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    animation: field-error-in 0.14s ease-out;
}

.field-error::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 18px;
    width: 9px;
    height: 9px;
    background: #14161D;
    border-left: 1px solid var(--line-strong);
    border-top: 1px solid var(--line-strong);
    transform: rotate(45deg);
}

/* consent bubble: shift so the arrow points at the checkbox centre */
.field-error--check { left: -8px; }
.field-error--check::before { left: 12px; }

.field-error-ico {
    display: inline-grid;
    place-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 999px;
    background: #E8A33D;
    color: #14161D;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

@keyframes field-error-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

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

.form-actions {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.btn-primary[type="submit"] { border: 0; cursor: pointer; font-family: var(--font-body); }

.form-mail-alt {
    font-size: 0.88rem;
    color: var(--slate);
    text-decoration: none;
}
.form-mail-alt:hover { color: var(--fog); text-decoration: underline; text-underline-offset: 4px; }

.form-sent {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--mint);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
}

.contact-facts {
    margin-top: clamp(1.8rem, 4vw, 2.5rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-top: 1px solid var(--line);
    padding-top: 1.8rem;
}

.contact-facts dt {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--slate);
}

.contact-facts dd {
    margin-top: 0.2rem;
    font-size: 0.95rem;
}

.fact-mono {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--slate);
}

@media (max-width: 48rem) { .contact-facts { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */

.site-footer {
    padding-block: 1.4rem;
    color: var(--slate);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2rem;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}

.footer-company { font-family: var(--font-mono); }

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
}

.footer-nav a {
    color: var(--slate);
    text-decoration: none;
}
.footer-nav a:hover { color: var(--fog); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- legal subpages ---------- */

.legal-header { position: static; border-bottom: 1px solid var(--line); }

.legal-main { padding-block: clamp(2.5rem, 6vw, 4rem); }

.legal-main .wrap { max-width: 52rem; }

.legal-main h1 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    margin-bottom: 1.8rem;
}

.legal-main h2 {
    font-size: 1.25rem;
    margin-top: 2.2rem;
    margin-bottom: 0.6rem;
}

.legal-main p, .legal-main li { margin-bottom: 0.7rem; color: oklch(0.85 0.01 265); }

.legal-main ul { list-style: disc; padding-left: 1.4rem; }

.legal-main table {
    border-collapse: collapse;
    margin-block: 1rem;
    font-size: 0.92rem;
    width: 100%;
}

.legal-main th, .legal-main td {
    border: 1px solid var(--line);
    padding: 0.6rem 0.8rem;
    text-align: left;
    vertical-align: top;
    color: oklch(0.85 0.01 265);
}

.legal-main th { background: var(--panel); font-family: var(--font-mono); font-weight: 500; color: var(--fog); }

.legal-main a { overflow-wrap: anywhere; }

.legal-back {
    display: inline-block;
    margin-bottom: 2rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--slate);
}
.legal-back:hover { color: var(--fog); text-decoration: underline; }

/* ---------- project modal ---------- */

.modal[hidden] { display: none; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1.2rem;
}

body.modal-open { overflow: hidden; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 12, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: modal-fade 0.18s ease;
}

.modal-dialog {
    position: relative;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    padding: clamp(1.5rem, 4vw, 2.4rem);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    animation: modal-pop 0.2s ease;
}

.modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.95rem;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-content: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--slate);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.modal-close:hover { color: var(--fog); background: rgba(255, 255, 255, 0.06); }

.modal-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-top: 0.5rem;
}

.modal-sub {
    margin-top: 0.7rem;
    color: var(--slate);
    font-size: 0.95rem;
    max-width: 42ch;
}

.modal-form {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
}

@keyframes modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop, .modal-dialog { animation: none; }
}

/* ---------- scroll reveal ---------- */

.reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-on [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   GENERATED SECTIONS — glossary and blog
   Both build on .legal-main, which supplies the narrow reading
   column and the heading scale. Everything below is what those
   two sections add on top of it.
   ============================================================ */

.doc-wide .wrap { max-width: 64rem; }

.doc-intro {
    font-size: 1.05rem;
    color: var(--slate);
    max-width: 46rem;
    margin-bottom: 1rem;
}

.eyebrow-accent { color: var(--mint); }

.legal-main .eyebrow a { color: inherit; text-decoration: none; }
.legal-main .eyebrow a:hover { color: var(--mint); }

.legal-main code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0.1em 0.35em;
}

/* Links inside body copy need to read as links against a dark ground
   without the underline noise of a hundred cross-references. */
.term-body a, .article-body a {
    color: var(--mint);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.term-body a:hover, .article-body a:hover { border-bottom-color: var(--mint); }

/* ---------- glossary index ---------- */

.glossary-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.8rem 0 2.4rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--line);
}

.glossary-jump a {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--slate);
    min-width: 2rem;
    padding: 0.3rem 0.45rem;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 7px;
}
.glossary-jump a:hover { color: var(--night); background: var(--mint); border-color: var(--mint); }

.glossary-group { margin-bottom: 2.6rem; scroll-margin-top: 1.5rem; }

.glossary-letter {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--mint);
    letter-spacing: 0.14em;
    margin-bottom: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}

/* .legal-main sets list-style: disc for prose lists; these are card grids,
   not prose, so the marker and its indent have to come back off. */
.legal-main .glossary-list, .legal-main .article-list { list-style: none; padding-left: 0; }

.glossary-list { display: grid; gap: 0.5rem; }

.glossary-list a {
    display: grid;
    gap: 0.15rem;
    text-decoration: none;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel);
}
.glossary-list a:hover { border-color: var(--line-strong); background: var(--card-bg); }

.glossary-term { font-family: var(--font-display); font-weight: 600; color: var(--fog); }

.glossary-hint {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--slate);
}

@media (min-width: 46rem) {
    .glossary-list { grid-template-columns: 1fr 1fr; }
}

/* ---------- glossary entry ---------- */

.term-aka {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--slate);
    margin-top: -1.2rem;
    margin-bottom: 1.6rem;
}

.term-body p { font-size: 1.02rem; }

/* ---------- blog index ---------- */

.article-list { display: grid; gap: 1rem; margin-top: 2rem; }

.article-card a {
    display: block;
    text-decoration: none;
    padding: 1.5rem 1.5rem 1.6rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    height: 100%;
}
.article-card a:hover { border-color: var(--line-strong); background: var(--card-bg); }

.article-card h2 {
    font-size: 1.2rem;
    margin: 0.5rem 0 0.55rem;
    color: var(--fog);
}

.article-perex {
    color: var(--slate);
    font-size: 0.95rem;
    margin-bottom: 0.9rem !important;
}

@media (min-width: 52rem) {
    .article-list { grid-template-columns: 1fr 1fr; }
}

/* ---------- article ---------- */

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--slate);
    margin-bottom: 1.2rem !important;
}

.article-category {
    color: var(--mint);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

.article-body { margin-top: 2rem; }
.article-body p, .article-body li { font-size: 1.02rem; }
.article-body h2 { scroll-margin-top: 1.5rem; }

.article-cta {
    margin-top: 3rem;
    padding: 1.6rem 1.6rem 1.8rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
}
.article-cta p:last-child { margin-bottom: 0; }

/* ---------- pager, shared ---------- */

.pager {
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    margin-top: 3rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}

.pager a {
    color: var(--slate);
    text-decoration: none;
    max-width: 20rem;
}
.pager a:hover { color: var(--mint); }
.pager-next { text-align: right; }

/* ============================================================
   COOKIE CONSENT
   Bottom-right card rather than a full-width bar: the only
   optional category is analytics, so the ask is small and the
   banner should be too. Accept and Decline are deliberately
   identical — a prominent Accept next to a faint Decline is not
   a free choice, and an invalid consent is worth less than none.
   ============================================================ */

.consent {
    position: fixed;
    z-index: 60;
    right: clamp(0.75rem, 2vw, 1.5rem);
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    width: min(24rem, calc(100vw - 1.5rem));
    padding: 1.15rem 1.25rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.consent-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--slate);
    margin-bottom: 0.5rem;
}

.consent-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--fog);
    margin-bottom: 1rem;
}

.consent-text a { color: var(--mint); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.consent-text a:hover { border-bottom-color: var(--mint); }

.consent-actions { display: flex; gap: 0.6rem; }

/* Both buttons take equal width, so neither can be the obvious one. */
/* .btn is inline-block, so centring is text-align, not justify-content.
   These are <button> elements, which do not inherit the pointer cursor. */
.consent-actions .btn { flex: 1; text-align: center; cursor: pointer; }

.btn-sm {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
}

/* The banner is fixed to the viewport, so on a short screen in landscape it
   can cover the content it is asking about. Allowing it to scroll internally
   is less bad than allowing it to grow past the edge. */
@media (max-height: 26rem) {
    .consent { max-height: calc(100vh - 1.5rem); overflow-y: auto; }
}

@media print {
    .consent { display: none; }
}