:root {
     --primary-blue: #1d1554;
     --silver: #fff;
     --cyan: #9FD8DE;
     --off-white: #FFFFF0;
     --black: #000000;
 }

 * {
     margin: 0;

     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Montserrat', sans-serif;
     background-color: var(--black);
     color: var(--off-white);
     line-height: 1.6;
     overflow-x: clip;
 }

 .serif {
     font-family: 'Crimson Pro', serif;
 }

 /* Navigation */
 nav {
     position: absolute;
     top: 0;
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 30px 60px;
     z-index: 1100;
 }

 .logo-area {
     display: flex;
     align-items: center;
     gap: 12px;
     text-transform: uppercase;
     font-weight: 700;
     letter-spacing: 2px;
     font-size: 14px;
     z-index: 1102;
 }

 .nav-links {
     display: flex;
     gap: 49px;
     align-items: center;
 }

 .nav-item {
     position: relative;
 }

 .nav-item a {
     color: #fff;
 }

 @media (max-width: 768px) {
     .nav-item a {
         color: #1d1554;
     }
 }

 .nav-links a {
     color: #FFFFF0;
     text-decoration: none;
     text-transform: uppercase;
     font-size: 15px;
     font-weight: 800;
     letter-spacing: 1px;
     transition: color 0.3s;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 /* Desktop */
 nav a {
     color: #fff;
 }

 /* Mobile */
 @media (max-width: 768px) {
     nav a {
         color: #1d1554;
     }
 }

 @media (max-width: 768px) {
     .nav-item a {
         color: #1d1554;
     }
 }

 .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     background-color: var(--off-white);
     min-width: 200px;
     padding: 15px 0;
     border-radius: 4px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: all 0.3s ease;
     list-style: none;
     margin-top: 10px;
 }

 .nav-item:hover .dropdown-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .dropdown-menu li a {
     color: var(--primary-blue) !important;
     padding: 10px 25px;
     font-size: 10px;
     display: block;
     white-space: nowrap;
 }

 .menu-toggle {
     display: none;
     flex-direction: column;
     gap: 6px;
     cursor: pointer;
     z-index: 1102;
     padding: 10px;
 }

 .menu-toggle span {
     display: block;
     width: 25px;
     height: 2px;
     background-color: #1d1554;
     transition: all 0.3s ease;
 }

 /* Base Nav State (Desktop) */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     padding: 25px 5%;
     /* Initial large padding */
     transition: all 0.4s ease-in-out;
     z-index: 1000;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 /* Nav Item Base Color */
 .nav-item a {
     /* color: var(--primary-blue);  */
     text-decoration: none;
     transition: color 0.3s ease;
 }

 /* SCROLLED STATE */
 nav.scrolled {
     padding: 1px 2%;
     /* Reduced padding on scroll */
     background: #ffffff;
     /* Solid white background */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
 }

 nav.scrolled .nav-item a {
     color: #1d1554;
     /* Blue-Navy color on scroll */
 }

 /* Ensure the mobile menu burger also changes color on scroll if needed */
 nav.scrolled #menu-toggle span {
     background: #1d1554;
 }

 @media (max-width: 1024px) {

     /* 1. Ensure the main nav links container allows vertical growth */
     .nav-links {
         display: flex;
         flex-direction: column;
         overflow-y: auto;
         /* Allows scrolling if menu is long */
     }

     /* 2. Hide dropdowns by default on mobile */
     .nav-item.has-dropdown .dropdown-menu {
         display: none;
         position: static;
         /* This is the key: it stays in the document flow */
         width: 100%;
         box-shadow: none;
         /* Remove desktop shadows */
         padding-left: 20px;
         /* Indent sub-items for visual hierarchy */
     }

     /* 3. Show dropdown when the parent has the 'active' class (from your JS) */
     .nav-item.has-dropdown.active>.dropdown-menu {
         display: block;
     }

     /* 4. Optional: Rotate the arrow icon when active */
     .nav-item.has-dropdown.active svg {
         transform: rotate(180deg);
         transition: transform 0.3s ease;
     }
 }

 @media (max-width: 1024px) {

     /* 1. Show the Hamburger Menu */
     .menu-toggle {
         display: flex;
     }

     /* 2. Transform Nav Links into a Mobile Sidebar/Overlay */
     .nav-links {
         position: fixed;
         top: 0;
         right: 0;
         /* Hidden off-canvas via transform (not negative offset) so it
            doesn't extend the page width and create a right-side gap. */
         transform: translateX(100%);
         width: 80%;
         /* Adjust width as needed */
         height: 100vh;
         background-color: #fff;
         /* White background for mobile menu */
         padding: 100px 40px;
         flex-direction: column;
         align-items: flex-start;
         gap: 30px;
         transition: transform 0.4s ease-in-out;
         box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
         z-index: 1101;
     }

     /* 3. Class to be toggled via JavaScript */
     .nav-links.active {
         transform: translateX(0);
     }

     /* 4. Adjust Link Colors for Mobile Visibility */
     .nav-links a {
         color: #1d1554 !important;
         /* Ensure visibility on white bg */
         font-size: 18px;
         width: 100%;
     }

     /* 5. Mobile Dropdown Adjustments */
     .nav-item {
         width: 100%;
     }

     /* Finger-sized tap target for the top-level menu links */
     .nav-item>a {
         display: block;
         padding: 8px 0;
     }

     .dropdown-menu {
         position: static;
         /* Put back in normal flow */
         opacity: 1;
         visibility: visible;
         display: none;
         /* Controlled by your JS 'active' class */
         transform: none;
         box-shadow: none;
         background: transparent;
         padding-left: 20px;
         margin-top: 0;
     }

     /* Show dropdown when parent is clicked/active */
     .nav-item.has-dropdown.active .dropdown-menu {
         display: block;
     }

     .dropdown-menu li a {
         padding: 10px 0;
         font-size: 14px;
     }

     /* 6. Fix Logo Z-Index so it stays above the menu if needed */
     .logo-area {
         z-index: 1102;
     }
 }

 /* Hero Section Refactor */
 .hero {
     min-height: 90vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     padding: 0 60px;
 }

 #hero-video {
     position: absolute;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     z-index: -1;
     transform: translate(-50%, -50%);
     object-fit: cover;
     filter: brightness(0.8);
 }

 .hero-content {
     max-width: 800px;
     text-align: left;
     z-index: 2;
     margin-top: 120px;
 }

 .hero-title {
     font-size: clamp(3rem, 7vw, 4.4rem);
     margin: 10px 0;
     font-weight: 900;
     line-height: 1.1;
     color: var(--silver);
 }

 .hero-subtitle {
     text-transform: uppercase;
     letter-spacing: 4px;
     font-size: 13px;
     color: var(--silver);
     font-weight: 700;
     display: block;
     margin-bottom: 10px;
 }

 .hero-description {
     font-size: 16px;
     color: var(--silver);
     opacity: 0.9;
     margin-top: 20px;
     max-width: 750px;
 }

 /* Logo Marquee */
 .marquee-container {
     position: absolute;
     bottom: 23px;
     left: 0;
     width: 100%;
     background: rgba(255, 255, 255, 0.075);
     backdrop-filter: blur(1px);
     padding: 20px 0;
     overflow: hidden;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .marquee-content {
     display: flex;
     width: calc(450px * 22);
     animation: scroll 30s linear infinite;
 }

 .marquee-content span {
     width: 250px;
     text-align: center;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.6);
 }

 @keyframes scroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(calc(-250px * 7));
     }
 }

 /* --- Mobile & Tablet Adjustments --- */

 @media (max-width: 1024px) {
     .hero {
         padding: 0 20px;
         /* Reduce side padding */
         justify-content: center;
         /* Center content on tablets */
         min-height: 50vh;
     }
 }

 @media (max-width: 768px) {
     .hero {
         display: flex;
         flex-direction: column;
         justify-content: center;
         /* Centered content with generous top/bottom padding so it never
            collides with the fixed header or the bottom marquee. */
         padding: 120px 24px 120px;
         min-height: 100vh;
     }

     .hero-content {
         /* ... existing properties ... */
         margin-top: 0;
         position: relative;
         z-index: 5;
         /* Ensures text stays above the dark overlay */
     }

     .hero-description {
         margin: 15px auto 0;
         font-size: 15px;
         text-align: justify;
     }

     .marquee-container {
         padding: 15px 0;
         bottom: 10px;
         /* Bring marquee closer to bottom */
     }

     .marquee-content span {
         width: 180px;
         /* Narrower items for smaller screens */
         font-size: 12px;
     }

     /* Adjust animation for the new width to prevent jumping */
     @keyframes scroll {
         0% {
             transform: translateX(0);
         }

         100% {
             transform: translateX(calc(-180px * 7));
         }
     }
 }

 @media (max-width: 480px) {
     .hero-title {
         font-size: 2.5rem;
         /* Fallback for very small screens */
     }

     .hero-subtitle {
         letter-spacing: 2px;
         font-size: 11px;
     }
 }

 /* --- Video Responsiveness --- */

 @media (max-width: 1024px) {
     #hero-video {
         /* Ensure video doesn't get too thin on tablets */
         width: auto;
         height: 100%;
     }
 }

 @media (max-width: 768px) {
     #hero-video {
         /* On mobile, we prioritize height to ensure no white gaps appear 
           at the top or bottom of the hero section */
         min-height: 100%;
         width: auto;
         /* Slight increase in brightness for mobile screens if needed, 
           or keep your 0.8 filter */
         filter: brightness(0.9);
     }

     /* Adding a dark overlay to ensure text readability on mobile */
     .hero::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(to bottom,
                 rgba(0, 0, 0, 0.4) 0%,
                 rgba(0, 0, 0, 0.2) 50%,
                 rgba(0, 0, 0, 0.6) 100%);
         z-index: 1;
     }
 }

 /* Fix for very tall/narrow phones */
 @media (max-aspect-ratio: 9/16) {
     #hero-video {
         width: auto;
         height: 100%;
     }
 }


 /* Ribbon */
 .ribbon {
     position: absolute;
     top: 0;
     right: 10%;
     width: 45px;
     height: 155px;
     background-color: var(--primary-blue);
     clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 85%, 0% 100%);
     z-index: -1;
 }

 /* Responsive */
 @media (max-width: 1024px) {
     nav {
         padding: 20px 30px;
     }

     .hero {
         padding: 0 30px;
     }

     .hero-title {
         font-size: 2.9rem;
         text-align: left;
     }
 }

 @media (max-width: 768px) {
     .menu-toggle {
         display: flex;
     }

     .nav-links {
         position: fixed;
         top: 0;
         right: 0;
         width: 100%;
         height: 100vh;
         background-color: #fff;
         flex-direction: column;
         color: var(--primary-blue);
         justify-content: center;
         transform: translateX(100%);
         transition: transform 0.5s ease;
         z-index: 1101;
     }

     .nav-links.open {
         transform: translateX(0);
     }

     .hero-content {
         text-align: center;
         margin: 0 auto;
     }

     .marquee-container {
         bottom: 0px;
     }

     /* .consultation-bar { flex-direction: column; gap: 10px; text-align: center; padding: 15px; } */
 }

 .ivory-showcase-section {
     --ivory-bg: #FFFFF0;
     --ivory-text: #1a1a1a;
     --ivory-accent: #c5a059;
     --ivory-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     --ivory-serif: 'Playfair Display', serif;

     position: relative;
     width: 100%;
     height: 45vh;
     background-color: var(--ivory-bg);
     color: var(--ivory-text);
     font-family: var(--ivory-font);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     margin: 0;
     padding: 2rem;
 }

 .ivory-showcase-section .grain-texture {
     position: absolute;
     inset: 0;
     opacity: 0.04;
     pointer-events: none;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
 }

 .ivory-showcase-section .content-viewport {
     max-width: 1000px;
     width: 100%;
     height: 450px;
     position: relative;
 }

 .ivory-showcase-section .quote-slide {
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
 }

 .ivory-showcase-section .quote-slide.is-active {
     opacity: 1;
     visibility: visible;
     transform: translateY(-50%);
 }

 .ivory-showcase-section .quote-heading {
     font-size: 3.1rem;
     line-height: 1.2;
     font-weight: 700;
     margin-bottom: 3rem;
     letter-spacing: -0.01em;
 }

 .ivory-showcase-section .quote-heading em {
     font-family: var(--ivory-serif);
     font-style: italic;
     color: var(--ivory-accent);
 }

 .ivory-showcase-section .meta-box {
     display: flex;
     align-items: center;
     gap: 2rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(26, 26, 26, 0.1);
     width: fit-content;
 }

 .ivory-showcase-section .timer-rail {
     width: 80px;
     height: 1px;
     background: rgba(26, 26, 26, 0.08);
     position: relative;
 }

 .ivory-showcase-section .timer-fill {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 0%;
     background: var(--ivory-accent);
 }

 .ivory-showcase-section .attribution {
     display: flex;
     flex-direction: column;
 }

 .ivory-showcase-section .attr-label {
     font-size: 0.65rem;
     text-transform: uppercase;
     letter-spacing: 0.25em;
     color: rgba(26, 26, 26, 0.4);
     margin-bottom: 0.2rem;
 }

 .ivory-showcase-section .attr-name {
     font-size: 0.9rem;
     font-weight: 600;
     letter-spacing: 0.05em;
 }

 /* --- Ivory Showcase Responsiveness --- */

 @media (max-width: 1024px) {
     .ivory-showcase-section .quote-heading {
         font-size: 2.5rem;
         /* Slightly smaller for tablets */
     }
 }

 @media (max-width: 768px) {
     .ivory-showcase-section {
         height: auto;
         /* Remove fixed height for mobile */
         min-height: 40vh;
         padding: 1rem 1.5rem;
         margin-bottom: 40px;
     }

     .ivory-showcase-section .content-viewport {
         height: auto;
         /* Allow the container to grow with the text */
         min-height: 150px;
         display: flex;
         align-items: center;
     }

     .ivory-showcase-section .quote-slide {
         position: relative;
         /* Switch to relative so they stack properly in the flow */
         top: 0;
         transform: translateY(20px);
         display: none;
         /* Hide by default */
     }

     .ivory-showcase-section .quote-slide.is-active {
         display: block;
         /* Show only active slide */
         transform: translateY(0);
         /* Reset centering transform */
     }

     .ivory-showcase-section .quote-heading {
         font-size: 2.2rem;
         /* Scale down the title significantly */
         margin-bottom: 2rem;
         text-align: center;
     }

     .ivory-showcase-section .meta-box {
         margin: 0 auto;
         /* Center the attribution box */
         gap: 1.5rem;
     }
 }

 @media (max-width: 480px) {
     .ivory-showcase-section .quote-heading {
         font-size: 2.5rem;
         line-height: 1.3;
     }

     .ivory-showcase-section .timer-rail {
         width: 50px;
         /* Shorten the line on small phones */
     }
 }

 /* Base Reset */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --bg-color: #FFFFF0;
     --primary-blue: #1B1553;
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: var(--bg-color);
     color: var(--primary-blue);
     -webkit-font-smoothing: antialiased;
 }

 /* Main Container */
 .hero-layout {
     position: relative;
     width: 100%;
     height: 100vh;
     display: flex;
     align-items: center;
 }

 /* Background Layer with Vertical Blending */
 .background-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     overflow: hidden;
 }

 .bg-image {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/bg.avif');
     background-size: cover;
     background-position: center;
     filter: grayscale(30%) blur(1px);
     opacity: 0.18;
     /* Create the top and bottom blend */
     -webkit-mask-image: linear-gradient(to bottom,
             transparent 0%,
             black 20%,
             black 80%,
             transparent 100%);
     mask-image: linear-gradient(to bottom,
             transparent 0%,
             black 20%,
             black 80%,
             transparent 100%);
 }

 /* The Fog Overlay (Radial focus for the text area) */
 .fog-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at 25% 50%, transparent 0%, var(--bg-color) 85%);
     z-index: 2;
 }

 /* Content Container */
 .content-wrapper {
     position: relative;
     z-index: 10;
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 80px;
     display: grid;
     grid-template-columns: 1.1fr 1fr;
     align-items: center;
     gap: 60px;
 }

 .text-content {
     max-width: 600px;
     display: flex;
     flex-direction: column;
     gap: 28px;
 }

 /* Typography */
 .eyebrow-text {
    font-size: 1.2rem;
    color: #c5a059;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 800;
    margin-bottom: 10px;
    display: block;
}

 .main-title {
     font-family: 'Playfair Display', serif;
     font-size: clamp(40px, 5.5vw, 78px);
     font-weight: 900;
     line-height: 1.1;
     color: var(--primary-blue);
 }

 .body-text {
     font-size: 17px;
     color: #3f3f46;
     line-height: 1.7;
     max-width: 500px;
 }

 .body-text b {
     color: var(--primary-blue);
     font-weight: 700;
 }

 /* Visual Element: Floating Slider */
 .image-slider-frame {
     position: relative;
     width: 100%;
     aspect-ratio: 4/5;
     max-height: 65vh;
     border-radius: 8px;
     overflow: hidden;
     /* box-shadow: 0 30px 80px rgba(27, 21, 83, 0.12);
            background: white; */
     padding: 10px;
     /* Polaroid feel */
 }

 .slider-inner {
     width: 100%;
     height: 100%;
     position: relative;
     border-radius: 4px;
     overflow: hidden;
 }

 .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 2s ease;
     transform: scale(1.1);
     object-fit: cover;
 }

 .slide.active {
     opacity: 1;
     transform: scale(1);
 }

 .image-slider-frame .slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1.2s ease-in-out;
     /* Smooth fade effect */
     object-fit: cover;
 }

 .image-slider-frame .slide.active {
     opacity: 1;
 }

 /* Branding Ornament */
 .brand-footer {
     margin-top: 20px;
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .accent-dot {
     width: 8px;
     height: 8px;
     background: var(--primary-blue);
     border-radius: 50%;
 }

 .brand-name {
     font-size: 11px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: #a1a1aa;
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
     /* Let the section grow with its stacked content instead of being
        locked to one viewport height (which made the image overflow into
        the next section). */
     .hero-layout {
         height: auto;
         min-height: 100vh;
         align-items: flex-start;
     }

     .content-wrapper {
         grid-template-columns: 1fr;
         padding: 80px 40px;
         text-align: center;
         justify-items: center;
     }

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

     .image-slider-frame {
         width: 70%;
         max-height: 50vh;
         margin-top: 20px;
     }

     .fog-overlay {
         background: var(--bg-color);
         opacity: 0.95;
     }
 }

 @media (max-width: 640px) {
     .image-slider-frame {
         width: 100%;
     }

     .main-title {
         font-size: 38px;
     }

     .content-wrapper {
         padding: 10px 5px;
     }
 }

 /* CSS Variables for consistent branding */
 :root {
     --crimson-dark: #1d1554;
     --crimson-accent: #c5a059;
     --brand-red: #000;
     --bg-cream: #f9f7f2;
     --card-white: #ffffff;
     --text-gray: #666666;
     --card-width: 340px;
     --card-height: 500px;
     --gap: 1.5rem;
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: var(--bg-cream);
     color: var(--crimson-dark);
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     overflow-x: clip;
 }


 /* * ==========================================
         * TOP HERO SECTION WITH BLUR
         * ==========================================
         */

 .hero-section {
     min-height: 50vh;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     padding: 2rem;
     position: relative;
     z-index: 10;
     /* Using the same image as the showcase below */
     background-image: url('../img/bgg.avif');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
 }

 /* The Blur Overlay */
 .hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     /* Heavy blur and darkening to keep text legible */
     /* background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);  */
     z-index: -1;
 }

 .hero-content {
     max-width: 900px;
     animation: fadeIn 1.5s ease-out;
     margin-top: 110px;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* * ==========================================
         * PARALLAX SHOWCASE STYLES
         * ==========================================
         */

 .ivy-showcase-wrapper {
     position: relative;
     height: 450vh;
     width: 100%;
     background-color: #000;
 }

 .ivy-sticky-view {
     position: sticky;
     top: 0;
     height: 100vh;
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* FIXED BACKGROUND IMAGE FOR SHOWCASE */
 .ivy-fixed-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/bgg.avif');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     z-index: 0;
 }

 .ivy-overlay-grid {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
     background-size: 50px 50px;
     z-index: 1;
     opacity: 0.5;
 }

 .ivy-slides-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 2;
 }

 .ivy-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.8s ease;
 }

 .ivy-slide.active {
     opacity: 1;
     pointer-events: auto;
 }

 .ivy-center-content {
     text-align: center;
     z-index: 10;
     max-width: 900px;
     padding: 0 20px;
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .ivy-slide.active .ivy-center-content {
     opacity: 1;
     transform: translateY(0);
     transition-delay: 0.2s;
 }

 .ivy-pre-title {
     font-family: 'Playfair Display', serif;
     font-style: italic;
     font-size: clamp(1.1rem, 2vw, 1.4rem);
     color: #fff;
     margin-bottom: 12px;
     display: block;
 }

 .ivy-uni-name {
     font-size: clamp(2.5rem, 10vw, 3.4rem);
     font-weight: 800;
     letter-spacing: -0.04em;
     line-height: 0.9;
     margin-bottom: 25px;
     display: block;
     text-transform: uppercase;
     color: #fff;
     text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }

 .ivy-description {
     font-size: 1.1rem;
     color: #e2e8f0;
     max-width: 589px;
     margin: 0 auto 40px;
     line-height: 1.7;
     font-weight: 400;
 }

 .ivy-btn {
     display: inline-block;
     padding: 16px 40px;
     border: 2px solid #fff;
     text-decoration: none;
     color: #fff;
     font-weight: 800;
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     transition: all 0.4s ease;
     background: transparent;
 }

 .ivy-btn:hover {
     background: #fff;
     color: #000;
     transform: translateY(-3px);
 }

 /* University Detail Cards */
 .ivy-card {
     position: absolute;
     width: 260px;
     background: #fff;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
     border-radius: 8px;
     overflow: hidden;
     z-index: 5;
     opacity: 0;
     transform: translateY(60px);
     transition: opacity 0.8s ease, transform 1s cubic-bezier(0.2, 1, 0.3, 1);
 }

 .ivy-slide.active .ivy-card {
     opacity: 1;
     transform: translateY(0);
 }

 .ivy-card img {
     width: 100%;
     height: 230px;
     object-fit: cover;
     display: block;
 }

 .ivy-card-info {
     padding: 20px;
     text-align: left;
 }

 .ivy-card-name {
     font-family: 'Playfair Display', serif;
     font-size: 1.1rem;
     margin: 0 0 4px 0;
     color: #1e1b4b;
 }

 .ivy-card-title {
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #64748b;
     margin: 0;
 }

 /* Positions */
 .ivy-left-card {
     left: 5%;
     top: 15%;
 }

 .ivy-right-card {
     right: 5%;
     bottom: 15%;
 }

 /* Navigation Progress */
 .ivy-progress {
     position: absolute;
     right: 40px;
     top: 50%;
     transform: translateY(-50%);
     z-index: 100;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .ivy-dot-wrapper {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     cursor: pointer;
 }

 .ivy-dot-label {
     color: #fff;
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     margin-right: 15px;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .ivy-dot-wrapper:hover .ivy-dot-label {
     opacity: 1;
 }

 .ivy-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     border: 2px solid transparent;
     transition: all 0.4s ease;
 }

 .ivy-dot.active {
     background: #fff;
     transform: scale(1.4);
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
 }

 /* --- COMPLETELY RESPONSIVE MEDIA QUERIES --- */

 /* Tablets and small laptops */
 @media (max-width: 850px) {

     /* 1. Re-enable and straighten the cards */
     .ivy-card {
         display: block !important;
         width: 160px;
         border-radius: 12px;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
         transform: translateY(30px);
     }

     .ivy-card img {
         height: 110px;
         object-fit: cover;
     }

     .ivy-card-info {
         padding: 10px;
         text-align: center;
     }

     .ivy-card-name {
         font-size: 0.85rem;
         font-weight: 600;
     }

     /* 2. Positioning: Straightened */
     .ivy-left-card {
         left: 20px;
         top: 12%;
         transform: translateY(30px);
     }

     .ivy-right-card {
         right: 20px;
         bottom: 15%;
         transform: translateY(30px);
     }

     /* 3. Entrance Animation (Straight) */
     .ivy-slide.active .ivy-left-card,
     .ivy-slide.active .ivy-right-card {
         opacity: 1;
         transform: translateY(0);
         transition: transform 0.6s ease-out, opacity 0.6s ease-out;
     }

     /* Progress dots adjustments */
     .ivy-progress {
         right: 20px;
     }

     /* Hide dot labels on touch devices to avoid overlapping */
     .ivy-dot-label {
         display: none;
     }
 }

 /* Standard Mobile Phones */
 @media (max-width: 600px) {

     /* Stack the slide vertically: country text on its own row, the two
        university cards side-by-side below it — instead of floating over
        the text and overlapping it. */
     .ivy-slide {
         flex-flow: row wrap;
         align-content: center;
         justify-content: center;
         gap: 8px;
         padding: 60px 14px 16px;
     }

     .ivy-center-content {
         order: -1;
         flex: 0 0 100%;
         padding: 0 10px;
     }

     .ivy-description {
         line-height: 1.35;
     }

     .ivy-btn {
         padding: 11px 20px;
         font-size: 0.75rem;
     }

     /* Cards back to normal flow (no longer absolutely positioned) */
     .ivy-card {
         display: block !important;
         position: static;
         width: 43%;
         max-width: 150px;
         transform: none;
         margin: 0;
     }

     .ivy-card img {
         height: 66px;
     }

     .ivy-card-info {
         padding: 5px 5px 7px;
         text-align: center;
     }

     .ivy-card-name {
         font-size: 0.8rem;
         margin-bottom: 2px;
     }

     .ivy-card-title {
         font-size: 0.75rem;
     }

     /* Progress dots become a horizontal row at the bottom-center */
     .ivy-progress {
         flex-direction: row;
         right: auto;
         top: auto;
         left: 50%;
         bottom: 14px;
         transform: translateX(-50%);
         gap: 12px;
     }

     .ivy-dot {
         width: 7px;
         height: 7px;
     }
 }

 /* Extra Small Phones (e.g. iPhone SE, old Androids) */
 @media (max-width: 360px) {
     .ivy-uni-name {
         font-size: 1.8rem;
     }

     .ivy-card img {
         height: 80px;
     }

     .ivy-card-name {
         font-size: 0.72rem;
     }
 }

 .portfolio-intro {
     padding: 70px 5% 15px;
     margin-top: -20px;
     display: block;
     text-align: center;
 }

 .section-title {
     font-family: 'Playfair Display', serif;
     font-size: clamp(3rem, 8vw, 3.8rem);
     line-height: 0.9;
     color: #d1d1d1;
     text-transform: uppercase;
 }

 .section-description {
     max-width: 500px;
     margin: 16px auto 0;
     font-size: 1rem;
     color: #555;
     line-height: 1.7;
     padding-bottom: 10px;
 }

 /* Responsive Fixes */
 @media (max-width: 900px) {
     .portfolio-intro {
         padding-top: 20px;
     }

     /* Stacked, static testimonial cards: photo on top, info below */
     .gallery-wrapper {
         flex-direction: column;
         height: auto;
         gap: 24px;
         padding: 0 5% 40px;
         overflow: visible;
     }

     .gallery-card {
         height: auto;
         flex: none;
         display: flex;
         flex-direction: column;
         cursor: default;
     }

     .gallery-card:hover {
         flex: none;
     }

     .gallery-card img {
         position: static;
         width: 100%;
         height: 320px;
     }

     /* Name already shown inside the info box on mobile */
     .persistent-name {
         display: none;
     }

     .card-info {
         position: static;
         width: 100%;
         height: auto;
         opacity: 1;
         transform: none;
         background: #0a192f;
         padding: 20px;
         white-space: normal;
         pointer-events: auto;
     }

     .testimonial-text {
         max-height: none;
         opacity: 1;
         overflow: visible;
         margin-top: 10px;
     }
 }

 /* Allow the big section title to wrap on phones instead of overflowing */
 @media (max-width: 767px) {
     .section-title {
         white-space: normal;
         font-size: clamp(1.8rem, 9vw, 3rem);
     }
 }

 /* Persistent Name Label for Desktop & Mobile */
 .persistent-name {
     position: absolute;
     bottom: 20px;
     left: 20px;
     z-index: 5;
     color: #ffffff;
     text-shadow: 0px 2px 4px rgba(0,0,0,0.9), 0px 4px 12px rgba(0,0,0,0.8);
     transition: opacity 0.3s ease;
     pointer-events: none;
     text-align: left;
 }
 .persistent-name h4 {
     font-size: 1.15rem;
     margin: 0 0 4px 0;
     line-height: 1.2;
     font-weight: 800;
 }
 .persistent-name span {
     font-size: 0.85rem;
     opacity: 0.9;
     font-weight: 600;
 }
 .gallery-card:hover .persistent-name {
     opacity: 0;
 }

 /* 1. Ensure the container allows the flex items to breathe */
 .gallery-wrapper {
     display: flex;
     flex-direction: row;
     gap: 10px;
     width: 100%;
     height: 70vh;
     padding: 0 5% 40px;
     /* Allow the active card to push others if needed, but keep it contained */
     overflow: hidden;
 }

 .gallery-card {
     position: relative;
     flex: 1;
     /* Default collapsed state */
     height: 100%;
     border-radius: 16px;
     overflow: hidden;
     transition: var(--transition);
     cursor: pointer;
     min-width: 60px;
     /* Increased slightly for better tap targets */
 }

 /* 2. Fix the Expansion */
 .gallery-card:hover {
     flex: 10;
     /* Increased to give more room for text */
 }

 /* 3. Refine the Info Overlay */
 .card-info {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 30px;
     background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
     color: white;
     opacity: 0;
     transform: translateY(20px);
     transition: var(--transition);
     pointer-events: none;
     z-index: 10;
     white-space: nowrap;
 }

 .gallery-card:hover .card-info {
     opacity: 1;
     transform: translateY(0);
     white-space: normal;
 }

 /* Testimonial Text Styling */
 .testimonial-text {
     font-size: 0.95rem;
     line-height: 1.5;
     margin-top: 12px;
     font-style: italic;
     color: #e2e8f0;
     max-height: 0;
     opacity: 0;
     overflow: hidden;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .gallery-card:hover .testimonial-text {
     max-height: 400px;
     opacity: 1;
     margin-top: 12px;
     transition-delay: 0.1s;
 }

 /* "Read more" button — hidden on desktop (cards expand on hover) */
 .read-more-btn {
     display: none;
 }

 /* 4. Ensure Image stays centered during the rapid scale */
 .gallery-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     image-rendering: -webkit-optimize-contrast;
     image-rendering: crisp-edges;
     filter: contrast(1.05) saturate(1.05);
     position: absolute;
     top: 0;
     left: 0;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* --- DESKTOP LAYOUT OVERRIDE --- */
 @media (min-width: 901px) {
     .gallery-card {
         background: #0a192f;
     }
     
     .gallery-card:hover img {
         width: 40%;
     }

     .card-info {
         top: 0;
         bottom: auto;
         right: 0;
         left: auto;
         width: 60%;
         height: 100%;
         background: #0a192f;
         transform: translateX(30px);
         display: flex;
         flex-direction: column;
         justify-content: center;
         padding: 50px;
     }

     .gallery-card:hover .card-info {
         transform: translateX(0);
         pointer-events: auto;
     }
 }

 @media (max-width: 900px) {
     .portfolio-intro {
         padding: 20px 5% 10px;
         text-align: center;
     }

     .section-description {
         margin: 16px auto 0;
     }


     /* Hide scrollbar for a cleaner aesthetic */
     .gallery-wrapper::-webkit-scrollbar {
         display: none;
     }



     .project-name {
         font-size: 1.1rem;
         line-height: 1.4;
     }
 }

 @media (max-width: 900px) {
     .gallery-wrapper {
         display: flex;
         flex-direction: column;
         overflow: visible;
         white-space: normal;
         padding: 0 5% 40px;
         height: auto;
         align-items: stretch;
     }

     .gallery-card {
         flex: none;
         margin-right: 0;
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: column;
         vertical-align: top;
     }

     /* Image and info must be in normal flow (not absolute) so the card
        has real height — otherwise the cards collapse and disappear. */
     .gallery-card img {
         position: static;
         width: 100%;
         height: 300px;
     }

     .persistent-name {
         display: none;
     }

     .card-info {
         position: static;
         width: 100%;
         height: auto;
         opacity: 1;
         transform: none;
         padding: 20px;
         white-space: normal;
         pointer-events: auto;
         /* Allow text to wrap inside the card */
         background: #0a192f;
     }

     .testimonial-text {
         max-height: none;
         opacity: 1;
         overflow: visible;
         margin-top: 10px;
     }
 }

 :root {
     --bg-color: #fdfcf9;
     --accent-color: #1a1a1a;
     --text-muted: #666;
     --card-bg: #ffffff;
     --primary-gold: #fff0ff;
     /* Variables for Consultation Bar */
     --off-white: #f8f9fa;
     --primary-blue: #1a2b48;
     --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Plus Jakarta Sans', sans-serif;
     background-color: var(--bg-color);
     color: var(--accent-color);
     line-height: 1.6;
     overflow-x: clip;
 }

 .section-padding {
     padding: 23px 5%;
 }

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

 /* Header Style */
 .header {
     text-align: center;
     margin-bottom: 60px;
 }

 .header h1,
 .header h2 {
     font-family: 'Playfair Display', serif !important;
     font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
     font-weight: 700 !important;
     color: #002147 !important;
     letter-spacing: normal !important;
 }

 .header p {
     font-size: 0.8rem;
     color: var(--primary-gold);
     letter-spacing: 3px;
     text-transform: uppercase;
     font-weight: 600;
     margin-bottom: 10px;
 }

 /* FAQ Styling */
 .faq-grid {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-bottom: 40px;
 }

 .faq-item {
     background: var(--card-bg);
     border: 1px solid rgba(0, 0, 0, 0.05);
     border-radius: 12px;
     overflow: hidden;
     transition: var(--transition);
 }

 .faq-question {
     width: 100%;
     padding: 24px 32px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: none;
     border: none;
     cursor: pointer;
     text-align: left;
     outline: none;
 }

 .question-text {
     font-size: 1.05rem;
     font-weight: 600;
     color: #333;
     padding-right: 20px;
 }

 .icon-box {
     width: 24px;
     height: 24px;
     min-width: 24px;
     position: relative;
     transition: var(--transition);
 }

 .icon-box::before,
 .icon-box::after {
     content: '';
     position: absolute;
     background: var(--accent-color);
     transition: var(--transition);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .icon-box::before {
     width: 2px;
     height: 14px;
 }

 .icon-box::after {
     width: 14px;
     height: 2px;
 }

 .faq-item.active {
     border-color: var(--primary-gold);
 }

 .faq-item.active .icon-box {
     transform: rotate(45deg);
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
 }

 .faq-item.active .faq-answer {
     max-height: 1000px;
 }

 .answer-inner {
     padding: 0 32px 32px;
     color: var(--text-muted);
     font-size: 0.95rem;
 }



 /* --- Desktop Styles (Modified for better flexibility) --- */
 .consultation-bar {
     width: 100%;
     background-color: var(--off-white);
     color: var(--primary-blue);
     padding: 20px 60px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 1000;
     transition: all 0.3s ease;
     /* Smooth transition for state changes */
     box-sizing: border-box;
     /* Ensures padding doesn't break width */
 }

 /* Fixed state when scrolling */
 .consultation-bar.is-fixed {
     position: fixed;
     bottom: 0;
     left: 0;
     box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
     /* Softened shadow */
 }

 /* Static state for when it's tucked above the footer */
 .consultation-bar.is-static {
     position: relative;
     box-shadow: none;
 }

 .consultation-text {
     font-weight: 600;
     font-size: 14px;
     letter-spacing: 0.5px;
     line-height: 1.4;
 }

 .consultation-btn {
     background-color: var(--primary-blue);
     color: var(--off-white);
     border: none;
     padding: 12px 30px;
     text-transform: uppercase;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 2px;
     cursor: pointer;
     transition: 0.3s;
     text-decoration: none;
     display: inline-block;
     white-space: nowrap;
     /* Prevents button text from wrapping */
 }

 /* --- Responsive Adjustments --- */
 @media (max-width: 768px) {
     .consultation-bar {
         padding: 12px 4%;
         /* Use percentage for safe-area spacing */
         flex-direction: column;
         /* Stack text and button */
         text-align: center;
         gap: 12px;
         /* Adds space between text and button when stacked */
     }

     .consultation-text {
         font-size: 10.5px;
         /* Slightly smaller for mobile */
         max-width: 100%;
     }

     .consultation-btn {
         width: 100%;
         /* Full width button on mobile for better UX */
         padding: 12px 16px;
         font-size: 10px;
     }
 }

 /* Extra small screens / iPhones */
 @media (max-width: 480px) {
     .consultation-bar {
         padding: 10px 16px;
     }

     .consultation-text {
         font-size: 10px;
     }
 }

 /* Footer */
 footer {
     background: var(--off-white);
     color: #777;
     padding: 80px 5% 40px;
     position: relative;
     z-index: 10;
 }

 .footer-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 40px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .footer-col h4 {
     color: #1b1553;
     margin-bottom: 20px;
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-weight: 900;
 }

 .footer-col ul {
     list-style: none;
 }

 .footer-col ul li {
     margin-bottom: 10px;
     font-size: 0.9rem;
 }

 /* Center footer headings, links and social icons on mobile */
 @media (max-width: 768px) {
     .footer-col {
         text-align: center;
     }

     .footer-col ul {
         justify-content: center;
     }
 }

 @media (max-width: 768px) {
     .consultation-bar {
         padding: 20px;
         flex-direction: column;
         gap: 15px;
         text-align: center;
     }

     .video-side,
     .form-side {
         min-width: 100%;
     }

     .video-text h2 {
         font-size: 2rem;
     }
 }

 /* ============================================================
    Global mobile down-scaling — shrink oversized headings,
    paragraphs, images and section spacing on phones.
    Content is unchanged; only sizes are reduced.
    ============================================================ */
 @media (max-width: 600px) {
     /* Headings */
     .hero-title {
         font-size: clamp(1.9rem, 9vw, 2.4rem);
     }

     .main-title {
         font-size: clamp(1.8rem, 8vw, 2.3rem);
     }

     .ivy-uni-name {
         font-size: clamp(1.3rem, 6vw, 1.7rem);
         margin-bottom: 8px;
     }

     .ivy-pre-title {
         font-size: 0.82rem;
     }

     .header h1 {
         font-size: clamp(1.8rem, 8vw, 2.3rem);
     }

     .header {
         margin-bottom: 32px;
     }

     .section-title {
         font-size: clamp(1.6rem, 8.5vw, 2.3rem);
     }

     .video-text h2 {
         font-size: 1.6rem;
     }

     /* Body / paragraph text */
     .hero-description {
         font-size: 14px;
     }

     .body-text {
         font-size: 14.5px;
     }

     .ivy-description {
         font-size: 0.8rem;
         margin-bottom: 12px;
     }

     .section-description {
         font-size: 0.9rem;
     }

     .question-text {
         font-size: 0.95rem;
     }

     .answer-inner {
         font-size: 0.9rem;
         padding: 0 20px 24px;
     }

     /* Spacing */
     .faq-question {
         padding: 18px 20px;
     }

     .section-padding {
         padding: 32px 5%;
     }

     footer {
         padding: 24px 5% 16px;
     }

     .footer-grid {
         gap: 15px;
     }

     .footer-col h4 {
         margin-bottom: 5px !important;
     }

     .footer-col ul {
         line-height: 1.4 !important;
     }
     
     .footer-col ul li {
         margin-bottom: 5px;
     }

     /* Finger-sized tap target for footer links */
     .footer-col ul li a {
         display: inline-block;
         padding: 7px 0;
     }

     /* Images / cards — keep photo + caption joined as one rounded card */
     .gallery-card {
         border-radius: 14px;
         overflow: hidden;
     }

     .gallery-card img {
         height: auto;
         aspect-ratio: 4 / 5;
         object-fit: cover;
         object-position: center;
     }

     .card-info {
         padding: 12px 14px;
     }

     .project-name {
         font-size: 0.9rem;
         line-height: 1.3;
     }

     /* Trim the quote to 3 lines so the dark caption stays compact and the
        card reads as a single unit (photo + short caption). */
     .testimonial-text {
         font-size: 0.78rem;
         line-height: 1.4;
         margin-top: 7px;
         display: -webkit-box;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
         overflow: hidden;
     }

     .gallery-card.expanded .testimonial-text {
         display: block;
         -webkit-line-clamp: unset;
         overflow: visible;
     }

     /* Show the Read more / Read less toggle on mobile */
     .read-more-btn {
         display: inline-block;
         margin-top: 8px;
         padding: 8px 0;
         background: transparent;
         border: none;
         color: #c5a059;
         font-size: 0.78rem;
         font-weight: 700;
         letter-spacing: 0.03em;
         cursor: pointer;
     }
 }
/* ============================================================
   RESPONSIVE & GAP REDUCTION ENHANCEMENTS
   ============================================================ */
html, body {
    max-width: 100%;
    /* clip (not hidden): hidden makes html/body scroll containers, which
       breaks position:sticky on descendants (.ivy-sticky-view, .left-fixed) */
    overflow-x: clip;
}

/* Reduce large vertical gaps across tablet & mobile viewports */
@media (max-width: 992px) {
    .hero-layout, section, .test-prep-section, .quote-section, .location-container {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }
    .test-prep-container {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .test-prep-content, .test-prep-form-wrapper {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    .form-card {
        padding: 25px 20px !important;
    }
    .footer-grid {
        gap: 20px !important;
    }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .hero {
        min-height: 420px !important;
        height: auto !important;
        padding: 50px 15px 30px !important;
    }
    .hero-content {
        padding: 0 10px !important;
    }
    .hero-title, .main-title {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }
    .hero-description, .body-text {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    .test-prep-section {
        padding: 25px 12px !important;
    }
    .test-prep-content h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    .form-card {
        padding: 20px 15px !important;
        border-radius: 10px !important;
    }
    .form-card h3 span {
        font-size: 22px !important;
    }
    .form-card .form-group {
        margin-bottom: 12px !important;
    }
    .form-card input, .form-card select {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    .form-card .submit-btn {
        padding: 12px !important;
        font-size: 15px !important;
    }
    footer {
        padding: 25px 15px 15px !important;
    }
    .footer-col h4 {
        margin-bottom: 8px !important;
    }
    .location-group {
        padding: 0.85rem 0.65rem !important;
        margin-bottom: 1.25rem !important;
    }
    .cards-wrapper {
        gap: 0.65rem !important;
    }
    .category-name, .category-label {
        text-align: center !important;
    }
}

/* Small Phones (max-width: 480px) */
@media (max-width: 480px) {
    .test-prep-section, .quote-section, .hero-layout, section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .hero-title, .main-title {
        font-size: 1.6rem !important;
    }
    .form-card h3 {
        font-size: 13px !important;
    }
    .form-card h3 span {
        font-size: 19px !important;
    }
    .phone-group select {
        width: 85px !important;
    }
}

/* ============================================================
   GAP ABOVE PSYCHOMETRIC ANALYSIS SECTION (.main-container)
   Breathing room between the country carousel and Phase One.
   Single knob for this spacing — mobile override is below.
   ============================================================ */
.main-container {
    margin-top: 20px !important;
    padding-top: 0 !important;
}

.right-scrollable {
    padding-top: 20px !important;
}

@media (max-width: 1024px) {
    .main-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .left-fixed {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .right-scrollable {
        padding-top: 15px !important;
    }
}

/* ============================================================
   REMOVE EXTRA SPACE BEFORE PROFILE EVALUATION (#section-1)
   ============================================================ */
.right-scrollable {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#section-1, .content-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#section-4, .content-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}

@media (max-width: 1024px) {
    .right-scrollable {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    #section-1, .content-section:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        justify-content: flex-start !important;
        min-height: auto !important;
    }
}

/* Hide all accent dots & red dot elements */
.accent-dot, .red-dot, .hero-dot {
    display: none !important;
}

.hero {
    position: relative;
}

/* GLOBAL RESPONSIVE PHONE SPACING & TYPOGRAPHY UNIFICATION */
@media (max-width: 768px) {
    section, main, .main-container, .content-wrapper, .hero-layout, .container, .job-tables, .faq-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-bottom: 30px !important;
        box-sizing: border-box !important;
    }

    h1, h2, h3, h4 {
        font-family: 'Outfit', sans-serif !important;
        word-wrap: break-word !important;
        margin-bottom: 16px !important;
    }

    p, span, li, a {
        font-family: 'Outfit', sans-serif !important;
    }

    .form-card, .test-prep-form-wrapper, .contact-page-wrapper, .connect-us-section, .popup-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-top: 15px !important;
        margin-bottom: 25px !important;
        box-sizing: border-box !important;
    }

    .connect-us-section > div {
        gap: 25px !important;
    }
}

/* HIDE FAQ SUB-LABELS GLOBALLY */
.uk-faq-label,
.aus-faq-label,
.fra-unique-assistance-label,
.ger-faq-label,
.ire-faq-label,
.uae-unique-label,
.hero-tagline {
    display: none !important;
}

/* COMPACT FAQ HEADER SPACING GLOBALLY - REMOVED TOP PADDING */
.uk-faq-wrapper,
.aus-faq-wrapper,
.fra-unique-faq-wrapper,
.ger-faq-wrapper,
.ire-faq-wrapper,
.uae-faq-wrapper,
.uae-unique-faq-wrapper,
.contact-faq-section,
.srv-faq-section,
[class*="faq-wrapper"],
[class*="faq-section"],
section:has(> .srv-faq-container),
section:has(> div > .srv-faq-container),
section:has(> div > h2:empty + .srv-faq-container) {
    padding-top: 0 !important;
}

.uk-faq-header,
.aus-faq-header,
.fra-unique-section-header,
.ger-faq-header,
.ire-faq-header,
.uae-unique-section-header {
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    padding-top: 0 !important;
}

.connect-btn-section {
    padding-top: 25px !important;
    padding-bottom: 10px !important;
}

/* SERVICE PAGES HERO BANNER HEADER LOGO OVERLAP FIX */
.srv-hero-banner {
    padding-top: 150px !important;
    align-items: flex-start !important;
}

.srv-hero-banner > div {
    margin-top: 25px !important;
}

/* SERVICE PROCESS TIMELINE (MATCHING ABOUT-US APPROACH GLASS STYLE) */
.approach-bg,
.srv-works-timeline {
    background-image: linear-gradient(rgb(10 17 40 / 62%), rgb(10 17 40 / 15%)), url('../img/about.avif') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    color: #ffffff !important;
    padding: 120px 20px !important;
    overflow: hidden !important;
}

.approach-bg .section-header,
.srv-works-timeline .section-header {
    margin: 0 auto 80px !important;
    text-align: center !important;
}

.approach-bg .accent-line,
.srv-works-timeline .accent-line {
    width: 60px !important;
    height: 3px !important;
    background: #c5a059 !important;
    margin: 0 auto 30px !important;
}

.approach-bg .section-header h2,
.srv-works-timeline .section-header h2,
.srv-works-timeline h2,
.approach-bg h2 {
    color: #ffffff !important;
    font-family: 'Bodoni Moda', 'Playfair Display', serif !important;
    font-size: clamp(2.3rem, 5.5vw, 3.5rem) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    letter-spacing: normal !important;
    overflow-wrap: break-word !important;
}

.approach-bg .section-header p,
.srv-works-timeline .section-header p,
.srv-works-timeline p.srv-timeline-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    text-align: center !important;
    max-width: 800px !important;
    margin: 20px auto 0 !important;
    font-weight: 300 !important;
}

.srv-works-timeline .approach-timeline,
.approach-bg .approach-timeline {
    position: relative !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

.srv-works-timeline .approach-timeline::after,
.approach-bg .approach-timeline::after {
    content: '' !important;
    position: absolute !important;
    width: 2px !important;
    background: linear-gradient(to bottom, transparent, #c5a059, transparent) !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    margin-left: -1px !important;
}

.srv-works-timeline .step-card,
.approach-bg .step-card {
    padding: 10px 40px !important;
    position: relative !important;
    width: 50% !important;
    box-sizing: border-box !important;
}

.srv-works-timeline .step-card.left,
.approach-bg .step-card.left { left: 0 !important; text-align: right !important; }

.srv-works-timeline .step-card.right,
.approach-bg .step-card.right { left: 50% !important; text-align: left !important; }

.srv-works-timeline .step-card::after,
.approach-bg .step-card::after {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    right: -8px !important;
    background-color: #0a1128 !important;
    border: 2px solid #c5a059 !important;
    top: 45px !important;
    border-radius: 50% !important;
    z-index: 5 !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.srv-works-timeline .step-card.right::after,
.approach-bg .step-card.right::after { left: -8px !important; }

.srv-works-timeline .step-box,
.approach-bg .step-box {
    padding: 35px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.srv-works-timeline .step-card:hover .step-box,
.approach-bg .step-card:hover .step-box {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #c5a059 !important;
    transform: translateY(-5px) !important;
}

.srv-works-timeline .step-card:hover::after,
.approach-bg .step-card:hover::after {
    background: #c5a059 !important;
    transform: scale(1.4) !important;
    box-shadow: 0 0 15px #c5a059 !important;
}

.srv-works-timeline .step-number,
.approach-bg .step-number {
    font-family: 'Bodoni Moda', 'Playfair Display', serif !important;
    font-size: 3.5rem !important;
    color: rgba(197, 160, 89, 0.2) !important;
    position: absolute !important;
    top: 0 !important;
    z-index: 0 !important;
    line-height: 1 !important;
}

.srv-works-timeline .left .step-number,
.approach-bg .left .step-number { right: 40px !important; }

.srv-works-timeline .right .step-number,
.approach-bg .right .step-number { left: 40px !important; }

.srv-works-timeline .step-box h3,
.approach-bg .step-box h3 {
    color: #c5a059 !important;
    font-size: 1.4rem !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-family: 'Bodoni Moda', 'Playfair Display', serif !important;
    font-weight: 600 !important;
    overflow-wrap: break-word !important;
}

.srv-works-timeline .step-box p,
.approach-bg .step-box p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 300 !important;
}

@media screen and (max-width: 768px) {
    .approach-bg,
    .srv-works-timeline {
        background-attachment: scroll !important;
        padding: 70px 15px !important;
    }
    .srv-works-timeline .approach-timeline::after,
    .approach-bg .approach-timeline::after { left: 31px !important; }
    .srv-works-timeline .step-card,
    .approach-bg .step-card {
        width: 100% !important;
        padding-left: 70px !important;
        padding-right: 25px !important;
        text-align: left !important;
        left: 0 !important;
    }
    .srv-works-timeline .step-card.right,
    .approach-bg .step-card.right { left: 0% !important; }
    .srv-works-timeline .step-card::after,
    .approach-bg .step-card::after { left: 23px !important; right: auto !important; }
    .srv-works-timeline .step-number,
    .approach-bg .step-number { left: 20px !important; right: auto !important; font-size: 2.5rem !important; }
    .srv-works-timeline h2,
    .approach-bg h2 { font-size: 2.2rem !important; }
}

@media (max-width: 640px) {
    .srv-works-timeline .step-box,
    .approach-bg .step-box { padding: 25px 20px !important; }
    .srv-works-timeline .step-box h3,
    .approach-bg .step-box h3 { font-size: 1.15rem !important; }
    .srv-works-timeline .step-box p,
    .approach-bg .step-box p { font-size: 0.95rem !important; }
}

/* PROCESS TIMELINE RESPONSIVE STYLES */
@media (max-width: 768px) {
    .timeline-line {
        left: 20px !important;
        transform: none !important;
    }
    .timeline-item {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 55px !important;
        padding-right: 0 !important;
        padding-bottom: 30px !important;
    }
    .timeline-item.timeline-left {
        padding-right: 0 !important;
    }
    .timeline-item.timeline-right {
        padding-left: 55px !important;
    }
    .timeline-dot {
        left: 11px !important;
        right: auto !important;
    }
}

/* ============================================================
   GLOBAL FAQ TYPOGRAPHY & COLOR HARMONIZATION
   ============================================================ */
.uk-faq-main-title,
.aus-faq-main-title,
.fra-unique-title,
.ger-faq-main-title,
.ire-faq-main-title,
.uae-unique-main-title,
.contact-faq-section h2,
.section-padding .header h2,
.faq-header h2,
.srv-faq-section h2,
[class*="faq-main-title"],
[class*="-unique-main-title"],
[class*="faq-section"] h2,
[class*="faq-wrapper"] h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(2rem, 5vw, 2.75rem) !important;
    font-weight: 700 !important;
    color: #002147 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}

/* FAQ Item Container */
.srv-faq-container > div,
.faq-item,
[class*="faq-item"],
[class*="faq-card"] {
    margin-bottom: 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 33, 71, 0.04) !important;
    transition: all 0.25s ease !important;
}

.faq-item:hover,
[class*="faq-item"]:hover {
    border-color: #002147 !important;
}

/* FAQ Header / Question Bar */
.srv-faq-container > div > div:first-child,
.faq-header,
.faq-question,
.faq-question-btn,
[class*="faq-header"],
[class*="faq-trigger"],
[class*="faq-question"],
[class*="-unique-question"] {
    padding: 18px 24px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.srv-faq-container > div > div:first-child:hover,
.faq-question:hover,
[class*="faq-question"]:hover,
[class*="faq-trigger"]:hover {
    background: #f8fafc !important;
}

/* FAQ Question Heading Text */
.srv-faq-container h4,
.faq-question h4,
.faq-question .question-text,
[class*="faq-question"] h4,
[class*="faq-question"] span,
[class*="faq-trigger"] h4,
[class*="faq-trigger"] span {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #002147 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* FAQ Toggle Icon (+ / arrow) */
.srv-faq-container span,
.faq-icon,
.toggle-icon,
[class*="faq-icon"],
[class*="faq-toggle"] {
    color: #002147 !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
}

/* FAQ Answer Content */
.srv-faq-container > div > div:last-child,
.faq-answer,
.answer-inner,
[class*="faq-answer"],
[class*="faq-inner"],
[class*="-unique-answer-inner"] {
    padding: 22px 25px !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    color: #475569 !important;
    line-height: 1.75 !important;
}

.srv-faq-container p,
.faq-answer p,
.answer-inner p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    color: #475569 !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}


/* ============================================================
   FAQ — equal padding on all sides, every FAQ variant sitewide
   ------------------------------------------------------------
   The generic [class*="faq-*"] block above gave question bars
   18px/24px (unequal) and stacked answer padding (22px/25px)
   on top of each variant's own inner padding. Listed explicitly
   here so every accordion on the site matches:
     .faq-*            -> index.php (home + all city homes)
     .uk-/.aus-/.ger-/.ire-faq-*   -> country pages
     .uae-unique-faq-* / .fra-unique-*  -> UAE + France pages
     .srv-faq-container            -> service pages
     .contact-faq-*                -> contact-us.php
   ============================================================ */

/* --- Question / trigger bar: equal padding all four sides --- */
.faq-item .faq-question,
.uk-faq-item .uk-faq-trigger,
.aus-faq-item .aus-faq-trigger,
.ger-faq-item .ger-faq-trigger,
.ire-faq-item .ire-faq-trigger,
.uae-unique-faq-item .uae-unique-faq-trigger,
.fra-unique-faq-item .fra-unique-faq-question,
.contact-faq-item .contact-faq-trigger,
.srv-faq-container > div > div:first-child {
    padding: 24px !important;
}

/* --- Answer wrapper: animation container only, no padding --- */
.faq-item .faq-answer,
.uk-faq-item .uk-faq-content,
.aus-faq-item .aus-faq-content,
.ger-faq-item .ger-faq-content,
.ire-faq-item .ire-faq-content,
.uae-unique-faq-item .uae-unique-faq-content,
.fra-unique-faq-item .fra-unique-faq-answer {
    padding: 0 !important;
    border-top: none !important;
}

/* --- Answer text: sides + bottom match the question bar --- */
.faq-item .answer-inner,
.uk-faq-item .uk-faq-inner,
.aus-faq-item .aus-faq-inner,
.ger-faq-item .ger-faq-inner,
.ire-faq-item .ire-faq-inner,
.uae-unique-faq-item .uae-unique-faq-inner,
.fra-unique-faq-item .fra-unique-answer-inner {
    padding: 0 24px 24px !important;
    border-top: none !important;
}

/* --- Variants whose answer is a separate panel below a rule --- */
.contact-faq-item .contact-faq-answer,
.srv-faq-container > div > div:last-child {
    padding: 24px !important;
}

/* --- Text never crowds the +/- icon --- */
.faq-item .faq-question .question-text {
    padding-right: 24px !important;
}

.uk-faq-item .uk-faq-icon,
.aus-faq-item .aus-faq-icon,
.ger-faq-item .ger-faq-icon,
.ire-faq-item .ire-faq-icon,
.uae-unique-faq-item .uae-unique-faq-icon,
.fra-unique-faq-item .fra-unique-faq-icon {
    margin-left: 24px !important;
}

@media (max-width: 768px) {
    .faq-item .faq-question,
    .uk-faq-item .uk-faq-trigger,
    .aus-faq-item .aus-faq-trigger,
    .ger-faq-item .ger-faq-trigger,
    .ire-faq-item .ire-faq-trigger,
    .uae-unique-faq-item .uae-unique-faq-trigger,
    .fra-unique-faq-item .fra-unique-faq-question,
    .contact-faq-item .contact-faq-trigger,
    .srv-faq-container > div > div:first-child {
        padding: 18px !important;
    }

    .faq-item .answer-inner,
    .uk-faq-item .uk-faq-inner,
    .aus-faq-item .aus-faq-inner,
    .ger-faq-item .ger-faq-inner,
    .ire-faq-item .ire-faq-inner,
    .uae-unique-faq-item .uae-unique-faq-inner,
    .fra-unique-faq-item .fra-unique-answer-inner {
        padding: 0 18px 18px !important;
    }

    .contact-faq-item .contact-faq-answer,
    .srv-faq-container > div > div:last-child {
        padding: 18px !important;
    }

    .faq-item .faq-question .question-text {
        padding-right: 18px !important;
    }

    .uk-faq-item .uk-faq-icon,
    .aus-faq-item .aus-faq-icon,
    .ger-faq-item .ger-faq-icon,
    .ire-faq-item .ire-faq-icon,
    .uae-unique-faq-item .uae-unique-faq-icon,
    .fra-unique-faq-item .fra-unique-faq-icon {
        margin-left: 18px !important;
    }
}


/* ============================================================
   FAQ section title wrappers — restore centering
   ------------------------------------------------------------
   .uk-faq-header / .aus-faq-header / .ger-faq-header /
   .ire-faq-header hold the "Frequently Asked Questions" <h2>.
   They were being caught by the [class*="faq-header"] selector
   in the FAQ question-bar rule above, which forces
   display:flex + padding + cursor:pointer on them. As a flex
   row the h2 shrinks to its content width and sits at the row
   start, so a heading with text-align:center still rendered
   left. These are section headings, not clickable question
   bars — reset them back to normal blocks.
   ============================================================ */
.uk-faq-header,
.aus-faq-header,
.ger-faq-header,
.ire-faq-header {
    display: block !important;
    padding: 0 !important;
    background: none !important;
    cursor: auto !important;
    text-align: center !important;
}

.uk-faq-header .uk-faq-main-title,
.aus-faq-header .aus-faq-main-title,
.ger-faq-header .ger-faq-main-title,
.ire-faq-header .ire-faq-main-title {
    width: 100% !important;
    text-align: center !important;
}

/* ============================================================
   FAQ SECTION HEADING — EQUAL TOP/BOTTOM SPACING
   ------------------------------------------------------------
   Country + service pages only. The "COMPACT FAQ HEADER
   SPACING GLOBALLY" rule above forces padding-top:0 on every
   FAQ wrapper, so the "Frequently Asked Questions" heading sat
   flush against the top edge of its section: 0px above vs 25px
   below. This block restores symmetry and gives it more room —
   the same clamp() value drives both sides, so the gap above
   the heading always equals the gap below it.
   Home page and .contact-faq-section are deliberately excluded.
   ============================================================ */

/* --- Country pages: heading lives in a *-faq-header wrapper --- */
.uk-faq-header,
.aus-faq-header,
.fra-unique-section-header,
.ger-faq-header,
.ire-faq-header,
.uae-unique-section-header {
    padding-top: clamp(32px, 5vw, 50px) !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: clamp(32px, 5vw, 50px) !important;
}

.uk-faq-header .uk-faq-main-title,
.aus-faq-header .aus-faq-main-title,
.fra-unique-section-header .fra-unique-title,
.ger-faq-header .ger-faq-main-title,
.ire-faq-header .ire-faq-main-title,
.uae-unique-section-header .uae-unique-main-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* UAE has no faq-wrapper section — its container carries an
   inline margin-top that would stack on top of the padding. */
.uae-unique-container:has(> .uae-unique-section-header) {
    margin-top: 0 !important;
}

/* --- Service pages: heading is a bare h2, no wrapper div ---
   Doubled class raises specificity to (0,2,0) so this beats the
   section:has(> div > .srv-faq-container) rule above, which is
   (0,1,1) and forces padding-top:0. */
.srv-faq-section.srv-faq-section {
    padding-top: clamp(32px, 5vw, 50px) !important;
}

.srv-faq-section h2 {
    margin-top: 0 !important;
    margin-bottom: clamp(32px, 5vw, 50px) !important;
}

/* --- Mobile: kill the inter-section gap right above the FAQ ---
   The "GLOBAL RESPONSIVE PHONE SPACING" rule gives every <section>
   margin-bottom:30px on phones. The CTA banner (#f8fafc), the page
   (#fcfcfc) and the FAQ section (#fdfdfd) are all near-identical
   whites, so that gap is not read as a section break — it just
   looks like 30px of extra room above the heading, which is what
   broke the symmetry on mobile (62px above vs 32px below).
   Each selector below resolves to exactly one element: the CTA
   banner that sits immediately before the FAQ block. */
@media (max-width: 768px) {
    section:has(+ .uk-faq-wrapper),
    section:has(+ .aus-faq-wrapper),
    section:has(+ .fra-unique-faq-wrapper),
    section:has(+ .ger-faq-wrapper),
    section:has(+ .ire-faq-wrapper),
    section:has(+ .uae-unique-container),
    section:has(+ .srv-faq-section) {
        margin-bottom: 0 !important;
    }
}

/* ============================================================
   SERVICE PAGES — 5 GOLD STEP HEADINGS IN CRIMSON PRO
   ------------------------------------------------------------
   The "how it works" timeline on each of the 7 service pages
   has exactly 5 gold (#C5A059) <h3> step headings, previously
   Bodoni Moda.
   Scoped through .srv-main-wrapper on purpose: about-us.php
   uses the same .step-box / .approach-bg markup and also has 5
   gold h3s, but it has no .srv-main-wrapper — so it keeps
   Bodoni Moda and is left untouched.
   Specificity (0,2,1) matches the earlier
   ".approach-bg .step-box h3" rule, which sets font-family with
   !important -- so this needs !important too. With both marked
   important at equal specificity, the later block (this one)
   wins.
   ============================================================ */
.srv-main-wrapper .step-box h3 {
    font-family: 'Crimson Pro', 'Bodoni Moda', 'Playfair Display', serif !important;
}

/* ============================================================
   SERVICE PAGES — "HOW ... WORKS" SECTION TITLE, 40% BOLDER
   ------------------------------------------------------------
   Only this one heading per service page -- the big section
   title in the timeline block, marked up as
   <div class="section-header"><h2>How ... Works</h2></div>.
   Weight 500 -> 700 (x1.4, rounded to the nearest 100).

   The source rule (".approach-bg .section-header h2,
   .srv-works-timeline .section-header h2, .srv-works-timeline h2,
   .approach-bg h2") pins it to 500 with !important, so all of
   its shapes are re-asserted here. Root service pages wrap the
   h2 in .section-header; the city copies leave those divs
   unclassed, hence the extra two selectors.

   Every selector is prefixed with .srv-main-wrapper, which
   exists only on the 7 service page types (77 files) and NOT on
   about-us.php -- that page reuses the same .approach-bg markup
   and keeps its 500.
   ============================================================ */
.srv-main-wrapper .section-header h2,
.srv-main-wrapper .srv-works-timeline h2,
.srv-main-wrapper .approach-bg h2 {
    font-weight: 700 !important;
}