/* ============================================================
   FOLD IT GROUP — Minimal / left-aligned layer
   Loaded after styles.css. Same palette, quieter surface,
   everything anchored to the left rail instead of centred.
   ============================================================ */

:root {
    /* A narrower measure than the 1400px container, so content
       sits on a left rail with open space to the right. */
    --measure: 780px;
    --rail-pad: 40px;
}

/* ---------- Left rail ---------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--rail-pad);
}

/* Every section header reads left, including the ones marked .center */
.section-header,
.section-header.center {
    text-align: left;
    max-width: var(--measure);
    margin-bottom: 72px;
}

.section-header.center .section-label::after { margin-left: 0; }

.section-header .section-subtitle,
.section-header.center .section-subtitle,
.cta-section .section-subtitle {
    margin-left: 0;
    margin-right: 0;
    max-width: 620px;
}

/* ---------- Hero ---------- */
.hero-content {
    max-width: var(--measure);
    margin-left: 0;
    text-align: left;
}

.hero-cta { justify-content: flex-start; }

/* The badge and the scroll indicator are gone from the markup;
   these rules keep any stray instance from reappearing. */
.hero .hero-badge,
.hero-scroll { display: none; }

/* ---------- Quieter background ---------- */
/* The scanline sweep and the drifting grid glow are removed:
   the hero keeps its gradient, without the moving parts. */
.hero-grid::after { display: none; content: none; }
.hero-grid {
    opacity: 0.55;
    background-size: 72px 72px;
}

.hero-gradient { opacity: 0.7; }

/* Film grain dialled back rather than removed */
body::after { opacity: 0.35; }

/* ---------- CTA sections read left too ---------- */
.cta-section {
    text-align: left;
    padding: 120px 0;
}

.cta-section::before {
    left: 0;
    transform: none;
    width: 620px;
    background: radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
}

.cta-section .hero-cta { justify-content: flex-start; }
.cta-section .section-title { max-width: var(--measure); }

/* ---------- Page heroes (subpages) ---------- */
.page-hero-content { text-align: left; max-width: var(--measure); }
.page-hero-cta { justify-content: flex-start; }

/* ---------- Flatter cards ---------- */
.company-card,
.feature-card,
.project-card,
.concept-card,
.channel-card,
.stat-card {
    box-shadow: none;
}

.company-card::before,
.project-card::before,
.feature-card::before {
    display: none;
}

/* ---------- Section rhythm ---------- */
.section { padding: 112px 0; }

/* ---------- Homepage concept + project grids keep their own alignment ---------- */
.projects-grid,
.concepts-grid,
.features-grid,
.companies-grid { margin-left: 0; }

/* Centred utility for the few places that still need it */
.stack-center { display: flex; justify-content: flex-start; }

@media (max-width: 1024px) {
    :root { --measure: 100%; --rail-pad: 28px; }
    .section { padding: 88px 0; }
    .cta-section { padding: 88px 0; }
}

@media (max-width: 640px) {
    :root { --rail-pad: 20px; }
    .section-header, .section-header.center { margin-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-grid, .hero-gradient { animation: none !important; }
}

/* ============================================================
   Contact form
   ============================================================ */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

.contact-form { max-width: 680px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 22px;
}

.form-field label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.form-field label .opt {
    color: var(--dim);
    letter-spacing: 0.08em;
}

.form-field input,
.form-field select,
.form-field textarea {
    font-family: var(--font-primary);
    font-size: 15px;
    color: var(--white);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    width: 100%;
    transition: border-color var(--t-fast), background var(--t-fast);
    -webkit-appearance: none;
    appearance: none;
}

.form-field textarea { resize: vertical; min-height: 130px; line-height: 1.65; }

.form-field select {
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 44px;
    cursor: pointer;
}

.form-field select option { background: var(--surface); color: var(--white); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--line-strong);
    background: var(--card-hover);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
    outline: 2px solid var(--silver);
    outline-offset: 2px;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    border-color: #8a4a4a;
}

.form-field.has-error label { color: #c98787; }

/* honeypot — off-screen, never shown, never announced */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#cf-submit { margin-top: 6px; }
#cf-submit:disabled { opacity: 0.55; cursor: wait; }

.form-status {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.6;
    min-height: 1.2em;
    color: var(--muted);
}

.form-status.is-success { color: var(--white); }
.form-status.is-error { color: #c98787; }

.form-note {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--dim);
}

.contact-channels-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 8px;
}

.channels-intro {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 44px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   Mobile navigation — fix
   .nav carries backdrop-filter, which makes it the containing
   block for position:fixed descendants. That collapsed the
   menu panel to the 72px nav strip and let the links spill
   over the page. Dropping the blur on small screens restores
   the viewport as the containing block.
   ============================================================ */
@media (max-width: 768px) {
    .nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(5, 5, 6, 0.94);
    }
    .nav.scrolled { background: var(--bg); }

    .nav-menu {
        position: fixed;
        inset: var(--nav-h) 0 0 0;
        width: 100%;
        height: auto;
        background: var(--bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 32px);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--t-med), visibility 0s linear 0.45s;
    }

    .nav-menu.active {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--t-med), visibility 0s;
    }

    /* Full-width rows: a comfortable tap target, left-aligned like the rest */
    .nav-menu .nav-link {
        font-size: 13px;
        letter-spacing: 2.5px;
        color: var(--silver);
        padding: 20px 4px;
        border-bottom: 1px solid var(--line);
        text-align: left;
        width: 100%;
        min-height: 56px;
        display: flex;
        align-items: center;
    }

    .nav-menu .nav-link::after { display: none; }
    .nav-menu .nav-link:last-child { border-bottom: none; }
    .nav-menu .nav-link:active { color: var(--white); }

    .nav-toggle {
        display: flex;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   Concept cards as full-card links
   Previously an absolutely-positioned ::after overlay carried
   the tap target, which is fragile on touch. The card itself
   is now the anchor.
   ============================================================ */
a.concept-card,
a.concept-card:hover {
    color: inherit;
    text-decoration: none;
}

a.concept-card {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

a.concept-card:active { background: var(--card-hover); }

a.concept-card:focus-visible {
    outline: 2px solid var(--silver);
    outline-offset: -2px;
}

a.concept-card .project-link { transition: color var(--t-fast); }
a.concept-card:hover .project-link { color: var(--white); }
a.concept-card:hover .project-link svg { transform: translateX(5px); }

/* Comfortable tap targets throughout on touch devices */
@media (max-width: 768px) {
    .concept-card { min-height: 0; padding: 30px 24px 26px; }
    .concept-name { font-size: 26px; }
    .lang-switch button { min-height: 40px; min-width: 44px; }
    .back-link { min-height: 44px; display: inline-flex; align-items: center; }
}