/*
* Description: Object classes for design system
* Author: C Studio
* Version: 3.7.0
* Update: 2026-07-01
*
* Breakpoints:
*   --to-s   max-width: 699px
*   --from-s min-width: 700px
*   --to-m   max-width: 940px
*   --from-m min-width: 1025px
*/

/*–––––––––––––––––––––––––––––––––––––––––*/
/* GAP */
:root{
    --gap-05: calc(var(--gap-unit) * 0.5);
    --gap-1: var(--gap-unit);
    --gap-15: calc(var(--gap-unit) * 1.5);
    --gap-2: calc(var(--gap-unit) * 2);
    --gap-25: calc(var(--gap-unit) * 2.5);
    --gap-3: calc(var(--gap-unit) * 3);
    --gap-35: calc(var(--gap-unit) * 3.5);
    --gap-4: calc(var(--gap-unit) * 4);
    --gap-5: calc(var(--gap-unit) * 5);
    --gap-6: calc(var(--gap-unit) * 6);
    --gap-7: calc(var(--gap-unit) * 7);
    --gap-8: calc(var(--gap-unit) * 8);
    --gap-10: calc(var(--gap-unit) * 10);
    --gap-11: calc(var(--gap-unit) * 11);
    --gap-12: calc(var(--gap-unit) * 12);
}

/*–––––––––––––––––––––––––––––––––––––––––*/
/* O-CONTAINER */

.o-container {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width);
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
    width: 100%;
    container-type: inline-size;
    --grid-shell: min(100cqw, var(--max-width));
}

.o-container.content { max-width: var(--max-width-content); }
.o-container.narrow  { max-width: var(--max-width-content--percent); }
.o-container.flush   { max-width: inherit; padding-left: 0; padding-right: 0; }
.o-container.gutter   { max-width: 100%; }

/* 12-col track — padded inner shell (flush-grid, hero intro, any grid-aligned block) */
.o-track,
.o-container.flush .flush-grid {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--grid-margin);
    container-type: inline-size;
    --grid-shell: min(100cqw, var(--max-width));
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* O-WRAP — centered block inside a section (not full bleed) */

.o-wrap {
    margin-inline: auto;
    max-width: 100%;
    width: var(--section-wrap);
}

.o-wrap.content {
    max-width: var(--max-width-content);
    width: 100%;
}

.o-wrap.narrow {
    max-width: var(--max-width-content--percent);
    width: 100%;
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* O-GRID */

.o-grid {
    column-gap: var(--grid-gutter);
    display: grid;
    width: 100%;
}

.o-grid:is(ul, ol) {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* — columns (base) */
.o-grid.col-2  { grid-template-columns: repeat(2, 1fr); }
.o-grid.col-3  { grid-template-columns: repeat(3, 1fr); }
.o-grid.col-4  { grid-template-columns: repeat(4, 1fr); }
.o-grid.col-5  { grid-template-columns: repeat(5, 1fr); }
.o-grid.col-6  { grid-template-columns: repeat(6, 1fr); }
.o-grid.col-7  { grid-template-columns: repeat(7, 1fr); }
.o-grid.col-8  { grid-template-columns: repeat(8, 1fr); }
.o-grid.col-9  { grid-template-columns: repeat(9, 1fr); }
.o-grid.col-10 { grid-template-columns: repeat(10, 1fr); }
.o-grid.col-12 { grid-template-columns: repeat(12, 1fr); }

/* — columns --to-s (≤ 699px) */
@media (max-width: 699px) {
    .o-grid.col-1--to-s { grid-template-columns: 1fr; }
    .o-grid.col-2--to-s { grid-template-columns: repeat(2, 1fr); }
    .o-grid.col-3--to-s { grid-template-columns: repeat(3, 1fr); }
    .o-grid.col-4--to-s { grid-template-columns: repeat(4, 1fr); }
    .o-grid.col-5--to-s { grid-template-columns: repeat(5, 1fr); }
    .o-grid.col-6--to-s { grid-template-columns: repeat(6, 1fr); }
    .o-grid.col-7--to-s { grid-template-columns: repeat(7, 1fr); }
    .o-grid.col-8--to-s { grid-template-columns: repeat(8, 1fr); }
    .o-grid.col-9--to-s { grid-template-columns: repeat(9, 1fr); }
    .o-grid.col-10--to-s { grid-template-columns: repeat(10, 1fr); }
    .o-grid.col-11--to-s { grid-template-columns: repeat(11, 1fr); }
    .o-grid.col-12--to-s { grid-template-columns: repeat(12, 1fr); }
}

/* — columns --from-s (≥ 700px) */
@media (min-width: 700px) {
    .o-grid.col-2--from-s  { grid-template-columns: repeat(2, 1fr); }
    .o-grid.col-3--from-s  { grid-template-columns: repeat(3, 1fr); }
    .o-grid.col-4--from-s  { grid-template-columns: repeat(4, 1fr); }
    .o-grid.col-5--from-s  { grid-template-columns: repeat(5, 1fr); }
    .o-grid.col-6--from-s  { grid-template-columns: repeat(6, 1fr); }
    .o-grid.col-7--from-s  { grid-template-columns: repeat(7, 1fr); }
    .o-grid.col-8--from-s  { grid-template-columns: repeat(8, 1fr); }
    .o-grid.col-9--from-s  { grid-template-columns: repeat(9, 1fr); }
    .o-grid.col-10--from-s { grid-template-columns: repeat(10, 1fr); }
    .o-grid.col-11--from-s { grid-template-columns: repeat(11, 1fr); }
    .o-grid.col-12--from-s { grid-template-columns: repeat(12, 1fr); }
}

/* — columns --from-m (≥ 1025px) */
@media (min-width: 1025px) {
    .o-grid.col-2--from-m  { grid-template-columns: repeat(2, 1fr); }
    .o-grid.col-3--from-m  { grid-template-columns: repeat(3, 1fr); }
    .o-grid.col-4--from-m  { grid-template-columns: repeat(4, 1fr); }
    .o-grid.col-6--from-m  { grid-template-columns: repeat(6, 1fr); }
    .o-grid.col-8--from-m  { grid-template-columns: repeat(8, 1fr); }
    .o-grid.col-12--from-m { grid-template-columns: repeat(12, 1fr); }
}

/* — gap */
.o-grid.gutters  { gap: var(--grid-gutter); }
.o-grid.space-xs  { gap: var(--space-xs); }
.o-grid.space-s  { gap: var(--space-s); }
.o-grid.space-m  { gap: var(--space-m); }
.o-grid.space-l  { gap: var(--space-l); }
.o-grid.space-xl { gap: var(--space-xl); }
.o-grid.space-2xl { gap: var(--space-2xl); }
.o-grid.row-gutters  { row-gap: var(--grid-gutter); }
.o-grid.row-space-xs  { row-gap: var(--space-xs); }
.o-grid.row-space-s  { row-gap: var(--space-s); }
.o-grid.row-space-m  { row-gap: var(--space-m); }
.o-grid.row-space-l  { row-gap: var(--space-l); }
.o-grid.row-space-xl { row-gap: var(--space-xl); }
.o-grid.row-space-2xl { row-gap: var(--space-2xl); }

.o-grid.gutter-1 { column-gap: calc(var(--grid-gutter) * 2 + var(--col-1)); }
.o-grid.gutter-2 { column-gap: calc(var(--grid-gutter) * 2 + var(--col-2)); }
.o-grid.gutter-3 { column-gap: calc(var(--grid-gutter) * 2 + var(--col-3)); }
.o-grid.gutter-4 { column-gap: calc(var(--grid-gutter) * 2 + var(--col-4)); }

/* — item alignment */
.o-grid.top-items      { align-items: start; }
.o-grid.center-items-y { align-items: center; }
.o-grid.bottom-items   { align-items: end; }
.o-grid.stretch-items  { align-items: stretch; justify-items: stretch; }
.o-grid.left-items     { justify-items: start; }
.o-grid.center-items-x { justify-items: center; }
.o-grid.right-items    { justify-items: end; }
.o-grid.center-items   { align-items: center; justify-items: center; }

/* — cell alignment */
.o-grid.top-cells              { align-content: start; }
.o-grid.center-cells-y         { align-content: center; }
.o-grid.bottom-cells           { align-content: end; }
.o-grid.left-cells             { justify-content: start; }
.o-grid.center-cells-x         { justify-content: center; }
.o-grid.right-cells            { justify-content: end; }
.o-grid.center-cells           { align-content: center; justify-content: center; }
.o-grid.stretch-cells          { align-content: stretch; justify-content: stretch; }
.o-grid.space-between-cells    { justify-content: space-between; align-content: space-between; }
.o-grid.space-between-cells-x  { justify-content: space-between; }
.o-grid.space-between-cells-y  { align-content: space-between; }
.o-grid.space-around-cells     { justify-content: space-around; align-content: space-around; }
.o-grid.space-around-cells-x   { justify-content: space-around; }
.o-grid.space-around-cells-y   { align-content: space-around; }
.o-grid.space-evenly-cells     { justify-content: space-evenly; align-content: space-evenly; }
.o-grid.space-evenly-cells-x   { justify-content: space-evenly; }
.o-grid.space-evenly-cells-y   { align-content: space-evenly; }

/* — flow */
.o-grid.dense       { grid-auto-flow: dense; }
.o-grid.col-flow    { grid-auto-flow: column; }
.o-grid.full-height { height: 100%; }


/*–––––––––––––––––––––––––––––––––––––––––*/
/* O-GRID_ITEM */

.o-grid__item {
    grid-column: 1 / -1;
    min-width: 0;
}

/* — self alignment */
.o-grid__item.align-start   { align-self: start; }
.o-grid__item.align-center  { align-self: center; }
.o-grid__item.align-end     { align-self: end; }
.o-grid__item.align-stretch { align-self: stretch; }

@media (min-width: 700px) {
    .o-grid__item.align-start--from-s  { align-self: start; }
    .o-grid__item.align-center--from-s { align-self: center; }
    .o-grid__item.align-end--from-s    { align-self: end; }
}

@media (min-width: 1025px) {
    .o-grid__item.align-start--from-m  { align-self: start; }
    .o-grid__item.align-center--from-m { align-self: center; }
    .o-grid__item.align-end--from-m    { align-self: end; }
}

.gc-1-2  { grid-column-start: 1; grid-column-end: 2; }
.gc-1-3  { grid-column-start: 1; grid-column-end: 3; }
.gc-1-4  { grid-column-start: 1; grid-column-end: 4; }
.gc-1-5  { grid-column-start: 1; grid-column-end: 5; }
.gc-1-6  { grid-column-start: 1; grid-column-end: 6; }
.gc-1-7  { grid-column-start: 1; grid-column-end: 7; }
.gc-1-8  { grid-column-start: 1; grid-column-end: 8; }
.gc-1-9  { grid-column-start: 1; grid-column-end: 9; }
.gc-1-10 { grid-column-start: 1; grid-column-end: 10; }
.gc-1-11 { grid-column-start: 1; grid-column-end: 11; }
.gc-1-12 { grid-column-start: 1; grid-column-end: 12; }
.gc-1-13 { grid-column-start: 1; grid-column-end: 13; }

.gc-2-3  { grid-column-start: 2; grid-column-end: 3; }
.gc-2-4  { grid-column-start: 2; grid-column-end: 4; }
.gc-2-5  { grid-column-start: 2; grid-column-end: 5; }
.gc-2-6  { grid-column-start: 2; grid-column-end: 6; }
.gc-2-7  { grid-column-start: 2; grid-column-end: 7; }
.gc-2-8  { grid-column-start: 2; grid-column-end: 8; }
.gc-2-9  { grid-column-start: 2; grid-column-end: 9; }
.gc-2-10  { grid-column-start: 2; grid-column-end: 10; }
.gc-2-11  { grid-column-start: 2; grid-column-end: 11; }
.gc-2-12  { grid-column-start: 2; grid-column-end: 12; }
.gc-2-13 { grid-column-start: 2; grid-column-end: 13; }

.gc-3-4  { grid-column-start: 3; grid-column-end: 4; }
.gc-3-5  { grid-column-start: 3; grid-column-end: 5; }
.gc-3-6  { grid-column-start: 3; grid-column-end: 6; }
.gc-3-7  { grid-column-start: 3; grid-column-end: 7; }
.gc-3-8  { grid-column-start: 3; grid-column-end: 8; }
.gc-3-9  { grid-column-start: 3; grid-column-end: 9; }
.gc-3-10 { grid-column-start: 3; grid-column-end: 10; }
.gc-3-11 { grid-column-start: 3; grid-column-end: 11; }
.gc-3-12 { grid-column-start: 3; grid-column-end: 12; }
.gc-3-13 { grid-column-start: 3; grid-column-end: 13; }

.gc-4-5  { grid-column-start: 4; grid-column-end: 5; }
.gc-4-6  { grid-column-start: 4; grid-column-end: 6; }
.gc-4-7  { grid-column-start: 4; grid-column-end: 7; }
.gc-4-8  { grid-column-start: 4; grid-column-end: 8; }
.gc-4-9  { grid-column-start: 4; grid-column-end: 9; }
.gc-4-10 { grid-column-start: 4; grid-column-end: 10; }
.gc-4-11 { grid-column-start: 4; grid-column-end: 11; }
.gc-4-12 { grid-column-start: 4; grid-column-end: 12; }
.gc-4-13 { grid-column-start: 4; grid-column-end: 13; }

.gc-5-6  { grid-column-start: 5; grid-column-end: 6; }
.gc-5-7  { grid-column-start: 5; grid-column-end: 7; }
.gc-5-8  { grid-column-start: 5; grid-column-end: 8; }
.gc-5-9  { grid-column-start: 5; grid-column-end: 9; }
.gc-5-10  { grid-column-start: 5; grid-column-end: 10; }
.gc-5-11  { grid-column-start: 5; grid-column-end: 11; }
.gc-5-12  { grid-column-start: 5; grid-column-end: 12; }
.gc-5-13 { grid-column-start: 5; grid-column-end: 13; }

.gc-6-7  { grid-column-start: 6; grid-column-end: 7; }
.gc-6-8  { grid-column-start: 6; grid-column-end: 8; }
.gc-6-9  { grid-column-start: 6; grid-column-end: 9; }
.gc-6-10  { grid-column-start: 6; grid-column-end: 10; }
.gc-6-11  { grid-column-start: 6; grid-column-end: 11; }
.gc-6-12  { grid-column-start: 6; grid-column-end: 12; }
.gc-6-13 { grid-column-start: 6; grid-column-end: 13; }

.gc-7-8 { grid-column-start: 7; grid-column-end: 8; }
.gc-7-9 { grid-column-start: 7; grid-column-end: 9; }
.gc-7-10 { grid-column-start: 7; grid-column-end: 10; }
.gc-7-11 { grid-column-start: 7; grid-column-end: 11; }
.gc-7-12 { grid-column-start: 7; grid-column-end: 12; }
.gc-7-13 { grid-column-start: 7; grid-column-end: 13; }

.gc-8-9 { grid-column-start: 8; grid-column-end: 9; }
.gc-8-10 { grid-column-start: 8; grid-column-end: 10; }
.gc-8-11 { grid-column-start: 8; grid-column-end: 11; }
.gc-8-12 { grid-column-start: 8; grid-column-end: 12; }
.gc-8-13 { grid-column-start: 8; grid-column-end: 13; }

.gc-9-10 { grid-column-start: 9; grid-column-end: 10; }
.gc-9-11 { grid-column-start: 9; grid-column-end: 11; }
.gc-9-12 { grid-column-start: 9; grid-column-end: 12; }
.gc-9-13 { grid-column-start: 9; grid-column-end: 13; }

.gc-10-11 { grid-column-start: 10; grid-column-end: 11; }
.gc-10-12 { grid-column-start: 10; grid-column-end: 12; }
.gc-10-13 { grid-column-start: 10; grid-column-end: 13; }

.gc-11-12 { grid-column-start: 11; grid-column-end: 12; }
.gc-11-13 { grid-column-start: 11; grid-column-end: 13; }

.gc-12-13 { grid-column-start: 12; grid-column-end: 13; }

/* — gc --to-s (≤ 699px) — same span set as base / --from-s / --from-m */
@media (max-width: 699px) {
    .gc-1-2--to-s  { grid-column-start: 1; grid-column-end: 2; }
    .gc-1-3--to-s  { grid-column-start: 1; grid-column-end: 3; }
    .gc-1-4--to-s  { grid-column-start: 1; grid-column-end: 4; }
    .gc-1-5--to-s  { grid-column-start: 1; grid-column-end: 5; }
    .gc-1-6--to-s  { grid-column-start: 1; grid-column-end: 6; }
    .gc-1-7--to-s  { grid-column-start: 1; grid-column-end: 7; }
    .gc-1-8--to-s  { grid-column-start: 1; grid-column-end: 8; }
    .gc-1-9--to-s  { grid-column-start: 1; grid-column-end: 9; }
    .gc-1-10--to-s  { grid-column-start: 1; grid-column-end: 10; }
    .gc-1-11--to-s { grid-column-start: 1; grid-column-end: 11; }
    .gc-1-12--to-s { grid-column-start: 1; grid-column-end: 12; }
    .gc-1-13--to-s { grid-column-start: 1; grid-column-end: 13; }
    .gc-2-3--to-s  { grid-column-start: 2; grid-column-end: 3; }
    .gc-2-4--to-s  { grid-column-start: 2; grid-column-end: 4; }
    .gc-2-5--to-s  { grid-column-start: 2; grid-column-end: 5; }
    .gc-2-6--to-s  { grid-column-start: 2; grid-column-end: 6; }
    .gc-2-7--to-s  { grid-column-start: 2; grid-column-end: 7; }
    .gc-2-8--to-s  { grid-column-start: 2; grid-column-end: 8; }
    .gc-2-9--to-s  { grid-column-start: 2; grid-column-end: 9; }
    .gc-2-10--to-s  { grid-column-start: 2; grid-column-end: 10; }
    .gc-2-11--to-s  { grid-column-start: 2; grid-column-end: 11; }
    .gc-2-12--to-s  { grid-column-start: 2; grid-column-end: 12; }
    .gc-2-13--to-s { grid-column-start: 2; grid-column-end: 13; }
    .gc-3-4--to-s  { grid-column-start: 3; grid-column-end: 4; }
    .gc-3-5--to-s  { grid-column-start: 3; grid-column-end: 5; }
    .gc-3-6--to-s  { grid-column-start: 3; grid-column-end: 6; }
    .gc-3-7--to-s  { grid-column-start: 3; grid-column-end: 7; }
    .gc-3-8--to-s  { grid-column-start: 3; grid-column-end: 8; }
    .gc-3-9--to-s  { grid-column-start: 3; grid-column-end: 9; }
    .gc-3-10--to-s  { grid-column-start: 3; grid-column-end: 10; }
    .gc-3-11--to-s  { grid-column-start: 3; grid-column-end: 11; }
    .gc-3-12--to-s  { grid-column-start: 3; grid-column-end: 12; }
    .gc-3-13--to-s { grid-column-start: 3; grid-column-end: 13; }
    .gc-4-5--to-s  { grid-column-start: 4; grid-column-end: 5; }
    .gc-4-6--to-s  { grid-column-start: 4; grid-column-end: 6; }
    .gc-4-7--to-s  { grid-column-start: 4; grid-column-end: 7; }
    .gc-4-8--to-s  { grid-column-start: 4; grid-column-end: 8; }
    .gc-4-9--to-s  { grid-column-start: 4; grid-column-end: 9; }
    .gc-4-10--to-s  { grid-column-start: 4; grid-column-end: 10; }
    .gc-4-11--to-s  { grid-column-start: 4; grid-column-end: 11; }
    .gc-4-12--to-s  { grid-column-start: 4; grid-column-end: 12; }
    .gc-4-13--to-s { grid-column-start: 4; grid-column-end: 13; }
    .gc-5-6--to-s  { grid-column-start: 5; grid-column-end: 6; }
    .gc-5-7--to-s  { grid-column-start: 5; grid-column-end: 7; }
    .gc-5-8--to-s  { grid-column-start: 5; grid-column-end: 8; }
    .gc-5-9--to-s  { grid-column-start: 5; grid-column-end: 9; }
    .gc-5-10--to-s  { grid-column-start: 5; grid-column-end: 10; }
    .gc-5-11--to-s  { grid-column-start: 5; grid-column-end: 11; }
    .gc-5-12--to-s  { grid-column-start: 5; grid-column-end: 12; }
    .gc-5-13--to-s { grid-column-start: 5; grid-column-end: 13; }
    .gc-6-7--to-s  { grid-column-start: 6; grid-column-end: 7; }
    .gc-6-8--to-s  { grid-column-start: 6; grid-column-end: 8; }
    .gc-6-9--to-s  { grid-column-start: 6; grid-column-end: 9; }
    .gc-6-10--to-s  { grid-column-start: 6; grid-column-end: 10; }
    .gc-6-11--to-s  { grid-column-start: 6; grid-column-end: 11; }
    .gc-6-12--to-s  { grid-column-start: 6; grid-column-end: 12; }
    .gc-6-13--to-s { grid-column-start: 6; grid-column-end: 13; }
    .gc-7-8--to-s  { grid-column-start: 7; grid-column-end: 8; }
    .gc-7-9--to-s  { grid-column-start: 7; grid-column-end: 9; }
    .gc-7-10--to-s  { grid-column-start: 7; grid-column-end: 10; }
    .gc-7-11--to-s  { grid-column-start: 7; grid-column-end: 11; }
    .gc-7-12--to-s  { grid-column-start: 7; grid-column-end: 12; }
    .gc-7-13--to-s { grid-column-start: 7; grid-column-end: 13; }
    .gc-8-9--to-s  { grid-column-start: 8; grid-column-end: 9; }
    .gc-8-10--to-s  { grid-column-start: 8; grid-column-end: 10; }
    .gc-8-11--to-s  { grid-column-start: 8; grid-column-end: 11; }
    .gc-8-12--to-s  { grid-column-start: 8; grid-column-end: 12; }
    .gc-8-13--to-s { grid-column-start: 8; grid-column-end: 13; }
    .gc-9-10--to-s  { grid-column-start: 9; grid-column-end: 10; }
    .gc-9-11--to-s  { grid-column-start: 9; grid-column-end: 11; }
    .gc-9-12--to-s  { grid-column-start: 9; grid-column-end: 12; }
    .gc-9-13--to-s { grid-column-start: 9; grid-column-end: 13; }
    .gc-10-11--to-s  { grid-column-start: 10; grid-column-end: 11; }
    .gc-10-12--to-s  { grid-column-start: 10; grid-column-end: 12; }
    .gc-10-13--to-s { grid-column-start: 10; grid-column-end: 13; }
    .gc-11-12--to-s  { grid-column-start: 11; grid-column-end: 12; }
    .gc-11-13--to-s { grid-column-start: 11; grid-column-end: 13; }
    .gc-12-13--to-s { grid-column-start: 12; grid-column-end: 13; }
}

/* — gc --from-s */
@media (min-width: 700px) {
    .gc-1-2--from-s  { grid-column-start: 1; grid-column-end: 2; }
    .gc-1-3--from-s  { grid-column-start: 1; grid-column-end: 3; }
    .gc-1-4--from-s  { grid-column-start: 1; grid-column-end: 4; }
    .gc-1-5--from-s  { grid-column-start: 1; grid-column-end: 5; }
    .gc-1-6--from-s  { grid-column-start: 1; grid-column-end: 6; }
    .gc-1-7--from-s  { grid-column-start: 1; grid-column-end: 7; }
    .gc-1-8--from-s  { grid-column-start: 1; grid-column-end: 8; }
    .gc-1-9--from-s  { grid-column-start: 1; grid-column-end: 9; }
    .gc-1-10--from-s  { grid-column-start: 1; grid-column-end: 10; }
    .gc-1-11--from-s { grid-column-start: 1; grid-column-end: 11; }
    .gc-1-12--from-s { grid-column-start: 1; grid-column-end: 12; }
    .gc-1-13--from-s { grid-column-start: 1; grid-column-end: 13; }
    .gc-2-3--from-s  { grid-column-start: 2; grid-column-end: 3; }
    .gc-2-4--from-s  { grid-column-start: 2; grid-column-end: 4; }
    .gc-2-5--from-s  { grid-column-start: 2; grid-column-end: 5; }
    .gc-2-6--from-s  { grid-column-start: 2; grid-column-end: 6; }
    .gc-2-7--from-s  { grid-column-start: 2; grid-column-end: 7; }
    .gc-2-8--from-s  { grid-column-start: 2; grid-column-end: 8; }
    .gc-2-9--from-s  { grid-column-start: 2; grid-column-end: 9; }
    .gc-2-10--from-s  { grid-column-start: 2; grid-column-end: 10; }
    .gc-2-11--from-s  { grid-column-start: 2; grid-column-end: 11; }
    .gc-2-12--from-s  { grid-column-start: 2; grid-column-end: 12; }
    .gc-2-13--from-s { grid-column-start: 2; grid-column-end: 13; }
    .gc-3-4--from-s  { grid-column-start: 3; grid-column-end: 4; }
    .gc-3-5--from-s  { grid-column-start: 3; grid-column-end: 5; }
    .gc-3-6--from-s  { grid-column-start: 3; grid-column-end: 6; }
    .gc-3-7--from-s  { grid-column-start: 3; grid-column-end: 7; }
    .gc-3-8--from-s  { grid-column-start: 3; grid-column-end: 8; }
    .gc-3-9--from-s  { grid-column-start: 3; grid-column-end: 9; }
    .gc-3-10--from-s  { grid-column-start: 3; grid-column-end: 10; }
    .gc-3-11--from-s  { grid-column-start: 3; grid-column-end: 11; }
    .gc-3-12--from-s  { grid-column-start: 3; grid-column-end: 12; }
    .gc-3-13--from-s { grid-column-start: 3; grid-column-end: 13; }
    .gc-4-5--from-s  { grid-column-start: 4; grid-column-end: 5; }
    .gc-4-6--from-s  { grid-column-start: 4; grid-column-end: 6; }
    .gc-4-7--from-s  { grid-column-start: 4; grid-column-end: 7; }
    .gc-4-8--from-s  { grid-column-start: 4; grid-column-end: 8; }
    .gc-4-9--from-s  { grid-column-start: 4; grid-column-end: 9; }
    .gc-4-10--from-s  { grid-column-start: 4; grid-column-end: 10; }
    .gc-4-11--from-s  { grid-column-start: 4; grid-column-end: 11; }
    .gc-4-12--from-s  { grid-column-start: 4; grid-column-end: 12; }
    .gc-4-13--from-s { grid-column-start: 4; grid-column-end: 13; }
    .gc-5-6--from-s  { grid-column-start: 5; grid-column-end: 6; }
    .gc-5-7--from-s  { grid-column-start: 5; grid-column-end: 7; }
    .gc-5-8--from-s  { grid-column-start: 5; grid-column-end: 8; }
    .gc-5-9--from-s  { grid-column-start: 5; grid-column-end: 9; }
    .gc-5-10--from-s  { grid-column-start: 5; grid-column-end: 10; }
    .gc-5-11--from-s  { grid-column-start: 5; grid-column-end: 11; }
    .gc-5-12--from-s  { grid-column-start: 5; grid-column-end: 12; }
    .gc-5-13--from-s { grid-column-start: 5; grid-column-end: 13; }
    .gc-6-7--from-s  { grid-column-start: 6; grid-column-end: 7; }
    .gc-6-8--from-s  { grid-column-start: 6; grid-column-end: 8; }
    .gc-6-9--from-s  { grid-column-start: 6; grid-column-end: 9; }
    .gc-6-10--from-s  { grid-column-start: 6; grid-column-end: 10; }
    .gc-6-11--from-s  { grid-column-start: 6; grid-column-end: 11; }
    .gc-6-12--from-s  { grid-column-start: 6; grid-column-end: 12; }
    .gc-6-13--from-s { grid-column-start: 6; grid-column-end: 13; }
    .gc-7-8--from-s  { grid-column-start: 7; grid-column-end: 8; }
    .gc-7-9--from-s  { grid-column-start: 7; grid-column-end: 9; }
    .gc-7-10--from-s  { grid-column-start: 7; grid-column-end: 10; }
    .gc-7-11--from-s  { grid-column-start: 7; grid-column-end: 11; }
    .gc-7-12--from-s  { grid-column-start: 7; grid-column-end: 12; }
    .gc-7-13--from-s { grid-column-start: 7; grid-column-end: 13; }
    .gc-8-9--from-s  { grid-column-start: 8; grid-column-end: 9; }
    .gc-8-10--from-s  { grid-column-start: 8; grid-column-end: 10; }
    .gc-8-11--from-s  { grid-column-start: 8; grid-column-end: 11; }
    .gc-8-12--from-s  { grid-column-start: 8; grid-column-end: 12; }
    .gc-8-13--from-s { grid-column-start: 8; grid-column-end: 13; }
    .gc-9-10--from-s  { grid-column-start: 9; grid-column-end: 10; }
    .gc-9-11--from-s  { grid-column-start: 9; grid-column-end: 11; }
    .gc-9-12--from-s  { grid-column-start: 9; grid-column-end: 12; }
    .gc-9-13--from-s { grid-column-start: 9; grid-column-end: 13; }
    .gc-10-11--from-s  { grid-column-start: 10; grid-column-end: 11; }
    .gc-10-12--from-s  { grid-column-start: 10; grid-column-end: 12; }
    .gc-10-13--from-s { grid-column-start: 10; grid-column-end: 13; }
    .gc-11-12--from-s  { grid-column-start: 11; grid-column-end: 12; }
    .gc-11-13--from-s { grid-column-start: 11; grid-column-end: 13; }
    .gc-12-13--from-s { grid-column-start: 12; grid-column-end: 13; }
}

/* — gc --from-m */
@media (min-width: 1025px) {
    .gc-1-2--from-m  { grid-column-start: 1; grid-column-end: 2; }
    .gc-1-3--from-m  { grid-column-start: 1; grid-column-end: 3; }
    .gc-1-4--from-m  { grid-column-start: 1; grid-column-end: 4; }
    .gc-1-5--from-m  { grid-column-start: 1; grid-column-end: 5; }
    .gc-1-6--from-m  { grid-column-start: 1; grid-column-end: 6; }
    .gc-1-7--from-m  { grid-column-start: 1; grid-column-end: 7; }
    .gc-1-8--from-m  { grid-column-start: 1; grid-column-end: 8; }
    .gc-1-9--from-m  { grid-column-start: 1; grid-column-end: 9; }
    .gc-1-10--from-m  { grid-column-start: 1; grid-column-end: 10; }
    .gc-1-11--from-m  { grid-column-start: 1; grid-column-end: 11; }
    .gc-1-12--from-m  { grid-column-start: 1; grid-column-end: 12; }
    .gc-1-13--from-m  { grid-column-start: 1; grid-column-end: 13; }
    .gc-2-3--from-m  { grid-column-start: 2; grid-column-end: 3; }
    .gc-2-4--from-m  { grid-column-start: 2; grid-column-end: 4; }
    .gc-2-5--from-m  { grid-column-start: 2; grid-column-end: 5; }
    .gc-2-6--from-m  { grid-column-start: 2; grid-column-end: 6; }
    .gc-2-7--from-m  { grid-column-start: 2; grid-column-end: 7; }
    .gc-2-8--from-m  { grid-column-start: 2; grid-column-end: 8; }
    .gc-2-9--from-m  { grid-column-start: 2; grid-column-end: 9; }
    .gc-2-10--from-m  { grid-column-start: 2; grid-column-end: 10; }
    .gc-2-11--from-m  { grid-column-start: 2; grid-column-end: 11; }
    .gc-2-12--from-m  { grid-column-start: 2; grid-column-end: 12; }
    .gc-2-13--from-m { grid-column-start: 2; grid-column-end: 13; }
    .gc-3-4--from-m  { grid-column-start: 3; grid-column-end: 4; }
    .gc-3-5--from-m  { grid-column-start: 3; grid-column-end: 5; }
    .gc-3-6--from-m  { grid-column-start: 3; grid-column-end: 6; }
    .gc-3-7--from-m  { grid-column-start: 3; grid-column-end: 7; }
    .gc-3-8--from-m  { grid-column-start: 3; grid-column-end: 8; }
    .gc-3-9--from-m  { grid-column-start: 3; grid-column-end: 9; }
    .gc-3-10--from-m  { grid-column-start: 3; grid-column-end: 10; }
    .gc-3-11--from-m  { grid-column-start: 3; grid-column-end: 11; }
    .gc-3-12--from-m  { grid-column-start: 3; grid-column-end: 12; }
    .gc-3-13--from-m  { grid-column-start: 3; grid-column-end: 13; }
    .gc-4-5--from-m  { grid-column-start: 4; grid-column-end: 5; }
    .gc-4-6--from-m  { grid-column-start: 4; grid-column-end: 6; }
    .gc-4-7--from-m  { grid-column-start: 4; grid-column-end: 7; }
    .gc-4-8--from-m  { grid-column-start: 4; grid-column-end: 8; }
    .gc-4-9--from-m  { grid-column-start: 4; grid-column-end: 9; }
    .gc-4-10--from-m  { grid-column-start: 4; grid-column-end: 10; }
    .gc-4-11--from-m  { grid-column-start: 4; grid-column-end: 11; }
    .gc-4-12--from-m  { grid-column-start: 4; grid-column-end: 12; }
    .gc-4-13--from-m  { grid-column-start: 4; grid-column-end: 13; }
    .gc-5-6--from-m  { grid-column-start: 5; grid-column-end: 6; }
    .gc-5-7--from-m  { grid-column-start: 5; grid-column-end: 7; }
    .gc-5-8--from-m  { grid-column-start: 5; grid-column-end: 8; }
    .gc-5-9--from-m  { grid-column-start: 5; grid-column-end: 9; }
    .gc-5-10--from-m  { grid-column-start: 5; grid-column-end: 10; }
    .gc-5-11--from-m  { grid-column-start: 5; grid-column-end: 11; }
    .gc-5-12--from-m  { grid-column-start: 5; grid-column-end: 12; }
    .gc-5-13--from-m  { grid-column-start: 5; grid-column-end: 13; }
    .gc-6-7--from-m  { grid-column-start: 6; grid-column-end: 7; }
    .gc-6-8--from-m  { grid-column-start: 6; grid-column-end: 8; }
    .gc-6-9--from-m  { grid-column-start: 6; grid-column-end: 9; }
    .gc-6-10--from-m  { grid-column-start: 6; grid-column-end: 10; }
    .gc-6-11--from-m  { grid-column-start: 6; grid-column-end: 11; }
    .gc-6-12--from-m  { grid-column-start: 6; grid-column-end: 12; }
    .gc-6-13--from-m  { grid-column-start: 6; grid-column-end: 13; }
    .gc-7-8--from-m  { grid-column-start: 7; grid-column-end: 8; }
    .gc-7-9--from-m  { grid-column-start: 7; grid-column-end: 9; }
    .gc-7-10--from-m  { grid-column-start: 7; grid-column-end: 10; }
    .gc-7-11--from-m  { grid-column-start: 7; grid-column-end: 11; }
    .gc-7-12--from-m  { grid-column-start: 7; grid-column-end: 12; }
    .gc-7-13--from-m  { grid-column-start: 7; grid-column-end: 13; }
    .gc-8-9--from-m  { grid-column-start: 8; grid-column-end: 9; }
    .gc-8-10--from-m  { grid-column-start: 8; grid-column-end: 10; }
    .gc-8-11--from-m  { grid-column-start: 8; grid-column-end: 11; }
    .gc-8-12--from-m  { grid-column-start: 8; grid-column-end: 12; }
    .gc-8-13--from-m  { grid-column-start: 8; grid-column-end: 13; }
    .gc-9-10--from-m  { grid-column-start: 9; grid-column-end: 10; }
    .gc-9-11--from-m  { grid-column-start: 9; grid-column-end: 11; }
    .gc-9-12--from-m  { grid-column-start: 9; grid-column-end: 12; }
    .gc-9-13--from-m  { grid-column-start: 9; grid-column-end: 13; }
    .gc-10-11--from-m  { grid-column-start: 10; grid-column-end: 11; }
    .gc-10-12--from-m  { grid-column-start: 10; grid-column-end: 12; }
    .gc-10-13--from-m  { grid-column-start: 10; grid-column-end: 13; }
    .gc-11-12--from-m  { grid-column-start: 11; grid-column-end: 12; }
    .gc-11-13--from-m  { grid-column-start: 11; grid-column-end: 13; }
    .gc-12-13--from-m  { grid-column-start: 12; grid-column-end: 13; }
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* O-FLEX */

.o-flex { display: flex; }

.o-flex:is(ul, ol) {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* — direction */
.o-flex.col          { flex-direction: column; }
.o-flex.wrap         { flex-wrap: wrap; }
.o-flex.nowrap       { flex-wrap: nowrap; }
.o-flex.row-reverse  { flex-direction: row-reverse; }
.o-flex.col-reverse  { flex-direction: column-reverse; }

/* — justify */
.o-flex.start   { justify-content: flex-start; }
.o-flex.end     { justify-content: flex-end; }
.o-flex.center  { justify-content: center; }
.o-flex.between { justify-content: space-between; }
.o-flex.around  { justify-content: space-around; }
.o-flex.evenly  { justify-content: space-evenly; }

/* — align */
.o-flex.top     { align-items: flex-start; }
.o-flex.middle  { align-items: center; }
.o-flex.bottom  { align-items: flex-end; }
.o-flex.stretch { align-items: stretch; }

/* — align content (for wrapped rows/columns) */
.o-flex.top-content    { align-content: flex-start; }
.o-flex.middle-content { align-content: center; }
.o-flex.bottom-content { align-content: flex-end; }

/* — compound (justify + align shorthand for common patterns) */
.o-flex.center-middle  { justify-content: center;        align-items: center; }
.o-flex.between-middle { justify-content: space-between; align-items: center; }
.o-flex.start-middle   { justify-content: flex-start;    align-items: center; }
.o-flex.end-middle     { justify-content: flex-end;      align-items: center; }

/* — gap (row flex: gap between --col-* spans; col flex: vertical gap only) */
.o-flex.gutters   { gap: var(--grid-gutter); --flex-col-gap: var(--grid-gutter); }
.o-flex.space-xs  { gap: var(--space-xs);    --flex-col-gap: var(--space-xs); }
.o-flex.space-s   { gap: var(--space-s);     --flex-col-gap: var(--space-s); }
.o-flex.space-m   { gap: var(--space-m);     --flex-col-gap: var(--space-m); }
.o-flex.space-l   { gap: var(--space-l);     --flex-col-gap: var(--space-l); }
.o-flex.space-xl  { gap: var(--space-xl);    --flex-col-gap: var(--space-xl); }
.o-flex.space-2xl { gap: var(--space-2xl);  --flex-col-gap: var(--space-2xl); }
.o-flex.row-gutters  { row-gap: var(--grid-gutter); }
.o-flex.row-space-xs  { row-gap: var(--space-xs); }
.o-flex.row-space-s  { row-gap: var(--space-s); }
.o-flex.row-space-m  { row-gap: var(--space-m); }
.o-flex.row-space-l  { row-gap: var(--space-l); }
.o-flex.row-space-xl { row-gap: var(--space-xl); }
.o-flex.row-space-2xl { row-gap: var(--space-2xl); }

/* column flex: gap is vertical — horizontal fractions ignore --flex-col-gap */
.o-flex.col,
.o-flex.col-reverse { --flex-col-gap: 0px; }

@media (max-width: 699px) {
    .o-flex.col--to-s { --flex-col-gap: 0px; }
}

@media (max-width: 940px) {
    .o-flex.col--to-m { --flex-col-gap: 0px; }
}

@media (min-width: 700px) {
    .o-flex.col--from-s { --flex-col-gap: 0px; }
}

@media (min-width: 1025px) {
    .o-flex.col--from-m { --flex-col-gap: 0px; }
}

/* — direction --to-s */
@media (max-width: 699px) {
    .o-flex.col--to-s    { flex-direction: column; }
    .o-flex.wrap--to-s   { flex-wrap: wrap; }
    .o-flex.center--to-s { justify-content: center; }
    .o-flex.middle--to-s { align-items: center; }
}

/* — direction --to-m */
@media (max-width: 940px) {
    .o-flex.col--to-m    { flex-direction: column; }
    .o-flex.wrap--to-m   { flex-wrap: wrap; }
    .o-flex.center--to-m { justify-content: center; }
    .o-flex.middle--to-m { align-items: center; }
}

/* — direction --from-s */
@media (min-width: 700px) {
    .o-flex.col--from-s { flex-direction: column; }
    .o-flex.row--from-s { flex-direction: row; }
}

/* — direction --from-m */
@media (min-width: 1025px) {
    .o-flex.col--from-m { flex-direction: column; }
    .o-flex.row--from-m { flex-direction: row; }
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* O-FLEX_ITEM */

/* — sizing */
.o-flex__item.grow   { flex: 1; }
.o-flex__item.shrink { flex-shrink: 1; }
.o-flex__item.none   { flex: none; }
.o-flex__item.auto   { flex: 1 1 auto; }

/* — fractions (base) */
/* flex: 0 0 var(--flex-col-*) — spans match --col-N; pair row + .gutters with o-track. min-width: 0 mirrors o-grid__item */
.o-flex__item.full { flex: 0 0 100%; min-width: 0; }
.o-flex__item.col-1-2 { flex: 0 0 var(--flex-col-1-2); min-width: 0; }
.o-flex__item.col-1-3 { flex: 0 0 var(--flex-col-1-3); min-width: 0; }
.o-flex__item.col-2-3 { flex: 0 0 var(--flex-col-2-3); min-width: 0; }
.o-flex__item.col-1-4 { flex: 0 0 var(--flex-col-1-4); min-width: 0; }
.o-flex__item.col-3-4 { flex: 0 0 var(--flex-col-3-4); min-width: 0; }

/* — fractions --to-s */
@media (max-width: 699px) {
    .o-flex__item.full--to-s { flex: 0 0 100%; min-width: 0; }
    .o-flex__item.col-1-2--to-s { flex: 0 0 var(--flex-col-1-2); min-width: 0; }
    .o-flex__item.col-1-3--to-s { flex: 0 0 var(--flex-col-1-3); min-width: 0; }
    .o-flex__item.col-2-3--to-s { flex: 0 0 var(--flex-col-2-3); min-width: 0; }
    .o-flex__item.col-1-4--to-s { flex: 0 0 var(--flex-col-1-4); min-width: 0; }
    .o-flex__item.col-3-4--to-s { flex: 0 0 var(--flex-col-3-4); min-width: 0; }
}

/* — fractions --from-s */
@media (min-width: 700px) {
    .o-flex__item.full--from-s { flex: 0 0 100%; min-width: 0; }
    .o-flex__item.col-1-2--from-s { flex: 0 0 var(--flex-col-1-2); min-width: 0; }
    .o-flex__item.col-1-3--from-s { flex: 0 0 var(--flex-col-1-3); min-width: 0; }
    .o-flex__item.col-2-3--from-s { flex: 0 0 var(--flex-col-2-3); min-width: 0; }
    .o-flex__item.col-1-4--from-s { flex: 0 0 var(--flex-col-1-4); min-width: 0; }
    .o-flex__item.col-3-4--from-s { flex: 0 0 var(--flex-col-3-4); min-width: 0; }
}

/* — fractions --from-m */
@media (min-width: 1025px) {
    .o-flex__item.full--from-m { flex: 0 0 100%; min-width: 0; }
    .o-flex__item.col-1-2--from-m { flex: 0 0 var(--flex-col-1-2); min-width: 0; }
    .o-flex__item.col-1-3--from-m { flex: 0 0 var(--flex-col-1-3); min-width: 0; }
    .o-flex__item.col-2-3--from-m { flex: 0 0 var(--flex-col-2-3); min-width: 0; }
    .o-flex__item.col-1-4--from-m { flex: 0 0 var(--flex-col-1-4); min-width: 0; }
    .o-flex__item.col-3-4--from-m { flex: 0 0 var(--flex-col-3-4); min-width: 0; }
}

/* — self alignment */
.o-flex__item.self-start   { align-self: flex-start; }
.o-flex__item.self-center  { align-self: center; }
.o-flex__item.self-end     { align-self: flex-end; }
.o-flex__item.self-stretch { align-self: stretch; }

/* — margin auto */
.o-flex__item.ml-auto { margin-left: auto; }
.o-flex__item.mr-auto { margin-right: auto; }
.o-flex__item.mt-auto { margin-top: auto; }
.o-flex__item.mb-auto { margin-bottom: auto; }


/*–––––––––––––––––––––––––––––––––––––––––*/
/* O-RATIO */

.o-ratio {
    display: block;
    overflow: hidden;
    width: 100%;
}

.o-ratio.ratio-1-1  { aspect-ratio: 1 / 1; }
.o-ratio.ratio-4-3  { aspect-ratio: 4 / 3; }
.o-ratio.ratio-3-2  { aspect-ratio: 3 / 2; }
.o-ratio.ratio-16-9 { aspect-ratio: 16 / 9; }
.o-ratio.ratio-21-9 { aspect-ratio: 21 / 9; }
.o-ratio.ratio-2-3  { aspect-ratio: 2 / 3; }
.o-ratio.ratio-3-4  { aspect-ratio: 3 / 4; }

.o-ratio_content,
.o-ratio > img,
.o-ratio > video,
.o-ratio > iframe {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}


/*–––––––––––––––––––––––––––––––––––––––––*/
/* O-ICON */

.o-icon {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
}

.o-icon svg {
    display: block;
    fill: currentColor;
    height: var(--icon-m);
    width: var(--icon-m);
}

.o-icon.xs svg { width: var(--icon-xs); height: var(--icon-xs); }
.o-icon.s  svg { width: var(--icon-s);  height: var(--icon-s);  }
.o-icon.m  svg { width: var(--icon-m);  height: var(--icon-m);  }
.o-icon.l  svg { width: var(--icon-l);  height: var(--icon-l);  }


/*–––––––––––––––––––––––––––––––––––––––––*/
/* O-SCROLL */
/* Full-viewport section with scrollable overflow.        */
/* Use for hero/stage sections that fill the screen.      */
/* Add overflow-y: auto when content may exceed viewport. */

.o-scroll {
    min-height: var(--vh-max);
    overflow-x: hidden;
    overflow-y: auto;
}