@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ==========================================================================
   ADEPTH CONSULTING ENGINEERS - MASTER PRODUCTION STYLESHEET
   Version: 11.0 ULTRA-PRODUCTION · Fully Expanded & Granular
   ==========================================================================
   ARCHITECTURE:
   1.  CSS Variables & Design Tokens
   2.  Global Reset & Base Normalization
   3.  Typography & Text Hierarchy
   4.  Grid System & Layout Utilities (Bootstrap 3 Fixes)
   5.  Page Loader & Skip Links
   6.  Navigation Shell (Sticky, Logo Left, Mega Pills Right)
   7.  Hero Section (Parallax, Orbs, Floating Cards)
   8.  Capability Strip (4-Column Feature Bar)
   9.  Content Panels & Mission Blocks
   10. Matrix Cards (Dark Sections, Glassmorphism)
   11. Products Grid (Cards, Tags, Hover States)
   12. Timelines & Why-Choose Lists
   13. Application & Industry Grids
   14. Consultancy Services (Dark Theme Overrides)
   15. Partners Marquee (Infinite Scroll)
   16. CTA, Disclaimer & Forms
   17. Footer Theme (Dark, Widgets, Links)
   18. Scroll-to-Top & Progress Bar
   19. Keyframe Animations
   20. Responsive Breakpoint Matrix (1500px down to 320px)
   21. Accessibility & Motion Safety
   22. Print Stylesheet
   ========================================================================== */


/* ==========================================================================
   1. CSS VARIABLES & DESIGN TOKENS
   ========================================================================== */
:root {
    /* --- Core Brand Colors --- */
    --amp-navy-950: #020b16;
    --amp-navy-900: #061525;
    --amp-navy-800: #08304f;
    --amp-navy-700: #0a3d6b;
    --amp-blue: #0879c9;
    --amp-blue-2: #0ca6dd;
    --amp-cyan: #47d7ed;
    --amp-orange: #ffad32;
    --amp-orange-dark: #ff9821;
    --amp-white: #ffffff;
    
    /* --- Neutral & Backgrounds --- */
    --amp-bg: #f5f9fc;
    --amp-bg-alt: #eef5f9;
    --amp-text: #173247;
    --amp-text-light: #2c4a63;
    --amp-muted: #536d80;
    --amp-muted-light: #7a93a7;
    --amp-border: #d9e7ef;
    --amp-border-light: #e8f0f5;
    
    /* --- Gradients --- */
    --gradient-primary: linear-gradient(135deg, #0a2647 0%, #00a8b5 100%);
    --gradient-dark: linear-gradient(135deg, #0b1426 0%, #162b4a 100%);
    --gradient-accent: linear-gradient(135deg, #00a8b5, #00d4e0);
    --gradient-orange: linear-gradient(135deg, #ffb844, #ff9821);
    --blue-bg-grad: linear-gradient(130deg, #020d19 0%, #052d4c 62%, #064c6b 100%);
    --hero-bg: linear-gradient(125deg, #020c18 0%, #062540 48%, #075378 100%);
    
    /* --- Shadows --- */
    --shadow-sm: 0 4px 12px rgba(4, 37, 65, 0.06);
    --shadow-md: 0 12px 28px rgba(4, 37, 65, 0.09);
    --shadow-lg: 0 20px 60px rgba(4, 37, 65, 0.12);
    --shadow-xl: 0 32px 85px rgba(3, 27, 48, 0.20);
    --shadow-glow: 0 0 40px rgba(0, 168, 181, 0.20);
    --shadow-nav: 0 4px 20px rgba(3, 29, 61, 0.08);
    --shadow-nav-scrolled: 0 8px 30px rgba(3, 29, 61, 0.14);
    
    /* --- Typography --- */
    --font-family-title: 'Russo One', 'Oswald', 'Inter', 'Segoe UI', sans-serif;
    --font-family-heading: 'Oswald', 'Arial', sans-serif;
    --font-family-body: 'Arimo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* --- Spacing & Sizing --- */
    --section-padding: 110px 0;
    --section-padding-mobile: 70px 0;
    --container-max: 1200px;
    --container-padding: 0 15px;
    --nav-height: 96px;
    --nav-height-mobile: 72px;
    
    /* --- Border Radius --- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --radius-full: 9999px;
    
    /* --- Transitions & Easing --- */
    --transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-base: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* --- Z-Index Scale --- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-navbar: 1000;
    --z-modal: 5000;
    --z-scroll-top: 9000;
    --z-loader: 99999;
    
    /* --- Mega Navigation Tokens --- */
    --mega-red: #c9403c;
    --mega-red-hover: #b33531;
    --mega-blue: #16389c;
    --mega-blue-hover: #0e2a7a;
    --mega-border: #e4eaf0;
}


/* ==========================================================================
   2. GLOBAL RESET & BASE NORMALIZATION
   ========================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 20px);
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body.amp-page {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    color: var(--amp-text);
    background: var(--amp-white);
    font-family: var(--font-family-body);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.amp-page *,
body.amp-page *::before,
body.amp-page *::after {
    box-sizing: border-box;
}

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

svg {
    overflow: hidden;
    vertical-align: middle;
}

::selection {
    background: var(--amp-blue-2);
    color: var(--amp-white);
    text-shadow: none;
}

::-moz-selection {
    background: var(--amp-blue-2);
    color: var(--amp-white);
    text-shadow: none;
}

main {
    display: block;
    overflow: hidden;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--amp-border);
    margin: 2rem 0;
}

abbr[title] {
    border-bottom: 0;
    text-decoration: underline;
    text-decoration: underline dotted;
}

b, strong {
    font-weight: 700;
    color: var(--amp-text);
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

code, kbd, samp, pre {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
}

button, input {
    overflow: visible;
}

button, select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
    resize: vertical;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

summary {
    display: list-item;
}

template {
    display: none;
}

[hidden] {
    display: none !important;
}


/* ==========================================================================
   3. TYPOGRAPHY & TEXT HIERARCHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5em;
    font-family: var(--font-family-heading);
    font-weight: 500;
    line-height: 1.2;
    color: var(--amp-navy-900);
    letter-spacing: -0.02em;
}

h1, .h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.1; font-weight: 500; }
h2, .h2 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; font-weight: 500; }
h3, .h3 { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.25; font-weight: 500; }
h4, .h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3; font-weight: 600; }
h5, .h5 { font-size: 1.1rem; line-height: 1.4; font-weight: 600; }
h6, .h6 { font-size: 1rem; line-height: 1.5; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-family: var(--font-family-body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--amp-muted);
}

a {
    color: var(--amp-blue);
    text-decoration: none;
    background-color: transparent;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--amp-blue-2);
    text-decoration: none;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
}

pre, code, kbd, samp {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
}

pre {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    display: block;
    font-size: 87.5%;
    color: #212529;
}

figure {
    margin: 0 0 1rem;
}

blockquote {
    margin: 0 0 1rem;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--amp-blue-2);
    background: var(--amp-bg);
    font-style: italic;
    color: var(--amp-text-light);
}

mark, .mark {
    padding: 0.2em;
    background-color: #fcf8e3;
}


/* ==========================================================================
   4. GRID SYSTEM & LAYOUT UTILITIES (BOOTSTRAP 3 FIXES)
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--container-padding);
}

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

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

/* Column Base Rules */
[class*="col-"] {
    position: relative;
    width: 100%;
    padding: 0 15px;
}

/* Grid Columns */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Flexbox Row Utility */
.amp-flex-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -15px !important;
    align-items: stretch;
}

/* Utility Classes */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; }

.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.text-muted { color: var(--amp-muted) !important; }
.text-primary { color: var(--amp-blue) !important; }
.text-success { color: #28a745 !important; }
.text-info { color: var(--amp-blue-2) !important; }
.text-warning { color: var(--amp-orange) !important; }
.text-danger { color: #dc3545 !important; }
.text-white { color: var(--amp-white) !important; }

.bg-primary { background-color: var(--amp-blue) !important; }
.bg-light { background-color: var(--amp-bg) !important; }
.bg-dark { background-color: var(--amp-navy-900) !important; }
.bg-white { background-color: var(--amp-white) !important; }

.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.m-0 { margin: 0 !important; }
.mt-0, .my-0 { margin-top: 0 !important; }
.mr-0, .mx-0 { margin-right: 0 !important; }
.mb-0, .my-0 { margin-bottom: 0 !important; }
.ml-0, .mx-0 { margin-left: 0 !important; }

.p-0 { padding: 0 !important; }
.pt-0, .py-0 { padding-top: 0 !important; }
.pr-0, .px-0 { padding-right: 0 !important; }
.pb-0, .py-0 { padding-bottom: 0 !important; }
.pl-0, .px-0 { padding-left: 0 !important; }

.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }


/* ==========================================================================
   5. PAGE LOADER & SKIP LINKS
   ========================================================================== */
#pageloader,
.loader {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);
    display: none !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--amp-white);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#pageloader.loaded,
.loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#pageloader .loader-item,
.loader-spinner {
    font-size: 44px;
    color: var(--amp-blue);
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(8, 121, 201, 0.1);
    border-top-color: var(--amp-blue);
    border-radius: 50%;
}

.loader-text {
    color: var(--amp-navy-900);
    font-family: var(--font-family-title);
    font-size: 1.2rem;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.amp-skip-link {
    position: fixed;
    left: 12px;
    top: -60px;
    z-index: 100000;
    padding: 12px 24px;
    border-radius: 0 0 8px 8px;
    color: var(--amp-white) !important;
    background: var(--amp-navy-900);
    font-weight: 700;
    text-decoration: none;
    transition: top 0.2s ease;
}

.amp-skip-link:focus {
    top: 0;
    outline: 3px solid var(--amp-orange);
    outline-offset: 2px;
}


/* ==========================================================================
   6. NAVIGATION SHELL (STICKY, LOGO LEFT, MEGA PILLS RIGHT)
   ========================================================================== */
body.amp-page header#sticker,
body.amp-page .sticky-navigation,
body.amp-page .amp-mega-header {
    position: sticky !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--amp-white) !important;
    border-top: 4px solid var(--amp-navy-900);
    box-shadow: var(--shadow-nav);
    transition: box-shadow 0.35s ease, background 0.35s ease;
}

body.amp-page header#sticker.is-scrolled {
    box-shadow: var(--shadow-nav-scrolled);
}

/* Inner Container */
.mega-inner,
body.amp-page .sticky-navigation .navbar > .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
    min-height: var(--nav-height);
}

/* --- LOGO LEFT --- */
.mega-brand,
body.amp-page .sticky-navigation .navbar-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 8px 0;
    border-right: 1px solid var(--mega-border);
    padding-right: clamp(16px, 2vw, 32px);
    overflow: visible;
    line-height: 1;
}

.mega-brand img,
body.amp-page .sticky-navigation .navbar-brand img,
body.amp-page img.amp-logo {
    display: block;
    width: auto;
    max-width: 680px;
    height: clamp(64px, 7vw, 96px);
    max-height: 96px;
    object-fit: contain;
    object-position: left center;
    filter: contrast(1.15) saturate(1.12) brightness(1.02);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.mega-brand:hover img,
body.amp-page .sticky-navigation .navbar-brand:hover img {
    transform: scale(1.015);
    filter: drop-shadow(0 6px 14px rgba(6, 43, 87, 0.16)) contrast(1.15) saturate(1.12) brightness(1.02);
}

/* --- RIGHT CLUSTER (PILLS & HAMBURGER) --- */
.mega-right {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.mega-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.mega-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- MEGA PILLS --- */
.mega-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    background: var(--amp-white);
    border: 1.5px solid var(--mega-red);
    border-radius: var(--radius-sm);
    color: var(--mega-blue);
    font-family: var(--font-family-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.28s ease;
    position: relative;
    overflow: hidden;
}

.mega-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mega-blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s var(--ease-spring);
    z-index: -1;
}

.mega-pill:hover,
.mega-pill:focus-visible {
    color: var(--amp-white);
    border-color: var(--mega-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(22, 56, 156, 0.25);
}

.mega-pill:hover::before {
    transform: scaleX(1);
}

.mega-pill.active {
    background: var(--mega-blue);
    border-color: var(--mega-blue);
    color: var(--amp-white);
    box-shadow: inset 0 -3px 0 var(--amp-blue-2), 0 4px 12px rgba(22, 56, 156, 0.2);
}

.mega-pill.active::before {
    transform: scaleX(1);
}

.mega-row-site .mega-pill {
    padding: 5px 14px;
    font-size: 11.5px;
    border-radius: 6px;
}

/* --- HAMBURGER TOGGLE --- */
.mega-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 44px;
    background: var(--amp-white);
    border: 1.5px solid var(--mega-red);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    transition: var(--transition-fast);
}

.mega-toggle:hover {
    background: #fdf2f2;
}

.mega-toggle-bar {
    display: block;
    width: 22px;
    height: 2.5px;
    background: var(--mega-blue);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mega-toggle.active .mega-toggle-bar:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}
.mega-toggle.active .mega-toggle-bar:nth-child(2) {
    opacity: 0;
}
.mega-toggle.active .mega-toggle-bar:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}


/* ==========================================================================
   7. HERO SECTION
   ========================================================================== */
.amp-hero {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    padding: 125px 0 110px;
    color: var(--amp-white);
    isolation: isolate;
    background: var(--hero-bg);
}

.amp-hero::before,
.amp-hero::after {
    position: absolute;
    border-radius: 50%;
    content: "";
    z-index: -1;
    pointer-events: none;
}

.amp-hero::before {
    width: 600px;
    height: 600px;
    top: -250px;
    right: -150px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 80px rgba(255, 255, 255, 0.015), 0 0 0 160px rgba(255, 255, 255, 0.01);
    animation: ampOrbit 24s linear infinite;
}

.amp-hero::after {
    width: 450px;
    height: 450px;
    bottom: -250px;
    left: -150px;
    background: radial-gradient(circle, rgba(21, 168, 224, 0.15), transparent 70%);
    animation: ampFloat 12s ease-in-out infinite alternate;
}

.amp-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.25;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(to right, transparent, #000 40%, #000 60%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40%, #000 60%, transparent);
}

.amp-hero-container {
    position: relative;
    z-index: 2;
}

.amp-hero-copy {
    max-width: 680px;
    padding: 35px 30px 35px 0;
    animation: ampReveal 0.9s var(--ease-spring) both;
}

.amp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 9px 16px;
    border: 1px solid rgba(146, 229, 247, 0.25);
    border-radius: var(--radius-full);
    color: #c8f2fa;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.amp-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #54e3f6;
    box-shadow: 0 0 0 5px rgba(84, 227, 246, 0.15), 0 0 20px rgba(84, 227, 246, 0.8);
    animation: ampPulse 2s ease-in-out infinite;
}

.amp-hero h1 {
    margin: 0 0 27px;
    color: var(--amp-white);
    font-family: var(--font-family-heading);
    font-size: clamp(2.8rem, 5.5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -1.5px;
    text-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.amp-hero h1 span {
    display: block;
    margin-top: 12px;
    background: linear-gradient(90deg, #ffffff, #79e3f6 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.amp-hero-lead {
    max-width: 620px !important;
    margin: 0 0 36px !important;
    color: #d8e8f1 !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
}

.amp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.amp-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.amp-hero-tags span {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    color: #d5e6ef;
    background: rgba(255, 255, 255, 0.05);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
}

/* --- Hero Visual / Product Card --- */
.amp-product-visual {
    position: relative;
    min-height: 570px;
    padding: 28px 0 28px 38px;
    perspective: 1200px;
}

.amp-visual-glow {
    position: absolute;
    top: 50%;
    left: 56%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(48, 208, 237, 0.25);
    filter: blur(80px);
    transform: translate(-50%, -50%);
    animation: ampGlow 6s ease-in-out infinite alternate;
    pointer-events: none;
}

.amp-product-image-card {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 34px 29px 21px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(232, 244, 250, 0.95));
    box-shadow: 0 35px 90px rgba(0, 12, 28, 0.4);
    animation: ampCardIn 1s 0.15s var(--ease-spring) both;
}

.amp-image-badge {
    display: inline-flex;
    position: absolute;
    z-index: 4;
    top: 18px;
    left: 18px;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    color: var(--amp-white);
    background: rgba(3, 28, 49, 0.92);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.amp-image-caption {
    position: relative;
    z-index: 3;
    padding: 17px 5px 4px;
    border-top: 1px solid #d7e5ed;
    margin-top: 16px;
}

.amp-image-caption strong,
.amp-image-caption span {
    display: block;
}

.amp-image-caption strong {
    color: #09253b;
    font-size: 15px;
    font-family: var(--font-family-heading);
    font-weight: 600;
}

.amp-image-caption span {
    color: #597083;
    font-size: 12px;
    margin-top: 2px;
}

.amp-floating-card {
    display: flex;
    position: absolute;
    z-index: 5;
    align-items: center;
    gap: 12px;
    min-width: 205px;
    padding: 15px 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: var(--amp-white);
    background: rgba(3, 24, 42, 0.85);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: ampFloat 5s ease-in-out infinite alternate;
}

.amp-floating-card i {
    color: #78e6f7;
    font-size: 23px;
}

.amp-floating-card span,
.amp-floating-card small {
    display: block;
}

.amp-floating-card span {
    font-size: 12px;
    font-weight: 700;
}

.amp-floating-card small {
    color: #aac2d0;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.amp-floating-card-one {
    right: 0;
    bottom: 90px;
}

.amp-floating-card-two {
    bottom: 8px;
    left: 15px;
    animation-delay: -2.5s;
}

.amp-scroll-cue {
    display: flex;
    position: absolute;
    z-index: 4;
    bottom: 22px;
    left: 50%;
    flex-direction: column;
    align-items: center;
    color: #b8d1df !important;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-decoration: none !important;
    text-transform: uppercase;
    transform: translateX(-50%);
    transition: var(--transition-fast);
}

.amp-scroll-cue:hover {
    color: var(--amp-white) !important;
}

.amp-scroll-cue i {
    font-size: 22px;
    animation: ampBounce 1.8s infinite;
    margin-top: 4px;
}


/* ==========================================================================
   8. CAPABILITY STRIP
   ========================================================================== */
.amp-capability-strip {
    position: relative;
    z-index: 7;
    border-bottom: 1px solid var(--amp-border);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 45px rgba(4, 37, 65, 0.08);
}

.amp-strip-item {
    display: flex;
    min-height: 112px;
    align-items: center;
    gap: 16px;
    padding: 24px 18px;
    border-right: 1px solid var(--amp-border);
    transition: var(--transition-base);
}

.amp-strip-item:last-child {
    border-right: 0;
}

.amp-strip-item:hover {
    background: #f4faff;
    transform: translateY(-4px);
}

.amp-strip-item > i {
    display: flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--amp-blue);
    background: #e9f5fc;
    font-size: 22px;
    transition: var(--transition-base);
}

.amp-strip-item:hover > i {
    background: var(--amp-blue);
    color: var(--amp-white);
    transform: scale(1.05);
}

.amp-strip-item strong,
.amp-strip-item span {
    display: block;
}

.amp-strip-item strong {
    color: #102b40;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.amp-strip-item span {
    color: #60778a;
    font-size: 12px;
}


/* ==========================================================================
   9. CONTENT PANELS & MISSION BLOCKS
   ========================================================================== */
.amp-section {
    position: relative;
    padding: 30px 0px 0px 0px;
}

.amp-section-light {
    background: linear-gradient(180deg, var(--amp-white) 0%, #f6fafc 100%);
}

.amp-section-heading {
    margin-bottom: 58px;
}

.amp-section-heading-centered {
    max-width: 870px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.amp-section-heading-left {
    margin-bottom: 38px;
}

.amp-section-heading h2 {
    margin: 14px 0 20px;
    color: var(--amp-navy-900);
    font-family: var(--font-family-heading);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.7px;
}

.amp-section-heading p {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    color: var(--amp-muted);
    font-size: 17px;
    line-height: 1.85;
}

.amp-section-heading-left p {
    margin-left: 0;
}

.amp-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 8px 14px;
    border: 1px solid rgba(8, 121, 201, 0.2);
    border-radius: var(--radius-full);
    color: var(--amp-blue);
    background: rgba(8, 121, 201, 0.06);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.amp-section-kicker::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amp-orange);
    box-shadow: 0 0 0 5px rgba(255, 173, 50, 0.15);
    content: "";
}

.amp-kicker-light {
    color: #a2edf8;
    border-color: rgba(162, 237, 248, 0.3);
    background: rgba(162, 237, 248, 0.08);
}

.amp-heading-light h2 {
    color: var(--amp-white);
}

.amp-heading-light p {
    color: #b9ceda;
}

.amp-content-panel {
    position: relative;
    overflow: hidden;
    padding: 44px 46px;
    border: 1px solid var(--amp-border);
    border-radius: var(--radius-lg);
    background: var(--amp-white);
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.amp-content-panel::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--amp-blue), var(--amp-cyan), var(--amp-orange));
    content: "";
}

.amp-content-panel:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.amp-content-panel h3 {
    color: #0b2a42;
    font-family: var(--font-family-heading);
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 16px;
}

.amp-content-panel > p {
    font-size: 15.5px !important;
    line-height: 1.9 !important;
}

.amp-feature {
    display: flex;
    gap: 17px;
    padding: 19px 0;
    border-top: 1px solid #e1ebf1;
}

.amp-feature-icon {
    display: inline-flex;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--amp-white);
    background: linear-gradient(135deg, var(--amp-blue), var(--amp-blue-2));
    box-shadow: 0 8px 18px rgba(8, 119, 201, 0.2);
}

.amp-feature strong {
    display: block;
    color: #102d44;
    font-size: 16px;
    margin-bottom: 4px;
}

.amp-feature p {
    margin: 4px 0 0 !important;
    font-size: 13.5px !important;
}

.amp-mission-block {
    margin-top: 30px;
    padding: 24px 28px;
    background: #f2f8ff;
    border-left: 4px solid var(--amp-blue);
    border-radius: 0 14px 14px 0;
}

.amp-mission-block h4 {
    font-family: var(--font-family-heading);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--amp-navy-900);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.amp-mission-block h4 i {
    color: var(--amp-orange);
}

.amp-mission-block p {
    margin: 0 !important;
    font-size: 15.5px !important;
    line-height: 1.9 !important;
}


/* ==========================================================================
   10. MATRIX CARDS (DARK SECTIONS)
   ========================================================================== */
.amp-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.amp-matrix-card {
    position: relative;
    min-height: 245px;
    overflow: hidden;
    padding: 35px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.45s var(--ease-spring);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.amp-matrix-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(112, 228, 247, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.amp-matrix-index {
    position: absolute;
    top: 24px;
    right: 26px;
    color: rgba(255, 255, 255, 0.25);
    font-family: var(--font-family-heading);
    font-size: 24px;
    font-weight: 700;
}

.amp-matrix-card > i {
    margin-bottom: 27px;
    color: #7ee6f6;
    font-size: 29px;
    transition: var(--transition-base);
}

.amp-matrix-card:hover > i {
    transform: scale(1.1) rotate(-5deg);
}

.amp-matrix-card h3 {
    color: var(--amp-white);
    font-family: var(--font-family-heading);
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 10px;
}

.amp-matrix-card p {
    color: #b8ccd8 !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    margin: 0;
}


/* ==========================================================================
   11. PRODUCTS GRID
   ========================================================================== */
.amp-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.amp-product-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--amp-white);
    border: 1px solid var(--amp-border);
    box-shadow: var(--shadow-sm);
    transition: all 0.4s var(--ease-spring);
    display: flex;
    flex-direction: column;
}

.amp-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--amp-blue-2);
}

.amp-product-card-image {
    height: 220px;
    background: linear-gradient(135deg, #eef5f9, #d9e7ef);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.amp-product-card-image i {
    font-size: 64px;
    color: var(--amp-blue);
    opacity: 0.25;
    transition: all 0.4s var(--ease-spring);
}

.amp-product-card:hover .amp-product-card-image i {
    opacity: 0.5;
    transform: scale(1.15);
}

.amp-product-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 12px;
    background: var(--amp-orange);
    color: var(--amp-white);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    z-index: 2;
}

.amp-product-content {
    padding: 32px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.amp-product-content h3 {
    color: var(--amp-navy-900);
    font-family: var(--font-family-heading);
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 12px;
}

.amp-product-content p {
    color: var(--amp-muted);
    font-size: 14px;
    line-height: 1.7;
    flex-grow: 1;
    margin-bottom: 24px;
}

.amp-product-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--amp-blue);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s var(--ease-spring);
}

.amp-product-link i {
    transition: transform 0.3s var(--ease-spring);
}

.amp-product-card:hover .amp-product-link {
    color: var(--amp-blue-2);
}

.amp-product-card:hover .amp-product-link i {
    transform: translateX(6px);
}


/* ==========================================================================
   12. TIMELINES & WHY-CHOOSE LISTS
   ========================================================================== */
.amp-why-section {
    background: linear-gradient(145deg, #f2f7fa, var(--amp-white));
}

.amp-why-list > div {
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-top: 1px solid var(--amp-border);
}

.amp-why-list > div:first-child {
    border-top: 0;
}

.amp-why-list > div > span {
    display: flex;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--amp-blue);
    background: #e8f5fc;
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: 14px;
}

.amp-why-list p {
    margin: 4px 0 0 !important;
    font-size: 14px;
}

.amp-why-list strong {
    color: #102e45;
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}

.amp-timeline-list {
    position: relative;
    padding-left: 40px;
}

.amp-timeline-list::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, var(--amp-blue), transparent);
}

.amp-timeline-list > div {
    position: relative;
    margin-bottom: 30px;
    padding-top: 0;
    border-top: none;
}

.amp-timeline-list > div::before {
    content: '';
    position: absolute;
    left: -27px;
    top: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--amp-white);
    border: 3px solid var(--amp-blue);
    box-shadow: 0 0 0 4px rgba(8, 121, 201, 0.15);
}

.amp-timeline-list > div > span {
    display: none;
}

.amp-timeline-list strong {
    display: block;
    color: var(--amp-navy-900);
    font-size: 18px;
    font-family: var(--font-family-heading);
    margin-bottom: 6px;
}

.amp-timeline-list p {
    margin: 0 !important;
    color: var(--amp-muted);
}


/* ==========================================================================
   13. APPLICATION & INDUSTRY GRIDS
   ========================================================================== */
.amp-application-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
	
}
#works
{
margin-top:30px;
}
.amp-application-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 14px;
    padding: 22px;
    border: 1px solid #dbe8ef;
    border-radius: 15px;
    background: var(--amp-white);
    box-shadow: 0 7px 20px rgba(4, 37, 65, 0.04);
    transition: all 0.4s var(--ease-spring);
}

.amp-application-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(4, 37, 65, 0.12);
    border-color: var(--amp-blue-2);
}

.amp-application-item i {
    grid-row: 1/3;
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--amp-blue);
    background: #eaf6fc;
    font-size: 18px;
    transition: var(--transition-base);
}

.amp-application-item:hover i {
    background: var(--amp-blue);
    color: var(--amp-white);
}

.amp-application-item strong {
    color: #112f46;
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}

.amp-application-item span {
    color: #5b7284;
    font-size: 12px;
}


/* ==========================================================================
   14. CONSULTANCY SERVICES (DARK THEME OVERRIDES)
   ========================================================================== */
.amp-service-list-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.amp-service-item-modern {
    display: flex;
    gap: 16px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.4s var(--ease-spring);
    backdrop-filter: blur(8px);
}

.amp-service-item-modern:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--amp-cyan);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.amp-service-item-modern i {
    color: var(--amp-cyan);
    font-size: 24px;
    margin-top: 4px;
    flex-shrink: 0;
}

.amp-service-item-modern h4 {
    color: var(--amp-white);
    font-family: var(--font-family-heading);
    font-size: 18px;
    margin: 0 0 8px 0;
    font-weight: 500;
}

.amp-service-item-modern p {
    color: #b9ceda;
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}


/* ==========================================================================
   15. PARTNERS MARQUEE
   ========================================================================== */
.amp-partners-strip {
    position: relative;
    overflow: hidden;
    background: var(--amp-white);
    border: 1px solid var(--amp-border);
    border-radius: var(--radius-lg);
    padding: 26px 0;
}

.amp-partners-strip::before,
.amp-partners-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.amp-partners-strip::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
}

.amp-partners-strip::after {
    right: 0;
    background: linear-gradient(-90deg, #ffffff, transparent);
}

.amp-marquee-track {
    display: flex;
    gap: 76px;
    width: max-content;
    animation: ampMarquee 30s linear infinite;
}

.amp-partners-strip:hover .amp-marquee-track {
    animation-play-state: paused;
}

.amp-partner-logo {
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 700;
    color: #9db2ca;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 76px;
    transition: var(--transition-fast);
}

.amp-partner-logo:hover {
    color: var(--amp-blue);
}

.amp-partner-logo::after {
    content: '◆';
    font-size: 10px;
    color: var(--amp-blue-2);
}


/* ==========================================================================
   16. CTA, DISCLAIMER & FORMS
   ========================================================================== */
.amp-cta-section {
    background:
        radial-gradient(circle at 50% 50%, rgba(8, 121, 201, 0.2), transparent 60%),
        var(--blue-bg-grad);
    color: var(--amp-white);
    text-align: center;
}

.amp-cta-section h2 {
    color: var(--amp-white);
    margin-bottom: 16px;
}

.amp-cta-section p {
    color: #b9ceda;
    max-width: 600px;
    margin: 0 auto 40px;
    font-size: 17px;
}

.amp-disclaimer-section {
    padding: 28px 0;
    border-top: 1px solid var(--amp-border);
}

.amp-disclaimer {
    display: flex;
    gap: 14px;
    max-width: 1050px;
    margin: auto;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    background: #f4f8fb;
    border: 1px solid var(--amp-border-light);
}

.amp-disclaimer i {
    color: var(--amp-blue);
    font-size: 18px;
    margin-top: 2px;
}

.amp-disclaimer p {
    margin: 0;
    font-size: 12px !important;
    color: var(--amp-muted);
}

/* Buttons */
.amp-btn {
    position: relative;
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    overflow: hidden;
    padding: 15px 27px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring), background 0.35s ease;
}

.amp-btn::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.35) 48%, transparent 70%);
    content: "";
    transform: translateX(-130%);
    transition: transform 0.7s var(--ease-spring);
}

.amp-btn:hover::after {
    transform: translateX(130%);
}

.amp-btn:hover {
    transform: translateY(-3px);
}

.amp-btn-primary {
    color: #17212b !important;
    background: var(--gradient-orange);
    box-shadow: 0 14px 32px rgba(255, 159, 35, 0.27);
}

.amp-btn-primary:hover {
    box-shadow: 0 20px 42px rgba(255, 159, 35, 0.4);
}

.amp-btn-secondary {
    color: var(--amp-white) !important;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.amp-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.amp-btn-full {
    width: 100%;
    border: 0;
}


/* ==========================================================================
   17. FOOTER THEME
   ========================================================================== */
#footer {
    background: var(--amp-navy-900);
    color: #c6d4e6;
}

#footer .footer-widget {
    padding: 70px 0 40px;
}

#footer .widget-title h3.title {
    color: var(--amp-white);
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0 0 24px;
    position: relative;
    padding-bottom: 12px;
}

#footer .widget-title h3.title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 3px;
    background: var(--amp-blue-2);
    border-radius: 2px;
}

#footer address,
#footer p {
    color: #a9bcd4;
    font-size: 14.5px;
    line-height: 1.9;
}

#footer a {
    color: #7fd4ef;
    text-decoration: none;
    transition: color 0.25s ease;
}

#footer a:hover {
    color: #b5e7f7;
    text-decoration: underline;
}

#footer .amp-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

#footer .amp-footer-links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#footer .amp-footer-links a {
    display: block;
    padding: 10px 0;
    color: #a9bcd4;
    transition: all 0.2s ease;
}

#footer .amp-footer-links a:hover {
    color: #7fd4ef;
    padding-left: 8px;
    text-decoration: none;
}

#footer .form-control {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: var(--amp-white);
    height: 46px;
    font-size: 14px;
    transition: var(--transition-fast);
}

#footer .form-control::placeholder {
    color: #7d92ac;
}

#footer .form-control:focus {
    border-color: var(--amp-blue-2);
    box-shadow: 0 0 0 3px rgba(12, 166, 221, 0.2);
    outline: none;
}

#footer textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: 14px;
    resize: vertical;
}

#footer .btn-default {
    background: var(--amp-blue-2);
    border: 0;
    border-radius: 10px;
    color: #06213c;
    font-weight: 700;
    padding: 12px 24px;
    transition: transform 0.3s ease, background 0.3s ease;
}

#footer .btn-default:hover {
    background: var(--amp-cyan);
    transform: translateY(-2px);
}

#footer .copyright {
    background: #04101f;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0;
}

#footer .copyright p {
    margin: 0;
    color: #7d92ac;
    font-size: 13.5px;
}


/* ==========================================================================
   18. SCROLL-TO-TOP & PROGRESS BAR
   ========================================================================== */
.amp-back-top,
.scroll-top,
#amp-back-top {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    z-index: var(--z-scroll-top) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: var(--amp-white) !important;
    background: linear-gradient(135deg, #0879c9, #0ca6dd) !important;
    box-shadow: 0 12px 28px rgba(8, 121, 201, 0.35) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.4s var(--ease-spring) !important;
}

.amp-back-top.is-visible,
.scroll-top.visible,
#amp-back-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

.amp-back-top:hover,
.scroll-top:hover,
#amp-back-top:hover {
    transform: translateY(-6px) scale(1.05) !important;
    box-shadow: 0 18px 40px rgba(8, 121, 201, 0.45), 0 0 0 6px rgba(12, 166, 221, 0.15) !important;
}

.amp-back-top:active,
.scroll-top:active {
    transform: translateY(-2px) scale(0.98) !important;
}

.amp-back-top i,
.scroll-top i,
#amp-back-top i {
    display: block !important;
    margin: 0 !important;
    color: var(--amp-white) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-style: normal !important;
    transition: transform 0.3s var(--ease-spring) !important;
}

.amp-back-top:hover i,
.scroll-top:hover i {
    transform: translateY(-3px) !important;
}

.amp-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--amp-blue), var(--amp-cyan), var(--amp-orange));
    pointer-events: none;
    transition: width 0.1s linear;
}


/* ==========================================================================
   19. KEYFRAME ANIMATIONS
   ========================================================================== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes ampReveal {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: none; }
}

@keyframes ampCardIn {
    from { opacity: 0; transform: translateY(35px) rotateY(-5deg); }
    to { opacity: 1; transform: none; }
}

@keyframes ampPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.85); opacity: 0.7; }
}

@keyframes ampFloat {
    from { transform: translateY(-5px); }
    to { transform: translateY(9px); }
}

@keyframes ampGlow {
    from { opacity: 0.6; transform: translate(-50%, -50%) scale(0.92); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes ampOrbit {
    to { transform: rotate(360deg); }
}

@keyframes ampBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

@keyframes ampMarquee {
    to { transform: translateX(-50%); }
}

/* Reveal on Scroll Utility */
.amp-js .amp-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s var(--ease-spring), transform 0.8s var(--ease-spring);
}

.amp-js .amp-reveal.amp-reveal-visible {
    opacity: 1;
    transform: none;
}

.amp-reveal-delay-1 { transition-delay: 0.08s !important; }
.amp-reveal-delay-2 { transition-delay: 0.16s !important; }
.amp-reveal-delay-3 { transition-delay: 0.24s !important; }


/* ==========================================================================
   20. RESPONSIVE BREAKPOINT MATRIX
   ========================================================================== */

/* --- Large Desktop (1400px+) --- */
@media (min-width: 1400px) {
    .mega-inner {
        max-width: 1600px;
        padding: 10px 40px;
    }
    .mega-brand img {
        height: clamp(72px, 6vw, 104px);
        max-height: 104px;
    }
}

/* --- Desktop / Laptop (992px - 1199px) --- */
@media (min-width: 992px) and (max-width: 1199px) {
    :root {
        --nav-height: 84px;
    }
    .mega-inner {
        min-height: 84px;
        padding: 8px 20px;
    }
    .mega-brand {
        min-height: 84px;
    }
    .mega-brand img {
        height: clamp(56px, 5.5vw, 76px);
        max-height: 76px;
        max-width: 450px;
    }
    .mega-pill {
        padding: 6px 12px;
        font-size: 11.5px;
    }
    .mega-row-site .mega-pill {
        padding: 4px 10px;
        font-size: 10.5px;
    }
    .amp-matrix {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Tablet & Mobile (<= 991px) --- */
@media (max-width: 991px) {
    :root {
        --nav-height: 72px;
        --section-padding: 80px 0;
    }
    html {
        scroll-padding-top: 90px;
    }
    .mega-inner {
        flex-wrap: wrap;
        padding: 8px 16px;
        gap: 12px;
        min-height: 72px;
    }
    .mega-brand {
        order: 1;
        width: auto;
        flex: 1 1 auto;
        border-right: 0;
        padding-right: 0;
        min-height: 60px;
    }
    .mega-brand img {
        height: 52px;
        max-height: 52px;
        max-width: 280px;
    }
    .mega-right {
        order: 2;
        margin-left: auto;
    }
    .mega-toggle {
        display: flex;
    }
    .mega-nav {
        order: 3;
        width: 100%;
        align-items: stretch;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.45s var(--ease-spring), opacity 0.3s ease, margin 0.3s ease;
        margin-top: 0;
        border-top: 1px solid var(--mega-border);
    }
    header#sticker.mega-open .mega-nav,
    .sticky-navigation .navbar-collapse.in {
        max-height: 75vh;
        opacity: 1;
        overflow-y: auto;
        margin-top: 12px;
        padding: 12px 0;
    }
    .mega-row,
    .mega-row-site {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .mega-pill,
    .mega-row-site .mega-pill {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 15px;
        min-height: 48px;
    }
    
    .amp-section {
        padding: var(--section-padding-mobile);
    }
    .amp-flex-row {
        display: block !important;
    }
    .amp-hero {
        min-height: auto;
        padding: 90px 0 80px;
    }
    .amp-hero-copy {
        max-width: 100%;
        padding: 0;
        text-align: center;
    }
    .amp-hero-actions,
    .amp-hero-tags {
        justify-content: center;
    }
    .amp-product-visual {
        padding: 0;
        margin-top: 40px;
        min-height: auto;
    }
    .amp-matrix {
        grid-template-columns: repeat(2, 1fr);
    }
    .amp-application-grid {
        grid-template-columns: 1fr;
    }
    .amp-strip-item {
        border-right: 0;
        border-bottom: 1px solid var(--amp-border);
    }
}

/* --- Mobile (<= 767px) --- */
@media (max-width: 767px) {
    :root {
        --section-padding: 60px 0;
    }
    .amp-hero {
        padding: 70px 0 60px;
    }
    .amp-hero h1 {
        font-size: 2.2rem;
    }
    .amp-hero-actions {
        flex-direction: column;
        align-items: center;
    }
    .amp-hero-actions .amp-btn {
        width: 100%;
        max-width: 320px;
    }
    .amp-floating-card,
    .amp-scroll-cue {
        display: none;
    }
    .amp-content-panel {
        padding: 30px 24px;
    }
    .amp-matrix,
    .amp-products-grid,
    .amp-service-list-modern {
        grid-template-columns: 1fr;
    }
    .amp-strip-item {
        min-height: 100px;
        padding: 18px 8px;
    }
    .amp-back-top,
    .scroll-top,
    #amp-back-top {
        right: 16px !important;
        bottom: 16px !important;
        width: 46px !important;
        height: 46px !important;
    }
    .amp-partners-strip::before,
    .amp-partners-strip::after {
        width: 40px;
    }
}

/* --- Small Mobile (<= 480px) --- */
@media (max-width: 480px) {
    .amp-hero h1 {
        font-size: 1.9rem;
    }
    .amp-section-heading h2 {
        font-size: 1.7rem;
    }
    .container {
        padding: 0 16px;
    }
    .mega-brand img {
        max-width: 200px;
        height: 44px;
    }
    .mega-toggle {
        width: 40px;
        height: 40px;
    }
    .amp-hero-tags span {
        width: calc(50% - 5px);
        text-align: center;
    }
    .amp-strip-item {
        display: block;
        text-align: center;
    }
    .amp-strip-item > i {
        margin: 0 auto 8px;
    }
}


/* ==========================================================================
   21. ACCESSIBILITY & MOTION SAFETY
   ========================================================================== */
body.amp-page a:focus-visible,
body.amp-page button:focus-visible,
body.amp-page input:focus-visible,
body.amp-page textarea:focus-visible,
.mega-pill:focus-visible {
    outline: 3px solid rgba(12, 166, 221, 0.6);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .amp-js .amp-reveal {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   22. PRINT STYLESHEET
   ========================================================================== */
@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    body.amp-page {
        font-size: 12pt;
        line-height: 1.5;
    }

    .sticky-navigation,
    .amp-back-top,
    .scroll-top,
    #amp-back-top,
    .loader,
    #pageloader,
    #footer,
    .amp-scroll-progress,
    .amp-scroll-cue,
    .amp-floating-card,
    .amp-hero-grid,
    .amp-visual-glow {
        display: none !important;
    }

    .amp-hero,
    .amp-matrix-section,
    .amp-section-dark,
    .amp-cta-section,
    #products,
    #technology,
    #consultancy {
        background: #fff !important;
        color: #000 !important;
        padding: 20px 0 !important;
    }

    .amp-hero h1,
    .amp-section-heading h2,
    .amp-matrix-card h3,
    .amp-product-content h3 {
        color: #000 !important;
    }

    .amp-section {
        padding: 20px 0 !important;
        break-inside: avoid;
    }

    .amp-content-panel,
    .amp-product-card,
    .amp-matrix-card {
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    a, a:visited {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    img {
        break-inside: avoid;
        max-width: 100% !important;
    }

    h2, h3 {
        break-after: avoid;
    }
}

/* ==========================================================================
   ADEPTH V12.0 — MODERN MOTION + INSTANT-FIRST-PAINT ENHANCEMENT
   --------------------------------------------------------------------------
   Drop-in enhancement layer.
   - Preserves the existing Adepth navy / blue / cyan / orange theme.
   - No lazy-loading CSS behavior.
   - No content-hiding scroll reveal.
   - Page loader is disabled so content paints immediately.
   - Adds premium hover, glow, shimmer, depth, focus and micro-interactions.
   - Uses transform/opacity for most motion to keep animation GPU-friendly.
   ========================================================================== */

/* ---------- INSTANT RENDER GUARANTEES ---------- */
html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
}

body.amp-page {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Never let a loader block first paint. JS can remain in the page safely. */
#pageloader,
#pageloader.loaded,
.loader,
.loader.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Never hide content while waiting for IntersectionObserver / scroll JS. */
.amp-js .amp-reveal,
.amp-js .amp-reveal.amp-reveal-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* ---------- GLOBAL MOTION TOKENS ---------- */
:root {
    --motion-fast: 180ms cubic-bezier(.2,.8,.2,1);
    --motion-base: 320ms cubic-bezier(.2,.8,.2,1);
    --motion-smooth: 520ms cubic-bezier(.16,1,.3,1);
    --motion-spring: 700ms cubic-bezier(.16,1.15,.3,1);
    --glow-blue: rgba(12,166,221,.34);
    --glow-cyan: rgba(71,215,237,.34);
    --glow-orange: rgba(255,173,50,.30);
}

/* ---------- GLOBAL INTERACTION POLISH ---------- */
a,
button,
input,
textarea,
select,
.amp-product-card,
.amp-matrix-card,
.amp-content-panel,
.amp-application-item,
.amp-service-item-modern,
.amp-strip-item {
    -webkit-tap-highlight-color: transparent;
}

button,
a,
.amp-product-card,
.amp-matrix-card,
.amp-content-panel,
.amp-application-item,
.amp-service-item-modern,
.amp-strip-item {
    will-change: transform;
}

::selection {
    background: #0ca6dd;
    color: #fff;
}

/* ---------- NAVBAR: PREMIUM GLASS + ACTIVE LIGHT ---------- */
body.amp-page header#sticker,
body.amp-page .sticky-navigation,
body.amp-page .amp-mega-header {
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,253,255,.94)) !important;
    border-top-color: #062b57;
    border-bottom: 1px solid rgba(8,121,201,.10);
    box-shadow:
        0 8px 30px rgba(3,29,61,.08),
        0 1px 0 rgba(255,255,255,.9) inset;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

body.amp-page header#sticker::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(12,166,221,.15) 15%,
        rgba(12,166,221,.75) 50%,
        rgba(255,173,50,.55) 75%,
        transparent 100%
    );
    background-size: 220% 100%;
    animation: adepthNavFlow 7s linear infinite;
}

.mega-brand {
    position: relative;
    isolation: isolate;
}

.mega-brand::before {
    content: "";
    position: absolute;
    inset: 4px -14px;
    z-index: -1;
    border-radius: 18px;
    background: radial-gradient(circle, rgba(12,166,221,.10), transparent 68%);
    opacity: 0;
    transform: scale(.82);
    transition: opacity var(--motion-base), transform var(--motion-base);
}

.mega-brand:hover::before {
    opacity: 1;
    transform: scale(1);
}

.mega-brand img {
    transform-origin: left center;
    transition:
        transform var(--motion-smooth),
        filter var(--motion-smooth);
}

.mega-brand:hover img {
    transform: translateY(-1px) scale(1.025);
    filter:
        drop-shadow(0 8px 20px rgba(6,43,87,.18))
        contrast(1.16)
        saturate(1.15);
}

/* Pills get a modern magnetic-like lift and moving highlight. */
.mega-pill {
    isolation: isolate;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
    transition:
        transform var(--motion-base),
        color var(--motion-fast),
        background var(--motion-base),
        border-color var(--motion-base),
        box-shadow var(--motion-base);
}

.mega-pill::before {
    transition: transform var(--motion-smooth);
}

.mega-pill::after {
    content: "";
    position: absolute;
    top: -80%;
    left: -35%;
    width: 35%;
    height: 260%;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.34),
        transparent
    );
    transform: rotate(18deg) translateX(-120%);
    transition: opacity var(--motion-fast), transform .8s var(--ease-out-expo);
}

.mega-pill:hover::after,
.mega-pill:focus-visible::after {
    opacity: 1;
    transform: rotate(18deg) translateX(470%);
}

.mega-pill:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow:
        0 9px 22px rgba(22,56,156,.18),
        0 0 0 3px rgba(12,166,221,.06);
}

.mega-pill.active {
    animation: adepthActivePulse 3.2s ease-in-out infinite;
}

/* ---------- HERO: MORE DEPTH WITHOUT HEAVY MEDIA ---------- */
.amp-hero {
    isolation: isolate;
    background:
        radial-gradient(circle at 78% 28%, rgba(71,215,237,.13), transparent 22%),
        radial-gradient(circle at 18% 80%, rgba(255,173,50,.08), transparent 22%),
        var(--hero-bg);
}

.amp-hero::before {
    animation:
        ampOrbit 24s linear infinite,
        adepthHeroRingGlow 5s ease-in-out infinite alternate;
}

.amp-hero-grid {
    opacity: .30;
    background-size: 56px 56px;
    animation: adepthGridDrift 18s linear infinite;
}

.amp-hero-copy {
    animation:
        ampReveal .8s var(--ease-spring) both,
        adepthHeroBreath 7s ease-in-out 1.1s infinite;
}

.amp-eyebrow {
    box-shadow:
        0 10px 35px rgba(0,0,0,.10),
        0 0 0 1px rgba(255,255,255,.03) inset;
    animation: adepthEyebrowIn .8s var(--ease-spring) both;
}

.amp-eyebrow-dot {
    animation:
        ampPulse 2s ease-in-out infinite,
        adepthDotGlow 2.5s ease-in-out infinite alternate;
}

.amp-hero h1 {
    position: relative;
    animation: adepthHeadingIn 1s var(--ease-spring) both;
}

.amp-hero h1 span {
    background-size: 200% 100%;
    animation: adepthGradientText 5s ease-in-out infinite alternate;
}

.amp-hero-lead {
    animation: adepthFadeUp .85s .18s var(--ease-spring) both;
}

.amp-hero-actions {
    animation: adepthFadeUp .85s .30s var(--ease-spring) both;
}

.amp-hero-tags {
    animation: adepthFadeUp .85s .42s var(--ease-spring) both;
}

.amp-hero-tags span {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--motion-base),
        border-color var(--motion-base),
        background var(--motion-base),
        box-shadow var(--motion-base);
}

.amp-hero-tags span::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,.14) 48%,
        transparent 75%
    );
    transform: translateX(-120%);
    transition: transform .8s var(--ease-out-expo);
}

.amp-hero-tags span:hover {
    transform: translateY(-3px);
    border-color: rgba(112,228,247,.45);
    background: rgba(255,255,255,.09);
    box-shadow: 0 10px 25px rgba(0,0,0,.14);
}

.amp-hero-tags span:hover::before {
    transform: translateX(120%);
}

/* ---------- HERO VISUAL CARD ---------- */
.amp-product-visual {
    transform-style: preserve-3d;
}

.amp-visual-glow {
    animation:
        ampGlow 6s ease-in-out infinite alternate,
        adepthGlowBreath 8s ease-in-out infinite;
}

.amp-product-image-card {
    transform-style: preserve-3d;
    box-shadow:
        0 35px 90px rgba(0,12,28,.40),
        0 0 0 1px rgba(255,255,255,.12) inset;
    transition:
        transform var(--motion-smooth),
        box-shadow var(--motion-smooth);
}

.amp-product-image-card:hover {
    transform: translateY(-8px) rotateX(1deg) rotateY(-1deg);
    box-shadow:
        0 46px 110px rgba(0,12,28,.46),
        0 0 45px rgba(71,215,237,.12);
}

.amp-floating-card {
    transition:
        transform var(--motion-smooth),
        box-shadow var(--motion-base),
        border-color var(--motion-base);
}

.amp-floating-card:hover {
    transform: translateY(-8px) scale(1.025);
    border-color: rgba(112,228,247,.42);
    box-shadow:
        0 25px 60px rgba(0,0,0,.35),
        0 0 28px rgba(71,215,237,.12);
}

.amp-scroll-cue {
    opacity: .82;
    transition: opacity var(--motion-base), transform var(--motion-base);
}

.amp-scroll-cue:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* ---------- CAPABILITY STRIP ---------- */
.amp-capability-strip {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,251,254,.96));
}

.amp-strip-item {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--motion-base),
        background var(--motion-base),
        box-shadow var(--motion-base);
}

.amp-strip-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--amp-blue), var(--amp-cyan), var(--amp-orange));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-smooth);
}

.amp-strip-item:hover::before {
    transform: scaleX(1);
}

.amp-strip-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(4,37,65,.08);
}

.amp-strip-item > i {
    box-shadow: 0 8px 20px rgba(8,121,201,.08);
}

.amp-strip-item:hover > i {
    transform: scale(1.08) rotate(-4deg);
    box-shadow:
        0 10px 24px rgba(8,121,201,.18),
        0 0 0 7px rgba(12,166,221,.07);
}

/* ---------- SECTION HEADINGS ---------- */
.amp-section-heading h2 {
    text-wrap: balance;
}

.amp-section-kicker {
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(8,121,201,.06);
}

.amp-section-kicker::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(255,255,255,.55) 48%,
        transparent 70%
    );
    transform: translateX(-130%);
    animation: adepthKickerShine 4.8s ease-in-out infinite;
}

/* ---------- CONTENT PANELS ---------- */
.amp-content-panel {
    isolation: isolate;
    transition:
        transform var(--motion-smooth),
        box-shadow var(--motion-smooth),
        border-color var(--motion-base);
}

.amp-content-panel::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -90px;
    bottom: -90px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(12,166,221,.11), transparent 68%);
    opacity: 0;
    transform: scale(.7);
    transition: opacity var(--motion-smooth), transform var(--motion-smooth);
}

.amp-content-panel:hover {
    transform: translateY(-9px);
    border-color: rgba(12,166,221,.28);
    box-shadow:
        0 28px 70px rgba(4,37,65,.15),
        0 0 0 1px rgba(12,166,221,.04);
}

.amp-content-panel:hover::after {
    opacity: 1;
    transform: scale(1);
}

.amp-feature {
    transition: padding-left var(--motion-base), border-color var(--motion-base);
}

.amp-feature:hover {
    padding-left: 7px;
    border-top-color: rgba(12,166,221,.28);
}

.amp-feature-icon {
    transition: transform var(--motion-base), box-shadow var(--motion-base);
}

.amp-feature:hover .amp-feature-icon {
    transform: rotate(-4deg) scale(1.08);
    box-shadow:
        0 12px 28px rgba(8,119,201,.25),
        0 0 0 6px rgba(12,166,221,.07);
}

/* ---------- DARK MATRIX CARDS ---------- */
.amp-matrix-card {
    isolation: isolate;
    transition:
        transform var(--motion-smooth),
        background var(--motion-base),
        border-color var(--motion-base),
        box-shadow var(--motion-smooth);
}

.amp-matrix-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(71,215,237,0),
        rgba(71,215,237,.45),
        rgba(255,173,50,0),
        rgba(71,215,237,0)
    );
    background-size: 220% 220%;
    opacity: 0;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity var(--motion-base);
}

.amp-matrix-card:hover::before {
    opacity: 1;
    animation: adepthBorderFlow 3s linear infinite;
}

.amp-matrix-card:hover {
    transform: translateY(-10px) scale(1.012);
    background: rgba(255,255,255,.095);
    border-color: rgba(112,228,247,.34);
    box-shadow:
        0 25px 55px rgba(0,0,0,.32),
        0 0 32px rgba(71,215,237,.08);
}

.amp-matrix-card > i {
    filter: drop-shadow(0 0 10px rgba(126,230,246,.16));
}

/* ---------- PRODUCT CARDS ---------- */
.amp-product-card {
    isolation: isolate;
    transform: translateZ(0);
    transition:
        transform var(--motion-smooth),
        box-shadow var(--motion-smooth),
        border-color var(--motion-base);
}

.amp-product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        125deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.36),
        rgba(255,255,255,0)
    );
    transform: translateX(-125%);
    transition: transform .85s var(--ease-out-expo);
}

.amp-product-card:hover::before {
    transform: translateX(125%);
}

.amp-product-card:hover {
    transform: translateY(-11px) scale(1.012);
    border-color: rgba(12,166,221,.48);
    box-shadow:
        0 30px 75px rgba(4,37,65,.17),
        0 0 0 1px rgba(12,166,221,.04);
}

.amp-product-card-image {
    position: relative;
}

.amp-product-card-image::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(12,166,221,.18), transparent 68%);
    transform: scale(.7);
    opacity: .55;
    transition: transform var(--motion-smooth), opacity var(--motion-smooth);
}

.amp-product-card:hover .amp-product-card-image::before {
    transform: scale(1.25);
    opacity: .9;
}

.amp-product-card-image i {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 18px rgba(8,121,201,.12));
}

.amp-product-card:hover .amp-product-card-image i {
    transform: scale(1.18) rotate(-4deg);
    filter: drop-shadow(0 12px 25px rgba(8,121,201,.22));
}

.amp-product-tag {
    box-shadow: 0 8px 20px rgba(255,152,33,.18);
    transition: transform var(--motion-base), box-shadow var(--motion-base);
}

.amp-product-card:hover .amp-product-tag {
    transform: translateY(-2px);
    box-shadow: 0 11px 25px rgba(255,152,33,.28);
}

.amp-product-link {
    position: relative;
    width: fit-content;
    padding-bottom: 4px;
}

.amp-product-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--amp-blue), var(--amp-cyan));
    transition: right var(--motion-smooth);
}

.amp-product-link:hover::after {
    right: 0;
}

/* ---------- APPLICATION / SERVICE CARDS ---------- */
.amp-application-item,
.amp-service-item-modern {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--motion-base),
        border-color var(--motion-base),
        box-shadow var(--motion-base),
        background var(--motion-base);
}

.amp-application-item::before,
.amp-service-item-modern::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        120deg,
        rgba(12,166,221,.07),
        transparent 40%,
        rgba(255,173,50,.05)
    );
    opacity: 0;
    transition: opacity var(--motion-base);
}

.amp-application-item:hover,
.amp-service-item-modern:hover {
    transform: translateY(-7px);
    border-color: rgba(12,166,221,.35);
    box-shadow: 0 20px 48px rgba(4,37,65,.12);
}

.amp-application-item:hover::before,
.amp-service-item-modern:hover::before {
    opacity: 1;
}

/* ---------- BUTTONS ---------- */
.amp-btn {
    isolation: isolate;
    transform: translateZ(0);
    transition:
        transform var(--motion-base),
        box-shadow var(--motion-base),
        border-color var(--motion-base),
        background var(--motion-base);
}

.amp-btn::after {
    animation: adepthButtonSweep 5.5s ease-in-out infinite;
}

.amp-btn:hover {
    transform: translateY(-4px) scale(1.012);
}

.amp-btn:active {
    transform: translateY(-1px) scale(.985);
}

.amp-btn-primary {
    box-shadow:
        0 14px 32px rgba(255,159,35,.24),
        0 0 0 0 rgba(255,173,50,.0);
}

.amp-btn-primary:hover {
    box-shadow:
        0 20px 45px rgba(255,159,35,.34),
        0 0 0 6px rgba(255,173,50,.08);
}

.amp-btn-secondary:hover {
    box-shadow:
        0 18px 38px rgba(0,0,0,.20),
        0 0 0 5px rgba(255,255,255,.05);
}

/* ---------- PARTNER MARQUEE ---------- */
.amp-marquee-track {
    animation: ampMarquee 26s linear infinite;
    will-change: transform;
}

.amp-partner-logo {
    transition:
        color var(--motion-base),
        transform var(--motion-base),
        filter var(--motion-base);
}

.amp-partner-logo:hover {
    color: var(--amp-blue) !important;
    transform: translateY(-3px) scale(1.04);
    filter: drop-shadow(0 6px 12px rgba(8,121,201,.12));
}

/* ---------- MISSION / WHY / TIMELINE ---------- */
.amp-mission-block {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--motion-base),
        box-shadow var(--motion-base);
}

.amp-mission-block::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(12,166,221,.14), transparent 70%);
    transition: transform var(--motion-smooth);
}

.amp-mission-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(4,37,65,.08);
}

.amp-mission-block:hover::after {
    transform: scale(1.25);
}

.amp-timeline-list > div::before {
    animation: adepthTimelinePulse 2.8s ease-in-out infinite;
}

.amp-why-list > div {
    transition: transform var(--motion-base), padding-left var(--motion-base);
}

.amp-why-list > div:hover {
    transform: translateX(5px);
    padding-left: 5px;
}

.amp-why-list > div > span {
    transition: transform var(--motion-base), box-shadow var(--motion-base);
}

.amp-why-list > div:hover > span {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 20px rgba(8,121,201,.16);
}

/* ---------- CTA ---------- */
.amp-cta-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.amp-cta-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -250px;
    right: -160px;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid rgba(112,228,247,.10);
    box-shadow:
        0 0 0 70px rgba(112,228,247,.025),
        0 0 0 140px rgba(112,228,247,.015);
    animation: adepthCtaOrbit 20s linear infinite;
}

.amp-cta-section h2 {
    text-wrap: balance;
    animation: adepthFadeUp .8s var(--ease-spring) both;
}

.amp-cta-section p {
    animation: adepthFadeUp .8s .12s var(--ease-spring) both;
}

/* ---------- FORMS ---------- */
#footer .form-control,
input.form-control,
textarea.form-control,
select.form-control {
    transition:
        border-color var(--motion-base),
        box-shadow var(--motion-base),
        transform var(--motion-base),
        background var(--motion-base);
}

#footer .form-control:hover,
input.form-control:hover,
textarea.form-control:hover,
select.form-control:hover {
    border-color: rgba(12,166,221,.40);
}

#footer .form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    transform: translateY(-1px);
    border-color: var(--amp-blue-2);
    box-shadow:
        0 0 0 4px rgba(12,166,221,.10),
        0 12px 30px rgba(4,37,65,.08);
}

/* ---------- SCROLL PROGRESS / BACK TO TOP ---------- */
.amp-scroll-progress {
    height: 3px;
    box-shadow: 0 0 12px rgba(12,166,221,.45);
}

.amp-back-top,
.scroll-top,
#amp-back-top {
    transition:
        opacity var(--motion-base) !important,
        visibility var(--motion-base) !important,
        transform var(--motion-base) !important,
        box-shadow var(--motion-base) !important;
}

.amp-back-top:hover,
.scroll-top:hover,
#amp-back-top:hover {
    transform: translateY(-7px) scale(1.06) !important;
}

/* ---------- FOOTER ---------- */
#footer {
    position: relative;
    overflow: hidden;
}

#footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(71,215,237,.65),
        rgba(255,173,50,.55),
        transparent
    );
    background-size: 220% 100%;
    animation: adepthFooterFlow 8s linear infinite;
}

/* ---------- MODERN KEYFRAMES ---------- */
@keyframes adepthNavFlow {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

@keyframes adepthActivePulse {
    0%, 100% { box-shadow: inset 0 -3px 0 var(--amp-blue-2), 0 4px 12px rgba(22,56,156,.20); }
    50% { box-shadow: inset 0 -3px 0 var(--amp-cyan), 0 7px 22px rgba(22,56,156,.28); }
}

@keyframes adepthHeroRingGlow {
    0% { opacity: .62; }
    100% { opacity: 1; }
}

@keyframes adepthGridDrift {
    from { background-position: 0 0; }
    to { background-position: 56px 56px; }
}

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

@keyframes adepthEyebrowIn {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes adepthHeadingIn {
    from { opacity: 0; transform: translateY(28px); filter: blur(5px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes adepthFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}

@keyframes adepthGradientText {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes adepthDotGlow {
    from { box-shadow: 0 0 0 5px rgba(84,227,246,.13), 0 0 14px rgba(84,227,246,.45); }
    to { box-shadow: 0 0 0 7px rgba(84,227,246,.18), 0 0 28px rgba(84,227,246,.95); }
}

@keyframes adepthGlowBreath {
    0%, 100% { opacity: .72; }
    50% { opacity: 1; }
}

@keyframes adepthKickerShine {
    0%, 65% { transform: translateX(-130%); }
    85%, 100% { transform: translateX(130%); }
}

@keyframes adepthBorderFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

@keyframes adepthButtonSweep {
    0%, 60% { transform: translateX(-130%); }
    78%, 100% { transform: translateX(130%); }
}

@keyframes adepthTimelinePulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(8,121,201,.15); }
    50% { box-shadow: 0 0 0 8px rgba(8,121,201,.07), 0 0 22px rgba(12,166,221,.20); }
}

@keyframes adepthCtaOrbit {
    to { transform: rotate(360deg); }
}

@keyframes adepthFooterFlow {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* ---------- RESPONSIVE MOTION TUNING ---------- */
@media (max-width: 991px) {
    .amp-product-card:hover,
    .amp-matrix-card:hover,
    .amp-content-panel:hover {
        transform: translateY(-7px);
    }

    .mega-pill:hover {
        transform: translateY(-2px);
    }
}

@media (max-width: 767px) {
    .amp-hero-copy {
        animation: adepthFadeUp .75s var(--ease-spring) both;
    }

    .amp-hero h1 {
        animation-duration: .8s;
    }

    .amp-product-image-card:hover {
        transform: translateY(-4px);
    }

    .amp-product-card:hover,
    .amp-matrix-card:hover,
    .amp-content-panel:hover,
    .amp-service-item-modern:hover,
    .amp-application-item:hover {
        transform: translateY(-5px);
    }

    /* Avoid expensive large blur layers on small screens. */
    .amp-hero::before,
    .amp-hero::after,
    .amp-visual-glow {
        filter: blur(45px);
    }

    .amp-product-card::before,
    .amp-matrix-card::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .amp-hero {
        background:
            radial-gradient(circle at 80% 20%, rgba(71,215,237,.10), transparent 25%),
            var(--hero-bg);
    }

    .mega-pill {
        transition-duration: 220ms;
    }

    .amp-btn {
        min-height: 52px;
    }
}

/* ---------- ACCESSIBILITY: MOTION IS REDUCED ONLY WHEN USER REQUESTS IT ---------- */
@media (prefers-reduced-motion: reduce) {
    .amp-hero::before,
    .amp-hero::after,
    .amp-hero-grid,
    .amp-hero-copy,
    .amp-eyebrow,
    .amp-eyebrow-dot,
    .amp-hero h1,
    .amp-hero-lead,
    .amp-hero-actions,
    .amp-hero-tags,
    .amp-visual-glow,
    .amp-product-image-card,
    .amp-floating-card,
    .amp-section-kicker::after,
    .amp-matrix-card::before,
    .amp-cta-section::before,
    #footer::before {
        animation: none !important;
    }

    .amp-js .amp-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- PRINT: KEEP ORIGINAL CLEAN PRINT BEHAVIOR ---------- */
@media print {
    #pageloader,
    .loader {
        display: none !important;
    }
}



/* ADEPTH FINAL ENHANCEMENT OVERRIDE
   Existing design preserved. Capability strip intentionally removed from markup.
*/
.amp-capability-strip,
#capability-strip {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* ==========================================================================
   HERO BACKGROUND IMAGE — hero-bg.png WITH READABILITY OVERLAY (ALL PAGES)
   Layer order: dark linear scrim → centre radial scrim → hero-bg.png
   ========================================================================== */
.amp-hero,
.amp-page-hero,
.page-hero {
    background:
        linear-gradient(180deg,
            rgba(2, 12, 24, .82) 0%,
            rgba(2, 12, 24, .55) 45%,
            rgba(2, 12, 24, .70) 75%,
            rgba(2, 12, 24, .90) 100%),
        radial-gradient(ellipse 70% 60% at 50% 40%,
            rgba(2, 12, 24, .50) 0%,
            rgba(2, 12, 24, .22) 55%,
            rgba(2, 12, 24, 0) 100%),
        url("../images/hero-bg.png") center 30% / cover no-repeat #020c18;
}

/* Keep the animated grid + orbit rings visible above the photo */
.amp-hero .amp-hero-grid { z-index: 0; opacity: .22; }
.amp-hero:before, .amp-hero:after { z-index: 0; }
.amp-hero-container { z-index: 2; }

/* ----- Text readability over the photo ----- */
.amp-hero h1,
.amp-page-hero h1,
.page-hero h1 {
    text-shadow: 0 2px 4px rgba(2, 12, 24, .55), 0 14px 44px rgba(0, 0, 0, .45);
}

.amp-hero-lead,
.amp-page-hero .lead,
.amp-page-hero p,
.page-hero p {
    color: #eef6fc !important;
    text-shadow: 0 1px 2px rgba(2, 12, 24, .60), 0 6px 22px rgba(0, 0, 0, .35);
}

.amp-eyebrow {
    background: rgba(3, 18, 33, .62);
    border-color: rgba(146, 229, 247, .38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.amp-hero-tags span {
    background: rgba(3, 18, 33, .60);
    border-color: rgba(255, 255, 255, .22);
    color: #e6f1f9;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.amp-scroll-cue {
    color: #dcebf5 !important;
    text-shadow: 0 1px 2px rgba(2, 12, 24, .60);
}

/* Slightly reposition the artwork on small screens so machinery stays visible */
@media (max-width: 767px) {
    .amp-hero,
    .amp-page-hero,
    .page-hero {
        background-position: center 42%;
    }
}


/* ==========================================================================
   LOGO-ONLY NAVBAR ENHANCEMENT
   --------------------------------------------------------------------------
   The updated index.html now contains only the logo inside .mega-brand.
   These rules keep the existing navbar design intact while using the
   available horizontal space to make the complete logo more visible.
   ========================================================================== */

/* Desktop: allow the logo area to grow horizontally into the unused space */
@media (min-width: 1200px) {
    body.amp-page .mega-inner {
        align-items: center;
        gap: 20px;
    }

    body.amp-page .mega-brand {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        width: auto;
        border-right: 0;
        padding-right: 24px;
        justify-content: flex-start;
    }

    body.amp-page .mega-brand img {
        display: block;
        width: min(100%, 780px);
        max-width: 780px;
        height: auto;
        max-height: 104px;
        object-fit: contain;
        object-position: left center;
    }

    /* Keep the navigation on the right and prevent it from being squeezed */
    body.amp-page .mega-nav {
        flex: 0 0 auto;
        margin-left: auto;
        min-width: max-content;
    }
}

/* Large desktop: make better use of the wider header */
@media (min-width: 1400px) {
    body.amp-page .mega-brand img {
        width: min(100%, 820px);
        max-width: 820px;
        max-height: 108px;
    }

    body.amp-page .mega-brand {
        padding-right: 28px;
    }
}

/* Laptop: use the available left-side space without disturbing the pills */
@media (min-width: 992px) and (max-width: 1199px) {
    body.amp-page .mega-brand {
        flex: 1 1 auto;
        min-width: 0;
        border-right: 0;
        padding-right: 18px;
    }

    body.amp-page .mega-brand img {
        width: min(100%, 560px);
        max-width: 560px;
        height: auto;
        max-height: 82px;
        object-fit: contain;
        object-position: left center;
    }

    body.amp-page .mega-nav {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

/* Tablet/mobile: retain the existing compact header behavior */
@media (max-width: 991px) {
    body.amp-page .mega-brand {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        border-right: 0;
        padding-right: 0;
    }

    body.amp-page .mega-brand img {
        width: min(100%, 320px);
        max-width: 320px;
        height: auto;
        max-height: 58px;
        object-fit: contain;
        object-position: left center;
    }
}

/* Small phones: keep the logo readable while preserving the hamburger */
@media (max-width: 480px) {
    body.amp-page .mega-brand img {
        width: min(100%, 230px);
        max-width: 230px;
        height: auto;
        max-height: 46px;
    }
}

/* The old HTML text lockup is no longer present in index.html.
   Hide it defensively if an older cached HTML version is ever loaded. */
body.amp-page .mega-brand-text {
    display: none !important;
}


/* ==========================================================================
   HERO PRODUCT VISUAL — HOME HERO IMAGE
   Purpose:
   - Place assets/images/home-hero-bg.png inside the right-side hero card.
   - Make the image fill the visual card like the supplied reference.
   - Keep the Scientific Illustration badge and floating cards above it.
   - Preserve responsive behavior without changing the rest of the page.
   ========================================================================== */

.amp-product-visual {
    position: relative;
    width: 100%;
    min-height: 570px;
    padding: 18px 0 18px 28px;
    perspective: 1200px;
    isolation: isolate;
}

.amp-product-image-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    min-height: 520px;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 30px;
    background: #edf5f9;
    box-shadow:
        0 35px 90px rgba(0, 12, 28, 0.35),
        0 10px 35px rgba(8, 121, 201, 0.08);
    animation: ampCardIn 1s 0.15s var(--ease-spring) both;
}

/* Requested hero image: full visual-card surface */
.amp-product-image-card .amp-product-image {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 520px;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center center;
    border: 0;
    border-radius: 30px;
    background: #edf5f9;
    filter: none;
    transform: none;
    transition: transform 0.7s var(--ease-spring), filter 0.7s ease;
}

/* Subtle premium hover — does not move the card itself */
.amp-product-image-card:hover .amp-product-image {
    transform: scale(1.018);
}

/* Keep the badge clearly visible over the image */
.amp-product-image-card .amp-image-badge {
    top: 14px;
    left: 14px;
    z-index: 8;
    margin: 0;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: rgba(3, 28, 49, 0.93);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Soft readability layer only at the bottom where caption sits */
.amp-product-image-card::after {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 105px;
    pointer-events: none;
    content: "";
    background: linear-gradient(
        to top,
        rgba(237, 245, 249, 0.98) 0%,
        rgba(237, 245, 249, 0.78) 34%,
        rgba(237, 245, 249, 0.18) 72%,
        transparent 100%
    );
}

/* Caption becomes a clean overlay instead of consuming image space */
.amp-product-image-card .amp-image-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    min-height: 62px;
    margin: 0;
    padding: 13px 22px 14px;
    border-top: 1px solid rgba(8, 48, 79, 0.12);
    background: rgba(239, 247, 250, 0.74);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.amp-product-image-card .amp-image-caption strong {
    display: block;
    color: #09253b;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}

.amp-product-image-card .amp-image-caption span {
    display: block;
    margin-top: 2px;
    color: #597083;
    font-size: 11px;
    line-height: 1.45;
}

/* Keep the floating information cards in the same visual relationship
   as the supplied reference image. */
.amp-product-visual .amp-floating-card {
    z-index: 10;
}

.amp-product-visual .amp-floating-card-one {
    right: -2px;
    bottom: 76px;
}

.amp-product-visual .amp-floating-card-two {
    bottom: -2px;
    left: 0;
}

/* Desktop/tablet balance */
@media (min-width: 1200px) {
    .amp-product-visual {
        min-height: 600px;
        padding-left: 20px;
    }

    .amp-product-image-card {
        min-height: 550px;
    }

    .amp-product-image-card .amp-product-image {
        height: 550px;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .amp-product-visual {
        width: 100%;
        min-height: auto;
        margin: 35px auto 0;
        padding: 0 0 25px !important;
    }

    .amp-product-image-card {
        min-height: 0;
        width: 100%;
    }

    .amp-product-image-card .amp-product-image {
        width: 100%;
        height: clamp(360px, 65vw, 520px);
        object-fit: cover;
    }

    .amp-product-visual .amp-floating-card-one {
        right: 8px;
        bottom: 70px;
    }

    .amp-product-visual .amp-floating-card-two {
        left: 8px;
        bottom: 0;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .amp-product-visual {
        margin-top: 24px;
        padding: 0 0 20px !important;
    }

    .amp-product-image-card {
        border-radius: 22px;
    }

    .amp-product-image-card .amp-product-image {
        height: clamp(300px, 78vw, 430px);
        border-radius: 22px;
        object-position: center center;
    }

    .amp-product-image-card .amp-image-badge {
        top: 10px;
        left: 10px;
        padding: 7px 10px;
        font-size: 8px;
    }

    .amp-product-image-card .amp-image-caption {
        min-height: 56px;
        padding: 10px 14px 11px;
    }

    .amp-product-image-card .amp-image-caption strong {
        font-size: 12px;
    }

    .amp-product-image-card .amp-image-caption span {
        font-size: 9px;
    }

    .amp-product-visual .amp-floating-card {
        min-width: 0;
        max-width: 170px;
        padding: 10px 12px;
        gap: 8px;
        border-radius: 12px;
    }

    .amp-product-visual .amp-floating-card i {
        font-size: 17px;
    }

    .amp-product-visual .amp-floating-card span {
        font-size: 10px;
    }

    .amp-product-visual .amp-floating-card small {
        font-size: 7px;
    }

    .amp-product-visual .amp-floating-card-one {
        right: 5px;
        bottom: 54px;
    }

    .amp-product-visual .amp-floating-card-two {
        left: 5px;
        bottom: 0;
    }
}

/* Very small screens */
@media (max-width: 420px) {
    .amp-product-image-card .amp-product-image {
        height: 300px;
    }

    .amp-product-visual .amp-floating-card {
        max-width: 145px;
    }
}

/* Reduced-motion safety */
@media (prefers-reduced-motion: reduce) {
    .amp-product-image-card .amp-product-image {
        transition: none;
    }

    .amp-product-image-card:hover .amp-product-image {
        transform: none;
    }
}
/* ==========================================================================
   17A. FINAL GLOBAL FOOTER — TWO-SIDE LAYOUT + GLOBAL DISCLAIMER
   --------------------------------------------------------------------------
   This block intentionally lives at the END of style.css so it wins over
   older footer/grid rules without changing the existing page components.

   LEFT  : every existing footer widget / quick-link / contact block
   RIGHT : one stylesheet-generated Product Information Notice

   Because the notice is generated with ::after, pages only need to load this
   master stylesheet. No separate disclaimer HTML is required on each page.
   ========================================================================== */

#footer {
    --amp-footer-gap: clamp(30px, 4vw, 58px);
}

/* The disclaimer is now globally generated by this master stylesheet.
   Hide page-specific copies so every page has one consistent notice. */
#footer .amp-footer-disclaimer {
    display: none !important;
}

/* Existing footer content occupies the LEFT side */
#footer .footer-widget > .container {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    column-gap: var(--amp-footer-gap);
    align-items: stretch;
}

#footer .footer-widget > .container > .row {
    min-width: 0;
    margin-left: -15px;
    margin-right: -15px;
    grid-column: 1;
    grid-row: 1;
}

/* The disclaimer is created automatically on every page using style.css */
#footer .footer-widget > .container::after {
    content:
        "PRODUCT INFORMATION NOTICE\A\A"
        "Product information on this website represents potential capabilities "
        "of suitably configured scientific research systems. Exact specifications, "
        "supported techniques, performance, availability and configuration depend "
        "on the manufacturer, model and installed accessories. Contact Adepth "
        "Consulting Engineers for configuration-specific information.";
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-width: 0;
    min-height: 100%;
    padding: 25px 26px;
    border: 1px solid rgba(127, 212, 239, 0.18);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow: 0 18px 45px rgba(0, 0, 0, .16);
    color: #a9bfd1;
    font-family: var(--font-family-body);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0;
    white-space: pre-line;
    text-align: left;
    position: relative;
}

/* Small cyan accent line for a more premium/technical appearance */
#footer .footer-widget > .container::before {
    content: "";
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    width: 34px;
    height: 3px;
    margin: 25px 0 0 26px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--amp-blue-2), var(--amp-cyan));
    z-index: 2;
    pointer-events: none;
}

/* Prevent the generated notice from colliding with the existing footer form */
#footer .footer-widget > .container > .row {
    position: relative;
    z-index: 1;
}

/* Tablet: retain the two-side layout */
@media (max-width: 991px) and (min-width: 768px) {
    #footer .footer-widget > .container {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr);
        column-gap: 30px;
    }

    #footer .footer-widget > .container::after {
        padding: 21px 20px;
        font-size: 10.5px;
        line-height: 1.7;
    }

    #footer .footer-widget > .container::before {
        margin-left: 20px;
        margin-top: 21px;
    }
}

/* Mobile: same two-side concept, stacked vertically.
   Existing footer content remains FIRST; disclaimer remains SECOND. */
@media (max-width: 767px) {
    #footer .footer-widget {
        padding: 48px 0 30px;
    }

    #footer .footer-widget > .container {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    #footer .footer-widget > .container > .row {
        width: 100%;
        margin-left: -15px;
        margin-right: -15px;
        order: 1;
    }

    #footer .footer-widget > .container::before {
        order: 2;
        width: 30px;
        height: 3px;
        margin: 0 0 -48px 17px;
        z-index: 2;
    }

    #footer .footer-widget > .container::after {
        order: 3;
        width: 100%;
        min-height: 0;
        padding: 20px 18px;
        border-radius: 13px;
        border-top: 1px solid rgba(127, 212, 239, .16);
        font-size: 10.5px;
        line-height: 1.65;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    #footer .footer-widget > .container {
        gap: 24px;
    }

    #footer .footer-widget > .container::after {
        padding: 17px 15px;
        font-size: 10px;
        line-height: 1.62;
    }
}

/* Accessibility: remove decorative transition expectations under reduced motion */
@media (prefers-reduced-motion: reduce) {
    #footer .footer-widget > .container::after {
        transition: none;
    }
}

/* ==========================================================================
   17A. PRODUCTION FOOTER CONTRACT
   --------------------------------------------------------------------------
   IMPORTANT:
   - The Product Information Notice is real HTML in every footer.
   - Do NOT use CSS content: to generate legal/product text.
   - Do NOT hide .amp-footer-disclaimer.
   - Desktop: footer information LEFT + notice RIGHT.
   - Mobile: footer information TOP + notice BELOW.
   ========================================================================== */

#footer.amp-footer {
    --footer-bg: var(--amp-navy-900);
    --footer-bg-deep: #04101f;
    --footer-text: #c6d4e6;
    --footer-muted: #a9bcd4;
    --footer-link: #7fd4ef;
    --footer-accent: var(--amp-blue-2);
    --footer-divider: rgba(127, 212, 239, 0.18);
    background: var(--footer-bg);
    color: var(--footer-text);
    width: 100%;
    overflow: hidden;
}

#footer .amp-footer-main {
    padding: clamp(52px, 6vw, 72px) 0 clamp(36px, 4vw, 46px);
}

#footer .amp-footer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    gap: clamp(34px, 4vw, 58px);
    align-items: stretch;
}

#footer .amp-footer-left {
    min-width: 0;
}

#footer .amp-footer-left > .row {
    margin-left: -15px;
    margin-right: -15px;
}

#footer .amp-footer-right {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

#footer .amp-footer-right::before {
    content: "";
    position: absolute;
    left: calc(clamp(34px, 4vw, 58px) / -2);
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--footer-divider) 18%,
        var(--footer-divider) 82%,
        transparent 100%
    );
    pointer-events: none;
}

/* Footer headings */
#footer .widget-title {
    margin-bottom: 22px;
}

#footer .widget-title h3.title {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: 11px;
    color: var(--amp-white);
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .5px;
}

#footer .widget-title h3.title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--amp-blue-2), var(--amp-cyan));
}

/* Footer text and contact */
#footer address,
#footer .amp-footer-left p {
    color: var(--footer-muted);
    font-size: 14px;
    line-height: 1.85;
}

#footer address {
    margin: 0 0 18px;
    font-style: normal;
}

#footer .amp-footer-left strong {
    color: #dbeaf4;
}

#footer a {
    color: var(--footer-link);
    text-decoration: none;
    transition: color .25s ease, padding-left .25s ease;
}

#footer a:hover,
#footer a:focus-visible {
    color: #b5e7f7;
    text-decoration: none;
}

/* Quick links */
#footer .amp-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

#footer .amp-footer-links li {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

#footer .amp-footer-links li:last-child {
    border-bottom: 0;
}

#footer .amp-footer-links a {
    display: block;
    padding: 9px 0;
    color: var(--footer-muted);
}

#footer .amp-footer-links a:hover,
#footer .amp-footer-links a:focus-visible {
    color: var(--footer-link);
    padding-left: 7px;
}

/* Footer form */
#footer .form-message {
    margin-bottom: 12px;
}

#footer .form-control {
    width: 100%;
    height: 44px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 9px;
    color: var(--amp-white);
    background: rgba(255, 255, 255, .06);
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

#footer .form-control::placeholder {
    color: #7d92ac;
    opacity: 1;
}

#footer .form-control:focus {
    border-color: var(--amp-blue-2);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 3px rgba(12, 166, 221, .16);
    outline: 0;
}

#footer textarea.form-control {
    min-height: 104px;
    height: auto;
    resize: vertical;
}

#footer .btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 20px;
    border: 0;
    border-radius: 9px;
    color: #06213c;
    background: var(--amp-blue-2);
    font-weight: 700;
    transition: transform .3s var(--ease-spring), background .3s ease, box-shadow .3s ease;
}

#footer .btn-default:hover,
#footer .btn-default:focus-visible {
    color: #06213c;
    background: var(--amp-cyan);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(12, 166, 221, .22);
}

/* --------------------------------------------------------------------------
   PRODUCT INFORMATION NOTICE
   -------------------------------------------------------------------------- */

#footer .amp-footer-disclaimer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#footer .amp-disclaimer {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: clamp(22px, 2.5vw, 28px);
    border: 1px solid rgba(127, 212, 239, .20);
    border-radius: 17px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .17),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

#footer .amp-disclaimer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    width: 42px;
    height: 3px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, var(--amp-blue-2), var(--amp-cyan));
}

#footer .amp-disclaimer-icon {
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: 1px;
    border: 1px solid rgba(127, 212, 239, .16);
    border-radius: 10px;
    color: var(--footer-link);
    background: rgba(12, 166, 221, .08);
    font-size: 15px;
}

#footer .amp-disclaimer-content {
    min-width: 0;
}

#footer .amp-disclaimer-content h3 {
    margin: 0 0 9px;
    color: #dff6fc;
    font-family: var(--font-family-heading);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#footer .amp-disclaimer-content p {
    margin: 0 !important;
    color: #a9bfd1 !important;
    font-family: var(--font-family-body);
    font-size: 11.5px !important;
    font-weight: 400;
    line-height: 1.75 !important;
}

/* Copyright */
#footer .copyright {
    background: var(--footer-bg-deep);
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 18px 0;
}

#footer .copyright p {
    margin: 0;
    color: #7d92ac;
    font-size: 13px;
    line-height: 1.6;
}

/* Tablet */
@media (max-width: 991px) and (min-width: 768px) {
    #footer .amp-footer-layout {
        grid-template-columns: minmax(0, 1fr) minmax(285px, .85fr);
        gap: 34px;
    }

    #footer .amp-footer-right::before {
        left: -17px;
    }

    #footer .amp-disclaimer {
        padding: 21px 20px;
        gap: 12px;
    }

    #footer .amp-disclaimer-content h3 {
        font-size: 12px;
    }

    #footer .amp-disclaimer-content p {
        font-size: 10.5px !important;
        line-height: 1.68 !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #footer .amp-footer-main {
        padding: 48px 0 30px;
    }

    #footer .amp-footer-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    #footer .amp-footer-left {
        width: 100%;
    }

    #footer .amp-footer-right {
        width: 100%;
        display: block;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid rgba(127, 212, 239, .16);
    }

    #footer .amp-footer-right::before {
        display: none;
    }

    #footer .amp-disclaimer {
        height: auto;
        min-height: 0;
        padding: 19px 17px;
        border-radius: 13px;
    }

    #footer .amp-disclaimer::before {
        left: 17px;
        width: 34px;
    }

    #footer .amp-disclaimer-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 14px;
        border-radius: 8px;
    }

    #footer .amp-disclaimer-content h3 {
        margin-bottom: 6px;
        font-size: 10.5px;
    }

    #footer .amp-disclaimer-content p {
        font-size: 10.5px !important;
        line-height: 1.65 !important;
    }

    #footer .copyright {
        padding: 16px 0;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    #footer .amp-footer-right {
        margin-top: 25px;
        padding-top: 25px;
    }

    #footer .amp-disclaimer {
        gap: 10px;
        padding: 16px 14px;
    }

    #footer .amp-disclaimer-icon {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    #footer .amp-disclaimer-content p {
        font-size: 10px !important;
        line-height: 1.6 !important;
    }
}

/* Accessibility */
#footer .amp-disclaimer-content h3,
#footer .amp-disclaimer-content p {
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    #footer a,
    #footer .btn-default {
        transition: none !important;
    }
}

/* Print: keep the notice visible and readable */
@media print {
    #footer {
        color: #111;
        background: #fff !important;
    }

    #footer .amp-disclaimer {
        color: #111;
        background: #fff;
        border: 1px solid #999;
        box-shadow: none;
    }

    #footer .amp-disclaimer-content h3,
    #footer .amp-disclaimer-content p,
    #footer address,
    #footer .amp-footer-left p,
    #footer .amp-footer-links a {
        color: #111 !important;
    }
}


/* ==========================================================================
   FINAL FOOTER + LOGO OVERRIDE — DISCLAIMER REMOVED
   - Removes the hard-coded/generated Product Information Notice.
   - Keeps the footer as two real content sides.
   - Keeps two footer sides on mobile instead of turning into one long block.
   - Enlarges the logo horizontally so the logo wording is more visible.
   ========================================================================== */

/* Never generate the old disclaimer from CSS. */
#footer .footer-widget > .container::after {
    content: none !important;
    display: none !important;
}

#footer .footer-widget > .container::before {
    content: none !important;
    display: none !important;
}

#footer .amp-footer-disclaimer,
#footer .amp-disclaimer,
#footer .amp-disclaimer-icon,
#footer .amp-disclaimer-content {
    display: none !important;
}

/* Real two-side footer structure. */
#footer .amp-footer-main {
    width: 100%;
    padding: clamp(48px, 5vw, 68px) 0 42px;
}

#footer .amp-footer-main > .container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

#footer .amp-footer-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    gap: clamp(28px, 4vw, 58px) !important;
    align-items: stretch;
}

#footer .amp-footer-left,
#footer .amp-footer-right {
    min-width: 0;
    width: 100%;
}

#footer .amp-footer-left {
    padding-right: clamp(18px, 2.5vw, 34px);
}

#footer .amp-footer-right {
    padding-left: clamp(18px, 2.5vw, 34px);
    border-left: 1px solid var(--footer-divider, rgba(127, 212, 239, .18));
}

/* Contact + Quick Links stay together on the LEFT side. */
#footer .amp-footer-left > .container {
    width: 100%;
    padding: 0;
}

#footer .amp-footer-left > .container > .row {
    margin-left: -15px;
    margin-right: -15px;
}

/* Send Message remains the RIGHT side. */
#footer .amp-footer-right > .widget {
    width: 100%;
    padding: 0;
}

#footer .amp-footer-right .widget-title {
    margin-bottom: 22px;
}

#footer .amp-footer-right .contact-form,
#footer .amp-footer-right form {
    width: 100%;
}

#footer .amp-footer-right .form-group {
    margin-bottom: 12px;
}

#footer .amp-footer-right .form-control {
    width: 100%;
    max-width: 100%;
}

/* Tablet: keep two sides. */
@media (max-width: 991px) and (min-width: 768px) {
    #footer .amp-footer-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) !important;
        gap: 30px !important;
    }

    #footer .amp-footer-left {
        padding-right: 18px;
    }

    #footer .amp-footer-right {
        padding-left: 18px;
    }
}

/* Mobile: STILL TWO SIDES — compact two-column footer. */
@media (max-width: 767px) {
    #footer .amp-footer-main {
        padding: 38px 0 28px;
    }

    #footer .amp-footer-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 18px !important;
        align-items: start;
    }

    #footer .amp-footer-left {
        width: 100%;
        padding-right: 10px;
    }

    #footer .amp-footer-right {
        width: 100%;
        padding-left: 10px;
        padding-top: 0;
        margin-top: 0;
        border-left: 1px solid rgba(127, 212, 239, .18);
        border-top: 0;
    }

    #footer .amp-footer-left > .container > .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    #footer .amp-footer-left [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Stack Contact + Quick Links inside the LEFT side, not across the full footer. */
    #footer .amp-footer-left .col-sm-6,
    #footer .amp-footer-left .col-md-4 {
        width: 100%;
    }

    #footer .widget-title h3.title {
        font-size: 16px;
        margin-bottom: 14px;
    }

    #footer address,
    #footer .amp-footer-left p {
        font-size: 11px;
        line-height: 1.65;
    }

    #footer .amp-footer-links a {
        padding: 7px 0;
        font-size: 11px;
    }

    #footer .amp-footer-right .form-control {
        height: 38px;
        padding: 8px 9px;
        font-size: 11px;
        border-radius: 7px;
    }

    #footer .amp-footer-right textarea.form-control {
        min-height: 72px;
    }

    #footer .amp-footer-right .btn-default {
        width: 100%;
        padding: 9px 8px;
        font-size: 11px;
    }

    #footer .amp-footer-right .form-group {
        margin-bottom: 8px;
    }

    #footer .copyright {
        padding: 14px 0;
    }

    #footer .copyright p {
        font-size: 10.5px;
        line-height: 1.5;
    }
}

/* Very small phones: preserve the two-side layout and prevent overflow. */
@media (max-width: 420px) {
    #footer .amp-footer-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    #footer .amp-footer-left {
        padding-right: 7px;
    }

    #footer .amp-footer-right {
        padding-left: 7px;
    }

    #footer .widget-title h3.title {
        font-size: 14px;
    }

    #footer address,
    #footer .amp-footer-left p,
    #footer .amp-footer-links a {
        font-size: 10px;
    }

    #footer .amp-footer-right .form-control {
        font-size: 10px;
        padding-left: 7px;
        padding-right: 7px;
    }
}

/* --------------------------------------------------------------------------
   LOGO: use more of the available horizontal space.
   The image is scaled larger rather than vertically stretched, so its
   original proportions remain intact while the wording becomes clearer.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    body.amp-page .mega-brand {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        padding-right: 12px !important;
        border-right: 0 !important;
    }

    body.amp-page .mega-brand img,
    body.amp-page img.amp-logo {
        width: min(100%, 980px) !important;
        max-width: 980px !important;
        height: auto !important;
        max-height: 112px !important;
        object-fit: contain;
        object-position: left center;
    }
}

@media (min-width: 1400px) {
    body.amp-page .mega-brand img,
    body.amp-page img.amp-logo {
        width: min(100%, 1080px) !important;
        max-width: 1080px !important;
        max-height: 116px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body.amp-page .mega-brand {
        flex: 1 1 auto !important;
        max-width: none !important;
        padding-right: 10px !important;
        border-right: 0 !important;
    }

    body.amp-page .mega-brand img,
    body.amp-page img.amp-logo {
        width: min(100%, 680px) !important;
        max-width: 680px !important;
        height: auto !important;
        max-height: 88px !important;
        object-fit: contain;
        object-position: left center;
    }
}

@media (max-width: 991px) {
    body.amp-page .mega-brand img,
    body.amp-page img.amp-logo {
        width: min(100%, 360px) !important;
        max-width: 360px !important;
        height: auto !important;
        max-height: 62px !important;
        object-fit: contain;
        object-position: left center;
    }
}

@media (max-width: 480px) {
    body.amp-page .mega-brand img,
    body.amp-page img.amp-logo {
        width: min(100%, 270px) !important;
        max-width: 270px !important;
        max-height: 50px !important;
    }
}

/* ==========================================================================
   FINAL VISUAL FIX — HERO BACKGROUNDS + HOME HERO IMAGE + EXPO NOTICE
   Only overrides the requested visual issues. Existing structure/content/SEO
   remain unchanged.
   ========================================================================== */

/* HERO: make hero-bg.png the complete visible hero surface */
body.amp-page .amp-hero {
    background:
        linear-gradient(125deg,
            rgba(2, 12, 24, .58) 0%,
            rgba(6, 37, 64, .42) 48%,
            rgba(7, 83, 120, .36) 100%),
        url("../images/hero-bg.png") center center / cover no-repeat !important;
    background-attachment: scroll !important;
}

@media (min-width: 992px) {
    body.amp-page .amp-hero {
        background-position: center center !important;
    }
}

/* HOME HERO VISUAL: image fills the complete card; remove the white panel */
body.amp-page .amp-product-image-card {
    padding: 0 !important;
    background: transparent !important;
    border-color: rgba(255,255,255,.34) !important;
    box-shadow:
        0 35px 90px rgba(0,12,28,.42),
        0 0 0 1px rgba(255,255,255,.08) inset !important;
}

body.amp-page .amp-product-image-card .amp-product-image {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 520px;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: transparent !important;
}

/* Remove the light/white caption treatment that creates the visible white box.
   Keep the existing caption text, but make it a dark glass overlay. */
body.amp-page .amp-product-image-card::after {
    height: 115px !important;
    background: linear-gradient(
        to top,
        rgba(2,12,24,.78) 0%,
        rgba(2,12,24,.40) 42%,
        transparent 100%
    ) !important;
}

body.amp-page .amp-product-image-card .amp-image-caption {
    min-height: 62px !important;
    padding: 13px 22px 14px !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(3,24,42,.30) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

body.amp-page .amp-product-image-card .amp-image-caption strong {
    color: #fff !important;
}

body.amp-page .amp-product-image-card .amp-image-caption span {
    color: #c8dce8 !important;
}

/* Desktop: preserve the large visual while keeping the complete image visible. */
@media (min-width: 1200px) {
    body.amp-page .amp-product-image-card .amp-product-image {
        height: 550px !important;
        min-height: 550px !important;
    }
}

/* Tablet */
@media (max-width: 991px) {
    body.amp-page .amp-product-image-card .amp-product-image {
        height: clamp(360px, 65vw, 520px) !important;
        min-height: 360px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    body.amp-page .amp-product-image-card {
        border-radius: 22px !important;
    }

    body.amp-page .amp-product-image-card .amp-product-image {
        height: clamp(300px, 78vw, 430px) !important;
        min-height: 300px;
        border-radius: 22px !important;
    }

    body.amp-page .amp-product-image-card .amp-image-caption {
        padding: 11px 16px 12px !important;
    }
}

/* ==========================================================================
   SEMICON INDIA 2026 — RED EXPO NOTIFICATION
   Entire notification uses the Allied Resourcing logo red treatment.
   ========================================================================== */

body.amp-page .adepth-semicon-banner {
    border-top: 1px solid rgba(201,64,60,.45) !important;
    border-bottom: 1px solid rgba(201,64,60,.55) !important;
    background:
        linear-gradient(90deg,
            #7f1818 0%,
            #a92626 38%,
            #c9403c 62%,
            #8e1d1d 100%) !important;
    box-shadow:
        0 8px 24px rgba(86,12,12,.34),
        0 3px 12px rgba(201,64,60,.18) !important;
}

body.amp-page .adepth-semicon-banner__item {
    color: #fff !important;
    text-shadow: 0 2px 5px rgba(70,0,0,.42);
}

body.amp-page .adepth-semicon-banner__label {
    color: #fff !important;
    border-color: rgba(255,255,255,.48) !important;
    background: rgba(92,0,0,.30) !important;
    box-shadow: 0 3px 10px rgba(55,0,0,.20);
}

body.amp-page .adepth-semicon-banner__strong,
body.amp-page .adepth-semicon-banner__booth,
body.amp-page .adepth-semicon-banner__date {
    color: #fff !important;
    text-shadow: 0 2px 5px rgba(70,0,0,.46);
}

body.amp-page .adepth-semicon-banner__allied,
body.amp-page .adepth-semicon-banner__semi {
    border-color: rgba(255,255,255,.55) !important;
    background: #fff !important;
    box-shadow:
        0 5px 16px rgba(54,0,0,.30),
        0 0 0 1px rgba(255,255,255,.18) inset !important;
}

body.amp-page .adepth-semicon-banner__close {
    color: #fff !important;
    border-color: rgba(255,255,255,.55) !important;
    background: rgba(83,0,0,.72) !important;
    box-shadow:
        0 5px 16px rgba(54,0,0,.34),
        0 0 12px rgba(255,255,255,.08) !important;
}

body.amp-page .adepth-semicon-banner__close:hover,
body.amp-page .adepth-semicon-banner__close:focus-visible {
    color: #fff !important;
    border-color: #fff !important;
    background: #c9403c !important;
    box-shadow: 0 7px 20px rgba(54,0,0,.40) !important;
}


/* ==========================================================================
   FINAL HERO VISIBILITY ENHANCEMENT — COMPLETE IMAGE / NO CROPPING
   --------------------------------------------------------------------------
   Purpose:
   - Keep all existing HTML, text, navigation, animations and styling intact.
   - Show the COMPLETE hero-bg.png without the top/bottom crop caused by cover.
   - Preserve the image's natural proportions.
   - Keep the existing readability overlays and visual effects.
   - Show the COMPLETE home-hero-bg.png inside the product visual as well.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PRIMARY HERO — hero-bg.png
   The previous rule used background-size: cover, which necessarily crops
   a wide/16:9 image when the hero is shorter than the image ratio.
   -------------------------------------------------------------------------- */
body.amp-page .amp-hero {
    position: relative;
    overflow: hidden !important;

    /* Keep the hero tall enough for the complete 16:9 artwork. */
    min-height: max(680px, 56.25vw) !important;

    /*
     * Preserve the complete source image.
     * 100% auto keeps the entire horizontal artwork visible without
     * stretching it vertically.
     */
    background:
        linear-gradient(
            125deg,
            rgba(2, 12, 24, .58) 0%,
            rgba(6, 37, 64, .42) 48%,
            rgba(7, 83, 120, .36) 100%
        ),
        url("../images/hero-bg.png") center top / 100% auto no-repeat,
        #020c18 !important;

    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
}

/* Keep the complete hero artwork aligned to the top on large screens. */
@media (min-width: 1200px) {
    body.amp-page .amp-hero {
        min-height: max(760px, 56.25vw) !important;
        background-position: center top !important;
        background-size: 100% auto !important;
    }
}

/* Prevent the hero from becoming excessively tall on ultra-wide monitors. */
@media (min-width: 1920px) {
    body.amp-page .amp-hero {
        min-height: 1080px !important;
    }
}

/* --------------------------------------------------------------------------
   HERO CONTENT — retain the original visual hierarchy while the image is
   fully visible behind it.
   -------------------------------------------------------------------------- */
body.amp-page .amp-hero-container {
    position: relative;
    z-index: 3 !important;
}

body.amp-page .amp-hero-copy {
    position: relative;
    z-index: 4 !important;
}

body.amp-page .amp-hero-grid {
    z-index: 1 !important;
    pointer-events: none !important;
}

body.amp-page .amp-hero::before,
body.amp-page .amp-hero::after {
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Preserve readability without hiding the artwork. */
body.amp-page .amp-hero h1 {
    text-shadow:
        0 3px 8px rgba(0, 0, 0, .62),
        0 14px 42px rgba(0, 0, 0, .42) !important;
}

body.amp-page .amp-hero-lead {
    text-shadow:
        0 2px 5px rgba(0, 0, 0, .58),
        0 8px 24px rgba(0, 0, 0, .30) !important;
}

/* --------------------------------------------------------------------------
   HOME HERO PRODUCT IMAGE — home-hero-bg.png
   Show the complete source artwork rather than cropping it with cover.
   -------------------------------------------------------------------------- */
body.amp-page .amp-product-image-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(237, 245, 249, .92) !important;
}

body.amp-page .amp-product-image-card .amp-product-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;

    /*
     * CONTAIN = entire image remains visible.
     * No logo/text/equipment in home-hero-bg.png is cut off.
     */
    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    border: 0 !important;
    border-radius: 30px !important;
    background: #edf5f9 !important;
    transform: none !important;
}

body.amp-page .amp-product-image-card:hover .amp-product-image {
    transform: scale(1.008) !important;
}

/* Keep the existing caption as an overlay without covering the artwork. */
body.amp-page .amp-product-image-card .amp-image-caption {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 8 !important;
}

/* --------------------------------------------------------------------------
   TABLET — complete hero image, responsive height.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 768px) {
    body.amp-page .amp-hero {
        min-height: max(680px, 56.25vw) !important;
        background-size: 100% auto !important;
        background-position: center top !important;
    }

    body.amp-page .amp-product-image-card .amp-product-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain !important;
    }
}

/* --------------------------------------------------------------------------
   MOBILE — never crop hero-bg.png.
   Contain keeps the complete source artwork visible.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body.amp-page .amp-hero {
        min-height: 760px !important;
        padding: 70px 0 60px !important;

        /*
         * On narrow screens, contain is safer than cover because it guarantees
         * that no part of hero-bg.png is lost.
         */
        background-size: contain !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }

    body.amp-page .amp-product-image-card {
        min-height: 0 !important;
    }

    body.amp-page .amp-product-image-card .amp-product-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain !important;
        border-radius: 22px !important;
    }
}

/* Small phones — preserve the whole artwork and avoid horizontal overflow. */
@media (max-width: 480px) {
    body.amp-page .amp-hero {
        min-height: 720px !important;
        background-size: contain !important;
        background-position: center top !important;
    }
}

/* Accessibility: preserve the image while respecting reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
    body.amp-page .amp-hero::before,
    body.amp-page .amp-hero::after,
    body.amp-page .amp-hero-copy,
    body.amp-page .amp-product-image-card,
    body.amp-page .amp-product-image {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   ADEPTH FINAL SITE-WIDE REPLICATION
   --------------------------------------------------------------------------
   Applied consistently to index.html and every internal page.
   Existing CSS remains intact; these are final scoped overrides only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBAL DISCLAIMER — ALWAYS ABOVE FOOTER
   -------------------------------------------------------------------------- */
.amp-global-disclaimer{
    position:relative;
    z-index:2;
    width:100%;
    padding:28px 0;
    border-top:1px solid rgba(127,212,239,.14);
    border-bottom:1px solid rgba(127,212,239,.10);
    background:linear-gradient(180deg,#eef7fb 0%,#f7fbfd 100%);
}
.amp-global-disclaimer .amp-disclaimer-inner{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 15px;
}
.amp-global-disclaimer .amp-disclaimer-box{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:18px 22px;
    border:1px solid rgba(8,121,201,.16);
    border-radius:14px;
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 35px rgba(4,37,65,.08);
}
.amp-global-disclaimer .amp-disclaimer-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#eaf6fc;
    color:#0879c9;
    font-size:15px;
}
.amp-global-disclaimer h2{
    margin:0 0 5px;
    color:#061525;
    font-family:"Oswald",Arial,sans-serif;
    font-size:12px;
    font-weight:600;
    line-height:1.35;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.amp-global-disclaimer p{
    margin:0!important;
    color:#536d80!important;
    font-size:11.5px!important;
    line-height:1.65!important;
}

/* --------------------------------------------------------------------------
   LARGE HORIZONTAL LOGO — USE AVAILABLE HEADER SPACE
   -------------------------------------------------------------------------- */
body.amp-page .mega-inner{
    width:min(1500px,100%);
}
body.amp-page .mega-brand{
    flex:1 1 auto;
    min-width:0;
    max-width:none;
}
body.amp-page .mega-brand img,
body.amp-page .sticky-navigation .navbar-brand img,
body.amp-page img.amp-logo{
    width:min(100%,900px)!important;
    max-width:900px!important;
    height:auto!important;
    max-height:104px!important;
    object-fit:contain!important;
    object-position:left center!important;
}

/* --------------------------------------------------------------------------
   HERO — COMPLETE hero-bg.png WITHOUT CROPPING
   -------------------------------------------------------------------------- */
body.amp-page .amp-hero,
body.amp-page .amp-page-hero{
    position:relative;
    overflow:hidden;
    background-position:center top!important;
    background-size:100% auto!important;
    background-repeat:no-repeat!important;
    background-attachment:scroll!important;
    min-height:max(680px,56.25vw)!important;
}

/* Pages using the shared --hero-bg variable still get complete artwork. */
body.amp-page .amp-hero{
    background-size:100% auto!important;
}

/* --------------------------------------------------------------------------
   HOME SECONDARY IMAGE — COMPLETE home-hero-bg.png
   -------------------------------------------------------------------------- */
body.amp-page .amp-product-image-card .amp-product-image{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-width:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:#edf5f9!important;
}

/* --------------------------------------------------------------------------
   FINAL DARK BLURRED TWO-SIDED FOOTER
   LEFT  : Contact Us
   RIGHT : Quick Links + Products + Send a Message
   -------------------------------------------------------------------------- */
#footer.amp-unified-footer{
    position:relative;
    overflow:hidden;
    color:#b8cddd;
    background:linear-gradient(135deg,rgba(2,11,22,.985),rgba(4,27,46,.975) 48%,rgba(3,18,32,.99));
    border-top:1px solid rgba(127,212,239,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 -18px 55px rgba(2,15,28,.18);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
#footer.amp-unified-footer:before{
    content:"";
    position:absolute;
    inset:-35% -10%;
    background:radial-gradient(circle at 18% 20%,rgba(71,215,237,.11),transparent 34%),radial-gradient(circle at 84% 55%,rgba(8,121,201,.12),transparent 36%);
    filter:blur(24px);
    pointer-events:none;
}
#footer.amp-unified-footer .amp-footer-widget{
    position:relative;
    z-index:1;
    padding:62px 0 28px;
}
#footer.amp-unified-footer .amp-footer-shell{
    max-width:1200px;
    margin:0 auto;
    padding:0 15px;
}
#footer.amp-unified-footer .amp-footer-grid{
    display:grid;
    grid-template-columns:minmax(280px,.85fr) minmax(0,1.65fr);
    gap:0;
    align-items:stretch;
}
#footer.amp-unified-footer .amp-footer-contact{
    padding:0 44px 10px 0;
    border-right:1px solid rgba(127,212,239,.18);
}
#footer.amp-unified-footer .amp-footer-right{
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(210px,1.15fr);
    gap:40px;
    padding-left:44px;
}
#footer.amp-unified-footer .amp-footer-nav-group{
    display:grid;
    grid-template-columns:minmax(150px,1fr) minmax(160px,1fr);
    gap:28px;
    min-width:0;
}
#footer.amp-unified-footer .amp-footer-message{
    min-width:0;
}
#footer.amp-unified-footer .amp-footer-kicker{
    margin-bottom:8px;
    color:#7fd4ef;
    font-size:9px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}
#footer.amp-unified-footer .amp-footer-title{
    margin:0 0 18px;
    color:#fff;
    font-family:"Oswald",Arial,sans-serif;
    font-size:22px;
    font-weight:500;
    line-height:1.2;
}
#footer.amp-unified-footer address,
#footer.amp-unified-footer .amp-footer-email{
    color:#9fb5c7;
    font-size:13px;
    line-height:1.85;
}
#footer.amp-unified-footer address{margin:0;font-style:normal}
#footer.amp-unified-footer address strong{color:#e9f5fa}
#footer.amp-unified-footer .amp-footer-email{margin:20px 0 0}
#footer.amp-unified-footer a{
    color:#a9dff0;
    text-decoration:none;
}
#footer.amp-unified-footer a:hover{color:#fff}
#footer.amp-unified-footer .amp-footer-nav ul{
    list-style:none;
    margin:0;
    padding:0;
}
#footer.amp-unified-footer .amp-footer-nav li{
    margin:0;
    border-bottom:1px solid rgba(255,255,255,.055);
}
#footer.amp-unified-footer .amp-footer-nav li:last-child{border-bottom:0}
#footer.amp-unified-footer .amp-footer-nav a{
    display:block;
    padding:7px 0;
    color:#9fb5c7;
    font-size:12.5px;
    line-height:1.45;
}
#footer.amp-unified-footer .amp-footer-nav a:before{
    content:"›";
    display:inline-block;
    margin-right:8px;
    color:#47d7ed;
}
#footer.amp-unified-footer .amp-footer-message-form{
    display:grid;
    gap:9px;
}
#footer.amp-unified-footer .amp-footer-message-form input,
#footer.amp-unified-footer .amp-footer-message-form textarea{
    width:100%;
    min-width:0;
    padding:10px 12px;
    border:1px solid rgba(127,212,239,.16);
    border-radius:8px;
    color:#eaf6fb;
    background:rgba(255,255,255,.045);
    font:inherit;
    font-size:11px;
}
#footer.amp-unified-footer .amp-footer-message-form textarea{
    min-height:72px;
    resize:vertical;
}
#footer.amp-unified-footer .amp-footer-message-form input::placeholder,
#footer.amp-unified-footer .amp-footer-message-form textarea::placeholder{
    color:#7893a6;
}
#footer.amp-unified-footer .amp-footer-message-form button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:40px;
    padding:9px 14px;
    border:1px solid rgba(71,215,237,.38);
    border-radius:8px;
    color:#fff;
    background:linear-gradient(135deg,#0879c9,#0ca6dd);
    cursor:pointer;
    font:700 11px/1 "Arimo",Arial,sans-serif;
}
#footer.amp-unified-footer .amp-footer-bottom{
    position:relative;
    z-index:1;
    margin-top:34px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.07);
    text-align:center;
}
#footer.amp-unified-footer .amp-footer-bottom p{
    margin:0;
    color:#71899a;
    font-size:10.5px;
}

/* Tablet: preserve the two main sides. */
@media (max-width:991px) and (min-width:768px){
    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo{
        max-width:650px!important;
        max-height:82px!important;
    }
    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero{
        min-height:max(620px,56.25vw)!important;
        background-size:100% auto!important;
    }
    #footer.amp-unified-footer .amp-footer-grid{
        grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);
    }
    #footer.amp-unified-footer .amp-footer-right{
        grid-template-columns:1fr;
        gap:26px;
    }
}

/* Mobile: two-sided footer remains two main visual sides:
   LEFT = Contact; RIGHT = Quick Links + Products + Message.
   The right side is not merged into the left. */
@media (max-width:767px){
    .amp-global-disclaimer{padding:20px 0}
    .amp-global-disclaimer .amp-disclaimer-inner{padding:0 12px}
    .amp-global-disclaimer .amp-disclaimer-box{gap:10px;padding:15px 16px;border-radius:11px}
    .amp-global-disclaimer .amp-disclaimer-icon{flex-basis:30px;width:30px;height:30px;font-size:14px}
    .amp-global-disclaimer h2{font-size:10.5px}
    .amp-global-disclaimer p{font-size:10.5px!important;line-height:1.6!important}

    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo{
        width:min(100%,430px)!important;
        max-width:74vw!important;
        max-height:58px!important;
    }

    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero{
        min-height:720px!important;
        background-size:contain!important;
        background-position:center top!important;
    }

    #footer.amp-unified-footer .amp-footer-widget{padding:44px 0 24px}
    #footer.amp-unified-footer .amp-footer-grid{
        display:grid;
        grid-template-columns:minmax(125px,.72fr) minmax(0,1.28fr);
        gap:0;
        align-items:start;
    }
    #footer.amp-unified-footer .amp-footer-contact{
        padding:0 18px 0 0;
        border-right:1px solid rgba(127,212,239,.18);
    }
    #footer.amp-unified-footer .amp-footer-right{
        display:flex;
        flex-direction:column;
        gap:24px;
        padding-left:18px;
        min-width:0;
    }
    #footer.amp-unified-footer .amp-footer-nav-group{
        display:grid;
        grid-template-columns:1fr;
        gap:18px;
    }
    #footer.amp-unified-footer .amp-footer-title{font-size:17px;margin-bottom:13px}
    #footer.amp-unified-footer address,
    #footer.amp-unified-footer .amp-footer-email{font-size:10.5px;line-height:1.7}
    #footer.amp-unified-footer .amp-footer-nav a{font-size:10.5px;padding:5px 0}
    #footer.amp-unified-footer .amp-footer-message-form input,
    #footer.amp-unified-footer .amp-footer-message-form textarea{
        font-size:10px;
        padding:8px 9px;
    }
    #footer.amp-unified-footer .amp-footer-message-form button{font-size:10px;min-height:36px}
}

@media (max-width:420px){
    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo{
        max-width:70vw!important;
        max-height:50px!important;
    }
    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero{
        min-height:660px!important;
        background-size:contain!important;
    }
    #footer.amp-unified-footer .amp-footer-grid{
        grid-template-columns:minmax(112px,.7fr) minmax(0,1.3fr);
    }
    #footer.amp-unified-footer .amp-footer-contact{padding-right:12px}
    #footer.amp-unified-footer .amp-footer-right{padding-left:12px}
    #footer.amp-unified-footer .amp-footer-kicker{font-size:8px}
    #footer.amp-unified-footer .amp-footer-title{font-size:15px}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion:reduce){
    #footer.amp-unified-footer *,
    .amp-global-disclaimer *,
    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero{
        animation:none!important;
        transition:none!important;
    }
}


/* ==========================================================================
   ADEPTH CONSULTING ENGINEERS — RESPONSIVE ENHANCEMENT PACK v12.0
   Purpose:
   • Preserve the existing visual design on desktop.
   • Improve layout stability on Android + iOS.
   • Prevent horizontal overflow, clipped text, accidental zoom and
     viewport-height issues.
   • Keep hero artwork visible without changing the existing design language.
   • Improve touch targets, safe-area handling, forms, cards and footer.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   23. CROSS-DEVICE FOUNDATION
   -------------------------------------------------------------------------- */
html {
    width: 100%;
    min-width: 320px;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.amp-page {
    width: 100%;
    min-width: 320px;
    max-width: 100%;
    overflow-x: clip;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

body.amp-page,
body.amp-page * {
    -webkit-tap-highlight-color: transparent;
}

body.amp-page .container,
body.amp-page .container-fluid,
body.amp-page .mega-inner,
body.amp-page .amp-footer-shell {
    width: 100%;
    max-width: 100%;
}

body.amp-page img,
body.amp-page video,
body.amp-page iframe,
body.amp-page svg {
    max-width: 100%;
}

body.amp-page button,
body.amp-page a,
body.amp-page input,
body.amp-page select,
body.amp-page textarea {
    touch-action: manipulation;
}

body.amp-page a:focus-visible,
body.amp-page button:focus-visible,
body.amp-page input:focus-visible,
body.amp-page select:focus-visible,
body.amp-page textarea:focus-visible {
    outline: 3px solid rgba(12, 166, 221, .55);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   24. CONTAINER + GRID STABILITY
   -------------------------------------------------------------------------- */
body.amp-page .row {
    width: calc(100% + 30px);
    max-width: calc(100% + 30px);
}

body.amp-page [class*="col-"] {
    min-width: 0;
}

body.amp-page .amp-flex-row,
body.amp-page .amp-products-grid,
body.amp-page .amp-matrix,
body.amp-page .amp-application-grid {
    min-width: 0;
}

body.amp-page .amp-products-grid > *,
body.amp-page .amp-matrix > *,
body.amp-page .amp-application-grid > * {
    min-width: 0;
}

/* Long URLs, email addresses and technical product names must not push
   the page wider than the viewport. */
body.amp-page p,
body.amp-page li,
body.amp-page address,
body.amp-page .amp-footer-email,
body.amp-page .amp-product-content,
body.amp-page .amp-content-panel {
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   25. NAVIGATION — DESKTOP PRESERVATION + MOBILE SAFETY
   -------------------------------------------------------------------------- */
body.amp-page header#sticker,
body.amp-page .sticky-navigation,
body.amp-page .amp-mega-header {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

body.amp-page .mega-inner,
body.amp-page .sticky-navigation .navbar > .container {
    width: 100%;
    max-width: 1500px;
    min-width: 0;
}

body.amp-page .mega-brand {
    min-width: 0;
    overflow: hidden;
}

body.amp-page .mega-brand img,
body.amp-page .sticky-navigation .navbar-brand img,
body.amp-page img.amp-logo {
    flex: 0 1 auto;
    min-width: 0;
}

/* Keep pills from creating a second horizontal scrollbar. */
body.amp-page .mega-right,
body.amp-page .mega-nav,
body.amp-page .mega-row {
    min-width: 0;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   26. HERO — STABLE VIEWPORT HEIGHTS + ARTWORK VISIBILITY
   -------------------------------------------------------------------------- */
body.amp-page .amp-hero,
body.amp-page .amp-page-hero {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: clamp(600px, 56.25vw, 900px);
    height: auto;
    isolation: isolate;
}

body.amp-page .amp-hero-container {
    width: 100%;
    min-width: 0;
}

body.amp-page .amp-hero-copy,
body.amp-page .amp-product-visual {
    min-width: 0;
}

body.amp-page .amp-hero h1,
body.amp-page .amp-hero-lead {
    overflow-wrap: normal;
    word-break: normal;
}

body.amp-page .amp-product-image-card {
    width: 100%;
    max-width: 100%;
}

body.amp-page .amp-product-image-card img,
body.amp-page .amp-product-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   27. TOUCH-FRIENDLY CONTROLS
   -------------------------------------------------------------------------- */
body.amp-page .mega-toggle {
    min-width: 44px;
    min-height: 44px;
}

body.amp-page .mega-pill {
    min-height: 40px;
}

body.amp-page button,
body.amp-page input[type="submit"],
body.amp-page input[type="button"],
body.amp-page input[type="reset"] {
    min-height: 44px;
}

/* --------------------------------------------------------------------------
   28. FORMS — iOS/ANDROID FRIENDLY
   -------------------------------------------------------------------------- */
body.amp-page input,
body.amp-page select,
body.amp-page textarea {
    max-width: 100%;
    border-radius: 10px;
}

@media (max-width: 767px) {
    body.amp-page input,
    body.amp-page select,
    body.amp-page textarea {
        /*
         * 16px prevents iOS Safari from automatically zooming the page when
         * a form field receives focus.
         */
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   29. TABLET — 768–991px
   -------------------------------------------------------------------------- */
@media (max-width: 991px) and (min-width: 768px) {
    :root {
        --section-padding: 84px 0;
        --container-padding: 0 22px;
        --nav-height: 82px;
    }

    body.amp-page .mega-inner,
    body.amp-page .sticky-navigation .navbar > .container {
        padding-left: 20px;
        padding-right: 20px;
        gap: 16px;
    }

    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo {
        max-width: min(58vw, 650px) !important;
        max-height: 78px !important;
    }

    body.amp-page .amp-hero {
        min-height: max(620px, 56.25vw) !important;
        padding-top: 96px;
        padding-bottom: 90px;
        background-size: 100% auto !important;
        background-position: center top !important;
    }

    body.amp-page .amp-hero-copy {
        padding-right: 10px;
    }

    body.amp-page .amp-product-visual {
        min-height: 480px;
        padding-left: 15px;
    }

    body.amp-page .amp-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.amp-page .amp-matrix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.amp-page .amp-application-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   30. MOBILE — 320–767px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        --section-padding: 64px 0;
        --section-padding-mobile: 64px 0;
        --container-padding: 0 14px;
        --nav-height: 68px;
        --nav-height-mobile: 68px;
        --radius-lg: 18px;
        --radius-xl: 24px;
    }

    html {
        scroll-padding-top: calc(var(--nav-height-mobile) + 14px);
    }

    body.amp-page {
        font-size: 15px;
        line-height: 1.7;
    }

    body.amp-page .container,
    body.amp-page .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }

    body.amp-page .row {
        margin-left: -7px;
        margin-right: -7px;
    }

    body.amp-page [class*="col-"] {
        padding-left: 7px;
        padding-right: 7px;
    }

    /* ---------------- NAVIGATION ---------------- */
    body.amp-page header#sticker,
    body.amp-page .sticky-navigation,
    body.amp-page .amp-mega-header {
        position: sticky !important;
        top: 0;
        z-index: var(--z-navbar);
        min-height: 68px;
    }

    body.amp-page .mega-inner,
    body.amp-page .sticky-navigation .navbar > .container {
        min-height: 68px;
        height: auto;
        padding: 7px 12px;
        gap: 10px;
        align-items: center;
    }

    body.amp-page .mega-brand {
        flex: 1 1 auto;
        max-width: calc(100% - 58px);
        border-right: 0;
        padding-right: 0;
    }

    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo {
        width: auto !important;
        max-width: min(74vw, 430px) !important;
        height: auto !important;
        max-height: 54px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    body.amp-page .mega-right {
        flex: 0 0 auto;
        gap: 0;
    }

    body.amp-page .mega-toggle {
        display: flex;
        width: 46px;
        height: 44px;
        flex: 0 0 46px;
    }

    body.amp-page .mega-nav {
        width: 100%;
    }

    body.amp-page .mega-row {
        width: 100%;
        max-width: 100%;
    }

    body.amp-page .mega-pill {
        min-height: 42px;
        padding: 8px 12px;
        font-size: 12px;
    }

    /* ---------------- TYPE ---------------- */
    body.amp-page h1,
    body.amp-page .h1 {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1.08;
    }

    body.amp-page h2,
    body.amp-page .h2 {
        font-size: clamp(1.75rem, 8vw, 2.45rem);
        line-height: 1.12;
    }

    body.amp-page h3,
    body.amp-page .h3 {
        font-size: clamp(1.35rem, 6vw, 1.8rem);
    }

    body.amp-page p {
        font-size: 15px;
        line-height: 1.75;
    }

    /* ---------------- HERO ---------------- */
    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero {
        min-height: max(640px, 100svh - var(--nav-height-mobile)) !important;
        min-height: max(640px, 100dvh - var(--nav-height-mobile)) !important;
        padding: 72px 0 82px;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }

    /*
     * Prevent the decorative background from overpowering the content on
     * narrow screens while retaining the exact design language.
     */
    body.amp-page .amp-hero::before {
        width: 360px;
        height: 360px;
        top: -160px;
        right: -150px;
    }

    body.amp-page .amp-hero::after {
        width: 300px;
        height: 300px;
        bottom: -180px;
        left: -130px;
    }

    body.amp-page .amp-hero-grid {
        opacity: .16;
        background-size: 38px 38px;
    }

    body.amp-page .amp-hero-copy {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    body.amp-page .amp-eyebrow {
        max-width: 100%;
        margin-bottom: 18px;
        padding: 8px 12px;
        font-size: 9.5px;
        letter-spacing: 1px;
    }

    body.amp-page .amp-hero h1 {
        margin-bottom: 18px;
        font-size: clamp(2.15rem, 11vw, 3.15rem);
        line-height: 1.04;
        letter-spacing: -0.8px;
    }

    body.amp-page .amp-hero h1 span {
        margin-top: 7px;
    }

    body.amp-page .amp-hero-lead {
        max-width: 100% !important;
        margin-bottom: 24px !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    body.amp-page .amp-hero-actions {
        width: 100%;
        gap: 10px;
        margin-bottom: 26px;
    }

    body.amp-page .amp-hero-actions > *,
    body.amp-page .amp-hero-actions a,
    body.amp-page .amp-hero-actions button {
        max-width: 100%;
    }

    body.amp-page .amp-hero-tags {
        gap: 7px;
    }

    body.amp-page .amp-hero-tags span {
        padding: 7px 10px;
        font-size: 9.5px;
    }

    body.amp-page .amp-product-visual {
        min-height: 0;
        margin-top: 28px;
        padding: 0 8px 30px;
        perspective: none;
    }

    body.amp-page .amp-visual-glow {
        width: 280px;
        height: 280px;
        filter: blur(55px);
    }

    body.amp-page .amp-product-image-card {
        width: 100%;
        padding: 24px 18px 16px;
        border-radius: 18px;
    }

    body.amp-page .amp-floating-card {
        min-width: 0;
        max-width: 46%;
        padding: 10px 11px;
        gap: 8px;
        border-radius: 12px;
    }

    body.amp-page .amp-floating-card i {
        font-size: 18px;
    }

    body.amp-page .amp-floating-card span {
        font-size: 10px;
    }

    body.amp-page .amp-floating-card small {
        font-size: 7.5px;
    }

    body.amp-page .amp-floating-card-one {
        right: -2px;
        bottom: 54px;
    }

    body.amp-page .amp-floating-card-two {
        left: -2px;
        bottom: -4px;
    }

    body.amp-page .amp-scroll-cue {
        display: none;
    }

    /* ---------------- SECTIONS ---------------- */
    body.amp-page .amp-section {
        padding: var(--section-padding);
    }

    body.amp-page .amp-section-heading {
        margin-bottom: 36px;
    }

    body.amp-page .amp-section-heading h2 {
        margin: 11px 0 14px;
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    body.amp-page .amp-section-heading p {
        font-size: 14px;
        line-height: 1.75;
    }

    body.amp-page .amp-content-panel {
        padding: 28px 22px;
        border-radius: 17px;
    }

    body.amp-page .amp-content-panel h3 {
        font-size: 24px;
    }

    body.amp-page .amp-feature {
        gap: 12px;
        padding: 15px 0;
    }

    body.amp-page .amp-mission-block {
        margin-top: 22px;
        padding: 18px 18px;
    }

    /* ---------------- GRIDS ---------------- */
    body.amp-page .amp-products-grid,
    body.amp-page .amp-matrix,
    body.amp-page .amp-application-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    body.amp-page .amp-product-card {
        border-radius: 16px;
    }

    body.amp-page .amp-product-card-image {
        height: 190px;
    }

    body.amp-page .amp-product-content {
        padding: 23px 20px;
    }

    body.amp-page .amp-matrix-card {
        min-height: 0;
        padding: 25px 22px;
        border-radius: 17px;
    }

    body.amp-page .amp-application-item {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 18px;
    }

    /* ---------------- CAPABILITY STRIP ---------------- */
    body.amp-page .amp-capability-strip {
        overflow: hidden;
    }

    body.amp-page .amp-strip-item {
        min-height: 88px;
        padding: 17px 13px;
        gap: 11px;
    }

    body.amp-page .amp-strip-item > i {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 19px;
    }

    body.amp-page .amp-strip-item strong {
        font-size: 12.5px;
    }

    body.amp-page .amp-strip-item span {
        font-size: 10.5px;
    }

    /* ---------------- TIMELINE ---------------- */
    body.amp-page .amp-timeline-list {
        padding-left: 32px;
    }

    body.amp-page .amp-timeline-list::before {
        left: 12px;
    }

    body.amp-page .amp-timeline-list > div::before {
        left: -26px;
    }

    /* ---------------- DISCLAIMER ---------------- */
    body.amp-page .amp-global-disclaimer {
        padding: 18px 0;
    }

    body.amp-page .amp-global-disclaimer .amp-disclaimer-inner {
        padding: 0 12px;
    }

    body.amp-page .amp-global-disclaimer .amp-disclaimer-box {
        gap: 10px;
        padding: 14px;
        border-radius: 11px;
    }

    body.amp-page .amp-global-disclaimer .amp-disclaimer-icon {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
    }

    /* ---------------- FOOTER ---------------- */
    #footer.amp-unified-footer .amp-footer-widget {
        padding: 42px 0 24px;
    }

    #footer.amp-unified-footer .amp-footer-shell {

        padding-left: 12px;
        padding-right: 12px;
    }

    #footer.amp-unified-footer .amp-footer-grid {
        grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
        width: 100%;
    }

    #footer.amp-unified-footer .amp-footer-contact {
        min-width: 0;
        padding: 0 14px 0 0;
    }

    #footer.amp-unified-footer .amp-footer-right {
        min-width: 0;
        padding-left: 14px;
        gap: 22px;
    }

    #footer.amp-unified-footer .amp-footer-nav-group {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #footer.amp-unified-footer .amp-footer-title {
        font-size: 16px;
        line-height: 1.25;
        margin-bottom: 11px;
    }

    #footer.amp-unified-footer address,
    #footer.amp-unified-footer .amp-footer-email {
        font-size: 10px;
        line-height: 1.65;
    }

    #footer.amp-unified-footer .amp-footer-nav a {
        font-size: 10px;
        line-height: 1.4;
        padding: 6px 0;
    }

    #footer.amp-unified-footer .amp-footer-message-form {
        gap: 8px;
    }

    #footer.amp-unified-footer .amp-footer-message-form input,
    #footer.amp-unified-footer .amp-footer-message-form textarea {
        font-size: 16px !important;
        padding: 10px 11px;
    }

    #footer.amp-unified-footer .amp-footer-message-form textarea {
        min-height: 82px;
    }

    #footer.amp-unified-footer .amp-footer-message-form button {
        width: 100%;
        min-height: 44px;
        font-size: 11px;
    }

    #footer.amp-unified-footer .amp-footer-bottom {
        margin-top: 28px;
        padding-top: 15px;
    }

    #footer.amp-unified-footer .amp-footer-bottom p {
        font-size: 9px;
        line-height: 1.55;
    }
}

/* --------------------------------------------------------------------------
   31. EXTRA SMALL PHONES — 320–420px
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
    :root {
        --container-padding: 0 12px;
    }

    body.amp-page .container,
    body.amp-page .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.amp-page .mega-inner,
    body.amp-page .sticky-navigation .navbar > .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo {
        max-width: 70vw !important;
        max-height: 48px !important;
    }

    body.amp-page .mega-toggle {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero {
        min-height: max(610px, 100svh - var(--nav-height-mobile)) !important;
        min-height: max(610px, 100dvh - var(--nav-height-mobile)) !important;
        padding-top: 58px;
        padding-bottom: 70px;
    }

    body.amp-page .amp-hero h1 {
        font-size: clamp(1.95rem, 10.5vw, 2.65rem);
    }

    body.amp-page .amp-hero-lead {
        font-size: 14px !important;
    }

    body.amp-page .amp-floating-card {
        max-width: 48%;
        padding: 8px 9px;
    }

    #footer.amp-unified-footer .amp-footer-grid {
        grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr);
    }

    #footer.amp-unified-footer .amp-footer-contact {
        padding-right: 10px;
    }

    #footer.amp-unified-footer .amp-footer-right {
        padding-left: 10px;
    }

    #footer.amp-unified-footer .amp-footer-title {
        font-size: 14px;
    }

    #footer.amp-unified-footer address,
    #footer.amp-unified-footer .amp-footer-email,
    #footer.amp-unified-footer .amp-footer-nav a {
        font-size: 9.5px;
    }
}

/* --------------------------------------------------------------------------
   32. LANDSCAPE PHONES
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero {
        min-height: 620px !important;
        padding-top: 52px;
        padding-bottom: 60px;
    }

    body.amp-page .amp-product-visual {
        margin-top: 20px;
    }

    body.amp-page .amp-scroll-cue {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   33. iOS SAFE-AREA SUPPORT
   -------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
    body.amp-page header#sticker,
    body.amp-page .sticky-navigation,
    body.amp-page .amp-mega-header {
        padding-top: env(safe-area-inset-top);
    }

    body.amp-page .mega-inner,
    body.amp-page .sticky-navigation .navbar > .container {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    #footer.amp-unified-footer .amp-footer-widget {
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
}

/* --------------------------------------------------------------------------
   34. MOBILE HOVER SAFETY
   Avoid desktop hover transforms getting "stuck" after tapping on phones.
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    body.amp-page .amp-product-card:hover,
    body.amp-page .amp-content-panel:hover,
    body.amp-page .amp-matrix-card:hover,
    body.amp-page .amp-strip-item:hover,
    body.amp-page .mega-pill:hover {
        transform: none;
    }

    body.amp-page .mega-pill:hover {
        color: var(--mega-blue);
        border-color: var(--mega-red);
        box-shadow: none;
    }

    body.amp-page .mega-pill:hover::before {
        transform: scaleX(0);
    }

    body.amp-page a,
    body.amp-page button {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* --------------------------------------------------------------------------
   35. REDUCED MOTION — KEEP LAYOUT, REMOVE MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body.amp-page *,
    body.amp-page *::before,
    body.amp-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   36. PRINT / EMBED SAFETY
   -------------------------------------------------------------------------- */
@media print {
    body.amp-page {
        min-width: 0;
        overflow: visible;
    }
}


/* ==========================================================================
   37. UNIVERSAL HEADER / MOBILE NAV HARDENING — v13.0
   Targets modern Chrome, Edge, Firefox, Safari, iOS Safari and Android
   browsers from 320px phones through tablets and desktop displays.
   ========================================================================== */

/* Header geometry must never exceed the viewport. */
body.amp-page header#sticker,
body.amp-page .sticky-navigation,
body.amp-page .amp-mega-header,
body.amp-page .mega-inner,
body.amp-page .sticky-navigation .navbar,
body.amp-page .sticky-navigation .navbar > .container {
    box-sizing: border-box;
    max-width: 100%;
}

/* Desktop remains unchanged visually. */
@media (min-width: 992px) {
    body.amp-page .mega-toggle {
        display: none !important;
    }

    body.amp-page .mega-nav {
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }
}

/* Tablet + mobile navigation system. */
@media (max-width: 991.98px) {
    body.amp-page header#sticker,
    body.amp-page .sticky-navigation,
    body.amp-page .amp-mega-header {
        position: sticky !important;
        top: 0 !important;
        left: 0;
        right: 0;
        width: 100%;
        overflow: visible !important;
    }

    body.amp-page .mega-inner,
    body.amp-page .sticky-navigation .navbar > .container {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        width: 100%;
        min-width: 0;
        min-height: 68px;
        padding: 7px clamp(10px, 3vw, 18px);
        gap: 8px;
    }

    /* Logo always gets the available width left of hamburger. */
    body.amp-page .mega-brand,
    body.amp-page .sticky-navigation .navbar-brand {
        order: 1;
        display: flex;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: calc(100% - 58px);
        min-height: 0;
        height: auto;
        margin: 0;
        padding: 4px 0;
        border-right: 0;
        overflow: hidden;
    }

    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo {
        display: block;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: clamp(44px, 9vw, 58px) !important;
        object-fit: contain !important;
        object-position: left center !important;
        flex: 0 1 auto;
    }

    /* Hamburger is never squeezed or pushed outside the viewport. */
    body.amp-page .mega-right {
        order: 2;
        display: flex;
        flex: 0 0 auto;
        width: auto;
        min-width: 48px;
        max-width: 48px;
        margin: 0 0 0 auto;
        align-items: center;
        justify-content: flex-end;
        align-self: center;
    }

    body.amp-page .mega-toggle {
        position: relative;
        z-index: 3;
        display: inline-flex !important;
        flex: 0 0 46px;
        width: 46px;
        min-width: 46px;
        max-width: 46px;
        height: 46px;
        min-height: 46px;
        max-height: 46px;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        border: 1.5px solid var(--mega-red);
        border-radius: 10px;
        background: #fff;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
    }

    body.amp-page .mega-toggle-bar {
        display: block !important;
        flex: 0 0 auto;
        width: 22px;
        height: 2.5px;
        margin: 0;
        border: 0;
        border-radius: 999px;
        background: var(--mega-blue);
        transform-origin: center;
        pointer-events: none;
    }

    /* Support both the existing .active state and accessible aria state. */
    body.amp-page .mega-toggle.active .mega-toggle-bar:nth-child(1),
    body.amp-page .mega-toggle[aria-expanded="true"] .mega-toggle-bar:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }

    body.amp-page .mega-toggle.active .mega-toggle-bar:nth-child(2),
    body.amp-page .mega-toggle[aria-expanded="true"] .mega-toggle-bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    body.amp-page .mega-toggle.active .mega-toggle-bar:nth-child(3),
    body.amp-page .mega-toggle[aria-expanded="true"] .mega-toggle-bar:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }

    /* Collapsed menu. */
    body.amp-page .mega-nav {
        order: 3;
        display: block !important;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        max-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        border-top: 0;
        pointer-events: none;
        transform: translateY(-4px);
        transition:
            max-height .42s var(--ease-spring),
            opacity .24s ease,
            transform .24s ease,
            visibility 0s linear .42s,
            padding .24s ease,
            margin .24s ease;
    }

    /*
     * Open state supports the stylesheet's existing header.mega-open class,
     * Bootstrap's .navbar-collapse.in, and common aria-expanded markup.
     */
    body.amp-page header#sticker.mega-open .mega-nav,
    body.amp-page .amp-mega-header.mega-open .mega-nav,
    body.amp-page .sticky-navigation.mega-open .mega-nav,
    body.amp-page .mega-toggle[aria-expanded="true"] ~ .mega-nav,
    body.amp-page .navbar-collapse.in {
        max-height: min(72dvh, 620px);
        max-height: min(72svh, 620px);
        margin-top: 7px;
        padding: 10px 0 12px;
        overflow-x: hidden;
        overflow-y: auto;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        border-top: 1px solid var(--mega-border);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        transition:
            max-height .42s var(--ease-spring),
            opacity .24s ease,
            transform .24s ease,
            visibility 0s,
            padding .24s ease,
            margin .24s ease;
    }

    body.amp-page .mega-row,
    body.amp-page .mega-row-site {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 clamp(2px, 1vw, 6px);
        gap: 8px;
        list-style: none;
    }

    body.amp-page .mega-row > li,
    body.amp-page .mega-row-site > li {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    /* Every item inside hamburger remains readable and tappable. */
    body.amp-page .mega-pill,
    body.amp-page .mega-row-site .mega-pill,
    body.amp-page .mega-nav a {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-height: 46px;
        margin: 0;
        padding: 11px 14px;
        align-items: center;
        justify-content: center;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        text-align: center;
        font-size: clamp(12px, 2.4vw, 15px);
        line-height: 1.3;
        touch-action: manipulation;
    }

    /* Avoid iOS menu clipping behind the browser UI. */
    body.amp-page header#sticker.mega-open .mega-nav,
    body.amp-page .amp-mega-header.mega-open .mega-nav,
    body.amp-page .sticky-navigation.mega-open .mega-nav {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* Common phone widths. */
@media (max-width: 767.98px) {
    body.amp-page .mega-inner,
    body.amp-page .sticky-navigation .navbar > .container {
        min-height: 64px;
    }

    body.amp-page .mega-brand,
    body.amp-page .sticky-navigation .navbar-brand {
        max-width: calc(100% - 54px);
    }

    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo {
        max-height: 50px !important;
    }

    body.amp-page .mega-right {
        min-width: 46px;
        max-width: 46px;
    }

    body.amp-page .mega-toggle {
        flex-basis: 44px;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
    }
}

/* Narrow Android / iPhone SE-class widths. */
@media (max-width: 374.98px) {
    body.amp-page .mega-inner,
    body.amp-page .sticky-navigation .navbar > .container {
        padding-left: 8px;
        padding-right: 8px;
        gap: 6px;
    }

    body.amp-page .mega-brand,
    body.amp-page .sticky-navigation .navbar-brand {
        max-width: calc(100% - 48px);
    }

    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo {
        max-height: 44px !important;
    }

    body.amp-page .mega-right {
        min-width: 42px;
        max-width: 42px;
    }

    body.amp-page .mega-toggle {
        flex-basis: 42px;
        width: 42px;
        min-width: 42px;
        max-width: 42px;
        height: 42px;
        min-height: 42px;
        max-height: 42px;
        border-radius: 9px;
    }

    body.amp-page .mega-toggle-bar {
        width: 20px;
    }

    body.amp-page .mega-pill,
    body.amp-page .mega-row-site .mega-pill,
    body.amp-page .mega-nav a {
        min-height: 44px;
        padding: 10px 10px;
        font-size: 12px;
    }
}

/* Very narrow legacy viewport fallback. */
@media (max-width: 339.98px) {
    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo {
        max-height: 40px !important;
    }

    body.amp-page .mega-inner,
    body.amp-page .sticky-navigation .navbar > .container {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* Landscape phones: keep the opened navigation usable without occupying
   the complete screen. */
@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 560px) {
    body.amp-page header#sticker.mega-open .mega-nav,
    body.amp-page .amp-mega-header.mega-open .mega-nav,
    body.amp-page .sticky-navigation.mega-open .mega-nav,
    body.amp-page .navbar-collapse.in {
        max-height: 62dvh;
        max-height: 62svh;
    }
}

/* Windows high-contrast / forced-colors support. */
@media (forced-colors: active) {
    body.amp-page .mega-toggle {
        border: 2px solid ButtonText;
    }

    body.amp-page .mega-toggle-bar {
        background: ButtonText;
    }

    body.amp-page .mega-pill {
        border: 1px solid LinkText;
    }
}


/* ==========================================================================
   38. FINAL MOBILE HEADER FIX — v14.0
   --------------------------------------------------------------------------
   Fixes the exact mobile issue where:
   • the navigation header becomes unnecessarily tall/blank
   • the logo can disappear or collapse inside flex layout
   • the hamburger can appear on the LEFT instead of the RIGHT
   • the hamburger/menu can become detached from the header
   • menu items can overflow small Android/iOS screens

   IMPORTANT:
   Desktop styles are untouched. This layer only takes control below 992px.
   ========================================================================== */

@media (max-width: 991.98px) {

    /* Lock the mobile header to a predictable compact height. */
    body.amp-page header#sticker,
    body.amp-page .sticky-navigation,
    body.amp-page .amp-mega-header {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 68px !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        z-index: var(--z-navbar, 1000) !important;
        background: #fff !important;
        box-shadow: var(--shadow-nav, 0 4px 20px rgba(3,29,61,.08)) !important;
    }

    /*
     * One-row header.
     * Do NOT allow flex wrapping here — wrapping was responsible for
     * unstable mobile header geometry.
     */
    body.amp-page .mega-inner,
    body.amp-page .sticky-navigation .navbar,
    body.amp-page .sticky-navigation .navbar > .container {
        position: relative !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        margin: 0 !important;
        padding: 5px 12px !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    /* ---------------- LOGO ----------------
       Absolute positioning prevents the logo from collapsing when the
       hamburger is placed independently. */
    body.amp-page .mega-brand,
    body.amp-page .sticky-navigation .navbar-brand {
        position: absolute !important;
        top: 50% !important;
        left: 12px !important;
        right: 66px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
    }

    body.amp-page .mega-brand a,
    body.amp-page .sticky-navigation .navbar-brand a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * Force the actual logo image to occupy the available logo area.
     * width: auto is intentionally NOT used here because it can collapse
     * when the intrinsic image dimensions are unavailable during loading.
     */
    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo {
        display: block !important;
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 54px !important;
        min-height: 1px !important;
        object-fit: contain !important;
        object-position: left center !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /*
     * If the image is wider than the available phone width, scale it down
     * instead of pushing/colliding with the hamburger.
     */
    body.amp-page .mega-brand picture,
    body.amp-page .mega-brand picture img {
        max-width: 100% !important;
    }

    /* ---------------- HAMBURGER ----------------
       Absolute positioning guarantees RIGHT alignment at every width,
       regardless of where .mega-toggle sits in the HTML hierarchy. */
    body.amp-page .mega-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: calc(var(--z-navbar, 1000) + 20) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;

        margin: 0 !important;
        padding: 0 !important;
        gap: 5px !important;

        border: 1.5px solid var(--mega-red, #c9403c) !important;
        border-radius: 10px !important;
        background: #fff !important;
        box-shadow: none !important;

        transform: translateY(-50%) !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
    }

    body.amp-page .mega-toggle-bar {
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        min-width: 22px !important;
        min-height: 2.5px !important;
        max-width: 22px !important;
        max-height: 2.5px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: var(--mega-blue, #16389c) !important;
        transform-origin: center !important;
        pointer-events: none !important;
        transition: transform .25s ease, opacity .2s ease !important;
    }

    /* Hamburger → X */
    body.amp-page .mega-toggle.active .mega-toggle-bar:nth-child(1),
    body.amp-page .mega-toggle[aria-expanded="true"] .mega-toggle-bar:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg) !important;
    }

    body.amp-page .mega-toggle.active .mega-toggle-bar:nth-child(2),
    body.amp-page .mega-toggle[aria-expanded="true"] .mega-toggle-bar:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    body.amp-page .mega-toggle.active .mega-toggle-bar:nth-child(3),
    body.amp-page .mega-toggle[aria-expanded="true"] .mega-toggle-bar:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg) !important;
    }

    /* ---------------- RIGHT CLUSTER ----------------
       Keep it out of normal flow so it cannot move the logo. */
    body.amp-page .mega-right {
        position: static !important;
        display: block !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* ---------------- MOBILE MENU ---------------- */
    body.amp-page .mega-nav {
        position: absolute !important;
        top: 68px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        display: block !important;

        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 10px !important;

        overflow: hidden !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;

        background: rgba(255,255,255,.99) !important;
        border: 1px solid transparent !important;
        border-top: 0 !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: 0 18px 42px rgba(3,29,61,.18) !important;

        transform: translateY(-8px) !important;
        transform-origin: top center !important;

        z-index: calc(var(--z-navbar, 1000) + 10) !important;

        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;

        transition:
            max-height .35s ease,
            opacity .22s ease,
            transform .25s ease,
            visibility 0s linear .35s,
            padding .25s ease !important;
    }

    /*
     * Open states.
     * The primary state is header.mega-open because that is already present
     * in this stylesheet's original mobile navigation implementation.
     */
    body.amp-page header#sticker.mega-open .mega-nav,
    body.amp-page .amp-mega-header.mega-open .mega-nav,
    body.amp-page .sticky-navigation.mega-open .mega-nav,
    body.amp-page .mega-toggle[aria-expanded="true"] ~ .mega-nav,
    body.amp-page .mega-nav.active,
    body.amp-page .mega-nav.open,
    body.amp-page .mega-nav.show,
    body.amp-page .navbar-collapse.in {
        max-height: min(72vh, 620px) !important;
        max-height: min(72svh, 620px) !important;
        padding: 12px 10px max(14px, env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        border-color: var(--mega-border, #e4eaf0) !important;
        transform: translateY(0) !important;
        transition:
            max-height .35s ease,
            opacity .22s ease,
            transform .25s ease,
            visibility 0s,
            padding .25s ease !important;
    }

    /* Menu list */
    body.amp-page .mega-row,
    body.amp-page .mega-row-site {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 7px !important;
        list-style: none !important;
    }

    body.amp-page .mega-row > li,
    body.amp-page .mega-row-site > li {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Menu buttons/links */
    body.amp-page .mega-nav .mega-pill,
    body.amp-page .mega-row-site .mega-pill,
    body.amp-page .mega-nav a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 11px 12px !important;
        border-radius: 8px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-align: center !important;
        line-height: 1.25 !important;
        font-size: clamp(12px, 3.2vw, 15px) !important;
        transform: none !important;
        touch-action: manipulation !important;
    }

    /* Prevent desktop hover effects from causing layout jumps on touch. */
    body.amp-page .mega-nav .mega-pill:hover {
        transform: none !important;
    }
}

/* ---------- Phone-specific dimensions ---------- */
@media (max-width: 767.98px) {
    body.amp-page .mega-inner,
    body.amp-page .sticky-navigation .navbar > .container {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.amp-page .mega-brand,
    body.amp-page .sticky-navigation .navbar-brand {
        left: 10px !important;
        right: 62px !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
    }

    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo {
        max-height: 50px !important;
    }

    body.amp-page .mega-toggle {
        right: 10px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
    }

    body.amp-page .mega-nav {
        top: 64px !important;
    }
}

/* ---------- Small phones: 320–389px ---------- */
@media (max-width: 389.98px) {
    body.amp-page .mega-inner,
    body.amp-page .sticky-navigation .navbar > .container {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.amp-page .mega-brand,
    body.amp-page .sticky-navigation .navbar-brand {
        left: 8px !important;
        right: 56px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }

    body.amp-page .mega-brand img,
    body.amp-page .sticky-navigation .navbar-brand img,
    body.amp-page img.amp-logo {
        max-height: 45px !important;
    }

    body.amp-page .mega-toggle {
        right: 8px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    body.amp-page .mega-toggle-bar {
        width: 20px !important;
    }

    body.amp-page .mega-nav {
        top: 60px !important;
        left: 6px !important;
        right: 6px !important;
    }
}

/* ---------- iPhone / Android form zoom protection ---------- */
@media (max-width: 767.98px) {
    body.amp-page input,
    body.amp-page select,
    body.amp-page textarea,
    body.amp-page button {
        font-size: 16px;
    }
}

/* ---------- Safe-area support for notched iPhones ---------- */
@supports (padding: max(0px)) {
    @media (max-width: 991.98px) {
        body.amp-page .mega-inner,
        body.amp-page .sticky-navigation .navbar > .container {
            padding-left: max(10px, env(safe-area-inset-left)) !important;
            padding-right: max(10px, env(safe-area-inset-right)) !important;
        }

        body.amp-page .mega-brand,
        body.amp-page .sticky-navigation .navbar-brand {
            left: max(10px, env(safe-area-inset-left)) !important;
        }

        body.amp-page .mega-toggle {
            right: max(10px, env(safe-area-inset-right)) !important;
        }

        body.amp-page .mega-nav {
            left: max(8px, env(safe-area-inset-left)) !important;
            right: max(8px, env(safe-area-inset-right)) !important;
        }
    }
}

/* ---------- Touch devices: no sticky hover transforms ---------- */
@media (hover: none) and (pointer: coarse) {
    body.amp-page .mega-toggle:hover {
        background: #fff !important;
        transform: translateY(-50%) !important;
    }

    body.amp-page .mega-pill:hover {
        transform: none !important;
    }
}


/* ==========================================================================
   39. DESKTOP FOOTER — MATCH REFERENCE VIEW
   --------------------------------------------------------------------------
   Keeps the desktop footer as a clean four-column layout:
   Contact | Quick Links | Products | Send a Message

   This block is desktop-only and does NOT alter the mobile footer behavior.
   ========================================================================== */

@media (min-width: 992px) {

    /* Main footer surface */
    body.amp-page #footer {
        width: 100% !important;
        overflow: hidden !important;
        background: #061525 !important;
        color: #a9c0cf !important;
    }

    body.amp-page #footer .amp-footer-main {
        width: 100% !important;
        padding: 54px 0 40px !important;
        background:
            radial-gradient(circle at 18% 45%, rgba(13, 91, 139, .10), transparent 34%),
            linear-gradient(135deg, #061525 0%, #071a2b 52%, #061525 100%) !important;
    }

    body.amp-page #footer .amp-footer-main > .container {
        width: 100% !important;
        max-width: 1440px !important;
        margin: 0 auto !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    /*
     * Convert the existing left/right wrapper into one visual four-column
     * footer without changing the HTML structure.
     */
    body.amp-page #footer .amp-footer-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .82fr) !important;
        gap: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    /*
     * Contact + Quick Links + Products occupy the left 3-column region.
     */
    body.amp-page #footer .amp-footer-left {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 30px 0 0 !important;
        border: 0 !important;
    }

    body.amp-page #footer .amp-footer-left > .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.amp-page #footer .amp-footer-left > .container > .row {
        display: grid !important;
        grid-template-columns: minmax(0, 1.22fr) minmax(0, .88fr) minmax(0, .95fr) !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        align-items: start !important;
    }

    body.amp-page #footer .amp-footer-left [class*="col-"] {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 28px !important;
    }

    body.amp-page #footer .amp-footer-left [class*="col-"]:first-child {
        padding-left: 0 !important;
    }

    body.amp-page #footer .amp-footer-left [class*="col-"] + [class*="col-"] {
        border-left: 1px solid rgba(127, 212, 239, .16) !important;
    }

    /* Send Message is the fourth column. */
    body.amp-page #footer .amp-footer-right {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 0 0 34px !important;
        margin: 0 !important;
        border-left: 1px solid rgba(127, 212, 239, .18) !important;
        border-top: 0 !important;
    }

    body.amp-page #footer .amp-footer-right > .widget {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Footer headings */
    body.amp-page #footer .widget-title {
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    body.amp-page #footer .widget-title h3.title {
        margin: 0 !important;
        color: #ffffff !important;
        font-family: var(--font-family-heading) !important;
        font-size: 27px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
        letter-spacing: -.35px !important;
    }

    body.amp-page #footer .widget-title > span,
    body.amp-page #footer .widget-title .subtitle {
        display: block !important;
        margin-bottom: 8px !important;
        color: #58cfe8 !important;
        font-family: var(--font-family-body) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }

    /* Contact text */
    body.amp-page #footer address,
    body.amp-page #footer .amp-footer-left p {
        color: #9fb7c7 !important;
        font-size: 15px !important;
        line-height: 1.95 !important;
    }

    body.amp-page #footer address strong,
    body.amp-page #footer .amp-footer-left strong {
        color: #e4eef4 !important;
    }

    body.amp-page #footer address a,
    body.amp-page #footer .amp-footer-left p a {
        color: #7ed5eb !important;
    }

    /* Quick Links + Products */
    body.amp-page #footer .amp-footer-links {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    body.amp-page #footer .amp-footer-links li {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(127, 212, 239, .10) !important;
    }

    body.amp-page #footer .amp-footer-links li:last-child {
        border-bottom: 0 !important;
    }

    body.amp-page #footer .amp-footer-links a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 40px !important;
        padding: 7px 0 !important;
        color: #a7bac8 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }

    body.amp-page #footer .amp-footer-links a::before {
        content: '›' !important;
        flex: 0 0 auto !important;
        color: #47d7ed !important;
        font-size: 17px !important;
        line-height: 1 !important;
    }

    body.amp-page #footer .amp-footer-links a:hover {
        color: #ffffff !important;
        transform: translateX(3px) !important;
    }

    /* Form */
    body.amp-page #footer .amp-footer-right .form-group {
        margin-bottom: 12px !important;
    }

    body.amp-page #footer .amp-footer-right .form-control {
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(127, 212, 239, .18) !important;
        border-radius: 9px !important;
        color: #dceaf1 !important;
        background: rgba(255, 255, 255, .055) !important;
        box-shadow: none !important;
        font-size: 13px !important;
    }

    body.amp-page #footer .amp-footer-right textarea.form-control {
        height: 90px !important;
        min-height: 90px !important;
        resize: vertical !important;
    }

    body.amp-page #footer .amp-footer-right .form-control::placeholder {
        color: #7890a0 !important;
        opacity: 1 !important;
    }

    body.amp-page #footer .amp-footer-right .form-control:focus {
        border-color: rgba(71, 215, 237, .55) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(71, 215, 237, .08) !important;
    }

    body.amp-page #footer .amp-footer-right .btn-default {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 18px !important;
        border: 0 !important;
        border-radius: 9px !important;
        color: #062038 !important;
        background: linear-gradient(135deg, #47d7ed, #0ca6dd) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        box-shadow: none !important;
    }

    body.amp-page #footer .amp-footer-right .btn-default:hover {
        color: #ffffff !important;
        background: linear-gradient(135deg, #0ca6dd, #0879c9) !important;
        transform: translateY(-1px) !important;
    }

    /* Footer bottom divider + copyright */
    body.amp-page #footer .copyright {
        margin: 0 32px !important;
        padding: 26px 0 0 !important;
        border-top: 1px solid rgba(127, 212, 239, .13) !important;
        background: transparent !important;
        text-align: center !important;
    }

    body.amp-page #footer .copyright p {
        margin: 0 !important;
        color: #708797 !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   40. DESKTOP FOOTER — WIDE SCREEN SPACING
   ========================================================================== */

@media (min-width: 1400px) {
    body.amp-page #footer .amp-footer-main > .container {
        max-width: 1600px !important;
        padding-left: 48px !important;
        padding-right: 48px !important;
    }

    body.amp-page #footer .amp-footer-left {
        padding-right: 38px !important;
    }

    body.amp-page #footer .amp-footer-left [class*="col-"] {
        padding-left: 34px !important;
        padding-right: 34px !important;
    }

    body.amp-page #footer .amp-footer-left [class*="col-"]:first-child {
        padding-left: 0 !important;
    }

    body.amp-page #footer .amp-footer-right {
        padding-left: 42px !important;
    }

    body.amp-page #footer .copyright {
        margin-left: 48px !important;
        margin-right: 48px !important;
    }
}


/* ==========================================================================
   FINAL FOOTER OVERRIDE — SAME 4-COLUMN STRUCTURE ON ALL SCREEN SIZES
   --------------------------------------------------------------------------
   Desktop reference structure is preserved on tablets and phones:
   Contact | Quick Links | Products | Send a Message

   The layout is compressed proportionally on smaller screens instead of
   stacking the footer sections vertically.
   ========================================================================== */

/* ---------- 992px and below: keep the desktop footer structure ---------- */
@media (max-width: 991px) {

    body.amp-page #footer {
        width: 100% !important;
        overflow: hidden !important;
    }

    body.amp-page #footer .amp-footer-main {
        width: 100% !important;
        padding: 34px 0 26px !important;
    }

    body.amp-page #footer .amp-footer-main > .container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Never collapse the outer footer into a vertical stack. */
    body.amp-page #footer .amp-footer-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .82fr) !important;
        gap: 0 !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    /* Left side remains Contact + Navigation + Solutions. */
    body.amp-page #footer .amp-footer-left {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 14px 0 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    body.amp-page #footer .amp-footer-left > .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Do NOT stack the three left-side footer widgets. */
    body.amp-page #footer .amp-footer-left > .container > .row {
        display: grid !important;
        grid-template-columns: minmax(0, 1.22fr) minmax(0, .88fr) minmax(0, .95fr) !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        align-items: start !important;
    }

    body.amp-page #footer .amp-footer-left [class*="col-"] {
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }

    body.amp-page #footer .amp-footer-left [class*="col-"]:first-child {
        padding-left: 0 !important;
    }

    body.amp-page #footer .amp-footer-left [class*="col-"] + [class*="col-"] {
        border-left: 1px solid rgba(127, 212, 239, .16) !important;
    }

    /* Send Message remains the fourth column. */
    body.amp-page #footer .amp-footer-right {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 0 14px !important;
        border-left: 1px solid rgba(127, 212, 239, .18) !important;
        border-top: 0 !important;
    }

    body.amp-page #footer .amp-footer-right::before {
        display: none !important;
    }

    body.amp-page #footer .amp-footer-right > .widget {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Compact but proportional typography. */
    body.amp-page #footer .widget-title {
        margin: 0 0 12px !important;
    }

    body.amp-page #footer .widget-title > span,
    body.amp-page #footer .widget-title .subtitle {
        margin-bottom: 5px !important;
        font-size: clamp(7px, 1.1vw, 10px) !important;
        letter-spacing: clamp(1px, .2vw, 1.8px) !important;
    }

    body.amp-page #footer .widget-title h3.title {
        font-size: clamp(17px, 2.7vw, 25px) !important;
        line-height: 1.15 !important;
        margin-bottom: 0 !important;
    }

    body.amp-page #footer address,
    body.amp-page #footer .amp-footer-left p {
        font-size: clamp(8px, 1.45vw, 14px) !important;
        line-height: 1.65 !important;
        overflow-wrap: anywhere !important;
    }

    body.amp-page #footer .amp-footer-links {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.amp-page #footer .amp-footer-links a {
        min-height: 30px !important;
        padding: 5px 0 !important;
        gap: 5px !important;
        font-size: clamp(8px, 1.35vw, 13px) !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }

    body.amp-page #footer .amp-footer-links a::before {
        font-size: clamp(10px, 1.5vw, 15px) !important;
    }

    /* Compact contact form while retaining the desktop appearance. */
    body.amp-page #footer .amp-footer-right .form-group {
        margin-bottom: 7px !important;
    }

    body.amp-page #footer .amp-footer-right .form-control {
        width: 100% !important;
        height: clamp(31px, 4.8vw, 43px) !important;
        min-height: clamp(31px, 4.8vw, 43px) !important;
        padding: clamp(6px, 1vw, 10px) clamp(7px, 1.2vw, 12px) !important;
        border-radius: clamp(5px, .8vw, 8px) !important;
        font-size: clamp(8px, 1.25vw, 12px) !important;
    }

    body.amp-page #footer .amp-footer-right textarea.form-control {
        height: clamp(55px, 9vw, 82px) !important;
        min-height: clamp(55px, 9vw, 82px) !important;
    }

    body.amp-page #footer .amp-footer-right .btn-default {
        width: 100% !important;
        min-height: clamp(33px, 5vw, 45px) !important;
        padding: clamp(6px, 1vw, 10px) !important;
        border-radius: clamp(5px, .8vw, 8px) !important;
        font-size: clamp(8px, 1.25vw, 12px) !important;
    }

    body.amp-page #footer .copyright {
        margin: 0 14px !important;
        padding: 18px 0 0 !important;
    }

    body.amp-page #footer .copyright p {
        font-size: clamp(8px, 1.2vw, 11px) !important;
        line-height: 1.5 !important;
    }
}

/* ---------- 600px and below: preserve four columns, tighter spacing ---------- */
@media (max-width: 600px) {

    body.amp-page #footer .amp-footer-main {
        padding: 28px 0 20px !important;
    }

    body.amp-page #footer .amp-footer-main > .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.amp-page #footer .amp-footer-left {
        padding-right: 7px !important;
    }

    body.amp-page #footer .amp-footer-right {
        padding-left: 7px !important;
    }

    body.amp-page #footer .amp-footer-left > .container > .row {
        grid-template-columns: minmax(0, 1.22fr) minmax(0, .88fr) minmax(0, .95fr) !important;
    }

    body.amp-page #footer .amp-footer-left [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    body.amp-page #footer .amp-footer-left [class*="col-"]:first-child {
        padding-left: 0 !important;
    }

    body.amp-page #footer .widget-title {
        margin-bottom: 8px !important;
    }

    body.amp-page #footer .widget-title > span,
    body.amp-page #footer .widget-title .subtitle {
        font-size: clamp(6px, 1.7vw, 9px) !important;
        letter-spacing: 1px !important;
    }

    body.amp-page #footer .widget-title h3.title {
        font-size: clamp(14px, 3.8vw, 21px) !important;
    }

    body.amp-page #footer address,
    body.amp-page #footer .amp-footer-left p {
        font-size: clamp(7px, 1.8vw, 11px) !important;
        line-height: 1.55 !important;
    }

    body.amp-page #footer .amp-footer-links a {
        min-height: 25px !important;
        padding: 4px 0 !important;
        gap: 3px !important;
        font-size: clamp(7px, 1.7vw, 11px) !important;
    }

    body.amp-page #footer .amp-footer-links a::before {
        font-size: clamp(8px, 2vw, 13px) !important;
    }

    body.amp-page #footer .amp-footer-right .form-group {
        margin-bottom: 5px !important;
    }

    body.amp-page #footer .amp-footer-right .form-control {
        height: clamp(27px, 7vw, 36px) !important;
        min-height: clamp(27px, 7vw, 36px) !important;
        padding: 5px 6px !important;
        border-radius: 5px !important;
        font-size: clamp(7px, 1.7vw, 10px) !important;
    }

    body.amp-page #footer .amp-footer-right textarea.form-control {
        height: clamp(45px, 13vw, 65px) !important;
        min-height: clamp(45px, 13vw, 65px) !important;
    }

    body.amp-page #footer .amp-footer-right .btn-default {
        min-height: clamp(28px, 7vw, 38px) !important;
        padding: 5px !important;
        border-radius: 5px !important;
        font-size: clamp(7px, 1.7vw, 10px) !important;
    }

    body.amp-page #footer .copyright {
        margin-left: 8px !important;
        margin-right: 8px !important;
        padding-top: 14px !important;
    }

    body.amp-page #footer .copyright p {
        font-size: clamp(7px, 1.6vw, 9px) !important;
    }
}

/* ---------- 420px and below: still four columns, no vertical stacking ---------- */
@media (max-width: 420px) {

    body.amp-page #footer .amp-footer-main {
        padding-top: 22px !important;
        padding-bottom: 16px !important;
    }

    body.amp-page #footer .amp-footer-main > .container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body.amp-page #footer .amp-footer-layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .82fr) !important;
    }

    body.amp-page #footer .amp-footer-left {
        padding-right: 5px !important;
    }

    body.amp-page #footer .amp-footer-right {
        padding-left: 5px !important;
    }

    body.amp-page #footer .amp-footer-left > .container > .row {
        grid-template-columns: minmax(0, 1.22fr) minmax(0, .88fr) minmax(0, .95fr) !important;
    }

    body.amp-page #footer .amp-footer-left [class*="col-"] {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    body.amp-page #footer .widget-title > span,
    body.amp-page #footer .widget-title .subtitle {
        font-size: 6px !important;
        letter-spacing: .8px !important;
    }

    body.amp-page #footer .widget-title h3.title {
        font-size: clamp(12px, 4.2vw, 17px) !important;
    }

    body.amp-page #footer address,
    body.amp-page #footer .amp-footer-left p {
        font-size: clamp(6.5px, 1.9vw, 9px) !important;
        line-height: 1.45 !important;
    }

    body.amp-page #footer .amp-footer-links a {
        min-height: 22px !important;
        padding: 3px 0 !important;
        font-size: clamp(6.5px, 1.8vw, 9px) !important;
    }

    body.amp-page #footer .amp-footer-right .form-control {
        height: clamp(25px, 7vw, 31px) !important;
        min-height: clamp(25px, 7vw, 31px) !important;
        padding: 4px 5px !important;
        font-size: clamp(6.5px, 1.8vw, 9px) !important;
    }

    body.amp-page #footer .amp-footer-right textarea.form-control {
        height: clamp(40px, 12vw, 54px) !important;
        min-height: clamp(40px, 12vw, 54px) !important;
    }

    body.amp-page #footer .amp-footer-right .btn-default {
        min-height: clamp(26px, 7vw, 33px) !important;
        font-size: clamp(6.5px, 1.8vw, 9px) !important;
    }
}

/* IMPORTANT: override the previous mobile flex/column rules that were
   stacking the footer. */
@media (max-width: 767px) {
    body.amp-page #footer .amp-footer-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .82fr) !important;
        flex-direction: initial !important;
    }

    body.amp-page #footer .amp-footer-right {
        display: block !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    body.amp-page #footer .amp-footer-left .col-sm-6,
    body.amp-page #footer .amp-footer-left .col-md-4 {
        width: auto !important;
    }
}


/* ==========================================================================
   FINAL HERO BACKGROUND FIX — DESKTOP + MOBILE + UNIQUE PAGE HERO IMAGES
   --------------------------------------------------------------------------
   Goal:
   - Keep the Home hero-bg.png visible on mobile.
   - Do NOT force hero-bg.png onto product/page-specific hero sections.
   - Preserve unique page hero images when supplied by the page/inline style.
   - Keep the same visual treatment on desktop, tablet and mobile.
   - Avoid the previous mobile "cover" rule overriding the artwork.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COMMON HERO FOUNDATION
   -------------------------------------------------------------------------- */
body.amp-page .amp-hero,
body.amp-page .amp-page-hero,
body.amp-page .page-hero {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* --------------------------------------------------------------------------
   2. HOME HERO
   Only the main .amp-hero gets the shared home hero-bg.png.
   Page-specific .amp-page-hero / .page-hero backgrounds are NOT overwritten.
   -------------------------------------------------------------------------- */
body.amp-page .amp-hero {
    background-image:
        linear-gradient(
            125deg,
            rgba(2, 12, 24, .62) 0%,
            rgba(6, 37, 64, .46) 48%,
            rgba(7, 83, 120, .40) 100%
        ),
        url("../images/hero-bg.png") !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
}

/* --------------------------------------------------------------------------
   3. UNIQUE PAGE HERO IMAGES
   --------------------------------------------------------------------------
   If a product/page hero already has its own background-image (including an
   inline style), preserve that image. Do not replace it with hero-bg.png.

   These rules control the image rendering only.
   -------------------------------------------------------------------------- */
body.amp-page .amp-page-hero,
body.amp-page .page-hero {
    background-position: center top !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
}

/* If a page provides its hero image through a CSS custom property, support it. */
body.amp-page .amp-page-hero[data-hero-bg],
body.amp-page .page-hero[data-hero-bg] {
    background-image: var(--page-hero-background, var(--hero-page-image)) !important;
}

/* --------------------------------------------------------------------------
   4. READABILITY SCRIM
   --------------------------------------------------------------------------
   Put the darkening layer above the image but below the hero content.
   This works for both the home hero and unique page hero images.
   -------------------------------------------------------------------------- */
body.amp-page .amp-hero::before,
body.amp-page .amp-page-hero::before,
body.amp-page .page-hero::before {
    z-index: 0 !important;
    pointer-events: none !important;
}

body.amp-page .amp-hero::after,
body.amp-page .amp-page-hero::after,
body.amp-page .page-hero::after {
    z-index: 0 !important;
    pointer-events: none !important;
}

body.amp-page .amp-hero-container,
body.amp-page .amp-page-hero > .container,
body.amp-page .page-hero > .container {
    position: relative !important;
    z-index: 2 !important;
}

/* --------------------------------------------------------------------------
   5. TABLET
   Keep the complete width of the artwork and avoid aggressive cropping.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero,
    body.amp-page .page-hero {
        min-height: clamp(600px, 72vw, 760px) !important;
        background-position: center top !important;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
    }

    body.amp-page .amp-hero {
        padding-top: clamp(78px, 10vw, 110px) !important;
        padding-bottom: clamp(72px, 9vw, 100px) !important;
    }
}

/* --------------------------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------------------------
   The previous stylesheet changed the hero to "cover" in the final mobile
   breakpoint. That makes a wide hero image crop heavily on portrait phones.

   Use width-based scaling instead:
   - image width always matches the device width
   - image keeps its original aspect ratio
   - no horizontal crop
   - no forced background replacement
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero,
    body.amp-page .page-hero {
        min-height: max(620px, 100svh - var(--nav-height-mobile)) !important;
        min-height: max(620px, 100dvh - var(--nav-height-mobile)) !important;
        height: auto !important;
        background-position: center top !important;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }

    body.amp-page .amp-hero {
        padding: 70px 0 72px !important;
    }

    body.amp-page .amp-page-hero,
    body.amp-page .page-hero {
        padding-top: 68px !important;
        padding-bottom: 68px !important;
    }

    /* Prevent the hero image from being hidden behind an opaque background. */
    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero,
    body.amp-page .page-hero {
        background-color: #020c18 !important;
    }

    /* Keep the artwork itself above the base colour. */
    body.amp-page .amp-hero-grid {
        z-index: 0 !important;
        opacity: .18 !important;
    }
}

/* --------------------------------------------------------------------------
   7. VERY SMALL PHONES
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero,
    body.amp-page .page-hero {
        min-height: max(190px, 10svh - var(--nav-height-mobile)) !important;
        min-height: max(190px,10dvh - var(--nav-height-mobile)) !important;
        background-position: center top !important;
        background-size: 100% auto !important;
    }

    body.amp-page .amp-hero {
        padding-top: 58px !important;
        padding-bottom: 60px !important;
    }

    body.amp-page .amp-page-hero,
    body.amp-page .page-hero {
        padding-top: 56px !important;
        padding-bottom: 58px !important;
    }
}

/* --------------------------------------------------------------------------
   8. LANDSCAPE PHONES
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {

    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero,
    body.amp-page .page-hero {
        min-height: 620px !important;
        background-size: 100% auto !important;
        background-position: center top !important;
    }
}

/* --------------------------------------------------------------------------
   9. HIGH-DPI / RETINA DEVICES
   Keep the same positioning and scaling; do not switch back to cover.
   -------------------------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {

    body.amp-page .amp-hero,
    body.amp-page .amp-page-hero,
    body.amp-page .page-hero {
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% auto !important;
    }
}

/* --------------------------------------------------------------------------
   10. SAFETY: INLINE PAGE-SPECIFIC BACKGROUNDS
   --------------------------------------------------------------------------
   When a unique page sets:
       style="background-image: url(...)"
   its background image remains the page's own image because this stylesheet
   does not assign a background-image to .amp-page-hero/.page-hero.
   -------------------------------------------------------------------------- */
body.amp-page .amp-page-hero[style*="background-image"],
body.amp-page .amp-page-hero[style*="backgroundImage"],
body.amp-page .page-hero[style*="background-image"],
body.amp-page .page-hero[style*="backgroundImage"] {
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% auto !important;
}

#hero1
{
background: linear-gradient( 180deg, rgba(2,11,22,.48) 0%, rgba(2,11,22,.40) 48%, rgba(2,11,22,.46) 100% ), url("../images/optical-tweezer.png") center 30% / cover no-repeat #020c18;
    background-position-x: 0%, 0%, center;
    background-position-y: 0%, 0%, 30%;
    background-repeat: repeat, repeat, no-repeat;
    background-attachment: scroll, scroll, scroll;
    background-size: auto, auto, cover;
	}
	
	#hero2
{
background: linear-gradient( 180deg, rgba(2,11,22,.48) 0%, rgba(2,11,22,.40) 48%, rgba(2,11,22,.46) 100% ), url("../images/microfluidic-system.png") center 30% / cover no-repeat #020c18;
    background-position-x: 0%, 0%, center;
    background-position-y: 0%, 0%, 30%;
    background-repeat: repeat, repeat, no-repeat;
    background-attachment: scroll, scroll, scroll;
    background-size: auto, auto, cover;
	}
	#hero3
{
background: linear-gradient( 180deg, rgba(2,11,22,.48) 0%, rgba(2,11,22,.40) 48%, rgba(2,11,22,.46) 100% ), url("../images/cold-atom-laser.png") center 30% / cover no-repeat #020c18;
    background-position-x: 0%, 0%, center;
    background-position-y: 0%, 0%, 30%;
    background-repeat: repeat, repeat, no-repeat;
    background-attachment: scroll, scroll, scroll;
    background-size: auto, auto, cover;
	}
	#hero4
{
background: linear-gradient(180deg, rgba(2, 12, 24, .82) 0%, rgba(2, 12, 24, .55) 45%, rgba(2, 12, 24, .70) 75%, rgba(2, 12, 24, .90) 100%), radial-gradient(ellipse 70% 60% at 50% 40%, rgba(2, 12, 24, .50) 0%, rgba(2, 12, 24, .22) 55%, rgba(2, 12, 24, 0) 100%), url("../images/fuel-cell-hero-bg.png") center 30% / cover no-repeat #020c18;
    background-position-x: 0%, 0%, center;
    background-position-y: 0%, 0%, 30%;
    background-repeat: repeat, repeat, no-repeat;
    background-attachment: scroll, scroll, scroll;
    background-size: auto, auto, cover;
	}