/* 
  SHIVANGINI SINGH PORTFOLIO - SINGLE SOURCE OF TRUTH
  
  This is the ONLY CSS file for the entire portfolio.
  All styles for homepage, work page, about page, and case studies are contained here.
  No other CSS files should be referenced or created.
  
  Last cleaned: Removed all glow effects, floating back buttons, and unused assets.
*/

/* ============================================
   CSS RESET & BASE STYLES
   ============================================ */

/* 
  The * selector means "all elements".
  This resets default browser styles so all browsers look the same.
*/
* {
    margin: 0;           /* Removes default spacing outside elements */
    padding: 0;          /* Removes default spacing inside elements */
    box-sizing: border-box;  
    /* 
      box-sizing: border-box is VERY IMPORTANT!
      It makes width/height include padding and border.
      Without it, adding padding makes elements bigger (confusing!).
    */
}

/* 
  CSS VARIABLES (Custom Properties)
  These are like color swatches in design software - define once, use everywhere!
  If you want to change your color scheme, just change these values.
*/
:root {
    /* 
      :root is a special selector for the top-level element.
      Variables defined here are available everywhere.
    */
    
    /* Color Palette - Dark Theme */
    --primary-black: #000000;        /* Pure black background */
    --text-white: #ffffff;           /* White text */
    --accent-yellow: #E9BF4E;        /* Custom golden yellow for highlights */
    --text-gray: #cccccc;            /* Light gray for secondary text */
    --border-gray: #333333;          /* Dark gray for borders */
    
    /* Typography */
    --font-family: 'Inter', sans-serif;  /* Our Google Font */
    --font-size-base: 16px;          /* Base font size */
    
    /* Spacing System - Consistent spacing throughout */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 2rem;      /* 32px */
    --spacing-lg: 4rem;      /* 64px */
    --spacing-xl: 6rem;      /* 96px */
    
    /* Layout */
    --wrap: min(1100px, 92vw);   /* Container max-width */
    --about-top: 129px;           /* About page top spacing (reduced 30%) */
    --about-top-space: 184px;     /* current desktop top spacing for About (was ~184px) */
    --header-h: 72px;             /* adjust if your sticky header is different */
    --hairline: rgba(0,0,0,.14);
    --white: #fff;
    --black: #0b0b0b;
    --surface-900: #0b0b0b;
    --surface-000: #fff;
    
    /* Work Card Strokes */
    --card-stroke: rgba(255,255,255,0.86);       /* base edge */
    --card-stroke-hover: #fff;                   /* hover edge */
    --card-stroke-width: 1.2px;                  /* ⇠ from you: 1.2 */
    --card-gap: 0.4vw;                           /* current gap */
    
    /* Other */
    --border-radius: 8px;    /* Rounded corners */
    --transition: all 0.3s ease;  /* Smooth transitions */
    /*
      Transitions make changes smooth instead of instant.
      "all" means animate all properties.
      "0.3s" is the duration (300 milliseconds).
      "ease" is the timing function (starts slow, speeds up, slows down).
    */
}

/* 
  Base styles for the whole document
  Note: background & color are set by .theme-light / .theme-dark classes
*/
body {
    font-family: var(--font-family);  
    font-size: var(--font-size-base);
    line-height: 1.6;  
    /* color and background handled by theme classes below */
    overflow-x: hidden;  
    /* 
      Prevents horizontal scrolling if content goes too wide.
    */
}

/* Dark theme for about and work pages - DEPRECATED, use .theme-dark instead */
/* body.dark-theme {
    color: var(--text-white);
    background-color: var(--primary-black);
} */

/* ============================================
   LIGHT VS DARK THEMES
   ============================================ */

:root{
  --bg-light: #ffffff;
  --fg-light: #111111;

  --bg-dark: #0e0e10;     /* your charcoal */
  --fg-dark: #eaeaea;
}

/* default (fallback) */
body{ background: var(--bg-light) !important; color: var(--fg-light) !important; }

.theme-light{ background: var(--bg-light) !important; color: var(--fg-light) !important; }
.theme-dark { background: var(--bg-dark) !important; color: var(--fg-dark) !important; }

/* make sure sections inherit nicely */
.theme-light .card{ color: inherit; }
.theme-dark  .card{ color: inherit; }

/* ============================================
   NAVIGATION BAR
   ============================================ */

/* HEADER / NAV ------------------------------------------ */
/* Header */
.site-header { 
  position: sticky; top: 0; z-index: 10020; 
  background: #fff; 
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: flex-end; /* right-align by default */
}

/* Ensure a full-width flex wrapper if you have .nav-wrap */
.site-header .nav-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  position: relative;
}
.navbar { 
  max-width: var(--content-max, 1095px); 
  margin: 0 auto; 
  padding: 14px 24px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}
.brand { 
  font-weight: 800; 
  color: #1f1a20; 
  text-decoration: none; 
}

/* Toggle button (single icon) */
.nav-toggle {
  display: inline-flex; 
  align-items: center; 
  gap: 10px;
  padding: 10px 14px; 
  border-radius: 999px; 
  border: 1px solid #d9d4ca;
  background: #fff; 
  color: #1f1a20; 
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  position: relative; 
  z-index: 1101;
}
.nav-toggle__label { 
  font-weight: 700; 
}
.nav-toggle__icon { 
  display: inline-flex; 
}

/* Kill any accidental duplicate icon generators */
.nav-toggle::before,
.nav-toggle::after { 
  content: none !important; 
}

/* Header height variable */
:root { 
  --header-h: 72px; 
}

/* The dropdown: fixed to the viewport top-right so it never flies left */
.menu-dropdown {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  top: calc(var(--header-h, 72px) + 8px);  /* sits under your header */
  width: 260px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  padding: 10px 0;
  z-index: 1100;
  opacity: 0; 
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.menu-dropdown a {
  display: block; 
  padding: 10px 16px; 
  font-weight: 600;
  color: #2a2a2a; 
  text-decoration: none;
}
.menu-dropdown a:hover { 
  background: #f7f7f7; 
}

/* Visible state (JS toggles [hidden] too for a11y) */
.menu-dropdown.open { 
  opacity: 1; 
  transform: translateY(0); 
}

/* Scrim with NO blur */
.menu-scrim {
  position: fixed; 
  inset: 0;
  background: rgba(0,0,0,.06);
  opacity: 0; 
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1098;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.menu-scrim.show { 
  opacity: 1; 
  pointer-events: auto; 
}

/* Optional: full-width sheet on small screens */
@media (max-width: 900px) {
  .menu-dropdown {
    left: 16px; 
    right: 16px; 
    width: auto;
    top: calc(var(--header-h, 64px) + 8px);
  }
}

.navbar {
    background-color: var(--text-white);  /* Default white background for homepage */
    position: fixed;  
    /* 
      position: fixed; makes the navbar stay at the top when scrolling.
      It's "fixed" to the viewport (browser window).
    */
    
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;  
    /* 
      z-index controls stacking order (which elements appear on top).
      Higher numbers = on top.
      1000 ensures navbar stays above other content.
    */
    
    transition: var(--transition);
    padding: var(--spacing-sm) 0;
}

/* Dark navbar for about and work pages */
body.dark-theme .navbar {
    background-color: var(--primary-black);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;  
    /* 
      FLEXBOX is a powerful layout tool!
      It makes elements flexible and easy to align.
      Here, it arranges logo and menu horizontally.
    */
    
    justify-content: space-between;  
    /* 
      justify-content controls horizontal alignment in flexbox.
      space-between: pushes first item left, last item right.
    */
    
    align-items: center;  
    /* 
      align-items controls vertical alignment in flexbox.
      center: aligns items to the vertical center.
    */
}

.logo {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--primary-black);  /* Black text on white background */
    text-decoration: none;  
    /* 
      Removes the underline from links.
      By default, <a> tags are underlined.
    */
    
    transition: var(--transition);
}

/* Dark theme logo color */
body.dark-theme .logo {
    color: var(--text-white);  /* White text on dark background */
}

.logo:hover {
    color: var(--accent-yellow);
}

.nav-menu {
    display: flex;
    list-style: none;  
    /* 
      Removes bullet points from <ul>.
      By default, lists have bullets/numbers.
    */
    
    gap: var(--spacing-md);  
    /* 
      gap adds space between flex items.
      Much easier than using margins on each item!
    */
}

.nav-link {
    color: var(--primary-black);  /* Black text on white background */
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
    transition: var(--transition);
    position: relative;  
    /* 
      position: relative; lets us position child elements absolutely.
      We'll use this for the underline effect.
    */
}

/* Dark theme nav link color */
body.dark-theme .nav-link {
    color: var(--text-white);  /* White text on dark background */
}

/* Active state for current page */
.nav-link.active {
    color: var(--accent-yellow);
}

/* Animated underline effect on hover */
.nav-link::after {
    /* 
      ::after is a pseudo-element - it creates a virtual element after the content.
      We'll use it to create an animated underline.
    */
    
    content: '';  
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;  /* Starts at 0 width */
    height: 2px;
    background-color: var(--accent-yellow);
    transition: width 0.3s ease;  
}

.nav-link:hover::after {
    width: 100%;  /* On hover, grows to full width */
}

/* Hamburger menu (mobile only) */
.hamburger {
    display: none;  
    /* 
      Hidden by default.
      We'll show it on mobile using media queries below.
    */
    
    flex-direction: column;
    cursor: pointer;  
    /* 
      cursor: pointer; changes the cursor to a hand when hovering.
      This indicates the element is clickable.
    */
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: var(--primary-black);  /* Black bars on white homepage */
    margin: 3px 0;
    transition: var(--transition);
}

/* Dark theme hamburger bars (white on dark pages) */
body.dark-theme .hamburger .bar {
    background-color: var(--text-white);
}

/* ============================================
   HOME PAGE - HERO SECTION
   ============================================ */

.hero {
    min-height: 100vh;  
    /* 
      vh = viewport height (1vh = 1% of viewport height).
      100vh = full screen height.
      min-height ensures it's at least full screen.
    */
    
    display: flex;
    align-items: center;
    padding-top: 120px;  /* Increased padding to move content down */
    background-color: var(--text-white);  /* White background */
    color: var(--primary-black);  /* Black text on white background */
    position: relative;
}

/* Black transition line */
.transition-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--primary-black);  /* Black line on white background */
    transform: translateY(100%);
    transition: transform 0.8s ease;
    z-index: 10;
}

/* Show transition line when navigating */
body.navigating .transition-line {
    transform: translateY(0);
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    width: 100%;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 
      CSS GRID - another powerful layout system!
      This creates two equal columns.
    */
    
    gap: var(--spacing-lg);
    align-items: center;
}

.hero-text {
    /* Left side - Text content */
}

.hero-title {
    font-size: 3rem;  /* Standardized size */
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.25rem;  /* Standardized size */
    font-weight: 700;    /* increased from 600 to 700 for more bold */
    margin-bottom: var(--spacing-md);
    color: var(--primary-black);  /* Dark text for WCAG 2.1 compliance */
}

.hero-quote {
    font-size: 1rem;  /* Standardized size */
    font-style: italic;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-black);  /* Dark text for WCAG 2.1 compliance */
    line-height: 1.6;
}

.hero-skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.skill-pill {
    background-color: transparent;
    color: var(--primary-black);  /* Black text on white background */
    padding: 0.25rem 0.75rem;  /* Smaller padding for less button-like appearance */
    border: 1px solid var(--primary-black);  /* Black border on white background */
    border-radius: 50px;  
    /* 
      Large border-radius creates pill-shaped elements.
      50px is more than the height, making perfect rounded ends.
    */
    
    font-size: 0.75rem;  /* Smaller font size */
    font-weight: 300;  /* Lighter font weight */
    text-transform: lowercase;  /* Ensure all text is lowercase */
    /* Removed transition and hover effects - these are now static text containers */
    cursor: default;  /* Changed from pointer to default cursor */
    pointer-events: none;  /* Disable all pointer interactions */
}

/* Hero Illustration - Optimized for crisp rendering */
.hero-illustration {
    max-width: min(44vw, 620px);
    height: auto;
    display: block;
    /* keep line-art crisp */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}


/* ============================================
   ABOUT PAGE
   ============================================ */

.about-page {
    min-height: 100vh;
    padding-bottom: var(--spacing-xl);
    background-color: var(--primary-black);
    color: var(--text-white);
    /* Slide up animation when coming from home */
    animation: slideUpFromBottom 1.5s ease-out;
}

/* Different animation when coming from work page */
.about-page.from-work {
    animation: slideDownFromTop 1.5s ease-out;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Distance from the very top */
/* About page wrapper */
.about-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* text | image */
  gap: clamp(24px, 4vw, 48px);
  align-items: start;               /* top-align the two columns */
  margin-bottom: 0;                 /* remove extra bottom space */
}

/* Title + text column */
.about-title {
  margin: 0;                        /* remove default h1 margin */
  line-height: 1.05;
  font-size: 3rem;  /* Consistent with hero title */
  font-weight: 700;
  text-transform: lowercase;
}

/* Right image column */
.about-figure {
  margin: 0;                        /* kill default figure margin */
  margin-bottom: 0;                 /* keeps image/title alignment tight */
  display: block;
}
.about-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;              /* keep your style, optional */
}

/* Desktop */
@media (min-width: 801px) {
  .about-hero, .about-section--intro {
    /* 30% less than before, minus header so the title sits snug under it */
    padding-top: calc(var(--about-top-space) * 0.7 - var(--header-h));
    margin-top: 0;               /* prevent double spacing */
  }
  /* tighten extra gaps inside the block */
  .about-hero h1 { margin-bottom: 0.6rem; }
  .about-hero .lead { margin-top: 0.2rem; }
}

/* Mobile—keep it comfy but still tighter (optional) */
@media (max-width: 800px) {
  .about-hero, .about-section--intro {
    padding-top: clamp(32px, 6vh, 56px);
    grid-template-columns: 1fr;
  }
  .about-figure { order: 2; }
}

/* If you navigate to #about via anchor, prevent the title hiding under the header */
#about {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* Legacy styles for content sections */
.about-text {
    /* Left side - Text content */
}

.about-intro {
    margin-bottom: var(--spacing-md);  /* Standardized spacing */
}

.greeting {
    font-size: 1.25rem;  /* Standardized size */
    font-weight: 600;
    margin-bottom: 0.5rem;  /* Standardized spacing */
    line-height: 1.3;  /* Consistent line height */
}

.location {
    font-size: 1rem;  /* Standardized size */
    color: var(--text-gray);
    margin-bottom: 0.5rem;  /* Standardized spacing */
    line-height: 1.3;  /* Consistent line height */
}

.experience {
    font-size: 1rem;  /* Standardized size */
    line-height: 1.3;  /* Consistent line height */
    color: var(--text-gray);
    margin-bottom: 0;  /* No bottom margin */
}

.philosophy {
    margin-bottom: var(--spacing-md);  /* Standardized spacing */
}

.philosophy-text {
    font-size: 1rem;  /* Standardized size */
    font-style: italic;
    line-height: 1.3;  /* Consistent line height */
    color: var(--text-gray);
}

.hobbies {
    margin-bottom: var(--spacing-md);  /* Standardized spacing */
}

.hobbies-text {
    font-size: 1rem;  /* Standardized size */
    line-height: 1.3;  /* Consistent line height */
    color: var(--text-gray);
}

.skills-section {
    margin-bottom: var(--spacing-lg);
}

.skills-title {
    font-size: 1.125rem;  /* Standardized size */
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.skill-tag {
    background-color: transparent;
    color: var(--text-white);
    padding: 0.25rem 0.75rem;  /* Smaller padding for less button-like appearance */
    border: 1px solid var(--text-white);
    border-radius: 50px;
    font-size: 0.75rem;  /* Smaller font size */
    font-weight: 300;  /* Lighter font weight */
    text-transform: lowercase;  /* Ensure all text is lowercase */
    transition: var(--transition);
}

.skill-tag:hover {
    background-color: var(--accent-yellow);
    color: var(--primary-black);
    border-color: var(--accent-yellow);
}

/* About Image */
.about-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container {
    width: 100%;
    max-width: 400px;
    position: relative;
}

.portrait-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.portrait-image:hover {
    transform: scale(1.02);
}

/* Work Button */
.work-button-container {
    display: flex;
    justify-content: center;
}

.work-button {
    background-color: var(--primary-black);
    color: var(--text-white);
    padding: 1rem 2rem;
    border: 1px solid var(--text-white);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.work-button:hover {
    background-color: var(--accent-yellow);
    color: var(--primary-black);
    border-color: var(--accent-yellow);
}

.button-arrow {
    font-size: 1.2rem;
}

/* ============================================
   WORK PAGE
   ============================================ */

.work-page {
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: var(--spacing-xl);
    background-color: var(--primary-black);
    color: var(--text-white);
    /* Slide down from top animation when coming from about */
    animation: slideInFromTop 1.5s ease-out;
}

/* Different animation when coming from home page */
.work-page.from-home {
    animation: slideInFromTop 1.5s ease-out;
}

.work-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Work images gallery - simple, accessible layout */
.work-images-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    max-width: 800px;  /* Constrain the overall width */
    margin-left: auto;
    margin-right: auto;
}

.work-image-wrapper {
    margin: 0;
    padding: 0;
    position: relative;
}

.work-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Interactive Card States */
.interactive-card {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.interactive-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.interactive-card.pressed {
    transform: translateY(-4px) scale(0.98);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: var(--text-white);
    text-align: center;
    padding: var(--spacing-md);
}

.interactive-card:hover .card-overlay {
    opacity: 1;
}

.interactive-card.pressed .card-overlay {
    opacity: 1;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: lowercase;
}

.card-description {
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.card-cta {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 20px;
    text-transform: lowercase;
    transition: all 0.3s ease;
    font-family: inherit;
    cursor: pointer;
}

.interactive-card:hover .card-cta {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* Screen reader only class - hides content visually but keeps it 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;
}

/* ============================================
   CASE STUDY PAGE
   ============================================ */

.case-study-page {
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: var(--spacing-xl);
    background-color: var(--primary-black);
    color: var(--text-white);
}

.case-study-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Back Button */
.back-button-container {
    margin-bottom: var(--spacing-lg);
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-white);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.back-button:hover {
    color: var(--accent-yellow);
}

.button-arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.back-button:hover .button-arrow {
    transform: translateX(-4px);
}

/* Case Study Header */
.case-study-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-gray);
}

.case-study-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    text-transform: lowercase;
}

.case-study-subtitle {
    font-size: 1.25rem;
    color: var(--accent-yellow);
    margin-bottom: var(--spacing-md);
    font-weight: 500;
}

.case-study-meta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.meta-item {
    font-size: 0.875rem;
    color: var(--text-gray);
    padding: 0.25rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Case Study Content */
.case-study-content {
    line-height: 1.7;
}

.case-study-section {
    margin-bottom: var(--spacing-xl);
}

.case-study-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--accent-yellow);
    text-transform: lowercase;
}

.case-study-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    text-transform: lowercase;
}

.case-study-section h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    text-transform: lowercase;
}

.case-study-section p {
    margin-bottom: var(--spacing-md);
    color: var(--text-light-gray);
}

.case-study-section ul,
.case-study-section ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-md);
}

.case-study-section li {
    margin-bottom: 0.5rem;
    color: var(--text-light-gray);
}

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

/* Results Grid */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.result-item {
    text-align: center;
    padding: var(--spacing-md);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.result-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-yellow);
    margin-bottom: 0.5rem;
}

.result-label {
    font-size: 0.875rem;
    color: var(--text-gray);
    text-transform: lowercase;
}

/* Next Project Section */
.next-project {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-gray);
}

.next-project h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    text-transform: lowercase;
    text-align: center;
}

.next-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.next-project-card {
    display: block;
    padding: var(--spacing-md);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    color: var(--text-white);
    transition: all 0.3s ease;
    position: relative;
}

.next-project-card:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
    border-color: var(--accent-yellow);
}

.next-project-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: lowercase;
}

.next-project-description {
    font-size: 0.875rem;
    color: var(--text-gray);
    margin-bottom: var(--spacing-sm);
}

.next-project-arrow {
    font-size: 1.5rem;
    color: var(--accent-yellow);
    transition: transform 0.3s ease;
}

.next-project-card:hover .next-project-arrow {
    transform: translateX(4px);
}

/* ============================================
   PRESENTATION THEME
   ============================================ */

.presentation-theme {
    background-color: #2c2c2c;
    color: #ffffff;
}

.presentation-page {
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: var(--spacing-xl);
    background-color: #2c2c2c;
    color: #ffffff;
}

.presentation-section {
    margin-bottom: 4rem;
    padding: 0 var(--spacing-md);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Title Section */
.title-section {
    text-align: center;
    padding-top: 2rem;
    position: relative;
}

.title-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.title-shape {
    background-color: #404040;
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
}

.presentation-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-transform: lowercase;
}

.live-indicator {
    position: absolute;
    top: 0;
    right: 2rem;
}

.live-tag {
    background-color: #ffd700;
    color: #000000;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.slider-control {
    margin-top: 1rem;
}

.slider-track {
    width: 200px;
    height: 6px;
    background-color: #404040;
    border-radius: 3px;
    margin: 0 auto;
    position: relative;
}

.slider-handle {
    width: 20px;
    height: 20px;
    background-color: #ffd700;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Section Headers */
.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.section-icon {
    color: #ffd700;
    font-size: 1.5rem;
    margin-right: 1rem;
}

.section-title {
    font-size: 2rem;
    font-weight: 600;
    color: #ffd700;
    margin: 0;
    text-transform: lowercase;
}

/* Impact Grid */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.impact-card {
    background-color: #ffd700;
    color: #000000;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
}

.impact-card.key-benefits {
    background-color: #ffd700;
    color: #000000;
    text-align: left;
}

.impact-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.impact-card ul {
    margin: 0;
    padding-left: 1.5rem;
}

.impact-card li {
    margin-bottom: 0.5rem;
}

.impact-metric {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Problem Statement */
.problem-container {
    background-color: #404040;
    padding: 2rem;
    border-radius: 12px;
}

.problem-list {
    margin-bottom: 2rem;
}

.problem-list li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.problem-conclusion {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* Process Grid */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.process-card {
    background-color: #ffd700;
    color: #000000;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
}

.process-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.process-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.process-card ul {
    text-align: left;
    margin: 0;
    padding-left: 1.5rem;
}

.process-card li {
    margin-bottom: 0.5rem;
}

/* Flow Grid */
.flow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.flow-card {
    background-color: #404040;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
}

.flow-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.flow-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffd700;
}

.flow-card p {
    margin: 0;
    color: #cccccc;
}

/* Blueprint Content */
.blueprint-content p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.blueprint-diagram {
    background-color: #404040;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.swimlanes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.swimlane {
    background-color: #ffd700;
    color: #000000;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
}

.heuristics-grid {
    background-color: #404040;
    padding: 2rem;
    border-radius: 12px;
}

.ui-components {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.component {
    background-color: #ffd700;
    height: 60px;
    border-radius: 8px;
}

/* Ideation Content */
.ideation-content p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.mockup-collage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.mockup-item {
    height: 150px;
    border-radius: 12px;
}

.mockup-item.light-theme {
    background-color: #ffffff;
}

.mockup-item.dark-theme {
    background-color: #1a1a1a;
}

.mockup-item.task-management {
    background-color: #e0e0e0;
}

.mockup-item.ai-interface {
    background-color: #f0f0f0;
}

.mockup-item.notes {
    background-color: #ffd700;
}

/* Testing Content */
.testing-content p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.testing-interface {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 12px;
}

.testing-panel h4 {
    color: #000000;
    margin-top: 0;
    margin-bottom: 1rem;
}

.parameter-sliders {
    margin-bottom: 2rem;
}

.slider {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.output-area {
    background-color: #f5f5f5;
    height: 100px;
    border-radius: 8px;
    margin-bottom: 2rem;
}

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

.metric {
    background-color: #e0e0e0;
    height: 60px;
    border-radius: 8px;
}

.testing-collage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.testing-element {
    height: 100px;
    border-radius: 8px;
    background-color: #404040;
}

.testing-element.sticky-note {
    background-color: #ffd700;
}

/* Visual Design Content */
.visual-design-content {
    background-color: #404040;
    padding: 2rem;
    border-radius: 12px;
    position: relative;
}

.laptop-showcase {
    text-align: center;
    margin-bottom: 3rem;
}

.laptop-screen {
    width: 600px;
    height: 400px;
    background-color: #ffffff;
    border-radius: 12px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.screen-content {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    border-radius: 8px;
    margin: 10px;
}

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

.process-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.step-number {
    background-color: #ffd700;
    color: #000000;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content h3 {
    color: #ffd700;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.step-content h4 {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.step-content ul {
    margin: 0;
    padding-left: 1.5rem;
}

.step-content li {
    margin-bottom: 0.5rem;
    color: #cccccc;
}

.step-mockup {
    width: 200px;
    height: 150px;
    background-color: #ffffff;
    border-radius: 8px;
    position: relative;
}

.mockup-annotations {
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
}

.annotation {
    background-color: #ffd700;
    color: #000000;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.layout-mockup {
    background-color: #f0f0f0;
}

.data-mockup {
    background-color: #e0e0e0;
}

.responsive-mockup {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.device {
    border-radius: 4px;
    background-color: #ffffff;
}

.device.desktop {
    width: 80px;
    height: 50px;
}

.device.tablet {
    width: 50px;
    height: 70px;
}

.device.mobile {
    width: 30px;
    height: 50px;
}

/* Highlights and Learnings */
.highlights-content,
.learnings-content {
    background-color: #404040;
    padding: 2rem;
    border-radius: 12px;
}

.highlights-list,
.learnings-list {
    margin: 0;
    padding-left: 1.5rem;
}

.highlights-list li,
.learnings-list li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .presentation-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .impact-grid,
    .process-grid,
    .flow-grid {
        grid-template-columns: 1fr;
    }
    
    .design-process {
        grid-template-columns: 1fr;
    }
    
    .process-step {
        flex-direction: column;
        text-align: center;
    }
    
    .step-mockup {
        width: 100%;
        margin-top: 1rem;
    }
    
    .laptop-screen {
        width: 100%;
        max-width: 400px;
        height: 250px;
    }
    
    .ui-components {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   CASE STUDY FULL PAGE
   ============================================ */

.case-study-full-page {
    margin: 0;
    padding: 0;
    background-color: #000000;
    min-height: 100vh;
    position: relative;
}

.close-button {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #CFA254;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 1000;
    font-family: inherit;
    transition: all 0.3s ease;
}

.close-button:hover {
    background-color: #B89147;
    transform: translateY(-2px);
}

.close-text {
    color: #000000;
    font-weight: 600;
    font-size: 14px;
    text-transform: lowercase;
}

.close-icon {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}


.back-to-top-icon {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
}

.case-study-full-image {
    width: 100vw;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: left center;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .close-button {
        top: 15px;
        right: 15px;
        padding: 6px 12px;
    }
    
    .close-text {
        font-size: 12px;
    }
    
    .close-icon {
        font-size: 14px;
    }
    
    .back-to-top-button {
        bottom: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
    }
    
    .back-to-top-icon {
        font-size: 18px;
    }
}

/* About Button */
.about-button-container {
    display: flex;
    justify-content: center;
}

.about-button {
    background-color: var(--primary-black);
    color: var(--text-white);
    padding: 1rem 2rem;
    border: 1px solid var(--text-white);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.about-button:hover {
    background-color: var(--accent-yellow);
    color: var(--primary-black);
    border-color: var(--accent-yellow);
}

/* ============================================
   RESPONSIVE DESIGN (Mobile Styles)
   ============================================ */

/* 
  MEDIA QUERIES adjust styles based on screen size.
  max-width: 768px means "apply these styles when screen is 768px or smaller".
  This is how we make websites responsive!
*/

@media screen and (max-width: 768px) {
    /* Tablet and below */
    
    .nav-menu {
        position: fixed;
        left: -100%;  
        top: 70px;
        flex-direction: column;
        background-color: var(--primary-black);  /* Dark background for mobile menu */
        width: 100%;
        text-align: center;
        transition: 0.3s;
        padding: var(--spacing-sm);
        border-top: 1px solid var(--border-gray);
    }
    
    /* Mobile menu links should be white text */
    .nav-menu .nav-link {
        color: var(--text-white) !important;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .hamburger {
        display: flex;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        text-align: left;  /* Left align on mobile */
    }
    
    .hero-title {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;  /* Reduced spacing to match about me */
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;  /* Reduced spacing to match about me */
    }
    
    .hero-quote {
        margin-bottom: 0.5rem;  /* Reduced spacing to match about me */
    }
    
    .about-content {
        grid-template-columns: 1fr;
        text-align: left;  /* Left align on mobile */
    }
    
    .about-title {
        font-size: 2.5rem;
    }
    
    .work-images-gallery {
        grid-template-columns: 1fr;
        max-width: 400px;  /* Much smaller cards on mobile */
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 480px) {
    /* Mobile phones */
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
    }
    
    .about-title {
        font-size: 2rem;
    }
    
    .hero-skills {
        justify-content: flex-start;  /* Left align skills on mobile */
    }
    
    .skills-grid {
        justify-content: flex-start;  /* Left align skills on mobile */
    }
    
    /* Temporarily show floating icons on mobile for debugging */
    .floating-icons {
        display: block;
    }
}

/* ============================================
   SMOOTH SCROLLING
   ============================================ */

html {
    scroll-behavior: smooth;
    /* 
      Makes anchor links scroll smoothly
      instead of jumping instantly. Simple but effective!
    */
}

/* ============================================
   PROJECT PAGES
   ============================================ */

/* Project Header */
.project-header {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 100px;
    overflow: hidden;
}

.project-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    z-index: 1;
}

.header-illustration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    z-index: 2;
}

/* Mountain Range */
.mountain-range {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, #2c3e50 0%, transparent 100%);
    clip-path: polygon(0% 100%, 0% 60%, 20% 40%, 40% 50%, 60% 30%, 80% 45%, 100% 35%, 100% 100%);
}

/* Wind Turbines */
.wind-turbines {
    position: absolute;
    bottom: 150px;
    left: 20%;
    width: 60px;
    height: 80px;
}

.wind-turbines::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 60px;
    background-color: var(--text-white);
    left: 50%;
    transform: translateX(-50%);
}

.wind-turbines::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border: 2px solid var(--text-white);
    border-radius: 50%;
    background: conic-gradient(var(--text-white) 0deg, transparent 0deg);
}

/* Buildings */
.buildings {
    position: absolute;
    bottom: 0;
    right: 20%;
    width: 100px;
    height: 150px;
    background: linear-gradient(to top, #34495e 0%, #2c3e50 100%);
    clip-path: polygon(0% 100%, 0% 40%, 20% 30%, 40% 50%, 60% 20%, 80% 35%, 100% 25%, 100% 100%);
}

/* AI Header Specific */
.ai-header .header-illustration {
    opacity: 0.2;
}

.clouds-bg {
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    height: 200px;
}

.cloud {
    position: absolute;
    background-color: var(--text-white);
    border-radius: 50px;
    opacity: 0.3;
}

.cloud-1 {
    width: 80px;
    height: 40px;
    top: 20%;
    left: 10%;
    animation: float 6s ease-in-out infinite;
}

.cloud-2 {
    width: 60px;
    height: 30px;
    top: 40%;
    right: 20%;
    animation: float 8s ease-in-out infinite reverse;
}

.cloud-3 {
    width: 100px;
    height: 50px;
    top: 60%;
    left: 30%;
    animation: float 7s ease-in-out infinite;
}

.stars-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    font-size: 2rem;
    opacity: 0.4;
    animation: twinkle 3s ease-in-out infinite;
}

.star-1 {
    top: 15%;
    left: 15%;
    animation-delay: 0s;
}

.star-2 {
    top: 25%;
    right: 25%;
    animation-delay: 1s;
}

.star-3 {
    top: 45%;
    left: 60%;
    animation-delay: 2s;
}

/* Project Header Content */
.project-header-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--text-white);
}

.project-icon {
    margin-bottom: var(--spacing-md);
}

.icon-circle {
    width: 80px;
    height: 80px;
    background-color: var(--accent-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    animation: pulse 2s ease-in-out infinite;
}

.leaf-icon-small {
    width: 40px;
    height: 40px;
    background-color: var(--primary-black);
    border-radius: 0 50% 0 50%;
    position: relative;
}

.leaf-icon-small::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20%;
    width: 60%;
    height: 2px;
    background-color: var(--primary-black);
    transform: translateY(-50%);
}

.ai-icon .ai-symbol {
    font-size: 2rem;
    color: var(--primary-black);
}

.project-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    animation: slideInUp 1s ease-out;
}

.project-progress {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
}

.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transition: var(--transition);
}

.progress-dot.active {
    background-color: var(--accent-yellow);
    transform: scale(1.2);
}

/* Project Content */
.project-content {
    padding: var(--spacing-xl) 0;
    background-color: var(--primary-black);
}

.content-section {
    margin-bottom: var(--spacing-xl);
    padding: 0 var(--spacing-md);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--accent-yellow);
}

/* Problem Statement */
.problem-content {
    max-width: 800px;
    margin: 0 auto;
}

.problem-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-gray);
    text-align: center;
}

/* Impact Grid */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto;
}

.impact-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    text-align: center;
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.impact-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-yellow);
    box-shadow: 0 10px 30px rgba(233, 191, 78, 0.2);
}

.impact-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

.impact-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-yellow);
    margin-bottom: var(--spacing-xs);
}

.impact-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: var(--spacing-xs);
}

.impact-description {
    color: var(--text-gray);
    font-size: 0.9rem;
}

/* Process Diagram */
.process-diagram {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.process-stage {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    text-align: center;
    transition: var(--transition);
    position: relative;
    animation: fadeInUp 0.6s ease-out;
}

.process-stage:hover {
    transform: translateY(-5px);
    border-color: var(--accent-yellow);
}

.stage-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.process-stage h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: var(--spacing-xs);
}

.process-stage p {
    color: var(--text-gray);
    font-size: 0.9rem;
}

/* Role Cards */
.role-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto;
}

.role-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.role-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-yellow);
}

.role-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: var(--spacing-sm);
}

.role-card ul {
    list-style: none;
    padding: 0;
}

.role-card li {
    color: var(--text-gray);
    margin-bottom: var(--spacing-xs);
    padding-left: var(--spacing-sm);
    position: relative;
}

.role-card li::before {
    content: '•';
    color: var(--accent-yellow);
    position: absolute;
    left: 0;
}

/* Workshop Image */
.workshop-image {
    text-align: center;
    margin: var(--spacing-lg) 0;
}

.workshop-photo {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
}

.workshop-photo:hover {
    transform: scale(1.02);
}

/* Ecosystem Diagram */
.ecosystem-diagram {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    height: 400px;
    background: radial-gradient(circle at center, rgba(233, 191, 78, 0.1) 0%, transparent 70%);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.persona-circles {
    position: relative;
    width: 100%;
    height: 100%;
}

.persona-circle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--accent-yellow);
    border-radius: 50%;
    padding: var(--spacing-sm);
    text-align: center;
    transition: var(--transition);
    animation: float 4s ease-in-out infinite;
}

.persona-circle:hover {
    transform: scale(1.1);
    background-color: rgba(233, 191, 78, 0.2);
}

.persona-1 {
    top: 20%;
    left: 20%;
    width: 120px;
    height: 120px;
    animation-delay: 0s;
}

.persona-2 {
    top: 20%;
    right: 20%;
    width: 120px;
    height: 120px;
    animation-delay: 1s;
}

.persona-3 {
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    animation-delay: 2s;
}

.persona-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-xs);
}

.persona-info h4 {
    color: var(--text-white);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
}

.persona-info p {
    color: var(--text-gray);
    font-size: 0.8rem;
}

.ecosystem-trees {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tree {
    position: absolute;
    font-size: 2rem;
    opacity: 0.3;
    animation: sway 3s ease-in-out infinite;
}

.tree-1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.tree-2 {
    bottom: 10%;
    right: 10%;
    animation-delay: 1.5s;
}

/* Interface Grid */
.interface-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
}

.interface-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.interface-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.interface-image {
    width: 100%;
    height: auto;
    transition: var(--transition);
}

.interface-item:hover .interface-image {
    transform: scale(1.05);
}

/* Testing Results */
.testing-results {
    max-width: 800px;
    margin: 0 auto;
}

.results-table {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.results-table table {
    width: 100%;
    border-collapse: collapse;
}

.results-table th,
.results-table td {
    padding: var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.results-table th {
    background-color: rgba(233, 191, 78, 0.2);
    color: var(--text-white);
    font-weight: 600;
}

.results-table td {
    color: var(--text-gray);
}

.results-table tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Details Grid */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto;
}

.detail-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.detail-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.detail-image {
    width: 100%;
    height: auto;
    transition: var(--transition);
}

.detail-item:hover .detail-image {
    transform: scale(1.05);
}

/* Audit Content */
.audit-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto;
}

.audit-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.audit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.audit-image {
    width: 100%;
    height: auto;
    transition: var(--transition);
}

.audit-item:hover .audit-image {
    transform: scale(1.05);
}

/* AI Specific Styles */
.ai-impact .impact-card {
    background: linear-gradient(135deg, rgba(233, 191, 78, 0.1) 0%, rgba(233, 191, 78, 0.05) 100%);
    border-color: rgba(233, 191, 78, 0.3);
}

.problem-list {
    max-width: 800px;
    margin: 0 auto;
}

.problem-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.problem-item:hover {
    background-color: rgba(233, 191, 78, 0.1);
    transform: translateX(10px);
}

.problem-icon {
    font-size: 1.5rem;
    margin-right: var(--spacing-sm);
    color: var(--accent-yellow);
}

.problem-item p {
    color: var(--text-gray);
    margin: 0;
    line-height: 1.6;
}

.design-question {
    background: linear-gradient(135deg, rgba(233, 191, 78, 0.1) 0%, rgba(233, 191, 78, 0.05) 100%);
    border: 1px solid rgba(233, 191, 78, 0.3);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    text-align: center;
}

.design-question h3 {
    color: var(--accent-yellow);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.design-question p {
    color: var(--text-white);
    font-size: 1.125rem;
    line-height: 1.6;
    font-style: italic;
}

.process-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto;
}

.process-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    text-align: center;
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.process-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-yellow);
    box-shadow: 0 10px 30px rgba(233, 191, 78, 0.2);
}

.process-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

.process-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: var(--spacing-xs);
}

.process-card p {
    color: var(--text-gray);
    font-size: 0.9rem;
}

.flow-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    max-width: 1000px;
    margin: 0 auto;
}

.flow-card {
    background-color: var(--primary-black);
    border: 1px solid var(--text-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    text-align: center;
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.flow-card:hover {
    border-color: var(--accent-yellow);
    transform: translateY(-5px);
}

.flow-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.flow-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: var(--spacing-xs);
}

.flow-card p {
    color: var(--text-gray);
    font-size: 0.9rem;
}

.blueprint-content {
    max-width: 1000px;
    margin: 0 auto;
}

.blueprint-text {
    color: var(--text-gray);
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.blueprint-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
}

.blueprint-image:hover {
    transform: scale(1.02);
}

.ideation-content {
    max-width: 1000px;
    margin: 0 auto;
}

.ideation-text {
    color: var(--text-gray);
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.ideation-screens {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.screen-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.screen-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.screen-image:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.testing-content {
    max-width: 1000px;
    margin: 0 auto;
}

.testing-text {
    color: var(--text-gray);
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.testing-screens {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.testing-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.testing-image:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.visual-design {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.visual-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.visual-image:hover {
    transform: scale(1.02);
}

.solution-list,
.learnings-list {
    max-width: 800px;
    margin: 0 auto;
}

.solution-item,
.learning-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    transition: var(--transition);
    animation: fadeInUp 0.6s ease-out;
}

.solution-item:hover,
.learning-item:hover {
    background-color: rgba(233, 191, 78, 0.1);
    transform: translateX(10px);
}

.solution-icon,
.learning-icon {
    font-size: 1.5rem;
    margin-right: var(--spacing-sm);
    color: var(--accent-yellow);
}

.solution-item p,
.learning-item p {
    color: var(--text-gray);
    margin: 0;
    line-height: 1.6;
}

/* Back to Work Button */
.back-to-work {
    text-align: center;
    padding: var(--spacing-xl) 0;
    background-color: var(--primary-black);
}

.back-button {
    display: inline-block;
    background-color: transparent;
    color: var(--text-white);
    padding: 1rem 2rem;
    border: 1px solid var(--text-white);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition);
}

.back-button:hover {
    background-color: var(--accent-yellow);
    color: var(--primary-black);
    border-color: var(--accent-yellow);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(233, 191, 78, 0.3);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpFromBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDownFromTop {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

@keyframes sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(2deg);
    }
    75% {
        transform: rotate(-2deg);
    }
}

/* ============================================
   CLEAN HAMBURGER MENU DESIGN
   ============================================ */

/* --- base reset for this control --- */
.sr-only{position:absolute;left:-9999px}

/* ============================================
   HEADER BAR + HAIRLINE
   ============================================ */

/* Color tokens for light/dark pages */
:root{ --bg:#fff; --fg:#111; }
.dark  { --bg:#0f0f10; --fg:#f3f3f3; }

/* Desktop */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 24px;
  padding: 18px 28px; background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.site-nav { margin-left: auto; display: flex; gap: 28px; }
.site-nav a { text-decoration: none; color: var(--fg); }
.site-nav a.active { font-weight: 600; }
/* Brand / site-name (top-left) - Enhanced typography */
.brand { 
  font-style: normal !important;  /* never italicize */
  font-weight:600; 
  letter-spacing:.2px; 
  color: var(--fg); 
  text-decoration:none; 
}

/* Brand prefix: "the." - NOT italic, lighter weight */
.brand__prefix { 
  font-style: normal;  /* NOT italic */
  font-weight: 600; 
  opacity: 1; 
}

/* Default (mobile-first) */
.nav-pill { display: none; } /* remove !important so media rules can override */
.nav-drawer { display: none !important; }
.nav-inline { display: none; } /* hide inline links by default on mobile */

/* MOBILE ONLY (≤800px) ---------------------------------------------- */
@media (max-width:800px){
  .site-nav { display:none; }
  
  /* show the pill */
  .nav-pill{
    display: inline-flex !important; /* mobile uses pill */
    align-items: center; gap: 12px;
    padding: 10px 16px; border-radius: 999px;
    border: 2px solid currentColor; background: transparent; color: var(--fg);
    cursor: pointer; margin-left: auto;
  }
  .pill-text { font-weight: 600; font-size: 0.875rem; }
  .nav-inline { display: none !important; }
}

/* Desktop: inline links only, hide pill */
@media (min-width:801px){
  .nav-pill{ display: none !important; }   /* hide the button */
  .nav-inline{ display: flex !important; gap: 40px; align-items: center; }
  .site-header .nav-wrap{ margin-left:auto; display:flex; align-items:center; gap:12px; }
}

  /* drawer is hidden by default … */
  .nav-drawer{
    position: fixed !important;          /* fixed positioning to prevent overlap */
    right: 12px; top: 60px;              /* adjusted positioning */
    min-width: 130px;                    /* slightly larger for text visibility */
    max-width: 150px;                     /* slightly larger max width */
    padding: 10px;                       /* slightly more padding */
    border-radius: 8px;                  /* smaller radius */
    border: 1px solid #ccc;
    background: white;                    /* white fill as requested */
    display: none !important;            /* important: keeps it off until open */
    flex-direction: column; gap: 8px;    /* slightly more gap */
    z-index: 999999 !important;           /* extremely high z-index */
    box-shadow: 0 4px 20px rgba(0,0,0,0.4); /* stronger shadow */
    opacity: 0;                          /* start invisible */
    transform: translateY(-10px);        /* slight upward offset */
    transition: opacity 0.2s ease, transform 0.2s ease; /* smooth animation */
    visibility: hidden;                   /* ensure completely hidden */
    pointer-events: none;                /* prevent interaction when hidden */
    isolation: isolate;                  /* create new stacking context */
    contain: layout style paint;         /* CSS containment for better isolation */
  }
  
  /* Ensure the menu button is separate from the menu */
  .nav-pill {
    position: relative !important;
    z-index: 1000000 !important;        /* higher than menu */
    background: transparent !important;   /* no background */
    border: 2px solid currentColor !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    margin-left: auto !important;
  }
  .nav-drawer a{ 
    color: #333 !important; 
    text-decoration:none; 
    font-size: 12px;                      /* slightly larger for visibility */
    font-weight: 500; 
    padding: 4px 6px;                     /* slightly more padding */
    border-radius: 3px;                   /* smaller radius */
    transition: background-color 0.2s ease;
    white-space: nowrap;                  /* prevent text wrapping */
    line-height: 1.2;                     /* better line height */
    display: block;                       /* ensure proper display */
  }
  .nav-drawer a:hover {
    background-color: #f5f5f5;
  }
  
  /* Show when not hidden */
  .nav-drawer:not([hidden]){ 
    display: flex !important; 
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;      /* enable interaction when visible */
  }
  
  /* Ensure no nesting or duplication */
  .nav-drawer * {
    box-sizing: border-box;
  }
  
  /* Prevent any button nesting issues */
  .nav-drawer button {
    display: none !important;
  }
  
  /* Ensure close button is separate from menu content */
  .nav-drawer .close-btn,
  .nav-drawer .close-button,
  .nav-drawer [class*="close"] {
    display: none !important;
  }

  /* menu ↔ close anim on the pill */
  .pill-icon{ 
    width:22px; height:14px; position:relative; display:inline-block; 
    margin-left: 8px;
  }
  
  /* Hamburger icon (3 lines) */
  .pill-icon::before,
  .pill-icon::after {
    content:""; 
    position:absolute; 
    left:0; 
    right:0; 
    height:2px;
    background: currentColor; 
    border-radius:2px; 
    transition:.25s;
  }
  
  /* Top line */
  .pill-icon::before{ 
    top:2px; 
  } 
  
  /* Bottom line */
  .pill-icon::after{ 
    bottom:2px; 
  }
  
  /* Middle line using box-shadow */
  .pill-icon {
    box-shadow: 0 6px 0 currentColor;
  }
  
  /* Close animation - X shape */
  .nav-pill[aria-expanded="true"] .pill-icon::before{ 
    top:6px; 
    transform:rotate(45deg); 
  }
  .nav-pill[aria-expanded="true"] .pill-icon::after { 
    bottom:6px; 
    transform:rotate(-45deg); 
  }
  .nav-pill[aria-expanded="true"] .pill-icon {
    box-shadow: none;
  }
}

/* Old navigation styles removed - using new pill navigation */

/* Desktop nav hidden on small screens */
.nav-desktop{display:none; gap:24px}
.nav-desktop a{color:#000000; text-decoration:none}
.nav-desktop a.active{color:#E2B669; font-weight:700}
.nav-desktop a[aria-current="page"]{ color:#F2D07E; font-weight:700; }
@media (min-width: 900px){
  .nav-desktop{display:flex}
}

/* --- Hamburger pill --- */
.hamburger{
  appearance:none; border:2px solid #e0e0e0; background:#ffffff; color:#000000;
  padding:12px 18px; border-radius:999px; display:flex; gap:16px; align-items:center;
  font-weight:700; cursor:pointer;
}
.hamburger__icon{
  width:28px; height:2px; background:#000000; position:relative; display:block;
}
.hamburger__icon::before,
.hamburger__icon::after{
  content:""; position:absolute; left:0; width:28px; height:2px; background:#000000;
}
.hamburger__icon::before{ top:-7px }
.hamburger__icon::after { top: 7px }

/* --- Mobile Menu Panel --- */
.mobile-menu{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.mobile-menu.is-open{ opacity:1; pointer-events:auto }
.mobile-menu__inner{
  position:fixed; right:16px; top:16px; left:auto;
  display:flex; flex-direction:column; gap:12px;
}

/* Close pill */
.mobile-menu__close{
  appearance:none; border:2px solid #1f1f1f; background:#16181a; color:#eaeef2;
  padding:14px 20px; border-radius:999px; display:flex; align-items:center; gap:18px;
  font-weight:800; align-self:flex-end; cursor:pointer;
}
.close__icon{font-size:28px; line-height:1; margin-top:-2px}

/* Rounded menu list container */
.mobile-menu__nav{
  background:#16181a; border:2px solid #1f1f1f; border-radius:28px;
  padding:18px 24px; width:min(80vw, 320px); align-self:flex-end;
}
.mobile-menu__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:28px}
.mobile-menu__list a{
  text-decoration:none; color:#eaeef2; font-weight:800; font-size:24px;
}
.mobile-menu__list a.active{
  color:#E2B669; font-weight:800;
}

/* Hide mobile button on desktop if you keep desktop nav */
@media (min-width:900px){
  .hamburger{display:none}
  .mobile-menu{display:none}
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .mobile-menu{transition:none}
}


/* ============================================
   HOMEPAGE HERO SECTION
   ============================================ */

/* Wrapper for content */
.wrap { width: var(--wrap, min(1100px, 92vw)); margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }

/* Hero Layout */
.hero { padding-block: clamp(40px, 6vw, 88px); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.hero__title { margin: 0 0 .25em; font-size: clamp(40px, 8vw, 112px); line-height: .92; }
.hero__strap { margin: 0 0 12px; font-weight: 500; }
.hero__lead { margin: 0 0 18px; max-width: 58ch; opacity: .9; }

.hero__tags {
  display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 0; margin: 10px 0 0; list-style: none;
}
.hero__tags li {
  padding: 6px 12px; border: 1px solid rgba(0,0,0,.15); border-radius: 999px; font-size: .9rem;
}

/* Right-side image block */
.hero__art { margin: 0; display: block; min-height: clamp(220px, 32vw, 520px); }
.hero__art img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 24px; }

@media (max-width: 960px){
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: 2; }        /* text first on mobile */
}

/* ============================================
   WORK PAGE CARDS (tall, elegant design)
   ============================================ */

/* Layout: three-up grid, collapses cleanly on smaller viewports */
.work-wrap { 
  padding: clamp(24px, 6vw, 64px) 0; 
}

/* Work cards grid - data-driven proper sizing */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 358px);
  gap: 32px;
  justify-content: center;
  margin: 80px auto 60px;
  padding: 0;
}

.work-card {
  position: relative;
  display: block;
  width: 358px;
  height: 653px;
  border-radius: 40px;
  outline: 1.2px solid #fff;
  overflow: hidden;                 /* prevents neighbors from overlapping */
  text-decoration: none;
  z-index: 1;
  will-change: transform;
  transform: translateZ(0);
}

.work-card__img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Fallback gradient so card is visible even if img path is wrong */
  background-image: radial-gradient(transparent, rgba(255,255,255,.06));
}

.work-card__title {
  position: absolute;
  left: 20px;
  top: 16px;
  font-size: 4px !important;
  font-weight: 700;
  color: #000000;
  line-height: 1.15;
  text-shadow: none;
  z-index: 3;
}

/* Hover gradient cue */
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .2s ease;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
  z-index: 2;
}

.work-card:hover::after {
  opacity: 1;
}

.work-card:hover {
  outline-color: #fff;
}

/* Ensure middle card is visible */
.work-card:nth-child(2) {
  z-index: 2;
}


/* Responsive work grid */
@media (max-width: 1200px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 800px;
  }
  
  .work-card {
    width: 100%;
    max-width: 358px;
    height: 500px;
  }
}

@media (max-width: 768px) {
  .work-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 400px;
  }
  
  .work-card {
    width: 100%;
    height: 400px;
  }
}

.work-card:hover img { 
  transform: scale(1.02); 
  filter: brightness(1); 
}

.work-card:hover::before,
.work-card:focus-visible::before {
  box-shadow: 0 0 0 var(--card-stroke-width) var(--card-stroke-hover) inset;
}

/* Hover pill CTA (scaled back up a bit from the tiny version) */
.card-cta {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  background: rgba(0,0,0,.75);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.work-card:hover .card-cta { 
  opacity: 1; 
  transform: translateY(0); 
}
.card-cta:hover { 
  background: rgba(0,0,0,.9); 
}

/* Responsive: flexbox wraps naturally */
@media (max-width: 520px) {
  .work-card { 
    width: min(68vw, 196px);              /* slightly larger on very small phones */
  }
}

/* Remove any accidental title overlays */
.work-card .work-title { 
  display: none !important; 
}

/* Optional: light theme variant (if cards ever appear on light backgrounds) */
.light {
  --card-stroke: rgba(0,0,0,.22);
  --card-stroke-hover: rgba(0,0,0,.34);
}

/* ============================================
   PAGE NAVIGATION BUTTONS (ABOUT ME / WORK)
   ============================================ */

/* default placement */
.page-puck{ 
  position:absolute; 
  left:50%; 
  transform:translateX(-50%); 
  bottom:40px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* make sure parent sections are positioned */
.hero{ position: relative; }
.about-page{ position: relative; }
.work-page{ position: relative; }

/* Work page: "about me" button 30% lower (more space above) */
.page--work .page-cta,
.page--work .jump-to-about { margin-top: 30%; }

/* About page: "work" button 30% higher */
.page--about .page-cta,
.page--about .jump-to-work { margin-top: -30%; }

/* Responsive: less aggressive on mobile */
@media (max-width:800px){
  .page--work .page-cta,
  .page--work .jump-to-about  { margin-top: 18%; }
  .page--about .page-cta,
  .page--about .jump-to-work { margin-top: -18%; }
}

/* ============================================
   ABOUT PAGE - TRIM PADDING TO PREVENT SCROLL
   ============================================ */

/* general page padding for About */
.about-page main{ padding-block: 40px; }             /* top+bottom on desktop */
@media (max-width:800px){
  .about-page main{ padding-block: 24px; }           /* tighter on mobile */
}

/* tighten the bottom area so it fits without the tiny scroll */
.about-page .page-cta{ margin-top: 20px; margin-bottom: 16px; }

/* if any old "pull up/push down" rules exist, neutralize them */
.about-page .page-cta { translate: none; }           /* in case we used transform earlier */
.about-page [data-spacer]{ height: 0 !important; }   /* if a spacer div was used */

/* ============================================
   01–04 TIMELINE SPACING TIGHTEN
   ============================================ */

/* 01–04 timeline spacing tighten */
.timeline { margin-top: 48px; } /* was larger */
.timeline .step { margin-block: 56px; } /* halve previous margin (e.g. from 112px) */
.timeline .step-inner { gap: 16px; } /* condense within a step */

/* 01–04 block spacing (tighten ~50%) */
.case-steps { gap: clamp(24px, 3vw, 40px); }          /* wrapper grid/flex */
.case-step  { margin-block: clamp(16px, 2vw, 32px); } /* each step pair */

/* ensure headline + numbers closer to their content */
.step-num { margin-bottom: 8px; }

/* gradient numbers 01–04 */
.step-num {
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg,#D9D7FF 0%, #B59B6B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}

/* 🔪 remove any glow */
.bg-glow, .glow, .glow-trail { display:none !important; }

/* kill any residual glow elements */
.section-glow,
.gradient-glow,
.glow,
.step::before,
.step::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* process cards facelift */
#process .cards,
#process .process-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.process-card,
.proc-card {
  border-radius: 18px;
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,0.06); /* subtle, NOT yellow */
  padding: 22px 22px 20px;
  outline: none !important;
  box-shadow: none !important;
}
.process-icon img { width: 40px; height: 40px; display: block; }
.process-card h3 {
  color: #e8c06b; /* same yellow as impact headings */
  font-weight: 700;
  margin: 14px 0 10px;
}
.process-card ul { margin: 0; padding-left: 18px; }
@media (max-width: 1024px) {
  #process .cards,
  #process .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  #process .cards,
  #process .process-grid { grid-template-columns: 1fr; }
}

/* Hamburger pill menu */
.pill{border:1.5px solid #1a1a1a;border-radius:999px;padding:10px 16px;display:inline-flex;gap:10px;align-items:center;background:transparent}
.sheet{position:fixed;right:16px;top:16px;background:rgba(18,18,18,.92);border:1px solid #2a2a2a;border-radius:24px;padding:18px;backdrop-filter:blur(8px);z-index:1000}
.sheet-list{list-style:none;margin:10px 0 0;padding:0}
.sheet-list a{display:block;font-weight:700;font-size:20px;padding:12px 8px}

@media (min-width: 900px) {
  .pill, .sheet { display: none; }
}

/* ============================================
   PAGE WIPE TRANSITION
   ============================================ */

/* Theme rules moved to top of file (line ~95) */

/* page wipe overlay (starts collapsed) */
#wipe{
  position: fixed; inset: auto 0 0 0; height: 2px;
  background: #0e0e10;                /* black line */
  z-index: 9999; transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .35s ease-in;
  pointer-events: none;                /* never block clicks if it misbehaves */
}
/* when navigating away */
#wipe.wipe--show{ transform: scaleY(1); height: 100vh; }
/* when page entered (reverse anim) */
#wipe.wipe--hide{ transform: scaleY(0); height: 2px; transition: transform .45s ease-out .1s; }

/* Home special case: line grows from TOP (optional) */
.home #wipe{ top:0; bottom:auto; transform-origin: top; }

/* ============================================
   FLOATING HERO ICONS
   ============================================ */
/* Removed - will be added back later with new implementation */

/* Case study header vertical rhythm */
.header-banner { padding-bottom: 12px; }         /* space under banner art */
.case-subtitle { margin-top: 24px; }             /* "CASE STUDY" */
.case-title    { margin-top: 12px; }             /* title 12px under subtitle */
.header-divider{ margin-top: 12px; }             /* line 12px under title */
#impact        { margin-top: 18px; }             /* tighter start for Impact */

/* ============================================
   RESPONSIVE DESIGN FOR PROJECT PAGES
   ============================================ */

@media screen and (max-width: 768px) {
    .project-title {
        font-size: 2.5rem;
    }
    
    /* 01-04 timeline mobile adjustments */
    .timeline .step { 
        margin-block: 36px;     /* even tighter on mobile */
    }
    .timeline .step-inner {
        display: grid;
        grid-template-areas:
            "num"
            "text"
            "media";
        gap: 12px;
    }
    .timeline .step-num { grid-area: num; }
    .timeline .step-text { grid-area: text; }
    .timeline .step-media { grid-area: media; }

    /* cards under "Meeting summary experience flow" */
    .flow-row { gap: 16px; }
    .flow-card { padding: 16px 18px; }
    .flow-card h3 { margin-top: 8px; margin-bottom: 6px; }
    .flow-card p { margin: 0; }
    
    /* mobile: text above image for steps */
    .case-steps { display: grid; gap: 20px; }
    .case-step  { display: grid; gap: 12px; }
    .case-step .step-copy { order: 1; }
    .case-step .step-visual { order: 2; }
    .proc-card   { padding: 16px 14px; }
    .proc-card h3 { margin-bottom: 8px; }
    .proc-card li { margin: 4px 0; }
    
    .section-title {
        font-size: 2rem;
    }
    
    .impact-grid,
    .process-diagram,
    .role-cards,
    .process-cards,
    .flow-cards {
        grid-template-columns: 1fr;
    }
    
    .interface-grid,
    .details-grid,
    .audit-content {
        grid-template-columns: 1fr;
    }
    
    .screen-row {
        grid-template-columns: 1fr;
    }
    
    .testing-screens {
        grid-template-columns: 1fr;
    }
    
    .ecosystem-diagram {
        height: 300px;
    }
    
    .persona-circle {
        width: 100px;
        height: 100px;
    }
    
    .persona-info h4 {
        font-size: 0.8rem;
    }
    
    .persona-info p {
        font-size: 0.7rem;
    }
}

@media screen and (max-width: 480px) {
    .project-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .impact-card,
    .process-stage,
    .role-card,
    .process-card,
    .flow-card {
        padding: var(--spacing-sm);
    }
    
    .ecosystem-diagram {
        height: 250px;
    }
    
    .persona-circle {
        width: 80px;
        height: 80px;
        padding: var(--spacing-xs);
    }
}

/* 
  CONGRATULATIONS! You've learned:
  - CSS basics (selectors, properties, values)
  - Box model (margin, padding, border)
  - Positioning (relative, absolute, fixed)
  - Flexbox layout
  - Grid layout
  - Transitions and animations
  - Responsive design with media queries
  - CSS variables
  - Pseudo-classes (:hover, :focus)
  - Pseudo-elements (::before, ::after)
  
  These are the fundamentals of modern CSS!
  
  NEXT STEPS TO CUSTOMIZE:
  1. Add your actual images
  2. Adjust colors in the :root variables
  3. Modify spacing to your preference
  4. Add more interactive effects
  5. Experiment and have fun!
*/

/* ============================================
   HOME PAGE VISIBILITY FIX (PERMANENT)
   ============================================ */

/* Ensure home page (with .home class) always has white background */
body.home,
body.theme-light {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Only apply white background to html if NOT on sustainability page */
html:not(.theme--sustainability) {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Hide any overlay elements that might cover content */
#wipe, #page-wipe, #route-wipe, #route-overlay,
.page-wipe, .route-wipe, .route-overlay, .transition-mask, .wipe-overlay {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure body is never locked during transitions */
body.is-transitioning { 
  overflow: auto !important; 
}

/* ============================================
   SCALING SUSTAINABILITY THEME (TEAL/NAVY)
   ============================================ */

/* ==== THEME TOKENS ======================================================= */
:root {
  --radius-pill: 999px;

  /* defaults (dark) – used as a safety when no class is present */
  --bg: #0A0A0A;
  --text: #FFFFFF;
  --muted: #B9C0C5;
  --edge: rgba(255,255,255,.14);
  --brand-accent: #FFE08A;           /* for small accents if needed */
  --pill-edge: #FFFFFF;
  --sheet-bg: rgba(10,10,10,.98);
}

/* Home (white) */
body.theme-light {
  --bg: #FFFFFF;
  --text: #000000;
  --muted: #333845;
  --edge: rgba(0,0,0,.12);
  --pill-edge: #000;                   /* pill outline */
  --sheet-bg: #FFFFFF;                 /* dropdown bg */
}

/* About & Work (black) */
body.theme-dark {
  --bg: #0A0A0A;                       /* or your preferred black */
  --text: #FFFFFF;
  --muted: #B9C0C5;
  --edge: rgba(255,255,255,.14);
  --pill-edge: #FFFFFF;
  --sheet-bg: rgba(10,10,10,.98);
}

/* Scaling Sustainability (blue) */
body.theme-blue {
  --bg: #001034;
  --text: #E7F9F6;
  --muted: #9BE7DE;
  --edge: rgba(155,231,222,.35);
  --pill-edge: #9BE7DE;
  --sheet-bg: rgba(0,16,52,.96);
}

/* ==== GLOBAL APPLICATION OF TOKENS ====================================== */
html, body {
  background: var(--bg);
  color: var(--text);
}
.site-header .brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
.nav-links a {
  color: var(--text);
}
hr, .rule, .card {
  border-color: var(--edge);
}

.menu-pill {
  border: 1.5px solid var(--pill-edge);
  color: var(--text);
  background: transparent;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  cursor: pointer;
}
.menu-sheet {
  background: var(--sheet-bg);
  border: 1px solid var(--edge);
  border-radius: 22px;
  padding: 18px 20px;
}
.menu-sheet[hidden] {
  display: none !important;
}
.menu-sheet a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

/* 1) Page wrapper: fixed width, centered, no stray offsets */
.cs-wrap {
  max-width: 1120px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
}

/* Hard reset: nothing should be right-aligned by accident */
.cs-wrap,
.cs-wrap * {
  text-align: left !important;
}

/* 2) Nuke accidental page shifts coming from global/layout wrappers */
body, main, .page, .case-page, .case-inner, .cs-section {
  margin-left: 0 !important;
  padding-left: 0 !important;     /* we re-add 24px on .cs-wrap only */
}

/* Navbar standardization */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
}
.nav {
  max-width: 1200px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 20px;
}
.brand {
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
}
.nav-links {
  display: flex;
  gap: 28px;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* pill */
.menu-pill {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid #9BE7DE;
  background: transparent;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.menu-pill .icon {
  font-weight: 900;
}

/* sheet (dropdown) */
.menu-sheet[hidden] {
  display: none !important; /* <-- prevents the always-on box */
}
.menu-sheet {
  position: absolute;
  right: 20px;
  top: 72px;
  background: rgba(0,16,52,.96);
  border: 1px solid #2b6b66;
  border-radius: 22px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.menu-sheet a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* responsive */
@media (max-width: 800px) {
  .nav-links {
    display: none;
  }
  .menu-pill {
    display: flex;
  }
}

/* Pill buttons (close/back + scroll-to-top) */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--pill-edge);
  color: var(--text);
  background: transparent;
  font-weight: 700;
  text-decoration: none;
  transition: transform .16s ease, background .16s ease;
  cursor: pointer;
}
.pill-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
}

/* placement */
.close-btn {
  position: relative;
  z-index: 10;
  margin: 16px 0 0 0;
}
.to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 999;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  display: none; /* hidden until scrolled */
}
.back-to-top {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.back-to-top img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
button#scrollTop,
button#scrollTop img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* SPECIAL OUTLINE for Scaling Sustainability close button */
body.theme-blue .close-btn {
  border-color: #39CDD8;
}

/* Legacy back-pill support */
.back-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--pill-edge);
  color: var(--text);
  background: transparent;
  font-weight: 700;
  text-decoration: none;
  transition: transform .16s ease, background .16s ease;
}
.back-pill:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
}

/* Roles section styling */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.roles-block {
  margin: 96px auto 60px;
}

.roles-block h2 {
  font-size: 42px;
  margin: 0 0 28px;
  color: var(--muted);
}

.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.role-card {
  border: 1px solid var(--edge);
  border-radius: 18px;
  padding: 28px;
  background: rgba(255,255,255,.02);
}

.role-card h3 {
  margin: 0 0 16px;
  letter-spacing: .2px;
  color: var(--muted);
}

.role-card ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.role-card li {
  color: var(--text);
}

@media (max-width: 980px) {
  .roles-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* --- Case study spacing tighten --- */
.case-study .section { 
  padding: 56px 0; 
}               
.case-study .section--tight { 
  padding: 36px 0; 
}
.case-study .container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 24px; 
}

/* Headline rhythm a bit tighter */
.case-study h1 { 
  margin: 8px 0 10px; 
}
.case-study h2 { 
  margin: 0 0 18px; 
}
.case-study h3 { 
  margin: 0 0 12px; 
}

/* Impact metrics look */
.case-study .impact .metric .value { 
  color: #79FFE9; 
}
.case-study .impact .metric .label { 
  color: #79FFE9; 
  opacity: .85; 
}

/* kill any section underline decoration */
.case-study .section .underline, 
.case-study .section::after { 
  display: none !important; 
}

/* Close button for case studies */
.cs-close {
  position: fixed; 
  top: 50px; /* moved down 30px from 20px */
  right: 24px;
  padding: 10px 16px; 
  border-radius: 22px;
  background: transparent; 
  color: #EAFBFF;
  border: 1.5px solid #39CDD8; /* requested outline */
  backdrop-filter: blur(6px);
  cursor: pointer; 
  z-index: 1200;
  font-weight: 600;
}

.cs-close:hover { 
  background: rgba(57,205,216,.08); 
}

/* scaling page outline color */
body.scaling .cs-close {
  border: 1.5px solid #39CDD8;
  color: #39CDD8;
}

/* Section spacing variables */
:root { 
  --section-gap: 120px; 
}

/* default section spacing */
.section { 
  padding-block: var(--section-gap); 
}

/* tighten by ~60% (i.e., keep 40% of original) on case-study pages */
body.scaling .section,
body.ai-case .section {
  --section-gap: calc(120px * 0.4); /* = 48px */
}

/* if sections used margin instead of padding, mirror the change */
body.scaling .section,
body.ai-case .section {
  margin-block: 48px;
}

/* impact cards + text on blue background */
.impact, .impact * {
  color: #fff !important;
}

.impact .metric-value { 
  font-weight: 800; 
}
.impact .metric-label { 
  opacity: .9; 
}

/* UI Grid for interface design */
.ui-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.ui-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #0b0b0b;        /* subtle frame on dark bg */
  border: 1px solid rgba(255,255,255,.12);
}

@media (max-width: 980px) {
  .ui-grid { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
}

@media (max-width: 640px) {
  .ui-grid { 
    grid-template-columns: 1fr; 
  }
}

/* Header layout - standardized across all pages */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 28px;
}

/* left/right – kill any page-specific center overrides */
.site-header, .site-header * { 
  text-align: left !important; 
}

/* desktop links */
.primary-nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.primary-nav a {
  color: inherit;
  text-decoration: none;
}

/* pill menu (mobile only) */
.menu-pill {
  display: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: transparent;
  cursor: pointer;
}

/* dropdown */
.menu-dropdown {
  position: absolute;
  right: 28px;
  top: 64px;
  width: 220px;
  padding: 16px;
  border: 1px solid currentColor;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,.6);
}
.menu-dropdown a {
  display: block;
  padding: 10px 6px;
  color: #fff;
  text-decoration: none;
}

/* responsive */
@media (max-width: 800px) {
  .primary-nav {
    display: none;
  }
  .menu-pill {
    display: inline-flex;
  }
}

/* Page-specific colors */
/* home (white bg, black brand) */
body.home .brand {
  color: #111;
}

/* work & about (black bg) */
body.work, body.about {
  background: #0b0b0b;
  color: #fff;
}
body.work .brand, body.about .brand {
  color: #fff;
}

/* scaling (blue bg) */
body.scaling {
  background: #001034;
  color: #EAFBFF;
}
body.scaling .brand {
  color: #EAFBFF;
}

/* Sections rhythm */
.cs-section {
  margin: 72px 0;
}
.cs-eyebrow {
  text-transform: lowercase;
  letter-spacing: .06em;
  opacity: .7;
  margin-bottom: 16px;
}
.cs-title {
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.08;
  font-weight: 800;
  margin: 0 0 8px;
}
.cs-sub {
  margin-bottom: 28px;
  opacity: .85;
}

/* Metrics row */
.cs-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.cs-metric {
  background: #111;
  border: 1px solid #2b2b2b;
  border-radius: 16px;
  padding: 18px 20px;
}

/* Hero art */
.cs-hero {
  display: grid;
  grid-template-columns: 1.25fr .75fr; /* title + illustration */
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.cs-hero-illu img {
  display: block;
  width: 100%;
  height: auto;
}

/* 3) Ensure the "process" block is truly centered */
.cs-process {
  display: grid;
  place-items: center;            /* center both axes */
  margin: 72px 0;
}

/* The image or figure inside */
.cs-process img, .cs-process figure, .cs-process canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Optional: cap the process graphic so it never looks too small/huge */
.cs-process figure, .cs-process img {
  width: min(100%, 1080px);
}

/* 4) Kill hidden shifts from transforms / sticky parents */
.cs-wrap, .cs-section, .cs-process {
  transform: none !important;
  left: auto !important;
  right: auto !important;
}

/* ---------- Spacing scale ---------- */
:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

/* — Scaling Sustainability page theme — */
body.theme-sustain,
body.theme-blue {
  background: #001034 !important;
  color: #EAF2F7 !important; /* subtle light text for body copy */
}

/* Override any conflicting body backgrounds */
html.theme--sustainability,
body.cs--sustainability,
body.theme-sustain,
body.theme-blue {
  background: #001034 !important;
  background-color: #001034 !important;
}

/* Global page tightening for case-study pages */
body.theme-sustain .section,
body.theme-blue .section {
  /* default was ~96–120px; bring down ~30–40% */
  padding-block: var(--space-2xl); /* 48px top & bottom */
}

body.theme-sustain .section--tight,
body.theme-blue .section--tight {
  /* for very tight bands */
  padding-block: var(--space-xl); /* 32px */
}

/* Headings rhythm (less top/btm air) */
body.theme-sustain h1,
body.theme-blue h1 { 
  margin: 0 0 var(--space-lg); 
}
body.theme-sustain h2,
body.theme-blue h2 { 
  margin: var(--space-xl) 0 var(--space-md); 
}
body.theme-sustain h3,
body.theme-blue h3 { 
  margin: var(--space-lg) 0 var(--space-sm); 
}

/* Kill any decorative yellow underline */
.section-title::after,
h2.underline::after,
.section .title-underline,
body.theme-sustain .section-title::after,
body.theme-sustain .title-underline::after,
body.theme-sustain .heading-accent,
body.theme-sustain .heading-accent::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Paragraphs – readable width & tighter leading space */
body.theme-sustain .copy {
  max-width: 70ch;
  margin-block: var(--space-sm) var(--space-md);
}

/* Image bands */
body.theme-sustain .figure,
body.theme-sustain .figure img {
  display: block; 
  width: 100%; 
  height: auto;
}
body.theme-sustain .figure { 
  margin-block: var(--space-xl); 
}

/* Impact row / metric cards */
body.theme-sustain .impact-row {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg); /* tighter than before */
  margin-block: var(--space-xl);
}
@media (max-width: 900px) {
  body.theme-sustain .impact-row { 
    grid-template-columns: 1fr; 
  }
}

/* Bulleted lists compact */
body.theme-sustain ul { 
  margin: var(--space-sm) 0; 
}
body.theme-sustain li+li { 
  margin-top: var(--space-xs); 
}

/* Extra helpers if you want even tighter spots */
body.theme-sustain .mb-0 { 
  margin-bottom: 0 !important; 
}
body.theme-sustain .mt-0 { 
  margin-top: 0 !important; 
}

/* Impact card text tint */
body.theme-sustain .impact-card {
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 18px 20px;
}
body.theme-sustain .impact-value { 
  font-size: 28px; 
  font-weight: 800; 
  color: #79FFE9 !important; 
}
body.theme-sustain .impact-label { 
  opacity: .9; 
  color: #79FFE9 !important; 
}

/* Hide the caption/line under Workshops on this page */
body.theme-sustain #workshops .caption,
body.theme-sustain .workshops .caption,
body.theme-sustain .workshops p.caption,
body.theme-sustain .post-workshop-note,
body.theme-sustain #workshops figcaption {
  display: none !important;
}

/* Center big figures nicely */
body.theme-sustain .case-figure,
body.theme-sustain figure,
body.theme-sustain .full-bleed {
  margin-left: auto;
  margin-right: auto;
  max-width: min(1100px, 92vw);
}

/* Make the hero illustration match the theme color */
body.theme-sustain .hero-illustration svg * {
  stroke: #79FFE9;
  fill: transparent;
}

/* Column layouts */
body.theme-sustain .cols {
  display: grid;
  gap: var(--space-lg);
}
body.theme-sustain .cols--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  body.theme-sustain .cols--3 {
    grid-template-columns: 1fr;
  }
}
body.theme-sustain .col h3 {
  font-size: 1rem;
  letter-spacing: .4px;
  opacity: .95;
  margin-bottom: var(--space-sm);
}
body.theme-sustain .col ul {
  list-style: disc;
  padding-left: 18px;
}

/* Section base */
.section,
body.theme-sustain .section {
  padding: 56px 0;  /* was 84px; tighter now */
}
@media (max-width: 720px) {
  .section,
  body.theme-sustain .section {
    padding: 40px 0;
  }
}

/* Eyebrow & section titles */
.section-title,
body.theme-sustain .section-title {
  color: #9BE7DE;
  margin: 0 0 28px 0;
}

body.theme-sustain .eyebrow,
body.theme-sustain .lede {
  max-width: 70ch;
  opacity: .9;
  margin-bottom: var(--space-lg);
}

/* Accent text */
body.theme-sustain .accent {
  color: #79FFE9;
}

/* Roles grid */
.roles-grid,
body.theme-sustain .roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.role-card,
body.theme-sustain .role-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(155,231,222,.35);
  border-radius: 18px;
  padding: 28px;
}
.role-card h3,
body.theme-sustain .role-card h3 {
  color: #9BE7DE;
  margin: 0 0 14px;
}
.role-card li,
body.theme-sustain .role-card li {
  color: #E7F9F6;
  line-height: 1.6;
}
@media (max-width: 1024px) {
  .roles-grid,
  body.theme-sustain .roles-grid {
    grid-template-columns: 1fr;
  }
}

/* UI gallery grid */
body.theme-sustain .ui-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) {
  body.theme-sustain .ui-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  body.theme-sustain .ui-grid {
    grid-template-columns: 1fr;
  }
}
body.theme-sustain .ui-grid img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  border: 1px solid rgba(255,255,255,.14);
}

/* After workshops note hidden */
body.theme-sustain .after-workshops-note {
  display: none !important;
}

/* FINAL OVERRIDE: Force blue background on sustainability page */
html.theme--sustainability,
html.theme--sustainability body,
body.theme-sustain,
body.cs--sustainability {
  background: #001034 !important;
  background-color: #001034 !important;
}

/* Teal / navy palette for this case study */
.theme--sustainability {
  --cs-bg: #071B2A;          /* deep navy */
  --cs-panel: #0E2C44;       /* panel navy */
  --cs-ink: #CFEFF0;         /* light text */
  --cs-ink-muted: #87BFC2;
  --cs-accent: #5BE4C6;      /* teal accent */
  --cs-accent-2: #94F0D9;    /* lighter teal */
  --cs-stroke: rgba(255,255,255,.14);
}

.cs--sustainability {
  background: var(--cs-bg);
  color: var(--cs-ink);
}

.cs--sustainability .section-title { 
  color: var(--cs-accent); 
}

.cs--sustainability .rule { 
  border-color: var(--cs-stroke);
  position: relative;
}

.cs--sustainability .rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  translate: -50% -50%;
  border: 2px solid var(--cs-accent);
  border-radius: 999px;
}

.cs--sustainability .card { 
  background: var(--cs-panel);
  border: 1px solid var(--cs-stroke);
}

.cs--sustainability .chip { 
  background: color-mix(in oklab, var(--cs-accent) 18%, transparent);
  color: var(--cs-ink);
  border: 1px solid var(--cs-accent);
}

/* End visibility fixes */

/* ============================================
   FLOATING ICONS FOR SUSTAINABILITY PAGE
   ============================================ */

/* Hide on Scaling Sustainability page - icons only appear on Home */
.theme--sustainability .floating-icons {
  display: none !important;
}

/* ============================================
   FLOATING ICONS FOR HOME PAGE (WHITE BACKGROUND)
   ============================================ */

/* ===== NAV: glass + always above content ===== */
header,
.site-header,
.top-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.65);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* No horizontal scroll */
html, body { 
  overflow-x: hidden; 
}

/* ===== HERO: be the anchor for icons & banner ===== */
.hero { 
  position: relative;
  padding-top: var(--header-h, 64px);
}

/* If you nudged the banner earlier, keep it but within hero space */
.hero .hero-illustration,
.hero .hero__art { 
  transform: translate(30px, 90px); 
}

/* ---------- HERO LAYOUT ---------- */
/* —— layout tokens —————————————————————— */
:root {
  --nav-h: 68px;               /* your header height */
  --icon-right-desktop: 140px;  /* was 135 → +5px to the right */
  --icon-top-desktop: -56px;    /* was -36 → lift 20px more */
  --icon-top-mobile: 12%;       /* sit higher over the flower on mobile */
}

/* —— hero: no scroll & stable content column ———————————— */
.hero {
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  grid-template-columns: minmax(560px, 48vw) 1fr; /* left column stays put */
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  overflow: hidden; /* trims bottom white & prevents scrollbars */
  position: relative;
}

.hero-copy { 
  padding-left: clamp(24px, 4vw, 64px);
  max-width: 720px;   /* stops the pills drifting left when wrapping */
}

.hero-art { 
  position: relative; 
  padding-right: clamp(40px, 5vw, 72px);
}

/* Copy column */
.hero-copy h1 { 
  font-size: clamp(48px, 8vw, 120px); 
  line-height: .88; 
  margin: 0 0 16px; 
}

.hero-copy .subhead { 
  margin: 20px 0 12px; 
  font-weight: 600; 
}

.hero-copy .lede { 
  margin: 0 0 16px; 
  max-width: 62ch; 
}

.chips { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px 14px; 
}

.chips span { 
  padding: 10px 14px; 
  border: 1px solid #e6e6e6; 
  border-radius: 999px; 
}

/* Art column keeps size; image scales but never collapses */
.hero-art { 
  position: relative; 
  width: 100%; 
}

.hero-illustration { 
  width: 100%; 
  height: auto; 
  display: block; 
}

/* ---------- ICONS (inside art so they ALWAYS move with it) ---------- */
#fi { 
  position: absolute; 
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#fi .row { 
  display: flex; 
  justify-content: center; 
  gap: 8px; 
}

#fi .row2 { 
  transform: translateY(5px); 
}

#fi .row3 { 
  transform: translateY(12px); 
}

/* ===== FIX: anchor + desktop reset for floating icons ===== */

/* Make sure the art column is the positioning context */
.hero-art { 
  position: relative; 
}

/* Base */
#fi { 
  pointer-events: auto; 
}

/* Desktop (force-right, no leftover mobile centering) */
@media (min-width: 901px) {
  #fi {
    position: absolute;
    top: 0;
    right: 140px;          /* ← current: 140; tweak here */
    left: auto !important; /* kill mobile left:50% carryover */
    transform: translate(0, -56px) !important; /* up by 56px; no X shift */
    z-index: 5;
  }
  
  #fi img { 
    width: 56px; 
    height: 56px; 
  }
  
  /* Stack order & tight rows */
  #fi .row { 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
    position: relative; 
  }
  
  #fi .row1 { 
    transform: translateY(0);  
    z-index: 30; 
  }
  
  #fi .row2 { 
    transform: translateY(5px); 
    z-index: 20; 
  }
  
  #fi .row3 { 
    transform: translateY(12px); 
    z-index: 10; 
  }
}

/* Mobile (center over flower) */
@media (max-width: 900px) {
  #fi {
    position: absolute;
    left: 50%;
    right: auto;
    top: 12%;
    transform: translate(-50%, 0); /* pure X-centre */
    z-index: 5;
  }
  
  #fi img { 
    width: 22px; 
    height: 22px; 
  }
  
  /* Keep rows structure on mobile */
  #fi .row { 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
  }
  
  #fi .row2 { 
    transform: translateY(5px); 
  }
  
  #fi .row3 { 
    transform: translateY(12px); 
  }
}

/* Base icon styles */
#fi img {
  background: none; 
  border: 0; 
  box-shadow: none; 
  filter: none;
  animation: floaty 6s ease-in-out infinite;
  cursor: pointer;
}

/* —— hover glow + TOOLTIP (non-sticky) ——————————— */
@media (hover: hover) and (pointer: fine) {
  #fi img { 
    position: relative; 
    transition: transform .22s ease, filter .22s ease; 
  }
  
  #fi img:hover {
    transform: scale(1.05);
    filter:
      drop-shadow(0 0 4px rgba(233,191,78,.75))
      drop-shadow(0 0 10px rgba(233,191,78,.55))
      drop-shadow(0 2px 12px rgba(0,0,0,.15));
  }
  
  /* Tooltip from data-label */
  #fi img:hover::after {
    content: attr(data-label);
    position: absolute;
    left: 50%; 
    top: -36px;
    transform: translateX(-50%);
    padding: 8px 12px;
    font: 500 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #fff; 
    background: rgba(0,0,0,.82);
    border-radius: 10px; 
    white-space: nowrap; 
    pointer-events: none;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
  }
  
  #fi img:hover::before {
    content: "";
    position: absolute; 
    left: 50%; 
    top: -10px; 
    transform: translateX(-50%);
    border: 6px solid transparent; 
    border-top-color: rgba(0,0,0,.82);
  }
}

/* Touch devices: short tap pulse (tooltip off) */
@media (hover: none), (pointer: coarse) {
  #fi img.tap-glow {
    transform: scale(1.05);
    filter:
      drop-shadow(0 0 4px rgba(233,191,78,.75))
      drop-shadow(0 0 10px rgba(233,191,78,.55))
      drop-shadow(0 2px 12px rgba(0,0,0,.15));
  }
}

@keyframes floaty { 
  0%, 100% { transform: translateY(0); } 
  50% { transform: translateY(-3px); } 
}

/* Icon container - transparent to show PNG circles */
.floating-icons .fi {
  appearance: none;
  -webkit-appearance: none;
  width: 112px;   /* bigger icons (72px + 40px) */
  height: 112px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  outline: none;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
}

/* Floating animation on wrapper */
#fi .fi {
  animation: floaty 6s ease-in-out infinite;
  will-change: transform;
}

/* Icons (70×70 desktop) + hover=click state */
#fi .fi > img,
#fi img {
  width: 70px; 
  height: 70px; 
  background: none !important; 
  border: none !important;
  box-shadow: none !important; 
  filter: none; 
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease;
  object-fit: contain;
}

/* Hover and click/tap state */
#fi .fi > img:hover,
#fi img:hover,
#fi img.is-active {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 4px rgba(233,191,78,.75))
    drop-shadow(0 0 10px rgba(233,191,78,.55))
    drop-shadow(0 2px 12px rgba(0,0,0,.15));
}

/* Click feedback */
.floating-icons .fi.is-active { 
  transform: scale(1.03); 
}

.floating-icons .fi:active { 
  transform: scale(0.98); 
}

/* Z-layers so tooltips never hide */
#fi .row1 { z-index: 3; }
#fi .row2 { z-index: 2; }
#fi .row3 { z-index: 1; }

/* Arc curvature for all three rows */
.floating-icons .fi-row[data-row="1"] .fi:nth-child(1),
.floating-icons .fi-row[data-row="1"] .fi:last-child {
  transform: translateY(-6px);
}

.floating-icons .fi-row[data-row="2"] .fi:nth-child(1),
.floating-icons .fi-row[data-row="2"] .fi:last-child {
  transform: translateY(-8px);
}

.floating-icons .fi-row[data-row="3"] .fi:nth-child(1),
.floating-icons .fi-row[data-row="3"] .fi:nth-child(4) {
  transform: translateY(10px);
}

.floating-icons .fi-row[data-row="3"] .fi:nth-child(2),
.floating-icons .fi-row[data-row="3"] .fi:nth-child(3) {
  transform: translateY(-12px);
}

/* Tooltip (hidden by default) */
.floating-icons .fi .fi-tip {
  position: absolute;
  left: 50%; 
  transform: translateX(-50%);
  bottom: -48px;
  background: #000; 
  color: #fff;
  padding: 8px 12px; 
  border-radius: 8px;
  font-size: 12px; 
  line-height: 1; 
  white-space: nowrap;
  opacity: 0; 
  pointer-events: none; 
  transition: opacity .15s ease;
  z-index: 10;                   /* ensure tooltips sit on top */
}

.floating-icons .fi .fi-tip { z-index: 10; }

.floating-icons .fi .fi-tip::after {
  content: ""; 
  position: absolute; 
  top: -6px; 
  left: 50%; 
  transform: translateX(-50%);
  border: 6px solid transparent; 
  border-bottom-color: #000;
}

.floating-icons .fi:hover .fi-tip,
.floating-icons .fi:focus-visible .fi-tip,
.floating-icons .fi.is-active .fi-tip { 
  opacity: 1; 
}


/* --- Banner illustration adjustments --- */
/* Move RIGHT 30px and DOWN 90px using transform */
.hero .hero__art,
.hero .hero-illustration,
.hero svg,
.hero img.banner {
  transform: translate(30px, 90px) !important;
  transition: transform .3s ease; /* optional smooth movement */
  will-change: transform;
}

/* Simple floating animation */
@keyframes floaty { 
  0%, 100% { transform: translateY(0); } 
  50% { transform: translateY(-3px); } 
}

/* ============================================
   ULTRA-SPECIFIC ICON POSITIONING (OVERRIDES ALL)
   ============================================ */

/* === Anchor context (make sure your flower/hero column has this class) === */
.hero-art { 
  position: relative !important; 
}

/* Desktop ≥ 901px — lock to the flower, a bit higher + 5px to the right */
@media (min-width: 901px) {
  body.home .hero .hero-art #fi {
    position: absolute !important;
    left: auto !important;
    right: 140px !important;               /* nudge: smaller → more right, larger → more left */
    top: 0 !important;
    transform: translate(5px, -20px) !important;  /* +5px right, -20px up (your request) */
    z-index: 5 !important;
  }

  body.home .hero .hero-art #fi img {
    width: 56px !important; 
    height: 56px !important;
  }

  /* Row spacing + stacking order */
  body.home .hero .hero-art #fi .row { 
    display: flex !important; 
    justify-content: center !important; 
    gap: 8px !important;
    position: relative !important;
  }
  
  #fi .row1 { 
    transform: translateY(0) !important;  
    z-index: 30 !important; 
  }
  
  #fi .row2 { 
    transform: translateY(5px) !important; 
    z-index: 20 !important; 
  }
  
  #fi .row3 { 
    transform: translateY(12px) !important; 
    z-index: 10 !important; 
  }
}

/* Mobile ≤ 900px — center over flower, smaller icons, keep on white area */
@media (max-width: 900px) {
  body.home .hero .hero-art #fi {
    position: absolute !important;
    left: 50% !important; 
    right: auto !important;
    transform: translate(-50%, -12px) !important;  /* pull slightly up so it sits on the flower */
    top: 12% !important;                           /* reduce middle white gap */
    z-index: 5 !important;
  }
  
  body.home .hero .hero-art #fi img {
    width: 24px !important; 
    height: 24px !important;
  }
}

/* =========================
   HERO v3 — isolated styles
   ========================= */
.hero-v3 { 
  --gap: 28px; 
  --icon: 56px; 
  --hover: #E9BF4E; 
  --max: 1280px; 
}

.hero-v3 { 
  padding: 48px clamp(16px, 5vw, 48px) 0; 
}

.hero-v3__inner {
  max-width: var(--max); 
  margin: 0 auto;
  display: grid; 
  grid-template-columns: 1.05fr 0.95fr; 
  align-items: start; 
  gap: clamp(24px, 6vw, 56px);
}

.hero-v3__title { 
  font-size: clamp(48px, 10vw, 128px); 
  line-height: 0.9; 
  margin: 0 0 16px; 
}

.hero-v3__kicker { 
  font-weight: 600; 
  margin: 8px 0 12px; 
}

.hero-v3__lede { 
  margin: 0 0 18px; 
  max-width: 48ch; 
}

.hero-v3__pills { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px 14px; 
}

.hero-v3__pills span {
  border: 1px solid rgba(0,0,0,.12); 
  border-radius: 999px; 
  padding: 10px 16px; 
  font-size: 14px;
}

/* Illustration column is a positioning context */
.hero-v3__art { 
  position: relative; 
  margin: 0; 
}

.hero-v3__img { 
  width: 100%; 
  height: auto; 
  display: block; 
}

/* === Floating icon group === */
.hero-v3__icons {
  position: absolute; 
  inset: auto; 
  left: 50%; 
  transform: translateX(-50%);
  /* Anchor the group to the flower crown: ~18% down from art top */
  top: 18%;
  display: grid; 
  place-items: center; 
  pointer-events: none; /* group doesn't intercept */
  gap: 12px;
  /* 3 rows with different column counts. Each row is a sub-grid via CSS nudge */
}

.hero-v3__icons .i {
  list-style: none; 
  pointer-events: auto; 
  position: relative;
  width: var(--icon); 
  height: var(--icon);
  display: grid; 
  place-items: center; 
  border-radius: 999px; 
  background: #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  isolation: isolate; /* tooltips above */
}

.hero-v3__icons .i img { 
  width: 60%; 
  height: 60%; 
  object-fit: contain; 
  filter: grayscale(0); 
}

/* Row layout: r1 = 2, r2 = 3, r3 = 4; subtle inverted U arc */
.hero-v3__icons { 
  grid-auto-rows: auto; 
}

.hero-v3__icons .r1 { 
  margin: 0 10px; 
}  /* top row: 2 items */

.hero-v3__icons .r1:nth-child(1) { 
  transform: translate(-64px, 0); 
}

.hero-v3__icons .r1:nth-child(2) { 
  transform: translate(64px, 0); 
}

.hero-v3__icons .r2 { 
  margin-top: 5px; 
} /* mid row: 3 items */

.hero-v3__icons .r2:nth-of-type(3) { 
  transform: translate(-96px, 10px); 
}

.hero-v3__icons .r2:nth-of-type(4) { 
  transform: translate(0px, 6px); 
}

.hero-v3__icons .r2:nth-of-type(5) { 
  transform: translate(96px, 10px); 
}

.hero-v3__icons .r3 { 
  margin-top: 8px; 
} /* bottom row: 4 items */

.hero-v3__icons .r3:nth-of-type(6) { 
  transform: translate(-144px, 20px); 
}

.hero-v3__icons .r3:nth-of-type(7) { 
  transform: translate(-48px, 26px); 
}

.hero-v3__icons .r3:nth-of-type(8) { 
  transform: translate(48px, 26px); 
}

.hero-v3__icons .r3:nth-of-type(9) { 
  transform: translate(144px, 20px); 
}

/* Hover (only on hover-capable devices) */
@media (hover: hover) {
  .hero-v3__icons .i:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 0 10px color-mix(in srgb, var(--hover) 26%, transparent);
    transform: translateY(-3px) scale(1.02);
  }
}

/* Tooltip */
.hero-v3__icons .i > span {
  position: absolute; 
  bottom: calc(100% + 10px); 
  left: 50%; 
  transform: translateX(-50%);
  background: #000; 
  color: #fff; 
  font-size: 12px; 
  padding: 6px 10px; 
  border-radius: 10px;
  opacity: 0; 
  visibility: hidden; 
  white-space: nowrap; 
  transition: opacity .2s ease;
}

.hero-v3__icons .i:hover > span { 
  opacity: 1; 
  visibility: visible; 
}

/* Make the icon group sit a bit higher + right on large screens */
@media (min-width: 901px) {
  .hero-v3__icons { 
    top: 16%; 
    left: calc(50% + 10px); 
  } /* +10px right, 20px higher vs your last */
}

/* RESPONSIVE: stack columns, keep icons sized but off the text, center on flower */
@media (max-width: 900px) {
  .hero-v3__inner { 
    grid-template-columns: 1fr; 
    gap: 28px; 
  }
  
  .hero-v3__pills { 
    margin-bottom: 10px; 
  }
  
  .hero-v3__icons {
    --icon: 24px;
    top: 13.5%; 
    left: 50%; 
    transform: translateX(-50%);
  }
  
  /* Tighten row arc so it stays within the white crown */
  .hero-v3__icons .r1:nth-child(1) { 
    transform: translate(-36px, 0); 
  }
  
  .hero-v3__icons .r1:nth-child(2) { 
    transform: translate(36px, 0); 
  }
  
  .hero-v3__icons .r2:nth-of-type(3) { 
    transform: translate(-54px, 6px); 
  }
  
  .hero-v3__icons .r2:nth-of-type(4) { 
    transform: translate(0px, 4px); 
  }
  
  .hero-v3__icons .r2:nth-of-type(5) { 
    transform: translate(54px, 6px); 
  }
  
  .hero-v3__icons .r3:nth-of-type(6) { 
    transform: translate(-78px, 12px); 
  }
  
  .hero-v3__icons .r3:nth-of-type(7) { 
    transform: translate(-26px, 16px); 
  }
  
  .hero-v3__icons .r3:nth-of-type(8) { 
    transform: translate(26px, 16px); 
  }
  
  .hero-v3__icons .r3:nth-of-type(9) { 
    transform: translate(78px, 12px); 
  }
}

/* Reduce unneeded page whitespace on desktop (no scroll feel) */
@media (min-width: 1200px) {
  .hero-v3 { 
    padding-bottom: 8px; 
  }
}

/* ===== FI HOTFIX (isolate + override everything) ===== */
:root { 
  --fi-size: 96px;   /* bigger icons (56px + 40px) */
  --fi-gap: 12px; 
  --fi-hover: #E9BF4E; 
}

@media (max-width: 900px) { 
  :root { 
    --fi-size: 64px;   /* bigger mobile icons (24px + 40px) */
    --fi-gap: 8px; 
  } 
}

/* Kill old rules */
.floating-icons, .floating-icons * {
  all: unset;
  box-sizing: border-box;
  font: inherit;
}

/* Anchor container */
.hero .floating-icons {
  position: absolute;           /* attached to the hero art column */
  /* Anchor to the flower crown */
  top: 16%;                     /* move higher/lower here */
  left: calc(50% + 5px);        /* nudge 5px to the right as asked */
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero .floating-icons { 
    top: calc(13.5% + 20px + 50% + 100px) !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important;
  }
}

/* Row wrappers */
.floating-icons .row { 
  display: flex; 
  gap: var(--fi-gap); 
  pointer-events: none; 
}

.floating-icons .row1 { 
  margin-bottom: 6px; 
  z-index: 3; 
}   /* highest */

.floating-icons .row2 { 
  margin-bottom: 8px; 
  z-index: 2; 
}

.floating-icons .row3 { 
  z-index: 1; 
}

/* Arc shaping (inverted U) */
.floating-icons .row1 { 
  transform: translateY(0); 
}

.floating-icons .row2 { 
  transform: translateY(10px); 
}

.floating-icons .row3 { 
  transform: translateY(20px); 
}

.floating-icons .row1 > *:nth-child(1) { 
  transform: translateX(-60px); 
}

.floating-icons .row1 > *:nth-child(2) { 
  transform: translateX(60px); 
}

.floating-icons .row2 > *:nth-child(1) { 
  transform: translateX(-96px); 
}

.floating-icons .row2 > *:nth-child(2) { 
  transform: translateX(0px); 
}

.floating-icons .row2 > *:nth-child(3) { 
  transform: translateX(96px); 
}

.floating-icons .row3 > *:nth-child(1) { 
  transform: translateX(-144px); 
}

.floating-icons .row3 > *:nth-child(2) { 
  transform: translateX(-48px); 
}

.floating-icons .row3 > *:nth-child(3) { 
  transform: translateX(48px); 
}

.floating-icons .row3 > *:nth-child(4) { 
  transform: translateX(144px); 
}

/* Icon pill */
.floating-icons .icon {
  pointer-events: auto;
  width: var(--fi-size); 
  height: var(--fi-size);
  border-radius: 999px; 
  background: #fff;
  display: grid; 
  place-items: center;
  box-shadow: 0 2px 14px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  position: relative;
}

.floating-icons .icon img { 
  width: 60%; 
  height: 60%; 
  object-fit: contain; 
  display: block; 
}

/* Single hover ring (no second outer circle) */
@media (hover: hover) {
  .floating-icons .icon:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 0 10px color-mix(in srgb, var(--fi-hover) 26%, transparent);
    transform: translateY(-3px) scale(1.02);
  }
}

/* Tooltip */
.floating-icons .icon > span {
  position: absolute; 
  bottom: calc(100% + 10px); 
  left: 50%; 
  transform: translateX(-50%);
  background: #000; 
  color: #fff; 
  font-size: 12px; 
  padding: 6px 10px; 
  border-radius: 10px;
  opacity: 0; 
  visibility: hidden; 
  white-space: nowrap; 
  transition: opacity .18s ease;
}

.floating-icons .icon:hover > span { 
  opacity: 1; 
  visibility: visible; 
}

/* Tiny float motion (subtle) */
@keyframes fi-float { 
  from { transform: translateY(0); } 
  50% { transform: translateY(-3px); } 
  to { transform: translateY(0); } 
}

.floating-icons .icon { 
  animation: fi-float 4.6s ease-in-out infinite; 
}

.floating-icons .row2 .icon { 
  animation-duration: 4.2s; 
}

.floating-icons .row3 .icon { 
  animation-duration: 3.8s; 
}

/* Tighten rows on mobile & keep inside crown */
@media (max-width: 900px) {
  .floating-icons .row2 { 
    transform: translateY(6px); 
  }
  
  .floating-icons .row3 { 
    transform: translateY(12px); 
  }
  
  .floating-icons .row1 > *:nth-child(1) { 
    transform: translateX(-36px); 
  }
  
  .floating-icons .row1 > *:nth-child(2) { 
    transform: translateX(36px); 
  }
  
  .floating-icons .row2 > *:nth-child(1) { 
    transform: translateX(-54px); 
  }
  
  .floating-icons .row2 > *:nth-child(2) { 
    transform: translateX(0px); 
  }
  
  .floating-icons .row2 > *:nth-child(3) { 
    transform: translateX(54px); 
  }
  
  .floating-icons .row3 > *:nth-child(1) { 
    transform: translateX(-78px); 
  }
  
  .floating-icons .row3 > *:nth-child(2) { 
    transform: translateX(-26px); 
  }
  
  .floating-icons .row3 > *:nth-child(3) { 
    transform: translateX(26px); 
  }
  
  .floating-icons .row3 > *:nth-child(4) { 
    transform: translateX(78px); 
  }
}

/* Reduce page white space on large screens */
@media (min-width: 1200px) {
  .hero { 
    padding-bottom: 8px; 
  }
}

/* ============================================
   HERO FINAL - Centered Row-Based Layout
   ============================================ */

/* Layout container */
.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: clamp(24px, 4vw, 48px); 
}

.hero { 
  --header: 64px; 
  padding-block: clamp(32px, 5vw, 56px); 
}

.hero-inner { 
  display: grid; 
  grid-template-columns: 1.1fr 0.9fr; 
  gap: clamp(24px, 5vw, 56px); 
  align-items: center; 
}

/* Text & pills wrap */
.hero h1, .hero p, .hero .eyebrow { 
  white-space: normal !important; 
}

.hero .tags, .hero .hero-pills { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 8px 14px; /* 8px vertical, 14px horizontal */
  align-items: flex-start;
}

/* Prevent horizontal scroll */
body { 
  overflow-x: hidden; 
}

/* Banner + Icons container */
.hero-visual { 
  position: relative; 
  width: min(48vw, 560px); 
  margin-left: auto; 
}

.hero-illustration { 
  display: block; 
  width: 100%; 
  height: auto; 
}

/* Tweak once here, everything else follows */
:root {
  --icon-size-desktop: 120px;   /* bigger on desktop (80px + 40px) */
  --icon-size-tablet: 96px;     /* bigger on tablet (56px + 40px) */
  --icon-size-mobile: 64px;     /* bigger on mobile (24px + 40px) */
  --row-gap-desktop: 18px;     /* vertical gap between rows */
  --col-gap-desktop: 18px;     /* horizontal gap within a row */
  --lift-up: 20px;             /* move group UP by 20px */
  --nudge-right: 5px;          /* move group RIGHT by 5px */
}

/* The container that overlays the hero art */
.hero .floating-icons {
  position: absolute;
  inset: 0;                      /* anchor to hero section */
  pointer-events: none;          /* only icons receive events */
  /* Pin to the flower centre: left 50% = middle, translateX(-50%) truly centers */
  left: 50%;
  transform: translateX(calc(-50% + var(--nudge-right)));
  top: calc(20vh - var(--lift-up));  /* sit high over the flower and lift 20px */
  display: grid;
  grid-auto-rows: max-content;
  row-gap: var(--row-gap-desktop);
  justify-items: center;         /* each row is centered */
}

/* Each logical row */
.floating-icons .row {
  display: grid;
  grid-auto-flow: column;
  column-gap: var(--col-gap-desktop);
  justify-content: center;       /* middle align the 2 / 3 / 4 icons */
  pointer-events: auto;          /* rows pass events to children */
}

/* Stacking order: row1 on top, then 2, then 3 */
.floating-icons .row1 { z-index: 3; }
.floating-icons .row2 { z-index: 2; }
.floating-icons .row3 { z-index: 1; }

/* Icon button — kill the second circle completely */
.floating-icons .icon {
  width: var(--icon-size-desktop);
  height: var(--icon-size-desktop);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  position: relative;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: box-shadow .25s ease;
  /* if any older styles made extra rings via pseudo-elements, hard-stop them: */
  outline: none !important;
}

.floating-icons .icon::before,
.floating-icons .icon::after { 
  content: none !important; 
}

/* PNG/SVG inside the circle */
.floating-icons .icon img,
.floating-icons .icon svg {
  width: 56%; 
  height: 56%;
  object-fit: contain;
  pointer-events: none;
}

/* Hover halo (non-sticky) */
.floating-icons .icon:hover {
  box-shadow:
    0 0 0 10px rgba(233,191,78,.25),   /* #E9BF4E soft ring */
    0 10px 24px rgba(0,0,0,.12);
}

/* Make sure nothing adds an "active" class that keeps hover stuck */
.floating-icons .icon.is-active { 
  box-shadow: 0 10px 24px rgba(0,0,0,.12) !important; 
}

/* -----------------------------------------
   RESPONSIVE — keep centered & tidy
------------------------------------------*/

/* Large tablets */
@media (max-width: 1200px) {
  :root {
    --icon-size-desktop: var(--icon-size-tablet);
    --row-gap-desktop: 16px;
    --col-gap-desktop: 16px;
  }
  
  .hero .floating-icons {
    top: calc(18vh - var(--lift-up)); /* keep visually over the flower */
  }
  
  .hero-inner { 
    grid-template-columns: 1fr; 
  }
  
  .hero-visual { 
    width: min(84vw, 640px); 
    margin: 24px auto 0; 
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --icon-size-desktop: 40px;        /* readable but smaller */
    --row-gap-desktop: 12px;
    --col-gap-desktop: 12px;
  }
  
  .hero .floating-icons {
    top: calc(14vh - var(--lift-up)); /* raise the group so it sits on the flower */
    transform: translateX(-50%);      /* keep dead center on small screens */
  }
  
  .hero-visual { 
    width: min(92vw, 520px); 
  }
}

/* Extra-small phones */
@media (max-width: 420px) {
  :root {
    --icon-size-desktop: var(--icon-size-mobile); /* 24px */
    --row-gap-desktop: 10px;
    --col-gap-desktop: 10px;
  }
  
  .hero .floating-icons { 
    top: calc(12vh - var(--lift-up)); 
  }
}

/* ========== HERO v3 (namespaced) ========== */
.hero.v3 { 
  --wrap: 1160px; 
  --padX: 32px; 
  position: relative; 
}

.hero.v3 .hero-inner {
  max-width: var(--wrap); 
  margin: 0 auto; 
  padding: 64px var(--padX) 24px;
  display: grid; 
  grid-template-columns: 1.1fr 1fr; 
  gap: 40px; 
  align-items: start;
}

@media (max-width: 980px) {
  .hero.v3 .hero-inner { 
    grid-template-columns: 1fr; 
    gap: 32px; 
  }
}

/* Intro block */
.hero.v3 .intro h1 { 
  font-size: clamp(56px, 10vw, 140px); 
  line-height: .9; 
  margin: 0 0 16px; 
}

.hero.v3 .intro .eyebrow { 
  font-weight: 600; 
  margin: 8px 0 12px; 
}

.hero.v3 .intro .sub { 
  margin: 0 0 18px; 
  max-width: 46ch; 
}

.hero.v3 .tags { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 12px 14px; 
  padding: 0; 
  margin: 0; 
  list-style: none; 
}

.hero.v3 .tags button {
  padding: 10px 16px; 
  border-radius: 999px; 
  border: 1px solid #e7e7e7; 
  background: #fff; 
  font: inherit;
  cursor: pointer;
}

/* Banner / illustration area */
.hero.v3 .hero-art { 
  position: relative; 
  margin: 0;
  /* Background fallback ensures illustration shows even during slow loads */
  aspect-ratio: 1.3 / 1;
  background: url("/images/hero-new.png") no-repeat center right / contain;
  min-height: 520px;  /* safety floor so icons have a target */
}

.hero.v3 .hero-art .flower { 
  display: block; 
  width: 100%; 
  height: auto; 
}

@media (max-width: 980px) {
  .hero.v3 .hero-art {
    background-position: center bottom;
    min-height: 440px;
  }
}

/* ---------- Floating icon cluster ---------- */
:root {
  --iconDesk: 80px;      /* desktop size */
  --iconTab: 56px;
  --iconMob: 32px;
  --rowGapDesk: 18px;
  --colGapDesk: 18px;
  --liftUp: 20px;        /* raise the group by 20px */
  --nudgeRight: 5px;     /* move group 5px right */
}

/* Container is absolutely inside the hero-art, so it moves WITH the flower */
.hero.v3 .floating-icons {
  position: absolute; 
  inset: 0;
  left: 50%;
  transform: translateX(calc(-50% + var(--nudgeRight)));
  top: calc(12% - var(--liftUp));      /* sits over the flower head */
  display: grid; 
  row-gap: var(--rowGapDesk); 
  justify-items: center;
  pointer-events: none;
}

/* Rows centered: 2 / 3 / 4 */
.hero.v3 .floating-icons .row {
  display: grid; 
  grid-auto-flow: column; 
  column-gap: var(--colGapDesk);
  justify-content: center; 
  pointer-events: auto;
}

.hero.v3 .floating-icons .row1 { z-index: 3; }
.hero.v3 .floating-icons .row2 { z-index: 2; }
.hero.v3 .floating-icons .row3 { z-index: 1; }

/* Single circle only */
.hero.v3 .floating-icons .icon {
  width: var(--iconDesk); 
  height: var(--iconDesk); 
  border-radius: 999px;
  background: #fff; 
  display: grid; 
  place-items: center;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  position: relative; 
  border: none; 
  cursor: pointer;
  transition: transform .28s ease, box-shadow .28s ease;
}

.hero.v3 .floating-icons .icon::before,
.hero.v3 .floating-icons .icon::after { 
  content: none !important; 
} /* kills ghost ring */

.hero.v3 .floating-icons .icon img { 
  width: 56%; 
  height: 56%; 
  object-fit: contain; 
  pointer-events: none; 
}

/* Hover (non-sticky) & tiny float */
.hero.v3 .floating-icons .icon:hover {
  box-shadow: 0 0 0 10px rgba(233,191,78,.25), 0 12px 28px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

@keyframes bob { 
  0%, 100% { transform: translateY(0); } 
  50% { transform: translateY(-3px); } 
}

.hero.v3 .floating-icons .icon { 
  animation: bob 3.2s ease-in-out infinite; 
}

.hero.v3 .floating-icons .row2 .icon { 
  animation-delay: .25s; 
}

.hero.v3 .floating-icons .row3 .icon { 
  animation-delay: .5s; 
}

/* Tooltips */
.hero.v3 .floating-icons .icon[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; 
  bottom: calc(100% + 10px); 
  left: 50%; 
  transform: translateX(-50%);
  background: #000; 
  color: #fff; 
  font-size: 12px; 
  line-height: 1; 
  padding: 8px 10px; 
  border-radius: 8px;
  white-space: nowrap; 
  pointer-events: none;
}

.hero.v3 .floating-icons .icon[data-tip]:hover::before {
  content: "";
  position: absolute; 
  bottom: 100%; 
  left: 50%; 
  transform: translateX(-50%);
  border: 6px solid transparent; 
  border-top-color: #000;
}

/* Tablet */
@media (max-width: 1100px) {
  :root { 
    --iconDesk: var(--iconTab); 
    --rowGapDesk: 16px; 
    --colGapDesk: 16px; 
  }
  
  .hero.v3 .floating-icons { 
    top: calc(10% - var(--liftUp)); 
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root { 
    --iconDesk: var(--iconMob); 
    --rowGapDesk: 12px; 
    --colGapDesk: 12px; 
  }
  
  .hero.v3 .hero-inner { 
    padding: 40px var(--padX) 12px; 
  }
  
  .hero.v3 .floating-icons {
    top: calc(6% - var(--liftUp));              /* keep on the white flower area */
    transform: translateX(-50%);                /* dead center on small screens */
  }
  
  .hero.v3 .intro .sub { 
    max-width: none; 
  }
}

/* Make sure old global styles can't add a second ring or hide pills */
.hero.v3 .floating-icons .icon *,
.hero.v3 .tags * { 
  box-shadow: none; 
}

/* Bigger icons on desktop, same responsive behavior */
@media (min-width: 981px) {
  :root { 
    --iconDesk: 88px;  /* was 80px */
  }
  
  .hero.v3 .floating-icons { 
    top: calc(10% - var(--liftUp));  /* nudges slightly higher */
  }
}

/* ——— FLOATING ICONS: force single circle ——— */
.floating-icons .icon,
.floating-icons .icon-btn,
.floating-icons button.icon {
  position: relative;
  width: var(--iconDesk, 80px);
  height: var(--iconDesk, 80px);
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);   /* one soft shadow only */
  overflow: hidden;                           /* hides anything inside */
}

/* remove any inner circle/ring drawn via pseudo-elements */
.floating-icons .icon::before,
.floating-icons .icon::after,
.floating-icons .icon-btn::before,
.floating-icons .icon-btn::after { 
  content: none !important;
}

/* remove any inner wrappers some variants used (ring/inner/bg) */
.floating-icons .icon .ring,
.floating-icons .icon .inner,
.floating-icons .icon .bg,
.floating-icons .icon .circle { 
  display: none !important;
}

/* make sure the actual glyph (svg/img) sits cleanly */
.floating-icons .icon svg,
.floating-icons .icon img {
  width: 56%;
  height: 56%;
  display: block;
  margin: 22% auto;   /* centers inside the single circle */
  filter: none;
  background: transparent;
  box-shadow: none;
  border: 0;
}

/* hover: use an outer glow instead of adding another circle */
.floating-icons .icon:hover {
  box-shadow:
    0 0 0 10px rgba(233,191,78,.22),   /* E9BF4E halo */
    0 10px 24px rgba(0,0,0,.12);
}

/* smooth scroll everywhere */
html { scroll-behavior: smooth; }

/* page shell */
body { background:#000; color:#fff; }
.work-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; }
.logo { color:#fff; text-decoration:none; font-weight:600; }
.work-top-cta .pill { margin-left:auto; }

.work-main { width:min(1200px, 92vw); margin:24px auto 120px; }

/* pills */
.pill {
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px; border-radius:999px;
  font-weight:500; text-decoration:none; cursor:pointer;
  transition:transform .15s ease, background .15s ease, opacity .15s;
}
.pill-ghost { color:#fff; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.06); }
.pill-ghost:hover { transform:translateY(-1px); background:rgba(255,255,255,.10); }

/* tiny sticky "about me" pill centered above cards */
.work-jumper {
  position:sticky; top:12px; display:flex; justify-content:center; margin-top:4px; z-index:10;
}
.work-center-cta { display:flex; justify-content:center; margin:14px 0 8px; }

/* cards */
.work-grid {
  display:grid; grid-template-columns:repeat(3, 358px); gap:32px;
  justify-content:center; margin:32px auto 8px;
}
.work-card {
  position:relative; display:block; width:358px; height:653px;
  border-radius:40px; outline:1.2px solid rgba(255,255,255,.7);
  overflow:hidden; background:#0a0a0a; text-decoration:none;
}
.work-card__img { position:absolute; inset:0; background:center/cover; filter:brightness(0.96); }
.work-card__title { position:absolute; left:20px; top:16px; font-size:4px; font-weight:700; color:#000000; }
.work-card::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(transparent, rgba(255,255,255,.05));
  pointer-events:none;
}
.work-card:hover::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
}

/* disclaimer */
.work-disclaimer { margin:8px auto 22px; max-width:72ch; color:rgba(255,255,255,.85); }
.work-disclaimer p { line-height:1.5; text-align:center; }

/* masonry */
.masonry {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:8px;
  gap:16px;
}
.media {
  position:relative; border-radius:16px; overflow:hidden;
  background:#111; outline:1px solid rgba(255,255,255,.12);
}
.media img, .media video { width:100%; height:auto; display:block; object-fit:cover; }
.media .caption {
  position:absolute; left:10px; right:10px; bottom:8px;
  color:#fff; font-size:12px; line-height:1.2; text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.media[data-type="video"]::after {
  content:"▸"; position:absolute; right:10px; top:8px;
  font-size:18px; background:rgba(0,0,0,.55); border-radius:8px; padding:2px 6px;
}

/* responsive tweaks */
@media (max-width:1100px){
  .work-grid{ grid-template-columns:repeat(2, 358px); gap:28px; }
}
@media (max-width:780px){
  .work-grid{ grid-template-columns:1fr; justify-content:stretch; }
  .work-card{ width:100%; height:540px; border-radius:28px; }
  .masonry{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .masonry{ grid-template-columns:1fr; }
}
/* ============================================
   RISK & CONTROLS THEME (Purple)
   ============================================ */

.theme-rc {
  --rc-bg: #251b33;          /* deep purple background for hero bands */
  --rc-card: #2f2142;        /* card bg */
  --rc-soft: #efe7ff;        /* soft lilac highlights */
  --rc-accent: #caa7ff;      /* accent strokes */
  --rc-text: #ffffff;
  --rc-muted: #c9bddc;
}

/* Case study page structure */
.case section {
  padding: 48px 8%;
}

.case h2 {
  font-size: clamp(20px, 2.6vw, 28px);
  margin: 0 0 16px;
  color: var(--rc-text);
}

.case p,
.case li {
  color: var(--rc-muted);
  line-height: 1.6;
}

.case ul {
  margin: 0;
  padding-left: 20px;
}

/* Grid utilities */
.grid {
  display: grid;
  gap: 16px;
}

.grid.auto {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Hero section */
#hero {
  background: var(--rc-bg);
  color: var(--rc-text);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: center;
  position: relative;
  padding: 96px 8% 56px;
}

#hero h1 {
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1;
  margin: 0;
  color: #fff;
}

#hero .hero-ill {
  justify-self: end;
  max-height: 280px;
  width: auto;
  object-fit: contain;
}

/* Close pill for case studies */
.close-pill {
  position: absolute;
  right: clamp(16px, 2vw, 24px);
  top: 30px;
  border: 1.2px solid var(--rc-accent);
  color: #fff;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

.close-pill:hover {
  opacity: .8;
  transform: translateY(-1px);
}

/* Metric cards */
.metric {
  background: var(--rc-card);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 16px;
}

.metric h3 {
  font-size: clamp(24px, 4vw, 36px);
  margin: 0 0 6px;
  color: #fff;
}

.metric p {
  margin: 0;
  color: #fff;
}

/* Panel */
.panel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 16px;
}

/* Numbered cards */
.num {
  font-weight: 700;
  font-size: clamp(28px, 5vw, 40px);
  background: linear-gradient(90deg, #ffffff 0%, var(--rc-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}

.numcard {
  background: var(--rc-card);
  border-radius: 14px;
  padding: 16px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
}

.numcard p {
  margin: 0;
  color: #fff;
}

/* Accessibility uplift section */
.a11y {
  background: var(--rc-bg);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
}

.a11yrow {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .12);
}

.a11yrow:last-child {
  border-bottom: 0;
}

.a11yrow strong {
  color: #fff;
  display: block;
  margin-bottom: 4px;
}

.a11yrow p {
  margin: 0;
  font-size: 14px;
}

/* Progress bar */
.bar {
  height: 8px;
  border-radius: 6px;
  background: #4f3b69;
  position: relative;
  overflow: hidden;
}

.bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w, 65%);
  background: #caa7ff;
}

/* Before/After comparison */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ba {
  margin: 0;
}

.ba img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.ba figcaption {
  margin-top: 8px;
  text-align: center;
  color: var(--rc-muted);
  font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  #hero {
    grid-template-columns: 1fr;
    padding: 64px 6% 40px;
  }
  
  #hero .hero-ill {
    max-height: 220px;
    justify-self: center;
  }
  
  .a11yrow {
    grid-template-columns: 1fr;
  }
  
  .before-after {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .case section {
    padding: 32px 5%;
  }
  
  .grid.auto {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   UNIFIED NAVIGATION (from work.css)
   ============================================ */

/* HEADER / NAV */
.site-header{
  background:var(--bg); color:var(--fg); position:sticky; top:0; z-index:100;
  padding:16px 24px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}

/* Theme-specific header backgrounds */
.theme-dark .site-header {
  background: rgba(0,0,0,.65);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.theme-rc .site-header {
  background: rgba(37, 27, 51, .85);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.topnav{
  display:flex; align-items:center; justify-content:space-between; max-width:1400px; margin:0 auto;
}
.topnav a{ color:var(--fg); text-decoration:none; }
.brand{ font-weight:700; font-size:16px; color:#fff; }

.menu{
  display:flex; gap:24px; list-style:none; margin:0; padding:0;
}
.menu a{
  padding:8px 4px; font-weight:500; transition:opacity .2s; color:#fff;
}
.menu a:hover{ opacity:.8; }
.menu a[aria-current="page"],
.menu a.active{
  border-bottom:2px solid var(--accent);
  color:var(--accent);
  opacity:1 !important;
}

.nav-pill{
  display:none;
  align-items:center;
  gap:8px;
  border:1.2px solid var(--accent);
  border-radius:999px; padding:6px 14px; background:transparent; color:var(--fg);
  cursor:pointer; font-family:inherit; font-size:14px;
}

/* For dark themes, ensure white color */
.theme-dark .nav-pill,
.theme-rc .nav-pill {
  color: #fff;
  border-color: #fff;
}

.theme-dark .nav-pill svg,
.theme-rc .nav-pill svg {
  stroke: #fff;
}

/* Only allow .topnav inside header (safety) */
main .topnav { display: none !important; }

/* Mobile menu must be hidden on desktop */
.menu--mobile { display: none !important; }

@media (max-width:800px){
  .menu{ display:none !important; }
  .nav-pill{ display:inline-flex !important; }
  
  /* Hide conflicting mobile menu systems */
  .menu--mobile { display: none !important; }
}

/* Chevron icon rotation */
.icon-chev {
  transition: transform .2s ease;
}
.nav-pill[aria-expanded="true"] .icon-chev {
  transform: rotate(180deg);
}

/* ============================================
   FLOATING PILLS (Scroll-to-top, Back to work)
   ============================================ */

/* Base pill component */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1.2px solid var(--accent); background:transparent; color:var(--fg);
  font:inherit; cursor:pointer; text-decoration:none;
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pill:hover{ opacity:.8; }
.pill:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pill svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }

/* Floating pills (scroll-to-top, back to work) */
.pill--floating{
  position:fixed;
  z-index:999;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  backdrop-filter:saturate(140%) blur(6px);
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  transition: opacity .2s ease, transform .2s ease;
}

/* For dark themes, ensure visibility */
.theme-dark .pill--floating,
.theme-rc .pill--floating {
  background: rgba(255, 255, 255, .15);
  border-color: #fff;
  color: #fff;
}

.theme-dark .pill--floating svg,
.theme-rc .pill--floating svg {
  stroke: #fff;
}

.pill--floating.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
}

.pill--raise{
  transform:translateY(-64px);
}

/* Center helper for "other works" */
.centered-row{
  display:flex;
  justify-content:center;
  margin:28px 0 10px;
}

.rotate-180{
  transform:rotate(180deg);
}

/* ============================================
   RISK & CONTROLS - Challenge Image & Vision Cards
   ============================================ */

/* Challenge image figure */
.rc-figure {
  margin: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.10);
  padding: clamp(8px, 1.2vw, 16px);
}

.rc-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Vision cards */
.vision-cards {
  padding-top: 32px;
}

.vision-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0; /* dividers create separation */
  background: #f7f5fb; /* very light lilac panel */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e6e0f2;
}

.vision-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(16px, 2vw, 24px);
  position: relative;
  background: #ffffff;
}

.vision-item:nth-child(odd) {
  background: #f7f5fb;
}

/* Vertical divider between columns (hidden on small screens) */
.vision-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: 0;
  width: 1px;
  background: #2b2540;
  opacity: .2;
}

@media (max-width: 900px) {
  .vision-grid {
    grid-template-columns: 1fr;
  }
  .vision-item:not(:last-child)::after {
    display: none;
  }
}

.v-num {
  font-weight: 800;
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, #b89ae8 0%, #805ad5 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.v-body h3 {
  margin: 0 0 6px 0;
  font-weight: 700;
  color: #1c1c1c;
}

.v-body p {
  margin: 0;
  color: #4b4b4b;
}
/* IMPACT section */
#impact {
  padding: 56px 8%;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.impact-card {
  background: #f5efff; /* soft lilac */
  border: 1px solid #e3dbf7;
  border-radius: 12px;
  padding: 28px 24px;
  color: #1c1c1c;
}

.impact-card h3 {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 8px;
  color: #000;
}

.impact-card p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #1b1b1b;
}

.impact-card ul {
  margin: 0;
  padding-left: 20px;
  color: #1b1b1b;
  line-height: 1.5;
}

.impact-card li {
  margin-bottom: 6px;
  color: #1b1b1b;
}

@media (max-width: 768px) {
  .impact-grid {
    grid-template-columns: 1fr;
  }
}

/* CHALLENGE section */
#challenge {
  padding: 56px 8%;
}

.challenge-card {
  background: #f5efff; /* soft lilac */
  border: 1px solid #e3dbf7;
  border-radius: 12px;
  padding: 28px 24px;
  color: #1c1c1c;
}

.challenge-card ul {
  margin: 0;
  padding-left: 20px;
  color: #1b1b1b;
  line-height: 1.6;
}

.challenge-card li {
  margin-bottom: 12px;
  color: #1b1b1b;
  font-size: 16px;
}

.challenge-card li:last-child {
  margin-bottom: 0;
}

/* PROCESS section */
#process {
  padding: 56px 8%;
}

.process-card {
  background: #F4EAFD; /* lighter lilac/lavender */
  border: 1px solid #e8d5f9;
  border-radius: 12px;
  padding: 28px 24px;
  color: #1c1c1c;
  margin-bottom: 32px;
}

.process-card ul {
  margin: 0;
  padding-left: 20px;
  color: #1b1b1b;
  line-height: 1.6;
}

.process-card li {
  margin-bottom: 12px;
  color: #1b1b1b;
  font-size: 16px;
}

.process-card li:last-child {
  margin-bottom: 0;
}

.process-image {
  margin-top: 24px;
}

.process-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ACCESSIBILITY UPLIFT */
#accessibility {
  background: #332543; /* deep purple backdrop */
  color: #fff;
  border-radius: 20px;
  padding: 64px 8%;
  margin-top: 60px;
}

#accessibility h2 {
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  margin-bottom: 16px;
  color: #ffffff;
}

#accessibility .subtext {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin-bottom: 32px;
}

.access-figure {
  background: #332543;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,0.15);
}

.access-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

@media (max-width: 768px) {
  #accessibility { padding: 48px 6%; }
  #accessibility .subtext { font-size: 15px; }
}

/* ACCESSIBILITY TABLE */
.accessibility-table {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
  overflow-x: auto;
}

.table-header {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.8fr 2fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 16px;
}

.header-cell {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.table-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.8fr 2fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  align-items: start;
}

.table-row:last-child {
  border-bottom: none;
}

.category-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
}

.icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.metric-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.percentage {
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #6B5B7B;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-fill.before {
  background: #E0BBE4;
}

.progress-fill.after {
  background: #B2E0B2;
}

.delta-cell {
  display: flex;
  align-items: center;
}

.delta-value {
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
}

.improvements-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcag-ref {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
  width: fit-content;
}

.improvements-cell p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.improvements-cell strong {
  color: #ffffff;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .table-header,
  .table-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .table-row {
    padding: 16px 0;
  }
  
  .header-cell {
    font-size: 11px;
  }
  
  .category-cell {
    font-size: 13px;
  }
  
  .improvements-cell p {
    font-size: 12px;
  }
}

/* Progress bar animations */
.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease-out;
  transform-origin: left;
}

.progress-fill.before {
  background: #E0BBE4;
  width: 0%;
}

.progress-fill.after {
  background: #B2E0B2;
  width: 0%;
}

/* Animation classes for scroll trigger */
.progress-fill.animate-before {
  animation: fillBefore 1s ease-out forwards;
}

.progress-fill.animate-after {
  animation: fillAfter 1s ease-out forwards;
}

@keyframes fillBefore {
  from { width: 0%; }
  to { width: var(--before-width); }
}

@keyframes fillAfter {
  from { width: 0%; }
  to { width: var(--after-width); }
}

/* Scroll animation trigger */
.accessibility-table {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.accessibility-table.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* VISUAL DESIGN FLOW */
#design {
  padding: 56px 8%;
}

.design-image {
  text-align: center;
}

.design-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* THE FUN STUFF - BEFORE/AFTER */
#delight {
  padding: 56px 8%;
}

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  align-items: start;
  margin-top: 32px;
  justify-items: start;
}

.ba {
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.image-container {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 100%;
  box-sizing: border-box;
}

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

.ba figcaption {
  font-weight: 600;
  font-size: 16px;
  color: #1d0f22;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .before-after {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .image-container {
    padding: 16px;
    min-height: 250px;
  }
}

/* After GIF blur effect */
.after-blur {
  filter: blur(8px);
  transition: filter 0.3s ease;
}

.after-blur:hover {
  filter: blur(4px);
}

/* Disclaimer styling */
.disclaimer {
  padding: 24px 8%;
  text-align: center;
  background: #4a3c5a;
  border-radius: 12px;
  margin: 32px 8% 0;
}

.disclaimer p {
  margin: 0;
  font-style: italic;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .disclaimer {
    margin: 24px 6% 0;
    padding: 20px 6%;
  }
  
  .disclaimer p {
    font-size: 13px;
  }
}

/* Remove shadow from first two boxes */
.image-container.no-shadow {
  box-shadow: none;
}

/* Remove internal outlines from image containers */
.image-container.no-shadow {
  box-shadow: none;
  border: none;
  outline: none;
}

.image-container.no-shadow img {
  border: none;
  outline: none;
  box-shadow: none;
}

/* USABILITY TESTING */
#testing {
  padding: 56px 8%;
}

.testing-image {
  text-align: center;
  margin-top: 32px;
}

.testing-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Key learnings text color override */
#learnings .panel {
  color: #000000 !important;
}

#learnings .panel ul {
  color: #000000 !important;
}

#learnings .panel li {
  color: #000000 !important;
}

/* Make close button always visible and sticky */
.rc-close {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* AI Meeting - Make close button always visible */
.btn-close {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Copyright watermark - REMOVED FIXED POSITIONING */
.copyright {
  position: absolute;
  bottom: 20px;
  left: 8%;
  z-index: 1000;
}

.copyright p {
  color: #b7bcc6;
  font-size: 12px;
  margin: 0;
  font-family: inherit;
}

@media (max-width: 768px) {
  .copyright {
    left: 6%;
  }
}

/* Scroll to top button */
#scrollTop {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid transparent;
  color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
  display: none; /* Hidden by default */
  bottom: 20px;
  right: 20px;
  align-items: center;
  justify-content: center;
}

#scrollTop:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Show scroll button when needed */
#scrollTop.show {
  display: flex !important;
  visibility: visible !important;
}


#scrollTop svg {
  width: 16px;
  height: 16px;
}

/* Standard chevron button styling */
.work-button .button-arrow {
  display: none;
}

.work-button::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=0 0 24 24 xmlns=http://www.w3.org/2000/svg%3E%3Cpath d=M6 9l6 6 6-6 stroke=currentColor stroke-width=2 fill=none stroke-linecap=round stroke-linejoin=round/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

/* Update work.html buttons to use standard chevrons */
.work-grid + .centered-row .pill svg {
  display: none;
}

.work-grid + .centered-row .pill::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=0 0 24 24 xmlns=http://www.w3.org/2000/svg%3E%3Cpath d=M6 9l6 6 6-6 stroke=currentColor stroke-width=2 fill=none stroke-linecap=round stroke-linejoin=round/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

/* Risk Controls Close Button - Light Purple Pill */
.rc-close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #E8D5F9;
  color: #000000;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.rc-close:hover {
  background: #D4C4F0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.close-icon {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* STANDARDIZED CLOSE BUTTONS - All Case Studies */
.rc-close,
.btn-close,
.close-pill,
.close-button {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  background: #E8D5F9 !important;
  color: #000000 !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  cursor: pointer !important;
}

.rc-close:hover,
.btn-close:hover,
.close-pill:hover,
.close-button:hover {
  background: #D4C4F0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Close icon styling */
.rc-close .close-icon,
.btn-close span,
.close-pill span,
.close-button .close-icon {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .rc-close,
  .btn-close,
  .close-pill,
  .close-button {
    top: 16px !important;
    right: 16px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
}

/* UPDATED STANDARDIZED CLOSE BUTTONS - 44x44px Height */
.rc-close,
.btn-close,
.close-pill,
.close-button,
.cs-close {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 20px !important;
  background: #E8D5F9 !important;
  color: #000000 !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 22px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.rc-close:hover,
.btn-close:hover,
.close-pill:hover,
.close-button:hover,
.cs-close:hover {
  background: #D4C4F0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Close icon styling */
.rc-close .close-icon,
.btn-close span,
.close-pill span,
.close-button .close-icon,
.cs-close span {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Scaling Sustainability specific - keep teal color but ensure visibility */
.theme--sustainability .cs-close,
.theme--sustainability [data-id="close-btn"] {
  background: transparent !important;
  color: #39CDD8 !important;
  border: 1px solid #39CDD8 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.theme--sustainability .cs-close:hover,
.theme--sustainability [data-id="close-btn"]:hover {
  background: rgba(57, 205, 216, 0.1) !important;
  color: #39CDD8 !important;
  border-color: #39CDD8 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .rc-close,
  .btn-close,
  .close-pill,
  .close-button,
  .cs-close {
    top: 16px !important;
    right: 16px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
  }
}


/* === CLEAN NAVIGATION LAYOUT === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg, #fff);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 8%;
}

.topnav .menu {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topnav a {
  text-decoration: none;
  color: var(--fg, #000);
  opacity: 0.85;
}

.topnav a:hover {
  opacity: 1;
}

/* Hide mobile pill on desktop */
@media (min-width: 769px) {
  .nav-pill {
    display: none;
  }
  
  .menu--mobile {
    display: none;
  }
}

/* Show mobile pill on mobile */
@media (max-width: 768px) {
  #desktopMenu {
    display: none;
  }
  
  .nav-pill {
    display: inline-flex;
  }
  
  /* Ensure only one mobile menu system is active */
  .menu--mobile { display: none !important; }
}

/* === SIMPLE CLOSE BUTTONS === */
.close-button {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #CFA254;
  border: none;
  border-radius: 20px;
  color: white;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
}

.close-button:hover {
  background-color: #B8903A;
  transform: translateY(-1px);
}

/* === SECTION-AWARE NAVIGATION === */
.site-nav {
  position: sticky; 
  top: 0; 
  z-index: 1000;
  color: var(--fg, #000); 
  background: var(--bg, #fff);
  transition: color .2s ease, background-color .2s ease;
}

.site-nav .nav-link { 
  opacity: .9; 
  text-decoration: none; 
}

.site-nav .nav-link:hover { 
  opacity: 1; 
  text-decoration: underline; 
}

/* Active tab */
.site-nav .nav-link[aria-current="page"] {
  font-weight: 600; 
  text-decoration: underline;
}

/* Invert when over dark section */
.site-nav.nav--invert {
  background: #000; 
  color: #fff;
}

.site-nav.nav--invert .nav-link { 
  color: #fff; 
}

.site-nav:not(.nav--invert) .nav-link { 
  color: #000; 
}

/* Case studies section is already black; ensure it is marked */
.section-case-studies { 
  background: #000; 
  color: #fff; 
}

/* Ensure header logo color based on theme */
.site-header[data-theme="light"] .brand {
  color: #111 !important;
}
.site-header[data-theme="dark"] .brand {
  color: #fff !important;
}
/* Homepage logo should be black */
body.home .site-header .brand,
body.theme-light .site-header .brand,
body.page-home .site-header .brand,
body.page-home .site-logo,
body.page-home .brand,
body.page-home .logo-text {
  color: #111 !important;
  -webkit-text-fill-color: #111;
}
/* When scrolling over case-studies section, make logo white */
body:has(.section-case-studies) .site-header .brand {
  color: #fff !important;
}

/* Hide "about me" ONLY on small screens */
@media (max-width: 768px){
  .nav-dropdown a[href*="about.html"]{ display: none !important; }
}

/* Ensure dropdown links are visible */
.nav-dd-list li a {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide nav entirely on the work page */
.page-work [data-nav="menu-btn"],
.page-work [data-nav="menu-dropdown"],
.page-work [data-nav="menu-scrim"],
.page-work .site-header,
.page-work-fallback .site-header{
  display: none !important;
}

/* Kill any outlines/borders on the scroll control on work page */
.page-work .scroll-btn,
.page-work .scroll-btn:focus,
.page-work .scroll-btn:focus-visible,
.page-work .scroll-btn *,
.page-work button#scrollTop,
.page-work #scrollTop,
.page-work .back-to-top,
.page-work #scrollTop img,
.page-work .back-to-top img {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-color: transparent !important;
}


.to-top.show { 
  display: inline-flex; 
}

/* === CONTACT FORM STYLES === */
.contact-main {
  padding: 60px 8%;
  max-width: 800px;
  margin: 0 auto;
}

.contact-hero {
  text-align: center;
  margin-bottom: 60px;
}

.contact-hero h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--fg, #000);
}

.contact-hero p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg, #000);
  opacity: 0.8;
}

.contact-form {
  background: var(--bg, #fff);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--fg, #000);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #CFA254;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.btn.btn-pill {
  background: #CFA254;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn.btn-pill:hover {
  background: #B8903A;
}

/* === CASE STUDIES SECTION === */
.section-case-studies {
  background: #000;
  color: #fff;
  padding: 80px 8%;
}

.case-studies-container {
  max-width: 1200px;
  margin: 0 auto;
}

.case-studies-container h2 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 60px;
  color: #fff;
}

.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-bottom: 60px;
}

.case-study-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-study-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.case-study-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.case-study-card h3 {
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

.case-study-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 24px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.btn-pill {
  background: #CFA254;
  color: white;
}

.btn-pill:hover {
  background: #B8903A;
  transform: translateY(-2px);
}

/* === TESTIMONIALS SECTION === */
.testimonials-section {
  padding: 80px 8%;
  background: var(--bg, #fff);
}

.testimonials-container {
  max-width: 1200px;
  margin: 0 auto;
}

.testimonials-container h2 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 60px;
  color: var(--fg, #000);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.testimonial-card {
  background: var(--bg, #fff);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  border-left: 4px solid #CFA254;
}

.testimonial-card p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: var(--fg, #000);
  font-style: italic;
}

.testimonial-card cite {
  font-size: 14px;
  color: var(--fg, #000);
  opacity: 0.7;
  font-style: normal;
}

/* === HERO TYPOGRAPHY === */
.hero-title {
  font-size: clamp(2.2rem, 4vw, 4.25rem);
  line-height: 1.05;
  margin: 0 0 .25em;
  color: var(--fg);
}
.hero-subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  line-height: 1.3;
  margin: 0 0 .75em;
  color: color-mix(in oklab, var(--fg), transparent 20%);
}

/* Hero Layout */
.hero-selfcontained { 
  padding: 20px 24px 32px; /* Reduced top padding from 56px to 20px */
}

.hero-selfcontained .hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: start;
  gap: clamp(24px, 4vw, 48px);
}

/* Copy section */
.hero-selfcontained .hero-copy h1 { 
  font-size: clamp(56px, 9vw, 128px); 
  line-height: .9; 
  margin: 0 0 20px; 
}

.hero-selfcontained .hero-copy .hero-subtitle {
  margin-top: -30px; /* Move text 30 pixels above from title */
}

.hero-selfcontained .hero-copy .kicker { 
  font-weight: 600; 
  margin: 0 0 8px; 
}

.hero-selfcontained .hero-copy .sub { 
  margin: 0 0 18px; 
  max-width: 48ch; 
}

/* Visual section */
.hero-selfcontained .hero-visual { 
  position: relative; 
}

.hero-selfcontained .hero-img {
  display: block; 
  width: 100%; 
  height: auto;
  max-height: 520px; 
  object-fit: contain; 
  object-position: right center;
}

/* Responsive */
@media (max-width: 1100px) {
  .hero-selfcontained .hero-inner { 
    grid-template-columns: 1fr; 
  }
  
  .hero-selfcontained .hero-visual { 
    margin-top: 14px; 
  }
  
  .hero-selfcontained .hero-img { 
    max-height: 540px; 
  }
}

/* Reduce top white space */
.hero-section {
  padding-top: clamp(2rem, 5vh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 900px) {
  .hero-section {
    align-items: center;
    text-align: left;
    gap: 1.2rem;
  }
}

/* Hero body text styling */
.hero-body {
  margin: 1.5rem 0;
}

.hero-body p {
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg, #000);
}

/* Force line breaks to work in hero body */
.hero-body br {
  display: block;
  content: "";
  margin-top: 0.5rem;
}

/* Pills styling - non-clickable */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 1.5rem 0;
}

.pills span {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  background: #fff;
  color: #000;
  cursor: default; /* Make them non-clickable */
  user-select: none; /* Prevent text selection */
}

/* Button centering and new look */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2.5rem auto 0;
  padding: 0;
  background: none;
  border: none;
  transition: transform .2s ease;
  text-decoration: none;
  position: relative;
}
.btn-cta img {
  display: block;
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 60px;
}
.btn-cta:hover {
  transform: translateY(-2px);
}

/* Case Studies Section Styling */
.section-case-studies {
  background: #000;
  color: #fff;
  padding: 4rem 2rem;
  min-height: 100vh;
}

.case-studies-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* CASE STUDIES layout */
.work-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: clamp(16px, 3vw, 36px);
  align-items: stretch;
  margin-bottom: 3rem;
}

/* Single card styling (keep your existing vars) */
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 653px;                 /* matches your reference */
  padding: 28px;
  border-radius: 40px;
  outline: 1.2px solid #fff;
  text-decoration: none;
  color: #fff;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.06), rgba(0,0,0,0.0)) #000;
  background-size: cover;        /* if you set background-image per card */
  background-position: center;
  transition: transform .2s ease, outline-color .2s ease;
}

.work-card:hover {
  transform: translateY(-3px);
  outline-color: var(--accent, #d6a84f);
}

/* Prevent old nested styles from affecting children (safety) */
.work-card .work-card { all: unset; }

/* Title sizing inside card */
.work-card > h3 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.6vw, 1.8rem);
  line-height: 1.15;
  color: #000000;  /* ensure text is black for accessibility */
}

/* Responsive: stack to 1–2 columns on small screens */
@media (max-width: 980px) {
  .work-cards { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 640px) {
  .work-cards { grid-template-columns: 1fr; }
}

/* Full-bleed background image */
.work-card {
  background-color: #000;                 /* keep black base */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;                        /* clip overlay to rounded corners */
}

/* Readability overlay (very subtle) */
.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.02) 35%, rgba(0,0,0,0.35) 100%);
  /* keeps the nice soft vignette while ensuring title contrast */
}

/* Per-card art (use your actual file paths) */
.card--sustainability { background-image: url("/images/scaling-sustainability.png"); }
.card--risk           { background-image: url("/images/risk-controls.png"); }
.card--ai             { 
  background-image: url("/images/ai-meeting.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Remove any pseudo-elements from AI card */
.card--ai::before,
.card--ai::after {
  display: none !important;
}

/* Remove any text shadows from AI card title */
.card--ai .work-card__title,
.card--ai h3 {
  text-shadow: none !important;
  -webkit-text-stroke: none !important;
  text-stroke: none !important;
}

/* Optional: golden border on hover/focus only */
.work-card:hover,
.work-card:focus-visible {
  outline-color: var(--accent, #d6a84f);
}

/* Other works */
.other-works { text-align: center; margin: 44px 0 24px; }
.other-works-btn { display: inline-flex; align-items: center; gap: .5rem; }
.other-works-note { opacity: .7; font-size: .95rem; margin: 10px 0 22px; }

/* Masonry with CSS Columns (tight pack, no negative vertical gaps) */
.other-works {
  /* ensure the section itself has no extra padding that creates "black bands" */
  padding-left: 0;
  padding-right: 0;
}

.other-works-grid{
  /* masonry */
  column-gap: 12px;
  columns: 5;                 /* desktop default */
  width: 100%;                /* fit within container */
  margin: 0 auto 0 -8px;      /* move 8px more towards the left */
  display: block;
  text-align: center;
}

@media (max-width: 1400px){ .other-works-grid{ columns: 4; } }
@media (max-width: 1024px){ .other-works-grid{ columns: 3; } }
@media (max-width: 700px) { .other-works-grid{ columns: 2; } }
@media (max-width: 480px) { .other-works-grid{ columns: 1; } }

.other-works-item{
  /* critical for masonry: each item flows in a column with its own height */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 12px;           /* vertical gutter only */
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}

/* media fills container with no intrinsic gaps */
.other-works-item img,
.other-works-item video{
  display: block;
  width: 100%;
  height: auto;               /* keep aspect, no forced crop */
  object-fit: cover;          /* videos okay if you switch to fixed height later */
  vertical-align: middle;     /* remove inline-gap ghosts */
}


.to-top.show { display: inline-flex; }
.to-top:hover { background: rgba(0,0,0,.9); }

/* 36px below nav; 36px above next section */
#hero {
  padding-top: 36px;     /* distance from sticky nav to hero content */
  margin-bottom: 36px;   /* distance from hero (including pills + CTA) to #case-studies */
}

/* Ensure the hero never clips its children (pills) */
#hero { overflow: visible; }

/* Make whatever pills container you use wrap nicely */
#hero .hero-pills,
#hero .pills,
#hero .chips,
#hero .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px; /* 8px vertical, 12px horizontal */
  margin: 16px 0 0;
  align-items: flex-start;
}

/* Use existing pill style; this is only a safety if pills lacked display */
#hero .pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; }

/* Container rail */
.container, .section {
  max-width: var(--content-max, 1095px);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* HERO --------------------------------------------------- */
#hero {
  display: grid;
  grid-template-columns: minmax(420px, 560px) 1fr; /* text then image */
  gap: clamp(24px, 4vw, 56px);
  align-items: center;            /* vertical centering on desktop */
  min-height: 64vh;               /* keeps generous relationship */
  padding-top: 36px;
  margin-bottom: 36px;
}

.hero-copy {
  order: 1;
  max-width: 560px;
}

.hero-illu {
  order: 2;
  display: flex;
  justify-content: center;        /* centers the illustration block */
  align-items: center;
  transform: translateX(100px);    /* move banner 100px more to the right */
}

.hero-illu img,
.hero-illu svg {
  width: 100%;
  max-width: 520px;               /* tame very wide art */
  height: auto;
}

/* Desktop text spacing to match reference */
#hero h1 { 
  margin: 0 0 8px; 
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.88;
}
#hero .hero-subtitle { 
  margin: 0 0 20px; 
  font-weight: 600;
  color: #666;
}
#hero p { 
  margin: 0 0 12px; 
  line-height: 1.6; 
}

/* MOBILE / TABLET: stack with text first, art second */
@media (max-width: 1024px) {
  #hero {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;           /* standard top alignment on mobile */
  }
  .hero-copy { order: 1; }
  .hero-illu { 
    order: 2; 
    transform: none;              /* remove transform on mobile */
  }
  .hero-illu img,
  .hero-illu svg { max-width: 420px; }
}

/* SMALL MOBILE: keep margins comfy */
@media (max-width: 640px) {
  #hero { gap: 16px; }
  .hero-illu img,
  .hero-illu svg { max-width: 360px; }
}

/* Skill "pills" */
#hero .hero-pills,
#hero .pills,
#hero .chips,
#hero .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;                 /* row / column gap */
  margin-top: 14px;
}

#hero .pill,
#hero .chip,
#hero .tag{
  display: inline-flex;
  align-items: center;
  height: 36px;                        /* consistent pill height */
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  white-space: nowrap;
  font-weight: 500;
  line-height: 1;
  cursor: default;                      /* Make them non-clickable */
  user-select: none;                     /* Prevent text selection */
}
/* Remove hover effects for non-clickable pills */
#hero .pill:hover,
#hero .chip:hover,
#hero .tag:hover{
  border-color: rgba(0,0,0,.15);       /* Keep same border color on hover */
}

/* Remove any accidental extra top margin from headings in the hero */
#hero h1, #hero .hero-title { margin-top: 0; }
#hero .hero-subtitle { margin-top: 6px; }

/* On wide screens, pull the text block up ~100px relative to the image */
@media (min-width: 1024px){
  .hero-copy{
    margin-top: -100px;   /* <-- the shift you asked for */
  }
}

/* Safety: don't let negative margin collapse with previous section */
#hero{ overflow: visible; }

/* Old desktop hero rules removed - using new responsive layout above */

/* ===== Tablet/mobile keep your current flexible layout ===== */
@media (max-width: 1199px){
  #hero{
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: 24px;
    margin-bottom: 32px;
    padding-right: 0;
  }
  .hero-illu{ justify-self: center; width: min(520px, 90vw); margin-top: 16px; transform: none; }
  .hero-copy{ width: 100%; min-height: unset; }
  .hero-body{ width: 100%; height: auto; }
}

/* Pills visual style (kept from earlier so they look like pills) */
#hero .hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px; /* 8px vertical, 12px horizontal */
  align-items: flex-start;
}

#hero .hero-pills .pill{
  display:inline-flex; align-items:center; height:36px; padding:0 14px;
  border-radius:999px; background:#fff; color:#000; border:1px solid rgba(0,0,0,.15);
  font-weight:500; line-height:1; white-space:nowrap;
}

/* ===== ABOUT: precise desktop framing (>=1200px) ===== */
/* General rule for about text box width */
.about-copy,
.about-body {
  max-width: 680px !important;          /* text box width */
}

@media (min-width: 1200px){
  .about-hero{
    display: grid;
    grid-template-columns: minmax(680px, 1fr) 1fr;     /* ensure first column is at least 680px */
    column-gap: 70px;                    /* space between them */
    align-items: center;                 /* center-align image vertically with text */
    padding-top: 36px;                   /* align with site rhythm */
    margin-bottom: 36px;
    max-width: 1200px;                   /* prevent overflow */
    margin-left: auto;
    margin-right: auto;
  }

  .about-copy{ 
    max-width: 680px;                    /* text box width */
    width: 100%;
  }
  .about-body{
    max-width: 680px;                    /* text box width */
    width: 100%;
    min-height: 511px;                   /* body text box height */
  }

  .about-illu{ 
    max-width: 500px;                    /* image width */
    width: 100%;
    height: 400px;                       /* image height - maintaining aspect ratio */
    margin-left: 0px;                    /* image aligned at grid column start (moved 60px total to left) */
    border-radius: 20px;                 /* rounded corners */
    overflow: hidden;                    /* ensure image respects border-radius */
  }
  .about-illu img, .about-illu svg{ 
    width: 100%; 
    height: 100%; 
    object-fit: cover;                   /* fill container while maintaining aspect ratio */
    display: block; 
    border-radius: 20px;                 /* rounded corners */
  }
}

/* Tablet/Mobile: keep current flow */
@media (max-width: 1199px){
  .about-hero{ display: grid; grid-template-columns: 1fr; row-gap: 20px; }
  .about-copy, .about-body{ 
    width: 100%; 
    min-height: unset;
    max-width: 680px !important; /* maintain width on mobile/tablet */
  }
  .about-illu{ width: min(520px, 92vw); justify-self: center; height: auto; }
}

/* Pills (reuse hero look) */
.about-pills{ display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 20px; }
.about-pills .pill{
  display:inline-flex; align-items:center; height:36px; padding:0 14px;
  border-radius:999px; background:#fff; color:#000; border:1px solid rgba(0,0,0,.15);
  font-weight:500; line-height:1; white-space:nowrap;
}

/* Quick polish for the "close/scroll" buttons on this page */
@media (max-width: 640px) {
  .close-btn, .scroll-btn {
    width: 42px; height: 42px;
    top: 18px; right: 18px;       /* close */
    bottom: 24px;                 /* scroll */
  }
}

/* Contact button using your SVG; single-element anchor */
.btn-contact{
  display:inline-block;
  width: 184px;                          /* adjust to your SVG intrinsic size if needed */
  height: 48px;
  background: url("/images/buttons/contact-me.svg") no-repeat center / contain;
  text-indent: -9999px; overflow: hidden; border: 0; border-radius: 999px;
  margin-top: 10px !important;          /* moved 30px higher */
}

/* optional hover pop (no color changes since art is in the SVG) */
.btn-contact:hover { transform: translateY(-1px); transition: transform .15s ease; }

/* Quote and spacing before testimonials */
.about-quote{
  margin: 60px auto 20px;                /* 60px above testimonials */
  max-width: 900px; text-align: center;
  font-style: italic; color: rgba(255,255,255,.9);
}

/* Ensure testimonials start exactly after the quote spacing */
#testimonials{ margin-top: 0; }

/* Inverted nav (white on black) – used on dark pages like About/Contact */
.site-nav.nav--invert { background:#000; color:#fff; }
.site-nav.nav--invert .nav-link { color:#fff; }
.site-nav .nav-link[aria-current="page"] { text-decoration: underline; font-weight:600; }

/* Centered page container with equal side padding */
.container{
  width: min(1200px, 96vw);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 60px);  /* equal on both sides */
}

/* About section container to prevent overflow */
.about-hero.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
  box-sizing: border-box;
}

/* Keep About hero's exact framing from earlier; no change needed to sizes */

/* ===== Testimonials spacing: exactly 60px below pills (moves section up) ===== */
/* (This replaces previous tighter values) */
.about-quote{
  margin-top: 60px;     /* pills → "Testimonials" block gap */
  text-align: left;     /* left-align header/subtext area */
}
.testimonials-head,
.testimonials-head .sub{
  text-align: left;     /* ensure left alignment */
}

/* Testimonials section spacing */
#testimonials{
  margin-top: 40px;   /* normal spacing */
}

/* If you still have a separate quote element right above, keep it tight */
.about-quote{ margin-bottom: 0; }

/* REMOVE unintended grey background/border from the testimonials header */
.testimonials-head{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0;                /* keeps it flush */
}

/* Keep heading + subtext left-aligned (from earlier) */
.testimonials-head h2{
  margin: 0 0 10px;
  font-style: normal;
  text-align: left;
  font-size: 2.5rem;
  color: #fff;
}
.testimonials-head .sub{
  margin: 0 0 18px;
  opacity: .85;
  font-style: italic;
  text-align: left;
  color: rgba(255, 255, 255, 0.9);
}

/* Ensure testimonials grid is left-aligned */
.testimonials-grid {
  text-align: left;
}

/* ————— TYPOGRAPHY: remove italics from cards only ————— */
#testimonials .card p,
#testimonials .card .body,
#testimonials .card blockquote { font-style: normal !important; }

/* ————— LAYOUT: 2×2 grid, tight, no forced equal heights ————— */
#testimonials .testimonials-grid{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);   /* two by two */
  gap: 16px;                               /* reduced spacing */
  align-items: start;                       /* cards keep natural height */
  grid-auto-rows: auto;                     /* do NOT force row heights */
  row-gap: 16px;                           /* tighter vertical spacing */
}

/* mobile fallback: single column */
@media (max-width: 900px){
  #testimonials .testimonials-grid{ grid-template-columns: 1fr; }
}

/* make sure cards don't carry any old fixed heights */
#testimonials .card{
  display: block;
  height: auto !important;
  min-height: 0 !important;
}

/* Individual testimonial cards */
.testimonial-card{
  background: transparent;         /* remove black background */
  border: none;                   /* remove border */
  border-radius: 12px;
  padding: 20px;                 /* reduced padding */
  display: block;                 /* cancel any flex container if present */
  height: auto !important;
  min-height: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 0;               /* remove any bottom margin */
}

.testimonial-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* ===== Avatar row left-aligned inside cards (kept from before, reinforced) ===== */
#testimonials .card .header,
#testimonials .card .person,
#testimonials .card .top,
#testimonials .card .meta{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}
#testimonials .card .avatar,
#testimonials .card img.avatar{
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: 50%; object-fit: cover; margin-left: 0;
}

/* Photo circle placeholder - left aligned */
.testimonial-photo{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.photo-circle{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  flex: 0 0 56px;
  margin-left: 0;
}

/* Left-align avatar circles within each testimonial card */
#testimonials .testimonial-card .testimonial-photo{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

/* Make sure the circle itself sits on the left edge */
#testimonials .testimonial-card .photo-circle{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: 0;
  flex: 0 0 56px;
}

/* Avatar images */
.testimonial-photo .avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 56px;
  margin-left: 0;
}

/* Testimonial content */
.testimonial-content{
  text-align: left;
}

.testimonial-name{
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 4px 0;
  font-style: normal;
}

.testimonial-designation{
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 12px 0;           /* reduced bottom margin */
  font-style: normal;
}

.testimonial-text{
  font-size: 0.95rem;
  line-height: 1.5;              /* tighter line height */
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-style: normal;
}

/* Make the testimonials grid let cards size to content */
#testimonials .testimonials-grid{
  align-items: start;             /* avoids stretching shorter cards */
  grid-auto-rows: auto;           /* no equal-height forcing */
}

/* Let each card be as tall as its content (not flex-stretched) */
#testimonials .card{
  display: block;                 /* cancel any flex container if present */
  height: auto !important;
  min-height: 0 !important;
}

/* Ensure the body copy wraps normally and doesn't reserve space */
#testimonials .card .body,
#testimonials .card p{
  white-space: normal !important;
  overflow: visible;
}

/* Optional: trim bottom padding a touch if needed */
#testimonials .card .body{ margin-bottom: 0.5rem; }

/* Keep the avatar row left-aligned (from earlier) */
#testimonials .card .header,
#testimonials .card .person,
#testimonials .card .top,
#testimonials .card .meta{
  display:flex; align-items:center; gap:12px; justify-content:flex-start;
}
#testimonials .card .avatar, #testimonials .card img.avatar{
  width:56px; height:56px; flex:0 0 56px; border-radius:50%; object-fit:cover;
}

/* === Testimonials: flexible 2-column masonry (no empty holes) === */
/* Replace rigid row-aligned grid with CSS Columns masonry */
#testimonials .testimonials-grid{
  /* was: display:grid; grid-template-columns:repeat(2,1fr); gap:24px; */
  columns: 2;                 /* two columns on desktop */
  column-gap: 24px;           /* horizontal gutter */
  width: 100%;
  margin-top: 0;              /* ensure section stays tight */
}

/* Each card flows inside a column; avoid splitting and fixed heights */
#testimonials .testimonials-grid .card,
#testimonials .testimonials-grid .testimonial-card{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 24px;           /* vertical gutter only */
}

/* Make inner body copy wrap naturally (no reserved space) */
#testimonials .card .body,
#testimonials .card p{
  white-space: normal !important;
  overflow: visible;
}

/* Keep avatar row left-aligned */
#testimonials .card .header,
#testimonials .card .person,
#testimonials .card .top,
#testimonials .card .meta{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

/* Mobile: single column */
@media (max-width: 900px){
  #testimonials .testimonials-grid{ columns: 1; column-gap: 0; }
}

/* Keep your 2×2 grid as-is. Just reorder the two cards visually. */
#testimonials .testimonials-grid{
  display: grid;                     /* already set per your last change */
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: start;
  grid-auto-flow: row dense;         /* pack tightly, allow reordering */
}

/* AFTER — 2-column masonry via CSS Columns (packs with zero empty gaps) */
#testimonials .testimonials-grid{
  columns: 2;                 /* two columns on desktop */
  column-gap: 24px;
  width: 100%;
  margin: 0;                  /* use container padding instead */
  padding: 0;                 /* let container handle padding */
  text-align: left;           /* ensure left alignment */
}

/* Each card flows as a column item; avoid splitting and fixed heights */
#testimonials .testimonials-grid .card,
#testimonials .testimonials-grid .testimonial-card{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 24px;           /* vertical gutter only */
}

/* Mobile: single column, still tight */
@media (max-width: 900px){
  #testimonials .testimonials-grid{ columns: 1; column-gap: 0; }
}

/* ------------------------------
   NAVIGATION LINKS — GLOBAL STYLE
------------------------------ */
.navbar {
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 40px;
  font-family: 'Inter', sans-serif;
}

/* Base style */
.nav-link {
  position: relative;
  color: inherit;
  text-decoration: none !important;    /* ← removes the browser underline */
  font-weight: 400;
  font-size: 16px;
  border-bottom: none !important;      /* ← removes any border underlines */
}

/* Hover color and underline animation */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background-color: #C29314;
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: #C29314;
}

.nav-link:hover::after {
  width: 100%;
}

/* Active state — bold + underline stays visible */
.nav-link.active {
  font-weight: 700;
  color: #C29314 !important;
}

.nav-link.active::after {
  width: 100%;
  background-color: #C29314;
}

/* Optional: adjust for white/dark backgrounds */
.white-bg .navbar,
.contact-main .navbar {
  color: #000;
}

.black-bg .navbar {
  color: #fff;
}

/* Contact page styling */
.contact-main {
  min-height: 100vh;
  background: #fff;
  color: #000;
}

/* Contact hero: end-to-end white background */
.contact-hero.white-bg{
  background: #fff;
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  padding: 96px 0 120px;
}

/* Prevent horizontal scroll from full-width background */
body{ overflow-x: hidden; }

.contact-hero .container{          /* full width container */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5vw;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr; /* left: text, right: image */
  gap: 72px;
  align-items: start;
}

/* Title and spacing per reference - left aligned */
.contact-title{
  font-size: clamp(48px, 8vw, 104px);
  line-height: 0.9;
  margin: 0 0 48px 0;
  font-weight: 700;
  color: #000;
  text-align: left;
}

/* List - left aligned */
.contact-list{ 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  text-align: left;
}
.contact-item{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px 16px;
  align-items: start;
  margin-bottom: 20px;
  text-align: left;
}
.contact-item .icon{ 
  display:inline-flex; 
  line-height: 1; 
  color: #111; 
}
.contact-item .label{
  font-weight: 600;
  margin-bottom: 2px;
  color: #000;
  text-align: left;
}
.contact-item .value{ 
  opacity: .9; 
  color: #000; 
  text-align: left;
}
.contact-item .link{
  text-decoration: none;
  border-bottom: 1px solid transparent;
  color: #000;
  text-align: left;
}
.contact-item .link:hover{
  border-color: currentColor;
}

/* Illustration sizing */
.contact-illustration{
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto; /* hugs the right, like your mock */
}

/* Right-align testimonials to match about me content */
.testimonials-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5vw;
}

/* Headline & paragraph spacing on the left */
.contact-hero .contact-left h1{ 
  font-size: 3.5rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 16px; 
  line-height: 1.2;
}
.contact-hero .contact-left p { 
  font-size: 1.2rem;
  color: #000;
  margin: 0 0 28px; 
  max-width: 440px; 
  line-height: 1.55; 
}

.contact-decoration {
  margin-top: 20px;
}

.leaves-banner {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
}

/* Full-width fields on the right */
#contactForm label{ display:block; margin: 18px 0 8px; }
#contactForm input,
#contactForm textarea{
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 12px;
  background: #fff;
  outline: none;
}
#contactForm textarea{ min-height: 152px; resize: vertical; }

#contactForm input:focus,
#contactForm textarea:focus{
  border-color: #C29314;
  box-shadow: 0 0 0 3px rgba(194,147,20,.18);
}

/* Handle illustration clipping */
.contact-hero .contact-left img,
.contact-hero .contact-left svg{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Send button (your yellow asset) */
.btn-send{
  display:inline-block;
  width: 92px; height: 40px;
  background: url("/images/buttons/send.svg") no-repeat center / contain;
}

/* Testimonials button styling */
.btn-testimonials {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.btn-testimonials:hover {
  transform: translateY(-2px);
}

.btn-testimonials img {
  width: auto;
  height: 40px;
  display: block;
}

/* Smooth scrolling for testimonials section */
html {
  scroll-behavior: smooth;
}
.btn-send:hover:not(:disabled) { transform: translateY(-2px); }
.btn-send:active{ transform: translateY(1px); }
.btn-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Inline error text + error states */
.field-error{
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: #ff6b6b;
  font-weight: 500;
}
input[aria-invalid="true"],
textarea[aria-invalid="true"]{
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
}

/* Toast */
.toast{
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: #111;
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.1);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}
.toast.show{
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .work-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  
  .other-works-btn {
    padding: 0.8rem 1.5rem;
  }

  /* Responsive */
  .contact-hero .container{ 
    grid-template-columns: 1fr; 
    gap: 48px; 
  }
  .contact-illustration{ margin: 0 auto; }
  
  .contact-title {
    font-size: 2.5rem;
  }
}

/* Old testimonials styles removed - replaced with new section-testimonials */

/* Nav active color everywhere */
.nav-link.active{ color: #C29314 !important; font-weight: 700; }
.nav a.active{ color: #C29314; font-weight: 700; }

/* Contact page active nav */
.nav a.active {
  color: #C29314;
  font-weight: 700;
  text-decoration: none;
}

/* --- About: prevent hero/CTA from overlapping the next section --- */
.about-hero, .about-intro, .about-pills {
  position: relative;
  z-index: 1;
  margin-bottom: 32px; /* ensures breathing room above testimonials */
}

.about .cta-row { margin-top: 24px; } /* your 'contact me' button row */

/* Align pills to match about me text and contact button */
.about-pills {
  /* Remove any transform to align with parent container */
  transform: none;
}

/* --- Testimonials section --- */
.section-testimonials {
  position: relative;
  z-index: 0;
  background: #0a0a0a;            /* black band, no glass effect */
  color: var(--fg, #fff);
  padding: 60px 0;                 /* top/bottom band */
  clear: both;                     /* hard stop for any floats above */
}

.section-testimonials .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-testimonials .section-title {
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 36px);
  margin: 0 0 12px 0;
}

.testimonial-quote {
  font-style: normal;              /* not italic */
  opacity: 0.9;
  margin: 0 0 32px 0;
  max-width: 80ch;
}

/* Grid that actually fills the row */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 28px;
}

@media (max-width: 880px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* Cards */
.testimonial-card {
  background: #151515;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 16px;
  row-gap: 8px;
}

.testimonial-card .avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  grid-row: 1 / span 2;
}

.testimonial-card .meta h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.testimonial-card .meta .role {
  margin: 2px 0 0 0;
  opacity: 0.85;
  font-size: 14px;
}

.testimonial-card .body {
  grid-column: 1 / -1;            /* spans full width under header */
  margin: 10px 0 0 0;
  line-height: 1.55;
}

/* === About > Testimonials tweaks (requested) === */
.section-testimonials {
  margin-top: 200px;            /* push section down by ~200px */
}

.section-testimonials,
.section-testimonials * {
  text-align: left;             /* left-align everything in the band */
}

.section-testimonials .section-title,
.section-testimonials .testimonial-quote,
.section-testimonials .testimonial-card,
.section-testimonials .testimonial-card .body,
.section-testimonials .testimonial-card .meta,
.section-testimonials .testimonial-card .role {
  color: #fff !important;       /* force white text inside the band */
}

/* if the heading had an accent color applied elsewhere, neutralize it here */
.section-testimonials .section-title {
  -webkit-text-fill-color: #fff;   /* Safari quirk guard */
}

/* ==== Contact: full-bleed hero fix ==== */
.full-bleed {
  width: 100%;
  background: #fff;             /* white band covers the viewport */
}

.contact-hero {                 /* guard against any inherited black */
  background: #fff;
}

.contact-hero .contact-inner {
  max-width: 1200px;            /* same site container width */
  margin: 0 auto;               /* center the grid within the band */
  padding: 96px 24px 120px;     /* keep your existing spacing */
}

.contact-hero .contact-grid {
  display: grid;
  grid-template-columns: minmax(320px, 520px) 1fr; /* left info + right art */
  gap: 72px;
}

/* prevent accidental horizontal scroll on very wide screens */
html, body { overflow-x: hidden; }

/* Remove old hack if present (kept scoped) */
.contact-hero[style*="translateX"],
.contact-hero.full-bleed[style*="translateX"] {
  transform: none !important;
  width: 100% !important;
}

.contact-hero { width: auto; }

/* --- About: safe spacing under pills/CTA --- */
.about-pills, .about-cta, .about-tags { /* use the classes you have on the pills row & button */
  margin-bottom: 48px;                  /* gives breathing room */
  position: relative;
  z-index: 1;                           /* sits above the hero bg only */
}

/* --- Testimonials full-bleed band --- */
.testimonials {
  background: #0B0B0B;                  /* solid, no "glass" */
  width: 100%;
  padding: 96px 0 120px;
  margin-top: 120px;                    /* moved up by 50px (was 170px) */
  position: relative;
  z-index: 0;
  clear: both;                          /* in case anything above floats */
}

/* align title & quote with the same site container */
.testimonials .container {
  max-width: 1200px;                    /* match your site container */
  margin: 0 auto;
  padding: 0 24px;
}

/* Title & subtitle (left aligned, white) */
.t-title {
  color: #fff;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  margin: 0 0 16px;
}

.t-sub {
  color: #fff;
  opacity: 0.85;
  font-style: italic;                    /* make quote text italic */
  margin: 0 0 48px;
}

/* Two-column flexible grid with proper spacing */
.t-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;       /* simple 2-column grid */
  gap: 20px;                            /* 20px padding between cards */
}

@media (max-width: 899px) {
  .t-grid {
    grid-template-columns: 1fr;         /* single column on mobile */
  }
}

/* Card styling with proper spacing */
.t-card {
  background: #181818;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 24px;
  color: #fff;                          /* force white text */
  margin-bottom: 20px;                  /* 20px bottom margin for spacing */
}

/* Make testimonial images circular */
.t-card .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;                   /* circular images */
  object-fit: cover;                    /* maintain aspect ratio */
  display: block;
}

/* Make sure nothing above creates a stacking "glass" overlay */
.about-hero,
.about-wrap {                            /* whichever wrapper you use above */
  position: relative;
  z-index: 1;
}

/* Make the whole contact page actually white */
body.contact-page { background: #fff; }

/* Full-bleed hero band */
.contact-hero {
  width: 100vw;             /* span viewport width */
  background: #fff;         /* the white you want from edge to edge */
  margin: 0;                /* kill inherited margins */
  padding: clamp(40px, 6vw, 96px) 0;
  position: relative;
  left: 50%;                /* make 100vw center correctly inside document flow */
  right: 50%;
  margin-left: -50vw;       /* classic full-bleed centering trick */
  margin-right: -50vw;
}

/* Inner content aligned with the rest of the site */
.contact-hero .inner {
  max-width: 1200px;        /* match your site container */
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;  /* text | illustration */
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

/* Left column */
.contact-copy h1 {
  font-size: clamp(40px, 9vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  color: #0b0b0b;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #0b0b0b;
}
.contact-list li + li { margin-top: 20px; }

/* Right column */
.contact-illustration {
  display: grid;
  justify-items: end;
}
.contact-illustration img {
  max-width: min(560px, 42vw);
  height: auto;
  display: block;
}

/* Mobile stack */
@media (max-width: 900px) {
  .contact-hero .inner {
    grid-template-columns: 1fr;
  }
  .contact-illustration {
    justify-items: start;
    margin-top: 24px;
  }
}

/* Safety: no horizontal scroll bars from the full-bleed trick */
html, body { overflow-x: hidden; }

/* A: neutralize main only on contact page */
body.contact-page main { background: transparent; }

/* or B: force the hero to sit above any dark wrapper */
.contact-hero { z-index: 0; position: relative; }

/* Page shell */
body.contact-page { 
  background: #fff; 
  color: #000; 
  overflow-x: hidden; 
}

/* Hero full-bleed */
.contact-hero {
  width: 100vw; 
  background: #fff;
  position: relative; 
  left: 50%; 
  margin-left: -50vw;
  padding: 10px 0 20px; /* Minimal padding to eliminate scroll */
  height: 100vh; /* Full viewport height */
  display: flex;
  align-items: center;
}

/* Inner grid */
.contact-inner {
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 32px;
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  align-items: center; 
  gap: 30px; /* Further reduced from 40px to 30px */
  height: 100%; /* Use full height of parent */
}

/* Left */
.contact-left h1 {
  font-weight: 800; 
  line-height: 1.1;
  font-size: clamp(48px, 7vw, 80px); 
  margin: 0 0 40px;
  text-align: left;
}
.contact-details { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  font-size: 18px; 
}
.contact-details li { 
  margin: 0 0 18px; 
}
.contact-details a { 
  color: #000; 
  text-decoration: none; 
  border-bottom: 1px solid #000; 
}

/* Right (use background image as the reliable visual) */
.contact-right {
  height: 100%; /* Use full height of parent */
  background: center / contain no-repeat url("/images/leaves-banner.png"); /* try the PNG version */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* Ensure icons can appear outside bounds */
}

/* Simple floating icons using icons.png from assets/rc/ */
.floating-icons {
  position: relative;
  width: 100%;
  height: 100%;
}

.floating-icon {
  position: absolute;
  width: 270px; /* Increased from 230px to 270px (+40px) */
  height: 270px; /* Increased from 230px to 270px (+40px) */
  background: url("assets/rc/icons.png") no-repeat center;
  background-size: contain;
  animation: float 3s ease-in-out infinite;
  z-index: 100;
  pointer-events: none;
}

/* Position the single large icon */
.floating-icon.icon-1 {
  top: calc(50% - 200px); /* Pushed 200px up from center */
  left: calc(50% + 20px); /* Pushed 20px to the right */
  transform: translate(-50%, -50%);
  animation-delay: 0s;
}

/* Floating animation */
@keyframes float {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .floating-icon {
    width: 190px; /* Increased from 150px to 190px (+40px) */
    height: 190px; /* Increased from 150px to 190px (+40px) */
  }
  
  /* Reduce contact hero padding on mobile */
  .contact-hero {
    padding: 20px 0 40px;
  }
}
.contact-right img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Mobile */
@media (max-width: 900px) {
  .contact-inner { 
    grid-template-columns: 1fr; 
    gap: 32px; 
  }
  .contact-left { 
    text-align: center; 
  }
  .contact-right { 
    min-height: 300px; 
    background-position: center; 
  }
}

/* 0) Page flag */
body.contact-page{ background:#fff; color:#000; overflow-x:hidden; }

/* Fix contact page navigation - ensure clean white header */
body.contact-page .site-header {
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

body.contact-page .nav-link {
  color: #000 !important;
}

body.contact-page .nav-link.active {
  color: #C29314 !important;
  background: transparent !important;
  font-weight: 700;
}

/* Override nav--invert for contact page - keep it white */
body.contact-page .site-nav.nav--invert {
  background: #fff !important;
  color: #000 !important;
}

body.contact-page .site-nav.nav--invert .nav-link {
  color: #000 !important;
}

/* 1) Full-bleed hero (no parent container!) */
.contact-hero{
  position:relative;
  width:100vw; left:50%; margin-left:-50vw;  /* true edge-to-edge */
  background:#fff;
  padding: clamp(32px, 4vw, 56px) 0; /* Reduced top padding significantly */
}

/* 2) Two-column inner grid with safe max width */
.contact-inner{
  max-width:1200px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:64px;
}

/* Add left padding to contact content */
.contact-left {
  padding-left: 80px; /* Reduced from 200px to 80px */
}

/* 3) Left column */
.contact-left h1{
  margin:0 0 28px; line-height:.95;
  font-size:clamp(56px, 8vw, 96px); font-weight:800;
  text-align: left;  /* left align the title */
}
.contact-details{ 
  list-style:none; margin:0; padding:0; font-size:18px; 
  text-align: left;  /* left align the contact details */
}
.contact-details li{ 
  margin:0 0 16px; /* 16px between clusters */
  display: flex;
  align-items: flex-start;
  gap: 8px; /* Reduced from 12px to 8px to match Figma */
}

.contact-details a{ 
  color:#000; 
  text-decoration:none; 
  border-bottom:1px solid #000; 
}

/* Contact icons styling */
.contact-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px; /* Align with text baseline */
}

/* Contact details text styling */
.contact-details strong {
  font-weight: 600;
  display: inline; /* Changed from block to inline for same-line display */
  margin-right: 8px; /* 8px space between label and value */
}

/* 4) Right column = reliable background artwork */
.contact-right{
  min-height:460px; border-radius:24px;  /* optional visual polish */
  background: center right / contain no-repeat url("/images/leaves-banner.png");
}

/* 5) Mobile */
@media (max-width: 900px){
  .contact-inner{ grid-template-columns:1fr; gap:32px; }
  .contact-right{ min-height:300px; background-position:center; }
  .contact-left{ 
    text-align:left; 
    padding-left: 24px; /* reduce padding on mobile */
  }
}

/* Watermark styling removed */

/* Header theme: white logo/text on dark pages */
.theme-dark .site-header .site-logo,
.theme-dark .site-header .site-logo a {
  color: #fff;
}

/* --- Menu button icon swap --- */
.navv2-toggle .navv2-toggle-close { display: none; width: 22px; height: 22px; }
.navv2-toggle .navv2-toggle-icon  { display: inline-block; width: 22px; height: 22px; }

.navv2-toggle.is-open .navv2-toggle-icon  { display: none; }
.navv2-toggle.is-open .navv2-toggle-close { display: inline-block; }

/* --- Dropdown sizing and type scale (smaller on mobile) --- */
.navv2-panel {
  /* tighter, like your reference */
  width: min(320px, 86vw);
  right: clamp(16px, var(--page-gutter, 24px), 40px);
  border-width: 2px;
  border-radius: 22px;
  padding: 10px;
}

.navv2-panel .navv2-link {
  /* smaller than before */
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.25;
  padding: 12px 16px;
  display: block;
  border-radius: 16px;
}

/* Highlight the current/active page in the dropdown */
.navv2-panel .navv2-link[aria-current="page"] {
  outline: 3px solid #c7a249;         /* your yellow */
  outline-offset: -3px;
}

/* Desktop header (top nav) – only active tab gets yellow */
.navv2-nav a[aria-current="page"] {
  color: #c7a249;
}
.navv2-nav a:not([aria-current="page"]) {
  color: inherit;
}

/* Hide navigation on case study pages */
.cs-page .navv2-header,
.cs-page .site-nav,
.cs-page .navv2-toggle,
.cs-page .navv2-panel { 
  display: none !important; 
}

/* ---- Header baseline ---- */
.site-header {position: sticky; top:0; z-index:1100; background:transparent}
.site-header .nav-wrap{max-width:1200px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px}

/* brand color by theme */
.site-header[data-theme="light"] .brand{color:#111}
.site-header[data-theme="dark"]  .brand{color:#fff}
.brand{font-weight:800; text-decoration:none; letter-spacing:.2px}

/* desktop inline nav */
.nav-inline{display:flex; gap:40px; align-items:center}
.nav-inline a{font-weight:700; text-decoration:none; color:var(--ink, #111); position:relative}
.site-header[data-theme="dark"] .nav-inline a{color:#fff}
.nav-inline a.is-active{color:#c9a247} /* gold for only the active page */

/* mobile pill button */
.nav-pill{display:flex; align-items:center; gap:10px; padding:10px 18px; border-radius:999px; border:2px solid #111; background:#fff; cursor:pointer}
.site-header[data-theme="dark"] .nav-pill{background:#0a0a0a; border-color:#c9a247; color:#fff}
.nav-pill__label{font-weight:800}

/* icon: pure CSS (no <img>) */
.nav-pill__icon{width:22px; height:22px; position:relative}
.nav-icon{width:22px; height:22px; position:relative}
.nav-pill__icon::before,
.nav-pill__icon::after{
  content:""; position:absolute; left:0; right:0; margin:auto; height:2px; background:currentColor; width:22px; transition:transform .2s ease, top .2s ease, opacity .2s;
}
.nav-icon::before,
.nav-icon::after{
  content:""; position:absolute; left:0; right:0; margin:auto; height:2px; background:currentColor; width:22px; transition:transform .2s ease, top .2s ease, opacity .2s;
}
.nav-pill__icon::before{top:6px}
.nav-pill__icon::after{top:14px}
.nav-icon::before{top:6px}
.nav-icon::after{top:14px}
.nav-pill[aria-expanded="true"] .nav-pill__icon::before{transform:rotate(45deg); top:10px}
.nav-pill[aria-expanded="true"] .nav-pill__icon::after{transform:rotate(-45deg); top:10px}
.nav-pill[aria-expanded="true"] .nav-icon::before{transform:rotate(45deg); top:10px}
.nav-pill[aria-expanded="true"] .nav-icon::after{transform:rotate(-45deg); top:10px}
.nav-pill.is-open .nav-pill__icon::before{transform:rotate(45deg); top:10px}
.nav-pill.is-open .nav-pill__icon::after{transform:rotate(-45deg); top:10px}
.nav-pill.is-open .nav-icon::before{transform:rotate(45deg); top:10px}
.nav-pill.is-open .nav-icon::after{transform:rotate(-45deg); top:10px}

/* mobile sheet */
.nav-sheet{position:fixed; right:24px; top:74px; background:#fff; color:#111; border:2px solid #111; border-radius:28px; padding:12px; width:clamp(260px, 60vw, 420px); z-index:1101; box-shadow:0 20px 50px rgba(0,0,0,.2)}
.site-header[data-theme="dark"] .nav-sheet{background:#111; color:#fff; border-color:#c9a247}
.nav-list{display:flex; flex-direction:column; gap:8px; padding:6px}
.nav-list a{
  display:block; padding:16px 18px; border-radius:22px; text-decoration:none;
  color:inherit; font-weight:800; font-size:clamp(16px, 2.6vw, 20px); line-height:1.15;
}
.nav-list a:focus-visible{outline:3px solid #c9a247; outline-offset:2px}
.nav-list a.is-active{box-shadow:inset 0 0 0 2px #c9a247}

/* scrim */
.nav-scrim{position:fixed; inset:0; background:rgba(0,0,0,.06); z-index:1100}

/* responsive: hide inline nav on small screens */
@media (max-width: 880px){
  .nav-inline{display:none}
}

/* ---- Case-study pages: hide header entirely ---- */
body.case-study .site-header{display:none}

/* ---- Contact page fixes ---- */
body.contact .brand{color:#fff}
body.contact .floating-badges{transform:translateY(280px)} /* push icons down 280px (100px + 80px + 100px) */
body.contact .floating-badges > *{transform:scale(1.1)}

/* Mobile responsive floating icons positioning */
@media (max-width: 900px) {
  body.contact .floating-badges{transform:translateY(280px)} /* same positioning on mobile */
}
body.contact .content a, 
body.contact .content, 
body.contact .content p {color:#111} /* ensure no white on white if that section is light */

/* Contact page text color fixes */
body.contact .contact-hero h1,
body.contact .contact-hero h2,
body.contact .contact-hero h3,
body.contact .contact-hero p,
body.contact .contact-hero span,
body.contact .contact-hero div,
body.contact .contact-hero a,
body.contact .contact-left h1,
body.contact .contact-left p,
body.contact .contact-left span,
body.contact .contact-left div,
body.contact .contact-left a {
  color: #111 !important;
}

/* Contact page navigation visibility */
body.contact .site-header[data-theme="dark"] .nav-inline a,
body.contact .site-header[data-theme="dark"] .brand {
  color: #111 !important;
}

body.contact .site-header[data-theme="dark"] .nav-pill {
  background: #fff !important;
  border-color: #111 !important;
  color: #111 !important;
}

body.contact .site-header[data-theme="dark"] .nav-sheet {
  background: #fff !important;
  color: #111 !important;
  border-color: #111 !important;
}

/* Neutralize any older menu styles that might bleed in */
.nav-sheet[hidden], .nav-scrim[hidden]{display:none !important}


/* —— Universal header/menu constants —— */
:root{
  --header-h: 72px;        /* your header height */
  --menu-w: min(88vw, 360px);
  --menu-xpad: 16px;
}

/* Ensure the header itself never clips the dropdown */
.site-header,
.navbar {
  overflow: visible !important;
  z-index: 1100 !important;              /* header layer */
}

/* Scrim to capture taps and stop background scroll */
.menu-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1198;                         /* just under dropdown */
}

/* The dropdown panel */
.menu-dropdown{
  position: fixed;
  top: calc(var(--header-h) + 8px);      /* sit just under header */
  right: 16px;
  width: var(--menu-w);
  max-height: calc(100dvh - var(--header-h) - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 2px solid #111;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1199;                          /* above everything */
}

/* Menu items sizing for mobile */
.menu-dropdown a{
  display: block;
  padding: 16px var(--menu-xpad);
  font-size: clamp(16px, 4.4vw, 20px);    /* smaller, responsive */
  font-weight: 700;
  color: #111;
  text-decoration: none;
  border-radius: 18px;                     /* for focus ring look */
}

.menu-dropdown a[aria-current="page"]{
  outline: 2px solid #B9922F;             /* your yellow highlight */
}

/* Open state */
.nav-open .menu-dropdown{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-open .menu-scrim{
  opacity: 1;
  pointer-events: auto;
}

/* Lock scroll when open */
.nav-open, .nav-open body{
  overflow: hidden !important;
  height: 100%;
}

/* Kill older systems that may still hide/cover things */
.nav-sheet, .nav-drawer, .nav-scrim { display:none !important; }

/* Contact page bubble controls */
:root{
  /* tweak this number to move the bubbles vertically */
  --contact-bubbles-offset: 100px; /* 100px down */
}

/* Be permissive with selector so it catches all pages named contact */
body.contact-page .floating-icons,
body#contact .floating-icons,
#contact .floating-icons{
  position: relative;                 /* ensure transform applies cleanly */
  transform: translateY(var(--contact-bubbles-offset));
  will-change: transform;
  z-index: 1;                         /* keep above illustration, below header */
}

/* If your icons are a UL or a wrapper, this also helps */
body.contact-page .floating-icons > *{
  transform: none !important;         /* avoid compounding transforms from old rules */
}

/* If they were getting clipped by a parent */
#contact, .contact-hero, .contact-illustration-wrap{
  overflow: visible !important;
}

/* ===== NAV DROPDOWN – universal ===== */
.site-header, .navbar { overflow: visible !important; z-index: 1100 !important; }

.menu-scrim{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.08);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1198;
}

.menu-dropdown{
  position: fixed;
  top: calc(var(--header-height, 72px) + 8px);
  right: 16px;
  width: min(86vw, 340px);
  max-height: calc(100dvh - var(--header-height,72px) - 24px);
  overflow: auto;
  background: #fff;
  border: 2px solid #111;
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  transform: translateY(-8px) scale(.98);
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 1199;
}

.menu-dropdown a{
  display: block;
  padding: 14px 18px;
  font-weight: 700;
  line-height: 1.15;
  color: #111; text-decoration: none;
  border-radius: 16px;
  margin: 6px 8px;
}

.menu-dropdown a[aria-current="page"]{
  outline: 2px solid #c8a54a; /* your yellow */
}

.nav-open .menu-scrim{ opacity: 1; pointer-events: auto; }
.nav-open .menu-dropdown{ opacity: 1; transform: none; pointer-events: auto; }

/* Smaller text on mobile so the box isn't huge */
@media (max-width: 640px){
  .menu-dropdown a{ font-size: 18px; padding: 12px 16px; }
}

/* ===== CONTACT BUBBLES – -40px down, 210px left, and 40px bigger ===== */
:root{
  --contact-bubbles-offset-y: -40px; /* was 0px, now 40px more up */
  --contact-bubbles-offset-x: -210px; /* was -180px, now 30px more left */
  --contact-bubbles-size: 40px;       /* 40px bigger */
}

body.contact-page .floating-icons,
body#contact .floating-icons,
#contact .floating-icons{
  position: relative;
  transform: translate(var(--contact-bubbles-offset-x), var(--contact-bubbles-offset-y));
  will-change: transform;
  z-index: 1;
}

/* Make floating icons bigger on contact page */
body.contact-page .floating-icons > *,
body#contact .floating-icons > *,
#contact .floating-icons > *{
  width: calc(100% + var(--contact-bubbles-size)) !important;
  height: calc(100% + var(--contact-bubbles-size)) !important;
  font-size: calc(100% + var(--contact-bubbles-size)) !important;
}

#contact, .contact-hero, .contact-illustration-wrap{
  overflow: visible !important; /* avoid clipping */
}

/* Desktop-only positioning for contact page floating icons */
@media (min-width: 1024px) {
  body.contact-page .floating-icons,
  body#contact .floating-icons,
  #contact .floating-icons{
    transform: translate(calc(var(--contact-bubbles-offset-x) - 40px), calc(var(--contact-bubbles-offset-y) - 20px));
  }
}

/* ===== Navigation Dropdown - Single Source of Truth ===== */
/* Dropdown hidden by default; revealed with .is-open */
[data-nav="dropdown"]{
  display: none;
  pointer-events: auto;
  z-index: 2100;
}
[data-nav="dropdown"].is-open{
  display: block;
}

/* Optional scrim */
[data-nav="scrim"]{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.08);
  backdrop-filter: none;             /* no blur */
  display: none;
  z-index: 2099;
}
[data-nav="scrim"].is-open{ display:block; }

/* Prevent any hover-to-open rules from older CSS */
[data-nav="dropdown"]:hover,
[data-nav="menu-btn"]:hover + [data-nav="dropdown"]{
  /* no-op; keep it purely click-driven */
}

/* While open, prevent background scroll if you like */
body.nav-locked{
  overflow: hidden;
}

/* ===== Scaling Sustainability — readable wraps ===== */
.ss-hero, .scaling-hero {        /* use whichever class your hero wrapper uses */
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;     /* text | art on desktop */
  gap: 48px;
  align-items: start;
}

.ss-copy, .scaling-copy {        /* the text column wrapper */
  max-width: 68ch;               /* comfortable line-length */
}

/* Headline + subheads balance their lines instead of hard breaks */
.ss-copy h1, .scaling-copy h1,
.ss-copy h2, .scaling-copy h2 {
  text-wrap: balance;            /* modern browsers */
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}

/* Body text: consistent measure + rhythm */
.ss-copy p, .scaling-copy p {
  max-width: 65ch;
  line-height: 1.55;
  text-wrap: pretty;             /* nicer rag on multi-line paragraphs */
  hyphens: auto;                 /* fallback for long words */
  word-break: normal;
  margin: 0 0 14px;
}

/* Type scale via clamp() so it never feels cramped or giant */
.ss-copy h1, .scaling-copy h1 { font-size: clamp(28px, 4.5vw, 56px); }
.ss-copy h2, .scaling-copy h2 { font-size: clamp(20px, 2.4vw, 28px); }
.ss-copy p,  .scaling-copy p  { font-size: clamp(16px, 1.4vw, 18px); }

/* --- Breakpoints ---
   ≥ 1200px: roomy two-column stays 
*/
@media (max-width: 1199px) {
  .ss-hero, .scaling-hero {
    grid-template-columns: 1fr;  /* stack: text above art */
  }
  .ss-copy, .scaling-copy { 
    max-width: 62ch;
  }
}

/* Tablets: tighten spacing slightly */
@media (max-width: 900px) {
  .ss-copy h1, .scaling-copy h1 { line-height: 1.08; }
  .ss-copy p,  .scaling-copy p  { max-width: 60ch; }
}

/* Phones: full width with safe gutters */
@media (max-width: 600px) {
  .ss-hero, .scaling-hero { gap: 28px; }
  .ss-copy, .scaling-copy  { 
    max-width: 58ch;
  }
}

/* ---------------------------------------
   MOBILE FIXES (APPLY LAST IN CSS FILE)
--------------------------------------- */
@media (max-width: 900px) {

  /* 1) Kill sticky titles on case-study pages (works even if the class name changes) */
  /* Any element already using sticky — by utility class, name containing 'sticky', or inline style */
  :where(.sticky, .is-sticky, [class*="sticky"], [style*="position: sticky"]) {
    position: static !important;
    top: auto !important;
  }

  /* 2) "Meeting summary experience flow" — stop icons from overlapping text
        This targets common containers & also a generic fallback so it still works if class names differ. */

  /* Section containers that might wrap your flow cards */
  :where(.meeting-summary-flow, .meeting-flow, .experience-flow, .ai-flow, [class*="experience-flow"]) {
    --flow-gap: 16px;
    --flow-icon-size: 56px;
    gap: var(--flow-gap);
  }

  /* The card itself (several class patterns + generic fallback) */
  :where(
    .flow-card, .experience-flow-card, .ai-flow-card,
    [class*="flow-card"], [class*="experience-card"], [class*="flow_item"], [class*="flow-card"]
  ) {
    /* Use a tiny grid so the icon gets its own track on mobile */
    display: grid !important;
    grid-template-columns: var(--flow-icon-size) 1fr;
    align-items: start;
    gap: 12px;
    padding: 18px 20px;
    position: relative; /* so borders/shadows remain sane */
  }

  /* Any absolutely-positioned child inside the card becomes normal flow on mobile */
  :where(
    .flow-card, .experience-flow-card, .ai-flow-card,
    [class*="flow-card"], [class*="experience-card"], [class*="flow_item"], [class*="flow-card"]
  ) :where(.icon, .badge, .step-icon, .flow-icon, img, svg) {
    /* Only touch the ones that were absolutely positioned */
    /* (If they weren't, this does nothing.) */
  }

  /* Hard reset for abs-positioned icon/badges inside cards */
  :where(
    .flow-card, .experience-flow-card, .ai-flow-card,
    [class*="flow-card"], [class*="experience-card"], [class*="flow_item"], [class*="flow-card"]
  ) > * {
    /* Normalize known "badge" types that were absolute */
  }

  /* Practical reset: target common badge/icon hooks explicitly */
  :where(
    .flow-card .step-icon,
    .flow-card .flow-icon,
    .flow-card .icon-badge,
    .experience-flow-card .step-icon,
    .experience-flow-card .flow-icon,
    .ai-flow-card .step-icon,
    .ai-flow-card .flow-icon,
    [class*="flow-card"] :where(.step-icon, .flow-icon, .icon-badge)
  ) {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: var(--flow-icon-size);
    height: var(--flow-icon-size);
    border-radius: 999px;
    display: grid;
    place-items: center;      /* centers glyph inside the round badge */
    margin: 0;                /* grid gap handles spacing */
  }

  /* Text blocks sit in the second column neatly */
  :where(
    .flow-card h3, .flow-card h4, .flow-card p,
    .experience-flow-card h3, .experience-flow-card h4, .experience-flow-card p,
    .ai-flow-card h3, .ai-flow-card h4, .ai-flow-card p,
    [class*="flow-card"] h3, [class*="flow-card"] p
  ) {
    margin: 0;
  }

  /* Ultra-narrow phones: stack icon above text */
  @media (max-width: 520px) {
    :where(
      .flow-card, .experience-flow-card, .ai-flow-card,
      [class*="flow-card"], [class*="experience-card"], [class*="flow_item"], [class*="flow-card"]
    ) {
      grid-template-columns: 1fr !important;
    }
    :where(
      .flow-card .step-icon, .flow-card .flow-icon, .flow-card .icon-badge,
      .experience-flow-card .step-icon, .experience-flow-card .flow-icon,
      .ai-flow-card .step-icon, .ai-flow-card .flow-icon,
      [class*="flow-card"] :where(.step-icon, .flow-icon, .icon-badge)
    ) {
      justify-self: start;
      margin-bottom: 8px;
    }
  }
}

/* ===================================================
   SAFE NAV CSS GUARDS
   =================================================== */
/* Keep dropdown readable + above content */
.navSheet, .nav-dropdown, #nav-dropdown, #menuDropdown {
  color: #111; background: #fff; z-index: 1200;
}

/* Scrim above the page but under the panel */
.navScrim, .nav-scrim, #navScrim { 
  z-index: 1190; background: rgba(0,0,0,.08);
}

/* About page header contrast (if it's dark) */
[data-theme="dark"] .site-header .brand { color: #fff; }

/* ===================================================
   UNIFIED NAV (safe & small)
   =================================================== */
.nav-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.12); opacity:0; pointer-events:none;
  transition:opacity .18s ease; z-index:1098;
}
.nav-scrim.is-open{ opacity:1; pointer-events:auto; }

.nav-dropdown{
  position:fixed; z-index:10010; background:#fff; color:#111;
  border-radius:22px; box-shadow:0 20px 60px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  padding:14px; width:min(88vw, 320px); opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  -webkit-overflow-scrolling: touch;
}
.nav-dropdown.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav-dd-list{ list-style:none; margin:0; padding:4px; }
.nav-dd-list li a{
  display:flex; align-items:center;
  min-height:44px; /* good tap target */
  padding:12px 14px; border-radius:16px; font-size:16px; line-height:1.2; font-weight:700;
  color:#000 !important; text-decoration:none;
}
/* Optional thin separators look (using box-shadow for crisp lines) */
.nav-dd-list li + li a { box-shadow: 0 -1px 0 rgba(0,0,0,.06) inset; }
.nav-dd-list li a:hover{ background:#f2e4be; }
.nav-dd-list li a.is-current{ outline:2px solid #c49c3a; }

@media (min-width: 480px){
  .nav-dd-list li a{ font-size:18px; padding:14px 16px; min-height:48px; }
}

/* Dark header pages: keep dropdown readable */
.theme-dark .nav-dropdown{ background:#fff; color:#111; }

/* Your pill state (text only swap; icon stays handled by your existing CSS) */
[data-nav="menu-btn"]{ position:relative; z-index:1100; }

/* Quick fixes */
.contact-floating-icons{ transform: translateX(-100px); }

@media (max-width: 768px){
  .sticky-case-title{ position:static !important; top:auto !important; }
  .meeting-flow-card{
    display:grid; grid-template-columns: 1fr; gap:14px;
    padding-top:22px; /* headroom so the icon doesn't collide */
  }
  .meeting-flow-card .flow-icon{
    position:static; margin:0 auto 6px; /* center icon above text */
  }
  .hero-copy{ max-width: 36ch; } /* gently constrain line length */
}


/* ===================================================

/* === Center Work cards on responsive breakpoints === */
/* Works no matter if your container uses grid or flex */
@media (max-width: 1200px){
  /* 1) Treat the Work/cards container as a wrap + centered row */
  #case-studies .case-grid,
  #case-studies .cards,
  #case-studies .projects,
  #case-studies .work-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;   /* <-- center items */
    align-items: flex-start;
    gap: clamp(16px, 2vw, 32px);
  }

  /* 2) If you're on CSS Grid already, make sure items themselves center */
  #case-studies .case-grid,
  #case-studies .projects-grid {
    justify-content: center;   /* center the track */
    justify-items: center;     /* center the items */
  }

  /* 3) Make individual cards center themselves if they have fixed widths */
  #case-studies .case-card,
  #case-studies .project-card,
  #case-studies .work-card,
  #case-studies .card {
    margin-left: auto;
    margin-right: auto;
    max-width: clamp(280px, 42vw, 420px);  /* keep a nice readable width */
  }
}

/* Optional: tighter stack on phones */
@media (max-width: 640px){
  #case-studies .case-card,
  #case-studies .project-card,
  #case-studies .work-card,
  #case-studies .card {
    max-width: min(520px, 92vw);
  }
}


/* Reserve space + offset for the section */
#case-studies { scroll-margin-top: 80px; }

/* Prevent layout shift in work cards */
#case-studies img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  display: block;
}