/* =========================================================
   Page frame shared by every page.
   One content width (1200px) and one side gutter, so the header,
   the home panels, the work page, growth, about, case study heads
   and the footer all line up on the same left and right edges.
   Loaded last on every page so it wins over older page rules.
   ========================================================= */

:root {
    --page-max: 1200px;
    --page-gutter: 24px;
}

@media (max-width: 1000px) {
    :root {
        --page-gutter: 16px;
    }
}

@media (max-width: 640px) {
    :root {
        --page-gutter: 12px;
    }
}

/* Header: logo and buttons sit on the same edges as the content */
.nh-inner {
    max-width: calc(var(--page-max) + 2 * var(--page-gutter));
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

/* Boxed panels (home, about, contact on work) */
.bw-panel,
.tl-panel {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--page-gutter));
    max-width: var(--page-max);
    margin-left: auto !important;
    margin-right: auto !important;
}

.tl-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Full width sections whose content should sit on the same edges */
.projects-section,
.highlight-project-section,
.view-more-cta-section {
    box-sizing: border-box;
    max-width: calc(var(--page-max) + 2 * var(--page-gutter)) !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
}

.gr-wrap,
.csx-hero {
    box-sizing: border-box;
    max-width: calc(var(--page-max) + 2 * var(--page-gutter));
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

/* Footer: dark band stays full width, its content lines up */
.footer-section {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
}

.footer-content,
.footer-bottom {
    max-width: var(--page-max);
    margin-left: auto;
    margin-right: auto;
}

/* Home hero: full width section, content kept on the page edges.
   No max-width here: the side padding is worked out from the screen width, so a capped
   section (styles.css sets 1920px) would squeeze the content to nothing on 2560px+ screens
   and push the mascot over the headline. */
.hero-section {
    max-width: none !important;
    padding-left: max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) !important;
    padding-right: max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) !important;
}

/* Home hero on big screens: title on one line, subtitle in two balanced lines,
   and enough room on the left for the mascot and its floating tags (about 620px) */
@media (min-width: 1280px) {
    .hero-section {
        gap: 40px !important;
    }

    .hero-text-side {
        flex: 0 0 auto;
        width: 560px;
        max-width: none;
    }


    .hero-visual-side {
        flex: 1 1 auto;
        min-width: 0;
    }

    .hero-mascot {
        max-height: 470px;
    }

    .hero-title {
        white-space: nowrap;
    }

    .hero-subtitle {
        max-width: 560px;
        text-wrap: pretty;
    }
}

/* Home hero subtitle: both sentences run on as one paragraph, a size smaller (asked 4 Oct 2026) */
.hero-subtitle .hero-sentence {
    display: inline;
}

.hero-section .hero-subtitle {
    font-size: 15px !important;
}

@media (min-width: 768px) {
    .hero-section .hero-subtitle {
        font-size: 17px !important;
    }
}

/* Home hero title is 28px on phones (asked 4 Oct 2026) */
@media (max-width: 640px) {
    .hero-section .hero-title {
        font-size: 28px !important;
    }

    /* every other page title (Growth, Work, About, case studies) matches it on phones;
       :root raises specificity above type.css and styles.css, which load later */
    :root :is(.gr-hero-title, .csx-title, .about-page .bw-title, h1.bw-title, .work-page #startup .page-title) {
        font-size: 28px !important;
        line-height: 1.05 !important;
    }

    /* the subheading sits 12px under the page title, like the home hero */
    :root :is(.gr-hero-title, .work-page #startup .page-title) {
        margin-bottom: 12px !important;
    }

    /* kickers (small uppercase lines) step down to 11px on phones so they sit quieter
       above the 28px titles; were 12 to 14px */
    :root :is(.gr-eyebrow, .page-eyebrow, .highlight-eyebrow, .ab-eyebrow, .ib-eyebrow,
              .hs-eyebrow, .csx-toc-label, .sw-callout-label, .bm-label) {
        font-size: 11px !important;
        letter-spacing: 0.1em !important;
    }

    /* nothing on a phone is bigger than the 28px hero title: the hand drawn "hi" by the contact letter comes down too */
    :root .lt-hi,
    :root .lt-yay {
        font-size: 28px !important;
    }

    /* every CTA in a card or under a section title is full width on phones (asked 5 Oct 2026):
       More case studies cards, the LinkedIn / X pair and Show all posts on home, the tool hero.
       Overlay buttons on videos and small tools (Shuffle, On this page) stay as they are. */
    :root .csx-more-go,
    :root .csx-read-cta {
        display: flex !important;
        align-self: stretch;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    :root #talks .tk-links {
        width: 100%;
    }

    :root #talks .tk-links > a {
        flex: 1 1 0;
        justify-content: center;
    }

    :root #talks .tk-more {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    :root .ia-hero-actions > .ia-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Mascot and its tags sit a little further left on wide screens (asked 1 Oct 2026);
   below 1400px the tags would get too close to the screen edge */
@media (min-width: 1400px) {
    .hero-visual-side .hero-content-wrapper {
        transform: translateX(-32px);
    }
}

/* Phone hero: breathing room between the header line and the mascot's banner (asked 4 Oct 2026) */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 32px !important;
    }
}

/* Cream background with a faint, still paper grain on every page (asked 4 Oct 2026; was home only).
   SVG fractal noise tile, no animation and no WebGL, so it costs nothing to scroll.
   Grain size is baseFrequency (0.85, lower = bigger); strength is the opacity inside the SVG (0.11).
   Pages with the fixed #mesh-net-bg layer (home, work, about) show it there, the rest on body. */
body,
#mesh-net-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24  0 0 0 0 0.2  0 0 0 0 0.14  0 0 0 1.4 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.11'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    background-repeat: repeat;
}

/* =====================================================================
   Footer rework (20 Oct 2026). Brand, line and social icons on the left;
   two labelled link columns on the right; the tool logos fall inside the
   page width and come to rest on the line above the copyright, on the right.
   ===================================================================== */
.ft2 .footer-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.ft2 .footer-brand {
    min-width: 0;
}

.ft2 .footer-heading {
    margin: 0 0 16px;
}

.ft2 .footer-quote {
    margin: 0 0 28px;
}

.ft2 .footer-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
}

.ft2 .footer-links-container {
    display: flex;
    gap: 72px;
    width: auto;
    padding-top: 8px;
}

.ft2 .footer-column {
    flex: none;
}

.ft2 .footer-col-label {
    margin: 0 0 16px;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.ft2 .footer-column ul {
    margin: 0;
    padding: 0;
}

.ft2 .footer-column ul li {
    margin: 0 0 12px;
}

/* room above the line for the logos to land */
.ft2 .footer-bottom {
    margin-top: 120px;
    padding-top: 20px;
    align-items: center;
}

.ft2 .copyright,
.ft2 .footer-instruction {
    margin: 0;
}

/* the logos play inside the page width, not the full screen */
.ft2 #physics-container {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
}

@media (max-width: 900px) {
    .ft2 .footer-content {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .ft2 .footer-links-container {
        gap: 56px;
        padding-top: 0;
    }

    .ft2 .footer-socials {
        justify-content: flex-start !important;
    }

    .ft2 .footer-bottom {
        flex-direction: row;
        align-items: center;
        margin-top: 128px !important;
        padding-top: 16px !important;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .ft2 .footer-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .ft2 .footer-socials { margin-top: 20px; }
}