:root {
  /* Brand Colors - Minimalist Refined */
  /* Brand Colors - Dark Mode */
  --color-primary: #FFFFFF;
  /* White Text */
  --color-secondary: #CCCCCC;
  /* Light Grey Text */
  --color-accent: #333333;
  /* Dark Grey lines */
  --color-bg: #000000;
  /* Black Background */
  --color-bg-alt: #111111;
  /* Dark Grey Background */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-border: #333333;
  --color-text-light: #CCCCCC;

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* Spacing */
  --container-width: 1200px;
  --header-height: 80px;
  --section-padding: 120px 0;
  /* More generosity */

  /* Glassmorphism & Premium */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.15);
  --glass-blur: 20px;
  --gradient-text: linear-gradient(135deg, #FFFFFF 0%, #CCCCCC 100%);
  --shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.4);

  /* Components */
  --radius-sm: 0px;
  /* Sharp edges for professional feel */
  --radius-md: 0px;

  /* Transitions */
  --transition-normal: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-secondary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-normal);
}

ul {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  color: var(--color-primary);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  word-break: break-word;
}

h1 {
  font-size: 3.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 500;
}

p {
  margin-bottom: 1.5rem;
  max-width: 65ch;
  color: var(--color-secondary);
}

.lead {
  font-size: 1.25rem;
  color: var(--color-primary);
  font-weight: 400;
}

/* Utilities */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: var(--section-padding);
}

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

.grid {
  display: grid;
  gap: 4rem;
}

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

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

/* Premium Card */
.premium-card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  padding: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.premium-card:hover {
  border-color: var(--glass-highlight);
  transform: translateY(-8px);
  box-shadow: var(--shadow-premium);
}

.premium-card-image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  /* Aspect ratio */
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
}

.premium-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.premium-card:hover .premium-card-image {
  transform: scale(1.05);
}

.premium-card-content {
  padding: 2.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.premium-card h3 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: var(--color-white);
  letter-spacing: -0.01em;
}

.premium-card p {
  font-size: 0.95rem;
  color: #AAAAAA;
  line-height: 1.6;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.premium-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-white);
  opacity: 0.8;
  transition: var(--transition-normal);
}

.premium-link::after {
  content: '→';
  transition: transform 0.3s ease;
}

.premium-card:hover .premium-link {
  opacity: 1;
}

.premium-card:hover .premium-link::after {
  transform: translateX(4px);
}

/* Legacy Card Overrides/Cleanup if needed, but preferable to replace usage */
.solution-card {
  /* Retaining basic style for safety, but aiming to use premium-card */
  display: block;
  padding: 2rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-accent);
  transition: var(--transition-normal);
  height: 100%;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-normal);
  border: 1px solid transparent;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #000000;
  /* Black text on white button */
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: #333;
  border-color: #333;
}

.btn-outline {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-text {
  background: transparent;
  color: var(--color-white);
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
}

.btn-text:hover {
  border-bottom-color: var(--color-white);
}

.btn-outline-white {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
  padding: 1rem 2rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-normal);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.btn-primary {
  background-color: var(--color-white);
  color: #000;
  border: 1px solid var(--color-white);
}

.btn-primary:hover {
  background-color: #f0f0f0;
  border-color: #f0f0f0;
}

/* User requested white text for specific boxes. 
   If the user meant the buttons themselves are white boxes (which standard btn-primary is), 
   then they want inverted (Black bg, White Text) or Outline (Transparent bg, White Text). 
   Standard "Premium" usually implies Outline on dark backgrounds. 
   I will ensure a utility class .btn-text-white exists or modify btn-primary if they want that globally changed. 
   Refining based on request: "boxes are white - please have text in white". 
   If box is white and text is white, it's invisible. 
   They likely mean "Current boxes are white (background), please have text white (so background must be dark)".
   I will add a .btn-dark class and apply it, or use .btn-outline-white.
*/

.btn-dark {
  background-color: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.btn-dark:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: transparent;
  backdrop-filter: blur(0px);
  z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

.header.scrolled {
  background-color: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1002;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--color-white);
  margin: 5px 0;
  transition: var(--transition-normal);
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }
}

/* Dropdown Menu */
.nav-item {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-accent);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.05);
  padding: 1rem 0;
  z-index: 1001;
}

.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown li a {
  display: block;
  padding: 0.5rem 1.5rem;
  font-size: 0.85rem;
  color: var(--color-secondary);
  transition: all 0.2s;
}

.dropdown li a:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--color-black);
  /* Fallback */
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Ensure full coverage */
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  /* Prevents iOS from showing play button overlays on tap */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  padding-top: var(--header-height);
}

.hero h1 {
  color: var(--color-white);
  font-size: 4rem;
  margin-bottom: 1.5rem;
}

.hero-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.25rem;
  max-width: 600px;
  margin-bottom: 3rem;
}

.hero-actions {
  display: flex;
  gap: 2rem;
  align-items: center;
}

/* Solutions Section */
.section-header {
  margin-bottom: 4rem;
  text-align: left;
}

/* Solution Card - Updated to Premium Glassmorphism */
.solution-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  transition: var(--transition-normal);
  height: 100%;
  overflow: hidden;
}

.solution-card:hover {
  border-color: var(--glass-highlight);
  transform: translateY(-8px);
  box-shadow: var(--shadow-premium);
}

.solution-icon {
  width: 100%;
  height: 220px;
  overflow: hidden;
  margin-bottom: 0;
}

.solution-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.solution-card:hover .solution-card-image {
  transform: scale(1.05);
}

.solution-card-content {
  padding: 2.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.solution-card h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--color-white);
  font-weight: 500;
}

.solution-card p {
  color: #AAAAAA;
  font-size: 0.95rem;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.link-arrow {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-white);
  opacity: 0.8;
  border-bottom: 1px solid transparent;
  transition: var(--transition-normal);
}

.solution-card:hover .link-arrow {
  opacity: 1;
  border-bottom-color: var(--color-white);
}

/* Cleanup old classes if necessary, or just override */

/* Model Card Styles */
.model-card {
  padding: 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  transition: var(--transition-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.model-card-content {
  padding: 2.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.model-card-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.model-card:hover .model-card-image {
  transform: scale(1.05);
}

.model-card:hover {
  border-color: var(--glass-highlight);
  transform: translateY(-8px);
  box-shadow: var(--shadow-premium);
}

.model-card h3 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  color: var(--color-white);
}

.model-card p {
  margin-bottom: 2rem;
  flex-grow: 1;
  color: #AAAAAA;
}

/* Feature Row */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
  margin-bottom: 6rem;
}

.feature-row.reverse {
  direction: rtl;
  /* Simple way to swap, needing text-align fix */
}

.feature-row.reverse>* {
  direction: ltr;
  /* Reset text direction */
}

.feature-content {
  text-align: left;
}

.feature-label {
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 1rem;
  opacity: 0.8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0.25rem;
}

.feature-title {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-white);
}

.feature-text {
  font-size: 1.1rem;
  color: var(--color-white);
  margin-bottom: 2rem;
}

.feature-list {
  list-style: none;
}

.feature-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--color-white);
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 6px;
  height: 6px;
  background-color: var(--color-white);
  border-radius: 50%;
}

.feature-image-wrapper {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.feature-image {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.feature-image:hover {
  opacity: 1;
}

/* About Grid Reformatted */
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  align-items: start;
}

/* About Section */
.about-grid {
  align-items: center;
  gap: 5rem;
}

.about-stats {
  display: flex;
  gap: 4rem;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
}

.image-placeholder {
  width: 100%;
  height: 0;
  padding-bottom: 120%;
  /* Portrait aspect ratio */
  background-color: #e0e0e0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-placeholder span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #888;
}

/* Contact Section */
.contact-grid {
  align-items: start;
}

.contact-info h2 {
  margin-bottom: 1rem;
}

.contact-details {
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}

.contact-item strong {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.contact-item a,
.contact-item address {
  font-size: 1.1rem;
  color: var(--color-primary);
  font-style: normal;
}

.contact-form {
  margin-top: 1rem;
}

.form-group {
  position: relative;
  margin-bottom: 2rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem 0;
  border: none;
  border-bottom: 1px solid var(--color-accent);
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-primary);
  transition: border-color 0.3s;
}

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAAAAA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 1em;
}

.form-group select option {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
  padding: 10px;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}

.form-group label {
  position: absolute;
  top: 0.75rem;
  left: 0;
  font-size: 1rem;
  color: #999;
  transition: 0.3s ease;
  pointer-events: none;
}

.form-group input:focus+label,
.form-group input:not(:placeholder-shown)+label,
.form-group textarea:focus+label,
.form-group textarea:not(:placeholder-shown)+label,
.form-group select:focus+label,
.form-group select:valid+label {
  top: -1.2rem;
  font-size: 0.75rem;
  color: var(--color-white);
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* Glass Panel Utility */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  padding: 3rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Footer - Simple */
/* Footer - Simple */
.footer {
  padding: 1.5rem 0;
  /* Compressed */
  background-color: var(--color-bg-alt);
  color: #888;
}

.footer .grid-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
  justify-items: center;
  text-align: center;
}

.footer-brand .logo img {
  filter: invert(1);
  opacity: 0.8;
}

.footer h4 {
  color: var(--color-white);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  /* Reduced from 1rem */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer ul li a {
  color: #888;
  font-size: 0.85rem;
  /* Match address size */
}

.footer ul li a:hover {
  color: var(--color-white);
}

.footer-col p,
.footer-col p a {
  font-size: 0.85rem;
}

.footer-bottom {
  margin-top: 1rem;
  /* Reduced from 3rem */
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* Hero Video - Consolidated */
.hero-video {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  /* Ensure full coverage with overscan */
  object-fit: cover;
  z-index: 0;
}

/* Footer Bottom Links */
.footer-bottom-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.footer-bottom-links a {
  color: #888;
  text-decoration: none;
  transition: color 0.3s ease;
  padding: 0 1rem;
  position: relative;
}

.footer-bottom-links a:hover {
  color: var(--color-white);
}

.footer-bottom-links a:not(:last-child)::after {
  content: '|';
  position: absolute;
  right: 0;
  color: #444;
}

.footer-bottom-links a:first-child {
  padding-left: 0;
}

.footer-bottom-links a:last-child {
  padding-right: 0;
}

/* Reference Card Start */
.reference-card {
  flex: 0 0 450px;
  /* Reduced width for multi-item */
  max-width: 100%;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.reference-card:hover .reference-details {
  opacity: 1;
  transform: translateY(0);
}

.reference-card-header {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--glass-border);
}

.reference-headline {
  font-size: 1.2rem;
  color: var(--color-white);
  margin-bottom: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.reference-quote-box {
  background: transparent;
  color: var(--color-white);
  padding: 0;
  border: none;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  margin-top: 0.5rem;
  opacity: 0.9;
}

.reference-content {
  position: relative;
  height: 300px;
  /* Fixed height for image area */
}

.reference-image-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.reference-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reference-details {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  /* Hidden by default */
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}


/* Contact Button */
.btn-contact-submit {
  width: 100%;
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
  padding: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}

.btn-contact-submit:hover {
  background: var(--color-white);
  color: var(--color-black);
}

/* Ensure footer grid alignment */
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Align to left/start */
}

/* Process Flow (Värdekedjan) */
.process-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  position: relative;
  counter-reset: process-counter;
}

.process-step {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: var(--transition-normal);
  border-radius: var(--radius-sm);
}

.process-step:hover {
  border-color: var(--glass-highlight);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.step-icon {
  width: 3rem;
  height: 3rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--color-white);
  border: 1px solid var(--glass-border);
}

.process-step h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--color-white);
  font-weight: 500;
}

.process-step ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.process-step ul li {
  font-size: 0.9rem;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.25rem;
}

.process-step ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 0.8rem;
  top: 0.1em;
}

/* Connector Arrows */
.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 3.5rem;
  /* Align with icon center roughly, adjusting as needed */
  right: -1.5rem;
  width: 1rem;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.5;
}

/* Responsive Process Flow */
@media (max-width: 992px) {
  .process-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-step:nth-child(2n)::after {
    display: none;
    /* Hide arrow after every 2nd item on tablet */
  }
}

@media (max-width: 768px) {
  .process-flow {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .process-step:not(:last-child)::after {
    display: none;
    /* Hide horizontal arrows on mobile */
  }

  .process-step {
    padding: 1.5rem;
  }
}


/* Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards;
}

.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.4s;
}

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

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  z-index: 1001;
}

.mobile-menu-toggle span {
  display: block !important;
  width: 24px !important;
  height: 2px !important;
  background-color: #FFFFFF !important;
  transition: 0.3s ease;
  transform-origin: center;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  transform: translateY(-8px) rotate(-45deg);
  /* Actually logic in main.js uses 2 spans? Let's check HTML. */
}

/* Responsive */
@media (max-width: 992px) {
  .hero h1 {
    font-size: 3rem;
  }

  .grid-3,
  .footer .grid-3 {
    grid-template-columns: 1fr !important;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .feature-row {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 1.5rem;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
  }

  .nav.active {
    opacity: 1;
    pointer-events: all;
  }

  .nav-list {
    flex-direction: column;
    gap: 2rem;
  }

  .nav-link {
    font-size: 1.5rem;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .section {
    padding: 60px 0;
  }

  .footer .grid-3 {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
  }
}

/* Flow Steps - Removed (Replaced by .process-flow) */

/* Checkbox List */
.checkbox-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.checkbox-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-secondary);
}

.checkbox-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
}

/* Project Carousel */
.carousel-section {
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
}

.carousel-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0 4rem;
}

.carousel-track {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1rem 0;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.project-card {
  flex: 0 0 350px;
  width: 350px;
  position: relative;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.project-card:hover .project-image {
  transform: scale(1.05);
}

.project-title {
  color: var(--color-white);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.project-info {
  color: var(--color-secondary);
  font-size: 0.9rem;
  margin: 0;
}



/* ... (omitted) ... */

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  /* Increased */
  transition: all 0.3s ease;
}

/* ... (omitted) ... */

.footer-address {
  color: var(--color-secondary);
  font-size: 0.85rem;
  margin-top: 0;
  /* Removed margin-top */
  line-height: 1.6;
}

.carousel-btn:hover {
  background: var(--color-primary);
  color: var(--color-black);
}

.carousel-btn.prev {
  left: 0;
}

.carousel-btn.next {
  right: 0;
}

@media (max-width: 768px) {
  .project-card {
    flex: 0 0 280px;
    width: 280px;
  }

  .carousel-container {
    position: relative;
    width: 100%;
    /* overflow: hidden; Removed to ensure buttons aren't clipped if they traverse edges, though they are inside */
    padding: 1rem 0;
  }

  .carousel-btn {
    display: none;
  }
}

/* Uppercase Navigation */
.nav-link {
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* Testimonial Card */
.testimonial-card {
  flex: 0 0 400px;
  width: 400px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  border-color: var(--glass-highlight);
  transform: translateY(-5px);
}

.testimonial-quote {
  font-size: 1.1rem;
  font-style: italic;
  color: #DDDDDD;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.testimonial-author {
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 0.25rem;
}

.testimonial-data {
  font-size: 0.9rem;
  color: var(--color-secondary);
}

/* Reference Card (Private Page) */
.hero-video {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  /* Ensure full coverage with overscan */
  object-fit: cover;
  z-index: 0;
}

/* Footer Bottom Links */
.footer-bottom-links {
  display: flex;
  align-items: center;
}

.footer-bottom-links a {
  color: #888;
  text-decoration: none;
  transition: color 0.3s ease;
  padding: 0 1rem;
  position: relative;
}

.footer-bottom-links a:hover {
  color: var(--color-white);
}

.footer-bottom-links a:not(:last-child)::after {
  content: '|';
  position: absolute;
  right: 0;
  color: #444;
}

.footer-bottom-links a:first-child {
  padding-left: 0;
}

.footer-bottom-links a:last-child {
  padding-right: 0;
}

/* Reference Card Start */
.reference-card {
  flex: 0 0 900px;
  max-width: 100%;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.reference-card-header {
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--glass-border);
}

.reference-headline {
  font-size: 1.5rem;
  color: var(--color-white);
  margin-bottom: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.reference-quote-box {
  background: transparent;
  color: var(--color-white);
  padding: 0;
  border: none;
  font-family: 'Playfair Display', serif;
  /* Or just italic serif if not available */
  font-style: italic;
  font-size: 1.8rem;
  line-height: 1.4;
  margin-top: 0.5rem;
  opacity: 0.9;
}

/* Contact Button */
.btn-contact-submit {
  width: 100%;
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
  padding: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}

.btn-contact-submit:hover {
  background: var(--color-white);
  color: var(--color-black);
}

/* Ensure footer grid alignment */
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Align to left/start */
}

.reference-content {
  display: flex;
  flex-direction: row;
}

.reference-details {
  flex: 1;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reference-list {
  list-style: disc;
  padding-left: 1.5rem;
}

.reference-list li {
  margin-bottom: 0.5rem;
  color: #ccc;
  font-size: 1.1rem;
}

.reference-image-wrapper {
  flex: 1.5;
  position: relative;
  min-height: 400px;
}

.reference-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .reference-card {
    flex: 0 0 100%;
  }

  .reference-content {
    flex-direction: column-reverse;
  }

  .reference-image-wrapper {
    height: 300px;
  }
}



.footer-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-address {
  color: var(--color-secondary);
  font-size: 0.85rem;
  margin-top: 0;
  line-height: 1.6;
}



.testimonial-data {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-primary);
  opacity: 0.9;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .testimonial-card {
    flex: 0 0 300px;
    width: 300px;
  }
}

/* Contact Form */
.contact-form {
  background-color: #000;
  color: #fff;
  padding: 3rem;
  border-radius: 0;
  border: 1px solid #222;
}

.contact-form .form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  background-color: #111;
  border: 1px solid #333;
  color: #fff;
  padding: 1rem;
  font-family: inherit;
  font-size: 1rem;
  border-radius: 0;
  transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: #fff;
}

.contact-form label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: #666;
  pointer-events: none;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.contact-form input:focus~label,
.contact-form input:not(:placeholder-shown)~label,
.contact-form textarea:focus~label,
.contact-form textarea:not(:placeholder-shown)~label {
  top: -0.5rem;
  left: 0.5rem;
  font-size: 0.75rem;
  color: #fff;
  background-color: #000;
  padding: 0 0.5rem;
}

/* Lightbox */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(10px);
}

.lightbox.active {
  opacity: 1;
  pointer-events: all;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.lightbox.active img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 30px;
  right: 30px;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
  transition: transform 0.2s ease;
}

.lightbox-close:hover {
  transform: scale(1.1);
}