/* Shared rows align the two businesses without absolutely positioning copy. */
.hero.hero-harmony{
  --hero-gap:clamp(28px,4vw,64px);
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(310px,.95fr);
  grid-template-rows:auto auto auto clamp(185px,17vw,260px);
  align-items:stretch;
  column-gap:var(--hero-gap);
  row-gap:22px;
  min-height:100svh;
  padding:112px 4.5vw 42px;
  background:radial-gradient(ellipse at 84% 62%,#10334c 0,transparent 56%),#08121b;
}
.hero-harmony .hero-grid{opacity:.7;pointer-events:none}
.hero-division{
  position:relative;
  z-index:2;
  min-width:0;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:1 / 5;
}
.hero-harmony .hero-cnc-side{grid-column:1}
.hero-harmony .hero-materials-side{grid-column:2;isolation:isolate}
.hero-materials-side::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc(var(--hero-gap) / -2);
  width:1px;
  background:linear-gradient(transparent,rgba(87,157,199,.32) 8%,rgba(87,157,199,.32) 87%,transparent);
  pointer-events:none;
}
.hero-harmony .hero-brand-slot{
  grid-row:1;
  position:relative;
  min-width:0;
  padding-bottom:20px;
  border-bottom:1px solid rgba(107,183,227,.24);
}
.hero-division-label{
  margin:0 0 15px;
  color:#96b8cd;
  font:500 10px/1.4 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero-harmony .hero-brand-art{
  display:flex;
  align-items:flex-start;
  width:100%;
  height:clamp(100px,8.2vw,126px);
}
.hero-harmony .hero-amb-logo{
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:left top;
}
.hero-harmony .hero-materials-brand .materials-logo-original{
  width:auto;
  height:100%;
  max-width:100%;
  margin:0;
  overflow:visible;
}
.hero-harmony .hero-copy{
  grid-row:2;
  position:relative;
  width:100%;
  max-width:none;
  align-self:start;
  min-width:0;
}
.hero-harmony .hero-copy>.eyebrow{
  gap:10px;
  margin:0 0 24px;
  font-size:clamp(13px,1.05vw,17px);
  letter-spacing:.11em;
  line-height:1.4;
}
.hero-harmony .hero-copy>.eyebrow::before{width:23px;height:2px;flex-shrink:0}
.hero-harmony h1{
  margin:0;
  font:600 clamp(68px,7.1vw,112px)/.86 var(--display);
  letter-spacing:-.035em;
}
.hero-harmony h2{
  margin:0;
  font:600 clamp(42px,4.35vw,70px)/.96 var(--display);
  letter-spacing:-.025em;
  color:var(--paper);
}
.hero-harmony h1 em,.hero-harmony h2 em{
  font-family:var(--display);
  font-weight:500;
  font-style:italic;
  letter-spacing:-.025em;
  color:#38a6e7;
}
.hero-harmony .hero-intro{
  max-width:620px;
  margin:25px 0 20px;
  color:#c1d0da;
  font-size:clamp(16px,1.16vw,19px);
  line-height:1.6;
}
.hero-harmony .hero-materials-copy .hero-intro{max-width:345px}
.hero-harmony .market-reach{margin:0;gap:8px}
.hero-harmony .market-reach span{
  border-color:rgba(126,173,199,.26);
  background:rgba(7,25,39,.36);
  font-size:10px;
  line-height:1.25;
  letter-spacing:.055em;
}
.hero-action-row{grid-row:3;position:relative;align-self:end;min-width:0}
.hero-harmony .hero-action{
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  min-height:46px;
  padding:9px 0;
  border-bottom:1px solid rgba(116,188,229,.52);
  color:#f2f5f7;
  font:500 clamp(12px,1vw,15px)/1.4 var(--mono);
  letter-spacing:.065em;
  text-transform:uppercase;
  transition:color .2s,border-color .2s;
}
.hero-harmony .hero-action span{color:#38a6e7;font-size:23px;transition:transform .2s}
.hero-harmony .hero-action:hover{color:#79cfff;border-color:#79cfff}
.hero-harmony .hero-action:hover span{transform:translate(3px,-3px)}
.hero-harmony a:focus-visible{outline:2px solid #79cfff;outline-offset:6px}
.hero-harmony .hero-cnc-gallery{
  grid-row:4;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  min-width:0;
  min-height:0;
}
.hero-harmony .hero-cnc-card{
  position:relative;
  min-width:0;
  height:100%;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(95,166,209,.2);
  background:#102634;
}
.hero-harmony .hero-cnc-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 35%,rgba(4,14,23,.94));
  pointer-events:none;
}
.hero-harmony .hero-cnc-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.8) brightness(.88);
  transition:transform .5s;
}
.hero-harmony .hero-cnc-card:hover img{transform:scale(1.04)}
.hero-harmony .hero-cnc-card figcaption{
  position:absolute;
  z-index:1;
  inset:auto 14px 14px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3px 8px;
  align-items:baseline;
}
.hero-harmony .hero-cnc-card figcaption span{color:#76bfe9;font:500 10px var(--mono)}
.hero-harmony .hero-cnc-card figcaption strong{font:600 clamp(16px,1.5vw,23px)/1.2 var(--sans);letter-spacing:-.03em}
.hero-harmony .hero-cnc-card figcaption small{grid-column:2;color:#b9cbd8;font:400 9px/1.4 var(--mono)}
.hero-harmony .hero-materials-visual{
  position:absolute;
  z-index:-1;
  inset:120px calc(var(--hero-gap) / -2) 0;
  margin:0;
  overflow:hidden;
  pointer-events:none;
  mask-image:linear-gradient(90deg,transparent,black 14%,black 89%,transparent);
}
.hero-harmony .hero-materials-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  filter:saturate(.82) brightness(.92);
}
.hero-harmony .hero-materials-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#08121b 0,rgba(8,18,27,.93) 19%,rgba(8,18,27,.72) 37%,rgba(8,18,27,.12) 64%,rgba(8,18,27,.08) 87%,rgba(8,18,27,.72));
}
.hero-materials-end{grid-row:4;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:10px;min-width:0}
.hero-ai-disclosure{
  align-self:flex-end;
  padding:3px 6px;
  border-radius:2px;
  background:rgba(8,18,27,.75);
  color:#e2eaf0;
  font:400 10px/1.4 var(--sans);
  letter-spacing:.02em;
}
.hero-material-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  width:100%;
  list-style:none;
  margin:0;
  padding:14px 0 0;
  border-top:1px solid rgba(116,188,229,.26);
  color:#dceaf3;
  font:500 11px/1.6 var(--mono);
}
.hero-material-tags li{display:flex;align-items:center;gap:7px}
.hero-material-tags li::before{content:"";width:3px;height:3px;border-radius:50%;background:#38a6e7}
/* Flex fallback keeps the same reading order on browsers without subgrid. */
@supports not (grid-template-rows:subgrid){
  .hero.hero-harmony{grid-template-rows:auto}
  .hero-division{grid-row:1;display:flex;flex-direction:column;gap:22px}
  .hero-harmony .hero-copy{flex:1}
  .hero-harmony .hero-cnc-gallery,.hero-materials-end{height:clamp(185px,17vw,260px);flex:none}
}
@media(min-width:901px) and (max-width:1150px){
  .hero.hero-harmony{--hero-gap:32px;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);padding-left:3.5vw;padding-right:3.5vw}
  .hero-harmony .hero-cnc-card figcaption{inset:auto 10px 12px;display:block}
  .hero-harmony .hero-cnc-card figcaption span{display:none}
  .hero-harmony .hero-cnc-card figcaption small{display:block;margin-top:4px}
}
@media(max-width:900px){
  .hero.hero-harmony{display:flex;flex-direction:column;gap:48px;min-height:0;padding:108px 5vw 54px}
  .hero-division{display:grid;grid-template-rows:auto auto auto 220px;row-gap:22px;grid-column:auto;grid-row:auto}
  .hero-harmony .hero-brand-art{height:112px}
  .hero-harmony h1{font-size:clamp(68px,12vw,106px)}
  .hero-harmony h2{font-size:clamp(48px,7vw,66px)}
  .hero-harmony .hero-intro{max-width:620px;font-size:17px}
  .hero-harmony .hero-materials-copy .hero-intro{max-width:380px}
  .hero-materials-side::before{inset:-24px 0 auto;width:auto;height:1px;background:rgba(87,157,199,.32)}
  .hero-harmony .hero-materials-visual{inset:100px -5vw 0}
  .hero-harmony .hero-materials-visual img{object-fit:contain;object-position:right bottom}
}
@media(max-width:560px){
  .hero.hero-harmony{padding-top:92px;gap:40px}
  .hero-division{grid-template-rows:auto auto auto 180px;row-gap:20px}
  .hero-harmony .hero-brand-art{height:108px}
  .hero-harmony .hero-copy>.eyebrow{font-size:13px;letter-spacing:.06em;margin-bottom:22px}
  .hero-harmony h1{font-size:clamp(60px,17vw,84px)}
  .hero-harmony h2{font-size:clamp(44px,12vw,58px)}
  .hero-harmony .hero-intro{font-size:16px;line-height:1.6}
  .hero-harmony .hero-materials-copy .hero-intro{max-width:300px}
  .hero-harmony .hero-action{font-size:12px}
  .hero-harmony .hero-cnc-gallery{gap:6px}
  .hero-harmony .hero-cnc-card figcaption{inset:auto 8px 10px;display:block}
  .hero-harmony .hero-cnc-card figcaption strong{font-size:clamp(12px,3.5vw,18px)}
  .hero-harmony .hero-cnc-card figcaption small,.hero-harmony .hero-cnc-card figcaption span{display:none}
  .hero-harmony .hero-materials-visual{inset:118px -5vw 0}
  .hero-harmony .hero-materials-visual img{object-fit:cover;object-position:center bottom}
  .hero-material-tags{font-size:10px;gap:5px 12px}
}
@media(prefers-reduced-motion:reduce){
  .hero-harmony *{transition:none!important}
}