/* =============================================================================
   PORTFOLIO STYLES
   =============================================================================
   This file contains all styles for the portfolio website.
   
   TABLE OF CONTENTS:
   1. Fonts
   2. CSS Variables (Design Tokens)
   3. Reset & Base Styles
   4. Typography
   5. Layout & Container
   6. Navigation
   7. Hero Section
   8. About Section / Card Carousel
   9. Case Studies
   10. Contact Page
   11. Footer
   12. Password Gate
   13. Components (Buttons, Cards, Badges, etc.)
   14. Decorative Elements
   15. Animations
   16. Utilities
   17. Responsive Styles
   ============================================================================= */


/* =============================================================================
   1. FONTS
   =============================================================================
   Cormorant Garamond: Elegant serif for headings and display text
   Inter: Clean sans-serif for body text and UI elements
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');


/* =============================================================================
   2. CSS VARIABLES (DESIGN TOKENS)
   =============================================================================
   All colors, spacing, and typography values are defined here.
   To change the color scheme, modify these values.
   ============================================================================= */
:root {
  /* -------------------------------------------------------------------------
     CORE PALETTE
     -------------------------------------------------------------------------
     Background and text colors */
  --background: hsl(40, 33%, 98%);      /* Warm off-white background */
  --foreground: hsl(220, 20%, 15%);     /* Dark blue-gray for text */

  /* -------------------------------------------------------------------------
     COMPONENT COLORS
     ------------------------------------------------------------------------- */
  --card: hsl(40, 30%, 96%);
  --card-foreground: hsl(220, 20%, 15%);
  --surface-elevated: hsl(0, 0%, 100%);  /* Pure white for cards */
  --surface-warm: hsl(30, 40%, 96%);     /* Warm tinted background for sections */

  /* -------------------------------------------------------------------------
     PRIMARY (BRAND) COLOR - Terracotta
     -------------------------------------------------------------------------
     Main accent color used for CTAs, links, and highlights */
  --accent-warm: hsl(12, 76%, 61%);       /* Primary terracotta */
  --accent-warm-light: hsl(12, 60%, 94%); /* Light terracotta for backgrounds */
  --accent-warm-dark: hsl(12, 70%, 45%);  /* Darker terracotta for hover states */
	
	
	/* -------------------------------------------------------------------------
     CONTAINER FILL COLORS
     -------------------------------------------------------------------------
     /* Blue */
    --fill-blue: hsl(197, 76%, 61%);       
    --fill-blue-light: hsl(210, 60%, 94%); 
    --fill-blue-dark: hsl(201, 70%, 45%);  
	
	/* Purple */
 	--fill-purp: hsl(262, 76%, 61%);       
    --fill-purp-light: hsl(253, 60%, 94%); 
    --fill-purp-dark: hsl(201, 70%, 45%);  
		
	/* Green */
 	--fill-green: hsl(134, 71%, 60%);       
    --fill-green-light: hsl(134, 56%, 89%); 
    --fill-green-dark: hsl(138, 72%, 43%);  

  /* -------------------------------------------------------------------------
     SECONDARY & MUTED COLORS
     ------------------------------------------------------------------------- */
  --secondary: hsl(40, 20%, 92%);
  --muted: hsl(40, 15%, 90%);

  /* -------------------------------------------------------------------------
     TEXT COLORS
     ------------------------------------------------------------------------- */
  --text-display: hsl(220, 25%, 12%);    /* Darkest - for headings */
  --text-body: hsl(220, 15%, 30%);       /* Medium - for paragraphs */
  --text-subtle: hsl(220, 10%, 55%);     /* Lighter - for captions, hints */

  /* -------------------------------------------------------------------------
     BORDERS
     ------------------------------------------------------------------------- */
  --border: hsl(40, 20%, 88%);
  --border-light: hsl(40, 20%, 92%);

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* -------------------------------------------------------------------------
     SPACING & SIZING
     ------------------------------------------------------------------------- */
  --radius: 0.5rem;
  --radius-lg: 1rem;
  --radius-lg-image-cap: 1rem 1rem 1rem 0;
  --radius-lg-cap: 0 0 1rem 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
}


/* =============================================================================
   3. RESET & BASE STYLES
   ============================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  color: var(--text-body);
  font-size: clamp(.8rem, 2vw, 1.1rem);
  line-height: 1.6;
  margin-bottom: 1rem;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ol {
margin-left: 2rem;
}

ul {
margin-left: 2rem;
}

li {
margin: .5rem;
}


/* =============================================================================
   4. TYPOGRAPHY
   ============================================================================= */

/* Headings use serif font */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--text-display);
  font-weight: 500;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);  /* Responsive sizing */
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
  font-size: clamp(1rem, 3vw, 1.5rem);
  margin-top: 1.5rem;
  margin-bottom: .25rem;
}

/* Body text classes */
.text-display {
  color: var(--text-display);
}


.text-subtle {
  color: var(--text-subtle);
}

/* Accent text */
.text-accent {
  color: var(--accent-warm);
  font-weight: 600;
}

.text-accent-home {
  color: var(--accent-warm);
  font-weight: 200;
}

/* Bold styling for emphasis */
.bold {
  font-weight: 600;
}

/* Italic styling for emphasis */
.italic {
  font-style: italic;
}

/* Small uppercase labels */
.label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-warm);
}


/* =============================================================================
   5. LAYOUT & CONTAINER
   ============================================================================= */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1024px) {
  .container {
    padding: 0 3rem;
  }
}

/* Grid layouts */
.grid {
  display: grid;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* Flex layouts */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subsection {
  display: flex;
  width: fit-content;
  gap: 2rem;
  justify-content: flex-start;
  padding: 1rem;
  background-color: var(--surface-warm);
  border-radius: var(--radius-lg);
}


.bulletgrid-row {
  position: relative;
  display: grid;
  gap: .5rem;
}

@media (min-width: 768px) {
  .bulletgrid-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bulletgrid-row .bulletgrid-item {
  position: relative;
  background: linear-gradient(to bottom right, var(--surface-elevated), var(--background));
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  text-align: left;
  overflow: hidden;
}



.bulletgrid-item {
	flex: 1;
	position: relative;
	/*background: linear-gradient(to bottom right, var(--surface-elevated), var(--background));*/
	padding: 1rem;
	border-radius: var(--radius-xl);
	/*border: 1px solid var(--border-light);*/
	text-align: left;
	overflow: hidden;
	padding: 0;
	background: none;
	border: none;
	text-align: center;
	min-width: 7.5rem;
}

.bulletgrid-item ul{
	margin-left: 1rem;
}

.bulletgrid-item li{
	font-size: .9rem;
	margin-left: 0rem;
}

/* =============================================================================
   FILL COLORS
   ============================================================================= */
.surface-warm {
	background-color: var(--surface-warm);
}

.accent-warm {
	background-color: var(--accent-warm);
}

.accent-warm-light {
	background-color: var(--accent-warm-light);
}

.accent-warm-dark {
	background-color: var(--accent-warm-dark);
}

.blue {
	background-color: var(--fill-blue);
}

.blue-light {
	background-color: var(--fill-blue-light);
}

.blue-dark {
	background-color: var(--fill-blue-dark);
}

.purp {
	background-color: var(--fill-purp);
}

.purp-light {
	background-color: var(--fill-purp-light);
}

.purp-dark {
	background-color: var(--fill-purp-dark);
}


.green {
	background-color: var(--fill-green);
}

.green-light {
	background-color: var(--fill-green-light);
}

.green-dark {
	background-color: var(--fill-green-dark);
}

/* =============================================================================
   6. NAVIGATION
   ============================================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: rgba(252, 251, 249, 0.8);  /* --background with opacity */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;  /* 80px */
}

/* Navigation logo/headshot */
.nav-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.nav-logo:hover {
  opacity: 0.8;
}

/* Navigation links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.nav-link {
  position: relative;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: var(--text-subtle);
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--text-display);
}

/* Active navigation link */
.nav-link.active {
  color: var(--text-display);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background-color: var(--accent-warm);
  border-radius: var(--radius-full);
}


/* =============================================================================
   7. HERO SECTION
   ============================================================================= */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 5rem;  /* Account for fixed nav */
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

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

/* Hero text content */
.hero-content {
  order: 2;
  space-y: 2rem;
  position: relative;
}

@media (min-width: 1024px) {
  .hero-content {
    order: 1;
  }
}

/* Arrow accent flourishes */
.arrow-accent {
  position: absolute;
  pointer-events: none;
}

.arrow-accent-curved {
  left: -4rem;
  top: -1rem;
}

.arrow-accent-double {
  right: -3rem;
  top: 0;
}

.hero-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 1rem;
}


.hero-title {
  margin-bottom: 2rem;
}

.hero-description {
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 36rem;
  margin-bottom: 2rem;
}

/* Hero headshot */
.hero-image {
  order: 1;
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .hero-image {
    order: 2;
    justify-content: flex-end;
  }
}

.headshot-wrapper {
  position: relative;
}

/* Decorative backgrounds behind headshot */
.headshot-bg-1,
.headshot-bg-2 {
  position: absolute;
  inset: -1rem;
  border-radius: var(--radius-full);
}

.headshot-bg-1 {
  background-color: var(--accent-warm-light);
  transform: rotate(-3deg);
}

.headshot-bg-2 {
  background-color: var(--surface-warm);
  transform: rotate(3deg);
}

/* Headshot Flourish - Constellation SVG decorations */
.headshot-flourish {
  position: absolute;
  inset: -3rem;
  pointer-events: none;
  z-index: 1;
}

.flourish-svg {
  width: 100%;
  height: 100%;
}

/* Flourish line animations */
.flourish-line {
  stroke-dashoffset: 100;
  opacity: 0;
  animation: drawLine 1.2s ease-out forwards;
}

.flourish-line-1 { animation-delay: 0s; }
.flourish-line-2 { animation-delay: 0.2s; }
.flourish-line-3 { animation-delay: 0.4s; }
.flourish-line-4 { animation-delay: 0.6s; }

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
    opacity: 0.2;
  }
}

/* Flourish dot animations */
.flourish-dot {
  opacity: 0;
  transform-origin: center;
  transform: scale(0);
  animation: popIn 0.3s ease-out forwards;
}

.flourish-dot-1 { animation-delay: 0.8s; }
.flourish-dot-2 { animation-delay: 0.9s; }
.flourish-dot-3 { animation-delay: 1s; }
.flourish-dot-4 { animation-delay: 1.1s; }
.flourish-dot-5 { animation-delay: 1.2s; }
.flourish-dot-6 { animation-delay: 1.3s; }
.flourish-dot-7 { animation-delay: 1.4s; }
.flourish-dot-8 { animation-delay: 1.5s; }
.flourish-dot-9 { animation-delay: 1.6s; }
.flourish-dot-10 { animation-delay: 1.7s; }
.flourish-dot-11 { animation-delay: 1.8s; }
.flourish-dot-12 { animation-delay: 1.9s; }
.flourish-dot-13 { animation-delay: 2s; }
.flourish-dot-14 { animation-delay: 2.1s; }
.flourish-dot-15 { animation-delay: 2.2s; }

@keyframes popIn {
  to {
    opacity: 0.35;
    transform: scale(1);
  }
}

/* Flourish arrow animations */
.flourish-arrow {
  opacity: 0;
  animation: fadeInArrow 0.3s ease-out forwards;
}

.flourish-arrow-1 { animation-delay: 1.8s; }
.flourish-arrow-2 { animation-delay: 2s; }

@keyframes fadeInArrow {
  to {
    opacity: 0.4;
  }
}

.headshot {
  position: relative;
  width: 18rem;
  height: 18rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  z-index: 2;
}

@media (min-width: 640px) {
  .headshot {
    width: 20rem;
    height: 20rem;
  }
}

@media (min-width: 1024px) {
  .headshot {
    width: 24rem;
    height: 24rem;
  }
}

.headshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero buttons */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Scroll indicator */
.scroll-indicator {
  display: none;
  justify-content: center;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  .scroll-indicator {
    display: flex;
  }
}

.scroll-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-subtle);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.scroll-button:hover {
  color: var(--accent-warm);
}

.scroll-text {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scroll-arrow-container {
  position: relative;
}

.scroll-arrow {
  width: 1rem;
  height: 1rem;
  animation: bounce 1s infinite;
}

.scroll-line {
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 2rem;
  background: linear-gradient(to bottom, currentColor, transparent);
  opacity: 0.3;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25%);
  }
}


/* =============================================================================
   8. ABOUT SECTION / CARD CAROUSEL
   ============================================================================= */
.about {
  padding: 3rem 0 6rem;
  background-color: var(--surface-warm);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .about {
    padding: 4rem 0 8rem;
  }
}

.about-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 1024px) {
  .about-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* Card navigation tabs */
.card-nav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card-nav::-webkit-scrollbar {
  display: none;
}

.card-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-full);
  background-color: var(--surface-elevated);
  color: var(--text-body);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.card-nav-btn:hover {
  border-color: var(--accent-warm);
  color: var(--text-display);
}

.card-nav-btn.active {
  background-color: var(--accent-warm);
  color: white;
  border-color: var(--accent-warm);
  box-shadow: 0 4px 12px -4px rgba(225, 113, 82, 0.3);
}

.card-nav-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  background-color: var(--muted);
  color: var(--text-subtle);
}

.card-nav-btn.active .card-nav-number {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Carousel container */
.carousel {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* About cards */
.about-card {
  flex: 0 0 85%;
  padding: 2rem 2.5rem;
  background-color: var(--surface-elevated);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  transition: all 0.5s ease;
}

@media (min-width: 640px) {
  .about-card {
    flex: 0 0 70%;
  }
}

@media (min-width: 1024px) {
  .about-card {
    flex: 0 0 55%;
  }
}

@media (min-width: 1280px) {
  .about-card {
    flex: 0 0 45%;
  }
}

.about-card:hover {
  border-color: rgba(225, 113, 82, 0.3);
  box-shadow: 0 20px 40px -20px rgba(225, 113, 82, 0.1);
}

.about-card-title {
  margin-bottom: 1.5rem;
}

.about-card-content {
  line-height: 1.75;
}

.about-card-content p {
  margin-bottom: 1rem;
}

.about-card-content ul {
  /*padding-left: 1rem;
  padding-bottom: 1rem;*/
}

.about-card-content p:last-child {
  margin-bottom: 0;
}

/* Card image (floated right) */
.about-card-image {
  float: right;
  width: 6rem;
  height: 6rem;
  margin-left: 1rem;
  margin-bottom: 0.5rem;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .about-card-image {
    width: 8rem;
    height: 8rem;
  }
}

/* Arrow navigation buttons */
.arrow-nav {
  display: flex;
  gap: 0.75rem;
}

.arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background-color: var(--surface-elevated);
  color: var(--text-subtle);
  transition: all 0.3s ease;
}

.arrow-btn:hover {
  color: var(--text-display);
  border-color: var(--accent-warm);
  background-color: var(--accent-warm-light);
}

.arrow-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}


/* =============================================================================
   9. CASE STUDIES
   ============================================================================= */
.case-studies {
  padding: 8rem 0 6rem;
}

.case-studies-header {
  margin-bottom: 2rem;
  font-size: clamp(2rem, 4vw, 3rem);
}

.case-studies-section {
	display: flex; 
	flex-direction: column; 
}

/* Case study list with connecting line */
.case-studies-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}


@media (min-width: 1024px) {
  .case-studies-list::before {
    display: block;
  }
}

.case-study-card {
  display: grid;
  gap: 2rem;
  padding: 1.5rem;
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: all 0.5s cubic-bezier(0.25, 0.4, 0.25, 1);
  position: relative;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .case-study-card {
    grid-template-columns: 1fr 1fr;
    padding: 2rem;
  }
}

/* Enhanced hover effect matching React version */
.case-study-card:hover {
  border-color: rgba(225, 113, 82, 0.4);
  box-shadow: 0 25px 50px -12px rgba(225, 113, 82, 0.1);
  transform: translateY(-8px) scale(1.01);
}

/* Connection node on vertical line 
.case-study-card::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background-color: rgba(225, 113, 82, 0.3);
  border: 2px solid var(--accent-warm);
  display: none;
}*/

@media (min-width: 1024px) {
  .case-study-card::before {
    display: block;
  }
}

/* Case study preview image */
.case-study-preview {
  aspect-ratio: 4/3;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.case-study-card:hover .case-study-preview {
  transform: scale(1.02);
}

/* Background color variants for case study previews */
.bg-accent-light {
  background-color: var(--accent-warm-light);
}

.bg-muted {
  background-color: var(--muted);
}

.bg-secondary {
  background-color: var(--secondary);
}

/* Case study content */
.case-study-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.case-study-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.case-study-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-warm);
  font-weight: 500;
  transition: gap 0.3s ease;
}

.case-study-link:hover {
  gap: 0.75rem;
}


/* =============================================================================
   10. CONTACT PAGE
   ============================================================================= */
.contact {
  padding: 8rem 0 6rem;
}

.contact-grid {
  max-width: 40rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

/* Vertical connecting line */
.contact-info::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 3rem;
  bottom: 3rem;
  width: 1px;
  background: linear-gradient(to bottom, 
    rgba(225, 113, 82, 0.3), 
    rgba(225, 113, 82, 0.2), 
    rgba(225, 113, 82, 0.3)
  );
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background-color: var(--accent-warm-light);
  color: var(--accent-warm);
  z-index: 1;
}

.contact-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}


/* =============================================================================
   11. FOOTER
   ============================================================================= */
.footer {
  padding: 4rem 0;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-name {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-display);
  margin-bottom: 0.25rem;
}

/* Social icons */
.social-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: var(--muted);
  color: var(--text-subtle);
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: var(--accent-warm);
  color: white;
}

.social-link svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Footer bottom */
.footer-bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: center;
  }
}


/* =============================================================================
   12. PASSWORD GATE
   ============================================================================= */
.password-gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.password-gate-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.password-form-container {
  width: 100%;
  max-width: 28rem;
  text-align: center;
}

.password-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
  border-radius: var(--radius-full);
  background-color: var(--accent-warm-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent-warm);
}

.password-form {
  margin-top: 2rem;
}

.password-input-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

.password-input {
  width: 100%;
  height: 3rem;
  padding: 0 3rem 0 1rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface-elevated);
  color: var(--text-display);
  transition: border-color 0.3s ease;
}

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

.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25rem;
  color: var(--text-subtle);
  transition: color 0.3s ease;
}

.password-toggle:hover {
  color: var(--text-display);
}

.password-error {
  color: #dc2626;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.password-hint {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-subtle);
}

.password-hint a{
  color: var(--accent-warm);
}

/* =============================================================================
   13. COMPONENTS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--accent-warm);
  color: white;
}

.btn-primary:hover {
  background-color: var(--accent-warm-dark);
  box-shadow: 0 8px 16px -4px rgba(225, 113, 82, 0.3);
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-body);
}

.btn-secondary:hover {
  color: var(--accent-warm);
}

/* Full width button */
.btn-full {
  width: 100%;
}

/* -----------------------------------------------------------------------------
   Badges / Tags
   ----------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  background-color: var(--accent-warm-light);
  color: var(--accent-warm-dark);
}

/* -----------------------------------------------------------------------------
   Cards
   ----------------------------------------------------------------------------- */
.card {
  padding: 2rem;
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
}

/* -----------------------------------------------------------------------------
   Two-Column Block - Text + Image side-by-side
   ----------------------------------------------------------------------------- */
.two-column-block {
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .two-column-block {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

.two-column-block.image-left .two-column-image {
  order: 1;
}

.two-column-block.image-left .two-column-text {
  order: 2;
}

.two-column-block.image-right .two-column-image {
  order: 2;
}

.two-column-block.image-right .two-column-text {
  order: 1;
}

@media (max-width: 767px) {
  .two-column-block .two-column-image,
  .two-column-block .two-column-text {
    order: unset !important;
  }
}

.two-column-image {
  border-radius: var(--radius-lg);
  border: solid 1px var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 420px;
}


.two-column-image.aspect-video {
  aspect-ratio: 16 / 9;
}

.two-column-image.aspect-square {
  aspect-ratio: 1 / 1;
}

.two-column-image.aspect-portrait {
  aspect-ratio: 3 / 4;
}

.two-column-text h3 {
  font-size: 1.5rem;
  color: var(--text-display);
  font-weight: 500;
  margin-bottom: 1rem;
}



.two-column-text p + p {
  margin-top: 1rem;
}

/* -----------------------------------------------------------------------------
   Image Carousel - Horizontal scrolling gallery
   ----------------------------------------------------------------------------- */
.image-carousel {
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
  width: 120%;
}

.image-carousel-track {
  display: flex;
  gap: 1rem;
  transition: transform 0.5s cubic-bezier(0.25, 0.4, 0.25, 1);
}

.image-carousel-slide {
  flex: none;
  width: 100%;
}

@media (min-width: 768px) {
  .image-carousel-slide {
    width: 90%;
  }
}

.image-carousel-image {
  background-color: var(--muted);
  border-radius: var(--radius-lg);
	border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

image-carousel-image  img.{
  width: 100%;
  height: 100%;
  object-fit: cover;
  width: inherit;
  border: #D9292C thick;
}

.image-carousel-image-cap {
  background-color: var(--muted);
  border-radius: var(--radius-lg-image-cap);
	border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

image-carousel-image-cap  img.{
  width: 100%;
  height: 100%;
  object-fit: cover;
  width: inherit;
  border: #D9292C thick;
}

.image-carousel-caption {
  	padding: .5rem 1.25rem .25rem .75rem;
	margin-top: 0rem;
	margin-bottom: 1rem;	
  	border-radius: var(--radius-lg-cap);
	border: 1px solid var(--border);/**/
	overflow: hidden;
	border-top: none;
	background-color: var(--card);
	width: fit-content;
	gap: 0rem;
	line-height: 0rem;
	max-width: 880px;

}


.image-carousel-caption-title {
  color: var(--text-display);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.1rem;
}

.image-carousel-caption-text {
  color: var(--text-body);
  line-height: auto;
  font-size: 0.875rem;
	padding-bottom: 0rem;
	margin-bottom: 0rem;
}

.image-carousel-caption-text p.{
  padding-bottom: 0rem;
  margin-bottom: 0rem;
}

/* Carousel navigation buttons */
.image-carousel-nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: var(--surface-elevated);
  border: 1px solid var(--accent-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  transition: all 0.3s;
  z-index: 10;
  cursor: pointer;
}

.image-carousel-nav:hover {
  background-color: var(--accent-warm-light);
  border-color: var(--accent-warm);
  color: var(--text-display);
}

.image-carousel-nav.prev {
  left: 1rem;
}

.image-carousel-nav.next {
  right: 1rem;
}

.image-carousel-nav svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* -----------------------------------------------------------------------------
   Bulleted Content - Arrow-bulleted lists
   ----------------------------------------------------------------------------- */
.bulleted-content {
  display: grid;
  gap: .5rem;
  margin-top: 1.5rem;
}

.bulleted-content.two-columns {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bulleted-content.two-columns {
    grid-template-columns: 1fr 1fr;
  }
}

.bullet-item {
  display: flex;
  gap: .3rem;
}




.bullet-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-warm);
}

.bullet-icon svg {
  width: 100%;
  height: 100%;
  transition: transform 0.3s;
}

.bullet-item:hover .bullet-icon svg {
  transform: translateX(2px);
}

.bullet-content h4 {
  color: var(--text-display);
  font-family: var(--font-sans);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.bullet-content p {
  color: var(--text-body);
  line-height: 1.75;
  font-size: 1rem;
}

/* -----------------------------------------------------------------------------
   Section Number Badge - Animated circles for sections
   ----------------------------------------------------------------------------- */
.section-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: var(--accent-warm);
  color: white;
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 600;
  padding-bottom: .3rem;
  flex-shrink: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Hero image for case studies */
.hero-image-container {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;reveal mt-12
}

.hero-image-container.aspect-wide {
  aspect-ratio: 21 / 9;
}

.hero-image-container.aspect-standard {
  aspect-ratio: 16 / 9;
}

.hero-image-caption {
  text-align: center;
  color: var(--text-subtle);
  font-size: 0.875rem;
  font-style: italic;
}


/* Video player in hero image containers */
.hero-image-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
}



/* Divider styling */
.section-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 3rem 0;
}

/* Next project link */
.next-project-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.next-project-link h3 {
  transition: color 0.3s;
}

.next-project-link:hover h3 {
  color: var(--accent-warm);
}

.next-project-link svg {
  color: var(--accent-warm);
  transition: transform 0.3s;
}

.next-project-link:hover svg {
  transform: translateX(0.5rem);
}

/* -----------------------------------------------------------------------------
   Stats Row
   ----------------------------------------------------------------------------- */
.stats-row {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
	flex: 1;

}

.stat-value {
}

.stat-label {
}

.stat-description {

}

/* Compact variant - Styled container matching React */
.stats-row-compact {
  display: flex;
  gap: 2rem;
  justify-content: flex-start;
  padding: 3rem 2.5rem 2rem 2.5rem;
  background-color: var(--surface-warm);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@media (min-width: 640px) {
  .stats-row-compact {
    gap: 3rem;
  }
}

.stats-row-compact .stat-item {
  padding: 0;
  background: none;
  border: none;
  text-align: center;
  min-width: 7.5rem;
}

.stats-row-compact .stat-label {
  font-size: clamp(.6rem, 1vw, .75rem);
  font-weight: 500;
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.stats-row-compact .stat-value {
  font-family: var(--font-sans);
  font-size: clamp(.8rem, 2vw, 1.15rem);
  font-weight: 600;
  color: var(--text-display);
}

/* Large variant - Impact stats with connecting lines */
.stats-row-large {
  display: grid;
  gap: 2rem;
  position: relative;
}

@media (min-width: 768px) {
  .stats-row-large {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Connecting line for large stats
.stats-row-large::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(225, 113, 82, 0.2), transparent);
  z-index: -1;
  display: none;
} */

@media (min-width: 768px) {
  .stats-row-large::before {
    display: block;
  }
}

.stats-row-large .stat-item {
  position: relative;
  background: linear-gradient(to bottom right, var(--surface-elevated), var(--background));
  padding: 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  text-align: center;
  overflow: hidden;
}

.stats-row-large .stat-value {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 500;
  color: var(--accent-warm);
  margin-bottom: 0.75rem;
}

@media (min-width: 1024px) {
  .stats-row-large .stat-value {
    font-size: 3.75rem;
  }
}

.stats-row-large .stat-label {
  color: var(--text-display);
  font-size: 1rem;
  font-weight: 500;
}

.stats-row-large .stat-description {
  color: var(--text-body);
  font-size: 0.875rem;
  margin-top: 0.75rem;
  line-height: 1.6;
}

/* Connector arrow between stats */
.stat-connector {
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: none;
}

@media (min-width: 768px) {
  .stat-connector {
    display: block;
  }
}

.stat-connector svg {
  width: 1rem;
  height: 1rem;
  color: rgba(225, 113, 82, 0.3);
}


/* =============================================================================
   14. DECORATIVE ELEMENTS
   ============================================================================= */

/* SVG Icons - These should be inline SVGs in HTML */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Arrow icons */
.arrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =============================================================================
   15. ANIMATIONS
   ============================================================================= */

/* Fade up animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Slide in from left */
@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-left {
  animation: slideLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Slide in from right */
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-right {
  animation: slideRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Scale animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale {
  animation: scaleIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Bounce animation (for scroll indicator) */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.animate-bounce {
  animation: bounce 2s infinite;
}

/* Animation delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Start invisible (for animations) */
.opacity-0 {
  opacity: 0;
}

/* Revealed state */
.revealed {
  opacity: 1;
}

/* Hover effects */
.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.03);
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Link underline animation */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--accent-warm);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Stagger children animations */
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }


/* =============================================================================
   16. UTILITIES
   ============================================================================= */

/* Spacing */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }

.pt-32 { padding-top: 8rem; }
.pb-24 { padding-bottom: 6rem; }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }

/* Display */
.hidden { display: none; }
.block { display: block; }

/* Screen reader only (visually hidden but accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Max width */
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }

/* Line height */
.leading-relaxed { line-height: 1.625; }
.leading-tight { line-height: 1.25; }


/* =============================================================================
   17. RESPONSIVE STYLES
   ============================================================================= */

/* Hide on mobile, show on larger screens */
@media (max-width: 1023px) {
  .lg-show {
    display: none !important;
  }
}

/* Hide on larger screens, show on mobile */
@media (min-width: 1024px) {
  .lg-hide {
    display: none !important;
  }
}