/* Home page — loaded after styles.css and site.css.
 *
 * The default rules below are the static layout: what phones, reduced-motion
 * visitors and visitors without JS get. The scroll-driven versions of the dial
 * and the five cards are all inside one block at the end, gated on a wide
 * screen, motion allowed and html.js (set by dock.js).
 */

body.home {
    background: var(--bg);
    color: var(--ink);
}

.h-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

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

.h-eyebrow {
    margin: 0 0 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-text);
}

.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 999px;
    background: var(--accent-text);
    color: #fff;
    font: 600 1rem 'Poppins', sans-serif;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-pill:hover {
    background: #A51A1A;
    transform: translateY(-2px);
}

.btn-pill:focus-visible,
.feature-card:focus-visible,
.motion-toggle:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 4px;
}

.mark canvas,
.mark .mark-static {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Hero --- */
.h-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 64px 0 48px;
}

.h-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: center;
    width: 100%;
}

.h-hero-title {
    margin: 0;
    font-size: clamp(3.5rem, 8.2vw, 8.5rem);
    color: var(--ink);
}

.h-hero-mark {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1;
    margin-bottom: 8px;
}

.h-hero-desc {
    max-width: 420px;
    margin: 0 0 28px;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--muted);
}

/* --- Approach dial (static layout) --- */
.h-dial {
    padding: 96px 0;
}

.h-dial-stage {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: center;
}

.h-dial-title {
    margin: 0 0 12px;
    font-size: clamp(3rem, 7vw, 6.5rem);
}

.h-dial-sub {
    margin: 0 0 48px;
    color: var(--muted);
    font-size: 1.125rem;
}

.h-dial-mark {
    display: none;
}

.h-dial-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.dial-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    color: var(--accent-text);
}

.dial-icon svg {
    width: 28px;
    height: 28px;
}

.dial-marker {
    display: none;
}

.dial-num {
    display: block;
    margin-bottom: 8px;
    font: 600 0.875rem 'Poppins', sans-serif;
    color: var(--accent-text);
}

.dial-item h3 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 3.4vw, 3rem);
    color: var(--ink);
}

.dial-item p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

/* --- Services: five cards (static layout) --- */
.h-explode {
    padding: 96px 0;
}

.h-explode-stage {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

.h-explode-title {
    max-width: 16ch;
    margin: 0 auto 48px;
    font-size: clamp(2.75rem, 6vw, 5.5rem);
    text-align: center;
}

.explode-lines {
    display: none;
}

.h-explode-field {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.explode-core {
    grid-column: 1 / -1;
    padding: 36px;
    border-radius: 20px;
    background: var(--accent);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(255, 49, 48, 0.25);
}

.explode-core-label {
    margin: 0 0 12px;
    font: 600 0.8125rem 'Poppins', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.explode-core-text {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: #fff;
}

.explode-card {
    padding: 28px;
    border-radius: 20px;
    background: var(--ink);
    color: #fff;
}

.explode-card h3 {
    margin: 0 0 12px;
    font: 700 1.125rem 'Poppins', sans-serif;
    color: #fff;
}

.explode-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    font-size: 0.9375rem;
}

.explode-caption {
    margin: 40px 0 0;
    text-align: center;
    font: italic 600 0.9375rem 'Poppins', sans-serif;
    color: var(--muted);
}

/* --- Featured (red, between two waves) --- */
.h-featured {
    position: relative;
    padding: 24px 0 48px;
    background: var(--accent);
}

.h-featured-title {
    margin: 0 0 64px;
    padding-top: 24px;
    font-size: clamp(3.5rem, 9vw, 8rem);
    color: #fff;
    text-align: center;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 64px;
}

.feature-card {
    display: block;
    color: var(--ink);
    text-decoration: none;
    border-radius: 20px;
}

/* The Consulting card leads across both columns, but on the same two
   columns and gap as the grid, so its video is exactly the size of the four
   below and every edge lines up. */
.feature-card-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 64px;
    align-items: center;
}

.feature-card-wide h3 {
    margin-top: 0;
    font-size: clamp(2.5rem, 4.5vw, 4rem);
}

/* --- Waves into and out of the red section --- */
.h-wave {
    line-height: 0;
    background: var(--bg);
}

.h-wave svg {
    display: block;
    width: 100%;
    height: clamp(60px, 9vw, 130px);
}

.h-wave-front {
    fill: var(--accent);
}

.h-wave-back {
    fill: var(--peach);
}

/* --- Contact: wider and shorter --- */
/* The form markup is byte-identical to main (tests/home.test.js), so the new
   layout is CSS only: the intro sits above a full-width form whose fields run
   in two columns. */
body.home .contact-container {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1120px;
}

body.home .contact-content {
    max-width: 720px;
}

body.home .contact-content h2 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.95;
    font-size: clamp(2.75rem, 5vw, 4.5rem);
}

/* Carlo's mockup: details stacked on the left, a tall message box on the
   right with the captcha and Send under it. The left column follows the DOM
   order (name, email, company, interest) so keyboard focus moves top to
   bottom down the left, then down the right. */
body.home .contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "name     message"
        "email    message"
        "company  message"
        "interest alert"
        "interest captcha"
        "interest submit";
    column-gap: 40px;
    align-items: start;
    padding: 44px 48px;
}

/* The name/email row wrapper steps aside so its two fields can sit in the
   form grid themselves. */
body.home .contact-form > .form-row {
    display: contents;
}

body.home .contact-form .form-group:has(#name) { grid-area: name; }
body.home .contact-form .form-group:has(#email) { grid-area: email; }
body.home .contact-form > .form-group:has(#company) { grid-area: company; }
body.home .contact-form > .form-group:has(.selector-chips) { grid-area: interest; }

/* The message box fills the full height of the three fields beside it. */
body.home .contact-form > .form-group:has(#message) {
    grid-area: message;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

/* flex-basis auto (not 0) so dragging the resize handle can still grow it. */
body.home .contact-form #message {
    flex: 1 0 auto;
    min-height: 180px;
    resize: vertical;
}

body.home .contact-form > .h-captcha {
    grid-area: captcha;
    justify-self: end;
}

body.home .contact-form > button[type="submit"] {
    grid-area: submit;
    align-self: end;
}

body.home .contact-form > .form-alert {
    grid-area: alert;
}

.feature-video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 18px;
    background: #B81C1C;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    transition: transform 0.4s ease;
}

.feature-card:hover .feature-video {
    transform: scale(1.02);
}

.feature-card h3 {
    margin: 22px 0 8px;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    color: #fff;
}

/* Dark text on brand red is 5.4:1; white body text would only be 3.7:1. */
.feature-card p {
    margin: 0;
    max-width: 44ch;
    color: var(--ink);
    line-height: 1.55;
}

/* Pause motion: one in the hero (next to where the motion starts) and one in
   the red section; home.js keeps them in sync. */
/* Small on purpose (Carlo, 2026-09-26), but still at least 24px tall, the
   WCAG 2.5.8 minimum target size. */
.motion-toggle {
    display: inline-block;
    min-height: 24px;
    margin: 12px 0 0 10px;
    padding: 4px 11px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: 600 0.6875rem 'Poppins', sans-serif;
    line-height: 1.3;
    cursor: pointer;
    vertical-align: middle;
}

.h-featured .motion-toggle {
    display: block;
    margin: 40px auto 0;
}

.motion-toggle[hidden] {
    display: none;
}

/* --- Why Neni --- */
.h-about {
    padding: 120px 0;
}

.h-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 64px;
    align-items: center;
}

.h-about-title {
    margin: 0 0 24px;
    font-size: clamp(2.5rem, 4.2vw, 4.25rem);
}

.h-about-text p {
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.h-stats {
    display: grid;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.h-stats li {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

.h-stat-num {
    min-width: 2.2em;
    font-size: clamp(3.5rem, 6.5vw, 6.5rem);
    color: var(--accent);
}

.h-stat-label {
    font: 600 1rem 'Poppins', sans-serif;
    color: var(--ink);
}

/* --- Phones and small tablets --- */
@media (max-width: 899px) {
    .h-hero {
        min-height: 0;
        padding-top: 40px;
    }

    .h-hero-grid,
    .h-about-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .h-hero-mark {
        max-width: 300px;
        margin: 0 auto 8px;
    }

    .h-dial-items {
        grid-template-columns: 1fr;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .feature-card-wide {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .feature-card-wide h3 {
        margin-top: 22px;
    }

    body.home .contact-form {
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "email"
            "company"
            "interest"
            "message"
            "alert"
            "captcha"
            "submit";
        padding: 28px 22px;
    }

    body.home .contact-form > .h-captcha {
        justify-self: start;
    }

    body.home .contact-form #message {
        min-height: 140px;
    }
}

@media (max-width: 560px) {
    .h-wrap,
    .h-dial-stage,
    .h-explode-stage {
        padding: 0 20px;
    }

    .h-explode-field {
        grid-template-columns: 1fr;
    }
}

/* --- Scroll-driven layer: wide screens, motion allowed, JS on --- */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    /* Dial: the section is three screens tall and its stage sticks, so
       scrolling turns the mark and steps through the three items. */
    html.js .h-dial {
        height: 300vh;
        padding: 0;
    }

    /* padding-bottom keeps the stage clear of the fixed dock (60px tall,
       20px from the bottom, plus a 20px gap). */
    /* --ring sizes the circle, the travelling marker and the side items. */
    html.js .h-dial-stage {
        --ring: min(34vh, 420px);
        position: sticky;
        top: 0;
        box-sizing: border-box;
        height: 100vh;
        padding-top: 24px;
        padding-bottom: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    html.js .h-dial-title {
        font-size: clamp(2.75rem, 5.5vw, 5.5rem);
    }

    html.js .h-dial-sub {
        margin-bottom: 28px;
    }

    html.js .h-dial-ring {
        position: relative;
        width: var(--ring);
        height: var(--ring);
        /* Deliver hangs below the ring, outside the flow: reserve its height
           so the stage centres it too and it stays clear of the dock. */
        margin: 0 auto 196px;
        border: 1px solid rgba(255, 49, 48, 0.4);
        border-radius: 50%;
    }

    html.js .h-dial-mark {
        display: block;
        position: absolute;
        inset: 18%;
    }

    html.js .h-dial-items {
        display: block;
    }

    /* Side items fill the space beside the ring (ring width + 40px gap + a
       24px page margin each side), up to 280px, so nothing runs off screen
       on 900-1000px windows. */
    html.js .dial-item {
        position: absolute;
        width: min(280px, calc((100vw - var(--ring)) / 2 - 64px));
        transition: color 0.35s ease;
    }

    /* Inactive steps keep full-contrast text (no opacity fade). The active
       step lights up: its icon fills red and grows, a red rule draws under
       the heading, and the paragraph eases up into place. */
    html.js .dial-item h3 {
        position: relative;
        color: var(--muted);
        transition: color 0.5s ease;
    }

    html.js .dial-item h3::after {
        content: '';
        display: block;
        width: 0;
        height: 3px;
        margin-top: 10px;
        background: var(--accent);
        border-radius: 2px;
        transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    }

    html.js .dial-item[data-step="0"] h3::after { margin-left: auto; }
    html.js .dial-item[data-step="2"] h3::after { margin-left: auto; margin-right: auto; }

    html.js .dial-item.is-active h3 {
        color: var(--ink);
    }

    html.js .dial-item.is-active h3::after {
        width: 56px;
    }

    html.js .dial-item .dial-num {
        color: var(--muted);
        transition: color 0.5s ease;
    }

    html.js .dial-item.is-active .dial-num {
        color: var(--accent-text);
    }

    html.js .dial-icon {
        transform: scale(0.86);
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.5s ease, color 0.5s ease;
    }

    html.js .dial-item.is-active .dial-icon {
        transform: scale(1.08);
        background: var(--accent-text);
        border-color: var(--accent-text);
        color: #fff;
        box-shadow: 0 10px 24px rgba(198, 32, 32, 0.3);
    }

    html.js .dial-item p {
        font-size: 0.9375rem;
        transform: translateY(8px);
        transition: transform 0.6s ease, color 0.5s ease;
    }

    html.js .dial-item.is-active p {
        transform: translateY(0);
        color: var(--ink);
    }

    /* A red dot travels round the ring to the active step. home.js sets
       --dial-angle on the ring: 180deg (left), 360deg (right, via the top),
       450deg (bottom). */
    html.js .dial-marker {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 18px;
        height: 18px;
        margin: -9px 0 0 -9px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 0 6px rgba(255, 49, 48, 0.18), 0 0 24px rgba(255, 49, 48, 0.55);
        transform: rotate(var(--dial-angle, 180deg)) translateX(calc(var(--ring) / 2));
        transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
    }

    /* Discover on the left, Design on the right, Deliver below: nothing sits
       above the ring, where it would collide with the heading. */
    html.js .dial-item[data-step="0"] {
        right: calc(100% + 40px);
        top: 50%;
        transform: translateY(-50%);
        text-align: right;
    }

    html.js .dial-item[data-step="1"] {
        left: calc(100% + 40px);
        top: 50%;
        transform: translateY(-50%);
    }

    html.js .dial-item[data-step="2"] {
        left: 50%;
        top: calc(100% + 20px);
        width: 520px;
        transform: translateX(-50%);
        text-align: center;
    }

    /* Five cards: the four service cards start stacked behind the core and
       travel to the corners as --p (0 to 1, set by home.js) rises. */
    html.js .h-explode {
        height: 200vh;
        padding: 0;
    }

    /* Lines from the culture core to each card. home.js sets the end points
       from the live card positions and draws them in with the dash offset;
       once the cards have arrived, .is-connected makes the dashes flow. */
    html.js .explode-lines {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        z-index: 0;
        pointer-events: none;
    }

    html.js .explode-line {
        stroke: var(--accent);
        stroke-width: 2;
        stroke-linecap: round;
    }

    html.js .h-explode-field.is-connected .explode-line {
        stroke-dasharray: 2 10;
        stroke-dashoffset: 0;
        animation: explode-flow 0.9s linear infinite;
    }

    @keyframes explode-flow {
        to { stroke-dashoffset: -12; }
    }

    html.js .h-explode-stage {
        position: sticky;
        top: 0;
        box-sizing: border-box;
        height: 100vh;
        padding-top: 24px;
        padding-bottom: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    html.js .h-explode-title {
        margin-bottom: 24px;
        font-size: clamp(2.5rem, 4.6vw, 4.5rem);
    }

    html.js .h-explode-field {
        --p: 0;
        position: relative;
        display: block;
        height: 52vh;
    }

    html.js .explode-core,
    html.js .explode-card {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(30vw, 400px);
    }

    html.js .explode-core {
        z-index: 2;
        transform: translate(-50%, -50%);
    }

    html.js .explode-card {
        z-index: 1;
        width: min(26vw, 340px);
        opacity: calc(0.2 + var(--p) * 0.8);
        transform:
            translate(-50%, -50%)
            translate(calc(var(--p) * var(--dx)), calc(var(--p) * var(--dy)))
            rotate(calc((1 - var(--p)) * var(--rot)))
            scale(calc(0.85 + var(--p) * 0.15));
    }

    html.js .explode-card[data-corner="tl"] { --dx: -30vw; --dy: -17vh; --rot: -8deg; }
    html.js .explode-card[data-corner="tr"] { --dx: 30vw; --dy: -17vh; --rot: 8deg; }
    html.js .explode-card[data-corner="bl"] { --dx: -30vw; --dy: 17vh; --rot: 6deg; }
    html.js .explode-card[data-corner="br"] { --dx: 30vw; --dy: 17vh; --rot: -6deg; }

    html.js .explode-caption {
        margin-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-pill,
    .feature-video {
        transition: none;
    }

    .btn-pill:hover,
    .feature-card:hover .feature-video {
        transform: none;
    }
}

/* --- Consulting page (consulting.html) --- */
.c-hero {
    padding: 72px 0 64px;
}

.c-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center;
}

.c-hero-title {
    margin: 0 0 20px;
    font-size: clamp(3rem, 7vw, 7rem);
}

.c-hero-desc {
    max-width: 480px;
    margin: 0 0 28px;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--muted);
}

.c-services {
    padding: 32px 0 64px;
}

.c-service {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 40px;
    padding: 48px 0;
    border-top: 1px solid rgba(17, 17, 17, 0.12);
}

.c-num {
    font-size: clamp(4rem, 9vw, 8rem);
    line-height: 0.9;
    color: var(--accent);
}

.c-service h2 {
    margin: 0 0 16px;
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
}

.c-lead {
    max-width: 640px;
    margin: 0 0 20px;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink);
}

.c-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.c-points li {
    padding: 16px 18px;
    border-left: 3px solid var(--accent);
    background: #fff;
    border-radius: 0 12px 12px 0;
    color: var(--muted);
    line-height: 1.5;
}

.c-next {
    padding: 72px 0 96px;
    background: var(--ink);
    color: #fff;
}

.c-next-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
}

.c-next-title {
    margin: 0 0 12px;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    color: #fff;
}

.c-next p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.c-link {
    display: inline-flex;
    gap: 8px;
    margin-top: 8px;
    font: 600 1rem 'Poppins', sans-serif;
    color: var(--peach);
    text-decoration: none;
    border-bottom: 2px solid var(--peach);
}

.c-link:focus-visible {
    outline: 3px solid var(--peach);
    outline-offset: 4px;
}

/* Proof, signs, stages, regulation and FAQ blocks (2026-09-27 page growth). */
.c-proof,
.c-block {
    padding: 56px 0;
    border-top: 1px solid rgba(17, 17, 17, 0.12);
}

.c-block-title {
    margin: 0 0 16px;
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
}

.c-proof a,
.c-block a,
.c-service a {
    color: var(--accent-text);
}

.c-points h3 {
    margin: 0 0 6px;
    font: 600 1.0625rem/1.3 'Poppins', sans-serif;
    color: var(--ink);
}

.c-points p {
    margin: 0;
}

.c-proof-points strong {
    font-family: 'Poppins', sans-serif;
    color: var(--ink);
}

.c-when {
    max-width: 760px;
    margin: 20px 0 0;
    line-height: 1.6;
    color: var(--muted);
}

.c-block .faq-grid {
    margin: 24px 0 0;
}

@media (max-width: 899px) {
    .c-hero-grid,
    .c-next-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .c-service {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .c-points {
        grid-template-columns: 1fr;
    }
}