/* OVERRIDES_V1 - force white/bold for Directions pill titles */
.pills .pill-card > strong,
.pills .pill-card strong{
  color: #ffffff !important;
  font-weight: 700 !important;
  display: block;
  margin-bottom: 6px;
}

/* Enlarged logo */
.header .logo img { height: 70px !important; }

/* OVERRIDES_V2 - Header brand logo sizing & spacing */
.brand img{
  height: 30px !important;
  width: 30px !important;
  display: block;
}
@media (min-width: 768px){
  .brand img{ height: 34px !important; width: 34px !important; }
}
.brand{ gap: 12px !important; }

/* OVERRIDES_V3 - Enlarged logo for visibility */
.brand img {
  height: 38px !important;
  width: auto !important;
  display: block;
}
@media (min-width: 768px) {
  .brand img {
    height: 44px !important;
  }
}
.brand {
  gap: 14px !important;
}
.brand span {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/* OVERRIDES_V4 - Only big logo in header */
.brand span {
  display: none !important;
}
.brand img {
  height: 48px !important;
  width: auto !important;
  display: block;
}
@media (min-width: 768px) {
  .brand img {
    height: 56px !important;
  }
}
.brand {
  gap: 0 !important;
}

/* OVERRIDES_V5 - Big logo only */
.brand img {
  height: 64px !important;
  width: auto !important;
  display: block;
}
@media (min-width: 768px) {
  .brand img {
    height: 80px !important;
  }
}
.brand {
  gap: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* OVERRIDES_V5 - Big logo only */
.brand img {
  height: 64px !important;
  width: auto !important;
  display: block;
}
@media (min-width: 768px) {
  .brand img {
    height: 84px !important;
  }
}
.brand {
  gap: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* OVERRIDES_V6 - Extra large logo */
.brand img {
  height: 84px !important;
  width: auto !important;
  display: block;
}
@media (min-width: 768px) {
  .brand img {
    height: 112px !important;
  }
}
.brand {
  gap: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* OVERRIDES_V7 - Use SVG and make it large */
.brand img{
  height: 96px !important;
  width: auto !important;
  display: block;
}
@media (min-width: 768px){
  .brand img{ height: 128px !important; }
}
.topbar{ padding-top: 8px !important; padding-bottom: 8px !important; }

/* OVERRIDES_V8 - Use full wordmark */
.brand img{
  height: 110px !important;
  width: auto !important;
  display: block;
}
@media (min-width: 768px){
  .brand img{ height: 132px !important; }
}

/* OVERRIDES_V9 - Adjust wordmark proportions */
.brand img{
  height: 100px !important;
  width: auto !important;
  display: block;
}
@media (min-width: 768px){
  .brand img{ height: 120px !important; }
}
.brand{ gap: 0 !important; padding-top: 6px !important; padding-bottom: 6px !important; }

/* OVERRIDES_V9 - Lighter wordmark tone */
.brand img{ height: 132px !important; width: auto !important; display:block; }
@media (min-width: 768px){ .brand img{ height: 148px !important; } }
\n/* OVERRIDES_V10 - D-style full logo sizing */
.brand img{
  height: 120px !important;
  width: auto !important;
  display: block;
}
@media (min-width: 1024px){
  .brand img{ height: 150px !important; }
}
.topbar{ padding-top: 8px !important; padding-bottom: 8px !important; }\n\n/* OVERRIDES_V11 - D logo no-white sizing */
.brand img{ height: 128px !important; width: auto !important; display:block; }
@media (min-width: 1200px){ .brand img{ height: 156px !important; } }\n\n/* OVERRIDES_V12 - refined D logo sizing */
.brand img{ height: 140px !important; width: auto !important; display:block; }
@media (min-width: 1280px){ .brand img{ height: 168px !important; } }\n
/* OVERRIDES_V13 - Brighter, highlighted hero title */
.hero h1{
  color: #ffffff !important;
  text-shadow: 0 6px 30px rgba(80,140,255,.35), 0 2px 10px rgba(0,0,0,.35);
  letter-spacing: .3px;
}

/* Optional soft gradient fill for more 'pop' on WebKit */
@supports (-webkit-background-clip:text){
  .hero h1{
    background: linear-gradient(90deg, #ffffff 0%, #e8f0ff 40%, #bfd6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Gradient accent line under h1 */
.hero h1::after{
  content: "";
  display: block;
  width: clamp(120px, 18vw, 220px);
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #9A1AC8, #164AEF);
  opacity: .85;
}

/* FINAL - hero bright without underline */
.hero h1::after{ display: none !important; }

/* OVERRIDES_V14 - Make hero H1 as bright as section titles */
.hero h1{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: 0 4px 22px rgba(0,0,0,.36), 0 2px 10px rgba(0,0,0,.28);
}

/* OVERRIDES_V15 - Brighter hero subheading */
.hero p{
  color: #d9e6ff !important;         /* brighter than muted */
  opacity: 0.98 !important;
  font-weight: 500 !important;        /* a bit stronger */
  text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

/* OVERRIDES_V16 - Responsive Contacts layout fix */
@media (max-width: 860px){
  .contact-simple{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .contact-simple .pill{
    grid-column: 1 / -1 !important; /* full width */
    grid-row: auto !important;
  }
  .contact-simple .pill p{ margin-top: .35rem !important; }
  .contact-simple .mono{ word-break: break-word; }
}

/* OVERRIDES_V17 - Mobile polish for Contacts: separators, spacing, radii */
@media (max-width: 860px){
  .contact-simple{
    gap: 16px !important;
  }
  .contact-simple .pill{
    padding: 16px 18px !important;
    border-radius: 18px !important;
    border-color: rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.03) !important;
  }
  /* Thin gradient separator between stacked cards */
  .contact-simple .pill:not(:first-child){
    position: relative;
  }
  .contact-simple .pill:not(:first-child)::before{
    content: "";
    position: absolute;
    top: -9px;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    pointer-events: none;
  }
}

/* OVERRIDES_V18 - Metrics section polish */
.metrics.grid{
  gap: 14px !important;
}
.metrics .metric{
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.025) !important;
}
.metrics .metric::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at -10% -20%, rgba(255,255,255,.12), transparent 50%),
              radial-gradient(120% 80% at 120% 120%, rgba(80,140,255,.10), transparent 55%);
  pointer-events: none;
  opacity: .55;
}
.metrics .metric:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.14) !important;
}
.metrics .metric .value{
  background: linear-gradient(90deg, #ffffff, #dfe8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}
.metrics .metric .label{
  color: rgba(225,235,255,.85) !important;
}
@media (max-width: 860px){
  .metrics.grid{ gap: 10px !important; }
}


/* OVERRIDES_V19 - Make the 'Directions' (pills) section more interesting */
.pills{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px !important;
}
.pills .pill-card{
  position: relative;
  overflow: hidden;
  padding: 18px 18px 18px 70px !important; /* room for icon */
  border-radius: 16px !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
/* soft inner glow + border accent on hover */
.pills .pill-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
/* title brighter + small accent underline on hover */
.pills .pill-card > strong{
  color:#fff !important;
  font-weight:800 !important;
  display:block;
  margin-bottom:6px;
  position:relative;
}
.pills .pill-card:hover > strong::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:72px; height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, #9A1AC8, #164AEF);
  opacity:.9;
}

/* ICONS via ::before with inline SVGs */
.pills .pill-card::before{
  content:"";
  position:absolute;
  left:18px; top:50%;
  width:36px; height:36px;
  margin-top:-18px;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  backdrop-filter: blur(2px);
  -webkit-mask-image: none;
}
/* 1) Consumer electronics (bag) */
.pills .pill-card:nth-child(1)::before{
  background: rgba(255,255,255,.06) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFFFFF' fill-opacity='0.92' d='M7 8V7a5 5 0 0 1 10 0v1h2a1 1 0 0 1 1 1v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a1 1 0 0 1 1-1h2Zm2 0h6V7a3 3 0 1 0-6 0v1Z'/></svg>") center/20px 20px no-repeat;
}
/* 2) Components (chip) */
.pills .pill-card:nth-child(2)::before{
  background: rgba(255,255,255,.06) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFFFFF' fill-opacity='0.92' d='M8 4h8a2 2 0 0 1 2 2v2h2v2h-2v2h2v2h-2v2a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-2H4v-2h2v-2H4V8h2V6a2 2 0 0 1 2-2Zm0 4v8h8V8H8Z'/></svg>") center/20px 20px no-repeat;
}
/* 3) Networking (wifi/router) */
.pills .pill-card:nth-child(3)::before{
  background: rgba(255,255,255,.06) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFFFFF' fill-opacity='0.92' d='M3 17h18v3H3v-3Zm4-4h2v2H7v-2Zm4 0h2v2h-2v-2Zm4 0h2v2h-2v-2ZM2.3 8.3A13 13 0 0 1 12 4a13 13 0 0 1 9.7 4.3l-1.5 1.3A11 11 0 0 0 12 6a11 11 0 0 0-8.2 3.6L2.3 8.3Zm3 2.9A9 9 0 0 1 12 8a9 9 0 0 1 6.7 3.2l-1.5 1.3A7 7 0 0 0 12 10a7 7 0 0 0-5.2 2.5l-1.5-1.3Z'/></svg>") center/20px 20px no-repeat;
}
/* 4) Industrial electronics (factory) */
.pills .pill-card:nth-child(4)::before{
  background: rgba(255,255,255,.06) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFFFFF' fill-opacity='0.92' d='M2 19h20v2H2v-2Zm2-8l6-3v3l4-3v6h6v4H4v-7Z'/></svg>") center/20px 20px no-repeat;
}

/* Mobile stacking: keep layout clean */
@media (max-width: 860px){
  .pills{ grid-template-columns: 1fr !important; gap: 12px !important; }
  .pills .pill-card{ padding-left: 64px !important; }
}


/* OVERRIDES_V21 - Make hero H1 look like the subheading */
.hero h1{
  color: #d9e6ff !important;
  -webkit-text-fill-color: #d9e6ff !important;
  background: none !important;
  font-weight: 500 !important;   /* same weight as subheading */
  text-shadow: 0 2px 12px rgba(0,0,0,.28) !important; /* same shadow */
  letter-spacing: 0.2px !important;
}