/* ================================
   BLOOM - PUBLIC SITE STYLES
   ================================

   Styles for the public landing page only.
   Loaded alongside main.css by public/base.html.

   TABLE OF CONTENTS
   1. Hero Section
   2. Ticker
   3. Process Components
   4. Support & Methods
   5. Team
   6. Modals & Forms
   7. Case Pages
   8. Mobile Responsive Styles (public)
   ================================ */


/* ================================
   1. HERO SECTION
   ================================ */

.hero {
    padding: 180px 5% 100px;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.pre-title {
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 30px;
    max-width: 900px;
}

.hero h1 span {
    color: var(--accent-color);
}

.hero p {
    font-size: 1.4rem;
    max-width: 700px;
    color: var(--text-muted);
    margin-bottom: 50px;
    font-weight: 300;
}

/* The gold pill lives in main.css, which every page loads — see the
   "Gold pill" block there. It used to be defined here as well, with a
   different hover from its studio twin. */


/* ================================
   2. TICKER
   ================================ */

.ticker-wrapper {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: 80px;
    overflow: hidden;
}

.ticker-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scroll 40s linear infinite;
}

.ticker-card {
    background: rgba(0, 80, 80, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 20px 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 320px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, border-color 0.3s;
}

.ticker-card:hover {
    border-color: var(--accent-color);
    background: rgba(0, 90, 90, 0.8);
}

.ticker-icon {
    background: rgba(252, 183, 96, 0.1);
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.ticker-content h5 {
    font-size: 0.95rem;
    color: var(--accent-color);
    margin-bottom: 2px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.ticker-content p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.3;
}

.mini-chart {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 15px;
    width: 20px;
    margin-left: auto;
    opacity: 0.5;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 15px));
    }
}


/* ================================
   3. PROCESS COMPONENTS
   ================================ */

.process-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    max-width: 900px;
    margin: 0;
    padding-top: 20px;
}

.process-line-bg {
    position: absolute;
    top: 40px;
    left: 11%;
    right: 11%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.process-line-fill {
    position: absolute;
    top: 40px;
    left: 11%;
    right: 100%;
    height: 4px;
    background: var(--accent-color);
    z-index: 2;
    transition: right 4s linear;
}

.process-step {
    position: relative;
    z-index: 3;
    width: 22%;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.process-step.active {
    opacity: 1;
    transform: translateY(0);
}

.step-icon-wrapper {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
    position: relative;
}

.process-step.active .step-icon-wrapper {
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(252, 183, 96, 0.3);
    transform: scale(1.1);
}

.step-icon {
    font-size: 2rem;
    color: var(--text-muted);
    transition: color 0.3s;
}

.process-step.active .step-icon {
    color: var(--accent-color);
}

.step-number {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background: var(--accent-color);
    color: var(--primary-color);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-content h4 {
    color: var(--accent-color);
    font-size: 1.1rem;
    margin-bottom: 10px;
    min-height: 2.4em;
}

.step-content p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}


/* ================================
   4. SUPPORT & METHODS
   ================================ */

.support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.method-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.method-item {
    display: flex;
    gap: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease;
}

.method-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.method-icon {
    color: var(--accent-color);
    font-size: 1.5rem;
    margin-top: 5px;
}

.method-content h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: white;
}

.method-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* The "Läs mer" affordance on a clickable method item. Not .card-link: that one
   is margin-top:auto inside a tall flex card, which here would push 20px of air
   under every item in a five-item list. */
.method-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 500;
}

.card-clickable:hover .method-link {
    text-decoration: underline;
}

/* Tech Panel */
.tech-panel {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 50, 50, 0.6));
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.tech-panel h3 {
    margin-bottom: 30px;
    font-size: 1.8rem;
}


/* ================================
   5. TEAM
   ================================ */

.team-member {
    text-align: center;
}


.team-name-link {
    color: inherit;
    text-decoration: none;
}

.team-name-link:hover {
    color: var(--accent-color);
}

.team-member .avatar-photo {
    transition: opacity 0.2s ease;
}

.team-member .avatar-btn:hover .avatar-photo {
    opacity: 0.85;
}

/* Reset for <button>s that stand in for links (CV triggers, team names).
   Keeps them looking like the inline links/images they replaced while giving
   real button semantics + keyboard operability. */
.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
}

.avatar-btn {
    display: block;
    width: 100%;
}

.avatar-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    display: block;
}

.team-role {
    color: var(--accent-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 5px;
}


/* ================================
   5b. OM OSS — LIGHT BAND (#380)
   ================================ */

/* A light interlude between the dark hero and the dark process section
   (mockup 2b). The band is a scope that re-tokens: everything inside reads
   the page's own --text-color / --text-muted, so .section-title,
   .section-intro and the gold pill follow with no overrides. Horizontal
   padding stays with .section-inner (5%), as on every other section. The
   founder cards are their own class rather than an un-styled .card (dark
   surface, 40px padding): the expertise leads, the founder is a byline. */
.band-light {
    --text-color: #00312f;
    --text-muted: #374151;
    background: #eef4f3;
    color: var(--text-color);
    border-top: 0;
    border-bottom: 0;
}

.band-light .section-title {
    color: #00312f;
}

.about-grid {
    display: grid;
    /* The image takes its height from the copy: the row starts at the eyebrow
       and ends at the button, and the figure
       stretches between the two, so the image's top and bottom edges are the
       copy's whatever the text does. Copy a little narrower than the split it
       had, so it runs a line or two longer and the picture shows more of
       itself (Robert, 2026-09-26). */
    /* Both columns capped, the space between them free: a narrower copy runs
       taller, and a narrower image column keeps the slot near square instead
       of landscape, so the taller slot shows more of the picture instead of
       cropping it wider. The two caps are the dials. */
    grid-template-columns: minmax(0, 540px) minmax(320px, 480px);
    justify-content: space-between;
    gap: 64px;
    align-items: stretch;
    margin-bottom: 64px;
}

/* A flex column so the copy's bottom edge is the button's, with no line-box
   slack below an inline button. */
.about-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-eyebrow {
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.band-light .section-intro {
    font-weight: 300;
    font-size: 1.15rem;
    margin-bottom: 28px;
}

.about-quote {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.5;
    color: #00312f;
    border-left: 4px solid var(--accent-color);
    padding-left: 20px;
    margin: 0 0 32px;
}

.about-photo {
    position: relative;
    margin: 0;
    /* No fixed shape on desktop: the height is the row's (see .about-grid).
       The floor only matters if the copy ever gets very short. */
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 360px;
    border-radius: 15px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* Out of the flow: an in-flow image at column width would set the row's
   height with its own 2:3 shape, and the copy would stretch to it instead
   of the other way round. Absolute inside the figure, it fills whatever
   height the copy gives the row. */
.about-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Low: the path and the evening light are the picture; the treetops are
       what a near-square slot can spare. */
    object-position: center 60%;
}

.about-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 55%, rgba(0, 26, 26, 0.8));
    pointer-events: none;
}

.about-photo-caption {
    position: absolute;
    left: 24px;
    bottom: 20px;
    z-index: 1;
    color: var(--accent-color);
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.founder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.founder-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.founder-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.founder-eyebrow {
    color: var(--primary-color);
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

.founder-thesis {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.3;
    color: #00312f;
    margin: 0;
}

.founder-blurb {
    font-weight: 300;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* The byline sits on the card's floor however long the blurb above runs. */
.founder-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.founder-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.founder-name {
    flex: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #111827;
}

.founder-byline .fa-arrow-right {
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.founder-card:hover .founder-byline .fa-arrow-right {
    transform: translateX(4px);
}

/* ================================
   5c. PRESS PAGE (/press/)
   ================================ */

/* The press kit rides the light band (5b) for its tokens; it only needs
   room under the fixed header, which the home page's hero gives itself. */
.press-page {
    padding-top: 160px;
}

.press-contact {
    color: var(--text-muted);
    margin-bottom: 48px;
}

.press-contact a,
.press-back a {
    color: var(--primary-color);
    font-weight: 600;
}

.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.press-item {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Portrait and landscape thumbnails share one 4:3 frame, contained on a
   neutral ground so nothing is cropped out of a press photo's preview. */
.press-thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #f3f4f6;
}

.press-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The logo is artwork on the frame's ground, not a photo filling it. */
.press-thumb.is-logo img {
    inset: 18%;
    width: 64%;
    height: 64%;
}

.press-item figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    padding: 20px;
}

.press-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #111827;
}

.press-caption {
    font-size: 0.95rem;
    color: #4b5563;
}

.press-meta {
    font-size: 0.85rem;
    color: #6b7280;
}

.press-download {
    margin-top: auto;
    padding-top: 14px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
}

.press-download:hover {
    text-decoration: underline;
}

.press-back {
    margin-top: 48px;
}

/* ================================
   6. MODALS & FORMS
   ================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.modal-active {
    display: flex;
}

.modal-content {
    background: var(--primary-color);
    border: 1px solid var(--secondary-color);
    padding: 50px;
    border-radius: 20px;
    width: 90%;
    max-width: 450px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

/* The shared form styles (.form-group / .login-submit / .login-error) moved to
   main.css so the entry pages — password reset, invitation accept — can use them
   without pulling in this stylesheet and the whole marketing shell with it
   (#154). Public pages load main.css too, so the login modal is unaffected. */

/* Content Modal overlay — lighter than login modal, no blur */
.content-modal-overlay {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: none;
    align-items: flex-start;
    padding-top: 80px;
    padding-bottom: 40px;
}

/* Content Modals (Om BLOOM & Case pages) */
.content-modal {
    background: linear-gradient(135deg, #007474, #005c5c);
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    width: 92%;
    max-width: 900px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    padding: 50px;
}

.content-modal-body h1 {
    color: var(--text-color);
    font-size: 2rem;
    margin-bottom: 20px;
}

.content-modal-body h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.5rem;
    border-left: 4px solid var(--accent-color);
    padding-left: 15px;
}

.content-modal-body h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: var(--text-muted);
}

.content-modal-body p+h3 {
    margin-top: 25px;
}

.content-modal-body p {
    max-width: 800px;
    margin-bottom: 10px;
}

.content-modal-body ul {
    margin-top: 10px;
    padding-left: 20px;
    list-style: disc;
}

.content-modal-body li {
    margin-bottom: 8px;
}

.content-modal .factor-box,
.content-modal .result-item {
    border-left: none;
}

.cv-modal-overlay {
    padding-top: 140px;
}

.cv-modal {
    max-width: 620px;
}

/* Modal flip transition */
.content-modal-overlay {
    perspective: 1200px;
}

@keyframes modal-flip-out-left {
    from {
        transform: rotateY(0deg);
        opacity: 1;
    }

    to {
        transform: rotateY(-90deg);
        opacity: 0;
    }
}

@keyframes modal-flip-in-from-right {
    from {
        transform: rotateY(90deg);
        opacity: 0;
    }

    to {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

@keyframes modal-flip-out-right {
    from {
        transform: rotateY(0deg);
        opacity: 1;
    }

    to {
        transform: rotateY(90deg);
        opacity: 0;
    }
}

@keyframes modal-flip-in-from-left {
    from {
        transform: rotateY(-90deg);
        opacity: 0;
    }

    to {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

.modal-flipping-out-left .content-modal {
    animation: modal-flip-out-left 0.25s ease-in forwards;
}

.modal-flipping-in-right .content-modal {
    animation: modal-flip-in-from-right 0.25s ease-out forwards;
}

.modal-flipping-out-right .content-modal {
    animation: modal-flip-out-right 0.25s ease-in forwards;
}

.modal-flipping-in-left .content-modal {
    animation: modal-flip-in-from-left 0.25s ease-out forwards;
}


/* ================================
   7. CASE PAGES
   ================================ */

/* Case Container & Layout */
.case-container {
    max-width: 1100px;
    margin: 120px auto 40px;
    padding: 0 5%;
}

.case-container .card {
    background: rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Case Typography */
.case-container .card h1 {
    color: var(--accent-color);
    font-size: 2rem;
    margin-bottom: 10px;
}

.case-container .card h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.5rem;
    border-left: 4px solid var(--accent-color);
    padding-left: 15px;
    border-bottom: none;
}

.case-container .card h2::after {
    display: none;
}

.case-container .card h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: var(--text-muted);
}

.case-container .card p {
    margin-bottom: 0;
    max-width: 800px;
}

.case-container .card ul {
    margin-top: 10px;
    padding-left: 20px;
    list-style: disc;
}

.case-container .card li {
    margin-bottom: 8px;
}

/* Back Link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.back-link:hover {
    text-decoration: underline;
}

/* Graph Components */
.graph-container {
    margin-top: 40px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.graph-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.graph-title {
    font-family: "Poppins", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

.graph-legend {
    font-size: 0.9rem;
    color: var(--text-muted);
}

canvas {
    max-width: 100%;
    max-height: 400px;
}

/* Data Grids */
.factors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.factor-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.factor-box h4 {
    margin: 0 0 10px 0;
    color: #fff;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.metric-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Chart & Bar Components */
.chart-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 200px;
    position: relative;
    margin-bottom: 15px;
}


.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%;
    height: 100%;
    justify-content: flex-end;
}

.bar-label {
    margin-top: 10px;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
    color: var(--text-muted);
}

.bar-value {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    z-index: 2;
    text-shadow: none;
}

/* Legend */
.legend {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    margin-bottom: 15px;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.base {
    background: rgba(255, 255, 255, 0.2);
}

.dot.target {
    background: var(--accent-color);
}

.btn-container {
    margin-top: 40px;
    text-align: center;
}

/* Custom bar charts (socialt utfallskontrakt) */
.bar {
    width: 100%;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
}

.bar.base {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.bar.target {
    background: var(--accent-color);
    color: #003333;
}

/* Results list */
.results-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.result-item {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border-left: 4px solid var(--accent-color);
}

.result-item h4 {
    margin-bottom: 8px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ================================
   8. MOBILE RESPONSIVE (PUBLIC)
   ================================ */

@media (max-width: 768px) {

    /* Hero */
    .hero {
        padding: 120px 5% 60px;
        min-height: auto;
    }

    .hero h1 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .hero h1 br {
        display: none;
    }

    .hero p {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }

    .pre-title {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }

    /* Shrinks the hero pill on small screens. Deliberately does not reach the
       .is-sm / .is-md sizes: those are already small, and their two-class
       selector outranks this one — which is also how it behaved when they were
       inline styles, since those outranked this rule too (#154). */
    .cta-btn {
        padding: 12px 24px;
        font-size: 0.95rem;
    }

    /* Ticker */
    .ticker-wrapper {
        margin-top: 40px;
    }

    .ticker-card {
        min-width: 280px;
        padding: 15px 18px;
    }

    .ticker-content h5 {
        font-size: 0.85rem;
    }

    .ticker-content p {
        font-size: 0.75rem;
    }

    /* Process section - vertical on mobile */
    .process-container {
        flex-direction: column;
        gap: 30px;
        padding-top: 0;
    }

    .process-line-bg,
    .process-line-fill {
        display: none;
    }

    .process-step {
        width: 100%;
        opacity: 1;
        transform: none;
        display: flex;
        align-items: flex-start;
        gap: 20px;
        text-align: left;
    }

    .step-icon-wrapper {
        margin: 0;
        width: 60px;
        height: 60px;
        flex-shrink: 0;
    }

    .step-icon {
        font-size: 1.5rem;
    }

    .step-number {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }

    .step-content {
        flex: 1;
    }

    .step-content h4 {
        min-height: auto;
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .step-content p {
        font-size: 0.85rem;
    }

    /* Support grid */
    .support-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .method-item {
        padding: 15px;
        gap: 15px;
    }

    .method-content h4 {
        font-size: 1.05rem;
    }

    .method-content p {
        font-size: 0.9rem;
    }

    /* Tech panel */
    .tech-panel {
        padding: 25px;
    }

    .tech-panel h3 {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }

    /* Case cards */
    .case-tag {
        font-size: 0.7rem;
    }

    /* Team */
    .team-member {
        margin-bottom: 20px;
    }

    .avatar-photo {
        width: 120px;
        height: 120px;
    }

    .team-role {
        font-size: 0.8rem;
    }

    /* Om oss light band (#380, mockup 2b · mobil): one column, the photo at
       4:3 between the intro and the quote. The copy column dissolves into
       the band's flex column so the photo can be ordered into it. */
    .about-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-bottom: 40px;
    }

    .about-copy {
        display: contents;
    }

    .about-photo {
        order: 1;
        aspect-ratio: 4 / 3;
        min-height: 0;
        margin-bottom: 24px;
    }

    .about-photo img {
        object-position: center 30%;
    }

    .about-photo-caption {
        left: 18px;
        bottom: 14px;
        font-size: 0.68rem;
    }

    .about-quote {
        order: 2;
    }

    .about-copy > .cta-btn {
        order: 3;
        width: 100%;
    }

    .founder-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .founder-card {
        padding: 22px;
        gap: 10px;
    }

    .founder-thesis {
        font-size: 1.1rem;
    }

    /* Case Pages */
    .factors-grid {
        grid-template-columns: 1fr;
    }

    .chart-container {
        height: 180px;
    }

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

    .case-container {
        margin-top: 80px;
        padding: 0 4%;
    }

    .case-container .card {
        padding: 20px;
    }

    .case-container .card h1 {
        font-size: 1.5rem;
    }

    .case-container .card h2 {
        font-size: 1.2rem;
        margin-top: 30px;
    }

    /* Modal */
    .modal-content {
        padding: 30px 20px;
        width: 95%;
    }

    /* Content Modal */
    .content-modal-overlay {
        padding-top: 60px;
    }

    .content-modal {
        padding: 30px 20px;
        max-height: calc(100vh - 100px);
        width: 96%;
    }

    .content-modal-body h1 {
        font-size: 1.5rem;
    }

    .content-modal-body h2 {
        font-size: 1.2rem;
        margin-top: 30px;
    }
}

/* Respect users who ask for reduced motion: drop the marquee, modal flips and
   scroll-reveal animations, and make transitions effectively instant. Content
   is still fully shown — only the movement is removed. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Modal flip transitions — show the target modal without the 3D flip. */
    .modal-flipping-out-left .content-modal,
    .modal-flipping-in-right .content-modal,
    .modal-flipping-out-right .content-modal,
    .modal-flipping-in-left .content-modal {
        animation: none !important;
        transform: none !important;
    }

    /* Scroll-reveal steps are visible immediately, not faded/translated in. */
    .process-step {
        opacity: 1 !important;
        transform: none !important;
    }
}