/* =========================================
   1. GLOBAL VARIABLES & RESET
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;600&display=swap');

   :root {
       --old-gold: #CFB53B;
   }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   img { max-width: 100%; }
   
   body {
       font-family: 'Open Sans', sans-serif;
       background-color: black;
       overflow-x: hidden;
       overflow-y: auto; 
   }
   
   body.menu-open {
       overflow: hidden;
   }

   body.menu-open .floating-btn {
       opacity: 0 !important;
       visibility: hidden !important;
       pointer-events: none !important;
   }
   
   /* =========================================
      2. NAVBAR & HEADER
      ========================================= */
   .navbar {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 140px; 
       background-color: black;
       z-index: 1000; 
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 0 30px;
       border-bottom: 2px solid rgba(207, 181, 59, 0.3); 
   }
   
   .header-content {
       display: flex;
       align-items: center;
       gap: 15px;
       height: 100%;
   }
   
   .logo {
       width: 100px;
       height: 100px;
       flex-shrink: 0;
   }
   
   .logo img {
       width: 100%;
       height: 100%;
       object-fit: contain;
   }
   
   .divider {
       width: 2px;
       height: 80px;
       background-color: white;
       flex-shrink: 0;
   }
   
   .header-text {
       color: white;
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
       font-family: 'Montserrat', sans-serif; 
   }
   
   .header-text h3 {
       font-size: 1.1rem;
       font-weight: 800; 
       margin: 0;
       letter-spacing: 1px;
       white-space: nowrap;
       text-transform: uppercase; 
   }
   
   .header-text h4 {
       font-size: 0.9rem;
       font-weight: 600;
       margin: 5px 0 0 0;
       letter-spacing: 2px; 
       white-space: nowrap;
       text-transform: uppercase;
   }
   
   /* =========================================
      3. NAV ACTIONS & HAMBURGER
      ========================================= */
   .nav-actions {
       display: flex;
       gap: 15px;
       align-items: center;
       height: 100%;
   }
   
   .btn {
       padding: 12px 30px;
       font-size: 0.9rem; 
       font-weight: 700;
       font-family: 'Montserrat', sans-serif; 
       text-transform: uppercase; 
       letter-spacing: 1px;
       border: none;
       cursor: pointer;
       border-radius: 5px;
       width: 140px;
       transition: all 0.3s ease; 
       display: block; 
   }
   
   .btn:hover {
       background-color: white;
       color: black;
       border-color: white;
       transform: scale(1.1);
       box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4);
   }
   
   .btn-contact {
       background-color: var(--old-gold);
       color: black;
       border: 2px solid var(--old-gold);
   }
   
   .btn-donate {
       background-color: black;
       color: var(--old-gold);
       border: 2px solid var(--old-gold);
   }
   
   .hamburger-container {
       position: relative;
       display: flex;
       align-items: center;
       height: 40px; 
       width: 40px;
   }
   
   .hamburger {
       width: 40px;
       height: 30px;
       background-color: transparent;
       border: none;
       cursor: pointer;
       position: relative; 
       z-index: 1001; 
       padding: 0;
   }
   
   .hamburger span {
       display: block;
       position: absolute;
       height: 4px;
       width: 100%;
       background: var(--old-gold);
       border-radius: 2px;
       opacity: 1;
       left: 0;
       transform: rotate(0deg);
       transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-in-out 0.25s;
   }
   
   .hamburger span:nth-child(1) { top: 0px; }
   .hamburger span:nth-child(2) { top: 12px; }
   .hamburger span:nth-child(3) { top: 24px; }
   
   /* Hamburger Animation */
   .hamburger.active span:nth-child(1) {
       top: 12px;
       transform: rotate(45deg);
       transition: top 0.25s ease-in-out, transform 0.25s ease-in-out 0.25s;
   }
   .hamburger.active span:nth-child(2) { opacity: 0; }
   .hamburger.active span:nth-child(3) {
       top: 12px;
       transform: rotate(-45deg);
       transition: top 0.25s ease-in-out, transform 0.25s ease-in-out 0.25s;
   }
   
   /* =========================================
      4. TRANSLUCENT MENU
      ========================================= */
   .dropdown-menu {
       position: fixed;
       top: 0;
       left: 0;
       width: 100vw;
       height: 100vh;
       background-color: rgba(207, 181, 59, 0.15); /* Very Translucent */
       z-index: 999; 
       display: none;
       flex-direction: column;
       padding: 160px 40px 40px 40px; 
       overflow-y: auto;
       backdrop-filter: blur(20px); 
       -webkit-backdrop-filter: blur(20px);
       align-items: center; 
   }
   
   .dropdown-menu.active {
       display: flex;
       animation: fadeIn 0.3s ease-in-out;
   }
   
   @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
   }
   
   .close-menu-btn { display: none !important; }
   
   /* --- MENU ITEMS --- */
   .menu-item {
       padding: 20px 0;
       font-family: 'Montserrat', sans-serif; 
       font-size: 2.2rem; 
       font-weight: 800; 
       text-transform: uppercase; 
       letter-spacing: 2px;
       text-align: left; 
       width: 90%;       
       max-width: 1200px; 
       color: white;
       cursor: pointer;
       border-bottom: 2px solid rgba(255, 255, 255, 0.15);
       transition: color 0.2s;
       position: relative;
   }
   
   .menu-item a {
       color: inherit; 
       text-decoration: none; 
       display: block; 
       width: 100%;
   }
   
   .menu-item-mobile-only { display: none; }
   
   .menu-item:hover {
       color: var(--old-gold);
       background-color: transparent;
   }
   
   .menu-item.has-submenu::after {
       content: '+';
       position: absolute;
       right: 0;
       font-size: 2rem;
       font-weight: 400;
   }
   
   /* --- SUBMENU STYLES --- */
   .submenu {
       display: none;
       padding: 10px 0;
       background-color: transparent;
       margin-bottom: 20px;
       width: 90%;
       max-width: 1200px;
   }
   
   .submenu.active { display: block; }
   
   .submenu-item {
       padding: 12px 0;
       font-family: 'Montserrat', sans-serif;
       font-size: 1.4rem;
       font-weight: 600; 
       text-transform: uppercase;
       text-align: left; 
       padding-left: 40px;
       color: rgba(255, 255, 255, 0.85);
       cursor: pointer;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
       transition: color 0.2s;
       position: relative;
   }
   
   .submenu-item a {
       color: inherit; 
       text-decoration: none; 
       display: block; 
       width: 100%;
   }
   
   .submenu-item:hover {
       color: var(--old-gold);
       background-color: transparent;
   }
   
   .submenu-item.has-submenu::after {
       content: '+';
       position: absolute;
       right: 0;
       font-size: 1.2rem;
   }
   
   .sub-submenu {
       display: none;
       padding-left: 0;
       background-color: transparent;
   }
   
   .sub-submenu.active { display: block; }
   
   /* --- PROBATE SUB-MENU ITEMS --- */
   .sub-submenu-item {
       padding: 10px 0;
       font-family: 'Montserrat', sans-serif;
       font-size: 1.4rem;
       font-weight: 580;
       text-align: left;
       padding-left: 80px;
       color: rgba(255, 255, 255, 0.75);
       cursor: pointer;
       transition: color 0.2s;
   }
   
   .sub-submenu-item a {
       color: inherit;
       text-decoration: none;
       display: block;
       width: 100%;
   }
   
   .sub-submenu-item:hover {
       color: var(--old-gold) !important;
       background-color: transparent;
   }
   
   #poemsSubmenu .sub-submenu-item a {
       color: rgba(255, 255, 255, 0.75) !important;
       font-weight: 500; 
       font-size: 1.4rem; 
       font-weight: 580;
       transition: color 0.3s ease;
   }
   #poemsSubmenu .sub-submenu-item a:hover {
       color: var(--old-gold) !important;
   }
   
   
   /* =========================================
      5. HOMEPAGE CONTENT STYLES
      ========================================= */
   
   /* Slideshow */
   .slideshow-container {
       position: relative; width: 100%; height: 100vh; background-color: black; z-index: 1; overflow: hidden; margin-top: 0;
   }
   .slide {
       position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 2s ease-in-out; background-color: black;
   }
   .slide.active { opacity: 1; }
   .slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
   .overlay {
       position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1;
   }
   
   /* About Section */
   .about-section {
       position: relative; background-color: #0d0d0d; padding: 100px 30px; z-index: 2; overflow: hidden;
   }
   .about-container {
       max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 60px;
   }
   .about-content { flex: 1; }
   .about-title {
       font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2.2rem;
       color: #CFB53B; text-transform: uppercase; line-height: 1.1; margin-bottom: 20px; white-space: nowrap; 
   }
   .gold-bar { width: 80px; height: 4px; background-color: var(--old-gold); margin-bottom: 30px; }
   .about-text { font-family: 'Open Sans', sans-serif; color: white; font-size: 1.1rem; line-height: 1.8; }
   .about-image-wrapper { flex: 1; position: relative; }
   .about-img {
       width: 100%; height: auto; border-radius: 5px;
       box-shadow: 10px 10px 0px rgba(207, 181, 59, 0.2); transition: transform 0.3s ease;
   }
   .about-img:hover { transform: scale(1.02); }
   
   /* --- SERVICE SECTION (Updated Fader Styles) --- */
   .service-section {
       position: relative; 
       background-color: black; 
       padding: 100px 30px; 
       z-index: 2; 
       overflow: hidden;
   }
   
   .service-container {
       max-width: 1200px; 
       margin: 0 auto; 
       display: flex; 
       align-items: center; 
       justify-content: space-between; 
       gap: 60px;
       flex-direction: row; 
   }
   
   /* Service Image Box */
   .service-image-wrapper {
       flex: 1.5; /* Wider for desktop */
       position: relative;
       height: 550px; 
       border-radius: 8px;
       overflow: hidden;
       box-shadow: -10px 10px 0px rgba(207, 181, 59, 0.15);
       background-color: #000;
       cursor: pointer;
   }
   
   /* Service Images */
   .service-slide-img {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: contain;
       opacity: 0;
       transition: opacity 1s ease-in-out, transform 0.5s ease;
   }
   
   .service-slide-img.active { opacity: 1; }
   
   .service-image-wrapper:hover .service-slide-img.active {
       transform: scale(1.05); /* Hover Zoom */
   }
   
   .service-content { flex: 1; }
   
   .service-title {
       font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2.5rem; color: #CFB53B; text-transform: uppercase; margin-bottom: 20px;
   }
   .service-text { font-family: 'Open Sans', sans-serif; color: white; font-size: 1.1rem; line-height: 1.8; }
   
   
   /* Brothers Section */
   .brothers-section {
       background-color: #000000; padding: 100px 30px; z-index: 2; position: relative; border-top: 1px solid #222;
   }
   .brothers-container { max-width: 1200px; margin: 0 auto; }
   .section-title {
       font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2.5rem; color: #CFB53B; text-transform: uppercase; text-align: center; margin-bottom: 20px;
   }
   .brothers-grid { 
       display: flex; 
       flex-wrap: wrap; 
       justify-content: center; 
       gap: 20px; 
   }
   .brother-card {
       width: calc(25% - 15px); 
       background: linear-gradient(145deg, #1a1a1a, #000000);
       border: 1px solid #333; border-radius: 8px; overflow: hidden;
       transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; 
       text-align: center; 
       display: flex; /* Critical for display */
       flex-direction: column; 
       min-width: 220px;
       opacity: 1; /* Ensure visible by default */
   }
   .brother-card:hover { transform: translateY(-10px); border-color: var(--old-gold); box-shadow: 0 10px 20px rgba(207, 181, 59, 0.2); }
   .brother-img-wrapper { width: 100%; height: 300px; overflow: hidden; background-color: #222; }
   .brother-img-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.5s ease; }
   .brother-card:hover .brother-img-wrapper img { transform: scale(1.05); }
   .brother-info { padding: 20px 10px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
   .brother-info h3 {
       font-family: 'Montserrat', sans-serif; color: white; font-size: 1.1rem; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; position: relative; padding-bottom: 10px;
   }
   .brother-info h3::after {
       content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 2px; background-color: var(--old-gold); transition: width 0.3s ease;
   }
   .brother-card:hover .brother-info h3::after { width: 60px; }
   .brother-links { display: flex; gap: 15px; justify-content: center; }
   .brother-links a {
       display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; border-radius: 50%; border: 1px solid #555; color: #ccc; font-size: 1rem; background-color: transparent; transition: all 0.3s ease;
   }
   .brother-links a:hover { background-color: var(--old-gold); color: black; border-color: var(--old-gold); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(207, 181, 59, 0.4); }
   
   /* Filter Bar */
   .filter-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; }
   .filter-btn {
       background-color: transparent; border: 2px solid #333; color: #ccc; padding: 10px 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; cursor: pointer; border-radius: 30px; transition: all 0.3s ease;
   }
   .filter-btn:hover { border-color: var(--old-gold); color: var(--old-gold); }
   .filter-btn.active { background-color: var(--old-gold); color: black; border-color: var(--old-gold); font-weight: 700; }
   
   
   /* News Section */
   .news-section { background-color: #0d0d0d; padding: 100px 30px; z-index: 2; position: relative; }
   .news-container { max-width: 1200px; margin: 0 auto; }
   .news-section-title {
       font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 3rem; color: #CFB53B; text-transform: uppercase; text-align: center; margin-bottom: 20px; letter-spacing: 2px;
   }
   .centered-bar { width: 100px; height: 4px; background-color: #CFB53B; margin: 0 auto 60px auto; }
   .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
   .news-card {
       border: 1px solid #222; padding: 40px 30px; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; transition: transform 0.3s ease, border-color 0.3s ease; background-color: black; background-size: cover; background-position: center;
   }
   #news1 { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/julian_mr_hampton.png'); background-position: top; }
   #news2 { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/HomepageSample8.png'); }
   #news3 { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/the_hill_26.png'); }
   
   .news-card:hover { transform: translateY(-10px); border-color: var(--old-gold); background-blend-mode: overlay; }
   .news-date { font-family: 'Open Sans', sans-serif; font-size: 0.9rem; color: #ccc; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; }
   .news-headline { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; color: white; font-weight: 700; line-height: 1.4; margin-bottom: 30px; text-shadow: 2px 2px 4px black; }
   .news-btn { display: inline-flex; align-items: center; gap: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; color: var(--old-gold); text-transform: uppercase; text-decoration: none; transition: all 0.3s ease; }
   .news-btn:hover { color: white; padding-left: 10px; }
   
   /* Meet the Creators */
   .creators-section { background-color: #111; padding: 100px 30px; z-index: 2; position: relative; }
   .creators-container { max-width: 900px; margin: 0 auto; text-align: center; }
   .creators-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 3rem; color: #CFB53B; text-transform: uppercase; margin-bottom: 20px; letter-spacing: 2px; }
   .creators-subtitle { font-family: 'Open Sans', sans-serif; font-size: 1.1rem; color: #aaa; max-width: 680px; margin: 0 auto 70px auto; line-height: 1.75; }
   .creators-grid { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }
   .creator-card { display: flex; flex-direction: column; align-items: center; gap: 20px; }
   .creator-img-wrapper { width: 180px; height: 180px; border-radius: 50%; overflow: hidden; border: 3px solid #CFB53B; flex-shrink: 0; transition: box-shadow 0.3s ease; }
   .creator-img-wrapper:hover { box-shadow: 0 0 20px rgba(207, 181, 59, 0.5); }
   .creator-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
   .creator-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.2rem; color: white; margin: 0; text-decoration: none; display: block; transition: color 0.3s; }
   .creator-name:hover { color: #CFB53B; }
   .creator-line { font-family: 'Open Sans', sans-serif; font-size: 0.95rem; color: #CFB53B; font-weight: 600; letter-spacing: 1px; margin: 4px 0 0 0; }
   .creator-role { font-family: 'Open Sans', sans-serif; font-size: 0.9rem; color: #888; margin: 4px 0 0 0; }
   .creator-role i { margin-right: 5px; color: #CFB53B; }

   @media (max-width: 768px) {
       .creators-section { padding: 70px 20px; }
       .creators-title { font-size: 2rem; letter-spacing: 1px; }
       .creators-subtitle { font-size: 1rem; margin-bottom: 50px; }
       .creators-grid { gap: 40px; }
       .creator-img-wrapper { width: 150px; height: 150px; }
   }

   @media (max-width: 480px) {
       .creators-section { padding: 50px 15px; }
       .creators-title { font-size: 1.7rem; }
       .creators-grid { gap: 30px; }
       .creator-img-wrapper { width: 130px; height: 130px; }
       .creator-name { font-size: 1.05rem; }
   }

   /* Animation Classes */
   .hidden-on-scroll { opacity: 0; transform: translateY(50px); transition: all 2s ease-out; }
   .hidden-on-scroll.visible { opacity: 1; transform: translateY(0); }
   
   /* Footer */
   .footer { width: 100%; background-color: #000000; color: #cccccc; padding: 60px 30px 20px 30px; border-top: 2px solid rgba(207, 181, 59, 0.3); font-family: 'Open Sans', sans-serif; z-index: 3; position: relative; }
   .footer-content { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
   .footer-col { flex: 1; min-width: 250px; }
   .footer-col h3 { font-family: 'Montserrat', sans-serif; color: var(--old-gold); font-size: 1.1rem; text-transform: uppercase; margin-bottom: 20px; letter-spacing: 1px; font-weight: 700; }
   .brand-col { text-align: center; display: flex; flex-direction: column; align-items: center; }
   .footer-logo { width: 80px; height: auto; margin-bottom: 15px; }
   .brand-text h3, .brand-text h4 { margin: 0; color: white; font-weight: 700; }
   .brand-text h3 { font-size: 1rem; }
   .brand-text h4 { font-size: 0.8rem; font-weight: 400; color: #aaa; margin-top: 5px; }
   .links-col ul { list-style: none; padding: 0; }
   .links-col ul li { margin-bottom: 10px; }
   .links-col ul li a { color: #ccc; text-decoration: none; transition: color 0.3s; }
   .links-col ul li a:hover { color: var(--old-gold); padding-left: 5px; }
   .contact-col p { margin-bottom: 15px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
   .contact-col i { color: var(--old-gold); margin-top: 3px; }
   .contact-col a { color: #ccc; text-decoration: none; transition: color 0.3s; }
   .contact-col a:hover { color: var(--old-gold); }
   .social-icons { display: flex; gap: 15px; }
   .social-icons a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background-color: #222; color: var(--old-gold); border-radius: 50%; transition: all 0.3s ease; font-size: 1.2rem; text-decoration: none; }
   .social-icons a:hover { background-color: var(--old-gold); color: black; transform: translateY(-3px); }
   .footer-bottom { border-top: 1px solid #222; padding-top: 20px; text-align: center; font-size: 0.9rem; color: #777; }
   .footer-bottom a { color: #999; text-decoration: none; transition: color 0.3s; }
   .footer-bottom a:hover { color: var(--old-gold); }
   
   
   /* =========================================
      6. RESPONSIVE DESIGN
      ========================================= */
   @media (max-width: 1150px) {
       .nav-actions .btn { display: none; }
       .menu-item-mobile-only { display: block !important; }
       
       .navbar { height: 100px; padding: 0 15px; }
       .header-text h3 { font-size: 0.9rem; }
       .header-text h4 { font-size: 0.8rem; }
       .logo { width: 60px; height: 60px; }
       .divider { height: 50px; }
       .slideshow-container { margin-top: 100px; }

       .dropdown-menu { width: 100%; height: 100vh; padding-top: 120px; }
       
       /* Footer Stack */
       .footer-content { flex-direction: column; align-items: center; text-align: center; }
       .brand-col, .links-col, .contact-col, .social-col { width: 100%; align-items: center; }
       .contact-col p { justify-content: center; }
       .social-icons { justify-content: center; }
   
       /* About Section Mobile */
       .about-container { flex-direction: column; gap: 40px; }
       .about-title { font-size: 1.5rem; white-space: normal; text-align: center; }
       .gold-bar { margin: 0 auto 30px auto; }
       .about-text { text-align: center; }
       
       /* Service Section Mobile (FIXED HEIGHT ISSUE) */
       .service-container { flex-direction: column-reverse; gap: 30px; }
       .service-title { font-size: 2rem; text-align: center; }
       .service-text { text-align: center; }
       /* Override flex: 1.5 (flex-basis:0 collapses height in column layout) */
       .service-image-wrapper { flex: 0 0 350px; width: 100%; height: 350px; min-height: 350px; }
   
       /* News Section Mobile */
       .news-grid { grid-template-columns: 1fr; gap: 40px; }
       .news-card { text-align: center; min-height: 250px; }
       .news-btn { justify-content: center; }
   }
   
   /* Brother Card Grid Logic */
   @media (max-width: 1200px) {
       .brother-card { width: calc((100% - 40px) / 3); }
   }

   @media (max-width: 900px) {
       .brother-card { width: calc(50% - 10px); }
   }

   @media (max-width: 600px) {
       .brother-card { width: 100%; min-width: unset; }
   }

   /* 768px — phones in portrait */
   @media (max-width: 768px) {
       /* Consistent height, full width — slight vertical crop for non-landscape photos */
       .slideshow-container { height: 66vw; overflow: hidden; }
       .slide img { object-fit: cover; object-position: center; }
       .about-section, .brothers-section, .news-section { padding: 70px 20px; }
       .service-section { padding: 70px 20px; }
       .service-image-wrapper { flex: 0 0 300px; height: 300px; min-height: 300px; }
       .section-title { font-size: 2rem; letter-spacing: 1px; }
       .news-section-title { font-size: 2.2rem; }
       .news-headline { font-size: 1.3rem; }
       /* Hamburger menu — left-align items, reduce font for mobile screens */
       .dropdown-menu { padding: 120px 0 30px 0; align-items: flex-start; }
       .menu-item { font-size: 1.6rem; padding: 16px 25px; width: 100%; }
       .menu-item.has-submenu::after { font-size: 1.5rem; }
       .submenu { width: 100%; }
       .submenu-item { font-size: 1.1rem; padding-left: 40px; }
       .submenu-item.has-submenu::after { font-size: 1rem; }
       .sub-submenu-item { font-size: 1rem; padding-left: 60px; }
       /* Size the image box by aspect ratio (not a fixed height) so it scales
          with the card's width instead of staying pinned short and wide when
          cards go full-width — a short/wide box was cropping faces out of
          these portrait-oriented photos. */
       .brother-img-wrapper { height: auto; aspect-ratio: 4 / 5; }
       .brother-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
   }

   /* 480px — medium phones */
   @media (max-width: 480px) {
       .about-section, .brothers-section, .news-section { padding: 50px 15px; }
       .service-section { padding: 50px 15px; }
       .service-image-wrapper { flex: 0 0 250px; height: 250px; min-height: 250px; }
       .about-title { font-size: 1.3rem; }
       .about-text { font-size: 1rem; }
       .service-title { font-size: 1.7rem; }
       .service-text { font-size: 1rem; }
       .section-title { font-size: 1.7rem; }
       .news-section-title { font-size: 1.9rem; letter-spacing: 1px; }
       .news-headline { font-size: 1.1rem; }
       .filter-btn { padding: 8px 12px; font-size: 0.8rem; }
       .btn-home { left: 15px; }
       .btn-top { right: 15px; }
       /* Allow header text to wrap fully — no truncation */
       .nav-actions { flex-shrink: 0; }
       .header-content { min-width: 0; flex-shrink: 1; }
       .header-text { min-width: 0; }
       .header-text h3 { white-space: normal; font-size: 0.72rem; letter-spacing: 0; line-height: 1.3; }
       .header-text h4 { font-size: 0.65rem; letter-spacing: 0.5px; line-height: 1.3; }
       /* Hamburger menu — small phones */
       .dropdown-menu { padding: 100px 0 25px 0; align-items: flex-start; }
       .menu-item { font-size: 1.3rem; padding: 12px 20px; width: 100%; letter-spacing: 0.5px; }
       .menu-item.has-submenu::after { font-size: 1.2rem; }
       .submenu { width: 100%; }
       .submenu-item { font-size: 0.95rem; padding-left: 35px; }
       .sub-submenu-item { font-size: 0.85rem; padding-left: 52px; }
       .brother-img-wrapper { height: auto; aspect-ratio: 4 / 5; }
   }

   /* Extra small screens */
   @media (max-width: 400px) {
       .navbar { padding: 0 10px; }
       .header-text h3 { white-space: normal; font-size: 0.68rem; letter-spacing: 0; line-height: 1.3; }
       .header-text h4 { font-size: 0.62rem; letter-spacing: 0; line-height: 1.3; }
       .logo { width: 45px; height: 45px; }
       .divider { height: 40px; }

       .filter-btn { padding: 8px 10px; font-size: 0.75rem; }

       .about-title { font-size: 1.2rem; }
       .service-title { font-size: 1.5rem; }
       .section-title { font-size: 1.6rem; }
       .news-section-title { font-size: 1.7rem; }
       .news-headline { font-size: 1rem; }

       .footer-col { min-width: unset; width: 100%; }
       .btn-home { left: 10px; }
       .btn-top { right: 10px; }
   }

/* --- FLOATING BUTTONS --- */
.floating-btn {
    position: fixed;
    bottom: 30px;
    width: 50px;
    height: 50px;
    background-color: #CFB53B;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, bottom 0.1s linear, background-color 0.3s;
}

.floating-btn.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.floating-btn:hover {
    background-color: white;
    color: #CFB53B;
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(207, 181, 59, 0.4);
}

.btn-home { left: 30px; }
.btn-top  { right: 30px; }

/* Override scroll-fade animations on mobile — IntersectionObserver fails when body has overflow-x:hidden */
@media (max-width: 1024px) {
    .hidden-on-scroll {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
}