/* =========================================================================
       1. CORE SYSTEM DESIGN TOKENS & RESET
       ========================================================================= */
    :root {
      --accent-orange: #FF5722;
      --main-cream: #FCF9EA;
      --secondary-beige: #F3E8DF;
      --text-olive: #777C6D;
      --white: #FFFFFF;
      --dark-charcoal: #1A1C18;
      --font-urbanist: 'Urbanist', sans-serif;
      --bezier-editorial: cubic-bezier(0.16, 1, 0.3, 1);
      --transition-smooth: 0.6s var(--bezier-editorial);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
    }

    html, body {
      background-color: #ffc391;
      color: var(--dark-charcoal);
      font-family: var(--font-urbanist);
      font-weight: 300;
      line-height: 1.7;
      overflow-x: hidden;
    }

    /* Core Typography Matrix */
    h1, h2, h3, h4 {
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: -0.03em;
      line-height: 0.95;
      color: var(--dark-charcoal);
    }
    p {
      font-weight: 300;
      font-size: 1.1rem;
      letter-spacing: 0.03em;
      color: rgba(26, 28, 24, 0.8);
    }
    .text-link {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 0.85rem;
      color: var(--dark-charcoal);
      text-decoration: none;
      cursor: pointer;
    }

    /* Master Page Routing & Layout Containers */
    .app-page-node {
      display: none;
      width: 100%;
      min-height: 100vh;
      position: relative;
    }
    .app-page-node.route-active {
      display: block;
      animation: pageTurnEffect 1s var(--bezier-editorial) forwards;
    }
    @keyframes pageTurnEffect {
      from { opacity: 0; transform: translate3d(30px, 0, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    .editorial-section {
      padding: 160px 8% 120px 8%;
      position: relative;
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    @media(max-width: 768px) {
      .editorial-section { padding: 120px 24px 80px 24px; }
    }

    /* Global Image Canvas Object Placeholder Styling */
    .editorial-image-placeholder {
      background-color: var(--secondary-beige);
      background-size: cover;
      background-position: center;
      filter: grayscale(0.2);
      transition: var(--transition-smooth);
      position: relative;
      overflow: hidden;
    }
    .editorial-image-placeholder:hover {
      filter: grayscale(0);
    }

    /* =========================================================================
       2. RECONCILED NAVIGATION CONTROL CENTER & UTILITIES
       ========================================================================= */
    /* Universal Fixed Action HUD Layout */
    .hud-action-strip {
      position: fixed;
      top: 30px;
      right: 4%;
      display: flex;
      align-items: center;
      gap: 20px;
      z-index: 10000;
    }
    .hud-icon-trigger {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: var(--white);
      border: 1px solid rgba(0,0,0,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(0,0,0,0.04);
      transition: var(--transition-smooth);
      position: relative;
    }
    .hud-icon-trigger:hover {
      transform: scale(1.05);
      border-color: var(--accent-orange);
    }
    .hud-cart-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: var(--accent-orange);
      color: var(--white);
      font-size: 0.7rem;
      font-weight: 800;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Hamburger Fullscreen Overlay */
    .hamburger-nav-overlay {
      position: fixed;
      inset: 0;
      background: var(--main-cream);
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 60px;
    }
    .hamburger-nav-overlay.overlay-open { display: flex; animation: pageTurnEffect 0.5s var(--bezier-editorial); }
    .hamburger-menu-list {
      list-style: none;
      text-align: center;
    }
    .hamburger-menu-list li { margin: 20px 0; }
    .hamburger-menu-list a {
      font-size: 3.5rem;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--dark-charcoal);
      text-decoration: none;
      transition: color 0.3s;
      cursor: pointer;
    }
    .hamburger-menu-list a:hover { color: var(--accent-orange); }

    /* Interactive Search Dropdown Sheet */
    .search-sheet-curtain {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 40vh;
      background: var(--white);
      border-bottom: 3px solid var(--dark-charcoal);
      z-index: 11000;
      display: none;
      flex-direction: column;
      justify-content: center;
      padding: 0 8%;
      box-shadow: 0 30px 60px rgba(0,0,0,0.05);
    }
    .search-input-element {
      width: 100%;
      border: none;
      border-bottom: 4px solid var(--dark-charcoal);
      font-size: 3.5rem;
      font-weight: 800;
      text-transform: uppercase;
      font-family: var(--font-urbanist);
      outline: none;
      padding-bottom: 10px;
      color: var(--dark-charcoal);
    }

    /* System E-Commerce Basket Drawer */
    .basket-drawer-curtain {
      position: fixed;
      top: 0;
      right: -100%;
      width: 480px;
      height: 100vh;
      background: var(--white);
      border-left: 2px solid var(--dark-charcoal);
      z-index: 11000;
      padding: 50px 40px;
      display: flex;
      flex-direction: column;
      transition: right 0.5s var(--bezier-editorial);
    }
    .basket-drawer-curtain.drawer-visible { right: 0; }
    .basket-items-scrollarea { flex-grow: 1; overflow-y: auto; margin: 30px 0; }
    .basket-item-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    /* Legal Verification Sidebar Overlay */
    .compliance-sidebar-drawer {
      position: fixed;
      top: 0;
      left: -100%;
      width: 520px;
      height: 100vh;
      background: var(--main-cream);
      border-right: 2px solid var(--dark-charcoal);
      z-index: 11000;
      padding: 60px 40px;
      overflow-y: auto;
      transition: left 0.5s var(--bezier-editorial);
    }
    .compliance-sidebar-drawer.drawer-visible { left: 0; }

    /* =========================================================================
       3. SPECIFIC STRUCTURAL HEADERS PER PAGE SPECIFICATION
       ========================================================================= */
    /* Home Page Left Rail Layout */
    .home-left-fixed-rail {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100vh;
      border-right: 1px solid rgba(26,28,24,0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 40px 0;
      z-index: 900;
      background: var(--main-cream);
    }
    .logo-img-frame { width: 165px; height: 165px; object-fit: contain; cursor: pointer; margin-left: 4rem; }
    .vertical-rail-directory { list-style: none; display: flex; flex-direction: column; gap: 20px; }
    .vertical-rail-directory a { writing-mode: vertical-rl; text-transform: uppercase; font-size: 0.75rem; font-weight: 800; letter-spacing: 2px; text-decoration: none; color: rgba(26,28,24,0.4); cursor: pointer; transition: color 0.3s; }
    .vertical-rail-directory a.rail-active-route { color: var(--accent-orange); }

    /* About Header: Top Center Floating Block */
    .about-top-floating-square {
      position: absolute;
      top: 40px;
      left: 50%;
      transform: translateX(-50%);
      width: 70px;
      height: 70px;
      background: var(--white);
      border: 1px solid var(--dark-charcoal);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 800;
    }

    /* Growth Header: Fixed Base HUD Dock */
    .growth-bottom-fixed-dock {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--dark-charcoal);
      padding: 15px 40px;
      border-radius: 100px;
      display: flex;
      gap: 30px;
      z-index: 800;
    }
    .growth-bottom-fixed-dock a { color: rgba(255,255,255,0.6); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; text-decoration: none; cursor: pointer; }
    .growth-bottom-fixed-dock a:hover { color: var(--accent-orange); }

    /* Marketplace Header: Right Lateral Sidebar Anchor */
    .market-right-sidebar-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: 90px;
      height: 100vh;
      border-left: 1px solid rgba(26,28,24,0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 40px;
      z-index: 800;
      background: var(--main-cream);
    }
    .market-sidebar-txt { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; font-size: 0.8rem; font-weight: 800; letter-spacing: 3px; }

    /* Brands Page Header */
    .brands-top-corner-bar {
      position: absolute;
      top: 40px;
      left: 4%;
      right: 4%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 800;
    }

    /* Insights Page Thin Strip */
    .insights-thin-strip {
      width: 100%;
      border-bottom: 1px solid var(--dark-charcoal);
      padding: 15px 4%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8rem;
      text-transform: uppercase;
      font-weight: 800;
    }

    /* =========================================================================
       4. PAGE GRAPHIC FLOW ARRAYS (CSS MODULES)
       ========================================================================= */
    /* HOME MODULE LAYOUTS */
    .home-asymmetric-collage {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 60px;
      align-items: center;
      margin-top: 40px;
    }
    .home-collage-text-lockup {
      padding: 40px;
      border-left: 3px solid var(--accent-orange);
    }
    @media(max-width: 900px){ .home-asymmetric-collage { grid-template-columns: 1fr; } }

    .horizontal-chapters-scroller {
      display: flex;
      gap: 40px;
      overflow-x: auto;
      padding: 40px 0;
      scrollbar-width: none;
    }
    .horizontal-chapters-scroller::-webkit-scrollbar { display: none; }
    .chapter-narrative-card {
      min-width: 400px;
      background: var(--white);
      border: 1px solid rgba(0,0,0,0.06);
      padding: 45px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .market-mosaic-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 220px;
      gap: 25px;
      margin-top: 50px;
    }
    .mosaic-tile-uneven:nth-child(1) { grid-row: span 2; }
    .mosaic-tile-uneven:nth-child(2) { grid-column: span 2; }
    .mosaic-tile-uneven:nth-child(5) { grid-row: span 2; grid-column: span 2; }
    .mosaic-tile-hover-panel {
      position: absolute;
      inset: 0;
      background: rgba(255,87,34,0.95);
      color: var(--white);
      padding: 30px;
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .mosaic-tile-uneven:hover .mosaic-tile-hover-panel { opacity: 1; }
    @media(max-width: 800px) { .market-mosaic-grid { grid-template-columns: repeat(2, 1fr); } }

    .brand-river-canvas {
      position: relative;
      background: var(--white);
      padding: 100px 0;
      overflow: hidden;
    }
    .orange-river-vector {
      position: absolute;
      top: 50%;
      left: -10%;
      width: 120%;
      height: 180px;
      background: var(--accent-orange);
      transform: translateY(-50%) rotate(-3deg);
      z-index: 1;
    }
    .river-cards-container {
      position: relative;
      z-index: 2;
      display: flex;
      gap: 40px;
      padding: 0 8%;
      overflow-x: auto;
    }
    .river-stream-card {
      background: var(--white);
      border: 2px solid var(--dark-charcoal);
      padding: 30px;
      min-width: 300px;
      box-shadow: 10px 10px 0 rgba(0,0,0,0.05);
    }

    .floating-testimonials-sandbox {
      background: var(--secondary-beige);
      height: 600px;
      position: relative;
      overflow: hidden;
    }
    .drifting-testimonial-paper {
      position: absolute;
      background: var(--white);
      padding: 30px;
      width: 320px;
      border: 1px dashed var(--text-olive);
      box-shadow: 0 15px 35px rgba(0,0,0,0.03);
      animation: driftFloat 16s infinite ease-in-out alternate;
    }
    @keyframes driftFloat {
      0% { transform: translateY(0) rotate(1deg); }
      50% { transform: translateY(-25px) rotate(-2deg); }
      100% { transform: translateY(5px) rotate(2deg); }
    }

    /* ABOUT MODULE LAYOUTS */
    .timeline-wall-container {
      margin-top: 60px;
      border-left: 2px solid var(--dark-charcoal);
      padding-left: 40px;
    }
    .timeline-milestone-row {
      display: grid;
      grid-template-columns: 150px 1fr;
      margin-bottom: 50px;
    }
    .timeline-year-node { font-size: 2rem; font-weight: 800; color: var(--accent-orange); }

    /* GROWTH MODULE LAYOUTS */
    .blueprint-diagram-viewport {
      width: 100%;
      height: 500px;
      background: var(--white);
      border: 2px dashed var(--text-olive);
      margin: 40px 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .blueprint-central-core {
      width: 140px;
      height: 140px;
      background: var(--dark-charcoal);
      color: var(--white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      font-weight: 800;
      font-size: 0.85rem;
      z-index: 5;
    }
    .blueprint-satellite-node {
      position: absolute;
      background: var(--main-cream);
      border: 2px solid var(--dark-charcoal);
      padding: 15px 25px;
      font-weight: 800;
      font-size: 0.8rem;
      text-transform: uppercase;
    }

    .zig-zag-architecture-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      margin-bottom: 120px;
    }
    .zig-zag-architecture-row.row-alternate { direction: rtl; }
    .zig-zag-architecture-row.row-alternate .zig-zag-text { direction: ltr; }
    @media(max-width: 850px) { .zig-zag-architecture-row { grid-template-columns: 1fr; gap: 30px; } }

    /* MARKETPLACE DISTRICTS */
    .marketplace-city-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      margin-top: 50px;
    }
    .district-block-monolith {
      background: var(--white);
      border: 3px solid var(--dark-charcoal);
      padding: 40px;
      transition: var(--transition-smooth);
      cursor: pointer;
    }
    .district-block-monolith:hover {
      background: var(--accent-orange);
      transform: translateY(-10px);
    }
    .district-block-monolith:hover h3, .district-block-monolith:hover p { color: var(--white); }
    @media(max-width: 900px) { .marketplace-city-grid { grid-template-columns: 1fr; } }

    /* BRANDS GALLERY SNAP */
    .brands-masonry-canvas {
      column-count: 3;
      column-gap: 30px;
      margin-top: 50px;
    }
    .brands-masonry-item {
      background: var(--white);
      border: 1px solid var(--dark-charcoal);
      padding: 20px;
      margin-bottom: 30px;
      break-inside: avoid;
    }
    @media(max-width: 900px) { .brands-masonry-canvas { column-count: 1; } }

    /* INSIGHTS ARCHIVE NEWSPAPER */
    .insights-three-column-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-top: 60px;
    }
    .insights-editorial-column {
      border-right: 1px solid rgba(0,0,0,0.1);
      padding-right: 40px;
    }
    .insights-editorial-column:last-child { border-right: none; padding-right: 0; }
    @media(max-width: 900px) { .insights-three-column-grid { grid-template-columns: 1fr; } .insights-editorial-column { border-right: none; padding-right: 0; } }

    /* CONTACT MODULE LAYOUT */
    .contact-split-blocks-mesh {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      margin-top: 50px;
    }
    .contact-floating-input-card {
      background: var(--white);
      border: 1px solid var(--dark-charcoal);
      padding: 30px;
      box-shadow: 8px 8px 0 rgba(0,0,0,0.04);
    }
    .contact-native-element {
      width: 100%;
      border: none;
      border-bottom: 2px solid var(--text-olive);
      padding: 10px 0;
      font-family: var(--font-urbanist);
      font-size: 1.1rem;
      outline: none;
    }
    @media(max-width: 750px) { .contact-split-blocks-mesh { grid-template-columns: 1fr; } }

    /* =========================================================================
       5. CIRCULAR GLOBAL FOOTER FRAMEWORK WITH ORBITING SOCIAL LINKS
       ========================================================================= */
    .global-circular-footer {
      background-color: var(--text-olive);
      color: var(--white);
      padding: 120px 8% 60px 8%;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .footer-watermark-bg {
      position: absolute;
      font-size: 14vw;
      font-weight: 800;
      opacity: 0.03;
      color: var(--white);
      pointer-events: none;
      bottom: 10px;
      left: 5%;
      width: 90%;
      text-align: center;
    }
    .footer-orbit-universe {
      position: relative;
      width: 440px;
      height: 440px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 60px;
    }
    @media(max-width: 500px) { .footer-orbit-universe { scale: 0.7; } }
    
    .footer-circular-center-logo {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: var(--white);
      color: var(--dark-charcoal);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      z-index: 10;
      box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    }
    .footer-orbit-ring-track {
      position: absolute;
      width: 320px;
      height: 320px;
      border: 1px dashed rgba(255,255,255,0.25);
      border-radius: 50%;
      animation: continuousOrbitRotation 35s linear infinite;
    }
    .orbiting-social-node {
      position: absolute;
      width: 44px;
      height: 44px;
      background: var(--accent-orange);
      color: var(--white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 800;
      text-decoration: none;
    }
    @keyframes continuousOrbitRotation {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .footer-circular-navigation-links {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
      list-style: none;
      z-index: 5;
      margin-bottom: 40px;
    }
    .footer-circular-navigation-links a {
      color: rgba(255,255,255,0.8);
      font-weight: 600;
      text-transform: uppercase;
      font-size: 0.9rem;
      text-decoration: none;
      cursor: pointer;
    }
    .footer-circular-navigation-links a:hover { color: var(--accent-orange); }
    .footer-newsletter-panel{
  width:100%;
  max-width:700px;
  margin:80px auto;
  text-align:center;
}

.newsletter-kicker{
  display:block;
  color:var(--accent-orange);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:.8rem;
  margin-bottom:15px;
}

.footer-newsletter-panel h3{
  font-size:2rem;
  margin-bottom:15px;
}

.footer-newsletter-panel p{
  color:rgba(255,255,255,.65);
  line-height:1.8;
  margin-bottom:30px;
}

.newsletter-form-shell{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}

.newsletter-form-shell input{
  width:320px;
  max-width:100%;
  padding:15px 18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  outline:none;
}

.newsletter-btn{
  border:none;
  cursor:pointer;
  padding:15px 22px;
  font-weight:600;
  transition:.3s;
}

.subscribe-btn{
  background:var(--accent-orange);
  color:#fff;
}

.unsubscribe-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
}

.newsletter-status{
  margin-top:20px;
  min-height:24px;
  font-size:.9rem;
}