/* ================= nullcloud-styles.css =================
   Consolidated + purged styles for the standalone NullCloud.ai landing page.
   Order: normalize -> (purged) site base -> product-page base -> nullcloud.
   ======================================================== */

/* ---- normalize ---- */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
 *    specificity and defer to the .w-button selector
 */
button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
 * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
 *    (similar to normalize.css >=4.0.0)
 */
input[type='search'] {
  -webkit-appearance: none;
  /* 1 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}

.grecaptcha-badge {
    opacity: 0;
}

/* ---- site base (purged from infrashield-website-prototype.css) ---- */
:root {
    --font--family--title: "Gotham Bold", "Trebuchet MS", sans-serif;
    --font--family--light: "Gotham Light", "Trebuchet MS", sans-serif;
    --font--family--body: "Gotham Book", "Trebuchet MS", sans-serif;
    --font--family--medium: "Gotham Medium", "Trebuchet MS", sans-serif;
    --font--family--bold: "Gotham Bold", "Trebuchet MS", sans-serif;
    --font--family--book: "Gotham Book", "Trebuchet MS", sans-serif;
    --font--family--header-2: "Gotham Bold", "Trebuchet MS", sans-serif;
    --font--family--header-3: "Gotham Bold", "Trebuchet MS", sans-serif;
    --font--family--header-4: "Gotham Medium", "Trebuchet MS", sans-serif;

    --font--font-size--xs: 10px;
    --font--font-size--sm: 12px;
    --font--font-size--body: 16px;
    --font--font-size--lg: 20px;
    --font--font-size--xl: 24px;
    --font--font-size--2xl: 30px;
    --font--font-size--3xl: 38px;
    --font--font-size--4xl: 50px;
    --font--font-size--5xl: 68px;

    --white: white;
    --infrashield-darkblueprimary: #1E6196;
    --infrashield-darklight: #308bc7;
    --infrashield-lightblue: #69b2e1;
    --infrashield-lighter: #c4dff3;
    --infrashield-lightest: #f2f8fd;
    --400: #a4a7ae;
    --300: #d7d7d7;
    --600: #535862;
    --800: #252b37;
    --900: #101828;

    --space--300: 12px;
    --space--400: 16px;
    --radius--medium: 8px;

    --font--line-height--xs: 14px;
    --font--line-height--sm: 16px;
    --font--line-height--body: 22px;
    --font--line-height--lg: 28px;
    --font--line-height--xl: 32px;
    --font--line-height--2xl: 40px;
    --font--line-height--3xl: 44px;
    --font--line-height--4xl: 46px;
    --font--line-height--h3-line-height: 24px;
    --body--size-medium: 16px;

    --letter-spacing: -2px;
    --radius--small: 4px;
    --radius--large: 16px;
    --radius--xlarge: 24px;
    --stroke--border: 1px;
    --paddingwrappersides: 60px;
    --paddingBoxesContent: 80px;
    --maxwidthcontent: 1440px;
    --space--200: 8px;
    --vh: 1vh;
}
* {
    cursor: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    height: 100%;
    overflow: visible;
}
.wrapper-fix {
    width: 100%;
    height: 100%;
    position: relative;
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
body {
    margin: 0;
    color: var(--900);
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 16px;
    
    display: flex;
    flex-direction: column;
    overflow: visible;
}
#page-transition.active {
    left: 0;
}
video {
    display: inline-block;
    vertical-align: baseline;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-repeat: no-repeat;
}
img {
    max-width: 100%;
    display: inline-block;
}
::selection {
    background-color: var(--infrashield-lightblue);
    color: var(--900);
}
h1, h2, h3, h4, h5, h6, p, a {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--900);
}
p {
    letter-spacing: -.01em;
}
h1 {
    margin-block-start: 0 !important;
}
ul, li {
    margin: 0;
    padding: 0;
}
li::marker {
    margin-right: -0.3em;
}
h1, h2, h3 {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
input,
textarea {
    font-size: 14px;
    border: none;
    width: 100%;
    padding: .75rem;
    background: transparent;
    font-family: Gotham, sans-serif;
    resize: none;
    border-radius: 6px;
}
input:focus,
textarea:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
.form-field-wrapper input::placeholder {
    color: #717278;
}
h1.scroll-in,
h2.scroll-in,
h3.scroll-in,
p.hero-header-tagline.scroll-in {
    opacity: 1;
    transform: translateX(0);
}
.hide-nav {
    transform: translateY(-80px);
    transition: transform 0.3s ease-in-out;
}
.hide-megamenu {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.menu-mobile-items.active {
    transform: translateY(0px);
    visibility: visible;
    transition: transform 0.4s ease-in-out, visibility 0.4s;
    pointer-events: auto;
}
.menu-mobile-items .button-main {
    justify-content: space-between;
    width: 100%;
}
button.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
.button-main:hover .button-icon {
    border-left: 1px solid white;
}
.button-main-dark:hover .button-icon {
    border-left: 1px solid var(--900);
}
.blur-filter {
    backdrop-filter: blur(15px);
}
.steps-container .step-number.active {
    color: white !important;
    background: var(--900);
}
section,
header {
    overflow-x: clip!important;
}
.button-text {
    font-family: var(--font--family--medium);
    font-size: var(--font--font-size--sm);
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;
    line-height: 14px;
    text-decoration: none;
}
.form-field-label.label-light,
.form-field-wrapper.input-light {
    color: white;
}
.contact-us-form {
    grid-row-gap: 24px;
    border-radius: var(--radius--medium);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    text-decoration: none;
    display: flex;
}
.background-transparent.contact-us-container {
    background: transparent;
}
.step-number.active {
    color: white;
    position: relative;
}
.step-number.active p {
    color: white;
}
.button-text-wrapper {
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    text-decoration: none;
    display: flex;
    transform: translate(0);
    transition: all 0.3s ease;
}
.button-icon {
    border-left: 1px solid var(--900);
    flex-direction: column;
    justify-content: center;
    width: 45px;
    padding: 16px;
    text-decoration: none;
}
.button-icon,
.button-icon-left {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}
.button-main .button-text-wrapper::before {
    content: "";
    width: 45px;
    display: inline-block;
    margin-left: -45px;
}
.button-main:hover.button-text-wrapper {
    transform: translate(0);
    transition: all 0.3s ease;
}
.button-icon.fade-out {
    transform: translateX(100%);
    margin-right: -45px;
    opacity: 0;
    transition: transform 0.3s ease;
}
@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.button-icon.button-icon-light {
    border-left-color: white;
}
.button-icon.login-button-no-border {
    border-left-style: none;
}
.button-icon.button-login {
    border: 1px solid var(--800);
}
.button-icon.cta-line-icon {
    border-left-style: none;
    width: auto;
    padding: 0;
}
.sales-cta-section {
    z-index: 14;
    padding: 0 var(--paddingwrappersides);
    background: radial-gradient(ellipse at top left, #69b2e1 20%, rgb(255, 255, 255) 55%);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-decoration: none;
    display: flex;
    position: relative;
    overflow-x: clip!important;
}
.footer {
    z-index: 2;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 45svh;
    padding-top: 80px;
    padding-bottom: 40px;
    text-decoration: none;
    display: flex;
    bottom: 0;
}
.footer-info-login-container {
    grid-column-gap: 48px;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    text-decoration: none;
    display: flex;
}
.footer-attack-content {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    font-family: var(--font--family--body);
    color: white;
    font-size: var(--font--font-size--body);
    line-height: var(--font--line-height--body);
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
    font-weight: 300;
    display: flex;
}
.footer-attack-content.footer-client-portal {
    justify-content: flex-start;
    align-items: flex-end;
}
.footer-contact {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 40px;
    text-decoration: none;
    display: flex;
}
.contact-icons {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 600px;
    text-decoration: none;
    display: flex;
}
.phone-contact {
    grid-column-gap: 6px;
    color: var(--infrashield-lighter);
    flex: 0 auto;
    justify-content: flex-start;
    align-items: center;
    width: 200px;
    text-decoration: none;
    display: flex;
}
.mail-contact {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    color: var(--infrashield-lighter);
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 212px;
    text-decoration: none;
    display: flex;
}
.footer-copyright {
    border-top: 1px solid var(--infrashield-lighter);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 30px;
    text-decoration: none;
    display: flex;
    position: relative;
    max-width: var(--maxwidthcontent);
}
.menu-item-link.active {
    color: var(--900);
}
.menu-item-link.active.footer-menu-links {
    color: white;
}
.text-dark {
    color: var(--900);
}
.text-white {
    color: var(--white)
}
.h3-styling.text-dark {
    color: var(--900);
    line-height: var(--font--line-height--h3-line-height);
}
.p-styling {
    font-family: var(--font--family--book);
    font-size: var(--font--font-size--body);
    line-height: var(--font--line-height--lg);
    text-align: left;
    width: 100%;
    font-weight: 400;
}
.p-styling.get-secured-bar-p-styling {
    font-size: 14px;
    line-height: var(--font--line-height--body);
}
.p-styling.be-secure-infrashield-text {
    max-width: 800px;
}
.h2-styling {
    font-family: var(--font--family--header-2);
    color: #fff;
    font-size: var(--font--font-size--4xl);
    line-height: var(--font--font-size--4xl);
    text-align: left;
    align-items: flex-start;
    width: 100%;
    font-weight: 700;
}
.h2-styling.text-dark {
    color: var(--900);
}
.h2-styling.text-dark.how-we-do-it-dynamic-text {
    color: var(--infrashield-darklight);
    font-size: var(--font--font-size--3xl);
    line-height: var(--font--line-height--2xl);
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 80px;
    display: flex;
}
.h2-styling.h2-custom-width {
    font-size: var(--font--font-size--4xl);
    line-height: var(--font--line-height--4xl);
}
.h2-styling.h2-custom-width.text-dark {
    line-height: var(--font--line-height--2xl);
}
.platform-tab.active {
    color: var(--900);
    background-color: #fff;
}
.get-secured-text.p-styling.get-secured-p-styling {
    font-size: var(--font--font-size--body);
    line-height: var(--font--line-height--lg);
}
.button-main {
    color: var(--900);
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    flex: 0 auto;
    justify-content: space-around;
    align-items: stretch;
    text-decoration: none;
    display: flex;
    width: max-content;
    padding: 0;
    transition: all 0.3s ease;
    overflow: hidden;
}
.button-secondary {
    color: white;
    background-color: transparent;
    flex: 0 auto;
    justify-content: center;
    align-items: stretch;
    text-decoration: none;
    display: flex;
    overflow: hidden;
    width: max-content;

    .button-text {
        color: #fff;
    }
}
.button-secondary.button-secondary-dark p {
    color: var(--900);
}
.button-secondary:hover .button-text {
    color: var(--infrashield-lightblue);
}
.button-secondary .button-text-wrapper {
    padding: 4px 4px 4px 0;
}
.button-secondary .button-text {
    padding-bottom: 4px;
    border-bottom: 1px solid #fff;
}
.button-secondary.button-secondary-dark .button-text {
    border-bottom: 1px solid var(--900);
}
.button-secondary:hover .button-text {
    border-bottom: 1px solid var(--infrashield-lightblue);
}
.button-main:hover {
    color: #fff;
    background-color: #0000;
    border: 1px solid #fff;
    transition: background-color 300ms ease;
    p {
        color: #fff;
    }
}
.button-main.button-main-dark {
    border-color: var(--900);
    background-color: var(--900);
    color: #fff;

    p {
        color: white;
    }
}
.button-main.button-main-dark:hover {
    border: 1px solid var(--900);
    color: var(--900);
    background: radial-gradient(ellipse at -50% 120%, rgba(119, 201, 255, 1) 5%, rgba(255, 255, 255, 0) 60%);

    p {
        color: var(--900);
    }
}
.button-main.button-nav-login {
    border-color: var(--900);
}
.button-main.button-nav-login:hover {
    background-color: var(--900);
}
.salesctacontent {
    z-index: 5;
    grid-column-gap: 24px;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    height: 100vh;
    text-decoration: none;
    display: flex;
    position: sticky;
    bottom: 0;
}
.contact-us-left-content {
    grid-row-gap: 24px;
    border-radius: 4px 16px 16px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    text-decoration: none;
    display: flex;
}
.contact-us-right-content {
    grid-row-gap: 8px;
    border-radius: 4px 16px 16px;
    flex-flow: column;
    flex: 0 auto;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    text-decoration: none;
    display: flex;
}
.footer-info-wrapper {
    grid-column-gap: 24px;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    text-decoration: none;
    display: flex;
    max-width: var(--maxwidthcontent);
}
.footer-info {
    grid-row-gap: 24px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    text-decoration: none;
    display: flex;
}
.footer-copyright-text {
    display: flex;
    font-family: var(--font--family--body);
    color: var(--infrashield-lighter);
    font-size: var(--font--font-size--sm);
    font-weight: 300;
}
.inlinebluewordslight {
    color: var(--infrashield-lightblue);
    text-align: left;
}
.footer-section {
    z-index: 12;
    padding-right: var(--paddingwrappersides);
    padding-left: var(--paddingwrappersides);
    background: radial-gradient(at right bottom, rgb(0 67 111) 5%, rgb(16, 24, 40) 45%);
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
}
.contact-us-text {
    grid-column-gap: 16px;
    grid-row-gap: 24px;
    flex-flow: column;
    width: 100%;
    display: flex;
}
.spacer {
    width: 100%;
    height: 100vh;
    display: block;
    position: relative;
}
.spacer.clients-spacer {
    height: 150vh;
}
.spacer.footer-spacer {
    height: 100vh;
}
.spacer.process-spacer {
    height: 400vh;
}
#how-we-protect-it .spacer.process-spacer {
    height: 600vh;
}
.spacer.intro-spacer {
    pointer-events: none;
    height: 400vh;
    position: absolute;
}
.form-field-wrapper {
    width: 100%;
    padding-bottom: 20px;
}
.form-field-wrapper.form-field-two-inputs-wrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    object-fit: fill;
    display: flex;
    position: relative;
}
button.button-text-wrapper.g-recaptcha {
    border: 1px solid white;
    border-radius: 4px;
    padding: 0;
}
button.button-text-wrapper.g-recaptcha:hover {
    background: transparent;
    color: white;
    border: 1px solid white;
    border-radius: 4px;
}
.sales-cta-spacer {
    width: 100%;
    height: 100vh;
}
.sales-cta-spacer.spacer {
    height: 150vh;
}
.infrashield-phone-link {
    font-family: var(--font--family--medium);
    color: #fff;
    white-space: normal;
    font-weight: 600;
    text-decoration: none;
}
.contact-us-container {
    grid-column-gap: 48px;
    border: 1px solid #a0b9dd;
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    background-color: #fffc;
    background-image: radial-gradient(ellipse at bottom left, rgba(119, 201, 255, 0.6) 0%, rgba(255, 255, 255, 0) 30%);
    border-radius: 16px;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: var(--paddingBoxesContent);
    display: flex;
    position: relative;
}
.contact-us-container.contact-us-dark {
    background-color: var(--900);
    border: 1px solid white;
    color: white;
    backdrop-filter: none;

    .form-field-label {
        color: white;
    }

    .form-field-input,
    .textarea {
        border: 1px solid #ffffff75;
    }
}
.card-title-styling.text-dark {
    color: var(--900);
}
.infrashield-contact-text-styling {
    color: var(--infrashield-lighter);
    margin-top: 0;
    margin-bottom: 0;
    font-family: Gotham Bold, Trebuchet MS, sans-serif;
    font-size: 16px;
    line-height: 130%;
    text-decoration: none;
}
@keyframes arrowSlide {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}
.fa-solid.fa-arrow-right {
    width: 100%;
}
.fa-solid.fa-lightbulb-on.fa-solutions-custom-transform {
    color: #fff;
    font-size: 75px;
    position: absolute;
    inset: auto auto -10px 0;
    transform: rotate(20deg);
}
@keyframes rotate-infinite {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.container-content-center .button-main,
.privacy-policy .button-main {
    max-width: 200px;
}
.privacy-policy .contact-us-text {
    max-width: 900px;
}
.privacy-policy .salesctacontent {
    position: relative;
    height: 100%;
    padding-top: 80px;
    padding-bottom: 120px;
}
.contact-us-container.contact-us-transparent {
    border: 1px solid white;
}
footer a {
    text-decoration: none;
    color: var(--infrashield-lighter);
}
.salesctacontent.thank-you-redirect {
    height: 100vh;

    .contact-us-container {
        background-color: var(--900)!important;
    }

}
.privacy-policy .salesctacontent.thank-you-redirect {
    padding-top: 120px;
    padding-bottom: 120px;
}
.mt--100 {
    margin-top: -100vh;
}
.mb--100 {
    margin-bottom: -100vh;
}
.w-100 {
    width: 100%;
}
.position-sticky {
    position: sticky;
}
form {
    width: 100%;
}
.solutions-card-icon .text-white.fa {
    color: white;
}
.program-tab.active .tab-content {
    transform: translateY(0);
    transition: transform 300ms ease;
}
.program-tab.active .tab-content {
    transform: translateY(0);
    opacity: 1;
    transition: transform 300ms ease;
}
model-viewer {
    
}
@font-face {
    font-family: 'Gotham Medium';
    src: url('../fonts/Gotham-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham Book';
    src: url('../fonts/Gotham-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham Book Italic';
    src: url('../fonts/Gotham-BookItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham Light';
    src: url('../fonts/Gotham-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham Medium Italic';
    src: url('../fonts/Gotham-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham Bold Italic';
    src: url('../fonts/Gotham-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham Light Italic';
    src: url('../fonts/Gotham-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham Bold';
    src: url('../fonts/Gotham-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
.sales-cta-section .h2-styling {
        font-size: 40px;
        line-height: 44px;
    }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
.sales-cta-section {
        height: 100%;
        padding-bottom: 60px;
        padding-top: 60px;

        .h2-styling {
            font-size: 40px;
            line-height: 44px;
        }

        .sales-cta-spacer.spacer {
            height: 100vh;
        }

        .salesctacontent {
            position: relative;
            height: 100%;
        }
    }
}
@media screen and (max-width: 1275px) {
.h2-styling.fancy‐underline {
        font-size: 30px;
        line-height: 32px;
    }
}
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    padding: 0;
    -webkit-appearance: checkbox;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(4px); }
    60% { transform: translateY(2px); }
}
.scroll-btn:hover .fa-solid {
    animation: bounce 2s infinite;
}
.expandable:not(.active):hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.expandable:hover .expandable-content,
.expandable.active .expandable-content {
    max-height: 600px;     
}
.p-styling, section .ul {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.no-animation {
    opacity: 1!important;
    transform: translate(0)!important;
}
.p-styling.in-view,
section ul.in-view {
    opacity: 1;
    transform: translateY(0);
}
.scroll-in .underline,
.in-view .underline {
    width: 100%;
}
.footer-copyright-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.footer-copyright-text span,
.footer-copyright-text a {
    white-space: nowrap;
}
.tab.active .tab-background {
    background: var(--900);
}
.tab.active {
    color: white;
    opacity: 1;
    background: var(--900);
    border-bottom: 2px solid white;
}
.tab.active::after {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    width: 16px;
    height: 16px;
    background: #f3f3f3;
    clip-path: polygon(
            0%   0%,   
            100% 0%,   
            0%   100%  
    );
}
.tab.active .tab-title {
    display: inline-block;
}
.features-tab-content.active {
    display: block;
    clip-path: polygon(
        
            16px 0%,
                
            100% 0%,
                
            100% calc(100% - 16px),
                
            calc(100% - 16px) 100%,
                
            0% 100%,
                
            0% 16px
    );
}
.carousel-track .carousel-item p:not(.button-text) {
    font-weight: 600!important;
}
.carousel-track.active {
    cursor: grabbing;
}
.product-trigger:hover .product-tooltip,
.product-trigger.active .product-tooltip {
    max-width: 200px;
}
.inner-tab-titles .title.active {
    background: white;
    color: var(--900);
    font-weight: bold;

    .icon {
        color: var(--900);
    }
}
.menu-item-link.active > a {
    color: #0077cc;
    font-weight: bold;
    position: relative;
}
.menu-item-link.active > a::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #0077cc;
}
.has-submenu:not(.mobile-menu-toggle).open {
    border-bottom: 2px solid var(--900);
}
.mega-menu-container:not(.hide-megamenu) {
    opacity: 1;
    pointer-events: auto;
}
.menu-link.open.has-submenu::after {
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
}
.mobile-menu-toggle:hover .menu-underline::after,
.mobile-menu-toggle.open .menu-underline::after,
.menu-item-link:hover .menu-underline::after,
.menu-link:hover .menu-underline::after,
.menu-item-link.active-underline .menu-underline::after {
    width: 100%;
}
.wrapper-fix {
    width: 100%;
    height: 100%;
    position: relative;
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.contact-us-form {
    .letter-spacing {
        letter-spacing: -.01em;
    }

    .v-application {
        background: transparent;
        font-family: Gotham Book, Trebuchet MS, sans-serif;
    }

    .v-application__wrap {
        justify-content: center;
        min-height: initial;
    }

    .v-field {
        border-radius: 6px;
        font-family: Gotham Book, Trebuchet MS, sans-serif;
        input {
            height: 40px;
            min-height: initial;
            padding: 4px 16px;
        }

        .v-label {
            font-size: 14px;
        }

        .v-field-label--floating {
            font-size: 10px;
        }
    }

    textarea.v-field__input {
        height: 80px;
    }

    .form-field-padding {
        padding: 0 12px;
    }

    .v-btn-group {
        gap: 6px;
        height: 32px!important;
    }

    .v-btn-group .v-btn {
        font-size: 12px;
        letter-spacing: -.01em!important;
        height: 32px!important;
        padding: 8px 12px;
        border-radius: 6px;
        border: 1px solid var(--400);
        border-inline-end: var(--400)!important;
        border-inline-start: var(--400)!important;
    }

    .v-btn-group .v-btn:first-child,
    .v-btn-group .v-btn:last-child,
    .v-btn-group .v-btn {
        border-inline-start: 1px solid var(--400)!important;
        border-inline-end: 1px solid var(--400)!important;
        border-end-end-radius: 6px!important;
        border-start-end-radius: 6px!important;
        border-end-start-radius: 6px!important;
        border-start-start-radius: 6px!important;
    }

    .v-btn__overlay {
        background: transparent;
    }

    .v-btn {
        i {
            font-size: 12px;
        }
    }

    .submit-wrapper {
        .v-btn__content {
            font-size: 12px;
            padding: 12px 16px;
            border-right: 1px solid white;
        }

        .v-btn {
            display: flex;
            height: min-content;
            padding: 0;
            font-weight: 600;
        }

        .v-btn__append {
            margin: 0;
            padding: 12px 16px;
        }
    }

    .v-text-field .v-input__details {
        padding: 4px 0 8px;
    }

    .v-btn-toggle.wrap-toggle {
        display: flex !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
        overflow: visible;
        height: fit-content !important;
    }
}
@media screen and (min-width: 992px) {
.contact-us-right-content {
        max-width: 450px;
    }
}
@media screen and (max-width: 991px) {
.spacer.footer-spacer {
        height: 120vh;
    }
.h2-sales-cta {
        font-size: var(--font--font-size--2xl);
        line-height: var(--font--line-height--xl);
    }
.contact-us-container {
        flex-flow: column;
        grid-row-gap: 32px;
    }
body {
        --font--family--medium: "Gotham Medium", "Trebuchet MS", sans-serif;
        --font--font-size--sm: 12px;
        --infrashield-lightblue: #69b2e1;
        --infrashield-lightest: #f2f8fd;
        --font--family--title: "Gotham Bold", "Trebuchet MS", sans-serif;
        --font--font-size--3xl: 38px;
        --font--line-height--2xl: 40px;
        --900: #101828;
        --font--font-size--body: 16px;
        --space--300: 12px;
        --space--400: 16px;
        --radius--medium: 8px;
        --font--family--body: "Gotham Book", "Trebuchet MS", sans-serif;
        --paddingwrappersides: 16px;
        --font--line-height--xs: 14px;
        --400: #a4a7ae;
        --300: #d7d7d7;
        --800: #252b37;
        --font--line-height--3xl: 44px;
        --font--font-size--xl: 24px;
        --maxwidthcontent: 1440px;
        --font--line-height--body: 22px;
        --infrashield-lighter: #c4dff3;
        --font--font-size--lg: 20px;
        --font--line-height--lg: 28px;
        --font--line-height--sm: 16px;
        --space--200: 8px;
        --font--font-size--5xl: 68px;
        --font--family--light: "Gotham Light", "Trebuchet MS", sans-serif;
        --font--font-size--2xl: 30px;
        --font--line-height--xl: 32px;
        --font--line-height--h3-line-height: 24px;
        --font--family--book: "Gotham Book", "Trebuchet MS", sans-serif;
        --font--family--header-2: "Gotham Bold", "Trebuchet MS", sans-serif;
        --font--font-size--4xl: 50px;
        --infrashield-darklight: #308bc7;
        --font--line-height--4xl: 46px;
        --font--font-size--xs: 10px;
        --infrashield-darkblueprimary: #1E6196;
        --body--size-medium: 16px;
        --font--family--header-4: "Gotham Medium", "Trebuchet MS", sans-serif;
        --radius--small: 4px;
        --radius--large: 16px;
        --radius--xlarge: 24px;
        --600: #535862;
        --white: white;
        --font--family--header-3: "Gotham Bold", "Trebuchet MS", sans-serif;
        --font--family--bold: "Gotham Bold", "Trebuchet MS", sans-serif;
        --stroke--border: 1px;
        --paddingBoxesContent: 80px 30px;
    }
.contact-us-form {
        height: 100%;
    }
}
@media screen and (max-width: 767px) {
.sales-cta-spacer.spacer {
        display: none;
    }
.mobile-no-margin {
        .cables-container {
            top: -18vh;
            width: 25vh;
            left: -10vh;
        }

        .right-floating-image-container {
            inset: auto -10% -5% auto;
        }
    }
.p-styling {
        font-size: 14px;
        line-height: 20px;
    }
body {
        --paddingwrappersides: 16px;
    }
.footer {
        padding-bottom: 40px;
    }
.footer-info-login-container {
        grid-row-gap: 16px;
        flex-flow: column;
        justify-content: space-between;
        align-items: flex-start;
    }
.footer-attack-content.footer-client-portal {
        justify-content: flex-start;
        align-items: flex-start;
    }
.footer-contact {
        grid-column-gap: 32px;
        grid-row-gap: 32px;
        flex-flow: column;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 20px;
    }
.contact-icons {
        grid-row-gap: 32px;
        flex-flow: column;
        justify-content: flex-end;
        align-items: flex-start;
    }
.h3-styling.text-dark {
        font-size: var(--font--font-size--body);
        line-height: var(--font--line-height--body);
    }
.p-styling {
        font-size: 14px;
        line-height: var(--font--font-size--lg);
        position: static;
    }
.p-styling.p-dark {
        justify-content: flex-start;
    }
.p-styling.p-dark.p-styling-mobile {
        font-size: 12px;
        line-height: 18px;
    }
.p-styling.get-secured-bar-p-styling {
        font-size: var(--font--font-size--sm);
        line-height: var(--font--font-size--body);
    }
.p-styling.contact-us-mobile-p-styling {
        font-size: 14px;
        line-height: var(--font--line-height--body);
    }
.p-styling.card-mobile-p-styling {
        font-size: 14px;
        line-height: 20px;
    }
.p-styling.malware-p {
        font-size: 14px;
        line-height: var(--font--font-size--lg);
    }
.h2-styling {
        font-size: var(--font--font-size--2xl);
        line-height: var(--font--line-height--xl);
    }
.h2-styling.text-dark.how-we-do-it-dynamic-text {
        color: var(--infrashield-darklight)!important;
        font-size: var(--font--font-size--lg);
        line-height: var(--font--line-height--body);
        justify-content: center;
        align-items: center;
        display: flex;
    }
.h2-styling.h2-custom-width {
        font-size: var(--font--font-size--xl);
        line-height: var(--font--line-height--body);
    }
.h2-styling.h2-custom-width.text-dark {
        font-size: var(--font--font-size--xl);
        line-height: var(--font--line-height--lg);
    }
.h2-styling.tactical-mobile {
        font-size: var(--font--font-size--2xl);
        line-height: var(--font--line-height--xl);
    }
.platform-tab.active {
        text-align: left;
    }
.get-secured-text.p-styling {
        max-width: 350px;
    }
.get-secured-text.p-styling.get-secured-p-styling,
    .get-secured-text.get-secured-p-styling,
    .get-secured-text.get-secured-p-styling.get-secured-text-even {
        font-size: 14px;
        line-height: var(--font--line-height--body);
        max-width: 85vw;
    }
.salesctacontent {
        flex-flow: column;
        justify-content: center;
        align-items: flex-start;
        padding-top: 30px;
        padding-bottom: 15px;
    }
.contact-us-left-content {
        grid-row-gap: 16px;
        justify-content: flex-start;
    }
.footer-info-wrapper {
        grid-column-gap: 48px;
        grid-row-gap: 48px;
        flex-flow: column;
    }
.spacer {
        height: 150vh;
    }
.contact-us-container {
        grid-column-gap: 32px;
        grid-row-gap: 32px;
        flex-flow: column;
        justify-content: center;
        align-items: flex-start;
        height: 100%;
    }
.privacy-policy .contact-us-container {
        padding: 60px 30px;
    }
#how-we-protect-it .spacer.process-spacer {
        height: 600vh;
    }
.salesctacontent {
        padding: 120px 0;
        position: relative;
        height: 100%;
    }
.mobile-no-margin {
        margin: 0;
    }
.features-tab-content.active {
        clip-path: polygon(
                0     0,                         
                100%  0,                         
                100%  calc(100% - 16px),        
                calc(100% - 16px)  100%,        
                0     100%                      
        );
    }
}
@media screen and (max-width: 479px) {
.contact-us-form {
        height: 100%;
    }
.p-styling,
    .p-styling.p-dark.p-styling-mobile {
        font-size: 14px;
        line-height: var(--font--line-height--body);
    }
.h2-styling.h2-solutions {
        font-size: var(--font--font-size--lg);
        line-height: var(--font--line-height--body);
    }
.contact-us-left-content {
        padding-right: 0;
    }
.form-field-wrapper {
        max-width: 100%;
        overflow: visible;
    }
.contact-us-container {
        justify-content: center;
        align-items: center;
    }
.privacy-policy .contact-us-container {
        padding-bottom: 60px;
    }
}
@media screen and (orientation:landscape)
and (max-device-width: 1275px) {
.intro-section.py-0.px-0.mb--100.mobile-no-margin.height-250vh.mobile-100.mobile-landscape-100.z-30 {
        margin: 0;
        height: 250vh;

        .intro-content-clip-wrapper.padding-sections.top-0.height-100vh.mobile-100.mobile-no-sticky.py-120 {
            height: 100%;

            .align-items-start.flex-direction-column.gap-4 {
                width: 100%;
            }
        }
    }
.footer-info-login-container {
        flex-flow: row;
    }
.footer-attack-content.footer-client-portal {
        align-items: flex-end;
    }
.spacer.footer-spacer {
        height: 200vh;
    }
.h2-styling.text-dark.how-we-do-it-dynamic-text {
        height: 60px;
    }
.sales-cta-section {
        padding: 60px 16px;
    }
.mobile-no-margin .right-floating-image-container {
        inset: auto 0 -10% auto;
        width: 40%;
    }
.h2-styling,
    .h2-styling.h2-custom-width {
        font-size: 3vw;
        line-height: 3vw;
    }
.h3-styling,
    .h3-styling.text-dark,
    .card-title-styling {
        font-size: 2vw;
        line-height: 2vw;
    }
.h2-styling.text-dark.how-we-do-it-dynamic-text {
        font-size: 2vw;
        line-height: 2vw;
    }
.p-styling {
        font-size: 14px;
        line-height: 20px;
    }
#how-we-protect-it .spacer.process-spacer {
        height: 700vh;
    }
.salesctacontent {
        padding: 0;
        position: relative;
        height: 100%;
    }
.sales-cta-spacer.spacer {
        height: 100vh;
    }
.footer,
    .footer-section {
        height: 100%;
    }
}
@media screen and (min-width: 767px) {
#contact,
    #nc-contact {
        /* the CTA opens with a ~100vh sticky-reveal runway, so land the anchor
           jump that far past the section top or the form stays off-screen */
        scroll-margin-top: calc(-1 * 100vh);
    }
}

/* ---- product-page base ---- */
.product-section {
    z-index: 20;
    height: 100%;
    background: white;
    background: radial-gradient(ellipse at top left, #a9ddff 0%, rgb(255 255 255) 35%);
    .section-header-container-layout {
        gap: 32px !important;
    }
}

.product-section-wrapper {
    height: 100%;
    min-height: 100vh;
    padding: 80px 0;
    justify-content: space-between;
}

.height-100vh {
    height: 100vh;
}

.section-header-container-layout:first-of-type {
    border-radius: 12px;
    border: 2px solid #101828;
}

.product-title {
    flex-direction: column;
    align-items: flex-start;
    grid-row-gap: 8px;
}

.product-title .h4-styling {
    margin: 0;
    line-height: 1.2em;
}

.product-image-width {
    width: 65vw;
}

.product-info-container-layout {
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    display: flex;
    position: relative;
    gap: 64px;
    padding: 40px 0px;
    border-top: 1px solid #ccc;
}

.product-info-title .h3-styling {
    width: 120px;
}

.product-info-container-layout-last {
    border-bottom: 1px solid #ccc;
}

.border-radius {
    border-radius: 4px;
}

.border-solid-black {
    border: 1px solid var(--900);
    flex: none;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    display: flex;
}

.background-900 {
    background: var(--900);
}

.width-100 {
    width: 100%;
}

.max-width-1440 {
    max-width: 1440px;
}

.padding-sections {
    padding-right: var(--paddingwrappersides);
    padding-left: var(--paddingwrappersides);
}

.product-hero-padding {
    padding-top: 180px;
    padding-bottom: 120px;
}

.product-specs-title {
    text-align: left;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 16px 24px;
    display: flex
;
}

.text-white {
    color: white;
}

.z-20 {
    z-index: 20;
}

.section-header-container-layout {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
    gap: 64px;
}

.text-left {
    text-align: left;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.item {
    flex: 1 1 calc(25% - 8px);
    box-sizing: border-box;
    min-width: 220px;
    height: 150px;
    padding: 0px 24px;
    gap: 8px;
}

.border-bottom {
    border-bottom: 1px solid var(--900);
}

.model-toggle-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.toggle-buttons {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: 8px;
    border-radius: 50px;
    background: #ffffff00;
    width: max-content;
    backdrop-filter: blur(25px);
    margin-bottom: 4px;
}

.toggle-buttons button {
    padding: 0.5rem 1rem;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    border-radius: 50px;
    transition: background 0.3s ease;
    border: 2px solid transparent;
}

.toggle-buttons button.active {
    background: linear-gradient(to right, var(--infrashield-darkblueprimary), #007bff);
    color: white;
    border-color: #007bff;
}

model-viewer {
    border-radius: 12px;
}

.model-viewer-instructions {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: -20px;
}

.model-viewer-text:not(.blur-filter) {
    background: #fff;
}

.model-viewer-text {
    padding: 4px 6px;
    border-radius: 8px;
    p {
        font-size: 12px;
        line-height: 18px;
    }
}

#locktobox .model-viewer-instructions {
    bottom: 60px;
}

@media (max-width: 767px) {

    .product-section .product-title {
        padding: 20px;
        padding-top: 30px;
    }

    .product-image-width {
        width: 100vw;
        padding: 0 30px;
    }

    .product-hero-padding {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .product-info-container-layout {
        flex-flow: column;
    }

    .section-header-container-layout {
        flex-flow: column-reverse;
        gap: 24px;
    }

    .product-info-container-layout {
        gap: 16px;
    }

    .item {
        height: 100px;
    }

    .product-info-container-layout-even .product-title {
        order: 1;
    }

    .product-info-container-layout-even .width-100 {
        order: 2;
    }

    .product-section-wrapper {
        height: 100%!important;
    }
}


/* ---- nullcloud page ---- */
/* ==========================================================================
   NullCloud.ai — landing page styles
   Scoped with the .nc- prefix so nothing here leaks into the shared system.
   Reuses global tokens from infrashield-website-prototype.css (:root vars).
   ========================================================================== */

.nc-page {
    --nc-blue: #214292;          /* NullCloud primary (logo) */
    --nc-light: #69b2e1;         /* InfraShield light blue */
    --nc-ink: #101828;           /* --900 */
    --nc-ink-deep: #0a0f1c;
    --nc-max: 1440px;
    --nc-pad: var(--paddingwrappersides);

    /* Scroll-driven inversion (updated by JS; defaults = dark/top state).
       As the user scrolls hero -> lead -> white section these flip. */
    --nc-invert: 0;                          /* 0 = dark top, 1 = fully light */
    --nc-dyn-bg: #0a0f1c;                     /* navy  -> white  */
    --nc-dyn-fg: #ffffff;                     /* white -> navy   (headings)   */
    --nc-dyn-accent: #69b2e1;                 /* light blue -> deep navy blue  */
    --nc-dyn-muted: #ced6e0;                  /* soft white -> slate (body)    */
    --nc-dyn-btn-bg: #ffffff;                 /* white -> navy   (primary btn) */
    --nc-dyn-btn-fg: #101828;                 /* navy  -> white  (primary btn) */
    --nc-glow-op: 1;                          /* product glow fades out on scroll */

    background: #fff;
    overflow-x: clip;
}

/* custom cursor removed for standalone: native cursor shown */

.nc-wrap {
    width: 100%;
    max-width: var(--nc-max);
    margin-inline: auto;
    padding-inline: var(--nc-pad);
}

.nc-eyebrow {
    font-family: var(--font--family--medium);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--nc-light);
    margin: 0;
}

.nc-eyebrow.is-dark { color: var(--infrashield-darkblueprimary); }

/* ==========================================================================
   HERO
   ========================================================================== */

.nc-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px var(--nc-pad) 80px;
    background: var(--nc-dyn-bg);
    overflow: visible;
    isolation: isolate;
}

/* faint technical grid — fades away as the background inverts to light */
.nc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(105, 178, 225, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(105, 178, 225, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 80%);
    opacity: calc(1 - var(--nc-invert));
    z-index: 0;
    pointer-events: none;
}

.nc-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--nc-max);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

/* Logo crossfade: light-blue mark on dark -> color mark on light */
.nc-hero-logo-wrap {
    position: relative;
    display: inline-flex;
    width: min(250px, 40vw);
    opacity: 0;
    animation: nc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.nc-hero-logo {
    width: 100%;
    height: auto;
    display: block;
}

.nc-hero-logo-wrap .nc-logo-dark {
    position: absolute;
    inset: 0;
    opacity: var(--nc-invert);
}

.nc-hero-logo-wrap .nc-logo-light { opacity: calc(1 - var(--nc-invert)); }

.nc-hero-eyebrow {
    color: var(--nc-dyn-accent);
    opacity: 0;
    animation: nc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.nc-hero h1 {
    margin: 0;
    font-family: var(--font--family--title);
    color: var(--nc-dyn-fg);
    font-weight: 700;
    font-size: clamp(34px, 6vw, 68px);
    line-height: 1.02;
    letter-spacing: -1px;
    max-width: 16ch;
    opacity: 0;
    animation: nc-rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.42s forwards;
}

.nc-hero h1 span { color: var(--nc-dyn-accent); }

/* hero button colors follow the inversion so they never disappear */
.nc-hero .nc-hero-cta .button-main {
    background: var(--nc-dyn-btn-bg);
    border-color: var(--nc-dyn-btn-bg);
}
.nc-hero .nc-hero-cta .button-main .button-text,
.nc-hero .nc-hero-cta .button-main .button-icon,
.nc-hero .nc-hero-cta .button-main .button-icon i { color: var(--nc-dyn-btn-fg); }

/* the divider that separates the arrow must invert too (defaults to var(--900)) */
.nc-hero .nc-hero-cta .button-main .button-icon { border-left-color: var(--nc-dyn-btn-fg); }
.nc-hero .nc-hero-cta .button-main .button-icon-left { border-right-color: var(--nc-dyn-btn-fg); }

.nc-hero .nc-hero-cta .button-secondary .button-text {
    color: var(--nc-dyn-fg);
    border-bottom-color: var(--nc-dyn-fg);
}

/* Product render + glow */
.nc-hero-stage {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nc-hero-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(920px, 148vw);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) scale(1);
    /* fully transparent well before the edge -> never a hard clip */
    background: radial-gradient(circle,
        rgba(58, 83, 164, 0.50) 0%,
        rgba(105, 178, 225, 0.22) 28%,
        rgba(16, 24, 40, 0) 60%);
    filter: blur(12px);
    /* base opacity is scroll-driven; the load-in animation runs once then hands back */
    opacity: var(--nc-glow-op);
    z-index: 0;
    pointer-events: none;
    animation: nc-glow-in 1.6s ease-out 0.55s backwards;
}

.nc-hero-render {
    position: relative;
    z-index: 1;
    width: min(760px, 75vw);
    height: auto;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
    transform-origin: center 60%;
    /* start way oversized ("fills the screen") and settle to rest */
    animation: nc-hero-settle 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* reflection under the appliance */
.nc-hero-render::after { content: none; }

.nc-hero-cta {
    z-index: 4;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    animation: nc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}

.nc-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font--family--book);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    animation: nc-fade 4s ease 6s forwards;
}

.nc-scroll-cue i { animation: nc-bob 1.8s ease-in-out infinite; }

@keyframes nc-hero-settle {
    0%   { transform: scale(4.2) translateY(3%); opacity: 0; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55)) blur(8px); }
    40%  { opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55)) blur(0); }
}

@keyframes nc-glow-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes nc-rise {
    0%   { opacity: 0; transform: translateY(26px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes nc-fade { to { opacity: 1; } }

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

/* ==========================================================================
   SHARED SECTION SCAFFOLD
   ========================================================================== */

.nc-section { position: relative; padding: 120px 0; }

.nc-section.is-light {
    background: radial-gradient(ellipse at top left, #eaf5ff 0%, #ffffff 42%);
}

.nc-section.is-dark {
    /* base navy + a light-blue glow pooled in the bottom-right, fading toward the
       left/top. The glow layer is viewport-fixed so it stays in the visible corner
       whether the panel itself is sticky or (for the last panel) only its inner
       wrap is — otherwise the glow scrolls up and gets cut off while pinned. */
    background:
        radial-gradient(58% 68% at 100% 100%, rgba(105, 178, 225, 0.16), transparent 72%) fixed,
        linear-gradient(180deg, #0d1424 0%, #101828 100%);
    color: #fff;
}

.nc-section-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
    margin-bottom: 30px;
}

.nc-section-head.is-center { align-items: center; text-align: center; margin-inline: auto; }

.nc-h2 {
    margin: 0;
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--nc-ink);
}

.nc-section.is-dark .nc-h2 { color: #fff; }
.nc-h2 span { color: var(--nc-light); }
.nc-section.is-light .nc-h2 span { color: var(--infrashield-darkblueprimary); }

.nc-lead-p {
    font-family: var(--font--family--book);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.65;
    color: var(--600);
}

.nc-section.is-dark .nc-lead-p { color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   LEAD / INTRO
   ========================================================================== */

.nc-lead {
    background: var(--nc-dyn-bg);
    color: var(--nc-dyn-fg);
    padding: 110px 0;
    /* the product image is scaled up and bleeds off the right edge */
    overflow-x: clip;
    margin-top: -1px;
}

.nc-lead .nc-lead-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.nc-lead-text {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* The visual column is a positioning box that only reserves height; the
   render is taken out of flow so the text column keeps a true 50%. The image
   is scaled up, anchored at the column's left edge, and its right ~half bleeds
   past the viewport where .nc-lead's overflow-x: clip crops it artistically. */
.nc-lead-visual {
    position: relative;
    min-height: clamp(360px, 34vw, 470px);
}

.nc-lead-render {
    position: absolute;
    top: 50%;
    left: -6%;
    width: min(84vw, 1240px);
    max-width: none;
    height: auto;
    transform: translateY(-50%);
    filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.30));
}

.nc-lead h2 {
    margin: 0;
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.5px;
    color: var(--nc-dyn-fg);
}

.nc-lead h2 span { color: var(--infrashield-darkblueprimary); }

.nc-lead-copy p {
    font-family: var(--font--family--book);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.7;
    color: var(--nc-dyn-muted);
    margin: 0 0 22px;
}

.nc-lead-copy p:last-child { margin-bottom: 0; }

/* ==========================================================================
   ORCHESTRATION IN A BOX
   ========================================================================== */

.nc-orch-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
}

.nc-orch-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nc-orch-visual::before {
    content: "";
    position: absolute;
    inset: 6% 0;
    background: radial-gradient(60% 55% at 50% 50%, rgba(33, 66, 146, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 0;
}

.nc-orch-render {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 540px;
    height: auto;
    filter: drop-shadow(0 30px 45px rgba(16, 24, 40, 0.15));
}

.nc-orch-copy .nc-h2 { margin-bottom: 22px; }
.nc-orch-copy .nc-lead-p { margin-bottom: 22px; }

.nc-orch-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.nc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(33, 66, 146, 0.28);
    background: rgba(33, 66, 146, 0.06);
    color: var(--infrashield-darkblueprimary);
    font-family: var(--font--family--medium);
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

.nc-chip i { color: var(--nc-light); }

/* Highlighted ROI stat callout */
.nc-stat-callout {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
    padding: 22px 26px;
    border-radius: 16px;
    border: 1px solid rgba(33, 66, 146, 0.22);
    background: linear-gradient(135deg, rgba(33, 66, 146, 0.09), rgba(105, 178, 225, 0.10));
}

.nc-stat-num {
    flex: none;
    font-family: var(--font--family--title);
    font-weight: 700;
    line-height: 1;
    color: var(--infrashield-darkblueprimary);
    font-size: clamp(38px, 5vw, 54px);
    letter-spacing: -1px;
}

.nc-stat-num .nc-stat-unit {
    font-size: 0.42em;
    letter-spacing: 0;
    color: var(--nc-light);
}

.nc-stat-label {
    margin: 0;
    font-family: var(--font--family--book);
    font-size: 15px;
    line-height: 1.5;
    color: var(--600);
    text-align: left;
    width: auto;
}

.nc-stat-label strong { color: var(--nc-ink); font-family: var(--font--family--medium); }

@media (max-width: 479px) {
    .nc-stat-callout { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ==========================================================================
   BENEFITS GRID
   ========================================================================== */

/* Reel: the three frames are stacked in one fixed window and the JS slides +
   fades them (translateY + opacity) one at a time as the panel is pinned. */
.nc-benefits-reel {
    position: relative;
    height: clamp(320px, 42vh, 420px);
    overflow: hidden;   /* clip to the window so frames slide in / out cleanly */
}

.nc-benefit-frame {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    gap: 18px;
    will-change: transform, opacity;
    /* JS drives these; pre-JS we only show the first frame to avoid overlap */
    opacity: 0;
    pointer-events: none;
}

.nc-benefit-frame[data-frame="0"] { opacity: 1; pointer-events: auto; }

.nc-benefit-frame.is-4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nc-benefit-frame.is-3up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 1080px);
    left: 0;
    right: 0;
    margin-inline: auto;   /* centre the narrower row within the reel window */
}

.nc-benefit {
    position: relative;
    padding: 30px 28px;
    border-radius: 16px;
    /* light-blue wash from the bottom-right fading out toward top-left */
    background: linear-gradient(to top left, rgba(105, 178, 225, 0.24), rgba(105, 178, 225, 0) 78%), #fff;
    border: 1px solid rgba(16, 24, 40, 0.10);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    overflow: hidden;
}

.nc-benefit:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
    border-color: rgba(33, 66, 146, 0.28);
}

.nc-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(33, 66, 146, 0.10), rgba(105, 178, 225, 0.16));
    color: var(--infrashield-darkblueprimary);
    font-size: 20px;
    margin-bottom: 18px;
}

.nc-benefit h3 {
    margin: 0 0 8px;
    font-family: var(--font--family--title);
    font-size: 18px;
    line-height: 1.25;
    color: var(--nc-ink);
    font-weight: 700;
    /* the global stylesheet hides bare h1-h3 until .scroll-in (that JS isn't
       loaded here); this card title manages its own visibility */
    opacity: 1;
    transform: none;
}

.nc-benefit p {
    margin: 0;
    font-family: var(--font--family--book);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--600);
}

/* extra pinned dwell so the reel has room to move through all three frames —
   the taller the panel, the more scroll distance each hold + transition gets,
   so the whole reel feels slower and smoother */
@media (min-width: 992px) {
    .nc-benefits-section.nc-stack-panel { min-height: 340vh; }
}

/* No reel on touch / reduced-motion: the frame boxes dissolve (display:contents)
   so all 10 cards flow as ONE continuous grid — otherwise each 3-card frame is
   its own grid and leaves a ragged empty cell between groups. Columns step down
   3 -> 2 -> 1 as the screen narrows. */
@media (max-width: 991px), (prefers-reduced-motion: reduce) {
    .nc-benefits-reel {
        height: auto;
        perspective: none;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
    .nc-benefit-frame { display: contents; }
}

@media (max-width: 767px) {
    .nc-benefits-reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
    .nc-benefits-reel { grid-template-columns: 1fr; }

    .nc-lead {
        padding-top: 60px;
    }
}

/* ==========================================================================
   UNIQUELY SUITED FOR
   ========================================================================== */

.nc-suited { padding: 96px 0; }

.nc-suited-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.nc-suited-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: var(--font--family--medium);
    font-size: clamp(15px, 1.6vw, 18px);
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.nc-suited-pill i { color: var(--nc-light); font-size: 0.9em; }

.nc-suited-pill:hover {
    border-color: rgba(105, 178, 225, 0.6);
    background: rgba(105, 178, 225, 0.10);
    transform: translateY(-3px);
}

/* ==========================================================================
   TECHNICAL SPECIFICATIONS
   ========================================================================== */

.nc-specs-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    /* white base so any empty trailing slot reads as a blank white cell, not a
       grey gutter; hairline dividers are drawn per-cell via box-shadow below */
    gap: 0;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.12);
    border-radius: 16px;
    overflow: hidden;
}

/* animated SVG blobs drifting across the tile grid — multiply keeps them a
   light-blue tint over the white tiles (clearly visible in the empty cells) */
.nc-specs-anim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
    .nc-specs-anim { display: none; }
}

/* each cell is a 3-row subgrid (label / value / sub) sharing its row's tracks
   with every other cell in the same row, so the three lines stay aligned no
   matter how much any single label, number or subtitle wraps */
.nc-spec {
    background: #fff;
    padding: 26px;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-content: start;
    gap: 8px;
    box-shadow: 0 0 0 0.5px rgba(16, 24, 40, 0.12);
    transition: background 0.3s ease;
}

.nc-spec:hover { background: #f6faff; }

.nc-spec-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font--family--medium);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--infrashield-darkblueprimary);

    i {
        font-size: 14px;
    }
}

.nc-spec-value {
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.1;
    color: var(--nc-ink);
    letter-spacing: -0.5px;
}

.nc-spec-value .nc-unit { font-size: 0.55em; color: var(--600); letter-spacing: 0; }

.nc-spec-sub {
    font-family: var(--font--family--book);
    font-size: 14px;
    line-height: 1.45;
    color: var(--600);
}

/* ==========================================================================
   CONFIGURATOR / VARIANTS
   ========================================================================== */

.nc-config {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

/* configurator 3D model — same styling / behaviour as locktobox.html
   (preview image swaps to the live model on load, drag to spin, scroll to zoom) */
.nc-config-viewer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.nc-config-viewer .model-toggle-wrapper {
    position: relative;
    width: 100%;
    max-width: none;
}

.nc-config-model {
    width: 100%;
    height: min(350px, 30vh);
    background: transparent;
    /* bleeds to the card edges — the card's own overflow:hidden rounds the top */
    border-radius: 0;
    --poster-color: transparent;
    --progress-bar-color: var(--nc-light);
    cursor: grab;
}
.nc-config-model:active { cursor: grabbing; }

/* preview still shown until the GLB finishes loading */
.nc-model-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    pointer-events: none;
    background: transparent;
    border-radius: 0;
}
.nc-model-preview.is-hidden { opacity: 0; visibility: hidden; }

/* instructions pill hidden until the model is ready */
.nc-config-viewer .model-viewer-instructions {
    bottom: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.nc-config-viewer .model-viewer-instructions.is-visible {
    opacity: 1;
    visibility: visible;
}

/* config-result body (selected-config text + meta) sits under the model.
   The card itself has no padding so the model can bleed to its edges; the
   text content gets its own inner padding here. */
.nc-result-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 32px 32px;
}

.nc-config-controls { display: flex; flex-direction: column; gap: 30px; }

.nc-config-group h4 {
    margin: 0 0 14px;
    font-family: var(--font--family--medium);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nc-light);
}

.nc-options { display: flex; flex-wrap: wrap; gap: 12px; }

.nc-option {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    padding: 14px 22px;
    border-radius: 12px;
    font-family: var(--font--family--medium);
    font-size: 15px;
    
    transition: all 0.25s ease;
}

.nc-option:hover { border-color: rgba(105, 178, 225, 0.5); color: #fff; }

.nc-option.is-active {
    border-color: var(--nc-light);
    background: linear-gradient(135deg, var(--infrashield-darkblueprimary), var(--infrashield-darkblueprimary));
    color: #fff;
    box-shadow: 0 8px 24px rgba(33, 66, 146, 0.4);
}

.nc-option[disabled] { opacity: 0.32; pointer-events: none; }

/* result card */
.nc-config-result {
    position: relative;
    border-radius: 20px;
    padding: 0;
    background: linear-gradient(160deg, rgba(33, 66, 146, 0.24), rgba(16, 24, 40, 0.5));
    border: 1px solid rgba(105, 178, 225, 0.28);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.nc-config-result::before {
    content: "";
    position: absolute;
    inset: 0 0 auto -20%;
    height: 100%;
    background: radial-gradient(circle, rgba(105, 178, 225, 0.28), transparent 85%);
    pointer-events: none;
    overflow: visible;
}

.nc-result-label {
    font-family: var(--font--family--medium);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nc-light);
    position: relative;
    margin-bottom: 8px;
}

.nc-result-part {
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(26px, 3.2vw, 40px);
    letter-spacing: -0.5px;
    color: #fff;
    margin: 12px 0 0;
    position: relative;
    transition: opacity 0.25s ease;
}

.nc-result-desc {
    font-family: var(--font--family--book);
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    position: relative;
    margin-top: 16px;
}

.nc-result-meta {
    display: flex;
    gap: 26px;
    margin-top: 16px;
    flex-wrap: wrap;
    position: relative;
}

.nc-result-meta div span {
    display: block;
    font-family: var(--font--family--book);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 4px;
}

.nc-result-meta div strong {
    font-family: var(--font--family--title);
    font-size: 20px;
    color: #fff;
}

.nc-config-note {
    margin-top: 22px;
    font-family: var(--font--family--book);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* variants fallback table (accessible list of all part numbers) */
.nc-variants-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 48px;
    font-family: var(--font--family--book);
}

.nc-variants-table th,
.nc-variants-table td {
    text-align: left;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
}

.nc-variants-table th {
    font-family: var(--font--family--medium);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nc-light);
}

.nc-variants-table td:first-child {
    font-family: var(--font--family--medium);
    color: #fff;
    white-space: nowrap;
}

.nc-variants-table tr { transition: background 0.2s ease; }
.nc-variants-table tbody tr:hover { background: rgba(105, 178, 225, 0.08); }
.nc-variants-table tr.is-highlight { background: rgba(33, 66, 146, 0.35); }

/* ==========================================================================
   MANIFESTO CLOSE
   ========================================================================== */

.nc-manifesto {
    position: relative;
    padding: 130px 0;
    background:
        radial-gradient(90% 70% at 80% 30%, rgba(33, 66, 146, 0.35) 0%, rgba(16, 24, 40, 0) 60%),
        linear-gradient(180deg, #101828 0%, #0a0f1c 100%);
    overflow: hidden;
}

.nc-manifesto-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

.nc-manifesto h2 {
    margin: 0 0 24px;
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.5px;
    color: #fff;
}

.nc-manifesto h2 span { color: var(--nc-light); }

.nc-manifesto p:not(.nc-eyebrow) {
    font-family: var(--font--family--book);
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    max-width: 60ch;
    margin: 0 0 34px;
}

/* the kinetic tagline */
.nc-kinetic {
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nc-kinetic .nc-line { overflow: hidden; }

.nc-kinetic .nc-line > span {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.nc-kinetic .nc-line:nth-child(2) > span { transition-delay: 0.12s; }
.nc-kinetic .nc-accent { color: var(--nc-light); }

.is-inview .nc-kinetic .nc-line > span { transform: translateY(0); }

.nc-manifesto-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.nc-manifesto-render {
    width: 100%;
    max-width: 620px;
    height: auto;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6));
}

/* ==========================================================================
   STICKY-STACK SECTIONS  (Benefits -> Suited For -> Tech Specs -> Configurator
   -> Manifesto).  Each panel pins in place, and the next slides up over it
   (higher z-index) as the user scrolls down.
   ========================================================================== */

.nc-stack {
    position: relative;
    --nc-panel-h: 115vh;   /* total flow height per panel = dwell + cover */
}

.nc-stack-panel {
    position: sticky;
    top: 0;
    min-height: var(--nc-panel-h);
    padding: 0;                 /* inner wrapper owns the padding */
    /* opaque background (from is-dark / is-light / nc-manifesto) is required
       so a panel fully covers the one beneath it */
    overflow: hidden;
}

/* centre a panel's content in the viewport while it is pinned */
.nc-stack-panel > .nc-wrap {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* The last panel is a special case: a sibling sticky element only pins while
   there is scroll room after it inside .nc-stack, and the last child has none.
   So we keep its full-height flow (so the panel before it stays pinned until
   this one rises to cover it), but let the INNER .nc-wrap pin instead of the
   panel itself — that gives it a real dwell before it releases to the sales CTA.
   (overflow must be visible, or the sticky child can't pin to the viewport.) */
.nc-stack-panel:last-child {
    position: relative;
    overflow: visible;
    min-height: var(--nc-panel-h);
}
.nc-stack-panel:last-child > .nc-wrap {
    position: sticky;
    top: 0;
}

/* stacking order: later panels paint above earlier ones */
.nc-stack-panel:nth-of-type(1) { z-index: 1; }
.nc-stack-panel:nth-of-type(2) { z-index: 2; }
.nc-stack-panel:nth-of-type(3) { z-index: 3; }
.nc-stack-panel:nth-of-type(4) { z-index: 4; }
.nc-stack-panel:nth-of-type(5) { z-index: 5; }

/* On touch / small screens the pin/cover is dropped: normal vertical flow.
   The :last-child overrides above out-specify the plain reset, so repeat them. */
@media (max-width: 991px) {
    .nc-stack-panel,
    .nc-stack-panel:last-child {
        position: static;
        min-height: 0;
        overflow: visible;
    }
    .nc-stack-panel > .nc-wrap,
    .nc-stack-panel:last-child > .nc-wrap {
        position: static;
        min-height: 0;
        display: block;
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .nc-orch-grid { grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SCROLL REVEAL (applied via IntersectionObserver -> .is-inview)
   ========================================================================== */

.nc-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.nc-reveal.is-inview { opacity: 1; transform: translateY(0); }

.nc-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.nc-stagger.is-inview > * { opacity: 1; transform: translateY(0); }
.nc-stagger.is-inview > *:nth-child(1) { transition-delay: 0.00s; }
.nc-stagger.is-inview > *:nth-child(2) { transition-delay: 0.06s; }
.nc-stagger.is-inview > *:nth-child(3) { transition-delay: 0.12s; }
.nc-stagger.is-inview > *:nth-child(4) { transition-delay: 0.18s; }
.nc-stagger.is-inview > *:nth-child(5) { transition-delay: 0.24s; }
.nc-stagger.is-inview > *:nth-child(6) { transition-delay: 0.30s; }
.nc-stagger.is-inview > *:nth-child(7) { transition-delay: 0.36s; }
.nc-stagger.is-inview > *:nth-child(8) { transition-delay: 0.42s; }
.nc-stagger.is-inview > *:nth-child(9) { transition-delay: 0.48s; }
.nc-stagger.is-inview > *:nth-child(10) { transition-delay: 0.54s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

.scroll-indicator {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    z-index: 998;
    overflow: hidden;
    transition: background 0.3s ease, width 0.2s ease;
}

.scroll-indicator:hover {
    background: rgba(0, 0, 0, 0.75);
}

@media (hover: hover) and (pointer: fine) {
    .scroll-indicator:hover .extra-btns {
        display: flex;
    }
}

@media (max-width: 991px) {
    .nc-orch-grid,
    .nc-config,
    .nc-manifesto-grid { gap: 20px; }

    .nc-manifesto-visual { order: -1; }
    .nc-section { padding: 90px 0; }

    /* render sits below the copy and overlaps down into the Benefits section */
    .nc-orch-visual {
        order: 2;
        position: relative;
        z-index: 3;
        margin-bottom: -120px;
    }
    /* drop the orch panel's bottom padding so the overlap reaches the next panel */
    .nc-stack-panel:first-of-type > .nc-wrap { padding-bottom: 0; }
}

/* Lead: stack + show the whole product on phones held upright; keep the
   desktop bleed in landscape where there's more horizontal room. */
@media (max-width: 991px) and (orientation: portrait) {
    .nc-lead .nc-lead-grid { grid-template-columns: 1fr; gap: 36px; }
    .nc-lead-visual {
        min-height: 0;
        display: flex;
        justify-content: center;
    }
    /* drop the bleed/clip — plain stacked rows, whole product visible */
    .nc-lead-render {
        position: static;
        transform: none;
        left: auto;
        width: 100%;
        max-width: 560px;
    }
}

@media (max-width: 767px) {
    .nc-page { --nc-pad: 24px; }

    .nc-hero { padding: 80px 24px 90px; }
    .nc-hero-render { width: 92vw; }
    .nc-hero-inner { gap: 20px; }

    .nc-section { padding: 72px 0; }
    .nc-section-head { margin-bottom: 30px; }

    .nc-specs-grid { grid-template-columns: 1fr 1fr; }
    .nc-suited-pill { width: 100%; justify-content: center; }
    .nc-variants-table { display: block; overflow-x: auto; white-space: nowrap; }

    .nc-scroll-cue { display: none; }

    .nc-config { grid-template-columns: 1fr; gap: 40px }
    }

@media (max-width: 479px) {
    .nc-specs-grid { grid-template-columns: 1fr; }
    .nc-result-part { font-size: 24px; }
}

/* Mobile landscape: keep hero from overflowing on short viewports */
@media (max-height: 560px) and (orientation: landscape) {
    .nc-hero { min-height: auto; padding: 110px 40px 60px; }
    .nc-hero-render { width: min(48vw, 380px); }
    .nc-hero h1 { font-size: clamp(24px, 4vw, 34px); }
    .nc-scroll-cue { display: none; }
    .nc-orch-grid {    grid-template-columns: 1.25fr .75fr; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .nc-hero-logo-wrap, .nc-hero-eyebrow, .nc-hero h1, .nc-hero-cta,
    .nc-hero-render {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .nc-reveal, .nc-stagger > * { opacity: 1 !important; transform: none !important; }
    /* keep the glow centered, just skip the scale-in animation */
    .nc-hero-glow { animation: none !important; transform: translate(-50%, -50%) scale(1) !important; }
    .nc-kinetic .nc-line > span { transform: none !important; }
}

/* ============================================================
   NullCloud "Request a Demo" CTA — dark, data-driven restyle
   (scoped to .nc-page so shared pages keep the light treatment)
   ============================================================ */

/* dark tech backdrop for the section behind the grid wave */
.nc-page .sales-cta-section {
    background:
        radial-gradient(120% 90% at 78% 6%, rgba(30, 97, 150, 0.45) 0%, rgba(30, 97, 150, 0) 55%),
        radial-gradient(120% 95% at 12% 100%, rgba(48, 139, 199, 0.28) 0%, rgba(48, 139, 199, 0) 55%),
        linear-gradient(180deg, #0a1526 0%, #0b1a2e 50%, #081321 100%);
}

/* the animated grid-wave canvas fills the sticky content panel */
.nc-page .salesctacontent {
    position: sticky;   /* positioning context for the absolute canvas */
}
.nc-page .nc-grid-wave-canvas {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);   /* break out of the 1440px content cap to full-bleed */
    width: 100vw;
    height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.nc-page .salesctacontent > .contact-us-container {
    z-index: 1;   /* keep the form panel above the canvas */
}

/* form border container: mostly-opaque dark glass with a 15px blur */
.nc-page .contact-us-container.contact-us-nc-dark {
    background-color: rgba(13, 27, 48, 0.9);
    background-image: radial-gradient(ellipse at bottom left, rgba(105, 178, 225, 0.18) 0%, rgba(13, 27, 48, 0) 45%);
    border: 1px solid rgba(105, 178, 225, 0.35);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(105, 178, 225, 0.06);
}

/* light-on-dark copy inside the panel */
.nc-page .contact-us-nc-dark .h2-styling {
    color: #ffffff;
}
.nc-page .contact-us-nc-dark .p-styling,
.nc-page .contact-us-nc-dark .p-dark {
    color: var(--infrashield-lighter);
}
.nc-page .contact-us-nc-dark .inlinebluewordslight {
    color: var(--infrashield-lightblue);
}

/* Vuetify fields recoloured for the dark panel */
.nc-page .contact-us-nc-dark .contact-us-form {
    .v-field__input,
    .v-field__input input,
    textarea.v-field__input {
        color: #eaf2fb;
    }
    .v-field__input input::placeholder,
    textarea.v-field__input::placeholder {
        color: rgba(196, 223, 243, 0.55);
        opacity: 1;
    }
    .v-label,
    .v-field-label {
        color: rgba(196, 223, 243, 0.85);
        opacity: 1;
    }
    .v-field__outline {
        color: rgba(105, 178, 225, 0.45);
        --v-field-border-opacity: 1;
    }
    .v-field--focused .v-field__outline {
        color: var(--infrashield-lightblue);
    }
    input,
    textarea {
        caret-color: var(--infrashield-lightblue);
    }
    .v-messages__message {
        color: #ff9d9d;
    }

    /* topic toggle (shown in non-demo contexts) recoloured for the dark panel */
    .v-btn-group .v-btn {
        color: var(--infrashield-lighter);
        background: rgba(105, 178, 225, 0.06);
        border-color: rgba(105, 178, 225, 0.4) !important;
    }
    .v-btn-group .v-btn.v-btn--active {
        color: #06121f;
        background: var(--infrashield-lightblue);
    }

    /* primary submit button pops in light blue on the dark panel */
    .submit-wrapper .v-btn {
        background: linear-gradient(120deg, #fff, #a1d7ff) !important;
        color: #06121f !important;
    }
    .submit-wrapper .v-btn__content {
        border-right: 1px solid rgba(6, 18, 31, 0.28);
    }
}

/* submit result banner: outlined, rounded, light tint of the status colour */
.nc-page .nc-form-shell {
    width: 100%;
}
.nc-page .nc-form-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid;
    border-radius: 12px;
    font-family: var(--font--family--book);
    font-size: 15px;
    line-height: 1.45;
}
.nc-page .nc-form-banner i {
    margin-top: 2px;
    font-size: 17px;
    flex: 0 0 auto;
}
.nc-page .nc-form-banner.is-success {
    color: #d8f7e4;
    background: rgba(52, 199, 89, 0.15);
    border-color: rgba(52, 199, 89, 0.6);
}
.nc-page .nc-form-banner.is-success i {
    color: #3ddc7f;
}
.nc-page .nc-form-banner.is-error {
    color: #ffdad7;
    background: rgba(255, 90, 90, 0.15);
    border-color: rgba(255, 90, 90, 0.6);
}
.nc-page .nc-form-banner.is-error i {
    color: #ff6b6b;
}
/* space the error banner from the form it sits above */
.nc-page .nc-form-banner.is-error {
    margin-bottom: 20px;
}