:root {
    --bg-color: #e2eeed;
    --ink-color: #1a252c;
    --paper-color: #fcfaf2;
    --accent-color: #d96b43;
    --sea-color: #4ea8a1;

    --border-stroke: 2px solid #1a252c;

    --font-main:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* =========================================================
   RESET
   ========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;

    background-color: var(--sea-color);

    font-family: var(--font-main);
    color: var(--ink-color);
}


/* =========================================================
   HERO
   ========================================================= */

.hero-section {
    position: relative;

    width: 100%;

    background-color: var(--sea-color);
}


/* =========================================================
   TOP OVERLAY
   ========================================================= */

.top-overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 20;

    pointer-events: none;

    background: transparent;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


.brand-bar {
    width: 100%;

    padding: 12px 24px 4px;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    pointer-events: auto;
}


.brand-identity {
    display: flex;

    align-items: center;

    justify-self: start;

    margin-top: 8px;
}


.brand-logo {
    height: 38px;
    width: auto;
    max-width: 220px;

    object-fit: contain;

    display: block;
}


.brand-tagline {
    font-size: 0.95rem;

    font-weight: 700;
    font-style: italic;

    color: var(--ink-color);

    justify-self: end;

    align-self: center;

    text-align: right;

    margin: 0;

    text-shadow:
        0 1px 3px rgba(252, 250, 242, 0.45);
}


.interaction-hint {
    padding: 2px 12px 10px;

    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 0.02em;

    color: var(--ink-color);

    text-align: center;

    justify-self: center;

    align-self: center;

    margin: 0;

    pointer-events: auto;

    text-shadow:
        0 1px 3px rgba(252, 250, 242, 0.45);
}


/* =========================================================
   ILLUSTRATION CANVAS
   ========================================================= */

.fullscreen-canvas {
    width: 100%;

    display: flex;

    align-items: flex-start;
    justify-content: center;

    position: relative;
}


.illustration-wrapper {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;
}


.master-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   HOTSPOTS
   ========================================================= */

.hotspot {
    position: absolute;

    background: rgba(255, 255, 255, 0.01);

    border: 2px dashed transparent;

    cursor: pointer;

    border-radius: 50%;

    outline: none;

    transition:
        all 0.2s ease;

    z-index: 5;
}


.hotspot:hover,
.hotspot:focus-visible {
    border-color: rgba(26, 37, 44, 0.6);

    background: rgba(255, 255, 255, 0.15);
}


.hotspot-indicator {
    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    width: 14px;
    height: 14px;

    background-color: var(--accent-color);

    border: 2px solid var(--ink-color);

    border-radius: 50%;

    opacity: 0.5;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.hotspot:hover .hotspot-indicator,
.hotspot:focus-visible .hotspot-indicator {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1.4);
}


.hotspot-indicator.pulse {
    opacity: 0.9;

    animation:
        gentle-pulse 2s infinite;
}


@keyframes gentle-pulse {

    0% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.3);
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =========================================================
   SPEECH BUBBLE
   ========================================================= */

.speech-bubble {
    position: absolute;

    background-color: var(--paper-color);

    color: var(--ink-color);

    border: var(--border-stroke);

    padding: 14px 18px;

    border-radius: 12px;

    box-shadow:
        4px 4px 0 var(--ink-color);

    width: min(280px, calc(100vw - 40px));

    max-width: 280px;

    pointer-events: none;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 0.15s ease,
        transform 0.15s ease;

    z-index: 30;
}


.speech-bubble.active {
    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(0);
}


.bubble-title {
    font-weight: 800;

    font-size: 0.85rem;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    margin-bottom: 6px;

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


.bubble-body {
    font-size: 0.9rem;

    line-height: 1.35;
}


.bubble-emphasis {
    font-size: 1rem;

    font-weight: 700;

    line-height: 1.3;
}


.bubble-footer {
    margin-top: 10px;

    font-size: 0.85rem;
}


.bubble-footer a {
    color: var(--ink-color);

    font-weight: 700;

    text-decoration: underline;
}


/* =========================================================
   SCROLL CUE
   ========================================================= */

.scroll-cue {
    position: absolute;

    left: 50%;
    bottom: 18px;

    transform:
        translateX(-50%);

    z-index: 25;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;

    color: var(--ink-color);

    text-decoration: none;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    opacity: 0.75;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.scroll-cue:hover {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(-3px);
}


.scroll-arrow {
    font-size: 1.3rem;

    line-height: 1;

    animation:
        scroll-bounce 1.8s infinite;
}


@keyframes scroll-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}


/* =========================================================
   PITCH SECTION
   ========================================================= */

.pitch-section {
    width: 100%;

    background-color: var(--paper-color);

    border-top:
        var(--border-stroke);
}


.pitch-container {
    width: min(1100px, calc(100% - 40px));

    margin: 0 auto;

    padding:
        100px 0 70px;
}


.pitch-intro {
    max-width: 780px;

    margin-bottom: 70px;
}


.pitch-kicker {
    display: inline-block;

    margin-bottom: 18px;

    padding: 5px 9px;

    background-color: var(--accent-color);

    color: white;

    border-radius: 4px;

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.07em;
}


.pitch-intro h1 {
    font-size: clamp(2.8rem, 6vw, 5.5rem);

    line-height: 0.95;

    letter-spacing: -0.05em;

    margin-bottom: 28px;
}


.pitch-lead {
    max-width: 720px;

    font-size: clamp(1.1rem, 2vw, 1.4rem);

    line-height: 1.55;

    font-weight: 500;
}


/* Grid */

.pitch-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0;

    border-top:
        2px solid var(--ink-color);

    border-left:
        2px solid var(--ink-color);
}


.pitch-block {
    padding: 32px;

    border-right:
        2px solid var(--ink-color);

    border-bottom:
        2px solid var(--ink-color);
}


.pitch-block h2 {
    margin-bottom: 18px;

    color: var(--accent-color);

    font-size: 0.9rem;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.pitch-block p {
    margin-bottom: 15px;

    font-size: 1rem;

    line-height: 1.6;
}


.pitch-block p:last-child {
    margin-bottom: 0;
}


.quote-box {
    margin: 0 0 18px;

    padding:
        10px 0 10px 16px;

    border-left:
        4px solid var(--ink-color);

    font-size: 1.2rem;

    line-height: 1.4;

    font-style: italic;
}


.emphasis-line {
    font-size: 1.5rem !important;

    font-weight: 800;

    line-height: 1.2 !important;
}


.editorial-list {
    margin:
        12px 0 0 20px;

    font-size: 0.95rem;

    line-height: 1.6;
}


.editorial-list li {
    margin-bottom: 7px;
}


.micro-note {
    margin-top: 20px;

    font-size: 0.85rem !important;

    opacity: 0.8;
}


/* Founder block */

.founder-block {
    background-color: var(--bg-color);
}


.founder-link-wrapper {
    margin-top: 25px;
}


.founder-btn {
    display: inline-block;

    background-color: var(--ink-color);

    color: var(--paper-color);

    padding: 12px 20px;

    text-decoration: none;

    font-weight: 700;

    border-radius: 6px;

    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}


.founder-btn:hover {
    transform:
        translateY(-2px);

    box-shadow:
        3px 3px 0 var(--accent-color);
}


/* Ending */

.pitch-ending {
    padding-top: 70px;

    text-align: center;
}


.pitch-ending p:first-child {
    font-size: 1.5rem;

    margin-bottom: 5px;
}


.pitch-ending p:nth-child(2) {
    margin-bottom: 30px;

    font-style: italic;

    font-weight: 700;
}


.back-top {
    color: var(--ink-color);

    font-size: 0.8rem;

    font-weight: 800;

    letter-spacing: 0.05em;

    text-decoration: underline;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal-overlay {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    background-color:
        rgba(26, 37, 44, 0.65);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    z-index: 100;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.2s ease;
}


.modal-overlay.open {
    opacity: 1;

    pointer-events: auto;
}


.editorial-panel {
    background-color: var(--paper-color);

    border:
        var(--border-stroke);

    border-radius: 8px;

    box-shadow:
        8px 8px 0 var(--ink-color);

    width: 100%;

    max-width: 620px;

    max-height: 85vh;

    overflow-y: auto;

    padding: 32px;

    position: relative;
}


.modal-close {
    position: absolute;

    top: 16px;
    right: 16px;

    background: none;

    border: none;

    font-size: 1.8rem;

    cursor: pointer;

    line-height: 1;

    color: var(--ink-color);
}


.panel-header {
    margin-bottom: 20px;

    border-bottom:
        2px dashed var(--ink-color);

    padding-bottom: 12px;
}


.badge {
    background-color: var(--accent-color);

    color: #fff;

    font-weight: 800;

    font-size: 0.75rem;

    padding: 4px 8px;

    border-radius: 4px;

    letter-spacing: 0.05em;
}


.panel-header h2 {
    margin-top: 10px;

    font-size: 1.5rem;
}


.panel-content h3 {
    font-size: 0.95rem;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    margin-top: 20px;
    margin-bottom: 6px;

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


.panel-content p {
    font-size: 0.95rem;

    line-height: 1.5;

    margin-bottom: 12px;
}


.panel-content .quote-box {
    background:
        rgba(0, 0, 0, 0.03);

    padding-top: 8px;
    padding-bottom: 8px;
}


.panel-footer {
    margin-top: 28px;

    padding-top: 16px;

    border-top:
        2px dashed var(--ink-color);

    text-align: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

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

}


@media (max-width: 640px) {

    /*
       MOBILE HEADER

       On small screens the header is taken out of the
       illustration overlay completely.

       This prevents the logo, instruction and tagline
       from being painted over the artwork.
    */

    .top-overlay {
        position: relative;

        top: auto;
        left: auto;

        width: 100%;

        background-color: var(--sea-color);

        pointer-events: auto;
    }


    .brand-bar {
        width: 100%;

        padding:
            14px 16px 12px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 8px;
    }


    .brand-identity {
        width: 100%;

        margin-top: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        order: 1;
    }


    .brand-logo {
        height: 34px;

        max-width: 200px;
    }


    .interaction-hint {
        width: 100%;

        padding: 0 8px;

        font-size: 0.72rem;

        line-height: 1.3;

        text-align: center;

        order: 2;

        text-shadow: none;
    }


    .brand-tagline {
        width: 100%;

        font-size: 0.78rem;

        line-height: 1.3;

        text-align: center;

        justify-self: auto;

        order: 3;

        text-shadow: none;
    }


    /*
       The illustration remains a clean 16:9 image
       underneath the mobile header.
    */

    .illustration-wrapper {
        width: 100%;

        aspect-ratio: 16 / 9;
    }


    .scroll-cue {
        bottom: 10px;

        font-size: 0.6rem;
    }


    .pitch-container {
        width:
            calc(100% - 28px);

        padding:
            65px 0 50px;
    }


    .pitch-intro {
        margin-bottom: 45px;
    }


    .pitch-intro h1 {
        font-size:
            clamp(2.6rem, 14vw, 4rem);
    }


    .pitch-block {
        padding: 24px 20px;
    }


    .editorial-panel {
        padding: 20px;

        max-height: 90vh;
    }


    .speech-bubble {
        max-width:
            calc(100vw - 30px);
    }

}