/**
 * CHAOS INTERACTIVE — Joomla Cassiopeia
 * Place this file in:
 * media/templates/site/cassiopeia/css/user.css
 */

/* 1. DESIGN TOKENS */
:root {
  --chaos-bg: #060C11;
  --chaos-bg-2: #0B1219;
  --chaos-surface: #101820;
  --chaos-surface-2: #161E28;
  --chaos-surface-3: #222936;
  --chaos-border: #2A3440;
  --chaos-border-light: #404A56;

  --chaos-text: #F0F0EB;
  --chaos-text-secondary: #A9B1B9;
  --chaos-text-muted: #6B7480;

  --chaos-green: #8DFF68;
  --chaos-green-hover: #A5FF87;
  --chaos-blue: #438DDA;
  --chaos-purple: #9B63E8;
  --chaos-gold: #CDB68B;

  --chaos-radius: 6px;
  --chaos-radius-lg: 12px;
  --chaos-max-width: 1600px;
  --chaos-transition: .25s ease;
}

/* 2. GLOBAL */
html { scroll-behavior: smooth; }
body {
  background: var(--chaos-bg);
  color: var(--chaos-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
body .site { background: var(--chaos-bg); }
body .site-grid { margin-top: -1em; }
body.wrapper-fluid .site-grid { grid-gap: 0; }
body .container-component { padding-top: 0; padding-bottom: 0; }
.chaos-home .container,
.chaos-container {
  width: min(calc(100% - 3rem), var(--chaos-max-width));
  margin-inline: auto;
}
.chaos-home * { box-sizing: border-box; }
.chaos-home h1, .chaos-home h2, .chaos-home h3 {
  color: var(--chaos-text);
  font-weight: 800;
  letter-spacing: -.035em;
}
.chaos-home h1 { font-size: clamp(3.5rem, 8vw, 5.5rem); line-height: .88; }
.chaos-home h2 { font-size: clamp(2.2rem, 3vw, 4rem); line-height: .98; margin: 0; }
.chaos-home h3 { margin: 0; }
.chaos-home p { color: var(--chaos-text-secondary); }
.chaos-home a { text-decoration: none; }

.back-to-top-link { bottom: 3rem; }

/* 3. HEADER / CASSIOPEIA */
.container-header,
.container-header .container-nav,
.container-header .grid-child {
  background: rgba(6,12,17,0);
  width: auto;
  display: inline-block;
}
.container-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--chaos-border);
  box-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.container-header .grid-child { padding-top: .85rem; padding-bottom: .85rem; }
.brand-logo img { max-height: 52px; width: auto; }
.metismenu.mod-menu > li > a {
  color: var(--chaos-text-secondary);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.metismenu.mod-menu > li > a:hover,
.metismenu.mod-menu > li.active > a { color: var(--chaos-green); }
.metismenu.mod-menu > li.active > a::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 6px;
  background: var(--chaos-green);
}
.container-header .mod-menu { color: var(--chaos-text); }

/* 4. REUSABLE ELEMENTS */
.chaos-section {
  padding: clamp(4.5rem, 9vw, 5rem) 0;
  border-top: 1px solid var(--chaos-border);
}
.chaos-section--alt {
  background: linear-gradient(180deg, var(--chaos-bg-2), var(--chaos-bg));
}
.chaos-eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: var(--chaos-green);
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.chaos-eyebrow--blue { color: var(--chaos-blue); }
.chaos-eyebrow--purple { color: var(--chaos-purple); }
.chaos-eyebrow--gold { color: var(--chaos-gold); }
.chaos-lead {
  max-width: 650px;
  margin: 1.25rem 0 1.25rem;
  font-size: 1.05rem;
}
.chaos-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 48px;
  padding: .8rem 1.35rem;
  border: 1px solid var(--chaos-green);
  border-radius: var(--chaos-radius);
  background: var(--chaos-green);
  color: #060C11 !important;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform var(--chaos-transition), box-shadow var(--chaos-transition), background var(--chaos-transition);
}
.chaos-button:hover {
  background: var(--chaos-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(141,255,104,.18);
}
.chaos-button--outline {
  background: transparent;
  border-color: var(--chaos-border-light);
  color: var(--chaos-text) !important;
}
.chaos-button--outline:hover {
  background: rgba(141,255,104,.05);
  border-color: var(--chaos-green);
  color: var(--chaos-green) !important;
}
.chaos-button--blue { background: var(--chaos-blue); border-color: var(--chaos-blue); color: #fff !important; }

/* 5. HERO */
.chaos-hero {
  position: relative;
  min-height: min(600px, 84vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--chaos-bg);
}
.chaos-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(6,12,17,.99) 0%, rgba(6,12,17,.88) 35%, rgba(6,12,17,.25) 75%, rgba(6,12,17,.2) 100%),
    var(--chaos-hero-image, none);
  background-size: cover;
  background-position: center;
}
.chaos-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: linear-gradient(transparent, var(--chaos-bg));
}
.chaos-hero__inner { position: relative; z-index: 2; padding: 7rem 0 5rem; }
.chaos-hero__content { max-width: 780px; }
.chaos-hero__title { margin: 0; text-transform: uppercase; }
.chaos-hero__title span { color: var(--chaos-green); }
.chaos-hero__subtitle {
  margin: 1.4rem 0 .5rem;
  color: var(--chaos-text);
  font-size: clamp(.85rem, 1.5vw, 1.1rem);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.chaos-hero__description { max-width: 590px; margin: 1rem 0 2rem; font-size: 1.05rem; }
.chaos-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* 6. STATS */
.chaos-stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--chaos-border);
  border-bottom: 1px solid var(--chaos-border);
}
.chaos-stat { padding: 1.7rem 2rem; border-right: 1px solid var(--chaos-border); }
.chaos-stat:last-child { border-right: 0; }
.chaos-stat__number { display:block; color:var(--chaos-text); font-size:1.6rem; font-weight:900; }
.chaos-stat__label { color:var(--chaos-text-muted); font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

/* 7. SECTION INTRO */
.chaos-split-intro {
  display: grid;
  grid-template-columns: minmax(240px,.9fr) minmax(0,2fr);
  gap: 4rem;
  align-items: start;
  margin-bottom: 3rem;
}

/* 8. GAMES */
.chaos-games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.chaos-game-card {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid var(--chaos-border);
  border-radius: var(--chaos-radius);
  background: var(--chaos-surface);
  transition: transform var(--chaos-transition), border-color var(--chaos-transition);
}
.chaos-game-card:hover { transform: translateY(-6px); border-color: var(--chaos-green); }
.chaos-game-card__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.chaos-game-card:hover .chaos-game-card__image { transform: scale(1.05); }
.chaos-game-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 25%, rgba(6,12,17,.96) 100%); }
.chaos-game-card__content { position:absolute; z-index:2; left:1.25rem; right:1.25rem; bottom:1.25rem; }
.chaos-game-card__content h3 { text-transform:uppercase; font-size:1.05rem; }
.chaos-game-card__content p { margin:.25rem 0 0; font-size:.78rem; }

/* 9. PORTFOLIO */
.chaos-portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.chaos-project {
  position:relative;
  min-height:220px;
  overflow:hidden;
  border:1px solid var(--chaos-border);
  border-radius:var(--chaos-radius);
  background:var(--chaos-surface);
}
.chaos-project--wide { grid-column:span 2; }
.chaos-project img { width:100%; height:100%; object-fit:cover; }
.chaos-project__overlay {
  position:absolute; inset:auto 0 0;
  padding:1rem 1.2rem;
  background:linear-gradient(transparent, rgba(6,12,17,.96) 45%);
}
.chaos-project__overlay h3 { font-size:1rem; text-transform:uppercase; }
.chaos-project__overlay p { margin:.2rem 0 0; font-size:.72rem; }
.chaos-project--more {
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--chaos-text-muted);
}

/* 10. SERVICES */
.chaos-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.chaos-service {
  padding:2rem;
  border:1px solid var(--chaos-border);
  border-radius:var(--chaos-radius-lg);
  background:linear-gradient(180deg, rgba(22,30,40,.92), rgba(10,16,22,.92));
  transition:transform var(--chaos-transition), border-color var(--chaos-transition);
}
.chaos-service:hover { transform:translateY(-5px); }
.chaos-service__icon { margin-bottom:1rem; font-size:2rem; font-weight:400; }
.chaos-service h3 { margin-bottom:1rem; font-size:1.15rem; text-transform:uppercase; }
.chaos-service ul { margin:1rem 0 1.6rem; padding-left:1.15rem; color:var(--chaos-text-secondary); font-size:.88rem; }
.chaos-service--gameplay { border-color:rgba(141,255,104,.38); }
.chaos-service--gameplay .chaos-service__icon,
.chaos-service--gameplay h3 { color:var(--chaos-green); }
.chaos-service--steam { border-color:rgba(67,141,218,.45); }
.chaos-service--steam .chaos-service__icon,
.chaos-service--steam h3 { color:var(--chaos-blue); }
.chaos-service--web { border-color:rgba(155,99,232,.45); }
.chaos-service--web .chaos-service__icon,
.chaos-service--web h3 { color:var(--chaos-purple); }

/* 11. TIMELINE */
.chaos-timeline { position:relative; display:grid; grid-template-columns:repeat(10,minmax(80px,1fr)); gap:1rem; margin-top:3rem; overflow-x:auto; padding:2rem 0 1rem; }
.chaos-timeline::before { content:""; position:absolute; top:2.45rem; left:0; right:0; height:1px; background:var(--chaos-border-light); }
.chaos-timeline__item { position:relative; min-width:80px; z-index:1; }
.chaos-timeline__dot { width:9px; height:9px; margin-bottom:1rem; border-radius:50%; background:var(--chaos-green); box-shadow:0 0 14px rgba(141,255,104,.5); }
.chaos-timeline__year { display:block; color:var(--chaos-text); font-size:.72rem; font-weight:900; }
.chaos-timeline__project { display:block; margin-top:.35rem; color:var(--chaos-text-muted); font-size:.68rem; line-height:1.25; }

/* 12. CTA */
.chaos-cta {
  position:relative;
  overflow:hidden;
  padding:clamp(4rem,8vw,7rem) 0;
  background:linear-gradient(90deg, rgba(6,12,17,.96), rgba(6,12,17,.58)),
             var(--chaos-cta-image, none);
  background-size:cover;
  background-position:center;
  border-top:1px solid var(--chaos-border);
}
.chaos-cta__grid { display:grid; grid-template-columns:1.5fr .8fr; gap:3rem; align-items:center; }
.chaos-cta__text p { max-width:650px; font-size:1.05rem; }
.chaos-cta__services { display:grid; gap:1rem; }
.chaos-cta__service { color:var(--chaos-text-secondary); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

/* 13. FOOTER */
.container-footer {
  background:var(--chaos-bg-2);
  color:var(--chaos-text-secondary);
  border-top:1px solid var(--chaos-border);
}
.container-footer a { color:var(--chaos-text-secondary); }
.container-footer a:hover { color:var(--chaos-green); }

/* 14. JOOMLA ARTICLE / HOME CLEANUP */
.com-content-article.item-page { margin:0; }
.chaos-home-wrapper { margin:0; }
.chaos-home-wrapper > * { margin:0; }

/* 15. RESPONSIVE */
@media (max-width: 1100px) {
  .chaos-games-grid { grid-template-columns:repeat(2,1fr); }
  .chaos-services-grid { grid-template-columns:1fr; }
  .chaos-portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .chaos-project--wide { grid-column:span 1; }
}
@media (max-width: 768px) {
  .chaos-home .container, .chaos-container { width:min(calc(100% - 2rem), var(--chaos-max-width)); }
  .chaos-hero { min-height:720px; }
  .chaos-hero::before { background-position:65% center; background-image:linear-gradient(90deg, rgba(6,12,17,.98), rgba(6,12,17,.72)), var(--chaos-hero-image, none); }
  .chaos-split-intro { grid-template-columns:1fr; gap:1.5rem; }
  .chaos-stats { grid-template-columns:repeat(2,1fr); }
  .chaos-stat:nth-child(2) { border-right:0; }
  .chaos-stat { padding:1.3rem; }
  .chaos-games-grid, .chaos-portfolio-grid { grid-template-columns:1fr; }
  .chaos-game-card { min-height:340px; }
  .chaos-cta__grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .chaos-stats { grid-template-columns:1fr; }
  .chaos-stat { border-right:0; border-bottom:1px solid var(--chaos-border); }
  .chaos-stat:last-child { border-bottom:0; }
  .chaos-actions { flex-direction:column; align-items:stretch; }
}


/* ============================================================
   CHAOS INTERACTIVE
   GAMES PAGE ONLY
   ------------------------------------------------------------
   IMPORTANT:
   All selectors are scoped to .chaos-games-page
   so the homepage and other pages remain untouched.
   ============================================================ */


/* ============================================================
   GAMES PAGE — BASE
   ============================================================ */

.chaos-games-page {
    background: #060C11;
    color: #F0F0EB;
    overflow: hidden;
}

.chaos-games-page img {
    max-width: 100%;
}


/* ============================================================
   GAMES PAGE — HERO
   ============================================================ */

.chaos-games-page .chaos-page-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #060C11;
}

.chaos-games-page .chaos-games-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6, 12, 17, .98) 0%,
            rgba(6, 12, 17, .82) 45%,
            rgba(6, 12, 17, .25) 100%
        ),
        url('/images/chaos/01-hero-landscape.jpg')
        center center / cover no-repeat;
}

.chaos-games-page .chaos-page-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    padding-top: 80px;
    padding-bottom: 80px;
}

.chaos-games-page .chaos-page-hero h1 {
    margin: 0 0 28px;
    color: #F0F0EB;
    font-size: clamp(52px, 8vw, 110px);
    line-height: .9;
    letter-spacing: -4px;
}

.chaos-games-page .chaos-page-hero h1 span {
    color: #8DFF68;
}

.chaos-games-page .chaos-page-hero .chaos-page-hero-lead {
    max-width: 720px;
    margin: 0 0 12px;
    color: #F0F0EB;
    font-size: 22px;
    line-height: 1.5;
}

.chaos-games-page .chaos-page-hero .chaos-page-hero-text {
    max-width: 650px;
    margin: 0;
    color: #A9B1B9;
    font-size: 15px;
    line-height: 1.7;
}


/* ============================================================
   GAMES PAGE — SECTION HEADERS
   ============================================================ */

.chaos-games-page .chaos-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
    margin-bottom: 55px;
}

.chaos-games-page .chaos-section-heading h2 {
    margin-bottom: 0;
}

.chaos-games-page .chaos-section-heading h2 span {
    color: #8DFF68;
}

.chaos-games-page .chaos-section-heading > p {
    max-width: 450px;
    margin: 0;
    color: #A9B1B9;
    font-size: 15px;
    line-height: 1.7;
}


/* ============================================================
   GAMES PAGE — GAME GRID
   ============================================================ */

.chaos-games-page .chaos-games-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}


/* ============================================================
   IMPORTANT:
   THE ENTIRE CARD IS THE LINK
   ============================================================ */

.chaos-games-page a.chaos-game-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    background: #101820;

    border: 1px solid #2A3440;
    border-radius: 12px;

    color: #F0F0EB;
    text-decoration: none;

    transition:
        transform .3s cubic-bezier(.2,.65,.3,1),
        border-color .3s ease,
        box-shadow .3s ease;
}

.chaos-games-page a.chaos-game-card:hover,
.chaos-games-page a.chaos-game-card:focus {
    color: #F0F0EB;
    text-decoration: none;

    border-color: #8DFF68;

    transform: translateY(-7px);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .35);
}


/* Featured game */

.chaos-games-page a.chaos-game-card-featured {
    grid-column: span 2;

    display: grid;
    grid-template-columns: 1.25fr 1fr;
}


/* ============================================================
   GAME CARD IMAGE
   ============================================================ */

.chaos-games-page .chaos-game-card-image {
    position: relative;

    min-height: 280px;

    overflow: hidden;

    background: #161E28;
}

.chaos-games-page .chaos-game-card-featured
.chaos-game-card-image {
    min-height: 430px;
}

.chaos-games-page .chaos-game-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s cubic-bezier(.2,.65,.3,1);
}

.chaos-games-page a.chaos-game-card:hover
.chaos-game-card-image img {
    transform: scale(1.055);
}


/* Prevent images from intercepting the click */

.chaos-games-page .chaos-game-card-image img {
    pointer-events: none;
}


/* ============================================================
   GAME STATUS
   ============================================================ */

.chaos-games-page .chaos-card-status {
    position: absolute;

    top: 20px;
    left: 20px;

    display: inline-block;

    padding: 7px 12px;

    border-radius: 4px;

    background: #8DFF68;
    color: #060C11;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;

    z-index: 2;
}

.chaos-games-page .chaos-status-released {
    background: #438DDA;
    color: #FFFFFF;
}


/* ============================================================
   GAME CARD CONTENT
   ============================================================ */

.chaos-games-page .chaos-game-card-content {
    position: relative;

    flex: 1;

    padding: 36px;
}

.chaos-games-page .chaos-card-number {
    display: block;

    margin-bottom: 20px;

    color: #6B7480;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}

.chaos-games-page .chaos-card-category {
    display: block;

    margin-bottom: 13px;

    color: #8DFF68;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.chaos-games-page .chaos-game-card h3 {
    margin: 0 0 18px;

    color: #F0F0EB;

    font-size: 34px;
    line-height: 1.05;
}

.chaos-games-page .chaos-game-card p {
    margin: 0;

    color: #A9B1B9;

    line-height: 1.7;
}

.chaos-games-page .chaos-card-action {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 28px;

    color: #F0F0EB;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.chaos-games-page .chaos-card-arrow {
    color: #8DFF68;

    font-size: 18px;

    transition:
        transform .25s ease;
}

.chaos-games-page a.chaos-game-card:hover
.chaos-card-arrow {
    transform: translateX(6px);
}


/* ============================================================
   GAMES PAGE — STATEMENT
   ============================================================ */

.chaos-games-page .chaos-games-statement {
    background: #101820;

    border-top:
        1px solid #2A3440;

    border-bottom:
        1px solid #2A3440;
}

.chaos-games-page .chaos-statement {
    max-width: 950px;
}

.chaos-games-page .chaos-statement h2 {
    max-width: 900px;

    margin: 20px 0 30px;

    color: #F0F0EB;
}

.chaos-games-page .chaos-statement h2 span {
    color: #8DFF68;
}

.chaos-games-page .chaos-statement p {
    max-width: 680px;

    margin: 0;

    color: #A9B1B9;

    font-size: 18px;
    line-height: 1.7;
}


/* ============================================================
   GAMES PAGE — PORTFOLIO GRID
   ============================================================ */

.chaos-games-page .chaos-project-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* ============================================================
   PORTFOLIO CARDS
   ============================================================ */

.chaos-games-page .chaos-project-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 390px;

    overflow: hidden;

    background: #101820;

    border:
        1px solid #2A3440;

    border-radius: 10px;

    color: #F0F0EB;

    text-decoration: none;

    transition:
        transform .3s cubic-bezier(.2,.65,.3,1),
        border-color .3s ease,
        box-shadow .3s ease;
}

.chaos-games-page a.chaos-project-card:hover {
    color: #F0F0EB;
    text-decoration: none;

    transform:
        translateY(-6px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);
}

.chaos-games-page .chaos-project-green:hover {
    border-color: #8DFF68;
}

.chaos-games-page .chaos-project-blue:hover {
    border-color: #438DDA;
}

.chaos-games-page .chaos-project-purple:hover {
    border-color: #9B63E8;
}


/* ============================================================
   PORTFOLIO IMAGES
   ============================================================ */

.chaos-games-page .chaos-project-image {
    height: 190px;

    overflow: hidden;
}

.chaos-games-page .chaos-project-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;

    pointer-events: none;
}

.chaos-games-page a.chaos-project-card:hover
.chaos-project-image img {
    transform: scale(1.05);
}


/* ============================================================
   PORTFOLIO CONTENT
   ============================================================ */

.chaos-games-page .chaos-project-content {
    position: relative;

    flex: 1;

    padding: 30px;
}

.chaos-games-page .chaos-project-category {
    display: block;

    margin-bottom: 16px;

    color: #8DFF68;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.chaos-games-page .chaos-project-card h3 {
    margin: 0 0 15px;

    color: #F0F0EB;

    font-size: 25px;
}

.chaos-games-page .chaos-project-card p {
    margin: 0;

    color: #A9B1B9;

    font-size: 14px;
    line-height: 1.65;
}

.chaos-games-page .chaos-project-meta {
    display: block;

    margin-top: 25px;

    color: #6B7480;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
}

.chaos-games-page .chaos-project-arrow {
    position: absolute;

    right: 28px;
    bottom: 25px;

    color: #8DFF68;

    font-size: 22px;

    transition:
        transform .25s ease;
}

.chaos-games-page a.chaos-project-card:hover
.chaos-project-arrow {
    transform:
        translate(4px, -4px);
}


/* ============================================================
   MORE PROJECTS
   ============================================================ */

.chaos-games-page .chaos-more-projects {
    background: #101820;

    border-top:
        1px solid #2A3440;
}

.chaos-games-page .chaos-more-projects h2 {
    margin-bottom: 50px;
}

.chaos-games-page .chaos-more-projects h2 span {
    color: #8DFF68;
}

.chaos-games-page .chaos-project-list {
    border-top:
        1px solid #2A3440;
}

.chaos-games-page .chaos-project-list-item {
    display: grid;

    grid-template-columns:
        90px 280px 1fr;

    align-items: center;

    gap: 30px;

    min-height: 70px;

    border-bottom:
        1px solid #2A3440;
}

.chaos-games-page .chaos-project-list-item > span {
    color: #8DFF68;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;
}

.chaos-games-page .chaos-project-list-item strong {
    color: #F0F0EB;
}

.chaos-games-page .chaos-project-list-item small {
    color: #6B7480;

    font-size: 13px;
}


/* ============================================================
   GAMES PAGE — CTA
   ============================================================ */

.chaos-games-page .chaos-cta {
    position: relative;

    min-height: 520px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.chaos-games-page .chaos-cta-bg {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6,12,17,.98) 0%,
            rgba(6,12,17,.80) 50%,
            rgba(6,12,17,.35) 100%
        ),
        url('/images/chaos/12-cta-racing-background.jpg')
        center center / cover no-repeat;
}

.chaos-games-page .chaos-cta-content {
    position: relative;

    z-index: 2;

    max-width: 850px;
}

.chaos-games-page .chaos-cta h2 {
    margin: 15px 0 25px;

    color: #F0F0EB;
}

.chaos-games-page .chaos-cta h2 span {
    color: #8DFF68;
}

.chaos-games-page .chaos-cta p {
    max-width: 600px;

    margin: 0;

    color: #A9B1B9;

    font-size: 18px;
    line-height: 1.7;
}


/* ============================================================
   GAMES PAGE — ACCESSIBILITY
   ============================================================ */

.chaos-games-page a.chaos-game-card:focus-visible,
.chaos-games-page a.chaos-project-card:focus-visible {
    outline:
        2px solid #8DFF68;

    outline-offset:
        4px;
}


/* ============================================================
   GAMES PAGE — RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .chaos-games-page .chaos-project-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 800px) {

    .chaos-games-page .chaos-section-heading {
        display: block;
    }

    .chaos-games-page .chaos-section-heading > p {
        margin-top: 25px;
    }

    .chaos-games-page .chaos-games-grid {
        grid-template-columns: 1fr;
    }

    .chaos-games-page a.chaos-game-card-featured {
        grid-column: auto;

        display: flex;
    }

    .chaos-games-page
    .chaos-game-card-featured
    .chaos-game-card-image {
        min-height: 320px;
    }

    .chaos-games-page .chaos-project-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .chaos-games-page .chaos-page-hero {
        min-height: 440px;
    }

    .chaos-games-page .chaos-page-hero-content {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .chaos-games-page .chaos-page-hero h1 {
        font-size: 54px;
        letter-spacing: -2px;
    }

    .chaos-games-page .chaos-page-hero-lead {
        font-size: 19px;
    }

    .chaos-games-page .chaos-game-card-image {
        min-height: 240px;
    }

    .chaos-games-page .chaos-game-card-content {
        padding: 27px;
    }

    .chaos-games-page .chaos-game-card h3 {
        font-size: 28px;
    }

    .chaos-games-page .chaos-project-content {
        padding: 26px;
    }

    .chaos-games-page .chaos-project-list-item {
        grid-template-columns:
            65px 1fr;

        gap: 15px;

        padding:
            20px 0;
    }

    .chaos-games-page
    .chaos-project-list-item small {
        grid-column: 2;
    }

    .chaos-games-page .chaos-cta {
        min-height: 480px;
    }

    .chaos-games-page .chaos-cta h2 {
        font-size: 48px;
    }

}


@media (max-width: 420px) {

    .chaos-games-page .chaos-games-grid {
        grid-template-columns: 1fr;
    }

    .chaos-games-page .chaos-project-grid {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   CHAOS INTERACTIVE — SERVICES PAGE
   Scoped exclusively to .chaos-services-page
   ============================================================ */


/* ============================================================
   01. PAGE BASE
   ============================================================ */

.chaos-services-page {
    --services-bg: #060C11;
    --services-bg-secondary: #101820;
    --services-surface: #161E28;
    --services-surface-light: #222936;
    --services-border: #2A3440;
    --services-border-light: #404A56;

    --services-text: #F0F0EB;
    --services-text-secondary: #A9B1B9;
    --services-text-muted: #6B7480;

    --services-green: #8DFF68;
    --services-green-hover: #A5FF87;
    --services-blue: #438DDA;
    --services-purple: #9B63E8;

    --services-radius: 6px;
    --services-radius-large: 12px;

    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;

    background: var(--services-bg);
    color: var(--services-text);

    box-sizing: border-box;
}

.chaos-services-page *,
.chaos-services-page *::before,
.chaos-services-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   02. COMMON CONTAINER
   ============================================================ */

.chaos-services-page .chaos-container {
    width: min(1200px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

.chaos-services-page .chaos-container-narrow {
    width: min(850px, calc(100% - 48px));
}


/* ============================================================
   03. HERO
   ============================================================ */

.chaos-services-page .chaos-page-hero {
    position: relative;
    min-height: 480px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 100px 24px;

    background:
        linear-gradient(
            90deg,
            rgba(6, 12, 17, 0.96) 0%,
            rgba(6, 12, 17, 0.80) 50%,
            rgba(6, 12, 17, 0.94) 100%
        ),
        linear-gradient(
            180deg,
            rgba(6, 12, 17, 0.25) 0%,
            rgba(6, 12, 17, 0.95) 100%
        ),
        url('/images/chaos/11-services-background.jpg') center center / cover no-repeat;
}

.chaos-services-page .chaos-page-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(141, 255, 104, 0.08),
            transparent 45%
        );

    pointer-events: none;
}

.chaos-services-page .chaos-page-hero-content {
    position: relative;
    z-index: 2;

    width: min(900px, 100%);

    text-align: center;
}

.chaos-services-page .chaos-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--services-green);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1.4;
    text-transform: uppercase;
}

.chaos-services-page .chaos-page-hero h1 {
    margin: 0;

    color: var(--services-text);

    font-size: clamp(48px, 8vw, 88px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.chaos-services-page .chaos-page-hero h1 span {
    color: var(--services-green);
}

.chaos-services-page .chaos-page-hero-lead {
    max-width: 700px;

    margin: 28px auto 0;

    color: var(--services-text-secondary);

    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
}


/* ============================================================
   04. INTRODUCTION
   ============================================================ */

.chaos-services-page .chaos-services-intro {
    padding: 110px 0 100px;

    background: var(--services-bg);
    text-align: center;
}

.chaos-services-page .chaos-section-kicker {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--services-green);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.4;
    text-transform: uppercase;
}

.chaos-services-page .chaos-services-intro h2,
.chaos-services-page .chaos-section-heading h2,
.chaos-services-page .chaos-approach-content h2,
.chaos-services-page .chaos-page-cta h2 {
    margin: 0;

    color: var(--services-text);

    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.chaos-services-page .chaos-services-intro h2 span,
.chaos-services-page .chaos-section-heading h2 span,
.chaos-services-page .chaos-approach-content h2 span,
.chaos-services-page .chaos-page-cta h2 span {
    color: var(--services-green);
}

.chaos-services-page .chaos-services-intro p {
    max-width: 780px;

    margin: 24px auto 0;

    color: var(--services-text-secondary);

    font-size: 16px;
    line-height: 1.8;
}

.chaos-services-page .chaos-services-intro p + p {
    margin-top: 10px;
}


/* ============================================================
   05. SERVICES SECTION
   ============================================================ */

.chaos-services-page .chaos-services-list {
    padding: 100px 0 120px;

    background: var(--services-bg-secondary);
}

.chaos-services-page .chaos-section-heading {
    margin-bottom: 55px;

    text-align: center;
}

.chaos-services-page .chaos-section-heading > p {
    max-width: 650px;

    margin: 20px auto 0;

    color: var(--services-text-secondary);

    font-size: 16px;
    line-height: 1.7;
}


/* ============================================================
   06. SERVICES GRID
   ============================================================ */

.chaos-services-page .chaos-services-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;

    align-items: stretch;
}


/* ============================================================
   07. SERVICE CARD
   ============================================================ */

.chaos-services-page .chaos-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 600px;

    padding: 32px;

    overflow: hidden;

    background: var(--services-surface);

    border: 1px solid var(--services-border);
    border-radius: var(--services-radius-large);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.chaos-services-page .chaos-service-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background: var(--services-green);

    opacity: 0.9;
}

.chaos-services-page .chaos-service-card:hover {
    transform: translateY(-6px);

    border-color: var(--services-border-light);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.28);
}


/* ============================================================
   08. SERVICE CARD — TOP
   ============================================================ */

.chaos-services-page .chaos-service-card-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    min-height: 100px;
}

.chaos-services-page .chaos-service-number {
    color: var(--services-text-muted);

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.chaos-services-page .chaos-service-icon {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 12px;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid var(--services-border);

    border-radius: 50%;
}

.chaos-services-page .chaos-service-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
}


/* ============================================================
   09. SERVICE CARD — GAMEPLAY COLOR
   ============================================================ */

.chaos-services-page .chaos-service-gameplay::before {
    background: var(--services-green);
}

.chaos-services-page .chaos-service-gameplay .chaos-service-label,
.chaos-services-page .chaos-service-gameplay h3 span {
    color: var(--services-green);
}

.chaos-services-page .chaos-service-gameplay:hover {
    border-color: rgba(141, 255, 104, 0.35);
}


/* ============================================================
   10. SERVICE CARD — STEAM COLOR
   ============================================================ */

.chaos-services-page .chaos-service-steam::before {
    background: var(--services-blue);
}

.chaos-services-page .chaos-service-steam .chaos-service-label,
.chaos-services-page .chaos-service-steam h3 span {
    color: var(--services-blue);
}

.chaos-services-page .chaos-service-steam:hover {
    border-color: rgba(67, 141, 218, 0.40);
}


/* ============================================================
   11. SERVICE CARD — WEBSITE COLOR
   ============================================================ */

.chaos-services-page .chaos-service-website::before {
    background: var(--services-purple);
}

.chaos-services-page .chaos-service-website .chaos-service-label,
.chaos-services-page .chaos-service-website h3 span {
    color: var(--services-purple);
}

.chaos-services-page .chaos-service-website:hover {
    border-color: rgba(155, 99, 232, 0.40);
}


/* ============================================================
   12. SERVICE CARD — CONTENT
   ============================================================ */

.chaos-services-page .chaos-service-card-content {
    flex: 1;
}

.chaos-services-page .chaos-service-label {
    display: block;

    margin-bottom: 12px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
}

.chaos-services-page .chaos-service-card h3 {
    margin: 0 0 22px;

    color: var(--services-text);

    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.chaos-services-page .chaos-service-card h3 span {
    display: inline-block;
}

.chaos-services-page .chaos-service-card-content > p {
    margin: 0 0 28px;

    color: var(--services-text-secondary);

    font-size: 14px;
    line-height: 1.7;
}


/* ============================================================
   13. SERVICE FEATURES
   ============================================================ */

.chaos-services-page .chaos-service-features {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px 16px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.chaos-services-page .chaos-service-features li {
    display: flex;

    align-items: center;

    min-width: 0;

    color: var(--services-text-secondary);

    font-size: 12px;
    line-height: 1.4;
}

.chaos-services-page .chaos-service-features li span {
    flex: 0 0 auto;

    margin-right: 7px;

    color: var(--services-green);

    font-size: 14px;
    font-weight: 700;
}

.chaos-services-page .chaos-service-steam .chaos-service-features li span {
    color: var(--services-blue);
}

.chaos-services-page .chaos-service-website .chaos-service-features li span {
    color: var(--services-purple);
}


/* ============================================================
   14. SERVICE CARD FOOTER
   ============================================================ */

.chaos-services-page .chaos-service-card-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 35px;
    padding-top: 20px;

    border-top: 1px solid var(--services-border);

    color: var(--services-text-muted);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.chaos-services-page .chaos-service-arrow {
    color: var(--services-green);

    font-size: 22px;
    line-height: 1;

    transition:
        transform 0.2s ease;
}

.chaos-services-page .chaos-service-card:hover .chaos-service-arrow {
    transform: translateX(5px);
}

.chaos-services-page .chaos-service-steam .chaos-service-arrow {
    color: var(--services-blue);
}

.chaos-services-page .chaos-service-website .chaos-service-arrow {
    color: var(--services-purple);
}


/* ============================================================
   15. APPROACH SECTION
   ============================================================ */

.chaos-services-page .chaos-services-approach {
    padding: 120px 0;

    background: var(--services-bg);
}

.chaos-services-page .chaos-approach-grid {
    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);

    gap: 90px;

    align-items: center;
}

.chaos-services-page .chaos-approach-content h2 {
    margin-bottom: 30px;
}

.chaos-services-page .chaos-approach-content > p {
    max-width: 620px;

    margin: 0 0 18px;

    color: var(--services-text-secondary);

    font-size: 15px;
    line-height: 1.8;
}


/* ============================================================
   16. APPROACH POINTS
   ============================================================ */

.chaos-services-page .chaos-approach-points {
    display: flex;
    flex-direction: column;

    gap: 0;
}

.chaos-services-page .chaos-approach-point {
    display: grid;

    grid-template-columns: 64px minmax(0, 1fr);

    gap: 22px;

    padding: 26px 0;

    border-bottom: 1px solid var(--services-border);
}

.chaos-services-page .chaos-approach-point:first-child {
    border-top: 1px solid var(--services-border);
}

.chaos-services-page .chaos-approach-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--services-border);

    color: var(--services-green);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.chaos-services-page .chaos-approach-point h3 {
    margin: 0 0 8px;

    color: var(--services-text);

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chaos-services-page .chaos-approach-point p {
    margin: 0;

    color: var(--services-text-secondary);

    font-size: 13px;
    line-height: 1.65;
}


/* ============================================================
   17. PROCESS SECTION
   ============================================================ */

.chaos-services-page .chaos-services-process {
    padding: 110px 0 120px;

    background: var(--services-bg-secondary);
}

.chaos-services-page .chaos-process-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1px;

    background: var(--services-border);

    border: 1px solid var(--services-border);
}

.chaos-services-page .chaos-process-step {
    min-height: 260px;

    padding: 34px 30px;

    background: var(--services-surface);

    transition:
        background 0.25s ease;
}

.chaos-services-page .chaos-process-step:hover {
    background: var(--services-surface-light);
}

.chaos-services-page .chaos-process-number {
    display: block;

    margin-bottom: 45px;

    color: var(--services-green);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.chaos-services-page .chaos-process-step h3 {
    margin: 0 0 14px;

    color: var(--services-text);

    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.chaos-services-page .chaos-process-step p {
    margin: 0;

    color: var(--services-text-secondary);

    font-size: 13px;
    line-height: 1.7;
}


/* ============================================================
   18. FINAL CTA
   ============================================================ */

.chaos-services-page .chaos-page-cta {
    position: relative;

    min-height: 460px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 90px 24px;

    background:
        linear-gradient(
            90deg,
            rgba(6, 12, 17, 0.97),
            rgba(6, 12, 17, 0.72),
            rgba(6, 12, 17, 0.97)
        ),
        url('/images/chaos/12-cta-racing-background.jpg')
        center center / cover no-repeat;
}

.chaos-services-page .chaos-page-cta-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(141, 255, 104, 0.09),
            transparent 48%
        );

    pointer-events: none;
}

.chaos-services-page .chaos-page-cta-content {
    position: relative;
    z-index: 2;

    width: min(800px, 100%);

    text-align: center;
}

.chaos-services-page .chaos-page-cta h2 {
    font-size: clamp(42px, 7vw, 76px);
}

.chaos-services-page .chaos-page-cta p {
    max-width: 600px;

    margin: 24px auto 32px;

    color: var(--services-text-secondary);

    font-size: 16px;
    line-height: 1.7;
}


/* ============================================================
   19. BUTTON
   ============================================================ */

.chaos-services-page .chaos-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 52px;

    padding: 0 28px;

    border-radius: var(--services-radius);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.chaos-services-page .chaos-btn-primary {
    background: var(--services-green);
    color: #060C11;
}

.chaos-services-page .chaos-btn-primary:hover {
    background: var(--services-green-hover);

    color: #060C11;

    transform: translateY(-2px);
}

.chaos-services-page .chaos-btn span {
    font-size: 18px;
}


/* ============================================================
   20. ACCESSIBILITY
   ============================================================ */

.chaos-services-page a:focus-visible,
.chaos-services-page button:focus-visible {
    outline: 2px solid var(--services-green);
    outline-offset: 4px;
}


/* ============================================================
   21. TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .chaos-services-page .chaos-services-grid {
        grid-template-columns: 1fr;
    }

    .chaos-services-page .chaos-service-card {
        min-height: auto;
    }

    .chaos-services-page .chaos-approach-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .chaos-services-page .chaos-process-grid {
        grid-template-columns: 1fr 1fr;
    }

}


/* ============================================================
   22. MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .chaos-services-page .chaos-container,
    .chaos-services-page .chaos-container-narrow {
        width: calc(100% - 32px);
    }


    /* Hero */

    .chaos-services-page .chaos-page-hero {
        min-height: 400px;

        padding: 80px 16px;
    }

    .chaos-services-page .chaos-page-hero h1 {
        font-size: clamp(42px, 13vw, 64px);
    }

    .chaos-services-page .chaos-page-hero-lead {
        font-size: 15px;
    }


    /* Sections */

    .chaos-services-page .chaos-services-intro,
    .chaos-services-page .chaos-services-list,
    .chaos-services-page .chaos-services-approach,
    .chaos-services-page .chaos-services-process {
        padding-top: 75px;
        padding-bottom: 75px;
    }


    .chaos-services-page .chaos-services-intro h2,
    .chaos-services-page .chaos-section-heading h2,
    .chaos-services-page .chaos-approach-content h2 {
        font-size: 34px;
    }


    /* Service cards */

    .chaos-services-page .chaos-service-card {
        padding: 26px;

        border-radius: 8px;
    }

    .chaos-services-page .chaos-service-card-top {
        min-height: 85px;
    }

    .chaos-services-page .chaos-service-icon {
        width: 62px;
        height: 62px;
    }

    .chaos-services-page .chaos-service-card h3 {
        font-size: 30px;
    }

    .chaos-services-page .chaos-service-features {
        grid-template-columns: 1fr;
    }


    /* Approach */

    .chaos-services-page .chaos-approach-grid {
        gap: 45px;
    }

    .chaos-services-page .chaos-approach-point {
        grid-template-columns: 50px minmax(0, 1fr);

        gap: 16px;

        padding: 22px 0;
    }

    .chaos-services-page .chaos-approach-icon {
        width: 42px;
        height: 42px;
    }


    /* Process */

    .chaos-services-page .chaos-process-grid {
        grid-template-columns: 1fr;
    }

    .chaos-services-page .chaos-process-step {
        min-height: auto;

        padding: 28px 24px;
    }

    .chaos-services-page .chaos-process-number {
        margin-bottom: 25px;
    }


    /* CTA */

    .chaos-services-page .chaos-page-cta {
        min-height: 400px;

        padding: 70px 16px;
    }

    .chaos-services-page .chaos-page-cta h2 {
        font-size: 44px;
    }

    .chaos-services-page .chaos-page-cta p {
        font-size: 14px;
    }

}


/* ============================================================
   23. SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .chaos-services-page .chaos-page-hero {
        min-height: 360px;
    }

    .chaos-services-page .chaos-service-card {
        padding: 22px;
    }

    .chaos-services-page .chaos-service-card h3 {
        font-size: 27px;
    }

    .chaos-services-page .chaos-page-cta h2 {
        font-size: 38px;
    }

    .chaos-services-page .chaos-btn {
        width: 100%;
    }

}

/* ============================================================
   CHAOS INTERACTIVE — ABOUT PAGE
   ============================================================ */

.chaos-about-page {
    --about-bg: #060C11;
    --about-bg-secondary: #101820;
    --about-surface: #161E28;
    --about-surface-light: #222936;
    --about-border: #2A3440;
    --about-border-light: #404A56;

    --about-text: #F0F0EB;
    --about-text-secondary: #A9B1B9;
    --about-text-muted: #6B7480;

    --about-green: #8DFF68;
    --about-green-hover: #A5FF87;
    --about-blue: #438DDA;
    --about-purple: #9B63E8;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--about-bg);
    color: var(--about-text);

    box-sizing: border-box;
}

.chaos-about-page *,
.chaos-about-page *::before,
.chaos-about-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   CONTAINER
   ============================================================ */

.chaos-about-page .chaos-container {
    width: min(1200px, calc(100% - 48px));

    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   HERO
   ============================================================ */

.chaos-about-page .chaos-about-hero {
    position: relative;

    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 100px 24px;

    background:
        linear-gradient(
            90deg,
            rgba(6,12,17,.97),
            rgba(6,12,17,.72),
            rgba(6,12,17,.96)
        ),
        url('/images/chaos/11-services-background.jpg')
        center / cover no-repeat;
}

.chaos-about-page .chaos-about-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(141,255,104,.08),
            transparent 48%
        );

    pointer-events: none;
}

.chaos-about-page .chaos-about-hero-content {
    position: relative;
    z-index: 2;

    width: min(900px,100%);

    text-align: center;
}

.chaos-about-page .chaos-eyebrow,
.chaos-about-page .chaos-section-kicker {
    display: inline-block;

    color: var(--about-green);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .20em;
    text-transform: uppercase;
}

.chaos-about-page .chaos-about-hero .chaos-eyebrow {
    margin-bottom: 18px;
}

.chaos-about-page .chaos-about-hero h1 {
    margin: 0;

    color: var(--about-text);

    font-size: clamp(48px,8vw,88px);
    font-weight: 800;
    line-height: .94;

    letter-spacing: -.045em;

    text-transform: uppercase;
}

.chaos-about-page .chaos-about-hero h1 span {
    color: var(--about-green);
}

.chaos-about-page .chaos-about-hero p {
    max-width: 680px;

    margin: 28px auto 0;

    color: var(--about-text-secondary);

    font-size: 18px;
    line-height: 1.7;
}


/* ============================================================
   INTRO
   ============================================================ */

.chaos-about-page .chaos-about-intro {
    padding: 110px 0;

    background: var(--about-bg);
}

.chaos-about-page .chaos-about-intro-grid {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    align-items: start;
}

.chaos-about-page .chaos-about-intro h2,
.chaos-about-page .chaos-about-section-heading h2,
.chaos-about-page .chaos-about-experience-intro h2,
.chaos-about-page .chaos-about-focus h2,
.chaos-about-page .chaos-about-cta h2 {
    margin: 14px 0 0;

    color: var(--about-text);

    font-size: clamp(34px,5vw,56px);
    font-weight: 800;

    line-height: 1.02;
    letter-spacing: -.04em;

    text-transform: uppercase;
}

.chaos-about-page h2 span {
    color: var(--about-green);
}

.chaos-about-page .chaos-about-intro-text {
    padding-top: 12px;
}

.chaos-about-page .chaos-about-intro-text p {
    margin: 0 0 20px;

    color: var(--about-text-secondary);

    font-size: 15px;
    line-height: 1.85;
}

.chaos-about-page .chaos-about-intro-text .chaos-about-lead {
    color: var(--about-text);

    font-size: 21px;
    line-height: 1.6;
}


/* ============================================================
   DUAL SECTION
   ============================================================ */

.chaos-about-page .chaos-about-dual {
    padding: 110px 0 120px;

    background: var(--about-bg-secondary);
}

.chaos-about-page .chaos-about-section-heading {
    margin-bottom: 55px;
}

.chaos-about-page .chaos-about-dual-grid {
    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 24px;
}

.chaos-about-page .chaos-about-dual-card {
    position: relative;

    min-height: 480px;

    display: flex;
    flex-direction: column;

    padding: 38px;

    background: var(--about-surface);

    border: 1px solid var(--about-border);
    border-radius: 12px;

    overflow: hidden;

    transition:
        transform .25s ease,
        border-color .25s ease;
}

.chaos-about-page .chaos-about-dual-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    right: 0;

    height: 3px;

    background: var(--about-green);
}

.chaos-about-page .chaos-about-work-card::before {
    background: var(--about-blue);
}

.chaos-about-page .chaos-about-dual-card:hover {
    transform: translateY(-6px);

    border-color: var(--about-border-light);
}

.chaos-about-page .chaos-about-dual-number {
    color: var(--about-text-muted);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: .12em;
}

.chaos-about-page .chaos-about-dual-label {
    margin-top: 55px;

    color: var(--about-green);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.chaos-about-page .chaos-about-work-card .chaos-about-dual-label {
    color: var(--about-blue);
}

.chaos-about-page .chaos-about-dual-card h3 {
    margin: 14px 0 24px;

    color: var(--about-text);

    font-size: clamp(34px,4vw,48px);
    font-weight: 800;

    line-height: .95;
    letter-spacing: -.04em;

    text-transform: uppercase;
}

.chaos-about-page .chaos-about-dual-card h3 span {
    color: var(--about-green);
}

.chaos-about-page .chaos-about-work-card h3 span {
    color: var(--about-blue);
}

.chaos-about-page .chaos-about-dual-card p {
    max-width: 600px;

    margin: 0 0 15px;

    color: var(--about-text-secondary);

    font-size: 14px;
    line-height: 1.75;
}

.chaos-about-page .chaos-about-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: auto;
    padding-top: 30px;

    color: var(--about-green);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .14em;

    text-decoration: none;
}

.chaos-about-page .chaos-about-work-card .chaos-about-link {
    color: var(--about-blue);
}

.chaos-about-page .chaos-about-link span {
    font-size: 19px;

    transition: transform .2s ease;
}

.chaos-about-page .chaos-about-link:hover span {
    transform: translateX(5px);
}


/* ============================================================
   EXPERIENCE
   ============================================================ */

.chaos-about-page .chaos-about-experience {
    padding: 120px 0;

    background: var(--about-bg);
}

.chaos-about-page .chaos-about-experience-grid {
    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 100px;
}

.chaos-about-page .chaos-about-experience-intro p {
    max-width: 420px;

    margin-top: 28px;

    color: var(--about-text-secondary);

    font-size: 15px;
    line-height: 1.8;
}

.chaos-about-page .chaos-about-timeline {
    border-top: 1px solid var(--about-border);
}

.chaos-about-page .chaos-about-timeline-item {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 25px;

    padding: 26px 0;

    border-bottom: 1px solid var(--about-border);
}

.chaos-about-page .chaos-about-timeline-year {
    color: var(--about-green);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .1em;
}

.chaos-about-page .chaos-about-timeline-item h3 {
    margin: 0 0 8px;

    color: var(--about-text);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.chaos-about-page .chaos-about-timeline-item p {
    margin: 0;

    color: var(--about-text-secondary);

    font-size: 13px;
    line-height: 1.65;
}


/* ============================================================
   EXPERTISE
   ============================================================ */

.chaos-about-page .chaos-about-expertise {
    padding: 110px 0 120px;

    background: var(--about-bg-secondary);
}

.chaos-about-page .chaos-about-section-heading > p {
    max-width: 620px;

    margin-top: 20px;

    color: var(--about-text-secondary);

    font-size: 15px;
    line-height: 1.75;
}

.chaos-about-page .chaos-about-skills {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 1px;

    margin-top: 55px;

    background: var(--about-border);

    border: 1px solid var(--about-border);
}

.chaos-about-page .chaos-about-skill {
    min-height: 270px;

    padding: 30px;

    background: var(--about-surface);

    transition: background .2s ease;
}

.chaos-about-page .chaos-about-skill:hover {
    background: var(--about-surface-light);
}

.chaos-about-page .chaos-about-skill-number {
    display: block;

    margin-bottom: 55px;

    color: var(--about-green);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .12em;
}

.chaos-about-page .chaos-about-skill h3 {
    margin: 0 0 12px;

    color: var(--about-text);

    font-size: 24px;
    font-weight: 800;

    letter-spacing: -.02em;
}

.chaos-about-page .chaos-about-skill p {
    margin: 0;

    color: var(--about-text-secondary);

    font-size: 13px;
    line-height: 1.7;
}


/* ============================================================
   PROJECTS
   ============================================================ */

.chaos-about-page .chaos-about-projects {
    padding: 110px 0 120px;

    background: var(--about-bg);
}

.chaos-about-page .chaos-about-project-list {
    margin-top: 50px;

    border-top: 1px solid var(--about-border);
}

.chaos-about-page .chaos-about-project {
    display: grid;

    grid-template-columns: 180px 1fr 260px;

    gap: 30px;

    align-items: center;

    padding: 22px 0;

    border-bottom: 1px solid var(--about-border);
}

.chaos-about-page .chaos-about-project span {
    color: var(--about-green);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .14em;
}

.chaos-about-page .chaos-about-project strong {
    color: var(--about-text);

    font-size: 17px;
    font-weight: 700;
}

.chaos-about-page .chaos-about-project small {
    color: var(--about-text-muted);

    font-size: 12px;
}

.chaos-about-page .chaos-about-projects-link {
    margin-top: 40px;

    text-align: right;
}


/* ============================================================
   FOCUS
   ============================================================ */

.chaos-about-page .chaos-about-focus {
    padding: 120px 0;

    background: var(--about-bg-secondary);
}

.chaos-about-page .chaos-about-focus-content {
    max-width: 900px;
}

.chaos-about-page .chaos-about-focus h2 {
    margin-bottom: 30px;
}

.chaos-about-page .chaos-about-focus-content > p {
    max-width: 700px;

    margin: 0 0 16px;

    color: var(--about-text-secondary);

    font-size: 15px;
    line-height: 1.8;
}

.chaos-about-page .chaos-about-focus-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 35px;
}


/* ============================================================
   CTA
   ============================================================ */

.chaos-about-page .chaos-about-cta {
    position: relative;

    min-height: 460px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 90px 24px;

    background:
        linear-gradient(
            90deg,
            rgba(6,12,17,.97),
            rgba(6,12,17,.70),
            rgba(6,12,17,.97)
        ),
        url('/images/chaos/12-cta-racing-background.jpg')
        center / cover no-repeat;
}

.chaos-about-page .chaos-about-cta-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(141,255,104,.09),
            transparent 48%
        );

    pointer-events: none;
}

.chaos-about-page .chaos-about-cta-content {
    position: relative;
    z-index: 2;

    max-width: 800px;

    text-align: center;
}

.chaos-about-page .chaos-about-cta h2 {
    font-size: clamp(42px,7vw,76px);
}

.chaos-about-page .chaos-about-cta p {
    max-width: 620px;

    margin: 24px auto 32px;

    color: var(--about-text-secondary);

    font-size: 16px;
    line-height: 1.7;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.chaos-about-page .chaos-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 13px;

    min-height: 52px;

    padding: 0 27px;

    border-radius: 6px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .13em;

    text-decoration: none;
    text-transform: uppercase;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}

.chaos-about-page .chaos-btn span {
    font-size: 18px;
}

.chaos-about-page .chaos-btn-primary {
    background: var(--about-green);

    color: #060C11;
}

.chaos-about-page .chaos-btn-primary:hover {
    background: var(--about-green-hover);

    color: #060C11;

    transform: translateY(-2px);
}

.chaos-about-page .chaos-btn-secondary {
    background: transparent;

    border: 1px solid var(--about-border-light);

    color: var(--about-text);
}

.chaos-about-page .chaos-btn-secondary:hover {
    background: var(--about-surface-light);

    border-color: var(--about-green);

    color: var(--about-green);

    transform: translateY(-2px);
}


/* ============================================================
   FOCUS
   ============================================================ */

.chaos-about-page a:focus-visible {
    outline: 2px solid var(--about-green);
    outline-offset: 4px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .chaos-about-page .chaos-about-intro-grid,
    .chaos-about-page .chaos-about-experience-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .chaos-about-page .chaos-about-skills {
        grid-template-columns: 1fr 1fr;
    }

    .chaos-about-page .chaos-about-project {
        grid-template-columns: 150px 1fr;
    }

    .chaos-about-page .chaos-about-project small {
        grid-column: 2;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .chaos-about-page .chaos-container {
        width: calc(100% - 32px);
    }

    .chaos-about-page .chaos-about-hero {
        min-height: 410px;

        padding: 75px 16px;
    }

    .chaos-about-page .chaos-about-hero h1 {
        font-size: clamp(42px,13vw,64px);
    }

    .chaos-about-page .chaos-about-hero p {
        font-size: 15px;
    }

    .chaos-about-page .chaos-about-intro,
    .chaos-about-page .chaos-about-dual,
    .chaos-about-page .chaos-about-experience,
    .chaos-about-page .chaos-about-expertise,
    .chaos-about-page .chaos-about-projects,
    .chaos-about-page .chaos-about-focus {
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .chaos-about-page .chaos-about-intro h2,
    .chaos-about-page .chaos-about-section-heading h2,
    .chaos-about-page .chaos-about-experience-intro h2,
    .chaos-about-page .chaos-about-focus h2 {
        font-size: 34px;
    }

    .chaos-about-page .chaos-about-dual-grid {
        grid-template-columns: 1fr;
    }

    .chaos-about-page .chaos-about-dual-card {
        min-height: 430px;

        padding: 28px;
    }

    .chaos-about-page .chaos-about-skills {
        grid-template-columns: 1fr;
    }

    .chaos-about-page .chaos-about-project {
        grid-template-columns: 1fr;

        gap: 8px;

        padding: 20px 0;
    }

    .chaos-about-page .chaos-about-project small {
        grid-column: auto;
    }

    .chaos-about-page .chaos-about-projects-link {
        text-align: left;
    }

    .chaos-about-page .chaos-about-focus-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .chaos-about-page .chaos-about-focus-actions .chaos-btn {
        width: 100%;
    }

    .chaos-about-page .chaos-about-cta {
        min-height: 400px;

        padding: 70px 16px;
    }

    .chaos-about-page .chaos-about-cta h2 {
        font-size: 43px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .chaos-about-page .chaos-about-timeline-item {
        grid-template-columns: 70px 1fr;

        gap: 15px;
    }

    .chaos-about-page .chaos-about-dual-card {
        padding: 23px;
    }

    .chaos-about-page .chaos-btn {
        width: 100%;
    }

}