/* Network Operations Center page (services/network-operations-center-houston-tx).
   Every rule is scoped to .noc-* so the shared header, footer, ISO and partner partials stay untouched. */
/* ==========================================================================
   2. CSS — DESIGN TOKENS (scoped to .noc-page)
   ========================================================================== */
.noc-page{
  --noc-indigo:#0c09c3;
  --noc-violet:#270678;
  --noc-ink:#0f1535;
  --noc-text:#3d4459;
  --noc-muted:#5b6475;
  --noc-tint:#f1edff;
  --noc-tint-2:#f7f5ff;
  --noc-surface:#f8f9fc;
  --noc-border:#ececf4;
  --noc-border-2:#e6e8f0;
  --noc-green:#80b927;
  --noc-green-ink:#4d7a0f;
  --noc-white:#ffffff;
  --noc-grad:linear-gradient(84.44deg,#270678 18.57%,#0c09c3 99.11%);
  --noc-grad-hero:linear-gradient(135deg,#1a0566 0%,#270678 45%,#0c09c3 100%);
  --noc-shadow-sm:0 1px 2px rgba(15,21,53,.04),0 4px 14px rgba(15,21,53,.05);
  --noc-shadow-md:0 10px 30px -12px rgba(39,6,120,.22);
  --noc-shadow-lg:0 30px 60px -25px rgba(12,9,195,.35);
  --noc-radius:16px;
  --noc-radius-sm:10px;
  --noc-font-display:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --noc-font-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --noc-container:1200px;
  font-family:var(--noc-font-body);
  color:var(--noc-text);
  font-size:17px;
  line-height:1.65;
  background:var(--noc-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
/* ==========================================================================
   3. CSS — BASE / RESET (scoped)
   ========================================================================== */
.noc-page *,.noc-page *::before,.noc-page *::after{box-sizing:border-box}
.noc-page img,.noc-page svg{max-width:100%;display:block}
.noc-page h1,.noc-page h2,.noc-page h3,.noc-page h4{font-family:var(--noc-font-display);color:var(--noc-ink);margin:0;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.noc-page h2{font-size:clamp(1.65rem,1.1rem + 1.9vw,2.4rem)}
.noc-page h3{font-size:1.14rem}
.noc-page p{margin:0 0 1rem}
.noc-page p:last-child{margin-bottom:0}
.noc-page a{color:var(--noc-indigo);text-underline-offset:3px}
.noc-page ul,.noc-page ol{margin:0;padding:0}
.noc-page strong{color:var(--noc-ink);font-weight:700}
.noc-page :focus-visible{outline:3px solid var(--noc-indigo);outline-offset:3px;border-radius:6px}
.noc-hero :focus-visible,.noc-band :focus-visible,.noc-final :focus-visible{outline-color:#fff}
/* Bootstrap outlines every focused button, including after a mouse click; keyboard users keep the ring above */
.noc-page button:focus:not(:focus-visible){outline:none}
.noc-container{width:100%;max-width:var(--noc-container);margin:0 auto;padding:0 24px}
.noc-section{padding:clamp(64px,8vw,104px) 0}
.noc-section--tint{background:var(--noc-tint-2)}
.noc-section--surface{background:var(--noc-surface)}
.noc-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--noc-indigo);margin-bottom:14px}
.noc-head{max-width:760px;margin-bottom:44px}
.noc-head--center{margin-left:auto;margin-right:auto;text-align:center}
.noc-head h2{margin-bottom:16px}
.noc-lead{font-size:1.08rem;color:var(--noc-muted)}
.noc-icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.noc-icon--sm{width:18px;height:18px}
.noc-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ==========================================================================
   4. CSS — BUTTONS
   ========================================================================== */
.noc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:10px;font-family:var(--noc-font-body);font-weight:700;font-size:1rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease;line-height:1.2;text-align:center}
.noc-btn:hover{transform:translateY(-1px)}
.noc-page .noc-btn--primary{background:var(--noc-grad);color:#fff;box-shadow:var(--noc-shadow-md)}
.noc-page .noc-btn--primary:hover{color:#fff;box-shadow:var(--noc-shadow-lg)}
.noc-page .noc-btn--outline{background:#fff;color:var(--noc-indigo);border-color:var(--noc-indigo)}
.noc-page .noc-btn--outline:hover{background:var(--noc-tint)}
.noc-page .noc-btn--light{background:#fff;color:var(--noc-violet)}
.noc-page .noc-btn--light:hover{color:var(--noc-indigo);box-shadow:0 12px 28px -10px rgba(0,0,0,.35)}
.noc-page .noc-btn--ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.45)}
.noc-page .noc-btn--ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.noc-btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.noc-arrow{transition:transform .2s ease}
.noc-btn:hover .noc-arrow{transform:translateX(3px)}
/* ==========================================================================
   6. CSS — HERO
   ========================================================================== */
.noc-hero{position:relative;background:var(--noc-grad-hero);color:rgba(255,255,255,.88);padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,104px);overflow:hidden;isolation:isolate}
.noc-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 85% 20%,rgba(120,110,255,.35),transparent 70%),radial-gradient(500px 360px at 10% 110%,rgba(128,185,39,.12),transparent 70%);z-index:-1}
.noc-hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000 20%,transparent 95%);-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 95%);z-index:-1}
.noc-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.noc-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.noc-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);border-radius:999px;padding:6px 14px;font-size:.84rem;color:#fff}
.noc-hero h1{color:#fff;font-size:clamp(2.1rem,1.2rem + 3.4vw,3.55rem);line-height:1.1;margin-bottom:20px;font-weight:600}
.noc-page .noc-hero__lead{font-size:clamp(1.05rem,.95rem + .4vw,1.22rem);font-weight:400;color:rgba(255,255,255,.86);max-width:600px;margin-bottom:30px}
.noc-page .noc-hero__caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;margin-top:40px;list-style:none;max-width:560px}
.noc-hero__caps li{display:flex;gap:10px;align-items:center;color:#fff;font-weight:500;font-size:.98rem}
.noc-hero__caps .noc-icon{color:var(--noc-green);width:20px;height:20px}
.noc-hero__art{position:relative;background:rgba(255,255,255,.97);border-radius:22px;padding:18px;box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.4)}
.noc-hero__art figcaption{font-size:.82rem;color:var(--noc-muted);text-align:center;padding-top:8px}
.noc-flowline{stroke-dasharray:6 8;animation:noc-dash 2.2s linear infinite}
.noc-pulse{transform-box:fill-box;transform-origin:center;animation:noc-pulse 2.4s ease-in-out infinite}
@keyframes noc-dash{to{stroke-dashoffset:-28}}
@keyframes noc-pulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}
/* ==========================================================================
   8. CSS — INTRO + VIDEO
   ========================================================================== */
.noc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,64px);align-items:center}
.noc-intro__text h2{margin-bottom:20px}
.noc-intro__text .noc-btn-row{margin-top:28px}
.noc-video{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--noc-shadow-lg);aspect-ratio:16/9;background:var(--noc-ink)}
.noc-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.noc-video-cap{font-size:.88rem;color:var(--noc-muted);margin-top:12px}
.noc-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:.92rem}
/* ==========================================================================
   9. CSS — WHY CHOOSE (nine cards)
   ========================================================================== */
.noc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.noc-card{background:#fff;border:1px solid var(--noc-border);border-radius:var(--noc-radius);padding:28px;box-shadow:var(--noc-shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;display:flex;flex-direction:column}
.noc-card:hover{transform:translateY(-3px);box-shadow:var(--noc-shadow-md);border-color:#ddd5ff}
.noc-card__icon{width:48px;height:48px;border-radius:12px;background:var(--noc-tint);color:var(--noc-indigo);display:grid;place-items:center;margin-bottom:18px}
.noc-card h3{margin-bottom:10px}
.noc-card p{font-size:.97rem;color:var(--noc-muted)}
.noc-strip{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:#fff;border:1px solid var(--noc-border);border-radius:var(--noc-radius);padding:24px 28px;box-shadow:var(--noc-shadow-sm)}
.noc-strip h3{font-size:1.2rem;margin-bottom:4px}
.noc-strip p{margin:0;color:var(--noc-muted);font-size:.97rem}
/* ==========================================================================
   10. CSS — WHAT IS A NOC (five-step process)
   ========================================================================== */
.noc-steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:noc-step;position:relative}
.noc-steps::before{content:"";position:absolute;top:34px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--noc-violet),var(--noc-indigo));opacity:.25}
.noc-step{position:relative;text-align:center;padding:0 6px}
.noc-step__dot{width:68px;height:68px;margin:0 auto 18px;border-radius:50%;background:#fff;border:2px solid #ddd5ff;color:var(--noc-indigo);display:grid;place-items:center;box-shadow:var(--noc-shadow-sm);position:relative}
.noc-step__dot::after{counter-increment:noc-step;content:counter(noc-step);position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--noc-grad);color:#fff;font-size:.75rem;font-weight:700;display:grid;place-items:center;font-family:var(--noc-font-display)}
.noc-step h3{font-size:1.05rem;margin-bottom:8px}
.noc-step p{font-size:.93rem;color:var(--noc-muted)}
.noc-note{margin-top:36px;display:flex;gap:14px;align-items:flex-start;background:var(--noc-tint-2);border:1px solid #e4ddff;border-radius:12px;padding:18px 20px;font-size:.95rem;color:var(--noc-text)}
.noc-note .noc-icon{color:var(--noc-indigo);margin-top:2px}
/* ==========================================================================
   11. CSS — MONITORING DIAGRAM
   ========================================================================== */
.noc-mon{display:grid;grid-template-columns:minmax(0,1.35fr) 64px minmax(0,1fr);gap:0;align-items:stretch;background:#fff;border:1px solid var(--noc-border);border-radius:22px;padding:clamp(18px,3vw,32px);box-shadow:var(--noc-shadow-md)}
.noc-mon__label{font-family:var(--noc-font-display);font-weight:600;color:var(--noc-ink);font-size:1rem;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.noc-mon__label span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--noc-tint);color:var(--noc-indigo);font-size:.75rem;font-weight:700}
.noc-domains{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.noc-domain{width:100%;height:100%;min-height:96px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;background:var(--noc-surface);border:1px solid var(--noc-border-2);border-radius:12px;padding:14px;font:inherit;font-size:.9rem;font-weight:600;color:var(--noc-ink);line-height:1.3;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}
.noc-domain .noc-icon{color:var(--noc-indigo)}
.noc-domain:hover{background:var(--noc-tint-2);border-color:#d6ccff}
.noc-domain[aria-pressed="true"]{background:var(--noc-tint);border-color:var(--noc-indigo);box-shadow:0 0 0 1px var(--noc-indigo) inset}
.noc-mon__bridge{display:flex;align-items:center;justify-content:center;position:relative}
.noc-mon__bridge::before{content:"";position:absolute;top:12%;bottom:12%;left:50%;width:2px;background:repeating-linear-gradient(180deg,#c9bdff 0 6px,transparent 6px 12px)}
.noc-mon__bridge-arrow{position:relative;width:44px;height:44px;border-radius:50%;background:var(--noc-grad);color:#fff;display:grid;place-items:center;box-shadow:var(--noc-shadow-md)}
.noc-pipe{list-style:none;display:flex;flex-direction:column;gap:10px;height:calc(100% - 38px)}
.noc-pipe li{flex:1;display:flex;gap:14px;align-items:center;border-radius:12px;padding:14px 16px;border:1px solid var(--noc-border-2);background:#fff;position:relative}
.noc-pipe li+li::before{content:"";position:absolute;top:-11px;left:36px;width:2px;height:10px;background:#c9bdff}
.noc-pipe__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--noc-tint);color:var(--noc-indigo);flex:none}
.noc-pipe li:nth-child(2) .noc-pipe__ic{background:#ebe6ff}
.noc-pipe li:nth-child(3) .noc-pipe__ic{background:#e2dbff}
.noc-pipe li:nth-child(4){background:var(--noc-grad);border-color:transparent}
.noc-pipe li:nth-child(4) .noc-pipe__ic{background:rgba(255,255,255,.16);color:#fff}
.noc-pipe li:nth-child(4) strong,.noc-pipe li:nth-child(4) small{color:#fff}
.noc-pipe strong{display:block;font-family:var(--noc-font-display);font-weight:600;font-size:.98rem}
.noc-pipe small{display:block;color:var(--noc-muted);font-size:.84rem;line-height:1.45}
.noc-mon__detail{grid-column:1/-1;margin-top:20px;border-top:1px solid var(--noc-border);padding-top:20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.noc-detail h3{font-size:1.05rem;margin-bottom:6px}
.noc-detail p{font-size:.95rem;color:var(--noc-muted);margin:0}
.noc-telemetry h3{font-size:.95rem;margin-bottom:10px}
.noc-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.noc-tags li{border:1px solid #ddd5ff;background:var(--noc-tint-2);color:var(--noc-violet);border-radius:999px;padding:5px 12px;font-size:.85rem;font-weight:600}
.noc-page .noc-telemetry p{font-size:.85rem;color:var(--noc-muted);margin-top:10px}
.noc-mon-defs{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.noc-mon-defs div{padding:4px 0 0 16px;border-left:3px solid #ddd5ff}
.noc-mon-defs h3{font-size:1rem;margin-bottom:6px}
.noc-mon-defs p{font-size:.93rem;color:var(--noc-muted)}
.noc-ctx{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;text-align:center;color:var(--noc-ink);font-weight:600}
/* ==========================================================================
   12. CSS — ALERTING & ESCALATION
   ========================================================================== */
.noc-esc{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.noc-esc__item{background:#fff;border:1px solid var(--noc-border);border-radius:var(--noc-radius);padding:26px 22px 24px;box-shadow:var(--noc-shadow-sm);position:relative}
.noc-esc__item:not(:last-child)::after{content:"";position:absolute;top:50px;right:-21px;width:22px;height:2px;background:var(--noc-indigo);opacity:.4}
.noc-esc__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.noc-esc__num{font-family:var(--noc-font-display);font-weight:700;font-size:.85rem;color:var(--noc-indigo);background:var(--noc-tint);border-radius:999px;padding:4px 12px}
.noc-esc__item .noc-card__icon{margin:0}
.noc-esc__item h3{margin-bottom:10px}
.noc-esc__item p{font-size:.95rem;color:var(--noc-muted)}
.noc-esc__item--last{background:var(--noc-grad);border-color:transparent}
.noc-esc__item--last h3,.noc-esc__item--last p{color:#fff}
.noc-esc__item--last .noc-esc__num{background:rgba(255,255,255,.16);color:#fff}
.noc-esc__item--last .noc-card__icon{background:rgba(255,255,255,.14);color:#fff}
.noc-esc-intro{max-width:820px}
.noc-page .noc-esc-close{margin-top:28px;max-width:820px;font-size:1.02rem}
.noc-examples{margin-top:44px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:stretch}
.noc-panel{background:#fff;border:1px solid var(--noc-border);border-radius:var(--noc-radius);padding:24px;box-shadow:var(--noc-shadow-sm)}
.noc-panel__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.noc-panel__head h3{font-size:1.08rem}
.noc-badge{display:inline-block;font-size:.78rem;font-weight:700;color:var(--noc-violet);background:var(--noc-tint);border-radius:999px;padding:3px 10px}
.noc-table-wrap{overflow-x:auto}
.noc-table{width:100%;border-collapse:collapse;font-size:.92rem}
.noc-table th,.noc-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--noc-border);vertical-align:top}
.noc-table th{font-size:.8rem;color:var(--noc-muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.noc-table td:first-child{color:var(--noc-ink);font-weight:600}
.noc-table tr:last-child td{border-bottom:0}
.noc-sev{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap}
.noc-sev--crit{background:#fde8ea;color:#9b1c2c}
.noc-sev--high{background:#fff1dc;color:#8a4b00}
.noc-sev--med{background:#eef6e1;color:var(--noc-green-ink)}
.noc-cov{list-style:none;display:grid;gap:12px}
.noc-cov li{display:flex;gap:12px;align-items:flex-start;font-size:.93rem}
.noc-cov .noc-icon{color:var(--noc-indigo);margin-top:3px}
.noc-cov strong{display:block}
/* ==========================================================================
   13. CSS — SOLUTIONS (alternating feature list)
   ========================================================================== */
.noc-sol{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(32px,5vw,64px);align-items:start}
.noc-sol__aside{position:sticky;top:100px}
.noc-sol__aside .noc-panel{margin-top:26px}
.noc-sol__list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.noc-sol__item{display:flex;gap:16px;background:#fff;border:1px solid var(--noc-border);border-radius:14px;padding:22px;transition:border-color .2s,box-shadow .2s}
.noc-sol__item:hover{border-color:#d6ccff;box-shadow:var(--noc-shadow-sm)}
.noc-sol__item .noc-card__icon{margin:0;flex:none}
.noc-sol__item h3{font-size:1.04rem;margin-bottom:6px}
.noc-sol__item p{font-size:.94rem;color:var(--noc-muted)}
.noc-sol__item a{font-size:.88rem;font-weight:600;display:inline-block;margin-top:8px}
/* ==========================================================================
   14. CSS — NOC vs SOC
   ========================================================================== */
.noc-vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr) minmax(0,1fr);gap:0;align-items:stretch}
.noc-vs__col{border-radius:20px;padding:30px;border:1px solid var(--noc-border);background:#fff;box-shadow:var(--noc-shadow-sm)}
.noc-vs__col--noc{border-top:4px solid var(--noc-indigo)}
.noc-vs__col--soc{border-top:4px solid var(--noc-violet)}
.noc-vs__abbr{font-family:var(--noc-font-display);font-weight:700;font-size:2rem;background:var(--noc-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.noc-vs__col h3{margin:6px 0 12px;font-size:1.1rem}
.noc-vs__col p{font-size:.95rem;color:var(--noc-muted)}
.noc-page .noc-vs__col ul{list-style:none;display:grid;gap:10px;margin-top:16px}
.noc-vs__col li{display:flex;gap:10px;font-size:.94rem;color:var(--noc-text)}
.noc-vs__col li .noc-icon{color:var(--noc-indigo);width:18px;height:18px;margin-top:4px}
.noc-vs__overlap{margin:28px -14px;z-index:1;border-radius:18px;background:var(--noc-grad);color:#fff;padding:26px 24px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--noc-shadow-lg)}
.noc-vs__overlap h3{color:#fff;font-size:1.02rem;margin-bottom:12px}
.noc-vs__overlap ul{list-style:none;display:grid;gap:10px;font-size:.92rem}
.noc-vs__overlap li{display:flex;gap:8px}
.noc-vs__overlap li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--noc-green);flex:none;margin-top:9px}
.noc-page .noc-vs__foot{margin-top:30px;max-width:860px;margin-left:auto;margin-right:auto;text-align:center;color:var(--noc-muted);font-size:.97rem}
/* ==========================================================================
   15. CSS — ONBOARDING TIMELINE
   ========================================================================== */
.noc-onb{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.noc-onb li{position:relative;background:#fff;border:1px solid var(--noc-border);border-radius:14px;padding:22px 18px 20px}
.noc-onb__n{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-family:var(--noc-font-display);font-weight:700;color:var(--noc-indigo);font-size:.9rem}
.noc-onb__n::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,#ddd5ff,transparent)}
.noc-onb h3{font-size:1rem;margin-bottom:8px}
.noc-onb p{font-size:.9rem;color:var(--noc-muted)}
.noc-onb-req{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.noc-onb-req>span{font-weight:700;color:var(--noc-ink);font-size:.95rem;margin-right:4px}
/* ==========================================================================
   16. CSS — VISIBILITY & REPORTING
   ========================================================================== */
.noc-page .noc-rep__list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin-top:22px}
.noc-rep__list li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem}
.noc-rep__list .noc-icon{color:var(--noc-indigo);margin-top:3px}
.noc-dash{border-radius:20px;background:#fff;border:1px solid var(--noc-border);box-shadow:var(--noc-shadow-lg);padding:14px}
.noc-dash figcaption{display:flex;gap:8px;align-items:center;justify-content:center;font-size:.85rem;color:var(--noc-muted);padding-top:10px;font-weight:600}
/* ==========================================================================
   17. CSS — PROACTIVE vs REACTIVE
   ========================================================================== */
.noc-lanes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.noc-lane{border-radius:20px;padding:28px;border:1px solid var(--noc-border);background:#fff}
.noc-lane--pro{background:var(--noc-tint-2);border-color:#ddd5ff}
.noc-lane h3{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.noc-lane>p{color:var(--noc-muted);font-size:.95rem}
.noc-page .noc-lane ol{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;counter-reset:noc-lane}
.noc-lane ol li{counter-increment:noc-lane;display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--noc-border-2);border-radius:12px;padding:12px 14px;font-size:.94rem;color:var(--noc-ink);font-weight:500}
.noc-lane ol li::before{content:counter(noc-lane);width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:var(--noc-surface);color:var(--noc-muted);border:1px solid var(--noc-border-2)}
.noc-lane--pro ol li::before{background:var(--noc-grad);color:#fff;border-color:transparent}
.noc-page .noc-lanes__foot{margin-top:24px;text-align:center;color:var(--noc-muted);font-size:.95rem;max-width:820px;margin-left:auto;margin-right:auto}
/* ==========================================================================
   18. CSS — LOCAL HOUSTON
   ========================================================================== */
.noc-local__card{background:#fff;border:1px solid var(--noc-border);border-radius:20px;padding:28px;box-shadow:var(--noc-shadow-md)}
.noc-local__card h3{margin-bottom:16px}
.noc-page .noc-areas{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}
.noc-areas li a,.noc-areas li span{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border-radius:10px;background:var(--noc-surface);border:1px solid var(--noc-border-2);color:var(--noc-ink);font-weight:600;font-size:.93rem;text-decoration:none}
.noc-areas li a:hover{border-color:var(--noc-indigo);color:var(--noc-indigo)}
.noc-areas .noc-icon{color:var(--noc-indigo);width:18px;height:18px}
.noc-addr{display:flex;gap:12px;align-items:flex-start;border-top:1px solid var(--noc-border);padding-top:18px;font-size:.95rem}
.noc-addr .noc-icon{color:var(--noc-indigo);margin-top:3px}
/* ==========================================================================
   19. CSS — BRANDED BANDS (mid-page + final)
   ========================================================================== */
.noc-band{background:var(--noc-grad);border-radius:24px;color:rgba(255,255,255,.88);padding:clamp(32px,5vw,56px);display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:32px;align-items:center;position:relative;overflow:hidden;isolation:isolate}
.noc-band::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);z-index:-1}
.noc-band h2{color:#fff;margin-bottom:12px;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem)}
.noc-page .noc-band p{margin:0;max-width:660px}
.noc-band .noc-btn-row{justify-content:flex-end}
.noc-final{background:var(--noc-grad-hero);color:rgba(255,255,255,.88);text-align:center;position:relative;overflow:hidden;isolation:isolate}
.noc-final::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 50% 0%,rgba(140,130,255,.35),transparent 70%);z-index:-1}
.noc-final h2{color:#fff;max-width:900px;margin:0 auto 18px}
.noc-page .noc-final p{max-width:760px;margin:0 auto 30px;font-size:1.08rem}
.noc-final .noc-btn-row{justify-content:center}
.noc-page .noc-final__meta{margin-top:26px;font-size:.92rem;color:rgba(255,255,255,.75)}
.noc-final__meta a{color:#fff}
/* ==========================================================================
   20. CSS — CASE STUDY
   ========================================================================== */
.noc-case__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.noc-case__head h2{max-width:720px}
.noc-case__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.noc-case__problem{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;background:#fff;border:1px solid var(--noc-border);border-radius:20px;padding:28px;box-shadow:var(--noc-shadow-sm)}
.noc-case__label{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--noc-indigo);margin-bottom:10px}
.noc-case__box{background:#fff;border:1px solid var(--noc-border);border-radius:20px;padding:28px;box-shadow:var(--noc-shadow-sm)}
.noc-case__box h3{margin-bottom:10px}
.noc-case__box>p{color:var(--noc-muted);font-size:.96rem}
.noc-page .noc-check{list-style:none;display:grid;gap:12px;margin-top:16px}
.noc-check li{display:flex;gap:12px;font-size:.95rem}
.noc-check .noc-icon{color:var(--noc-indigo);width:20px;height:20px;margin-top:3px}
.noc-case__box--result{background:var(--noc-tint-2);border-color:#ddd5ff}
.noc-case__box--result .noc-check .noc-icon{color:var(--noc-green-ink)}
.noc-case__bottom{grid-column:1/-1;border-left:4px solid var(--noc-indigo);background:#fff;border-radius:0 14px 14px 0;padding:20px 24px;font-size:1.02rem;box-shadow:var(--noc-shadow-sm)}
.noc-page .noc-case__disclaimer{margin-top:10px;font-size:.84rem;color:var(--noc-muted)}
.noc-case__cta{margin-top:28px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 18px;align-items:center;color:var(--noc-ink);font-weight:600}
/* ==========================================================================
   21. CSS — FAQ ACCORDION
   ========================================================================== */
.noc-faq{max-width:900px;margin:0 auto;display:grid;gap:12px}
.noc-faq__item{border:1px solid var(--noc-border);border-radius:14px;background:#fff;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.noc-faq__item.is-open{border-color:#d6ccff;box-shadow:var(--noc-shadow-sm)}
.noc-faq__q{margin:0;font-size:1.02rem}
.noc-faq__btn{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;min-height:60px;cursor:pointer;font-family:var(--noc-font-display);font-weight:600;color:var(--noc-ink);line-height:1.35}
.noc-faq__btn:focus-visible{outline:3px solid var(--noc-indigo);outline-offset:-3px;border-radius:14px}
.noc-faq__plus{width:32px;height:32px;flex:none;border-radius:50%;background:var(--noc-tint);color:var(--noc-indigo);display:grid;place-items:center;transition:transform .25s}
.noc-faq__btn[aria-expanded="true"] .noc-faq__plus{transform:rotate(45deg)}
.noc-faq__a{padding:0 22px 20px;color:var(--noc-muted);font-size:.97rem}
.noc-faq__a[hidden]{display:none}
/* ==========================================================================
   25. CSS — RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width:1100px){
  .noc-mon{grid-template-columns:minmax(0,1fr)}
  .noc-mon__bridge{min-height:56px}
  .noc-mon__bridge::before{top:0;bottom:0}
  .noc-mon__bridge-arrow{transform:rotate(90deg)}
  .noc-pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:auto}
  .noc-pipe li{flex-direction:column;align-items:flex-start}
  .noc-pipe li+li::before{display:none}
  .noc-onb{grid-template-columns:repeat(3,minmax(0,1fr))}
  .noc-sol{grid-template-columns:minmax(0,1fr)}
  .noc-sol__aside{position:static}
}
@media (max-width:991px){
  .noc-hero__grid,.noc-split,.noc-case__problem{grid-template-columns:minmax(0,1fr)}
  .noc-hero__art{max-width:640px;margin:0 auto;width:100%}
  .noc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .noc-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px}
  .noc-steps::before{display:none}
  .noc-esc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .noc-esc__item::after{display:none}
  .noc-examples{grid-template-columns:minmax(0,1fr)}
  .noc-vs{grid-template-columns:minmax(0,1fr)}
  .noc-vs__overlap{margin:-10px 18px}
  .noc-band{grid-template-columns:minmax(0,1fr)}
  .noc-band .noc-btn-row{justify-content:flex-start}
  .noc-mon-defs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .noc-page{font-size:16px}
  .noc-cards,.noc-case__grid,.noc-lanes,.noc-mon__detail{grid-template-columns:minmax(0,1fr)}
  .noc-domains{grid-template-columns:repeat(2,minmax(0,1fr))}
  .noc-pipe{grid-template-columns:minmax(0,1fr)}
  .noc-pipe li{flex-direction:row;align-items:center}
  .noc-steps{grid-template-columns:minmax(0,1fr);text-align:left;row-gap:0;position:relative}
  .noc-steps::before{display:block;top:20px;bottom:20px;left:33px;right:auto;width:2px;height:auto}
  .noc-step{display:grid;grid-template-columns:68px minmax(0,1fr);gap:4px 16px;text-align:left;padding:0 0 22px}
  .noc-step__dot{margin:0;grid-row:span 2}
  .noc-step h3{align-self:end;margin-bottom:2px}
  .noc-esc{grid-template-columns:minmax(0,1fr);gap:0;padding-left:22px;border-left:2px solid #ddd5ff;margin-left:8px}
  .noc-esc__item{margin-bottom:16px}
  .noc-esc__item::before{content:"";position:absolute;left:-31px;top:34px;width:16px;height:16px;border-radius:50%;background:var(--noc-grad);border:3px solid #fff;box-shadow:0 0 0 1px #ddd5ff}
  .noc-onb{grid-template-columns:minmax(0,1fr)}
  .noc-sol__list,.noc-rep__list{grid-template-columns:minmax(0,1fr)}
  .noc-table thead{display:none}
  .noc-table,.noc-table tbody,.noc-table tr,.noc-table td{display:block;width:100%}
  .noc-table tr{border-bottom:1px solid var(--noc-border);padding:10px 0}
  .noc-table td{border:0;padding:4px 0}
  .noc-table td[data-label]::before{content:attr(data-label) ": ";font-weight:700;color:var(--noc-muted);font-size:.8rem}
}
@media (max-width:480px){
  .noc-container{padding:0 16px}
  .noc-hero__caps{grid-template-columns:minmax(0,1fr)}
  .noc-hero .noc-btn-row .noc-btn,.noc-band .noc-btn,.noc-final .noc-btn,.noc-strip .noc-btn{width:100%}
  .noc-domain{min-height:84px;padding:12px;font-size:.85rem}
  .noc-areas{grid-template-columns:minmax(0,1fr)}
  .noc-card,.noc-case__box,.noc-case__problem,.noc-lane,.noc-vs__col,.noc-local__card{padding:22px}
}
@media (max-width:359px){.noc-domains{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1600px){
  .noc-page{--noc-container:1320px}
}
@media (prefers-reduced-motion:reduce){
  .noc-page *,.noc-page *::before,.noc-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   SITE INTEGRATION
   ========================================================================== */
/* The site navbar overlays the top of the page: fixed and 90px tall on desktop, absolute and about 56px tall below that */
.noc-hero{padding-top:calc(56px + clamp(32px,7vw,96px))}
@media (min-width:1025px){
  .noc-hero{padding-top:calc(90px + clamp(56px,7vw,96px))}
}
/* style.css sets section{margin:40px 0}, which would open white strips between the page's coloured bands */
.noc-page section{margin:0}
/* style.css sets ol li{list-style:decimal-leading-zero!important;padding:1px!important;margin:1px!important}, so restoring these lists needs !important too */
.noc-page ol>li{list-style:none!important;margin:0!important}
.noc-steps>.noc-step{padding:0 6px!important}
.noc-esc>.noc-esc__item{padding:26px 22px 24px!important}
.noc-pipe>li{padding:14px 16px!important}
.noc-onb>li{padding:22px 18px 20px!important}
.noc-page .noc-lane ol>li{padding:12px 14px!important}
.noc-split h2,.noc-sol__aside h2{margin-bottom:16px}
/* style.css sets a{font-family:Montserrat;display:inline-block}; responsive.css centres every section at 600px and below */
.noc-page a{font-family:inherit}
.noc-page p a{display:inline}
.noc-page section:not(.noc-final){text-align:left}
/* style.css sets p{font-size:16px!important;line-height:1.5!important}, so the page's paragraph sizes need !important too */
/* style.css sets a font on every p, and responsive.css sets body.inpage p,body.inpage section li{font-size:13px!important;margin-bottom:10px;padding:0} on smaller screens */
:where(.noc-page) p{font-family:inherit}
body .noc-page p{margin:0 0 1rem;font-size:1em!important;line-height:1.65!important}
body .noc-page section li{margin-bottom:0;font-size:inherit!important}
.noc-page .noc-tags li{padding:5px 12px;font-size:.85rem!important}
.noc-page .noc-sol__item{padding:22px}
.noc-page .noc-case__bottom{padding:20px 24px}
.noc-page .noc-hero__caps li{font-size:.98rem!important}
.noc-page .noc-rep__list li{font-size:.96rem!important}
.noc-page .noc-check li{font-size:.95rem!important}
.noc-page .noc-vs__col li,.noc-page .noc-lane ol>li{font-size:.94rem!important}
.noc-page .noc-cov li{font-size:.93rem!important}
.noc-page .noc-mon__label{font-size:1rem!important}
.noc-page p a{font-weight:inherit}
.noc-page .noc-lead,.noc-page .noc-final p{font-size:1.08rem!important}
.noc-page .noc-hero__lead{font-size:clamp(1.05rem,.95rem + .4vw,1.22rem)!important}
.noc-page .noc-card p,.noc-page .noc-strip p,.noc-page .noc-vs__foot{font-size:.97rem!important}
.noc-page .noc-case__box>p{font-size:.96rem!important}
.noc-page .noc-detail p,.noc-page .noc-esc__item p,.noc-page .noc-vs__col p,.noc-page .noc-lane>p,.noc-page .noc-lanes__foot{font-size:.95rem!important}
.noc-page .noc-sol__item p{font-size:.94rem!important}
.noc-page .noc-step p,.noc-page .noc-mon-defs p{font-size:.93rem!important}
.noc-page .noc-onb p{font-size:.9rem!important}
.noc-page .noc-links,.noc-page .noc-final__meta{font-size:.92rem!important}
.noc-page .noc-video-cap{font-size:.88rem!important}
.noc-page .noc-telemetry p{font-size:.85rem!important}
.noc-page .noc-case__disclaimer,.noc-page .noc-case__box>.noc-case__disclaimer{font-size:.84rem!important}
.noc-page .noc-esc-close,.noc-page .noc-case__bottom{font-size:1.02rem!important}
@media (max-width:767px){
  .noc-steps>.noc-step{padding:0 0 22px!important}
  .noc-page .noc-esc{padding-left:22px;margin-left:8px}
  .noc-page .noc-esc>.noc-esc__item{margin-bottom:16px!important}
}
/* Connectors only make sense while all four steps share one row */
@media (max-width:991px){
  .noc-esc__item:not(:last-child)::after{display:none}
}