/* NAMING HUB® 0.6.3 — responsive matrix QA
   CSS responds to viewport width/height/aspect ratio rather than physical inches.
   Coverage: phones -> tablets -> 11/13/15 laptops -> 19/21/24/27/32 displays -> 4K/5K large-format. */

:root{
  --nh63-gutter:clamp(18px,3.8vw,112px);
  --nh63-copy:72ch;
  --nh63-hero-min:clamp(690px,78svh,900px);
}

/* Prevent accidental horizontal overflow at every viewport. */
html,body.nh-public{max-width:100%;overflow-x:clip}
.nh-public main,.nh-public section,.nh-public header,.nh-public footer{min-width:0}
.nh-public img,.nh-public canvas,.nh-public svg{max-width:100%}

/* Fluid typography tuned for long reading sessions. */
.nh-public{font-size:clamp(16px,.82vw,18px)}
.nh-public p{font-size:clamp(16px,.88vw,18px);line-height:1.78}
.nh-public .nh-lead{font-size:clamp(18px,1.02vw,21px);line-height:1.72}
.nh-public h1,.nh-public h2,.nh-public h3{text-wrap:balance}
.nh-public .nh-section-head>p:last-child,
.nh-public .nh-editorial-copy p,
.nh-public .nh-proof-copy>p:last-child{max-width:var(--nh63-copy)}

/* Header remains usable from notebook to large-format displays. */
.nh-public-header{padding-inline:var(--nh63-gutter)}
.nh-public-nav{gap:clamp(16px,1.8vw,40px)}
.nh-public-actions{min-width:0}
.nh-language-toggle{flex:0 0 auto}

/* Desktop hero: two independent zones. Ecosystem card never sits on top of the core. */
.nh-hero{
  grid-template-columns:minmax(500px,44%) minmax(0,56%);
  min-height:var(--nh63-hero-min);
}
.nh-hero-copy{
  min-height:var(--nh63-hero-min);
  padding-inline:var(--nh63-gutter) clamp(34px,4vw,92px)
}
.nh-hero h1{
  font-size:clamp(52px,4.35vw,88px);
  line-height:1.01;
  max-width:12.2ch
}
.nh-node-hero{
  min-height:var(--nh63-hero-min);
  container-type:inline-size;
  isolation:isolate
}
.nh-network-core{
  left:29%;
  top:42%;
  width:clamp(96px,8cqw,132px);
  height:clamp(96px,8cqw,132px)
}
.nh-node-hero .nh-asset-card{
  left:auto!important;
  right:clamp(18px,2.4cqw,42px)!important;
  top:auto!important;
  bottom:clamp(22px,3.2vh,44px)!important;
  transform:none!important;
  width:clamp(300px,34cqw,430px)!important;
  max-width:42%!important;
  max-height:48%;
  overflow:auto
}
.nh-node-hint{left:4%;bottom:22px;max-width:28%}

/* Keep semantic nodes inside the network zone (left ~58% of visual). */
.nh-node-domain{left:18%;top:8%}
.nh-node-trademark{left:3%;top:22%}
.nh-node-rights{left:43%;top:16%}
.nh-node-evidence{left:44%;top:38%}
.nh-node-events{left:43%;top:61%}
.nh-node-risk{left:24%;top:74%}
.nh-node-intelligence{left:4%;top:61%}
.nh-node-names{left:2%;top:42%}

/* Full-width sections use the viewport instead of leaving a dead half. */
.nh-flow,.nh-system,.nh-editorial,.nh-icon-atlas,.nh-sequence,.nh-statement,.nh-certainty{
  padding-left:var(--nh63-gutter);
  padding-right:var(--nh63-gutter)
}
.nh-flow .nh-section-head,
.nh-system .nh-section-head,
.nh-icon-atlas .nh-section-head{
  grid-template-columns:minmax(420px,.9fr) minmax(420px,1.1fr);
  column-gap:clamp(48px,7vw,150px)
}
.nh-flow-track{grid-template-columns:repeat(8,minmax(0,1fr))}
.nh-flow-step{min-width:0}
.nh-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.nh-editorial-grid{grid-template-columns:minmax(420px,.8fr) minmax(560px,1.2fr)}
.nh-sequence-track{grid-template-columns:repeat(6,minmax(0,1fr))}
.nh-atlas-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Short-height desktops / laptops: avoid vertical collision without shrinking text aggressively. */
@media (min-width:1101px) and (max-height:820px){
  :root{--nh63-hero-min:690px}
  .nh-hero-copy{padding-top:54px;padding-bottom:42px}
  .nh-hero h1{font-size:clamp(48px,4vw,72px)}
  .nh-node-hero .nh-asset-card{max-height:43%;bottom:18px!important}
  .nh-semantic-node{transform:scale(.92);transform-origin:center}
  .nh-node-hint{display:none}
}

/* 11–13 inch class / compact landscape: 1024–1279 CSS px. */
@media (min-width:1024px) and (max-width:1279px){
  :root{--nh63-gutter:clamp(24px,3vw,42px)}
  .nh-public-header{grid-template-columns:220px 1fr auto}
  .nh-public-nav{gap:18px}
  .nh-public-nav a{font-size:10px}
  .nh-hero{grid-template-columns:1fr}
  .nh-hero-copy{min-height:auto;padding-top:64px;padding-bottom:62px}
  .nh-node-hero{min-height:720px;border-left:0;border-top:1px solid #cfdde6}
  .nh-network-core{left:32%;top:38%}
  .nh-node-hero .nh-asset-card{width:min(390px,34vw)!important;max-width:40%!important;right:26px!important}
  .nh-node-domain{left:24%}.nh-node-trademark{left:7%}.nh-node-rights{left:48%}
  .nh-node-names{left:6%}.nh-node-evidence{left:49%}.nh-node-intelligence{left:8%}.nh-node-events{left:48%}.nh-node-risk{left:28%}
  .nh-flow-track{grid-template-columns:repeat(4,1fr)}
  .nh-sequence-track{grid-template-columns:repeat(3,1fr)}
}

/* 13–15 inch / standard laptop: 1280–1599 CSS px. */
@media (min-width:1280px) and (max-width:1599px){
  .nh-hero{grid-template-columns:minmax(490px,46%) minmax(0,54%)}
  .nh-hero h1{font-size:clamp(52px,4.2vw,70px)}
  .nh-network-core{left:27%;top:40%}
  .nh-node-hero .nh-asset-card{width:clamp(300px,32cqw,370px)!important;max-width:40%!important}
  .nh-semantic-node{transform:scale(.93);transform-origin:center}
  .nh-node-rights{left:42%}.nh-node-evidence{left:43%}.nh-node-events{left:42%}
}

/* 19–21/24 inch desktop class: 1600–1919 CSS px. */
@media (min-width:1600px) and (max-width:1919px){
  .nh-hero{grid-template-columns:45% 55%}
  .nh-network-core{left:29%;top:42%}
  .nh-node-hero .nh-asset-card{width:clamp(340px,31cqw,420px)!important;max-width:39%!important}
  .nh-flow-step span{font-size:12px}
}

/* 24–27/32 inch desktop: 1920–2559 CSS px. */
@media (min-width:1920px) and (max-width:2559px){
  :root{--nh63-gutter:clamp(72px,4.5vw,116px)}
  .nh-public{font-size:17px}
  .nh-public-header{height:90px}
  .nh-hero{grid-template-columns:43% 57%;min-height:820px}
  .nh-hero-copy{min-height:820px}
  .nh-hero h1{font-size:clamp(72px,4.1vw,96px);max-width:12.5ch}
  .nh-node-hero{min-height:820px}
  .nh-network-core{left:31%;top:42%}
  .nh-node-hero .nh-asset-card{width:clamp(390px,29cqw,470px)!important;max-width:37%!important}
  .nh-semantic-node{transform:scale(1.05);transform-origin:center}
  .nh-feature-grid article{min-height:320px}
  .nh-sequence-track article{min-height:300px}
}

/* 32–52 inch / QHD, 4K and 5K: preserve proportions instead of giant text. */
@media (min-width:2560px){
  :root{--nh63-gutter:clamp(96px,5vw,180px);--nh63-copy:78ch}
  .nh-public{font-size:18px}
  .nh-public-header{height:98px}
  .nh-public-header .nh-brand strong{font-size:30px}
  .nh-public-nav a{font-size:13px}
  .nh-hero{grid-template-columns:42% 58%;min-height:900px}
  .nh-hero-copy{min-height:900px}
  .nh-hero h1{font-size:clamp(82px,3.3vw,112px);max-width:12.5ch}
  .nh-hero .nh-lead{font-size:22px;max-width:66ch}
  .nh-node-hero{min-height:900px}
  .nh-network-core{left:31%;top:43%;width:138px;height:138px}
  .nh-node-hero .nh-asset-card{width:460px!important;max-width:34%!important;right:5%!important}
  .nh-semantic-node{transform:scale(1.12);transform-origin:center}
  .nh-flow,.nh-system,.nh-editorial,.nh-icon-atlas,.nh-sequence{padding-top:110px;padding-bottom:116px}
  .nh-feature-grid article{min-height:340px}
  .nh-feature-grid h3{font-size:24px}
  .nh-feature-grid p{font-size:17px}
  .nh-atlas-grid>div{min-height:175px}
}

/* Tablet portrait/landscape. */
@media (min-width:768px) and (max-width:1023px){
  :root{--nh63-gutter:28px}
  .nh-hero{grid-template-columns:1fr;min-height:auto}
  .nh-hero-copy{min-height:auto;padding:58px 28px 62px}
  .nh-hero h1{font-size:clamp(50px,7vw,66px);max-width:13ch}
  .nh-node-hero{min-height:760px}
  .nh-network-core{left:50%;top:25%}
  .nh-node-hero .nh-asset-card{
    width:calc(100% - 56px)!important;max-width:none!important;
    left:28px!important;right:28px!important;bottom:24px!important;
    max-height:none
  }
  .nh-node-hint{left:28px;right:28px;max-width:none;bottom:354px;text-align:center}
  .nh-node-domain{left:42%;top:5%}.nh-node-trademark{left:6%;top:12%}.nh-node-rights{right:6%;left:auto;top:12%}
  .nh-node-names{left:5%;top:28%}.nh-node-evidence{right:5%;left:auto;top:28%}
  .nh-node-intelligence{left:7%;top:42%}.nh-node-events{right:7%;left:auto;top:42%}.nh-node-risk{left:43%;top:48%}
  .nh-flow .nh-section-head,.nh-system .nh-section-head,.nh-icon-atlas .nh-section-head{grid-template-columns:1fr}
  .nh-flow .nh-section-head .nh-kicker,.nh-system .nh-section-head .nh-kicker,.nh-icon-atlas .nh-section-head .nh-kicker{grid-column:auto}
  .nh-flow-track{grid-template-columns:repeat(2,1fr)}
  .nh-feature-grid{grid-template-columns:1fr 1fr}
  .nh-editorial-grid{grid-template-columns:1fr}
  .nh-sequence-track{grid-template-columns:repeat(2,1fr)}
}

/* Phones: 320–767 CSS px, including iPhone/Android families. */
@media (max-width:767px){
  :root{--nh63-gutter:20px}
  .nh-public-header{height:72px;padding:0 16px;grid-template-columns:minmax(0,1fr) auto}
  .nh-public-header .nh-brand strong{font-size:19px}
  .nh-public-header .nh-brand span{font-size:8px}
  .nh-public-actions{gap:6px}
  .nh-language-toggle{min-height:36px;padding:0 8px}
  .nh-public-actions>a:not(.nh-button-dark){display:none}
  .nh-public-actions .nh-button-dark{min-height:38px;padding:0 11px;font-size:11px}
  .nh-hero{grid-template-columns:1fr;min-height:auto}
  .nh-hero-copy{min-height:auto;padding:48px 20px 54px}
  .nh-hero h1{font-size:clamp(40px,11.5vw,56px);line-height:1.02;max-width:13ch}
  .nh-hero .nh-lead{font-size:17px;line-height:1.7}
  .nh-hero-actions{align-items:flex-start;flex-direction:column;gap:16px}
  .nh-node-hero{min-height:820px}
  .nh-network-core{left:50%;top:23%;width:96px;height:96px}
  .nh-semantic-node{grid-template-columns:30px auto;min-height:42px;padding:5px 7px 5px 5px}
  .nh-semantic-node i{width:30px;height:30px}
  .nh-semantic-node small{display:none}
  .nh-node-domain{left:37%;top:4%}.nh-node-trademark{left:2%;top:11%}.nh-node-rights{right:2%;left:auto;top:11%}
  .nh-node-names{left:1%;top:28%}.nh-node-evidence{right:1%;left:auto;top:28%}
  .nh-node-intelligence{left:2%;top:42%}.nh-node-events{right:2%;left:auto;top:42%}.nh-node-risk{left:38%;top:49%}
  .nh-node-hint{left:18px;right:18px;max-width:none;bottom:378px;text-align:center}
  .nh-node-hero .nh-asset-card{
    width:calc(100% - 32px)!important;max-width:none!important;
    left:16px!important;right:16px!important;bottom:16px!important;
    max-height:none
  }
  .nh-node-hero .nh-card-grid{grid-template-columns:1fr 1fr}
  .nh-node-hero .nh-card-grid>div{min-height:78px;padding:10px}
  .nh-proof-rail{grid-template-columns:1fr 1fr}
  .nh-proof-stage{grid-template-columns:1fr}
  .nh-proof-copy{padding:56px 20px}
  .nh-proof-copy h2{font-size:clamp(38px,10vw,50px)}
  .nh-proof-diagram{min-height:640px}
  .nh-statement{grid-template-columns:1fr;padding:58px 20px}
  .nh-flow .nh-section-head,.nh-system .nh-section-head,.nh-icon-atlas .nh-section-head{grid-template-columns:1fr}
  .nh-flow .nh-section-head .nh-kicker,.nh-system .nh-section-head .nh-kicker,.nh-icon-atlas .nh-section-head .nh-kicker{grid-column:auto}
  .nh-flow-track,.nh-feature-grid,.nh-perspective-grid,.nh-sequence-track,.nh-atlas-grid{grid-template-columns:1fr}
  .nh-flow-step{min-height:145px}
  .nh-sequence-track article{min-height:190px}
  .nh-certainty{grid-template-columns:1fr;padding:58px 20px}
}

/* Very narrow phones / zoomed layouts. */
@media (max-width:374px){
  .nh-public-header .nh-brand span{display:none}
  .nh-language-toggle{padding:0 6px;font-size:10px!important}
  .nh-public-actions .nh-button-dark{padding:0 8px}
  .nh-hero h1{font-size:38px}
  .nh-node-hero{min-height:860px}
  .nh-semantic-node strong{font-size:9px}
  .nh-node-hero .nh-card-grid{grid-template-columns:1fr}
  .nh-node-hint{bottom:540px}
}

/* Tall phones use the extra vertical space for the network, not empty whitespace. */
@media (max-width:767px) and (min-height:800px){
  .nh-node-hero{min-height:880px}
  .nh-network-core{top:24%}
}

/* Wide/short displays and browser windows: protect key elements from collisions. */
@media (min-width:1280px) and (max-aspect-ratio:16/10){
  .nh-node-hero .nh-asset-card{bottom:20px!important}
}
@media (min-width:1280px) and (min-aspect-ratio:21/9){
  .nh-hero{grid-template-columns:40% 60%}
  .nh-network-core{left:32%}
  .nh-node-hero .nh-asset-card{right:6%!important;max-width:32%!important}
}

/* Accessibility / motion. */
@media(prefers-reduced-motion:reduce){
  .nh-semantic-node,.nh-sequence-track article{transition:none!important;transform:none!important}
}