/* ==========================================================================
   Annotated Version of style.css
   This file includes detailed comments to explain the purpose and structure 
   of each CSS rule, selector group, and design decision.
   --------------------------------------------------------------------------
   DO NOT EDIT THIS FILE DIRECTLY IN PRODUCTION WITHOUT TESTING
   ==========================================================================
*/

/* =============================================================
   COLOR PALETTE & BASE RESETS
   ============================================================= */


   /* =============================================================
  Defines CSS custom properties (variables) for your main color palette — scoped globally via :root.
   ============================================================= */
:root {
  --blue: #002868; /* Old Glory Blue */
  --red:  #BF0A30; /* Old Glory Red */
}

/* =============================================================
   A global reset for all list structures used in your navigation system:
   ============================================================= */
ul,
ul li,
ul li::marker,
.menu,
.menu li,
.menu li::marker,
.submenu,
.submenu li,
.submenu li::marker {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =============================================================
   Loads your custom Freehand font, used specifically for stylized quotes and visual branding.
   ============================================================= */
@font-face {
  font-family: 'Freehand';
  src: url('/assets/fonts/freehand-v32-latin-regular.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

/* =============================================================
   BODY & TYPOGRAPHY
   ============================================================= */
/* General body styling */
body {
  font-family: system-ui, Arial, Helvetica, sans-serif;
  margin: 0;
  background: #fff;
}

/* Constrain the header area only */
.site-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 0.5rem; /* optional: side padding for small screens */
}

/* Header layout inside the container */
.header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: relative;
  justify-content: flex-end;
  padding-bottom: 1rem;
}

/* =============================================================
   LOGO STYLING
   Centers the logo in the header and sets its maximum width.
   Constrains the logo to a maximum width of 150px, preventing overflow or scaling issues.
   ============================================================= */
.logo img {
  max-width: 150px;
  height: auto;
}

/* =============================================================
   QUOTE STYLING
   Formats the multi-line quote in the header.
   ============================================================= */
.quote-block {
  display: flex;
  flex-direction: column;
  font-family: 'Freehand', cursive, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}

/* =============================================================
   Quote lines
   Styles the first line of the quote with a larger font size and a different color.
   Applies consistent color and alignment to the two top-left lines of the quote.
   ============================================================= */
.quote-left-top,
.quote-left-bottom {
  color: var(--blue);
  text-align: left;
}

/* =============================================================
   Quote left top line
   Styles the first line of the quote with a larger font size and a different color.
   ============================================================= */
.quote-left-top {
  margin-left: 1rem;
}
/* =============================================================
   Quote left bottom line
   Styles the second line of the quote with a smaller font size and a different color.
   Visually separates the third line of the quote using a strong left indentation.
   text-indent: 14rem is a strong value — perfectly fine if it aligns with your design goal.
But if you later switch to a grid or responsive layout, this may need to adapt (e.g., via margin-left, padding-left, or a media query).
   ============================================================= */
.quote-right {
  text-indent: 14rem;
  color: var(--red);
  font-weight: 400;
}

/* =============================================================
   MAIN MENU DESKTOP STYLES
   Applies base reset styles to the nav wrapper of your main site menu.
   ============================================================= */
.main-menu {
  /* Ensures nav is stripped of browser spacing and ready for layout control */
  display: block;
  margin: 0;
  padding: 0;

}

/* =============================================================
   MENU STYLES
   Defines the main menu layout, centering it and applying flexbox for horizontal alignment.
   Creates a horizontal flex layout for the root navigation menu.
   ============================================================= */
.menu {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* =============================================================
   MENU ITEM STYLES
   Applies consistent styles to each menu item, including font, color, and hover effects.
   Applies consistent typographic styling to all top-level menu links.
   ============================================================= */
.menu li a {
  font-family: system-ui, Arial, sans-serif;
  text-decoration: none;
  color: var(--blue);
  transition: color 0.5s ease, text-decoration 0.5s ease;
}

/* =============================================================
   MENU ITEM HOVER & FOCUS STYLES
   Adds hover and focus effects to menu items for better interactivity.
   Changes text color and adds underline on hover/focus for better visibility.
   ============================================================= */
.menu li a:hover,
.menu li a:focus {
  color: var(--red);
  text-decoration: underline;
}

/* =============================================================
   SUBMENU STYLES
   Establishes a positioning context for the child .submenu dropdown.
   ============================================================= */
.has-submenu {
  position: relative;
}

/* =============================================================
   Submenu styles
   Hides the submenu by default, but displays it on hover of the parent menu item.
   Positions the submenu below the parent item and centers it.
   Styles the dropdown submenu that appears on hover under a .has-submenu item.
   ============================================================= */
.submenu {
  display: none;
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--blue);
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  padding: 0.25rem 0;
  white-space: nowrap;
  z-index: 1000;
}
/* =============================================================
   Submenu item styles
   Applies consistent styles to submenu items, including padding and hover effects.
   Reveals the .submenu when the user hovers over a .has-submenu parent.
   ============================================================= */
.has-submenu:hover .submenu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* =============================================================
   Submenu item link styles
   Applies consistent styles to submenu links, including padding, color, and hover effects.
   Provides block-level clickable areas inside the submenu.
   ============================================================= */
.submenu li a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--blue);
  background: #fff;
  transition: all 0.2s ease;
}

/* =============================================================
   Submenu item hover styles
   Changes the background and text color of submenu items on hover.
   Provides visual feedback when hovering over submenu items.
   Enhances hover feedback for submenu items.
   ============================================================= */
.submenu li a:hover {
  color: var(--red);
  background: #f5f5f5;
}

/* =============================================================
   ARROW INDICATOR
   Adds a right-pointing arrow to indicate submenus.
   Rotate the arrow when hovering over parent
   Styles the arrow icon (▶) that appears next to root menu items with submenus.
   ============================================================= */
.arrow {
  display: inline-block;
  margin-left: 0rem;
  transition: transform 0.3s ease;
  font-size: 0.8rem;
}

/* =============================================================
   ARROW INDICATOR
   Adds a right-pointing arrow to indicate submenus.
   Rotate the arrow when hovering over parent
   Styles the arrow icon (▶) that appears next to root menu items with submenus.
   Rotates the arrow icon from right-facing (▶) to down-facing (▼) when hovering
   ============================================================= */
.has-submenu:hover .arrow {
  transform: rotate(90deg); /* ▶ becomes ▼ */
}

/* =============================================================
   HIGHLIGHT ROOT MENU ITEM ON HOVER
   Changes the color and adds underline to root menu items with submenus on hover.
   Provides visual feedback for root menu items that have submenus.
   Highlight root menu item on hover if it has submenu
   Enhances the root menu item styling when its submenu is revealed.
   ============================================================= */
.has-submenu:hover > a {
  color: var(--red);
  text-decoration: underline;
}

/* =============================================================
   Sets the close (“✕”) icon color to red when the hamburger is in the .open state.
   ============================================================= */
.hamburger.open .close-icon {
  color: var(--red);
}


/* =============================================================
   Styles the breadcrumb area beneath the main header.
   ============================================================= */
.header-bottom {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.875rem;
  color: #000000;
  padding: 0;
}

/* =============================================================
   Styles the breadcrumb area beneath the main header.
   Styles the breadcrumb navigation list:
display: flex enables a horizontal layout.
flex-wrap: wrap ensures it remains responsive if space runs out.
gap: 0.5rem separates list items clearly.
Removes default list styling (bullets, spacing).
   ============================================================= */
.breadcrumb {
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  list-style: none;
  padding: 0.5rem 0; /* vertical only */
  margin: 0;
  align-items: center;
  text-align: left;
}

/* =============================================================
   Styles each breadcrumb item:
   Uses flexbox to align items horizontally.
   Adds a separator (slash) between items.
   Last item has no separator.
   Adds a separator slash (/) after each breadcrumb item.
   ============================================================= */
.breadcrumb li::after {
  font-family: Arial, Helvetica, sans-serif;
  content: "/";
  margin: 0rem;
  color: (--blue);
}

/* =============================================================
   Removes the / separator after the last breadcrumb item, preserving correct visual punctuation.
   ============================================================= */
.breadcrumb li:last-child::after {
  content: ""; /* no slash after last */
}

/* =============================================================
   Styles the breadcrumb links:
   Uses system font stack for consistency.
   Removes default text decoration (underline).
   Sets link color to blue.
   Adds hover effect to change color and underline.
   Styles the clickable links within your breadcrumb navigation
   ============================================================= */
.breadcrumb a {
  font-family: system-ui, Arial, sans-serif;
  text-decoration: none;
  color: var(--blue);
  font-weight: 500;
  margin-right: 0.2rem;
}

/* =============================================================
   Adds hover effect to breadcrumb links:
   Changes text color to red and underlines the link on hover.
   Provides visual feedback when hovering over breadcrumb links.
   Defines the hover state for breadcrumb links.
   ============================================================= */
.breadcrumb a:hover {
  text-decoration: underline;
  color: var(--red);
}

  /* ========================================
   GREEN THEME FOR SUSTAINABILITY SECTION
   Applies a green color override to the root-level link that targets any URL containing /sustainability.
   ======================================== */
.main-menu li a[href*="/sustainability"] {
  color: #1b5e20; /* dark green */
}

/* =============================================================
Hover effect for root 
Ensures the item:
Turns a lighter shade of green (#43a047) to signify interaction.
Adds an underline for visibility and accessibility.
   ============================================================= */
.main-menu li a[href*="/sustainability"]:hover,
.main-menu li a[href*="/sustainability"]:focus {
  color: #43a047; /* lighter green on hover */
  text-decoration: underline;
  background-color: #e8f5e9; /* very light green background */
}

  /* ========================================
  Submenu item text
Targets submenu links that point to /sustainability and applies your dark green color.
Maintains thematic visual consistency for all levels of navigation related to sustainability.
   ======================================== */
/* Submenu item text */
.submenu li a[href*="/sustainability"] {
  color: #1b5e20;
  background-color: #e8f5e9; /* very light green background */
}

  /* ========================================
  Submenu hover effect
Customizes the hover state for submenu links related to /sustainability.
Applies a soft green background and a deeper green text color for a clear, thematic interaction.
   ======================================== */
.submenu li a[href*="/sustainability"]:hover {
background-color: #e8f5e9; /* very light green background */
  color: #2e7d32;
}

  /* ========================================
  Add a subtle green background ONLY to the submenu box
Applies a special background and border to the dropdown submenu when the root link targets /sustainability.
This makes the entire submenu box visually themed to match the sustainability section — not just the links inside.
   ======================================== */
.has-submenu > a[href*="/sustainability"] + .submenu {
background-color: #e8f5e9; /* very light green background */
  border: 1px solid #1b5e20; /* light green border */
}

  /* ========================================
Refines the hover state for sustainability submenu links.
Applies a slightly lighter background (#e3f2e1) than the previous hover green (#e8f5e9), maintaining a nuanced design shift.
   ======================================== */
/* Optional: soften submenu item hover */
.submenu li a[href*="/sustainability"]:hover {
  background-color: #e3f2e1; /* even lighter on hover */
  color: #2e7d32;
}
/* =============================================================
   HERO SECTION STYLES
   ============================================================= */

/* === HERO SECTION (clean layout) === */
/* Global heading control */

body,
h1, h2, h3, h4, h5, h6, p {
  font-family: system-ui, sans-serif;
  color: var(--blue);
}

h1 {
  font-size: 2.2rem;
  line-height: 1.3;
  font-weight: 700;
  color: #003366;
}

/* Optional: consistent inside sections/articles too */
section h1,
article h1
nav h1,
aside h1 {
  font-size: 2.2rem;
}

.hero-line {
  border-top: 1px solid var(--red);
}

.hero {
    margin-top: 1px;
  padding: 4rem 2rem;
  background-color: #fafafa;
  border-bottom: 2px solid #ccc;
  text-align: center;
  border-top: 1px solid var(--blue);
  /*border-top: 1px solid var(--red);*/
}

.hero-container {
  max-width: 960px;
  margin: 0 auto;
}

.hero-image {
  margin-bottom: 2rem;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.hero h1 {
  font-size: 2.6rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: #003366;
}

.hero p {
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  
}

.hero-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* === SUB-HERO SECTION === */
.sub-hero {
  background-color: #f5f5f5;
  padding: 2.5rem 1.5rem;
  border-bottom: 1px solid #ccd6dd;
  text-align: center;
  font-weight: 400;
}

.sub-hero-container {
  max-width: 900px;
  margin: 0 auto;
}

.sub-hero p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--blue)
}

/* === CONCEPTS GRID SECTION === */
.concepts-preview {
  padding: 2rem 2rem;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.concepts-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.concepts-container h2 {
  font-size: 2rem;
  margin-top: 1px;
  margin-bottom: 3rem;
  color: #003366;
}

.concepts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.concept-card {
  background-color: #fff;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid #003366; /* Old Glory Blue */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.concept-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 10px rgba(0, 51, 102, 0.15); /* slight blue glow */
}

.concept-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 1rem;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}

.concept-card h3 {
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
}

.concept-card p {
  font-size: 0.95rem;
  line-height: 1.4;
}

.concept-summary {
  font-weight: 600;
  font-style: italic;
}

/* Red Button CTA — consistent site-wide */
.concept-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  color: #fff;
  background-color: #B31942; /* Old Glory Red */
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease;
}

.concept-button:hover {
  background-color: transparent;
  color: #B31942;
  border: 1px solid #B31942;
}

/* === R&D SECTION CONTAINER (centered & clean) === */
/* Applies only to the top full-width project tile */
.project-tile.full {
  text-align: center;
  padding: 2.5rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #003366; /* Old Glory Blue border */
  max-width: 960px;
  margin: 2rem auto;
}

.project-tile.full h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.project-tile.full p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.project-tile h4 {
  font-size: 1.3rem;
  color: #003366;
  margin-bottom: 0.8rem;
}

.project-row.double {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.project-tile.half {
  flex: 1 1 calc(50% - 1rem);
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  text-align: left;
  border: 1px solid #003366;
}

.rnd-section {
  background-color: #f9f9f9;
  padding: 4rem 2rem;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.rnd-container {
  max-width: 1200px;
  margin: 0 auto;
}

.rnd-container h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
  color: #003366;
}

/* === PROJECT TILE LAYOUT (safe, scoped) === */
.rnd-section .project-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.rnd-section .project-tile.full {
  flex: 1 1 100%;
  max-width: 960px;
}

.rnd-section .project-tile.half {
  flex: 1 1 calc(50% - 1rem);
  max-width: 580px;
}

.rnd-section .project-tile {
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
  text-align: center;
  min-height: 150px;
}

/* === PROJECTS GRID === */
.projects-preview {
  background-color: #fff;
  padding: 4rem 2rem;
  border-bottom: 1px solid #ddd;
}

.projects-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.philosophy-container {
  max-width: 900px;
  margin: 0 auto;
}

.philosophy-quote {
  font-family: system-ui, sans-serif;
  font-size: 1.8rem;
  color: #003366;
  margin: 0 auto 1rem;
  line-height: 1.6;
  text-align: center;
}

.philosophy-signature {
  font-size: 1rem;
  margin-bottom: 2rem;
  font-style: italic;
  text-align: center;
}

/* Reuse CTA styles */
.section-cta {
  margin-top: 3rem;
  text-align: center;
  padding-bottom: 4rem;
}

.section-button {
  background-color: #B31942; /* Old Glory Red */
  color: #fff;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease;
}

.section-button:hover {
  background-color: transparent;
  color: #B31942;
  border: 1px solid #B31942;
}

.projects-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.projects-container h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #003366;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.project-card {
  background-color: #fff;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid #003366; /* Old Glory Blue */
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: middle;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 12px rgba(0, 51, 102, 0.1); /* Blue glow */
}

.project-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 1rem;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}

.project-card h3 {
  font-size: 1.2rem;
  color: #003366;
  margin-bottom: 0.8rem;
}

.project-card p {
  font-size: 0.95rem;
  color: #003366;
}

.project-summary {
  font-weight: 600;
  font-style: italic;
  margin-top: 0.8rem;
}

.project-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  color: #fff;
  background-color: #B31942; /* Old Glory Red */
  text-decoration: none;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease;
}

.project-button:hover {
  background-color: transparent;
  color: #B31942;
  border: 1px solid #B31942;
}

.forgotten-project {
  padding: 4rem 2rem;
  background-color: #f8f9fa;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.forgotten-flex {
  display: flex;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  flex-wrap: wrap;
}

.forgotten-image {
  flex: 1 1 40%;
  min-width: 300px;
}

.forgotten-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

.forgotten-content {
  flex: 1 1 55%;
  text-align: left;
}

.forgotten-content h2 {
  font-size: 1.8rem;
  color: #003366;
  margin-bottom: 1rem;
}

.forgotten-content p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.forgotten-content .project-summary {
  font-weight: 600;
  font-style: italic;
  margin-bottom: 1.2rem;
}

.forgotten-content .project-button {
  background-color: #B31942;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.forgotten-content .project-button:hover {
  background-color: transparent;
  color: #B31942;
  border: 1px solid #B31942;
}

.final-thanks {
  padding: 4rem 2rem;
  background-color: #ffffff;
  text-align: center;
  border-top: 2px solid #003366;
}

.thanks-container {
  max-width: 900px;
  margin: 0 auto;
}

.final-thanks h2 {
  font-size: 1.8rem;
  color: #003366;
  margin-bottom: 1rem;
}

.final-thanks p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.final-thanks .project-button {
  background-color: #B31942;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.final-thanks .project-button:hover {
  background-color: transparent;
  color: #B31942;
  border: 1px solid #B31942;
}

.mobile-quote-only {
  display: none;
  text-align: left;
  background-color: #fff;
  color: #003366;
  font-family: 'Freehand', cursive;
  font-size: 1.1rem;
  padding: 1.2rem 1rem 0;
  border-bottom: 1px solid #ccc;
}

.mobile-quote-only .sub-line {
  font-family: 'Freehand', cursive;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  color: #B31942;
  display: block;
  text-align: right;
}

.site-footer {
  background-color: #003366; /* Old Glory Blue */
  color: #ffffff;
  font-family: system-ui, sans-serif;
  padding: 3rem 2rem 2rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.footer-column {
  flex: 1 1 200px;
}

.footer-column.center {
  text-align: center;
}

.footer-column h2, h4 {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 0.5rem;
}

.footer-column a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.footer-column a:hover {
  color: #B31942; /* Old Glory Red */
}

.footer-motto {
  margin-top: 1rem;
  font-style: italic;
  font-size: 0.95rem;
  color: #ffffff;
}

.footer-bottom p  {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.8rem;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-column {
    flex: 1 1 100%;
  }
}

/* Main wrapper for the privacy policy */
.privacy-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  font-family: system-ui, sans-serif;
  color: #003366;
  background-color: #ffffff;
  line-height: 1.6;
  font-size: 1rem;
}

/* Headings */
.privacy-content h2 {
  font-size: 1.5rem;
  color: #003366;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
}

/* Paragraphs */
.privacy-content p {
  margin-bottom: 1rem;
  font-weight: 400;
}

/* Lists */
.privacy-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.privacy-content li {
  margin-bottom: 0.5rem;
}

/* Strong emphasis */
.privacy-content strong {
  font-weight: 600;
}

/* Conclusion styling */
.privacy-content .conclusion {
  border-top: 2px solid #B31942;
  margin-top: 3rem;
  padding-top: 2rem;
}

.privacy-content .conclusion h2 {
  color: #B31942;
}

.privacy-content .conclusion p:last-child {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1rem;
}

.terms-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  font-family: system-ui, sans-serif;
  color: #003366;
  background-color: #ffffff;
  line-height: 1.6;
  font-size: 1rem;
}

.terms-content h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.terms-content h2 {
  font-size: 1.5rem;
  color: #003366;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
}

.terms-content p {
  margin-bottom: 1rem;
  font-weight: 400;
}

.terms-content strong {
  font-weight: 600;
}

.terms-content .conclusion {
  border-top: 2px solid #B31942;
  margin-top: 3rem;
  padding-top: 2rem;
}

.terms-content .conclusion h2 {
  color: #B31942;
}

.terms-content .conclusion p:last-child {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1rem;
}

.never-seen {
  background-color: #ffffff;
  color: #003366;
  font-family: system-ui, sans-serif;
  text-align: center;
  padding: 4rem 2rem;
}

.never-seen-content {
  max-width: 800px;
  margin: 0 auto;
}

.never-seen h1 {
  font-size: 3rem;
  color: #B31942;
  margin-bottom: 0.5rem;
}

.never-seen p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.button-group {
  margin: 2rem 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.button-primary,
.button-secondary {
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.button-primary {
  background-color: #B31942;
  color: #fff;
  border: 1px solid #B31942;
}

.button-primary:hover {
  background-color: transparent;
  color: #B31942;
}

.button-secondary {
  background-color: #003366;
  color: #fff;
  border: 1px solid #003366;
}

.button-secondary:hover {
  background-color: transparent;
  color: #003366;
}

.ai-credit {
  font-size: 0.85rem;
  margin-top: 1rem;
  color: #666;
}

.ai-credit a {
  color: #003366;
  text-decoration: underline;
}

.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.error-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
  text-align: center;
}

.error-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

@media (min-width: 769px) {
  .hamburger {
    display: none;
  }
}

/* === Responsive Image Row (Desktop: side-by-side, Mobile: stacked) === */
.philosophy-image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: center;
}

.philosophy-image-row img {
  flex: 1 1 45%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* === Bring to Life Section === */
.bring-to-life {
  background-color: #f9f9f9;
  padding: 3rem 1rem;
  border-top: 1px solid var(--blue);
  border-bottom: 1px solid var(--blue);
  text-align: center;
}

.bring-to-life h2 {
  font-size: 1.8rem;
  margin: 0 auto 1rem;
  max-width: 1200px;
  padding-bottom: 2rem;
}

.bring-to-life p {
  margin: 0 auto 1.5rem;
  max-width: 1200px;
}

.needs-list {
  list-style-position: inside;
  text-align: center;
  padding: 0;
  margin: 0 auto 2rem;
  max-width: 1200px;
}

.needs-list li {
  margin: 0.5rem 0;
}

.section-message {
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.message-lead {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 0.5rem;
}

.message-sub {
  font-size: 1rem;
  font-style: italic;
  color: var(--blue);
}

.section-cta {
  margin-top: 4rem;
}
/* === Bring to Life Section === */
.translate-section {
  position: absolute;
  display: flex;
  justify-content: center; /* center the flags inside */
  align-items: center;
  right: 0;
  width: fit-content; /* <— this keeps it only as wide as the content */
 margin: 0;
}

  .flag-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 0rem;
    gap: 1.5rem;
  }

  .flag-buttons a {
    display: inline-block;
    transition: transform 0.2s ease;
  }

  .flag-buttons img {
    height: auto;
  }

  .flag-buttons a:hover img {
    transform: scale(1.1);
  }

.top-left-mobile  {
  display: none;
}

/* =============================================================
   MOBILE OVERRIDES
   Responsive adjustments for smaller screens
   ============================================================= */
@media (max-width: 768px) {
.header-top {
  margin-bottom: 1rem;
  padding-bottom: 0;
}

  .quote-block {
    display: none;
  }
  .translate-section {
  position: absolute;
  top: 7.5rem;
  }
  /* =============================================================
   HAMBURGER BUTTON (MOBILE)
   Defines styling for the hamburger toggle button, used only on smaller screens
   ============================================================= */
.hamburger {
  color: var(--blue);
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  cursor: pointer;
  font-size: 2.5rem;
  border: 1px solid var(--blue);
  padding: 0rem 0.35rem;
  border-radius: 5px;
  background: #fff;
  z-index: 10;
}

/* =============================================================
   HAMBURGER ICON
   Defines the hamburger icon and close icon styles.
   Uses a simple X for the close icon.
   Provides a visual indicator that the hamburger is in an "active/open" state.
   When hamburger is open (JS toggles this class)
   ============================================================= */
.hamburger.open {
  border-color: var(--red);
}

/* === Mobile Quote Block Styles === */
.top-left-mobile {
  display: block;
  padding: 0;
  margin: 0 auto;
  max-width: 480px;
  font-family: 'Freehand';
  gap: 1rem;
}

.quote-block-mobile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: left;
  font-style: italic;
  padding-top: 3rem;
  border-bottom: 1px solid var(--blue);
  padding-bottom: 2rem;
}

.quote-left-top {
  font-weight: 400;
}

.quote-left-bottom {
  font-weight: 400;
  margin-left: 0.5rem;
  
}

.quote-right {
  align-self: flex-end; /* aligns to the right */
  white-space: nowrap;
  padding-top: 1rem;
  padding-right: 1rem;
  margin-top: 0.5rem;
  font-weight: 600;
  font-style: normal;
  text-align: right;
  color: var(--red);
}

  /* HAMBURGER DISPLAY */
  .hamburger {
    display: inline-block;
  }

  .hamburger .close-icon {
    display: none;
  }

  .menu-toggle:checked + .main-menu + .hamburger .close-icon {
    display: inline;
  }

  /* MENU LAYOUT */
  .main-menu {
    position: relative;
    display: block;
    padding: 0;
    text-align: left;
    
  }

  .menu {
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
    margin: 0;
    border: 1px solid var(--blue);
    border-radius: 8px;
    background-color: #fff;
    width: fit-content;
    max-width: 320px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: left;
    font-size: 2rem;
  }

  .menu-toggle:checked ~ .main-menu .menu {
    display: flex;
  }

  .menu li a {
    font-family: system-ui, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    transition: background 0.3s ease, color 0.3s ease;
  }

  .menu li a:hover,
  .menu li a:focus {
    background-color: #ffffff;
    color: var(--red);
  }

  /* SUBMENU LOGIC */
  .submenu {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    margin: 0 8rem;
    border: 1px solid var(--blue);
    border-radius: 8px;
    background-color: #fff;
    width: fit-content;
    max-width: 95vw;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: left;
    font-size: 2rem;
  }

  .submenu.active {
    display: flex;
    flex-direction: column;
  }

  /* HERO IMAGE ADJUSTMENTS */
.hero {
  padding-left: 5px;
  padding-right: 5px;
}

  .hero-image {
    width: 100%;
    overflow: hidden;
  }

  .hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
  }


.concepts-preview {
  padding-right: 5px;
  padding-left: 5px;
}

/* === PROJECTS GRID === */
.projects-preview {
  padding-right: 5px;
  padding-left: 5px;
}

  /* PROJECT GRID & R&D RESPONSIVENESS */
 .rnd-section{
    padding-left: 5px;
    padding-right: 5px;

  }

  .project-row.double {
    flex-direction: column;
  }

  .project-tile.half {
    width: auto;
    flex: 1 1 100%;
  }

/* === PHILOSOPHY SECTION === */
.philosophy-quote {
  padding-left: 2rem;
  padding-right: 2rem;
  font-family: system-ui, sans-serif;
  font-size: 1.8rem;
  color: #003366;
  margin: 0 auto 1rem;
  line-height: 1.6;
  text-align: center;
}

.philosophy-signature {
  font-size: 1rem;
  margin-bottom: 2rem;
  font-style: italic;
  text-align: center;
}

  .forgotten-flex {
    flex-direction: column;
  }

  .forgotten-content {
    text-align: center;
  }

/* Stack on smaller screens */

  .philosophy-image-row {
    flex-direction: column;
    align-items: center;
  }

  .philosophy-image-row img {
    flex: none;
    width: 100%;
  }
}