/*
Theme Name: Trinity Event
Theme URI: https://trinityadworld.com/
Author: Trinity Adworld Retail
Author URI: https://trinityadworld.com/
Description: Trinity Adworld Retail - Customized retail displays, signage, POSM and shop-in-shop solutions. Premium B2B corporate theme with modern navy and amber signature palette.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trinity-event
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

/* ========================================
   Trinity Adworld Retail - Main Stylesheet
   ======================================== */

/* ---------- CSS Reset & Variables ---------- */
:root {
    --color-primary: #14274e;
    --color-primary-dark: #0a1633;
    --color-primary-light: #2a4573;
    --color-accent: #f08a1e;
    --color-accent-hover: #d97612;
    --color-accent-light: #fdb96c;
    --color-bg: #ffffff;
    --color-bg-light: #f5f7fa;
    --color-bg-alt: #eef1f5;
    --color-dark: #1a1a2e;
    --color-text: #2d3748;
    --color-text-light: #5a6474;
    --color-text-muted: #8893a4;
    --color-border: #e2e8f0;
    --color-border-light: #edf1f5;
    --color-white: #ffffff;
    --color-whatsapp: #25d366;

    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Poppins', sans-serif;

    --shadow-sm: 0 1px 3px rgba(20, 39, 78, 0.06);
    --shadow-md: 0 4px 14px rgba(20, 39, 78, 0.08);
    --shadow-lg: 0 10px 40px rgba(20, 39, 78, 0.12);
    --shadow-xl: 0 20px 60px rgba(20, 39, 78, 0.18);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    --container-max: 1280px;
    --gutter: 24px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
    min-width: 320px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

input, button, textarea, select {
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

a, button {
    -webkit-tap-highlight-color: transparent;
}

a, button {
    min-height: 44px;
    min-width: 44px;
}

button,
.btn,
.mobile-toggle,
.mobile-close,
.filter-btn,
.float-btn,
.project-view,
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

a {
    display: inline-flex;
    align-items: center;
}

/* Non-block / in-flow link elements should use left-align by default */
.footer-links a,
.contact-list a,
.footer-legal a,
.solution-link,
.project-link,
.mobile-nav-link,
.header-phone,
.feature-list a {
    justify-content: flex-start;
}

.nav-link,
.mobile-close,
.project-view,
.social-link,
.mobile-toggle {
    justify-content: center;
}

/* Do not apply min-width / display:inline-flex to rich-text wrappers / containers */
.logo,
.trust-item,
.trust-divider {
    display: flex;
    min-width: 0;
    min-height: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    min-height: 0;
}

.logo-text strong,
.logo-text small {
    display: block;
    line-height: 1.15;
    min-width: 0;
    min-height: 0;
}

.nav-link,
.footer-links a,
.solution-link,
.project-link,
.mobile-nav-link,
.mobile-phone,
.contact-list a,
.footer-legal a,
.header-phone {
    min-height: 44px;
    min-width: 0;
}

/* ---------- WordPress Core Nav Wrapper Neutralization ---------- */
.main-nav .menu,
.main-nav > ul,
.main-nav div,
.main-nav ul.menu {
    margin: 0 !important;
    padding: 0 !important;
}

.main-nav .menu > li,
.main-nav > ul > li,
.main-nav ul.menu > li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    position: relative;
}

.main-nav a,
.main-nav .menu a,
.main-nav ul.menu a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 0;
    margin: 0;
    border: 0;
    background: none;
    font-family: var(--font-heading);
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--color-text);
    position: relative;
    text-decoration: none !important;
    line-height: 1.4;
}

.main-nav a::after,
.main-nav .menu a::after,
.main-nav ul.menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

.main-nav a:hover,
.main-nav .menu a:hover,
.main-nav ul.menu a:hover,
.main-nav a:focus,
.main-nav .menu a:focus,
.main-nav ul.menu a:focus,
.main-nav a.current-menu-item,
.main-nav .menu a.current-menu-item,
.main-nav ul.menu a.current-menu-item,
.main-nav a.active,
.main-nav .menu a.active,
.main-nav ul.menu a.active {
    color: var(--color-primary);
}

.main-nav a:hover::after,
.main-nav .menu a:hover::after,
.main-nav ul.menu a:hover::after,
.main-nav a:focus::after,
.main-nav .menu a:focus::after,
.main-nav ul.menu a:focus::after,
.main-nav a.current-menu-item::after,
.main-nav .menu a.current-menu-item::after,
.main-nav ul.menu a.current-menu-item::after,
.main-nav a.active::after,
.main-nav .menu a.active::after,
.main-nav ul.menu a.active::after {
    width: 100%;
}

/* Prevent WP page-links / generic child anchors inside nav from breaking layout */
.main-nav li a,
.main-nav li {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    float: none !important;
}

/* ---------- WordPress Admin Bar Compatibility ---------- */
html {
    margin-top: 0 !important;
}

@media screen and (min-width: 783px) {
    body.admin-bar .site-header {
        top: 32px;
    }
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

body.admin-bar .hero-section {
    padding-top: calc(160px + 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .hero-section {
        padding-top: calc(160px + 46px);
    }
}

body.admin-bar .page-hero {
    padding-top: calc(170px + 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .page-hero {
        padding-top: calc(170px + 46px);
    }
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary);
}

h1 { font-size: clamp(1.85rem, 5.6vw, 3.5rem); line-height: 1.18; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.45rem, 4.4vw, 2.6rem); line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.08rem, 2.6vw, 1.35rem); }
h4 { font-size: 1rem; }

p {
    orphans: 2;
    widows: 2;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section {
    padding: clamp(52px, 10vw, 110px) 0;
    position: relative;
}

.bg-light {
    background: var(--color-bg-light);
}

/* ---------- Eyebrow / Section Heading Elements ---------- */
.eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--color-accent);
    margin-bottom: 14px;
    position: relative;
    padding-left: 38px;
}

.eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 2px;
    background: var(--color-accent);
}

.eyebrow.text-white::before {
    background: var(--color-accent-light);
}

.text-white {
    color: var(--color-white);
}

.section-header {
    text-align: left;
    max-width: 760px;
    margin-bottom: 60px;
}

.section-title {
    margin-bottom: 18px;
}

.section-desc {
    font-size: 1.05rem;
    color: var(--color-text-light);
    line-height: 1.75;
}

.section-footer {
    text-align: left;
    margin-top: 50px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 13px 26px;
    min-height: 48px;
    min-width: 48px;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    position: relative;
    overflow: hidden;
    line-height: 1.2;
}

.btn-sm {
    padding: 11px 18px;
    min-height: 44px;
    min-width: 44px;
    font-size: 0.88rem;
}

.btn-lg {
    padding: 15px 30px;
    min-height: 54px;
    font-size: 1rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline-primary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline-light {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn-outline-light:hover {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
    transform: translateY(-2px);
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.btn-accent:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-whatsapp {
    background: var(--color-whatsapp);
    color: var(--color-white);
    border-color: var(--color-whatsapp);
}

.btn-whatsapp:hover {
    background: #1ebe5d;
    border-color: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn i {
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.btn:hover i {
    transform: translateX(4px);
}

.btn-whatsapp:hover i,
.btn-accent:hover i {
    transform: translateX(0) scale(1.1);
}

/* ---------- Reveal Animations ---------- */
.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Header & Navigation ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99990;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: var(--transition);
    border-bottom: 1px solid transparent;
    padding-top: env(safe-area-inset-top);
    max-width: 100%;
    overflow: visible;
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    border-bottom-color: var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2.2vw, 34px);
    padding: 16px 0;
    transition: padding 0.3s ease;
    width: 100%;
    max-width: 100%;
}

.site-header.scrolled .header-inner {
    padding: 10px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    z-index: 2;
    min-width: 0;
    margin-right: clamp(14px, 2vw, 26px);
}

.logo a,
.logo {
    padding: 0;
    margin: 0;
    max-width: 360px;
}

.logo-text strong {
    white-space: nowrap;
}

.logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    border-radius: var(--radius-md);
    position: relative;
}

.logo-mark::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.logo-text strong {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--color-primary);
}

.logo-text small {
    font-family: var(--font-primary);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-light);
    letter-spacing: 0.4px;
}

.main-nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    overflow: visible;
}

.main-nav .nav-list,
.main-nav ul,
.main-nav > div > ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.8vw, 36px);
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.main-nav .nav-list > li,
.main-nav ul > li,
.main-nav > div > ul > li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    position: relative;
    flex-shrink: 0;
}

/* Base / generic "nav-list" (not inside desktop .main-nav — which is the mobile slide-in UL or
   footer ULs) use block/column layout so items stack vertically instead of row. Prevents the
   exact bug in your screenshot where mobile menu items appeared as a horizontal row
   (About Us / Solutions / Projects / Cont...) because the old rule matched `.nav-list` globally. */
.nav-list:not(.main-nav *) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 100%;
}

.nav-list:not(.main-nav *) > li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    flex: 0 0 auto;
}

/* ---------- Mobile slide-in menu: UL + LI base styling ----------
   Covers all possible mobile rendering paths: header.php assigned wp_nav_menu
   (menu_class=mobile-nav-list menu at L123), functions.php fallback
   wp_page_menu() emits class=children/page_item_has_children normalized to
   mobile-nav-list.menu, plus any 3rd-party walker that strips classes and leaves
   bare <ul> inside #mobileMenu. */
.mobile-nav-list,
#mobileMenu > nav > ul,
#mobileMenu nav ul,
.mobile-menu > nav > ul,
.mobile-menu > nav ul:first-of-type,
.mobile-menu ul.menu,
.mobile-menu ul.mobile-nav-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.mobile-nav-list > li,
#mobileMenu > nav > ul > li,
#mobileMenu nav li:not(ul ul li),
.mobile-menu > nav > ul > li,
.mobile-menu ul.menu > li,
.mobile-menu ul.mobile-nav-list > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--color-border-light, #e9eaf0) !important;
}

.mobile-nav-list > li:last-child,
#mobileMenu > nav > ul > li:last-child,
.mobile-menu > nav > ul > li:last-child,
.mobile-menu ul.menu > li:last-child {
    border-bottom: none !important;
}

/* Generic anchors inside mobile slide-in top-level and nested UL: full-width block. */
#mobileMenu li a,
.mobile-menu li a,
#mobileMenu li a.nav-link,
.mobile-menu li a.mobile-nav-link,
.mobile-nav-list li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 17px 48px 17px 4px !important;   /* 48px right gutter for the JS-injected chevron toggle (44px wide). */
    margin: 0 !important;
    color: var(--color-text, #1e2433) !important;
    font-family: var(--font-heading, 'Poppins', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-decoration: none !important;
}

/* Hover / active color for mobile nav row anchors */
#mobileMenu li a:hover,
.mobile-menu li a:hover,
.mobile-nav-list li a:hover {
    color: var(--color-accent, #f08a1e) !important;
}

/* Marker bullets / ::after nav underline from desktop nav must not appear on mobile rows. */
#mobileMenu li a::after,
.mobile-menu li a::after {
    display: none !important;
}


.main-nav ul > li::marker,
.main-nav > div > ul > li::marker {
    content: '';
}

/* Accept wp_page_menu()'s .children class + .menu-item-has-children + .page_item_has_children
   as valid dropdown triggers — covers both assigned custom nav menus AND Pages hierarchy
   fallback when no Primary Menu is assigned in Menus → Manage Locations. */
.main-nav ul li.page_item_has_children::marker,
.main-nav ul li.page_item_has_children {
    content: '';
    list-style: none;
}

/* ---- DESKTOP DROPDOWN / SUB-MENU ---- */
.site-header,
.header-inner,
.main-nav,
.main-nav > div,
.main-nav ul,
.main-nav ul > li {
    overflow: visible !important;
}

.main-nav {
    overflow: visible !important;
    z-index: 5000;
    position: relative;
}

/* Parent items with a sub-menu get a chevron indicator.
   On mobile (iOS 12-15.3, Android Chrome <105) the CSS ':has()' pseudo-class is
   UNSUPPORTED — so we ALSO mark those parents via JS with the class
   `.trinity-mobile-has-ul` / the standard WordPress `.menu-item-has-children` and
   `.page_item_has_children` classes. Selectors below cover both cases, and the
   class-based selectors always win on older devices where :has() fails silently. */
.main-nav ul > li.menu-item-has-children > a::before,
.main-nav > div > ul > li.menu-item-has-children > a::before,
.main-nav ul > li.page_item_has_children > a::before,
.main-nav > div > ul > li.page_item_has_children > a::before,
#mobileMenu.open ul li.trinity-mobile-has-ul > a::before,
.mobile-menu.open ul li.trinity-mobile-has-ul > a::before,
.main-nav ul.menu > li.menu-item-has-children > a::before,
.main-nav ul.menu > li.page_item_has_children > a::before,
.main-nav ul.menu > li.trinity-mobile-has-ul > a::before,
.main-nav ul.menu > li:has(> ul.sub-menu) > a::before,
.main-nav ul.menu > li:has(> ul.children) > a::before {
    content: '\f078'; /* FontAwesome chevron-down */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    display: inline-block;
    margin-right: 6px;
    font-size: 0.7rem;
    color: var(--color-accent);
    transition: transform 0.25s ease, color 0.25s ease;
}

.main-nav ul > li.menu-item-has-children:hover > a::before,
.main-nav > div > ul > li.menu-item-has-children:hover > a::before,
.main-nav ul > li.page_item_has_children:hover > a::before,
.main-nav > div > ul > li.page_item_has_children:hover > a::before,
.main-nav ul > li.menu-item-has-children:focus-within > a::before,
.main-nav ul > li.page_item_has_children:focus-within > a::before {
    transform: rotate(180deg);
    color: var(--color-primary);
}

/* The actual submenu dropdown (desktop) */
.main-nav ul ul.sub-menu,
.main-nav ul ul.children,
.main-nav > div > ul ul.sub-menu,
.main-nav > div > ul ul.children,
.main-nav ul.menu li > ul {
    position: absolute !important;
    top: 100%;
    left: 0;
    min-width: 260px;
    max-width: 320px;
    width: max-content;
    margin: 0 !important;
    padding: 10px !important;
    list-style: none !important;
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px rgba(15, 32, 75, 0.18), 0 2px 10px rgba(15, 32, 75, 0.07);
    border: 1px solid rgba(15, 32, 75, 0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s linear;
}

/* Show the submenu on parent hover or focus-within.
   Desktop only. Also use parent classes menu-item-has-children / page_item_has_children /
   trinity-mobile-has-ul / the generic structure ul li > ul selector so we don't rely on
   :has() where possible; :has() selectors are kept for robustness on supported browsers. */
.main-nav ul > li.menu-item-has-children:hover > ul.sub-menu,
.main-nav ul > li.page_item_has_children:hover > ul.children,
.main-nav ul > li.page_item_has_children:hover > ul.sub-menu,
.main-nav > div > ul > li.menu-item-has-children:hover > ul.sub-menu,
.main-nav > div > ul > li.page_item_has_children:hover > ul.children,
.main-nav ul.menu li.menu-item-has-children:hover > ul.sub-menu,
.main-nav ul.menu li.page_item_has_children:hover > ul.children,
.main-nav ul.menu li.trinity-mobile-has-ul:hover > ul,
.main-nav ul.menu li:has(> ul.sub-menu):hover > ul,
.main-nav ul.menu li:has(> ul.children):hover > ul,
.main-nav ul > li.menu-item-has-children:focus-within > ul.sub-menu,
.main-nav ul > li.page_item_has_children:focus-within > ul.children,
.main-nav > div > ul > li.menu-item-has-children:focus-within > ul.sub-menu,
.main-nav > div > ul > li.page_item_has_children:focus-within > ul.children {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Second-level+ submenus fly out to the RIGHT of their parent */
.main-nav ul.sub-menu li.menu-item-has-children > ul.sub-menu,
.main-nav ul.children li.page_item_has_children > ul.children,
.main-nav ul.sub-menu li.page_item_has_children > ul.children {
    left: calc(100% + 6px);
    top: -10px;
}

/* Sub-menu list items */
.main-nav ul.sub-menu > li,
.main-nav ul.children > li,
.main-nav ul.menu li > ul > li {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    flex-shrink: 0;
}

.main-nav ul.sub-menu > li::marker,
.main-nav ul.children > li::marker {
    content: '';
}

/* Sub-menu anchor links */
.main-nav ul.sub-menu a,
.main-nav ul.children a,
.main-nav ul.menu li > ul a {
    display: block !important;
    width: 100%;
    padding: 10px 14px !important;
    min-height: 0 !important;
    text-align: left;
    justify-content: flex-start !important;
    align-items: center !important;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    position: relative;
    transition: background 0.2s ease, color 0.2s ease, padding 0.2s ease;
    background: transparent;
    border: none;
}

.main-nav ul.sub-menu a::after,
.main-nav ul.children a::after {
    display: none !important;
}

.main-nav ul.sub-menu a:hover,
.main-nav ul.children a:hover,
.main-nav ul.menu li > ul a:hover,
.main-nav ul.sub-menu a:focus,
.main-nav ul.children a:focus,
.main-nav ul.sub-menu li.current-menu-item > a,
.main-nav ul.sub-menu li.current_page_item > a,
.main-nav ul.sub-menu li.current-menu-parent > a,
.main-nav ul.sub-menu li.current-menu-ancestor > a,
.main-nav ul.children li.current_page_item > a,
.main-nav ul.children li.current_page_parent > a,
.main-nav ul.children li.current_page_ancestor > a {
    background: var(--color-bg-light);
    color: var(--color-primary);
    padding-left: 20px !important;
    font-weight: 600;
}

.main-nav ul.sub-menu a:hover::before,
.main-nav ul.children a:hover::before,
.main-nav ul.sub-menu li.current-menu-item > a::before,
.main-nav ul.sub-menu li.current_page_item > a::before,
.main-nav ul.children li.current_page_item > a::before,
.main-nav ul.sub-menu li.current-menu-parent > a::before,
.main-nav ul.children li.current_page_parent > a::before {
    opacity: 1;
    transform: translateX(0);
}

/* Sub-menu items that themselves have children get a RIGHT chevron.
   Uses class-based selectors (menu-item-has-children / page_item_has_children /
   trinity-mobile-has-ul) so the chevron-right arrow is present even on older
   desktop Chrome / Safari releases that do not support :has(). */
.main-nav ul.sub-menu li.menu-item-has-children > a::after,
.main-nav ul.children li.page_item_has_children > a::after,
.main-nav ul.sub-menu li.page_item_has_children > a::after,
.main-nav ul.children li.menu-item-has-children > a::after,
.main-nav ul.menu li ul li.trinity-mobile-has-ul > a::after,
.main-nav ul.menu li ul li.menu-item-has-children > a::after,
.main-nav ul.menu li ul li.page_item_has_children > a::after,
.main-nav ul.menu li ul li:has(> ul) > a::after,
.main-nav ul.menu li ul li:has(> ul.sub-menu) > a::after,
.main-nav ul.menu li ul li:has(> ul.children) > a::after {
    content: '\f054'; /* chevron-right */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    display: inline-block !important;
    position: absolute !important;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: var(--color-muted);
    font-size: 0.62rem;
}

.main-nav ul.sub-menu li.menu-item-has-children:hover > a::after,
.main-nav ul.children li.page_item_has_children:hover > a::after,
.main-nav ul.sub-menu li.page_item_has_children:hover > a::after,
.main-nav ul.children li.menu-item-has-children:hover > a::after,
.main-nav ul.menu li ul li.trinity-mobile-has-ul:hover > a::after,
.main-nav ul.menu li ul li.menu-item-has-children:hover > a::after,
.main-nav ul.menu li ul li.page_item_has_children:hover > a::after,
.main-nav ul.menu li ul li:has(> ul):hover > a::after {
    color: var(--color-accent);
    transform: translateY(-50%) translateX(2px);
}

/* ---- MOBILE SLIDE-IN MENU ACCORDION (sub-menu collapsible) ---- */
.main-nav.open ul ul.sub-menu,
.main-nav.open ul ul.children,
#mobileMenu.open ul ul.sub-menu,
#mobileMenu.open ul ul.children,
.mobile-menu.open ul ul.sub-menu,
.mobile-menu.open ul ul.children,
.main-nav.open > div > ul ul.sub-menu,
.main-nav.open > div > ul ul.children,
#mobileMenu.open > nav > ul ul.sub-menu,
#mobileMenu.open > nav > ul ul.children,
/* Fallback selectors for any nested <ul> where a plugin/custom walker stripped the
   standard class attribute entirely — matches DOM structure regardless of class name. */
.main-nav.open ul ul,
#mobileMenu.open ul ul,
.mobile-menu.open ul ul {
    position: static !important;
    inset: auto;
    min-width: 0;
    max-width: none;
    width: 100%;
    margin: 0 !important;
    padding: 6px 0 6px 16px !important;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    display: none;
    flex-direction: column;
    gap: 4px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.main-nav.open ul li.mobile-submenu-open > ul.sub-menu,
.main-nav.open ul li.mobile-submenu-open > ul.children,
#mobileMenu.open ul li.mobile-submenu-open > ul.sub-menu,
#mobileMenu.open ul li.mobile-submenu-open > ul.children,
.mobile-menu.open ul li.mobile-submenu-open > ul.sub-menu,
.mobile-menu.open ul li.mobile-submenu-open > ul.children,
.main-nav.open > div > ul li.mobile-submenu-open > ul.sub-menu,
.main-nav.open > div > ul li.mobile-submenu-open > ul.children,
/* Last-resort CSS display:flex rule — even if sub <ul> has zero class name at all,
   it still expands correctly when the parent <li> has .mobile-submenu-open */
#mobileMenu.open ul li.mobile-submenu-open > ul,
.mobile-menu.open ul li.mobile-submenu-open > ul,
.main-nav.open ul li.mobile-submenu-open > ul {
    display: flex !important;
}

.main-nav.open ul.sub-menu a,
.main-nav.open ul.children a,
#mobileMenu.open ul.sub-menu a,
#mobileMenu.open ul.children a,
.main-nav.open ul.menu li > ul a,
.mobile-menu.open ul.menu li > ul a,
.main-nav.open ul a,
#mobileMenu.open ul li ul a,
.mobile-menu.open ul li ul a {
    padding: 10px 14px 10px 10px !important;
    font-size: 0.92rem;
    text-align: left;
    color: var(--color-text);
    border-left: 2px solid rgba(240, 138, 30, 0.25);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    width: 100%;
    display: block !important;
}

.main-nav.open ul.sub-menu a:hover,
.main-nav.open ul.children a:hover,
#mobileMenu.open ul.sub-menu a:hover,
#mobileMenu.open ul.children a:hover,
.main-nav.open ul.sub-menu a:focus,
.main-nav.open ul.children a:focus,
#mobileMenu.open ul a:hover,
.mobile-menu.open ul li ul a:hover {
    background: var(--color-bg-light);
    border-left-color: var(--color-accent);
    color: var(--color-primary);
}

.main-nav.open li.mobile-submenu-open > .mobile-submenu-toggle i,
#mobileMenu.open li.mobile-submenu-open > .mobile-submenu-toggle i,
.mobile-menu.open li.mobile-submenu-open > .mobile-submenu-toggle i {
    transform: rotate(180deg);
    color: var(--color-primary);
}

/* Mobile parent-toggle chevron button (injected via JS) */
.mobile-submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 48px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--color-accent);
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    z-index: 2;
}

.mobile-submenu-toggle i {
    transition: transform 0.3s ease;
}

.main-nav.open ul li.menu-item-has-children {
    position: relative;
}

#mobileMenu.open ul li.menu-item-has-children,
.mobile-menu.open ul li.menu-item-has-children,
#mobileMenu.open ul li.page_item_has_children,
.mobile-menu.open ul li.page_item_has_children,
.main-nav.open ul li.page_item_has_children,
/* Marker class injected by JS (see initMobileMenu in main.js) on every LI that has a
   direct-child <ul>. This is supported on every browser back to IE9, so even if the
   user's phone runs iOS 12 / Android 9 (devices that do NOT support the CSS :has()
   pseudo-class at all), chevrons still position correctly inside each parent row. */
#mobileMenu.open ul li.trinity-mobile-has-ul,
.mobile-menu.open ul li.trinity-mobile-has-ul,
.main-nav.open ul li.trinity-mobile-has-ul,
/* :has() selectors kept as LAST RESORT for modern browsers where all other class
   detection fails (e.g. 3rd-party walker strips classes). */
#mobileMenu.open ul li:has(> ul),
.mobile-menu.open ul li:has(> ul),
.main-nav.open ul li:has(> ul) {
    position: relative;
}

/* ---- Responsive: on tablets and phones, disable desktop flyout ---- */
@media (max-width: 1024px) {
    .main-nav:not(.open) ul ul.sub-menu,
    .main-nav:not(.open) ul ul.children,
    .main-nav:not(.open) ul.menu li > ul,
    .main-nav:not(.open) ul ul,
    #mobileMenu:not(.open) ul ul.sub-menu,
    #mobileMenu:not(.open) ul ul.children,
    #mobileMenu:not(.open) ul ul,
    .mobile-menu:not(.open) ul ul.sub-menu,
    .mobile-menu:not(.open) ul ul.children,
    .mobile-menu:not(.open) ul ul {
        display: none !important;
    }
}

.nav-link {
    font-family: var(--font-heading);
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--color-text);
    position: relative;
    padding: 6px 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: visible;
}

.header-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-primary);
    flex-shrink: 0;
    min-width: 0;
}

.header-phone i {
    color: var(--color-accent);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.header-phone:hover {
    color: var(--color-accent);
}

.header-actions .btn {
    flex-shrink: 0;
    min-width: 0;
}

.mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 99999;
    color: var(--color-primary);
    overflow: visible;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.mobile-toggle span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 26px;
    height: 2.8px;
    min-height: 2.8px;
    background: var(--color-primary) !important;
    border-radius: 3px;
    transition: var(--transition);
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0;
    transform-origin: center;
}

.mobile-toggle:hover {
    background: var(--color-bg-light);
}

/* Hamburger-to-close (✕) animation when mobile menu is open */
.mobile-toggle.is-open span:nth-child(1) {
    transform: translateY(8.8px) rotate(45deg);
    background: var(--color-primary) !important;
    width: 28px;
}

.mobile-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scaleX(0);
    width: 0;
    margin: 0;
}

.mobile-toggle.is-open span:nth-child(3) {
    transform: translateY(-8.8px) rotate(-45deg);
    background: var(--color-primary) !important;
    width: 28px;
}

@media (max-width: 768px) {
    .mobile-toggle.is-open span:nth-child(1) {
        transform: translateY(7.8px) rotate(45deg);
    }
    .mobile-toggle.is-open span:nth-child(3) {
        transform: translateY(-7.8px) rotate(-45deg);
    }
}

@media (max-width: 560px) {
    .mobile-toggle.is-open span:nth-child(1) {
        transform: translateY(7.8px) rotate(45deg);
        width: 24px;
    }
    .mobile-toggle.is-open span:nth-child(3) {
        transform: translateY(-7.8px) rotate(-45deg);
        width: 24px;
    }
}

@media (max-width: 380px) {
    .mobile-toggle.is-open span:nth-child(1) {
        transform: translateY(7.2px) rotate(45deg);
        width: 22px;
    }
    .mobile-toggle.is-open span:nth-child(3) {
        transform: translateY(-7.2px) rotate(-45deg);
        width: 22px;
    }
}

/* ---------- Mobile Menu ---------- */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(400px, 88%);
    height: 100vh;      /* IE11 / iOS <15 fallback */
    height: 100dvh;     /* modern browsers/iOS 15+ correct full-height including dynamic address bar */
    max-height: 100vh;
    max-height: 100dvh;
    background: var(--color-white);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

/* Logged-in WordPress users get a 32px admin bar at the top; shift + shrink the mobile
   slide-in so the close button is never hidden under the WP admin toolbar. Also
   handles RTL just in case via transform translate rather than inset override. */
@media (min-width: 1px) {
    html[class*='admin-bar'] body .mobile-menu {
        top: 32px;
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
    }
    html[class*='admin-bar'] body .mobile-menu-overlay {
        top: 32px;
    }
}
@media screen and (max-width: 782px) {
    html[class*='admin-bar'] body .mobile-menu {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
        max-height: calc(100vh - 46px);
        max-height: calc(100dvh - 46px);
    }
    html[class*='admin-bar'] body .mobile-menu-overlay {
        top: 46px;
    }
}

/* iOS 11+ home-indicator safe area bottom padding so menu-footer buttons are not clipped */
.mobile-menu {
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-menu.open {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 26px;
    border-bottom: 1px solid var(--color-border-light);
}

.mobile-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
}

.mobile-close:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
}

.mobile-menu nav {
    flex: 1;
    padding: 18px 26px;
    overflow-y: auto;
}

.mobile-nav-list li {
    border-bottom: 1px solid var(--color-border-light);
}

.mobile-nav-link {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    padding: 17px 4px;
}

.mobile-nav-link:hover {
    color: var(--color-accent);
}

.mobile-menu-footer {
    padding: 20px 26px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mobile-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-primary);
    padding: 12px 4px;
}

.mobile-phone i {
    color: var(--color-accent);
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 39, 78, 0.55);
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- Hero Section ---------- */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 160px 0 100px;
    overflow: hidden;
    padding-top: calc(160px + env(safe-area-inset-top));
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(240, 138, 30, 0.16) 0%, transparent 50%),
        radial-gradient(circle at 85% 80%, rgba(20, 39, 78, 0.4) 0%, transparent 60%);
    background-color: #0a1633;
}

.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(10, 22, 51, 0.92) 0%, rgba(20, 39, 78, 0.82) 50%, rgba(10, 22, 51, 0.9) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'><circle cx='40' cy='40' r='1'/><path d='M0 40h80M40 0v80'/></g></svg>");
    background-size: auto, 80px 80px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 22, 51, 0.4) 0%, rgba(20, 39, 78, 0.25) 100%);
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 100%;
    color: var(--color-white);
}

.hero-title {
    color: var(--color-white);
    margin: 10px 0 20px;
    letter-spacing: -0.5px;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.75;
    margin-bottom: 36px;
    max-width: 620px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 50px;
}

/* ---- Hero Right Image ---- */
.hero-image {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hero-image-frame {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(255, 255, 255, 0.06);
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease;
    animation: heroFloat 6s ease-in-out infinite;
}

.hero-image-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(240, 138, 30, 0.18) 0%, transparent 45%, rgba(20, 39, 78, 0.25) 100%);
    z-index: 2;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.hero-image-frame:hover {
    transform: perspective(1200px) rotateY(-2deg) rotateX(0deg) translateY(-6px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(240, 138, 30, 0.25);
}

.hero-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.hero-image-frame:hover .hero-image-img {
    transform: scale(1.06);
}

.hero-image-badge {
    position: absolute;
    left: -20px;
    bottom: 30px;
    z-index: 6;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: var(--radius-lg);
    padding: 14px 18px 14px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 15px 40px rgba(10, 22, 51, 0.35);
    min-width: 0;
    min-height: 0;
}

.hero-image-badge i {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-size: 1.2rem;
}

.hero-image-badge strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

.hero-image-badge small {
    display: block;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    color: var(--color-text-light);
    margin-top: 2px;
    line-height: 1.2;
}

@keyframes heroFloat {
    0%, 100% { transform: perspective(1200px) rotateY(-4deg) rotateX(2deg) translateY(0); }
    50%      { transform: perspective(1200px) rotateY(-4deg) rotateX(2deg) translateY(-14px); }
}

/* Hero carousel wrapper — lives inside hero-image-frame, fills it exactly */
.hero-carousel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    border-radius: inherit;
}

.hero-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.7s linear;
    transform: scale(1.02);
    pointer-events: none;
}

.hero-carousel-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
    z-index: 2;
}

.hero-carousel-slide img.hero-image-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s ease !important;
}

.hero-carousel-slide.is-active img.hero-image-img {
    /* gentle Ken-Burns-like progressive zoom during visible slide dwell */
    animation: heroKenBurns linear forwards;
}

@keyframes heroKenBurns {
    0%   { transform: scale(1.02); }
    100% { transform: scale(1.12); }
}

.hero-carousel.single-slide .hero-carousel-slide.is-active img.hero-image-img {
    animation: none;
}

/* Prev / Next arrow buttons */
.hero-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgba(15, 32, 75, 0.28);
    color: var(--color-primary);
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    font-size: 0.95rem;
    transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    opacity: 0;
}

.hero-carousel-arrow--prev { left: 16px; }
.hero-carousel-arrow--next { right: 16px; }

.hero-image-frame:hover .hero-carousel-arrow,
.hero-carousel:focus-within .hero-carousel-arrow {
    opacity: 1;
}

.hero-carousel-arrow:hover {
    background: linear-gradient(135deg, var(--color-accent) 0%, #ff6b35 100%);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 14px 32px rgba(240, 138, 30, 0.38);
}

.hero-carousel-arrow:active {
    transform: translateY(-50%) scale(0.96);
}

/* Pagination dots */
.hero-carousel-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 5;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 26px rgba(15, 32, 75, 0.22);
}

.hero-carousel-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: rgba(15, 32, 75, 0.24);
    cursor: pointer;
    display: inline-block;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease, transform 0.25s ease;
    outline: none;
}

.hero-carousel-dot:hover {
    background: rgba(240, 138, 30, 0.55);
    transform: scale(1.12);
}

.hero-carousel-dot.is-active {
    width: 26px;
    background: linear-gradient(135deg, var(--color-accent) 0%, #ff6b35 100%);
    box-shadow: 0 4px 12px rgba(240, 138, 30, 0.45);
}

@media (max-width: 1024px) {
    .hero-carousel-arrow {
        width: 40px; height: 40px; min-width: 40px; min-height: 40px;
        opacity: 1; /* on tablets always show — hover less common */
    }
    .hero-carousel-arrow--prev { left: 12px; }
    .hero-carousel-arrow--next { right: 12px; }
    .hero-carousel-dots { bottom: 18px; gap: 8px; padding: 6px 12px; }
}

@media (max-width: 768px) {
    .hero-carousel-arrow { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 0.85rem; }
    .hero-carousel-arrow--prev { left: 10px; }
    .hero-carousel-arrow--next { right: 10px; }
    .hero-carousel-dots {
        bottom: 16px;
        gap: 7px;
        padding: 6px 10px;
    }
    .hero-carousel-dot { width: 7px; height: 7px; min-width: 7px; min-height: 7px; }
    .hero-carousel-dot.is-active { width: 22px; }
}

@media (max-width: 560px) {
    .hero-carousel-arrow {
        width: 34px; height: 34px; min-width: 34px; min-height: 34px; font-size: 0.8rem;
    }
    .hero-carousel-dots {
        bottom: 12px;
        padding: 5px 10px;
    }
    .hero-carousel-dot { width: 6px; height: 6px; min-width: 6px; min-height: 6px; }
    .hero-carousel-dot.is-active { width: 20px; }
}

/* Trust line */
.trust-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--font-heading);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 0;
}

.trust-item i {
    color: var(--color-accent);
}

.trust-divider {
    color: var(--color-accent);
    font-weight: 700;
    min-width: 0;
    min-height: 0;
    display: inline;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), transparent);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 40px;
    background: var(--color-accent);
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0% { top: -40px; }
    100% { top: 100%; }
}

/* ---------- About / Company Introduction Section ---------- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.about-images {
    position: relative;
}

.img-collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    aspect-ratio: 5 / 6;
    gap: 16px;
}

.collage-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition-slow);
}

.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.collage-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.collage-item:hover img {
    transform: scale(1.08);
}

.collage-item-1 {
    grid-column: 1 / 8;
    grid-row: 1 / 8;
}

.collage-item-2 {
    grid-column: 8 / 13;
    grid-row: 1 / 6;
}

.collage-item-3 {
    grid-column: 1 / 6;
    grid-row: 8 / 13;
}

.collage-item-4 {
    grid-column: 6 / 13;
    grid-row: 6 / 13;
}

/* ---------- About Us – Extended Who We Are (staggered collage variant) ---------- */
.about-who-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 70px;
    align-items: center;
}

.about-who-content .section-title {
    margin-top: 12px;
    margin-bottom: 22px;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1.15;
    color: var(--color-primary);
}

.about-who-content > p {
    color: var(--color-text-light);
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0 0 18px;
}

.about-who-highlights {
    margin: 30px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
    list-style: none;
    padding: 0;
}

.about-who-highlights li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.95rem;
}

.about-who-highlights li i {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.about-who-collage {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: repeat(12, 1fr);
    gap: 18px;
    aspect-ratio: 4 / 5;
}

.about-who-collage .collage-photo {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 22px 55px rgba(15, 32, 75, 0.18);
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.about-who-collage .collage-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(0.2, 0.72, 0.2, 1);
}

.about-who-collage .collage-photo:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 70px rgba(15, 32, 75, 0.26);
}

.about-who-collage .collage-photo:hover img {
    transform: scale(1.07);
}

/* Placement matches the user's reference screenshot: 1 large left + 3 staggered right */
.about-who-collage .collage-photo:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 10;  }
.about-who-collage .collage-photo:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 5;   }
.about-who-collage .collage-photo:nth-child(3) { grid-column: 2 / 3; grid-row: 5 / 13;  }
.about-who-collage .collage-photo:nth-child(4) { grid-column: 1 / 2; grid-row: 10 / 13; }

/* Narrow right-column product shots need contain so the full unit stays visible. */
.about-who-collage .collage-photo:nth-child(2),
.about-who-collage .collage-photo:nth-child(3) {
    background: #ffffff;
}

.about-who-collage .collage-photo:nth-child(2) img,
.about-who-collage .collage-photo:nth-child(3) img {
    display: block;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center center;
    padding: 10px;
}

.about-who-collage .collage-photo:nth-child(3) img {
    padding: 0;
    object-position: center bottom;
    transform: scale(1.12);
    transform-origin: center bottom;
}

.about-who-collage .collage-photo:nth-child(3):hover img {
    transform: scale(1.18);
}

.about-who-collage .collage-photo:nth-child(4) {
    background: #ffffff;
}

.about-who-collage .collage-photo:nth-child(4) img {
    display: block;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center center;
    padding: 6px;
    transform: scale(1.03);
    transform-origin: center center;
}

.about-who-collage .collage-photo:nth-child(4):hover img {
    transform: scale(1.08);
}

/* ---------- About Us – Our Core Values (6 cards × icon badge gradient) ---------- */
.values-section {
    background: linear-gradient(180deg, #f7f9fd 0%, #f3f6fc 100%);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 50px;
}

.value-card {
    background: var(--color-white);
    border-radius: 26px;
    padding: 36px 32px;
    border: 1px solid rgba(20, 41, 87, 0.06);
    box-shadow: 0 12px 30px rgba(15, 32, 75, 0.06);
    transition: transform 0.45s cubic-bezier(0.2, 0.72, 0.2, 1), box-shadow 0.45s ease, border-color 0.45s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 250px;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 55px rgba(15, 32, 75, 0.14);
    border-color: rgba(240, 138, 30, 0.25);
}

.value-icon {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    background: linear-gradient(140deg, rgba(240, 138, 30, 0.92) 0%, rgba(255, 173, 71, 0.22) 100%);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 22px rgba(240, 138, 30, 0.32);
    transition: transform 0.4s ease;
}

.value-card:hover .value-icon {
    transform: scale(1.08) rotate(-4deg);
}

.value-card h4 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 6px 0 2px;
}

.value-card p {
    color: var(--color-text-light);
    font-size: 0.98rem;
    line-height: 1.78;
    margin: 0;
}

/* ---------- About Us – Our Aim section (Mission + Vision cards) ---------- */
.aim-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 70px;
    align-items: center;
}

.aim-content > p.aim-lead {
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1.9;
    margin: 16px 0 36px;
    font-weight: 500;
}

.aim-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.aim-pillar {
    background: var(--color-white);
    border-radius: 24px;
    padding: 30px 26px;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
    position: relative;
    overflow: hidden;
}

.aim-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s ease;
}

.aim-pillar:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(240, 138, 30, 0.25);
}

.aim-pillar:hover::before {
    transform: scaleX(1);
}

.aim-pillar .pillar-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(240, 138, 30, 0.12), rgba(240, 138, 30, 0.04));
    color: var(--color-accent);
    font-size: 1.3rem;
    margin-bottom: 18px;
}

.aim-pillar h5 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 10px;
}

.aim-pillar p {
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.78;
    margin: 0;
}

.aim-image-frame {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 30px 70px rgba(15, 32, 75, 0.22);
}

.aim-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.aim-image-frame:hover img {
    transform: scale(1.06);
}

/* Values + Aim responsive fallbacks handled later in media queries (already exist for about-grid/why-grid). Add overrides below only where needed. */

/* Solution + Industry single CPT detail page — show image at native height (full height, no crop) */
.solution-img-native.why-img-frame {
    aspect-ratio: auto !important;
    line-height: 0;
}

.solution-img-native.why-img-frame::after {
    display: none;
}

.solution-img-native.why-img-frame img {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    transition: transform 1s ease;
}

.solution-img-native.why-img-frame:hover img {
    transform: scale(1.02);
}

/* Single CPT details — align sidebar content to top (not center) so
   Quick Summary + CTA cards sit flush with start of article content. */
.single-content .why-grid {
    align-items: flex-start;
}

.single-content .why-image {
    position: sticky;
    top: 104px;
}


.feature-list {
    margin: 28px 0 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--color-text);
    font-weight: 500;
}

.feature-list i {
    color: var(--color-accent);
    font-size: 1.1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ---------- Solutions Section ---------- */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.solution-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
    transition: var(--transition-slow);
    position: relative;
    display: flex;
    flex-direction: column;
}

.solution-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.solution-card:hover::before {
    transform: scaleX(1);
}

.solution-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    width: 54px;
    height: 54px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.3rem;
    box-shadow: 0 4px 14px rgba(20, 39, 78, 0.3);
}

.solution-img-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
}

.solution-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 39, 78, 0.15) 0%, transparent 50%);
}

.solution-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.solution-card:hover .solution-img-wrap img {
    transform: scale(1.08);
}

.solution-title {
    padding: 24px 26px 0;
}

.solution-desc {
    padding: 12px 26px 20px;
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.65;
    flex: 1;
}

.solution-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 26px 28px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-accent);
}

.solution-link:hover {
    color: var(--color-accent-hover);
    gap: 12px;
}

/* ---------- Why Choose Us Section ---------- */
.why-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 70px;
    align-items: center;
}

.why-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 40px;
}

.why-feature {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    transition: var(--transition);
}

.why-feature:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateX(6px);
}

.why-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    background: linear-gradient(135deg, rgba(240, 138, 30, 0.12) 0%, rgba(240, 138, 30, 0.04) 100%);
    color: var(--color-accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: var(--transition);
}

.why-feature:hover .why-icon {
    background: var(--color-accent);
    color: var(--color-white);
    transform: scale(1.05);
}

.why-text h4 {
    font-size: 1.02rem;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.why-text p {
    color: var(--color-text-light);
    font-size: 0.92rem;
    line-height: 1.6;
}

.why-image {
    position: relative;
}

.why-img-frame {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    aspect-ratio: 4 / 5;
}

.why-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 39, 78, 0.15), transparent 40%);
}

.why-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Projects Section ---------- */
.project-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 42px;
}

.filter-btn {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text);
    padding: 11px 20px;
    min-height: 44px;
    min-width: 44px;
    border-radius: 50px;
    border: 1.5px solid var(--color-border);
    background: var(--color-white);
    transition: var(--transition);
}

.filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 14px rgba(20, 39, 78, 0.2);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.project-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
    transition: var(--transition-slow);
}

.project-card.hidden {
    display: none;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.project-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.project-card:hover .project-img img {
    transform: scale(1.08);
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 39, 78, 0.75) 0%, rgba(240, 138, 30, 0.55) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-view {
    width: 56px;
    height: 56px;
    background: var(--color-white);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transform: scale(0.8);
    transition: transform 0.35s ease;
    box-shadow: var(--shadow-md);
}

.project-card:hover .project-view {
    transform: scale(1);
}

.project-view:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

.project-info {
    padding: 24px 26px 26px;
}

.project-category {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-accent);
    background: rgba(240, 138, 30, 0.1);
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.project-title {
    margin-bottom: 8px;
}

.project-location {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin-bottom: 16px;
}

.project-location i {
    color: var(--color-accent);
    font-size: 0.85rem;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-primary);
}

.project-link:hover {
    color: var(--color-accent);
    gap: 12px;
}

/* ---------- Industries Section ---------- */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.industry-card {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-slow);
}

.industry-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.industry-img {
    position: absolute;
    inset: 0;
}

.industry-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.industry-card:hover .industry-img img {
    transform: scale(1.12);
}

.industry-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 39, 78, 0.2) 0%, rgba(20, 39, 78, 0.7) 55%, rgba(10, 22, 51, 0.92) 100%);
    transition: background 0.4s ease;
}

.industry-card:hover .industry-overlay {
    background: linear-gradient(180deg, rgba(240, 138, 30, 0.3) 0%, rgba(20, 39, 78, 0.8) 55%, rgba(10, 22, 51, 0.95) 100%);
}

.industry-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 26px 28px;
    color: var(--color-white);
    z-index: 2;
    transition: transform 0.4s ease;
}

.industry-card:hover .industry-info {
    transform: translateY(-4px);
}

.industry-info i {
    font-size: 1.5rem;
    color: var(--color-accent);
    margin-bottom: 10px;
    transition: var(--transition);
}

.industry-card:hover .industry-info i {
    color: var(--color-accent-light);
    transform: scale(1.15);
}

.industry-info h3 {
    color: var(--color-white);
    font-size: 1.12rem;
}

/* ---------- Clients Section ---------- */
.clients-carousel {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.clients-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scrollClients 40s linear infinite;
}

@keyframes scrollClients {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 15px)); }
}

.client-logo {
    flex-shrink: 0;
    width: 180px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    filter: grayscale(100%);
    opacity: 0.55;
    transition: var(--transition);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-light);
}

.client-logo:hover .logo-placeholder {
    filter: grayscale(0%);
    opacity: 1;
    border-color: var(--color-accent);
    color: var(--color-primary);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* ---------- CTA Section ---------- */
.cta-section {
    position: relative;
    padding: clamp(70px, 12vw, 120px) 0;
    overflow: hidden;
}

.cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cta-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 22, 51, 0.94) 0%, rgba(20, 39, 78, 0.9) 50%, rgba(10, 22, 51, 0.92) 100%);
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 880px;
    color: var(--color-white);
    text-align: center;
    margin: 0 auto;
}

.cta-title {
    color: var(--color-white);
    margin: 10px 0 18px;
}

.cta-text {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.75;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-primary-dark);
    color: rgba(255, 255, 255, 0.72);
}

.footer-main {
    padding: 75px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr 1.2fr;
    gap: 45px;
}

.footer-col-1 .logo-footer {
    margin-bottom: 22px;
}

.footer-col-1 .logo-mark {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
}

.footer-col-1 .logo-mark::after {
    background: var(--color-white);
}

.footer-col-1 .logo-text strong {
    color: var(--color-white);
}

.footer-col-1 .logo-text small {
    color: rgba(255, 255, 255, 0.6);
}

.footer-about {
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.68);
    margin-bottom: 24px;
    max-width: 360px;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-link {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    transition: var(--transition);
}

.social-link:hover {
    background: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-3px);
}

.footer-heading {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 600;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 14px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
}

.footer-links li {
    margin-bottom: 11px;
}

.footer-links a {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.68);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-links a::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.6rem;
    color: var(--color-accent);
    opacity: 0;
    transform: translateX(-6px);
    transition: var(--transition);
}

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

.footer-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.contact-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
    font-size: 0.9rem;
}

.contact-list i {
    width: 20px;
    min-width: 20px;
    color: var(--color-accent);
    font-size: 1rem;
    margin-top: 3px;
    text-align: center;
}

.contact-list div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-list strong {
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-heading);
}

.contact-list span,
.contact-list a {
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.5;
}

.contact-list a:hover {
    color: var(--color-accent-light);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 22px 0;
    background: rgba(10, 22, 51, 0.5);
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.copyright {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.58);
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.88rem;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.58);
}

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

.footer-legal .sep {
    color: rgba(255, 255, 255, 0.2);
}

/* ---------- Floating Action Buttons ---------- */
.floating-actions {
    position: fixed;
    right: calc(22px + env(safe-area-inset-right));
    bottom: calc(22px + env(safe-area-inset-bottom));
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.float-btn {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.3rem;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

.float-whatsapp {
    background: var(--color-whatsapp);
    animation: floatPulse 2.5s ease-in-out infinite;
}

.float-whatsapp:hover {
    background: #1ebe5d;
    transform: scale(1.08);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5);
}

.float-top {
    background: var(--color-primary);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.float-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.float-top:hover {
    background: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(240, 138, 30, 0.4);
}

.float-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: var(--color-dark);
    color: var(--color-white);
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    pointer-events: none;
}

.float-tooltip::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--color-dark);
}

.float-btn:hover .float-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

@keyframes floatPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    50% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
    }
}

/* ---------- Inner Page Hero (About & other sub pages) ---------- */
.page-hero {
    position: relative;
    padding: 170px 0 100px;
    overflow: hidden;
    padding-top: calc(170px + env(safe-area-inset-top));
    color: var(--color-white);
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #0f204b;
    background-image: none !important;
}

.page-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, #0f204b 0%, #0f204b 55%, rgba(240, 138, 30, 0.92) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1'><circle cx='50' cy='50' r='1'/><path d='M0 50h100M50 0v100'/></g></svg>");
    background-size: auto, 100px 100px;
    opacity: 1;
}

.page-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
}

.page-hero-title {
    color: var(--color-white);
    margin: 12px 0 18px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-size: clamp(2rem, 5vw, 3.1rem);
}

.page-hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(1rem, 1.9vw, 1.15rem);
    line-height: 1.75;
    max-width: 720px;
    margin: 0;
}

/* ---------- Core Values Grid (6 cards) ---------- */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* ---------- Generic entry content ---------- */
.entry-content {
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.85;
}
.entry-content > * + * {
    margin-top: 1.2em;
}
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    color: var(--color-primary);
    font-family: var(--font-heading);
    line-height: 1.3;
    margin-top: 1.8em;
}
.entry-content h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.entry-content h3 { font-size: 1.25rem; }
.entry-content p  { margin: 0; }
.entry-content ul, .entry-content ol {
    padding-left: 1.5em;
    margin: 0;
}
.entry-content li + li { margin-top: 0.4em; }
.entry-content blockquote {
    padding: 20px 26px;
    border-left: 4px solid var(--color-accent);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    font-style: italic;
    color: var(--color-text);
}
.entry-content a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--color-accent-hover); }
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.entry-content th, .entry-content td {
    padding: 10px 14px;
    border: 1px solid var(--color-border-light);
}
.entry-content th {
    background: var(--color-bg-light);
    color: var(--color-primary);
    text-align: left;
}
.entry-content pre, .entry-content code {
    background: var(--color-bg-light);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: 0.9em;
}
.entry-content pre {
    padding: 16px 20px;
    overflow-x: auto;
    border: 1px solid var(--color-border-light);
}
.entry-content hr {
    border: 0;
    border-top: 1px solid var(--color-border-light);
    margin: 2em 0;
}
.entry-content .alignleft { float: left; margin: 0 1.5em 1em 0; }
.entry-content .alignright { float: right; margin: 0 0 1em 1.5em; }
.entry-content .aligncenter { display: block; margin: 1.5em auto; }
.entry-content .wp-caption {
    max-width: 100%;
}
.entry-content .wp-caption-text {
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin-top: 0.6em;
    text-align: center;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(240, 138, 30, 0.12), rgba(240, 138, 30, 0.04));
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: var(--transition);
    margin: 3px;
}
.chip:hover {
    background: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
}

.value-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 34px 28px;
    border: 1px solid var(--color-border);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.value-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.value-card:hover::before {
    transform: scaleX(1);
}

.value-icon {
    width: 62px;
    height: 62px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(240, 138, 30, 0.14), rgba(20, 39, 78, 0.08));
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 20px;
    transition: var(--transition);
}

.value-card:hover .value-icon {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
    color: var(--color-white);
    transform: rotate(-6deg) scale(1.05);
}

.value-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 10px;
}

.value-card p {
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
    font-size: 0.96rem;
}

/* ---------- Journey Timeline (vertical) ---------- */
.journey-timeline {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 0 10px 10px;
}

.journey-timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-accent-light), var(--color-primary));
    opacity: 0.3;
}

.timeline-item {
    position: relative;
    padding-left: 70px;
    margin-bottom: 38px;
}

.timeline-dot {
    position: absolute;
    left: 8px;
    top: 16px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 6px rgba(240, 138, 30, 0.16);
    z-index: 2;
}

.timeline-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 26px 28px;
    transition: var(--transition);
}

.timeline-card:hover {
    border-color: var(--color-accent-light);
    box-shadow: var(--shadow-md);
    transform: translateX(6px);
}

.timeline-year {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-accent);
    background: rgba(240, 138, 30, 0.1);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.timeline-card h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 8px;
}

.timeline-card p {
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
    font-size: 0.98rem;
}

/* ---------- Leadership Team Grid ---------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.team-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.team-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.team-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-bg-light);
}

.team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.team-card:hover .team-img img {
    transform: scale(1.06);
}

.team-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(20, 39, 78, 0.28) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.team-card:hover .team-img::after {
    opacity: 1;
}

.team-info {
    padding: 24px 22px 26px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-info h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 4px;
}

.team-role {
    display: inline-block;
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.team-info p {
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
    font-size: 0.93rem;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   Mobile First philosophy:
   - ≤1200px: Large desktop tweaks
   - ≤1024px: Tablet / small laptop
   - ≤768px:  Mobile (tablet portrait and phones)
   - ≤560px:  Small phones (iPhone SE / Galaxy mini)
   - ≤380px:  Tiny phones
   ======================================== */

/* Large tablet / small laptop (≤1200px) */
@media (max-width: 1200px) {
    .nav-list {
        gap: 24px;
    }

    .header-actions {
        gap: 14px;
    }

    .footer-grid {
        gap: 38px;
    }

    .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Contact Page: Info Cards ---------- */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.contact-info-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.contact-info-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.contact-info-card:hover::after {
    transform: scaleX(1);
}

.contact-info-whatsapp:hover {
    box-shadow: 0 18px 40px -20px rgba(37, 211, 102, 0.45);
}

.contact-info-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 1.35rem;
    flex-shrink: 0;
    transition: var(--transition);
}

.contact-info-card:hover .contact-info-icon {
    transform: scale(1.07) rotate(-3deg);
}

.contact-info-body {
    flex: 1;
    min-width: 0;
}

.contact-info-label {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 6px;
}

.contact-info-value {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.1rem;
    line-height: 1.45;
    margin: 0 0 6px;
    word-break: break-word;
}

.contact-info-desc {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ---------- Contact Page: Form Section ---------- */
.section-header--left {
    text-align: left;
}

.section-header--left .eyebrow,
.section-header--left .section-title,
.section-header--left .section-desc {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

.section-header--left .section-title::after {
    margin-left: 0;
}

.section-header.no-mb {
    margin-bottom: 0;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: stretch;
}

.contact-form-grid.form-left {
    grid-template-columns: 1.1fr 0.9fr;
}

.contact-form-panel {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    padding: 40px 36px;
    box-shadow: var(--shadow-sm);
}

.contact-form-body {
    margin-top: 24px;
}

.contact-form-body--wide {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    padding: 40px 36px;
    box-shadow: var(--shadow-sm);
    margin-top: 40px;
}

.form-placeholder {
    padding: 28px 24px;
    border: 2px dashed rgba(240, 138, 30, 0.45);
    background: linear-gradient(135deg, rgba(240, 138, 30, 0.06) 0%, rgba(20, 39, 78, 0.04) 100%);
    border-radius: var(--radius-md);
}

.form-placeholder-notice {
    margin: 0;
    color: var(--color-primary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.form-placeholder-notice i {
    color: var(--color-accent);
    margin-right: 6px;
}

.contact-form-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-form-img {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 3;
}

.contact-form-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.contact-form-img:hover img {
    transform: scale(1.04);
}

.contact-form-side-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1e3a5f 100%);
    color: var(--color-white);
    padding: 26px 24px;
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--color-accent);
}

.contact-form-side-card h5 {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: 1.08rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-form-side-card h5 i {
    color: var(--color-accent);
}

.contact-form-side-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.92rem;
    line-height: 1.65;
}

.mt20 { margin-top: 20px; }

/* ---------- Contact Page: Map Section ---------- */
.contact-map-section {
    padding-top: 0;
    padding-bottom: 80px;
}

.contact-map-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    background: var(--color-bg-light);
}

.contact-map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-map-fallback {
    width: 100%;
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(20, 39, 78, 0.08) 0%, rgba(240, 138, 30, 0.08) 100%),
        repeating-linear-gradient(45deg, rgba(20, 39, 78, 0.04) 0, rgba(20, 39, 78, 0.04) 2px, transparent 2px, transparent 14px);
    border: 1px dashed rgba(20, 39, 78, 0.3);
}

.contact-map-fallback-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    gap: 10px;
}

.contact-map-fallback-inner i {
    font-size: 3rem;
    color: var(--color-accent);
    margin-bottom: 6px;
}

.contact-map-fallback-inner h4 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-primary);
    margin: 0;
}

.contact-map-fallback-inner p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    max-width: 560px;
    margin: 0;
}

/* Tablet and smaller (≤1024px) */

/* -------- Premium Contact Form 7 / WPForms styling -------- */
.trinity-cf7-wrap,
.contact-shortcode-wrap {
    width: 100%;
    position: relative;
}

.trinity-cf7-wrap form.wpcf7-form,
.contact-shortcode-wrap form.wpcf7-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    column-gap: 22px;
    row-gap: 20px;
    margin: 0;
    padding: 0;
}

.contact-form-body--wide .trinity-cf7-wrap form.wpcf7-form,
.contact-form-body--wide .contact-shortcode-wrap form.wpcf7-form {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    column-gap: 26px;
    row-gap: 22px;
}

/* Style every direct child (CF7 default uses <p>, our recommended template uses <div>) */
.trinity-cf7-wrap form.wpcf7-form > p,
.trinity-cf7-wrap form.wpcf7-form > div,
.contact-shortcode-wrap form.wpcf7-form > p,
.contact-shortcode-wrap form.wpcf7-form > div {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

/* Kill the empty vertical space CF7 injects with auto-wrapped <br /> */
.trinity-cf7-wrap form.wpcf7-form br,
.contact-shortcode-wrap form.wpcf7-form br {
    display: none !important;
}

/* If CF7 wraps a naked [shortcode] in a <p> with only whitespace and no label/fields, hide that noise */
.trinity-cf7-wrap form.wpcf7-form > p:empty,
.contact-shortcode-wrap form.wpcf7-form > p:empty {
    display: none !important;
}

.trinity-cf7-wrap .wpcf7-form-control-wrap,
.contact-shortcode-wrap .wpcf7-form-control-wrap {
    position: relative;
    width: 100%;
    display: block;
    margin-top: 4px;
}

/* Core label handling — two CF7 template styles supported:
   (A) DEFAULT CF7: <label> Your name [text your-name] </label>  — input is INSIDE label
   (B) RECOMMENDED : <label>Your name</label> [text your-name]   — label separate, input outside
   For (A) the label itself must become a column-flex container so label text sits ABOVE the input. */
.trinity-cf7-wrap label,
.contact-shortcode-wrap label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-primary);
    letter-spacing: 0.01em;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
    box-sizing: border-box;
}

/* Style A — label contains the input (DEFAULT CF7 structure <label>Text [shortcode]</label>):
   change label to column layout so label text sits ON TOP OF its input, not next to it.
   The anonymous text node and span child both become separate flex rows in column direction. */
.trinity-cf7-wrap label:has(.wpcf7-form-control-wrap),
.contact-shortcode-wrap label:has(.wpcf7-form-control-wrap) {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    line-height: 1.4;
}

/* Style A — the input wrapper span goes on its own full-width row below label text.
   Flex-basis auto so it doesn't stretch the input height unnecessarily. */
.trinity-cf7-wrap label:has(.wpcf7-form-control-wrap) > .wpcf7-form-control-wrap,
.contact-shortcode-wrap label:has(.wpcf7-form-control-wrap) > .wpcf7-form-control-wrap {
    width: 100% !important;
    display: block;
    margin-top: 0;
    flex: 0 0 auto;
    min-width: 0;
}

/* Style B (label + input are siblings, our recommended <div class="trinity-cf7-full"> form):
   label renders on its own row, then control-wrap span on next row
   (automatic since they are block siblings) */

.trinity-cf7-wrap .required,
.contact-shortcode-wrap .required {
    color: var(--color-accent);
    font-weight: 700;
    display: inline;
}

.trinity-cf7-wrap input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="file"]),
.trinity-cf7-wrap textarea,
.trinity-cf7-wrap select,
.contact-shortcode-wrap input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="button"]):not([type="file"]),
.contact-shortcode-wrap textarea,
.contact-shortcode-wrap select {
    width: 100%;
    max-width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1.5px solid var(--color-border);
    background: #fff;
    font-family: var(--font-body);
    font-size: 0.97rem;
    color: var(--color-text);
    line-height: 1.5;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.trinity-cf7-wrap textarea,
.contact-shortcode-wrap textarea {
    min-height: 130px;
    resize: vertical;
    padding-top: 14px;
    padding-bottom: 14px;
}

.trinity-cf7-wrap select,
.contact-shortcode-wrap select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F08A1E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 48px;
}

.trinity-cf7-wrap input:not([type="submit"]):focus,
.trinity-cf7-wrap textarea:focus,
.trinity-cf7-wrap select:focus,
.contact-shortcode-wrap input:not([type="submit"]):focus,
.contact-shortcode-wrap textarea:focus,
.contact-shortcode-wrap select:focus {
    border-color: var(--color-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(240, 138, 30, 0.12) !important;
}

.trinity-cf7-wrap input:not([type="submit"])::placeholder,
.trinity-cf7-wrap textarea::placeholder,
.contact-shortcode-wrap input:not([type="submit"])::placeholder,
.contact-shortcode-wrap textarea::placeholder {
    color: #a2adbd;
    opacity: 1;
}

/* Full-width rows: our helper class OR any wrapper containing a textarea */
.trinity-cf7-wrap form.wpcf7-form > .trinity-cf7-full,
.contact-shortcode-wrap form.wpcf7-form > .trinity-cf7-full,
.trinity-cf7-wrap form.wpcf7-form > *:has(textarea),
.contact-shortcode-wrap form.wpcf7-form > *:has(textarea) {
    grid-column: 1 / -1;
}

.trinity-cf7-wrap .wpcf7-not-valid,
.contact-shortcode-wrap .wpcf7-not-valid {
    border-color: #e25b5b !important;
    background: #fff7f7;
    box-shadow: 0 0 0 4px rgba(226, 91, 91, 0.10) !important;
}

.trinity-cf7-wrap span.wpcf7-not-valid-tip,
.contact-shortcode-wrap span.wpcf7-not-valid-tip {
    font-size: 0.78rem;
    color: #e25b5b;
    font-weight: 600;
    margin-top: 4px;
    display: block;
    font-family: var(--font-body);
}

.trinity-cf7-wrap .wpcf7-response-output,
.contact-shortcode-wrap .wpcf7-response-output {
    grid-column: 1 / -1;
    border: none !important;
    border-radius: 14px;
    padding: 14px 18px 14px 48px !important;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    margin: 8px 0 0 !important;
    position: relative;
}

.trinity-cf7-wrap .wpcf7-response-output.wpcf7-mail-sent-ok,
.contact-shortcode-wrap .wpcf7-response-output.wpcf7-mail-sent-ok {
    background: #e8f9ee;
    color: #106a3c;
}
.trinity-cf7-wrap .wpcf7-response-output.wpcf7-mail-sent-ok::before,
.contact-shortcode-wrap .wpcf7-response-output.wpcf7-mail-sent-ok::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #1aa75b;
    font-size: 1.05rem;
}

.trinity-cf7-wrap .wpcf7-response-output.wpcf7-validation-errors,
.trinity-cf7-wrap .wpcf7-response-output.wpcf7-acceptance-missing,
.trinity-cf7-wrap .wpcf7-response-output.wpcf7-mail-sent-ng,
.contact-shortcode-wrap .wpcf7-response-output.wpcf7-validation-errors,
.contact-shortcode-wrap .wpcf7-response-output.wpcf7-acceptance-missing,
.contact-shortcode-wrap .wpcf7-response-output.wpcf7-mail-sent-ng {
    background: #fff3f3;
    color: #a91e1e;
}
.trinity-cf7-wrap .wpcf7-response-output.wpcf7-validation-errors::before,
.trinity-cf7-wrap .wpcf7-response-output.wpcf7-acceptance-missing::before,
.trinity-cf7-wrap .wpcf7-response-output.wpcf7-mail-sent-ng::before,
.contact-shortcode-wrap .wpcf7-response-output.wpcf7-validation-errors::before,
.contact-shortcode-wrap .wpcf7-response-output.wpcf7-acceptance-missing::before,
.contact-shortcode-wrap .wpcf7-response-output.wpcf7-mail-sent-ng::before {
    content: "\f06a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #d43434;
    font-size: 1.05rem;
}

/* The wrapper that holds the submit button + spinner — always spans full width, flex row */
.trinity-cf7-wrap form.wpcf7-form > p:has(input[type="submit"]),
.trinity-cf7-wrap form.wpcf7-form > div:has(input[type="submit"]),
.trinity-cf7-wrap form.wpcf7-form > p:has(button[type="submit"]),
.trinity-cf7-wrap form.wpcf7-form > div:has(button[type="submit"]),
.contact-shortcode-wrap form.wpcf7-form > p:has(input[type="submit"]),
.contact-shortcode-wrap form.wpcf7-form > div:has(input[type="submit"]),
.contact-shortcode-wrap form.wpcf7-form > p:has(button[type="submit"]),
.contact-shortcode-wrap form.wpcf7-form > div:has(button[type="submit"]) {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding-top: 6px;
    margin: 0;
    min-width: 0;
}

.trinity-cf7-wrap input[type="submit"],
.contact-shortcode-wrap input[type="submit"],
.trinity-cf7-wrap button[type="submit"],
.contact-shortcode-wrap button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 34px;
    min-width: 220px;
    margin: 0 !important; /* OVERRIDE: CF7 default adds margin: 0 auto which centers submit */
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-accent) 0%, #ff6b35 100%);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(240, 138, 30, 0.32);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    position: relative;
    box-sizing: border-box;
    outline: none !important;
    float: none !important; /* kill any CF7 float styles on submit */
}

.trinity-cf7-wrap input[type="submit"]::after,
.contact-shortcode-wrap input[type="submit"]::after,
.trinity-cf7-wrap button[type="submit"]::after,
.contact-shortcode-wrap button[type="submit"]::after {
    content: "\f30b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    transition: transform .25s ease;
}

.trinity-cf7-wrap input[type="submit"]:hover,
.contact-shortcode-wrap input[type="submit"]:hover,
.trinity-cf7-wrap button[type="submit"]:hover,
.contact-shortcode-wrap button[type="submit"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 20px 40px rgba(240, 138, 30, 0.42);
}
.trinity-cf7-wrap input[type="submit"]:hover::after,
.contact-shortcode-wrap input[type="submit"]:hover::after,
.trinity-cf7-wrap button[type="submit"]:hover::after,
.contact-shortcode-wrap button[type="submit"]:hover::after {
    transform: translateX(4px);
}

.trinity-cf7-wrap input[type="submit"]:active,
.contact-shortcode-wrap input[type="submit"]:active,
.trinity-cf7-wrap button[type="submit"]:active,
.contact-shortcode-wrap button[type="submit"]:active {
    transform: translateY(0);
}

/* Leave CF7 spinner as-is (hidden until submit toggles visibility).
   Only fix layout so it sits inline next to the submit button instead of
   floating or wrapping. */
.trinity-cf7-wrap .wpcf7-spinner,
.contact-shortcode-wrap .wpcf7-spinner {
    float: none;
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

.trinity-cf7-wrap .wpcf7-list-item,
.contact-shortcode-wrap .wpcf7-list-item {
    margin: 4px 22px 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    color: var(--color-text);
    font-size: 0.95rem;
}

@media (max-width: 1024px) {
    .trinity-cf7-wrap form.wpcf7-form,
    .contact-shortcode-wrap form.wpcf7-form,
    .contact-form-body--wide .trinity-cf7-wrap form.wpcf7-form,
    .contact-form-body--wide .contact-shortcode-wrap form.wpcf7-form {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        column-gap: 18px;
        row-gap: 18px;
    }
}

@media (max-width: 768px) {
    .trinity-cf7-wrap form.wpcf7-form,
    .contact-shortcode-wrap form.wpcf7-form,
    .contact-form-body--wide .trinity-cf7-wrap form.wpcf7-form,
    .contact-form-body--wide .contact-shortcode-wrap form.wpcf7-form {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 16px;
    }

    .trinity-cf7-wrap input:not([type="submit"]),
    .trinity-cf7-wrap textarea,
    .trinity-cf7-wrap select,
    .contact-shortcode-wrap input:not([type="submit"]),
    .contact-shortcode-wrap textarea,
    .contact-shortcode-wrap select {
        padding: 13px 16px;
        border-radius: 12px;
        font-size: 0.95rem;
    }

    .trinity-cf7-wrap textarea,
    .contact-shortcode-wrap textarea {
        min-height: 120px;
    }

    .trinity-cf7-wrap input[type="submit"],
    .contact-shortcode-wrap input[type="submit"],
    .trinity-cf7-wrap button[type="submit"],
    .contact-shortcode-wrap button[type="submit"] {
        width: 100%;
        min-width: 0;
        padding: 15px 22px;
        font-size: 1rem;
    }

    .trinity-cf7-wrap form.wpcf7-form > p:has(input[type="submit"]),
    .trinity-cf7-wrap form.wpcf7-form > div:has(input[type="submit"]),
    .contact-shortcode-wrap form.wpcf7-form > p:has(input[type="submit"]),
    .contact-shortcode-wrap form.wpcf7-form > div:has(input[type="submit"]) {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
}

@media (max-width: 1024px) {
    .page-hero {
        padding: 140px 0 80px;
    }

    .page-hero-title {
        font-size: clamp(1.9rem, 5vw, 2.6rem);
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        align-items: flex-start;
    }

    .hero-image {
        justify-content: center;
    }

    .hero-image-frame {
        max-width: 460px;
    }

    .about-grid,
    .about-who-grid,
    .why-grid,
    .aim-grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .why-image {
        order: -1;
        max-width: 620px;
        margin: 0 auto;
    }

    .about-images,
    .about-who-images,
    .aim-image {
        max-width: 620px;
        margin: 0 auto;
        order: -1;
    }

    .solutions-grid,
    .projects-grid,
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 42px;
    }

    .main-nav {
        display: none !important;
    }

    .mobile-toggle {
        display: flex !important;
    }

    /* On tablet and narrower: hide the header CTA button to make room for logo + phone + hamburger.
       CTA still accessible in mobile menu footer + global CTA section + floating button */
    .header-actions > .btn.btn-sm,
    .header-actions a.btn.btn-primary.btn-sm {
        display: none !important;
    }

    .header-phone span {
        display: none;
    }

    .header-phone {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        justify-content: center;
    }

    .contact-form-grid,
    .contact-form-grid.form-left {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .contact-form-side {
        order: -1;
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }

    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-map-section {
        padding-bottom: 64px;
    }

    .why-features {
        max-width: 720px;
    }
}

/* Mobile (≤768px) — Tablets portrait + most phones */
@media (max-width: 768px) {
    :root {
        --gutter: 18px;
    }

    .section {
        padding: clamp(48px, 11vw, 80px) 0;
    }

    .section-header {
        margin-bottom: 36px;
    }

    .section-desc {
        font-size: 1rem;
        line-height: 1.7;
    }

    .eyebrow {
        font-size: 0.75rem;
        letter-spacing: 2px;
        padding-left: 32px;
        margin-bottom: 10px;
    }

    .eyebrow::before {
        width: 22px;
    }

    .section-footer {
        margin-top: 36px;
    }

    /* ---- Hero ---- */
    .hero-section {
        min-height: auto;
        padding: 130px 0 64px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
        align-items: flex-start;
    }

    .hero-image {
        order: -1;
        justify-content: center;
    }

    .hero-image-frame {
        max-width: 420px;
        aspect-ratio: 3 / 4;
        transform: none;
        animation: heroFloatMobile 5s ease-in-out infinite;
    }

    .hero-image-frame:hover {
        transform: translateY(-4px);
    }

    @keyframes heroFloatMobile {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-10px); }
    }

    .hero-image-badge {
        left: -10px;
        bottom: 20px;
        padding: 12px 16px 12px 12px;
        gap: 10px;
    }

    .hero-image-badge i {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .hero-image-badge strong {
        font-size: 0.88rem;
    }

    .hero-image-badge small {
        font-size: 0.72rem;
    }

    .hero-title {
        margin-bottom: 16px;
    }

    .hero-subtitle {
        font-size: 0.98rem;
        margin-bottom: 30px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 36px;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .btn-lg {
        padding: 14px 24px;
        font-size: 0.94rem;
        min-height: 50px;
    }

    .trust-line {
        font-size: 0.82rem;
        gap: 10px;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .trust-divider {
        display: none;
    }

    .trust-item + .trust-item::before {
        content: '•';
        color: var(--color-accent);
        margin-right: 10px;
        font-weight: 700;
    }

    /* ---- Page Hero (sub pages) ---- */
    .page-hero {
        padding: 130px 0 60px;
    }

    .page-hero-title {
        font-size: clamp(1.85rem, 7vw, 2.3rem);
    }

    .page-hero-subtitle {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    /* ---- Values + Team collapse to 1 col ---- */
    .values-grid,
    .team-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .value-card,
    .timeline-card {
        padding: 24px 22px;
    }

    .value-icon {
        width: 54px;
        height: 54px;
        font-size: 1.3rem;
        margin-bottom: 16px;
    }

    .team-info {
        padding: 20px 18px 22px;
    }

    /* ---- Timeline compact ---- */
    .journey-timeline {
        padding: 10px 0 0;
    }

    .journey-timeline::before {
        left: 11px;
    }

    .timeline-item {
        padding-left: 52px;
        margin-bottom: 28px;
    }

    .timeline-dot {
        left: 1px;
        top: 12px;
        width: 20px;
        height: 20px;
        box-shadow: 0 0 0 5px rgba(240, 138, 30, 0.16);
    }

    /* ---- Grids collapse to 1 col ---- */
    .solutions-grid,
    .projects-grid,
    .industries-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* ---- Aim pillars collapse to 1 col on mobile ---- */
    .aim-pillars {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* ---- Who We Are 2-col highlights collapse to 1 ---- */
    .about-who-highlights {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ---- Collage ---- */
    .img-collage {
        aspect-ratio: 1 / 1;
        gap: 12px;
    }

    .about-who-collage {
        aspect-ratio: 4 / 5;
        gap: 12px;
    }

    /* ---- Industry cards taller for tap ---- */
    .industry-card {
        aspect-ratio: 16 / 10;
    }

    /* ---- Filter pills ---- */
    .project-filters {
        gap: 8px;
        margin-bottom: 30px;
    }

    .filter-btn {
        padding: 11px 17px;
        min-height: 44px;
        min-width: 44px;
        font-size: 0.85rem;
    }

    /* ---- Footer ---- */
    .footer-main {
        padding: 60px 0 34px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-heading {
        margin-bottom: 18px;
        padding-bottom: 12px;
    }

    .footer-links li {
        margin-bottom: 8px;
    }

    .footer-links a {
        padding: 6px 0;
        min-height: 40px;
    }

    .contact-list li {
        margin-bottom: 16px;
    }

    .social-link {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .footer-legal {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ---- CTA ---- */
    .cta-section {
        padding: clamp(60px, 12vw, 100px) 0;
    }

    .cta-text {
        font-size: 1rem;
        margin-bottom: 32px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cta-buttons .btn {
        width: 100%;
    }

    /* ---- Misc ---- */
    .hero-scroll-indicator {
        display: none;
    }

    .clients-carousel {
        mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    }

    .clients-track {
        gap: 22px;
    }

    .client-logo {
        width: 140px;
        height: 74px;
    }

    .logo-placeholder {
        font-size: 0.82rem;
    }

    .feature-list {
        margin: 22px 0 30px;
        gap: 12px;
    }

    .why-features {
        margin-top: 30px;
        gap: 16px;
    }

    .project-filters {
        -webkit-overflow-scrolling: touch;
    }
}

/* Small phones (≤560px) */
@media (max-width: 560px) {
    :root {
        --gutter: 16px;
    }

    .btn {
        padding: 12px 22px;
        min-height: 48px;
        font-size: 0.92rem;
    }

    .btn-sm {
        padding: 10px 14px;
        min-height: 44px;
        min-width: 44px;
        font-size: 0.82rem;
        letter-spacing: 0;
    }

    /* ---- Header compact ---- */
    .header-inner {
        gap: 8px;
        padding: 14px 0;
    }

    .site-header.scrolled .header-inner {
        padding: 10px 0;
    }

    .logo-mark {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        font-size: 0.8rem;
    }

    .logo-text strong {
        font-size: 1rem;
        line-height: 1.1;
    }

    .logo-text small {
        display: none;
    }

    .header-actions {
        gap: 8px;
        flex-wrap: nowrap;
        overflow: visible;
    }

    .header-phone {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        flex-shrink: 0;
    }

    .mobile-toggle {
        display: flex !important;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        gap: 5px;
        flex-shrink: 0;
    }

    .mobile-toggle span {
        width: 22px;
    }

    /* ---- Filter horizontal scroll ---- */
    .project-filters {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        margin: 0 -16px 30px;
        padding-left: 16px;
        padding-right: 16px;
        scrollbar-width: none;
    }

    .project-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex: 0 0 auto;
        padding: 11px 18px;
        font-size: 0.84rem;
        min-height: 44px;
        min-width: 44px;
    }

    /* ---- Collage: simpler 2x2 stack ---- */
    .img-collage {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        aspect-ratio: 1 / 1;
    }

    .collage-item-1,
    .collage-item-2,
    .collage-item-3,
    .collage-item-4 {
        grid-column: auto;
        grid-row: auto;
    }

    /* ---- Mobile menu ---- */
    .mobile-menu {
        width: 100%;
    }

    .mobile-menu-header {
        padding: 16px 22px;
    }

    .mobile-menu nav {
        padding: 12px 22px;
    }

    .mobile-menu-footer {
        padding: 18px 22px;
    }

    /* ---- Why cards ---- */
    .why-feature {
        padding: 16px;
        gap: 14px;
    }

    .why-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1rem;
    }

    .why-text h4 {
        font-size: 0.98rem;
    }

    .why-text p {
        font-size: 0.9rem;
    }

    /* ---- Floating actions ---- */
    .floating-actions {
        right: 14px;
        bottom: 14px;
        gap: 10px;
    }

    .float-btn {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        font-size: 1.15rem;
    }

    .float-tooltip {
        display: none;
    }

    /* ---- Project cards tighter ---- */
    .project-info {
        padding: 20px 22px 22px;
    }

    .project-title {
        margin-bottom: 6px;
    }

    .solution-title {
        padding: 20px 22px 0;
    }

    .solution-desc {
        padding: 10px 22px 18px;
    }

    .solution-link {
        padding: 0 22px 24px;
    }

    .industry-info {
        padding: 20px 22px;
    }

    .industry-info i {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }

    .industry-info h3 {
        font-size: 1.02rem;
    }

    /* ---- Clients carousel ---- */
    .clients-track {
        gap: 18px;
    }

    .client-logo {
        width: 124px;
        height: 68px;
    }

    .logo-placeholder {
        font-size: 0.78rem;
    }

    /* ---- Footer ---- */
    .footer-about {
        font-size: 0.9rem;
    }

    .copyright,
    .footer-legal {
        font-size: 0.82rem;
    }

    /* ---- Contact Page ---- */
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-info-card {
        padding: 22px 20px;
    }

    .contact-info-icon {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        font-size: 1.15rem;
    }

    .contact-info-value {
        font-size: 1rem;
    }

    .contact-form-panel,
    .contact-form-body--wide {
        padding: 28px 22px;
    }

    .contact-form-grid,
    .contact-form-grid.form-left {
        gap: 28px;
    }

    .contact-map-section {
        padding-bottom: 48px;
    }

    .contact-map-fallback-inner i {
        font-size: 2.2rem;
    }

    /* ---- Single CPT sidebar ---- */
    .single-content .why-image {
        position: static;
    }
}

/* Tiny phones (≤380px) */
@media (max-width: 380px) {
    :root {
        --gutter: 14px;
    }

    h1 {
        font-size: clamp(1.6rem, 7.2vw, 1.95rem);
    }

    h2 {
        font-size: clamp(1.3rem, 6vw, 1.55rem);
    }

    .hero-section {
        padding: 120px 0 56px;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .btn,
    .btn-lg {
        padding: 11px 18px;
        font-size: 0.88rem;
        min-height: 46px;
    }

    .btn-sm {
        padding: 9px 12px;
        font-size: 0.78rem;
        min-height: 42px;
        min-width: 42px;
    }

    .logo-text strong {
        font-size: 0.95rem;
    }

    .logo-mark {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .mobile-toggle,
    .header-phone {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }

    .float-btn {
        width: 46px;
        height: 46px;
        min-width: 46px;
        min-height: 46px;
        font-size: 1.05rem;
    }

    .filter-btn {
        padding: 10px 15px;
        font-size: 0.8rem;
        min-height: 44px;
        min-width: 44px;
    }

    .client-logo {
        width: 110px;
        height: 62px;
    }

    .section-desc {
        font-size: 0.95rem;
    }
}

/* Landscape phones — short height optimizations */
@media (max-height: 540px) and (orientation: landscape) {
    .hero-section {
        padding: 110px 0 48px;
        min-height: auto;
    }

    .hero-title {
        font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    }

    .hero-buttons {
        margin-bottom: 24px;
    }

    .hero-scroll-indicator {
        display: none;
    }

    .mobile-menu nav {
        padding: 8px 22px;
    }

    .mobile-nav-link {
        padding: 12px 4px;
        min-height: 38px;
    }
}

/* Ultrawide desktop — constrain large layouts */
@media (min-width: 1600px) {
    :root {
        --container-max: 1360px;
    }

    .hero-grid {
        gap: 80px;
    }

    .hero-content {
        max-width: 900px;
    }

    .hero-image-frame {
        max-width: 560px;
    }

    .cta-content {
        max-width: 960px;
    }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .clients-track {
        animation: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}