/* =========================================================
   AUTOMATIKON — Visual System (Single Source of Truth)
   - Clean consolidated CSS
   - Keeps all previously built behavior (header, nav, hero, cards, stack)
   ========================================================= */

:root{
  /* layout */
  --w: 1100px;
  --g: 16px;

  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* colors (engineering-neutral) */
  --bg: #ffffff;
  --text: #111111;
  --muted: rgba(0,0,0,0.60);
  --muted-2: rgba(0,0,0,0.72);
  --border: rgba(0,0,0,0.10);
  --border-2: rgba(0,0,0,0.14);

  /* accents (division palette) */
  --blue: #2563eb;    /* Networks */
  --green: #1f9d55;   /* Automation */
  --neutral: #6b7280; /* Access/neutral */

  /* radii */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 18px;

  /* motion */
  --t: 140ms ease;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--font);
  line-height: 1.5;
  color: var(--text);

  /* Subtle "alive" background, NOT noisy */
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(37,99,235,0.05), transparent 60%),
    radial-gradient(900px 520px at 88% 22%, rgba(31,157,85,0.045), transparent 60%),
    #f6f7f8;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* Never underline UI controls */
.btn, .btn:hover,
.pill, .pill:hover,
.primary-nav a, .primary-nav a:hover,
.mobile-nav a, .mobile-nav a:hover,
.nav-card, .nav-card:hover,
#home-layers a.card, #home-layers a.card:hover,
.site-header a, .site-header a:hover{
  text-decoration: none;
}
.site-header a,
.card a{ text-decoration: none; }

/* =========================================================
   Layout container
   ========================================================= */

.container{
  max-width: var(--w);
  margin: 0 auto;
  padding: 20px;
}

/* Paper surface ONLY for main content */
main.container{
  background: rgba(255,255,255,0.92);
  border-left: 1px solid rgba(0,0,0,0.05);
  border-right: 1px solid rgba(0,0,0,0.05);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.06);
}

/* =========================================================
   Header (single source of truth)
   Works with header.php structure:
   .site-header > .container.header-inner > .nav-wrap ...
   ========================================================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.brand{
  display: flex;
  align-items: center;
}

.brand img{
  display: block;
  height: 40px;
  width: auto;
  max-width: 240px;
}

.nav-wrap{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.primary-nav{
  display: flex;
  align-items: center;
  gap: 22px;
}

.primary-nav a{
  color: #1f1f1f;
  font-weight: 500;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  transition: background var(--t), transform var(--t);
}

.primary-nav a:hover{
  background: rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

/* Contact CTA (matches height of pills) */
.primary-nav a.cta{
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1.5px solid #111;
  border-radius: 12px;
  font-weight: 600;
  background: transparent;
  line-height: 1;
  box-shadow: none;
  transition: background var(--t), transform var(--t);
}

.primary-nav a.cta:hover{
  background: rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

/* Utility pills */
.utility-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-sep{
  width: 1px;
  height: 20px;
  background: rgba(0,0,0,0.12);
  display: inline-block;
  align-self: center;
}

.pill{
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.92;
  background: transparent;
  transition: background var(--t), border-color var(--t), transform var(--t);
}

.pill:hover{
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.28);
  transform: translateY(-1px);
}

.muted-pill{ opacity: 0.84; }

/* Burger */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--r-sm);
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle .icon{
  width: 22px;
  height: 22px;
  display: block;
  color: #1f1f1f;
}

/* Mobile dropdown */
.mobile-nav{
  display: none;
  background: rgba(255,255,255,0.98);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 14px 18px;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav a{
  padding: 10px 6px;
  border-radius: var(--r-sm);
}

.mobile-nav a:hover{
  background: rgba(0,0,0,0.04);
}

.mobile-nav-divider{
  height: 1px;
  background: rgba(0,0,0,0.10);
  margin: 6px 0;
}

.mobile-nav.is-open{ display: flex; }

/* Mobile dropdown CTA */
.mobile-nav a.cta{
  display: inline-flex;
  width: fit-content;
  height: 38px;
  padding: 0 14px;
  border: 1.5px solid #111;
  border-radius: 12px;
  font-weight: 600;
  background: transparent;
  line-height: 1;
}

/* tablet + mobile */
@media (max-width: 1023px){
  .header-inner{ min-height: 64px; }
  .brand img{ height: 36px; max-width: 220px; }
  .nav-wrap{ display: none; }
  .nav-toggle{ display: flex; }
  .site-header{ overflow-x: clip; }
}

@media (max-width: 767px){
  .brand img{ height: 32px; max-width: 180px; }
}

/* =========================================================
   Typography blocks
   ========================================================= */

.hero{ padding: 60px 0 30px; }

.kicker{
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.h1{
  font-size: 44px;
  line-height: 1.1;
  margin: 10px 0 12px;
  letter-spacing: -0.03em;
}

.lead{
  font-size: 18px;
  color: rgba(0,0,0,0.72);
  max-width: 75ch;
}

/* =========================================================
   Sections, grid, cards
   ========================================================= */

.section{ padding: 30px 0; }

.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--g);
}

.card{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-lg);
  padding: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}

.card h3{ margin: 0 0 8px; }
.card p{ margin: 0; color: rgba(0,0,0,0.72); }

/* default hover (non-clickable cards) */
.card:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
}

.muted{ color: rgba(0,0,0,0.60); font-size: 14px; }

.card a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn{ text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.70);
  color: inherit;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  transition: transform var(--t), background var(--t), border-color var(--t);
  text-decoration: none;
}

.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.22);
  background: rgba(255,255,255,0.90);
  text-decoration: none;
}

.btn:focus,
.btn:focus-visible{
  text-decoration: none;
  outline: none;
}

.btn--primary{
  background: rgba(0,0,0,0.92);
  border-color: rgba(0,0,0,0.92);
  color: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

.btn--primary:hover{
  background: rgba(0,0,0,1);
  border-color: rgba(0,0,0,1);
}

.btn--ghost{
  background: rgba(255,255,255,0.85);
}

/* =========================================================
   HOME - HERO split
   ========================================================= */

.hero.hero--split{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  position: relative;
}

/* small technical accent line */
.hero.hero--split::before{
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  width: 118px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37,99,235,1), rgba(31,157,85,1));
  box-shadow: 0 6px 16px rgba(37,99,235,0.10);
  opacity: 0.95;
}

.hero.hero--split .hero__content{ min-width: 0; }

.hero.hero--split .hero__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 18px;
}

.hero.hero--split .hero__media{
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  box-shadow: 0 18px 55px rgba(0,0,0,0.10);
  position: relative;
}

/* subtle overlay */
.hero.hero--split .hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 70% at 25% 20%, rgba(37,99,235,0.16), transparent 55%),
    radial-gradient(60% 70% at 85% 35%, rgba(31,157,85,0.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
}

.hero.hero--split .hero__img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(0.97);
}

@media (max-width: 1024px){
  .hero.hero--split{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .hero.hero--split .hero__img{ aspect-ratio: 16 / 10; }
}

@media (max-width: 640px){
  .hero.hero--split .hero__img{ aspect-ratio: 3 / 4; }
}

/* =========================================================
   HOME - deterministic grids
   ========================================================= */

@media (min-width: 1024px){
  /* System layers: 3 columns */
  #home-layers .grid{ grid-template-columns: repeat(3, 1fr); }
  #home-layers .grid > .card,
  #home-layers .grid > a.card{ grid-column: auto; }

  /* Split section: 2 columns */
  #home-split .grid{ grid-template-columns: repeat(2, 1fr); }
  #home-split .grid > .card{ grid-column: auto; }
}

/* Tablet: 2 columns */
@media (min-width: 769px) and (max-width: 1023px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .grid > .card{ grid-column: auto; }
}

/* Mobile: 1 column */
@media (max-width: 768px){
  .grid{ grid-template-columns: 1fr; }
  .grid > .card{ grid-column: auto; }

  .section{ padding: 18px 0; }
  .card{ padding: 16px; border-radius: 14px; }
  .hero{ padding: 42px 0 18px; }
  .h1{ font-size: 34px; }
  .lead{ font-size: 16px; }
}

/* =========================================================
   HOME - System layer cards (clickable) — accent bar on hover
   ========================================================= */

a.card{
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* baseline */
#home-layers a.card{
  border-left: 1px solid rgba(0,0,0,0.07);
}

/* Accent bar appears on hover/focus */
#home-layers a.card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 160ms ease, transform 160ms ease;
}

#home-layers a.card:hover::before,
#home-layers a.card:focus-visible::before{
  opacity: 1;
  transform: translateX(0);
}

/* color mapping */
#home-layers a.card:nth-child(1)::before{ background: rgba(31,157,85,0.90); }
#home-layers a.card:nth-child(2)::before{ background: rgba(68,68,68,0.75); }
#home-layers a.card:nth-child(3)::before{ background: rgba(37,99,235,0.90); }

/* clickable lift stronger */
#home-layers a.card:hover,
#home-layers a.card:focus-visible{
  transform: translateY(-2px);
}

/* faint wash on hover */
#home-layers a.card:hover,
#home-layers a.card:focus-visible{
  background:
    radial-gradient(120% 140% at 10% 20%, rgba(37,99,235,0.06), transparent 55%),
    radial-gradient(120% 140% at 90% 30%, rgba(31,157,85,0.05), transparent 60%),
    #ffffff;
}

/* =========================================================
   HOME - Why section
   ========================================================= */

.why__inner{ max-width: 920px; }
.why__title{ margin: 0 0 14px; letter-spacing: -0.01em; }

.why__lead{
  margin: 0 0 18px;
  opacity: 0.92;
  line-height: 1.65;
  max-width: 75ch;
}

.why__items{ display: grid; gap: 12px; }

.why__item{
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.015));
}

.why__item p{ margin: 0; line-height: 1.65; }

/* =========================================================
   HOME - CTA (stable)
   ========================================================= */

.section--cta{ padding-top: 10px; padding-bottom: 34px; }

.cta{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.cta__text{
  margin:0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 70ch;
  color: rgba(0,0,0,0.78);
}

.cta__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

@media (max-width: 640px){
  .cta{
    flex-direction: column;
    align-items: flex-start;
  }
  .cta__actions{
    width:100%;
    justify-content:flex-start;
  }
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer{
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 40px;
  background: rgba(255,255,255,0.70);
}

.footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}

/* =========================================================
   HOME — System Fabric (legacy block; safe to keep)
   (Not used by current index.php, but kept for reuse)
   ========================================================= */

.fabric{ padding-top: 10px; }
.fabric__inner{ max-width: 980px; }

.fabric__title{
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.fabric__lead{
  margin: 0 0 16px;
  color: rgba(0,0,0,0.70);
  max-width: 80ch;
  line-height: 1.65;
}

.fabric__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fabric__item{
  position: relative;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 18px 20px 16px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.fabric__item::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:4px;
  border-radius:999px;
  opacity:0.45;
  transition: opacity 200ms ease, width 200ms ease;
}

.fabric__item:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.14);
}

.fabric__item:hover::before{
  opacity:1;
  width:5px;
}

.fabric__kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(0,0,0,0.60);
  margin-bottom: 10px;
}

.fabric__list{
  margin: 0;
  padding-left: 18px;
  color: rgba(0,0,0,0.74);
  line-height: 1.6;
}

.fabric__list li{ margin: 0 0 8px; }

.fabric__item--automation::before{ background: rgba(31,157,85,0.90); }
.fabric__item--automation{
  background:
    radial-gradient(120% 140% at 10% 15%, rgba(31,157,85,0.07), transparent 55%),
    rgba(255,255,255,0.92);
}
.fabric__item--automation:hover{ box-shadow: 0 18px 40px rgba(31,157,85,0.15); }

.fabric__item--access::before{ background: rgba(68,68,68,0.75); }
.fabric__item--access{
  background:
    radial-gradient(120% 140% at 10% 15%, rgba(107,114,128,0.06), transparent 55%),
    rgba(255,255,255,0.92);
}
.fabric__item--access:hover{ box-shadow: 0 18px 40px rgba(0,0,0,0.10); }

.fabric__item--networks::before{ background: rgba(37,99,235,0.90); }
.fabric__item--networks{
  background:
    radial-gradient(120% 140% at 10% 15%, rgba(37,99,235,0.07), transparent 55%),
    rgba(255,255,255,0.92);
}
.fabric__item--networks:hover{ box-shadow: 0 18px 40px rgba(37,99,235,0.15); }

@media (max-width: 1023px){
  .fabric__grid{ grid-template-columns: 1fr; }
  .fabric__item{ padding: 16px; }
}

/* =========================================================
   HOME — System Stack (CURRENT) — A: bus + taps + connector nodes
   ========================================================= */

.stack__inner{ max-width: 980px; }

.stack__head{ margin-bottom: 18px; }

.stack__title{
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.stack__lead{
  margin: 0;
  line-height: 1.65;
  color: rgba(0,0,0,0.76);
  max-width: 82ch;
}

.stack__layout{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 18px;
  align-items: stretch;
}

/* Left panel */
.stack__viz{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 16px;
  padding-left: 30px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  --bus-x: 16px;
}

.stack__viz::before{
  content:"";
  position:absolute;
  left: var(--bus-x);
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.00),
    rgba(0,0,0,0.12),
    rgba(0,0,0,0.12),
    rgba(0,0,0,0.00)
  );
  opacity: 0.85;
}

/* Chips */
.stack__chip{
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 200ms ease, background 200ms ease;
  position: relative;
}

.stack__chip::before{
  content:"";
  position:absolute;
  left: calc(var(--bus-x) - 30px);
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.14);
  opacity: 0.55;
}

.stack__chip::after{
  content:"";
  position:absolute;
  left: calc(var(--bus-x) - 30px - 4px);
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  opacity: 0.85;
}

.stack__chip + .stack__chip{ margin-top: 10px; }

.stack__chipTitle{
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 4px;
}

.stack__chipMeta{
  font-size: 13px;
  opacity: 0.78;
  line-height: 1.35;
}

/* chip accents */
.stack__chip--aut{ border-left: 3px solid rgba(31,157,85,0.85); }
.stack__chip--acc{ border-left: 3px solid rgba(68,68,68,0.70); }
.stack__chip--net{ border-left: 3px solid rgba(37,99,235,0.85); }

.stack__chip--aut::before{ background: rgba(31,157,85,0.35); }
.stack__chip--aut::after{ border-color: rgba(31,157,85,0.40); }

.stack__chip--acc::before{ background: rgba(68,68,68,0.22); }
.stack__chip--acc::after{ border-color: rgba(68,68,68,0.28); }

.stack__chip--net::before{ background: rgba(37,99,235,0.35); }
.stack__chip--net::after{ border-color: rgba(37,99,235,0.40); }

/* chip hover */
.stack__chip:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.16);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.80);
}

.stack__chip:hover::before{ opacity: 0.85; }
.stack__chip:hover::after{ opacity: 1; }

.stack__footnote{
  margin-top: 12px;
  font-size: 13px;
  opacity: 0.72;
}

/* Wiring sits at bottom, inside left panel */
.stack__wiring{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.stack__wire{
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(31,157,85,0.70),
    rgba(107,114,128,0.55),
    rgba(37,99,235,0.70)
  );
}

.stack__nodes{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 6px;
}

.stack__node{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.16);
  background: rgba(255,255,255,0.95);
  display: inline-block;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.stack__node::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.35);
}

.stack__node--aut{ border-color: rgba(31,157,85,0.55); }
.stack__node--aut::after{ background: rgba(31,157,85,0.90); }

.stack__node--acc{ border-color: rgba(68,68,68,0.32); }
.stack__node--acc::after{ background: rgba(68,68,68,0.55); }

.stack__node--net{ border-color: rgba(37,99,235,0.55); }
.stack__node--net::after{ background: rgba(37,99,235,0.90); }

.stack__labels{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(0,0,0,0.55);
}

/* Right column cards */
.stack__cards{
  display: grid;
  gap: 12px;
}

.stack__card{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 22px rgba(0,0,0,0.05);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 200ms ease, background 200ms ease;
}

.stack__kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.70;
  margin-bottom: 10px;
}

.stack__list{
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
  color: rgba(0,0,0,0.78);
}

.stack__list li{ margin: 0 0 8px; }

/* layer accents */
.stack__card--aut{ border-left: 3px solid rgba(31,157,85,0.70); }
.stack__card--acc{ border-left: 3px solid rgba(68,68,68,0.60); }
.stack__card--net{ border-left: 3px solid rgba(37,99,235,0.70); }

/* card hover */
.stack__card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 18px 45px rgba(0,0,0,0.09);
  background: rgba(255,255,255,0.98);
}

/* per-layer hover glow */
.stack__card--aut:hover{ box-shadow: 0 18px 45px rgba(31,157,85,0.14); }
.stack__card--net:hover{ box-shadow: 0 18px 45px rgba(37,99,235,0.14); }

@media (max-width: 1023px){
  .stack__layout{ grid-template-columns: 1fr; }
  .stack__wiring{ margin-top: 14px; }
}

/* =========================================================
   SIGNATURE PLANNING CALLOUT
   ========================================================= */

.section--signature{
  padding-top: 36px;
  padding-bottom: 36px;
}

.signature{
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 22px;
  padding: 26px 26px;
  background:
    radial-gradient(120% 140% at 12% 12%, rgba(0,0,0,0.03), transparent 60%),
    rgba(255,255,255,0.96);
  box-shadow: 0 22px 56px rgba(0,0,0,0.08);
  position: relative;
}

/* hard safety: no underline inside signature */
.signature a,
.signature a:hover{
  text-decoration: none;
}

.signature::before{
  content:"";
  position:absolute;
  left: 26px;
  top: 0;
  width: 168px;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(31,157,85,0.08);
  opacity: 0.95;
}

.signature__kicker{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.58;
  margin-bottom: 12px;
}

.signature__title{
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.signature__lead{
  margin: 0 0 14px;
  max-width: 78ch;
  line-height: 1.65;
  color: rgba(0,0,0,0.75);
}

/* Engineering list: system nodes, not browser bullets */
.signature__list{
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  max-width: 74ch;
  color: rgba(0,0,0,0.78);
  line-height: 1.6;
}

.signature__list li{
  position: relative;
  padding-left: 22px;
  margin: 0 0 9px;
}

.signature__list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.signature__list li::after{
  content:"";
  position:absolute;
  left: 3px;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.38);
}

.signature__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* =========================================================
   NAV CARDS (Solutions / Industries)
   ========================================================= */

.nav-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  cursor: pointer;
}

.nav-card__cta{
  margin-top: 14px;
  font-weight: 600;
  opacity: 0.75;
  transition: transform 140ms ease, opacity 140ms ease;
}

.nav-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.nav-card:hover .nav-card__cta{
  transform: translateX(4px);
  opacity: 1;
}

/* =========================================================
   METHOD CARD (How we work)
   ========================================================= */

.method-card__kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  opacity: 0.65;
  margin-bottom: 10px;
}


/* =========================================================
   METHOD TIMELINE (How we work)
   - Desktop: horizontal timeline with phase segments
   - Mobile: compact vertical timeline (no "snake" stretching)
   ========================================================= */

.method-card{
  position: relative;
  overflow: hidden;
}

.method-card::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 0;
  width: 140px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), rgba(107,114,128,0.70), var(--green));
  opacity: 0.95;
}

.method-timeline{
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  position: relative;
}

.method-timeline::before{
  content:"";
  position:absolute;
  left: 8px;
  right: 8px;
  top: 7px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(37,99,235,0.70),
    rgba(107,114,128,0.40),
    rgba(31,157,85,0.70)
  );
  opacity: 0.9;
}

.method-step{
  position: relative;
  padding: 9px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  background: rgba(0,0,0,0.02);
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
}

.method-step::before{
  content:"";
  position:absolute;
  left: 50%;
  top: -12px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.16);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* subtle per-phase tint (keeps it neutral, not circus) */
.method-step:nth-child(1){ background: radial-gradient(120% 140% at 10% 10%, rgba(37,99,235,0.05), transparent 55%), rgba(0,0,0,0.02); }
.method-step:nth-child(2){ background: radial-gradient(120% 140% at 10% 10%, rgba(107,114,128,0.05), transparent 55%), rgba(0,0,0,0.02); }
.method-step:nth-child(3){ background: radial-gradient(120% 140% at 10% 10%, rgba(31,157,85,0.04), transparent 55%), rgba(0,0,0,0.02); }
.method-step:nth-child(4){ background: radial-gradient(120% 140% at 10% 10%, rgba(37,99,235,0.04), transparent 55%), rgba(0,0,0,0.02); }
.method-step:nth-child(5){ background: radial-gradient(120% 140% at 10% 10%, rgba(31,157,85,0.04), transparent 55%), rgba(0,0,0,0.02); }

/* CTA link inside method card */
.method-card .muted a{
  text-decoration: none;
  font-weight: 600;
  opacity: 0.78;
  transition: opacity var(--t), transform var(--t);
}

.method-card .muted a:hover{
  opacity: 1;
  transform: translateX(3px);
}

@media (max-width: 900px) and (orientation: landscape){
  .method-timeline{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .method-timeline::before{ left: 10px; right: 10px; }
}

@media (max-width: 900px) and (orientation: portrait){
  /* Tablet portrait: keep it readable — single column vertical timeline */
  .method-timeline{
    grid-template-columns: 1fr;
    padding: 0 0 0 18px;
    margin-top: 14px;
  }
  .method-timeline::before{
    left: 7px;
    right: auto;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, rgba(37,99,235,0.95), rgba(31,157,85,0.95));
  }
  .method-step{
    text-align: left;
    padding: 12px 14px;
    min-height: 0;
  }
  .method-step::before{ left: -28px; top: 50%; transform: translateY(-50%); }
  .method-step::after{ display: none; }
}

@media (max-width: 640px){
  .method-timeline{
    grid-template-columns: 1fr;
    padding: 0 0 0 18px;
    margin-top: 14px;
  }

  .method-timeline::before{
    left: 8px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
  }

  .method-step{
    text-align: left;
    border-radius: 14px;
    padding: 10px 12px;
  }

  .method-step::before{
    left: -18px;
    top: 50%;
    transform: translate(50%, -50%);
  }
}


/* ===============================
   HOW WE WORK – subtle accent line
================================== */
.method-card::before {
  content: "";
  display: block;
  width: 140px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 22px;
  background: linear-gradient(90deg, #2563EB 0%, #1F9D55 100%);
}



/* ===============================
   SOFT DARK CTA
================================== */
.section--cta .cta {
  background: linear-gradient(135deg, #111111 0%, #161616 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

.section--cta .cta__text {
  color: rgba(255,255,255,0.85);
}

.section--cta .btn--ghost {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
}

.section--cta .btn--ghost:hover {
  background: rgba(255,255,255,0.08);
}


/* =========================================================
   HOTFIX — 2026-02-12
   Goals:
   1) Restore ALWAYS-ON division accents on Home layer cards (web/tablet/mobile)
   2) Fix How We Work timeline so it is compact and consistent across breakpoints
   3) Soft-dark CTA with coherent button styling
   ========================================================= */

/* 1) Home layer cards — permanent division accent (no hover dependency) */
#home-layers a.card{
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: rgba(0,0,0,0.08); /* default fallback */
}
#home-layers a.card:nth-child(1){ border-left-color: rgba(31,157,85,0.90); }
#home-layers a.card:nth-child(2){ border-left-color: rgba(68,68,68,0.55); }
#home-layers a.card:nth-child(3){ border-left-color: rgba(37,99,235,0.90); }

/* keep hover bar disabled so we don't get double accents */
#home-layers a.card::before{ content: none !important; }

/* 2) How We Work — build timeline using CURRENT markup (.method-card__steps > span) */
.method-card{ position: relative; }

/* small top accent line (detail, not full-width) */
.method-card::before{
  content: "";
  display: block;
  width: 140px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  opacity: 0.95;
  margin: 2px 0 12px;
}

/* horizontal timeline for tablet/desktop */
.method-card__steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.method-card__steps::before{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 14px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(37,99,235,0.75),
    rgba(107,114,128,0.42),
    rgba(31,157,85,0.75)
  );
  opacity: 0.85;
}

.method-card__steps span{
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.88);
  font-size: 13px;
}

.method-card__steps span::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* vertical timeline for mobile (compact) */
@media (max-width: 640px){
  .method-card__steps{
    grid-template-columns: 1fr;
    gap: 10px;
    padding-left: 18px;
  }

  .method-card__steps::before{
    left: 7px;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg,
      rgba(37,99,235,0.70),
      rgba(107,114,128,0.36),
      rgba(31,157,85,0.70)
    );
    opacity: 0.95;
  }

  .method-card__steps span{
    justify-content: flex-start;
    padding-left: 14px;
  }

  .method-card__steps span::before{
    top: 50%;
    left: -18px;
    transform: translateY(-50%);
  }
}

/* disable legacy timeline markup if it exists (we use .method-card__steps spans) */

/* 3) CTA — soft dark + coherent buttons */
.section--cta .cta{
  background: linear-gradient(180deg, rgba(0,0,0,0.86), rgba(0,0,0,0.94));
  border-color: rgba(0,0,0,0.75);
  box-shadow: 0 18px 60px rgba(0,0,0,0.20);
}
.section--cta .cta__text{ color: rgba(255,255,255,0.88); }

/* Invert buttons inside dark CTA */
.section--cta .cta .btn--primary{
  background: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.92);
  color: rgba(0,0,0,0.92);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.section--cta .cta .btn--primary:hover{
  background: rgba(255,255,255,1);
  border-color: rgba(255,255,255,1);
}

.section--cta .cta .btn--ghost{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.88);
  box-shadow: none;
}
.section--cta .cta .btn--ghost:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.36);
}


/* =========================================================
   HOME - Tablet-only Industrial card (System Layers)
   ========================================================= */
#home-layers a.card--industrial { display: none; }
@media (min-width: 769px) and (max-width: 1023px) {
  #home-layers a.card--industrial { display: block; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  /* 2x2 grid on tablet */
  #home-layers .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Always-on division accents (extend for Industrial) */
#home-layers a.card:nth-child(4) {
  border-left-color: rgba(107, 114, 128, 0.55);
}

/* =========================================================
   HOW WE WORK - Make portrait tablets use vertical timeline
   (horizontal timeline stays for landscape tablet & desktop)
   ========================================================= */
@media (max-width: 900px) {
  .method-card__steps {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-left: 18px;
  }

  .method-card__steps::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, var(--blue), var(--green));
    border-radius: 999px;
  }

  .method-card__steps span {
    justify-content: flex-start;
    padding: 12px 14px;
    min-height: auto;
  }

  /* stacked node dots */
  .method-card__steps span::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--card);
    border: 2px solid rgba(0,0,0,0.18);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  }
}

/* =========================================================
   CTA - better layout on portrait tablets
   ========================================================= */
@media (max-width: 900px) {
  .cta {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .cta__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
/* =========================================================
   Solutions landing — Visual polish (scoped)
   - Division accents (always-on)
   - Subtle depth (no photos)
   - Stronger CTA hierarchy
   ========================================================= */

.page-solutions .hero {
  position: relative;
  padding: 96px 0 56px;
}

/* subtle system-layer depth */
.page-solutions .hero::before{
  content:"";
  position:absolute;
  inset:-24px -24px 0 -24px;
  pointer-events:none;
  border-radius: 24px;

  /* layered, very subtle */
  background:
    radial-gradient(900px 320px at 20% 10%, rgba(37,99,235,0.10), rgba(37,99,235,0.00) 70%),
    radial-gradient(700px 260px at 70% 20%, rgba(31,157,85,0.10), rgba(31,157,85,0.00) 70%),
    repeating-linear-gradient(
      90deg,
      rgba(18,18,18,0.035) 0px,
      rgba(18,18,18,0.035) 1px,
      rgba(18,18,18,0.00) 1px,
      rgba(18,18,18,0.00) 18px
    );
}

.page-solutions .hero .kicker{
  opacity: 0.72;
}

.page-solutions .hero .h1{
  letter-spacing: -0.02em;
}

/* Cards: slightly tighter + premium edge */
.page-solutions .sol-card{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

/* Always-on accent strip */
.page-solutions .sol-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 4px;
  background: rgba(18,18,18,0.18);
}

/* Soft top highlight for depth (very subtle) */
.page-solutions .sol-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.00) 52%);
  opacity: 0.65;
}

/* Division accents */
.page-solutions .sol-card--automation::before{ background: #1F9D55; }   /* green */
.page-solutions .sol-card--networks::before{   background: #2563EB; }   /* blue */
.page-solutions .sol-card--access::before{     background: rgba(18,18,18,0.78); }
.page-solutions .sol-card--industrial::before{ background: rgba(18,18,18,0.58); }

/* Link: make it look intentional (not random muted link) */
.page-solutions .sol-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  text-decoration: none;
}

.page-solutions .sol-link:hover{
  text-decoration: underline;
}

/* Callout: stronger than a normal card, but not dark */
.page-solutions .sol-callout{
  border-radius: 22px;
  background: rgba(18,18,18,0.03);
  border: 1px solid rgba(18,18,18,0.08);
}

/* Callout links slightly stronger */
.page-solutions .sol-callout a{
  font-weight: 600;
  text-decoration: none;
}

.page-solutions .sol-callout a:hover{
  text-decoration: underline;
}

/* Responsive: hero padding on small screens */
@media (max-width: 720px){
  .page-solutions .hero{
    padding: 72px 0 40px;
  }
}
/* =========================================================
   Header: dropdown (desktop) + accordion (mobile)
   - Solutions + Industries
   ========================================================= */

/* Desktop dropdown wrapper */
.primary-nav .nav-item.has-sub{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.primary-nav .nav-item.has-sub .sub-caret{
  opacity: 0.7;
  font-size: 12px;
  transform: translateY(-1px);
}

/* Dropdown menu */
.primary-nav .nav-item.has-sub .sub-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 270px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(18,18,18,0.10);
  background: #fff;
  box-shadow: 0 14px 34px rgba(18,18,18,0.10);
  display: none;
  z-index: 80;
}

.primary-nav .nav-item.has-sub .sub-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
}

.primary-nav .nav-item.has-sub .sub-menu a:hover{
  background: rgba(18,18,18,0.04);
}

/* show on hover + keyboard focus */
.primary-nav .nav-item.has-sub:hover .sub-menu,
.primary-nav .nav-item.has-sub:focus-within .sub-menu{
  display: block;
}

/* Mobile accordion blocks */
.mobile-sub{
  width: 100%;
}

.mobile-sub-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-sub-toggle{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  line-height: 1;
  opacity: 0.85;
}

.mobile-sub-toggle:active{
  transform: translateY(1px);
}

.mobile-sub-menu{
  display: none;
  padding: 6px 0 8px 0;
}

.mobile-sub.is-open .mobile-sub-menu{
  display: block;
}

.mobile-sub-menu a{
  display: block;
  padding: 10px 0 10px 16px;
  text-decoration: none;
  opacity: 0.92;
}
/* =========================================================
   Mobile menu: dropdown toggle (Solutions / Industries)
   - bigger tap target
   - visible caret
   - aligned with row
   ========================================================= */

@media (max-width: 899px){

  /* Make the whole row feel like a control */
  .site-header .mobile-sub-head{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 0 !important;
  }

  /* Keep the left link readable and not cramped */
  .site-header .mobile-sub-head > a{
    flex: 1 1 auto !important;
    padding-right: 8px !important;
  }

  /* The caret button: visible + BIG tap target */
  .site-header .mobile-sub-toggle{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(18,18,18,0.14) !important;
    background: rgba(18,18,18,0.03) !important;
    border-radius: 12px !important;

    font-size: 16px !important;
    line-height: 1 !important;
    color: rgba(18,18,18,0.70) !important;

    opacity: 1 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* On open: rotate caret (nice + clear) */
  .site-header .mobile-sub.is-open .mobile-sub-toggle{
    transform: rotate(180deg) !important;
    color: rgba(18,18,18,0.85) !important;
    background: rgba(18,18,18,0.05) !important;
    border-color: rgba(18,18,18,0.18) !important;
  }

  /* Submenu spacing + indentation */
  .site-header .mobile-sub-menu{
    padding: 4px 0 10px 0 !important;
  }

  .site-header .mobile-sub-menu a{
    padding: 10px 0 10px 18px !important;
    opacity: 0.92 !important;
  }

}
/* Solutions cards: whole card clickable */
.page-solutions .sol-card{
  cursor: pointer;
}
/* =========================================================
   Mobile: Contact as primary dark CTA
   ========================================================= */

@media (max-width: 899px){

  .site-header .mobile-nav a.cta{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    padding: 14px 18px !important;

    border-radius: 14px !important;

    background: #121212 !important;
    color: #ffffff !important;

    border: 1px solid #121212 !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  .site-header .mobile-nav a.cta:hover{
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
  }

}
/* =========================================================
   Mobile dropdown refinement
   Clean system-style caret (no chunky button look)
   ========================================================= */

@media (max-width: 899px){

  /* Remove boxy button feel */
  .site-header .mobile-sub-toggle{
    width: 40px !important;
    height: 40px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: none !important;
    background: transparent !important;
    box-shadow: none !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    color: rgba(18,18,18,0.55) !important;

    transition: transform 160ms ease, color 160ms ease;
  }

  /* Align text and caret perfectly */
  .site-header .mobile-sub-head{
    padding: 12px 0 !important;
  }

  /* Active state */
  .site-header .mobile-sub.is-open .mobile-sub-toggle{
    transform: rotate(180deg) !important;
    color: rgba(18,18,18,0.85) !important;
  }

}
/* Overview rows: italic + slightly softer */
.site-header .sub-menu a.is-overview,
.site-header .mobile-sub-menu a.is-overview{
  font-style: italic;
  opacity: 0.80;
}
/* Desktop dropdown: prevent collapsing when moving mouse to submenu */
@media (min-width: 900px){

  /* Parent must allow submenu + bridge */
  .site-header .primary-nav .nav-item.has-sub{
    position: relative;
    overflow: visible;
  }

  /* Reduce vertical gap so mouse doesn't "fall through" */
  .site-header .primary-nav .nav-item.has-sub .sub-menu{
    top: calc(100% + 4px) !important;
  }

  /* Invisible hover bridge: keeps :hover active while moving to submenu */
  .site-header .primary-nav .nav-item.has-sub::after{
    content:"";
    position:absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 12px;
    background: transparent;
  }

  /* Make sure submenu is above everything */
  .site-header .primary-nav .nav-item.has-sub .sub-menu{
    z-index: 999;
  }
}
/* =========================================================
   iPad/touch fix: dropdown hover only on real hover devices
   ========================================================= */

/* Default: never show dropdown by accident */
.site-header .primary-nav .nav-item.has-sub .sub-menu{
  display: none;
}

/* Enable hover dropdown only when device supports hover + fine pointer (mouse/trackpad) */
@media (hover: hover) and (pointer: fine){
  .site-header .primary-nav .nav-item.has-sub:hover .sub-menu,
  .site-header .primary-nav .nav-item.has-sub:focus-within .sub-menu{
    display: block;
  }
}

/* On touch devices (hover:none), force dropdowns to stay closed (prevents sticky/buggy hover) */
@media (hover: none){
  .site-header .primary-nav .nav-item.has-sub:hover .sub-menu,
  .site-header .primary-nav .nav-item.has-sub:focus-within .sub-menu{
    display: none !important;
  }
}
/* =========================================================
   iPad touch: show burger as safe access to submenus
   ========================================================= */

/* Desktop dropdown: prevent collapsing when moving mouse to submenu */
@media (min-width: 900px){

  /* Parent must allow submenu + bridge */
  .site-header .primary-nav .nav-item.has-sub{
    position: relative;
    overflow: visible;
  }

  /* Reduce vertical gap so mouse doesn't "fall through" */
  .site-header .primary-nav .nav-item.has-sub .sub-menu{
    top: calc(100% + 4px) !important;
  }

  /* Invisible hover bridge: keeps :hover active while moving to submenu */
  .site-header .primary-nav .nav-item.has-sub::after{
    content:"";
    position:absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 12px;
    background: transparent;
  }

  /* Make sure submenu is above everything */
  .site-header .primary-nav .nav-item.has-sub .sub-menu{
    z-index: 999;
  }
}
/* =========================================================
   HBA Solution Page — minimal, isolated overrides
   ========================================================= */

.page-hba main.container{
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Header: transparent on top of hero, solid after scroll */
.page-hba .site-header{
  position: fixed;
  left: 0; right: 0; top: 0;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
}
.page-hba .primary-nav a{ color: rgba(255,255,255,0.92); }
.page-hba .primary-nav a:hover{ background: rgba(255,255,255,0.08); }
.page-hba .primary-nav a.cta{
  border-color: rgba(255,255,255,0.92);
  color: rgba(255,255,255,0.92);
}
.page-hba.is-scrolled .site-header{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.page-hba.is-scrolled .primary-nav a{ color: #1f1f1f; }
.page-hba.is-scrolled .primary-nav a:hover{ background: rgba(0,0,0,0.04); }
.page-hba.is-scrolled .primary-nav a.cta{
  border-color: #111;
  color: #111;
}

/* Hero */
.hba-hero{
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  padding: 120px 20px 60px;
  overflow: hidden;
}
.hba-hero__bg{
  position: absolute;
  inset: 0;
  background: url("/assets/img/solutions/hba/hero.jpg") center right / cover no-repeat;
  transform: scale(1.02);
}
.hba-hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.64) 30%,
    rgba(0,0,0,0.34) 56%,
    rgba(0,0,0,0.00) 78%
  );
}
.hba-hero__inner{
  position: relative;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  color: #fff;
}
.hba-hero__kicker{
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  opacity: .86;
}
.hba-hero__h1{
  margin: 18px 0 12px;
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(40px, 5vw, 72px);
}
.hba-hero__lead{
  margin: 0 auto;
  max-width: 680px;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.55;
  opacity: .90;
}
.hba-hero__actions{
  margin-top: 26px;
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn--ghost-light{
  border-color: rgba(255,255,255,0.38);
  color: rgba(255,255,255,0.92);
}
.btn--ghost-light:hover{
  background: rgba(255,255,255,0.08);
}
.hba-hero__scroll{
  margin-top: 36px;
  display: flex;
  justify-content: center;
}
.hba-hero__scroll-line{
  width: 42px;
  height: 1px;
  background: rgba(255,255,255,0.35);
}

/* Wrapper to keep readable line length */
.hba-wrap{
  padding: 0 20px 60px;
}
.hba-block, .hba-split, .hba-case__inner, .hba-close__inner, .hba-dark__inner{
  max-width: 1100px;
  margin: 0 auto;
}
.hba-block{
  padding: 56px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.hba-block:first-child{ border-top: 0; }
.hba-block--soft{
  background: #f7f8f9;
  padding: 56px 22px;
  border-radius: 18px;
}
.hba-block--diagram{
  background: #f7f8f9;
  padding: 56px 22px;
  border-radius: 18px;
}
.hba-title{
  margin: 0 0 14px;
}
.hba-prose{
  max-width: 860px;
}
.hba-lines{
  margin-top: 14px;
}
.hba-muted{ opacity: 0.78; }
.hba-small{ font-size: 14px; }

.hba-split{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: start;
  padding: 56px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.hba-aside{ margin: 14px 0; opacity: .86; }
.hba-bullets{
  margin: 14px 0 6px;
  padding-left: 18px;
}
.hba-bullets li{ margin: 6px 0; }
.hba-leadline{ margin-top: 0; }

/* Minimal "system layer" viz */
.hba-viz__frame{
  position: relative;
  height: 320px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  overflow: hidden;
}

/* HBA split: image LEFT, text RIGHT (keep tablet/desktop sane) */
.hba-split--img-left{
  grid-template-columns: 0.9fr 1.1fr;
}

/* Photo-in-card variant for the split visual */
.hba-viz--photo .hba-viz__frame--photo{
  background: #0b0f0e;
}
.hba-viz--photo .hba-viz__frame--photo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 28% 50%;
}
.hba-viz__grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .35;
}
.hba-viz__layer{
  position: absolute;
  left: 14%;
  top: 18%;
  width: 72%;
  height: 64%;
  border-radius: 16px;
  border: 1px solid rgba(31,157,85,0.35);
  background: rgba(31,157,85,0.06);
}
.hba-viz__label{
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
}
.hba-viz__label-title{ font-weight: 650; }
.hba-viz__label-sub{ opacity: .72; font-size: 13px; margin-top: 2px; }

/* Diagram */
.hba-diagram{
  margin: 22px 0;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.hba-diagram__node{
  width: min(520px, 100%);
  text-align: center;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.90);
}
.hba-diagram__node--accent{
  border-color: rgba(31,157,85,0.35);
  background: rgba(31,157,85,0.06);
}
.hba-diagram__link{
  width: 2px;
  height: 22px;
  background: rgba(31,157,85,0.35);
}

/* Dark behavioral section */
.hba-dark{
  margin: 56px 0 0;
  background: #0f1114;
  color: #fff;
  padding: 64px 20px;
}
.hba-title--light{ color: #fff; }
.hba-prose--light{ max-width: 860px; }
.hba-muted-light{ opacity: .78; }
.hba-chip{
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  font-size: 13px;
}
.hba-bullets--light li{ opacity: .92; }

/* State diagram */
.hba-states{
  margin-top: 26px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 18px;
}
.hba-states__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.hba-state{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  min-width: 140px;
  text-align: center;
}
.hba-arrow{
  flex: 1 1 40px;
  height: 1px;
  background: rgba(31,157,85,0.55);
  min-width: 28px;
}
.hba-states__note{
  margin-top: 12px;
  opacity: .72;
  font-size: 13px;
}

/* Benefits grid */
.hba-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.hba-box{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.86);
  border-radius: 16px;
  padding: 16px 16px;
}
.hba-box--tall{ padding: 18px; }
.hba-two{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

/* Domains list */
.hba-domainlist{
  margin: 14px 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hba-domainlist span{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}

/* Steps */
.hba-steps{
  margin: 12px 0;
  padding-left: 18px;
}
.hba-steps li{ margin: 8px 0; }

/* Case */
.hba-case{
  margin-top: 46px;
  padding: 56px 20px;
  background: #f7f8f9;
}
.hba-case__cols{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.hba-case__col{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.90);
  padding: 16px;
}
.hba-case__label{
  font-weight: 700;
  margin-bottom: 10px;
}
.hba-case__col--before .hba-case__label{ color: rgba(185,28,28,0.92); }
.hba-case__col--after .hba-case__label{ color: var(--green); }
.hba-case__col ul{ margin: 0; padding-left: 18px; }
.hba-case__col li{ margin: 6px 0; opacity: .9; }
.hba-media{
  margin-top: 16px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}
.hba-media img, .hba-media video{
  display: block;
  width: 100%;
  height: auto;
}
.hba-media--video video{
  height: 420px;
  object-fit: cover;
}
.hba-case__note{ margin-top: 14px; }

/* Closing */
.hba-close{
  background: #0f1114;
  color: #fff;
  padding: 70px 20px;
}
.hba-close__lead{
  font-size: 22px;
  line-height: 1.35;
  margin: 10px 0 10px;
  max-width: 860px;
}
.hba-close__actions{
  margin-top: 18px;
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 920px){
  .hba-split{ grid-template-columns: 1fr; }
  .hba-viz__frame{ height: 260px; }
  .hba-grid{ grid-template-columns: 1fr; }
  .hba-two{ grid-template-columns: 1fr; }
  .hba-case__cols{ grid-template-columns: 1fr; }
  .hba-media--video video{ height: 320px; }
}
/* =========================================================
   HBA — Green accent + comfort/luxury refinement (APPEND)
   Scope: only /solutions/home-building-automation
   ========================================================= */

.page-hba{
  --hba-accent: var(--green);                 /* Automatikon green */
  --hba-accent-08: rgba(31,157,85,.08);
  --hba-accent-12: rgba(31,157,85,.12);
  --hba-accent-18: rgba(31,157,85,.18);
  --hba-accent-28: rgba(31,157,85,.28);
  --hba-accent-45: rgba(31,157,85,.45);

  --hba-w: 1080px;                           /* readable line length */
}

/* Notes (secondary hierarchy) */
.page-hba .hba-note{
  opacity: .72;
  letter-spacing: .15px;
}
.page-hba .hba-note em{ font-style: italic; }

/* HERO: add green tint to avoid cold gray (keeps premium) */
.page-hba .hba-hero{
  position: relative;
  overflow: hidden;
}
.page-hba .hba-hero__overlay{
  background:
    radial-gradient(900px 520px at 18% 10%, var(--hba-accent-18), transparent 58%),
    radial-gradient(700px 420px at 80% 18%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.40));
}

/* Content wrapper readability */
.page-hba .hba-wrap{
  max-width: none;
}
.page-hba .hba-prose,
.page-hba .hba-block__head,
.page-hba .hba-case__inner,
.page-hba .hba-close__inner,
.page-hba .hba-dark__inner{
  max-width: var(--hba-w);
  margin-left: auto;
  margin-right: auto;
}

/* DARK section: richer + green depth, less flat gray */
.page-hba .hba-dark{
  background:
    radial-gradient(1200px 640px at 20% 10%, var(--hba-accent-12), transparent 58%),
    radial-gradient(900px 560px at 70% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #0b0f0d 0%, #0a0d0c 100%);
}

/* “Intelligent Building System layer” chip: green accent */
.page-hba .hba-chip{
  border-color: rgba(31,157,85,.28) !important;
  background: rgba(31,157,85,.10) !important;
  color: rgba(255,255,255,.82) !important;
}

/* STATES box: premium glass + green hint */
.page-hba .hba-states{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
}

/* State pills: softer + luxury */
.page-hba .hba-state{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
}

/* Highlight first state (Arrival) as active WITHOUT adding new class */
.page-hba .hba-states__row > .hba-state:first-of-type{
  border-color: rgba(31,157,85,.55);
  box-shadow: 0 0 0 1px rgba(31,157,85,.18), 0 14px 30px rgba(0,0,0,.35);
}

/* Arrow connectors: green line + arrow head (your .hba-arrow div is empty) */
.page-hba .hba-arrow{
  position: relative;
  width: 52px;
  height: 2px;
  margin: 0 10px;
  background: linear-gradient(90deg, rgba(31,157,85,.70), rgba(31,157,85,.18));
  border-radius: 99px;
  opacity: .95;
  filter: drop-shadow(0 0 10px rgba(31,157,85,.14));
}
.page-hba .hba-arrow::after{
  content:"";
  position:absolute;
  right:-2px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(31,157,85,.75);
  border-top: 2px solid rgba(31,157,85,.75);
  transform: translateY(-50%) rotate(45deg);
  opacity: .9;
}

/* States note: chip + dot + meta (secondary) */
.page-hba .hba-states__note{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.page-hba .hba-note-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(31,157,85,.10);
  border: 1px solid rgba(31,157,85,.22);
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
  letter-spacing: .15px;
}
.page-hba .hba-note-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(31,157,85,.95);
  box-shadow: 0 0 12px rgba(31,157,85,.35);
}
.page-hba .hba-note-meta{
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

/* Integrated domains: give subtle green framing so it doesn't feel like a catalog */
.page-hba .hba-domainlist{
  border-left: 2px solid rgba(31,157,85,.35);
  padding-left: 14px;
}

/* Case video: premium frame */
.page-hba .hba-media--video video{
  width: 100%;
  display:block;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.page-hba .hba-media__note{
  margin-top: 10px;
  font-size: 12px;
  opacity: .72;
  font-style: italic;
}

/* If note sits in dark area, keep it readable */
.page-hba .hba-dark .hba-media__note{
  color: rgba(255,255,255,.62);
}

/* =========================
   HBA — Hero background
   (local file in /solutions/home-building-automation/)
   ========================= */

.page-hba .hba-hero__bg{
  background-image: url("/assets/img/solutions/hba/hero-night.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02); /* malo “premium” bez vidljivog šava */
}
/* =========================================================
   HBA — header/logo + buttons + dropdown (NO extra overlays)
   Scope: only Home & Building Automation page
   ========================================================= */

/* 1) Transparent header readability (text + logo) */
body.page-hba:not(.is-scrolled) .site-header,
body.page-hba:not(.is-scrolled) header.site-header{
  background: transparent !important;
}

body.page-hba:not(.is-scrolled) .site-header a,
body.page-hba:not(.is-scrolled) header.site-header a{
  color: rgba(255,255,255,.92) !important;
}

/* Logo (works for img or svg) */
body.page-hba:not(.is-scrolled) .site-header .logo img,
body.page-hba:not(.is-scrolled) .site-header .brand img,
body.page-hba:not(.is-scrolled) header.site-header .logo img,
body.page-hba:not(.is-scrolled) header.site-header .brand img,
body.page-hba:not(.is-scrolled) .site-header .logo svg,
body.page-hba:not(.is-scrolled) .site-header .brand svg,
body.page-hba:not(.is-scrolled) header.site-header .logo svg,
body.page-hba:not(.is-scrolled) header.site-header .brand svg{
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

/* Optional: tiny shadow for readability (NOT for dropdown) */
body.page-hba:not(.is-scrolled) .site-header,
body.page-hba:not(.is-scrolled) header.site-header{
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}

/* 2) Ghost button on hero (white on light image issue) */
body.page-hba .hba-hero .btn--ghost-light,
body.page-hba .hba-hero a.btn--ghost-light{
  color: rgba(255,255,255,.95) !important;
  border-color: rgba(255,255,255,.40) !important;
  background: rgba(0,0,0,.22) !important;
}
body.page-hba .hba-hero .btn--ghost-light:hover,
body.page-hba .hba-hero a.btn--ghost-light:hover{
  background: rgba(0,0,0,.30) !important;
  border-color: rgba(255,255,255,.55) !important;
}

/* 3) Dropdown on transparent header:
      make dropdown itself dark/glass so white items are visible */
body.page-hba:not(.is-scrolled) .site-header .dropdown-menu,
body.page-hba:not(.is-scrolled) .site-header .nav-dropdown,
body.page-hba:not(.is-scrolled) .site-header .submenu,
body.page-hba:not(.is-scrolled) .site-header .sub-menu,
body.page-hba:not(.is-scrolled) header.site-header .dropdown-menu,
body.page-hba:not(.is-scrolled) header.site-header .nav-dropdown,
body.page-hba:not(.is-scrolled) header.site-header .submenu,
body.page-hba:not(.is-scrolled) header.site-header .sub-menu{
  background: rgba(12,12,12,.82) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45) !important;
}

/* Dropdown links */
body.page-hba:not(.is-scrolled) .site-header .dropdown-menu a,
body.page-hba:not(.is-scrolled) .site-header .nav-dropdown a,
body.page-hba:not(.is-scrolled) .site-header .submenu a,
body.page-hba:not(.is-scrolled) .site-header .sub-menu a,
body.page-hba:not(.is-scrolled) header.site-header .dropdown-menu a,
body.page-hba:not(.is-scrolled) header.site-header .nav-dropdown a,
body.page-hba:not(.is-scrolled) header.site-header .submenu a,
body.page-hba:not(.is-scrolled) header.site-header .sub-menu a{
  color: rgba(255,255,255,.92) !important;
  text-shadow: none !important;
}

body.page-hba:not(.is-scrolled) .site-header .dropdown-menu a:hover,
body.page-hba:not(.is-scrolled) .site-header .nav-dropdown a:hover,
body.page-hba:not(.is-scrolled) .site-header .submenu a:hover,
body.page-hba:not(.is-scrolled) .site-header .sub-menu a:hover,
body.page-hba:not(.is-scrolled) header.site-header .dropdown-menu a:hover,
body.page-hba:not(.is-scrolled) header.site-header .nav-dropdown a:hover,
body.page-hba:not(.is-scrolled) header.site-header .submenu a:hover,
body.page-hba:not(.is-scrolled) header.site-header .sub-menu a:hover{
  background: rgba(255,255,255,.08) !important;
}

/* 4) Keep scrolled header normal (don’t fight global styles) */
body.page-hba.is-scrolled .site-header,
body.page-hba.is-scrolled header.site-header{
  text-shadow: none !important;
}
/* =========================================
   HBA — Mobile header + burger + dropdown fix
   Applies only on Home & Building Automation hero
   (header transparent state)
   ========================================= */

.page-hba:not(.is-scrolled) .site-header{
  /* da header ostane “premium” i čitljiv preko slike */
  background: transparent;
}

/* Burger button: vidljiv na hero */
.page-hba:not(.is-scrolled) .nav-toggle{
  border-color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}

/* Burger ikona (SVG) — forsiraj bijelu */
.page-hba:not(.is-scrolled) .nav-toggle svg{
  color: #fff;
  fill: #fff;
}

.page-hba:not(.is-scrolled) .nav-toggle svg *{
  stroke: #fff;
  fill: #fff;
}

/* Logo + top nav linkovi vidljivi na hero */
.page-hba:not(.is-scrolled) .site-header .brand,
.page-hba:not(.is-scrolled) .site-header .brand *{
  color: #fff;
}

.page-hba:not(.is-scrolled) .site-header a{
  color: rgba(255,255,255,0.92);
}

/* Mobile dropdown panel: TAMAN / transparent umjesto bijelog */
@media (max-width: 900px){
  .page-hba:not(.is-scrolled) .mobile-nav{
    background: rgba(12,12,12,0.72);
    border-top: 1px solid rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .page-hba:not(.is-scrolled) .mobile-nav a{
    color: rgba(255,255,255,0.92);
  }

  .page-hba:not(.is-scrolled) .mobile-nav a:hover{
    background: rgba(255,255,255,0.08);
  }

  .page-hba:not(.is-scrolled) .mobile-nav-divider{
    background: rgba(255,255,255,0.14);
  }

  /* CTA dugmad u mobile dropdownu */
  .page-hba:not(.is-scrolled) .mobile-nav a.cta{
    border-color: rgba(255,255,255,0.70);
    color: #fff;
    background: rgba(255,255,255,0.06);
  }

  .page-hba:not(.is-scrolled) .mobile-nav a.cta:hover{
    background: rgba(255,255,255,0.12);
  }
}
/* =========================================
   HBA — Mobile menu polish (borders + carets)
   ========================================= */

@media (max-width: 900px){

  /* 1) CTA buttons: učini border/kontrast jasnim */
  .page-hba:not(.is-scrolled) .mobile-nav a.cta,
  .page-hba:not(.is-scrolled) .mobile-nav .btn,
  .page-hba:not(.is-scrolled) .mobile-nav .btn--ghost{
    border: 1px solid rgba(255,255,255,0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
  }

  .page-hba:not(.is-scrolled) .mobile-nav a.cta:hover,
  .page-hba:not(.is-scrolled) .mobile-nav .btn:hover,
  .page-hba:not(.is-scrolled) .mobile-nav .btn--ghost:hover{
    border-color: rgba(255,255,255,0.80) !important;
    background: rgba(255,255,255,0.12);
  }

  /* 2) Caret strelice — pokrij i pseudo-element i SVG varijante */
  .page-hba:not(.is-scrolled) .mobile-nav .has-dropdown::after,
  .page-hba:not(.is-scrolled) .mobile-nav .has-submenu::after,
  .page-hba:not(.is-scrolled) .mobile-nav .nav-item--has-children::after{
    color: rgba(255,255,255,0.92) !important;
    border-color: rgba(255,255,255,0.92) !important;
    opacity: 1 !important;
  }

  .page-hba:not(.is-scrolled) .mobile-nav .has-dropdown svg,
  .page-hba:not(.is-scrolled) .mobile-nav .has-submenu svg,
  .page-hba:not(.is-scrolled) .mobile-nav .nav-item--has-children svg{
    color: rgba(255,255,255,0.92) !important;
    fill: rgba(255,255,255,0.92) !important;
  }

  .page-hba:not(.is-scrolled) .mobile-nav .has-dropdown svg * ,
  .page-hba:not(.is-scrolled) .mobile-nav .has-submenu svg * ,
  .page-hba:not(.is-scrolled) .mobile-nav .nav-item--has-children svg *{
    stroke: rgba(255,255,255,0.92) !important;
    fill: rgba(255,255,255,0.92) !important;
  }

  /* mali “touch”: separator malo vidljiviji */
  .page-hba:not(.is-scrolled) .mobile-nav-divider{
    background: rgba(255,255,255,0.18) !important;
  }
}
/* =====================================================
   HBA — Mobile dropdown FINAL correction
   (arrows + spacing consistency)
   ===================================================== */

/* =========================================================
   HBA — Mobile menu on hero (iOS/Safari)
   Fix: invisible burger, white dropdown on dark hero,
        missing carets, uneven spacing, weak button borders
   ========================================================= */

@media (max-width: 899px){

  /* --- Burger / header controls on transparent hero --- */
  body.page-hba:not(.is-scrolled) .site-header{
    color: rgba(255,255,255,0.92);
  }

  body.page-hba:not(.is-scrolled) .site-header a{
    color: rgba(255,255,255,0.92);
  }

  /* logo + text */
  body.page-hba:not(.is-scrolled) .site-header .logo,
  body.page-hba:not(.is-scrolled) .site-header .logo *{
    color: rgba(255,255,255,0.92) !important;
    fill: currentColor !important;
  }

  /* burger button */
  body.page-hba:not(.is-scrolled) .site-header .nav-toggle{
    border-color: rgba(255,255,255,0.45) !important;
    background: rgba(0,0,0,0.22) !important;
    color: rgba(255,255,255,0.92) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  }

  /* if burger icon uses SVG */
  body.page-hba:not(.is-scrolled) .site-header .nav-toggle svg{
    stroke: currentColor !important;
    fill: none !important;
  }

  /* if burger icon uses spans/lines */
  body.page-hba:not(.is-scrolled) .site-header .nav-toggle span,
  body.page-hba:not(.is-scrolled) .site-header .nav-toggle i{
    background: rgba(255,255,255,0.92) !important;
  }

  /* --- Mobile menu overlay: dark glass instead of white --- */
  body.page-hba:not(.is-scrolled) .mobile-nav{
    background: rgba(10,12,12,0.72) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,0.10);
  }

  body.page-hba:not(.is-scrolled) .mobile-nav a{
    color: rgba(255,255,255,0.92) !important;
  }

  /* spacing between top-level items */
  body.page-hba:not(.is-scrolled) .mobile-nav .mobile-nav__inner,
  body.page-hba:not(.is-scrolled) .mobile-nav .mobile-nav-inner,
  body.page-hba:not(.is-scrolled) .mobile-nav{
    padding-top: 18px !important;
  }

  body.page-hba:not(.is-scrolled) .mobile-nav a,
  body.page-hba:not(.is-scrolled) .mobile-nav .mobile-sub-head{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* divider line in mobile menu */
  body.page-hba:not(.is-scrolled) .mobile-nav hr,
  body.page-hba:not(.is-scrolled) .mobile-nav .divider{
    border-color: rgba(255,255,255,0.14) !important;
    opacity: 1 !important;
  }

  /* --- Buttons inside mobile menu (Contact / Support / Client Portal) --- */
  body.page-hba:not(.is-scrolled) .mobile-nav .btn,
  body.page-hba:not(.is-scrolled) .mobile-nav a.btn{
    border-color: rgba(255,255,255,0.28) !important;
    color: rgba(255,255,255,0.92) !important;
  }

  body.page-hba:not(.is-scrolled) .mobile-nav .btn--primary{
    background: rgba(0,0,0,0.55) !important;
    border-color: rgba(255,255,255,0.18) !important;
  }

  body.page-hba:not(.is-scrolled) .mobile-nav .btn--ghost,
  body.page-hba:not(.is-scrolled) .mobile-nav .btn--ghost-light{
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.28) !important;
  }

  /* --- Dropdown carets (Solutions / Industries) visible on dark overlay --- */
  body.page-hba:not(.is-scrolled) .site-header .mobile-sub-toggle{
    border: 1px solid rgba(255,255,255,0.28) !important;
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.90) !important;
  }

  body.page-hba:not(.is-scrolled) .site-header .mobile-sub.is-open .mobile-sub-toggle{
    border-color: rgba(255,255,255,0.36) !important;
    background: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.95) !important;
  }

  /* caret icon if you use .sub-caret somewhere */
  body.page-hba:not(.is-scrolled) .site-header .sub-caret{
    color: rgba(255,255,255,0.90) !important;
    opacity: 1 !important;
  }

  /* submenu links indentation and readability */
  body.page-hba:not(.is-scrolled) .site-header .mobile-sub-menu a{
    color: rgba(255,255,255,0.86) !important;
    opacity: 1 !important;
  }

  /* reduce “washed” look behind menu content */
  body.page-hba:not(.is-scrolled) .mobile-nav{
    text-shadow: 0 1px 18px rgba(0,0,0,0.35);
  }
}
/* ==========================================
   HBA Case Video — responsive behavior
   - Default: show full video (no crop)
   - Desktop/tablet landscape: cinematic crop (top/bottom)
   ========================================== */

/* Default everywhere: show the whole clip */
.page-hba .hba-media--video{
  aspect-ratio: 910 / 512; /* ~16:9 */
  overflow: hidden;        /* needed for crop mode later */
}

.page-hba .hba-media--video video{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* full video visible */
  object-position: center;
}

/* Desktop + tablet LANDSCAPE: make the frame lower, crop top/bottom */
@media (min-width: 900px) and (orientation: landscape){
  .page-hba .hba-media--video{
    aspect-ratio: 23 / 9;  /* wider frame => lower height => crops video */
  }

  .page-hba .hba-media--video video{
    object-fit: cover;     /* crop */
    object-position: 50% 50%; /* center crop */
  }
}
/* =========================================================
   HEADER — Mobile dropdown panel polish
   - Prevent overflows on small screens
   - Make it feel like a panel (shadow + radius)
   - Keep header sticky usable
   ========================================================= */

@media (max-width: 1023px){
  .site-header{
    /* keep dropdown from bleeding outside on iOS */
    overflow: visible; /* (clip je znao praviti čudne efekte) */
  }

  .mobile-nav{
    /* Panel look */
    border-radius: 0 0 16px 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.12);

    /* Don't exceed viewport height */
    max-height: calc(100svh - 64px); /* 64px ~ header height on tablet/mobile */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* nicer spacing */
    padding: 14px 18px 18px;
  }

  /* subtle separation between rows */
  .mobile-nav a,
  .mobile-nav .mobile-sub-head{
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* fallback for browsers without svh */
@supports not (height: 100svh){
  @media (max-width: 1023px){
    .mobile-nav{
      max-height: calc(100vh - 64px);
    }
  }
}
/* =========================================================
   NAV — Active state (clean “Automatikon mix” accent)
   - No pill background
   - No vertical lines in dropdown
   - Uses the brand mix: green–neutral–blue
   ========================================================= */

:root{
  --ak-mix: linear-gradient(90deg,
    rgba(31,157,85,0.95) 0%,
    rgba(107,114,128,0.70) 50%,
    rgba(37,99,235,0.95) 100%
  );
}

/* Desktop: top-level active link */
.site-header .primary-nav a.is-active{
  background: transparent !important;
  font-weight: 650;
  position: relative;
}

/* “mix” underline */
.site-header .primary-nav a.is-active::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--ak-mix);
  opacity: 0.95;
}

/* CTA active stays strong but not “weird” */
.site-header .primary-nav a.cta.is-active{
  background: #111 !important;
  color: #fff !important;
}

/* Dropdown: active item = NO background, NO vertical line; only subtle mix underline */
.site-header .primary-nav .sub-menu a.is-active{
  background: transparent !important;
  font-weight: 650;
  position: relative;
}

/* remove any accidental left borders/markers */
.site-header .primary-nav .sub-menu a.is-active{
  border-left: 0 !important;
}

/* mix underline inside dropdown row */
.site-header .primary-nav .sub-menu a.is-active::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: var(--ak-mix);
  opacity: 0.90;
}

/* Mobile: active item just bold (clean) */
.site-header .mobile-nav a.is-active{
  font-weight: 650;
  background: transparent !important;
}

/* Mobile submenu active: optional tiny mix underline */
.site-header .mobile-nav .mobile-sub-menu a.is-active{
  font-weight: 650;
  position: relative;
  background: transparent !important;
}

.site-header .mobile-nav .mobile-sub-menu a.is-active::after{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--ak-mix);
  opacity: 0.85;
}

/* HBA transparent header: keep underline visible but subtle */
body.page-hba:not(.is-scrolled) .site-header .primary-nav a.is-active::after{
  opacity: 0.70;
  filter: saturate(0.85);
}

/* Center image + text vertically (only for img-left split on HBA) */
.page-hba .hba-split.hba-split--img-left{
  align-items: center;
}


/* Remove unwanted outline/border around HBA images */
.page-hba .hba-split img{
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Remove the outer frame outline for photo variant (keep rounded card, no black border) */
.page-hba .hba-viz--photo .hba-viz__frame{
  border: 0;
  background: transparent;
}
/* =========================================================
   HBA — Architectural collaboration: background visual layer
   (append-only patch)
   ========================================================= */

.hba-block--archbg .hba-archbg{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  padding: clamp(22px, 4vw, 44px);
  margin-top: 18px;
  background: #f3f4f6;
}

.hba-block--archbg .hba-archbg::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hba-archbg);
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: saturate(0.95) contrast(1.05);
}

.hba-block--archbg .hba-archbg::after{
  content: "";
  position: absolute;
  inset: 0;
  /* Text stays readable; image remains a subtle architectural texture */
  background: linear-gradient(90deg,
    rgba(255,255,255,0.93) 0%,
    rgba(255,255,255,0.82) 48%,
    rgba(255,255,255,0.68) 100%);
}

.hba-block--archbg .hba-archbg__content{
  position: relative;
  max-width: 62ch;
}

@media (min-width: 900px){
  .hba-block--archbg .hba-archbg{
    min-height: 360px;
    display: flex;
    align-items: flex-end;
  }
}

@media (max-width: 600px){
  .hba-block--archbg .hba-archbg::after{
    background: rgba(255,255,255,0.90);
  }
}
/* === HBA: Architectural collaboration — background panel (safe, non-breaking) ===
   - Uses a pseudo-element background so text/diagram remain fully opaque.
   - Set image per page via inline style: --hba-arch-bg: url('...') on .hba-arch-panel
*/
.page-hba .hba-block--archbg .hba-arch-panel{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.75);
  padding: 28px 28px 18px;
  margin-bottom: 18px;
}

/* Background image */
.page-hba .hba-block--archbg .hba-arch-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hba-arch-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  opacity: 0.22; /* keep subtle; do NOT fade content */
  filter: saturate(0.95) contrast(1.02);
}

/* Overlay to keep readability */
.page-hba .hba-block--archbg .hba-arch-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 520px at 22% 26%, rgba(248,250,252,0.78), rgba(248,250,252,0.92) 55%, rgba(248,250,252,0.98) 100%),
    linear-gradient(180deg, rgba(248,250,252,0.55), rgba(248,250,252,0.98));
}

.page-hba .hba-block--archbg .hba-arch-panel > *{
  position: relative;
  z-index: 1;
}

/* Keep the diagram nicely spaced after the panel */
.page-hba .hba-block--archbg .hba-diagram{
  margin-top: 12px;
}

/* Mobile padding */
@media (max-width: 760px){
  .page-hba .hba-block--archbg .hba-arch-panel{
    padding: 22px 18px 14px;
  }
}
/* =========================================================
   HBA — Architectural collaboration: FIX washout / invisible text
   Targets the exact markup from page source.
   ========================================================= */

.page-hba .hba-block--archbg{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

/* Reset anything that might be washing the whole block */
.page-hba .hba-block--archbg,
.page-hba .hba-block--archbg .hba-archbg{
  opacity: 1 !important;
  filter: none !important;
}

/* Make the archbg area the “canvas” */
.page-hba .hba-block--archbg .hba-archbg{
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
}

/* Background image layer (from inline CSS var --hba-archbg) */
.page-hba .hba-block--archbg .hba-archbg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hba-archbg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;

  /* optional: keep it rich but not too bright */
  filter: saturate(1.05) contrast(1.05) brightness(0.85);
}

/* Contrast scrim so text is readable on any photo */
.page-hba .hba-block--archbg .hba-archbg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.68) 0%,
    rgba(0,0,0,0.40) 45%,
    rgba(0,0,0,0.12) 100%
  );
  pointer-events:none;
}

/* Content above scrim */
.page-hba .hba-block--archbg .hba-archbg__content{
  position: relative;
  z-index: 2;
  padding: clamp(18px, 4vw, 44px);
  max-width: 62ch;
}

/* Force readable typography */
.page-hba .hba-block--archbg .hba-archbg__content h2{
  color: #fff !important;
}
.page-hba .hba-block--archbg .hba-archbg__content p{
  color: rgba(255,255,255,0.86) !important;
}

/* Optional: tiny text-shadow for extra legibility */
.page-hba .hba-block--archbg .hba-archbg__content h2,
.page-hba .hba-block--archbg .hba-archbg__content p{
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}

/* The sentence below the diagram should not disappear */
.page-hba .hba-block--archbg > .muted{
  color: rgba(17,17,17,0.68);
}
/* =========================================================
   HBA — Architecture → System Architecture → Behavior
   FINAL (centered / engineering clean)
   ========================================================= */

.page-hba .hba-diagram-wrap{
  display:flex;
  align-items:center;
  justify-content:center;      /* CENTERED */
  gap: 14px;
  margin: 28px auto 0;
  flex-wrap: nowrap;
  text-align:center;
}

/* Diagram note under the chain */
.page-hba .hba-diagram-note{
  max-width: 980px;
  margin: 16px auto 0;
}

@media (min-width: 768px){
  .page-hba .hba-diagram-note{ text-align: center; }
}
@media (max-width: 767px){
  .page-hba .hba-diagram-note{ text-align: left; }
}

/* Neutral engineered pill */
.page-hba .hba-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,0.18);
  background: rgba(255,255,255,0.85);
  color: rgba(17,17,17,0.86);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Active middle node — single blue accent */
.page-hba .hba-pill--active{
  border-color: rgba(37,99,235,0.45);     /* Automatikon blue #2563EB */
  background: rgba(37,99,235,0.10);
  color: rgba(17,17,17,0.95);
}

/* Clean connector line */
.page-hba .hba-chain-line{
  height: 2px;
  width: clamp(36px, 6vw, 72px);
  border-radius: 999px;
  background: rgba(17,17,17,0.20);
  flex: 0 0 auto;
}

/* Subtle flow emphasis AFTER active node */
.page-hba .hba-pill--active + .hba-chain-line{
  background: rgba(37,99,235,0.45);
}

/* --- MOBILE REFINEMENT --- */

@media (max-width: 640px){

  .page-hba .hba-diagram-wrap{
    flex-direction: column;
    gap: 10px;
  }

  .page-hba .hba-chain-line{
    width: 2px;
    height: 28px;
  }

}
/* =========================================================
   HBA — Architectural collaboration final polish
   - Better readability on photo (stronger left scrim + subtle text shadow)
   - Diagram: active pill = HBA green, connector lines = neutral grey
   ========================================================= */

/* --- 1) Photo overlay readability --- */

/* Stronger left-side scrim (keeps photo, improves contrast) */
.page-hba .hba-block--archbg .hba-archbg::after{
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.74) 0%,
    rgba(0,0,0,0.46) 46%,
    rgba(0,0,0,0.14) 100%
  ) !important;
}

/* Subtle, non-cheesy text shadow for legibility */
.page-hba .hba-block--archbg .hba-archbg__content h2,
.page-hba .hba-block--archbg .hba-archbg__content p{
  text-shadow:
    0 1px 10px rgba(0,0,0,0.40),
    0 1px 1px rgba(0,0,0,0.18) !important;
}

/* Slightly stronger weight only inside this overlay block */
.page-hba .hba-block--archbg .hba-archbg__content p{
  font-weight: 500;
  color: rgba(255,255,255,0.88) !important;
}

/* Optional: tiny bump in font-size only for this overlay paragraph text */
@media (min-width: 900px){
  .page-hba .hba-block--archbg .hba-archbg__content p{
    font-size: 15.5px;
    line-height: 1.55;
  }
}


/* --- 2) Diagram styling (pills + connector lines) --- */

/* Ensure diagram stays centered (as agreed) */
.page-hba .hba-diagram-wrap{
  justify-content: center !important;
}

/* Connector lines between pills: neutral grey (NOT colored) */
.page-hba .hba-chain-line{
  background: rgba(17,17,17,0.20) !important;
}

/* Active pill = HBA green */
.page-hba .hba-pill--active{
  border-color: rgba(31,157,85,0.55);   /* #1F9D55 */
  background: rgba(31,157,85,0.14);
  color: rgba(17,17,17,0.95);
}

/* Prevent any previous "flow emphasis" coloring the line after active pill */
.page-hba .hba-pill--active + .hba-chain-line{
  background: rgba(17,17,17,0.20) !important;
}
/* =========================================================
   HBA — Integrated domains: soft cards grid
   ========================================================= */

.page-hba .hba-domainlist{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 14px;
}

/* each <span> becomes a soft card */
.page-hba .hba-domainlist > span{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(17,17,17,0.10);
  background: rgba(255,255,255,0.75);
  color: rgba(17,17,17,0.86);
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

/* subtle "marker" dot (neutral, engineered) */
.page-hba .hba-domainlist > span::before{
  content:"";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(17,17,17,0.22);
  flex: 0 0 auto;
}

/* Optional: make the last item feel like "scope expands" */
.page-hba .hba-domainlist > span:last-child{
  background: rgba(255,255,255,0.62);
  border-style: dashed;
}

/* --- Responsive --- */
@media (max-width: 980px){
  .page-hba .hba-domainlist{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  .page-hba .hba-domainlist{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   HBA — Notes / footnotes (unified)
   Applies to: .hba-note + inline-muted notes within HBA blocks
   ========================================================= */

/* Core note style */
.page-hba .hba-note,
.page-hba .hba-small.hba-note,
.page-hba p.hba-note,
.page-hba p.hba-muted.hba-small{
  font-size: 13px;
  line-height: 1.45;
  color: rgba(17,17,17,0.62);
  margin-top: 10px;
}

/* Ensure italic notes look intentional, not “main content” */
.page-hba .hba-note em,
.page-hba p.hba-muted.hba-small em{
  font-style: italic;
  color: rgba(17,17,17,0.62);
}

/* Dark sections: note styling */
.page-hba .hba-dark .hba-note,
.page-hba .hba-dark p.hba-note,
.page-hba .hba-dark p.hba-muted-light.hba-small{
  color: rgba(255,255,255,0.68);
}

.page-hba .hba-dark .hba-note em,
.page-hba .hba-dark p.hba-muted-light.hba-small em{
  color: rgba(255,255,255,0.68);
}

/* Small spacing helper: notes should not create huge gaps */
.page-hba .hba-note + *{
  margin-top: 0;
}
/* =========================================================
   HBA — Architectural collaboration typography refinement
   Improves readability without visual noise
   ========================================================= */

/* Limit readable width of overlay content */
.page-hba .hba-block--archbg .hba-archbg__content{
  max-width: 52ch;
}

/* Improve heading spacing */
.page-hba .hba-block--archbg .hba-archbg__content h2{
  margin-bottom: 14px;
}

/* Improve paragraph readability */
.page-hba .hba-block--archbg .hba-archbg__content p{
  line-height: 1.6;
  letter-spacing: 0.1px;
}

/* Slightly increase vertical breathing room on desktop */
@media (min-width: 900px){
  .page-hba .hba-block--archbg .hba-archbg__content{
    padding: 48px 0 48px 48px;
  }
}
/* =========================================================
   HBA — Global spacing & rhythm (page-only)
   Unifies vertical rhythm across blocks, split, dark, case, close
   ========================================================= */

.page-hba{
  --hba-gap: clamp(28px, 4.2vw, 56px);
  --hba-gap-sm: clamp(16px, 2.6vw, 28px);
}

/* Default spacing between major sections inside the wrapper */
.page-hba .hba-wrap > section{
  margin-top: var(--hba-gap);
}
.page-hba .hba-wrap > section:first-child{
  margin-top: 0;
}

/* Consistent inner padding for standard blocks */
.page-hba .hba-block{
  padding-top: var(--hba-gap-sm);
  padding-bottom: var(--hba-gap-sm);
}

/* Titles: consistent distance to body */
.page-hba .hba-title,
.page-hba .hba-block h2.h2{
  margin-bottom: 14px;
}

/* Prose blocks: keep paragraphs evenly spaced */
.page-hba .hba-prose p{
  margin: 0 0 12px;
}
.page-hba .hba-prose p:last-child{
  margin-bottom: 0;
}

/* Lists: align spacing with prose */
.page-hba ul.hba-bullets{
  margin: 12px 0 0;
  padding-left: 18px;
}
.page-hba ul.hba-bullets li{
  margin: 6px 0;
}

/* Notes: reduce “random gaps” after notes */
.page-hba .hba-note{
  margin-top: 10px;
}

/* Split section: align vertical rhythm with blocks */
.page-hba .hba-split{
  padding-top: var(--hba-gap-sm);
  padding-bottom: var(--hba-gap-sm);
}

/* Dark section: keep it roomy but not huge */
.page-hba .hba-dark{
  margin-top: var(--hba-gap);
}
.page-hba .hba-dark__inner{
  padding-top: var(--hba-gap);
  padding-bottom: var(--hba-gap);
}

/* Case section: keep media and note tidy */
.page-hba .hba-case{
  margin-top: var(--hba-gap);
}
.page-hba .hba-media{
  margin-top: 18px;
}
.page-hba .hba-case__note{
  margin-top: 12px;
}

/* Close section: match dark rhythm */
.page-hba .hba-close{
  margin-top: var(--hba-gap);
}

/* Mobile: slightly tighter rhythm */
@media (max-width: 560px){
  .page-hba{
    --hba-gap: 28px;
    --hba-gap-sm: 14px;
  }
}
/* =========================================================
   HBA — FINAL OVERRIDE PATCH (must show visible changes)
   - Hero CTA hierarchy (primary vs secondary)
   - Case Before/After polish
   - Operational benefits + Engineering contexts made prominent
   - Retrofit emphasis ("Existing structure")
   ========================================================= */

/* ---------------------------
   1) HERO CTA hierarchy
   --------------------------- */

/* Primary CTA: slightly stronger presence */
.page-hba .hba-hero .hba-hero__actions a.btn.btn--primary{
  transform: translateZ(0);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28) !important;
}

/* Secondary CTA: clearly secondary, still readable */
.page-hba .hba-hero .hba-hero__actions a.btn.btn--ghost.btn--ghost-light{
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: rgba(255,255,255,0.92) !important;
  box-shadow: none !important;
}

.page-hba .hba-hero .hba-hero__actions a.btn.btn--ghost.btn--ghost-light:hover{
  background: rgba(255,255,255,0.11) !important;
  border-color: rgba(255,255,255,0.42) !important;
}

/* Optional: tighten spacing a bit so it looks intentional */
.page-hba .hba-hero .hba-hero__actions{
  gap: 12px !important;
}


/* ---------------------------
   2) CASE Before/After polish
   --------------------------- */

.page-hba .hba-case .hba-case__cols{
  gap: 18px !important;
}

.page-hba .hba-case .hba-case__label{
  font-weight: 750 !important;
  letter-spacing: 0.2px !important;
  opacity: 0.92;
}

.page-hba .hba-case .hba-case__col ul{
  margin: 12px 0 0 !important;
  padding-left: 18px !important;
}

.page-hba .hba-case .hba-case__col li{
  margin: 6px 0 !important;
  line-height: 1.46 !important;
}

/* Make the two columns feel like equal “cards” (subtle) */
.page-hba .hba-case .hba-case__col{
  border: 1px solid rgba(17,17,17,0.10) !important;
  background: rgba(255,255,255,0.70) !important;
  border-radius: 18px !important;
  padding: 16px 16px 14px !important;
}


/* ---------------------------------------------------------
   3) Make IMPORTANT sections stand out (marker + lift)
   Operational benefits + Engineering contexts
   --------------------------------------------------------- */

/* Add a subtle section header marker (HBA green) */
.page-hba section[aria-label="Operational benefits"] .hba-title,
.page-hba section[aria-label="Engineering contexts"] .hba-title{
  position: relative;
  padding-left: 14px;
}

.page-hba section[aria-label="Operational benefits"] .hba-title::before,
.page-hba section[aria-label="Engineering contexts"] .hba-title::before{
  content:"";
  position:absolute;
  left:0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  border-radius: 999px;
  background: #1F9D55; /* HBA division green */
  opacity: 0.95;
}

/* Give both sections a faint “panel” background so they read as key */
.page-hba section[aria-label="Operational benefits"],
.page-hba section[aria-label="Engineering contexts"]{
  border-radius: 24px;
  background: rgba(31,157,85,0.04) !important; /* super subtle */
  border: 1px solid rgba(17,17,17,0.06) !important;
  padding: 18px 18px 20px !important;
}

/* Lift the cards inside those sections (soft cards, higher contrast) */
.page-hba section[aria-label="Operational benefits"] .hba-box,
.page-hba section[aria-label="Engineering contexts"] .hba-box{
  border: 1px solid rgba(17,17,17,0.12) !important;
  background: rgba(255,255,255,0.82) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06) !important;
}

/* Slightly stronger titles inside cards for “presence” */
.page-hba section[aria-label="Operational benefits"] .hba-box .h3,
.page-hba section[aria-label="Engineering contexts"] .hba-box .h3{
  font-weight: 750 !important;
}

/* Improve grid spacing so it feels deliberate */
.page-hba section[aria-label="Operational benefits"] .hba-grid{
  gap: 16px !important;
}

.page-hba section[aria-label="Engineering contexts"] .hba-two{
  gap: 16px !important;
}


/* ---------------------------------------------------------
   4) Retrofit emphasis: highlight "Existing structure"
   (second card in Engineering contexts)
   --------------------------------------------------------- */

/* Make sure boxes can hold a top accent */
.page-hba section[aria-label="Engineering contexts"] .hba-two .hba-box{
  position: relative;
  overflow: hidden;
}

/* Target second card = Existing structure */
.page-hba section[aria-label="Engineering contexts"] .hba-two .hba-box:nth-child(2){
  border-color: rgba(31,157,85,0.22) !important;
}

/* Add a thin top accent bar (engineering, not flashy) */
.page-hba section[aria-label="Engineering contexts"] .hba-two .hba-box:nth-child(2)::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: #1F9D55;
  opacity: 0.95;
}

/* Add a tiny “focus dot” before the title (optional but effective) */
.page-hba section[aria-label="Engineering contexts"] .hba-two .hba-box:nth-child(2) .h3{
  position: relative;
  padding-left: 16px;
}

.page-hba section[aria-label="Engineering contexts"] .hba-two .hba-box:nth-child(2) .h3::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(31,157,85,0.85);
}

/* Mobile: reduce panel padding so it doesn't feel bulky */
@media (max-width: 560px){
  .page-hba section[aria-label="Operational benefits"],
  .page-hba section[aria-label="Engineering contexts"]{
    padding: 14px 14px 16px !important;
  }
}
/* =========================================================
   HBA — Mobile pass (phones)
   ========================================================= */
@media (max-width: 640px){

  /* Hero: tighten layout, make CTAs thumb-friendly */
  .page-hba .hba-hero__inner{
    padding-top: 68px !important;
    padding-bottom: 28px !important;
  }

  .page-hba .hba-hero__h1{
    font-size: clamp(28px, 7.2vw, 36px) !important;
    line-height: 1.12 !important;
  }

  .page-hba .hba-hero__lead{
    font-size: 15.5px !important;
    line-height: 1.5 !important;
  }

  .page-hba .hba-hero__actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .page-hba .hba-hero__actions a.btn{
    width: 100% !important;
    justify-content: center !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Global panels (Operational benefits / Engineering contexts) already styled:
     reduce padding + shadow weight on mobile */
  .page-hba section[aria-label="Operational benefits"],
  .page-hba section[aria-label="Engineering contexts"]{
    padding: 14px 14px 16px !important;
    border-radius: 20px !important;
  }

  .page-hba section[aria-label="Operational benefits"] .hba-box,
  .page-hba section[aria-label="Engineering contexts"] .hba-box{
    box-shadow: 0 10px 22px rgba(0,0,0,0.05) !important;
  }

  /* Operational benefits grid -> 1 column */
  .page-hba section[aria-label="Operational benefits"] .hba-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Engineering contexts -> 1 column */
  .page-hba section[aria-label="Engineering contexts"] .hba-two{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Integrated domains soft cards -> 1 column and tighter */
  .page-hba .hba-domainlist{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .page-hba .hba-domainlist > span{
    padding: 12px 12px !important;
    border-radius: 16px !important;
  }

  /* Behavioral architecture states: prevent overflow */
  .page-hba .hba-states__row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 12px !important;
    justify-items: stretch !important;
  }

  /* hide arrows on mobile if they exist as separate elements */
  .page-hba .hba-states__row .hba-arrow{
    display: none !important;
  }

  /* make state boxes consistent width */
  .page-hba .hba-states__row .hba-state{
    width: 100% !important;
    text-align: center !important;
  }

  /* Optional: reduce huge section gaps a bit */
  .page-hba{
    --hba-gap: 26px;
    --hba-gap-sm: 14px;
  }
}
/* =========================================================
   HBA — Applied methodology (Case section) — FINAL
   - Closed Automatikon mix frame (subtle, thin)
   - Clean Before/After rails (no corner clash)
   Replace previous case frame + rails patches with this block.
   ========================================================= */

.page-hba .hba-case{
  position: relative;
  margin-top: 64px;
  padding-top: 72px;
  padding-bottom: 72px;
  border-radius: 18px;
  overflow: hidden; /* keeps corners clean */
  background: linear-gradient(
    180deg,
    rgba(17,17,17,0.02) 0%,
    rgba(17,17,17,0.04) 100%
  );
  border-top: 1px solid rgba(17,17,17,0.06);
}

/* Closed continuous frame (subtle) */
.page-hba .hba-case::before{
  content:"";
  position:absolute;
  inset:0;
  padding: 1px;                 /* thinner frame */
  border-radius: 18px;

  background: conic-gradient(
    from 90deg,
    rgba(37,99,235,0.55) 0deg,     /* top: blue */
    rgba(31,157,85,0.55) 90deg,    /* right: green */
    rgba(37,99,235,0.55) 180deg,   /* bottom: blue */
    rgba(31,157,85,0.55) 270deg,   /* left: green */
    rgba(37,99,235,0.55) 360deg
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity: 0.55;               /* softer */
  pointer-events:none;
}

/* Ensure content sits above the frame */
.page-hba .hba-case__inner{
  position: relative;
  z-index: 1;
  padding-left: 6px;           /* tiny inset so content never touches the frame */
  padding-right: 6px;
}

/* =========================================================
   Before / After columns — FINAL subtle rails
   ========================================================= */

.page-hba .hba-case__col{
  position: relative;
  padding-left: 18px !important; /* room for rail */
}

/* rail (shifted to avoid rounded corner area) */
.page-hba .hba-case__col::before{
  content:"";
  position:absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 999px;
  opacity: 0.75;
}

/* BEFORE: subtle red */
.page-hba .hba-case__col--before::before{
  background: rgba(180,60,60,0.60);
}

/* AFTER: HBA green */
.page-hba .hba-case__col--after::before{
  background: rgba(31,157,85,0.75); /* #1F9D55 */
}

/* Mobile tuning */
@media (max-width: 560px){
  .page-hba .hba-case{
    margin-top: 40px;
    padding-top: 54px;
    padding-bottom: 56px;
    border-radius: 16px;
  }
  .page-hba .hba-case::before{
    padding: 1px;
    border-radius: 16px;
    opacity: 0.48;
  }
  .page-hba .hba-case__inner{
    padding-left: 4px;
    padding-right: 4px;
  }
  .page-hba .hba-case__col{
    padding-left: 16px !important;
  }
  .page-hba .hba-case__col::before{
    top: 18px;
    bottom: 18px;
  }
}
/* =========================================================
   ACCESS & SECURITY — FINAL CLEAN (single source of truth)
   Scope: <main class="container access-page access-page--dark">
   ========================================================= */

main.container.access-page.access-page--dark{
  /* page identity */
  --as-accent: #2b2f36;                 /* deep graphite */
  --as-accent-soft: rgba(43,47,54,.10);
  --as-accent-border: rgba(43,47,54,.20);

  /* neutralize paper container */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 18px;
}

/* ---------------------------------------------------------
   0) SECTION SPACING — must actually apply
   (previously overridden by other global rules)
   --------------------------------------------------------- */
main.container.access-page.access-page--dark > section.section{
  margin-top: 18px !important;
}
main.container.access-page.access-page--dark > section.hero{
  margin-bottom: 18px !important;
}
@media (max-width: 900px){
  main.container.access-page.access-page--dark > section.section{
    margin-top: 16px !important;
  }
}

/* ---------------------------------------------------------
   1) Card content: remove “blank line” feel
   --------------------------------------------------------- */
main.container.access-page.access-page--dark .card.card--dark > :first-child{ margin-top: 0 !important; }
main.container.access-page.access-page--dark .card.card--dark > :last-child{ margin-bottom: 0 !important; }

main.container.access-page.access-page--dark .card.card--dark h2,
main.container.access-page.access-page--dark .card.card--dark h3{
  margin-top: 0 !important;
}
main.container.access-page.access-page--dark .card.card--dark h2{ margin-bottom: 12px !important; }
main.container.access-page.access-page--dark .card.card--dark h3{ margin-bottom: 10px !important; }

main.container.access-page.access-page--dark .infra-split__text > :first-child,
main.container.access-page.access-page--dark .identity-split__content > :first-child{
  margin-top: 0 !important;
}

/* subtle graphite underline for section H2 (matches your current style) */
main.container.access-page.access-page--dark .card.card--dark h2{
  position: relative;
}
main.container.access-page.access-page--dark .card.card--dark h2::after{
  content:"";
  display:block;
  width: 44px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--as-accent);
  opacity: .35;
}

/* ---------------------------------------------------------
   2) Lists: default = NORMAL BULLETS everywhere (single column)
   --------------------------------------------------------- */
main.container.access-page.access-page--dark ul.list{
  display: block !important;
  list-style: disc !important;
  padding-left: 1.15em !important;
  margin: 12px 0 14px !important;
}
main.container.access-page.access-page--dark ul.list li{
  display: list-item !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: .35em 0 !important;
  border-radius: 0 !important;
}

/* ---------------------------------------------------------
   3) HERO (keep as agreed)
   --------------------------------------------------------- */
main.container.access-page.access-page--dark .hero.hero--media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none !important;
}
main.container.access-page.access-page--dark .hero.hero--media .hero__media{
  position: relative;
  height: 420px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none !important;
}
main.container.access-page.access-page--dark .hero.hero--media .hero__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
main.container.access-page.access-page--dark .hero.hero--media .hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,.28) 60%,
    rgba(0,0,0,.45) 100%
  );
}
main.container.access-page.access-page--dark .hero.hero--media .hero__content{
  position: absolute;
  left: 32px;
  bottom: 28px;
  max-width: 640px;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(15,15,15,.30);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  backdrop-filter: blur(2px);
}
main.container.access-page.access-page--dark .hero.hero--media .hero__content .kicker{ color: rgba(255,255,255,.72); }
main.container.access-page.access-page--dark .hero.hero--media .hero__content .h1{ color:#fff; margin-bottom:10px; }
main.container.access-page.access-page--dark .hero.hero--media .hero__content .lead{ color: rgba(255,255,255,.90); }

@media (max-width: 768px){
  main.container.access-page.access-page--dark .hero.hero--media .hero__media{ height: 320px; }
  main.container.access-page.access-page--dark .hero.hero--media .hero__content{
    left: 14px; right: 14px; bottom: 14px; max-width: none;
  }
}
@media (max-width: 520px){
  main.container.access-page.access-page--dark .hero.hero--media .hero__media{ height: 360px; }
  main.container.access-page.access-page--dark .hero.hero--media .hero__content{ padding: 14px 16px; }
}

/* ---------------------------------------------------------
   4) Three delivery paths (frame + grid)
   + Emphasize “Modern Access Intercom” card slightly
   --------------------------------------------------------- */
main.container.access-page.access-page--dark .card--frame{
  padding: 24px !important;
  border-color: var(--as-accent-border);
}
main.container.access-page.access-page--dark .card--frame .frame-title{
  margin: 0 0 16px 0 !important;
}

main.container.access-page.access-page--dark .delivery-paths{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 20px;
  align-items: stretch;
}
main.container.access-page.access-page--dark .delivery-paths > *{ min-width: 0; }

main.container.access-page.access-page--dark .delivery-paths__left{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
main.container.access-page.access-page--dark .delivery-paths__left .card{ flex: 1; }

/* emphasize the SECOND left card = Modern Access Intercom */
main.container.access-page.access-page--dark .delivery-paths__left .card:nth-child(2){
  border-color: var(--as-accent-border);
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
}
main.container.access-page.access-page--dark .delivery-paths__left .card:nth-child(2) h3{
  color: rgba(15,15,16,0.92);
}

/* retrofit column */
main.container.access-page.access-page--dark .delivery-paths__right{
  display: flex;
  flex-direction: column;
  position: relative;
}
main.container.access-page.access-page--dark .delivery-paths__right::before{
  content:"";
  position:absolute;
  left:-1px;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 999px;
  background: var(--as-accent);
  opacity: .20;
}

main.container.access-page.access-page--dark .delivery-paths__boom{
  margin-top: 16px;
  border-radius: 16px;
  overflow: hidden;
}
main.container.access-page.access-page--dark .delivery-paths__boom img{
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px){
  main.container.access-page.access-page--dark .delivery-paths{
    grid-template-columns: 1fr;
  }
  main.container.access-page.access-page--dark .delivery-paths__right::before{
    display:none;
  }
}

/* ---------------------------------------------------------
   5) Entry sets the tone — single frame (no double outline)
   Keeps your existing HTML/classes: .entry-frame / .entry-split / .entry-card...
   --------------------------------------------------------- */
main.container.access-page.access-page--dark .entry-frame{
  background:#000 !important;
  border: 1px solid rgba(255,255,255,0.10) !important; /* only one outline */
  border-radius: 18px;
  padding: 18px;
  overflow: hidden;
}
main.container.access-page.access-page--dark .entry-split{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 18px;
  align-items: stretch;
  /* IMPORTANT: no border/outline here -> prevents double ring */
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
main.container.access-page.access-page--dark .entry-split > *{ min-width: 0; max-width: 100%; }

main.container.access-page.access-page--dark .entry-card{
  border-radius: 16px;
  height: 100%;
}

main.container.access-page.access-page--dark .entry-card--text{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
}
main.container.access-page.access-page--dark .entry-card--text h2,
main.container.access-page.access-page--dark .entry-card--text p{
  color: #fff !important;
}
main.container.access-page.access-page--dark .entry-card--text .muted{
  color: rgba(255,255,255,0.72) !important;
}
main.container.access-page.access-page--dark .entry-note{
  margin-top: 16px;
  font-style: italic;
  color: rgba(255,255,255,0.72);
}

main.container.access-page.access-page--dark .entry-card--video{
  background:#000 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  padding: 0 !important;
  overflow: hidden;
  display:flex;
  align-items: stretch;
}
main.container.access-page.access-page--dark .entry-video{
  width:100%;
  height:100%;
  border-radius: 16px;
  overflow:hidden;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}
main.container.access-page.access-page--dark .entry-video video{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit: contain;
  background:#000;
}
@media (max-width: 900px){
  main.container.access-page.access-page--dark .entry-frame{ padding: 14px; }
  main.container.access-page.access-page--dark .entry-split{ grid-template-columns: 1fr; }
  main.container.access-page.access-page--dark .entry-card{ height: auto; }
}

/* ---------------------------------------------------------
   6) Device strip (Designed to match architecture)
   + keep clean even when images missing
   --------------------------------------------------------- */
main.container.access-page.access-page--dark .device-strip{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
  margin-bottom: 10px;
}
main.container.access-page.access-page--dark .device-strip__item{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  aspect-ratio: 16 / 10;
  display: flex;
}
main.container.access-page.access-page--dark .device-strip__item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: rgba(0,0,0,0.03);
  color: transparent;
  font-size: 0;
}
@media (max-width: 899px){
  main.container.access-page.access-page--dark .device-strip{ grid-template-columns: 1fr; }
  main.container.access-page.access-page--dark .device-strip__item{ aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------
   7) Identity-first (keep background image + overlay, centered)
   List stays bullets (already enforced globally)
   --------------------------------------------------------- */
main.container.access-page.access-page--dark .identity-split{
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #0b0b0c;
  border-radius: 24px;
}
main.container.access-page.access-page--dark .identity-split__media{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-image: url("/assets/img/identity-access-bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
}
main.container.access-page.access-page--dark .identity-split__content{
  position: relative;
  z-index: 2;
  padding: 24px;
  color: rgba(255,255,255,0.92);
}
main.container.access-page.access-page--dark .identity-split__content h2{ color:#fff; }
main.container.access-page.access-page--dark .identity-split__content p{ color: rgba(255,255,255,0.85); }

@media (min-width: 900px){
  main.container.access-page.access-page--dark .identity-split{
    min-height: 520px;
    display: flex;
    align-items: center;
    background-image: url("/assets/img/identity-access-bg.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
  }
  main.container.access-page.access-page--dark .identity-split__media{ display:none; }
  main.container.access-page.access-page--dark .identity-split__content{
    margin-left: auto;
    width: min(560px, 44%);
    padding: 34px 34px 32px;
  }
}
main.container.access-page.access-page--dark .identity-split::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  border-radius: inherit;
  background:
    radial-gradient(760px 540px at 56% 52%,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.00) 34%,
      rgba(0,0,0,0.16) 54%,
      rgba(0,0,0,0.52) 78%,
      rgba(0,0,0,0.78) 100%
    ),
    linear-gradient(90deg,
      rgba(11,11,12,0.06) 0%,
      rgba(11,11,12,0.32) 42%,
      rgba(11,11,12,0.86) 68%,
      rgba(11,11,12,0.92) 100%
    );
}

/* ---------------------------------------------------------
   8) Optimized by infrastructure (split)
   + fix subhead spacing
   --------------------------------------------------------- */
main.container.access-page.access-page--dark .infra-split{
  display: grid;
  gap: 18px;
  align-items: center;
}
main.container.access-page.access-page--dark .infra-split > *{ min-width: 0; }
main.container.access-page.access-page--dark .infra-split__media{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
main.container.access-page.access-page--dark .infra-split__media img{
  display: block;
  width: 100%;
  height: auto;
}

main.container.access-page.access-page--dark .infra-subhead{
  margin: 22px 0 10px !important;
  font-size: 1.05rem;
  line-height: 1.25;
}
main.container.access-page.access-page--dark .infra-subhead + p{ margin-top: 0 !important; }

@media (min-width: 900px){
  main.container.access-page.access-page--dark .infra-split{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 22px;
  }
}

/* ---------------------------------------------------------
   9) Designed for (4 cards) + left accent edge + CTA soften
   --------------------------------------------------------- */
main.container.access-page.access-page--dark .designed-for .logic-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 18px;
}
@media (min-width: 900px){
  main.container.access-page.access-page--dark .designed-for .logic-cards{
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

main.container.access-page.access-page--dark .designed-for .logic-card{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}
main.container.access-page.access-page--dark .designed-for .logic-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background: var(--as-accent);
  opacity: .85;
}
main.container.access-page.access-page--dark .designed-for .logic-card h3{ margin: 0 0 10px 0; }
main.container.access-page.access-page--dark .designed-for .logic-card p{ margin: 0; }

/* CTA row */
main.container.access-page.access-page--dark .cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
main.container.access-page.access-page--dark .cta-row .btn{ white-space: nowrap; }

/* soften the primary in this section ONLY (so Final CTA stays “the” CTA) */
main.container.access-page.access-page--dark .designed-for .cta-row .btn.btn--primary{
  background: rgba(17,24,39,0.10) !important;
  border-color: rgba(17,24,39,0.22) !important;
  color: rgba(17,24,39,0.92) !important;
}
main.container.access-page.access-page--dark .designed-for .cta-row .btn.btn--primary:hover{
  background: rgba(17,24,39,0.16) !important;
  border-color: rgba(17,24,39,0.28) !important;
}
/* =========================================================
   ACCESS — micro-fixes (append after the previous good patch)
   Only fixes: spacing around infra subhead, section gaps,
   Modern Access Intercom emphasis, muted consistency, CTA soften
   ========================================================= */

/* 1) Section spacing: tighten only the OUTER gaps (no padding resets) */
main.container.access-page.access-page--dark > section.section{
  margin-top: 18px !important;
}
@media (max-width: 900px){
  main.container.access-page.access-page--dark > section.section{
    margin-top: 16px !important;
  }
}
/* hero -> first section slightly tighter */
main.container.access-page.access-page--dark > section.hero + section.section{
  margin-top: 14px !important;
}

/* 2) Infra: fix “Integrated building control.” being glued to paragraph above */
main.container.access-page.access-page--dark .infra-split__text p + .infra-subhead{
  margin-top: 22px !important;   /* space ABOVE subhead */
}
main.container.access-page.access-page--dark .infra-subhead{
  margin-bottom: 10px !important; /* space BELOW subhead */
}

/* 3) Modern Access Intercom emphasis (make it stronger, not weaker)
   Targets: 2nd card inside the left stack */
main.container.access-page.access-page--dark .delivery-paths__left > .card.card--dark:nth-of-type(2){
  position: relative;
  border-color: rgba(17,24,39,.28) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.14) !important;
  transform: translateY(-1px); /* tiny lift */
}
main.container.access-page.access-page--dark .delivery-paths__left > .card.card--dark:nth-of-type(2)::before{
  content:"";
  position:absolute;
  left:-1px;
  top:18px;
  bottom:18px;
  width:4px;
  border-radius:999px;
  background: #111827;
  opacity:.22;
}

/* 4) Muted consistency: all muted on this page = italic + slightly softer */
main.container.access-page.access-page--dark .muted{
  font-style: italic;
  color: rgba(0,0,0,.62);
}
main.container.access-page.access-page--dark .card.card--dark .muted{
  color: rgba(0,0,0,.62);
}

/* 5) Soften the Designed-for CTA primary so it doesn’t fight the final CTA */
main.container.access-page.access-page--dark .designed-for .cta-row .btn.btn--primary{
  background: rgba(17,24,39,.86);
  border-color: rgba(17,24,39,.26);
  box-shadow: none;
}
main.container.access-page.access-page--dark .designed-for .cta-row .btn.btn--primary:hover{
  background: rgba(17,24,39,.96);
  border-color: rgba(17,24,39,.32);
}
/* =========================================================
   ACCESS — fixes for (1) section spacing + (2) identity text colors
   Append at the very end
   ========================================================= */

/* 1) REAL section spacing:
   The perceived gap is mostly section padding, not margin. */
main.container.access-page.access-page--dark > section.section.section--dark{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-top: 14px !important;
}

/* tighten the gap specifically BETWEEN sections (strongest selector) */
main.container.access-page.access-page--dark > section.section.section--dark + section.section.section--dark{
  margin-top: 14px !important;
}

/* hero to first section */
main.container.access-page.access-page--dark > section.hero + section.section.section--dark{
  margin-top: 12px !important;
}

/* 2) Undo the mistake: never force dark muted color globally on this page */
main.container.access-page.access-page--dark .muted{
  /* keep the “muted = italic” idea if you want consistency */
  font-style: italic;
  /* DO NOT force a dark color here */
  color: inherit;
}

/* Identity-first must ALWAYS stay readable on dark overlay */
main.container.access-page.access-page--dark .identity-split__content,
main.container.access-page.access-page--dark .identity-split__content h2,
main.container.access-page.access-page--dark .identity-split__content p,
main.container.access-page.access-page--dark .identity-split__content li{
  color: rgba(255,255,255,0.90) !important;
}

main.container.access-page.access-page--dark .identity-split__content .muted{
  color: rgba(255,255,255,0.72) !important;
  font-style: italic;
}
/* Device strip video behaves like image */
main.container.access-page.access-page--dark 
.device-strip__item--video video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Make sure all tiles are visually identical */
main.container.access-page.access-page--dark 
.device-strip__item{
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
main.container.access-page.access-page--dark 
.device-strip__item img,
main.container.access-page.access-page--dark 
.device-strip__item video{
  transition: transform .4s ease;
}

main.container.access-page.access-page--dark 
.device-strip__item:hover img,
main.container.access-page.access-page--dark 
.device-strip__item:hover video{
  transform: scale(1.04);
}
/* =========================================================
   SOLUTIONS — NETWORKS & INFRASTRUCTURE (page scope)
   ========================================================= */

/* Base */
.page-networks{
  --net-blue: #016BFF;
  --net-blue-dark: #4D8DFF;
  --net-dark: #121212;
  --net-dark-2: #151515;
  --net-text-dark: #F2F2F2;
  --net-muted-dark: #B8B8B8;
}

/* Hero */
.page-networks .networks-hero{
  position: relative;
}

.page-networks .networks-hero__cta{
  margin-top: 18px;
}

.page-networks .networks-hero__carousel{
  margin-top: 28px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}

.page-networks .networks-hero__slides{
  position: relative;
}

.page-networks .networks-hero__slide{
  display: none;
  margin: 0;
  padding: 0;
}

.page-networks .networks-hero__slide.is-active{
  display: block;
}

.page-networks .networks-hero__media{
  width: 100%;
  height: clamp(220px, 28vw, 420px);
}

.page-networks .networks-hero__cap{
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  color: #5F5F5F;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.9);
}

.page-networks .networks-hero__controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.9);
}

.page-networks .networks-hero__dots{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.page-networks .networks-hero__controls .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.25);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.page-networks .networks-hero__controls .dot.is-active{
  background: var(--net-blue);
  border-color: var(--net-blue);
}

.page-networks .icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  color: #111;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-networks .icon-btn:hover{
  border-color: rgba(0,0,0,.25);
}

/* Placeholder media blocks (replace later with real images/video) */
.page-networks .networks-media.is-placeholder{
  background:
    radial-gradient(80% 120% at 10% 10%, rgba(1,107,255,.10), rgba(0,0,0,0) 55%),
    radial-gradient(70% 90% at 90% 30%, rgba(1,107,255,.08), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}

/* Layout: TOC + content */
.page-networks .networks-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 26px;
}

/* TOC (hidden on mobile/tablet by default) */
.page-networks .networks-toc{
  display: none;
}

.page-networks .networks-toc__inner{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.7);
}

.page-networks .networks-toc__title{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6b6b6b;
  margin-bottom: 10px;
}

.page-networks .networks-toc__nav{
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.page-networks .toc-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #1F1F1F;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0);
}

.page-networks .toc-link:hover{
  background: rgba(0,0,0,.03);
}

.page-networks .toc-link.is-active{
  border-color: rgba(1,107,255,.25);
  background: rgba(1,107,255,.06);
}

.page-networks .toc-indicator{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  flex: 0 0 auto;
}

.page-networks .toc-link.is-active .toc-indicator{
  background: var(--net-blue);
}

.page-networks .networks-toc__subtitle{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6b6b6b;
  margin: 8px 0 10px;
}

.page-networks .networks-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-networks .chip{
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  color: #333;
  white-space: nowrap;
}

.page-networks .networks-toc__footer{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.page-networks .toc-top{
  font-size: 13px;
  color: #5F5F5F;
  text-decoration: none;
}

.page-networks .toc-top:hover{
  color: #1F1F1F;
}

/* Content spacing */
.page-networks .networks-content .section{
  margin-top: 0;
}

.page-networks .networks-section .h2{
  margin-bottom: 10px;
}

.page-networks .section-lead{
  margin: 0;
}

/* Details toggle / expand */
.page-networks .section-details{
  margin-top: 12px;
}

.page-networks .details-toggle{
  margin-top: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #1F1F1F;
}

.page-networks .details-toggle:hover{
  border-color: rgba(0,0,0,.22);
}

.page-networks .details-toggle.is-hidden-desktop{
  display: none;
}

/* Feature list (scoped, in case site doesn't have it) */
.page-networks .feature-list{
  margin: 10px 0 0;
  padding-left: 18px;
}

.page-networks .feature-list li{
  margin: 6px 0;
}

/* Visual checkpoints */
.page-networks .networks-visual__card{
  padding: 0; /* card already has padding in global CSS? ensure media edge-to-edge */
  overflow: hidden;
}

.page-networks .networks-visual__card .networks-visual__media{
  width: 100%;
  height: clamp(220px, 24vw, 360px);
}

.page-networks .networks-visual__caption{
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  color: #5F5F5F;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.9);
}

/* Dark section */
.page-networks .networks-section.is-dark{
  background: var(--net-dark);
  border-radius: 18px;
  padding: 26px 0;
}

.page-networks .networks-section.is-dark .card{
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
}

.page-networks .networks-section.is-dark .h2,
.page-networks .networks-section.is-dark p,
.page-networks .networks-section.is-dark li{
  color: var(--net-text-dark);
}

.page-networks .networks-section.is-dark .muted,
.page-networks .networks-section.is-dark .networks-visual__caption{
  color: var(--net-muted-dark);
}

.page-networks .networks-section.is-dark .details-toggle{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
  color: var(--net-text-dark);
}

.page-networks .networks-section.is-dark .details-toggle:hover{
  border-color: rgba(255,255,255,.28);
}

/* Closing CTA */
.page-networks .networks-cta__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.page-networks .networks-trademark{
  margin-top: 16px;
  font-size: 13px;
  opacity: .9;
}

/* Tablet adjustments */
@media (min-width: 768px){
  .page-networks .networks-visual__grid{
    align-items: stretch;
  }
}

/* Desktop: enable sticky TOC */
@media (min-width: 1024px){
  .page-networks .networks-layout{
    grid-template-columns: 320px 1fr;
    gap: 28px;
    align-items: start;
  }

  .page-networks .networks-toc{
    display: block;
  }

  .page-networks .networks-toc__inner{
    position: sticky;
    top: 96px; /* header height buffer */
  }

  /* On desktop, allow content to breathe */
  .page-networks .networks-content .networks-section .card,
  .page-networks .networks-content .networks-visual .card,
  .page-networks .networks-content .networks-cta .card{
    border-radius: 18px;
  }
}

/* Small screens: tighten */
@media (max-width: 767px){
  .page-networks .networks-hero__media{
    height: 240px;
  }
  .page-networks .networks-visual__card .networks-visual__media{
    height: 240px;
  }
}
/* =========================================================
   NETWORKS — TOC sticky fix (desktop)
   ========================================================= */

@media (min-width: 1024px){
  /* Make the ASIDE itself sticky (more reliable than inner sticky) */
  .page-networks .networks-toc{
    display: block;
    position: sticky;
    top: 96px;                 /* adjust if header height differs */
    align-self: start;
    height: calc(100vh - 120px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Inner no longer needs sticky */
  .page-networks .networks-toc__inner{
    position: static !important;
  }

  /* Optional: keep it looking clean when it scrolls */
  .page-networks .networks-toc{
    scrollbar-width: thin;
  }
  .page-networks .networks-toc::-webkit-scrollbar{
    width: 10px;
  }
  .page-networks .networks-toc::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.12);
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,.6);
  }
}
/* Networks TOC hint + clickable chips */
.page-networks .networks-toc__hint{
  margin: -6px 0 10px;
  font-size: 13px;
  color: #6b6b6b;
  line-height: 1.35;
}

/* chips are now buttons */
.page-networks .chip{
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.75);
  color: #333;
}

.page-networks .chip:hover{
  border-color: rgba(0,0,0,.22);
  background: rgba(255,255,255,.92);
}

.page-networks .chip.is-active{
  border-color: rgba(1,107,255,.35);
  background: rgba(1,107,255,.10);
  color: #0F2D66;
}
/* --- Networks Hero Image Fix (REPLACE WHOLE PATCH) --- */

/* 1) Media wrapper = fixed hero height */
.networks-hero__media{
  width: 100%;
  height: 520px;            /* kontrolisana hero visina */
  display: block;
  position: relative;
  overflow: hidden;
}

/* Images inside hero media: fill wrapper without stretching */
.networks-hero__media > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* default: crop (za 1 i 3) */
  object-position: center;  /* default centar */
}

/* Responsive heights */
@media (max-width: 1024px){
  .networks-hero__media{ height: 420px; }
}
@media (max-width: 640px){
  .networks-hero__media{ height: 320px; }
}

/* 2) Heatmap slide – NO CROP, always fully visible (ONLY slide 2) */
.networks-media--contain{
  background: #fff;         /* heatmap je bijela */
}

.networks-media--contain > img{
  object-fit: contain !important;
  object-position: center !important;
}

/* 3) Dashboard slide – must look "full" and readable */
.networks-hero__slide.is-dashboard .networks-hero__media > img{
  object-fit: cover;                 /* puni karticu */
  object-position: 50% 45%;          /* mali pomak da ekran upadne u kadar */
}
/* =========================================================
   Industrial Automation (Mini-site) — V2 Visual System
   Scope: body.page-industrial only
   ========================================================= */

body.page-industrial{
  background-color: #0f0f10;
  color: rgba(255,255,255,.92);
  /* technical texture: subtle grid + diagonal + vignette */
  background-image:
    radial-gradient(1200px 700px at 25% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(255,255,255,.07), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 1px, transparent 64px);
  background-attachment: fixed;
}

body.page-industrial a{ color: rgba(255,255,255,.92); }
body.page-industrial a:hover{ color: rgba(255,255,255,.98); }

body.page-industrial .container{
  /* keep content readable */
  padding-bottom: 80px;
}

body.page-industrial .kicker{
  color: rgba(255,255,255,.60);
}

body.page-industrial .h1, 
body.page-industrial .h2, 
body.page-industrial h3{
  color: rgba(255,255,255,.94);
}

body.page-industrial .lead{
  color: rgba(255,255,255,.78);
}

body.page-industrial .muted{
  color: rgba(255,255,255,.62) !important;
}

/* Hero block (dark, but still within existing layout) */
body.page-industrial .hero.ia-hero{
  padding-top: 90px;
  padding-bottom: 46px;
}

body.page-industrial .ia-hero-cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

body.page-industrial .ia-hero-note{
  margin-top: 12px;
}

/* Diagram */
body.page-industrial .ia-diagram{
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 14px 14px;
  overflow: hidden;
}
body.page-industrial .ia-diagram svg{ width: 100%; height: auto; display:block; }

/* Sections */
body.page-industrial .section{
  padding-top: 28px;
  padding-bottom: 28px;
}

/* Cards: industrial look */
body.page-industrial .card{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}

body.page-industrial .ia-card-soft{
  background: rgba(255,255,255,.03);
}

body.page-industrial .ia-section-head{
  margin-bottom: 12px;
}
body.page-industrial .ia-section-head .h2{
  margin-bottom: 6px;
}

/* Primary 3 cards emphasis */
body.page-industrial .ia-kpi{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
body.page-industrial .ia-kpi .ia-primary-card{
  grid-column: span 4;
  position: relative;
  padding: 22px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
}
body.page-industrial .ia-kpi .ia-primary-card::before{
  content:"";
  position:absolute;
  left: 18px;
  top: 18px;
  width: 3px;
  height: calc(100% - 36px);
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}
body.page-industrial .ia-card-top{ padding-left: 12px; }
body.page-industrial .ia-eyebrow{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  margin-bottom: 8px;
}
body.page-industrial .ia-kpi .ia-primary-card h3{
  margin: 0 0 10px 0;
}
body.page-industrial .ia-kpi .ia-primary-card p{
  color: rgba(255,255,255,.74);
}
body.page-industrial .ia-mini-link{
  margin-top: 12px;
}
body.page-industrial .ia-mini-link a{
  color: rgba(255,255,255,.88);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
body.page-industrial .ia-mini-link a:hover{
  border-bottom-color: rgba(255,255,255,.45);
}

/* Responsive */
@media (max-width: 900px){
  body.page-industrial .ia-kpi .ia-primary-card{ grid-column: span 12; }
}

/* Supporting grid */
body.page-industrial .grid.ia-grid{
  gap: 14px;
}
body.page-industrial .ia-card{
  padding: 18px;
  border-radius: 16px;
}
body.page-industrial .ia-card p{
  color: rgba(255,255,255,.72);
}

/* Platform grid (logo wall placeholder) */
body.page-industrial .ia-platform-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
body.page-industrial .ia-platform{
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
}
body.page-industrial .ia-small{
  font-size: .92rem;
  color: rgba(255,255,255,.62);
}
@media (max-width: 900px){
  body.page-industrial .ia-platform-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Form styling (industrial) */
body.page-industrial .ia-contact-card{
  padding: 22px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}
body.page-industrial .ia-form{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 14px;
}
body.page-industrial .ia-field{ grid-column: span 6; }
body.page-industrial .ia-field.full{ grid-column: span 12; }
@media (max-width: 900px){
  body.page-industrial .ia-field{ grid-column: span 12; }
}
body.page-industrial .ia-label{
  display:block;
  font-weight: 650;
  margin-bottom: 6px;
  color: rgba(255,255,255,.86);
}
body.page-industrial .ia-input,
body.page-industrial .ia-select,
body.page-industrial .ia-textarea{
  width:100%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
}
body.page-industrial .ia-textarea{
  min-height: 150px;
  resize: vertical;
}
body.page-industrial .ia-input::placeholder,
body.page-industrial .ia-textarea::placeholder{
  color: rgba(255,255,255,.40);
}
body.page-industrial .ia-help{
  margin-top: 6px;
  font-size: .92rem;
  color: rgba(255,255,255,.58);
}
body.page-industrial .ia-actions{
  grid-column: span 12;
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
  margin-top: 6px;
}

body.page-industrial .ia-hp{
  position:absolute;
  left:-9999px;
  top:-9999px;
  height:0;
  overflow:hidden;
}

/* Alerts */
body.page-industrial .ia-alert{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
}
body.page-industrial .ia-alert-success{
  border-color: rgba(31,157,85,.35);
  background: rgba(31,157,85,.10);
}
body.page-industrial .ia-alert-error{
  border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.10);
}

/* Buttons: keep existing system, but ensure contrast on dark */
body.page-industrial .btn{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}
body.page-industrial .btn:hover{
  background: rgba(255,255,255,.08);
}
body.page-industrial .btn.primary{
  background: rgba(255,255,255,.92);
  color: #111;
  border-color: rgba(255,255,255,.92);
}
body.page-industrial .btn.primary:hover{
  background: rgba(255,255,255,.98);
}

/* Footer remains unchanged, but ensure contrast if footer is light in global CSS */
body.page-industrial footer,
body.page-industrial .site-footer{
  background: transparent;
}
/* Industrial page – remove global white container card */
body.page-industrial .container{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.page-industrial main.container{
  max-width: 1200px;
}

body.page-industrial .hero{
  padding-left: 0;
  padding-right: 0;
}
/* =========================================================
   Industrial Automation — FULL-WIDTH override (A)
   Scope: body.page-industrial only
   ========================================================= */

body.page-industrial .container{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  /* kill global white card look */
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* create readable inner width */
body.page-industrial .hero,
body.page-industrial .section{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* optional: slightly wider on big screens */
@media (min-width: 1280px){
  body.page-industrial .hero,
  body.page-industrial .section{
    max-width: 1280px;
  }
}
/* Optional: darken header only on industrial page */
body.page-industrial .site-header{
  background: rgba(15,15,16,.65) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

body.page-industrial .site-header a,
body.page-industrial .site-header .brand{
  color: rgba(255,255,255,.92) !important;
}
/* =========================================================
   Industrial Automation — FINAL OVERRIDE
   (paste at the VERY END of main.css)
   ========================================================= */

/* 0) Keep global header layout sane: do NOT let main overrides break header container */
body.page-industrial .site-header .container{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* 1) Main can be full-bleed (without affecting header/footer) */
body.page-industrial main.container{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* readable inner width for content blocks */
body.page-industrial main.container .hero,
body.page-industrial main.container .section{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* 2) Overall page brightness (not “night black”) */
body.page-industrial{
  background-color: #141416 !important;
  color: rgba(255,255,255,.92) !important;

  /* Subtle circuit pattern (no tiles). */
  background-image:
    radial-gradient(1000px 650px at 25% -10%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(900px 560px at 85% 0%, rgba(255,255,255,.08), transparent 58%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='720'%20height='420'%20viewBox='0%200%20720%20420'%3E%3Cg%20fill='none'%20stroke='rgba(255,255,255,0.08)'%20stroke-width='1'%20stroke-linecap='round'%3E%3Cpath%20d='M40%2060%20h120%20v70%20h90'%20/%3E%3Cpath%20d='M250%20130%20h120%20v-60%20h120'%20/%3E%3Cpath%20d='M530%2070%20h140%20v120%20h-80'%20/%3E%3Cpath%20d='M110%20260%20h180%20v60%20h140'%20/%3E%3Cpath%20d='M520%20320%20h160%20v-80%20h-90'%20/%3E%3Cpath%20d='M40%20360%20h150%20v-70%20h90'%20/%3E%3C/g%3E%3Cg%20fill='rgba(255,255,255,0.10)'%3E%3Ccircle%20cx='160'%20cy='60'%20r='3'/%3E%3Ccircle%20cx='250'%20cy='130'%20r='3'/%3E%3Ccircle%20cx='370'%20cy='70'%20r='3'/%3E%3Ccircle%20cx='530'%20cy='70'%20r='3'/%3E%3Ccircle%20cx='670'%20cy='190'%20r='3'/%3E%3Ccircle%20cx='290'%20cy='320'%20r='3'/%3E%3Ccircle%20cx='520'%20cy='320'%20r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, 720px 420px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed;
}

/* 3) Header DARK, readable, logo stays where it should */
body.page-industrial .site-header{
  background: rgba(12,12,13,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px);
}

/* logo + nav text white */
body.page-industrial .site-header .brand,
body.page-industrial .site-header a,
body.page-industrial .site-header .primary-nav a{
  color: rgba(255,255,255,.92) !important;
}

/* if logo is svg using fill/currentColor */
body.page-industrial .site-header .brand svg,
body.page-industrial .site-header .brand svg *{
  fill: rgba(255,255,255,.92) !important;
}

/* CTA buttons in header (Contact/Support/Client Portal) */
body.page-industrial .site-header .primary-nav a.cta{
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}
body.page-industrial .site-header .primary-nav a.cta:hover{
  background: rgba(255,255,255,.10) !important;
}

/* 4) Dropdown menu DARK + readable (fix white-on-white) */
body.page-industrial .site-header .primary-nav .sub-menu{
  background: rgba(18,18,20,.98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
body.page-industrial .site-header .primary-nav .sub-menu a{
  color: rgba(255,255,255,.90) !important;
}
body.page-industrial .site-header .primary-nav .sub-menu a:hover{
  background: rgba(255,255,255,.08) !important;
}

/* 5) IMPORTANT: cards have NO texture. Clean panel backgrounds only. */
body.page-industrial .card{
  background-image: none !important;
  background-color: rgba(16,16,18,.82) !important;   /* clean panel */
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.35);
}

/* 6) Section text contrast */
body.page-industrial .lead{ color: rgba(255,255,255,.82) !important; }
body.page-industrial .muted{ color: rgba(255,255,255,.62) !important; }

/* 7) Diagram panel slightly brighter */
body.page-industrial .ia-diagram{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.14) !important;
}
/* =========================================================
   Industrial Automation — V3 (lighter, industrial, stable header)
   Paste at the VERY END of main.css
   ========================================================= */

/* ---------- 1) PAGE AMBIENT: lighter, easier on eyes ---------- */
body.page-industrial{
  background-color: #1a1b1f !important; /* less "night" */
  color: rgba(255,255,255,.90) !important;

  /* Industrial automation vibe:
     - subtle "ladder/terminal" lines
     - no tile grid
     - very low contrast */
  background-image:
    radial-gradient(1100px 700px at 20% -10%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(255,255,255,.08), transparent 58%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='920'%20height='520'%20viewBox='0%200%20920%20520'%3E%3Cg%20fill='none'%20stroke='rgba(255,255,255,0.08)'%20stroke-width='1'%20stroke-linecap='round'%3E%3Cpath%20d='M80%2080%20H360%20M80%20120%20H360%20M80%20160%20H360'/%3E%3Cpath%20d='M420%2080%20H840%20M420%20120%20H840%20M420%20160%20H840'/%3E%3Cpath%20d='M160%20260%20H760'/%3E%3Cpath%20d='M160%20300%20H760'/%3E%3Cpath%20d='M160%20340%20H760'/%3E%3Cpath%20d='M360%2080%20v80%20M420%2080%20v80'/%3E%3Cpath%20d='M120%20260%20v80%20M800%20260%20v80'/%3E%3C/g%3E%3Cg%20fill='rgba(255,255,255,0.10)'%3E%3Ccircle%20cx='360'%20cy='120'%20r='2'/%3E%3Ccircle%20cx='420'%20cy='120'%20r='2'/%3E%3Ccircle%20cx='160'%20cy='300'%20r='2'/%3E%3Ccircle%20cx='760'%20cy='300'%20r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, 920px 520px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed;
}

/* reduce "heavy vignette" feel if present from old rules */
body.page-industrial::before,
body.page-industrial::after{ content:none !important; }

/* ---------- 2) MAIN full-bleed but NOT breaking header ---------- */
body.page-industrial main.container{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.page-industrial main.container .hero,
body.page-industrial main.container .section{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- 3) HEADER: lock layout + dark readable ---------- */
/* Hard-lock header inner width/padding so logo NEVER "runs away" */
body.page-industrial .site-header .container,
body.page-industrial .site-header .inner,
body.page-industrial .site-header .wrap{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Dark header */
body.page-industrial .site-header{
  background: rgba(16,17,20,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px);
}

/* Logo + nav readable */
body.page-industrial .site-header a,
body.page-industrial .site-header .primary-nav a,
body.page-industrial .site-header .brand{
  color: rgba(255,255,255,.92) !important;
}
body.page-industrial .site-header .brand svg,
body.page-industrial .site-header .brand svg *{
  fill: rgba(255,255,255,.92) !important;
}

/* Header CTA buttons */
body.page-industrial .site-header .primary-nav a.cta{
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}
body.page-industrial .site-header .primary-nav a.cta:hover{
  background: rgba(255,255,255,.10) !important;
}

/* Dropdown: dark panel, good contrast */
body.page-industrial .site-header .primary-nav .sub-menu{
  background: rgba(22,23,26,.98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
body.page-industrial .site-header .primary-nav .sub-menu a{
  color: rgba(255,255,255,.92) !important;
}
body.page-industrial .site-header .primary-nav .sub-menu a:hover{
  background: rgba(255,255,255,.08) !important;
}

/* ---------- 4) CARDS: no texture, lighter panels, softer contrast ---------- */
body.page-industrial .card{
  background-image: none !important;
  background-color: rgba(26,27,31,.78) !important; /* lighter than before */
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28); /* softer */
}

/* text comfort */
body.page-industrial .lead{ color: rgba(255,255,255,.82) !important; }
body.page-industrial .muted{ color: rgba(255,255,255,.64) !important; }

/* diagram: lighter and cleaner */
body.page-industrial .ia-diagram{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.14) !important;
}
/* =========================================================
   Industrial Automation — V4 POLISH (premium dark, not "graveyard")
   Paste at the VERY END of main.css
   ========================================================= */

/* 1) Ambient: lift darkness + remove "wallpaper" feeling */
body.page-industrial{
  background-color: #1e2025 !important; /* brighter base */
  background-image:
    radial-gradient(1200px 720px at 22% -10%, rgba(255,255,255,.14), transparent 62%),
    radial-gradient(900px 620px at 85% 5%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 620px at 60% 110%, rgba(31,157,85,.08), transparent 55%),
    /* very subtle "signal lines" (NOT tiles) */
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 220px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 1px, transparent 280px);
  background-attachment: fixed;
}

/* 2) Header: keep dark, but make logo truly white and visible */
body.page-industrial .site-header{
  background: rgba(14,15,18,.70) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* If logo is SVG */
body.page-industrial .site-header .brand svg,
body.page-industrial .site-header .brand svg *{
  fill: rgba(255,255,255,.95) !important;
  opacity: 1 !important;
}

/* If logo is IMG/PNG/SVG as <img> and is dark by default */
body.page-industrial .site-header .brand img{
  filter: brightness(0) invert(1) !important; /* makes it white */
  opacity: .95 !important;
}

/* Nav text contrast */
body.page-industrial .site-header a,
body.page-industrial .site-header .primary-nav a{
  color: rgba(255,255,255,.92) !important;
}

/* Dropdown: premium dark */
body.page-industrial .site-header .primary-nav .sub-menu{
  background: rgba(20,22,26,.98) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}
body.page-industrial .site-header .primary-nav .sub-menu a{
  color: rgba(255,255,255,.92) !important;
}
body.page-industrial .site-header .primary-nav .sub-menu a:hover{
  background: rgba(255,255,255,.08) !important;
}

/* 3) Buttons: remove "pure white" glare */
body.page-industrial .btn.primary{
  background: rgba(245,245,246,.88) !important; /* not pure white */
  color: #0f1012 !important;
  border-color: rgba(245,245,246,.88) !important;
}
body.page-industrial .btn.primary:hover{
  background: rgba(255,255,255,.94) !important;
}
body.page-industrial .btn{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}

/* 4) Cards: cleaner, less border, less "boxed" */
body.page-industrial .card{
  background-color: rgba(18,20,24,.72) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
  border-radius: 18px;
}
body.page-industrial .card p{
  color: rgba(255,255,255,.74) !important;
  line-height: 1.55;
}

/* Headings a bit softer (less "shouty") */
body.page-industrial h3{
  letter-spacing: -0.01em;
}

/* 5) Primary 3 cards: make them look like "service modules" */
body.page-industrial .ia-kpi .ia-primary-card{
  background-color: rgba(18,20,24,.78) !important;
  border-color: rgba(255,255,255,.12) !important;
}
body.page-industrial .ia-kpi .ia-primary-card::before{
  /* subtle Automatikon mix accent (not circus) */
  background: linear-gradient(180deg, rgba(31,157,85,.55), rgba(37,99,235,.55)) !important;
  opacity: .65;
}

/* Eyebrow: less spaced-out, more premium */
body.page-industrial .ia-eyebrow{
  letter-spacing: .10em;
  color: rgba(255,255,255,.62) !important;
}

/* 6) Diagram block: stop looking like a huge empty panel */
body.page-industrial .ia-diagram{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  padding: 12px !important;
}

/* Make the little nodes/pills darker + tighter */
body.page-industrial .ia-diagram rect{
  fill: rgba(18,20,24,.62) !important;
  stroke: rgba(255,255,255,.14) !important;
}
body.page-industrial .ia-diagram text{
  fill: rgba(255,255,255,.84) !important;
}

/* 7) Long "capability" cards: reduce the ugly tall feel */
body.page-industrial .ia-card{
  padding: 18px 18px 16px !important;
}
body.page-industrial .ia-card .ia-eyebrow{
  margin-bottom: 10px !important;
}
/* =========================================================
   Industrial Automation — V5 polish (diagram + cards + daylight)
   Paste at VERY END of main.css
   ========================================================= */

/* 1) Daylight readability: lift mid-tones without losing dark mood */
body.page-industrial{
  background-color: #22252b !important;
  color: rgba(255,255,255,.92) !important;
}
body.page-industrial p,
body.page-industrial li{
  color: rgba(255,255,255,.76) !important;
}

/* 2) Kill heavy borders everywhere (they make it look like a prison) */
body.page-industrial .card{
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
}

/* =========================================================
   A) HERO DIAGRAM — make it a slim strip (no giant framed box)
   ========================================================= */

/* remove big container look */
body.page-industrial .ia-diagram{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: 14px !important;
}

/* the large rounded rectangle in SVG: hide it */
body.page-industrial .ia-diagram rect[rx="24"],
body.page-industrial .ia-diagram rect[ry="24"]{
  fill: transparent !important;
  stroke: transparent !important;
}

/* keep the small pills but make them tighter + cleaner */
body.page-industrial .ia-diagram rect{
  fill: rgba(18,20,24,.72) !important;
  stroke: rgba(255,255,255,.10) !important;
}

/* make the pills feel like "modules" */
body.page-industrial .ia-diagram text{
  fill: rgba(255,255,255,.88) !important;
  font-weight: 600;
}

/* OPTIONAL: slightly scale down whole diagram so it doesn't dominate */
body.page-industrial .ia-diagram svg{
  transform: scale(.96);
  transform-origin: left center;
}

/* =========================================================
   B) CAPABILITY CARDS (CONTROL/OPERATOR/SCADA/...) — fix formatting
   ========================================================= */

/* reduce "tower" feel: lower min-height / padding */
body.page-industrial .ia-card,
body.page-industrial .ia-cap-card,
body.page-industrial .cap-card{
  padding: 16px 16px 14px !important;
  border-radius: 16px !important;
  background: rgba(18,20,24,.70) !important;
}

/* eyebrow not so spaced, and less grey-on-grey */
body.page-industrial .ia-card .ia-eyebrow,
body.page-industrial .ia-cap-card .ia-eyebrow{
  letter-spacing: .14em !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.55) !important;
  margin-bottom: 10px !important;
}

/* headings: keep strong but not huge */
body.page-industrial .ia-card h3,
body.page-industrial .ia-cap-card h3{
  font-size: 20px !important;
  line-height: 1.15 !important;
  margin-bottom: 10px !important;
}

/* body text: more readable and less cramped */
body.page-industrial .ia-card p,
body.page-industrial .ia-cap-card p{
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.74) !important;
}

/* remove the "double border" look if cards have inner separators */
body.page-industrial .ia-card hr,
body.page-industrial .ia-cap-card hr{
  border-color: rgba(255,255,255,.08) !important;
}

/* if these cards are in a grid, add a bit more breathing room */
body.page-industrial .ia-caps-grid,
body.page-industrial .caps-grid{
  gap: 16px !important;
}

/* =========================================================
   C) CTA button glare — stop eye-burning white
   ========================================================= */
body.page-industrial .btn.primary{
  background: rgba(235,236,238,.86) !important;
  border-color: rgba(235,236,238,.86) !important;
  color: #0f1012 !important;
}
body.page-industrial .btn.primary:hover{
  background: rgba(245,246,248,.92) !important;
}
/* =========================================================
   Industrial Automation — V6 FIX (structure-safe polish)
   Paste at the VERY END of main.css
   ========================================================= */

/* 1) Background: less noisy, more premium (no lines cutting through text) */
body.page-industrial{
  background-color: #242830 !important;
  background-image:
    radial-gradient(1200px 720px at 22% -10%, rgba(255,255,255,.12), transparent 62%),
    radial-gradient(900px 620px at 85% 5%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 620px at 60% 110%, rgba(31,157,85,.08), transparent 55%),
    /* ultra subtle structure lines (almost invisible) */
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 260px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.010) 0, rgba(255,255,255,.010) 1px, transparent 1px, transparent 320px);
  background-attachment: fixed;
}

/* Give sections a clean “reading layer” so bg never fights text */
body.page-industrial .section{
  position: relative;
}
body.page-industrial .section::before{
  content:"";
  position:absolute;
  inset:-14px -10px;
  background: rgba(12,14,18,.18);
  border-radius: 22px;
  pointer-events:none;
  z-index: 0;
}
body.page-industrial .section > *{
  position: relative;
  z-index: 1;
}

/* 2) HERO VISUAL overlay (industrial schematic vibe, subtle) */
body.page-industrial .ia-hero{
  position: relative;
}
body.page-industrial .ia-hero::after{
  content:"";
  position:absolute;
  inset:-40px -20px -10px -20px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='420'%20viewBox='0%200%201200%20420'%3E%3Cg%20fill='none'%20stroke='rgba(255,255,255,0.10)'%20stroke-width='1'%20stroke-linecap='round'%3E%3Cpath%20d='M80%2090%20H420%20M80%20130%20H420%20M80%20170%20H420'/%3E%3Cpath%20d='M520%2090%20H1120%20M520%20130%20H1120%20M520%20170%20H1120'/%3E%3Cpath%20d='M420%2070%20V190%20M520%2070%20V190'/%3E%3Cpath%20d='M220%20260%20H980%20M220%20300%20H980%20M220%20340%20H980'/%3E%3Cpath%20d='M200%20240%20V360%20M1000%20240%20V360'/%3E%3C/g%3E%3Cg%20fill='rgba(255,255,255,0.10)'%3E%3Ccircle%20cx='420'%20cy='130'%20r='2'/%3E%3Ccircle%20cx='520'%20cy='130'%20r='2'/%3E%3Ccircle%20cx='220'%20cy='300'%20r='2'/%3E%3Ccircle%20cx='980'%20cy='300'%20r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .35;
  filter: blur(.2px);
  pointer-events:none;
  z-index: 0;
}
body.page-industrial .ia-hero > *{
  position: relative;
  z-index: 1;
}

/* 3) Diagram: STOP floating pills — give them a slim rail panel */
body.page-industrial .ia-diagram{
  margin-top: 18px !important;
  padding: 14px 14px 10px !important;
  background: rgba(18,20,24,.40) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}

/* keep SVG centered and not oversized */
body.page-industrial .ia-diagram svg{
  display:block;
  width: 100%;
  height: auto;
  max-width: 980px;
  margin: 0 auto;
}

/* 4) Primary 3 cards: keep clean, less “boxed” */
body.page-industrial .ia-kpi .ia-primary-card{
  background: rgba(18,20,24,.72) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22) !important;
}

/* 5) THE BIG FIX: service grid MUST NOT be 6 skinny towers */
body.page-industrial .grid.ia-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 18px !important;
}

/* tablet */
@media (max-width: 980px){
  body.page-industrial .grid.ia-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
/* mobile */
@media (max-width: 620px){
  body.page-industrial .grid.ia-grid{
    grid-template-columns: 1fr !important;
  }
}

/* make those cards feel like normal cards, not tall columns */
body.page-industrial .grid.ia-grid .card.ia-card{
  padding: 18px 18px 16px !important;
  border-radius: 18px !important;
  background: rgba(18,20,24,.70) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  min-height: 0 !important;
}
body.page-industrial .grid.ia-grid .card.ia-card p{
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.74) !important;
}

/* 6) Buttons: no “flashbang” white */
body.page-industrial .btn.primary{
  background: rgba(235,236,238,.86) !important;
  border-color: rgba(235,236,238,.86) !important;
  color: #0f1012 !important;
}
body.page-industrial .btn.primary:hover{
  background: rgba(245,246,248,.92) !important;
}
/* =========================================================
   Industrial Automation — V7 FIX
   - remove section overlap
   - stop bg lines fighting text
   - make capability cards 2 columns (wider, premium)
   ========================================================= */

/* 1) REMOVE the V6 "reading layer" that causes overlap */
body.page-industrial .section::before{
  content: none !important;
}

/* Add clean spacing so sections never touch visually */
body.page-industrial .section{
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

/* 2) Background: reduce line visibility hard (no "stuck to text") */
body.page-industrial{
  background-color: #242830 !important;
  background-image:
    radial-gradient(1200px 720px at 22% -10%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(900px 620px at 85% 5%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 620px at 60% 110%, rgba(31,157,85,.08), transparent 55%),
    /* lines almost invisible now */
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0, rgba(255,255,255,.008) 1px, transparent 1px, transparent 320px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.006) 0, rgba(255,255,255,.006) 1px, transparent 1px, transparent 360px) !important;
}

/* 3) HERO overlay: keep but make it subtle and bounded (no heavy blocks) */
body.page-industrial .ia-hero::after{
  opacity: .18 !important;
  inset: -20px -10px -10px -10px !important;
}

/* 4) Diagram: keep rail panel, but lighter + tighter */
body.page-industrial .ia-diagram{
  background: rgba(18,20,24,.30) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
  padding: 12px 12px 8px !important;
}

/* 5) PRIMARY ENGAGEMENT (3 cards): make them less boxed */
body.page-industrial .ia-kpi .ia-primary-card{
  background: rgba(18,20,24,.64) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.18) !important;
}

/* 6) BIG FIX: capability cards should NOT be 3x3 — make them 2 columns */
body.page-industrial .grid.ia-grid{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 18px !important;
}

/* wide screens: still 2 cols (premium, readable) */
@media (min-width: 1180px){
  body.page-industrial .grid.ia-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* tablet/mobile */
@media (max-width: 760px){
  body.page-industrial .grid.ia-grid{
    grid-template-columns: 1fr !important;
  }
}

/* capability card styling: "module" feel */
body.page-industrial .grid.ia-grid .card.ia-card{
  background: rgba(18,20,24,.62) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  padding: 18px 18px 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
  position: relative;
  overflow: hidden;
}

/* subtle top accent line (not loud) */
body.page-industrial .grid.ia-grid .card.ia-card::before{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31,157,85,.55), rgba(37,99,235,.55));
  opacity: .55;
}

/* improve typography in these cards */
body.page-industrial .grid.ia-grid .card.ia-card h3{
  font-size: 20px !important;
  line-height: 1.15 !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
body.page-industrial .grid.ia-grid .card.ia-card p{
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,.74) !important;
}

/* 7) Buttons: keep soft white, no glare */
body.page-industrial .btn.primary{
  background: rgba(235,236,238,.84) !important;
  border-color: rgba(235,236,238,.84) !important;
  color: #0f1012 !important;
}
body.page-industrial .btn.primary:hover{
  background: rgba(245,246,248,.90) !important;
}
/* =========================================================
   Industrial — Primary engagement cards: LEFT ACCENT BAR (Automatikon mix)
   Paste at END of main.css
   ========================================================= */

/* target the 3 primary engagement cards */
body.page-industrial .ia-kpi .ia-primary-card{
  position: relative;
  overflow: hidden;
  padding-left: 26px !important; /* space for the accent bar */
}

/* REMOVE any previous top accent or inner line you added */
body.page-industrial .ia-kpi .ia-primary-card::before{
  content: none !important;
}

/* if there is an existing thin vertical line element inside, neutralize it */
body.page-industrial .ia-kpi .ia-primary-card .ia-accent,
body.page-industrial .ia-kpi .ia-primary-card .accent,
body.page-industrial .ia-kpi .ia-primary-card .kicker-line{
  display: none !important;
}

/* add the thick left bar (Automatikon mix) */
body.page-industrial .ia-kpi .ia-primary-card::after{
  content:"";
  position:absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 6px;                 /* thicker than landing */
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(31,157,85,.95), rgba(37,99,235,.95));
  opacity: .95;
}

/* keep eyebrow away from edge */
body.page-industrial .ia-kpi .ia-primary-card .ia-eyebrow{
  margin-top: 2px !important;
}
/* =========================================================
   Contact Page — V1
   Scope: .page-contact only
   Add at the very end of main.css
   ========================================================= */

body.page-contact .contact-page{
  padding-bottom: 34px;
}

body.page-contact .contact-hero{
  position: relative;
  overflow: hidden;
  padding: 56px 0 18px;
}

body.page-contact .contact-hero::before{
  content: "";
  position: absolute;
  inset: 18px 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(31,157,85,0.00),
    rgba(31,157,85,0.65),
    rgba(37,99,235,0.75),
    rgba(37,99,235,0.00)
  );
  pointer-events: none;
}

body.page-contact .contact-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 28px;
  align-items: center;
}

body.page-contact .contact-hero__aside{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
}

body.page-contact .contact-hero__aside::before,
body.page-contact .contact-hero__aside::after{
  content: none;
  display: none;
}

body.page-contact .contact-hero__aside p,
body.page-contact .contact-hero__aside strong{
  margin: 0;
}

body.page-contact .contact-hero__graphic{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

body.page-contact .contact-hero__graphic::before,
body.page-contact .contact-hero__graphic::after{
  content: none;
  display: none;
}

body.page-contact .contact-hero__graphic img{
  display: block;
  width: 122%;
  max-width: none;
  height: auto;
  margin: -34px -62px -18px -14px;
  object-fit: contain;
  filter: saturate(1.03) contrast(1.01);
}

body.page-contact .contact-paths{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}

body.page-contact .contact-path{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
  padding: 18px 18px 18px 20px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 10px 28px rgba(0,0,0,0.035);
  transition:
    transform 160ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

body.page-contact .contact-path::before{
  content: "";
  position: absolute;
  inset: 16px auto 16px 0;
  width: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.14);
  opacity: 0.96;
}

body.page-contact .contact-path--general::before{
  background: rgba(107,114,128,0.72);
}

body.page-contact .contact-path--project::before{
  background: rgba(37,99,235,0.88);
}

body.page-contact .contact-path--partnership::before{
  background: rgba(31,157,85,0.88);
}

body.page-contact .contact-path--existing::before{
  background: linear-gradient(180deg, rgba(31,157,85,0.92), rgba(37,99,235,0.92));
}

body.page-contact .contact-path:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,0.16);
  box-shadow: 0 18px 36px rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.96);
}

body.page-contact .contact-path__eyebrow{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.48);
}

body.page-contact .contact-path h3{
  margin: 0;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

body.page-contact .contact-path p{
  margin: 0;
  color: rgba(0,0,0,0.70);
  line-height: 1.52;
}

body.page-contact .contact-path__hint{
  margin-top: auto;
  font-size: 14px;
  color: rgba(0,0,0,0.52);
}

body.page-contact .contact-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 18px;
  align-items: start;
}

body.page-contact .contact-form-card{
  position: relative;
  overflow: hidden;
}

body.page-contact .contact-form-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(31,157,85,0.75), rgba(37,99,235,0.75));
  opacity: 0.95;
}

body.page-contact .contact-form-intro{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}

body.page-contact .contact-form-intro p{
  margin: 0;
  color: rgba(0,0,0,0.68);
  max-width: 660px;
}

body.page-contact .contact-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.page-contact .contact-type-switch{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

body.page-contact .contact-type-switch button{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.11);
  background: rgba(255,255,255,0.82);
  border-radius: 14px;
  padding: 12px 12px;
  text-align: left;
  font: inherit;
  color: #111;
  cursor: pointer;
  position: relative;
  transition:
    transform 150ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

body.page-contact .contact-type-switch button:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 10px 22px rgba(0,0,0,0.045);
}

body.page-contact .contact-type-switch button.is-active,
body.page-contact .contact-type-switch button[data-active="true"]{
  border-color: rgba(17,17,17,0.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96)),
    linear-gradient(135deg, rgba(31,157,85,0.06), rgba(37,99,235,0.07));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.72),
    0 12px 24px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}

body.page-contact .contact-type-switch button.is-active::after,
body.page-contact .contact-type-switch button[data-active="true"]::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(31,157,85,0.95), rgba(37,99,235,0.95));
}

body.page-contact .contact-type-switch button strong{
  display: block;
  margin-bottom: 3px;
  font-size: 15px;
  line-height: 1.25;
}

body.page-contact .contact-type-switch button span{
  display: block;
  font-size: 13px;
  color: rgba(0,0,0,0.58);
  line-height: 1.35;
}

body.page-contact .contact-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body.page-contact .contact-field{
  display: flex;
  flex-direction: column;
  gap: 7px;
}

body.page-contact .contact-field--full{
  grid-column: 1 / -1;
}

body.page-contact .contact-field label{
  font-size: 14px;
  font-weight: 600;
  color: rgba(0,0,0,0.84);
}

body.page-contact .contact-field input,
body.page-contact .contact-field select,
body.page-contact .contact-field textarea{
  width: 100%;
  appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.94);
  color: #111;
  font: inherit;
  padding: 13px 14px;
  outline: none;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

body.page-contact .contact-field textarea{
  min-height: 182px;
  resize: vertical;
}

body.page-contact .contact-field input:focus,
body.page-contact .contact-field select:focus,
body.page-contact .contact-field textarea:focus{
  border-color: rgba(37,99,235,0.32);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
  background: rgba(255,255,255,1);
}

body.page-contact .contact-field small{
  color: rgba(0,0,0,0.54);
  line-height: 1.45;
}

body.page-contact .contact-form-note{
  margin-top: 16px;
  color: rgba(0,0,0,0.56);
  font-size: 14px;
  line-height: 1.55;
}

body.page-contact .contact-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  flex-wrap: wrap;
}

body.page-contact .contact-actions__meta{
  color: rgba(0,0,0,0.54);
  font-size: 14px;
}

body.page-contact .contact-submit{
  appearance: none;
  border: 1px solid #111;
  border-radius: 14px;
  background: #111;
  color: #fff;
  padding: 13px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms ease, opacity 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}

body.page-contact .contact-submit:hover{
  transform: translateY(-1px);
  opacity: 0.96;
}

body.page-contact .contact-side{
  display: grid;
  gap: 16px;
}

body.page-contact .contact-side .card{
  position: relative;
  overflow: hidden;
}

body.page-contact .contact-side .card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(31,157,85,0.68), rgba(37,99,235,0.68));
  opacity: 0.9;
}

body.page-contact .contact-side h3{
  margin-bottom: 12px;
}

body.page-contact .contact-side p + p{
  margin-top: 10px;
}

body.page-contact .contact-side__label{
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.48);
}

body.page-contact .contact-support-note{
  font-style: italic;
  color: rgba(0,0,0,0.62);
}

body.page-contact .contact-signature{
  padding-top: 8px;
}

body.page-contact .contact-signature .card{
  padding-top: 22px;
  padding-bottom: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92)),
    linear-gradient(135deg, rgba(31,157,85,0.035), rgba(37,99,235,0.04));
}

body.page-contact .contact-signature p{
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: rgba(0,0,0,0.84);
}

body.page-contact .sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px){
  body.page-contact .contact-hero__grid{
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
    gap: 20px;
  }

  body.page-contact .contact-hero__graphic{
    max-width: 430px;
  }

  body.page-contact .contact-hero__graphic img{
    width: 118%;
    margin: -18px -34px -8px -8px;
  }

  body.page-contact .contact-paths{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-contact .contact-type-switch{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px){
  body.page-contact .contact-hero{
    padding-top: 42px;
    padding-bottom: 10px;
  }

  body.page-contact .contact-hero__grid,
  body.page-contact .contact-layout{
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.page-contact .contact-hero__aside{
    justify-content: flex-start;
  }

  body.page-contact .contact-hero__graphic{
    max-width: 340px;
    margin: 4px auto 0;
  }

  body.page-contact .contact-hero__graphic img{
    width: 112%;
    margin: -10px -18px -6px -10px;
  }
}

@media (max-width: 640px){
  body.page-contact .contact-paths,
  body.page-contact .contact-type-switch,
  body.page-contact .contact-form-grid{
    grid-template-columns: 1fr;
  }

  body.page-contact .contact-path{
    min-height: unset;
  }

  body.page-contact .contact-form-intro,
  body.page-contact .contact-actions{
    display: block;
  }

  body.page-contact .contact-pill{
    margin-top: 12px;
  }

  body.page-contact .contact-actions__meta{
    margin-bottom: 14px;
  }

  body.page-contact .contact-signature p{
    font-size: 19px;
  }
}