/*
Theme Name: ALAMADE Divi Child
Theme URI: https://alamade.co.uk
Description: Custom Divi child theme for ALAMADE Furniture Atelier - A European furniture atelier blending heritage craft with architectural discipline
Author: ALAMADE
Author URI: https://alamade.co.uk
Template: Divi
Version: 1.0.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alamade-divi-child
*/

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES & FOUNDATIONS
   ========================================================================== */

:root {
  /* Core Palette from BRAND.md */
  --alama-midnight: #192A3D;
  --alama-white: #FFFFFF;
  --alama-ivory: #F7F8F2;
  --alama-parchment: #F1EEE7;
  --alama-walnut: #030502;
  --alama-brass: #AC915A;

  /* Supporting Colours */
  --alama-brown: #8A5B3E;
  --alama-charcoal: #1A1A1A;
  --alama-grey: #D7D5CD;

  /* Typography Scale - Responsive with clamp() */
  --f-xs: clamp(12px, 0.86vw, 14px);
  --f-sm: clamp(14px, 0.95vw, 16px);
  --f-md: clamp(16px, 1.1vw, 18px);
  --f-lg: clamp(20px, 1.6vw, 28px);
  --f-xl: clamp(28px, 2.2vw, 40px);
  --f-xxl: clamp(40px, 4.2vw, 68px);

  /* Spacing Scale */
  --spacing-xs: clamp(8px, 1vw, 12px);
  --spacing-sm: clamp(16px, 2vw, 24px);
  --spacing-md: clamp(24px, 3vw, 40px);
  --spacing-lg: clamp(40px, 6vw, 80px);
  --spacing-xl: clamp(56px, 8vw, 120px);
}

/* ==========================================================================
   2. GLOBAL DEFAULTS
   ========================================================================== */

body {
  color: var(--alama-walnut);
  background: var(--alama-white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--alama-walnut);
  line-height: 1.2;
  margin: 0 0 24px 0;
}

p {
  margin: 0 0 16px 0;
}

a {
  color: var(--alama-midnight);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--alama-brass);
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   2.5 HEADER CUSTOMIZATION - Transparent Overlay
   ========================================================================== */

/* Transparent header that overlaps hero */
#main-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  z-index: 999 !important;
}

/* Override Divi default header background */
body #main-header,
body.et_fixed_nav #main-header {
  background-color: transparent !important;
}

/* Header becomes solid on scroll */
#main-header.et-fixed-header {
  background: var(--alama-midnight) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Logo styling */
#main-header #logo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alama-white) !important;
}

/* Menu items styling */
#main-header .et_pb_menu__menu nav ul li a {
  color: var(--alama-white) !important;
  font-size: var(--f-sm);
  font-weight: 400;
  letter-spacing: 0.05em;
  padding: 10px 20px !important;
  transition: color 0.3s ease;
}

#main-header .et_pb_menu__menu nav ul li a:hover {
  color: var(--alama-brass) !important;
}

/* Active menu item */
#main-header .et_pb_menu__menu nav ul li.current-menu-item a,
#main-header .et_pb_menu__menu nav ul li.current_page_item a {
  color: var(--alama-brass) !important;
}

/* Mobile menu styling */
#main-header .mobile_menu_bar {
  background: transparent !important;
}

#main-header .mobile_menu_bar:before {
  color: var(--alama-white) !important;
}

/* Ensure hero section starts at top */
.alama-hero {
  margin-top: -140px !important;
  padding-top: 120px !important;
}

/* Divi default navigation styling */
#top-menu li a {
  color: var(--alama-white) !important;
  font-size: var(--f-sm) !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
}

#top-menu li a:hover {
  color: var(--alama-brass) !important;
}

/* Header container */
#main-header .container {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Contact button in header */
#main-header .et_pb_button,
#top-menu .alama-btn-contact a {
  background: transparent !important;
  border: 2px solid var(--alama-white) !important;
  color: var(--alama-white) !important;
  padding: 8px 20px !important;
  border-radius: 25px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: capitalize !important;
  transition: all 0.3s ease !important;
}

#main-header .et_pb_button:hover,
#top-menu .alama-btn-contact a:hover {
  background: var(--alama-white) !important;
  color: var(--alama-midnight) !important;
}

/* Search icon */
#et_search_icon:before {
  color: var(--alama-white) !important;
}

#et_top_search {
  display: none !important;
}

/* Mobile Menu Styling */
.et_mobile_menu {
  background: var(--alama-midnight) !important;
  border-top: 3px solid var(--alama-brass) !important;
  border-color: var(--alama-brass) !important;
  padding: 30px 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin-top: 15px !important;
}

.et_mobile_menu li a {
  color: var(--alama-white) !important;
  padding: 12px 20px !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  transition: all 0.3s ease !important;
  border-bottom: 1px solid rgba(172, 145, 90, 0.2) !important;
}

.et_mobile_menu li a:hover {
  color: var(--alama-brass) !important;
  padding-left: 25px !important;
}

.et_mobile_menu li.current-menu-item a,
.et_mobile_menu li.current_page_item a {
  color: var(--alama-brass) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   3. LAYOUT UTILITIES
   ========================================================================== */

/* Light background - Pure white or Atelier Ivory */
.alama-section-light {
  background: var(--alama-white) !important;
}

.alama-section-light.ivory {
  background: var(--alama-ivory) !important;
}

/* Warm background - Continental Parchment */
.alama-section-warm {
  background: var(--alama-parchment) !important;
}

/* Dark background - Midnight Atelier Blue */
.alama-section-dark {
  background: var(--alama-midnight) !important;
  color: var(--alama-white) !important;
}

.alama-section-dark h1,
.alama-section-dark h2,
.alama-section-dark h3,
.alama-section-dark h4,
.alama-section-dark h5,
.alama-section-dark h6 {
  color: var(--alama-white) !important;
}

.alama-section-dark p {
  color: var(--alama-white) !important;
}

/* ==========================================================================
   4. TYPOGRAPHY CLASSES
   ========================================================================== */

/* Display Serif - Headlines */
.alama-heading-xl h1,
.alama-heading-xl .et_pb_text h1,
.alama-heading-xl .et_pb_text_inner h1 {
  font-size: var(--f-xxl) !important;
  font-weight: 400 !important;
  color: var(--alama-walnut) !important;
  line-height: 1.1 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: -0.02em;
  margin: 0 0 20px 0 !important;
}

.alama-heading-l h2,
.alama-heading-l .et_pb_text h2,
.alama-heading-l .et_pb_text_inner h2 {
  font-size: var(--f-xl) !important;
  font-weight: 400 !important;
  color: var(--alama-walnut) !important;
  line-height: 1.15 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: -0.01em;
  margin: 0 0 16px 0 !important;
}

.alama-heading-m h3,
.alama-heading-m .et_pb_text h3,
.alama-heading-m .et_pb_text_inner h3 {
  font-size: var(--f-lg) !important;
  font-weight: 500 !important;
  color: var(--alama-walnut) !important;
  line-height: 1.3 !important;
  margin: 0 0 12px 0 !important;
}

/* Body & Interface Sans */
.alama-body p,
.alama-body .et_pb_text p,
.alama-body .et_pb_text_inner p {
  font-size: var(--f-md) !important;
  line-height: 1.7 !important;
  color: var(--alama-walnut) !important;
  font-weight: 400 !important;
}

.alama-label,
.alama-label .et_pb_text,
.alama-label .et_pb_text_inner {
  font-size: var(--f-sm) !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500 !important;
  color: var(--alama-white) !important;
}

.alama-subheading,
.alama-subheading .et_pb_text,
.alama-subheading .et_pb_text_inner {
  font-size: var(--f-lg) !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
  color: inherit;
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

/* Base button style - pill shape for all buttons */
.et_pb_button {
  border-radius: 25px !important;
}

/* Remove arrow icon on buttons */
.et_pb_button::after {
  display: none !important;
  content: none !important;
}

/* Primary Button */
.alama-btn-primary .et_pb_button,
.alama-btn-primary .et_pb_button_module_wrapper .et_pb_button,
.et_pb_button.alama-btn-primary,
.et_pb_button_module_wrapper.alama-btn-primary .et_pb_button {
  background: var(--alama-midnight) !important;
  background-color: var(--alama-midnight) !important;
  color: var(--alama-white) !important;
  padding: 10px 24px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border: 2px solid var(--alama-midnight) !important;
  border-color: var(--alama-midnight) !important;
  border-radius: 25px !important;
  transition: all 0.3s ease !important;
  text-transform: capitalize !important;
  letter-spacing: 0.05em !important;
}

.alama-btn-primary .et_pb_button:hover,
.alama-btn-primary .et_pb_button_module_wrapper .et_pb_button:hover,
.et_pb_button.alama-btn-primary:hover,
.et_pb_button_module_wrapper.alama-btn-primary .et_pb_button:hover {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--alama-midnight) !important;
  color: var(--alama-midnight) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Secondary Button */
.alama-btn-secondary .et_pb_button,
.alama-btn-secondary .et_pb_button_module_wrapper .et_pb_button,
.et_pb_button.alama-btn-secondary,
.et_pb_button_module_wrapper.alama-btn-secondary .et_pb_button {
  background: var(--alama-midnight) !important;
  background-color: var(--alama-midnight) !important;
  color: var(--alama-white) !important;
  padding: 10px 24px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border: 2px solid var(--alama-midnight) !important;
  border-color: var(--alama-midnight) !important;
  border-radius: 25px !important;
  transition: all 0.3s ease !important;
  text-transform: capitalize !important;
  letter-spacing: 0.05em !important;
}

.alama-btn-secondary .et_pb_button:hover,
.alama-btn-secondary .et_pb_button_module_wrapper .et_pb_button:hover,
.et_pb_button.alama-btn-secondary:hover,
.et_pb_button_module_wrapper.alama-btn-secondary .et_pb_button:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--alama-midnight) !important;
  border-color: var(--alama-midnight) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Buttons on dark backgrounds - brass border and text */
.alama-section-dark .alama-btn-primary .et_pb_button,
.alama-section-dark .alama-btn-primary .et_pb_button_module_wrapper .et_pb_button,
.alama-section-dark .alama-btn-secondary .et_pb_button,
.alama-section-dark .alama-btn-secondary .et_pb_button_module_wrapper .et_pb_button {
  background: transparent !important;
  color: var(--alama-brass) !important;
  border-color: var(--alama-brass) !important;
}

.alama-section-dark .alama-btn-primary .et_pb_button:hover,
.alama-section-dark .alama-btn-primary .et_pb_button_module_wrapper .et_pb_button:hover,
.alama-section-dark .alama-btn-secondary .et_pb_button:hover,
.alama-section-dark .alama-btn-secondary .et_pb_button_module_wrapper .et_pb_button:hover {
  background: var(--alama-brass) !important;
  color: var(--alama-midnight) !important;
  border-color: var(--alama-brass) !important;
}

/* ==========================================================================
   6. CARDS & PANELS
   ========================================================================== */

.alama-card {
  background: var(--alama-white);
  padding: var(--spacing-lg);
  border-radius: 4px;
  transition: box-shadow 0.3s ease;
}

.alama-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.alama-card-dark {
  background: var(--alama-midnight) !important;
  color: var(--alama-white) !important;
  padding: var(--spacing-lg) !important;
  border-radius: 4px;
}

.alama-card-dark h1,
.alama-card-dark h2,
.alama-card-dark h3,
.alama-card-dark h4,
.alama-card-dark h5,
.alama-card-dark h6,
.alama-card-dark p {
  color: var(--alama-white) !important;
}

.alama-card-outline-brass {
  border: 2px solid var(--alama-brass);
  padding: var(--spacing-lg);
  background: var(--alama-white);
}

/* ==========================================================================
   7. HEADER & FOOTER
   ========================================================================== */

.alama-logo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alama-white);
}

.alama-logo-footer {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alama-white);
  margin-bottom: 16px;
}

.alama-footer-mark {
  font-size: var(--f-xs);
  color: var(--alama-grey);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* Footer Section */
.alama-footer {
  background: var(--alama-midnight) !important;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md) !important;
  color: var(--alama-white);
}

.alama-footer h3 {
  font-size: var(--f-md);
  color: var(--alama-white);
  margin-bottom: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.alama-footer p,
.alama-footer a {
  font-size: var(--f-sm);
  color: var(--alama-grey);
  line-height: 1.8;
}

.alama-footer a {
  display: block;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}

.alama-footer a:hover {
  color: var(--alama-brass);
}

.alama-footer-brand {
  margin-bottom: var(--spacing-sm);
}

.alama-footer-brand p {
  margin-bottom: 24px;
}

.alama-footer-bottom {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(215, 213, 205, 0.2);
  text-align: center;
  font-size: var(--f-xs);
  color: var(--alama-grey);
}

.alama-footer-bottom a {
  display: inline;
  margin: 0 8px;
  color: var(--alama-grey);
}

.alama-footer-social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.alama-footer-social a {
  font-size: var(--f-md);
  color: var(--alama-brass);
  margin-bottom: 0;
}

.alama-footer-social a:hover {
  color: var(--alama-white);
}

/* ==========================================================================
   8. HOMEPAGE SECTIONS
   ========================================================================== */

/* Section 1: Hero */
.alama-hero {
  position: relative;
  min-height: 60vh;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-size: cover !important;
}

.alama-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(25, 42, 61, 0.5);
  z-index: 1;
}

.alama-hero .et_pb_row {
  position: relative;
  z-index: 2;
  text-align: center;
}

.alama-hero h1,
.alama-hero h2,
.alama-hero p {
  color: var(--alama-white) !important;
}

/* Ensure hero headings are white with higher specificity */
.alama-hero .alama-heading-xl h1,
.alama-hero .alama-heading-xl .et_pb_text h1,
.alama-hero .alama-heading-xl .et_pb_text_inner h1 {
  color: var(--alama-white) !important;
}

/* Hero buttons with brass border and text on dark background */
.alama-hero .et_pb_button,
.alama-hero .alama-btn-primary .et_pb_button,
.alama-hero .alama-btn-primary .et_pb_button_module_wrapper .et_pb_button,
.alama-hero .alama-btn-secondary .et_pb_button,
.alama-hero .alama-btn-secondary .et_pb_button_module_wrapper .et_pb_button {
  background: transparent !important;
  color: var(--alama-brass) !important;
  border: 2px solid var(--alama-brass) !important;
  border-radius: 25px !important;
}

.alama-hero .et_pb_button:hover,
.alama-hero .alama-btn-primary .et_pb_button:hover,
.alama-hero .alama-btn-secondary .et_pb_button:hover {
  background: var(--alama-brass) !important;
  color: var(--alama-midnight) !important;
  border-color: var(--alama-brass) !important;
}

/* Hero buttons inline on desktop */
@media (min-width: 768px) {
  .alama-hero .et_pb_button_module_wrapper {
    display: inline-block !important;
    margin: 10px !important;
  }
}

/* Section 2: Section Label Bar */
.alama-section-label-bar {
  background: var(--alama-midnight) !important;
  padding: var(--spacing-sm) 0 !important;
  min-height: auto !important;
}

.alama-section-label-bar .et_pb_row {
  text-align: center;
}

/* Section 3: Journey */
.alama-journey {
  background: var(--alama-ivory) !important;
  padding: var(--spacing-xl) var(--spacing-sm) !important;
}

.alama-journey-image img {
  border-radius: 4px;
  width: 100%;
  height: auto;
}

.alama-journey-hero-piece img {
  border-radius: 4px;
  margin-top: var(--spacing-md);
}

.alama-process-strip {
  margin-top: var(--spacing-lg);
}

.alama-process-item {
  text-align: center;
  padding: var(--spacing-sm);
}

.alama-process-item img {
  border-radius: 4px;
  width: 100%;
  height: auto;
  margin-bottom: var(--spacing-sm);
}

/* Section 4: Landscape Atelier */
.alama-landscape-atelier {
  position: relative;
  min-height: 60vh;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Buttons in landscape atelier section on one line for desktop */
@media (min-width: 768px) {
  .alama-landscape-atelier .et_pb_button_module_wrapper {
    display: inline-block !important;
    margin: 10px !important;
  }
}

.alama-landscape-atelier::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(25, 42, 61, 0.4);
  z-index: 1;
}

.alama-landscape-atelier .et_pb_row {
  position: relative;
  z-index: 2;
  text-align: center;
}

.alama-landscape-atelier h1,
.alama-landscape-atelier h2,
.alama-landscape-atelier h3,
.alama-landscape-atelier p {
  color: var(--alama-white) !important;
}

/* Extra specificity for heading classes within landscape atelier */
.alama-landscape-atelier .alama-heading-l h2,
.alama-landscape-atelier .alama-heading-l .et_pb_text h2,
.alama-landscape-atelier .alama-heading-l .et_pb_text_inner h2,
.alama-landscape-atelier .et_pb_text_inner h2,
.alama-landscape-atelier .et_pb_text_inner p {
  color: var(--alama-white) !important;
}

/* Brass buttons for landscape atelier section (dark background) */
.alama-landscape-atelier .et_pb_button,
.alama-landscape-atelier .alama-btn-primary .et_pb_button,
.alama-landscape-atelier .alama-btn-primary .et_pb_button_module_wrapper .et_pb_button,
.alama-landscape-atelier .alama-btn-secondary .et_pb_button,
.alama-landscape-atelier .alama-btn-secondary .et_pb_button_module_wrapper .et_pb_button {
  background: transparent !important;
  color: var(--alama-brass) !important;
  border: 2px solid var(--alama-brass) !important;
  border-radius: 25px !important;
}

.alama-landscape-atelier .et_pb_button:hover,
.alama-landscape-atelier .alama-btn-primary .et_pb_button:hover,
.alama-landscape-atelier .alama-btn-secondary .et_pb_button:hover {
  background: var(--alama-brass) !important;
  color: var(--alama-midnight) !important;
  border-color: var(--alama-brass) !important;
}

.alama-landscape-wordmark {
  font-size: clamp(48px, 6vw, 96px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.15em;
  margin-bottom: var(--spacing-sm) !important;
}

/* Section 5: Commission Teaser */
.alama-commission-teaser {
  background: var(--alama-parchment) !important;
  padding: var(--spacing-xl) var(--spacing-sm) !important;
}

.alama-commission-teaser img {
  border-radius: 4px;
  width: 100%;
  height: auto;
}

/* Section 6: Collection */
.alama-collection {
  background: var(--alama-white) !important;
  padding: var(--spacing-xl) var(--spacing-sm) !important;
}

.alama-collection-item {
  margin-bottom: var(--spacing-md);
}

.alama-collection-item img {
  border-radius: 4px;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.alama-collection-item img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Section 7: Sustainability Banner */
.alama-sustainability-banner {
  position: relative;
  min-height: 50vh;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-size: cover !important;
  background-position: center !important;
}

.alama-sustainability-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(25, 42, 61, 0.6), rgba(25, 42, 61, 0.3));
  z-index: 1;
}

.alama-sustainability-banner .et_pb_row {
  position: relative;
  z-index: 2;
  text-align: center;
}

.alama-sustainability-banner h1,
.alama-sustainability-banner h2,
.alama-sustainability-banner h3,
.alama-sustainability-banner p,
.alama-sustainability-banner .et_pb_text h2,
.alama-sustainability-banner .et_pb_text p {
  color: var(--alama-white) !important;
}

/* Brass buttons for sustainability banner section (dark background) */
.alama-sustainability-banner .et_pb_button,
.alama-sustainability-banner .alama-btn-primary .et_pb_button,
.alama-sustainability-banner .alama-btn-primary .et_pb_button_module_wrapper .et_pb_button,
.alama-sustainability-banner .alama-btn-secondary .et_pb_button,
.alama-sustainability-banner .alama-btn-secondary .et_pb_button_module_wrapper .et_pb_button {
  background: transparent !important;
  color: var(--alama-brass) !important;
  border: 2px solid var(--alama-brass) !important;
  border-radius: 25px !important;
}

.alama-sustainability-banner .et_pb_button:hover,
.alama-sustainability-banner .alama-btn-primary .et_pb_button:hover,
.alama-sustainability-banner .alama-btn-secondary .et_pb_button:hover {
  background: var(--alama-brass) !important;
  color: var(--alama-midnight) !important;
  border-color: var(--alama-brass) !important;
}

/* Section 8: Project Stories */
.alama-project-stories {
  background: var(--alama-parchment) !important;
  padding: var(--spacing-xl) var(--spacing-sm) !important;
}

.alama-slider-arrow {
  cursor: pointer;
  color: var(--alama-brass);
  font-size: var(--f-lg);
  transition: color 0.2s ease;
}

.alama-slider-arrow:hover {
  color: var(--alama-midnight);
}

.alama-material-swatch {
  text-align: center;
  padding: var(--spacing-sm);
}

.alama-material-swatch img {
  border-radius: 4px;
  width: 100%;
  height: auto;
  border: 2px solid var(--alama-grey);
}

/* Section 9: Featured */
.alama-featured {
  background: var(--alama-ivory) !important;
  padding: var(--spacing-xl) var(--spacing-sm) !important;
}

.alama-featured-image {
  margin-bottom: var(--spacing-md);
}

.alama-featured-image img {
  border-radius: 4px;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.alama-featured-image img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 980px) {
  .alama-hero {
    min-height: 70vh;
  }

  .alama-landscape-atelier {
    min-height: 50vh;
  }

  .alama-sustainability-banner {
    min-height: 40vh;
  }

  .alama-card,
  .alama-card-dark,
  .alama-card-outline-brass {
    padding: var(--spacing-md) !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .alama-hero {
    min-height: 60vh;
  }

  .alama-landscape-atelier {
    min-height: 40vh;
  }

  .alama-sustainability-banner {
    min-height: 35vh;
  }

  .alama-btn-primary .et_pb_button,
  .alama-btn-secondary .et_pb_button {
    width: 100%;
    padding: 10px 20px !important;
  }

  .alama-card,
  .alama-card-dark,
  .alama-card-outline-brass {
    padding: var(--spacing-sm) !important;
  }

  .alama-heading-xl h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
  }

  .alama-heading-l h2 {
    font-size: clamp(24px, 6vw, 32px) !important;
  }

  .alama-process-item img {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  /* Center logo vertically on mobile */
  .et_header_style_left .logo_container {
    height: 80% !important;
  }

  #main-header .logo_container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #main-header .logo_container span.logo_helper {
    display: none !important;
  }

}

/* ==========================================================================
   10. UTILITY & HELPER CLASSES
   ========================================================================== */

.text-center {
  text-align: center !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mt-lg {
  margin-top: var(--spacing-lg) !important;
}

.mb-lg {
  margin-bottom: var(--spacing-lg) !important;
}

/* Image aspect ratio helpers */
.alama-img-square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.alama-img-landscape img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.alama-img-portrait img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}