/* ==========================================================================
   Octagram layout system
   One container, one 12-column grid, one spacing scale. Every page edge,
   the header and the footer share the same left and right lines.

   Container : 1280px content width, fluid side gutter (20px -> 40px)
   Grid      : 12 columns / 24px gap (desktop), 8 (tablet), 4 (phone)
   Spacing   : 8 · 16 · 24 · 32 · 48 · 64 · 96

   Pilot scope: header, footer, About, News.
   ========================================================================== */

:root {
    --container: 1280px;
    --gutter: clamp(20px, 4vw, 40px);
    --col-gap: 24px;

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;

    /* Section rhythm: generous on desktop, tighter on phones */
    --section-y: clamp(var(--space-6), 7vw, var(--space-7));

    /* Inline padding that lines full-bleed content up with the container */
    --bleed-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));

    /* Comfortable reading width for body copy */
    --measure: 64ch;
}

/* ---- Primitives -------------------------------------------------------- */
.o-container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.o-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
}

@media (max-width: 1023px) {
    :root { --col-gap: 20px; }
    .o-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    :root { --col-gap: 16px; }
    .o-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Header ------------------------------------------------------------ */
.header .header-container {
    max-width: calc(var(--container) + 2 * var(--gutter));
    padding: 10px var(--gutter);
}
.header .header-container .logo {
    margin-left: 0 !important;
}
.header .mobile-menu-toggle {
    right: calc(var(--gutter) - 6px) !important;
}

/* ---- Footer ------------------------------------------------------------ */
.footer .footer-content {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: var(--space-5);
    max-width: calc(var(--container) + 2 * var(--gutter));
    padding: var(--space-4) var(--gutter) 0;
    margin: 0 auto var(--space-5);
}
.footer .footer-section {
    grid-column: span 3;
    margin: 0;
    text-align: left;
}
.footer .social-links {
    justify-content: flex-start;
}
.footer .footer-copyright {
    text-align: left;
}
@media (max-width: 1023px) {
    .footer .footer-content { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .footer .footer-section { grid-column: span 4; }
}
@media (max-width: 639px) {
    .footer .footer-content {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: var(--space-4);
    }
    .footer .footer-section { grid-column: 1 / -1; }
    .footer .footer-copyright { width: auto; margin-top: var(--space-2); }
}

/* ==========================================================================
   About
   ========================================================================== */
main.about-page .container {
    max-width: calc(var(--container) + 2 * var(--gutter));
    padding-inline: var(--gutter);
}

/* Intro: title on columns 1-5, copy on 6-12 */
main.about-page .about-overview {
    padding: var(--section-y) 0 var(--space-6);
}
main.about-page .overview-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: var(--space-4);
}
main.about-page .overview-title {
    grid-column: 1 / span 5;
}
main.about-page .overview-content {
    grid-column: 6 / -1;
    max-width: none;
}
main.about-page .overview-content :is(p, .content-text) {
    max-width: var(--measure);
    font-size: 18px;
    line-height: 1.6 !important;
    color: #3A3A3C;
}
main.about-page .overview-content .content-text p {
    max-width: none;
    margin-bottom: var(--space-2);
}
main.about-page .overview-content .about-cta {
    margin-top: var(--space-4);
}

/* Full-bleed promo keeps its colour band, but its content now sits on the grid */
main.about-page .about-team .reframe-promo {
    padding: var(--space-3) var(--bleed-inline);
    column-gap: var(--space-4);
}

/* Name lists: four columns = 3 grid columns each */
main.about-page .top-clients {
    padding: var(--space-6) 0;
}
main.about-page .top-clients h2 {
    margin-bottom: var(--space-4);
}
main.about-page .clients-names {
    column-gap: var(--col-gap);
    row-gap: var(--space-1);
}

@media (max-width: 1023px) {
    main.about-page .overview-title,
    main.about-page .overview-content {
        grid-column: 1 / -1;
    }
    main.about-page .overview-title h1 {
        white-space: normal;
    }
}
@media (max-width: 576px) {
    main.about-page .container {
        padding-inline: var(--gutter);
    }
    main.about-page .overview-content p {
        font-size: 17px;
    }
}

/* ==========================================================================
   News
   ========================================================================== */
main.news-page {
    /* clears the fixed header, then one step of breathing room */
    padding: calc(72px + var(--space-6)) 0 var(--section-y);
}
@media (max-width: 768px) {
    main.news-page { padding-top: calc(64px + var(--space-5)); }
}
main.news-page .container {
    max-width: calc(var(--container) + 2 * var(--gutter));
    padding-inline: var(--gutter);
}

main.news-page .news-header {
    align-items: flex-end;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line, #E5E5EA);
}
main.news-page .categories-dropdown select {
    min-height: 44px;
    padding: 10px 40px 10px 16px;
    border: 1px solid #D2D2D7;
    border-radius: var(--radius-pill, 999px);
    font-size: 15px;
    color: var(--ink-2, #1D1D1F);
    background-color: #FFFFFF;
    cursor: pointer;
}

/* Feature column on 7 of 12, secondary column on 5 of 12 */
main.news-page .news-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: var(--space-5);
}
main.news-page .news-column-left { grid-column: 1 / span 7; }
main.news-page .news-column-right { grid-column: 8 / -1; }
main.news-page .news-column { row-gap: var(--space-5); }

/* Consistent image shape instead of fixed pixel heights */
main.news-page .news-column .news-item .news-image {
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm, 8px);
    transition: opacity 280ms var(--ease, ease);
}
main.news-page .news-item a:hover .news-image {
    opacity: 0.9;
}

main.news-page .news-meta {
    margin-bottom: var(--space-1);
    color: var(--muted, #6E6E73);
}
main.news-page .news-date {
    color: var(--muted, #6E6E73);
}
main.news-page .news-meta .news-category {
    border-color: #D2D2D7;
    color: var(--ink-2, #1D1D1F);
}
main.news-page .news-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-1);
}
main.news-page .news-column-left .news-title {
    font-size: 24px;
}
main.news-page .news-item a:hover .news-title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
main.news-page .news-excerpt {
    font-size: 15px;
    line-height: 1.55 !important;
    color: #3A3A3C;
    max-width: var(--measure);
}

@media (max-width: 1023px) {
    main.news-page .news-column-left { grid-column: 1 / span 6; }
    main.news-page .news-column-right { grid-column: 7 / -1; }
}
@media (max-width: 768px) {
    main.news-page .news-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        text-align: left;
        gap: var(--space-2);
    }
    main.news-page .news-column-left,
    main.news-page .news-column-right {
        grid-column: 1 / -1;
    }
    main.news-page .news-grid { row-gap: var(--space-5); }
    main.news-page .news-column-left .news-title { font-size: 22px; }
}
@media (max-width: 576px) {
    main.news-page .container {
        max-width: none;
        padding-inline: var(--gutter);
    }
}

/* ==========================================================================
   Site-wide rollout
   Every page container lands on the same edges as the header and footer.
   `main .container` / `main[class] .container` outrank the per-page
   `.container` and `.page .container` rules without needing !important.
   ========================================================================== */
main .container,
main[class] .container,
main .cs-container,
main[class] .training-container,
main[class] .privacy-container,
main .page-container,
main.gallery-container,
main.boardroom-container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Home: motion section had an inline 15px left offset */
main .motion-graphics-section > .container {
    padding-left: var(--gutter) !important;
}

/* Home: latest news strip (inline-styled component) */
.home-latest-news {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.home-latest-news .hn-grid {
    max-width: calc(var(--container) + 2 * var(--gutter)) !important;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Article + project detail pages: drop the extra outer wrapper padding so
   the inner container is the only thing setting the edge */
main.single-post-page,
main.single-work_page {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
main.single-post-page .container.article-wrap,
main.single-work_page .container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Narrow form pages stay narrow, but share the same side gutter */
main.nl-container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
main.apply-page .container {
    max-width: calc(900px + 2 * var(--gutter));
}

/* Footer wordmark: sit inside the grid instead of overflowing on phones */
.footer .footer-logo-overlay {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    box-sizing: border-box;
}
.footer .footer-logo {
    width: 100%;
    max-width: var(--container);
}

/* ---- Per-page edge fixes ---------------------------------------------- */
/* Work: header and tabs carried an extra 1rem indent; divider now spans the
   content width instead of the viewport */
main.work-page .work-header {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 0;
}
main.work-page .work-header .work-tabs {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: var(--space-3);
    margin-bottom: 0;
    border-bottom: 1px solid var(--line, #E5E5EA);
}

/* Contact: info column had its own 40px inset */
main.contact-page .contact-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
}
main.contact-page .contact-grid > :first-child { grid-column: 1 / span 5; }
main.contact-page .contact-grid > :last-child { grid-column: 7 / -1; }
main.contact-page .contact-info {
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 1023px) {
    main.contact-page .contact-grid > :first-child,
    main.contact-page .contact-grid > :last-child { grid-column: 1 / -1; }
}

/* Code gallery: inner card inset */
main.gallery-container .gallery-content {
    padding-left: 0;
    padding-right: 0;
}

/* Live Events has no <main>; its sections hold the containers directly */
body > section > .container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Contrast fixes: headings on dark bands were inheriting near-black ink */
.cs-panel .cs-title,
.training-hero h1 {
    color: #FFFFFF;
}
.vision-section :is(h1, h2, h3, h4, p, li, .vision-title) {
    color: inherit;
}

/* Home hero: slide caption sits on the grid edge instead of 24px from the screen */
main .hero .hero-caption {
    left: var(--bleed-inline) !important;
    right: var(--bleed-inline) !important;
    bottom: var(--space-6) !important;
}
main .hero .hero-caption > div:first-child {
    font-family: var(--font-heading);
    font-weight: 500 !important;
    letter-spacing: -0.015em;
}
@media (max-width: 768px) {
    main .hero .hero-caption { bottom: var(--space-5) !important; }
}

/* Home portfolio: the featured pair had mismatched image heights (60px vs 35px
   caption allowances), so their titles sat at different levels */
@media (min-width: 901px) {
    main .portfolio-top {
        align-items: flex-start;
    }
    main .portfolio-top > .portfolio-featured,
    main .portfolio-top > .portfolio-side-grid,
    main .portfolio-top :is(.portfolio-featured, .portfolio-side-grid) :is(.portfolio-item, .portfolio-link) {
        height: auto !important;
    }
    main .portfolio-top :is(.portfolio-featured, .portfolio-side-grid) .portfolio-image {
        flex: none !important;
        height: 480px !important;
    }
}

/* ---- Reading rhythm ---------------------------------------------------- */
/* Some pages force a tight line-height on every element (`.page *`); give
   running text its comfortable 1.6 back and card excerpts 1.45 */
main[class] :is(p, li, blockquote) {
    line-height: 1.6 !important;
}
main[class] :is(p, li):is(.work-description, .portfolio-description, .news-excerpt, .carousel-description),
main[class] :is(.work-description, .portfolio-description, .news-excerpt, .carousel-description) :is(p, li) {
    line-height: 1.45 !important;
}
/* Large lead text (22px+) needs tighter leading than running copy */
main[class] :is(p, blockquote, div):is(.post-lead, .work-lead-quote, .quote-text, .lead),
main :is(p, blockquote):is(.post-lead, .quote-text) {
    line-height: 1.35 !important;
}
main[class] .intro-left :is(p, li),
body > section .intro-left :is(p, li) {
    line-height: 1.35 !important;
}

/* ---- Card titles: Work + News in Satoshi Bold ------------------------- */
/* Page titles and section headings stay in the display face (FH Oscar);
   titles on project and article cards use the text face in Bold */
main .portfolio-title,
main .carousel-title,
main.work-page .work-title,
main.single-work_page .related-works .work-title,
main.single-work_page .related-works .work-title a,
main.news-page .news-title,
main.single-post-page h3.post-title,
main.single-post-page h3.post-title a,
.home-latest-news .hn-title {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

/* ==========================================================================
   Device support
   Phones (320px+), foldables, tablets, laptops, large monitors, touch,
   notches / rounded corners, landscape, and print.
   ========================================================================== */

/* Notches & rounded corners (with viewport-fit=cover): the side gutter never
   gets smaller than the device's safe area */
:root {
    --gutter: max(clamp(20px, 4vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
.header {
    padding-top: env(safe-area-inset-top, 0px);
}
.footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Large monitors: a slightly wider canvas so pages don't feel like a strip */
@media (min-width: 1800px) {
    :root { --container: 1440px; }
}

/* ---- Navigation: full-screen menu on phones AND tablets ----------------- */
@media (max-width: 1023px) {
    .header .header-right {
        display: none !important;
    }
    .header .mobile-menu-toggle {
        display: block !important;
        min-width: 44px;
        min-height: 44px;
    }
}
@media (min-width: 1024px) {
    .header .mobile-menu-toggle,
    #mobile-menu-overlay {
        display: none !important;
    }
}

/* Mobile menu: scrollable on short/landscape screens, respects safe areas,
   links never collide with the footer links */
#mobile-menu-overlay {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#mobile-menu-overlay > div {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: auto !important;
    padding: calc(88px + env(safe-area-inset-top, 0px)) var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}
#mobile-menu-overlay > div > div:first-child {
    top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    left: var(--gutter) !important;
}
#mobile-menu-overlay #mobile-menu-close {
    top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    right: calc(var(--gutter) - 8px) !important;
    min-width: 44px;
    min-height: 44px;
}
#mobile-menu-overlay nav {
    position: static !important;
    flex: 1 0 auto;
}
#mobile-menu-overlay nav a {
    padding: 4px 0;
}
#mobile-menu-overlay > div > div:last-child {
    position: static !important;
    margin-top: var(--space-5);
}

/* Full-screen sections: use the *small* viewport height on phones so the
   browser toolbar showing/hiding doesn't make them jump or get cut off */
@supports (height: 100svh) {
    .hero { height: 100svh; }
    main { min-height: calc(100svh - 80px); }
}
/* Landscape phones: the hero shouldn't swallow the whole short screen */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { height: auto; min-height: 420px !important; }
}

/* ---- Content safety: nothing can push the page wider than the screen ---- */
img, video, canvas, svg, iframe, embed, object {
    max-width: 100%;
}
video, canvas {
    height: auto;
}
/* Long URLs, emails and unbroken words wrap instead of overflowing */
body {
    overflow-wrap: break-word;
}
:is(h1, h2, h3, h4, h5, h6, p, li, dd, td, th, a, span, blockquote, figcaption) {
    overflow-wrap: break-word;
}
/* Wide tables and code blocks scroll inside themselves on small screens */
@media (max-width: 767px) {
    main table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
pre {
    max-width: 100%;
    overflow-x: auto;
}

/* ---- Touch devices ------------------------------------------------------ */
@media (pointer: coarse) {
    /* iOS zooms into any field under 16px; keep forms steady */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(#site-search-input),
    select,
    textarea {
        font-size: 16px !important;
    }
    button, a, input, select, textarea, label {
        touch-action: manipulation;
    }
}

/* ---- Legibility floor (nothing readable under 12px) -------------------- */
main.news-page .news-meta,
main.news-page .news-meta .news-category,
main.news-page .news-date {
    font-size: 12px;
}
main.training-page .passport-preview .placeholder {
    font-size: 12px;
}
.nav-appsweb-badge,
.nav-work-badge {
    font-size: 9.5px;
}

/* ---- Print --------------------------------------------------------------- */
@media print {
    .header, .footer, #mobile-menu-overlay, #site-search,
    .mobile-menu-toggle, .footer-lines, video, iframe {
        display: none !important;
    }
    body, main {
        padding: 0 !important;
        color: #000 !important;
        background: #fff !important;
    }
    main .container,
    main[class] .container {
        max-width: none;
        padding: 0;
    }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
    }
    img { break-inside: avoid; }
    :is(h1, h2, h3) { break-after: avoid; }
}

/* Smallest phones & folded foldables (Galaxy Z Fold: 280px) */
body {
    min-width: 0 !important;
}

/* Grid/flex children may shrink below their content's intrinsic width
   (file inputs, long words) instead of pushing the page wider */
:is(.pi-grid, .grid-2, .grid-3, .grid-4, .contact-grid, .overview-grid, .news-grid, .footer-content) > * {
    min-width: 0;
}
input[type="file"] {
    max-width: 100%;
}
main.training-page .passport-card {
    max-width: 100%;
    min-width: 0;
}

/* Footer wordmark keeps its true proportions at every width */
.footer .footer-logo {
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
}
.related-posts .posts-grid > *,
.related-works .work-grid > * {
    min-width: 0;
}
.related-posts .chips {
    flex-wrap: wrap;
}
/* Work header: title and category filter stack on the narrowest screens */
@media (max-width: 400px) {
    main.work-page .work-header .container {
        flex-wrap: wrap !important;
        row-gap: var(--space-2);
    }
    main.work-page .work-header .categories-dropdown {
        margin-left: 0 !important;
        width: 100%;
    }
    main.work-page .work-header .categories-dropdown select {
        width: 100% !important;
        max-width: 100% !important;
    }
}
#mobile-menu-overlay nav {
    padding: 0 !important;
}

/* ==========================================================================
   One width for every page
   Page stylesheets used to give <main> its own max-width (1200/1400px) and
   side padding (8px–1rem), so detail pages, Work and Search drifted off the
   grid. The shared container alone now decides the left/right edges.
   ========================================================================== */
main[class]:not(.gallery-container):not(.boardroom-container):not(.nl-container) {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Form pages: keep a comfortable form width, anchored to the grid edge */
main.nl-container {
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-left: auto;
    margin-right: auto;
}
main.nl-container > .nl-card {
    max-width: 720px;
    padding-left: 0;
    padding-right: 0;
}
main.apply-page .container {
    max-width: calc(var(--container) + 2 * var(--gutter));
}
main.apply-page .container > * {
    max-width: 900px;
}
.unsubscribe-card {
    width: auto;
    max-width: 640px;
    margin: calc(96px + env(safe-area-inset-top, 0px)) 0 var(--space-7) var(--bleed-inline);
    margin-right: var(--gutter);
    padding: var(--space-4);
    box-sizing: border-box;
}
@media (max-width: 576px) {
    .unsubscribe-card {
        margin-left: var(--gutter);
        padding: var(--space-3);
    }
}

/* Project pages: once the columns stack, the "About the project" toggle sits
   in the flow above the details instead of floating over the description */
@media (max-width: 900px) {
    main.single-work_page .about-toggle:not(.is-fixed) {
        position: static;
        display: inline-flex;
        align-items: center;
        margin: var(--space-3) 0 var(--space-2);
    }
}