/* :root {
      --bg-ivory: #FAF8F5;
      --bg-ivory-alt: #F3EFEA;
      --bg-base: #FBFBF9;
      --border-subtle: #E5E3DA;
      --accent-emerald: #0F4C3A;
      --bg-warm: #FAFAF7;
      --text-charcoal: #1A1A18;
      --text-main: #1c1917;
      --text-muted: #62605B;
      --text-subtle: #8A8780;
      --line-architectural: #E2DDD5;
      --line-dark: #1A1A18;
      --brand-accent: #B84A27;
      --brand-accent-light: rgba(184, 74, 39, 0.08);
      --accent-emerald-light: #10b981;

      
      --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-editorial: 'Cormorant Garamond', Georgia, serif;
      --font-mono: 'JetBrains Mono', monospace;

      --brand-sans: var(--font-primary);
      --brand-serif: var(--font-display);
    } */

    :root {
      /* Backgrounds */
      --bg-ivory: #FAF8F5;
      --bg-ivory-alt: #F3EFEA;
      --bg-base: #FBFBF9;
      --bg-warm: #FAFAF7;

      /* Borders */
      --border-subtle: #E5E3DA;
      --line-architectural: #E2DDD5;
      --line-dark: #1A1A18;

      /* Typography */
      --text-charcoal: #1A1A18;
      --text-main: #1C1917;
      --text-muted: #62605B;
      --text-subtle: #8A8780;

      /* Brand colors */
      --brand-accent: #F5C20F;
      --brand-accent-hover: #D9A900;
      --brand-accent-light: rgba(245, 194, 15, 0.12);
      --brand-accent-dark: #8A5A00;

      /* Keep green only if needed for success/status UI */
      --accent-emerald: #0F4C3A;
      --accent-emerald-light: #10B981;

      /* Fonts */
      --font-primary: 'Manrope', -apple-system,
        BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-display: 'Cormorant Garamond', Georgia, serif;
      --font-editorial: 'Cormorant Garamond', Georgia, serif;
      --font-mono: 'JetBrains Mono', monospace;

      --brand-sans: var(--font-primary);
      --brand-serif: var(--font-display);
    }

    body,
    p,
    li,
    label,
    input,
    textarea,
    button,
    select,
    option,
    a,
    span,
    div {
      font-family: 'Manrope', sans-serif;
    }

    body {
      background-color: var(--bg-base);
      color: var(--text-main);
      overflow-x: hidden;
      line-height: 1.6;
      letter-spacing: -0.01em;
    }

    h1, h2, h3, h4, h5, h6 {
      margin: 0 0 0.75rem;
      color: var(--text-charcoal);
      font-family: var(--font-mono);
      font-weight: 500;
      line-height: 0.95;
      letter-spacing: -0.04em;
    }

    h1 { font-size: clamp(2.5rem, 4.2vw, 4.3rem); }
    h2 { font-size: clamp(2rem, 3vw, 3.1rem); }
    h3 { font-size: clamp(1.45rem, 2vw, 2.1rem); }
    h4 { font-size: clamp(1.2rem, 1.5vw, 1.6rem); }

    p {
      margin: 0 0 1rem;
      font-size: 1rem;
      line-height: 1.75;
      color: var(--text-muted);
      letter-spacing: -0.01em;
    }

    .eyebrow,
    .section-tag,
    .kicker,
    .meta {
      letter-spacing: 0.16em;
      font-weight: 700;
    }

    strong, b { font-weight: 700; }
    em, i {
      font-family: var(--font-editorial);
      font-style: italic;
    }

    small,
    .eyebrow,
    .kicker,
    .section-tag,
    .meta {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-subtle);
    }

    code, pre, kbd, samp {
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    }

        /* Editorial Line Thread */
        .system-thread {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 2rem;
            width: 1px;
            background: linear-gradient(180deg, rgba(15, 76, 58, 0.2) 0%, rgba(15, 76, 58, 0.05) 100%);
            z-index: 10;
            pointer-events: none;
        }

        @media (min-width: 1024px) {
            .system-thread {
                left: 4rem;
            }
        }

        /* Custom UI States */
        .active-service-tab {
            border-left-color: var(--accent-emerald) !important;
            background-color: #F4F3EE !important;
            font-weight: 600 !important;
            color: #0F4C3A !important;
        }

        .active-deploy-tab {
            background-color: #0F4C3A !important;
            color: #FFFFFF !important;
        }

        .code-glow {
            box-shadow: 0 0 25px -5px rgba(15, 76, 58, 0.15);
        }

        .scanline {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(15, 76, 58, 0.05) 50%, rgba(15, 76, 58, 0.05));
            background-size: 100% 4px;
        }

        /* Responsive image aspect controls */
        .interface-frame {
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.07);
        }

        /* Scroll collapse transitions */
        .top-strip-transition {
            transition: max-height 350ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 250ms ease,
                padding 350ms ease,
                border-color 300ms ease;
        }

        .main-bar-transition {
            transition: height 350ms cubic-bezier(0.16, 1, 0.3, 1),
                padding 350ms ease;
        }

        .nav-tier-transition {
            transition: gap 350ms ease, transform 350ms ease, opacity 350ms ease, max-height 0.3s ease, margin 0.3s ease;
        }

        /* Active / Hover underline micro-interaction */
        .nav-link {
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            right: 0;
            height: 1px;
            background: #B8892E;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.25s ease;
        }

        .nav-link:hover::after,
        .nav-link:focus-visible::after,
        .nav-link.is-active::after {
            transform: scaleX(1);
        }

        .nav-link.is-active {
            color: var(--text-main);
            font-weight: 600;
        }

        .whi-focus:focus-visible {
            outline: 2px solid #B8892E;
            outline-offset: 2px;
        }

        #corporate-header.is-scrolled #top-corporate-bar {
            max-height: 0;
            opacity: 0;
            padding-top: 0;
            padding-bottom: 0;
            border-bottom-color: transparent;
        }

        

        #corporate-header.is-scrolled #nav-tier-divider {
            opacity: 0;
        }

        #corporate-header.is-scrolled #nav-tier-bottom {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }

        #scroll-progress-line {
            transition: width 0.1s ease-out;
        }

        .mobile-menu-drawer {
            transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
        }

        /* Update the panel to act as an image wrapper */
        .whi-slide-panel {
            position: absolute;
            inset: 0;
            overflow: hidden;
            background-color: #1E1A16;
            /* Fallback color while image loads */
        }

        /* Ensure smooth slider crossfades and perfect layout */
        .whi-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: flex-end;
            padding: 2.5rem;
        }

        .whi-slide.is-active {
            opacity: 1;
            pointer-events: auto;
            z-index: 10;
        }

        .whi-slide.is-active .whi-slide-panel img {
            transform: scale(1.05);
            transition: transform 7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .whi-slide-panel img {
            transform: scale(1);
            transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .whi-nav-fill {
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 6.2s linear;
        }

        .whi-nav-fill.is-running {
            transform: scaleX(1);
        }

        .whi-slide-inner {
            position: absolute;
            right: 25px;

        }

html {
      scroll-behavior: smooth;
      background-color: var(--bg-ivory);
      color: var(--text-charcoal);
      font-family: var(--font-primary);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    *, *::before, *::after {
      box-sizing: border-box;
    }

    body,
    p,
    li,
    label,
    input,
    textarea,
    button,
    select,
    option,
    a,
    span,
    div {
      font-family: var(--font-primary);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0 0 0.9rem;
      color: var(--text-charcoal);
      font-family: var(--font-display);
      font-weight: 600;
      line-height: 0.98;
      letter-spacing: -0.05em;
    }

    h1 {
      font-size: clamp(2.75rem, 5vw, 5.4rem);
    }

    h2 {
      font-size: clamp(2.1rem, 3.6vw, 3.7rem);
    }

    h3 {
      font-size: clamp(1.55rem, 2.2vw, 2.3rem);
    }

    h4 {
      font-size: clamp(1.2rem, 1.8vw, 1.7rem);
    }

    p {
      margin: 0 0 1rem;
      font-size: 1rem;
      line-height: 1.7;
      color: var(--text-muted);
    }

    strong,
    b {
      font-weight: 700;
    }

    em,
    i {
      font-family: var(--font-editorial);
      font-style: italic;
    }

    small,
    .eyebrow,
    .meta,
    .kicker,
    .section-tag {
      font-family: var(--font-primary);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-subtle);
    }

    code,
    pre,
    kbd,
    samp {
      font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    }

    /* Custom Cursor Indicator */
    .cursor-indicator {
      position: fixed;
      top: 0;
      left: 0;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: var(--text-charcoal);
      color: var(--bg-ivory);
      font-family: var(--font-display);
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 9999;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.5);
      transition: opacity 0.3s var(--transition-smooth), transform 0.3s var(--transition-smooth);
    }

    .cursor-indicator.active {
      opacity: 0.95;
      transform: translate(-50%, -50%) scale(1);
    }



    /* Archieve section */

    /* Base Section */
.systems-section {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  background: #0f141c;
  color: #f1f5f9;
  border-radius: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Grid Layout */
.systems-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.5rem;
}

/* Sidebar List */
.systems-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sys-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: #182232;
  border: 1px solid #243044;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sys-item:hover {
  background: #1e2c40;
  border-color: #3b82f6;
}

.sys-item.active {
  background: #1e2c40;
  border-color: #b8892e;
  box-shadow: inset 4px 0 0 #b8892e;
}

.sys-index {
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  margin-right: 12px;
}

.sys-item.active .sys-index {
  color: #fdd750;
}

.sys-info {
  flex-grow: 1;
}

.sys-org {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  color: #b8892e;
  letter-spacing: 0.05em;
}

.sys-name {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.sys-item.active .sys-name {
  color: #ffffff;
  font-weight: 600;
}

.sys-tag {
  font-family: monospace;
  font-size: 0.6rem;
  color: #94a3b8;
  background: #0f141c;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #243044;
}

/* Display Card */
.system-display-card {
  background: #182232;
  border: 1px solid #243044;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.card-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.85rem;
}

.org-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-wrapper {
  width: 44px;
  height: 44px;
  background: #ffffff;
  border-radius: 8px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.org-sub {
  font-size: 0.65rem;
  font-weight: 700;
  color: #fdd750;
  letter-spacing: 0.08em;
  display: block;
}

.display-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 2px 0 0 0;
}

.meta-pills {
  display: flex;
  align-items: center;
  gap: 8px;
}

.code-pill {
  font-family: monospace;
  font-size: 0.65rem;
  color: #94a3b8;
  background: #0f141c;
  border: 1px solid #243044;
  padding: 4px 8px;
  border-radius: 4px;
}

.live-pill {
  font-family: monospace;
  font-size: 0.65rem;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.display-description {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 1.25rem 0;
}

/* Clean Preview Viewport Container */
.preview-viewport {
  width: 100%;
  height: 350px;
  background: #090d14;
  border: 1px solid #243044;
  border-radius: 10px;
  overflow: hidden;
}

.preview-viewport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: opacity 0.25s ease;
}

/* Responsive */
@media (max-width: 900px) {
  .systems-grid {
    grid-template-columns: 1fr;
  }
  .sys-name {
    max-width: none;
  }
  .preview-viewport {
    height: 260px;
  }
}

    /* ==========================================================================
       3. SECTION CONTAINER & HEADER
       ========================================================================== */
    /* .archive-section {
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;
      padding: 3rem 1.5rem 5rem 1.5rem;
      position: relative;
      background:#fff;
    }

    .archive-header {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      margin-bottom: 4rem;
      align-items: flex-end;
    }

    @media (min-width: 1024px) {
      .archive-header {
        grid-template-columns: 1.3fr 0.7fr;
        gap: 4rem;
      }
    }

    .archive-header-title {
      font-family: var(--font-display);
      font-size: clamp(3.2rem, 7.5vw, 7.5rem);
      line-height: 0.92;
      font-weight: 400;
      letter-spacing: -0.04em;
      color: var(--text-charcoal);
      text-transform: uppercase;
    }

    .archive-header-title .emphasis {
      display: block;
      font-weight: 700;
      color: var(--text-charcoal);
      letter-spacing: -0.05em;
      position: relative;
    }

    .archive-header-description {
      font-family: var(--font-primary);
      font-size: clamp(1rem, 1.25vw, 1.35rem);
      line-height: 1.6;
      color: var(--text-muted);
      font-weight: 400;
      max-width: 34rem;
      align-self: flex-end;
      padding-bottom: 0.5rem;
    }

    .archive-body {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
      position: relative;
    }

    @media (min-width: 1024px) {
      .archive-body {
        grid-template-columns: 180px 1fr;
        gap: 5rem;
      }
    }

    .sticky-sidebar {
      display: none;
    }

    @media (min-width: 1024px) {
      .sticky-sidebar {
        display: block;
        position: sticky;
        top: 6rem;
        height: fit-content;
        align-self: start;
        padding-top: 1rem;
      }
    }

    .sidebar-inner {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      position: relative;
    }

    .sidebar-track {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      background-color: var(--line-architectural);
    }

    .sidebar-progress {
      position: absolute;
      left: 0;
      top: 0;
      width: 2px;
      height: 0%;
      background-color: var(--brand-accent);
      transition: height 0.4s var(--transition-smooth);
    }

    .sticky-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      padding-left: 1.25rem;
    }

    .sticky-nav-item {
      text-decoration: none;
      color: var(--text-subtle);
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      transition: color 0.3s ease, transform 0.3s ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .sticky-nav-item:hover {
      color: var(--text-charcoal);
    }

    .sticky-nav-item.active {
      color: var(--brand-accent);
      font-weight: 700;
      transform: translateX(4px);
    } */

    /* 
    
    
    
    
    
    
    
       5. PROJECT CHAPTERS & ASYMMETRIC LAYOUTS
       ========================================================================== */
    .projects-stream {
      display: flex;
      flex-direction: column;
      gap: 3.5rem;
    }

    .project-chapter {
      position: relative;
      padding-top: 0.5rem;
      transition: opacity 0.6s var(--transition-smooth), transform 0.6s var(--transition-smooth);
    }

    /* Chapter Header Line & Number */
    .chapter-top-bar {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      border-top: 1px solid var(--line-architectural);
      margin-bottom: 1.25rem;
      padding-top: 0.75rem;
      position: relative;
    }

    .chapter-accent-line {
      position: absolute;
      top: -1px;
      left: 0;
      width: 0%;
      /* height: 1px;
  background-color: #F7F7F7; */
      transition: width 0.8s var(--transition-smooth);
    }

    .project-chapter.in-focus .chapter-accent-line {
      width: 100%;
    }

    .chapter-number {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 2.4vw, 2.6rem);
      font-weight: 400;
      letter-spacing: -0.02em;
      color: var(--text-charcoal);
      transition: color 0.4s ease, transform 0.4s ease;
    }

    .project-chapter.in-focus .chapter-number {
      /* color: var(--brand-accent); */
      color: #E3E3E3;
      transform: translateY(-2px);
    }

    /* Content Layout Variations */
    .chapter-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      align-items: center;
    }

    @media (min-width: 900px) {
      /* P.01: Text Left / Visual Right */
      .layout-p01 {
        grid-template-columns: 1.1fr 0.9fr;
      }
      /* P.02: Visual Left / Text Right */
      .layout-p02 {
        grid-template-columns: 0.95fr 1.05fr;
      }
      .layout-p02 .chapter-visual-wrapper {
        grid-column: 1;
        grid-row: 1;
      }
      .layout-p02 .chapter-text-block {
        grid-column: 2;
        grid-row: 1;
      }
      /* P.03: Text Dominant / Visual Overlapping */
      .layout-p03 {
        grid-template-columns: 1.2fr 0.8fr;
      }
      /* P.04: Asymmetric Split */
      .layout-p04 {
        grid-template-columns: 0.8fr 1.2fr;
      }
      /* P.05: Visual Dominant */
      .layout-p05 {
        grid-template-columns: 1fr;
      }
      .layout-p05 .chapter-visual-wrapper {
        height: 520px;
      }
      /* P.06: Text Dominant */
      .layout-p06 {
        grid-template-columns: 1.25fr 0.75fr;
      }
      /* P.07: Visual Left / Text Right */
      .layout-p07 {
        grid-template-columns: 0.9fr 1.1fr;
      }
      .layout-p07 .chapter-visual-wrapper {
        grid-column: 1;
        grid-row: 1;
      }
      .layout-p07 .chapter-text-block {
        grid-column: 2;
        grid-row: 1;
      }
    }

    /* Text Component Hierarchy */
    .chapter-text-block {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      z-index: 2;
      transition: transform 0.6s var(--transition-smooth);
    }

    .project-chapter.in-focus .chapter-text-block {
      transform: translateY(-4px);
    }

    .project-title {
      /* font-family: var(--font-display); */
      font-size: clamp(1.2rem, 2.2vw, 2rem);
      line-height: 1.12;
      font-weight: 500;
      letter-spacing: -0.03em;
      color: var(--text-charcoal);
      text-transform: uppercase;
      transition: color 0.4s ease;
    }

    .organization-name {
      font-family: var(--font-primary);
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .project-description {
      font-family: var(--font-primary);
      font-size: clamp(0.95rem, 1.1vw, 1.15rem);
      line-height: 1.65;
      color: var(--text-muted);
      font-weight: 400;
      opacity: 0.75;
      transition: opacity 0.5s var(--transition-smooth), transform 0.5s var(--transition-smooth);
    }

    .project-chapter.in-focus .project-description {
      opacity: 1;
      color: var(--text-charcoal);
    }

    /* Typographic Technology Line (NO TAGS/PILLS) */
    .tech-stack-line {
      font-family: var(--font-display);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--text-subtle);
      margin-top: 0.75rem;
      padding-top: 1rem;
      border-top: 1px dashed var(--line-architectural);
      opacity: 0.5;
      transform: translateY(6px);
      transition: opacity 0.6s var(--transition-smooth), transform 0.6s var(--transition-smooth), color 0.4s ease;
    }

    .project-chapter.in-focus .tech-stack-line {
      opacity: 1;
      transform: translateY(0);
      color: var(--brand-accent);
    }

    /* Visual Containers & Image Art Direction */
    .chapter-visual-wrapper {
      position: relative;
      width: 100%;
      height: 380px;
      overflow: hidden;
      background-color: var(--bg-ivory-alt);
      cursor: pointer;
    }

    @media (min-width: 1200px) {
      .chapter-visual-wrapper {
        height: 440px;
      }
    }

    .chapter-visual-inner {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .chapter-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(25%) contrast(102%);
      transform: scale(1.04);
      transition: transform 0.9s var(--transition-smooth), filter 0.6s var(--transition-smooth);
      will-change: transform;
    }

    .project-chapter.in-focus .chapter-image {
      filter: grayscale(0%) contrast(105%);
      transform: scale(1);
    }

    .chapter-visual-wrapper:hover .chapter-image {
      transform: scale(1.06);
    }

    /* Architectural Image Framing Overlay */
    .visual-overlay-grid {
      position: absolute;
      inset: 0;
      border: 1px solid rgba(26, 26, 24, 0.08);
      pointer-events: none;
    }

    /* ==========================================================================
       6. FOCUS MODE & QUIETER SURROUNDINGS
       ========================================================================== */
    .projects-stream.has-focus .project-chapter:not(.in-focus) {
      opacity: 0.35;
      filter: blur(0.5px);
    }

    .institution-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  /* background-color: rgba(184, 137, 46, 0.1); */
  border: 1px solid rgba(155, 155, 155, 0.06);
  flex-shrink: 0;
}

.institution-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.organization-name {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Reduced Thumbnail Image Container Dimensions */
.chapter-visual-wrapper {
  height: 220px; /* Reduced from 380px */
  border-radius: 6px;
}

@media (min-width: 1200px) {
  .chapter-visual-wrapper {
    height: 260px; /* Reduced from 440px */
  }
}

.layout-p05 .chapter-visual-wrapper {
  height: 280px; /* Reduced layout-p05 hero wrapper from 520px */
}

.chapter-text-block {
  gap: 0.75rem; /* Compact text spacing */
}

    /* ==========================================================================
       7. ACCESSIBILITY & REDUCED MOTION
       ========================================================================== */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      
      .cursor-indicator {
        display: none !important;
      }
    }

    /* Seamless Infinite Ticker Keyframes */
        @keyframes tickerScrollLeft {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
        }

        @keyframes tickerScrollRight {
            0% { transform: translate3d(-50%, 0, 0); }
            100% { transform: translate3d(0, 0, 0); }
        }

        #who-we-work-with .track-left {
            display: flex;
            width: max-content;
            animation: tickerScrollLeft 60s linear infinite;
            will-change: transform;
        }

        #who-we-work-with .track-right {
            display: flex;
            width: max-content;
            animation: tickerScrollRight 65s linear infinite;
            will-change: transform;
        }

        #who-we-work-with .track-left-fast {
            display: flex;
            width: max-content;
            animation: tickerScrollLeft 52s linear infinite;
            will-change: transform;
        }

        /* Hover Pause State */
        #who-we-work-with .marquee-lane:hover .track-left,
        #who-we-work-with .marquee-lane:hover .track-right,
        #who-we-work-with .marquee-lane:hover .track-left-fast {
            animation-play-state: paused;
        }

        /* Edge Gradient Mask Fade */
        #who-we-work-with .edge-fade-mask {
            mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
        }

        /* Non-Card Pedestal Hover Dynamics */
        #who-we-work-with .logo-pedestal {
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            border: thin solid #f4f4f4;
            min-height: 6.4rem;
        }

        #who-we-work-with .logo-pedestal img {
            mix-blend-mode: multiply;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            max-height: 4rem;
            margin-top: 6px;
            
        }

        #who-we-work-with .logo-pedestal:hover {
            background-color: rgba(255, 255, 255, 0.85);
        }

        #who-we-work-with .logo-pedestal:hover img {
            filter: grayscale(0%) opacity(1);
            transform: scale(1.08);
        }

        #who-we-work-with .logo-pedestal .logo-caption {
            opacity: 0.55;
            transition: opacity 0.35s ease, color 0.35s ease;
        }

        #who-we-work-with .logo-pedestal:hover .logo-caption {
            opacity: 1;
            color: #0c0a09;
        }

       /* Scope-Isolated Custom Styling */
            #applied-ai-editorial .expandable-column {
                flex: 1 1 33.333%;
                transition: flex 0.8s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.8s ease;
                will-change: flex;
            }

            /* Container group hover logic to dim non-hovered items */
            @media (min-width: 1024px) {
                #applied-ai-editorial .columns-container:hover .expandable-column {
                    flex: 1 1 25%;
                    opacity: 0.6;
                }

                #applied-ai-editorial .columns-container .expandable-column:hover {
                    flex: 1 1 50%;
                    opacity: 1;
                    background-color: #ffffff;
                }
            }

            #applied-ai-editorial .img-zoom {
                transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
            }

            #applied-ai-editorial .expandable-column:hover .img-zoom {
                transform: scale(1.05);
            }

            @media (prefers-reduced-motion: reduce) {

                #applied-ai-editorial .expandable-column,
                #applied-ai-editorial .img-zoom {
                    transition: none !important;
                    transform: none !important;
                }

                #applied-ai-editorial .columns-container:hover .expandable-column {
                    flex: 1 1 33.333%;
                    opacity: 1;
                }
            }

            /* Hero slider */

            /* Slide Overlap & Smooth Fade */
    .whi-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s ease;
        pointer-events: none;
    }
    .whi-slide.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Live Progress Fill Bar linked to 6.2s Timer */
    .whi-nav-fill {
        transform: translateX(-100%);
    }
    .whi-nav-fill.is-running {
        animation: fillNav 6.2s linear forwards;
    }
    @keyframes fillNav {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(0%); }
    }

    /* Kinetic Pulse Line Accent */
    .signal-pulse {
        animation: signalPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes signalPulse {
        0% { transform: translateY(-100%); }
        100% { transform: translateY(300%); }
    }

    /* Converge Glow Effect */
    .converge-glow {
        transition: text-shadow 0.3s ease;
    }
    .converge-glow:hover {
        text-shadow: 0 0 14px rgba(240, 200, 47, 0.7);
    }

    /* Continuity section UI */

    #continuity-editorial {
        background: #FAF9F6;
    }

    #continuity-editorial .ca-focus:focus-visible {
        outline: 2px solid #B8892E;
        outline-offset: 3px;
    }

    #continuity-editorial .ca-mask-outer {
        display: inline-block;
        overflow: hidden;
    }

    #continuity-editorial .ca-mask {
        display: inline-block;
        transform: translateY(110%);
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #continuity-editorial .ca-reveal {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    #continuity-editorial .ca-fill {
        width: 0%;
        transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    }

    /* Image crossfade + slow Ken Burns while active */
    #continuity-editorial .ca-photo {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    #continuity-editorial .ca-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1);
        transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #continuity-editorial .ca-photo.is-active {
        opacity: 1;
        z-index: 2;
    }

    #continuity-editorial .ca-photo.is-active img {
        transform: scale(1.06);
    }

    /* Institutional index */
    #continuity-editorial .ca-item {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        padding: 1.15rem 0;
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.3s ease, padding-left 0.3s ease;
    }

    #continuity-editorial .ca-item[aria-pressed="true"] {
        opacity: 1;
        padding-left: 0.5rem;
    }

    #continuity-editorial .ca-item-name {
        transition: color 0.3s ease;
    }

    #continuity-editorial .ca-item[aria-pressed="true"] .ca-item-name,
    #continuity-editorial .ca-item[aria-pressed="true"] .ca-item-meta {
        color: #B8892E;
    }

    @media (prefers-reduced-motion: reduce) {

        #continuity-editorial .ca-mask,
        #continuity-editorial .ca-reveal,
        #continuity-editorial .ca-fill,
        #continuity-editorial .ca-item,
        #continuity-editorial .ca-photo,
        #continuity-editorial .ca-photo img {
            transition: none !important;
        }

        #continuity-editorial .ca-photo.is-active img {
            transform: none !important;
        }
    }

    


#process {
  padding-top:0!important
}

/* ---- headline word reveal (pure CSS, autoplays, no JS required) ---- */
    .abt-hmask {
        display: inline-block;
        overflow: hidden;
        vertical-align: top;
        padding-bottom: 0.1em;
        margin-bottom: -0.1em;
    }

    .abt-hword {
        display: inline-block;
        animation: abtWordIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--i) * 0.09s);
    }

    @keyframes abtWordIn {
        0% {
            transform: translateY(112%);
            opacity: 0;
            filter: blur(5px);
        }

        60% {
            filter: blur(0);
        }

        100% {
            transform: translateY(0);
            opacity: 1;
            filter: blur(0);
        }
    }

    .abt-hunderline {
        position: absolute;
        left: 0;
        bottom: 0.02em;
        height: 2px;
        width: 100%;
        background: #b8892e;
        transform: scaleX(0);
        transform-origin: left;
        animation: abtUnderlineIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.78s both;
    }

    @keyframes abtUnderlineIn {
        to {
            transform: scaleX(1);
        }
    }

    /* ---- paragraph / stats / CTA — simple fade-up, staggered via --d ---- */
    .abt-hfade {
        animation: abtFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s) both;
    }

    @keyframes abtFadeUp {
        0% {
            transform: translateY(14px);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .abt-hword, .abt-hunderline, .abt-hfade {
            animation: none !important;
            transform: none !important;
            opacity: 1 !important;
            filter: none !important;
        }
    }

  /* Keep the client marquee sliding under OS "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  #who-we-work-with .track-left      { animation-duration: 60s !important; animation-iteration-count: infinite !important; }
  #who-we-work-with .track-right     { animation-duration: 65s !important; animation-iteration-count: infinite !important; }
  #who-we-work-with .track-left-fast { animation-duration: 52s !important; animation-iteration-count: infinite !important; }
}

/* Class-driven pause, so hover-pause keeps working after the button is used */
#who-we-work-with.is-stream-paused .track-left,
#who-we-work-with.is-stream-paused .track-right,
#who-we-work-with.is-stream-paused .track-left-fast {
  animation-play-state: paused;
}

.pause-stream {
  position: relative;
  z-index: 10;
}

/* ---------- Mobile drawer ----------
   Replace your existing .mobile-menu-drawer rule AND the old
   "#mobile-menu-drawer { margin-top; background:#000 }" override with this. */

:root {
  --header-h: 89px; /* kept in sync by JS (header height incl. progress line) */
}

.mobile-menu-drawer {
  top: var(--header-h);
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.5rem, env(safe-area-inset-right, 0px));

  /* closed state: hidden from sight, focus and screen readers */
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    visibility 0s linear 0.35s;
}

.mobile-menu-drawer.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0s;
}

/* Mobile browsers: 100vh / bottom:0 can hide behind the URL bar.
   dvh follows the real visible viewport. */
@supports (height: 100dvh) {
  .mobile-menu-drawer {
    bottom: auto;
    height: calc(100dvh - var(--header-h));
  }
}

/* Lock page scroll while the menu is open */
html.menu-open,
html.menu-open body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-drawer {
    transition: none;
  }
}

/* ---------- Page-specific mobile tweaks ----------
   The #top-corporate-bar font-size !important hack and the drawer
   margin-top/background override are no longer needed — delete them. */
@media (max-width: 768px) {
  #signal {
    padding-top: 10rem !important;
  }
}

@media(max-width:768px) {
  #signal {
    padding-top: 10rem!important;
  }
  #top-corporate-bar .tracking-widest {
    font-size: 8px!important;
  }
  
}

/* Transition header properties smoothly */
#corporate-header {
  transition: background-color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
  /* background-color: #fff; */
}

#corporate-header.is-scrolled #main-header-bar {
  background-color: rgba(241, 241, 241, 0.95) !important;
}

#nav-tier-top a, #main-header-bar a {
  text-transform: uppercase!important;
  color: rgb(121, 121, 121)!important;
}


/* Precision architectural background grid */
        .hero-grid-pattern {
            background-size: 60px 60px;
            background-image:
                linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        }

        /* Radial lighting mask to keep focus on center content */
        .hero-vignette {
            background: radial-gradient(circle at 65% 40%, rgba(11, 15, 25, 0.2) 0%, rgba(7, 10, 18, 0.95) 85%);
        }

        /* Fine line border gradients */
        .border-gradient-gold {
            border-image: linear-gradient(to right, rgba(197, 160, 89, 0.4), rgba(255, 255, 255, 0.05)) 1;
        }

        /* Responsive code start*/

        @media(max-width: 760px) {
            header .grid.grid-cols-1.gap-8.pb-16 {
              padding-bottom: 10px;
            }
            header.flex.flex-col.gap-6.pb-5.mb-8 {
              padding-bottom: 10px;
              margin-bottom: 10px;
            }
            footer p {
              text-align: center;
            }
        }

        p {
  text-align: justify;
  word-spacing: normal;
  hyphens: auto;
}

#continuity-editorial .about-p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px;
  font-weight: 500;
}