/* style.css */

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------------------------*/
:root {
  /* Colors - Neutral Palette with Dynamic Accents */
  --color-primary: #363636; /* Bulma's default dark grey, good for text */
  --color-primary-darker: #222222;
  --color-secondary: #7A7A7A; /* Medium grey for subtitles, less emphasis */
  
  --color-accent: #007BFF; /* A modern, yet versatile blue */
  --color-accent-hover: #0056b3;
  --color-accent-rgb: 0, 123, 255; /* RGB for box-shadow alpha */

  --color-accent-dynamic-1: #FF8C00; /* Retro Orange for dynamic transitions */
  --color-accent-dynamic-1-darker: #CC7000;
  --color-accent-dynamic-1-darkest: #A65A00;
  --color-accent-dynamic-2: #4CAF50; /* Retro Green for dynamic transitions */

  --color-background-light: #FDFDFD;
  --color-background-medium: #F5F5F5;
  --color-background-dark: #1E1E1E;
  --color-background-hero-overlay: rgba(0, 0, 0, 0.6); /* Adjusted for good contrast */
  
  --color-text-light: #FFFFFF;
  --color-text-dark: #333333; /* Main text color on light backgrounds */
  --color-text-inverted: #FFFFFF; /* Text on dark backgrounds */
  --color-text-muted: #6c757d;

  --color-success: #28a745; 
  --color-info: #17a2b8;
  --color-warning: #ffc107;
  --color-danger: #dc3545;

  --font-primary: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;

  --shadow-light: 0 2px 5px rgba(0,0,0,0.08);
  --shadow-medium: 0 5px 15px rgba(0,0,0,0.12);
  --shadow-heavy: 0 10px 30px rgba(0,0,0,0.18);

  --transition-short: 0.2s ease-in-out;
  --transition-medium: 0.3s ease-in-out;
  --transition-long: 0.5s ease-in-out;

  --header-height: 70px; 
  --footer-background: linear-gradient(135deg, #2C3E50, #1A2930); 
}

/*--------------------------------------------------------------
# General Styles & Resets
--------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
  font-size: 16px; 
}

body {
  font-family: var(--font-secondary);
  color: var(--color-text-dark);
  background-color: var(--color-background-light);
  line-height: 1.7; /* Increased for better readability */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.privacy-page main,
body.terms-page main {
  padding-top: calc(var(--header-height) + 2rem); /* Space for sticky header + extra */
}
body.success-page {
    padding-top: 0; /* No padding needed for full viewport page */
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, .title, .subtitle {
  font-family: var(--font-primary);
  color: var(--color-primary-darker);
  font-weight: 700;
}

.title {
  color: var(--color-primary-darker);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.05);
}
.section-title {
  margin-bottom: 2rem; /* Increased space */
  text-transform: uppercase;
  letter-spacing: 1.5px; /* Wider spacing */
  font-size: 2.5rem; 
  font-weight: 700;
  text-align: center;
  color: var(--color-primary-darker);
}


p, .content p {
  font-family: var(--font-secondary);
  color: var(--color-text-dark);
  margin-bottom: 1.25rem;
}
.content.is-medium p {
    font-size: 1.125rem; /* Larger for .is-medium */
    line-height: 1.75;
}

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

/*--------------------------------------------------------------
# Layout & Sections
--------------------------------------------------------------*/
.section {
  padding: 4rem 1.5rem; /* Increased vertical padding */
}

.container {
  max-width: 1200px; /* Wider container */
}

.has-background-light-gradient {
  background: linear-gradient(135deg, var(--color-background-light) 0%, var(--color-background-medium) 100%);
}
.has-background-dark-gradient {
   background: var(--footer-background);
}


/*--------------------------------------------------------------
# Header & Navigation
--------------------------------------------------------------*/
.header.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1020;
  background-color: rgba(255, 255, 255, 0.85); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-medium); /* More pronounced shadow */
  transition: background-color var(--transition-medium);
  height: var(--header-height);
}
.navbar.is-transparent {
    background-color: transparent; /* Ensure Bulma's transparency holds */
}
.navbar-brand .navbar-item img {
    max-height: 40px; /* Control logo height */
}
.navbar-item, .navbar-link {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-primary) !important;
  transition: color var(--transition-short), transform var(--transition-short);
}
.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
  background-color: transparent !important;
  color: var(--color-accent) !important;
  transform: translateY(-1px);
}
.navbar-dropdown {
    border-top-color: var(--color-accent);
    border-top-width: 2px;
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
}
.navbar-dropdown .navbar-item {
    color: var(--color-primary) !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.navbar-dropdown .navbar-item:hover {
    color: var(--color-accent) !important;
    background-color: var(--color-background-medium) !important;
}

.navbar-burger { color: var(--color-primary); }
.navbar-burger span { background-color: var(--color-primary); height: 2px; width: 20px; }
.navbar-burger:hover { background-color: rgba(0,0,0,0.05); }


/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--color-text-light);
}
.hero-background-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--color-background-hero-overlay);
  z-index: 1;
}
.hero .hero-body {
  position: relative; z-index: 2;
  padding: 8rem 1.5rem; /* More padding for impact */
}
.hero .hero-title {
  font-size: 3.5rem; 
  font-weight: 700;
  color: var(--color-text-light) !important;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
  margin-bottom: 1.5rem;
}
.hero .hero-subtitle {
  font-size: 1.6rem;
  color: var(--color-text-light) !important;
  text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
  margin-bottom: 2.5rem;
  max-width: 750px;
  margin-left: auto; margin-right: auto;
}

/*--------------------------------------------------------------
# Buttons (Global Styles)
--------------------------------------------------------------*/
.button, button, input[type="submit"], input[type="button"] {
  font-family: var(--font-primary);
  font-weight: 700; /* Bolder buttons */
  border-radius: var(--border-radius-medium);
  padding: 0.8em 1.8em; 
  transition: all var(--transition-medium);
  text-transform: uppercase;
  letter-spacing: 0.8px; /* More spacing */
  box-shadow: var(--shadow-light);
  border: none; 
}
.button.is-primary, .button.is-link {
  background-color: var(--color-accent);
  color: var(--color-text-light) !important;
}
.button.is-primary:hover, .button.is-link:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-text-light) !important;
  transform: translateY(-3px) scale(1.02); /* More pronounced hover */
  box-shadow: var(--shadow-medium);
}
.retro-button {
  background: linear-gradient(145deg, var(--color-accent-dynamic-1), var(--color-accent-dynamic-1-darker));
  color: var(--color-text-light) !important;
  border: 2px solid var(--color-accent-dynamic-1-darkest);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.retro-button:hover {
  background: linear-gradient(145deg, var(--color-accent-dynamic-1-darker), var(--color-accent-dynamic-1));
  transform: translateY(-4px) scale(1.05); /* More retro pop */
  box-shadow: 0 10px 20px rgba(var(--color-accent-dynamic-1-rgb, 255, 140, 0), 0.3); /* Orange glow */
}
:root { --color-accent-dynamic-1-rgb: 255, 140, 0; }

.retro-button-small { padding: 0.6em 1.2em; font-size: 0.9rem; }
.button.is-outlined.is-primary {
    border-color: var(--color-accent); color: var(--color-accent);
}
.button.is-outlined.is-primary:hover {
    background-color: var(--color-accent); color: var(--color-text-light);
}
.read-more-link {
    font-family: var(--font-primary); font-weight: 600; color: var(--color-accent);
    text-decoration: none; display: inline-block; padding: 0.3em 0; position: relative;
    transition: color var(--transition-short), letter-spacing var(--transition-short);
}
.read-more-link::after { content: '→'; margin-left: 0.5em; transition: transform var(--transition-short); }
.read-more-link:hover { color: var(--color-accent-hover); letter-spacing: 0.5px; }
.read-more-link:hover::after { transform: translateX(6px); }


/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
.card {
  background-color: var(--color-background-light);
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
  display: flex; flex-direction: column; height: 100%;
}
.card:hover {
  transform: translateY(-8px) scale(1.03); /* More noticeable hover */
  box-shadow: var(--shadow-heavy);
}
.card .card-image {
  overflow: hidden; text-align: center;
}
.card .card-image .image-container {
    width: 100%; overflow: hidden; display: flex;
    justify-content: center; align-items: center;
}
/* Fixed height for image containers in specific cards like insights, webinars */
#insights .card .image-container,
#webinars .card .image-container {
    height: 220px; /* Example fixed height */
}
#insights .card .image-container img,
#webinars .card .image-container img,
.card .card-image figure.image img { /* For Bulma's figure.image */
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform var(--transition-long);
}
.card:hover .card-image img { transform: scale(1.08); } /* Stronger zoom */

.card .card-content {
  padding: 1.75rem; /* More padding */
  text-align: left; flex-grow: 1;
  display: flex; flex-direction: column; justify-content: space-between;
}
.card .card-content .title {
    font-size: 1.35rem; margin-bottom: 0.75rem; color: var(--color-primary-darker);
}
.card .card-content .subtitle {
    font-size: 0.95rem; color: var(--color-secondary); margin-bottom: 1.25rem;
}
.card .card-content .content {
    font-size: 1rem; color: var(--color-text-dark); margin-bottom: 1.25rem;
}
.card .card-content .button { margin-top: auto; align-self: flex-start; } /* Button at bottom-left */

/* Clientele Logos */
#clientele .card { text-align: center; }
#clientele .card .card-image figure.image {
    display: flex; align-items: center; justify-content: center;
    height: 180px; background-color: #f9f9f9; padding: 1rem;
}
#clientele .card .card-image img {
    max-height: 100px; width: auto; object-fit: contain;
}


/*--------------------------------------------------------------
# Section Specific Styles
--------------------------------------------------------------*/
#about .image-container img {
  border-radius: var(--border-radius-large); box-shadow: var(--shadow-medium);
}
#research .card .media { align-items: center; }
#research .card .media-left figure.image img { border-radius: var(--border-radius-small); }

/* Sustainability Progress */
#sustainability .progress {
  height: 1.2rem; border-radius: var(--border-radius-medium); margin-bottom: 0.75rem;
}
#sustainability .progress::-webkit-progress-bar { background-color: #e9ecef; border-radius: var(--border-radius-medium); }
#sustainability .progress.is-success::-webkit-progress-value,
#sustainability .progress.is-info::-webkit-progress-value,
#sustainability .progress.is-warning::-webkit-progress-value {
  border-radius: var(--border-radius-medium); transition: width var(--transition-long) ease-out;
}
#sustainability .progress.is-success::-webkit-progress-value { background-color: var(--color-success); }
#sustainability .progress.is-info::-webkit-progress-value { background-color: var(--color-info); }
#sustainability .progress.is-warning::-webkit-progress-value { background-color: var(--color-warning); }
#sustainability .progress::-moz-progress-bar {
  border-radius: var(--border-radius-medium); transition: width var(--transition-long) ease-out;
}
#sustainability .progress.is-success::-moz-progress-bar { background-color: var(--color-success); }
#sustainability .progress.is-info::-moz-progress-bar { background-color: var(--color-info); }
#sustainability .progress.is-warning::-moz-progress-bar { background-color: var(--color-warning); }
#sustainability .metric .label { font-weight: 700; margin-bottom: 0.35rem; color: var(--color-primary-darker); }
#sustainability .metric .has-text-right { font-size: 0.9rem; color: var(--color-secondary); }

/* External Resources */
.external-links-list ul { list-style: none; margin-left: 0; }
.external-links-list li {
    margin-bottom: 1.75rem; padding: 1.25rem; background-color: var(--color-background-light);
    border-left: 4px solid var(--color-accent-dynamic-1); /* Retro accent border */
    border-radius: var(--border-radius-medium); box-shadow: var(--shadow-light);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.external-links-list li:hover { transform: translateX(5px) scale(1.01); box-shadow: var(--shadow-medium); }
.external-links-list .external-link strong {
    font-size: 1.2rem; color: var(--color-accent); display: block; margin-bottom: 0.35rem;
}
.external-links-list .external-link p { font-size: 1rem; color: var(--color-text-dark); margin-bottom: 0; }

/* FAQ Accordions */
.accordion-container {
  border: 1px solid #e0e0e0; border-radius: var(--border-radius-large); overflow: hidden; box-shadow: var(--shadow-light);
}
.accordion-item { border-bottom: 1px solid #e0e0e0; }
.accordion-item:last-child { border-bottom: none; }
.accordion-header {
  background-color: var(--color-background-light); color: var(--color-primary-darker); cursor: pointer;
  padding: 1.25rem 1.75rem; width: 100%; text-align: left; border: none; outline: none;
  transition: background-color var(--transition-short); font-family: var(--font-primary);
  font-size: 1.2rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center;
}
.accordion-header:hover { background-color: #f7f7f7; }
.accordion-header .icon { transition: transform var(--transition-medium); fill: currentColor; }
.accordion-header .icon svg { width: 22px; height: 22px; }
.accordion-item.active .accordion-header .icon { transform: rotate(180deg); }
.accordion-content {
  padding: 0 1.75rem; background-color: white; max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Slower transition */
}
.accordion-item.active .accordion-content { padding: 1.75rem; /* max-height set by JS */ }
.accordion-content p { margin-bottom: 1.25rem; font-size: 1rem; line-height: 1.7; }
.accordion-content p:last-child { margin-bottom: 0; }

/* Contact Info Section (./) */
#contact-info .contact-detail {
    display: flex; align-items: center; margin-bottom: 0.75rem; font-size: 1.15rem;
}
#contact-info .contact-icon {
    margin-right: 1rem; width: 28px; height: 28px; /* Slightly larger icons */
    filter: invert(10%) sepia(5%) saturate(0%) hue-rotate(175deg) brightness(90%) contrast(85%);
}

/*--------------------------------------------------------------
# Contact Page (contacts.html)
--------------------------------------------------------------*/
.contact-form-section { padding: 5rem 1.5rem; background-color: var(--color-background-medium); }
.contact-form-container {
  max-width: 750px; margin: 0 auto; background-color: var(--color-background-light);
  padding: 3rem; border-radius: var(--border-radius-large); box-shadow: var(--shadow-heavy);
}
.input, .textarea {
  border-radius: var(--border-radius-medium); border: 1px solid #ced4da; /* Slightly darker border */
  box-shadow: none; transition: border-color var(--transition-medium), box-shadow var(--transition-medium);
  padding: 0.85em 1.1em; font-size: 1rem;
}
.input:focus, .textarea:focus,
.input.is-focused, .textarea.is-focused,
.input:active, .textarea:active,
.input.is-active, .textarea.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.15em rgba(var(--color-accent-rgb), 0.2); 
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  background: var(--footer-background); color: var(--color-text-inverted);
  padding: 4rem 1.5rem 2.5rem; 
}
.footer .title { color: var(--color-text-light) !important; margin-bottom: 1.25rem; }
.footer p, .footer li { color: #ced4da; font-size: 1rem; }
.footer a.footer-link { color: #e9ecef; transition: color var(--transition-short), letter-spacing var(--transition-short); }
.footer a.footer-link:hover {
  color: var(--color-accent-dynamic-1); text-decoration: none; letter-spacing: 0.3px;
}
.footer .social-links-footer li { display: inline-block; margin-right: 1.25rem; }
.footer .social-links-footer li:last-child { margin-right: 0; }
.footer .footer-hr {
  border-top: 1px solid rgba(255,255,255,0.15); margin: 2.5rem 0 2rem;
}
.footer .content p { color: #ced4da; font-size: 0.9rem; }


/*--------------------------------------------------------------
# Success Page (success.html)
--------------------------------------------------------------*/
.success-page-container {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 100vh; text-align: center; padding: 2rem;
  background: linear-gradient(135deg, var(--color-background-light), var(--color-background-medium));
}
.success-page-container .icon-success {
    font-size: 6rem; color: var(--color-success); margin-bottom: 2rem;
    animation: popInSuccess 0.5s ease-out forwards;
}
@keyframes popInSuccess {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.success-page-container .title { color: var(--color-primary-darker); font-size: 2.5rem; }
.success-page-container .subtitle { color: var(--color-secondary); font-size: 1.25rem; }

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
.anim-fade-in-up, .anim-pop-in, .anim-slide-in-left, .anim-slide-in-right, .anim-zoom-in {
  opacity: 0;
  transition: opacity 0.7s var(--transition-medium), transform 0.7s var(--transition-medium);
}
.anim-fade-in-up { transform: translateY(40px); }
.anim-pop-in { transform: scale(0.7); }
.anim-slide-in-left { transform: translateX(-60px); }
.anim-slide-in-right { transform: translateX(60px); }
.anim-zoom-in { transform: scale(0.6); }

.is-visible.anim-fade-in-up, .is-visible.anim-pop-in,
.is-visible.anim-slide-in-left, .is-visible.anim-slide-in-right,
.is-visible.anim-zoom-in {
  opacity: 1; transform: translate(0,0) scale(1);
}
.anim-progress { transition: width 1.5s ease-in-out; }

.anim-3d-hover { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* More bouncy */
.anim-3d-hover:hover {
  transform: perspective(1200px) rotateY(8deg) rotateX(3deg) scale(1.08);
}
.anim-glow:hover {
    box-shadow: 0 0 20px 8px rgba(var(--color-accent-dynamic-1-rgb), 0.4);
}
.anim-pulse { animation: pulseAnimation 2.5s infinite cubic-bezier(0.66, 0, 0, 1); }
@keyframes pulseAnimation {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.5); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(var(--color-accent-rgb), 0); }
}


/*--------------------------------------------------------------
# Utility & Responsive
--------------------------------------------------------------*/
.has-text-shadow { text-shadow: 1px 1px 3px rgba(0,0,0,0.25); }
.mt-auto { margin-top: auto !important; }

@media screen and (max-width: 1023px) { /* Tablet and below */
  .navbar-menu {
    background-color: rgba(255, 255, 255, 0.98); box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
  }
  .navbar-item, .navbar-link { padding: 0.75rem 1rem; }
  .section-title { font-size: 2rem; }
}

@media screen and (max-width: 768px) { /* Mobile */
  .section { padding: 2.5rem 1rem; }
  .section-title { font-size: 1.8rem; letter-spacing: 1px;}
  .hero .hero-title { font-size: 2.5rem; }
  .hero .hero-subtitle { font-size: 1.3rem; }
  .columns.is-vcentered .column:first-child { order: 2; }
  .columns.is-vcentered .column:last-child { order: 1; margin-bottom: 2rem; }
  #about .columns.is-vcentered .column:first-child { order: 1; }
  #about .columns.is-vcentered .column:last-child { order: 2; margin-bottom: 0;}
  #clientele .column.is-one-quarter-desktop.is-half-tablet { flex: 0 0 50%; max-width: 50%; }
  .contact-form-container { padding: 2rem 1.5rem; }
  .footer { padding: 3rem 1.5rem 2rem; }
  .footer .columns > .column { margin-bottom: 1.5rem; }
}