/**
 * Command Stick - Custom Styles
 *
 * This file contains all custom styles for the Command Stick website.
 * It supplements the Webflow-generated CSS with project-specific styling.
 *
 * Table of Contents:
 * 1. CSS Variables
 * 2. Page Load / Flash Prevention
 * 3. Reset & Base Styles
 * 4. Typography
 * 5. Links & Transitions
 * 6. Layout Utilities
 * 7. Navigation / Menu
 * 8. Grid System
 * 9. Spacing Utilities
 * 10. News Grid & Items
 * 11. FAQ / Collapsible Sections
 * 12. Mechanics Section (Video Thumbnails)
 * 13. Video Modal
 * 14. Footer
 *
 * Breakpoints used:
 * - Desktop: > 1364px
 * - Tablet: 767px - 1364px
 * - Mobile: < 767px
 * - Small mobile: < 660px
 */


/* ==========================================================================
   1. CSS VARIABLES
   ========================================================================== */

:root {
    /* Brand Colors */
    --black: #000;
    --white: #fff;

    /* Grey Scale */
    --basegrey: #888;      /* Primary text color */
    --lightgrey: #DBDBDB;  /* Borders, dividers */
    --linkgrey: #bfbfbf;   /* Link default color */

    /* Background Colors (used by .c1-.c5 utility classes) */
    --c1: #F8F8F8;         /* Lightest - off-white */
    --c2: #FAF9F0;         /* Cream/warm white */
    --c3: #E6E6E5;         /* Light grey */
    --c4: #45423D;         /* Dark grey/brown */
    --c5: #000000;         /* Black */

    /* Interactive States */
    --chover: #FF3D00;     /* Hover color - orange/red */

    /* Spacing Scale */
    --spacing-xs: 0.4rem;   /* Small padding, margins */
    --spacing-sm: 1rem;     /* Standard small spacing */
    --spacing-md: 2rem;     /* Medium spacing */
    --spacing-lg: 4rem;     /* Large section spacing */

    /* Animation Timing */
    --duration-fast: 300ms;
    --duration-normal: 600ms;
    --duration-slow: 700ms;
    --duration-slower: 800ms;
    --ease-smooth: cubic-bezier(0.2, 0.8, 0.1, 1);

    /* Grid offset (used in calc() for positioning) */
    --grid-gutter: 7px;

    /* Breakpoints (documentation only - CSS can't use in media queries)
     * Mobile: ≤660px (2-column grid)
     * Tablet: 661-1364px (responsive layout)
     * Desktop: >1364px (full 4-column layout)
     */
}


/* ==========================================================================
   2. PAGE LOAD / FLASH PREVENTION
   Hides page until fonts are loaded to prevent FOUT (Flash of Unstyled Text)
   ========================================================================== */

html:not(.fonts-loaded) body {
    opacity: 0;
}

html.fonts-loaded body {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}


/* ==========================================================================
   3. RESET & BASE STYLES
   ========================================================================== */

* {
    padding: 0;
    margin: 0;
}

body {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-weight: normal;
    font-style: normal;
    font-kerning: normal;
    margin: 0 !important;
    overflow-x: hidden !important;
    color: var(--basegrey);
}

/* Hide Webflow badge */
a.w-webflow-badge {
    display: none !important;
}

/* Max width for large screens */
@media screen and (min-width: 2000px) {
    body {
        max-width: 2000px;
    }
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

/* Font family assignments */
.bold {
    font-family: "Twklausanne 600";
}

h2, p, figure, a, h6 {
    font-family: "Twklausanne 300";
    font-weight: 300;
    max-width: 64ch;
}

h1, h2 {
    margin: 0;
    padding: 0;
}

/* Heading 1 - Primary headlines */
h1 {
    font-family: "Twklausanne 200";
    font-weight: 200;
    font-size: 1.875rem;
    line-height: 2.93rem;
    letter-spacing: -0.05rem;
    max-width: 50ch;
    display: flex;
    overflow: hidden;
}

/* Fix for h1 with decorative arrow */
h1.tabbedarrowheading {
    min-width: 95%;
}

h1 span+* {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Decorative elements for headings */
.decorativearrow {
    margin-left: 25%;
    flex-shrink: 0;
    white-space: nowrap;
}

.tab {
    margin-left: 25%;
}

/* Heading 2 - Secondary headlines */
h2, h2 a {
    font-size: 1.4rem;
    line-height: 2.1rem;
    letter-spacing: -0.03rem;
}

/* Paragraph and body text */
p, nav a, h6 {
    font-size: 1.04rem;
    line-height: 1.85rem;
    letter-spacing: -0.03rem;
    margin: 0;
    padding: 0;
}

a, figure {
    display: block;
    font-size: .8rem;
    line-height: 1.7rem;
}

figure.bold {
    margin-bottom: 0;
}

/* Text spacing utilities (carriage returns, paragraph breaks) */
span.carriagereturn > h1 {
    padding-bottom: .7rem;
}

span.leadcarriagereturn > h2 {
    padding-bottom: .7rem;
}

span.carriagereturn > h2 {
    padding-bottom: .44rem;
}

span.paragraphbreak > h2 {
    padding-bottom: 2.6rem;
}

span.extraparagraphbreak > h2 {
    padding-bottom: calc(2.62rem + 7px);
}

.hiddenparagraphbreak {
    margin-top: 2.62rem;
}

h2 br {
    margin-bottom: 50px;
}

.inline-h2 a {
    display: inline;
}

p.carriagereturn {
    padding-bottom: 1rem;
}

/* Typography - Tablet */
@media screen and (max-width: 1364px) {
    h1 {
        font-size: 1.74rem;
        line-height: 2.7rem;
    }
}

/* Typography - Mobile */
@media screen and (max-width: 766px) {
    h1 {
        font-family: "Twklausanne 250";
        font-weight: 250;
        font-size: 1.6rem;
        line-height: 2.43rem;
    }

    h2, h2 a {
        font-size: 1.22rem;
        line-height: 1.9rem;
    }

    span.carriagereturn > h2 {
        padding-bottom: .4rem;
    }

    span.paragraphbreak > h2 {
        padding-bottom: 2rem;
    }

    .hiddenparagraphbreak {
        margin-top: 2.02rem;
    }

    span.extraparagraphbreak > h2 {
        padding-bottom: 2.02rem;
    }

    p, h6 {
        font-size: 1.1rem;
        line-height: 1.8rem;
        letter-spacing: -0.015rem;
    }

    .decorativearrow {
        margin-left: 0;
    }

    .tab {
        margin-left: 0;
    }
}


/* ==========================================================================
   5. LINKS & TRANSITIONS
   ========================================================================== */

a {
    max-width: max-content;
    text-decoration: none;
}

/* Footer link color (nav a moved to Navigation.astro) */
.footer a {
    color: var(--basegrey);
}

/* Link colors and transitions */
a,
h2 a,
label[for=seemorem1] p,
label[for=seemore1] p,
label[for=seemore2] p {
    color: var(--linkgrey);
    transition: color var(--duration-normal) ease;
}

/* Hover states */
a:hover,
.footer a:hover,
label[for=seemorem1] p:hover,
label[for=seemore1] p:hover,
label[for=seemore2] p:hover {
    color: var(--black);
    cursor: pointer;
}

/* Current/active menu item */
a.currentmenuitem {
    color: var(--black);
}

/* Focus state - remove outline on targeted elements */
:target {
    outline: none;
}


/* ==========================================================================
   6. LAYOUT UTILITIES
   ========================================================================== */

.block {
    display: block;
}

.grid {
    display: grid;
}

/* Page margins */
.margin {
    width: var(--spacing-md);
}

/* Fallback grid positioning for margins (for pages without Webflow ID-based rules) */
.margin.marginleft {
    grid-column: 1 / 2;
    grid-row: 1;
}

.margin.marginright {
    grid-column: 14 / 15;
    grid-row: 1;
}

@media screen and (max-width: 766px) {
    .margin {
        width: .2rem;
    }
}

/* Backdrop blur effect */
.backdrop-filter {
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

/* Border/divider line */
.overline {
    border-top: 1px solid var(--lightgrey);
}

/* Midline divider (used in expandable sections) */
.midlineparent {
    display: flex;
    align-items: center;
}

.midlineparent label {
    white-space: nowrap;
    margin-right: 10px;
}

.midline {
    flex-grow: 1;
    border-top: 1px solid var(--lightgrey);
    height: .6rem;
}

@media screen and (max-width: 1364px) {
    .midlineparent {
        grid-column: 2 / 14 !important;
    }
}


/* ==========================================================================
   7. NAVIGATION / MENU
   Styles moved to scoped components:
   - Header.astro (menublock positioning)
   - Navigation.astro (nav links, divider, mobile nav)
   - MobileMenu.astro (hamburger, toggle, animations)
   - Logo.astro (logo sizing)
   ========================================================================== */

/* Footer logo fill (headerlogo moved to Logo.astro) */
.footerlogo .st0,
.footerlogo .pinwheel {
    fill: var(--basegrey);
}

@media screen and (max-width: 766px) {
    .stackable {
        margin-top: var(--spacing-lg);
    }
}


/* ==========================================================================
   8. GRID SYSTEM
   Custom grid utilities for the 12-column layout
   ========================================================================== */

/* Quarter and sixth grid cells - square aspect ratio */
.quartergrid1,
.quartergrid2,
.quartergrid3,
.quartergrid4,
.sixthgrid1,
.sixthgrid2,
.sixthgrid3,
.sixthgrid4,
.sixthgrid5,
.sixthgrid6 {
    aspect-ratio: 1 / 1;
    overflow-y: hidden;
}

.sixthgrid5,
.sixthgrid6 {
    min-width: 100%;
}

/* Lead image positioning */
.leadimage {
    margin-top: 5.8rem;
}

/* Tablet grid adjustments */
@media screen and (max-width: 1364px) {
    .fullgrid,
    .twothirdsgridright,
    .keycolumn {
        grid-column: 2 / 14 !important;
    }

    .fullgrid .halfgridleft {
        grid-column: 1 / 13 !important;
    }

    .fullgrid .halfgridright {
        grid-column: 4 / 13 !important;
        grid-row: 2 / 2 !important;
    }

    .thirdgrid2 {
        grid-column: 2 / 7 !important;
    }

    .thirdgrid3 {
        grid-column: 8 / 14 !important;
    }

    .sixthgrid5.dualimage {
        grid-column: 8 / 11 !important;
    }

    .sixthgrid6.dualimage {
        grid-column: 11 / 14 !important;
    }

    .fullgrid .twothirdsgridright {
        grid-column: 1 / 13 !important;
    }

    .fullgrid .twothirdsgridright .thirdgrid2 {
        grid-column: 1 / 6 !important;
    }

    .sixthgrid5.dualimage {
        grid-column: 7 / 10 !important;
    }

    .sixthgrid6.dualimage {
        grid-column: 10 / 13 !important;
    }
}

/* Mobile grid adjustments */
@media screen and (max-width: 766px) {
    .fullgrid .halfgridright {
        grid-column: 1 / 13 !important;
    }

    .thirdgrid2,
    .thirdgrid3 {
        grid-column: 2 / 14 !important;
    }

    .quartergrid1,
    .quartergrid3,
    .sixthgrid1,
    .sixthgrid3,
    .sixthgrid5 {
        grid-column: 8 / 14 !important;
    }

    .quartergrid2,
    .quartergrid4,
    .sixthgrid2,
    .sixthgrid4,
    .sixthgrid6 {
        grid-column: 2 / 8 !important;
    }

    .fullgrid {
        grid-row-gap: 7px !important;
    }

    .mobileheroimage {
        grid-column: 1 / 13 !important;
    }

    .quartergrid3 {
        grid-column: 1 / 7 !important;
        grid-row: 2 / 2 !important;
    }

    .quartergrid4 {
        grid-column: 7 / 13 !important;
        grid-row: 3 / 3 !important;
    }

    .sixthgrid5.dualimage {
        grid-column: 2 / 8 !important;
        margin-top: 4rem;
    }

    .sixthgrid6.dualimage {
        grid-column: 8 / 14 !important;
        margin-top: 4rem;
    }

    .dualimagetext1 {
        grid-row: 10 / 11 !important;
    }

    .fullgrid .twothirdsgridright .thirdgrid2 {
        grid-column: 1 / 13 !important;
    }

    .fullgrid .twothirdsgridright .thirdgrid2.title {
        grid-row: 1 / 1 !important;
    }

    .sixthgrid5.dualimage {
        grid-column: 1 / 7 !important;
        grid-row: 2 / 2 !important;
    }

    .sixthgrid6.dualimage {
        grid-column: 7 / 13 !important;
        grid-row: 2 / 2 !important;
    }

    .fullgrid .twothirdsgridright .thirdgrid2 {
        grid-row: 3 / 3 !important;
    }
}


/* ==========================================================================
   9. SPACING UTILITIES
   ========================================================================== */

.overlinespacer {
    margin-top: var(--spacing-xs);
}

.smallestspacer {
    margin-bottom: 1.2rem;
}

.extrasmallspacer {
    margin-bottom: var(--spacing-md);
}

.smallspacer {
    margin-bottom: 4.2rem;
}

.standardspacer,
.standardspacerresponsive {
    margin-bottom: 9.3rem;
}

.largespacer {
    margin-bottom: 16rem;
}

.thirdgrid2 p {
    margin-top: var(--spacing-lg);
}

@media screen and (max-width: 766px) {
    .standardspacer {
        margin-bottom: 7rem;
    }

    .standardspacerresponsive {
        margin-bottom: 3.3rem;
    }

    .overlinespacer.stackable {
        margin-top: var(--spacing-lg);
    }

    .largespacer {
        margin-bottom: 12rem;
    }

    .thirdgrid2 p {
        margin-top: 3.4rem;
    }
}


/* ==========================================================================
   10. NEWS GRID & ITEMS
   Grid of clickable news/feature cards
   ========================================================================== */

.newsgrid {
    grid-auto-flow: dense;
}

@media screen and (max-width: 660px) {
    .newsgrid.landing {
        padding-top: 4rem;
    }
}

/* News item card */
.newsitem {
    padding: var(--spacing-xs);
    position: relative;
    background: var(--black);
    aspect-ratio: 1 / 1;
    transition: background-color var(--duration-slow) ease;
    overflow: hidden;
}

/* Pseudo-element for maintaining aspect ratio */
.newsitem:before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 100%;
}

/* Background image container */
.imagebackground {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    min-height: 100%;
    opacity: .55;
    transition: opacity var(--duration-slow) ease;
}

/* News item content positioning */
.newsitem figure {
    position: absolute;
    right: 0.8rem;
    bottom: var(--spacing-xs);
    line-height: 1px;
    pointer-events: none;
}

.newsitem h2 {
    line-height: 1.45rem;
    position: absolute;
    top: var(--spacing-xs);
    left: var(--spacing-xs);
    z-index: 4;
}

/* News item link overlay */
.newsitemlink {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Blank/spacer items */
.newsitem.blank,
.newsitem.dynamic-blank,
.newsitem.dynamic-blank-double,
.newsitem.tablet-dynamic-blank,
.newsitem.tablet-dynamic-blank-double {
    background-color: rgba(0, 0, 0, 0);
}

/* Background color utility classes */
.c1 { background-color: var(--c1); }
.c2 { background-color: var(--c2); }
.c3 { background-color: var(--c3); }
.c4 { background-color: var(--c4); }
.c5 { background-color: var(--c5); }

/* Hover states for colored cards */
.newsitem.c1:hover,
.newsitem.c2:hover,
.newsitem.c3:hover,
.newsitem.c4:hover,
.newsitem.c5:hover {
    background: var(--chover);
    color: var(--white);
    cursor: pointer;
}

/* Arrow animation on hover */
.arrow-container {
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 4ch;
}

.arrow {
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-smooth);
    opacity: 0;
    line-height: 2rem;
}

.newsitem:hover .arrow {
    transform: translateX(0);
    opacity: 1;
}

/* Featured news article */
.twothirdsgridright.featurednewsarticle {
    grid-template-columns: 1fr !important;
}

@media screen and (max-width: 1364px) {
    .halfgridright.featurednewsarticle {
        grid-column: 5 / 13 !important;
    }
}

@media screen and (max-width: 766px) {
    .halfgridright.featurednewsarticle {
        grid-column: 2 / 13 !important;
    }

    .arrow-container {
        width: 4ch;
    }

    .arrow {
        margin-left: .4rem;
    }
}

/* News grid - Tablet responsive */
@media screen and (max-width: 1364px) {
    .newsitem {
        grid-column: span 3 !important;
    }

    .newsitem.blank.expanding.tablet {
        grid-column: span 6 !important;
        aspect-ratio: 2 / 1;
    }

    .newsitem.blank.collapsing.tablet {
        display: none;
    }

    .newsitem figure {
        bottom: .18rem;
        right: .6rem;
    }
}

/* News grid - Mobile responsive */
@media screen and (max-width: 660px) {
    .newsitem {
        grid-column: span 6 !important;
    }

    .newsitem.blank.collapsing.mobile {
        display: none;
    }

    .newsitem.blank.collapsing.tablet.mobile {
        display: none;
    }

    .newsitem.blank.collapsing.tablet {
        display: block;
    }
}

/* News item typography - Large screens */
@media screen and (min-width: 1940px) {
    .newsitem {
        padding: 1rem;
    }

    .newsitem h2 {
        font-family: "Twklausanne 200";
        font-weight: 200;
        font-size: 1.875rem;
        line-height: 2.3rem;
        letter-spacing: -0.05rem;
        max-width: 50ch;
    }

    .newsitem figure {
        bottom: .2rem;
        right: 1.2rem;
        font-size: 1.1rem;
        line-height: 1.4rem;
        letter-spacing: -0.015rem;
    }
}

/* News item typography - Various breakpoints */
@media screen and (max-width: 970px) {
    .newsitem h2 {
        font-size: 1.1rem;
        line-height: 1.25rem;
        letter-spacing: -0.015rem;
    }
}

@media only screen and (min-width: 500px) and (max-width: 660px) {
    .newsitem h2 {
        font-size: 1.4rem;
        line-height: 1.8rem;
    }
}

@media screen and (max-width: 380px) {
    .newsitem h2 {
        font-size: .8rem;
        line-height: 1.2rem;
    }
}


/* ==========================================================================
   11. FAQ / COLLAPSIBLE SECTIONS
   Expandable content sections using checkbox hack
   ========================================================================== */

/* Hide the checkbox input */
.checkbox {
    display: none;
}

/* Collapsible container - visible by default for SEO/no-JS users */
.fullgrid.collapsiblefaq,
.fullgrid.collapsiblemechanics {
    overflow: hidden;
    transition: max-height var(--duration-slower) var(--ease-smooth);
}

/* Only collapse when JS has loaded (progressive enhancement) */
.js-loaded .fullgrid.collapsiblefaq,
.js-loaded .fullgrid.collapsiblemechanics {
    max-height: 0px;
}

/* "See more" label styling */
.seemorelabel {
    display: block;
    cursor: pointer;
    margin-top: calc(2.6rem - 7px);
    grid-column: 10 / 14;
}

label[for=seemorem1],
label[for=seemorem2] {
    text-decoration: none;
    transition: color var(--duration-normal) ease;
}

label[for=seemorem1]:hover,
label[for=seemorem2]:hover {
    color: var(--black);
    cursor: pointer;
}

/* FAQ index page grid positioning (desktop) */
/* Section title - columns 6-10 */
.thirdgrid2 {
    grid-column: 6 / 10;
}

/* Third grid right - columns 10-14 */
.thirdgrid3 {
    grid-column: 10 / 14;
}

/* Half grid positioning for fullgrid children */
.fullgrid > .halfgridleft {
    grid-column: 1 / 7;
}

.fullgrid > .halfgridright {
    grid-column: 7 / 13;
}

/* Quarter grid positioning for fullgrid children (12-column context) */
/* All videos on same row, aligned to top */
.fullgrid > .quartergrid1 {
    grid-column: 1 / 4;
    grid-row: 1;
}

.fullgrid > .quartergrid3 {
    grid-column: 7 / 10;
    grid-row: 1;
}

.fullgrid > .quartergrid4 {
    grid-column: 10 / 13;
    grid-row: 1;
}

/* Sixth grid positioning for twothirdsgridright children (8-column context) */
.twothirdsgridright > .sixthgrid5 {
    grid-column: 5 / 7;
}

.twothirdsgridright > .sixthgrid6 {
    grid-column: 7 / 9;
}

/* Nested grid context: .twothirdsgridright inside .fullgrid */
/* .fullgrid is 12 columns, .twothirdsgridright spans columns 5-13 */
.fullgrid > .twothirdsgridright {
    grid-column: 5 / 13;
}

/* .twothirdsgridright.grid is an 8-column sub-grid */
/* Both title and text positioned at row 1, columns 1-5 */
.twothirdsgridright.grid > .thirdgrid2 {
    grid-column: 1 / 5;
    grid-row: 1;
    align-self: start;
}

/* Description pushed down with margin to sit below title */
.twothirdsgridright.grid > .thirdgrid2:not(.title) {
    margin-top: 4rem;
}

/* Reset the paragraph margin since we're using container margin */
.twothirdsgridright.grid > .thirdgrid2 p {
    margin-top: 0;
}

/* Videos span both rows and align to top */
.twothirdsgridright.grid > .sixthgrid5,
.twothirdsgridright.grid > .sixthgrid6 {
    grid-row: 1 / 3;
    align-self: start;
}

/* Full grid - columns 2-14 (main content area) */
.fullgrid {
    grid-column: 2 / 14;
}

/* Two-thirds grid right - columns 6-14 */
.twothirdsgridright {
    grid-column: 6 / 14;
}

/* Overline divider - columns 6-14 */
.overline.twothirdsgridright {
    grid-column: 6 / 14;
}

/* FAQ sub-grid layout */
/* Base positioning for subgridfaq container in main page grid */
.subgridfaq {
    grid-column: 9 / 14;
}

/* Base positioning for subgridfaq elements (for pages without webflow-generated IDs) */
/* Structure: faqtext(Q), faqtext(A), keycolumn(Q), keycolumn(A) */
.subgridfaq > :nth-child(1) {
    grid-area: 1 / 2 / 2 / 6;
}

.subgridfaq > :nth-child(2) {
    grid-area: 2 / 2 / 3 / 6;
}

.subgridfaq > :nth-child(3) {
    grid-area: 1 / 1 / 2 / 2;
}

.subgridfaq > :nth-child(4) {
    grid-area: 2 / 1 / 3 / 2;
}

.subgridfaq .keycolumn {
    padding-top: .176rem;
}

/* Menu page grid fallbacks (for pages without Webflow-generated IDs) */
.howtoparent {
    grid-column: 2 / 14;
}

.checkbox {
    grid-column: 6 / 14;
}

.seemorelabel {
    grid-column: 6 / 14;
}

.fullgrid.collapsiblefaq {
    grid-column: 6 / 14;
}

@media screen and (max-width: 1364px) {
    .subgridfaq {
        grid-column: 7 / 14 !important;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important;
    }

    .subgridfaq .thirdgrid3 {
        grid-column: 8 / 14 !important;
    }

    .subgridfaq .keycolumn {
        grid-column: 1 / 1 !important;
        margin-left: 50%;
    }

    .faqtext {
        grid-column: 2 / 8 !important;
    }

    .fullgrid .subgridfaq {
        grid-column: 6 / 13 !important;
    }

    .fullgrid .subgridfaq .keycolumn {
        grid-column: 1 / 1 !important;
        padding-top: .176rem;
        margin-left: 50%;
    }

    .fullgrid .faqtext {
        grid-column: 2 / 8 !important;
    }

    .seemorelabel {
        grid-column: 8 / 13 !important;
    }
}

@media screen and (max-width: 766px) {
    .subgridfaq .keycolumn {
        margin-left: 0;
        padding-top: .15rem;
    }

    .subgridfaq {
        grid-column: 2 / 14 !important;
        grid-template-columns: repeat(12, 1fr) !important;
    }

    .faqtext {
        grid-column: 1 / 13 !important;
    }

    .faqtext h2 {
        margin-left: 3ch;
    }

    .fullgrid .subgridfaq {
        grid-column: 1 / 13 !important;
        grid-template-columns: repeat(12, 1fr) !important;
    }

    .fullgrid .subgridfaq .faqtext {
        grid-column: 1 / 12 !important;
    }

    .fullgrid .subgridfaq .keycolumn {
        margin-left: 0;
    }

    .fullgrid .faqtext h2 {
        margin-left: 3ch;
    }

    .seemorelabel {
        grid-column: 2 / 13 !important;
        margin-left: 0;
    }
}


/* ==========================================================================
   12. MECHANICS SECTION (Video Thumbnails)
   Grid of video thumbnails with play button overlay
   ========================================================================== */

/* Collapsible container for mechanics grid - visible by default for SEO */
.mechanicsparent1,
.mechanicsparent2 {
    overflow: hidden;
    transition: max-height var(--duration-slower) var(--ease-smooth);
}

/* Only collapse when JS has loaded */
.js-loaded .mechanicsparent1,
.js-loaded .mechanicsparent2 {
    max-height: 0;
}

/* Mechanics item card */
.newsitem.mechanic {
    padding: 0;
    overflow: hidden;
    transition: background-color var(--duration-slow) ease;
}

.newsitem.mechanic h2 {
    position: absolute;
    top: var(--spacing-xs);
    left: var(--spacing-xs);
    z-index: 4;
    pointer-events: none;
}

.newsitem.mechanic figure {
    z-index: 4;
}

/* Play button overlay */
#playbutton {
    fill: white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 20%;
    height: auto;
    z-index: 5;
    opacity: .5;
    mix-blend-mode: hard-light;
    transition: opacity 850ms ease;
}

.newsitem.mechanic #playbutton {
    pointer-events: none;
}

/* Mechanics hover states */
.newsitem.mechanic:hover {
    background-color: white;
    cursor: pointer;
}

.newsitem.mechanic:hover .imagebackground {
    opacity: .1;
}

.newsitem.mechanic:hover #playbutton {
    opacity: 1;
    mix-blend-mode: normal;
}


/* ==========================================================================
   13. VIDEO MODAL
   Full-screen video player overlay
   ========================================================================== */

.videoModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.86);
    justify-content: center;
    align-items: center;
    z-index: 200;
}

.videoContainer {
    width: 50vw;
}

@media screen and (max-width: 960px) {
    .videoContainer {
        width: 75vw;
    }
}

@media screen and (max-width: 766px) {
    .videoContainer {
        width: calc(100vw - 1.22rem);
    }
}


/* ==========================================================================
   14. PAGE-SPECIFIC STYLES
   Styles moved from inline <style> tags in HTML files
   ========================================================================== */

/* From index.html - Hero section text alignment */
.halfgridleft.baseline {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* From index.html - Image loading h1 jump fix */
.halfgridleft h1 {
    align-self: flex-end;
    position: relative;
    width: 100%;
    padding-top: calc(504 / 607 * 82.5%);
}

@media screen and (max-width: 1364px) {
    .halfgridleft h1 {
        padding-top: 3.6rem;
        align-self: flex-start;
    }
}

/* From faq.html - GIF item styling */
.newsitem.howtousegif {
    background: transparent;
    overflow: hidden;
}

/* From faq.html - Safari blur panel fallback */
.desktop-safari .blur-panel {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    -webkit-backdrop-filter: blur(16px);
}

.desktop-safari .newsitem:hover .blur-panel {
    display: none;
}

/* Video autoplay effects (faq.html) */
.imagebackground {
    transition: transform 0.5s;
    overflow: hidden;
}

.dynamic-video {
    transition: filter 0.5s, -webkit-filter 0.5s;
    width: 100%;
    height: auto;
}

.blur-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s;
}


/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.fullgrid.footer {
    grid-column: 2 / 14;
    margin-top: 11rem;
}

.footerlogo {
    width: 7rem;
    grid-column: 1 / 3 !important;
    grid-row: 1/1 !important;
}

.socialblock {
    grid-column: 9 / 9 !important;
}

.legalblock {
    grid-column: 10 / 12 !important;
    margin-left: 25%;
}

.contactblock {
    grid-column: 12 / 12 !important;
}

/* Credits row */
.credscopyright {
    grid-column: 1 / 3 !important;
}

.credsrights {
    grid-column: 9 / 11 !important;
}

.credsauthor {
    grid-column: 10 / 12 !important;
    margin-left: 25%;
}

.credscopyright,
.credsrights,
.credsauthor {
    grid-row: 2 / 2 !important;
    margin-top: 9rem;
    margin-bottom: 1rem;
}

.credsauthor a,
.credsauthor figure {
    display: inline;
}

/* Footer - Tablet */
@media screen and (max-width: 1364px) {
    .fullgrid.footer {
        padding-bottom: 2rem;
    }

    .footerlogo {
        max-width: 8rem;
    }

    .socialblock,
    .contactblock {
        grid-column: 7 / 13 !important;
        margin-left: 0;
        grid-row: 1/1 !important;
    }

    .legalblock {
        grid-column: 7 / 13 !important;
        grid-row: 1/1 !important;
        margin-top: 10rem;
        margin-left: 0;
    }

    .contactblock {
        grid-column: 10 / 13 !important;
    }

    .credsrights {
        display: none;
    }

    .credscopyright,
    .credsauthor {
        grid-column: 7 / 13 !important;
        margin-left: 0;
        margin-top: 3rem;
    }

    .credsauthor {
        margin-top: 4.2rem;
    }
}

/* Footer - Mobile */
@media screen and (max-width: 766px) {
    .fullgrid.footer {
        margin-top: 7rem;
        padding-bottom: 1rem;
        border-top: 1px solid var(--lightgrey);
        padding-top: .8rem;
    }

    .footerlogo {
        grid-column: 1 / 6 !important;
    }

    .footerlogo .st0 {
        display: none;
    }
}


/* ==========================================================================
   16. DEBUG MODE - Component Visualization
   Enable in DevTools console: document.body.classList.add('debug-components')
   Disable: document.body.classList.remove('debug-components')
   ========================================================================== */

body.debug-components [data-cs-component="video-player"] {
    outline: 2px dashed #e74c3c !important; /* Red */
    outline-offset: -2px;
}

body.debug-components [data-cs-component="responsive-image"] {
    outline: 2px dashed #3498db !important; /* Blue */
    outline-offset: -2px;
}

body.debug-components [data-cs-component="intro-arrow"] {
    outline: 2px dashed #2ecc71 !important; /* Green */
    outline-offset: -2px;
}

body.debug-components [data-cs-component="faq-item"] {
    outline: 2px dashed #9b59b6 !important; /* Purple */
    outline-offset: -2px;
}

body.debug-components [data-cs-component="video-modal"] {
    outline: 2px dashed #f39c12 !important; /* Orange */
    outline-offset: -2px;
}

body.debug-components [data-cs-component="collapsible"] {
    outline: 2px dashed #1abc9c !important; /* Teal */
    outline-offset: -2px;
}


/* ==========================================================================
   SECTION BACKGROUNDS
   Background elements that position on the grid behind content
   ========================================================================== */

/* Section background - positions on grid behind content */
.section-bg {
    z-index: -1;
    pointer-events: none;
    position: relative;
}

/* Extend background to cover the grid gap (7px) below the section */
.section-bg::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--grid-gutter));
    height: var(--grid-gutter);
    background: inherit;
}

/* Background color presets (reuse existing c1-c5 variables) */
.section-bg.c1 { background-color: var(--c1); }
.section-bg.c2 { background-color: var(--c2); }
.section-bg.c3 { background-color: var(--c3); }
.section-bg.c4 { background-color: var(--c4); }
.section-bg.c5 { background-color: var(--c5); }

/* Section debug mode - red solid outline */
body.debug-components [data-cs-section] {
    outline: 3px solid #c0392b !important;
    outline-offset: -3px;
}

/* Responsive: full-width on mobile */
@media screen and (max-width: 766px) {
    .section-bg {
        grid-column: 1 / 15 !important;
    }
}


/* ==========================================================================
   GRID REFLOW MODE
   Opt-in mode that neutralizes Webflow's explicit grid-area positioning,
   enabling document-order reflow for component-based layouts.
   ========================================================================== */

/* Reset all Webflow ID-based positioning to auto-placement */
body.grid-reflow [id^="w-node-"] {
    grid-area: auto !important;
}

/* Structural elements need explicit positioning even in reflow mode */
body.grid-reflow .margin.marginleft {
    grid-column: 1 / 2 !important;
    grid-row: 1 / -1 !important;  /* Span all rows */
}

body.grid-reflow .margin.marginright {
    grid-column: 14 / 15 !important;
    grid-row: 1 / -1 !important;  /* Span all rows */
}

body.grid-reflow .menublock {
    grid-column: 2 / 6 !important;
    grid-row: 1 !important;
}

body.grid-reflow .mobilemenublock {
    grid-column: 6 / 14 !important;
    grid-row: 1 !important;
}

@media screen and (max-width: 1364px) {
    body.grid-reflow .menublock {
        grid-column: 2 / 15 !important;
    }

    body.grid-reflow .mobilemenublock {
        grid-column: 2 / 15 !important;
    }
}

body.grid-reflow .fullgrid.footer {
    grid-column: 2 / 14 !important;
    /* Row is auto - footer appears last in document order */
}