/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
/* LUUX Media brand faces, served from the same CDN the main site uses
   (Access-Control-Allow-Origin: *, so they load cross-origin).
   Brother 1816 = display headings; New Atten = everything else. */

@font-face {
    font-family: 'Brother 1816';
    src: url('https://cdn.luux-media.com/wp-content/themes/luux-media/css/webfonts/Brother-1816-Regular.woff2') format('woff2'),
         url('https://cdn.luux-media.com/wp-content/themes/luux-media/css/webfonts/Brother-1816-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Atten';
    src: url('https://cdn.luux-media.com/wp-content/themes/luux-media/css/webfonts/NewAtten-Book.woff2') format('woff2'),
         url('https://cdn.luux-media.com/wp-content/themes/luux-media/css/webfonts/NewAtten-Book.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Atten';
    src: url('https://cdn.luux-media.com/wp-content/themes/luux-media/css/webfonts/NewAtten-Regular.woff2') format('woff2'),
         url('https://cdn.luux-media.com/wp-content/themes/luux-media/css/webfonts/NewAtten-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Atten';
    src: url('https://cdn.luux-media.com/wp-content/themes/luux-media/css/webfonts/NewAtten-Medium.woff2') format('woff2'),
         url('https://cdn.luux-media.com/wp-content/themes/luux-media/css/webfonts/NewAtten-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'New Atten';
    src: url('https://cdn.luux-media.com/wp-content/themes/luux-media/css/webfonts/NewAtten-Bold.woff2') format('woff2'),
         url('https://cdn.luux-media.com/wp-content/themes/luux-media/css/webfonts/NewAtten-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*--------------------------------------------------------------
# CSS Variables (Global)
--------------------------------------------------------------*/
:root {
    /* Font Variables */
	--body-font: "New Atten", sans-serif;
	--heading-font: "Brother 1816", sans-serif;
    --button-font: "New Atten", sans-serif;
    --base-font-size: 16px;
	--scale-factor: 1; /* already defined */

    /* Colors */
    --light-text-color: #FFFFFF;
    --black: #000;
    --white: #fff;
    --primary-color: #000;
    --secondary-color: #7F6155;
    --button-hover: #768771;
    --background-muted: #f5f5f5;
    --background-primary: #1B4E44;
    --background-secondary: #0E312A;
    --text-primary: rgba(226, 31, 38, 1);
    --link-color: #ADC6BE;
    --link-hover: var(--primary-color);
    --border-color: #7F6155;

    /* Buttons */
    --btn-border: #1B4E44;
    --btn-padding-x: 24px;
    --btn-padding-x-lg: 24px;
    --btn-padding-y: 12px;
    --btn-height: calc(45px * var(--scale-factor));
    --btn-font-size: 0.875rem;
    --btn-letter-spacing: normal;

    /* Shadows */
    --box-shadow-xl: 0 28px 50px rgba(0, 0, 0, 0.3);

    /* Spacing */
    --section-padding: 72px;
    --section-padding-lg: 140px;
    --container-width: 1440px;
    --container-padding: 15px;
	--min-padding: 102px;
	--vh: 1vh; /* Fallback value to reduce content shift */
	
	/* Navbar */
	--navbar-min-height: calc(44px * var(--scale-factor));
	--navbar-top-margin: 30px;
	--navbar-background: rgba(255, 255, 255, 0.85);
	--navbar-background-transparent: rgba(255, 255, 255, 0.70);
	--navbar-backdrop-filter: 25px;	

	/* Intl-tel-input */	
    --iti-hover-color: var(--background-muted);
    --iti-border-color: #ccc;
    --iti-dialcode-color: var(--secondary-color);
    --iti-dropdown-bg: var(--background-muted);
    --iti-border-width: 1px;
    --iti-arrow-height: 6px;
    --iti-arrow-width: 12px;
    --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
    --iti-arrow-padding: 6px;
    --iti-arrow-color: var(--background-secondary);
}

/*--------------------------------------------------------------
# UIkit Overrides
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
html {
    font-weight: normal;
    color: var(--primary-color);	
    font-size: var(--base-font-size);
    font-family: var(--body-font);
    background: var(--background-muted);
}

.subheading {
    font-family: var(--body-font), sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    line-height: normal;
    letter-spacing: 12%;
    color: var(--black);
    padding-bottom: 2.25rem ;
}
.subheading hr {
    width: 40px;
    margin: 0;
    border: 0;
    border-top: 1px solid #DBC29B;
}

.subheading span {
    font-family: var(--body-font), sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h2 {
    font-family: var(--body-font), sans-serif;
    font-weight: 400;
    font-size: 1.625rem;
    line-height: 150%;
    letter-spacing: 0.1em;
    margin: 0;
    color: var(--black);
    padding-bottom: 2.25rem ;
}

.uk-background-primary h3{
    color: #fff;
    font-family: var(--body-font), sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
}

.paraholder{
    max-width: 37rem;
    padding-bottom: 3.75rem;
}

.parabold{
    font-family: var(--body-font), sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
}

p{
    font-family: var(--body-font), sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0;
}

.stat-number {
 font-family: var(--heading-font), sans-serif;
    /* ~10% of the 63px line box, to open up the gap to the copy below. */
    margin-bottom: 6px;
    font-size: 2.8125rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #DBC29B;
}


.stat-copy {
    font-family: var(--body-font), sans-serif;
    font-style: normal;
    /* 300 to match body copy - 400 against the 300 around it read as bold. */
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0;
}


.stat-grid.uk-grid-divider > :not(.uk-first-column)::before {
    border-left: 1px solid #DBC29B;
    top: 10%;
}

.uk-grid-divider > :not(.uk-first-column)::before {
    border-left: 1px solid #DBC29B;
}

.statcard{
    padding-left: 20px;
    padding-right: 20px;
}

.stat-grid.uk-grid-divider.uk-grid-column-small>:not(.uk-first-column)::before, .stat-grid.uk-grid-divider.uk-grid-small>:not(.uk-first-column)::before {
    left: -5px;
}


.cardh3 {
    font-family: var(--body-font), sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;

}

    .uk-card-body {
        padding: 30px 30px;
    }

.uk-card p{

    font-family: var(--body-font), sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: #000;
}

.luuxiqwide{
    max-width: 36.875rem;
}





.usecase-number {
    width: 3.75rem;
    height: 3.75rem;

    /* Flex item inside .usecase-title: without this it shrinks to fit the row
       and the circle (and its rotating border) render as an ellipse. */
    flex: 0 0 3.75rem;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-family: var(--body-font), sans-serif;
    font-size: 1.25rem;
    font-weight: 400;

    color: #DBC29B;

    background: transparent;
}

/* Animated border */
.usecase-number::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 50%;

    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 10deg,
        #DBC29B 240deg,
        #DBC29B 360deg
    );

    animation: rotate-border 3s linear infinite;

    /* Creates a border rather than filling the circle */
    -webkit-mask: 
        radial-gradient(
            farthest-side,
            transparent calc(100% - 1px),
            #000 calc(100% - 1px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 1px),
            #000 calc(100% - 1px)
        );
}

@keyframes rotate-border {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.usecase-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid #E8DDCC;
}
.usecase-item:last-child {
    border-bottom: none;
}


h3 {
    font-family: var(--body-font), sans-serif;
    font-size: 1.4375rem;
    line-height: 1.9375rem;
    font-weight: 700;
    letter-spacing: 0;
}

h4 {
    font-family: var(--body-font), sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
}

.usecase-item span{
    font-family: var(--body-font), sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
}

.uk-card {

    position: relative;
    overflow: hidden;

    background: #fff;

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.45s ease,
        box-shadow 0.45s ease;

    border-radius: 0.5rem;
}

/* Hover */
.uk-card:hover {
    transform: translateY(-10px);

    background-color: #051424;

    box-shadow:0 20px 35px rgba(5, 20, 36, 0.25);
    color: #fff;
}


.cardh3 {
    font-family: var(--body-font), sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;

    transition: color 0.4s ease;
}

.uk-card p.parabold{
    font-weight: 400;
}
.uk-card p {
    font-family: var(--body-font), sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0;
    color: #000;

    transition: color 0.4s ease;
}

/* Supporting copy drops a step below the .parabold lead-in above it. Sharpens
   the hierarchy inside the card and takes ~40px off the card height, which
   matters because uk-grid-match sizes every card to the tallest one. Matches
   the 0.875rem already used by .stat-copy. */
.uk-card p:not(.parabold) {
    font-size: 0.875rem;
}


/* Card hover */

.uk-card:hover .cardh3 {
    color: #fff;
}

.uk-card:hover p {
    color: #DBC29B;
}

.proofinnumber.uk-container{
    max-width: 75rem;
}



.proof-number {
    font-family: var(--body-font), sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 4.375rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
    display: inline-block;

    animation:
        proof-number-bounce 3s ease-in-out infinite,
        proof-number-gold 4s ease-in-out infinite;
}

@keyframes proof-number-bounce {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    15% {
        transform: translateY(-14px) rotate(1.5deg);
    }

    30% {
        transform: translateY(0) rotate(0deg);
    }

    42% {
        transform: translateY(-8px) rotate(-1deg);
    }

    54% {
        transform: translateY(0) rotate(0deg);
    }

    65% {
        transform: translateY(-4px) rotate(0.5deg);
    }

    75% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes proof-number-gold {
    0% {
        color: #DBC29B;
    }

    33% {
        color: #E8C077;
    }

    66% {
        color: #C9974B;
    }

    100% {
        color: #DBC29B;
    }
}

.iq-wealth-title{
    color: #F4EFE6;
    font-size: 1.4rem;
    font-weight: 400;
}


/*Team*/


.team-title {
    font-family: var(--body-font), sans-serif;
    font-size: 1.4375rem;
    font-weight: 400;
    line-height: 1.9375rem;
    letter-spacing: 0;
    color: #000;
}

.teamdesign {
    font-family: var(--body-font), sans-serif;
    /* 20% below .team-title's 1.4375rem, so the role sits under the name in the
       hierarchy instead of competing with it. Line-height scaled to match. */
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.55rem;
    letter-spacing: 0;
    color: #000;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.uk-button {
    font-family: var(--body-font), sans-serif;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    border: solid 1px #DBC29B;
    border-radius: 40px;
    padding: 15px 35px;
    outline: none;
    box-shadow: none;
}


.formwide{
    max-width: 39rem;
}

.contact-divider {
    width: 138px;
    height: 1px;
    margin: 0 auto;
    background: #DBC29B;
    transform: rotate(90deg);
}

.dark-form .uk-input, .dark-form .uk-select, .dark-form .uk-textarea {
    background-color: transparent;
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.50);
    border-width: 0 0 1px 0px;
    border-style: solid;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.dark-form a{
    color: #fff;
}

.dark-form label {
    color: #D9D9D9;
}

/* Select when the default/empty option is selected */
.dark-form select {
    color: #D9D9D9;
}

/* Keep the empty/default option grey */
.dark-form #description option:disabled {
    color: #D9D9D9;
}

.uk-select:not([multiple]):not([size]) {
    color: #D9D9D9;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

.dark-form input::placeholder,
.dark-form textarea::placeholder,
.dark-form select {
    font-family: var(--body-font), sans-serif;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: #D9D9D9;
    opacity: 1;
}

.dark-form textarea {
    resize: none;
}
/*--------------------------------------------------------------
# Button Text
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Layout Adjustments
--------------------------------------------------------------*/
.uk-container{
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 960px) {
    .inner-left {
        padding-left: 40px;
    }
    .inner-right {
        padding-right: 40px;
    }
}
@media (min-width: 1200px) {
    .inner-left {
        padding-left: max(var(--min-padding), calc((100vw - (var(--container-width) + (var(--container-padding) * 2))) / 2));
    }
    .inner-right {
        padding-right: max(var(--min-padding), calc((100vw - (var(--container-width) + (var(--container-padding) * 2))) / 2));
    }
}

.uk-background-primary{
    background-color: #051424;
    color: #fff;
}

.uk-background-primary h2,.uk-background-primary p{
    color: #fff;
}

.uk-background-secondary{
    background-color: #fff;
}



/*--------------------------------------------------------------
# Form Submit Loader
--------------------------------------------------------------*/
.main-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	background-color: #fff;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	background-image: url('../images/spinner.svg');
	background-size: 100%;
	width: 80px;
	height: 80px;
	box-shadow: 0 0 40px rgba(0,0,0,0.05);
	-webkit-box-shadow: 0 0 40px rgba(0,0,0,0.05);
	-moz-box-shadow: 0 0 40px rgba(0,0,0,0.05);
	-ms-box-shadow: 0 0 40px rgba(0,0,0,0.05);
	-o-box-shadow: 0 0 40px rgba(0,0,0,0.05);
	z-index: 999999;
    background-color: var(--primary-color);
}

/*--------------------------------------------------------------
# Top Top 
--------------------------------------------------------------*/
.bck {
  position: fixed;
  bottom: 7px;
  left: 0.5rem;

  background: #DBC29B;
  color: #051424 !important;

  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;

  text-decoration: none !important;
  z-index: 999999;


  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in;
}

.bck:hover {
  color: #000000 !important;
}

/* Visible state */
.bck.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
        opacity: 0.3;
}

/*--------------------------------------------------------------
# Sweetalert Popup
--------------------------------------------------------------*/
.swal2-html-container {
    font-family: var(--heading-font) !important;
}

.swal2-container.swal2-center>.swal2-popup {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
    background: rgba(0,0,0,.5) !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--primary-color) !important;
}

.swal2-styled.swal2-confirm:focus{
	box-shadow: none !important;
    outline: none;
}

.swal2-container .swal2-title {
    margin: 0;
    padding: 0 ;
    color: #484848 ;
    font-size: 2.1875rem;
    font-weight: 100;
}
.swal2-container .swal2-html-container {
    display: block;
    color: #484848;
    font-size: 1rem;
    font-weight: 300;
}
.swal2-container .swal2-popup {
    padding: 30px;
    border-radius: 10px;
    background: #E8EEF3;
    color: #484848;
	min-height: 309px;
	border-radius: 0px;
}
.swal2-container .swal2-close {
    display: flex;
    outline: 0;
    color: #484848;
    position: absolute;
    top: 0;
    right: 0;
}
.swal2-container .swal2-close:focus {
    box-shadow: none;
}
.swal2-container .swal2-close:hover {
    color: #000;
}
.swal2-container .swal2-close svg {
    width: 25px;
}

/*--------------------------------------------------------------
# Telephone International Code
--------------------------------------------------------------*/
.form .iti--allow-dropdown input, .form .iti--allow-dropdown input[type=text], .form .iti--allow-dropdown input[type=tel], .form .iti--separate-dial-code input, .form .iti--separate-dial-code input[type=text], .form .iti--separate-dial-code input[type=tel] {
    padding-right: 6px;
    padding-left: 52px;
    margin-left: 0;
}
.iti {
    width: 100%;
}
.iti .iti__tel-input {
  padding-right: 10px;
}

.iti, .iti * {
    font-family: var(--body-font), sans-serif;
    color: #D9D9D9;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5em;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #051424 inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #ADC6BE;
  border-color: transparent;
}


.iti__selected-country-primary
 {
    background: transparent !important;
}
.dark-form .iti__selected-country-primary {
    padding-left: 0;
}

.iti input.iti__tel-input, .iti input.iti__tel-input[type=text], .iti input.iti__tel-input[type=tel] {
    position: relative;
    z-index: 0;
    margin: 0 !important;
    font-family: var(--heading-font), sans-serif;
        color: #D9D9D9;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5em;
}

span.iti__country-name {
    color: #000;
}
.hide {
    display: none;
}
#valid-msg {
    color: #FFFFFF;
    background: #8bc34a;
}
#error-msg {
    color: red;
}
input.error {
    border: 1px solid #FF7C7C;
}
.form-dark .iti__country-list {
  
    background-color: #151f28;
}

.iti__dial-code {
    color: var(--iti-dialcode-color) !important;
}
.iti--separate-dial-code .iti__selected-flag,
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: rgba(0, 0, 0, 0);

    font-size: 0.99609375rem;
}
.iti-msg {
    position: absolute;
    left: 15px;
    bottom: -19px;
    background: red;
    color: #fff !important;
    padding: 1px 10px;
    font-size: 12px;
    right: 0;
    border-radius: 0px;
}
.iti__selected-flag {
    padding-left: 10px;
}
.iti__search-input {
    height: 34px;
    padding: 0 10px;
    outline: 0;
}


/*Section 1*/
.iq-hero {
    position: relative;
    min-height: 94vh;

    background-image: url('../images/hero-mobile2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Gradient overlay */
.iq-hero::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    /* Flat navy overlay - even across the whole frame, no gradient, so the
       image sits at one consistent density behind the copy. */
    background-image: none;
    background-color: rgba(5, 20, 36, 0.95);

    pointer-events: none;
}

.iq-header{
    background-color: #051424;
    z-index: 1000;
}

/* Mobile image overlapping hero + next section */
/*--------------------------------------------------------------
# Hero stat cards (mobile)
# Replaces the phonescreen2.png screenshot, which had to be rendered
# small enough to fit the hero and became unreadable. Built as markup
# rather than a cropped image so the figures stay crisp at any size,
# are selectable/translatable, and cost no image weight.
--------------------------------------------------------------*/
/* Profile card - sits above the two stat cards, same visual system.
   Action buttons from the app UI are deliberately omitted: nothing in the
   hero is interactive, so buttons would invite taps that do nothing. */
.iq-profile-card {
    /* This stylesheet is content-box globally, so width:100% + 14px padding +
       1px border rendered 30px wider than its container and bled off-screen. */
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;
    gap: 12px;

    width: 100%;
    max-width: 360px;
    margin: 1.75rem auto 0;
    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background-color: #0E1B2B;
    text-align: left;
}

.iq-profile-avatar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    border: 1px solid #DBC29B;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.04);

    font-family: var(--heading-font), sans-serif;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    color: #DBC29B;
}

.iq-profile-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.iq-profile-name {
    font-family: var(--heading-font), sans-serif;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.25;
    color: #FFFFFF;
}

.iq-profile-role {
    font-family: var(--body-font), sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.35;
    color: #8B95A4;
}

.iq-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}

.iq-tag {
    display: inline-flex;
    align-items: center;

    padding: 3px 8px;
    border-radius: 999px;

    font-family: var(--body-font), sans-serif;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
}

.iq-tag.is-uhnw {
    border: 1px solid rgba(219, 194, 155, 0.35);
    background-color: rgba(255, 255, 255, 0.04);
    color: #DBC29B;
    text-transform: uppercase;
}

.iq-tag.is-billionaire {
    background-color: #DBC29B;
    color: #0E1B2B;
    text-transform: uppercase;
}

.iq-tag.is-status {
    background-color: rgba(46, 211, 167, 0.15);
    color: #2ED3A7;
}

.iq-profile-updated {
    margin-top: 5px;

    font-family: var(--body-font), sans-serif;
    font-size: 0.6875rem;
    font-weight: 300;
    color: #6B7686;
}

.iq-hero-cards {
    display: flex;
    /* Two-up under the h1. Cards share the row equally; min-width:0 lets them
       shrink below their content width instead of overflowing the container. */
    flex-direction: row;
    align-items: stretch;
    gap: 18px;

    width: 100%;
    max-width: 360px;
    margin: 18px auto 1.75rem;
}

.iq-hero-cards > .iq-stat-card {
    flex: 1 1 0;
    min-width: 0;
}

.iq-stat-card {
    box-sizing: border-box;
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 14px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    /* Sits on the hero photo, so it needs its own ground rather than
       transparency - matches the header's #051424, lifted a touch. */
    background-color: #0E1B2B;
    text-align: left;
}

/* A gold glint that travels around the card edge to draw the eye.
   A conic-gradient ring, masked so only a 1px border-width band shows,
   rotated by animating --iq-angle. inset:-1px so it rides over the card's
   own 1px border rather than sitting inside it. */
@property --iq-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.iq-stat-card::after {
    content: "";

    position: absolute;
    inset: -1px;
    z-index: 0;

    border-radius: 15px;
    padding: 1px;

    background: conic-gradient(
        from var(--iq-angle),
        rgba(219, 194, 155, 0) 0%,
        rgba(219, 194, 155, 0) 84%,
        rgba(219, 194, 155, 0.35) 93%,
        #FFF1DC 98.5%,
        rgba(219, 194, 155, 0) 100%
    );

    /* Punch out the centre so only the ring paints. */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;

    animation: iq-card-trace 4s linear infinite;
    pointer-events: none;
}

/* Offset so the two cards aren't tracing in lockstep. */
.iq-stat-card:nth-child(2)::after {
    animation-delay: -2s;
}

/* Keep the card content above the ring. */
.iq-stat-card > * {
    position: relative;
    z-index: 1;
}

@keyframes iq-card-trace {
    to { --iq-angle: 360deg; }
}

/* Decorative only - respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .iq-stat-card::after {
        animation: none;
    }
}

.iq-stat-card-label {
    font-family: var(--body-font), sans-serif;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8B95A4;
}

.iq-stat-card-value {
    font-family: var(--heading-font), sans-serif;
    /* Half-width cards, so the figure steps down from 1.75rem - the wealth
       range is the long one and sets the ceiling. */
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: #FFFFFF;
    white-space: nowrap;
}

.iq-stat-card-value.is-gold {
    color: #DBC29B;
}

.iq-stat-card-meta {
    font-family: var(--body-font), sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    color: #8B95A4;
}

.iq-stat-card-meta .is-uhnw {
    color: #DBC29B;
}

.iq-stat-card-meta .is-hnw {
    color: #86C79B;
}


/* Hero content */

.iq-hero-content {
    position: relative;
    z-index: 2;

    min-height: calc(70vh - 150px);

    display: flex;
    align-items: center;
}

.iq-hero-text h1 {
    margin: 0 0 22px;

    font-family: var(--heading-font), sans-serif;
    font-size: 2.52rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1em;
    color: #ffffff;
}

.iq-hero-text h4{
    color: #DBC29B;
    margin-top: 0px;
    /* Was inheriting the h4 default of 400 against the body copy's 300, which
       read as bold. Matches the "no bold in body copy" pass on the other sections. */
    font-weight: 300;
}
.iq-hero-text p{
    max-width: 29.2rem;
    color: #fff;
}

/* Brand name picked out in body copy: gold, and stepped up from the 300 body
   weight so it reads as a proper noun rather than emphasis. Reusable - add
   <span class="iq-brand"> around any other LUUX IQ mention. */
.iq-brand {
    font-weight: 600;
    color: #DBC29B;
}

.iq-header-button {
    position: relative;
    z-index: 1;
    overflow: hidden;

    color: #fff;
    border: 1px solid #DBC29B;

    transition: color 0.4s ease;
    background: transparent;
}

.iq-header-button::before {
    content: "";
    position: absolute;
    z-index: -1;

    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background: #DBC29B;

    transition: width 0.4s ease;
}

.iq-header-button:hover {
    color: #051424;
    border-color: #DBC29B;
}

.iq-header-button:hover::before {
    width: 100%;
}


.iq-button {
    position: relative;
    z-index: 1;
    overflow: hidden;

    color: #000;
    border: 1px solid #DBC29B;
    background: transparent;

    transition: color 0.4s ease;

    text-transform: uppercase;
}

.iq-button::before {
    content: "";
    position: absolute;
    z-index: -1;

    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background: #DBC29B;

    transition: width 0.4s ease;
}

.iq-button:hover {
    color: #051424;
    border-color: #DBC29B;
}

.iq-button:hover::before {
    width: 100%;
}
/*Section 2*/

.section2{
    background-image: url('../images/section2bg.jpg');
    padding-top: 180px;
    padding-bottom: 180px;
}
.luux-iq-quote {
    max-width: 989px;
    margin: 0 auto;

    font-family: var(--body-font), sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.875rem;
    line-height: 150%;
    letter-spacing: 0;
    text-align: center;

    background: linear-gradient(
        108.39deg,
        #64543C 39.09%,
        #DBC29B 65.17%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}



/*Section 3 The Problem*/





#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
    border-width: 1px;
}

#mc_embed_signup .mc-field-group input {
    background-color: transparent;
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
    border-radius: 0;
    font-size: 1rem;
    padding: 0 10px;
    height: calc(45px * var(--scale-factor));
    outline: 0;
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    border-right: 0 !important;
}
.site-footer.uk-light .uk-input {
    background-color: transparent;
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
    border-radius: 0;
    font-size: 0.875rem;
}

#mc-embedded-subscribe {
    clear: both;
    width: auto;
    display: block;
    margin: 0;
    min-width: auto;
    border-radius: 0;
    height: calc(45px * var(--scale-factor));
    padding: 0 15px;
    border-color: #fff;
}

.site-footer .footer-heading-01 {
   font-family: var(--body-font), sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: normal;
    letter-spacing: 1.44px;
    margin-top: 24px;
}

.site-footer .telefoneemail
{
    font-family: var(--body-font), sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 150%;
    letter-spacing: 0;
}

.uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover {
    
    text-decoration: none; !important; 
}

.newslettercopy{
    font-size: 0.875rem;
    color: #fff;
    opacity: 0.5;
}

.footer-column02-right > *{
    font-size: 0.75rem;
    color: #fff;
    opacity: 0.5;
}

.site-footer h4 {
    font-size: 1.5rem;
    font-weight: 400;
    font-family: var(--body-font);
    letter-spacing: normal;
    margin-bottom: 16px;
    text-transform: none;
        color: #DBC29B;
}


.iq-buit h1 {
    margin: 0 0 22px;
    font-family: var(--heading-font), sans-serif;
    /* 20% down from 2.52rem */
    font-size: 2.016rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1em;
}


a.uk-position-center-right.uk-position-small.uk-icon.uk-slidenav-next.uk-slidenav svg {
    color: #fff;
}
a.uk-position-center-left.uk-position-small.uk-icon.uk-slidenav-previous.uk-slidenav svg{
    color: #fff;
}

.blackdots a.uk-position-center-right.uk-position-small.uk-icon.uk-slidenav-next.uk-slidenav svg {
    color: #000;
}
.blackdots a.uk-position-center-left.uk-position-small.uk-icon.uk-slidenav-previous.uk-slidenav svg{
    color: #000;
}


.uk-dotnav > * > * {
    width: 5px;
    height: 5px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #fff;
    opacity: 0.6;

    transition: width 0.35s ease,
                opacity 0.35s ease;
}

.uk-dotnav > .uk-active > * {
    width: 40px;
    height: 3px;

    border-radius: 5px;

    background: #fff;
    opacity: 1;
}

.blackdots .uk-dotnav > * > * {
    width: 5px;
    height: 5px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: #000;
    opacity: 0.8;

    transition:
        width 0.35s ease,
        opacity 0.35s ease;
}

.blackdots .uk-dotnav > .uk-active > * {
    width: 40px;
    height: 3px;

    border-radius: 5px;

    background: #000;
    opacity: 1;
}



#mobile-sticky-enquiry {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

#mobile-sticky-enquiry.mobile-sticky-visible {
  transform: translateY(0);
}

.mobile-sticky-enquiry {
    transform: translateY(100%);
    transition: transform 0.3s ease;
    background: #051424;
    min-height: 35px;
}

.mobile-sticky-visible .mobile-sticky-enquiry {
    transform: translateY(0);
    text-decoration: none;
}

.mobile-sticky-enquiry span{
    color: #fff;
    outline: none;
    offset: none;
    border: none;
}

.iq-mobile-hero {
    width: 100%;
    position: relative;
}

.iq-mobile-hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.iq-footer-button {
    position: relative;
    z-index: 1;
    overflow: hidden;

    color: #fff;
    border: 1px solid #DBC29B;

    transition: color 0.4s ease;
    background: transparent;
}

.iq-footer-button::before {
    content: "";
    position: absolute;
    z-index: -1;

    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background: #DBC29B;

    transition: width 0.4s ease;
}

.iq-footer-button:hover {
    color: #051424 !important;
    border-color: #DBC29B !important;
}

.iq-footer-button:hover::before {
    width: 100%;
}


.testimonial{
    border-left: none; 
    padding-left: 0; 
    font-family: var(--body-font), sans-serif;
    font-weight: 400;
    font-size: 1.875rem; 
    line-height: 1.5; 
    letter-spacing: 0;
    color: #000;
    font-style: normal;
}


.reviewsection{
    max-width: 67.5rem;
}

.filled-stars svg * {
    fill: #DBC29B !important;
    stroke: #DBC29B !important;
  }



.uk-light .uk-grid-divider>:not(.uk-first-column)::before{

    border-left-color: #DBC29B;

}
.uk-light hr{
    border-top-color: #DBC29B;
    opacity: 0.4;
}
a.uk-button.uk-button-default.iq-footer-button {
    border: solid 1px #DBC29B;
}


.team-image {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.team-image::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 5px;

    background: linear-gradient(
        135deg,
        #C39854 0%,
        #C39854 30%,
        #DBC29B 55%,
        #FFF1DC 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    pointer-events: none;
}

.team-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.uk-light .uk-button-text{
    color: #DBC29B;
}


@media screen and (max-width: 1920px)
{
	

}

@media screen and (max-width: 1680px)
{
	.section2 {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .section2 .luux-iq-quote{
        padding-left: 40px;
        padding-right: 40px;
    }

}

@media screen and (max-width: 1600px)
{
	

}

@media screen and (max-width: 1440px)
{
	

}

@media screen and (max-width: 1400px)
{

	
}

@media screen and (max-width: 1368px)
{
	

}

@media screen and (max-width: 1360px)
{


}

@media screen and (max-width: 1280px)
{


}
@media screen and (max-width: 1152px)
{

	
}
@media screen and (max-width: 1024px)
{


}

@media screen and (max-width: 960px)
{

    h2 {
        font-size: 1.2rem;
        padding-bottom: 1rem;
    }
    .paraholder {
        max-width: 100%;
        padding-bottom: 1rem;
    }

    .stat-number { 
        font-size: 2rem;
    }

    .iq-hero-text h1 {
        margin: 0 0 10px;
        font-size: 1.5rem;
    }

    .iq-buit h1 {
        margin: 0 0 10px;
        font-size: 1.5rem;
    }    

    .usecase-item span {
        font-size: 1rem;
    }   

    .luuxiqwide{
        max-width: 100%;
    }
    .iq-hero {
        background-image: url("../images/hero-mobile2.jpg");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .testimonial {

        font-size: 1.5rem;
    }

}

@media (min-width: 960px) and (max-width: 1279px) {

    
}

@media screen and (max-width: 928px)
{
	

}

@media screen and (max-width: 896px)
{
	

}

@media screen and (max-width: 800px)
{
	

}

@media screen and (max-width: 768px)
{

}

@media screen and (max-width: 767px)
{


}

@media screen and (max-width: 680px)
{


}

@media screen and (max-width: 640px)
{

    h2 {
       text-align: center;
       font-size: 1.3rem;
    }



    /* uk-padding puts 30px on all four sides, which both inset the network map
       from the page edge and stacked on top of the section's own 40px vertical
       padding. Trimmed vertically on both columns, and horizontally on the map
       column only - the copy column keeps the 45px gutter the rest of the page uses. */
    .iq-problem .uk-padding {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    /* Target the map column explicitly: UIkit re-applies uk-first-column to every
       box once the grid stacks, so a .uk-first-column selector catches both. */
    .iq-problem .iq-problem-visual {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* The Solution slideshow runs full-bleed on mobile: -45px cancels
       uk-container's 15px plus uk-padding's 30px, so the image meets both
       viewport edges. Vertical trimmed to the 58px the other sections use. */
    .iq-solution .iq-solution-visual {
        padding-left: 0;
        padding-right: 0;
        padding-top: 18px;
        padding-bottom: 18px;

        /* width:auto collapsed the box to zero (its child sizes from the parent),
           so break out by viewport width instead of by fixed negative margins. */
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .iq-solution {
        padding-bottom: 40px;
    }

    /* "One platform" slideshow: same full-bleed treatment as The Solution.
       Breaking out by viewport width rather than negative margins, since the
       inset comes from two ancestors (uk-container 15px + uk-padding 30px). */
    .iq-platform-visual {
        /* This column's grid ul is already flush to the viewport's left edge
           (uk-grid's own -30px margin), so calc(50% - 50vw) over-corrects by
           15px here. Zero margin + 100vw lands it exactly. padding-left:0
           removes the grid gutter that would otherwise inset the image. */
        width: 100vw;
        /* uk-grid is a flex container, so the column shrinks straight back to
           345px unless shrinking is disabled. */
        flex: 0 0 100vw;
        max-width: none;

        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* The copy column sat 40px from the left but 70px from the right: uk-grid's
       negative margin cancels the container's left padding but not its right,
       so the column ends at 345px while the viewport is 375px. Span the full
       width and pad it evenly instead. */
    .iq-platform .uk-padding-large {
        width: 100vw;
        flex: 0 0 100vw;
        max-width: none;
        margin-left: 0;
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Bottom trimmed to the 58px used elsewhere. Top zeroed so the full-bleed
       image butts straight up against the dark logo band above it - any padding
       here shows as a white strip between two edge-to-edge sections. */
    .iq-platform {
        padding-top: 0;
    }

    .iq-platform > .uk-container.uk-padding {
        padding-top: 0;
        padding-bottom: 18px;
    }

    .section2 {
        /* Symmetric. The old 170px top was clearance for the phone-screen image
           that overhung this section (bottom:-110px); that image was replaced by
           the hero stat cards, so the extra top space no longer had a purpose. */
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .luux-iq-quote {
        font-size: 1.5rem;
    }

    .uk-background-primary h3 {
        font-size: 1rem;
    }

    .iq-buit h1 {
        margin: 0 0 10px;
        font-size: 1.2rem;
    }

    .uk-card.uk-card-default.uk-card-body {
        text-align: center;
    }

    .contact-divider {
        width: 80px;
    }

    .iq-hero-text h1 {
        text-align: center;
    }
    .iq-hero-text{
        text-align: center;
    }

    .iq-hero-content {

        /* Explicit padding instead of a min-height + vertical centring: the old
           94vh hero left the h1 flush against the header and dumped ~97px of
           dead space under the cards. */
        min-height: 0;
        padding-top: 40px;
        padding-bottom: 40px;

        display: flex;
        /* Column so the stat cards stack under the copy rather than becoming a
           second flex item beside it. */
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .iq-hero {
        min-height: 0;
    }

    .iq-hero::before{
        /* Flat, no gradient. Slightly denser than desktop because the copy
           covers more of the frame on a phone. */
        background-image: none;
        background-color: rgba(5, 20, 36, 0.77);
    }

    .iq-hero {
        background-image: url("../images/Group-297.jpg");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .testimonial {
        font-size: 1.2rem;
    }
    .stat-number {
        font-size: 2rem;
        text-align: center;
    }
    .stat-copy {
        text-align: center;
    }

    /* Stats read as a stacked list on mobile rather than a 2-up grid: gold figure
       on the left, supporting copy beside it. The 2-up grid left each column ~140px,
       forcing the longer stats to 7+ lines. One full-width row per stat roughly
       doubles the measure so the copy lands in ~3 lines. */
    .stat-grid > * {
        width: 100%;
    }

    .stat-grid .statcard {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        /* Aligns the figures to the same 45px gutter as the body copy above,
           instead of letting them sit flush against the container edge. */
        padding-left: 30px;
        padding-right: 0;
        margin-bottom: 6px;
    }

    /* Width follows the figure, with a floor that keeps the copy in a single
       column - a fixed width left ~23px of dead space beside the shorter
       figures and pushed the copy too far from them. */
    .stat-grid .statcard .stat-number {
        /* side-by-side on mobile, so the desktop bottom margin does not apply */
        margin-bottom: 0;
        flex: 0 0 auto;
        min-width: 66px;
        text-align: left;
        line-height: 1.1;
    }

    .stat-grid .statcard .stat-copy {
        flex: 1 1 auto;
        text-align: left;
    }

    /* uk-grid-divider draws a vertical rule between columns - meaningless once
       the stats are stacked one per row. */
    .stat-grid.uk-grid-divider > :not(.uk-first-column)::before {
        display: none;
    }
    
    .paraholder {
       text-align: center;
    }
    .subheading {
        justify-content: center;
    }

    /* ---- Benefit-card carousel: peek the next card -------------------------
       At uk-child-width-1-1 each card filled the viewport exactly, so nothing
       signalled that three more cards existed. The next card now breaks the
       right edge, which reads as "this scrolls" without an extra affordance.
       Bleeding right (-45px cancels uk-container's 15px + uk-padding's 30px)
       and tightening the gutter buys the peek back from the page margin, so
       the active card stays near full width instead of shrinking to pay for it.
       Delete this whole block to restore full-width slides. */
    .benefit-slider {
        margin-right: -45px;
    }

    .benefit-slider .uk-slider-items {
        margin-left: -16px;
    }

    .benefit-slider .uk-slider-items > * {
        width: 86%;
        padding-left: 16px;
    }

    /* ---- Team carousel: smaller portraits + peek the next member -----------
       The portrait was rendering as a 345px circle on a 375px viewport, so it
       read as a full-bleed image rather than a profile, and nothing suggested
       two more people followed. Capping the circle and letting the next slide
       break the right edge fixes both. -15px cancels uk-container's padding;
       padding-right on the slide supplies the gap the ul has no gutter for.
       Delete this block to restore full-width portraits. */
    .team-slider {
        margin-right: -15px;
        /* uk-container only gives 15px, leaving the portrait tight against the
           page edge. 30px more puts it on the same 45px gutter as the body copy
           and the benefit cards. Padding the slider (not the slides) keeps the
           offset off the peeking slide, so the peek stays full-bleed. */
        padding-left: 30px;
    }

    .team-slider .uk-slider-items > * {
        /* Percentage alone made the slide grow with the viewport while the 190px
           portrait and 240px bio stayed put, so wider phones just gained dead
           space to the right of the text. The cap freezes the card at its
           natural size and spends the extra width on the peek instead; the
           percentage still takes over below ~375px so small phones scale down. */
        width: min(270px, 82%);
        padding-right: 20px;
    }

    .team-slider .team-image {
        max-width: 190px;
    }

    /* Shortens the measure on the member bio so it doesn't run the full slide
       width and crowd the next portrait peeking in on the right. */
    .team-slider .team-heading p {
        max-width: 240px;
    }

    /* Name + role centred over the portrait. 210px rather than the portrait's
       190px because "Co-Founder & CEO" measures 201px and would otherwise wrap;
       the resulting centre sits 10px off the circle's, which reads as centred.
       Delete this rule to return them to left-aligned. */
    .team-slider .team-title,
    .team-slider .teamdesign {
        max-width: 190px;
        text-align: center;
    }

    /* The label is centred on mobile, but the rule only exists to its left, which
       throws the block off-centre. Mirror it on the right with a pseudo-element so
       the whole lockup reads as optically central. Matches .subheading hr (40px,
       1px #DBC29B) and the 15px uk-grid-small gutter. */
    .subheading::after {
        content: "";
        width: 40px;
        margin-left: 15px;
        border-top: 1px solid #DBC29B;
    }


    .uk-card:hover {
        transform: translateY(-10px);
        background-color: #fff;
        color: #000
    }

    .uk-card:hover .cardh3 {
        color: #000;
    }

    .uk-card:hover p {
        color: #000;
    }

    .cta{
        text-align: center;
    }

    .stat-grid.uk-grid {
        justify-content: center;
    }
    .avatar{
        text-align: center;
    }

    .filled-stars {
        text-align: center;
    }
}


@media screen and (max-width: 639px)
{



    .iq-header {
        display: flex;
        justify-content: center;
        min-height: 65px;
        align-items: center;
    }

}



@media screen and (max-width: 540px)
{



}
 
@media screen and (max-width: 480px)
{
 
    .slidermobieoneitem li {
        width: 100%;
    }

}
@media screen and (max-width: 420px)
{


}

@media screen and (max-width: 375px)
{


}

@media screen and (max-width: 320px)
{

	
}

@media (min-width: 960px) {
    .site-footer .col-height
    {
        min-height: 216px;
    }
}

/*--------------------------------------------------------------
# Network map (The Problem section)
# Replaces theproblem.jpg. Inline SVG rather than an image: sharp at any size,
# no asset weight, real text. Sits on its own dark ground so it reads as
# product UI against the light section. Spoke count is thinned from the
# desktop app's ~225 so the radials stay distinct at phone width.
--------------------------------------------------------------*/
.iq-netmap {
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 16px 16px 14px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    background-color: #0B1728;
}

.iq-netmap-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;

    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.iq-netmap-title {
    font-family: var(--heading-font), sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #FFFFFF;
}

.iq-netmap-sub {
    font-family: var(--body-font), sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    color: #6B7686;
}

.iq-netmap-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 2px auto 0;
}

.iq-nm-glow      { fill: url(#iqCoreGlow); }
.iq-nm-core      { fill: #FFF1DC; }

/* Inner band = direct connections, outer band = extended network. */
.iq-nm-spoke-in  { stroke-width: 1.6; }
.iq-nm-spoke-in.is-pale { stroke: rgba(255, 241, 220, 0.55); }
.iq-nm-spoke-in.is-mint { stroke: rgba(134, 199, 155, 0.55); }
.iq-nm-spoke-out { stroke: rgba(219, 194, 155, 0.62); stroke-width: 1.5; }

.iq-nm-dot.is-uhnw  { fill: #DBA94F; }
.iq-nm-dot.is-hnw   { fill: #9CB6D6; }
.iq-nm-dot.is-other { fill: #5C6B7E; }

.iq-nm-leader { stroke: rgba(156, 182, 214, 0.55); stroke-width: 1; }

.iq-nm-label {
    font-family: var(--body-font), sans-serif;
    font-size: 11px;
    font-weight: 300;
    fill: #C6CCD5;
}

.iq-netmap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;

    margin: 2px 0 0;
    padding: 0 0 12px;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.iq-netmap-legend li {
    display: flex;
    align-items: center;
    gap: 6px;

    font-family: var(--body-font), sans-serif;
    font-size: 0.6875rem;
    font-weight: 300;
    color: #C6CCD5;
}

.iq-nm-key {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.iq-nm-key.is-core  { background-color: #FFF1DC; }
.iq-nm-key.is-uhnw  { background-color: #DBA94F; }
.iq-nm-key.is-hnw   { background-color: #9CB6D6; }
.iq-nm-key.is-other { background-color: #5C6B7E; }

.iq-netmap-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
}

.iq-netmap-score {
    font-family: var(--body-font), sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8B95A4;
}

.iq-netmap-score b {
    font-family: var(--heading-font), sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0;
    color: #DBA94F;
}

.iq-netmap-score em {
    font-style: normal;
    font-weight: 400;
    color: #DBA94F;
}

.iq-netmap-meta {
    font-family: var(--body-font), sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    color: #8B95A4;
}

.iq-netmap-note {
    font-family: var(--body-font), sans-serif;
    font-size: 0.75rem;
    font-weight: 300;
    color: #DBC29B;
}

/* Static platform screenshot (replaced the autoplay slideshow). */
.iq-platform-still {
    display: block;
    width: 100%;
    height: auto;
}

/*--------------------------------------------------------------
# Use-case accordion ("One platform. Three Ways")
# Was three always-open blocks; now a UIkit accordion so the section
# reads as a short scannable list with one panel open, matching the
# pattern on luux-media.com.
--------------------------------------------------------------*/
.usecases {
    margin: 0;
    padding: 0;
    list-style: none;
}

.usecases .usecase-item {
    padding: 0;
    border-bottom: 1px solid #E8DDCC;
}

.usecases .usecase-item:last-child {
    border-bottom: none;
}

.usecase-title {
    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 1.25rem 2.25rem 1.25rem 0;
    position: relative;

    font-family: var(--body-font), sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--black);
    text-decoration: none;
    transition: color 0.25s ease;
}

.usecase-title:hover,
.usecase-title:focus {
    color: #7F6155;
    text-decoration: none;
}

/* Replace UIkit's default marker with a chevron on the right that
   rotates from > to v when the panel opens. */
.usecases .uk-accordion-title::before {
    content: "";

    position: absolute;
    top: 50%;
    right: 2px;

    width: 9px;
    height: 9px;
    margin: 0;

    border-right: 1.5px solid #7F6155;
    border-bottom: 1.5px solid #7F6155;
    background: none;

    transform: translateY(-50%) rotate(-45deg);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.usecases .uk-open > .uk-accordion-title::before {
    transform: translateY(-70%) rotate(45deg);
}

.usecase-label {
    flex: 1 1 auto;
    min-width: 0;
}

.usecase-body {
    margin: 0;
    padding: 0 2.25rem 1.5rem 0;
}

.usecase-body p {
    margin: 0 0 0.75rem;
}

.usecase-body p:last-child {
    margin-bottom: 0;
}

/* Lead line sits a step above the supporting copy without going bold. */
.usecase-lead {
    color: var(--black);
}

/*--------------------------------------------------------------
# Additional platform capabilities
# Secondary features listed under the three primary use cases.
--------------------------------------------------------------*/
.usecase-extras {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid #E8DDCC;
}

.usecase-extras-title {
    display: block;
    margin-bottom: 1.25rem;

    font-family: var(--body-font), sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7F6155;
}

.usecase-extras-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;

    margin: 0;
    padding: 0;
    list-style: none;
}

.usecase-extras-list li {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ue-name {
    font-family: var(--body-font), sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--black);
}

.ue-desc {
    font-family: var(--body-font), sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.5;
    color: #4E4E4E;
}

@media screen and (max-width: 640px) {
    /* Single column on a phone - two columns leaves ~130px per item. */
    .usecase-extras-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.125rem;
    }
}

/*--------------------------------------------------------------
# Proof points as labels
# These were large gold numerals (92%, 3.4x...). Now short phrases, so
# they need heading treatment rather than display-numeral sizing - at
# 4.375rem "More warm introductions" would run four lines.
--------------------------------------------------------------*/
.proof-number.is-label {
    display: block;

    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    margin-bottom: 0.75rem;

    /* The bounce suited a single numeral; on a multi-word label it reads as
       drift. Colour cycle kept - that is what ties them to the gold palette. */
    animation: proof-number-gold 4s ease-in-out infinite;
}

@media screen and (max-width: 640px) {
    .proof-number.is-label {
        font-size: 1rem;
    }
}

/*--------------------------------------------------------------
# Hero visual (desktop collage / mobile stack)
--------------------------------------------------------------*/
.iq-hero-visual {
    position: relative;
    width: 100%;
}

.iq-hero-map {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    opacity: 0.9;
}

.iq-hero-map svg {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Desktop: two columns, cards floated over the map ------------------- */
@media screen and (min-width: 960px) {
    /* Flex column so the content block can take the height left over after the
       sticky header, and centre itself in it. Previously it sat hard under the
       header with 250px of dead space below. */
    .iq-hero {
        display: flex;
        flex-direction: column;
    }

    .iq-hero-content {
        flex: 1 1 auto;
        /* uk-container's `margin: 0 auto` centres it as a flex item and stops it
           stretching, so it shrank to its content width. border-box because this
           stylesheet is content-box globally - otherwise the 80px padding is
           added on top of width:100% and the row overflows by 160px. */
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;

        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 3rem;

        /* 40px is the page's container padding, which reads tight on a hero. */
        padding-left: 80px;
        padding-right: 80px;
    }

    .iq-hero-text {
        flex: 0 0 42%;
        max-width: 42%;
    }

    .iq-hero-visual {
        flex: 1 1 auto;
        min-height: 520px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Map is the backdrop; the cards sit over it as product surfaces. */
    .iq-hero-visual .iq-profile-card,
    .iq-hero-visual .iq-hero-cards {
        position: absolute;
        z-index: 2;
        margin: 0;
    }

    .iq-hero-visual .iq-profile-card {
        top: 8%;
        left: 0;
        width: 340px;
        max-width: none;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    }

    .iq-hero-visual .iq-hero-cards {
        right: 0;
        bottom: 8%;
        width: 340px;
        max-width: none;
    }

    .iq-hero-visual .iq-stat-card {
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    }
}

/* --- Mobile: keep the approved order (h1, h4, cards, copy) -------------- */
@media screen and (max-width: 640px) {
    /* display:contents lets the visual slot between the h4 and the paragraph
       without duplicating markup for the two layouts. */
    .iq-hero-text {
        display: contents;
    }

    .iq-hero-content {
        text-align: center;
    }

    .iq-hero-text h1     { order: 1; }
    .iq-hero-text h4     { order: 2; }
    .iq-hero-visual      { order: 3; }
    .iq-hero-text p      { order: 4; }
    .iq-hero-text .uk-button { order: 5; }
}

/* Platform section: top-align the screenshot with the heading beside it.
   The grid is uk-flex-middle (centred) and the copy column carries 70px of
   uk-padding-large, so the image sat ~100px lower than the h2. */
@media screen and (min-width: 960px) {
    .iq-platform .uk-grid {
        align-items: flex-start;
    }

    .iq-platform .iq-platform-visual {
        padding-top: 70px;
    }
}

/*--------------------------------------------------------------
# Proof-points section on LUUX navy
# Reversed out: navy ground, white copy, gold labels and dividers.
# Applies at every breakpoint (desktop grid and mobile slider).
--------------------------------------------------------------*/
.iq-proof {
    background-color: #051424;
}

.iq-proof h2 {
    color: #FFFFFF;
}

/* Supporting line under each gold label. */
.iq-proof .uk-text-center > div:not(.proof-number),
.iq-proof .uk-text-center > div:not(.proof-number) span {
    color: #FFFFFF;
}

/* Dividers already use #DBC29B; make sure the reversed context keeps them gold. */
.iq-proof .uk-grid-divider > :not(.uk-first-column)::before {
    border-left-color: #DBC29B;
}

/* Slider dots on a dark ground. */
.iq-proof .uk-dotnav > * > * {
    border-color: rgba(255, 255, 255, 0.4);
}

.iq-proof .uk-dotnav > .uk-active > * {
    background-color: #DBC29B;
    border-color: #DBC29B;
}

/* Desktop team portraits: were filling the full 433px column, which read as
   oversized against the copy beneath. Halved. */
@media screen and (min-width: 640px) {
    /* The ring is drawn by this padding (gradient masked to a ring), so the
       padding value is its stroke width. 5px read heavy at desktop size. */
    .team-image::before {
        padding: 2px;
    }

    .team-image {
        max-width: 216px;
        /* capped width leaves slack in the column, so centre it */
        margin-left: auto;
        margin-right: auto;
    }

    /* Name, role and bio centre under the portrait. */
    .uk-visible\@s .team-title,
    .uk-visible\@s .teamdesign,
    .uk-visible\@s .team-heading {
        text-align: center;
    }
}


/*--------------------------------------------------------------
# Three specific mobile gaps trimmed to 58px
# Only the boundaries flagged: One Platform -> proof band,
# The Solution -> benefit cards, benefit cards -> "We are not a
# software company". No other section spacing is touched.
--------------------------------------------------------------*/
@media screen and (max-width: 640px) {
    /* 1. below "Dashboards", before the navy band */
    .iq-platform {
        padding-bottom: 0;
    }

    /* 2. below the -70% stats, before the benefit cards */
    .iq-solution {
        padding-bottom: 0;
    }

    .iq-solution .uk-padding {
        padding-bottom: 20px;
    }

    .iq-benefits > .uk-container {
        padding-top: 0;
    }

    /* 3. below the benefit slider, before "We are not a software company" */
    .iq-benefits {
        padding-bottom: 0;
    }

    .iq-benefits .uk-padding {
        padding-top: 0;
        padding-bottom: 18px;
    }
}

/*--------------------------------------------------------------
# Hero at tablet widths (641-959px)
# This band fell between the two hero layouts: the base flex row applied,
# but the network map is uk-visible@m so it was hidden - leaving copy and
# cards side by side with nothing balancing them. Stack it like mobile.
--------------------------------------------------------------*/
@media screen and (min-width: 641px) and (max-width: 959px) {
    .iq-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        min-height: 0;
        padding-top: 56px;
        padding-bottom: 56px;
        text-align: center;
    }

    /* display:contents lets the visual slot between the h4 and the paragraph,
       same technique as mobile, without duplicating markup. */
    .iq-hero-text {
        display: contents;
    }

    .iq-hero-text h1         { order: 1; }
    .iq-hero-text h4         { order: 2; }
    .iq-hero-visual          { order: 3; }
    .iq-hero-text p          { order: 4; }
    .iq-hero-text .uk-button { order: 5; }

    .iq-hero-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .iq-hero-visual {
        width: 100%;
        max-width: 420px;
    }
}

/* Static lifestyle image in The Solution (replaced the autoplay slideshow). */
.iq-solution-still {
    display: block;
    width: 100%;
    height: auto;
}

/* Mobile: tighten the "Luux IQ Was Built Inside" section — reduce space above the
   heading by ~36% (image box bottom-pad + content box top-pad: 30px -> 19px). */
@media (max-width: 767px) {
  .iq-buit .uk-child-width-1-2\@m > .uk-padding:first-child { padding-bottom: 19px; }
  .iq-buit .uk-child-width-1-2\@m > .uk-padding:last-child  { padding-top: 19px; }
}