/* ================================
   0. Base resets (safe)
   ================================ */
*, *::before, *::after { box-sizing: border-box; }

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

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

:root {
font-family: 'Poppins', sans-serif;
}





/* Containers */


/* If your theme has spacing.vertical_spacing, keep it; otherwise hardcode a safe fallback */






.body-container__homepage .dnd-section:nth-child(odd) {
  background-color: #fa0000;
}

.dnd-section{
    padding-bottom:30px;
    padding-top:30px
}
@media (min-width:576px){
    .dnd-section>.row-fluid,.page-center{
        max-width:767.9999999979999px
    }
}
@media (min-width:768px){
    .dnd-section>.row-fluid,.page-center{
        max-width:991.999999998px
    }
}
@media (min-width:992px){
    .dnd-section>.row-fluid,.page-center{
        max-width:1199.999999996px
    }
}
@media (min-width:1200px){
    .dnd-section>.row-fluid,.page-center{
        max-width:1400px
    }
}

'px') if theme.spacing.vertical_spacing else '3rem' %}





/* DNOW Brand Kit Tokens */
:root {
  /* ----------------
     Brand Core
     ---------------- */
  --color-brand-primary: #fa0000;   /* Highlight Red (PMS 485) */
  --color-brand-secondary: #3d4744; /* Metal Grey (PMS 446) */
  --color-brand-accent: #aa0000;    /* Medium Red (PMS 484) */
  --color-brand-deep: #730000;      /* Dark Red (PMS 483) */

  /* ----------------
     Neutrals
     ---------------- */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-gray-900: #1e1e1e; /* Dark Grey */
  --color-gray-700: #3d4744; /* Metal Grey */
  --color-gray-500: #8c8c8c; /* Medium Grey */
  --color-gray-300: #c8c8c8; /* Light Grey */
  --color-gray-100: #ebebeb; /* Lightest Grey */

  /* ----------------
     Surface / Layout
     ---------------- */
  --color-page-bg: var(--color-white);
  --color-section-bg: var(--color-gray-100);
  --color-card-bg: var(--color-white);
  --color-card-border: var(--color-gray-300);

  --color-divider: var(--color-gray-300);
  --color-border: var(--color-gray-300);
  --color-border-strong: var(--color-gray-500);

  /* ----------------
     Typography
     ---------------- */
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-white);

  --color-heading: var(--color-gray-900);

  /* Link colors */
  --color-link: var(--color-brand-primary);
  --color-link-hover: var(--color-brand-accent);
  --color-link-visited: var(--color-brand-deep);

  /* ----------------
     Focus / Accessibility
     ---------------- */
  --color-focus-ring: rgba(250, 0, 0, 0.35);
  --focus-ring: 0 0 0 3px var(--color-focus-ring);

  /* ----------------
     Forms
     ---------------- */
  --form-radius: 6px;
  --form-bg: var(--color-white);
  --form-border: var(--color-gray-300);
  --form-border-hover: var(--color-gray-500);
  --form-border-focus: var(--color-brand-primary);

  --form-text: var(--color-gray-900);
  --form-placeholder: var(--color-gray-500);
  --form-label: var(--color-gray-900);
  --form-helptext: var(--color-gray-500);

  --form-error: var(--color-brand-deep);
  --form-success: #006666;

  /* ----------------
     Shadows
     ---------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.10);
  
  /* ----------------
     HubSpot Layout Tokens
     ---------------- */
  --container-max: px;
  --section-pad: 30px;
}





html { font-size: 100%; } /* 16px default */

body {
  color: var(--color-text);
  background: var(--color-page-bg);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
}

p { margin: 0 0 1rem; }

/* Links */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.3s, text-decoration-color 0.3s;
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
a:visited {
  color: var(--color-link-visited);
}
a:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

/* Touch Target Utility (apply ONLY to UI links/CTAs, not inline text links) */
.touch-target {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.touch-target-padding {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Headings */
h1, .h1 { font-weight: 300; font-size: clamp(1.8rem, 5vw, 2.5rem); color: var(--color-heading); }
h2, .h2 { font-weight: 400; font-size: clamp(1.6rem, 4.5vw, 2.2rem); color: var(--color-heading); }
h3, .h3 { font-weight: 500; font-size: clamp(1.4rem, 4vw, 1.9rem); color: var(--color-heading); }
h4, .h4 { font-weight: 300; font-size: 1.17rem; color: var(--color-heading); }
h5, .h5 { font-weight: 300; font-size: 1rem; color: var(--color-heading); }
h6, .h6 { font-weight: 300; font-size: 0.8125rem; color: var(--color-heading); }

.text-muted { color: var(--color-text-muted) !important; }

blockquote { border-left-color: var(--color-divider); }

.small-heading {
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 1em;
  letter-spacing: 1.8px;
  text-transform: none;
  color: var(--color-heading);
}

.aside {
  font-weight: 300;
  font-size: 0.8em;
  margin-bottom: 1em;
  letter-spacing: 1.8px;
  text-transform: none;
  color: var(--color-text);
}





/* Section spacing */
.dnd-section { padding: 3rem 0; }
@media (max-width: 768px) { .dnd-section { padding: 2rem 0; } }

/* Unified container sizing (single source of truth) */
.dnd-section > .row-fluid,
.page-center,
.header__container,
.content-wrapper {
  max-width: var(--container-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Alternating section background */
.body-container__homepage .dnd-section:nth-child(odd),
.body-container__website .dnd-section:nth-child(odd) {
  background-color: var(--color-section-bg);
}





.content-section {
  width: 50%;
  display: flex;
  flex-direction: column;
  margin-left: 0;
  padding: 0 60px;
}
@media (max-width: 1200px) { .content-section { padding: 0 40px; } }
@media (max-width: 991px) {
  .content-section { width: 100%; padding: 20px; }
}

.content-block {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  line-height: normal;
  color: var(--color-brand-primary);
  margin: auto 0;
  padding: 20px 30px 0 30px;
}
@media (max-width: 991px) {
  .content-block {
    width: 100%;
    padding: 30px;
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* Accent heading (merged) */
.accent-heading,
.heading-with-marker,
.lead,
.section-header {
  color: var(--color-brand-primary);
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  font-style: normal;
  font-weight: 700;
  line-height: 162.5%;
  letter-spacing: 0.48px;
}

/* Keep only unique bits */
.heading-with-marker {
  align-self: start;
  display: flex;
  padding-bottom: 5px;
}

/* Marker (merged) */
.section-marker,
.pre-box {
  display: inline-block;
  width: 10px;
  height: 25px;
  background-color: var(--color-brand-primary);
  margin-right: 15px;
  vertical-align: middle;
}

.section-cta { margin-top: 20px; }





form,
.submitted-message {
  border-color: var(--color-border-strong);
  font-family: 'Poppins', sans-serif;
  color: var(--color-text);
}

/* HubSpot form title (keep simple + token-driven) */
h3.form-title {
  background-color: var(--color-section-bg);
  color: var(--color-heading);
}

/* Prevent overflow */
input, select, textarea, .hs-input { max-width: 100%; }

/* Base buttons (HubSpot + generic) */
.btn,
button,
input[type="submit"],
.hs-button,
.button--primary,
.hs_cos_wrapper_type_google_search .hs-button {
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  padding: var(--btn-padding-y) var(--btn-padding-x);
}

/* Primary buttons */
.hs-button,
.button--primary,
.btn-primary,
.hs_cos_wrapper_type_google_search .hs-button {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-border);
}

.hs-button:hover,
.hs-button:focus,
.button--primary:hover,
.button--primary:focus,
.btn-primary:hover,
.btn-primary:focus,
.hs_cos_wrapper_type_google_search .hs-button:hover,
.hs_cos_wrapper_type_google_search .hs-button:focus {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}

.hs-button:active,
.button--primary:active,
.btn-primary:active {
  background: var(--btn-primary-bg-active);
  color: var(--btn-primary-text);
}

.hs-button:focus,
.button--primary:focus,
.btn-primary:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Labels + help text */
.hs-form label {
  font-weight: 600;
  color: var(--form-label);
  font-size: 1rem;
}
.hs-form legend {
  color: var(--form-helptext);
  font-size: small;
}

/* Fields */
form input,
form select,
form textarea,
.hs-input,
input#hs-pwd-widget-password,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea {
  background: var(--form-bg);
  color: var(--form-text);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
}

form input:hover,
form select:hover,
form textarea:hover,
.hs-input:hover {
  border-color: var(--form-border-hover);
}

form input:focus,
form select:focus,
form textarea:focus,
.hs-input:focus,
input#hs-pwd-widget-password:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--form-border-focus);
  box-shadow: var(--focus-ring);
}

::placeholder { color: var(--form-placeholder); }

/* Date picker (token-driven) */
.fn-date-picker td.is-today .pika-button { color: var(--color-brand-primary); }
.fn-date-picker td.is-selected .pika-button { background: var(--color-brand-primary); }
.fn-date-picker td .pika-button:hover { background-color: var(--color-section-bg) !important; }





/* Token-forward default table styling (safe baseline) */
table { border-color: var(--color-border); }
th, td {
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
thead th, thead td {
  background: var(--color-section-bg);
  color: var(--color-text);
}






.header-group {
  background-color: var(--color-gray-100););
}

/* Keep HubSpot search fields readable */
.nav-search form .hs-search-field__input {
  color: var(--color-brand-secondary);
  border-color: var(--color-gray-100);
  background: var(--color-white);
}
.nav-search form .hs-search-field__input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: var(--focus-ring);
}

.nav-search form button.search-submit {
  color: var(--color-brand-primary);
}
.nav-search form button.search-submit:hover {
  color: var(--color-brand-accent);
}

/* Menu links */
body .custom-menu-primary a,
.header__logo .logo-company-name,
.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a,
.header-menu ul li a {
  color: var(--nav-link);
}

body .custom-menu-primary .submenu.level-1 > li > a:hover,
body .custom-menu-primary .submenu.level-1 > li > a:focus,
.header__language-switcher-label-current:hover,
.header__language-switcher-label-current:focus,
.header__language-switcher .lang_list_class li:hover a,
.header__language-switcher .lang_list_class li a:focus,
.header-menu ul li a:hover,
header-menu ul li a:focus {
  color: var(--nav-link-hover);
}

/* Submenu backgrounds */
body .custom-menu-primary .submenu.level-1 > li {
  background-color: var(--color-white);
}
body .custom-menu-primary .submenu.level-1 > li:hover,
body .custom-menu-primary .submenu.level-1 > li:focus {
  background-color: var(--color-section-bg);
}

/* Level-2 menu */
body .custom-menu-primary .submenu.level-2,
body .custom-menu-primary .submenu.level-2 .triangle-container .triangle {
  background-color: var(--color-white);
}

/* Level-2 menu hover */
body .custom-menu-primary .submenu.level-2 .menu-item .menu-link:hover,
body .custom-menu-primary .submenu.level-2 .menu-item .menu-link:focus,
body .header__language-switcher .lang_list_class li:hover,
body .custom-menu-primary .submenu.level-2 .triangle-container.level-2.hover .triangle {
  background-color: var(--color-section-bg);
  color: var(--nav-link-hover);
}

/* Language switcher caret */
.header__language-switcher-label-current:after {
  border-top-color: var(--nav-link);
}

@media (max-width: 767px) {
  .header__navigation { background-color: #ebebeb); }

  .header__navigation-toggle svg,
  .menu-arrow svg {
    fill: var(--nav-link);
  }
}





.footer-group {
  background-color: var(--footer-bg);
  color: var(--footer-text);
}

.footer-group h5,
.footer-menu .hs-menu-wrapper > ul > li > a,
.footer-menu .hs-menu-wrapper > ul > li > a:hover {
  color: var(--footer-text);
}

.footer-group a,
.footer-menu .hs-menu-wrapper ul ul li.hs-menu-item.active a {
  color: var(--footer-link);
  background-image: linear-gradient(to top, rgba(255,255,255,0.85) 1px, transparent 0);
}

.footer-group a:hover {
  color: var(--footer-link-hover);
  background-image: linear-gradient(to top, rgba(255,255,255,0.85) 1px, transparent 0);
}

.social-footer-icon-wrap a { color: var(--footer-link); }
.social-footer-icon-wrap a:hover { color: var(--footer-link-hover); }





/* Keep blog UI consistent with site tokens */
.blog-post__date { border-color: var(--color-border); }

.blog-tag-filter__menu-link,
.blog-post__tag-link,
.blog-card__tag-link,
.blog-post__author-name,
.blog-card__title a {
  color: var(--color-text);
}

.blog-card__tag-link:hover,
.blog-card__title a:hover,
.blog-tag-filter__menu-link:hover,
.blog-post__tag-link:hover,
.blog-post__author-name:hover,
.blog-card__tag-link:focus,
.blog-card__title a:focus,
.blog-tag-filter__menu-link:focus,
.blog-post__tag-link:focus,
.blog-post__author-name:focus {
  color: var(--color-link-hover);
}

.blog-card__tag-link:active,
.blog-card__title a:active,
.blog-tag-filter__menu-link:active,
.blog-post__tag-link:active,
.blog-post__author-name:active {
  color: var(--color-link-visited);
}

.blog-tag-filter__menu-link--active-item:after,
.blog-pagination__link--active:after,
.blog-pagination__prev-link:after,
.blog-pagination__next-link:after {
  background-color: var(--color-brand-primary);
}

.blog-pagination__link { color: var(--color-text); }

.blog-post__author { background-color: var(--color-section-bg); }

/* Comments reply link (token-based; no convert_rgb) */
#comments-listing .comment-reply-to { color: var(--color-link); }
#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus { color: var(--color-link-hover); }
#comments-listing .comment-reply-to:active { color: var(--color-link-visited); }





body .icon svg { fill: var(--color-brand-primary); }

body .tns-nav button.tns-nav-active,
body .tns-nav button:hover,
body .tns-nav button:focus {
  background-color: var(--color-brand-primary);
}

body .social-links__icon {
  background-color: var(--color-brand-primary);
}

body .social-links__icon:hover svg,
body .social-links__icon:focus svg {
  fill: var(--color-brand-primary);
}

body .social-links__icon:active svg {
  fill: var(--color-brand-deep);
}

body .team-member__description {
  background-color: var(--color-section-bg);
}