@charset "UTF-8";
/*
 * File: settings/variables.css
 * Purpose: Contains all CSS Custom Properties (Variables)
 * This should be the first file imported.
 */
:root {
  /* COLORS */
  --bg: #fafafa;
  --text: #1a1a1a;
  --text-accent: #484760;
  --text-muted: #666666;
  --accent: #3b82f6;
  --accent-dark: #1d3f76;
  --accent-happy: #e2e9b3;
  --border: #9d9c9c;
  --border-dark: #565555;
  --border-accent: #6c89b9;
  /* TYPOGRAPHY */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: var(--font-body);
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-base-size: 17px;
  --line-height-body: 1.65;
  --line-height-heading: 1.2;
  /* LAYOUT & SPACING */
  --max-width: 1200px;
  --container-padding: clamp(1rem, 5vw, 2rem);
  --space-unit: 1rem;
  --gap-sm: var(--space-unit);
  --gap-md: calc(var(--space-unit) * 2);
  --gap-lg: calc(var(--space-unit) * 3);
  --gap-xl: calc(var(--space-unit) * 4);
  --gap-xxl: calc(var(--space-unit) * 5);
  /* COMPONENT-SPECIFIC */
  --sidebar-width: 280px;
  --spacing-for-sidebar: 1rem;
  --global-align-offset: 300px;
}

/* File: generic/_reset.css */
/* 1. Global Reset (A good start, but consider a library like Normalize.css later) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2. Global HTML Behavior */
html {
  scroll-behavior: smooth;
}

/* File: generic/_base.css */
/* 1. BODY GLOBAL STYLES */
body {
  font-family: var(--font-body);
  /* The original code had a radial gradient and hardcoded color that we should keep */
  background: radial-gradient(at top center, #fafafa 0%, #e4e3e3 100%);
  color: var(--text);
  line-height: var(--line-height-body);
  font-size: var(--text-base-size);
  font-weight: var(--font-weight-regular);
  /* Text Rendering & Antialiasing */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
  overflow-y: scroll;
}

/* 2. PARAGRAPH STYLES */
p {
  margin-bottom: 1.5rem;
  line-height: var(--line-height-body);
  max-width: 75ch; /* Good practice for readability */
}

/* 3. BASE IMAGE STYLES */
img {
  transition: transform 0.3s ease-in-out;
  transform-origin: center center;
}

/* Global hover effect for images (excludes the .image-wiggle component) */
img:hover:not(.image-wiggle) {
  transform: scale(1.12);
}

/* File: generic/_typography.css */
/* 1. HEADING RESETS */
h1, h2, h3, h4 {
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: var(--line-height-heading);
}

/* Global anti-aliasing for all main headings (was repeated in original file) */
h1, h2, h3, .case-study-title, .home-title {
  letter-spacing: -0.015em;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. HEADING SCALE */
/* H1 - Page title, refined size */
h1 {
  font-size: 2.5rem;
  font-weight: var(--font-weight-light);
  margin-top: 0;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* H2 - Section headers */
h2 {
  font-size: 1.75rem;
  font-weight: var(--font-weight-medium);
  margin-top: 4rem;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* Note: You had `!important` on `h2 .clientname`. I recommend checking if you can remove it. */
h2 .clientname {
  color: var(--accent) !important;
  font-weight: var(--font-weight-semibold);
}

/* H3 - Subsections */
h3 {
  font-size: 1.35rem;
  font-weight: var(--font-weight-regular);
  margin-top: 3rem;
  margin-bottom: 1rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* H4 - Small headers */
h4 {
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 3. SPECIAL TYPOGRAPHY CLASSES */
.case-study-title {
  font-size: 2.5rem;
  font-weight: var(--font-weight-light);
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.intro {
  font-size: 1.5rem;
  font-weight: var(--font-weight-light);
  color: var(--text-muted);
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  line-height: 1.4;
  max-width: 65ch;
  text-shadow: 1px 1px 0px #ffffff;
  padding-left: 1rem;
}

/* 4. RESPONSIVE TYPOGRAPHY (Keep with the base styles they modify) */
@media (max-width: 768px) {
  h1, .case-study-title {
    font-size: 2rem;
    margin-bottom: 1.25rem;
  }
  h2 {
    font-size: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 1.25rem;
  }
  h3 {
    font-size: 1.2rem;
    margin-top: 2.5rem;
    margin-bottom: 0.875rem;
  }
  .intro {
    font-size: 1.05rem;
    margin-bottom: 2rem;
  }
}
@media (max-width: 480px) {
  h1, .case-study-title {
    font-size: 1.75rem;
  }
  h2 {
    font-size: 1.35rem;
    margin-top: 2.5rem;
  }
  h3 {
    font-size: 1.1rem;
    margin-top: 2rem;
  }
}
/* File: generic/_base-links.css */
a {
  position: relative;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.5s;
}

/* Animated Underline Pseudo-element */
a::after {
  content: "";
  position: absolute;
  height: 1px;
  background-color: var(--accent);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  bottom: -5px;
  transition: width 0.3s ease-out;
}

a:hover {
  color: var(--accent-dark);
}

a:hover::after {
  width: 100%;
}

/*
 * File: layout/_layout-container.css
 * Purpose: Defines the main content wrapper (container) for the site.
 */
.container {
  margin: 0 auto;
  /* Uses the variable defined in _variables.css for max width */
  max-width: var(--max-width, 1200px);
  /* Uses the variable for left/right padding */
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  /* Resets default vertical padding for full-width components inside */
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * File: layout/_responsive-system.css
 * Purpose: Global responsive layout system and alignment
 * **FIX: All main wrappers (including nav) use max-width/auto margin and container padding.**
 */
/* === GLOBAL ALIGNMENT (The single source of truth for page width) === */
.container,
nav,
footer .footer-content,
.home-page,
.content-page,
.projects-index {
  /* Enforce the desired, wider max-width of 1400px for consistency */
  max-width: 1400px;
  margin: 0 auto;
  /* Use the global padding variable */
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* --- NAV SPECIFIC STYLES --- */
nav {
  padding-top: 2rem;
  padding-bottom: 0;
  margin-bottom: var(--gap-xl);
}

/* === NAV ALIGNMENT (FIXED) === */
nav {
  /* FIX: Nav must share the same max-width/centering as the main content */
  max-width: 1400px;
  margin: 0 auto;
  /* Nav content must align with the content padding */
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  padding-top: 2rem;
  padding-bottom: 0; /* Adjusted for better spacing */
  margin-bottom: var(--gap-xl);
}

nav .nav-links {
  display: flex;
  gap: 3rem;
  list-style: none;
  /* Ensures links are pushed to the left edge of the centered nav container */
  justify-content: flex-start;
  align-items: center;
}

/* === FOOTER ALIGNMENT === */
footer {
  padding: 3rem 0 2rem;
  margin-top: 4rem;
}

footer .footer-content {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 4rem;
  padding-right: 4rem;
}

footer nav {
  border: none;
  padding: 0;
  margin-bottom: 2rem;
}

footer .footer-nav {
  display: flex;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* === BREAKPOINT: 900px === */
@media (max-width: 900px) {
  /* ... (Rest of your 900px media queries) ... */
}
/* === BREAKPOINT: 600px === */
@media (max-width: 600px) {
  .container,
  footer .footer-content,
  .home-page,
  .about-page,
  .content-page,
  .projects-index {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
/*
 * File: components/_component-navigation.css
 * Purpose: Styles for the main <nav> element and its links.
 */
nav {
  position: relative;
  padding: 2rem 0;
  margin-bottom: var(--gap-xl);
}

/* Subtle separator line with a gradient mask */
nav::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--bg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 -1px 20px #FFF;
  /* Ensures the line fades out at the edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  z-index: 10;
}

nav .nav-links {
  display: flex;
  gap: var(--gap-lg);
  list-style: none;
  justify-content: flex-start;
  align-items: center;
}

/* Nav Link Text Base */
nav a {
  position: relative;
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Nav Link Hover Underline Effect */
nav a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background-color: var(--accent);
  transition: width 0.3s ease-out;
}

nav a:hover::after {
  width: 100%;
}

/* Active State */
nav a.active {
  border-bottom: none;
}

nav a.active::after {
  width: 100%;
  transform: translateX(-50%);
  background-color: var(--text);
}

/* SVG styles for the Home Link (if it's an icon) */
.nav-home svg {
  stroke: #333;
  transition: all 0.2s;
  display: block;
}

.nav-home a:hover svg {
  stroke: var(--accent);
}

.nav-home.active-home path {
  fill: currentColor;
}

/*
 * File: components/_nav-logo.css
 * Purpose: Navigation logo (GAGAN DIESH) specific styles
 */
.nav-logo .logo-text {
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  stroke: none !important;
  stroke-width: 0 !important;
}

.nav-logo .gagan {
  font-weight: 700;
  letter-spacing: -0.5px;
}

.nav-logo .diesh {
  font-weight: 900;
  letter-spacing: 1.5px;
}

/* Default (Non-Home Page): Black/Dark Gray */
.nav-logo .logo-text {
  color: #333333;
}

/* Home Page State: Lighter Gray */
body.home-page .nav-logo .logo-text {
  color: #a0a0a0;
}

/* Nav Home Link Overrides */
.nav-home a::after {
  display: none !important;
}

.nav-home a:hover::after {
  display: none !important;
}

.nav-home a:hover .nav-logo {
  transition: filter 0.7s ease-in-out;
  filter: drop-shadow(0 0 3px var(--accent-happy)) drop-shadow(0 0 10px var(--accent-happy));
}

/*
 * File: components/_component-tooltip.css
 * Purpose: Styles for the custom 'backstory' tooltip/trigger elements.
 */
/* === TRIGGER STYLES === */
.backstory-trigger {
  position: relative;
  cursor: help;
  text-decoration: none;
  border-bottom: 1.5px dotted #a0a0a0;
  padding: 0 2px;
  background-color: rgba(244, 229, 23, 0.15);
  border-radius: 3px;
  color: inherit;
  font-weight: 500;
  transition: all 0.2s ease;
}

.backstory-trigger::after {
  content: "+";
  margin-left: 1px;
  color: var(--accent);
  background-color: rgba(244, 229, 23, 0.4);
}

/* === TOOLTIP CONTENT (Mobile First) === */
.backstory-content {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: fixed; /* Fixed for mobile, will be absolute for desktop */
  top: calc(var(--trigger-top, 50%) + 30px);
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  background: radial-gradient(at bottom center, var(--bg) 0%, #f6f5f5 100%);
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  border-top: 1px solid #FFFFFF;
  color: var(--text);
  padding: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  z-index: 9999;
  white-space: normal;
  transition: opacity 0.3s ease, visibility 0.3s, transform 0.3s ease-out;
}

.backstory-trigger:hover .backstory-content,
.backstory-trigger:focus .backstory-content {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Mobile flipped position */
@media (max-width: 767px) {
  .backstory-content.flipped {
    top: calc(var(--trigger-top, 50%) - 10px);
  }
}
/* === DESKTOP STYLES (Absolute positioning) === */
@media (min-width: 768px) {
  .backstory-content {
    position: absolute;
    top: auto;
    left: 50%;
    bottom: calc(100% + 10px); /* Default: Tooltip above trigger */
    width: 320px;
    max-height: none;
    overflow-y: visible;
    transform: translateX(-50%) translateY(10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  .backstory-trigger:hover .backstory-content,
  .backstory-trigger:focus .backstory-content {
    transform: translateX(-50%) translateY(0);
  }
  /* Default Arrow (Pointing Down) */
  .backstory-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: #f6f5f5 transparent transparent transparent;
  }
  .backstory-content::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -9px;
    border-width: 9px;
    border-style: solid;
    border-color: transparent;
    z-index: -1;
  }
  /* Flipped State (Tooltip Below Trigger) */
  .backstory-content.flipped {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-10px);
  }
  .backstory-trigger:hover .backstory-content.flipped,
  .backstory-trigger:focus .backstory-content.flipped {
    transform: translateX(-50%) translateY(0);
  }
  /* Flipped Arrow (Pointing Up) */
  .backstory-content.flipped::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent var(--bg) transparent;
  }
  .backstory-content.flipped::before {
    top: auto;
    bottom: 100%;
    border-color: transparent;
  }
}
/*
 * File: components/_component-hr-anchor.css
 * Purpose: Styles for the elegant HR separator and the section anchor/padding offset.
 */
.elegant-hr {
  border: none;
  height: 0;
  margin: 3rem 0;
  width: 100%;
  /* Creates a subtle 3D-like line with a dark top and light bottom border */
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 1);
}

.section-anchor {
  /* Provides top padding to act as a target anchor for navigation */
  padding-top: var(--gap-md, 1rem);
}

/*
 * File: components/_component-image-wiggle.css
 * Purpose: Styles and animation for the .image-wiggle component.
 */
.image-wiggle {
  display: inline-block;
  /* Initial state must be clean */
  transform: scale(1);
}

.image-wiggle:hover {
  animation: wiggleEffect 0.6s ease;
}

@keyframes wiggleEffect {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.03) rotate(-1deg);
  }
  50% {
    transform: scale(1.03) rotate(1deg);
  }
  75% {
    transform: scale(1.03) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
/*
 * File: components/_component-cta-buttons.css
 * Purpose: Styles for the reusable button components (.btn-primary, .btn-secondary).
 * **FIX: Reduced box-shadow offset and forced vertical content centering.**
 */
/* Container for grouping/centering buttons (can be used on other pages) */
.home-cta {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin: 4rem 0 5rem;
  padding: 0 4rem;
}

.btn-primary,
.btn-secondary,
.password-gate button { /* Grouping button-like elements */
  padding: 1.25rem 2.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: none; /* Resetting potential button styles */
  cursor: pointer;
  line-height: 1; /* Helps with precise vertical centering */
}

/* --- PRIMARY BUTTON (Accent Color) --- */
.btn-primary, .password-gate button {
  background: #3b82f6;
  color: white;
  box-shadow: 3px 3px 0 var(--border-dark);
}

.btn-primary:hover, .password-gate button:hover {
  /* Adjust hover transform to match the new shadow offset (4px -> 3px) */
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--border-dark);
  color: #fff;
}

/* --- SECONDARY BUTTON (Outline/Ghost) --- */
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 3px 3px 0 var(--border-dark);
}

.btn-secondary:hover {
  /* Adjust hover transform to match the new shadow offset (4px -> 3px) */
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--border-dark);
  color: var(--accent);
}

/* Shadow Text Effect */
.btn-primary .shadow-text,
.btn-secondary .shadow-text {
  /* Text styles remain unchanged */
}

/*
 * File: components/_component-case-study-meta.css
 * Purpose: Consolidated Styles for the case study metadata list.
 */
/* === GLOBAL META CONTAINER (.case-study-meta) === */
.case-study-meta {
  margin-bottom: 2rem;
  font-size: 0.9rem;
  margin-top: 0;
}

/* === META ITEM (CLIENT, YEAR, ROLE BLOCK) - MOBILE STACKED === */
.case-study-meta-item {
  display: flex;
  flex-direction: column;
  /* FIX: Small vertical margin for separation between items on mobile */
  margin-bottom: 1rem;
  padding: 0;
  /* Dotted line on mobile only */
  border-bottom: 1px dotted var(--border);
}

.case-study-meta-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* === META LABEL (CLIENT, YEAR, ROLE) === */
.case-study-meta-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: #999;
  /* FIX: Space below the label to separate it from the value (increased for mobile) */
  margin-bottom: 0.4rem;
  flex-shrink: 0;
  padding-right: 1rem;
  font-weight: var(--font-weight-regular);
}

/* === META VALUE (Thinkific, 2019-2021, etc.) === */
.case-study-meta-value {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  /* FIX: Ensure content aligns to the start */
  align-self: flex-start;
}

/* --- META VALUE NESTED ELEMENTS (Bullets/P tags) --- */
.case-study-meta-value .client-meta-intro {
  /* Reset margins */
  margin-top: 0;
  margin-bottom: 0;
  color: inherit;
}

.case-study-meta-value .role-list-group {
  /* Reintroducing list style and resetting margins */
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.case-study-meta-value .role-list-group li {
  position: relative;
  margin-bottom: 0.35rem;
  line-height: 1.4;
  padding-left: 1rem;
  color: inherit;
}

.case-study-meta-value .role-list-group li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
}

.case-study-meta-value .role-list-group li:last-child {
  margin-bottom: 0;
}

/* --- DESKTOP STYLES (1024px+) --- */
@media (min-width: 1024px) {
  /* Primary container for the row */
  .case-study-meta {
    display: flex;
    gap: 3rem;
    margin-bottom: 0;
    /* FIX: Align all columns to the top of the row for perfect alignment */
    align-items: flex-start;
  }
  /* Reset stacking behavior and margin for desktop */
  .case-study-meta-item {
    flex-direction: column;
    margin-bottom: 0;
    /* Remove dotted border on desktop for consistency with mobile-only comment */
    border-bottom: none;
    /* Ensure the individual items stretch vertically if needed, but flex-start in main container takes priority */
    align-items: flex-start;
  }
}
/*
 * File: components/_home-page-components.css
 * Purpose: All home page specific components and layouts
 * **FINAL FIX: ALIGNMENT VIA SINGLE CONTAINER PADDING**
 */
/* ======================================================= */
/* === HOME PAGE CONTAINER & HERO (Layout Alignment) === */
/* ======================================================= */
/* The .home-page container now handles max-width and all horizontal padding globally. */
.home-page {
  padding: 0;
  margin: 0 auto;
}

/* FIX: Remove redundant horizontal padding from inner components */
.home-hero,
.home-about,
.home-case-studies-intro {
  padding-left: 0;
  padding-right: 0;
}

.home-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 6rem;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}

/* Hero Content Styles */
.home-title {
  font-size: 5rem;
  font-weight: 300;
  margin: 0 0 1rem 0;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}

.home-subtitle {
  font-size: 1.5rem;
  color: #666;
  margin: 0 0 2rem 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.home-intro {
  font-size: 1.5rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
  font-weight: 300;
}

.home-image img {
  width: 100%;
  max-width: 550px;
  height: auto;
  border-radius: 4px;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.15), -10px -10px 40px rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: grayscale(20%);
}

.home-image img:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 15px 15px 40px var(--accent-happy), -15px -15px 50px rgba(255, 255, 255, 0.9);
  filter: grayscale(0%);
}

/* ======================================================= */
/* === CASE STUDIES GRID & CARD STYLES (MOBILE-FIRST) ==== */
/* ======================================================= */
/* GRID: Now relies solely on .home-page for padding */
.home-case-studies-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0 0 0;
  /* FIX: Remove redundant padding - It is handled by .home-page */
  padding-left: 0;
  padding-right: 0;
}

/* --- CARD: MOBILE DEFAULT (Horizontal Layout: Icon | Text) --- */
.case-study-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
  background: white;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  height: 100%;
}

/* --- ICON CONTAINER & SVG SIZING --- */
.case-study-icon-svg {
  flex-shrink: 0;
  color: var(--accent);
  transition: all 0.3s;
  transform: none;
}

/* FIX: Force the size and centering on the SVG element itself */
.case-study-card > .case-study-icon-svg > svg {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: block;
  margin: 0 auto;
}

/* ======================================================= */
/* === RESPONSIVE OVERRIDES === */
/* ======================================================= */
/* MOBILE HERO (max-width: 900px) */
@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
/* TABLET/MID-SCREEN OVERRIDE (min-width: 601px) */
@media (min-width: 601px) {
  .home-case-studies-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
/* DESKTOP OVERRIDE (min-width: 901px) */
@media (min-width: 901px) {
  .home-case-studies-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  /* CARD: Switch to STACKED (Vertical Layout: Icon above Text) */
  .case-study-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    gap: 1rem;
  }
  /* HOVER: Enable vertical lift for desktop */
  .case-study-card:hover,
  .case-study-card:focus {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--accent-happy);
  }
  /* ICON SIZING: Desktop size (40px) */
  .case-study-card > .case-study-icon-svg > svg {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}
/* ======================================================= */
/* === ICON ANIMATIONS === */
/* ======================================================= */
.case-study-card:nth-child(1):hover .case-study-icon-svg svg,
.case-study-card:nth-child(1):focus .case-study-icon-svg svg {
  animation: cartPush 0.8s ease-in-out;
}

.case-study-card:nth-child(2):hover .case-study-icon-svg svg,
.case-study-card:nth-child(2):focus .case-study-icon-svg svg {
  animation: rotateGear 0.8s ease-in-out;
}

.case-study-card:nth-child(3):hover .case-study-icon-svg svg,
.case-study-card:nth-child(3):focus .case-study-icon-svg svg {
  animation: lightningStrike 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.case-study-card:nth-child(4):hover .case-study-icon-svg svg,
.case-study-card:nth-child(4):focus .case-study-icon-svg svg {
  animation: wrenchTwist 0.5s ease-in-out;
}

.case-study-card:nth-child(5):hover .case-study-icon-svg svg,
.case-study-card:nth-child(5):focus .case-study-icon-svg svg {
  animation: penWrite 0.8s ease-in-out;
}

.case-study-card:nth-child(6):hover .case-study-icon-svg svg,
.case-study-card:nth-child(6):focus .case-study-icon-svg svg {
  animation: heartPulse 0.6s ease-in-out;
}

/*
 * File: components/_about-page-components.css
 * Purpose: About page specific components
 * **FINAL FIX: Removed max-width and internal padding conflicts.**
 */
.about-page {
  margin: 0 auto;
  padding: 0;
}

.about-page .image-text-row {
  align-items: center;
}

.about-page .home-title {
  font-size: 3.5rem;
  font-weight: 300;
  margin: 0 0 1.5rem 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.about-page .greeting-highlight {
  color: #888;
  font-weight: 300;
  position: relative;
  display: inline-block;
  animation: wave 2.5s ease-in-out 2;
}

.about-page .home-subtitle {
  font-size: 1.65rem;
  color: var(--text-muted);
  margin: 0;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0;
}

.about-page .about-hero-image {
  display: inline-block;
  justify-content: center;
  align-items: center;
}

.about-page .about-hero-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.about-page h2 {
  font-size: 2rem;
  font-weight: 400;
  margin: 3rem 0 1.5rem;
  letter-spacing: 0.01em;
  color: var(--text);
  padding: 0;
}

.about-page p {
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-size: 1.15rem;
  color: #333;
  /* CRITICAL FIX: Remove redundant 4rem horizontal padding */
  padding: 0;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
  .about-page .image-text-row {
    margin: 0 0 2rem 0; /* Changed from 5rem to 2rem */
    padding: 4rem 0;
    align-items: center;
  }
  .about-page .home-title {
    font-size: 2.5rem;
  }
  .about-page .about-hero-image {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
  .about-page h2 {
    padding: 0;
  }
  .about-page p {
    padding: 0;
  }
  .about-page .about-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
  .about-page .about-hero-image {
    max-width: 75%; /* Now the container is 80% of the column width */
    margin: 0 auto; /* This centers the 80% wide container */
  }
  .about-page .about-hero-image img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}
/*
 * File: components/_case-study-components.css
 * Purpose: Case study page components
 */
/* === CASE STUDY CONTAINER === */
.case-study {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

/* === SIDEBAR === */
.case-study-sidebar {
  position: fixed;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  display: none;
  z-index: 9999;
  transition: all 0.3s ease-out;
}

.case-study-sidebar h2 {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 0;
}

.case-study-sidebar-list {
  list-style: none;
  padding-top: var(--gap-sm);
}

.case-study-sidebar-link {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-decoration: none;
  color: #666;
  font-size: 0.85rem;
  transition: all 0.2s;
  padding: 0.5rem 0;
  border-left: 3px solid transparent;
}

.case-study-sidebar-number {
  width: 28px;
  height: 28px;
  border: 1px solid #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s;
  flex-shrink: 0;
  border-radius: 4px;
  font-weight: var(--font-weight-bold, 700);
  color: #333;
}

.case-study-sidebar-list .case-study-sidebar-link:not(.active):hover {
  color: var(--accent);
  border-left-color: transparent;
  text-decoration: none;
}

.case-study-sidebar-list .case-study-sidebar-link:not(.active):hover .case-study-sidebar-number {
  border-color: var(--accent);
  background-color: transparent;
  color: var(--accent);
  box-shadow: 0 10px 30px var(--accent-happy, 0.8);
}

.case-study-sidebar-list .case-study-sidebar-link::after,
.case-study-sidebar-list .case-study-sidebar-link:hover::after {
  content: none !important;
}

.case-study-sidebar-link.active {
  color: var(--text);
  border-left-color: var(--accent);
  font-weight: var(--font-weight-medium, 500);
  background-color: rgba(108, 137, 185, 0.04);
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}

.case-study-sidebar-link.active .case-study-sidebar-number {
  border-color: var(--accent);
  background-color: var(--accent);
  color: white;
}

/* === SIDEBAR TOGGLE === */
.sidebar-toggle {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #2a2a2a;
  color: white;
  border: none;
  width: 44px;
  height: 120px;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.sidebar-toggle:hover {
  width: 48px;
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.25);
}

.case-study-sidebar.mobile-open {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  display: block !important;
  border-left: none;
  left: 0;
  background: white;
  padding: 2rem;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
  max-width: 320px;
  width: 100%;
}

/* === MOBILE NAV (FIXED & ANIMATED) === */
.case-study-mobile-nav {
  /* Layout and Scrolling */
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: scroll !important;
  /* Vertical spacing */
  margin-top: var(--gap-md);
  margin-bottom: var(--gap-lg);
  /* Hiding scrollbar on compliant browsers */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Use a helper class to control animation opacity */
  opacity: 1;
  animation: none;
  /* Creates a 20px fade on both the left and right edges */
  mask-image: linear-gradient(to right, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
  /* Ensures the mask works correctly with different rendering engines */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
}

/* Helper class for animation */
.case-study-mobile-nav.animate-on-load {
  opacity: 1; /* Ensure it is visible immediately */
  transform: none; /* Ensure no CSS transform interferes */
}

.case-study-mobile-nav::-webkit-scrollbar {
  display: none;
}

.case-study-mobile-nav-item {
  flex-shrink: 0 !important;
  /* Button look with border and subtle shadow */
  padding: 0.75rem 1rem !important;
  margin-right: 0.5rem !important;
  height: 40px;
  border: 1px solid var(--border);
  background-color: var(--bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  color: var(--text-accent);
  cursor: pointer;
  /* Internal alignment */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  transition: all 0.2s;
  /* UNDO: Remove the negative margin trick */
  margin-left: 0 !important;
  padding-left: 1rem !important;
}

.case-study-mobile-nav-item:first-child {
  margin-left: var(--container-padding);
}

.case-study-mobile-nav-item:last-child {
  margin-right: var(--container-padding);
}

.case-study-mobile-nav-item.active {
  /* Active State Visuals */
  background-color: none;
  border-color: var(--accent);
  color: var(--accent);
  border: 1px solid var(--border);
}

/* === HEADER === */
.case-study-header {
  margin-bottom: var(--gap-xl);
  padding-bottom: 0;
  border-bottom: none;
}

.case-study-subtitle {
  font-size: 1.2rem;
  color: #666;
  font-weight: 300;
  margin-bottom: 1.5rem;
}

.client-links-group {
  text-transform: uppercase;
}

/* === CONTENT === */
.case-study-content h2 {
  font-size: 1.8rem;
  font-weight: 400;
  margin: var(--gap-lg) 0 1.5rem;
  letter-spacing: 0.01em;
}

.case-study-content p {
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.case-study-content ul,
.case-study-content ol {
  margin: 2rem 0;
  padding-left: 2rem;
  line-height: 1.8;
}

.case-study-content ul li,
.case-study-content ol li {
  margin-bottom: 1.5rem;
  padding-left: 0.5rem;
}

.case-study-content ol {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}

.case-study-content ol li {
  counter-increment: item;
  position: relative;
  padding-left: 3rem;
}

.case-study-content ol li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: #2a2a2a;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 500;
}

.case-study-content ul li {
  padding-left: 1rem;
}

.case-study-content ul li::marker {
  color: #2a2a2a;
}

.case-study-content li strong {
  color: var(--text);
  font-weight: 600;
}

.key-clients-list {
  list-style: none;
  padding-left: 0;
  font-size: 1.1em;
}

.key-clients-list li::before {
  content: "—";
  color: var(--accent);
  font-weight: bold;
  position: absolute;
  left: 0;
  line-height: 1.5;
}

/* === WHY WIDGET === */
.case-study-why {
  display: flex;
  gap: var(--gap-md);
  align-items: flex-start;
  background: radial-gradient(at bottom center, #fafafa 0%, #f6f5f5 100%);
  border-radius: 10px;
  padding: 1.5rem;
  margin: var(--gap-xl) 0;
  max-width: 800px;
  position: relative;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.08);
  border-top: 1px solid #FFFFFF;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease-out, border-color 0.3s ease-out;
  transform-origin: center center;
}

.case-study-why.animate-in {
  animation: fadeInSlideUp 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.4s forwards;
  opacity: 0;
}

.case-study-why:hover {
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-bottom-color: var(--accent-happy);
  border-right-color: var(--accent-happy);
  border-top-color: var(--accent-happy);
  border-left-color: var(--accent-happy);
}

.case-study-why:hover .case-study-why-icon {
  animation: iconPulseOnHover 0.4s ease-in-out 0s 3;
}

.case-study-why-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin-top: 5px;
  animation: iconPulse 0.4s ease-in-out 2s 3;
}

.case-study-why-content {
  line-height: 1.6;
}

.case-study-why-content h4 {
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.case-study-why-content p {
  font-size: 1.15rem;
  font-weight: var(--font-weight-light);
  color: var(--text-accent);
  margin-bottom: 0;
  max-width: 70ch;
}

/* === PREV/NEXT NAV === */
.case-study-nav {
  display: flex;
  justify-content: space-between;
  padding: 3rem 0;
  margin-top: 4rem;
  border: none;
  max-width: 1100px;
}

.case-study-nav a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.case-study-nav a:hover {
  background: var(--accent);
  color: white;
  border-color: var(--border-dark);
  transform: translate(0px, 4px);
  box-shadow: 4px 4px 0 var(--border-dark);
}

.case-study-nav .disabled {
  opacity: 0.3;
  pointer-events: none;
}

@media (min-width: 1400px) {
  .case-study-sidebar {
    display: none;
  }
  .sidebar-toggle {
    display: block;
  }
  .case-study {
    margin-left: 0;
    margin-right: auto;
    max-width: var(--max-width);
  }
  .case-study-mobile-nav {
    display: none !important;
  }
}
@media (min-width: 1940px) {
  .case-study-sidebar {
    display: block;
  }
  .sidebar-toggle {
    display: none;
  }
}
/*
 * File: components/_project-index.css
 * Purpose: Case studies index/grid page
 */
.projects-index {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
}

.project-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.project-index-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  background: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  align-items: start;
}

.project-index-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #2a2a2a;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.project-link:hover .project-index-item::before {
  width: 4px;
}

.project-link:hover .project-index-item {
  transform: translateX(4px);
  border-color: #2a2a2a;
  box-shadow: 0 8px 20px var(--accent-happy);
  text-decoration: none;
}

.project-link::after,
.project-link:hover::after {
  content: none;
}

.project-index-number {
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-accent);
  line-height: var(--line-height-heading);
  padding-top: 0.1rem;
  position: relative;
  z-index: 1;
}

.project-index-content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.project-index-item .project-index-content h2.project-index-title {
  margin-top: 0;
  margin-bottom: 0.25rem;
  font-size: 1.3rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.3;
}

.project-index-meta {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.project-index-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #444;
  margin: 0;
}

@media (max-width: 600px) {
  .project-index-item {
    grid-template-columns: 30px 1fr;
  }
  .project-index-number {
    font-size: 1.1rem;
  }
  .project-index-desc {
    font-size: 0.85rem;
  }
  .project-index-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
/*
 * File: components/_images-and-media.css
 * Purpose: All image layout components and media styles
 * OPTIMIZED: Caption width now matches image width exactly
 */
/* === SINGLE IMAGE WITH CAPTION === */
.image-wrapper {
  margin: var(--gap-lg) auto;
  max-width: 100%;
  display: table;
}

.image-wrapper img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

.image-wrapper .image-caption {
  display: table-caption;
  caption-side: bottom;
  font-size: 0.95rem;
  color: #666;
  font-style: italic;
  text-align: left;
  margin-top: 1rem;
  padding: 0;
}

/* === BIG IMAGE === */
.big-image {
  margin: var(--gap-lg) 0;
  text-align: center;
}

.big-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  border-radius: 8px;
  display: inline-block;
}

/* === FLOATING IMAGE === */
.floating-image {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0 auto;
}

.floating-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 40px 40px -5px rgba(0, 0, 0, 0.2);
  display: block;
}

.floating-image .image-caption {
  text-align: left;
  font-size: 0.95rem;
  color: #666;
  font-style: italic;
  margin-top: 1rem;
  padding: 0;
  min-width: 100%;
  max-width: 400px;
}

.floating-image svg {
  filter: drop-shadow(4px 4px 6px rgba(98, 98, 98, 0.4));
}

/* === LAPTOP FRAME === */
.floating-image.laptop-frame {
  position: relative;
  z-index: 2;
  overflow: visible;
  box-shadow: none;
  margin-bottom: 5rem;
}

.floating-image.laptop-frame img {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease-in-out;
  border: 5px solid #f1f0f0;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: none;
}

.floating-image.laptop-frame:hover img {
  transform: scale(1.025);
}

.floating-image.laptop-frame::after {
  content: "";
  position: absolute;
  bottom: -20px;
  width: 105%;
  height: 15px;
  background: #fefefe;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 5px 15px rgba(136, 136, 136, 0.4);
  z-index: 0;
}

.floating-image.laptop-frame .image-caption {
  margin-top: 20px;
}

/* === HERO TEAM IMAGE === */
.hero-team-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* === IMAGE + TEXT ROW === */
.image-text-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "image" "text";
  gap: var(--gap-md);
  align-items: start;
  margin: var(--gap-lg) auto;
  padding: 0;
  max-width: 100%;
}

.image-text-row .text-content {
  grid-area: text;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-sm);
}

.image-text-row .text-content p {
  margin-bottom: 1.5rem;
  word-break: break-word;
}

.image-text-row > img,
.image-text-row .floating-image,
.image-text-row .image-wrapper {
  grid-area: image;
  justify-self: center;
  margin: 0;
}

.image-text-row img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  display: block;
}

@media (min-width: 900px) {
  .image-text-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text image";
    gap: var(--gap-lg);
    align-items: center;
  }
  .image-text-row.reverse {
    grid-template-areas: "image text";
  }
  .image-text-row img,
  .image-text-row .floating-image img,
  .image-text-row .image-wrapper img {
    max-height: 600px;
  }
}
/* === CARD IMAGES === */
.card-image img {
  width: auto;
  max-width: 320px;
  height: auto;
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-flow {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  margin: var(--gap-lg) 0;
  flex-wrap: nowrap;
}

/* === PHONE MOCKUP === */
.phone-mockup {
  display: inline-block;
  background: #1a1a1a;
  border-radius: 22px;
  padding: 3px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  position: relative;
  min-width: 200px;
  max-width: 300px;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  backface-visibility: hidden;
}

.phone-mockup:hover {
  transform: scale(1.04) translateZ(0);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}

.phone-mockup img {
  border-radius: 20px;
  display: block;
  width: 100%;
  height: auto;
}

.phone-flow {
  display: flex;
  gap: var(--gap-md);
  justify-content: center;
  align-items: flex-start;
  margin: var(--gap-lg) auto;
}

/* === RESPONSIVE === */
@media (max-width: 1400px) {
  .floating-image img {
    max-height: 550px;
  }
  .image-text-row {
    min-height: 550px;
    align-items: flex-start;
  }
}
@media (max-width: 1200px) {
  .card-flow {
    flex-wrap: wrap;
  }
}
@media (max-width: 1024px) {
  .floating-image img {
    max-height: 500px;
  }
  .card-flow {
    flex-wrap: wrap;
    gap: 1.5rem;
  }
}
@media (max-width: 900px) {
  .floating-image,
  .floating-image *,
  .image-text-row,
  .image-text-row *,
  .about-hero-image {
    background: transparent !important;
    padding: 0 !important;
  }
  .image-text-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }
  .image-text-row > img,
  .image-text-row .floating-image,
  .image-text-row .image-wrapper {
    width: 100%;
    margin: 0 auto;
  }
  .floating-image {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
  .floating-image .image-caption {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-align: left;
  }
  .floating-image img {
    margin: 0 auto;
  }
  .image-wrapper img,
  .big-image img,
  .floating-image img,
  .image-text-row img {
    max-height: 500px;
  }
  .floating-image img {
    max-height: 450px;
  }
  .phone-flow {
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  .image-wrapper img,
  .big-image img,
  .floating-image img,
  .image-text-row img {
    max-height: 400px;
  }
  .floating-image img {
    max-height: 350px;
  }
}
/*
 * File: components/_additional-components.css
 * Purpose: Carousel, metrics widget, password gate, tables
 */
/* === IMAGE CAROUSEL === */
.image-carousel {
  position: relative;
  width: 100%;
  margin: 4rem 0;
  overflow: hidden;
  padding: 1.5rem 0;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  align-items: center;
  gap: 2rem;
  padding: 2rem 0;
}

.carousel-slide {
  min-width: 70%;
  max-width: 70%;
  flex-shrink: 0;
  transition: all 0.5s ease;
  opacity: 0.4;
  transform: scale(0.85);
  position: relative;
  cursor: pointer;
}

.carousel-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
  cursor: default;
}

.carousel-slide img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  display: block;
  margin: 0 auto;
}

.carousel-caption {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: #666;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.3s;
}

.carousel-slide.active .carousel-caption {
  opacity: 1;
}

.carousel-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

.carousel-btn {
  background: var(--accent);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.carousel-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carousel-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s;
}

.carousel-dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: 5px;
}

@media (max-width: 900px) {
  .carousel-slide {
    min-width: 85%;
    max-width: 85%;
  }
  .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  .carousel-slide img {
    max-height: 400px;
  }
}
@media (max-width: 1024px) {
  .carousel-slide img {
    max-height: 500px;
  }
}
@media (max-width: 600px) {
  .carousel-slide img {
    max-height: 300px;
  }
}
/* === METRICS WIDGET === */
.metrics-widget {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--gap-md);
  margin: var(--gap-xl) 0;
  padding: var(--gap-md) 0;
}

.metric-item {
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  min-width: 180px;
  max-width: 220px;
  flex: 0 1 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  cursor: pointer;
}

.metric-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--accent-happy);
  border-radius: 0 0 3px 3px;
}

.metric-item:nth-child(1) {
  transform: translateY(-20px);
}

.metric-item:nth-child(2) {
  transform: translateY(10px);
}

.metric-item:nth-child(3) {
  transform: translateY(-10px);
}

.metric-item:nth-child(4) {
  transform: translateY(15px);
}

.metric-item:nth-child(5) {
  transform: translateY(-5px);
}

.metric-item:hover {
  animation: jumpShake 0.6s ease;
  box-shadow: 0 12px 32px var(--accent-happy);
  border-color: var(--accent);
}

.metric-value {
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--accent);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.metric-label {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555;
}

@media (max-width: 900px) {
  .metrics-widget {
    gap: 1.5rem;
  }
  .metric-item {
    min-width: 160px;
    max-width: 200px;
    padding: 1.5rem 1rem;
  }
  .metric-item:nth-child(1),
  .metric-item:nth-child(2),
  .metric-item:nth-child(3),
  .metric-item:nth-child(4),
  .metric-item:nth-child(5) {
    transform: translateY(0);
  }
  .metric-value {
    font-size: 2.75rem;
  }
}
@media (max-width: 600px) {
  .metrics-widget {
    flex-direction: column;
    align-items: center;
  }
  .metric-item {
    width: 100%;
    max-width: 280px;
  }
}
/* === PASSWORD GATE === */
.password-gate {
  max-width: 400px;
  margin: 8rem auto;
  text-align: center;
}

.password-gate h2 {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}

.password-gate input {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  background: white;
  font-size: 1rem;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}

.password-gate input:focus {
  outline: none;
  border-color: var(--accent);
}

.password-gate .error {
  color: #c83232;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.case-studies-list {
  display: none;
}

.case-studies-list.unlocked {
  display: block;
}

/* === PROBLEM/SOLUTION TABLE === */
.problem-solution-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--gap-lg) 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.problem-solution-table thead th {
  background-color: var(--bg);
  font-weight: var(--font-weight-bold);
  text-align: left;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: var(--text);
}

.problem-solution-table tbody td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.problem-solution-table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

.problem-solution-table tbody tr:last-child td {
  border-bottom: none;
}

.problem-solution-table tbody tr td:first-child {
  font-weight: var(--font-weight-bold);
  width: 30%;
}

.problem-solution-table strong {
  font-weight: var(--font-weight-bold);
}

@media (max-width: 600px) {
  .problem-solution-table {
    display: block;
    border: none;
  }
  .problem-solution-table thead {
    display: none;
  }
  .problem-solution-table tbody,
  .problem-solution-table tr,
  .problem-solution-table td {
    display: block;
    width: 100%;
  }
  .problem-solution-table tr {
    margin-bottom: var(--gap-sm);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
  }
  .problem-solution-table tbody td {
    border-bottom: 1px dashed var(--border);
    padding-bottom: 0.5rem;
  }
  .problem-solution-table tbody tr td:first-child {
    font-size: 1rem;
    padding-bottom: 0.5rem;
    color: #333333;
    background-color: rgba(0, 0, 0, 0.05);
    border-bottom: 2px solid var(--border);
    width: auto;
  }
  .problem-solution-table tbody tr td:last-child {
    border-bottom: none;
  }
}
/*
 * File: components/_footer.css
 * Purpose: Footer component styles
 */
footer nav::before {
  content: none !important;
}

footer {
  padding-top: var(--gap-xxl);
  padding-bottom: var(--gap-lg);
  color: var(--text-secondary);
  font-size: 0.95em;
  line-height: 1.5;
  text-align: left;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

footer p {
  line-height: 0.75rem;
}

footer .copyright {
  padding-bottom: 2rem;
}

.footer-email {
  margin-top: var(--gap-md);
}

.footer-back-to-top,
.footer-nav,
.footer-contact,
.footer-location,
.footer-legal {
  margin-bottom: var(--gap-sm);
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.footer-legal {
  margin-bottom: 0;
}

site-footer,
footer {
  border: none;
}

.footer-nav,
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-sm);
  border: none;
  padding: 0;
}

.footer-nav a,
.footer-contact a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}

.footer-nav a:hover {
  opacity: 0.6;
}

.footer-back-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s;
  border-radius: 4px;
  padding-bottom: 1.5rem;
}

.footer-back-to-top a:hover {
  border: 1px solid var(--border);
  border-color: var(--text);
  transform: translateY(-2px);
  padding: 0.75rem 1.5rem;
  box-shadow: 0 12px 32px var(--accent-happy);
}

.footer-back-to-top svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  transition: transform 0.2s;
}

.footer-back-to-top a:hover svg {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--accent-happy);
}

.footer-contact {
  margin-top: 0;
}

.footer-contact a {
  color: var(--text);
  text-decoration: none;
  font-weight: var(--font-weight-medium, 500);
}

.footer-email {
  color: #3b82f6;
  text-decoration: none;
  font-size: 1rem;
  transition: opacity 0.2s;
}

.footer-email:hover {
  opacity: 0.7;
}

.footer-legal {
  color: #999;
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 800px;
}

.footer-legal p {
  margin: 0.5rem 0;
}

/*
 * File: pages/_page-home.css
 * Purpose: Styles unique to the home page template.
 */
.home-page .container {
  /* Override the default container padding for the home page banner */
  padding: 0;
}

/* Home Page Header/Hero Banner */
.home-page-header {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin-bottom: 4rem;
}

.home-title {
  /* Uses the generic H1 styles but adds a specific margin */
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 3.5rem;
}

.home-subtitle {
  font-size: 1.25rem;
  color: var(--text-muted);
  max-width: 800px;
  margin-bottom: 2rem;
  font-weight: var(--font-weight-regular);
}

/* Responsive Overrides */
@media (max-width: 768px) {
  .home-title {
    font-size: 2.5rem;
  }
  .home-subtitle {
    font-size: 1.1rem;
  }
  .home-page-header {
    margin-bottom: 3rem;
  }
}
/*
 * File: pages/_page-about.css
 * Purpose: Styles unique to the About page template.
 * **FIX: Removed internal padding to inherit width from .content-page wrapper.**
 */
.about-page-header {
  min-height: 40vh;
  display: flex;
  align-items: flex-end;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  /* FIX: Ensure NO horizontal padding here */
  padding-left: 0;
  padding-right: 0;
}

.about-section {
  margin-bottom: 5rem;
  padding-top: 2rem;
  /* FIX: Ensure NO horizontal padding here */
  padding-left: 0;
  padding-right: 0;
}

.about-section h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Photo Grid/Gallery on About Page */
.about-photo-grid {
  display: grid;
  /* MOBILE DEFAULT: 1 Column */
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  margin-top: 2rem;
}

.about-photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* TABLET/MID-SCREEN OVERRIDE (min-width: 601px) */
@media (min-width: 601px) {
  .about-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
/* DESKTOP OVERRIDE (min-width: 901px) */
@media (min-width: 901px) {
  .about-photo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/*
 * File: pages/_page-case-studies-index.css
 * Purpose: Styles for the main grid/list of case study cards.
 */
.case-studies-list {
  display: grid;
  /* Two columns by default */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-xl);
  margin-top: 4rem;
}

@media (max-width: 1024px) {
  .case-studies-list {
    /* One column on smaller screens */
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
  }
}
.case-study-card {
  text-decoration: none;
  display: block;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease;
}

.case-study-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 1.8rem;
  font-weight: var(--font-weight-semibold);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.card-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/*
 * File: utilities/_animations.css
 * Purpose: All keyframe animations
 */
/* === CORE ANIMATIONS === */
@keyframes fadeInSlideUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes iconPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes iconPulseOnHover {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes wiggleEffect {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(-1deg);
  }
  50% {
    transform: translateY(-12px) rotate(1deg);
  }
  65% {
    transform: translateY(-10px) rotate(-0.5deg);
  }
  80% {
    transform: translateY(-11px) rotate(0.5deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}
@keyframes jumpShake {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) rotate(-2deg);
  }
  50% {
    transform: translateY(-25px) rotate(2deg);
  }
  65% {
    transform: translateY(-22px) rotate(-1deg);
  }
  80% {
    transform: translateY(-24px) rotate(1deg);
  }
  100% {
    transform: translateY(-20px) rotate(0deg);
  }
}
@keyframes slideInRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes pageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wave {
  0%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60%, 100% {
    transform: rotate(0deg);
  }
}
/* === ICON ANIMATIONS === */
@keyframes cartPush {
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(15px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes rotateGear {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(90deg);
  }
}
@keyframes lightningStrike {
  0% {
    transform: translateY(-40px) scale(0.5);
    opacity: 0;
  }
  40% {
    transform: translateY(-5px) scale(1.1);
    opacity: 1;
  }
  60% {
    transform: translateY(5px) scale(0.95);
  }
  80% {
    transform: translateY(-2px) scale(1.05);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes wrenchTwist {
  0%, 100% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-30deg);
  }
  60% {
    transform: rotate(30deg);
  }
}
@keyframes penWrite {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-8px, 8px) rotate(-15deg);
  }
  50% {
    transform: translate(8px, 8px) rotate(15deg);
  }
  75% {
    transform: translate(-4px, 4px) rotate(-10deg);
  }
}
@keyframes heartPulse {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(1.25);
  }
}
/* === UTILITY ANIMATIONS === */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes slideIn {
  from {
    left: -250px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
/*
 * File: trumps/_utilities.css
 * Purpose: Utility classes, overrides, and general helpers.
 */
/* 1. PASSWORD GATE STRUCTURE (High-Specificity Component/Utility) */
/* This is a structural style that affects the main layout */
.password-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
}

.password-gate-form {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}

.password-gate input[type=password] {
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--border-dark);
  border-radius: 4px;
  font-size: 1rem;
  width: 250px;
}

/* 2. KEYFRAMES (Animation definitions) */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
/* 3. Helper Classes */
.u-text-center {
  text-align: center !important; /* Utility classes often need !important */
}

.u-margin-top-large {
  margin-top: var(--gap-xxl) !important;
}

/*
 * File: trumps/_button-overrides.css
 * Purpose: Override global link animations for button-style elements
 */
/* Prevent the ::after underline from appearing on button-style links */
.btn-primary::after,
.btn-secondary::after,
.case-study-nav a::after,
.case-study-mobile-nav-item::after,
.carousel-btn::after,
.footer-back-to-top a::after,
.password-gate button::after {
  content: none !important;
}

/* Ensure button-style elements don't inherit base link text-decoration */
.btn-primary,
.btn-secondary,
.case-study-nav a,
.case-study-mobile-nav-item,
.carousel-btn,
.footer-back-to-top a,
.password-gate button {
  text-decoration: none !important;
}

/*# sourceMappingURL=main.css.map */