@charset "utf-8";

/*!
  Deejays.com — Site Styles
  Stack: Foundation 6, Font Awesome, Adobe Fonts (Typekit)
  Typography: Headers = Neue Haas Grotesk (Display/Text), Body/UI = Proxima Nova
*/
/* =============================================================
   00) VARIABLES & TOKENS
   ============================================================= */
:root {
  /* Palette */
  --bg: #0F2027;
  --bg-2: #203A43;
  --bg-3: #2C5364;
  --ink: #E9F1F6;
  --muted: #C9D4DD;
  --line: rgba(255, 255, 255, .12);
  --brand: #1F3A4A;
  /* Tide Blue */
  --accent: #F3B33D;
  /* Construction Amber */
  --card: #0E1419;
  /* Jet */
  /* Layout */
  --shadow: 0 6px 18px rgba(0, 0, 0, .28);
  --radius: 14px;
  --radius-lg: 18px;
  --sp-1: .5rem;
  --sp-2: .75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --header-height: 102px;
  /* Typography families (Typekit class names may vary per kit) */
  --font-head: "neue-haas-grotesk-display", "Neue Haas Grotesk Display", "Helvetica Neue", Arial, sans-serif;
  --font-head-text: "neue-haas-grotesk-text", "Neue Haas Grotesk Text", "Helvetica Neue", Arial, sans-serif;
  --font-body: "proxima-nova", "Proxima Nova", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, "JetBrains Mono", Consolas, "Liberation Mono", "Courier New", monospace;
}

/* =============================================================
   01) BASE & TYPOGRAPHY
   ============================================================= */
html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: linear-gradient(135deg, var(--bg), var(--bg-2), var(--bg-3));
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 .4em;
  font-family: var(--font-head);
  font-weight: 800;
  /* Haas bold/black for decisive headings */
  letter-spacing: -0.0125em;
  line-height: 1.15;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink);
}

h1 {
  font-size: clamp(2rem, 2.4rem + 1.2vw, 3.25rem);
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

h3 {
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem);
}

p,
li {
  font-size: 1rem;
  color: var(--ink);
}

small,
.eyebrow {
  font-size: .82rem;
  color: var(--muted);
}

code,
kbd,
samp {
  font-family: var(--font-code);
  font-size: .95em;
}

.container-xl {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

@media (max-width: 960px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.hr {
  height: 1px;
  background: var(--line);
  margin: var(--sp-6) 0;
}

/* Simple helpers */
.bold {
  font-weight: 700;
}

.bold_more {
  font-weight: 900;
}

.uppercase_text {
  text-transform: uppercase;
}

.larger_text {
  font-size: 2rem;
}

.larger_text2 {
  font-size: 1.25rem;
  color: #ffffffb3;
  outline: none;
}

.micro {
  font-size: .875em;
}

.muted {
  color: var(--muted);
}

/* =============================================================
   02) LAYOUT HELPERS
   ============================================================= */

/* Header Navigation Spacing */
.main-nav {
  margin-left: 2.5rem;
  /* Space between logo and nav links */
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-content {
  padding-top: 0;
}

.grid-container {
  padding: 0 .625rem;
  max-width: 80rem;
  margin: 0 auto;
}

/* Spacing utilities (KEEP) */
header.more_space_top,
div.more_space_top,
span.more_space_top {
  margin-top: 2rem;
}

header.more_space_top_little,
div.more_space_top_little,
span.more_space_top_little {
  margin-top: .75rem;
}

span.more_space_top,
span.more_space_top_little {
  display: inline-block;
}

@media (min-width: 64em) {

  header.more_space_top,
  div.more_space_top {
    margin-top: 2.5rem;
  }

  header.more_space_top_little,
  div.more_space_top_little {
    margin-top: 1rem;
  }
}

/* =============================================================
   03) HEADER & NAVIGATION
   ============================================================= */
/* Base header box */
.header-container {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  min-height: var(--header-height);
  padding: 0 1rem;
  padding-block: 14px;
  /* breathing room */
  background: transparent;
  /* transparent until scrolled */
  border-bottom: none;
  text-shadow: none;
  /* ensure no text halo */
  transition:
    padding-block .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}

/* Clean background layer (no blur) that fades in on scroll */
.header-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 22, .88);
  /* solid-ish, no backdrop-filter */
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity .35s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

/* Optional border “sweep” (kept subtle) */
.header-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}

.header-container .header_logo {
  transition: transform .35s ease;
}

.header-container .nav-links a {
  transition: background-color .2s ease, color .2s ease, padding .25s ease;
}

/* Scrolled state — crisp, no glow */
.header-container.is-scrolled {
  padding-block: 10px;
  box-shadow: none;
  /* no shadow haze */
}

.header-container.is-scrolled::before {
  opacity: 1;
  transform: translateY(0);
}

.header-container.is-scrolled::after {
  animation: headerSweep 520ms cubic-bezier(.2, .65, .15, 1) 60ms forwards;
}

.header-container.is-scrolled .header_logo {
  transform: scale(.96);
}

.header-container.is-scrolled .nav-links a {
  padding: .65rem .85rem;
}

@keyframes headerSweep {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  10% {
    opacity: .9;
  }

  100% {
    transform: scaleX(1);
    opacity: .5;
  }
}

@media (prefers-reduced-motion: reduce) {

  .header-container,
  .header-container::before,
  .header-container::after,
  .header-container .header_logo,
  .header-container .nav-links a {
    transition: none !important;
    animation: none !important;
  }

  .header-container.is-scrolled::before {
    opacity: 1;
    transform: none;
  }

  .header-container.is-scrolled::after {
    opacity: .5;
    transform: scaleX(1);
  }
}

.header-container.is-scrolled .header_logo {
  transform: scale(.96);
}

.header-container.is-scrolled .nav-links a {
  /* slightly denser tap targets when bar is “active” */
  padding: .65rem .85rem;
}

/* Strong, readable nav text */
.header-container .nav-links a {
  color: rgba(255, 255, 255, .98);
  /* near-solid */
  font-weight: 600;
}

/* Clear affordance on hover/active */
.header-container .nav-links a:hover,
.header-container .nav-links a[aria-current="page"],
.header-container .nav-links li.is-active>a {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  /* a touch denser */
}

/* Header ghost CTA contrast + hover */
.header-container .nav-actions .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}

.header-container .nav-actions .btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  color: #f3b33d;
  /* your --accent on hover (matches ghost buttons sitewide) */
}

/* The sweep keyframes */
@keyframes headerSweep {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  10% {
    opacity: .9;
  }

  100% {
    transform: scaleX(1);
    opacity: .6;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .header-container,
  .header-container::before,
  .header-container::after,
  .header-container .header_logo,
  .header-container .nav-links a {
    transition: none !important;
    animation: none !important;
  }

  .header-container.is-scrolled::before {
    opacity: 1;
    transform: none;
  }

  .header-container.is-scrolled::after {
    opacity: .6;
    transform: scaleX(1);
  }
}

/* 1) Put the glass layer BEHIND the content */
.header-container::before {
  z-index: 0;
  /* <= key change */
}

/* 2) Ensure header children paint above the glass */
.header-container>* {
  position: relative;
  z-index: 1;
}

/* 3) Strong, readable nav at all times */
.header-container .nav-links a {
  color: #fff;
  /* full contrast */
  font-weight: 600;
}

.header-container .nav-actions .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}

.header-container .nav-actions .btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
}

/* 4) Don’t let scroll state change link opacity */
.header-container.is-scrolled .nav-links a,
.header-container.is-scrolled .nav-actions .btn--ghost {
  color: #fff;
  /* lock it in */
  filter: none;
  opacity: 1;
}

/* Smooth anchor jumps */
:root {
  scroll-padding-top: var(--header-height);
}

[id] {
  scroll-margin-top: var(--header-height);
}

/*.off-canvas-content {
  padding-top: var(--header-height);
}*/
/* Logo sizing by height */
.header_logo {
  height: 56px;
  width: auto;
  max-width: none;
  padding-right: .875rem;
}

@media (min-width: 64em) {
  .header_logo {
    height: 64px;
    padding-right: .875rem;
  }
}

@media (min-width: 90em) {
  .header_logo {
    height: 70px;
    padding-right: .875rem;
  }
}

/* Primary nav */
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  padding: .75rem .9rem;
  border-radius: 8px;
  transition: background-color .2s ease, color .2s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, .06);
}

/* Full-width dropdown aligned to header bottom */
.full-width-dropdown {
  position: fixed !important;
  top: var(--header-height) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  margin: 0 auto;
  padding: 1.5rem;
  box-sizing: border-box;
  background: #111a20 !important;
  border-top: none !important;
  box-shadow: 0 2px 8px var(--shadow);
  z-index: 9999;
}

/* ========== Solutions dropdown (desktop) ========== */
.has-dropdown {
  position: relative;
}

.has-dropdown .caret {
  margin-left: .35rem;
  font-size: .85em;
  opacity: .85;
}

/* Remove any old :hover show rule for the dropdown (if present) */
/* .has-dropdown:hover > .full-width-dropdown { display:block; } */

/* Default: hidden, non-interactive */
.has-dropdown .full-width-dropdown {
  display: block;
  /* keep in render tree for smoothness */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}

/* When "open" (aria-expanded="true") make it visible/clickable */
.has-dropdown>.nav-parent[aria-expanded="true"]+.full-width-dropdown,
.has-dropdown[aria-expanded="true"]>.full-width-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
}

/* === Off-canvas: fix Solutions row layout + arrow color, remove bullets === */

/* Keep link + chevron on ONE line */
#navOffCanvas .has-children>.row {
  display: flex;
  /* ensure flex row */
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: calc(100% - 5rem);
  margin: 0 auto;
  padding: .625rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  box-sizing: border-box;
}

/* Keep hover feel consistent with other items */
#navOffCanvas .has-children>.row:hover,
#navOffCanvas .has-children>.row:focus-within {
  background: rgba(0, 0, 0, .25);
}

/* Inside the row: let the link take the space; no extra offsets */
#navOffCanvas .has-children>.row>a {
  display: block;
  /* don't be a flex container */
  flex: 1 1 auto;
  /* take remaining space, but allow siblings */
  width: auto;
  /* override width:100% from base */
  max-width: none;
  /* override max-width calc(...) */
  margin: 0;
  /* override margin:auto */
  padding: 0;
  /* row supplies padding */
  border: 0;
}

#navOffCanvas .has-children>.row>a:hover,
#navOffCanvas .has-children>.row>a:focus-visible {
  background: transparent;
}

/* Chevron button stays on the same baseline */
#navOffCanvas .has-children>.row>.js-mobile-parent {
  flex: 0 0 auto;
  /* don't shrink or wrap */
  margin-left: .75rem;
  padding: .25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

#navOffCanvas .has-children>.row>.js-mobile-parent i {
  color: #fff;
}

#navOffCanvas .js-mobile-parent i {
  color: #fff;
  /* ensure white icon */
  transition: transform .2s ease, opacity .2s ease;
  opacity: .9;
}

#navOffCanvas .js-mobile-parent:hover,
#navOffCanvas .js-mobile-parent:focus-visible {
  background: rgba(255, 255, 255, .08);
  outline: 2px solid rgba(255, 255, 255, .45);
  outline-offset: 2px;
}

#navOffCanvas .js-mobile-parent[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Sub-items: no bullets, slight indent, link styles reused */
#navOffCanvas .nested {
  list-style: none;
  /* remove bullets */
  margin: .25rem 0 .5rem 0;
  padding-left: 2.25rem;
  /* subtle indent under parent */
}

#navOffCanvas .nested li {
  list-style: none;
}

/* belt & suspenders */
#navOffCanvas .nested a {
  max-width: none;
  margin: 0;
  /* inherit full width */
  padding: .5rem 2rem .5rem 0;
  /* align with indent above */
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

#navOffCanvas .nested li:last-child a {
  border-bottom: 0;
}

/* Mega list */
.mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.5rem 1rem;
}

.mega-list li a {
  display: block;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  background: rgba(255, 255, 255, .03);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.mega-list li a:hover,
.mega-list li a:focus-visible {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  transform: translateY(-1px);
}

.mega-list .title {
  display: block;
  font-weight: 700;
  color: #fff;
}

.mega-list .desc {
  display: block;
  font-size: .92rem;
  color: var(--muted);
  margin-top: .25rem;
}

/* Right-hand promo card inside dropdown */
.mega-cta.card {
  padding: 1.25rem;
  border-radius: var(--radius);
}

.mega-cta .stack {
  display: grid;
  gap: .5rem;
  margin-top: .5rem;
}


/* =============================================================
   04) MOBILE OFF-CANVAS NAVIGATION (Foundation)
   ============================================================= */
.off-canvas {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100vw;
  height: 100vh;
  background: #12181d;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translate3d(-100%, 0, 0);
  transition: transform .32s ease;
  -webkit-overflow-scrolling: touch;
  z-index: 8000;
}

.off-canvas.is-open {
  transform: translate3d(0, 0, 0);
}

.offcanvas-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  margin-top: .5rem;
}

.offcanvas-logo {
  max-height: 40px;
  display: block;
}

.close-button {
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  padding: .5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  color: var(--ink);
}

/* High-contrast close icon inside the dark off-canvas */
.off-canvas .close-button {
  color: #fff;
  /* or var(--offwhite) if you have it */
}

.off-canvas .close-button:hover,
.off-canvas .close-button:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  /* subtle hover target */
  border-radius: .5rem;
  outline: 2px solid rgba(255, 255, 255, .55);
  /* visible focus ring */
  outline-offset: 2px;
}

/* (Optional) make the × a bit crisper */
.off-canvas .close-button span {
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 4px rgba(0, 0, 0, .45);
}

/* Move the off-canvas close button inward so hover/focus isn't clipped */
.off-canvas .close-button {
  position: absolute;
  /* in case it's not already */
  inset-block-start: .75rem;
  /* = top */
  inset-inline-end: 3rem;
  /* = right; move it left by 1rem */
  z-index: 10;
  /* keep a comfortable tap target without changing the visual size too much */
  min-width: 44px;
  min-height: 44px;
  padding: .5rem;
}

/* Respect iOS safe area on notched devices (progressive enhancement) */
.off-canvas .close-button {
  inset-inline-end: 1rem;
}

/* fallback */
@supports (inset-inline-end: calc(1rem + env(safe-area-inset-right))) {
  .off-canvas .close-button {
    inset-inline-end: calc(2rem + env(safe-area-inset-right));
  }
}

/* Keep the high-contrast hover/focus we added earlier */
.off-canvas .close-button:hover,
.off-canvas .close-button:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-radius: .5rem;
  outline: 2px solid rgba(255, 255, 255, .55);
  outline-offset: 2px;
}

.offcanvas-content {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.offcanvas-buttons {
  flex-shrink: 0;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#navOffCanvas li {
  margin-bottom: .75rem;
}

#navOffCanvas a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: calc(100% - 5rem);
  margin: 0 auto;
  padding: .625rem 2rem;
  text-align: left;
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  position: relative;
  opacity: .9;
  transition: color .2s ease, background-color .2s ease, transform .25s ease, opacity .25s ease;
}

#navOffCanvas a:hover {
  color: #fff;
  background: rgba(0, 0, 0, .25);
  opacity: 1;
}

#navOffCanvas li.active>a,
#navOffCanvas li.is-active>a {
  color: #fff;
  font-weight: 700;
  background: rgba(255, 255, 255, .08);
  opacity: 1;
}

#navOffCanvas .nested a {
  display: block;
  width: 100%;
  max-width: calc(100% - 5rem);
  margin: 0 auto;
  padding: .625rem 2rem;
  text-align: left;
}

/* Overlay handling */
.js-off-canvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(254, 254, 254, .25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
  z-index: 7990;
}

.js-off-canvas-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

[data-off-canvas] {
  opacity: 0;
  pointer-events: none;
}

.js-off-canvas-loaded [data-off-canvas] {
  opacity: 1;
  pointer-events: auto;
}

/* =============================================================
   06) CARDS & CONTENT BLOCKS
   ============================================================= */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.card .eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
}

/* Service reveal animation hook */
.service-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}

.service-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.service-card-inner {
  background: #111a20;
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: box-shadow .25s ease, transform .25s ease;
}

.service-card-inner:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  transform: translateY(-4px);
}

/* =============================================================
   07) SECTIONS & IMAGERY
   ============================================================= */
.program-section {
  padding: 5em 1.5em;
  transition: background-color .5s ease-in-out;
}

.program-content {
  text-align: left;
  color: var(--ink);
}

.program-main-title {
  font-family: var(--font-head);
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem);
}

.program-subtitle,
.program-sub-subtitle,
.program-description,
.program-features {
  color: var(--ink);
}

.program-description {
  font-size: 1.125em;
  margin-bottom: 1.5em;
  line-height: 1.65;
}

.program-features {
  list-style: disc;
  padding-left: 1.75em;
  margin-bottom: 1.5em;
}

.program-features li {
  font-size: 1.05em;
  margin-bottom: 1.1em;
  line-height: 1.25;
}

.program-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding-top: 1em;
}

.section-image,
.section-image-smaller,
.section-image-rounded-left,
.section-image-rounded-right,
.section-image-rounded-all {
  width: 100%;
  height: auto;
  display: block;
}

.section-image {
  border-radius: .5em;
  margin: 0 auto;
  padding: .875em;
}

.section-image-smaller {
  width: 75%;
  margin: .5rem auto;
}

.section-image-rounded-left {
  border-radius: 1.5rem 0 0 1.5rem;
  overflow: hidden;
}

.section-image-rounded-right {
  border-radius: 0 1.5rem 1.5rem 0;
  overflow: hidden;
}

.section-image-rounded-all {
  border-radius: 1.5rem;
  overflow: hidden;
}

/* =============================================================
   08) FAQ (light card look on dark site)
   ============================================================= */
#faqAccordion>li {
  margin-bottom: .75rem;
  position: relative;
  background: #0f1419;
  border-radius: .5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
  transition: box-shadow .2s ease;
}

#faqAccordion>li:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}

#faqAccordion a {
  display: block;
  width: 100%;
  padding: .9rem 2rem;
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  transition: background-color .2s ease, color .2s ease;
}

#faqAccordion li:not(.active):not(.is-active)>a:hover {
  background: rgba(255, 255, 255, .06);
}

#faqAccordion li.active>a,
#faqAccordion li.is-active>a {
  background: rgba(255, 255, 255, .08);
  font-weight: 600;
}

#faqAccordion .accordion-arrow {
  margin-left: auto;
  font-size: 1rem;
  color: var(--muted);
  transition: transform .3s ease, color .2s ease;
}

#faqAccordion a:hover .accordion-arrow {
  color: var(--ink);
}

#faqAccordion li.active>a .accordion-arrow i,
#faqAccordion li.is-active>a .accordion-arrow i {
  transform: rotate(180deg);
  color: var(--ink);
}

#faqAccordion .accordion-content {
  display: none;
  color: var(--ink);
  padding: 1rem 2rem;
  border-top: 1px solid var(--line);
}

#faqAccordion li.active .accordion-content,
#faqAccordion li.is-active .accordion-content {
  display: block;
}

#faqAccordion .accordion-content a {
  color: var(--accent);
  text-decoration: underline;
}

#faqAccordion .accordion-content a:hover {
  filter: brightness(1.1);
}

/* =============================================================
   09) VIDEO EMBEDS
   ============================================================= */
.responsive-embed {
  position: relative;
  height: 0;
  margin-bottom: 1rem;
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
}

.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.brbc-video-wrapper {
  position: absolute;
  inset: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: .5em;
}

.video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.brbc-video-wrapper:hover .video-thumb-img {
  transform: scale(1.02);
}

/* =============================================================
   10) Z-INDEX / LAYERING (Reveal > Off-Canvas > Overlay > Content > CRT)
   ============================================================= */
.reveal-overlay,
.reveal {
  z-index: 9000;
}

.off-canvas.is-open {
  z-index: 8000;
}

.js-off-canvas-overlay {
  z-index: 7990;
}

#djHackerMode.hacker-mode.active {
  z-index: 7000;
}

.off-canvas-content,
body {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* =============================================================
   11) UTILITIES & ACCESSIBILITY
   ============================================================= */
.intro-kicker-home {
  font-size: .9rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .5rem;
}

.blinking {
  animation: blinkingText 1.2s infinite;
}

@keyframes blinkingText {
  0% {
    opacity: 1
  }

  50% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

ul.indented li,
ol.indented li {
  margin-left: 1em;
  color: var(--ink);
}

ul.more_space_between li,
ol.more_space_between li {
  margin-bottom: 1.5em;
}

ul.little_space_between li,
ol.little_space_between li {
  margin-bottom: .75em;
}

ul.no_space_between li,
ol.no_space_between li {
  margin-bottom: 0;
}

footer {
  padding: 2rem 0;
}

.footer-right-easter {
  text-align: right;
}

.footer-right-easter a {
  color: var(--muted);
  text-decoration: none;
}

.footer-right-easter a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Accessibility & motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* === Where We Started (retro link) === */
.where-we-started {
  font-family: "VT323", monospace;
  font-size: 1.05rem;
  color: #9AF68E;
  /* CRT green */
  background: rgba(154, 246, 142, .08);
  border: 1px solid rgba(154, 246, 142, .28);
  padding: .38rem .6rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  letter-spacing: .02em;
  text-decoration: none;
}

.where-we-started:hover {
  background: rgba(154, 246, 142, .12);
  text-decoration: none;
}

.where-we-started .cursor {
  line-height: 1;
}

/* === Header nav (matches include_header.php structure) === */
.header-container .main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  min-width: 0;
}

.header-container .nav-links {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-container .nav-links a {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  padding: .75rem .9rem;
  border-radius: 8px;
  transition: background-color .2s ease, color .2s ease;
}

.header-container .nav-links a:hover,
.header-container .nav-links a[aria-current="page"],
.header-container .nav-links li.is-active>a {
  background: rgba(255, 255, 255, .06);
}

/* Actions (right side) */
.header-container .nav-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Optional: tidy hamburger icon in header */
.header-container .hamburger i {
  font-size: 1.5rem;
  color: var(--ink);
  cursor: pointer;
}

.header-container .hamburger i:hover {
  color: var(--muted);
}

html,
body {
  overflow-x: hidden;
}

/* keep once in the file */
#dj-hacker .cursor {
  height: 1em;
}

.header-container {
  overflow-x: clip;
}

/* clips any 1–2px overhangs */
.header-spacer {
  height: var(--header-height);
  flex: 0 0 auto;
}

/* === Header: no spacing or scale changes on scroll === */
/* Keep constant vertical rhythm */
.header-container {
  padding-block: 14px;
  /* fixed */
  transition:
    background .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, opacity .35s ease;
  /* no padding/geometry transitions */
}

/* Don’t animate padding on links */
.header-container .nav-links a {
  padding: .75rem .9rem;
  /* fixed */
  transition: background-color .2s ease, color .2s ease;
  /* no padding transition */
}

/* On scroll: only the glass/backdrop & shadow change — no spacing */
.header-container.is-scrolled {
  background: rgba(10, 16, 22, .55);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

/* Keep link padding identical when scrolled */
.header-container.is-scrolled .nav-links a {
  padding: .75rem .9rem;
  /* override any earlier .65/.85 rules */
}

/* Never scale the logo */
.header-container .header_logo {
  transform: none !important;
}

.header-container.is-scrolled .header_logo {
  transform: none !important;
}

/* Optional: keep the glass “fade/sweep” without shifting layout */
.header-container::before {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .35s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1);
}

.header-container.is-scrolled::before {
  opacity: 1;
  transform: translateY(0);
}

.header-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}

.header-container.is-scrolled::after {
  animation: headerSweep 520ms cubic-bezier(.2, .65, .15, 1) 60ms forwards;
}

@keyframes headerSweep {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  10% {
    opacity: .9;
  }

  100% {
    transform: scaleX(1);
    opacity: .6;
  }
}

/* ---- Header readability + no opacity/spacing changes on scroll ---- */
.header-container,
.header-container .nav-links a,
.header-container .btn,
.header-container .button {
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.header-container {
  /* lock height/padding so it doesn't "shrink" on scroll */
  --header-height: 95px;
  height: var(--header-height);
  padding-block: 14px !important;
  transform: none !important;
  letter-spacing: normal !important;
}

.header-container .logo {
  opacity: 1 !important;
  filter: none !important;
  /* keep logo from darkening while text stays bright */
}

/* Ensure nav links/buttons look obviously clickable */
.nav-links a,
.header-container .btn,
.header-container .button {
  color: #fff;
  opacity: 0.92;
}

.nav-links a:hover,
.header-container .btn:hover,
.header-container .button:hover {
  opacity: 1;
}

/* ---- Remove any glow-on-scroll effect ---- */
.glow-on-scroll,
.scrolled .glow-on-scroll {
  text-shadow: none !important;
  filter: none !important;
}

/* ---- Terminal overlay should fully take over the screen ---- */
#hacker-terminal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* above header & everything */
  display: none;
  /* toggled via .terminal-open */
  background: #000;
  /* ensures nothing "bleeds" through */
  overflow: hidden;
}

body.terminal-open #hacker-terminal-overlay {
  display: block;
}

/* Hide header + disable background interactions when terminal is open */
body.terminal-open .header-container {
  visibility: hidden;
}

body.terminal-open .offcanvas,
body.terminal-open .mobile-nav,
body.terminal-open main,
body.terminal-open footer {
  pointer-events: none;
}

/* ---- Kill the stray/blinking "Where we started" caret during terminal ---- */
.wws-caret {
  animation: blink 1s steps(1) infinite;
}

body.terminal-open .wws-caret {
  animation: none !important;
  opacity: 0 !important;
}

/* If you’re using Foundation sticky, avoid layout jitter while sticking */
.sticky.is-stuck {
  will-change: auto;
}

/* ========== Grid equal heights ========== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  /* stretch items so cards in the same row are equal height */
}

.service-card {
  height: 100%;
}

/* make the grid item fill */
.service-card-inner {
  display: flex;
  flex-direction: column;
  /* lets CTA pin to bottom */
  min-height: 100%;
}

/* If you want a consistent feel across rows too, give a soft floor/ceiling: */
.service-card-inner {
  min-height: clamp(280px, 36vh, 420px);
}

/* Content that should grow to push CTA down */
.service-card .service-body {
  flex: 1;
}

/* ========== Artist/UX polish ========== */
:root {
  --card-bg: #0f1820;
  --card-border: #253642;
  --card-ink: #eef6fb;
  --card-ink-dim: #b7c9d6;
  --accent-1: #52dbc9;
  --accent-2: #5da3ff;
}

.service-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}

.service-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.service-card-inner {
  position: relative;
  /* for ::before accent line */
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)) var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.25rem;
  gap: 1rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 8px 24px rgba(0, 0, 0, .35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-card-inner::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  opacity: .6;
  pointer-events: none;
}

.service-card-inner:hover,
.service-card-inner:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 14px 32px rgba(0, 0, 0, .45);
  border-color: color-mix(in oklab, var(--card-border), var(--accent-2) 28%);
}

/* Icon chip (optional) */
.service-card .icon-chip {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* Readable title on dark */
.service-card h3,
.service-card .card-title {
  color: var(--card-ink);
  /* fallback solid color */
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  line-height: 1.2;
  margin: 0 0 .35rem;
  text-wrap: balance;
}




/* Subtle gradient ink when supported */
@supports (-webkit-background-clip: text) or (background-clip: text) {

  .service-card h3,
  .service-card .card-title {
    background: linear-gradient(180deg, #ffffff 0%, #ddecff 65%, #b8dbff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Body copy */
.service-card p,
.service-card .card-copy {
  color: var(--card-ink-dim);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 .75rem;
}

/* CTA pinned to bottom */
.service-card .card-cta {
  margin-top: auto;
}

.service-card .card-cta .button,
.service-card .card-cta .btn {
  border-radius: 10px;
  width: fit-content;
}

/* Accessibility */
.service-card-inner:focus-within {
  outline: 2px solid rgba(255, 255, 255, .4);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .service-card {
    transform: none !important;
  }

  .service-card-inner {
    transition: none;
  }
}

/* —— Foundation equal-height glue (ADD this) —— */
.services-grid>.cell {
  display: flex;
}

.services-grid>.cell>.service-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

/* If not already present, this lets the CTA pin to bottom */
.service-card .service-body {
  flex: 1;
}

/* ====== Subtle reveal + hover polish ====== */
.service-card {
  --reveal-delay: 0ms;
  /* set per-card via JS */
  transition-delay: var(--reveal-delay);
}

.service-card.visible {
  will-change: transform, opacity;
}

/* Hover lift already present; add gentle accent sweep + icon bob */
.service-card-inner::before {
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position .8s ease;
}

.service-card-inner:hover::before {
  background-position: 100% 50%;
}

.service-card .icon-chip {
  transition: transform .25s ease;
}

.service-card-inner:hover .icon-chip {
  transform: translateY(-2px);
}

/* Slightly stronger body contrast for readability on dark */
.service-card p,
.service-card .card-copy {
  color: #cfe0ea;
}

/* Make the whole card feel clickable without breaking semantics */
.service-card[tabindex="0"],
.service-card a:focus-visible~.service-card-inner,
.service-card-inner:focus-within {
  outline: 2px solid rgba(255, 255, 255, .35);
  outline-offset: 2px;
}

/* CTA micro cue: arrow nudge + gentle sheen */
.service-card .card-cta .button,
.service-card .card-cta .btn {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease;
}

.service-card .card-cta .button::after,
.service-card .card-cta .btn::after {
  content: "→";
  display: inline-block;
  margin-left: .4rem;
  transform: translateX(0);
  transition: transform .2s ease;
}

.service-card .card-cta .button:hover::after,
.service-card .card-cta .btn:hover::after {
  transform: translateX(4px);
}

.service-card .card-cta .button::before,
.service-card .card-cta .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 120px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .12), transparent 60%);
  opacity: 0;
  transition: opacity .2s ease;
}

.service-card .card-cta .button:hover::before,
.service-card .card-cta .btn:hover::before {
  opacity: 1;
}

/* Cursor hint only when card contains a link */
.service-card.has-link .service-card-inner {
  cursor: pointer;
}

/* Respect motion prefs */
@media (prefers-reduced-motion: reduce) {

  .service-card,
  .service-card * {
    transition: none !important;
  }
}

/* Kill legacy display:none for service cards */
.service-card {
  display: block;
}

/* Make equal-height work on your .grid-3 too (not only .services-grid) */
.grid-3>* {
  display: flex;
}

.grid-3>*>.service-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

/* CTA micro-cue should also work with .btn-refill and Foundation .button */
.service-card .card-cta a,
.service-card a.button,
.service-card a.btn,
.service-card a.btn-refill {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease;
}

.service-card .card-cta a::after,
.service-card a.button::after,
.service-card a.btn::after,
.service-card a.btn-refill::after {
  content: "→";
  display: inline-block;
  margin-left: .4rem;
  transform: translateX(0);
  transition: transform .2s ease;
}

.service-card .card-cta a:hover::after,
.service-card a.button:hover::after,
.service-card a.btn:hover::after,
.service-card a.btn-refill:hover::after {
  transform: translateX(4px);
}

.service-card .card-cta a::before,
.service-card a.button::before,
.service-card a.btn::before,
.service-card a.btn-refill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 120px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .12), transparent 60%);
  opacity: 0;
  transition: opacity .2s ease;
}

.service-card .card-cta a:hover::before,
.service-card a.button:hover::before,
.service-card a.btn:hover::before,
.service-card a.btn-refill:hover::before {
  opacity: 1;
}

/* Whole-card affordance when it contains a link */
.service-card.has-link .service-card-inner {
  cursor: pointer;
}

/* Reveal baseline (already present) */
.service-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
  --reveal-delay: 0ms;
  transition-delay: var(--reveal-delay);
}

/* Final state: either our .visible OR AOS's .aos-animate */
.service-card.visible,
.service-card.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Scope to this section only */
#solutions .service-col {
  display: flex;
  /* lets the card stretch to fill the column */
}

#solutions .card.service-card {
  display: flex;
  flex-direction: column;
  /* stack content top→bottom */
  height: 100%;
  /* fill the column so CTAs align */
}

#solutions .card.service-card .card-cta {
  margin-top: auto;
  /* pins the CTA block to the bottom */
}

/* (optional) keep the CTA button to its content width */
#solutions .card.service-card .card-cta .btn {
  align-self: flex-start;
}

/* Footer structure */
.site-footer {
  color: var(--ink);
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .08);
}

.site-footer a {
  color: var(--ink);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-cta {
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}

.footer-cta__title {
  margin: 0 0 .25rem;
  font-size: clamp(1.25rem, 1rem + .8vw, 1.8rem);
}

.footer-cta__copy {
  margin: 0 0 .75rem;
  color: var(--muted);
}

.footer-main {
  padding: 2rem 0;
}

.footer-head {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: #fff;
}

.footer-links li {
  margin: .25rem 0;
}

.footer-brand {
  font-weight: 800;
  margin-bottom: .25rem;
}

.footer-nap a {
  color: var(--ink);
}

.footer-trust small {
  color: var(--muted);
}

.footer-social a {
  font-size: 1.1rem;
  opacity: .9;
}

.footer-social a:hover {
  opacity: 1;
}

.footer-bottom {
  padding-top: 1rem;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 1rem;
  border-top: 1px solid var(--line);
}

.back-to-top i {
  margin-right: .55rem;
  margin-left: 1.25rem;
}

@media (max-width: 640px) {
  .footer-right-easter {
    text-align: left;
    margin-top: .75rem;
  }
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ================= LOGO MARQUEE (RAF-driven) ================= */
.logo-marquee-wrap {
  position: relative;
  isolation: isolate;
  margin: 1.25rem 0 0;
}

.logo-marquee {
  /* Tunables */
  --marquee-h: 56px;
  /* logo band height */
  --marquee-gap: clamp(20px, 2.4vw, 40px);
  --marquee-pps: 24;
  /* pixels per second (lower = slower) */

  position: relative;
  height: var(--marquee-h);
  overflow: hidden;
  background: transparent;

  /* wider edge fade — hides seam elegantly */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
}

.logo-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--marquee-gap);
  height: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.logo-track>* {
  flex: 0 0 auto;
}

.logo-item {
  display: grid;
  place-items: center;
  height: 100%;
  opacity: .92;
}

.logo-item img {
  display: block;
  height: calc(var(--marquee-h) - 14px);
  width: auto;
  filter: grayscale(100%) contrast(1.05) brightness(1.06);
  opacity: .92;
}

/* Don’t pause on hover — purposeful ambient motion */
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track {}

/* Reduced motion: disable RAF tick; allow manual scroll */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Responsive */
@media (max-width: 640px) {
  .logo-marquee {
    --marquee-h: 48px;
  }
}

/* ===== Solutions dropdown (full-width panel) ===== */
/* Scope by aria-label so you don't need new classes */
.full-width-dropdown[aria-label="Web Solutions"] {
  /* Panel look */
  background: rgba(12, 20, 24, .88);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  backdrop-filter: saturate(120%) blur(8px);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  color: #E9F2F7;

  /* Padding inside the panel */
  padding-block: 14px;
}

/* Tighten the container spacing inside the panel */
.full-width-dropdown[aria-label="Web Solutions"] .grid-container {
  padding-left: 16px;
  padding-right: 16px;
}

/* Left side list → responsive grid with equal tiles */
.full-width-dropdown[aria-label="Web Solutions"] .mega-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

/* Equal-height tile */
.full-width-dropdown[aria-label="Web Solutions"] .mega-list>li {
  height: 100%;
}

.full-width-dropdown[aria-label="Web Solutions"] .mega-list>li>a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;

  height: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: inherit;
  text-decoration: none;

  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.full-width-dropdown[aria-label="Web Solutions"] .mega-list>li>a:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  transform: translateY(-1px);
}

.full-width-dropdown[aria-label="Web Solutions"] .mega-list>li>a:focus-visible {
  outline: 2px solid #7CC6FF;
  outline-offset: 2px;
}

/* Titles + descriptions */
.full-width-dropdown[aria-label="Web Solutions"] .mega-list .title {
  font-weight: 600;
  color: #fff;
  /* crisp on dark */
  line-height: 1.2;
}

.full-width-dropdown[aria-label="Web Solutions"] .mega-list .desc {
  font-size: .9rem;
  line-height: 1.35;
  color: rgba(233, 242, 247, .85);
}

/* Right-side CTA card */
.full-width-dropdown[aria-label="Web Solutions"] .mega-cta.card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  color: #E9F2F7;
}

.full-width-dropdown[aria-label="Web Solutions"] .mega-cta .eyebrow {
  text-transform: none;
  letter-spacing: .02em;
  opacity: .85;
}

.full-width-dropdown[aria-label="Web Solutions"] .mega-cta h3 {
  margin: .25rem 0 .35rem;
  font-size: 1.15rem;
  line-height: 1.2;
  color: #fff;
  /* fix “Pick the right path” contrast */
}

.full-width-dropdown[aria-label="Web Solutions"] .mega-cta .muted {
  opacity: .85;
}

/* Buttons inside the CTA stack */
.full-width-dropdown[aria-label="Web Solutions"] .mega-cta .stack .btn {
  width: 100%;
}

/* Layout polish on medium/large screens (Foundation grid-aware) */
@media (min-width: 64em) {

  /* large */
  .full-width-dropdown[aria-label="Web Solutions"] .mega-list {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 14px;
  }
}

/* Collapse to single column on narrow screens */
@media (max-width: 630px) {
  .full-width-dropdown[aria-label="Web Solutions"] .mega-list {
    grid-template-columns: 1fr;
  }
}

/* Solutions panel: make tiles stack tightly and consistently */
.full-width-dropdown[aria-label="Web Solutions"] .mega-list>li>a {
  justify-content: flex-start;
  /* was space-between */
  align-items: flex-start;
  /* prevents stretch */
  gap: 6px;
  /* controls the space between title/desc */
}

/* Ensure spans behave like blocks (no stray inline spacing quirks) */
.full-width-dropdown[aria-label="Web Solutions"] .mega-list .title,
.full-width-dropdown[aria-label="Web Solutions"] .mega-list .desc {
  display: block;
  margin: 0;
  /* just in case a reset adds margins */
}

/* (Optional) Slightly tighter title line-height for multi-line titles */
.full-width-dropdown[aria-label="Web Solutions"] .mega-list .title {
  line-height: 1.15;
  /* was ~1.2; tweak to taste */
}

/* =============================================================
   05) BUTTONS — CLEAN, CONFIDENT SYSTEM
   Unifies: .btn--primary (yellow) · .btn-refill · .offcanvas-btn · .cta-pill · .btn--ghost
   ============================================================= */

/* Base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-weight: 600;
  line-height: 1;
}

/* Tunables */
:root {
  --accent-ink: #0f1f26;
  --accent-stroke: #9f7420;
  --accent-stroke-hover: #87621b;
  --accent-hover: #e0a433;
  --accent-active: #cc922d;
  --accent-shadow: 0 4px 14px rgba(243, 179, 61, .28);
  --accent-shadow-hover: 0 6px 18px rgba(243, 179, 61, .34);
}

@supports (color: color-mix(in oklab, white 0%, black 0%)) {
  :root {
    --accent-stroke: color-mix(in oklab, var(--accent) 72%, black 28%);
    --accent-stroke-hover: color-mix(in oklab, var(--accent) 62%, black 38%);
    --accent-hover: color-mix(in oklab, var(--accent) 90%, black 10%);
    --accent-active: color-mix(in oklab, var(--accent) 82%, black 18%);
  }
}

/* Primary (yellow) — unify all yellow variants */
.btn--primary,
.site-footer .btn--primary,
.btn-refill,
.offcanvas-btn,
.cta-pill {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent-stroke) !important;
  box-shadow: var(--accent-shadow);
  text-shadow: none;
  transform: none;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

.btn--primary:hover,
.site-footer .btn--primary:hover,
.btn-refill:hover,
.offcanvas-btn:hover,
.cta-pill:hover {
  background: var(--accent-hover) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-stroke-hover) !important;
  box-shadow: var(--accent-shadow-hover);
  text-decoration: none;
  filter: none;
  transform: none;
}

.btn--primary:active,
.site-footer .btn--primary:active,
.btn-refill:active,
.offcanvas-btn:active,
.cta-pill:active {
  background: var(--accent-active) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent-stroke-hover) !important;
  box-shadow: 0 2px 10px rgba(243, 179, 61, .25);
}

.btn--primary:visited,
.site-footer .btn--primary:visited,
.btn-refill:visited,
.offcanvas-btn:visited,
.cta-pill:visited {
  color: var(--accent-ink) !important;
}

.btn--primary:focus-visible,
.site-footer .btn--primary:focus-visible,
.btn-refill:focus-visible,
.offcanvas-btn:focus-visible,
.cta-pill:focus-visible {
  outline: 2px solid rgba(15, 31, 38, .9);
  outline-offset: 2px;
}

.btn--primary svg,
.btn--primary .icon,
.site-footer .btn--primary svg,
.site-footer .btn--primary .icon,
.btn-refill svg,
.btn-refill .icon,
.offcanvas-btn svg,
.offcanvas-btn .icon,
.cta-pill svg,
.cta-pill .icon {
  fill: currentColor;
}

/* Ghost (secondary on dark) */
.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid var(--line);
  box-shadow: none;
  text-shadow: none;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  text-decoration: none;
}

.btn--ghost:active {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
}

.btn--ghost:visited {
  color: #fff;
}

.btn--ghost:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .65);
  outline-offset: 2px;
}

/* Header nav ghost override (keep it consistent) */
.header-container .nav-actions .btn--ghost:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
}

/* Disabled (any button) */
.btn--primary[disabled],
.btn-refill[disabled],
.offcanvas-btn[disabled],
.cta-pill[disabled],
.btn--ghost[disabled] {
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .btn,
  .button,
  .btn--primary,
  .btn--ghost,
  .btn-refill,
  .offcanvas-btn,
  .cta-pill {
    transition: none !important;
  }
}

/* Equal-height cards per row, without affecting heading/intro cells */
#case .grid-x,
#approach .grid-x,
#capabilities .grid-x {
  align-items: stretch;
  /* Foundation row stretches columns */
}

#case .grid-x>.cell>.card,
#approach .grid-x>.cell>.card,
#capabilities .grid-x>.cell>.card {
  height: 100%;
  /* card fills the stretched column */
  display: flex;
  /* let content stack… */
  flex-direction: column;
  /* …so CTAs can pin to bottom */
}

/* Optional: pin any CTA block to the bottom of the card */
#case .card .card-cta,
#approach .card .card-cta,
#capabilities .card .card-cta {
  margin-top: auto;
}

.artifact_bkg {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  height: 96px;
  overflow: hidden;
}

.artifact_bkg_white {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
  margin-bottom: .750em;
}

.bkg_white {
  background: rgba(255, 255, 255, 1);
}

/* === Featured Case, How We Work, Capabilities — match service-card styling === */
/* Scope to the three sections so we don’t affect cards elsewhere */
#case .card .eyebrow,
#how .card .eyebrow,
#capabilities .card .eyebrow {
  display: inline-block;
  padding: .15rem .5rem;
  margin-bottom: .875rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #06161e;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}

/* Readable card titles on dark, same rhythm as .service-card h3 */
#case .card h3,
#how .card h3,
#capabilities .card h3 {
  color: var(--card-ink);
  /* fallback solid color */
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  line-height: 1.2;
  margin: 0 0 .35rem;
  text-wrap: balance;
}

/* Subtle gradient ink when supported — mirrors the service card treatment */
@supports (-webkit-background-clip: text) or (background-clip: text) {

  #case .card h3,
  #how .card h3,
  #capabilities .card h3 {
    background: linear-gradient(180deg, #ffffff 0%, #ddecff 65%, #b8dbff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.chip {
  display: inline-block;
  padding: .18rem .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1.1;
  color: var(--ink);
  background: rgba(255, 255, 255, .06);
}

.chip--edu {
  /* subtle emphasis for learning tags */
  background: linear-gradient(90deg, rgba(82, 219, 201, .12), rgba(93, 163, 255, .12));
  border-color: rgba(255, 255, 255, .16);
}

#case .card h3,
#approach .card h3,
#case .card h3,
#approach .card h3,
#capabilities .card h3,
#capabilities-pharmacy .card h3 {
  color: var(--card-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  line-height: 1.2;
  margin: 0 0 .35rem;
  text-wrap: balance;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {

  #case .card h3,
  #approach .card h3,
  #case .card h3,
  #approach .card h3,
  #capabilities .card h3,
  #capabilities-pharmacy .card h3 {
    background: linear-gradient(180deg, #ffffff 0%, #ddecff 65%, #b8dbff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* === Equal-height cards inside Foundation grid for these sections === */
/* Neutralize previous equal-height rule on cells */
#approach .grid-x>.cell,
#capabilities .grid-x>.cell {
  display: block;
  /* Foundation will still stretch cells by default */
}

#approach .grid-x>.cell>.card,
#capabilities .grid-x>.cell>.card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

/* START: Silica gallery polish */
.silica-gallery-modal {
  max-width: 1040px;
  background: #0b1217;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.silica-nav {
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: .25rem .5rem;
  font-size: 1.6rem;
  line-height: 1;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  cursor: pointer;
}

.silica-nav:hover {
  background: rgba(255, 255, 255, .18);
}

.artifact_bkg_white {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .5rem;
}

.artifact_bkg_white img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.artifact_bkg {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b1217;
}


/* END: Silica gallery polish */

#case .card .eyebrow,
#approach .card .eyebrow,
#capabilities .card .eyebrow,
.service-card .eyebrow {
  display: inline-block;
  padding: .18rem .55rem;
  margin-bottom: .875rem;

  /* more rugged shape */
  border-radius: 6px;

  /* compact, decisive type */
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;

  /* high contrast on dark */
  color: var(--muted);

  /* “steel tag” look: subtle fill + hairline border */
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--card-border, var(--line));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}

/* Optional variants you can apply via class if needed */
.eyebrow--outline {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--card-border, var(--line));
}

.eyebrow--amber {
  background: var(--accent);
  /* Construction Amber */
  color: #111;
  /* keeps it readable */
  border: 1px solid color-mix(in oklab, var(--accent) 70%, #000 30%);
}

/* END replace eyebrow chips (industrial) */

/* START eyebrow sizing tune */
#case .card .eyebrow,
#approach .card .eyebrow,
#capabilities .card .eyebrow,
.service-card .eyebrow {
  /* sizing: subtle on desktop, a touch larger on mobile */
  font-size: clamp(0.72rem, 0.68rem + 0.20vw, 0.85rem);
  line-height: 1.1;
  letter-spacing: .06em;
  /* keeps the purposeful look */

  /* padding scales a hair to match the size increase */
  padding: .2rem .6rem;
  /* was .18/.55 */
}

/* END eyebrow sizing tune */
/* START optional: section-header eyebrow */
.section-header .eyebrow {
  font-size: clamp(0.80rem, 0.74rem + 0.28vw, 0.95rem);
  padding: .22rem .65rem;
}

/* END optional: section-header eyebrow */

/* ==== START: C-inspired service card skin (no dropdown) ==== */
.card.service-card {
  position: relative;
  overflow: hidden;
  /* Subtle blue/steel gradients, glassy look */
  background:
    radial-gradient(circle at 70% 30%, rgba(100, 181, 246, .12) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(33, 150, 243, .08) 0%, transparent 50%),
    linear-gradient(135deg, rgba(30, 39, 56, .6) 0%, rgba(42, 52, 65, .4) 100%);
  border: 1px solid rgba(100, 181, 246, .15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.card.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(100, 181, 246, .05) 0%,
      rgba(33, 150, 243, .03) 50%,
      rgba(100, 181, 246, .05) 100%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}

.card.service-card:hover::before {
  opacity: 1;
}

/* Keep content above overlays */
.card.service-card>* {
  position: relative;
  z-index: 1;
}

/* Eyebrow pill already defined for .service-card; this just ensures consistency */
/*.card.service-card .eyebrow{
  display:inline-block; padding:.15rem .5rem; margin-bottom:.875rem;
  border-radius:999px; font-size:.75rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#06161e;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}*/

/* Titles: bright, legible on dark */
.card.service-card h3 {
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  line-height: 1.2;
  margin: 0 0 .35rem;
  color: #e6f1ff;
}

/* Body copy: slightly higher contrast on dark */
.card.service-card p {
  color: #cfe0ea;
}

/* CTA micro-cue already wired in your global service-card rules */
@media (prefers-reduced-motion: reduce) {

  .card.service-card,
  .card.service-card * {
    transition: none !important;
  }
}

/* ==== END: C-inspired service card skin (no dropdown) ==== */

/* =============================================================
   SOLUTIONS PAGE (solutions.php)
   ============================================================= */
.solutions-hero {
  padding-top: 3.25rem;
}

.solutions-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.solutions-pill {
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
  font-size: .9rem;
  font-weight: 600;
}

.solutions-hero-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)) #0f1820;
}

.solutions-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.solutions-kpi {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .75rem;
  background: rgba(255, 255, 255, .03);
}

/* Service card grid spacing */
.service-col {
  margin-bottom: 1.5rem;
}

.service-body .subtle-translation {
  display: block;
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--muted);
  font-style: italic;
}

/* Solutions KPI text - ensure readable on dark background */
.solutions-kpi .bold {
  color: var(--text-light, #f4f4f4);
}

/* Service cards - not fully clickable */
.service-card {
  cursor: default;
}

.service-card .card-cta a {
  cursor: pointer;
}

/* ============================================
   FAQ Accordion - Premium Styling
   ============================================ */
.faq-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

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

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  background: transparent;
  border: none;
  color: var(--text-light, #f4f4f4);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease;
}

.faq-question:hover {
  color: var(--accent, #f5a623);
}

.faq-question .faq-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: transform .3s ease, background .2s ease;
}

.faq-item.is-open .faq-question .faq-icon {
  transform: rotate(180deg);
  background: var(--accent, #f5a623);
  color: #111;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 0 0 0;
}

.faq-item.is-open .faq-answer {
  max-height: 300px;
  padding: 0 0 1.25rem 0;
}

.faq-answer p {
  color: var(--muted, #a0a0a0);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Legacy accordion-item support for faq-accordion */
/* Independent FAQ Styles */
.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

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

.faq-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.25rem 1rem;
  color: var(--text-light, #f4f4f4) !important;
  background: transparent !important;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
  border: none !important;
}

.faq-trigger:hover,
.faq-trigger:focus {
  color: var(--accent, #f5a623) !important;
  background: transparent !important;
  text-decoration: none;
}

.faq-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: transform .3s ease, background .2s ease;
}

.faq-trigger:hover .faq-icon,
.faq-trigger:focus .faq-icon {
  background: rgba(51, 255, 51, 0.15);
  color: #33ff33;
}

.faq-item.is-active .faq-icon {
  transform: rotate(180deg);
  background: #33ff33;
  /* Apple II green */
  color: #111;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0;
}

.faq-item.is-active .faq-answer {
  max-height: 500px;
  padding: 0 1rem 1.25rem 1rem;
}

.faq-answer p {
  color: var(--muted, #a0a0a0);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* =============================================================
   SOLUTIONS PAGE POLISH (Visual Refinements)
   ============================================================= */

/* 1. SERVICE CARDS: Flexbox layout with bottom-aligned buttons
   ------------------------------------------------------------ */
.card.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Content stays at top - no flex-grow */
.card.service-card .service-body,
.card.service-card ul {
  flex: 0 0 auto;
}

/* Only the CTA pushes to bottom */
.card.service-card .card-cta {
  margin-top: auto;
  padding-top: 1rem;
}

/* 2. DELIVERY CARDS: Equal height via CSS Grid
   ------------------------------------------------------------ */
#delivery .grid-x {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

#delivery .cell {
  width: 100%;
  max-width: none;
}

#delivery .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#delivery .card p {
  flex: 1 1 auto;
}

/* 3. REDUCED BODY TEXT BRIGHTNESS
   ------------------------------------------------------------ */
.card.service-card .service-body,
.card.service-card p:not(.eyebrow) {
  color: var(--muted, #b0bec5);
  font-size: 0.95rem;
  margin-bottom: 0.25rem !important;
  /* Tighter spacing before bullets */
}

.card.service-card ul {
  margin-top: 0.75rem !important;
  /* Comfortable spacing from body text */
  margin-bottom: 0.75rem !important;
  padding-left: 1.25rem;
}

.card.service-card ul li {
  color: var(--muted, #b0bec5);
  font-size: 0.92rem;
}

/* Slightly more breathing room between list items */
.card.service-card ul.little_space_between li {
  margin-bottom: 0.5rem;
}

/* 4. RETRO EYEBROW LABELS (Monospace Terminal Style)
   All card eyebrows get the retro green treatment
   ------------------------------------------------------------ */
.card .eyebrow {
  font-family: var(--font-code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #33ff33;
  /* Classic Apple II / CRT monitor green */
  opacity: 0.9;
}

/* Subtle terminal prompt prefix */
.card .eyebrow::before {
  content: "> ";
  opacity: 0.6;
}

/* #case section eyebrows (Silica Control Tool, Preview) - override specificity */
#case .card .eyebrow {
  font-family: var(--font-code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #33ff33;
  opacity: 0.9;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* Delivery card eyebrow special styling */
#delivery .eyebrow {
  background: rgba(51, 255, 51, 0.1);
  /* Match the green tint */
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* Anchor link offset for sticky header on solutions.php */
#workflows,
#portals,
#websites {
  scroll-margin-top: calc(var(--header-height, 96px) + 120px);
}

/* 5. CARD CTA ARROW: Green "go" effect on hover
   ------------------------------------------------------------ */
.card-cta .btn::after {
  content: " →";
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}

.card-cta .btn:hover::after {
  color: #33ff33;
  /* Apple II green = "go" */
  transform: translateX(3px);
}

/* =============================================================
   SOLUTIONS PAGE VISUAL POLISH — Feb 2026
   ============================================================= */

/* 1. HERO: Subtle radial glow behind headline
   ------------------------------------------------------------ */
.solutions-hero {
  position: relative;
  overflow: hidden;
}

.solutions-hero::before {
  content: "";
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 450px;
  background: radial-gradient(ellipse, rgba(51, 255, 51, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.solutions-hero>.grid-container {
  position: relative;
  z-index: 1;
}

/* 2. PILLS: Green-tinted glass effect
   ------------------------------------------------------------ */
.solutions-pill {
  border: 1px solid rgba(51, 255, 51, 0.22);
  background: rgba(51, 255, 51, 0.05);
  box-shadow: 0 0 12px rgba(51, 255, 51, 0.04);
  color: rgba(255, 255, 255, 0.88);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.solutions-pill:hover {
  border-color: rgba(51, 255, 51, 0.4);
  background: rgba(51, 255, 51, 0.1);
  box-shadow: 0 0 16px rgba(51, 255, 51, 0.08);
}

/* 3. SERVICE CARDS: Green left-border accent on hover + icon styling
   ------------------------------------------------------------ */
.card.service-card {
  border-left: 2px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.card.service-card:hover {
  border-left-color: #33ff33;
  box-shadow: -2px 0 12px rgba(51, 255, 51, 0.08);
}

.service-card .service-icon {
  color: #33ff33;
  font-size: 1.15rem;
  margin-right: 0.35rem;
  opacity: 0.85;
  transition: opacity .25s ease;
}

/* Hide the "> " prefix when a service-icon is present */
.eyebrow:has(.service-icon)::before {
  display: none;
}

/* More space between eyebrow and card title */
.card.service-card .eyebrow {
  margin-bottom: 1.1rem;
}

.card.service-card:hover .service-icon {
  opacity: 1;
}


/* 4. AUDIENCE CARDS: Left-border accent bar instead of full card
   ------------------------------------------------------------ */
.card.audience-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: none;
  border-left: 3px solid rgba(51, 255, 51, 0.3);
  border-radius: 0 8px 8px 0;
  padding: 1.5rem 1.75rem;
  transition: border-left-color .25s ease, background .25s ease;
}

.card.audience-card:hover {
  border-left-color: #33ff33;
  background: rgba(51, 255, 51, 0.03);
}

/* Visual Hierarchy: Layer 1 (Bright) */
.card.audience-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
  color: #fff;
}

.card.audience-card strong,
.card.audience-card b {
  color: #fff;
}

/* Visual Hierarchy: Layer 2 (Muted/70%) */
.card.audience-card p,
.card.audience-card li {
  color: rgba(255, 255, 255, 0.7);
}

/* 5. PROCESS SECTION: More vertical breathing room
   ------------------------------------------------------------ */
#delivery.labs-process-section {
  padding-top: 5rem;
  padding-bottom: 4rem;
  margin-top: 2rem;
}

/* ────────────────────────────────────────────────────────────────
   ANIMATED DIVIDER — Hero → Services transition
   ------------------------------------------------------------ */
.solutions-divider {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}

.solutions-divider__line {
  width: 100%;
  max-width: 1200px;
  height: 2px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(20, 80, 20, 0.15) 15%,
      rgba(20, 80, 20, 0.8) 50%,
      rgba(20, 80, 20, 0.15) 85%,
      transparent 100%);
  transform: scaleX(0);
  animation: divider-sweep 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(20, 80, 20, 0.3);
}

/* Traveling glow shimmer - Removed as per feedback */
/* .solutions-divider__line::after { ... } */

@keyframes divider-sweep {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes divider-shimmer {
  0% {
    left: -40%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

/* =============================================================
   MOBILE NAV BUTTON POLISH (Added 2026-02-13)
   ============================================================= */

/* Reusable Premium Amber Style */
.btn-premium-amber {
  background: linear-gradient(135deg, #F3B33D 0%, #E0A433 100%) !important;
  color: #0F1F26 !important;
  /* Dark ink for contrast */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px;
  font-weight: 700;
  /* text-transform: uppercase; removed per user request */
  box-shadow: 0 4px 15px rgba(243, 179, 61, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.btn-premium-amber:hover,
.btn-premium-amber:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(243, 179, 61, 0.5);
  filter: brightness(1.1);
  text-decoration: none !important;
}

.btn-premium-amber:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(243, 179, 61, 0.3);
}

/* Subtle shine effect */
.btn-premium-amber::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.25),
      transparent);
  transform: skewX(-20deg);
  transition: all 0.5s;
}

.btn-premium-amber:hover::after {
  left: 150%;
  transition: all 0.75s ease-in-out;
}

/* Mobile Nav Specific Layout overrides */
.offcanvas-btn.pay {
  /* Inherit visual styles from .btn-premium-amber via HTML class OR extend here */
  /* For now, we will duplicate/share the styles by adding the class in HTML or using comma separated selectors if we could.
     Since we can't easily change previous HTML without re-doing it, let's just make .offcanvas-btn.pay behave like .btn-premium-amber
     plus its specific layout needs. */

  /* Reset/Layout specific to offcanvas */
  padding: 1rem 1.5rem;
  width: 100%;
}

/* Apply the shared styles to .offcanvas-btn.pay as well, in case we don't update HTML class there */
.offcanvas-btn.pay {
  background: linear-gradient(135deg, #F3B33D 0%, #E0A433 100%) !important;
  color: #0F1F26 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px;
  font-weight: 700;
  /* text-transform: uppercase; removed */
  box-shadow: 0 4px 15px rgba(243, 179, 61, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none !important;
}

.offcanvas-btn.pay:hover,
.offcanvas-btn.pay:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(243, 179, 61, 0.5);
  filter: brightness(1.1);
  text-decoration: none !important;
}

.offcanvas-btn.pay:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(243, 179, 61, 0.3);
}

.offcanvas-btn.pay::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.25),
      transparent);
  transform: skewX(-20deg);
  transition: all 0.5s;
}

.offcanvas-btn.pay:hover::after {
  left: 150%;
  transition: all 0.75s ease-in-out;
}