/* ==========================================================================
   Hero — the signature layout.
   Three borrowed moves, each for a reason:
   · Motive        the subheading IS the navigation; three bold words swap the stage
   · Anduril/Helion display type at real scale (they run 100-130px; this runs to 112px)
   · Linear        dark panels are four layers — surface, glow, grain, cursor-lit border
   ========================================================================== */

.heroX{
  position:relative; isolation:isolate; overflow:clip;
  background:var(--bg-900); color:#b9c0cc;
  padding-block: clamp(46px, 3.2vw + 30px, 84px) clamp(40px, 2.8vw + 24px, 72px);
  min-height: clamp(540px, 76vh, 800px);
  display:flex; align-items:center;
}

/* --- layer 1: the engineering field, masked so it dies before the edges --- */
.heroX::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgb(255 255 255/.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255/.035) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 26% 32%, #000 12%, transparent 76%);
          mask-image:radial-gradient(ellipse 78% 62% at 26% 32%, #000 12%, transparent 76%);
}
/* coarse survey ticks at 4x the pitch — the surveyor's-drawing read */
.heroX::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgb(255 255 255/.10) 1px, transparent 1.6px);
  background-size:136px 136px;
  -webkit-mask-image:radial-gradient(ellipse 70% 56% at 26% 32%, #000 6%, transparent 70%);
          mask-image:radial-gradient(ellipse 70% 56% at 26% 32%, #000 6%, transparent 70%);
}
.heroX > *{ position:relative; z-index:2; width:100%; }

.heroX-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,76px); align-items:center;
}
@media (max-width:1040px){ .heroX-grid{ grid-template-columns:1fr; gap:38px; } }

/* --- display type at the scale the reference set actually uses ----------- */
.heroX h1{
  font-size: clamp(2.5rem, 1.25rem + 4.6vw, 5.6rem);
  line-height:.95;
  letter-spacing:-.042em;
  hyphens:none;
  color:#fff;
  margin:0 0 clamp(20px,2.2vw,30px);
  text-wrap:balance;
}
/* word-by-word reveal (Hadrian). Default state is VISIBLE — the animation
   only runs once JS has confirmed it can finish it. */
.heroX h1 .w{ display:inline-block; }
.js-motion .heroX h1 .w{
  opacity:0; transform:translateY(38%);
  animation:wordUp .62s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--wi,0) * 52ms + 90ms);
}
@keyframes wordUp{ to{ opacity:1; transform:none; } }

/* --- the tab-sentence: the subheading doubles as the control ------------- */
.heroX-lede{
  font-size:clamp(1.02rem,.96rem + .42vw,1.2rem);
  color:#9ba5b4; max-width:46ch; margin:0 0 clamp(24px,2.6vw,36px);
}
.hw{
  appearance:none; background:none; border:0; padding:0 1px; cursor:pointer;
  font:inherit; color:#fff; font-weight:600; position:relative;
  transition:color .18s var(--ease-soft, ease);
}
.hw::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--ember-2); transform:scaleX(.28); transform-origin:left;
  opacity:.45; transition:transform .34s var(--ease-out,ease), opacity .34s ease;
}
.hw[aria-selected="true"]{ color:var(--ember-2); }
.hw[aria-selected="true"]::after{ transform:scaleX(1); opacity:1; }
@media (hover:hover){ .hw:hover::after{ transform:scaleX(1); opacity:.8; } }
.hw:focus-visible{ outline:2px solid var(--ember-2); outline-offset:3px; border-radius:3px; }

/* --- layer 2-4: the stage panel ------------------------------------------ */
.stage{
  position:relative; isolation:isolate; border-radius:20px;
  background:linear-gradient(168deg,#181c23 0%, #101319 62%, #0d1015 100%);
  box-shadow:0 2px 4px rgb(0 0 0/.34), 0 28px 68px -14px rgb(0 0 0/.62);
  padding:clamp(16px,1.8vw,26px);
  overflow:hidden;
}
/* glow */
.stage .glow{
  position:absolute; width:420px; height:420px; top:-24%; right:-12%;
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgb(249 115 22/.16) 0%, transparent 62%);
}
/* grain */
.stage .grainy{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
}
/* cursor-lit border — the Linear move */
.stage .shine{
  position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  border:1px solid rgb(255 255 255/.16);
  -webkit-mask-image:radial-gradient(240px 240px at var(--mx,50%) var(--my,0%),
    #000 0%, rgb(0 0 0/.55) 34%, rgb(0 0 0/.16) 56%, transparent 74%);
          mask-image:radial-gradient(240px 240px at var(--mx,50%) var(--my,0%),
    #000 0%, rgb(0 0 0/.55) 34%, rgb(0 0 0/.16) 56%, transparent 74%);
}
/* a permanent faint edge so the panel reads as a surface before you touch it */
.stage::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; border:1px solid rgb(255 255 255/.055);
}
.stage-in{ position:relative; z-index:2; }

/* --- the three swappable views ------------------------------------------- */
.view{ display:none; }
.view.is-on{ display:block; animation:viewIn .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px) scale(.995); } to{ opacity:1; transform:none; } }
.view svg{ width:100%; height:auto; display:block; }

/* product view: the object floats, angled, and bleeds past the panel edge */
.view-product{ display:none; }
.view-product.is-on{ display:grid; grid-template-columns:.95fr 1.05fr; gap:26px; align-items:center; }
.view-product img{
  width:100%; height:auto;
  transform:perspective(1300px) rotateY(-13deg) rotateX(3deg) scale(1.08) translateZ(0);
  filter:drop-shadow(0 26px 34px rgb(0 0 0/.55));
}
.view-spec{ display:flex; flex-direction:column; gap:12px; }
.view-spec .sr{
  display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:baseline;
  padding-bottom:10px; border-bottom:1px solid rgb(255 255 255/.08);
  font-size:.85rem;
}
.view-spec .sr b{ white-space:nowrap; }
.view-spec .sr b{ color:#dfe4ec; font-weight:560; }
.view-spec .sr span{ font-family:var(--mono); font-size:0.78rem; color:#8a93a2; text-align:right; }
@media (max-width:620px){ .view-product.is-on{ grid-template-columns:1fr; } }

.stage-cap{
  margin-top:14px; font-family:var(--mono); font-size:0.78rem; letter-spacing:.13em;
  text-transform:uppercase; color:#7d8695; display:flex; justify-content:space-between; gap:12px;
}
.stage-cap .live{ display:flex; align-items:center; gap:7px; color:#35c08f; }
.stage-cap .live i{
  width:6px; height:6px; border-radius:50%; background:#35c08f; display:block;
  animation:breathe 2.6s var(--ease-soft,ease) infinite;
}

/* --- the actions --------------------------------------------------------- */
.heroX-act{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.heroX-meta{
  margin-top:clamp(26px,2.8vw,40px); display:flex; flex-wrap:wrap;
  gap:10px 30px; font-family:var(--mono); font-size:0.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:#7d8695;
}
.heroX-meta b{ color:#c3cad6; font-weight:500; }

@media (prefers-reduced-motion: reduce){
  .js-motion .heroX h1 .w{ opacity:1; transform:none; animation:none; }
  .view.is-on{ animation:none; }
  .stage-cap .live i{ animation:none; }
}

/* The dark-surface group in refine.css now includes .heroX. This block is the
   belt-and-braces: any control dropped into this hero inherits light-on-dark
   regardless of what the base stylesheet assumed. */
.heroX .btn-ghost{ color:#fff; border-color:rgb(255 255 255/.24); background:transparent; }
@media (hover:hover) and (pointer:fine){
  .heroX .btn-ghost:hover{ background:rgb(255 255 255/.08); border-color:rgb(255 255 255/.44); }
}
.heroX .muted, .heroX .lede{ color:#9ba5b4; }
.heroX a:not(.btn){ color:#ffb387; }

/* ==========================================================================
   Hero building — labels live in HTML, not in the SVG
   The drawing is a 620-unit viewBox rendering at 486px on a desktop and 295px
   on a phone, so anything inside it is multiplied by 0.78 and then 0.48. A
   14px attribute became 6.7px real pixels. The geometry still scales; the type
   does not. Positions are the old SVG coordinates expressed as percentages.
   ========================================================================== */
.bx{ margin:0; }
.bx-art{ position:relative; }
.bx-art svg{ display:block; width:100%; height:auto; }

.bl{
  position:absolute;
  font-family:var(--mono, ui-monospace, monospace);
  font-size:12px;
  line-height:1;
  letter-spacing:.13em;
  color:#8a93a2;               /* 4.9:1 on the #14171d drawing ground */
  white-space:nowrap;
  pointer-events:none;
}
.a-s{ transform:translate(0, -.78em); }
.a-m{ transform:translate(-50%, -.78em); }
.a-e{ transform:translate(-100%, -.78em); }

.bl.is-gw{ color:#f97316; letter-spacing:.14em; }
.bl.is-note{ letter-spacing:.09em; text-transform:none; }
.bl.is-warn{ color:#e0a33c; }

/* The legend duplicates the three leader-line notes. It is hidden while those
   labels are on the drawing, and takes over once they are dropped. */
.bx-key{ display:none; }
.bx figcaption{
  margin-top:14px; font-size:12.5px; line-height:1.55;
  color:#8a93a2; max-width:52ch;
}

/* Below this the drawing is ~300px wide: the leader-line labels would run off
   its left edge, so they move into the legend instead of shrinking. */
@media (max-width: 760px){
  /* The drawing renders about 295px wide here. Eight labels at a legible 12px
     cannot coexist in that space: PUMP ROOM ran into UG TANK, and OH TANK into
     GATEWAY. Rather than shrink the type back down, the drawing keeps the two
     labels that sit in opposite corners and the rest move to the legend. */
  .bl.is-note, .bl.l-oh, .bl.l-pump, .bl.l-ug{ display:none; }
  .bx-art svg .lead{ display:none; }
  .bl{ font-size:12px; letter-spacing:.1em; }
  .bx-key{
    display:grid; gap:7px; margin:14px 0 0; padding:0; list-style:none;
    font-size:12.5px; line-height:1.45; color:#9aa3b2;
  }
  .bx-key li{ display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:start; }
  .bx-key i{ width:7px; height:7px; border-radius:50%; margin-top:.42em; }
  .bx-key .k-ok{ background:#35c08f; }
  .bx-key .k-wn{ background:#e0a33c; }
  .bx-key .k-st i{ background:#4a5260; }
  .bx-key b{ color:#c9d1dc; font-weight:600; }
}