@charset "UTF-8";
/* CSS Document */

/* ----------------------------------------------------------
   GLOBAL FLUIDITY AND BOX MODEL SAFETY (CRITICAL ADDITION)
---------------------------------------------------------- */

/* Ensures padding/borders are calculated *inside* the element's width,
   preventing them from causing overflow. */
*, ::before, ::after {
    box-sizing: border-box; 
}

/* Ensures images and media never exceed their container's width */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

html {
  font-size: 100%;
}

/* ----------------------------------------------------------
   BASE PAGE
---------------------------------------------------------- */

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #F8F0E6;   /* outer beige page */
  color: #231F20;
  /* Keeping overflow-y: auto; for vertical scroll */
  overflow-y: auto; 
}

/* ----------------------------------------------------------
   WHITE PAGE FRAME (GRID CONTEXT)
---------------------------------------------------------- */

.page-frame {
  margin: 1vw;                        
  background: #ffffff;
  border-radius: 24px;                 
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
  padding: 0; 
  box-sizing: border-box;
  min-height: calc(100vh - 2vw); 
  
  display: grid;
  /* Define layout areas */
  grid-template-areas:
    "overlap"
    "tagline"
    "about"; 
    
  /* Row 1 (Header/Video) is auto, Row 2 (Tagline) is auto, Row 3 (About) is auto */
  grid-template-rows: auto auto auto; 
  
  align-content: start; 
}

/* ----------------------------------------------------------
   HEADER / NAV (shared)
---------------------------------------------------------- */

.site-header {
  grid-area: overlap; 
  z-index: 3; /* Ensure it stays on top of the video */
  padding: 0; 
}

.site-header-inner {
  /* Padding: Top 24px, Sides 32px, Bottom 8px */
  padding: 24px 32px 8px 32px; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Left cluster: logo + nav */
.site-header-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Logo */
.site-logo-word {
  display: inline-block;
}

.site-logo-word img {
  display: block;
  width: 134px;
  height: auto;
}

/* Main nav */
.main-nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
  text-transform: lowercase;
  letter-spacing: 0.08em;
}

/* Default */
.nav-link {
  text-decoration: none;
  color: #E8D3B8; /* Light color for contrast over video */
  transition: color 0.2s ease;
}

/* Hover */
.nav-link:hover {
  color: #EE9893;
}

/* Active (set per page) */
.nav-link.is-active {
  color: #D6B182;
}

/* ----------------------------------------------------------
   CTA BUTTON
---------------------------------------------------------- */

.cta-button {
  padding: 8px 18px;
  border-radius: 4px;
  background: #EE9893;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

/* hover / focus: invert colors, grow slightly */
.cta-button:hover,
.cta-button:focus-visible {
  background: #F8F0E6;
  color: #EE9893;
  transform: scale(1.03);
}

/* tap feedback */
.cta-button:active {
  transform: scale(0.98);
}

/* ----------------------------------------------------------
   HOME HERO (index.html)
---------------------------------------------------------- */

.home-main {
  grid-area: overlap; 
  padding: 0;
  margin: 0;
}

/* Hero height adjusted for 4:3 aspect ratio */
.home-hero-video-shell {
  width: 100%; 
  margin: 0; 
  
  margin-top: 0; 
  margin-bottom: 0;
  
  /* CRITICAL: Aspect Ratio Fix (Padding Bottom Trick for 4:3). */
  height: 0;
  padding-bottom: 75%; /* 4:3 ratio (3/4 = 0.75) */
  
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative; 
  overflow: hidden; 
  
  /* Apply border-radius to the top corners */
  border-radius: 24px; /* Matches page-frame radius */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  
  z-index: 1; /* Below the header (z-index:3) */
}

/* --- VIDEO CONTAINER SIZING FIXES --- */

.home-hero-video {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; 
  overflow: hidden;
}

.home-hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}

/* --- END VIDEO CONTAINER FIXES --- */

/* ----------------------------------------------------------
   HOME TAGLINE (index.html)
---------------------------------------------------------- */

.home-tagline {
  grid-area: tagline;
  
  align-self: start; 
  
  /* Padding: Top 24px | Right 32px | Bottom 28px | Left 32px (Bottom adjusted for comp) */
  padding: 24px 32px 32px 32px; 
  margin: 0; 
  width: auto;
  text-align: left;

  font-size: 4vw; 
  line-height: 1.25;
  font-weight: 500;
  color: #D6B182;
}

/* ----------------------------------------------------------
   SOLUTIONS PAGE WRAPPER (02.html)
---------------------------------------------------------- */

.solutions-main {
  margin-top: 40px;
}

/* Header image "Projects, campaigns, and creative systems..." */
.solutions-header {
  text-align: center;
  margin: 40px 0 32px 0;
}

.solutions-header img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------
   BEIGE GRID CONTAINER (SOLUTIONS)
---------------------------------------------------------- */

.content-box {
  background-color: #F8F0E6;
  border-radius: 8px;
  padding: 3rem;
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  min-height: 300px;
}

/* ----------------------------------------------------------
   3 / 2 GRID (SOLUTIONS) - V6.0 STABLE FIX
---------------------------------------------------------- */

.grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.row-1,
.row-2,
.row-3 {
  display: flex;
  justify-content: space-between; 
  gap: 1.5rem; 
  /* CRITICAL FIX: Prevent the row itself from collapsing inside the .grid container */
  flex-shrink: 0; 
}

/* 1 item - Take full width minus any container padding */
.row-1 .thumb {
  flex: 1 1 100%; 
  max-width: 100%;
}

/* 2 items - CRITICAL FIX: Base width must be exactly 50% minus half the gap */
.row-2 .thumb {
  /* calc( (100% - 1.5rem_total_gap) / 2 ) = calc(50% - 0.75rem) */
  flex: 1 1 calc(50% - 0.75rem); 
  max-width: calc(50% - 0.75rem);
}

/* 3 items - CRITICAL FIX: Base width must be exactly 33.333% minus a portion of the gap */
.row-3 .thumb {
  /* calc( (100% - 3rem_total_gap) / 3 ) = calc(33.333% - 1rem) */
  flex: 1 1 calc(33.333% - 1rem); 
  max-width: calc(33.333% - 1rem);
}


/* ----------------------------------------------------------
   VIDEO MODAL (SOLUTIONS)
---------------------------------------------------------- */

.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20000;
}

.video-container {
  position: relative;
  max-width: 90%;
  max-height: 80%;
}

.video-container video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
}

.close-btn {
  position: absolute;
  top: -24px;
  right: -24px;
  background: #ffffff;
  border: none;
  font-size: 24px;
  line-height: 1;
  border-radius: 50%;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* ----------------------------------------------------------
   HOME ABOUT SECTION (COMP-ACCURATE STYLES)
---------------------------------------------------------- */

.home-about-section {
  grid-area: about;
  padding: 0px 32px 32px 32px; 
  background-color: #ffffff;
}

/* Vertical space between the blocks (How I Help, How I Work, Who I Am) */
.home-about-section .about-section-block {
  margin-top: 5px;
  margin-bottom: 70px; /*moves the textbox up and down */
}

/* Sub-headings for "How I Help" and "How I Work" */
.home-about-section .about-section-block h3 {
  font-size: 35px; 
  font-weight: 600; /* Medium weight */
  color: #D6B182; /* Tan accent color */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0;
  margin-bottom: 10px;
}

/* Body Paragraph Text (All content paragraphs) */
.home-about-section .about-section-block p,
.home-about-section .about-body p {
  font-size: 25px; 
  line-height: 1.25;
  font-weight: 500; /* Light weight for body text */
  color: #D6B182; /* Dark text for high readability */
  margin-top: 0;
  margin-bottom: 24px;
}

/* 'WHO I AM' Headline Styling (The big statement) */
.home-about-section .about-headline {
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 1.25;
  color: #D6B182; 
  margin-top: 60px;
  margin-bottom: 40px;
}

/* List for 'How I Work' container */
.how-i-work-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* List item text and indentation */
.how-i-work-list li {
  font-size: 25px;
  line-height: .85;
  font-weight: 500;
  color: #D6B182;
  padding-left: 20px; /* Space for the custom dash */
  position: relative;
  margin-bottom: 12px;
}

/* Custom bullet point (The dash) */
.how-i-work-list li::before {
  content: '•'; 
  position: absolute;
  left: 0;
  color: #D6B182;
  font-weight: 700;
}

/* Final CTA Link */
.home-about-section .about-cta-link {
  font-size: 26px; 
  font-weight: 500;
  color: #EE9893; /* Pink/red accent color */
  text-decoration: none;
  margin-top: 0px; 
  transition: color 0.2s ease;
}

.home-about-section .about-cta-link:hover {
  color: #EA6F70;
}

/* ----------------------------------------------------------
   REVEAL ANIMATION CLASSES (Slide Up Fade)
---------------------------------------------------------- */

/* Initial State: Start invisible and 50px below final position */
.animate-in {
  opacity: 0; 
  transform: translateY(50px); /* Start 50px below */
  /* Apply transition to both opacity and transform */
  transition: 
    opacity 0.3s ease-out, /* REDUCED DURATION FOR FASTER ANIMATION */
    transform 0.3s ease-out; /* REDUCED DURATION FOR FASTER ANIMATION */
}

/* Final State: Visible and in original position */
/* This class is added by JavaScript when the element is visible */
.animate-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   THUMBNAIL HOVER STATE (V3.1 - Coral 85% Rollover & Arrow)
---------------------------------------------------------- */

.thumb {
  position: relative; 
  overflow: hidden; 
  /* CRITICAL: Aspect Ratio Fix (using modern CSS property) */
  aspect-ratio: 1 / 1; 
  border-radius: 8px; 
  cursor: pointer;
  
  /* Ensure transitions for smooth hover */
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.thumb img {
  /* CRITICAL: Positions image to fill the Aspect Ratio container */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb:hover {
  /* Remove default scale/box-shadow on hover (superseded by overlay) */
  transform: none; 
  box-shadow: none; 
}

/* 1. The Full-Coverage Coral Overlay (Initially Hidden) */
.stats-overlay {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box; 
  
  border-radius: 8px; /* Should match the thumbnail border-radius */
  
  /* USER REQUEST: Coral color (#EE9893) at 85% opacity */
  background-color: rgba(238, 152, 147, 0.85); 
  
  opacity: 0; /* HIDES IT BY DEFAULT */
  transition: opacity 0.3s ease;
  z-index: 10;
  
  /* Promotes to GPU for stable rendering on hover */
  transform: translateZ(0); 
  
  /* Layout: Centers content vertically, aligns text to the left */
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: flex-end;
  padding: 15px; /* Inner padding */
  
}

/* 2. Category Header Styling (e.g., DTC - Clothing) */
.category-header {
  color: #FFFFFF; /* Pink accent color */
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 5px; /* Space below the header */
  text-transform: uppercase;
  /* Prevent header from colliding with the top-right arrow */
  max-width: calc(100% - 35px); 
}

/* 3. Bulleted Stats Styling */
.stats-content {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.6; /* Adds vertical space between the bullets */
  text-align: left;
  max-height: calc(100% - 33px); 
  overflow: hidden; 
}

/* Ensures the lines break and the text flows correctly */
.stats-content span {
    white-space: pre-line; /* Makes the <br> tags from JS work */
    display: inline-block;
}

/* 4. Reveal Overlay on Hover */
.thumb:hover .stats-overlay {
  opacity: 1; /* SHOWS the overlay on hover */
}

/* 5. USER REQUEST: Rollover Arrow Icon */
.arrow-icon {
  position: absolute;
  top: 15px;      /* 15px down from the top edge */
  right: 15px;    /* 15px left from the right edge */
  width: 20px;    /* Set the size of the icon container */
  height: 20px;
  opacity: 0;     /* Initially hide the arrow icon */
  transition: opacity 0.3s ease;
}

.arrow-icon img {
  display: block;
  width: 100%; 
  height: 100%;
  object-fit: contain; /* Ensures the image fits */
}

/* Reveal the arrow when the thumbnail is hovered */
.thumb:hover .arrow-icon {
  opacity: 1;
}

/* ----------------------------------------------------------
   @ MEDIA QUERIES (MOBILE) - APPLY FOR SCREENS <= 768PX
---------------------------------------------------------- */

@media (max-width: 768px) {
  
  /* 1. Page Frame Margin/Radius Fix (CRITICAL FOR OVERFLOW) */
  .page-frame {
    margin: 0; 
    border-radius: 0; 
    min-height: 100vh;
    /* CRITICAL: Explicitly set width to 100% of the viewport to prevent cut-off */
    width: 100vw; 
    /* CRITICAL: Hides any content that tries to push outside */
    overflow-x: hidden; 
  }
  
  /* 2. Site Header Container Adjustments (NO HAMBURGER MENU) */
  .site-header-inner {
    /* Reduce padding significantly for phone screens */
    padding: 16px 12px 8px 12px; 
    
    /* Ensure content stays on one line if possible, allowing wrap if needed */
    flex-wrap: wrap; 
    justify-content: space-between; 
    gap: 8px; 
  }
  
  /* 3. Left Cluster (Logo + Nav Links) Adjustments */
  .site-header-left {
    flex-direction: row;
    align-items: center;
    gap: 10px; 
  }

  /* Make logo smaller to save space */
  .site-logo-word img {
    width: 90px; 
  }

  /* 4. Main Nav (Solutions / About) Adjustments */
  .main-nav {
    flex-direction: row; 
    gap: 8px; 
    font-size: 12px; /* Smaller font for better fit */
  }

  /* Adjust default nav links color for contrast on the video background */
  .nav-link {
    color: #ffffff; 
  }
  
  /* 5. CTA Button Adjustments (Get in touch) */
  .cta-button {
    padding: 6px 12px;
    font-size: 12px;
    flex-shrink: 0;
  }
  
  /* 6. HOME PAGE CONTENT FIXES (Resolves Squishing/Font Size) */
  .home-tagline {
    /* Fixed font size to prevent the 4vw from growing too large */
    font-size: 28px; 
    line-height: 1.3;
    /* Reduce side padding for better use of screen space */
    padding: 24px 20px 32px 20px; 
  }
  
  .home-about-section {
    /* Reduce side padding for better use of screen space */
    padding: 0px 20px 32px 20px; 
  }
  
  /* Video Shell Adjustment (Recommended to reduce vertical size) */
  .home-hero-video-shell {
      /* Change the ratio from 4:3 (75%) to a shorter 16:9 (56.25%) */
      padding-bottom: 56.25%; 
  }

  /* 7. SOLUTIONS PAGE GRID FIXES (CRITICAL OVERRIDE) */
  
  /* Ensure the beige wrapper is behaving */
  .content-box {
      max-width: 100%;
      width: 100%;
      /* Reduce padding inside the beige box */
      padding: 1.5rem 12px; 
      box-sizing: border-box;
  }
  
  /* Force grid rows to stack */
  .row-1,
  .row-2,
  .row-3 {
    flex-direction: column; 
    gap: 1rem; 
    width: 100%;
  }

  /* CRITICAL: Make ALL thumbnail items take full width (100%) on mobile */
  .row-1 .thumb,
  .row-2 .thumb,
  .row-3 .thumb {
    /* Overrides the calc() desktop styles with high priority */
    flex: 1 1 100% !important; 
    max-width: 100% !important;
  }
}