/* ==========================================================================
   GLOBAL BRAND VARIABLES & RESETS
   ========================================================================== */
:root {
  --black: #0a0a0a;
  --green: #1a4a2e;
  --green-light: #2d6e46;
  --green-accent: #3a8a58;
  --white: #f5f3ef;
  --grey: #888;
  --border: rgba(245,243,239,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}
======================================================
   GLOBAL NAVIGATION B
/* ====================AR LOGO SIZING
   ========================================================================== */

/* 1. The graphic emblem box */
.logo-mark {
  width: 48px;               /* 👈 Blows the graphic up from 37px */
  height: 72px;              /* 👈 Blows the graphic up from 55px */
  flex-shrink: 0;
}

/* 2. The text brand name ("BeUrOwn") sitting next to the graphic */
.nav-wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.45rem;        /* 👈 Scales the text up from 1.15rem */
  letter-spacing: 0.05em;
  color: var(--white);
  line-height: 1;
}
/* ==========================================================================
   PRODUCT GRID CONTAINER (3 COLUMNS - ALL CARDS ON ONE ROW)
   ========================================================================== */
.categories-grid, .product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 1.5rem;
  margin-top: 5rem;
  padding: 0 1rem;
}

/* ==========================================================================
   PRODUCT CARD (UNIFORM SIZING & BASE STATE)
   ========================================================================== */
.product-card,
.product-card:visited,
.product-card:active {
  color: #fff !important;
  text-decoration: none;
}

.product-card {
  background: #0a0a0a;
  min-height: 380px;                    /* Clean uniform fallback height */
  padding: 4rem 2rem 3rem 2rem;         
  display: flex;
  flex-direction: column;
  align-items: center;       
  justify-content: center;   
  text-align: center;        
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  /* Added border-color to transition so the glowing edge fades in smoothly */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Hidden brand-green backdrop tint layer that activates on hover */
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #1a4a2e; 
  opacity: 0;          
  transition: opacity 0.25s ease;
  z-index: 1;
  pointer-events: none;
}

/* ==========================================================================
   PRODUCT CARD - UNIFORM HOVER ACTIONS
   ========================================================================== */

/* 1. The Core Box Lift, Shadow, and Bright Green Edging */
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 196, 107, 0.15);
  border-color: rgba(0, 196, 107, 0.4) !important; /* Forces the border to go bright green */
}

/* 2. Seamlessly Triggers the Subtle Green Background Tint */
.product-card:hover::before {
  opacity: 0.08; /* Fades in the subtle green overlay sheet */
}

/* 3. Giant Script Font Background Letter Asset */
.product-card-icon {
  font-family: 'Great Vibes', cursive !important;
  font-size: 15rem !important;
  color: rgba(245, 243, 239, 0.02) !important; 
  line-height: 1;
  position: absolute !important;
  top: 45%;  
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  transition: color 0.25s ease;
}

/* Color adjustment for the watermark letter on hover */
.product-card:hover .product-card-icon {
  color: rgba(0, 196, 107, 0.04) !important;
}

/* Minimalist Green Top Corner Badge Style */
.product-card-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #00c46b;
  border: 1px solid rgba(0, 196, 107, 0.25);
  padding: 0.3rem 0.6rem;
  z-index: 2;
}

/* Elegant Script Core Headers */
.product-card-title {
  font-family: 'Great Vibes', cursive;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.1;
  color: #f5f3ef;
  margin: 0 0 1rem 0;
  display: block;
  width: 100%;
  z-index: 2;
  position: relative;
}

/* ── THE GREEN ANIMATION SCROLL UNDERLINE LINE ── */
.product-card-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%; /* Hidden by default */
  height: 2px;
  background: #00c46b;
  transition: width 0.25s ease;
}

/* Triggers the line to scroll open from center left on card hover */
.product-card:hover .product-card-title::after {
  width: 100%;
}

/* Centered Description Paragraph Copy Block Styles */
.product-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(245, 243, 239, 0.6);
  margin-bottom: 2rem;
  max-width: 85%; /* Airy line breaks */
  z-index: 2;
}

/* Centered Action Link Style */
.product-card-action {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, 0.4);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 2;
  transition: color 0.25s ease;
}

.product-card:hover .product-card-action {
  color: #00c46b;
}

/* Interactive Link Arrow Element Indicator */
.action-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.product-card:hover .action-arrow {
  transform: translateX(4px);
}

/* Responsive Rule: Drop down to single stack cards on mobile viewports */
@media (max-width: 768px) {
  .categories-grid, .product-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Fix for 2-column sub-pages to maintain the sleek homepage proportions */
.categories-grid.inner-grid, 
.product-grid.inner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Keeps them perfectly proportioned */
    justify-content: center; /* Centers the two blocks on the screen */
    gap: 30px; /* Matches your homepage spacing */
    max-width: 100%;
    margin-top: 5rem;        /* 👈 PRESERVES THE SPACE BELOW THE HEADER */
    margin-bottom: 5rem;     /* 👈 ADDS BREATHING ROOM ABOVE THE EMAIL FORM */
    margin-left: auto;       /* 👈 CENTERING HOOK */
    margin-right: auto;      /* 👈 CENTERING HOOK */
    padding: 40px 20px; /* Cleans up the left and right edge spacing */
}

/* Keeps it completely responsive on mobile */
@media (max-width: 768px) {
    .categories-grid.inner-grid, 
    .product-grid.inner-grid {
        grid-template-columns: 1fr;
        margin-top: 3rem;    /* 👈 slightly tighter spacing for mobile viewports */
        margin-bottom: 3rem;
        padding: 20px;
    }
}

/* ==========================================================================
   SUB-PAGE GRADIENT BACKGROUND (REPLACES THE FLAT GREY WRAPPER)
   ========================================================================== */
.categories-section {
    /* Smooth transition blending from #0a0a0a/dark green at the bottom to #1a4a2e at the top */
    background: linear-gradient(to top, #06120b 0%, #0a0a0a 40%, #1a4a2e 100%);
    padding: 60px 0; /* Ensures ample spacing around the grid */
    width: 100%;
}

/* Ensures the inner cards stand out crisply as solid black blocks against the gradient */
.categories-section .product-card {
    background: #0a0a0a !important;
}

/* Removes the side constraints on sub-pages so the background stretches completely */
.categories-section, 
.product-grid.inner-grid {
    width: 100% !important;
    max-width: 100% !important;
}

/* If the grey bars persist, it means a parent wrapper container has padding we need to negate */
main, .main-content, #wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   GLOBAL MARQUEE STRIP & POSITIONED HERO SCROLL INDICATOR
   ========================================================================== */

/* The master container framework housing both the bar and the indicator pointer */
.marquee-outer-container {
  position: relative;
  width: 100%;
}

/* The structural green band height layout */
.marquee-strip {
  background: var(--green); /* Uses your root brand green variable cleanly */
  padding: 0.85rem 0;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Flex layout tracking for the continuous seamless animation string */
.marquee-inner {
  display: inline-flex;
  white-space: nowrap;
  animation: marqueeGlobal 25s linear infinite; /* Set to 25s for an optimal, smooth pace */
}

/* Typography styles for the moving statement words */
.marquee-inner span {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0 1.5rem; /* Balanced spacing for clean text loops */
  color: var(--white); /* Uses root warm white */
}

/* Subtle opacity blending for the divider dots between words */
.marquee-inner .dot {
  color: var(--green-accent); /* Vibrant brand accent dot */
  font-weight: 700;
  padding: 0;
}

/* Anchors the scroll element precisely ABOVE the green marquee strip */
.hero-scroll-global {
  position: absolute;
  top: 0%; /* Anchors to the absolute top edge of the green bar */
  left: 50%;
  transform: translate(-50%, -110%); /* Pulls the entire element straight UP completely out of the bar */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  z-index: 99999 !important;
  pointer-events: none;
  text-align: center;
  width: 100px !important;
}

/* Text formatting for the word SCROLL */
.hero-scroll-global span {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  line-height: 1 !important;
  display: block !important;
}

/* The vertical wire element that executes the keyframe drawing cycle */
.hero-scroll-global-line {
  width: 1px !important;
  height: 18px !important;
  background-color: #ffffff !important;
  display: block !important;
  margin: 0 auto !important;
  transform-origin: top;
  animation: scrollLineGlobal 2s infinite !important;
}

/* ── ANIMATION KEYFRAMES ── */

/* Seamless 50% X-axis translate scroll track loop */
@keyframes marqueeGlobal {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Micro-interaction drawing loop: draws from top-down, changes anchor point, then collapses bottom-up */
@keyframes scrollLineGlobal {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}