/* =========================================================
   SSZ DIGITAL — LANDING PAGE
   Palette: black, white, red, pink. The two glitch colours are
   only used for the split-colour slices in the first hero.
   ========================================================= */

:root {
    --black: #000000;
    --white: #f3efe8; /* warm off-white, same as the featured section */
    --blue: rgba(26, 77, 128, 0.55);
    --red: #b20000;
    --pink: #ff95b6;
    --glitch-a: #ff2a55;
    --glitch-b: #2de2ff;

    --border: rgba(0, 0, 0, 0.1);
    --border-soft: rgba(0, 0, 0, 0.06);
    --line-dark: rgba(243, 239, 232, 0.12);

    --font-display: "Calibri", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-body: "Calibri", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --nav-height: 72px;
    --gutter: clamp(16px, 4vw, 56px);

    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 8px;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.16);

    --container-max: 1300px;
}

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--white);
    background: var(--black);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

#home, #featured, #companies, #contact, .dir-section {
    scroll-margin-top: var(--nav-height);
}

/* Small mono label above headings */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 14px;
}

.eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.status-note {
    padding: 60px var(--gutter);
    margin: 0;
    font-size: 15px;
    opacity: 0.7;
}

.status-note.is-error { color: var(--red); opacity: 1; }

/* Blocks that fade up when they reach the screen */
.reveal,
.contact-wrap {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.show,
.contact-wrap.show {
    opacity: 1;
    transform: none;
}

/* ================= NAV: centred, one colour =================
   White with difference blending, so it reads as white on black
   and black on the light part of the featured section. */
.site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--gutter);
    mix-blend-mode: difference;
    pointer-events: none;
    background-color: transparent;
    transition: background-color 0.45s ease, box-shadow 0.45s ease;
}

/* Over the contact section the bar turns solid white with black links,
   so it doesn't blend into the contact content. script.js adds the class
   once the contact section reaches the bar. The colour-inverting blend is
   switched off here; the switch happens over black, where both look the same. */
.site-nav.is-solid {
    mix-blend-mode: normal;
    background-color: var(--white);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* logo on the left, links and the button on the right */
.nav-row {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    gap: clamp(14px, 3vw, 40px);
    pointer-events: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(14px, 3vw, 40px);
    margin-left: auto;
}

.nav-row a {
    color: var(--white);
    transition: color 0.45s ease;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    position: relative;
    padding: 6px 0;
}

.nav-row a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.nav-row a:hover::after,
.nav-row a:focus-visible::after {
    transform: scaleX(1);
}

.nav-row .nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: none;
}

.nav-brand::after { display: none; }

/* "I'm a business owner": a filled pill. Over the page it's light with dark
   text (the blend keeps it readable on any section); on the solid bar it's dark. */
.nav-row .nav-cta {
    flex: none;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--white);
    color: var(--black);
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    transition: color 0.45s ease, background-color 0.45s ease, transform 0.2s ease;
}

.nav-row .nav-cta::after { display: none; }
.nav-row .nav-cta:hover,
.nav-row .nav-cta:focus-visible { transform: translateY(-1px); }

.site-nav.is-solid .nav-row .nav-cta {
    background: var(--black);
    color: var(--white);
}

/* the logo becomes white with a black mark, matching the links */
.nav-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: grayscale(1) invert(1) contrast(4);
    transition: filter 0.45s ease;
}

.site-nav.is-solid .nav-row a { color: var(--black); }
/* on white: black disc, white mark */
.site-nav.is-solid .nav-icon { filter: grayscale(1) contrast(4); }

/* phones: two rows. Logo (no text) + button on top, the three links
   spread evenly underneath, so every option stays visible. */
@media (max-width: 640px) {
    :root { --nav-height: 104px; }
    .site-nav { align-items: stretch; padding-top: 10px; padding-bottom: 8px; }
    .nav-row {
        flex-wrap: wrap;
        align-content: space-between;
        row-gap: 6px;
        column-gap: 12px;
    }
    .nav-row .nav-brand span { display: none; }
    .nav-row .nav-cta { margin-left: auto; padding: 9px 14px; font-size: 12.5px; }
    .nav-links {
        order: 3;
        flex-basis: 100%;
        justify-content: space-between;
        margin-left: 0;
        gap: 8px;
    }
    .nav-links a { font-size: 11px; letter-spacing: 0.12em; }
}

/* ================= HERO 1: black, pinned in place, glitches as it's covered =================
   The hero sticks to the top of the screen; every section after it has
   its own background and sits above it (z-index), so scrolling slides
   the next section up over the hero instead of moving the hero away. */
.intro {
    position: sticky;
    top: 0;
    z-index: 0;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--black);
    overflow: hidden;
}

.intro-inner {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 80px);
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--nav-height) + 20px) var(--gutter) 90px;
}

.intro-copy {
    min-width: 0;
    will-change: opacity;
}

.intro-eyebrow {
    margin: 0 0 22px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--pink);
}

.intro-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(52px, 8.6vw, 124px);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--white);
}

.intro-title .glitch {
    display: block;
}

.intro-tagline {
    margin: clamp(26px, 4vw, 44px) 0 0;
    font-family: var(--font-display);
    font-size: clamp(19px, 2.1vw, 30px);
    font-weight: 500;
    line-height: 1.25;
    color: rgba(243, 239, 232, 0.78);
}

.intro-tagline .glitch { display: inline-block; }
.intro-tagline .is-accent { color: var(--white); font-weight: 700; }

/* the glitch: two coloured copies of the text, cut into slices and
   pushed sideways. script.js sets the --g-* values from the scroll. */
.glitch {
    position: relative;
    transform: translateX(var(--g-shift, 0)) skewX(var(--g-skew, 0));
    white-space: pre;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    white-space: pre;
}

.intro.is-glitching .glitch::before,
.intro.is-glitching .glitch::after {
    opacity: var(--g-layer, 0);
}

.glitch::before {
    color: var(--glitch-a);
    transform: translateX(var(--g-a, 0));
    clip-path: var(--g-clip-a, inset(0 0 100% 0));
    mix-blend-mode: screen;
}

.glitch::after {
    color: var(--glitch-b);
    transform: translateX(var(--g-b, 0));
    clip-path: var(--g-clip-b, inset(0 0 100% 0));
    mix-blend-mode: screen;
}

/* scan lines that show up while glitching */
.intro-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(243, 239, 232, 0.05) 0 1px, transparent 1px 4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.intro.is-glitching .intro-inner::after { opacity: 1; }

/* the code editor box: script.js types into it in a loop */
.code-box {
    position: relative;
    z-index: 1;
    min-width: 0;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-md);
    background: #0b0b0b;
    box-shadow: 0 30px 80px rgba(255, 149, 182, 0.08);
    overflow: hidden;
    will-change: opacity;
}

.code-box-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-dark);
    background: #121212;
}

.code-box-dots {
    display: flex;
    gap: 6px;
}

.code-box-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(243, 239, 232, 0.18);
}

.code-box-dots i:first-child { background: var(--pink); }

.code-box-file {
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(243, 239, 232, 0.55);
}

.code-box-body {
    margin: 0;
    height: clamp(200px, 22vw, 290px);
    padding: 18px 20px;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: clamp(11px, 0.85vw, 13px);
    line-height: 1.75;
    color: rgba(243, 239, 232, 0.85);
    white-space: pre-wrap;
    word-break: break-word;
    counter-reset: line;
}

.code-box-body code { font: inherit; }

/* line numbers */
.code-box-body .ln {
    display: inline-block;
    width: 2.2em;
    margin-right: 0.8em;
    text-align: right;
    color: rgba(243, 239, 232, 0.22);
    user-select: none;
}

/* syntax colours, kept to the page palette */
.code-box-body .k { color: var(--pink); }               /* keywords */
.code-box-body .s { color: #ffd2df; }                   /* strings */
.code-box-body .f { color: var(--white); font-weight: 600; } /* names */
.code-box-body .c { color: rgba(243, 239, 232, 0.35); } /* comments */
.code-box-body .p { color: rgba(243, 239, 232, 0.55); } /* punctuation */

.code-caret {
    display: inline-block;
    width: 0.55em;
    height: 1.15em;
    margin-left: 1px;
    vertical-align: -0.2em;
    background: var(--pink);
    animation: caret-blink 1s steps(1) infinite;
}

.code-box.is-typing .code-caret { animation: none; }

@keyframes caret-blink {
    50% { opacity: 0; }
}

@media (max-width: 860px) {
    .intro-inner {
        grid-template-columns: 1fr;
        align-content: center;
        padding-top: calc(var(--nav-height) + 30px);
    }
    .code-box-body { height: 170px; }
}

.intro-scroll {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(243, 239, 232, 0.6);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.intro-scroll i {
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, rgba(243, 239, 232, 0.7), transparent);
    animation: scroll-hint 1.8s ease-in-out infinite;
    transform-origin: top;
}

@keyframes scroll-hint {
    0% { transform: scaleY(0); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(1); opacity: 0; }
}

/* ================= HERO 2: featured companies =================
   One screen. The featured companies take turns: text on the left,
   photo on the right fading out towards the bottom-left. The bars
   at the bottom fill up to show when the next company comes in.
   The background stays the same warm off-white throughout. */
/* Each section slides up over the one before it, like a stack of cards.
   Featured and Directory then pin in place too, so the next one covers
   them in turn. A section taller than the screen (Directory) pins once its
   last row is in view: script.js sets its "top" to screen height minus its
   own height, so nothing in it is ever hidden. */
.featured,
.directory {
    position: sticky;
    top: 0;
}
.contact-zone { position: relative; }
.featured { z-index: 1; }
.directory { z-index: 2; }
.contact-zone { z-index: 3; }

.featured {
    --fg: var(--black);
    --fg-soft: rgba(0, 0, 0, 0.66);
    --slide-duration: 6000ms;
    box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.45); /* a soft edge as it covers the hero */
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background: var(--white);
    color: var(--fg);
}

.featured .feature-btn {
    transition: color 0.45s ease, border-color 0.45s ease, background-color 0.45s ease;
}

.featured-head {
    position: absolute;
    z-index: 2;
    top: calc(var(--nav-height) + 18px);
    left: var(--gutter);
    pointer-events: none;
}

.featured-head .eyebrow { color: var(--red); margin-bottom: 8px; }

.featured-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(18px, 2vw, 26px);
    letter-spacing: -0.01em;
    color: var(--fg-soft);
}

.featured-list {
    position: absolute;
    inset: 0;
}

.featured-list > .status-note {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* every company is stacked in the same place; only the active one shows */
.feature {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    padding-left: var(--gutter);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.feature.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.9s ease, visibility 0s;
}

/* The text column runs the full height but keeps clear of the
   "Featured / Companies that joined us" heading at the top and the timer at
   the bottom, centring the company text in the space between. */
.feature-text {
    position: relative;
    z-index: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: calc(var(--nav-height) + 110px) clamp(16px, 3vw, 40px) 90px 0;
    max-width: 540px;
    min-height: 0;
    overflow: hidden;
}

/* the text rises in when its company comes up */
.feature-text > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.feature.is-active .feature-text > * {
    opacity: 1;
    transform: none;
}

.feature.is-active .feature-text > :nth-child(2) { transition-delay: 0.08s; }
.feature.is-active .feature-text > :nth-child(3) { transition-delay: 0.16s; }
.feature.is-active .feature-text > :nth-child(4) { transition-delay: 0.24s; }
.feature.is-active .feature-text > :nth-child(5) { transition-delay: 0.32s; }

.feature-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 14px;
}


.feature-name {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-weight: 800;
    /* also limited by screen height, so it shrinks on short screens
       instead of running into the heading */
    font-size: clamp(28px, min(5.6vw, 8vh), 84px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.feature-desc {
    margin: 0 0 18px;
    font-size: clamp(16px, 1.3vw, 18.5px);
    line-height: 1.6;
    color: var(--fg-soft);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feature-meta {
    margin: 0 0 28px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--fg-soft);
}

.feature-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border: 1px solid var(--fg);
    border-radius: 999px;
    color: var(--fg);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
}

.feature-btn:hover,
.feature-btn:focus-visible {
    background: var(--fg);
    color: var(--white);
}

.feature-btn.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* the photo: full height on the right, fading out from the bottom-left corner */
.feature-media {
    position: relative;
    align-self: stretch;
    -webkit-mask-image: linear-gradient(to top right, transparent 8%, rgba(0, 0, 0, 0.35) 34%, #000 62%);
    mask-image: linear-gradient(to top right, transparent 8%, rgba(0, 0, 0, 0.35) 34%, #000 62%);
}

.feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 7s ease-out;
}

.feature.is-active .feature-media img { transform: scale(1); }

/* the time mark: one bar per company; the current one fills up,
   and when it's full the next company comes in */
.feature-timer {
    position: absolute;
    z-index: 3;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 28px;
    display: flex;
    gap: 10px;
}

.feature-timer-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--fg-soft);
    font: inherit;
    text-align: left;
}

.feature-timer-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.feature-timer-item.is-active .feature-timer-label { color: var(--fg); }

.feature-timer-bar {
    position: relative;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--fg) 20%, transparent);
    overflow: hidden;
}

.feature-timer-bar span {
    position: absolute;
    inset: 0;
    background: var(--fg);
    transform: scaleX(0);
    transform-origin: left;
}

.feature-timer-item.is-done .feature-timer-bar span { transform: scaleX(1); }

.feature-timer-item.is-active .feature-timer-bar span {
    animation: feature-timer var(--slide-duration) linear forwards;
}

.featured.is-paused .feature-timer-item.is-active .feature-timer-bar span {
    animation-play-state: paused;
}

.feature-timer-item:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 2px;
}

@keyframes feature-timer {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (max-width: 860px) {
    .feature {
        grid-template-columns: 1fr;
        grid-template-rows: 52% 1fr;
        align-items: start;
        padding: 0;
    }
    .feature-media {
        order: -1;
        /* one column: fade from the bottom so the text below stays readable */
        -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.4) 30%, #000 60%);
        mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.4) 30%, #000 60%);
    }
    .feature-text {
        margin-top: -12vh; /* text rises into the faded part of the photo */
        padding: 0 var(--gutter) 90px;
        justify-content: flex-start;
    }
    .feature-name { font-size: clamp(28px, min(9vw, 6vh), 56px); margin-bottom: 14px; }
    .feature-desc { -webkit-line-clamp: 3; font-size: 15px; }
    .feature-meta { margin-bottom: 20px; }
    .feature-timer-label { display: none; }
    .featured-head h2 { display: none; }
}

/* ================= ALL COMPANIES, one block per admin section ================= */
.directory {
    background: var(--black);
    /* the top space is the header's own padding (see below); the bottom
       leaves room to breathe before the contact section */
    padding: 0 0 140px;
}

/* The header (title, search, section buttons) pins under the nav while the
   companies scroll past beneath it, then leaves with the directory at the
   end. Once pinned (.is-stuck, set by script.js) it shrinks to a compact bar.
   It pins at the very top and its top padding sits behind the nav bar, so
   its black background covers the nav area too and nothing shows through
   the see-through nav. Full width; the side padding keeps the content lined
   up with the 1440px layout. */
.directory-head {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: calc(var(--nav-height) + 10px) max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))) 20px;
    margin: 0 0 30px;
    background: var(--black);
    box-shadow: 0 1px 0 transparent;
    transition: padding 0.3s ease, box-shadow 0.3s ease;
}

.directory-head.is-stuck {
    padding-bottom: 14px;
    box-shadow: 0 1px 0 var(--line-dark), 0 18px 30px rgba(0, 0, 0, 0.6);
}

.directory-head > .eyebrow {
    transition: opacity 0.2s ease;
}

.directory-head.is-stuck > .eyebrow {
    display: none;
}

.directory-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(32px, 5vw, 64px);
    letter-spacing: -0.02em;
    line-height: 1;
    transition: font-size 0.3s ease;
}

.directory-head.is-stuck h2 { font-size: clamp(22px, 2.4vw, 32px); }
.directory-head.is-stuck .directory-search-count:empty { display: none; }
.directory-head.is-stuck .directory-jump { margin-top: 12px; }

/* title on the left, search box on the right */
.directory-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
}

.directory-search {
    position: relative;
    flex: 0 1 360px;
    min-width: 0;
    display: flex;
    align-items: center;
}

.directory-search svg {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: rgba(243, 239, 232, 0.55);
    pointer-events: none;
}

.directory-search input {
    width: 100%;
    padding: 13px 44px 13px 46px;
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    background: rgba(243, 239, 232, 0.06);
    color: var(--white);
    font: inherit;
    font-size: 15px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.directory-search input::placeholder { color: rgba(243, 239, 232, 0.5); }
.directory-search input::-webkit-search-cancel-button { display: none; }

.directory-search input:focus {
    outline: none;
    border-color: var(--pink);
    background: rgba(243, 239, 232, 0.1);
}

.directory-search button {
    position: absolute;
    right: 8px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(243, 239, 232, 0.12);
    color: var(--white);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.directory-search button:hover { background: rgba(243, 239, 232, 0.22); }

.directory-search-count {
    margin: 12px 0 0;
    min-height: 1em;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(243, 239, 232, 0.5);
}

/* tiles and sections hidden by the search */
.tile[hidden],
.dir-section[hidden],
.directory-jump a[hidden] { display: none; }

@media (max-width: 640px) {
    .directory-search { flex-basis: 100%; }

    /* phones: the pinned header keeps its full size (no compact bar) */
    .directory-head.is-stuck > .eyebrow { display: inline-flex; }
    .directory-head.is-stuck h2 { font-size: clamp(32px, 5vw, 64px); }
    .directory-head.is-stuck .directory-jump { margin-top: 26px; }
    .directory-head.is-stuck { padding-bottom: 20px; }
}

.directory-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.directory-jump a {
    padding: 8px 16px;
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    color: rgba(243, 239, 232, 0.8);
    text-decoration: none;
    font-size: 13.5px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.directory-jump a:hover,
.directory-jump a:focus-visible {
    border-color: var(--pink);
    color: var(--pink);
}

.dir-section {
    margin-bottom: 70px;
}

.dir-section-head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 0 var(--gutter) 18px;
    border-bottom: 1px solid var(--line-dark);
    margin-bottom: 2px;
}

.dir-section-index {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--pink);
    letter-spacing: 0.14em;
}

.dir-section-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.dir-section-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(243, 239, 232, 0.5);
    white-space: nowrap;
}

/* edge-to-edge grid of squares */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
}

.tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111;
    color: var(--white);
    text-decoration: none;
}

.tile-media {
    position: absolute;
    inset: 0;
}

.tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(.2, .7, .2, 1), filter 0.5s ease;
}

a.tile:hover .tile-media img,
a.tile:focus-visible .tile-media img {
    transform: scale(1.06);
}

.tile:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: -2px;
}

/* normal tile: text sits over the photo */
.tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(16px, 2vw, 26px);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 75%);
    transition: background-color 0.4s ease;
}

a.tile:hover .tile-overlay,
a.tile:focus-visible .tile-overlay {
    background-color: rgba(0, 0, 0, 0.35);
}

.tile-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 8px;
}

.tile-name {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.tile-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(243, 239, 232, 0.78);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-cta {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

a.tile:hover .tile-cta,
a.tile:focus-visible .tile-cta {
    opacity: 1;
    transform: none;
}

.tile.is-static .tile-cta {
    opacity: 0.6;
    transform: none;
}

/* first tile in a section: one rectangle the size of two squares.
   Name and description on the left, the photo on the right, blending
   into the white with a gradient instead of a hard edge. */
.tile--lead {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
    background: var(--white);
}

.tile--lead .tile-media {
    left: 34%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 22%, #000 55%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 22%, #000 55%);
}

.tile-panel {
    position: relative;
    z-index: 1;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(20px, 2.6vw, 38px);
    color: var(--black);
    overflow: hidden;
}

.tile-panel .tile-tag { color: var(--red); }

.tile-panel .tile-name {
    font-size: clamp(26px, 2.8vw, 42px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.tile-panel .tile-desc {
    color: rgba(0, 0, 0, 0.7);
    font-size: 15px;
    -webkit-line-clamp: 6;
}

.tile-meta {
    margin: 12px 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
}

.tile-panel .tile-cta {
    opacity: 1;
    transform: none;
    color: var(--red);
}

@media (max-width: 1100px) {
    .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile: every company tile is 20% smaller than on desktop (80% of the
   height, and 80% of the text size), so more companies fit on screen. */
@media (max-width: 760px) {
    .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile { aspect-ratio: 5 / 4; }               /* a square, 20% shorter */
    .tile--lead { aspect-ratio: 5 / 2; }         /* two squares, 20% shorter */
    .tile-overlay { padding: 13px; }
    .tile-tag { font-size: 9px; margin-bottom: 6px; }
    .tile-name { font-size: 16px; margin-bottom: 6px; }
    .tile-desc { -webkit-line-clamp: 2; font-size: 11px; }
    .tile-panel { padding: 16px; }
    .tile-panel .tile-name { font-size: 22px; margin-bottom: 10px; }
    .tile-panel .tile-desc { font-size: 12px; }
    .tile-meta { font-size: 10px; }
    .tile-cta { display: none; }
    .tile-panel .tile-cta { display: block; font-size: 11px; }
}

@media (max-width: 520px) {
    .tile-grid { grid-template-columns: 1fr; }
    .tile { aspect-ratio: 5 / 3; }               /* 4:3, 20% shorter */
    .tile-desc { -webkit-line-clamp: 3; }
    /* one column: name on top, photo below fading up into the white */
    .tile--lead {
        grid-column: span 1;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
    }
    .tile--lead .tile-panel { width: 100%; height: auto; padding-bottom: 0; }
    .tile--lead .tile-media {
        position: relative;
        left: 0;
        aspect-ratio: 5 / 3;                     /* 4:3, 20% shorter */
        margin-top: -24px;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 22%, #000 50%);
        mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 22%, #000 50%);
    }
    .dir-section-head { flex-wrap: wrap; gap: 6px 14px; }
}

/* ================= CONTACT (on the black page) ================= */
.contact-zone {
    /* the extra top space is where the fade happens, so the chat box and
       footer cards sit on solid black instead of showing a hard edge */
    padding: clamp(140px, 20vh, 220px) var(--gutter) 0;
    isolation: isolate;
    /* An eased fade from see-through to black over the first 280px:
       many small steps that start slow and speed up, so there's no
       visible band or edge where it begins or ends. */
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0.02) 28px,
        rgba(0, 0, 0, 0.06) 56px,
        rgba(0, 0, 0, 0.13) 84px,
        rgba(0, 0, 0, 0.23) 112px,
        rgba(0, 0, 0, 0.36) 140px,
        rgba(0, 0, 0, 0.51) 168px,
        rgba(0, 0, 0, 0.66) 196px,
        rgba(0, 0, 0, 0.80) 224px,
        rgba(0, 0, 0, 0.92) 252px,
        var(--black) 280px);
}

/* Once the contact section covers a quarter of the screen, a black layer
   fades in behind it (script.js sets --contact-fill from 0 to 1), so the
   content underneath is gradually hidden. Its top edge is faded too, so it
   never shows as a dark box. */
.contact-zone::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--black);
    opacity: var(--contact-fill, 0);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, rgba(0, 0, 0, 0.35) 80px, #000 220px);
    mask-image: linear-gradient(to bottom, transparent 0px, rgba(0, 0, 0, 0.35) 80px, #000 220px);
}

/* ================= CONTACT CTA + FOOTER ================= */

.contact-wrap {
    max-width: 1100px;
    margin: 0 auto 80px;
}

.contact-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;

    background: var(--black);
    color: var(--white);
    padding: 44px 48px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.contact-cta-text h2 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
}

.contact-cta-text p {
    margin: 0;
    max-width: 420px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(243, 239, 232, 0.75);
}

.contact-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: var(--pink);
    color: var(--black);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    padding: 14px 22px;
    border-radius: 999px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.contact-cta-btn:hover {
    background: var(--red);
    color: var(--white);
}

.contact-footer {
    margin-top: 24px;
    background: var(--black);
    color: var(--white);
    border-radius: var(--radius-lg);
    border-top: 3px solid var(--pink);
    padding: 44px 48px 26px;
}

/* Brand, companies, team, address: side by side as four columns on wide
   screens (each keeps its list top to bottom), two columns on tablets, and
   one stacked column on phones. */
.contact-footer-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr 1fr;
    gap: 32px;
}

/* thin divider on the left of each column after the first */
.contact-footer-inner > * + * {
    padding-left: 28px;
    border-left: 1px solid var(--line-dark);
}

@media (max-width: 1000px) {
    .contact-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
    .contact-footer-inner > * + * { padding-left: 0; border-left: 0; }
    .contact-footer-inner > :nth-child(n + 3) { padding-top: 24px; border-top: 1px solid var(--line-dark); }
}

@media (max-width: 650px) {
    .contact-footer-inner { grid-template-columns: 1fr; }
    .contact-footer-inner > * + * { padding-top: 24px; border-top: 1px solid var(--line-dark); }
}

.contact-footer-brand p { max-width: 520px; }

/* "Our companies": each section, then its companies */
.contact-company-group + .contact-company-group { margin-top: 16px; }
.contact-company-group h5 {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pink);
}
/* one company per line, top to bottom, like the team list */
.contact-company-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
}
.contact-company-group a {
    color: rgba(243, 239, 232, 0.85);
    text-decoration: none;
}
.contact-company-group a:hover { color: var(--pink); text-decoration: underline; }
.contact-company-group span { color: rgba(243, 239, 232, 0.6); }
.contact-company-empty { margin: 0; font-size: 13.5px; color: rgba(243, 239, 232, 0.6); }

.contact-footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--white);
    margin-bottom: 14px;
}

.contact-footer-logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.contact-footer-logo em {
    font-style: normal;
    color: var(--pink);
}

.contact-footer-brand p {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(243, 239, 232, 0.65);
    max-width: 260px;
}

.contact-footer-note {
    font-family: var(--font-mono);
    font-size: 12px !important;
    color: var(--pink) !important;
}

.contact-footer-col h4 {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--white);
}

.contact-footer-team .team-mini-grid {
    display: flex;
    flex-direction: column; /* one column, like the rest of contact */
    gap: 12px;
}

.contact-footer-team .team-mini-col {
    flex: 1;
    min-width: 0;
}

.contact-footer-team .team-mini {
    margin-bottom: 12px;
}

.contact-footer-team .team-mini:last-child {
    margin-bottom: 0;
}

.team-mini-name {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
}

.team-mini-name span {
    font-weight: 400;
    color: var(--pink);
    font-size: 12px;
}

.team-mini-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(243, 239, 232, 0.6);
}

.contact-footer-office p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(243, 239, 232, 0.7);
}

.contact-footer-office svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--pink);
}

.contact-footer-office a {
    display: inline;
    color: rgba(243, 239, 232, 0.85);
    text-decoration: underline;
}

.contact-footer-office a:hover {
    color: var(--pink);
}



@media (max-width: 650px) {
    .contact-cta {
        padding: 30px 24px;
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-cta-btn {
        width: 100%;
        justify-content: center;
    }
    .contact-footer {
        padding: 32px 22px 22px;
    }
    .contact-footer-inner {
        gap: 22px;
    }
}

/* ================= FOOTER (unchanged) ================= */

.site-footer {
    margin-top: 60px;
    padding: 28px 0 34px;
    background: var(--black);
    color: var(--white);
    text-align: center;
}

.site-footer .footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 40px;
}

.site-footer p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: rgba(243, 239, 232, 0.85);
}

.site-footer p a {
    color: var(--pink);
    text-decoration: none;
}

.site-footer p a:hover {
    color: var(--red);
    text-decoration: underline;
}

@media (max-width: 650px) {
    .site-footer {
        margin-top: 40px;
        padding: 22px 0 26px;
    }

    .site-footer .footer-inner {
        padding: 0 20px;
    }

    .site-footer p {
        font-size: 11px;
    }
}

/* the contact blocks sit on black now: lift them off the page */
.contact-cta,
.contact-footer {
    background: #0e0e0e;
    border: 1px solid var(--line-dark);
    box-shadow: none;
}

.contact-footer { border-top: 3px solid var(--pink); }

.site-footer { margin-top: 40px; border-top: 1px solid var(--line-dark); }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .contact-wrap, .feature-media img, .tile-media img {
        transition: none !important;
    }
    .intro-scroll i { animation: none; }
}