/* style.css */

/*------------------------------------------------------------------
[Table of contents]

1.  Variables
2.  Global Styles
3.  Utility Classes
4.  Header / Navbar
5.  Hero Section
6.  Section Base Styles
7.  Card Styles (General & Specific)
8.  Specific Sections
    8.1 Mission
    8.2 History
    8.3 Features (Info Cards)
    8.4 External Resources
    8.5 Clientele
    8.6 Contact Form
9.  Footer
10. Page Specific Styles (Success, Privacy, Terms)
11. Animations & Transitions (Placeholder for GSAP/JS)
12. Cookie Consent Popup (From HTML Inline)
13. Responsive Adjustments (Bulma Overrides/Additions)
-------------------------------------------------------------------*/

/* 1. Variables
-------------------------------------------------------------------*/
:root {
  /* Analogous Color Scheme (Teal Base) */
  --color-primary: #0a9396; /* Dark Cyan (matches HTML button) */
  --color-primary-dark: #005f73; /* Teal Blue (matches HTML button border/shadow) */
  --color-primary-light: #94d2bd; /* Pale Aqua (matches HTML links/card borders) */

  --color-analogous-1: #e9d8a6; /* Buff (Sand color) */
  --color-analogous-1-dark: #ee9b00; /* Orange (Web) */

  --color-analogous-2: #ae2012; /* Rufous (Deep Red/Brown) */
  --color-analogous-2-dark: #9b2226; /* Ruby Red */

  --color-accent: var(--color-analogous-2); /* Using Red/Brown as accent */
  --color-accent-dark: var(--color-analogous-2-dark);

  /* Neutrals */
  --color-text-light: #ffffff;
  --color-text-dark: #333333;
  --color-text-heading: #222222; /* Even darker for headings */
  --color-background-light: #f4f4f4;
  --color-background-medium: #e0e0e0;
  --color-background-dark: #333333;
  --color-background-darker: #1a1a1a;
  --color-border: #333333; /* Brutalist Black/Dark Border */
  --color-shadow-light: #cccccc;
  --color-shadow-dark: #000000;

  /* Fonts */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Work Sans', sans-serif;

  /* Spacing */
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  --spacing-xlarge: 2rem;
  --spacing-xxlarge: 3rem;
  --navbar-height: 52px; /* Default Bulma navbar height */

  /* Brutalism */
  --border-width: 2px;
  --brutalist-shadow-offset: 5px;
  --brutalist-shadow: var(--brutalist-shadow-offset) var(--brutalist-shadow-offset) 0px var(--color-shadow-light);
  --brutalist-shadow-dark: var(--brutalist-shadow-offset) var(--brutalist-shadow-offset) 0px var(--color-shadow-dark);
  --brutalist-shadow-primary: 4px 4px 0px var(--color-primary-dark); /* Match HTML button */

  /* Transitions (Morphing Hint) */
  --transition-speed: 0.2s; /* Faster for brutalism */
  --transition-ease: ease-out;
}

/* 2. Global Styles
-------------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px; /* Base font size */
}

body {
  font-family: var(--font-secondary);
  background-color: var(--color-background-light);
  color: var(--color-text-dark);
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--navbar-height); /* Space for fixed navbar */
}

h1, h2, h3, h4, h5, h6,
.title, .subtitle { /* Targeting Bulma classes too */
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-medium); /* Default Bulma is 1.5rem, adjust if needed */
  line-height: 1.2;
  word-wrap: break-word; /* Prevent overflow */
}

/* Ensure sufficient contrast for headings */
.title { color: var(--color-text-heading) !important; }
.subtitle { color: var(--color-text-dark) !important; } /* Slightly lighter than title */

p {
  margin-bottom: var(--spacing-medium);
  color: var(--color-text-dark);
  max-width: 75ch; /* Improve readability */
}
.section p { /* Center paragraphs within sections unless overridden */
   margin-left: auto;
   margin-right: auto;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
  font-weight: 500;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block; /* Remove extra space below image */
}

/* Global Button Styles (Extending/Styling Bulma's .button) */
.button {
  font-family: var(--font-secondary);
  font-weight: 500;
  border: var(--border-width) solid var(--color-border);
  box-shadow: var(--brutalist-shadow);
  transition: transform var(--transition-speed) var(--transition-ease),
              box-shadow var(--transition-speed) var(--transition-ease),
              background-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.75em 1.5em; /* Standard padding */
  cursor: pointer;
  white-space: normal; /* Allow button text to wrap */
  line-height: 1.4;
}

.button:hover {
  transform: translate(2px, 2px);
  box-shadow: calc(var(--brutalist-shadow-offset) - 3px) calc(var(--brutalist-shadow-offset) - 3px) 0px var(--color-shadow-light); /* Reduced shadow on hover */
}

.button:active {
  transform: translate(var(--brutalist-shadow-offset) - 1px, var(--brutalist-shadow-offset) - 1px); /* Slightly less move on active */
  box-shadow: none;
}

.button.is-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: var(--color-text-light);
  box-shadow: var(--brutalist-shadow-primary);
}

.button.is-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-light);
   box-shadow: 2px 2px 0px var(--color-primary-dark); /* Match HTML hover style */
}

.button.is-primary:active {
    transform: translate(4px, 4px); /* Match HTML active style */
    box-shadow: none;
}

.button.is-light { /* For secondary actions */
    background-color: var(--color-text-light);
    border-color: var(--color-border);
    color: var(--color-text-dark);
    box-shadow: 4px 4px 0px var(--color-shadow-light); /* Match HTML style */
}
.button.is-light:hover {
    background-color: var(--color-background-medium);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--color-shadow-light);
}
.button.is-light:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

.button.is-large {
    padding: 1em 2em; /* Larger padding for large buttons */
    font-size: 1.1rem;
}

.button.is-medium {
    padding: 0.85em 1.75em;
}


/* Read More Link Style */
.read-more-link {
    display: inline-block;
    margin-top: var(--spacing-medium);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 3px;
    color: var(--color-primary-dark); /* Darker color for visibility */
    border-bottom: var(--border-width) solid var(--color-primary-dark);
    transition: border-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
}
.read-more-link:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    text-decoration: none;
}

/* 3. Utility Classes
-------------------------------------------------------------------*/
.animate-on-scroll {
  /* Placeholder for JS animation libraries like GSAP + ScrollTrigger */
  /*opacity: 0;*/
  transform: translateY(30px); /* Slightly more pronounced effect */
  transition: opacity 0.7s var(--transition-ease), transform 0.7s var(--transition-ease);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.has-text-white { /* Ensure high contrast for white text */
    color: var(--color-text-light) !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Add shadow for readability */
}
.has-text-white .title, .has-text-white .subtitle, .has-text-white p, .has-text-white a {
     color: var(--color-text-light) !important;
}
.has-text-white a:hover {
    color: var(--color-primary-light) !important; /* Lighter hover for links on dark */
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xxlarge);
    color: var(--color-text-heading);
    font-size: 2.5rem; /* Prominent section titles */
}
@media screen and (max-width: 768px) {
    .section-title {
        font-size: 2rem;
        margin-bottom: var(--spacing-xlarge);
    }
}

/* Parallax Background Placeholder */
.parallax-background {
  background-attachment: fixed; /* Basic CSS parallax */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 6rem 1.5rem; /* Ensure content is visible */
}

/* Overlay for Parallax/Background Images with Text */
.parallax-background::before,
.background-image-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Darker gradient for better contrast */
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.65));
  z-index: 1;
}

.parallax-background .container,
.background-image-overlay .container {
  position: relative; /* Ensure content is above overlay */
  z-index: 2;
}

/* 4. Header / Navbar
-------------------------------------------------------------------*/
.header .navbar.is-fixed-top {
  border-bottom: var(--border-width) solid var(--color-border);
  background-color: var(--color-text-light);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Slightly stronger shadow */
  z-index: 1000; /* Ensure navbar is above other content */
}

.navbar-item, .navbar-link {
  font-family: var(--font-secondary);
  font-weight: 500;
  color: var(--color-text-dark) !important;
  transition: background-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
  padding: 0 var(--spacing-medium); /* Standard padding */
}

.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
  background-color: var(--color-background-light) !important;
  color: var(--color-primary) !important;
}
.navbar-item.is-active {
   font-weight: 700;
}

.navbar-brand .navbar-item {
    padding-left: var(--spacing-medium);
    padding-right: var(--spacing-medium);
}

.navbar-brand .navbar-item .title {
    color: var(--color-primary-dark) !important; /* Brand specific color */
    margin-bottom: 0; /* Reset margin for brand title */
    font-size: 1.5rem;
}

.navbar-burger {
  color: var(--color-text-dark);
  width: 3.25rem; /* Ensure consistent size */
  height: 3.25rem;
}

/* 5. Hero Section
-------------------------------------------------------------------*/
#hero {
  min-height: 75vh; /* Slightly taller hero */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-light); /* Ensured white text */
  position: relative;
  padding: var(--spacing-xxlarge) var(--spacing-large);
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: var(--border-width) solid var(--color-border);
}

#hero::before { /* Uses the general overlay defined above */ }

#hero .hero-body {
  position: relative;
  z-index: 2;
  max-width: 900px; /* Limit content width */
  margin: 0 auto;
}

#hero .title,
#hero .subtitle {
  color: var(--color-text-light) !important; /* IMPORTANT override */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Stronger shadow */
}
#hero .title {
    font-size: 3.5rem; /* Larger title */
    margin-bottom: var(--spacing-medium);
}
#hero .subtitle {
    font-size: 1.4rem; /* Adjusted subtitle size */
    margin-top: var(--spacing-medium);
    max-width: 700px; /* Constrain subtitle width */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

#hero .button {
    margin: var(--spacing-xlarge) var(--spacing-small) 0;
}

/* 6. Section Base Styles
-------------------------------------------------------------------*/
.section {
  padding: var(--spacing-xxlarge) var(--spacing-large);
  border-bottom: var(--border-width) solid var(--color-border);
  position: relative; /* For potential pseudo-elements */
  overflow: hidden; /* Contain elements */
}

.section:last-of-type {
  border-bottom: none;
}

.section.has-background-light { background-color: var(--color-background-light); }
.section.has-background-white { background-color: var(--color-text-light); }
.section.has-background-primary-light { background-color: var(--color-primary-light); }

/* 7. Card Styles (General & Specific)
-------------------------------------------------------------------*/
.card {
  background-color: var(--color-text-light);
  border: var(--border-width) solid var(--color-border);
  box-shadow: var(--brutalist-shadow);
  margin-bottom: var(--spacing-xlarge);
  display: flex; /* Use flex for better control */
  flex-direction: column; /* Stack image and content vertically */
  height: 100%; /* Make cards in a row equal height */
  transition: transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
  overflow: hidden; /* Prevent content spillover */
}

.card:hover {
  transform: translate(-3px, -3px); /* Slightly more movement */
  box-shadow: calc(var(--brutalist-shadow-offset) + 3px) calc(var(--brutalist-shadow-offset) + 3px) 0px var(--color-shadow-light);
}

/* STROGO: Centers image container and content */
.card {
    align-items: center; /* Center flex items horizontally */
}

/* STROGO: Image container styling */
.card .card-image { /* Bulma class */
    border-bottom: var(--border-width) solid var(--color-border);
    margin-bottom: 0; /* Reset Bulma margin */
    width: 100%; /* Take full width of card */
    position: relative;
    /* STROGO: Fixed Height for Image container */
    height: 220px; /* Adjust as needed */
    overflow: hidden; /* Hide overflow */
}

.card .card-image .image { /* Bulma .image wrapper */
    height: 100%;
    width: 100%;
    margin: 0; /* Reset margin if Bulma adds any */
}

.card .card-image img {
    width: 100%;
    height: 100%;
    /* STROGO: object-fit: cover */
    object-fit: cover;
    display: block;
    margin: 0 auto; /* Ensure centered if somehow smaller */
    transition: transform 0.4s ease; /* Subtle zoom on hover */
}
.card:hover .card-image img {
    transform: scale(1.05);
}

/* STROGO: Centers content inside cards */
.card .card-content {
  padding: var(--spacing-large);
  text-align: center; /* Center text content */
  flex-grow: 1; /* Allow content to fill space */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center content */
  align-items: center; /* Horizontally center content */
  width: 100%; /* Ensure content takes full width */
}

.card .card-content .title {
    color: var(--color-primary-dark) !important; /* Primary color for card titles */
    margin-bottom: var(--spacing-medium);
    font-size: 1.3rem;
}
.card .card-content .content p {
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-medium);
    max-width: 60ch; /* Limit paragraph width in cards */
}
.card .card-content .content p:last-child {
    margin-bottom: 0;
}

/* Info Cards (from Features Section) Specific Styling */
.info-card {
    text-align: center; /* Ensure wrapper centers */
}

/* STROGO: Centers image container */
.info-card .card-image {
    height: 120px; /* Smaller icon/feature image */
    width: 120px;
    margin: var(--spacing-large) auto var(--spacing-large) auto; /* Center horizontally */
    border-radius: 50%;
    border: var(--border-width) solid var(--color-border);
    padding: var(--spacing-small);
    background-color: var(--color-background-light);
    display: flex; /* Center image inside */
    justify-content: center;
    align-items: center;
    box-shadow: var(--brutalist-shadow); /* Add shadow to icon container */
}

.info-card .card-image img {
    object-fit: contain;
    border-radius: 50%;
    max-width: 80%; /* Prevent icon touching border */
    max-height: 80%;
    transform: none; /* Disable zoom for icons */
    transition: none;
}
.info-card:hover .card-image img {
    transform: none;
}

.info-card .card-content .title {
    font-size: 1.2rem;
}


/* 8. Specific Sections
-------------------------------------------------------------------*/

/* 8.1 Mission */
#mission {
    text-align: center;
}
#mission .column.is-two-thirds { /* Center column */
    margin-left: auto;
    margin-right: auto;
}
#mission figure.image {
    max-width: 600px; /* Limit image width */
    margin-left: auto;
    margin-right: auto;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--brutalist-shadow);
    margin-top: var(--spacing-xlarge);
    overflow: hidden; /* Contain image */
}
#mission figure.image img {
    object-fit: cover;
}

/* 8.2 History */
#history .columns.is-vcentered {
    align-items: center; /* Ensure vertical alignment */
}
#history figure.image { /* Container for image */
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--brutalist-shadow);
    overflow: hidden; /* Ensure image fit */
    height: 100%; /* Match column height */
    max-height: 450px; /* Limit max height */
}
#history figure.image img {
    object-fit: cover;
    height: 100%;
}
#history .column:last-child { /* Text column */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: var(--spacing-xlarge); /* Space between image and text */
}
#history .column:last-child .title {
    text-align: left; /* Align title left */
}
#history .column:last-child p {
    text-align: left; /* Align text left */
    margin-left: 0; /* Reset auto margin */
    margin-right: 0;
}
@media screen and (max-width: 768px) {
    #history .column:last-child {
        padding-left: 0; /* No extra padding on mobile */
    }
    #history .column:last-child .title,
    #history .column:last-child p {
        text-align: center; /* Center text on mobile when stacked */
        margin-left: auto;
        margin-right: auto;
    }
}


/* 8.3 Features (Info Cards styled above) */
#features .columns.is-multiline .column {
    display: flex; /* Ensure columns stretch */
    padding: var(--spacing-medium); /* Add padding around columns */
}

/* 8.4 External Resources */
#external-resources .card {
  background-color: #e0fbfc; /* Match HTML style */
  border-color: var(--color-primary-light); /* Match HTML style */
  box-shadow: 4px 4px 0px var(--color-primary-light); /* Match HTML style */
  text-align: left; /* Override card center */
  align-items: flex-start; /* Override card center */
}
#external-resources .card:hover {
   box-shadow: 6px 6px 0px var(--color-primary-light); /* Match HTML hover style */
   transform: translate(-2px, -2px);
}

#external-resources .card .card-content {
    align-items: flex-start; /* Override card center */
    text-align: left;
}

#external-resources .card .title a {
  color: var(--color-primary-dark);
  text-decoration: none;
  border-bottom: var(--border-width) dotted var(--color-primary-dark);
  transition: border-bottom-style var(--transition-speed) var(--transition-ease);
}
#external-resources .card .title a:hover {
  border-bottom-style: solid;
  color: var(--color-accent); /* Different hover color */
}
#external-resources .card .content p {
    color: var(--color-text-dark); /* Ensure text is dark */
    margin-left: 0; /* Reset auto margin */
    margin-right: 0;
    text-align: left;
}


/* 8.5 Clientele (Parallax Section) */
#clientele {
    /* Uses .parallax-background styles */
    text-align: center;
}
#clientele p.is-size-5 {
     max-width: 800px; /* Constrain text width */
     margin-left: auto;
     margin-right: auto;
}
#clientele .is-italic {
    margin-top: var(--spacing-large);
    display: block;
    font-size: 1.1rem;
}


/* 8.6 Contact Form */
#contact .column.is-two-thirds { /* Center column */
    margin-left: auto;
    margin-right: auto;
}
#contact .has-text-centered.is-size-5 {
    max-width: 700px; /* Limit intro text width */
    margin-left: auto;
    margin-right: auto;
}

.contact-form .label {
  color: var(--color-text-dark);
  font-weight: 500;
  font-family: var(--font-secondary);
  margin-bottom: var(--spacing-small);
  display: block; /* Ensure label is block */
  text-align: left; /* Align labels left */
}

.contact-form .input,
.contact-form .textarea {
  border: var(--border-width) solid var(--color-border);
  /* Match HTML style */
  box-shadow: 3px 3px 0px var(--color-shadow-light);
  transition: border-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
  background-color: var(--color-text-light);
  color: var(--color-text-dark);
  padding: 0.85em 1em; /* Slightly more padding */
  font-family: var(--font-secondary);
  font-size: 1rem;
  width: 100%; /* Ensure full width */
}

.contact-form .input::placeholder,
.contact-form .textarea::placeholder {
  color: #888888;
  opacity: 1;
}

.contact-form .input:focus,
.contact-form .textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  /* Match HTML focus style */
  box-shadow: 0px 0px 0px var(--color-shadow-light);
}

.contact-form .textarea {
    min-height: 150px;
    resize: vertical; /* Allow vertical resize */
}

.contact-form .button {
    min-width: 180px; /* Give submit button more width */
    padding: 0.85em 1.75em;
}
.contact-form .field.is-grouped.is-grouped-centered {
    margin-top: var(--spacing-xlarge); /* More space before button */
}


/* 9. Footer
-------------------------------------------------------------------*/
.footer {
  background-color: var(--color-background-dark);
  color: var(--color-background-medium); /* Base text color */
  padding: var(--spacing-xxlarge) var(--spacing-large);
  border-top: var(--border-width) solid var(--color-shadow-dark);
}

.footer .title {
  color: var(--color-text-light) !important; /* White titles in footer */
  font-size: 1.2rem;
  margin-bottom: var(--spacing-medium);
}

.footer p, .footer ul li {
  color: var(--color-background-medium); /* Lighter grey for footer text */
  font-size: 0.95rem;
}

.footer a {
  color: var(--color-primary-light); /* Light teal links */
  font-weight: 500;
  transition: color var(--transition-speed) var(--transition-ease), text-decoration var(--transition-speed) var(--transition-ease);
}

.footer a:hover {
  color: var(--color-text-light);
  text-decoration: underline;
}

.footer ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0; /* Ensure no padding */
}
.footer ul li {
    margin-bottom: var(--spacing-small);
}

/* Footer Social Links (Text-based) */
.footer .social-links {
    margin-top: var(--spacing-medium);
}
/* Style TEXT links distinctively */
.footer .social-links a {
  margin: 0 var(--spacing-medium) var(--spacing-small) 0; /* Space between links */
  display: inline-block;
  padding: var(--spacing-small) 0;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  font-weight: 700; /* Bolder social links */
  border-bottom: var(--border-width) dotted transparent;
}
.footer .social-links a:hover {
    text-decoration: none;
    color: var(--color-text-light);
    border-bottom-color: var(--color-primary-light);
}

.footer .content.has-text-centered p {
    color: var(--color-background-medium);
    font-size: 0.9rem;
    margin-top: var(--spacing-xlarge);
}

/* 10. Page Specific Styles (Success, Privacy, Terms)
-------------------------------------------------------------------*/
.page-success body { /* Target body specifically for success page */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Full viewport height */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    text-align: center;
    padding: var(--spacing-large); /* Padding around content */
    background-color: var(--color-primary-light); /* Optional distinct background */
    padding-top: var(--navbar-height); /* Ensure navbar space is accounted for */
}

.page-success .success-content {
    background: var(--color-text-light);
    padding: var(--spacing-xxlarge);
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--brutalist-shadow-dark); /* Darker shadow for emphasis */
    max-width: 600px;
    width: 90%; /* Ensure it doesn't touch edges */
}
.page-success .success-content .title {
    color: var(--color-primary-dark) !important;
    margin-bottom: var(--spacing-large);
}
.page-success .success-content p {
    margin-bottom: var(--spacing-large);
    color: var(--color-text-dark);
}
.page-success .success-content .button {
    margin-top: var(--spacing-large);
}

/* Privacy & Terms Page Styling */
.page-privacy main,
.page-terms main {
    padding-top: var(--spacing-xlarge); /* Padding inside main */
    padding-bottom: var(--spacing-xlarge);
}

.page-privacy .container,
.page-terms .container {
    max-width: 800px; /* Limit content width for readability */
    background-color: var(--color-text-light);
    padding: var(--spacing-xlarge);
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--brutalist-shadow);
}

.page-privacy h1, .page-terms h1,
.page-privacy h2, .page-terms h2 {
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-medium);
    color: var(--color-primary-dark);
}
.page-privacy h1, .page-terms h1 {
    text-align: center;
    font-size: 2rem;
}
.page-privacy p, .page-terms p,
.page-privacy ul, .page-terms ul {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.page-privacy ul, .page-terms ul {
    list-style: disc;
    margin-left: var(--spacing-large);
    margin-bottom: var(--spacing-medium);
}

/* 11. Animations & Transitions (Placeholder)
-------------------------------------------------------------------*/
/* Basic transitions added globally and to specific elements */
/* For 'Morphing', consider using JS with libraries like GSAP for SVG path morphing */
/* Example: Simple hover scale for visual feedback */
.card-image img, .button, .info-card .card-image {
    will-change: transform, box-shadow; /* Optimize transitions */
}


/* 12. Cookie Consent Popup (Matches HTML Inline)
-------------------------------------------------------------------*/
#cookie-consent-popup {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Darker overlay */
    padding: 15px 20px;
    box-sizing: border-box;
    z-index: 9999;
    color: var(--color-text-light);
    text-align: center;
    border-top: var(--border-width) solid var(--color-shadow-dark);
    font-family: var(--font-secondary);
}
#cookie-consent-popup p {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
    color: var(--color-text-light); /* Ensure white text */
    max-width: calc(100% - 150px); /* Prevent overlap with button */
    text-align: left;
}
#cookie-consent-button {
    padding: 8px 15px;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border: var(--border-width) solid var(--color-primary-dark);
    cursor: pointer;
    font-weight: 500;
    box-shadow: 2px 2px 0px var(--color-primary-dark);
    transition: transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
    vertical-align: middle;
    font-family: var(--font-secondary);
    text-transform: uppercase;
}
#cookie-consent-button:hover {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--color-primary-dark);
}
#cookie-consent-button:active {
     transform: translate(2px, 2px);
     box-shadow: none;
}

/* 13. Responsive Adjustments
-------------------------------------------------------------------*/
@media screen and (max-width: 1023px) {
    /* Adjust padding for smaller screens */
    .section {
        padding: var(--spacing-xlarge) var(--spacing-medium);
    }
    #hero {
         padding: var(--spacing-xlarge) var(--spacing-medium);
         min-height: 65vh;
    }
    #hero .title { font-size: 2.8rem; }
    #hero .subtitle { font-size: 1.3rem; }

    /* Bulma Navbar Mobile */
    .navbar-menu {
        background-color: var(--color-text-light);
        box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
        padding: 0.5rem 0;
        border: var(--border-width) solid var(--color-border);
        border-top: none;
    }
    .navbar-item {
        color: var(--color-text-dark) !important;
        padding: 0.75rem 1.5rem;
        border-bottom: 1px solid var(--color-background-medium);
    }
     .navbar-item:last-child {
        border-bottom: none;
    }
    .navbar-item:hover {
        background-color: var(--color-background-light) !important;
    }
    /* Body padding remains var(--navbar-height) */
    .page-privacy main,
    .page-terms main {
         padding-top: var(--spacing-large); /* Less padding on mobile */
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 15px; /* Slightly smaller base font on mobile */
    }
    #hero {
        min-height: 60vh;
    }
    #hero .title { font-size: 2.2rem; }
    #hero .subtitle { font-size: 1.1rem; }
    .section-title { font-size: 1.8rem; }

    /* Stack columns */
    .columns.is-vcentered {
        display: flex;
        flex-direction: column;
    }
    #history .column.is-half {
        width: 100%; /* Full width on mobile */
    }
    #history figure.image {
        margin-bottom: var(--spacing-large);
        max-height: 300px; /* Adjust image height */
    }
     #history .column:last-child {
        padding-left: 0; /* No extra padding on mobile */
    }
    #history .column:last-child .title,
    #history .column:last-child p {
        text-align: center; /* Center text on mobile when stacked */
        margin-left: auto;
        margin-right: auto;
    }

     /* Adjust footer layout */
    .footer .columns {
        text-align: center;
    }
    .footer .column {
        margin-bottom: var(--spacing-xlarge);
    }
    .footer .column:last-child {
        margin-bottom: 0;
    }
    .footer .social-links a {
        margin: 0 var(--spacing-small) var(--spacing-small) var(--spacing-small);
    }

    /* Contact Form labels centered on mobile */
    .contact-form .label {
        text-align: center;
    }

    /* Cookie popup text full width on mobile */
    #cookie-consent-popup p {
        display: block;
        text-align: center;
        margin-right: 0;
        max-width: 100%;
    }
     #cookie-consent-button {
        margin-top: 10px;
    }
}