/* Website: visienco.ch */
:root{
  --text:#0f172a; --muted:#475569; --bg:#ffffff; --bg-soft:#F5F5F0; --primary:#00BFB8; --border:#e2e8f0; --card:#ffffff;
  --hero-height:68vh; --overlay:0.65;
  --card-soft: #F4F7F6;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Segoe UI', Inter, system-ui, -apple-system, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color:var(--text);
  background:var(--bg)
}
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}

/* Ensure padding on intermediate screens (tablets) */
@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.site-header{

  position: sticky;
  top: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}

.nav{
  display: flex;
  align-items: center;           /* vertical align logo + links */
  justify-content: space-between;
  padding-top: .75rem;           /* maintain vertical padding */
  padding-bottom: .75rem;        /* maintain vertical padding */
  /* Remove 'padding: .75rem 0' to inherit container's horizontal padding */
}

/* Mobile Nav Toggle (Hidden by default) */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

.hamburger {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: all 0.3s ease-in-out;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--text);
  left: 0;
  transition: all 0.3s ease-in-out;
}

.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

/* Hamburger Animation when Active */
.mobile-nav-toggle[aria-expanded="true"] .hamburger {
  background: transparent;
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}
.mobile-nav-toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg);
  top: 0;
}

.logo img{
  display: block;
  height: 36px;
  width: auto;
}

/* One line list of links */
.nav-links{
  list-style: none;
  display: flex;                 /* put all items on one line */
  align-items: center;           /* vertically center items */
  gap: 1rem;                     /* space between items */
  margin: 0;
  padding: 0;
}

/* Nav Link Hover Color */
.nav-links a:hover {
  color: var(--primary);
}

.nav-links a{
  color: var(--text);
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: .5rem;
  line-height: 1;                /* keep consistent height */
  font-weight: 500;              /* Added to match "boldness" */
  transition: color 0.2s ease;   /* Smooth transition */
}

/* Optional: unify font-weight across nav items */
.nav-links a,
.nav-links .btn {
  font-weight: 600;
}

/* BUTTON STYLES RESTORED */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s;
  border: 1px solid transparent;
}

/* Primary Button (Turquoise background, white text) */
.btn.primary, 
button[type="submit"] {
  background-color: var(--primary);
  color: #fff;
  border-color: transparent;
}

.btn.primary:hover,
button[type="submit"]:hover {
  background-color: #00a09a; /* slightly darker turquoise for hover */
  color: #fff;
}

/* Secondary/Outline Button */
.btn.secondary {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
}
.btn.secondary:hover {
  background-color: rgba(255,255,255,0.1);
}

/* Hero Section */
.hero{position:relative;width:100%;height:var(--hero-height);overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .overlay{position:absolute;inset:0;background:rgba(0,0,0,var(--overlay));pointer-events:none}
.hero .caption{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1rem}
.hero .caption h1{color:#fff;font-size:clamp(1.8rem,4vw,3.2rem);margin:0 0 .75rem}
.hero .caption p{color:#e2e8f0}
.hero .cta-group{display:inline-flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.hero .btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;line-height:1;font-weight:600;border-radius:.5rem}
.hero .btn .icon{width:20px;height:20px;vertical-align:middle;margin-right:.5rem;flex:0 0 auto}
.hero .caption .container{max-width:1000px;margin:0 auto;padding:0 1.25rem}
.section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Gray background section that breaks out of container to full width */
.section-gray {
  background-color: var(--bg-soft);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.card{background:var(--card);border:1px solid rgba(0,0,0,0);border-radius:1rem;padding:1.25rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feature-list{display:grid;gap:.5rem;padding-left:1rem}

/* Footer Section */
.site-footer{background:#fff;padding:3rem 0;border-top:1px solid var(--border);margin-top:auto;}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  align-items: center; /* Vertically center items */
}

.footer-left {
  text-align: left;
}

.footer-address {
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}

.footer-contact {
  display: flex;
  flex-direction: column; /* Stack email and social icon vertically */
  align-items: flex-end; /* Align to the right */
  gap: 0.75rem;
}

.footer-email {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  font-size: 1.25rem; 
}

.footer-email:hover {
  color: var(--primary);
}

.site-footer p, 
.site-footer a, 
.site-footer span,
.footer-address {
    color: #000;
    font-weight: 400;
    text-decoration: none;
    font-size: 0.95rem; /* Unified font size */
    margin: 0;
    line-height: 1.5;
}

.footer-left p {
    margin-bottom: 0.5rem;
}

.footer-links {
    display:flex; 
    gap:1rem;
}

.footer-links a:hover {
    text-decoration: none; /* Explicitly no underline even on hover if desired, or 'underline' if preferred */
    opacity: 0.7; /* Optional hover effect since they are just black text */
}

.footer-left {flex: 1;min-width: 250px;}

.footer-address {flex: 1;min-width: 200px;}

.footer-contact {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align contact info to right on large screens */
    gap: 0.75rem;
}

/* Exception: Email link keeps primary color and bold weight */
.footer-email {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary) !important; /* Force primary color */
    text-decoration: none;
    font-weight: 600 !important; /* Force bold */
}
.footer-email:hover { text-decoration: underline !important; }

.social-icon img {
    display: block;
    transition: transform 0.2s;
}
.social-icon:hover img {
    transform: scale(1.1);
}

.contact-block{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.icon{width:20px;height:20px;vertical-align:middle;margin-right:.5rem}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}
    .footer-grid { 
      display: flex;
      flex-direction: column; 
      align-items: flex-start; 
      gap: 2rem;
    }
    .footer-contact { align-items: flex-start; } /* Reset alignment on mobile */
    
    .footer-left, .footer-address, .footer-contact {
        width: 100%;
        text-align: left;
        min-width: auto;
    }
    
    .footer-address { text-align: left; }
    
    .footer-contact {
        align-items: flex-start;
    }
}

.page-title {
   font-size: clamp(2rem, 5vw, 2.5rem);
   margin-bottom: 2rem;
   text-align: left;
   font-weight: 700;
   margin-top: 0;           /* Reset top margin */
   padding-top: 0;          /* Reset top padding */
   line-height: 1.2;        /* Ensure tight line height */
}

/* Hero container remains the same */
.hero { position:relative; width:100%; height:var(--hero-height); overflow:hidden; }

/* Make the video behave like a background image */
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }

/* Overlay sits above video for contrast */
.hero .overlay { position:absolute; inset:0; background:rgba(0,0,0,var(--overlay)); z-index:1; }

/* Caption on top of overlay + video */
.hero .caption { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:1rem; z-index:2; }

/* Apply Segoe UI specifically to headers as requested */
h1, h2, h3, h4, h5, h6, .section-title h2 {
  font-family: 'Segoe UI', Inter, system-ui, -apple-system, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}

/* Cleaner, harmonious typography for product/benefit block headers */
.orgadroid-block h2,
.benefit-block h3 {
  font-size: clamp(1.4rem, 2vw, 1.6rem); /* Slightly smaller, more refined size */
  font-weight: 600; 
  margin-bottom: 0.75rem; 
  color: var(--text);
  letter-spacing: -0.01em; /* Tights letter spacing for a modern look */
  line-height: 1.3;
}

/* Cleaner paragraphs with better readability */
.orgadroid-block p,
.benefit-block p {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.7; /* Increased line-height for easier reading (was 1.6 or implicit) */
  color: var(--muted);
  max-width: 65ch; /* Optimal line length for readability */
}

.section-title {
  display: flex;
  align-items: center; 
  gap: 0.75rem;   
  margin-top: 0.5rem; /* Reduced from default or previous large spacing */
  margin-bottom: 4rem; /* Was 1.5rem, increased for more air */
}

.section-title h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem); /* Ensure size is preserved */
  font-weight: 700;
  margin: 0;
  color: var(--text);
  line-height: 1.2;
}

/* Keep turquoise icon next to the title (SVG/IMG is already turquoise asset) */
.section-title .section-icon {width: auto;  height: clamp(1.8rem, 3.2vw, 2.4rem);display: inline-block;}

/* Dark sections override title color (e.g., workflow) */
.workflow-section .section-title h2 { color: #fff; }

.workflow-section {
  background-color: #212B46; /* Dark blue background */
  color: #fff;
  padding: 4rem 0;
  margin-top: 3rem;
  width: 100vw; /* span full viewport width */
  margin-left: calc(50% - 50vw); /* force full width even inside container if needed, though this section is likely top level */
  margin-right: calc(50% - 50vw);
  box-sizing: border-box; /* Include padding in width */
}

/* Ensure the inner container respects max-width and centering */
.workflow-section .container {
  /* inherit max-width: 1200px from generic .container */
  /* inherit margin: 0 auto from generic .container */
  /* But we need to ensure local padding does not double up if relying on .section + .container logic */
  display: block;
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* The .container media query already handles padding, no need to duplicate here explicitly unless overriding */
}

/* Adjust section title inside workflow to not double-pad if it was using .container before */
.workflow-section .section-title {
  display: flex;
  align-items: center; /* vertically center icon + text */
  gap: 0.5rem;
  /* Removed local padding that was compensating for lack of .container wrapper */
}

.workflow-section .workflow-grid {
  max-width: 900px;
}

.workflow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns for 2x2 layout */
  gap: 6rem 8rem; /* INCREASED: Vertical gap 6rem, Horizontal gap 8rem for more breathing room */
  max-width: 1000px; /* INCREASED: wider max-width to accommodate larger gaps */
  margin: 0 auto;
  position: relative; /* Context for absolute arrows overlay if needed, though grid gap works better */
}

/* Force specific step positioning for 2x2 layout */
.workflow-step.step-1 { grid-column: 1; grid-row: 1; }
.workflow-step.step-2 { grid-column: 2; grid-row: 1; }
.workflow-step.step-3 { grid-column: 2; grid-row: 2; }
.workflow-step.step-4 { grid-column: 1; grid-row: 2; }

/* Remove rectangular bars and use directional triangles for arrows - REMOVED per request */
.workflow-grid::before,
.workflow-grid::after,
.workflow-step.step-3::before {
  display: none;
}

.workflow-image-wrapper {
  background-color: #212B46; /* Matches section bg */
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3; /* Standard layout ratio */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Optional: border to define the area if images are perfectly seamless, 
     but user wants seamless look so maybe no border */
}

.workflow-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  
  /* The Magic: Invert colors + Blend Mode */
  filter: invert(1) contrast(1.1); /* Black->White, White->Black. Boost contrast slightly */
  mix-blend-mode: lighten; /* Black background becomes transparent against dark blue #212B46 */
}

/* Specific override for Step 3 image size as requested - kept */
.workflow-step:nth-child(3) .workflow-img {
  transform: scale(1.3); 
}

.workflow-content h3 {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.workflow-content p {
  color: #cbd5e1; /* Light gray text for readability against dark bg */
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Substep spacing */
.workflow-substep {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Workflow Step container */
.workflow-step {
  position: relative;
}

/* Specific adjustment for Workflow Grid to reduce gap between steps */
.workflow-grid-horizontal.feature-grid {
  /* Inherit feature-grid standard margins but override gap */
  gap: 1.5rem; /* Reduced from default grid gap */
}

/* Base styles for horizontal steps */
.horizontal-step {
  display: flex;
  flex-direction: column;
  width: 100%; 
  /* Default alignment (will be overridden for first/last) */
  align-items: center; 
  text-align: center;
}

.horizontal-step .workflow-image-wrapper {
  width: 100%; 
  max-width: 60%; /* Small images */
  /* Remove generic auto margins to allow flex alignment control */
  margin-bottom: 1rem; 
  
  aspect-ratio: 4/3; 
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent; 
  border-radius: 0.5rem; 
  overflow: hidden;
}

.horizontal-step .workflow-content {
  max-width: 60%; 
  /* Remove generic auto margins */
}

/* Step 1: Align LEFT to match grid usage */
.horizontal-step:first-child {
  align-items: center;
  text-align: center;
}
/* Step 2: Align CENTER (Default) */
.horizontal-step:nth-child(2) {
  align-items: center;
  text-align: center;
}
/* Step 3: Align RIGHT to match grid usage */
.horizontal-step:last-child {
  /* Revert to center as well */
  align-items: center;
  text-align: center;
}

/* Ensure centering is applied uniformly */
.horizontal-step .workflow-image-wrapper,
.horizontal-step .workflow-content {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure text is nicely aligned inside the blocks */
.horizontal-step:first-child .workflow-image-wrapper,
.horizontal-step:first-child .workflow-content {
  margin-left: 0;
  margin-right: auto; /* Just to be safe */
}

.horizontal-step:nth-child(2) .workflow-image-wrapper,
.horizontal-step:nth-child(2) .workflow-content {
  margin-left: auto;
  margin-right: auto;
}

.horizontal-step:last-child .workflow-image-wrapper,
.horizontal-step:last-child .workflow-content {
  margin-left: auto;
  margin-right: 0;
}

/* Ensure centering on mobile - Override the specific alignments */
@media (max-width: 600px) {
    .workflow-grid-horizontal.feature-grid {
        gap: 3rem; 
    }
    .horizontal-step .workflow-content {
        max-width: 90%; 
    }
    
    /* Force center everything on mobile stack */
    .horizontal-step,
    .horizontal-step:first-child,
    .horizontal-step:last-child {
      align-items: center;
      text-align: center;
    }
    
    .horizontal-step .workflow-image-wrapper, 
    .horizontal-step .workflow-content {
      margin-left: auto !important;
      margin-right: auto !important;
    }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .product-layout-grid {
    grid-template-columns: 1fr; /* Stack vertically on tablet/mobile */
  }
  .product-layout-grid .feature-grid {
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Return to auto-fit */
  }
  .product-image-container {
    order: -1; /* Show image before features on mobile/tablet */
    margin-bottom: 2rem;
  }
  .sticky-image {
    position: static;
  }
  .product-image {
     max-width: 300px;
  }
  .workflow-grid {
    grid-template-columns: 1fr; /* Stack workflow steps on mobile */
    gap: 4rem; 
    max-width: 600px;
  }
  
  /* Reset grid placement for mobile stack */
  .workflow-step.step-1,
  .workflow-step.step-2,
  .workflow-step.step-3, 
  .workflow-step.step-4 {
    grid-column: auto;
    grid-row: auto;
  }
  
  /* Hide desktop arrows */
  .workflow-grid::before, .workflow-grid::after, .workflow-step.step-3::before {
    display: none;
  }
  
  /* Add simple downward triangles for mobile stack - REMOVED per request */
  .workflow-step:not(:last-child)::after {
    display: none;
  }
  
  .workflow-image-wrapper {
    aspect-ratio: 16/9; /* Wider on mobile */
  }
}

/* Main page product rectangle (Orgadroid block) */
.grid-2.card.orgadroid-block,
.orgadroid-block.card {
  background: var(--card-soft) !important; /* override inline bg-soft */
}

/* Ensure text over these cards is black for contrast */
.orgadroid-block h2,
.orgadroid-block p,
.feature-card h3,
.feature-card p,
.feature-card li {
  color: var(--text);
}

/* Partners Grid - Horizontal Row Style */
.partners-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* Prevent wrapping essentially to look like a strip */
  justify-content: space-between; /* Distribute evenly */
  align-items: center;
  gap: 1.5rem; /* Reduced gap to help fitting */
  padding: 2rem 0; /* Reduced vertical padding */
  overflow-x: hidden; /* Hide scrollbar, rely on shrinking */
  
  /* Remove border and background to make it look clean */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Partner Logo Settings */
.partners-grid img {
  height: 48px; /* Reduced height significantly for strip look */
  width: auto;
  max-width: 120px; /* Restrict max width */
  object-fit: contain;
  
  /* Black and White Filter */
  filter: grayscale(100%) opacity(1);
  transition: all 0.3s ease;
  flex-shrink: 1; /* Allow logos to shrink to fit the line */
}

/* Mobile Adjustments for Partners */
@media (max-width: 768px) {
  .partners-grid {
    flex-wrap: wrap; /* Allow wrapping on mobile if they really don't fit */
    justify-content: center; /* Center them when wrapped */
    gap: 1rem;
    overflow-x: visible;
  }
  
  .partners-grid img {
    height: 32px; /* Even smaller on mobile */
    max-width: 100px;
    flex-shrink: 0; /* Don't shrink too much on mobile, wrap instead */
  }
}

/* Product video sizing: constrain width and height */
.product-video-wrapper {
  width: 100%;
  max-width: 900px; /* slightly wider container, still constrained */
}

.product-video {
  width: 100%;
  max-width: 800px;      /* hard cap on width */
  aspect-ratio: 16/9;    /* keep a standard video ratio */
  max-height: 60vh;      /* prevent exceeding viewport height */
}

/* Ensure wrapper centers the video and prevents overflow */
.product-video-wrapper { 
  margin: 0 auto 3rem auto; 
  overflow: hidden; 
}

/* FEATURES GRID & WORKFLOW CLEANUP
   ========================================================================== */

/* Remove any duplicate/conflicting feature card rules below */

/* 1. Feature Grid Container */
.feature-grid.three-col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* Clean spacing */
  align-items: stretch; /* Cards same height */
}

@media (max-width: 900px) {
  .feature-grid.three-col-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .feature-grid.three-col-grid { grid-template-columns: 1fr; }
}

/* 2. Feature Card Base Style */
.feature-card {
  background: var(--card-soft);
  border-radius: 12px;
  padding: 24px; /* Increased slightly for better breathability */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle depth */
  display: flex;
  flex-direction: column;
  height: 100%;
  
  /* Content Alignment: Centered */
  align-items: center;  /* Centered Items */
  text-align: center;   /* Centered Text */
  gap: 16px; /* Consistent vertical rhythm */
}

/* 3. Feature Header (Title) - Centered as requested */
.feature-card .feature-header {
  display: flex;
  align-items: center;
  justify-content: center; /* Centered */
  width: 100%;
  margin: 0;
  text-align: center;
}

.feature-card h3 {
  margin: 0;
  line-height: 1.2;
  font-size: 1.4rem;
}

/* 4. Feature Icon Wrapper - Centered as requested */
.feature-card .feature-icon-display {
  display: flex;
  align-items: center;
  justify-content: center; /* Centered */
  width: 100%; /* Full width to hold position */
  margin: 0; /* Handled by parent gap */
}

/* Icon Sizing */
.feature-card .feature-icon,
.feature-card svg.feature-icon {
  width: 64px; /* Standardized clean size */
  height: 64px;
  object-fit: contain;
}
/* Large variant if needed, but keeping standard is cleaner for homogeneity */
.feature-card .feature-icon.lg,
.feature-card svg.feature-icon.lg {
  width: 72px;
  height: 72px;
}

/* 5. Feature Body (List & Text) */
.feature-card ul,
.feature-card p {
  width: 100%;
  margin: 0;
  padding-left: 0; /* Removed bullet indentation */
  list-style: none; /* Removed bullets */
}

/* Ensure spacing between list items happens here if not overridden */
.feature-card ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important; /* Forces spacing between list items */
}

.feature-card p { padding-left: 0; }

/* 6. Special Case: Orgadroid Image Card */
.feature-card.feature-card--image {
  /* Inherits background & shadow from .feature-card */
  /* We KEEP padding to frame the image nicely like content */
  align-items: center;     /* Center the image horizontally */
  justify-content: center; /* Center the image vertically */
  padding: 24px;           /* Consistent with other cards */
  overflow: hidden;
}

/* Ensure the image fits nicely within the padded area */
.feature-card.feature-card--image .feature-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Show full product without crop */
  display: block;
  /* Add mild drop shadow to the device image itself for depth, keeping it consistent with card feel */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Contact Page Layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.team-contact-card {
  display: flex;
  gap: 1rem;
  align-items: start;
  margin-bottom: 2rem;
  flex-direction: column;
}

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* About Page Story Block */
.story-block.card {
  margin-top: 3rem;
  background: #fff; 
  padding: 2rem; 
  border-radius: 12px; 
  display: flex; 
  align-items: center; 
  gap: 4rem;
}

@media (max-width: 900px) {
  .story-block.card {
     gap: 2rem;
  }
}

@media (max-width: 600px) {
  .story-block.card {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .story-visual img {
    max-width: 100%;
    height: auto;
  }
}

/* Remove old conflicting blocks by replacing them with this consolidated section */

/* Applications grid image sizing */
.applications-grid .application-item img {
  max-width: 70%; /* smaller than full width */
  height: auto; /* maintain aspect ratio */
  object-fit: contain; /* cover the area without stretching */
  display: block; /* remove inline-block spacing issues */
  margin: 0 auto; /* center the image */
}

/* Ensure application items are centered in their grid cells */
.applications-grid .application-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Optional: uniform height for application items for alignment */
.applications-grid .application-item {
  height: 100%;
  max-width: 300px; /* limit width on larger screens */
  margin: 0 auto; /* center in grid */
}

/* Responsive adjustments for application grid */
@media (max-width: 900px) {
  .applications-grid .application-item {
    max-width: 100%; /* full width on small screens */
  }
}

@media (max-width: 768px) {
  .applications-grid {
    grid-template-columns: 1fr; /* 1 column on mobile/tablet */
  }
}

/* Applications Grid Style (similar to News but 2 per row) */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns on large screens */
  gap: 2rem;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .applications-grid {
    grid-template-columns: 1fr; /* 1 column on mobile/tablet */
  }
}

/* Reuse basic news-card structure if possible, or define application-card */
.application-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border);
  height: 100%;
}

.application-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.application-image-wrapper {
  width: 100%;
  aspect-ratio: 4/3; /* Maintain the aspect ratio requested */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  padding: 1rem; /* add some padding for internal images like the organoid icon */
}

.application-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
}

.application-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}

.application-content h3 {
  font-size: 1.25rem;
  margin: 0 0 0.5rem 0;
  color: var(--text);
  font-weight: 600;
}

.application-content p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  flex-grow: 1; /* Pushes button down if content length varies */
}

.application-content .btn {
  align-self: flex-start; /* Do not stretch the button */
}

/* TEAM SECTION STYLE
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
  text-align: center;
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr; /* Stack on mobile */
  }
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Circular photo frame styling */
.member-photo-frame {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Soft shadow */
  background-color: #f0f0f0;
}

.member-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* Improved downscaling rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality; 
  transform: translateZ(0); /* Forces GPU composition for smoother scaling */
  backface-visibility: hidden;
}

.team-member h3 {
  margin: 0.5rem 0 0.25rem 0;
  font-size: 1.25rem;
  color: var(--text);
}

.member-role {
  margin: 0;
  font-size: 1rem;
  color: var(--primary); /* Use brand color for roles */
  font-weight: 600;
}

/* Responsive adjustment for Story Block */
@media (max-width: 600px) {
  .story-block {
    flex-direction: column;
    text-align: center;
  }
}

/* News Section */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Slightly reduced min-width for better mobile fit */
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border);
  height: 100%;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.news-image-wrapper {
  width: 100%;
  aspect-ratio: 16/9;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

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

.news-content {
  padding: 1.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-content h3 {
  font-size: 1.1rem;
  margin: 0 0 1rem 0;
  color: var(--text);
  line-height: 1.4;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-content .read-more {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: auto;
}

/* Mobile Nav Links Styling */
@media (max-width: 1024px) {
  .nav-links a {
    font-size: 1.25rem; /* Larger text for mobile */
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: center;
  }
  
  .nav-links .btn.primary {
    width: 100%; /* Full width button on mobile */
    justify-content: center;
    padding: 1rem; /* Easier to tap */
  }

  /* Center link content properly on mobile */
  .nav-links li {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

/* Benefit Blocks (Home) */
.benefit-content-wrapper {
  width: 90%;
  margin: 0 auto;
}

.benefit-media-wrapper {
  width: 90%;
  margin: 0 auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #000;
}

.benefit-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
}

.benefit-video.scale-1-1 {
  transform: scale(1.1);
}

/* Mobile adjustments for benefits to use more screen real estate */
@media (max-width: 600px) {
  .benefit-content-wrapper,
  .benefit-media-wrapper {
    width: 100%; /* Use full width on mobile */
  }
}

/* Base adjustment for Section Titles on Mobile */
@media (max-width: 600px) {
  .section-title,
  .page-title {
      padding: 0 1.5rem; /* Add padding to prevent titles from touching edges - adjusted to be safer */
      box-sizing: border-box; /* Ensure padding is included in width */
  }

  .section-title h2 {
      font-size: 1.75rem; /* Ensure titles aren't too huge on small screens */
  }
  
  .section-title .section-icon {
      height: 1.75rem; 
  }
  
  /* Reduce padding on sections for mobile */
  .section {
      padding-top: 2rem;
      padding-bottom: 2rem;
  }
  
  /* Adjust Orgadroid block on home for mobile */
  .orgadroid-block.grid-2 {
      padding: 1.5rem !important; /* Override card padding */
      gap: 2rem;
  }
  
  .orgadroid-block h2 {
      font-size: 1.5rem;
  }
}

/* Logo adjustments for mobile */
@media (max-width: 600px) {
}

/* Mobile Nav Toggle Visibility */
@media (max-width: 1024px) {
  .mobile-nav-toggle {
    display: block; /* Ensure it's visible on smaller screens */
  }

  .nav-links {
    display: none; /* Hide links by default on mobile */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--border);
  }

  .nav-links.active {
    display: flex; /* Show links when active */
  }
}

/* Ensure desktop nav is layout correctly */
@media (min-width: 1025px) {
  .nav-links {
    display: flex;
    position: static;
    box-shadow: none;
    background: transparent;
    border: none;
    flex-direction: row;
    width: auto;
    padding: 0;
  }
  
  .mobile-nav-toggle {
    display: none; /* Hide toggle on larger screens */
  }
}


.cta-banner {
  background-color: #212B46; /* Visienco Dark Blue */
  color: #ffffff;
  border-radius: 1rem;
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.cta-banner h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffffff;
  font-family: 'Segoe UI', sans-serif;
}

/* Responsive adjustment for mobile */
@media (max-width: 600px) {
  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
  }
}

/* Features Grid & Card Styles */
.feature-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important; /* Forces spacing between list items */
}

/* Center list items horizontally in the feature card */
.feature-card li {
  text-align: center;
}