/* =========================
   Base + Design Tokens
   ========================= */
   :root{
    /* Full-page background art — bump ?v= when you replace assets/ai-brain-hero.png (all pages use this via body). */
    --page-bg-image: url("assets/ai-brain-hero.png?v=3");

    /* Colors */
    --bg: #0b1220;
    --surface: #0f1a2e;
    --surface-2: #142342;
    --text: #e8eefc;
    --muted: #b7c3df;
    --border: rgba(232,238,252,.14);
  
    --primary: #5b8cff;
    --primary-2: #7aa6ff;
    --danger: #ff5b6e;
    --success: #4ade80;
    --accent: #f8a435;
    --accent-2: #ffb649;
  
    /* Typography */
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
    /* Layout */
    --container: 1120px;
    --radius: 14px;
    --radius-sm: 10px;
  
    /* Spacing scale */
    --s-1: .25rem;
    --s-2: .5rem;
    --s-3: .75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
  
    /* Effects */
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --focus: 0 0 0 3px rgba(91,140,255,.35);
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
 body{
    margin:0;
    font-family:var(--font);
    color:var(--text);
    background-image: var(--page-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(550px 350px at 20% 0%, rgba(91,140,255,.25), transparent 55%),
      radial-gradient(550px 350px at 80% 0%, rgba(122,166,255,.2), transparent 55%);
    opacity:.85;
    mix-blend-mode:screen;
  }
  body .site-header,
  body main,
  body .site-footer{
    position:relative;
    z-index:1;
  }
  /* Single full-page background—hero section does not draw its own */
  body .hero{
    background-image: none;
    background: transparent;
  }
  body .hero::before{
    display: none;
  }

/* (removed: Viztec-specific homepage background that was accidentally applied here) */
  
  img,svg,video{ max-width:100%; height:auto; display:block; }
  a{ color:inherit; text-decoration:none; }
  a:hover{ text-decoration:underline; }
  p{ margin:0 0 var(--s-4); color:var(--muted); }
  h1,h2,h3,h4{
    margin:0 0 var(--s-3);
    line-height:1.15;
    letter-spacing:-.02em;
  }
  h1{ font-size:clamp(2rem, 4vw, 3rem); }
  h2{ font-size:clamp(1.5rem, 3vw, 2.25rem); }
  h3{ font-size:1.25rem; }
  small{ color:var(--muted); }
  
  :focus-visible{ outline:none; box-shadow:var(--focus); border-radius:10px; }

  .text-danger{ color: var(--danger); }
  
  /* =========================
     Layout Helpers
     ========================= */
  .container{
    width:min(100% - 2rem, var(--container));
    margin-inline:auto;
  }
  .section{ padding: clamp(2rem, 4vw, 4rem) 0; }
  .section.tight-top{ padding-top: clamp(0.75rem, 1.5vw, 1.25rem); }
  .section--tighter-top{
    padding-top: clamp(0.125rem, 0.5vw, 0.75rem);
  }
  .stack > * + *{ margin-top: var(--s-4); }
  
  .grid{
    display:grid;
    gap: var(--s-5);
  }
  .grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.two.grid-two-centered{ max-width: 720px; margin-inline: auto; }
  .grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  
  /* Top 5 article: row1 = 3 equal cards, row2 = 2 wider cards (same total width) */
  .grid.three.concerns-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid.three.concerns-grid .card.soft:nth-child(1),
  .grid.three.concerns-grid .card.soft:nth-child(2),
  .grid.three.concerns-grid .card.soft:nth-child(3){
    grid-column: span 2;
  }
  .grid.three.concerns-grid .card.soft:nth-child(4),
  .grid.three.concerns-grid .card.soft:nth-child(5){
    grid-column: span 3;
  }
  
  @media (max-width: 900px){
    .grid.two, .grid.three{ grid-template-columns: 1fr; }
    .grid.three.concerns-grid{ grid-template-columns: 1fr; }
    .grid.three.concerns-grid .card.soft:nth-child(1),
    .grid.three.concerns-grid .card.soft:nth-child(2),
    .grid.three.concerns-grid .card.soft:nth-child(3),
    .grid.three.concerns-grid .card.soft:nth-child(4),
    .grid.three.concerns-grid .card.soft:nth-child(5){ grid-column: auto; }
  }
  
  /* =========================
     Header / Nav
     ========================= */
  .site-header{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter: blur(10px);
    background: rgba(11,18,32,.6);
    border-bottom: 1px solid var(--border);
  }
  .navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: .9rem 0;
    gap: var(--s-4);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:.7rem;
    font-weight:700;
    letter-spacing:.01em;
  }
  .brand-badge{
    width:34px; height:34px;
    border-radius:10px;
    background: linear-gradient(135deg, var(--primary), rgba(91,140,255,.25));
    box-shadow: 0 10px 25px rgba(91,140,255,.18);
  }
  .brand-logo{
    width:220px;
    max-width: 60vw;
    max-height:56px;
    height:auto;
    object-fit:contain;
    display:block;
  }
  .nav-links{
    display:flex;
    align-items:center;
    gap: var(--s-5);
  }
  .nav-links a{
    color: var(--muted);
    padding:.35rem .2rem;
  transition: background .18s ease, color .18s ease, opacity .18s ease;
  }
  .nav-links a[aria-current="page"]{
    color: var(--text);
    text-decoration:none;
    border-bottom: 2px solid rgba(91,140,255,.8);
  }
@media (hover: hover){
  .nav-links a:hover{
    text-decoration:none;
    opacity:.8;
  }
}
.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  z-index: 10;
}
.nav-item:hover{
  z-index: 100;
}
.nav-submenu{
  position:absolute;
  top:100%;
  left:0;
  min-width: 200px;
  padding:.4rem 0;
  margin-top: 0;
  background: rgba(11,18,32,.98);
  border-radius: 12px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  opacity:0;
  pointer-events:none;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
  z-index: 100;
  visibility: hidden;
}
/* Invisible bridge so moving from trigger to submenu doesn’t hide it */
.nav-submenu::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  /* Make the hover “bridge” taller so you don’t lose the menu
     when moving the mouse from the top label down into the list */
  height:32px;
}
.nav-item:hover .nav-submenu,
.nav-submenu:hover,
.nav-item.submenu-open .nav-submenu{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
  visibility: visible;
}
.nav-submenu a{
  display:block;
  padding:.45rem 1.1rem;
  opacity:1;
}
.nav-submenu a:hover{
  background: rgba(91,140,255,.12);
}

/* Industry sector links nested under "Industries" in Services menu */
.nav-submenu-nested{
  margin: 0.15rem 0 0.35rem;
  padding: 0.2rem 0 0.35rem 0.65rem;
  margin-left: 0.5rem;
  border-left: 2px solid rgba(91, 140, 255, 0.35);
}
.nav-submenu-nested a{
  padding-left: 0.85rem;
  font-size: 0.92rem;
  color: rgba(232, 238, 252, 0.88);
}
.nav-submenu-nested a[aria-current="page"]{
  color: var(--text);
}
  
  /* =========================
     Surfaces
     ========================= */
  .card{
    background: linear-gradient(180deg, rgba(20,35,66,.72), rgba(15,26,46,.72));
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1rem, 2vw, 1.4rem);
  }

  /* Align "Read more"/CTA buttons across non-key cards in 3-column grids
     (keeps key-service buttons untouched since they already have key-card rules). */
  .grid.three > .card:not(.key-card){
    display:flex;
    flex-direction:column;
  }
  .grid.three > .card:not(.key-card) > a.btn{
    margin-top:auto;
    align-self:flex-start;
    width:auto;
    white-space:nowrap;
    margin-inline:0;
  }
  .card.soft{
    box-shadow:none;
    background: rgba(15,26,46,.55);
  }
  .card.soft:hover,
  .key-card:hover{
    border-color: rgba(248,164,53,.8);
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
    transform: translateY(-2px);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }
  .hr{
    border:0;
    height:1px;
    background: var(--border);
    margin: var(--s-6) 0;
  }
  
  /* =========================
     Buttons
     ========================= */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    padding:.75rem 1rem;
    border-radius: 12px;
    border:1px solid transparent;
    font-weight:600;
    cursor:pointer;
    user-select:none;
    transition: transform .08s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .btn:active{ transform: translateY(1px); }
  
  .btn-primary{
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #1b1306;
    box-shadow: 0 12px 28px rgba(248,164,53,.55);
  }
  .btn-primary:hover{ filter: brightness(1.05); text-decoration:none; }
  .btn-cta{
    background: var(--accent);
    color: #1b1306;
    box-shadow: 0 12px 28px rgba(248,164,53,.55);
    border-color: rgba(0,0,0,.4);
  }
  .btn-cta:hover{
    filter: brightness(1.05);
    text-decoration:none;
  }
.btn-sm{
  padding:.45rem .9rem;
  font-size:.9rem;
  border-radius:10px;
}

/* Smaller buttons for dense table layouts */
.btn-table{
  padding:.3rem .6rem;
  font-size:.8rem;
}

  .btn-outline{
    background: rgba(15,26,46,.35);
    border-color: rgba(232,238,252,.18);
    color: var(--text);
  }
  .btn-outline:hover{
    background: rgba(20,35,66,.45);
    text-decoration:none;
  }
  
  .btn-link{
    padding:0;
    background:transparent;
    border:0;
    color: var(--primary-2);
  }
  .btn-link:hover{ text-decoration:underline; }
  
  /* =========================
     Forms
     ========================= */
  label{ display:block; font-weight:600; margin:0 0 .4rem; }
  .input, textarea, select{
    width:100%;
    color: var(--text);
    background: rgba(7,11,20,.55);
    border:1px solid rgba(232,238,252,.18);
    border-radius: 12px;
    padding:.75rem .9rem;
    outline:none;
  }
  textarea{ min-height: 120px; resize: vertical; }
  .input::placeholder, textarea::placeholder{ color: rgba(183,195,223,.75); }
  .input:focus, textarea:focus, select:focus{ box-shadow: var(--focus); border-color: rgba(91,140,255,.55); }
  
  .form-row{ display:grid; gap: var(--s-4); }
  @media (min-width: 900px){
    .form-row.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  
  /* =========================
     Hero / Page title
     ========================= */
  .hero{
    /* Keep top padding consistent, but standardise the gap below heroes across pages */
    padding: clamp(3rem, 6vw, 6rem) 0 clamp(1.25rem, 3vw, 2rem);
    position:relative;
    /* Hero sections sit on top of the global glassy background image */
    background: transparent;
  }
  .hero.hero--compact{
    padding-top: clamp(2.25rem, 4vw, 3rem);
    padding-bottom: clamp(1.25rem, 3vw, 2rem);
  }

  /* Match vertical rhythm: the section that follows a hero starts closer */
  .hero + .section{
    padding-top: clamp(0.125rem, 0.5vw, 0.75rem);
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(550px 350px at 20% 0%, rgba(91,140,255,.25), transparent 55%),
      radial-gradient(550px 350px at 80% 0%, rgba(122,166,255,.2), transparent 55%);
    opacity:.85;
    mix-blend-mode:screen;
  }
  .hero-grid{
    position:relative;
    z-index:1;
    display:grid;
    gap: var(--s-6);
  }
  @media (min-width: 900px){
    .hero-grid{
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      align-items:flex-start;
    }
  }
  .hero-copy h1{
    margin-top: var(--s-4);
    font-size: clamp(2.4rem, 4vw, 3.1rem);
  }
  .hero-fact{
    color: var(--accent);
    font-style: italic;
    text-align: center;
    font-size: 1.1rem;
  }
  .hero-copy p{
    max-width: 45rem;
    font-size: 1.05rem;
  }

  /* Hero intro over global brain image: full contrast + shadow (all pages) */
  .hero-copy > p,
  .hero-copy > div > p,
  .hero > .container > p:first-of-type:not(.article-meta){
    color: var(--text);
    font-weight: 500;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.92),
      0 0 20px rgba(11, 18, 32, 0.85),
      0 0 40px rgba(11, 18, 32, 0.5);
  }
  .hero-copy > p strong,
  .hero-copy > div > p strong,
  .hero > .container > p:first-of-type:not(.article-meta) strong{
    color: #fff;
    font-weight: 700;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.95),
      0 0 16px rgba(11, 18, 32, 0.9);
  }
  .kicker{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-weight:700;
    color: rgba(232,238,252,.9);
    background: rgba(91,140,255,.12);
    border: 1px solid rgba(91,140,255,.25);
    padding:.35rem .65rem;
    border-radius: 999px;
    text-transform:uppercase;
    font-size:.8rem;
    letter-spacing:.12em;
  }
  .hero-actions{
    margin-top: var(--s-5);
    display:flex;
    flex-wrap:wrap;
    gap: var(--s-3);
  }
  .hero-meta{
    margin-top: var(--s-5);
    display:flex;
    flex-wrap:wrap;
    gap: var(--s-5);
    font-size:.9rem;
  }
  /* Quote top aligned with hero copy (kicker line), not dropped to the h1 */
  .hero-meta.hero-meta--align-top{
    margin-top: 0;
  }
  @media (min-width: 900px){
    .hero-meta{
      /* Push the quote further down so its first line visually lines up
         with the main hero title instead of the kicker */
      margin-top: clamp(5.25rem, 11vw, 7.5rem);
      justify-content:flex-end;
    }
    .hero-meta.hero-meta--align-top{
      margin-top: 0;
      align-self: start;
    }
  }
  .hero-meta strong{
    display:block;
    font-size:1.1rem;
  }
  .hero-meta span{
    color: var(--muted);
  }
  .hero-panel{
    display:flex;
    flex-direction:column;
    gap: var(--s-4);
  }
  .hero-panel ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    color:var(--muted);
  }
.hero-panel ul.trust-list {
  color: #ff5b6e;
  text-decoration: line-through;
}
  .hero-panel-foot{
    margin-top:auto;
    padding-top: var(--s-3);
    border-top: 1px solid rgba(232,238,252,.08);
  }

  /* =========================
     Key services
     ========================= */
  .key-services{
    padding-top:0;
  }
  .key-service-panel{
    position: relative;
    border-radius: calc(var(--radius) + 6px);
    border: 1px solid rgba(91, 140, 255, 0.35);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.4),
      0 0 40px rgba(91, 140, 255, 0.12),
      var(--shadow);
    padding: clamp(1.5rem, 3.2vw, 2.35rem) clamp(1.35rem, 3vw, 2.25rem)
      clamp(2rem, 5vw, 3rem);
    background: linear-gradient(165deg, rgba(15, 26, 46, 0.97) 0%, rgba(11, 18, 32, 0.99) 100%);
    overflow: hidden;
  }
  .key-service-circuit-bg{
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image:
      linear-gradient(rgba(91, 140, 255, 0.15) 1px, transparent 1px),
      linear-gradient(90deg, rgba(91, 140, 255, 0.12) 1px, transparent 1px),
      radial-gradient(ellipse 80% 50% at 20% 30%, rgba(91, 140, 255, 0.18), transparent 55%),
      radial-gradient(ellipse 60% 40% at 85% 70%, rgba(248, 164, 53, 0.1), transparent 50%);
    background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
    mix-blend-mode: screen;
  }
  .key-service-panel > h2,
  .key-service-panel > p,
  .key-service-panel > .key-service-grid{
    position: relative;
    z-index: 1;
  }
  .key-service-grid{
    margin-top: var(--s-3);
    /* Keep the outer edges of the cards aligned
       with the main content column above */
    max-width: 960px;
    margin-inline: auto;
  }
  .key-card{
    position:relative;
    padding-top: calc(var(--s-6) - .25rem);
    scroll-margin-top: 6rem;
    display: flex;
    flex-direction: column;
    min-height: 250px;
    --svc-glow: rgba(91, 140, 255, 0.45);
    --svc-edge: rgba(122, 166, 255, 0.65);
    --svc-fill-a: rgba(20, 35, 66, 0.92);
    --svc-fill-b: rgba(15, 26, 46, 0.95);
    border: 1px solid var(--svc-edge);
    background: linear-gradient(180deg, var(--svc-fill-a), var(--svc-fill-b));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 12px 32px rgba(0, 0, 0, 0.45),
      0 0 24px var(--svc-glow);
  }
  /* Optional roadmap-style pillar geometry */
  .key-card--pillar{
    min-height: clamp(18.5rem, 29vw, 21rem);
    padding: 2.1rem 1rem 3.35rem;
    text-align: center;
    clip-path: polygon(50% 0%, 100% 7%, 100% 84%, 50% 100%, 0% 84%, 0% 7%);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
  }
  .key-card--pillar:hover{
    border-color: rgba(248,164,53,.8);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 12px 28px rgba(0,0,0,.45),
      0 0 32px var(--svc-glow);
    transform: translateY(-2px);
    filter: brightness(1.04);
  }
  .key-card--pillar .key-card-hit{
    border-radius: 0;
  }
  .key-card h3{
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .key-card__photo{
    width: 4.2rem;
    height: 2.8rem;
    margin: 0 auto var(--s-3);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--svc-edge);
    box-shadow:
      0 0 14px var(--svc-glow),
      inset 0 0 0 1px rgba(255,255,255,0.08);
  }
  .key-card__photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
  }
  .key-card__photo--home-staying-within-law img{
    object-fit: contain;
    object-position: center center;
    background: radial-gradient(ellipse at center, rgba(15, 26, 46, 0.9) 0%, rgba(11, 18, 32, 0.95) 100%);
  }
  .key-card__photo--home-cloud-v-on-premise img{
    object-fit: cover;
    object-position: center 42%;
  }
  .key-card__photo--home-falling-behind img{
    object-fit: contain;
    object-position: center center;
    background: radial-gradient(ellipse at center, rgba(15, 26, 46, 0.9) 0%, rgba(11, 18, 32, 0.95) 100%);
  }
  .key-card__photo--home-iot img{
    object-fit: cover;
    object-position: center 46%;
  }
  .key-card p{
    color: var(--text);
  }
  /* Same typography as test-page roadmap pillars (.brain-spider-pillar__tap-hint) */
  .key-card--pillar .brain-spider-pillar__tap-hint{
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-2);
    opacity: 0.92;
  }
  .key-card--blue{
    --svc-glow: rgba(91, 140, 255, 0.45);
    --svc-edge: rgba(122, 166, 255, 0.65);
    --svc-fill-a: rgba(30, 55, 110, 0.5);
    --svc-fill-b: rgba(15, 26, 46, 0.72);
  }
  .key-card--orange{
    --svc-glow: rgba(248, 164, 53, 0.42);
    --svc-edge: rgba(255, 182, 73, 0.7);
    --svc-fill-a: rgba(90, 55, 25, 0.48);
    --svc-fill-b: rgba(15, 26, 46, 0.72);
  }
  .key-card--green{
    --svc-glow: rgba(74, 222, 128, 0.36);
    --svc-edge: rgba(74, 222, 128, 0.58);
    --svc-fill-a: rgba(25, 70, 55, 0.48);
    --svc-fill-b: rgba(15, 26, 46, 0.72);
  }
  .key-card--popup{
    cursor: pointer;
  }
  .key-card-hit{
    position:absolute;
    inset:0;
    z-index:2;
    margin:0;
    padding:0;
    border:0;
    border-radius: var(--radius);
    background: transparent;
    cursor:pointer;
  }
  .key-card > a.btn{
    margin-top: auto;
    align-self: flex-start;
    width: fit-content;
  }
  .key-badge{
    position:absolute;
    top:0;
    left: var(--s-4);
    transform: translateY(-50%);
    width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#1b1306;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 10px 25px rgba(248,164,53,.35);
  }

  /* =========================
     Home service pop-outs
     ========================= */
  .home-service-dialog:not([open]){
    display:none;
  }
  .home-service-dialog[open]{
    position:fixed;
    inset:0;
    width:100vw;
    max-width:100vw;
    height:100%;
    max-height:100%;
    margin:0;
    padding: clamp(1rem, 4vw, 2.25rem);
    border:0;
    background: transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--text);
  }
  .home-service-dialog::backdrop{
    background: rgba(4, 8, 18, 0.06);
  }
  .home-service-dialog__inner{
    position:relative;
    width:100%;
    max-width:min(40rem, 100%);
    max-height:min(85vh, 100%);
    overflow:auto;
    padding: clamp(1.35rem, 3vw, 2rem);
    border-radius: var(--radius);
    border:1px solid rgba(122, 166, 255, 0.55);
    background: linear-gradient(180deg, rgba(30, 55, 110, 0.42), rgba(15, 26, 46, 0.72));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      var(--shadow),
      0 0 40px rgba(91, 140, 255, 0.24);
  }
  .home-service-dialog__inner--sovereign-photo{
    padding: 0;
    overflow: hidden;
    background: transparent;
    background-color: rgba(11, 18, 32, 0.2);
  }
  .home-service-dialog__photo{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    border-radius: inherit;
    overflow:hidden;
  }
  .home-service-dialog__photo-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center 30%;
    filter: brightness(1.03) contrast(1.08) saturate(1.06);
  }
  .home-service-dialog__photo-scrim{
    position:absolute;
    inset:0;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(11, 18, 32, 0.48) 0%,
      rgba(15, 26, 46, 0.58) 35%,
      rgba(11, 18, 32, 0.68) 70%,
      rgba(8, 14, 26, 0.76) 100%
    );
  }
  .home-service-dialog__content{
    position:relative;
    z-index:1;
    overflow:auto;
    max-height:min(85vh, 100%);
    padding: clamp(1.35rem, 3vw, 2rem);
  }
  .home-service-dialog__inner--sovereign-photo .home-service-dialog__close{
    z-index: 2;
  }
  .home-service-dialog__inner--sovereign-photo .home-service-dialog__kicker,
  .home-service-dialog__inner--sovereign-photo h2,
  .home-service-dialog__inner--sovereign-photo .home-service-dialog__lead{
    color: #f2f7ff;
    text-shadow:
      0 1px 2px rgba(0,0,0,0.9),
      0 0 28px rgba(8,12,24,0.72);
  }
  .home-service-dialog__close{
    position:absolute;
    top:0.65rem;
    right:0.65rem;
    width:2.25rem;
    height:2.25rem;
    margin:0;
    padding:0;
    border:1px solid rgba(122, 166, 255, 0.55);
    border-radius: var(--radius-sm);
    background: rgba(11, 18, 32, 0.4);
    color: var(--text);
    font-size:1.35rem;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .home-service-dialog__kicker{
    font-size:0.72rem;
    font-weight:800;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color: var(--accent-2);
    margin:0 0 var(--s-2);
    font-family: var(--mono);
  }
  .home-service-dialog__lead{
    color: #f2f7ff;
    margin-bottom: var(--s-4);
  }
  .home-service-dialog__image-placeholder{
    margin: 0 0 var(--s-5);
    padding: var(--s-5);
    border: 1px dashed rgba(232,238,252,.28);
    border-radius: var(--radius-sm);
    text-align:center;
    color: var(--muted);
    background: rgba(11, 18, 32, 0.35);
  }

  /* Home sovereign pop-out image tune (uses roadmap dialog layering from sovereign-flow.css) */
  .sovereign-flow__dialog-audit-img--home-sovereign{
    object-position: center 34%;
    filter: brightness(1.04) contrast(1.08) saturate(1.06);
  }
.sovereign-flow__dialog-audit-img--home-industries{
  object-position: center 34%;
  filter: brightness(1.04) contrast(1.08) saturate(1.06);
}
.sovereign-flow__dialog-audit-img.sovereign-flow__dialog-audit-img--home-staying-within-law{
  object-fit: contain;
  object-position: center center;
  filter: brightness(1.06) contrast(1.1) saturate(1.12);
}
.sovereign-flow__dialog-audit-img--home-cloud-v-on-premise{
  object-position: center 40%;
  filter: brightness(1.04) contrast(1.08) saturate(1.06);
}
.sovereign-flow__dialog-audit-img.sovereign-flow__dialog-audit-img--home-falling-behind{
  object-fit: contain;
  object-position: center center;
  filter: brightness(1.06) contrast(1.1) saturate(1.12);
}
.sovereign-flow__dialog-audit-img--home-iot{
  object-position: center 48%;
  filter: brightness(1.04) contrast(1.08) saturate(1.06);
}
.sovereign-flow__dialog-audit-img--industry-education{
  object-position: center 32%;
  filter: brightness(1.04) contrast(1.08) saturate(1.06);
}
.sovereign-flow__dialog-audit-img--industry-creative-agencies{
  object-position: center 38%;
  filter: brightness(1.06) contrast(1.1) saturate(1.08);
}
.sovereign-flow__dialog-audit-img--industry-construction{
  object-position: center 30%;
  filter: brightness(1.05) contrast(1.08) saturate(1.06);
}
.sovereign-flow__dialog-audit-img--industry-hospitality{
  object-position: center 32%;
  filter: brightness(1.05) contrast(1.08) saturate(1.06);
}
.sovereign-flow__dialog-audit-img--industry-healthcare{
  object-position: center 34%;
  filter: brightness(1.04) contrast(1.08) saturate(1.06);
}
.sovereign-flow__dialog-audit-img--industry-real-estate{
  object-position: center 32%;
  filter: brightness(1.04) contrast(1.08) saturate(1.06);
}
.sovereign-flow__dialog-audit-img--industry-legal{
  object-position: center 33%;
  filter: brightness(1.04) contrast(1.08) saturate(1.06);
}

  /* =========================
     Industries roadmap row
     ========================= */
  .industries-roadmap .key-service-grid{
    max-width: 100%;
  }
  .industries-pillar-row{
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.25rem 0 0.75rem;
  }
  .industries-pillar-row .key-card{
    flex: 0 0 min(13.9%, 10.2rem);
    min-width: 9.2rem;
    min-height: clamp(15.5rem, 24vw, 17.75rem);
    padding: 1.45rem 0.75rem 2.65rem;
  }
  .industries-pillar-row .key-card h3{
    font-size: 0.72rem;
    line-height: 1.25;
    letter-spacing: 0.08em;
  }
  .industries-pillar-row .key-card p{
    font-size: 0.74rem;
    line-height: 1.3;
    color: var(--muted);
    margin-bottom: var(--s-4);
  }
  /* Override row body-copy <p> rules so “Discover more” matches home / test pillars */
  .industries-pillar-row .key-card p.brain-spider-pillar__tap-hint{
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-2);
    opacity: 0.92;
    line-height: 1.2;
  }
  .industries-pillar-row .key-card > a.btn{
    margin-top: auto;
    align-self: center;
  }

  /* =========================
     Articles
     ========================= */
  .article-list{
    display:flex;
    flex-direction:column;
    gap: var(--s-6);
  }
  .article-card{
    display:grid;
    gap: var(--s-4);
  }
  @media (min-width: 900px){
    .article-card{
      grid-template-columns: minmax(0,1.2fr) minmax(0,1.8fr);
      align-items:stretch;
    }
  }
  .article-media{
    overflow:hidden;
    border-radius: var(--radius-sm);
  }
  .article-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .article-meta{
    font-size:.85rem;
    color: var(--muted);
    margin-bottom: var(--s-3);
  }
  .article-body{
    max-width: 60rem;
  }
  .article-body > h2{
    margin-top: var(--s-5);
  }
  .article-body > h2:first-child{
    margin-top:0;
  }
  .article-body > h3{
    margin-top: var(--s-4);
  }
  .article-body .heading-accent{
    color: var(--accent);
  }

  /* Inset illustrations: float right, text wraps (Sovereign-AI page, Staying within the law, etc.) */
  .article-inset-figure,
  .sovereign-ai-inset-figure {
    float: right;
    width: clamp(13.5rem, 38vw, 22rem);
    max-width: 100%;
    margin: 0.2rem 0 1rem 1.35rem;
    padding: 0;
    border-radius: calc(var(--radius) + 8px);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    shape-outside: margin-box;
  }
  .article-inset-figure--clean {
    width: clamp(16rem, 44vw, 25rem);
    margin: 0.1rem 0 0.55rem 0.85rem;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .article-inset-figure--services {
    width: clamp(17rem, 47vw, 27rem);
    margin: 0.05rem 0 0.45rem 0.7rem;
  }

  .article-inset-figure__img,
  .sovereign-ai-inset-figure__img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
    border-radius: inherit;
  }
  .article-inset-figure--clean .article-inset-figure__img {
    border-radius: 0;
  }

  .article-inset-end,
  .sovereign-ai-inset-end {
    clear: both;
    margin-top: var(--s-5);
  }

  @media (max-width: 720px) {
    .article-inset-figure,
    .sovereign-ai-inset-figure {
      float: none;
      width: 100%;
      max-width: 28rem;
      margin: 0 auto var(--s-5);
      shape-outside: none;
    }

    .article-inset-figure.article-inset-figure--lg {
      width: 100%;
      max-width: min(100%, 33.6rem);
    }
  }

  /* Cloud vs on-prem page: larger inset (~20%) for cost graphic beside Tier 2–3 */
  @media (min-width: 721px) {
    .article-inset-figure--lg {
      width: clamp(16.2rem, 45.6vw, 26.4rem);
    }
  }

  /* Sovereign-AI inset art: extra-rounded frame (clip + soft shadow) */
  .sovereign-ai-inset-figure {
    border-radius: clamp(1.15rem, 3vw, 1.85rem);
    box-shadow:
      var(--shadow),
      0 0 0 1px rgba(232, 238, 252, 0.06);
  }

  .quote-box{
    margin: var(--s-4) 0;
    padding: var(--s-4);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent);
    background: rgba(15,26,46,.7);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    font-style:italic;
  }
  .quote-box strong{
    display:block;
    margin-bottom: var(--s-2);
    font-style:normal;
    color: var(--text);
  }
  .security-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    border-radius: var(--radius-sm);
    overflow:hidden;
    /* Glassmorphism-style container */
    background: rgba(7, 11, 20, .78);
    border:1px solid rgba(248,164,53,.35);
    box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(248,164,53,.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    margin: var(--s-5) 0;
    font-size:.9rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  /* Ensure buttons inside security tables match standard button sizing */
  .security-table a.btn{
    font-size:1rem;
    white-space:nowrap;
  }
  .security-table:hover{
    border-color: rgba(248,164,53,.5);
    box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(248,164,53,.25);
  }
  .security-table thead{
    background: linear-gradient(135deg, rgba(20,35,66,.98), rgba(40,55,90,.95));
    border-bottom: 2px solid var(--accent);
  }
  .security-table th,
  .security-table td{
    padding:.75rem 1rem;
    border-bottom:1px solid rgba(232,238,252,.08);
    transition: background .15s ease;
  }
  .security-table th{
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.8rem;
    color: var(--accent);
  }
  .security-table tbody tr:nth-child(even){
    background: rgba(7,11,20,.6);
  }
  .security-table tbody tr:nth-child(odd){
    background: rgba(11,18,32,.6);
  }
  .security-table tbody tr:hover{
    background: rgba(248,164,53,.12);
  }
  
  /* =========================
     Footer
     ========================= */
  .site-footer{
    border-top: 1px solid var(--border);
    padding: 2rem 0;
    color: var(--muted);
    background: rgba(7,11,20,.35);
  }
  .footer-social{
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
  }
  .footer-social .social-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: color .2s ease, transform .2s ease;
  }
  .footer-social .social-icon:hover{
    color: var(--accent-2);
    transform: translateY(-2px);
  }
  .footer-social .social-icon svg{
    width: 26px;
    height: 26px;
  }
  
  /* =========================
     Utilities
     ========================= */
  .muted{ color: var(--muted); }
  .center{ text-align:center; }
  .right{ text-align:right; }
  .hidden{ display:none !important; }

/* ============================================================
   FIX: Link & Submenu Clickability Override
   ============================================================ */

/* 1. Lift the header above the 'main' content glass wall */
.site-header {
  z-index: 999 !important;
}

/* 2. Ensure the parent links (Services/Articles) are on top */
.nav-item {
  z-index: 1000 !important;
}

.nav-item > a {
  position: relative;
  z-index: 1001 !important;
  pointer-events: auto !important;
}

/* 3. Fix the Child Pages (Dropdown links) */
.nav-submenu {
  z-index: 1002 !important;
  pointer-events: auto !important;
  visibility: visible; /* Handled by hover, but ensures no interference */
}

.nav-submenu a {
  position: relative;
  z-index: 1003 !important;
  display: block !important;
  pointer-events: auto !important;
}

/* 4. The 'Hover Bridge' - makes it easier to move the mouse 
      from the parent to the child without the menu closing */
.nav-submenu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
}

/* --- SUBMENU TEXT-ONLY HIGHLIGHT --- */

/* This ensures the background stays dark and only the text changes color */
.nav-submenu a:hover {
    background: transparent !important;      /* Ensures no box appears */
    color: var(--accent) !important;         /* Changes the words to orange */
    text-decoration: none !important;        /* Keeps it looking clean */
    transition: color 0.2s ease;             /* Smooth fade for the text color */
    opacity: 1 !important;                   /* Ensures the text stays bright */
}

/* --- SUBMENU INDICATOR ARROW --- */

/* 1. Create space and add the arrow icon */
.nav-item.has-submenu > a::after {
    content: '▼';                /* The arrow symbol */
    font-size: 0.6rem;           /* Makes it smaller than the text */
    margin-left: 6px;            /* Adds a gap so it doesn't touch the words */
    vertical-align: middle;
    transition: transform 0.2s ease, color 0.2s ease;
    display: inline-block;
}

/* 2. Make the arrow turn orange when you hover over the link */
.nav-item.has-submenu:hover > a::after {
    color: var(--accent);
    transform: rotate(180deg);   /* Flips the arrow up when the menu opens */
}

/* 3. Ensure the arrow stays white/muted when not hovered */
.nav-item.has-submenu > a {
    display: flex;
    align-items: center;
}

/* --- SUBMENU TEXT-ONLY HIGHLIGHT --- */
.nav-submenu a:hover {
    background: transparent !important;
    color: var(--accent) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    
    /* These are the rounded corner settings */
    border-radius: 6px; 
    padding-left: 10px; /* Gives the text a little 'breathing room' on the left */
}

/* Keep dropdown state stable (prevents flicker from conflicting visibility rules) */
.nav-item.has-submenu .nav-submenu {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateY(4px) !important;
}

.nav-item.has-submenu:hover .nav-submenu,
.nav-item.has-submenu .nav-submenu:hover,
.nav-item.submenu-open .nav-submenu {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}