/*
Theme Name: NETX Softwash Hotel (Child)
Theme URI: https://netxsoftwash.com
Description: Child theme of Zephyr for the NETX Softwash hotel/hospitality repositioning. All custom templates, styles, and functions for the site rebuild live here so the parent Zephyr theme stays untouched and upgradeable.
Author: Trey Peeples / NETX Softwash
Template: zephyr
Version: 0.2.0
Text Domain: netx-softwash-hotel
*/

/* ==========================================================================
   Brand variables — sampled directly from netx-logo-selected-primary.png:
   near-black backdrop, a cyan-to-blue droplet gradient, and a bright green
   cityscape, paired with a serif wordmark ("Softwash"). Retiring the old
   site's purple (#7049ba) entirely.
   ========================================================================== */
:root {
  --netx-black: #07090c;       /* logo backdrop — deepest background sections */
  --netx-navy: #0c1720;        /* slightly lifted black, for layered sections */
  --netx-blue-light: #5ec9f2;  /* droplet highlight / top of gradient */
  --netx-blue: #2596e0;        /* primary brand blue */
  --netx-blue-dark: #14649e;   /* hover/active state */
  --netx-green: #4caf50;       /* cityscape green accent */
  --netx-green-dark: #388e3c;
  --netx-white: #ffffff;
  --netx-silver: #b7c1c9;      /* tagline gray from the logo */
  --netx-ink: #16212b;         /* body copy on light backgrounds */
  --netx-light-bg: #f4f8fb;
  --netx-border: #e2e8ee;

  --netx-font-display: 'Playfair Display', Georgia, serif;
  --netx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  font-family: var(--netx-font-body);
}

h1, h2, h3, h4, h5, h6,
.entry-title {
  font-family: var(--netx-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Retire Zephyr's default purple (#7049ba / #6039a8 / #c8b8e5) in favor of
   the NETX brand palette. Zephyr ships theme.css as a static packaged
   stylesheet (not regenerated per-site from Customizer options), so these
   overrides target the same selectors Zephyr uses, at higher specificity /
   load order (child style.css is enqueued after the parent's, see
   functions.php), rather than editing the parent theme file directly.
   ========================================================================== */
.l-subheader.at_top,
.l-subheader.at_top .w-dropdown-list,
.l-subheader.at_top .type_mobile .w-nav-list.level_1,
.l-subheader.at_bottom,
.l-subheader.at_bottom .w-dropdown-list,
.l-subheader.at_bottom .type_mobile .w-nav-list.level_1 {
  background-color: var(--netx-navy);
}
.header_ver .l-header,
.l-subheader.at_middle,
.l-subheader.at_middle .w-dropdown-list,
.l-subheader.at_middle .type_mobile .w-nav-list.level_1,
.w-search-form,
.w-search.layout_fullscreen .w-search-background {
  background-color: var(--netx-black);
}
.l-subheader.at_middle {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* us-core renders a second, duplicate copy of any header widget that's
   only visible at OTHER breakpoints inside a ".l-subheader.for_hidden
   .hidden" container, right after the visible header and before the page
   content — meant to stay invisible via JS after load. There's no CSS
   rule hiding it at all (confirmed: absent from every loaded stylesheet),
   so if that JS is slow, errors, or simply hasn't run yet, this container
   sits in normal document flow and pushes real content down. Hide it
   permanently via CSS so it can never depend on JS timing. */
.l-subheader.for_hidden.hidden {
  display: none !important;
}
/* Vertically center header content regardless of row height. Normally
   supplied by the us-core PLUGIN's own dynamically-generated CSS, which
   only exists where that plugin is installed (staging/prod) — local has
   no plugin, so .l-subheader-h silently loses this and top-aligns its
   content instead, dumping any extra row height as dead space below the
   logo. Set it ourselves so it doesn't depend on the plugin being present. */
.l-subheader-h {
  align-items: center;
}
.menu-item.level_1>.w-nav-anchor:focus,
.no-touch .menu-item.level_1.opened>.w-nav-anchor,
.no-touch .menu-item.level_1:hover>.w-nav-anchor {
  background-color: rgba(37, 150, 224, 0.15);
}
.menu-item:not(.level_1).current-menu-item>.w-nav-anchor,
.menu-item:not(.level_1).current-menu-parent>.w-nav-anchor,
.menu-item:not(.level_1).current-menu-ancestor>.w-nav-anchor {
  color: var(--netx-blue-dark);
}
.w-nav-title {
  font-family: var(--netx-font-body);
}
a { color: var(--netx-blue-dark); }
.no-touch a:hover { color: var(--netx-blue); }
.l-section.color_primary,
.highlight_primary_bg,
.w-actionbox.color_primary,
.pagination .page-numbers.current,
.w-form-row input:checked + .w-form-checkbox,
.w-form-row input:checked + .w-form-radio,
.l-body .cl-btn {
  background-color: var(--netx-blue) !important;
}
.highlight_primary,
.w-separator.color_primary,
.l-main .widget_nav_menu .menu-item.current-menu-item>a {
  color: var(--netx-blue) !important;
}
input:focus,
textarea:focus,
.w-separator.color_primary {
  border-color: var(--netx-blue) !important;
}
input:focus,
textarea:focus {
  box-shadow: 0 -1px 0 0 var(--netx-blue) inset !important;
}

/* ==========================================================================
   Mobile nav fallback — ONLY for the NO_US_CORE branch (see header.php):
   sites where the "US Core" companion plugin isn't installed get Zephyr's
   static fallback header, which ships with no responsive breakpoint or
   mobile nav toggle at all. This is a self-contained hamburger + dropdown
   for that scenario, scoped under body.NO_US_CORE so it never touches a
   real us-core header (which has its own working native mobile nav and
   reuses the same .l-subheader/.w-nav-list class names).
   ========================================================================== */
.NO_US_CORE .netx-mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.NO_US_CORE .netx-mobile-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--netx-white);
  margin: 0 auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.NO_US_CORE .netx-mobile-nav-toggle-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.NO_US_CORE .netx-mobile-nav-toggle-open span:nth-child(2) {
  opacity: 0;
}
.NO_US_CORE .netx-mobile-nav-toggle-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .NO_US_CORE .l-subheader-cell.at_right {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .NO_US_CORE .netx-mobile-nav-toggle {
    display: flex;
  }
  .NO_US_CORE .l-subheader.at_middle .w-nav-list.level_1 {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--netx-black);
    padding: 0.5em 1.25em 1.5em;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }
  .NO_US_CORE .l-subheader.at_middle .w-nav-list.level_1.netx-mobile-nav-open {
    display: flex !important;
  }
  .NO_US_CORE .l-subheader.at_middle .w-nav-list.level_1 .menu-item {
    width: 100%;
  }
  .NO_US_CORE .l-subheader.at_middle .w-nav-list.level_1 .w-nav-list:not(.level_1) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    background: transparent;
    box-shadow: none;
    padding-left: 1em;
    margin: 0.25em 0 0.75em;
  }
  .NO_US_CORE .l-subheader.at_middle .w-nav-list.level_1 .w-nav-list:not(.level_1) a {
    color: var(--netx-silver);
  }
}

.netx-site-logo {
  display: flex;
  align-items: center;
}
.netx-site-logo .w-text-h {
  display: flex !important;
  align-items: center;
  gap: 0.6em;
}
.netx-site-logo-icon {
  height: 48px;
  width: auto;
  max-width: none;
  display: block;
}
@media (max-width: 900px) {
  .netx-site-logo-icon {
    height: 38px;
  }
}

/* ==========================================================================
   Real us-core header (see header.php — this is the branch that actually
   renders once the "US Core" plugin is installed, e.g. on staging/prod).
   The header itself is a saved Header Builder layout (us_header post) whose
   colors/heights are set in its own JSON; the rules here cover what that
   JSON can't express in our brand language.
   ========================================================================== */
/* The image widget has has_ratio off, so it never constrains the logo to
   its configured height and just prints the image at full intrinsic size —
   that blew out the header row. Force the real display size here. */
.l-header .ush_image_1 img {
  height: 52px !important;
  width: auto !important;
  max-width: none !important;
}
/* us-core's global palette ships a raw #0000ff for the header's hover/
   active text (the old site's setting) — repoint the variable at our brand
   blue so "current page" and hover states stop rendering harsh pure blue. */
.l-header {
  --color-header-middle-text-hover: var(--netx-blue-light);
}
/* Site-name wordmark next to the icon (text:1 element in the header
   builder layout, el_class netx-header-name). Same serif treatment as the
   fallback header's .netx-site-logo. */
.l-header .netx-header-name {
  margin-left: 0.35em;
}
.l-header .netx-header-name .w-text-value {
  font-family: var(--netx-font-display);
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--netx-white);
}
.no-touch .l-header .netx-header-name a:hover .w-text-value {
  color: var(--netx-white);
}
/* Header buttons: us-core's style_1 preset is uppercase 700-weight slabs.
   Rework them into the site's button language — quote button gets the
   brand gradient (mirrors .netx-btn-primary), call/email become quiet
   outline buttons so three CTAs don't shout at once. Specificity note:
   the layout JSON emits per-button `.ush_btn_N{background:...!important}`
   rules, so these need .l-header scoping + !important to win. */
.l-header .w-btn.us-btn-style_1 {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-family: var(--netx-font-body);
  border-radius: 6px;
  padding: 0.7em 1.4em;
}
.l-header .ush_btn_3 {
  background: linear-gradient(135deg, var(--netx-blue-light), var(--netx-blue)) !important;
  color: var(--netx-white) !important;
  box-shadow: 0 2px 10px rgba(37, 150, 224, 0.35);
}
.no-touch .l-header .ush_btn_3:hover {
  box-shadow: 0 4px 14px rgba(37, 150, 224, 0.45);
}
.l-header .ush_btn_1,
.l-header .ush_btn_2 {
  background: transparent !important;
  color: var(--netx-white) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.no-touch .l-header .ush_btn_1:hover,
.no-touch .l-header .ush_btn_2:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
/* Safety net: the header builder's inline nav + buttons only fit above a
   specific pixel width (tuned via the menu widget's own hamburger
   breakpoint in wp-admin, currently 1400px — below that the nav is always
   a hamburger and this whole scenario can't occur). Getting that number
   exactly right for every real browser/zoom/DPI combination isn't
   reliable, and .l-subheader-h is nowrap by default, which turns "doesn't
   quite fit" into literal overlapping text instead of a harmless wrap.
   Force wrap as a backstop so a mistuned breakpoint degrades to a
   two-line header, never overlap. Scoped to min-width so it can't touch
   the mobile/tablet header rows at all — it was blowing those out via
   --header-height, which is the *combined* top+middle row height, not
   the middle row's own height, forcing the middle row alone to match the
   full header height and leaving a large dead gap under the logo. */
@media (min-width: 1400px) {
  .l-subheader.at_middle .l-subheader-h {
    flex-wrap: wrap;
    row-gap: 0.5em;
  }
  /* The header builder emits a fixed height (e.g. height:90px) on this same
     row for the non-wrapped case — fixed height + wrap means an overflowing
     second line gets silently clipped instead of shown. Let height follow
     content once wrapping kicks in. */
  .l-subheader.at_middle {
    height: auto !important;
    min-height: var(--header-height, 90px);
  }
  .l-subheader.at_middle .l-subheader-h {
    height: auto !important;
    padding: 0.5em 0;
  }
}

/* ==========================================================================
   Page section rhythm — full-width color sections, each with an inner
   max-width container. Every section on every page (home, pillar, safety,
   contact, case study, city pages, blog posts) carries one of the
   .netx-bg-* modifiers below so pages read as alternating full-bleed
   bands rather than one continuous white column.
   ========================================================================== */
/* Zephyr adds padding-top equal to the header height on .l-section-h, for
   sites with a sticky/transparent header sitting over the content. Our
   header is static (not overlapping), so that padding is just dead space
   above the first section — kill it, and let sections truly sit flush
   under the header. Also neutralize the 1200px content-width cap on the
   outer wrapper so full-bleed color sections reach the real viewport edge. */
.l-section-h {
  padding-top: 0 !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Zephyr's default .l-section padding (a separate, outer wrapper level from
   .l-section-h above) also adds top/bottom/left/right breathing room we
   don't want here (the left/right default — --padding-inline, 2.5rem — was
   the exact source of the white side gutters breaking the edge-to-edge
   look), since our own .netx-bg-* sections already handle their own
   padding. Scoped to .l-main's direct child only — this is the single
   wrapper content.php outputs around our page content — so it won't touch
   any .l-section used elsewhere (e.g. WPBakery-built rows, if Trey adds
   those later). */
.l-main > .l-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.netx-intro,
section {
  width: 100%;
  box-sizing: border-box;
  padding: 3.5em 1.25em;
}

.netx-intro > *,
section > * {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

/* Section background variants */
section.netx-bg-white,
.netx-intro.netx-bg-white {
  background: var(--netx-white);
}
section.netx-bg-tint,
.netx-intro.netx-bg-tint {
  background: var(--netx-light-bg);
}
section.netx-bg-dark,
.netx-intro.netx-bg-dark {
  background: linear-gradient(160deg, var(--netx-black), var(--netx-navy));
  color: var(--netx-silver);
}
section.netx-bg-dark h1,
section.netx-bg-dark h2,
section.netx-bg-dark h3 {
  color: var(--netx-white);
}
section.netx-bg-dark a:not(.netx-btn) {
  color: var(--netx-blue-light);
}
section.netx-bg-accent {
  background: var(--netx-green);
  color: var(--netx-white);
}
section.netx-bg-accent h1,
section.netx-bg-accent h2,
section.netx-bg-accent h3 {
  color: var(--netx-white);
}

.netx-intro h1,
section h1 {
  font-size: clamp(1.9em, 4vw, 2.6em);
  line-height: 1.15;
  color: var(--netx-black);
}

section h2 {
  font-size: clamp(1.5em, 3vw, 2em);
  color: var(--netx-black);
}

.netx-hero {
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(37, 150, 224, 0.18), transparent 60%),
    linear-gradient(160deg, var(--netx-black), var(--netx-navy));
  color: var(--netx-white);
  padding: 6em 1.25em;
}
/* 6em top/bottom is sized for desktop breathing room; on phones it pushes
   the headline well below the fold under the header/sticky-cta chrome,
   with nothing but gradient in between. Tighten it up. */
@media (max-width: 600px) {
  .netx-hero {
    /* Fixed px, not em — a device with iOS "Larger Text" turned up would
       still blow this padding back out if it scaled with root font-size. */
    padding: 32px 20px 40px;
  }
}
.netx-hero h1 {
  color: var(--netx-white);
}
.netx-hero p {
  font-size: 1.15em;
  color: var(--netx-silver);
  max-width: 700px;
  margin: 0.75em auto 0;
}

.netx-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  justify-content: center;
  margin-top: 1.75em;
}

.netx-btn {
  display: inline-block;
  padding: 0.85em 1.9em;
  border-radius: 6px;
  font-weight: 600;
  font-family: var(--netx-font-body);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.netx-btn-primary {
  background: linear-gradient(135deg, var(--netx-blue-light), var(--netx-blue));
  color: var(--netx-white);
  box-shadow: 0 4px 16px rgba(37, 150, 224, 0.35);
}
.netx-btn-primary:hover {
  color: var(--netx-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 150, 224, 0.45);
}
.netx-btn-secondary {
  background: transparent;
  color: var(--netx-white);
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.netx-btn-secondary:hover {
  border-color: var(--netx-white);
  color: var(--netx-white);
}
.netx-hero .netx-cta-row .netx-btn-secondary {
  color: var(--netx-white) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1 !important;
}
.netx-hero .netx-cta-row .netx-btn-secondary:hover {
  border-color: var(--netx-white) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
section:not(.netx-hero) .netx-btn-secondary {
  color: var(--netx-ink);
  border-color: var(--netx-ink);
}
section:not(.netx-hero) .netx-btn-secondary:hover {
  background: var(--netx-ink);
  color: var(--netx-white);
}

.netx-card-grid,
.netx-angle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5em;
  margin-top: 1.5em;
}
.netx-card {
  background: var(--netx-white);
  border: 1px solid var(--netx-border);
  border-radius: 10px;
  padding: 1.75em;
  box-shadow: 0 2px 12px rgba(7, 9, 12, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.netx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(7, 9, 12, 0.09);
}
.netx-card h3 {
  color: var(--netx-blue-dark);
  margin-top: 0;
  font-size: 1.15em;
}

/* Full-bleed job-site photo with a caption bar — edge to edge, breaking
   out of the standard section padding/max-width for visual weight. */
.netx-photo-feature {
  padding: 0 !important;
}
.netx-photo-feature > * {
  max-width: none !important;
}
.netx-photo-feature img {
  display: block;
  width: 100%;
  height: auto;
  /* No max-height / object-fit: cover here — that combination is what
     crops the top or bottom off the photo to force it into a shorter
     box. Letting height follow the image's own aspect ratio at 100%
     width shows the complete photo, still full-bleed. */
}
.netx-photo-feature figcaption {
  padding: 1.1em 1.25em;
  text-align: center;
  background: var(--netx-navy);
  color: var(--netx-silver);
  font-size: 0.95em;
}

.netx-final-cta {
  text-align: center;
}
.netx-final-cta.netx-bg-dark .netx-btn-secondary {
  color: var(--netx-white) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}
.netx-cta-email-link {
  margin-top: 1em;
  font-size: 0.9em;
}
.netx-final-cta.netx-bg-dark .netx-cta-email-link a {
  color: var(--netx-silver);
}

.netx-process-steps {
  list-style: none;
  padding-left: 0;
  counter-reset: netx-step;
}
.netx-process-steps > li {
  margin-bottom: 1.75em;
  padding-left: 3em;
  position: relative;
  counter-increment: netx-step;
}
.netx-process-steps > li::before {
  content: counter(netx-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--netx-blue-light), var(--netx-blue));
  color: var(--netx-white);
  font-family: var(--netx-font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.netx-process-steps h3 {
  margin-bottom: 0.25em;
  margin-top: 0.15em;
}

.netx-before-after img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(7, 9, 12, 0.12);
}

.netx-about-hero {
  display: flex;
  align-items: center;
  gap: 2.5em;
  flex-wrap: wrap;
}
.netx-about-hero-text {
  flex: 1 1 320px;
}
.netx-about-photo {
  margin: 0;
  max-width: 320px;
  flex: 0 0 auto;
  text-align: center;
}
.netx-about-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(7, 9, 12, 0.15);
}
.netx-about-photo figcaption {
  margin-top: 0.75em;
  font-size: 0.9em;
  color: var(--netx-ink);
  font-weight: 600;
}

.netx-resources-list article {
  margin-bottom: 2em;
  padding-bottom: 2em;
  border-bottom: 1px solid var(--netx-border);
}

.netx-pending-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  background: rgba(76, 175, 80, 0.07);
  border-left: 3px solid var(--netx-green);
  border-radius: 4px;
  padding: 0.9em 1.1em;
  font-size: 0.92em;
  color: var(--netx-ink);
  font-style: normal;
}
.netx-pending-note svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15em;
  color: var(--netx-green-dark);
}
section.netx-bg-dark .netx-pending-note,
section.netx-bg-accent .netx-pending-note {
  background: rgba(76, 175, 80, 0.12);
  color: var(--netx-silver);
}

/* ==========================================================================
   Sticky mobile call/quote bar — markup output via wp_footer, see
   functions.php. Hidden entirely above the mobile-nav breakpoint.
   ========================================================================== */
.netx-sticky-cta {
  display: none;
}
@media (max-width: 900px) {
  .netx-sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    box-shadow: 0 -2px 12px rgba(7, 9, 12, 0.15);
  }
  .netx-sticky-cta > a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.95em 1em;
    font-family: var(--netx-font-body);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95em;
  }
  .netx-sticky-cta-call {
    background: var(--netx-black);
    color: var(--netx-white) !important;
  }
  .netx-sticky-cta-call svg {
    width: 18px;
    height: 18px;
  }
  .netx-sticky-cta-quote {
    background: linear-gradient(135deg, var(--netx-blue-light), var(--netx-blue));
    color: var(--netx-white) !important;
  }
  /* Keep the bar from covering footer content/links permanently */
  body {
    padding-bottom: 56px;
  }
}

.netx-contact-details {
  list-style: none;
  padding: 0;
  font-size: 1.05em;
}
.netx-contact-details li {
  margin-bottom: 0.4em;
}

.netx-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 220px;
  border: 2px dashed var(--netx-border);
  border-radius: 10px;
  background: var(--netx-white);
  color: #8a97a3;
  text-align: center;
  padding: 2em 1.5em;
  font-size: 0.95em;
}
section.netx-bg-tint .netx-photo-placeholder {
  background: var(--netx-white);
}
section.netx-bg-dark .netx-photo-placeholder {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--netx-silver);
}
.netx-photo-placeholder svg {
  width: 32px;
  height: 32px;
  opacity: 0.5;
}

.netx-eyebrow {
  display: inline-block;
  font-family: var(--netx-font-body);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--netx-green-dark);
  margin-bottom: 0.6em;
}
section.netx-bg-dark .netx-eyebrow,
section.netx-bg-accent .netx-eyebrow {
  color: var(--netx-green);
}
section.netx-bg-accent .netx-eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 480px) {
  .netx-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}